mirror of
https://github.com/storybookjs/storybook.git
synced 2025-01-13 23:42:35 +08:00
Merge remote-tracking branch 'origin/next' into pr/tobiasdiez/28965
This commit is contained in:
Valentin Palkovic
commit
3095d0c7a9
@ -64,7 +64,7 @@ executors:
|
||||
default: "small"
|
||||
working_directory: /tmp/storybook
|
||||
docker:
|
||||
- image: mcr.microsoft.com/playwright:v1.46.0-jammy
|
||||
- image: mcr.microsoft.com/playwright:v1.48.1-jammy
|
||||
environment:
|
||||
NODE_OPTIONS: --max_old_space_size=6144
|
||||
resource_class: <<parameters.class>>
|
||||
@ -154,7 +154,7 @@ jobs:
|
||||
cd code
|
||||
yarn local-registry --publish
|
||||
- report-workflow-on-failure
|
||||
- store_artifacts:
|
||||
- store_artifacts:
|
||||
path: code/bench/esbuild-metafiles
|
||||
- save_cache:
|
||||
name: Save Yarn cache
|
||||
@ -261,6 +261,7 @@ jobs:
|
||||
executor:
|
||||
class: xlarge
|
||||
name: sb_playwright
|
||||
parallelism: 4
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: "--depth 1 --verbose"
|
||||
@ -270,15 +271,35 @@ jobs:
|
||||
name: Test
|
||||
command: |
|
||||
cd code
|
||||
yarn test --coverage
|
||||
- store_test_results:
|
||||
path: code/junit.xml
|
||||
SHARD="$((${CIRCLE_NODE_INDEX}+1))"; yarn test --reporter=blob --shard=${SHARD}/${CIRCLE_NODE_TOTAL}
|
||||
# TODO: bring coverage back later. This has caused flakiness in the tests because
|
||||
# Somehow Vitest reports coverage while some tests are still running,
|
||||
# then it tries to report coverage again and as result it crashes like this:
|
||||
# https://app.circleci.com/pipelines/github/storybookjs/storybook/85043/workflows/4ddf7907-b93c-4b17-8fdf-fe0bd7fde905/jobs/715446
|
||||
# - persist_to_workspace:
|
||||
# root: .
|
||||
# paths:
|
||||
# - code/coverage
|
||||
- persist_to_workspace:
|
||||
root: .
|
||||
paths:
|
||||
- code/coverage
|
||||
- code/.vitest-reports
|
||||
- report-workflow-on-failure
|
||||
- cancel-workflow-on-failure
|
||||
store-test-results:
|
||||
executor:
|
||||
class: small
|
||||
name: sb_node_22_browsers
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: "--depth 1 --verbose"
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: Merge test results
|
||||
command: cd code && yarn vitest run --merge-reports --reporter=junit --outputFile=junit.xml
|
||||
- store_test_results:
|
||||
path: code/junit.xml
|
||||
coverage:
|
||||
executor:
|
||||
class: small
|
||||
@ -654,6 +675,31 @@ jobs:
|
||||
STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >>
|
||||
STORYBOOK_DISABLE_TELEMETRY: true
|
||||
- report-workflow-on-failure
|
||||
test-ui-testing-module:
|
||||
executor:
|
||||
name: sb_playwright
|
||||
class: medium
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: "--depth 1 --verbose"
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: Install dependencies
|
||||
command: yarn install --no-immutable
|
||||
working_directory: test-storybooks/portable-stories-kitchen-sink/react
|
||||
environment:
|
||||
YARN_ENABLE_IMMUTABLE_INSTALLS: false
|
||||
- run:
|
||||
name: Run E2E tests
|
||||
command: yarn playwright-e2e
|
||||
working_directory: test-storybooks/portable-stories-kitchen-sink/react
|
||||
- store_test_results:
|
||||
path: test-results
|
||||
- store_artifacts:
|
||||
path: test-storybooks/portable-stories-kitchen-sink/react/test-results/
|
||||
destination: playwright
|
||||
- report-workflow-on-failure
|
||||
test-portable-stories:
|
||||
parameters:
|
||||
directory:
|
||||
@ -682,7 +728,7 @@ jobs:
|
||||
working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
|
||||
- run:
|
||||
name: Run Playwright CT tests
|
||||
command: yarn playwright
|
||||
command: yarn playwright-ct
|
||||
working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
|
||||
- run:
|
||||
name: Run Cypress CT tests
|
||||
@ -713,6 +759,9 @@ workflows:
|
||||
- unit-tests:
|
||||
requires:
|
||||
- build
|
||||
- store-test-results:
|
||||
requires:
|
||||
- unit-tests
|
||||
- script-checks:
|
||||
requires:
|
||||
- build
|
||||
@ -754,6 +803,9 @@ workflows:
|
||||
parallelism: 5
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- test-ui-testing-module:
|
||||
requires:
|
||||
- build
|
||||
- test-portable-stories:
|
||||
requires:
|
||||
- build
|
||||
@ -782,6 +834,9 @@ workflows:
|
||||
- unit-tests:
|
||||
requires:
|
||||
- build
|
||||
- store-test-results:
|
||||
requires:
|
||||
- unit-tests
|
||||
- script-checks:
|
||||
requires:
|
||||
- build
|
||||
@ -825,6 +880,9 @@ workflows:
|
||||
matrix:
|
||||
parameters:
|
||||
directory: ["react", "vue3", "nextjs", "svelte"]
|
||||
- test-ui-testing-module:
|
||||
requires:
|
||||
- build
|
||||
- bench:
|
||||
parallelism: 5
|
||||
requires:
|
||||
@ -852,6 +910,9 @@ workflows:
|
||||
- unit-tests:
|
||||
requires:
|
||||
- build
|
||||
- store-test-results:
|
||||
requires:
|
||||
- unit-tests
|
||||
- script-checks:
|
||||
requires:
|
||||
- build
|
||||
@ -895,6 +956,9 @@ workflows:
|
||||
matrix:
|
||||
parameters:
|
||||
directory: ["react", "vue3", "nextjs", "svelte"]
|
||||
- test-ui-testing-module:
|
||||
requires:
|
||||
- build
|
||||
- test-empty-init:
|
||||
requires:
|
||||
- build
|
||||
|
||||
2
.github/workflows/generate-sandboxes.yml
vendored
2
.github/workflows/generate-sandboxes.yml
vendored
@ -29,7 +29,7 @@ jobs:
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
ref: next
|
||||
|
||||
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version-file: ".nvmrc"
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
## 8.3.6
|
||||
|
||||
- CLI: Install Svelte CSF v5 in Svelte5 projects - [#29323](https://github.com/storybookjs/storybook/pull/29323), thanks @shilman!
|
||||
- Svelte: Add v5 stories to CLI templates - [#29382](https://github.com/storybookjs/storybook/pull/29382), thanks @JReinhold!
|
||||
|
||||
## 8.3.5
|
||||
|
||||
- CLI: Update the React Native init to include v8 dependencies - [#29273](https://github.com/storybookjs/storybook/pull/29273), thanks @dannyhw!
|
||||
|
||||
@ -1,3 +1,35 @@
|
||||
## 8.4.0-beta.0
|
||||
|
||||
- Core: Add unified UI Testing Module - [#29241](https://github.com/storybookjs/storybook/pull/29241), thanks @yannbf!
|
||||
- Svelte: Improve argTypes inference with `svelte2tsx` - support runes - [#29423](https://github.com/storybookjs/storybook/pull/29423), thanks @JReinhold!
|
||||
|
||||
## 8.4.0-alpha.8
|
||||
|
||||
- Addon-Test: Support for `@vitest/browser` v2.1.2 - [#29407](https://github.com/storybookjs/storybook/pull/29407), thanks @strozw!
|
||||
- ConfigFile: Fix `export { X }` parsing - [#29344](https://github.com/storybookjs/storybook/pull/29344), thanks @vctqs1!
|
||||
- Core: Fix building Storybook deleting project root files - [#29371](https://github.com/storybookjs/storybook/pull/29371), thanks @JReinhold!
|
||||
- Interactions: Escape xml of interactions errors - [#29414](https://github.com/storybookjs/storybook/pull/29414), thanks @kasperpeulen!
|
||||
- Svelte: Add v5 stories to CLI templates - [#29382](https://github.com/storybookjs/storybook/pull/29382), thanks @JReinhold!
|
||||
- Test: Remove unused `util` dependency - [#29310](https://github.com/storybookjs/storybook/pull/29310), thanks @JReinhold!
|
||||
- UI: Fix RefIndicator to use CheckIcon instead of string - [#29209](https://github.com/storybookjs/storybook/pull/29209), thanks @JSMike!
|
||||
- UI: Simple tag filtering - [#29333](https://github.com/storybookjs/storybook/pull/29333), thanks @shilman!
|
||||
|
||||
## 8.4.0-alpha.7
|
||||
|
||||
- CLI: Install Svelte CSF v5 in Svelte5 projects - [#29323](https://github.com/storybookjs/storybook/pull/29323), thanks @shilman!
|
||||
- Manager: Add tags property to ComponentEntry objects - [#29343](https://github.com/storybookjs/storybook/pull/29343), thanks @Sidnioulz!
|
||||
|
||||
## 8.4.0-alpha.6
|
||||
|
||||
- Addon-docs, blocks: Prebundle dependencies - [#29301](https://github.com/storybookjs/storybook/pull/29301), thanks @JReinhold!
|
||||
- React: Prebundle all of `renderers/react`'s dependencies - [#29298](https://github.com/storybookjs/storybook/pull/29298), thanks @ndelangen!
|
||||
- Vite: Cleanup and prebundle dependencies - [#29302](https://github.com/storybookjs/storybook/pull/29302), thanks @JReinhold!
|
||||
|
||||
## 8.4.0-alpha.5
|
||||
|
||||
- Core: Migrate from `express` to `polka` - [#29230](https://github.com/storybookjs/storybook/pull/29230), thanks @43081j!
|
||||
- Core: Remove dependence on `file-system-cache` - [#29256](https://github.com/storybookjs/storybook/pull/29256), thanks @ndelangen!
|
||||
|
||||
## 8.4.0-alpha.4
|
||||
|
||||
- Blocks: Prebundle `es-toolkit` - [#29259](https://github.com/storybookjs/storybook/pull/29259), thanks @JReinhold!
|
||||
|
||||
@ -86,7 +86,7 @@ View [Component Encyclopedia](https://storybook.js.org/showcase) to see how lead
|
||||
|
||||
Use [storybook.new](https://storybook.new) to quickly create an example project in Stackblitz.
|
||||
|
||||
Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile.
|
||||
Storybook comes with a lot of [addons](https://storybook.js.org/docs/configure/user-interface/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile.
|
||||
|
||||
### Community
|
||||
|
||||
@ -97,10 +97,10 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/
|
||||
### Supported Frameworks
|
||||
|
||||
| Renderer | Demo | |
|
||||
|----------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [React](code/renderers/react) | [](https://next--630511d655df72125520f051.chromatic.com/) | [](code/renderers/react) |
|
||||
| [Angular](code/frameworks/angular/) | [](https://next--6322ce6af69825592bbb28fc.chromatic.com/) | [](code/frameworks/angular/) |
|
||||
| [Vue 3](code/renderers/vue3) | [](https://next--630513346a8e284ae244d415.chromatic.com/) | [](code/renderers/vue3/) |
|
||||
| [Vue 3](code/renderers/vue3) | [](https://next--630513346a8e284ae244d415.chromatic.com/) | [](code/renderers/vue3/) |
|
||||
| [Web components](code/renderers/web-components) | [](https://next--638db5bf49adfdfe8cf545e0.chromatic.com/) | [](code/renderers/web-components) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | [](/) | [](https://github.com/storybookjs/react-native) |
|
||||
| [HTML](code/renderers/html) | [](https://next--63dd39a158cf6fc05199b4bb.chromatic.com/) | [](code/renderers/html) |
|
||||
@ -132,7 +132,7 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/
|
||||
| [storysource](code/addons/storysource/) | View the code of your stories within the Storybook UI |
|
||||
| [viewport](code/addons/viewport/) | Change display sizes and layouts for responsive components using Storybook |
|
||||
|
||||
See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
See [Addon / Framework Support Table](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
|
||||
|
||||
To continue improving your experience, we have to eventually deprecate or remove certain addons in favor of new and better tools.
|
||||
|
||||
@ -237,7 +237,6 @@ By making a recurring donation, you can support us and our work. \[[Become a bac
|
||||
|
||||
<a href="https://opencollective.com/storybook"><img src="https://opencollective.com/storybook/tiers/backers.svg?limit=80&button=false&avatarHeight=46&width=750"></a>
|
||||
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/storybookjs/storybook/blob/main/LICENSE)
|
||||
|
||||
@ -80,15 +80,22 @@ const config: StorybookConfig = {
|
||||
directory: '../addons/interactions/src',
|
||||
titlePrefix: 'addons/interactions',
|
||||
},
|
||||
// {
|
||||
// directory: '../addons/interactions/template/stories',
|
||||
// titlePrefix: 'addons/interactions',
|
||||
// },
|
||||
{
|
||||
directory: '../addons/interactions/template/stories',
|
||||
titlePrefix: 'addons/interactions/tests',
|
||||
},
|
||||
{
|
||||
directory: '../addons/test/src/components',
|
||||
titlePrefix: 'addons/test',
|
||||
},
|
||||
{
|
||||
directory: '../addons/test/template/stories',
|
||||
titlePrefix: 'addons/test',
|
||||
},
|
||||
],
|
||||
addons: [
|
||||
'@storybook/addon-themes',
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-interactions',
|
||||
'@storybook/addon-storysource',
|
||||
'@storybook/addon-designs',
|
||||
'@storybook/experimental-addon-test',
|
||||
|
||||
@ -18,8 +18,6 @@ import { DocsContext } from '@storybook/blocks';
|
||||
import { global } from '@storybook/global';
|
||||
import type { Decorator, Loader, ReactRenderer } from '@storybook/react';
|
||||
|
||||
import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
|
||||
|
||||
import { DocsPageWrapper } from '../lib/blocks/src/components';
|
||||
import { isChromatic } from './isChromatic';
|
||||
|
||||
@ -135,7 +133,9 @@ export const loaders = [
|
||||
* The DocsContext will then be added via the decorator below.
|
||||
*/
|
||||
async ({ parameters: { relativeCsfPaths, attached = true } }) => {
|
||||
if (!relativeCsfPaths) {
|
||||
// TODO bring a better way to skip tests when running as part of the vitest plugin instead of __STORYBOOK_URL__
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
if (!relativeCsfPaths || (import.meta as any).env?.__STORYBOOK_URL__) {
|
||||
return {};
|
||||
}
|
||||
const csfFiles = await Promise.all(
|
||||
@ -358,3 +358,5 @@ export const parameters = {
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const tags = ['test', 'vitest'];
|
||||
|
||||
@ -3,6 +3,9 @@ import { beforeAll, vi, expect as vitestExpect } from 'vitest';
|
||||
import { setProjectAnnotations } from '@storybook/react';
|
||||
import { userEvent as storybookEvent, expect as storybookExpect } from '@storybook/test';
|
||||
|
||||
// eslint-disable-next-line import/namespace
|
||||
import * as testAnnotations from '@storybook/experimental-addon-test/preview';
|
||||
|
||||
import * as coreAnnotations from '../addons/toolbars/template/stories/preview';
|
||||
import * as componentAnnotations from '../core/template/stories/preview';
|
||||
// register global components used in many stories
|
||||
@ -17,6 +20,7 @@ const annotations = setProjectAnnotations([
|
||||
// @ts-expect-error check type errors later
|
||||
componentAnnotations,
|
||||
coreAnnotations,
|
||||
testAnnotations,
|
||||
{
|
||||
// experiment with injecting Vitest's interactivity API over our userEvent while tests run in browser mode
|
||||
// https://vitest.dev/guide/browser/interactivity-api.html
|
||||
|
||||
@ -19,11 +19,15 @@ if (process.env.INSPECT === 'true') {
|
||||
|
||||
export default mergeConfig(
|
||||
vitestCommonConfig,
|
||||
// @ts-expect-error added this because of testNamePattern below
|
||||
defineProject({
|
||||
plugins: [
|
||||
import('@storybook/experimental-addon-test/vitest-plugin').then(({ storybookTest }) =>
|
||||
storybookTest({
|
||||
configDir: process.cwd(),
|
||||
tags: {
|
||||
include: ['vitest'],
|
||||
},
|
||||
})
|
||||
),
|
||||
...extraPlugins,
|
||||
@ -31,17 +35,23 @@ export default mergeConfig(
|
||||
test: {
|
||||
name: 'storybook-ui',
|
||||
include: [
|
||||
// TODO: test all core and addon stories later
|
||||
// './core/**/components/**/*.{story,stories}.?(c|m)[jt]s?(x)',
|
||||
'../addons/**/src/**/*.{story,stories}.?(c|m)[jt]s?(x)',
|
||||
'../addons/**/*.{story,stories}.?(c|m)[jt]s?(x)',
|
||||
// '../core/template/stories/**/*.{story,stories}.?(c|m)[jt]s?(x)',
|
||||
'../core/src/manager/**/*.{story,stories}.?(c|m)[jt]s?(x)',
|
||||
'../core/src/preview-api/**/*.{story,stories}.?(c|m)[jt]s?(x)',
|
||||
'../core/src/components/{brand,components}/**/*.{story,stories}.?(c|m)[jt]s?(x)',
|
||||
],
|
||||
exclude: [
|
||||
...defaultExclude,
|
||||
'../node_modules/**',
|
||||
'**/__mockdata__/**',
|
||||
'../**/__mockdata__/**',
|
||||
// expected to fail in Vitest because of fetching /iframe.html to cause ECONNREFUSED
|
||||
'**/Zoom.stories.tsx',
|
||||
],
|
||||
// TODO: bring this back once portable stories support @storybook/core/preview-api hooks
|
||||
// @ts-expect-error this type does not exist but the property does!
|
||||
testNamePattern: /^(?!.*(UseState)).*$/,
|
||||
browser: {
|
||||
enabled: true,
|
||||
name: 'chromium',
|
||||
|
||||
@ -1,97 +0,0 @@
|
||||
diff --git a/package.json b/package.json
|
||||
index 195dac9ee7d42fdb76bb22dc37580fa0bffd4680..980ad42f41a06023f9f7e370fd382c9217c24be5 100644
|
||||
--- a/package.json
|
||||
+++ b/package.json
|
||||
@@ -55,7 +55,7 @@
|
||||
"contributors:generate": "all-contributors generate"
|
||||
},
|
||||
"peerDependencies": {
|
||||
- "svelte": "^3 || ^4"
|
||||
+ "svelte": "^3 || ^4 || ^5"
|
||||
},
|
||||
"dependencies": {
|
||||
"@testing-library/dom": "^9.3.1"
|
||||
diff --git a/src/pure.js b/src/pure.js
|
||||
index 6d4943412448c9f310f007ca7dab9d04cef90d0d..d62f4aebeb1b23ccc3c3d82aadd67075c6507c0e 100644
|
||||
--- a/src/pure.js
|
||||
+++ b/src/pure.js
|
||||
@@ -3,7 +3,7 @@ import {
|
||||
getQueriesForElement,
|
||||
prettyDOM
|
||||
} from '@testing-library/dom'
|
||||
-import { tick } from 'svelte'
|
||||
+import { tick, mount, unmount } from 'svelte'
|
||||
|
||||
const containerCache = new Set()
|
||||
const componentCache = new Set()
|
||||
@@ -54,40 +54,34 @@ const render = (
|
||||
return { props: options }
|
||||
}
|
||||
|
||||
- let component = new ComponentConstructor({
|
||||
+ let component = mount(ComponentConstructor, {
|
||||
target,
|
||||
- ...checkProps(options)
|
||||
+ ...checkProps(options),
|
||||
+ ondestroy: () => componentCache.delete(component)
|
||||
})
|
||||
|
||||
containerCache.add({ container, target, component })
|
||||
componentCache.add(component)
|
||||
|
||||
- component.$$.on_destroy.push(() => {
|
||||
- componentCache.delete(component)
|
||||
- })
|
||||
-
|
||||
return {
|
||||
container,
|
||||
component,
|
||||
debug: (el = container) => console.log(prettyDOM(el)),
|
||||
rerender: (options) => {
|
||||
- if (componentCache.has(component)) component.$destroy()
|
||||
+ if (componentCache.has(component)) unmount(component)
|
||||
|
||||
// eslint-disable-next-line no-new
|
||||
component = new ComponentConstructor({
|
||||
target,
|
||||
- ...checkProps(options)
|
||||
+ ...checkProps(options),
|
||||
+ ondestroy: () => componentCache.delete(component)
|
||||
})
|
||||
|
||||
containerCache.add({ container, target, component })
|
||||
componentCache.add(component)
|
||||
-
|
||||
- component.$$.on_destroy.push(() => {
|
||||
- componentCache.delete(component)
|
||||
- })
|
||||
},
|
||||
unmount: () => {
|
||||
- if (componentCache.has(component)) component.$destroy()
|
||||
+ if (componentCache.has(component)) unmount(component)
|
||||
},
|
||||
...getQueriesForElement(container, queries)
|
||||
}
|
||||
@@ -96,7 +90,7 @@ const render = (
|
||||
const cleanupAtContainer = (cached) => {
|
||||
const { target, component } = cached
|
||||
|
||||
- if (componentCache.has(component)) component.$destroy()
|
||||
+ if (componentCache.has(component)) unmount(component)
|
||||
|
||||
if (target.parentNode === document.body) {
|
||||
document.body.removeChild(target)
|
||||
@@ -109,9 +103,10 @@ const cleanup = () => {
|
||||
Array.from(containerCache.keys()).forEach(cleanupAtContainer)
|
||||
}
|
||||
|
||||
-const act = async (fn) => {
|
||||
- if (fn) {
|
||||
- await fn()
|
||||
+const act = (fn) => {
|
||||
+ const value = fn && fn()
|
||||
+ if (value !== undefined && typeof value.then === 'function') {
|
||||
+ return value.then(() => tick())
|
||||
}
|
||||
return tick()
|
||||
}
|
||||
@ -19,6 +19,7 @@ export const realpathSync = vi.fn();
|
||||
export const readdir = vi.fn();
|
||||
export const readdirSync = vi.fn();
|
||||
export const readlinkSync = vi.fn();
|
||||
export const mkdirSync = vi.fn();
|
||||
|
||||
export default {
|
||||
__setMockFiles,
|
||||
@ -29,4 +30,5 @@ export default {
|
||||
readdir,
|
||||
readdirSync,
|
||||
readlinkSync,
|
||||
mkdirSync,
|
||||
};
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
This Storybook addon can be helpful to make your UI components more accessible.
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "8.4.0-alpha.4",
|
||||
"version": "8.4.0-beta.0",
|
||||
"description": "Test component compliance with web accessibility standards",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -60,7 +60,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/icons": "^1.2.10",
|
||||
"@storybook/icons": "^1.2.12",
|
||||
"@testing-library/react": "^14.0.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
## Advanced/Legacy Actions usage
|
||||
|
||||
For basic usage, see the [documentation](https://storybook.js.org/docs/react/essentials/actions).
|
||||
For basic usage, see the [documentation](https://storybook.js.org/docs/essentials/actions).
|
||||
|
||||
This document describes the pre-6.0 usage of the addon, and as such is no longer recommended (although it will be supported until at least 7.0).
|
||||
|
||||
|
||||
@ -2,19 +2,19 @@
|
||||
|
||||
Storybook Addon Actions can be used to display data received by event handlers in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
Actions is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
|
||||
Actions is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
|
||||
|
||||
```sh
|
||||
npm i -D @storybook/addon-actions
|
||||
```
|
||||
|
||||
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
|
||||
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
|
||||
|
||||
```js
|
||||
export default {
|
||||
@ -24,4 +24,4 @@ export default {
|
||||
|
||||
## Usage
|
||||
|
||||
The basic usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/actions). For legacy usage, see the [advanced README](./ADVANCED.md).
|
||||
The basic usage is documented in the [documentation](https://storybook.js.org/docs/essentials/actions). For legacy usage, see the [advanced README](./ADVANCED.md).
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "8.4.0-alpha.4",
|
||||
"version": "8.4.0-beta.0",
|
||||
"description": "Get UI feedback when an action is performed on an interactive element",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
|
||||
Storybook Addon Backgrounds can be used to change background colors inside the preview in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
Backgrounds is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
|
||||
Backgrounds is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
|
||||
|
||||
```sh
|
||||
npm i -D @storybook/addon-backgrounds
|
||||
@ -16,7 +16,7 @@ npm i -D @storybook/addon-backgrounds
|
||||
|
||||
## Configuration
|
||||
|
||||
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
|
||||
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
|
||||
|
||||
```js
|
||||
export default {
|
||||
@ -26,4 +26,4 @@ export default {
|
||||
|
||||
## Usage
|
||||
|
||||
The usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/backgrounds).
|
||||
The usage is documented in the [documentation](https://storybook.js.org/docs/essentials/backgrounds).
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "8.4.0-alpha.4",
|
||||
"version": "8.4.0-beta.0",
|
||||
"description": "Switch backgrounds to view components in different settings",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -60,7 +60,7 @@
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/icons": "^1.2.10",
|
||||
"@storybook/icons": "^1.2.12",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"typescript": "^5.3.2"
|
||||
|
||||
@ -2,19 +2,19 @@
|
||||
|
||||
[Storybook](https://storybook.js.org) Controls gives you a graphical UI to interact with a component's arguments dynamically, without needing to code. It creates an addon panel next to your component examples ("stories"), so you can edit them live.
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
Controls is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
|
||||
Controls is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
|
||||
|
||||
```sh
|
||||
npm i -D @storybook/addon-controls
|
||||
```
|
||||
|
||||
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
|
||||
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
|
||||
|
||||
```js
|
||||
export default {
|
||||
@ -24,7 +24,7 @@ export default {
|
||||
|
||||
## Usage
|
||||
|
||||
The usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/controls).
|
||||
The usage is documented in the [documentation](https://storybook.js.org/docs/essentials/controls).
|
||||
|
||||
## FAQs
|
||||
|
||||
@ -92,7 +92,7 @@ export const Reflow = () => {
|
||||
};
|
||||
```
|
||||
|
||||
And again, as above, this can be rewritten using [fully custom args](https://storybook.js.org/docs/react/essentials/controls#fully-custom-args):
|
||||
And again, as above, this can be rewritten using [fully custom args](https://storybook.js.org/docs/essentials/controls#fully-custom-args):
|
||||
|
||||
```jsx
|
||||
export const Reflow = ({ count, label, ...args }) => (
|
||||
@ -123,7 +123,7 @@ Reflow.argTypes = {
|
||||
|
||||
There are a few known cases where controls can't be auto-generated:
|
||||
|
||||
- You're using a framework for which automatic generation [isn't supported](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
- You're using a framework for which automatic generation [isn't supported](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
|
||||
- You're trying to generate controls for a component defined in an external library
|
||||
|
||||
With a little manual work you can still use controls in such cases. Consider the following example:
|
||||
@ -147,7 +147,7 @@ Basic.args = {
|
||||
};
|
||||
```
|
||||
|
||||
The `argTypes` annotation (which can also be applied to individual stories if needed), gives Storybook the hints it needs to generate controls in these unsupported cases. See [control annotations](https://storybook.js.org/docs/react/essentials/controls#annotation) for a full list of control types.
|
||||
The `argTypes` annotation (which can also be applied to individual stories if needed), gives Storybook the hints it needs to generate controls in these unsupported cases. See [control annotations](https://storybook.js.org/docs/essentials/controls#annotation) for a full list of control types.
|
||||
|
||||
It's also possible that your Storybook is misconfigured. If you think this might be the case, please search through Storybook's [Github issues](https://github.com/storybookjs/storybook/issues), and file a new issue if you don't find one that matches your use case.
|
||||
|
||||
@ -172,7 +172,7 @@ CustomControls.argTypes = {
|
||||
};
|
||||
```
|
||||
|
||||
Like [story parameters](https://storybook.js.org/docs/react/writing-stories/parameters), `args` and `argTypes` annotations are hierarchically merged, so story-level annotations overwrite component-level annotations.
|
||||
Like [story parameters](https://storybook.js.org/docs/writing-stories/parameters), `args` and `argTypes` annotations are hierarchically merged, so story-level annotations overwrite component-level annotations.
|
||||
|
||||
### How do controls work with MDX?
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-controls",
|
||||
"version": "8.4.0-alpha.4",
|
||||
"version": "8.4.0-beta.0",
|
||||
"description": "Interact with component inputs dynamically in the Storybook UI",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -56,7 +56,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/blocks": "workspace:*",
|
||||
"@storybook/icons": "^1.2.10",
|
||||
"@storybook/icons": "^1.2.12",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
|
||||
@ -76,7 +76,7 @@ For more information on `MDX`, see the [`MDX` reference](https://github.com/stor
|
||||
|
||||
Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some framework-specific features as well, such as props tables and inline story rendering. The following page captures the current state of support:
|
||||
|
||||
[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
|
||||
|
||||
**Note:** `#` = WIP support
|
||||
|
||||
@ -139,11 +139,11 @@ export default {
|
||||
|
||||
`csfPluginOptions` is an object for configuring `@storybook/csf-plugin`. When set to `null` it tells docs not to run the `csf-plugin` at all, which can be used as an optimization, or if you're already using `csf-plugin` in your `main.js`.
|
||||
|
||||
> With the release of version 7.0, it is no longer possible to import `.md` files directly into Storybook using the `transcludeMarkdown` [option](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed). Instead, we recommend using the [`Markdown`](https://storybook.js.org/docs/react/api/doc-block-markdown) Doc Block for importing Markdown files into your Storybook documentation.
|
||||
> With the release of version 7.0, it is no longer possible to import `.md` files directly into Storybook using the `transcludeMarkdown` [option](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed). Instead, we recommend using the [`Markdown`](https://storybook.js.org/docs/api/doc-blocks/doc-block-markdown) Doc Block for importing Markdown files into your Storybook documentation.
|
||||
|
||||
## TypeScript configuration
|
||||
|
||||
As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/react/configure/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md).
|
||||
As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/configure/integration/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md).
|
||||
|
||||
## More resources
|
||||
|
||||
|
||||
3
code/addons/docs/angular/index.js
vendored
3
code/addons/docs/angular/index.js
vendored
@ -1,7 +1,6 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import { global } from '@storybook/global';
|
||||
|
||||
export const setCompodocJson = (compodocJson) => {
|
||||
// @ts-expect-error (Converted from ts-ignore)
|
||||
global.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
|
||||
globalThis.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
|
||||
};
|
||||
|
||||
@ -34,7 +34,7 @@ However, `DocsPage` brings the following improvements:
|
||||
|
||||
Storybook uses `component` to extract the component's description and props, and will rely on it further in future releases. We encourage you to add it to existing stories and use it in all new stories.
|
||||
|
||||
Here's how to set the component in [Component Story Format (CSF)](https://storybook.js.org/docs/react/api/csf):
|
||||
Here's how to set the component in [Component Story Format (CSF)](https://storybook.js.org/docs/api/csf):
|
||||
|
||||
```js
|
||||
import { Badge } from './Badge';
|
||||
|
||||
@ -149,7 +149,7 @@ You can also use the rest of the MDX features in conjunction with embedding. Tha
|
||||
|
||||
## Decorators and parameters
|
||||
|
||||
To add [decorators](https://storybook.js.org/docs/react/writing-stories/decorators) and [parameters](https://storybook.js.org/docs/react/writing-stories/parameters) in MDX:
|
||||
To add [decorators](https://storybook.js.org/docs/writing-stories/decorators) and [parameters](https://storybook.js.org/docs/writing-stories/parameters) in MDX:
|
||||
|
||||
```md
|
||||
<Meta
|
||||
|
||||
@ -106,7 +106,7 @@ The input is the story function and the story context (id, parameters, args, etc
|
||||
|
||||
## Dynamic source rendering
|
||||
|
||||
With the release of Storybook 6.0, we've improved how stories are rendered in the [`Source` doc block](https://storybook.js.org/docs/react/api/doc-block-source). One of such improvements is the `dynamic` source type, which renders a snippet based on the output the story function.
|
||||
With the release of Storybook 6.0, we've improved how stories are rendered in the [`Source` doc block](https://storybook.js.org/docs/api/doc-blocks/doc-block-source). One of such improvements is the `dynamic` source type, which renders a snippet based on the output the story function.
|
||||
|
||||
This dynamic rendering is framework-specific, meaning it needs a custom implementation for each framework.
|
||||
|
||||
|
||||
@ -59,7 +59,7 @@ Starting in SB 6.0, the `ArgsTable` block has built-in `Controls` (formerly know
|
||||
|
||||
<br/>
|
||||
|
||||
These controls are implemented to appear automatically in the props table when your story accepts [Storybook Args](https://storybook.js.org/docs/react/api/csf#args-story-inputs) as its input. This is done slightly differently depending on whether you're using `DocsPage` or `MDX`.
|
||||
These controls are implemented to appear automatically in the props table when your story accepts [Storybook Args](https://storybook.js.org/docs/api/csf#args-story-inputs) as its input. This is done slightly differently depending on whether you're using `DocsPage` or `MDX`.
|
||||
|
||||
**DocsPage.** In [DocsPage](./docspage.md), simply write your story to consume args and the auto-generated props table will display controls in the right-most column:
|
||||
|
||||
@ -82,7 +82,7 @@ export const WithControls = (args) => <MyComponent {...args} />;
|
||||
<ArgsTable story="Controls" />
|
||||
```
|
||||
|
||||
For a very detailed walkthrough of how to write stories that use controls, read the [documentation](https://storybook.js.org/docs/react/essentials/controls).
|
||||
For a very detailed walkthrough of how to write stories that use controls, read the [documentation](https://storybook.js.org/docs/essentials/controls).
|
||||
|
||||
## Customization
|
||||
|
||||
@ -187,20 +187,20 @@ This would render a row with a modified description, a type display with a dropd
|
||||
> - `type: 'number'` is shorthand for `type: { name: 'number' }`
|
||||
> - `control: 'radio'` is shorthand for `control: { type: 'radio' }`
|
||||
|
||||
Controls customization has an entire section in the [documentation](https://storybook.js.org/docs/react/essentials/controls#configuration).
|
||||
Controls customization has an entire section in the [documentation](https://storybook.js.org/docs/essentials/controls#configuration).
|
||||
|
||||
Here are the possible customizations for the rest of the prop table:
|
||||
|
||||
| Field | Description |
|
||||
| ---------------------------- | ---------------------------------------------------------------------------------------------------- |
|
||||
| `name` | The name of the property |
|
||||
| `type.required` | Whether or not the property is required |
|
||||
| `description` | A markdown description for the property |
|
||||
| `table.type.summary` | A short version of the type |
|
||||
| `table.type.detail` | A longer version of the type (if it's a complex type) |
|
||||
| `table.defaultValue.summary` | A short version of the default value |
|
||||
| `table.defaultValue.detail` | A longer version of the default value (if it's a complex value) |
|
||||
| `control` | See [`addon-controls` README](https://storybook.js.org/docs/react/essentials/controls#configuration) |
|
||||
| Field | Description |
|
||||
| ---------------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| `name` | The name of the property |
|
||||
| `type.required` | Whether or not the property is required |
|
||||
| `description` | A markdown description for the property |
|
||||
| `table.type.summary` | A short version of the type |
|
||||
| `table.type.detail` | A longer version of the type (if it's a complex type) |
|
||||
| `table.defaultValue.summary` | A short version of the default value |
|
||||
| `table.defaultValue.detail` | A longer version of the default value (if it's a complex value) |
|
||||
| `control` | See [`addon-controls` README](https://storybook.js.org/docs/essentials/controls#configuration) |
|
||||
|
||||
## Reporting a bug
|
||||
|
||||
|
||||
@ -282,7 +282,7 @@ These two methods are complementary. The former is useful for story-specific, an
|
||||
|
||||
What happens if you want to add some wrapper for your MDX page, or add some other kind of React context?
|
||||
|
||||
When you're writing stories you can do this by adding a [decorator](https://storybook.js.org/docs/react/writing-stories/decorators), but when you're adding arbitrary JSX to your MDX documentation outside of a `<Story>` block, decorators no longer apply, and you need to use the `docs.container` parameter.
|
||||
When you're writing stories you can do this by adding a [decorator](https://storybook.js.org/docs/writing-stories/decorators), but when you're adding arbitrary JSX to your MDX documentation outside of a `<Story>` block, decorators no longer apply, and you need to use the `docs.container` parameter.
|
||||
|
||||
The closest Docs equivalent of a decorator is the `container`, a wrapper element that is rendered around the page that is being rendered. Here's an example of adding a solid red border around the page. It uses Storybook's default page container (that sets up various contexts and other magic) and then inserts its own logic between that container and the contents of the page:
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
## Storybook theming
|
||||
|
||||
Storybook theming is the **recommended way** to theme your docs. Docs uses the same theme system as [Storybook UI](https://storybook.js.org/docs/react/configure/theming), but is themed independently from the main UI.
|
||||
Storybook theming is the **recommended way** to theme your docs. Docs uses the same theme system as [Storybook UI](https://storybook.js.org/docs/configure/user-interface/theming), but is themed independently from the main UI.
|
||||
|
||||
Supposing you have a Storybook theme defined for the main UI in `.storybook/manager.js`:
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import { global } from '@storybook/global';
|
||||
|
||||
export const setJSONDoc = (jsondoc) => {
|
||||
global.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
|
||||
globalThis.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "8.4.0-alpha.4",
|
||||
"version": "8.4.0-beta.0",
|
||||
"description": "Document component usage and properties in Markdown",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -100,20 +100,19 @@
|
||||
"@mdx-js/react": "^3.0.0",
|
||||
"@storybook/blocks": "workspace:*",
|
||||
"@storybook/csf-plugin": "workspace:*",
|
||||
"@storybook/global": "^5.0.0",
|
||||
"@storybook/react-dom-shim": "workspace:*",
|
||||
"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"rehype-external-links": "^3.0.0",
|
||||
"rehype-slug": "^6.0.0",
|
||||
"ts-dedent": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@mdx-js/mdx": "^3.0.0",
|
||||
"@rollup/pluginutils": "^5.0.2",
|
||||
"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"rehype-external-links": "^3.0.0",
|
||||
"rehype-slug": "^6.0.0",
|
||||
"typescript": "^5.3.2",
|
||||
"vite": "^4.0.4"
|
||||
},
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
import type { PreparedStory } from 'storybook/internal/types';
|
||||
|
||||
import { global } from '@storybook/global';
|
||||
|
||||
const excludeTags = Object.entries(global.TAGS_OPTIONS ?? {}).reduce(
|
||||
const excludeTags = Object.entries(globalThis.TAGS_OPTIONS ?? {}).reduce(
|
||||
(acc, entry) => {
|
||||
const [tag, option] = entry;
|
||||
if ((option as any).excludeFromDocsStories) {
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import { global as globalThis } from '@storybook/global';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
tags: ['autodocs'],
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import { global as globalThis } from '@storybook/global';
|
||||
|
||||
export default {
|
||||
title: 'Multiple CSF Files Same Title',
|
||||
component: globalThis.Components.Html,
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import { global as globalThis } from '@storybook/global';
|
||||
|
||||
export default {
|
||||
title: 'Multiple CSF Files Same Title',
|
||||
component: globalThis.Components.Html,
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { global as globalThis } from '@storybook/global';
|
||||
import { expect, within } from '@storybook/test';
|
||||
|
||||
export default {
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { global as globalThis } from '@storybook/global';
|
||||
import { fn } from '@storybook/test';
|
||||
|
||||
export default {
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import { global as globalThis } from '@storybook/global';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
subcomponents: {
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import { global as globalThis } from '@storybook/global';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
tags: ['autodocs', '!test', '!vitest'],
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import { global as globalThis } from '@storybook/global';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
tags: ['autodocs'],
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import { global as globalThis } from '@storybook/global';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
tags: ['autodocs'],
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import { global as globalThis } from '@storybook/global';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Pre,
|
||||
tags: ['autodocs'],
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import { global as globalThis } from '@storybook/global';
|
||||
|
||||
// FIXME: do this using basic React functions for multi-framework
|
||||
// once sandbox linking is working
|
||||
//
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import type { StoryContext } from 'storybook/internal/types';
|
||||
|
||||
import { global as globalThis } from '@storybook/global';
|
||||
|
||||
import { dedent } from 'ts-dedent';
|
||||
|
||||
export default {
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
import { global as globalThis } from '@storybook/global';
|
||||
import { fn } from '@storybook/test';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
tags: ['autodocs'],
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import { global as globalThis } from '@storybook/global';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
tags: ['autodocs'],
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import { global as globalThis } from '@storybook/global';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
tags: ['autodocs'],
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import { global as globalThis } from '@storybook/global';
|
||||
|
||||
export default {
|
||||
component: globalThis.Components.Button,
|
||||
tags: ['autodocs'],
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
Storybook Essentials is a curated collection of addons to bring out the best of Storybook.
|
||||
|
||||
Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://storybook.js.org/docs/react/api/frameworks-feature-support) for all of the officially supported frameworks.
|
||||
Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) for all of the officially supported frameworks.
|
||||
|
||||
## Contents
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "8.4.0-alpha.4",
|
||||
"version": "8.4.0-beta.0",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-mdx-gfm",
|
||||
"version": "8.4.0-alpha.4",
|
||||
"version": "8.4.0-beta.0",
|
||||
"description": "GitHub Flavored Markdown in Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -8,7 +8,7 @@ Use it to call attention to particular parts of the story. Or use it to enhance
|
||||
|
||||
## Usage
|
||||
|
||||
This addon requires Storybook 6.5 or later. Highlight is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run the following command:
|
||||
This addon requires Storybook 6.5 or later. Highlight is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run the following command:
|
||||
|
||||
yarn:
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-highlight",
|
||||
"version": "8.4.0-alpha.4",
|
||||
"version": "8.4.0-beta.0",
|
||||
"description": "Highlight DOM nodes within your stories",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-interactions",
|
||||
"version": "8.4.0-alpha.4",
|
||||
"version": "8.4.0-beta.0",
|
||||
"description": "Automate, test and debug user interactions",
|
||||
"keywords": [
|
||||
"storybook-addons",
|
||||
|
||||
@ -18,3 +18,6 @@ export const checkActionsLoaded = (configDir: string) => {
|
||||
getConfig: (configFile) => serverRequire(configFile),
|
||||
});
|
||||
};
|
||||
|
||||
// This annotation is read by addon-test, so it can throw an error if both addons are used
|
||||
export const ADDON_INTERACTIONS_IN_USE = true;
|
||||
|
||||