mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 01:11:06 +08:00
Merge branch 'next' into clean-up-inline-rendering
This commit is contained in:
Michael Shilman
commit
d54661bb6c
@ -4,8 +4,8 @@ parameters:
|
||||
workflow:
|
||||
description: Which workflow to run
|
||||
type: enum
|
||||
enum: ["ci", "pr", "merged", "daily"]
|
||||
default: "ci"
|
||||
enum: ['ci', 'pr', 'merged', 'daily']
|
||||
default: 'ci'
|
||||
|
||||
executors:
|
||||
sb_node_16_classic:
|
||||
@ -13,8 +13,8 @@ executors:
|
||||
class:
|
||||
description: The Resource class
|
||||
type: enum
|
||||
enum: ["small", "medium", "medium+", "large", "xlarge"]
|
||||
default: "small"
|
||||
enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
|
||||
default: 'small'
|
||||
working_directory: /tmp/storybook
|
||||
docker:
|
||||
- image: cimg/node:16.17.1
|
||||
@ -26,8 +26,8 @@ executors:
|
||||
class:
|
||||
description: The Resource class
|
||||
type: enum
|
||||
enum: ["small", "medium", "medium+", "large", "xlarge"]
|
||||
default: "small"
|
||||
enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
|
||||
default: 'small'
|
||||
working_directory: /tmp/storybook
|
||||
docker:
|
||||
- image: cimg/node:16.17.1-browsers
|
||||
@ -39,8 +39,8 @@ executors:
|
||||
class:
|
||||
description: The Resource class
|
||||
type: enum
|
||||
enum: ["small", "medium", "medium+", "large", "xlarge"]
|
||||
default: "small"
|
||||
enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
|
||||
default: 'small'
|
||||
working_directory: /tmp/storybook
|
||||
docker:
|
||||
- image: mcr.microsoft.com/playwright:v1.28.0-focal
|
||||
@ -55,7 +55,7 @@ orbs:
|
||||
|
||||
commands:
|
||||
cancel-workflow-on-failure:
|
||||
description: "Cancels the entire workflow in case the previous step has failed"
|
||||
description: 'Cancels the entire workflow in case the previous step has failed'
|
||||
steps:
|
||||
- run:
|
||||
name: Cancel current workflow
|
||||
@ -65,13 +65,13 @@ commands:
|
||||
echo "To execute all checks locally, please run yarn ci-tests"
|
||||
curl -X POST --header "Content-Type: application/json" "https://circleci.com/api/v2/workflow/${CIRCLE_WORKFLOW_ID}/cancel?circle-token=${WORKFLOW_CANCELER}"
|
||||
report-workflow-on-failure:
|
||||
description: "Reports failures to discord"
|
||||
description: 'Reports failures to discord'
|
||||
parameters:
|
||||
template:
|
||||
description: |
|
||||
Which template to report in discord. Applicable for parallel sandbox jobs
|
||||
type: string
|
||||
default: "none"
|
||||
default: 'none'
|
||||
steps:
|
||||
- run:
|
||||
when: on_fail
|
||||
@ -87,7 +87,7 @@ jobs:
|
||||
name: sb_node_16_classic
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: "--depth 1 --verbose"
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- run:
|
||||
name: Prettier
|
||||
command: |
|
||||
@ -100,7 +100,7 @@ jobs:
|
||||
name: sb_node_16_classic
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: "--depth 1 --verbose"
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- restore_cache:
|
||||
name: Restore Yarn cache
|
||||
keys:
|
||||
@ -142,7 +142,7 @@ jobs:
|
||||
working_directory: /tmp/storybook
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: "--depth 1 --verbose"
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
@ -183,7 +183,7 @@ jobs:
|
||||
working_directory: /tmp/storybook
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: "--depth 1 --verbose"
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
@ -223,7 +223,7 @@ jobs:
|
||||
name: sb_node_16_classic
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: "--depth 1 --verbose"
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
@ -239,7 +239,7 @@ jobs:
|
||||
name: sb_node_16_classic
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: "--depth 1 --verbose"
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
@ -253,7 +253,7 @@ jobs:
|
||||
executor: sb_node_16_browsers
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: "--depth 1 --verbose"
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
@ -271,7 +271,7 @@ jobs:
|
||||
name: sb_node_16_browsers
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: "--depth 1 --verbose"
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
@ -293,7 +293,7 @@ jobs:
|
||||
name: sb_node_16_browsers
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: "--depth 1 --verbose"
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
@ -334,7 +334,7 @@ jobs:
|
||||
parallelism: << parameters.parallelism >>
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: "--depth 1 --verbose"
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
@ -359,7 +359,7 @@ jobs:
|
||||
parallelism: << parameters.parallelism >>
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: "--depth 1 --verbose"
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
@ -380,7 +380,7 @@ jobs:
|
||||
parallelism: << parameters.parallelism >>
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: "--depth 1 --verbose"
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
@ -414,7 +414,7 @@ jobs:
|
||||
parallelism: << parameters.parallelism >>
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: "--depth 1 --verbose"
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
@ -455,7 +455,7 @@ jobs:
|
||||
parallelism: << parameters.parallelism >>
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: "--depth 1 --verbose"
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
@ -536,23 +536,23 @@ workflows:
|
||||
requires:
|
||||
- build
|
||||
- create-sandboxes:
|
||||
parallelism: 8
|
||||
parallelism: 9
|
||||
requires:
|
||||
- build
|
||||
- build-sandboxes:
|
||||
parallelism: 8
|
||||
parallelism: 9
|
||||
requires:
|
||||
- create-sandboxes
|
||||
- test-runner-sandboxes:
|
||||
parallelism: 8
|
||||
parallelism: 9
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- chromatic-sandboxes:
|
||||
parallelism: 8
|
||||
parallelism: 9
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- e2e-sandboxes:
|
||||
parallelism: 8
|
||||
parallelism: 9
|
||||
requires:
|
||||
- build-sandboxes
|
||||
merged:
|
||||
@ -586,23 +586,23 @@ workflows:
|
||||
requires:
|
||||
- build
|
||||
- create-sandboxes:
|
||||
parallelism: 14
|
||||
parallelism: 15
|
||||
requires:
|
||||
- build
|
||||
- build-sandboxes:
|
||||
parallelism: 14
|
||||
parallelism: 15
|
||||
requires:
|
||||
- create-sandboxes
|
||||
- test-runner-sandboxes:
|
||||
parallelism: 14
|
||||
parallelism: 15
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- chromatic-sandboxes:
|
||||
parallelism: 14
|
||||
parallelism: 15
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- e2e-sandboxes:
|
||||
parallelism: 14
|
||||
parallelism: 15
|
||||
requires:
|
||||
- build-sandboxes
|
||||
daily:
|
||||
@ -611,25 +611,25 @@ workflows:
|
||||
jobs:
|
||||
- build
|
||||
- create-sandboxes:
|
||||
parallelism: 23
|
||||
parallelism: 25
|
||||
requires:
|
||||
- build
|
||||
# - smoke-test-sandboxes: # disabled for now
|
||||
# requires:
|
||||
# - create-sandboxes
|
||||
- build-sandboxes:
|
||||
parallelism: 23
|
||||
parallelism: 25
|
||||
requires:
|
||||
- create-sandboxes
|
||||
- test-runner-sandboxes:
|
||||
parallelism: 23
|
||||
parallelism: 25
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- chromatic-sandboxes:
|
||||
parallelism: 23
|
||||
parallelism: 25
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- e2e-sandboxes:
|
||||
parallelism: 23
|
||||
parallelism: 25
|
||||
requires:
|
||||
- build-sandboxes
|
||||
|
||||
122
CHANGELOG.md
122
CHANGELOG.md
@ -1,3 +1,125 @@
|
||||
## 7.0.0-beta.6 (December 14, 2022)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
- Vite: Use Vite 3 (temporarily) [#20216](https://github.com/storybooks/storybook/pull/20216)
|
||||
|
||||
## 7.0.0-beta.5 (December 13, 2022)
|
||||
|
||||
#### Features
|
||||
|
||||
- CLI: Split sb-scripts into two different migrations [#20223](https://github.com/storybooks/storybook/pull/20223)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Vite: Support async Vite plugins [#20194](https://github.com/storybooks/storybook/pull/20194)
|
||||
- Telemetry: Don't send boot event when cliOptions.disableTelemetry is passed [#20144](https://github.com/storybooks/storybook/pull/20144)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- CLI: Add React peer dep runtime check [#20206](https://github.com/storybooks/storybook/pull/20206)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
- Upgrade esbuild [#20199](https://github.com/storybooks/storybook/pull/20199)
|
||||
|
||||
## 7.0.0-beta.4 (December 13, 2022)
|
||||
|
||||
#### Features
|
||||
|
||||
- Re-enable TS 4.9 CLI templates [#20159](https://github.com/storybooks/storybook/pull/20159)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- CLI: execute automigrations when pressing enter in the prompts [#20208](https://github.com/storybooks/storybook/pull/20208)
|
||||
- Interactions: Fix storyId access in instrumenter [#20201](https://github.com/storybooks/storybook/pull/20201)
|
||||
- Typescript: Fix bug with meta not working well as generic parameter for StoryObj [#20165](https://github.com/storybooks/storybook/pull/20165)
|
||||
- SvelteKit: Support `v1.0.0-next.574` and above [#20181](https://github.com/storybooks/storybook/pull/20181)
|
||||
|
||||
#### Build
|
||||
|
||||
- Svelte: Fix argTypes inference in Button component [#20212](https://github.com/storybooks/storybook/pull/20212)
|
||||
- React-Vite: Ignore React MDX stories in sandbox [#20210](https://github.com/storybooks/storybook/pull/20210)
|
||||
|
||||
## 7.0.0-beta.3 (December 10, 2022)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- CLI: Fix sb migrate codemods [#20191](https://github.com/storybooks/storybook/pull/20191)
|
||||
- Measure: Fix measure not working on disabled elements [#19985](https://github.com/storybooks/storybook/pull/19985)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- SvelteKit: Automigration [#20094](https://github.com/storybooks/storybook/pull/20094)
|
||||
- Tech: change `package.json` engines fields, set to minimal node16 and up [#20170](https://github.com/storybooks/storybook/pull/20170)
|
||||
|
||||
## 7.0.0-beta.2 (December 9, 2022)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Core: Catch and do nothing to avoid triggering unhandled exception problems [#20177](https://github.com/storybooks/storybook/pull/20177)
|
||||
- Controls: Fix color control not resetting when initial value is defined [#20049](https://github.com/storybooks/storybook/pull/20049)
|
||||
- Core: Fix typescript.checkOptions not a valid interface [#20166](https://github.com/storybooks/storybook/pull/20166)
|
||||
- NextJS: Fixlogic around `next/future/image` [#20173](https://github.com/storybooks/storybook/pull/20173)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Revert "Revert "Telemetry: Add precedingUpgrade data to dev/build/error events"" [#20176](https://github.com/storybooks/storybook/pull/20176)
|
||||
- Telemetry: Add `chromatic` to addons list [#20143](https://github.com/storybooks/storybook/pull/20143)
|
||||
- Vite: Support vite 4 [#20139](https://github.com/storybooks/storybook/pull/20139)
|
||||
|
||||
## 7.0.0-beta.1 (December 9, 2022)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Revert "Telemetry: Add precedingUpgrade data to dev/build/error events" [#20168](https://github.com/storybooks/storybook/pull/20168)
|
||||
- Controls: Fix file controls not resetting [#19998](https://github.com/storybooks/storybook/pull/19998)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
- Upgrade express to fix security warning [#20152](https://github.com/storybooks/storybook/pull/20152)
|
||||
|
||||
## 7.0.0-beta.0 (December 8, 2022)
|
||||
|
||||
We made it to beta, folks! 🎉
|
||||
|
||||
SB7 overhauls our build architecture, modernizes our output to ESM only, promotes Vite to a first-class peer to Webpack, rethinks our Docs addon, cleans up the UI, and contains hundreds of improvements at every level of the stack. We've been sharing some of these changes on [the Storybook blog](https://storybook.js.org/blog/) and will share more over the coming weeks.
|
||||
|
||||
Beta means that we don't have any more major changes on the radar for 7.0 and it's mostly stabilization from here on out. The core team is doing some basic testing now, and once we have a good QA plan, we'd love your help to make that happen. Please keep an eye out on the blog and on our [Twitter](https://twitter.com/storybookjs) or Mastadon (coming soon!) or [Discord](https://discord.gg/storybook) if you're interested in helping.
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Extend Angular Zone.js peer dependency range [#20107](https://github.com/storybooks/storybook/pull/20107)
|
||||
- Vite: Fix static source handling for addon-docs [#20147](https://github.com/storybooks/storybook/pull/20147)
|
||||
- Controls: Arrow keys don't work on number controls [#19954](https://github.com/storybooks/storybook/pull/19954)
|
||||
|
||||
## 7.0.0-alpha.62 (December 8, 2022)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Fix new-frameworks automigration failing to read frameworkOptions field [#20128](https://github.com/storybooks/storybook/pull/20128)
|
||||
- Fix Next.js lower than 12.2.0 [#20129](https://github.com/storybooks/storybook/pull/20129)
|
||||
- Fix iframe.html not available upon early browser opening [#20123](https://github.com/storybooks/storybook/pull/20123)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Add args generic to CSFExports [#20135](https://github.com/storybooks/storybook/pull/20135)
|
||||
- Modernize favicon [#20130](https://github.com/storybooks/storybook/pull/20130)
|
||||
- Telemetry: Add precedingUpgrade data to dev/build/error events [#20136](https://github.com/storybooks/storybook/pull/20136)
|
||||
- CLI: Replace addon-docs Meta with blocks and add blocks dep [#20133](https://github.com/storybooks/storybook/pull/20133)
|
||||
- CLI: Fix upgrade --prerelease to upgrade to the next tag [#20126](https://github.com/storybooks/storybook/pull/20126)
|
||||
|
||||
## 7.0.0-alpha.61 (December 7, 2022)
|
||||
|
||||
#### Features
|
||||
|
||||
- NextJS: Support next/navigation in Next.js v13 [#20065](https://github.com/storybooks/storybook/pull/20065)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Vite/MDX: Fix mdx compiler for vite [#20121](https://github.com/storybooks/storybook/pull/20121)
|
||||
- Fix more peerDependencies issues [#20120](https://github.com/storybooks/storybook/pull/20120)
|
||||
|
||||
## 7.0.0-alpha.60 (December 7, 2022)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Getting started
|
||||
|
||||
- Ensure you have node version 14 installed (suggestion: v14.18.1).
|
||||
- Ensure you have node version 16 installed (suggestion: v16.5).
|
||||
- Ensure if you are using Windows to use the Windows Subsystem for Linux (WSL).
|
||||
- Run `yarn start` directory to run a basic test Storybook "sandbox".
|
||||
|
||||
|
||||
18
MIGRATION.md
18
MIGRATION.md
@ -23,10 +23,10 @@
|
||||
- [7.0 feature flags removed](#70-feature-flags-removed)
|
||||
- [CLI option `--use-npm` deprecated](#cli-option---use-npm-deprecated)
|
||||
- [Vite builder uses vite config automatically](#vite-builder-uses-vite-config-automatically)
|
||||
- [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
|
||||
- [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
|
||||
- [SvelteKit needs the `@storybook/sveltekit` framework](#sveltekit-needs-the-storybooksveltekit-framework)
|
||||
- [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters)
|
||||
- [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
|
||||
- [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
|
||||
- [Icons API changed](#icons-api-changed)
|
||||
- ['config' preset entry replaced with 'previewAnnotations'](#config-preset-entry-replaced-with-previewannotations)
|
||||
- [Dropped support for Angular 12 and below](#dropped-support-for-angular-12-and-below)
|
||||
@ -34,6 +34,7 @@
|
||||
- [Addon-docs: Removed deprecated blocks.js entry](#addon-docs-removed-deprecated-blocksjs-entry)
|
||||
- [Addon-a11y: Removed deprecated withA11y decorator](#addon-a11y-removed-deprecated-witha11y-decorator)
|
||||
- [Stories glob matches MDX files](#stories-glob-matches-mdx-files)
|
||||
- [Add strict mode](#add-strict-mode)
|
||||
- [Docs Changes](#docs-changes)
|
||||
- [Standalone docs files](#standalone-docs-files)
|
||||
- [Referencing stories in docs files](#referencing-stories-in-docs-files)
|
||||
@ -275,6 +276,7 @@ To upgrade manually, add any version of `react` and `react-dom` as devDependenci
|
||||
```
|
||||
npm add react react-dom --dev
|
||||
```
|
||||
|
||||
#### Postcss removed
|
||||
|
||||
Storybook 6.x installed postcss by default. In 7.0 built-in support has been removed. IF you need it, you can add it back using [`@storybook/addon-postcss`](https://github.com/storybookjs/addon-postcss).
|
||||
@ -586,6 +588,8 @@ When using a [Vite-based framework](#framework-field-mandatory), Storybook will
|
||||
Some settings will be overridden by storybook so that it can function properly, and the merged settings can be modified using `viteFinal` in `.storybook/main.js` (see the [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)).
|
||||
If you were using `viteFinal` in 6.5 to simply merge in your project's standard vite config, you can now remove it.
|
||||
|
||||
For Svelte projects this means that the `svelteOptions` property in the `main.js` config should be omitted, as it will be loaded automatically via the project's `vite.config.js`. An exception to this is when the project needs different Svelte options for Storybook than the Vite config provides for the application itself.
|
||||
|
||||
#### Vite cache moved to node_modules/.cache/.vite-storybook
|
||||
|
||||
Previously, Storybook's Vite builder placed cache files in node_modules/.vite-storybook. However, it's more common for tools to place cached files into `node_modules/.cache`, and putting them there makes it quick and easy to clear the cache for multiple tools at once. We don't expect this change will cause any problems, but it's something that users of Storybook Vite projects should know about. It can be configured by setting `cacheDir` in `viteFinal` within `.storybook/main.js` [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)).
|
||||
@ -601,6 +605,8 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
Also see the note in [Vite builder uses vite config automatically](#vite-builder-uses-vite-config-automatically) about removing `svelteOptions`.
|
||||
|
||||
#### Removed docs.getContainer and getPage parameters
|
||||
|
||||
It is no longer possible to set `parameters.docs.getContainer()` and `getPage()`. Instead use `parameters.docs.container` or `parameters.docs.page` directly.
|
||||
@ -643,7 +649,7 @@ Starting in 7.0 the `grid.cellSize` parameter should now be `backgrounds.grid.ce
|
||||
|
||||
#### Addon-docs: Removed deprecated blocks.js entry
|
||||
|
||||
Removed `@storybook/addon-docs/blocks` entry. Import directly from `@storybook/addon-docs` instead. This was [deprecated in SB 6.3](#deprecated-scoped-blocks-imports).
|
||||
Removed `@storybook/addon-docs/blocks` entry. Import directly from `@storybook/blocks` instead. This was [deprecated in SB 6.3](#deprecated-scoped-blocks-imports).
|
||||
|
||||
#### Addon-a11y: Removed deprecated withA11y decorator
|
||||
|
||||
@ -673,6 +679,12 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
#### Add strict mode
|
||||
|
||||
Starting in 7.0, Storybook's build tools add [`"use strict"`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode) to the compiled JS output.
|
||||
|
||||
If user code in `.storybook/preview.js` or stories relies on "sloppy" mode behavior, it will need to be updated. As a workaround, it is sometimes possible to move the sloppy mode code inside a script tag in `.storybook/preview-head.html`.
|
||||
|
||||
### Docs Changes
|
||||
|
||||
The information hierarchy of docs in Storybook has changed in 7.0. The main difference is that each docs is listed in the sidebar as a separate entry, rather than attached to individual stories.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -62,15 +62,15 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.60",
|
||||
"@storybook/channels": "7.0.0-alpha.60",
|
||||
"@storybook/client-logger": "7.0.0-alpha.60",
|
||||
"@storybook/components": "7.0.0-alpha.60",
|
||||
"@storybook/core-events": "7.0.0-alpha.60",
|
||||
"@storybook/manager-api": "7.0.0-alpha.60",
|
||||
"@storybook/preview-api": "7.0.0-alpha.60",
|
||||
"@storybook/theming": "7.0.0-alpha.60",
|
||||
"@storybook/types": "7.0.0-alpha.60",
|
||||
"@storybook/addon-highlight": "7.0.0-beta.6",
|
||||
"@storybook/channels": "7.0.0-beta.6",
|
||||
"@storybook/client-logger": "7.0.0-beta.6",
|
||||
"@storybook/components": "7.0.0-beta.6",
|
||||
"@storybook/core-events": "7.0.0-beta.6",
|
||||
"@storybook/manager-api": "7.0.0-beta.6",
|
||||
"@storybook/preview-api": "7.0.0-beta.6",
|
||||
"@storybook/theming": "7.0.0-beta.6",
|
||||
"@storybook/types": "7.0.0-beta.6",
|
||||
"axe-core": "^4.2.0",
|
||||
"global": "^4.4.0",
|
||||
"lodash": "^4.17.21",
|
||||
@ -102,7 +102,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc",
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a",
|
||||
"storybook": {
|
||||
"displayName": "Accessibility",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Get UI feedback when an action is performed on an interactive element",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -76,13 +76,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-alpha.60",
|
||||
"@storybook/components": "7.0.0-alpha.60",
|
||||
"@storybook/core-events": "7.0.0-alpha.60",
|
||||
"@storybook/manager-api": "7.0.0-alpha.60",
|
||||
"@storybook/preview-api": "7.0.0-alpha.60",
|
||||
"@storybook/theming": "7.0.0-alpha.60",
|
||||
"@storybook/types": "7.0.0-alpha.60",
|
||||
"@storybook/client-logger": "7.0.0-beta.6",
|
||||
"@storybook/components": "7.0.0-beta.6",
|
||||
"@storybook/core-events": "7.0.0-beta.6",
|
||||
"@storybook/manager-api": "7.0.0-beta.6",
|
||||
"@storybook/preview-api": "7.0.0-beta.6",
|
||||
"@storybook/theming": "7.0.0-beta.6",
|
||||
"@storybook/types": "7.0.0-beta.6",
|
||||
"dequal": "^2.0.2",
|
||||
"global": "^4.4.0",
|
||||
"lodash": "^4.17.21",
|
||||
@ -120,7 +120,7 @@
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc",
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a",
|
||||
"storybook": {
|
||||
"displayName": "Actions",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -75,13 +75,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-alpha.60",
|
||||
"@storybook/components": "7.0.0-alpha.60",
|
||||
"@storybook/core-events": "7.0.0-alpha.60",
|
||||
"@storybook/manager-api": "7.0.0-alpha.60",
|
||||
"@storybook/preview-api": "7.0.0-alpha.60",
|
||||
"@storybook/theming": "7.0.0-alpha.60",
|
||||
"@storybook/types": "7.0.0-alpha.60",
|
||||
"@storybook/client-logger": "7.0.0-beta.6",
|
||||
"@storybook/components": "7.0.0-beta.6",
|
||||
"@storybook/core-events": "7.0.0-beta.6",
|
||||
"@storybook/manager-api": "7.0.0-beta.6",
|
||||
"@storybook/preview-api": "7.0.0-beta.6",
|
||||
"@storybook/theming": "7.0.0-beta.6",
|
||||
"@storybook/types": "7.0.0-beta.6",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
"ts-dedent": "^2.0.0"
|
||||
@ -111,7 +111,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc",
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a",
|
||||
"storybook": {
|
||||
"displayName": "Backgrounds",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Interact with component inputs dynamically in the Storybook UI",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -67,15 +67,15 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/blocks": "7.0.0-alpha.60",
|
||||
"@storybook/client-logger": "7.0.0-alpha.60",
|
||||
"@storybook/components": "7.0.0-alpha.60",
|
||||
"@storybook/core-common": "7.0.0-alpha.60",
|
||||
"@storybook/manager-api": "7.0.0-alpha.60",
|
||||
"@storybook/node-logger": "7.0.0-alpha.60",
|
||||
"@storybook/preview-api": "7.0.0-alpha.60",
|
||||
"@storybook/theming": "7.0.0-alpha.60",
|
||||
"@storybook/types": "7.0.0-alpha.60",
|
||||
"@storybook/blocks": "7.0.0-beta.6",
|
||||
"@storybook/client-logger": "7.0.0-beta.6",
|
||||
"@storybook/components": "7.0.0-beta.6",
|
||||
"@storybook/core-common": "7.0.0-beta.6",
|
||||
"@storybook/manager-api": "7.0.0-beta.6",
|
||||
"@storybook/node-logger": "7.0.0-beta.6",
|
||||
"@storybook/preview-api": "7.0.0-beta.6",
|
||||
"@storybook/theming": "7.0.0-beta.6",
|
||||
"@storybook/types": "7.0.0-beta.6",
|
||||
"lodash": "^4.17.21",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
@ -101,7 +101,7 @@
|
||||
],
|
||||
"platform": "browser"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc",
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a",
|
||||
"storybook": {
|
||||
"displayName": "Controls",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -41,6 +41,11 @@
|
||||
"import": "./dist/preset.mjs",
|
||||
"types": "./dist/preset.d.ts"
|
||||
},
|
||||
"./blocks": {
|
||||
"require": "./dist/blocks.js",
|
||||
"import": "./dist/blocks.mjs",
|
||||
"types": "./dist/blocks.d.ts"
|
||||
},
|
||||
"./dist/preview": {
|
||||
"require": "./dist/preview.js",
|
||||
"import": "./dist/preview.mjs",
|
||||
@ -99,16 +104,16 @@
|
||||
"@babel/plugin-transform-react-jsx": "^7.19.0",
|
||||
"@jest/transform": "^29.3.1",
|
||||
"@mdx-js/react": "^2.1.5",
|
||||
"@storybook/blocks": "7.0.0-alpha.60",
|
||||
"@storybook/components": "7.0.0-alpha.60",
|
||||
"@storybook/csf-plugin": "7.0.0-alpha.60",
|
||||
"@storybook/csf-tools": "7.0.0-alpha.60",
|
||||
"@storybook/blocks": "7.0.0-beta.6",
|
||||
"@storybook/components": "7.0.0-beta.6",
|
||||
"@storybook/csf-plugin": "7.0.0-beta.6",
|
||||
"@storybook/csf-tools": "7.0.0-beta.6",
|
||||
"@storybook/mdx2-csf": "next",
|
||||
"@storybook/node-logger": "7.0.0-alpha.60",
|
||||
"@storybook/postinstall": "7.0.0-alpha.60",
|
||||
"@storybook/preview-api": "7.0.0-alpha.60",
|
||||
"@storybook/theming": "7.0.0-alpha.60",
|
||||
"@storybook/types": "7.0.0-alpha.60",
|
||||
"@storybook/node-logger": "7.0.0-beta.6",
|
||||
"@storybook/postinstall": "7.0.0-beta.6",
|
||||
"@storybook/preview-api": "7.0.0-beta.6",
|
||||
"@storybook/theming": "7.0.0-beta.6",
|
||||
"@storybook/types": "7.0.0-beta.6",
|
||||
"fs-extra": "^9.0.1",
|
||||
"global": "^4.4.0",
|
||||
"remark-external-links": "^8.0.0",
|
||||
@ -132,10 +137,11 @@
|
||||
"./src/index.ts",
|
||||
"./src/preset.ts",
|
||||
"./src/preview.ts",
|
||||
"./src/blocks.ts",
|
||||
"./src/shims/mdx-react-shim.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc",
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a",
|
||||
"storybook": {
|
||||
"displayName": "Docs",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
|
||||
|
||||
7
code/addons/docs/src/blocks.ts
Normal file
7
code/addons/docs/src/blocks.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { deprecate } from '@storybook/client-logger';
|
||||
|
||||
deprecate(
|
||||
"Import from '@storybook/addon-docs/blocks' is deprecated. Please import from '@storybook/blocks' instead."
|
||||
);
|
||||
|
||||
export * from '@storybook/blocks';
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -116,23 +116,23 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "7.0.0-alpha.60",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.60",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.60",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.60",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.60",
|
||||
"@storybook/addon-measure": "7.0.0-alpha.60",
|
||||
"@storybook/addon-outline": "7.0.0-alpha.60",
|
||||
"@storybook/addon-toolbars": "7.0.0-alpha.60",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.60",
|
||||
"@storybook/core-common": "7.0.0-alpha.60",
|
||||
"@storybook/manager-api": "7.0.0-alpha.60",
|
||||
"@storybook/node-logger": "7.0.0-alpha.60",
|
||||
"@storybook/preview-api": "7.0.0-alpha.60",
|
||||
"@storybook/addon-actions": "7.0.0-beta.6",
|
||||
"@storybook/addon-backgrounds": "7.0.0-beta.6",
|
||||
"@storybook/addon-controls": "7.0.0-beta.6",
|
||||
"@storybook/addon-docs": "7.0.0-beta.6",
|
||||
"@storybook/addon-highlight": "7.0.0-beta.6",
|
||||
"@storybook/addon-measure": "7.0.0-beta.6",
|
||||
"@storybook/addon-outline": "7.0.0-beta.6",
|
||||
"@storybook/addon-toolbars": "7.0.0-beta.6",
|
||||
"@storybook/addon-viewport": "7.0.0-beta.6",
|
||||
"@storybook/core-common": "7.0.0-beta.6",
|
||||
"@storybook/manager-api": "7.0.0-beta.6",
|
||||
"@storybook/node-logger": "7.0.0-beta.6",
|
||||
"@storybook/preview-api": "7.0.0-beta.6",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/vue": "7.0.0-alpha.60",
|
||||
"@storybook/vue": "7.0.0-beta.6",
|
||||
"typescript": "^4.9.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
@ -163,5 +163,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-highlight",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Highlight DOM nodes within your stories",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -60,8 +60,8 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core-events": "7.0.0-alpha.60",
|
||||
"@storybook/preview-api": "7.0.0-alpha.60",
|
||||
"@storybook/core-events": "7.0.0-beta.6",
|
||||
"@storybook/preview-api": "7.0.0-beta.6",
|
||||
"global": "^4.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -77,7 +77,7 @@
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc",
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Highlight",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-interactions",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Automate, test and debug user interactions",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -71,15 +71,15 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-alpha.60",
|
||||
"@storybook/components": "7.0.0-alpha.60",
|
||||
"@storybook/core-common": "7.0.0-alpha.60",
|
||||
"@storybook/core-events": "7.0.0-alpha.60",
|
||||
"@storybook/instrumenter": "7.0.0-alpha.60",
|
||||
"@storybook/manager-api": "7.0.0-alpha.60",
|
||||
"@storybook/preview-api": "7.0.0-alpha.60",
|
||||
"@storybook/theming": "7.0.0-alpha.60",
|
||||
"@storybook/types": "7.0.0-alpha.60",
|
||||
"@storybook/client-logger": "7.0.0-beta.6",
|
||||
"@storybook/components": "7.0.0-beta.6",
|
||||
"@storybook/core-common": "7.0.0-beta.6",
|
||||
"@storybook/core-events": "7.0.0-beta.6",
|
||||
"@storybook/instrumenter": "7.0.0-beta.6",
|
||||
"@storybook/manager-api": "7.0.0-beta.6",
|
||||
"@storybook/preview-api": "7.0.0-beta.6",
|
||||
"@storybook/theming": "7.0.0-beta.6",
|
||||
"@storybook/types": "7.0.0-beta.6",
|
||||
"global": "^4.4.0",
|
||||
"jest-mock": "^27.0.6",
|
||||
"polished": "^4.2.2",
|
||||
@ -117,7 +117,7 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc",
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a",
|
||||
"storybook": {
|
||||
"displayName": "Interactions",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -69,12 +69,12 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-alpha.60",
|
||||
"@storybook/components": "7.0.0-alpha.60",
|
||||
"@storybook/core-events": "7.0.0-alpha.60",
|
||||
"@storybook/manager-api": "7.0.0-alpha.60",
|
||||
"@storybook/preview-api": "7.0.0-alpha.60",
|
||||
"@storybook/theming": "7.0.0-alpha.60",
|
||||
"@storybook/client-logger": "7.0.0-beta.6",
|
||||
"@storybook/components": "7.0.0-beta.6",
|
||||
"@storybook/core-events": "7.0.0-beta.6",
|
||||
"@storybook/manager-api": "7.0.0-beta.6",
|
||||
"@storybook/preview-api": "7.0.0-beta.6",
|
||||
"@storybook/theming": "7.0.0-beta.6",
|
||||
"global": "^4.4.0",
|
||||
"react-sizeme": "^3.0.1",
|
||||
"upath": "^1.2.0"
|
||||
@ -104,7 +104,7 @@
|
||||
],
|
||||
"platform": "browser"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc",
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a",
|
||||
"storybook": {
|
||||
"displayName": "Jest",
|
||||
"icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Link stories together to build demos and prototypes with your UI components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -76,13 +76,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-alpha.60",
|
||||
"@storybook/core-events": "7.0.0-alpha.60",
|
||||
"@storybook/client-logger": "7.0.0-beta.6",
|
||||
"@storybook/core-events": "7.0.0-beta.6",
|
||||
"@storybook/csf": "next",
|
||||
"@storybook/manager-api": "7.0.0-alpha.60",
|
||||
"@storybook/preview-api": "7.0.0-alpha.60",
|
||||
"@storybook/router": "7.0.0-alpha.60",
|
||||
"@storybook/types": "7.0.0-alpha.60",
|
||||
"@storybook/manager-api": "7.0.0-beta.6",
|
||||
"@storybook/preview-api": "7.0.0-beta.6",
|
||||
"@storybook/router": "7.0.0-beta.6",
|
||||
"@storybook/types": "7.0.0-beta.6",
|
||||
"global": "^4.4.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"ts-dedent": "^2.0.0"
|
||||
@ -113,7 +113,7 @@
|
||||
"./src/react/index.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc",
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a",
|
||||
"storybook": {
|
||||
"displayName": "Links",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-measure",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Inspect layouts by visualizing the box model",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -74,12 +74,12 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-alpha.60",
|
||||
"@storybook/components": "7.0.0-alpha.60",
|
||||
"@storybook/core-events": "7.0.0-alpha.60",
|
||||
"@storybook/manager-api": "7.0.0-alpha.60",
|
||||
"@storybook/preview-api": "7.0.0-alpha.60",
|
||||
"@storybook/types": "7.0.0-alpha.60",
|
||||
"@storybook/client-logger": "7.0.0-beta.6",
|
||||
"@storybook/components": "7.0.0-beta.6",
|
||||
"@storybook/core-events": "7.0.0-beta.6",
|
||||
"@storybook/manager-api": "7.0.0-beta.6",
|
||||
"@storybook/preview-api": "7.0.0-beta.6",
|
||||
"@storybook/types": "7.0.0-beta.6",
|
||||
"global": "^4.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -107,7 +107,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc",
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a",
|
||||
"storybook": {
|
||||
"displayName": "Measure",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -17,7 +17,7 @@ export const withMeasure = (StoryFn: StoryFunction<Renderer>, context: StoryCont
|
||||
const { measureEnabled } = context.globals;
|
||||
|
||||
useEffect(() => {
|
||||
const onMouseMove = (event: MouseEvent) => {
|
||||
const onPointerMove = (event: MouseEvent) => {
|
||||
window.requestAnimationFrame(() => {
|
||||
event.stopPropagation();
|
||||
pointer.x = event.clientX;
|
||||
@ -25,15 +25,15 @@ export const withMeasure = (StoryFn: StoryFunction<Renderer>, context: StoryCont
|
||||
});
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', onMouseMove);
|
||||
document.addEventListener('pointermove', onPointerMove);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousemove', onMouseMove);
|
||||
document.removeEventListener('pointermove', onPointerMove);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const onMouseOver = (event: MouseEvent) => {
|
||||
const onPointerOver = (event: MouseEvent) => {
|
||||
window.requestAnimationFrame(() => {
|
||||
event.stopPropagation();
|
||||
findAndDrawElement(event.clientX, event.clientY);
|
||||
@ -47,7 +47,7 @@ export const withMeasure = (StoryFn: StoryFunction<Renderer>, context: StoryCont
|
||||
};
|
||||
|
||||
if (measureEnabled) {
|
||||
document.addEventListener('mouseover', onMouseOver);
|
||||
document.addEventListener('pointerover', onPointerOver);
|
||||
init();
|
||||
window.addEventListener('resize', onResize);
|
||||
// Draw the element below the pointer when first enabled
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-outline",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Outline all elements with CSS to help with layout placement and alignment",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -77,12 +77,12 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-alpha.60",
|
||||
"@storybook/components": "7.0.0-alpha.60",
|
||||
"@storybook/core-events": "7.0.0-alpha.60",
|
||||
"@storybook/manager-api": "7.0.0-alpha.60",
|
||||
"@storybook/preview-api": "7.0.0-alpha.60",
|
||||
"@storybook/types": "7.0.0-alpha.60",
|
||||
"@storybook/client-logger": "7.0.0-beta.6",
|
||||
"@storybook/components": "7.0.0-beta.6",
|
||||
"@storybook/core-events": "7.0.0-beta.6",
|
||||
"@storybook/manager-api": "7.0.0-beta.6",
|
||||
"@storybook/preview-api": "7.0.0-beta.6",
|
||||
"@storybook/types": "7.0.0-beta.6",
|
||||
"global": "^4.4.0",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
@ -111,7 +111,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc",
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a",
|
||||
"storybook": {
|
||||
"displayName": "Outline",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Take a code snapshot of every story automatically with Jest",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -39,11 +39,11 @@
|
||||
"dependencies": {
|
||||
"@jest/transform": "^29.3.1",
|
||||
"@storybook/babel-plugin-require-context-hook": "1.0.1",
|
||||
"@storybook/client-api": "7.0.0-alpha.60",
|
||||
"@storybook/core-common": "7.0.0-alpha.60",
|
||||
"@storybook/core-webpack": "7.0.0-alpha.60",
|
||||
"@storybook/preview-api": "7.0.0-alpha.60",
|
||||
"@storybook/types": "7.0.0-alpha.60",
|
||||
"@storybook/client-api": "7.0.0-beta.6",
|
||||
"@storybook/core-common": "7.0.0-beta.6",
|
||||
"@storybook/core-webpack": "7.0.0-beta.6",
|
||||
"@storybook/preview-api": "7.0.0-beta.6",
|
||||
"@storybook/types": "7.0.0-beta.6",
|
||||
"@types/glob": "^7.1.3",
|
||||
"@types/jest-specific-snapshot": "^0.5.6",
|
||||
"core-js": "^3.8.2",
|
||||
@ -60,11 +60,11 @@
|
||||
"@angular/core": "^13.3.6",
|
||||
"@angular/platform-browser-dynamic": "^13.3.6",
|
||||
"@emotion/jest": "^11.8.0",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.60",
|
||||
"@storybook/angular": "7.0.0-alpha.60",
|
||||
"@storybook/react": "7.0.0-alpha.60",
|
||||
"@storybook/vue": "7.0.0-alpha.60",
|
||||
"@storybook/vue3": "7.0.0-alpha.60",
|
||||
"@storybook/addon-docs": "7.0.0-beta.6",
|
||||
"@storybook/angular": "7.0.0-beta.6",
|
||||
"@storybook/react": "7.0.0-beta.6",
|
||||
"@storybook/vue": "7.0.0-beta.6",
|
||||
"@storybook/vue3": "7.0.0-beta.6",
|
||||
"babel-loader": "^8.3.0",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.6.1",
|
||||
@ -142,7 +142,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc",
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a",
|
||||
"storybook": {
|
||||
"displayName": "Storyshots",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -35,8 +35,8 @@
|
||||
"dependencies": {
|
||||
"@axe-core/puppeteer": "^4.2.0",
|
||||
"@storybook/csf": "next",
|
||||
"@storybook/node-logger": "7.0.0-alpha.60",
|
||||
"@storybook/types": "7.0.0-alpha.60",
|
||||
"@storybook/node-logger": "7.0.0-beta.6",
|
||||
"@storybook/types": "7.0.0-beta.6",
|
||||
"@types/jest-image-snapshot": "^5.1.0",
|
||||
"jest-image-snapshot": "^6.0.0"
|
||||
},
|
||||
@ -45,7 +45,7 @@
|
||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.60",
|
||||
"@storybook/addon-storyshots": "7.0.0-beta.6",
|
||||
"puppeteer": ">=2.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
@ -56,5 +56,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "View a story’s source code to see how it works and paste into your app",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -53,13 +53,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-alpha.60",
|
||||
"@storybook/components": "7.0.0-alpha.60",
|
||||
"@storybook/manager-api": "7.0.0-alpha.60",
|
||||
"@storybook/preview-api": "7.0.0-alpha.60",
|
||||
"@storybook/router": "7.0.0-alpha.60",
|
||||
"@storybook/source-loader": "7.0.0-alpha.60",
|
||||
"@storybook/theming": "7.0.0-alpha.60",
|
||||
"@storybook/client-logger": "7.0.0-beta.6",
|
||||
"@storybook/components": "7.0.0-beta.6",
|
||||
"@storybook/manager-api": "7.0.0-beta.6",
|
||||
"@storybook/preview-api": "7.0.0-beta.6",
|
||||
"@storybook/router": "7.0.0-beta.6",
|
||||
"@storybook/source-loader": "7.0.0-beta.6",
|
||||
"@storybook/theming": "7.0.0-beta.6",
|
||||
"estraverse": "^5.2.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-syntax-highlighter": "^15.5.0"
|
||||
@ -91,7 +91,7 @@
|
||||
"./src/preset.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc",
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a",
|
||||
"storybook": {
|
||||
"displayName": "Storysource",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-toolbars",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Create your own toolbar items that control story rendering",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -67,11 +67,11 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-alpha.60",
|
||||
"@storybook/components": "7.0.0-alpha.60",
|
||||
"@storybook/manager-api": "7.0.0-alpha.60",
|
||||
"@storybook/preview-api": "7.0.0-alpha.60",
|
||||
"@storybook/theming": "7.0.0-alpha.60"
|
||||
"@storybook/client-logger": "7.0.0-beta.6",
|
||||
"@storybook/components": "7.0.0-beta.6",
|
||||
"@storybook/manager-api": "7.0.0-beta.6",
|
||||
"@storybook/preview-api": "7.0.0-beta.6",
|
||||
"@storybook/theming": "7.0.0-beta.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "~4.9.3"
|
||||
@ -98,7 +98,7 @@
|
||||
],
|
||||
"platform": "browser"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc",
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a",
|
||||
"storybook": {
|
||||
"displayName": "Toolbars",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -72,12 +72,12 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-alpha.60",
|
||||
"@storybook/components": "7.0.0-alpha.60",
|
||||
"@storybook/core-events": "7.0.0-alpha.60",
|
||||
"@storybook/manager-api": "7.0.0-alpha.60",
|
||||
"@storybook/preview-api": "7.0.0-alpha.60",
|
||||
"@storybook/theming": "7.0.0-alpha.60",
|
||||
"@storybook/client-logger": "7.0.0-beta.6",
|
||||
"@storybook/components": "7.0.0-beta.6",
|
||||
"@storybook/core-events": "7.0.0-beta.6",
|
||||
"@storybook/manager-api": "7.0.0-beta.6",
|
||||
"@storybook/preview-api": "7.0.0-beta.6",
|
||||
"@storybook/theming": "7.0.0-beta.6",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
"prop-types": "^15.7.2"
|
||||
@ -108,7 +108,7 @@
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc",
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a",
|
||||
"storybook": {
|
||||
"displayName": "Viewport",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",
|
||||
|
||||
90
code/e2e-tests/framework-nextjs.spec.ts
Normal file
90
code/e2e-tests/framework-nextjs.spec.ts
Normal file
@ -0,0 +1,90 @@
|
||||
/* eslint-disable jest/no-disabled-tests */
|
||||
import type { Locator } from '@playwright/test';
|
||||
import { test, expect } from '@playwright/test';
|
||||
import process from 'process';
|
||||
import { SbPage } from './util';
|
||||
|
||||
const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:6006';
|
||||
const templateName = process.env.STORYBOOK_TEMPLATE_NAME;
|
||||
|
||||
test.describe('Next.js', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(storybookUrl);
|
||||
await new SbPage(page).waitUntilLoaded();
|
||||
});
|
||||
|
||||
test.describe('next/navigation', () => {
|
||||
test.skip(
|
||||
// eslint-disable-next-line jest/valid-title
|
||||
!templateName.includes('nextjs/default-js'),
|
||||
'Only run this test for the Frameworks that support next/navigation'
|
||||
);
|
||||
|
||||
let root: Locator;
|
||||
let sbPage: SbPage;
|
||||
|
||||
function testRoutingBehaviour(buttonText: string, action: string) {
|
||||
test(`should trigger ${action} action`, async ({ page }) => {
|
||||
const button = root.locator('button', { hasText: buttonText });
|
||||
await button.click();
|
||||
|
||||
await sbPage.viewAddonPanel('Actions');
|
||||
const logItem = await page.locator('#storybook-panel-root #panel-tab-content', {
|
||||
hasText: `nextNavigation.${action}`,
|
||||
});
|
||||
await expect(logItem).toBeVisible();
|
||||
});
|
||||
}
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
sbPage = new SbPage(page);
|
||||
|
||||
await sbPage.navigateToStory('frameworks/nextjs_default-js/Navigation', 'default');
|
||||
root = sbPage.previewRoot();
|
||||
});
|
||||
|
||||
testRoutingBehaviour('Go back', 'back');
|
||||
testRoutingBehaviour('Go forward', 'forward');
|
||||
testRoutingBehaviour('Prefetch', 'prefetch');
|
||||
testRoutingBehaviour('Push HTML', 'push');
|
||||
testRoutingBehaviour('Refresh', 'refresh');
|
||||
testRoutingBehaviour('Replace', 'replace');
|
||||
});
|
||||
|
||||
test.describe('next/router', () => {
|
||||
test.skip(
|
||||
// eslint-disable-next-line jest/valid-title
|
||||
!templateName.includes('nextjs'),
|
||||
'Only run this test for the Frameworks that support next/router'
|
||||
);
|
||||
|
||||
let root: Locator;
|
||||
let sbPage: SbPage;
|
||||
|
||||
function testRoutingBehaviour(buttonText: string, action: string) {
|
||||
test(`should trigger ${action} action`, async ({ page }) => {
|
||||
const button = root.locator('button', { hasText: buttonText });
|
||||
await button.click();
|
||||
|
||||
await sbPage.viewAddonPanel('Actions');
|
||||
const logItem = await page.locator('#storybook-panel-root #panel-tab-content', {
|
||||
hasText: `nextRouter.${action}`,
|
||||
});
|
||||
await expect(logItem).toBeVisible();
|
||||
});
|
||||
}
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
sbPage = new SbPage(page);
|
||||
|
||||
await sbPage.navigateToStory('frameworks/nextjs_default-js/Router', 'default');
|
||||
root = sbPage.previewRoot();
|
||||
});
|
||||
|
||||
testRoutingBehaviour('Go back', 'back');
|
||||
testRoutingBehaviour('Go forward', 'forward');
|
||||
testRoutingBehaviour('Prefetch', 'prefetch');
|
||||
testRoutingBehaviour('Push HTML', 'push');
|
||||
testRoutingBehaviour('Replace', 'replace');
|
||||
});
|
||||
});
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -34,18 +34,18 @@
|
||||
"prep": "rimraf dist && ../../../scripts/node_modules/.bin/tsc --project tsconfig.build.json && echo \"Preventing passing flags to tsc\""
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.60",
|
||||
"@storybook/client-logger": "7.0.0-alpha.60",
|
||||
"@storybook/core-client": "7.0.0-alpha.60",
|
||||
"@storybook/core-common": "7.0.0-alpha.60",
|
||||
"@storybook/core-events": "7.0.0-alpha.60",
|
||||
"@storybook/core-server": "7.0.0-alpha.60",
|
||||
"@storybook/core-webpack": "7.0.0-alpha.60",
|
||||
"@storybook/docs-tools": "7.0.0-alpha.60",
|
||||
"@storybook/manager-api": "7.0.0-alpha.60",
|
||||
"@storybook/node-logger": "7.0.0-alpha.60",
|
||||
"@storybook/preview-api": "7.0.0-alpha.60",
|
||||
"@storybook/types": "7.0.0-alpha.60",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.6",
|
||||
"@storybook/client-logger": "7.0.0-beta.6",
|
||||
"@storybook/core-client": "7.0.0-beta.6",
|
||||
"@storybook/core-common": "7.0.0-beta.6",
|
||||
"@storybook/core-events": "7.0.0-beta.6",
|
||||
"@storybook/core-server": "7.0.0-beta.6",
|
||||
"@storybook/core-webpack": "7.0.0-beta.6",
|
||||
"@storybook/docs-tools": "7.0.0-beta.6",
|
||||
"@storybook/manager-api": "7.0.0-beta.6",
|
||||
"@storybook/node-logger": "7.0.0-beta.6",
|
||||
"@storybook/preview-api": "7.0.0-beta.6",
|
||||
"@storybook/types": "7.0.0-beta.6",
|
||||
"@types/node": "^16.0.0",
|
||||
"@types/react": "^16.14.34",
|
||||
"@types/react-dom": "^16.9.14",
|
||||
@ -85,7 +85,7 @@
|
||||
"tmp": "^0.2.1",
|
||||
"typescript": "~4.9.3",
|
||||
"webpack": "5",
|
||||
"zone.js": "^0.11.0"
|
||||
"zone.js": "^0.12.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular-devkit/architect": ">=0.1300.0",
|
||||
@ -105,7 +105,7 @@
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"rxjs": "^6.0.0 || ^7.4.0",
|
||||
"typescript": "^4.0.0",
|
||||
"zone.js": "^0.8.29 || ^0.9.0 || ^0.10.0 || ^0.11.0"
|
||||
"zone.js": "^0.8.29 || >= 0.9.0 < 1.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@angular/cli": {
|
||||
@ -116,11 +116,11 @@
|
||||
}
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
"node": ">=16.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"builders": "dist/builders/builders.json",
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/ember",
|
||||
"bugs": {
|
||||
@ -31,11 +31,11 @@
|
||||
"prep": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.60",
|
||||
"@storybook/core-common": "7.0.0-alpha.60",
|
||||
"@storybook/docs-tools": "7.0.0-alpha.60",
|
||||
"@storybook/preview-api": "7.0.0-alpha.60",
|
||||
"@storybook/types": "7.0.0-alpha.60",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.6",
|
||||
"@storybook/core-common": "7.0.0-beta.6",
|
||||
"@storybook/docs-tools": "7.0.0-beta.6",
|
||||
"@storybook/preview-api": "7.0.0-beta.6",
|
||||
"@storybook/types": "7.0.0-beta.6",
|
||||
"global": "^4.4.0",
|
||||
"read-pkg-up": "^7.0.1",
|
||||
"ts-dedent": "^2.0.0"
|
||||
@ -54,10 +54,10 @@
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
"node": ">=16.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html-vite",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -51,22 +51,20 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.60",
|
||||
"@storybook/builder-vite": "7.0.0-alpha.60",
|
||||
"@storybook/channel-postmessage": "7.0.0-alpha.60",
|
||||
"@storybook/channel-websocket": "7.0.0-alpha.60",
|
||||
"@storybook/client-api": "7.0.0-alpha.60",
|
||||
"@storybook/core-server": "7.0.0-alpha.60",
|
||||
"@storybook/html": "7.0.0-alpha.60",
|
||||
"@storybook/node-logger": "7.0.0-alpha.60",
|
||||
"@storybook/preview-web": "7.0.0-alpha.60",
|
||||
"magic-string": "^0.26.1",
|
||||
"vite": "3"
|
||||
"@storybook/addons": "7.0.0-beta.6",
|
||||
"@storybook/builder-vite": "7.0.0-beta.6",
|
||||
"@storybook/channel-postmessage": "7.0.0-beta.6",
|
||||
"@storybook/channel-websocket": "7.0.0-beta.6",
|
||||
"@storybook/client-api": "7.0.0-beta.6",
|
||||
"@storybook/core-server": "7.0.0-beta.6",
|
||||
"@storybook/html": "7.0.0-beta.6",
|
||||
"@storybook/node-logger": "7.0.0-beta.6",
|
||||
"@storybook/preview-web": "7.0.0-beta.6",
|
||||
"magic-string": "^0.26.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^16.0.0",
|
||||
"typescript": "~4.9.3",
|
||||
"vite": "^3.1.0"
|
||||
"typescript": "~4.9.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^14.18 || >=16"
|
||||
@ -81,5 +79,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html-webpack5",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -50,10 +50,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.60",
|
||||
"@storybook/core-common": "7.0.0-alpha.60",
|
||||
"@storybook/html": "7.0.0-alpha.60",
|
||||
"@storybook/preset-html-webpack": "7.0.0-alpha.60",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.6",
|
||||
"@storybook/core-common": "7.0.0-beta.6",
|
||||
"@storybook/html": "7.0.0-beta.6",
|
||||
"@storybook/preset-html-webpack": "7.0.0-beta.6",
|
||||
"@types/node": "^16.0.0",
|
||||
"global": "^4.4.0"
|
||||
},
|
||||
@ -66,7 +66,7 @@
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
"node": ">=16.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
@ -78,5 +78,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -12,13 +12,18 @@
|
||||
- [Next.js's Image Component](#nextjss-image-component)
|
||||
- [Local Images](#local-images)
|
||||
- [Remote Images](#remote-images)
|
||||
- [Optimization](#optimization)
|
||||
- [AVIF](#avif)
|
||||
- [Next.js Routing](#nextjs-routing)
|
||||
- [Overriding defaults](#overriding-defaults)
|
||||
- [Global Defaults](#global-defaults)
|
||||
- [Default Router](#default-router)
|
||||
- [Actions Integration Caveats](#actions-integration-caveats)
|
||||
- [Next.js Navigation](#nextjs-navigation)
|
||||
- [Set `nextjs.appDirectory` to `true`](#set-nextjsappdirectory-to-true)
|
||||
- [Overriding defaults](#overriding-defaults-1)
|
||||
- [Global Defaults](#global-defaults-1)
|
||||
- [Default Navigation Context](#default-navigation-context)
|
||||
- [Actions Integration Caveats](#actions-integration-caveats-1)
|
||||
- [Sass/Scss](#sassscss)
|
||||
- [Css/Sass/Scss Modules](#csssassscss-modules)
|
||||
- [Styled JSX](#styled-jsx)
|
||||
@ -29,16 +34,18 @@
|
||||
- [Typescript](#typescript)
|
||||
- [Notes for Yarn v2 and v3 users](#notes-for-yarn-v2-and-v3-users)
|
||||
- [FAQ](#faq)
|
||||
- [Stories for pages](#stories-for-pages)
|
||||
- [Stories for pages/components which fetch data](#stories-for-pagescomponents-which-fetch-data)
|
||||
- [Statically imported images won't load](#statically-imported-images-wont-load)
|
||||
- [Module not found: Error: Can't resolve [package name]](#module-not-found-error-cant-resolve-package-name)
|
||||
- [Module not found: Error: Can't resolve \[package name\]](#module-not-found-error-cant-resolve-package-name)
|
||||
- [Acknowledgements](#acknowledgements)
|
||||
|
||||
## Supported Features
|
||||
|
||||
👉 [Next.js's Image Component](#nextjss-image-component)
|
||||
|
||||
👉 [Next.js Routing](#nextjs-routing)
|
||||
👉 [Next.js Routing (next/router)](#nextjs-routing)
|
||||
|
||||
👉 [Next.js Navigation (next/navigation)](#nextjs-navigation)
|
||||
|
||||
👉 [Sass/Scss](#sassscss)
|
||||
|
||||
@ -58,7 +65,7 @@
|
||||
|
||||
## Requirements
|
||||
|
||||
- [Next.js](https://nextjs.org/) >= 9.x
|
||||
- [Next.js](https://nextjs.org/) >= 12.x
|
||||
- [Storybook](https://storybook.js.org/) >= 7.x
|
||||
|
||||
## Getting Started
|
||||
@ -68,29 +75,52 @@
|
||||
Follow the prompts after running this command in your Next.js project's root directory:
|
||||
|
||||
```bash
|
||||
npx storybook init
|
||||
npx storybook@next init
|
||||
```
|
||||
|
||||
[More on getting started with Storybook](https://storybook.js.org/docs/react/get-started/introduction)
|
||||
[More on getting started with Storybook](https://storybook.js.org/docs/react/get-started/install)
|
||||
|
||||
### In a project with Storybook
|
||||
|
||||
Update your `main.js` to look something like this:
|
||||
This framework is designed to work with Storybook 7. If you’re not already using v7, upgrade with this command:
|
||||
|
||||
```bash
|
||||
npx storybook@next upgrade --prerelease
|
||||
```
|
||||
|
||||
Install the framework:
|
||||
|
||||
```bash
|
||||
yarn install @storybook/nextjs
|
||||
yarn add --dev @storybook/nextjs@next
|
||||
```
|
||||
|
||||
Update your `main.js` to change the framework property:
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
module.exports = {
|
||||
// ...
|
||||
framework: {
|
||||
name: '@storybook/nextjs',
|
||||
options: {};
|
||||
}
|
||||
}
|
||||
// name: '@storybook/react-webpack5', // Remove this
|
||||
name: '@storybook/nextjs', // Add this
|
||||
options: {},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
If you were using Storybook plugins to integrate with Next.js, those are no longer necessary when using this framework and can be removed:
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
module.exports = {
|
||||
// ...
|
||||
addons: [
|
||||
// ...
|
||||
// These can both be removed
|
||||
// 'storybook-addon-next',
|
||||
// 'storybook-addon-next-router',
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
## Documentation
|
||||
@ -106,14 +136,13 @@ For example:
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
// other config ommited for brevity
|
||||
// ...
|
||||
framework: {
|
||||
name: '@storybook/nextjs',
|
||||
options: {
|
||||
nextConfigPath: path.resolve(__dirname, '../next.config.js'),
|
||||
},
|
||||
},
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
@ -167,25 +196,19 @@ export default function Home() {
|
||||
}
|
||||
```
|
||||
|
||||
#### Optimization
|
||||
|
||||
All Next.js `Image`s are automatically [unoptimized](https://nextjs.org/docs/api-reference/next/image#unoptimized) for you.
|
||||
|
||||
If [placeholder="blur"](https://nextjs.org/docs/api-reference/next/image#placeholder) is used, the [blurDataURL](https://nextjs.org/docs/api-reference/next/image#blurdataurl) used is the [src](https://nextjs.org/docs/api-reference/next/image#src) of the image (thus effectively disabling the placeholder).
|
||||
|
||||
See [this issue](https://github.com/vercel/next.js/issues/18393) for more discussion on how Next.js `Image`s are handled for Storybook.
|
||||
|
||||
#### AVIF
|
||||
|
||||
This format is not supported by this framework yet. Feel free to [open up an issue](https://github.com/storybookjs/storybook/issues) if this is something you want to see.
|
||||
|
||||
### Next.js Routing
|
||||
|
||||
[Next.js's router](https://nextjs.org/docs/routing/introduction) is automatically stubbed for you so that when the router is interacted with, all of its interactions are automatically logged to the [Storybook actions tab](https://storybook.js.org/docs/react/essentials/actions) if you have the actions addon.
|
||||
[Next.js's router](https://nextjs.org/docs/routing/introduction) is automatically stubbed for you so that when the router is interacted with, all of its interactions are automatically logged to the Actions ctions panel if you have the [Storybook actions addon](https://storybook.js.org/docs/react/essentials/actions).
|
||||
|
||||
> When using Next.js 13+, you should only use `next/router` in the `pages` directory. In the `app` directory, it is necessary to use `next/navigation`.
|
||||
|
||||
#### Overriding defaults
|
||||
|
||||
Per-story overrides can be done by adding a `nextRouter` property onto the story [parameters](https://storybook.js.org/docs/react/writing-stories/parameters). The framework will shallowly merge whatever you put here into the router.
|
||||
Per-story overrides can be done by adding a `nextjs.router` property onto the story [parameters](https://storybook.js.org/docs/react/writing-stories/parameters). The framework will shallowly merge whatever you put here into the router.
|
||||
|
||||
```js
|
||||
// SomeComponentThatUsesTheRouter.stories.js
|
||||
@ -195,15 +218,17 @@ export default {
|
||||
component: SomeComponentThatUsesTheRouter,
|
||||
};
|
||||
|
||||
// if you have the actions addon
|
||||
// you can click the links and see the route change events there
|
||||
// If you have the actions addon,
|
||||
// you can interact with the links and see the route change events there
|
||||
export const Example = {
|
||||
parameters: {
|
||||
nextRouter: {
|
||||
path: '/profile/[id]',
|
||||
asPath: '/profile/ryanclementshax',
|
||||
query: {
|
||||
id: 'ryanclementshax',
|
||||
nextjs: {
|
||||
router: {
|
||||
path: '/profile/[id]',
|
||||
asPath: '/profile/1',
|
||||
query: {
|
||||
id: '1',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -215,13 +240,15 @@ export const Example = {
|
||||
Global defaults can be set in [preview.js](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering) and will be shallowly merged with the default router.
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
// .storybook/preview.js
|
||||
|
||||
export const parameters = {
|
||||
nextRouter: {
|
||||
path: '/some-default-path',
|
||||
asPath: '/some-default-path',
|
||||
query: {},
|
||||
nextjs: {
|
||||
router: {
|
||||
path: '/some-default-path',
|
||||
asPath: '/some-default-path',
|
||||
query: {},
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -232,58 +259,68 @@ The default values on the stubbed router are as follows (see [globals](https://s
|
||||
|
||||
```ts
|
||||
const defaultRouter = {
|
||||
locale: context?.globals?.locale,
|
||||
route: '/',
|
||||
pathname: '/',
|
||||
query: {},
|
||||
asPath: '/',
|
||||
push(...args: unknown[]) {
|
||||
push(...args) {
|
||||
action('nextRouter.push')(...args);
|
||||
return Promise.resolve(true);
|
||||
},
|
||||
replace(...args: unknown[]) {
|
||||
replace(...args) {
|
||||
action('nextRouter.replace')(...args);
|
||||
return Promise.resolve(true);
|
||||
},
|
||||
reload(...args: unknown[]) {
|
||||
reload(...args) {
|
||||
action('nextRouter.reload')(...args);
|
||||
},
|
||||
back(...args: unknown[]) {
|
||||
back(...args) {
|
||||
action('nextRouter.back')(...args);
|
||||
},
|
||||
prefetch(...args: unknown[]) {
|
||||
forward() {
|
||||
action('nextRouter.forward')();
|
||||
},
|
||||
prefetch(...args) {
|
||||
action('nextRouter.prefetch')(...args);
|
||||
return Promise.resolve();
|
||||
},
|
||||
beforePopState(...args: unknown[]) {
|
||||
beforePopState(...args) {
|
||||
action('nextRouter.beforePopState')(...args);
|
||||
},
|
||||
events: {
|
||||
on(...args: unknown[]) {
|
||||
on(...args) {
|
||||
action('nextRouter.events.on')(...args);
|
||||
},
|
||||
off(...args: unknown[]) {
|
||||
off(...args) {
|
||||
action('nextRouter.events.off')(...args);
|
||||
},
|
||||
emit(...args: unknown[]) {
|
||||
emit(...args) {
|
||||
action('nextRouter.events.emit')(...args);
|
||||
},
|
||||
},
|
||||
// The locale should be configured [globally](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#globals)
|
||||
locale: globals?.locale,
|
||||
asPath: '/',
|
||||
basePath: '/',
|
||||
isFallback: false,
|
||||
isLocaleDomain: false,
|
||||
isReady: true,
|
||||
isPreview: false,
|
||||
route: '/',
|
||||
pathname: '/',
|
||||
query: {},
|
||||
};
|
||||
```
|
||||
|
||||
#### Actions Integration Caveats
|
||||
|
||||
If you override a function, you lose the automatic action tab integration and have to build it out yourself.
|
||||
If you override a function, you lose the automatic actions integration and have to build it out yourself.
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
// .storybook/preview.js
|
||||
|
||||
export const parameters = {
|
||||
nextRouter: {
|
||||
push() {
|
||||
// The default implementation that logs the action into the action tab is lost
|
||||
nextjs: {
|
||||
router: {
|
||||
push() {
|
||||
// The default implementation that logs the action into the Actions panel is lost
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -292,17 +329,174 @@ export const parameters = {
|
||||
Doing this yourself looks something like this (make sure you install the `@storybook/addon-actions` package):
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
// .storybook/preview.js
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
export const parameters = {
|
||||
nextRouter: {
|
||||
push(...args) {
|
||||
// custom logic can go here
|
||||
// this logs to the actions tab
|
||||
action('nextRouter.push')(...args);
|
||||
// return whatever you want here
|
||||
return Promise.resolve(true);
|
||||
nextjs: {
|
||||
router: {
|
||||
push(...args) {
|
||||
// Custom logic can go here
|
||||
// This logs to the Actions panel
|
||||
action('nextRouter.push')(...args);
|
||||
// Return whatever you want here
|
||||
return Promise.resolve(true);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Next.js Navigation
|
||||
|
||||
> Please note that [next/navigation](https://beta.nextjs.org/docs/upgrade-guide#step-5-migrating-routing-hooks) can only be used in components/pages in the `app` directory of Next.js 13+.
|
||||
|
||||
#### Set `nextjs.appDirectory` to `true`
|
||||
|
||||
If your story imports components that use `next/navigation`, you need to set the parameter `nextjs.appDirectory` to `true` in your Story:
|
||||
|
||||
```js
|
||||
// SomeComponentThatUsesTheRouter.stories.js
|
||||
import SomeComponentThatUsesTheNavigation from './SomeComponentThatUsesTheNavigation';
|
||||
|
||||
export default {
|
||||
component: SomeComponentThatUsesTheNavigation,
|
||||
};
|
||||
|
||||
export const Example = {
|
||||
parameters: {
|
||||
nextjs: {
|
||||
appDirectory: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
```
|
||||
|
||||
If your Next.js project uses the `app` directory for every page (in other words, it does not have a `pages` directory), you can set the parameter `nextjs.appDirectory` to `true` in the [preview.js](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering) file to apply it to all stories.
|
||||
|
||||
```js
|
||||
// .storybook/preview.js
|
||||
|
||||
export const parameters = {
|
||||
nextjs: {
|
||||
appDirectory: true,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
The parameter `nextjs.appDirectory` defaults to `false` if not set.
|
||||
|
||||
#### Overriding defaults
|
||||
|
||||
Per-story overrides can be done by adding a `nextjs.navigation` property onto the story [parameters](https://storybook.js.org/docs/react/writing-stories/parameters). The framework will shallowly merge whatever you put here into the router.
|
||||
|
||||
```js
|
||||
// SomeComponentThatUsesTheNavigation.stories.js
|
||||
import SomeComponentThatUsesTheNavigation from './SomeComponentThatUsesTheNavigation';
|
||||
|
||||
export default {
|
||||
component: SomeComponentThatUsesTheNavigation,
|
||||
};
|
||||
|
||||
// If you have the actions addon,
|
||||
// you can interact with the links and see the route change events there
|
||||
export const Example = {
|
||||
parameters: {
|
||||
nextjs: {
|
||||
appDirectory: true,
|
||||
navigation: {
|
||||
pathname: '/profile',
|
||||
query: {
|
||||
user: '1',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### Global Defaults
|
||||
|
||||
Global defaults can be set in [preview.js](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering) and will be shallowly merged with the default router.
|
||||
|
||||
```js
|
||||
// .storybook/preview.js
|
||||
|
||||
export const parameters = {
|
||||
nextjs: {
|
||||
appDirectory: true,
|
||||
navigation: {
|
||||
pathname: '/some-default-path',
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### Default Navigation Context
|
||||
|
||||
The default values on the stubbed navigation context are as follows:
|
||||
|
||||
```ts
|
||||
const defaultNavigationContext = {
|
||||
push(...args) {
|
||||
action('nextNavigation.push')(...args);
|
||||
},
|
||||
replace(...args) {
|
||||
action('nextNavigation.replace')(...args);
|
||||
},
|
||||
forward(...args) {
|
||||
action('nextNavigation.forward')(...args);
|
||||
},
|
||||
back(...args) {
|
||||
action('nextNavigation.back')(...args);
|
||||
},
|
||||
prefetch(...args) {
|
||||
action('nextNavigation.prefetch')(...args);
|
||||
},
|
||||
refresh: () => {
|
||||
action('nextNavigation.refresh')();
|
||||
},
|
||||
pathname: '/',
|
||||
query: {},
|
||||
};
|
||||
```
|
||||
|
||||
#### Actions Integration Caveats
|
||||
|
||||
If you override a function, you lose the automatic action tab integration and have to build it out yourself.
|
||||
|
||||
```js
|
||||
// .storybook/preview.js
|
||||
|
||||
export const parameters = {
|
||||
nextjs: {
|
||||
appDirectory: true,
|
||||
navigation: {
|
||||
push() {
|
||||
// The default implementation that logs the action into the Actions panel is lost
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Doing this yourself looks something like this (make sure you install the `@storybook/addon-actions` package):
|
||||
|
||||
```js
|
||||
// .storybook/preview.js
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
export const parameters = {
|
||||
nextjs: {
|
||||
appDirectory: true,
|
||||
navigation: {
|
||||
push(...args) {
|
||||
// Custom logic can go here
|
||||
// This logs to the Actions panel
|
||||
action('nextNavigation.push')(...args);
|
||||
// Return whatever you want here
|
||||
return Promise.resolve(true);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -323,7 +517,7 @@ This will automatically include any of your [custom sass configurations](https:/
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
// any options here are included in sass compilation for your stories
|
||||
// Any options here are included in Sass compilation for your stories
|
||||
sassOptions: {
|
||||
includePaths: [path.join(__dirname, 'styles')],
|
||||
},
|
||||
@ -335,7 +529,7 @@ module.exports = {
|
||||
[css modules](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css) work as expected.
|
||||
|
||||
```js
|
||||
// this import works just fine in Storybook now
|
||||
// This import works just fine in Storybook now
|
||||
import styles from './Button.module.css';
|
||||
// sass/scss is also supported
|
||||
// import styles from './Button.module.scss'
|
||||
@ -404,14 +598,6 @@ You can use your own babel config too. This is an example of how you can customi
|
||||
}
|
||||
```
|
||||
|
||||
If you use a monorepo, you may need to add the babel config yourself to your storybook project. Just add a babel config to your storybook project with the following contents to get started.
|
||||
|
||||
```json
|
||||
{
|
||||
"presets": ["next/babel"]
|
||||
}
|
||||
```
|
||||
|
||||
### Postcss
|
||||
|
||||
Next.js lets you [customize postcss config](https://nextjs.org/docs/advanced-features/customizing-postcss-config#default-behavior). Thus this framework will automatically handle your postcss config for you.
|
||||
@ -438,10 +624,11 @@ export default function HomePage() {
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
// preview.js
|
||||
Also OK for global styles in `preview.js`!
|
||||
|
||||
```js
|
||||
// .storybook/preview.js
|
||||
|
||||
// Also ok in preview.js!
|
||||
import 'styles/globals.scss';
|
||||
|
||||
// ...
|
||||
@ -494,14 +681,14 @@ Below is an example of how to add svgr support to Storybook with this framework.
|
||||
```js
|
||||
// .storybook/main.js
|
||||
module.exports = {
|
||||
// other config omitted for brevity
|
||||
// ...
|
||||
webpackFinal: async (config) => {
|
||||
// this modifies the existing image rule to exclude .svg files
|
||||
// This modifies the existing image rule to exclude .svg files
|
||||
// since you want to handle those files with @svgr/webpack
|
||||
const imageRule = config.module.rules.find((rule) => rule.test.test('.svg'));
|
||||
imageRule.exclude = /\.svg$/;
|
||||
|
||||
// configure .svg files to be loaded with @svgr/webpack
|
||||
// Configure .svg files to be loaded with @svgr/webpack
|
||||
config.module.rules.push({
|
||||
test: /\.svg$/,
|
||||
use: ['@svgr/webpack'],
|
||||
@ -538,9 +725,9 @@ This is because those versions of Yarn have different package resolution rules t
|
||||
|
||||
### FAQ
|
||||
|
||||
#### Stories for pages
|
||||
#### Stories for pages/components which fetch data
|
||||
|
||||
Next.js page files can contain imports to modules meant to run in a node environment (for use in data fetching functions). If you import from a Next.js page file containing those node module imports in your stories, your Storybook's Webpack will crash because those modules will not run in a browser. To get around this, you can extract the component in your page file into a separate file and import that component in your stories. Or, if that's not feasible for some reason, you can [polyfill those modules](https://webpack.js.org/configuration/node/) in your Storybook's [`webpackFinal` configuration](https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config).
|
||||
Next.js page files can contain imports to modules meant to run in a node environment (for use in data fetching functions). If you import from a Next.js page file containing those node module imports in your stories, your Storybook's Webpack will crash because those modules will not run in a browser. To get around this, you can extract the component in your page file into a separate file and import that pure component in your stories. Or, if that's not feasible for some reason, you can [polyfill those modules](https://webpack.js.org/configuration/node/) in your Storybook's [`webpackFinal` configuration](https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config).
|
||||
|
||||
**Before**
|
||||
|
||||
@ -548,9 +735,10 @@ Next.js page files can contain imports to modules meant to run in a node environ
|
||||
// ./pages/my-page.jsx
|
||||
import fs from 'fs';
|
||||
|
||||
export default MyPage = (props) => (
|
||||
// ...
|
||||
);
|
||||
// Using this component in your stories will break the Storybook build
|
||||
export default function Page(props) {
|
||||
return; // ...
|
||||
}
|
||||
|
||||
export const getStaticProps = async () => {
|
||||
// Logic that uses `fs`
|
||||
@ -563,15 +751,57 @@ export const getStaticProps = async () => {
|
||||
// ./pages/my-page.jsx
|
||||
import fs from 'fs';
|
||||
|
||||
// Use this pure component in your stories instead
|
||||
import MyPage from 'components/MyPage';
|
||||
|
||||
export default MyPage;
|
||||
export default function Page(props) {
|
||||
return <MyPage {...props} />;
|
||||
}
|
||||
|
||||
export const getStaticProps = async () => {
|
||||
// Logic that uses `fs`
|
||||
};
|
||||
```
|
||||
|
||||
Starting with Next.js 13, you can also fetch data directly within server components in the `app` directory. This does not (currently) work within Storybook for similar reasons as above. It can be worked around similarly as well, by extracting a pure component to a separate file and importing that component in your stories.
|
||||
|
||||
**Before**
|
||||
|
||||
```jsx
|
||||
// ./app/my-page/index.jsx
|
||||
async function getData() {
|
||||
const res = await fetch(...);
|
||||
// ...
|
||||
}
|
||||
|
||||
// Using this component in your stories will break the Storybook build
|
||||
export default async function Page() {
|
||||
const data = await getData();
|
||||
|
||||
return // ...
|
||||
}
|
||||
```
|
||||
|
||||
**After**
|
||||
|
||||
```jsx
|
||||
// ./app/my-page/index.jsx
|
||||
|
||||
// Use this component in your stories
|
||||
import MyPage from './components/MyPage';
|
||||
|
||||
async function getData() {
|
||||
const res = await fetch(...);
|
||||
// ...
|
||||
}
|
||||
|
||||
export default async function Page() {
|
||||
const data = await getData();
|
||||
|
||||
return <MyPage {...data} />;
|
||||
}
|
||||
```
|
||||
|
||||
#### Statically imported images won't load
|
||||
|
||||
Make sure you are treating image imports the same way you treat them when using `next/image` in normal development.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/nextjs",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook for Next.js",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -59,12 +59,12 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.60",
|
||||
"@storybook/core-common": "7.0.0-alpha.60",
|
||||
"@storybook/node-logger": "7.0.0-alpha.60",
|
||||
"@storybook/preset-react-webpack": "7.0.0-alpha.60",
|
||||
"@storybook/preview-api": "7.0.0-alpha.60",
|
||||
"@storybook/react": "7.0.0-alpha.60",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.6",
|
||||
"@storybook/core-common": "7.0.0-beta.6",
|
||||
"@storybook/node-logger": "7.0.0-beta.6",
|
||||
"@storybook/preset-react-webpack": "7.0.0-beta.6",
|
||||
"@storybook/preview-api": "7.0.0-beta.6",
|
||||
"@storybook/react": "7.0.0-beta.6",
|
||||
"@types/node": "^16.0.0",
|
||||
"find-up": "^5.0.0",
|
||||
"fs-extra": "^9.0.1",
|
||||
@ -80,7 +80,7 @@
|
||||
"tsconfig-paths-webpack-plugin": "^3.5.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "7.0.0-alpha.60",
|
||||
"@storybook/addon-actions": "7.0.0-beta.6",
|
||||
"next": "^13.0.5",
|
||||
"typescript": "^4.9.3",
|
||||
"webpack": "^5.65.0"
|
||||
@ -105,7 +105,7 @@
|
||||
}
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
"node": ">=16.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
@ -119,5 +119,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -34,21 +34,22 @@ const setupRuntimeConfig = (baseConfig: WebpackConfig, nextConfig: NextConfig):
|
||||
}),
|
||||
};
|
||||
|
||||
const newNextLinkBehavior = nextConfig.experimental?.newNextLinkBehavior;
|
||||
|
||||
/**
|
||||
* In Next12.2, the `newNextLinkBehavior` option was introduced, defaulted to
|
||||
* falsy in the Next app (`undefined` in the config itself), and `next/link`
|
||||
* was engineered to opt *in* to it
|
||||
*
|
||||
* In Next13, the `newNextLinkBehavior` option now defaults to truthy (still
|
||||
* In Next 13.0.0 - 13.0.5, the `newNextLinkBehavior` option now defaults to truthy (still
|
||||
* `undefined` in the config), and `next/link` was engineered to opt *out*
|
||||
* of it
|
||||
*
|
||||
*/
|
||||
const newNextLinkBehavior = nextConfig.experimental?.newNextLinkBehavior;
|
||||
if (
|
||||
(semver.gte(version, '13.0.0') && newNextLinkBehavior !== false) ||
|
||||
(semver.gte(version, '12.2.0') && newNextLinkBehavior)
|
||||
semver.gte(version, '13.0.0') &&
|
||||
semver.lt(version, '13.0.6') &&
|
||||
newNextLinkBehavior !== false
|
||||
) {
|
||||
definePluginConfig['process.env.__NEXT_NEW_LINK_BEHAVIOR'] = true;
|
||||
} else {
|
||||
definePluginConfig['process.env.__NEXT_NEW_LINK_BEHAVIOR'] = newNextLinkBehavior;
|
||||
}
|
||||
|
||||
baseConfig.plugins?.push(new DefinePlugin(definePluginConfig));
|
||||
|
||||
@ -8,6 +8,8 @@ export function configureNextImport(baseConfig: WebpackConfig) {
|
||||
|
||||
const isNext12 = semver.satisfies(nextJSVersion, '~12');
|
||||
const isNext13 = semver.satisfies(nextJSVersion, '~13');
|
||||
const isNextVersionSmallerThan12dot2 = semver.lt(nextJSVersion, '12.2.0');
|
||||
const isNextVersionSmallerThan13 = semver.lt(nextJSVersion, '13.0.0');
|
||||
|
||||
baseConfig.plugins = baseConfig.plugins ?? [];
|
||||
|
||||
@ -19,11 +21,27 @@ export function configureNextImport(baseConfig: WebpackConfig) {
|
||||
);
|
||||
}
|
||||
|
||||
if (!isNext12) {
|
||||
if (!isNext12 || isNextVersionSmallerThan12dot2) {
|
||||
baseConfig.plugins.push(
|
||||
new IgnorePlugin({
|
||||
resourceRegExp: /next\/future\/image$/,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
if (isNextVersionSmallerThan13) {
|
||||
baseConfig.plugins.push(
|
||||
new IgnorePlugin({
|
||||
resourceRegExp: /next\/dist\/shared\/lib\/hooks-client-context$/,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
if (isNextVersionSmallerThan12dot2) {
|
||||
baseConfig.plugins.push(
|
||||
new IgnorePlugin({
|
||||
resourceRegExp: /next\/dist\/shared\/lib\/app-router-context$/,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
44
code/frameworks/nextjs/src/routing/app-router-provider.tsx
Normal file
44
code/frameworks/nextjs/src/routing/app-router-provider.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
import React from 'react';
|
||||
import { AppRouterContext } from 'next/dist/shared/lib/app-router-context';
|
||||
import { PathnameContext, SearchParamsContext } from 'next/dist/shared/lib/hooks-client-context';
|
||||
import type { RouteParams } from './types';
|
||||
|
||||
type AppRouterProviderProps = {
|
||||
action: (name: string) => (...args: any[]) => void;
|
||||
routeParams: RouteParams;
|
||||
};
|
||||
|
||||
const AppRouterProvider: React.FC<AppRouterProviderProps> = ({ children, action, routeParams }) => {
|
||||
const { pathname, query, ...restRouteParams } = routeParams;
|
||||
return (
|
||||
<AppRouterContext.Provider
|
||||
value={{
|
||||
push(...args) {
|
||||
action('nextNavigation.push')(...args);
|
||||
},
|
||||
replace(...args) {
|
||||
action('nextNavigation.replace')(...args);
|
||||
},
|
||||
forward(...args) {
|
||||
action('nextNavigation.forward')(...args);
|
||||
},
|
||||
back(...args) {
|
||||
action('nextNavigation.back')(...args);
|
||||
},
|
||||
prefetch(...args) {
|
||||
action('nextNavigation.prefetch')(...args);
|
||||
},
|
||||
refresh: () => {
|
||||
action('nextNavigation.refresh')();
|
||||
},
|
||||
...restRouteParams,
|
||||
}}
|
||||
>
|
||||
<SearchParamsContext.Provider value={new URLSearchParams(query)}>
|
||||
<PathnameContext.Provider value={pathname}>{children}</PathnameContext.Provider>
|
||||
</SearchParamsContext.Provider>
|
||||
</AppRouterContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppRouterProvider;
|
||||
@ -2,8 +2,17 @@ import * as React from 'react';
|
||||
// this will be aliased by webpack at runtime (this is just for typing)
|
||||
import type { action as originalAction } from '@storybook/addon-actions';
|
||||
import type { Addon_StoryContext } from '@storybook/types';
|
||||
import { RouterContext } from 'next/dist/shared/lib/router-context';
|
||||
import Router from 'next/router';
|
||||
|
||||
import PageRouterProvider from './page-router-provider';
|
||||
import type { RouteParams, NextAppDirectory } from './types';
|
||||
|
||||
/**
|
||||
* Dynamic import necessary because otherwise
|
||||
* older versions of Next.js will throw an error
|
||||
* because some imports in './app-router-provider' only exists
|
||||
* in Next.js > v13
|
||||
*/
|
||||
const AppRouterProvider = React.lazy(() => import('./app-router-provider'));
|
||||
|
||||
let action: typeof originalAction;
|
||||
|
||||
@ -13,61 +22,42 @@ try {
|
||||
action = () => () => {};
|
||||
}
|
||||
|
||||
const defaultRouter = {
|
||||
route: '/',
|
||||
const defaultRouterParams: RouteParams = {
|
||||
pathname: '/',
|
||||
query: {},
|
||||
asPath: '/',
|
||||
push(...args: unknown[]): Promise<boolean> {
|
||||
action('nextRouter.push')(...args);
|
||||
return Promise.resolve(true);
|
||||
},
|
||||
replace(...args: unknown[]): Promise<boolean> {
|
||||
action('nextRouter.replace')(...args);
|
||||
return Promise.resolve(true);
|
||||
},
|
||||
reload(...args: unknown[]): void {
|
||||
action('nextRouter.reload')(...args);
|
||||
},
|
||||
back(...args: unknown[]): void {
|
||||
action('nextRouter.back')(...args);
|
||||
},
|
||||
prefetch(...args: unknown[]): Promise<void> {
|
||||
action('nextRouter.prefetch')(...args);
|
||||
return Promise.resolve();
|
||||
},
|
||||
beforePopState(...args: unknown[]): void {
|
||||
action('nextRouter.beforePopState')(...args);
|
||||
},
|
||||
events: {
|
||||
on(...args: unknown[]): void {
|
||||
action('nextRouter.events.on')(...args);
|
||||
},
|
||||
off(...args: unknown[]): void {
|
||||
action('nextRouter.events.off')(...args);
|
||||
},
|
||||
emit(...args: unknown[]): void {
|
||||
action('nextRouter.events.emit')(...args);
|
||||
},
|
||||
},
|
||||
isFallback: false,
|
||||
};
|
||||
|
||||
export const RouterDecorator = (
|
||||
Story: React.FC,
|
||||
{ globals, parameters }: Addon_StoryContext
|
||||
): React.ReactNode => {
|
||||
const nextRouterParams = parameters.nextRouter ?? {};
|
||||
const nextAppDirectory =
|
||||
(parameters.nextjs?.appDirectory as NextAppDirectory | undefined) ?? false;
|
||||
|
||||
Router.router = {
|
||||
...defaultRouter,
|
||||
locale: globals?.locale,
|
||||
...nextRouterParams,
|
||||
} as NonNullable<typeof Router.router>;
|
||||
if (nextAppDirectory) {
|
||||
return (
|
||||
<AppRouterProvider
|
||||
action={action}
|
||||
routeParams={{
|
||||
...defaultRouterParams,
|
||||
...parameters.nextjs?.navigation,
|
||||
}}
|
||||
>
|
||||
<Story />
|
||||
</AppRouterProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<RouterContext.Provider value={Router.router as any}>
|
||||
<PageRouterProvider
|
||||
action={action}
|
||||
globals={globals}
|
||||
routeParams={{
|
||||
...defaultRouterParams,
|
||||
...parameters.nextjs?.router,
|
||||
}}
|
||||
>
|
||||
<Story />
|
||||
</RouterContext.Provider>
|
||||
</PageRouterProvider>
|
||||
);
|
||||
};
|
||||
|
||||
70
code/frameworks/nextjs/src/routing/page-router-provider.tsx
Normal file
70
code/frameworks/nextjs/src/routing/page-router-provider.tsx
Normal file
@ -0,0 +1,70 @@
|
||||
import type { Globals } from '@storybook/csf';
|
||||
import { RouterContext } from 'next/dist/shared/lib/router-context';
|
||||
import React from 'react';
|
||||
import type { RouteParams } from './types';
|
||||
|
||||
type PageRouterProviderProps = {
|
||||
action: (name: string) => (...args: any[]) => void;
|
||||
routeParams: RouteParams;
|
||||
globals: Globals;
|
||||
};
|
||||
|
||||
const PageRouterProvider: React.FC<PageRouterProviderProps> = ({
|
||||
children,
|
||||
action,
|
||||
routeParams,
|
||||
globals,
|
||||
}) => (
|
||||
<RouterContext.Provider
|
||||
value={{
|
||||
push(...args) {
|
||||
action('nextRouter.push')(...args);
|
||||
return Promise.resolve(true);
|
||||
},
|
||||
replace(...args) {
|
||||
action('nextRouter.replace')(...args);
|
||||
return Promise.resolve(true);
|
||||
},
|
||||
reload(...args) {
|
||||
action('nextRouter.reload')(...args);
|
||||
},
|
||||
back(...args) {
|
||||
action('nextRouter.back')(...args);
|
||||
},
|
||||
forward() {
|
||||
action('nextRouter.forward')();
|
||||
},
|
||||
prefetch(...args) {
|
||||
action('nextRouter.prefetch')(...args);
|
||||
return Promise.resolve();
|
||||
},
|
||||
beforePopState(...args) {
|
||||
action('nextRouter.beforePopState')(...args);
|
||||
},
|
||||
events: {
|
||||
on(...args) {
|
||||
action('nextRouter.events.on')(...args);
|
||||
},
|
||||
off(...args) {
|
||||
action('nextRouter.events.off')(...args);
|
||||
},
|
||||
emit(...args) {
|
||||
action('nextRouter.events.emit')(...args);
|
||||
},
|
||||
},
|
||||
locale: globals?.locale,
|
||||
route: '/',
|
||||
asPath: '/',
|
||||
basePath: '/',
|
||||
isFallback: false,
|
||||
isLocaleDomain: false,
|
||||
isReady: true,
|
||||
isPreview: false,
|
||||
...routeParams,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</RouterContext.Provider>
|
||||
);
|
||||
|
||||
export default PageRouterProvider;
|
||||
7
code/frameworks/nextjs/src/routing/types.tsx
Normal file
7
code/frameworks/nextjs/src/routing/types.tsx
Normal file
@ -0,0 +1,7 @@
|
||||
export type RouteParams = {
|
||||
pathname: string;
|
||||
query: Record<string, string>;
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
export type NextAppDirectory = boolean;
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta } from '@storybook/addon-docs';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import Image from 'next/image';
|
||||
|
||||
import Code from './assets/code-brackets.svg';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta } from '@storybook/addon-docs';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import Image from 'next/image';
|
||||
|
||||
import Code from './assets/code-brackets.svg';
|
||||
|
||||
@ -0,0 +1,20 @@
|
||||
import dynamic from 'next/dynamic';
|
||||
import React, { Suspense } from 'react';
|
||||
|
||||
const DynamicComponent = dynamic(() => import('./dynamic-component'), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
function Component() {
|
||||
return (
|
||||
<Suspense fallback="Loading...">
|
||||
<DynamicComponent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
export default {
|
||||
component: Component,
|
||||
};
|
||||
|
||||
export const Default = {};
|
||||
@ -0,0 +1,5 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function DynamicComponent() {
|
||||
return <div>I am a dynamically loaded component</div>;
|
||||
}
|
||||
@ -0,0 +1,82 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
import style from './Link.stories.module.css';
|
||||
|
||||
// `onClick`, `href`, and `ref` need to be passed to the DOM element
|
||||
// for proper handling
|
||||
const MyButton = React.forwardRef(function Button({ onClick, href, children }, ref) {
|
||||
return (
|
||||
<a href={href} onClick={onClick} ref={ref}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
});
|
||||
|
||||
const Component = () => (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Normal Link</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href={{
|
||||
pathname: '/with-url-object',
|
||||
query: { name: 'test' },
|
||||
}}
|
||||
>
|
||||
With URL Object
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/replace-url" replace>
|
||||
Replace the URL instead of push
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/legacy-behaviour" legacyBehavior>
|
||||
<a>Legacy behavior</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/child-is-functional-component" passHref legacyBehavior>
|
||||
<MyButton>child is a functional component</MyButton>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/#hashid" scroll={false}>
|
||||
Disables scrolling to the top
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/no-prefetch" prefetch={false}>
|
||||
No Prefetching
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link style={{ color: 'red' }} href="/with-style">
|
||||
With style
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className={style.link} href="/with-classname">
|
||||
With className
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
|
||||
export default {
|
||||
component: Component,
|
||||
};
|
||||
|
||||
export const Default = {};
|
||||
|
||||
export const InAppDir = {
|
||||
parameters: {
|
||||
nextjs: {
|
||||
appDirectory: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,3 @@
|
||||
.link {
|
||||
color: green;
|
||||
}
|
||||
@ -0,0 +1,77 @@
|
||||
import { useRouter, usePathname, useSearchParams } from 'next/navigation';
|
||||
import React from 'react';
|
||||
|
||||
function Component() {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const searchParamsList = Array.from(searchParams.entries());
|
||||
|
||||
const routerActions = [
|
||||
{
|
||||
cb: () => router.back(),
|
||||
name: 'Go back',
|
||||
},
|
||||
{
|
||||
cb: () => router.forward(),
|
||||
name: 'Go forward',
|
||||
},
|
||||
{
|
||||
cb: () => router.prefetch('/prefetched-html'),
|
||||
name: 'Prefetch',
|
||||
},
|
||||
{
|
||||
cb: () => router.push('/push-html', { forceOptimisticNavigation: true }),
|
||||
name: 'Push HTML',
|
||||
},
|
||||
{
|
||||
cb: () => router.refresh(),
|
||||
name: 'Refresh',
|
||||
},
|
||||
{
|
||||
cb: () => router.replace('/replaced-html', { forceOptimisticNavigation: true }),
|
||||
name: 'Replace',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>pathname: {pathname}</div>
|
||||
<div>
|
||||
searchparams:{' '}
|
||||
<ul>
|
||||
{searchParamsList.map(([key, value]) => (
|
||||
<li key={key}>
|
||||
{key}: {value}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{routerActions.map(({ cb, name }) => (
|
||||
<div key={name} style={{ marginBottom: '1em' }}>
|
||||
<button type="button" onClick={cb}>
|
||||
{name}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default {
|
||||
component: Component,
|
||||
parameters: {
|
||||
nextjs: {
|
||||
appDirectory: true,
|
||||
navigation: {
|
||||
pathname: '/hello',
|
||||
query: {
|
||||
foo: 'bar',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Default = {};
|
||||
@ -0,0 +1,69 @@
|
||||
import { useRouter } from 'next/router';
|
||||
import React from 'react';
|
||||
|
||||
function Component() {
|
||||
const router = useRouter();
|
||||
const searchParams = router.query;
|
||||
|
||||
const routerActions = [
|
||||
{
|
||||
cb: () => router.back(),
|
||||
name: 'Go back',
|
||||
},
|
||||
{
|
||||
cb: () => router.forward(),
|
||||
name: 'Go forward',
|
||||
},
|
||||
{
|
||||
cb: () => router.prefetch('/prefetched-html'),
|
||||
name: 'Prefetch',
|
||||
},
|
||||
{
|
||||
cb: () => router.push('/push-html', { forceOptimisticNavigation: true }),
|
||||
name: 'Push HTML',
|
||||
},
|
||||
{
|
||||
cb: () => router.replace('/replaced-html', { forceOptimisticNavigation: true }),
|
||||
name: 'Replace',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>pathname: {router.pathname}</div>
|
||||
<div>
|
||||
searchparams:{' '}
|
||||
<ul>
|
||||
{Object.entries(searchParams).map(([key, value]) => (
|
||||
<li key={key}>
|
||||
{key}: {value}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{routerActions.map(({ cb, name }) => (
|
||||
<div key={name} style={{ marginBottom: '1em' }}>
|
||||
<button type="button" onClick={cb}>
|
||||
{name}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default {
|
||||
component: Component,
|
||||
parameters: {
|
||||
nextjs: {
|
||||
router: {
|
||||
pathname: '/hello',
|
||||
query: {
|
||||
foo: 'bar',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Default = {};
|
||||
@ -0,0 +1,3 @@
|
||||
.link {
|
||||
color: green;
|
||||
}
|
||||
@ -0,0 +1,85 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import style from './Link.stories.module.css';
|
||||
|
||||
// `onClick`, `href`, and `ref` need to be passed to the DOM element
|
||||
// for proper handling
|
||||
const MyButton = React.forwardRef<
|
||||
HTMLAnchorElement,
|
||||
React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
|
||||
>(function Button({ onClick, href, children }, ref) {
|
||||
return (
|
||||
<a href={href} onClick={onClick} ref={ref}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
});
|
||||
|
||||
const Component = () => (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Normal Link</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href={{
|
||||
pathname: '/with-url-object',
|
||||
query: { name: 'test' },
|
||||
}}
|
||||
>
|
||||
With URL Object
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/replace-url" replace>
|
||||
Replace the URL instead of push
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/legacy-behaviour" legacyBehavior>
|
||||
<a>Legacy behavior</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/child-is-functional-component" passHref legacyBehavior>
|
||||
<MyButton>child is a functional component</MyButton>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/#hashid" scroll={false}>
|
||||
Disables scrolling to the top
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/no-prefetch" prefetch={false}>
|
||||
No Prefetching
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link style={{ color: 'red' }} href="/with-style">
|
||||
With style
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className={style.link} href="/with-classname">
|
||||
With className
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
|
||||
export default {
|
||||
component: Component,
|
||||
} as Meta<typeof Component>;
|
||||
|
||||
export const Default: StoryObj<typeof Component> = {};
|
||||
|
||||
export const InAppDir: StoryObj<typeof Component> = {
|
||||
parameters: {
|
||||
nextjs: {
|
||||
appDirectory: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,78 @@
|
||||
import { useRouter, usePathname, useSearchParams } from 'next/navigation';
|
||||
import React from 'react';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
function Component() {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const searchParamsList = Array.from(searchParams.entries());
|
||||
|
||||
const routerActions = [
|
||||
{
|
||||
cb: () => router.back(),
|
||||
name: 'Go back',
|
||||
},
|
||||
{
|
||||
cb: () => router.forward(),
|
||||
name: 'Go forward',
|
||||
},
|
||||
{
|
||||
cb: () => router.prefetch('/prefetched-html'),
|
||||
name: 'Prefetch',
|
||||
},
|
||||
{
|
||||
cb: () => router.push('/push-html', { forceOptimisticNavigation: true }),
|
||||
name: 'Push HTML',
|
||||
},
|
||||
{
|
||||
cb: () => router.refresh(),
|
||||
name: 'Refresh',
|
||||
},
|
||||
{
|
||||
cb: () => router.replace('/replaced-html', { forceOptimisticNavigation: true }),
|
||||
name: 'Replace',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>pathname: {pathname}</div>
|
||||
<div>
|
||||
searchparams:{' '}
|
||||
<ul>
|
||||
{searchParamsList.map(([key, value]) => (
|
||||
<li key={key}>
|
||||
{key}: {value}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{routerActions.map(({ cb, name }) => (
|
||||
<div key={name} style={{ marginBottom: '1em' }}>
|
||||
<button type="button" onClick={cb}>
|
||||
{name}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default {
|
||||
component: Component,
|
||||
parameters: {
|
||||
nextjs: {
|
||||
appDirectory: true,
|
||||
navigation: {
|
||||
pathname: '/hello',
|
||||
query: {
|
||||
foo: 'bar',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
} as Meta<typeof Component>;
|
||||
|
||||
export const Default: StoryObj<typeof Component> = {};
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact-webpack5",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -50,10 +50,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.60",
|
||||
"@storybook/core-common": "7.0.0-alpha.60",
|
||||
"@storybook/preact": "7.0.0-alpha.60",
|
||||
"@storybook/preset-preact-webpack": "7.0.0-alpha.60",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.6",
|
||||
"@storybook/core-common": "7.0.0-beta.6",
|
||||
"@storybook/preact": "7.0.0-beta.6",
|
||||
"@storybook/preset-preact-webpack": "7.0.0-beta.6",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -67,7 +67,7 @@
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
"node": ">=16.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
@ -79,5 +79,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-vite",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -53,18 +53,17 @@
|
||||
"dependencies": {
|
||||
"@joshwooding/vite-plugin-react-docgen-typescript": "^0.0.5",
|
||||
"@rollup/pluginutils": "^4.2.0",
|
||||
"@storybook/builder-vite": "7.0.0-alpha.60",
|
||||
"@storybook/react": "7.0.0-alpha.60",
|
||||
"@storybook/builder-vite": "7.0.0-beta.6",
|
||||
"@storybook/react": "7.0.0-beta.6",
|
||||
"@vitejs/plugin-react": "^2.0.0",
|
||||
"ast-types": "^0.14.2",
|
||||
"magic-string": "^0.26.1",
|
||||
"react-docgen": "^6.0.0-alpha.3",
|
||||
"vite": "^3.1.3"
|
||||
"vite": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^16.0.0",
|
||||
"typescript": "~4.9.3",
|
||||
"vite": "^3.1.3"
|
||||
"typescript": "~4.9.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
@ -83,5 +82,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/* eslint-disable global-require */
|
||||
import type { StorybookConfig } from '@storybook/builder-vite';
|
||||
import { hasPlugin } from './utils';
|
||||
import { hasVitePlugins } from '@storybook/builder-vite';
|
||||
|
||||
export const core: StorybookConfig['core'] = {
|
||||
builder: '@storybook/builder-vite',
|
||||
@ -11,7 +11,7 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets
|
||||
const { plugins = [] } = config;
|
||||
|
||||
// Add react plugin if not present
|
||||
if (!hasPlugin(plugins, 'vite:react-babel')) {
|
||||
if (!(await hasVitePlugins(plugins, ['vite:react-babel']))) {
|
||||
const { default: react } = await import('@vitejs/plugin-react');
|
||||
plugins.push(react());
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import type { PluginOption } from 'vite';
|
||||
|
||||
export function readPackageJson(): Record<string, any> | false {
|
||||
const packageJsonPath = path.resolve('package.json');
|
||||
@ -11,18 +10,3 @@ export function readPackageJson(): Record<string, any> | false {
|
||||
const jsonContent = fs.readFileSync(packageJsonPath, 'utf8');
|
||||
return JSON.parse(jsonContent);
|
||||
}
|
||||
|
||||
function checkName(plugin: PluginOption, name: string) {
|
||||
return typeof plugin === 'object' && 'name' in plugin && plugin.name === name;
|
||||
}
|
||||
|
||||
export function hasPlugin(plugins: PluginOption[], name: string) {
|
||||
return Boolean(
|
||||
plugins.find((p): boolean => {
|
||||
if (Array.isArray(p)) {
|
||||
return Boolean(hasPlugin(p, name));
|
||||
}
|
||||
return checkName(p, name);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-webpack5",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -51,9 +51,9 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.60",
|
||||
"@storybook/preset-react-webpack": "7.0.0-alpha.60",
|
||||
"@storybook/react": "7.0.0-alpha.60",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.6",
|
||||
"@storybook/preset-react-webpack": "7.0.0-beta.6",
|
||||
"@storybook/react": "7.0.0-beta.6",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -74,7 +74,7 @@
|
||||
}
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
"node": ">=16.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
@ -86,5 +86,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/server-webpack5",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -50,10 +50,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.60",
|
||||
"@storybook/core-common": "7.0.0-alpha.60",
|
||||
"@storybook/preset-server-webpack": "7.0.0-alpha.60",
|
||||
"@storybook/server": "7.0.0-alpha.60",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.6",
|
||||
"@storybook/core-common": "7.0.0-beta.6",
|
||||
"@storybook/preset-server-webpack": "7.0.0-beta.6",
|
||||
"@storybook/server": "7.0.0-beta.6",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -64,7 +64,7 @@
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
"node": ">=16.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
@ -76,5 +76,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte-vite",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -52,19 +52,19 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-svelte-csf": "^2.0.0",
|
||||
"@storybook/builder-vite": "7.0.0-alpha.60",
|
||||
"@storybook/node-logger": "7.0.0-alpha.60",
|
||||
"@storybook/svelte": "7.0.0-alpha.60",
|
||||
"@storybook/builder-vite": "7.0.0-beta.6",
|
||||
"@storybook/node-logger": "7.0.0-beta.6",
|
||||
"@storybook/svelte": "7.0.0-beta.6",
|
||||
"@sveltejs/vite-plugin-svelte": "^1.0.0",
|
||||
"magic-string": "^0.26.1",
|
||||
"svelte": "^3.0.0",
|
||||
"sveltedoc-parser": "^4.2.1",
|
||||
"vite": "^3.1.3"
|
||||
"ts-dedent": "^2.2.0",
|
||||
"vite": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^16.0.0",
|
||||
"typescript": "~4.9.3",
|
||||
"vite": "^3.1.3"
|
||||
"typescript": "~4.9.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-svelte-csf": "^2.0.0",
|
||||
@ -89,5 +89,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { type StorybookConfig } from '@storybook/builder-vite';
|
||||
import { handleSvelteKit, hasPlugin } from './utils';
|
||||
import { type StorybookConfig, hasVitePlugins } from '@storybook/builder-vite';
|
||||
import { handleSvelteKit } from './utils';
|
||||
import { svelteDocgen } from './plugins/svelte-docgen';
|
||||
|
||||
export const core: StorybookConfig['core'] = {
|
||||
@ -8,7 +8,7 @@ export const core: StorybookConfig['core'] = {
|
||||
};
|
||||
|
||||
export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (config, options) => {
|
||||
let { plugins = [] } = config;
|
||||
const { plugins = [] } = config;
|
||||
const { svelte, loadSvelteConfig } = await import('@sveltejs/vite-plugin-svelte');
|
||||
const svelteOptions: Record<string, any> = await options.presets.apply(
|
||||
'svelteOptions',
|
||||
@ -18,15 +18,14 @@ export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (confi
|
||||
const svelteConfig = { ...(await loadSvelteConfig()), ...svelteOptions };
|
||||
|
||||
// Add svelte plugin if not present
|
||||
if (!hasPlugin(plugins, 'vite-plugin-svelte')) {
|
||||
if (!(await hasVitePlugins(plugins, ['vite-plugin-svelte']))) {
|
||||
plugins.push(svelte());
|
||||
}
|
||||
|
||||
// Add docgen plugin
|
||||
plugins.push(svelteDocgen(svelteConfig));
|
||||
|
||||
// temporarily support SvelteKit
|
||||
plugins = await handleSvelteKit(plugins, options);
|
||||
await handleSvelteKit(plugins, options);
|
||||
|
||||
// TODO: temporary until/unless https://github.com/storybookjs/addon-svelte-csf/issues/64 is fixed
|
||||
// Wrapping in try-catch in case `@storybook/addon-svelte-csf is not installed
|
||||
|
||||
@ -1,54 +1,41 @@
|
||||
import type { PluginOption } from 'vite';
|
||||
import { deprecate } from '@storybook/node-logger';
|
||||
import { withoutVitePlugins } from '@storybook/builder-vite';
|
||||
import type { Options } from '@storybook/types';
|
||||
|
||||
function checkName(plugin: PluginOption, name: string) {
|
||||
return typeof plugin === 'object' && 'name' in plugin && plugin.name === name;
|
||||
}
|
||||
|
||||
export function hasPlugin(plugins: PluginOption[], name: string) {
|
||||
return Boolean(
|
||||
plugins.find((p): boolean => {
|
||||
if (Array.isArray(p)) {
|
||||
return Boolean(hasPlugin(p, name));
|
||||
}
|
||||
return checkName(p, name);
|
||||
})
|
||||
);
|
||||
}
|
||||
import dedent from 'ts-dedent';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
import { hasVitePlugins } from '@storybook/builder-vite';
|
||||
|
||||
/**
|
||||
* A migration step that ensures the svelte-vite framework still supports SvelteKit,
|
||||
* but warns the user that they should use the sveltekit framework instead.
|
||||
* Should be removed when we decide to remove support completely for SvelteKit in svelte-vite
|
||||
*/
|
||||
export async function handleSvelteKit(
|
||||
plugins: PluginOption[],
|
||||
options: Options
|
||||
): Promise<PluginOption[]> {
|
||||
if (!hasPlugin(plugins, 'vite-plugin-svelte-kit')) {
|
||||
// this is not a SvelteKit project ✅
|
||||
return plugins;
|
||||
}
|
||||
|
||||
export async function handleSvelteKit(plugins: PluginOption[], options: Options) {
|
||||
/*
|
||||
the sveltekit framework uses this svelte-vite framework under the hood
|
||||
so we have to take extra care of only warning when the user is actually using
|
||||
so we have to take extra care of only throwing when the user is actually using
|
||||
svelte-vite directly and not just through sveltekit
|
||||
*/
|
||||
|
||||
const frameworkPreset = await options.presets.apply('framework', {}, options);
|
||||
const framework = typeof frameworkPreset === 'string' ? frameworkPreset : frameworkPreset.name;
|
||||
|
||||
if (framework === '@storybook/sveltekit') {
|
||||
// this uses @storybook/sveltekit, so everything is fine ✅
|
||||
return plugins;
|
||||
}
|
||||
const hasSvelteKitPlugins = await hasVitePlugins(plugins, [
|
||||
'vite-plugin-svelte-kit',
|
||||
'vite-plugin-sveltekit-setup',
|
||||
'vite-plugin-sveltekit-compile',
|
||||
]);
|
||||
|
||||
// this is a SvelteKit project but doesn't use @storybook/sveltekit, warn user about this and remove vite-plugin-svelte-kit ❌
|
||||
deprecate(
|
||||
'SvelteKit support in @storybook/svelte-vite is deprecated in Storybook 7.0, use @storybook/sveltekit instead.'
|
||||
);
|
||||
return withoutVitePlugins(plugins, ['vite-plugin-svelte-kit']);
|
||||
if (hasSvelteKitPlugins && framework !== '@storybook/sveltekit') {
|
||||
logger.error(
|
||||
dedent`
|
||||
We've detected a SvelteKit project using the @storybook/svelte-vite framework, which is not supported in Storybook 7.0
|
||||
Please use the @storybook/sveltekit framework instead.
|
||||
You can migrate automatically by running
|
||||
|
||||
npx sb@next automigrate sveltekitFramework
|
||||
|
||||
See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sveltekit-needs-the-storybooksveltekit-framework
|
||||
`
|
||||
);
|
||||
throw new Error();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte-webpack5",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -51,10 +51,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.60",
|
||||
"@storybook/core-common": "7.0.0-alpha.60",
|
||||
"@storybook/preset-svelte-webpack": "7.0.0-alpha.60",
|
||||
"@storybook/svelte": "7.0.0-alpha.60"
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.6",
|
||||
"@storybook/core-common": "7.0.0-beta.6",
|
||||
"@storybook/preset-svelte-webpack": "7.0.0-beta.6",
|
||||
"@storybook/svelte": "7.0.0-beta.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"svelte": "^3.48.0",
|
||||
@ -69,7 +69,7 @@
|
||||
"svelte-loader": "*"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
"node": ">=16.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
@ -81,5 +81,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1 +1,116 @@
|
||||
# Storybook for SvelteKit
|
||||
# Storybook for SvelteKit <!-- omit in toc -->
|
||||
|
||||
Our goal is to help you use the tools you love together with Storybook. That’s why Storybook has zero-config support for SvelteKit with the `@storybook/sveltekit` package.
|
||||
|
||||
Check out our [Frameworks API](https://storybook.js.org/blog/framework-api/) announcement for what this all means for you and our continued efforts to make Storybook a seamless integration for any project.
|
||||
|
||||
## Table of Contents <!-- omit in toc -->
|
||||
|
||||
- [Supported features](#supported-features)
|
||||
- [Requirements](#requirements)
|
||||
- [Getting Started](#getting-started)
|
||||
- [In a project without Storybook](#in-a-project-without-storybook)
|
||||
- [In a project with Storybook](#in-a-project-with-storybook)
|
||||
- [Automatic migration](#automatic-migration)
|
||||
- [Manual migration](#manual-migration)
|
||||
- [Troubleshooting](#troubleshooting)
|
||||
- [Error: `ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared` when starting Storybook](#error-err-syntaxerror-identifier-__esbuild_register_import_meta_url__-has-already-been-declared-when-starting-storybook)
|
||||
- [Acknowledgements](#acknowledgements)
|
||||
|
||||
## Supported features
|
||||
|
||||
All Svelte language features are supported out of the box, as Storybook uses the Svelte compiler underneath.
|
||||
However SvelteKit has some [Kit-specific modules](https://kit.svelte.dev/docs/modules) that currently aren't supported. It's on our roadmap to support most of them soon:
|
||||
|
||||
| **Module** | **Status** |
|
||||
| ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
|
||||
| [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment) | 🔜 Coming in 7.0 |
|
||||
| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms) | ⏳ Planned for 7.1 |
|
||||
| [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation) | ⏳ Planned for 7.1. With mocks so the Actions addon will display when the hooks are being called. |
|
||||
| [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths) | 🔜 Coming in 7.0 |
|
||||
| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores) | ⏳ Planned for 7.1. With mocks so you can set different store values per story. |
|
||||
| [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | ⛔ Not supported. They are meant to only be available server-side, and Storybook renders all components on the client. |
|
||||
| [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public) | 🔜 Coming in 7.0 |
|
||||
| [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private) | ⛔ Not supported. They are meant to only be available server-side, and Storybook renders all components on the client. |
|
||||
| [`$env/static/public`](https://kit.svelte.dev/docs/modules#$env-static-public) | 🔜 Coming in 7.0 |
|
||||
| [`$lib`](https://kit.svelte.dev/docs/modules#$lib) | 🔜 Coming in 7.0 |
|
||||
| [`$service-worker`](https://kit.svelte.dev/docs/modules#$service-worker) | ⛔ Not supported. They are only meant to be used in service workers |
|
||||
| [`@sveltejs/kit/*`](https://kit.svelte.dev/docs/modules#sveltejs-kit) | ✅ Supported |
|
||||
|
||||
This is just the beginning. We're planning on making it an even better experience to [build](https://storybook.js.org/docs/7.0/react/writing-stories/introduction), [test](https://storybook.js.org/docs/7.0/react/writing-tests/introduction) and [document](https://storybook.js.org/docs/7.0/react/writing-docs/introduction) all the SvelteKit goodies like [pages](https://kit.svelte.dev/docs/routing), [forms](https://kit.svelte.dev/docs/form-actions) and [layouts](https://kit.svelte.dev/docs/routing#layout) in Storybook, while still integrating with all the addons and workflows you know and love.
|
||||
|
||||
## Requirements
|
||||
|
||||
- [SvelteKit](https://kit.svelte.dev/) >= 1.0.0 (not including beta versions)
|
||||
- [Storybook](https://storybook.js.org/) >= 7.x
|
||||
|
||||
## Getting Started
|
||||
|
||||
### In a project without Storybook
|
||||
|
||||
Run the following command in your SvelteKit project's root directory, and follow the prompts:
|
||||
|
||||
```bash
|
||||
npx storybook@next init
|
||||
```
|
||||
|
||||
[More on getting started with Storybook](https://storybook.js.org/docs/7.0/svelte/get-started/install)
|
||||
|
||||
### In a project with Storybook
|
||||
|
||||
This framework is designed to work with Storybook 7. If you’re not already using v7, upgrade with this command:
|
||||
|
||||
```bash
|
||||
npx storybook@next upgrade --prerelease
|
||||
```
|
||||
|
||||
#### Automatic migration
|
||||
|
||||
When running the `upgrade` command above you should get a prompt asking you to migrate to `@storybook/sveltekit`, which should handle everything for you. In some cases it can't migrate for you, eg. if your existing Storybook setup is based on Webpack. In such cases, refer to the manual migration below.
|
||||
|
||||
Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you have a `svelteOptions` property in `.storybook/main.cjs` you need to remove that. See [Troubleshooting](#error-about-__esbuild_register_import_meta_url__-when-starting-storybook) below. We're working on doing this automatically soon.
|
||||
|
||||
#### Manual migration
|
||||
|
||||
Install the framework:
|
||||
|
||||
```bash
|
||||
yarn add -D @storybook/sveltekit@next
|
||||
```
|
||||
|
||||
Update your `main.cjs` to change the framework property:
|
||||
|
||||
```js
|
||||
// .storybook/main.cjs
|
||||
module.exports = {
|
||||
...
|
||||
framework: '@storybook/sveltekit',
|
||||
};
|
||||
```
|
||||
|
||||
Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you have a `svelteOptions` property in `.storybook/main.cjs` you need to remove that. See [Troubleshooting](#error-about-__esbuild_register_import_meta_url__-when-starting-storybook) below.
|
||||
|
||||
Remove any redundant dependencies, if you have them:
|
||||
|
||||
```bash
|
||||
yarn remove @storybook/svelte-vite
|
||||
yarn remove @storybook/svelte-webpack5
|
||||
yarn remove storybook-builder-vite
|
||||
yarn remove @storybook/builder-vite
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Error: `ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared` when starting Storybook
|
||||
|
||||
> When starting Storybook after upgrading to v7.0, it breaks with the following error:
|
||||
>
|
||||
> ```
|
||||
> ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared
|
||||
> ```
|
||||
|
||||
You'll get this error when upgrading from 6.5 to 7.0. You need to remove the `svelteOptions` property in `.storybook/main.cjs`, as that is not supported by Storybook 7.0 + SvelteKit. The property is also not necessary anymore because the Vite and Svelte configurations are loaded automatically in Storybook 7.0.
|
||||
|
||||
## Acknowledgements
|
||||
|
||||
Integrating with SvelteKit would not have been possible if it weren't for the fantastic efforts by the Svelte core team - especially [Ben McCann](https://twitter.com/benjaminmccann) - to make integrations with the wider ecosystem possible.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/sveltekit",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook for SvelteKit",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -51,13 +51,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-vite": "7.0.0-alpha.60",
|
||||
"@storybook/svelte-vite": "7.0.0-alpha.60"
|
||||
"@storybook/builder-vite": "7.0.0-beta.6",
|
||||
"@storybook/svelte": "7.0.0-beta.6",
|
||||
"@storybook/svelte-vite": "7.0.0-beta.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^16.0.0",
|
||||
"typescript": "^4.9.3",
|
||||
"vite": "^3.1.3"
|
||||
"typescript": "^4.9.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-svelte-csf": "^2.0.0"
|
||||
@ -80,5 +80,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -15,7 +15,13 @@ export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (confi
|
||||
|
||||
// Remove vite-plugin-svelte-kit from plugins if using SvelteKit
|
||||
// see https://github.com/storybookjs/storybook/issues/19280#issuecomment-1281204341
|
||||
plugins = withoutVitePlugins(plugins, ['vite-plugin-svelte-kit']);
|
||||
plugins = await withoutVitePlugins(plugins, [
|
||||
// pre @sveltejs/kit@1.0.0-next.574
|
||||
'vite-plugin-svelte-kit',
|
||||
// @sveltejs/kit@1.0.0-next.582 and later
|
||||
'vite-plugin-sveltekit-setup',
|
||||
'vite-plugin-sveltekit-compile',
|
||||
]);
|
||||
|
||||
return { ...baseConfig, plugins };
|
||||
};
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
import Button from './Button.svelte';
|
||||
|
||||
// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
|
||||
export default {
|
||||
title: 'Example/Button',
|
||||
component: Button,
|
||||
tags: ['docsPage'],
|
||||
argTypes: {
|
||||
backgroundColor: { control: 'color' },
|
||||
},
|
||||
};
|
||||
|
||||
// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
|
||||
export const Primary = {
|
||||
args: {
|
||||
primary: true,
|
||||
label: 'Button',
|
||||
},
|
||||
};
|
||||
|
||||
export const Secondary = {
|
||||
args: {
|
||||
label: 'Button',
|
||||
},
|
||||
};
|
||||
|
||||
export const Large = {
|
||||
args: {
|
||||
size: 'large',
|
||||
label: 'Button',
|
||||
},
|
||||
};
|
||||
|
||||
export const Small = {
|
||||
args: {
|
||||
size: 'small',
|
||||
label: 'Button',
|
||||
},
|
||||
};
|
||||
@ -1,34 +0,0 @@
|
||||
<script>
|
||||
import './button.css';
|
||||
|
||||
/**
|
||||
* Is this the principal call to action on the page?
|
||||
*/
|
||||
export let primary = false;
|
||||
|
||||
/**
|
||||
* What background color to use
|
||||
*/
|
||||
export let backgroundColor = undefined;
|
||||
/**
|
||||
* How large should the button be?
|
||||
*/
|
||||
export let size = 'medium';
|
||||
/**
|
||||
* Button contents
|
||||
*/
|
||||
export let label;
|
||||
|
||||
$: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
|
||||
|
||||
$: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
|
||||
</script>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
|
||||
{style}
|
||||
on:click
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue-vite",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -50,12 +50,12 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-vite": "7.0.0-alpha.60",
|
||||
"@storybook/core-common": "7.0.0-alpha.60",
|
||||
"@storybook/core-server": "7.0.0-alpha.60",
|
||||
"@storybook/vue": "7.0.0-alpha.60",
|
||||
"@storybook/builder-vite": "7.0.0-beta.6",
|
||||
"@storybook/core-common": "7.0.0-beta.6",
|
||||
"@storybook/core-server": "7.0.0-beta.6",
|
||||
"@storybook/vue": "7.0.0-beta.6",
|
||||
"magic-string": "^0.26.1",
|
||||
"vite": "^3.1.3",
|
||||
"vite": "^3.0.0",
|
||||
"vue-docgen-api": "^4.40.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -68,7 +68,7 @@
|
||||
"vue": "^2.7.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
"node": ">=16.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
@ -80,5 +80,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue-webpack5",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -50,10 +50,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.60",
|
||||
"@storybook/core-common": "7.0.0-alpha.60",
|
||||
"@storybook/preset-vue-webpack": "7.0.0-alpha.60",
|
||||
"@storybook/vue": "7.0.0-alpha.60",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.6",
|
||||
"@storybook/core-common": "7.0.0-beta.6",
|
||||
"@storybook/preset-vue-webpack": "7.0.0-beta.6",
|
||||
"@storybook/vue": "7.0.0-beta.6",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -73,7 +73,7 @@
|
||||
"vue-template-compiler": "^2.6.8"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
"node": ">=16.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
@ -85,5 +85,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue3-vite",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -51,18 +51,17 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-vite": "7.0.0-alpha.60",
|
||||
"@storybook/core-server": "7.0.0-alpha.60",
|
||||
"@storybook/vue3": "7.0.0-alpha.60",
|
||||
"@storybook/builder-vite": "7.0.0-beta.6",
|
||||
"@storybook/core-server": "7.0.0-beta.6",
|
||||
"@storybook/vue3": "7.0.0-beta.6",
|
||||
"@vitejs/plugin-vue": "^3.0.0",
|
||||
"magic-string": "^0.26.1",
|
||||
"vite": "^3.1.3",
|
||||
"vite": "^3.0.0",
|
||||
"vue-docgen-api": "^4.40.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^16.0.0",
|
||||
"typescript": "~4.9.3",
|
||||
"vite": "^3.1.3"
|
||||
"typescript": "~4.9.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
@ -81,5 +80,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import type { StorybookConfig } from '@storybook/builder-vite';
|
||||
import { hasVitePlugins } from '@storybook/builder-vite';
|
||||
import { vueDocgen } from './plugins/vue-docgen';
|
||||
import { hasPlugin } from './utils';
|
||||
|
||||
export const core: StorybookConfig['core'] = {
|
||||
builder: '@storybook/builder-vite',
|
||||
@ -11,7 +11,7 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets
|
||||
const { plugins = [] } = config;
|
||||
|
||||
// Add vue plugin if not present
|
||||
if (!hasPlugin(plugins, 'vite:vue')) {
|
||||
if (!(await hasVitePlugins(plugins, ['vite:vue']))) {
|
||||
const { default: vue } = await import('@vitejs/plugin-vue');
|
||||
plugins.push(vue());
|
||||
}
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
import type { PluginOption } from 'vite';
|
||||
|
||||
function checkName(plugin: PluginOption, name: string) {
|
||||
return typeof plugin === 'object' && 'name' in plugin && plugin.name === name;
|
||||
}
|
||||
|
||||
export function hasPlugin(plugins: PluginOption[], name: string) {
|
||||
return Boolean(
|
||||
plugins.find((p): boolean => {
|
||||
if (Array.isArray(p)) {
|
||||
return Boolean(hasPlugin(p, name));
|
||||
}
|
||||
return checkName(p, name);
|
||||
})
|
||||
);
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue3-webpack5",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -50,10 +50,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.60",
|
||||
"@storybook/core-common": "7.0.0-alpha.60",
|
||||
"@storybook/preset-vue3-webpack": "7.0.0-alpha.60",
|
||||
"@storybook/vue3": "7.0.0-alpha.60",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.6",
|
||||
"@storybook/core-common": "7.0.0-beta.6",
|
||||
"@storybook/preset-vue3-webpack": "7.0.0-beta.6",
|
||||
"@storybook/vue3": "7.0.0-beta.6",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -70,7 +70,7 @@
|
||||
"vue": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
"node": ">=16.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
@ -82,5 +82,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/web-components-vite",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -51,17 +51,15 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-vite": "7.0.0-alpha.60",
|
||||
"@storybook/core-server": "7.0.0-alpha.60",
|
||||
"@storybook/node-logger": "7.0.0-alpha.60",
|
||||
"@storybook/web-components": "7.0.0-alpha.60",
|
||||
"magic-string": "^0.26.1",
|
||||
"vite": "3"
|
||||
"@storybook/builder-vite": "7.0.0-beta.6",
|
||||
"@storybook/core-server": "7.0.0-beta.6",
|
||||
"@storybook/node-logger": "7.0.0-beta.6",
|
||||
"@storybook/web-components": "7.0.0-beta.6",
|
||||
"magic-string": "^0.26.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^16.0.0",
|
||||
"typescript": "~4.9.3",
|
||||
"vite": "^3.1.0"
|
||||
"typescript": "~4.9.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
@ -80,5 +78,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/web-components-webpack5",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"lit-html",
|
||||
@ -53,10 +53,10 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.60",
|
||||
"@storybook/core-common": "7.0.0-alpha.60",
|
||||
"@storybook/preset-web-components-webpack": "7.0.0-alpha.60",
|
||||
"@storybook/web-components": "7.0.0-alpha.60",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.6",
|
||||
"@storybook/core-common": "7.0.0-beta.6",
|
||||
"@storybook/preset-web-components-webpack": "7.0.0-beta.6",
|
||||
"@storybook/web-components": "7.0.0-beta.6",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -69,7 +69,7 @@
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
"node": ">=16.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
@ -81,5 +81,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -2,5 +2,5 @@
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true,
|
||||
"registry": "https://registry.npmjs.org",
|
||||
"version": "7.0.0-alpha.60"
|
||||
"version": "7.0.0-beta.6"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addons",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook addons store",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -42,9 +42,9 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/manager-api": "7.0.0-alpha.60",
|
||||
"@storybook/preview-api": "7.0.0-alpha.60",
|
||||
"@storybook/types": "7.0.0-alpha.60"
|
||||
"@storybook/manager-api": "7.0.0-beta.6",
|
||||
"@storybook/preview-api": "7.0.0-beta.6",
|
||||
"@storybook/types": "7.0.0-beta.6"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
@ -58,5 +58,5 @@
|
||||
"./src/index.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/builder-manager",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook manager builder",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -42,16 +42,16 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@fal-works/esbuild-plugin-global-externals": "^2.1.2",
|
||||
"@storybook/core-common": "7.0.0-alpha.60",
|
||||
"@storybook/manager": "7.0.0-alpha.60",
|
||||
"@storybook/node-logger": "7.0.0-alpha.60",
|
||||
"@storybook/core-common": "7.0.0-beta.6",
|
||||
"@storybook/manager": "7.0.0-beta.6",
|
||||
"@storybook/node-logger": "7.0.0-beta.6",
|
||||
"@types/ejs": "^3.1.1",
|
||||
"@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
|
||||
"browser-assert": "^1.2.1",
|
||||
"ejs": "^3.1.8",
|
||||
"esbuild": "^0.14.48",
|
||||
"esbuild": "^0.16.4",
|
||||
"esbuild-plugin-alias": "^0.2.1",
|
||||
"express": "^4.17.1",
|
||||
"express": "^4.17.3",
|
||||
"fs-extra": "^9.0.1",
|
||||
"process": "^0.11.10",
|
||||
"slash": "^3.0.0",
|
||||
@ -69,5 +69,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
<title><%= typeof title !== 'undefined'? title : 'Storybook'%></title>
|
||||
|
||||
<link rel="shortcut icon" href="./favicon.ico" />
|
||||
<link rel="icon" type="image/svg+xml" href="./favicon.svg">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<link href="./sb-preview/runtime.mjs" rel="preload" as="script">
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
<!-- [BODY HTML SNIPPET HERE] -->
|
||||
<div id="storybook-root"></div>
|
||||
<div id="storybook-docs"></div>
|
||||
<script type="module" src="/sb-preview/runtime.mjs"></script>
|
||||
<script type="module" src="./sb-preview/runtime.mjs"></script>
|
||||
<script type="module" src="/virtual:/@storybook/builder-vite/vite-app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/builder-vite",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "A plugin to run and build Storybooks with Vite",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/code/lib/builder-vite/#readme",
|
||||
"bugs": {
|
||||
@ -42,18 +42,18 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@joshwooding/vite-plugin-react-docgen-typescript": "0.0.5",
|
||||
"@storybook/client-logger": "7.0.0-alpha.60",
|
||||
"@storybook/core-common": "7.0.0-alpha.60",
|
||||
"@storybook/client-logger": "7.0.0-beta.6",
|
||||
"@storybook/core-common": "7.0.0-beta.6",
|
||||
"@storybook/csf-plugin": "7.0.0-beta.6",
|
||||
"@storybook/mdx2-csf": "next",
|
||||
"@storybook/node-logger": "7.0.0-alpha.60",
|
||||
"@storybook/preview": "7.0.0-alpha.60",
|
||||
"@storybook/preview-api": "7.0.0-alpha.60",
|
||||
"@storybook/source-loader": "7.0.0-alpha.60",
|
||||
"@storybook/types": "7.0.0-alpha.60",
|
||||
"@storybook/node-logger": "7.0.0-beta.6",
|
||||
"@storybook/preview": "7.0.0-beta.6",
|
||||
"@storybook/preview-api": "7.0.0-beta.6",
|
||||
"@storybook/types": "7.0.0-beta.6",
|
||||
"@vitejs/plugin-react": "^2.0.0",
|
||||
"browser-assert": "^1.2.1",
|
||||
"es-module-lexer": "^0.9.3",
|
||||
"express": "^4.17.1",
|
||||
"express": "^4.17.3",
|
||||
"fs-extra": "^9.0.1",
|
||||
"glob": "^7.2.0",
|
||||
"glob-promise": "^4.2.0",
|
||||
@ -61,23 +61,26 @@
|
||||
"rollup": "^2.25.0 || ^3.3.0",
|
||||
"rollup-plugin-external-globals": "^0.7.1",
|
||||
"slash": "^3.0.0",
|
||||
"vite": "^3.1.3"
|
||||
"vite": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/express": "^4.17.13",
|
||||
"@types/node": "^16.0.0",
|
||||
"rollup": "^3.0.0",
|
||||
"typescript": "~4.9.3",
|
||||
"vite": "^3.1.3"
|
||||
"typescript": "~4.9.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@preact/preset-vite": "*",
|
||||
"typescript": ">= 4.3.x",
|
||||
"vite-plugin-glimmerx": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@preact/preset-vite": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
},
|
||||
"vite-plugin-glimmerx": {
|
||||
"optional": true
|
||||
}
|
||||
@ -91,5 +94,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@ export async function build(options: ExtendedOptions) {
|
||||
sourcemap: true,
|
||||
rollupOptions: {
|
||||
// Do not try to bundle the storybook runtime, it is copied into the output dir after the build.
|
||||
external: ['/sb-preview/runtime.mjs'],
|
||||
external: ['./sb-preview/runtime.mjs'],
|
||||
},
|
||||
},
|
||||
}).build;
|
||||
|
||||
@ -30,7 +30,7 @@ export async function generateIframeScriptCode(options: ExtendedOptions) {
|
||||
import { configure } from '${rendererName}';
|
||||
|
||||
import { logger } from '@storybook/client-logger';
|
||||
import * as clientApi from "@storybook/preview-api";
|
||||
import * as previewApi from "@storybook/preview-api";
|
||||
${filesToImport(configEntries, 'config')}
|
||||
|
||||
import * as preview from '${virtualPreviewFile}';
|
||||
|
||||
@ -12,6 +12,7 @@ import { build as viteBuild } from './build';
|
||||
import type { ExtendedOptions } from './types';
|
||||
|
||||
export { withoutVitePlugins } from './utils/without-vite-plugins';
|
||||
export { hasVitePlugins } from './utils/has-vite-plugins';
|
||||
|
||||
// TODO remove
|
||||
export type { TypescriptOptions } from '@storybook/types';
|
||||
|
||||
15
code/lib/builder-vite/src/plugins/csf-plugin.ts
Normal file
15
code/lib/builder-vite/src/plugins/csf-plugin.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import type { Plugin } from 'vite';
|
||||
import { vite } from '@storybook/csf-plugin';
|
||||
import type { StorybookConfig } from '@storybook/types';
|
||||
import type { ExtendedOptions } from '../types';
|
||||
|
||||
export async function csfPlugin(config: ExtendedOptions): Promise<Plugin> {
|
||||
const { presets } = config;
|
||||
|
||||
const addons = await presets.apply<StorybookConfig['addons']>('addons', []);
|
||||
const docsOptions =
|
||||
// @ts-expect-error - not sure what type to use here
|
||||
addons.find((a) => [a, a.name].includes('@storybook/addon-docs'))?.options ?? {};
|
||||
|
||||
return vite(docsOptions?.csfPluginOptions);
|
||||
}
|
||||
@ -2,4 +2,4 @@ export * from './inject-export-order-plugin';
|
||||
export * from './mdx-plugin';
|
||||
export * from './strip-story-hmr-boundaries';
|
||||
export * from './code-generator-plugin';
|
||||
export * from './source-loader-plugin';
|
||||
export * from './csf-plugin';
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import type { Options } from '@storybook/types';
|
||||
import type { Plugin } from 'vite';
|
||||
import { createFilter } from 'vite';
|
||||
import reactVite from '@vitejs/plugin-react';
|
||||
|
||||
const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith('story.mdx');
|
||||
|
||||
@ -10,6 +12,14 @@ function injectRenderer(code: string) {
|
||||
`;
|
||||
}
|
||||
|
||||
// HACK: find a better way to do this, ideally avoiding @vitejs/plugin-react entirely.
|
||||
// We're just using it to run the mdx with jsx through babel
|
||||
// @ts-expect-error We're forcing the plugin shape here
|
||||
const viteBabel: Plugin | undefined = reactVite({ fastRefresh: false }).find(
|
||||
// @ts-expect-error we know these have names, and what the shape will be
|
||||
(p) => p.name === 'vite:react-babel'
|
||||
);
|
||||
|
||||
/**
|
||||
* Storybook uses two different loaders when dealing with MDX:
|
||||
*
|
||||
@ -18,45 +28,40 @@ function injectRenderer(code: string) {
|
||||
*
|
||||
* @see https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#csf-stories-with-arbitrary-mdx
|
||||
*/
|
||||
export function mdxPlugin(): Plugin {
|
||||
let reactRefresh: Plugin | undefined;
|
||||
export function mdxPlugin(options: Options): Plugin {
|
||||
const include = /\.mdx?$/;
|
||||
const filter = createFilter(include);
|
||||
|
||||
return {
|
||||
name: 'storybook:mdx-plugin',
|
||||
enforce: 'pre',
|
||||
configResolved({ plugins }) {
|
||||
// @vitejs/plugin-react-refresh has been upgraded to @vitejs/plugin-react,
|
||||
// and the name of the plugin performing `transform` has been changed from 'react-refresh' to 'vite:react-babel',
|
||||
// to be compatible, we need to look for both plugin name.
|
||||
// We should also look for the other plugins names exported from @vitejs/plugin-react in case there are some internal refactors.
|
||||
const reactRefreshPlugins = plugins.filter(
|
||||
(p) =>
|
||||
p.name === 'react-refresh' ||
|
||||
p.name === 'vite:react-babel' ||
|
||||
p.name === 'vite:react-refresh' ||
|
||||
p.name === 'vite:react-jsx'
|
||||
);
|
||||
reactRefresh = reactRefreshPlugins.find((p) => p.transform);
|
||||
},
|
||||
|
||||
async transform(src, id, options) {
|
||||
async transform(src, id, transformOptions) {
|
||||
if (!filter(id)) return undefined;
|
||||
|
||||
const { compile } = await import('@storybook/mdx2-csf');
|
||||
|
||||
const mdxCode = String(await compile(src, { skipCsf: !isStorybookMdx(id) }));
|
||||
const mdxLoaderOptions = await options.presets.apply('mdxLoaderOptions', {
|
||||
mdxCompileOptions: {
|
||||
providerImportSource: '@storybook/addon-docs/mdx-react-shim',
|
||||
},
|
||||
});
|
||||
|
||||
const mdxCode = String(
|
||||
await compile(src, {
|
||||
skipCsf: !isStorybookMdx(id),
|
||||
...mdxLoaderOptions,
|
||||
})
|
||||
);
|
||||
|
||||
const modifiedCode = injectRenderer(mdxCode);
|
||||
|
||||
// Hooks in recent rollup versions can be functions or objects, and though react hasn't changed, the typescript defs have
|
||||
const rTransform = reactRefresh?.transform;
|
||||
const rTransform = viteBabel?.transform;
|
||||
const transform = rTransform && 'handler' in rTransform ? rTransform.handler : rTransform;
|
||||
|
||||
// It's safe to disable this, because we know it'll be there, since we added it ourselves.
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
const result = await transform!.call(this, modifiedCode, `${id}.jsx`, options);
|
||||
const result = await transform!.call(this, modifiedCode, `${id}.jsx`, transformOptions);
|
||||
|
||||
if (!result) return modifiedCode;
|
||||
|
||||
|
||||
@ -1,104 +0,0 @@
|
||||
import type { Plugin } from 'vite';
|
||||
import sourceLoaderTransform from '@storybook/source-loader';
|
||||
import MagicString from 'magic-string';
|
||||
import type { ExtendedOptions } from '../types';
|
||||
|
||||
const storyPattern = /\.stories\.[jt]sx?$/;
|
||||
const storySourcePattern = /var __STORY__ = "(.*)"/;
|
||||
const storySourceReplacement = '--STORY_SOURCE_REPLACEMENT--';
|
||||
|
||||
const mockClassLoader = (id: string) => ({
|
||||
// eslint-disable-next-line no-console
|
||||
emitWarning: (message: string) => console.warn(message),
|
||||
resourcePath: id,
|
||||
});
|
||||
|
||||
// HACK: Until we can support only node 15+ and use string.prototype.replaceAll
|
||||
const replaceAll = (str: string, search: string, replacement: string) => {
|
||||
return str.split(search).join(replacement);
|
||||
};
|
||||
|
||||
export function sourceLoaderPlugin(config: ExtendedOptions): Plugin | Plugin[] {
|
||||
if (config.configType === 'DEVELOPMENT') {
|
||||
return {
|
||||
name: 'storybook:source-loader-plugin',
|
||||
enforce: 'pre',
|
||||
async transform(src: string, id: string) {
|
||||
if (id.match(storyPattern)) {
|
||||
const code: string = await sourceLoaderTransform.call(mockClassLoader(id), src);
|
||||
const s = new MagicString(src);
|
||||
// Entirely replace with new code
|
||||
s.overwrite(0, src.length, code);
|
||||
|
||||
return {
|
||||
code: s.toString(),
|
||||
map: s.generateMap({ hires: true, source: id }),
|
||||
};
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// In production, we need to be fancier, to avoid vite:define plugin from replacing values inside the `__STORY__` string
|
||||
const storySources = new WeakMap<ExtendedOptions, Map<string, string>>();
|
||||
|
||||
return [
|
||||
{
|
||||
name: 'storybook-vite-source-loader-plugin',
|
||||
enforce: 'pre',
|
||||
buildStart() {
|
||||
storySources.set(config, new Map());
|
||||
},
|
||||
async transform(src: string, id: string) {
|
||||
if (id.match(storyPattern)) {
|
||||
let code: string = await sourceLoaderTransform.call(mockClassLoader(id), src);
|
||||
// eslint-disable-next-line @typescript-eslint/naming-convention
|
||||
const [_, sourceString] = code.match(storySourcePattern) ?? [null, null];
|
||||
if (sourceString) {
|
||||
const map = storySources.get(config);
|
||||
map?.set(id, sourceString);
|
||||
|
||||
// Remove story source so that it is not processed by vite:define plugin
|
||||
code = replaceAll(code, sourceString, storySourceReplacement);
|
||||
}
|
||||
|
||||
const s = new MagicString(src);
|
||||
// Entirely replace with new code
|
||||
s.overwrite(0, src.length, code);
|
||||
|
||||
return {
|
||||
code: s.toString(),
|
||||
map: s.generateMap(),
|
||||
};
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'storybook-vite-source-loader-plugin-post',
|
||||
enforce: 'post',
|
||||
buildStart() {
|
||||
storySources.set(config, new Map());
|
||||
},
|
||||
async transform(src: string, id: string) {
|
||||
if (id.match(storyPattern)) {
|
||||
const s = new MagicString(src);
|
||||
const map = storySources.get(config);
|
||||
const storySourceStatement = map?.get(id);
|
||||
// Put the previously-extracted source back in
|
||||
if (storySourceStatement) {
|
||||
const newCode = replaceAll(src, storySourceReplacement, storySourceStatement);
|
||||
s.overwrite(0, src.length, newCode);
|
||||
}
|
||||
|
||||
return {
|
||||
code: s.toString(),
|
||||
map: s.generateMap(),
|
||||
};
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
69
code/lib/builder-vite/src/utils/has-vite-plugins.test.ts
Normal file
69
code/lib/builder-vite/src/utils/has-vite-plugins.test.ts
Normal file
@ -0,0 +1,69 @@
|
||||
import { hasVitePlugins } from './has-vite-plugins';
|
||||
|
||||
describe('hasVitePlugins', () => {
|
||||
describe('should return true for', () => {
|
||||
it('plugin in root', async () => {
|
||||
const plugins = [{ name: 'vite-plugin-to-find' }, { name: 'vite-plugin-other' }];
|
||||
const names = ['vite-plugin-to-find'];
|
||||
expect(await hasVitePlugins(plugins, names)).toBeTruthy();
|
||||
});
|
||||
it('plugin in nested array', async () => {
|
||||
const plugins = [[{ name: 'vite-plugin-to-find' }], { name: 'vite-plugin-other' }];
|
||||
const names = ['vite-plugin-to-find'];
|
||||
expect(await hasVitePlugins(plugins, names)).toBeTruthy();
|
||||
});
|
||||
it('plugin in nested async array', async () => {
|
||||
const plugins = [
|
||||
{ name: 'vite-plugin-other' },
|
||||
Promise.resolve([{ name: 'vite-plugin-to-find' }]),
|
||||
];
|
||||
const names = ['vite-plugin-to-find'];
|
||||
expect(await hasVitePlugins(plugins, names)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('async plugin in root', async () => {
|
||||
const plugins = [
|
||||
Promise.resolve({ name: 'vite-plugin-to-find' }),
|
||||
{ name: 'vite-plugin-other' },
|
||||
];
|
||||
const names = ['vite-plugin-to-find'];
|
||||
expect(await hasVitePlugins(plugins, names)).toBeTruthy();
|
||||
});
|
||||
it('async plugin in nested array', async () => {
|
||||
const plugins = [
|
||||
[Promise.resolve({ name: 'vite-plugin-to-find' })],
|
||||
{ name: 'vite-plugin-other' },
|
||||
];
|
||||
const names = ['vite-plugin-to-find'];
|
||||
expect(await hasVitePlugins(plugins, names)).toBeTruthy();
|
||||
});
|
||||
it('async plugin in nested async array', async () => {
|
||||
const plugins = [
|
||||
{ name: 'vite-plugin-other' },
|
||||
Promise.resolve([Promise.resolve({ name: 'vite-plugin-to-find' })]),
|
||||
];
|
||||
const names = ['vite-plugin-to-find'];
|
||||
expect(await hasVitePlugins(plugins, names)).toBeTruthy();
|
||||
});
|
||||
it('multiple plugins in root', async () => {
|
||||
const plugins = [
|
||||
{ name: 'vite-plugin-other' },
|
||||
{ name: 'vite-plugin-to-find-first' },
|
||||
{ name: 'vite-plugin-to-find-second' },
|
||||
];
|
||||
const names = ['vite-plugin-to-find-first', 'vite-plugin-to-find-second'];
|
||||
expect(await hasVitePlugins(plugins, names)).toBeTruthy();
|
||||
});
|
||||
});
|
||||
it('should return false with all types of plugin structures', async () => {
|
||||
const plugins = [
|
||||
{ name: 'vite-plugin-root' },
|
||||
[{ name: 'vite-plugin-in-nested-array' }],
|
||||
Promise.resolve({ name: 'vite-plugin-async-root' }),
|
||||
Promise.resolve([{ name: 'vite-plugin-in-nested-async-array' }]),
|
||||
Promise.resolve([Promise.resolve({ name: 'vite-plugin-async-in-nested-async-array' })]),
|
||||
];
|
||||
const names = ['vite-plugin-to-find-first', 'vite-plugin-to-find-second'];
|
||||
expect(await hasVitePlugins(plugins, names)).toBeFalsy();
|
||||
});
|
||||
});
|
||||
26
code/lib/builder-vite/src/utils/has-vite-plugins.ts
Normal file
26
code/lib/builder-vite/src/utils/has-vite-plugins.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import type { PluginOption } from 'vite';
|
||||
|
||||
function checkName(plugin: PluginOption, names: string[]) {
|
||||
return (
|
||||
plugin !== null && typeof plugin === 'object' && 'name' in plugin && names.includes(plugin.name)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if ANY of the plugins in the array have a name that matches one of the names in the names array.
|
||||
* Will resolve any promises in the array.
|
||||
*/
|
||||
export async function hasVitePlugins(plugins: PluginOption[], names: string[]) {
|
||||
const resolvedPlugins = await Promise.all(plugins);
|
||||
// eslint-disable-next-line no-restricted-syntax -- we need to await in the loop
|
||||
for (const plugin of resolvedPlugins) {
|
||||
// eslint-disable-next-line no-await-in-loop -- we need to await in the loop
|
||||
if (Array.isArray(plugin) && Boolean(await hasVitePlugins(plugin, names))) {
|
||||
return true;
|
||||
}
|
||||
if (checkName(plugin, names)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
200
code/lib/builder-vite/src/utils/without-vite-plugins.test.ts
Normal file
200
code/lib/builder-vite/src/utils/without-vite-plugins.test.ts
Normal file
@ -0,0 +1,200 @@
|
||||
import { withoutVitePlugins } from './without-vite-plugins';
|
||||
|
||||
describe('withoutVitePlugins', () => {
|
||||
describe('should remove', () => {
|
||||
it('plugin in root', async () => {
|
||||
const plugins = [{ name: 'vite-plugin-root-to-remove' }, { name: 'vite-plugin-root-keep' }];
|
||||
const names = ['vite-plugin-root-to-remove'];
|
||||
|
||||
expect(await withoutVitePlugins(plugins, names)).toMatchInlineSnapshot(`
|
||||
Array [
|
||||
Object {
|
||||
"name": "vite-plugin-root-keep",
|
||||
},
|
||||
]
|
||||
`);
|
||||
});
|
||||
|
||||
it('plugin in nested array', async () => {
|
||||
const plugins = [
|
||||
[{ name: 'vite-plugin-nested-to-remove' }, { name: 'vite-plugin-nested-keep' }],
|
||||
{ name: 'vite-plugin-root-keep' },
|
||||
];
|
||||
const names = ['vite-plugin-nested-to-remove'];
|
||||
|
||||
expect(await withoutVitePlugins(plugins, names)).toMatchInlineSnapshot(`
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"name": "vite-plugin-nested-keep",
|
||||
},
|
||||
],
|
||||
Object {
|
||||
"name": "vite-plugin-root-keep",
|
||||
},
|
||||
]
|
||||
`);
|
||||
});
|
||||
|
||||
it('plugin in nested async array', async () => {
|
||||
const plugins = [
|
||||
Promise.resolve([
|
||||
{ name: 'vite-plugin-nested-async-to-remove' },
|
||||
{ name: 'vite-plugin-nested-async-keep' },
|
||||
]),
|
||||
];
|
||||
const names = ['vite-plugin-nested-async-to-remove'];
|
||||
|
||||
expect(await withoutVitePlugins(plugins, names)).toMatchInlineSnapshot(`
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"name": "vite-plugin-nested-async-keep",
|
||||
},
|
||||
],
|
||||
]
|
||||
`);
|
||||
});
|
||||
|
||||
it('async plugin in root', async () => {
|
||||
const plugins = [
|
||||
Promise.resolve({ name: 'vite-plugin-async-root-to-remove' }),
|
||||
Promise.resolve({ name: 'vite-plugin-async-root-keep' }),
|
||||
];
|
||||
const names = ['vite-plugin-async-root-to-remove'];
|
||||
|
||||
expect(await withoutVitePlugins(plugins, names)).toMatchInlineSnapshot(`
|
||||
Array [
|
||||
Object {
|
||||
"name": "vite-plugin-async-root-keep",
|
||||
},
|
||||
]
|
||||
`);
|
||||
});
|
||||
|
||||
it('async plugin in nested array', async () => {
|
||||
const plugins = [
|
||||
[
|
||||
Promise.resolve({ name: 'vite-plugin-async-nested-to-remove' }),
|
||||
Promise.resolve({ name: 'vite-plugin-async-nested-keep' }),
|
||||
],
|
||||
Promise.resolve({ name: 'vite-plugin-async-root-keep' }),
|
||||
];
|
||||
const names = ['vite-plugin-async-nested-to-remove'];
|
||||
|
||||
expect(await withoutVitePlugins(plugins, names)).toMatchInlineSnapshot(`
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"name": "vite-plugin-async-nested-keep",
|
||||
},
|
||||
],
|
||||
Object {
|
||||
"name": "vite-plugin-async-root-keep",
|
||||
},
|
||||
]
|
||||
`);
|
||||
});
|
||||
it('async plugin in nested async array', async () => {
|
||||
const plugins = [
|
||||
Promise.resolve([
|
||||
Promise.resolve({ name: 'vite-plugin-async-nested-async-to-remove' }),
|
||||
Promise.resolve({ name: 'vite-plugin-async-nested-async-keep' }),
|
||||
]),
|
||||
];
|
||||
const names = ['vite-plugin-async-nested-async-to-remove'];
|
||||
|
||||
expect(await withoutVitePlugins(plugins, names)).toMatchInlineSnapshot(`
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"name": "vite-plugin-async-nested-async-keep",
|
||||
},
|
||||
],
|
||||
]
|
||||
`);
|
||||
});
|
||||
|
||||
it('multiple plugins in root', async () => {
|
||||
const plugins = [
|
||||
{ name: 'vite-plugin-root-first-to-remove' },
|
||||
{ name: 'vite-plugin-root-keep' },
|
||||
{ name: 'vite-plugin-root-second-to-remove' },
|
||||
];
|
||||
const names = ['vite-plugin-root-first-to-remove', 'vite-plugin-root-second-to-remove'];
|
||||
|
||||
expect(await withoutVitePlugins(plugins, names)).toMatchInlineSnapshot(`
|
||||
Array [
|
||||
Object {
|
||||
"name": "vite-plugin-root-keep",
|
||||
},
|
||||
]
|
||||
`);
|
||||
});
|
||||
|
||||
it('multiple plugins in all cases', async () => {
|
||||
const plugins = [
|
||||
{ name: 'vite-plugin-root-to-remove' },
|
||||
Promise.resolve({ name: 'vite-plugin-async-root-to-remove' }),
|
||||
[{ name: 'vite-plugin-nested-to-remove' }],
|
||||
Promise.resolve([{ name: 'vite-plugin-async-nested-to-remove' }]),
|
||||
[Promise.resolve({ name: 'vite-plugin-nested-async-to-remove' })],
|
||||
Promise.resolve([Promise.resolve({ name: 'vite-plugin-async-nested-async-to-remove' })]),
|
||||
];
|
||||
const names = [
|
||||
'vite-plugin-root-to-remove',
|
||||
'vite-plugin-async-root-to-remove',
|
||||
'vite-plugin-nested-to-remove',
|
||||
'vite-plugin-async-nested-to-remove',
|
||||
'vite-plugin-nested-async-to-remove',
|
||||
'vite-plugin-async-nested-async-to-remove',
|
||||
];
|
||||
|
||||
expect(await withoutVitePlugins(plugins, names)).toMatchInlineSnapshot(`
|
||||
Array [
|
||||
Array [],
|
||||
Array [],
|
||||
Array [],
|
||||
Array [],
|
||||
]
|
||||
`);
|
||||
});
|
||||
});
|
||||
|
||||
it('should no-op if plugins are not found', async () => {
|
||||
const plugins = [
|
||||
{ name: 'vite-plugin-root' },
|
||||
[{ name: 'vite-plugin-in-nested-array' }],
|
||||
Promise.resolve({ name: 'vite-plugin-async-root' }),
|
||||
Promise.resolve([{ name: 'vite-plugin-in-nested-async-array' }]),
|
||||
Promise.resolve([Promise.resolve({ name: 'vite-plugin-async-in-nested-async-array' })]),
|
||||
];
|
||||
const names = ['vite-plugin-to-remove-first', 'vite-plugin-to-remove-second'];
|
||||
|
||||
expect(await withoutVitePlugins(plugins, names)).toMatchInlineSnapshot(`
|
||||
Array [
|
||||
Object {
|
||||
"name": "vite-plugin-root",
|
||||
},
|
||||
Array [
|
||||
Object {
|
||||
"name": "vite-plugin-in-nested-array",
|
||||
},
|
||||
],
|
||||
Object {
|
||||
"name": "vite-plugin-async-root",
|
||||
},
|
||||
Array [
|
||||
Object {
|
||||
"name": "vite-plugin-in-nested-async-array",
|
||||
},
|
||||
],
|
||||
Array [
|
||||
Object {
|
||||
"name": "vite-plugin-async-in-nested-async-array",
|
||||
},
|
||||
],
|
||||
]
|
||||
`);
|
||||
});
|
||||
});
|
||||
@ -1,16 +1,24 @@
|
||||
import type { PluginOption } from 'vite';
|
||||
|
||||
// recursively remove all plugins with the given names
|
||||
export const withoutVitePlugins = (
|
||||
/**
|
||||
* Recursively removes all plugins with the names given
|
||||
* Resolves async plugins
|
||||
*/
|
||||
export const withoutVitePlugins = async (
|
||||
plugins: PluginOption[] = [],
|
||||
namesToRemove: string[]
|
||||
): PluginOption[] =>
|
||||
plugins.map((plugin) => {
|
||||
): Promise<PluginOption[]> => {
|
||||
const result = [];
|
||||
const resolvedPlugins = await Promise.all(plugins);
|
||||
// eslint-disable-next-line no-restricted-syntax -- we need to await in the loop
|
||||
for (const plugin of resolvedPlugins) {
|
||||
if (Array.isArray(plugin)) {
|
||||
return withoutVitePlugins(plugin, namesToRemove);
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
result.push(await withoutVitePlugins(plugin, namesToRemove));
|
||||
}
|
||||
if (plugin && 'name' in plugin && namesToRemove.includes(plugin.name)) {
|
||||
return false;
|
||||
if (plugin && 'name' in plugin && !namesToRemove.includes(plugin.name)) {
|
||||
result.push(plugin);
|
||||
}
|
||||
return plugin;
|
||||
});
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
@ -7,12 +7,12 @@ import type {
|
||||
UserConfig as ViteConfig,
|
||||
InlineConfig,
|
||||
} from 'vite';
|
||||
import viteReact from '@vitejs/plugin-react';
|
||||
import externalGlobals from 'rollup-plugin-external-globals';
|
||||
import { isPreservingSymlinks, getFrameworkName } from '@storybook/core-common';
|
||||
import { globals } from '@storybook/preview/globals';
|
||||
import {
|
||||
codeGeneratorPlugin,
|
||||
csfPlugin,
|
||||
injectExportOrderPlugin,
|
||||
mdxPlugin,
|
||||
stripStoryHMRBoundary,
|
||||
@ -74,8 +74,8 @@ export async function pluginConfig(options: ExtendedOptions) {
|
||||
|
||||
const plugins = [
|
||||
codeGeneratorPlugin(options),
|
||||
// sourceLoaderPlugin(options),
|
||||
mdxPlugin(),
|
||||
await csfPlugin(options),
|
||||
mdxPlugin(options),
|
||||
injectExportOrderPlugin,
|
||||
stripStoryHMRBoundary(),
|
||||
{
|
||||
@ -94,11 +94,6 @@ export async function pluginConfig(options: ExtendedOptions) {
|
||||
externalGlobals(globals),
|
||||
] as PluginOption[];
|
||||
|
||||
// We need the react plugin here to support MDX in non-react projects.
|
||||
if (frameworkName !== '@storybook/react-vite') {
|
||||
plugins.push(viteReact({ exclude: [/\.stories\.([tj])sx?$/, /node_modules/, /\.([tj])sx?$/] }));
|
||||
}
|
||||
|
||||
// TODO: framework doesn't exist, should move into framework when/if built
|
||||
if (frameworkName === '@storybook/preact-vite') {
|
||||
// eslint-disable-next-line global-require
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/builder-webpack5",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook framework-agnostic API",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -54,24 +54,24 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/addons": "7.0.0-alpha.60",
|
||||
"@storybook/api": "7.0.0-alpha.60",
|
||||
"@storybook/channel-postmessage": "7.0.0-alpha.60",
|
||||
"@storybook/channel-websocket": "7.0.0-alpha.60",
|
||||
"@storybook/channels": "7.0.0-alpha.60",
|
||||
"@storybook/client-api": "7.0.0-alpha.60",
|
||||
"@storybook/client-logger": "7.0.0-alpha.60",
|
||||
"@storybook/components": "7.0.0-alpha.60",
|
||||
"@storybook/core-common": "7.0.0-alpha.60",
|
||||
"@storybook/core-events": "7.0.0-alpha.60",
|
||||
"@storybook/core-webpack": "7.0.0-alpha.60",
|
||||
"@storybook/manager-api": "7.0.0-alpha.60",
|
||||
"@storybook/node-logger": "7.0.0-alpha.60",
|
||||
"@storybook/preview": "7.0.0-alpha.60",
|
||||
"@storybook/preview-api": "7.0.0-alpha.60",
|
||||
"@storybook/router": "7.0.0-alpha.60",
|
||||
"@storybook/store": "7.0.0-alpha.60",
|
||||
"@storybook/theming": "7.0.0-alpha.60",
|
||||
"@storybook/addons": "7.0.0-beta.6",
|
||||
"@storybook/api": "7.0.0-beta.6",
|
||||
"@storybook/channel-postmessage": "7.0.0-beta.6",
|
||||
"@storybook/channel-websocket": "7.0.0-beta.6",
|
||||
"@storybook/channels": "7.0.0-beta.6",
|
||||
"@storybook/client-api": "7.0.0-beta.6",
|
||||
"@storybook/client-logger": "7.0.0-beta.6",
|
||||
"@storybook/components": "7.0.0-beta.6",
|
||||
"@storybook/core-common": "7.0.0-beta.6",
|
||||
"@storybook/core-events": "7.0.0-beta.6",
|
||||
"@storybook/core-webpack": "7.0.0-beta.6",
|
||||
"@storybook/manager-api": "7.0.0-beta.6",
|
||||
"@storybook/node-logger": "7.0.0-beta.6",
|
||||
"@storybook/preview": "7.0.0-beta.6",
|
||||
"@storybook/preview-api": "7.0.0-beta.6",
|
||||
"@storybook/router": "7.0.0-beta.6",
|
||||
"@storybook/store": "7.0.0-beta.6",
|
||||
"@storybook/theming": "7.0.0-beta.6",
|
||||
"@types/node": "^16.0.0",
|
||||
"@types/semver": "^7.3.4",
|
||||
"babel-loader": "^8.3.0",
|
||||
@ -79,7 +79,7 @@
|
||||
"browser-assert": "^1.2.1",
|
||||
"case-sensitive-paths-webpack-plugin": "^2.4.0",
|
||||
"css-loader": "^6.7.1",
|
||||
"express": "^4.17.1",
|
||||
"express": "^4.17.3",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.8",
|
||||
"fs-extra": "^9.0.1",
|
||||
"global": "^4.4.0",
|
||||
@ -126,5 +126,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -147,8 +147,6 @@ export default async (
|
||||
|
||||
previewAnnotations.forEach((previewAnnotationFilename: string | undefined) => {
|
||||
if (!previewAnnotationFilename) return;
|
||||
const previewApi = storybookPaths['@storybook/preview-api'];
|
||||
const clientLogger = storybookPaths['@storybook/client-logger'];
|
||||
|
||||
// Ensure that relative paths end up mapped to a filename in the cwd, so a later import
|
||||
// of the `previewAnnotationFilename` in the template works.
|
||||
@ -159,8 +157,6 @@ export default async (
|
||||
// file, see https://github.com/storybookjs/storybook/pull/16727#issuecomment-986485173
|
||||
virtualModuleMapping[entryFilename] = interpolate(entryTemplate, {
|
||||
previewAnnotationFilename,
|
||||
previewApi,
|
||||
clientLogger,
|
||||
});
|
||||
entries.push(entryFilename);
|
||||
});
|
||||
|
||||
@ -16,7 +16,7 @@ export interface TypescriptOptions extends TypeScriptOptionsBase {
|
||||
/**
|
||||
* Configures `fork-ts-checker-webpack-plugin`
|
||||
*/
|
||||
checkOptions?: ForkTsCheckerWebpackPlugin['options'];
|
||||
checkOptions?: ConstructorParameters<typeof ForkTsCheckerWebpackPlugin>[0];
|
||||
}
|
||||
|
||||
export interface StorybookConfigWebpack extends Pick<StorybookConfig, 'webpack' | 'webpackFinal'> {
|
||||
|
||||
@ -9,7 +9,7 @@ import {
|
||||
addArgsEnhancer,
|
||||
addArgTypesEnhancer,
|
||||
setGlobalRender,
|
||||
} from '{{previewApi}}';
|
||||
} from '@storybook/preview-api';
|
||||
import * as previewAnnotations from '{{previewAnnotationFilename}}';
|
||||
|
||||
Object.keys(previewAnnotations).forEach((key) => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channel-postmessage",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -42,9 +42,9 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/channels": "7.0.0-alpha.60",
|
||||
"@storybook/client-logger": "7.0.0-alpha.60",
|
||||
"@storybook/core-events": "7.0.0-alpha.60",
|
||||
"@storybook/channels": "7.0.0-beta.6",
|
||||
"@storybook/client-logger": "7.0.0-beta.6",
|
||||
"@storybook/core-events": "7.0.0-beta.6",
|
||||
"global": "^4.4.0",
|
||||
"qs": "^6.10.0",
|
||||
"telejson": "^7.0.3"
|
||||
@ -60,5 +60,5 @@
|
||||
"./src/index.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channel-websocket",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -42,8 +42,8 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/channels": "7.0.0-alpha.60",
|
||||
"@storybook/client-logger": "7.0.0-alpha.60",
|
||||
"@storybook/channels": "7.0.0-beta.6",
|
||||
"@storybook/client-logger": "7.0.0-beta.6",
|
||||
"global": "^4.4.0",
|
||||
"telejson": "^7.0.3"
|
||||
},
|
||||
@ -58,5 +58,5 @@
|
||||
"./src/index.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channels",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -52,5 +52,5 @@
|
||||
"./src/index.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "sb",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook CLI",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -24,7 +24,7 @@
|
||||
"prep": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/cli": "7.0.0-alpha.60"
|
||||
"@storybook/cli": "7.0.0-beta.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "~4.9.3"
|
||||
@ -32,5 +32,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "storybook",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook CLI",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -27,7 +27,7 @@
|
||||
"prep": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/cli": "7.0.0-alpha.60"
|
||||
"@storybook/cli": "7.0.0-beta.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "~4.9.3"
|
||||
@ -35,5 +35,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/cli",
|
||||
"version": "7.0.0-alpha.60",
|
||||
"version": "7.0.0-beta.6",
|
||||
"description": "Storybook's CLI - easiest method of adding storybook to your projects",
|
||||
"keywords": [
|
||||
"cli",
|
||||
@ -43,13 +43,13 @@
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@storybook/codemod": "7.0.0-alpha.60",
|
||||
"@storybook/core-common": "7.0.0-alpha.60",
|
||||
"@storybook/core-server": "7.0.0-alpha.60",
|
||||
"@storybook/csf-tools": "7.0.0-alpha.60",
|
||||
"@storybook/node-logger": "7.0.0-alpha.60",
|
||||
"@storybook/telemetry": "7.0.0-alpha.60",
|
||||
"@storybook/types": "7.0.0-alpha.60",
|
||||
"@storybook/codemod": "7.0.0-beta.6",
|
||||
"@storybook/core-common": "7.0.0-beta.6",
|
||||
"@storybook/core-server": "7.0.0-beta.6",
|
||||
"@storybook/csf-tools": "7.0.0-beta.6",
|
||||
"@storybook/node-logger": "7.0.0-beta.6",
|
||||
"@storybook/telemetry": "7.0.0-beta.6",
|
||||
"@storybook/types": "7.0.0-beta.6",
|
||||
"@types/semver": "^7.3.4",
|
||||
"boxen": "^5.1.2",
|
||||
"chalk": "^4.1.0",
|
||||
@ -58,7 +58,7 @@
|
||||
"detect-indent": "^6.1.0",
|
||||
"envinfo": "^7.7.3",
|
||||
"execa": "^5.0.0",
|
||||
"express": "^4.17.1",
|
||||
"express": "^4.17.3",
|
||||
"find-up": "^5.0.0",
|
||||
"fs-extra": "^9.0.1",
|
||||
"get-port": "^5.1.1",
|
||||
@ -77,7 +77,7 @@
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/client-api": "7.0.0-alpha.60",
|
||||
"@storybook/client-api": "7.0.0-beta.6",
|
||||
"@types/cross-spawn": "^6.0.2",
|
||||
"@types/prompts": "^2.0.9",
|
||||
"@types/puppeteer-core": "^2.1.0",
|
||||
@ -98,5 +98,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc"
|
||||
"gitHead": "edcda9c064bcb77c903263fafcaee2bd369f429a"
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta } from '@storybook/addon-docs';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import Code from './assets/code-brackets.svg';
|
||||
import Colors from './assets/colors.svg';
|
||||
import Comments from './assets/comments.svg';
|
||||
|
||||
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