GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 05:01:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'tech/tsup-cli' into tech/tsc-addon-storyshots

Browse Source
This commit is contained in:
Norbert de Langen 2022-12-20 13:40:44 +01:00
commit 5ff04b3ebc
No known key found for this signature in database
GPG Key ID: FD0E78AF9A837762
327 changed files with 8331 additions and 5147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
.circleci/config.yml
View File

@ -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,11 +39,11 @@ 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
- image: mcr.microsoft.com/playwright:v1.29.0-focal
environment:
NODE_OPTIONS: --max_old_space_size=6144
resource_class: <<parameters.class>>
@ -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,11 @@ 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:
- build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
- run:
name: Prettier
command: |
@ -100,7 +104,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 +146,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 +187,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 +227,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 +243,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 +257,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 +275,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 +297,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 +338,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 +363,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 +384,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 +418,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 +459,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 +540,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 +590,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 +615,25 @@ workflows:
jobs:
- build
- create-sandboxes:
parallelism: 23
parallelism: 26
requires:
- build
# - smoke-test-sandboxes: # disabled for now
# requires:
# - create-sandboxes
- build-sandboxes:
parallelism: 23
parallelism: 26
requires:
- create-sandboxes
- test-runner-sandboxes:
parallelism: 23
parallelism: 26
requires:
- build-sandboxes
- chromatic-sandboxes:
parallelism: 23
parallelism: 26
requires:
- build-sandboxes
- e2e-sandboxes:
parallelism: 23
parallelism: 26
requires:
- build-sandboxes

186
CHANGELOG.md
View File

@ -1,3 +1,189 @@
## 7.0.0-beta.12 (December 16, 2022)
#### Other
- Revert "Core: Wrap manager entries to handle exports" [#20311](https://github.com/storybooks/storybook/pull/20311)
## 7.0.0-beta.11 (December 16, 2022)
#### Features
- CLI: Improve automigration to show prompt-only migrations [#20292](https://github.com/storybooks/storybook/pull/20292)
#### Bug Fixes
- Angular: Fix webpackStatsJson types in angular-builder [#20296](https://github.com/storybooks/storybook/pull/20296)
- Fix: addon-storysource has no managerEntry, but defines a register and preset [#20304](https://github.com/storybooks/storybook/pull/20304)
#### Maintenance
- Core: Wrap manager entries to handle exports [#20308](https://github.com/storybooks/storybook/pull/20308)
- Core: improve manager-entries failure message [#20306](https://github.com/storybooks/storybook/pull/20306)
- Telemetry: Fix flakey test [#20282](https://github.com/storybooks/storybook/pull/20282)
#### Dependency Upgrades
- Vite: Make vite a peer dependency, update plugins [#20281](https://github.com/storybooks/storybook/pull/20281)
- Vite/Svelte: Remove addon-svelte-csf dep [#20280](https://github.com/storybooks/storybook/pull/20280)
## 7.0.0-beta.10 (December 16, 2022)
#### Build
- Build: compile detection was using a non-conforming package, causing cache to miss always. [#20297](https://github.com/storybooks/storybook/pull/20297)
#### Dependency Upgrades
- React-vite: Pin react-docgen version [#20300](https://github.com/storybooks/storybook/pull/20300)
## 7.0.0-beta.9 (December 16, 2022)
#### Features
- CLI: Add interactive babel config file generation [#20234](https://github.com/storybooks/storybook/pull/20234)
- CLI: Add automigration summary [#20276](https://github.com/storybooks/storybook/pull/20276)
#### Bug Fixes
- UI: Fix `enableShortcuts` support in `manager.ts` [#20264](https://github.com/storybooks/storybook/pull/20264)
- UI: Ensure manager entries load even if preceding ones failed [#20286](https://github.com/storybooks/storybook/pull/20286)
- Addon-viewport: Fix composition support [#20289](https://github.com/storybooks/storybook/pull/20289)
- Support Angular 15.0.4 [#20287](https://github.com/storybooks/storybook/pull/20287)
- Fix: peerDependencies issues reported [#20279](https://github.com/storybooks/storybook/pull/20279)
#### Build
- Build: ui/.storybook should not import from dist [#20284](https://github.com/storybooks/storybook/pull/20284)
- Build: bundle script a bit less repetitive, add a completion indicator [#20277](https://github.com/storybooks/storybook/pull/20277)
- Build: regen lockfiles [#20278](https://github.com/storybooks/storybook/pull/20278)
## 7.0.0-beta.8 (December 14, 2022)
#### Features
- Addon-docs: Use jsxOptions instead of mdxBabelOptions [#20271](https://github.com/storybooks/storybook/pull/20271)
#### Maintenance
- Svelte-vite: remove `svelteOptions` in automigration [#20270](https://github.com/storybooks/storybook/pull/20270)
#### Build
- Fix handling of inverted yes flag in `task` steps [#20268](https://github.com/storybooks/storybook/pull/20268)
## 7.0.0-beta.7 (December 14, 2022)
#### Features
- CLI: Add Next.js framework automigration [#19574](https://github.com/storybooks/storybook/pull/19574)
#### Bug Fixes
- Don't export renderer from framework [#20259](https://github.com/storybooks/storybook/pull/20259)
- Upgrade sb dep as well in sb upgrade [#20258](https://github.com/storybooks/storybook/pull/20258)
- Vite: Make the bail function work if the server fails to start [#20243](https://github.com/storybooks/storybook/pull/20243)
- Csf-tools: Fix local vars handling in MDX-generated CSF [#20255](https://github.com/storybooks/storybook/pull/20255)
- Csf-plugin: Fix spurious storiesOf warnings [#20256](https://github.com/storybooks/storybook/pull/20256)
- Core: Remove unnecessary peer deps [#20231](https://github.com/storybooks/storybook/pull/20231)
- Fix issues with running SSv6 [#20253](https://github.com/storybooks/storybook/pull/20253)
- Core: Fix config.base relative paths [#20232](https://github.com/storybooks/storybook/pull/20232)
- Fix: vite devmode with storyStoreV6 by ensuring singleton via global [#20207](https://github.com/storybooks/storybook/pull/20207)
#### Maintenance
- Addon-docs: Upgrade mdx2-csf and use its JSX handling [#20261](https://github.com/storybooks/storybook/pull/20261)
- Vite: Use mdx2 babel pre-processing [#20241](https://github.com/storybooks/storybook/pull/20241)
- Addon-docs: Restore deprecated blocks entry point [#20246](https://github.com/storybooks/storybook/pull/20246)
#### Build
- Add Next 12 sandbox [#20092](https://github.com/storybooks/storybook/pull/20092)
#### Dependency Upgrades
- Add optional TypeScript peer dependency [#20244](https://github.com/storybooks/storybook/pull/20244)
## 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! 🎉

2
CONTRIBUTING.md
View File

@ -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".

23
MIGRATION.md
View File

@ -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)
@ -44,6 +45,7 @@
- [Default docs styles will leak into non-story user components](#default-docs-styles-will-leak-into-non-story-user-components)
- [Explicit `<code>` elements are no longer syntax highlighted](#explicit-code-elements-are-no-longer-syntax-highlighted)
- [Dropped source loader / storiesOf static snippets](#dropped-source-loader--storiesof-static-snippets)
- [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration)
- [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
- [Autoplay in docs](#autoplay-in-docs)
- [7.0 Deprecations](#70-deprecations)
@ -275,6 +277,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 +589,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 +606,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 +650,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 +680,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.
@ -900,6 +913,10 @@ module.exports = {
};
```
#### Dropped addon-docs manual babel configuration
Addon-docs previously accepted `configureJsx` and `mdxBabelOptions` options, which allowed full customization of the babel options used to process markdown and mdx files. This has been simplified in 7.0, with a new option, `jsxOptions`, which can be used to customize the behavior of `@babel/preset-react`.
#### Dropped addon-docs manual configuration
Storybook Docs 5.x shipped with instructions for how to manually configure webpack and storybook without the use of Storybook's "presets" feature. Over time, these docs went out of sync. Now in Storybook 7 we have removed support for manual configuration entirely.

25
code/addons/a11y/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Test component compliance with web accessibility standards",
"keywords": [
"a11y",
@ -63,22 +63,23 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addon-highlight": "7.0.0-beta.0",
"@storybook/channels": "7.0.0-beta.0",
"@storybook/client-logger": "7.0.0-beta.0",
"@storybook/components": "7.0.0-beta.0",
"@storybook/core-events": "7.0.0-beta.0",
"@storybook/manager-api": "7.0.0-beta.0",
"@storybook/preview-api": "7.0.0-beta.0",
"@storybook/theming": "7.0.0-beta.0",
"@storybook/types": "7.0.0-beta.0",
"@storybook/addon-highlight": "7.0.0-beta.12",
"@storybook/channels": "7.0.0-beta.12",
"@storybook/client-logger": "7.0.0-beta.12",
"@storybook/components": "7.0.0-beta.12",
"@storybook/core-events": "7.0.0-beta.12",
"@storybook/manager-api": "7.0.0-beta.12",
"@storybook/preview-api": "7.0.0-beta.12",
"@storybook/theming": "7.0.0-beta.12",
"@storybook/types": "7.0.0-beta.12",
"axe-core": "^4.2.0",
"global": "^4.4.0",
"lodash": "^4.17.21",
"react-sizeme": "^3.0.1"
"react-resize-detector": "^7.1.2"
},
"devDependencies": {
"@testing-library/react": "^11.2.2",
"resize-observer-polyfill": "^1.5.1",
"typescript": "~4.9.3"
},
"peerDependencies": {
@ -103,7 +104,7 @@
"./src/preview.tsx"
]
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70",
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957",
"storybook": {
"displayName": "Accessibility",
"icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",

3
code/addons/a11y/src/components/A11YPanel.test.tsx
View File

@ -8,6 +8,9 @@ import { A11YPanel } from './A11YPanel';
import { EVENTS } from '../constants';
jest.mock('@storybook/manager-api');
global.ResizeObserver = require('resize-observer-polyfill');
const mockedApi = api as jest.Mocked<typeof api>;
const axeResult = {

8
code/addons/a11y/src/components/Report/Rules.tsx
View File

@ -3,7 +3,7 @@ import React from 'react';
import { styled } from '@storybook/theming';
import { Badge } from '@storybook/components';
import type { CheckResult } from 'axe-core';
import { SizeMe } from 'react-sizeme';
import ReactResizeDetector from 'react-resize-detector';
const List = styled.div({
display: 'flex',
@ -71,14 +71,14 @@ const Rule: FC<RuleProps> = ({ rule }) => {
break;
}
return (
<SizeMe refreshMode="debounce">
{({ size }) => (
<ReactResizeDetector handleWidth handleHeight refreshMode="debounce">
{(size) => (
<Item elementWidth={size.width || 0}>
<StyledBadge status={badgeType}>{formatSeverityText(rule.impact)}</StyledBadge>
<Message>{rule.message}</Message>
</Item>
)}
</SizeMe>
</ReactResizeDetector>
);
};

8
code/addons/a11y/src/components/Tabs.tsx
View File

@ -2,7 +2,7 @@ import * as React from 'react';
import { styled } from '@storybook/theming';
import type { NodeResult, Result } from 'axe-core';
import { SizeMe } from 'react-sizeme';
import ReactResizeDetector from 'react-resize-detector';
import HighlightToggle from './Report/HighlightToggle';
import type { RuleType } from './A11YPanel';
@ -111,8 +111,8 @@ export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
const highlightToggleId = `${tabs[activeTab].type}-global-checkbox`;
const highlightLabel = `Highlight results`;
return (
<SizeMe refreshMode="debounce">
{({ size }) => (
<ReactResizeDetector handleWidth handleHeight refreshMode="debounce">
{(size) => (
<Container>
<List>
<TabsWrapper>
@ -143,6 +143,6 @@ export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
{tabs[activeTab].panel}
</Container>
)}
</SizeMe>
</ReactResizeDetector>
);
};

18
code/addons/actions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Get UI feedback when an action is performed on an interactive element",
"keywords": [
"storybook",
@ -77,13 +77,13 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/client-logger": "7.0.0-beta.0",
"@storybook/components": "7.0.0-beta.0",
"@storybook/core-events": "7.0.0-beta.0",
"@storybook/manager-api": "7.0.0-beta.0",
"@storybook/preview-api": "7.0.0-beta.0",
"@storybook/theming": "7.0.0-beta.0",
"@storybook/types": "7.0.0-beta.0",
"@storybook/client-logger": "7.0.0-beta.12",
"@storybook/components": "7.0.0-beta.12",
"@storybook/core-events": "7.0.0-beta.12",
"@storybook/manager-api": "7.0.0-beta.12",
"@storybook/preview-api": "7.0.0-beta.12",
"@storybook/theming": "7.0.0-beta.12",
"@storybook/types": "7.0.0-beta.12",
"dequal": "^2.0.2",
"global": "^4.4.0",
"lodash": "^4.17.21",
@ -121,7 +121,7 @@
"./src/preview.ts"
]
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70",
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957",
"storybook": {
"displayName": "Actions",
"unsupportedFrameworks": [

18
code/addons/backgrounds/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Switch backgrounds to view components in different settings",
"keywords": [
"addon",
@ -76,13 +76,13 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/client-logger": "7.0.0-beta.0",
"@storybook/components": "7.0.0-beta.0",
"@storybook/core-events": "7.0.0-beta.0",
"@storybook/manager-api": "7.0.0-beta.0",
"@storybook/preview-api": "7.0.0-beta.0",
"@storybook/theming": "7.0.0-beta.0",
"@storybook/types": "7.0.0-beta.0",
"@storybook/client-logger": "7.0.0-beta.12",
"@storybook/components": "7.0.0-beta.12",
"@storybook/core-events": "7.0.0-beta.12",
"@storybook/manager-api": "7.0.0-beta.12",
"@storybook/preview-api": "7.0.0-beta.12",
"@storybook/theming": "7.0.0-beta.12",
"@storybook/types": "7.0.0-beta.12",
"global": "^4.4.0",
"memoizerific": "^1.11.3",
"ts-dedent": "^2.0.0"
@ -112,7 +112,7 @@
"./src/preview.tsx"
]
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70",
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957",
"storybook": {
"displayName": "Backgrounds",
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",

22
code/addons/controls/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-controls",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Interact with component inputs dynamically in the Storybook UI",
"keywords": [
"addon",
@ -68,15 +68,15 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/blocks": "7.0.0-beta.0",
"@storybook/client-logger": "7.0.0-beta.0",
"@storybook/components": "7.0.0-beta.0",
"@storybook/core-common": "7.0.0-beta.0",
"@storybook/manager-api": "7.0.0-beta.0",
"@storybook/node-logger": "7.0.0-beta.0",
"@storybook/preview-api": "7.0.0-beta.0",
"@storybook/theming": "7.0.0-beta.0",
"@storybook/types": "7.0.0-beta.0",
"@storybook/blocks": "7.0.0-beta.12",
"@storybook/client-logger": "7.0.0-beta.12",
"@storybook/components": "7.0.0-beta.12",
"@storybook/core-common": "7.0.0-beta.12",
"@storybook/manager-api": "7.0.0-beta.12",
"@storybook/node-logger": "7.0.0-beta.12",
"@storybook/preview-api": "7.0.0-beta.12",
"@storybook/theming": "7.0.0-beta.12",
"@storybook/types": "7.0.0-beta.12",
"lodash": "^4.17.21",
"ts-dedent": "^2.0.0"
},
@ -102,7 +102,7 @@
],
"platform": "browser"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70",
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957",
"storybook": {
"displayName": "Controls",
"icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",

42
code/addons/docs/README.md
View File

@ -4,13 +4,13 @@
# Storybook Docs
> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
> migration guide: This page documents the method to configure Storybook introduced recently in 7.0.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring Storybook.
Storybook Docs transforms your Storybook stories into world-class component documentation.
**DocsPage.** Out of the box, all your stories get a `DocsPage`. `DocsPage` is a zero-config aggregation of your component stories, text descriptions, docgen comments, props tables, and code examples into clean, readable pages.
**MDX.** If you want more control, `MDX` allows you to write long-form markdown documentation and stories in one file. You can also use it to write pure documentation pages and embed them inside your Storybook alongside your stories.
**MDX.** If you want more control, `MDX` allows you to write long-form markdown documentation and include stories in one file. You can also use it to write pure documentation pages and embed them inside your Storybook alongside your stories.
Just like Storybook, Docs supports every major view layer including React, Vue, Angular, HTML, Web components, Svelte, and many more.
@ -40,32 +40,30 @@ For more information on how it works, see the [`DocsPage` reference](https://git
## MDX
`MDX` is a syntax for writing long-form documentation and stories side-by-side in the same file. In contrast to `DocsPage`, which provides smart documentation out of the box, `MDX` gives you full control over your component documentation.
`MDX` is a syntax for writing long-form documentation with stories side-by-side in the same file. In contrast to `DocsPage`, which provides smart documentation out of the box, `MDX` gives you full control over your component documentation.
Here's an example file:
```md
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import { Checkbox } from './Checkbox';
<!-- prettier-ignore-start -->
<Meta title="MDX/Checkbox" component={Checkbox} />
```md
import { Meta, Story, Canvas } from '@storybook/blocks';
import * as CheckboxStories from './Checkbox.stories';
<Meta title="MDX/Checkbox" of={CheckboxStories} />
# Checkbox
With `MDX` we can define a story for `Checkbox` right in the middle of our
With `MDX` we can include a story for `Checkbox` right in the middle of our
markdown documentation.
<Canvas>
<Story name="all checkboxes">
<form>
<Checkbox id="Unchecked" label="Unchecked" />
<Checkbox id="Checked" label="Checked" checked />
<Checkbox appearance="secondary" id="second" label="Secondary" checked />
</form>
</Story>
<Story of={CheckboxStories.Unchecked} />
</Canvas>
```
<!-- prettier-ignore-end -->
And here's how that's rendered in Storybook:
<center>
@ -102,8 +100,13 @@ Then add the following to your `.storybook/main.js`:
```js
module.exports = {
stories: ['../src/**/*.stories.@(js|mdx)'],
addons: ['@storybook/addon-docs'],
stories: [
'../src/**/*.mdx)', // 👈 Add this, to match your project's structure
'../src/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: [
'@storybook/addon-docs', // 👈 Also add this
],
};
```
@ -140,8 +143,7 @@ module.exports = {
{
name: '@storybook/addon-docs',
options: {
configureJSX: true,
babelOptions: {},
jsxOptions: {},
csfPluginOptions: null,
transcludeMarkdown: true,
},
@ -150,7 +152,7 @@ module.exports = {
};
```
The `configureJSX` option is useful when you're writing your docs in MDX and your project's babel config isn't already set up to handle JSX files. `babelOptions` is a way to further configure the babel processor when you're using `configureJSX`.
`jsxOptions` are options that will be passed to `@babel/preset-react` for `.md` and `.mdx` files.
`csfPluginOptions` is an object for configuring `@storybook/csf-plugin`. When set to `null` it tells docs not to run the `csf-plugin` at all, which can be used as an optimization, or if you're already using `csf-plugin` in your `main.js`.

28
code/addons/docs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-docs",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"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",
@ -98,16 +103,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-beta.0",
"@storybook/components": "7.0.0-beta.0",
"@storybook/csf-plugin": "7.0.0-beta.0",
"@storybook/csf-tools": "7.0.0-beta.0",
"@storybook/blocks": "7.0.0-beta.12",
"@storybook/components": "7.0.0-beta.12",
"@storybook/csf-plugin": "7.0.0-beta.12",
"@storybook/csf-tools": "7.0.0-beta.12",
"@storybook/mdx2-csf": "next",
"@storybook/node-logger": "7.0.0-beta.0",
"@storybook/postinstall": "7.0.0-beta.0",
"@storybook/preview-api": "7.0.0-beta.0",
"@storybook/theming": "7.0.0-beta.0",
"@storybook/types": "7.0.0-beta.0",
"@storybook/node-logger": "7.0.0-beta.12",
"@storybook/postinstall": "7.0.0-beta.12",
"@storybook/preview-api": "7.0.0-beta.12",
"@storybook/theming": "7.0.0-beta.12",
"@storybook/types": "7.0.0-beta.12",
"fs-extra": "^9.0.1",
"global": "^4.4.0",
"remark-external-links": "^8.0.0",
@ -131,10 +136,11 @@
"./src/index.ts",
"./src/preset.ts",
"./src/preview.ts",
"./src/blocks.ts",
"./src/shims/mdx-react-shim.ts"
]
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70",
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957",
"storybook": {
"displayName": "Docs",
"icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",

4
code/addons/docs/postinstall/presets.js
View File

@ -24,9 +24,7 @@ export default function transformer(file, api) {
((dependencies && dependencies['react-scripts']) ||
(devDependencies && devDependencies['react-scripts']))
) {
presetOptions = {
configureJSX: true,
};
presetOptions = {};
}
const j = api.jscodeshift;

7
code/addons/docs/src/blocks.ts Normal file
View 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';

89
code/addons/docs/src/preset.ts
View File

@ -5,64 +5,42 @@ import { dedent } from 'ts-dedent';
import type { IndexerOptions, StoryIndexer, DocsOptions, Options } from '@storybook/types';
import type { CsfPluginOptions } from '@storybook/csf-plugin';
import type { JSXOptions } from '@storybook/mdx2-csf';
import { loadCsf } from '@storybook/csf-tools';
// for frameworks that are not working with react, we need to configure
// the jsx to transpile mdx, for now there will be a flag for that
// for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx'
type BabelParams = {
mdxBabelOptions?: any;
configureJSX?: boolean;
};
function createBabelOptions({ mdxBabelOptions, configureJSX }: BabelParams) {
const babelPlugins = mdxBabelOptions?.plugins || [];
const filteredBabelPlugins = babelPlugins.filter((p: any) => {
const name = Array.isArray(p) ? p[0] : p;
if (typeof name === 'string') {
return !name.includes('plugin-transform-react-jsx');
}
return true;
});
const jsxPlugin = [
require.resolve('@babel/plugin-transform-react-jsx'),
{ pragma: 'React.createElement', pragmaFrag: 'React.Fragment' },
];
const plugins = configureJSX ? [...filteredBabelPlugins, jsxPlugin] : babelPlugins;
return {
// don't use the root babelrc by default (users can override this in mdxBabelOptions)
babelrc: false,
configFile: false,
...mdxBabelOptions,
plugins,
};
}
async function webpack(
webpackConfig: any = {},
options: Options &
BabelParams & {
/** @deprecated */
sourceLoaderOptions: any;
csfPluginOptions: CsfPluginOptions | null;
transcludeMarkdown: boolean;
} /* & Parameters<
options: Options & {
/**
* @deprecated
* Use `jsxOptions` to customize options used by @babel/preset-react
*/
configureJsx: boolean;
/**
* @deprecated
* Use `jsxOptions` to customize options used by @babel/preset-react
*/
mdxBabelOptions?: any;
/** @deprecated */
sourceLoaderOptions: any;
csfPluginOptions: CsfPluginOptions | null;
transcludeMarkdown: boolean;
jsxOptions?: JSXOptions;
} /* & Parameters<
typeof createCompiler
>[0] */
) {
const resolvedBabelLoader = await options.presets.apply('babelLoaderRef');
const { module = {} } = webpackConfig;
// it will reuse babel options that are already in use in storybook
// also, these babel options are chained with other presets.
const {
mdxBabelOptions,
configureJSX = true,
csfPluginOptions = {},
sourceLoaderOptions = null,
jsxOptions = {},
transcludeMarkdown = false,
sourceLoaderOptions = null,
configureJsx,
mdxBabelOptions,
} = options;
const mdxLoaderOptions = await options.presets.apply('mdxLoaderOptions', {
@ -71,6 +49,7 @@ async function webpack(
providerImportSource: '@storybook/addon-docs/mdx-react-shim',
remarkPlugins: [remarkSlug, remarkExternalLinks],
},
jsxOptions,
});
if (sourceLoaderOptions) {
@ -83,6 +62,16 @@ async function webpack(
`);
}
if (mdxBabelOptions || configureJsx) {
throw new Error(dedent`
Addon-docs no longer uses configureJsx or mdxBabelOptions in 7.0.
To update your configuration, please see migration instructions here:
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-addon-docs-manual-babel-configuration
`);
}
const mdxLoader = require.resolve('@storybook/mdx2-csf/loader');
let rules = module.rules || [];
@ -92,10 +81,6 @@ async function webpack(
{
test: /\.md$/,
use: [
{
loader: resolvedBabelLoader,
options: createBabelOptions({ mdxBabelOptions, configureJSX }),
},
{
loader: mdxLoader,
options: mdxLoaderOptions,
@ -120,10 +105,6 @@ async function webpack(
{
test: /(stories|story)\.mdx$/,
use: [
{
loader: resolvedBabelLoader,
options: createBabelOptions({ mdxBabelOptions, configureJSX }),
},
{
loader: mdxLoader,
options: {
@ -137,10 +118,6 @@ async function webpack(
test: /\.mdx$/,
exclude: /(stories|story)\.mdx$/,
use: [
{
loader: resolvedBabelLoader,
options: createBabelOptions({ mdxBabelOptions, configureJSX }),
},
{
loader: mdxLoader,
options: mdxLoaderOptions,

32
code/addons/essentials/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-essentials",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Curated addons to bring out the best of Storybook",
"keywords": [
"addon",
@ -119,23 +119,23 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addon-actions": "7.0.0-beta.0",
"@storybook/addon-backgrounds": "7.0.0-beta.0",
"@storybook/addon-controls": "7.0.0-beta.0",
"@storybook/addon-docs": "7.0.0-beta.0",
"@storybook/addon-highlight": "7.0.0-beta.0",
"@storybook/addon-measure": "7.0.0-beta.0",
"@storybook/addon-outline": "7.0.0-beta.0",
"@storybook/addon-toolbars": "7.0.0-beta.0",
"@storybook/addon-viewport": "7.0.0-beta.0",
"@storybook/core-common": "7.0.0-beta.0",
"@storybook/manager-api": "7.0.0-beta.0",
"@storybook/node-logger": "7.0.0-beta.0",
"@storybook/preview-api": "7.0.0-beta.0",
"@storybook/addon-actions": "7.0.0-beta.12",
"@storybook/addon-backgrounds": "7.0.0-beta.12",
"@storybook/addon-controls": "7.0.0-beta.12",
"@storybook/addon-docs": "7.0.0-beta.12",
"@storybook/addon-highlight": "7.0.0-beta.12",
"@storybook/addon-measure": "7.0.0-beta.12",
"@storybook/addon-outline": "7.0.0-beta.12",
"@storybook/addon-toolbars": "7.0.0-beta.12",
"@storybook/addon-viewport": "7.0.0-beta.12",
"@storybook/core-common": "7.0.0-beta.12",
"@storybook/manager-api": "7.0.0-beta.12",
"@storybook/node-logger": "7.0.0-beta.12",
"@storybook/preview-api": "7.0.0-beta.12",
"ts-dedent": "^2.0.0"
},
"devDependencies": {
"@storybook/vue": "7.0.0-beta.0",
"@storybook/vue": "7.0.0-beta.12",
"typescript": "^4.9.3"
},
"peerDependencies": {
@ -166,5 +166,5 @@
],
"platform": "node"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

8
code/addons/highlight/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-highlight",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Highlight DOM nodes within your stories",
"keywords": [
"storybook-addons",
@ -61,8 +61,8 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/core-events": "7.0.0-beta.0",
"@storybook/preview-api": "7.0.0-beta.0",
"@storybook/core-events": "7.0.0-beta.12",
"@storybook/preview-api": "7.0.0-beta.12",
"global": "^4.4.0"
},
"devDependencies": {
@ -78,7 +78,7 @@
"./src/preview.ts"
]
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70",
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957",
"sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Highlight",

22
code/addons/interactions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-interactions",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Automate, test and debug user interactions",
"keywords": [
"storybook-addons",
@ -72,15 +72,15 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/client-logger": "7.0.0-beta.0",
"@storybook/components": "7.0.0-beta.0",
"@storybook/core-common": "7.0.0-beta.0",
"@storybook/core-events": "7.0.0-beta.0",
"@storybook/instrumenter": "7.0.0-beta.0",
"@storybook/manager-api": "7.0.0-beta.0",
"@storybook/preview-api": "7.0.0-beta.0",
"@storybook/theming": "7.0.0-beta.0",
"@storybook/types": "7.0.0-beta.0",
"@storybook/client-logger": "7.0.0-beta.12",
"@storybook/components": "7.0.0-beta.12",
"@storybook/core-common": "7.0.0-beta.12",
"@storybook/core-events": "7.0.0-beta.12",
"@storybook/instrumenter": "7.0.0-beta.12",
"@storybook/manager-api": "7.0.0-beta.12",
"@storybook/preview-api": "7.0.0-beta.12",
"@storybook/theming": "7.0.0-beta.12",
"@storybook/types": "7.0.0-beta.12",
"global": "^4.4.0",
"jest-mock": "^27.0.6",
"polished": "^4.2.2",
@ -118,7 +118,7 @@
],
"platform": "node"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70",
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957",
"storybook": {
"displayName": "Interactions",
"unsupportedFrameworks": [

18
code/addons/jest/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
@ -70,14 +70,14 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/client-logger": "7.0.0-beta.0",
"@storybook/components": "7.0.0-beta.0",
"@storybook/core-events": "7.0.0-beta.0",
"@storybook/manager-api": "7.0.0-beta.0",
"@storybook/preview-api": "7.0.0-beta.0",
"@storybook/theming": "7.0.0-beta.0",
"@storybook/client-logger": "7.0.0-beta.12",
"@storybook/components": "7.0.0-beta.12",
"@storybook/core-events": "7.0.0-beta.12",
"@storybook/manager-api": "7.0.0-beta.12",
"@storybook/preview-api": "7.0.0-beta.12",
"@storybook/theming": "7.0.0-beta.12",
"global": "^4.4.0",
"react-sizeme": "^3.0.1",
"react-resize-detector": "^7.1.2",
"upath": "^1.2.0"
},
"devDependencies": {
@ -105,7 +105,7 @@
],
"platform": "browser"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70",
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957",
"storybook": {
"displayName": "Jest",
"icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",

12
code/addons/jest/src/components/Panel.tsx
View File

@ -2,10 +2,10 @@ import type { FC } from 'react';
import React, { Fragment } from 'react';
import { styled, themes, convert } from '@storybook/theming';
import { ScrollArea, TabsState, Link, Placeholder } from '@storybook/components';
import { SizeMe } from 'react-sizeme';
import Result from './Result';
import ResizeObserver from 'react-resize-detector';
import { Result } from './Result';
import type { Test } from '../hoc/provideJestResult';
import provideJestResult from '../hoc/provideJestResult';
import { provideTests as provideJestResult } from '../hoc/provideJestResult';
const StatusTypes = {
PASSED_TYPE: 'passed',
@ -134,8 +134,8 @@ const Content = styled(({ tests, className }: ContentProps) => (
const sortedTestsByCount = [...entries].sort((a, b) => a[1].length - b[1].length);
return (
<SizeMe refreshMode="debounce" key={name}>
{({ size }: { size: any }) => {
<ResizeObserver refreshMode="debounce" key={name}>
{(size) => {
const { width } = size;
return (
<section>
@ -259,7 +259,7 @@ const Content = styled(({ tests, className }: ContentProps) => (
</section>
);
}}
</SizeMe>
</ResizeObserver>
);
})}
</div>

2
code/addons/jest/src/components/Result.tsx
View File

@ -86,5 +86,3 @@ export function Result(props: ResultProps) {
</Fragment>
);
}
export default Result;

4
code/addons/jest/src/hoc/provideJestResult.tsx
View File

@ -37,7 +37,7 @@ export interface HocState {
tests?: Test[];
}
const provideTests = (Component: ComponentType<InjectedProps>) =>
export const provideTests = (Component: ComponentType<InjectedProps>) =>
class TestProvider extends ReactComponent<HocProps, HocState> {
state: HocState = {};
@ -82,5 +82,3 @@ const provideTests = (Component: ComponentType<InjectedProps>) =>
return active ? <Component tests={tests} /> : null;
}
};
export default provideTests;

16
code/addons/links/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Link stories together to build demos and prototypes with your UI components",
"keywords": [
"addon",
@ -77,13 +77,13 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/client-logger": "7.0.0-beta.0",
"@storybook/core-events": "7.0.0-beta.0",
"@storybook/client-logger": "7.0.0-beta.12",
"@storybook/core-events": "7.0.0-beta.12",
"@storybook/csf": "next",
"@storybook/manager-api": "7.0.0-beta.0",
"@storybook/preview-api": "7.0.0-beta.0",
"@storybook/router": "7.0.0-beta.0",
"@storybook/types": "7.0.0-beta.0",
"@storybook/manager-api": "7.0.0-beta.12",
"@storybook/preview-api": "7.0.0-beta.12",
"@storybook/router": "7.0.0-beta.12",
"@storybook/types": "7.0.0-beta.12",
"global": "^4.4.0",
"prop-types": "^15.7.2",
"ts-dedent": "^2.0.0"
@ -114,7 +114,7 @@
"./src/react/index.ts"
]
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70",
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957",
"storybook": {
"displayName": "Links",
"icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",

16
code/addons/measure/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-measure",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Inspect layouts by visualizing the box model",
"keywords": [
"storybook-addons",
@ -75,12 +75,12 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/client-logger": "7.0.0-beta.0",
"@storybook/components": "7.0.0-beta.0",
"@storybook/core-events": "7.0.0-beta.0",
"@storybook/manager-api": "7.0.0-beta.0",
"@storybook/preview-api": "7.0.0-beta.0",
"@storybook/types": "7.0.0-beta.0",
"@storybook/client-logger": "7.0.0-beta.12",
"@storybook/components": "7.0.0-beta.12",
"@storybook/core-events": "7.0.0-beta.12",
"@storybook/manager-api": "7.0.0-beta.12",
"@storybook/preview-api": "7.0.0-beta.12",
"@storybook/types": "7.0.0-beta.12",
"global": "^4.4.0"
},
"devDependencies": {
@ -108,7 +108,7 @@
"./src/preview.tsx"
]
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70",
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957",
"storybook": {
"displayName": "Measure",
"unsupportedFrameworks": [

10
code/addons/measure/src/withMeasure.ts
View File

@ -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

16
code/addons/outline/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-outline",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Outline all elements with CSS to help with layout placement and alignment",
"keywords": [
"storybook-addons",
@ -78,12 +78,12 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/client-logger": "7.0.0-beta.0",
"@storybook/components": "7.0.0-beta.0",
"@storybook/core-events": "7.0.0-beta.0",
"@storybook/manager-api": "7.0.0-beta.0",
"@storybook/preview-api": "7.0.0-beta.0",
"@storybook/types": "7.0.0-beta.0",
"@storybook/client-logger": "7.0.0-beta.12",
"@storybook/components": "7.0.0-beta.12",
"@storybook/core-events": "7.0.0-beta.12",
"@storybook/manager-api": "7.0.0-beta.12",
"@storybook/preview-api": "7.0.0-beta.12",
"@storybook/types": "7.0.0-beta.12",
"global": "^4.4.0",
"ts-dedent": "^2.0.0"
},
@ -112,7 +112,7 @@
"./src/preview.tsx"
]
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70",
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957",
"storybook": {
"displayName": "Outline",
"unsupportedFrameworks": [

24
code/addons/storyshots/storyshots-core/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Take a code snapshot of every story automatically with Jest",
"keywords": [
"addon",
@ -36,11 +36,11 @@
"dependencies": {
"@jest/transform": "^29.3.1",
"@storybook/babel-plugin-require-context-hook": "1.0.1",
"@storybook/client-api": "7.0.0-beta.0",
"@storybook/core-common": "7.0.0-beta.0",
"@storybook/core-webpack": "7.0.0-beta.0",
"@storybook/preview-api": "7.0.0-beta.0",
"@storybook/types": "7.0.0-beta.0",
"@storybook/client-api": "7.0.0-beta.12",
"@storybook/core-common": "7.0.0-beta.12",
"@storybook/core-webpack": "7.0.0-beta.12",
"@storybook/preview-api": "7.0.0-beta.12",
"@storybook/types": "7.0.0-beta.12",
"@types/glob": "^7.1.3",
"@types/jest-specific-snapshot": "^0.5.6",
"core-js": "^3.8.2",
@ -57,11 +57,11 @@
"@angular/core": "^13.3.6",
"@angular/platform-browser-dynamic": "^13.3.6",
"@emotion/jest": "^11.8.0",
"@storybook/addon-docs": "7.0.0-beta.0",
"@storybook/angular": "7.0.0-beta.0",
"@storybook/react": "7.0.0-beta.0",
"@storybook/vue": "7.0.0-beta.0",
"@storybook/vue3": "7.0.0-beta.0",
"@storybook/addon-docs": "7.0.0-beta.12",
"@storybook/angular": "7.0.0-beta.12",
"@storybook/react": "7.0.0-beta.12",
"@storybook/vue": "7.0.0-beta.12",
"@storybook/vue3": "7.0.0-beta.12",
"babel-loader": "^8.3.0",
"enzyme": "^3.11.0",
"enzyme-to-json": "^3.6.1",
@ -140,7 +140,7 @@
"publishConfig": {
"access": "public"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70",
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957",
"storybook": {
"displayName": "Storyshots",
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",

10
code/addons/storyshots/storyshots-puppeteer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots-puppeteer",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"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-beta.0",
"@storybook/types": "7.0.0-beta.0",
"@storybook/node-logger": "7.0.0-beta.12",
"@storybook/types": "7.0.0-beta.12",
"@types/jest-image-snapshot": "^5.1.0",
"jest-image-snapshot": "^6.0.0"
},
@ -46,7 +46,7 @@
"rimraf": "^3.0.2"
},
"peerDependencies": {
"@storybook/addon-storyshots": "7.0.0-beta.0",
"@storybook/addon-storyshots": "7.0.0-beta.12",
"puppeteer": ">=2.0.0"
},
"peerDependenciesMeta": {
@ -57,5 +57,5 @@
"publishConfig": {
"access": "public"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

0
code/addons/storysource/register.js → code/addons/storysource/manager.js
View File

20
code/addons/storysource/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storysource",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "View a story’s source code to see how it works and paste into your app",
"keywords": [
"addon",
@ -33,7 +33,7 @@
"import": "./dist/preset.mjs",
"types": "./dist/preset.d.ts"
},
"./register": {
"./manager": {
"require": "./dist/manager.js",
"import": "./dist/manager.mjs",
"types": "./dist/manager.d.ts"
@ -54,13 +54,13 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/client-logger": "7.0.0-beta.0",
"@storybook/components": "7.0.0-beta.0",
"@storybook/manager-api": "7.0.0-beta.0",
"@storybook/preview-api": "7.0.0-beta.0",
"@storybook/router": "7.0.0-beta.0",
"@storybook/source-loader": "7.0.0-beta.0",
"@storybook/theming": "7.0.0-beta.0",
"@storybook/client-logger": "7.0.0-beta.12",
"@storybook/components": "7.0.0-beta.12",
"@storybook/manager-api": "7.0.0-beta.12",
"@storybook/preview-api": "7.0.0-beta.12",
"@storybook/router": "7.0.0-beta.12",
"@storybook/source-loader": "7.0.0-beta.12",
"@storybook/theming": "7.0.0-beta.12",
"estraverse": "^5.2.0",
"prop-types": "^15.7.2",
"react-syntax-highlighter": "^15.5.0"
@ -92,7 +92,7 @@
"./src/preset.ts"
]
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70",
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957",
"storybook": {
"displayName": "Storysource",
"icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",

6
code/addons/storysource/src/preset.ts
View File

@ -29,8 +29,4 @@ function webpack(
};
}
function managerEntries(entry = [] as Array<unknown>) {
return [...entry, require.resolve('./manager')];
}
export { webpack, managerEntries };
export { webpack };

14
code/addons/toolbars/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-toolbars",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Create your own toolbar items that control story rendering",
"keywords": [
"addon",
@ -68,11 +68,11 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/client-logger": "7.0.0-beta.0",
"@storybook/components": "7.0.0-beta.0",
"@storybook/manager-api": "7.0.0-beta.0",
"@storybook/preview-api": "7.0.0-beta.0",
"@storybook/theming": "7.0.0-beta.0"
"@storybook/client-logger": "7.0.0-beta.12",
"@storybook/components": "7.0.0-beta.12",
"@storybook/manager-api": "7.0.0-beta.12",
"@storybook/preview-api": "7.0.0-beta.12",
"@storybook/theming": "7.0.0-beta.12"
},
"devDependencies": {
"typescript": "~4.9.3"
@ -99,7 +99,7 @@
],
"platform": "browser"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70",
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957",
"storybook": {
"displayName": "Toolbars",
"icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",

16
code/addons/viewport/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-viewport",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
"keywords": [
"addon",
@ -73,12 +73,12 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/client-logger": "7.0.0-beta.0",
"@storybook/components": "7.0.0-beta.0",
"@storybook/core-events": "7.0.0-beta.0",
"@storybook/manager-api": "7.0.0-beta.0",
"@storybook/preview-api": "7.0.0-beta.0",
"@storybook/theming": "7.0.0-beta.0",
"@storybook/client-logger": "7.0.0-beta.12",
"@storybook/components": "7.0.0-beta.12",
"@storybook/core-events": "7.0.0-beta.12",
"@storybook/manager-api": "7.0.0-beta.12",
"@storybook/preview-api": "7.0.0-beta.12",
"@storybook/theming": "7.0.0-beta.12",
"global": "^4.4.0",
"memoizerific": "^1.11.3",
"prop-types": "^15.7.2"
@ -109,7 +109,7 @@
"./src/preview.ts"
]
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70",
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957",
"storybook": {
"displayName": "Viewport",
"icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",

3
code/addons/viewport/src/Tool.tsx
View File

@ -58,7 +58,6 @@ const toLinks = memoize(50)((list: ViewportItem[], active: LinkBase, set, state,
.filter(Boolean);
});
const iframeId = 'storybook-preview-iframe';
const wrapperId = 'storybook-preview-wrapper';
interface LinkBase {
@ -208,7 +207,7 @@ export const ViewportTool: FC = memo(
<ActiveViewportSize>
<Global
styles={{
[`#${iframeId}`]: {
[`iframe[data-is-storybook="true"]`]: {
margin: `auto`,
transition: 'width .3s, height .3s',
position: 'relative',

30
code/frameworks/angular/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/angular",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"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-beta.0",
"@storybook/client-logger": "7.0.0-beta.0",
"@storybook/core-client": "7.0.0-beta.0",
"@storybook/core-common": "7.0.0-beta.0",
"@storybook/core-events": "7.0.0-beta.0",
"@storybook/core-server": "7.0.0-beta.0",
"@storybook/core-webpack": "7.0.0-beta.0",
"@storybook/docs-tools": "7.0.0-beta.0",
"@storybook/manager-api": "7.0.0-beta.0",
"@storybook/node-logger": "7.0.0-beta.0",
"@storybook/preview-api": "7.0.0-beta.0",
"@storybook/types": "7.0.0-beta.0",
"@storybook/builder-webpack5": "7.0.0-beta.12",
"@storybook/client-logger": "7.0.0-beta.12",
"@storybook/core-client": "7.0.0-beta.12",
"@storybook/core-common": "7.0.0-beta.12",
"@storybook/core-events": "7.0.0-beta.12",
"@storybook/core-server": "7.0.0-beta.12",
"@storybook/core-webpack": "7.0.0-beta.12",
"@storybook/docs-tools": "7.0.0-beta.12",
"@storybook/manager-api": "7.0.0-beta.12",
"@storybook/node-logger": "7.0.0-beta.12",
"@storybook/preview-api": "7.0.0-beta.12",
"@storybook/types": "7.0.0-beta.12",
"@types/node": "^16.0.0",
"@types/react": "^16.14.34",
"@types/react-dom": "^16.9.14",
@ -116,11 +116,11 @@
}
},
"engines": {
"node": ">=10.13.0"
"node": ">=16.0.0"
},
"publishConfig": {
"access": "public"
},
"builders": "dist/builders/builders.json",
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

2
code/frameworks/angular/src/builders/build-storybook/schema.json
View File

@ -53,7 +53,7 @@
}
},
"webpackStatsJson": {
"type": "boolean",
"type": ["boolean", "string"],
"description": "Write Webpack Stats JSON to disk",
"default": false
},

69
code/frameworks/angular/src/builders/utils/run-compodoc.spec.ts
View File

@ -79,4 +79,73 @@ describe('runCompodoc', () => {
}
);
});
it('should run compodoc with default output folder.', async () => {
runCompodoc(
{
compodocArgs: [],
tsconfig: 'path/to/tsconfig.json',
},
{
workspaceRoot: 'path/to/project',
logger: builderContextLoggerMock,
} as BuilderContext
)
.pipe(take(1))
.subscribe();
expect(cpSpawnMock.spawn).toHaveBeenCalledWith(
'npx',
['compodoc', '-p', 'path/to/tsconfig.json', '-d', 'path/to/project'],
{
cwd: 'path/to/project',
}
);
});
it('should run with custom output folder specified with --output compodocArgs', async () => {
runCompodoc(
{
compodocArgs: ['--output', 'path/to/customFolder'],
tsconfig: 'path/to/tsconfig.json',
},
{
workspaceRoot: 'path/to/project',
logger: builderContextLoggerMock,
} as BuilderContext
)
.pipe(take(1))
.subscribe();
expect(cpSpawnMock.spawn).toHaveBeenCalledWith(
'npx',
['compodoc', '-p', 'path/to/tsconfig.json', '--output', 'path/to/customFolder'],
{
cwd: 'path/to/project',
}
);
});
it('should run with custom output folder specified with -d compodocArgs', async () => {
runCompodoc(
{
compodocArgs: ['-d', 'path/to/customFolder'],
tsconfig: 'path/to/tsconfig.json',
},
{
workspaceRoot: 'path/to/project',
logger: builderContextLoggerMock,
} as BuilderContext
)
.pipe(take(1))
.subscribe();
expect(cpSpawnMock.spawn).toHaveBeenCalledWith(
'npx',
['compodoc', '-p', 'path/to/tsconfig.json', '-d', 'path/to/customFolder'],
{
cwd: 'path/to/project',
}
);
});
});

5
code/frameworks/angular/src/builders/utils/run-compodoc.ts
View File

@ -4,6 +4,8 @@ import { Observable } from 'rxjs';
import * as path from 'path';
const hasTsConfigArg = (args: string[]) => args.indexOf('-p') !== -1;
const hasOutputArg = (args: string[]) =>
args.indexOf('-d') !== -1 || args.indexOf('--output') !== -1;
// path.relative is necessary to workaround a compodoc issue with
// absolute paths on windows machines
@ -21,8 +23,7 @@ export const runCompodoc = (
'compodoc',
// Default options
...(hasTsConfigArg(compodocArgs) ? [] : ['-p', tsConfigPath]),
'-d',
`${context.workspaceRoot}`,
...(hasOutputArg(compodocArgs) ? [] : ['-d', `${context.workspaceRoot}`]),
...compodocArgs,
];

1
code/frameworks/angular/src/server/framework-preset-angular-cli.ts
View File

@ -1,4 +1,3 @@
/* eslint-disable @typescript-eslint/no-shadow */
import webpack from 'webpack';
import { logger } from '@storybook/node-logger';
import { BuilderContext, Target, targetFromTargetString } from '@angular-devkit/architect';

33
code/frameworks/angular/src/server/plugins/storybook-normalize-angular-entry-plugin.js vendored
View File

@ -25,23 +25,28 @@ export default class StorybookNormalizeAngularEntryPlugin {
}
apply(compiler) {
const webpackOptions = compiler.options;
const entry =
typeof webpackOptions.entry === 'function' ? webpackOptions.entry() : webpackOptions.entry;
compiler.hooks.environment.tap(PLUGIN_NAME, () => {
const webpackOptions = compiler.options;
const entry =
typeof webpackOptions.entry === 'function' ? webpackOptions.entry() : webpackOptions.entry;
webpackOptions.entry = async () => {
const entryResult = await entry;
webpackOptions.entry = async () => {
const entryResult = await entry;
if (entryResult.main && entryResult.styles) {
return {
main: {
import: Array.from(new Set([...entryResult.main.import, ...entryResult.styles.import])),
},
};
}
if (entryResult.main && entryResult.styles) {
return {
main: {
import: Array.from(
new Set([...entryResult.main.import, ...entryResult.styles.import])
),
},
};
}
return entry;
};
});
return entry;
};
compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
this.compilation = compilation;
});

16
code/frameworks/ember/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/ember",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"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-beta.0",
"@storybook/core-common": "7.0.0-beta.0",
"@storybook/docs-tools": "7.0.0-beta.0",
"@storybook/preview-api": "7.0.0-beta.0",
"@storybook/types": "7.0.0-beta.0",
"@storybook/builder-webpack5": "7.0.0-beta.12",
"@storybook/core-common": "7.0.0-beta.12",
"@storybook/docs-tools": "7.0.0-beta.12",
"@storybook/preview-api": "7.0.0-beta.12",
"@storybook/types": "7.0.0-beta.12",
"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": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

28
code/frameworks/html-vite/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/html-vite",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -48,22 +48,20 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addons": "7.0.0-beta.0",
"@storybook/builder-vite": "7.0.0-beta.0",
"@storybook/channel-postmessage": "7.0.0-beta.0",
"@storybook/channel-websocket": "7.0.0-beta.0",
"@storybook/client-api": "7.0.0-beta.0",
"@storybook/core-server": "7.0.0-beta.0",
"@storybook/html": "7.0.0-beta.0",
"@storybook/node-logger": "7.0.0-beta.0",
"@storybook/preview-web": "7.0.0-beta.0",
"magic-string": "^0.26.1",
"vite": "3"
"@storybook/addons": "7.0.0-beta.12",
"@storybook/builder-vite": "7.0.0-beta.12",
"@storybook/channel-postmessage": "7.0.0-beta.12",
"@storybook/channel-websocket": "7.0.0-beta.12",
"@storybook/client-api": "7.0.0-beta.12",
"@storybook/core-server": "7.0.0-beta.12",
"@storybook/html": "7.0.0-beta.12",
"@storybook/node-logger": "7.0.0-beta.12",
"@storybook/preview-web": "7.0.0-beta.12",
"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"
@ -78,5 +76,5 @@
],
"platform": "node"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

14
code/frameworks/html-webpack5/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/html-webpack5",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -48,10 +48,10 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/builder-webpack5": "7.0.0-beta.0",
"@storybook/core-common": "7.0.0-beta.0",
"@storybook/html": "7.0.0-beta.0",
"@storybook/preset-html-webpack": "7.0.0-beta.0",
"@storybook/builder-webpack5": "7.0.0-beta.12",
"@storybook/core-common": "7.0.0-beta.12",
"@storybook/html": "7.0.0-beta.12",
"@storybook/preset-html-webpack": "7.0.0-beta.12",
"@types/node": "^16.0.0",
"global": "^4.4.0"
},
@ -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": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

532
code/frameworks/nextjs/README.md
View File

@ -7,19 +7,30 @@
- [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)
- [Documentation](#documentation)
- [Options](#options)
- [Next.js's Image Component](#nextjss-image-component)
- [Local Images](#local-images)
- [Remote Images](#remote-images)
- [Optimization](#optimization)
- [AVIF](#avif)
- [Next.js Navigation](#nextjs-navigation)
- [Next.js Font Optimization](#nextjs-font-optimization)
- [@next/font/google](#nextfontgoogle)
- [@next/font/local](#nextfontlocal)
- [Not supported features of @next/font](#not-supported-features-of-nextfont)
- [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)
- [`useSelectedLayoutSegment` and `useSelectedLayoutSegments` hook](#useselectedlayoutsegment-and-useselectedlayoutsegments-hook)
- [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)
@ -30,15 +41,17 @@
- [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 Font Optimization](#nextjs-font-optimization)
👉 [Next.js Routing (next/router)](#nextjs-routing)
👉 [Next.js Navigation (next/navigation)](#nextjs-navigation)
@ -71,29 +84,58 @@
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
```
#### Automatic migration
When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/nextjs`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below.
#### Manual migration
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
@ -109,14 +151,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'),
},
},
// ...
};
```
@ -174,175 +215,63 @@ export default function Home() {
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 Navigation
### Next.js Font Optimization
Please note that [next/navigation](https://beta.nextjs.org/docs/upgrade-guide#step-5-migrating-routing-hooks) can only be used in components/pages of the `app` directory of Next.js v13 or higher.
[@next/font](https://nextjs.org/docs/basic-features/font-optimization) is partially supported in Storybook. The packages `@next/font/google` and `@next/font/local` are supported.
#### Set `nextjs.appDirectory` to `true`
#### @next/font/google
If your story imports components that use `next/navigation`, you need to set the parameter `nextjs.appDirectory` to `true` in your Story:
You don't have to do anything. `@next/font/google` is supported out of the box.
#### @next/font/local
For local fonts you have to define the [src](https://nextjs.org/docs/api-reference/next/font#src) property.
The path is relative to the directory where the font loader function is called.
If the following component defines your localFont like this:
```js
// SomeComponentThatUsesTheRouter.stories.js
import SomeComponentThatUsesTheNavigation from './SomeComponentThatUsesTheNavigation';
// src/components/MyComponent.js
import localFont from '@next/font/local';
export default {
component: SomeComponentThatUsesTheNavigation,
};
// if you have the actions addon
// you can click the links and see the route change events there
export const Example = {
parameters: {
nextjs: {
appDirectory: true,
},
},
},
const localRubikStorm = localFont({ src: './fonts/RubikStorm-Regular.ttf' });
```
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.
You have to tell Storybook where the `fonts` directory is located. The `from` value is relative to the `.storybook` directory. The `to` value is relative to the execution context of Storybook. Very likely it is the root of your project.
```js
// .storybook/preview.js
export const parameters = {
nextjs: {
appDirectory: true,
},
};
// .storybook/main.js
module.exports = {
...
"staticDirs": [
{
from: '../src/components/fonts',
to: 'src/components/fonts'
}
],
}
```
The parameter `nextjs.appDirectory` defaults to `false` if not set.
#### Not supported features of @next/font
#### Overriding defaults
The following features are not supported (yet). Support for these features might be planned for the future:
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 click the links and see the route change events there
export const Example = {
parameters: {
nextjs: {
appDirectory: true,
navigation: {
pathname: '/some-default-path',
query: {
foo: 'bar',
},
},
},
},
};
```
#### 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',
query: {
foo: 'bar',
},
},
},
};
```
#### 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 action tab 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 tab
action('nextNavigation.push')(...args);
// return whatever you want here
return Promise.resolve(true);
},
},
},
};
```
- [Support font loaders configuration in next.config.js](https://nextjs.org/docs/basic-features/font-optimization#specifying-a-subset)
- [fallback](https://nextjs.org/docs/api-reference/next/font#fallback) option
- [adjustFontFallback](https://nextjs.org/docs/api-reference/next/font#adjustfontfallback) option
- [declarations](https://nextjs.org/docs/api-reference/next/font#declarations) option
- [preload](https://nextjs.org/docs/api-reference/next/font#preload) option gets ignored. Storybook handles Font loading its own way.
- [display](https://nextjs.org/docs/api-reference/next/font#display) option gets ignored. All fonts are loaded with display set to "block" to make Storybook load the font properly.
### 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).
You should only use `next/router` in the `pages` directory of Next.js v13 or higher. In the `app` directory, it is necessary to use `next/navigation`.
> 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
@ -352,16 +281,16 @@ 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: {
nextjs: {
router: {
path: '/profile/[id]',
asPath: '/profile/ryanclementshax',
asPath: '/profile/1',
query: {
id: 'ryanclementshax',
id: '1',
},
},
},
@ -444,7 +373,7 @@ const defaultRouter = {
#### 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/preview.js
@ -453,7 +382,7 @@ export const parameters = {
nextjs: {
router: {
push() {
// The default implementation that logs the action into the action tab is lost
// The default implementation that logs the action into the Actions panel is lost
},
},
},
@ -470,10 +399,199 @@ export const parameters = {
nextjs: {
router: {
push(...args) {
// custom logic can go here
// this logs to the actions tab
// Custom logic can go here
// This logs to the Actions panel
action('nextRouter.push')(...args);
// return whatever you want here
// 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',
},
},
};
```
#### `useSelectedLayoutSegment` and `useSelectedLayoutSegments` hook
The `useSelectedLayoutSegment` and `useSelectedLayoutSegments` hooks are supported in Storybook. You have to set the `nextjs.navigation.segments` parameter to return the segments you want to use.
```js
// SomeComponentThatUsesTheNavigation.stories.js
import SomeComponentThatUsesTheNavigation from './SomeComponentThatUsesTheNavigation';
export default {
component: SomeComponentThatUsesTheNavigation,
parameters: {
nextjs: {
appDirectory: true,
navigation: {
segments: ['dashboard', 'analytics']
},
},
},
};
export const Example = {};
// SomeComponentThatUsesTheNavigation.js
import { useSelectedLayoutSegment, useSelectedLayoutSegments } from 'next/navigation';
export default function SomeComponentThatUsesTheNavigation() {
const segment = useSelectedLayoutSegment(); // dashboard
const segments = useSelectedLayoutSegments(); // ["dashboard", "analytics"]
...
}
```
The default value of `nextjs.navigation.segments` is `[]` if not set.
#### 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);
},
},
@ -496,7 +614,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')],
},
@ -508,7 +626,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'
@ -603,10 +721,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';
// ...
@ -659,14 +778,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'],
@ -703,9 +822,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**
@ -713,9 +832,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`
@ -728,15 +848,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.

29
code/frameworks/nextjs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/nextjs",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Storybook for Next.js",
"keywords": [
"storybook",
@ -59,12 +59,14 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/builder-webpack5": "7.0.0-beta.0",
"@storybook/core-common": "7.0.0-beta.0",
"@storybook/node-logger": "7.0.0-beta.0",
"@storybook/preset-react-webpack": "7.0.0-beta.0",
"@storybook/preview-api": "7.0.0-beta.0",
"@storybook/react": "7.0.0-beta.0",
"@next/font": "^13.0.7",
"@storybook/addon-actions": "7.0.0-beta.12",
"@storybook/builder-webpack5": "7.0.0-beta.12",
"@storybook/core-common": "7.0.0-beta.12",
"@storybook/node-logger": "7.0.0-beta.12",
"@storybook/preset-react-webpack": "7.0.0-beta.12",
"@storybook/preview-api": "7.0.0-beta.12",
"@storybook/react": "7.0.0-beta.12",
"@types/node": "^16.0.0",
"find-up": "^5.0.0",
"fs-extra": "^9.0.1",
@ -80,14 +82,16 @@
"tsconfig-paths-webpack-plugin": "^3.5.2"
},
"devDependencies": {
"@storybook/addon-actions": "7.0.0-beta.0",
"@babel/core": "^7.20.5",
"@babel/types": "^7.20.5",
"@storybook/addon-actions": "7.0.0-beta.12",
"@types/babel__core": "^7",
"next": "^13.0.5",
"typescript": "^4.9.3",
"webpack": "^5.65.0"
},
"peerDependencies": {
"@babel/core": "^7.11.5",
"@storybook/addon-actions": "7.0.0-alpha.43",
"next": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
@ -105,7 +109,7 @@
}
},
"engines": {
"node": ">=10.13.0"
"node": ">=16.0.0"
},
"publishConfig": {
"access": "public"
@ -115,9 +119,10 @@
"./src/index.ts",
"./src/preset.ts",
"./src/preview.tsx",
"./src/next-image-loader-stub.ts"
"./src/next-image-loader-stub.ts",
"./src/font/webpack/loader/storybook-nextjs-font-loader.ts"
],
"platform": "node"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

319
code/frameworks/nextjs/src/font/babel/helpers.ts Normal file
View File

@ -0,0 +1,319 @@
import type * as BabelTypesNamespace from '@babel/types';
import type * as BabelCoreNamespace from '@babel/core';
type BabelTypes = typeof BabelTypesNamespace;
type PrimaryTypes = Record<string, any> | string | number | boolean | undefined | null;
export type JSReturnValue = PrimaryTypes | Array<PrimaryTypes>;
export type VariableMeta = {
/**
* Variable Declaration name of the assigned function call
* @example
* import { Roboto } from '@next/font/google'
* const robotoName = Roboto({
* weight: '400'
* })
*
* // identifierName = 'robotName'
*/
identifierName: string;
/**
* Properties of the assigned function call
* @example
* import { Roboto } from '@next/font/google'
* const robotoName = Roboto({
* weight: '400'
* })
*
* // properties = { weight: '400' }
*/
properties: JSReturnValue;
/**
* Function name of the imported @next/font/google function
* @example
* import { Roboto } from '@next/font/google'
* const robotoName = Roboto({
* weight: '400'
* })
*
* // functionName = Roboto
*/
functionName: string;
};
function convertNodeToJSON(types: BabelTypes, node: any): JSReturnValue {
if (types.isBooleanLiteral(node) || types.isStringLiteral(node) || types.isNumericLiteral(node)) {
return node.value;
}
if (node.name === 'undefined' && !node.value) {
return undefined;
}
if (types.isNullLiteral(node)) {
return null;
}
if (types.isObjectExpression(node)) {
return computeProps(types, node.properties);
}
if (types.isArrayExpression(node)) {
return node.elements.reduce(
(acc, element) => [
...acc,
...(element?.type === 'SpreadElement'
? (convertNodeToJSON(types, element.argument) as PrimaryTypes[])
: [convertNodeToJSON(types, element)]),
],
[] as PrimaryTypes[]
);
}
return {};
}
function computeProps(
types: BabelTypes,
props: (
| BabelTypesNamespace.ObjectMethod
| BabelTypesNamespace.ObjectProperty
| BabelTypesNamespace.SpreadElement
)[]
) {
return props.reduce((acc, prop) => {
if (prop.type === 'SpreadElement') {
return {
...acc,
...(convertNodeToJSON(types, prop.argument) as Record<string, any>),
};
}
if (prop.type !== 'ObjectMethod') {
const val = convertNodeToJSON(types, prop.value);
if (val !== undefined && types.isIdentifier(prop.key)) {
return {
...acc,
[prop.key.name]: val,
};
}
}
return acc;
}, {});
}
export function isDefined<T>(value: T): value is Exclude<T, undefined> {
return value !== undefined;
}
/**
* Removes transformed variable declarations, which were already replaced with parameterized imports
* @example
* // AST
* import { Roboto, Inter } from '@next/font/google'
* const interName = Inter({
* subsets: ['latin'],
* })
* const robotoName = Roboto({
* weight: '400'
* })
*
* // Result
* import { Roboto, Inter } from '@next/font/google'
*
* // Variable declarations are removed
*/
export function removeTransformedVariableDeclarations(
path: BabelCoreNamespace.NodePath<BabelCoreNamespace.types.ImportDeclaration>,
types: BabelTypes,
metas: VariableMeta[]
) {
path.parentPath.traverse({
ExportNamedDeclaration(declaratorPath) {
if (!declaratorPath.parentPath?.isProgram()) {
return;
}
metas.forEach((meta) => {
if (
types.isVariableDeclaration(declaratorPath.node.declaration) &&
declaratorPath.node.declaration.declarations.length === 1 &&
types.isVariableDeclarator(declaratorPath.node.declaration.declarations[0]) &&
types.isIdentifier(declaratorPath.node.declaration.declarations[0].id) &&
meta.identifierName === declaratorPath.node.declaration.declarations[0].id.name
) {
declaratorPath.replaceWith(
types.exportNamedDeclaration(null, [
types.exportSpecifier(
types.identifier(meta.identifierName),
types.identifier(meta.identifierName)
),
])
);
}
});
},
VariableDeclarator(declaratorPath) {
if (!declaratorPath.parentPath.parentPath?.isProgram()) {
return;
}
if (
metas.some(
(meta) =>
types.isIdentifier(declaratorPath.node.id) &&
meta.identifierName === declaratorPath.node.id.name
)
) {
declaratorPath.remove();
}
},
});
}
/**
* Replaces `@next/font` import with a parameterized import
* @example
* // AST of src/example.js
* import { Roboto, Inter } from '@next/font/google'
* const interName = Inter({
* subsets: ['latin'],
* })
* const robotoName = Roboto({
* weight: '400'
* })
*
* // Result
* import interName from 'storybook-nextjs-font-loader?{filename: "src/example.js", source: "@next/font/google", fontFamily: "Inter", props: {"subsets":["latin"]}}!@next/font/google'
* import robotoName from 'storybook-nextjs-font-loader?{filename: "src/example.js", source: "@next/font/google", fontFamily: "Roboto", props: {"weight": "400"}}!@next/font/google'
*
* // Following code will be removed from removeUnusedVariableDeclarations function
* const interName = Inter({
* subsets: ['latin'],
* })
*
* const robotoName = Roboto({
* weight: '400'
* })
*/
export function replaceImportWithParamterImport(
path: BabelCoreNamespace.NodePath<BabelCoreNamespace.types.ImportDeclaration>,
types: BabelTypes,
source: BabelCoreNamespace.types.StringLiteral,
metas: Array<VariableMeta>,
filename: string
) {
// Add an import for each specifier with parameters
path.replaceWithMultiple([
...metas.map((meta) => {
return types.importDeclaration(
[types.importDefaultSpecifier(types.identifier(meta.identifierName))],
types.stringLiteral(
`storybook-nextjs-font-loader?${JSON.stringify({
source: source.value,
props: meta.properties,
fontFamily: meta.functionName,
filename,
})}!${source.value}`
)
);
}),
]);
}
/**
* Get meta information for the provided import specifier
* @example
* // AST
* import { Roboto, Inter } from '@next/font/google'
* const interName = Inter({
* subsets: ['latin'],
* })
* const robotoName = Roboto({
* weight: '400'
* })
*
* // Return value
* const variableMetas = [{
* identifierName: 'interName',
* properties: { subsets: ['latin'] },
* functionName: 'Inter'
* }, {
* identifierName: 'robotoName',
* properties: { weight: '400' },
* functionName: 'Roboto'
* }]
*/
export function getVariableMetasBySpecifier(
program: BabelCoreNamespace.NodePath<BabelCoreNamespace.types.Program>,
types: BabelTypes,
specifier:
| BabelCoreNamespace.types.ImportDefaultSpecifier
| BabelCoreNamespace.types.ImportNamespaceSpecifier
| BabelCoreNamespace.types.ImportSpecifier
) {
return program.node.body
.map((statement) => {
if (!types.isVariableDeclaration(statement) && !types.isExportNamedDeclaration(statement)) {
return undefined;
}
const exportedNamedDeclaration =
!types.isVariableDeclaration(statement) &&
types.isVariableDeclaration(statement.declaration) &&
statement.declaration.declarations.length === 1
? statement.declaration.declarations[0]
: null;
const declaration = types.isVariableDeclaration(statement)
? statement.declarations[0]
: exportedNamedDeclaration;
if (!declaration) {
return undefined;
}
if (!types.isIdentifier(declaration.id)) {
return undefined;
}
if (!types.isCallExpression(declaration.init)) {
return undefined;
}
if (
(!types.isIdentifier(declaration.init.callee) ||
specifier.type !== 'ImportSpecifier' ||
specifier.imported.type !== 'Identifier' ||
declaration.init.callee.name !== specifier.imported.name) &&
(!types.isIdentifier(declaration.init.callee) ||
specifier.type !== 'ImportDefaultSpecifier' ||
declaration.init.callee.name !== specifier.local.name)
) {
return undefined;
}
const options = declaration.init.arguments[0];
if (!types.isObjectExpression(options)) {
throw program.buildCodeFrameError(
'Please pass an options object to the call expression of @next/font functions'
);
}
options.properties.forEach((property) => {
if (types.isSpreadElement(property)) {
throw program.buildCodeFrameError(
'Please do not use spread elements in the options object in @next/font function calls'
);
}
});
const identifierName = declaration.id.name;
const properties = convertNodeToJSON(types, options);
const functionName = declaration.init.callee.name;
return { identifierName, properties, functionName };
})
.filter(isDefined);
}

30
code/frameworks/nextjs/src/font/babel/index.test.ts Normal file
View File

@ -0,0 +1,30 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { transform } from '@babel/core';
import TransformFontImports from '.';
const example = `
import { Inter, Roboto } from '@next/font/google'
import localFont from '@next/font/local'
const myFont = localFont({ src: './my-font.woff2' })
const roboto = Roboto({
weight: '400',
})
const inter = Inter({
subsets: ['latin'],
});
const randomObj = {}
`;
it('should transform AST properly', () => {
const { code } = transform(example, { plugins: [TransformFontImports] })!;
expect(code).toMatchInlineSnapshot(`
"import inter from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"@next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"subsets\\\\\\":[\\\\\\"latin\\\\\\"]},\\\\\\"fontFamily\\\\\\":\\\\\\"Inter\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!@next/font/google\\";
import roboto from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"@next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"weight\\\\\\":\\\\\\"400\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"Roboto\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!@next/font/google\\";
import myFont from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"@next/font/local\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"src\\\\\\":\\\\\\"./my-font.woff2\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"localFont\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!@next/font/local\\";
const randomObj = {};"
`);
});

84
code/frameworks/nextjs/src/font/babel/index.ts Normal file
View File

@ -0,0 +1,84 @@
import type * as BabelCoreNamespace from '@babel/core';
import {
getVariableMetasBySpecifier,
isDefined,
removeTransformedVariableDeclarations,
replaceImportWithParamterImport,
} from './helpers';
type Babel = typeof BabelCoreNamespace;
/**
* Transforms "@next/font" imports and usages to a webpack loader friendly format with parameters
* @example
* // src/example.js
* // Turns this code:
* import { Inter, Roboto } from '@next/font/google'
* import localFont from '@next/font/local'
*
* const myFont = localFont({ src: './my-font.woff2' })
* const roboto = Roboto({
* weight: '400',
* })
*
* const inter = Inter({
* subsets: ['latin'],
* });
*
* // Into this code:
* import inter from 'storybook-nextjs-font-loader?{filename: "src/example.js", source: "@next/font/google", fontFamily: "Inter", props: {"subsets":["latin"]}}!@next/font/google'
* import roboto from 'storybook-nextjs-font-loader?{filename: "src/example.js", source: "@next/font/google", fontFamily: "Roboto", props: {"weight": "400"}}!@next/font/google'
* import myFont from 'storybook-nextjs-font-loader?{filename: "src/example.js", source: "@next/font/local", props: {"src": "./my-font.woff2"}}!@next/font/local'
*
* This Plugin tries to adopt the functionality which is provided by the nextjs swc plugin
* https://github.com/vercel/next.js/pull/40221
*/
export default function TransformFontImports({ types }: Babel): BabelCoreNamespace.PluginObj {
return {
name: 'storybook-nextjs-font-imports',
visitor: {
ImportDeclaration(path, state) {
const { node } = path;
const { source } = node;
const { filename = '' } = state;
if (source.value === '@next/font/local') {
const { specifiers } = node;
// @next/font/local only provides a default export
const specifier = specifiers[0];
if (!path.parentPath.isProgram()) {
return;
}
const program = path.parentPath;
const variableMetas = getVariableMetasBySpecifier(program, types, specifier);
removeTransformedVariableDeclarations(path, types, variableMetas);
replaceImportWithParamterImport(path, types, source, variableMetas, filename);
}
if (source.value === '@next/font/google') {
const { specifiers } = node;
const variableMetas = specifiers
.flatMap((specifier) => {
if (!path.parentPath.isProgram()) {
return [];
}
const program = path.parentPath;
return getVariableMetasBySpecifier(program, types, specifier);
})
.filter(isDefined);
removeTransformedVariableDeclarations(path, types, variableMetas);
replaceImportWithParamterImport(path, types, source, variableMetas, filename);
}
},
},
};
}

14
code/frameworks/nextjs/src/font/webpack/configureNextFont.ts Normal file
View File

@ -0,0 +1,14 @@
import type { Configuration } from 'webpack';
export function configureNextFont(baseConfig: Configuration) {
baseConfig.plugins = [...(baseConfig.plugins || [])];
baseConfig.resolveLoader = {
...baseConfig.resolveLoader,
alias: {
...baseConfig.resolveLoader?.alias,
'storybook-nextjs-font-loader': require.resolve(
'./font/webpack/loader/storybook-nextjs-font-loader'
),
},
};
}

49
code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts Normal file
View File

@ -0,0 +1,49 @@
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
import loaderUtils from 'next/dist/compiled/loader-utils3';
import {
fetchCSSFromGoogleFonts,
getFontAxes,
getUrl,
validateData,
} from '@next/font/dist/google/utils';
import type { LoaderOptions } from '../types';
const cssCache = new Map<string, Promise<string>>();
export async function getFontFaceDeclarations(options: LoaderOptions) {
const { fontFamily, weights, styles, selectedVariableAxes, display, variable } = validateData(
options.fontFamily,
[options.props]
);
const fontAxes = getFontAxes(fontFamily, weights, styles, selectedVariableAxes);
const url = getUrl(fontFamily, fontAxes, display);
try {
const hasCachedCSS = cssCache.has(url);
const fontFaceCSS = hasCachedCSS
? cssCache.get(url)
: await fetchCSSFromGoogleFonts(url, fontFamily).catch(() => null);
if (!hasCachedCSS) {
cssCache.set(url, fontFaceCSS);
} else {
cssCache.delete(url);
}
if (fontFaceCSS === null) {
throw Error(`Failed to fetch \`${fontFamily}\` from Google Fonts.`);
}
return {
id: loaderUtils.getHashDigest(url, 'md5', 'hex', 6),
fontFamily,
fontFaceCSS,
weights,
styles,
variable,
};
} catch (error) {
throw new Error("Google Fonts couldn't be loaded.");
}
}

57
code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts Normal file
View File

@ -0,0 +1,57 @@
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
import loaderUtils from 'next/dist/compiled/loader-utils3';
import { validateData } from '@next/font/dist/local/utils';
import path from 'path';
import type { LoaderOptions } from '../types';
type LocalFontSrc = string | Array<{ path: string; weight?: string; style?: string }>;
export async function getFontFaceDeclarations(options: LoaderOptions, rootContext: string) {
const localFontSrc = options.props.src as LocalFontSrc;
// Parent folder relative to the root context
const parentFolder = options.filename.split('/').slice(0, -1).join('/').replace(rootContext, '');
const { weight, style, variable } = validateData('', options.props);
const id = `font-${loaderUtils.getHashDigest(
Buffer.from(JSON.stringify(localFontSrc)),
'md5',
'hex',
6
)}`;
const getFontFaceCSS = () => {
if (typeof localFontSrc === 'string') {
const localFontPath = path.join(parentFolder, localFontSrc);
return `@font-face {
font-family: ${id};
src: url(${localFontPath});
}`;
}
return localFontSrc
.map((font) => {
const localFontPath = path.join(parentFolder, font.path);
return `@font-face {
font-family: ${id};
src: url(${localFontPath});
${font.weight ? `font-weight: ${font.weight};` : ''}
${font.style ? `font-style: ${font.style};` : ''}
}`;
})
.join('');
};
return {
id,
fontFamily: id,
fontFaceCSS: getFontFaceCSS(),
weights: weight ? [weight] : [],
styles: style ? [style] : [],
variable,
};
}

51
code/frameworks/nextjs/src/font/webpack/loader/storybook-nextjs-font-loader.ts Normal file
View File

@ -0,0 +1,51 @@
import { getFontFaceDeclarations as getGoogleFontFaceDeclarations } from './google/get-font-face-declarations';
import { getFontFaceDeclarations as getLocalFontFaceDeclarations } from './local/get-font-face-declarations';
import type { LoaderOptions } from './types';
import { getCSSMeta } from './utils/get-css-meta';
import { setFontDeclarationsInHead } from './utils/set-font-declarations-in-head';
type FontFaceDeclaration = {
id: string;
fontFamily: string;
fontFaceCSS: any;
weights: string[];
styles: string[];
variable?: string;
};
export default async function storybookNextjsFontLoader(this: any) {
const options = this.getOptions() as LoaderOptions;
// get execution context
const rootCtx = this.rootContext;
let fontFaceDeclaration: FontFaceDeclaration | undefined;
if (options.source === '@next/font/google') {
fontFaceDeclaration = await getGoogleFontFaceDeclarations(options);
}
if (options.source === '@next/font/local') {
fontFaceDeclaration = await getLocalFontFaceDeclarations(options, rootCtx);
}
if (typeof fontFaceDeclaration !== 'undefined') {
const cssMeta = getCSSMeta(fontFaceDeclaration);
return `
${setFontDeclarationsInHead({
fontFaceCSS: cssMeta.fontFaceCSS,
id: fontFaceDeclaration.id,
classNamesCSS: cssMeta.classNamesCSS,
})}
module.exports = {
className: "${cssMeta.className}",
style: ${JSON.stringify(cssMeta.style)}
${cssMeta.variableClassName ? `, variable: "${cssMeta.variableClassName}"` : ''}
}
`;
}
return `module.exports = {}`;
}

18
code/frameworks/nextjs/src/font/webpack/loader/types.ts Normal file
View File

@ -0,0 +1,18 @@
export type LoaderOptions = {
/**
* Initial import name. Can be `@next/font/google` or `@next/font/local`
*/
source: string;
/**
* Props passed to the `@next/font` function call
*/
props: Record<string, any>;
/**
* Font Family name
*/
fontFamily: string;
/**
* Filename of the issuer file, which imports `@next/font/google` or `@next/font/local
*/
filename: string;
};

66
code/frameworks/nextjs/src/font/webpack/loader/utils/get-css-meta.ts Normal file
View File

@ -0,0 +1,66 @@
type Options = {
fontFamily: string;
styles: string[];
weights: string[];
fontFaceCSS: string;
variable?: string;
};
export function getCSSMeta(options: Options) {
const className = getClassName(options);
const style = getStylesObj(options);
const variableClassName = `__variable_${className}`;
const classNamesCSS = `
.${className} {
font-family: ${options.fontFamily};
${isNextCSSPropertyValid(options.styles) ? `font-style: ${options.styles[0]};` : ''}
${isNextCSSPropertyValid(options.weights) ? `font-weight: ${options.weights[0]};` : ''}
}
${
options.variable
? `.${variableClassName} { ${options.variable}: '${options.fontFamily}'; }`
: ''
}
`;
const fontFaceCSS = `${changeFontDisplayToSwap(options.fontFaceCSS)}`;
return {
className,
fontFaceCSS,
classNamesCSS,
style,
...(options.variable ? { variableClassName } : {}),
};
}
function getClassName({ styles, weights, fontFamily }: Options) {
const font = fontFamily.replace(' ', '-').toLowerCase();
const style = isNextCSSPropertyValid(styles) ? styles[0] : null;
const weight = isNextCSSPropertyValid(weights) ? weights[0] : null;
return `${font}${style ? `-${style}` : ''}${weight ? `-${weight}` : ''}`;
}
function getStylesObj({ styles, weights, fontFamily }: Options) {
return {
fontFamily,
...(isNextCSSPropertyValid(styles) ? { fontStyle: styles[0] } : {}),
...(isNextCSSPropertyValid(weights) ? { fontWeight: weights[0] } : {}),
};
}
function isNextCSSPropertyValid(prop: string[]) {
return prop.length === 1 && prop[0] !== 'variable';
}
/**
* This step is necessary, because otherwise the font-display: optional; property
* blocks Storybook from rendering the font, because the @font-face declaration
* is not loaded in time.
*/
function changeFontDisplayToSwap(css: string) {
return css.replaceAll('font-display: optional;', 'font-display: block;');
}

24
code/frameworks/nextjs/src/font/webpack/loader/utils/set-font-declarations-in-head.ts Normal file
View File

@ -0,0 +1,24 @@
type Props = {
id: string;
fontFaceCSS: string;
classNamesCSS: string;
};
export function setFontDeclarationsInHead({ id, fontFaceCSS, classNamesCSS }: Props) {
return `
if (!document.getElementById('id-${id}')) {
const fontDeclarations = \`${fontFaceCSS}\`;
const style = document.createElement('style');
style.setAttribute('id', 'font-face-${id}');
style.innerHTML = fontDeclarations;
document.head.appendChild(style);
const classNamesCSS = \`${classNamesCSS}\`;
const classNamesStyle = document.createElement('style');
classNamesStyle.setAttribute('id', 'classnames-${id}');
classNamesStyle.innerHTML = classNamesCSS;
document.head.appendChild(classNamesStyle);
}
`;
}

1
code/frameworks/nextjs/src/index.ts
View File

@ -1,2 +1 @@
export * from '@storybook/react';
export * from './types';

5
code/frameworks/nextjs/src/nextImport/webpack.ts
View File

@ -8,6 +8,7 @@ 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 ?? [];
@ -20,7 +21,7 @@ export function configureNextImport(baseConfig: WebpackConfig) {
);
}
if (!isNext12) {
if (!isNext12 || isNextVersionSmallerThan12dot2) {
baseConfig.plugins.push(
new IgnorePlugin({
resourceRegExp: /next\/future\/image$/,
@ -36,7 +37,7 @@ export function configureNextImport(baseConfig: WebpackConfig) {
);
}
if (semver.lt(nextJSVersion, '12.2.0')) {
if (isNextVersionSmallerThan12dot2) {
baseConfig.plugins.push(
new IgnorePlugin({
resourceRegExp: /next\/dist\/shared\/lib\/app-router-context$/,

6
code/frameworks/nextjs/src/preset.ts
View File

@ -13,6 +13,8 @@ import { configureImages } from './images/webpack';
import { configureRuntimeNextjsVersionResolution } from './utils';
import type { FrameworkOptions, StorybookConfig } from './types';
import { configureNextImport } from './nextImport/webpack';
import TransformFontImports from './font/babel';
import { configureNextFont } from './font/webpack/configureNextFont';
export const addons: PresetProperty<'addons', StorybookConfig> = [
dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))),
@ -103,8 +105,11 @@ export const babel = async (baseConfig: TransformOptions): Promise<TransformOpti
)
);
const plugins = [...(options?.plugins ?? []), TransformFontImports];
return {
...options,
plugins,
presets,
babelrc: false,
configFile: false,
@ -123,6 +128,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig,
configDir: options.configDir,
});
configureNextFont(baseConfig);
configureNextImport(baseConfig);
configureRuntimeNextjsVersionResolution(baseConfig);
configureImports(baseConfig);

26
code/frameworks/nextjs/src/routing/app-router-provider.tsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import { AppRouterContext } from 'next/dist/shared/lib/app-router-context';
import { AppRouterContext, LayoutRouterContext } from 'next/dist/shared/lib/app-router-context';
import { PathnameContext, SearchParamsContext } from 'next/dist/shared/lib/hooks-client-context';
import type { FlightRouterState } from 'next/dist/server/app-render';
import type { RouteParams } from './types';
type AppRouterProviderProps = {
@ -8,8 +9,19 @@ type AppRouterProviderProps = {
routeParams: RouteParams;
};
const getParallelRoutes = (segmentsList: Array<string>): FlightRouterState => {
const segment = segmentsList.shift();
if (segment) {
return [segment, { children: getParallelRoutes(segmentsList) }];
}
return [] as any;
};
const AppRouterProvider: React.FC<AppRouterProviderProps> = ({ children, action, routeParams }) => {
const { pathname, query, ...restRouteParams } = routeParams;
const { pathname, query, segments = [], ...restRouteParams } = routeParams;
return (
<AppRouterContext.Provider
value={{
@ -35,7 +47,15 @@ const AppRouterProvider: React.FC<AppRouterProviderProps> = ({ children, action,
}}
>
<SearchParamsContext.Provider value={new URLSearchParams(query)}>
<PathnameContext.Provider value={pathname}>{children}</PathnameContext.Provider>
<LayoutRouterContext.Provider
value={{
childNodes: new Map(),
tree: [pathname, { children: getParallelRoutes([...segments]) }],
url: pathname,
}}
>
<PathnameContext.Provider value={pathname}>{children}</PathnameContext.Provider>
</LayoutRouterContext.Provider>
</SearchParamsContext.Provider>
</AppRouterContext.Provider>
);

9
code/frameworks/nextjs/src/utils.ts
View File

@ -3,7 +3,6 @@ import { DefinePlugin } from 'webpack';
import { PHASE_DEVELOPMENT_SERVER } from 'next/constants';
import findUp from 'find-up';
import { pathExists } from 'fs-extra';
import dedent from 'ts-dedent';
import type { Configuration as WebpackConfig } from 'webpack';
import type { NextConfig } from 'next';
import { pathToFileURL } from 'node:url';
@ -45,13 +44,7 @@ export const resolveNextConfig = async ({
const nextConfigFile = nextConfigPath || (await findNextConfigFile(configDir));
if (!nextConfigFile || (await pathExists(nextConfigFile)) === false) {
throw new Error(
dedent`
Could not find or resolve your Next config file. Please provide the next config file path as a framework option.
More info: https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md#options
`
);
return {};
}
const nextConfigExport = await import(pathToFileURL(nextConfigFile).href);

64
code/frameworks/nextjs/template/stories_default-js/Font.jsx Normal file
View File

@ -0,0 +1,64 @@
/* eslint-disable react/prop-types */
import { Rubik_Puddles } from '@next/font/google';
import localFont from '@next/font/local';
import React from 'react';
const rubik = Rubik_Puddles({
subsets: ['latin'],
variable: '--font-latin-rubik',
weight: '400',
});
export const localRubikStorm = localFont({
src: '/fonts/RubikStorm-Regular.ttf',
variable: '--font-rubik-storm',
});
export default function Font({ variant }) {
switch (variant) {
case 'className':
return (
<div>
<h1 className={rubik.className}>Google Rubik Puddles</h1>
<h1 className={localRubikStorm.className}>Google Local Rubik Storm</h1>
</div>
);
case 'style':
return (
<div>
<h1 style={rubik.style}>Google Rubik Puddles</h1>
<h1 style={localRubikStorm.style}>Google Local Rubik Storm</h1>
</div>
);
case 'variable':
return (
<div>
<div className={rubik.variable}>
<h1
style={{
fontFamily: 'var(--font-latin-rubik)',
fontStyle: rubik.style.fontStyle,
fontWeight: rubik.style.fontWeight,
}}
>
Google Rubik Puddles
</h1>
</div>
<div className={localRubikStorm.variable}>
<h1
style={{
fontFamily: 'var(--font-rubik-storm)',
fontStyle: localRubikStorm.style.fontStyle,
fontWeight: localRubikStorm.style.fontWeight,
}}
>
Google Local Rubik Storm
</h1>
</div>
</div>
);
default:
return null;
}
}

23
code/frameworks/nextjs/template/stories_default-js/Font.stories.jsx Normal file
View File

@ -0,0 +1,23 @@
import Font from './Font';
export default {
component: Font,
};
export const WithClassName = {
args: {
variant: 'className',
},
};
export const WithStyle = {
args: {
variant: 'style',
},
};
export const WithVariable = {
args: {
variant: 'variable',
},
};

23
code/frameworks/nextjs/template/stories_default-js/Navigation.stories.jsx
View File

@ -1,10 +1,18 @@
import { useRouter, usePathname, useSearchParams } from 'next/navigation';
import {
useRouter,
usePathname,
useSearchParams,
useSelectedLayoutSegment,
useSelectedLayoutSegments,
} from 'next/navigation';
import React from 'react';
function Component() {
const router = useRouter();
const pathname = usePathname();
const searchParams = useSearchParams();
const segment = useSelectedLayoutSegment();
const segments = useSelectedLayoutSegments();
const searchParamsList = Array.from(searchParams.entries());
@ -38,6 +46,8 @@ function Component() {
return (
<div>
<div>pathname: {pathname}</div>
<div>segment: {segment}</div>
<div>segments: {segments.join(',')}</div>
<div>
searchparams:{' '}
<ul>
@ -75,3 +85,14 @@ export default {
};
export const Default = {};
export const WithSegmentDefined = {
parameters: {
nextjs: {
appDirectory: true,
navigation: {
segments: ['dashboard', 'settings'],
},
},
},
};

93
code/frameworks/nextjs/template/stories_default-js/fonts/OFL.txt Normal file
View File

@ -0,0 +1,93 @@
Copyright 2020 The Rubik Filtered Project Authors (https://https://github.com/NaN-xyz/Rubik-Filtered)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

BIN
code/frameworks/nextjs/template/stories_default-js/fonts/RubikStorm-Regular.ttf Normal file
View File

Binary file not shown.

14
code/frameworks/preact-webpack5/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/preact-webpack5",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Storybook for Preact: Develop Preact Component in isolation.",
"keywords": [
"storybook"
@ -48,10 +48,10 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/builder-webpack5": "7.0.0-beta.0",
"@storybook/core-common": "7.0.0-beta.0",
"@storybook/preact": "7.0.0-beta.0",
"@storybook/preset-preact-webpack": "7.0.0-beta.0",
"@storybook/builder-webpack5": "7.0.0-beta.12",
"@storybook/core-common": "7.0.0-beta.12",
"@storybook/preact": "7.0.0-beta.12",
"@storybook/preset-preact-webpack": "7.0.0-beta.12",
"@types/node": "^16.0.0"
},
"devDependencies": {
@ -65,7 +65,7 @@
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
},
"engines": {
"node": ">=10.13.0"
"node": ">=16.0.0"
},
"publishConfig": {
"access": "public"
@ -77,5 +77,5 @@
],
"platform": "node"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

20
code/frameworks/react-vite/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/react-vite",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -48,24 +48,24 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@joshwooding/vite-plugin-react-docgen-typescript": "^0.0.5",
"@joshwooding/vite-plugin-react-docgen-typescript": "0.0.0-20221218231544",
"@rollup/pluginutils": "^4.2.0",
"@storybook/builder-vite": "7.0.0-beta.0",
"@storybook/react": "7.0.0-beta.0",
"@vitejs/plugin-react": "^2.0.0",
"@storybook/builder-vite": "7.0.0-beta.12",
"@storybook/react": "7.0.0-beta.12",
"@vitejs/plugin-react": "^3.0.0",
"ast-types": "^0.14.2",
"magic-string": "^0.26.1",
"react-docgen": "^6.0.0-alpha.3",
"vite": "^3.1.3"
"react-docgen": "6.0.0-alpha.3"
},
"devDependencies": {
"@types/node": "^16.0.0",
"typescript": "~4.9.3",
"vite": "^3.1.3"
"vite": "^4.0.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
"vite": "^3.0.0 || ^4.0.0"
},
"engines": {
"node": "^14.18 || >=16"
@ -80,5 +80,5 @@
],
"platform": "node"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

4
code/frameworks/react-vite/src/preset.ts
View File

@ -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', 'vite:react-swc']))) {
const { default: react } = await import('@vitejs/plugin-react');
plugins.push(react());
}

16
code/frameworks/react-vite/src/utils.ts
View File

@ -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);
})
);
}

12
code/frameworks/react-webpack5/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/react-webpack5",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -48,9 +48,9 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/builder-webpack5": "7.0.0-beta.0",
"@storybook/preset-react-webpack": "7.0.0-beta.0",
"@storybook/react": "7.0.0-beta.0",
"@storybook/builder-webpack5": "7.0.0-beta.12",
"@storybook/preset-react-webpack": "7.0.0-beta.12",
"@storybook/react": "7.0.0-beta.12",
"@types/node": "^16.0.0"
},
"devDependencies": {
@ -71,7 +71,7 @@
}
},
"engines": {
"node": ">=10.13.0"
"node": ">=16.0.0"
},
"publishConfig": {
"access": "public"
@ -83,5 +83,5 @@
],
"platform": "node"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

14
code/frameworks/server-webpack5/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/server-webpack5",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -48,10 +48,10 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/builder-webpack5": "7.0.0-beta.0",
"@storybook/core-common": "7.0.0-beta.0",
"@storybook/preset-server-webpack": "7.0.0-beta.0",
"@storybook/server": "7.0.0-beta.0",
"@storybook/builder-webpack5": "7.0.0-beta.12",
"@storybook/core-common": "7.0.0-beta.12",
"@storybook/preset-server-webpack": "7.0.0-beta.12",
"@storybook/server": "7.0.0-beta.12",
"@types/node": "^16.0.0"
},
"devDependencies": {
@ -62,7 +62,7 @@
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
},
"engines": {
"node": ">=10.13.0"
"node": ">=16.0.0"
},
"publishConfig": {
"access": "public"
@ -74,5 +74,5 @@
],
"platform": "node"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

26
code/frameworks/svelte-vite/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/svelte-vite",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -48,30 +48,24 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addon-svelte-csf": "^2.0.0",
"@storybook/builder-vite": "7.0.0-beta.0",
"@storybook/node-logger": "7.0.0-beta.0",
"@storybook/svelte": "7.0.0-beta.0",
"@sveltejs/vite-plugin-svelte": "^1.0.0",
"@storybook/builder-vite": "7.0.0-beta.12",
"@storybook/node-logger": "7.0.0-beta.12",
"@storybook/svelte": "7.0.0-beta.12",
"@sveltejs/vite-plugin-svelte": "^2.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"
},
"devDependencies": {
"@types/node": "^16.0.0",
"typescript": "~4.9.3",
"vite": "^3.1.3"
"vite": "^4.0.0"
},
"peerDependencies": {
"@storybook/addon-svelte-csf": "^2.0.0",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@storybook/addon-svelte-csf": {
"optional": true
}
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
"vite": "^3.0.0 || ^4.0.0"
},
"engines": {
"node": "^14.18 || >=16"
@ -86,5 +80,5 @@
],
"platform": "node"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

64
code/frameworks/svelte-vite/src/plugins/csf-plugin.ts
View File

@ -1,64 +0,0 @@
// @ts-expect-error (TODO)
import { getNameFromFilename } from '@storybook/addon-svelte-csf/dist/cjs/parser/svelte-stories-loader';
import { readFileSync } from 'fs';
// @ts-expect-error (TODO)
import { extractStories } from '@storybook/addon-svelte-csf/dist/cjs/parser/extract-stories';
import type { Options } from '@sveltejs/vite-plugin-svelte';
import * as svelte from 'svelte/compiler';
import MagicString from 'magic-string';
import { createFilter } from 'vite';
import type { PluginOption } from 'vite';
const parser = require
.resolve('@storybook/addon-svelte-csf/dist/esm/parser/collect-stories')
.replace(/[/\\]/g, '/');
export default function csfPlugin(svelteOptions?: Options): PluginOption {
const include = /\.stories\.svelte$/;
const filter = createFilter(include);
return {
name: 'storybook:addon-svelte-csf-plugin',
enforce: 'post',
async transform(code: string, id: string) {
if (!filter(id)) return undefined;
const s = new MagicString(code);
const component = getNameFromFilename(id);
let source = readFileSync(id).toString();
if (svelteOptions && svelteOptions.preprocess) {
source = (await svelte.preprocess(source, svelteOptions.preprocess, { filename: id })).code;
}
const all = extractStories(source);
const { stories } = all;
const storyDef = Object.entries<any>(stories)
.filter(([, def]) => !def.template)
// eslint-disable-next-line @typescript-eslint/no-shadow
.map(([id]) => `export const ${id} = __storiesMetaData.stories[${JSON.stringify(id)}];`)
.join('\n');
s.replace('export default', '// export default');
const namedExportsOrder = Object.entries<any>(stories)
.filter(([, def]) => !def.template)
// eslint-disable-next-line @typescript-eslint/no-shadow
.map(([id]) => id);
const output = [
'',
`import parser from '${parser}';`,
`const __storiesMetaData = parser(${component}, ${JSON.stringify(all)});`,
'export default __storiesMetaData.meta;',
`export const __namedExportsOrder = ${JSON.stringify(namedExportsOrder)};`,
storyDef,
].join('\n');
s.append(output);
return {
code: s.toString(),
map: s.generateMap({ hires: true, source: id }),
};
},
};
}

26
code/frameworks/svelte-vite/src/preset.ts
View File

@ -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,9 @@ export const core: StorybookConfig['core'] = {
};
export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (config, options) => {
let { plugins = [] } = config;
const { plugins = [] } = config;
// TODO: set up eslint import to use typescript resolver
// eslint-disable-next-line import/no-unresolved
const { svelte, loadSvelteConfig } = await import('@sveltejs/vite-plugin-svelte');
const svelteOptions: Record<string, any> = await options.presets.apply(
'svelteOptions',
@ -18,28 +20,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);
// 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
try {
const { default: svelteCsfPlugin } = await import('./plugins/csf-plugin');
plugins.push(svelteCsfPlugin(svelteConfig));
} catch (err) {
// Not all projects use `.stories.svelte` for stories, and by default 6.5+ does not auto-install @storybook/addon-svelte-csf.
// If it's any other kind of error, re-throw.
if ((err as NodeJS.ErrnoException).code !== 'MODULE_NOT_FOUND') {
throw err;
}
}
await handleSvelteKit(plugins, options);
return {
...config,

61
code/frameworks/svelte-vite/src/utils.ts
View File

@ -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();
}
}

14
code/frameworks/svelte-webpack5/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/svelte-webpack5",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -48,10 +48,10 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/builder-webpack5": "7.0.0-beta.0",
"@storybook/core-common": "7.0.0-beta.0",
"@storybook/preset-svelte-webpack": "7.0.0-beta.0",
"@storybook/svelte": "7.0.0-beta.0"
"@storybook/builder-webpack5": "7.0.0-beta.12",
"@storybook/core-common": "7.0.0-beta.12",
"@storybook/preset-svelte-webpack": "7.0.0-beta.12",
"@storybook/svelte": "7.0.0-beta.12"
},
"devDependencies": {
"svelte": "^3.48.0",
@ -66,7 +66,7 @@
"svelte-loader": "*"
},
"engines": {
"node": ">=10.13.0"
"node": ">=16.0.0"
},
"publishConfig": {
"access": "public"
@ -78,5 +78,5 @@
],
"platform": "node"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

117
code/frameworks/sveltekit/README.md
View File

@ -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) | ⏳ Planned for 7.1 |
| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores) | 🔜 Coming in 7.0. Mocks are planned for 7.1 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 close to adding basic support for many of the SvelteKit features. Longer term 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 had a `svelteOptions` property in `.storybook/main.cjs` the automigration will have removed it, as it is no longer supported.
#### 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 manually 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.

18
code/frameworks/sveltekit/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/sveltekit",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Storybook for SvelteKit",
"keywords": [
"storybook",
@ -51,21 +51,17 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/builder-vite": "7.0.0-beta.0",
"@storybook/svelte-vite": "7.0.0-beta.0"
"@storybook/builder-vite": "7.0.0-beta.12",
"@storybook/svelte": "7.0.0-beta.12",
"@storybook/svelte-vite": "7.0.0-beta.12"
},
"devDependencies": {
"@types/node": "^16.0.0",
"typescript": "^4.9.3",
"vite": "^3.1.3"
"vite": "^4.0.0"
},
"peerDependencies": {
"@storybook/addon-svelte-csf": "^2.0.0"
},
"peerDependenciesMeta": {
"@storybook/addon-svelte-csf": {
"optional": true
}
"vite": "^4.0.0"
},
"engines": {
"node": "^14.18 || >=16"
@ -80,5 +76,5 @@
],
"platform": "node"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

8
code/frameworks/sveltekit/src/preset.ts
View File

@ -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 };
};

39
code/frameworks/sveltekit/template/cli/Button.stories.js
View File

@ -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',
},
};

34
code/frameworks/sveltekit/template/cli/Button.svelte
View File

@ -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>

17
code/frameworks/vue-vite/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/vue-vite",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -48,25 +48,26 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/builder-vite": "7.0.0-beta.0",
"@storybook/core-common": "7.0.0-beta.0",
"@storybook/core-server": "7.0.0-beta.0",
"@storybook/vue": "7.0.0-beta.0",
"@storybook/builder-vite": "7.0.0-beta.12",
"@storybook/core-common": "7.0.0-beta.12",
"@storybook/core-server": "7.0.0-beta.12",
"@storybook/vue": "7.0.0-beta.12",
"magic-string": "^0.26.1",
"vite": "^3.1.3",
"vue-docgen-api": "^4.40.0"
},
"devDependencies": {
"typescript": "~4.9.3",
"vite": "^4.0.0",
"vue": "^2.7.10"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
"vite": "^3.0.0 || ^4.0.0",
"vue": "^2.7.0"
},
"engines": {
"node": ">=10.13.0"
"node": ">=16.0.0"
},
"publishConfig": {
"access": "public"
@ -78,5 +79,5 @@
],
"platform": "node"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

14
code/frameworks/vue-webpack5/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/vue-webpack5",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -48,10 +48,10 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/builder-webpack5": "7.0.0-beta.0",
"@storybook/core-common": "7.0.0-beta.0",
"@storybook/preset-vue-webpack": "7.0.0-beta.0",
"@storybook/vue": "7.0.0-beta.0",
"@storybook/builder-webpack5": "7.0.0-beta.12",
"@storybook/core-common": "7.0.0-beta.12",
"@storybook/preset-vue-webpack": "7.0.0-beta.12",
"@storybook/vue": "7.0.0-beta.12",
"@types/node": "^16.0.0"
},
"devDependencies": {
@ -71,7 +71,7 @@
"vue-template-compiler": "^2.6.8"
},
"engines": {
"node": ">=10.13.0"
"node": ">=16.0.0"
},
"publishConfig": {
"access": "public"
@ -83,5 +83,5 @@
],
"platform": "node"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

18
code/frameworks/vue3-vite/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/vue3-vite",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -48,22 +48,22 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/builder-vite": "7.0.0-beta.0",
"@storybook/core-server": "7.0.0-beta.0",
"@storybook/vue3": "7.0.0-beta.0",
"@vitejs/plugin-vue": "^3.0.0",
"@storybook/builder-vite": "7.0.0-beta.12",
"@storybook/core-server": "7.0.0-beta.12",
"@storybook/vue3": "7.0.0-beta.12",
"@vitejs/plugin-vue": "^4.0.0",
"magic-string": "^0.26.1",
"vite": "^3.1.3",
"vue-docgen-api": "^4.40.0"
},
"devDependencies": {
"@types/node": "^16.0.0",
"typescript": "~4.9.3",
"vite": "^3.1.3"
"vite": "^4.0.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
"vite": "^3.0.0 || ^4.0.0"
},
"engines": {
"node": "^14.18 || >=16"
@ -78,5 +78,5 @@
],
"platform": "node"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

4
code/frameworks/vue3-vite/src/preset.ts
View File

@ -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());
}

16
code/frameworks/vue3-vite/src/utils.ts
View File

@ -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);
})
);
}

14
code/frameworks/vue3-webpack5/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/vue3-webpack5",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -48,10 +48,10 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/builder-webpack5": "7.0.0-beta.0",
"@storybook/core-common": "7.0.0-beta.0",
"@storybook/preset-vue3-webpack": "7.0.0-beta.0",
"@storybook/vue3": "7.0.0-beta.0",
"@storybook/builder-webpack5": "7.0.0-beta.12",
"@storybook/core-common": "7.0.0-beta.12",
"@storybook/preset-vue3-webpack": "7.0.0-beta.12",
"@storybook/vue3": "7.0.0-beta.12",
"@types/node": "^16.0.0"
},
"devDependencies": {
@ -68,7 +68,7 @@
"vue": "^3.0.0"
},
"engines": {
"node": ">=10.13.0"
"node": ">=16.0.0"
},
"publishConfig": {
"access": "public"
@ -80,5 +80,5 @@
],
"platform": "node"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

18
code/frameworks/web-components-vite/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/web-components-vite",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -48,17 +48,15 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/builder-vite": "7.0.0-beta.0",
"@storybook/core-server": "7.0.0-beta.0",
"@storybook/node-logger": "7.0.0-beta.0",
"@storybook/web-components": "7.0.0-beta.0",
"magic-string": "^0.26.1",
"vite": "3"
"@storybook/builder-vite": "7.0.0-beta.12",
"@storybook/core-server": "7.0.0-beta.12",
"@storybook/node-logger": "7.0.0-beta.12",
"@storybook/web-components": "7.0.0-beta.12",
"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",
@ -77,5 +75,5 @@
],
"platform": "node"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

14
code/frameworks/web-components-webpack5/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/web-components-webpack5",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
"keywords": [
"lit-html",
@ -51,10 +51,10 @@
},
"dependencies": {
"@babel/preset-env": "^7.20.2",
"@storybook/builder-webpack5": "7.0.0-beta.0",
"@storybook/core-common": "7.0.0-beta.0",
"@storybook/preset-web-components-webpack": "7.0.0-beta.0",
"@storybook/web-components": "7.0.0-beta.0",
"@storybook/builder-webpack5": "7.0.0-beta.12",
"@storybook/core-common": "7.0.0-beta.12",
"@storybook/preset-web-components-webpack": "7.0.0-beta.12",
"@storybook/web-components": "7.0.0-beta.12",
"@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": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

2
code/lerna.json
View File

@ -2,5 +2,5 @@
"npmClient": "yarn",
"useWorkspaces": true,
"registry": "https://registry.npmjs.org",
"version": "7.0.0-beta.0"
"version": "7.0.0-beta.12"
}

10
code/lib/addons/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addons",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Storybook addons store",
"keywords": [
"storybook"
@ -44,9 +44,9 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/manager-api": "7.0.0-beta.0",
"@storybook/preview-api": "7.0.0-beta.0",
"@storybook/types": "7.0.0-beta.0"
"@storybook/manager-api": "7.0.0-beta.12",
"@storybook/preview-api": "7.0.0-beta.12",
"@storybook/types": "7.0.0-beta.12"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@ -60,5 +60,5 @@
"./src/index.ts"
]
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

12
code/lib/builder-manager/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/builder-manager",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "Storybook manager builder",
"keywords": [
"storybook"
@ -44,14 +44,14 @@
},
"dependencies": {
"@fal-works/esbuild-plugin-global-externals": "^2.1.2",
"@storybook/core-common": "7.0.0-beta.0",
"@storybook/manager": "7.0.0-beta.0",
"@storybook/node-logger": "7.0.0-beta.0",
"@storybook/core-common": "7.0.0-beta.12",
"@storybook/manager": "7.0.0-beta.12",
"@storybook/node-logger": "7.0.0-beta.12",
"@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.3",
"fs-extra": "^9.0.1",
@ -71,5 +71,5 @@
],
"platform": "node"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

8
code/lib/builder-manager/src/index.ts
View File

@ -77,6 +77,14 @@ export const getConfig: ManagerBuilder['getConfig'] = async (options) => {
globalExternals(definitions),
pnpPlugin(),
],
banner: {
js: 'try{',
},
footer: {
js: '}catch(e){ console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e); }',
},
define: {
'process.env.NODE_ENV': "'production'",
'process.env': '{}',

7
code/lib/builder-manager/templates/template.ejs
View File

@ -8,7 +8,6 @@
<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">
<% if (typeof head !== 'undefined') { %> <%- head %> <% } %>
@ -39,8 +38,10 @@
import './sb-manager/runtime.mjs';
<% files.js.forEach(file => { %>
import './<%= file %>';
<% }); %>
import '<%= file %>';
<% }); %>
</script>
<link href="./sb-preview/runtime.mjs" rel="preload" as="script">
</body>
</html>

2
code/lib/builder-vite/input/iframe.html
View File

@ -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>

30
code/lib/builder-vite/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/builder-vite",
"version": "7.0.0-beta.0",
"version": "7.0.0-beta.12",
"description": "A plugin to run and build Storybooks with Vite",
"homepage": "https://github.com/storybookjs/storybook/tree/main/code/lib/builder-vite/#readme",
"bugs": {
@ -43,16 +43,14 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@joshwooding/vite-plugin-react-docgen-typescript": "0.0.5",
"@storybook/client-logger": "7.0.0-beta.0",
"@storybook/core-common": "7.0.0-beta.0",
"@storybook/csf-plugin": "7.0.0-beta.0",
"@storybook/client-logger": "7.0.0-beta.12",
"@storybook/core-common": "7.0.0-beta.12",
"@storybook/csf-plugin": "7.0.0-beta.12",
"@storybook/mdx2-csf": "next",
"@storybook/node-logger": "7.0.0-beta.0",
"@storybook/preview": "7.0.0-beta.0",
"@storybook/preview-api": "7.0.0-beta.0",
"@storybook/types": "7.0.0-beta.0",
"@vitejs/plugin-react": "^2.0.0",
"@storybook/node-logger": "7.0.0-beta.12",
"@storybook/preview": "7.0.0-beta.12",
"@storybook/preview-api": "7.0.0-beta.12",
"@storybook/types": "7.0.0-beta.12",
"browser-assert": "^1.2.1",
"es-module-lexer": "^0.9.3",
"express": "^4.17.3",
@ -62,24 +60,28 @@
"magic-string": "^0.26.1",
"rollup": "^2.25.0 || ^3.3.0",
"rollup-plugin-external-globals": "^0.7.1",
"slash": "^3.0.0",
"vite": "^3.1.3"
"slash": "^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"
"vite": "^4.0.0"
},
"peerDependencies": {
"@preact/preset-vite": "*",
"typescript": ">= 4.3.x",
"vite": "^3.0.0 || ^4.0.0",
"vite-plugin-glimmerx": "*"
},
"peerDependenciesMeta": {
"@preact/preset-vite": {
"optional": true
},
"typescript": {
"optional": true
},
"vite-plugin-glimmerx": {
"optional": true
}
@ -93,5 +95,5 @@
],
"platform": "node"
},
"gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
"gitHead": "dd52c7e8853bc40791deb55e36473c0c18ab5957"
}

2
code/lib/builder-vite/src/build.ts
View File

@ -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;

2
code/lib/builder-vite/src/codegen-iframe-script.ts
View File

@ -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}';

18
code/lib/builder-vite/src/declarations/extract-stories.d.ts vendored
View File

@ -1,18 +0,0 @@
/**
* @see https://github.com/storybookjs/addon-svelte-csf/blob/f72b8f28dabbb99c92e12d0170d3c1db4397ee7c/src/parser/extract-stories.ts
*/
declare module '@storybook/addon-svelte-csf/dist/cjs/parser/extract-stories' {
interface StoryDef {
name: string;
template: boolean;
source: string;
hasArgs: boolean;
}
interface StoriesDef {
stories: Record<string, StoryDef>;
allocatedIds: string[];
}
function extractStories(component: string): { stories: StoriesDef; allocatedIds: string[] };
}

Some files were not shown because too many files have changed in this diff Show More