diff --git a/.circleci/config.yml b/.circleci/config.yml index 7aee7968629..5392b5d7910 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -19,7 +19,7 @@ executors: docker: - image: cimg/node:16.17.1 environment: - NODE_OPTIONS: --max_old_space_size=3076 + NODE_OPTIONS: --max_old_space_size=6144 resource_class: <> sb_node_16_browsers: parameters: @@ -32,7 +32,7 @@ executors: docker: - image: cimg/node:16.17.1-browsers environment: - NODE_OPTIONS: --max_old_space_size=3076 + NODE_OPTIONS: --max_old_space_size=6144 resource_class: <> sb_playwright: parameters: @@ -43,9 +43,9 @@ executors: default: 'small' working_directory: /tmp/storybook docker: - - image: mcr.microsoft.com/playwright:v1.27.0-focal + - image: mcr.microsoft.com/playwright:v1.28.0-focal environment: - NODE_OPTIONS: --max_old_space_size=3076 + NODE_OPTIONS: --max_old_space_size=6144 resource_class: <> orbs: @@ -176,31 +176,36 @@ commands: echo "Canceling workflow as previous step resulted in failure." echo "To execute all checks locally, please run yarn ci-tests" curl -X POST --header "Content-Type: application/json" "https://circleci.com/api/v2/workflow/${CIRCLE_WORKFLOW_ID}/cancel?circle-token=${WORKFLOW_CANCELER}" - list-recent-merges: - description: 'Lists the merge commits from the past 24 hours' - steps: - - run: - name: Listing merge commits from the past 24 hours - when: on_fail - command: | - git log --merges --since="24 hours ago" --pretty=format:"\`%h\` %<(12)%ar | %s [%an]" | grep "Merge pull request" | sed "s/Merge pull request #/https:\/\/github.com\/storybookjs\/storybook\/pull\//g" report-workflow-on-failure: description: 'Reports failures to discord' parameters: template: description: | - Which template to report in discord + Which template to report in discord. Applicable for parallel sandbox jobs type: string + default: 'none' steps: - run: when: on_fail command: git fetch --unshallow - - list-recent-merges - discord/status: - only_for_branches: next,alpha + only_for_branches: main,next,next-release,latest-release fail_only: true - failure_message: 'Oh no! The **$CIRCLE_JOB** job has failed for **<< parameters.template >>**.\n\n**Relevant PRs of the last 24h:**\n$(git log --merges --since="24 hours ago" --pretty=format:"\`%h\` %<(12)%ar %s [%an]" | grep "Merge pull request" | sed "s/Merge pull request #/https:\/\/github.com\/storybookjs\/storybook\/pull\//g" | tr "\\n" "\\\\n" | sed "s/\\\\/\\\\n/g")' + failure_message: $(yarn get-report-message << pipeline.parameters.workflow >> << parameters.template >>) jobs: + pretty-docs: + executor: + class: small + name: sb_node_16_classic + steps: + - checkout_advanced: + clone_options: '--depth 1 --verbose' + - run: + name: Prettier + command: | + cd scripts + yarn + yarn docs:prettier:check build: executor: class: large @@ -222,6 +227,7 @@ jobs: command: | cd code yarn local-registry --publish + - report-workflow-on-failure - save_cache: name: Save Yarn cache key: build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }} @@ -274,6 +280,7 @@ jobs: rm -rf node_modules mkdir node_modules npx -p @storybook/bench@next sb-bench 'yarn install' --label cra + - report-workflow-on-failure - run: name: prep artifacts when: always @@ -314,6 +321,7 @@ jobs: rm -rf node_modules mkdir node_modules npx -p @storybook/bench@next sb-bench 'yarn install' --label react-vite + - report-workflow-on-failure - run: name: prep artifacts when: always @@ -323,7 +331,7 @@ jobs: destination: react-vite-default-ts-bench.tar.gz lint: executor: - class: medium + class: large name: sb_node_16_classic steps: - checkout_advanced: @@ -335,6 +343,7 @@ jobs: command: | cd code yarn lint + - report-workflow-on-failure - cancel-workflow-on-failure check: executor: @@ -350,6 +359,7 @@ jobs: command: | yarn task --task check --start-from=auto --no-link --debug git diff --exit-code + - report-workflow-on-failure - cancel-workflow-on-failure script-unit-tests: executor: sb_node_16_browsers @@ -365,6 +375,7 @@ jobs: yarn test --coverage --ci - store_test_results: path: scripts/junit.xml + - report-workflow-on-failure - cancel-workflow-on-failure unit-tests: executor: @@ -379,13 +390,14 @@ jobs: name: Test command: | cd code - yarn test --coverage --ci + yarn test --coverage --ci --maxWorkers=6 - store_test_results: path: code/junit.xml - persist_to_workspace: root: . paths: - code/coverage + - report-workflow-on-failure - cancel-workflow-on-failure coverage: executor: @@ -401,10 +413,13 @@ jobs: command: | cd code yarn coverage + - report-workflow-on-failure chromatic-internal-storybooks: executor: - class: medium + class: medium+ name: sb_node_16_browsers + environment: + NODE_OPTIONS: --max_old_space_size=6144 steps: # switched this to the CircleCI helper to get the full git history for TurboSnap - checkout @@ -416,6 +431,7 @@ jobs: cd code yarn storybook:ui:chromatic yarn storybook:blocks:chromatic + - report-workflow-on-failure - store_test_results: path: test-results ## new workflow @@ -527,6 +543,8 @@ jobs: - run: name: Running Chromatic command: yarn task --task chromatic --template $(yarn get-template << pipeline.parameters.workflow >> chromatic) --no-link --start-from=never --junit + - report-workflow-on-failure: + template: $(yarn get-template << pipeline.parameters.workflow >> chromatic) - store_test_results: path: test-results e2e-sandboxes: @@ -561,6 +579,7 @@ workflows: - equal: [api, << pipeline.trigger_source >>] - equal: [ci, << pipeline.parameters.workflow >>] jobs: + - pretty-docs - build - lint: requires: @@ -593,6 +612,7 @@ workflows: when: equal: [pr, << pipeline.parameters.workflow >>] jobs: + - pretty-docs - build - lint: requires: @@ -642,6 +662,7 @@ workflows: when: equal: [merged, << pipeline.parameters.workflow >>] jobs: + - pretty-docs - build - lint: requires: diff --git a/CHANGELOG.md b/CHANGELOG.md index 83c8dabf1f1..28923af9440 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,35 @@ +## 7.0.0-alpha.50 (November 17, 2022) + +#### Features + +- Expose more CSF types in all renderers [#19833](https://github.com/storybooks/storybook/pull/19833) +- CSF: Renamed Framework to Renderer [#19802](https://github.com/storybooks/storybook/pull/19802) + +#### Bug Fixes + +- Next.js: use file path instead of image contents for next-image-loader-stub [#19858](https://github.com/storybooks/storybook/pull/19858) +- TypeScript: Fix type inference bug with decorators [#19839](https://github.com/storybooks/storybook/pull/19839) +- Vite: Keep using absolute path node_modules splitting [#19836](https://github.com/storybooks/storybook/pull/19836) +- Vite: Fix preview annotation paths on Windows [#19822](https://github.com/storybooks/storybook/pull/19822) +- Fix csf-plugin ignoring options [#19823](https://github.com/storybooks/storybook/pull/19823) +- Controls: Checkbox does not update when using useArgs hook [#19508](https://github.com/storybooks/storybook/pull/19508) + +#### Maintenance + +- Jest: switch from Parameters to StorybookInternalParameters [#19853](https://github.com/storybooks/storybook/pull/19853) +- Blocks: Story stories [#19805](https://github.com/storybooks/storybook/pull/19805) +- Blocks: Canvas stories [#19804](https://github.com/storybooks/storybook/pull/19804) +- Tech: TypeScript should check stories and tests as well [#19831](https://github.com/storybooks/storybook/pull/19831) + +#### Build + +- UI Storybook: Disable sourcemaps when building in CI [#19862](https://github.com/storybooks/storybook/pull/19862) +- Build: Increase max node memory for jobs [#19856](https://github.com/storybooks/storybook/pull/19856) +- CI: improve error reporting mechanism [#19841](https://github.com/storybooks/storybook/pull/19841) +- Fix tests on Windows [#19777](https://github.com/storybooks/storybook/pull/19777) +- Build: Fix benchmark to run on local packages [#19832](https://github.com/storybooks/storybook/pull/19832) +- CI: Report failures on discord [#19801](https://github.com/storybooks/storybook/pull/19801) + ## 7.0.0-alpha.49 (November 13, 2022) #### Bug Fixes diff --git a/MIGRATION.md b/MIGRATION.md index f55ad50607c..2f9f0c15c40 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -43,8 +43,9 @@ - [7.0 Deprecations](#70-deprecations) - [`Story` type deprecated](#story-type-deprecated) - [`ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated) - - [Renamed `renderToDOM` to `renderToCanvas`](#renamed-rendertodom-to-rendertoroot) + - [Renamed `renderToDOM` to `renderToCanvas`](#renamed-rendertodom-to-rendertocanvas) - [Renamed `XFramework` to `XRenderer`](#renamed-xframework-to-xrenderer) + - [Renamed `DecoratorFn` to `Decorator`](#renamed-decoratorfn-to-decorator) - [From version 6.4.x to 6.5.0](#from-version-64x-to-650) - [Vue 3 upgrade](#vue-3-upgrade) - [React18 new root API](#react18-new-root-api) @@ -864,6 +865,47 @@ import type { SvelteRenderer } from '@storybook/svelte'; // etc. ``` +#### Renamed `DecoratorFn` to `Decorator` + +In 6.x you could import the type `DecoratorFn`: + +```ts +import type { DecoratorFn } from '@storybook/react'; +``` + +This type is deprecated in 7.0, instead you can use the type `Decorator`, which is now available for all renderers: + +```ts +import type { Decorator } from '@storybook/react'; +// or +import type { Decorator } from '@storybook/vue'; +// or +import type { Decorator } from '@storybook/svelte'; +// etc. +``` + +The type `Decorator` accepts a generic parameter `TArgs`. This can be used like this: + +```tsx +import type { Decorator } from '@storybook/react'; +import { LocaleProvider } from './locale'; + +const withLocale: Decorator<{ locale: 'en' | 'es' }> = (Story, { args }) => ( + + + +); +``` + +If you want to use `Decorator` in a backwards compatible way to `DecoratorFn`, you can use: + +```tsx +import type { Args, Decorator } from '@storybook/react'; + +// Decorator behaves the same as DecoratorFn (without generic) +const withLocale: Decorator = (Story, { args }) => // args has type { [name: string]: any } +``` + ## From version 6.4.x to 6.5.0 ### Vue 3 upgrade diff --git a/code/addons/a11y/jest.config.js b/code/addons/a11y/jest.config.js new file mode 100644 index 00000000000..4396fbc7010 --- /dev/null +++ b/code/addons/a11y/jest.config.js @@ -0,0 +1,7 @@ +const path = require('path'); +const baseConfig = require('../../jest.config.browser'); + +module.exports = { + ...baseConfig, + displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep), +}; diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 5a8b924c279..7d66ab24695 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "7.0.0-alpha.49", + "version": "7.0.0-alpha.50", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", @@ -62,15 +62,15 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addon-highlight": "7.0.0-alpha.49", - "@storybook/addons": "7.0.0-alpha.49", - "@storybook/api": "7.0.0-alpha.49", - "@storybook/channels": "7.0.0-alpha.49", - "@storybook/client-logger": "7.0.0-alpha.49", - "@storybook/components": "7.0.0-alpha.49", - "@storybook/core-events": "7.0.0-alpha.49", - "@storybook/theming": "7.0.0-alpha.49", - "@storybook/types": "7.0.0-alpha.49", + "@storybook/addon-highlight": "7.0.0-alpha.50", + "@storybook/addons": "7.0.0-alpha.50", + "@storybook/api": "7.0.0-alpha.50", + "@storybook/channels": "7.0.0-alpha.50", + "@storybook/client-logger": "7.0.0-alpha.50", + "@storybook/components": "7.0.0-alpha.50", + "@storybook/core-events": "7.0.0-alpha.50", + "@storybook/theming": "7.0.0-alpha.50", + "@storybook/types": "7.0.0-alpha.50", "axe-core": "^4.2.0", "global": "^4.4.0", "lodash": "^4.17.21", @@ -78,7 +78,7 @@ }, "devDependencies": { "@testing-library/react": "^11.2.2", - "typescript": "~4.6.3" + "typescript": "^4.9.3" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", @@ -102,7 +102,7 @@ "./src/preview.tsx" ] }, - "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8", + "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242", "storybook": { "displayName": "Accessibility", "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png", diff --git a/code/addons/actions/jest.config.js b/code/addons/actions/jest.config.js new file mode 100644 index 00000000000..4396fbc7010 --- /dev/null +++ b/code/addons/actions/jest.config.js @@ -0,0 +1,7 @@ +const path = require('path'); +const baseConfig = require('../../jest.config.browser'); + +module.exports = { + ...baseConfig, + displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep), +}; diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index ccb40937b82..7a8319e19f6 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "7.0.0-alpha.49", + "version": "7.0.0-alpha.50", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", @@ -76,13 +76,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.49", - "@storybook/api": "7.0.0-alpha.49", - "@storybook/client-logger": "7.0.0-alpha.49", - "@storybook/components": "7.0.0-alpha.49", - "@storybook/core-events": "7.0.0-alpha.49", - "@storybook/theming": "7.0.0-alpha.49", - "@storybook/types": "7.0.0-alpha.49", + "@storybook/addons": "7.0.0-alpha.50", + "@storybook/api": "7.0.0-alpha.50", + "@storybook/client-logger": "7.0.0-alpha.50", + "@storybook/components": "7.0.0-alpha.50", + "@storybook/core-events": "7.0.0-alpha.50", + "@storybook/theming": "7.0.0-alpha.50", + "@storybook/types": "7.0.0-alpha.50", "dequal": "^2.0.2", "global": "^4.4.0", "lodash": "^4.17.21", @@ -95,7 +95,7 @@ }, "devDependencies": { "@types/lodash": "^4.14.167", - "typescript": "~4.6.3" + "typescript": "^4.9.3" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", @@ -120,7 +120,7 @@ "./src/preview.ts" ] }, - "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8", + "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242", "storybook": { "displayName": "Actions", "unsupportedFrameworks": [ diff --git a/code/addons/backgrounds/jest.config.js b/code/addons/backgrounds/jest.config.js new file mode 100644 index 00000000000..4396fbc7010 --- /dev/null +++ b/code/addons/backgrounds/jest.config.js @@ -0,0 +1,7 @@ +const path = require('path'); +const baseConfig = require('../../jest.config.browser'); + +module.exports = { + ...baseConfig, + displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep), +}; diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 71cf5c39269..559dffafa13 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "7.0.0-alpha.49", + "version": "7.0.0-alpha.50", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", @@ -75,19 +75,19 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.49", - "@storybook/api": "7.0.0-alpha.49", - "@storybook/client-logger": "7.0.0-alpha.49", - "@storybook/components": "7.0.0-alpha.49", - "@storybook/core-events": "7.0.0-alpha.49", - "@storybook/theming": "7.0.0-alpha.49", - "@storybook/types": "7.0.0-alpha.49", + "@storybook/addons": "7.0.0-alpha.50", + "@storybook/api": "7.0.0-alpha.50", + "@storybook/client-logger": "7.0.0-alpha.50", + "@storybook/components": "7.0.0-alpha.50", + "@storybook/core-events": "7.0.0-alpha.50", + "@storybook/theming": "7.0.0-alpha.50", + "@storybook/types": "7.0.0-alpha.50", "global": "^4.4.0", "memoizerific": "^1.11.3", "ts-dedent": "^2.0.0" }, "devDependencies": { - "typescript": "~4.6.3" + "typescript": "^4.9.3" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", @@ -111,7 +111,7 @@ "./src/preview.tsx" ] }, - "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8", + "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242", "storybook": { "displayName": "Backgrounds", "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png", diff --git a/code/addons/controls/jest.config.js b/code/addons/controls/jest.config.js new file mode 100644 index 00000000000..4396fbc7010 --- /dev/null +++ b/code/addons/controls/jest.config.js @@ -0,0 +1,7 @@ +const path = require('path'); +const baseConfig = require('../../jest.config.browser'); + +module.exports = { + ...baseConfig, + displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep), +}; diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 72c1dd484e3..e07ef312497 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "7.0.0-alpha.49", + "version": "7.0.0-alpha.50", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", @@ -67,16 +67,16 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.49", - "@storybook/api": "7.0.0-alpha.49", - "@storybook/blocks": "7.0.0-alpha.49", - "@storybook/client-logger": "7.0.0-alpha.49", - "@storybook/components": "7.0.0-alpha.49", - "@storybook/core-common": "7.0.0-alpha.49", - "@storybook/node-logger": "7.0.0-alpha.49", - "@storybook/store": "7.0.0-alpha.49", - "@storybook/theming": "7.0.0-alpha.49", - "@storybook/types": "7.0.0-alpha.49", + "@storybook/addons": "7.0.0-alpha.50", + "@storybook/api": "7.0.0-alpha.50", + "@storybook/blocks": "7.0.0-alpha.50", + "@storybook/client-logger": "7.0.0-alpha.50", + "@storybook/components": "7.0.0-alpha.50", + "@storybook/core-common": "7.0.0-alpha.50", + "@storybook/node-logger": "7.0.0-alpha.50", + "@storybook/store": "7.0.0-alpha.50", + "@storybook/theming": "7.0.0-alpha.50", + "@storybook/types": "7.0.0-alpha.50", "lodash": "^4.17.21", "ts-dedent": "^2.0.0" }, @@ -102,7 +102,7 @@ ], "platform": "browser" }, - "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8", + "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242", "storybook": { "displayName": "Controls", "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png", diff --git a/code/addons/docs/jest.config.js b/code/addons/docs/jest.config.js new file mode 100644 index 00000000000..4396fbc7010 --- /dev/null +++ b/code/addons/docs/jest.config.js @@ -0,0 +1,7 @@ +const path = require('path'); +const baseConfig = require('../../jest.config.browser'); + +module.exports = { + ...baseConfig, + displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep), +}; diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 45863766d69..3834260de4e 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "7.0.0-alpha.49", + "version": "7.0.0-alpha.50", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", @@ -56,7 +56,7 @@ "./angular": "./angular/index.js", "./angular/index.js": "./angular/index.js", "./web-components/index.js": "./web-components/index.js", - "./jest-transform-mdx.js": "./jest-transform-mdx.js", + "./jest-transform-mdx": "./jest-transform-mdx.js", "./package.json": "./package.json" }, "main": "dist/index.js", @@ -84,18 +84,18 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/plugin-transform-react-jsx": "^7.12.12", - "@jest/transform": "^26.6.2", + "@babel/plugin-transform-react-jsx": "^7.19.0", + "@jest/transform": "^29.3.1", "@mdx-js/react": "^2.1.5", - "@storybook/blocks": "7.0.0-alpha.49", - "@storybook/components": "7.0.0-alpha.49", - "@storybook/csf-plugin": "7.0.0-alpha.49", - "@storybook/csf-tools": "7.0.0-alpha.49", + "@storybook/blocks": "7.0.0-alpha.50", + "@storybook/components": "7.0.0-alpha.50", + "@storybook/csf-plugin": "7.0.0-alpha.50", + "@storybook/csf-tools": "7.0.0-alpha.50", "@storybook/mdx2-csf": "next", - "@storybook/node-logger": "7.0.0-alpha.49", - "@storybook/postinstall": "7.0.0-alpha.49", - "@storybook/preview-web": "7.0.0-alpha.49", - "@storybook/types": "7.0.0-alpha.49", + "@storybook/node-logger": "7.0.0-alpha.50", + "@storybook/postinstall": "7.0.0-alpha.50", + "@storybook/preview-web": "7.0.0-alpha.50", + "@storybook/types": "7.0.0-alpha.50", "fs-extra": "^9.0.1", "global": "^4.4.0", "remark-external-links": "^8.0.0", @@ -103,8 +103,8 @@ "ts-dedent": "^2.0.0" }, "devDependencies": { - "@babel/core": "^7.12.10", - "typescript": "~4.6.3" + "@babel/core": "^7.20.2", + "typescript": "^4.9.3" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", @@ -128,7 +128,7 @@ "./src/preview.ts" ] }, - "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8", + "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242", "storybook": { "displayName": "Docs", "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png", diff --git a/code/addons/essentials/jest.config.js b/code/addons/essentials/jest.config.js new file mode 100644 index 00000000000..4396fbc7010 --- /dev/null +++ b/code/addons/essentials/jest.config.js @@ -0,0 +1,7 @@ +const path = require('path'); +const baseConfig = require('../../jest.config.browser'); + +module.exports = { + ...baseConfig, + displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep), +}; diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index faa92842a88..41f177ecf73 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "7.0.0-alpha.49", + "version": "7.0.0-alpha.50", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", @@ -111,26 +111,25 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addon-actions": "7.0.0-alpha.49", - "@storybook/addon-backgrounds": "7.0.0-alpha.49", - "@storybook/addon-controls": "7.0.0-alpha.49", - "@storybook/addon-docs": "7.0.0-alpha.49", - "@storybook/addon-highlight": "7.0.0-alpha.49", - "@storybook/addon-measure": "7.0.0-alpha.49", - "@storybook/addon-outline": "7.0.0-alpha.49", - "@storybook/addon-toolbars": "7.0.0-alpha.49", - "@storybook/addon-viewport": "7.0.0-alpha.49", - "@storybook/addons": "7.0.0-alpha.49", - "@storybook/api": "7.0.0-alpha.49", - "@storybook/core-common": "7.0.0-alpha.49", - "@storybook/node-logger": "7.0.0-alpha.49", + "@storybook/addon-actions": "7.0.0-alpha.50", + "@storybook/addon-backgrounds": "7.0.0-alpha.50", + "@storybook/addon-controls": "7.0.0-alpha.50", + "@storybook/addon-docs": "7.0.0-alpha.50", + "@storybook/addon-highlight": "7.0.0-alpha.50", + "@storybook/addon-measure": "7.0.0-alpha.50", + "@storybook/addon-outline": "7.0.0-alpha.50", + "@storybook/addon-toolbars": "7.0.0-alpha.50", + "@storybook/addon-viewport": "7.0.0-alpha.50", + "@storybook/addons": "7.0.0-alpha.50", + "@storybook/api": "7.0.0-alpha.50", + "@storybook/core-common": "7.0.0-alpha.50", + "@storybook/node-logger": "7.0.0-alpha.50", "ts-dedent": "^2.0.0" }, "devDependencies": { - "@babel/core": "^7.12.10", - "@storybook/vue": "7.0.0-alpha.49", - "@types/jest": "^26.0.16", - "typescript": "~4.6.3" + "@babel/core": "^7.20.2", + "@storybook/vue": "7.0.0-alpha.50", + "typescript": "^4.9.3" }, "peerDependencies": { "@babel/core": "^7.9.6" @@ -158,5 +157,5 @@ ], "platform": "node" }, - "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8" + "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242" } diff --git a/code/addons/highlight/jest.config.js b/code/addons/highlight/jest.config.js new file mode 100644 index 00000000000..4396fbc7010 --- /dev/null +++ b/code/addons/highlight/jest.config.js @@ -0,0 +1,7 @@ +const path = require('path'); +const baseConfig = require('../../jest.config.browser'); + +module.exports = { + ...baseConfig, + displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep), +}; diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 6a3d20cb9f5..86cc54a308b 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "7.0.0-alpha.49", + "version": "7.0.0-alpha.50", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", @@ -60,13 +60,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.49", - "@storybook/core-events": "7.0.0-alpha.49", + "@storybook/addons": "7.0.0-alpha.50", + "@storybook/core-events": "7.0.0-alpha.50", "global": "^4.4.0" }, "devDependencies": { "@types/webpack-env": "^1.16.0", - "typescript": "~4.6.3" + "typescript": "^4.9.3" }, "publishConfig": { "access": "public" @@ -77,7 +77,7 @@ "./src/preview.ts" ] }, - "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8", + "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Highlight", diff --git a/code/addons/interactions/jest.config.js b/code/addons/interactions/jest.config.js new file mode 100644 index 00000000000..4396fbc7010 --- /dev/null +++ b/code/addons/interactions/jest.config.js @@ -0,0 +1,7 @@ +const path = require('path'); +const baseConfig = require('../../jest.config.browser'); + +module.exports = { + ...baseConfig, + displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep), +}; diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 837ea72cd8a..efe993906a0 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "7.0.0-alpha.49", + "version": "7.0.0-alpha.50", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", @@ -72,15 +72,15 @@ }, "dependencies": { "@devtools-ds/object-inspector": "^1.1.2", - "@storybook/addons": "7.0.0-alpha.49", - "@storybook/api": "7.0.0-alpha.49", - "@storybook/client-logger": "7.0.0-alpha.49", - "@storybook/components": "7.0.0-alpha.49", - "@storybook/core-common": "7.0.0-alpha.49", - "@storybook/core-events": "7.0.0-alpha.49", - "@storybook/instrumenter": "7.0.0-alpha.49", - "@storybook/theming": "7.0.0-alpha.49", - "@storybook/types": "7.0.0-alpha.49", + "@storybook/addons": "7.0.0-alpha.50", + "@storybook/api": "7.0.0-alpha.50", + "@storybook/client-logger": "7.0.0-alpha.50", + "@storybook/components": "7.0.0-alpha.50", + "@storybook/core-common": "7.0.0-alpha.50", + "@storybook/core-events": "7.0.0-alpha.50", + "@storybook/instrumenter": "7.0.0-alpha.50", + "@storybook/theming": "7.0.0-alpha.50", + "@storybook/types": "7.0.0-alpha.50", "global": "^4.4.0", "jest-mock": "^27.0.6", "polished": "^4.2.2", @@ -89,9 +89,9 @@ "devDependencies": { "@storybook/jest": "^0.0.10", "@storybook/testing-library": "0.0.14-next.0", - "@types/node": "^16.0.0", + "@types/node": "^18.11.9", "formik": "^2.2.9", - "typescript": "~4.6.3" + "typescript": "^4.9.3" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", @@ -117,7 +117,7 @@ ], "platform": "node" }, - "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8", + "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242", "storybook": { "displayName": "Interactions", "unsupportedFrameworks": [ diff --git a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx index f55d28944c5..179023b8490 100644 --- a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx +++ b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx @@ -1,4 +1,3 @@ -/* eslint-disable jest/no-standalone-expect */ import React from 'react'; import type { StoryObj, Meta } from '@storybook/react'; import { CallStates } from '@storybook/instrumenter'; diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts index 57af27cc34f..9a1919e748c 100644 --- a/code/addons/interactions/template/stories/basics.stories.ts +++ b/code/addons/interactions/template/stories/basics.stories.ts @@ -1,4 +1,3 @@ -/* eslint-disable jest/no-standalone-expect */ import globalThis from 'global'; import { within, diff --git a/code/addons/jest/jest.config.js b/code/addons/jest/jest.config.js new file mode 100644 index 00000000000..4396fbc7010 --- /dev/null +++ b/code/addons/jest/jest.config.js @@ -0,0 +1,7 @@ +const path = require('path'); +const baseConfig = require('../../jest.config.browser'); + +module.exports = { + ...baseConfig, + displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep), +}; diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 3e9705be896..aefdc7ae078 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "7.0.0-alpha.49", + "version": "7.0.0-alpha.50", "description": "React storybook addon that show component jest report", "keywords": [ "addon", @@ -69,18 +69,18 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.49", - "@storybook/api": "7.0.0-alpha.49", - "@storybook/client-logger": "7.0.0-alpha.49", - "@storybook/components": "7.0.0-alpha.49", - "@storybook/core-events": "7.0.0-alpha.49", - "@storybook/theming": "7.0.0-alpha.49", + "@storybook/addons": "7.0.0-alpha.50", + "@storybook/api": "7.0.0-alpha.50", + "@storybook/client-logger": "7.0.0-alpha.50", + "@storybook/components": "7.0.0-alpha.50", + "@storybook/core-events": "7.0.0-alpha.50", + "@storybook/theming": "7.0.0-alpha.50", "global": "^4.4.0", "react-sizeme": "^3.0.1", "upath": "^1.2.0" }, "devDependencies": { - "typescript": "~4.6.3" + "typescript": "^4.9.3" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", @@ -104,7 +104,7 @@ ], "platform": "browser" }, - "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8", + "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242", "storybook": { "displayName": "Jest", "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg", diff --git a/code/addons/jest/src/shared.test.ts b/code/addons/jest/src/shared.test.ts index e051f4563f6..ddc3a0c71b1 100644 --- a/code/addons/jest/src/shared.test.ts +++ b/code/addons/jest/src/shared.test.ts @@ -27,7 +27,7 @@ describe('defineJestParameter', () => { }); test('returns null if filename is a module ID that cannot be inferred from', () => { - // @ts-expect-error (Converted from ts-ignore) + // @ts-expect-error Storybook's fileName type is string, but according to this test it could be number in case it is a module id. expect(defineJestParameter({ fileName: 1234 })).toBeNull(); }); }); diff --git a/code/addons/jest/src/shared.ts b/code/addons/jest/src/shared.ts index 9b761e1d9de..ef078b7af8a 100644 --- a/code/addons/jest/src/shared.ts +++ b/code/addons/jest/src/shared.ts @@ -1,4 +1,4 @@ -import type { Parameters } from '@storybook/types'; +import type { StorybookInternalParameters } from '@storybook/types'; // addons, panels and events get unique names using a prefix export const PARAM_KEY = 'test'; @@ -7,7 +7,7 @@ export const PANEL_ID = `${ADDON_ID}/panel`; export const ADD_TESTS = `${ADDON_ID}/add_tests`; -interface AddonParameters extends Parameters { +interface AddonParameters extends StorybookInternalParameters { jest?: string | string[] | { disabled: true }; } diff --git a/code/addons/links/jest.config.js b/code/addons/links/jest.config.js new file mode 100644 index 00000000000..4396fbc7010 --- /dev/null +++ b/code/addons/links/jest.config.js @@ -0,0 +1,7 @@ +const path = require('path'); +const baseConfig = require('../../jest.config.browser'); + +module.exports = { + ...baseConfig, + displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep), +}; diff --git a/code/addons/links/package.json b/code/addons/links/package.json index d9addd073ba..49db221d180 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "7.0.0-alpha.49", + "version": "7.0.0-alpha.50", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", @@ -76,18 +76,18 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.49", - "@storybook/client-logger": "7.0.0-alpha.49", - "@storybook/core-events": "7.0.0-alpha.49", - "@storybook/csf": "0.0.2-next.5", - "@storybook/router": "7.0.0-alpha.49", - "@storybook/types": "7.0.0-alpha.49", + "@storybook/addons": "7.0.0-alpha.50", + "@storybook/client-logger": "7.0.0-alpha.50", + "@storybook/core-events": "7.0.0-alpha.50", + "@storybook/csf": "0.0.2-next.7", + "@storybook/router": "7.0.0-alpha.50", + "@storybook/types": "7.0.0-alpha.50", "global": "^4.4.0", "prop-types": "^15.7.2", "ts-dedent": "^2.0.0" }, "devDependencies": { - "typescript": "~4.6.3" + "typescript": "^4.9.3" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", @@ -112,7 +112,7 @@ "./src/react/index.ts" ] }, - "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8", + "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242", "storybook": { "displayName": "Links", "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png", diff --git a/code/addons/links/src/utils.ts b/code/addons/links/src/utils.ts index b4ece3c80fe..73ba6e0d332 100644 --- a/code/addons/links/src/utils.ts +++ b/code/addons/links/src/utils.ts @@ -49,7 +49,6 @@ export const hrefTo = (title: ComponentTitle, name: StoryName): Promise }); }; -// eslint-disable-next-line @typescript-eslint/no-shadow const valueOrCall = (args: string[]) => (value: string | ((...args: string[]) => string)) => typeof value === 'function' ? value(...args) : value; diff --git a/code/addons/measure/jest.config.js b/code/addons/measure/jest.config.js new file mode 100644 index 00000000000..4396fbc7010 --- /dev/null +++ b/code/addons/measure/jest.config.js @@ -0,0 +1,7 @@ +const path = require('path'); +const baseConfig = require('../../jest.config.browser'); + +module.exports = { + ...baseConfig, + displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep), +}; diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index f0d889e3b7c..fe39f3cc851 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "7.0.0-alpha.49", + "version": "7.0.0-alpha.50", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", @@ -74,16 +74,16 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.49", - "@storybook/api": "7.0.0-alpha.49", - "@storybook/client-logger": "7.0.0-alpha.49", - "@storybook/components": "7.0.0-alpha.49", - "@storybook/core-events": "7.0.0-alpha.49", - "@storybook/types": "7.0.0-alpha.49", + "@storybook/addons": "7.0.0-alpha.50", + "@storybook/api": "7.0.0-alpha.50", + "@storybook/client-logger": "7.0.0-alpha.50", + "@storybook/components": "7.0.0-alpha.50", + "@storybook/core-events": "7.0.0-alpha.50", + "@storybook/types": "7.0.0-alpha.50", "global": "^4.4.0" }, "devDependencies": { - "typescript": "~4.6.3" + "typescript": "^4.9.3" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", @@ -107,7 +107,7 @@ "./src/preview.tsx" ] }, - "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8", + "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242", "storybook": { "displayName": "Measure", "unsupportedFrameworks": [ diff --git a/code/addons/outline/jest.config.js b/code/addons/outline/jest.config.js new file mode 100644 index 00000000000..4396fbc7010 --- /dev/null +++ b/code/addons/outline/jest.config.js @@ -0,0 +1,7 @@ +const path = require('path'); +const baseConfig = require('../../jest.config.browser'); + +module.exports = { + ...baseConfig, + displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep), +}; diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index b6b9d3e3ea2..ef0ee61d973 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "7.0.0-alpha.49", + "version": "7.0.0-alpha.50", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", @@ -77,17 +77,17 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.49", - "@storybook/api": "7.0.0-alpha.49", - "@storybook/client-logger": "7.0.0-alpha.49", - "@storybook/components": "7.0.0-alpha.49", - "@storybook/core-events": "7.0.0-alpha.49", - "@storybook/types": "7.0.0-alpha.49", + "@storybook/addons": "7.0.0-alpha.50", + "@storybook/api": "7.0.0-alpha.50", + "@storybook/client-logger": "7.0.0-alpha.50", + "@storybook/components": "7.0.0-alpha.50", + "@storybook/core-events": "7.0.0-alpha.50", + "@storybook/types": "7.0.0-alpha.50", "global": "^4.4.0", "ts-dedent": "^2.0.0" }, "devDependencies": { - "typescript": "~4.6.3" + "typescript": "^4.9.3" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", @@ -111,7 +111,7 @@ "./src/preview.tsx" ] }, - "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8", + "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242", "storybook": { "displayName": "Outline", "unsupportedFrameworks": [ diff --git a/code/addons/storyshots/jest.config.js b/code/addons/storyshots/jest.config.js new file mode 100644 index 00000000000..0115c67e562 --- /dev/null +++ b/code/addons/storyshots/jest.config.js @@ -0,0 +1,12 @@ +const path = require('path'); +const baseConfig = require('../../jest.config.browser'); + +module.exports = { + ...baseConfig, + snapshotSerializers: [...baseConfig.snapshotSerializers, 'enzyme-to-json/serializer'], + transform: { + ...baseConfig.transform, + '^.+\\.stories\\.[jt]sx?$': '@storybook/addon-storyshots/injectFileName', + }, + displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep), +}; diff --git a/code/addons/storyshots/storyshots-core/package.json b/code/addons/storyshots/storyshots-core/package.json index 875e23e408a..265cbcd3162 100644 --- a/code/addons/storyshots/storyshots-core/package.json +++ b/code/addons/storyshots/storyshots-core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots", - "version": "7.0.0-alpha.49", + "version": "7.0.0-alpha.50", "description": "Take a code snapshot of every story automatically with Jest", "keywords": [ "addon", @@ -37,23 +37,22 @@ "storybook": "yarn sb dev -p 6006" }, "dependencies": { - "@jest/transform": "^26.6.2", - "@storybook/addons": "7.0.0-alpha.49", + "@jest/transform": "^29.3.1", + "@storybook/addons": "7.0.0-alpha.50", "@storybook/babel-plugin-require-context-hook": "1.0.1", - "@storybook/client-api": "7.0.0-alpha.49", - "@storybook/core-client": "7.0.0-alpha.49", - "@storybook/core-common": "7.0.0-alpha.49", - "@storybook/core-webpack": "7.0.0-alpha.49", - "@storybook/types": "7.0.0-alpha.49", + "@storybook/client-api": "7.0.0-alpha.50", + "@storybook/core-client": "7.0.0-alpha.50", + "@storybook/core-common": "7.0.0-alpha.50", + "@storybook/core-webpack": "7.0.0-alpha.50", + "@storybook/types": "7.0.0-alpha.50", "@types/glob": "^7.1.3", - "@types/jest": "^26.0.16", - "@types/jest-specific-snapshot": "^0.5.3", + "@types/jest-specific-snapshot": "^0.5.6", "core-js": "^3.8.2", "glob": "^7.1.6", "global": "^4.4.0", - "jest-specific-snapshot": "^4.0.0", + "jest-specific-snapshot": "^6.0.0", "preact-render-to-string": "^5.1.19", - "pretty-format": "^26.6.2", + "pretty-format": "^28.0.0", "react-test-renderer": "^16.8.0 || ^17.0.0 || ^18.0.0", "read-pkg-up": "^7.0.1", "ts-dedent": "^2.0.0" @@ -62,12 +61,12 @@ "@angular/core": "^13.3.6", "@angular/platform-browser-dynamic": "^13.3.6", "@emotion/jest": "^11.8.0", - "@storybook/addon-docs": "7.0.0-alpha.49", - "@storybook/angular": "7.0.0-alpha.49", - "@storybook/react": "7.0.0-alpha.49", - "@storybook/vue": "7.0.0-alpha.49", - "@storybook/vue3": "7.0.0-alpha.49", - "babel-loader": "^8.2.5", + "@storybook/addon-docs": "7.0.0-alpha.50", + "@storybook/angular": "7.0.0-alpha.50", + "@storybook/react": "7.0.0-alpha.50", + "@storybook/vue": "7.0.0-alpha.50", + "@storybook/vue3": "7.0.0-alpha.50", + "babel-loader": "^8.3.0", "enzyme": "^3.11.0", "enzyme-to-json": "^3.6.1", "jest-preset-angular": "^8.3.2", @@ -144,7 +143,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8", + "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242", "storybook": { "displayName": "Storyshots", "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png", diff --git a/code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.ts b/code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.ts index 168849f26be..d066d1226e5 100644 --- a/code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.ts +++ b/code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.ts @@ -4,33 +4,33 @@ const target = new Stories2SnapsConverter(); describe('getSnapshotFileName', () => { it('fileName is provided - snapshot is stored in __snapshots__ dir', () => { - const context = { fileName: 'foo.js' }; + const context = { fileName: 'foo.js', kind: 'kind' }; - // @ts-expect-error (TODO) const result = target.getSnapshotFileName(context); const platformAgnosticResult = result.replace(/\\|\//g, '/'); - expect(platformAgnosticResult).toBe('__snapshots__/foo.storyshot'); + // This is an absolute path, so we need to use `toContain()` + expect(platformAgnosticResult).toContain('__snapshots__/foo.storyshot'); }); it('fileName with multiple extensions is provided - only the last extension is replaced', () => { - const context = { fileName: 'foo.web.stories.js' }; + const context = { fileName: 'foo.web.stories.js', kind: 'kind' }; - // @ts-expect-error (TODO) const result = target.getSnapshotFileName(context); const platformAgnosticResult = result.replace(/\\|\//g, '/'); - expect(platformAgnosticResult).toBe('__snapshots__/foo.web.stories.storyshot'); + // This is an absolute path, so we need to use `toContain()` + expect(platformAgnosticResult).toContain('__snapshots__/foo.web.stories.storyshot'); }); it('fileName with dir is provided - __snapshots__ dir is created inside another dir', () => { - const context = { fileName: 'test/foo.js' }; + const context = { fileName: 'test/foo.js', kind: 'kind' }; - // @ts-expect-error (TODO) const result = target.getSnapshotFileName(context); const platformAgnosticResult = result.replace(/\\|\//g, '/'); - expect(platformAgnosticResult).toBe('test/__snapshots__/foo.storyshot'); + // This is an absolute path, so we need to use `toContain()` + expect(platformAgnosticResult).toContain('test/__snapshots__/foo.storyshot'); }); }); diff --git a/code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.ts b/code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.ts index 527a946847c..439a514f7bd 100644 --- a/code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.ts +++ b/code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.ts @@ -29,7 +29,15 @@ export class Stories2SnapsConverter { const { dir, name } = path.parse(fileName); const { snapshotsDirName, snapshotExtension } = this.options; - return path.format({ dir: path.join(dir, snapshotsDirName), name, ext: snapshotExtension }); + // Convert to absolute path, in case jest is not running in CWD, + // else it will create snapshots with the wrong path + const absDir = path.isAbsolute(dir) ? dir : path.resolve(dir); + + return path.format({ + dir: path.join(absDir, snapshotsDirName), + name, + ext: snapshotExtension, + }); } getSnapshotFileName(context: { fileName?: string; kind: any }) { diff --git a/code/addons/storyshots/storyshots-puppeteer/package.json b/code/addons/storyshots/storyshots-puppeteer/package.json index 424c69a28e8..892a01809ef 100644 --- a/code/addons/storyshots/storyshots-puppeteer/package.json +++ b/code/addons/storyshots/storyshots-puppeteer/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots-puppeteer", - "version": "7.0.0-alpha.49", + "version": "7.0.0-alpha.50", "description": "Image snapshots addition to StoryShots based on puppeteer", "keywords": [ "addon", @@ -34,18 +34,18 @@ }, "dependencies": { "@axe-core/puppeteer": "^4.2.0", - "@storybook/csf": "0.0.2-next.5", - "@storybook/node-logger": "7.0.0-alpha.49", - "@storybook/types": "7.0.0-alpha.49", - "@types/jest-image-snapshot": "^4.1.3", - "jest-image-snapshot": "^4.3.0" + "@storybook/csf": "0.0.2-next.7", + "@storybook/node-logger": "7.0.0-alpha.50", + "@storybook/types": "7.0.0-alpha.50", + "@types/jest-image-snapshot": "^5.1.0", + "jest-image-snapshot": "^6.0.0" }, "devDependencies": { "@types/puppeteer": "^5.4.0", "puppeteer": "^2.0.0 || ^3.0.0" }, "peerDependencies": { - "@storybook/addon-storyshots": "7.0.0-alpha.49", + "@storybook/addon-storyshots": "7.0.0-alpha.50", "puppeteer": ">=2.0.0" }, "peerDependenciesMeta": { @@ -56,5 +56,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8" + "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242" } diff --git a/code/addons/storysource/jest.config.js b/code/addons/storysource/jest.config.js new file mode 100644 index 00000000000..4396fbc7010 --- /dev/null +++ b/code/addons/storysource/jest.config.js @@ -0,0 +1,7 @@ +const path = require('path'); +const baseConfig = require('../../jest.config.browser'); + +module.exports = { + ...baseConfig, + displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep), +}; diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index e93341d6d75..d2f05064b92 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "7.0.0-alpha.49", + "version": "7.0.0-alpha.50", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", @@ -53,21 +53,21 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.49", - "@storybook/api": "7.0.0-alpha.49", - "@storybook/client-logger": "7.0.0-alpha.49", - "@storybook/components": "7.0.0-alpha.49", - "@storybook/router": "7.0.0-alpha.49", - "@storybook/source-loader": "7.0.0-alpha.49", - "@storybook/theming": "7.0.0-alpha.49", + "@storybook/addons": "7.0.0-alpha.50", + "@storybook/api": "7.0.0-alpha.50", + "@storybook/client-logger": "7.0.0-alpha.50", + "@storybook/components": "7.0.0-alpha.50", + "@storybook/router": "7.0.0-alpha.50", + "@storybook/source-loader": "7.0.0-alpha.50", + "@storybook/theming": "7.0.0-alpha.50", "estraverse": "^5.2.0", "prop-types": "^15.7.2", "react-syntax-highlighter": "^15.5.0" }, "devDependencies": { - "@types/react": "^16.14.23", + "@types/react": "^16.14.34", "@types/react-syntax-highlighter": "11.0.5", - "typescript": "~4.6.3" + "typescript": "^4.9.3" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", @@ -91,7 +91,7 @@ "./src/preset.ts" ] }, - "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8", + "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242", "storybook": { "displayName": "Storysource", "icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png", diff --git a/code/addons/toolbars/jest.config.js b/code/addons/toolbars/jest.config.js new file mode 100644 index 00000000000..4396fbc7010 --- /dev/null +++ b/code/addons/toolbars/jest.config.js @@ -0,0 +1,7 @@ +const path = require('path'); +const baseConfig = require('../../jest.config.browser'); + +module.exports = { + ...baseConfig, + displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep), +}; diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 2c60d3eb0d0..73615c8b130 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "7.0.0-alpha.49", + "version": "7.0.0-alpha.50", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", @@ -67,14 +67,14 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.49", - "@storybook/api": "7.0.0-alpha.49", - "@storybook/client-logger": "7.0.0-alpha.49", - "@storybook/components": "7.0.0-alpha.49", - "@storybook/theming": "7.0.0-alpha.49" + "@storybook/addons": "7.0.0-alpha.50", + "@storybook/api": "7.0.0-alpha.50", + "@storybook/client-logger": "7.0.0-alpha.50", + "@storybook/components": "7.0.0-alpha.50", + "@storybook/theming": "7.0.0-alpha.50" }, "devDependencies": { - "typescript": "~4.6.3" + "typescript": "^4.9.3" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", @@ -98,7 +98,7 @@ ], "platform": "browser" }, - "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8", + "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242", "storybook": { "displayName": "Toolbars", "icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png", diff --git a/code/addons/viewport/jest.config.js b/code/addons/viewport/jest.config.js new file mode 100644 index 00000000000..4396fbc7010 --- /dev/null +++ b/code/addons/viewport/jest.config.js @@ -0,0 +1,7 @@ +const path = require('path'); +const baseConfig = require('../../jest.config.browser'); + +module.exports = { + ...baseConfig, + displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep), +}; diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index b22c881302b..478675d7e27 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "7.0.0-alpha.49", + "version": "7.0.0-alpha.50", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", @@ -72,18 +72,18 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.49", - "@storybook/api": "7.0.0-alpha.49", - "@storybook/client-logger": "7.0.0-alpha.49", - "@storybook/components": "7.0.0-alpha.49", - "@storybook/core-events": "7.0.0-alpha.49", - "@storybook/theming": "7.0.0-alpha.49", + "@storybook/addons": "7.0.0-alpha.50", + "@storybook/api": "7.0.0-alpha.50", + "@storybook/client-logger": "7.0.0-alpha.50", + "@storybook/components": "7.0.0-alpha.50", + "@storybook/core-events": "7.0.0-alpha.50", + "@storybook/theming": "7.0.0-alpha.50", "global": "^4.4.0", "memoizerific": "^1.11.3", "prop-types": "^15.7.2" }, "devDependencies": { - "typescript": "~4.6.3" + "typescript": "^4.9.3" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", @@ -108,7 +108,7 @@ "./src/preview.ts" ] }, - "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8", + "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242", "storybook": { "displayName": "Viewport", "icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png", diff --git a/code/addons/viewport/src/shortcuts.ts b/code/addons/viewport/src/shortcuts.ts index 779726eb9e2..6e9b7302b1c 100644 --- a/code/addons/viewport/src/shortcuts.ts +++ b/code/addons/viewport/src/shortcuts.ts @@ -1,6 +1,11 @@ import type { API } from '@storybook/api'; import { ADDON_ID } from './constants'; +type State = { + selected: string; + isRotated: boolean; +}; + const getCurrentViewportIndex = (viewportsKeys: string[], current: string): number => viewportsKeys.indexOf(current); @@ -24,7 +29,7 @@ export const registerShortcuts = async (api: API, setState: any, viewportsKeys: defaultShortcut: ['shift', 'V'], actionName: 'previous', action: () => { - const { selected, isRotated } = api.getAddonState(ADDON_ID); + const { selected, isRotated } = api.getAddonState(ADDON_ID); setState({ selected: getPreviousViewport(viewportsKeys, selected), isRotated, @@ -37,7 +42,7 @@ export const registerShortcuts = async (api: API, setState: any, viewportsKeys: defaultShortcut: ['V'], actionName: 'next', action: () => { - const { selected, isRotated } = api.getAddonState(ADDON_ID); + const { selected, isRotated } = api.getAddonState(ADDON_ID); setState({ selected: getNextViewport(viewportsKeys, selected), isRotated, @@ -50,7 +55,7 @@ export const registerShortcuts = async (api: API, setState: any, viewportsKeys: defaultShortcut: ['alt', 'V'], actionName: 'reset', action: () => { - const { isRotated } = api.getAddonState(ADDON_ID); + const { isRotated } = api.getAddonState(ADDON_ID); setState({ selected: 'reset', isRotated, diff --git a/code/frameworks/angular/jest.config.js b/code/frameworks/angular/jest.config.js index 687a16f155b..dc0ffa5cecd 100644 --- a/code/frameworks/angular/jest.config.js +++ b/code/frameworks/angular/jest.config.js @@ -1,5 +1,12 @@ +const path = require('path'); + module.exports = { + displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep), preset: 'jest-preset-angular', setupFilesAfterEnv: ['/setup-jest.ts'], - transformIgnorePatterns: ['^.+\\.js$'], + transformIgnorePatterns: ['/node_modules/(?!@angular|rxjs|nanoid|uuid)'], + snapshotFormat: { + escapeString: true, + printBasicPrototype: true, + }, }; diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index e1f774250cb..695816e6944 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "7.0.0-alpha.49", + "version": "7.0.0-alpha.50", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", @@ -34,21 +34,21 @@ "prep": "rimraf dist && ../../../scripts/node_modules/.bin/tsc --project tsconfig.build.json && echo \"Preventing passing flags to tsc\"" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.49", - "@storybook/api": "7.0.0-alpha.49", - "@storybook/builder-webpack5": "7.0.0-alpha.49", - "@storybook/client-logger": "7.0.0-alpha.49", - "@storybook/core-client": "7.0.0-alpha.49", - "@storybook/core-common": "7.0.0-alpha.49", - "@storybook/core-events": "7.0.0-alpha.49", - "@storybook/core-server": "7.0.0-alpha.49", - "@storybook/core-webpack": "7.0.0-alpha.49", - "@storybook/docs-tools": "7.0.0-alpha.49", - "@storybook/node-logger": "7.0.0-alpha.49", - "@storybook/store": "7.0.0-alpha.49", - "@storybook/types": "7.0.0-alpha.49", - "@types/node": "^16.0.0", - "@types/react": "^16.14.23", + "@storybook/addons": "7.0.0-alpha.50", + "@storybook/api": "7.0.0-alpha.50", + "@storybook/builder-webpack5": "7.0.0-alpha.50", + "@storybook/client-logger": "7.0.0-alpha.50", + "@storybook/core-client": "7.0.0-alpha.50", + "@storybook/core-common": "7.0.0-alpha.50", + "@storybook/core-events": "7.0.0-alpha.50", + "@storybook/core-server": "7.0.0-alpha.50", + "@storybook/core-webpack": "7.0.0-alpha.50", + "@storybook/docs-tools": "7.0.0-alpha.50", + "@storybook/node-logger": "7.0.0-alpha.50", + "@storybook/store": "7.0.0-alpha.50", + "@storybook/types": "7.0.0-alpha.50", + "@types/node": "^18.11.9", + "@types/react": "^16.14.34", "@types/react-dom": "^16.9.14", "@types/semver": "^7.3.4", "@types/webpack-env": "^1.18.0", @@ -81,12 +81,12 @@ "@types/rimraf": "^3.0.2", "@types/tmp": "^0.2.3", "cross-spawn": "^7.0.3", - "jest": "^27.5.1", + "jest": "^29.3.1", "jest-preset-angular": "^12.0.0", - "jest-specific-snapshot": "^5.0.0", + "jest-specific-snapshot": "^6.0.0", "rimraf": "^3.0.2", "tmp": "^0.2.1", - "typescript": "~4.6.3", + "typescript": "^4.9.3", "webpack": "5", "zone.js": "^0.11.0" }, @@ -123,5 +123,5 @@ "access": "public" }, "builders": "dist/builders/builders.json", - "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8" + "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242" } diff --git a/code/frameworks/angular/setup-jest.ts b/code/frameworks/angular/setup-jest.ts index 3caa9164960..06e753a2e78 100644 --- a/code/frameworks/angular/setup-jest.ts +++ b/code/frameworks/angular/setup-jest.ts @@ -1,4 +1,12 @@ // eslint-disable-next-line import/no-extraneous-dependencies import 'jest-preset-angular/setup-jest'; +import { webcrypto } from 'node:crypto'; + +Object.defineProperty(window, 'crypto', { + get() { + return webcrypto; + }, +}); + global.EventSource = class {} as any; diff --git a/code/frameworks/angular/src/builders/build-storybook/index.spec.ts b/code/frameworks/angular/src/builders/build-storybook/index.spec.ts index f539e00793a..c5164efcf99 100644 --- a/code/frameworks/angular/src/builders/build-storybook/index.spec.ts +++ b/code/frameworks/angular/src/builders/build-storybook/index.spec.ts @@ -3,8 +3,13 @@ import { TestingArchitectHost } from '@angular-devkit/architect/testing'; import { schema } from '@angular-devkit/core'; import * as path from 'path'; -const buildStandaloneMock = jest.fn(); -jest.doMock('@storybook/angular/standalone', () => buildStandaloneMock); +const buildDevStandaloneMock = jest.fn(); +const buildStaticStandaloneMock = jest.fn(); +const buildMock = { + buildDevStandalone: buildDevStandaloneMock, + buildStaticStandalone: buildStaticStandaloneMock, +}; +jest.doMock('@storybook/core-server', () => buildMock); jest.doMock('find-up', () => ({ sync: () => './storybook/tsconfig.ts' })); const cpSpawnMock = { @@ -50,7 +55,7 @@ describe('Build Storybook Builder', () => { }); beforeEach(() => { - buildStandaloneMock.mockImplementation((_options: unknown) => Promise.resolve()); + buildStaticStandaloneMock.mockImplementation((_options: unknown) => Promise.resolve()); cpSpawnMock.spawn.mockImplementation(() => ({ stdout: { on: () => {} }, stderr: { on: () => {} }, @@ -74,14 +79,16 @@ describe('Build Storybook Builder', () => { expect(output.success).toBeTruthy(); expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith(); - expect(buildStandaloneMock).toHaveBeenCalledWith({ + expect(buildStaticStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: 'angular-cli:build-2', angularBuilderContext: expect.any(Object), angularBuilderOptions: {}, configDir: '.storybook', + docs: undefined, loglevel: undefined, quiet: false, outputDir: 'storybook-static', + packageJson: expect.any(Object), mode: 'static', tsConfig: './storybook/tsconfig.ts', webpackStatsJson: false, @@ -100,14 +107,16 @@ describe('Build Storybook Builder', () => { expect(output.success).toBeTruthy(); expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith(); - expect(buildStandaloneMock).toHaveBeenCalledWith({ + expect(buildStaticStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: null, angularBuilderContext: expect.any(Object), angularBuilderOptions: {}, configDir: '.storybook', + docs: undefined, loglevel: undefined, quiet: false, outputDir: 'storybook-static', + packageJson: expect.any(Object), mode: 'static', tsConfig: 'path/to/tsConfig.json', webpackStatsJson: false, @@ -127,14 +136,16 @@ describe('Build Storybook Builder', () => { expect(output.success).toBeTruthy(); expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith(); - expect(buildStandaloneMock).toHaveBeenCalledWith({ + expect(buildStaticStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: null, angularBuilderContext: expect.any(Object), angularBuilderOptions: {}, configDir: '.storybook', + docs: undefined, loglevel: undefined, quiet: false, outputDir: 'storybook-static', + packageJson: expect.any(Object), mode: 'static', tsConfig: 'path/to/tsConfig.json', webpackStatsJson: true, @@ -142,7 +153,7 @@ describe('Build Storybook Builder', () => { }); it('should throw error', async () => { - buildStandaloneMock.mockRejectedValue(true); + buildStaticStandaloneMock.mockRejectedValue(true); const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', { browserTarget: 'angular-cli:build-2', @@ -177,16 +188,19 @@ describe('Build Storybook Builder', () => { ['compodoc', '-p', './storybook/tsconfig.ts', '-d', '', '-e', 'json'], { cwd: '', + shell: true, } ); - expect(buildStandaloneMock).toHaveBeenCalledWith({ + expect(buildStaticStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: 'angular-cli:build-2', angularBuilderContext: expect.any(Object), angularBuilderOptions: {}, configDir: '.storybook', + docs: undefined, loglevel: undefined, quiet: false, outputDir: 'storybook-static', + packageJson: expect.any(Object), mode: 'static', tsConfig: './storybook/tsconfig.ts', webpackStatsJson: false, @@ -206,14 +220,16 @@ describe('Build Storybook Builder', () => { expect(output.success).toBeTruthy(); expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith(); - expect(buildStandaloneMock).toHaveBeenCalledWith({ + expect(buildStaticStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: null, angularBuilderContext: expect.any(Object), angularBuilderOptions: { styles: ['style.scss'] }, configDir: '.storybook', + docs: undefined, loglevel: undefined, quiet: false, outputDir: 'storybook-static', + packageJson: expect.any(Object), mode: 'static', tsConfig: 'path/to/tsConfig.json', webpackStatsJson: false, diff --git a/code/frameworks/angular/src/builders/start-storybook/index.spec.ts b/code/frameworks/angular/src/builders/start-storybook/index.spec.ts index aacd352b6a8..c70d7cbf5b3 100644 --- a/code/frameworks/angular/src/builders/start-storybook/index.spec.ts +++ b/code/frameworks/angular/src/builders/start-storybook/index.spec.ts @@ -3,8 +3,13 @@ import { TestingArchitectHost } from '@angular-devkit/architect/testing'; import { schema } from '@angular-devkit/core'; import * as path from 'path'; -const buildStandaloneMock = jest.fn(); -jest.doMock('@storybook/angular/standalone', () => buildStandaloneMock); +const buildDevStandaloneMock = jest.fn(); +const buildStaticStandaloneMock = jest.fn(); +const buildMock = { + buildDevStandalone: buildDevStandaloneMock, + buildStaticStandalone: buildStaticStandaloneMock, +}; +jest.doMock('@storybook/core-server', () => buildMock); jest.doMock('find-up', () => ({ sync: () => './storybook/tsconfig.ts' })); const cpSpawnMock = { @@ -49,7 +54,7 @@ describe('Start Storybook Builder', () => { }); beforeEach(() => { - buildStandaloneMock.mockImplementation((_options: unknown) => Promise.resolve()); + buildDevStandaloneMock.mockImplementation((_options: unknown) => Promise.resolve()); cpSpawnMock.spawn.mockImplementation(() => ({ stdout: { on: () => {} }, stderr: { on: () => {} }, @@ -74,14 +79,16 @@ describe('Start Storybook Builder', () => { expect(output.success).toBeTruthy(); expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith(); - expect(buildStandaloneMock).toHaveBeenCalledWith({ + expect(buildDevStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: 'angular-cli:build-2', angularBuilderContext: expect.any(Object), angularBuilderOptions: {}, ci: false, configDir: '.storybook', + docs: undefined, host: 'localhost', https: false, + packageJson: expect.any(Object), port: 4400, quiet: false, smokeTest: false, @@ -105,14 +112,16 @@ describe('Start Storybook Builder', () => { expect(output.success).toBeTruthy(); expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith(); - expect(buildStandaloneMock).toHaveBeenCalledWith({ + expect(buildDevStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: null, angularBuilderContext: expect.any(Object), angularBuilderOptions: {}, ci: false, configDir: '.storybook', + docs: undefined, host: 'localhost', https: false, + packageJson: expect.any(Object), port: 4400, quiet: false, smokeTest: false, @@ -124,7 +133,7 @@ describe('Start Storybook Builder', () => { }); it('should throw error', async () => { - buildStandaloneMock.mockRejectedValue(true); + buildDevStandaloneMock.mockRejectedValue(true); const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', { browserTarget: 'angular-cli:build-2', @@ -159,16 +168,19 @@ describe('Start Storybook Builder', () => { ['compodoc', '-p', './storybook/tsconfig.ts', '-d', '', '-e', 'json'], { cwd: '', + shell: true, } ); - expect(buildStandaloneMock).toHaveBeenCalledWith({ + expect(buildDevStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: 'angular-cli:build-2', angularBuilderContext: expect.any(Object), angularBuilderOptions: {}, ci: false, configDir: '.storybook', + docs: undefined, host: 'localhost', https: false, + packageJson: expect.any(Object), port: 9009, quiet: false, smokeTest: false, @@ -193,7 +205,7 @@ describe('Start Storybook Builder', () => { expect(output.success).toBeTruthy(); expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith(); - expect(buildStandaloneMock).toHaveBeenCalledWith({ + expect(buildDevStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: null, angularBuilderContext: expect.any(Object), angularBuilderOptions: { @@ -201,9 +213,11 @@ describe('Start Storybook Builder', () => { }, ci: false, configDir: '.storybook', + docs: undefined, host: 'localhost', https: false, port: 4400, + packageJson: expect.any(Object), quiet: false, smokeTest: false, sslCa: undefined, diff --git a/code/frameworks/angular/src/builders/utils/run-compodoc.spec.ts b/code/frameworks/angular/src/builders/utils/run-compodoc.spec.ts index 900bc6a7669..06d0f37a522 100644 --- a/code/frameworks/angular/src/builders/utils/run-compodoc.spec.ts +++ b/code/frameworks/angular/src/builders/utils/run-compodoc.spec.ts @@ -51,6 +51,7 @@ describe('runCompodoc', () => { ['compodoc', '-p', 'path/to/tsconfig.json', '-d', 'path/to/project'], { cwd: 'path/to/project', + shell: true, } ); }); @@ -74,6 +75,7 @@ describe('runCompodoc', () => { ['compodoc', '-d', 'path/to/project', '-p', 'path/to/tsconfig.stories.json'], { cwd: 'path/to/project', + shell: true, } ); }); diff --git a/code/frameworks/angular/src/client/angular-beta/RendererFactory.test.ts b/code/frameworks/angular/src/client/angular-beta/RendererFactory.test.ts index 0129a09f68a..a50a8c5ff80 100644 --- a/code/frameworks/angular/src/client/angular-beta/RendererFactory.test.ts +++ b/code/frameworks/angular/src/client/angular-beta/RendererFactory.test.ts @@ -18,8 +18,8 @@ describe('RendererFactory', () => { beforeEach(async () => { rendererFactory = new RendererFactory(); document.body.innerHTML = - '
'; - rootTargetDOMNode = global.document.getElementById('root'); + '
'; + rootTargetDOMNode = global.document.getElementById('storybook-root'); rootDocstargetDOMNode = global.document.getElementById('root-docs'); (platformBrowserDynamic as any).mockImplementation(platformBrowserDynamicTesting); jest.spyOn(console, 'log').mockImplementation(() => {}); @@ -301,14 +301,16 @@ describe('RendererFactory', () => { }); it('should reset root HTML', async () => { - global.document.getElementById('root').appendChild(global.document.createElement('👾')); + global.document + .getElementById('storybook-root') + .appendChild(global.document.createElement('👾')); - expect(global.document.getElementById('root').innerHTML).toContain('Canvas 🖼'); + expect(global.document.getElementById('storybook-root').innerHTML).toContain('Canvas 🖼'); const render = await rendererFactory.getRendererInstance( 'my-story-in-docs', rootDocstargetDOMNode ); - expect(global.document.getElementById('root').innerHTML).toBe(''); + expect(global.document.getElementById('storybook-root').innerHTML).toBe(''); }); }); diff --git a/code/frameworks/angular/src/client/docs/__testfixtures__/doc-button/compodoc-posix.snapshot b/code/frameworks/angular/src/client/docs/__testfixtures__/doc-button/compodoc-posix.snapshot index dbb2d4c08ed..de95727d81f 100644 --- a/code/frameworks/angular/src/client/docs/__testfixtures__/doc-button/compodoc-posix.snapshot +++ b/code/frameworks/angular/src/client/docs/__testfixtures__/doc-button/compodoc-posix.snapshot @@ -10,7 +10,7 @@ Object { "getSignature": Object { "description": "

Getter for inputValue.

", - "line": 115, + "line": 116, "name": "inputValue", "rawdescription": " Getter for \`inputValue\`.", @@ -42,7 +42,7 @@ Getter for \`inputValue\`.", "type": "string", }, ], - "line": 110, + "line": 111, "name": "inputValue", "rawdescription": " Setter for \`inputValue\` that is also an \`@Input\`.", @@ -74,7 +74,7 @@ Setter for \`inputValue\` that is also an \`@Input\`.", "type": "T[]", }, ], - "line": 195, + "line": 196, "name": "item", "returnType": "void", "type": "void", @@ -84,7 +84,7 @@ Setter for \`inputValue\` that is also an \`@Input\`.", "getSignature": Object { "description": "

Get the private value.

", - "line": 154, + "line": 155, "name": "value", "rawdescription": " Get the private value.", @@ -116,7 +116,7 @@ Get the private value.", "type": "string | number", }, ], - "line": 149, + "line": 150, "name": "value", "rawdescription": " Set the private value.", @@ -137,14 +137,14 @@ like bold, italic, and inline code.

", "encapsulation": Array [], "entryComponents": Array [], - "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", + "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts", "hostBindings": Array [ Object { "decorators": Array [], "defaultValue": "false", "deprecated": false, "deprecationMessage": "", - "line": 124, + "line": 125, "name": "class.focused", "type": "boolean", }, @@ -164,7 +164,7 @@ like bold, italic, and inline code.

], "deprecated": false, "deprecationMessage": "", - "line": 120, + "line": 121, "name": "click", }, ], @@ -177,7 +177,7 @@ like bold, italic, and inline code.

"deprecationMessage": "", "description": "

Specify the accent-type of the button

", - "line": 56, + "line": 57, "name": "accent", "rawdescription": " Specify the accent-type of the button", @@ -190,7 +190,7 @@ Specify the accent-type of the button", "deprecationMessage": "", "description": "

Appearance style of the button.

", - "line": 52, + "line": 53, "name": "appearance", "rawdescription": " Appearance style of the button.", @@ -202,7 +202,7 @@ Appearance style of the button.", "deprecationMessage": "", "description": "

Setter for inputValue that is also an @Input.

", - "line": 110, + "line": 111, "name": "inputValue", "rawdescription": " Setter for \`inputValue\` that is also an \`@Input\`.", @@ -215,7 +215,7 @@ Setter for \`inputValue\` that is also an \`@Input\`.", "deprecationMessage": "", "description": "

Sets the button to a disabled state.

", - "line": 60, + "line": 61, "name": "isDisabled", "rawdescription": " Sets the button to a disabled state.", @@ -225,7 +225,7 @@ Sets the button to a disabled state.", "decorators": Array [], "deprecated": false, "deprecationMessage": "", - "line": 195, + "line": 196, "name": "item", "type": "T[]", }, @@ -238,24 +238,24 @@ Sets the button to a disabled state.", "jsdoctags": Array [ Object { "comment": "", - "end": 1525, + "end": 1587, "flags": 4227072, "kind": 325, "modifierFlagsCache": 0, - "pos": 1512, + "pos": 1574, "tagName": Object { - "end": 1521, + "end": 1583, "escapedText": "required", "flags": 4227072, "kind": 79, "modifierFlagsCache": 0, - "pos": 1513, + "pos": 1575, "transformFlags": 0, }, "transformFlags": 0, }, ], - "line": 68, + "line": 69, "name": "label", "rawdescription": " @@ -268,7 +268,7 @@ The inner text of the button. "decorators": Array [], "deprecated": false, "deprecationMessage": "", - "line": 192, + "line": 193, "name": "showKeyAlias", "type": "", }, @@ -279,7 +279,7 @@ The inner text of the button. "deprecationMessage": "", "description": "

Size of the button.

", - "line": 72, + "line": 73, "name": "size", "rawdescription": " Size of the button.", @@ -291,7 +291,7 @@ Size of the button.", "deprecationMessage": "", "description": "

Specifies some arbitrary object

", - "line": 75, + "line": 76, "name": "someDataObject", "rawdescription": " Specifies some arbitrary object", @@ -307,24 +307,24 @@ Specifies some arbitrary object", "jsdoctags": Array [ Object { "comment": "", - "end": 1802, + "end": 1864, "flags": 4227072, "kind": 329, "modifierFlagsCache": 0, - "pos": 1787, + "pos": 1849, "tagName": Object { - "end": 1798, + "end": 1860, "escapedText": "deprecated", "flags": 4227072, "kind": 79, "modifierFlagsCache": 0, - "pos": 1788, + "pos": 1850, "transformFlags": 0, }, "transformFlags": 0, }, ], - "line": 83, + "line": 84, "name": "somethingYouShouldNotUse", "rawdescription": " @@ -361,21 +361,21 @@ Some input you shouldn't use. "deprecated": false, "deprecationMessage": "", "name": Object { - "end": 3518, + "end": 3580, "escapedText": "x", "flags": 4227072, "kind": 79, "modifierFlagsCache": 0, - "pos": 3517, + "pos": 3579, "transformFlags": 0, }, "tagName": Object { - "end": 3516, + "end": 3578, "escapedText": "param", "flags": 4227072, "kind": 79, "modifierFlagsCache": 0, - "pos": 3511, + "pos": 3573, "transformFlags": 0, }, "type": "number", @@ -386,27 +386,27 @@ Some input you shouldn't use. "deprecated": false, "deprecationMessage": "", "name": Object { - "end": 3563, + "end": 3625, "escapedText": "y", "flags": 4227072, "kind": 79, "modifierFlagsCache": 0, - "pos": 3562, + "pos": 3624, "transformFlags": 0, }, "tagName": Object { - "end": 3561, + "end": 3623, "escapedText": "param", "flags": 4227072, "kind": 79, "modifierFlagsCache": 0, - "pos": 3556, + "pos": 3618, "transformFlags": 0, }, "type": "string | number", }, ], - "line": 164, + "line": 165, "modifierKind": Array [ 123, ], @@ -448,7 +448,7 @@ An internal calculation method which adds \`x\` and \`y\` together. "type": "", }, ], - "line": 120, + "line": 121, "name": "onClickListener", "optional": false, "returnType": "void", @@ -474,27 +474,27 @@ An internal calculation method which adds \`x\` and \`y\` together. "deprecated": false, "deprecationMessage": "", "name": Object { - "end": 4079, + "end": 4141, "escapedText": "password", "flags": 4227072, "kind": 79, "modifierFlagsCache": 0, - "pos": 4071, + "pos": 4133, "transformFlags": 0, }, "tagName": Object { - "end": 4070, + "end": 4132, "escapedText": "param", "flags": 4227072, "kind": 79, "modifierFlagsCache": 0, - "pos": 4065, + "pos": 4127, "transformFlags": 0, }, "type": "string", }, ], - "line": 187, + "line": 188, "modifierKind": Array [ 121, ], @@ -529,28 +529,28 @@ A private method. "deprecated": false, "deprecationMessage": "", "name": Object { - "end": 3938, + "end": 4000, "escapedText": "id", "flags": 4227072, "kind": 79, "modifierFlagsCache": 0, - "pos": 3936, + "pos": 3998, "transformFlags": 0, }, "optional": true, "tagName": Object { - "end": 3935, + "end": 3997, "escapedText": "param", "flags": 4227072, "kind": 79, "modifierFlagsCache": 0, - "pos": 3930, + "pos": 3992, "transformFlags": 0, }, "type": "number", }, ], - "line": 178, + "line": 179, "modifierKind": Array [ 122, ], @@ -588,7 +588,7 @@ A protected method. "type": "ISomeInterface", }, ], - "line": 169, + "line": 170, "modifierKind": Array [ 123, ], @@ -610,7 +610,7 @@ A public method using an interface.", "description": "

Handler to be called when the button is clicked by a user.

Will also block the emission of the event if isDisabled is true.

", - "line": 91, + "line": 92, "name": "onClick", "rawdescription": " @@ -627,7 +627,7 @@ Will also block the emission of the event if \`isDisabled\` is true. "deprecated": false, "deprecationMessage": "", "description": "", - "line": 106, + "line": 107, "modifierKind": Array [ 121, ], @@ -641,7 +641,7 @@ Will also block the emission of the event if \`isDisabled\` is true. "deprecationMessage": "", "description": "

Private value.

", - "line": 146, + "line": 147, "modifierKind": Array [ 121, ], @@ -661,7 +661,7 @@ Private value.", "deprecated": false, "deprecationMessage": "", "description": "", - "line": 48, + "line": 49, "name": "buttonRef", "optional": false, "type": "ElementRef", @@ -677,7 +677,7 @@ Private value.", "deprecated": false, "deprecationMessage": "", "description": "", - "line": 124, + "line": 125, "name": "focus", "optional": false, "type": "", @@ -688,7 +688,7 @@ Private value.", "deprecationMessage": "", "description": "

Public value.

", - "line": 143, + "line": 144, "modifierKind": Array [ 123, ], @@ -702,7 +702,7 @@ Public value.", "deprecated": false, "deprecationMessage": "", "description": "", - "line": 199, + "line": 200, "modifierKind": Array [ 123, ], @@ -937,7 +937,7 @@ export class InputComponent { Object { "coverageCount": "16/25", "coveragePercent": 64, - "filePath": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", + "filePath": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts", "linktype": "component", "name": "InputComponent", "status": "good", @@ -946,7 +946,7 @@ export class InputComponent { Object { "coverageCount": "0/4", "coveragePercent": 0, - "filePath": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", + "filePath": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts", "linktype": "interface", "name": "ISomeInterface", "status": "low", @@ -955,7 +955,7 @@ export class InputComponent { Object { "coverageCount": "0/1", "coveragePercent": 0, - "filePath": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", + "filePath": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts", "linksubtype": "variable", "linktype": "miscellaneous", "name": "exportedConstant", @@ -973,7 +973,7 @@ export class InputComponent { Object { "deprecated": false, "deprecationMessage": "", - "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", + "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts", "id": "interface-ISomeInterface-d145da25329b094ee29610c45a9e46387cb39eddb2a67b4c9fadb84bcec76eacd60d131e48d98b2ee5725dedd25f2eb299b704e8e0a34307d6e84f6e57d57044", "indexSignatures": Array [], "kind": 165, @@ -984,7 +984,7 @@ export class InputComponent { "deprecated": false, "deprecationMessage": "", "description": "", - "line": 25, + "line": 26, "name": "one", "optional": false, "type": "string", @@ -993,7 +993,7 @@ export class InputComponent { "deprecated": false, "deprecationMessage": "", "description": "", - "line": 27, + "line": 28, "name": "three", "optional": false, "type": "any[]", @@ -1002,7 +1002,7 @@ export class InputComponent { "deprecated": false, "deprecationMessage": "", "description": "", - "line": 26, + "line": 27, "name": "two", "optional": false, "type": "boolean", @@ -1230,14 +1230,14 @@ export class InputComponent { "deprecated": false, "deprecationMessage": "", "description": "", - "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", + "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts", "name": "ButtonAccent", "subtype": "enum", }, ], "functions": Array [], "groupedEnumerations": Object { - "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts": Array [ + "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts": Array [ Object { "childs": Array [ Object { @@ -1257,7 +1257,7 @@ export class InputComponent { "deprecated": false, "deprecationMessage": "", "description": "", - "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", + "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts", "name": "ButtonAccent", "subtype": "enum", }, @@ -1265,13 +1265,13 @@ export class InputComponent { }, "groupedFunctions": Object {}, "groupedTypeAliases": Object { - "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts": Array [ + "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts": Array [ Object { "ctype": "miscellaneous", "deprecated": false, "deprecationMessage": "", "description": "", - "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", + "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts", "kind": 186, "name": "ButtonSize", "rawtype": "\\"small\\" | \\"medium\\" | \\"large\\" | \\"xlarge\\"", @@ -1280,13 +1280,13 @@ export class InputComponent { ], }, "groupedVariables": Object { - "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts": Array [ + "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts": Array [ Object { "ctype": "miscellaneous", "defaultValue": "'An exported constant'", "deprecated": false, "deprecationMessage": "", - "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", + "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts", "name": "exportedConstant", "subtype": "variable", "type": "string", @@ -1299,7 +1299,7 @@ export class InputComponent { "deprecated": false, "deprecationMessage": "", "description": "", - "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", + "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts", "kind": 186, "name": "ButtonSize", "rawtype": "\\"small\\" | \\"medium\\" | \\"large\\" | \\"xlarge\\"", @@ -1312,7 +1312,7 @@ export class InputComponent { "defaultValue": "'An exported constant'", "deprecated": false, "deprecationMessage": "", - "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts", + "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts", "name": "exportedConstant", "subtype": "variable", "type": "string", diff --git a/code/frameworks/angular/src/client/docs/__testfixtures__/doc-button/compodoc-undefined.snapshot b/code/frameworks/angular/src/client/docs/__testfixtures__/doc-button/compodoc-undefined.snapshot index 012aeb4a165..de95727d81f 100644 --- a/code/frameworks/angular/src/client/docs/__testfixtures__/doc-button/compodoc-undefined.snapshot +++ b/code/frameworks/angular/src/client/docs/__testfixtures__/doc-button/compodoc-undefined.snapshot @@ -10,7 +10,7 @@ Object { "getSignature": Object { "description": "

Getter for inputValue.

", - "line": 115, + "line": 116, "name": "inputValue", "rawdescription": " Getter for \`inputValue\`.", @@ -42,7 +42,7 @@ Getter for \`inputValue\`.", "type": "string", }, ], - "line": 110, + "line": 111, "name": "inputValue", "rawdescription": " Setter for \`inputValue\` that is also an \`@Input\`.", @@ -74,7 +74,7 @@ Setter for \`inputValue\` that is also an \`@Input\`.", "type": "T[]", }, ], - "line": 195, + "line": 196, "name": "item", "returnType": "void", "type": "void", @@ -84,7 +84,7 @@ Setter for \`inputValue\` that is also an \`@Input\`.", "getSignature": Object { "description": "

Get the private value.

", - "line": 154, + "line": 155, "name": "value", "rawdescription": " Get the private value.", @@ -116,7 +116,7 @@ Get the private value.", "type": "string | number", }, ], - "line": 149, + "line": 150, "name": "value", "rawdescription": " Set the private value.", @@ -144,7 +144,7 @@ like bold, italic, and inline code.

"defaultValue": "false", "deprecated": false, "deprecationMessage": "", - "line": 124, + "line": 125, "name": "class.focused", "type": "boolean", }, @@ -164,7 +164,7 @@ like bold, italic, and inline code.

], "deprecated": false, "deprecationMessage": "", - "line": 120, + "line": 121, "name": "click", }, ], @@ -177,7 +177,7 @@ like bold, italic, and inline code.

"deprecationMessage": "", "description": "

Specify the accent-type of the button

", - "line": 56, + "line": 57, "name": "accent", "rawdescription": " Specify the accent-type of the button", @@ -190,7 +190,7 @@ Specify the accent-type of the button", "deprecationMessage": "", "description": "

Appearance style of the button.

", - "line": 52, + "line": 53, "name": "appearance", "rawdescription": " Appearance style of the button.", @@ -202,7 +202,7 @@ Appearance style of the button.", "deprecationMessage": "", "description": "

Setter for inputValue that is also an @Input.

", - "line": 110, + "line": 111, "name": "inputValue", "rawdescription": " Setter for \`inputValue\` that is also an \`@Input\`.", @@ -215,7 +215,7 @@ Setter for \`inputValue\` that is also an \`@Input\`.", "deprecationMessage": "", "description": "

Sets the button to a disabled state.

", - "line": 60, + "line": 61, "name": "isDisabled", "rawdescription": " Sets the button to a disabled state.", @@ -225,7 +225,7 @@ Sets the button to a disabled state.", "decorators": Array [], "deprecated": false, "deprecationMessage": "", - "line": 195, + "line": 196, "name": "item", "type": "T[]", }, @@ -238,24 +238,24 @@ Sets the button to a disabled state.", "jsdoctags": Array [ Object { "comment": "", - "end": 1525, + "end": 1587, "flags": 4227072, "kind": 325, "modifierFlagsCache": 0, - "pos": 1512, + "pos": 1574, "tagName": Object { - "end": 1521, + "end": 1583, "escapedText": "required", "flags": 4227072, "kind": 79, "modifierFlagsCache": 0, - "pos": 1513, + "pos": 1575, "transformFlags": 0, }, "transformFlags": 0, }, ], - "line": 68, + "line": 69, "name": "label", "rawdescription": " @@ -268,7 +268,7 @@ The inner text of the button. "decorators": Array [], "deprecated": false, "deprecationMessage": "", - "line": 192, + "line": 193, "name": "showKeyAlias", "type": "", }, @@ -279,7 +279,7 @@ The inner text of the button. "deprecationMessage": "", "description": "

Size of the button.

", - "line": 72, + "line": 73, "name": "size", "rawdescription": " Size of the button.", @@ -291,7 +291,7 @@ Size of the button.", "deprecationMessage": "", "description": "

Specifies some arbitrary object

", - "line": 75, + "line": 76, "name": "someDataObject", "rawdescription": " Specifies some arbitrary object", @@ -307,24 +307,24 @@ Specifies some arbitrary object", "jsdoctags": Array [ Object { "comment": "", - "end": 1802, + "end": 1864, "flags": 4227072, "kind": 329, "modifierFlagsCache": 0, - "pos": 1787, + "pos": 1849, "tagName": Object { - "end": 1798, + "end": 1860, "escapedText": "deprecated", "flags": 4227072, "kind": 79, "modifierFlagsCache": 0, - "pos": 1788, + "pos": 1850, "transformFlags": 0, }, "transformFlags": 0, }, ], - "line": 83, + "line": 84, "name": "somethingYouShouldNotUse", "rawdescription": " @@ -361,21 +361,21 @@ Some input you shouldn't use. "deprecated": false, "deprecationMessage": "", "name": Object { - "end": 3518, + "end": 3580, "escapedText": "x", "flags": 4227072, "kind": 79, "modifierFlagsCache": 0, - "pos": 3517, + "pos": 3579, "transformFlags": 0, }, "tagName": Object { - "end": 3516, + "end": 3578, "escapedText": "param", "flags": 4227072, "kind": 79, "modifierFlagsCache": 0, - "pos": 3511, + "pos": 3573, "transformFlags": 0, }, "type": "number", @@ -386,27 +386,27 @@ Some input you shouldn't use. "deprecated": false, "deprecationMessage": "", "name": Object { - "end": 3563, + "end": 3625, "escapedText": "y", "flags": 4227072, "kind": 79, "modifierFlagsCache": 0, - "pos": 3562, + "pos": 3624, "transformFlags": 0, }, "tagName": Object { - "end": 3561, + "end": 3623, "escapedText": "param", "flags": 4227072, "kind": 79, "modifierFlagsCache": 0, - "pos": 3556, + "pos": 3618, "transformFlags": 0, }, "type": "string | number", }, ], - "line": 164, + "line": 165, "modifierKind": Array [ 123, ], @@ -448,7 +448,7 @@ An internal calculation method which adds \`x\` and \`y\` together. "type": "", }, ], - "line": 120, + "line": 121, "name": "onClickListener", "optional": false, "returnType": "void", @@ -474,27 +474,27 @@ An internal calculation method which adds \`x\` and \`y\` together. "deprecated": false, "deprecationMessage": "", "name": Object { - "end": 4079, + "end": 4141, "escapedText": "password", "flags": 4227072, "kind": 79, "modifierFlagsCache": 0, - "pos": 4071, + "pos": 4133, "transformFlags": 0, }, "tagName": Object { - "end": 4070, + "end": 4132, "escapedText": "param", "flags": 4227072, "kind": 79, "modifierFlagsCache": 0, - "pos": 4065, + "pos": 4127, "transformFlags": 0, }, "type": "string", }, ], - "line": 187, + "line": 188, "modifierKind": Array [ 121, ], @@ -529,28 +529,28 @@ A private method. "deprecated": false, "deprecationMessage": "", "name": Object { - "end": 3938, + "end": 4000, "escapedText": "id", "flags": 4227072, "kind": 79, "modifierFlagsCache": 0, - "pos": 3936, + "pos": 3998, "transformFlags": 0, }, "optional": true, "tagName": Object { - "end": 3935, + "end": 3997, "escapedText": "param", "flags": 4227072, "kind": 79, "modifierFlagsCache": 0, - "pos": 3930, + "pos": 3992, "transformFlags": 0, }, "type": "number", }, ], - "line": 178, + "line": 179, "modifierKind": Array [ 122, ], @@ -588,7 +588,7 @@ A protected method. "type": "ISomeInterface", }, ], - "line": 169, + "line": 170, "modifierKind": Array [ 123, ], @@ -610,7 +610,7 @@ A public method using an interface.", "description": "

Handler to be called when the button is clicked by a user.

Will also block the emission of the event if isDisabled is true.

", - "line": 91, + "line": 92, "name": "onClick", "rawdescription": " @@ -627,7 +627,7 @@ Will also block the emission of the event if \`isDisabled\` is true. "deprecated": false, "deprecationMessage": "", "description": "", - "line": 106, + "line": 107, "modifierKind": Array [ 121, ], @@ -641,7 +641,7 @@ Will also block the emission of the event if \`isDisabled\` is true. "deprecationMessage": "", "description": "

Private value.

", - "line": 146, + "line": 147, "modifierKind": Array [ 121, ], @@ -661,7 +661,7 @@ Private value.", "deprecated": false, "deprecationMessage": "", "description": "", - "line": 48, + "line": 49, "name": "buttonRef", "optional": false, "type": "ElementRef", @@ -677,7 +677,7 @@ Private value.", "deprecated": false, "deprecationMessage": "", "description": "", - "line": 124, + "line": 125, "name": "focus", "optional": false, "type": "", @@ -688,7 +688,7 @@ Private value.", "deprecationMessage": "", "description": "

Public value.

", - "line": 143, + "line": 144, "modifierKind": Array [ 123, ], @@ -702,7 +702,7 @@ Public value.", "deprecated": false, "deprecationMessage": "", "description": "", - "line": 199, + "line": 200, "modifierKind": Array [ 123, ], @@ -984,7 +984,7 @@ export class InputComponent { "deprecated": false, "deprecationMessage": "", "description": "", - "line": 25, + "line": 26, "name": "one", "optional": false, "type": "string", @@ -993,7 +993,7 @@ export class InputComponent { "deprecated": false, "deprecationMessage": "", "description": "", - "line": 27, + "line": 28, "name": "three", "optional": false, "type": "any[]", @@ -1002,7 +1002,7 @@ export class InputComponent { "deprecated": false, "deprecationMessage": "", "description": "", - "line": 26, + "line": 27, "name": "two", "optional": false, "type": "boolean", diff --git a/code/frameworks/angular/src/client/public-types.ts b/code/frameworks/angular/src/client/public-types.ts index 6f14ba79607..c4a54cf2589 100644 --- a/code/frameworks/angular/src/client/public-types.ts +++ b/code/frameworks/angular/src/client/public-types.ts @@ -1,7 +1,18 @@ -import { AnnotatedStoryFn, Args, ComponentAnnotations, StoryAnnotations } from '@storybook/types'; +import { + AnnotatedStoryFn, + Args, + ComponentAnnotations, + DecoratorFunction, + LoaderFunction, + StoryAnnotations, + StoryContext as GenericStoryContext, + StrictArgs, +} from '@storybook/types'; import { AngularRenderer } from './types'; -export type { Args, ArgTypes } from '@storybook/types'; +export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types'; +export type { Parameters as AngularParameters } from './types'; +export type { AngularRenderer }; /** * Metadata to configure the stories for a component. @@ -34,3 +45,7 @@ export type StoryObj = StoryAnnotations; * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) */ export type Story = StoryFn; + +export type Decorator = DecoratorFunction; +export type Loader = LoaderFunction; +export type StoryContext = GenericStoryContext; diff --git a/code/frameworks/angular/src/server/framework-preset-angular-cli.ts b/code/frameworks/angular/src/server/framework-preset-angular-cli.ts index 6342bb1118a..fcc4a17aea8 100644 --- a/code/frameworks/angular/src/server/framework-preset-angular-cli.ts +++ b/code/frameworks/angular/src/server/framework-preset-angular-cli.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-shadow */ import webpack from 'webpack'; import { logger } from '@storybook/node-logger'; import { BuilderContext, Target, targetFromTargetString } from '@angular-devkit/architect'; diff --git a/code/frameworks/angular/template/cli/Button.stories.ts b/code/frameworks/angular/template/cli/Button.stories.ts index b7154d6c871..6bcd3ee4738 100644 --- a/code/frameworks/angular/template/cli/Button.stories.ts +++ b/code/frameworks/angular/template/cli/Button.stories.ts @@ -1,20 +1,17 @@ import type { Meta, StoryObj } from '@storybook/angular'; import Button from './button.component'; -// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export +// More on how to set up stories at: https://storybook.js.org/docs/7.0/angular/writing-stories/introduction const meta: Meta`, context: args, }), - // More on argTypes: https://storybook.js.org/docs/ember/api/argtypes argTypes: { label: { control: 'text' }, }, }; -// More on component templates: https://storybook.js.org/docs/ember/writing-stories/introduction#using-args +// More on writing stories with args: https://storybook.js.org/docs/7.0/ember/writing-stories/args export const Text = { args: { label: 'Button', diff --git a/code/frameworks/html-webpack5/jest.config.js b/code/frameworks/html-webpack5/jest.config.js new file mode 100644 index 00000000000..343e4c7a7f3 --- /dev/null +++ b/code/frameworks/html-webpack5/jest.config.js @@ -0,0 +1,7 @@ +const path = require('path'); +const baseConfig = require('../../jest.config.node'); + +module.exports = { + ...baseConfig, + displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep), +}; diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 8daa980bd89..26902bfe548 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "7.0.0-alpha.49", + "version": "7.0.0-alpha.50", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -50,17 +50,17 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.0.0-alpha.49", - "@storybook/core-common": "7.0.0-alpha.49", - "@storybook/html": "7.0.0-alpha.49", - "@storybook/preset-html-webpack": "7.0.0-alpha.49", - "@types/node": "^16.0.0", + "@storybook/builder-webpack5": "7.0.0-alpha.50", + "@storybook/core-common": "7.0.0-alpha.50", + "@storybook/html": "7.0.0-alpha.50", + "@storybook/preset-html-webpack": "7.0.0-alpha.50", + "@types/node": "^18.11.9", "global": "^4.4.0", "react": "16.14.0", "react-dom": "16.14.0" }, "devDependencies": { - "typescript": "~4.6.3" + "typescript": "^4.9.3" }, "peerDependencies": { "@babel/core": "*" @@ -78,5 +78,5 @@ ], "platform": "node" }, - "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8" + "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242" } diff --git a/code/frameworks/nextjs/jest.config.js b/code/frameworks/nextjs/jest.config.js new file mode 100644 index 00000000000..343e4c7a7f3 --- /dev/null +++ b/code/frameworks/nextjs/jest.config.js @@ -0,0 +1,7 @@ +const path = require('path'); +const baseConfig = require('../../jest.config.node'); + +module.exports = { + ...baseConfig, + displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep), +}; diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 7e756383bfb..20fab30ca6e 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "7.0.0-alpha.49", + "version": "7.0.0-alpha.50", "description": "Storybook for Next.js", "keywords": [ "storybook", @@ -60,13 +60,13 @@ }, "dependencies": { "@babel/preset-typescript": "^7.18.6", - "@storybook/addons": "7.0.0-alpha.49", - "@storybook/builder-webpack5": "7.0.0-alpha.49", - "@storybook/core-common": "7.0.0-alpha.49", - "@storybook/node-logger": "7.0.0-alpha.49", - "@storybook/preset-react-webpack": "7.0.0-alpha.49", - "@storybook/react": "7.0.0-alpha.49", - "@types/node": "^14.14.20 || ^16.0.0", + "@storybook/addons": "7.0.0-alpha.50", + "@storybook/builder-webpack5": "7.0.0-alpha.50", + "@storybook/core-common": "7.0.0-alpha.50", + "@storybook/node-logger": "7.0.0-alpha.50", + "@storybook/preset-react-webpack": "7.0.0-alpha.50", + "@storybook/react": "7.0.0-alpha.50", + "@types/node": "^18.11.9", "find-up": "^5.0.0", "fs-extra": "^9.0.1", "image-size": "^1.0.0", @@ -81,9 +81,9 @@ "tsconfig-paths-webpack-plugin": "^3.5.2" }, "devDependencies": { - "@storybook/addon-actions": "7.0.0-alpha.49", + "@storybook/addon-actions": "7.0.0-alpha.50", "next": "^12.2.4", - "typescript": "~4.6.3", + "typescript": "^4.9.3", "webpack": "^5.65.0" }, "peerDependencies": { @@ -120,5 +120,5 @@ ], "platform": "node" }, - "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8" + "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242" } diff --git a/code/frameworks/nextjs/src/next-image-loader-stub.ts b/code/frameworks/nextjs/src/next-image-loader-stub.ts index 6ebc675d85b..b506cba14e2 100644 --- a/code/frameworks/nextjs/src/next-image-loader-stub.ts +++ b/code/frameworks/nextjs/src/next-image-loader-stub.ts @@ -16,7 +16,7 @@ const nextImageLoaderStub: RawLoaderDefinition = function (conten this.emitFile(outputPath, content); - const { width, height } = imageSizeOf(content); + const { width, height } = imageSizeOf(this.resourcePath); return `export default ${JSON.stringify({ src: outputPath, @@ -28,4 +28,4 @@ const nextImageLoaderStub: RawLoaderDefinition = function (conten nextImageLoaderStub.raw = true; -export = nextImageLoaderStub; +export default nextImageLoaderStub; diff --git a/code/frameworks/nextjs/template/cli/js/Button.stories.js b/code/frameworks/nextjs/template/cli/js/Button.stories.js new file mode 100644 index 00000000000..d9d3e1b7057 --- /dev/null +++ b/code/frameworks/nextjs/template/cli/js/Button.stories.js @@ -0,0 +1,41 @@ +import { Button } from './Button'; + +// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction +export default { + title: 'Example/Button', + component: Button, + tags: ['docsPage'], + argTypes: { + backgroundColor: { + control: 'color', + }, + }, +}; + +// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args +export const Primary = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary = { + args: { + label: 'Button', + }, +}; + +export const Large = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/code/frameworks/nextjs/template/cli/js/Button.stories.jsx b/code/frameworks/nextjs/template/cli/js/Button.stories.jsx deleted file mode 100644 index bfabf81396b..00000000000 --- a/code/frameworks/nextjs/template/cli/js/Button.stories.jsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; - -import { Button } from './Button'; - -// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export -export default { - title: 'Example/Button', - component: Button, - // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page - tags: ['docsPage'], - // More on argTypes: https://storybook.js.org/docs/react/api/argtypes - argTypes: { - backgroundColor: { control: 'color' }, - }, -}; - -// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args -const Template = (args) => `, + template: ` `, styleUrls: ['./button.css'], }) export class ButtonComponent { @@ -24,4 +23,4 @@ export class ButtonComponent { @Input() content: string; } -``` \ No newline at end of file +``` diff --git a/docs/snippets/angular/button-group-story.ts.mdx b/docs/snippets/angular/button-group-story.ts.mdx index b444db3c4e3..c07f7c3ae64 100644 --- a/docs/snippets/angular/button-group-story.ts.mdx +++ b/docs/snippets/angular/button-group-story.ts.mdx @@ -1,7 +1,9 @@ ```ts // ButtonGroup.stories.ts -import { Meta, moduleMetadata, StoryFn } from '@storybook/angular'; +import { moduleMetadata } from '@storybook/angular'; + +import type { Meta, StoryObj } from '@storybook/angular'; import { CommonModule } from '@angular/common'; @@ -11,7 +13,7 @@ import { Button } from './button.component'; //👇 Imports the Button stories import * as ButtonStories from './Button.stories'; -export default { +const meta: Meta = { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading * to learn how to generate automatic titles @@ -24,7 +26,10 @@ export default { imports: [CommonModule], }), ], -} as Meta; +}; + +export default meta; +type Story = StoryObj; /* *👇 Render functions are a framework specific feature to allow you control on how the component renders. diff --git a/docs/snippets/angular/button-implementation.ts.mdx b/docs/snippets/angular/button-implementation.ts.mdx index d37ef9dc281..09b9e94e60a 100644 --- a/docs/snippets/angular/button-implementation.ts.mdx +++ b/docs/snippets/angular/button-implementation.ts.mdx @@ -40,4 +40,4 @@ export class ButtonComponent { @Output() onClick = new EventEmitter(); } -``` \ No newline at end of file +``` diff --git a/docs/snippets/angular/button-story-click-handler-args.ts.mdx b/docs/snippets/angular/button-story-click-handler-args.ts.mdx index 6041ffe8f2c..50e12f7f54a 100644 --- a/docs/snippets/angular/button-story-click-handler-args.ts.mdx +++ b/docs/snippets/angular/button-story-click-handler-args.ts.mdx @@ -1,20 +1,22 @@ ```ts // Button.stories.ts -import type { Meta, Story } from '@storybook/angular'; - +import type { Meta, StoryObj } from '@storybook/angular'; import { action } from '@storybook/addon-actions'; import { Button } from './button.component'; -export default { +const meta: Meta; }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-addons-api-useapi.js.mdx b/docs/snippets/common/storybook-addons-api-useapi.js.mdx index f6c05424dc6..267b45b8c00 100644 --- a/docs/snippets/common/storybook-addons-api-useapi.js.mdx +++ b/docs/snippets/common/storybook-addons-api-useapi.js.mdx @@ -10,4 +10,4 @@ export const Panel = () => { return
do something with storybook's api
; }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-addons-api-usechannel.js.mdx b/docs/snippets/common/storybook-addons-api-usechannel.js.mdx index f017c5cfccb..13fb84dcb93 100644 --- a/docs/snippets/common/storybook-addons-api-usechannel.js.mdx +++ b/docs/snippets/common/storybook-addons-api-usechannel.js.mdx @@ -16,4 +16,4 @@ export const Panel = () => { ); }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-addons-api-useglobal.js.mdx b/docs/snippets/common/storybook-addons-api-useglobal.js.mdx index ad33aef3425..fa5a1eae3f7 100644 --- a/docs/snippets/common/storybook-addons-api-useglobal.js.mdx +++ b/docs/snippets/common/storybook-addons-api-useglobal.js.mdx @@ -16,4 +16,4 @@ export const Panel = () => { ); }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-addons-api-useparameter.js.mdx b/docs/snippets/common/storybook-addons-api-useparameter.js.mdx index fdbc7430178..71bd3527ca3 100644 --- a/docs/snippets/common/storybook-addons-api-useparameter.js.mdx +++ b/docs/snippets/common/storybook-addons-api-useparameter.js.mdx @@ -15,4 +15,4 @@ export const Panel = () => { ); }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx b/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx index 4e1515a3b6b..72b60fbf809 100644 --- a/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx +++ b/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx @@ -10,4 +10,4 @@ export const Panel = () => { return
do something with storybook's state
; }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-args-url-params-converted.js.mdx b/docs/snippets/common/storybook-args-url-params-converted.js.mdx index 1334020da05..49154fc5e7e 100644 --- a/docs/snippets/common/storybook-args-url-params-converted.js.mdx +++ b/docs/snippets/common/storybook-args-url-params-converted.js.mdx @@ -4,4 +4,4 @@ arr: ['one', 'two'], nil: null } -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-argtypes-with-addon.js.mdx b/docs/snippets/common/storybook-argtypes-with-addon.js.mdx index f34c4859bfb..ac5c85ca5c4 100644 --- a/docs/snippets/common/storybook-argtypes-with-addon.js.mdx +++ b/docs/snippets/common/storybook-argtypes-with-addon.js.mdx @@ -5,4 +5,4 @@ import { useArgTypes } from '@storybook/api'; // inside your panel const { argTypes } = useArgTypes(); -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-babel-configuration-example.ts.mdx b/docs/snippets/common/storybook-babel-configuration-example.ts.mdx index 5f81e269b1a..5e74dccae3f 100644 --- a/docs/snippets/common/storybook-babel-configuration-example.ts.mdx +++ b/docs/snippets/common/storybook-babel-configuration-example.ts.mdx @@ -10,4 +10,4 @@ export function babelDefault(config: TransformOptions) { ], }; } -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-backgrounds-addon-default-params.js.mdx b/docs/snippets/common/storybook-backgrounds-addon-default-params.js.mdx index a733b90f7de..2650e5014cf 100644 --- a/docs/snippets/common/storybook-backgrounds-addon-default-params.js.mdx +++ b/docs/snippets/common/storybook-backgrounds-addon-default-params.js.mdx @@ -9,4 +9,4 @@ export const parameters = { ], }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-backgrounds-preset-config.js.mdx b/docs/snippets/common/storybook-backgrounds-preset-config.js.mdx index 1a1312bc55e..4bf557bd879 100644 --- a/docs/snippets/common/storybook-backgrounds-preset-config.js.mdx +++ b/docs/snippets/common/storybook-backgrounds-preset-config.js.mdx @@ -4,4 +4,4 @@ export function config(entry = []) { return [...entry, require.resolve('./defaultParameters')]; } -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-builder-api-build-server.ts.mdx b/docs/snippets/common/storybook-builder-api-build-server.ts.mdx index 28f40b3d394..4746d62352c 100644 --- a/docs/snippets/common/storybook-builder-api-build-server.ts.mdx +++ b/docs/snippets/common/storybook-builder-api-build-server.ts.mdx @@ -33,4 +33,4 @@ export async function build(options: ExtendedOptions) { await viteBuild(finalConfig); } -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-builder-api-configuration-options.ts.mdx b/docs/snippets/common/storybook-builder-api-configuration-options.ts.mdx index 6e802781ee3..cc1e3c84629 100644 --- a/docs/snippets/common/storybook-builder-api-configuration-options.ts.mdx +++ b/docs/snippets/common/storybook-builder-api-configuration-options.ts.mdx @@ -33,4 +33,4 @@ export async function createViteServer(options: ExtendedOptions, devServer: Serv // Remainder implementation } -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-builder-api-interface.ts.mdx b/docs/snippets/common/storybook-builder-api-interface.ts.mdx index 762ea1f146b..ddab935cefd 100644 --- a/docs/snippets/common/storybook-builder-api-interface.ts.mdx +++ b/docs/snippets/common/storybook-builder-api-interface.ts.mdx @@ -19,4 +19,4 @@ export interface Builder { corePresets?: string[]; overridePresets?: string[]; } -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-builder-api-mdx.ts.mdx b/docs/snippets/common/storybook-builder-api-mdx.ts.mdx index e9591db2ad4..ccefa98f75e 100644 --- a/docs/snippets/common/storybook-builder-api-mdx.ts.mdx +++ b/docs/snippets/common/storybook-builder-api-mdx.ts.mdx @@ -17,4 +17,4 @@ export function mdxPlugin() { }; }); } -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-builder-api-shutdown-server.ts.mdx b/docs/snippets/common/storybook-builder-api-shutdown-server.ts.mdx index 03144c66ca7..4c92faa541f 100644 --- a/docs/snippets/common/storybook-builder-api-shutdown-server.ts.mdx +++ b/docs/snippets/common/storybook-builder-api-shutdown-server.ts.mdx @@ -21,4 +21,4 @@ export const start: ViteBuilder['start'] = async ({ options, server: devServer } totalTime: process.hrtime(startTime), }; }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-client-globals-example-file.ts.mdx b/docs/snippets/common/storybook-client-globals-example-file.ts.mdx index 10e215c585d..2acf4a679ce 100644 --- a/docs/snippets/common/storybook-client-globals-example-file.ts.mdx +++ b/docs/snippets/common/storybook-client-globals-example-file.ts.mdx @@ -6,4 +6,4 @@ import global from 'global'; const { window: globalWindow } = global; globalWindow.STORYBOOK_ENV = 'vue'; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-client-preview.ts.mdx b/docs/snippets/common/storybook-client-preview.ts.mdx index b799280eeb5..02c41f0d9bb 100644 --- a/docs/snippets/common/storybook-client-preview.ts.mdx +++ b/docs/snippets/common/storybook-client-preview.ts.mdx @@ -10,4 +10,4 @@ import render from './render'; const api = start(render); // the boilerplate code -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-component-layout-param.js.mdx b/docs/snippets/common/storybook-component-layout-param.js.mdx index e5694c4efd2..29c1ec5d80b 100644 --- a/docs/snippets/common/storybook-component-layout-param.js.mdx +++ b/docs/snippets/common/storybook-component-layout-param.js.mdx @@ -5,9 +5,9 @@ import { Button } from './Button'; export default { /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', component: Button, // Sets the layout parameter component wide. @@ -15,4 +15,4 @@ export default { layout: 'centered', }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-csf-3-auto-title-redundant.js.mdx b/docs/snippets/common/storybook-csf-3-auto-title-redundant.js.mdx index 1e6d449c1c4..86158ebb79c 100644 --- a/docs/snippets/common/storybook-csf-3-auto-title-redundant.js.mdx +++ b/docs/snippets/common/storybook-csf-3-auto-title-redundant.js.mdx @@ -1,7 +1,7 @@ ```js // components/MyComponent/MyComponent.stories.js|jsx|ts|tsx -import { MyComponent } from './MyComponent.js' +import { MyComponent } from './MyComponent.js'; export default { component: MyComponent, @@ -13,4 +13,4 @@ export const Default = { something: 'Something else', }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-customize-argtypes.js.mdx b/docs/snippets/common/storybook-customize-argtypes.js.mdx index c07e71c5b8d..468fe6f3f7e 100644 --- a/docs/snippets/common/storybook-customize-argtypes.js.mdx +++ b/docs/snippets/common/storybook-customize-argtypes.js.mdx @@ -5,18 +5,18 @@ import { Button } from './Button'; export default { /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', component: Button, argTypes: { label: { description: 'overwritten description', table: { - type: { - summary: 'something short', - detail: 'something really really long' + type: { + summary: 'something short', + detail: 'something really really long', }, }, control: { @@ -25,4 +25,4 @@ export default { }, }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-debug-webpack-dev.npm.js.mdx b/docs/snippets/common/storybook-debug-webpack-dev.npm.js.mdx index 080af4a1deb..6e7c8fc36ed 100644 --- a/docs/snippets/common/storybook-debug-webpack-dev.npm.js.mdx +++ b/docs/snippets/common/storybook-debug-webpack-dev.npm.js.mdx @@ -1,3 +1,3 @@ ```shell npm run storybook -- --debug-webpack -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-debug-webpack-dev.yarn.js.mdx b/docs/snippets/common/storybook-debug-webpack-dev.yarn.js.mdx index 8dbc7b2b49e..cd009ecbc07 100644 --- a/docs/snippets/common/storybook-debug-webpack-dev.yarn.js.mdx +++ b/docs/snippets/common/storybook-debug-webpack-dev.yarn.js.mdx @@ -1,3 +1,3 @@ ```shell yarn storybook --debug-webpack -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-debug-webpack-prod.npm.js.mdx b/docs/snippets/common/storybook-debug-webpack-prod.npm.js.mdx index 5ca3edbb934..7ff32dc5242 100644 --- a/docs/snippets/common/storybook-debug-webpack-prod.npm.js.mdx +++ b/docs/snippets/common/storybook-debug-webpack-prod.npm.js.mdx @@ -1,3 +1,3 @@ ```shell npm run build-storybook -- --debug-webpack -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-debug-webpack-prod.yarn.js.mdx b/docs/snippets/common/storybook-debug-webpack-prod.yarn.js.mdx index 1b2c9df5792..a54aff6dd9a 100644 --- a/docs/snippets/common/storybook-debug-webpack-prod.yarn.js.mdx +++ b/docs/snippets/common/storybook-debug-webpack-prod.yarn.js.mdx @@ -1,3 +1,3 @@ ```shell yarn build-storybook --debug-webpack -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-disable-telemetry-env.env-var.js.mdx b/docs/snippets/common/storybook-disable-telemetry-env.env-var.js.mdx index 9ed1c3e5430..b1dd42907b6 100644 --- a/docs/snippets/common/storybook-disable-telemetry-env.env-var.js.mdx +++ b/docs/snippets/common/storybook-disable-telemetry-env.env-var.js.mdx @@ -1,3 +1,3 @@ ```shell STORYBOOK_DISABLE_TELEMETRY=1 yarn storybook -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-enable-buildstoriesjson.js.mdx b/docs/snippets/common/storybook-enable-buildstoriesjson.js.mdx index 3adc209f283..373e9ac6ed7 100644 --- a/docs/snippets/common/storybook-enable-buildstoriesjson.js.mdx +++ b/docs/snippets/common/storybook-enable-buildstoriesjson.js.mdx @@ -10,4 +10,4 @@ module.exports = { buildStoriesJson: true, // 👈 Enable this to build the stories.json file }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-extract-result.json.mdx b/docs/snippets/common/storybook-extract-result.json.mdx index d3edbcaceb4..0bf8a886f78 100644 --- a/docs/snippets/common/storybook-extract-result.json.mdx +++ b/docs/snippets/common/storybook-extract-result.json.mdx @@ -35,4 +35,4 @@ } } } -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx b/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx index 2ef0c42eee1..21be95e9553 100644 --- a/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx +++ b/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx @@ -1,3 +1,3 @@ ```shell npm install --save-dev storybook-addon-designs -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx b/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx index 2c11db47977..fe2fa8cbc1e 100644 --- a/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx +++ b/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx @@ -1,3 +1,3 @@ ```shell yarn add -D storybook-addon-designs -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-framework-render-function.js.mdx b/docs/snippets/common/storybook-framework-render-function.js.mdx index 8c54a1319f6..980e46be94e 100644 --- a/docs/snippets/common/storybook-framework-render-function.js.mdx +++ b/docs/snippets/common/storybook-framework-render-function.js.mdx @@ -8,4 +8,4 @@ export default function renderMain({ storyFn }: RenderMainArgs) { const html = fn(storyObj); rootElement.innerHTML = html; } -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-generated-argtypes.js.mdx b/docs/snippets/common/storybook-generated-argtypes.js.mdx index 413c88c245b..15a1f2054e5 100644 --- a/docs/snippets/common/storybook-generated-argtypes.js.mdx +++ b/docs/snippets/common/storybook-generated-argtypes.js.mdx @@ -10,8 +10,8 @@ const argTypes = { defaultValue: { summary: 'Hello' }, }, control: { - type: 'text' - } - } -} -``` \ No newline at end of file + type: 'text', + }, + }, +}; +``` diff --git a/docs/snippets/common/storybook-main-add-sass-config.js.mdx b/docs/snippets/common/storybook-main-add-sass-config.js.mdx index 979dd7bd2e6..30819aff8f9 100644 --- a/docs/snippets/common/storybook-main-add-sass-config.js.mdx +++ b/docs/snippets/common/storybook-main-add-sass-config.js.mdx @@ -21,4 +21,4 @@ module.exports = { return config; }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-add-ts-config.js.mdx b/docs/snippets/common/storybook-main-add-ts-config.js.mdx index f92368f7816..f8aa4b92647 100644 --- a/docs/snippets/common/storybook-main-add-ts-config.js.mdx +++ b/docs/snippets/common/storybook-main-add-ts-config.js.mdx @@ -12,4 +12,4 @@ module.exports = { }, }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-addon-registration.js.mdx b/docs/snippets/common/storybook-main-addon-registration.js.mdx index 1bdf6f44951..11c3e4317ea 100644 --- a/docs/snippets/common/storybook-main-addon-registration.js.mdx +++ b/docs/snippets/common/storybook-main-addon-registration.js.mdx @@ -8,4 +8,4 @@ module.exports = { '@storybook/addon-a11y', //👈 The addon registered here ], }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-advanced-config-example.js.mdx b/docs/snippets/common/storybook-main-advanced-config-example.js.mdx index 2025e381a66..705163e04af 100644 --- a/docs/snippets/common/storybook-main-advanced-config-example.js.mdx +++ b/docs/snippets/common/storybook-main-advanced-config-example.js.mdx @@ -14,4 +14,4 @@ module.exports = { return config; }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-auto-title-custom.js.mdx b/docs/snippets/common/storybook-main-auto-title-custom.js.mdx index a77a0971869..14d25adf2f1 100644 --- a/docs/snippets/common/storybook-main-auto-title-custom.js.mdx +++ b/docs/snippets/common/storybook-main-auto-title-custom.js.mdx @@ -12,4 +12,4 @@ module.exports = { builder: '@storybook/builder-webpack5', }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-babel-mode-v7.js.mdx b/docs/snippets/common/storybook-main-babel-mode-v7.js.mdx index acb90d7a891..40174911058 100644 --- a/docs/snippets/common/storybook-main-babel-mode-v7.js.mdx +++ b/docs/snippets/common/storybook-main-babel-mode-v7.js.mdx @@ -8,4 +8,4 @@ module.exports = { babelModeV7: true, }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx b/docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx index fdcf53e1328..9f79f3f3293 100644 --- a/docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx +++ b/docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx @@ -12,4 +12,4 @@ module.exports = { builder: '@storybook/builder-webpack5', }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-custom-babel-config.js.mdx b/docs/snippets/common/storybook-main-custom-babel-config.js.mdx index de215460576..11d62a0a2ec 100644 --- a/docs/snippets/common/storybook-main-custom-babel-config.js.mdx +++ b/docs/snippets/common/storybook-main-custom-babel-config.js.mdx @@ -9,4 +9,4 @@ module.exports = { // any extra options you want to set }), }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-default-essentials-register.js.mdx b/docs/snippets/common/storybook-main-default-essentials-register.js.mdx index 578c2c746cb..b04219130f1 100644 --- a/docs/snippets/common/storybook-main-default-essentials-register.js.mdx +++ b/docs/snippets/common/storybook-main-default-essentials-register.js.mdx @@ -4,4 +4,4 @@ module.exports = { addons: ['@storybook/addon-essentials'], }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-disable-addon.js.mdx b/docs/snippets/common/storybook-main-disable-addon.js.mdx index 041d425600c..b769b2ebef5 100644 --- a/docs/snippets/common/storybook-main-disable-addon.js.mdx +++ b/docs/snippets/common/storybook-main-disable-addon.js.mdx @@ -2,11 +2,13 @@ // .storybook/main.js module.exports = { - addons: [{ - name: '@storybook/addon-essentials', - options: { - backgrounds: false, - } - }] + addons: [ + { + name: '@storybook/addon-essentials', + options: { + backgrounds: false, + }, + }, + ], }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-disable-refs.js.mdx b/docs/snippets/common/storybook-main-disable-refs.js.mdx index f5eece61673..d0d5f1c9a8c 100644 --- a/docs/snippets/common/storybook-main-disable-refs.js.mdx +++ b/docs/snippets/common/storybook-main-disable-refs.js.mdx @@ -4,7 +4,7 @@ module.exports = { // your Storybook configuration refs: { - 'package-name': { disable: true } - } -} -``` \ No newline at end of file + 'package-name': { disable: true }, + }, +}; +``` diff --git a/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx b/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx index b61b95d1896..d05607fc1b6 100644 --- a/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx +++ b/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx @@ -15,4 +15,4 @@ module.exports = { disableTelemetry: true, // 👈 Disables telemetry }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx b/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx index 6d25e3e2833..986dac3edb5 100644 --- a/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx +++ b/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx @@ -20,4 +20,4 @@ const config: StorybookConfig = { }; module.exports = config; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-enable-interactive-debugger.js.mdx b/docs/snippets/common/storybook-main-enable-interactive-debugger.js.mdx index d1c4064fa14..aff59173992 100644 --- a/docs/snippets/common/storybook-main-enable-interactive-debugger.js.mdx +++ b/docs/snippets/common/storybook-main-enable-interactive-debugger.js.mdx @@ -11,4 +11,4 @@ module.exports = { interactionsDebugger: true, // 👈 Enable playback controls }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-enable-mdx2.js.mdx b/docs/snippets/common/storybook-main-enable-mdx2.js.mdx index fe80c1d4c8b..712bf6f9f94 100644 --- a/docs/snippets/common/storybook-main-enable-mdx2.js.mdx +++ b/docs/snippets/common/storybook-main-enable-mdx2.js.mdx @@ -8,4 +8,4 @@ module.exports = { previewMdx2: true, // 👈 MDX 2 enabled here }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx b/docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx index cb07d576345..01666e37657 100644 --- a/docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx +++ b/docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx @@ -5,8 +5,8 @@ module.exports = { stories: [ //👇 Changes the load order of our stories. First loads the Changelog page '../src/Changelog.stories.mdx', - '../stories/**/*.stories.mdx', - '../stories/**/*.stories.@(js|jsx|ts|tsx)' + '../stories/**/*.stories.mdx', + '../stories/**/*.stories.@(js|jsx|ts|tsx)', ], addons: [ '@storybook/addon-links', diff --git a/docs/snippets/common/storybook-main-env-field-config.js.mdx b/docs/snippets/common/storybook-main-env-field-config.js.mdx index a8bec07f7f1..ae748a51aed 100644 --- a/docs/snippets/common/storybook-main-env-field-config.js.mdx +++ b/docs/snippets/common/storybook-main-env-field-config.js.mdx @@ -8,13 +8,13 @@ module.exports = { '@storybook/addon-essentials', '@storybook/addon-interactions', ], - /* + /* * 👇 The `config` argument contains all the other existing environment variables. * Either configured in an `.env` file or configured on the command line. - */ + */ env: (config) => ({ ...config, EXAMPLE_VAR: 'An environment variable configured in Storybook', }), }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-extend-ts-config.js.mdx b/docs/snippets/common/storybook-main-extend-ts-config.js.mdx index 076ba374ae8..673d7521ccc 100644 --- a/docs/snippets/common/storybook-main-extend-ts-config.js.mdx +++ b/docs/snippets/common/storybook-main-extend-ts-config.js.mdx @@ -11,7 +11,7 @@ module.exports = { allowSyntheticDefaultImports: false, esModuleInterop: false, }, - } - } + }, + }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-figma-addon-register.js.mdx b/docs/snippets/common/storybook-main-figma-addon-register.js.mdx index de68b73dcac..550d652fe02 100644 --- a/docs/snippets/common/storybook-main-figma-addon-register.js.mdx +++ b/docs/snippets/common/storybook-main-figma-addon-register.js.mdx @@ -8,4 +8,4 @@ module.exports = { 'storybook-addon-designs', // 👈 Addon is registered here ], }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-import-preset-config.js.mdx b/docs/snippets/common/storybook-main-import-preset-config.js.mdx index 375b82d3b60..c66bd2ac28a 100644 --- a/docs/snippets/common/storybook-main-import-preset-config.js.mdx +++ b/docs/snippets/common/storybook-main-import-preset-config.js.mdx @@ -6,4 +6,4 @@ const path = require('path'); module.exports = { addons: [path.resolve('./.storybook/my-preset')], }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-js-md-files.js.mdx b/docs/snippets/common/storybook-main-js-md-files.js.mdx index ec32e62eaab..77c4f04e3ab 100644 --- a/docs/snippets/common/storybook-main-js-md-files.js.mdx +++ b/docs/snippets/common/storybook-main-js-md-files.js.mdx @@ -4,4 +4,4 @@ module.exports = { stories: ['../my-project/src/components/*.@(js|md)'], }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-preset-config.js.mdx b/docs/snippets/common/storybook-main-preset-config.js.mdx index eca5c0b38e2..c88a0b10912 100644 --- a/docs/snippets/common/storybook-main-preset-config.js.mdx +++ b/docs/snippets/common/storybook-main-preset-config.js.mdx @@ -4,4 +4,4 @@ module.exports = { addons: ['@storybook/preset-scss'], }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-preview-head.js.mdx b/docs/snippets/common/storybook-main-preview-head.js.mdx index 13390e966aa..18f7edd2c6f 100644 --- a/docs/snippets/common/storybook-main-preview-head.js.mdx +++ b/docs/snippets/common/storybook-main-preview-head.js.mdx @@ -11,4 +11,4 @@ module.exports = { `); }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-ref-local.js.mdx b/docs/snippets/common/storybook-main-ref-local.js.mdx index 386e8cd74cb..91eac2d853c 100644 --- a/docs/snippets/common/storybook-main-ref-local.js.mdx +++ b/docs/snippets/common/storybook-main-ref-local.js.mdx @@ -14,4 +14,4 @@ module.exports = { }, }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-ref-per-environment.js.mdx b/docs/snippets/common/storybook-main-ref-per-environment.js.mdx index 1d8997a78a2..b9aaff18cc1 100644 --- a/docs/snippets/common/storybook-main-ref-per-environment.js.mdx +++ b/docs/snippets/common/storybook-main-ref-per-environment.js.mdx @@ -3,7 +3,7 @@ module.exports = { // Your existing Storybook configuration - + // 👇 Retrieve the current environment from the configType argument refs: (config, { configType }) => { if (configType === 'DEVELOPMENT') { @@ -30,4 +30,4 @@ module.exports = { }; }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-ref-remote.js.mdx b/docs/snippets/common/storybook-main-ref-remote.js.mdx index 24dfcad4131..ec7a321bcd9 100644 --- a/docs/snippets/common/storybook-main-ref-remote.js.mdx +++ b/docs/snippets/common/storybook-main-ref-remote.js.mdx @@ -1,14 +1,14 @@ ```js // .storybook/main.js -module.exports={ +module.exports = { // your Storybook configuration refs: { - 'design-system': { - title: "Storybook Design System", - url: "https://5ccbc373887ca40020446347-yldsqjoxzb.chromatic.com", - expanded: false // optional, true by default - } - } -} -``` \ No newline at end of file + 'design-system': { + title: 'Storybook Design System', + url: 'https://5ccbc373887ca40020446347-yldsqjoxzb.chromatic.com', + expanded: false, // optional, true by default + }, + }, +}; +``` diff --git a/docs/snippets/common/storybook-main-register-addon.js.mdx b/docs/snippets/common/storybook-main-register-addon.js.mdx index 675a1d62c08..16f1b423e7a 100644 --- a/docs/snippets/common/storybook-main-register-addon.js.mdx +++ b/docs/snippets/common/storybook-main-register-addon.js.mdx @@ -4,4 +4,4 @@ module.exports = { addons: ['path/to/manager.js'], }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-register-individual-actions-addon.js.mdx b/docs/snippets/common/storybook-main-register-individual-actions-addon.js.mdx index ea87b0571a5..a6d378529fa 100644 --- a/docs/snippets/common/storybook-main-register-individual-actions-addon.js.mdx +++ b/docs/snippets/common/storybook-main-register-individual-actions-addon.js.mdx @@ -5,4 +5,4 @@ module.exports = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: ['@storybook/addon-links', '@storybook/addon-actions'], }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx b/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx index 18fa46acdf1..474c1e94941 100644 --- a/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx +++ b/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx @@ -6,4 +6,4 @@ module.exports = { '@storybook/addon-docs/preset', // A preset registered here, in this case from the addon-docs addon. ], }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-register-storysource-example.js.mdx b/docs/snippets/common/storybook-main-register-storysource-example.js.mdx index f74a788eead..c8b9a16193a 100644 --- a/docs/snippets/common/storybook-main-register-storysource-example.js.mdx +++ b/docs/snippets/common/storybook-main-register-storysource-example.js.mdx @@ -4,4 +4,4 @@ module.exports = { addons: ['@storybook/addon-storysource'], }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-simplified-config.js.mdx b/docs/snippets/common/storybook-main-simplified-config.js.mdx index 1bedfc7351d..dd71b718eea 100644 --- a/docs/snippets/common/storybook-main-simplified-config.js.mdx +++ b/docs/snippets/common/storybook-main-simplified-config.js.mdx @@ -7,4 +7,4 @@ module.exports = { return config; }, } -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-use-manager-entries.js.mdx b/docs/snippets/common/storybook-main-use-manager-entries.js.mdx index 02479932037..d690158fee4 100644 --- a/docs/snippets/common/storybook-main-use-manager-entries.js.mdx +++ b/docs/snippets/common/storybook-main-use-manager-entries.js.mdx @@ -4,4 +4,4 @@ module.exports = { managerEntries: ['some-storybook-addon/entry-point.js'], }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-versioned-webpack.js.mdx b/docs/snippets/common/storybook-main-versioned-webpack.js.mdx index 2b0c1dcba52..5de97b1343e 100644 --- a/docs/snippets/common/storybook-main-versioned-webpack.js.mdx +++ b/docs/snippets/common/storybook-main-versioned-webpack.js.mdx @@ -8,4 +8,4 @@ export function webpackFinal(config, { presets }) { logger.info(`=> Running in webpack ${version}: ${instance}`); return config; } -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-webpack-preset-config.js.mdx b/docs/snippets/common/storybook-main-webpack-preset-config.js.mdx index e0c89c947bf..abaf008c02a 100644 --- a/docs/snippets/common/storybook-main-webpack-preset-config.js.mdx +++ b/docs/snippets/common/storybook-main-webpack-preset-config.js.mdx @@ -2,7 +2,7 @@ // .storybook/main.js export async function webpack(baseConfig, options) { - // Modify or replace config. + // Modify or replace config. // Mutating the original reference object can cause unexpected bugs, // so in this example we replace. const { module = {} } = baseConfig; @@ -20,4 +20,4 @@ export async function webpack(baseConfig, options) { }, }; } -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-webpack5-fsCache.js.mdx b/docs/snippets/common/storybook-main-webpack5-fsCache.js.mdx index 9ea2077caa9..622152ccfc4 100644 --- a/docs/snippets/common/storybook-main-webpack5-fsCache.js.mdx +++ b/docs/snippets/common/storybook-main-webpack5-fsCache.js.mdx @@ -11,4 +11,4 @@ module.exports = { }, }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-webpackfinal-example.js.mdx b/docs/snippets/common/storybook-main-webpackfinal-example.js.mdx index ab2cfd61f2b..4d940deb84c 100644 --- a/docs/snippets/common/storybook-main-webpackfinal-example.js.mdx +++ b/docs/snippets/common/storybook-main-webpackfinal-example.js.mdx @@ -10,4 +10,4 @@ export function webpackFinal(config, { configDir }) { logger.info('=> Loading create-react-app config.'); return applyCRAWebpackConfig(config, configDir); } -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-with-mock-decorator.js.mdx b/docs/snippets/common/storybook-main-with-mock-decorator.js.mdx index 630afdf6676..8e9dcd30414 100644 --- a/docs/snippets/common/storybook-main-with-mock-decorator.js.mdx +++ b/docs/snippets/common/storybook-main-with-mock-decorator.js.mdx @@ -9,4 +9,4 @@ module.exports = { return config; }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-with-multiple-static-dir.js.mdx b/docs/snippets/common/storybook-main-with-multiple-static-dir.js.mdx index efe144166c5..d27f4546ef2 100644 --- a/docs/snippets/common/storybook-main-with-multiple-static-dir.js.mdx +++ b/docs/snippets/common/storybook-main-with-multiple-static-dir.js.mdx @@ -6,4 +6,4 @@ module.exports = { addons: [], staticDirs: ['../public', '../static'], }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-with-object-configuration-static-dir.js.mdx b/docs/snippets/common/storybook-main-with-object-configuration-static-dir.js.mdx index 6e3871662bc..5510655a914 100644 --- a/docs/snippets/common/storybook-main-with-object-configuration-static-dir.js.mdx +++ b/docs/snippets/common/storybook-main-with-object-configuration-static-dir.js.mdx @@ -4,4 +4,4 @@ module.exports = { staticDirs: [{ from: '../my-custom-assets/images', to: '/assets' }], }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-main-with-single-static-dir.js.mdx b/docs/snippets/common/storybook-main-with-single-static-dir.js.mdx index 12ca0636ba6..eff1c92c6b8 100644 --- a/docs/snippets/common/storybook-main-with-single-static-dir.js.mdx +++ b/docs/snippets/common/storybook-main-with-single-static-dir.js.mdx @@ -6,4 +6,4 @@ module.exports = { addons: ['@storybook/addon-links', '@storybook/addon-essentials'], staticDirs: ['../public'], //👈 Configures the static asset folder in Storybook }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-manager-custom-theme.js.mdx b/docs/snippets/common/storybook-manager-custom-theme.js.mdx index be5df4a7d45..5affde34171 100644 --- a/docs/snippets/common/storybook-manager-custom-theme.js.mdx +++ b/docs/snippets/common/storybook-manager-custom-theme.js.mdx @@ -7,4 +7,4 @@ import yourTheme from './YourTheme'; addons.setConfig({ theme: yourTheme, }); -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-manager-dark-theme.js.mdx b/docs/snippets/common/storybook-manager-dark-theme.js.mdx index ab37efb2de8..2f31e53b757 100644 --- a/docs/snippets/common/storybook-manager-dark-theme.js.mdx +++ b/docs/snippets/common/storybook-manager-dark-theme.js.mdx @@ -7,4 +7,4 @@ import { themes } from '@storybook/theming'; addons.setConfig({ theme: themes.dark, }); -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-manager-disable-roots.js.mdx b/docs/snippets/common/storybook-manager-disable-roots.js.mdx index 952d363c23d..3297d85d7a1 100644 --- a/docs/snippets/common/storybook-manager-disable-roots.js.mdx +++ b/docs/snippets/common/storybook-manager-disable-roots.js.mdx @@ -8,4 +8,4 @@ addons.setConfig({ showRoots: false, }, }); -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-manager-render-label-stories.js.mdx b/docs/snippets/common/storybook-manager-render-label-stories.js.mdx index a40abfbadc9..91538b41595 100644 --- a/docs/snippets/common/storybook-manager-render-label-stories.js.mdx +++ b/docs/snippets/common/storybook-manager-render-label-stories.js.mdx @@ -10,4 +10,4 @@ addons.setConfig({ renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)), }, }); -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-mdx2-install.npm.js.mdx b/docs/snippets/common/storybook-mdx2-install.npm.js.mdx index 6f6b5f63daa..61117f8c4b0 100644 --- a/docs/snippets/common/storybook-mdx2-install.npm.js.mdx +++ b/docs/snippets/common/storybook-mdx2-install.npm.js.mdx @@ -1,3 +1,3 @@ ```shell npm install @storybook/mdx2-csf --save-dev -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-mdx2-install.yarn.js.mdx b/docs/snippets/common/storybook-mdx2-install.yarn.js.mdx index 6c80c7bba42..7d7c4a172b0 100644 --- a/docs/snippets/common/storybook-mdx2-install.yarn.js.mdx +++ b/docs/snippets/common/storybook-mdx2-install.yarn.js.mdx @@ -1,3 +1,3 @@ ```shell yarn add --dev @storybook/mdx2-csf -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-merged-argtypes.js.mdx b/docs/snippets/common/storybook-merged-argtypes.js.mdx index adf4beb46e1..a3927647152 100644 --- a/docs/snippets/common/storybook-merged-argtypes.js.mdx +++ b/docs/snippets/common/storybook-merged-argtypes.js.mdx @@ -6,15 +6,15 @@ const argTypes = { defaultValue: 'Hello', description: 'overwritten description', table: { - type: { - summary: 'something short', - detail: 'something really really long' + type: { + summary: 'something short', + detail: 'something really really long', }, defaultValue: { summary: 'Hello' }, }, control: { - type: null - } - } -} -``` \ No newline at end of file + type: null, + }, + }, +}; +``` diff --git a/docs/snippets/common/storybook-msw-generate.msw.js.mdx b/docs/snippets/common/storybook-msw-generate.msw.js.mdx index 413d5bf267e..774ddbf76d4 100644 --- a/docs/snippets/common/storybook-msw-generate.msw.js.mdx +++ b/docs/snippets/common/storybook-msw-generate.msw.js.mdx @@ -1,3 +1,3 @@ ```shell npx msw init public/ -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-msw-install.npm.js.mdx b/docs/snippets/common/storybook-msw-install.npm.js.mdx index 2a8608ebb29..9f0ed4aeed6 100644 --- a/docs/snippets/common/storybook-msw-install.npm.js.mdx +++ b/docs/snippets/common/storybook-msw-install.npm.js.mdx @@ -1,3 +1,3 @@ ```shell npm install msw msw-storybook-addon --save-dev -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-msw-install.yarn.js.mdx b/docs/snippets/common/storybook-msw-install.yarn.js.mdx index ff285f0d717..95e75837af8 100644 --- a/docs/snippets/common/storybook-msw-install.yarn.js.mdx +++ b/docs/snippets/common/storybook-msw-install.yarn.js.mdx @@ -1,3 +1,3 @@ ```shell yarn add --dev msw msw-storybook-addon -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-on-demand-story-loading.js.mdx b/docs/snippets/common/storybook-on-demand-story-loading.js.mdx index e5ea5e88688..dc3be6e367e 100644 --- a/docs/snippets/common/storybook-on-demand-story-loading.js.mdx +++ b/docs/snippets/common/storybook-on-demand-story-loading.js.mdx @@ -8,4 +8,4 @@ module.exports = { storyStoreV7: true, }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preset-configuration.js.mdx b/docs/snippets/common/storybook-preset-configuration.js.mdx index 2167333191c..7c096ef546e 100644 --- a/docs/snippets/common/storybook-preset-configuration.js.mdx +++ b/docs/snippets/common/storybook-preset-configuration.js.mdx @@ -13,4 +13,4 @@ module.exports = { }, ], }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preset-full-config-object.js.mdx b/docs/snippets/common/storybook-preset-full-config-object.js.mdx index c0bdb76bc3c..0e39a9166b6 100644 --- a/docs/snippets/common/storybook-preset-full-config-object.js.mdx +++ b/docs/snippets/common/storybook-preset-full-config-object.js.mdx @@ -13,4 +13,4 @@ module.exports = { return config; }, }; -```` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preset-scss.webpack-4.js.mdx b/docs/snippets/common/storybook-preset-scss.webpack-4.js.mdx index 66ac48d5fc9..35029a0f373 100644 --- a/docs/snippets/common/storybook-preset-scss.webpack-4.js.mdx +++ b/docs/snippets/common/storybook-preset-scss.webpack-4.js.mdx @@ -4,4 +4,4 @@ npm install @storybook/preset-scss css-loader@5.2.7 sass sass-loader@10.1.1 styl # With yarn yarn add --dev @storybook/preset-scss css-loader@5.2.7 sass sass-loader@10.1.1 style-loader@2.0.0 -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preset-scss.webpack-5.js.mdx b/docs/snippets/common/storybook-preset-scss.webpack-5.js.mdx index 227b75a8603..ee0d3d600f5 100644 --- a/docs/snippets/common/storybook-preset-scss.webpack-5.js.mdx +++ b/docs/snippets/common/storybook-preset-scss.webpack-5.js.mdx @@ -4,4 +4,4 @@ npm install @storybook/preset-scss css-loader sass sass-loader style-loader --sa # With yarn yarn add --dev @storybook/preset-scss css-loader sass sass-loader style-loader -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-body-example.html.mdx b/docs/snippets/common/storybook-preview-body-example.html.mdx index 7d6f63e7c39..076d6b0059f 100644 --- a/docs/snippets/common/storybook-preview-body-example.html.mdx +++ b/docs/snippets/common/storybook-preview-body-example.html.mdx @@ -2,4 +2,4 @@
-``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-change-viewports.js.mdx b/docs/snippets/common/storybook-preview-change-viewports.js.mdx index 2b99ca92da3..1d965fb84e1 100644 --- a/docs/snippets/common/storybook-preview-change-viewports.js.mdx +++ b/docs/snippets/common/storybook-preview-change-viewports.js.mdx @@ -6,5 +6,5 @@ export const parameters = { viewports: newViewports, // newViewports would be an ViewportMap. (see below for examples) defaultViewport: 'someDefault', }, -} -``` \ No newline at end of file +}; +``` diff --git a/docs/snippets/common/storybook-preview-configure-background-colors.js.mdx b/docs/snippets/common/storybook-preview-configure-background-colors.js.mdx index 4c880b6d146..e18e3488172 100644 --- a/docs/snippets/common/storybook-preview-configure-background-colors.js.mdx +++ b/docs/snippets/common/storybook-preview-configure-background-colors.js.mdx @@ -16,4 +16,4 @@ export const parameters = { ], }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-custom-canvas.js.mdx b/docs/snippets/common/storybook-preview-custom-canvas.js.mdx index feee92899a3..9e3080fe0df 100644 --- a/docs/snippets/common/storybook-preview-custom-canvas.js.mdx +++ b/docs/snippets/common/storybook-preview-custom-canvas.js.mdx @@ -10,4 +10,4 @@ export const parameters = { }, }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-custom-code-renderer.js.mdx b/docs/snippets/common/storybook-preview-custom-code-renderer.js.mdx index 6a4ee82effd..9f5fc1d77c9 100644 --- a/docs/snippets/common/storybook-preview-custom-code-renderer.js.mdx +++ b/docs/snippets/common/storybook-preview-custom-code-renderer.js.mdx @@ -10,4 +10,4 @@ export const parameters = { }, }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-custom-params.js.mdx b/docs/snippets/common/storybook-preview-custom-params.js.mdx index 20b5f0e2a6d..2b1538246da 100644 --- a/docs/snippets/common/storybook-preview-custom-params.js.mdx +++ b/docs/snippets/common/storybook-preview-custom-params.js.mdx @@ -9,4 +9,4 @@ export const parameters = { ], }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-decorator-params-example.js.mdx b/docs/snippets/common/storybook-preview-decorator-params-example.js.mdx index d3b59d2697f..537599fb645 100644 --- a/docs/snippets/common/storybook-preview-decorator-params-example.js.mdx +++ b/docs/snippets/common/storybook-preview-decorator-params-example.js.mdx @@ -8,5 +8,4 @@ export const decorators = [ export const parameters = { // Your parameters go here }; - -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-docs-dark-theme.js.mdx b/docs/snippets/common/storybook-preview-docs-dark-theme.js.mdx index e9033ff8b76..9309f683aba 100644 --- a/docs/snippets/common/storybook-preview-docs-dark-theme.js.mdx +++ b/docs/snippets/common/storybook-preview-docs-dark-theme.js.mdx @@ -9,4 +9,4 @@ export const parameters = { theme: themes.dark, }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-empty-sort-object.js.mdx b/docs/snippets/common/storybook-preview-empty-sort-object.js.mdx index 58d47ee0c13..27e89b074df 100644 --- a/docs/snippets/common/storybook-preview-empty-sort-object.js.mdx +++ b/docs/snippets/common/storybook-preview-empty-sort-object.js.mdx @@ -5,9 +5,9 @@ export const parameters = { options: { storySort: { method: '', - order: [], - locales: '', + order: [], + locales: '', }, }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-expanded-controls.js.mdx b/docs/snippets/common/storybook-preview-expanded-controls.js.mdx index d50cde9e679..89393ed01f7 100644 --- a/docs/snippets/common/storybook-preview-expanded-controls.js.mdx +++ b/docs/snippets/common/storybook-preview-expanded-controls.js.mdx @@ -4,4 +4,4 @@ export const parameters = { controls: { expanded: true }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-extended-theme-variables.js.mdx b/docs/snippets/common/storybook-preview-extended-theme-variables.js.mdx index 00ee2a88fb0..339d1bf8395 100644 --- a/docs/snippets/common/storybook-preview-extended-theme-variables.js.mdx +++ b/docs/snippets/common/storybook-preview-extended-theme-variables.js.mdx @@ -4,4 +4,4 @@ addonActionsTheme: { BASE_FONT_FAMILY: typography.fonts.mono, BASE_BACKGROUND_COLOR: 'transparent', } -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-global-loader.js.mdx b/docs/snippets/common/storybook-preview-global-loader.js.mdx index 2b7d8f057d4..86afc859a43 100644 --- a/docs/snippets/common/storybook-preview-global-loader.js.mdx +++ b/docs/snippets/common/storybook-preview-global-loader.js.mdx @@ -8,4 +8,4 @@ export const loaders = [ currentUser: await (await fetch('https://jsonplaceholder.typicode.com/users/1')).json(), }), ]; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-global-parameters.js.mdx b/docs/snippets/common/storybook-preview-global-parameters.js.mdx index 20b5f0e2a6d..2b1538246da 100644 --- a/docs/snippets/common/storybook-preview-global-parameters.js.mdx +++ b/docs/snippets/common/storybook-preview-global-parameters.js.mdx @@ -9,4 +9,4 @@ export const parameters = { ], }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-granular-viewports.js.mdx b/docs/snippets/common/storybook-preview-granular-viewports.js.mdx index 89289ae49a7..10ff34b03c8 100644 --- a/docs/snippets/common/storybook-preview-granular-viewports.js.mdx +++ b/docs/snippets/common/storybook-preview-granular-viewports.js.mdx @@ -8,4 +8,4 @@ export const parameters = { viewports: INITIAL_VIEWPORTS, }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-head-example.html.mdx b/docs/snippets/common/storybook-preview-head-example.html.mdx index a4a4bb3b244..f9e869b582d 100644 --- a/docs/snippets/common/storybook-preview-head-example.html.mdx +++ b/docs/snippets/common/storybook-preview-head-example.html.mdx @@ -8,5 +8,9 @@ - -``` \ No newline at end of file + +``` diff --git a/docs/snippets/common/storybook-preview-layout-param.js.mdx b/docs/snippets/common/storybook-preview-layout-param.js.mdx index da55bdbdfcf..6119addbcfb 100644 --- a/docs/snippets/common/storybook-preview-layout-param.js.mdx +++ b/docs/snippets/common/storybook-preview-layout-param.js.mdx @@ -4,4 +4,4 @@ export const parameters = { layout: 'centered', }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-locales-globaltype.js.mdx b/docs/snippets/common/storybook-preview-locales-globaltype.js.mdx index 64074c99752..34c01ad84d1 100644 --- a/docs/snippets/common/storybook-preview-locales-globaltype.js.mdx +++ b/docs/snippets/common/storybook-preview-locales-globaltype.js.mdx @@ -18,4 +18,4 @@ export const globalTypes = { }, }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-matching-argtypes.js.mdx b/docs/snippets/common/storybook-preview-matching-argtypes.js.mdx index 1180705fd52..e998a66f9ab 100644 --- a/docs/snippets/common/storybook-preview-matching-argtypes.js.mdx +++ b/docs/snippets/common/storybook-preview-matching-argtypes.js.mdx @@ -2,6 +2,6 @@ // .storybook/preview.js export const parameters = { - actions: { argTypesRegex: '^on.*' } -} -``` \ No newline at end of file + actions: { argTypesRegex: '^on.*' }, +}; +``` diff --git a/docs/snippets/common/storybook-preview-merge-viewports.js.mdx b/docs/snippets/common/storybook-preview-merge-viewports.js.mdx index 2b56ad01168..c58ce3353a2 100644 --- a/docs/snippets/common/storybook-preview-merge-viewports.js.mdx +++ b/docs/snippets/common/storybook-preview-merge-viewports.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/preview.js -import { MINIMAL_VIEWPORTS} from '@storybook/addon-viewport'; +import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'; const customViewports = { kindleFire2: { @@ -23,9 +23,9 @@ const customViewports = { export const parameters = { viewport: { viewports: { - ...MINIMAL_VIEWPORTS, + ...MINIMAL_VIEWPORTS, ...customViewports, }, }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-optout-inline.js.mdx b/docs/snippets/common/storybook-preview-optout-inline.js.mdx index 2aae8f52016..e5ba0fa02b4 100644 --- a/docs/snippets/common/storybook-preview-optout-inline.js.mdx +++ b/docs/snippets/common/storybook-preview-optout-inline.js.mdx @@ -7,4 +7,4 @@ export const parameters = { inlineStories: false, }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-parameters-color-swatches.js.mdx b/docs/snippets/common/storybook-preview-parameters-color-swatches.js.mdx index 4e8e6e07ffb..cd1d9f535c7 100644 --- a/docs/snippets/common/storybook-preview-parameters-color-swatches.js.mdx +++ b/docs/snippets/common/storybook-preview-parameters-color-swatches.js.mdx @@ -6,4 +6,4 @@ export const parameters = { presetColors: [{ color: '#ff4785', title: 'Coral' }, 'rgba(0, 159, 183, 1)', '#fe4a49'], }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-parameters-old-format.js.mdx b/docs/snippets/common/storybook-preview-parameters-old-format.js.mdx index 815fa5e28ef..8c8c4eaa4a3 100644 --- a/docs/snippets/common/storybook-preview-parameters-old-format.js.mdx +++ b/docs/snippets/common/storybook-preview-parameters-old-format.js.mdx @@ -2,4 +2,4 @@ // .storybook/preview.js export const parameter = { passArgsFirst : false }. -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-prepareforinline.js.mdx b/docs/snippets/common/storybook-preview-prepareforinline.js.mdx index c4c5b091533..32a7ddb044e 100644 --- a/docs/snippets/common/storybook-preview-prepareforinline.js.mdx +++ b/docs/snippets/common/storybook-preview-prepareforinline.js.mdx @@ -10,4 +10,4 @@ export const parameters = { // deprecated do not use }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-register-language-globally.js.mdx b/docs/snippets/common/storybook-preview-register-language-globally.js.mdx index c8b6e057faf..ce5c3d571c6 100644 --- a/docs/snippets/common/storybook-preview-register-language-globally.js.mdx +++ b/docs/snippets/common/storybook-preview-register-language-globally.js.mdx @@ -16,4 +16,4 @@ export const parameters = { }, }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-register-msw-addon.js.mdx b/docs/snippets/common/storybook-preview-register-msw-addon.js.mdx index d1b97095311..d1f384333a2 100644 --- a/docs/snippets/common/storybook-preview-register-msw-addon.js.mdx +++ b/docs/snippets/common/storybook-preview-register-msw-addon.js.mdx @@ -22,4 +22,4 @@ export const parameters = { // Provide the MSW addon decorator globally export const decorators = [mswDecorator]; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-sort-function.js.mdx b/docs/snippets/common/storybook-preview-sort-function.js.mdx index a41a222cf26..b0333e7a7c8 100644 --- a/docs/snippets/common/storybook-preview-sort-function.js.mdx +++ b/docs/snippets/common/storybook-preview-sort-function.js.mdx @@ -7,4 +7,4 @@ export const parameters = { a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }), }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-use-global-type.js.mdx b/docs/snippets/common/storybook-preview-use-global-type.js.mdx index 7d338088a17..85af6675f92 100644 --- a/docs/snippets/common/storybook-preview-use-global-type.js.mdx +++ b/docs/snippets/common/storybook-preview-use-global-type.js.mdx @@ -3,20 +3,20 @@ import { ThemeProvider } from 'styled-components'; -import { MyThemes } from '../my-theme-folder/my-theme-file' +import { MyThemes } from '../my-theme-folder/my-theme-file'; // Function to obtain the intended theme const getTheme = (themeName) => { - return MyThemes[themeName] -} + return MyThemes[themeName]; +}; -const withThemeProvider=(Story,context)=>{ +const withThemeProvider = (Story, context) => { const theme = getTheme(context.globals.theme); return ( - ) -} + ); +}; export const decorators = [withThemeProvider]; ``` diff --git a/docs/snippets/common/storybook-preview-viewport-add-devices.js.mdx b/docs/snippets/common/storybook-preview-viewport-add-devices.js.mdx index 6adc353cb4a..a929fe85006 100644 --- a/docs/snippets/common/storybook-preview-viewport-add-devices.js.mdx +++ b/docs/snippets/common/storybook-preview-viewport-add-devices.js.mdx @@ -17,4 +17,4 @@ const customViewports = { }, }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-viewport-use-new-devices.js.mdx b/docs/snippets/common/storybook-preview-viewport-use-new-devices.js.mdx index 1f802e18da3..95aa90bf47b 100644 --- a/docs/snippets/common/storybook-preview-viewport-use-new-devices.js.mdx +++ b/docs/snippets/common/storybook-preview-viewport-use-new-devices.js.mdx @@ -4,4 +4,4 @@ export const parameters = { viewport: { viewports: customViewports }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-with-mock-decorator.js.mdx b/docs/snippets/common/storybook-preview-with-mock-decorator.js.mdx index d3020f10e19..48f8e53ef77 100644 --- a/docs/snippets/common/storybook-preview-with-mock-decorator.js.mdx +++ b/docs/snippets/common/storybook-preview-with-mock-decorator.js.mdx @@ -5,4 +5,4 @@ import { decorator } from '../__mocks__/isomorphic-fetch'; // Add the decorator to all stories export const decorators = [decorator]; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-with-ordered-pages-and-wildcard.js.mdx b/docs/snippets/common/storybook-preview-with-ordered-pages-and-wildcard.js.mdx index 8f87fffadc9..47723a4d0c0 100644 --- a/docs/snippets/common/storybook-preview-with-ordered-pages-and-wildcard.js.mdx +++ b/docs/snippets/common/storybook-preview-with-ordered-pages-and-wildcard.js.mdx @@ -8,4 +8,4 @@ export const parameters = { }, }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-preview-with-ordered-pages.js.mdx b/docs/snippets/common/storybook-preview-with-ordered-pages.js.mdx index f0baf9128b7..427ca2ee260 100644 --- a/docs/snippets/common/storybook-preview-with-ordered-pages.js.mdx +++ b/docs/snippets/common/storybook-preview-with-ordered-pages.js.mdx @@ -8,4 +8,4 @@ export const parameters = { }, }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-read-environment-variables.js.mdx b/docs/snippets/common/storybook-read-environment-variables.js.mdx index d576f693705..0ad4b9994e2 100644 --- a/docs/snippets/common/storybook-read-environment-variables.js.mdx +++ b/docs/snippets/common/storybook-read-environment-variables.js.mdx @@ -1,4 +1,4 @@ ```js console.log(process.env.STORYBOOK_THEME); console.log(process.env.STORYBOOK_DATA_KEY); -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-run-dev.npm.js.mdx b/docs/snippets/common/storybook-run-dev.npm.js.mdx index 8f7f525b9a5..f6ae41091af 100644 --- a/docs/snippets/common/storybook-run-dev.npm.js.mdx +++ b/docs/snippets/common/storybook-run-dev.npm.js.mdx @@ -1,3 +1,3 @@ ```shell npm run storybook -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-run-dev.yarn.js.mdx b/docs/snippets/common/storybook-run-dev.yarn.js.mdx index 137dc51f4c2..471455e3e66 100644 --- a/docs/snippets/common/storybook-run-dev.yarn.js.mdx +++ b/docs/snippets/common/storybook-run-dev.yarn.js.mdx @@ -1,3 +1,3 @@ ```shell yarn storybook -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-server-framework-options.ts.mdx b/docs/snippets/common/storybook-server-framework-options.ts.mdx index fe5b27ecfb6..687df16d309 100644 --- a/docs/snippets/common/storybook-server-framework-options.ts.mdx +++ b/docs/snippets/common/storybook-server-framework-options.ts.mdx @@ -9,4 +9,4 @@ export default { frameworkPath: '@my-framework/storybook', frameworkPresets: [require.resolve('./framework-preset-my-framework.js')], }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-server-options.ts.mdx b/docs/snippets/common/storybook-server-options.ts.mdx index 327e98c2eff..6a91e2a9a0c 100644 --- a/docs/snippets/common/storybook-server-options.ts.mdx +++ b/docs/snippets/common/storybook-server-options.ts.mdx @@ -8,4 +8,4 @@ export default { framework: 'vue', frameworkPresets: [require.resolve('./framework-preset-vue.js')], }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-start-dev-server.ts.mdx b/docs/snippets/common/storybook-start-dev-server.ts.mdx index 9e15280376d..f200f1cf44c 100644 --- a/docs/snippets/common/storybook-start-dev-server.ts.mdx +++ b/docs/snippets/common/storybook-start-dev-server.ts.mdx @@ -6,4 +6,4 @@ import { buildDev } from '@storybook/core/server'; import options from './options'; buildDev(options); -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-storiesjsonflag-result.json.mdx b/docs/snippets/common/storybook-storiesjsonflag-result.json.mdx index 02674afd4e9..bc8c9814631 100644 --- a/docs/snippets/common/storybook-storiesjsonflag-result.json.mdx +++ b/docs/snippets/common/storybook-storiesjsonflag-result.json.mdx @@ -30,4 +30,4 @@ } } } -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-story-layout-param.js.mdx b/docs/snippets/common/storybook-story-layout-param.js.mdx index 9510df3b38b..ce1265aeac2 100644 --- a/docs/snippets/common/storybook-story-layout-param.js.mdx +++ b/docs/snippets/common/storybook-story-layout-param.js.mdx @@ -17,4 +17,4 @@ export const WithLayout = { layout: 'centered', }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-storyloading-with-custom-object.js.mdx b/docs/snippets/common/storybook-storyloading-with-custom-object.js.mdx index 3859a7c4ae3..adc07aa0cc3 100644 --- a/docs/snippets/common/storybook-storyloading-with-custom-object.js.mdx +++ b/docs/snippets/common/storybook-storyloading-with-custom-object.js.mdx @@ -14,4 +14,4 @@ module.exports = { ], addons: ['@storybook/addon-essentials'], }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-storyloading-with-directory.js.mdx b/docs/snippets/common/storybook-storyloading-with-directory.js.mdx index c0664b954c2..b10440fd8f4 100644 --- a/docs/snippets/common/storybook-storyloading-with-directory.js.mdx +++ b/docs/snippets/common/storybook-storyloading-with-directory.js.mdx @@ -6,4 +6,4 @@ module.exports = { stories: ['../packages/MyStories'], addons: ['@storybook/addon-essentials'], }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-storyshots-config.js.mdx b/docs/snippets/common/storybook-storyshots-config.js.mdx index fc1c55ee2b1..ccca348aac5 100644 --- a/docs/snippets/common/storybook-storyshots-config.js.mdx +++ b/docs/snippets/common/storybook-storyshots-config.js.mdx @@ -3,4 +3,4 @@ import initStoryshots from '@storybook/addon-storyshots'; initStoryshots(); -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-storyshots-custom-directory.js.mdx b/docs/snippets/common/storybook-storyshots-custom-directory.js.mdx index d74e4ee77a2..7c3e65b0654 100644 --- a/docs/snippets/common/storybook-storyshots-custom-directory.js.mdx +++ b/docs/snippets/common/storybook-storyshots-custom-directory.js.mdx @@ -22,4 +22,4 @@ initStoryshots({ getMatchOptions, }), }); -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-storyshots-custom-framework.js.mdx b/docs/snippets/common/storybook-storyshots-custom-framework.js.mdx index 5988ebd45ba..1e47606024e 100644 --- a/docs/snippets/common/storybook-storyshots-custom-framework.js.mdx +++ b/docs/snippets/common/storybook-storyshots-custom-framework.js.mdx @@ -10,4 +10,4 @@ initStoryshots({ integrityOptions: { cwd: path.join(__dirname, 'src', 'stories') }, // Other configurations }); -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-storysource-manager-entries.js.mdx b/docs/snippets/common/storybook-storysource-manager-entries.js.mdx index e9c5dec6d95..548639d4eaa 100644 --- a/docs/snippets/common/storybook-storysource-manager-entries.js.mdx +++ b/docs/snippets/common/storybook-storysource-manager-entries.js.mdx @@ -2,4 +2,4 @@ // storysource/preset.js /* nothing needed */ -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-telemetry-crash-report-event.js.mdx b/docs/snippets/common/storybook-telemetry-crash-report-event.js.mdx index 88d98f5c6bb..47954752399 100644 --- a/docs/snippets/common/storybook-telemetry-crash-report-event.js.mdx +++ b/docs/snippets/common/storybook-telemetry-crash-report-event.js.mdx @@ -10,4 +10,4 @@ ' at node:internal/main/run_main_module:17:47', message: 'Your button is not working' } -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx index aaefbd2f81b..391a1d14478 100644 --- a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx +++ b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx @@ -15,4 +15,4 @@ module.exports = { enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx index a7d731e74d7..acd004f7e2e 100644 --- a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx +++ b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx @@ -20,4 +20,4 @@ const config: StorybookConfig = { }; module.exports = config; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-telemetry-preview-event.npm.js.mdx b/docs/snippets/common/storybook-telemetry-preview-event.npm.js.mdx index eab8893ec86..3d98a737fc3 100644 --- a/docs/snippets/common/storybook-telemetry-preview-event.npm.js.mdx +++ b/docs/snippets/common/storybook-telemetry-preview-event.npm.js.mdx @@ -1,3 +1,3 @@ ```shell STORYBOOK_TELEMETRY_DEBUG=1 npm run storybook -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-telemetry-preview-event.yarn.js.mdx b/docs/snippets/common/storybook-telemetry-preview-event.yarn.js.mdx index fdb9d20be61..c3a55476037 100644 --- a/docs/snippets/common/storybook-telemetry-preview-event.yarn.js.mdx +++ b/docs/snippets/common/storybook-telemetry-preview-event.yarn.js.mdx @@ -1,3 +1,3 @@ ```shell STORYBOOK_TELEMETRY_DEBUG=1 yarn storybook -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.env-var.js.mdx b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.env-var.js.mdx index 41b65f19406..77f6e1ba81c 100644 --- a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.env-var.js.mdx +++ b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.env-var.js.mdx @@ -1,3 +1,3 @@ ```shell STORYBOOK_ENABLE_CRASH_REPORTS=1 yarn storybook -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.npm.js.mdx b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.npm.js.mdx index b0fc399a540..16028ba64c3 100644 --- a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.npm.js.mdx +++ b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.npm.js.mdx @@ -1,3 +1,3 @@ ```shell npm run storybook -- --enable-crash-reports -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.yarn.js.mdx b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.yarn.js.mdx index 71876f93936..1c3ce803c9e 100644 --- a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.yarn.js.mdx +++ b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.yarn.js.mdx @@ -1,3 +1,3 @@ ```shell yarn storybook --enable-crash-reports -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx b/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx index 23677beb549..20449a90ac5 100644 --- a/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx +++ b/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx @@ -4,9 +4,9 @@ const { injectAxe, checkA11y } = require('axe-playwright'); /* -* See https://storybook.js.org/docs/7.0/react/writing-tests/test-runner#test-hook-api-experimental -* to learn more about the test-runner hooks API. -*/ + * See https://storybook.js.org/docs/7.0/react/writing-tests/test-runner#test-hook-api-experimental + * to learn more about the test-runner hooks API. + */ module.exports = { async preRender(page) { await injectAxe(page); @@ -20,4 +20,4 @@ module.exports = { }); }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx b/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx index 131a81b3a47..08cec95ec6e 100644 --- a/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx +++ b/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx @@ -6,9 +6,9 @@ import { injectAxe, checkA11y } from 'axe-playwright'; import type { TestRunnerConfig } from '@storybook/test-runner'; /* -* See https://storybook.js.org/docs/7.0/react/writing-tests/test-runner#test-hook-api-experimental -* to learn more about the test-runner hooks API. -*/ + * See https://storybook.js.org/docs/7.0/react/writing-tests/test-runner#test-hook-api-experimental + * to learn more about the test-runner hooks API. + */ const a11yConfig: TestRunnerConfig = { async preRender(page) { await injectAxe(page); @@ -24,4 +24,4 @@ const a11yConfig: TestRunnerConfig = { }; module.exports = a11yConfig; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-test-runner-axe-playwright.npm.js.mdx b/docs/snippets/common/storybook-test-runner-axe-playwright.npm.js.mdx index aecfe3f9f41..291cbd8486e 100644 --- a/docs/snippets/common/storybook-test-runner-axe-playwright.npm.js.mdx +++ b/docs/snippets/common/storybook-test-runner-axe-playwright.npm.js.mdx @@ -1,3 +1,3 @@ ```shell npm install axe-playwright --save-dev -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-test-runner-axe-playwright.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-axe-playwright.yarn.js.mdx index e2d8d43da86..f8a3893f951 100644 --- a/docs/snippets/common/storybook-test-runner-axe-playwright.yarn.js.mdx +++ b/docs/snippets/common/storybook-test-runner-axe-playwright.yarn.js.mdx @@ -1,3 +1,3 @@ ```shell yarn add --dev axe-playwright -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-test-runner-disable-stories-json.npm.js.mdx b/docs/snippets/common/storybook-test-runner-disable-stories-json.npm.js.mdx index 79ae4ca3923..33555a01dc6 100644 --- a/docs/snippets/common/storybook-test-runner-disable-stories-json.npm.js.mdx +++ b/docs/snippets/common/storybook-test-runner-disable-stories-json.npm.js.mdx @@ -1,3 +1,3 @@ ```shell npm run test-storybook -- --no-stories-json -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-test-runner-disable-stories-json.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-disable-stories-json.yarn.js.mdx index 141d6375fa6..3a8b80a3988 100644 --- a/docs/snippets/common/storybook-test-runner-disable-stories-json.yarn.js.mdx +++ b/docs/snippets/common/storybook-test-runner-disable-stories-json.yarn.js.mdx @@ -1,3 +1,3 @@ ```shell yarn test-storybook --no-stories-json -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-test-runner-execute-with-flags.npm.js.mdx b/docs/snippets/common/storybook-test-runner-execute-with-flags.npm.js.mdx index 88667dfad95..6754d8375f7 100644 --- a/docs/snippets/common/storybook-test-runner-execute-with-flags.npm.js.mdx +++ b/docs/snippets/common/storybook-test-runner-execute-with-flags.npm.js.mdx @@ -1,3 +1,3 @@ ```shell npm run test-storybook -- --watch -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-test-runner-execute-with-flags.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-execute-with-flags.yarn.js.mdx index 7f461772142..e877ac67a8a 100644 --- a/docs/snippets/common/storybook-test-runner-execute-with-flags.yarn.js.mdx +++ b/docs/snippets/common/storybook-test-runner-execute-with-flags.yarn.js.mdx @@ -1,3 +1,3 @@ ```shell yarn test-storybook --watch -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-test-runner-execute-with-url.env-var.js.mdx b/docs/snippets/common/storybook-test-runner-execute-with-url.env-var.js.mdx index abc722730ba..217b72ec8a0 100644 --- a/docs/snippets/common/storybook-test-runner-execute-with-url.env-var.js.mdx +++ b/docs/snippets/common/storybook-test-runner-execute-with-url.env-var.js.mdx @@ -1,3 +1,3 @@ ```shell TARGET_URL=https://the-storybook-url-here.com yarn test-storybook -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-test-runner-execute-with-url.npm.js.mdx b/docs/snippets/common/storybook-test-runner-execute-with-url.npm.js.mdx index 9b3b6020ba6..b9430e5aa32 100644 --- a/docs/snippets/common/storybook-test-runner-execute-with-url.npm.js.mdx +++ b/docs/snippets/common/storybook-test-runner-execute-with-url.npm.js.mdx @@ -1,3 +1,3 @@ ```shell npm run test-storybook -- --url https://the-storybook-url-here.com -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-test-runner-execute-with-url.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-execute-with-url.yarn.js.mdx index af9b66dc11a..c6d395dbff8 100644 --- a/docs/snippets/common/storybook-test-runner-execute-with-url.yarn.js.mdx +++ b/docs/snippets/common/storybook-test-runner-execute-with-url.yarn.js.mdx @@ -1,3 +1,3 @@ ```shell yarn test-storybook --url https://the-storybook-url-here.com -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-test-runner-execute.npm.js.mdx b/docs/snippets/common/storybook-test-runner-execute.npm.js.mdx index 345a549b73d..0ef2e843978 100644 --- a/docs/snippets/common/storybook-test-runner-execute.npm.js.mdx +++ b/docs/snippets/common/storybook-test-runner-execute.npm.js.mdx @@ -1,3 +1,3 @@ ```shell npm run test-storybook -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-test-runner-execute.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-execute.yarn.js.mdx index 0e90b9012b2..2ab91535dd8 100644 --- a/docs/snippets/common/storybook-test-runner-execute.yarn.js.mdx +++ b/docs/snippets/common/storybook-test-runner-execute.yarn.js.mdx @@ -1,3 +1,3 @@ ```shell yarn test-storybook -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-test-runner-hooks-example.js.mdx b/docs/snippets/common/storybook-test-runner-hooks-example.js.mdx index 85f2437a74a..e3d52b73864 100644 --- a/docs/snippets/common/storybook-test-runner-hooks-example.js.mdx +++ b/docs/snippets/common/storybook-test-runner-hooks-example.js.mdx @@ -21,4 +21,4 @@ module.exports = { // Add your configuration here. }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-test-runner-hooks-example.ts.mdx b/docs/snippets/common/storybook-test-runner-hooks-example.ts.mdx index bdc01f0f8c8..d05ddb64801 100644 --- a/docs/snippets/common/storybook-test-runner-hooks-example.ts.mdx +++ b/docs/snippets/common/storybook-test-runner-hooks-example.ts.mdx @@ -25,4 +25,4 @@ const config: TestRunnerConfig = { }; module.exports = config; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-test-runner-local-build-workflow.yml.mdx b/docs/snippets/common/storybook-test-runner-local-build-workflow.yml.mdx index 133523b77e4..000ccf44ba1 100644 --- a/docs/snippets/common/storybook-test-runner-local-build-workflow.yml.mdx +++ b/docs/snippets/common/storybook-test-runner-local-build-workflow.yml.mdx @@ -23,4 +23,4 @@ jobs: npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \ "npx http-server storybook-static --port 6006 --silent" \ "npx wait-on tcp:6006 && yarn test-storybook" -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-test-runner-with-deploy-event-workflow.yml.mdx b/docs/snippets/common/storybook-test-runner-with-deploy-event-workflow.yml.mdx index e73ffbb522c..ff965af6f45 100644 --- a/docs/snippets/common/storybook-test-runner-with-deploy-event-workflow.yml.mdx +++ b/docs/snippets/common/storybook-test-runner-with-deploy-event-workflow.yml.mdx @@ -21,4 +21,4 @@ jobs: run: yarn test-storybook env: TARGET_URL: '${{ github.event.deployment_status.target_url }}' -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-test-runner-with-stories-json.npm.js.mdx b/docs/snippets/common/storybook-test-runner-with-stories-json.npm.js.mdx index 0199d36a8ba..b0a1f2f3909 100644 --- a/docs/snippets/common/storybook-test-runner-with-stories-json.npm.js.mdx +++ b/docs/snippets/common/storybook-test-runner-with-stories-json.npm.js.mdx @@ -1,3 +1,3 @@ ```shell npm run test-storybook -- --stories-json -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-test-runner-with-stories-json.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-with-stories-json.yarn.js.mdx index 8a5bf7838bd..eeebd6fb444 100644 --- a/docs/snippets/common/storybook-test-runner-with-stories-json.yarn.js.mdx +++ b/docs/snippets/common/storybook-test-runner-with-stories-json.yarn.js.mdx @@ -1,3 +1,3 @@ ```shell yarn test-storybook --stories-json -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-test-with-storyname.js.mdx b/docs/snippets/common/storybook-test-with-storyname.js.mdx index d86c32b9ab4..3e7cc4273e6 100644 --- a/docs/snippets/common/storybook-test-with-storyname.js.mdx +++ b/docs/snippets/common/storybook-test-with-storyname.js.mdx @@ -14,4 +14,4 @@ it('should format CSF exports with sensible defaults', () => { expect(storyNameFromExport(key)).toBe(val); }); }); -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-testing-addon-install.npm.js.mdx b/docs/snippets/common/storybook-testing-addon-install.npm.js.mdx index f49ff3a0f3f..59206715f03 100644 --- a/docs/snippets/common/storybook-testing-addon-install.npm.js.mdx +++ b/docs/snippets/common/storybook-testing-addon-install.npm.js.mdx @@ -1,3 +1,3 @@ ```shell npm install --save-dev @storybook/testing-( react | vue | vue3 | angular) -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-testing-addon-install.yarn.js.mdx b/docs/snippets/common/storybook-testing-addon-install.yarn.js.mdx index 4b6378ec00d..ab3abc41ea1 100644 --- a/docs/snippets/common/storybook-testing-addon-install.yarn.js.mdx +++ b/docs/snippets/common/storybook-testing-addon-install.yarn.js.mdx @@ -1,3 +1,3 @@ ```shell yarn add --dev @storybook/testing-( react | vue | vue3 | angular ) -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-theming-styled-import.js.mdx b/docs/snippets/common/storybook-theming-styled-import.js.mdx index 282cfe167da..e06dba71de8 100644 --- a/docs/snippets/common/storybook-theming-styled-import.js.mdx +++ b/docs/snippets/common/storybook-theming-styled-import.js.mdx @@ -2,4 +2,4 @@ // YourTheme.js import { styled } from '@storybook/theming'; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-vite-builder-config-env.js.mdx b/docs/snippets/common/storybook-vite-builder-config-env.js.mdx index a3dbee8895a..cf5ee4c5b22 100644 --- a/docs/snippets/common/storybook-vite-builder-config-env.js.mdx +++ b/docs/snippets/common/storybook-vite-builder-config-env.js.mdx @@ -21,4 +21,4 @@ module.exports = { }); }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-vite-builder-install.npm.js.mdx b/docs/snippets/common/storybook-vite-builder-install.npm.js.mdx index e4d64958fb9..95702931919 100644 --- a/docs/snippets/common/storybook-vite-builder-install.npm.js.mdx +++ b/docs/snippets/common/storybook-vite-builder-install.npm.js.mdx @@ -1,3 +1,3 @@ ```shell npm install @storybook/builder-vite --save-dev -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-vite-builder-install.yarn.js.mdx b/docs/snippets/common/storybook-vite-builder-install.yarn.js.mdx index ff51b902c05..db7837fda8f 100644 --- a/docs/snippets/common/storybook-vite-builder-install.yarn.js.mdx +++ b/docs/snippets/common/storybook-vite-builder-install.yarn.js.mdx @@ -1,3 +1,3 @@ ```shell yarn add --dev @storybook/builder-vite -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-vite-builder-register.js.mdx b/docs/snippets/common/storybook-vite-builder-register.js.mdx index 6ae400a96a4..4393b595d63 100644 --- a/docs/snippets/common/storybook-vite-builder-register.js.mdx +++ b/docs/snippets/common/storybook-vite-builder-register.js.mdx @@ -8,4 +8,4 @@ module.exports = { builder: '@storybook/builder-vite', // 👈 The builder enabled here. }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx b/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx index 8d4a2eeda43..d3f923468e8 100644 --- a/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx +++ b/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx @@ -13,8 +13,8 @@ module.exports = { // Customize the Vite config here return config; }, - framework:{ - name: '@storybook/svelte-webpack5', + framework: { + name: '@storybook/svelte-webpack5', options: { preprocess: preprocess({ typescript: true, @@ -24,4 +24,4 @@ module.exports = { }, }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx b/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx index 3948e084d94..0c294a76949 100644 --- a/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx +++ b/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx @@ -16,4 +16,4 @@ const config: StorybookViteConfig = { }; export default config; -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-write-addon-install-dependencies.npm.js.mdx b/docs/snippets/common/storybook-write-addon-install-dependencies.npm.js.mdx index e196ab44437..c735181d1b6 100644 --- a/docs/snippets/common/storybook-write-addon-install-dependencies.npm.js.mdx +++ b/docs/snippets/common/storybook-write-addon-install-dependencies.npm.js.mdx @@ -1,3 +1,3 @@ ```shell npm install react react-dom @babel/cli -``` \ No newline at end of file +``` diff --git a/docs/snippets/common/storybook-write-addon-install-dependencies.yarn.js.mdx b/docs/snippets/common/storybook-write-addon-install-dependencies.yarn.js.mdx index e81984d3e2a..5fa3643b1cc 100644 --- a/docs/snippets/common/storybook-write-addon-install-dependencies.yarn.js.mdx +++ b/docs/snippets/common/storybook-write-addon-install-dependencies.yarn.js.mdx @@ -1,3 +1,3 @@ ```shell yarn add react react-dom @babel/cli -``` \ No newline at end of file +``` diff --git a/docs/snippets/html/button-story-component-decorator.js.mdx b/docs/snippets/html/button-story-component-decorator.js.mdx index 390d7e10517..56509a7ace1 100644 --- a/docs/snippets/html/button-story-component-decorator.js.mdx +++ b/docs/snippets/html/button-story-component-decorator.js.mdx @@ -9,12 +9,14 @@ export default { * to learn how to generate automatic titles */ title: 'Button', - decorators: [(story) => { - const decorator = document.createElement('div'); - decorator.style.margin = '3em'; - decorator.appendChild(story()); - return decorator; - }], + decorators: [ + (story) => { + const decorator = document.createElement('div'); + decorator.style.margin = '3em'; + decorator.appendChild(story()); + return decorator; + }, + ], }; /* @@ -25,4 +27,4 @@ export default { export const Primary = { render: (args) => createButton(args), }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/html/button-story-component-decorator.ts.mdx b/docs/snippets/html/button-story-component-decorator.ts.mdx index 465428aab26..9a8b6485c77 100644 --- a/docs/snippets/html/button-story-component-decorator.ts.mdx +++ b/docs/snippets/html/button-story-component-decorator.ts.mdx @@ -1,25 +1,30 @@ ```ts // Button.stories.ts -import type { Meta, Story } from '@storybook/html'; +import type { Meta, StoryObj } from '@storybook/html'; import { createButton, ButtonArgs } from './Button'; -export default { +const meta: Meta = { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading * to learn how to generate automatic titles */ title: 'Button', - decorators: [(story) => { - const decorator = document.createElement('div'); - decorator.style.margin = '3em'; - decorator.appendChild(story()); - return decorator; - }], -} as Meta; + decorators: [ + (story) => { + const decorator = document.createElement('div'); + decorator.style.margin = '3em'; + decorator.appendChild(story()); + return decorator; + }, + ], +}; + +export default meta; +type Story = StoryObj; export const Primary: Story = { render: (args) => createButton(args), }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/html/button-story-default-exports.js.mdx b/docs/snippets/html/button-story-default-exports.js.mdx index c6bbe5bf64f..645d59f9199 100644 --- a/docs/snippets/html/button-story-default-exports.js.mdx +++ b/docs/snippets/html/button-story-default-exports.js.mdx @@ -5,9 +5,9 @@ import { createButton } from './Button'; export default { /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', }; ``` diff --git a/docs/snippets/html/button-story-default-exports.ts.mdx b/docs/snippets/html/button-story-default-exports.ts.mdx index f7f15871e35..4f95322a991 100644 --- a/docs/snippets/html/button-story-default-exports.ts.mdx +++ b/docs/snippets/html/button-story-default-exports.ts.mdx @@ -5,11 +5,13 @@ import type { Meta } from '@storybook/html'; import { createButton, ButtonArgs } from './Button'; -export default { +const meta: Meta = { /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', -} as Meta; -``` \ No newline at end of file +}; + +export default meta; +``` diff --git a/docs/snippets/html/button-story-rename-story.js.mdx b/docs/snippets/html/button-story-rename-story.js.mdx index b97d998bf83..27273e19e76 100644 --- a/docs/snippets/html/button-story-rename-story.js.mdx +++ b/docs/snippets/html/button-story-rename-story.js.mdx @@ -20,4 +20,4 @@ export const Primary = { name: 'I am the primary', render: (args) => createButton(args), }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/html/button-story-rename-story.ts.mdx b/docs/snippets/html/button-story-rename-story.ts.mdx index ae7b4c57c6f..31fd09acd6d 100644 --- a/docs/snippets/html/button-story-rename-story.ts.mdx +++ b/docs/snippets/html/button-story-rename-story.ts.mdx @@ -1,17 +1,20 @@ ```ts // Button.stories.ts -import type { Meta, Story } from '@storybook/html'; +import type { Meta, StoryObj } from '@storybook/html'; import { createButton, ButtonArgs } from './Button'; -export default { +const meta: Meta = { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading * to learn how to generate automatic titles */ title: 'Button', -} as Meta; +}; + +export default meta; +type Story = StoryObj; /* *👇 Render functions are a framework specific feature to allow you control on how the component renders. @@ -22,4 +25,4 @@ export const Primary: Story = { name: 'I am the primary', render: (args) => createButton(args), }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/html/button-story-using-args.js.mdx b/docs/snippets/html/button-story-using-args.js.mdx index f9dcae89873..cd7005133dd 100644 --- a/docs/snippets/html/button-story-using-args.js.mdx +++ b/docs/snippets/html/button-story-using-args.js.mdx @@ -19,7 +19,7 @@ export default { export const Primary = { render: (args) => createButton(args), args: { - primary: true, + primary: true, label: 'Button', }, }; @@ -27,7 +27,7 @@ export const Primary = { export const Secondary = { render: (args) => createButton(args), args: { - ...Primary.args, + ...Primary.args, label: '😄👍😍💯', }, }; @@ -35,8 +35,8 @@ export const Secondary = { export const Tertiary = { render: (args) => createButton(args), args: { - ...Primary.args, + ...Primary.args, label: '📚📕📈🤓', }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/html/button-story-using-args.ts.mdx b/docs/snippets/html/button-story-using-args.ts.mdx index 9b566f5fa6f..254c8f1102f 100644 --- a/docs/snippets/html/button-story-using-args.ts.mdx +++ b/docs/snippets/html/button-story-using-args.ts.mdx @@ -1,16 +1,19 @@ ```ts // Button.stories.ts -import type { Meta, Story } from '@storybook/html'; +import type { Meta, StoryObj } from '@storybook/html'; import { createButton, ButtonArgs } from './Button'; -export default { +const meta: Meta = { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading * to learn how to generate automatic titles */ title: 'Button', -} as Meta; +}; + +export default meta; +type Story = StoryObj; /* *👇 Render functions are a framework specific feature to allow you control on how the component renders. @@ -20,7 +23,7 @@ export default { export const Primary: Story = { render: (args) => createButton(args), args: { - primary: true, + primary: true, label: 'Button', }, }; @@ -28,7 +31,7 @@ export const Primary: Story = { export const Secondary: Story = { render: (args) => createButton(args), args: { - ...Primary.args, + ...Primary.args, label: '😄👍😍💯', }, }; @@ -36,8 +39,8 @@ export const Secondary: Story = { export const Tertiary: Story = { render: (args) => createButton(args), args: { - ...Primary.args, + ...Primary.args, label: '📚📕📈🤓', }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/html/button-story-with-args.js.mdx b/docs/snippets/html/button-story-with-args.js.mdx index dbfe2d268a5..7ca97e12745 100644 --- a/docs/snippets/html/button-story-with-args.js.mdx +++ b/docs/snippets/html/button-story-with-args.js.mdx @@ -16,15 +16,11 @@ export default { */ export const Primary = { render: (args) => { - const btn = document.createElement("button"); + const btn = document.createElement('button'); btn.innerText = args.label; - const mode = args.primary - ? "storybook-button--primary" - : "storybook-button--secondary"; - btn.className = ["storybook-button", "storybook-button--medium", mode].join( - " " - ); + const mode = args.primary ? 'storybook-button--primary' : 'storybook-button--secondary'; + btn.className = ['storybook-button', 'storybook-button--medium', mode].join(' '); return btn; }, @@ -33,4 +29,4 @@ export const Primary = { label: 'Button', }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/html/button-story-with-args.ts.mdx b/docs/snippets/html/button-story-with-args.ts.mdx index cc6bc9a0796..f296ce7a1be 100644 --- a/docs/snippets/html/button-story-with-args.ts.mdx +++ b/docs/snippets/html/button-story-with-args.ts.mdx @@ -1,20 +1,23 @@ ```ts // Button.stories.ts -import type { Meta, Story } from '@storybook/html'; +import type { Meta, StoryObj } from '@storybook/html'; type ButtonArgs = { primary: boolean; label: string; }; -export default { +const meta: Meta = { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading * to learn how to generate automatic titles */ title: 'Button', -} as Meta; +}; + +export default meta; +type Story = StoryObj; /* *👇 Render functions are a framework specific feature to allow you control on how the component renders. diff --git a/docs/snippets/html/button-story-with-blue-args.js.mdx b/docs/snippets/html/button-story-with-blue-args.js.mdx index e83f8f60f34..2c75ade8831 100644 --- a/docs/snippets/html/button-story-with-blue-args.js.mdx +++ b/docs/snippets/html/button-story-with-blue-args.js.mdx @@ -20,4 +20,4 @@ export default { }, }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/html/button-story-with-blue-args.ts.mdx b/docs/snippets/html/button-story-with-blue-args.ts.mdx index c22368c501b..0c8d210367e 100644 --- a/docs/snippets/html/button-story-with-blue-args.ts.mdx +++ b/docs/snippets/html/button-story-with-blue-args.ts.mdx @@ -5,7 +5,7 @@ import type { Meta } from '@storybook/html'; import { createButton, ButtonArgs } from './Button'; -export default { +const meta: Meta = { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading * to learn how to generate automatic titles @@ -21,5 +21,7 @@ export default { ], }, }, -} as Meta; -``` \ No newline at end of file +}; + +export default meta; +``` diff --git a/docs/snippets/html/button-story-with-emojis.js.mdx b/docs/snippets/html/button-story-with-emojis.js.mdx index 933e1ce8f98..740fe3fb364 100644 --- a/docs/snippets/html/button-story-with-emojis.js.mdx +++ b/docs/snippets/html/button-story-with-emojis.js.mdx @@ -17,14 +17,14 @@ export default { * to learn how to use render functions. */ export const Primary = { - render: (args) => createButton({ backgroundColor: "#ff0", label: "Button"}), + render: (args) => createButton({ backgroundColor: '#ff0', label: 'Button' }), }; export const Secondary = { - render: (args) => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"}), + render: (args) => createButton({ backgroundColor: '#ff0', label: '😄👍😍💯' }), }; export const Tertiary = { - render: (args) => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"}), + render: (args) => createButton({ backgroundColor: '#ff0', label: '📚📕📈🤓' }), }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/html/button-story-with-emojis.ts.mdx b/docs/snippets/html/button-story-with-emojis.ts.mdx index 67f012d2250..09a7719f1a7 100644 --- a/docs/snippets/html/button-story-with-emojis.ts.mdx +++ b/docs/snippets/html/button-story-with-emojis.ts.mdx @@ -1,16 +1,19 @@ ```ts // Button.stories.ts -import type { Meta, Story } from '@storybook/html'; +import type { Meta, StoryObj } from '@storybook/html'; import { createButton, ButtonArgs } from './Button'; -export default { +const meta: Meta = { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading * to learn how to generate automatic titles */ title: 'Button', -} as Meta; +}; + +export default meta; +type Story = StoryObj; /* *👇 Render functions are a framework specific feature to allow you control on how the component renders. @@ -18,14 +21,14 @@ export default { * to learn how to use render functions. */ export const Primary: Story = { - render: (args) => createButton({ backgroundColor: "#ff0", label: "Button"}), + render: (args) => createButton({ backgroundColor: '#ff0', label: 'Button' }), }; export const Secondary: Story = { - render: (args) => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"}), + render: (args) => createButton({ backgroundColor: '#ff0', label: '😄👍😍💯' }), }; export const Tertiary: Story = { - render: (args) => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"}), + render: (args) => createButton({ backgroundColor: '#ff0', label: '📚📕📈🤓' }), }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/html/button-story.js.mdx b/docs/snippets/html/button-story.js.mdx index 36725f39dad..1850f1b2c63 100644 --- a/docs/snippets/html/button-story.js.mdx +++ b/docs/snippets/html/button-story.js.mdx @@ -28,4 +28,4 @@ export const Primary = { return btn; }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/html/button-story.ts.mdx b/docs/snippets/html/button-story.ts.mdx index d544c874b6b..84ab4de3fcf 100644 --- a/docs/snippets/html/button-story.ts.mdx +++ b/docs/snippets/html/button-story.ts.mdx @@ -1,15 +1,17 @@ ```ts // Button.stories.ts -import type { Meta, Story } from '@storybook/html'; +import type { Meta, StoryObj } from '@storybook/html'; -export default { +const meta: Meta = { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading * to learn how to generate automatic titles */ title: 'Button', -} as Meta; +}; + +export default meta; /* *👇 Render functions are a framework specific feature to allow you control on how the component renders. @@ -30,4 +32,4 @@ export const Primary: Story = { return btn; }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/html/histogram-story.js.mdx b/docs/snippets/html/histogram-story.js.mdx index 8230bf68d72..dd833becdd5 100644 --- a/docs/snippets/html/histogram-story.js.mdx +++ b/docs/snippets/html/histogram-story.js.mdx @@ -4,7 +4,7 @@ import { createHistogram } from './Histogram'; export default { - /* 👇 The title prop is optional. + /* 👇 The title prop is optional. * See https://storybook.js.org/docs/7.0/html/configure/overview#configure-story-loading * to learn how to generate automatic titles */ @@ -25,4 +25,4 @@ export const Default = { label: 'Latency distribution', }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/html/histogram-story.ts.mdx b/docs/snippets/html/histogram-story.ts.mdx index 84866f98b42..83e8a823bf5 100644 --- a/docs/snippets/html/histogram-story.ts.mdx +++ b/docs/snippets/html/histogram-story.ts.mdx @@ -1,17 +1,20 @@ ```ts // Histogram.stories.ts -import type { Meta, Story } from '@storybook/html'; +import type { Meta, StoryObj } from '@storybook/html'; -import { Histogram, HistogramProps } from './Histogram'; +import { createHistogram, HistogramProps } from './Histogram'; -export default { +const meta: Meta = { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/7.0/html/configure/overview#configure-story-loading * to learn how to generate automatic titles */ title: 'Histogram', -} as Meta; +}; + +export default meta; +type Story = StoryObj; /* *👇 Render functions are a framework specific feature to allow you control on how the component renders. @@ -27,4 +30,4 @@ export const Default: Story = { label: 'Latency distribution', }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/html/list-story-expanded.js.mdx b/docs/snippets/html/list-story-expanded.js.mdx index 3466632b67d..5999a781e3a 100644 --- a/docs/snippets/html/list-story-expanded.js.mdx +++ b/docs/snippets/html/list-story-expanded.js.mdx @@ -1,12 +1,11 @@ - ```js // List.stories.js -import { createList } from './List'; +import { createList } from './List'; import { createListItem } from './ListItem'; export default { - /* 👇 The title prop is optional. + /* 👇 The title prop is optional. * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading * to learn how to generate automatic titles */ @@ -19,7 +18,7 @@ export default { * to learn how to use render functions. */ export const Empty = { - render: () => createList(args) + render: () => createList(args), }; export const OneItem = { @@ -39,4 +38,4 @@ export const ManyItems = { return list; }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/html/list-story-expanded.ts.mdx b/docs/snippets/html/list-story-expanded.ts.mdx index c6854009141..3de22cef4d3 100644 --- a/docs/snippets/html/list-story-expanded.ts.mdx +++ b/docs/snippets/html/list-story-expanded.ts.mdx @@ -1,15 +1,17 @@ - ```ts // List.stories.ts -import type { Meta, Story } from '@storybook/html'; +import type { Meta, StoryObj } from '@storybook/html'; -import { createList, ListArgs } from './List'; +import { createList, ListArgs } from './List'; import { createListItem } from './ListItem'; -export default { +const meta: Meta = { title: 'List', -} as Meta; +}; + +export default meta; +type Story = StoryObj; /* *👇 Render functions are a framework specific feature to allow you control on how the component renders. @@ -17,7 +19,7 @@ export default { * to learn how to use render functions. */ export const Empty: Story = { - render: () => createList(args) + render: () => createList(args), }; export const OneItem: Story = { @@ -37,4 +39,4 @@ export const ManyItems: Story = { return list; }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/html/list-story-reuse-data.js.mdx b/docs/snippets/html/list-story-reuse-data.js.mdx index 7c36ec6feb0..d7fdaa79ca6 100644 --- a/docs/snippets/html/list-story-reuse-data.js.mdx +++ b/docs/snippets/html/list-story-reuse-data.js.mdx @@ -1,8 +1,7 @@ - ```js // List.stories.js -import { createList } from './List'; +import { createList } from './List'; import { createListItem } from './ListItem'; // 👇 We're importing the necessary stories from ListItem @@ -30,4 +29,4 @@ export const ManyItems = { return list; }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/html/list-story-reuse-data.ts.mdx b/docs/snippets/html/list-story-reuse-data.ts.mdx index 3291a2d9399..d29636c219b 100644 --- a/docs/snippets/html/list-story-reuse-data.ts.mdx +++ b/docs/snippets/html/list-story-reuse-data.ts.mdx @@ -1,22 +1,24 @@ - ```ts // List.stories.ts -import type { Meta, Story } from '@storybook/html'; +import type { Meta, StoryObj } from '@storybook/html'; -import { createList, ListArgs } from './List'; +import { createList, ListArgs } from './List'; import { createListItem } from './ListItem'; // 👇 We're importing the necessary stories from ListItem import { Selected, Unselected } from './ListItem.stories'; -export default { +const meta: Meta = { /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'List', -} as Meta; +}; + +export default meta; +type Story = StoryObj; /* *👇 Render functions are a framework specific feature to allow you control on how the component renders. diff --git a/docs/snippets/html/list-story-starter.js.mdx b/docs/snippets/html/list-story-starter.js.mdx index 441ae42f5c1..1563f951052 100644 --- a/docs/snippets/html/list-story-starter.js.mdx +++ b/docs/snippets/html/list-story-starter.js.mdx @@ -1,13 +1,13 @@ ```js // List.stories.js -import { createList } from './List'; +import { createList } from './List'; export default { /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'List', }; @@ -15,4 +15,4 @@ export default { export const Empty = { render: (args) => createList(args), }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/html/list-story-starter.ts.mdx b/docs/snippets/html/list-story-starter.ts.mdx index 15f226a1870..e35a114d556 100644 --- a/docs/snippets/html/list-story-starter.ts.mdx +++ b/docs/snippets/html/list-story-starter.ts.mdx @@ -1,20 +1,23 @@ ```ts // List.stories.ts -import type { Meta, Story } from '@storybook/html'; +import type { Meta, StoryObj } from '@storybook/html'; -import { createList, ListArgs } from './List'; +import { createList, ListArgs } from './List'; -export default { +const meta: Meta = { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading * to learn how to generate automatic titles */ title: 'List', -} as Meta; +}; + +export default meta; +type Story = StoryObj; // Always an empty list, not super interesting export const Empty: Story = { render: (args) => createList(args), }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/html/your-component.js.mdx b/docs/snippets/html/your-component.js.mdx index 497ba4615fd..9e17579a1f3 100644 --- a/docs/snippets/html/your-component.js.mdx +++ b/docs/snippets/html/your-component.js.mdx @@ -6,9 +6,9 @@ import { createYourComponent } from './YourComponent'; // 👇 This default export determines where your story goes in the story list export default { /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'YourComponent', }; @@ -19,8 +19,8 @@ export default { */ export const FirstStory = { render: (args) => createYourComponent(args), - args:{ + args: { // 👇 The args you need here will depend on your component }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/html/your-component.ts.mdx b/docs/snippets/html/your-component.ts.mdx index bc4d127aa4d..95f74695d0d 100644 --- a/docs/snippets/html/your-component.ts.mdx +++ b/docs/snippets/html/your-component.ts.mdx @@ -1,18 +1,22 @@ ```ts // YourComponent.stories.ts -import type { Meta, Story } from '@storybook/html'; +import type { Meta, StoryObj } from '@storybook/html'; -import { createYourComponent } from './YourComponent'; +import { createYourComponent, ComponentProps } from './YourComponent'; //👇 This default export determines where your story goes in the story list -export default { +const meta: Meta = { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading * to learn how to generate automatic titles */ title: 'YourComponent', -} as Meta; +}; + +export default meta; +type Story = StoryObj; + /* *👇 Render functions are a framework specific feature to allow you control on how the component renders. * See https://storybook.js.org/docs/7.0/html/api/csf @@ -20,8 +24,8 @@ export default { */ export const FirstStory: Story = { render: (args) => createYourComponent(args), - args:{ + args: { // 👇 The args you need here will depend on your component }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/preact/button-story-with-args.js.mdx b/docs/snippets/preact/button-story-with-args.js.mdx index 9e7a42247ae..41d13f903be 100644 --- a/docs/snippets/preact/button-story-with-args.js.mdx +++ b/docs/snippets/preact/button-story-with-args.js.mdx @@ -27,4 +27,4 @@ export const Primary = { label: 'Button', }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/preact/button-story.js.mdx b/docs/snippets/preact/button-story.js.mdx index 9577823d3ad..3a5af05a8ff 100644 --- a/docs/snippets/preact/button-story.js.mdx +++ b/docs/snippets/preact/button-story.js.mdx @@ -23,4 +23,4 @@ export default { export const Primary = { render: () => ); }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/react/button-group-story.js.mdx b/docs/snippets/react/button-group-story.js.mdx index 16f61cec932..72ca919986b 100644 --- a/docs/snippets/react/button-group-story.js.mdx +++ b/docs/snippets/react/button-group-story.js.mdx @@ -23,4 +23,4 @@ export const Pair = { orientation: 'horizontal', }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/react/button-group-story.ts.mdx b/docs/snippets/react/button-group-story.ts.mdx index 780c3b3e300..0a186bce968 100644 --- a/docs/snippets/react/button-group-story.ts.mdx +++ b/docs/snippets/react/button-group-story.ts.mdx @@ -1,25 +1,26 @@ -```ts +```tsx // ButtonGroup.stories.ts|tsx -import React from 'react'; - -import type { ComponentStoryObj, ComponentMeta } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { ButtonGroup } from '../ButtonGroup'; //👇 Imports the Button stories import * as ButtonStories from './Button.stories'; -export default { +const meta: Meta = { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading * to learn how to generate automatic titles */ title: 'ButtonGroup', component: ButtonGroup, -} as ComponentMeta; +}; -export const Pair: ComponentStoryObj = { +export default meta; +type Story = StoryObj; + +export const Pair: Story = { args: { buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }], orientation: 'horizontal', diff --git a/docs/snippets/react/button-implementation.js.mdx b/docs/snippets/react/button-implementation.js.mdx index 859e5243a02..91030e82f69 100644 --- a/docs/snippets/react/button-implementation.js.mdx +++ b/docs/snippets/react/button-implementation.js.mdx @@ -34,4 +34,4 @@ Button.propTypes = { */ onClick: PropTypes.func, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/react/button-implementation.ts.mdx b/docs/snippets/react/button-implementation.ts.mdx index b685ca704d1..3f910d60110 100644 --- a/docs/snippets/react/button-implementation.ts.mdx +++ b/docs/snippets/react/button-implementation.ts.mdx @@ -1,8 +1,6 @@ -```ts +```tsx // Button.ts|tsx -import React from 'react'; - export interface ButtonProps { /** * Is this the principal call to action on the page? @@ -38,4 +36,4 @@ export const Button: React.FC = ({ }) => { // the component implementation }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/react/button-story-click-handler-args.js.mdx b/docs/snippets/react/button-story-click-handler-args.js.mdx index 8fc63bd26b4..ab41125d195 100644 --- a/docs/snippets/react/button-story-click-handler-args.js.mdx +++ b/docs/snippets/react/button-story-click-handler-args.js.mdx @@ -23,4 +23,4 @@ export const Text = { }, render: ({ label, onClick }) => , }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/react/button-story-with-addon-example.ts.mdx b/docs/snippets/react/button-story-with-addon-example.ts.mdx index 2807164bf01..1525c119c5a 100644 --- a/docs/snippets/react/button-story-with-addon-example.ts.mdx +++ b/docs/snippets/react/button-story-with-addon-example.ts.mdx @@ -1,13 +1,11 @@ -```ts +```tsx // Button.stories.ts|tsx -import React from 'react'; - -import type { ComponentStoryObj, ComponentMeta } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Button } from './Button'; -export default { +const meta: Meta = { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading * to learn how to generate automatic titles @@ -20,14 +18,17 @@ export default { data: 'this data is passed to the addon', }, }, -} as ComponentMeta; +}; + +export default meta; +type Story = StoryObj; /* *👇 Render functions are a framework specific feature to allow you control on how the component renders. * See https://storybook.js.org/docs/7.0/react/api/csf * to learn how to use render functions. */ -export const Basic: ComponentStoryObj = { +export const Basic: Story = { render: () => , }; ``` diff --git a/docs/snippets/react/button-story-with-args.js.mdx b/docs/snippets/react/button-story-with-args.js.mdx index 7fcf35be8bd..500b3777a8a 100644 --- a/docs/snippets/react/button-story-with-args.js.mdx +++ b/docs/snippets/react/button-story-with-args.js.mdx @@ -20,4 +20,4 @@ export const Primary = { primary: true, }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/react/button-story-with-args.ts.mdx b/docs/snippets/react/button-story-with-args.ts.mdx index 91b96dba045..73d36c1362c 100644 --- a/docs/snippets/react/button-story-with-args.ts.mdx +++ b/docs/snippets/react/button-story-with-args.ts.mdx @@ -1,22 +1,23 @@ -```ts +```tsx // Button.stories.ts|tsx -import React from 'react'; - -import type { ComponentStoryObj, ComponentMeta } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Button, ButtonProps } from './Button'; -export default { +const meta: Meta = { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading * to learn how to generate automatic titles */ title: 'Button', component: Button, -} as ComponentMeta; +}; -export const Primary: ComponentStoryObj = { +export default meta; +type Story = StoryObj; + +export const Primary: Story = { args: { primary: true, label: 'Button', diff --git a/docs/snippets/react/button-story-with-blue-args.js.mdx b/docs/snippets/react/button-story-with-blue-args.js.mdx index 0625d9d041a..8b312858a43 100644 --- a/docs/snippets/react/button-story-with-blue-args.js.mdx +++ b/docs/snippets/react/button-story-with-blue-args.js.mdx @@ -7,9 +7,9 @@ import { Button } from './Button'; export default { /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Button', component: Button, //👇 Creates specific parameters for the story @@ -23,4 +23,4 @@ export default { }, }, }; -``` \ No newline at end of file +``` diff --git a/docs/snippets/react/button-story-with-blue-args.ts.mdx b/docs/snippets/react/button-story-with-blue-args.ts.mdx index 5cdcc6b5731..3cae8b02c82 100644 --- a/docs/snippets/react/button-story-with-blue-args.ts.mdx +++ b/docs/snippets/react/button-story-with-blue-args.ts.mdx @@ -1,13 +1,11 @@ -```ts +```tsx // Button.stories.ts|tsx -import React from 'react'; - -import type { ComponentMeta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { Button } from './Button'; -export default { +const meta: Meta = { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading * to learn how to generate automatic titles @@ -24,5 +22,7 @@ export default { ], }, }, -} as ComponentMeta; -``` \ No newline at end of file +}; + +export default meta; +``` diff --git a/docs/snippets/react/button-story-with-emojis.js.mdx b/docs/snippets/react/button-story-with-emojis.js.mdx index e12f64ac939..0a6e59a7b48 100644 --- a/docs/snippets/react/button-story-with-emojis.js.mdx +++ b/docs/snippets/react/button-story-with-emojis.js.mdx @@ -30,4 +30,4 @@ export const Secondary = { export const Tertiary = { render: () =>