mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-19 05:02:40 +08:00
Merge remote-tracking branch 'origin/next' into typescript-assets
# Conflicts: # code/frameworks/nextjs/template/cli/ts-3-8/Introduction.mdx # code/frameworks/nextjs/template/cli/ts-3-8/Introduction.stories.mdx # code/frameworks/nextjs/template/cli/ts-legacy/Introduction.stories.mdx
This commit is contained in:
Ian VanSchooten
commit
84afa441e7
@ -599,23 +599,23 @@ workflows:
|
||||
requires:
|
||||
- build
|
||||
- create-sandboxes:
|
||||
parallelism: 15
|
||||
parallelism: 18
|
||||
requires:
|
||||
- build
|
||||
- build-sandboxes:
|
||||
parallelism: 15
|
||||
parallelism: 18
|
||||
requires:
|
||||
- create-sandboxes
|
||||
- test-runner-sandboxes:
|
||||
parallelism: 15
|
||||
parallelism: 18
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- chromatic-sandboxes:
|
||||
parallelism: 15
|
||||
parallelism: 18
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- e2e-sandboxes:
|
||||
parallelism: 15
|
||||
parallelism: 18
|
||||
requires:
|
||||
- build-sandboxes
|
||||
daily:
|
||||
@ -630,25 +630,25 @@ workflows:
|
||||
requires:
|
||||
- build
|
||||
- create-sandboxes:
|
||||
parallelism: 27
|
||||
parallelism: 31
|
||||
requires:
|
||||
- build
|
||||
# - smoke-test-sandboxes: # disabled for now
|
||||
# requires:
|
||||
# - create-sandboxes
|
||||
- build-sandboxes:
|
||||
parallelism: 27
|
||||
parallelism: 31
|
||||
requires:
|
||||
- create-sandboxes
|
||||
- test-runner-sandboxes:
|
||||
parallelism: 27
|
||||
parallelism: 31
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- chromatic-sandboxes:
|
||||
parallelism: 27
|
||||
parallelism: 31
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- e2e-sandboxes:
|
||||
parallelism: 27
|
||||
parallelism: 31
|
||||
requires:
|
||||
- build-sandboxes
|
||||
|
||||
338
.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
generated
vendored
338
.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
generated
vendored
File diff suppressed because one or more lines are too long
4
.yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
generated
vendored
4
.yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
generated
vendored
File diff suppressed because one or more lines are too long
807
.yarn/releases/yarn-3.3.0.cjs
generated
vendored
807
.yarn/releases/yarn-3.3.0.cjs
generated
vendored
File diff suppressed because one or more lines are too long
873
.yarn/releases/yarn-3.4.1.cjs
generated
vendored
Executable file
873
.yarn/releases/yarn-3.4.1.cjs
generated
vendored
Executable file
File diff suppressed because one or more lines are too long
@ -2,4 +2,4 @@ installStatePath: ./.yarn/root-install-state.gz
|
||||
|
||||
nodeLinker: node-modules
|
||||
|
||||
yarnPath: .yarn/releases/yarn-3.3.0.cjs
|
||||
yarnPath: .yarn/releases/yarn-3.4.1.cjs
|
||||
|
||||
66
CHANGELOG.md
66
CHANGELOG.md
@ -1,3 +1,69 @@
|
||||
## 7.0.0-beta.46 (February 10, 2023)
|
||||
|
||||
#### Features
|
||||
|
||||
- CLI: Add Solid integration [#20991](https://github.com/storybooks/storybook/pull/20991)
|
||||
- Viewport: Add `defaultOrientation` parameter [#21048](https://github.com/storybooks/storybook/pull/21048)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- CLI: Account for pnp when creating main.js in `storybook init` [#21049](https://github.com/storybooks/storybook/pull/21049)
|
||||
- Core: Detect mdx2 errors and provide guidance to fix them [#20917](https://github.com/storybooks/storybook/pull/20917)
|
||||
- Angular: provideHttpClient when HttpClientModule is present in the imports array [#21028](https://github.com/storybooks/storybook/pull/21028)
|
||||
|
||||
#### Build
|
||||
|
||||
- Build: Allow `stories` folder to be served by vite sandboxes [#21022](https://github.com/storybooks/storybook/pull/21022)
|
||||
|
||||
## 7.0.0-beta.45 (February 9, 2023)
|
||||
|
||||
#### Features
|
||||
|
||||
- UI: Menu design upgrade [#20898](https://github.com/storybooks/storybook/pull/20898)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Vite: Use posix paths for glob [#21013](https://github.com/storybooks/storybook/pull/21013)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Telemetry: Hash error messages [#20990](https://github.com/storybooks/storybook/pull/20990)
|
||||
|
||||
## 7.0.0-beta.44 (February 7, 2023)
|
||||
|
||||
#### Features
|
||||
|
||||
- Feature: Add woff2 support for builder-manager [#20962](https://github.com/storybooks/storybook/pull/20962)
|
||||
- Feature: Add super early node version check [#20964](https://github.com/storybooks/storybook/pull/20964)
|
||||
- Csf-tools: Add `satisfies` support to ConfigFile [#20936](https://github.com/storybooks/storybook/pull/20936)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Angular: Fix changeDetectorRef should be defined [#20984](https://github.com/storybooks/storybook/pull/20984)
|
||||
- Angular: Fix standalone components to be included in the imports array [#20983](https://github.com/storybooks/storybook/pull/20983)
|
||||
- CLI: Fix Introduction MDX for Next.js and Typescript [#20798](https://github.com/storybooks/storybook/pull/20798)
|
||||
- CLI: Fix detection of JS projects with type checking [#20944](https://github.com/storybooks/storybook/pull/20944)
|
||||
- UI: Fix fonts missing/warnings [#20957](https://github.com/storybooks/storybook/pull/20957)
|
||||
- Core: Undo AST main.js check in validateConfigFile [#20952](https://github.com/storybooks/storybook/pull/20952)
|
||||
- Csf-tools: Fix error handling for storySort variable references [#20930](https://github.com/storybooks/storybook/pull/20930)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Core: Fix missing dependency for core-server [#20989](https://github.com/storybooks/storybook/pull/20989)
|
||||
- CLI: Add a default background to newly initialized storybooks [#20982](https://github.com/storybooks/storybook/pull/20982)
|
||||
- Svelte/Vite: Remove `svelte-options` [#20942](https://github.com/storybooks/storybook/pull/20942)
|
||||
- Vite: Correctly preserve existing vite envPrefix config [#20918](https://github.com/storybooks/storybook/pull/20918)
|
||||
|
||||
#### Dependencies
|
||||
|
||||
- Deps: Upgrade glob-promise [#20959](https://github.com/storybooks/storybook/pull/20959)
|
||||
- Deps: Update glob for storyshots [#20954](https://github.com/storybooks/storybook/pull/20954)
|
||||
|
||||
#### Build
|
||||
|
||||
- Build: upgrade yarn [#20986](https://github.com/storybooks/storybook/pull/20986)
|
||||
- Build: add more sandboxes to CI tests [#20892](https://github.com/storybooks/storybook/pull/20892)
|
||||
|
||||
## 7.0.0-beta.43 (February 4, 2023)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
@ -995,7 +995,7 @@ import * as ComponentStories from './some-component.stories';
|
||||
|
||||
##### ArgsTable block
|
||||
|
||||
The `ArgsTable` block is now deprecated, and two new blocks: `ArgsTypes` and `Controls` should be preferred.
|
||||
The `ArgsTable` block is now deprecated, and two new blocks: `ArgTypes` and `Controls` should be preferred.
|
||||
|
||||
- `<ArgTypes of={storyExports OR metaExports OR component} />` will render a readonly table of args/props descriptions for a story, CSF file or component. If `of` ommitted and the MDX file is attached it will render the arg types defined at the CSF file level.
|
||||
|
||||
|
||||
@ -27,5 +27,5 @@ plugins:
|
||||
unsafeHttpWhitelist:
|
||||
- localhost
|
||||
|
||||
yarnPath: ../.yarn/releases/yarn-3.3.0.cjs
|
||||
yarnPath: ../.yarn/releases/yarn-3.4.1.cjs
|
||||
installStatePath: '../.yarn/code-install-state.gz'
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -63,16 +63,16 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-highlight": "7.0.0-beta.43",
|
||||
"@storybook/channels": "7.0.0-beta.43",
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/components": "7.0.0-beta.43",
|
||||
"@storybook/core-events": "7.0.0-beta.43",
|
||||
"@storybook/addon-highlight": "7.0.0-beta.46",
|
||||
"@storybook/channels": "7.0.0-beta.46",
|
||||
"@storybook/client-logger": "7.0.0-beta.46",
|
||||
"@storybook/components": "7.0.0-beta.46",
|
||||
"@storybook/core-events": "7.0.0-beta.46",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/theming": "7.0.0-beta.43",
|
||||
"@storybook/types": "7.0.0-beta.43",
|
||||
"@storybook/manager-api": "7.0.0-beta.46",
|
||||
"@storybook/preview-api": "7.0.0-beta.46",
|
||||
"@storybook/theming": "7.0.0-beta.46",
|
||||
"@storybook/types": "7.0.0-beta.46",
|
||||
"axe-core": "^4.2.0",
|
||||
"lodash": "^4.17.21",
|
||||
"react-resize-detector": "^7.1.2"
|
||||
@ -104,7 +104,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed",
|
||||
"storybook": {
|
||||
"displayName": "Accessibility",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",
|
||||
|
||||
@ -133,7 +133,6 @@ export const VisionSimulator = () => {
|
||||
)}
|
||||
<WithTooltip
|
||||
placement="top"
|
||||
trigger="click"
|
||||
tooltip={({ onHide }) => {
|
||||
const colorList = getColorList(filter, (i) => {
|
||||
setFilter(i);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Get UI feedback when an action is performed on an interactive element",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -77,14 +77,14 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/components": "7.0.0-beta.43",
|
||||
"@storybook/core-events": "7.0.0-beta.43",
|
||||
"@storybook/client-logger": "7.0.0-beta.46",
|
||||
"@storybook/components": "7.0.0-beta.46",
|
||||
"@storybook/core-events": "7.0.0-beta.46",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/theming": "7.0.0-beta.43",
|
||||
"@storybook/types": "7.0.0-beta.43",
|
||||
"@storybook/manager-api": "7.0.0-beta.46",
|
||||
"@storybook/preview-api": "7.0.0-beta.46",
|
||||
"@storybook/theming": "7.0.0-beta.46",
|
||||
"@storybook/types": "7.0.0-beta.46",
|
||||
"dequal": "^2.0.2",
|
||||
"lodash": "^4.17.21",
|
||||
"polished": "^4.2.2",
|
||||
@ -121,7 +121,7 @@
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed",
|
||||
"storybook": {
|
||||
"displayName": "Actions",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -76,14 +76,14 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/components": "7.0.0-beta.43",
|
||||
"@storybook/core-events": "7.0.0-beta.43",
|
||||
"@storybook/client-logger": "7.0.0-beta.46",
|
||||
"@storybook/components": "7.0.0-beta.46",
|
||||
"@storybook/core-events": "7.0.0-beta.46",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/theming": "7.0.0-beta.43",
|
||||
"@storybook/types": "7.0.0-beta.43",
|
||||
"@storybook/manager-api": "7.0.0-beta.46",
|
||||
"@storybook/preview-api": "7.0.0-beta.46",
|
||||
"@storybook/theming": "7.0.0-beta.46",
|
||||
"@storybook/types": "7.0.0-beta.46",
|
||||
"memoizerific": "^1.11.3",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
@ -112,7 +112,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed",
|
||||
"storybook": {
|
||||
"displayName": "Backgrounds",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
|
||||
|
||||
@ -116,7 +116,6 @@ export const BackgroundSelector: FC = memo(function BackgroundSelector() {
|
||||
<Fragment>
|
||||
<WithTooltip
|
||||
placement="top"
|
||||
trigger="click"
|
||||
closeOnOutsideClick
|
||||
tooltip={({ onHide }) => {
|
||||
return (
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Interact with component inputs dynamically in the Storybook UI",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -68,15 +68,15 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/blocks": "7.0.0-beta.43",
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/components": "7.0.0-beta.43",
|
||||
"@storybook/core-common": "7.0.0-beta.43",
|
||||
"@storybook/manager-api": "7.0.0-beta.43",
|
||||
"@storybook/node-logger": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/theming": "7.0.0-beta.43",
|
||||
"@storybook/types": "7.0.0-beta.43",
|
||||
"@storybook/blocks": "7.0.0-beta.46",
|
||||
"@storybook/client-logger": "7.0.0-beta.46",
|
||||
"@storybook/components": "7.0.0-beta.46",
|
||||
"@storybook/core-common": "7.0.0-beta.46",
|
||||
"@storybook/manager-api": "7.0.0-beta.46",
|
||||
"@storybook/node-logger": "7.0.0-beta.46",
|
||||
"@storybook/preview-api": "7.0.0-beta.46",
|
||||
"@storybook/theming": "7.0.0-beta.46",
|
||||
"@storybook/types": "7.0.0-beta.46",
|
||||
"lodash": "^4.17.21",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
@ -102,7 +102,7 @@
|
||||
],
|
||||
"platform": "browser"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed",
|
||||
"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-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -103,18 +103,18 @@
|
||||
"@babel/plugin-transform-react-jsx": "^7.19.0",
|
||||
"@jest/transform": "^29.3.1",
|
||||
"@mdx-js/react": "^2.1.5",
|
||||
"@storybook/blocks": "7.0.0-beta.43",
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/components": "7.0.0-beta.43",
|
||||
"@storybook/csf-plugin": "7.0.0-beta.43",
|
||||
"@storybook/csf-tools": "7.0.0-beta.43",
|
||||
"@storybook/blocks": "7.0.0-beta.46",
|
||||
"@storybook/client-logger": "7.0.0-beta.46",
|
||||
"@storybook/components": "7.0.0-beta.46",
|
||||
"@storybook/csf-plugin": "7.0.0-beta.46",
|
||||
"@storybook/csf-tools": "7.0.0-beta.46",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/mdx2-csf": "next",
|
||||
"@storybook/node-logger": "7.0.0-beta.43",
|
||||
"@storybook/postinstall": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/theming": "7.0.0-beta.43",
|
||||
"@storybook/types": "7.0.0-beta.43",
|
||||
"@storybook/node-logger": "7.0.0-beta.46",
|
||||
"@storybook/postinstall": "7.0.0-beta.46",
|
||||
"@storybook/preview-api": "7.0.0-beta.46",
|
||||
"@storybook/theming": "7.0.0-beta.46",
|
||||
"@storybook/types": "7.0.0-beta.46",
|
||||
"fs-extra": "^11.1.0",
|
||||
"remark-external-links": "^8.0.0",
|
||||
"remark-slug": "^6.0.0",
|
||||
@ -147,7 +147,7 @@
|
||||
"./src/shims/mdx-react-shim.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed",
|
||||
"storybook": {
|
||||
"displayName": "Docs",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -119,23 +119,23 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "7.0.0-beta.43",
|
||||
"@storybook/addon-backgrounds": "7.0.0-beta.43",
|
||||
"@storybook/addon-controls": "7.0.0-beta.43",
|
||||
"@storybook/addon-docs": "7.0.0-beta.43",
|
||||
"@storybook/addon-highlight": "7.0.0-beta.43",
|
||||
"@storybook/addon-measure": "7.0.0-beta.43",
|
||||
"@storybook/addon-outline": "7.0.0-beta.43",
|
||||
"@storybook/addon-toolbars": "7.0.0-beta.43",
|
||||
"@storybook/addon-viewport": "7.0.0-beta.43",
|
||||
"@storybook/core-common": "7.0.0-beta.43",
|
||||
"@storybook/manager-api": "7.0.0-beta.43",
|
||||
"@storybook/node-logger": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/addon-actions": "7.0.0-beta.46",
|
||||
"@storybook/addon-backgrounds": "7.0.0-beta.46",
|
||||
"@storybook/addon-controls": "7.0.0-beta.46",
|
||||
"@storybook/addon-docs": "7.0.0-beta.46",
|
||||
"@storybook/addon-highlight": "7.0.0-beta.46",
|
||||
"@storybook/addon-measure": "7.0.0-beta.46",
|
||||
"@storybook/addon-outline": "7.0.0-beta.46",
|
||||
"@storybook/addon-toolbars": "7.0.0-beta.46",
|
||||
"@storybook/addon-viewport": "7.0.0-beta.46",
|
||||
"@storybook/core-common": "7.0.0-beta.46",
|
||||
"@storybook/manager-api": "7.0.0-beta.46",
|
||||
"@storybook/node-logger": "7.0.0-beta.46",
|
||||
"@storybook/preview-api": "7.0.0-beta.46",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/vue": "7.0.0-beta.43",
|
||||
"@storybook/vue": "7.0.0-beta.46",
|
||||
"typescript": "^4.9.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
@ -166,5 +166,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-highlight",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Highlight DOM nodes within your stories",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -61,9 +61,9 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core-events": "7.0.0-beta.43",
|
||||
"@storybook/core-events": "7.0.0-beta.46",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/preview-api": "7.0.0-beta.43"
|
||||
"@storybook/preview-api": "7.0.0-beta.46"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
@ -78,7 +78,7 @@
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Highlight",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-interactions",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Automate, test and debug user interactions",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -72,16 +72,16 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/components": "7.0.0-beta.43",
|
||||
"@storybook/core-common": "7.0.0-beta.43",
|
||||
"@storybook/core-events": "7.0.0-beta.43",
|
||||
"@storybook/client-logger": "7.0.0-beta.46",
|
||||
"@storybook/components": "7.0.0-beta.46",
|
||||
"@storybook/core-common": "7.0.0-beta.46",
|
||||
"@storybook/core-events": "7.0.0-beta.46",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/instrumenter": "7.0.0-beta.43",
|
||||
"@storybook/manager-api": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/theming": "7.0.0-beta.43",
|
||||
"@storybook/types": "7.0.0-beta.43",
|
||||
"@storybook/instrumenter": "7.0.0-beta.46",
|
||||
"@storybook/manager-api": "7.0.0-beta.46",
|
||||
"@storybook/preview-api": "7.0.0-beta.46",
|
||||
"@storybook/theming": "7.0.0-beta.46",
|
||||
"@storybook/types": "7.0.0-beta.46",
|
||||
"jest-mock": "^27.0.6",
|
||||
"polished": "^4.2.2",
|
||||
"ts-dedent": "^2.2.0"
|
||||
@ -118,7 +118,7 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed",
|
||||
"storybook": {
|
||||
"displayName": "Interactions",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -70,13 +70,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/components": "7.0.0-beta.43",
|
||||
"@storybook/core-events": "7.0.0-beta.43",
|
||||
"@storybook/client-logger": "7.0.0-beta.46",
|
||||
"@storybook/components": "7.0.0-beta.46",
|
||||
"@storybook/core-events": "7.0.0-beta.46",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/theming": "7.0.0-beta.43",
|
||||
"@storybook/manager-api": "7.0.0-beta.46",
|
||||
"@storybook/preview-api": "7.0.0-beta.46",
|
||||
"@storybook/theming": "7.0.0-beta.46",
|
||||
"react-resize-detector": "^7.1.2",
|
||||
"upath": "^1.2.0"
|
||||
},
|
||||
@ -105,7 +105,7 @@
|
||||
],
|
||||
"platform": "browser"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed",
|
||||
"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-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Link stories together to build demos and prototypes with your UI components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -80,14 +80,14 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/core-events": "7.0.0-beta.43",
|
||||
"@storybook/client-logger": "7.0.0-beta.46",
|
||||
"@storybook/core-events": "7.0.0-beta.46",
|
||||
"@storybook/csf": "next",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/router": "7.0.0-beta.43",
|
||||
"@storybook/types": "7.0.0-beta.43",
|
||||
"@storybook/manager-api": "7.0.0-beta.46",
|
||||
"@storybook/preview-api": "7.0.0-beta.46",
|
||||
"@storybook/router": "7.0.0-beta.46",
|
||||
"@storybook/types": "7.0.0-beta.46",
|
||||
"prop-types": "^15.7.2",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
@ -119,7 +119,7 @@
|
||||
],
|
||||
"post": "./scripts/fix-preview-api-reference.ts"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed",
|
||||
"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-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Inspect layouts by visualizing the box model",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -75,13 +75,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/components": "7.0.0-beta.43",
|
||||
"@storybook/core-events": "7.0.0-beta.43",
|
||||
"@storybook/client-logger": "7.0.0-beta.46",
|
||||
"@storybook/components": "7.0.0-beta.46",
|
||||
"@storybook/core-events": "7.0.0-beta.46",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/types": "7.0.0-beta.43"
|
||||
"@storybook/manager-api": "7.0.0-beta.46",
|
||||
"@storybook/preview-api": "7.0.0-beta.46",
|
||||
"@storybook/types": "7.0.0-beta.46"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "~4.9.3"
|
||||
@ -108,7 +108,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed",
|
||||
"storybook": {
|
||||
"displayName": "Measure",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-outline",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Outline all elements with CSS to help with layout placement and alignment",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -78,13 +78,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/components": "7.0.0-beta.43",
|
||||
"@storybook/core-events": "7.0.0-beta.43",
|
||||
"@storybook/client-logger": "7.0.0-beta.46",
|
||||
"@storybook/components": "7.0.0-beta.46",
|
||||
"@storybook/core-events": "7.0.0-beta.46",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/types": "7.0.0-beta.43",
|
||||
"@storybook/manager-api": "7.0.0-beta.46",
|
||||
"@storybook/preview-api": "7.0.0-beta.46",
|
||||
"@storybook/types": "7.0.0-beta.46",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -112,7 +112,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed",
|
||||
"storybook": {
|
||||
"displayName": "Outline",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Take a code snapshot of every story automatically with Jest",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -37,12 +37,12 @@
|
||||
"dependencies": {
|
||||
"@jest/transform": "^29.3.1",
|
||||
"@storybook/babel-plugin-require-context-hook": "1.0.1",
|
||||
"@storybook/client-api": "7.0.0-beta.43",
|
||||
"@storybook/core-common": "7.0.0-beta.43",
|
||||
"@storybook/core-webpack": "7.0.0-beta.43",
|
||||
"@storybook/client-api": "7.0.0-beta.46",
|
||||
"@storybook/core-common": "7.0.0-beta.46",
|
||||
"@storybook/core-webpack": "7.0.0-beta.46",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/types": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.46",
|
||||
"@storybook/types": "7.0.0-beta.46",
|
||||
"@types/glob": "^7.1.3",
|
||||
"@types/jest-specific-snapshot": "^0.5.6",
|
||||
"glob": "^8.1.0",
|
||||
@ -57,11 +57,11 @@
|
||||
"@angular/core": "^13.3.6",
|
||||
"@angular/platform-browser-dynamic": "^13.3.6",
|
||||
"@emotion/jest": "^11.8.0",
|
||||
"@storybook/addon-docs": "7.0.0-beta.43",
|
||||
"@storybook/angular": "7.0.0-beta.43",
|
||||
"@storybook/react": "7.0.0-beta.43",
|
||||
"@storybook/vue": "7.0.0-beta.43",
|
||||
"@storybook/vue3": "7.0.0-beta.43",
|
||||
"@storybook/addon-docs": "7.0.0-beta.46",
|
||||
"@storybook/angular": "7.0.0-beta.46",
|
||||
"@storybook/react": "7.0.0-beta.46",
|
||||
"@storybook/vue": "7.0.0-beta.46",
|
||||
"@storybook/vue3": "7.0.0-beta.46",
|
||||
"babel-loader": "^9.1.2",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-adapter-react-16": "^1.15.5",
|
||||
@ -142,7 +142,7 @@
|
||||
"access": "public"
|
||||
},
|
||||
"bundler": {},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed",
|
||||
"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-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -36,8 +36,8 @@
|
||||
"dependencies": {
|
||||
"@axe-core/puppeteer": "^4.2.0",
|
||||
"@storybook/csf": "next",
|
||||
"@storybook/node-logger": "7.0.0-beta.43",
|
||||
"@storybook/types": "7.0.0-beta.43",
|
||||
"@storybook/node-logger": "7.0.0-beta.46",
|
||||
"@storybook/types": "7.0.0-beta.46",
|
||||
"@types/jest-image-snapshot": "^5.1.0",
|
||||
"jest-image-snapshot": "^6.0.0"
|
||||
},
|
||||
@ -49,7 +49,7 @@
|
||||
"rimraf": "^3.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "7.0.0-beta.43",
|
||||
"@storybook/addon-storyshots": "7.0.0-beta.46",
|
||||
"puppeteer": ">=2.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
@ -61,5 +61,5 @@
|
||||
"access": "public"
|
||||
},
|
||||
"bundler": {},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "View a story’s source code to see how it works and paste into your app",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -54,13 +54,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/components": "7.0.0-beta.43",
|
||||
"@storybook/manager-api": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/router": "7.0.0-beta.43",
|
||||
"@storybook/source-loader": "7.0.0-beta.43",
|
||||
"@storybook/theming": "7.0.0-beta.43",
|
||||
"@storybook/client-logger": "7.0.0-beta.46",
|
||||
"@storybook/components": "7.0.0-beta.46",
|
||||
"@storybook/manager-api": "7.0.0-beta.46",
|
||||
"@storybook/preview-api": "7.0.0-beta.46",
|
||||
"@storybook/router": "7.0.0-beta.46",
|
||||
"@storybook/source-loader": "7.0.0-beta.46",
|
||||
"@storybook/theming": "7.0.0-beta.46",
|
||||
"estraverse": "^5.2.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-syntax-highlighter": "^15.5.0"
|
||||
@ -92,7 +92,7 @@
|
||||
"./src/preset.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed",
|
||||
"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-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Create your own toolbar items that control story rendering",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -68,11 +68,11 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/components": "7.0.0-beta.43",
|
||||
"@storybook/manager-api": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/theming": "7.0.0-beta.43"
|
||||
"@storybook/client-logger": "7.0.0-beta.46",
|
||||
"@storybook/components": "7.0.0-beta.46",
|
||||
"@storybook/manager-api": "7.0.0-beta.46",
|
||||
"@storybook/preview-api": "7.0.0-beta.46",
|
||||
"@storybook/theming": "7.0.0-beta.46"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "~4.9.3"
|
||||
@ -99,7 +99,7 @@
|
||||
],
|
||||
"platform": "browser"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed",
|
||||
"storybook": {
|
||||
"displayName": "Toolbars",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",
|
||||
|
||||
@ -57,7 +57,6 @@ export const ToolbarMenuList: FC<ToolbarMenuListProps> = withKeyboardCycle(
|
||||
return (
|
||||
<WithTooltip
|
||||
placement="top"
|
||||
trigger="click"
|
||||
tooltip={({ onHide }) => {
|
||||
const links = items
|
||||
// Special case handling for various "type" variants
|
||||
|
||||
@ -1,18 +1,9 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import React from 'react';
|
||||
import type { TooltipLinkListLink } from '@storybook/components';
|
||||
import { Icons } from '@storybook/components';
|
||||
import type { ToolbarItem } from '../types';
|
||||
|
||||
interface ListItem {
|
||||
id: string;
|
||||
left?: ReactNode;
|
||||
title?: ReactNode;
|
||||
right?: ReactNode;
|
||||
active?: boolean;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
type ToolbarMenuListItemProps = {
|
||||
export type ToolbarMenuListItemProps = {
|
||||
currentValue: string;
|
||||
onClick: () => void;
|
||||
} & ToolbarItem;
|
||||
@ -28,34 +19,18 @@ export const ToolbarMenuListItem = ({
|
||||
currentValue,
|
||||
}: ToolbarMenuListItemProps) => {
|
||||
const Icon = icon && <Icons style={{ opacity: 1 }} icon={icon} />;
|
||||
const hasContent = left || right || title;
|
||||
|
||||
const Item: ListItem = {
|
||||
const Item: TooltipLinkListLink = {
|
||||
id: value || currentValue,
|
||||
active: currentValue === value,
|
||||
right,
|
||||
title,
|
||||
left,
|
||||
onClick,
|
||||
};
|
||||
|
||||
if (left) {
|
||||
Item.left = left;
|
||||
}
|
||||
|
||||
if (right) {
|
||||
Item.right = right;
|
||||
}
|
||||
|
||||
if (title) {
|
||||
Item.title = title;
|
||||
}
|
||||
|
||||
if (icon && !hideIcon) {
|
||||
if (hasContent && !right) {
|
||||
Item.right = Icon;
|
||||
} else if (hasContent && !left) {
|
||||
Item.left = Icon;
|
||||
} else if (!hasContent) {
|
||||
Item.right = Icon;
|
||||
}
|
||||
Item.left = Icon;
|
||||
}
|
||||
|
||||
return Item;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -73,13 +73,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/components": "7.0.0-beta.43",
|
||||
"@storybook/core-events": "7.0.0-beta.43",
|
||||
"@storybook/client-logger": "7.0.0-beta.46",
|
||||
"@storybook/components": "7.0.0-beta.46",
|
||||
"@storybook/core-events": "7.0.0-beta.46",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/theming": "7.0.0-beta.43",
|
||||
"@storybook/manager-api": "7.0.0-beta.46",
|
||||
"@storybook/preview-api": "7.0.0-beta.46",
|
||||
"@storybook/theming": "7.0.0-beta.46",
|
||||
"memoizerific": "^1.11.3",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
@ -109,7 +109,7 @@
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed",
|
||||
"storybook": {
|
||||
"displayName": "Viewport",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",
|
||||
|
||||
@ -127,12 +127,13 @@ export const ViewportTool: FC = memo(
|
||||
withTheme(({ theme }: { theme: Theme }) => {
|
||||
const {
|
||||
viewports = MINIMAL_VIEWPORTS,
|
||||
defaultOrientation = 'portrait',
|
||||
defaultViewport = responsiveViewport.id,
|
||||
disable,
|
||||
} = useParameter<ViewportAddonParameter>(PARAM_KEY, {});
|
||||
const [state, setState] = useAddonState<ViewportToolState>(ADDON_ID, {
|
||||
selected: defaultViewport,
|
||||
isRotated: false,
|
||||
isRotated: defaultOrientation === 'landscape',
|
||||
});
|
||||
|
||||
const list = toList(viewports);
|
||||
@ -180,7 +181,6 @@ export const ViewportTool: FC = memo(
|
||||
<Fragment>
|
||||
<WithTooltip
|
||||
placement="top"
|
||||
trigger="click"
|
||||
tooltip={({ onHide }) => (
|
||||
<TooltipLinkList links={toLinks(list, item, setState, state, onHide)} />
|
||||
)}
|
||||
|
||||
@ -2,6 +2,7 @@ import type { ViewportMap } from './Viewport';
|
||||
|
||||
export interface ViewportAddonParameter {
|
||||
disable?: boolean;
|
||||
defaultOrientation?: 'portrait' | 'landscape';
|
||||
defaultViewport?: string;
|
||||
viewports?: ViewportMap;
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
/* eslint-disable jest/valid-title */
|
||||
/* eslint-disable jest/no-disabled-tests */
|
||||
/* eslint-disable no-await-in-loop */
|
||||
import { test, expect } from '@playwright/test';
|
||||
@ -16,7 +17,6 @@ test.describe('addon-docs', () => {
|
||||
test('should provide source snippet', async ({ page }) => {
|
||||
// templateName is e.g. 'Vue-CLI (Default JS)'
|
||||
test.skip(
|
||||
// eslint-disable-next-line jest/valid-title
|
||||
/^(vue3|vue-cli|preact)/i.test(`${templateName}`),
|
||||
`Skipping ${templateName}, which does not support dynamic source snippets`
|
||||
);
|
||||
@ -54,6 +54,12 @@ test.describe('addon-docs', () => {
|
||||
});
|
||||
|
||||
test('should order entries correctly', async ({ page }) => {
|
||||
// TODO: This is broken in SSV6 Webpack. Context: https://github.com/storybookjs/storybook/issues/20941
|
||||
test.skip(
|
||||
templateName.includes('ssv6-webpack'),
|
||||
`${templateName} fails because of a known issue: https://github.com/storybookjs/storybook/issues/20941`
|
||||
);
|
||||
|
||||
const sbPage = new SbPage(page);
|
||||
await sbPage.navigateToStory('addons/docs/docspage/basic', 'docs');
|
||||
|
||||
|
||||
@ -8,18 +8,20 @@ const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:6006';
|
||||
const templateName = process.env.STORYBOOK_TEMPLATE_NAME;
|
||||
|
||||
test.describe('Next.js', () => {
|
||||
// TODO: improve these E2E tests given that we have more version of Next.js to test
|
||||
// and this only tests nextjs/default-js
|
||||
test.skip(
|
||||
// eslint-disable-next-line jest/valid-title
|
||||
!templateName.includes('nextjs/default-js'),
|
||||
'Only run this test for the Frameworks that support next/navigation'
|
||||
);
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(storybookUrl);
|
||||
await new SbPage(page).waitUntilLoaded();
|
||||
});
|
||||
|
||||
test.describe('next/navigation', () => {
|
||||
test.skip(
|
||||
// eslint-disable-next-line jest/valid-title
|
||||
!templateName.includes('nextjs/default-js'),
|
||||
'Only run this test for the Frameworks that support next/navigation'
|
||||
);
|
||||
|
||||
let root: Locator;
|
||||
let sbPage: SbPage;
|
||||
|
||||
@ -52,12 +54,6 @@ test.describe('Next.js', () => {
|
||||
});
|
||||
|
||||
test.describe('next/router', () => {
|
||||
test.skip(
|
||||
// eslint-disable-next-line jest/valid-title
|
||||
!templateName.includes('nextjs'),
|
||||
'Only run this test for the Frameworks that support next/router'
|
||||
);
|
||||
|
||||
let root: Locator;
|
||||
let sbPage: SbPage;
|
||||
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
/* eslint-disable jest/no-disabled-tests */
|
||||
import { test, expect } from '@playwright/test';
|
||||
import process from 'process';
|
||||
|
||||
const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
|
||||
const templateName = process.env.STORYBOOK_TEMPLATE_NAME;
|
||||
|
||||
test.describe('JSON files', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
@ -9,6 +11,11 @@ test.describe('JSON files', () => {
|
||||
});
|
||||
|
||||
test('should have index.json', async ({ page }) => {
|
||||
test.skip(
|
||||
// eslint-disable-next-line jest/valid-title
|
||||
templateName.includes('ssv6'),
|
||||
'Only run this test for Sandboxes with StoryStoreV7 enabled'
|
||||
);
|
||||
const json = await page.evaluate(() => fetch('/index.json').then((res) => res.json()));
|
||||
|
||||
expect(json).toEqual({
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -36,20 +36,20 @@
|
||||
"prep": "../../../scripts/prepare/tsc.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.43",
|
||||
"@storybook/cli": "7.0.0-beta.43",
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/core-client": "7.0.0-beta.43",
|
||||
"@storybook/core-common": "7.0.0-beta.43",
|
||||
"@storybook/core-events": "7.0.0-beta.43",
|
||||
"@storybook/core-server": "7.0.0-beta.43",
|
||||
"@storybook/core-webpack": "7.0.0-beta.43",
|
||||
"@storybook/docs-tools": "7.0.0-beta.43",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.46",
|
||||
"@storybook/cli": "7.0.0-beta.46",
|
||||
"@storybook/client-logger": "7.0.0-beta.46",
|
||||
"@storybook/core-client": "7.0.0-beta.46",
|
||||
"@storybook/core-common": "7.0.0-beta.46",
|
||||
"@storybook/core-events": "7.0.0-beta.46",
|
||||
"@storybook/core-server": "7.0.0-beta.46",
|
||||
"@storybook/core-webpack": "7.0.0-beta.46",
|
||||
"@storybook/docs-tools": "7.0.0-beta.46",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.43",
|
||||
"@storybook/node-logger": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/types": "7.0.0-beta.43",
|
||||
"@storybook/manager-api": "7.0.0-beta.46",
|
||||
"@storybook/node-logger": "7.0.0-beta.46",
|
||||
"@storybook/preview-api": "7.0.0-beta.46",
|
||||
"@storybook/types": "7.0.0-beta.46",
|
||||
"@types/node": "^16.0.0",
|
||||
"@types/react": "^16.14.34",
|
||||
"@types/react-dom": "^16.9.14",
|
||||
@ -123,5 +123,5 @@
|
||||
"bundler": {
|
||||
"tsConfig": "tsconfig.build.json"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -52,7 +52,7 @@ export const createStorybookWrapperComponent = (
|
||||
// storyComponent was not provided.
|
||||
const viewChildSelector = storyComponent ?? '__storybook-noop';
|
||||
|
||||
const imports = extractImports(moduleMetadata);
|
||||
const imports = extractImports(moduleMetadata, storyComponent);
|
||||
const declarations = extractDeclarations(moduleMetadata, storyComponent);
|
||||
const providers = extractProviders(moduleMetadata);
|
||||
|
||||
@ -97,7 +97,7 @@ export const createStorybookWrapperComponent = (
|
||||
|
||||
constructor(
|
||||
@Inject(STORY_PROPS) private storyProps$: Subject<ICollection | undefined>,
|
||||
private changeDetectorRef: ChangeDetectorRef
|
||||
@Inject(ChangeDetectorRef) private changeDetectorRef: ChangeDetectorRef
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
@ -95,9 +95,12 @@ describe('PropertyExtractor', () => {
|
||||
});
|
||||
|
||||
it('should return standalone components', () => {
|
||||
const imports = extractImports({
|
||||
imports: [TestModuleWithImportsAndProviders, StandaloneTestComponent],
|
||||
});
|
||||
const imports = extractImports(
|
||||
{
|
||||
imports: [TestModuleWithImportsAndProviders],
|
||||
},
|
||||
StandaloneTestComponent
|
||||
);
|
||||
expect(imports).toEqual([CommonModule, StandaloneTestComponent]);
|
||||
});
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component, InjectionToken, NgModule, Provider } from '@angular/core';
|
||||
import { HttpClientModule, provideHttpClient } from '@angular/common/http';
|
||||
import { InjectionToken, NgModule, Provider } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import {
|
||||
BrowserAnimationsModule,
|
||||
@ -41,6 +42,13 @@ const analyzeRestricted = (ngModule: NgModule) => {
|
||||
return [true, provideNoopAnimations()];
|
||||
}
|
||||
|
||||
/**
|
||||
* HttpClient has to be provided manually as a singleton
|
||||
*/
|
||||
if (ngModule === HttpClientModule) {
|
||||
return [true, provideHttpClient()];
|
||||
}
|
||||
|
||||
return [false];
|
||||
};
|
||||
|
||||
@ -115,9 +123,13 @@ export const analyzeMetadata = (metadata: NgModuleMetadata) => {
|
||||
* Only standalone components are imported
|
||||
*
|
||||
*/
|
||||
export const extractImports = (metadata: NgModuleMetadata) => {
|
||||
export const extractImports = (metadata: NgModuleMetadata, storyComponent?: any) => {
|
||||
const { imports } = analyzeMetadata(metadata);
|
||||
|
||||
if (isStandaloneComponent(storyComponent)) {
|
||||
imports.push(storyComponent);
|
||||
}
|
||||
|
||||
return uniqueArray([CommonModule, imports]);
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/ember",
|
||||
"bugs": {
|
||||
@ -31,12 +31,12 @@
|
||||
"prep": "../../../scripts/prepare/tsc.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.43",
|
||||
"@storybook/core-common": "7.0.0-beta.43",
|
||||
"@storybook/docs-tools": "7.0.0-beta.43",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.46",
|
||||
"@storybook/core-common": "7.0.0-beta.46",
|
||||
"@storybook/docs-tools": "7.0.0-beta.46",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/types": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.46",
|
||||
"@storybook/types": "7.0.0-beta.46",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -59,5 +59,5 @@
|
||||
"access": "public"
|
||||
},
|
||||
"bundler": {},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html-vite",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,15 +48,15 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-beta.43",
|
||||
"@storybook/builder-vite": "7.0.0-beta.43",
|
||||
"@storybook/channel-postmessage": "7.0.0-beta.43",
|
||||
"@storybook/channel-websocket": "7.0.0-beta.43",
|
||||
"@storybook/client-api": "7.0.0-beta.43",
|
||||
"@storybook/core-server": "7.0.0-beta.43",
|
||||
"@storybook/html": "7.0.0-beta.43",
|
||||
"@storybook/node-logger": "7.0.0-beta.43",
|
||||
"@storybook/preview-web": "7.0.0-beta.43",
|
||||
"@storybook/addons": "7.0.0-beta.46",
|
||||
"@storybook/builder-vite": "7.0.0-beta.46",
|
||||
"@storybook/channel-postmessage": "7.0.0-beta.46",
|
||||
"@storybook/channel-websocket": "7.0.0-beta.46",
|
||||
"@storybook/client-api": "7.0.0-beta.46",
|
||||
"@storybook/core-server": "7.0.0-beta.46",
|
||||
"@storybook/html": "7.0.0-beta.46",
|
||||
"@storybook/node-logger": "7.0.0-beta.46",
|
||||
"@storybook/preview-web": "7.0.0-beta.46",
|
||||
"magic-string": "^0.27.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -76,5 +76,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html-webpack5",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,11 +48,11 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.43",
|
||||
"@storybook/core-common": "7.0.0-beta.43",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.46",
|
||||
"@storybook/core-common": "7.0.0-beta.46",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/html": "7.0.0-beta.43",
|
||||
"@storybook/preset-html-webpack": "7.0.0-beta.43",
|
||||
"@storybook/html": "7.0.0-beta.46",
|
||||
"@storybook/preset-html-webpack": "7.0.0-beta.46",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -76,5 +76,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/nextjs",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook for Next.js",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -60,13 +60,13 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@next/font": "^13.0.7",
|
||||
"@storybook/addon-actions": "7.0.0-beta.43",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.43",
|
||||
"@storybook/core-common": "7.0.0-beta.43",
|
||||
"@storybook/node-logger": "7.0.0-beta.43",
|
||||
"@storybook/preset-react-webpack": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/react": "7.0.0-beta.43",
|
||||
"@storybook/addon-actions": "7.0.0-beta.46",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.46",
|
||||
"@storybook/core-common": "7.0.0-beta.46",
|
||||
"@storybook/node-logger": "7.0.0-beta.46",
|
||||
"@storybook/preset-react-webpack": "7.0.0-beta.46",
|
||||
"@storybook/preview-api": "7.0.0-beta.46",
|
||||
"@storybook/react": "7.0.0-beta.46",
|
||||
"@types/node": "^16.0.0",
|
||||
"find-up": "^5.0.0",
|
||||
"fs-extra": "^11.1.0",
|
||||
@ -123,5 +123,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -224,5 +224,5 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
|
||||
</div>
|
||||
|
||||
<div className="tip-wrapper">
|
||||
<span className="tip">Tip</span>Edit the Markdown in <code>stories/Introduction.stories.mdx</code>
|
||||
<span className="tip">Tip</span>Edit the Markdown in <code>stories/Introduction.mdx</code>
|
||||
</div>
|
||||
|
||||
@ -224,5 +224,5 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
|
||||
</div>
|
||||
|
||||
<div className="tip-wrapper">
|
||||
<span className="tip">Tip</span>Edit the Markdown in <code>stories/Introduction.stories.mdx</code>
|
||||
<span className="tip">Tip</span>Edit the Markdown in <code>stories/Introduction.mdx</code>
|
||||
</div>
|
||||
46
code/frameworks/nextjs/template/cli/ts/Button.stories.ts
Normal file
46
code/frameworks/nextjs/template/cli/ts/Button.stories.ts
Normal file
@ -0,0 +1,46 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { Button } from './Button';
|
||||
|
||||
// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
|
||||
const meta: Meta<typeof Button> = {
|
||||
title: 'Example/Button',
|
||||
component: Button,
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
backgroundColor: {
|
||||
control: 'color',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Button>;
|
||||
|
||||
// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
|
||||
export const Primary: Story = {
|
||||
args: {
|
||||
primary: true,
|
||||
label: 'Button',
|
||||
},
|
||||
};
|
||||
|
||||
export const Secondary: Story = {
|
||||
args: {
|
||||
label: 'Button',
|
||||
},
|
||||
};
|
||||
|
||||
export const Large: Story = {
|
||||
args: {
|
||||
size: 'large',
|
||||
label: 'Button',
|
||||
},
|
||||
};
|
||||
|
||||
export const Small: Story = {
|
||||
args: {
|
||||
size: 'small',
|
||||
label: 'Button',
|
||||
},
|
||||
};
|
||||
52
code/frameworks/nextjs/template/cli/ts/Button.tsx
Normal file
52
code/frameworks/nextjs/template/cli/ts/Button.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
import React from 'react';
|
||||
import './button.css';
|
||||
|
||||
interface ButtonProps {
|
||||
/**
|
||||
* Is this the principal call to action on the page?
|
||||
*/
|
||||
primary?: boolean;
|
||||
/**
|
||||
* What background color to use
|
||||
*/
|
||||
backgroundColor?: string;
|
||||
/**
|
||||
* How large should the button be?
|
||||
*/
|
||||
size?: 'small' | 'medium' | 'large';
|
||||
/**
|
||||
* Button contents
|
||||
*/
|
||||
label: string;
|
||||
/**
|
||||
* Optional click handler
|
||||
*/
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Primary UI component for user interaction
|
||||
*/
|
||||
export const Button = ({
|
||||
primary = false,
|
||||
size = 'medium',
|
||||
backgroundColor,
|
||||
label,
|
||||
...props
|
||||
}: ButtonProps) => {
|
||||
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
|
||||
{...props}
|
||||
>
|
||||
{label}
|
||||
<style jsx>{`
|
||||
button {
|
||||
background-color: ${backgroundColor};
|
||||
}
|
||||
`}</style>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
26
code/frameworks/nextjs/template/cli/ts/Header.stories.ts
Normal file
26
code/frameworks/nextjs/template/cli/ts/Header.stories.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { Header } from './Header';
|
||||
|
||||
const meta: Meta<typeof Header> = {
|
||||
title: 'Example/Header',
|
||||
component: Header,
|
||||
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
// More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Header>;
|
||||
|
||||
export const LoggedIn: Story = {
|
||||
args: {
|
||||
user: {
|
||||
name: 'Jane Doe',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const LoggedOut: Story = {};
|
||||
56
code/frameworks/nextjs/template/cli/ts/Header.tsx
Normal file
56
code/frameworks/nextjs/template/cli/ts/Header.tsx
Normal file
@ -0,0 +1,56 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Button } from './Button';
|
||||
import './header.css';
|
||||
|
||||
type User = {
|
||||
name: string;
|
||||
};
|
||||
|
||||
interface HeaderProps {
|
||||
user?: User;
|
||||
onLogin: () => void;
|
||||
onLogout: () => void;
|
||||
onCreateAccount: () => void;
|
||||
}
|
||||
|
||||
export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
|
||||
<header>
|
||||
<div className="wrapper">
|
||||
<div>
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fillRule="evenodd">
|
||||
<path
|
||||
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
|
||||
fill="#FFF"
|
||||
/>
|
||||
<path
|
||||
d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
|
||||
fill="#555AB9"
|
||||
/>
|
||||
<path
|
||||
d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
|
||||
fill="#91BAF8"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<h1>Acme</h1>
|
||||
</div>
|
||||
<div>
|
||||
{user ? (
|
||||
<>
|
||||
<span className="welcome">
|
||||
Welcome, <b>{user.name}</b>!
|
||||
</span>
|
||||
<Button size="small" onClick={onLogout} label="Log out" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Button size="small" onClick={onLogin} label="Log in" />
|
||||
<Button primary size="small" onClick={onCreateAccount} label="Sign up" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
228
code/frameworks/nextjs/template/cli/ts/Introduction.mdx
Normal file
228
code/frameworks/nextjs/template/cli/ts/Introduction.mdx
Normal file
@ -0,0 +1,228 @@
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import Image from 'next/image';
|
||||
|
||||
import Code from './assets/code-brackets.svg';
|
||||
import Colors from './assets/colors.svg';
|
||||
import Comments from './assets/comments.svg';
|
||||
import Direction from './assets/direction.svg';
|
||||
import Flow from './assets/flow.svg';
|
||||
import Plugin from './assets/plugin.svg';
|
||||
import Repo from './assets/repo.svg';
|
||||
import StackAlt from './assets/stackalt.svg';
|
||||
|
||||
<Meta title="Example/Introduction" />
|
||||
|
||||
<style>
|
||||
{`
|
||||
.subheading {
|
||||
--mediumdark: '#999999';
|
||||
font-weight: 900;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
letter-spacing: 6px;
|
||||
line-height: 24px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 12px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.link-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 620px) {
|
||||
.link-list {
|
||||
row-gap: 20px;
|
||||
column-gap: 20px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (-ms-high-contrast:none) {
|
||||
.link-list {
|
||||
display: -ms-grid;
|
||||
-ms-grid-columns: 1fr 1fr;
|
||||
-ms-grid-rows: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.link-item {
|
||||
display: block;
|
||||
padding: 20px 30px 20px 15px;
|
||||
border: 1px solid #00000010;
|
||||
border-radius: 5px;
|
||||
transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.link-item:hover {
|
||||
border-color: #1EA7FD50;
|
||||
transform: translate3d(0, -3px, 0);
|
||||
box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
|
||||
}
|
||||
|
||||
.link-item:active {
|
||||
border-color: #1EA7FD;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.link-item strong {
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.link-item-img-wrapper {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin-right: 15px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.link-item span {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
display: inline-block;
|
||||
border-radius: 1em;
|
||||
font-size: 11px;
|
||||
line-height: 12px;
|
||||
font-weight: 700;
|
||||
background: #E7FDD8;
|
||||
color: #66BF3C;
|
||||
padding: 4px 12px;
|
||||
margin-right: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.tip-wrapper {
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.tip-wrapper code {
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
# Welcome to Storybook
|
||||
|
||||
Storybook helps you build UI components in isolation from your app's business logic, data, and context.
|
||||
That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
|
||||
|
||||
Browse example stories now by navigating to them in the sidebar.
|
||||
View their code in the `stories` directory to learn how they work.
|
||||
We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
|
||||
|
||||
<div className="subheading">Configure</div>
|
||||
|
||||
<div className="link-list">
|
||||
<a
|
||||
className="link-item"
|
||||
href="https://storybook.js.org/docs/react/addons/addon-types"
|
||||
target="_blank"
|
||||
>
|
||||
<div className="link-item-img-wrapper">
|
||||
<Image src={Plugin} alt="plugin" />
|
||||
</div>
|
||||
<span>
|
||||
<strong>Presets for popular tools</strong>
|
||||
Easy setup for TypeScript, SCSS and more.
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
className="link-item"
|
||||
href="https://storybook.js.org/docs/react/configure/webpack"
|
||||
target="_blank"
|
||||
>
|
||||
<div className="link-item-img-wrapper">
|
||||
<Image src={StackAlt} alt="Build" />
|
||||
</div>
|
||||
<span>
|
||||
<strong>Build configuration</strong>
|
||||
How to customize webpack and Babel
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
className="link-item"
|
||||
href="https://storybook.js.org/docs/react/configure/styling-and-css"
|
||||
target="_blank"
|
||||
>
|
||||
<div className="link-item-img-wrapper">
|
||||
<Image src={Colors} alt="colors" />
|
||||
</div>
|
||||
<span>
|
||||
<strong>Styling</strong>
|
||||
How to load and configure CSS libraries
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
className="link-item"
|
||||
href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
|
||||
target="_blank"
|
||||
>
|
||||
<div className="link-item-img-wrapper">
|
||||
<Image src={Flow} alt="flow" />
|
||||
</div>
|
||||
<span>
|
||||
<strong>Data</strong>
|
||||
Providers and mocking for data libraries
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="subheading">Learn</div>
|
||||
|
||||
<div className="link-list">
|
||||
<a className="link-item" href="https://storybook.js.org/docs" target="_blank">
|
||||
<div className="link-item-img-wrapper">
|
||||
<Image src={Repo} alt="repo" />
|
||||
</div>
|
||||
<span>
|
||||
<strong>Storybook documentation</strong>
|
||||
Configure, customize, and extend
|
||||
</span>
|
||||
</a>
|
||||
<a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
|
||||
<div className="link-item-img-wrapper">
|
||||
<Image src={Direction} alt="direction" />
|
||||
</div>
|
||||
<span>
|
||||
<strong>In-depth guides</strong>
|
||||
Best practices from leading teams
|
||||
</span>
|
||||
</a>
|
||||
<a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
|
||||
<div className="link-item-img-wrapper">
|
||||
<Image src={Code} alt="code" />
|
||||
</div>
|
||||
<span>
|
||||
<strong>GitHub project</strong>
|
||||
View the source and add issues
|
||||
</span>
|
||||
</a>
|
||||
<a className="link-item" href="https://discord.gg/storybook" target="_blank">
|
||||
<div className="link-item-img-wrapper">
|
||||
<Image src={Comments} alt="comments" />
|
||||
</div>
|
||||
<span>
|
||||
<strong>Discord chat</strong>
|
||||
Chat with maintainers and the community
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="tip-wrapper">
|
||||
<span className="tip">Tip</span>Edit the Markdown in <code>stories/Introduction.mdx</code>
|
||||
</div>
|
||||
29
code/frameworks/nextjs/template/cli/ts/Page.stories.ts
Normal file
29
code/frameworks/nextjs/template/cli/ts/Page.stories.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { within, userEvent } from '@storybook/testing-library';
|
||||
|
||||
import { Page } from './Page';
|
||||
|
||||
const meta: Meta<typeof Page> = {
|
||||
title: 'Example/Page',
|
||||
component: Page,
|
||||
parameters: {
|
||||
// More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Page>;
|
||||
|
||||
export const LoggedOut: Story = {};
|
||||
|
||||
// More on interaction testing: https://storybook.js.org/docs/7.0/react/writing-tests/interaction-testing
|
||||
export const LoggedIn: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const loginButton = await canvas.getByRole('button', {
|
||||
name: /Log in/i,
|
||||
});
|
||||
await userEvent.click(loginButton);
|
||||
},
|
||||
};
|
||||
73
code/frameworks/nextjs/template/cli/ts/Page.tsx
Normal file
73
code/frameworks/nextjs/template/cli/ts/Page.tsx
Normal file
@ -0,0 +1,73 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Header } from './Header';
|
||||
import './page.css';
|
||||
|
||||
type User = {
|
||||
name: string;
|
||||
};
|
||||
|
||||
export const Page: React.FC = () => {
|
||||
const [user, setUser] = React.useState<User>();
|
||||
|
||||
return (
|
||||
<article>
|
||||
<Header
|
||||
user={user}
|
||||
onLogin={() => setUser({ name: 'Jane Doe' })}
|
||||
onLogout={() => setUser(undefined)}
|
||||
onCreateAccount={() => setUser({ name: 'Jane Doe' })}
|
||||
/>
|
||||
|
||||
<section>
|
||||
<h2>Pages in Storybook</h2>
|
||||
<p>
|
||||
We recommend building UIs with a{' '}
|
||||
<a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
|
||||
<strong>component-driven</strong>
|
||||
</a>{' '}
|
||||
process starting with atomic components and ending with pages.
|
||||
</p>
|
||||
<p>
|
||||
Render pages with mock data. This makes it easy to build and review page states without
|
||||
needing to navigate to them in your app. Here are some handy patterns for managing page
|
||||
data in Storybook:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Use a higher-level connected component. Storybook helps you compose such data from the
|
||||
"args" of child component stories
|
||||
</li>
|
||||
<li>
|
||||
Assemble data in the page component from your services. You can mock these services out
|
||||
using Storybook.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Get a guided tutorial on component-driven development at{' '}
|
||||
<a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
|
||||
Storybook tutorials
|
||||
</a>
|
||||
. Read more in the{' '}
|
||||
<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
|
||||
docs
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<div className="tip-wrapper">
|
||||
<span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fillRule="evenodd">
|
||||
<path
|
||||
d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
|
||||
id="a"
|
||||
fill="#999"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
Viewports addon in the toolbar
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
};
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact-vite",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,8 +48,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@preact/preset-vite": "^2.0.0",
|
||||
"@storybook/builder-vite": "7.0.0-beta.43",
|
||||
"@storybook/preact": "7.0.0-beta.43"
|
||||
"@storybook/builder-vite": "7.0.0-beta.46",
|
||||
"@storybook/preact": "7.0.0-beta.46"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^16.0.0",
|
||||
@ -73,5 +73,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact-webpack5",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,10 +48,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.43",
|
||||
"@storybook/core-common": "7.0.0-beta.43",
|
||||
"@storybook/preact": "7.0.0-beta.43",
|
||||
"@storybook/preset-preact-webpack": "7.0.0-beta.43",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.46",
|
||||
"@storybook/core-common": "7.0.0-beta.46",
|
||||
"@storybook/preact": "7.0.0-beta.46",
|
||||
"@storybook/preset-preact-webpack": "7.0.0-beta.46",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -77,5 +77,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-vite",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -50,8 +50,8 @@
|
||||
"dependencies": {
|
||||
"@joshwooding/vite-plugin-react-docgen-typescript": "^0.2.1",
|
||||
"@rollup/pluginutils": "^4.2.0",
|
||||
"@storybook/builder-vite": "7.0.0-beta.43",
|
||||
"@storybook/react": "7.0.0-beta.43",
|
||||
"@storybook/builder-vite": "7.0.0-beta.46",
|
||||
"@storybook/react": "7.0.0-beta.46",
|
||||
"@vitejs/plugin-react": "^3.0.1",
|
||||
"ast-types": "^0.14.2",
|
||||
"magic-string": "^0.27.0",
|
||||
@ -80,5 +80,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-webpack5",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,9 +48,9 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.43",
|
||||
"@storybook/preset-react-webpack": "7.0.0-beta.43",
|
||||
"@storybook/react": "7.0.0-beta.43",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.46",
|
||||
"@storybook/preset-react-webpack": "7.0.0-beta.46",
|
||||
"@storybook/react": "7.0.0-beta.46",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -83,5 +83,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/server-webpack5",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,10 +48,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.43",
|
||||
"@storybook/core-common": "7.0.0-beta.43",
|
||||
"@storybook/preset-server-webpack": "7.0.0-beta.43",
|
||||
"@storybook/server": "7.0.0-beta.43",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.46",
|
||||
"@storybook/core-common": "7.0.0-beta.46",
|
||||
"@storybook/preset-server-webpack": "7.0.0-beta.46",
|
||||
"@storybook/server": "7.0.0-beta.46",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -74,5 +74,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte-vite",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,9 +48,9 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-vite": "7.0.0-beta.43",
|
||||
"@storybook/node-logger": "7.0.0-beta.43",
|
||||
"@storybook/svelte": "7.0.0-beta.43",
|
||||
"@storybook/builder-vite": "7.0.0-beta.46",
|
||||
"@storybook/node-logger": "7.0.0-beta.46",
|
||||
"@storybook/svelte": "7.0.0-beta.46",
|
||||
"@sveltejs/vite-plugin-svelte": "^2.0.0",
|
||||
"magic-string": "^0.27.0",
|
||||
"svelte": "^3.0.0",
|
||||
@ -80,5 +80,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -14,14 +14,9 @@ export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (confi
|
||||
// TODO: set up eslint import to use typescript resolver
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
const { svelte, loadSvelteConfig } = await import('@sveltejs/vite-plugin-svelte');
|
||||
const svelteOptions: Record<string, any> = await options.presets.apply(
|
||||
'svelteOptions',
|
||||
{},
|
||||
options
|
||||
);
|
||||
const svelteConfig = { ...(await loadSvelteConfig()), ...svelteOptions };
|
||||
const svelteConfig = await loadSvelteConfig();
|
||||
|
||||
// Add svelte plugin if not present
|
||||
// Add svelte plugin if the user does not have a Vite config of their own
|
||||
if (!(await hasVitePlugins(plugins, ['vite-plugin-svelte']))) {
|
||||
plugins.push(svelte());
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte-webpack5",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,10 +48,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.43",
|
||||
"@storybook/core-common": "7.0.0-beta.43",
|
||||
"@storybook/preset-svelte-webpack": "7.0.0-beta.43",
|
||||
"@storybook/svelte": "7.0.0-beta.43"
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.46",
|
||||
"@storybook/core-common": "7.0.0-beta.46",
|
||||
"@storybook/preset-svelte-webpack": "7.0.0-beta.46",
|
||||
"@storybook/svelte": "7.0.0-beta.46"
|
||||
},
|
||||
"devDependencies": {
|
||||
"svelte": "^3.48.0",
|
||||
@ -78,5 +78,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -23,20 +23,20 @@ Check out our [Frameworks API](https://storybook.js.org/blog/framework-api/) ann
|
||||
All Svelte language features are supported out of the box, as Storybook uses the Svelte compiler underneath.
|
||||
However SvelteKit has some [Kit-specific modules](https://kit.svelte.dev/docs/modules) that currently aren't supported. It's on our roadmap to support most of them soon:
|
||||
|
||||
| **Module** | **Status** | **Note** |
|
||||
| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment) | ✅ Supported | `version` is always empty in Storybook. |
|
||||
| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms) | ⏳ Planned for 7.1 | Will use mocks so the Actions addon will display when the hooks are being called. |
|
||||
| [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation) | ⏳ Planned for 7.1 | Will use mocks so the Actions addon will display when the hooks are being called. |
|
||||
| [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths) | ✅ Supported | Requires SvelteKit 1.4.0 or newer |
|
||||
| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores) | ✅ Supported | Mocks planned for 7.1, so you can set different store values per story. |
|
||||
| [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | ⛔ Not supported | They are meant to only be available server-side, and Storybook renders all components on the client. |
|
||||
| [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public) | 🚧 Partially supported | Only supported in development mode. Storybook is built as a static app with no server-side API so cannot dynamically serve content. |
|
||||
| [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private) | ⛔ Not supported | They are meant to only be available server-side, and Storybook renders all components on the client. |
|
||||
| [`$env/static/public`](https://kit.svelte.dev/docs/modules#$env-static-public) | ✅ Supported | |
|
||||
| [`$lib`](https://kit.svelte.dev/docs/modules#$lib) | ✅ Supported | |
|
||||
| [`$service-worker`](https://kit.svelte.dev/docs/modules#$service-worker) | ⛔ Not supported | They are only meant to be used in service workers |
|
||||
| [`@sveltejs/kit/*`](https://kit.svelte.dev/docs/modules#sveltejs-kit) | ✅ Supported | |
|
||||
| **Module** | **Status** | **Note** |
|
||||
| ---------------------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment) | ✅ Supported | `version` is always empty in Storybook. |
|
||||
| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms) | ⏳ Planned for 7.1 | Will use mocks. Tracked in [#20999](https://github.com/storybookjs/storybook/issues/20999) |
|
||||
| [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation) | ⏳ Planned for 7.1 | Will use mocks. Tracked in [#20999](https://github.com/storybookjs/storybook/issues/20999) |
|
||||
| [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths) | ✅ Supported | Requires SvelteKit 1.4.0 or newer |
|
||||
| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores) | ✅ Supported | Mocks planned for 7.1, so you can set different store values per story. |
|
||||
| [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | ⛔ Not supported | They are meant to only be available server-side, and Storybook renders all components on the client. |
|
||||
| [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public) | 🚧 Partially supported | Only supported in development mode. Storybook is built as a static app with no server-side API so cannot dynamically serve content. |
|
||||
| [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private) | ⛔ Not supported | They are meant to only be available server-side, and Storybook renders all components on the client. |
|
||||
| [`$env/static/public`](https://kit.svelte.dev/docs/modules#$env-static-public) | ✅ Supported | |
|
||||
| [`$lib`](https://kit.svelte.dev/docs/modules#$lib) | ✅ Supported | |
|
||||
| [`$service-worker`](https://kit.svelte.dev/docs/modules#$service-worker) | ⛔ Not supported | They are only meant to be used in service workers |
|
||||
| [`@sveltejs/kit/*`](https://kit.svelte.dev/docs/modules#sveltejs-kit) | ✅ Supported | |
|
||||
|
||||
This is just the beginning. We're close to adding basic support for many of the SvelteKit features. Longer term we're planning on making it an even better experience to [build](https://storybook.js.org/docs/7.0/react/writing-stories/introduction), [test](https://storybook.js.org/docs/7.0/react/writing-tests/introduction) and [document](https://storybook.js.org/docs/7.0/react/writing-docs/introduction) all the SvelteKit goodies like [pages](https://kit.svelte.dev/docs/routing), [forms](https://kit.svelte.dev/docs/form-actions) and [layouts](https://kit.svelte.dev/docs/routing#layout) in Storybook, while still integrating with all the addons and workflows you know and love.
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/sveltekit",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook for SvelteKit",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -51,9 +51,9 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-vite": "7.0.0-beta.43",
|
||||
"@storybook/svelte": "7.0.0-beta.43",
|
||||
"@storybook/svelte-vite": "7.0.0-beta.43"
|
||||
"@storybook/builder-vite": "7.0.0-beta.46",
|
||||
"@storybook/svelte": "7.0.0-beta.46",
|
||||
"@storybook/svelte-vite": "7.0.0-beta.46"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^16.0.0",
|
||||
@ -76,5 +76,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Storybook for Vue and Vite
|
||||
# Storybook for Vue 2 and Vite
|
||||
|
||||
Storybook for Vue is a UI development environment for your Vue components.
|
||||
Storybook for Vue 2 is a UI development environment for your Vue 2 components.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue-vite",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,10 +48,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-vite": "7.0.0-beta.43",
|
||||
"@storybook/core-common": "7.0.0-beta.43",
|
||||
"@storybook/core-server": "7.0.0-beta.43",
|
||||
"@storybook/vue": "7.0.0-beta.43",
|
||||
"@storybook/builder-vite": "7.0.0-beta.46",
|
||||
"@storybook/core-common": "7.0.0-beta.46",
|
||||
"@storybook/core-server": "7.0.0-beta.46",
|
||||
"@storybook/vue": "7.0.0-beta.46",
|
||||
"magic-string": "^0.27.0",
|
||||
"vue-docgen-api": "^4.40.0"
|
||||
},
|
||||
@ -79,5 +79,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Storybook for Vue
|
||||
# Storybook for Vue 3 and Webpack
|
||||
|
||||
Storybook for Vue is a UI development environment for your Vue components.
|
||||
Storybook for Vue 3 is a UI development environment for your Vue 3 components.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue-webpack5",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,10 +48,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.43",
|
||||
"@storybook/core-common": "7.0.0-beta.43",
|
||||
"@storybook/preset-vue-webpack": "7.0.0-beta.43",
|
||||
"@storybook/vue": "7.0.0-beta.43",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.46",
|
||||
"@storybook/core-common": "7.0.0-beta.46",
|
||||
"@storybook/preset-vue-webpack": "7.0.0-beta.46",
|
||||
"@storybook/vue": "7.0.0-beta.46",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -83,5 +83,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1 +1,44 @@
|
||||
# Storybook for React
|
||||
# Storybook for Vue 3 and Vite
|
||||
|
||||
Storybook for Vue 3 is a UI development environment for your Vue 3 components.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
|
||||
|
||||
Storybook runs outside of your app.
|
||||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
||||
|
||||
## Getting Started
|
||||
|
||||
```sh
|
||||
cd my-vue3-app
|
||||
npx storybook init
|
||||
```
|
||||
|
||||
For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
---
|
||||
|
||||
Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
|
||||
You can also build a [static version](https://storybook.js.org/docs/vue/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
|
||||
|
||||
## Extending the Vue application
|
||||
|
||||
Storybook creates a [Vue 3 application](https://v3.vuejs.org/api/application-api.html#application-api) for your component preview.
|
||||
When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file.
|
||||
|
||||
Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration.
|
||||
|
||||
```js
|
||||
// .storybook/preview.js
|
||||
|
||||
import { setup } from '@storybook/vue3';
|
||||
|
||||
setup((app) => {
|
||||
app.use(MyPlugin);
|
||||
app.component('my-component', MyComponent);
|
||||
app.mixin({
|
||||
/* My mixin */
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue3-vite",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,9 +48,9 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-vite": "7.0.0-beta.43",
|
||||
"@storybook/core-server": "7.0.0-beta.43",
|
||||
"@storybook/vue3": "7.0.0-beta.43",
|
||||
"@storybook/builder-vite": "7.0.0-beta.46",
|
||||
"@storybook/core-server": "7.0.0-beta.46",
|
||||
"@storybook/vue3": "7.0.0-beta.46",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"magic-string": "^0.27.0",
|
||||
"vue-docgen-api": "^4.40.0"
|
||||
@ -78,5 +78,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Storybook for Vue 3
|
||||
# Storybook for Vue 3 and Webpack
|
||||
|
||||
Storybook for Vue 3 is a UI development environment for your Vue 3 components.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
@ -24,20 +24,21 @@ You can also build a [static version](https://storybook.js.org/docs/vue/sharing/
|
||||
|
||||
## Extending the Vue application
|
||||
|
||||
Storybook creates a [Vue 3 application](https://v3.vuejs.org/api/application-api.html#application-api) for your component preview which can be imported as `import { app } from '@storybook/vue3'`.
|
||||
|
||||
Storybook creates a [Vue 3 application](https://v3.vuejs.org/api/application-api.html#application-api) for your component preview.
|
||||
When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file.
|
||||
|
||||
For example:
|
||||
Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration.
|
||||
|
||||
```js
|
||||
// .storybook/preview.js
|
||||
|
||||
import { app } from '@storybook/vue3';
|
||||
import { setup } from '@storybook/vue3';
|
||||
|
||||
app.use(MyPlugin);
|
||||
app.component('my-component', MyComponent);
|
||||
app.mixin({
|
||||
/* My mixin */
|
||||
setup((app) => {
|
||||
app.use(MyPlugin);
|
||||
app.component('my-component', MyComponent);
|
||||
app.mixin({
|
||||
/* My mixin */
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue3-webpack5",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,10 +48,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.43",
|
||||
"@storybook/core-common": "7.0.0-beta.43",
|
||||
"@storybook/preset-vue3-webpack": "7.0.0-beta.43",
|
||||
"@storybook/vue3": "7.0.0-beta.43",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.46",
|
||||
"@storybook/core-common": "7.0.0-beta.46",
|
||||
"@storybook/preset-vue3-webpack": "7.0.0-beta.46",
|
||||
"@storybook/vue3": "7.0.0-beta.46",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -80,5 +80,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/web-components-vite",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,10 +48,10 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-vite": "7.0.0-beta.43",
|
||||
"@storybook/core-server": "7.0.0-beta.43",
|
||||
"@storybook/node-logger": "7.0.0-beta.43",
|
||||
"@storybook/web-components": "7.0.0-beta.43",
|
||||
"@storybook/builder-vite": "7.0.0-beta.46",
|
||||
"@storybook/core-server": "7.0.0-beta.46",
|
||||
"@storybook/node-logger": "7.0.0-beta.46",
|
||||
"@storybook/web-components": "7.0.0-beta.46",
|
||||
"magic-string": "^0.27.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -75,5 +75,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/web-components-webpack5",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"lit-html",
|
||||
@ -51,10 +51,10 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.43",
|
||||
"@storybook/core-common": "7.0.0-beta.43",
|
||||
"@storybook/preset-web-components-webpack": "7.0.0-beta.43",
|
||||
"@storybook/web-components": "7.0.0-beta.43",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.46",
|
||||
"@storybook/core-common": "7.0.0-beta.46",
|
||||
"@storybook/preset-web-components-webpack": "7.0.0-beta.46",
|
||||
"@storybook/web-components": "7.0.0-beta.46",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -79,5 +79,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -2,5 +2,5 @@
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true,
|
||||
"registry": "https://registry.npmjs.org",
|
||||
"version": "7.0.0-beta.43"
|
||||
"version": "7.0.0-beta.46"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addons",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook addons store",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -44,9 +44,9 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/manager-api": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/types": "7.0.0-beta.43"
|
||||
"@storybook/manager-api": "7.0.0-beta.46",
|
||||
"@storybook/preview-api": "7.0.0-beta.46",
|
||||
"@storybook/types": "7.0.0-beta.46"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
@ -60,5 +60,5 @@
|
||||
"./src/index.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/builder-manager",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook manager builder",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -44,9 +44,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@fal-works/esbuild-plugin-global-externals": "^2.1.2",
|
||||
"@storybook/core-common": "7.0.0-beta.43",
|
||||
"@storybook/manager": "7.0.0-beta.43",
|
||||
"@storybook/node-logger": "7.0.0-beta.43",
|
||||
"@storybook/core-common": "7.0.0-beta.46",
|
||||
"@storybook/manager": "7.0.0-beta.46",
|
||||
"@storybook/node-logger": "7.0.0-beta.46",
|
||||
"@types/ejs": "^3.1.1",
|
||||
"@types/find-cache-dir": "^3.2.1",
|
||||
"@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
|
||||
@ -73,5 +73,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/builder-vite",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "A plugin to run and build Storybooks with Vite",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/code/lib/builder-vite/#readme",
|
||||
"bugs": {
|
||||
@ -43,16 +43,16 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/channel-postmessage": "7.0.0-beta.43",
|
||||
"@storybook/channel-websocket": "7.0.0-beta.43",
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/core-common": "7.0.0-beta.43",
|
||||
"@storybook/csf-plugin": "7.0.0-beta.43",
|
||||
"@storybook/channel-postmessage": "7.0.0-beta.46",
|
||||
"@storybook/channel-websocket": "7.0.0-beta.46",
|
||||
"@storybook/client-logger": "7.0.0-beta.46",
|
||||
"@storybook/core-common": "7.0.0-beta.46",
|
||||
"@storybook/csf-plugin": "7.0.0-beta.46",
|
||||
"@storybook/mdx2-csf": "next",
|
||||
"@storybook/node-logger": "7.0.0-beta.43",
|
||||
"@storybook/preview": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/types": "7.0.0-beta.43",
|
||||
"@storybook/node-logger": "7.0.0-beta.46",
|
||||
"@storybook/preview": "7.0.0-beta.46",
|
||||
"@storybook/preview-api": "7.0.0-beta.46",
|
||||
"@storybook/types": "7.0.0-beta.46",
|
||||
"browser-assert": "^1.2.1",
|
||||
"es-module-lexer": "^0.9.3",
|
||||
"express": "^4.17.3",
|
||||
@ -96,5 +96,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import * as path from 'path';
|
||||
import * as posixPath from 'node:path/posix'; // Glob requires forward-slashes
|
||||
import { promise as glob } from 'glob-promise';
|
||||
import { normalizeStories } from '@storybook/core-common';
|
||||
|
||||
@ -11,11 +11,14 @@ export async function listStories(options: Options) {
|
||||
configDir: options.configDir,
|
||||
workingDir: options.configDir,
|
||||
}).map(({ directory, files }) => {
|
||||
const pattern = path.join(directory, files);
|
||||
const pattern = posixPath.join(directory, files);
|
||||
|
||||
return glob(path.isAbsolute(pattern) ? pattern : path.join(options.configDir, pattern), {
|
||||
follow: true,
|
||||
});
|
||||
return glob(
|
||||
posixPath.isAbsolute(pattern) ? pattern : posixPath.join(options.configDir, pattern),
|
||||
{
|
||||
follow: true,
|
||||
}
|
||||
);
|
||||
})
|
||||
)
|
||||
).reduce((carry, stories) => carry.concat(stories), []);
|
||||
|
||||
67
code/lib/builder-vite/src/vite-config.test.ts
Normal file
67
code/lib/builder-vite/src/vite-config.test.ts
Normal file
@ -0,0 +1,67 @@
|
||||
import type { Options, Presets } from '@storybook/types';
|
||||
import { loadConfigFromFile } from 'vite';
|
||||
import { commonConfig } from './vite-config';
|
||||
|
||||
jest.mock('vite', () => ({
|
||||
...jest.requireActual('vite'),
|
||||
loadConfigFromFile: jest.fn(async () => ({})),
|
||||
}));
|
||||
const loadConfigFromFileMock = jest.mocked(loadConfigFromFile);
|
||||
|
||||
const dummyOptions: Options = {
|
||||
configType: 'DEVELOPMENT',
|
||||
configDir: '',
|
||||
packageJson: {},
|
||||
presets: {
|
||||
apply: async (key: string) =>
|
||||
({
|
||||
framework: {
|
||||
name: '',
|
||||
},
|
||||
addons: [],
|
||||
core: {
|
||||
builder: {},
|
||||
},
|
||||
options: {},
|
||||
}[key]),
|
||||
} as Presets,
|
||||
presetsList: [],
|
||||
};
|
||||
|
||||
describe('commonConfig', () => {
|
||||
it('should preserve default envPrefix', async () => {
|
||||
loadConfigFromFileMock.mockReturnValueOnce(
|
||||
Promise.resolve({
|
||||
config: {},
|
||||
path: '',
|
||||
dependencies: [],
|
||||
})
|
||||
);
|
||||
const config = await commonConfig(dummyOptions, 'development');
|
||||
expect(config.envPrefix).toStrictEqual(['VITE_', 'STORYBOOK_']);
|
||||
});
|
||||
|
||||
it('should preserve custom envPrefix string', async () => {
|
||||
loadConfigFromFileMock.mockReturnValueOnce(
|
||||
Promise.resolve({
|
||||
config: { envPrefix: 'SECRET_' },
|
||||
path: '',
|
||||
dependencies: [],
|
||||
})
|
||||
);
|
||||
const config = await commonConfig(dummyOptions, 'development');
|
||||
expect(config.envPrefix).toStrictEqual(['SECRET_', 'STORYBOOK_']);
|
||||
});
|
||||
|
||||
it('should preserve custom envPrefix array', async () => {
|
||||
loadConfigFromFileMock.mockReturnValueOnce(
|
||||
Promise.resolve({
|
||||
config: { envPrefix: ['SECRET_', 'VUE_'] },
|
||||
path: '',
|
||||
dependencies: [],
|
||||
})
|
||||
);
|
||||
const config = await commonConfig(dummyOptions, 'development');
|
||||
expect(config.envPrefix).toStrictEqual(['SECRET_', 'VUE_', 'STORYBOOK_']);
|
||||
});
|
||||
});
|
||||
@ -64,7 +64,7 @@ export async function commonConfig(
|
||||
},
|
||||
// If an envPrefix is specified in the vite config, add STORYBOOK_ to it,
|
||||
// otherwise, add VITE_ and STORYBOOK_ so that vite doesn't lose its default.
|
||||
envPrefix: userConfig.envPrefix ? 'STORYBOOK_' : ['VITE_', 'STORYBOOK_'],
|
||||
envPrefix: userConfig.envPrefix ? ['STORYBOOK_'] : ['VITE_', 'STORYBOOK_'],
|
||||
};
|
||||
|
||||
const config: ViteConfig = mergeConfig(userConfig, sbConfig);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/builder-webpack5",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook framework-agnostic API",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -58,25 +58,25 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/addons": "7.0.0-beta.43",
|
||||
"@storybook/api": "7.0.0-beta.43",
|
||||
"@storybook/channel-postmessage": "7.0.0-beta.43",
|
||||
"@storybook/channel-websocket": "7.0.0-beta.43",
|
||||
"@storybook/channels": "7.0.0-beta.43",
|
||||
"@storybook/client-api": "7.0.0-beta.43",
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/components": "7.0.0-beta.43",
|
||||
"@storybook/core-common": "7.0.0-beta.43",
|
||||
"@storybook/core-events": "7.0.0-beta.43",
|
||||
"@storybook/core-webpack": "7.0.0-beta.43",
|
||||
"@storybook/addons": "7.0.0-beta.46",
|
||||
"@storybook/api": "7.0.0-beta.46",
|
||||
"@storybook/channel-postmessage": "7.0.0-beta.46",
|
||||
"@storybook/channel-websocket": "7.0.0-beta.46",
|
||||
"@storybook/channels": "7.0.0-beta.46",
|
||||
"@storybook/client-api": "7.0.0-beta.46",
|
||||
"@storybook/client-logger": "7.0.0-beta.46",
|
||||
"@storybook/components": "7.0.0-beta.46",
|
||||
"@storybook/core-common": "7.0.0-beta.46",
|
||||
"@storybook/core-events": "7.0.0-beta.46",
|
||||
"@storybook/core-webpack": "7.0.0-beta.46",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.43",
|
||||
"@storybook/node-logger": "7.0.0-beta.43",
|
||||
"@storybook/preview": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/router": "7.0.0-beta.43",
|
||||
"@storybook/store": "7.0.0-beta.43",
|
||||
"@storybook/theming": "7.0.0-beta.43",
|
||||
"@storybook/manager-api": "7.0.0-beta.46",
|
||||
"@storybook/node-logger": "7.0.0-beta.46",
|
||||
"@storybook/preview": "7.0.0-beta.46",
|
||||
"@storybook/preview-api": "7.0.0-beta.46",
|
||||
"@storybook/router": "7.0.0-beta.46",
|
||||
"@storybook/store": "7.0.0-beta.46",
|
||||
"@storybook/theming": "7.0.0-beta.46",
|
||||
"@types/node": "^16.0.0",
|
||||
"@types/semver": "^7.3.4",
|
||||
"babel-loader": "^9.0.0",
|
||||
@ -131,5 +131,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channel-postmessage",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -43,9 +43,9 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/channels": "7.0.0-beta.43",
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/core-events": "7.0.0-beta.43",
|
||||
"@storybook/channels": "7.0.0-beta.46",
|
||||
"@storybook/client-logger": "7.0.0-beta.46",
|
||||
"@storybook/core-events": "7.0.0-beta.46",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"qs": "^6.10.0",
|
||||
"telejson": "^7.0.3"
|
||||
@ -61,5 +61,5 @@
|
||||
"./src/index.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channel-websocket",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -43,8 +43,8 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/channels": "7.0.0-beta.43",
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/channels": "7.0.0-beta.46",
|
||||
"@storybook/client-logger": "7.0.0-beta.46",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"telejson": "^7.0.3"
|
||||
},
|
||||
@ -59,5 +59,5 @@
|
||||
"./src/index.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channels",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -53,5 +53,5 @@
|
||||
"./src/index.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "sb",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook CLI",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -21,10 +21,10 @@
|
||||
"license": "MIT",
|
||||
"bin": "./index.js",
|
||||
"dependencies": {
|
||||
"@storybook/cli": "7.0.0-beta.43"
|
||||
"@storybook/cli": "7.0.0-beta.46"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "storybook",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook CLI",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -24,10 +24,10 @@
|
||||
"storybook": "./index.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/cli": "7.0.0-beta.43"
|
||||
"@storybook/cli": "7.0.0-beta.46"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/cli",
|
||||
"version": "7.0.0-beta.43",
|
||||
"version": "7.0.0-beta.46",
|
||||
"description": "Storybook's CLI - easiest method of adding storybook to your projects",
|
||||
"keywords": [
|
||||
"cli",
|
||||
@ -56,13 +56,13 @@
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.20.2",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@storybook/codemod": "7.0.0-beta.43",
|
||||
"@storybook/core-common": "7.0.0-beta.43",
|
||||
"@storybook/core-server": "7.0.0-beta.43",
|
||||
"@storybook/csf-tools": "7.0.0-beta.43",
|
||||
"@storybook/node-logger": "7.0.0-beta.43",
|
||||
"@storybook/telemetry": "7.0.0-beta.43",
|
||||
"@storybook/types": "7.0.0-beta.43",
|
||||
"@storybook/codemod": "7.0.0-beta.46",
|
||||
"@storybook/core-common": "7.0.0-beta.46",
|
||||
"@storybook/core-server": "7.0.0-beta.46",
|
||||
"@storybook/csf-tools": "7.0.0-beta.46",
|
||||
"@storybook/node-logger": "7.0.0-beta.46",
|
||||
"@storybook/telemetry": "7.0.0-beta.46",
|
||||
"@storybook/types": "7.0.0-beta.46",
|
||||
"@types/semver": "^7.3.4",
|
||||
"boxen": "^5.1.2",
|
||||
"chalk": "^4.1.0",
|
||||
@ -91,7 +91,7 @@
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/client-api": "7.0.0-beta.43",
|
||||
"@storybook/client-api": "7.0.0-beta.46",
|
||||
"@types/cross-spawn": "^6.0.2",
|
||||
"@types/prompts": "^2.0.9",
|
||||
"@types/puppeteer-core": "^2.1.0",
|
||||
@ -111,5 +111,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
"gitHead": "ddbb9cfded3d2e6374a9abc9a6e8990a2f0052ed"
|
||||
}
|
||||
|
||||
202
code/lib/cli/src/automigrate/fixes/bare-mdx-stories-glob.test.ts
Normal file
202
code/lib/cli/src/automigrate/fixes/bare-mdx-stories-glob.test.ts
Normal file
@ -0,0 +1,202 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
/// <reference types="@types/jest" />;
|
||||
|
||||
import type { StorybookConfig } from '@storybook/types';
|
||||
import path from 'path';
|
||||
import type { JsPackageManager, PackageJson } from '../../js-package-manager';
|
||||
import { ansiRegex } from '../helpers/cleanLog';
|
||||
import type { BareMdxStoriesGlobRunOptions } from './bare-mdx-stories-glob';
|
||||
import { bareMdxStoriesGlob } from './bare-mdx-stories-glob';
|
||||
|
||||
// eslint-disable-next-line global-require, jest/no-mocks-import
|
||||
jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra'));
|
||||
|
||||
const checkBareMdxStoriesGlob = async ({
|
||||
packageJson,
|
||||
main,
|
||||
}: {
|
||||
packageJson: PackageJson;
|
||||
main?: Partial<StorybookConfig>;
|
||||
}) => {
|
||||
if (main) {
|
||||
// eslint-disable-next-line global-require
|
||||
require('fs-extra').__setMockFiles({
|
||||
[path.join('.storybook', 'main.js')]: `module.exports = ${JSON.stringify(main)};`,
|
||||
});
|
||||
} else {
|
||||
// eslint-disable-next-line global-require
|
||||
require('fs-extra').__setMockFiles({});
|
||||
}
|
||||
const packageManager = {
|
||||
retrievePackageJson: () => ({ dependencies: {}, devDependencies: {}, ...packageJson }),
|
||||
} as JsPackageManager;
|
||||
|
||||
return bareMdxStoriesGlob.check({ packageManager });
|
||||
};
|
||||
|
||||
describe('bare-mdx fix', () => {
|
||||
describe('should no-op', () => {
|
||||
it('in SB < v7.0.0', async () => {
|
||||
const packageJson = {
|
||||
dependencies: { '@storybook/react': '^6.2.0' },
|
||||
};
|
||||
const main = { stories: ['../**/*.stories.mdx'] };
|
||||
await expect(checkBareMdxStoriesGlob({ packageJson, main })).resolves.toBeFalsy();
|
||||
});
|
||||
|
||||
describe('in SB >= v7.0.0', () => {
|
||||
it('without main', async () => {
|
||||
const packageJson = {
|
||||
dependencies: { '@storybook/react': '^7.0.0' },
|
||||
};
|
||||
await expect(checkBareMdxStoriesGlob({ packageJson })).rejects.toThrow();
|
||||
});
|
||||
|
||||
it('without stories field in main', async () => {
|
||||
const packageJson = {
|
||||
dependencies: { '@storybook/react': '^7.0.0' },
|
||||
};
|
||||
const main = {};
|
||||
await expect(checkBareMdxStoriesGlob({ packageJson, main })).rejects.toThrow();
|
||||
});
|
||||
|
||||
it('with variable references in stories field', async () => {
|
||||
// eslint-disable-next-line global-require
|
||||
require('fs-extra').__setMockFiles({
|
||||
[path.join('.storybook', 'main.js')]: `
|
||||
const globVar = '../**/*.stories.mdx';
|
||||
module.exports = { stories: [globVar] };`,
|
||||
});
|
||||
|
||||
const packageManager = {
|
||||
retrievePackageJson: () => ({
|
||||
dependencies: { '@storybook/react': '^7.0.0' },
|
||||
devDependencies: {},
|
||||
}),
|
||||
} as unknown as JsPackageManager;
|
||||
|
||||
await expect(bareMdxStoriesGlob.check({ packageManager })).rejects.toThrow();
|
||||
});
|
||||
|
||||
it('without .stories.mdx in globs', async () => {
|
||||
const packageJson = {
|
||||
dependencies: { '@storybook/react': '^7.0.0' },
|
||||
};
|
||||
const main = {
|
||||
stories: [
|
||||
'../src/**/*.stories.@(js|jsx|ts|tsx)',
|
||||
{ directory: '../**', files: '*.stories.@(js|jsx|ts|tsx)' },
|
||||
{ directory: '../**' },
|
||||
],
|
||||
};
|
||||
await expect(checkBareMdxStoriesGlob({ packageJson, main })).resolves.toBeFalsy();
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('should fix', () => {
|
||||
it.each([
|
||||
{
|
||||
existingStoriesEntries: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||
expectedStoriesEntries: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||
},
|
||||
{
|
||||
existingStoriesEntries: ['../src/**/*.stories.*'],
|
||||
expectedStoriesEntries: ['../src/**/*.@(mdx|stories.*)'],
|
||||
},
|
||||
{
|
||||
existingStoriesEntries: ['../src/**/*.stories.@(mdx|js|jsx|ts|tsx)'],
|
||||
expectedStoriesEntries: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
|
||||
},
|
||||
{
|
||||
existingStoriesEntries: ['../src/**/*.stories.@(js|jsx|mdx|ts|tsx)'],
|
||||
expectedStoriesEntries: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
|
||||
},
|
||||
{
|
||||
existingStoriesEntries: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
|
||||
expectedStoriesEntries: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
|
||||
},
|
||||
])(
|
||||
'strings: $existingStoriesEntries',
|
||||
async ({ existingStoriesEntries, expectedStoriesEntries }) => {
|
||||
const packageJson = {
|
||||
dependencies: { '@storybook/react': '^7.0.0' },
|
||||
};
|
||||
const main = {
|
||||
stories: existingStoriesEntries,
|
||||
};
|
||||
await expect(checkBareMdxStoriesGlob({ packageJson, main })).resolves.toMatchObject({
|
||||
existingStoriesEntries,
|
||||
nextStoriesEntries: expectedStoriesEntries,
|
||||
});
|
||||
}
|
||||
);
|
||||
it.each([
|
||||
{
|
||||
existingStoriesEntries: [{ directory: '../src/**', files: '*.stories.mdx' }],
|
||||
expectedStoriesEntries: [{ directory: '../src/**', files: '*.mdx' }],
|
||||
},
|
||||
{
|
||||
existingStoriesEntries: [{ directory: '../src/**', files: '*.stories.*' }],
|
||||
expectedStoriesEntries: [{ directory: '../src/**', files: '*.@(mdx|stories.*)' }],
|
||||
},
|
||||
{
|
||||
existingStoriesEntries: [
|
||||
{ directory: '../src/**', files: '*.stories.@(js|jsx|ts|tsx|mdx)' },
|
||||
],
|
||||
expectedStoriesEntries: [
|
||||
{ directory: '../src/**', files: '*.@(mdx|stories.@(js|jsx|ts|tsx))' },
|
||||
],
|
||||
},
|
||||
])(
|
||||
'specifiers: $existingStoriesEntries.0.files',
|
||||
async ({ existingStoriesEntries, expectedStoriesEntries }) => {
|
||||
const packageJson = {
|
||||
dependencies: { '@storybook/react': '^7.0.0' },
|
||||
};
|
||||
const main = {
|
||||
stories: existingStoriesEntries,
|
||||
};
|
||||
await expect(checkBareMdxStoriesGlob({ packageJson, main })).resolves.toMatchObject({
|
||||
existingStoriesEntries,
|
||||
nextStoriesEntries: expectedStoriesEntries,
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
it('prompts', () => {
|
||||
const result = bareMdxStoriesGlob.prompt({
|
||||
existingStoriesEntries: [
|
||||
'../src/**/*.stories.@(js|jsx|mdx|ts|tsx)',
|
||||
{ directory: '../src/**', files: '*.stories.mdx' },
|
||||
],
|
||||
nextStoriesEntries: [
|
||||
'../src/**/*.mdx',
|
||||
'../src/**/*.stories.@(js|jsx|ts|tsx)',
|
||||
{ directory: '../src/**', files: '*.mdx' },
|
||||
],
|
||||
} as BareMdxStoriesGlobRunOptions);
|
||||
|
||||
expect(result.replaceAll(ansiRegex(), '')).toMatchInlineSnapshot(`
|
||||
"We've detected your project has one or more globs in your 'stories' config that matches .stories.mdx files:
|
||||
\\"../src/**/*.stories.@(js|jsx|mdx|ts|tsx)\\"
|
||||
{
|
||||
\\"directory\\": \\"../src/**\\",
|
||||
\\"files\\": \\"*.stories.mdx\\"
|
||||
}
|
||||
|
||||
In Storybook 7, we have deprecated defining stories in MDX files, and consequently have changed the suffix to simply .mdx.
|
||||
|
||||
We can automatically migrate your 'stories' config to include any .mdx file instead of just .stories.mdx.
|
||||
That would result in the following 'stories' config:
|
||||
\\"../src/**/*.mdx\\"
|
||||
\\"../src/**/*.stories.@(js|jsx|ts|tsx)\\"
|
||||
{
|
||||
\\"directory\\": \\"../src/**\\",
|
||||
\\"files\\": \\"*.mdx\\"
|
||||
}
|
||||
|
||||
To learn more about this change, see: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mdx-docs-files"
|
||||
`);
|
||||
});
|
||||
});
|
||||
});
|
||||
150
code/lib/cli/src/automigrate/fixes/bare-mdx-stories-glob.ts
Normal file
150
code/lib/cli/src/automigrate/fixes/bare-mdx-stories-glob.ts
Normal file
@ -0,0 +1,150 @@
|
||||
import chalk from 'chalk';
|
||||
import dedent from 'ts-dedent';
|
||||
import semver from 'semver';
|
||||
import type { ConfigFile } from '@storybook/csf-tools';
|
||||
import { readConfig, writeConfig } from '@storybook/csf-tools';
|
||||
import { getStorybookInfo } from '@storybook/core-common';
|
||||
import type { StoriesEntry } from 'lib/types/src';
|
||||
import type { Fix } from '../types';
|
||||
|
||||
const logger = console;
|
||||
|
||||
const fixId = 'bare-mdx-stories-glob';
|
||||
|
||||
export interface BareMdxStoriesGlobRunOptions {
|
||||
main: ConfigFile;
|
||||
existingStoriesEntries: StoriesEntry[];
|
||||
nextStoriesEntries: StoriesEntry[];
|
||||
}
|
||||
|
||||
const getNextGlob = (glob: string) => {
|
||||
// '../src/**/*.stories.@(mdx|js|jsx|ts|tsx)' -> '../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'
|
||||
const extGlobsRegex = new RegExp(/(.*\.)(stories\.@.*)(\|mdx|mdx\|)(.*)$/i);
|
||||
if (glob.match(extGlobsRegex)) {
|
||||
return glob.replace(extGlobsRegex, '$1@(mdx|$2$4)');
|
||||
}
|
||||
|
||||
// '../src/**/*.stories.*' -> '../src/**/*.@(mdx|stories.*)'
|
||||
const allStoriesExtensionsRegex = new RegExp(/(.*\.)(stories\.\*)$/i);
|
||||
if (glob.match(allStoriesExtensionsRegex)) {
|
||||
return glob.replace(allStoriesExtensionsRegex, '$1@(mdx|$2)');
|
||||
}
|
||||
|
||||
// '../src/**/*.stories.mdx' -> '../src/**/*.mdx'
|
||||
return glob.replaceAll('.stories.mdx', '.mdx');
|
||||
};
|
||||
|
||||
export const bareMdxStoriesGlob: Fix<BareMdxStoriesGlobRunOptions> = {
|
||||
id: fixId,
|
||||
async check({ packageManager }) {
|
||||
const packageJson = packageManager.retrievePackageJson();
|
||||
|
||||
const { mainConfig, version: storybookVersion } = getStorybookInfo(packageJson);
|
||||
if (!mainConfig) {
|
||||
logger.warn('Unable to find storybook main.js config, skipping');
|
||||
return null;
|
||||
}
|
||||
|
||||
const sbVersionCoerced = storybookVersion && semver.coerce(storybookVersion)?.version;
|
||||
if (!sbVersionCoerced) {
|
||||
throw new Error(dedent`
|
||||
❌ Unable to determine storybook version.
|
||||
🤔 Are you running automigrate from your project directory?
|
||||
`);
|
||||
}
|
||||
|
||||
if (!semver.gte(sbVersionCoerced, '7.0.0')) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const main = await readConfig(mainConfig);
|
||||
|
||||
let existingStoriesEntries;
|
||||
|
||||
try {
|
||||
existingStoriesEntries = main.getFieldValue(['stories']) as StoriesEntry[];
|
||||
} catch (e) {
|
||||
// throws in next null check below
|
||||
}
|
||||
|
||||
if (!existingStoriesEntries) {
|
||||
throw new Error(dedent`
|
||||
❌ Unable to determine Storybook stories globs, skipping ${chalk.cyan(fixId)} fix.
|
||||
|
||||
In Storybook 7, we have deprecated defining stories in MDX files, and consequently have changed the suffix to simply .mdx.
|
||||
|
||||
We were unable to automatically migrate your 'stories' config to include any .mdx file instead of just .stories.mdx.
|
||||
We suggest you make this change manually.
|
||||
|
||||
To learn more about this change, see: ${chalk.yellow(
|
||||
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mdx-docs-files'
|
||||
)}
|
||||
`);
|
||||
}
|
||||
|
||||
const nextStoriesEntries = existingStoriesEntries.map((entry) => {
|
||||
const isSpecifier = typeof entry !== 'string';
|
||||
const glob = isSpecifier ? entry.files : entry;
|
||||
|
||||
if (!glob) {
|
||||
// storySpecifier without the 'files' property. Just add the existing to the next list
|
||||
return entry;
|
||||
}
|
||||
|
||||
const nextGlob = getNextGlob(glob);
|
||||
return isSpecifier ? { ...entry, files: nextGlob } : nextGlob;
|
||||
});
|
||||
|
||||
// bails if there are no changes
|
||||
if (
|
||||
existingStoriesEntries.length === nextStoriesEntries.length &&
|
||||
existingStoriesEntries.every((entry, index) => {
|
||||
const nextEntry = nextStoriesEntries[index];
|
||||
if (typeof entry === 'string') {
|
||||
return entry === nextEntry;
|
||||
}
|
||||
if (typeof nextEntry === 'string') {
|
||||
return false;
|
||||
}
|
||||
return entry.files === nextEntry.files;
|
||||
})
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return { existingStoriesEntries, nextStoriesEntries, main };
|
||||
},
|
||||
|
||||
prompt({ existingStoriesEntries, nextStoriesEntries }) {
|
||||
const prettyExistingStoriesEntries = existingStoriesEntries
|
||||
.map((entry) => JSON.stringify(entry, null, 2))
|
||||
.join('\n');
|
||||
const prettyNextStoriesEntries = nextStoriesEntries
|
||||
.map((entry) => JSON.stringify(entry, null, 2))
|
||||
.join('\n');
|
||||
return dedent`
|
||||
We've detected your project has one or more globs in your 'stories' config that matches .stories.mdx files:
|
||||
${chalk.cyan(prettyExistingStoriesEntries)}
|
||||
|
||||
In Storybook 7, we have deprecated defining stories in MDX files, and consequently have changed the suffix to simply .mdx.
|
||||
|
||||
We can automatically migrate your 'stories' config to include any .mdx file instead of just .stories.mdx.
|
||||
That would result in the following 'stories' config:
|
||||
${chalk.cyan(prettyNextStoriesEntries)}
|
||||
|
||||
To learn more about this change, see: ${chalk.yellow(
|
||||
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mdx-docs-files'
|
||||
)}
|
||||
`;
|
||||
},
|
||||
|
||||
async run({ dryRun, result: { nextStoriesEntries, main } }) {
|
||||
logger.info(dedent`✅ Setting 'stories' config:
|
||||
${JSON.stringify(nextStoriesEntries, null, 2)}`);
|
||||
|
||||
main.setFieldValue(['stories'], nextStoriesEntries);
|
||||
if (!dryRun) {
|
||||
await writeConfig(main);
|
||||
}
|
||||
},
|
||||
};
|
||||
@ -18,6 +18,7 @@ import { sveltekitFramework } from './sveltekit-framework';
|
||||
import { addReact } from './add-react';
|
||||
import { nodeJsRequirement } from './nodejs-requirement';
|
||||
import { missingBabelRc } from './missing-babelrc';
|
||||
import { bareMdxStoriesGlob } from './bare-mdx-stories-glob';
|
||||
|
||||
export * from '../types';
|
||||
|
||||
@ -37,6 +38,7 @@ export const fixes: Fix[] = [
|
||||
nextjsFramework,
|
||||
removedGlobalClientAPIs,
|
||||
mdx1to2,
|
||||
bareMdxStoriesGlob,
|
||||
autodocsTrue,
|
||||
addReact,
|
||||
missingBabelRc,
|
||||
|
||||
@ -103,27 +103,6 @@ describe('new-frameworks fix', () => {
|
||||
).resolves.toBeFalsy();
|
||||
});
|
||||
|
||||
// TODO: once we have a @storybook/vue-vite framework, we should remove this test
|
||||
it('in sb 7 with vue and vite', async () => {
|
||||
const packageJson = {
|
||||
dependencies: {
|
||||
'@storybook/vue': '^7.0.0',
|
||||
'@storybook/builder-vite': 'x.y.z',
|
||||
},
|
||||
};
|
||||
await expect(
|
||||
checkNewFrameworks({
|
||||
packageJson,
|
||||
main: {
|
||||
framework: '@storybook/vue',
|
||||
core: {
|
||||
builder: '@storybook/builder-vite',
|
||||
},
|
||||
},
|
||||
})
|
||||
).resolves.toBeFalsy();
|
||||
});
|
||||
|
||||
it('in sb 7 with vite < 3', async () => {
|
||||
const packageJson = {
|
||||
dependencies: {
|
||||
|
||||
@ -28,8 +28,7 @@ const packagesMap: Record<string, { webpack5?: string; vite?: string }> = {
|
||||
},
|
||||
'@storybook/vue': {
|
||||
webpack5: '@storybook/vue-webpack5',
|
||||
// TODO: bring this back if we ever want to support vue 2 + vite. Else delete this!
|
||||
// vite: '@storybook/vue-vite',
|
||||
vite: '@storybook/vue-vite',
|
||||
},
|
||||
'@storybook/vue3': {
|
||||
webpack5: '@storybook/vue3-webpack5',
|
||||
|
||||
@ -1,10 +1,20 @@
|
||||
import { EOL } from 'os';
|
||||
|
||||
// copied from https://github.com/chalk/ansi-regex
|
||||
// the package is ESM only so not compatible with jest
|
||||
export const ansiRegex = ({ onlyFirst = false } = {}) => {
|
||||
const pattern = [
|
||||
'[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]+)*|[a-zA-Z\\d]+(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]*)*)?\\u0007)',
|
||||
'(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-ntqry=><~]))',
|
||||
].join('|');
|
||||
|
||||
return new RegExp(pattern, onlyFirst ? undefined : 'g');
|
||||
};
|
||||
|
||||
export const cleanLog = (str: string) =>
|
||||
str
|
||||
// remove chalk ANSI colors
|
||||
// eslint-disable-next-line no-control-regex
|
||||
.replace(/\u001b\[.*?m/g, '')
|
||||
.replace(ansiRegex(), '')
|
||||
// fix boxen output
|
||||
.replace(/╮│/g, '╮\n│')
|
||||
.replace(/││/g, '│\n│')
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import findUp from 'find-up';
|
||||
import semver from 'semver';
|
||||
@ -86,7 +85,7 @@ const getFrameworkPreset = (
|
||||
}
|
||||
|
||||
if (Array.isArray(files) && files.length > 0) {
|
||||
matcher.files = files.map((name) => fs.existsSync(path.join(process.cwd(), name)));
|
||||
matcher.files = files.map((name) => fs.existsSync(name));
|
||||
}
|
||||
|
||||
return matcherFunction(matcher) ? preset : null;
|
||||
@ -152,7 +151,9 @@ export function isStorybookInstalled(
|
||||
export function detectLanguage(packageJson?: PackageJson) {
|
||||
let language = SupportedLanguage.JAVASCRIPT;
|
||||
|
||||
if (!packageJson) {
|
||||
// TODO: we may need to also detect whether a jsconfig.json file is present
|
||||
// in a monorepo root directory
|
||||
if (!packageJson || fs.existsSync('jsconfig.json')) {
|
||||
return language;
|
||||
}
|
||||
|
||||
|
||||
@ -8,7 +8,8 @@ export function getCliDir() {
|
||||
|
||||
export function getRendererDir(renderer: SupportedFrameworks | SupportedRenderers) {
|
||||
const externalFramework = externalFrameworks.find((framework) => framework.name === renderer);
|
||||
const frameworkPackageName = externalFramework?.packageName ?? `@storybook/${renderer}`;
|
||||
const frameworkPackageName =
|
||||
externalFramework?.renderer || externalFramework?.packageName || `@storybook/${renderer}`;
|
||||
return dirname(
|
||||
require.resolve(`${frameworkPackageName}/package.json`, {
|
||||
paths: [process.cwd()],
|
||||
|
||||
8
code/lib/cli/src/generators/SOLID/index.ts
Normal file
8
code/lib/cli/src/generators/SOLID/index.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { baseGenerator } from '../baseGenerator';
|
||||
import type { Generator } from '../types';
|
||||
|
||||
const generator: Generator = async (packageManager, npmOptions, options) => {
|
||||
await baseGenerator(packageManager, npmOptions, options, 'solid', {}, 'solid');
|
||||
};
|
||||
|
||||
export default generator;
|
||||
@ -45,15 +45,33 @@ const getBuilderDetails = (builder: string) => {
|
||||
|
||||
const getExternalFramework = (framework: string) =>
|
||||
externalFrameworks.find(
|
||||
(exFramework) => exFramework.name === framework || exFramework.packageName === framework
|
||||
(exFramework) =>
|
||||
framework !== undefined &&
|
||||
(exFramework.name === framework ||
|
||||
exFramework.packageName === framework ||
|
||||
exFramework?.frameworks?.some?.((item) => item === framework))
|
||||
);
|
||||
|
||||
const getFrameworkPackage = (framework: string, renderer: string, builder: string) => {
|
||||
const externalFramework = getExternalFramework(framework);
|
||||
if (externalFramework) {
|
||||
return externalFramework.packageName;
|
||||
|
||||
if (externalFramework === undefined) {
|
||||
return framework ? `@storybook/${framework}` : `@storybook/${renderer}-${builder}`;
|
||||
}
|
||||
return framework ? `@storybook/${framework}` : `@storybook/${renderer}-${builder}`;
|
||||
|
||||
if (externalFramework.frameworks !== undefined) {
|
||||
return externalFramework.frameworks.find((item) => item.match(new RegExp(`-${builder}`)));
|
||||
}
|
||||
|
||||
return externalFramework.packageName;
|
||||
};
|
||||
|
||||
const getRendererPackage = (framework: string, renderer: string) => {
|
||||
const externalFramework = getExternalFramework(framework);
|
||||
if (externalFramework !== undefined)
|
||||
return externalFramework.renderer || externalFramework.packageName;
|
||||
|
||||
return `@storybook/${renderer}`;
|
||||
};
|
||||
|
||||
const wrapForPnp = (packageName: string) =>
|
||||
@ -76,7 +94,7 @@ const getFrameworkDetails = (
|
||||
|
||||
const frameworkPackagePath = pnp ? wrapForPnp(frameworkPackage) : frameworkPackage;
|
||||
|
||||
const rendererPackage = `@storybook/${renderer}`;
|
||||
const rendererPackage = getRendererPackage(framework, renderer);
|
||||
const rendererPackagePath = pnp ? wrapForPnp(rendererPackage) : rendererPackage;
|
||||
|
||||
const builderPackage = getBuilderDetails(builder);
|
||||
@ -89,7 +107,7 @@ const getFrameworkDetails = (
|
||||
|
||||
if (isKnownFramework) {
|
||||
return {
|
||||
packages: [frameworkPackage],
|
||||
packages: [rendererPackage, frameworkPackage],
|
||||
framework: frameworkPackagePath,
|
||||
rendererId: renderer,
|
||||
type: 'framework',
|
||||
@ -114,7 +132,7 @@ const getFrameworkDetails = (
|
||||
const stripVersions = (addons: string[]) => addons.map((addon) => getPackageDetails(addon)[0]);
|
||||
|
||||
const hasInteractiveStories = (rendererId: SupportedRenderers) =>
|
||||
['react', 'angular', 'preact', 'svelte', 'vue', 'vue3', 'html'].includes(rendererId);
|
||||
['react', 'angular', 'preact', 'svelte', 'vue', 'vue3', 'html', 'solid'].includes(rendererId);
|
||||
|
||||
const hasFrameworkTemplates = (framework?: SupportedFrameworks) =>
|
||||
['angular', 'nextjs'].includes(framework);
|
||||
@ -241,9 +259,15 @@ export async function baseGenerator(
|
||||
await configurePreview({ frameworkPreviewParts, storybookConfigFolder, language });
|
||||
|
||||
// FIXME: temporary workaround for https://github.com/storybookjs/storybook/issues/17516
|
||||
// Vite workaround regex for internal and external frameworks as f.e:
|
||||
// Internal: @storybook/xxxxx-vite
|
||||
// External: storybook-xxxxx-vite
|
||||
if (
|
||||
frameworkPackages.find(
|
||||
(pkg) => pkg.match(/^@storybook\/.*-vite$/) || pkg === '@storybook/sveltekit'
|
||||
(pkg) =>
|
||||
pkg.match(/^(@storybook\/|storybook).*-vite$/) ||
|
||||
pkg === '@storybook/sveltekit' ||
|
||||
pkg === ''
|
||||
)
|
||||
) {
|
||||
const previewHead = dedent`
|
||||
|
||||
@ -70,6 +70,46 @@ describe('configureMain', () => {
|
||||
export default config;"
|
||||
`);
|
||||
});
|
||||
|
||||
test('should handle resolved paths in pnp', async () => {
|
||||
await configureMain({
|
||||
language: SupportedLanguage.JAVASCRIPT,
|
||||
addons: [
|
||||
"%%path.dirname(require.resolve(path.join('@storybook/addon-links', 'package.json')))%%",
|
||||
"%%path.dirname(require.resolve(path.join('@storybook/addon-essentials', 'package.json')))%%",
|
||||
"%%path.dirname(require.resolve(path.join('@storybook/preset-create-react-app', 'package.json')))%%",
|
||||
"%%path.dirname(require.resolve(path.join('@storybook/addon-interactions', 'package.json')))%%",
|
||||
],
|
||||
storybookConfigFolder: '.storybook',
|
||||
framework: {
|
||||
name: "%%path.dirname(require.resolve(path.join('@storybook/react-webpack5', 'package.json')))%%",
|
||||
},
|
||||
});
|
||||
|
||||
const { calls } = (fse.writeFile as unknown as jest.Mock).mock;
|
||||
const [mainConfigPath, mainConfigContent] = calls[0];
|
||||
|
||||
expect(mainConfigPath).toEqual('./.storybook/main.js');
|
||||
expect(mainConfigContent).toMatchInlineSnapshot(`
|
||||
"/** @type { import('@storybook/react-webpack5').StorybookConfig } */
|
||||
const config = {
|
||||
\\"stories\\": [
|
||||
\\"../stories/**/*.mdx\\",
|
||||
\\"../stories/**/*.stories.@(js|jsx|ts|tsx)\\"
|
||||
],
|
||||
\\"addons\\": [
|
||||
path.dirname(require.resolve(path.join('@storybook/addon-links', 'package.json'))),
|
||||
path.dirname(require.resolve(path.join('@storybook/addon-essentials', 'package.json'))),
|
||||
path.dirname(require.resolve(path.join('@storybook/preset-create-react-app', 'package.json'))),
|
||||
path.dirname(require.resolve(path.join('@storybook/addon-interactions', 'package.json')))
|
||||
],
|
||||
\\"framework\\": {
|
||||
\\"name\\": path.dirname(require.resolve(path.join('@storybook/react-webpack5', 'package.json')))
|
||||
}
|
||||
};
|
||||
export default config;"
|
||||
`);
|
||||
});
|
||||
});
|
||||
|
||||
describe('configurePreview', () => {
|
||||
@ -85,6 +125,9 @@ describe('configurePreview', () => {
|
||||
expect(previewConfigPath).toEqual('./.storybook/preview.js');
|
||||
expect(previewConfigContent).toMatchInlineSnapshot(`
|
||||
"export const parameters = {
|
||||
backgrounds: {
|
||||
default: 'light',
|
||||
},
|
||||
actions: { argTypesRegex: \\"^on[A-Z].*\\" },
|
||||
controls: {
|
||||
matchers: {
|
||||
@ -108,6 +151,9 @@ describe('configurePreview', () => {
|
||||
expect(previewConfigPath).toEqual('./.storybook/preview.ts');
|
||||
expect(previewConfigContent).toMatchInlineSnapshot(`
|
||||
"export const parameters = {
|
||||
backgrounds: {
|
||||
default: 'light',
|
||||
},
|
||||
actions: { argTypesRegex: \\"^on[A-Z].*\\" },
|
||||
controls: {
|
||||
matchers: {
|
||||
@ -150,6 +196,9 @@ describe('configurePreview', () => {
|
||||
import docJson from \\"../documentation.json\\";
|
||||
setCompodocJson(docJson);
|
||||
export const parameters = {
|
||||
backgrounds: {
|
||||
default: 'light',
|
||||
},
|
||||
actions: { argTypesRegex: \\"^on[A-Z].*\\" },
|
||||
controls: {
|
||||
matchers: {
|
||||
|
||||
@ -30,6 +30,23 @@ interface ConfigurePreviewOptions {
|
||||
language: SupportedLanguage;
|
||||
}
|
||||
|
||||
const logger = console;
|
||||
|
||||
/**
|
||||
* We need to clean up the paths in case of pnp
|
||||
* input: "path.dirname(require.resolve(path.join('@storybook/react-webpack5', 'package.json')))"
|
||||
* output: "@storybook/react-webpack5"
|
||||
* */
|
||||
const sanitizeFramework = (framework: string) => {
|
||||
// extract either @storybook/<framework> or storybook-<framework>
|
||||
const matches = framework.match(/(@storybook\/\w+(?:-\w+)*)|(storybook-(\w+(?:-\w+)*))/g);
|
||||
if (!matches) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return matches[0];
|
||||
};
|
||||
|
||||
export async function configureMain({
|
||||
addons,
|
||||
extensions = ['js', 'jsx', 'ts', 'tsx'],
|
||||
@ -47,18 +64,27 @@ export async function configureMain({
|
||||
const isTypescript =
|
||||
language === SupportedLanguage.TYPESCRIPT || language === SupportedLanguage.TYPESCRIPT_LEGACY;
|
||||
|
||||
const mainConfigTemplate = dedent`<<import>>const config<<type>> = <<mainContents>>;
|
||||
export default config;`;
|
||||
let mainConfigTemplate = dedent`<<import>>const config<<type>> = <<mainContents>>;
|
||||
export default config;`;
|
||||
|
||||
const frameworkPackage = sanitizeFramework(custom.framework?.name);
|
||||
|
||||
if (!frameworkPackage) {
|
||||
mainConfigTemplate = mainConfigTemplate.replace('<<import>>', '').replace('<<type>>', '');
|
||||
logger.warn('Could not find framework package name');
|
||||
}
|
||||
|
||||
const mainJsContents = mainConfigTemplate
|
||||
.replace(
|
||||
'<<import>>',
|
||||
isTypescript
|
||||
? `import type { StorybookConfig } from '${custom.framework.name}';\n\n`
|
||||
: `/** @type { import('${custom.framework.name}').StorybookConfig } */\n`
|
||||
? `import type { StorybookConfig } from '${frameworkPackage}';\n\n`
|
||||
: `/** @type { import('${frameworkPackage}').StorybookConfig } */\n`
|
||||
)
|
||||
.replace('<<type>>', isTypescript ? ': StorybookConfig' : '')
|
||||
.replace('<<mainContents>>', JSON.stringify(config, null, 2));
|
||||
.replace('<<mainContents>>', JSON.stringify(config, null, 2))
|
||||
.replace(/['"]%%/g, '')
|
||||
.replace(/%%['"]/g, '');
|
||||
|
||||
await fse.writeFile(
|
||||
`./${storybookConfigFolder}/main.${isTypescript ? 'ts' : 'js'}`,
|
||||
@ -83,6 +109,9 @@ export async function configurePreview(options: ConfigurePreviewOptions) {
|
||||
const preview = dedent`
|
||||
${prefix}
|
||||
export const parameters = {
|
||||
backgrounds: {
|
||||
default: 'light',
|
||||
},
|
||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||
controls: {
|
||||
matchers: {
|
||||
|
||||
@ -29,6 +29,7 @@ import svelteGenerator from './generators/SVELTE';
|
||||
import qwikGenerator from './generators/QWIK';
|
||||
import svelteKitGenerator from './generators/SVELTEKIT';
|
||||
import raxGenerator from './generators/RAX';
|
||||
import solidGenerator from './generators/SOLID';
|
||||
import serverGenerator from './generators/SERVER';
|
||||
import type { JsPackageManager } from './js-package-manager';
|
||||
import { JsPackageManagerFactory, useNpmWarning } from './js-package-manager';
|
||||
@ -206,6 +207,11 @@ const installStorybook = <Project extends ProjectType>(
|
||||
paddedLog('For more information, please see https://nx.dev/packages/storybook');
|
||||
return Promise.reject();
|
||||
|
||||
case ProjectType.SOLID:
|
||||
return solidGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "SolidJS" app\n')
|
||||
);
|
||||
|
||||
case ProjectType.UNSUPPORTED:
|
||||
paddedLog(`We detected a project type that we don't support yet.`);
|
||||
paddedLog(
|
||||
|
||||
@ -16,12 +16,20 @@ function eqMajor(versionRange: string, major: number) {
|
||||
}
|
||||
|
||||
/** A list of all frameworks that are supported, but use a package outside the storybook monorepo */
|
||||
export const externalFrameworks: { name: SupportedFrameworks; packageName: string }[] = [
|
||||
export type ExternalFramework = {
|
||||
name: SupportedFrameworks;
|
||||
packageName?: string;
|
||||
frameworks?: string[];
|
||||
renderer?: string;
|
||||
};
|
||||
|
||||
export const externalFrameworks: ExternalFramework[] = [
|
||||
{ name: 'qwik', packageName: 'storybook-framework-qwik' },
|
||||
{ name: 'solid', frameworks: ['storybook-solidjs-vite'], renderer: 'storybook-solidjs' },
|
||||
];
|
||||
|
||||
// Should match @storybook/<framework>
|
||||
export type SupportedFrameworks = 'nextjs' | 'angular' | 'sveltekit' | 'qwik';
|
||||
export type SupportedFrameworks = 'nextjs' | 'angular' | 'sveltekit' | 'qwik' | 'solid';
|
||||
|
||||
// Should match @storybook/<renderer>
|
||||
export type SupportedRenderers =
|
||||
@ -42,7 +50,8 @@ export type SupportedRenderers =
|
||||
| 'aurelia'
|
||||
| 'html'
|
||||
| 'web-components'
|
||||
| 'server';
|
||||
| 'server'
|
||||
| 'solid';
|
||||
|
||||
export const SUPPORTED_RENDERERS: SupportedRenderers[] = [
|
||||
'react',
|
||||
@ -60,6 +69,7 @@ export const SUPPORTED_RENDERERS: SupportedRenderers[] = [
|
||||
'qwik',
|
||||
'rax',
|
||||
'aurelia',
|
||||
'solid',
|
||||
];
|
||||
|
||||
export enum ProjectType {
|
||||
@ -90,6 +100,7 @@ export enum ProjectType {
|
||||
AURELIA = 'AURELIA',
|
||||
SERVER = 'SERVER',
|
||||
NX = 'NX',
|
||||
SOLID = 'SOLID',
|
||||
}
|
||||
|
||||
export enum CoreBuilder {
|
||||
@ -285,6 +296,13 @@ export const supportedTemplates: TemplateConfiguration[] = [
|
||||
return dependencies.every(Boolean);
|
||||
},
|
||||
},
|
||||
{
|
||||
preset: ProjectType.SOLID,
|
||||
dependencies: ['solid-js'],
|
||||
matcherFunction: ({ dependencies }) => {
|
||||
return dependencies.every(Boolean);
|
||||
},
|
||||
},
|
||||
// DO NOT MOVE ANY TEMPLATES BELOW THIS LINE
|
||||
// React is part of every Template, after Storybook is initialized once
|
||||
{
|
||||
|
||||
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