mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 23:01:16 +08:00
Merge branch '8126-addon-a11y--allow-manual-run' of github.com:donaldpipowitch/storybook into 8126-addon-a11y--allow-manual-run
This commit is contained in:
Donald Pipowitch
commit
f567dad17e
@ -48,13 +48,6 @@ 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: [
|
||||
|
||||
@ -18,7 +18,8 @@ examples/cra-ts-kitchen-sink/*.json
|
||||
examples/cra-ts-kitchen-sink/public/*
|
||||
examples/cra-ts-essentials/*.json
|
||||
examples/cra-ts-essentials/public/*
|
||||
|
||||
examples/rax-kitchen-sink/src/document/*
|
||||
.yarn
|
||||
!.remarkrc.js
|
||||
!.babelrc.js
|
||||
!.eslintrc.js
|
||||
|
||||
1
.gitattributes
vendored
Normal file
1
.gitattributes
vendored
Normal file
@ -0,0 +1 @@
|
||||
.yarn/releases/yarn-*.js linguist-generated=true
|
||||
1
.github/autolabeler.yml
vendored
1
.github/autolabeler.yml
vendored
@ -15,6 +15,7 @@
|
||||
'app: angular': ["app/angular/**"]
|
||||
'app: polymer ': ["app/polymer/**"]
|
||||
'app: preact': ["app/preact/**"]
|
||||
'app: rax': ["app/rax/**"]
|
||||
'app: react-native': ["app/react-native/**"]
|
||||
'app: react': ["app/react/**"]
|
||||
'app: vue': ["app/vue/**"]
|
||||
|
||||
1
.github/automention.yml
vendored
1
.github/automention.yml
vendored
@ -4,6 +4,7 @@
|
||||
'app: marko': ['nm123github']
|
||||
'app: polymer': ['stijnkoopal', 'ndelangen']
|
||||
'app: preact': ['BartWaardenburg']
|
||||
'app: rax': ['SoloJiang']
|
||||
'app: react-native': ['benoitdion', 'gongreg']
|
||||
'app: react-native-server': ['benoitdion', 'gongreg']
|
||||
'app: svelte': ['rixo', 'cam-stitt', 'plumpNation']
|
||||
|
||||
1
.prettierignore
Normal file
1
.prettierignore
Normal file
@ -0,0 +1 @@
|
||||
.yarn
|
||||
18
.vscode/launch.json
vendored
18
.vscode/launch.json
vendored
@ -17,6 +17,22 @@
|
||||
"skipFiles": [
|
||||
"<node_internals>/**"
|
||||
]
|
||||
},
|
||||
}, {
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "cli html",
|
||||
"cwd": "${workspaceFolder}/lib/cli/stories",
|
||||
"runtimeArgs": [
|
||||
"--inspect-brk",
|
||||
"${workspaceFolder}/lib/cli/bin/index.js",
|
||||
"init",
|
||||
"--type",
|
||||
"html"
|
||||
],
|
||||
"port": 9229,
|
||||
"skipFiles": [
|
||||
"<node_internals>/**"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
147315
.yarn/releases/yarn-1.21.1.js
generated
vendored
Executable file
147315
.yarn/releases/yarn-1.21.1.js
generated
vendored
Executable file
File diff suppressed because one or more lines are too long
7
.yarnrc
Normal file
7
.yarnrc
Normal file
@ -0,0 +1,7 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
|
||||
# yarn lockfile v1
|
||||
|
||||
|
||||
frozen-lockfile true
|
||||
lastUpdateCheck 1576044003885
|
||||
yarn-path ".yarn/releases/yarn-1.21.1.js"
|
||||
@ -1,25 +1,25 @@
|
||||
## Addon / Framework Support Table
|
||||
|
||||
| | [React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)| [Marko](app/marko)| [Svelte](app/svelte)| [Riot](app/riot)| [Ember](app/ember)| [Preact](app/preact)|
|
||||
| | [React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)| [Marko](app/marko)| [Svelte](app/svelte)| [Riot](app/riot)| [Ember](app/ember)| [Preact](app/preact)| [Rax](app/rax) |
|
||||
| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
|
||||
|[a11y](addons/a11y) |+| |+|+|+|+|+|+|+|+|+|+|
|
||||
|[actions](addons/actions) |+|+*|+|+|+|+|+|+|+|+|+|+|
|
||||
|[backgrounds](addons/backgrounds) |+|*|+|+|+|+|+|+|+|+|+|+|
|
||||
|[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) |+| | | | | | | | | | | |
|
||||
|[jest](addons/jest) |+|+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[knobs](addons/knobs) |+|+*|+|+|+|+|+|+|+|+|+|+|
|
||||
|[links](addons/links) |+|+|+|+|+|+|+| |+|+|+|+|
|
||||
|[notes](addons/notes) |+|+*|+|+|+|+|+| |+|+|+|+|
|
||||
|[options](addons/options) |+|+|+|+|+|+|+| |+|+|+|+|
|
||||
|[cssresources](addons/cssresources) |+| |+|+|+|+|+|+|+|+|+|+|
|
||||
|[storyshots](addons/storyshots) |+|+|+|+| | |+| |+|+| |+|
|
||||
|[storysource](addons/storysource) |+| |+|+|+|+|+|+|+|+|+|+|
|
||||
|[viewport](addons/viewport) |+| |+|+|+|+|+|+|+|+|+|+|
|
||||
|[a11y](addons/a11y) |+| |+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[actions](addons/actions) |+|+*|+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[backgrounds](addons/backgrounds) |+|*|+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[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) |+| | | | | | | | | | | | |
|
||||
|[jest](addons/jest) |+|+|+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[knobs](addons/knobs) |+|+*|+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[links](addons/links) |+|+|+|+|+|+|+| |+|+|+|+|+|
|
||||
|[notes](addons/notes) |+|+*|+|+|+|+|+| |+|+|+|+|+|
|
||||
|[options](addons/options) |+|+|+|+|+|+|+| |+|+|+|+|+|
|
||||
|[cssresources](addons/cssresources) |+| |+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[storyshots](addons/storyshots) |+|+|+|+| | |+| |+|+| |+|+|
|
||||
|[storysource](addons/storysource) |+| |+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[viewport](addons/viewport) |+| |+|+|+|+|+|+|+|+|+|+|+|
|
||||
|
||||
`*` - React Native on device addon (addons/onDevice-\<name>)
|
||||
|
||||
111
CHANGELOG.md
111
CHANGELOG.md
@ -1,3 +1,114 @@
|
||||
## 5.3.0-rc.12 (January 8, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Nav UI: Nodes are components only if they contain ALL leaf nodes ([#9356](https://github.com/storybookjs/storybook/pull/9356))
|
||||
* Core: Fix HMR for global decorators in main.js config ([#9354](https://github.com/storybookjs/storybook/pull/9354))
|
||||
* Presets: Fix register.js addons entry ([#9347](https://github.com/storybookjs/storybook/pull/9347))
|
||||
* React: Check CRA is installed before showing warning ([#9346](https://github.com/storybookjs/storybook/pull/9346))
|
||||
|
||||
## 5.3.0-rc.11 (January 7, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-Docs: Handle leaf/non-leaf mixture in docs-mode navigation ([#9321](https://github.com/storybookjs/storybook/pull/9321))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* Axe storyshots: move to original @wordpress/jest-puppeteer-axe package ([#9337](https://github.com/storybookjs/storybook/pull/9337))
|
||||
|
||||
## 5.3.0-rc.10 (January 6, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Revert "Source-loader: Disable no-implicit-any linting" ([#9333](https://github.com/storybookjs/storybook/pull/9333))
|
||||
* Addon-docs: Fix scroll behavior on page navigation ([#9331](https://github.com/storybookjs/storybook/pull/9331))
|
||||
|
||||
## 5.3.0-rc.9 (January 4, 2020)
|
||||
|
||||
### Features
|
||||
|
||||
* CSF: Use `__namedExportsOrder` array in loader if provided ([#9315](https://github.com/storybookjs/storybook/pull/9315))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Router: Add storyNameFromExport to avoid breaking changes ([#9320](https://github.com/storybookjs/storybook/pull/9320))
|
||||
|
||||
## 5.3.0-rc.8 (January 3, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Tweak props table paragraph spacing ([#9307](https://github.com/storybookjs/storybook/pull/9307))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Add minimal typescript component to official-storybook ([#9308](https://github.com/storybookjs/storybook/pull/9308))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* React: Upgrade babel-plugin-react-docgen to 4.0.0 ([#9303](https://github.com/storybookjs/storybook/pull/9303))
|
||||
|
||||
## 5.3.0-rc.7 (January 2, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Core: Fix babel.js to disable simplify ([#9280](https://github.com/storybookjs/storybook/pull/9280))
|
||||
* Storyshots-Puppeteer: Don't infer story ID from its name ([#9291](https://github.com/storybookjs/storybook/pull/9291))
|
||||
|
||||
## 5.3.0-rc.6 (December 31, 2019)
|
||||
|
||||
This is significant change to `main.js` aka tri-config, dramatically simplifying how addons and presets are registered. See the maintenannce PR for details.
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Main.js: Combine presets/registers in `addons` field ([#9246](https://github.com/storybookjs/storybook/pull/9246))
|
||||
|
||||
## 5.3.0-rc.5 (December 31, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Hide stories block when there are no stories ([#9271](https://github.com/storybookjs/storybook/pull/9271))
|
||||
* Source-loader: Disable no-implicit-any linting ([#9272](https://github.com/storybookjs/storybook/pull/9272))
|
||||
|
||||
## 5.3.0-rc.4 (December 28, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Fix MDX story rendering with dynamic component titles ([#9248](https://github.com/storybookjs/storybook/pull/9248))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Ignore testfixtures directory in storybook publish ([#9244](https://github.com/storybookjs/storybook/pull/9244))
|
||||
|
||||
## 5.3.0-rc.3 (December 26, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Include ember files in addon-docs publish ([#9230](https://github.com/storybookjs/storybook/pull/9230))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Standalone CSF example ([#9223](https://github.com/storybookjs/storybook/pull/9223))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* Addon-info: Upgrade marksy for security ([#9234](https://github.com/storybookjs/storybook/pull/9234))
|
||||
|
||||
## 5.3.0-rc.2 (December 26, 2019)
|
||||
|
||||
Failed NPM publish
|
||||
|
||||
## 5.3.0-rc.1 (December 23, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Angular: Add default value to the budgets property ([#9207](https://github.com/storybookjs/storybook/pull/9207))
|
||||
* DocsPage: Fix title with new path separator scheme ([#9204](https://github.com/storybookjs/storybook/pull/9204))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* CLI: Make template `stories` glob more permissive ([#9224](https://github.com/storybookjs/storybook/pull/9224))
|
||||
|
||||
## 5.3.0-rc.0 (December 19, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
@ -4,7 +4,7 @@ Thanks for your interest in improving Storybook! We are a community-driven proje
|
||||
|
||||
Please review this document to help to streamline the process and save everyone's precious time.
|
||||
|
||||
This repo uses yarn workspaces, so you should install `yarn@1.3.2` or higher as a package manager. See [installation guide](https://yarnpkg.com/en/docs/install).
|
||||
This repo uses yarn workspaces, so you should install `yarn` as the package manager. See [installation guide](https://yarnpkg.com/en/docs/install).
|
||||
|
||||
## Issues
|
||||
|
||||
@ -273,7 +273,7 @@ If you run into trouble here, make sure your node, npm, and **_yarn_** are on th
|
||||
_This method is slow_
|
||||
|
||||
1. `yarn bootstrap --all`
|
||||
2. Have a beer 🍺
|
||||
2. Take a break 🍵
|
||||
3. `yarn test` (to verify everything worked)
|
||||
|
||||
### Working with the kitchen sink apps
|
||||
@ -283,9 +283,10 @@ 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. `cd examples/official-storybook`
|
||||
2. `yarn storybook`
|
||||
3. Verify that your local version works
|
||||
2. `yarn storybook`
|
||||
3. Verify that your local version works
|
||||
|
||||
### Working with your own app
|
||||
|
||||
|
||||
33
MIGRATION.md
33
MIGRATION.md
@ -2,7 +2,7 @@
|
||||
|
||||
- [Migration](#migration)
|
||||
- [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
|
||||
- [To tri-config configuration](#to-triconfig-configuration)
|
||||
- [To main.js configuration](#to-mainjs-configuration)
|
||||
- [Create React App preset](#create-react-app-preset)
|
||||
- [Description doc block](#description-doc-block)
|
||||
- [React Native Async Storage](#react-native-async-storage)
|
||||
@ -75,18 +75,17 @@
|
||||
- [Packages renaming](#packages-renaming)
|
||||
- [Deprecated embedded addons](#deprecated-embedded-addons)
|
||||
|
||||
|
||||
## From version 5.2.x to 5.3.x
|
||||
|
||||
### To tri-config configuration
|
||||
### To main.js configuration
|
||||
|
||||
In storybook 5.3 3 new files for configuration were introduced, that replaced some previous files.
|
||||
|
||||
These files are now soft-deprecated, (*they still work, but over time we will promote users to migrate*):
|
||||
These files are now soft-deprecated, (_they still work, but over time we will promote users to migrate_):
|
||||
|
||||
- `config.js` has been renamed to `preview.js`.
|
||||
- `addons.js` has been renamed to `manager.js`.
|
||||
- `presets.js` has been renamed to `main.js`.
|
||||
- `presets.js` has been renamed to `main.js`. `main.js` is the main point of configuration for storybook.
|
||||
- `config.js` has been renamed to `preview.js`. `preview.js` configures the "preview" iframe that renders your components.
|
||||
- `addons.js` has been renamed to `manager.js`. `manager.js` configures Storybook's "manager" UI that wraps the preview, and also configures addons panel.
|
||||
|
||||
#### Using main.js
|
||||
|
||||
@ -95,13 +94,11 @@ These files are now soft-deprecated, (*they still work, but over time we will pr
|
||||
```js
|
||||
module.exports = {
|
||||
stories: ['../**/*.stories.js'],
|
||||
addons: [
|
||||
'@storybook/addon-docs/register',
|
||||
],
|
||||
addons: ['@storybook/addon-knobs'],
|
||||
};
|
||||
```
|
||||
|
||||
You remove all "register" import from `addons.js` and place them inside the array. If this means `addons.js` is now empty for you, it's safe to remove.
|
||||
You remove all "register" import from `addons.js` and place them inside the array. You can also safely remove the `/register` suffix from these entries, for a cleaner, more readable configuration. If this means `addons.js` is now empty for you, it's safe to remove.
|
||||
|
||||
Next you remove the code that imports/requires all your stories from `config.js`, and change it to a glob-pattern and place that glob in the `stories` array. If this means `config.js` is empty, it's safe to remove.
|
||||
|
||||
@ -110,10 +107,20 @@ If you had a `presets.js` file before you can add the array of presets to the ma
|
||||
```js
|
||||
module.exports = {
|
||||
stories: ['../**/*.stories.js'],
|
||||
presets: ['@storybook/addon-docs/preset'],
|
||||
addons: [
|
||||
'@storybook/preset-create-react-app'
|
||||
{
|
||||
name: '@storybook/addon-docs',
|
||||
options: { configureJSX: true }
|
||||
}
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
By default, adding a package to the `addons` array will first try to load its `preset` entry, then its `register` entry, and finally, it will just assume the package itself is a preset.
|
||||
|
||||
If you want to load a specific package entry, for example you want to use `@storybook/addon-docs/register`, you can also include that in the addons array and Storybook will do the right thing.
|
||||
|
||||
#### Using preview.js
|
||||
|
||||
If after migrating the imports/requires of your stories to `main.js` you're left with some code in `config.js` it's likely the usage of `addParameters` & `addDecorator`.
|
||||
@ -142,7 +149,7 @@ addons.setConfig({
|
||||
});
|
||||
```
|
||||
|
||||
This makes storybook load and use the theme in the manager directly.
|
||||
This makes storybook load and use the theme in the manager directly.
|
||||
This allows for richer theming in the future, and has a much better performance!
|
||||
|
||||
### Create React App preset
|
||||
|
||||
@ -46,7 +46,7 @@ Storybook is a development environment for UI components.
|
||||
It allows you to browse a component library, view the different states of each component, and interactively develop and test components.
|
||||
|
||||
<center>
|
||||
<img src="media/storybook-intro.gif" width="100%" />
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/master/media/storybook-intro.gif" width="100%" />
|
||||
</center>
|
||||
|
||||
<p align="center">
|
||||
@ -91,7 +91,7 @@ If you'd rather set up your project manually, take a look at our [Slow Start Gui
|
||||
|
||||
Once it's installed, you can `npm run storybook` and it will run the development server on your local machine, and give you a URL to browse some sample stories.
|
||||
|
||||
**Storybook v2.x migration note**:
|
||||
**Storybook v2.x migration note**:
|
||||
If you're using Storybook v2.x and want to shift to 4.x version the easiest way is:
|
||||
|
||||
```sh
|
||||
@ -123,6 +123,7 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl
|
||||
| [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) |
|
||||
| [Rax](app/rax) | [v5.1.0](https://storybooks-rax.netlify.com/) | [](app/rax) |
|
||||
|
||||
### Sub Projects
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -33,12 +33,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/api": "5.3.0-rc.0",
|
||||
"@storybook/client-logger": "5.3.0-rc.0",
|
||||
"@storybook/components": "5.3.0-rc.0",
|
||||
"@storybook/core-events": "5.3.0-rc.0",
|
||||
"@storybook/theming": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/api": "5.3.0-rc.12",
|
||||
"@storybook/client-logger": "5.3.0-rc.12",
|
||||
"@storybook/components": "5.3.0-rc.12",
|
||||
"@storybook/core-events": "5.3.0-rc.12",
|
||||
"@storybook/theming": "5.3.0-rc.12",
|
||||
"axe-core": "^3.3.2",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
@ -56,5 +56,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -20,26 +20,29 @@ export enum RuleType {
|
||||
INCOMPLETION,
|
||||
}
|
||||
|
||||
const RotatingIcons = styled(Icons)(({ theme }) => ({
|
||||
const Icon = styled(Icons)({
|
||||
height: 12,
|
||||
width: 12,
|
||||
marginRight: 4,
|
||||
});
|
||||
|
||||
const RotatingIcon = styled(Icon)(({ theme }) => ({
|
||||
animation: `${theme.animation.rotate360} 1s linear infinite;`,
|
||||
}));
|
||||
|
||||
const Passes = styled.span(({ theme }) => ({
|
||||
const Passes = styled.span<{}>(({ theme }) => ({
|
||||
color: theme.color.positive,
|
||||
}));
|
||||
|
||||
const Violations = styled.span(({ theme }) => ({
|
||||
const Violations = styled.span<{}>(({ theme }) => ({
|
||||
color: theme.color.negative,
|
||||
}));
|
||||
|
||||
const Incomplete = styled.span(({ theme }) => ({
|
||||
const Incomplete = styled.span<{}>(({ theme }) => ({
|
||||
color: theme.color.warning,
|
||||
}));
|
||||
|
||||
const Centered = styled.span({
|
||||
const Centered = styled.span<{}>({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
@ -193,7 +196,7 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
|
||||
case 'running':
|
||||
return (
|
||||
<Centered>
|
||||
<RotatingIcons inline icon="sync" /> Please wait while the accessibility scan is running
|
||||
<RotatingIcon inline icon="sync" /> Please wait while the accessibility scan is running
|
||||
...
|
||||
</Centered>
|
||||
);
|
||||
@ -205,7 +208,7 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
|
||||
'Rerun tests'
|
||||
) : (
|
||||
<Fragment>
|
||||
<Icons inline icon="check" /> Tests completed
|
||||
<Icon inline icon="check" /> Tests completed
|
||||
</Fragment>
|
||||
);
|
||||
return (
|
||||
|
||||
@ -18,7 +18,7 @@ const getFilter = (filter: string | null) => {
|
||||
return `url('#${filter}')`;
|
||||
};
|
||||
|
||||
const ColorIcon = styled.span(
|
||||
const ColorIcon = styled.span<{ filter: string | null }>(
|
||||
{
|
||||
background: 'linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)',
|
||||
borderRadius: '1rem',
|
||||
@ -26,7 +26,7 @@ const ColorIcon = styled.span(
|
||||
height: '1rem',
|
||||
width: '1rem',
|
||||
},
|
||||
({ filter }: { filter: string | null }) => ({
|
||||
({ filter }) => ({
|
||||
filter: getFilter(filter),
|
||||
}),
|
||||
({ theme }) => ({
|
||||
@ -80,7 +80,7 @@ const getColorList = (active: string | null, set: (i: string | null) => void): L
|
||||
];
|
||||
|
||||
export const ColorBlindness: FunctionComponent = () => {
|
||||
const [active, setActiveState] = useState(null);
|
||||
const [active, setActiveState] = useState<string | null>(null);
|
||||
|
||||
const setActive = (activeState: string | null): void => {
|
||||
const iframe = getIframe();
|
||||
|
||||
@ -5,24 +5,24 @@ import { styled, themes, convert } from '@storybook/theming';
|
||||
import memoize from 'memoizerific';
|
||||
|
||||
import { NodeResult } from 'axe-core';
|
||||
import { Dispatch } from 'redux';
|
||||
import { RuleType } from '../A11YPanel';
|
||||
import { addElement } from '../../redux-config';
|
||||
import { IFRAME } from '../../constants';
|
||||
|
||||
export class HighlightedElementData {
|
||||
export interface HighlightedElementData {
|
||||
originalOutline: string;
|
||||
|
||||
isHighlighted: boolean;
|
||||
}
|
||||
|
||||
interface ToggleProps {
|
||||
elementsToHighlight: NodeResult[];
|
||||
type: RuleType;
|
||||
addElement?: (data: any) => void;
|
||||
highlightedElementsMap?: Map<HTMLElement, HighlightedElementData>;
|
||||
addElement: (data: any) => void;
|
||||
highlightedElementsMap: Map<HTMLElement, HighlightedElementData>;
|
||||
isToggledOn?: boolean;
|
||||
toggleId?: string;
|
||||
indeterminate?: boolean;
|
||||
indeterminate: boolean;
|
||||
}
|
||||
|
||||
enum CheckBoxStates {
|
||||
@ -48,7 +48,7 @@ function getElementBySelectorPath(elementPath: string): HTMLElement {
|
||||
if (iframe && iframe.contentDocument && elementPath) {
|
||||
return iframe.contentDocument.querySelector(elementPath);
|
||||
}
|
||||
return null;
|
||||
return (null as unknown) as HTMLElement;
|
||||
}
|
||||
|
||||
function setElementOutlineStyle(targetElement: HTMLElement, outlineStyle: string): void {
|
||||
@ -64,7 +64,7 @@ function areAllRequiredElementsHighlighted(
|
||||
const targetElement = getElementBySelectorPath(item.target[0]);
|
||||
return (
|
||||
highlightedElementsMap.has(targetElement) &&
|
||||
highlightedElementsMap.get(targetElement).isHighlighted
|
||||
(highlightedElementsMap.get(targetElement) as HighlightedElementData).isHighlighted
|
||||
);
|
||||
}).length;
|
||||
|
||||
@ -76,7 +76,7 @@ function areAllRequiredElementsHighlighted(
|
||||
: CheckBoxStates.INDETERMINATE;
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch: any) {
|
||||
function mapDispatchToProps(dispatch: Dispatch) {
|
||||
return {
|
||||
addElement: (data: { element: HTMLElement; data: HighlightedElementData }) =>
|
||||
dispatch(addElement(data)),
|
||||
@ -112,7 +112,7 @@ class HighlightToggle extends Component<ToggleProps> {
|
||||
});
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: Readonly<ToggleProps>): void {
|
||||
componentDidUpdate(): void {
|
||||
const { indeterminate } = this.props;
|
||||
if (this.checkBoxRef.current) {
|
||||
this.checkBoxRef.current.indeterminate = indeterminate;
|
||||
@ -126,8 +126,9 @@ class HighlightToggle extends Component<ToggleProps> {
|
||||
if (!highlightedElementsMap.has(targetElement)) {
|
||||
return;
|
||||
}
|
||||
const { originalOutline } = highlightedElementsMap.get(targetElement);
|
||||
const { isHighlighted } = highlightedElementsMap.get(targetElement);
|
||||
const { originalOutline, isHighlighted } = highlightedElementsMap.get(
|
||||
targetElement
|
||||
) as HighlightedElementData;
|
||||
const { isToggledOn } = this.props;
|
||||
if ((isToggledOn && isHighlighted) || (!isToggledOn && !isHighlighted)) {
|
||||
const addHighlight = !isToggledOn && !isHighlighted;
|
||||
@ -151,7 +152,7 @@ class HighlightToggle extends Component<ToggleProps> {
|
||||
if (highlightedElementsMap.has(targetElement)) {
|
||||
setElementOutlineStyle(
|
||||
targetElement,
|
||||
highlightedElementsMap.get(targetElement).originalOutline
|
||||
highlightedElementsMap.get(targetElement)!.originalOutline
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -162,9 +163,7 @@ class HighlightToggle extends Component<ToggleProps> {
|
||||
originalOutline: string
|
||||
): void {
|
||||
const { addElement: localAddElement } = this.props;
|
||||
const data: HighlightedElementData = new HighlightedElementData();
|
||||
data.isHighlighted = isHighlighted;
|
||||
data.originalOutline = originalOutline;
|
||||
const data: HighlightedElementData = { isHighlighted, originalOutline };
|
||||
const payload = { element: targetElement, highlightedElementData: data };
|
||||
localAddElement(payload);
|
||||
}
|
||||
|
||||
@ -1,17 +1,8 @@
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import { styled } from '@storybook/theming';
|
||||
import { Badge, Icons } from '@storybook/components';
|
||||
import { Badge } from '@storybook/components';
|
||||
import { CheckResult } from 'axe-core';
|
||||
import { SizeMe } from 'react-sizeme';
|
||||
import { RuleType } from '../A11YPanel';
|
||||
|
||||
const impactColors = {
|
||||
minor: '#f1c40f',
|
||||
moderate: '#e67e22',
|
||||
serious: '#e74c3c',
|
||||
critical: '#c0392b',
|
||||
success: '#2ecc71',
|
||||
};
|
||||
|
||||
const List = styled.div({
|
||||
display: 'flex',
|
||||
@ -22,7 +13,7 @@ const List = styled.div({
|
||||
fontWeight: '400',
|
||||
} as any);
|
||||
|
||||
const Item = styled.div(({ elementWidth }: { elementWidth: number }) => {
|
||||
const Item = styled.div<{ elementWidth: number }>(({ elementWidth }) => {
|
||||
const maxWidthBeforeBreak = 407;
|
||||
return {
|
||||
flexDirection: elementWidth > maxWidthBeforeBreak ? 'row' : 'inherit',
|
||||
@ -31,31 +22,20 @@ const Item = styled.div(({ elementWidth }: { elementWidth: number }) => {
|
||||
};
|
||||
});
|
||||
|
||||
const StyledBadge = styled(Badge)(({ status }: { status: string }) => ({
|
||||
const StyledBadge = styled(Badge)({
|
||||
padding: '2px 8px',
|
||||
marginBottom: 3,
|
||||
minWidth: 65,
|
||||
maxWidth: 'fit-content',
|
||||
width: '100%',
|
||||
textAlign: 'center',
|
||||
}));
|
||||
});
|
||||
|
||||
const Message = styled.div({
|
||||
paddingLeft: 6,
|
||||
paddingRight: 23,
|
||||
});
|
||||
|
||||
const Status = styled.div(({ passes, impact }: { passes: boolean; impact: string }) => ({
|
||||
display: 'inline-flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
color: passes ? impactColors.success : (impactColors as any)[impact],
|
||||
'& > svg': {
|
||||
height: 16,
|
||||
width: 16,
|
||||
},
|
||||
}));
|
||||
|
||||
export enum ImpactValue {
|
||||
MINOR = 'minor',
|
||||
MODERATE = 'moderate',
|
||||
@ -94,7 +74,7 @@ const Rule: FunctionComponent<RuleProps> = ({ rule }) => {
|
||||
}
|
||||
return (
|
||||
<SizeMe refreshMode="debounce">
|
||||
{({ size }: { size: any }) => (
|
||||
{({ size }: { size: { width: number; height: number } }) => (
|
||||
<Item elementWidth={size.width}>
|
||||
<StyledBadge status={badgeType}>{formatSeverityText(rule.impact)}</StyledBadge>
|
||||
<Message>{rule.message}</Message>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { Component, SyntheticEvent } from 'react';
|
||||
|
||||
import { styled, themes } from '@storybook/theming';
|
||||
import { styled } from '@storybook/theming';
|
||||
import { NodeResult, Result } from 'axe-core';
|
||||
import { SizeMe } from 'react-sizeme';
|
||||
import store, { clearElements } from '../redux-config';
|
||||
@ -23,7 +23,7 @@ const HighlightToggleLabel = styled.label<{}>(({ theme }) => ({
|
||||
color: theme.color.dark,
|
||||
}));
|
||||
|
||||
const GlobalToggle = styled.div(({ elementWidth }: { elementWidth: number }) => {
|
||||
const GlobalToggle = styled.div<{ elementWidth: number }>(({ elementWidth }) => {
|
||||
const maxWidthBeforeBreak = 450;
|
||||
return {
|
||||
cursor: 'pointer',
|
||||
@ -47,7 +47,7 @@ const GlobalToggle = styled.div(({ elementWidth }: { elementWidth: number }) =>
|
||||
};
|
||||
});
|
||||
|
||||
const Item = styled.button(
|
||||
const Item = styled.button<{ active?: boolean }>(
|
||||
({ theme }) => ({
|
||||
textDecoration: 'none',
|
||||
padding: '10px 15px',
|
||||
@ -66,7 +66,7 @@ const Item = styled.button(
|
||||
borderBottom: `3px solid ${theme.color.secondary}`,
|
||||
},
|
||||
}),
|
||||
({ active, theme }: any) =>
|
||||
({ active, theme }) =>
|
||||
active
|
||||
? {
|
||||
opacity: 1,
|
||||
@ -99,7 +99,7 @@ interface TabsState {
|
||||
}
|
||||
|
||||
function retrieveAllNodesFromResults(items: Result[]): NodeResult[] {
|
||||
return items.reduce((acc, item) => acc.concat(item.nodes), []);
|
||||
return items.reduce((acc, item) => acc.concat(item.nodes), [] as NodeResult[]);
|
||||
}
|
||||
|
||||
export class Tabs extends Component<TabsProps, TabsState> {
|
||||
@ -109,7 +109,7 @@ export class Tabs extends Component<TabsProps, TabsState> {
|
||||
|
||||
onToggle = (event: SyntheticEvent) => {
|
||||
this.setState({
|
||||
active: parseInt(event.currentTarget.getAttribute('data-index'), 10),
|
||||
active: parseInt(event.currentTarget.getAttribute('data-index') || '', 10),
|
||||
});
|
||||
// removes all elements from the redux map in store from the previous panel
|
||||
store.dispatch(clearElements());
|
||||
|
||||
@ -14,7 +14,7 @@ interface Setup {
|
||||
manual: boolean;
|
||||
}
|
||||
|
||||
let setup: Setup = { element: null, config: {}, options: {}, manual: false };
|
||||
let setup: Setup = { element: undefined, config: {}, options: {}, manual: false };
|
||||
|
||||
const getElement = () => {
|
||||
const storyRoot = document.getElementById('story-root');
|
||||
@ -66,7 +66,9 @@ export const withA11y = makeDecorator({
|
||||
storedDefaultSetup = null;
|
||||
}
|
||||
|
||||
addons.getChannel().on(EVENTS.REQUEST, () => run(setup.element, setup.config, setup.options));
|
||||
addons
|
||||
.getChannel()
|
||||
.on(EVENTS.REQUEST, () => run(setup.element as ElementContext, setup.config, setup.options));
|
||||
addons.getChannel().emit(EVENTS.MANUAL, setup.manual);
|
||||
|
||||
return getStory(context);
|
||||
|
||||
@ -2,7 +2,13 @@
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": ["webpack-env"]
|
||||
"types": ["webpack-env"],
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -28,12 +28,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/api": "5.3.0-rc.0",
|
||||
"@storybook/client-api": "5.3.0-rc.0",
|
||||
"@storybook/components": "5.3.0-rc.0",
|
||||
"@storybook/core-events": "5.3.0-rc.0",
|
||||
"@storybook/theming": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/api": "5.3.0-rc.12",
|
||||
"@storybook/client-api": "5.3.0-rc.12",
|
||||
"@storybook/components": "5.3.0-rc.12",
|
||||
"@storybook/core-events": "5.3.0-rc.12",
|
||||
"@storybook/theming": "5.3.0-rc.12",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^2.0.1",
|
||||
"global": "^4.3.2",
|
||||
@ -50,5 +50,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -32,12 +32,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/api": "5.3.0-rc.0",
|
||||
"@storybook/client-logger": "5.3.0-rc.0",
|
||||
"@storybook/components": "5.3.0-rc.0",
|
||||
"@storybook/core-events": "5.3.0-rc.0",
|
||||
"@storybook/theming": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/api": "5.3.0-rc.12",
|
||||
"@storybook/client-logger": "5.3.0-rc.12",
|
||||
"@storybook/components": "5.3.0-rc.12",
|
||||
"@storybook/core-events": "5.3.0-rc.12",
|
||||
"@storybook/theming": "5.3.0-rc.12",
|
||||
"core-js": "^3.0.1",
|
||||
"memoizerific": "^1.11.3",
|
||||
"react": "^16.8.3",
|
||||
@ -49,5 +49,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "Storybook decorator to center components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,7 +29,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"util-deprecate": "^1.0.2"
|
||||
@ -40,5 +40,5 @@
|
||||
"preact": "*",
|
||||
"react": "*"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -109,8 +109,8 @@ export const contexts = [
|
||||
],
|
||||
params: [
|
||||
// an array of params contains a set of predefined `props` for `components`
|
||||
{ name: 'Light Theme', props: { theme /* : your dark theme */ } },
|
||||
{ name: 'Dark Theme', props: { theme /* : your light theme */ }, default: true },
|
||||
{ name: 'Light Theme', props: { theme /* : your light theme */ } },
|
||||
{ name: 'Dark Theme', props: { theme /* : your dark theme */ }, default: true },
|
||||
],
|
||||
options: {
|
||||
deep: true, // pass the `props` deeply into all wrapping components
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-contexts",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "Storybook Addon Contexts",
|
||||
"keywords": [
|
||||
"preact",
|
||||
@ -27,10 +27,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/api": "5.3.0-rc.0",
|
||||
"@storybook/components": "5.3.0-rc.0",
|
||||
"@storybook/core-events": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/api": "5.3.0-rc.12",
|
||||
"@storybook/components": "5.3.0-rc.12",
|
||||
"@storybook/core-events": "5.3.0-rc.12",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"qs": "^6.6.0"
|
||||
@ -39,11 +39,12 @@
|
||||
"global": "*",
|
||||
"preact": "*",
|
||||
"qs": "*",
|
||||
"rax": "*",
|
||||
"react": "*",
|
||||
"vue": "*"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
4
addons/contexts/rax.js
Normal file
4
addons/contexts/rax.js
Normal file
@ -0,0 +1,4 @@
|
||||
import { withContexts } from './dist/preview/frameworks/rax';
|
||||
|
||||
export { withContexts };
|
||||
export default withContexts;
|
||||
14
addons/contexts/src/preview/frameworks/rax.ts
Normal file
14
addons/contexts/src/preview/frameworks/rax.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { createElement, RaxElement } from 'rax';
|
||||
import { createAddonDecorator, Render } from '../../index';
|
||||
import { ContextsPreviewAPI } from '../ContextsPreviewAPI';
|
||||
|
||||
/**
|
||||
* This is the framework specific bindings for Rax.
|
||||
* '@storybook/rax' expects the returning object from a decorator to be a 'Rax Element' (vNode).
|
||||
*/
|
||||
export const renderRax: Render<RaxElement<any>> = (contextNodes, propsMap, getStoryVNode) => {
|
||||
const { getRendererFrom } = ContextsPreviewAPI();
|
||||
return getRendererFrom(createElement)(contextNodes, propsMap, getStoryVNode);
|
||||
};
|
||||
|
||||
export const withContexts = createAddonDecorator(renderRax);
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-cssresources",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "A storybook addon to switch between css resources at runtime for your story",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -32,10 +32,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/api": "5.3.0-rc.0",
|
||||
"@storybook/components": "5.3.0-rc.0",
|
||||
"@storybook/core-events": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/api": "5.3.0-rc.12",
|
||||
"@storybook/components": "5.3.0-rc.12",
|
||||
"@storybook/core-events": "5.3.0-rc.12",
|
||||
"@storybook/theming": "5.3.0-rc.12",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3"
|
||||
@ -46,5 +47,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import { SyntaxHighlighter } from '@storybook/components';
|
||||
import { SyntaxHighlighter, Placeholder, Spaced, Icons } from '@storybook/components';
|
||||
import { STORY_RENDERED } from '@storybook/core-events';
|
||||
import { API } from '@storybook/api';
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
import { EVENTS, PARAM_KEY } from './constants';
|
||||
import { CssResource } from './CssResource';
|
||||
@ -20,6 +21,27 @@ interface CssResourceLookup {
|
||||
[key: string]: CssResource;
|
||||
}
|
||||
|
||||
const maxLimitToUseSyntaxHighlighter = 100000;
|
||||
|
||||
const PlainCode = styled.pre({
|
||||
textAlign: 'left',
|
||||
fontWeight: 'normal',
|
||||
});
|
||||
|
||||
const Warning = styled.div({
|
||||
display: 'flex',
|
||||
padding: '10px',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
background: '#fff3cd',
|
||||
fontSize: 12,
|
||||
'& svg': {
|
||||
marginRight: 10,
|
||||
width: 24,
|
||||
height: 24,
|
||||
},
|
||||
});
|
||||
|
||||
export class CssResourcePanel extends Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
@ -96,7 +118,20 @@ export class CssResourcePanel extends Component<Props, State> {
|
||||
<input type="checkbox" checked={picked} onChange={this.onChange} id={id} />
|
||||
<span>#{id}</span>
|
||||
</label>
|
||||
{code ? <SyntaxHighlighter language="html">{code}</SyntaxHighlighter> : null}
|
||||
{code && code.length < maxLimitToUseSyntaxHighlighter && (
|
||||
<SyntaxHighlighter language="html">{code}</SyntaxHighlighter>
|
||||
)}
|
||||
{code && code.length >= maxLimitToUseSyntaxHighlighter && (
|
||||
<Placeholder>
|
||||
<Spaced row={1}>
|
||||
<PlainCode>{code.substring(0, maxLimitToUseSyntaxHighlighter)} ...</PlainCode>
|
||||
<Warning>
|
||||
<Icons icon="alert" />
|
||||
Rest of the content cannot be displayed
|
||||
</Warning>
|
||||
</Spaced>
|
||||
</Placeholder>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-design-assets",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "Design asset preview for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -34,12 +34,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/api": "5.3.0-rc.0",
|
||||
"@storybook/client-logger": "5.3.0-rc.0",
|
||||
"@storybook/components": "5.3.0-rc.0",
|
||||
"@storybook/core-events": "5.3.0-rc.0",
|
||||
"@storybook/theming": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/api": "5.3.0-rc.12",
|
||||
"@storybook/client-logger": "5.3.0-rc.12",
|
||||
"@storybook/components": "5.3.0-rc.12",
|
||||
"@storybook/core-events": "5.3.0-rc.12",
|
||||
"@storybook/theming": "5.3.0-rc.12",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
@ -49,5 +49,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -110,8 +110,8 @@ Then add the following to your `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
presets: ['@storybook/addon-docs/preset'],
|
||||
stories: ['../src/**/*.stories.(js|mdx)'],
|
||||
addons: ['@storybook/addon-docs'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -143,9 +143,9 @@ The `addon-docs` preset has a few configuration options that can be used to conf
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
presets: [
|
||||
addons: [
|
||||
{
|
||||
name: '@storybook/addon-docs/preset',
|
||||
name: '@storybook/addon-docs',
|
||||
options: {
|
||||
configureJSX: true,
|
||||
babelOptions: {},
|
||||
@ -156,7 +156,7 @@ module.exports = {
|
||||
};
|
||||
```
|
||||
|
||||
The `configureJsx` option is useful when you're writing your docs in MDX and your project's babel config isn't already set up to handle JSX files. `babelOptions` is a way to further configure the babel processor when you're using `configureJSX`.
|
||||
The `configureJSX` option is useful when you're writing your docs in MDX and your project's babel config isn't already set up to handle JSX files. `babelOptions` is a way to further configure the babel processor when you're using `configureJSX`.
|
||||
|
||||
`sourceLoaderOptions` is an object for configuring `@storybook/source-loader`. When set to `null` it tells docs not to run the `source-loader` at all, which can be used as an optimization, or if you're already using `source-loader` in your `main.js`.
|
||||
|
||||
|
||||
@ -26,7 +26,7 @@ Then add the following to your `.storybook/main.js` exports:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
presets: ['@storybook/addon-docs/preset'],
|
||||
addons: ['@storybook/addon-docs'],
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
@ -1,18 +1,28 @@
|
||||
<center>
|
||||
<img src="./media/docspage-hero.png" width="100%" />
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/docspage-hero.png" width="100%" />
|
||||
</center>
|
||||
|
||||
# Storybook DocsPage
|
||||
|
||||
When you install [Storybook Docs](../README.md), `DocsPage` is the zero-config default documentation that all stories get out of the box. It aggregates your stories, text descriptions, docgen comments, props tables, and code examples into a single page for each component.
|
||||
|
||||
- [Motivation](#motivation)
|
||||
- [Component parameter](#component-parameter)
|
||||
- [Subcomponents parameter](#subcomponents-parameter)
|
||||
- [DocsPage slots](#docspage-slots)
|
||||
- [Replacing DocsPage](#replacing-docspage)
|
||||
- [Story file names](#story-file-names)
|
||||
- [More resources](#more-resources)
|
||||
- [Storybook DocsPage](#storybook-docspage)
|
||||
- [Motivation](#motivation)
|
||||
- [Component parameter](#component-parameter)
|
||||
- [Subcomponents parameter](#subcomponents-parameter)
|
||||
- [DocsPage slots](#docspage-slots)
|
||||
- [Slot values](#slot-values)
|
||||
- [Title](#title)
|
||||
- [Subtitle](#subtitle)
|
||||
- [Description](#description)
|
||||
- [Primary](#primary)
|
||||
- [Props](#props)
|
||||
- [Stories](#stories)
|
||||
- [Slot functions](#slot-functions)
|
||||
- [Replacing DocsPage](#replacing-docspage)
|
||||
- [Story file names](#story-file-names)
|
||||
- [Inline stories vs. Iframe stories](#inline-stories-vs-iframe-stories)
|
||||
- [More resources](#more-resources)
|
||||
|
||||
## Motivation
|
||||
|
||||
@ -80,7 +90,7 @@ If you want organize your documentation differently for groups of components, we
|
||||
`DocsPage` is organized into a series of "slots" including Title, Subtitle, Description, Props, and Story. Each of these slots pulls information from your project and formats it for the screen.
|
||||
|
||||
<center>
|
||||
<img style="padding: 30px; border: 3px solid #eee;" src="./media/docspage-slots.png" width="100%" />
|
||||
<img style="padding: 30px; border: 3px solid #eee;" src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/docspage-slots.png" width="100%" />
|
||||
</center>
|
||||
|
||||
## Slot values
|
||||
|
||||
@ -19,7 +19,7 @@ Currently we hide the addons panel when docs is visible. It's tricky because all
|
||||
## How do I debug my MDX story?
|
||||
|
||||
<center>
|
||||
<img src="./media/faq-debug.png" width="100%" />
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/faq-debug.png" width="100%" />
|
||||
</center>
|
||||
|
||||
> "My story renders in docs, but doesn’t show up the way I’d expect in the Canvas”
|
||||
@ -37,7 +37,7 @@ For example, the following MDX story:
|
||||
Shows up in the dev tools as follows:
|
||||
|
||||
<center>
|
||||
<img src="./media/faq-devtools.png" width="100%" />
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/faq-devtools.png" width="100%" />
|
||||
</center>
|
||||
|
||||
This is [Component Story Format (CSF)](https://medium.com/storybookjs/component-story-format-66f4c32366df), so there are ways to debug. You can copy and paste this code into a new `.stories.js` file and play around with it at a lower level to understand what's going wrong.
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<center>
|
||||
<img src="./media/mdx-hero.png" width="100%" />
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/mdx-hero.png" width="100%" />
|
||||
</center>
|
||||
|
||||
# Storybook Docs MDX
|
||||
@ -8,14 +8,15 @@
|
||||
|
||||
`MDX` is the syntax [Storybook Docs](../README.md) uses to capture long-form markdown documentation and stories in one file. You can also write pure documentation pages in `MDX` and add them to Storybook alongside your stories.
|
||||
|
||||
- [Basic example](#basic-example)
|
||||
- [MDX-Flavored CSF](#mdx-flavored-csf)
|
||||
- [Writing stories](#writing-stories)
|
||||
- [Embedding stories](#embedding-stories)
|
||||
- [Decorators and parameters](#decorators-and-parameters)
|
||||
- [Documentation-only MDX](#documentation-only-mdx)
|
||||
- [MDX file names](#mdx-file-names)
|
||||
- [More resources](#more-resources)
|
||||
- [Storybook Docs MDX](#storybook-docs-mdx)
|
||||
- [Basic example](#basic-example)
|
||||
- [MDX-Flavored CSF](#mdx-flavored-csf)
|
||||
- [Writing stories](#writing-stories)
|
||||
- [Embedding stories](#embedding-stories)
|
||||
- [Decorators and parameters](#decorators-and-parameters)
|
||||
- [Documentation-only MDX](#documentation-only-mdx)
|
||||
- [MDX file names](#mdx-file-names)
|
||||
- [More resources](#more-resources)
|
||||
|
||||
## Basic example
|
||||
|
||||
@ -46,7 +47,7 @@ markdown documentation.
|
||||
And here's how that's rendered in Storybook:
|
||||
|
||||
<center>
|
||||
<img src="./media/mdx-simple.png" width="100%" />
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/mdx-simple.png" width="100%" />
|
||||
</center>
|
||||
|
||||
As you can see there's a lot going on here. We're writing Markdown, we're writing JSX, and somehow we're also defining Storybook stories that are drop-in compatible with the entire Storybook ecosystem.
|
||||
@ -130,7 +131,7 @@ with unique URLs and isolated snapshot tests.
|
||||
And here's how that gets rendered in Storybook:
|
||||
|
||||
<center>
|
||||
<img src="./media/mdx-page.png" width="100%" />
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/mdx-page.png" width="100%" />
|
||||
</center>
|
||||
|
||||
## Embedding stories
|
||||
@ -185,7 +186,7 @@ If you don't define a `Meta`, you can write Markdown and associate with an exist
|
||||
To get a "documentation-only story", in your UI, define a `<Meta>` as you normally would, but don't define any stories. It will show up in your UI as a documentation node:
|
||||
|
||||
<center>
|
||||
<img src="./media/mdx-documentation-only.png" width="100%" />
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/mdx-documentation-only.png" width="100%" />
|
||||
</center>
|
||||
|
||||
## MDX file names
|
||||
|
||||
@ -18,11 +18,11 @@ First add the package. Make sure that the versions for your `@storybook/*` packa
|
||||
yarn add -D @storybook/addon-docs@next
|
||||
```
|
||||
|
||||
Then add the following to your `.storybook/main.js` presets:
|
||||
Then add the following to your `.storybook/main.js` addons:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
presets: ['@storybook/addon-docs/preset'],
|
||||
addons: ['@storybook/addon-docs'],
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "Superior documentation for your components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,6 +22,7 @@
|
||||
"docs/**/*",
|
||||
"angular/**/*",
|
||||
"common/**/*",
|
||||
"ember/**/*",
|
||||
"html/**/*",
|
||||
"postinstall/**/*",
|
||||
"react/**/*",
|
||||
@ -45,13 +46,13 @@
|
||||
"@mdx-js/loader": "^1.5.1",
|
||||
"@mdx-js/mdx": "^1.5.1",
|
||||
"@mdx-js/react": "^1.5.1",
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/api": "5.3.0-rc.0",
|
||||
"@storybook/components": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/api": "5.3.0-rc.12",
|
||||
"@storybook/components": "5.3.0-rc.12",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/postinstall": "5.3.0-rc.0",
|
||||
"@storybook/source-loader": "5.3.0-rc.0",
|
||||
"@storybook/theming": "5.3.0-rc.0",
|
||||
"@storybook/postinstall": "5.3.0-rc.12",
|
||||
"@storybook/source-loader": "5.3.0-rc.12",
|
||||
"@storybook/theming": "5.3.0-rc.12",
|
||||
"acorn": "^7.1.0",
|
||||
"acorn-jsx": "^5.1.0",
|
||||
"acorn-walk": "^7.0.0",
|
||||
@ -88,5 +89,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -22,12 +22,12 @@ First add the package. Make sure that the versions for your `@storybook/*` packa
|
||||
yarn add -D @storybook/addon-docs@next
|
||||
```
|
||||
|
||||
Then add the following to your `.storybook/main.js` list of `presets`:
|
||||
Then add the following to your `.storybook/main.js` list of `addons`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
// other settings
|
||||
presets: ['@storybook/addon-docs/preset'];
|
||||
addons: ['@storybook/addon-docs'];
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -6,11 +6,12 @@ export interface DocsContextProps {
|
||||
selectedStory?: string;
|
||||
|
||||
/**
|
||||
* mdxStoryNameToId is an MDX-compiler-generated mapping of an MDX story's
|
||||
* display name to its storyId. It's used internally by the `<Story>`
|
||||
* doc block.
|
||||
* mdxStoryNameToKey is an MDX-compiler-generated mapping of an MDX story's
|
||||
* display name to its story key for ID generation. It's used internally by the `<Story>`
|
||||
* and `Preview` doc blocks.
|
||||
*/
|
||||
mdxStoryNameToId?: Record<string, string>;
|
||||
mdxStoryNameToKey?: Record<string, string>;
|
||||
mdxComponentMeta?: any;
|
||||
parameters?: any;
|
||||
storyStore?: any;
|
||||
forceRender?: () => void;
|
||||
|
||||
@ -1,4 +1,8 @@
|
||||
import { FunctionComponent } from 'react';
|
||||
import React, { FC, useContext } from 'react';
|
||||
import { document } from 'global';
|
||||
import { Anchor } from './Anchor';
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
import { getDocsStories } from './utils';
|
||||
|
||||
type Decorator = (...args: any) => any;
|
||||
|
||||
@ -9,9 +13,27 @@ interface MetaProps {
|
||||
parameters?: any;
|
||||
}
|
||||
|
||||
function getFirstStoryId(docsContext: DocsContextProps): string {
|
||||
const stories = getDocsStories(docsContext);
|
||||
|
||||
return stories.length > 0 ? stories[0].id : null;
|
||||
}
|
||||
|
||||
function renderAnchor() {
|
||||
const context = useContext(DocsContext);
|
||||
// eslint-disable-next-line react/destructuring-assignment
|
||||
const anchorId = getFirstStoryId(context) || context.id;
|
||||
|
||||
return <Anchor storyId={anchorId} />;
|
||||
}
|
||||
|
||||
/**
|
||||
* This component is used to declare component metadata in docs
|
||||
* and gets transformed into a default export underneath the hood.
|
||||
* It doesn't actually render anything.
|
||||
*/
|
||||
export const Meta: FunctionComponent<MetaProps> = props => null;
|
||||
export const Meta: FC<MetaProps> = () => {
|
||||
const params = new URL(document.location).searchParams;
|
||||
const isDocs = params.get('viewMode') === 'docs';
|
||||
|
||||
return isDocs ? renderAnchor() : null;
|
||||
};
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React, { FunctionComponent, ReactElement, ReactNode, ReactNodeArray } from 'react';
|
||||
import { toId, storyNameFromExport } from '@storybook/csf';
|
||||
import { Preview as PurePreview, PreviewProps as PurePreviewProps } from '@storybook/components';
|
||||
import { getSourceProps } from './Source';
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
@ -21,7 +22,7 @@ const getPreviewProps = (
|
||||
children,
|
||||
...props
|
||||
}: PreviewProps & { children?: ReactNode },
|
||||
{ mdxStoryNameToId, storyStore }: DocsContextProps
|
||||
{ mdxStoryNameToKey, mdxComponentMeta, storyStore }: DocsContextProps
|
||||
): PurePreviewProps => {
|
||||
if (withSource === SourceState.NONE) {
|
||||
return props;
|
||||
@ -36,7 +37,14 @@ const getPreviewProps = (
|
||||
const stories = childArray.filter(
|
||||
(c: ReactElement) => c.props && (c.props.id || c.props.name)
|
||||
) as ReactElement[];
|
||||
const targetIds = stories.map(s => s.props.id || mdxStoryNameToId[s.props.name]);
|
||||
const targetIds = stories.map(
|
||||
s =>
|
||||
s.props.id ||
|
||||
toId(
|
||||
mdxComponentMeta.id || mdxComponentMeta.title,
|
||||
storyNameFromExport(mdxStoryNameToKey[s.props.name])
|
||||
)
|
||||
);
|
||||
const sourceProps = getSourceProps({ ids: targetIds }, { storyStore });
|
||||
return {
|
||||
...props, // pass through columns etc.
|
||||
|
||||
@ -17,7 +17,7 @@ export const Stories: FunctionComponent<StoriesProps> = ({ slot, title }) => {
|
||||
const stories: DocsStoryProps[] = slot
|
||||
? slot(componentStories, context)
|
||||
: componentStories && componentStories.slice(1);
|
||||
if (!stories) {
|
||||
if (!stories || stories.length === 0) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
|
||||
@ -2,6 +2,7 @@ import React, { createElement, ElementType, FunctionComponent, ReactNode } from
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
import { components as docsComponents } from '@storybook/components/html';
|
||||
import { Story, StoryProps as PureStoryProps } from '@storybook/components';
|
||||
import { toId, storyNameFromExport } from '@storybook/csf';
|
||||
import { CURRENT_SELECTION } from './shared';
|
||||
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
@ -40,12 +41,17 @@ const inferInlineStories = (framework: string): boolean => {
|
||||
|
||||
export const getStoryProps = (
|
||||
props: StoryProps,
|
||||
{ id: currentId, storyStore, parameters, mdxStoryNameToId }: DocsContextProps | null
|
||||
{ id: currentId, storyStore, mdxStoryNameToKey, mdxComponentMeta }: DocsContextProps | null
|
||||
): PureStoryProps => {
|
||||
const { id } = props as StoryRefProps;
|
||||
const { name } = props as StoryDefProps;
|
||||
const inputId = id === CURRENT_SELECTION ? currentId : id;
|
||||
const previewId = inputId || mdxStoryNameToId[name];
|
||||
const previewId =
|
||||
inputId ||
|
||||
toId(
|
||||
mdxComponentMeta.id || mdxComponentMeta.title,
|
||||
storyNameFromExport(mdxStoryNameToKey[name])
|
||||
);
|
||||
|
||||
const { height, inline } = props;
|
||||
const data = storyStore.fromId(previewId);
|
||||
|
||||
@ -4,6 +4,11 @@ import { StoryData, Component } from './shared';
|
||||
|
||||
export const getDocsStories = (context: DocsContextProps): StoryData[] => {
|
||||
const { storyStore, selectedKind } = context;
|
||||
|
||||
if (!storyStore) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return storyStore
|
||||
.getStoriesForKind(selectedKind)
|
||||
.filter((s: any) => !(s.parameters && s.parameters.docs && s.parameters.docs.disable));
|
||||
|
||||
@ -99,7 +99,7 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
|
||||
return result;
|
||||
}
|
||||
|
||||
export function addons(entry: any[] = [], options: any) {
|
||||
export function managerEntries(entry: any[] = [], options: any) {
|
||||
return [...entry, require.resolve('../../register')];
|
||||
}
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@ addParameters({
|
||||
sections.attributes = mapData(metaData.attributes);
|
||||
}
|
||||
if (metaData.properties) {
|
||||
sections.props = mapData(metaData.properties);
|
||||
sections.properties = mapData(metaData.properties);
|
||||
}
|
||||
if (metaData.events) {
|
||||
sections.events = mapData(metaData.events);
|
||||
|
||||
@ -39,13 +39,13 @@ componentNotes.story.parameters = { mdxSource: '<Button>Component notes</Button>
|
||||
|
||||
const componentMeta = { title: 'Button', id: 'button-id', includeStories: ['componentNotes'] };
|
||||
|
||||
const mdxStoryNameToId = { 'component notes': 'button-id--component-notes' };
|
||||
const mdxStoryNameToKey = { 'component notes': 'componentNotes' };
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = {
|
||||
...(componentMeta.parameters.docs || {}),
|
||||
page: () => (
|
||||
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
|
||||
<AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
|
||||
<MDXContent />
|
||||
</AddContext>
|
||||
),
|
||||
|
||||
@ -73,13 +73,13 @@ const componentMeta = {
|
||||
includeStories: ['one'],
|
||||
};
|
||||
|
||||
const mdxStoryNameToId = { one: 'button--one' };
|
||||
const mdxStoryNameToKey = { one: 'one' };
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = {
|
||||
...(componentMeta.parameters.docs || {}),
|
||||
page: () => (
|
||||
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
|
||||
<AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
|
||||
<MDXContent />
|
||||
</AddContext>
|
||||
),
|
||||
|
||||
@ -42,13 +42,13 @@ __page.story = { parameters: { docsOnly: true } };
|
||||
|
||||
const componentMeta = { title: 'docs-only', includeStories: ['__page'] };
|
||||
|
||||
const mdxStoryNameToId = {};
|
||||
const mdxStoryNameToKey = {};
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = {
|
||||
...(componentMeta.parameters.docs || {}),
|
||||
page: () => (
|
||||
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
|
||||
<AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
|
||||
<MDXContent />
|
||||
</AddContext>
|
||||
),
|
||||
|
||||
@ -36,13 +36,13 @@ __page.story = { parameters: { docsOnly: true } };
|
||||
|
||||
const componentMeta = { title: \\"Addons/Docs/what's in a title?\\", includeStories: ['__page'] };
|
||||
|
||||
const mdxStoryNameToId = {};
|
||||
const mdxStoryNameToKey = {};
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = {
|
||||
...(componentMeta.parameters.docs || {}),
|
||||
page: () => (
|
||||
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
|
||||
<AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
|
||||
<MDXContent />
|
||||
</AddContext>
|
||||
),
|
||||
|
||||
@ -51,13 +51,13 @@ helloStory.story.parameters = { mdxSource: '<Button>Hello button</Button>' };
|
||||
|
||||
const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] };
|
||||
|
||||
const mdxStoryNameToId = { one: 'button--one', 'hello story': 'button--hello-story' };
|
||||
const mdxStoryNameToKey = { one: 'one', 'hello story': 'helloStory' };
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = {
|
||||
...(componentMeta.parameters.docs || {}),
|
||||
page: () => (
|
||||
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
|
||||
<AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
|
||||
<MDXContent />
|
||||
</AddContext>
|
||||
),
|
||||
|
||||
@ -71,16 +71,13 @@ const componentMeta = {
|
||||
includeStories: ['componentNotes', 'storyNotes'],
|
||||
};
|
||||
|
||||
const mdxStoryNameToId = {
|
||||
'component notes': 'button--component-notes',
|
||||
'story notes': 'button--story-notes',
|
||||
};
|
||||
const mdxStoryNameToKey = { 'component notes': 'componentNotes', 'story notes': 'storyNotes' };
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = {
|
||||
...(componentMeta.parameters.docs || {}),
|
||||
page: () => (
|
||||
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
|
||||
<AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
|
||||
<MDXContent />
|
||||
</AddContext>
|
||||
),
|
||||
|
||||
@ -70,13 +70,13 @@ const componentMeta = {
|
||||
includeStories: ['helloButton', 'two'],
|
||||
};
|
||||
|
||||
const mdxStoryNameToId = { 'hello button': 'button--hello-button', two: 'button--two' };
|
||||
const mdxStoryNameToKey = { 'hello button': 'helloButton', two: 'two' };
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = {
|
||||
...(componentMeta.parameters.docs || {}),
|
||||
page: () => (
|
||||
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
|
||||
<AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
|
||||
<MDXContent />
|
||||
</AddContext>
|
||||
),
|
||||
|
||||
@ -31,13 +31,13 @@ MDXContent.isMDXComponent = true;
|
||||
|
||||
const componentMeta = { includeStories: [] };
|
||||
|
||||
const mdxStoryNameToId = {};
|
||||
const mdxStoryNameToKey = {};
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = {
|
||||
...(componentMeta.parameters.docs || {}),
|
||||
page: () => (
|
||||
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
|
||||
<AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
|
||||
<MDXContent />
|
||||
</AddContext>
|
||||
),
|
||||
|
||||
@ -39,13 +39,13 @@ text.story.parameters = { mdxSource: \\"'Plain text'\\" };
|
||||
|
||||
const componentMeta = { title: 'Text', includeStories: ['text'] };
|
||||
|
||||
const mdxStoryNameToId = { text: 'text--text' };
|
||||
const mdxStoryNameToKey = { text: 'text' };
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = {
|
||||
...(componentMeta.parameters.docs || {}),
|
||||
page: () => (
|
||||
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
|
||||
<AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
|
||||
<MDXContent />
|
||||
</AddContext>
|
||||
),
|
||||
|
||||
@ -67,18 +67,18 @@ const componentMeta = {
|
||||
includeStories: ['one', 'helloStory', 'wPunctuation', '_1FineDay'],
|
||||
};
|
||||
|
||||
const mdxStoryNameToId = {
|
||||
one: 'button--one',
|
||||
'hello story': 'button--hello-story',
|
||||
'w/punctuation': 'button--w-punctuation',
|
||||
'1 fine day': 'button--1-fine-day',
|
||||
const mdxStoryNameToKey = {
|
||||
one: 'one',
|
||||
'hello story': 'helloStory',
|
||||
'w/punctuation': 'wPunctuation',
|
||||
'1 fine day': '_1FineDay',
|
||||
};
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = {
|
||||
...(componentMeta.parameters.docs || {}),
|
||||
page: () => (
|
||||
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
|
||||
<AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
|
||||
<MDXContent />
|
||||
</AddContext>
|
||||
),
|
||||
|
||||
@ -43,13 +43,13 @@ basic.story.parameters = { mdxSource: 'basicFn' };
|
||||
|
||||
const componentMeta = { title: 'story-function-var', includeStories: ['basic'] };
|
||||
|
||||
const mdxStoryNameToId = { basic: 'story-function-var--basic' };
|
||||
const mdxStoryNameToKey = { basic: 'basic' };
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = {
|
||||
...(componentMeta.parameters.docs || {}),
|
||||
page: () => (
|
||||
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
|
||||
<AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
|
||||
<MDXContent />
|
||||
</AddContext>
|
||||
),
|
||||
|
||||
@ -48,13 +48,13 @@ functionStory.story.parameters = {
|
||||
|
||||
const componentMeta = { includeStories: ['functionStory'] };
|
||||
|
||||
const mdxStoryNameToId = {};
|
||||
const mdxStoryNameToKey = { function: 'functionStory' };
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = {
|
||||
...(componentMeta.parameters.docs || {}),
|
||||
page: () => (
|
||||
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
|
||||
<AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
|
||||
<MDXContent />
|
||||
</AddContext>
|
||||
),
|
||||
|
||||
@ -60,13 +60,13 @@ toStorybook.story.parameters = {
|
||||
|
||||
const componentMeta = { title: 'MDX|Welcome', includeStories: ['toStorybook'] };
|
||||
|
||||
const mdxStoryNameToId = { 'to storybook': 'mdx-welcome--to-storybook' };
|
||||
const mdxStoryNameToKey = { 'to storybook': 'toStorybook' };
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = {
|
||||
...(componentMeta.parameters.docs || {}),
|
||||
page: () => (
|
||||
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
|
||||
<AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
|
||||
<MDXContent />
|
||||
</AddContext>
|
||||
),
|
||||
|
||||
@ -31,13 +31,13 @@ MDXContent.isMDXComponent = true;
|
||||
|
||||
const componentMeta = { includeStories: [] };
|
||||
|
||||
const mdxStoryNameToId = {};
|
||||
const mdxStoryNameToKey = {};
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = {
|
||||
...(componentMeta.parameters.docs || {}),
|
||||
page: () => (
|
||||
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
|
||||
<AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
|
||||
<MDXContent />
|
||||
</AddContext>
|
||||
),
|
||||
|
||||
@ -37,13 +37,13 @@ __page.story = { parameters: { docsOnly: true } };
|
||||
|
||||
const componentMeta = { title: \`\${titleFunction('template')}\`, includeStories: ['__page'] };
|
||||
|
||||
const mdxStoryNameToId = {};
|
||||
const mdxStoryNameToKey = {};
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = {
|
||||
...(componentMeta.parameters.docs || {}),
|
||||
page: () => (
|
||||
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
|
||||
<AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
|
||||
<MDXContent />
|
||||
</AddContext>
|
||||
),
|
||||
|
||||
@ -32,13 +32,13 @@ MDXContent.isMDXComponent = true;
|
||||
|
||||
const componentMeta = { includeStories: [] };
|
||||
|
||||
const mdxStoryNameToId = {};
|
||||
const mdxStoryNameToKey = {};
|
||||
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = {
|
||||
...(componentMeta.parameters.docs || {}),
|
||||
page: () => (
|
||||
<AddContext mdxStoryNameToId={mdxStoryNameToId}>
|
||||
<AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
|
||||
<MDXContent />
|
||||
</AddContext>
|
||||
),
|
||||
|
||||
@ -3,7 +3,6 @@ const parser = require('@babel/parser');
|
||||
const generate = require('@babel/generator').default;
|
||||
const camelCase = require('lodash/camelCase');
|
||||
const jsStringEscape = require('js-string-escape');
|
||||
const { toId, storyNameFromExport } = require('@storybook/csf');
|
||||
|
||||
// Generate the MDX as is, but append named exports for every
|
||||
// story in the contents
|
||||
@ -198,13 +197,13 @@ function getExports(node, counter, options) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// insert `mdxKind` into the context so that we can know what "kind" we're rendering into
|
||||
// when we render <Story name="xxx">...</Story>, since this MDX can be attached to any `selectedKind`!
|
||||
// insert `mdxStoryNameToKey` and `mdxComponentMeta` into the context so that we
|
||||
// can reconstruct the Story ID dynamically from the `name` at render time
|
||||
const wrapperJs = `
|
||||
componentMeta.parameters = componentMeta.parameters || {};
|
||||
componentMeta.parameters.docs = {
|
||||
...(componentMeta.parameters.docs || {}),
|
||||
page: () => <AddContext mdxStoryNameToId={mdxStoryNameToId}><MDXContent /></AddContext>,
|
||||
page: () => <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}><MDXContent /></AddContext>,
|
||||
};
|
||||
`.trim();
|
||||
|
||||
@ -322,23 +321,12 @@ function extractExports(node, options) {
|
||||
}
|
||||
metaExport.includeStories = JSON.stringify(includeStories);
|
||||
|
||||
const { title, id: componentId } = metaExport;
|
||||
const mdxStoryNameToId = Object.entries(context.storyNameToKey).reduce(
|
||||
(acc, [storyName, storyKey]) => {
|
||||
if (title) {
|
||||
acc[storyName] = toId(componentId || title, storyNameFromExport(storyKey));
|
||||
}
|
||||
return acc;
|
||||
},
|
||||
{}
|
||||
);
|
||||
|
||||
const fullJsx = [
|
||||
'import { assertIsFn, AddContext } from "@storybook/addon-docs/blocks";',
|
||||
defaultJsx,
|
||||
...storyExports,
|
||||
`const componentMeta = ${stringifyMeta(metaExport)};`,
|
||||
`const mdxStoryNameToId = ${JSON.stringify(mdxStoryNameToId)};`,
|
||||
`const mdxStoryNameToKey = ${JSON.stringify(context.storyNameToKey)};`,
|
||||
wrapperJs,
|
||||
'export default componentMeta;',
|
||||
].join('\n\n');
|
||||
|
||||
@ -11,7 +11,7 @@ const PRESET_METHODS = [
|
||||
'webpack',
|
||||
'webpackFinal',
|
||||
'managerWebpack',
|
||||
'addons',
|
||||
'managerEntries',
|
||||
'entries',
|
||||
'config',
|
||||
];
|
||||
|
||||
@ -22,11 +22,11 @@ First add the package. Make sure that the versions for your `@storybook/*` packa
|
||||
yarn add -D @storybook/addon-docs@next
|
||||
```
|
||||
|
||||
Then add the following to your `.storybook/main.js` presets:
|
||||
Then add the following to your `.storybook/main.js` addons:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
presets: ['@storybook/addon-docs/preset'],
|
||||
addons: ['@storybook/addon-docs'],
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ And then add the following line to your `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
presets: ['@storybook/addon-essentials'],
|
||||
addons: ['@storybook/addon-essentials'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -39,8 +39,8 @@ Yuu can disable any of Essential's addons using the following configuration sche
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
presets: [{
|
||||
name: '@storybook/addon-essentials'],
|
||||
addons: [{
|
||||
name: '@storybook/addon-essentials',
|
||||
options: {
|
||||
<addon-key>: false,
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -27,11 +27,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-backgrounds": "5.3.0-rc.0",
|
||||
"@storybook/addon-viewport": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/api": "5.3.0-rc.0",
|
||||
"@storybook/node-logger": "5.3.0-rc.0",
|
||||
"@storybook/addon-backgrounds": "5.3.0-rc.12",
|
||||
"@storybook/addon-viewport": "5.3.0-rc.12",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/api": "5.3.0-rc.12",
|
||||
"@storybook/node-logger": "5.3.0-rc.12",
|
||||
"ts-dedent": "^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -45,5 +45,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@ const isInstalled = (addon: string) => {
|
||||
|
||||
const makeAddon = (key: string) => `@storybook/addon-${key}`;
|
||||
|
||||
export function addons(entry: any[] = [], options: PresetOptions = {}) {
|
||||
export function managerEntries(entry: any[] = [], options: PresetOptions = {}) {
|
||||
const registerAddons = ['backgrounds', 'viewport']
|
||||
.filter(key => (options as any)[key] !== false)
|
||||
.map(key => makeAddon(key))
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -31,11 +31,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/api": "5.3.0-rc.0",
|
||||
"@storybook/client-api": "5.3.0-rc.0",
|
||||
"@storybook/core-events": "5.3.0-rc.0",
|
||||
"@storybook/theming": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/api": "5.3.0-rc.12",
|
||||
"@storybook/client-api": "5.3.0-rc.12",
|
||||
"@storybook/core-events": "5.3.0-rc.12",
|
||||
"@storybook/theming": "5.3.0-rc.12",
|
||||
"core-js": "^3.0.1",
|
||||
"format-json": "^1.0.3",
|
||||
"lodash": "^4.17.15",
|
||||
@ -51,5 +51,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-google-analytics",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "Storybook addon for google analytics",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,8 +20,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/core-events": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/core-events": "5.3.0-rc.12",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react-ga": "^2.5.7"
|
||||
@ -29,5 +29,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,8 +29,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/api": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/api": "5.3.0-rc.12",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"graphiql": "^0.16.0",
|
||||
@ -43,5 +43,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "A Storybook addon to show additional information for your stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,13 +28,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/client-logger": "5.3.0-rc.0",
|
||||
"@storybook/components": "5.3.0-rc.0",
|
||||
"@storybook/theming": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/client-logger": "5.3.0-rc.12",
|
||||
"@storybook/components": "5.3.0-rc.12",
|
||||
"@storybook/theming": "5.3.0-rc.12",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"marksy": "^7.0.0",
|
||||
"marksy": "^8.0.0",
|
||||
"nested-object-assign": "^1.0.3",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.3",
|
||||
@ -53,5 +53,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -35,11 +35,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/api": "5.3.0-rc.0",
|
||||
"@storybook/components": "5.3.0-rc.0",
|
||||
"@storybook/core-events": "5.3.0-rc.0",
|
||||
"@storybook/theming": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/api": "5.3.0-rc.12",
|
||||
"@storybook/components": "5.3.0-rc.12",
|
||||
"@storybook/core-events": "5.3.0-rc.12",
|
||||
"@storybook/theming": "5.3.0-rc.12",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
@ -53,5 +53,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,12 +29,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/api": "5.3.0-rc.0",
|
||||
"@storybook/client-api": "5.3.0-rc.0",
|
||||
"@storybook/components": "5.3.0-rc.0",
|
||||
"@storybook/core-events": "5.3.0-rc.0",
|
||||
"@storybook/theming": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/api": "5.3.0-rc.12",
|
||||
"@storybook/client-api": "5.3.0-rc.12",
|
||||
"@storybook/components": "5.3.0-rc.12",
|
||||
"@storybook/core-events": "5.3.0-rc.12",
|
||||
"@storybook/theming": "5.3.0-rc.12",
|
||||
"@types/react-color": "^3.0.1",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"core-js": "^3.0.1",
|
||||
@ -59,5 +59,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ type KnobsOptions = {
|
||||
addDecorator?: boolean;
|
||||
};
|
||||
|
||||
export function addons(entry: any[] = [], options: any) {
|
||||
export function managerEntries(entry: any[] = [], options: any) {
|
||||
return [...entry, require.resolve('../register')];
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,11 +29,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/client-logger": "5.3.0-rc.0",
|
||||
"@storybook/core-events": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/client-logger": "5.3.0-rc.12",
|
||||
"@storybook/core-events": "5.3.0-rc.12",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/router": "5.3.0-rc.0",
|
||||
"@storybook/router": "5.3.0-rc.12",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.7.2",
|
||||
@ -46,5 +46,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@ Storybook Addon Notes allows you to write notes (text or HTML) for your stories
|
||||
|
||||
## Getting Started
|
||||
|
||||
**NOTE: Documentation on master branch is for alpha version, stable release is on [master](https://github.com/storybookjs/storybook/tree/master/addons/)**
|
||||
**NOTE: Documentation on `next` 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,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-notes",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,13 +30,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/api": "5.3.0-rc.0",
|
||||
"@storybook/client-logger": "5.3.0-rc.0",
|
||||
"@storybook/components": "5.3.0-rc.0",
|
||||
"@storybook/core-events": "5.3.0-rc.0",
|
||||
"@storybook/router": "5.3.0-rc.0",
|
||||
"@storybook/theming": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/api": "5.3.0-rc.12",
|
||||
"@storybook/client-logger": "5.3.0-rc.12",
|
||||
"@storybook/components": "5.3.0-rc.12",
|
||||
"@storybook/core-events": "5.3.0-rc.12",
|
||||
"@storybook/router": "5.3.0-rc.12",
|
||||
"@storybook/theming": "5.3.0-rc.12",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"markdown-to-jsx": "^6.10.3",
|
||||
@ -55,5 +55,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-actions",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "Action Logger addon for react-native storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -26,13 +26,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/core-events": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/core-events": "5.3.0-rc.12",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^2.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "5.3.0-rc.0"
|
||||
"@storybook/addon-actions": "5.3.0-rc.12"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-actions": "*",
|
||||
@ -42,5 +42,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
Storybook Backgrounds Addon for react-native can be used to change background colors of your stories right from the device.
|
||||
|
||||
<img src="docs/demo.gif" alt="Storybook Backgrounds Addon Demo" width="400" />
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/ondevice-backgrounds/docs/demo.gif" alt="Storybook Backgrounds Addon Demo" width="400" />
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-backgrounds",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "A react-native storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -31,9 +31,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/api": "5.3.0-rc.0",
|
||||
"@storybook/client-api": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/api": "5.3.0-rc.12",
|
||||
"@storybook/client-api": "5.3.0-rc.12",
|
||||
"core-js": "^3.0.1",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
@ -44,5 +44,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-knobs",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "Display storybook story knobs on your deviced.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,8 +28,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/native": "^10.0.14",
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/core-events": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/core-events": "5.3.0-rc.12",
|
||||
"core-js": "^3.0.1",
|
||||
"deep-equal": "^1.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
@ -39,12 +39,12 @@
|
||||
"react-native-switch": "^1.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-knobs": "5.3.0-rc.0",
|
||||
"@storybook/addon-knobs": "5.3.0-rc.12",
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-notes",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "Write notes for your react-native Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,11 +28,11 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/core": "^10.0.20",
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/api": "5.3.0-rc.0",
|
||||
"@storybook/client-api": "5.3.0-rc.0",
|
||||
"@storybook/client-logger": "5.3.0-rc.0",
|
||||
"@storybook/core-events": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/api": "5.3.0-rc.12",
|
||||
"@storybook/client-api": "5.3.0-rc.12",
|
||||
"@storybook/client-logger": "5.3.0-rc.12",
|
||||
"@storybook/core-events": "5.3.0-rc.12",
|
||||
"core-js": "^3.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-native-simple-markdown": "^1.1.0"
|
||||
@ -44,5 +44,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-options",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "Options addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,7 +29,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"core-js": "^3.0.1",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
@ -39,5 +39,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-queryparams",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "parameter addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -30,12 +30,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/api": "5.3.0-rc.0",
|
||||
"@storybook/client-logger": "5.3.0-rc.0",
|
||||
"@storybook/components": "5.3.0-rc.0",
|
||||
"@storybook/core-events": "5.3.0-rc.0",
|
||||
"@storybook/theming": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/api": "5.3.0-rc.12",
|
||||
"@storybook/client-logger": "5.3.0-rc.12",
|
||||
"@storybook/components": "5.3.0-rc.12",
|
||||
"@storybook/core-events": "5.3.0-rc.12",
|
||||
"@storybook/theming": "5.3.0-rc.12",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"qs": "^6.6.0",
|
||||
@ -45,5 +45,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -33,9 +33,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@jest/transform": "^24.9.0",
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/client-api": "5.3.0-rc.0",
|
||||
"@storybook/core": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/client-api": "5.3.0-rc.12",
|
||||
"@storybook/core": "5.3.0-rc.12",
|
||||
"@types/glob": "^7.1.1",
|
||||
"@types/jest": "^24.0.16",
|
||||
"@types/jest-specific-snapshot": "^0.5.3",
|
||||
@ -49,8 +49,8 @@
|
||||
"ts-dedent": "^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-docs": "5.3.0-rc.0",
|
||||
"@storybook/react": "5.3.0-rc.0",
|
||||
"@storybook/addon-docs": "5.3.0-rc.12",
|
||||
"@storybook/react": "5.3.0-rc.12",
|
||||
"babel-loader": "^8.0.6",
|
||||
"enzyme-to-json": "^3.4.1",
|
||||
"jest-emotion": "^10.0.17",
|
||||
@ -59,5 +59,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -6,4 +6,5 @@ export type SupportedFramework =
|
||||
| 'riot'
|
||||
| 'react-native'
|
||||
| 'svelte'
|
||||
| 'vue';
|
||||
| 'vue'
|
||||
| 'rax';
|
||||
|
||||
@ -0,0 +1,33 @@
|
||||
import global from 'global';
|
||||
import configure from '../configure';
|
||||
import hasDependency from '../hasDependency';
|
||||
import { Loader } from '../Loader';
|
||||
import { StoryshotsOptions } from '../../api/StoryshotsOptions';
|
||||
|
||||
function test(options: StoryshotsOptions): boolean {
|
||||
return options.framework === 'rax' || (!options.framework && hasDependency('@storybook/rax'));
|
||||
}
|
||||
|
||||
function load(options: StoryshotsOptions) {
|
||||
global.STORYBOOK_ENV = 'rax';
|
||||
|
||||
const storybook = require.requireActual('@storybook/rax');
|
||||
|
||||
configure({ ...options, storybook });
|
||||
|
||||
return {
|
||||
framework: 'rax' as const,
|
||||
renderTree: require.requireActual('./renderTree').default,
|
||||
renderShallowTree: () => {
|
||||
throw new Error('Shallow renderer is not supported for rax');
|
||||
},
|
||||
storybook,
|
||||
};
|
||||
}
|
||||
|
||||
const raxLoader: Loader = {
|
||||
load,
|
||||
test,
|
||||
};
|
||||
|
||||
export default raxLoader;
|
||||
@ -0,0 +1,12 @@
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
import raxTestRenderer from 'rax-test-renderer';
|
||||
|
||||
function getRenderedTree(story: any, context: any, { renderer, ...rendererOptions }: any) {
|
||||
const storyElement = story.render();
|
||||
const currentRenderer = renderer || raxTestRenderer.create;
|
||||
const tree = currentRenderer(storyElement, rendererOptions);
|
||||
|
||||
return tree;
|
||||
}
|
||||
|
||||
export default getRenderedTree;
|
||||
@ -2,5 +2,6 @@ declare module 'global';
|
||||
declare module 'jest-preset-angular/*';
|
||||
declare module 'preact-render-to-json';
|
||||
declare module 'react-test-renderer*';
|
||||
declare module 'rax-test-renderer*';
|
||||
declare module '@storybook/core/server';
|
||||
declare module 'babel-plugin-require-context-hook/register';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,25 +29,26 @@
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@hypnosphi/jest-puppeteer-axe": "^1.4.0",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/node-logger": "5.3.0-rc.0",
|
||||
"@storybook/node-logger": "5.3.0-rc.12",
|
||||
"@types/jest-image-snapshot": "^2.8.0",
|
||||
"@wordpress/jest-puppeteer-axe": "^1.5.0",
|
||||
"core-js": "^3.0.1",
|
||||
"jest-image-snapshot": "^2.8.2",
|
||||
"regenerator-runtime": "^0.13.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@types/puppeteer": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "5.3.0-rc.0",
|
||||
"@storybook/addon-storyshots": "5.3.0-rc.12",
|
||||
"puppeteer": "^1.12.2 || ^2.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a",
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
|
||||
"peerDependenciesMeta": {
|
||||
"puppeteer": {
|
||||
"optional": true
|
||||
|
||||
@ -1,46 +1,50 @@
|
||||
import { toId } from '@storybook/csf';
|
||||
|
||||
import { constructUrl } from '../url';
|
||||
|
||||
jest.mock('@storybook/node-logger');
|
||||
|
||||
const id = toId('someKind', 'someStory');
|
||||
|
||||
describe('Construct URL for Storyshots', () => {
|
||||
it('can use a url without path and without query params', () => {
|
||||
expect(constructUrl('http://localhost:9001', 'someKind', 'someStory')).toEqual(
|
||||
expect(constructUrl('http://localhost:9001', id)).toEqual(
|
||||
'http://localhost:9001/iframe.html?id=somekind--somestory'
|
||||
);
|
||||
});
|
||||
|
||||
it('can use a url without path (but slash) and without query params', () => {
|
||||
expect(constructUrl('http://localhost:9001/', 'someKind', 'someStory')).toEqual(
|
||||
expect(constructUrl('http://localhost:9001/', id)).toEqual(
|
||||
'http://localhost:9001/iframe.html?id=somekind--somestory'
|
||||
);
|
||||
});
|
||||
|
||||
it('can use a url without path and with query params', () => {
|
||||
expect(constructUrl('http://localhost:9001?hello=world', 'someKind', 'someStory')).toEqual(
|
||||
expect(constructUrl('http://localhost:9001?hello=world', id)).toEqual(
|
||||
'http://localhost:9001/iframe.html?id=somekind--somestory&hello=world'
|
||||
);
|
||||
});
|
||||
|
||||
it('can use a url without path (buth slash) and with query params', () => {
|
||||
expect(constructUrl('http://localhost:9001/?hello=world', 'someKind', 'someStory')).toEqual(
|
||||
expect(constructUrl('http://localhost:9001/?hello=world', id)).toEqual(
|
||||
'http://localhost:9001/iframe.html?id=somekind--somestory&hello=world'
|
||||
);
|
||||
});
|
||||
|
||||
it('can use a url with some path and query params', () => {
|
||||
expect(
|
||||
constructUrl('http://localhost:9001/nice-path?hello=world', 'someKind', 'someStory')
|
||||
).toEqual('http://localhost:9001/nice-path/iframe.html?id=somekind--somestory&hello=world');
|
||||
expect(constructUrl('http://localhost:9001/nice-path?hello=world', id)).toEqual(
|
||||
'http://localhost:9001/nice-path/iframe.html?id=somekind--somestory&hello=world'
|
||||
);
|
||||
});
|
||||
|
||||
it('can use a url with some path (slash) and query params', () => {
|
||||
expect(
|
||||
constructUrl('http://localhost:9001/nice-path/?hello=world', 'someKind', 'someStory')
|
||||
).toEqual('http://localhost:9001/nice-path/iframe.html?id=somekind--somestory&hello=world');
|
||||
expect(constructUrl('http://localhost:9001/nice-path/?hello=world', id)).toEqual(
|
||||
'http://localhost:9001/nice-path/iframe.html?id=somekind--somestory&hello=world'
|
||||
);
|
||||
});
|
||||
|
||||
it('can use a url with file protocol', () => {
|
||||
expect(constructUrl('file://users/storybook', 'someKind', 'someStory')).toEqual(
|
||||
expect(constructUrl('file://users/storybook', id)).toEqual(
|
||||
'file://users/storybook/iframe.html?id=somekind--somestory'
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import '@hypnosphi/jest-puppeteer-axe';
|
||||
import '@wordpress/jest-puppeteer-axe';
|
||||
import { defaultCommonConfig, CommonConfig } from './config';
|
||||
import { puppeteerTest } from './puppeteerTest';
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ export const puppeteerTest = (customConfig: Partial<PuppeteerTestConfig> = {}) =
|
||||
let page: Page; // Hold ref to the page to screenshot.
|
||||
|
||||
const testFn = async ({ context }: any) => {
|
||||
const { kind, framework, name } = context;
|
||||
const { kind, framework, name, id } = context;
|
||||
if (framework === 'react-native') {
|
||||
// Skip tests since RN is not a browser environment.
|
||||
logger.error(
|
||||
@ -29,7 +29,7 @@ export const puppeteerTest = (customConfig: Partial<PuppeteerTestConfig> = {}) =
|
||||
return;
|
||||
}
|
||||
|
||||
const url = constructUrl(storybookUrl, kind, name);
|
||||
const url = constructUrl(storybookUrl, id);
|
||||
const options = { context, url };
|
||||
if (testBody.filter != null && !testBody.filter(options)) {
|
||||
return;
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
import { toId } from '@storybook/csf';
|
||||
|
||||
import { URL } from 'url';
|
||||
|
||||
export const constructUrl = (storybookUrl: string, kind: string, story: string) => {
|
||||
const id = toId(kind, story);
|
||||
|
||||
export const constructUrl = (storybookUrl: string, id: string) => {
|
||||
const storyUrl = `/iframe.html?id=${id}`;
|
||||
const { protocol, host, pathname, search } = new URL(storybookUrl);
|
||||
const pname = pathname.replace(/\/$/, ''); // removes trailing /
|
||||
|
||||
@ -18,29 +18,33 @@ You can add configuration for this addon by using a preset or by using the addon
|
||||
|
||||
### Install using preset
|
||||
|
||||
Add the following to your `.storybook/presets.js` exports:
|
||||
Add the following to your `.storybook/main.js` exports:
|
||||
|
||||
```js
|
||||
module.exports = ['@storybook/addon-storysource/preset'];
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-storysource'],
|
||||
};
|
||||
```
|
||||
|
||||
You can pass configurations into the addon-storysource loader in your `.storybook/presets.js` file, e.g.:
|
||||
You can pass configurations into the addon-storysource loader in your `.storybook/main.js` file, e.g.:
|
||||
|
||||
```javascript
|
||||
module.exports = [
|
||||
{
|
||||
name: '@storybook/addon-storysource/preset',
|
||||
options: {
|
||||
rule: {
|
||||
// test: [/\.stories\.jsx?$/], This is default
|
||||
include: [path.resolve(__dirname, '../src')], // You can specify directories
|
||||
},
|
||||
loaderOptions: {
|
||||
prettierConfig: { printWidth: 80, singleQuote: false },
|
||||
```js
|
||||
module.exports = {
|
||||
addons: [
|
||||
{
|
||||
name: '@storybook/addon-storysource',
|
||||
options: {
|
||||
rule: {
|
||||
// test: [/\.stories\.jsx?$/], This is default
|
||||
include: [path.resolve(__dirname, '../src')], // You can specify directories
|
||||
},
|
||||
loaderOptions: {
|
||||
prettierConfig: { printWidth: 80, singleQuote: false },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
## Loader Options
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "5.3.0-rc.0",
|
||||
"version": "5.3.0-rc.12",
|
||||
"description": "Stories addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,11 +28,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.0-rc.0",
|
||||
"@storybook/components": "5.3.0-rc.0",
|
||||
"@storybook/router": "5.3.0-rc.0",
|
||||
"@storybook/source-loader": "5.3.0-rc.0",
|
||||
"@storybook/theming": "5.3.0-rc.0",
|
||||
"@storybook/addons": "5.3.0-rc.12",
|
||||
"@storybook/components": "5.3.0-rc.12",
|
||||
"@storybook/router": "5.3.0-rc.12",
|
||||
"@storybook/source-loader": "5.3.0-rc.12",
|
||||
"@storybook/theming": "5.3.0-rc.12",
|
||||
"core-js": "^3.0.1",
|
||||
"estraverse": "^4.2.0",
|
||||
"loader-utils": "^1.2.3",
|
||||
@ -49,5 +49,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "6ad2664adf18b50ea3ce015cbae2ff3e9a60cc4a"
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -24,8 +24,8 @@ function webpack(webpackConfig = {}, options = {}) {
|
||||
};
|
||||
}
|
||||
|
||||
function addons(entry = []) {
|
||||
function managerEntries(entry = []) {
|
||||
return [...entry, require.resolve('@storybook/addon-storysource/register')];
|
||||
}
|
||||
|
||||
module.exports = { webpack, addons };
|
||||
module.exports = { webpack, managerEntries };
|
||||
|
||||
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