mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-18 05:02:24 +08:00
Merge branch 'next' of github.com:storybookjs/storybook into jeppe/sb-604-create-a-standalone-storybook-for-our-phase-2
This commit is contained in:
Jeppe Reinhold
commit
b62de91974
@ -142,7 +142,7 @@ jobs:
|
||||
executor:
|
||||
class: medium+
|
||||
name: sb_node_16_browsers
|
||||
parallelism: 4
|
||||
parallelism: 3
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
@ -224,12 +224,14 @@ jobs:
|
||||
name: set up cra repro, skip tests
|
||||
command: |
|
||||
cd code
|
||||
node ./lib/cli/bin/index.js repro -t cra --e2e ../../cra-bench
|
||||
node ./lib/cli/bin/index.js repro-next cra/default-js --output ../../cra-bench
|
||||
- run:
|
||||
name: Run @storybook/bench on repro
|
||||
command: |
|
||||
cd ../cra-bench
|
||||
npx -p @storybook/bench@0.7.6--canary.760ff01.0 sb-bench 'echo noop' --label cra
|
||||
rm -rf node_modules
|
||||
mkdir node_modules
|
||||
npx -p @storybook/bench@0.7.6--canary.14.6702e4f.0 sb-bench 'yarn install' --label cra
|
||||
- run:
|
||||
name: prep artifacts
|
||||
when: always
|
||||
@ -237,6 +239,46 @@ jobs:
|
||||
- store_artifacts:
|
||||
path: /tmp/sb-bench.tar.gz
|
||||
destination: sb-bench.tar.gz
|
||||
react-vite-bench:
|
||||
executor:
|
||||
class: medium+
|
||||
name: sb_playwright
|
||||
working_directory: /tmp/storybook
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: Running local registry
|
||||
command: |
|
||||
cd code
|
||||
yarn local-registry --port 6001 --open
|
||||
background: true
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: |
|
||||
cd code
|
||||
yarn wait-on http://localhost:6001
|
||||
- run:
|
||||
name: set up react-vite repro, skip tests
|
||||
command: |
|
||||
cd code
|
||||
node ./lib/cli/bin/index.js repro-next react-vite/default-ts --output ../../react-vite-bench
|
||||
- run:
|
||||
name: Run @storybook/bench on repro
|
||||
command: |
|
||||
cd ../react-vite-bench
|
||||
rm -rf node_modules
|
||||
mkdir node_modules
|
||||
npx -p @storybook/bench@0.7.6--canary.14.6702e4f.0 sb-bench 'yarn install' --label react-vite
|
||||
- run:
|
||||
name: prep artifacts
|
||||
when: always
|
||||
command: tar cvzf /tmp/sb-bench.tar.gz ../react-vite-bench
|
||||
- store_artifacts:
|
||||
path: /tmp/sb-bench.tar.gz
|
||||
destination: sb-bench.tar.gz
|
||||
smoke-tests:
|
||||
executor:
|
||||
class: medium+
|
||||
@ -322,7 +364,7 @@ jobs:
|
||||
executor:
|
||||
class: medium+
|
||||
name: sb_node_16_browsers
|
||||
parallelism: 22
|
||||
parallelism: 24
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
@ -341,7 +383,7 @@ jobs:
|
||||
executor:
|
||||
class: medium+
|
||||
name: sb_node_16_browsers
|
||||
parallelism: 22
|
||||
parallelism: 24
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
@ -356,7 +398,7 @@ jobs:
|
||||
executor:
|
||||
class: medium+
|
||||
name: sb_node_16_browsers
|
||||
parallelism: 22
|
||||
parallelism: 24
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
@ -375,7 +417,7 @@ jobs:
|
||||
executor:
|
||||
class: medium+
|
||||
name: sb_playwright
|
||||
parallelism: 20
|
||||
parallelism: 22
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
@ -390,7 +432,7 @@ jobs:
|
||||
executor:
|
||||
class: medium+
|
||||
name: sb_node_16_browsers
|
||||
parallelism: 22
|
||||
parallelism: 24
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
@ -405,7 +447,7 @@ jobs:
|
||||
executor:
|
||||
class: medium+
|
||||
name: sb_playwright
|
||||
parallelism: 22
|
||||
parallelism: 24
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
@ -454,7 +496,9 @@ workflows:
|
||||
- cra-bench:
|
||||
requires:
|
||||
- publish
|
||||
|
||||
- react-vite-bench:
|
||||
requires:
|
||||
- publish
|
||||
## new workflow
|
||||
- create-sandboxes:
|
||||
requires:
|
||||
|
||||
42
CHANGELOG.md
42
CHANGELOG.md
@ -1,3 +1,45 @@
|
||||
## 7.0.0-alpha.42 (October 24, 2022)
|
||||
|
||||
#### Features
|
||||
|
||||
- Svelte: Improve CSF3 types [#19512](https://github.com/storybooks/storybook/pull/19512)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Telemetry: Use a wrapper around all CLI commands to send boot and error events [#19566](https://github.com/storybooks/storybook/pull/19566)
|
||||
|
||||
#### Build
|
||||
|
||||
- Add ability to run tasks from code dir [#19588](https://github.com/storybooks/storybook/pull/19588)
|
||||
- Make the reporter dynamic [#19587](https://github.com/storybooks/storybook/pull/19587)
|
||||
- Add vite-react benchmark [#19558](https://github.com/storybooks/storybook/pull/19558)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
- Fix test-runner version conflicts [#19581](https://github.com/storybooks/storybook/pull/19581)
|
||||
|
||||
## 7.0.0-alpha.41 (October 21, 2022)
|
||||
|
||||
#### Features
|
||||
|
||||
- Add `@storybook/nextjs` framework [#19382](https://github.com/storybooks/storybook/pull/19382)
|
||||
- CLI: Enable `@storybook/nextjs` framework [#19478](https://github.com/storybooks/storybook/pull/19478)
|
||||
- CLI: Automigrate from MDX1 to MDX2 [#19568](https://github.com/storybooks/storybook/pull/19568)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Remove warning of removed feature in lib/client-api [#19544](https://github.com/storybooks/storybook/pull/19544)
|
||||
- Remove vite-plugin-svelte-kit when detected [#19522](https://github.com/storybooks/storybook/pull/19522)
|
||||
|
||||
#### Build
|
||||
|
||||
- Delete Svelte example [#19549](https://github.com/storybooks/storybook/pull/19549)
|
||||
- Fix circle test results [#19552](https://github.com/storybooks/storybook/pull/19552)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
- Update the version of the "update-notifier" package [#19569](https://github.com/storybooks/storybook/pull/19569)
|
||||
|
||||
## 7.0.0-alpha.40 (October 20, 2022)
|
||||
|
||||
#### Breaking Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -62,15 +62,15 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.40",
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/api": "7.0.0-alpha.40",
|
||||
"@storybook/channels": "7.0.0-alpha.40",
|
||||
"@storybook/client-logger": "7.0.0-alpha.40",
|
||||
"@storybook/components": "7.0.0-alpha.40",
|
||||
"@storybook/core-events": "7.0.0-alpha.40",
|
||||
"@storybook/csf": "0.0.2--canary.49.258942b.0",
|
||||
"@storybook/theming": "7.0.0-alpha.40",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.42",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/api": "7.0.0-alpha.42",
|
||||
"@storybook/channels": "7.0.0-alpha.42",
|
||||
"@storybook/client-logger": "7.0.0-alpha.42",
|
||||
"@storybook/components": "7.0.0-alpha.42",
|
||||
"@storybook/core-events": "7.0.0-alpha.42",
|
||||
"@storybook/csf": "next",
|
||||
"@storybook/theming": "7.0.0-alpha.42",
|
||||
"axe-core": "^4.2.0",
|
||||
"global": "^4.4.0",
|
||||
"lodash": "^4.17.21",
|
||||
@ -102,7 +102,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c",
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b",
|
||||
"storybook": {
|
||||
"displayName": "Accessibility",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Get UI feedback when an action is performed on an interactive element",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -58,13 +58,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/api": "7.0.0-alpha.40",
|
||||
"@storybook/client-logger": "7.0.0-alpha.40",
|
||||
"@storybook/components": "7.0.0-alpha.40",
|
||||
"@storybook/core-events": "7.0.0-alpha.40",
|
||||
"@storybook/csf": "0.0.2--canary.49.258942b.0",
|
||||
"@storybook/theming": "7.0.0-alpha.40",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/api": "7.0.0-alpha.42",
|
||||
"@storybook/client-logger": "7.0.0-alpha.42",
|
||||
"@storybook/components": "7.0.0-alpha.42",
|
||||
"@storybook/core-events": "7.0.0-alpha.42",
|
||||
"@storybook/csf": "next",
|
||||
"@storybook/theming": "7.0.0-alpha.42",
|
||||
"dequal": "^2.0.2",
|
||||
"global": "^4.4.0",
|
||||
"lodash": "^4.17.21",
|
||||
@ -102,7 +102,7 @@
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c",
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b",
|
||||
"storybook": {
|
||||
"displayName": "Actions",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -62,13 +62,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/api": "7.0.0-alpha.40",
|
||||
"@storybook/client-logger": "7.0.0-alpha.40",
|
||||
"@storybook/components": "7.0.0-alpha.40",
|
||||
"@storybook/core-events": "7.0.0-alpha.40",
|
||||
"@storybook/csf": "0.0.2--canary.49.258942b.0",
|
||||
"@storybook/theming": "7.0.0-alpha.40",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/api": "7.0.0-alpha.42",
|
||||
"@storybook/client-logger": "7.0.0-alpha.42",
|
||||
"@storybook/components": "7.0.0-alpha.42",
|
||||
"@storybook/core-events": "7.0.0-alpha.42",
|
||||
"@storybook/csf": "next",
|
||||
"@storybook/theming": "7.0.0-alpha.42",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
"ts-dedent": "^2.0.0"
|
||||
@ -98,7 +98,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c",
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b",
|
||||
"storybook": {
|
||||
"displayName": "Backgrounds",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Interact with component inputs dynamically in the Storybook UI",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -57,16 +57,16 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/api": "7.0.0-alpha.40",
|
||||
"@storybook/blocks": "7.0.0-alpha.40",
|
||||
"@storybook/client-logger": "7.0.0-alpha.40",
|
||||
"@storybook/components": "7.0.0-alpha.40",
|
||||
"@storybook/core-common": "7.0.0-alpha.40",
|
||||
"@storybook/csf": "0.0.2--canary.49.258942b.0",
|
||||
"@storybook/node-logger": "7.0.0-alpha.40",
|
||||
"@storybook/store": "7.0.0-alpha.40",
|
||||
"@storybook/theming": "7.0.0-alpha.40",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/api": "7.0.0-alpha.42",
|
||||
"@storybook/blocks": "7.0.0-alpha.42",
|
||||
"@storybook/client-logger": "7.0.0-alpha.42",
|
||||
"@storybook/components": "7.0.0-alpha.42",
|
||||
"@storybook/core-common": "7.0.0-alpha.42",
|
||||
"@storybook/csf": "next",
|
||||
"@storybook/node-logger": "7.0.0-alpha.42",
|
||||
"@storybook/store": "7.0.0-alpha.42",
|
||||
"@storybook/theming": "7.0.0-alpha.42",
|
||||
"lodash": "^4.17.21",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
@ -92,7 +92,7 @@
|
||||
],
|
||||
"platform": "browser"
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c",
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b",
|
||||
"storybook": {
|
||||
"displayName": "Controls",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -52,22 +52,22 @@
|
||||
"@babel/plugin-transform-react-jsx": "^7.12.12",
|
||||
"@jest/transform": "^26.6.2",
|
||||
"@mdx-js/react": "^2.1.5",
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/api": "7.0.0-alpha.40",
|
||||
"@storybook/blocks": "7.0.0-alpha.40",
|
||||
"@storybook/components": "7.0.0-alpha.40",
|
||||
"@storybook/core-common": "7.0.0-alpha.40",
|
||||
"@storybook/core-events": "7.0.0-alpha.40",
|
||||
"@storybook/csf": "0.0.2--canary.49.258942b.0",
|
||||
"@storybook/csf-tools": "7.0.0-alpha.40",
|
||||
"@storybook/docs-tools": "7.0.0-alpha.40",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/api": "7.0.0-alpha.42",
|
||||
"@storybook/blocks": "7.0.0-alpha.42",
|
||||
"@storybook/components": "7.0.0-alpha.42",
|
||||
"@storybook/core-common": "7.0.0-alpha.42",
|
||||
"@storybook/core-events": "7.0.0-alpha.42",
|
||||
"@storybook/csf": "next",
|
||||
"@storybook/csf-tools": "7.0.0-alpha.42",
|
||||
"@storybook/docs-tools": "7.0.0-alpha.42",
|
||||
"@storybook/mdx2-csf": "0.1.0-next.0",
|
||||
"@storybook/node-logger": "7.0.0-alpha.40",
|
||||
"@storybook/postinstall": "7.0.0-alpha.40",
|
||||
"@storybook/preview-web": "7.0.0-alpha.40",
|
||||
"@storybook/source-loader": "7.0.0-alpha.40",
|
||||
"@storybook/store": "7.0.0-alpha.40",
|
||||
"@storybook/theming": "7.0.0-alpha.40",
|
||||
"@storybook/node-logger": "7.0.0-alpha.42",
|
||||
"@storybook/postinstall": "7.0.0-alpha.42",
|
||||
"@storybook/preview-web": "7.0.0-alpha.42",
|
||||
"@storybook/source-loader": "7.0.0-alpha.42",
|
||||
"@storybook/store": "7.0.0-alpha.42",
|
||||
"@storybook/theming": "7.0.0-alpha.42",
|
||||
"dequal": "^2.0.2",
|
||||
"fs-extra": "^9.0.1",
|
||||
"global": "^4.4.0",
|
||||
@ -94,7 +94,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c",
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b",
|
||||
"storybook": {
|
||||
"displayName": "Docs",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
|
||||
|
||||
18
code/addons/docs/template/stories/stories-mdx/iframe.stories.mdx
vendored
Normal file
18
code/addons/docs/template/stories/stories-mdx/iframe.stories.mdx
vendored
Normal file
@ -0,0 +1,18 @@
|
||||
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||||
import globalThis from 'global';
|
||||
|
||||
<Meta title="addons/docs/stories-mdx/iframe" component={globalThis.Components.Button} />
|
||||
|
||||
# MDX Stories
|
||||
|
||||
This file demonstrates rendering iframe stories in MDX.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Primary" args={{ label: 'Primary' }} inline={false} />
|
||||
</Canvas>
|
||||
|
||||
<ArgsTable story="^" />
|
||||
|
||||
<Canvas>
|
||||
<Story name="Secondary" args={{ label: 'Secondary' }} inline={false} />
|
||||
</Canvas>
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -41,24 +41,24 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "7.0.0-alpha.40",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.40",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.40",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.40",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.40",
|
||||
"@storybook/addon-measure": "7.0.0-alpha.40",
|
||||
"@storybook/addon-outline": "7.0.0-alpha.40",
|
||||
"@storybook/addon-toolbars": "7.0.0-alpha.40",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.40",
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/api": "7.0.0-alpha.40",
|
||||
"@storybook/core-common": "7.0.0-alpha.40",
|
||||
"@storybook/node-logger": "7.0.0-alpha.40",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.42",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.42",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.42",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.42",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.42",
|
||||
"@storybook/addon-measure": "7.0.0-alpha.42",
|
||||
"@storybook/addon-outline": "7.0.0-alpha.42",
|
||||
"@storybook/addon-toolbars": "7.0.0-alpha.42",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.42",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/api": "7.0.0-alpha.42",
|
||||
"@storybook/core-common": "7.0.0-alpha.42",
|
||||
"@storybook/node-logger": "7.0.0-alpha.42",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/vue": "7.0.0-alpha.40",
|
||||
"@storybook/vue": "7.0.0-alpha.42",
|
||||
"@types/jest": "^26.0.16",
|
||||
"typescript": "~4.6.3"
|
||||
},
|
||||
@ -112,5 +112,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c"
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-highlight",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Highlight DOM nodes within your stories",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -50,8 +50,8 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/core-events": "7.0.0-alpha.40",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/core-events": "7.0.0-alpha.42",
|
||||
"global": "^4.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -67,7 +67,7 @@
|
||||
"./src/highlight.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c",
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Highlight",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-interactions",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Automate, test and debug user interactions",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -59,15 +59,15 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@devtools-ds/object-inspector": "^1.1.2",
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/api": "7.0.0-alpha.40",
|
||||
"@storybook/client-logger": "7.0.0-alpha.40",
|
||||
"@storybook/components": "7.0.0-alpha.40",
|
||||
"@storybook/core-common": "7.0.0-alpha.40",
|
||||
"@storybook/core-events": "7.0.0-alpha.40",
|
||||
"@storybook/csf": "0.0.2--canary.49.258942b.0",
|
||||
"@storybook/instrumenter": "7.0.0-alpha.40",
|
||||
"@storybook/theming": "7.0.0-alpha.40",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/api": "7.0.0-alpha.42",
|
||||
"@storybook/client-logger": "7.0.0-alpha.42",
|
||||
"@storybook/components": "7.0.0-alpha.42",
|
||||
"@storybook/core-common": "7.0.0-alpha.42",
|
||||
"@storybook/core-events": "7.0.0-alpha.42",
|
||||
"@storybook/csf": "next",
|
||||
"@storybook/instrumenter": "7.0.0-alpha.42",
|
||||
"@storybook/theming": "7.0.0-alpha.42",
|
||||
"global": "^4.4.0",
|
||||
"jest-mock": "^27.0.6",
|
||||
"polished": "^4.2.2",
|
||||
@ -104,7 +104,7 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c",
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b",
|
||||
"storybook": {
|
||||
"displayName": "Interactions",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -59,12 +59,12 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/api": "7.0.0-alpha.40",
|
||||
"@storybook/client-logger": "7.0.0-alpha.40",
|
||||
"@storybook/components": "7.0.0-alpha.40",
|
||||
"@storybook/core-events": "7.0.0-alpha.40",
|
||||
"@storybook/theming": "7.0.0-alpha.40",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/api": "7.0.0-alpha.42",
|
||||
"@storybook/client-logger": "7.0.0-alpha.42",
|
||||
"@storybook/components": "7.0.0-alpha.42",
|
||||
"@storybook/core-events": "7.0.0-alpha.42",
|
||||
"@storybook/theming": "7.0.0-alpha.42",
|
||||
"global": "^4.4.0",
|
||||
"react-sizeme": "^3.0.1",
|
||||
"upath": "^1.2.0"
|
||||
@ -94,7 +94,7 @@
|
||||
],
|
||||
"platform": "browser"
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c",
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b",
|
||||
"storybook": {
|
||||
"displayName": "Jest",
|
||||
"icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Link stories together to build demos and prototypes with your UI components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -63,11 +63,11 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/client-logger": "7.0.0-alpha.40",
|
||||
"@storybook/core-events": "7.0.0-alpha.40",
|
||||
"@storybook/csf": "0.0.2--canary.49.258942b.0",
|
||||
"@storybook/router": "7.0.0-alpha.40",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/client-logger": "7.0.0-alpha.42",
|
||||
"@storybook/core-events": "7.0.0-alpha.42",
|
||||
"@storybook/csf": "next",
|
||||
"@storybook/router": "7.0.0-alpha.42",
|
||||
"global": "^4.4.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"ts-dedent": "^2.0.0"
|
||||
@ -98,7 +98,7 @@
|
||||
"./src/react/index.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c",
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b",
|
||||
"storybook": {
|
||||
"displayName": "Links",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-measure",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Inspect layouts by visualizing the box model",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -61,12 +61,12 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/api": "7.0.0-alpha.40",
|
||||
"@storybook/client-logger": "7.0.0-alpha.40",
|
||||
"@storybook/components": "7.0.0-alpha.40",
|
||||
"@storybook/core-events": "7.0.0-alpha.40",
|
||||
"@storybook/csf": "0.0.2--canary.49.258942b.0",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/api": "7.0.0-alpha.42",
|
||||
"@storybook/client-logger": "7.0.0-alpha.42",
|
||||
"@storybook/components": "7.0.0-alpha.42",
|
||||
"@storybook/core-events": "7.0.0-alpha.42",
|
||||
"@storybook/csf": "next",
|
||||
"global": "^4.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -94,7 +94,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c",
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b",
|
||||
"storybook": {
|
||||
"displayName": "Measure",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-outline",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Outline all elements with CSS to help with layout placement and alignment",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -64,12 +64,12 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/api": "7.0.0-alpha.40",
|
||||
"@storybook/client-logger": "7.0.0-alpha.40",
|
||||
"@storybook/components": "7.0.0-alpha.40",
|
||||
"@storybook/core-events": "7.0.0-alpha.40",
|
||||
"@storybook/csf": "0.0.2--canary.49.258942b.0",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/api": "7.0.0-alpha.42",
|
||||
"@storybook/client-logger": "7.0.0-alpha.42",
|
||||
"@storybook/components": "7.0.0-alpha.42",
|
||||
"@storybook/core-events": "7.0.0-alpha.42",
|
||||
"@storybook/csf": "next",
|
||||
"global": "^4.4.0",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
@ -98,7 +98,7 @@
|
||||
"./src/preset/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c",
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b",
|
||||
"storybook": {
|
||||
"displayName": "Outline",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Take a code snapshot of every story automatically with Jest",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -38,13 +38,13 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@jest/transform": "^26.6.2",
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/babel-plugin-require-context-hook": "1.0.1",
|
||||
"@storybook/client-api": "7.0.0-alpha.40",
|
||||
"@storybook/core-client": "7.0.0-alpha.40",
|
||||
"@storybook/core-common": "7.0.0-alpha.40",
|
||||
"@storybook/core-webpack": "7.0.0-alpha.40",
|
||||
"@storybook/csf": "0.0.2--canary.49.258942b.0",
|
||||
"@storybook/client-api": "7.0.0-alpha.42",
|
||||
"@storybook/core-client": "7.0.0-alpha.42",
|
||||
"@storybook/core-common": "7.0.0-alpha.42",
|
||||
"@storybook/core-webpack": "7.0.0-alpha.42",
|
||||
"@storybook/csf": "next",
|
||||
"@types/glob": "^7.1.3",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/jest-specific-snapshot": "^0.5.3",
|
||||
@ -62,11 +62,11 @@
|
||||
"@angular/core": "^13.3.6",
|
||||
"@angular/platform-browser-dynamic": "^13.3.6",
|
||||
"@emotion/jest": "^11.8.0",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.40",
|
||||
"@storybook/angular": "7.0.0-alpha.40",
|
||||
"@storybook/react": "7.0.0-alpha.40",
|
||||
"@storybook/vue": "7.0.0-alpha.40",
|
||||
"@storybook/vue3": "7.0.0-alpha.40",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.42",
|
||||
"@storybook/angular": "7.0.0-alpha.42",
|
||||
"@storybook/react": "7.0.0-alpha.42",
|
||||
"@storybook/vue": "7.0.0-alpha.42",
|
||||
"@storybook/vue3": "7.0.0-alpha.42",
|
||||
"babel-loader": "^8.2.5",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.6.1",
|
||||
@ -144,7 +144,7 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c",
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b",
|
||||
"storybook": {
|
||||
"displayName": "Storyshots",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -34,8 +34,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@axe-core/puppeteer": "^4.2.0",
|
||||
"@storybook/csf": "0.0.2--canary.49.258942b.0",
|
||||
"@storybook/node-logger": "7.0.0-alpha.40",
|
||||
"@storybook/csf": "next",
|
||||
"@storybook/node-logger": "7.0.0-alpha.42",
|
||||
"@types/jest-image-snapshot": "^4.1.3",
|
||||
"jest-image-snapshot": "^4.3.0"
|
||||
},
|
||||
@ -44,7 +44,7 @@
|
||||
"puppeteer": "^2.0.0 || ^3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.40",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.42",
|
||||
"puppeteer": ">=2.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
@ -55,5 +55,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c"
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "View a story’s source code to see how it works and paste into your app",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -53,13 +53,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/api": "7.0.0-alpha.40",
|
||||
"@storybook/client-logger": "7.0.0-alpha.40",
|
||||
"@storybook/components": "7.0.0-alpha.40",
|
||||
"@storybook/router": "7.0.0-alpha.40",
|
||||
"@storybook/source-loader": "7.0.0-alpha.40",
|
||||
"@storybook/theming": "7.0.0-alpha.40",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/api": "7.0.0-alpha.42",
|
||||
"@storybook/client-logger": "7.0.0-alpha.42",
|
||||
"@storybook/components": "7.0.0-alpha.42",
|
||||
"@storybook/router": "7.0.0-alpha.42",
|
||||
"@storybook/source-loader": "7.0.0-alpha.42",
|
||||
"@storybook/theming": "7.0.0-alpha.42",
|
||||
"estraverse": "^5.2.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-syntax-highlighter": "^15.5.0"
|
||||
@ -91,7 +91,7 @@
|
||||
"./src/preset.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c",
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b",
|
||||
"storybook": {
|
||||
"displayName": "Storysource",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-toolbars",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Create your own toolbar items that control story rendering",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -57,11 +57,11 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/api": "7.0.0-alpha.40",
|
||||
"@storybook/client-logger": "7.0.0-alpha.40",
|
||||
"@storybook/components": "7.0.0-alpha.40",
|
||||
"@storybook/theming": "7.0.0-alpha.40"
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/api": "7.0.0-alpha.42",
|
||||
"@storybook/client-logger": "7.0.0-alpha.42",
|
||||
"@storybook/components": "7.0.0-alpha.42",
|
||||
"@storybook/theming": "7.0.0-alpha.42"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "~4.6.3"
|
||||
@ -88,7 +88,7 @@
|
||||
],
|
||||
"platform": "browser"
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c",
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b",
|
||||
"storybook": {
|
||||
"displayName": "Toolbars",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -59,12 +59,12 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/api": "7.0.0-alpha.40",
|
||||
"@storybook/client-logger": "7.0.0-alpha.40",
|
||||
"@storybook/components": "7.0.0-alpha.40",
|
||||
"@storybook/core-events": "7.0.0-alpha.40",
|
||||
"@storybook/theming": "7.0.0-alpha.40",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/api": "7.0.0-alpha.42",
|
||||
"@storybook/client-logger": "7.0.0-alpha.42",
|
||||
"@storybook/components": "7.0.0-alpha.42",
|
||||
"@storybook/core-events": "7.0.0-alpha.42",
|
||||
"@storybook/theming": "7.0.0-alpha.42",
|
||||
"global": "^4.4.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
"prop-types": "^15.7.2"
|
||||
@ -95,7 +95,7 @@
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c",
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b",
|
||||
"storybook": {
|
||||
"displayName": "Viewport",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/example-doc-blocks",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb build",
|
||||
@ -15,20 +15,20 @@
|
||||
"@babel/preset-env": "^7.12.11",
|
||||
"@babel/preset-react": "^7.12.10",
|
||||
"@babel/preset-typescript": "^7.12.7",
|
||||
"@storybook/addon-essentials": "7.0.0-alpha.40",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.40",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.40",
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/cli": "7.0.0-alpha.40",
|
||||
"@storybook/components": "7.0.0-alpha.40",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.40",
|
||||
"@storybook/theming": "7.0.0-alpha.40",
|
||||
"@storybook/addon-essentials": "7.0.0-alpha.42",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.42",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.42",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/cli": "7.0.0-alpha.42",
|
||||
"@storybook/components": "7.0.0-alpha.42",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.42",
|
||||
"@storybook/theming": "7.0.0-alpha.42",
|
||||
"@types/babel__preset-env": "^7",
|
||||
"@types/react": "^16.14.23",
|
||||
"@types/react-dom": "^16.9.14",
|
||||
"cross-env": "^7.0.3",
|
||||
"lodash": "^4.17.21",
|
||||
"sb": "7.0.0-alpha.40",
|
||||
"sb": "7.0.0-alpha.42",
|
||||
"typescript": "~4.6.3",
|
||||
"webpack": "5"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ember-example",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"--build-storybook": "yarn storybook-prebuild && storybook build",
|
||||
@ -17,19 +17,19 @@
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@ember/optional-features": "^2.0.0",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.40",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.40",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.40",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.40",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.40",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.40",
|
||||
"@storybook/addon-links": "7.0.0-alpha.40",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.40",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.40",
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/ember": "7.0.0-alpha.40",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.42",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.42",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.42",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.42",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.42",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.42",
|
||||
"@storybook/addon-links": "7.0.0-alpha.42",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.42",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.42",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/ember": "7.0.0-alpha.42",
|
||||
"@storybook/ember-cli-storybook": "^0.2.1",
|
||||
"@storybook/source-loader": "7.0.0-alpha.40",
|
||||
"@storybook/source-loader": "7.0.0-alpha.42",
|
||||
"babel-loader": "^8.2.5",
|
||||
"broccoli-asset-rev": "^3.0.0",
|
||||
"browserify-zlib": "^0.2.0",
|
||||
@ -49,7 +49,7 @@
|
||||
"loader.js": "^4.7.0",
|
||||
"os-browserify": "^0.3.0",
|
||||
"shx": "^0.3.2",
|
||||
"storybook": "7.0.0-alpha.40",
|
||||
"storybook": "7.0.0-alpha.42",
|
||||
"stream-browserify": "^3.0.0",
|
||||
"vm-browserify": "^1.1.2",
|
||||
"webpack": "5",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/external-docs",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "next build",
|
||||
@ -11,15 +11,15 @@
|
||||
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook dev -p 9011 --no-manager-cache -c .storybook"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-docs": "7.0.0-alpha.40",
|
||||
"@storybook/addon-essentials": "7.0.0-alpha.40",
|
||||
"@storybook/blocks": "7.0.0-alpha.40",
|
||||
"@storybook/components": "7.0.0-alpha.40",
|
||||
"@storybook/csf": "0.0.2--canary.49.258942b.0",
|
||||
"@storybook/preview-web": "7.0.0-alpha.40",
|
||||
"@storybook/react": "7.0.0-alpha.40",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.40",
|
||||
"@storybook/theming": "7.0.0-alpha.40",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.42",
|
||||
"@storybook/addon-essentials": "7.0.0-alpha.42",
|
||||
"@storybook/blocks": "7.0.0-alpha.42",
|
||||
"@storybook/components": "7.0.0-alpha.42",
|
||||
"@storybook/csf": "next",
|
||||
"@storybook/preview-web": "7.0.0-alpha.42",
|
||||
"@storybook/react": "7.0.0-alpha.42",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.42",
|
||||
"@storybook/theming": "7.0.0-alpha.42",
|
||||
"formik": "^2.2.9",
|
||||
"next": "^12.1.0",
|
||||
"nextra": "^1.1.0",
|
||||
@ -38,7 +38,7 @@
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "8.7.0",
|
||||
"eslint-config-next": "12.0.8",
|
||||
"storybook": "7.0.0-alpha.40",
|
||||
"storybook": "7.0.0-alpha.42",
|
||||
"typescript": "~4.6.3",
|
||||
"webpack": "5"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "server-kitchen-sink",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"private": true,
|
||||
"description": "",
|
||||
"keywords": [],
|
||||
@ -14,15 +14,15 @@
|
||||
"storybook": "SERVER_PORT=1137 storybook dev -p 9006 --quiet"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.40",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.40",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.40",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.40",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.40",
|
||||
"@storybook/addon-links": "7.0.0-alpha.40",
|
||||
"@storybook/node-logger": "7.0.0-alpha.40",
|
||||
"@storybook/server": "7.0.0-alpha.40",
|
||||
"@storybook/server-webpack5": "7.0.0-alpha.40",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.42",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.42",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.42",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.42",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.42",
|
||||
"@storybook/addon-links": "7.0.0-alpha.42",
|
||||
"@storybook/node-logger": "7.0.0-alpha.42",
|
||||
"@storybook/server": "7.0.0-alpha.42",
|
||||
"@storybook/server-webpack5": "7.0.0-alpha.42",
|
||||
"concurrently": "^5.3.0",
|
||||
"cors": "^2.8.5",
|
||||
"express": "~4.17.1",
|
||||
@ -30,6 +30,6 @@
|
||||
"nodemon": "^2.0.7",
|
||||
"pug": "^3.0.0",
|
||||
"safe-identifier": "^0.4.1",
|
||||
"storybook": "7.0.0-alpha.40"
|
||||
"storybook": "7.0.0-alpha.42"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
{
|
||||
"name": "standalone-preview",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook dev -p 9011 -c ../official-storybook --no-manager-cache --preview-url=http://localhost:1337/external-iframe.html",
|
||||
"storybook-preview": "cross-env PREVIEW_URL=external-iframe.html parcel ./storybook.html --port 1337"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-docs": "7.0.0-alpha.40",
|
||||
"@storybook/cli": "7.0.0-alpha.40",
|
||||
"@storybook/react": "7.0.0-alpha.40",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.40",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.42",
|
||||
"@storybook/cli": "7.0.0-alpha.42",
|
||||
"@storybook/react": "7.0.0-alpha.42",
|
||||
"@storybook/react-webpack5": "7.0.0-alpha.42",
|
||||
"cross-env": "^7.0.3",
|
||||
"parcel": "2.0.1",
|
||||
"react": "16.14.0",
|
||||
"react-dom": "16.14.0",
|
||||
"storybook": "7.0.0-alpha.40"
|
||||
"storybook": "7.0.0-alpha.42"
|
||||
}
|
||||
}
|
||||
|
||||
16
code/examples/svelte-kitchen-sink/.gitignore
vendored
16
code/examples/svelte-kitchen-sink/.gitignore
vendored
@ -1,16 +0,0 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
node_modules
|
||||
|
||||
# testing
|
||||
coverage
|
||||
|
||||
# production
|
||||
build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
@ -1,56 +0,0 @@
|
||||
const path = require('path');
|
||||
const sveltePreprocess = require('svelte-preprocess');
|
||||
|
||||
const mainConfig: import('@storybook/svelte-webpack5').StorybookConfig = {
|
||||
stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx||mdx|svelte)'],
|
||||
logLevel: 'debug',
|
||||
addons: [
|
||||
'@storybook/addon-storysource',
|
||||
'@storybook/addon-actions',
|
||||
{
|
||||
name: '@storybook/addon-docs',
|
||||
options: {
|
||||
configureJSX: true,
|
||||
},
|
||||
},
|
||||
'@storybook/addon-controls',
|
||||
'@storybook/addon-interactions',
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-backgrounds',
|
||||
'@storybook/addon-viewport',
|
||||
'@storybook/addon-a11y',
|
||||
'@storybook/addon-highlight',
|
||||
],
|
||||
webpackFinal: async (config) => {
|
||||
const rules = config.module?.rules || [];
|
||||
rules.push({
|
||||
test: [/\.stories\.js$/, /index\.js$/],
|
||||
use: [require.resolve('@storybook/source-loader')],
|
||||
include: [path.resolve(__dirname, '../src')],
|
||||
enforce: 'pre',
|
||||
});
|
||||
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
config.module = config.module || {};
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
config.module.rules = rules;
|
||||
|
||||
return config;
|
||||
},
|
||||
core: {
|
||||
channelOptions: { allowFunction: false, maxDepth: 10 },
|
||||
disableTelemetry: true,
|
||||
},
|
||||
staticDirs: ['../public'],
|
||||
features: {
|
||||
breakingChangesV7: true,
|
||||
},
|
||||
framework: {
|
||||
name: '@storybook/svelte-webpack5',
|
||||
options: {
|
||||
preprocess: sveltePreprocess(),
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = mainConfig;
|
||||
@ -1,5 +0,0 @@
|
||||
export const parameters = {
|
||||
docs: {
|
||||
iframeHeight: 300,
|
||||
},
|
||||
};
|
||||
@ -1,5 +0,0 @@
|
||||
# Storybook Svelte Demo
|
||||
|
||||
This example directory represents the application you wish to integrate storybook into.
|
||||
|
||||
Run `yarn install` to sync Storybook module with the source code and run `yarn storybook` to start the Storybook.
|
||||
@ -1,14 +0,0 @@
|
||||
const config = require('../../jest.config');
|
||||
|
||||
module.exports = {
|
||||
...config,
|
||||
roots: [__dirname],
|
||||
transform: {
|
||||
...config.transform,
|
||||
'.*\\.(svelte)$': ['svelte-jester', { preprocess: require.resolve('./svelte.config.js') }],
|
||||
},
|
||||
moduleNameMapper: {
|
||||
'!!raw-loader!.*': '<rootDir>/__mocks__/fileMock.js',
|
||||
},
|
||||
moduleFileExtensions: [...config.moduleFileExtensions, 'svelte'],
|
||||
};
|
||||
@ -1,40 +0,0 @@
|
||||
{
|
||||
"name": "svelte-example",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-storybook": "storybook build",
|
||||
"storybook": "storybook dev -p 9009 --no-manager-cache"
|
||||
},
|
||||
"dependencies": {
|
||||
"global": "^4.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.40",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.40",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.40",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.40",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.40",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.40",
|
||||
"@storybook/addon-interactions": "7.0.0-alpha.40",
|
||||
"@storybook/addon-links": "7.0.0-alpha.40",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.40",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.40",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.40",
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/jest": "^0.0.10",
|
||||
"@storybook/source-loader": "7.0.0-alpha.40",
|
||||
"@storybook/svelte": "7.0.0-alpha.40",
|
||||
"@storybook/svelte-webpack5": "7.0.0-alpha.40",
|
||||
"@storybook/testing-library": "0.0.14-next.0",
|
||||
"raw-loader": "^4.0.2",
|
||||
"storybook": "7.0.0-alpha.40",
|
||||
"svelte-jester": "^2.3.2",
|
||||
"svelte-preprocess": "^4.10.6"
|
||||
},
|
||||
"storybook": {
|
||||
"chromatic": {
|
||||
"projectToken": "8ob73wgl995"
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 87 KiB |
@ -1,44 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher, afterUpdate } from 'svelte';
|
||||
/**
|
||||
* Text
|
||||
*/
|
||||
export let text = '';
|
||||
/**
|
||||
* Border radius
|
||||
*/
|
||||
export let rounded = true;
|
||||
|
||||
const dispatch = createEventDispatcher<{ click: MouseEvent, afterUpdate: void}>();
|
||||
|
||||
function onClick(event: MouseEvent) {
|
||||
rounded = !rounded;
|
||||
|
||||
dispatch('click', event);
|
||||
}
|
||||
|
||||
afterUpdate(() => {
|
||||
dispatch('afterUpdate');
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.rounded {
|
||||
border-radius: 35px;
|
||||
}
|
||||
|
||||
.button {
|
||||
border: 3px solid;
|
||||
padding: 10px 20px;
|
||||
background-color: white;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<button class="button" class:rounded >
|
||||
<strong>{rounded ? 'Round' : 'Square'} corners</strong>
|
||||
<br />
|
||||
{text}
|
||||
<!-- Button text -->
|
||||
<slot />
|
||||
</button>
|
||||
@ -1,32 +0,0 @@
|
||||
import global from 'global';
|
||||
import Button from './Button.svelte';
|
||||
|
||||
const { document } = global;
|
||||
|
||||
let target;
|
||||
let component;
|
||||
|
||||
describe('Button Component', () => {
|
||||
beforeEach(() => {
|
||||
target = document.createElement('div');
|
||||
|
||||
component = new Button({ target });
|
||||
});
|
||||
|
||||
it('should render `text` property', () => {
|
||||
return new Promise((done) => {
|
||||
const text = 'Hello world';
|
||||
const expected = `Round corners ${text}`;
|
||||
|
||||
component.$on('afterUpdate', () => {
|
||||
const componentText = target.firstChild.textContent.trim();
|
||||
|
||||
expect(componentText).toEqual(expected);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
component.$set({ text });
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,10 +0,0 @@
|
||||
<script>
|
||||
import { getContext } from 'svelte';
|
||||
|
||||
let value = getContext('storybook/test') || 'No value';
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div on:click>
|
||||
Value read from context: {value}
|
||||
</div>
|
||||
@ -1,20 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let count = 0;
|
||||
|
||||
function onIncrement() {
|
||||
count +=1
|
||||
}
|
||||
|
||||
function onDecrement() {
|
||||
count +=1
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<h1>Svelte - Counter</h1>
|
||||
<h2 data-testid="count">You clicked {count} times</h2>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<button type="button" on:click={onDecrement}>Decrement</button>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<button type="button" on:click={onIncrement}>Increment</button>
|
||||
</div>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.2 KiB |
@ -1,15 +0,0 @@
|
||||
<script>
|
||||
export let color = 'red';
|
||||
</script>
|
||||
|
||||
<div style="border-color: {color}">
|
||||
<slot/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin: 8px;
|
||||
padding: 8px;
|
||||
border: 1px solid red;
|
||||
}
|
||||
</style>
|
||||
@ -1,21 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Addon/Actions Action on component method 1`] = `
|
||||
<section
|
||||
class="storybook-snapshot-container"
|
||||
>
|
||||
<button
|
||||
class="button svelte-n2tx93 rounded"
|
||||
>
|
||||
<strong>
|
||||
Round
|
||||
corners
|
||||
</strong>
|
||||
|
||||
<br />
|
||||
|
||||
Custom text
|
||||
|
||||
</button>
|
||||
</section>
|
||||
`;
|
||||
@ -1,44 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Addon/Backgrounds story 1 1`] = `
|
||||
<section
|
||||
class="storybook-snapshot-container"
|
||||
>
|
||||
<h1>
|
||||
Button view
|
||||
</h1>
|
||||
|
||||
<button
|
||||
class="button svelte-n2tx93"
|
||||
>
|
||||
<strong>
|
||||
Square
|
||||
corners
|
||||
</strong>
|
||||
|
||||
<br />
|
||||
|
||||
|
||||
|
||||
You clicked
|
||||
:
|
||||
0
|
||||
</button>
|
||||
|
||||
<p>
|
||||
A little text to show this is a view.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
If we need to test components in a Svelte environment, for instance to test slot behaviour,
|
||||
</p>
|
||||
|
||||
<p>
|
||||
then wrapping the component up in a view
|
||||
</p>
|
||||
|
||||
<p>
|
||||
made just for the story is the simplest way to achieve this.
|
||||
</p>
|
||||
</section>
|
||||
`;
|
||||
@ -1,87 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Addon/Docs rounded 1`] = `
|
||||
<section
|
||||
class="storybook-snapshot-container"
|
||||
>
|
||||
<h1>
|
||||
Button view
|
||||
</h1>
|
||||
|
||||
<button
|
||||
class="button svelte-n2tx93 rounded"
|
||||
>
|
||||
<strong>
|
||||
Round
|
||||
corners
|
||||
</strong>
|
||||
|
||||
<br />
|
||||
|
||||
|
||||
|
||||
Rounded text
|
||||
:
|
||||
0
|
||||
</button>
|
||||
|
||||
<p>
|
||||
A little text to show this is a view.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
If we need to test components in a Svelte environment, for instance to test slot behaviour,
|
||||
</p>
|
||||
|
||||
<p>
|
||||
then wrapping the component up in a view
|
||||
</p>
|
||||
|
||||
<p>
|
||||
made just for the story is the simplest way to achieve this.
|
||||
</p>
|
||||
</section>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon/Docs square 1`] = `
|
||||
<section
|
||||
class="storybook-snapshot-container"
|
||||
>
|
||||
<h1>
|
||||
Button view
|
||||
</h1>
|
||||
|
||||
<button
|
||||
class="button svelte-n2tx93"
|
||||
>
|
||||
<strong>
|
||||
Square
|
||||
corners
|
||||
</strong>
|
||||
|
||||
<br />
|
||||
|
||||
|
||||
|
||||
Squared text
|
||||
:
|
||||
0
|
||||
</button>
|
||||
|
||||
<p>
|
||||
A little text to show this is a view.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
If we need to test components in a Svelte environment, for instance to test slot behaviour,
|
||||
</p>
|
||||
|
||||
<p>
|
||||
then wrapping the component up in a view
|
||||
</p>
|
||||
|
||||
<p>
|
||||
made just for the story is the simplest way to achieve this.
|
||||
</p>
|
||||
</section>
|
||||
`;
|
||||
@ -1,27 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Addon/Links Go to welcome view 1`] = `
|
||||
<section
|
||||
class="storybook-snapshot-container"
|
||||
>
|
||||
<div
|
||||
class="main"
|
||||
>
|
||||
<h1>
|
||||
Link Action
|
||||
</h1>
|
||||
|
||||
<button
|
||||
class="link"
|
||||
>
|
||||
Return to the
|
||||
<code
|
||||
class="code"
|
||||
>
|
||||
Welcome
|
||||
</code>
|
||||
view story.
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
`;
|
||||
@ -1,24 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Args Table Args Table 1`] = `
|
||||
<section
|
||||
class="storybook-snapshot-container"
|
||||
>
|
||||
<pre>
|
||||
{
|
||||
"string": "string",
|
||||
"number": 0,
|
||||
"unionstr": "a",
|
||||
"unionnumeric": 1,
|
||||
"union": null,
|
||||
"required": ""
|
||||
}
|
||||
</pre>
|
||||
|
||||
<div />
|
||||
|
||||
<div />
|
||||
|
||||
|
||||
</section>
|
||||
`;
|
||||
@ -1,107 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Button Rounded 1`] = `
|
||||
<section
|
||||
class="storybook-snapshot-container"
|
||||
>
|
||||
<h1>
|
||||
Button view
|
||||
</h1>
|
||||
|
||||
<button
|
||||
class="button svelte-n2tx93 rounded"
|
||||
>
|
||||
<strong>
|
||||
Round
|
||||
corners
|
||||
</strong>
|
||||
|
||||
<br />
|
||||
|
||||
|
||||
|
||||
Rounded
|
||||
:
|
||||
0
|
||||
</button>
|
||||
|
||||
<p>
|
||||
A little text to show this is a view.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
If we need to test components in a Svelte environment, for instance to test slot behaviour,
|
||||
</p>
|
||||
|
||||
<p>
|
||||
then wrapping the component up in a view
|
||||
</p>
|
||||
|
||||
<p>
|
||||
made just for the story is the simplest way to achieve this.
|
||||
</p>
|
||||
</section>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button Square 1`] = `
|
||||
<section
|
||||
class="storybook-snapshot-container"
|
||||
>
|
||||
<h1>
|
||||
Button view
|
||||
</h1>
|
||||
|
||||
<button
|
||||
class="button svelte-n2tx93"
|
||||
>
|
||||
<strong>
|
||||
Square
|
||||
corners
|
||||
</strong>
|
||||
|
||||
<br />
|
||||
|
||||
|
||||
|
||||
Square
|
||||
:
|
||||
0
|
||||
</button>
|
||||
|
||||
<p>
|
||||
A little text to show this is a view.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
If we need to test components in a Svelte environment, for instance to test slot behaviour,
|
||||
</p>
|
||||
|
||||
<p>
|
||||
then wrapping the component up in a view
|
||||
</p>
|
||||
|
||||
<p>
|
||||
made just for the story is the simplest way to achieve this.
|
||||
</p>
|
||||
</section>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button With Default Render 1`] = `
|
||||
<section
|
||||
class="storybook-snapshot-container"
|
||||
>
|
||||
<button
|
||||
class="button svelte-n2tx93"
|
||||
>
|
||||
<strong>
|
||||
Square
|
||||
corners
|
||||
</strong>
|
||||
|
||||
<br />
|
||||
|
||||
Magic!
|
||||
|
||||
</button>
|
||||
</section>
|
||||
`;
|
||||
@ -1,27 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Decorators Decorators 1`] = `
|
||||
<section
|
||||
class="storybook-snapshot-container"
|
||||
>
|
||||
<div
|
||||
class="svelte-1gln52r"
|
||||
style="border-color: blue;"
|
||||
>
|
||||
<div
|
||||
class="svelte-1gln52r"
|
||||
style="border-color: red;"
|
||||
>
|
||||
<div>
|
||||
Value read from context: setted from decorator
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
`;
|
||||
@ -1,102 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Welcome Welcome 1`] = `
|
||||
<section
|
||||
class="storybook-snapshot-container"
|
||||
>
|
||||
<div
|
||||
class="main svelte-5n9a95"
|
||||
>
|
||||
<h1>
|
||||
Welcome to Storybook for Svelte
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
This is a UI component dev environment for your svelte app.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<code
|
||||
class="code svelte-5n9a95"
|
||||
>
|
||||
src/stories
|
||||
</code>
|
||||
directory.
|
||||
|
||||
<strong>
|
||||
A story is like a visual test case
|
||||
</strong>
|
||||
|
||||
and represents a single state of one or more UI components.
|
||||
You can have as many stories as you want.
|
||||
</p>
|
||||
|
||||
<h1
|
||||
class="logo svelte-5n9a95"
|
||||
>
|
||||
Svelte
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
You can also edit those components and see changes right away.
|
||||
|
||||
<br />
|
||||
|
||||
(Try editing the
|
||||
<code
|
||||
class="code svelte-5n9a95"
|
||||
>
|
||||
Button
|
||||
</code>
|
||||
component
|
||||
located at
|
||||
<code
|
||||
class="code svelte-5n9a95"
|
||||
>
|
||||
src/stories/views/Welcome.svelte
|
||||
</code>
|
||||
.)
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
|
||||
Have a look at the
|
||||
|
||||
<a
|
||||
class="link svelte-5n9a95"
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
|
||||
section in our documentation.
|
||||
</p>
|
||||
|
||||
<p
|
||||
class="note svelte-5n9a95"
|
||||
>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
|
||||
<br />
|
||||
|
||||
Have a look at the
|
||||
|
||||
<code
|
||||
class="code svelte-5n9a95"
|
||||
>
|
||||
.storybook/webpack.config.js
|
||||
</code>
|
||||
|
||||
to add webpack
|
||||
loaders and plugins you are using in this project.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
`;
|
||||
@ -1,20 +0,0 @@
|
||||
import ArgsTableView from './views/ArgsTableView.svelte';
|
||||
// eslint-disable-next-line
|
||||
import srcArgsTableView from '!!raw-loader!./views/ArgsTableView.svelte';
|
||||
|
||||
export default {
|
||||
title: 'Args Table',
|
||||
component: ArgsTableView,
|
||||
};
|
||||
|
||||
export const ArgsTable = (args) => ({
|
||||
Component: ArgsTableView,
|
||||
props: args,
|
||||
});
|
||||
ArgsTable.parameters = {
|
||||
docs: {
|
||||
source: {
|
||||
code: srcArgsTableView,
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,33 +0,0 @@
|
||||
import ButtonView from './views/ButtonView.svelte';
|
||||
import Button from '../components/Button.svelte';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
};
|
||||
|
||||
const Template = (args) => ({
|
||||
Component: ButtonView,
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
});
|
||||
|
||||
export const Rounded = Template.bind({});
|
||||
Rounded.args = {
|
||||
rounded: true,
|
||||
text: 'Rounded',
|
||||
};
|
||||
|
||||
export const Square = Template.bind({});
|
||||
Square.args = {
|
||||
rounded: false,
|
||||
text: 'Square',
|
||||
};
|
||||
|
||||
export const WithDefaultRender = {
|
||||
args: {
|
||||
rounded: false,
|
||||
text: 'Magic!',
|
||||
},
|
||||
};
|
||||
@ -1,23 +0,0 @@
|
||||
import { setContext } from 'svelte';
|
||||
import Context from '../components/Context.svelte';
|
||||
import BorderDecorator from './BorderDecorator.svelte';
|
||||
|
||||
export default {
|
||||
title: 'Decorators',
|
||||
component: Context,
|
||||
decorators: [
|
||||
() => BorderDecorator,
|
||||
() => ({ Component: BorderDecorator, props: { color: 'blue' } }),
|
||||
],
|
||||
};
|
||||
|
||||
export const Decorators = () => ({
|
||||
on: {
|
||||
click: () => {},
|
||||
},
|
||||
});
|
||||
Decorators.decorators = [
|
||||
() => {
|
||||
setContext('storybook/test', 'settled from decorator');
|
||||
},
|
||||
];
|
||||
@ -1,14 +0,0 @@
|
||||
import ErrorView from './views/ErrorView.svelte';
|
||||
|
||||
export default {
|
||||
title: 'Error',
|
||||
component: ErrorView,
|
||||
parameters: {
|
||||
chromatic: { disable: true },
|
||||
storyshots: { disable: true },
|
||||
},
|
||||
};
|
||||
|
||||
export const Error = () => ({
|
||||
Component: ErrorView,
|
||||
});
|
||||
@ -1,9 +0,0 @@
|
||||
<div style="width: {width}px; height: {height}px; background-color: {backgroundColor}">
|
||||
<p>I am interactive</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export let width = 200;
|
||||
export let height = 100;
|
||||
export let backgroundColor = 'yellow';
|
||||
</script>
|
||||
@ -1,20 +0,0 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let onClick = (event) => {
|
||||
dispatch('click', event);
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="main">
|
||||
<h1>Link Action</h1>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<button on:click={onClick} class="link">
|
||||
Return to the <code class="code">Welcome</code> view story.
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -1,70 +0,0 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let string = 'string';
|
||||
export let number = 0;
|
||||
/**
|
||||
* @type {(string) => string}
|
||||
*/
|
||||
export let fun = (key) => '';
|
||||
/**
|
||||
* @type {'a'|'b'}
|
||||
*/
|
||||
export let unionstr = 'a';
|
||||
|
||||
/**
|
||||
* @type {0|1}
|
||||
*/
|
||||
export let unionnumeric = 1;
|
||||
|
||||
/** @typedef {object} TypeA */
|
||||
/** @typedef {number} TypeB */
|
||||
/** @type {TypeA|TypeB}*/
|
||||
export let union = null;
|
||||
|
||||
/**
|
||||
* @required
|
||||
*/
|
||||
export let required = '';
|
||||
|
||||
export let unknown = undefined;
|
||||
|
||||
function onClick() {
|
||||
/**
|
||||
* Event description
|
||||
*/
|
||||
dispatch('change', "some value");
|
||||
}
|
||||
|
||||
$: preview = {
|
||||
string,
|
||||
number,
|
||||
fun,
|
||||
unionstr,
|
||||
unionnumeric,
|
||||
union,
|
||||
required,
|
||||
unknown,
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<pre on:click={onClick}>{JSON.stringify(preview, null, ' ')}</pre>
|
||||
|
||||
<!--
|
||||
User has clicked this element
|
||||
-->
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div on:click/>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div on:click={() => /** Close description */ dispatch('close')}/>
|
||||
|
||||
<!-- Default Slot -->
|
||||
<slot/>
|
||||
|
||||
<!-- Slot for actions -->
|
||||
<slot name="actions" {required} value={string}/>
|
||||
@ -1,35 +0,0 @@
|
||||
<script>
|
||||
/**
|
||||
* @component Button View
|
||||
* @wrapper
|
||||
*/
|
||||
import Button from '../../components/Button.svelte';
|
||||
|
||||
|
||||
/**
|
||||
* Rounds the button
|
||||
*/
|
||||
export let rounded = false;
|
||||
|
||||
/**
|
||||
* Displays the count
|
||||
*/
|
||||
export let count = 0;
|
||||
|
||||
/**
|
||||
* Button text
|
||||
* @slot
|
||||
*/
|
||||
export let text = 'You clicked';
|
||||
|
||||
function handleClick(event) {
|
||||
count += 1;
|
||||
}
|
||||
</script>
|
||||
|
||||
<h1>Button view</h1>
|
||||
<Button {rounded} on:click on:click={handleClick}>{text}: {count}</Button>
|
||||
<p>A little text to show this is a view.</p>
|
||||
<p>If we need to test components in a Svelte environment, for instance to test slot behaviour,</p>
|
||||
<p>then wrapping the component up in a view</p>
|
||||
<p>made just for the story is the simplest way to achieve this.</p>
|
||||
@ -1,4 +0,0 @@
|
||||
<script>
|
||||
export let myFunction;
|
||||
myFunction();
|
||||
</script>
|
||||
@ -1,81 +0,0 @@
|
||||
<div class="main">
|
||||
<h1>Welcome to Storybook for Svelte</h1>
|
||||
<p>
|
||||
This is a UI component dev environment for your svelte app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the <code class="code">src/stories</code> directory.
|
||||
<strong>A story is like a visual test case</strong>
|
||||
and represents a single state of one or more UI components.
|
||||
You can have as many stories as you want.
|
||||
</p>
|
||||
|
||||
<h1 class="logo">Svelte</h1>
|
||||
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the <code class="code">Button</code> component
|
||||
located at <code class="code">src/stories/views/Welcome.svelte</code>.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.<br />
|
||||
Have a look at the
|
||||
<a
|
||||
class="link"
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
target="_blank"
|
||||
>Writing Stories</a>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<p class="note">
|
||||
<b>NOTE:</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<code class="code">.storybook/webpack.config.js</code>
|
||||
to add webpack
|
||||
loaders and plugins you are using in this project.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css?family=Rajdhani');
|
||||
|
||||
.main {
|
||||
padding: 15px;
|
||||
line-height: 1.4;
|
||||
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
color: rgb(170,30,30);
|
||||
font-weight: 300;
|
||||
font-size: 8rem;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #1474f3;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #1474f3;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.code {
|
||||
font-size: 15;
|
||||
font-weight: 600;
|
||||
padding: 2px 5px;
|
||||
border: 1px solid #eae9e9;
|
||||
border-radius: 4px;
|
||||
background-color: #f3f2f2;
|
||||
color: #3a3a3a;
|
||||
}
|
||||
|
||||
.note {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +0,0 @@
|
||||
import WelcomeView from './views/WelcomeView.svelte';
|
||||
|
||||
export default {
|
||||
title: 'Welcome',
|
||||
};
|
||||
|
||||
export const Welcome = () => ({
|
||||
Component: WelcomeView,
|
||||
});
|
||||
@ -1,5 +0,0 @@
|
||||
const sveltePreprocess = require('svelte-preprocess');
|
||||
|
||||
module.exports = {
|
||||
preprocess: sveltePreprocess(),
|
||||
};
|
||||
@ -1,9 +0,0 @@
|
||||
import path from 'path';
|
||||
import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
|
||||
|
||||
initStoryshots({
|
||||
framework: 'svelte',
|
||||
configPath: path.join(__dirname, '.storybook'),
|
||||
integrityOptions: { cwd: path.join(__dirname, 'src', 'stories') },
|
||||
test: multiSnapshotWithOptions(),
|
||||
});
|
||||
@ -1,12 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"target": "ES2020",
|
||||
"module": "ES2020",
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"moduleResolution": "Node"
|
||||
},
|
||||
"include": ["src/*"]
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -34,19 +34,19 @@
|
||||
"prep": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/api": "7.0.0-alpha.40",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.40",
|
||||
"@storybook/client-logger": "7.0.0-alpha.40",
|
||||
"@storybook/core-client": "7.0.0-alpha.40",
|
||||
"@storybook/core-common": "7.0.0-alpha.40",
|
||||
"@storybook/core-events": "7.0.0-alpha.40",
|
||||
"@storybook/core-server": "7.0.0-alpha.40",
|
||||
"@storybook/core-webpack": "7.0.0-alpha.40",
|
||||
"@storybook/csf": "0.0.2--canary.49.258942b.0",
|
||||
"@storybook/docs-tools": "7.0.0-alpha.40",
|
||||
"@storybook/node-logger": "7.0.0-alpha.40",
|
||||
"@storybook/store": "7.0.0-alpha.40",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/api": "7.0.0-alpha.42",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.42",
|
||||
"@storybook/client-logger": "7.0.0-alpha.42",
|
||||
"@storybook/core-client": "7.0.0-alpha.42",
|
||||
"@storybook/core-common": "7.0.0-alpha.42",
|
||||
"@storybook/core-events": "7.0.0-alpha.42",
|
||||
"@storybook/core-server": "7.0.0-alpha.42",
|
||||
"@storybook/core-webpack": "7.0.0-alpha.42",
|
||||
"@storybook/csf": "next",
|
||||
"@storybook/docs-tools": "7.0.0-alpha.42",
|
||||
"@storybook/node-logger": "7.0.0-alpha.42",
|
||||
"@storybook/store": "7.0.0-alpha.42",
|
||||
"@types/node": "^16.0.0",
|
||||
"@types/react": "^16.14.23",
|
||||
"@types/react-dom": "^16.9.14",
|
||||
@ -120,5 +120,5 @@
|
||||
"access": "public"
|
||||
},
|
||||
"builders": "dist/types/builders/builders.json",
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c"
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/ember",
|
||||
"bugs": {
|
||||
@ -30,11 +30,11 @@
|
||||
"prep": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.40",
|
||||
"@storybook/core-client": "7.0.0-alpha.40",
|
||||
"@storybook/core-common": "7.0.0-alpha.40",
|
||||
"@storybook/docs-tools": "7.0.0-alpha.40",
|
||||
"@storybook/store": "7.0.0-alpha.40",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.42",
|
||||
"@storybook/core-client": "7.0.0-alpha.42",
|
||||
"@storybook/core-common": "7.0.0-alpha.42",
|
||||
"@storybook/docs-tools": "7.0.0-alpha.42",
|
||||
"@storybook/store": "7.0.0-alpha.42",
|
||||
"global": "^4.4.0",
|
||||
"react": "16.14.0",
|
||||
"react-dom": "16.14.0",
|
||||
@ -57,5 +57,5 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c"
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html-webpack5",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -50,10 +50,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.40",
|
||||
"@storybook/core-common": "7.0.0-alpha.40",
|
||||
"@storybook/html": "7.0.0-alpha.40",
|
||||
"@storybook/preset-html-webpack": "7.0.0-alpha.40",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.42",
|
||||
"@storybook/core-common": "7.0.0-alpha.42",
|
||||
"@storybook/html": "7.0.0-alpha.42",
|
||||
"@storybook/preset-html-webpack": "7.0.0-alpha.42",
|
||||
"@types/node": "^16.0.0",
|
||||
"global": "^4.4.0",
|
||||
"react": "16.14.0",
|
||||
@ -78,5 +78,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c"
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b"
|
||||
}
|
||||
|
||||
17
code/frameworks/nextjs/.eslintrc.json
Normal file
17
code/frameworks/nextjs/.eslintrc.json
Normal file
@ -0,0 +1,17 @@
|
||||
{
|
||||
"rules": {
|
||||
"global-require": "off",
|
||||
"no-param-reassign": "off",
|
||||
"import/no-dynamic-require": "off",
|
||||
"import/no-unresolved": "off"
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["**/*.stories.@(jsx|tsx)"],
|
||||
"rules": {
|
||||
"react/no-unknown-property": "off",
|
||||
"jsx-a11y/anchor-is-valid": "off"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
603
code/frameworks/nextjs/README.md
Normal file
603
code/frameworks/nextjs/README.md
Normal file
@ -0,0 +1,603 @@
|
||||
# Storybook for Next.js <!-- omit in toc -->
|
||||
|
||||
## 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)
|
||||
- [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 Routing](#nextjs-routing)
|
||||
- [Overriding defaults](#overriding-defaults)
|
||||
- [Global Defaults](#global-defaults)
|
||||
- [Default Router](#default-router)
|
||||
- [Actions Integration Caveats](#actions-integration-caveats)
|
||||
- [Sass/Scss](#sassscss)
|
||||
- [Css/Sass/Scss Modules](#csssassscss-modules)
|
||||
- [Styled JSX](#styled-jsx)
|
||||
- [Postcss](#postcss)
|
||||
- [Absolute Imports](#absolute-imports)
|
||||
- [Runtime Config](#runtime-config)
|
||||
- [Custom Webpack Config](#custom-webpack-config)
|
||||
- [Typescript](#typescript)
|
||||
- [Notes for Yarn v2 and v3 users](#notes-for-yarn-v2-and-v3-users)
|
||||
- [FAQ](#faq)
|
||||
- [Stories for pages](#stories-for-pages)
|
||||
- [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)
|
||||
- [Acknowledgements](#acknowledgements)
|
||||
|
||||
## Supported Features
|
||||
|
||||
👉 [Next.js's Image Component](#nextjss-image-component)
|
||||
|
||||
👉 [Next.js Routing](#nextjs-routing)
|
||||
|
||||
👉 [Sass/Scss](#sassscss)
|
||||
|
||||
👉 [Css/Sass/Scss Modules](#csssassscss-modules)
|
||||
|
||||
👉 [Styled JSX](#styled-jsx)
|
||||
|
||||
👉 [Postcss](#postcss)
|
||||
|
||||
👉 [Absolute Imports](#absolute-imports)
|
||||
|
||||
👉 [Runtime Config](#runtime-config)
|
||||
|
||||
👉 [Custom Webpack Config](#custom-webpack-config)
|
||||
|
||||
👉 [Typescript](#typescript) (already supported out of the box by Storybook)
|
||||
|
||||
## Requirements
|
||||
|
||||
- [Next.js](https://nextjs.org/) >= 9.x
|
||||
- [Storybook](https://storybook.js.org/) >= 7.x
|
||||
|
||||
## Getting Started
|
||||
|
||||
### In a project without Storybook
|
||||
|
||||
Follow the prompts after running this command in your Next.js project's root directory:
|
||||
|
||||
```bash
|
||||
npx storybook init
|
||||
```
|
||||
|
||||
[More on getting started with Storybook](https://storybook.js.org/docs/react/get-started/introduction)
|
||||
|
||||
### In a project with Storybook
|
||||
|
||||
Update your `main.js` to look something like this:
|
||||
|
||||
Install the framework:
|
||||
|
||||
```bash
|
||||
yarn install @storybook/nextjs
|
||||
```
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
module.exports = {
|
||||
framework: {
|
||||
name: '@storybook/nextjs',
|
||||
options: {};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
### Options
|
||||
|
||||
You can be pass an options object for addional configuration if needed.
|
||||
|
||||
For example:
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
// other config ommited for brevity
|
||||
framework: {
|
||||
name: '@storybook/nextjs',
|
||||
options: {
|
||||
nextConfigPath: path.resolve(__dirname, '../next.config.js'),
|
||||
},
|
||||
},
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
- `nextConfigPath`: The absolute path to the `next.config.js`
|
||||
|
||||
### Next.js's Image Component
|
||||
|
||||
[next/image](https://nextjs.org/docs/api-reference/next/image) is [notoriously difficult](https://github.com/vercel/next.js/issues/18393) to get working with Storybook. This framework allows you to use Next.js's `Image` component with no configuration!
|
||||
|
||||
#### Local Images
|
||||
|
||||
[Local images](https://nextjs.org/docs/basic-features/image-optimization#local-images) work just fine! Keep in mind that this feature was [only added in Next.js v11](https://nextjs.org/blog/next-11#automatic-size-detection-local-images).
|
||||
|
||||
```js
|
||||
import Image from 'next/image';
|
||||
import profilePic from '../public/me.png';
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
<>
|
||||
<h1>My Homepage</h1>
|
||||
<Image
|
||||
src={profilePic}
|
||||
alt="Picture of the author"
|
||||
// width={500} automatically provided
|
||||
// height={500} automatically provided
|
||||
// blurDataURL="../public/me.png" set to equal the image itself (for this framework)
|
||||
// placeholder="blur" // Optional blur-up while loading
|
||||
/>
|
||||
<p>Welcome to my homepage!</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
#### Remote Images
|
||||
|
||||
[Remote images](https://nextjs.org/docs/basic-features/image-optimization#remote-images) also work just fine!
|
||||
|
||||
```js
|
||||
import Image from 'next/image';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<h1>My Homepage</h1>
|
||||
<Image src="/me.png" alt="Picture of the author" width={500} height={500} />
|
||||
<p>Welcome to my homepage!</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
#### Optimization
|
||||
|
||||
All Next.js `Image`s are automatically [unoptimized](https://nextjs.org/docs/api-reference/next/image#unoptimized) for you.
|
||||
|
||||
If [placeholder="blur"](https://nextjs.org/docs/api-reference/next/image#placeholder) is used, the [blurDataURL](https://nextjs.org/docs/api-reference/next/image#blurdataurl) used is the [src](https://nextjs.org/docs/api-reference/next/image#src) of the image (thus effectively disabling the placeholder).
|
||||
|
||||
See [this issue](https://github.com/vercel/next.js/issues/18393) for more discussion on how Next.js `Image`s are handled for Storybook.
|
||||
|
||||
#### AVIF
|
||||
|
||||
This format is not supported by this framework yet. Feel free to [open up an issue](https://github.com/storybookjs/storybook/issues) if this is something you want to see.
|
||||
|
||||
### Next.js Routing
|
||||
|
||||
[Next.js's router](https://nextjs.org/docs/routing/introduction) is automatically stubbed for you so that when the router is interacted with, all of its interactions are automatically logged to the [Storybook actions tab](https://storybook.js.org/docs/react/essentials/actions) if you have the actions addon.
|
||||
|
||||
#### 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.
|
||||
|
||||
```js
|
||||
// SomeComponentThatUsesTheRouter.stories.js
|
||||
import SomeComponentThatUsesTheRouter from './SomeComponentThatUsesTheRouter';
|
||||
|
||||
export default {
|
||||
component: SomeComponentThatUsesTheRouter,
|
||||
};
|
||||
|
||||
// if you have the actions addon
|
||||
// you can click the links and see the route change events there
|
||||
export const Example = {
|
||||
parameters: {
|
||||
nextRouter: {
|
||||
path: '/profile/[id]',
|
||||
asPath: '/profile/ryanclementshax',
|
||||
query: {
|
||||
id: 'ryanclementshax',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### 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/main.js
|
||||
|
||||
export const parameters = {
|
||||
nextRouter: {
|
||||
path: '/some-default-path',
|
||||
asPath: '/some-default-path',
|
||||
query: {},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### Default Router
|
||||
|
||||
The default values on the stubbed router are as follows (see [globals](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#globals) for more details on how globals work)
|
||||
|
||||
```ts
|
||||
const defaultRouter = {
|
||||
locale: context?.globals?.locale,
|
||||
route: '/',
|
||||
pathname: '/',
|
||||
query: {},
|
||||
asPath: '/',
|
||||
push(...args: unknown[]) {
|
||||
action('nextRouter.push')(...args);
|
||||
return Promise.resolve(true);
|
||||
},
|
||||
replace(...args: unknown[]) {
|
||||
action('nextRouter.replace')(...args);
|
||||
return Promise.resolve(true);
|
||||
},
|
||||
reload(...args: unknown[]) {
|
||||
action('nextRouter.reload')(...args);
|
||||
},
|
||||
back(...args: unknown[]) {
|
||||
action('nextRouter.back')(...args);
|
||||
},
|
||||
prefetch(...args: unknown[]) {
|
||||
action('nextRouter.prefetch')(...args);
|
||||
return Promise.resolve();
|
||||
},
|
||||
beforePopState(...args: unknown[]) {
|
||||
action('nextRouter.beforePopState')(...args);
|
||||
},
|
||||
events: {
|
||||
on(...args: unknown[]) {
|
||||
action('nextRouter.events.on')(...args);
|
||||
},
|
||||
off(...args: unknown[]) {
|
||||
action('nextRouter.events.off')(...args);
|
||||
},
|
||||
emit(...args: unknown[]) {
|
||||
action('nextRouter.events.emit')(...args);
|
||||
},
|
||||
},
|
||||
isFallback: false,
|
||||
};
|
||||
```
|
||||
|
||||
#### Actions Integration Caveats
|
||||
|
||||
If you override a function, you lose the automatic action tab integration and have to build it out yourself.
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
|
||||
export const parameters = {
|
||||
nextRouter: {
|
||||
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/main.js
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
export const parameters = {
|
||||
nextRouter: {
|
||||
push(...args) {
|
||||
// custom logic can go here
|
||||
// this logs to the actions tab
|
||||
action('nextRouter.push')(...args);
|
||||
// return whatever you want here
|
||||
return Promise.resolve(true);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Sass/Scss
|
||||
|
||||
[Global sass/scss stylesheets](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support) are supported without any additional configuration as well. Just import them into [preview.js](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering)
|
||||
|
||||
```js
|
||||
import '../styles/globals.scss';
|
||||
```
|
||||
|
||||
This will automatically include any of your [custom sass configurations](https://nextjs.org/docs/basic-features/built-in-css-support#customizing-sass-options) in your `next.config.js` file.
|
||||
|
||||
```js
|
||||
// next.config.js
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
// any options here are included in sass compilation for your stories
|
||||
sassOptions: {
|
||||
includePaths: [path.join(__dirname, 'styles')],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Css/Sass/Scss Modules
|
||||
|
||||
[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
|
||||
import styles from './Button.module.css';
|
||||
// sass/scss is also supported
|
||||
// import styles from './Button.module.scss'
|
||||
// import styles from './Button.module.sass'
|
||||
|
||||
export function Button() {
|
||||
return (
|
||||
<button type="button" className={styles.error}>
|
||||
Destroy
|
||||
</button>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Styled JSX
|
||||
|
||||
The built in CSS-in-JS solution for Next.js is [styled-jsx](https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js), and this framework supports that out of the box too, zero config.
|
||||
|
||||
```js
|
||||
// This works just fine in Storybook now
|
||||
function HelloWorld() {
|
||||
return (
|
||||
<div>
|
||||
Hello world
|
||||
<p>scoped!</p>
|
||||
<style jsx>{`
|
||||
p {
|
||||
color: blue;
|
||||
}
|
||||
div {
|
||||
background: red;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
div {
|
||||
background: blue;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
<style global jsx>{`
|
||||
body {
|
||||
background: black;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default HelloWorld;
|
||||
```
|
||||
|
||||
You can use your own babel config too. This is an example of how you can customize styled-jsx.
|
||||
|
||||
```json
|
||||
// .babelrc or whatever config file you use
|
||||
{
|
||||
"presets": [
|
||||
[
|
||||
"next/babel",
|
||||
{
|
||||
"styled-jsx": {
|
||||
"plugins": ["@styled-jsx/plugin-sass"]
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
If you use a monorepo, you may need to add the babel config yourself to your storybook project. Just add a babel config to your storybook project with the following contents to get started.
|
||||
|
||||
```json
|
||||
{
|
||||
"presets": ["next/babel"]
|
||||
}
|
||||
```
|
||||
|
||||
### Postcss
|
||||
|
||||
Next.js lets you [customize postcss config](https://nextjs.org/docs/advanced-features/customizing-postcss-config#default-behavior). Thus this framework will automatically handle your postcss config for you.
|
||||
|
||||
This allows for cool things like zero config tailwindcss! (See [Next.js' example](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss))
|
||||
|
||||
### Absolute Imports
|
||||
|
||||
Goodbye `../`! Absolute imports from the root directory work just fine.
|
||||
|
||||
```js
|
||||
// All good!
|
||||
import Button from 'components/button';
|
||||
// Also good!
|
||||
import styles from 'styles/HomePage.module.css';
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<h1 className={styles.title}>Hello World</h1>
|
||||
<Button />
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
// preview.js
|
||||
|
||||
// Also ok in preview.js!
|
||||
import 'styles/globals.scss';
|
||||
|
||||
// ...
|
||||
```
|
||||
|
||||
### Runtime Config
|
||||
|
||||
Next.js allows for [Runtime Configuration](https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration) which lets you import a handy `getConfig` function to get certain configuration defined in your `next.config.js` file at runtime.
|
||||
|
||||
In the context of Storybook with this framework, you can expect Next.js's [Runtime Configuration](https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration) feature to work just fine.
|
||||
|
||||
Note, because Storybook doesn't server render your components, your components will only see what they normally see on the client side (i.e. they won't see `serverRuntimeConfig` but will see `publicRuntimeConfig`).
|
||||
|
||||
For example, consider the following Next.js config:
|
||||
|
||||
```js
|
||||
// next.config.js
|
||||
module.exports = {
|
||||
serverRuntimeConfig: {
|
||||
mySecret: 'secret',
|
||||
secondSecret: process.env.SECOND_SECRET, // Pass through env variables
|
||||
},
|
||||
publicRuntimeConfig: {
|
||||
staticFolder: '/static',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Calls to `getConfig` would return the following object when called within Storybook:
|
||||
|
||||
```json
|
||||
{
|
||||
"serverRuntimeConfig": {},
|
||||
"publicRuntimeConfig": {
|
||||
"staticFolder": "/static"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Custom Webpack Config
|
||||
|
||||
Next.js comes with a lot of things for free out of the box like sass support, but sometimes you add [custom webpack config modifications to Next.js](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config). This framework takes care of most of the webpack modifications you would want to add. If Next.js supports a feature out of the box, then that feature will work out of the box in Storybook. If Next.js doesn't support something out of the box, but makes it easy to configure, then this framework will do the same for that thing for Storybook.
|
||||
|
||||
Any webpack modifications desired for Storybook should be made in [.storybook/main.js](https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config).
|
||||
|
||||
Note: Not all webpack modifications are copy/paste-able between `next.config.js` and `.storybook/main.js`. It is recommended to do your reasearch on how to properly make your modifcation to Storybook's webpack config and on how [webpack works](https://webpack.js.org/concepts/).
|
||||
|
||||
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
|
||||
// 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
|
||||
config.module.rules.push({
|
||||
test: /\.svg$/,
|
||||
use: ['@svgr/webpack'],
|
||||
});
|
||||
|
||||
return config;
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Typescript
|
||||
|
||||
Storybook handles most [Typescript](https://www.typescriptlang.org/) configurations, but this framework adds additional support for Next.js's support for [Absolute Imports and Module path aliases](https://nextjs.org/docs/advanced-features/module-path-aliases). In short, it takes into account your `tsconfig.json`'s [baseUrl](https://www.typescriptlang.org/tsconfig#baseUrl) and [paths](https://www.typescriptlang.org/tsconfig#paths). Thus, a `tsconfig.json` like the one below would work out of the box.
|
||||
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/components/*": ["components/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Notes for Yarn v2 and v3 users
|
||||
|
||||
If you're using [Yarn](https://yarnpkg.com/) v2 or v3, you may run into issues where Storybook can't resolve `style-loader` or `css-loader`. For example, you might get errors like:
|
||||
|
||||
`Module not found: Error: Can't resolve 'css-loader'`\
|
||||
`Module not found: Error: Can't resolve 'style-loader'`
|
||||
|
||||
This is because those versions of Yarn have different package resolution rules than Yarn v1.x. If this is the case for you, just install the package directly.
|
||||
|
||||
### FAQ
|
||||
|
||||
#### Stories for pages
|
||||
|
||||
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).
|
||||
|
||||
**Before**
|
||||
|
||||
```jsx
|
||||
// ./pages/my-page.jsx
|
||||
import fs from 'fs';
|
||||
|
||||
export default MyPage = (props) => (
|
||||
// ...
|
||||
);
|
||||
|
||||
export const getStaticProps = async () => {
|
||||
// Logic that uses `fs`
|
||||
};
|
||||
```
|
||||
|
||||
**After**
|
||||
|
||||
```jsx
|
||||
// ./pages/my-page.jsx
|
||||
import fs from 'fs';
|
||||
|
||||
import MyPage from 'components/MyPage';
|
||||
|
||||
export default MyPage;
|
||||
|
||||
export const getStaticProps = async () => {
|
||||
// Logic that uses `fs`
|
||||
};
|
||||
```
|
||||
|
||||
#### 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.
|
||||
|
||||
Before using this framework, image imports just imported the raw path to the image (e.g. `'static/media/stories/assets/logo.svg'`). Now image imports work the "Next.js way", meaning that you now get an object when importing an image. For example:
|
||||
|
||||
```json
|
||||
{
|
||||
"src": "static/media/stories/assets/logo.svg",
|
||||
"height": 48,
|
||||
"width": 48,
|
||||
"blurDataURL": "static/media/stories/assets/logo.svg"
|
||||
}
|
||||
```
|
||||
|
||||
Therefore, if something in storybook isn't showing the image properly, make sure you expect the object to be returned from an import instead of just the asset path.
|
||||
|
||||
See [local images](https://nextjs.org/docs/basic-features/image-optimization#local-images) for more detail on how Next.js treats static image imports.
|
||||
|
||||
#### Module not found: Error: Can't resolve [package name]
|
||||
|
||||
You might get this if you're using Yarn v2 or v3. See [Notes for Yarn v2 and v3 users](#notes-for-yarn-v2-and-v3-users) for more details.
|
||||
|
||||
## Acknowledgements
|
||||
|
||||
This framework borrows heavily from these Storybook addons:
|
||||
|
||||
- [storybook-addon-next](https://github.com/RyanClementsHax/storybook-addon-next) by [RyanClementsHax](https://github.com/RyanClementsHax/)
|
||||
- [storybook-addon-next-router](https://github.com/lifeiscontent/storybook-addon-next-router) by [lifeiscontent](https://github.com/lifeiscontent)
|
||||
124
code/frameworks/nextjs/package.json
Normal file
124
code/frameworks/nextjs/package.json
Normal file
@ -0,0 +1,124 @@
|
||||
{
|
||||
"name": "@storybook/nextjs",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Storybook for Next.js",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
"nextjs"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/nextjs",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "code/frameworks/nextjs"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"exports": {
|
||||
".": {
|
||||
"require": "./dist/index.js",
|
||||
"import": "./dist/index.mjs",
|
||||
"types": "./dist/index.d.ts"
|
||||
},
|
||||
"./preset": {
|
||||
"require": "./dist/preset.js",
|
||||
"import": "./dist/preset.mjs",
|
||||
"types": "./dist/preset.d.ts"
|
||||
},
|
||||
"./preview.js": {
|
||||
"require": "./dist/preview.js",
|
||||
"import": "./dist/preview.mjs",
|
||||
"types": "./dist/preview.d.ts"
|
||||
},
|
||||
"./next-image-loader-stub.js": {
|
||||
"require": "./dist/next-image-loader-stub.js",
|
||||
"import": "./dist/next-image-loader-stub.mjs",
|
||||
"types": "./dist/next-image-loader-stub.d.ts"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
"types": "dist/index.d.ts",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"types/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
],
|
||||
"scripts": {
|
||||
"check": "tsc --noEmit",
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.42",
|
||||
"@storybook/core-common": "7.0.0-alpha.42",
|
||||
"@storybook/node-logger": "7.0.0-alpha.42",
|
||||
"@storybook/preset-react-webpack": "7.0.0-alpha.42",
|
||||
"@storybook/react": "7.0.0-alpha.42",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"find-up": "^5.0.0",
|
||||
"fs-extra": "^9.0.1",
|
||||
"image-size": "^1.0.0",
|
||||
"loader-utils": "^3.2.0",
|
||||
"pnp-webpack-plugin": "^1.7.0",
|
||||
"postcss-loader": "^6.2.1",
|
||||
"resolve-url-loader": "^5.0.0",
|
||||
"sass-loader": "^12.4.0",
|
||||
"semver": "^7.3.5",
|
||||
"ts-dedent": "^2.0.0",
|
||||
"tsconfig-paths": "^4.0.0",
|
||||
"tsconfig-paths-webpack-plugin": "^3.5.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "7.0.0-alpha.42",
|
||||
"@types/loader-utils": "^2.0.3",
|
||||
"next": "^12.2.4",
|
||||
"typescript": "~4.6.3",
|
||||
"webpack": "^5.65.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.11.5",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.40",
|
||||
"next": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"webpack": "^5.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@babel/core": {
|
||||
"optional": true
|
||||
},
|
||||
"@storybook/addon-actions": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"bundler": {
|
||||
"entries": [
|
||||
"./src/index.ts",
|
||||
"./src/preset.ts",
|
||||
"./src/preview.tsx",
|
||||
"./src/next-image-loader-stub.ts"
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b"
|
||||
}
|
||||
1
code/frameworks/nextjs/preset.js
Normal file
1
code/frameworks/nextjs/preset.js
Normal file
@ -0,0 +1 @@
|
||||
module.exports = require('./dist/preset');
|
||||
15
code/frameworks/nextjs/src/config/babel.ts
Normal file
15
code/frameworks/nextjs/src/config/babel.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { TransformOptions } from '@babel/core';
|
||||
import { loadConfig } from 'tsconfig-paths';
|
||||
|
||||
export const configureTypescript = async (baseConfig: TransformOptions) => {
|
||||
const configLoadResult = loadConfig();
|
||||
|
||||
// if tsconfig is successfully loaded, this is a typescript project
|
||||
if (configLoadResult.resultType === 'success') {
|
||||
baseConfig.presets ||= [];
|
||||
|
||||
if (!baseConfig.presets.includes('@babel/preset-typescript')) {
|
||||
baseConfig.presets.push('@babel/preset-typescript');
|
||||
}
|
||||
}
|
||||
};
|
||||
4
code/frameworks/nextjs/src/config/preview.ts
Normal file
4
code/frameworks/nextjs/src/config/preview.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import { setConfig } from 'next/config';
|
||||
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
setConfig(process.env.__NEXT_RUNTIME_CONFIG);
|
||||
86
code/frameworks/nextjs/src/config/webpack.ts
Normal file
86
code/frameworks/nextjs/src/config/webpack.ts
Normal file
@ -0,0 +1,86 @@
|
||||
import type { Configuration as WebpackConfig } from 'webpack';
|
||||
import { PHASE_DEVELOPMENT_SERVER } from 'next/constants';
|
||||
import findUp from 'find-up';
|
||||
import { pathExists } from 'fs-extra';
|
||||
import { NextConfig } from 'next';
|
||||
import dedent from 'ts-dedent';
|
||||
import { DefinePlugin } from 'webpack';
|
||||
import { addScopedAlias } from '../utils';
|
||||
|
||||
export const configureConfig = async ({
|
||||
baseConfig,
|
||||
nextConfigPath,
|
||||
configDir,
|
||||
}: {
|
||||
baseConfig: WebpackConfig;
|
||||
nextConfigPath?: string;
|
||||
configDir: string;
|
||||
}): Promise<NextConfig> => {
|
||||
const nextConfig = await resolveNextConfig({ baseConfig, nextConfigPath, configDir });
|
||||
|
||||
addScopedAlias(baseConfig, 'next/config');
|
||||
setupRuntimeConfig(baseConfig, nextConfig);
|
||||
|
||||
return nextConfig;
|
||||
};
|
||||
|
||||
const findNextConfigFile = async (configDir: string) => {
|
||||
const supportedExtensions = ['mjs', 'js'];
|
||||
return supportedExtensions.reduce<Promise<undefined | string>>(
|
||||
async (acc, ext: string | undefined) => {
|
||||
const resolved = await acc;
|
||||
if (!resolved) {
|
||||
acc = findUp(`next.config.${ext}`, { cwd: configDir });
|
||||
}
|
||||
|
||||
return acc;
|
||||
},
|
||||
Promise.resolve(undefined)
|
||||
);
|
||||
};
|
||||
|
||||
const resolveNextConfig = async ({
|
||||
baseConfig,
|
||||
nextConfigPath,
|
||||
configDir,
|
||||
}: {
|
||||
baseConfig: WebpackConfig;
|
||||
nextConfigPath?: string;
|
||||
configDir: string;
|
||||
}): Promise<NextConfig> => {
|
||||
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
|
||||
`
|
||||
);
|
||||
}
|
||||
|
||||
const nextConfigExport = await import(nextConfigFile);
|
||||
|
||||
const nextConfig =
|
||||
typeof nextConfigExport === 'function'
|
||||
? nextConfigExport(PHASE_DEVELOPMENT_SERVER, {
|
||||
defaultConfig: baseConfig,
|
||||
})
|
||||
: nextConfigExport;
|
||||
|
||||
return nextConfig;
|
||||
};
|
||||
|
||||
const setupRuntimeConfig = (baseConfig: WebpackConfig, nextConfig: NextConfig): void => {
|
||||
baseConfig.plugins?.push(
|
||||
new DefinePlugin({
|
||||
// this mimics what nextjs does client side
|
||||
// https://github.com/vercel/next.js/blob/57702cb2a9a9dba4b552e0007c16449cf36cfb44/packages/next/client/index.tsx#L101
|
||||
'process.env.__NEXT_RUNTIME_CONFIG': JSON.stringify({
|
||||
serverRuntimeConfig: {},
|
||||
publicRuntimeConfig: nextConfig.publicRuntimeConfig,
|
||||
}),
|
||||
})
|
||||
);
|
||||
};
|
||||
110
code/frameworks/nextjs/src/css/webpack.ts
Normal file
110
code/frameworks/nextjs/src/css/webpack.ts
Normal file
@ -0,0 +1,110 @@
|
||||
import { NextConfig } from 'next';
|
||||
import { getCssModuleLocalIdent } from 'next/dist/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent';
|
||||
import { cssFileResolve } from 'next/dist/build/webpack/config/blocks/css/loaders/file-resolve';
|
||||
import { Configuration as WebpackConfig } from 'webpack';
|
||||
import semver from 'semver';
|
||||
import { scopedResolve } from '../utils';
|
||||
|
||||
// This tries to follow nextjs's css config, please refer to this file for more info:
|
||||
// https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack-config.ts
|
||||
|
||||
export const configureCss = (baseConfig: WebpackConfig, nextConfig: NextConfig): void => {
|
||||
const rules = baseConfig.module?.rules;
|
||||
rules?.forEach((rule, i) => {
|
||||
if (typeof rule !== 'string' && rule.test instanceof RegExp && rule.test.test('test.css')) {
|
||||
rules[i] = {
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
importLoaders: 1,
|
||||
...getImportAndUrlCssLoaderOptions(nextConfig),
|
||||
modules: {
|
||||
auto: true,
|
||||
getLocalIdent: getCssModuleLocalIdent,
|
||||
},
|
||||
},
|
||||
},
|
||||
'postcss-loader',
|
||||
],
|
||||
};
|
||||
}
|
||||
});
|
||||
rules?.push({
|
||||
test: /\.(scss|sass)$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
importLoaders: 3,
|
||||
...getImportAndUrlCssLoaderOptions(nextConfig),
|
||||
modules: { auto: true, getLocalIdent: getCssModuleLocalIdent },
|
||||
},
|
||||
},
|
||||
'postcss-loader',
|
||||
'resolve-url-loader',
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sourceMap: true,
|
||||
sassOptions: nextConfig.sassOptions,
|
||||
additionalData:
|
||||
nextConfig.sassOptions?.prependData || nextConfig.sassOptions?.additionalData,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* webpack v4-v6 api
|
||||
* https://webpack.js.org/loaders/css-loader/#url
|
||||
* https://webpack.js.org/loaders/css-loader/#import
|
||||
*
|
||||
* webpack v3 api
|
||||
* https://webpack-3.cdn.bcebos.com/loaders/css-loader/#url
|
||||
* https://webpack-3.cdn.bcebos.com/loaders/css-loader/#import
|
||||
*/
|
||||
const getImportAndUrlCssLoaderOptions = (nextConfig: NextConfig) =>
|
||||
isCssLoaderV6()
|
||||
? {
|
||||
url: {
|
||||
filter: getUrlResolver(nextConfig),
|
||||
},
|
||||
import: {
|
||||
filter: getImportResolver(nextConfig),
|
||||
},
|
||||
}
|
||||
: {
|
||||
url: getUrlResolver(nextConfig),
|
||||
import: getImportResolver(nextConfig),
|
||||
};
|
||||
|
||||
const getUrlResolver = (nextConfig: NextConfig) => (url: string, resourcePath: string) =>
|
||||
cssFileResolve(url, resourcePath, nextConfig.experimental?.urlImports);
|
||||
|
||||
const getImportResolver =
|
||||
(nextConfig: NextConfig) =>
|
||||
(url: string | { url: string; media: string }, _: string, resourcePath: string) =>
|
||||
cssFileResolve(
|
||||
typeof url === 'string' ? url : url.url,
|
||||
resourcePath,
|
||||
nextConfig.experimental?.urlImports
|
||||
);
|
||||
|
||||
const isCssLoaderV6 = () => {
|
||||
try {
|
||||
const cssLoaderVersion = require(scopedResolve('css-loader/package.json')).version;
|
||||
return semver.gte(cssLoaderVersion, '6.0.0');
|
||||
} catch {
|
||||
/**
|
||||
* css-loader isn't a resolvable dependency
|
||||
* thus storybook webpack 5 manager will
|
||||
* resolve to use its version which is v5
|
||||
*/
|
||||
return false;
|
||||
}
|
||||
};
|
||||
33
code/frameworks/nextjs/src/images/next-image-stub.tsx
Normal file
33
code/frameworks/nextjs/src/images/next-image-stub.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
/* eslint-disable no-underscore-dangle, @typescript-eslint/no-non-null-assertion */
|
||||
import * as React from 'react';
|
||||
import * as _NextImage from 'next/image';
|
||||
import { ImageProps } from 'next/image';
|
||||
import semver from 'semver';
|
||||
|
||||
// next v9 (doesn't have next/image)
|
||||
if (semver.gt(process.env.__NEXT_VERSION!, '9.0.0')) {
|
||||
const NextImage = require('next/image') as typeof _NextImage;
|
||||
|
||||
const OriginalNextImage = NextImage.default;
|
||||
|
||||
Object.defineProperty(NextImage, 'default', {
|
||||
configurable: true,
|
||||
value: (props: ImageProps) =>
|
||||
typeof props.src === 'string' ? (
|
||||
<OriginalNextImage {...props} unoptimized blurDataURL={props.src} />
|
||||
) : (
|
||||
<OriginalNextImage {...props} unoptimized />
|
||||
),
|
||||
});
|
||||
|
||||
// https://github.com/vercel/next.js/issues/36417#issuecomment-1117360509
|
||||
if (
|
||||
semver.gte(process.env.__NEXT_VERSION!, '12.1.5') &&
|
||||
semver.lt(process.env.__NEXT_VERSION!, '12.2.0')
|
||||
) {
|
||||
Object.defineProperty(NextImage, '__esModule', {
|
||||
configurable: true,
|
||||
value: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
46
code/frameworks/nextjs/src/images/webpack.ts
Normal file
46
code/frameworks/nextjs/src/images/webpack.ts
Normal file
@ -0,0 +1,46 @@
|
||||
import semver from 'semver';
|
||||
import { Configuration as WebpackConfig, RuleSetRule } from 'webpack';
|
||||
import { addScopedAlias, getNextjsVersion } from '../utils';
|
||||
|
||||
export const configureImages = (baseConfig: WebpackConfig): void => {
|
||||
configureStaticImageImport(baseConfig);
|
||||
addScopedAlias(baseConfig, 'next/image');
|
||||
};
|
||||
|
||||
const configureStaticImageImport = (baseConfig: WebpackConfig): void => {
|
||||
const version = getNextjsVersion();
|
||||
if (semver.lt(version, '11.0.0')) return;
|
||||
|
||||
const rules = baseConfig.module?.rules;
|
||||
|
||||
const assetRule = rules?.find(
|
||||
(rule) => typeof rule !== 'string' && rule.test instanceof RegExp && rule.test.test('test.jpg')
|
||||
) as RuleSetRule;
|
||||
|
||||
if (!assetRule) {
|
||||
return;
|
||||
}
|
||||
|
||||
assetRule.test = /\.(apng|eot|otf|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
|
||||
|
||||
rules?.push({
|
||||
test: /\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,
|
||||
issuer: { not: /\.(css|scss|sass)$/ },
|
||||
use: [
|
||||
{
|
||||
loader: require.resolve('@storybook/nextjs/next-image-loader-stub.js'),
|
||||
options: {
|
||||
filename: assetRule.generator?.filename,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
rules?.push({
|
||||
test: /\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,
|
||||
issuer: /\.(css|scss|sass)$/,
|
||||
type: 'asset/resource',
|
||||
generator: {
|
||||
filename: assetRule.generator?.filename,
|
||||
},
|
||||
});
|
||||
};
|
||||
22
code/frameworks/nextjs/src/imports/webpack.ts
Normal file
22
code/frameworks/nextjs/src/imports/webpack.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
|
||||
import { loadConfig } from 'tsconfig-paths';
|
||||
import { Configuration as WebpackConfig } from 'webpack';
|
||||
|
||||
export const configureImports = (baseConfig: WebpackConfig): void => {
|
||||
const configLoadResult = loadConfig();
|
||||
|
||||
if (configLoadResult.resultType === 'failed' || !configLoadResult.baseUrl) {
|
||||
// either not a typescript project or tsconfig contains no baseUrl
|
||||
return;
|
||||
}
|
||||
|
||||
baseConfig.resolve ??= {};
|
||||
baseConfig.resolve.plugins ??= [];
|
||||
|
||||
baseConfig.resolve.plugins.push(
|
||||
new TsconfigPathsPlugin({
|
||||
configFile: configLoadResult.configFileAbsolutePath,
|
||||
extensions: ['.js', '.jsx', '.ts', '.tsx'],
|
||||
}) as any
|
||||
);
|
||||
};
|
||||
2
code/frameworks/nextjs/src/index.ts
Normal file
2
code/frameworks/nextjs/src/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export * from '@storybook/react';
|
||||
export * from './types';
|
||||
30
code/frameworks/nextjs/src/next-image-loader-stub.ts
Normal file
30
code/frameworks/nextjs/src/next-image-loader-stub.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import { interpolateName } from 'loader-utils';
|
||||
import imageSizeOf from 'image-size';
|
||||
import { RawLoaderDefinition } from 'webpack';
|
||||
|
||||
interface LoaderOptions {
|
||||
filename: string;
|
||||
}
|
||||
|
||||
const nextImageLoaderStub: RawLoaderDefinition<LoaderOptions> = function (content) {
|
||||
const { filename } = this.getOptions();
|
||||
const outputPath = interpolateName(this, filename.replace('[ext]', '.[ext]'), {
|
||||
context: this.rootContext,
|
||||
content,
|
||||
});
|
||||
|
||||
this.emitFile(outputPath, content);
|
||||
|
||||
const { width, height } = imageSizeOf(content);
|
||||
|
||||
return `export default ${JSON.stringify({
|
||||
src: outputPath,
|
||||
height,
|
||||
width,
|
||||
blurDataURL: outputPath,
|
||||
})};`;
|
||||
};
|
||||
|
||||
nextImageLoaderStub.raw = true;
|
||||
|
||||
export = nextImageLoaderStub;
|
||||
100
code/frameworks/nextjs/src/preset.ts
Normal file
100
code/frameworks/nextjs/src/preset.ts
Normal file
@ -0,0 +1,100 @@
|
||||
// https://storybook.js.org/docs/react/addons/writing-presets
|
||||
import { dirname, join } from 'path';
|
||||
import { Options, PresetProperty } from '@storybook/core-common';
|
||||
import { TransformOptions } from '@babel/core';
|
||||
import { configureConfig } from './config/webpack';
|
||||
import { configureCss } from './css/webpack';
|
||||
import { configureImports } from './imports/webpack';
|
||||
import { configureRouting } from './routing/webpack';
|
||||
import { configureStyledJsx } from './styledJsx/webpack';
|
||||
import { configureStyledJsxTransforms } from './styledJsx/babel';
|
||||
import { configureImages } from './images/webpack';
|
||||
import { configureRuntimeNextjsVersionResolution } from './utils';
|
||||
import { FrameworkOptions, StorybookConfig } from './types';
|
||||
import { configureTypescript } from './config/babel';
|
||||
|
||||
export const addons: PresetProperty<'addons', StorybookConfig> = [
|
||||
dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))),
|
||||
dirname(require.resolve(join('@storybook/react', 'package.json'))),
|
||||
dirname(require.resolve(join('@storybook/builder-webpack5', 'package.json'))),
|
||||
];
|
||||
|
||||
const defaultFrameworkOptions: FrameworkOptions = {};
|
||||
|
||||
export const frameworkOptions = async (
|
||||
_: never,
|
||||
options: Options
|
||||
): Promise<StorybookConfig['framework']> => {
|
||||
const config = await options.presets.apply<StorybookConfig['framework']>('framework');
|
||||
|
||||
if (typeof config === 'string') {
|
||||
return {
|
||||
name: config,
|
||||
options: defaultFrameworkOptions,
|
||||
};
|
||||
}
|
||||
if (typeof config === 'undefined') {
|
||||
return {
|
||||
name: require.resolve('@storybook/nextjs') as '@storybook/nextjs',
|
||||
options: defaultFrameworkOptions,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
name: config.name,
|
||||
options: {
|
||||
...defaultFrameworkOptions,
|
||||
...config.options,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
|
||||
const framework = await options.presets.apply<StorybookConfig['framework']>('framework');
|
||||
|
||||
return {
|
||||
...config,
|
||||
builder: {
|
||||
name: dirname(
|
||||
require.resolve(join('@storybook/builder-webpack5', 'package.json'))
|
||||
) as '@storybook/builder-webpack5',
|
||||
options: typeof framework === 'string' ? {} : framework.options.builder || {},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export const config: StorybookConfig['previewAnnotations'] = (entry = []) => [
|
||||
...entry,
|
||||
require.resolve('@storybook/nextjs/preview.js'),
|
||||
];
|
||||
|
||||
// Not even sb init - automigrate - running dev
|
||||
// You're using a version of Nextjs prior to v10, which is unsupported by this framework.
|
||||
|
||||
export const babel = async (baseConfig: TransformOptions): Promise<TransformOptions> => {
|
||||
configureTypescript(baseConfig);
|
||||
configureStyledJsxTransforms(baseConfig);
|
||||
|
||||
return baseConfig;
|
||||
};
|
||||
|
||||
export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, options) => {
|
||||
const frameworkOptions = await options.presets.apply<{ options: FrameworkOptions }>(
|
||||
'frameworkOptions'
|
||||
);
|
||||
const { options: { nextConfigPath } = {} } = frameworkOptions;
|
||||
const nextConfig = await configureConfig({
|
||||
baseConfig,
|
||||
nextConfigPath,
|
||||
configDir: options.configDir,
|
||||
});
|
||||
|
||||
configureRuntimeNextjsVersionResolution(baseConfig);
|
||||
configureImports(baseConfig);
|
||||
configureCss(baseConfig, nextConfig);
|
||||
configureImages(baseConfig);
|
||||
configureRouting(baseConfig);
|
||||
configureStyledJsx(baseConfig);
|
||||
|
||||
return baseConfig;
|
||||
};
|
||||
6
code/frameworks/nextjs/src/preview.tsx
Normal file
6
code/frameworks/nextjs/src/preview.tsx
Normal file
@ -0,0 +1,6 @@
|
||||
import './config/preview';
|
||||
import { RouterDecorator } from './routing/decorator';
|
||||
import { StyledJsxDecorator } from './styledJsx/decorator';
|
||||
import './images/next-image-stub';
|
||||
|
||||
export const decorators = [StyledJsxDecorator, RouterDecorator];
|
||||
73
code/frameworks/nextjs/src/routing/decorator.tsx
Normal file
73
code/frameworks/nextjs/src/routing/decorator.tsx
Normal file
@ -0,0 +1,73 @@
|
||||
import * as React from 'react';
|
||||
// this will be aliased by webpack at runtime (this is just for typing)
|
||||
import { action as originalAction } from '@storybook/addon-actions';
|
||||
import { StoryContext } from '@storybook/addons';
|
||||
import { RouterContext } from 'next/dist/shared/lib/router-context';
|
||||
import Router from 'next/router';
|
||||
|
||||
let action: typeof originalAction;
|
||||
|
||||
try {
|
||||
action = require('@storybook/addon-actions').action;
|
||||
} catch {
|
||||
action = () => () => {};
|
||||
}
|
||||
|
||||
const defaultRouter = {
|
||||
route: '/',
|
||||
pathname: '/',
|
||||
query: {},
|
||||
asPath: '/',
|
||||
push(...args: unknown[]): Promise<boolean> {
|
||||
action('nextRouter.push')(...args);
|
||||
return Promise.resolve(true);
|
||||
},
|
||||
replace(...args: unknown[]): Promise<boolean> {
|
||||
action('nextRouter.replace')(...args);
|
||||
return Promise.resolve(true);
|
||||
},
|
||||
reload(...args: unknown[]): void {
|
||||
action('nextRouter.reload')(...args);
|
||||
},
|
||||
back(...args: unknown[]): void {
|
||||
action('nextRouter.back')(...args);
|
||||
},
|
||||
prefetch(...args: unknown[]): Promise<void> {
|
||||
action('nextRouter.prefetch')(...args);
|
||||
return Promise.resolve();
|
||||
},
|
||||
beforePopState(...args: unknown[]): void {
|
||||
action('nextRouter.beforePopState')(...args);
|
||||
},
|
||||
events: {
|
||||
on(...args: unknown[]): void {
|
||||
action('nextRouter.events.on')(...args);
|
||||
},
|
||||
off(...args: unknown[]): void {
|
||||
action('nextRouter.events.off')(...args);
|
||||
},
|
||||
emit(...args: unknown[]): void {
|
||||
action('nextRouter.events.emit')(...args);
|
||||
},
|
||||
},
|
||||
isFallback: false,
|
||||
};
|
||||
|
||||
export const RouterDecorator = (
|
||||
Story: React.FC,
|
||||
{ globals, parameters }: StoryContext
|
||||
): React.ReactNode => {
|
||||
const nextRouterParams = parameters.nextRouter ?? {};
|
||||
|
||||
Router.router = {
|
||||
...defaultRouter,
|
||||
locale: globals?.locale,
|
||||
...nextRouterParams,
|
||||
} as NonNullable<typeof Router.router>;
|
||||
|
||||
return (
|
||||
<RouterContext.Provider value={Router.router as any}>
|
||||
<Story />
|
||||
</RouterContext.Provider>
|
||||
);
|
||||
};
|
||||
18
code/frameworks/nextjs/src/routing/webpack.tsx
Normal file
18
code/frameworks/nextjs/src/routing/webpack.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import { Configuration as WebpackConfig } from 'webpack';
|
||||
import semver from 'semver';
|
||||
import { addScopedAlias, getNextjsVersion } from '../utils';
|
||||
|
||||
export const configureRouting = (baseConfig: WebpackConfig): void => {
|
||||
// here we resolve the router context path with the installed version of Next.js
|
||||
const routerContextPath = getRouterContextPath();
|
||||
addScopedAlias(baseConfig, routerContextPath);
|
||||
};
|
||||
|
||||
const getRouterContextPath = () => {
|
||||
const version = getNextjsVersion();
|
||||
if (semver.gte(version, '11.1.0')) {
|
||||
return 'next/dist/shared/lib/router-context';
|
||||
}
|
||||
|
||||
return 'next/dist/next-server/lib/router-context';
|
||||
};
|
||||
9
code/frameworks/nextjs/src/styledJsx/babel.ts
Normal file
9
code/frameworks/nextjs/src/styledJsx/babel.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { TransformOptions } from '@babel/core';
|
||||
|
||||
export const configureStyledJsxTransforms = async (baseConfig: TransformOptions) => {
|
||||
baseConfig.plugins ||= [];
|
||||
|
||||
if (!baseConfig.plugins.includes('styled-jsx/babel')) {
|
||||
baseConfig.plugins.push('styled-jsx/babel');
|
||||
}
|
||||
};
|
||||
19
code/frameworks/nextjs/src/styledJsx/decorator.tsx
Normal file
19
code/frameworks/nextjs/src/styledJsx/decorator.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import * as React from 'react';
|
||||
|
||||
let StyleRegistry: React.FC;
|
||||
|
||||
try {
|
||||
// next >= v12
|
||||
// This will come from nextjs itself
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
StyleRegistry = require('styled-jsx').StyleRegistry;
|
||||
} catch {
|
||||
// next < v12
|
||||
StyleRegistry = React.Fragment;
|
||||
}
|
||||
|
||||
export const StyledJsxDecorator = (Story: React.FC): React.ReactNode => (
|
||||
<StyleRegistry>
|
||||
<Story />
|
||||
</StyleRegistry>
|
||||
);
|
||||
17
code/frameworks/nextjs/src/styledJsx/webpack.ts
Normal file
17
code/frameworks/nextjs/src/styledJsx/webpack.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import semver from 'semver';
|
||||
import { Configuration as WebpackConfig } from 'webpack';
|
||||
import { addScopedAlias, getNextjsVersion } from '../utils';
|
||||
|
||||
export const configureStyledJsx = (baseConfig: WebpackConfig): void => {
|
||||
const version = getNextjsVersion();
|
||||
if (semver.gte(version, '12.0.0')) {
|
||||
addScopedAlias(baseConfig, 'styled-jsx');
|
||||
} else {
|
||||
addScopedAlias(baseConfig, 'styled-jsx/babel');
|
||||
addScopedAlias(baseConfig, 'styled-jsx/css');
|
||||
addScopedAlias(baseConfig, 'styled-jsx/macro');
|
||||
addScopedAlias(baseConfig, 'styled-jsx/server');
|
||||
addScopedAlias(baseConfig, 'styled-jsx/style');
|
||||
addScopedAlias(baseConfig, 'styled-jsx/webpack');
|
||||
}
|
||||
};
|
||||
48
code/frameworks/nextjs/src/types.ts
Normal file
48
code/frameworks/nextjs/src/types.ts
Normal file
@ -0,0 +1,48 @@
|
||||
import type {
|
||||
ReactOptions,
|
||||
StorybookConfig as StorybookConfigBase,
|
||||
TypescriptOptions as TypescriptOptionsReact,
|
||||
} from '@storybook/preset-react-webpack';
|
||||
import type {
|
||||
StorybookConfigWebpack,
|
||||
BuilderOptions,
|
||||
TypescriptOptions as TypescriptOptionsBuilder,
|
||||
} from '@storybook/builder-webpack5';
|
||||
|
||||
type FrameworkName = '@storybook/nextjs';
|
||||
type BuilderName = '@storybook/builder-webpack5';
|
||||
|
||||
export type FrameworkOptions = ReactOptions & {
|
||||
nextConfigPath?: string;
|
||||
|
||||
builder?: BuilderOptions;
|
||||
};
|
||||
|
||||
type StorybookConfigFramework = {
|
||||
framework:
|
||||
| FrameworkName
|
||||
| {
|
||||
name: FrameworkName;
|
||||
options: FrameworkOptions;
|
||||
};
|
||||
core?: StorybookConfigBase['core'] & {
|
||||
builder?:
|
||||
| BuilderName
|
||||
| {
|
||||
name: BuilderName;
|
||||
options: BuilderOptions;
|
||||
};
|
||||
};
|
||||
typescript?: Partial<TypescriptOptionsBuilder & TypescriptOptionsReact> &
|
||||
StorybookConfigBase['typescript'];
|
||||
};
|
||||
|
||||
/**
|
||||
* The interface for Storybook configuration in `main.ts` files.
|
||||
*/
|
||||
export type StorybookConfig = Omit<
|
||||
StorybookConfigBase,
|
||||
keyof StorybookConfigWebpack | keyof StorybookConfigFramework
|
||||
> &
|
||||
StorybookConfigWebpack &
|
||||
StorybookConfigFramework;
|
||||
55
code/frameworks/nextjs/src/utils.ts
Normal file
55
code/frameworks/nextjs/src/utils.ts
Normal file
@ -0,0 +1,55 @@
|
||||
import path from 'path';
|
||||
import { Configuration as WebpackConfig, DefinePlugin } from 'webpack';
|
||||
|
||||
export const configureRuntimeNextjsVersionResolution = (baseConfig: WebpackConfig): void => {
|
||||
baseConfig.plugins?.push(
|
||||
new DefinePlugin({
|
||||
'process.env.__NEXT_VERSION': JSON.stringify(getNextjsVersion()),
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
export const getNextjsVersion = (): string => require(scopedResolve('next/package.json')).version;
|
||||
|
||||
// This is to help the addon in development
|
||||
// Without it, webpack resolves packages in its node_modules instead of the example's node_modules
|
||||
export const addScopedAlias = (baseConfig: WebpackConfig, name: string, alias?: string): void => {
|
||||
baseConfig.resolve ??= {};
|
||||
baseConfig.resolve.alias ??= {};
|
||||
const aliasConfig = baseConfig.resolve.alias;
|
||||
|
||||
const scopedAlias = scopedResolve(`${alias ?? name}`);
|
||||
|
||||
if (Array.isArray(aliasConfig)) {
|
||||
aliasConfig.push({
|
||||
name,
|
||||
alias: scopedAlias,
|
||||
});
|
||||
} else {
|
||||
aliasConfig[name] = scopedAlias;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
* @param id the module id
|
||||
* @returns a path to the module id scoped to the project folder without the main script path at the end
|
||||
* @summary
|
||||
* This is to help the addon in development.
|
||||
* Without it, the addon resolves packages in its node_modules instead of the example's node_modules.
|
||||
* Because require.resolve will also include the main script as part of the path, this function strips
|
||||
* that to just include the path to the module folder
|
||||
* @example
|
||||
* // before main script path truncation
|
||||
* require.resolve('styled-jsx') === '/some/path/node_modules/styled-jsx/index.js
|
||||
* // after main script path truncation
|
||||
* scopedResolve('styled-jsx') === '/some/path/node_modules/styled-jsx'
|
||||
*/
|
||||
export const scopedResolve = (id: string): string => {
|
||||
const scopedModulePath = require.resolve(id, { paths: [path.resolve()] });
|
||||
const moduleFolderStrPosition = scopedModulePath.lastIndexOf(
|
||||
id.replace(/\//g /* all '/' occurances */, path.sep)
|
||||
);
|
||||
const beginningOfMainScriptPath = moduleFolderStrPosition + id.length;
|
||||
return scopedModulePath.substring(0, beginningOfMainScriptPath);
|
||||
};
|
||||
12
code/frameworks/nextjs/template/stories/Image.stories.jsx
Normal file
12
code/frameworks/nextjs/template/stories/Image.stories.jsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
// eslint-disable-next-line import/extensions
|
||||
import StackAlt from '../../assets/colors.svg';
|
||||
|
||||
const Component = () => <Image src={StackAlt} placeholder="blur" />;
|
||||
|
||||
export default {
|
||||
component: Component,
|
||||
};
|
||||
|
||||
export const Default = {};
|
||||
28
code/frameworks/nextjs/template/stories/Link.stories.jsx
Normal file
28
code/frameworks/nextjs/template/stories/Link.stories.jsx
Normal file
@ -0,0 +1,28 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
const Component = () => (
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">
|
||||
<a>Home</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/about">
|
||||
<a>About Us</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/blog/hello-world">
|
||||
<a>Blog Post</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
|
||||
export default {
|
||||
component: Component,
|
||||
};
|
||||
|
||||
export const Default = {};
|
||||
@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
|
||||
const Component = () => (
|
||||
<div>
|
||||
<style jsx>{`
|
||||
.main p {
|
||||
color: #ff4785;
|
||||
}
|
||||
`}</style>
|
||||
<main className="main">
|
||||
<p>This is styled using Styled JSX</p>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default {
|
||||
component: Component,
|
||||
};
|
||||
|
||||
export const Default = {};
|
||||
10
code/frameworks/nextjs/tsconfig.json
Normal file
10
code/frameworks/nextjs/tsconfig.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["src/**/*.test.*", "src/**/__testfixtures__/**"]
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact-webpack5",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -50,10 +50,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.40",
|
||||
"@storybook/core-common": "7.0.0-alpha.40",
|
||||
"@storybook/preact": "7.0.0-alpha.40",
|
||||
"@storybook/preset-preact-webpack": "7.0.0-alpha.40",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.42",
|
||||
"@storybook/core-common": "7.0.0-alpha.42",
|
||||
"@storybook/preact": "7.0.0-alpha.42",
|
||||
"@storybook/preset-preact-webpack": "7.0.0-alpha.42",
|
||||
"@types/node": "^16.0.0",
|
||||
"react": "16.14.0",
|
||||
"react-dom": "16.14.0"
|
||||
@ -79,5 +79,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c"
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-vite",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -53,13 +53,13 @@
|
||||
"dependencies": {
|
||||
"@joshwooding/vite-plugin-react-docgen-typescript": "^0.0.5",
|
||||
"@rollup/pluginutils": "^4.2.0",
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/builder-vite": "7.0.0-alpha.40",
|
||||
"@storybook/channel-postmessage": "7.0.0-alpha.40",
|
||||
"@storybook/channel-websocket": "7.0.0-alpha.40",
|
||||
"@storybook/client-api": "7.0.0-alpha.40",
|
||||
"@storybook/preview-web": "7.0.0-alpha.40",
|
||||
"@storybook/react": "7.0.0-alpha.40",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/builder-vite": "7.0.0-alpha.42",
|
||||
"@storybook/channel-postmessage": "7.0.0-alpha.42",
|
||||
"@storybook/channel-websocket": "7.0.0-alpha.42",
|
||||
"@storybook/client-api": "7.0.0-alpha.42",
|
||||
"@storybook/preview-web": "7.0.0-alpha.42",
|
||||
"@storybook/react": "7.0.0-alpha.42",
|
||||
"@vitejs/plugin-react": "^2.0.0",
|
||||
"ast-types": "^0.14.2",
|
||||
"magic-string": "^0.26.1",
|
||||
@ -88,5 +88,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c"
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-webpack5",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -51,9 +51,9 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.40",
|
||||
"@storybook/preset-react-webpack": "7.0.0-alpha.40",
|
||||
"@storybook/react": "7.0.0-alpha.40",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.42",
|
||||
"@storybook/preset-react-webpack": "7.0.0-alpha.42",
|
||||
"@storybook/react": "7.0.0-alpha.42",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -86,5 +86,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c"
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/server-webpack5",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -50,10 +50,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.40",
|
||||
"@storybook/core-common": "7.0.0-alpha.40",
|
||||
"@storybook/preset-server-webpack": "7.0.0-alpha.40",
|
||||
"@storybook/server": "7.0.0-alpha.40",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.42",
|
||||
"@storybook/core-common": "7.0.0-alpha.42",
|
||||
"@storybook/preset-server-webpack": "7.0.0-alpha.42",
|
||||
"@storybook/server": "7.0.0-alpha.42",
|
||||
"@types/node": "^16.0.0",
|
||||
"react": "16.14.0",
|
||||
"react-dom": "16.14.0"
|
||||
@ -74,5 +74,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c"
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte-vite",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -52,14 +52,14 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-svelte-csf": "^2.0.0",
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/builder-vite": "7.0.0-alpha.40",
|
||||
"@storybook/channel-postmessage": "7.0.0-alpha.40",
|
||||
"@storybook/channel-websocket": "7.0.0-alpha.40",
|
||||
"@storybook/client-api": "7.0.0-alpha.40",
|
||||
"@storybook/node-logger": "7.0.0-alpha.40",
|
||||
"@storybook/preview-web": "7.0.0-alpha.40",
|
||||
"@storybook/svelte": "7.0.0-alpha.40",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/builder-vite": "7.0.0-alpha.42",
|
||||
"@storybook/channel-postmessage": "7.0.0-alpha.42",
|
||||
"@storybook/channel-websocket": "7.0.0-alpha.42",
|
||||
"@storybook/client-api": "7.0.0-alpha.42",
|
||||
"@storybook/node-logger": "7.0.0-alpha.42",
|
||||
"@storybook/preview-web": "7.0.0-alpha.42",
|
||||
"@storybook/svelte": "7.0.0-alpha.42",
|
||||
"@sveltejs/vite-plugin-svelte": "^1.0.0",
|
||||
"magic-string": "^0.26.1",
|
||||
"svelte": "^3.0.0",
|
||||
@ -92,5 +92,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c"
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte-webpack5",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -51,10 +51,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.40",
|
||||
"@storybook/core-common": "7.0.0-alpha.40",
|
||||
"@storybook/preset-svelte-webpack": "7.0.0-alpha.40",
|
||||
"@storybook/svelte": "7.0.0-alpha.40",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.42",
|
||||
"@storybook/core-common": "7.0.0-alpha.42",
|
||||
"@storybook/preset-svelte-webpack": "7.0.0-alpha.42",
|
||||
"@storybook/svelte": "7.0.0-alpha.42",
|
||||
"react": "16.14.0",
|
||||
"react-dom": "16.14.0"
|
||||
},
|
||||
@ -81,5 +81,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c"
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue-vite",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -50,15 +50,15 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/builder-vite": "7.0.0-alpha.40",
|
||||
"@storybook/channel-postmessage": "7.0.0-alpha.40",
|
||||
"@storybook/channel-websocket": "7.0.0-alpha.40",
|
||||
"@storybook/client-api": "7.0.0-alpha.40",
|
||||
"@storybook/core-common": "7.0.0-alpha.40",
|
||||
"@storybook/core-server": "7.0.0-alpha.40",
|
||||
"@storybook/preview-web": "7.0.0-alpha.40",
|
||||
"@storybook/vue": "7.0.0-alpha.40",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/builder-vite": "7.0.0-alpha.42",
|
||||
"@storybook/channel-postmessage": "7.0.0-alpha.42",
|
||||
"@storybook/channel-websocket": "7.0.0-alpha.42",
|
||||
"@storybook/client-api": "7.0.0-alpha.42",
|
||||
"@storybook/core-common": "7.0.0-alpha.42",
|
||||
"@storybook/core-server": "7.0.0-alpha.42",
|
||||
"@storybook/preview-web": "7.0.0-alpha.42",
|
||||
"@storybook/vue": "7.0.0-alpha.42",
|
||||
"magic-string": "^0.26.1",
|
||||
"vite": "^3.1.3",
|
||||
"vue-docgen-api": "^4.40.0"
|
||||
@ -83,5 +83,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c"
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue-webpack5",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -50,10 +50,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.40",
|
||||
"@storybook/core-common": "7.0.0-alpha.40",
|
||||
"@storybook/preset-vue-webpack": "7.0.0-alpha.40",
|
||||
"@storybook/vue": "7.0.0-alpha.40",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.42",
|
||||
"@storybook/core-common": "7.0.0-alpha.42",
|
||||
"@storybook/preset-vue-webpack": "7.0.0-alpha.42",
|
||||
"@storybook/vue": "7.0.0-alpha.42",
|
||||
"@types/node": "^16.0.0",
|
||||
"react": "16.14.0",
|
||||
"react-dom": "16.14.0"
|
||||
@ -85,5 +85,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c"
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue3-vite",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -51,14 +51,14 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/builder-vite": "7.0.0-alpha.40",
|
||||
"@storybook/channel-postmessage": "7.0.0-alpha.40",
|
||||
"@storybook/channel-websocket": "7.0.0-alpha.40",
|
||||
"@storybook/client-api": "7.0.0-alpha.40",
|
||||
"@storybook/core-server": "7.0.0-alpha.40",
|
||||
"@storybook/preview-web": "7.0.0-alpha.40",
|
||||
"@storybook/vue3": "7.0.0-alpha.40",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/builder-vite": "7.0.0-alpha.42",
|
||||
"@storybook/channel-postmessage": "7.0.0-alpha.42",
|
||||
"@storybook/channel-websocket": "7.0.0-alpha.42",
|
||||
"@storybook/client-api": "7.0.0-alpha.42",
|
||||
"@storybook/core-server": "7.0.0-alpha.42",
|
||||
"@storybook/preview-web": "7.0.0-alpha.42",
|
||||
"@storybook/vue3": "7.0.0-alpha.42",
|
||||
"@vitejs/plugin-vue": "^3.0.0",
|
||||
"magic-string": "^0.26.1",
|
||||
"vite": "^3.1.3",
|
||||
@ -82,5 +82,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c"
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue3-webpack5",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -50,10 +50,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.40",
|
||||
"@storybook/core-common": "7.0.0-alpha.40",
|
||||
"@storybook/preset-vue3-webpack": "7.0.0-alpha.40",
|
||||
"@storybook/vue3": "7.0.0-alpha.40",
|
||||
"@storybook/builder-webpack5": "7.0.0-alpha.42",
|
||||
"@storybook/core-common": "7.0.0-alpha.42",
|
||||
"@storybook/preset-vue3-webpack": "7.0.0-alpha.42",
|
||||
"@storybook/vue3": "7.0.0-alpha.42",
|
||||
"@types/node": "^16.0.0",
|
||||
"react": "16.14.0",
|
||||
"react-dom": "16.14.0"
|
||||
@ -82,5 +82,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c"
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/web-components-vite",
|
||||
"version": "7.0.0-alpha.40",
|
||||
"version": "7.0.0-alpha.42",
|
||||
"description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -51,15 +51,15 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-alpha.40",
|
||||
"@storybook/builder-vite": "7.0.0-alpha.40",
|
||||
"@storybook/channel-postmessage": "7.0.0-alpha.40",
|
||||
"@storybook/channel-websocket": "7.0.0-alpha.40",
|
||||
"@storybook/client-api": "7.0.0-alpha.40",
|
||||
"@storybook/core-server": "7.0.0-alpha.40",
|
||||
"@storybook/node-logger": "7.0.0-alpha.40",
|
||||
"@storybook/preview-web": "7.0.0-alpha.40",
|
||||
"@storybook/web-components": "7.0.0-alpha.40",
|
||||
"@storybook/addons": "7.0.0-alpha.42",
|
||||
"@storybook/builder-vite": "7.0.0-alpha.42",
|
||||
"@storybook/channel-postmessage": "7.0.0-alpha.42",
|
||||
"@storybook/channel-websocket": "7.0.0-alpha.42",
|
||||
"@storybook/client-api": "7.0.0-alpha.42",
|
||||
"@storybook/core-server": "7.0.0-alpha.42",
|
||||
"@storybook/node-logger": "7.0.0-alpha.42",
|
||||
"@storybook/preview-web": "7.0.0-alpha.42",
|
||||
"@storybook/web-components": "7.0.0-alpha.42",
|
||||
"@vitejs/plugin-vue": "^3.0.3",
|
||||
"magic-string": "^0.26.1",
|
||||
"vite": "3"
|
||||
@ -82,5 +82,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c"
|
||||
"gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b"
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user