mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-03 05:04:51 +08:00
Merge branch 'next' into preview-hooks
# Conflicts: # addons/actions/package.json # addons/events/package.json # examples/html-kitchen-sink/package.json
This commit is contained in:
Norbert de Langen
commit
88c2a98ce5
@ -44,6 +44,13 @@ module.exports = {
|
||||
test: withTests,
|
||||
},
|
||||
},
|
||||
{
|
||||
test: './examples/rax-kitchen-sink',
|
||||
presets: [
|
||||
['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' }],
|
||||
['babel-preset-rax', { development: process.env.BABEL_ENV === 'development' }],
|
||||
],
|
||||
},
|
||||
{
|
||||
test: './lib',
|
||||
presets: [
|
||||
|
||||
@ -38,6 +38,7 @@ jobs:
|
||||
- node_modules
|
||||
- examples
|
||||
- addons
|
||||
- dev-kits
|
||||
- app
|
||||
- lib
|
||||
chromatic:
|
||||
|
||||
@ -67,7 +67,7 @@ react-komposer
|
||||
serializable
|
||||
params
|
||||
README.md
|
||||
storybooks.js.org
|
||||
storybook.js.org
|
||||
YuzuJS
|
||||
setImmediate
|
||||
Malte
|
||||
|
||||
81
.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt
vendored
Normal file
81
.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt
vendored
Normal file
@ -0,0 +1,81 @@
|
||||
package OpenSourceProjects_Storybook.buildTypes
|
||||
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.*
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.buildFeatures.commitStatusPublisher
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.buildSteps.script
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.vcs
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.retryBuild
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.VcsTrigger
|
||||
|
||||
object OpenSourceProjects_Storybook_Bootstrap : BuildType({
|
||||
uuid = "9f9177e7-9ec9-4e2e-aabb-d304fd667712"
|
||||
id = "OpenSourceProjects_Storybook_Bootstrap"
|
||||
name = "Bootstrap"
|
||||
|
||||
artifactRules = """
|
||||
addons/*/dist/** => dist.zip/addons
|
||||
addons/storyshots/*/dist/** => dist.zip/addons/storyshots
|
||||
app/*/dist/** => dist.zip/app
|
||||
dev-kits/*/dist/** => dist.zip/dev-kits
|
||||
lib/*/dist/** => dist.zip/lib
|
||||
lib/core/dll/** => dist.zip/lib/core/dll
|
||||
""".trimIndent()
|
||||
|
||||
vcs {
|
||||
root(OpenSourceProjects_Storybook.vcsRoots.OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster)
|
||||
}
|
||||
|
||||
steps {
|
||||
script {
|
||||
name = "Bootstrap"
|
||||
scriptContent = """
|
||||
#!/bin/sh
|
||||
|
||||
set -e -x
|
||||
|
||||
yarn
|
||||
yarn bootstrap --core
|
||||
""".trimIndent()
|
||||
dockerImage = "node:%docker.node.version%"
|
||||
}
|
||||
}
|
||||
|
||||
triggers {
|
||||
vcs {
|
||||
quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
|
||||
triggerRules = "-:comment=^TeamCity change:**"
|
||||
branchFilter = """
|
||||
+:pull/*
|
||||
+:release/*
|
||||
+:master
|
||||
+:next
|
||||
+:snyk-fix-*
|
||||
""".trimIndent()
|
||||
enabled = false
|
||||
}
|
||||
retryBuild {
|
||||
delaySeconds = 60
|
||||
enabled = false
|
||||
}
|
||||
}
|
||||
|
||||
features {
|
||||
commitStatusPublisher {
|
||||
publisher = github {
|
||||
githubUrl = "https://api.github.com"
|
||||
authType = personalToken {
|
||||
token = "credentialsJSON:5ffe2d7e-531e-4f6f-b1fc-a41bfea26eaa"
|
||||
}
|
||||
}
|
||||
param("github_oauth_user", "Hypnosphi")
|
||||
}
|
||||
}
|
||||
|
||||
requirements {
|
||||
doesNotContain("env.OS", "Windows")
|
||||
}
|
||||
|
||||
cleanup {
|
||||
artifacts(days = 1)
|
||||
}
|
||||
})
|
||||
@ -7,7 +7,7 @@ object OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMa
|
||||
uuid = "cec03c4b-d52c-42a0-8e9e-53bde85d6b33"
|
||||
id = "OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster"
|
||||
name = "Main root"
|
||||
url = "git@github.com:storybooks/storybook.git"
|
||||
url = "git@github.com:storybookjs/storybook.git"
|
||||
branch = "refs/heads/next"
|
||||
branchSpec = """
|
||||
+:refs/(pull/*)/head
|
||||
|
||||
@ -6,8 +6,8 @@ import jetbrains.buildServer.configs.kotlin.v2017_2.vcs.GitVcsRoot
|
||||
object OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster1 : GitVcsRoot({
|
||||
uuid = "5cacf90a-381a-4c73-9aa3-57f6439b545e"
|
||||
id = "OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster1"
|
||||
name = "https://github.com/storybooks/storybook#refs/heads/master (1)"
|
||||
url = "git@github.com:storybooks/storybook.git"
|
||||
name = "https://github.com/storybookjs/storybook#refs/heads/master (1)"
|
||||
url = "git@github.com:storybookjs/storybook.git"
|
||||
branch = "refs/heads/next"
|
||||
authMethod = uploadedKey {
|
||||
userName = "git"
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
|[centered](addons/centered) |+| |+|+| |+|+| |+| |+|+|
|
||||
|[contexts](addons/contexts) |+| |+| | | | | | | | |+|
|
||||
|[events](addons/events) |+| |+|+|+|+|+|+| | |+|+|
|
||||
|[design assets](addons/design-assets) |+| |+|+|+|+|+|+|+|+|+|+|
|
||||
|[graphql](addons/graphql) |+| | | | | | | | | | | |
|
||||
|[google-analytics](addons/google-analytics) |+|+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[info](addons/info) |+| | | | | | | | | | | |
|
||||
|
||||
8234
CHANGELOG.md
8234
CHANGELOG.md
File diff suppressed because it is too large
Load Diff
@ -10,7 +10,7 @@ This repo uses yarn workspaces, so you should install `yarn@1.3.2` or higher as
|
||||
|
||||
No software is bug-free. So, if you got an issue, follow these steps:
|
||||
|
||||
- Search the [issue list](https://github.com/storybooks/storybook/issues?utf8=%E2%9C%93&q=) for current and old issues.
|
||||
- Search the [issue list](https://github.com/storybookjs/storybook/issues?utf8=%E2%9C%93&q=) for current and old issues.
|
||||
- If you find an existing issue, please UPVOTE the issue by adding a "thumbs-up reaction". We use this to help prioritize issues!
|
||||
- If none of that is helping, create an issue with the following information:
|
||||
- Clear title (shorter is better).
|
||||
@ -25,7 +25,7 @@ To test your project against the current latest version of storybook, you can cl
|
||||
#### 1. Download the latest version of this project, and build it:
|
||||
|
||||
```sh
|
||||
git clone https://github.com/storybooks/storybook.git
|
||||
git clone https://github.com/storybookjs/storybook.git
|
||||
cd storybook
|
||||
yarn install
|
||||
yarn bootstrap
|
||||
@ -137,7 +137,7 @@ A good way to do that is using the example `cra-kitchen-sink` app embedded in th
|
||||
|
||||
```sh
|
||||
# Download and build this repository:
|
||||
git clone https://github.com/storybooks/storybook.git
|
||||
git clone https://github.com/storybookjs/storybook.git
|
||||
cd storybook
|
||||
yarn install
|
||||
yarn bootstrap --core
|
||||
@ -156,7 +156,7 @@ git remote add <your-username> https://github.com/<your-username>/storybook.git
|
||||
git push -u <your-username> master
|
||||
```
|
||||
|
||||
If you follow that process, you can then link to the GitHub repository in the issue. See <https://github.com/storybooks/storybook/issues/708#issuecomment-290589886> for an example.
|
||||
If you follow that process, you can then link to the GitHub repository in the issue. See <https://github.com/storybookjs/storybook/issues/708#issuecomment-290589886> for an example.
|
||||
|
||||
**NOTE**: If your issue involves a webpack config, create-react-app will prevent you from modifying the _app's_ webpack config, however, you can still modify storybook's to mirror your app's version of the storybook. Alternatively, use `yarn eject` in the CRA app to get a modifiable webpack config.
|
||||
|
||||
@ -207,7 +207,7 @@ Before you submit a new PR, make sure you run `yarn test`. Do not submit a PR if
|
||||
|
||||
### Reviewing PRs
|
||||
|
||||
**As a PR submitter**, you should reference the issue if there is one, include a short description of what you contributed and, if it is a code change, instructions for how to manually test out the change. This is informally enforced by our [PR template](https://github.com/storybooks/storybook/blob/master/.github/PULL_REQUEST_TEMPLATE.md). If your PR is reviewed as only needing trivial changes (e.g. small typos etc), and you have commit access, then you can merge the PR after making those changes.
|
||||
**As a PR submitter**, you should reference the issue if there is one, include a short description of what you contributed and, if it is a code change, instructions for how to manually test out the change. This is informally enforced by our [PR template](https://github.com/storybookjs/storybook/blob/master/.github/PULL_REQUEST_TEMPLATE.md). If your PR is reviewed as only needing trivial changes (e.g. small typos etc), and you have commit access, then you can merge the PR after making those changes.
|
||||
|
||||
**As a PR reviewer**, you should read through the changes and comment on any potential problems. If you see something cool, a kind word never hurts either! Additionally, you should follow the testing instructions and manually test the changes. If the instructions are missing, unclear, or overly complex, feel free to request better instructions from the submitter. Unless the PR is tagged with the `do not merge` label, if you approve the review and there is no other required discussion or changes, you should also go ahead and merge the PR.
|
||||
|
||||
@ -217,7 +217,7 @@ If you are looking for a way to help the project, triaging issues is a great pla
|
||||
|
||||
### Responding to issues
|
||||
|
||||
Issues that are tagged `question / support` or `needs reproduction` are great places to help. If you can answer a question, it will help the asker as well as anyone searching. If an issue needs reproduction, you may be able to guide the reporter toward one, or even reproduce it yourself using [this technique](https://github.com/storybooks/storybook/blob/master/CONTRIBUTING.md#reproductions).
|
||||
Issues that are tagged `question / support` or `needs reproduction` are great places to help. If you can answer a question, it will help the asker as well as anyone searching. If an issue needs reproduction, you may be able to guide the reporter toward one, or even reproduce it yourself using [this technique](https://github.com/storybookjs/storybook/blob/master/CONTRIBUTING.md#reproductions).
|
||||
|
||||
### Triaging issues
|
||||
|
||||
@ -233,7 +233,7 @@ All issues should have a `type` label. `bug`/`feature`/`question`/`discussion` a
|
||||
|
||||
They should also have one or more `area`/`status` labels. We use these labels to filter issues down so we can easily see all of the issues for a particular area, and keep the total number of open issues under control.
|
||||
|
||||
For example, here is the list of [open, untyped issues](https://github.com/storybooks/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20-label%3A%22bug%22%20-label%3A%22discussion%22%20-label%3A%22feature%22%20-label%3A%22maintenance%22%20-label%3A%22question%20%2F%20support%22%20-label%3A%22documentation%22%20-label%3A%22greenkeeper%22), or here is a list of [bugs that have not been modified since 2017-04-01](https://github.com/storybooks/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3A%22bug%22%20updated%3A%3C%3D2017-04-01%20). For more info see [searching issues](https://help.github.com/articles/searching-issues/) in the Github docs.
|
||||
For example, here is the list of [open, untyped issues](https://github.com/storybookjs/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20-label%3A%22bug%22%20-label%3A%22discussion%22%20-label%3A%22feature%22%20-label%3A%22maintenance%22%20-label%3A%22question%20%2F%20support%22%20-label%3A%22documentation%22%20-label%3A%22greenkeeper%22), or here is a list of [bugs that have not been modified since 2017-04-01](https://github.com/storybookjs/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3A%22bug%22%20updated%3A%3C%3D2017-04-01%20). For more info see [searching issues](https://help.github.com/articles/searching-issues/) in the Github docs.
|
||||
|
||||
If an issue is a `bug`, and it doesn't have a clear reproduction that you have personally confirmed, label it `needs reproduction` and ask the author to try and create a reproduction, or have a go yourself.
|
||||
|
||||
@ -251,7 +251,7 @@ If an issue is a `bug`, and it doesn't have a clear reproduction that you have p
|
||||
|
||||
## Development Guide
|
||||
|
||||
> If you want to work on a UI feature, refer to the [Storybook UI](https://github.com/storybooks/storybook/tree/master/lib/ui) page.
|
||||
> If you want to work on a UI feature, refer to the [Storybook UI](https://github.com/storybookjs/storybook/tree/master/lib/ui) page.
|
||||
|
||||
### Prerequisites
|
||||
|
||||
@ -265,7 +265,7 @@ Please have the **_latest_** stable versions of the following on your machine
|
||||
If you run into trouble here, make sure your node, npm, and **_yarn_** are on the latest versions (yarn at least v1.3.2).
|
||||
|
||||
1. `cd ~` (optional)
|
||||
2. `git clone https://github.com/storybooks/storybook.git` _bonus_: use your own fork for this step
|
||||
2. `git clone https://github.com/storybookjs/storybook.git` _bonus_: use your own fork for this step
|
||||
3. `cd storybook`
|
||||
4. `yarn`
|
||||
5. `yarn bootstrap --core`
|
||||
@ -287,9 +287,9 @@ Within the `examples` folder of the Storybook repo, you will find kitchen sink e
|
||||
Not only do these show many of the options and add-ons available, they are also automatically linked to all the development packages. We highly encourage you to use these to develop/test contributions on.
|
||||
|
||||
#### React and Vue
|
||||
|
||||
1. `yarn storybook`
|
||||
2. Verify that your local version works
|
||||
1. `cd examples/official-storybook`
|
||||
2. `yarn storybook`
|
||||
3. Verify that your local version works
|
||||
|
||||
### Working with your own app
|
||||
|
||||
@ -342,7 +342,7 @@ If you don't see the changes rerun `yarn storybook` again in your sandbox app
|
||||
This section is for Storybook maintainers who will be creating releases. It assumes:
|
||||
|
||||
- yarn >= 1.3.2
|
||||
- you've yarn linked `pr-log` from <https://github.com/storybooks/pr-log/pull/2>
|
||||
- you've yarn linked `pr-log` from <https://github.com/storybookjs/pr-log/pull/2>
|
||||
|
||||
The current manual release sequence is as follows:
|
||||
|
||||
@ -384,7 +384,7 @@ yarn bootstrap --reset --core
|
||||
yarn run publish:next
|
||||
|
||||
# update the release page
|
||||
open https://github.com/storybooks/storybook/releases
|
||||
open https://github.com/storybookjs/storybook/releases
|
||||
```
|
||||
|
||||
#### Full release:
|
||||
@ -408,5 +408,5 @@ yarn bootstrap --reset --core
|
||||
yarn run publish:latest
|
||||
|
||||
# update the release page
|
||||
open https://github.com/storybooks/storybook/releases
|
||||
open https://github.com/storybookjs/storybook/releases
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
## v.Next
|
||||
|
||||
- Deprecated `{ linkTo, action }` as built-in addons: <https://github.com/storybooks/storybook/issues/1017>. From 3.0 use them as you would [any other addon](https://storybook.js.org/addons/using-addons/).
|
||||
- Deprecated `{ linkTo, action }` as built-in addons: <https://github.com/storybookjs/storybook/issues/1017>. From 3.0 use them as you would [any other addon](https://storybook.js.org/addons/using-addons/).
|
||||
|
||||
Before:
|
||||
|
||||
|
||||
76
MIGRATION.md
76
MIGRATION.md
@ -2,6 +2,7 @@
|
||||
|
||||
- [From version 5.0.x to 5.1.x](#from-version-50x-to-51x)
|
||||
- [React native server](#react-native-server)
|
||||
- [Angular 7](#angular-7)
|
||||
- [From version 5.0.1 to 5.0.2](#from-version-501-to-502)
|
||||
- [Deprecate webpack extend mode](#deprecate-webpack-extend-mode)
|
||||
- [From version 4.1.x to 5.0.x](#from-version-41x-to-50x)
|
||||
@ -77,6 +78,29 @@ If you wish to run the optional web server, you will need to do the following mi
|
||||
|
||||
And with that you should be good to go!
|
||||
|
||||
### Angular 7
|
||||
|
||||
Storybook 5.1 relies on `core-js@^3.0.0` and therefore causes a conflict with Angular 7 that relies on `core-js@^2.0.0`. In order to get Storybook running on Angular 7 you can either update to Angular 8 (which dropped `core-js` as a dependency) or follow these steps:
|
||||
|
||||
- Remove `node_modules/@storybook`
|
||||
- `npm i core-js@^3.0.0` / `yarn add core-js@^3.0.0`
|
||||
- Add the following paths to your `tsconfig.json`
|
||||
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"core-js/es7/reflect": ["node_modules/core-js/proposals/reflect-metadata"],
|
||||
"core-js/es6/*": ["node_modules/core-js/es"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You should now be able to run Storybook and Angular 7 without any errors.
|
||||
|
||||
Reference issue: [https://github.com/angular/angular-cli/issues/13954](https://github.com/angular/angular-cli/issues/13954)
|
||||
|
||||
## From version 5.0.1 to 5.0.2
|
||||
|
||||
### Deprecate webpack extend mode
|
||||
@ -113,7 +137,7 @@ module.exports = ({ config }) => ({
|
||||
});
|
||||
```
|
||||
|
||||
Please refer to the [current custom webpack documentation](https://github.com/storybooks/storybook/blob/next/docs/src/pages/configurations/custom-webpack-config/index.md) for more information on custom webpack config and to [Issue #6081](https://github.com/storybooks/storybook/issues/6081) for more information about the change.
|
||||
Please refer to the [current custom webpack documentation](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/custom-webpack-config/index.md) for more information on custom webpack config and to [Issue #6081](https://github.com/storybookjs/storybook/issues/6081) for more information about the change.
|
||||
|
||||
## From version 4.1.x to 5.0.x
|
||||
|
||||
@ -133,11 +157,11 @@ var modules = context.keys();
|
||||
// sort them
|
||||
var sortedModules = modules.slice().sort((a, b) => {
|
||||
// sort the stories based on filename/path
|
||||
return a < b ? -1 : (a > b ? 1 : 0);
|
||||
return a < b ? -1 : a > b ? 1 : 0;
|
||||
});
|
||||
|
||||
// execute them
|
||||
sortedModules.forEach((key) => {
|
||||
sortedModules.forEach(key => {
|
||||
context(key);
|
||||
});
|
||||
```
|
||||
@ -154,11 +178,11 @@ module.exports = ({ config, mode }) => { config.module.rules.push(...); return c
|
||||
|
||||
In contrast, the 4.x configuration function accepted either two or three arguments (`(baseConfig, mode)`, or `(baseConfig, mode, defaultConfig)`). The `config` object in the 5.x signature is equivalent to 4.x's `defaultConfig`.
|
||||
|
||||
Please see the [current custom webpack documentation](https://github.com/storybooks/storybook/blob/next/docs/src/pages/configurations/custom-webpack-config/index.md) for more information on custom webpack config.
|
||||
Please see the [current custom webpack documentation](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/custom-webpack-config/index.md) for more information on custom webpack config.
|
||||
|
||||
## Theming overhaul
|
||||
|
||||
Theming has been rewritten in v5. If you used theming in v4, please consult the [theming docs](https://github.com/storybooks/storybook/blob/next/docs/src/pages/configurations/theming/index.md) to learn about the new API.
|
||||
Theming has been rewritten in v5. If you used theming in v4, please consult the [theming docs](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/theming/index.md) to learn about the new API.
|
||||
|
||||
## Story hierarchy defaults
|
||||
|
||||
@ -244,7 +268,7 @@ Storybook v5 introduce a new tool bar above the story view and you can show\hide
|
||||
|
||||
## Individual story decorators
|
||||
|
||||
The behavior of adding decorators to a kind has changed in SB5 ([#5781](https://github.com/storybooks/storybook/issues/5781)).
|
||||
The behavior of adding decorators to a kind has changed in SB5 ([#5781](https://github.com/storybookjs/storybook/issues/5781)).
|
||||
|
||||
In SB4 it was possible to add decorators to only a subset of the stories of a kind.
|
||||
|
||||
@ -344,7 +368,7 @@ addParameters({ viewport: options });
|
||||
|
||||
The `withViewport` decorator is also no longer supported and should be replaced with a parameter based API as above. Also the `onViewportChange` callback is no longer supported.
|
||||
|
||||
See the [viewport addon README](https://github.com/storybooks/storybook/blob/master/addons/viewport/README.md) for more information.
|
||||
See the [viewport addon README](https://github.com/storybookjs/storybook/blob/master/addons/viewport/README.md) for more information.
|
||||
|
||||
## Addon a11y uses parameters, decorator renamed
|
||||
|
||||
@ -368,7 +392,7 @@ You can also pass `a11y` parameters at the component level (via `storiesOf(...).
|
||||
|
||||
Furthermore, the decorator `checkA11y` has been deprecated and renamed to `withA11y` to make it consistent with other Storybook decorators.
|
||||
|
||||
See the [a11y addon README](https://github.com/storybooks/storybook/blob/master/addons/a11y/README.md) for more information.
|
||||
See the [a11y addon README](https://github.com/storybookjs/storybook/blob/master/addons/a11y/README.md) for more information.
|
||||
|
||||
## New keyboard shortcuts defaults
|
||||
|
||||
@ -431,7 +455,7 @@ There are are a few migrations you should be aware of in 4.1, including one unin
|
||||
|
||||
## Private addon config
|
||||
|
||||
If your Storybook contains custom addons defined that are defined in your app (as opposed to installed from packages) and those addons rely on reconfiguring webpack/babel, Storybook 4.1 may break for you. There's a workaround [described in the issue](https://github.com/storybooks/storybook/issues/4995), and we're working on official support in the next release.
|
||||
If your Storybook contains custom addons defined that are defined in your app (as opposed to installed from packages) and those addons rely on reconfiguring webpack/babel, Storybook 4.1 may break for you. There's a workaround [described in the issue](https://github.com/storybookjs/storybook/issues/4995), and we're working on official support in the next release.
|
||||
|
||||
## React 15.x
|
||||
|
||||
@ -471,7 +495,7 @@ at Object../node_modules/@storybook/components/dist/navigation/MenuLink.js (Menu
|
||||
|
||||
### Generic addons
|
||||
|
||||
4.x introduces generic addon decorators that are not tied to specific view layers [#3555](https://github.com/storybooks/storybook/pull/3555). So for example:
|
||||
4.x introduces generic addon decorators that are not tied to specific view layers [#3555](https://github.com/storybookjs/storybook/pull/3555). So for example:
|
||||
|
||||
```js
|
||||
import { number } from '@storybook/addon-knobs/react';
|
||||
@ -485,7 +509,7 @@ import { number } from '@storybook/addon-knobs';
|
||||
|
||||
### Knobs select ordering
|
||||
|
||||
4.0 also reversed the order of addon-knob's `select` knob keys/values, which had been called `selectV2` prior to this breaking change. See the knobs [package README](https://github.com/storybooks/storybook/blob/master/addons/knobs/README.md#select) for usage.
|
||||
4.0 also reversed the order of addon-knob's `select` knob keys/values, which had been called `selectV2` prior to this breaking change. See the knobs [package README](https://github.com/storybookjs/storybook/blob/master/addons/knobs/README.md#select) for usage.
|
||||
|
||||
### Knobs URL parameters
|
||||
|
||||
@ -502,7 +526,7 @@ In 3.x, editing knobs updated the URL parameters interactively. The implementati
|
||||
|
||||
### Removed addWithInfo
|
||||
|
||||
`Addon-info`'s `addWithInfo` has been marked deprecated since 3.2. In 4.0 we've removed it completely. See the package [README](https://github.com/storybooks/storybook/blob/master/addons/info/README.md) for the proper usage.
|
||||
`Addon-info`'s `addWithInfo` has been marked deprecated since 3.2. In 4.0 we've removed it completely. See the package [README](https://github.com/storybookjs/storybook/blob/master/addons/info/README.md) for the proper usage.
|
||||
|
||||
### Removed RN packager
|
||||
|
||||
@ -520,14 +544,14 @@ The `@storybook/react-native` had built-in addons (`addon-actions` and `addon-li
|
||||
|
||||
1. `imageSnapshot` test function was extracted from `addon-storyshots`
|
||||
and moved to a new package - `addon-storyshots-puppeteer` that now will
|
||||
be dependant on puppeteer. [README](https://github.com/storybooks/storybook/tree/master/addons/storyshots/storyshots-puppeteer)
|
||||
be dependant on puppeteer. [README](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-puppeteer)
|
||||
2. `getSnapshotFileName` export was replaced with the `Stories2SnapsConverter`
|
||||
class that now can be overridden for a custom implementation of the
|
||||
snapshot-name generation. [README](https://github.com/storybooks/storybook/tree/master/addons/storyshots/storyshots-core#stories2snapsconverter)
|
||||
snapshot-name generation. [README](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core#stories2snapsconverter)
|
||||
3. Storybook that was configured with Webpack's `require.context()` feature
|
||||
will need to add a babel plugin to polyfill this functionality.
|
||||
A possible plugin might be [babel-plugin-require-context-hook](https://github.com/smrq/babel-plugin-require-context-hook).
|
||||
[README](https://github.com/storybooks/storybook/tree/master/addons/storyshots/storyshots-core#configure-jest-to-work-with-webpacks-requirecontext)
|
||||
[README](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core#configure-jest-to-work-with-webpacks-requirecontext)
|
||||
|
||||
### Webpack 4
|
||||
|
||||
@ -613,12 +637,12 @@ This example applies notes globally to all stories. You can apply it locally wit
|
||||
|
||||
The story parameters correspond directly to the old withX arguments, so it's easy to migrate your code. See the parameters documentation for the packages that have been upgraded:
|
||||
|
||||
- [Notes](https://github.com/storybooks/storybook/blob/master/addons/notes/README.md)
|
||||
- [Jest](https://github.com/storybooks/storybook/blob/master/addons/jest/README.md)
|
||||
- [Knobs](https://github.com/storybooks/storybook/blob/master/addons/knobs/README.md)
|
||||
- [Viewport](https://github.com/storybooks/storybook/blob/master/addons/viewport/README.md)
|
||||
- [Backgrounds](https://github.com/storybooks/storybook/blob/master/addons/backgrounds/README.md)
|
||||
- [Options](https://github.com/storybooks/storybook/blob/master/addons/options/README.md)
|
||||
- [Notes](https://github.com/storybookjs/storybook/blob/master/addons/notes/README.md)
|
||||
- [Jest](https://github.com/storybookjs/storybook/blob/master/addons/jest/README.md)
|
||||
- [Knobs](https://github.com/storybookjs/storybook/blob/master/addons/knobs/README.md)
|
||||
- [Viewport](https://github.com/storybookjs/storybook/blob/master/addons/viewport/README.md)
|
||||
- [Backgrounds](https://github.com/storybookjs/storybook/blob/master/addons/backgrounds/README.md)
|
||||
- [Options](https://github.com/storybookjs/storybook/blob/master/addons/options/README.md)
|
||||
|
||||
## From version 3.3.x to 3.4.x
|
||||
|
||||
@ -626,10 +650,10 @@ There are no expected breaking changes in the 3.4.x release, but 3.4 contains a
|
||||
|
||||
## From version 3.2.x to 3.3.x
|
||||
|
||||
It wasn't expected that there would be any breaking changes in this release, but unfortunately it turned out that there are some. We're revisiting our [release strategy](https://github.com/storybooks/storybook/blob/master/RELEASES.md) to follow semver more strictly.
|
||||
It wasn't expected that there would be any breaking changes in this release, but unfortunately it turned out that there are some. We're revisiting our [release strategy](https://github.com/storybookjs/storybook/blob/master/RELEASES.md) to follow semver more strictly.
|
||||
Also read on if you're using `addon-knobs`: we advise an update to your code for efficiency's sake.
|
||||
|
||||
### `babel-core` is now a peer dependency ([#2494](https://github.com/storybooks/storybook/pull/2494))
|
||||
### `babel-core` is now a peer dependency ([#2494](https://github.com/storybookjs/storybook/pull/2494))
|
||||
|
||||
This affects you if you don't use babel in your project. You may need to add `babel-core` as dev dependency:
|
||||
|
||||
@ -639,13 +663,13 @@ yarn add babel-core --dev
|
||||
|
||||
This was done to support different major versions of babel.
|
||||
|
||||
### Base webpack config now contains vital plugins ([#1775](https://github.com/storybooks/storybook/pull/1775))
|
||||
### Base webpack config now contains vital plugins ([#1775](https://github.com/storybookjs/storybook/pull/1775))
|
||||
|
||||
This affects you if you use custom webpack config in [Full Control Mode](https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode) while not preserving the plugins from `storybookBaseConfig`. Before `3.3`, preserving them was just a recommendation, but now it [became](https://github.com/storybooks/storybook/pull/2578) a requirement.
|
||||
This affects you if you use custom webpack config in [Full Control Mode](https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode) while not preserving the plugins from `storybookBaseConfig`. Before `3.3`, preserving them was just a recommendation, but now it [became](https://github.com/storybookjs/storybook/pull/2578) a requirement.
|
||||
|
||||
### Refactored Knobs
|
||||
|
||||
Knobs users: there was a bug in 3.2.x where using the knobs addon imported all framework runtimes (e.g. React and Vue). To fix the problem, we [refactored knobs](https://github.com/storybooks/storybook/pull/1832). Switching to the new style is easy:
|
||||
Knobs users: there was a bug in 3.2.x where using the knobs addon imported all framework runtimes (e.g. React and Vue). To fix the problem, we [refactored knobs](https://github.com/storybookjs/storybook/pull/1832). Switching to the new style is easy:
|
||||
|
||||
In the case of React or React-Native, import knobs like this:
|
||||
|
||||
|
||||
47
README.md
47
README.md
@ -1,12 +1,12 @@
|
||||
# Storybook
|
||||
|
||||
<p align="center">
|
||||
<a href="https://circleci.com/gh/storybooks/storybook"><img src="https://circleci.com/gh/storybooks/storybook.svg?style=shield" alt="Build Status on CircleCI" /></a>
|
||||
<a href="https://www.codefactor.io/repository/github/storybooks/storybook"><img src="https://www.codefactor.io/repository/github/storybooks/storybook/badge" alt="CodeFactor" /></a>
|
||||
<a href="https://snyk.io/test/github/storybooks/storybook"><img src="https://snyk.io/test/github/storybooks/storybook/badge.svg" alt="Known Vulnerabilities" /></a>
|
||||
<a href="https://bettercodehub.com/results/storybooks/storybook"><img src="https://bettercodehub.com/edge/badge/storybooks/storybook" alt="BCH compliance" /></a>
|
||||
<a href="https://codecov.io/gh/storybooks/storybook"><img src="https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg" alt="codecov" /></a>
|
||||
<a href="https://github.com/storybooks/storybook/blob/master/LICENSE"><img src="https://img.shields.io/github/license/storybooks/storybook.svg" alt="License" /></a></p>
|
||||
<a href="https://circleci.com/gh/storybookjs/storybook"><img src="https://circleci.com/gh/storybookjs/storybook.svg?style=shield" alt="Build Status on CircleCI" /></a>
|
||||
<a href="https://www.codefactor.io/repository/github/storybookjs/storybook"><img src="https://www.codefactor.io/repository/github/storybookjs/storybook/badge" alt="CodeFactor" /></a>
|
||||
<a href="https://snyk.io/test/github/storybookjs/storybook"><img src="https://snyk.io/test/github/storybookjs/storybook/badge.svg" alt="Known Vulnerabilities" /></a>
|
||||
<a href="https://bettercodehub.com/results/storybookjs/storybook"><img src="https://bettercodehub.com/edge/badge/storybookjs/storybook" alt="BCH compliance" /></a>
|
||||
<a href="https://codecov.io/gh/storybookjs/storybook"><img src="https://codecov.io/gh/storybookjs/storybook/branch/master/graph/badge.svg" alt="codecov" /></a>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/master/LICENSE"><img src="https://img.shields.io/github/license/storybookjs/storybook.svg" alt="License" /></a></p>
|
||||
</p>
|
||||
<p align="center">
|
||||
<a href="https://discord.gg/sMFvFsG"><img src="https://img.shields.io/badge/discord-join-7289DA.svg?logo=discord&longCache=true&style=flat" /></a>
|
||||
@ -84,18 +84,18 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl
|
||||
|
||||
| Framework | Demo | |
|
||||
| -------------------------------- | ------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [v5.0.0](https://storybooks-official.netlify.com) | [](app/react) |
|
||||
| [React](app/react) | [v5.1.0](https://storybooks-official.netlify.com) | [](app/react) |
|
||||
| [React Native](app/react-native) | - | [](app/react-native) |
|
||||
| [Vue](app/vue) | [v5.0.0](https://storybooks-vue.netlify.com/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [v5.0.0](https://storybooks-angular.netlify.com/) | [](app/angular) |
|
||||
| [Polymer](app/polymer) | [v5.0.0](https://storybooks-polymer.netlify.com/) | [](app/polymer) |
|
||||
| [Mithril](app/mithril) | [v5.0.0](https://storybooks-mithril.netlify.com/) | [](app/mithril) |
|
||||
| [Marko](app/marko) | [v5.0.0](https://storybooks-marko.netlify.com/) | [](app/marko) |
|
||||
| [HTML](app/html) | [v5.0.0](https://storybooks-html.netlify.com/) | [](app/html) |
|
||||
| [Svelte](app/svelte) | [v5.0.0](https://storybooks-svelte.netlify.com/) | [](app/svelte) |
|
||||
| [Riot](app/riot) | [v5.0.0](https://storybooks-riot.netlify.com/) | [](app/riot) |
|
||||
| [Ember](app/ember) | [v5.0.0](https://storybooks-ember.netlify.com/) | [](app/ember) |
|
||||
| [Preact](app/preact) | [v5.0.0](https://storybooks-preact.netlify.com/) | [](app/preact) |
|
||||
| [Vue](app/vue) | [v5.1.0](https://storybooks-vue.netlify.com/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [v5.1.0](https://storybooks-angular.netlify.com/) | [](app/angular) |
|
||||
| [Polymer](app/polymer) | [v5.1.0](https://storybooks-polymer.netlify.com/) | [](app/polymer) |
|
||||
| [Mithril](app/mithril) | [v5.1.0](https://storybooks-mithril.netlify.com/) | [](app/mithril) |
|
||||
| [Marko](app/marko) | [v5.1.0](https://storybooks-marko.netlify.com/) | [](app/marko) |
|
||||
| [HTML](app/html) | [v5.1.0](https://storybooks-html.netlify.com/) | [](app/html) |
|
||||
| [Svelte](app/svelte) | [v5.1.0](https://storybooks-svelte.netlify.com/) | [](app/svelte) |
|
||||
| [Riot](app/riot) | [v5.1.0](https://storybooks-riot.netlify.com/) | [](app/riot) |
|
||||
| [Ember](app/ember) | [v5.1.0](https://storybooks-ember.netlify.com/) | [](app/ember) |
|
||||
| [Preact](app/preact) | [v5.1.0](https://storybooks-preact.netlify.com/) | [](app/preact) |
|
||||
|
||||
### Sub Projects
|
||||
|
||||
@ -112,6 +112,7 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl
|
||||
| [centered](addons/centered/) | Center the alignment of your components within the Storybook UI |
|
||||
| [contexts](addons/contexts/) | Interactively inject component contexts for stories in the Storybook UI |
|
||||
| [cssresources](addons/cssresources/) | Dynamically add/remove css resources to the component iframe |
|
||||
| [design assets](addons/design-assets/) | View images, videos, weblinks alongside your story |
|
||||
| [events](addons/events/) | Interactively fire events to components that respond to EventEmitter |
|
||||
| [graphql](addons/graphql/) | Query a GraphQL server within Storybook stories |
|
||||
| [google-analytics](addons/google-analytics) | Reports google analytics on stories |
|
||||
@ -131,13 +132,13 @@ See [Addon / Framework Support Table](ADDONS_SUPPORT.md)
|
||||
|
||||
We have a badge! Link it to your live Storybook example.
|
||||
|
||||
|
||||
|
||||
|
||||
```md
|
||||
[](link to site)
|
||||
[](link to site)
|
||||
```
|
||||
|
||||
If you're looking for material to use in your presentation about storybook, like logo's video material and the colors we use etc, you can find all of that at our [press repo](https://github.com/storybooks/press).
|
||||
If you're looking for material to use in your presentation about storybook, like logo's video material and the colors we use etc, you can find all of that at our [press repo](https://github.com/storybookjs/press).
|
||||
|
||||
## Community
|
||||
|
||||
@ -157,11 +158,13 @@ We welcome contributions to Storybook!
|
||||
|
||||
Looking for a first issue to tackle?
|
||||
|
||||
- We tag issues with [](https://github.com/storybooks/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) when we think they are well suited for people who are new to the codebase or OSS in general.
|
||||
- We tag issues with [](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) when we think they are well suited for people who are new to the codebase or OSS in general.
|
||||
- [Talk to us](https://discord.gg/sMFvFsG), we'll find something to suits your skills and learning interest.
|
||||
|
||||
### Development scripts
|
||||
|
||||
Storybook is organized as a monorepo using [Lerna](https://lernajs.io). Useful scripts include:
|
||||
|
||||
#### `yarn bootstrap`
|
||||
|
||||
> Installs package dependencies and links packages together - using lerna
|
||||
@ -258,6 +261,6 @@ Support us with a monthly donation and help us continue our activities. \[[Becom
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/storybooks/storybook/blob/master/LICENSE)
|
||||
[MIT](https://github.com/storybookjs/storybook/blob/master/LICENSE)
|
||||
|
||||
-the end-
|
||||
|
||||
@ -81,7 +81,7 @@ there gathering upvotes and "me too" comments. We need a way to make sure that
|
||||
these bugs get addressed.
|
||||
|
||||
For every non-PATCH release, we nominate a small number of bugs that must be
|
||||
addressed before a release can go out by adding them to the milestone. For example, here's a list of blocking bugs [for the 3.2 milestone](https://github.com/storybooks/storybook/milestone/3).
|
||||
addressed before a release can go out by adding them to the milestone. For example, here's a list of blocking bugs [for the 3.2 milestone](https://github.com/storybookjs/storybook/milestone/3).
|
||||
|
||||
Adding bugs to the milestone helps people looking for good ways to contribute,
|
||||
or to understand what is blocking the release so they can actually do something
|
||||
@ -91,7 +91,7 @@ channel [in our Slack](https://now-examples-slackin-rrirkqohko.now.sh/) [.
|
||||
search](https://github.com/storybookjs/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20sort%3Areactions-%2B1-desc%20label%3Abug).
|
||||
|
||||
And of course, the best way to make sure a bug gets addressed quickly is to fix
|
||||
it yourself and issue a PR. If the fix is good, we'll try to release it quickly
|
||||
@ -101,8 +101,8 @@ in a patch release.
|
||||
|
||||
- For PATCH changes, all discussion can occur in issue/PR comments (and random slack chat as needed).
|
||||
- For MINOR feature changes, there are multiple stages of discussion:
|
||||
- The feature may be discussed in an issue before it is implemented (ex: <https://github.com/storybooks/storybook/issues/151>)
|
||||
- Once it's implemented, the discussion may occur on the PR (ex: <https://github.com/storybooks/storybook/pull/1329>)
|
||||
- The feature may be discussed in an issue before it is implemented (ex: <https://github.com/storybookjs/storybook/issues/151>)
|
||||
- Once it's implemented, the discussion may occur on the PR (ex: <https://github.com/storybookjs/storybook/pull/1329>)
|
||||
- If people disagree on an implementation and it can't be resolved in discussion, they may issue alternative PR's with different ideas
|
||||
- Ultimately the maintainers will reach a consensus before merging the changes. There is no set process for this, but we're all adults.
|
||||
- Since MINOR features are released in alpha before they are fully released, new issues may be created by end users, etc.
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
|
||||
This storybook addon can be helpful to make your UI components more accessible.
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
|
||||
## Getting started
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -10,13 +10,13 @@
|
||||
"valid",
|
||||
"verify"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook#readme",
|
||||
"homepage": "https://github.com/storybookjs/storybook#readme",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/storybooks/storybook.git",
|
||||
"url": "git+https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/a11y"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -26,12 +26,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.0-rc.3",
|
||||
"@storybook/api": "5.1.0-rc.3",
|
||||
"@storybook/client-logger": "5.1.0-rc.3",
|
||||
"@storybook/components": "5.1.0-rc.3",
|
||||
"@storybook/core-events": "5.1.0-rc.3",
|
||||
"@storybook/theming": "5.1.0-rc.3",
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/api": "5.1.1",
|
||||
"@storybook/client-logger": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/theming": "5.1.1",
|
||||
"axe-core": "^3.2.2",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
|
||||
@ -120,6 +120,7 @@ exports[`A11YPanel should render report 1`] = `
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
background: #FFFFFF;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.emotion-3 {
|
||||
@ -215,6 +216,7 @@ exports[`A11YPanel should render report 1`] = `
|
||||
"inserted": Object {
|
||||
"0": true,
|
||||
"110qmus": true,
|
||||
"11xgcgt": true,
|
||||
"1551xjo": true,
|
||||
"15paq49": true,
|
||||
"1977chw": true,
|
||||
@ -222,7 +224,6 @@ exports[`A11YPanel should render report 1`] = `
|
||||
"1ez3l8h": true,
|
||||
"1kbt4a0": true,
|
||||
"1l7fvsg": true,
|
||||
"1myfomu": true,
|
||||
"1vwgrhn": true,
|
||||
"4ryd4s": true,
|
||||
"6hqipu": true,
|
||||
@ -490,7 +491,7 @@ exports[`A11YPanel should render report 1`] = `
|
||||
data-emotion="css"
|
||||
>
|
||||
|
||||
.emotion-4{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;}
|
||||
.emotion-4{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;z-index:1;}
|
||||
</style>
|
||||
<style
|
||||
data-emotion="css"
|
||||
@ -716,7 +717,7 @@ exports[`A11YPanel should render report 1`] = `
|
||||
data-emotion="css"
|
||||
>
|
||||
|
||||
.emotion-4{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;}
|
||||
.emotion-4{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;z-index:1;}
|
||||
</style>,
|
||||
<style
|
||||
data-emotion="css"
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
|
||||
Storybook Addon Actions can be used to display data received by event handlers in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
@ -22,7 +22,7 @@ import '@storybook/addon-actions/register';
|
||||
|
||||
Import the `action` function and use it to create actions handlers. When creating action handlers, provide a **name** to make it easier to identify.
|
||||
|
||||
> _Note: Make sure NOT to use reserved words as function names. [issues#29](https://github.com/storybooks/storybook-addon-actions/issues/29#issuecomment-288274794)_
|
||||
> _Note: Make sure NOT to use reserved words as function names. [issues#29](https://github.com/storybookjs/storybook-addon-actions/issues/29#issuecomment-288274794)_
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/actions",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/actions",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/actions"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -21,12 +21,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.0-rc.3",
|
||||
"@storybook/api": "5.1.0-rc.3",
|
||||
"@storybook/client-api": "5.1.0-rc.3",
|
||||
"@storybook/components": "5.1.0-rc.3",
|
||||
"@storybook/core-events": "5.1.0-rc.3",
|
||||
"@storybook/theming": "5.1.0-rc.3",
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/api": "5.1.1",
|
||||
"@storybook/client-api": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/theming": "5.1.1",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^2.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
Storybook Background Addon can be used to change background colors inside the preview in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -8,13 +8,13 @@
|
||||
"react",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/backgrounds",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/backgrounds",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/backgrounds"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -25,12 +25,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.0-rc.3",
|
||||
"@storybook/api": "5.1.0-rc.3",
|
||||
"@storybook/client-logger": "5.1.0-rc.3",
|
||||
"@storybook/components": "5.1.0-rc.3",
|
||||
"@storybook/core-events": "5.1.0-rc.3",
|
||||
"@storybook/theming": "5.1.0-rc.3",
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/api": "5.1.1",
|
||||
"@storybook/client-logger": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/theming": "5.1.1",
|
||||
"core-js": "^3.0.1",
|
||||
"memoizerific": "^1.11.3",
|
||||
"react": "^16.8.4",
|
||||
|
||||
@ -63,14 +63,15 @@ const getSelectedBackgroundColor = (list: Input[], currentSelectedValue: string)
|
||||
return 'transparent';
|
||||
};
|
||||
|
||||
const mapper = ({ api, state }: Combo): { items: Input[] } => {
|
||||
const mapper = ({ api, state }: Combo): { items: Input[]; selected: string | null } => {
|
||||
const story = state.storiesHash[state.storyId];
|
||||
const list = story ? api.getParameters(story.id, PARAM_KEY) : [];
|
||||
const selected = state.addons[PARAM_KEY] || null;
|
||||
|
||||
return { items: list || [] };
|
||||
return { items: list || [], selected };
|
||||
};
|
||||
|
||||
const getDisplayedItems = memoize(10)((list: Input[], selected: State['selected'], change) => {
|
||||
const getDisplayedItems = memoize(10)((list: Input[], selected: string | null, change) => {
|
||||
let availableBackgroundSelectorItems: Item[] = [];
|
||||
|
||||
if (selected !== 'transparent') {
|
||||
@ -91,21 +92,34 @@ const getDisplayedItems = memoize(10)((list: Input[], selected: State['selected'
|
||||
return availableBackgroundSelectorItems;
|
||||
});
|
||||
|
||||
interface GlobalState {
|
||||
name: string | undefined;
|
||||
selected: string | undefined;
|
||||
}
|
||||
|
||||
interface State {
|
||||
selected: string;
|
||||
expanded: boolean;
|
||||
}
|
||||
|
||||
export class BackgroundSelector extends Component<{ api: API }, State> {
|
||||
interface Props {
|
||||
api: API;
|
||||
}
|
||||
|
||||
export class BackgroundSelector extends Component<Props, State> {
|
||||
state: State = {
|
||||
selected: null,
|
||||
expanded: false,
|
||||
};
|
||||
|
||||
change = ({ selected, name }: { selected: string; name: string }) => {
|
||||
change = ({ selected, name }: GlobalState) => {
|
||||
const { api } = this.props;
|
||||
const { expanded } = this.state;
|
||||
if (expanded) {
|
||||
this.setState({ expanded: false });
|
||||
}
|
||||
if (typeof selected === 'string') {
|
||||
api.setAddonState<string>(PARAM_KEY, selected);
|
||||
}
|
||||
api.emit(EVENTS.UPDATE, { selected, name });
|
||||
this.setState({ selected, expanded: false });
|
||||
};
|
||||
|
||||
onVisibilityChange = (s: boolean) => {
|
||||
@ -116,11 +130,11 @@ export class BackgroundSelector extends Component<{ api: API }, State> {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { expanded, selected } = this.state;
|
||||
const { expanded } = this.state;
|
||||
|
||||
return (
|
||||
<Consumer filter={mapper}>
|
||||
{({ items }: { items: Input[] }) => {
|
||||
{({ items, selected }: ReturnType<typeof mapper>) => {
|
||||
const selectedBackgroundColor = getSelectedBackgroundColor(items, selected);
|
||||
const links = getDisplayedItems(items, selectedBackgroundColor, this.change);
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ export const withBackgrounds = deprecate(
|
||||
},
|
||||
}),
|
||||
`Note that withBackgrounds(options) has been replaced by addParameters({ backgrounds: options})
|
||||
Read more about it in the migration guide: https://github.com/storybooks/storybook/blob/master/MIGRATION.md`
|
||||
Read more about it in the migration guide: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md`
|
||||
);
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
Storybook Centered Decorator can be used to center components inside the preview in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
### Usage
|
||||
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Storybook decorator to center components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/centered",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/centered",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/centered"
|
||||
},
|
||||
"license": "MIT",
|
||||
|
||||
1
addons/centered/rax.js
Normal file
1
addons/centered/rax.js
Normal file
@ -0,0 +1 @@
|
||||
module.exports = require('./dist/rax');
|
||||
18
addons/centered/src/rax.js
Normal file
18
addons/centered/src/rax.js
Normal file
@ -0,0 +1,18 @@
|
||||
/** @jsx createElement */
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import { createElement } from 'rax';
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import View from 'rax-view';
|
||||
import styles from './styles';
|
||||
|
||||
export default function(storyFn) {
|
||||
return (
|
||||
<View style={styles.style}>
|
||||
<View style={styles.innerStyle}>{storyFn()}</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
@ -186,7 +186,7 @@ An unique name for representing the props.
|
||||
|
||||
The `props` that is accepted by the wrapping component(s).
|
||||
|
||||
#### `params.defualt : true?`
|
||||
#### `params.default : true?`
|
||||
|
||||
(default: `undefined`)
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-contexts",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Storybook Addon Contexts",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -20,7 +20,7 @@
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/contexts"
|
||||
},
|
||||
"scripts": {
|
||||
@ -28,10 +28,10 @@
|
||||
"dev:check-types": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.0-rc.3",
|
||||
"@storybook/api": "5.1.0-rc.3",
|
||||
"@storybook/components": "5.1.0-rc.3",
|
||||
"@storybook/core-events": "5.1.0-rc.3"
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/api": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"global": "*",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
Storybook Addon Cssresources to switch between css resources at runtime for your story [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-cssresources",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "A storybook addon to switch between css resources at runtime for your story",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -10,11 +10,11 @@
|
||||
],
|
||||
"homepage": "https://storybook.js.org",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/cssresources"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -25,10 +25,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.0-rc.3",
|
||||
"@storybook/api": "5.1.0-rc.3",
|
||||
"@storybook/components": "5.1.0-rc.3",
|
||||
"@storybook/core-events": "5.1.0-rc.3",
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/api": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.4"
|
||||
|
||||
55
addons/design-assets/README.md
Normal file
55
addons/design-assets/README.md
Normal file
@ -0,0 +1,55 @@
|
||||
# Storybook addon for design assets
|
||||
|
||||
This addon for storybook allows you to link to image files, other files, and even url's for embedding in the storybook panel!
|
||||
|
||||
You can add as many assets to a single story as you want.
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
npm install @storybook/addon-design-assets
|
||||
```
|
||||
|
||||
## Usage
|
||||
within `addons.js`:
|
||||
|
||||
```js
|
||||
import '@storybook/addon-design-assets/register';
|
||||
```
|
||||
|
||||
within your stories:
|
||||
```js
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import imageUrl from './images/my-image.jpg';
|
||||
|
||||
storiesOf('root|group/component', module)
|
||||
.addParameters({
|
||||
assets: [
|
||||
imageUrl, // link to a file imported
|
||||
'https://via.placeholder.com/300/09f/fff.png', // link to an external image
|
||||
'https://www.example.com', // link to a webpage
|
||||
'https://www.example.com?id={id}', // link to a webpage with the current story's id in the url
|
||||
],
|
||||
})
|
||||
.add('variant', () => <div>your story here</div>);
|
||||
```
|
||||
|
||||
If you have a set of different assets on 1 story, you might want to name then:
|
||||
```js
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import imageUrl from './images/my-image.jpg';
|
||||
|
||||
storiesOf('root|group/component', module)
|
||||
.addParameters({
|
||||
assets: [{
|
||||
url: 'https://via.placeholder.com/300/09f/fff.png', // link to an external image
|
||||
name: 'blue',
|
||||
}, {
|
||||
url: 'https://via.placeholder.com/300/f90/fff.png', // link to an external image
|
||||
name: 'orange',
|
||||
}],
|
||||
})
|
||||
.add('variant', () => <div>your story here</div>);
|
||||
```
|
||||
48
addons/design-assets/package.json
Normal file
48
addons/design-assets/package.json
Normal file
@ -0,0 +1,48 @@
|
||||
{
|
||||
"name": "@storybook/addon-design-assets",
|
||||
"version": "5.1.1",
|
||||
"description": "Design asset preview for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook",
|
||||
"parameter",
|
||||
"design",
|
||||
"assets",
|
||||
"files",
|
||||
"viewer"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook#readme",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/design-assets"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/api": "5.1.1",
|
||||
"@storybook/client-logger": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/theming": "5.1.1",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.4",
|
||||
"use-image": "^1.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/common-tags": "^1.8.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
1
addons/design-assets/register.js
Normal file
1
addons/design-assets/register.js
Normal file
@ -0,0 +1 @@
|
||||
require('./dist/register');
|
||||
3
addons/design-assets/src/constants.ts
Executable file
3
addons/design-assets/src/constants.ts
Executable file
@ -0,0 +1,3 @@
|
||||
export const ADDON_ID = 'storybook/design-assets';
|
||||
export const PANEL_ID = `${ADDON_ID}/panel`;
|
||||
export const PARAM_KEY = `assets`;
|
||||
79
addons/design-assets/src/panel.tsx
Normal file
79
addons/design-assets/src/panel.tsx
Normal file
@ -0,0 +1,79 @@
|
||||
import React, { Fragment, useMemo, ReactElement } from 'react';
|
||||
|
||||
import { useParameter, useAddonState, useStorybookState } from '@storybook/api';
|
||||
import { styled } from '@storybook/theming';
|
||||
import { ActionBar } from '@storybook/components';
|
||||
import { PARAM_KEY, ADDON_ID } from './constants';
|
||||
|
||||
interface AssetDescription {
|
||||
url: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
type Results = (string | AssetDescription)[];
|
||||
type Selected = number;
|
||||
|
||||
const Iframe = styled.iframe({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: '0 none',
|
||||
});
|
||||
const Img = styled.img({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: '0 none',
|
||||
objectFit: 'contain',
|
||||
});
|
||||
|
||||
const Asset = ({ url }: { url: string | undefined }): ReactElement => {
|
||||
if (!url) {
|
||||
return null;
|
||||
}
|
||||
if (url.match(/\.(png|gif|jpeg|tiff|svg|anpg|webp)/)) {
|
||||
// do image viewer
|
||||
return <Img alt="" src={url} />;
|
||||
}
|
||||
if (url.match(/\.(mp4|ogv|webm)/)) {
|
||||
// do video viewer
|
||||
return <div>not implemented yet, sorry</div>;
|
||||
}
|
||||
|
||||
return <Iframe title={url} src={url} />;
|
||||
};
|
||||
|
||||
const getUrl = (input: AssetDescription | string): string => {
|
||||
return typeof input === 'string' ? input : input.url;
|
||||
};
|
||||
|
||||
export const Panel = () => {
|
||||
const results = useParameter<Results>(PARAM_KEY, []);
|
||||
const [selected, setSelected] = useAddonState<Selected>(ADDON_ID, 0);
|
||||
const { storyId } = useStorybookState();
|
||||
|
||||
if (results.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (results.length && !results[selected]) {
|
||||
setSelected(0);
|
||||
return null;
|
||||
}
|
||||
|
||||
return useMemo(() => {
|
||||
const url = getUrl(results[selected]).replace('{id}', storyId);
|
||||
return (
|
||||
<Fragment>
|
||||
<Asset url={url} />
|
||||
{results.length > 1 ? (
|
||||
<ActionBar
|
||||
key="actionbar"
|
||||
actionItems={results.map((i, index) => ({
|
||||
title: typeof i === 'string' ? `asset #${index + 1}` : i.name,
|
||||
onClick: () => setSelected(index),
|
||||
}))}
|
||||
/>
|
||||
) : null}
|
||||
</Fragment>
|
||||
);
|
||||
}, [results, selected, storyId]);
|
||||
};
|
||||
18
addons/design-assets/src/register.tsx
Normal file
18
addons/design-assets/src/register.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
|
||||
import { addons, types } from '@storybook/addons';
|
||||
import { AddonPanel } from '@storybook/components';
|
||||
import { ADDON_ID, PANEL_ID } from './constants';
|
||||
import { Panel } from './panel';
|
||||
|
||||
addons.register(ADDON_ID, () => {
|
||||
addons.add(PANEL_ID, {
|
||||
title: 'design assets',
|
||||
type: types.PANEL,
|
||||
render: ({ active, key }) => (
|
||||
<AddonPanel active={active} key={key}>
|
||||
<Panel />
|
||||
</AddonPanel>
|
||||
),
|
||||
});
|
||||
});
|
||||
13
addons/design-assets/tsconfig.json
Normal file
13
addons/design-assets/tsconfig.json
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": ["webpack-env"]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/__tests__/**/*"
|
||||
]
|
||||
}
|
||||
@ -1,8 +1,8 @@
|
||||
# Storybook Addon Events
|
||||
|
||||
This [storybook](https://storybooks.js.org) ([source](https://github.com/storybooks/storybook)) addon allows you to add events for your stories.
|
||||
This [storybook](https://storybooks.js.org) ([source](https://github.com/storybookjs/storybook)) addon allows you to add events for your stories.
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
[Storybook Addon Events Live Demo](https://z4o4z.github.io/storybook-addon-events/index.html)
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -8,13 +8,13 @@
|
||||
"react",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/events",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/events",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/events"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -24,10 +24,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.0-rc.3",
|
||||
"@storybook/client-api": "5.1.0-rc.3",
|
||||
"@storybook/core-events": "5.1.0-rc.3",
|
||||
"@storybook/theming": "5.1.0-rc.3",
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/client-api": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/theming": "5.1.1",
|
||||
"core-js": "^3.0.1",
|
||||
"format-json": "^1.0.3",
|
||||
"prop-types": "^15.7.2",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
Storybook Addon Google Analytics can be used to support google analytics in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
## Getting Started
|
||||
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
{
|
||||
"name": "@storybook/addon-google-analytics",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Storybook addon for google analytics",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/google-analytics",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/google-analytics",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/google-analytics"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -20,8 +20,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.0-rc.3",
|
||||
"@storybook/core-events": "5.1.0-rc.3",
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react-ga": "^2.5.7"
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
|
||||
Storybook GraphQL Addon can be used to display the GraphiQL IDE with example queries in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/graphql",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/graphql",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/graphql"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -22,8 +22,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.0-rc.3",
|
||||
"@storybook/api": "5.1.0-rc.3",
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/api": "5.1.1",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"graphiql": "^0.13.0",
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
Storybook Info Addon will show additional information for your stories in [Storybook](https://storybook.js.org).
|
||||
Useful when you want to display usage or other types of documentation alongside your story.
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
@ -198,7 +198,7 @@ In order, all of them will be combined together, with a later call overriding th
|
||||
propTablesExclude: Array<React.ComponentType>,
|
||||
/**
|
||||
* Overrides styles of addon. The object should follow this shape:
|
||||
* https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19.
|
||||
* https://github.com/storybookjs/storybook/blob/master/addons/info/src/components/Story.js#L19.
|
||||
* This prop can also accept a function which has the default stylesheet passed as an argument
|
||||
*/
|
||||
styles: Object | Function,
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "A Storybook addon to show additional information for your stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/info",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/info",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/info"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -22,10 +22,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.0-rc.3",
|
||||
"@storybook/client-logger": "5.1.0-rc.3",
|
||||
"@storybook/components": "5.1.0-rc.3",
|
||||
"@storybook/theming": "5.1.0-rc.3",
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/client-logger": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/theming": "5.1.1",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"marksy": "^7.0.0",
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
|
||||
Brings Jest results in storybook.
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
[](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel)
|
||||
[](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel)
|
||||
|
||||
> Checkout the above [Live Storybook](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel).
|
||||
|
||||
@ -12,7 +12,7 @@ Brings Jest results in storybook.
|
||||
|
||||
### Install
|
||||
|
||||
`yarn add --save-dev @storybook/addon-jest --dev`
|
||||
`npm install --save-dev @storybook/addon-jest`
|
||||
|
||||
or
|
||||
|
||||
@ -180,7 +180,7 @@ storiesOf('MyComponent', module)
|
||||
);
|
||||
```
|
||||
|
||||
##### Example [here](https://github.com/storybooks/storybook/tree/master/examples/angular-cli)
|
||||
##### Example [here](https://github.com/storybookjs/storybook/tree/master/examples/angular-cli)
|
||||
|
||||
## TODO
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -11,13 +11,13 @@
|
||||
"storybook",
|
||||
"unit-testing"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/jest",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/jest",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/jest"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -28,11 +28,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.0-rc.3",
|
||||
"@storybook/api": "5.1.0-rc.3",
|
||||
"@storybook/components": "5.1.0-rc.3",
|
||||
"@storybook/core-events": "5.1.0-rc.3",
|
||||
"@storybook/theming": "5.1.0-rc.3",
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/api": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/theming": "5.1.1",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.4",
|
||||
|
||||
@ -15,7 +15,7 @@ const Indicator = styled.div<IndicatorProps>(
|
||||
({ color, size }) => ({
|
||||
boxSizing: 'border-box',
|
||||
padding: `0 ${size / 2}px`,
|
||||
minWidth: size,
|
||||
width: `fit-content`,
|
||||
minHeight: size,
|
||||
fontSize: size / 1.4,
|
||||
lineHeight: `${size}px`,
|
||||
|
||||
@ -39,14 +39,14 @@ const StackTrace = styled(({ trace, className }: StackTraceProps) => (
|
||||
))}
|
||||
</details>
|
||||
))({
|
||||
background: 'silver',
|
||||
background: '#e2e2e2',
|
||||
padding: 10,
|
||||
overflow: 'auto',
|
||||
});
|
||||
|
||||
const Main = styled(({ msg, className }) => <section className={className}>{msg}</section>)({
|
||||
padding: 10,
|
||||
borderBottom: '1px solid silver',
|
||||
borderBottom: '1px solid #e2e2e2',
|
||||
});
|
||||
|
||||
interface SubProps {
|
||||
|
||||
@ -26,7 +26,8 @@ const NoTests = styled.div({
|
||||
});
|
||||
|
||||
const FileTitle = styled.h2({
|
||||
margin: 0,
|
||||
marginRight: '6px',
|
||||
marginBottom: '3px',
|
||||
fontWeight: 500,
|
||||
fontSize: 18,
|
||||
});
|
||||
@ -64,9 +65,7 @@ const SuiteTotals = styled(({ successNumber, failedNumber, result, className })
|
||||
|
||||
const SuiteProgress = styled(({ successNumber, result, className }) => (
|
||||
<div className={className} role="progressbar">
|
||||
<span style={{ width: `${(successNumber / result.assertionResults.length) * 100}%` }}>
|
||||
{`${(successNumber / result.assertionResults.length) * 100}%`}
|
||||
</span>
|
||||
<span style={{ width: `${(successNumber / result.assertionResults.length) * 100}%` }} />
|
||||
</div>
|
||||
))(() => ({
|
||||
width: '100%',
|
||||
@ -92,6 +91,12 @@ const SuiteProgress = styled(({ successNumber, result, className }) => (
|
||||
const SuiteTitle = styled.div({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginBottom: '3px',
|
||||
});
|
||||
|
||||
const PassingRate = styled.div({
|
||||
fontWeight: 500,
|
||||
fontSize: '10px',
|
||||
});
|
||||
|
||||
interface ContentProps {
|
||||
@ -102,29 +107,36 @@ interface ContentProps {
|
||||
const Content = styled(({ tests, className }: ContentProps) => (
|
||||
<div className={className}>
|
||||
{tests.map(({ name, result }) => {
|
||||
const title = name || 'Result status';
|
||||
|
||||
if (!result) {
|
||||
return <NoTests key={name}>This story has tests configured, but no file was found</NoTests>;
|
||||
return (
|
||||
<NoTests key={title}>This story has tests configured, but no file was found</NoTests>
|
||||
);
|
||||
}
|
||||
|
||||
const successNumber = result.assertionResults.filter(({ status }) => status === 'passed')
|
||||
.length;
|
||||
const failedNumber = result.assertionResults.length - successNumber;
|
||||
|
||||
return (
|
||||
<section key={name}>
|
||||
<section key={title}>
|
||||
<SuiteTitle>
|
||||
<FileTitle>{`${title}:`}</FileTitle>
|
||||
<Indicator
|
||||
color={result.status === 'passed' ? colors.success : colors.error}
|
||||
size={16}
|
||||
styles={{ marginRight: 5 }}
|
||||
>
|
||||
{result.status}
|
||||
</Indicator>
|
||||
</SuiteTitle>
|
||||
<SuiteHead>
|
||||
<SuiteTitle>
|
||||
<Indicator
|
||||
color={result.status === 'passed' ? colors.success : colors.error}
|
||||
size={16}
|
||||
styles={{ marginRight: 5 }}
|
||||
>
|
||||
{result.status}
|
||||
</Indicator>
|
||||
<FileTitle>{name}</FileTitle>
|
||||
</SuiteTitle>
|
||||
<SuiteTotals {...{ successNumber, failedNumber, result }} />
|
||||
<PassingRate>{`Passing rate: ${(
|
||||
(successNumber / result.assertionResults.length) *
|
||||
100
|
||||
).toFixed(2)}%`}</PassingRate>
|
||||
<SuiteProgress {...{ successNumber, failedNumber, result }} />
|
||||
<SuiteTotals {...{ successNumber, failedNumber, result }} />
|
||||
</SuiteHead>
|
||||
<List>
|
||||
{result.assertionResults.map(res => (
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// addons, panels and events get unique names using a prefix
|
||||
export const ADDON_ID = 'storybooks/test';
|
||||
export const ADDON_ID = 'storybookjs/test';
|
||||
export const PANEL_ID = `${ADDON_ID}/panel`;
|
||||
|
||||
export const ADD_TESTS = `${ADDON_ID}/add_tests`;
|
||||
|
||||
573
addons/jest/src/styles.js
Normal file
573
addons/jest/src/styles.js
Normal file
@ -0,0 +1,573 @@
|
||||
import { document } from 'global';
|
||||
|
||||
const styles = `
|
||||
@font-face {
|
||||
font-family: octicons-link;
|
||||
src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==) format('woff');
|
||||
}
|
||||
.markdown-body {
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.markdown-body .pl-c {
|
||||
color: #969896;
|
||||
}
|
||||
.markdown-body .pl-c1,
|
||||
.markdown-body .pl-s .pl-v {
|
||||
color: #0086b3;
|
||||
}
|
||||
.markdown-body .pl-e,
|
||||
.markdown-body .pl-en {
|
||||
color: #795da3;
|
||||
}
|
||||
.markdown-body .pl-smi,
|
||||
.markdown-body .pl-s .pl-s1 {
|
||||
color: #333;
|
||||
}
|
||||
.markdown-body .pl-ent {
|
||||
color: #63a35c;
|
||||
}
|
||||
.markdown-body .pl-k {
|
||||
color: #a71d5d;
|
||||
}
|
||||
.markdown-body .pl-s,
|
||||
.markdown-body .pl-pds,
|
||||
.markdown-body .pl-s .pl-pse .pl-s1,
|
||||
.markdown-body .pl-sr,
|
||||
.markdown-body .pl-sr .pl-cce,
|
||||
.markdown-body .pl-sr .pl-sre,
|
||||
.markdown-body .pl-sr .pl-sra {
|
||||
color: #183691;
|
||||
}
|
||||
.markdown-body .pl-v {
|
||||
color: #ed6a43;
|
||||
}
|
||||
.markdown-body .pl-id {
|
||||
color: #b52a1d;
|
||||
}
|
||||
.markdown-body .pl-ii {
|
||||
color: #f8f8f8;
|
||||
background-color: #b52a1d;
|
||||
}
|
||||
.markdown-body .pl-sr .pl-cce {
|
||||
font-weight: bold;
|
||||
color: #63a35c;
|
||||
}
|
||||
.markdown-body .pl-ml {
|
||||
color: #693a17;
|
||||
}
|
||||
.markdown-body .pl-mh,
|
||||
.markdown-body .pl-mh .pl-en,
|
||||
.markdown-body .pl-ms {
|
||||
font-weight: bold;
|
||||
color: #1d3e81;
|
||||
}
|
||||
.markdown-body .pl-mq {
|
||||
color: #008080;
|
||||
}
|
||||
.markdown-body .pl-mi {
|
||||
font-style: italic;
|
||||
color: #333;
|
||||
}
|
||||
.markdown-body .pl-mb {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.markdown-body .pl-md {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
.markdown-body .pl-mi1 {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
.markdown-body .pl-mdr {
|
||||
font-weight: bold;
|
||||
color: #795da3;
|
||||
}
|
||||
.markdown-body .pl-mo {
|
||||
color: #1d3e81;
|
||||
}
|
||||
.markdown-body .octicon {
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
fill: currentColor;
|
||||
}
|
||||
.markdown-body a {
|
||||
background-color: transparent;
|
||||
-webkit-text-decoration-skip: objects;
|
||||
}
|
||||
.markdown-body a:active,
|
||||
.markdown-body a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
.markdown-body strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
.markdown-body strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
.markdown-body h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
.markdown-body img {
|
||||
border-style: none;
|
||||
}
|
||||
.markdown-body svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
.markdown-body code,
|
||||
.markdown-body kbd,
|
||||
.markdown-body pre {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
.markdown-body hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
.markdown-body input {
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
.markdown-body input {
|
||||
overflow: visible;
|
||||
}
|
||||
.markdown-body [type="checkbox"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
.markdown-body * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.markdown-body input {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
.markdown-body a {
|
||||
color: #4078c0;
|
||||
text-decoration: none;
|
||||
}
|
||||
.markdown-body a:hover,
|
||||
.markdown-body a:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.markdown-body strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
.markdown-body hr {
|
||||
height: 0;
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.markdown-body hr::before {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.markdown-body hr::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
.markdown-body table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.markdown-body td,
|
||||
.markdown-body th {
|
||||
padding: 0;
|
||||
}
|
||||
.markdown-body h1,
|
||||
.markdown-body h2,
|
||||
.markdown-body h3,
|
||||
.markdown-body h4,
|
||||
.markdown-body h5,
|
||||
.markdown-body h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.markdown-body h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.markdown-body h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.markdown-body h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.markdown-body h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.markdown-body h5 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.markdown-body h6 {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.markdown-body p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.markdown-body blockquote {
|
||||
margin: 0;
|
||||
}
|
||||
.markdown-body ul,
|
||||
.markdown-body ol {
|
||||
padding-left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.markdown-body ol ol,
|
||||
.markdown-body ul ol {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
.markdown-body ul ul ol,
|
||||
.markdown-body ul ol ol,
|
||||
.markdown-body ol ul ol,
|
||||
.markdown-body ol ol ol {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
.markdown-body dd {
|
||||
margin-left: 0;
|
||||
}
|
||||
.markdown-body code {
|
||||
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
.markdown-body pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
}
|
||||
.markdown-body .octicon {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
.markdown-body input {
|
||||
-webkit-font-feature-settings: "liga" 0;
|
||||
font-feature-settings: "liga" 0;
|
||||
}
|
||||
.markdown-body::before {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.markdown-body::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
.markdown-body>*:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
.markdown-body>*:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.markdown-body a:not([href]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.markdown-body .anchor {
|
||||
float: left;
|
||||
padding-right: 4px;
|
||||
margin-left: -20px;
|
||||
line-height: 1;
|
||||
}
|
||||
.markdown-body .anchor:focus {
|
||||
outline: none;
|
||||
}
|
||||
.markdown-body p,
|
||||
.markdown-body blockquote,
|
||||
.markdown-body ul,
|
||||
.markdown-body ol,
|
||||
.markdown-body dl,
|
||||
.markdown-body table,
|
||||
.markdown-body pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.markdown-body hr {
|
||||
height: 0.25em;
|
||||
padding: 0;
|
||||
margin: 24px 0;
|
||||
background-color: #e7e7e7;
|
||||
border: 0;
|
||||
}
|
||||
.markdown-body blockquote {
|
||||
padding: 0 1em;
|
||||
color: #777;
|
||||
border-left: 0.25em solid #ddd;
|
||||
}
|
||||
.markdown-body blockquote>:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.markdown-body blockquote>:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.markdown-body kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font-size: 11px;
|
||||
line-height: 10px;
|
||||
color: #555;
|
||||
vertical-align: middle;
|
||||
background-color: #fcfcfc;
|
||||
border: solid 1px #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #bbb;
|
||||
}
|
||||
.markdown-body h1,
|
||||
.markdown-body h2,
|
||||
.markdown-body h3,
|
||||
.markdown-body h4,
|
||||
.markdown-body h5,
|
||||
.markdown-body h6 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.markdown-body h1 .octicon-link,
|
||||
.markdown-body h2 .octicon-link,
|
||||
.markdown-body h3 .octicon-link,
|
||||
.markdown-body h4 .octicon-link,
|
||||
.markdown-body h5 .octicon-link,
|
||||
.markdown-body h6 .octicon-link {
|
||||
color: #000;
|
||||
vertical-align: middle;
|
||||
visibility: hidden;
|
||||
}
|
||||
.markdown-body h1:hover .anchor,
|
||||
.markdown-body h2:hover .anchor,
|
||||
.markdown-body h3:hover .anchor,
|
||||
.markdown-body h4:hover .anchor,
|
||||
.markdown-body h5:hover .anchor,
|
||||
.markdown-body h6:hover .anchor {
|
||||
text-decoration: none;
|
||||
}
|
||||
.markdown-body h1:hover .anchor .octicon-link,
|
||||
.markdown-body h2:hover .anchor .octicon-link,
|
||||
.markdown-body h3:hover .anchor .octicon-link,
|
||||
.markdown-body h4:hover .anchor .octicon-link,
|
||||
.markdown-body h5:hover .anchor .octicon-link,
|
||||
.markdown-body h6:hover .anchor .octicon-link {
|
||||
visibility: visible;
|
||||
}
|
||||
.markdown-body h1 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 2em;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.markdown-body h2 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 1.5em;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.markdown-body h3 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
.markdown-body h4 {
|
||||
font-size: 1em;
|
||||
}
|
||||
.markdown-body h5 {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
.markdown-body h6 {
|
||||
font-size: 0.85em;
|
||||
color: #777;
|
||||
}
|
||||
.markdown-body ul,
|
||||
.markdown-body ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
.markdown-body ul ul,
|
||||
.markdown-body ul ol,
|
||||
.markdown-body ol ol,
|
||||
.markdown-body ol ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.markdown-body li>p {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.markdown-body li+li {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
.markdown-body dl {
|
||||
padding: 0;
|
||||
}
|
||||
.markdown-body dl dt {
|
||||
padding: 0;
|
||||
margin-top: 16px;
|
||||
font-size: 1em;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
.markdown-body dl dd {
|
||||
padding: 0 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.markdown-body table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.markdown-body table th {
|
||||
font-weight: bold;
|
||||
}
|
||||
.markdown-body table th,
|
||||
.markdown-body table td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
.markdown-body table tr {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
.markdown-body table tr:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.markdown-body img {
|
||||
max-width: 100%;
|
||||
box-sizing: content-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
.markdown-body code {
|
||||
padding: 0;
|
||||
padding-top: 0.2em;
|
||||
padding-bottom: 0.2em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
background-color: rgba(0,0,0,0.04);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.markdown-body code::before,
|
||||
.markdown-body code::after {
|
||||
letter-spacing: -0.2em;
|
||||
content: " ";
|
||||
}
|
||||
.markdown-body pre {
|
||||
word-wrap: normal;
|
||||
}
|
||||
.markdown-body pre>code {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 100%;
|
||||
word-break: normal;
|
||||
white-space: pre;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
.markdown-body .highlight {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.markdown-body .highlight pre {
|
||||
margin-bottom: 0;
|
||||
word-break: normal;
|
||||
}
|
||||
.markdown-body .highlight pre,
|
||||
.markdown-body pre {
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
background-color: #f7f7f7;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.markdown-body pre code {
|
||||
display: inline;
|
||||
max-width: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
line-height: inherit;
|
||||
word-wrap: normal;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
.markdown-body pre code::before,
|
||||
.markdown-body pre code::after {
|
||||
content: normal;
|
||||
}
|
||||
.markdown-body .pl-0 {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
.markdown-body .pl-1 {
|
||||
padding-left: 3px !important;
|
||||
}
|
||||
.markdown-body .pl-2 {
|
||||
padding-left: 6px !important;
|
||||
}
|
||||
.markdown-body .pl-3 {
|
||||
padding-left: 12px !important;
|
||||
}
|
||||
.markdown-body .pl-4 {
|
||||
padding-left: 24px !important;
|
||||
}
|
||||
.markdown-body .pl-5 {
|
||||
padding-left: 36px !important;
|
||||
}
|
||||
.markdown-body .pl-6 {
|
||||
padding-left: 48px !important;
|
||||
}
|
||||
.markdown-body .full-commit .btn-outline:not(:disabled):hover {
|
||||
color: #4078c0;
|
||||
border: 1px solid #4078c0;
|
||||
}
|
||||
.markdown-body kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
line-height: 10px;
|
||||
color: #555;
|
||||
vertical-align: middle;
|
||||
background-color: #fcfcfc;
|
||||
border: solid 1px #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #bbb;
|
||||
}
|
||||
.markdown-body :checked+.radio-label {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-color: #4078c0;
|
||||
}
|
||||
.markdown-body .task-list-item {
|
||||
list-style-type: none;
|
||||
}
|
||||
.markdown-body .task-list-item+.task-list-item {
|
||||
margin-top: 3px;
|
||||
}
|
||||
.markdown-body .task-list-item input {
|
||||
margin: 0 0.2em 0.25em -1.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.markdown-body hr {
|
||||
border-bottom-color: #eee;
|
||||
}
|
||||
`;
|
||||
|
||||
if (document && !document.getElementById('github-markdown-css')) {
|
||||
const styleNode = document.createElement('style');
|
||||
styleNode.id = 'github-markdown-css';
|
||||
styleNode.innerHTML = styles;
|
||||
|
||||
document.head.appendChild(styleNode);
|
||||
}
|
||||
@ -3,7 +3,7 @@
|
||||
Storybook Addon Knobs allow you to edit React props dynamically using the Storybook UI.
|
||||
You can also use Knobs as a dynamic variable inside stories in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
This is how Knobs look like:
|
||||
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/knobs",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/knobs",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/knobs"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -22,11 +22,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.0-rc.3",
|
||||
"@storybook/client-api": "5.1.0-rc.3",
|
||||
"@storybook/components": "5.1.0-rc.3",
|
||||
"@storybook/core-events": "5.1.0-rc.3",
|
||||
"@storybook/theming": "5.1.0-rc.3",
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/client-api": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/theming": "5.1.1",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"core-js": "^3.0.1",
|
||||
"escape-html": "^1.0.3",
|
||||
|
||||
@ -198,7 +198,7 @@ export default class KnobPanel extends PureComponent {
|
||||
<Fragment>
|
||||
Learn how to{' '}
|
||||
<Link
|
||||
href="https://github.com/storybooks/storybook/tree/master/addons/knobs"
|
||||
href="https://github.com/storybookjs/storybook/tree/master/addons/knobs"
|
||||
target="_blank"
|
||||
withArrow
|
||||
>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// addons, panels and events get unique names using a prefix
|
||||
export const ADDON_ID = 'storybooks/knobs';
|
||||
export const ADDON_ID = 'storybookjs/knobs';
|
||||
export const PANEL_ID = `${ADDON_ID}/panel`;
|
||||
|
||||
export const RESET = `${ADDON_ID}/reset`;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
The Storybook Links addon can be used to create links that navigate between stories in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
## Getting Started
|
||||
|
||||
@ -132,4 +132,4 @@ It accepts all the props the `a` element does, plus `story` and `kind`. It the `
|
||||
>Go to Second</LinkTo>
|
||||
```
|
||||
|
||||
To implement such a component for another framework, you need to add special handling for `click` event on native `a` element. See [`RoutedLink` sources](https://github.com/storybooks/storybook/blob/master/lib/components/src/navigation/routed_link.js#L4-L9) for reference.
|
||||
To implement such a component for another framework, you need to add special handling for `click` event on native `a` element. See [`RoutedLink` sources](https://github.com/storybookjs/storybook/blob/master/lib/components/src/navigation/routed_link.js#L4-L9) for reference.
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/links",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/links",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/links"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -22,9 +22,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.0-rc.3",
|
||||
"@storybook/core-events": "5.1.0-rc.3",
|
||||
"@storybook/router": "5.1.0-rc.3",
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/router": "5.1.1",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
|
||||
Storybook Addon Notes allows you to write notes (text or HTML) for your stories in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
**NOTE: Documentation on master branch is for alpha version, stable release is on [master](https://github.com/storybooks/storybook/tree/master/addons/)**
|
||||
**NOTE: Documentation on master branch is for alpha version, stable release is on [master](https://github.com/storybookjs/storybook/tree/master/addons/)**
|
||||
|
||||
```sh
|
||||
yarn add -D @storybook/addon-notes
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
{
|
||||
"name": "@storybook/addon-notes",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"notes",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/notes",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/notes",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/notes"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -23,13 +23,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.0-rc.3",
|
||||
"@storybook/api": "5.1.0-rc.3",
|
||||
"@storybook/client-logger": "5.1.0-rc.3",
|
||||
"@storybook/components": "5.1.0-rc.3",
|
||||
"@storybook/core-events": "5.1.0-rc.3",
|
||||
"@storybook/router": "5.1.0-rc.3",
|
||||
"@storybook/theming": "5.1.0-rc.3",
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/api": "5.1.1",
|
||||
"@storybook/client-logger": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/router": "5.1.1",
|
||||
"@storybook/theming": "5.1.1",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"markdown-to-jsx": "^6.9.3",
|
||||
|
||||
@ -146,9 +146,11 @@ const NotesPanel = ({ active }: Props) => {
|
||||
<Fragment>
|
||||
Learn how to{' '}
|
||||
<Link
|
||||
href="https://github.com/storybooks/storybook/tree/master/addons/notes"
|
||||
href="https://github.com/storybookjs/storybook/tree/master/addons/notes"
|
||||
target="_blank"
|
||||
withArrow
|
||||
secondary
|
||||
cancel={false}
|
||||
>
|
||||
document components in Markdown
|
||||
</Link>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
export const ADDON_ID = 'storybooks/notes';
|
||||
export const ADDON_ID = 'storybookjs/notes';
|
||||
export const PANEL_ID = `${ADDON_ID}/panel`;
|
||||
export const PARAM_KEY = `notes`;
|
||||
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
|
||||
Storybook Actions Addon allows you to log events/actions inside stories in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
**This addon is a wrapper for addon [@storybook/addon-actions](https://github.com/storybooks/storybook/blob/master/addons/actions).
|
||||
**This addon is a wrapper for addon [@storybook/addon-actions](https://github.com/storybookjs/storybook/blob/master/addons/actions).
|
||||
Refer to its documentation to understand how to use actions**
|
||||
|
||||
## Installation
|
||||
@ -29,4 +29,4 @@ Then import `rn-addons.js` next to your `getStorybookUI` call.
|
||||
import './rn-addons';
|
||||
```
|
||||
|
||||
See [@storybook/addon-actions](https://github.com/storybooks/storybook/blob/master/addons/actions) to learn how to write stories with actions and the [crna-kitchen-sink app](../../examples-native/crna-kitchen-sink) for more examples.
|
||||
See [@storybook/addon-actions](https://github.com/storybookjs/storybook/blob/master/addons/actions) to learn how to write stories with actions and the [crna-kitchen-sink app](../../examples-native/crna-kitchen-sink) for more examples.
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-actions",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Action Logger addon for react-native storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/actions",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/actions",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
"url": "https://github.com/storybookjs/storybook.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
@ -19,13 +19,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.0-rc.3",
|
||||
"@storybook/core-events": "5.1.0-rc.3",
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"core-js": "^2.5.7",
|
||||
"fast-deep-equal": "^2.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "5.1.0-rc.3"
|
||||
"@storybook/addon-actions": "5.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-actions": "*",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-backgrounds",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "A react-native storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -10,11 +10,11 @@
|
||||
],
|
||||
"homepage": "https://storybook.js.org",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/ondevice-backgrounds"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -24,7 +24,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.0-rc.3",
|
||||
"@storybook/addons": "5.1.1",
|
||||
"core-js": "^3.0.1",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
|
||||
Storybook Knobs Addon allows you to edit react props using the Storybook UI using variables inside stories in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
**This addon is a wrapper for addon [@storybook/addon-knobs](https://github.com/storybooks/storybook/blob/master/addons/knobs).
|
||||
**This addon is a wrapper for addon [@storybook/addon-knobs](https://github.com/storybookjs/storybook/blob/master/addons/knobs).
|
||||
Refer to its documentation to understand how to use knobs**
|
||||
|
||||
## Installation
|
||||
@ -29,4 +29,4 @@ Then import `rn-addons.js` next to your `getStorybookUI` call.
|
||||
import './rn-addons';
|
||||
```
|
||||
|
||||
See [@storybook/addon-knobs](https://github.com/storybooks/storybook/blob/master/addons/knobs) to learn how to write stories with knobs and the [crna-kitchen-sink app](../../examples-native/crna-kitchen-sink) for more examples.
|
||||
See [@storybook/addon-knobs](https://github.com/storybookjs/storybook/blob/master/addons/knobs) to learn how to write stories with knobs and the [crna-kitchen-sink app](../../examples-native/crna-kitchen-sink) for more examples.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-knobs",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Display storybook story knobs on your deviced.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -11,7 +11,7 @@
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/ondevice-knobs"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -21,8 +21,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.0-rc.3",
|
||||
"@storybook/core-events": "5.1.0-rc.3",
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"core-js": "^3.0.1",
|
||||
"deep-equal": "^1.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-notes",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Write notes for your react-native Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -10,7 +10,7 @@
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/ondevice-notes"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -20,7 +20,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.0-rc.3",
|
||||
"@storybook/addons": "5.1.1",
|
||||
"core-js": "^3.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-native-simple-markdown": "^1.1.0"
|
||||
|
||||
@ -11,9 +11,9 @@ See the [migration docs](../../MIGRATION.md#options-addon-deprecated) for what's
|
||||
|
||||
The Options addon can be used to (re-)configure the [Storybook](https://storybook.js.org) UI at runtime.
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
{
|
||||
"name": "@storybook/addon-options",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Options addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/options",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/options",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/options"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -22,7 +22,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.0-rc.3",
|
||||
"@storybook/addons": "5.1.1",
|
||||
"core-js": "^3.0.1",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// addons, panels and events get unique names using a prefix
|
||||
export const ADDON_ID = 'storybooks/options';
|
||||
export const ADDON_ID = 'storybookjs/options';
|
||||
|
||||
export default {
|
||||
SET: `${ADDON_ID}/options-event`,
|
||||
|
||||
@ -7,7 +7,7 @@ function emitOptions(options: any) {
|
||||
const channel = addons.getChannel();
|
||||
if (!channel) {
|
||||
throw new Error(
|
||||
'Failed to find addon channel. This may be due to https://github.com/storybooks/storybook/issues/1192.'
|
||||
'Failed to find addon channel. This may be due to https://github.com/storybookjs/storybook/issues/1192.'
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
|
||||
StoryShots adds automatic Jest Snapshot Testing for [Storybook](https://storybook.js.org/).
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
|
||||
To use StoryShots, you must use your existing Storybook stories as the input for Jest Snapshot Testing.
|
||||
|
||||
@ -26,7 +26,7 @@ If you still need to configure jest you can use the resources mentioned below:
|
||||
|
||||
> Note: If you use React 16, you'll need to follow [these additional instructions](https://github.com/facebook/react/issues/9102#issuecomment-283873039).
|
||||
>
|
||||
> Note: Make sure you have added the ```json``` extention to ```moduleFileExtensions``` in ```jest.config.json```. If this is missing it leads to the [following error](https://github.com/storybooks/storybook/issues/3728): ```Cannot find module 'spdx-license-ids' from 'scan.js'```.
|
||||
> Note: Make sure you have added the ```json``` extention to ```moduleFileExtensions``` in ```jest.config.json```. If this is missing it leads to the [following error](https://github.com/storybookjs/storybook/issues/3728): ```Cannot find module 'spdx-license-ids' from 'scan.js'```.
|
||||
>
|
||||
> Note: Please make sure you are using ```jsdom``` as the testEnvironment on your jest config file.
|
||||
|
||||
@ -52,7 +52,7 @@ other tools may lack this feature. Since Storyshot is running under Jest,
|
||||
we need to polyfill this functionality to work with Jest. The easiest
|
||||
way is to integrate it to babel.
|
||||
|
||||
You can do this with a Babel [plugin](https://github.com/smrq/babel-plugin-require-context-hook) or [macro](https://github.com/storybooks/require-context.macro). If you're using `create-react-app` (v2 or above), use the macro.
|
||||
You can do this with a Babel [plugin](https://github.com/smrq/babel-plugin-require-context-hook) or [macro](https://github.com/storybookjs/require-context.macro). If you're using `create-react-app` (v2 or above), use the macro.
|
||||
|
||||
#### Option 1: Plugin
|
||||
|
||||
@ -194,7 +194,7 @@ That's all.
|
||||
|
||||
Now run your Jest test command. (Usually, `npm test`.) Then you can see all of your stories are converted as Jest snapshot tests.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Using `createNodeMock` to mock refs
|
||||
@ -435,7 +435,7 @@ initStoryshots({
|
||||
});
|
||||
```
|
||||
|
||||
This can be useful if you want to separate the snapshots in directories next to each component. See an example [here](https://github.com/storybooks/storybook/issues/892).
|
||||
This can be useful if you want to separate the snapshots in directories next to each component. See an example [here](https://github.com/storybookjs/storybook/issues/892).
|
||||
|
||||
If you want to run all stories except stories of a specific kind, you can write an inverse regex which is true for all kinds except those with a specific word such as `DontTest`
|
||||
|
||||
@ -579,7 +579,7 @@ components to ensure they do not error.
|
||||
|
||||
### `snapshotWithOptions(options)`
|
||||
|
||||
Like the default, but allows you to specify a set of options for the test renderer. [See for example here](https://github.com/storybooks/storybook/blob/b915b5439786e0edb17d7f5ab404bba9f7919381/examples/test-cra/src/storyshots.test.js#L14-L16).
|
||||
Like the default, but allows you to specify a set of options for the test renderer. [See for example here](https://github.com/storybookjs/storybook/blob/b915b5439786e0edb17d7f5ab404bba9f7919381/examples/test-cra/src/storyshots.test.js#L14-L16).
|
||||
|
||||
### `renderWithOptions(options)`
|
||||
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/storyshots/storyshots-core",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/storyshots/storyshots-core"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -25,7 +25,7 @@
|
||||
"storybook": "start-storybook -p 6006"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.0-rc.3",
|
||||
"@storybook/addons": "5.1.1",
|
||||
"core-js": "^3.0.1",
|
||||
"glob": "^7.1.3",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -120,7 +120,7 @@ You might use `getScreenshotOptions` to specify options for screenshot. Will be
|
||||
```js
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
|
||||
const getScreenshotOptions = ({context, url}) {
|
||||
const getScreenshotOptions = ({context, url}) => {
|
||||
return {
|
||||
fullPage: false // Do not take the full page screenshot. Default is 'true' in Storyshots.
|
||||
}
|
||||
@ -196,7 +196,7 @@ initStoryshots({
|
||||
### Integrate image storyshots with regular app
|
||||
|
||||
You may want to use another Jest project to run your image snapshots as they require more resources: Chrome and Storybook built/served.
|
||||
You can find a working example of this in the [official-storybook](https://github.com/storybooks/storybook/tree/master/examples/official-storybook) example.
|
||||
You can find a working example of this in the [official-storybook](https://github.com/storybookjs/storybook/tree/master/examples/official-storybook) example.
|
||||
|
||||
### Integrate image storyshots with [Create React App](https://github.com/facebookincubator/create-react-app)
|
||||
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Image snappshots addition to StoryShots base on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/storyshots/storyshots-puppeteer",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-puppeteer",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/storyshots/storyshots-puppeteer"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -22,8 +22,8 @@
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/node-logger": "5.1.0-rc.3",
|
||||
"@storybook/router": "5.1.0-rc.3",
|
||||
"@storybook/node-logger": "5.1.1",
|
||||
"@storybook/router": "5.1.1",
|
||||
"core-js": "^3.0.1",
|
||||
"jest-image-snapshot": "^2.8.2",
|
||||
"puppeteer": "^1.12.2",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
This addon is used to show stories source in the addon panel.
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Stories addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/storysource",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/storysource",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/storysource"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -22,10 +22,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.0-rc.3",
|
||||
"@storybook/components": "5.1.0-rc.3",
|
||||
"@storybook/router": "5.1.0-rc.3",
|
||||
"@storybook/theming": "5.1.0-rc.3",
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/router": "5.1.1",
|
||||
"@storybook/theming": "5.1.1",
|
||||
"core-js": "^3.0.1",
|
||||
"estraverse": "^4.2.0",
|
||||
"loader-utils": "^1.2.3",
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
|
||||
Storybook Viewport Addon allows your stories to be displayed in different sizes and layouts in [Storybook](https://storybook.js.org). This helps build responsive components inside of Storybook.
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Storybook addon to change the viewport size to mobile",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/addons/viewport",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/viewport",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/viewport"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -21,11 +21,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.0-rc.3",
|
||||
"@storybook/client-logger": "5.1.0-rc.3",
|
||||
"@storybook/components": "5.1.0-rc.3",
|
||||
"@storybook/core-events": "5.1.0-rc.3",
|
||||
"@storybook/theming": "5.1.0-rc.3",
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/client-logger": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/theming": "5.1.1",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"memoizerific": "^1.11.3",
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
Storybook for Angular is a UI development environment for your Angular components.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
|
||||
Storybook runs outside of your app.
|
||||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/angular",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/angular",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "app/angular"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -26,8 +26,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "5.1.0-rc.3",
|
||||
"@storybook/node-logger": "5.1.0-rc.3",
|
||||
"@storybook/core": "5.1.1",
|
||||
"@storybook/node-logger": "5.1.1",
|
||||
"angular2-template-loader": "^0.6.2",
|
||||
"core-js": "^3.0.1",
|
||||
"fork-ts-checker-webpack-plugin": "^1.3.4",
|
||||
@ -38,9 +38,6 @@
|
||||
"tsconfig-paths-webpack-plugin": "^3.2.0",
|
||||
"webpack": "^4.32.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"zone.js": "^0.8.29"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular-devkit/core": "^0.6.1 || >=7.0.0",
|
||||
"@angular/common": ">=6.0.0",
|
||||
@ -52,7 +49,7 @@
|
||||
"autoprefixer": "^8.1.0",
|
||||
"babel-loader": "^7.0.0 || ^8.0.0",
|
||||
"rxjs": "^6.0.0",
|
||||
"zone.js": "^0.8.29"
|
||||
"zone.js": "^0.8.29 || ^0.9.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.0.0"
|
||||
|
||||
1
app/angular/src/client/preview/index.d.ts
vendored
1
app/angular/src/client/preview/index.d.ts
vendored
@ -5,6 +5,7 @@ import { IApi, IStoribookSection } from '../../../index';
|
||||
export function storiesOf(kind: string, module: NodeModule): IApi;
|
||||
export function setAddon(addon: any): void;
|
||||
export function addDecorator(decorator: any): IApi;
|
||||
export function addParameters(parameter: any): IApi;
|
||||
export function configure(loaders: () => void, module: NodeModule): void;
|
||||
export function getStorybook(): IStoribookSection[];
|
||||
export function clearDecorators(): void;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
Storybook for Ember is a UI development environment for your Ember components.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
|
||||
Storybook runs outside of your app.
|
||||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/ember",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "app/ember"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -24,7 +24,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ember/test-helpers": "^1.5.0",
|
||||
"@storybook/core": "5.1.0-rc.3",
|
||||
"@storybook/core": "5.1.1",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
Storybook for HTML is a UI development environment for your plain HTML snippets.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
|
||||
Storybook runs outside of your app.
|
||||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/html",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/html",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "app/html"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -25,7 +25,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "5.1.0-rc.3",
|
||||
"@storybook/core": "5.1.1",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
Storybook for Marko is a UI development environment for your Marko components.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
|
||||
Storybook runs outside of your app.
|
||||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
{
|
||||
"name": "@storybook/marko",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/marko",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/marko",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "app/marko"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -26,7 +26,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "5.1.0-rc.3",
|
||||
"@storybook/core": "5.1.1",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
Storybook for Mithril is a UI development environment for your Mithril components.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
|
||||
Storybook runs outside of your app.
|
||||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
{
|
||||
"name": "@storybook/mithril",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Storybook for Mithril: Develop Mithril Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/mithril",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/mithril",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "app/mithril"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -27,7 +27,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.3.0",
|
||||
"@storybook/core": "5.1.0-rc.3",
|
||||
"@storybook/core": "5.1.1",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -5,7 +5,7 @@ With it, you can visualize different states of your UI components and develop th
|
||||
|
||||
> Storybook for Polymer is at the **EXPERIMENTAL** stage!
|
||||
|
||||
|
||||
|
||||
|
||||
Storybook runs outside of your app.
|
||||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
{
|
||||
"name": "@storybook/polymer",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/polymer",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/polymer",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "app/polymer"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -25,7 +25,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "5.1.0-rc.3",
|
||||
"@storybook/core": "5.1.1",
|
||||
"@webcomponents/webcomponentsjs": "^1.2.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
Storybook for Preact is a UI development environment for your Preact components.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
|
||||
Storybook runs outside of your app.
|
||||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
{
|
||||
"name": "@storybook/preact",
|
||||
"version": "5.1.0-rc.3",
|
||||
"version": "5.1.1",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/preact",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/preact",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "app/preact"
|
||||
},
|
||||
"license": "MIT",
|
||||
@ -27,7 +27,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.3.0",
|
||||
"@storybook/core": "5.1.0-rc.3",
|
||||
"@storybook/core": "5.1.1",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
2
app/rax/.npmignore
Normal file
2
app/rax/.npmignore
Normal file
@ -0,0 +1,2 @@
|
||||
docs
|
||||
.babelrc
|
||||
29
app/rax/README.md
Normal file
29
app/rax/README.md
Normal file
@ -0,0 +1,29 @@
|
||||
# Storybook for Rax
|
||||
|
||||
Storybook for Rax is a UI development environment for your Rax components.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
Storybook runs outside of your app.
|
||||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
|
||||
## Getting Started
|
||||
|
||||
```sh
|
||||
cd my-rax-app
|
||||
npx -p @storybook/cli sb init
|
||||
```
|
||||
|
||||
For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
---
|
||||
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish.
|
||||
You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want.
|
||||
|
||||
## Docs
|
||||
|
||||
- [Basics](https://storybook.js.org/basics/introduction)
|
||||
- [Configurations](https://storybook.js.org/configurations/default-config)
|
||||
- [Addons](https://storybook.js.org/addons/introduction)
|
||||
4
app/rax/bin/build.js
Executable file
4
app/rax/bin/build.js
Executable file
@ -0,0 +1,4 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
process.env.NODE_ENV = process.env.NODE_ENV || 'production';
|
||||
require('../dist/server/build');
|
||||
3
app/rax/bin/index.js
Executable file
3
app/rax/bin/index.js
Executable file
@ -0,0 +1,3 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
require('../dist/server');
|
||||
47
app/rax/package.json
Normal file
47
app/rax/package.json
Normal file
@ -0,0 +1,47 @@
|
||||
{
|
||||
"name": "@storybook/rax",
|
||||
"version": "5.1.1",
|
||||
"description": "Storybook for Rax: Develop Rax Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
"rax"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/rax",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git",
|
||||
"directory": "app/rax"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
"jsnext:main": "src/client/index.js",
|
||||
"bin": {
|
||||
"build-storybook": "./bin/build.js",
|
||||
"start-storybook": "./bin/index.js",
|
||||
"storybook-server": "./bin/index.js"
|
||||
},
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-preset-rax": "^1.0.0-beta.0",
|
||||
"@storybook/core": "5.1.1",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.6.2",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"rax": "^0.6.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-loader": "^7.0.0 || ^8.0.0",
|
||||
"rax": "^0.4.0 || ^1.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user