mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 23:21:15 +08:00
Merge remote-tracking branch 'upstream/next' into solid-cli-integration
This commit is contained in:
Mauricio Rivera
commit
3ecd83b1e6
4
.github/PULL_REQUEST_TEMPLATE.md
vendored
4
.github/PULL_REQUEST_TEMPLATE.md
vendored
@ -1,6 +1,6 @@
|
||||
Issue: #
|
||||
Closes #
|
||||
|
||||
<!-- Thank you for contributing to Storybook! If your PR is related to an issue, provide the number(s) above, e.g. #1000, #1001 -->
|
||||
<!-- Thank you for contributing to Storybook! If your PR is related to an issue, provide the number(s) above; if it resolves multiple issues, be sure to break them up (e.g. "closes #1000, closes #1001"). -->
|
||||
|
||||
## What I did
|
||||
|
||||
|
||||
83
.github/renovate.json5
vendored
83
.github/renovate.json5
vendored
@ -1,83 +0,0 @@
|
||||
{
|
||||
$schema: 'https://docs.renovatebot.com/renovate-schema.json',
|
||||
extends: ['config:base', 'group:allNonMajor'],
|
||||
prHourlyLimit: 1,
|
||||
prConcurrentLimit: 1,
|
||||
// Custom ignore paths to include our `examples/` directory
|
||||
ignorePaths: [
|
||||
'**/node_modules/**',
|
||||
'**/bower_components/**',
|
||||
'**/vendor/**',
|
||||
'**/__tests__/**',
|
||||
'**/test/**',
|
||||
'**/tests/**',
|
||||
'**/__fixtures__/**',
|
||||
],
|
||||
enabledManagers: ['npm'],
|
||||
// Ignore release notes for non-breaking changes
|
||||
fetchReleaseNotes: false,
|
||||
// Always bump minor/patch to latest
|
||||
rangeStrategy: 'bump',
|
||||
major: {
|
||||
// Replace ranges when there is a major
|
||||
rangeStrategy: 'replace',
|
||||
// Get us the release notes for breaking changes
|
||||
fetchReleaseNotes: true,
|
||||
},
|
||||
packageRules: [
|
||||
// Leave peerDependencies and engines alone
|
||||
{
|
||||
depTypeList: ['peerDependencies', 'engines'],
|
||||
enabled: false,
|
||||
},
|
||||
// Handle patch updates under 0.1.0 as potentially breaking
|
||||
// Workaround for https://github.com/renovatebot/renovate/issues/3588
|
||||
{
|
||||
managers: ['npm'],
|
||||
matchCurrentVersion: '<0.1.0',
|
||||
rangeStrategy: 'replace',
|
||||
groupName: 'maybe breaking patch updates',
|
||||
groupSlug: 'maybe-breaking-patch',
|
||||
// Get us the release notes for potentially breaking changes
|
||||
fetchReleaseNotes: true,
|
||||
},
|
||||
// Handle minor updates under 1.0.0 as potentially breaking
|
||||
// Workaround for https://github.com/renovatebot/renovate/issues/3588
|
||||
{
|
||||
managers: ['npm'],
|
||||
matchCurrentVersion: '<1.0.0 >=0.1.0',
|
||||
minor: {
|
||||
// FIXME: "rangeStrategy": "replace",
|
||||
groupName: 'maybe breaking minor updates',
|
||||
groupSlug: 'maybe-breaking-minor',
|
||||
// Get us the release notes for potentially breaking changes
|
||||
fetchReleaseNotes: true,
|
||||
},
|
||||
},
|
||||
// Group Storybook's linter configs together
|
||||
{
|
||||
packageNames: ['@storybook/eslint-config-storybook', '@storybook/linter-config'],
|
||||
groupName: 'storybook linting',
|
||||
},
|
||||
// Group Puppeteer packages together
|
||||
{
|
||||
packagePatterns: ['^puppeteer', '^@types/puppeteer'],
|
||||
groupName: 'puppeteer',
|
||||
},
|
||||
// Group Acorn packages together
|
||||
{
|
||||
packagePatterns: ['^acorn'],
|
||||
groupName: 'acorn',
|
||||
},
|
||||
// Group React packages together
|
||||
{
|
||||
packageNames: ['react', '@types/react', 'react-dom', '@types/react-dom'],
|
||||
groupName: 'react',
|
||||
},
|
||||
],
|
||||
// Simplifies the PR body
|
||||
prBodyTemplate: '{{{table}}}{{{notes}}}{{{changelogs}}}',
|
||||
prBodyColumns: ['Package', 'Change'],
|
||||
// https://docs.renovatebot.com/merge-confidence/#enabling-and-disabling
|
||||
ignorePresets: ['github>whitesource/merge-confidence:beta'],
|
||||
}
|
||||
30
.github/stale.yml
vendored
30
.github/stale.yml
vendored
@ -1,30 +0,0 @@
|
||||
# Number of days of inactivity before an issue becomes stale
|
||||
daysUntilStale: 21
|
||||
# Number of days of inactivity before a stale issue is closed
|
||||
daysUntilClose: 30
|
||||
# Issues with these labels will never be considered stale
|
||||
exemptLabels:
|
||||
- linear
|
||||
- todo
|
||||
- ready
|
||||
- 'in progress'
|
||||
- 'do not merge'
|
||||
- 'needs review'
|
||||
- 'high priority'
|
||||
- 'good first issue'
|
||||
|
||||
# Label to use when marking an issue as stale
|
||||
staleLabel: inactive
|
||||
# Comment to post when marking an issue as stale. Set to `false` to disable
|
||||
markComment: >
|
||||
Hi everyone! Seems like there hasn't been much going on in this issue lately.
|
||||
If there are still questions, comments, or bugs, please feel free to continue
|
||||
the discussion. Unfortunately, we don't have time to get to every issue. We
|
||||
are always open to contributions so please send us a pull request if you would
|
||||
like to help. Inactive issues will be closed after 30 days. Thanks!
|
||||
# Comment to post when closing a stale issue. Set to `false` to disable
|
||||
closeComment: >
|
||||
Hey there, it's me again! I am going close this issue to help our maintainers
|
||||
focus on the current development roadmap instead. If the issue mentioned is
|
||||
still a concern, please open a new ticket and mention this old one. Cheers
|
||||
and thanks for using Storybook!
|
||||
2
.github/workflows/danger-js.yml
vendored
2
.github/workflows/danger-js.yml
vendored
@ -17,4 +17,4 @@ jobs:
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
with:
|
||||
args: --dangerfile .ci/danger/dangerfile.ts
|
||||
args: --dangerfile scripts/dangerfile.ts
|
||||
|
||||
22
.gitignore
vendored
22
.gitignore
vendored
@ -27,3 +27,25 @@ test-results
|
||||
# test-storybooks
|
||||
test-storybooks/ember-cli/ember-output
|
||||
test-storybooks/angular-cli/addon-jest.testresults.json
|
||||
|
||||
|
||||
npm-shrinkwrap.json
|
||||
.tern-port
|
||||
.parcel-cache
|
||||
coverage/
|
||||
*.lerna_backup
|
||||
/**/LICENSE
|
||||
code/docs/public
|
||||
package-lock.json
|
||||
.nvmrc
|
||||
storybook-static
|
||||
.jest-test-results.json
|
||||
*.jar
|
||||
/false
|
||||
/addons/docs/common/config-*
|
||||
tsconfig.tsbuildinfo
|
||||
|
||||
code/test-results/
|
||||
code/playwright-results/
|
||||
code/playwright-report/
|
||||
code/playwright/.cache/
|
||||
|
||||
113
.spelling
113
.spelling
@ -4,82 +4,57 @@
|
||||
# one word per line, to define a file override use ' - filename'
|
||||
# where filename is relative to this configuration file
|
||||
addon
|
||||
1
|
||||
vue
|
||||
svelte
|
||||
webcomponents
|
||||
aurelia
|
||||
iframe
|
||||
webpack
|
||||
addons
|
||||
styleguide-type
|
||||
styleguides
|
||||
angularjs
|
||||
api
|
||||
github
|
||||
apollo
|
||||
aurelia
|
||||
bundlers
|
||||
center
|
||||
centered
|
||||
cleanup
|
||||
codemod
|
||||
codemods
|
||||
CommonJS
|
||||
config
|
||||
cra
|
||||
PRs
|
||||
cleanup
|
||||
2
|
||||
ES2016
|
||||
prerelease
|
||||
rc
|
||||
npm
|
||||
apollo
|
||||
codemod
|
||||
storyshots
|
||||
graphql
|
||||
lerna
|
||||
eslint
|
||||
js
|
||||
CommonJS
|
||||
IO
|
||||
reflow
|
||||
Node.js.
|
||||
dialog
|
||||
10
|
||||
unisolated
|
||||
3
|
||||
13
|
||||
Browserify
|
||||
bundlers
|
||||
2013
|
||||
centered
|
||||
center
|
||||
GraphiQL
|
||||
graphiql
|
||||
url
|
||||
javascript
|
||||
storyshots'
|
||||
storybook.js.org
|
||||
CRNA
|
||||
postmessage
|
||||
websocket
|
||||
dialog
|
||||
ES2016
|
||||
eslint
|
||||
EventEmitter
|
||||
codemods
|
||||
jscodeshift
|
||||
npm3
|
||||
github
|
||||
GraphiQL
|
||||
graphql
|
||||
HMR
|
||||
Redux
|
||||
storybook-ui
|
||||
react-komposer
|
||||
serializable
|
||||
params
|
||||
README.md
|
||||
storybook.js.org
|
||||
YuzuJS
|
||||
setImmediate
|
||||
Malte
|
||||
Katić
|
||||
Domenic
|
||||
Kowal
|
||||
Zakas
|
||||
Gruber
|
||||
julian
|
||||
juliangruber.com
|
||||
Schlueter
|
||||
iframe
|
||||
IO
|
||||
javascript
|
||||
js
|
||||
jscodeshift
|
||||
lerna
|
||||
linkTo
|
||||
Node.js
|
||||
npm
|
||||
onStory
|
||||
params
|
||||
postmessage
|
||||
prerelease
|
||||
PRs
|
||||
rc
|
||||
README.md
|
||||
serializable
|
||||
setOptions
|
||||
setStories
|
||||
onStory
|
||||
storybook-ui
|
||||
storybook.js.org
|
||||
storyshots
|
||||
storyshots'
|
||||
styleguide-type
|
||||
styleguides
|
||||
svelte
|
||||
unisolated
|
||||
url
|
||||
vue
|
||||
webcomponents
|
||||
webpack
|
||||
websocket
|
||||
|
||||
20
.vscode/launch.json
vendored
20
.vscode/launch.json
vendored
@ -3,23 +3,5 @@
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "cli html",
|
||||
"cwd": "${workspaceFolder}/code/lib/cli/stories",
|
||||
"runtimeArgs": [
|
||||
"--inspect-brk",
|
||||
"${workspaceFolder}/code/lib/cli/bin/index.js",
|
||||
"init",
|
||||
"--type",
|
||||
"html"
|
||||
],
|
||||
"port": 9229,
|
||||
"skipFiles": [
|
||||
"<node_internals>/**"
|
||||
]
|
||||
}
|
||||
]
|
||||
"configurations": []
|
||||
}
|
||||
100
CHANGELOG.md
100
CHANGELOG.md
@ -1,3 +1,103 @@
|
||||
## 7.0.0-beta.43 (February 4, 2023)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Core: Fix globs on windows [#20929](https://github.com/storybooks/storybook/pull/20929)
|
||||
- Revert addon-docs: update story index generator [#20809](https://github.com/storybooks/storybook/pull/20809)
|
||||
|
||||
## 7.0.0-beta.42 (February 4, 2023)
|
||||
|
||||
#### Features
|
||||
|
||||
- CLI: Add type annotations in javascript main config files [#20887](https://github.com/storybooks/storybook/pull/20887)
|
||||
- UI: Tab Improvements [#20783](https://github.com/storybooks/storybook/pull/20783)
|
||||
|
||||
#### Build
|
||||
|
||||
- Build: fix next [#20924](https://github.com/storybooks/storybook/pull/20924)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
- Upgrade jscodeshift to 0.14.0 [#20925](https://github.com/storybooks/storybook/pull/20925)
|
||||
- Upgrade glob to 8.1.0 [#20927](https://github.com/storybooks/storybook/pull/20927)
|
||||
|
||||
## 7.0.0-beta.41 (February 3, 2023)
|
||||
|
||||
#### Features
|
||||
|
||||
- UI: Add nunito sans font [#20846](https://github.com/storybooks/storybook/pull/20846)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Vite/Addon-docs: Fix customization of MDX plugins [#20116](https://github.com/storybooks/storybook/pull/20116)
|
||||
- Angular: Support NoopAnimationsModule [#20868](https://github.com/storybooks/storybook/pull/20868)
|
||||
- Core: Fix index error handling [#20906](https://github.com/storybooks/storybook/pull/20906)
|
||||
- Outline: Fix outline initial state [#20818](https://github.com/storybooks/storybook/pull/20818)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- CLI: Remove the deprecated `--no-manager-cache` flag [#20895](https://github.com/storybooks/storybook/pull/20895)
|
||||
|
||||
#### Build
|
||||
|
||||
- Build: Change `rootDir` in TS plugin [#20911](https://github.com/storybooks/storybook/pull/20911)
|
||||
- Build: Improve task log and error messages for event log [#20902](https://github.com/storybooks/storybook/pull/20902)
|
||||
- Build: minor fixes [#20894](https://github.com/storybooks/storybook/pull/20894)
|
||||
|
||||
## 7.0.0-beta.40 (February 2, 2023)
|
||||
|
||||
#### Features
|
||||
|
||||
- Addo-docs: Turn on autodocs for CSF with attached meta [#20867](https://github.com/storybooks/storybook/pull/20867)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Vue3: Fix args losing reactivity when using decorators [#20854](https://github.com/storybooks/storybook/pull/20854)
|
||||
- Doc Blocks: Fix styling and parameter bugs [#20803](https://github.com/storybooks/storybook/pull/20803)
|
||||
- Addon-docs: Export controls from doc blocks [#20806](https://github.com/storybooks/storybook/pull/20806)
|
||||
- Webpack: Support builder options from framework [#20842](https://github.com/storybooks/storybook/pull/20842)
|
||||
|
||||
## 7.0.0-beta.39 (February 1, 2023)
|
||||
|
||||
#### Features
|
||||
|
||||
- Core: return address of dev server from buildDevStandalone [#20820](https://github.com/storybooks/storybook/pull/20820)
|
||||
- Addons: Fix env variables not available inside addons [#20834](https://github.com/storybooks/storybook/pull/20834)
|
||||
- CLI: Add warning when main config does not use default exports [#20802](https://github.com/storybooks/storybook/pull/20802)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- SvelteKit: Disable failing `vite-plugin-sveltekit-guard` [#20870](https://github.com/storybooks/storybook/pull/20870)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Core: Remove core-js as a dependency [#20833](https://github.com/storybooks/storybook/pull/20833)
|
||||
|
||||
#### Build
|
||||
|
||||
- Build: cleanup CI config [#20853](https://github.com/storybooks/storybook/pull/20853)
|
||||
- Change forceReRender story to forceRemount [#20752](https://github.com/storybooks/storybook/pull/20752)
|
||||
|
||||
## 7.0.0-beta.38 (January 31, 2023)
|
||||
|
||||
#### Features
|
||||
|
||||
- CLI: Generate main config with default exports [#20797](https://github.com/storybooks/storybook/pull/20797)
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- CLI: Only add dependencies on sb init if they do not exist [#20811](https://github.com/storybooks/storybook/pull/20811)
|
||||
- CLI: Install prerelease of @storybook/testing-library in CLI starters [#20819](https://github.com/storybooks/storybook/pull/20819)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
- Update lazy-universal-dotenv & regen lockfile [#20832](https://github.com/storybooks/storybook/pull/20832)
|
||||
- Instrumenter: Remove unused core-js dependency [#20831](https://github.com/storybooks/storybook/pull/20831)
|
||||
|
||||
## 7.0.0-beta.37 (January 31, 2023)
|
||||
|
||||
Failed publish
|
||||
|
||||
## 7.0.0-beta.36 (January 28, 2023)
|
||||
|
||||
#### Features
|
||||
|
||||
54
MIGRATION.md
54
MIGRATION.md
@ -2,7 +2,9 @@
|
||||
|
||||
- [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
|
||||
- [7.0 breaking changes](#70-breaking-changes)
|
||||
- [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
|
||||
- [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below)
|
||||
- [ESM format in Main.js](#esm-format-in-mainjs)
|
||||
- [Modern browser support](#modern-browser-support)
|
||||
- [React peer dependencies required](#react-peer-dependencies-required)
|
||||
- [start-storybook / build-storybook binaries removed](#start-storybook--build-storybook-binaries-removed)
|
||||
@ -23,7 +25,7 @@
|
||||
- [Addon-a11y: Removed deprecated withA11y decorator](#addon-a11y-removed-deprecated-witha11y-decorator)
|
||||
- [Vite](#vite)
|
||||
- [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically)
|
||||
- [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
|
||||
- [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
|
||||
- [Webpack](#webpack)
|
||||
- [Webpack4 support discontinued](#webpack4-support-discontinued)
|
||||
- [Postcss removed](#postcss-removed)
|
||||
@ -49,7 +51,7 @@
|
||||
- [Description block, `parameters.notes` and `parameters.info`](#description-block-parametersnotes-and-parametersinfo)
|
||||
- [Story block](#story-block)
|
||||
- [Source block](#source-block)
|
||||
- [Canvas block](#canvas-block)
|
||||
- [Canvas block](#canvas-block)
|
||||
- [ArgsTable block](#argstable-block)
|
||||
- [Configuring Autodocs](#configuring-autodocs)
|
||||
- [MDX2 upgrade](#mdx2-upgrade)
|
||||
@ -62,7 +64,7 @@
|
||||
- [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration)
|
||||
- [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
|
||||
- [Autoplay in docs](#autoplay-in-docs)
|
||||
- [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
|
||||
- [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
|
||||
- [7.0 Deprecations and default changes](#70-deprecations-and-default-changes)
|
||||
- [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
|
||||
- [`Story` type deprecated](#story-type-deprecated)
|
||||
@ -290,6 +292,48 @@ For avoiding that, this change passes the mapped args instead of raw args at `re
|
||||
|
||||
Storybook 7.0 requires **Node 16** or above. If you are using an older version of Node, you will need to upgrade or keep using Storybook 6 in the meantime.
|
||||
|
||||
#### ESM format in Main.js
|
||||
|
||||
Storybook 7.0 supports ESM in `.storybook/main.js`, and the configurations can be part of a default export. The default export will be the recommended way going forward.
|
||||
|
||||
If your main.js file looks like this:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||
framework: { name: '@storybook/react-vite' },
|
||||
};
|
||||
```
|
||||
|
||||
Or like this:
|
||||
|
||||
```js
|
||||
export const stories = ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'];
|
||||
export const framework = { name: '@storybook/react-vite' };
|
||||
```
|
||||
|
||||
Please migrate them to be default exported instead:
|
||||
|
||||
```js
|
||||
const config = {
|
||||
stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||
framework: { name: '@storybook/react-vite' },
|
||||
};
|
||||
export default config;
|
||||
```
|
||||
|
||||
For Typescript users, we introduced types for that default export, so you can import it in your main.ts file. The `StorybookConfig` type will come from the Storybook package for the framework you are using, which relates to the package in the "framework" field you have in your main.ts file. For example, if you are using React Vite, you will import it from `@storybook/react-vite`:
|
||||
|
||||
```ts
|
||||
import { StorybookConfig } from '@storybook/react-vite';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||
framework: { name: '@storybook/react-vite' },
|
||||
};
|
||||
export default config;
|
||||
```
|
||||
|
||||
#### Modern browser support
|
||||
|
||||
Starting in Storybook 7.0, Storybook will no longer support IE11, amongst other legacy browser versions.
|
||||
@ -826,7 +870,7 @@ import * as ComponentStories from './some-component.stories';
|
||||
<Story of={ComponentStories.Primary} />
|
||||
```
|
||||
|
||||
You can create as many docs entries as you like for a given component. Note that if you attach a docs entry to a component it will replace the automatically generated entry from Autodocs.
|
||||
You can create as many docs entries as you like for a given component. By default the docs entry will be named the same as the `.mdx` file (e.g. `Introduction.mdx` becomes `Introduction`). If the docs file is named the same as the component (e.g. `Button.mdx`, it will use the default autodocs name (`"Docs"`) and override autodocs).
|
||||
|
||||
By default docs entries are listed first for the component. You can sort them using story sorting.
|
||||
|
||||
@ -912,7 +956,7 @@ The source block now references a single story, the component, or a CSF file its
|
||||
|
||||
Referencing stories by `id="xyz--abc"` is deprecated and should be replaced with `of={}` as above. Referencing multiple stories via `ids={["xyz--abc"]}` is now deprecated and should be avoided (instead use two source blocks).
|
||||
|
||||
#### Canvas block
|
||||
##### Canvas block
|
||||
|
||||
The Canvas block follows the same changes as [the Story block described above](#story-block).
|
||||
|
||||
|
||||
43
code/.gitignore
vendored
43
code/.gitignore
vendored
@ -1,43 +0,0 @@
|
||||
node_modules
|
||||
*.log
|
||||
.idea
|
||||
*.iml
|
||||
*.sw*
|
||||
!.swcrc
|
||||
npm-shrinkwrap.json
|
||||
dist
|
||||
.tern-port
|
||||
*.DS_Store
|
||||
.cache
|
||||
.parcel-cache
|
||||
coverage/
|
||||
*.lerna_backup
|
||||
build
|
||||
/**/LICENSE
|
||||
docs/public
|
||||
package-lock.json
|
||||
.nvmrc
|
||||
storybook-static
|
||||
.jest-test-results.json
|
||||
lib/*.jar
|
||||
/false
|
||||
/addons/docs/common/config-*
|
||||
built-storybooks
|
||||
.verdaccio-cache
|
||||
tsconfig.tsbuildinfo
|
||||
junit.xml
|
||||
.next
|
||||
|
||||
/test-results/
|
||||
/playwright-results/
|
||||
/playwright-report/
|
||||
/playwright/.cache/
|
||||
|
||||
|
||||
# Yarn stuff
|
||||
/**/.yarn/*
|
||||
!/**/.yarn/releases
|
||||
!/**/.yarn/plugins
|
||||
!/**/.yarn/sdks
|
||||
!/**/.yarn/versions
|
||||
/**/.pnp.*
|
||||
@ -17,7 +17,7 @@ $ yarn add @storybook/addon-a11y --dev
|
||||
Add this line to your `main.js` file (create this file inside your Storybook config directory if needed).
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: ['@storybook/addon-a11y'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -11,7 +11,7 @@
|
||||
"verify",
|
||||
"test"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/a11y",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/a11y",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -63,16 +63,16 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-highlight": "7.0.0-beta.36",
|
||||
"@storybook/channels": "7.0.0-beta.36",
|
||||
"@storybook/client-logger": "7.0.0-beta.36",
|
||||
"@storybook/components": "7.0.0-beta.36",
|
||||
"@storybook/core-events": "7.0.0-beta.36",
|
||||
"@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/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.36",
|
||||
"@storybook/preview-api": "7.0.0-beta.36",
|
||||
"@storybook/theming": "7.0.0-beta.36",
|
||||
"@storybook/types": "7.0.0-beta.36",
|
||||
"@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",
|
||||
"axe-core": "^4.2.0",
|
||||
"lodash": "^4.17.21",
|
||||
"react-resize-detector": "^7.1.2"
|
||||
@ -104,7 +104,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1",
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"storybook": {
|
||||
"displayName": "Accessibility",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",
|
||||
|
||||
@ -141,7 +141,7 @@ export const VisionSimulator = () => {
|
||||
});
|
||||
return <TooltipLinkList links={colorList} />;
|
||||
}}
|
||||
closeOnClick
|
||||
closeOnOutsideClick
|
||||
onDoubleClick={() => setFilter(null)}
|
||||
>
|
||||
<IconButton key="filter" active={!!filter} title="Vision simulator">
|
||||
|
||||
@ -17,7 +17,7 @@ npm i -D @storybook/addon-actions
|
||||
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: ['@storybook/addon-actions'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Get UI feedback when an action is performed on an interactive element",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
"essentials",
|
||||
"data-state"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/actions",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/actions",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -77,14 +77,14 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.36",
|
||||
"@storybook/components": "7.0.0-beta.36",
|
||||
"@storybook/core-events": "7.0.0-beta.36",
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/components": "7.0.0-beta.43",
|
||||
"@storybook/core-events": "7.0.0-beta.43",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.36",
|
||||
"@storybook/preview-api": "7.0.0-beta.36",
|
||||
"@storybook/theming": "7.0.0-beta.36",
|
||||
"@storybook/types": "7.0.0-beta.36",
|
||||
"@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",
|
||||
"dequal": "^2.0.2",
|
||||
"lodash": "^4.17.21",
|
||||
"polished": "^4.2.2",
|
||||
@ -121,7 +121,7 @@
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1",
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"storybook": {
|
||||
"displayName": "Actions",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -19,7 +19,7 @@ npm i -D @storybook/addon-backgrounds
|
||||
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: ['@storybook/addon-backgrounds'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -10,7 +10,7 @@
|
||||
"essentials",
|
||||
"design"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/backgrounds",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/backgrounds",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -76,14 +76,14 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.36",
|
||||
"@storybook/components": "7.0.0-beta.36",
|
||||
"@storybook/core-events": "7.0.0-beta.36",
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/components": "7.0.0-beta.43",
|
||||
"@storybook/core-events": "7.0.0-beta.43",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.36",
|
||||
"@storybook/preview-api": "7.0.0-beta.36",
|
||||
"@storybook/theming": "7.0.0-beta.36",
|
||||
"@storybook/types": "7.0.0-beta.36",
|
||||
"@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",
|
||||
"memoizerific": "^1.11.3",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
@ -112,7 +112,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1",
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"storybook": {
|
||||
"displayName": "Backgrounds",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
|
||||
|
||||
@ -117,7 +117,7 @@ export const BackgroundSelector: FC = memo(function BackgroundSelector() {
|
||||
<WithTooltip
|
||||
placement="top"
|
||||
trigger="click"
|
||||
closeOnClick
|
||||
closeOnOutsideClick
|
||||
tooltip={({ onHide }) => {
|
||||
return (
|
||||
<TooltipLinkList
|
||||
|
||||
@ -17,7 +17,7 @@ npm i -D @storybook/addon-controls
|
||||
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: ['@storybook/addon-controls'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Interact with component inputs dynamically in the Storybook UI",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -11,7 +11,7 @@
|
||||
"essentials",
|
||||
"data-state"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/addons/controls",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/controls",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -68,15 +68,15 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/blocks": "7.0.0-beta.36",
|
||||
"@storybook/client-logger": "7.0.0-beta.36",
|
||||
"@storybook/components": "7.0.0-beta.36",
|
||||
"@storybook/core-common": "7.0.0-beta.36",
|
||||
"@storybook/manager-api": "7.0.0-beta.36",
|
||||
"@storybook/node-logger": "7.0.0-beta.36",
|
||||
"@storybook/preview-api": "7.0.0-beta.36",
|
||||
"@storybook/theming": "7.0.0-beta.36",
|
||||
"@storybook/types": "7.0.0-beta.36",
|
||||
"@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",
|
||||
"lodash": "^4.17.21",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
@ -102,7 +102,7 @@
|
||||
],
|
||||
"platform": "browser"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1",
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"storybook": {
|
||||
"displayName": "Controls",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/hero.png" width="100%" />
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/docs/docs/media/hero.png" width="100%" />
|
||||
</center>
|
||||
|
||||
# Storybook Docs
|
||||
@ -33,7 +33,7 @@ When you [install Docs](#installation), every story gets a `DocsPage`. `DocsPage
|
||||
Click on the `Docs` tab to see it:
|
||||
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/docs-tab.png" width="100%" />
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/docs/docs/media/docs-tab.png" width="100%" />
|
||||
</center>
|
||||
|
||||
For more information on how it works, see the [`DocsPage` reference](https://github.com/storybookjs/storybook/blob/next/code/addons/docs/docs/docspage.md).
|
||||
@ -67,7 +67,7 @@ markdown documentation.
|
||||
And here's how that's rendered in Storybook:
|
||||
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/mdx-simple.png" width="100%" />
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/docs/docs/media/mdx-simple.png" width="100%" />
|
||||
</center>
|
||||
|
||||
For more information on `MDX`, see the [`MDX` reference](https://github.com/storybookjs/storybook/blob/next/code/addons/docs/docs/mdx.md).
|
||||
@ -99,9 +99,9 @@ yarn add -D react
|
||||
Then add the following to your `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
stories: [
|
||||
'../src/**/*.mdx)', // 👈 Add this, to match your project's structure
|
||||
'../src/**/*.mdx', // 👈 Add this, to match your project's structure
|
||||
'../src/**/*.stories.@(js|jsx|ts|tsx)',
|
||||
],
|
||||
addons: [
|
||||
@ -138,13 +138,14 @@ Add the following to your Jest configuration:
|
||||
The `addon-docs` preset has a few configuration options that can be used to configure its babel/webpack loading behavior. Here's an example of how to use the preset with options:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: [
|
||||
{
|
||||
name: '@storybook/addon-docs',
|
||||
options: {
|
||||
jsxOptions: {},
|
||||
csfPluginOptions: null,
|
||||
mdxPluginOptions: {},
|
||||
transcludeMarkdown: true,
|
||||
},
|
||||
},
|
||||
|
||||
@ -31,7 +31,7 @@ yarn add -D @storybook/addon-docs@next
|
||||
Then add the following to your `.storybook/main.js` exports:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: ['@storybook/addon-docs'],
|
||||
};
|
||||
```
|
||||
@ -135,9 +135,9 @@ yarn add -D react
|
||||
|
||||
Then update your `.storybook/main.js` to make sure you load MDX files:
|
||||
|
||||
```ts
|
||||
module.exports = {
|
||||
stories: ['../src/stories/**/*.stories.@(js|ts|mdx)'],
|
||||
```js
|
||||
export default {
|
||||
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ yarn add -D @storybook/addon-docs@next
|
||||
Then add the following to your `.storybook/main.js` addons:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: ['@storybook/addon-docs'],
|
||||
};
|
||||
```
|
||||
@ -43,7 +43,7 @@ yarn add -D react
|
||||
Then update your `.storybook/main.js` to make sure you load MDX files:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
stories: ['../src/stories/**/*.stories.@(js|mdx)'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -24,7 +24,7 @@ yarn add -D @storybook/addon-docs@next
|
||||
Then add the following to your `.storybook/main.js` addons:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: ['@storybook/addon-docs'],
|
||||
};
|
||||
```
|
||||
@ -87,7 +87,7 @@ yarn add -D react
|
||||
Then update your `.storybook/main.js` to make sure you load MDX files:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
stories: ['../src/stories/**/*.stories.@(js|mdx)'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -10,7 +10,7 @@
|
||||
"essentials",
|
||||
"organize"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/docs",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/docs",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -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.36",
|
||||
"@storybook/client-logger": "7.0.0-beta.36",
|
||||
"@storybook/components": "7.0.0-beta.36",
|
||||
"@storybook/csf-plugin": "7.0.0-beta.36",
|
||||
"@storybook/csf-tools": "7.0.0-beta.36",
|
||||
"@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/global": "^5.0.0",
|
||||
"@storybook/mdx2-csf": "next",
|
||||
"@storybook/node-logger": "7.0.0-beta.36",
|
||||
"@storybook/postinstall": "7.0.0-beta.36",
|
||||
"@storybook/preview-api": "7.0.0-beta.36",
|
||||
"@storybook/theming": "7.0.0-beta.36",
|
||||
"@storybook/types": "7.0.0-beta.36",
|
||||
"@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",
|
||||
"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": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1",
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"storybook": {
|
||||
"displayName": "Docs",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
|
||||
|
||||
@ -29,7 +29,7 @@ yarn add -D @storybook/addon-docs@next
|
||||
Then add the following to your `.storybook/main.js` list of `addons`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
// other settings
|
||||
addons: ['@storybook/addon-docs'];
|
||||
}
|
||||
@ -70,7 +70,7 @@ storiesOf('InfoButton', module)
|
||||
Then update your `.storybook/main.js` to make sure you load MDX files:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
stories: ['../src/stories/**/*.stories.@(js|mdx)'],
|
||||
};
|
||||
```
|
||||
@ -115,7 +115,7 @@ If you're using TypeScript, there are two different options for generating props
|
||||
You can add the following lines to your `.storybook/main.js` to switch between the two (or disable docgen):
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
typescript: {
|
||||
// also valid 'react-docgen-typescript' | false
|
||||
reactDocgen: 'react-docgen',
|
||||
|
||||
@ -5,7 +5,7 @@ import { dedent } from 'ts-dedent';
|
||||
|
||||
import type { IndexerOptions, StoryIndexer, DocsOptions, Options } from '@storybook/types';
|
||||
import type { CsfPluginOptions } from '@storybook/csf-plugin';
|
||||
import type { JSXOptions } from '@storybook/mdx2-csf';
|
||||
import type { JSXOptions, CompileOptions } from '@storybook/mdx2-csf';
|
||||
import { global } from '@storybook/global';
|
||||
import { loadCsf } from '@storybook/csf-tools';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
@ -28,6 +28,7 @@ async function webpack(
|
||||
sourceLoaderOptions: any;
|
||||
csfPluginOptions: CsfPluginOptions | null;
|
||||
jsxOptions?: JSXOptions;
|
||||
mdxPluginOptions?: CompileOptions;
|
||||
} /* & Parameters<
|
||||
typeof createCompiler
|
||||
>[0] */
|
||||
@ -42,13 +43,18 @@ async function webpack(
|
||||
sourceLoaderOptions = null,
|
||||
configureJsx,
|
||||
mdxBabelOptions,
|
||||
mdxPluginOptions = {},
|
||||
} = options;
|
||||
|
||||
const mdxLoaderOptions = await options.presets.apply('mdxLoaderOptions', {
|
||||
const mdxLoaderOptions: CompileOptions = await options.presets.apply('mdxLoaderOptions', {
|
||||
skipCsf: true,
|
||||
...mdxPluginOptions,
|
||||
mdxCompileOptions: {
|
||||
providerImportSource: '@storybook/addon-docs/mdx-react-shim',
|
||||
remarkPlugins: [remarkSlug, remarkExternalLinks],
|
||||
...mdxPluginOptions.mdxCompileOptions,
|
||||
remarkPlugins: [remarkSlug, remarkExternalLinks].concat(
|
||||
mdxPluginOptions?.mdxCompileOptions?.remarkPlugins ?? []
|
||||
),
|
||||
},
|
||||
jsxOptions,
|
||||
});
|
||||
|
||||
@ -3,7 +3,7 @@ import * as ButtonStories from './button.stories.ts';
|
||||
|
||||
<Meta of={ButtonStories} />
|
||||
|
||||
# Docs with of
|
||||
# Docs with of, but no name
|
||||
|
||||
hello docs
|
||||
|
||||
|
||||
12
code/addons/docs/template/stories/docs2/MetaOfNamed.mdx
vendored
Normal file
12
code/addons/docs/template/stories/docs2/MetaOfNamed.mdx
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
import { Meta, Story, Stories } from '@storybook/addon-docs';
|
||||
import * as ButtonStories from './button.stories.ts';
|
||||
|
||||
<Meta of={ButtonStories} name="Doc Name" />
|
||||
|
||||
# Docs with of, and name
|
||||
|
||||
hello docs
|
||||
|
||||
<Story of={ButtonStories.Basic} />
|
||||
|
||||
<Stories />
|
||||
@ -1,3 +1,3 @@
|
||||
# Docs with no title
|
||||
# Unattached docs with no title
|
||||
|
||||
hello docs
|
||||
|
||||
@ -2,6 +2,7 @@ import { global as globalThis } from '@storybook/global';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
tags: ['autodocs'],
|
||||
args: { onClick: () => console.log('clicked!') },
|
||||
parameters: {
|
||||
chromatic: { disable: true },
|
||||
|
||||
@ -29,7 +29,7 @@ yarn add -D @storybook/addon-docs@next
|
||||
Then add the following to your `.storybook/main.js` addons:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: ['@storybook/addon-docs'],
|
||||
};
|
||||
```
|
||||
@ -39,9 +39,9 @@ module.exports = {
|
||||
The `addon-docs` preset for Vue has a configuration option that can be used to configure [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), a tool which extracts information from Vue components. Here's an example of how to use the preset with options for Vue app:
|
||||
|
||||
```js
|
||||
const path = require('path');
|
||||
import * as path from 'path';
|
||||
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: [
|
||||
{
|
||||
name: '@storybook/addon-docs',
|
||||
@ -102,7 +102,7 @@ yarn add -D react
|
||||
Then update your `.storybook/main.js` to make sure you load MDX files:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
stories: ['../src/stories/**/*.stories.@(js|mdx)'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -29,7 +29,7 @@ yarn add -D @storybook/addon-docs@next
|
||||
Then add the following to your `.storybook/main.js` addons:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: ['@storybook/addon-docs'],
|
||||
};
|
||||
```
|
||||
@ -39,9 +39,9 @@ module.exports = {
|
||||
The `addon-docs` preset for Vue has a configuration option that can be used to configure [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), a tool which extracts information from Vue components. Here's an example of how to use the preset with options for Vue app:
|
||||
|
||||
```js
|
||||
const path = require('path');
|
||||
import * as path from 'path';
|
||||
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: [
|
||||
{
|
||||
name: '@storybook/addon-docs',
|
||||
@ -102,7 +102,7 @@ yarn add -D react
|
||||
Then update your `.storybook/main.js` to make sure you load MDX files:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
stories: ['../src/stories/**/*.stories.@(js|mdx)'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -28,7 +28,7 @@ npm install --save-dev @storybook/addon-essentials
|
||||
And then add the following line to your `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: ['@storybook/addon-essentials'],
|
||||
};
|
||||
```
|
||||
@ -44,7 +44,7 @@ If you want to reconfigure an addon, simply install that addon per that addon's
|
||||
You can disable any of Essential's addons using the following configuration scheme in `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: [{
|
||||
name: '@storybook/addon-essentials',
|
||||
options: {
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"essentials",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/essentials",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/essentials",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -119,23 +119,23 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "7.0.0-beta.36",
|
||||
"@storybook/addon-backgrounds": "7.0.0-beta.36",
|
||||
"@storybook/addon-controls": "7.0.0-beta.36",
|
||||
"@storybook/addon-docs": "7.0.0-beta.36",
|
||||
"@storybook/addon-highlight": "7.0.0-beta.36",
|
||||
"@storybook/addon-measure": "7.0.0-beta.36",
|
||||
"@storybook/addon-outline": "7.0.0-beta.36",
|
||||
"@storybook/addon-toolbars": "7.0.0-beta.36",
|
||||
"@storybook/addon-viewport": "7.0.0-beta.36",
|
||||
"@storybook/core-common": "7.0.0-beta.36",
|
||||
"@storybook/manager-api": "7.0.0-beta.36",
|
||||
"@storybook/node-logger": "7.0.0-beta.36",
|
||||
"@storybook/preview-api": "7.0.0-beta.36",
|
||||
"@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",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/vue": "7.0.0-beta.36",
|
||||
"@storybook/vue": "7.0.0-beta.43",
|
||||
"typescript": "^4.9.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
@ -166,5 +166,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1"
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@ npm i -D @storybook/addon-highlight
|
||||
Add `"@storybook/addon-highlight"` to the addons array in your `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: ['@storybook/addon-highlight'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-highlight",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Highlight DOM nodes within your stories",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -8,7 +8,7 @@
|
||||
"style",
|
||||
"appearance"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/highlight",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/highlight",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -61,9 +61,9 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core-events": "7.0.0-beta.36",
|
||||
"@storybook/core-events": "7.0.0-beta.43",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/preview-api": "7.0.0-beta.36"
|
||||
"@storybook/preview-api": "7.0.0-beta.43"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/webpack-env": "^1.16.0",
|
||||
@ -78,7 +78,7 @@
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1",
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"sbmodern": "dist/modern/index.js",
|
||||
"storybook": {
|
||||
"displayName": "Highlight",
|
||||
|
||||
@ -15,7 +15,7 @@ yarn add -D @storybook/addon-interactions @storybook/jest @storybook/testing-lib
|
||||
within `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: ['@storybook/addon-interactions'],
|
||||
};
|
||||
```
|
||||
@ -28,7 +28,7 @@ Step debugging features are experimental and disabled by default. To enable them
|
||||
|
||||
```js
|
||||
// main.js
|
||||
module.exports = {
|
||||
export default {
|
||||
features: {
|
||||
interactionsDebugger: true,
|
||||
},
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
{
|
||||
"name": "@storybook/addon-interactions",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Automate, test and debug user interactions",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
"data-state",
|
||||
"test"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/interactions",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/interactions",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -72,16 +72,16 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.36",
|
||||
"@storybook/components": "7.0.0-beta.36",
|
||||
"@storybook/core-common": "7.0.0-beta.36",
|
||||
"@storybook/core-events": "7.0.0-beta.36",
|
||||
"@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/global": "^5.0.0",
|
||||
"@storybook/instrumenter": "7.0.0-beta.36",
|
||||
"@storybook/manager-api": "7.0.0-beta.36",
|
||||
"@storybook/preview-api": "7.0.0-beta.36",
|
||||
"@storybook/theming": "7.0.0-beta.36",
|
||||
"@storybook/types": "7.0.0-beta.36",
|
||||
"@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",
|
||||
"jest-mock": "^27.0.6",
|
||||
"polished": "^4.2.2",
|
||||
"ts-dedent": "^2.2.0"
|
||||
@ -118,7 +118,7 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1",
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"storybook": {
|
||||
"displayName": "Interactions",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -23,7 +23,7 @@ Or if you're using yarn as a package manager:
|
||||
Register the addon in your [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: ['@storybook/addon-jest'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -12,7 +12,7 @@
|
||||
"unit-testing",
|
||||
"test"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/jest",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/jest",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -70,13 +70,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.36",
|
||||
"@storybook/components": "7.0.0-beta.36",
|
||||
"@storybook/core-events": "7.0.0-beta.36",
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/components": "7.0.0-beta.43",
|
||||
"@storybook/core-events": "7.0.0-beta.43",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.36",
|
||||
"@storybook/preview-api": "7.0.0-beta.36",
|
||||
"@storybook/theming": "7.0.0-beta.36",
|
||||
"@storybook/manager-api": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/theming": "7.0.0-beta.43",
|
||||
"react-resize-detector": "^7.1.2",
|
||||
"upath": "^1.2.0"
|
||||
},
|
||||
@ -105,7 +105,7 @@
|
||||
],
|
||||
"platform": "browser"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1",
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"storybook": {
|
||||
"displayName": "Jest",
|
||||
"icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",
|
||||
|
||||
@ -15,7 +15,7 @@ yarn add -D @storybook/addon-links
|
||||
within `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: ['@storybook/addon-links'],
|
||||
};
|
||||
```
|
||||
@ -144,4 +144,4 @@ It accepts all the props the `a` element does, plus `story` and `kind`. It the `
|
||||
</LinkTo>
|
||||
```
|
||||
|
||||
To implement such a component for another framework, you need to add special handling for `click` event on native `a` element. See [`RoutedLink` sources](https://github.com/storybookjs/storybook/blob/main/addons/links/src/react/components/RoutedLink.tsx) for reference.
|
||||
To implement such a component for another framework, you need to add special handling for `click` event on native `a` element. See [`RoutedLink` sources](https://github.com/storybookjs/storybook/blob/next/code/addons/links/src/react/components/RoutedLink.tsx) for reference.
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Link stories together to build demos and prototypes with your UI components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook",
|
||||
"organize"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/links",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/links",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -80,14 +80,14 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.36",
|
||||
"@storybook/core-events": "7.0.0-beta.36",
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/core-events": "7.0.0-beta.43",
|
||||
"@storybook/csf": "next",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.36",
|
||||
"@storybook/preview-api": "7.0.0-beta.36",
|
||||
"@storybook/router": "7.0.0-beta.36",
|
||||
"@storybook/types": "7.0.0-beta.36",
|
||||
"@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",
|
||||
"prop-types": "^15.7.2",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
@ -119,7 +119,7 @@
|
||||
],
|
||||
"post": "./scripts/fix-preview-api-reference.ts"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1",
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"storybook": {
|
||||
"displayName": "Links",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
|
||||
|
||||
@ -21,7 +21,7 @@ npm i -D @storybook/addon-measure
|
||||
Add `"@storybook/addon-measure"` to the addons array in your `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: ['@storybook/addon-measure'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-measure",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Inspect layouts by visualizing the box model",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -9,7 +9,7 @@
|
||||
"CSS",
|
||||
"design"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/measure",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/measure",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -75,13 +75,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.36",
|
||||
"@storybook/components": "7.0.0-beta.36",
|
||||
"@storybook/core-events": "7.0.0-beta.36",
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/components": "7.0.0-beta.43",
|
||||
"@storybook/core-events": "7.0.0-beta.43",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.36",
|
||||
"@storybook/preview-api": "7.0.0-beta.36",
|
||||
"@storybook/types": "7.0.0-beta.36"
|
||||
"@storybook/manager-api": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/types": "7.0.0-beta.43"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "~4.9.3"
|
||||
@ -108,7 +108,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1",
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"storybook": {
|
||||
"displayName": "Measure",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -15,7 +15,7 @@ npm i -D @storybook/addon-outline
|
||||
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: ['@storybook/addon-outline'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-outline",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Outline all elements with CSS to help with layout placement and alignment",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
@ -12,7 +12,7 @@
|
||||
"storybook-addon",
|
||||
"style"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/outline",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/outline",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -78,13 +78,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.36",
|
||||
"@storybook/components": "7.0.0-beta.36",
|
||||
"@storybook/core-events": "7.0.0-beta.36",
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/components": "7.0.0-beta.43",
|
||||
"@storybook/core-events": "7.0.0-beta.43",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.36",
|
||||
"@storybook/preview-api": "7.0.0-beta.36",
|
||||
"@storybook/types": "7.0.0-beta.36",
|
||||
"@storybook/manager-api": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/types": "7.0.0-beta.43",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -112,7 +112,7 @@
|
||||
"./src/preview.tsx"
|
||||
]
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1",
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"storybook": {
|
||||
"displayName": "Outline",
|
||||
"unsupportedFrameworks": [
|
||||
|
||||
@ -7,7 +7,7 @@ export const OutlineSelector = memo(function OutlineSelector() {
|
||||
const [globals, updateGlobals] = useGlobals();
|
||||
const api = useStorybookApi();
|
||||
|
||||
const isActive = globals[PARAM_KEY] || false;
|
||||
const isActive = [true, 'true'].includes(globals[PARAM_KEY]);
|
||||
|
||||
const toggleOutline = useCallback(
|
||||
() =>
|
||||
|
||||
@ -7,7 +7,7 @@ import outlineCSS from './outlineCSS';
|
||||
|
||||
export const withOutline = (StoryFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => {
|
||||
const { globals } = context;
|
||||
const isActive = globals[PARAM_KEY] === true;
|
||||
const isActive = [true, 'true'].includes(globals[PARAM_KEY]);
|
||||
const isInDocs = context.viewMode === 'docs';
|
||||
|
||||
const outlineStyles = useMemo(() => {
|
||||
|
||||
@ -723,7 +723,7 @@ If you use [Component Story Format](https://storybook.js.org/docs/react/api/csf)
|
||||
|
||||
```js
|
||||
// jest.config.js
|
||||
module.exports = {
|
||||
export default {
|
||||
transform: {
|
||||
'^.+\\.stories\\.jsx?$': '@storybook/addon-storyshots/injectFileName',
|
||||
'^.+\\.jsx?$': 'babel-jest',
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Take a code snapshot of every story automatically with Jest",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook",
|
||||
"test"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/storyshots-core",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/storyshots-core",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -37,16 +37,15 @@
|
||||
"dependencies": {
|
||||
"@jest/transform": "^29.3.1",
|
||||
"@storybook/babel-plugin-require-context-hook": "1.0.1",
|
||||
"@storybook/client-api": "7.0.0-beta.36",
|
||||
"@storybook/core-common": "7.0.0-beta.36",
|
||||
"@storybook/core-webpack": "7.0.0-beta.36",
|
||||
"@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/global": "^5.0.0",
|
||||
"@storybook/preview-api": "7.0.0-beta.36",
|
||||
"@storybook/types": "7.0.0-beta.36",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/types": "7.0.0-beta.43",
|
||||
"@types/glob": "^7.1.3",
|
||||
"@types/jest-specific-snapshot": "^0.5.6",
|
||||
"core-js": "^3.8.2",
|
||||
"glob": "^7.1.6",
|
||||
"glob": "^8.1.0",
|
||||
"jest-specific-snapshot": "^7.0.0",
|
||||
"preact-render-to-string": "^5.1.19",
|
||||
"pretty-format": "^29.0.0",
|
||||
@ -58,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.36",
|
||||
"@storybook/angular": "7.0.0-beta.36",
|
||||
"@storybook/react": "7.0.0-beta.36",
|
||||
"@storybook/vue": "7.0.0-beta.36",
|
||||
"@storybook/vue3": "7.0.0-beta.36",
|
||||
"@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",
|
||||
"babel-loader": "^9.1.2",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-adapter-react-16": "^1.15.5",
|
||||
@ -143,7 +142,7 @@
|
||||
"access": "public"
|
||||
},
|
||||
"bundler": {},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1",
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"storybook": {
|
||||
"displayName": "Storyshots",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
|
||||
|
||||
@ -1,17 +1,9 @@
|
||||
import 'core-js';
|
||||
import 'core-js/es/reflect';
|
||||
import hasDependency from '../hasDependency';
|
||||
import configure from '../configure';
|
||||
import type { Loader } from '../Loader';
|
||||
import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
|
||||
|
||||
function setupAngularJestPreset() {
|
||||
// Needed to prevent "Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten."
|
||||
jest.requireActual('core-js');
|
||||
jest.requireActual('core-js/modules/es.promise');
|
||||
// jest.requireActual('core-js/es6/reflect');
|
||||
// jest.requireActual('core-js/es7/reflect');
|
||||
|
||||
// Angular + Jest + Storyshots = Crazy Shit:
|
||||
// We need to require 'jest-preset-angular/build/setupJest' before any storybook code
|
||||
// is running inside jest - one of the things that `jest-preset-angular/build/setupJest` does is
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/storyshots-puppeteer",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/storyshots-puppeteer",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -36,8 +36,8 @@
|
||||
"dependencies": {
|
||||
"@axe-core/puppeteer": "^4.2.0",
|
||||
"@storybook/csf": "next",
|
||||
"@storybook/node-logger": "7.0.0-beta.36",
|
||||
"@storybook/types": "7.0.0-beta.36",
|
||||
"@storybook/node-logger": "7.0.0-beta.43",
|
||||
"@storybook/types": "7.0.0-beta.43",
|
||||
"@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.36",
|
||||
"@storybook/addon-storyshots": "7.0.0-beta.43",
|
||||
"puppeteer": ">=2.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
@ -61,5 +61,5 @@
|
||||
"access": "public"
|
||||
},
|
||||
"bundler": {},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1"
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@ You can add configuration for this addon by using a preset or by using the addon
|
||||
Add the following to your `.storybook/main.js` exports:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: ['@storybook/addon-storysource'],
|
||||
};
|
||||
```
|
||||
@ -34,7 +34,7 @@ module.exports = {
|
||||
You can pass configurations into the addon-storysource loader in your `.storybook/main.js` file, e.g.:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: [
|
||||
{
|
||||
name: '@storybook/addon-storysource',
|
||||
@ -52,7 +52,7 @@ module.exports = {
|
||||
};
|
||||
```
|
||||
|
||||
To customize the `source-loader`, pass `loaderOptions`. Valid configurations are documented in the [`source-loader` README](https://github.com/storybookjs/storybook/tree/main/lib/source-loader/README.md#options).
|
||||
To customize the `source-loader`, pass `loaderOptions`. Valid configurations are documented in the [`source-loader` README](https://github.com/storybookjs/storybook/tree/next/code/lib/source-loader/README.md#options).
|
||||
|
||||
## Theming
|
||||
|
||||
@ -67,7 +67,7 @@ Storybook 6.0 introduced an unintentional change to `source-loader`, in which on
|
||||
If you're using `addon-docs`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: [
|
||||
{
|
||||
name: '@storybook/addon-docs',
|
||||
@ -84,7 +84,7 @@ module.exports = {
|
||||
If not:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: [
|
||||
{
|
||||
name: '@storybook/addon-storysource',
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "View a story’s source code to see how it works and paste into your app",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook",
|
||||
"code"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/storysource",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/storysource",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -54,13 +54,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.36",
|
||||
"@storybook/components": "7.0.0-beta.36",
|
||||
"@storybook/manager-api": "7.0.0-beta.36",
|
||||
"@storybook/preview-api": "7.0.0-beta.36",
|
||||
"@storybook/router": "7.0.0-beta.36",
|
||||
"@storybook/source-loader": "7.0.0-beta.36",
|
||||
"@storybook/theming": "7.0.0-beta.36",
|
||||
"@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",
|
||||
"estraverse": "^5.2.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-syntax-highlighter": "^15.5.0"
|
||||
@ -92,7 +92,7 @@
|
||||
"./src/preset.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1",
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"storybook": {
|
||||
"displayName": "Storysource",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",
|
||||
|
||||
@ -21,7 +21,7 @@ npm i -D @storybook/addon-toolbars
|
||||
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: ['@storybook/addon-toolbars'],
|
||||
};
|
||||
```
|
||||
@ -40,6 +40,6 @@ The primary difference between the two packages is that `addon-toolbars` makes u
|
||||
|
||||
- **Standardization**. Args are built into Storybook in 6.x. Since `addon-toolbars` is based on args, you don't need to learn any addon-specific APIs to use it.
|
||||
|
||||
- **Ergonomics**. Global args are easy to consume [in stories](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#consuming-globals-from-within-a-story), in [Storybook Docs](https://github.com/storybookjs/storybook/tree/main/addons/docs), or even in other addons.
|
||||
- **Ergonomics**. Global args are easy to consume [in stories](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#consuming-globals-from-within-a-story), in [Storybook Docs](https://github.com/storybookjs/storybook/tree/next/code/addons/docs), or even in other addons.
|
||||
|
||||
* **Framework compatibility**. Args are completely framework-independent, so `addon-toolbars` is compatible with React, Vue, Angular, etc. out of the box with no framework logic needed in the addon.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-toolbars",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Create your own toolbar items that control story rendering",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -11,7 +11,7 @@
|
||||
"test",
|
||||
"essentials"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/addons/toolbars",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/toolbars",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -68,11 +68,11 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.36",
|
||||
"@storybook/components": "7.0.0-beta.36",
|
||||
"@storybook/manager-api": "7.0.0-beta.36",
|
||||
"@storybook/preview-api": "7.0.0-beta.36",
|
||||
"@storybook/theming": "7.0.0-beta.36"
|
||||
"@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"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "~4.9.3"
|
||||
@ -99,7 +99,7 @@
|
||||
],
|
||||
"platform": "browser"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1",
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"storybook": {
|
||||
"displayName": "Toolbars",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",
|
||||
|
||||
@ -84,7 +84,7 @@ export const ToolbarMenuList: FC<ToolbarMenuListProps> = withKeyboardCycle(
|
||||
});
|
||||
return <TooltipLinkList links={links} />;
|
||||
}}
|
||||
closeOnClick
|
||||
closeOnOutsideClick
|
||||
>
|
||||
<ToolbarMenuButton
|
||||
active={hasGlobalValue}
|
||||
|
||||
@ -17,7 +17,7 @@ npm i -D @storybook/addon-viewport
|
||||
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
addons: ['@storybook/addon-viewport'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -8,7 +8,7 @@
|
||||
"style",
|
||||
"essentials"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/main/addons/viewport",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/viewport",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
@ -73,13 +73,13 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/client-logger": "7.0.0-beta.36",
|
||||
"@storybook/components": "7.0.0-beta.36",
|
||||
"@storybook/core-events": "7.0.0-beta.36",
|
||||
"@storybook/client-logger": "7.0.0-beta.43",
|
||||
"@storybook/components": "7.0.0-beta.43",
|
||||
"@storybook/core-events": "7.0.0-beta.43",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.36",
|
||||
"@storybook/preview-api": "7.0.0-beta.36",
|
||||
"@storybook/theming": "7.0.0-beta.36",
|
||||
"@storybook/manager-api": "7.0.0-beta.43",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/theming": "7.0.0-beta.43",
|
||||
"memoizerific": "^1.11.3",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
@ -109,7 +109,7 @@
|
||||
"./src/preview.ts"
|
||||
]
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1",
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02",
|
||||
"storybook": {
|
||||
"displayName": "Viewport",
|
||||
"icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",
|
||||
|
||||
@ -184,7 +184,7 @@ export const ViewportTool: FC = memo(
|
||||
tooltip={({ onHide }) => (
|
||||
<TooltipLinkList links={toLinks(list, item, setState, state, onHide)} />
|
||||
)}
|
||||
closeOnClick
|
||||
closeOnOutsideClick
|
||||
>
|
||||
<IconButtonWithLabel
|
||||
key="viewport"
|
||||
|
||||
@ -14,7 +14,7 @@ test.describe('addon-backgrounds', () => {
|
||||
const sbPage = new SbPage(page);
|
||||
|
||||
await sbPage.navigateToStory('example/button', 'primary');
|
||||
await sbPage.selectToolbar('[title="Change the background of the preview"]', '#dark');
|
||||
await sbPage.selectToolbar('[title="Change the background of the preview"]', '#list-item-dark');
|
||||
|
||||
await expect(sbPage.getCanvasBodyElement()).toHaveCSS('background-color', 'rgb(51, 51, 51)');
|
||||
});
|
||||
|
||||
@ -60,10 +60,11 @@ test.describe('addon-docs', () => {
|
||||
// The `<Primary>` block should render the "Basic" story, and the `<Stories/>` block should
|
||||
// render both the "Basic" and "Another" story
|
||||
const root = sbPage.previewRoot();
|
||||
const stories = root.locator('.sbdocs-h3');
|
||||
const stories = root.locator('.sb-story button');
|
||||
|
||||
await expect(await stories.count()).toBe(2);
|
||||
await expect(await stories.count()).toBe(3);
|
||||
await expect(stories.first()).toHaveText('Basic');
|
||||
await expect(stories.nth(1)).toHaveText('Basic');
|
||||
await expect(stories.last()).toHaveText('Another');
|
||||
});
|
||||
});
|
||||
|
||||
@ -15,7 +15,7 @@ test.describe('addon-viewport', () => {
|
||||
|
||||
// Click on viewport button and select small mobile
|
||||
await sbPage.navigateToStory('example/button', 'primary');
|
||||
await sbPage.selectToolbar('[title="Change the size of the preview"]', '#mobile1');
|
||||
await sbPage.selectToolbar('[title="Change the size of the preview"]', '#list-item-mobile1');
|
||||
|
||||
// Check that Button story is still displayed
|
||||
await expect(sbPage.previewRoot()).toContainText('Button');
|
||||
|
||||
@ -9,4 +9,23 @@ module.exports = {
|
||||
escapeString: true,
|
||||
printBasicPrototype: true,
|
||||
},
|
||||
globals: {
|
||||
'ts-jest': {
|
||||
tsconfig: '<rootDir>/tsconfig.spec.json',
|
||||
stringifyContentPathRegex: '\\.(html|svg)$',
|
||||
},
|
||||
},
|
||||
coverageDirectory: './coverage/testapp',
|
||||
transform: {
|
||||
'^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular',
|
||||
},
|
||||
snapshotSerializers: [
|
||||
'jest-preset-angular/build/serializers/no-ng-attributes',
|
||||
'jest-preset-angular/build/serializers/ng-snapshot',
|
||||
'jest-preset-angular/build/serializers/html-comment',
|
||||
],
|
||||
testMatch: [
|
||||
'<rootDir>/src/**/__tests__/**/*.[jt]s?(x)',
|
||||
'<rootDir>/src/**/?(*.)+(spec|test).[jt]s?(x)',
|
||||
],
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -36,26 +36,25 @@
|
||||
"prep": "../../../scripts/prepare/tsc.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.36",
|
||||
"@storybook/cli": "7.0.0-beta.36",
|
||||
"@storybook/client-logger": "7.0.0-beta.36",
|
||||
"@storybook/core-client": "7.0.0-beta.36",
|
||||
"@storybook/core-common": "7.0.0-beta.36",
|
||||
"@storybook/core-events": "7.0.0-beta.36",
|
||||
"@storybook/core-server": "7.0.0-beta.36",
|
||||
"@storybook/core-webpack": "7.0.0-beta.36",
|
||||
"@storybook/docs-tools": "7.0.0-beta.36",
|
||||
"@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/global": "^5.0.0",
|
||||
"@storybook/manager-api": "7.0.0-beta.36",
|
||||
"@storybook/node-logger": "7.0.0-beta.36",
|
||||
"@storybook/preview-api": "7.0.0-beta.36",
|
||||
"@storybook/types": "7.0.0-beta.36",
|
||||
"@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",
|
||||
"@types/node": "^16.0.0",
|
||||
"@types/react": "^16.14.34",
|
||||
"@types/react-dom": "^16.9.14",
|
||||
"@types/semver": "^7.3.4",
|
||||
"@types/webpack-env": "^1.18.0",
|
||||
"core-js": "^3.8.2",
|
||||
"find-up": "^5.0.0",
|
||||
"read-pkg-up": "^7.0.1",
|
||||
"semver": "^7.3.7",
|
||||
@ -124,5 +123,5 @@
|
||||
"bundler": {
|
||||
"tsConfig": "tsconfig.build.json"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1"
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { ApplicationRef, enableProdMode, NgModule } from '@angular/core';
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import { provideAnimations, BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
|
||||
import { BehaviorSubject, Subject } from 'rxjs';
|
||||
import { stringify } from 'telejson';
|
||||
@ -8,6 +7,7 @@ import { ICollection, Parameters, StoryFnAngularReturnType } from '../types';
|
||||
import { getApplication } from './StorybookModule';
|
||||
import { storyPropsProvider } from './StorybookProvider';
|
||||
import { componentNgModules } from './StorybookWrapperComponent';
|
||||
import { extractSingletons } from './utils/PropertyExtractor';
|
||||
|
||||
type StoryRenderInfo = {
|
||||
storyFnAngular: StoryFnAngularReturnType;
|
||||
@ -98,16 +98,6 @@ export abstract class AbstractRenderer {
|
||||
|
||||
const newStoryProps$ = new BehaviorSubject<ICollection>(storyFnAngular.props);
|
||||
|
||||
const hasAnimationsDefined =
|
||||
!!storyFnAngular.moduleMetadata?.imports?.includes(BrowserAnimationsModule);
|
||||
|
||||
if (hasAnimationsDefined && storyFnAngular?.moduleMetadata?.imports) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
storyFnAngular.moduleMetadata.imports = storyFnAngular.moduleMetadata.imports.filter(
|
||||
(importedModule) => importedModule !== BrowserAnimationsModule
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
!this.fullRendererRequired({
|
||||
storyFnAngular,
|
||||
@ -130,14 +120,15 @@ export abstract class AbstractRenderer {
|
||||
|
||||
this.initAngularRootElement(targetDOMNode, targetSelector);
|
||||
|
||||
const providers = [
|
||||
// Providers for BrowserAnimations & NoopAnimationsModule
|
||||
extractSingletons(storyFnAngular.moduleMetadata),
|
||||
storyPropsProvider(newStoryProps$),
|
||||
];
|
||||
|
||||
const application = getApplication({ storyFnAngular, component, targetSelector });
|
||||
|
||||
const applicationRef = await bootstrapApplication(application, {
|
||||
providers: [
|
||||
...(hasAnimationsDefined ? [provideAnimations()] : []),
|
||||
storyPropsProvider(newStoryProps$),
|
||||
],
|
||||
});
|
||||
const applicationRef = await bootstrapApplication(application, { providers });
|
||||
|
||||
applicationRefs.add(applicationRef);
|
||||
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
//
|
||||
BrowserModule,
|
||||
BrowserAnimationsModule,
|
||||
],
|
||||
})
|
||||
export class WithAnimationsModule {}
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule, HttpClientModule],
|
||||
})
|
||||
export class WithOfficialModule {}
|
||||
@ -1,6 +1,22 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component, Directive, Injectable, InjectionToken, NgModule } from '@angular/core';
|
||||
import { extractDeclarations, extractImports, extractProviders } from './PropertyExtractor';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import {
|
||||
BrowserAnimationsModule,
|
||||
NoopAnimationsModule,
|
||||
provideAnimations,
|
||||
provideNoopAnimations,
|
||||
} from '@angular/platform-browser/animations';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import {
|
||||
analyzeMetadata,
|
||||
extractDeclarations,
|
||||
extractImports,
|
||||
extractProviders,
|
||||
extractSingletons,
|
||||
REMOVED_MODULES,
|
||||
} from './PropertyExtractor';
|
||||
import { WithAnimationsModule, WithOfficialModule } from '../__testfixtures__/test.module';
|
||||
|
||||
const TEST_TOKEN = new InjectionToken('testToken');
|
||||
const TestTokenProvider = { provide: TEST_TOKEN, useValue: 123 };
|
||||
@ -16,32 +32,93 @@ const TestModuleWithImportsAndProviders = NgModule({
|
||||
})(class {});
|
||||
|
||||
describe('PropertyExtractor', () => {
|
||||
describe('extractImports', () => {
|
||||
it('should return an array of imports', () => {
|
||||
const imports = extractImports({ imports: [TestModuleWithImportsAndProviders] });
|
||||
expect(imports).toEqual([CommonModule, TestModuleWithImportsAndProviders]);
|
||||
describe('analyzeMetadata', () => {
|
||||
it('should remove BrowserModule', () => {
|
||||
const metadata = {
|
||||
imports: [BrowserModule],
|
||||
};
|
||||
const { imports, providers, singletons } = analyzeMetadata(metadata);
|
||||
expect(imports.flat(Number.MAX_VALUE)).toEqual([]);
|
||||
expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
|
||||
expect(singletons.flat(Number.MAX_VALUE)).toEqual([]);
|
||||
});
|
||||
|
||||
it('should return an array of unique imports without providers', () => {
|
||||
it('should remove BrowserAnimationsModule and use its providers instead', () => {
|
||||
const metadata = {
|
||||
imports: [BrowserAnimationsModule],
|
||||
};
|
||||
const { imports, providers, singletons } = analyzeMetadata(metadata);
|
||||
expect(imports.flat(Number.MAX_VALUE)).toEqual([]);
|
||||
expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
|
||||
expect(singletons.flat(Number.MAX_VALUE)).toEqual(provideAnimations());
|
||||
});
|
||||
|
||||
it('should remove NoopAnimationsModule and use its providers instead', () => {
|
||||
const metadata = {
|
||||
imports: [NoopAnimationsModule],
|
||||
};
|
||||
const { imports, providers, singletons } = analyzeMetadata(metadata);
|
||||
expect(imports.flat(Number.MAX_VALUE)).toEqual([]);
|
||||
expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
|
||||
expect(singletons.flat(Number.MAX_VALUE)).toEqual(provideNoopAnimations());
|
||||
});
|
||||
|
||||
it('should remove Browser/Animations modules recursively', () => {
|
||||
const metadata = {
|
||||
imports: [WithAnimationsModule],
|
||||
};
|
||||
const { imports, providers, singletons } = analyzeMetadata(metadata);
|
||||
expect(imports.flat(Number.MAX_VALUE)).toEqual([]);
|
||||
expect(providers.flat(Number.MAX_VALUE)).toEqual([
|
||||
{ provide: REMOVED_MODULES, useValue: WithAnimationsModule, multi: true },
|
||||
]);
|
||||
expect(singletons.flat(Number.MAX_VALUE)).toEqual(provideAnimations());
|
||||
});
|
||||
|
||||
it('should not destructure Angular official module', () => {
|
||||
const metadata = {
|
||||
imports: [WithOfficialModule],
|
||||
};
|
||||
const { imports, providers, singletons } = analyzeMetadata(metadata);
|
||||
expect(imports.flat(Number.MAX_VALUE)).toEqual([CommonModule, HttpClientModule]);
|
||||
expect(providers.flat(Number.MAX_VALUE)).toEqual([
|
||||
{ provide: REMOVED_MODULES, useValue: WithOfficialModule, multi: true },
|
||||
]);
|
||||
expect(singletons.flat(Number.MAX_VALUE)).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('extractImports', () => {
|
||||
it('should return Angular official modules', () => {
|
||||
const imports = extractImports({ imports: [TestModuleWithImportsAndProviders] });
|
||||
expect(imports).toEqual([CommonModule]);
|
||||
});
|
||||
|
||||
it('should return standalone components', () => {
|
||||
const imports = extractImports({
|
||||
imports: [TestModuleWithImportsAndProviders, StandaloneTestComponent],
|
||||
});
|
||||
expect(imports).toEqual([CommonModule, StandaloneTestComponent]);
|
||||
});
|
||||
|
||||
it('should not return any regular modules (they get destructured)', () => {
|
||||
const imports = extractImports({
|
||||
imports: [
|
||||
TestModuleWithImportsAndProviders,
|
||||
TestModuleWithDeclarations,
|
||||
{ ngModule: TestModuleWithImportsAndProviders, providers: [] },
|
||||
],
|
||||
});
|
||||
expect(imports).toEqual([CommonModule, TestModuleWithImportsAndProviders]);
|
||||
expect(imports).toEqual([CommonModule]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('extractDeclarations', () => {
|
||||
it('should return an array of declarations', () => {
|
||||
it('should return an array of declarations that contains `storyComponent`', () => {
|
||||
const declarations = extractDeclarations({ declarations: [TestComponent1] }, TestComponent2);
|
||||
expect(declarations).toEqual([TestComponent1, TestComponent2]);
|
||||
});
|
||||
|
||||
it('should ignore pre-declared components', () => {
|
||||
// TestComponent1 is declared as part of TestModuleWithDeclarations
|
||||
// TestModuleWithDeclarations is imported by TestModuleWithImportsAndProviders
|
||||
it('should ignore `storyComponent` if it is already declared', () => {
|
||||
const declarations = extractDeclarations(
|
||||
{
|
||||
imports: [TestModuleWithImportsAndProviders],
|
||||
@ -49,10 +126,15 @@ describe('PropertyExtractor', () => {
|
||||
},
|
||||
TestComponent1
|
||||
);
|
||||
expect(declarations).toEqual([TestComponent2, StandaloneTestComponent, TestDirective]);
|
||||
expect(declarations).toEqual([
|
||||
TestComponent1,
|
||||
TestComponent2,
|
||||
StandaloneTestComponent,
|
||||
TestDirective,
|
||||
]);
|
||||
});
|
||||
|
||||
it('should ignore standalone components', () => {
|
||||
it('should ignore `storyComponent` if it is standalone', () => {
|
||||
const declarations = extractDeclarations(
|
||||
{
|
||||
imports: [TestModuleWithImportsAndProviders],
|
||||
@ -63,7 +145,7 @@ describe('PropertyExtractor', () => {
|
||||
expect(declarations).toEqual([TestComponent1, TestComponent2, TestDirective]);
|
||||
});
|
||||
|
||||
it('should ignore non components/directives/pipes', () => {
|
||||
it('should ignore `storyComponent` if it is not a component/directive/pipe', () => {
|
||||
const declarations = extractDeclarations(
|
||||
{
|
||||
imports: [TestModuleWithImportsAndProviders],
|
||||
@ -87,7 +169,12 @@ describe('PropertyExtractor', () => {
|
||||
const providers = extractProviders({
|
||||
imports: [{ ngModule: TestModuleWithImportsAndProviders, providers: [TestService] }],
|
||||
});
|
||||
expect(providers).toEqual([TestService]);
|
||||
expect(providers).toEqual([
|
||||
{ provide: TEST_TOKEN, useValue: 123 },
|
||||
{ provide: REMOVED_MODULES, useValue: TestModuleWithDeclarations, multi: true },
|
||||
TestService,
|
||||
{ provide: REMOVED_MODULES, useValue: TestModuleWithImportsAndProviders, multi: true },
|
||||
]);
|
||||
});
|
||||
|
||||
it('should return an array of unique providers', () => {
|
||||
@ -96,12 +183,27 @@ describe('PropertyExtractor', () => {
|
||||
providers: [TestService, { provide: TEST_TOKEN, useValue: 123 }],
|
||||
});
|
||||
expect(providers).toEqual([
|
||||
{ provide: TEST_TOKEN, useValue: 123 },
|
||||
{ provide: REMOVED_MODULES, useValue: TestModuleWithDeclarations, multi: true },
|
||||
TestService,
|
||||
{
|
||||
provide: new InjectionToken('testToken'),
|
||||
useValue: 123,
|
||||
},
|
||||
{
|
||||
provide: REMOVED_MODULES,
|
||||
useValue: TestModuleWithImportsAndProviders,
|
||||
multi: true,
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
it('should return an array of singletons extracted', () => {
|
||||
const singeltons = extractSingletons({
|
||||
imports: [BrowserAnimationsModule],
|
||||
});
|
||||
|
||||
expect(singeltons).toEqual(provideAnimations());
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Provider } from '@angular/core';
|
||||
import { Component, InjectionToken, NgModule, Provider } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import {
|
||||
BrowserAnimationsModule,
|
||||
NoopAnimationsModule,
|
||||
provideAnimations,
|
||||
provideNoopAnimations,
|
||||
} from '@angular/platform-browser/animations';
|
||||
import { NgModuleMetadata } from '../../types';
|
||||
import { isDeclarable, isStandaloneComponent } from './NgComponentAnalyzer';
|
||||
import { isComponentAlreadyDeclared } from './NgModulesAnalyzer';
|
||||
@ -8,28 +15,110 @@ const uniqueArray = (arr: any[]) => {
|
||||
return arr.flat(Number.MAX_VALUE).filter((value, index, self) => self.indexOf(value) === index);
|
||||
};
|
||||
|
||||
const analyzeRestricted = (ngModule: NgModule) => {
|
||||
/**
|
||||
* BrowserModule is restricted,
|
||||
* because bootstrapApplication API, which mounts the component to the DOM,
|
||||
* automatically imports BrowserModule
|
||||
*/
|
||||
if (ngModule === BrowserModule) {
|
||||
return [true];
|
||||
}
|
||||
/**
|
||||
* BrowserAnimationsModule imports BrowserModule, which is restricted,
|
||||
* because bootstrapApplication API, which mounts the component to the DOM,
|
||||
* automatically imports BrowserModule
|
||||
*/
|
||||
if (ngModule === BrowserAnimationsModule) {
|
||||
return [true, provideAnimations()];
|
||||
}
|
||||
/**
|
||||
* NoopAnimationsModule imports BrowserModule, which is restricted,
|
||||
* because bootstrapApplication API, which mounts the component to the DOM,
|
||||
* automatically imports BrowserModule
|
||||
*/
|
||||
if (ngModule === NoopAnimationsModule) {
|
||||
return [true, provideNoopAnimations()];
|
||||
}
|
||||
|
||||
return [false];
|
||||
};
|
||||
|
||||
export const REMOVED_MODULES = new InjectionToken('REMOVED_MODULES');
|
||||
|
||||
/**
|
||||
* Analyze NgModule Metadata
|
||||
*
|
||||
* - Removes Restricted Imports
|
||||
* - Extracts providers from ModuleWithProviders
|
||||
* - Flattens imports
|
||||
* - Returns a new NgModuleMetadata object
|
||||
*
|
||||
*
|
||||
*/
|
||||
export const analyzeMetadata = (metadata: NgModuleMetadata) => {
|
||||
const declarations = [...(metadata?.declarations || [])];
|
||||
const providers = [...(metadata?.providers || [])];
|
||||
const singletons: any[] = [];
|
||||
const imports = [...(metadata?.imports || [])]
|
||||
.reduce((acc, ngModule) => {
|
||||
// remove ngModule and use only its providers if it is restricted
|
||||
// (e.g. BrowserModule, BrowserAnimationsModule, NoopAnimationsModule, ...etc)
|
||||
const [isRestricted, restrictedProviders] = analyzeRestricted(ngModule);
|
||||
if (isRestricted) {
|
||||
singletons.unshift(restrictedProviders || []);
|
||||
return acc;
|
||||
}
|
||||
|
||||
// destructure into ngModule & providers if it is a ModuleWithProviders
|
||||
if (ngModule?.providers) {
|
||||
providers.unshift(ngModule.providers || []);
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
ngModule = ngModule.ngModule;
|
||||
}
|
||||
|
||||
// extract providers, declarations, singletons from ngModule
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
const ngMetadata = ngModule?.__annotations__?.[0];
|
||||
if (ngMetadata) {
|
||||
const newMetadata = analyzeMetadata(ngMetadata);
|
||||
acc.unshift(...newMetadata.imports);
|
||||
providers.unshift(...newMetadata.providers);
|
||||
singletons.unshift(...newMetadata.singletons);
|
||||
declarations.unshift(...newMetadata.declarations);
|
||||
|
||||
if (ngMetadata.standalone === true) {
|
||||
acc.push(ngModule);
|
||||
}
|
||||
// keeping a copy of the removed module
|
||||
providers.push({ provide: REMOVED_MODULES, useValue: ngModule, multi: true });
|
||||
return acc;
|
||||
}
|
||||
|
||||
// include Angular official modules as-is
|
||||
if (ngModule.ɵmod) {
|
||||
acc.push(ngModule);
|
||||
return acc;
|
||||
}
|
||||
|
||||
return acc;
|
||||
}, [])
|
||||
.flat(Number.MAX_VALUE);
|
||||
|
||||
return { ...metadata, imports, providers, singletons, declarations };
|
||||
};
|
||||
|
||||
/**
|
||||
* Extract Imports from NgModule
|
||||
*
|
||||
* CommonModule is always imported
|
||||
*
|
||||
* metadata.imports are flattened deeply and extracted into a new array
|
||||
*
|
||||
* - If ModuleWithProviders (e.g. forRoot() & forChild() ) is used, the ngModule is extracted without providers.
|
||||
* Only standalone components are imported
|
||||
*
|
||||
*/
|
||||
export const extractImports = (metadata: NgModuleMetadata) => {
|
||||
const imports = [CommonModule];
|
||||
const { imports } = analyzeMetadata(metadata);
|
||||
|
||||
const modules = (metadata.imports || []).flat(Number.MAX_VALUE);
|
||||
const withProviders = modules.filter((moduleDef) => !!moduleDef?.ngModule);
|
||||
const withoutProviders = modules.filter((moduleDef) => !withProviders.includes(moduleDef));
|
||||
|
||||
return uniqueArray([
|
||||
imports,
|
||||
withoutProviders,
|
||||
withProviders.map((moduleDef) => moduleDef.ngModule),
|
||||
]);
|
||||
return uniqueArray([CommonModule, imports]);
|
||||
};
|
||||
|
||||
/**
|
||||
@ -39,18 +128,18 @@ export const extractImports = (metadata: NgModuleMetadata) => {
|
||||
* - metadata.providers
|
||||
* - providers from each **ModuleWithProviders** (e.g. forRoot() & forChild() )
|
||||
*
|
||||
* - Use this in combination with extractImports to get all providers for a specific module
|
||||
*
|
||||
*/
|
||||
export const extractProviders = (metadata: NgModuleMetadata): Provider[] => {
|
||||
const providers = (metadata.providers || []) as Provider[];
|
||||
const { providers } = analyzeMetadata(metadata);
|
||||
|
||||
const moduleProviders: Provider[] = (metadata.imports || [])
|
||||
.flat(Number.MAX_VALUE)
|
||||
.filter((moduleDef) => !!moduleDef?.ngModule)
|
||||
.map((moduleDef) => moduleDef.providers || []);
|
||||
return uniqueArray(providers);
|
||||
};
|
||||
|
||||
return uniqueArray([].concat(moduleProviders, providers));
|
||||
export const extractSingletons = (metadata: NgModuleMetadata): Provider[] => {
|
||||
const { singletons } = analyzeMetadata(metadata);
|
||||
|
||||
return uniqueArray(singletons);
|
||||
};
|
||||
|
||||
/**
|
||||
@ -63,7 +152,8 @@ export const extractProviders = (metadata: NgModuleMetadata): Provider[] => {
|
||||
*
|
||||
*/
|
||||
export const extractDeclarations = (metadata: NgModuleMetadata, storyComponent?: any) => {
|
||||
const declarations = metadata.declarations || [];
|
||||
const { declarations } = analyzeMetadata(metadata);
|
||||
|
||||
if (storyComponent) {
|
||||
const isStandalone = isStandaloneComponent(storyComponent);
|
||||
const isDeclared = isComponentAlreadyDeclared(storyComponent, declarations, metadata.imports);
|
||||
@ -74,5 +164,6 @@ export const extractDeclarations = (metadata: NgModuleMetadata, storyComponent?:
|
||||
declarations.push(storyComponent);
|
||||
}
|
||||
}
|
||||
|
||||
return uniqueArray(declarations);
|
||||
};
|
||||
|
||||
@ -16,33 +16,6 @@ import { global } from '@storybook/global';
|
||||
* Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
|
||||
*/
|
||||
|
||||
/** *************************************************************************************************
|
||||
* BROWSER POLYFILLS
|
||||
*/
|
||||
|
||||
/** IE9, IE10 and IE11 requires all of the following polyfills. * */
|
||||
// import 'core-js/es6/symbol';
|
||||
// import 'core-js/es6/object';
|
||||
// import 'core-js/es6/function';
|
||||
// import 'core-js/es6/parse-int';
|
||||
// import 'core-js/es6/parse-float';
|
||||
// import 'core-js/es6/number';
|
||||
// import 'core-js/es6/math';
|
||||
// import 'core-js/es6/string';
|
||||
// import 'core-js/es6/date';
|
||||
// import 'core-js/es6/array';
|
||||
// import 'core-js/es6/regexp';
|
||||
// import 'core-js/es6/map';
|
||||
// import 'core-js/es6/weak-map';
|
||||
// import 'core-js/es6/set';
|
||||
|
||||
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
|
||||
// import 'classlist.js'; // Run `npm install --save classlist.js`.
|
||||
|
||||
/** Evergreen browsers require these. * */
|
||||
import 'core-js/es/reflect';
|
||||
import 'core-js/proposals/reflect-metadata';
|
||||
|
||||
/**
|
||||
* Required to support Web Animations `@angular/animation`.
|
||||
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
import { Meta, StoryFn } from '@storybook/angular';
|
||||
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { within, userEvent } from '@storybook/testing-library';
|
||||
import { expect } from '@storybook/jest';
|
||||
import { OpenCloseComponent } from './angular-src/open-close-component/open-close.component';
|
||||
|
||||
export default {
|
||||
component: OpenCloseComponent,
|
||||
} as Meta;
|
||||
|
||||
export const WithNoopBrowserAnimations: StoryFn = () => ({
|
||||
template: `<app-open-close></app-open-close>`,
|
||||
moduleMetadata: {
|
||||
declarations: [OpenCloseComponent],
|
||||
imports: [NoopAnimationsModule],
|
||||
},
|
||||
});
|
||||
|
||||
WithNoopBrowserAnimations.play = async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const opened = canvas.getByText('The box is now Open!');
|
||||
expect(opened).toBeDefined();
|
||||
const submitButton = canvas.getByRole('button');
|
||||
await userEvent.click(submitButton);
|
||||
const closed = canvas.getByText('The box is now Closed!');
|
||||
expect(closed).toBeDefined();
|
||||
};
|
||||
@ -39,11 +39,14 @@ This example also assume that you already have the package in your `package.json
|
||||
In your `.storybook/main.js` you can add the following lines:
|
||||
|
||||
```javascript
|
||||
const namedBlockPolyfill = require('ember-named-blocks-polyfill/lib/named-blocks-polyfill-plugin');
|
||||
import namedBlockPolyfill from 'ember-named-blocks-polyfill/lib/named-blocks-polyfill-plugin';
|
||||
|
||||
module.exports = {
|
||||
emberOptions: {
|
||||
polyfills: [namedBlockPolyfill],
|
||||
export default {
|
||||
framework: {
|
||||
name: '@storybook/ember',
|
||||
options: {
|
||||
polyfills: [namedBlockPolyfill],
|
||||
}
|
||||
},
|
||||
[...]
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"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.36",
|
||||
"@storybook/core-common": "7.0.0-beta.36",
|
||||
"@storybook/docs-tools": "7.0.0-beta.36",
|
||||
"@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/global": "^5.0.0",
|
||||
"@storybook/preview-api": "7.0.0-beta.36",
|
||||
"@storybook/types": "7.0.0-beta.36",
|
||||
"@storybook/preview-api": "7.0.0-beta.43",
|
||||
"@storybook/types": "7.0.0-beta.43",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -59,5 +59,5 @@
|
||||
"access": "public"
|
||||
},
|
||||
"bundler": {},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1"
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html-vite",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,16 +48,16 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "7.0.0-beta.36",
|
||||
"@storybook/builder-vite": "7.0.0-beta.36",
|
||||
"@storybook/channel-postmessage": "7.0.0-beta.36",
|
||||
"@storybook/channel-websocket": "7.0.0-beta.36",
|
||||
"@storybook/client-api": "7.0.0-beta.36",
|
||||
"@storybook/core-server": "7.0.0-beta.36",
|
||||
"@storybook/html": "7.0.0-beta.36",
|
||||
"@storybook/node-logger": "7.0.0-beta.36",
|
||||
"@storybook/preview-web": "7.0.0-beta.36",
|
||||
"magic-string": "^0.26.1"
|
||||
"@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",
|
||||
"magic-string": "^0.27.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^16.0.0",
|
||||
@ -76,5 +76,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1"
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html-webpack5",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"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.36",
|
||||
"@storybook/core-common": "7.0.0-beta.36",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.43",
|
||||
"@storybook/core-common": "7.0.0-beta.43",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/html": "7.0.0-beta.36",
|
||||
"@storybook/preset-html-webpack": "7.0.0-beta.36",
|
||||
"@storybook/html": "7.0.0-beta.43",
|
||||
"@storybook/preset-html-webpack": "7.0.0-beta.43",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -76,5 +76,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1"
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
}
|
||||
|
||||
@ -116,7 +116,7 @@ Update your `main.js` to change the framework property:
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
module.exports = {
|
||||
export default {
|
||||
// ...
|
||||
framework: {
|
||||
// name: '@storybook/react-webpack5', // Remove this
|
||||
@ -130,7 +130,7 @@ If you were using Storybook plugins to integrate with Next.js, those are no long
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
module.exports = {
|
||||
export default {
|
||||
// ...
|
||||
addons: [
|
||||
// ...
|
||||
@ -151,9 +151,9 @@ For example:
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
const path = require('path');
|
||||
import * as path from 'path';
|
||||
|
||||
module.exports = {
|
||||
export default {
|
||||
// ...
|
||||
framework: {
|
||||
name: '@storybook/nextjs',
|
||||
@ -244,7 +244,7 @@ You have to tell Storybook where the `fonts` directory is located. The `from` va
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
module.exports = {
|
||||
export default {
|
||||
...
|
||||
"staticDirs": [
|
||||
{
|
||||
@ -618,9 +618,9 @@ This will automatically include any of your [custom sass configurations](https:/
|
||||
|
||||
```js
|
||||
// next.config.js
|
||||
const path = require('path');
|
||||
import * as path from 'path';
|
||||
|
||||
module.exports = {
|
||||
export default {
|
||||
// Any options here are included in Sass compilation for your stories
|
||||
sassOptions: {
|
||||
includePaths: [path.join(__dirname, 'styles')],
|
||||
@ -784,7 +784,7 @@ Below is an example of how to add svgr support to Storybook with this framework.
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
module.exports = {
|
||||
export default {
|
||||
// ...
|
||||
webpackFinal: async (config) => {
|
||||
// This modifies the existing image rule to exclude .svg files
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/nextjs",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Storybook for Next.js",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -60,13 +60,13 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@next/font": "^13.0.7",
|
||||
"@storybook/addon-actions": "7.0.0-beta.36",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.36",
|
||||
"@storybook/core-common": "7.0.0-beta.36",
|
||||
"@storybook/node-logger": "7.0.0-beta.36",
|
||||
"@storybook/preset-react-webpack": "7.0.0-beta.36",
|
||||
"@storybook/preview-api": "7.0.0-beta.36",
|
||||
"@storybook/react": "7.0.0-beta.36",
|
||||
"@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",
|
||||
"@types/node": "^16.0.0",
|
||||
"find-up": "^5.0.0",
|
||||
"fs-extra": "^11.1.0",
|
||||
@ -123,5 +123,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1"
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
}
|
||||
|
||||
@ -15,7 +15,8 @@ const cssCache = new Map<string, Promise<string>>();
|
||||
export async function getFontFaceDeclarations(options: LoaderOptions) {
|
||||
const { fontFamily, weights, styles, selectedVariableAxes, display, variable } = validateData(
|
||||
options.fontFamily,
|
||||
[options.props]
|
||||
[options.props],
|
||||
null
|
||||
);
|
||||
|
||||
const fontAxes = getFontAxes(fontFamily, weights, styles, selectedVariableAxes);
|
||||
|
||||
@ -16,7 +16,7 @@ import StackAlt from './assets/stackalt.svg';
|
||||
{`
|
||||
.subheading {
|
||||
--mediumdark: '#999999';
|
||||
font-weight: 900;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
letter-spacing: 6px;
|
||||
|
||||
@ -16,7 +16,7 @@ import StackAlt from './assets/stackalt.svg';
|
||||
{`
|
||||
.subheading {
|
||||
--mediumdark: '#999999';
|
||||
font-weight: 900;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
letter-spacing: 6px;
|
||||
|
||||
@ -37,7 +37,7 @@ Update your `main.js` to change the framework property:
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
module.exports = {
|
||||
export default {
|
||||
// ...
|
||||
framework: {
|
||||
name: '@storybook/preact-vite', // <- Change this
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact-vite",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"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.36",
|
||||
"@storybook/preact": "7.0.0-beta.36"
|
||||
"@storybook/builder-vite": "7.0.0-beta.43",
|
||||
"@storybook/preact": "7.0.0-beta.43"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^16.0.0",
|
||||
@ -73,5 +73,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1"
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact-webpack5",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"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.36",
|
||||
"@storybook/core-common": "7.0.0-beta.36",
|
||||
"@storybook/preact": "7.0.0-beta.36",
|
||||
"@storybook/preset-preact-webpack": "7.0.0-beta.36",
|
||||
"@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",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -77,5 +77,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1"
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-vite",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -50,11 +50,11 @@
|
||||
"dependencies": {
|
||||
"@joshwooding/vite-plugin-react-docgen-typescript": "^0.2.1",
|
||||
"@rollup/pluginutils": "^4.2.0",
|
||||
"@storybook/builder-vite": "7.0.0-beta.36",
|
||||
"@storybook/react": "7.0.0-beta.36",
|
||||
"@storybook/builder-vite": "7.0.0-beta.43",
|
||||
"@storybook/react": "7.0.0-beta.43",
|
||||
"@vitejs/plugin-react": "^3.0.1",
|
||||
"ast-types": "^0.14.2",
|
||||
"magic-string": "^0.26.1",
|
||||
"magic-string": "^0.27.0",
|
||||
"react-docgen": "6.0.0-alpha.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -80,5 +80,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1"
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-webpack5",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"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.36",
|
||||
"@storybook/preset-react-webpack": "7.0.0-beta.36",
|
||||
"@storybook/react": "7.0.0-beta.36",
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.43",
|
||||
"@storybook/preset-react-webpack": "7.0.0-beta.43",
|
||||
"@storybook/react": "7.0.0-beta.43",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -83,5 +83,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1"
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
}
|
||||
|
||||
@ -55,7 +55,7 @@ To write a story, use whatever API is natural for your server-side rendering fra
|
||||
In your `.storybook/main.js` you simply provide a glob specifying the location of those JSON files, e.g.
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
export default {
|
||||
stories: ['../stories/**/*.stories.json'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/server-webpack5",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"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.36",
|
||||
"@storybook/core-common": "7.0.0-beta.36",
|
||||
"@storybook/preset-server-webpack": "7.0.0-beta.36",
|
||||
"@storybook/server": "7.0.0-beta.36",
|
||||
"@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",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -74,5 +74,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1"
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte-vite",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,11 +48,11 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-vite": "7.0.0-beta.36",
|
||||
"@storybook/node-logger": "7.0.0-beta.36",
|
||||
"@storybook/svelte": "7.0.0-beta.36",
|
||||
"@storybook/builder-vite": "7.0.0-beta.43",
|
||||
"@storybook/node-logger": "7.0.0-beta.43",
|
||||
"@storybook/svelte": "7.0.0-beta.43",
|
||||
"@sveltejs/vite-plugin-svelte": "^2.0.0",
|
||||
"magic-string": "^0.26.1",
|
||||
"magic-string": "^0.27.0",
|
||||
"svelte": "^3.0.0",
|
||||
"sveltedoc-parser": "^4.2.1",
|
||||
"ts-dedent": "^2.2.0"
|
||||
@ -80,5 +80,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1"
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte-webpack5",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"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.36",
|
||||
"@storybook/core-common": "7.0.0-beta.36",
|
||||
"@storybook/preset-svelte-webpack": "7.0.0-beta.36",
|
||||
"@storybook/svelte": "7.0.0-beta.36"
|
||||
"@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"
|
||||
},
|
||||
"devDependencies": {
|
||||
"svelte": "^3.48.0",
|
||||
@ -78,5 +78,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1"
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
}
|
||||
|
||||
@ -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 | See [section in Troubleshooting](#error-cannot-read-properties-of-undefined-reading-disable_scroll_handling-in-preview). `applyAction` depends on the client singleton having been initialized in SvelteKit's `singletons.js`. |
|
||||
| [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation) | ⏳ Planned for 7.1. With mocks so the Actions addon will display when the hooks are being called. | See [section in Troubleshooting](#error-cannot-read-properties-of-undefined-reading-disable_scroll_handling-in-preview). `$app/navigation` depends on the client singleton having been initialized in SvelteKit's `singletons.js`. |
|
||||
| [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths) | ⏳ Planned for 7.1. | These are global variables set in SvelteKit's `runtime/shared.js` |
|
||||
| [`$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. |
|
||||
| [`$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 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 | |
|
||||
|
||||
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.
|
||||
|
||||
@ -69,7 +69,7 @@ npx storybook@next upgrade --prerelease
|
||||
|
||||
When running the `upgrade` command above you should get a prompt asking you to migrate to `@storybook/sveltekit`, which should handle everything for you. In some cases it can't migrate for you, eg. if your existing Storybook setup is based on Webpack. In such cases, refer to the manual migration below.
|
||||
|
||||
Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you had a `svelteOptions` property in `.storybook/main.cjs` the automigration will have removed it, as it is no longer supported.
|
||||
Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you had a `svelteOptions` property in `.storybook/main.js` the automigration will have removed it, as it is no longer supported.
|
||||
|
||||
#### Manual migration
|
||||
|
||||
@ -79,17 +79,17 @@ Install the framework:
|
||||
yarn add -D @storybook/sveltekit@next
|
||||
```
|
||||
|
||||
Update your `main.cjs` to change the framework property:
|
||||
Update your `main.js` to change the framework property:
|
||||
|
||||
```js
|
||||
// .storybook/main.cjs
|
||||
module.exports = {
|
||||
// .storybook/main.js
|
||||
export default {
|
||||
...
|
||||
framework: '@storybook/sveltekit',
|
||||
};
|
||||
```
|
||||
|
||||
Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you have a `svelteOptions` property in `.storybook/main.cjs` you need to remove that. See [Troubleshooting](#error-about-__esbuild_register_import_meta_url__-when-starting-storybook) below.
|
||||
Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you have a `svelteOptions` property in `.storybook/main.js` you need to remove that. See [Troubleshooting](#error-about-__esbuild_register_import_meta_url__-when-starting-storybook) below.
|
||||
|
||||
Remove any redundant dependencies, if you have them:
|
||||
|
||||
@ -110,7 +110,7 @@ yarn remove @storybook/builder-vite
|
||||
> ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared
|
||||
> ```
|
||||
|
||||
You'll get this error when manually upgrading from 6.5 to 7.0. You need to remove the `svelteOptions` property in `.storybook/main.cjs`, as that is not supported by Storybook 7.0 + SvelteKit. The property is also not necessary anymore because the Vite and Svelte configurations are loaded automatically in Storybook 7.0.
|
||||
You'll get this error when manually upgrading from 6.5 to 7.0. You need to remove the `svelteOptions` property in `.storybook/main.js`, as that is not supported by Storybook 7.0 + SvelteKit. The property is also not necessary anymore because the Vite and Svelte configurations are loaded automatically in Storybook 7.0.
|
||||
|
||||
### Error: `Cannot read properties of undefined (reading 'disable_scroll_handling')` in preview
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/sveltekit",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Storybook for SvelteKit",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -51,9 +51,9 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-vite": "7.0.0-beta.36",
|
||||
"@storybook/svelte": "7.0.0-beta.36",
|
||||
"@storybook/svelte-vite": "7.0.0-beta.36"
|
||||
"@storybook/builder-vite": "7.0.0-beta.43",
|
||||
"@storybook/svelte": "7.0.0-beta.43",
|
||||
"@storybook/svelte-vite": "7.0.0-beta.43"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^16.0.0",
|
||||
@ -76,5 +76,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1"
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
}
|
||||
|
||||
@ -15,12 +15,11 @@ export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (confi
|
||||
|
||||
let { plugins = [] } = baseConfig;
|
||||
|
||||
// Remove vite-plugin-svelte-kit from plugins if using SvelteKit
|
||||
// see https://github.com/storybookjs/storybook/issues/19280#issuecomment-1281204341
|
||||
// disable specific plugins that are not compatible with Storybook
|
||||
plugins = (
|
||||
await withoutVitePlugins(plugins, [
|
||||
// @sveltejs/kit@1.0.0-next.587 and later
|
||||
'vite-plugin-sveltekit-compile',
|
||||
'vite-plugin-sveltekit-guard',
|
||||
])
|
||||
).concat(configOverrides());
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue-vite",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,11 +48,11 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-vite": "7.0.0-beta.36",
|
||||
"@storybook/core-common": "7.0.0-beta.36",
|
||||
"@storybook/core-server": "7.0.0-beta.36",
|
||||
"@storybook/vue": "7.0.0-beta.36",
|
||||
"magic-string": "^0.26.1",
|
||||
"@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",
|
||||
"magic-string": "^0.27.0",
|
||||
"vue-docgen-api": "^4.40.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -79,5 +79,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1"
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue-webpack5",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"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.36",
|
||||
"@storybook/core-common": "7.0.0-beta.36",
|
||||
"@storybook/preset-vue-webpack": "7.0.0-beta.36",
|
||||
"@storybook/vue": "7.0.0-beta.36",
|
||||
"@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",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -83,5 +83,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1"
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue3-vite",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,11 +48,11 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-vite": "7.0.0-beta.36",
|
||||
"@storybook/core-server": "7.0.0-beta.36",
|
||||
"@storybook/vue3": "7.0.0-beta.36",
|
||||
"@storybook/builder-vite": "7.0.0-beta.43",
|
||||
"@storybook/core-server": "7.0.0-beta.43",
|
||||
"@storybook/vue3": "7.0.0-beta.43",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"magic-string": "^0.26.1",
|
||||
"magic-string": "^0.27.0",
|
||||
"vue-docgen-api": "^4.40.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -78,5 +78,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1"
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue3-webpack5",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"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.36",
|
||||
"@storybook/core-common": "7.0.0-beta.36",
|
||||
"@storybook/preset-vue3-webpack": "7.0.0-beta.36",
|
||||
"@storybook/vue3": "7.0.0-beta.36",
|
||||
"@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",
|
||||
"@types/node": "^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -80,5 +80,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1"
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/web-components-vite",
|
||||
"version": "7.0.0-beta.36",
|
||||
"version": "7.0.0-beta.43",
|
||||
"description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -48,11 +48,11 @@
|
||||
"prep": "../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-vite": "7.0.0-beta.36",
|
||||
"@storybook/core-server": "7.0.0-beta.36",
|
||||
"@storybook/node-logger": "7.0.0-beta.36",
|
||||
"@storybook/web-components": "7.0.0-beta.36",
|
||||
"magic-string": "^0.26.1"
|
||||
"@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",
|
||||
"magic-string": "^0.27.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^16.0.0",
|
||||
@ -75,5 +75,5 @@
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "5268eb0fa26e2e31cc410c27cbff7189f3b7eba1"
|
||||
"gitHead": "b1b7c2bc998decc21eb8352fcccd3c939048df02"
|
||||
}
|
||||
|
||||
@ -37,7 +37,7 @@ For example if you have a library called `my-library` which is in ES2017 then yo
|
||||
```js
|
||||
// .storybook/main.js
|
||||
|
||||
module.exports = {
|
||||
export default {
|
||||
webpackFinal: async (config) => {
|
||||
// find web-components rule for extra transpilation
|
||||
const webComponentsRule = config.module.rules.find(
|
||||
|
||||
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