mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-03 05:04:51 +08:00
Merge branch 'next' into pr/joshwooding/18365
This commit is contained in:
Norbert de Langen
commit
482676fd82
@ -265,31 +265,32 @@ jobs:
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: Running local registry
|
||||
command: yarn local-registry --port 6000 --open
|
||||
background: true
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: run e2e tests cra
|
||||
command: yarn test:e2e-framework --pnp cra
|
||||
- run:
|
||||
name: run e2e tests vue
|
||||
command: yarn test:e2e-framework --pnp sfcVue
|
||||
- run:
|
||||
name: prep artifacts
|
||||
when: always
|
||||
command: zip -r /tmp/storybook-e2e-testing-out.zip /tmp/storybook-e2e-testing
|
||||
- store_artifacts:
|
||||
path: /tmp/cypress-record
|
||||
destination: cypress
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook-e2e-testing-out.zip
|
||||
destination: e2e
|
||||
# TODO: we disabled this one because it keeps failing, we should fix it, and enable it again!
|
||||
# - attach_workspace:
|
||||
# at: .
|
||||
# - run:
|
||||
# name: Running local registry
|
||||
# command: yarn local-registry --port 6000 --open
|
||||
# background: true
|
||||
# - run:
|
||||
# name: Wait for registry
|
||||
# command: yarn wait-on http://localhost:6000
|
||||
# - run:
|
||||
# name: run e2e tests cra
|
||||
# command: yarn test:e2e-framework --pnp cra
|
||||
# - run:
|
||||
# name: run e2e tests vue
|
||||
# command: yarn test:e2e-framework --pnp sfcVue
|
||||
# - run:
|
||||
# name: prep artifacts
|
||||
# when: always
|
||||
# command: zip -r /tmp/storybook-e2e-testing-out.zip /tmp/storybook-e2e-testing
|
||||
# - store_artifacts:
|
||||
# path: /tmp/cypress-record
|
||||
# destination: cypress
|
||||
# - store_artifacts:
|
||||
# path: /tmp/storybook-e2e-testing-out.zip
|
||||
# destination: e2e
|
||||
e2e-tests-examples:
|
||||
executor:
|
||||
class: small
|
||||
|
||||
@ -14,6 +14,25 @@
|
||||
},
|
||||
{
|
||||
"pattern": "https://stackblitz.com/*"
|
||||
},
|
||||
{
|
||||
"pattern": "https://*.chromatic.com"
|
||||
},
|
||||
{
|
||||
"pattern": "https://www.chromatic.com/build?*"
|
||||
},
|
||||
{
|
||||
"pattern": "http://*.nodeca.com"
|
||||
},
|
||||
{
|
||||
"pattern": "http://definitelytyped.org/*"
|
||||
},
|
||||
{
|
||||
"pattern": "https://yoursite.com/*"
|
||||
},
|
||||
{
|
||||
"pattern": "https://my-specific-domain.com"
|
||||
}
|
||||
]
|
||||
],
|
||||
"aliveStatusCodes": [429, 200]
|
||||
}
|
||||
31
MIGRATION.md
31
MIGRATION.md
@ -1,6 +1,7 @@
|
||||
<h1>Migration</h1>
|
||||
|
||||
- [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
|
||||
- [Vue 3 upgrade](#vue-3-upgrade)
|
||||
- [React18 new root API](#react18-new-root-api)
|
||||
- [Renamed isToolshown to showToolbar](#renamed-istoolshown-to-showtoolbar)
|
||||
- [Deprecated register.js](#deprecated-registerjs)
|
||||
@ -202,6 +203,10 @@
|
||||
|
||||
## From version 6.4.x to 6.5.0
|
||||
|
||||
### Vue 3 upgrade
|
||||
|
||||
Storybook 6.5 supports Vue 3 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to [follow the steps for opting-in to webpack 5](#webpack-5).
|
||||
|
||||
### React18 new root API
|
||||
|
||||
React 18 introduces a [new root API](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis). Starting in 6.5, Storybook for React will auto-detect your react version and use the new root API automatically if you're on React18.
|
||||
@ -360,6 +365,7 @@ In 6.5, the final titles would be:
|
||||
- `NoTitle.stories.js` => `Custom/NoTitle`
|
||||
- `Title.stories.js` => `Custom/Bar`
|
||||
|
||||
<!-- markdown-link-check-disable -->
|
||||
## From version 6.3.x to 6.4.0
|
||||
|
||||
### Automigrate
|
||||
@ -748,7 +754,29 @@ The `--static-dir` flag has been deprecated and will be removed in Storybook 7.0
|
||||
|
||||
### Webpack 5
|
||||
|
||||
Storybook 6.3 brings opt-in support for building both your project and the manager UI with webpack 5. To do so:
|
||||
Storybook 6.3 brings opt-in support for building both your project and the manager UI with webpack 5. To do so, there are two ways:
|
||||
|
||||
1 - Upgrade command
|
||||
|
||||
If you're upgrading your Storybook version, run this command, which will both upgrade your dependencies but also detect whether you should migrate to webpack5 builders and apply the changes automatically:
|
||||
|
||||
```shell
|
||||
npx sb upgrade
|
||||
```
|
||||
|
||||
2 - Automigrate command
|
||||
|
||||
If you don't want to change your Storybook version but want Storybook to detect whether you should migrate to webpack5 builders and apply the changes automatically:
|
||||
|
||||
```shell
|
||||
npx sb automigrate
|
||||
```
|
||||
|
||||
3 - Manually
|
||||
|
||||
If either methods did not work or you just want to proceed manually, do the following steps:
|
||||
|
||||
Install the dependencies:
|
||||
|
||||
```shell
|
||||
yarn add @storybook/builder-webpack5 @storybook/manager-webpack5 --dev
|
||||
@ -2881,3 +2909,4 @@ If you **are** using these addons, it takes two steps to migrate:
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { linkTo } from '@storybook/addon-links';
|
||||
```
|
||||
<!-- markdown-link-check-enable -->
|
||||
30
README.md
30
README.md
@ -51,8 +51,8 @@ It allows you to browse a component library, view the different states of each c
|
||||
|
||||
<p align="center">
|
||||
View README for:<br/>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/main/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest.svg" /></a>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next.svg" /></a>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/main/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest?style=for-the-badge&logo=storybook&logoColor=ffffff&color=ff4785" /></a>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next?style=for-the-badge&logo=storybook&logoColor=ffffff&color=purple" /></a>
|
||||
</p>
|
||||
|
||||
## Table of contents
|
||||
@ -92,19 +92,19 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
|
||||
|
||||
### Supported Frameworks
|
||||
|
||||
| Framework | Demo | |
|
||||
| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [v6.4.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](app/react) |
|
||||
| [Vue](app/vue) | [v6.4.x](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [v6.4.x](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Web components](app/web-components) | [v6.4.x](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [](app/web-components) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | - | [](https://github.com/storybookjs/react-native) |
|
||||
| [HTML](app/html) | [v6.4.x](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Ember](app/ember) | [v6.4.x](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Svelte](app/svelte) | [v6.4.x](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Preact](app/preact) | [v6.4.x](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [Marionette.js](https://github.com/storybookjs/marionette) | - | [](https://github.com/storybookjs/marionette) |
|
||||
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [v6.4.x](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [](https://github.com/storybookjs/native) |
|
||||
| Framework | Demo | |
|
||||
| -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](app/react) |
|
||||
| [Vue](app/vue) | [](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Web components](app/web-components) | [](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [](app/web-components) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | - | [](https://github.com/storybookjs/react-native) |
|
||||
| [HTML](app/html) | [](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Ember](app/ember) | [](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Svelte](app/svelte) | [](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Preact](app/preact) | [](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [Marionette.js](https://github.com/storybookjs/marionette) | - | [](https://github.com/storybookjs/marionette) |
|
||||
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [](https://github.com/storybookjs/native) |
|
||||
|
||||
### Sub Projects
|
||||
|
||||
|
||||
@ -81,12 +81,11 @@ there gathering upvotes and "me too" comments. We need a way to make sure that
|
||||
these bugs get addressed.
|
||||
|
||||
For every non-PATCH release, we nominate a small number of bugs that must be
|
||||
addressed before a release can go out by adding them to the milestone. For example, here's a list of blocking bugs [for the 3.2 milestone](https://github.com/storybookjs/storybook/milestone/3).
|
||||
addressed before a release can go out by adding them to the milestone. For example, here's a list of blocking bugs [for the 6.5 milestone](https://github.com/storybookjs/storybook/milestone/75).
|
||||
|
||||
Adding bugs to the milestone helps people looking for good ways to contribute,
|
||||
or to understand what is blocking the release so they can actually do something
|
||||
about it. Discussion about which bugs are critical happens in the `#maintenance`
|
||||
channel [in our Slack](https://now-examples-slackin-rrirkqohko.now.sh/) [](https://now-examples-slackin-rrirkqohko.now.sh/)
|
||||
about it. Discussion about which bugs are critical happens in the [`#maintenance` channel](https://discord.com/channels/486522875931656193/490070912448724992) in our Discord Server
|
||||
|
||||
If you're experiencing a bug, the best way to make sure that it gets attention
|
||||
is to upvote it by adding a "thumbs-up" reaction in Github. This way important
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
|
||||
## Supported Versions
|
||||
|
||||
| Version | Supported |
|
||||
| ---------- | ------------------ |
|
||||
| 6.3, 6.4 | :white_check_mark: |
|
||||
| Version | Supported |
|
||||
| --------------- | ------------------ |
|
||||
| 6.3, 6.4, 6.5 | :white_check_mark: |
|
||||
|
||||
## Reporting a Vulnerability
|
||||
|
||||
|
||||
@ -30,7 +30,7 @@ describe('Vision Simulator', () => {
|
||||
await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
|
||||
});
|
||||
|
||||
it('should display tooltip on click', async () => {
|
||||
it.skip('should display tooltip on click', async () => {
|
||||
// given
|
||||
render(<ThemedVisionSimulator />);
|
||||
await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
|
||||
@ -45,7 +45,7 @@ describe('Vision Simulator', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('should set filter', async () => {
|
||||
it.skip('should set filter', async () => {
|
||||
// given
|
||||
render(<ThemedVisionSimulator />);
|
||||
await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
"@storybook/core-events": "6.5.0-rc.1",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/docs-tools": "6.5.0-rc.1",
|
||||
"@storybook/mdx1-csf": "canary",
|
||||
"@storybook/mdx1-csf": "^0.0.1",
|
||||
"@storybook/node-logger": "6.5.0-rc.1",
|
||||
"@storybook/postinstall": "6.5.0-rc.1",
|
||||
"@storybook/preview-web": "6.5.0-rc.1",
|
||||
@ -86,11 +86,11 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/mdx2-csf": "canary",
|
||||
"@storybook/mdx2-csf": "^0.0.3",
|
||||
"@types/util-deprecate": "^1.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/mdx2-csf": "*",
|
||||
"@storybook/mdx2-csf": "^0.0.3",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
|
||||
@ -19,6 +19,7 @@ export async function babel(config: TransformOptions, options: Options) {
|
||||
return {
|
||||
...config,
|
||||
overrides: [
|
||||
...(config?.overrides || []),
|
||||
{
|
||||
test: reactDocgen === 'react-docgen' ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
|
||||
plugins: [
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
export { render, renderToDOM } from './render';
|
||||
export { decorateStory } from './decorateStory';
|
||||
export { decorateStory as applyDecorators } from './decorateStory';
|
||||
|
||||
export const parameters = { framework: 'vue' };
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
export { render, renderToDOM } from './render';
|
||||
export { decorateStory } from './decorateStory';
|
||||
export { decorateStory as applyDecorators } from './decorateStory';
|
||||
|
||||
export const parameters = { framework: 'vue3' };
|
||||
|
||||
@ -50,13 +50,22 @@ Once you've gone through the prompts, your `package.json` should look like:
|
||||
|
||||
### Build system
|
||||
|
||||
We'll need to add the necessary dependencies and make some adjustments. Run the following commands:
|
||||
We'll need to add the necessary dependencies and make some adjustments. Run the following command to install the required dependencies:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-write-addon-install-dependencies.yarn.js.mdx',
|
||||
'common/storybook-write-addon-install-dependencies.npm.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Initialize a local Storybook instance to allow you to test your addon.
|
||||
|
||||
```shell
|
||||
# Installs React and Babel CLI
|
||||
yarn add react react-dom @babel/cli
|
||||
|
||||
# Adds Storybook:
|
||||
npx sb init
|
||||
```
|
||||
|
||||
@ -246,4 +255,4 @@ To dive deeper, we recommend Storybook's [creating an addon](https://storybook.j
|
||||
|
||||
### Addon kit
|
||||
|
||||
To help you jumpstart the addon development, the Storybook maintainers created an [`addon-kit`](https://github.com/storybookjs/addon-kit), use it to bootstrap your next addon.
|
||||
To help you jumpstart the addon development, the Storybook maintainers created an [`addon-kit`](https://github.com/storybookjs/addon-kit), use it to bootstrap your next addon.
|
||||
|
||||
@ -5,7 +5,9 @@ title: 'CLI options'
|
||||
Storybook comes with two CLI utilities: `start-storybook` and `build-storybook`.
|
||||
|
||||
<div class="aside">
|
||||
|
||||
Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.md#how-to-opt-out) if you'd not like to share any information.
|
||||
|
||||
</div>
|
||||
|
||||
Pass these commands the following options to alter Storybook's behavior.
|
||||
|
||||
@ -40,16 +40,34 @@ You can import `.json` files and have them expanded to a JavaScript object:
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
If you want to know the exact details of the Webpack config, the best way is to run either of the following:
|
||||
If you want to know the exact details of the Webpack config, the best way is to run either of the following commands:
|
||||
|
||||
```shell
|
||||
For development mode:
|
||||
|
||||
## Development mode
|
||||
yarn start-storybook --debug-webpack
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
## Production mode
|
||||
yarn build-storybook --debug-webpack
|
||||
```
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-debug-webpack-dev.yarn.js.mdx',
|
||||
'common/storybook-debug-webpack-dev.npm.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
For production mode:
|
||||
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-debug-webpack-prod.yarn.js.mdx',
|
||||
'common/storybook-debug-webpack-prod.npm.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Code splitting
|
||||
|
||||
@ -193,11 +211,11 @@ When working with TypeScript projects, the default Webpack configuration may fai
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<div class="aside">
|
||||
💡 Learn more about Storybook's <a href="./typescript">built-in TypeScript support</a> or see <a href="https://github.com/storybookjs/storybook/issues/14087">this issue</a> for more information.
|
||||
💡 Learn more about Storybook's <a href="../configure/typescript">built-in TypeScript support</a> or see <a href="https://github.com/storybookjs/storybook/issues/14087">this issue</a> for more information.
|
||||
</div>
|
||||
|
||||
#### Learn more about builders
|
||||
|
||||
- [Vite builder](./vite.md) for bundling with Vite
|
||||
- [Webpack builder](./webpack.md) for bundling with Webpack
|
||||
- [Builder API](./builder-api.md) for building a Storybook builder
|
||||
- Webpack builder for bundling with Webpack
|
||||
- [Builder API](./builder-api.md) for building a Storybook builder
|
||||
|
||||
@ -42,7 +42,11 @@ Additionally, if you need Storybook specific styles that are separate from your
|
||||
```
|
||||
|
||||
### Nx with Angular 13
|
||||
If you're working with Storybook and [NX libraries](https://nx.dev/structure/library-types), you can extend your project's configuration (i.e., `project.json`) and provide the application's styles. For example:
|
||||
|
||||
If you're working with Storybook and [Nx libraries](https://nx.dev/structure/library-types),
|
||||
you can extend your project's configuration (i.e., `project.json`) and provide the application's styles.
|
||||
|
||||
For earlier Nx versions (prior to `14.1.8`), your configuration would look like this:
|
||||
|
||||
```json
|
||||
"build-storybook": {
|
||||
@ -56,11 +60,35 @@ If you're working with Storybook and [NX libraries](https://nx.dev/structure/lib
|
||||
},
|
||||
"projectBuildConfig": "example-lib:build-storybook",
|
||||
"styles": ["apps/example-app/src/styles.scss"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Starting with version `14.1.8`, Nx uses the Storybook builder directly, which means any configuration supplied to the builder also applies to the NX setup. If you're working with a library, you'll need to configure the styling options ( e.g., preprocessors) inside the `build-storybook` `options` configuration object. For example:
|
||||
|
||||
```json
|
||||
"storybook": {
|
||||
"executor": "@storybook/angular:start-storybook",
|
||||
"options": {
|
||||
"configDir": "apps/example-lib/.storybook",
|
||||
"browserTarget": "example-lib:build-storybook",
|
||||
},
|
||||
},
|
||||
"configurations": {
|
||||
"ci": {
|
||||
"quiet": true
|
||||
"build-storybook": {
|
||||
"executor": "@storybook/angular:build-storybook",
|
||||
"outputs": ["{options.outputPath}"],
|
||||
"options": {
|
||||
"outputDir": "dist/storybook/example-lib",
|
||||
"configDir": "apps/example-lib/.storybook",
|
||||
"browserTarget": "example-lib:build-storybook",
|
||||
"styles": [".storybook/custom-styles.scss"],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
"libs/design-system/src/lib"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
When Nx runs, it will load Storybook's configuration and styling based on the `storybook`'s [`browserTarget`](https://nx.dev/storybook/extra-topics-for-angular-projects#setting-up-browsertarget).
|
||||
|
||||
@ -9,6 +9,12 @@ If you supply an environment variable prefixed with `STORYBOOK_`, it will be ava
|
||||
STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook
|
||||
```
|
||||
|
||||
<div class="aside">
|
||||
|
||||
💡 Do not store any secrets (e.g., private API keys) or other types of sensitive information in your Storybook. Environment variables are embedded into the build, meaning anyone can view them by inspecting your files.
|
||||
|
||||
</div>
|
||||
|
||||
Then we can access these environment variables anywhere inside our preview JavaScript code like below:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -178,7 +178,7 @@ You can also use Storybook's API to configure your project with TypeScript. Unde
|
||||
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `stories` | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.ts` |
|
||||
| `staticDirs` | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook <br/> `staticDirs:['../public']` |
|
||||
| `addons` | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook <br/> `addons:['@storybook/addon-essentials']` |
|
||||
| `addons` | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook <br/> `addons:['@storybook/addon-essentials']` |
|
||||
| `typescript` | Configures how Storybook handles [TypeScript files](./typescript.md) <br/> `typescript: { check: false, checkOptions: {} }` |
|
||||
| `framework` | Configures Storybook based on a set of framework-specific settings <br/> `framework:'@storybook/svelte'` |
|
||||
| `core` | Configures Storybook's internal features.<br/> `core: { builder: 'webpack5' }` |
|
||||
@ -186,6 +186,7 @@ You can also use Storybook's API to configure your project with TypeScript. Unde
|
||||
| `refs` | Configures [Storybook composition](../sharing/storybook-composition.md) <br/> `refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` |
|
||||
| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging <br/> `logLevel: 'debug'` |
|
||||
| `webpackFinal` | Customize Storybook's [Webpack](./webpack.md) setup <br/> `webpackFinal: async (config:any) => { return config; }` |
|
||||
| `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration). <br/> `env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` |
|
||||
|
||||
## Configure story rendering
|
||||
|
||||
|
||||
@ -6,18 +6,21 @@ Contribute a new feature or bug fix to [Storybook's monorepo](https://github.com
|
||||
|
||||
## Initial setup
|
||||
|
||||
First [fork](https://docs.github.com/en/github/getting-started-with-github/quickstart/fork-a-repo) the Storybook repository then clone and build your fork locally. Run the following commands:
|
||||
Start by [forking](https://docs.github.com/en/github/getting-started-with-github/quickstart/fork-a-repo) the Storybook monorepo and cloning it locally.
|
||||
|
||||
```shell
|
||||
git clone https://github.com/your-username/storybook.git
|
||||
cd storybook
|
||||
yarn
|
||||
yarn bootstrap --core
|
||||
```
|
||||
|
||||
Navigate to the `storybook` directory and install the required dependencies with the following commands:
|
||||
|
||||
```shell
|
||||
yarn && yarn bootstrap --core
|
||||
```
|
||||
|
||||
## Run tests & examples
|
||||
|
||||
Once you've completed the [initial setup](#run-tests-&-examples), you should have a fully functional version of Storybook built on your local machine. Before making any code changes, it's helpful to verify that everything is working as it should. More specifically, the test suite and examples.
|
||||
Once you've completed the [initial setup](#initial-setup), you should have a fully functional version of Storybook built on your local machine. Before making any code changes, it's helpful to verify that everything is working as it should. More specifically, the test suite and examples.
|
||||
|
||||
Run the following command to execute the tests:
|
||||
|
||||
@ -28,8 +31,7 @@ yarn test
|
||||
Once the tests finish, check if the examples are working with the following commands:
|
||||
|
||||
```shell
|
||||
cd examples/cra-ts-essentials
|
||||
yarn storybook
|
||||
cd examples/cra-ts-essentials && yarn storybook
|
||||
```
|
||||
|
||||
<div class="aside">
|
||||
@ -106,7 +108,7 @@ Storybook's monorepo is set up to rely on end-to-end testing with [Cypress](http
|
||||
|
||||
Before submitting your contribution, run the test suite one last time with:
|
||||
|
||||
```sh
|
||||
```shell
|
||||
yarn test
|
||||
```
|
||||
|
||||
@ -133,7 +135,7 @@ We encourage bug reports to include reproductions. In the same way that it's pos
|
||||
|
||||
To do so, run the following command in the root of the monorepo:
|
||||
|
||||
```sh
|
||||
```shell
|
||||
npx sb@next link https://github.com/your-username/your-project.git
|
||||
```
|
||||
|
||||
@ -141,7 +143,7 @@ This command creates a project `../storybook-repros/your-project`, and automatic
|
||||
|
||||
If you already have a reproduction on your local machine, you can similarly link it to your monorepo dev setup with the `--local` flag:
|
||||
|
||||
```sh
|
||||
```shell
|
||||
npx sb@next link --local /path/to/local-repro-directory
|
||||
```
|
||||
|
||||
|
||||
@ -89,11 +89,15 @@ Go through the rest of the documentation and repeat the process.
|
||||
|
||||
Before submitting your contribution, we advise you to check your work against the Storybook website. Doing this prevents last-minute issues with the documentation and is also an excellent way for the maintainers to merge faster once you submit the pull request. However, failing to do so will lead one of the maintainers to notify you that your contribution has an issue.
|
||||
|
||||
Start by forking [frontpage repo](https://github.com/storybookjs/frontpage). Then, clone and install the dependencies with the following commands:
|
||||
Start by forking [frontpage repo](https://github.com/storybookjs/frontpage) and cloning it locally.
|
||||
|
||||
```shell
|
||||
git clone https://github.com/your-username/frontpage.git
|
||||
cd frontpage
|
||||
```
|
||||
|
||||
Navigate to the `frontpage` directory and install the required dependencies with the following command:
|
||||
|
||||
```shell
|
||||
yarn
|
||||
```
|
||||
|
||||
|
||||
@ -18,13 +18,16 @@ The interactions are written using a Storybook-instrumented version of [Testing
|
||||
|
||||
Since Interactions is still experimental, it doesn't yet ship with Storybook by default. As such, you'll have to install it. You may also want to add our wrappers for Testing Library and Jest.
|
||||
|
||||
```shell
|
||||
# With npm
|
||||
npm install @storybook/addon-interactions @storybook/jest @storybook/testing-library --save-dev
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
# With yarn
|
||||
yarn add --dev @storybook/addon-interactions @storybook/jest @storybook/testing-library
|
||||
```
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-addon-interactions-addon-full-install.yarn.js.mdx',
|
||||
'common/storybook-addon-interactions-addon-full-install.npm.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Next, update [`.storybook/main.js`](../configure/overview.md#configure-story-rendering) to the following:
|
||||
|
||||
|
||||
@ -18,13 +18,16 @@ If you ran `sb init` to include Storybook in your project, the Essentials addon
|
||||
|
||||
If you're upgrading from a previous Storybook version, you'll need to run the following command in your terminal:
|
||||
|
||||
```shell
|
||||
#With npm
|
||||
npm install -D @storybook/addon-essentials
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
#With yarn
|
||||
yarn add -D @storybook/addon-essentials
|
||||
```
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-addon-essentials-install.yarn.js.mdx',
|
||||
'common/storybook-addon-essentials-install.npm.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Update your Storybook configuration (in [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) to include the Essentials addon.
|
||||
|
||||
@ -44,14 +47,16 @@ Essentials is "zero-config”. It comes with a recommended configuration out of
|
||||
|
||||
If you need to reconfigure any of the [individual Essentials addons](https://storybook.js.org/addons/tag/essentials), install them manually by following the installation instructions, register them in your Storybook configuration file (i.e., [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) and adjust the configuration to suit your needs. For example:
|
||||
|
||||
```shell
|
||||
#With npm
|
||||
npm install -D @storybook/addon-actions
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-addon-actions-install.yarn.js.mdx',
|
||||
'common/storybook-addon-actions-install.npm.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
#With yarn
|
||||
yarn add -D @storybook/addon-actions
|
||||
```
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
|
||||
13
docs/faq.md
13
docs/faq.md
@ -472,3 +472,16 @@ export default {
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Why isn't Storybook's test runner working?
|
||||
|
||||
There's an issue with Storybook's test runner and the latest version of Jest (i.e., version 28), which prevents it from running effectively. As a workaround, you can downgrade Jest to the previous stable version (i.e., version 27), and you'll be able to run it. See the following [issue](https://github.com/storybookjs/test-runner/issues/99) for more information.
|
||||
|
||||
|
||||
### How does Storybook handles enviroment variables?
|
||||
|
||||
Storybook has built-in support for [environment variables](./configure/environment-variables.md). By default, environment variables are only available in Node.js code and are not available in the browser as some variables should be kept secret (e.g., API keys) and **not** exposed to anyone visiting the published Storybook.
|
||||
|
||||
To expose a variable, you must preface its name with `STORYBOOK_`. So `STORYBOOK_API_URL` will be available in browser code but `API_KEY` will not. Additionally you can also customize which variables are exposed by setting the [`env`](./configure/environment-variables.md#using-storybook-configuration) field in the `.storybook/main.js` file.
|
||||
|
||||
Variables are set when JavaScript is compiled so when the development server is started or you build your Storybook. Environment variable files should not be committed to Git as they often contain secrets which are not safe to add to Git. Instead, add `.env.*` to your `.gitignore` file and set up the environment variables manually on your hosting provider (e.g., [GitHub](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository)).
|
||||
@ -90,7 +90,9 @@ Below are some of the most common installation issues and instructions on how to
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<div class="aside">
|
||||
|
||||
Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.md#how-to-opt-out) if you'd not like to share any information.
|
||||
|
||||
</div>
|
||||
|
||||
If all else fails, try asking for [help](https://storybook.js.org/support)
|
||||
|
||||
@ -21,7 +21,8 @@ First, we'll need to build Storybook as a static web application. The functional
|
||||
paths={[
|
||||
'angular/custom-build-script-production.script-for-builder.js.mdx',
|
||||
'angular/build-storybook-production-mode.with-builder.js.mdx',
|
||||
'common/build-storybook-production-mode.js.mdx',
|
||||
'common/build-storybook-production-mode.yarn.js.mdx',
|
||||
'common/build-storybook-production-mode.npm.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -49,13 +50,16 @@ To get started, sign up with your GitHub, GitLab, Bitbucket, or email and genera
|
||||
|
||||
Next, install the [Chromatic CLI](https://www.npmjs.com/package/chromatic) package from npm:
|
||||
|
||||
```shell
|
||||
# With npm
|
||||
npm install --save-dev chromatic
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
# With yarn
|
||||
yarn add --dev chromatic
|
||||
```
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/chromatic-install.yarn.js.mdx',
|
||||
'common/chromatic-install.npm.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Run the following command after the package finishes installing. Make sure that you replace `your-project-token` with your own project token.
|
||||
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
```shell
|
||||
# With yarn
|
||||
yarn build-storybook
|
||||
|
||||
# With npm
|
||||
npm run build-storybook
|
||||
```
|
||||
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
npm run build-storybook
|
||||
```
|
||||
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
yarn build-storybook
|
||||
```
|
||||
@ -2,7 +2,7 @@
|
||||
// preview.js
|
||||
|
||||
// All stories expect a theme arg
|
||||
export const argTypes = { theme: { control: { options: ['light', 'dark'] } } };
|
||||
export const argTypes = { theme: { control: 'select', options: ['light', 'dark'] } };
|
||||
|
||||
// The default value of the theme arg to all stories
|
||||
export const args = { theme: 'light' };
|
||||
|
||||
3
docs/snippets/common/chromatic-install.npm.js.mdx
Normal file
3
docs/snippets/common/chromatic-install.npm.js.mdx
Normal file
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
npm install chromatic --save-dev
|
||||
```
|
||||
3
docs/snippets/common/chromatic-install.yarn.js.mdx
Normal file
3
docs/snippets/common/chromatic-install.yarn.js.mdx
Normal file
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
yarn add --dev chromatic
|
||||
```
|
||||
12
docs/snippets/common/mdx-changelog-stories.mdx.mdx
Normal file
12
docs/snippets/common/mdx-changelog-stories.mdx.mdx
Normal file
@ -0,0 +1,12 @@
|
||||
```md
|
||||
|
||||
<!-- Changelog.stories.mdx -->
|
||||
|
||||
import { Meta } from "@storybook/addon-docs";
|
||||
|
||||
import Changelog from "../CHANGELOG.md";
|
||||
|
||||
<Meta title="Changelog" />
|
||||
|
||||
<Changelog />
|
||||
```
|
||||
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
npm install @storybook/addon-actions --save-dev
|
||||
```
|
||||
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
yarn add --dev @storybook/addon-actions
|
||||
```
|
||||
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
npm install @storybook/addon-actions --save-dev
|
||||
```
|
||||
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
yarn add --dev @storybook/addon-essentials
|
||||
```
|
||||
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
npm install @storybook/addon-storyshots --save-dev
|
||||
```
|
||||
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
yarn add --dev @storybook/addon-storyshots
|
||||
```
|
||||
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
npm run storybook -- --debug-webpack
|
||||
```
|
||||
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
yarn storybook --debug-webpack
|
||||
```
|
||||
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
npm run build-storybook -- --debug-webpack
|
||||
```
|
||||
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
yarn build-storybook --debug-webpack
|
||||
```
|
||||
@ -0,0 +1,22 @@
|
||||
```js
|
||||
// .storybook/main.js|ts
|
||||
|
||||
module.exports = {
|
||||
stories: [
|
||||
//👇 Changes the load order of our stories. First loads the Changelog page
|
||||
'../src/Changelog.stories.mdx',
|
||||
'../stories/**/*.stories.mdx',
|
||||
'../stories/**/*.stories.@(js|jsx|ts|tsx)'
|
||||
],
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-essentials',
|
||||
{
|
||||
name: '@storybook/addon-docs',
|
||||
options: {
|
||||
transcludeMarkdown: true, //👈 Set transcludeMarkdown to true
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
@ -2,8 +2,8 @@
|
||||
// .storybook/main.js
|
||||
|
||||
module.exports = {
|
||||
stories: [],
|
||||
addons: [],
|
||||
staticDirs: ['../public'],
|
||||
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
|
||||
staticDirs: ['../public'], //👈 Configures the static asset folder in Storybook
|
||||
};
|
||||
```
|
||||
3
docs/snippets/common/storybook-msw-generate.msw.js.mdx
Normal file
3
docs/snippets/common/storybook-msw-generate.msw.js.mdx
Normal file
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
npx msw init public/
|
||||
```
|
||||
3
docs/snippets/common/storybook-msw-install.npm.js.mdx
Normal file
3
docs/snippets/common/storybook-msw-install.npm.js.mdx
Normal file
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
npm install msw msw-storybook-addon --save-dev
|
||||
```
|
||||
3
docs/snippets/common/storybook-msw-install.yarn.js.mdx
Normal file
3
docs/snippets/common/storybook-msw-install.yarn.js.mdx
Normal file
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
yarn add --dev msw msw-storybook-addon
|
||||
```
|
||||
@ -0,0 +1,25 @@
|
||||
```js
|
||||
// .storybook/preview.js
|
||||
|
||||
import { initialize, mswDecorator } from 'msw-storybook-addon';
|
||||
|
||||
/*
|
||||
* Initializes MSW
|
||||
* See https://github.com/mswjs/msw-storybook-addon#configuring-msw
|
||||
* to learn how to customize it
|
||||
*/
|
||||
initialize();
|
||||
|
||||
export const parameters = {
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Provide the MSW addon decorator globally
|
||||
export const decorators = [mswDecorator];
|
||||
```
|
||||
@ -1,3 +1,3 @@
|
||||
```shell
|
||||
npm install @storybook/test-runner jest --save-dev
|
||||
npm install @storybook/test-runner jest@27 --save-dev
|
||||
```
|
||||
@ -1,3 +1,3 @@
|
||||
```shell
|
||||
yarn add --dev @storybook/test-runner jest
|
||||
yarn add --dev @storybook/test-runner jest@27
|
||||
```
|
||||
@ -13,7 +13,7 @@ module.exports = {
|
||||
// Merge custom configuration into the default config
|
||||
return mergeConfig(config, {
|
||||
// Use the same "resolve" configuration as your app
|
||||
resolve: (await import('../vite.config.js')).default.resolve
|
||||
resolve: (await import('../vite.config.js')).default.resolve,
|
||||
// Add dependencies to pre-optimization
|
||||
optimizeDeps: {
|
||||
include: ['storybook-dark-mode'],
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
npm install react react-dom @babel/cli
|
||||
```
|
||||
@ -0,0 +1,3 @@
|
||||
```shell
|
||||
yarn add react react-dom @babel/cli
|
||||
```
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
@ -211,6 +211,35 @@ Write your documentation as you usually would, and your existing SCSS code block
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Creating a Changelog story
|
||||
|
||||
One common use case for MDX-only docs stories is importing a project's `CHANGELOG.md` into an MDX story, so that users can easily refer to the CHANGELOG via a documentation node in Storybook.
|
||||
|
||||
First, ensure that `transcludeMarkdown` is set to `true` in `main.js`:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-enable-transcludemarkdown.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Then, import the markdown and treat the imported file as a component in the MDX file:
|
||||
|
||||
```mdx
|
||||
import { Meta } from "@storybook/addon-docs";
|
||||
|
||||
import Changelog from "../CHANGELOG.md";
|
||||
|
||||
<Meta title="Changelog" />
|
||||
|
||||
<Changelog />
|
||||
```
|
||||
|
||||
|
||||
## Linking to other stories and pages
|
||||
|
||||
When writing MDX, you may want to provide links to other stories or documentation pages and sections. You can use the `path` query string.
|
||||
@ -276,4 +305,4 @@ Update your Storybook configuration (in `.storybook/main.js|ts`) and add the `pr
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: 'Building pages with Storybook'
|
||||
---
|
||||
|
||||
Storybook helps you build any component, from small “atomic” components to composed pages. But as you move up the component hierarchy toward the level of pages, you end up dealing with more complexity.
|
||||
Storybook helps you build any component, from small “atomic” components to composed pages. But as you move up the component hierarchy toward the page level, you deal with more complexity.
|
||||
|
||||
There are many ways to build pages in Storybook. Here are common patterns and solutions.
|
||||
|
||||
@ -47,7 +47,7 @@ When you are building screens in this way, it is typical that the inputs of a co
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
In such cases it is natural to use [args composition](./args.md#args-composition) to build the stories for the page based on the stories of the sub-components:
|
||||
In such cases, it is natural to use [args composition](./args.md#args-composition) to build the stories for the page based on the stories of the sub-components:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -72,13 +72,57 @@ If you need to render a connected component in Storybook, you can mock the netwo
|
||||
|
||||
### Mocking providers
|
||||
|
||||
If you are using a provider that supplies data via the context, you can wrap your story in a decorator that provides a mocked version of that provider. For example, in the [Screens](https://storybook.js.org/tutorials/intro-to-storybook/react/en/screen/) chapter of the Intro to Storybook tutorial, we mock a Redux provider with mock data.
|
||||
Suppose you are using a provider that supplies data via the context. In that case, you can wrap your story in a decorator that provides a mocked version of that provider. For example, in the [Screens](https://storybook.js.org/tutorials/intro-to-storybook/react/en/screen/) chapter of the Intro to Storybook tutorial, we mock a Redux provider with mock data.
|
||||
|
||||
### Mocking API Services
|
||||
|
||||
Connected applications such as Twitter, Instagram, amongst others, are everywhere, consuming data either from REST or GraphQL endpoints. If you're working in an application that relies on either of these data providers, you can add Mock Service Worker (MSW) via [Storybook's MSW addon](https://storybook.js.org/addons/msw-storybook-addon) to mock data alongside your app and stories.
|
||||
Connected applications such as Twitter, Instagram, amongst others, are everywhere, consuming data from REST or GraphQL endpoints. Suppose you're working in an application that relies on either of these data providers. In that case, you can add Mock Service Worker (MSW) via [Storybook's MSW addon](https://storybook.js.org/addons/msw-storybook-addon) to mock data alongside your app and stories.
|
||||
|
||||
[Mock Service Worker](https://mswjs.io/) is an API mocking library. It relies on service workers to capture network requests and provides mocked data in response. The MSW addon adds this functionality into Storybook, allowing you to mock API requests in your stories.
|
||||
[Mock Service Worker](https://mswjs.io/) is an API mocking library. It relies on service workers to capture network requests and provides mocked data in response. The MSW addon adds this functionality into Storybook, allowing you to mock API requests in your stories. Below is an overview of how to set up and use the addon.
|
||||
|
||||
Run the following commands to install MSW, the addon, and generate a mock service worker.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-msw-install.yarn.js.mdx',
|
||||
'common/storybook-msw-install.npm.js.mdx',
|
||||
'common/storybook-msw-generate.msw.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<div class="aside">
|
||||
|
||||
💡 If you're working with Angular, you'll need to adjust the command to save the mock service worker file in a different directory (e.g., `src`).
|
||||
|
||||
</div>
|
||||
|
||||
Update your `.storybook/preview.js` file and enable the addon via a [global decorator](./decorators.md#global-decorators).
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-preview-register-msw-addon.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Finally, update your [`.storybook/main.js|ts`](../configure/overview.md#using-storybook-api) to allow Storybook to load the generated mock service worker file as follows:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-with-single-static-dir.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
#### Mocking REST requests with MSW addon
|
||||
|
||||
@ -157,7 +201,7 @@ To test your screen with the GraphQL mocked data, you could write the following
|
||||
|
||||
It is also possible to mock imports directly, as you might in a unit test, using Webpack’s aliasing. It's advantageous if your component makes network requests directly with third-party libraries.
|
||||
|
||||
We're going to use [isomorphic-fetch](https://www.npmjs.com/package/isomorphic-fetch) as an example.
|
||||
We'll use [isomorphic-fetch](https://www.npmjs.com/package/isomorphic-fetch) as an example.
|
||||
|
||||
Inside a directory called `__mocks__`, create a new file called
|
||||
`isomorphic-fetch.js` with the following code:
|
||||
@ -223,7 +267,7 @@ Like the [import mocking](##mocking-imports) above, once you have a mock, you’
|
||||
|
||||
It's possible to avoid mocking the dependencies of connected "container" components entirely by passing them around via props or React context. However, it requires a strict split of the container and presentational component logic. For example, if you have a component responsible for data fetching logic and rendering DOM, it will need to be mocked as previously described.
|
||||
|
||||
It’s common to import and embed container components amongst presentational components. However, as we discovered earlier, to render them within Storybook, we’ll likely have to mock their dependencies or the imports themselves.
|
||||
It’s common to import and embed container components amongst presentational components. However, as we discovered earlier, we’ll likely have to mock their dependencies or the imports to render them within Storybook.
|
||||
|
||||
Not only can this quickly grow to become a tedious task, but it’s also challenging to mock container components that use local states. So, instead of importing containers directly, a solution to this problem is to create a React context that provides the container components. It allows you to freely embed container components as usual, at any level in the component hierarchy without worrying about subsequently mocking their dependencies; since we can swap out the containers themselves with their mocked presentational counterpart.
|
||||
|
||||
@ -238,7 +282,7 @@ ProfilePageContext.js
|
||||
|
||||
<div class="aside">
|
||||
|
||||
It’s also often helpful to set up a “global” container context (perhaps named `GlobalContainerContext`) for container components that may be rendered on every page of your app and adding them to the top level of your application. While it’s possible to place every container within this global context, it should only provide globally required containers.
|
||||
It’s also often helpful to set up a “global” container context (perhaps named `GlobalContainerContext`) for container components that may be rendered on every page of your app and add them to the top level of your application. While it’s possible to place every container within this global context, it should only provide globally required containers.
|
||||
|
||||
</div>
|
||||
|
||||
@ -284,7 +328,7 @@ In the context of Storybook, instead of providing container components through c
|
||||
|
||||
<div class="aside">
|
||||
|
||||
If the same context applies to all `ProfilePage` stories, we can also use a [decorator](./decorators.md).
|
||||
If the same context applies to all `ProfilePage` stories, we can use a [decorator](./decorators.md).
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -10,13 +10,16 @@ We recommend installing Storybook's [`addon-interactions`](https://storybook.js.
|
||||
|
||||
Run the following command to install the addon and the required dependencies.
|
||||
|
||||
```shell
|
||||
# With npm
|
||||
npm install @storybook/addon-interactions @storybook/testing-library --save-dev
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
# With yarn
|
||||
yarn add --dev @storybook/addon-interactions @storybook/testing-library
|
||||
```
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-addon-interactions-addon-full-install.yarn.js.mdx',
|
||||
'common/storybook-addon-interactions-addon-full-install.npm.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Update your Storybook configuration (in `.storybook/main.js`) to include the interactions addon.
|
||||
|
||||
|
||||
@ -14,13 +14,16 @@ Storybook is a helpful tool for snapshot testing because every story is essentia
|
||||
|
||||
Run the following command to install Storyshots:
|
||||
|
||||
```shell
|
||||
# With npm
|
||||
npm install @storybook/addon-storyshots --save-dev
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
# With yarn
|
||||
yarn add --dev @storybook/addon-storyshots
|
||||
```
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-addon-storyshots-install.yarn.js.mdx',
|
||||
'common/storybook-addon-storyshots-install.npm.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Add a test file to your environment with the following contents to configure Storyshots:
|
||||
|
||||
|
||||
@ -20,13 +20,18 @@ To get started, sign up with your [GitHub](https://github.com/), [GitLab](https:
|
||||
|
||||
Next, install the [chromatic](https://www.npmjs.com/package/chromatic) CLI package from npm:
|
||||
|
||||
```shell
|
||||
# With npm
|
||||
npm install chromatic --save-dev
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/chromatic-install.yarn.js.mdx',
|
||||
'common/chromatic-install.npm.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
|
||||
# With yarn
|
||||
yarn add --dev chromatic
|
||||
```
|
||||
|
||||
Run the following command after the package finishes installing:
|
||||
|
||||
|
||||
@ -20,20 +20,4 @@ Live examples of these:
|
||||
- [HTML](https://storybookjs.netlify.com/html-kitchen-sink/)
|
||||
- [Svelte](https://storybookjs.netlify.com/svelte-kitchen-sink/)
|
||||
- [Ember](https://storybookjs.netlify.com/ember-cli/)
|
||||
- [Preact](https://storybookjs.netlify.com/preact-kitchen-sink/)
|
||||
|
||||
### 5.0
|
||||
|
||||
- [React Official](https://release-5-0--storybooks-official.netlify.com/)
|
||||
- [Vue](https://release-5-0--storybooks-vue.netlify.com/)
|
||||
- [Angular](https://release-5-0--storybooks-angular.netlify.com/)
|
||||
- [HTML](https://release-5-0--storybooks-html.netlify.com/)
|
||||
- [Svelte](https://release-5-0--storybooks-svelte.netlify.com/)
|
||||
- [Ember](https://release-5-0--storybooks-ember.netlify.com/)
|
||||
- [Preact](https://release-5-0--storybooks-preact.netlify.com/)
|
||||
|
||||
### 3.4
|
||||
|
||||
- [React Official](https://release-3-4--storybooks-official.netlify.com)
|
||||
- [Vue](https://release-3-4--storybooks-vue.netlify.com/)
|
||||
- [Angular](https://release-3-4--storybooks-angular.netlify.com/)
|
||||
- [Preact](https://storybookjs.netlify.com/preact-kitchen-sink/)
|
||||
@ -11,6 +11,10 @@ const config: StorybookConfig = {
|
||||
titlePrefix: 'Demo',
|
||||
files: '*.stories.(js|ts|tsx|mdx)',
|
||||
},
|
||||
{
|
||||
directory: '../src/addon-docs',
|
||||
files: '*.stories.mdx',
|
||||
},
|
||||
],
|
||||
logLevel: 'debug',
|
||||
addons: [
|
||||
|
||||
@ -4040,3 +4040,21 @@ exports[`Storyshots Demo/Examples / Emoji Button With Args 1`] = `
|
||||
With args
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Docs/ButtonMdx Basic 1`] = `
|
||||
<button
|
||||
type="button"
|
||||
>
|
||||
|
||||
Click me
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Docs/ButtonMdx Controls 1`] = `
|
||||
<button
|
||||
type="button"
|
||||
>
|
||||
|
||||
Hello
|
||||
</button>
|
||||
`;
|
||||
|
||||
@ -10,6 +10,7 @@ module.exports = {
|
||||
disableTelemetry: true,
|
||||
},
|
||||
features: {
|
||||
storyStoreV7: !global.navigator?.userAgent?.match?.('jsdom'),
|
||||
buildStoriesJson: true,
|
||||
channelOptions: { allowFunction: false, maxDepth: 10 },
|
||||
},
|
||||
|
||||
@ -13,6 +13,7 @@ module.exports = {
|
||||
disableTelemetry: true,
|
||||
},
|
||||
features: {
|
||||
storyStoreV7: true,
|
||||
buildStoriesJson: true,
|
||||
},
|
||||
};
|
||||
|
||||
@ -20,5 +20,6 @@ module.exports = {
|
||||
staticDirs: ['../public'],
|
||||
features: {
|
||||
buildStoriesJson: true,
|
||||
storyStoreV7: !global.navigator?.userAgent?.match?.('jsdom'),
|
||||
},
|
||||
};
|
||||
|
||||
@ -10,4 +10,5 @@ export const parameters = {
|
||||
docs: {
|
||||
iframeHeight: '60px',
|
||||
},
|
||||
globalParameter: 'globalParameter',
|
||||
};
|
||||
|
||||
@ -30,7 +30,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
@ -8,9 +8,9 @@ exports[`Storyshots Core/Parameters passed to story 1`] = `
|
||||
"docs": {
|
||||
"iframeHeight": "60px"
|
||||
},
|
||||
"framework": "vue",
|
||||
"globalParameter": "globalParameter",
|
||||
"chapterParameter": "chapterParameter",
|
||||
"framework": "vue",
|
||||
"componentParameter": "componentParameter",
|
||||
"storyParameter": "storyParameter",
|
||||
"__isArgsStory": true,
|
||||
"__id": "core-parameters--passed-to-story",
|
||||
|
||||
@ -53,8 +53,8 @@ exports[`Storyshots Custom/Decorator for Vue With Data 1`] = `
|
||||
"docs": {
|
||||
"iframeHeight": "60px"
|
||||
},
|
||||
"framework": "vue",
|
||||
"globalParameter": "globalParameter",
|
||||
"framework": "vue",
|
||||
"__isArgsStory": true,
|
||||
"__id": "custom-decorator-for-vue--with-data",
|
||||
"args": {},
|
||||
|
||||
@ -1,15 +1,10 @@
|
||||
import { addParameters } from '@storybook/vue';
|
||||
|
||||
const globalParameter = 'globalParameter';
|
||||
const chapterParameter = 'chapterParameter';
|
||||
const componentParameter = 'componentParameter';
|
||||
const storyParameter = 'storyParameter';
|
||||
|
||||
addParameters({ globalParameter });
|
||||
|
||||
export default {
|
||||
title: 'Core/Parameters',
|
||||
parameters: {
|
||||
chapterParameter,
|
||||
componentParameter,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -20,8 +20,13 @@ export const entries = async (_: unknown, options: any) => {
|
||||
return result;
|
||||
};
|
||||
|
||||
export const babel = async (config: any, options: any) => {
|
||||
// FIXME: Add this to overrides to only apply to story files
|
||||
config.plugins.push('babel-plugin-named-exports-order');
|
||||
return config;
|
||||
};
|
||||
export const babel = async (config: any, options: any) => ({
|
||||
...config,
|
||||
overrides: [
|
||||
...(config?.overrides || []),
|
||||
{
|
||||
test: /\.(story|stories).*$/,
|
||||
plugins: [require.resolve('babel-plugin-named-exports-order')],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
@ -6,7 +6,7 @@ import { angular12 } from './angular12';
|
||||
// eslint-disable-next-line global-require, jest/no-mocks-import
|
||||
jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra'));
|
||||
|
||||
const checkCra5 = async ({ packageJson, main }) => {
|
||||
const checkAngular12 = async ({ packageJson, main }) => {
|
||||
// eslint-disable-next-line global-require
|
||||
require('fs-extra').__setMockFiles({
|
||||
[path.join('.storybook', 'main.js')]: `module.exports = ${JSON.stringify(main)};`,
|
||||
@ -25,7 +25,7 @@ describe('angular12 fix', () => {
|
||||
};
|
||||
it('should fail', async () => {
|
||||
await expect(
|
||||
checkCra5({
|
||||
checkAngular12({
|
||||
packageJson,
|
||||
main: {},
|
||||
})
|
||||
@ -36,7 +36,7 @@ describe('angular12 fix', () => {
|
||||
const packageJson = { dependencies: { '@storybook/react': '^6.2.0' } };
|
||||
it('should no-op', async () => {
|
||||
await expect(
|
||||
checkCra5({
|
||||
checkAngular12({
|
||||
packageJson,
|
||||
main: {},
|
||||
})
|
||||
@ -52,7 +52,7 @@ describe('angular12 fix', () => {
|
||||
describe('webpack5 builder', () => {
|
||||
it('should no-op', async () => {
|
||||
await expect(
|
||||
checkCra5({
|
||||
checkAngular12({
|
||||
packageJson,
|
||||
main: { core: { builder: 'webpack5' } },
|
||||
})
|
||||
@ -62,7 +62,7 @@ describe('angular12 fix', () => {
|
||||
describe('custom builder', () => {
|
||||
it('should no-op', async () => {
|
||||
await expect(
|
||||
checkCra5({
|
||||
checkAngular12({
|
||||
packageJson,
|
||||
main: { core: { builder: 'storybook-builder-vite' } },
|
||||
})
|
||||
@ -72,7 +72,7 @@ describe('angular12 fix', () => {
|
||||
describe('webpack4 builder', () => {
|
||||
it('should add webpack5 builder', async () => {
|
||||
await expect(
|
||||
checkCra5({
|
||||
checkAngular12({
|
||||
packageJson,
|
||||
main: { core: { builder: 'webpack4' } },
|
||||
})
|
||||
@ -85,7 +85,7 @@ describe('angular12 fix', () => {
|
||||
describe('no builder', () => {
|
||||
it('should add webpack5 builder', async () => {
|
||||
await expect(
|
||||
checkCra5({
|
||||
checkAngular12({
|
||||
packageJson,
|
||||
main: {},
|
||||
})
|
||||
@ -99,7 +99,7 @@ describe('angular12 fix', () => {
|
||||
describe('no angular dependency', () => {
|
||||
it('should no-op', async () => {
|
||||
await expect(
|
||||
checkCra5({
|
||||
checkAngular12({
|
||||
packageJson: {},
|
||||
main: {},
|
||||
})
|
||||
@ -109,7 +109,7 @@ describe('angular12 fix', () => {
|
||||
describe('angular11 dependency', () => {
|
||||
it('should no-op', async () => {
|
||||
await expect(
|
||||
checkCra5({
|
||||
checkAngular12({
|
||||
packageJson: {
|
||||
dependencies: {
|
||||
'@angular/core': '11',
|
||||
@ -128,7 +128,7 @@ describe('angular12 fix', () => {
|
||||
};
|
||||
it('should no-op', async () => {
|
||||
await expect(
|
||||
checkCra5({
|
||||
checkAngular12({
|
||||
packageJson,
|
||||
main: {},
|
||||
})
|
||||
|
||||
@ -1,10 +1,19 @@
|
||||
import { cra5 } from './cra5';
|
||||
import { webpack5 } from './webpack5';
|
||||
import { angular12 } from './angular12';
|
||||
import { vue3 } from './vue3';
|
||||
import { mainjsFramework } from './mainjsFramework';
|
||||
import { eslintPlugin } from './eslint-plugin';
|
||||
import { builderVite } from './builder-vite';
|
||||
import { Fix } from '../types';
|
||||
|
||||
export * from '../types';
|
||||
export const fixes: Fix[] = [cra5, webpack5, angular12, mainjsFramework, eslintPlugin, builderVite];
|
||||
export const fixes: Fix[] = [
|
||||
cra5,
|
||||
webpack5,
|
||||
angular12,
|
||||
vue3,
|
||||
mainjsFramework,
|
||||
eslintPlugin,
|
||||
builderVite,
|
||||
];
|
||||
|
||||
139
lib/cli/src/automigrate/fixes/vue3.test.ts
Normal file
139
lib/cli/src/automigrate/fixes/vue3.test.ts
Normal file
@ -0,0 +1,139 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import path from 'path';
|
||||
import { JsPackageManager } from '../../js-package-manager';
|
||||
import { vue3 } from './vue3';
|
||||
|
||||
// eslint-disable-next-line global-require, jest/no-mocks-import
|
||||
jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra'));
|
||||
|
||||
const checkVue3 = async ({ packageJson, main }) => {
|
||||
// eslint-disable-next-line global-require
|
||||
require('fs-extra').__setMockFiles({
|
||||
[path.join('.storybook', 'main.js')]: `module.exports = ${JSON.stringify(main)};`,
|
||||
});
|
||||
const packageManager = {
|
||||
retrievePackageJson: () => ({ dependencies: {}, devDependencies: {}, ...packageJson }),
|
||||
} as JsPackageManager;
|
||||
return vue3.check({ packageManager });
|
||||
};
|
||||
|
||||
describe('vue3 fix', () => {
|
||||
describe('sb < 6.3', () => {
|
||||
describe('vue3 dependency', () => {
|
||||
const packageJson = {
|
||||
dependencies: { '@storybook/vue': '^6.2.0', vue: '^3.0.0' },
|
||||
};
|
||||
it('should fail', async () => {
|
||||
await expect(
|
||||
checkVue3({
|
||||
packageJson,
|
||||
main: {},
|
||||
})
|
||||
).rejects.toThrow();
|
||||
});
|
||||
});
|
||||
describe('no vue dependency', () => {
|
||||
const packageJson = { dependencies: { '@storybook/vue': '^6.2.0' } };
|
||||
it('should no-op', async () => {
|
||||
await expect(
|
||||
checkVue3({
|
||||
packageJson,
|
||||
main: {},
|
||||
})
|
||||
).resolves.toBeFalsy();
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('sb 6.3 - 7.0', () => {
|
||||
describe('vue3 dependency', () => {
|
||||
const packageJson = {
|
||||
dependencies: { '@storybook/vue': '^6.3.0', vue: '^3.0.0' },
|
||||
};
|
||||
describe('webpack5 builder', () => {
|
||||
it('should no-op', async () => {
|
||||
await expect(
|
||||
checkVue3({
|
||||
packageJson,
|
||||
main: { core: { builder: 'webpack5' } },
|
||||
})
|
||||
).resolves.toBeFalsy();
|
||||
});
|
||||
});
|
||||
describe('custom builder', () => {
|
||||
it('should no-op', async () => {
|
||||
await expect(
|
||||
checkVue3({
|
||||
packageJson,
|
||||
main: { core: { builder: 'storybook-builder-vite' } },
|
||||
})
|
||||
).resolves.toBeFalsy();
|
||||
});
|
||||
});
|
||||
describe('webpack4 builder', () => {
|
||||
it('should add webpack5 builder', async () => {
|
||||
await expect(
|
||||
checkVue3({
|
||||
packageJson,
|
||||
main: { core: { builder: 'webpack4' } },
|
||||
})
|
||||
).resolves.toMatchObject({
|
||||
vueVersion: '^3.0.0',
|
||||
storybookVersion: '^6.3.0',
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('no builder', () => {
|
||||
it('should add webpack5 builder', async () => {
|
||||
await expect(
|
||||
checkVue3({
|
||||
packageJson,
|
||||
main: {},
|
||||
})
|
||||
).resolves.toMatchObject({
|
||||
vueVersion: '^3.0.0',
|
||||
storybookVersion: '^6.3.0',
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('no vue dependency', () => {
|
||||
it('should no-op', async () => {
|
||||
await expect(
|
||||
checkVue3({
|
||||
packageJson: {},
|
||||
main: {},
|
||||
})
|
||||
).resolves.toBeFalsy();
|
||||
});
|
||||
});
|
||||
describe('vue2 dependency', () => {
|
||||
it('should no-op', async () => {
|
||||
await expect(
|
||||
checkVue3({
|
||||
packageJson: {
|
||||
dependencies: {
|
||||
vue: '2',
|
||||
},
|
||||
},
|
||||
main: {},
|
||||
})
|
||||
).resolves.toBeFalsy();
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('sb 7.0+', () => {
|
||||
describe('vue3 dependency', () => {
|
||||
const packageJson = {
|
||||
dependencies: { '@storybook/vue': '^7.0.0-alpha.0', vue: '^3.0.0' },
|
||||
};
|
||||
it('should no-op', async () => {
|
||||
await expect(
|
||||
checkVue3({
|
||||
packageJson,
|
||||
main: {},
|
||||
})
|
||||
).resolves.toBeFalsy();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
60
lib/cli/src/automigrate/fixes/vue3.ts
Normal file
60
lib/cli/src/automigrate/fixes/vue3.ts
Normal file
@ -0,0 +1,60 @@
|
||||
import chalk from 'chalk';
|
||||
import dedent from 'ts-dedent';
|
||||
import semver from '@storybook/semver';
|
||||
import { ConfigFile } from '@storybook/csf-tools';
|
||||
import { Fix } from '../types';
|
||||
import { webpack5 } from './webpack5';
|
||||
|
||||
interface Vue3RunOptions {
|
||||
vueVersion: string;
|
||||
storybookVersion: string;
|
||||
main: ConfigFile;
|
||||
}
|
||||
|
||||
/**
|
||||
* Is the user upgrading to Vue3?
|
||||
*
|
||||
* If so:
|
||||
* - Run webpack5 fix
|
||||
*/
|
||||
export const vue3: Fix<Vue3RunOptions> = {
|
||||
id: 'vue3',
|
||||
|
||||
async check({ packageManager }) {
|
||||
const packageJson = packageManager.retrievePackageJson();
|
||||
const { dependencies, devDependencies } = packageJson;
|
||||
const vueVersion = dependencies.vue || devDependencies.vue;
|
||||
const vueCoerced = semver.coerce(vueVersion)?.version;
|
||||
|
||||
if (!vueCoerced || semver.lt(vueCoerced, '3.0.0')) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const builderInfo = await webpack5.checkWebpack5Builder(packageJson);
|
||||
return builderInfo ? { vueVersion, ...builderInfo } : null;
|
||||
},
|
||||
|
||||
prompt({ vueVersion, storybookVersion }) {
|
||||
const vueFormatted = chalk.cyan(`Vue ${vueVersion}`);
|
||||
const sbFormatted = chalk.cyan(`Storybook ${storybookVersion}`);
|
||||
return dedent`
|
||||
We've detected you are running ${vueFormatted} with Storybook.
|
||||
${sbFormatted} runs webpack4 by default, which is incompatible.
|
||||
|
||||
In order to work with your version of Vue, we need to install Storybook's ${chalk.cyan(
|
||||
'webpack5 builder'
|
||||
)}.
|
||||
|
||||
More info: ${chalk.yellow(
|
||||
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vue3-upgrade'
|
||||
)}
|
||||
`;
|
||||
},
|
||||
|
||||
async run(options) {
|
||||
return webpack5.run({
|
||||
...options,
|
||||
result: { webpackVersion: null, ...options.result },
|
||||
});
|
||||
},
|
||||
};
|
||||
@ -18,39 +18,45 @@ export const automigrate = async ({ fixId, dryRun, yes }: FixOptions = {}) => {
|
||||
const packageManager = JsPackageManagerFactory.getPackageManager();
|
||||
const filtered = fixId ? fixes.filter((f) => f.id === fixId) : fixes;
|
||||
|
||||
logger.info('🔎 checking possible migrations..');
|
||||
|
||||
for (let i = 0; i < filtered.length; i += 1) {
|
||||
const f = fixes[i] as Fix;
|
||||
logger.info(`🔎 checking '${chalk.cyan(f.id)}'`);
|
||||
const result = await f.check({ packageManager });
|
||||
if (result) {
|
||||
logger.info(`🔎 found a '${chalk.cyan(f.id)}' migration:`);
|
||||
logger.info();
|
||||
const message = f.prompt(result);
|
||||
|
||||
logger.info(
|
||||
boxen(message, { borderStyle: 'round', padding: 1, borderColor: '#F1618C' } as any)
|
||||
);
|
||||
|
||||
const runAnswer =
|
||||
yes || dryRun
|
||||
? { fix: false }
|
||||
: await prompts([
|
||||
{
|
||||
type: 'confirm',
|
||||
name: 'fix',
|
||||
message: `Do you want to run the '${chalk.cyan(f.id)}' fix on your project?`,
|
||||
},
|
||||
]);
|
||||
let runAnswer: { fix: boolean };
|
||||
|
||||
if (dryRun) {
|
||||
runAnswer = { fix: false };
|
||||
} else if (yes) {
|
||||
runAnswer = { fix: true };
|
||||
} else {
|
||||
runAnswer = await prompts({
|
||||
type: 'confirm',
|
||||
name: 'fix',
|
||||
message: `Do you want to run the '${chalk.cyan(f.id)}' migration on your project?`,
|
||||
});
|
||||
}
|
||||
|
||||
if (runAnswer.fix) {
|
||||
try {
|
||||
await f.run({ result, packageManager, dryRun });
|
||||
logger.info(`✅ fixed ${chalk.cyan(f.id)}`);
|
||||
logger.info(`✅ ran ${chalk.cyan(f.id)} migration`);
|
||||
} catch (error) {
|
||||
logger.info(`❌ error in ${chalk.cyan(f.id)}:`);
|
||||
logger.info(`❌ error when running ${chalk.cyan(f.id)} migration:`);
|
||||
logger.info(error.message);
|
||||
logger.info();
|
||||
}
|
||||
} else {
|
||||
logger.info(`Skipping the ${chalk.cyan(f.id)} fix.`);
|
||||
logger.info(`Skipping the ${chalk.cyan(f.id)} migration.`);
|
||||
logger.info();
|
||||
logger.info(
|
||||
`If you change your mind, run '${chalk.cyan('npx storybook@next automigrate')}'`
|
||||
@ -58,4 +64,8 @@ export const automigrate = async ({ fixId, dryRun, yes }: FixOptions = {}) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
logger.info();
|
||||
logger.info('✅ migration check successfully ran');
|
||||
logger.info();
|
||||
};
|
||||
|
||||
@ -10,7 +10,7 @@ type TsConfig = {
|
||||
|
||||
export function getAngularAppTsConfigPath() {
|
||||
const angularJson = readFileAsJson('angular.json', true);
|
||||
const { defaultProject } = angularJson;
|
||||
const defaultProject = getDefaultProjectName(angularJson);
|
||||
const tsConfigPath = angularJson.projects[defaultProject].architect.build.options.tsConfig;
|
||||
|
||||
if (!tsConfigPath || !fs.existsSync(path.resolve(tsConfigPath))) {
|
||||
@ -50,9 +50,33 @@ export function editStorybookTsConfig(tsconfigPath: string) {
|
||||
writeFileAsJson(tsconfigPath, tsConfigJson);
|
||||
}
|
||||
|
||||
export function isDefaultProjectSet() {
|
||||
const angularJson = readFileAsJson('angular.json', true);
|
||||
return angularJson && !!angularJson.defaultProject;
|
||||
export function getDefaultProjectName(angularJson: any): string | undefined {
|
||||
const { defaultProject, projects } = angularJson;
|
||||
|
||||
if (projects?.storybook) {
|
||||
return 'storybook';
|
||||
}
|
||||
|
||||
if (defaultProject) {
|
||||
return defaultProject;
|
||||
}
|
||||
|
||||
const firstProjectName = projects ? Object.keys(projects)[0] : undefined;
|
||||
if (firstProjectName) {
|
||||
return firstProjectName;
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
|
||||
export function checkForProjects() {
|
||||
const { projects } = readFileAsJson('angular.json', true);
|
||||
|
||||
if (!projects || Object.keys(projects).length === 0) {
|
||||
throw new Error(
|
||||
'Could not find a project in your Angular workspace. \nAdd a project and re-run the installation'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export async function getBaseTsConfigName() {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import path from 'path';
|
||||
import semver from '@storybook/semver';
|
||||
import {
|
||||
isDefaultProjectSet,
|
||||
checkForProjects,
|
||||
editStorybookTsConfig,
|
||||
getAngularAppTsConfigJson,
|
||||
getAngularAppTsConfigPath,
|
||||
@ -28,11 +28,8 @@ function editAngularAppTsConfig() {
|
||||
}
|
||||
|
||||
const generator: Generator = async (packageManager, npmOptions, options) => {
|
||||
if (!isDefaultProjectSet()) {
|
||||
throw new Error(
|
||||
'Could not find a default project in your Angular workspace.\nSet a defaultProject in your angular.json and re-run the installation.'
|
||||
);
|
||||
}
|
||||
checkForProjects();
|
||||
|
||||
const angularVersion = semver.coerce(
|
||||
packageManager.retrievePackageJson().dependencies['@angular/core']
|
||||
)?.version;
|
||||
|
||||
@ -66,21 +66,6 @@ const installStorybook = (
|
||||
commonJs: options.commonJs,
|
||||
};
|
||||
|
||||
const end = () => {
|
||||
if (!options.skipInstall) {
|
||||
packageManager.installDependencies();
|
||||
}
|
||||
|
||||
logger.log('\nTo run your Storybook, type:\n');
|
||||
codeLog([packageManager.getRunStorybookCommand()]);
|
||||
logger.log('\nFor more information visit:', chalk.cyan('https://storybook.js.org'));
|
||||
|
||||
// Add a new line for the clear visibility.
|
||||
logger.log();
|
||||
};
|
||||
|
||||
const REACT_NATIVE_REPO = 'https://github.com/storybookjs/react-native';
|
||||
|
||||
const runGenerator: () => Promise<void> = () => {
|
||||
switch (projectType) {
|
||||
case ProjectType.ALREADY_HAS_STORYBOOK:
|
||||
@ -96,18 +81,17 @@ const installStorybook = (
|
||||
case ProjectType.UPDATE_PACKAGE_ORGANIZATIONS:
|
||||
return updateOrganisationsGenerator(packageManager, options.parser, npmOptions)
|
||||
.then(() => null) // commandLog doesn't like to see output
|
||||
.then(commandLog('Upgrading your project to the new Storybook packages.\n'))
|
||||
.then(end);
|
||||
.then(commandLog('Upgrading your project to the new Storybook packages.\n'));
|
||||
|
||||
case ProjectType.REACT_SCRIPTS:
|
||||
return reactScriptsGenerator(packageManager, npmOptions, generatorOptions)
|
||||
.then(commandLog('Adding Storybook support to your "Create React App" based project'))
|
||||
.then(end);
|
||||
return reactScriptsGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "Create React App" based project')
|
||||
);
|
||||
|
||||
case ProjectType.REACT:
|
||||
return reactGenerator(packageManager, npmOptions, generatorOptions)
|
||||
.then(commandLog('Adding Storybook support to your "React" app\n'))
|
||||
.then(end);
|
||||
return reactGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "React" app\n')
|
||||
);
|
||||
|
||||
case ProjectType.REACT_NATIVE: {
|
||||
return (
|
||||
@ -124,112 +108,103 @@ const installStorybook = (
|
||||
]) as Promise<{ server: boolean }>)
|
||||
)
|
||||
.then(({ server }) => reactNativeGenerator(packageManager, npmOptions, server))
|
||||
.then(commandLog('Adding Storybook support to your "React Native" app\n'))
|
||||
.then(end)
|
||||
.then(() => {
|
||||
logger.log(chalk.red('NOTE: installation is not 100% automated.'));
|
||||
logger.log(`To quickly run Storybook, replace contents of your app entry with:\n`);
|
||||
codeLog(["export {default} from './storybook';"]);
|
||||
logger.log('\n For more in information, see the github readme:\n');
|
||||
logger.log(chalk.cyan(REACT_NATIVE_REPO));
|
||||
logger.log();
|
||||
});
|
||||
.then(commandLog('Adding Storybook support to your "React Native" app\n'));
|
||||
}
|
||||
|
||||
case ProjectType.METEOR:
|
||||
return meteorGenerator(packageManager, npmOptions, generatorOptions)
|
||||
.then(commandLog('Adding Storybook support to your "Meteor" app\n'))
|
||||
.then(end);
|
||||
return meteorGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "Meteor" app\n')
|
||||
);
|
||||
|
||||
case ProjectType.WEBPACK_REACT:
|
||||
return webpackReactGenerator(packageManager, npmOptions, generatorOptions)
|
||||
.then(commandLog('Adding Storybook support to your "Webpack React" app\n'))
|
||||
.then(end);
|
||||
return webpackReactGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "Webpack React" app\n')
|
||||
);
|
||||
|
||||
case ProjectType.REACT_PROJECT:
|
||||
return reactGenerator(packageManager, npmOptions, generatorOptions)
|
||||
.then(commandLog('Adding Storybook support to your "React" library\n'))
|
||||
.then(end);
|
||||
return reactGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "React" library\n')
|
||||
);
|
||||
|
||||
case ProjectType.SFC_VUE:
|
||||
return sfcVueGenerator(packageManager, npmOptions, generatorOptions)
|
||||
.then(commandLog('Adding Storybook support to your "Single File Components Vue" app\n'))
|
||||
.then(end);
|
||||
return sfcVueGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "Single File Components Vue" app\n')
|
||||
);
|
||||
|
||||
case ProjectType.VUE:
|
||||
return vueGenerator(packageManager, npmOptions, generatorOptions)
|
||||
.then(commandLog('Adding Storybook support to your "Vue" app\n'))
|
||||
.then(end);
|
||||
return vueGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "Vue" app\n')
|
||||
);
|
||||
|
||||
case ProjectType.VUE3:
|
||||
return vue3Generator(packageManager, npmOptions, generatorOptions)
|
||||
.then(commandLog('Adding Storybook support to your "Vue 3" app\n'))
|
||||
.then(end);
|
||||
return vue3Generator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "Vue 3" app\n')
|
||||
);
|
||||
|
||||
case ProjectType.ANGULAR:
|
||||
return angularGenerator(packageManager, npmOptions, generatorOptions)
|
||||
.then(commandLog('Adding Storybook support to your "Angular" app\n'))
|
||||
.then(end);
|
||||
return angularGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "Angular" app\n')
|
||||
);
|
||||
|
||||
case ProjectType.EMBER:
|
||||
return emberGenerator(packageManager, npmOptions, generatorOptions)
|
||||
.then(commandLog('Adding Storybook support to your "Ember" app\n'))
|
||||
.then(end);
|
||||
return emberGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "Ember" app\n')
|
||||
);
|
||||
|
||||
case ProjectType.MITHRIL:
|
||||
return mithrilGenerator(packageManager, npmOptions, generatorOptions)
|
||||
.then(commandLog('Adding Storybook support to your "Mithril" app\n'))
|
||||
.then(end);
|
||||
return mithrilGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "Mithril" app\n')
|
||||
);
|
||||
|
||||
case ProjectType.MARIONETTE:
|
||||
return marionetteGenerator(packageManager, npmOptions, generatorOptions)
|
||||
.then(commandLog('Adding Storybook support to your "Marionette.js" app\n'))
|
||||
.then(end);
|
||||
return marionetteGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "Marionette.js" app\n')
|
||||
);
|
||||
|
||||
case ProjectType.MARKO:
|
||||
return markoGenerator(packageManager, npmOptions, generatorOptions)
|
||||
.then(commandLog('Adding Storybook support to your "Marko" app\n'))
|
||||
.then(end);
|
||||
return markoGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "Marko" app\n')
|
||||
);
|
||||
|
||||
case ProjectType.HTML:
|
||||
return htmlGenerator(packageManager, npmOptions, generatorOptions)
|
||||
.then(commandLog('Adding Storybook support to your "HTML" app\n'))
|
||||
.then(end);
|
||||
return htmlGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "HTML" app\n')
|
||||
);
|
||||
|
||||
case ProjectType.WEB_COMPONENTS:
|
||||
return webComponentsGenerator(packageManager, npmOptions, generatorOptions)
|
||||
.then(commandLog('Adding Storybook support to your "web components" app\n'))
|
||||
.then(end);
|
||||
return webComponentsGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "web components" app\n')
|
||||
);
|
||||
|
||||
case ProjectType.RIOT:
|
||||
return riotGenerator(packageManager, npmOptions, generatorOptions)
|
||||
.then(commandLog('Adding Storybook support to your "riot.js" app\n'))
|
||||
.then(end);
|
||||
return riotGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "riot.js" app\n')
|
||||
);
|
||||
|
||||
case ProjectType.PREACT:
|
||||
return preactGenerator(packageManager, npmOptions, generatorOptions)
|
||||
.then(commandLog('Adding Storybook support to your "Preact" app\n'))
|
||||
.then(end);
|
||||
return preactGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "Preact" app\n')
|
||||
);
|
||||
|
||||
case ProjectType.SVELTE:
|
||||
return svelteGenerator(packageManager, npmOptions, generatorOptions)
|
||||
.then(commandLog('Adding Storybook support to your "Svelte" app\n'))
|
||||
.then(end);
|
||||
return svelteGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "Svelte" app\n')
|
||||
);
|
||||
|
||||
case ProjectType.RAX:
|
||||
return raxGenerator(packageManager, npmOptions, generatorOptions)
|
||||
.then(commandLog('Adding Storybook support to your "Rax" app\n'))
|
||||
.then(end);
|
||||
return raxGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "Rax" app\n')
|
||||
);
|
||||
|
||||
case ProjectType.AURELIA:
|
||||
return aureliaGenerator(packageManager, npmOptions, generatorOptions)
|
||||
.then(commandLog('Adding Storybook support to your "Aurelia" app\n'))
|
||||
.then(end);
|
||||
return aureliaGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "Aurelia" app\n')
|
||||
);
|
||||
|
||||
case ProjectType.SERVER:
|
||||
return serverGenerator(packageManager, npmOptions, generatorOptions)
|
||||
.then(commandLog('Adding Storybook support to your "Server" app\n'))
|
||||
.then(end);
|
||||
return serverGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "Server" app\n')
|
||||
);
|
||||
|
||||
case ProjectType.UNSUPPORTED:
|
||||
paddedLog(`We detected a project type that we don't support yet.`);
|
||||
@ -294,7 +269,7 @@ const projectTypeInquirer = async (
|
||||
|
||||
export async function initiate(options: CommandOptions, pkg: Package): Promise<void> {
|
||||
const packageManager = JsPackageManagerFactory.getPackageManager(options.useNpm);
|
||||
const welcomeMessage = 'sb init - the simplest way to add a Storybook to your project.';
|
||||
const welcomeMessage = 'storybook init - the simplest way to add a Storybook to your project.';
|
||||
logger.log(chalk.inverse(`\n ${welcomeMessage} \n`));
|
||||
|
||||
if (!options.disableTelemetry) {
|
||||
@ -337,7 +312,6 @@ export async function initiate(options: CommandOptions, pkg: Package): Promise<v
|
||||
} catch (ex) {
|
||||
done(ex.message);
|
||||
process.exit(1);
|
||||
return;
|
||||
}
|
||||
done();
|
||||
|
||||
@ -346,5 +320,28 @@ export async function initiate(options: CommandOptions, pkg: Package): Promise<v
|
||||
...(isEsm ? { commonJs: true } : undefined),
|
||||
});
|
||||
|
||||
await automigrate();
|
||||
if (!options.skipInstall) {
|
||||
packageManager.installDependencies();
|
||||
}
|
||||
|
||||
await automigrate({ yes: process.env.CI === 'true' });
|
||||
|
||||
logger.log('\nTo run your Storybook, type:\n');
|
||||
codeLog([packageManager.getRunStorybookCommand()]);
|
||||
logger.log('\nFor more information visit:', chalk.cyan('https://storybook.js.org'));
|
||||
|
||||
if (projectType === ProjectType.REACT_NATIVE) {
|
||||
const REACT_NATIVE_REPO = 'https://github.com/storybookjs/react-native';
|
||||
|
||||
logger.log();
|
||||
logger.log(chalk.red('NOTE: installation is not 100% automated.'));
|
||||
logger.log(`To quickly run Storybook, replace contents of your app entry with:\n`);
|
||||
codeLog(["export {default} from './storybook';"]);
|
||||
logger.log('\n For more in information, see the github readme:\n');
|
||||
logger.log(chalk.cyan(REACT_NATIVE_REPO));
|
||||
logger.log();
|
||||
}
|
||||
|
||||
// Add a new line for the clear visibility.
|
||||
logger.log();
|
||||
}
|
||||
|
||||
@ -13,6 +13,11 @@ export interface Parameters {
|
||||
autoDetect?: boolean;
|
||||
/** Dependencies to add before building Storybook */
|
||||
additionalDeps?: string[];
|
||||
/** Files to add before installing Storybook */
|
||||
additionalFiles?: {
|
||||
path: string;
|
||||
contents: string;
|
||||
}[];
|
||||
/** Add typescript dependency and creates a tsconfig.json file */
|
||||
typescript?: boolean;
|
||||
/** Merge configurations to main.js before running the tests */
|
||||
@ -119,7 +124,7 @@ const baseAngular: Parameters = {
|
||||
framework: 'angular',
|
||||
name: 'angular',
|
||||
version: 'latest',
|
||||
generator: `npx -p @angular/cli@{{version}} ng new {{appName}} --routing=true --minimal=true --style=scss --skipInstall=true --strict`,
|
||||
generator: `npx -p @angular/cli@{{version}} ng new {{appName}} --routing=true --minimal=true --style=scss --skip-install=true --strict`,
|
||||
};
|
||||
|
||||
export const angular10: Parameters = {
|
||||
@ -155,7 +160,7 @@ export const angular13: Parameters = {
|
||||
export const angular_modern_inline_rendering: Parameters = {
|
||||
...baseAngular,
|
||||
name: 'angular_modern_inline_rendering',
|
||||
additionalDeps: ['jest', '@storybook/test-runner'],
|
||||
additionalDeps: ['jest@27', '@storybook/test-runner'],
|
||||
mainOverrides: {
|
||||
features: {
|
||||
storyStoreV7: true,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import path from 'path';
|
||||
import { readJSON, writeJSON } from 'fs-extra';
|
||||
import { readJSON, writeJSON, outputFile } from 'fs-extra';
|
||||
import shell, { ExecOptions } from 'shelljs';
|
||||
import chalk from 'chalk';
|
||||
import { cra, cra_typescript } from './configs';
|
||||
@ -22,6 +22,11 @@ export interface Parameters {
|
||||
ensureDir?: boolean;
|
||||
/** Dependencies to add before building Storybook */
|
||||
additionalDeps?: string[];
|
||||
/** Files to add before installing Storybook */
|
||||
additionalFiles?: {
|
||||
path: string;
|
||||
contents: string;
|
||||
}[];
|
||||
/** Add typescript dependency and creates a tsconfig.json file */
|
||||
typescript?: boolean;
|
||||
}
|
||||
@ -136,6 +141,16 @@ const generate = async ({ cwd, name, appName, version, generator }: Options) =>
|
||||
);
|
||||
};
|
||||
|
||||
const addAdditionalFiles = async ({ additionalFiles, cwd }: Options) => {
|
||||
logger.info(`⤵️ Adding required files`);
|
||||
|
||||
await Promise.all(
|
||||
additionalFiles.map(async (file) => {
|
||||
await outputFile(path.resolve(cwd, file.path), file.contents, { encoding: 'UTF-8' });
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const initStorybook = async ({ cwd, autoDetect = true, name, e2e }: Options) => {
|
||||
const type = autoDetect ? '' : `--type ${name}`;
|
||||
const linkable = e2e ? '' : '--linkable';
|
||||
@ -228,6 +243,7 @@ export const createAndInit = async (
|
||||
logger.log();
|
||||
|
||||
await doTask(generate, { ...options, cwd: options.creationPath });
|
||||
await doTask(addAdditionalFiles, { ...options, cwd }, !!options.additionalFiles);
|
||||
if (e2e) {
|
||||
await doTask(addPackageResolutions, options);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { FC } from 'react';
|
||||
import pickBy from 'lodash/pickBy';
|
||||
import { styled, ignoreSsrWarning } from '@storybook/theming';
|
||||
import { styled } from '@storybook/theming';
|
||||
import { opacify, transparentize, darken, lighten } from 'polished';
|
||||
import { includeConditionalArg } from '@storybook/csf';
|
||||
import { once } from '@storybook/client-logger';
|
||||
@ -111,20 +111,20 @@ export const TableWrapper = styled.table<{
|
||||
marginLeft: inAddonPanel ? 0 : 1,
|
||||
marginRight: inAddonPanel ? 0 : 1,
|
||||
|
||||
[`tr:first-child${ignoreSsrWarning}`]: {
|
||||
[`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {
|
||||
[`tr:first-child`]: {
|
||||
[`td:first-child, th:first-child`]: {
|
||||
borderTopLeftRadius: inAddonPanel ? 0 : theme.appBorderRadius,
|
||||
},
|
||||
[`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: {
|
||||
[`td:last-child, th:last-child`]: {
|
||||
borderTopRightRadius: inAddonPanel ? 0 : theme.appBorderRadius,
|
||||
},
|
||||
},
|
||||
|
||||
[`tr:last-child${ignoreSsrWarning}`]: {
|
||||
[`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {
|
||||
[`tr:last-child`]: {
|
||||
[`td:first-child, th:first-child`]: {
|
||||
borderBottomLeftRadius: inAddonPanel ? 0 : theme.appBorderRadius,
|
||||
},
|
||||
[`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: {
|
||||
[`td:last-child, th:last-child`]: {
|
||||
borderBottomRightRadius: inAddonPanel ? 0 : theme.appBorderRadius,
|
||||
},
|
||||
},
|
||||
@ -172,7 +172,7 @@ export const TableWrapper = styled.table<{
|
||||
: lighten(0.05, theme.background.content),
|
||||
}
|
||||
: {
|
||||
[`&:not(:first-child${ignoreSsrWarning})`]: {
|
||||
[`&:not(:first-child)`]: {
|
||||
borderTopWidth: 1,
|
||||
borderTopStyle: 'solid',
|
||||
borderTopColor:
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { ComponentProps, FunctionComponent } from 'react';
|
||||
import { styled, ThemeProvider, convert, themes, ignoreSsrWarning } from '@storybook/theming';
|
||||
import { styled, ThemeProvider, convert, themes } from '@storybook/theming';
|
||||
import { EmptyBlock } from './EmptyBlock';
|
||||
|
||||
import { SyntaxHighlighter } from '../syntaxhighlighter/lazy-syntaxhighlighter';
|
||||
@ -52,7 +52,7 @@ const SourceSkeletonPlaceholder = styled.div<{}>(({ theme }) => ({
|
||||
marginTop: 1,
|
||||
width: '60%',
|
||||
|
||||
[`&:first-child${ignoreSsrWarning}`]: {
|
||||
[`&:first-child`]: {
|
||||
margin: 0,
|
||||
},
|
||||
}));
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import { styled, ignoreSsrWarning } from '@storybook/theming';
|
||||
import { styled } from '@storybook/theming';
|
||||
|
||||
const toNumber = (input: any) => (typeof input === 'number' ? input : Number(input));
|
||||
|
||||
@ -19,7 +19,7 @@ const Container = styled.div<ContainerProps>(
|
||||
marginLeft: col * theme.layoutMargin,
|
||||
verticalAlign: 'inherit',
|
||||
},
|
||||
[`& > *:first-child${ignoreSsrWarning}`]: {
|
||||
[`& > *:first-child`]: {
|
||||
marginLeft: 0,
|
||||
},
|
||||
}
|
||||
@ -27,7 +27,7 @@ const Container = styled.div<ContainerProps>(
|
||||
'& > *': {
|
||||
marginTop: row * theme.layoutMargin,
|
||||
},
|
||||
[`& > *:first-child${ignoreSsrWarning}`]: {
|
||||
[`& > *:first-child`]: {
|
||||
marginTop: 0,
|
||||
},
|
||||
},
|
||||
|
||||
@ -15,9 +15,6 @@ import { Placeholder } from '../placeholder/placeholder';
|
||||
import { FlexBar } from '../bar/bar';
|
||||
import { TabButton } from '../bar/button';
|
||||
|
||||
const ignoreSsrWarning =
|
||||
'/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
|
||||
|
||||
export interface WrapperProps {
|
||||
bordered?: boolean;
|
||||
absolute?: boolean;
|
||||
@ -87,7 +84,7 @@ const Content = styled.div<ContentProps>(
|
||||
bottom: 0 + (bordered ? 1 : 0),
|
||||
top: 40 + (bordered ? 1 : 0),
|
||||
overflow: 'auto',
|
||||
[`& > *:first-child${ignoreSsrWarning}`]: {
|
||||
[`& > *:first-child`]: {
|
||||
position: 'absolute',
|
||||
left: 0 + (bordered ? 1 : 0),
|
||||
right: 0 + (bordered ? 1 : 0),
|
||||
|
||||
@ -6,6 +6,7 @@ import { PackageJson } from '../types';
|
||||
interface StorybookInfo {
|
||||
framework: string;
|
||||
version: string;
|
||||
frameworkPackage: string;
|
||||
configDir?: string;
|
||||
mainConfig?: string;
|
||||
previewConfig?: string;
|
||||
@ -57,7 +58,7 @@ const getFrameworkInfo = (packageJson: PackageJson) => {
|
||||
);
|
||||
}
|
||||
|
||||
return { framework, version };
|
||||
return { framework, version, frameworkPackage: pkg };
|
||||
};
|
||||
|
||||
const validConfigExtensions = ['ts', 'js', 'tsx', 'jsx', 'mjs', 'cjs'];
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
"fs-extra": "^9.0.1",
|
||||
"global": "^4.4.0",
|
||||
"globby": "^11.0.2",
|
||||
"ip": "^1.1.5",
|
||||
"ip": "^2.0.0",
|
||||
"lodash": "^4.17.21",
|
||||
"node-fetch": "^2.6.7",
|
||||
"open": "^8.4.0",
|
||||
|
||||
@ -7,7 +7,7 @@ import dedent from 'ts-dedent';
|
||||
export function openInBrowser(address: string) {
|
||||
getDefaultBrowser(async (err: any, res: any) => {
|
||||
try {
|
||||
if (res.isChrome || res.isChromium) {
|
||||
if (res && (res.isChrome || res.isChromium)) {
|
||||
// We use betterOpn for Chrome because it is better at handling which chrome tab
|
||||
// or window the preview loads in.
|
||||
betterOpn(address);
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
"@babel/traverse": "^7.12.11",
|
||||
"@babel/types": "^7.12.11",
|
||||
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
||||
"@storybook/mdx1-csf": "canary",
|
||||
"@storybook/mdx1-csf": "^0.0.1",
|
||||
"core-js": "^3.8.2",
|
||||
"fs-extra": "^9.0.1",
|
||||
"global": "^4.4.0",
|
||||
@ -56,12 +56,12 @@
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/mdx2-csf": "canary",
|
||||
"@storybook/mdx2-csf": "^0.0.3",
|
||||
"@types/fs-extra": "^9.0.6",
|
||||
"js-yaml": "^3.14.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/mdx2-csf": "*"
|
||||
"@storybook/mdx2-csf": "^0.0.3"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@storybook/mdx2-csf": {
|
||||
|
||||
@ -1,7 +1,18 @@
|
||||
import dedent from 'ts-dedent';
|
||||
import global from 'global';
|
||||
import { SynchronousPromise } from 'synchronous-promise';
|
||||
import Events from '@storybook/core-events';
|
||||
import {
|
||||
CONFIG_ERROR,
|
||||
FORCE_REMOUNT,
|
||||
FORCE_RE_RENDER,
|
||||
GLOBALS_UPDATED,
|
||||
RESET_STORY_ARGS,
|
||||
SET_GLOBALS,
|
||||
STORY_ARGS_UPDATED,
|
||||
STORY_INDEX_INVALIDATED,
|
||||
UPDATE_GLOBALS,
|
||||
UPDATE_STORY_ARGS,
|
||||
} from '@storybook/core-events';
|
||||
import { logger } from '@storybook/client-logger';
|
||||
import { addons, Channel } from '@storybook/addons';
|
||||
import { AnyFramework, StoryId, ProjectAnnotations, Args, Globals } from '@storybook/csf';
|
||||
@ -80,13 +91,13 @@ export class Preview<TFramework extends AnyFramework> {
|
||||
}
|
||||
|
||||
setupListeners() {
|
||||
this.serverChannel?.on(Events.STORY_INDEX_INVALIDATED, this.onStoryIndexChanged.bind(this));
|
||||
this.serverChannel?.on(STORY_INDEX_INVALIDATED, this.onStoryIndexChanged.bind(this));
|
||||
|
||||
this.channel.on(Events.UPDATE_GLOBALS, this.onUpdateGlobals.bind(this));
|
||||
this.channel.on(Events.UPDATE_STORY_ARGS, this.onUpdateArgs.bind(this));
|
||||
this.channel.on(Events.RESET_STORY_ARGS, this.onResetArgs.bind(this));
|
||||
this.channel.on(Events.FORCE_RE_RENDER, this.onForceReRender.bind(this));
|
||||
this.channel.on(Events.FORCE_REMOUNT, this.onForceRemount.bind(this));
|
||||
this.channel.on(UPDATE_GLOBALS, this.onUpdateGlobals.bind(this));
|
||||
this.channel.on(UPDATE_STORY_ARGS, this.onUpdateArgs.bind(this));
|
||||
this.channel.on(RESET_STORY_ARGS, this.onResetArgs.bind(this));
|
||||
this.channel.on(FORCE_RE_RENDER, this.onForceReRender.bind(this));
|
||||
this.channel.on(FORCE_REMOUNT, this.onForceRemount.bind(this));
|
||||
}
|
||||
|
||||
getProjectAnnotationsOrRenderError(
|
||||
@ -144,7 +155,7 @@ export class Preview<TFramework extends AnyFramework> {
|
||||
}
|
||||
|
||||
emitGlobals() {
|
||||
this.channel.emit(Events.SET_GLOBALS, {
|
||||
this.channel.emit(SET_GLOBALS, {
|
||||
globals: this.storyStore.globals.get() || {},
|
||||
globalTypes: this.storyStore.projectAnnotations.globalTypes || {},
|
||||
});
|
||||
@ -227,7 +238,7 @@ export class Preview<TFramework extends AnyFramework> {
|
||||
|
||||
await Promise.all(this.storyRenders.map((r) => r.rerender()));
|
||||
|
||||
this.channel.emit(Events.GLOBALS_UPDATED, {
|
||||
this.channel.emit(GLOBALS_UPDATED, {
|
||||
globals: this.storyStore.globals.get(),
|
||||
initialGlobals: this.storyStore.globals.initialGlobals,
|
||||
});
|
||||
@ -238,7 +249,7 @@ export class Preview<TFramework extends AnyFramework> {
|
||||
|
||||
await Promise.all(this.storyRenders.filter((r) => r.id === storyId).map((r) => r.rerender()));
|
||||
|
||||
this.channel.emit(Events.STORY_ARGS_UPDATED, {
|
||||
this.channel.emit(STORY_ARGS_UPDATED, {
|
||||
storyId,
|
||||
args: this.storyStore.args.get(storyId),
|
||||
});
|
||||
@ -344,6 +355,6 @@ export class Preview<TFramework extends AnyFramework> {
|
||||
this.previewEntryError = err;
|
||||
logger.error(reason);
|
||||
logger.error(err);
|
||||
this.channel.emit(Events.CONFIG_ERROR, err);
|
||||
this.channel.emit(CONFIG_ERROR, err);
|
||||
}
|
||||
}
|
||||
|
||||
@ -76,8 +76,9 @@ describe('PreviewWeb', () => {
|
||||
const preview = new PreviewWeb();
|
||||
|
||||
const docsRoot = window.document.createElement('div');
|
||||
// @ts-ignore
|
||||
preview.view.prepareForDocs.mockReturnValue(docsRoot);
|
||||
(
|
||||
preview.view.prepareForDocs as any as jest.Mock<typeof preview.view.prepareForDocs>
|
||||
).mockReturnValue(docsRoot);
|
||||
componentOneExports.default.parameters.docs.container.mockImplementationOnce(() =>
|
||||
React.createElement('div', {}, 'INSIDE')
|
||||
);
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
import { EventEmitter } from 'events';
|
||||
import Events from '@storybook/core-events';
|
||||
import {
|
||||
DOCS_RENDERED,
|
||||
STORY_ERRORED,
|
||||
STORY_MISSING,
|
||||
STORY_RENDERED,
|
||||
STORY_RENDER_PHASE_CHANGED,
|
||||
STORY_THREW_EXCEPTION,
|
||||
} from '@storybook/core-events';
|
||||
import { StoryIndex } from '@storybook/store';
|
||||
import { RenderPhase } from './PreviewWeb';
|
||||
|
||||
@ -99,15 +106,15 @@ export const waitForEvents = (
|
||||
// the async parts, so we need to listen for the "done" events
|
||||
export const waitForRender = () =>
|
||||
waitForEvents([
|
||||
Events.STORY_RENDERED,
|
||||
Events.DOCS_RENDERED,
|
||||
Events.STORY_THREW_EXCEPTION,
|
||||
Events.STORY_ERRORED,
|
||||
Events.STORY_MISSING,
|
||||
STORY_RENDERED,
|
||||
DOCS_RENDERED,
|
||||
STORY_THREW_EXCEPTION,
|
||||
STORY_ERRORED,
|
||||
STORY_MISSING,
|
||||
]);
|
||||
|
||||
export const waitForRenderPhase = (phase: RenderPhase) =>
|
||||
waitForEvents([Events.STORY_RENDER_PHASE_CHANGED], ({ newPhase }) => newPhase === phase);
|
||||
waitForEvents([STORY_RENDER_PHASE_CHANGED], ({ newPhase }) => newPhase === phase);
|
||||
|
||||
// A little trick to ensure that we always call the real `setTimeout` even when timers are mocked
|
||||
const realSetTimeout = setTimeout;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,24 @@
|
||||
import deprecate from 'util-deprecate';
|
||||
import dedent from 'ts-dedent';
|
||||
import global from 'global';
|
||||
import Events, { IGNORED_EXCEPTION } from '@storybook/core-events';
|
||||
import {
|
||||
CURRENT_STORY_WAS_SET,
|
||||
IGNORED_EXCEPTION,
|
||||
PRELOAD_STORIES,
|
||||
PREVIEW_KEYDOWN,
|
||||
SET_CURRENT_STORY,
|
||||
SET_STORIES,
|
||||
STORY_ARGS_UPDATED,
|
||||
STORY_CHANGED,
|
||||
STORY_ERRORED,
|
||||
STORY_MISSING,
|
||||
STORY_PREPARED,
|
||||
STORY_RENDER_PHASE_CHANGED,
|
||||
STORY_SPECIFIED,
|
||||
STORY_THREW_EXCEPTION,
|
||||
STORY_UNCHANGED,
|
||||
UPDATE_QUERY_PARAMS,
|
||||
} from '@storybook/core-events';
|
||||
import { logger } from '@storybook/client-logger';
|
||||
import { AnyFramework, StoryId, ProjectAnnotations, Args, Globals } from '@storybook/csf';
|
||||
import type {
|
||||
@ -64,9 +81,9 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
|
||||
|
||||
globalWindow.onkeydown = this.onKeydown.bind(this);
|
||||
|
||||
this.channel.on(Events.SET_CURRENT_STORY, this.onSetCurrentStory.bind(this));
|
||||
this.channel.on(Events.UPDATE_QUERY_PARAMS, this.onUpdateQueryParams.bind(this));
|
||||
this.channel.on(Events.PRELOAD_STORIES, this.onPreloadStories.bind(this));
|
||||
this.channel.on(SET_CURRENT_STORY, this.onSetCurrentStory.bind(this));
|
||||
this.channel.on(UPDATE_QUERY_PARAMS, this.onUpdateQueryParams.bind(this));
|
||||
this.channel.on(PRELOAD_STORIES, this.onPreloadStories.bind(this));
|
||||
}
|
||||
|
||||
initializeWithProjectAnnotations(projectAnnotations: WebProjectAnnotations<TFramework>) {
|
||||
@ -87,7 +104,7 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
|
||||
initializeWithStoryIndex(storyIndex: StoryIndex): PromiseLike<void> {
|
||||
return super.initializeWithStoryIndex(storyIndex).then(() => {
|
||||
if (!global.FEATURES?.storyStoreV7) {
|
||||
this.channel.emit(Events.SET_STORIES, this.storyStore.getSetStoriesPayload());
|
||||
this.channel.emit(SET_STORIES, this.storyStore.getSetStoriesPayload());
|
||||
}
|
||||
|
||||
return this.selectSpecifiedStory();
|
||||
@ -130,9 +147,9 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
|
||||
}
|
||||
|
||||
this.urlStore.setSelection({ storyId, viewMode });
|
||||
this.channel.emit(Events.STORY_SPECIFIED, this.urlStore.selection);
|
||||
this.channel.emit(STORY_SPECIFIED, this.urlStore.selection);
|
||||
|
||||
this.channel.emit(Events.CURRENT_STORY_WAS_SET, this.urlStore.selection);
|
||||
this.channel.emit(CURRENT_STORY_WAS_SET, this.urlStore.selection);
|
||||
|
||||
await this.renderSelection({ persistedArgs: args });
|
||||
}
|
||||
@ -161,7 +178,7 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
|
||||
super.onStoriesChanged({ importFn, storyIndex });
|
||||
|
||||
if (!global.FEATURES?.storyStoreV7) {
|
||||
this.channel.emit(Events.SET_STORIES, await this.storyStore.getSetStoriesPayload());
|
||||
this.channel.emit(SET_STORIES, await this.storyStore.getSetStoriesPayload());
|
||||
}
|
||||
|
||||
if (this.urlStore.selection) {
|
||||
@ -176,15 +193,15 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
|
||||
if (!this.currentRender?.disableKeyListeners && !focusInInput(event)) {
|
||||
// We have to pick off the keys of the event that we need on the other side
|
||||
const { altKey, ctrlKey, metaKey, shiftKey, key, code, keyCode } = event;
|
||||
this.channel.emit(Events.PREVIEW_KEYDOWN, {
|
||||
this.channel.emit(PREVIEW_KEYDOWN, {
|
||||
event: { altKey, ctrlKey, metaKey, shiftKey, key, code, keyCode },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onSetCurrentStory(selection: Selection) {
|
||||
this.urlStore.setSelection(selection);
|
||||
this.channel.emit(Events.CURRENT_STORY_WAS_SET, this.urlStore.selection);
|
||||
this.urlStore.setSelection({ viewMode: 'story', ...selection });
|
||||
this.channel.emit(CURRENT_STORY_WAS_SET, this.urlStore.selection);
|
||||
this.renderSelection();
|
||||
}
|
||||
|
||||
@ -290,7 +307,7 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
|
||||
// Don't re-render the story if nothing has changed to justify it
|
||||
if (lastRender && !storyIdChanged && !implementationChanged && !viewModeChanged) {
|
||||
this.currentRender = lastRender;
|
||||
this.channel.emit(Events.STORY_UNCHANGED, storyId);
|
||||
this.channel.emit(STORY_UNCHANGED, storyId);
|
||||
this.view.showMain();
|
||||
return;
|
||||
}
|
||||
@ -301,11 +318,11 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
|
||||
|
||||
// If we are rendering something new (as opposed to re-rendering the same or first story), emit
|
||||
if (lastSelection && (storyIdChanged || viewModeChanged)) {
|
||||
this.channel.emit(Events.STORY_CHANGED, storyId);
|
||||
this.channel.emit(STORY_CHANGED, storyId);
|
||||
}
|
||||
|
||||
if (global.FEATURES?.storyStoreV7) {
|
||||
this.channel.emit(Events.STORY_PREPARED, {
|
||||
this.channel.emit(STORY_PREPARED, {
|
||||
id: storyId,
|
||||
parameters,
|
||||
initialArgs,
|
||||
@ -318,7 +335,7 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
|
||||
// If the implementation changed, or args were persisted, the args may have changed,
|
||||
// and the STORY_PREPARED event above may not be respected.
|
||||
if (implementationChanged || persistedArgs) {
|
||||
this.channel.emit(Events.STORY_ARGS_UPDATED, { storyId, args });
|
||||
this.channel.emit(STORY_ARGS_UPDATED, { storyId, args });
|
||||
}
|
||||
|
||||
if (selection.viewMode === 'docs' || parameters.docsOnly) {
|
||||
@ -411,20 +428,20 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
|
||||
|
||||
renderMissingStory() {
|
||||
this.view.showNoPreview();
|
||||
this.channel.emit(Events.STORY_MISSING);
|
||||
this.channel.emit(STORY_MISSING);
|
||||
}
|
||||
|
||||
renderStoryLoadingException(storySpecifier: StorySpecifier, err: Error) {
|
||||
logger.error(`Unable to load story '${storySpecifier}':`);
|
||||
logger.error(err);
|
||||
this.view.showErrorDisplay(err);
|
||||
this.channel.emit(Events.STORY_MISSING, storySpecifier);
|
||||
this.channel.emit(STORY_MISSING, storySpecifier);
|
||||
}
|
||||
|
||||
// renderException is used if we fail to render the story and it is uncaught by the app layer
|
||||
renderException(storyId: StoryId, err: Error) {
|
||||
this.channel.emit(Events.STORY_THREW_EXCEPTION, err);
|
||||
this.channel.emit(Events.STORY_RENDER_PHASE_CHANGED, { newPhase: 'errored', storyId });
|
||||
this.channel.emit(STORY_THREW_EXCEPTION, err);
|
||||
this.channel.emit(STORY_RENDER_PHASE_CHANGED, { newPhase: 'errored', storyId });
|
||||
|
||||
// Ignored exceptions exist for control flow purposes, and are typically handled elsewhere.
|
||||
if (err !== IGNORED_EXCEPTION) {
|
||||
@ -438,8 +455,8 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
|
||||
// wrong -- for instance returned the wrong thing from a story
|
||||
renderError(storyId: StoryId, { title, description }: { title: string; description: string }) {
|
||||
logger.error(`Error rendering story ${title}: ${description}`);
|
||||
this.channel.emit(Events.STORY_ERRORED, { title, description });
|
||||
this.channel.emit(Events.STORY_RENDER_PHASE_CHANGED, { newPhase: 'errored', storyId });
|
||||
this.channel.emit(STORY_ERRORED, { title, description });
|
||||
this.channel.emit(STORY_RENDER_PHASE_CHANGED, { newPhase: 'errored', storyId });
|
||||
this.view.showErrorDisplay({
|
||||
message: title,
|
||||
stack: description,
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import slash from 'slash';
|
||||
import dedent from 'ts-dedent';
|
||||
import { once } from '@storybook/client-logger';
|
||||
|
||||
// FIXME: types duplicated type from `core-common', to be
|
||||
// removed when we remove v6 back-compat.
|
||||
@ -48,11 +50,24 @@ function pathJoin(paths: string[]): string {
|
||||
return paths.join('/').replace(slashes, '/');
|
||||
}
|
||||
|
||||
export const userOrAutoTitleFromSpecifier = (fileName: string, entry: NormalizedStoriesSpecifier, userTitle?: string) => {
|
||||
export const userOrAutoTitleFromSpecifier = (
|
||||
fileName: string | number,
|
||||
entry: NormalizedStoriesSpecifier,
|
||||
userTitle?: string
|
||||
) => {
|
||||
const { directory, importPathMatcher, titlePrefix = '' } = entry || {};
|
||||
// On Windows, backslashes are used in paths, which can cause problems here
|
||||
// slash makes sure we always handle paths with unix-style forward slash
|
||||
const normalizedFileName = slash(fileName);
|
||||
|
||||
if (typeof fileName === 'number') {
|
||||
once.warn(dedent`
|
||||
CSF Auto-title received a numeric fileName. This typically happens when
|
||||
webpack is mis-configured in production mode. To force webpack to produce
|
||||
filenames, set optimization.moduleIds = "named" in your webpack config.
|
||||
`);
|
||||
}
|
||||
|
||||
const normalizedFileName = slash(String(fileName));
|
||||
|
||||
if (importPathMatcher.exec(normalizedFileName)) {
|
||||
if (!userTitle) {
|
||||
@ -74,11 +89,15 @@ export const userOrAutoTitleFromSpecifier = (fileName: string, entry: Normalized
|
||||
return undefined;
|
||||
};
|
||||
|
||||
export const userOrAutoTitle = (fileName: string, storiesEntries: NormalizedStoriesSpecifier[], userTitle?: string) => {
|
||||
export const userOrAutoTitle = (
|
||||
fileName: string,
|
||||
storiesEntries: NormalizedStoriesSpecifier[],
|
||||
userTitle?: string
|
||||
) => {
|
||||
for (let i = 0; i < storiesEntries.length; i += 1) {
|
||||
const title = userOrAutoTitleFromSpecifier(fileName, storiesEntries[i], userTitle);
|
||||
if (title) return title;
|
||||
}
|
||||
|
||||
return userTitle || undefined;
|
||||
};
|
||||
};
|
||||
|
||||
@ -27,6 +27,8 @@ export const getMonorepoType = (): MonorepoType => {
|
||||
if (monorepoType) {
|
||||
return monorepoType;
|
||||
}
|
||||
|
||||
if (!fs.existsSync(path.join(projectRootPath, 'package.json'))) return undefined;
|
||||
|
||||
const packageJson = fs.readJsonSync(path.join(projectRootPath, 'package.json')) as PackageJson;
|
||||
|
||||
|
||||
@ -187,9 +187,13 @@ export const computeStorybookMetadata = async ({
|
||||
const hasStorybookEslint = !!allDependencies['eslint-plugin-storybook'];
|
||||
|
||||
const storybookInfo = getStorybookInfo(packageJson);
|
||||
|
||||
const storybookVersion =
|
||||
storybookPackages[storybookInfo.frameworkPackage]?.version || storybookInfo.version;
|
||||
|
||||
return {
|
||||
...metadata,
|
||||
storybookVersion: storybookInfo.version,
|
||||
storybookVersion,
|
||||
language,
|
||||
storybookPackages,
|
||||
framework: {
|
||||
|
||||
@ -7,13 +7,21 @@ import ReactDOM from 'react-dom';
|
||||
|
||||
import { Location, LocationProvider, useNavigate } from '@storybook/router';
|
||||
import { Provider as ManagerProvider, Combo } from '@storybook/api';
|
||||
import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
|
||||
import {
|
||||
ThemeProvider,
|
||||
ensure as ensureTheme,
|
||||
CacheProvider,
|
||||
createCache,
|
||||
} from '@storybook/theming';
|
||||
import { HelmetProvider } from 'react-helmet-async';
|
||||
|
||||
import App from './app';
|
||||
|
||||
import Provider from './provider';
|
||||
|
||||
const emotionCache = createCache({ key: 'sto' });
|
||||
emotionCache.compat = true;
|
||||
|
||||
const { DOCS_MODE } = global;
|
||||
|
||||
// @ts-ignore
|
||||
@ -66,15 +74,17 @@ const Main: FC<{ provider: Provider }> = ({ provider }) => {
|
||||
: !state.storiesFailed && !state.storiesConfigured;
|
||||
|
||||
return (
|
||||
<ThemeProvider key="theme.provider" theme={ensureTheme(state.theme)}>
|
||||
<App
|
||||
key="app"
|
||||
viewMode={state.viewMode}
|
||||
layout={isLoading ? { ...state.layout, showPanel: false } : state.layout}
|
||||
panelCount={panelCount}
|
||||
docsOnly={story && story.parameters && story.parameters.docsOnly}
|
||||
/>
|
||||
</ThemeProvider>
|
||||
<CacheProvider value={emotionCache}>
|
||||
<ThemeProvider key="theme.provider" theme={ensureTheme(state.theme)}>
|
||||
<App
|
||||
key="app"
|
||||
viewMode={state.viewMode}
|
||||
layout={isLoading ? { ...state.layout, showPanel: false } : state.layout}
|
||||
panelCount={panelCount}
|
||||
docsOnly={story && story.parameters && story.parameters.docsOnly}
|
||||
/>
|
||||
</ThemeProvider>
|
||||
</CacheProvider>
|
||||
);
|
||||
}}
|
||||
</ManagerProvider>
|
||||
|
||||
@ -57,6 +57,7 @@
|
||||
"build-storybooks": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true node -r esm ./scripts/build-storybooks.js",
|
||||
"changelog": "pr-log --sloppy --cherry-pick",
|
||||
"changelog:next": "pr-log --sloppy --since-prerelease",
|
||||
"clean:dist": "del **/dist",
|
||||
"coverage": "codecov",
|
||||
"danger": "danger",
|
||||
"generate-repros": "zx scripts/repros-generator/index.mjs",
|
||||
@ -228,6 +229,7 @@
|
||||
"core-js": "^3.21.1",
|
||||
"cross-env": "^7.0.3",
|
||||
"danger": "^10.6.2",
|
||||
"del-cli": "^4.0.1",
|
||||
"detect-port": "^1.3.0",
|
||||
"downlevel-dts": "^0.6.0",
|
||||
"dts-bundle-generator": "^6.2.0",
|
||||
|
||||
13
scripts/bootstrap.js
vendored
13
scripts/bootstrap.js
vendored
@ -76,6 +76,15 @@ function run() {
|
||||
},
|
||||
order: 1,
|
||||
}),
|
||||
cleanup: createTask({
|
||||
name: `Remove compiled dist directories ${chalk.gray('(cleanup)')}`,
|
||||
defaultValue: false,
|
||||
option: '--cleanup',
|
||||
command: () => {
|
||||
spawn('npm run clean:dist');
|
||||
},
|
||||
order: 0,
|
||||
}),
|
||||
reset: createTask({
|
||||
name: `Clean repository ${chalk.red('(reset)')}`,
|
||||
defaultValue: false,
|
||||
@ -142,7 +151,7 @@ function run() {
|
||||
const groups = {
|
||||
main: ['core'],
|
||||
buildtasks: ['install', 'build', 'manager'],
|
||||
devtasks: ['dev', 'registry', 'reset'],
|
||||
devtasks: ['dev', 'registry', 'cleanup', 'reset'],
|
||||
};
|
||||
|
||||
Object.keys(tasks)
|
||||
@ -203,7 +212,7 @@ function run() {
|
||||
if (sure) {
|
||||
return list;
|
||||
}
|
||||
throw new Error('problem is between keyboard and chair');
|
||||
throw new Error('Cleanup canceled');
|
||||
});
|
||||
}
|
||||
return list;
|
||||
|
||||
@ -11,8 +11,8 @@ const cleaningProcess = spawn('git', [
|
||||
'clean',
|
||||
'-xdf',
|
||||
'-n',
|
||||
'--exclude=".vscode"',
|
||||
'--exclude=".idea"',
|
||||
'--exclude="/.vscode"',
|
||||
'--exclude="/.idea"',
|
||||
]);
|
||||
|
||||
cleaningProcess.stdout.on('data', (data) => {
|
||||
|
||||
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