diff --git a/.circleci/config.yml b/.circleci/config.yml index 9d8408b02196..a81d6b59aa92 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -86,7 +86,7 @@ jobs: - restore_cache: name: Restore Yarn cache keys: - - build-yarn-2-cache-v2--{{ checksum "yarn.lock" }} + - build-yarn-2-cache-v3--{{ checksum "yarn.lock" }} - run: name: Install dependencies command: yarn install --immutable @@ -95,7 +95,7 @@ jobs: command: yarn bootstrap --core - save_cache: name: Save Yarn cache - key: build-yarn-2-cache-v2--{{ checksum "yarn.lock" }} + key: build-yarn-2-cache-v3--{{ checksum "yarn.lock" }} paths: - ~/.yarn/berry/cache - persist_to_workspace: @@ -136,7 +136,7 @@ jobs: executor: class: medium name: sb_node_14_browsers - parallelism: 4 + parallelism: 17 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' diff --git a/CHANGELOG.md b/CHANGELOG.md index bc80ea07bcdc..7d99f01ffd24 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,75 @@ +## 6.5.0-alpha.48 (March 14, 2022) + +### Features + +- Addon-docs: Auto-disable docs presets if docs/controls unused ([#17697](https://github.com/storybookjs/storybook/pull/17697)) + +### Bug Fixes + +- Web-components: Fix CSS class usage in CLI template ([#17702](https://github.com/storybookjs/storybook/pull/17702)) + +### Maintenance + +- Addon-docs: Refactor docs support into individual framework packages ([#17695](https://github.com/storybookjs/storybook/pull/17695)) + +## 6.5.0-alpha.47 (March 10, 2022) + +### Bug Fixes + +- Webpack4: Fix useExports for angular-cli ([#17674](https://github.com/storybookjs/storybook/pull/17674)) +- Core: Ensure that we do not render a story twice if re-rendered during preparing ([#17599](https://github.com/storybookjs/storybook/pull/17599)) +- Addon-docs: DocsPage story order should match the index ([#17669](https://github.com/storybookjs/storybook/pull/17669)) +- Core: Fix staticDirs path issue on Windows ([#17641](https://github.com/storybookjs/storybook/pull/17641)) +- Angular: Set ForkTsCheckerWebpackPlugin to async ([#17389](https://github.com/storybookjs/storybook/pull/17389)) +- Core: Fix core.builder check ([#17606](https://github.com/storybookjs/storybook/pull/17606)) + +### Maintenance + +- Examples: Build stories.json for examples that support it ([#17670](https://github.com/storybookjs/storybook/pull/17670)) +- Core: Refactor preview rendering out of `PreviewWeb` ([#17598](https://github.com/storybookjs/storybook/pull/17598)) +- Prevent lint hook from running on all files ([#17662](https://github.com/storybookjs/storybook/pull/17662)) +- TypeScript: Change imports of types to be prefixed ([#17627](https://github.com/storybookjs/storybook/pull/17627)) +- Build: Give linting sub-commands a directory to run against ([#17545](https://github.com/storybookjs/storybook/pull/17545)) +- TypeScript: remove unnecessary 'as any' ([#17595](https://github.com/storybookjs/storybook/pull/17595)) + +### Dependency Upgrades + +- Update shelljs dependency version ([#17602](https://github.com/storybookjs/storybook/pull/17602)) +- Remove unused `uuid` that's also deprecated ([#17615](https://github.com/storybookjs/storybook/pull/17615)) + +## 6.5.0-alpha.46 (March 5, 2022) + +### Bug Fixes + +- Addon-interactions: Use 'global' package instead of `global` ([#17614](https://github.com/storybookjs/storybook/pull/17614)) + +## 6.5.0-alpha.45 (March 2, 2022) + +### Bug Fixes + +- CSF3: Fix Auto-title to respect file system capitalization ([#17574](https://github.com/storybookjs/storybook/pull/17574)) + +### Maintenance + +- Core: Remove unused babel dependencies ([#17425](https://github.com/storybookjs/storybook/pull/17425)) + +## 6.5.0-alpha.44 (February 28, 2022) + +### Dependency Upgrades + +- Fix mdx-csf dependencies to canary dist-tag ([#17592](https://github.com/storybookjs/storybook/pull/17592)) + +## 6.5.0-alpha.43 (February 28, 2022) + +### Features + +- Addon-docs: MDX2 support ([#17515](https://github.com/storybookjs/storybook/pull/17515)) + +### Bug Fixes + +- Core: Fix global render fn ([#17577](https://github.com/storybookjs/storybook/pull/17577)) +- Addon-interactions: Mock window in browser environments ([#17535](https://github.com/storybookjs/storybook/pull/17535)) + ## 6.5.0-alpha.42 (February 25, 2022) ### Bug Fixes diff --git a/MIGRATION.md b/MIGRATION.md index 52cb910ef596..6b8ea76261e9 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,7 +1,11 @@

Migration

- [From version 6.4.x to 6.5.0](#from-version-64x-to-650) - - [CSF3 auto-title redundant filename](#csf3-auto-title-redundant-filename) + - [Docs framework refactor for React](#docs-framework-refactor-for-react) + - [Opt-in MDX2 support](#opt-in-mdx2-support) + - [CSF3 auto-title improvements](#csf3-auto-title-improvements) + - [Auto-title filename case](#auto-title-filename-case) + - [Auto-title redundant filename](#auto-title-redundant-filename) - [From version 6.3.x to 6.4.0](#from-version-63x-to-640) - [Automigrate](#automigrate) - [CRA5 upgrade](#cra5-upgrade) @@ -192,13 +196,57 @@ ## From version 6.4.x to 6.5.0 -### CSF3 auto-title redundant filename +### Docs framework refactor for React + +SB6.5 moves framework specializations (e.g. ArgType inference, dynamic snippet rendering) out of `@storybook/addon-docs` and into the specific framework packages to which they apply (e.g. `@storybook/react`). + +This change should not require any specific migrations on your part if you are using the docs addon as described in the documentation. However, if you are using `react-docgen` or `react-docgen-typescript` information in some custom way outside of `addon-docs`, you should be aware of this change. + +In SB6.4, `@storybook/react` added `react-docgen` to its babel settings and `react-docgen-typescript` to its webpack settings. In SB6.5, this only happens if you are using `addon-docs` or `addon-controls`, either directly or indirectly through `addon-essentials`. If you're not using either of those addons, but require that information for some other addon, please configure that manually in your `.storybook/main.js` configuration. You can see the docs configuration here: https://github.com/storybookjs/storybook/blob/next/app/react/src/server/framework-preset-react-docs.ts + +### Opt-in MDX2 support + +SB6.5 adds experimental opt-in support for MDXv2. To install: + +```sh +yarn add @storybook/mdx2-csf -D +``` + +Then add the `previewMdx2` feature flag to your `.storybook/main.js` config: + +```js +module.exports = { + features: { + previewMdx2: true, + }, +}; +``` + +### CSF3 auto-title improvements SB 6.4 introduced experimental "auto-title", in which a story's location in the sidebar (aka `title`) can be automatically inferred from its location on disk. For example, the file `atoms/Button.stories.js` might result in the title `Atoms/Button`. +We've made two improvements to Auto-title based on user feedback: + +- Auto-title preserves filename case +- Auto-title removes redundant filenames from the path + +#### Auto-title filename case + +SB 6.4's implementation of auto-title ran `startCase` on each path component. For example, the file `atoms/MyButton` would be transformed to `Atoms/My Button`. + +We've changed this in SB 6.5 to preserve the filename case, so that instead it the same file would result in the title `atoms/MyButton`. The rationale is that this gives more control to users about what their auto-title will be. + +This might be considered a breaking change. However, we feel justified to release this in 6.5 because: + +1. We consider it a bug in the initial auto-title implementation +2. CSF3 and the auto-title feature are experimental, and we reserve the right to make breaking changes outside of semver (tho we try to avoid it) + +#### Auto-title redundant filename + The heuristic failed in the common scenario in which each component gets its own directory, e.g. `atoms/Button/Button.stories.js`, which would result in the redundant title `Atoms/Button/Button`. Alternatively, `atoms/Button/index.stories.js` would result in `Atoms/Button/Index`. -To address this problem, 6.5 introduces a new heuristic to removes the filename if it matches the directory name (case insensitive) or `index`. So `atoms/Button/Button.stories.js` and `atoms/Button/index.stories.js` would both result in the title `Atoms/Button`. +To address this problem, 6.5 introduces a new heuristic to removes the filename if it matches the directory name or `index`. So `atoms/Button/Button.stories.js` and `atoms/Button/index.stories.js` would both result in the title `Atoms/Button` (or `atoms/Button` if `autoTitleFilenameCase` is set, see above). Since CSF3 is experimental, we are introducing this technically breaking change in a minor release. If you desire the old structure, you can manually specify the title in file. For example: @@ -498,8 +546,8 @@ In 6.4 the behavior of loaders when arg changes occurred was tweaked so loaders Since SB6.3, Storybook for Angular supports a builder configuration in your project's `angular.json`. This provides an Angular-style configuration for running and building your Storybook. The full builder documentation will be shown in the [main documentation page](https://storybook.js.org/docs/angular) soon, but for now you can check out an example here: -- `start-storybook`: https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json#L78 -- `build-storybook`: https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json#L86 +- `start-storybook`: [example](https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json#L78) [schema](https://github.com/storybookjs/storybook/blob/next/app/angular/src/builders/start-storybook/schema.json) +- `build-storybook`: [example](https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json#L86) [schema](https://github.com/storybookjs/storybook/blob/next/app/angular/src/builders/build-storybook/schema.json) #### Angular13 @@ -538,6 +586,13 @@ If you need storybook-specific styles separate from your app, you can configure } ``` +Then, once you've set this up, you should run Storybook through the builder: + +```sh +ng run my-default-project:storybook +ng run my-default-project:build-storybook +``` + #### Angular component parameter removed In SB6.3 and earlier, the `default.component` metadata was implemented as a parameter, meaning that stories could set `parameters.component` to override the default export. This was an internal implementation that was never documented, but it was mistakenly used in some Angular examples. diff --git a/addons/a11y/package.json b/addons/a11y/package.json index c0748cc94667..34b7a5d907e7 100644 --- a/addons/a11y/package.json +++ b/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", @@ -45,14 +45,14 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/api": "6.5.0-alpha.42", - "@storybook/channels": "6.5.0-alpha.42", - "@storybook/client-logger": "6.5.0-alpha.42", - "@storybook/components": "6.5.0-alpha.42", - "@storybook/core-events": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/api": "6.5.0-alpha.48", + "@storybook/channels": "6.5.0-alpha.48", + "@storybook/client-logger": "6.5.0-alpha.48", + "@storybook/components": "6.5.0-alpha.48", + "@storybook/core-events": "6.5.0-alpha.48", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/theming": "6.5.0-alpha.42", + "@storybook/theming": "6.5.0-alpha.48", "axe-core": "^4.2.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -81,7 +81,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Accessibility", diff --git a/addons/a11y/src/components/Report/Rules.tsx b/addons/a11y/src/components/Report/Rules.tsx index 5523f07dc830..1243027a29aa 100644 --- a/addons/a11y/src/components/Report/Rules.tsx +++ b/addons/a11y/src/components/Report/Rules.tsx @@ -10,8 +10,8 @@ const List = styled.div({ paddingBottom: 4, paddingRight: 4, paddingTop: 4, - fontWeight: '400', -} as any); + fontWeight: 400, +}); const Item = styled.div<{ elementWidth: number }>(({ elementWidth }) => { const maxWidthBeforeBreak = 407; diff --git a/addons/a11y/src/index.ts b/addons/a11y/src/index.ts index c93847273ffc..76e1182f2b4e 100644 --- a/addons/a11y/src/index.ts +++ b/addons/a11y/src/index.ts @@ -1,4 +1,4 @@ -import { AnyFramework, DecoratorFunction } from '@storybook/csf'; +import type { AnyFramework, DecoratorFunction } from '@storybook/csf'; import deprecate from 'util-deprecate'; import dedent from 'ts-dedent'; diff --git a/addons/actions/package.json b/addons/actions/package.json index 35fbb2c45a24..290aa65cd5ae 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", @@ -41,12 +41,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/api": "6.5.0-alpha.42", - "@storybook/components": "6.5.0-alpha.42", - "@storybook/core-events": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/api": "6.5.0-alpha.48", + "@storybook/components": "6.5.0-alpha.48", + "@storybook/core-events": "6.5.0-alpha.48", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/theming": "6.5.0-alpha.42", + "@storybook/theming": "6.5.0-alpha.48", "core-js": "^3.8.2", "fast-deep-equal": "^3.1.3", "global": "^4.4.0", @@ -79,7 +79,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Actions", diff --git a/addons/actions/src/components/ActionLogger/index.tsx b/addons/actions/src/components/ActionLogger/index.tsx index e2cd0c6fc44a..4efee9b0f0cb 100644 --- a/addons/actions/src/components/ActionLogger/index.tsx +++ b/addons/actions/src/components/ActionLogger/index.tsx @@ -1,5 +1,6 @@ import React, { Fragment } from 'react'; -import { styled, withTheme, Theme } from '@storybook/theming'; +import { styled, withTheme } from '@storybook/theming'; +import type { Theme } from '@storybook/theming'; import Inspector from 'react-inspector'; import { ActionBar, ScrollArea } from '@storybook/components'; diff --git a/addons/actions/src/preset/addArgsHelpers.test.ts b/addons/actions/src/preset/addArgsHelpers.test.ts index adc440502a57..487dab330305 100644 --- a/addons/actions/src/preset/addArgsHelpers.test.ts +++ b/addons/actions/src/preset/addArgsHelpers.test.ts @@ -1,4 +1,4 @@ -import { StoryContext } from '@storybook/addons'; +import type { StoryContext } from '@storybook/addons'; import { inferActionsFromArgTypesRegex, addActionsFromArgTypes } from './addArgsHelpers'; describe('actions parameter enhancers', () => { diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json index 3412afad9905..cfff139f3bb9 100644 --- a/addons/backgrounds/package.json +++ b/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", @@ -45,13 +45,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/api": "6.5.0-alpha.42", - "@storybook/client-logger": "6.5.0-alpha.42", - "@storybook/components": "6.5.0-alpha.42", - "@storybook/core-events": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/api": "6.5.0-alpha.48", + "@storybook/client-logger": "6.5.0-alpha.48", + "@storybook/components": "6.5.0-alpha.48", + "@storybook/core-events": "6.5.0-alpha.48", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/theming": "6.5.0-alpha.42", + "@storybook/theming": "6.5.0-alpha.48", "core-js": "^3.8.2", "global": "^4.4.0", "memoizerific": "^1.11.3", @@ -77,7 +77,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Backgrounds", diff --git a/addons/backgrounds/src/decorators/withBackground.ts b/addons/backgrounds/src/decorators/withBackground.ts index b5d72d4cbcb9..391ecb0e28a2 100644 --- a/addons/backgrounds/src/decorators/withBackground.ts +++ b/addons/backgrounds/src/decorators/withBackground.ts @@ -1,5 +1,5 @@ import { useMemo, useEffect } from '@storybook/addons'; -import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf'; +import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf'; import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants'; import { diff --git a/addons/backgrounds/src/decorators/withGrid.ts b/addons/backgrounds/src/decorators/withGrid.ts index 294f9df818a4..35ba05383ffc 100644 --- a/addons/backgrounds/src/decorators/withGrid.ts +++ b/addons/backgrounds/src/decorators/withGrid.ts @@ -1,7 +1,7 @@ import dedent from 'ts-dedent'; import deprecate from 'util-deprecate'; import { useMemo, useEffect } from '@storybook/addons'; -import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf'; +import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf'; import { clearStyles, addGridStyle } from '../helpers'; import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants'; diff --git a/addons/controls/package.json b/addons/controls/package.json index 1b9c884f2177..339dda645d6f 100644 --- a/addons/controls/package.json +++ b/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", @@ -45,15 +45,15 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/api": "6.5.0-alpha.42", - "@storybook/client-logger": "6.5.0-alpha.42", - "@storybook/components": "6.5.0-alpha.42", - "@storybook/core-common": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/api": "6.5.0-alpha.48", + "@storybook/client-logger": "6.5.0-alpha.48", + "@storybook/components": "6.5.0-alpha.48", + "@storybook/core-common": "6.5.0-alpha.48", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/node-logger": "6.5.0-alpha.42", - "@storybook/store": "6.5.0-alpha.42", - "@storybook/theming": "6.5.0-alpha.42", + "@storybook/node-logger": "6.5.0-alpha.48", + "@storybook/store": "6.5.0-alpha.48", + "@storybook/theming": "6.5.0-alpha.48", "core-js": "^3.8.2", "lodash": "^4.17.21", "ts-dedent": "^2.0.0" @@ -73,7 +73,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/register.js", "storybook": { "displayName": "Controls", diff --git a/addons/docs/angular/index.d.ts b/addons/docs/angular/index.d.ts index f2a8c4052072..f63f89b4d1f5 100644 --- a/addons/docs/angular/index.d.ts +++ b/addons/docs/angular/index.d.ts @@ -1 +1 @@ -export * from '../dist/ts3.9/frameworks/angular/index.d'; +export declare const setCompodocJson: (compodocJson: any) => void; diff --git a/addons/docs/angular/index.js b/addons/docs/angular/index.js index aab19f758f29..3fd4c7ea527c 100644 --- a/addons/docs/angular/index.js +++ b/addons/docs/angular/index.js @@ -1 +1,7 @@ -module.exports = require('../dist/esm/frameworks/angular/index'); +/* eslint-disable no-underscore-dangle */ +/* global window */ + +export const setCompodocJson = (compodocJson) => { + // @ts-ignore + window.__STORYBOOK_COMPODOC_JSON__ = compodocJson; +}; diff --git a/addons/docs/common-preset.js b/addons/docs/common-preset.js deleted file mode 100644 index 462287ef4225..000000000000 --- a/addons/docs/common-preset.js +++ /dev/null @@ -1,19 +0,0 @@ -function managerEntries(entry = [], options) { - return [...entry, require.resolve('./dist/esm/register')]; -} - -function config(entry = [], options = {}) { - const { framework } = options; - const docsConfig = [require.resolve('./dist/esm/frameworks/common/config')]; - try { - docsConfig.push(require.resolve(`./dist/esm/frameworks/${framework}/config`)); - } catch (err) { - // there is no custom config for the user's framework, do nothing - } - return [...docsConfig, ...entry]; -} - -module.exports = { - managerEntries, - config, -}; diff --git a/addons/docs/ember/index.js b/addons/docs/ember/index.js index edcab7e3604b..b4ff874067cd 100644 --- a/addons/docs/ember/index.js +++ b/addons/docs/ember/index.js @@ -1 +1,6 @@ -module.exports = require('../dist/esm/frameworks/ember'); +/* eslint-disable no-underscore-dangle */ +/* global window */ + +export const setJSONDoc = (jsondoc) => { + window.__EMBER_GENERATED_DOC_JSON__ = jsondoc; +}; diff --git a/addons/docs/jest-transform-mdx.js b/addons/docs/jest-transform-mdx.js index 3e73194ce258..597d18a69cb2 100644 --- a/addons/docs/jest-transform-mdx.js +++ b/addons/docs/jest-transform-mdx.js @@ -1,11 +1,8 @@ const path = require('path'); -const mdx = require('@mdx-js/mdx'); const { ScriptTransformer } = require('@jest/transform'); const { dedent } = require('ts-dedent'); -const { createCompiler } = require('@storybook/csf-tools/mdx'); - -const compilers = [createCompiler({})]; +const { compileSync } = require('@storybook/mdx1-csf'); module.exports = { process(src, filename, config, { instrument }) { @@ -13,7 +10,7 @@ module.exports = { /* @jsx mdx */ import React from 'react' import { mdx } from '@mdx-js/react' - ${mdx.sync(src, { compilers, filepath: filename })} + ${compileSync(src, { filepath: filename })} `; const extension = path.extname(filename); diff --git a/addons/docs/mdx-compiler-plugin.js b/addons/docs/mdx-compiler-plugin.js index edbca81d1a97..2651fa35e30a 100644 --- a/addons/docs/mdx-compiler-plugin.js +++ b/addons/docs/mdx-compiler-plugin.js @@ -1 +1 @@ -module.exports = require('@storybook/csf-tools/mdx').createCompiler; +module.exports = require('@storybook/mdx1-csf').createCompiler; diff --git a/addons/docs/package.json b/addons/docs/package.json index c356f9dd5afd..905385c403a6 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", @@ -55,126 +55,54 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@babel/core": "^7.12.10", - "@babel/generator": "^7.12.11", - "@babel/parser": "^7.12.11", "@babel/plugin-transform-react-jsx": "^7.12.12", "@babel/preset-env": "^7.12.11", "@jest/transform": "^26.6.2", - "@mdx-js/loader": "^1.6.22", - "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/api": "6.5.0-alpha.42", - "@storybook/builder-webpack4": "6.5.0-alpha.42", - "@storybook/client-logger": "6.5.0-alpha.42", - "@storybook/components": "6.5.0-alpha.42", - "@storybook/core": "6.5.0-alpha.42", - "@storybook/core-events": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/api": "6.5.0-alpha.48", + "@storybook/components": "6.5.0-alpha.48", + "@storybook/core-common": "6.5.0-alpha.48", + "@storybook/core-events": "6.5.0-alpha.48", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/csf-tools": "6.5.0-alpha.42", - "@storybook/node-logger": "6.5.0-alpha.42", - "@storybook/postinstall": "6.5.0-alpha.42", - "@storybook/preview-web": "6.5.0-alpha.42", - "@storybook/source-loader": "6.5.0-alpha.42", - "@storybook/store": "6.5.0-alpha.42", - "@storybook/theming": "6.5.0-alpha.42", - "acorn": "^7.4.1", - "acorn-jsx": "^5.3.1", - "acorn-walk": "^7.2.0", + "@storybook/docs-tools": "6.5.0-alpha.48", + "@storybook/mdx1-csf": "canary", + "@storybook/node-logger": "6.5.0-alpha.48", + "@storybook/postinstall": "6.5.0-alpha.48", + "@storybook/preview-web": "6.5.0-alpha.48", + "@storybook/source-loader": "6.5.0-alpha.48", + "@storybook/store": "6.5.0-alpha.48", + "@storybook/theming": "6.5.0-alpha.48", "core-js": "^3.8.2", - "doctrine": "^3.0.0", - "escodegen": "^2.0.0", "fast-deep-equal": "^3.1.3", "global": "^4.4.0", - "html-tags": "^3.1.0", - "js-string-escape": "^1.0.1", - "loader-utils": "^2.0.0", "lodash": "^4.17.21", - "nanoid": "^3.1.23", - "p-limit": "^3.1.0", - "prettier": ">=2.2.1 <=2.3.0", - "prop-types": "^15.7.2", - "react-element-to-jsx-string": "^14.3.4", - "regenerator-runtime": "^0.13.7", "remark-external-links": "^8.0.0", "remark-slug": "^6.0.0", "ts-dedent": "^2.0.0", "util-deprecate": "^1.0.2" }, "devDependencies": { - "@angular/core": "^11.2.14", "@babel/core": "^7.12.10", - "@emotion/core": "^10.3.1", - "@emotion/styled": "^10.0.27", - "@storybook/angular": "6.5.0-alpha.42", - "@storybook/html": "6.5.0-alpha.42", - "@storybook/react": "6.5.0-alpha.42", - "@storybook/vue": "6.5.0-alpha.42", - "@storybook/web-components": "6.5.0-alpha.42", - "@types/cross-spawn": "^6.0.2", - "@types/doctrine": "^0.0.3", - "@types/enzyme": "^3.10.8", - "@types/estree": "^0.0.44", - "@types/jest": "^26.0.16", - "@types/loader-utils": "^2.0.0", - "@types/prop-types": "^15.7.3", - "@types/tmp": "^0.2.0", + "@storybook/mdx2-csf": "canary", "@types/util-deprecate": "^1.0.0", "babel-loader": "^8.0.0", - "babel-plugin-react-docgen": "^4.2.1", - "cross-spawn": "^7.0.3", - "fs-extra": "^9.0.1", - "jest": "^26.6.3", - "jest-specific-snapshot": "^4.0.0", - "lit-element": "^3.0.2", - "lit-html": "^2.0.2", - "require-from-string": "^2.0.2", - "rxjs": "^6.6.3", - "styled-components": "^5.2.1", - "sveltedoc-parser": "4.1.0", - "tmp": "^0.2.1", - "tslib": "^2.1.0", - "vue": "^2.6.10", - "web-component-analyzer": "^1.1.6", - "webpack": "4", - "zone.js": "^0.11.3" + "webpack": "4" + }, + "peerDependencies": { + "@storybook/mdx2-csf": "*", + "react": "^16.8.0 || ^17.0.0", + "react-dom": "^16.8.0 || ^17.0.0", + "webpack": "*" }, "peerDependenciesMeta": { - "@storybook/angular": { - "optional": true - }, "@storybook/builder-webpack4": { "optional": true }, "@storybook/builder-webpack5": { "optional": true }, - "@storybook/html": { - "optional": true - }, - "@storybook/manager-webpack4": { - "optional": true - }, - "@storybook/manager-webpack5": { - "optional": true - }, - "@storybook/react": { - "optional": true - }, - "@storybook/vue": { - "optional": true - }, - "@storybook/vue3": { - "optional": true - }, - "@storybook/web-components": { - "optional": true - }, - "lit": { - "optional": true - }, - "lit-html": { + "@storybook/mdx2-csf": { "optional": true }, "react": { @@ -183,15 +111,6 @@ "react-dom": { "optional": true }, - "svelte": { - "optional": true - }, - "sveltedoc-parser": { - "optional": true - }, - "vue": { - "optional": true - }, "webpack": { "optional": true } @@ -199,7 +118,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Docs", diff --git a/addons/docs/preset.js b/addons/docs/preset.js index dfce06bdfda4..c318823dc33a 100644 --- a/addons/docs/preset.js +++ b/addons/docs/preset.js @@ -1,16 +1,16 @@ -const getFrameworkPresets = (framework) => { - try { - return [require.resolve(`./dist/cjs/frameworks/${framework}/preset`)]; - } catch (err) { - // there is no custom config for the user's framework, do nothing - return []; - } -}; +const { findDistEsm } = require('@storybook/core-common'); +const { webpack } = require('./dist/cjs/frameworks/common/preset'); + +function managerEntries(entry = [], options) { + return [...entry, findDistEsm(__dirname, 'register')]; +} + +function config(entry = [], options = {}) { + return [findDistEsm(__dirname, 'frameworks/common/config'), ...entry]; +} -module.exports = (storybookOptions, presetOptions) => { - return [ - { name: require.resolve('./common-preset'), options: presetOptions }, - { name: require.resolve('./dist/cjs/frameworks/common/preset'), options: presetOptions }, - ...getFrameworkPresets(storybookOptions.framework), - ]; +module.exports = { + webpack, + managerEntries, + config, }; diff --git a/addons/docs/src/blocks/ArgsTable.tsx b/addons/docs/src/blocks/ArgsTable.tsx index 8efc0c5ecfd3..56f0e8edba3a 100644 --- a/addons/docs/src/blocks/ArgsTable.tsx +++ b/addons/docs/src/blocks/ArgsTable.tsx @@ -7,6 +7,7 @@ import { SortType, TabbedArgsTable, } from '@storybook/components'; +import { ArgTypesExtractor } from '@storybook/docs-tools'; import { addons } from '@storybook/addons'; import { filterArgTypes, PropDescriptor } from '@storybook/store'; import Events from '@storybook/core-events'; @@ -15,7 +16,6 @@ import { StrictArgTypes, Args } from '@storybook/csf'; import { DocsContext, DocsContextProps } from './DocsContext'; import { Component, CURRENT_SELECTION, PRIMARY_STORY } from './types'; import { getComponentName } from './utils'; -import { ArgTypesExtractor } from '../lib/docgen/types'; import { lookupStoryId } from './Story'; import { useStory } from './useStory'; diff --git a/addons/docs/src/blocks/Description.tsx b/addons/docs/src/blocks/Description.tsx index 2f92c105e160..2c55f10e740a 100644 --- a/addons/docs/src/blocks/Description.tsx +++ b/addons/docs/src/blocks/Description.tsx @@ -1,8 +1,9 @@ import React, { FunctionComponent, useContext } from 'react'; import { Description, DescriptionProps as PureDescriptionProps } from '@storybook/components'; +import { str } from '@storybook/docs-tools'; + import { DocsContext, DocsContextProps } from './DocsContext'; import { Component, CURRENT_SELECTION } from './types'; -import { str } from '../lib/docgen'; export enum DescriptionType { INFO = 'info', diff --git a/addons/docs/src/blocks/DocsContext.ts b/addons/docs/src/blocks/DocsContext.ts index e539f2739c6e..c902d8fb9b2f 100644 --- a/addons/docs/src/blocks/DocsContext.ts +++ b/addons/docs/src/blocks/DocsContext.ts @@ -1,8 +1,8 @@ import { Context, createContext } from 'react'; import { window as globalWindow } from 'global'; -import { DocsContextProps } from '@storybook/preview-web'; -import { AnyFramework } from '@storybook/csf'; +import type { DocsContextProps } from '@storybook/preview-web'; +import type { AnyFramework } from '@storybook/csf'; export type { DocsContextProps }; diff --git a/addons/docs/src/blocks/Story.tsx b/addons/docs/src/blocks/Story.tsx index 879f8ec59b75..e61fcb321512 100644 --- a/addons/docs/src/blocks/Story.tsx +++ b/addons/docs/src/blocks/Story.tsx @@ -130,25 +130,8 @@ const Story: FunctionComponent = (props) => { useEffect(() => { let cleanup: () => void; if (story && storyRef.current) { - const { componentId, id, title, name } = story; - const renderContext = { - componentId, - title, - kind: title, - id, - name, - story: name, - // TODO what to do when these fail? - showMain: () => {}, - showError: () => {}, - showException: () => {}, - }; - cleanup = context.renderStoryToElement({ - story, - renderContext, - element: storyRef.current as HTMLElement, - viewMode: 'docs', - }); + const element = storyRef.current as HTMLElement; + cleanup = context.renderStoryToElement(story, element); setShowLoader(false); } return () => cleanup && cleanup(); diff --git a/addons/docs/src/blocks/enhanceSource.test.ts b/addons/docs/src/blocks/enhanceSource.test.ts index 006463374fd0..13afaadc40c4 100644 --- a/addons/docs/src/blocks/enhanceSource.test.ts +++ b/addons/docs/src/blocks/enhanceSource.test.ts @@ -1,4 +1,4 @@ -import { StoryContext } from '@storybook/addons'; +import type { StoryContext } from '@storybook/addons'; import { enhanceSource } from './enhanceSource'; const emptyContext: StoryContext = { diff --git a/addons/docs/src/blocks/enhanceSource.ts b/addons/docs/src/blocks/enhanceSource.ts index 34fe08ffff62..3cfb4890dc06 100644 --- a/addons/docs/src/blocks/enhanceSource.ts +++ b/addons/docs/src/blocks/enhanceSource.ts @@ -1,5 +1,6 @@ -import { Parameters } from '@storybook/addons'; -import { Story, combineParameters } from '@storybook/store'; +import type { Parameters } from '@storybook/addons'; +import type { Story } from '@storybook/store'; +import { combineParameters } from '@storybook/store'; // ============================================================ // START @storybook/source-loader/extract-source diff --git a/addons/docs/src/blocks/useStory.ts b/addons/docs/src/blocks/useStory.ts index 86bab14ea429..6a58d0472262 100644 --- a/addons/docs/src/blocks/useStory.ts +++ b/addons/docs/src/blocks/useStory.ts @@ -1,6 +1,6 @@ import { useState, useEffect } from 'react'; -import { StoryId, AnyFramework } from '@storybook/csf'; -import { Story } from '@storybook/store'; +import type { StoryId, AnyFramework } from '@storybook/csf'; +import type { Story } from '@storybook/store'; import { DocsContextProps } from './DocsContext'; diff --git a/addons/docs/src/frameworks/common/config.ts b/addons/docs/src/frameworks/common/config.ts index f5ec177688f9..20632390005a 100644 --- a/addons/docs/src/frameworks/common/config.ts +++ b/addons/docs/src/frameworks/common/config.ts @@ -1,5 +1,3 @@ -import { enhanceArgTypes } from './enhanceArgTypes'; - export const parameters = { docs: { inlineStories: false, @@ -8,5 +6,3 @@ export const parameters = { iframeHeight: 100, }, }; - -export const argTypesEnhancers = [enhanceArgTypes]; diff --git a/addons/docs/src/frameworks/common/preset.ts b/addons/docs/src/frameworks/common/preset.ts index 865836a6702a..ab7f02c19766 100644 --- a/addons/docs/src/frameworks/common/preset.ts +++ b/addons/docs/src/frameworks/common/preset.ts @@ -1,10 +1,10 @@ import path from 'path'; import remarkSlug from 'remark-slug'; import remarkExternalLinks from 'remark-external-links'; +import global from 'global'; -// @ts-ignore -import { createCompiler } from '@storybook/csf-tools/mdx'; import type { BuilderConfig, Options } from '@storybook/core-common'; +import { logger } from '@storybook/node-logger'; // for frameworks that are not working with react, we need to configure // the jsx to transpile mdx, for now there will be a flag for that @@ -34,9 +34,9 @@ function createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }: Bab export async function webpack( webpackConfig: any = {}, options: Options & - BabelParams & { sourceLoaderOptions: any; transcludeMarkdown: boolean } & Parameters< + BabelParams & { sourceLoaderOptions: any; transcludeMarkdown: boolean } /* & Parameters< typeof createCompiler - >[0] + >[0] */ ) { const { builder = 'webpack4' } = await options.presets.apply<{ builder: BuilderConfig; @@ -62,9 +62,17 @@ export async function webpack( } = options; const mdxLoaderOptions = { + skipCsf: true, remarkPlugins: [remarkSlug, remarkExternalLinks], }; + const mdxVersion = global.FEATURES?.previewMdx2 ? 'MDX2' : 'MDX1'; + logger.info(`Addon-docs: using ${mdxVersion}`); + + const mdxLoader = global.FEATURES?.previewMdx2 + ? require.resolve('@storybook/mdx2-csf/loader') + : require.resolve('@storybook/mdx1-csf/loader'); + // set `sourceLoaderOptions` to `null` to disable for manual configuration const sourceLoader = sourceLoaderOptions ? [ @@ -89,7 +97,7 @@ export async function webpack( options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }), }, { - loader: require.resolve('@mdx-js/loader'), + loader: mdxLoader, options: mdxLoaderOptions, }, ], @@ -123,11 +131,7 @@ export async function webpack( options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }), }, { - loader: require.resolve('@mdx-js/loader'), - options: { - compilers: [createCompiler(options)], - ...mdxLoaderOptions, - }, + loader: mdxLoader, }, ], }, @@ -140,7 +144,7 @@ export async function webpack( options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }), }, { - loader: require.resolve('@mdx-js/loader'), + loader: mdxLoader, options: mdxLoaderOptions, }, ], diff --git a/addons/docs/src/lib/index.ts b/addons/docs/src/lib/index.ts deleted file mode 100644 index 04bca77e0dec..000000000000 --- a/addons/docs/src/lib/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './utils'; diff --git a/addons/essentials/package.json b/addons/essentials/package.json index 6f0867a9de69..cd1101e710c4 100644 --- a/addons/essentials/package.json +++ b/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", @@ -39,25 +39,25 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addon-actions": "6.5.0-alpha.42", - "@storybook/addon-backgrounds": "6.5.0-alpha.42", - "@storybook/addon-controls": "6.5.0-alpha.42", - "@storybook/addon-docs": "6.5.0-alpha.42", - "@storybook/addon-measure": "6.5.0-alpha.42", - "@storybook/addon-outline": "6.5.0-alpha.42", - "@storybook/addon-toolbars": "6.5.0-alpha.42", - "@storybook/addon-viewport": "6.5.0-alpha.42", - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/api": "6.5.0-alpha.42", - "@storybook/core-common": "6.5.0-alpha.42", - "@storybook/node-logger": "6.5.0-alpha.42", + "@storybook/addon-actions": "6.5.0-alpha.48", + "@storybook/addon-backgrounds": "6.5.0-alpha.48", + "@storybook/addon-controls": "6.5.0-alpha.48", + "@storybook/addon-docs": "6.5.0-alpha.48", + "@storybook/addon-measure": "6.5.0-alpha.48", + "@storybook/addon-outline": "6.5.0-alpha.48", + "@storybook/addon-toolbars": "6.5.0-alpha.48", + "@storybook/addon-viewport": "6.5.0-alpha.48", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/api": "6.5.0-alpha.48", + "@storybook/core-common": "6.5.0-alpha.48", + "@storybook/node-logger": "6.5.0-alpha.48", "core-js": "^3.8.2", "regenerator-runtime": "^0.13.7", "ts-dedent": "^2.0.0" }, "devDependencies": { "@babel/core": "^7.12.10", - "@storybook/vue": "6.5.0-alpha.42", + "@storybook/vue": "6.5.0-alpha.48", "@types/jest": "^26.0.16", "@types/webpack-env": "^1.16.0" }, @@ -120,6 +120,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/index.js" } diff --git a/addons/essentials/src/index.ts b/addons/essentials/src/index.ts index 6a3fc4dbbf84..7441e9fb9160 100644 --- a/addons/essentials/src/index.ts +++ b/addons/essentials/src/index.ts @@ -4,9 +4,14 @@ import { serverRequire } from '@storybook/core-common'; interface PresetOptions { configDir?: string; - backgrounds?: any; - viewport?: any; - docs?: any; + docs?: boolean; + controls?: boolean; + actions?: boolean; + backgrounds?: boolean; + viewport?: boolean; + toolbars?: boolean; + measure?: boolean; + outline?: boolean; } const requireMain = (configDir: string) => { diff --git a/addons/interactions/package.json b/addons/interactions/package.json index c264b85ec1ea..5e45317eb2bc 100644 --- a/addons/interactions/package.json +++ b/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", @@ -41,14 +41,14 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/api": "6.5.0-alpha.42", - "@storybook/components": "6.5.0-alpha.42", - "@storybook/core-common": "6.5.0-alpha.42", - "@storybook/core-events": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/api": "6.5.0-alpha.48", + "@storybook/components": "6.5.0-alpha.48", + "@storybook/core-common": "6.5.0-alpha.48", + "@storybook/core-events": "6.5.0-alpha.48", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/instrumenter": "6.5.0-alpha.42", - "@storybook/theming": "6.5.0-alpha.42", + "@storybook/instrumenter": "6.5.0-alpha.48", + "@storybook/theming": "6.5.0-alpha.48", "core-js": "^3.8.2", "global": "^4.4.0", "jest-mock": "^27.0.6", @@ -75,7 +75,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Interactions", diff --git a/addons/interactions/src/preset/argsEnhancers.ts b/addons/interactions/src/preset/argsEnhancers.ts index 57d7d8d4106d..a6f1b90c78cf 100644 --- a/addons/interactions/src/preset/argsEnhancers.ts +++ b/addons/interactions/src/preset/argsEnhancers.ts @@ -1,8 +1,12 @@ -import { Args, addons } from '@storybook/addons'; +import { addons } from '@storybook/addons'; +import type { Args } from '@storybook/addons'; import { FORCE_REMOUNT, STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events'; -import { AnyFramework, ArgsEnhancer } from '@storybook/csf'; +import type { AnyFramework, ArgsEnhancer } from '@storybook/csf'; import { instrument } from '@storybook/instrumenter'; -import { fn } from 'jest-mock'; +import { ModuleMocker } from 'jest-mock'; + +const JestMock = new ModuleMocker(global); +const fn = JestMock.fn.bind(JestMock); // Aliasing `fn` to `action` here, so we get a more descriptive label in the UI. const { action } = instrument({ action: fn }, { retain: true }); diff --git a/addons/jest/package.json b/addons/jest/package.json index e0f97f96c91a..a91084a8a3ee 100644 --- a/addons/jest/package.json +++ b/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "React storybook addon that show component jest report", "keywords": [ "addon", @@ -47,11 +47,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/api": "6.5.0-alpha.42", - "@storybook/components": "6.5.0-alpha.42", - "@storybook/core-events": "6.5.0-alpha.42", - "@storybook/theming": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/api": "6.5.0-alpha.48", + "@storybook/components": "6.5.0-alpha.48", + "@storybook/core-events": "6.5.0-alpha.48", + "@storybook/theming": "6.5.0-alpha.48", "core-js": "^3.8.2", "global": "^4.4.0", "react-sizeme": "^3.0.1", @@ -76,7 +76,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Jest", diff --git a/addons/links/package.json b/addons/links/package.json index 14c5c8bd07fd..520adeba992f 100644 --- a/addons/links/package.json +++ b/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", @@ -41,11 +41,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/client-logger": "6.5.0-alpha.42", - "@storybook/core-events": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/client-logger": "6.5.0-alpha.48", + "@storybook/core-events": "6.5.0-alpha.48", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/router": "6.5.0-alpha.42", + "@storybook/router": "6.5.0-alpha.48", "@types/qs": "^6.9.5", "core-js": "^3.8.2", "global": "^4.4.0", @@ -72,7 +72,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Links", diff --git a/addons/links/src/preview.ts b/addons/links/src/preview.ts index 0a49eff5a878..3082bedc09bc 100644 --- a/addons/links/src/preview.ts +++ b/addons/links/src/preview.ts @@ -2,7 +2,8 @@ import global from 'global'; import qs from 'qs'; import { addons, makeDecorator } from '@storybook/addons'; import { STORY_CHANGED, SELECT_STORY } from '@storybook/core-events'; -import { toId, StoryId, StoryName, ComponentTitle } from '@storybook/csf'; +import type { StoryId, StoryName, ComponentTitle } from '@storybook/csf'; +import { toId } from '@storybook/csf'; import { PARAM_KEY } from './constants'; const { document, HTMLElement } = global; diff --git a/addons/measure/package.json b/addons/measure/package.json index 213b06d80f13..e029d8d54283 100644 --- a/addons/measure/package.json +++ b/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", @@ -44,11 +44,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/api": "6.5.0-alpha.42", - "@storybook/client-logger": "6.5.0-alpha.42", - "@storybook/components": "6.5.0-alpha.42", - "@storybook/core-events": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/api": "6.5.0-alpha.48", + "@storybook/client-logger": "6.5.0-alpha.48", + "@storybook/components": "6.5.0-alpha.48", + "@storybook/core-events": "6.5.0-alpha.48", "@storybook/csf": "0.0.2--canary.87bc651.0", "core-js": "^3.8.2", "global": "^4.4.0" @@ -71,7 +71,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Measure", diff --git a/addons/measure/src/withMeasure.ts b/addons/measure/src/withMeasure.ts index b8c78b7109fd..867ac58f1728 100644 --- a/addons/measure/src/withMeasure.ts +++ b/addons/measure/src/withMeasure.ts @@ -1,6 +1,6 @@ /* eslint-env browser */ import { useEffect } from '@storybook/addons'; -import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf'; +import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf'; import { drawSelectedElement } from './box-model/visualizer'; import { init, rescale, destroy } from './box-model/canvas'; import { deepElementFromPoint } from './util'; diff --git a/addons/outline/package.json b/addons/outline/package.json index 162d935cf97d..3782ede34019 100644 --- a/addons/outline/package.json +++ b/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", @@ -47,11 +47,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/api": "6.5.0-alpha.42", - "@storybook/client-logger": "6.5.0-alpha.42", - "@storybook/components": "6.5.0-alpha.42", - "@storybook/core-events": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/api": "6.5.0-alpha.48", + "@storybook/client-logger": "6.5.0-alpha.48", + "@storybook/components": "6.5.0-alpha.48", + "@storybook/core-events": "6.5.0-alpha.48", "@storybook/csf": "0.0.2--canary.87bc651.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -76,7 +76,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Outline", diff --git a/addons/outline/src/withOutline.ts b/addons/outline/src/withOutline.ts index 818ce5acee56..05ca6d45a5aa 100644 --- a/addons/outline/src/withOutline.ts +++ b/addons/outline/src/withOutline.ts @@ -1,5 +1,5 @@ import { useMemo, useEffect } from '@storybook/addons'; -import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf'; +import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf'; import { clearStyles, addOutlineStyles } from './helpers'; import { PARAM_KEY } from './constants'; diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json index 805d94fa3d7c..b7ca7617f96f 100644 --- a/addons/storyshots/storyshots-core/package.json +++ b/addons/storyshots/storyshots-core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Take a code snapshot of every story automatically with Jest", "keywords": [ "addon", @@ -45,12 +45,12 @@ }, "dependencies": { "@jest/transform": "^26.6.2", - "@storybook/addons": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", "@storybook/babel-plugin-require-context-hook": "1.0.1", - "@storybook/client-api": "6.5.0-alpha.42", - "@storybook/core": "6.5.0-alpha.42", - "@storybook/core-client": "6.5.0-alpha.42", - "@storybook/core-common": "6.5.0-alpha.42", + "@storybook/client-api": "6.5.0-alpha.48", + "@storybook/core": "6.5.0-alpha.48", + "@storybook/core-client": "6.5.0-alpha.48", + "@storybook/core-common": "6.5.0-alpha.48", "@storybook/csf": "0.0.2--canary.87bc651.0", "@types/glob": "^7.1.3", "@types/jest": "^26.0.16", @@ -69,11 +69,11 @@ "devDependencies": { "@angular/core": "^11.2.0", "@angular/platform-browser-dynamic": "^11.2.0", - "@storybook/addon-docs": "6.5.0-alpha.42", - "@storybook/angular": "6.5.0-alpha.42", - "@storybook/react": "6.5.0-alpha.42", - "@storybook/vue": "6.5.0-alpha.42", - "@storybook/vue3": "6.5.0-alpha.42", + "@storybook/addon-docs": "6.5.0-alpha.48", + "@storybook/angular": "6.5.0-alpha.48", + "@storybook/react": "6.5.0-alpha.48", + "@storybook/vue": "6.5.0-alpha.48", + "@storybook/vue3": "6.5.0-alpha.48", "babel-loader": "^8.0.0", "enzyme": "^3.11.0", "enzyme-to-json": "^3.6.1", @@ -151,7 +151,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "storybook": { "displayName": "Storyshots", "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png", diff --git a/addons/storyshots/storyshots-core/src/frameworks/Loader.ts b/addons/storyshots/storyshots-core/src/frameworks/Loader.ts index 43e0adbaf5b1..20ce598c423c 100644 --- a/addons/storyshots/storyshots-core/src/frameworks/Loader.ts +++ b/addons/storyshots/storyshots-core/src/frameworks/Loader.ts @@ -1,8 +1,8 @@ -import { AnyFramework } from '@storybook/csf'; -import { ClientStoryApi, Loadable } from '@storybook/addons'; +import type { AnyFramework } from '@storybook/csf'; +import type { ClientStoryApi, Loadable } from '@storybook/addons'; import { ClientApi as ClientApiClass } from '@storybook/client-api'; -import { StoryshotsOptions } from '../api/StoryshotsOptions'; -import { SupportedFramework } from './SupportedFramework'; +import type { StoryshotsOptions } from '../api/StoryshotsOptions'; +import type { SupportedFramework } from './SupportedFramework'; export type RenderTree = (story: any, context?: any, options?: any) => any; diff --git a/addons/storyshots/storyshots-core/src/frameworks/configure.ts b/addons/storyshots/storyshots-core/src/frameworks/configure.ts index 8561768010b5..ec8ce9be30dd 100644 --- a/addons/storyshots/storyshots-core/src/frameworks/configure.ts +++ b/addons/storyshots/storyshots-core/src/frameworks/configure.ts @@ -1,17 +1,18 @@ import fs from 'fs'; import path from 'path'; -import { - toRequireContext, - StoriesEntry, - normalizeStoriesEntry, - NormalizedStoriesSpecifier, -} from '@storybook/core-common'; +import type { NormalizedStoriesSpecifier, StoriesEntry } from '@storybook/core-common'; +import { toRequireContext, normalizeStoriesEntry } from '@storybook/core-common'; import registerRequireContextHook from '@storybook/babel-plugin-require-context-hook/register'; import global from 'global'; -import { AnyFramework, ArgsEnhancer, ArgTypesEnhancer, DecoratorFunction } from '@storybook/csf'; +import type { + AnyFramework, + ArgsEnhancer, + ArgTypesEnhancer, + DecoratorFunction, +} from '@storybook/csf'; import { ClientApi } from './Loader'; -import { StoryshotsOptions } from '../api/StoryshotsOptions'; +import type { StoryshotsOptions } from '../api/StoryshotsOptions'; registerRequireContextHook(); diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json index 5aaaecdd75d4..f59f5ecbd0e6 100644 --- a/addons/storyshots/storyshots-puppeteer/package.json +++ b/addons/storyshots/storyshots-puppeteer/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots-puppeteer", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Image snapshots addition to StoryShots based on puppeteer", "keywords": [ "addon", @@ -42,7 +42,7 @@ "dependencies": { "@axe-core/puppeteer": "^4.2.0", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/node-logger": "6.5.0-alpha.42", + "@storybook/node-logger": "6.5.0-alpha.48", "@types/jest-image-snapshot": "^4.1.3", "core-js": "^3.8.2", "jest-image-snapshot": "^4.3.0", @@ -53,7 +53,7 @@ "@types/puppeteer": "^5.4.0" }, "peerDependencies": { - "@storybook/addon-storyshots": "6.5.0-alpha.42", + "@storybook/addon-storyshots": "6.5.0-alpha.48", "puppeteer": "^2.0.0 || ^3.0.0" }, "peerDependenciesMeta": { @@ -64,5 +64,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351" + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762" } diff --git a/addons/storysource/package.json b/addons/storysource/package.json index 5fe5ae4ae8ce..23d2b85562a8 100644 --- a/addons/storysource/package.json +++ b/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", @@ -41,13 +41,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/api": "6.5.0-alpha.42", - "@storybook/client-logger": "6.5.0-alpha.42", - "@storybook/components": "6.5.0-alpha.42", - "@storybook/router": "6.5.0-alpha.42", - "@storybook/source-loader": "6.5.0-alpha.42", - "@storybook/theming": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/api": "6.5.0-alpha.48", + "@storybook/client-logger": "6.5.0-alpha.48", + "@storybook/components": "6.5.0-alpha.48", + "@storybook/router": "6.5.0-alpha.48", + "@storybook/source-loader": "6.5.0-alpha.48", + "@storybook/theming": "6.5.0-alpha.48", "core-js": "^3.8.2", "estraverse": "^5.2.0", "loader-utils": "^2.0.0", @@ -75,7 +75,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Storysource", diff --git a/addons/toolbars/package.json b/addons/toolbars/package.json index 7c3f59cf8456..1965b8ade623 100644 --- a/addons/toolbars/package.json +++ b/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", @@ -45,10 +45,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/api": "6.5.0-alpha.42", - "@storybook/components": "6.5.0-alpha.42", - "@storybook/theming": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/api": "6.5.0-alpha.48", + "@storybook/components": "6.5.0-alpha.48", + "@storybook/theming": "6.5.0-alpha.48", "core-js": "^3.8.2", "regenerator-runtime": "^0.13.7" }, @@ -67,7 +67,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/register.js", "storybook": { "displayName": "Toolbars", diff --git a/addons/toolbars/src/types.ts b/addons/toolbars/src/types.ts index ec64b06396ea..372302a33e5c 100644 --- a/addons/toolbars/src/types.ts +++ b/addons/toolbars/src/types.ts @@ -1,5 +1,5 @@ -import { IconsProps } from '@storybook/components'; -import { ArgType } from '@storybook/api'; +import type { IconsProps } from '@storybook/components'; +import type { ArgType } from '@storybook/api'; export type ToolbarShortcutType = 'next' | 'previous' | 'reset'; diff --git a/addons/viewport/package.json b/addons/viewport/package.json index eacb608e2d72..820477d5792e 100644 --- a/addons/viewport/package.json +++ b/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", @@ -42,12 +42,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/api": "6.5.0-alpha.42", - "@storybook/client-logger": "6.5.0-alpha.42", - "@storybook/components": "6.5.0-alpha.42", - "@storybook/core-events": "6.5.0-alpha.42", - "@storybook/theming": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/api": "6.5.0-alpha.48", + "@storybook/client-logger": "6.5.0-alpha.48", + "@storybook/components": "6.5.0-alpha.48", + "@storybook/core-events": "6.5.0-alpha.48", + "@storybook/theming": "6.5.0-alpha.48", "core-js": "^3.8.2", "global": "^4.4.0", "memoizerific": "^1.11.3", @@ -69,7 +69,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/preview.js", "storybook": { "displayName": "Viewport", diff --git a/addons/viewport/src/shortcuts.ts b/addons/viewport/src/shortcuts.ts index 34cbb8db0fa2..779726eb9e23 100644 --- a/addons/viewport/src/shortcuts.ts +++ b/addons/viewport/src/shortcuts.ts @@ -1,4 +1,4 @@ -import { API } from '@storybook/api'; +import type { API } from '@storybook/api'; import { ADDON_ID } from './constants'; const getCurrentViewportIndex = (viewportsKeys: string[], current: string): number => diff --git a/app/angular/package.json b/app/angular/package.json index 1ade1d069311..7963217c19aa 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -45,15 +45,17 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/api": "6.5.0-alpha.42", - "@storybook/core": "6.5.0-alpha.42", - "@storybook/core-common": "6.5.0-alpha.42", - "@storybook/core-events": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/api": "6.5.0-alpha.48", + "@storybook/client-logger": "6.5.0-alpha.48", + "@storybook/core": "6.5.0-alpha.48", + "@storybook/core-common": "6.5.0-alpha.48", + "@storybook/core-events": "6.5.0-alpha.48", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/node-logger": "6.5.0-alpha.42", + "@storybook/docs-tools": "6.5.0-alpha.48", + "@storybook/node-logger": "6.5.0-alpha.48", "@storybook/semver": "^7.3.2", - "@storybook/store": "6.5.0-alpha.42", + "@storybook/store": "6.5.0-alpha.48", "@types/node": "^14.14.20 || ^16.0.0", "@types/react": "^16.14.23", "@types/react-dom": "^16.9.14", @@ -63,15 +65,17 @@ "find-up": "^5.0.0", "fork-ts-checker-webpack-plugin": "^4.1.6", "global": "^4.4.0", + "nanoid": "^3.1.23", + "p-limit": "^3.1.0", "postcss": "^7.0.36", "postcss-loader": "^4.2.0", + "prettier": ">=2.2.1 <=2.3.0", "raw-loader": "^4.0.2", "react": "^16.14.0", "react-dom": "^16.14.0", "read-pkg-up": "^7.0.1", "regenerator-runtime": "^0.13.7", "sass-loader": "^10.1.0", - "strip-json-comments": "3.1.1", "telejson": "^5.3.3", "ts-dedent": "^2.0.0", "ts-loader": "^8.0.14", @@ -93,10 +97,12 @@ "@angular/platform-browser-dynamic": "^11.2.14", "@nrwl/workspace": "^11.6.3", "@types/autoprefixer": "^9.7.2", - "@types/jest": "^26.0.16", + "@types/tmp": "^0.2.3", + "cross-spawn": "^7.0.3", "jest": "^26.6.3", "jest-preset-angular": "^8.3.2", - "ts-jest": "^26.4.4" + "jest-specific-snapshot": "^4.0.0", + "tmp": "^0.2.1" }, "peerDependencies": { "@angular-devkit/architect": ">=0.8.9", @@ -131,5 +137,5 @@ "access": "public" }, "builders": "dist/ts3.9/builders/builders.json", - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351" + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762" } diff --git a/app/angular/src/builders/build-storybook/index.ts b/app/angular/src/builders/build-storybook/index.ts index 6108034e9a34..1995b4efa568 100644 --- a/app/angular/src/builders/build-storybook/index.ts +++ b/app/angular/src/builders/build-storybook/index.ts @@ -7,17 +7,17 @@ import { } from '@angular-devkit/architect'; import { JsonObject } from '@angular-devkit/core'; import { from, Observable, of, throwError } from 'rxjs'; -import { CLIOptions } from '@storybook/core-common'; +import type { CLIOptions } from '@storybook/core-common'; import { catchError, map, mapTo, switchMap } from 'rxjs/operators'; import { sync as findUpSync } from 'find-up'; - -// eslint-disable-next-line import/no-extraneous-dependencies -import buildStandalone, { StandaloneOptions } from '@storybook/angular/standalone'; import { BrowserBuilderOptions, ExtraEntryPoint, StylePreprocessorOptions, } from '@angular-devkit/build-angular'; + +// eslint-disable-next-line import/no-extraneous-dependencies +import buildStandalone, { StandaloneOptions } from '@storybook/angular/standalone'; import { runCompodoc } from '../utils/run-compodoc'; import { buildStandaloneErrorHandler } from '../utils/build-standalone-errors-handler'; diff --git a/app/angular/src/builders/start-storybook/index.ts b/app/angular/src/builders/start-storybook/index.ts index 4f80db9866b2..ef3fe61cfa47 100644 --- a/app/angular/src/builders/start-storybook/index.ts +++ b/app/angular/src/builders/start-storybook/index.ts @@ -12,7 +12,7 @@ import { StylePreprocessorOptions, } from '@angular-devkit/build-angular'; import { from, Observable, of } from 'rxjs'; -import { CLIOptions } from '@storybook/core-common'; +import type { CLIOptions } from '@storybook/core-common'; import { map, switchMap, mapTo } from 'rxjs/operators'; import { sync as findUpSync } from 'find-up'; diff --git a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot b/app/angular/src/client/docs/__testfixtures__/doc-button/argtypes.snapshot similarity index 99% rename from addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot rename to app/angular/src/client/docs/__testfixtures__/doc-button/argtypes.snapshot index bc9d29fc3531..d3625f14e38f 100644 --- a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot +++ b/app/angular/src/client/docs/__testfixtures__/doc-button/argtypes.snapshot @@ -207,7 +207,7 @@ Sets the button to a disabled state.", }, "type": Object { "required": true, - "summary": "[]", + "summary": "T[]", }, }, "type": Object { diff --git a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc-posix.snapshot b/app/angular/src/client/docs/__testfixtures__/doc-button/compodoc-posix.snapshot similarity index 99% rename from addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc-posix.snapshot rename to app/angular/src/client/docs/__testfixtures__/doc-button/compodoc-posix.snapshot index ea236ef49ba8..dbb2d4c08edf 100644 --- a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc-posix.snapshot +++ b/app/angular/src/client/docs/__testfixtures__/doc-button/compodoc-posix.snapshot @@ -227,7 +227,7 @@ Sets the button to a disabled state.", "deprecationMessage": "", "line": 195, "name": "item", - "type": "[]", + "type": "T[]", }, Object { "decorators": Array [], diff --git a/app/angular/src/client/docs/__testfixtures__/doc-button/compodoc-undefined.snapshot b/app/angular/src/client/docs/__testfixtures__/doc-button/compodoc-undefined.snapshot new file mode 100644 index 000000000000..1bddf9b75503 --- /dev/null +++ b/app/angular/src/client/docs/__testfixtures__/doc-button/compodoc-undefined.snapshot @@ -0,0 +1,1326 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`angular component properties doc-button 1`] = ` +Object { + "classes": Array [], + "components": Array [ + Object { + "accessors": Object { + "inputValue": Object { + "getSignature": Object { + "description": "

Getter for inputValue.

+", + "line": 115, + "name": "inputValue", + "rawdescription": " +Getter for \`inputValue\`.", + "returnType": "", + "type": "", + }, + "name": "inputValue", + "setSignature": Object { + "args": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "value", + "type": "string", + }, + ], + "deprecated": false, + "deprecationMessage": "", + "description": "

Setter for inputValue that is also an @Input.

+", + "jsdoctags": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "value", + "tagName": Object { + "text": "param", + }, + "type": "string", + }, + ], + "line": 110, + "name": "inputValue", + "rawdescription": " +Setter for \`inputValue\` that is also an \`@Input\`.", + "returnType": "void", + "type": "void", + }, + }, + "item": Object { + "name": "item", + "setSignature": Object { + "args": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "item", + "type": "T[]", + }, + ], + "deprecated": false, + "deprecationMessage": "", + "jsdoctags": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "item", + "tagName": Object { + "text": "param", + }, + "type": "T[]", + }, + ], + "line": 195, + "name": "item", + "returnType": "void", + "type": "void", + }, + }, + "value": Object { + "getSignature": Object { + "description": "

Get the private value.

+", + "line": 154, + "name": "value", + "rawdescription": " +Get the private value.", + "returnType": "string | number", + "type": "", + }, + "name": "value", + "setSignature": Object { + "args": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "value", + "type": "string | number", + }, + ], + "deprecated": false, + "deprecationMessage": "", + "description": "

Set the private value.

+", + "jsdoctags": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "value", + "tagName": Object { + "text": "param", + }, + "type": "string | number", + }, + ], + "line": 149, + "name": "value", + "rawdescription": " +Set the private value.", + "returnType": "void", + "type": "void", + }, + }, + }, + "assetsDirs": Array [], + "deprecated": false, + "deprecationMessage": "", + "description": "

This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular.

+

It supports markdown, so you can embed formatted text, +like bold, italic, and inline code.

+
+

How you like dem apples?! It's never been easier to document all your components.

+
+", + "encapsulation": Array [], + "entryComponents": Array [], + "file": "app/angular/src/client/docs/__testfixtures__/doc-button/input.ts", + "hostBindings": Array [ + Object { + "decorators": Array [], + "defaultValue": "false", + "deprecated": false, + "deprecationMessage": "", + "line": 124, + "name": "class.focused", + "type": "boolean", + }, + ], + "hostListeners": Array [ + Object { + "args": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "btn", + "type": "", + }, + ], + "argsDecorator": Array [ + "$event.target", + ], + "deprecated": false, + "deprecationMessage": "", + "line": 120, + "name": "click", + }, + ], + "id": "component-InputComponent-d145da25329b094ee29610c45a9e46387cb39eddb2a67b4c9fadb84bcec76eacd60d131e48d98b2ee5725dedd25f2eb299b704e8e0a34307d6e84f6e57d57044", + "inputs": Array [], + "inputsClass": Array [ + Object { + "decorators": Array [], + "deprecated": false, + "deprecationMessage": "", + "description": "

Specify the accent-type of the button

+", + "line": 56, + "name": "accent", + "rawdescription": " +Specify the accent-type of the button", + "type": "ButtonAccent", + }, + Object { + "decorators": Array [], + "defaultValue": "'secondary'", + "deprecated": false, + "deprecationMessage": "", + "description": "

Appearance style of the button.

+", + "line": 52, + "name": "appearance", + "rawdescription": " +Appearance style of the button.", + "type": "\\"primary\\" | \\"secondary\\"", + }, + Object { + "decorators": Array [], + "deprecated": false, + "deprecationMessage": "", + "description": "

Setter for inputValue that is also an @Input.

+", + "line": 110, + "name": "inputValue", + "rawdescription": " +Setter for \`inputValue\` that is also an \`@Input\`.", + "type": "string", + }, + Object { + "decorators": Array [], + "defaultValue": "false", + "deprecated": false, + "deprecationMessage": "", + "description": "

Sets the button to a disabled state.

+", + "line": 60, + "name": "isDisabled", + "rawdescription": " +Sets the button to a disabled state.", + "type": "boolean", + }, + Object { + "decorators": Array [], + "deprecated": false, + "deprecationMessage": "", + "line": 195, + "name": "item", + "type": "T[]", + }, + Object { + "decorators": Array [], + "deprecated": false, + "deprecationMessage": "", + "description": "

The inner text of the button.

+", + "jsdoctags": Array [ + Object { + "comment": "", + "end": 1525, + "flags": 4227072, + "kind": 325, + "modifierFlagsCache": 0, + "pos": 1512, + "tagName": Object { + "end": 1521, + "escapedText": "required", + "flags": 4227072, + "kind": 79, + "modifierFlagsCache": 0, + "pos": 1513, + "transformFlags": 0, + }, + "transformFlags": 0, + }, + ], + "line": 68, + "name": "label", + "rawdescription": " + +The inner text of the button. + +", + "type": "string", + }, + Object { + "decorators": Array [], + "deprecated": false, + "deprecationMessage": "", + "line": 192, + "name": "showKeyAlias", + "type": "", + }, + Object { + "decorators": Array [], + "defaultValue": "'medium'", + "deprecated": false, + "deprecationMessage": "", + "description": "

Size of the button.

+", + "line": 72, + "name": "size", + "rawdescription": " +Size of the button.", + "type": "ButtonSize", + }, + Object { + "decorators": Array [], + "deprecated": false, + "deprecationMessage": "", + "description": "

Specifies some arbitrary object

+", + "line": 75, + "name": "someDataObject", + "rawdescription": " +Specifies some arbitrary object", + "type": "ISomeInterface", + }, + Object { + "decorators": Array [], + "defaultValue": "false", + "deprecated": true, + "deprecationMessage": "", + "description": "

Some input you shouldn't use.

+", + "jsdoctags": Array [ + Object { + "comment": "", + "end": 1802, + "flags": 4227072, + "kind": 329, + "modifierFlagsCache": 0, + "pos": 1787, + "tagName": Object { + "end": 1798, + "escapedText": "deprecated", + "flags": 4227072, + "kind": 79, + "modifierFlagsCache": 0, + "pos": 1788, + "transformFlags": 0, + }, + "transformFlags": 0, + }, + ], + "line": 83, + "name": "somethingYouShouldNotUse", + "rawdescription": " + +Some input you shouldn't use. + +", + "type": "boolean", + }, + ], + "methodsClass": Array [ + Object { + "args": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "x", + "type": "number", + }, + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "y", + "type": "string | number", + }, + ], + "deprecated": false, + "deprecationMessage": "", + "description": "

An internal calculation method which adds x and y together.

+", + "jsdoctags": Array [ + Object { + "comment": "

Some number you'd like to use.

+", + "deprecated": false, + "deprecationMessage": "", + "name": Object { + "end": 3518, + "escapedText": "x", + "flags": 4227072, + "kind": 79, + "modifierFlagsCache": 0, + "pos": 3517, + "transformFlags": 0, + }, + "tagName": Object { + "end": 3516, + "escapedText": "param", + "flags": 4227072, + "kind": 79, + "modifierFlagsCache": 0, + "pos": 3511, + "transformFlags": 0, + }, + "type": "number", + }, + Object { + "comment": "

Some other number or string you'd like to use, will have parseInt() applied before calculation.

+", + "deprecated": false, + "deprecationMessage": "", + "name": Object { + "end": 3563, + "escapedText": "y", + "flags": 4227072, + "kind": 79, + "modifierFlagsCache": 0, + "pos": 3562, + "transformFlags": 0, + }, + "tagName": Object { + "end": 3561, + "escapedText": "param", + "flags": 4227072, + "kind": 79, + "modifierFlagsCache": 0, + "pos": 3556, + "transformFlags": 0, + }, + "type": "string | number", + }, + ], + "line": 164, + "modifierKind": Array [ + 123, + ], + "name": "calc", + "optional": false, + "rawdescription": " + +An internal calculation method which adds \`x\` and \`y\` together. + +", + "returnType": "number", + "typeParameters": Array [], + }, + Object { + "args": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "btn", + "type": "", + }, + ], + "decorators": Array [ + Object { + "name": "HostListener", + "stringifiedArguments": "'click', ['$event.target']", + }, + ], + "deprecated": false, + "deprecationMessage": "", + "jsdoctags": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "btn", + "tagName": Object { + "text": "param", + }, + "type": "", + }, + ], + "line": 120, + "name": "onClickListener", + "optional": false, + "returnType": "void", + "typeParameters": Array [], + }, + Object { + "args": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "password", + "type": "string", + }, + ], + "deprecated": false, + "deprecationMessage": "", + "description": "

A private method.

+", + "jsdoctags": Array [ + Object { + "comment": "

Some password.

+", + "deprecated": false, + "deprecationMessage": "", + "name": Object { + "end": 4079, + "escapedText": "password", + "flags": 4227072, + "kind": 79, + "modifierFlagsCache": 0, + "pos": 4071, + "transformFlags": 0, + }, + "tagName": Object { + "end": 4070, + "escapedText": "param", + "flags": 4227072, + "kind": 79, + "modifierFlagsCache": 0, + "pos": 4065, + "transformFlags": 0, + }, + "type": "string", + }, + ], + "line": 187, + "modifierKind": Array [ + 121, + ], + "name": "privateMethod", + "optional": false, + "rawdescription": " + +A private method. + +", + "returnType": "void", + "typeParameters": Array [], + }, + Object { + "args": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "id", + "optional": true, + "type": "number", + }, + ], + "deprecated": false, + "deprecationMessage": "", + "description": "

A protected method.

+", + "jsdoctags": Array [ + Object { + "comment": "

Some id.

+", + "deprecated": false, + "deprecationMessage": "", + "name": Object { + "end": 3938, + "escapedText": "id", + "flags": 4227072, + "kind": 79, + "modifierFlagsCache": 0, + "pos": 3936, + "transformFlags": 0, + }, + "optional": true, + "tagName": Object { + "end": 3935, + "escapedText": "param", + "flags": 4227072, + "kind": 79, + "modifierFlagsCache": 0, + "pos": 3930, + "transformFlags": 0, + }, + "type": "number", + }, + ], + "line": 178, + "modifierKind": Array [ + 122, + ], + "name": "protectedMethod", + "optional": false, + "rawdescription": " + +A protected method. + +", + "returnType": "void", + "typeParameters": Array [], + }, + Object { + "args": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "things", + "type": "ISomeInterface", + }, + ], + "deprecated": false, + "deprecationMessage": "", + "description": "

A public method using an interface.

+", + "jsdoctags": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "things", + "tagName": Object { + "text": "param", + }, + "type": "ISomeInterface", + }, + ], + "line": 169, + "modifierKind": Array [ + 123, + ], + "name": "publicMethod", + "optional": false, + "rawdescription": " +A public method using an interface.", + "returnType": "void", + "typeParameters": Array [], + }, + ], + "name": "InputComponent", + "outputs": Array [], + "outputsClass": Array [ + Object { + "defaultValue": "new EventEmitter()", + "deprecated": false, + "deprecationMessage": "", + "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, + "name": "onClick", + "rawdescription": " + +Handler to be called when the button is clicked by a user. + +Will also block the emission of the event if \`isDisabled\` is true. +", + "type": "EventEmitter", + }, + ], + "propertiesClass": Array [ + Object { + "defaultValue": "'some value'", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "line": 106, + "modifierKind": Array [ + 121, + ], + "name": "_inputValue", + "optional": false, + "type": "string", + }, + Object { + "defaultValue": "'Private hello'", + "deprecated": false, + "deprecationMessage": "", + "description": "

Private value.

+", + "line": 146, + "modifierKind": Array [ + 121, + ], + "name": "_value", + "optional": false, + "rawdescription": " +Private value.", + "type": "string", + }, + Object { + "decorators": Array [ + Object { + "name": "ViewChild", + "stringifiedArguments": "'buttonRef', {static: false}", + }, + ], + "deprecated": false, + "deprecationMessage": "", + "description": "", + "line": 48, + "name": "buttonRef", + "optional": false, + "type": "ElementRef", + }, + Object { + "decorators": Array [ + Object { + "name": "HostBinding", + "stringifiedArguments": "'class.focused'", + }, + ], + "defaultValue": "false", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "line": 124, + "name": "focus", + "optional": false, + "type": "", + }, + Object { + "defaultValue": "'Public hello'", + "deprecated": false, + "deprecationMessage": "", + "description": "

Public value.

+", + "line": 143, + "modifierKind": Array [ + 123, + ], + "name": "internalProperty", + "optional": false, + "rawdescription": " +Public value.", + "type": "string", + }, + Object { + "deprecated": false, + "deprecationMessage": "", + "description": "", + "line": 199, + "modifierKind": Array [ + 123, + ], + "name": "processedItem", + "optional": false, + "type": "T[]", + }, + ], + "providers": Array [], + "rawdescription": " + +This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular. + +It supports [markdown](https://en.wikipedia.org/wiki/Markdown), so you can embed formatted text, +like **bold**, _italic_, and \`inline code\`. + +> How you like dem apples?! It's never been easier to document all your components. + +", + "selector": "doc-button", + "sourceCode": "import { + Component, + ElementRef, + EventEmitter, + HostBinding, + HostListener, + Input, + Output, + ViewChild, +} from '@angular/core'; + +export const exportedConstant = 'An exported constant'; + +export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge'; + +export enum ButtonAccent { + 'Normal' = 'Normal', + 'High' = 'High', +} + +export interface ISomeInterface { + one: string; + two: boolean; + three: any[]; +} + +/** + * This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular. + * + * It supports [markdown](https://en.wikipedia.org/wiki/Markdown), so you can embed formatted text, + * like **bold**, _italic_, and \`inline code\`. + * + * > How you like dem apples?! It's never been easier to document all your components. + * + * @string Hello world + * @link [Example](http://example.com) + * @code \`ThingThing\` + * @html aaa + */ +@Component({ + selector: 'doc-button', + template: '', +}) +export class InputComponent { + @ViewChild('buttonRef', { static: false }) buttonRef: ElementRef; + + /** Appearance style of the button. */ + @Input() + public appearance: 'primary' | 'secondary' = 'secondary'; + + /** Specify the accent-type of the button */ + @Input() + public accent: ButtonAccent; + + /** Sets the button to a disabled state. */ + @Input() + public isDisabled = false; + + /** + * The inner text of the button. + * + * @required + */ + @Input() + public label: string; + + /** Size of the button. */ + @Input() + public size?: ButtonSize = 'medium'; + + /** Specifies some arbitrary object */ + @Input() public someDataObject: ISomeInterface; + + /** + * Some input you shouldn't use. + * + * @deprecated + */ + @Input() + public somethingYouShouldNotUse = false; + + /** + * Handler to be called when the button is clicked by a user. + * + * Will also block the emission of the event if \`isDisabled\` is true. + */ + @Output() + public onClick = new EventEmitter(); + + /** + * This is an internal method that we don't want to document and have added the \`ignore\` annotation to. + * + * @ignore + */ + public handleClick(event: Event) { + event.stopPropagation(); + + if (!this.isDisabled) { + this.onClick.emit(event); + } + } + + private _inputValue = 'some value'; + + /** Setter for \`inputValue\` that is also an \`@Input\`. */ + @Input() + public set inputValue(value: string) { + this._inputValue = value; + } + + /** Getter for \`inputValue\`. */ + public get inputValue() { + return this._inputValue; + } + + @HostListener('click', ['$event.target']) + onClickListener(btn) { + console.log('button', btn); + } + + @HostBinding('class.focused') focus = false; + + /** + * Returns all the CSS classes for the button. + * + * @ignore + */ + public get classes(): string[] { + return [this.appearance, this.size] + .filter((_class) => !!_class) + .map((_class) => \`btn-\${_class}\`); + } + + /** + * @ignore + */ + public ignoredProperty = 'Ignore me'; + + /** Public value. */ + public internalProperty = 'Public hello'; + + /** Private value. */ + private _value = 'Private hello'; + + /** Set the private value. */ + public set value(value: string | number) { + this._value = \`\${value}\`; + } + + /** Get the private value. */ + public get value(): string | number { + return this._value; + } + + /** + * An internal calculation method which adds \`x\` and \`y\` together. + * + * @param x Some number you'd like to use. + * @param y Some other number or string you'd like to use, will have \`parseInt()\` applied before calculation. + */ + public calc(x: number, y: string | number): number { + return x + parseInt(\`\${y}\`, 10); + } + + /** A public method using an interface. */ + public publicMethod(things: ISomeInterface) { + console.log(things); + } + + /** + * A protected method. + * + * @param id Some \`id\`. + */ + protected protectedMethod(id?: number) { + console.log(id); + } + + /** + * A private method. + * + * @param password Some \`password\`. + */ + private privateMethod(password: string) { + console.log(password); + } + + @Input('showKeyAlias') + public showKey: keyof T; + + @Input() + public set item(item: T[]) { + this.processedItem = item; + } + + public processedItem: T[]; +} +", + "styleUrls": Array [], + "styleUrlsData": "", + "styles": Array [], + "stylesData": "", + "template": "", + "templateUrl": Array [], + "type": "component", + "viewProviders": Array [], + }, + ], + "coverage": Object { + "count": 21, + "files": Array [ + Object { + "coverageCount": "16/25", + "coveragePercent": 64, + "filePath": "app/angular/src/client/docs/__testfixtures__/doc-button/input.ts", + "linktype": "component", + "name": "InputComponent", + "status": "good", + "type": "component", + }, + Object { + "coverageCount": "0/4", + "coveragePercent": 0, + "filePath": "app/angular/src/client/docs/__testfixtures__/doc-button/input.ts", + "linktype": "interface", + "name": "ISomeInterface", + "status": "low", + "type": "interface", + }, + Object { + "coverageCount": "0/1", + "coveragePercent": 0, + "filePath": "app/angular/src/client/docs/__testfixtures__/doc-button/input.ts", + "linksubtype": "variable", + "linktype": "miscellaneous", + "name": "exportedConstant", + "status": "low", + "type": "variable", + }, + ], + "status": "low", + }, + "directives": Array [], + "guards": Array [], + "injectables": Array [], + "interceptors": Array [], + "interfaces": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "file": "app/angular/src/client/docs/__testfixtures__/doc-button/input.ts", + "id": "interface-ISomeInterface-d145da25329b094ee29610c45a9e46387cb39eddb2a67b4c9fadb84bcec76eacd60d131e48d98b2ee5725dedd25f2eb299b704e8e0a34307d6e84f6e57d57044", + "indexSignatures": Array [], + "kind": 165, + "methods": Array [], + "name": "ISomeInterface", + "properties": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "description": "", + "line": 25, + "name": "one", + "optional": false, + "type": "string", + }, + Object { + "deprecated": false, + "deprecationMessage": "", + "description": "", + "line": 27, + "name": "three", + "optional": false, + "type": "any[]", + }, + Object { + "deprecated": false, + "deprecationMessage": "", + "description": "", + "line": 26, + "name": "two", + "optional": false, + "type": "boolean", + }, + ], + "sourceCode": "import { + Component, + ElementRef, + EventEmitter, + HostBinding, + HostListener, + Input, + Output, + ViewChild, +} from '@angular/core'; + +export const exportedConstant = 'An exported constant'; + +export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge'; + +export enum ButtonAccent { + 'Normal' = 'Normal', + 'High' = 'High', +} + +export interface ISomeInterface { + one: string; + two: boolean; + three: any[]; +} + +/** + * This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular. + * + * It supports [markdown](https://en.wikipedia.org/wiki/Markdown), so you can embed formatted text, + * like **bold**, _italic_, and \`inline code\`. + * + * > How you like dem apples?! It's never been easier to document all your components. + * + * @string Hello world + * @link [Example](http://example.com) + * @code \`ThingThing\` + * @html aaa + */ +@Component({ + selector: 'doc-button', + template: '', +}) +export class InputComponent { + @ViewChild('buttonRef', { static: false }) buttonRef: ElementRef; + + /** Appearance style of the button. */ + @Input() + public appearance: 'primary' | 'secondary' = 'secondary'; + + /** Specify the accent-type of the button */ + @Input() + public accent: ButtonAccent; + + /** Sets the button to a disabled state. */ + @Input() + public isDisabled = false; + + /** + * The inner text of the button. + * + * @required + */ + @Input() + public label: string; + + /** Size of the button. */ + @Input() + public size?: ButtonSize = 'medium'; + + /** Specifies some arbitrary object */ + @Input() public someDataObject: ISomeInterface; + + /** + * Some input you shouldn't use. + * + * @deprecated + */ + @Input() + public somethingYouShouldNotUse = false; + + /** + * Handler to be called when the button is clicked by a user. + * + * Will also block the emission of the event if \`isDisabled\` is true. + */ + @Output() + public onClick = new EventEmitter(); + + /** + * This is an internal method that we don't want to document and have added the \`ignore\` annotation to. + * + * @ignore + */ + public handleClick(event: Event) { + event.stopPropagation(); + + if (!this.isDisabled) { + this.onClick.emit(event); + } + } + + private _inputValue = 'some value'; + + /** Setter for \`inputValue\` that is also an \`@Input\`. */ + @Input() + public set inputValue(value: string) { + this._inputValue = value; + } + + /** Getter for \`inputValue\`. */ + public get inputValue() { + return this._inputValue; + } + + @HostListener('click', ['$event.target']) + onClickListener(btn) { + console.log('button', btn); + } + + @HostBinding('class.focused') focus = false; + + /** + * Returns all the CSS classes for the button. + * + * @ignore + */ + public get classes(): string[] { + return [this.appearance, this.size] + .filter((_class) => !!_class) + .map((_class) => \`btn-\${_class}\`); + } + + /** + * @ignore + */ + public ignoredProperty = 'Ignore me'; + + /** Public value. */ + public internalProperty = 'Public hello'; + + /** Private value. */ + private _value = 'Private hello'; + + /** Set the private value. */ + public set value(value: string | number) { + this._value = \`\${value}\`; + } + + /** Get the private value. */ + public get value(): string | number { + return this._value; + } + + /** + * An internal calculation method which adds \`x\` and \`y\` together. + * + * @param x Some number you'd like to use. + * @param y Some other number or string you'd like to use, will have \`parseInt()\` applied before calculation. + */ + public calc(x: number, y: string | number): number { + return x + parseInt(\`\${y}\`, 10); + } + + /** A public method using an interface. */ + public publicMethod(things: ISomeInterface) { + console.log(things); + } + + /** + * A protected method. + * + * @param id Some \`id\`. + */ + protected protectedMethod(id?: number) { + console.log(id); + } + + /** + * A private method. + * + * @param password Some \`password\`. + */ + private privateMethod(password: string) { + console.log(password); + } + + @Input('showKeyAlias') + public showKey: keyof T; + + @Input() + public set item(item: T[]) { + this.processedItem = item; + } + + public processedItem: T[]; +} +", + "type": "interface", + }, + ], + "miscellaneous": Object { + "enumerations": Array [ + Object { + "childs": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "Normal", + "value": "Normal", + }, + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "High", + "value": "High", + }, + ], + "ctype": "miscellaneous", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "file": "app/angular/src/client/docs/__testfixtures__/doc-button/input.ts", + "name": "ButtonAccent", + "subtype": "enum", + }, + ], + "functions": Array [], + "groupedEnumerations": Object { + "app/angular/src/client/docs/__testfixtures__/doc-button/input.ts": Array [ + Object { + "childs": Array [ + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "Normal", + "value": "Normal", + }, + Object { + "deprecated": false, + "deprecationMessage": "", + "name": "High", + "value": "High", + }, + ], + "ctype": "miscellaneous", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "file": "app/angular/src/client/docs/__testfixtures__/doc-button/input.ts", + "name": "ButtonAccent", + "subtype": "enum", + }, + ], + }, + "groupedFunctions": Object {}, + "groupedTypeAliases": Object { + "app/angular/src/client/docs/__testfixtures__/doc-button/input.ts": Array [ + Object { + "ctype": "miscellaneous", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "file": "app/angular/src/client/docs/__testfixtures__/doc-button/input.ts", + "kind": 186, + "name": "ButtonSize", + "rawtype": "\\"small\\" | \\"medium\\" | \\"large\\" | \\"xlarge\\"", + "subtype": "typealias", + }, + ], + }, + "groupedVariables": Object { + "app/angular/src/client/docs/__testfixtures__/doc-button/input.ts": Array [ + Object { + "ctype": "miscellaneous", + "defaultValue": "'An exported constant'", + "deprecated": false, + "deprecationMessage": "", + "file": "app/angular/src/client/docs/__testfixtures__/doc-button/input.ts", + "name": "exportedConstant", + "subtype": "variable", + "type": "string", + }, + ], + }, + "typealiases": Array [ + Object { + "ctype": "miscellaneous", + "deprecated": false, + "deprecationMessage": "", + "description": "", + "file": "app/angular/src/client/docs/__testfixtures__/doc-button/input.ts", + "kind": 186, + "name": "ButtonSize", + "rawtype": "\\"small\\" | \\"medium\\" | \\"large\\" | \\"xlarge\\"", + "subtype": "typealias", + }, + ], + "variables": Array [ + Object { + "ctype": "miscellaneous", + "defaultValue": "'An exported constant'", + "deprecated": false, + "deprecationMessage": "", + "file": "app/angular/src/client/docs/__testfixtures__/doc-button/input.ts", + "name": "exportedConstant", + "subtype": "variable", + "type": "string", + }, + ], + }, + "modules": Array [], + "pipes": Array [], + "routes": Array [], +} +`; diff --git a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc-windows.snapshot b/app/angular/src/client/docs/__testfixtures__/doc-button/compodoc-windows.snapshot similarity index 100% rename from addons/docs/src/frameworks/angular/__testfixtures__/doc-button/compodoc-windows.snapshot rename to app/angular/src/client/docs/__testfixtures__/doc-button/compodoc-windows.snapshot diff --git a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts b/app/angular/src/client/docs/__testfixtures__/doc-button/input.ts similarity index 100% rename from addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts rename to app/angular/src/client/docs/__testfixtures__/doc-button/input.ts diff --git a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/properties.snapshot b/app/angular/src/client/docs/__testfixtures__/doc-button/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/angular/__testfixtures__/doc-button/properties.snapshot rename to app/angular/src/client/docs/__testfixtures__/doc-button/properties.snapshot diff --git a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/tsconfig.json b/app/angular/src/client/docs/__testfixtures__/doc-button/tsconfig.json similarity index 100% rename from addons/docs/src/frameworks/angular/__testfixtures__/doc-button/tsconfig.json rename to app/angular/src/client/docs/__testfixtures__/doc-button/tsconfig.json diff --git a/addons/docs/src/frameworks/angular/angular-properties.test.ts b/app/angular/src/client/docs/angular-properties.test.ts similarity index 99% rename from addons/docs/src/frameworks/angular/angular-properties.test.ts rename to app/angular/src/client/docs/angular-properties.test.ts index 8532c65b03d6..49c7f5661a66 100644 --- a/addons/docs/src/frameworks/angular/angular-properties.test.ts +++ b/app/angular/src/client/docs/angular-properties.test.ts @@ -6,6 +6,7 @@ import { sync as spawnSync } from 'cross-spawn'; import { findComponentByName, extractArgTypesFromData } from './compodoc'; +// @ts-ignore const { SNAPSHOT_OS } = global; // File hierarchy: __testfixtures__ / some-test-case / input.* diff --git a/addons/docs/src/frameworks/angular/compodoc.test.ts b/app/angular/src/client/docs/compodoc.test.ts similarity index 100% rename from addons/docs/src/frameworks/angular/compodoc.test.ts rename to app/angular/src/client/docs/compodoc.test.ts diff --git a/addons/docs/src/frameworks/angular/compodoc.ts b/app/angular/src/client/docs/compodoc.ts similarity index 99% rename from addons/docs/src/frameworks/angular/compodoc.ts rename to app/angular/src/client/docs/compodoc.ts index ec6d7037d0a9..7de806bce9ad 100644 --- a/addons/docs/src/frameworks/angular/compodoc.ts +++ b/app/angular/src/client/docs/compodoc.ts @@ -1,9 +1,9 @@ /* eslint-disable no-underscore-dangle */ /* global window */ -import { ArgType, ArgTypes } from '@storybook/api'; +import type { ArgType, ArgTypes } from '@storybook/api'; import { logger } from '@storybook/client-logger'; -import { +import type { Argument, Class, CompodocJson, diff --git a/addons/docs/src/frameworks/angular/config.ts b/app/angular/src/client/docs/config.ts similarity index 81% rename from addons/docs/src/frameworks/angular/config.ts rename to app/angular/src/client/docs/config.ts index 25f9626ec4dc..70f19c61d0f0 100644 --- a/addons/docs/src/frameworks/angular/config.ts +++ b/app/angular/src/client/docs/config.ts @@ -1,4 +1,4 @@ -import { SourceType } from '../../shared'; +import { SourceType, enhanceArgTypes } from '@storybook/docs-tools'; import { extractArgTypes, extractComponentDescription } from './compodoc'; import { sourceDecorator } from './sourceDecorator'; import { prepareForInline } from './prepareForInline'; @@ -18,3 +18,5 @@ export const parameters = { }; export const decorators = [sourceDecorator]; + +export const argTypesEnhancers = [enhanceArgTypes]; diff --git a/addons/docs/src/frameworks/angular/index.ts b/app/angular/src/client/docs/index.ts similarity index 100% rename from addons/docs/src/frameworks/angular/index.ts rename to app/angular/src/client/docs/index.ts diff --git a/addons/docs/src/frameworks/angular/prepareForInline.ts b/app/angular/src/client/docs/prepareForInline.ts similarity index 87% rename from addons/docs/src/frameworks/angular/prepareForInline.ts rename to app/angular/src/client/docs/prepareForInline.ts index 3e07c842248a..4568782e8244 100644 --- a/addons/docs/src/frameworks/angular/prepareForInline.ts +++ b/app/angular/src/client/docs/prepareForInline.ts @@ -2,9 +2,9 @@ import React from 'react'; import pLimit from 'p-limit'; import { nanoid } from 'nanoid'; -import { AngularFramework, StoryContext } from '@storybook/angular'; -import { rendererFactory } from '@storybook/angular/renderer'; import { PartialStoryFn } from '@storybook/csf'; +import { AngularFramework, StoryContext } from '..'; +import { rendererFactory } from '../../renderer'; const limit = pLimit(1); diff --git a/addons/docs/src/frameworks/angular/sourceDecorator.ts b/app/angular/src/client/docs/sourceDecorator.ts similarity index 89% rename from addons/docs/src/frameworks/angular/sourceDecorator.ts rename to app/angular/src/client/docs/sourceDecorator.ts index 8177aff2af1b..63c27e470f0c 100644 --- a/addons/docs/src/frameworks/angular/sourceDecorator.ts +++ b/app/angular/src/client/docs/sourceDecorator.ts @@ -1,8 +1,8 @@ import { addons, useEffect } from '@storybook/addons'; -import { PartialStoryFn } from '@storybook/csf'; -import { StoryContext, AngularFramework } from '@storybook/angular'; -import { computesTemplateSourceFromComponent } from '@storybook/angular/renderer'; -import { SNIPPET_RENDERED, SourceType } from '../../shared'; +import type { PartialStoryFn } from '@storybook/csf'; +import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools'; +import { StoryContext, AngularFramework } from '..'; +import { computesTemplateSourceFromComponent } from '../../renderer'; export const skipSourceRender = (context: StoryContext) => { const sourceParams = context?.parameters.docs?.source; diff --git a/addons/docs/src/frameworks/angular/types.ts b/app/angular/src/client/docs/types.ts similarity index 100% rename from addons/docs/src/frameworks/angular/types.ts rename to app/angular/src/client/docs/types.ts diff --git a/app/angular/src/client/preview/angular-beta/ComputesTemplateFromComponent.test.ts b/app/angular/src/client/preview/angular-beta/ComputesTemplateFromComponent.test.ts index 3ab84b295072..b4a571feb05f 100644 --- a/app/angular/src/client/preview/angular-beta/ComputesTemplateFromComponent.test.ts +++ b/app/angular/src/client/preview/angular-beta/ComputesTemplateFromComponent.test.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { ArgTypes } from '@storybook/api'; +import type { ArgTypes } from '@storybook/api'; import { computesTemplateSourceFromComponent } from './ComputesTemplateFromComponent'; import { ButtonAccent, InputComponent, ISomeInterface } from './__testfixtures__/input.component'; diff --git a/app/angular/src/client/preview/angular-beta/ComputesTemplateFromComponent.ts b/app/angular/src/client/preview/angular-beta/ComputesTemplateFromComponent.ts index c6703bf9e3c5..ade69fb64695 100644 --- a/app/angular/src/client/preview/angular-beta/ComputesTemplateFromComponent.ts +++ b/app/angular/src/client/preview/angular-beta/ComputesTemplateFromComponent.ts @@ -1,6 +1,6 @@ -import { Type } from '@angular/core'; -import { ArgType, ArgTypes } from '@storybook/api'; -import { ICollection } from '../types'; +import type { Type } from '@angular/core'; +import type { ArgType, ArgTypes } from '@storybook/api'; +import type { ICollection } from '../types'; import { ComponentInputsOutputs, getComponentDecoratorMetadata, diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts index bad80b39bf93..0ffd723442f5 100644 --- a/app/angular/src/client/preview/angular/helpers.ts +++ b/app/angular/src/client/preview/angular/helpers.ts @@ -5,11 +5,11 @@ import { FormsModule } from '@angular/forms'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { Observable, ReplaySubject, Subscriber } from 'rxjs'; -import { PartialStoryFn } from '@storybook/csf'; +import type { PartialStoryFn } from '@storybook/csf'; import { AppComponent } from './components/app.component'; import { STORY } from './app.token'; -import { NgModuleMetadata, StoryFnAngularReturnType } from '../types'; -import { AngularFramework } from '../types-6-0'; +import type { NgModuleMetadata, StoryFnAngularReturnType } from '../types'; +import type { AngularFramework } from '../types-6-0'; const { document } = global; diff --git a/app/angular/src/client/preview/decorateStory.test.ts b/app/angular/src/client/preview/decorateStory.test.ts index 316c79b06287..69243b14a74f 100644 --- a/app/angular/src/client/preview/decorateStory.test.ts +++ b/app/angular/src/client/preview/decorateStory.test.ts @@ -1,5 +1,5 @@ import { Component, Input, Output } from '@angular/core'; -import { DecoratorFunction, StoryContext } from '@storybook/addons'; +import type { DecoratorFunction, StoryContext } from '@storybook/addons'; import { componentWrapperDecorator } from './decorators'; import decorateStory from './decorateStory'; diff --git a/app/angular/src/client/preview/decorateStory.ts b/app/angular/src/client/preview/decorateStory.ts index 1f0643933a0d..410ffec07f24 100644 --- a/app/angular/src/client/preview/decorateStory.ts +++ b/app/angular/src/client/preview/decorateStory.ts @@ -1,8 +1,8 @@ -import { DecoratorFunction, LegacyStoryFn, StoryContext } from '@storybook/csf'; +import type { DecoratorFunction, LegacyStoryFn, StoryContext } from '@storybook/csf'; import { sanitizeStoryContextUpdate } from '@storybook/store'; import { computesTemplateFromComponent } from './angular-beta/ComputesTemplateFromComponent'; -import { AngularFramework } from './types-6-0'; +import type { AngularFramework } from './types-6-0'; export default function decorateStory( mainStoryFn: LegacyStoryFn, diff --git a/app/angular/src/client/preview/decorators.test.ts b/app/angular/src/client/preview/decorators.test.ts index b3354570b4e4..aa40d61767de 100644 --- a/app/angular/src/client/preview/decorators.test.ts +++ b/app/angular/src/client/preview/decorators.test.ts @@ -1,4 +1,5 @@ -import { addons, mockChannel, StoryContext } from '@storybook/addons'; +import { addons, mockChannel } from '@storybook/addons'; +import type { StoryContext } from '@storybook/addons'; import { Component } from '@angular/core'; import { moduleMetadata } from './decorators'; diff --git a/app/angular/src/client/preview/decorators.ts b/app/angular/src/client/preview/decorators.ts index c74dcff99461..d5eeffe6c57e 100644 --- a/app/angular/src/client/preview/decorators.ts +++ b/app/angular/src/client/preview/decorators.ts @@ -1,10 +1,10 @@ /* eslint-disable no-param-reassign */ -import { Type } from '@angular/core'; -import { DecoratorFunction, StoryContext } from '@storybook/csf'; +import type { Type } from '@angular/core'; +import type { DecoratorFunction, StoryContext } from '@storybook/csf'; import { computesTemplateFromComponent } from './angular-beta/ComputesTemplateFromComponent'; import { isComponent } from './angular-beta/utils/NgComponentAnalyzer'; -import { ICollection, NgModuleMetadata } from './types'; -import { AngularFramework } from './types-6-0'; +import type { ICollection, NgModuleMetadata } from './types'; +import type { AngularFramework } from './types-6-0'; // We use `any` here as the default type rather than `Args` because we need something that is // castable to any component-specific args type when the user is being careful. diff --git a/app/angular/src/client/preview/index.ts b/app/angular/src/client/preview/index.ts index 91ff1e5e2ea9..e37a283bd466 100644 --- a/app/angular/src/client/preview/index.ts +++ b/app/angular/src/client/preview/index.ts @@ -1,11 +1,11 @@ /* eslint-disable prefer-destructuring */ -import { ClientStoryApi, Loadable } from '@storybook/addons'; +import type { ClientStoryApi, Loadable } from '@storybook/addons'; import { start } from '@storybook/core/client'; import './globals'; import { renderToDOM, render } from './render'; import decorateStory from './decorateStory'; -import { IStorybookSection } from './types'; -import { AngularFramework } from './types-6-0'; +import type { IStorybookSection } from './types'; +import type { AngularFramework } from './types-6-0'; const framework = 'angular'; diff --git a/app/angular/src/client/preview/render.ts b/app/angular/src/client/preview/render.ts index a942d7e05ad6..fc1427ded470 100644 --- a/app/angular/src/client/preview/render.ts +++ b/app/angular/src/client/preview/render.ts @@ -1,8 +1,8 @@ -import { RenderContext } from '@storybook/store'; -import { ArgsStoryFn } from '@storybook/csf'; +import type { RenderContext } from '@storybook/store'; +import type { ArgsStoryFn } from '@storybook/csf'; import { renderNgApp } from './angular/helpers'; -import { AngularFramework } from './types-6-0'; +import type { AngularFramework } from './types-6-0'; import { RendererFactory } from './angular-beta/RendererFactory'; diff --git a/app/angular/src/client/preview/types-6-0.ts b/app/angular/src/client/preview/types-6-0.ts index 86bd12d15131..7e4372d14490 100644 --- a/app/angular/src/client/preview/types-6-0.ts +++ b/app/angular/src/client/preview/types-6-0.ts @@ -1,4 +1,4 @@ -import { +import type { Args, Parameters as DefaultParameters, StoryContext as DefaultStoryContext, @@ -7,7 +7,7 @@ import { AnnotatedStoryFn, } from '@storybook/csf'; -import { StoryFnAngularReturnType } from './types'; +import type { StoryFnAngularReturnType } from './types'; export type { Args, ArgTypes } from '@storybook/csf'; diff --git a/app/angular/src/client/preview/types-7-0.ts b/app/angular/src/client/preview/types-7-0.ts index b88051446a9d..2af743156fb7 100644 --- a/app/angular/src/client/preview/types-7-0.ts +++ b/app/angular/src/client/preview/types-7-0.ts @@ -1,5 +1,4 @@ -import { Args } from '@storybook/csf'; - +import type { Args } from '@storybook/csf'; import type { StoryObj } from './types-6-0'; export type { StoryFn, StoryObj, Meta } from './types-6-0'; diff --git a/app/angular/src/server/create-fork-ts-checker-plugin.ts b/app/angular/src/server/create-fork-ts-checker-plugin.ts index 941dd81031a4..329609b8f2b6 100644 --- a/app/angular/src/server/create-fork-ts-checker-plugin.ts +++ b/app/angular/src/server/create-fork-ts-checker-plugin.ts @@ -8,7 +8,7 @@ export default function (tsLoaderOptions: Partial) { if (tsLoaderOptions && tsLoaderOptions.configFile) { return new ForkTsCheckerWebpackPlugin({ tsconfig: tsLoaderOptions.configFile, - async: false, + async: true, }); } diff --git a/app/angular/src/server/framework-preset-angular-cli.test.ts b/app/angular/src/server/framework-preset-angular-cli.test.ts index a6c1853e6f2f..fa356f688eb4 100644 --- a/app/angular/src/server/framework-preset-angular-cli.test.ts +++ b/app/angular/src/server/framework-preset-angular-cli.test.ts @@ -1,5 +1,5 @@ import path from 'path'; -import { Configuration } from 'webpack'; +import type { Configuration } from 'webpack'; import { logger } from '@storybook/node-logger'; import { normalize, getSystemPath } from '@angular-devkit/core'; import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'; diff --git a/app/angular/src/server/framework-preset-angular-docs.ts b/app/angular/src/server/framework-preset-angular-docs.ts new file mode 100644 index 000000000000..314ef6039f3f --- /dev/null +++ b/app/angular/src/server/framework-preset-angular-docs.ts @@ -0,0 +1,8 @@ +import path from 'path'; +import { StorybookConfig } from '@storybook/core-common'; +import { hasDocsOrControls } from '@storybook/docs-tools'; + +export const config: StorybookConfig['config'] = (entry = [], options) => { + if (!hasDocsOrControls(options)) return entry; + return [...entry, path.join(__dirname, '../../../dist/ts3.9/client/docs/config')]; +}; diff --git a/app/angular/src/server/options.ts b/app/angular/src/server/options.ts index 252519968710..06866176345b 100644 --- a/app/angular/src/server/options.ts +++ b/app/angular/src/server/options.ts @@ -1,5 +1,5 @@ import { sync } from 'read-pkg-up'; -import { LoadOptions, Options as CoreOptions } from '@storybook/core-common'; +import type { LoadOptions, Options as CoreOptions } from '@storybook/core-common'; import { BuilderContext } from '@angular-devkit/architect'; import { ExtraEntryPoint, StylePreprocessorOptions } from '@angular-devkit/build-angular'; diff --git a/app/angular/src/server/preset.ts b/app/angular/src/server/preset.ts index c4b3c1ffc729..ab7d7dd63059 100644 --- a/app/angular/src/server/preset.ts +++ b/app/angular/src/server/preset.ts @@ -9,4 +9,5 @@ export const addons: StorybookConfig['addons'] = [ require.resolve('./framework-preset-angular'), require.resolve('./framework-preset-angular-cli'), require.resolve('./framework-preset-angular-ivy'), + require.resolve('./framework-preset-angular-docs'), ]; diff --git a/app/angular/src/types/index.ts b/app/angular/src/types/index.ts index 7b7db58544c8..13ee64606a0b 100644 --- a/app/angular/src/types/index.ts +++ b/app/angular/src/types/index.ts @@ -1,4 +1,4 @@ -import { StorybookConfig as BaseConfig } from '@storybook/core-common'; +import type { StorybookConfig as BaseConfig } from '@storybook/core-common'; export interface StorybookConfig extends BaseConfig { angularOptions?: { diff --git a/app/angular/standalone.d.ts b/app/angular/standalone.d.ts index 6ad8186aa9dd..cd728e7dfb14 100644 --- a/app/angular/standalone.d.ts +++ b/app/angular/standalone.d.ts @@ -1,5 +1,5 @@ -import { CLIOptions, LoadOptions, BuilderOptions } from '@storybook/core-common'; -import { BuilderContext } from '@angular-devkit/architect'; +import type { CLIOptions, LoadOptions, BuilderOptions } from '@storybook/core-common'; +import type { BuilderContext } from '@angular-devkit/architect'; export type StandaloneOptions = Partial< CLIOptions & diff --git a/app/ember/package.json b/app/ember/package.json index 70343abbcd48..b01d2c1dd23c 100644 --- a/app/ember/package.json +++ b/app/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/main/app/ember", "bugs": { @@ -42,10 +42,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@ember/test-helpers": "^2.1.4", - "@storybook/core": "6.5.0-alpha.42", - "@storybook/core-common": "6.5.0-alpha.42", - "@storybook/store": "6.5.0-alpha.42", + "@storybook/core": "6.5.0-alpha.48", + "@storybook/core-common": "6.5.0-alpha.48", + "@storybook/docs-tools": "6.5.0-alpha.48", + "@storybook/store": "6.5.0-alpha.48", "core-js": "^3.8.2", "global": "^4.4.0", "react": "16.14.0", @@ -66,6 +66,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/ember/preset.js b/app/ember/preset.js index 20dbce22ad35..f09c6698e046 100644 --- a/app/ember/preset.js +++ b/app/ember/preset.js @@ -1 +1 @@ -module.exports = require('./dist/cjs/server/framework-preset-babel-ember'); +module.exports = require('./dist/cjs/server/preset'); diff --git a/app/ember/src/client/docs/config.js b/app/ember/src/client/docs/config.js new file mode 100644 index 000000000000..042ec16227ef --- /dev/null +++ b/app/ember/src/client/docs/config.js @@ -0,0 +1,12 @@ +import { enhanceArgTypes } from '@storybook/docs-tools'; +import { extractArgTypes, extractComponentDescription } from './jsondoc'; + +export const parameters = { + docs: { + iframeHeight: 80, + extractArgTypes, + extractComponentDescription, + }, +}; + +export const argTypesEnhancers = [enhanceArgTypes]; diff --git a/addons/docs/src/frameworks/ember/index.js b/app/ember/src/client/docs/index.js similarity index 100% rename from addons/docs/src/frameworks/ember/index.js rename to app/ember/src/client/docs/index.js diff --git a/addons/docs/src/frameworks/ember/jsondoc.js b/app/ember/src/client/docs/jsondoc.js similarity index 100% rename from addons/docs/src/frameworks/ember/jsondoc.js rename to app/ember/src/client/docs/jsondoc.js diff --git a/addons/docs/src/frameworks/ember/config.js b/app/ember/src/client/preview/docs/config.js similarity index 100% rename from addons/docs/src/frameworks/ember/config.js rename to app/ember/src/client/preview/docs/config.js diff --git a/app/ember/src/client/preview/docs/index.js b/app/ember/src/client/preview/docs/index.js new file mode 100644 index 000000000000..fab7166db9d7 --- /dev/null +++ b/app/ember/src/client/preview/docs/index.js @@ -0,0 +1 @@ +export { setJSONDoc } from './jsondoc'; diff --git a/app/ember/src/client/preview/docs/jsondoc.js b/app/ember/src/client/preview/docs/jsondoc.js new file mode 100644 index 000000000000..f9e648ebc21b --- /dev/null +++ b/app/ember/src/client/preview/docs/jsondoc.js @@ -0,0 +1,50 @@ +/* eslint-disable no-underscore-dangle */ +/* global window */ + +export const setJSONDoc = (jsondoc) => { + window.__EMBER_GENERATED_DOC_JSON__ = jsondoc; +}; +export const getJSONDoc = () => { + return window.__EMBER_GENERATED_DOC_JSON__; +}; + +export const extractArgTypes = (componentName) => { + const json = getJSONDoc(); + if (!(json && json.included)) { + return null; + } + const componentDoc = json.included.find((doc) => doc.attributes.name === componentName); + + if (!componentDoc) { + return null; + } + return componentDoc.attributes.arguments.reduce((acc, prop) => { + acc[prop.name] = { + name: prop.name, + defaultValue: prop.defaultValue, + description: prop.description, + table: { + defaultValue: { summary: prop.defaultValue }, + type: { + summary: prop.type, + required: prop.tags.length ? prop.tags.some((tag) => tag.name === 'required') : false, + }, + }, + }; + return acc; + }, {}); +}; + +export const extractComponentDescription = (componentName) => { + const json = getJSONDoc(); + if (!(json && json.included)) { + return null; + } + const componentDoc = json.included.find((doc) => doc.attributes.name === componentName); + + if (!componentDoc) { + return null; + } + + return componentDoc.attributes.description; +}; diff --git a/app/ember/src/server/framework-preset-babel-ember.ts b/app/ember/src/server/framework-preset-babel-ember.ts index eff74eea028f..85bb723bee7b 100644 --- a/app/ember/src/server/framework-preset-babel-ember.ts +++ b/app/ember/src/server/framework-preset-babel-ember.ts @@ -1,6 +1,7 @@ -import { TransformOptions } from '@babel/core'; +import type { TransformOptions } from '@babel/core'; import { precompile } from 'ember-source/dist/ember-template-compiler'; -import { findDistEsm, StorybookConfig, Options } from '@storybook/core-common'; +import { findDistEsm } from '@storybook/core-common'; +import type { StorybookConfig, Options } from '@storybook/core-common'; let emberOptions: any; diff --git a/app/ember/src/server/framework-preset-ember-docs.ts b/app/ember/src/server/framework-preset-ember-docs.ts new file mode 100644 index 000000000000..c2e6f69be8f2 --- /dev/null +++ b/app/ember/src/server/framework-preset-ember-docs.ts @@ -0,0 +1,8 @@ +import type { StorybookConfig } from '@storybook/core-common'; +import { findDistEsm } from '@storybook/core-common'; +import { hasDocsOrControls } from '@storybook/docs-tools'; + +export const config: StorybookConfig['config'] = (entry = [], options) => { + if (!hasDocsOrControls(options)) return entry; + return [...entry, findDistEsm(__dirname, 'client/docs/config')]; +}; diff --git a/app/ember/src/server/options.ts b/app/ember/src/server/options.ts index f6656af3802e..3643aedba732 100644 --- a/app/ember/src/server/options.ts +++ b/app/ember/src/server/options.ts @@ -1,8 +1,8 @@ import { sync } from 'read-pkg-up'; -import { LoadOptions } from '@storybook/core-common'; +import type { LoadOptions } from '@storybook/core-common'; export default { packageJson: sync({ cwd: __dirname }).packageJson, framework: 'ember', - frameworkPresets: [require.resolve('./framework-preset-babel-ember.js')], + frameworkPresets: [require.resolve('./preset')], } as LoadOptions; diff --git a/app/ember/src/server/preset.ts b/app/ember/src/server/preset.ts new file mode 100644 index 000000000000..5e5003a2626a --- /dev/null +++ b/app/ember/src/server/preset.ts @@ -0,0 +1,6 @@ +import type { StorybookConfig } from '@storybook/core-common'; + +export const addons: StorybookConfig['addons'] = [ + require.resolve('./framework-preset-babel-ember'), + require.resolve('./framework-preset-ember-docs'), +]; diff --git a/app/html/package.json b/app/html/package.json index 8f9e68e0f500..9043cd0824da 100644 --- a/app/html/package.json +++ b/app/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -45,13 +45,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/client-api": "6.5.0-alpha.42", - "@storybook/core": "6.5.0-alpha.42", - "@storybook/core-common": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/core": "6.5.0-alpha.48", + "@storybook/core-common": "6.5.0-alpha.48", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/preview-web": "6.5.0-alpha.42", - "@storybook/store": "6.5.0-alpha.42", + "@storybook/docs-tools": "6.5.0-alpha.48", + "@storybook/preview-web": "6.5.0-alpha.48", + "@storybook/store": "6.5.0-alpha.48", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", @@ -61,7 +61,8 @@ "react-dom": "16.14.0", "read-pkg-up": "^7.0.1", "regenerator-runtime": "^0.13.7", - "ts-dedent": "^2.0.0" + "ts-dedent": "^2.0.0", + "webpack": "4" }, "peerDependencies": { "@babel/core": "*" @@ -72,6 +73,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/html/preset.js b/app/html/preset.js index 73fe39d8aaad..f09c6698e046 100644 --- a/app/html/preset.js +++ b/app/html/preset.js @@ -1 +1 @@ -module.exports = require('./dist/cjs/server/framework-preset-html'); +module.exports = require('./dist/cjs/server/preset'); diff --git a/addons/docs/src/frameworks/html/config.ts b/app/html/src/client/docs/config.ts similarity index 86% rename from addons/docs/src/frameworks/html/config.ts rename to app/html/src/client/docs/config.ts index 007800d5da93..73dd8ea8a5e9 100644 --- a/addons/docs/src/frameworks/html/config.ts +++ b/app/html/src/client/docs/config.ts @@ -1,6 +1,6 @@ +import { SourceType } from '@storybook/docs-tools'; import { sourceDecorator } from './sourceDecorator'; import { prepareForInline } from './prepareForInline'; -import { SourceType } from '../../shared'; export const decorators = [sourceDecorator]; diff --git a/addons/docs/src/frameworks/html/prepareForInline.tsx b/app/html/src/client/docs/prepareForInline.tsx similarity index 100% rename from addons/docs/src/frameworks/html/prepareForInline.tsx rename to app/html/src/client/docs/prepareForInline.tsx diff --git a/addons/docs/src/frameworks/html/sourceDecorator.test.ts b/app/html/src/client/docs/sourceDecorator.test.ts similarity index 98% rename from addons/docs/src/frameworks/html/sourceDecorator.test.ts rename to app/html/src/client/docs/sourceDecorator.test.ts index 9e66c1ebd1c1..18e5e3ace141 100644 --- a/addons/docs/src/frameworks/html/sourceDecorator.test.ts +++ b/app/html/src/client/docs/sourceDecorator.test.ts @@ -1,6 +1,6 @@ +import { SNIPPET_RENDERED } from '@storybook/docs-tools'; import { addons, StoryContext, useEffect } from '@storybook/addons'; import { sourceDecorator } from './sourceDecorator'; -import { SNIPPET_RENDERED } from '../../shared'; jest.mock('@storybook/addons'); const mockedAddons = addons as jest.Mocked; diff --git a/addons/docs/src/frameworks/html/sourceDecorator.ts b/app/html/src/client/docs/sourceDecorator.ts similarity index 90% rename from addons/docs/src/frameworks/html/sourceDecorator.ts rename to app/html/src/client/docs/sourceDecorator.ts index 04d7defe4929..d9076dd35f03 100644 --- a/addons/docs/src/frameworks/html/sourceDecorator.ts +++ b/app/html/src/client/docs/sourceDecorator.ts @@ -1,10 +1,9 @@ /* global window */ +import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools'; import { addons, useEffect } from '@storybook/addons'; -import { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/csf'; +import type { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/csf'; import dedent from 'ts-dedent'; -import { HtmlFramework } from '@storybook/html'; - -import { SNIPPET_RENDERED, SourceType } from '../../shared'; +import type { HtmlFramework } from '..'; function skipSourceRender(context: StoryContext) { const sourceParams = context?.parameters.docs?.source; diff --git a/app/html/src/client/preview/index.ts b/app/html/src/client/preview/index.ts index 96f8be1e9156..7838f55b09ff 100644 --- a/app/html/src/client/preview/index.ts +++ b/app/html/src/client/preview/index.ts @@ -1,11 +1,11 @@ /* eslint-disable prefer-destructuring */ import { start } from '@storybook/core/client'; -import { ClientStoryApi, Loadable } from '@storybook/addons'; +import type { ClientStoryApi, Loadable } from '@storybook/addons'; import { HtmlFramework } from './types-6-0'; import './globals'; import { renderToDOM } from './render'; -import { IStorybookSection } from './types'; +import type { IStorybookSection } from './types'; const framework = 'html'; diff --git a/app/html/src/client/preview/types-6-0.ts b/app/html/src/client/preview/types-6-0.ts index 905b047506c4..abc711430c38 100644 --- a/app/html/src/client/preview/types-6-0.ts +++ b/app/html/src/client/preview/types-6-0.ts @@ -1,6 +1,11 @@ -import { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf'; +import type { + Args, + ComponentAnnotations, + StoryAnnotations, + AnnotatedStoryFn, +} from '@storybook/csf'; -import { StoryFnHtmlReturnType } from './types'; +import type { StoryFnHtmlReturnType } from './types'; export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons'; diff --git a/app/html/src/client/preview/types-7-0.ts b/app/html/src/client/preview/types-7-0.ts index b88051446a9d..d897ad97a81a 100644 --- a/app/html/src/client/preview/types-7-0.ts +++ b/app/html/src/client/preview/types-7-0.ts @@ -1,4 +1,4 @@ -import { Args } from '@storybook/csf'; +import type { Args } from '@storybook/csf'; import type { StoryObj } from './types-6-0'; diff --git a/app/html/src/server/framework-preset-html-docs.ts b/app/html/src/server/framework-preset-html-docs.ts new file mode 100644 index 000000000000..c2e6f69be8f2 --- /dev/null +++ b/app/html/src/server/framework-preset-html-docs.ts @@ -0,0 +1,8 @@ +import type { StorybookConfig } from '@storybook/core-common'; +import { findDistEsm } from '@storybook/core-common'; +import { hasDocsOrControls } from '@storybook/docs-tools'; + +export const config: StorybookConfig['config'] = (entry = [], options) => { + if (!hasDocsOrControls(options)) return entry; + return [...entry, findDistEsm(__dirname, 'client/docs/config')]; +}; diff --git a/app/html/src/server/framework-preset-html.ts b/app/html/src/server/framework-preset-html.ts index 4c6c7e0c1f9b..10b69f8fafdc 100644 --- a/app/html/src/server/framework-preset-html.ts +++ b/app/html/src/server/framework-preset-html.ts @@ -1,6 +1,6 @@ -// eslint-disable-next-line import/no-extraneous-dependencies -import { Configuration } from 'webpack'; -import { findDistEsm, StorybookConfig } from '@storybook/core-common'; +import { findDistEsm } from '@storybook/core-common'; +import type { Configuration } from 'webpack'; +import type { StorybookConfig } from '@storybook/core-common'; export function webpack(config: Configuration) { config.module.rules.push({ diff --git a/app/html/src/server/options.ts b/app/html/src/server/options.ts index 306658e949e7..7c46e5bf5632 100644 --- a/app/html/src/server/options.ts +++ b/app/html/src/server/options.ts @@ -1,8 +1,8 @@ import { sync } from 'read-pkg-up'; -import { LoadOptions } from '@storybook/core-common'; +import type { LoadOptions } from '@storybook/core-common'; export default { packageJson: sync({ cwd: __dirname }).packageJson, framework: 'html', - frameworkPresets: [require.resolve('./framework-preset-html')], + frameworkPresets: [require.resolve('./preset')], } as LoadOptions; diff --git a/app/html/src/server/preset.ts b/app/html/src/server/preset.ts new file mode 100644 index 000000000000..62a020699371 --- /dev/null +++ b/app/html/src/server/preset.ts @@ -0,0 +1,6 @@ +import type { StorybookConfig } from '@storybook/core-common'; + +export const addons: StorybookConfig['addons'] = [ + require.resolve('./framework-preset-html'), + require.resolve('./framework-preset-html-docs'), +]; diff --git a/app/html/tsconfig.json b/app/html/tsconfig.json index 77e11bbd2ab9..a7b3b6102f4c 100644 --- a/app/html/tsconfig.json +++ b/app/html/tsconfig.json @@ -2,15 +2,8 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": [ - "webpack-env", - "node" - ] + "types": ["webpack-env", "node"] }, - "include": [ - "src/**/*" - ], - "exclude": [ - "src/__tests__/**/*" - ] -} \ No newline at end of file + "include": ["src/**/*"], + "exclude": ["src/**/*.test.*", "src/__tests__/**/*"] +} diff --git a/app/preact/package.json b/app/preact/package.json index 0503b30618c1..ef97e13d94c6 100644 --- a/app/preact/package.json +++ b/app/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" @@ -46,11 +46,11 @@ }, "dependencies": { "@babel/plugin-transform-react-jsx": "^7.12.12", - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/core": "6.5.0-alpha.42", - "@storybook/core-common": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/core": "6.5.0-alpha.48", + "@storybook/core-common": "6.5.0-alpha.48", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/store": "6.5.0-alpha.42", + "@storybook/store": "6.5.0-alpha.48", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", @@ -75,6 +75,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/preact/src/client/preview/index.ts b/app/preact/src/client/preview/index.ts index 82bbf67a73d3..b15e21d72ee2 100644 --- a/app/preact/src/client/preview/index.ts +++ b/app/preact/src/client/preview/index.ts @@ -1,11 +1,11 @@ /* eslint-disable prefer-destructuring */ import { start } from '@storybook/core/client'; -import { ClientStoryApi, Loadable } from '@storybook/addons'; +import type { ClientStoryApi, Loadable } from '@storybook/addons'; import './globals'; import { renderToDOM } from './render'; -import { IStorybookSection } from './types'; -import { PreactFramework } from './types-6-0'; +import type { IStorybookSection } from './types'; +import type { PreactFramework } from './types-6-0'; export interface ClientApi extends ClientStoryApi { setAddon(addon: any): void; diff --git a/app/preact/src/client/preview/types-6-0.ts b/app/preact/src/client/preview/types-6-0.ts index 5f43f298f57c..c98eb9071576 100644 --- a/app/preact/src/client/preview/types-6-0.ts +++ b/app/preact/src/client/preview/types-6-0.ts @@ -1,6 +1,11 @@ -import { AnyComponent } from 'preact'; -import { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf'; -import { StoryFnPreactReturnType } from './types'; +import type { AnyComponent } from 'preact'; +import type { + Args, + ComponentAnnotations, + StoryAnnotations, + AnnotatedStoryFn, +} from '@storybook/csf'; +import type { StoryFnPreactReturnType } from './types'; export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf'; diff --git a/app/preact/src/client/preview/types-7-0.ts b/app/preact/src/client/preview/types-7-0.ts index b88051446a9d..d897ad97a81a 100644 --- a/app/preact/src/client/preview/types-7-0.ts +++ b/app/preact/src/client/preview/types-7-0.ts @@ -1,4 +1,4 @@ -import { Args } from '@storybook/csf'; +import type { Args } from '@storybook/csf'; import type { StoryObj } from './types-6-0'; diff --git a/app/preact/src/server/framework-preset-preact.ts b/app/preact/src/server/framework-preset-preact.ts index f6c1266931e5..034cd1f4f729 100644 --- a/app/preact/src/server/framework-preset-preact.ts +++ b/app/preact/src/server/framework-preset-preact.ts @@ -1,7 +1,8 @@ import path from 'path'; -import { TransformOptions } from '@babel/core'; -import { Configuration } from 'webpack'; -import { findDistEsm, StorybookConfig } from '@storybook/core-common'; +import type { TransformOptions } from '@babel/core'; +import type { Configuration } from 'webpack'; +import { findDistEsm } from '@storybook/core-common'; +import type { StorybookConfig } from '@storybook/core-common'; export function babelDefault(config: TransformOptions): TransformOptions { return { diff --git a/app/preact/src/server/options.ts b/app/preact/src/server/options.ts index 6132aceaae33..f2614b12e04b 100644 --- a/app/preact/src/server/options.ts +++ b/app/preact/src/server/options.ts @@ -1,5 +1,5 @@ import { sync } from 'read-pkg-up'; -import { LoadOptions } from '@storybook/core-common'; +import type { LoadOptions } from '@storybook/core-common'; export default { packageJson: sync({ cwd: __dirname }).packageJson, diff --git a/app/react/package.json b/app/react/package.json index 0542702c2e46..36540408d444 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -49,38 +49,48 @@ "@babel/preset-flow": "^7.12.1", "@babel/preset-react": "^7.12.10", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/core": "6.5.0-alpha.42", - "@storybook/core-common": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/client-logger": "6.5.0-alpha.48", + "@storybook/core": "6.5.0-alpha.48", + "@storybook/core-common": "6.5.0-alpha.48", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/node-logger": "6.5.0-alpha.42", + "@storybook/docs-tools": "6.5.0-alpha.48", + "@storybook/node-logger": "6.5.0-alpha.48", "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0", "@storybook/semver": "^7.3.2", - "@storybook/store": "6.5.0-alpha.42", + "@storybook/store": "6.5.0-alpha.48", + "@types/estree": "^0.0.51", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", + "acorn": "^7.4.1", + "acorn-jsx": "^5.3.1", + "acorn-walk": "^7.2.0", "babel-plugin-add-react-displayname": "^0.0.5", - "babel-plugin-named-asset-import": "^0.3.1", "babel-plugin-react-docgen": "^4.2.1", "core-js": "^3.8.2", + "escodegen": "^2.0.0", "global": "^4.4.0", + "html-tags": "^3.1.0", "lodash": "^4.17.21", "prop-types": "^15.7.2", + "react-element-to-jsx-string": "^14.3.4", "react-refresh": "^0.11.0", "read-pkg-up": "^7.0.1", "regenerator-runtime": "^0.13.7", "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2", "webpack": ">=4.43.0 <6.0.0" }, "devDependencies": { - "@storybook/client-api": "6.5.0-alpha.42", - "@types/prompts": "^2.0.9", + "@types/util-deprecate": "^1.0.0", "webpack": "4" }, "peerDependencies": { "@babel/core": "^7.11.5", + "jest-specific-snapshot": "^4.0.0", "react": "^16.8.0 || ^17.0.0", - "react-dom": "^16.8.0 || ^17.0.0" + "react-dom": "^16.8.0 || ^17.0.0", + "require-from-string": "^2.0.2" }, "peerDependenciesMeta": { "@babel/core": { @@ -108,6 +118,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/client/index.js" } diff --git a/addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/10017-ts-union/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/10017-ts-union/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/10017-ts-union/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/10017-ts-union/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/input.tsx b/app/react/src/client/docs/__testfixtures__/10017-ts-union/input.tsx similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/input.tsx rename to app/react/src/client/docs/__testfixtures__/10017-ts-union/input.tsx diff --git a/addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/properties.snapshot b/app/react/src/client/docs/__testfixtures__/10017-ts-union/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/10017-ts-union/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/10278-ts-multiple-components/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/10278-ts-multiple-components/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/10278-ts-multiple-components/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/10278-ts-multiple-components/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/10278-ts-multiple-components/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/10278-ts-multiple-components/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/10278-ts-multiple-components/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/10278-ts-multiple-components/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/10278-ts-multiple-components/input.tsx b/app/react/src/client/docs/__testfixtures__/10278-ts-multiple-components/input.tsx similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/10278-ts-multiple-components/input.tsx rename to app/react/src/client/docs/__testfixtures__/10278-ts-multiple-components/input.tsx diff --git a/addons/docs/src/frameworks/react/__testfixtures__/10278-ts-multiple-components/properties.snapshot b/app/react/src/client/docs/__testfixtures__/10278-ts-multiple-components/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/10278-ts-multiple-components/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/10278-ts-multiple-components/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/8140-js-prop-types-oneof/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/8140-js-prop-types-oneof/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/8140-js-prop-types-oneof/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/8140-js-prop-types-oneof/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/input.js b/app/react/src/client/docs/__testfixtures__/8140-js-prop-types-oneof/input.js similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/input.js rename to app/react/src/client/docs/__testfixtures__/8140-js-prop-types-oneof/input.js diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/properties.snapshot b/app/react/src/client/docs/__testfixtures__/8140-js-prop-types-oneof/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/8140-js-prop-types-oneof/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/8143-ts-imported-types/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/8143-ts-imported-types/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/8143-ts-imported-types/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/8143-ts-imported-types/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/input.tsx b/app/react/src/client/docs/__testfixtures__/8143-ts-imported-types/input.tsx similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/input.tsx rename to app/react/src/client/docs/__testfixtures__/8143-ts-imported-types/input.tsx diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/properties.snapshot b/app/react/src/client/docs/__testfixtures__/8143-ts-imported-types/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/8143-ts-imported-types/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/types.ts b/app/react/src/client/docs/__testfixtures__/8143-ts-imported-types/types.ts similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/types.ts rename to app/react/src/client/docs/__testfixtures__/8143-ts-imported-types/types.ts diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-react-fc-generics/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/8143-ts-react-fc-generics/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8143-ts-react-fc-generics/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/8143-ts-react-fc-generics/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-react-fc-generics/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/8143-ts-react-fc-generics/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8143-ts-react-fc-generics/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/8143-ts-react-fc-generics/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-react-fc-generics/input.tsx b/app/react/src/client/docs/__testfixtures__/8143-ts-react-fc-generics/input.tsx similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8143-ts-react-fc-generics/input.tsx rename to app/react/src/client/docs/__testfixtures__/8143-ts-react-fc-generics/input.tsx diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8143-ts-react-fc-generics/properties.snapshot b/app/react/src/client/docs/__testfixtures__/8143-ts-react-fc-generics/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8143-ts-react-fc-generics/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/8143-ts-react-fc-generics/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8279-js-styled-docgen/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/8279-js-styled-docgen/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8279-js-styled-docgen/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/8279-js-styled-docgen/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8279-js-styled-docgen/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/8279-js-styled-docgen/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8279-js-styled-docgen/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/8279-js-styled-docgen/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8279-js-styled-docgen/input.js b/app/react/src/client/docs/__testfixtures__/8279-js-styled-docgen/input.js similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8279-js-styled-docgen/input.js rename to app/react/src/client/docs/__testfixtures__/8279-js-styled-docgen/input.js diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8279-js-styled-docgen/properties.snapshot b/app/react/src/client/docs/__testfixtures__/8279-js-styled-docgen/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8279-js-styled-docgen/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/8279-js-styled-docgen/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/8428-js-static-prop-types/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/8428-js-static-prop-types/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/8428-js-static-prop-types/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/8428-js-static-prop-types/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/input.js b/app/react/src/client/docs/__testfixtures__/8428-js-static-prop-types/input.js similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/input.js rename to app/react/src/client/docs/__testfixtures__/8428-js-static-prop-types/input.js diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/properties.snapshot b/app/react/src/client/docs/__testfixtures__/8428-js-static-prop-types/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/8428-js-static-prop-types/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/8663-js-styled-components/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/8663-js-styled-components/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/8663-js-styled-components/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/8663-js-styled-components/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/input.js b/app/react/src/client/docs/__testfixtures__/8663-js-styled-components/input.js similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/input.js rename to app/react/src/client/docs/__testfixtures__/8663-js-styled-components/input.js diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/properties.snapshot b/app/react/src/client/docs/__testfixtures__/8663-js-styled-components/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/8663-js-styled-components/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/8740-ts-multi-props/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/8740-ts-multi-props/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/8740-ts-multi-props/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/8740-ts-multi-props/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/input.tsx b/app/react/src/client/docs/__testfixtures__/8740-ts-multi-props/input.tsx similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/input.tsx rename to app/react/src/client/docs/__testfixtures__/8740-ts-multi-props/input.tsx diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/properties.snapshot b/app/react/src/client/docs/__testfixtures__/8740-ts-multi-props/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8740-ts-multi-props/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/8740-ts-multi-props/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8894-9511-ts-forward-ref/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/8894-9511-ts-forward-ref/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8894-9511-ts-forward-ref/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/8894-9511-ts-forward-ref/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8894-9511-ts-forward-ref/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/8894-9511-ts-forward-ref/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8894-9511-ts-forward-ref/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/8894-9511-ts-forward-ref/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8894-9511-ts-forward-ref/input.tsx b/app/react/src/client/docs/__testfixtures__/8894-9511-ts-forward-ref/input.tsx similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8894-9511-ts-forward-ref/input.tsx rename to app/react/src/client/docs/__testfixtures__/8894-9511-ts-forward-ref/input.tsx diff --git a/addons/docs/src/frameworks/react/__testfixtures__/8894-9511-ts-forward-ref/properties.snapshot b/app/react/src/client/docs/__testfixtures__/8894-9511-ts-forward-ref/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/8894-9511-ts-forward-ref/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/8894-9511-ts-forward-ref/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/9023-js-hoc/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/9023-js-hoc/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/9023-js-hoc/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/9023-js-hoc/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/input.js b/app/react/src/client/docs/__testfixtures__/9023-js-hoc/input.js similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/input.js rename to app/react/src/client/docs/__testfixtures__/9023-js-hoc/input.js diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/properties.snapshot b/app/react/src/client/docs/__testfixtures__/9023-js-hoc/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/9023-js-hoc/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9399-js-proptypes-shape/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/9399-js-proptypes-shape/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9399-js-proptypes-shape/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/9399-js-proptypes-shape/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9399-js-proptypes-shape/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/9399-js-proptypes-shape/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9399-js-proptypes-shape/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/9399-js-proptypes-shape/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9399-js-proptypes-shape/input.js b/app/react/src/client/docs/__testfixtures__/9399-js-proptypes-shape/input.js similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9399-js-proptypes-shape/input.js rename to app/react/src/client/docs/__testfixtures__/9399-js-proptypes-shape/input.js diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9399-js-proptypes-shape/properties.snapshot b/app/react/src/client/docs/__testfixtures__/9399-js-proptypes-shape/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9399-js-proptypes-shape/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/9399-js-proptypes-shape/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9465-ts-type-props/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/9465-ts-type-props/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9465-ts-type-props/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/9465-ts-type-props/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9465-ts-type-props/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/9465-ts-type-props/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9465-ts-type-props/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/9465-ts-type-props/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9465-ts-type-props/input.tsx b/app/react/src/client/docs/__testfixtures__/9465-ts-type-props/input.tsx similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9465-ts-type-props/input.tsx rename to app/react/src/client/docs/__testfixtures__/9465-ts-type-props/input.tsx diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9465-ts-type-props/properties.snapshot b/app/react/src/client/docs/__testfixtures__/9465-ts-type-props/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9465-ts-type-props/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/9465-ts-type-props/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9493-ts-display-name/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/9493-ts-display-name/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9493-ts-display-name/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/9493-ts-display-name/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9493-ts-display-name/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/9493-ts-display-name/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9493-ts-display-name/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/9493-ts-display-name/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9493-ts-display-name/input.tsx b/app/react/src/client/docs/__testfixtures__/9493-ts-display-name/input.tsx similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9493-ts-display-name/input.tsx rename to app/react/src/client/docs/__testfixtures__/9493-ts-display-name/input.tsx diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9493-ts-display-name/properties.snapshot b/app/react/src/client/docs/__testfixtures__/9493-ts-display-name/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9493-ts-display-name/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/9493-ts-display-name/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9556-ts-react-default-exports/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/9556-ts-react-default-exports/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9556-ts-react-default-exports/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/9556-ts-react-default-exports/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9556-ts-react-default-exports/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/9556-ts-react-default-exports/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9556-ts-react-default-exports/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/9556-ts-react-default-exports/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9556-ts-react-default-exports/input.tsx b/app/react/src/client/docs/__testfixtures__/9556-ts-react-default-exports/input.tsx similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9556-ts-react-default-exports/input.tsx rename to app/react/src/client/docs/__testfixtures__/9556-ts-react-default-exports/input.tsx diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9556-ts-react-default-exports/properties.snapshot b/app/react/src/client/docs/__testfixtures__/9556-ts-react-default-exports/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9556-ts-react-default-exports/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/9556-ts-react-default-exports/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/9575-ts-camel-case/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/9575-ts-camel-case/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/9575-ts-camel-case/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/9575-ts-camel-case/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/input.tsx b/app/react/src/client/docs/__testfixtures__/9575-ts-camel-case/input.tsx similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/input.tsx rename to app/react/src/client/docs/__testfixtures__/9575-ts-camel-case/input.tsx diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/properties.snapshot b/app/react/src/client/docs/__testfixtures__/9575-ts-camel-case/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/9575-ts-camel-case/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9586-js-react-memo/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/9586-js-react-memo/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9586-js-react-memo/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/9586-js-react-memo/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9586-js-react-memo/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/9586-js-react-memo/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9586-js-react-memo/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/9586-js-react-memo/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9586-js-react-memo/input.js b/app/react/src/client/docs/__testfixtures__/9586-js-react-memo/input.js similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9586-js-react-memo/input.js rename to app/react/src/client/docs/__testfixtures__/9586-js-react-memo/input.js diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9586-js-react-memo/properties.snapshot b/app/react/src/client/docs/__testfixtures__/9586-js-react-memo/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9586-js-react-memo/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/9586-js-react-memo/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/Bar.tsx b/app/react/src/client/docs/__testfixtures__/9591-ts-import-types/Bar.tsx similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/Bar.tsx rename to app/react/src/client/docs/__testfixtures__/9591-ts-import-types/Bar.tsx diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/9591-ts-import-types/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/9591-ts-import-types/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/9591-ts-import-types/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/9591-ts-import-types/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/input.tsx b/app/react/src/client/docs/__testfixtures__/9591-ts-import-types/input.tsx similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/input.tsx rename to app/react/src/client/docs/__testfixtures__/9591-ts-import-types/input.tsx diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/properties.snapshot b/app/react/src/client/docs/__testfixtures__/9591-ts-import-types/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/9591-ts-import-types/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9592-ts-styled-props/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/9592-ts-styled-props/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9592-ts-styled-props/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/9592-ts-styled-props/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9592-ts-styled-props/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/9592-ts-styled-props/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9592-ts-styled-props/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/9592-ts-styled-props/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9592-ts-styled-props/input.tsx b/app/react/src/client/docs/__testfixtures__/9592-ts-styled-props/input.tsx similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9592-ts-styled-props/input.tsx rename to app/react/src/client/docs/__testfixtures__/9592-ts-styled-props/input.tsx diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9592-ts-styled-props/properties.snapshot b/app/react/src/client/docs/__testfixtures__/9592-ts-styled-props/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9592-ts-styled-props/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/9592-ts-styled-props/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9626-js-default-values/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/9626-js-default-values/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9626-js-default-values/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/9626-js-default-values/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9626-js-default-values/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/9626-js-default-values/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9626-js-default-values/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/9626-js-default-values/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9626-js-default-values/input.js b/app/react/src/client/docs/__testfixtures__/9626-js-default-values/input.js similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9626-js-default-values/input.js rename to app/react/src/client/docs/__testfixtures__/9626-js-default-values/input.js diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9626-js-default-values/properties.snapshot b/app/react/src/client/docs/__testfixtures__/9626-js-default-values/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9626-js-default-values/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/9626-js-default-values/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/9668-js-proptypes-no-jsdoc/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/9668-js-proptypes-no-jsdoc/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/9668-js-proptypes-no-jsdoc/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/9668-js-proptypes-no-jsdoc/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/input.js b/app/react/src/client/docs/__testfixtures__/9668-js-proptypes-no-jsdoc/input.js similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/input.js rename to app/react/src/client/docs/__testfixtures__/9668-js-proptypes-no-jsdoc/input.js diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/properties.snapshot b/app/react/src/client/docs/__testfixtures__/9668-js-proptypes-no-jsdoc/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/9668-js-proptypes-no-jsdoc/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9721-ts-deprecated-jsdoc/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/9721-ts-deprecated-jsdoc/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9721-ts-deprecated-jsdoc/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/9721-ts-deprecated-jsdoc/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9721-ts-deprecated-jsdoc/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/9721-ts-deprecated-jsdoc/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9721-ts-deprecated-jsdoc/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/9721-ts-deprecated-jsdoc/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9721-ts-deprecated-jsdoc/input.tsx b/app/react/src/client/docs/__testfixtures__/9721-ts-deprecated-jsdoc/input.tsx similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9721-ts-deprecated-jsdoc/input.tsx rename to app/react/src/client/docs/__testfixtures__/9721-ts-deprecated-jsdoc/input.tsx diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9721-ts-deprecated-jsdoc/properties.snapshot b/app/react/src/client/docs/__testfixtures__/9721-ts-deprecated-jsdoc/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9721-ts-deprecated-jsdoc/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/9721-ts-deprecated-jsdoc/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9764-ts-extend-props/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/9764-ts-extend-props/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9764-ts-extend-props/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/9764-ts-extend-props/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9764-ts-extend-props/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/9764-ts-extend-props/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9764-ts-extend-props/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/9764-ts-extend-props/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9764-ts-extend-props/input.tsx b/app/react/src/client/docs/__testfixtures__/9764-ts-extend-props/input.tsx similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9764-ts-extend-props/input.tsx rename to app/react/src/client/docs/__testfixtures__/9764-ts-extend-props/input.tsx diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9764-ts-extend-props/properties.snapshot b/app/react/src/client/docs/__testfixtures__/9764-ts-extend-props/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9764-ts-extend-props/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/9764-ts-extend-props/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9827-ts-default-values/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/9827-ts-default-values/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9827-ts-default-values/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/9827-ts-default-values/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9827-ts-default-values/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/9827-ts-default-values/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9827-ts-default-values/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/9827-ts-default-values/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9827-ts-default-values/input.tsx b/app/react/src/client/docs/__testfixtures__/9827-ts-default-values/input.tsx similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9827-ts-default-values/input.tsx rename to app/react/src/client/docs/__testfixtures__/9827-ts-default-values/input.tsx diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9827-ts-default-values/properties.snapshot b/app/react/src/client/docs/__testfixtures__/9827-ts-default-values/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9827-ts-default-values/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/9827-ts-default-values/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9832-ts-enum-export/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/9832-ts-enum-export/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9832-ts-enum-export/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/9832-ts-enum-export/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9832-ts-enum-export/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/9832-ts-enum-export/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9832-ts-enum-export/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/9832-ts-enum-export/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9832-ts-enum-export/input.tsx b/app/react/src/client/docs/__testfixtures__/9832-ts-enum-export/input.tsx similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9832-ts-enum-export/input.tsx rename to app/react/src/client/docs/__testfixtures__/9832-ts-enum-export/input.tsx diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9832-ts-enum-export/properties.snapshot b/app/react/src/client/docs/__testfixtures__/9832-ts-enum-export/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9832-ts-enum-export/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/9832-ts-enum-export/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/9922-ts-component-props/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/9922-ts-component-props/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/9922-ts-component-props/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/9922-ts-component-props/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/input.tsx b/app/react/src/client/docs/__testfixtures__/9922-ts-component-props/input.tsx similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/input.tsx rename to app/react/src/client/docs/__testfixtures__/9922-ts-component-props/input.tsx diff --git a/addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/properties.snapshot b/app/react/src/client/docs/__testfixtures__/9922-ts-component-props/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/9922-ts-component-props/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/imported.js b/app/react/src/client/docs/__testfixtures__/imported.js similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/imported.js rename to app/react/src/client/docs/__testfixtures__/imported.js diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-class-component/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/js-class-component/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/js-class-component/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/js-class-component/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-class-component/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/js-class-component/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/js-class-component/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/js-class-component/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-class-component/input.js b/app/react/src/client/docs/__testfixtures__/js-class-component/input.js similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/js-class-component/input.js rename to app/react/src/client/docs/__testfixtures__/js-class-component/input.js diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-class-component/properties.snapshot b/app/react/src/client/docs/__testfixtures__/js-class-component/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/js-class-component/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/js-class-component/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-function-component-inline-defaults-no-propTypes/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/js-function-component-inline-defaults-no-propTypes/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/js-function-component-inline-defaults-no-propTypes/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/js-function-component-inline-defaults-no-propTypes/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-function-component-inline-defaults-no-propTypes/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/js-function-component-inline-defaults-no-propTypes/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/js-function-component-inline-defaults-no-propTypes/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/js-function-component-inline-defaults-no-propTypes/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-function-component-inline-defaults-no-propTypes/input.js b/app/react/src/client/docs/__testfixtures__/js-function-component-inline-defaults-no-propTypes/input.js similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/js-function-component-inline-defaults-no-propTypes/input.js rename to app/react/src/client/docs/__testfixtures__/js-function-component-inline-defaults-no-propTypes/input.js diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-function-component-inline-defaults-no-propTypes/properties.snapshot b/app/react/src/client/docs/__testfixtures__/js-function-component-inline-defaults-no-propTypes/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/js-function-component-inline-defaults-no-propTypes/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/js-function-component-inline-defaults-no-propTypes/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-function-component-inline-defaults/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/js-function-component-inline-defaults/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/js-function-component-inline-defaults/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/js-function-component-inline-defaults/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-function-component-inline-defaults/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/js-function-component-inline-defaults/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/js-function-component-inline-defaults/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/js-function-component-inline-defaults/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-function-component-inline-defaults/input.js b/app/react/src/client/docs/__testfixtures__/js-function-component-inline-defaults/input.js similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/js-function-component-inline-defaults/input.js rename to app/react/src/client/docs/__testfixtures__/js-function-component-inline-defaults/input.js diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-function-component-inline-defaults/properties.snapshot b/app/react/src/client/docs/__testfixtures__/js-function-component-inline-defaults/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/js-function-component-inline-defaults/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/js-function-component-inline-defaults/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-function-component/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/js-function-component/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/js-function-component/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/js-function-component/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-function-component/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/js-function-component/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/js-function-component/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/js-function-component/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-function-component/input.js b/app/react/src/client/docs/__testfixtures__/js-function-component/input.js similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/js-function-component/input.js rename to app/react/src/client/docs/__testfixtures__/js-function-component/input.js diff --git a/addons/docs/src/frameworks/react/__testfixtures__/js-function-component/properties.snapshot b/app/react/src/client/docs/__testfixtures__/js-function-component/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/js-function-component/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/js-function-component/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component-inline-defaults/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/ts-function-component-inline-defaults/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/ts-function-component-inline-defaults/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/ts-function-component-inline-defaults/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component-inline-defaults/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/ts-function-component-inline-defaults/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/ts-function-component-inline-defaults/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/ts-function-component-inline-defaults/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component-inline-defaults/input.tsx b/app/react/src/client/docs/__testfixtures__/ts-function-component-inline-defaults/input.tsx similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/ts-function-component-inline-defaults/input.tsx rename to app/react/src/client/docs/__testfixtures__/ts-function-component-inline-defaults/input.tsx diff --git a/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component-inline-defaults/properties.snapshot b/app/react/src/client/docs/__testfixtures__/ts-function-component-inline-defaults/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/ts-function-component-inline-defaults/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/ts-function-component-inline-defaults/properties.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component/argTypes.snapshot b/app/react/src/client/docs/__testfixtures__/ts-function-component/argTypes.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/ts-function-component/argTypes.snapshot rename to app/react/src/client/docs/__testfixtures__/ts-function-component/argTypes.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component/docgen.snapshot b/app/react/src/client/docs/__testfixtures__/ts-function-component/docgen.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/ts-function-component/docgen.snapshot rename to app/react/src/client/docs/__testfixtures__/ts-function-component/docgen.snapshot diff --git a/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component/input.tsx b/app/react/src/client/docs/__testfixtures__/ts-function-component/input.tsx similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/ts-function-component/input.tsx rename to app/react/src/client/docs/__testfixtures__/ts-function-component/input.tsx diff --git a/addons/docs/src/frameworks/react/__testfixtures__/ts-function-component/properties.snapshot b/app/react/src/client/docs/__testfixtures__/ts-function-component/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/react/__testfixtures__/ts-function-component/properties.snapshot rename to app/react/src/client/docs/__testfixtures__/ts-function-component/properties.snapshot diff --git a/addons/docs/src/frameworks/react/config.ts b/app/react/src/client/docs/config.ts similarity index 65% rename from addons/docs/src/frameworks/react/config.ts rename to app/react/src/client/docs/config.ts index 28ef4afc0e47..393befc24150 100644 --- a/addons/docs/src/frameworks/react/config.ts +++ b/app/react/src/client/docs/config.ts @@ -1,8 +1,8 @@ -import { PartialStoryFn } from '@storybook/csf'; -import { ReactFramework } from '@storybook/react'; +import type { PartialStoryFn } from '@storybook/csf'; +import { extractComponentDescription, enhanceArgTypes } from '@storybook/docs-tools'; +import { ReactFramework } from '..'; import { extractArgTypes } from './extractArgTypes'; -import { extractComponentDescription } from '../../lib/docgen'; import { jsxDecorator } from './jsxDecorator'; export const parameters = { @@ -16,3 +16,5 @@ export const parameters = { }; export const decorators = [jsxDecorator]; + +export const argTypesEnhancers = [enhanceArgTypes]; diff --git a/addons/docs/src/frameworks/react/extractArgTypes.ts b/app/react/src/client/docs/extractArgTypes.ts similarity index 85% rename from addons/docs/src/frameworks/react/extractArgTypes.ts rename to app/react/src/client/docs/extractArgTypes.ts index e86dcaa99b88..333052be43e1 100644 --- a/addons/docs/src/frameworks/react/extractArgTypes.ts +++ b/app/react/src/client/docs/extractArgTypes.ts @@ -1,5 +1,5 @@ -import { StrictArgTypes } from '@storybook/csf'; -import { PropDef, ArgTypesExtractor } from '../../lib/docgen'; +import type { StrictArgTypes } from '@storybook/csf'; +import type { PropDef, ArgTypesExtractor } from '@storybook/docs-tools'; import { extractProps } from './extractProps'; export const extractArgTypes: ArgTypesExtractor = (component) => { diff --git a/addons/docs/src/frameworks/react/extractProps.ts b/app/react/src/client/docs/extractProps.ts similarity index 94% rename from addons/docs/src/frameworks/react/extractProps.ts rename to app/react/src/client/docs/extractProps.ts index 008aa8b26117..e763fd9e374f 100644 --- a/addons/docs/src/frameworks/react/extractProps.ts +++ b/app/react/src/client/docs/extractProps.ts @@ -5,12 +5,14 @@ import { extractComponentProps, PropsExtractor, TypeSystem, -} from '../../lib/docgen'; -import { Component } from '../../blocks/types'; +} from '@storybook/docs-tools'; import { enhancePropTypesProps } from './propTypes/handleProp'; import { enhanceTypeScriptProps } from './typeScript/handleProp'; import { isMemo } from './lib'; +// FIXME +type Component = any; + export interface PropDefMap { [p: string]: PropDef; } diff --git a/addons/docs/src/frameworks/react/jsxDecorator.test.tsx b/app/react/src/client/docs/jsxDecorator.test.tsx similarity index 99% rename from addons/docs/src/frameworks/react/jsxDecorator.test.tsx rename to app/react/src/client/docs/jsxDecorator.test.tsx index b18e9984c51e..40eb7c57b74d 100644 --- a/addons/docs/src/frameworks/react/jsxDecorator.test.tsx +++ b/app/react/src/client/docs/jsxDecorator.test.tsx @@ -2,8 +2,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import { addons, StoryContext, useEffect } from '@storybook/addons'; +import { SNIPPET_RENDERED } from '@storybook/docs-tools'; import { renderJsx, jsxDecorator } from './jsxDecorator'; -import { SNIPPET_RENDERED } from '../../shared'; jest.mock('@storybook/addons'); const mockedAddons = addons as jest.Mocked; diff --git a/addons/docs/src/frameworks/react/jsxDecorator.tsx b/app/react/src/client/docs/jsxDecorator.tsx similarity index 97% rename from addons/docs/src/frameworks/react/jsxDecorator.tsx rename to app/react/src/client/docs/jsxDecorator.tsx index 9170adaa3ccb..727ee31e5f98 100644 --- a/addons/docs/src/frameworks/react/jsxDecorator.tsx +++ b/app/react/src/client/docs/jsxDecorator.tsx @@ -5,11 +5,11 @@ import deprecate from 'util-deprecate'; import { addons, useEffect } from '@storybook/addons'; import { StoryContext, ArgsStoryFn, PartialStoryFn } from '@storybook/csf'; +import { SourceType, SNIPPET_RENDERED, getDocgenSection } from '@storybook/docs-tools'; import { logger } from '@storybook/client-logger'; -import { ReactFramework } from '@storybook/react'; -import { SourceType, SNIPPET_RENDERED } from '../../shared'; -import { getDocgenSection } from '../../lib/docgen'; +import { ReactFramework } from '..'; + import { isMemo, isForwardRef } from './lib'; type JSXOptions = Options & { diff --git a/addons/docs/src/frameworks/react/lib/captions.ts b/app/react/src/client/docs/lib/captions.ts similarity index 100% rename from addons/docs/src/frameworks/react/lib/captions.ts rename to app/react/src/client/docs/lib/captions.ts diff --git a/addons/docs/src/frameworks/react/lib/componentTypes.ts b/app/react/src/client/docs/lib/componentTypes.ts similarity index 100% rename from addons/docs/src/frameworks/react/lib/componentTypes.ts rename to app/react/src/client/docs/lib/componentTypes.ts diff --git a/addons/docs/src/frameworks/react/lib/defaultValues/createDefaultValue.ts b/app/react/src/client/docs/lib/defaultValues/createDefaultValue.ts similarity index 94% rename from addons/docs/src/frameworks/react/lib/defaultValues/createDefaultValue.ts rename to app/react/src/client/docs/lib/defaultValues/createDefaultValue.ts index c4cd930e1011..c2fb441d32c1 100644 --- a/addons/docs/src/frameworks/react/lib/defaultValues/createDefaultValue.ts +++ b/app/react/src/client/docs/lib/defaultValues/createDefaultValue.ts @@ -1,4 +1,9 @@ -import { PropDefaultValue } from '@storybook/components'; +import { + createSummaryValue, + isTooLongForDefaultValueSummary, + PropDefaultValue, +} from '@storybook/docs-tools'; + import { FUNCTION_CAPTION, ELEMENT_CAPTION } from '../captions'; import { InspectionFunction, @@ -9,7 +14,6 @@ import { inspectValue, } from '../inspection'; import { isHtmlTag } from '../isHtmlTag'; -import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../../lib'; import { generateCode } from '../generateCode'; import { generateObject } from './generateObject'; import { generateArray } from './generateArray'; diff --git a/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts b/app/react/src/client/docs/lib/defaultValues/createFromRawDefaultProp.ts similarity index 96% rename from addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts rename to app/react/src/client/docs/lib/defaultValues/createFromRawDefaultProp.ts index 6ef614385b5f..1fba89efa580 100644 --- a/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts +++ b/app/react/src/client/docs/lib/defaultValues/createFromRawDefaultProp.ts @@ -1,11 +1,15 @@ -import { PropDefaultValue } from '@storybook/components'; import isPlainObject from 'lodash/isPlainObject'; import isFunction from 'lodash/isFunction'; import isString from 'lodash/isString'; // @ts-ignore import reactElementToJSXString from 'react-element-to-jsx-string'; -import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../../lib'; -import { PropDef } from '../../../../lib/docgen'; +import { + PropDef, + createSummaryValue, + isTooLongForDefaultValueSummary, + PropDefaultValue, +} from '@storybook/docs-tools'; + import { inspectValue, InspectionFunction } from '../inspection'; import { generateObject } from './generateObject'; import { generateArray } from './generateArray'; diff --git a/addons/docs/src/frameworks/react/lib/defaultValues/generateArray.ts b/app/react/src/client/docs/lib/defaultValues/generateArray.ts similarity index 79% rename from addons/docs/src/frameworks/react/lib/defaultValues/generateArray.ts rename to app/react/src/client/docs/lib/defaultValues/generateArray.ts index 6956b0979313..8d80f9a371fb 100644 --- a/addons/docs/src/frameworks/react/lib/defaultValues/generateArray.ts +++ b/app/react/src/client/docs/lib/defaultValues/generateArray.ts @@ -1,7 +1,10 @@ -import { PropDefaultValue } from '@storybook/components'; +import { + createSummaryValue, + isTooLongForDefaultValueSummary, + PropDefaultValue, +} from '@storybook/docs-tools'; import { ARRAY_CAPTION } from '../captions'; import { InspectionResult, InspectionArray } from '../inspection'; -import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../../lib'; import { generateArrayCode } from '../generateCode'; export function generateArray({ inferredType, ast }: InspectionResult): PropDefaultValue { diff --git a/addons/docs/src/frameworks/react/lib/defaultValues/generateObject.ts b/app/react/src/client/docs/lib/defaultValues/generateObject.ts similarity index 80% rename from addons/docs/src/frameworks/react/lib/defaultValues/generateObject.ts rename to app/react/src/client/docs/lib/defaultValues/generateObject.ts index c831271d6a62..2aa6e45e7a3f 100644 --- a/addons/docs/src/frameworks/react/lib/defaultValues/generateObject.ts +++ b/app/react/src/client/docs/lib/defaultValues/generateObject.ts @@ -1,7 +1,11 @@ -import { PropDefaultValue } from '@storybook/components'; +import { + createSummaryValue, + isTooLongForDefaultValueSummary, + PropDefaultValue, +} from '@storybook/docs-tools'; + import { OBJECT_CAPTION } from '../captions'; import { InspectionResult, InspectionArray } from '../inspection'; -import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../../lib'; import { generateObjectCode } from '../generateCode'; export function generateObject({ inferredType, ast }: InspectionResult): PropDefaultValue { diff --git a/addons/docs/src/frameworks/react/lib/defaultValues/index.ts b/app/react/src/client/docs/lib/defaultValues/index.ts similarity index 100% rename from addons/docs/src/frameworks/react/lib/defaultValues/index.ts rename to app/react/src/client/docs/lib/defaultValues/index.ts diff --git a/addons/docs/src/frameworks/react/lib/defaultValues/prettyIdentifier.ts b/app/react/src/client/docs/lib/defaultValues/prettyIdentifier.ts similarity index 100% rename from addons/docs/src/frameworks/react/lib/defaultValues/prettyIdentifier.ts rename to app/react/src/client/docs/lib/defaultValues/prettyIdentifier.ts diff --git a/addons/docs/src/frameworks/react/lib/generateCode.ts b/app/react/src/client/docs/lib/generateCode.ts similarity index 100% rename from addons/docs/src/frameworks/react/lib/generateCode.ts rename to app/react/src/client/docs/lib/generateCode.ts diff --git a/addons/docs/src/frameworks/react/lib/index.ts b/app/react/src/client/docs/lib/index.ts similarity index 100% rename from addons/docs/src/frameworks/react/lib/index.ts rename to app/react/src/client/docs/lib/index.ts diff --git a/addons/docs/src/frameworks/react/lib/inspection/acornParser.test.ts b/app/react/src/client/docs/lib/inspection/acornParser.test.ts similarity index 100% rename from addons/docs/src/frameworks/react/lib/inspection/acornParser.test.ts rename to app/react/src/client/docs/lib/inspection/acornParser.test.ts diff --git a/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts b/app/react/src/client/docs/lib/inspection/acornParser.ts similarity index 100% rename from addons/docs/src/frameworks/react/lib/inspection/acornParser.ts rename to app/react/src/client/docs/lib/inspection/acornParser.ts diff --git a/addons/docs/src/frameworks/react/lib/inspection/index.ts b/app/react/src/client/docs/lib/inspection/index.ts similarity index 100% rename from addons/docs/src/frameworks/react/lib/inspection/index.ts rename to app/react/src/client/docs/lib/inspection/index.ts diff --git a/addons/docs/src/frameworks/react/lib/inspection/inspectValue.ts b/app/react/src/client/docs/lib/inspection/inspectValue.ts similarity index 100% rename from addons/docs/src/frameworks/react/lib/inspection/inspectValue.ts rename to app/react/src/client/docs/lib/inspection/inspectValue.ts diff --git a/addons/docs/src/frameworks/react/lib/inspection/types.ts b/app/react/src/client/docs/lib/inspection/types.ts similarity index 100% rename from addons/docs/src/frameworks/react/lib/inspection/types.ts rename to app/react/src/client/docs/lib/inspection/types.ts diff --git a/addons/docs/src/frameworks/react/lib/isHtmlTag.ts b/app/react/src/client/docs/lib/isHtmlTag.ts similarity index 100% rename from addons/docs/src/frameworks/react/lib/isHtmlTag.ts rename to app/react/src/client/docs/lib/isHtmlTag.ts diff --git a/addons/docs/src/frameworks/react/propTypes/createType.ts b/app/react/src/client/docs/propTypes/createType.ts similarity index 98% rename from addons/docs/src/frameworks/react/propTypes/createType.ts rename to app/react/src/client/docs/propTypes/createType.ts index 6af9bc582898..cc3286dce0cc 100644 --- a/addons/docs/src/frameworks/react/propTypes/createType.ts +++ b/app/react/src/client/docs/propTypes/createType.ts @@ -1,6 +1,5 @@ -import { PropType } from '@storybook/components'; -import { createSummaryValue, isTooLongForTypeSummary } from '../../../lib'; -import { ExtractedProp, DocgenPropType } from '../../../lib/docgen'; +import type { ExtractedProp, DocgenPropType, PropType } from '@storybook/docs-tools'; +import { createSummaryValue, isTooLongForTypeSummary } from '@storybook/docs-tools'; import { generateFuncSignature, generateShortFuncSignature, diff --git a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.test.ts b/app/react/src/client/docs/propTypes/generateFuncSignature.test.ts similarity index 99% rename from addons/docs/src/frameworks/react/propTypes/generateFuncSignature.test.ts rename to app/react/src/client/docs/propTypes/generateFuncSignature.test.ts index 92f6575c9374..c62464b01e1b 100644 --- a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.test.ts +++ b/app/react/src/client/docs/propTypes/generateFuncSignature.test.ts @@ -1,5 +1,5 @@ +import { parseJsDoc } from '@storybook/docs-tools'; import { generateFuncSignature, generateShortFuncSignature } from './generateFuncSignature'; -import { parseJsDoc } from '../../../lib/jsdocParser'; describe('generateFuncSignature', () => { it('should return an empty string when there is no @params and @returns tags', () => { diff --git a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts b/app/react/src/client/docs/propTypes/generateFuncSignature.ts similarity index 93% rename from addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts rename to app/react/src/client/docs/propTypes/generateFuncSignature.ts index 0d6b6c251d86..2e1b500a9e5f 100644 --- a/addons/docs/src/frameworks/react/propTypes/generateFuncSignature.ts +++ b/app/react/src/client/docs/propTypes/generateFuncSignature.ts @@ -1,4 +1,4 @@ -import { ExtractedJsDocParam, ExtractedJsDocReturns } from '../../../lib/jsdocParser'; +import { ExtractedJsDocParam, ExtractedJsDocReturns } from '@storybook/docs-tools'; export function generateFuncSignature( params: ExtractedJsDocParam[], diff --git a/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx b/app/react/src/client/docs/propTypes/handleProp.test.tsx similarity index 99% rename from addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx rename to app/react/src/client/docs/propTypes/handleProp.test.tsx index 4483a6a1f754..84dfecd350e0 100644 --- a/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx +++ b/app/react/src/client/docs/propTypes/handleProp.test.tsx @@ -2,15 +2,15 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { Component } from '../../../blocks/types'; import { PropDef, extractComponentProps, DocgenInfo, DocgenPropDefaultValue, -} from '../../../lib/docgen'; +} from '@storybook/docs-tools'; import { enhancePropTypesProp, enhancePropTypesProps } from './handleProp'; +type Component = any; const DOCGEN_SECTION = 'props'; function ReactComponent() { diff --git a/addons/docs/src/frameworks/react/propTypes/handleProp.ts b/app/react/src/client/docs/propTypes/handleProp.ts similarity index 92% rename from addons/docs/src/frameworks/react/propTypes/handleProp.ts rename to app/react/src/client/docs/propTypes/handleProp.ts index 232c1d0cf89c..a59022ffd7e3 100644 --- a/addons/docs/src/frameworks/react/propTypes/handleProp.ts +++ b/app/react/src/client/docs/propTypes/handleProp.ts @@ -1,10 +1,11 @@ -import { PropDef, ExtractedProp } from '../../../lib/docgen'; +import { PropDef, ExtractedProp } from '@storybook/docs-tools'; import { createType } from './createType'; import { createDefaultValue, createDefaultValueFromRawDefaultProp } from '../lib/defaultValues'; -import { Component } from '../../../blocks/types'; import { keepOriginalDefinitionOrder } from './sortProps'; import { rawDefaultPropTypeResolvers } from './rawDefaultPropResolvers'; +type Component = any; + export function enhancePropTypesProp(extractedProp: ExtractedProp, rawDefaultProp?: any): PropDef { const { propDef } = extractedProp; diff --git a/addons/docs/src/frameworks/react/propTypes/rawDefaultPropResolvers.ts b/app/react/src/client/docs/propTypes/rawDefaultPropResolvers.ts similarity index 95% rename from addons/docs/src/frameworks/react/propTypes/rawDefaultPropResolvers.ts rename to app/react/src/client/docs/propTypes/rawDefaultPropResolvers.ts index 9433159adde6..692554e7e37b 100644 --- a/addons/docs/src/frameworks/react/propTypes/rawDefaultPropResolvers.ts +++ b/app/react/src/client/docs/propTypes/rawDefaultPropResolvers.ts @@ -1,5 +1,5 @@ +import { createSummaryValue } from '@storybook/docs-tools'; import { TypeResolver, extractFunctionName, createTypeResolvers } from '../lib/defaultValues'; -import { createSummaryValue } from '../../../lib'; import { FUNCTION_CAPTION, ELEMENT_CAPTION } from '../lib'; import { getPrettyElementIdentifier, diff --git a/addons/docs/src/frameworks/react/propTypes/sortProps.ts b/app/react/src/client/docs/propTypes/sortProps.ts similarity index 85% rename from addons/docs/src/frameworks/react/propTypes/sortProps.ts rename to app/react/src/client/docs/propTypes/sortProps.ts index 4cc5720a1345..4d5dbb19e143 100644 --- a/addons/docs/src/frameworks/react/propTypes/sortProps.ts +++ b/app/react/src/client/docs/propTypes/sortProps.ts @@ -1,5 +1,6 @@ -import { PropDef } from '../../../lib/docgen'; -import { Component } from '../../../blocks/types'; +import { PropDef } from '@storybook/docs-tools'; + +type Component = any; // react-docgen doesn't returned the props in the order they were defined in the "propTypes" object of the component. // This function re-order them by their original definition order. diff --git a/addons/docs/src/frameworks/react/react-argtypes.stories.tsx b/app/react/src/client/docs/react-argtypes.stories.tsx similarity index 71% rename from addons/docs/src/frameworks/react/react-argtypes.stories.tsx rename to app/react/src/client/docs/react-argtypes.stories.tsx index 5f98016d96a3..9a14a0c39f64 100644 --- a/addons/docs/src/frameworks/react/react-argtypes.stories.tsx +++ b/app/react/src/client/docs/react-argtypes.stories.tsx @@ -1,12 +1,14 @@ import React, { useState } from 'react'; import mapValues from 'lodash/mapValues'; -import { storiesOf, StoryContext } from '@storybook/react'; import { ArgsTable } from '@storybook/components'; import { Args } from '@storybook/api'; import { inferControls } from '@storybook/store'; +import { storiesOf, StoryContext } from '..'; import { extractArgTypes } from './extractArgTypes'; -import { Component } from '../../blocks'; + +// FIXME +type Component = any; const argsTableProps = (component: Component) => { const argTypes = extractArgTypes(component); @@ -51,36 +53,6 @@ const ArgsStory = ({ component }: any) => { ); }; -const typescriptFixtures = [ - 'aliases', - 'arrays', - 'enums', - 'functions', - 'interfaces', - 'intersections', - 'records', - 'scalars', - 'tuples', - 'unions', - 'optionals', -]; - -const typescriptStories = storiesOf('ArgTypes/TypeScript', module); -typescriptFixtures.forEach((fixture) => { - // eslint-disable-next-line import/no-dynamic-require, global-require, no-shadow - const { Component } = require(`../../lib/convert/__testfixtures__/typescript/${fixture}`); - typescriptStories.add(fixture, () => ); -}); - -const proptypesFixtures = ['arrays', 'enums', 'misc', 'objects', 'react', 'scalars']; - -const proptypesStories = storiesOf('ArgTypes/PropTypes', module); -proptypesFixtures.forEach((fixture) => { - // eslint-disable-next-line import/no-dynamic-require, global-require, no-shadow - const { Component } = require(`../../lib/convert/__testfixtures__/proptypes/${fixture}`); - proptypesStories.add(fixture, () => ); -}); - const issuesFixtures = [ 'js-class-component', 'js-function-component', diff --git a/addons/docs/src/frameworks/react/react-properties.test.ts b/app/react/src/client/docs/react-properties.test.ts similarity index 94% rename from addons/docs/src/frameworks/react/react-properties.test.ts rename to app/react/src/client/docs/react-properties.test.ts index 0180e6e258b5..d2cc707ddeda 100644 --- a/addons/docs/src/frameworks/react/react-properties.test.ts +++ b/app/react/src/client/docs/react-properties.test.ts @@ -1,16 +1,16 @@ import 'jest-specific-snapshot'; import path from 'path'; import fs from 'fs'; - +import requireFromString from 'require-from-string'; import { transformFileSync, transformSync } from '@babel/core'; + import { inferControls } from '@storybook/store'; -import { StoryContext } from '@storybook/react'; -import { AnyFramework } from '@storybook/csf'; -import requireFromString from 'require-from-string'; +import type { AnyFramework } from '@storybook/csf'; +import { normalizeNewlines } from '@storybook/docs-tools'; +import type { StoryContext } from '..'; import { extractProps } from './extractProps'; import { extractArgTypes } from './extractArgTypes'; -import { normalizeNewlines } from '../../lib/utils'; // jest.mock('../imported', () => () => ({ imported: 'imported-value' }), { virtual: true }); diff --git a/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx b/app/react/src/client/docs/typeScript/handleProp.test.tsx similarity index 99% rename from addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx rename to app/react/src/client/docs/typeScript/handleProp.test.tsx index 1071979909c4..e00a21df83d8 100644 --- a/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx +++ b/app/react/src/client/docs/typeScript/handleProp.test.tsx @@ -1,15 +1,16 @@ /* eslint-disable no-underscore-dangle */ import React from 'react'; -import { Component } from '../../../blocks/types'; import { PropDef, extractComponentProps, DocgenInfo, DocgenPropDefaultValue, -} from '../../../lib/docgen'; +} from '@storybook/docs-tools'; import { enhanceTypeScriptProp } from './handleProp'; +type Component = any; + const DOCGEN_SECTION = 'props'; function ReactComponent() { diff --git a/addons/docs/src/frameworks/react/typeScript/handleProp.ts b/app/react/src/client/docs/typeScript/handleProp.ts similarity index 93% rename from addons/docs/src/frameworks/react/typeScript/handleProp.ts rename to app/react/src/client/docs/typeScript/handleProp.ts index eeecb2db81f0..2d7d13522ef7 100644 --- a/addons/docs/src/frameworks/react/typeScript/handleProp.ts +++ b/app/react/src/client/docs/typeScript/handleProp.ts @@ -1,4 +1,4 @@ -import { PropDef, ExtractedProp } from '../../../lib/docgen'; +import { PropDef, ExtractedProp } from '@storybook/docs-tools'; import { createDefaultValue, createDefaultValueFromRawDefaultProp } from '../lib/defaultValues'; export function enhanceTypeScriptProp(extractedProp: ExtractedProp, rawDefaultProp?: any): PropDef { diff --git a/app/react/src/client/preview/types-6-0.ts b/app/react/src/client/preview/types-6-0.ts index f2d3d53a18f4..9b573efac5a6 100644 --- a/app/react/src/client/preview/types-6-0.ts +++ b/app/react/src/client/preview/types-6-0.ts @@ -1,6 +1,11 @@ -import { ComponentType } from 'react'; -import { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf'; -import { StoryFnReactReturnType } from './types'; +import type { ComponentType } from 'react'; +import type { + Args, + ComponentAnnotations, + StoryAnnotations, + AnnotatedStoryFn, +} from '@storybook/csf'; +import type { StoryFnReactReturnType } from './types'; export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf'; diff --git a/app/react/src/client/preview/types-7-0.ts b/app/react/src/client/preview/types-7-0.ts index 1133e1ad6c90..dae17648e621 100644 --- a/app/react/src/client/preview/types-7-0.ts +++ b/app/react/src/client/preview/types-7-0.ts @@ -1,5 +1,5 @@ -import { JSXElementConstructor } from 'react'; -import { Args } from '@storybook/csf'; +import type { JSXElementConstructor } from 'react'; +import type { Args } from '@storybook/csf'; import type { StoryObj } from './types-6-0'; import type { ComponentStoryObj } from './types-6-3'; diff --git a/app/react/src/server/framework-preset-react-docgen.test.ts b/app/react/src/server/framework-preset-react-docgen.test.ts deleted file mode 100644 index 28b27989a915..000000000000 --- a/app/react/src/server/framework-preset-react-docgen.test.ts +++ /dev/null @@ -1,108 +0,0 @@ -import ReactDocgenTypescriptPlugin from '@storybook/react-docgen-typescript-plugin'; -import type { TypescriptConfig } from '@storybook/core-common'; -import * as preset from './framework-preset-react-docgen'; - -describe('framework-preset-react-docgen', () => { - const babelPluginReactDocgenPath = require.resolve('babel-plugin-react-docgen'); - - it('should return the babel config with the extra plugin', async () => { - const babelConfig = { - babelrc: false, - presets: ['env', 'foo-preset'], - plugins: ['foo-plugin'], - }; - - const config = await preset.babel(babelConfig, { - presets: { - // @ts-ignore - apply: async () => - ({ - check: false, - reactDocgen: 'react-docgen', - } as TypescriptConfig), - }, - } as any); - - expect(config).toEqual({ - babelrc: false, - plugins: ['foo-plugin'], - presets: ['env', 'foo-preset'], - overrides: [ - { - test: /\.(mjs|tsx?|jsx?)$/, - plugins: [ - [ - babelPluginReactDocgenPath, - { - DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES', - }, - ], - ], - }, - ], - }); - }); - - it('should return the webpack config with the extra plugin', async () => { - const webpackConfig = { - plugins: [], - }; - - const config = await preset.webpackFinal(webpackConfig, { - presets: { - // @ts-ignore - apply: async () => - ({ - check: false, - reactDocgen: 'react-docgen-typescript', - } as TypescriptConfig), - }, - }); - - expect(config).toEqual({ - plugins: [expect.any(ReactDocgenTypescriptPlugin)], - }); - }); - - it('should not add any extra plugins', async () => { - const babelConfig = { - babelrc: false, - presets: ['env', 'foo-preset'], - plugins: ['foo-plugin'], - }; - - const webpackConfig = { - plugins: [], - }; - - const outputBabelconfig = await preset.babel(babelConfig, { - presets: { - // @ts-ignore - apply: async () => - ({ - check: false, - reactDocgen: false, - } as TypescriptConfig), - }, - }); - const outputWebpackconfig = await preset.webpackFinal(webpackConfig, { - presets: { - // @ts-ignore - apply: async () => - ({ - check: false, - reactDocgen: false, - } as TypescriptConfig), - }, - }); - - expect(outputBabelconfig).toEqual({ - babelrc: false, - presets: ['env', 'foo-preset'], - plugins: ['foo-plugin'], - }); - expect(outputWebpackconfig).toEqual({ - plugins: [], - }); - }); -}); diff --git a/app/react/src/server/framework-preset-react-docs.test.ts b/app/react/src/server/framework-preset-react-docs.test.ts new file mode 100644 index 000000000000..bd86e13da568 --- /dev/null +++ b/app/react/src/server/framework-preset-react-docs.test.ts @@ -0,0 +1,165 @@ +import ReactDocgenTypescriptPlugin from '@storybook/react-docgen-typescript-plugin'; +import type { TypescriptConfig } from '@storybook/core-common'; +import * as preset from './framework-preset-react-docs'; + +describe('framework-preset-react-docgen', () => { + const babelPluginReactDocgenPath = require.resolve('babel-plugin-react-docgen'); + const presetsListWithDocs = [{ name: '@storybook/addon-docs', options: {}, preset: null }]; + + describe('react-docgen', () => { + it('should return the babel config with the extra plugin', async () => { + const babelConfig = { + babelrc: false, + presets: ['env', 'foo-preset'], + plugins: ['foo-plugin'], + }; + + const config = await preset.babel(babelConfig, { + presets: { + // @ts-ignore + apply: async () => + ({ + check: false, + reactDocgen: 'react-docgen', + } as TypescriptConfig), + }, + presetsList: presetsListWithDocs, + } as any); + + expect(config).toEqual({ + babelrc: false, + plugins: ['foo-plugin'], + presets: ['env', 'foo-preset'], + overrides: [ + { + test: /\.(mjs|tsx?|jsx?)$/, + plugins: [ + [ + babelPluginReactDocgenPath, + { + DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES', + }, + ], + ], + }, + ], + }); + }); + }); + + describe('react-docgen-typescript', () => { + it('should return the webpack config with the extra plugin', async () => { + const webpackConfig = { + plugins: [], + }; + + const config = await preset.webpackFinal(webpackConfig, { + presets: { + // @ts-ignore + apply: async () => + ({ + check: false, + reactDocgen: 'react-docgen-typescript', + } as TypescriptConfig), + }, + presetsList: presetsListWithDocs, + }); + + expect(config).toEqual({ + plugins: [expect.any(ReactDocgenTypescriptPlugin)], + }); + }); + }); + + describe('no docgen', () => { + it('should not add any extra plugins', async () => { + const babelConfig = { + babelrc: false, + presets: ['env', 'foo-preset'], + plugins: ['foo-plugin'], + }; + + const webpackConfig = { + plugins: [], + }; + + const outputBabelconfig = await preset.babel(babelConfig, { + presets: { + // @ts-ignore + apply: async () => + ({ + check: false, + reactDocgen: false, + } as TypescriptConfig), + }, + presetsList: presetsListWithDocs, + }); + const outputWebpackconfig = await preset.webpackFinal(webpackConfig, { + presets: { + // @ts-ignore + apply: async () => + ({ + check: false, + reactDocgen: false, + } as TypescriptConfig), + }, + presetsList: presetsListWithDocs, + }); + + expect(outputBabelconfig).toEqual({ + babelrc: false, + presets: ['env', 'foo-preset'], + plugins: ['foo-plugin'], + }); + expect(outputWebpackconfig).toEqual({ + plugins: [], + }); + }); + }); + + describe('no docs or controls addon used', () => { + it('should not add any extra plugins', async () => { + const babelConfig = { + babelrc: false, + presets: ['env', 'foo-preset'], + plugins: ['foo-plugin'], + }; + + const webpackConfig = { + plugins: [], + }; + + const outputBabelconfig = await preset.babel(babelConfig, { + presets: { + // @ts-ignore + apply: async () => + ({ + check: false, + reactDocgen: 'react-docgen-typescript', + } as TypescriptConfig), + }, + presetsList: [], + }); + const outputWebpackconfig = await preset.webpackFinal(webpackConfig, { + presets: { + // @ts-ignore + apply: async () => + ({ + check: false, + reactDocgen: 'react-docgen-typescript', + } as TypescriptConfig), + }, + presetsList: [], + }); + + expect(outputBabelconfig).toEqual({ + babelrc: false, + presets: ['env', 'foo-preset'], + plugins: ['foo-plugin'], + }); + expect(outputWebpackconfig).toEqual({ + plugins: [], + }); + }); + }); +}); diff --git a/app/react/src/server/framework-preset-react-docgen.ts b/app/react/src/server/framework-preset-react-docs.ts similarity index 56% rename from app/react/src/server/framework-preset-react-docgen.ts rename to app/react/src/server/framework-preset-react-docs.ts index dece10b01137..723cf49a9f29 100644 --- a/app/react/src/server/framework-preset-react-docgen.ts +++ b/app/react/src/server/framework-preset-react-docs.ts @@ -1,10 +1,14 @@ +import type { StorybookConfig, Options, TypescriptConfig } from '@storybook/core-common'; +import { findDistEsm } from '@storybook/core-common'; import type { TransformOptions } from '@babel/core'; import type { Configuration } from 'webpack'; import ReactDocgenTypescriptPlugin from '@storybook/react-docgen-typescript-plugin'; -import type { Options, TypescriptConfig } from '@storybook/core-common'; +import { hasDocsOrControls } from '@storybook/docs-tools'; -export async function babel(config: TransformOptions, { presets }: Options) { - const typescriptOptions = await presets.apply('typescript', {} as any); +export async function babel(config: TransformOptions, options: Options) { + if (!hasDocsOrControls(options)) return config; + + const typescriptOptions = await options.presets.apply('typescript', {} as any); const { reactDocgen } = typescriptOptions; @@ -30,8 +34,10 @@ export async function babel(config: TransformOptions, { presets }: Options) { }; } -export async function webpackFinal(config: Configuration, { presets }: Options) { - const typescriptOptions = await presets.apply('typescript', {} as any); +export async function webpackFinal(config: Configuration, options: Options) { + if (!hasDocsOrControls(options)) return config; + + const typescriptOptions = await options.presets.apply('typescript', {} as any); const { reactDocgen, reactDocgenTypescriptOptions } = typescriptOptions; @@ -51,3 +57,8 @@ export async function webpackFinal(config: Configuration, { presets }: Options) ], }; } + +export const config: StorybookConfig['config'] = (entry = [], options) => { + if (!hasDocsOrControls(options)) return entry; + return [...entry, findDistEsm(__dirname, 'client/docs/config')]; +}; diff --git a/app/react/src/server/options.ts b/app/react/src/server/options.ts index c0e8d86ca084..f02a8b7e8f6c 100644 --- a/app/react/src/server/options.ts +++ b/app/react/src/server/options.ts @@ -1,5 +1,5 @@ import { sync } from 'read-pkg-up'; -import { LoadOptions } from '@storybook/core-common'; +import type { LoadOptions } from '@storybook/core-common'; export default { packageJson: sync({ cwd: __dirname }).packageJson, diff --git a/app/react/src/server/preset.ts b/app/react/src/server/preset.ts index 0d85b4d4dac2..b0807877e886 100644 --- a/app/react/src/server/preset.ts +++ b/app/react/src/server/preset.ts @@ -1,4 +1,5 @@ -import { findDistEsm, StorybookConfig } from '@storybook/core-common'; +import { findDistEsm } from '@storybook/core-common'; +import type { StorybookConfig } from '@storybook/core-common'; export const config: StorybookConfig['config'] = (entries = []) => [ ...entries, @@ -8,5 +9,5 @@ export const config: StorybookConfig['config'] = (entries = []) => [ export const addons: StorybookConfig['addons'] = [ require.resolve('./framework-preset-react'), require.resolve('./framework-preset-cra'), - require.resolve('./framework-preset-react-docgen'), + require.resolve('./framework-preset-react-docs'), ]; diff --git a/app/react/tsconfig.json b/app/react/tsconfig.json index ea47a78eb476..b16c7ffdcb0d 100644 --- a/app/react/tsconfig.json +++ b/app/react/tsconfig.json @@ -2,16 +2,9 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": [ - "webpack-env", - "node" - ], + "types": ["webpack-env", "node"], "resolveJsonModule": true }, - "include": [ - "src/**/*" - ], - "exclude": [ - "src/**/*.test.*" - ] -} \ No newline at end of file + "include": ["src/**/*"], + "exclude": ["src/**/*.test.*", "src/**/__testfixtures__/**"] +} diff --git a/app/react/types/index.ts b/app/react/types/index.ts index 3e1ddcf15273..587c0a51088c 100644 --- a/app/react/types/index.ts +++ b/app/react/types/index.ts @@ -1,4 +1,4 @@ -import { StorybookConfig as BaseConfig } from '@storybook/core-common'; +import type { StorybookConfig as BaseConfig } from '@storybook/core-common'; /** * The interface for Storybook configuration in `main.ts` files. diff --git a/app/server/package.json b/app/server/package.json index c407949da602..4ef340e654a1 100644 --- a/app/server/package.json +++ b/app/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -45,15 +45,15 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/api": "6.5.0-alpha.42", - "@storybook/client-api": "6.5.0-alpha.42", - "@storybook/core": "6.5.0-alpha.42", - "@storybook/core-common": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/api": "6.5.0-alpha.48", + "@storybook/client-api": "6.5.0-alpha.48", + "@storybook/core": "6.5.0-alpha.48", + "@storybook/core-common": "6.5.0-alpha.48", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/node-logger": "6.5.0-alpha.42", - "@storybook/preview-web": "6.5.0-alpha.42", - "@storybook/store": "6.5.0-alpha.42", + "@storybook/node-logger": "6.5.0-alpha.48", + "@storybook/preview-web": "6.5.0-alpha.48", + "@storybook/store": "6.5.0-alpha.48", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", @@ -76,6 +76,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/server/src/client/preview/index.ts b/app/server/src/client/preview/index.ts index 3f8917f05570..4bedb816a6c2 100644 --- a/app/server/src/client/preview/index.ts +++ b/app/server/src/client/preview/index.ts @@ -1,9 +1,9 @@ import { start } from '@storybook/core/client'; -import { ClientStoryApi, Loadable } from '@storybook/addons'; +import type { ClientStoryApi, Loadable } from '@storybook/addons'; import './globals'; import { renderToDOM, render } from './render'; -import { IStorybookSection, ServerFramework } from './types'; +import type { IStorybookSection, ServerFramework } from './types'; const framework = 'server'; diff --git a/app/server/src/client/preview/render.ts b/app/server/src/client/preview/render.ts index 450bab66d85d..6fc63d49da04 100644 --- a/app/server/src/client/preview/render.ts +++ b/app/server/src/client/preview/render.ts @@ -1,10 +1,10 @@ /* eslint-disable no-param-reassign */ import global from 'global'; import dedent from 'ts-dedent'; -import { RenderContext } from '@storybook/store'; +import type { RenderContext } from '@storybook/store'; import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web'; -import { StoryFn, Args, ArgTypes } from '@storybook/csf'; -import { FetchStoryHtmlType, ServerFramework } from './types'; +import type { StoryFn, Args, ArgTypes } from '@storybook/csf'; +import type { FetchStoryHtmlType, ServerFramework } from './types'; const { fetch, Node } = global; diff --git a/app/server/src/client/preview/types.ts b/app/server/src/client/preview/types.ts index 0f8ddc25f543..49c39b9e2f9d 100644 --- a/app/server/src/client/preview/types.ts +++ b/app/server/src/client/preview/types.ts @@ -1,4 +1,4 @@ -import { StoryContext } from '@storybook/csf'; +import type { StoryContext } from '@storybook/csf'; export type { RenderContext } from '@storybook/core'; diff --git a/app/server/src/server/framework-preset-server.ts b/app/server/src/server/framework-preset-server.ts index ea24748644f7..ddde3f77f7d5 100644 --- a/app/server/src/server/framework-preset-server.ts +++ b/app/server/src/server/framework-preset-server.ts @@ -1,7 +1,7 @@ -// eslint-disable-next-line import/no-extraneous-dependencies -import { Configuration } from 'webpack'; import path from 'path'; -import { findDistEsm, StorybookConfig } from '@storybook/core-common'; +import { findDistEsm } from '@storybook/core-common'; +import type { StorybookConfig } from '@storybook/core-common'; +import type { Configuration } from 'webpack'; export function webpack(config: Configuration) { config.module.rules.push({ diff --git a/app/server/src/server/options.ts b/app/server/src/server/options.ts index ba3f398a3850..a8177875ca5e 100644 --- a/app/server/src/server/options.ts +++ b/app/server/src/server/options.ts @@ -1,5 +1,5 @@ import { sync } from 'read-pkg-up'; -import { LoadOptions } from '@storybook/core-common'; +import type { LoadOptions } from '@storybook/core-common'; export default { packageJson: sync({ cwd: __dirname }).packageJson, diff --git a/app/svelte/package.json b/app/svelte/package.json index d7a0c4edc5c3..d6317c31d0a3 100644 --- a/app/svelte/package.json +++ b/app/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -46,21 +46,27 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/core": "6.5.0-alpha.42", - "@storybook/core-common": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/client-logger": "6.5.0-alpha.48", + "@storybook/core": "6.5.0-alpha.48", + "@storybook/core-common": "6.5.0-alpha.48", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/store": "6.5.0-alpha.42", + "@storybook/docs-tools": "6.5.0-alpha.48", + "@storybook/node-logger": "6.5.0-alpha.48", + "@storybook/store": "6.5.0-alpha.48", "core-js": "^3.8.2", "global": "^4.4.0", + "loader-utils": "^2.0.0", "react": "16.14.0", "react-dom": "16.14.0", "read-pkg-up": "^7.0.1", "regenerator-runtime": "^0.13.7", - "sveltedoc-parser": "^4.1.0", - "ts-dedent": "^2.0.0" + "sveltedoc-parser": "4.1.0", + "ts-dedent": "^2.0.0", + "webpack": "4" }, "devDependencies": { + "@types/loader-utils": "^2.0.0", "@types/webpack-env": "^1.16.0", "svelte": "^3.31.2", "svelte-loader": "^3.0.0" @@ -76,6 +82,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/svelte/preset.js b/app/svelte/preset.js index fd194b02e4d8..f09c6698e046 100644 --- a/app/svelte/preset.js +++ b/app/svelte/preset.js @@ -1 +1 @@ -module.exports = require('./dist/cjs/server/framework-preset-svelte'); +module.exports = require('./dist/cjs/server/preset'); diff --git a/app/svelte/src/client/docs/HOC.svelte b/app/svelte/src/client/docs/HOC.svelte new file mode 100644 index 000000000000..0b6c3618701e --- /dev/null +++ b/app/svelte/src/client/docs/HOC.svelte @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/addons/docs/src/frameworks/svelte/config.ts b/app/svelte/src/client/docs/config.ts similarity index 79% rename from addons/docs/src/frameworks/svelte/config.ts rename to app/svelte/src/client/docs/config.ts index 033474d23f72..5f96a79cd1ab 100644 --- a/addons/docs/src/frameworks/svelte/config.ts +++ b/app/svelte/src/client/docs/config.ts @@ -1,3 +1,4 @@ +import { enhanceArgTypes } from '@storybook/docs-tools'; import { extractArgTypes } from './extractArgTypes'; import { extractComponentDescription } from './extractComponentDescription'; import { prepareForInline } from './prepareForInline'; @@ -13,3 +14,5 @@ export const parameters = { }; export const decorators = [sourceDecorator]; + +export const argTypesEnhancers = [enhanceArgTypes]; diff --git a/addons/docs/src/frameworks/svelte/extractArgTypes.test.ts b/app/svelte/src/client/docs/extractArgTypes.test.ts similarity index 100% rename from addons/docs/src/frameworks/svelte/extractArgTypes.test.ts rename to app/svelte/src/client/docs/extractArgTypes.test.ts diff --git a/addons/docs/src/frameworks/svelte/extractArgTypes.ts b/app/svelte/src/client/docs/extractArgTypes.ts similarity index 95% rename from addons/docs/src/frameworks/svelte/extractArgTypes.ts rename to app/svelte/src/client/docs/extractArgTypes.ts index dc7e9858ae65..91e28729c1af 100644 --- a/addons/docs/src/frameworks/svelte/extractArgTypes.ts +++ b/app/svelte/src/client/docs/extractArgTypes.ts @@ -1,4 +1,4 @@ -import { SBScalarType, StrictArgTypes } from '@storybook/csf'; +import type { SBScalarType, StrictArgTypes } from '@storybook/csf'; import { logger } from '@storybook/client-logger'; import type { SvelteComponentDoc, @@ -7,7 +7,7 @@ import type { JSDocTypeConst, } from 'sveltedoc-parser/typings'; -import { ArgTypesExtractor } from '../../lib/docgen'; +import type { ArgTypesExtractor } from '@storybook/docs-tools'; type ComponentWithDocgen = { __docgen: SvelteComponentDoc; diff --git a/addons/docs/src/frameworks/svelte/extractComponentDescription.test.ts b/app/svelte/src/client/docs/extractComponentDescription.test.ts similarity index 100% rename from addons/docs/src/frameworks/svelte/extractComponentDescription.test.ts rename to app/svelte/src/client/docs/extractComponentDescription.test.ts diff --git a/addons/docs/src/frameworks/svelte/extractComponentDescription.ts b/app/svelte/src/client/docs/extractComponentDescription.ts similarity index 80% rename from addons/docs/src/frameworks/svelte/extractComponentDescription.ts rename to app/svelte/src/client/docs/extractComponentDescription.ts index 282271299412..d2213c8ee4a1 100644 --- a/addons/docs/src/frameworks/svelte/extractComponentDescription.ts +++ b/app/svelte/src/client/docs/extractComponentDescription.ts @@ -1,4 +1,4 @@ -import { Component } from '../../blocks/types'; +type Component = any; export function extractComponentDescription(component?: Component): string { if (!component) { diff --git a/addons/docs/src/frameworks/svelte/prepareForInline.ts b/app/svelte/src/client/docs/prepareForInline.ts similarity index 75% rename from addons/docs/src/frameworks/svelte/prepareForInline.ts rename to app/svelte/src/client/docs/prepareForInline.ts index 8c84f650b789..7d5ac7587b3e 100644 --- a/addons/docs/src/frameworks/svelte/prepareForInline.ts +++ b/app/svelte/src/client/docs/prepareForInline.ts @@ -1,8 +1,10 @@ +/* eslint-disable import/no-extraneous-dependencies */ import { AnyFramework, StoryFn } from '@storybook/csf'; import React from 'react'; -import HOC from '@storybook/addon-docs/svelte/HOC.svelte'; +// @ts-ignore +import HOC from '@storybook/svelte/src/client/docs/HOC.svelte'; export const prepareForInline = (storyFn: StoryFn) => { const el = React.useRef(null); diff --git a/addons/docs/src/frameworks/svelte/sample/MockButton.svelte b/app/svelte/src/client/docs/sample/MockButton.svelte similarity index 100% rename from addons/docs/src/frameworks/svelte/sample/MockButton.svelte rename to app/svelte/src/client/docs/sample/MockButton.svelte diff --git a/addons/docs/src/frameworks/svelte/sourceDecorator.test.ts b/app/svelte/src/client/docs/sourceDecorator.test.ts similarity index 97% rename from addons/docs/src/frameworks/svelte/sourceDecorator.test.ts rename to app/svelte/src/client/docs/sourceDecorator.test.ts index 6c55200e21fe..006a7bb4de05 100644 --- a/addons/docs/src/frameworks/svelte/sourceDecorator.test.ts +++ b/app/svelte/src/client/docs/sourceDecorator.test.ts @@ -1,4 +1,4 @@ -import { Args } from '@storybook/api'; +import type { Args } from '@storybook/api'; import { generateSvelteSource } from './sourceDecorator'; expect.addSnapshotSerializer({ diff --git a/addons/docs/src/frameworks/svelte/sourceDecorator.ts b/app/svelte/src/client/docs/sourceDecorator.ts similarity index 96% rename from addons/docs/src/frameworks/svelte/sourceDecorator.ts rename to app/svelte/src/client/docs/sourceDecorator.ts index f740a4c857b5..d449523197b5 100644 --- a/addons/docs/src/frameworks/svelte/sourceDecorator.ts +++ b/app/svelte/src/client/docs/sourceDecorator.ts @@ -1,7 +1,7 @@ import { addons, useEffect } from '@storybook/addons'; -import { ArgTypes, Args, StoryContext, AnyFramework } from '@storybook/csf'; +import type { ArgTypes, Args, StoryContext, AnyFramework } from '@storybook/csf'; -import { SourceType, SNIPPET_RENDERED } from '../../shared'; +import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools'; /** * Check if the sourcecode should be generated. diff --git a/app/svelte/src/client/preview/decorators.ts b/app/svelte/src/client/preview/decorators.ts index c5f9092e57fa..09165817a17a 100644 --- a/app/svelte/src/client/preview/decorators.ts +++ b/app/svelte/src/client/preview/decorators.ts @@ -1,4 +1,4 @@ -import { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf'; +import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf'; import { sanitizeStoryContextUpdate } from '@storybook/store'; // eslint-disable-next-line import/no-extraneous-dependencies import SlotDecorator from '@storybook/svelte/templates/SlotDecorator.svelte'; diff --git a/app/svelte/src/client/preview/render.ts b/app/svelte/src/client/preview/render.ts index 55e3612d400a..bb21b56f8221 100644 --- a/app/svelte/src/client/preview/render.ts +++ b/app/svelte/src/client/preview/render.ts @@ -1,5 +1,5 @@ import global from 'global'; -import { ArgsStoryFn } from '@storybook/csf'; +import type { ArgsStoryFn } from '@storybook/csf'; import type { RenderContext } from '@storybook/store'; // eslint-disable-next-line import/no-extraneous-dependencies import PreviewRender from '@storybook/svelte/templates/PreviewRender.svelte'; diff --git a/addons/docs/src/frameworks/svelte/preset.ts b/app/svelte/src/server/framework-preset-svelte-docs.ts similarity index 62% rename from addons/docs/src/frameworks/svelte/preset.ts rename to app/svelte/src/server/framework-preset-svelte-docs.ts index 20004fc47223..ba1a7fee0166 100644 --- a/addons/docs/src/frameworks/svelte/preset.ts +++ b/app/svelte/src/server/framework-preset-svelte-docs.ts @@ -1,7 +1,8 @@ import path from 'path'; -import { Configuration } from 'webpack'; -import type { Options } from '@storybook/core-common'; +import { findDistEsm, Options, StorybookConfig } from '@storybook/core-common'; + +type Configuration = any; export async function webpackFinal(webpackConfig: Configuration, options: Options) { const svelteOptions = await options.presets.apply('svelteOptions', {} as any, options); @@ -15,3 +16,7 @@ export async function webpackFinal(webpackConfig: Configuration, options: Option return webpackConfig; } + +export const config: StorybookConfig['config'] = (entry = []) => { + return [...entry, findDistEsm(__dirname, 'client/docs/config')]; +}; diff --git a/app/svelte/src/server/framework-preset-svelte.ts b/app/svelte/src/server/framework-preset-svelte.ts index de7f4a2fc995..a9bec1dc6109 100644 --- a/app/svelte/src/server/framework-preset-svelte.ts +++ b/app/svelte/src/server/framework-preset-svelte.ts @@ -1,6 +1,6 @@ -// eslint-disable-next-line import/no-extraneous-dependencies -import { Configuration } from 'webpack'; -import { findDistEsm, Options, StorybookConfig } from '@storybook/core-common'; +import { findDistEsm } from '@storybook/core-common'; +import type { Options, StorybookConfig } from '@storybook/core-common'; +import type { Configuration } from 'webpack'; export async function webpack(config: Configuration, options: Options): Promise { const { preprocess = undefined, loader = {} } = await options.presets.apply( diff --git a/app/svelte/src/server/options.ts b/app/svelte/src/server/options.ts index ee8c399d9af3..b32f7018ea24 100644 --- a/app/svelte/src/server/options.ts +++ b/app/svelte/src/server/options.ts @@ -4,5 +4,5 @@ import { LoadOptions } from '@storybook/core-common'; export default { packageJson: sync({ cwd: __dirname }).packageJson, framework: 'svelte', - frameworkPresets: [require.resolve('./framework-preset-svelte.js')], + frameworkPresets: [require.resolve('./preset.js')], } as LoadOptions; diff --git a/app/svelte/src/server/preset.ts b/app/svelte/src/server/preset.ts new file mode 100644 index 000000000000..5746855d89a0 --- /dev/null +++ b/app/svelte/src/server/preset.ts @@ -0,0 +1,6 @@ +import type { StorybookConfig } from '@storybook/core-common'; + +export const addons: StorybookConfig['addons'] = [ + require.resolve('./framework-preset-svelte'), + require.resolve('./framework-preset-svelte-docs'), +]; diff --git a/addons/docs/src/frameworks/svelte/svelte-docgen-loader.ts b/app/svelte/src/server/svelte-docgen-loader.ts similarity index 98% rename from addons/docs/src/frameworks/svelte/svelte-docgen-loader.ts rename to app/svelte/src/server/svelte-docgen-loader.ts index fcd09698431c..8206c87cbf9f 100644 --- a/addons/docs/src/frameworks/svelte/svelte-docgen-loader.ts +++ b/app/svelte/src/server/svelte-docgen-loader.ts @@ -69,6 +69,8 @@ export default async function svelteDocgen(source: string) { let docgen = ''; try { + // FIXME + // @ts-ignore const componentDoc = await svelteDoc.parse(options); // get filename for source content diff --git a/app/vue/package.json b/app/vue/package.json index 25ca07dccd93..8ed6d8b79585 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -45,15 +45,18 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/core": "6.5.0-alpha.42", - "@storybook/core-common": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/client-logger": "6.5.0-alpha.48", + "@storybook/core": "6.5.0-alpha.48", + "@storybook/core-common": "6.5.0-alpha.48", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/store": "6.5.0-alpha.42", + "@storybook/docs-tools": "6.5.0-alpha.48", + "@storybook/store": "6.5.0-alpha.48", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", + "prettier": ">=2.2.1 <=2.3.0", "react": "16.14.0", "react-dom": "16.14.0", "read-pkg-up": "^7.0.1", @@ -83,6 +86,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/vue/preset.js b/app/vue/preset.js index 1f2762b323f3..f09c6698e046 100644 --- a/app/vue/preset.js +++ b/app/vue/preset.js @@ -1 +1 @@ -module.exports = require('./dist/cjs/server/framework-preset-vue'); +module.exports = require('./dist/cjs/server/preset'); diff --git a/addons/docs/src/frameworks/vue/config.ts b/app/vue/src/client/docs/config.ts similarity index 68% rename from addons/docs/src/frameworks/vue/config.ts rename to app/vue/src/client/docs/config.ts index a5e41a726139..537773e4dfb6 100644 --- a/addons/docs/src/frameworks/vue/config.ts +++ b/app/vue/src/client/docs/config.ts @@ -1,11 +1,12 @@ +import { extractComponentDescription, enhanceArgTypes } from '@storybook/docs-tools'; import { extractArgTypes } from './extractArgTypes'; -import { extractComponentDescription } from '../../lib/docgen'; import { prepareForInline } from './prepareForInline'; import { sourceDecorator } from './sourceDecorator'; export const parameters = { docs: { inlineStories: true, + iframeHeight: 120, prepareForInline, extractArgTypes, extractComponentDescription, @@ -13,3 +14,5 @@ export const parameters = { }; export const decorators = [sourceDecorator]; + +export const argTypesEnhancers = [enhanceArgTypes]; diff --git a/addons/docs/src/frameworks/vue/extractArgTypes.ts b/app/vue/src/client/docs/extractArgTypes.ts similarity index 91% rename from addons/docs/src/frameworks/vue/extractArgTypes.ts rename to app/vue/src/client/docs/extractArgTypes.ts index 4f6e335ce008..92a9f113e9c0 100644 --- a/addons/docs/src/frameworks/vue/extractArgTypes.ts +++ b/app/vue/src/client/docs/extractArgTypes.ts @@ -1,12 +1,6 @@ -import { StrictArgTypes } from '@storybook/csf'; -import { - ArgTypesExtractor, - hasDocgen, - extractComponentProps, - DocgenInfo, - PropDef, -} from '../../lib/docgen'; -import { convert } from '../../lib/convert'; +import type { StrictArgTypes } from '@storybook/csf'; +import type { ArgTypesExtractor, DocgenInfo, PropDef } from '@storybook/docs-tools'; +import { hasDocgen, extractComponentProps, convert } from '@storybook/docs-tools'; const SECTIONS = ['props', 'events', 'slots', 'methods']; diff --git a/addons/docs/src/frameworks/vue/prepareForInline.ts b/app/vue/src/client/docs/prepareForInline.ts similarity index 89% rename from addons/docs/src/frameworks/vue/prepareForInline.ts rename to app/vue/src/client/docs/prepareForInline.ts index 6627db5ec96f..f9c4fa176456 100644 --- a/addons/docs/src/frameworks/vue/prepareForInline.ts +++ b/app/vue/src/client/docs/prepareForInline.ts @@ -1,7 +1,7 @@ import React from 'react'; import Vue from 'vue'; -import { StoryContext, PartialStoryFn } from '@storybook/csf'; -import { VueFramework } from '@storybook/vue'; +import type { StoryContext, PartialStoryFn } from '@storybook/csf'; +import type { VueFramework } from '../preview/types-6-0'; // Inspired by https://github.com/egoist/vue-to-react, // modified to store args as props in the root store diff --git a/addons/docs/src/frameworks/vue/sourceDecorator.test.ts b/app/vue/src/client/docs/sourceDecorator.test.ts similarity index 100% rename from addons/docs/src/frameworks/vue/sourceDecorator.test.ts rename to app/vue/src/client/docs/sourceDecorator.test.ts diff --git a/addons/docs/src/frameworks/vue/sourceDecorator.ts b/app/vue/src/client/docs/sourceDecorator.ts similarity index 97% rename from addons/docs/src/frameworks/vue/sourceDecorator.ts rename to app/vue/src/client/docs/sourceDecorator.ts index 4ca3f0d88536..534426b1cbd9 100644 --- a/addons/docs/src/frameworks/vue/sourceDecorator.ts +++ b/app/vue/src/client/docs/sourceDecorator.ts @@ -1,12 +1,12 @@ /* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */ -import { StoryContext } from '@storybook/csf'; +import type { StoryContext } from '@storybook/csf'; import { addons } from '@storybook/addons'; import { logger } from '@storybook/client-logger'; import type Vue from 'vue'; -import { VueFramework } from '@storybook/vue'; -import { SourceType, SNIPPET_RENDERED } from '../../shared'; +import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools'; +import type { VueFramework } from '../preview/types-6-0'; export const skipSourceRender = (context: StoryContext) => { const sourceParams = context?.parameters.docs?.source; @@ -24,6 +24,7 @@ export const skipSourceRender = (context: StoryContext) => { export const sourceDecorator = (storyFn: any, context: StoryContext) => { const story = storyFn(); + console.log({ story }); // See ../react/jsxDecorator.tsx if (skipSourceRender(context)) { diff --git a/app/vue/src/client/preview/decorateStory.ts b/app/vue/src/client/preview/decorateStory.ts index d14af7bcbefd..490df79b9ea0 100644 --- a/app/vue/src/client/preview/decorateStory.ts +++ b/app/vue/src/client/preview/decorateStory.ts @@ -1,9 +1,9 @@ import Vue, { VueConstructor, ComponentOptions } from 'vue'; -import { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf'; +import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf'; import { sanitizeStoryContextUpdate } from '@storybook/store'; -import { StoryFnVueReturnType } from './types'; -import { VueFramework } from './types-6-0'; +import type { StoryFnVueReturnType } from './types'; +import type { VueFramework } from './types-6-0'; import { extractProps } from './util'; import { VALUES } from './render'; diff --git a/app/vue/src/client/preview/index.ts b/app/vue/src/client/preview/index.ts index f54a026fad13..7002a27b58b9 100644 --- a/app/vue/src/client/preview/index.ts +++ b/app/vue/src/client/preview/index.ts @@ -1,10 +1,10 @@ /* eslint-disable prefer-destructuring */ import { start } from '@storybook/core/client'; -import { ClientStoryApi, Loadable } from '@storybook/addons'; +import type { ClientStoryApi, Loadable } from '@storybook/addons'; import './globals'; -import { IStorybookSection } from './types'; -import { VueFramework } from './types-6-0'; +import type { IStorybookSection } from './types'; +import type { VueFramework } from './types-6-0'; import { renderToDOM, render } from './render'; import { decorateStory } from './decorateStory'; diff --git a/app/vue/src/client/preview/render.ts b/app/vue/src/client/preview/render.ts index ca27f025ea09..293d5e423afd 100644 --- a/app/vue/src/client/preview/render.ts +++ b/app/vue/src/client/preview/render.ts @@ -1,9 +1,9 @@ /* eslint-disable no-underscore-dangle */ import dedent from 'ts-dedent'; import Vue from 'vue'; -import { RenderContext } from '@storybook/store'; -import { ArgsStoryFn } from '@storybook/csf'; -import { VueFramework } from './types-6-0'; +import type { RenderContext } from '@storybook/store'; +import type { ArgsStoryFn } from '@storybook/csf'; +import type { VueFramework } from './types-6-0'; export const COMPONENT = 'STORYBOOK_COMPONENT'; export const VALUES = 'STORYBOOK_VALUES'; diff --git a/app/vue/src/client/preview/types-6-0.ts b/app/vue/src/client/preview/types-6-0.ts index 39435b6f1187..dcd515791c01 100644 --- a/app/vue/src/client/preview/types-6-0.ts +++ b/app/vue/src/client/preview/types-6-0.ts @@ -1,6 +1,11 @@ -import { Component, AsyncComponent } from 'vue'; -import { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf'; -import { StoryFnVueReturnType } from './types'; +import type { Component, AsyncComponent } from 'vue'; +import type { + Args, + ComponentAnnotations, + StoryAnnotations, + AnnotatedStoryFn, +} from '@storybook/csf'; +import type { StoryFnVueReturnType } from './types'; export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf'; diff --git a/app/vue/src/client/preview/types-7-0.ts b/app/vue/src/client/preview/types-7-0.ts index b88051446a9d..d897ad97a81a 100644 --- a/app/vue/src/client/preview/types-7-0.ts +++ b/app/vue/src/client/preview/types-7-0.ts @@ -1,4 +1,4 @@ -import { Args } from '@storybook/csf'; +import type { Args } from '@storybook/csf'; import type { StoryObj } from './types-6-0'; diff --git a/addons/docs/src/frameworks/vue/preset.ts b/app/vue/src/server/framework-preset-vue-docs.ts similarity index 65% rename from addons/docs/src/frameworks/vue/preset.ts rename to app/vue/src/server/framework-preset-vue-docs.ts index 5650c588cc67..478196fa0d8f 100644 --- a/addons/docs/src/frameworks/vue/preset.ts +++ b/app/vue/src/server/framework-preset-vue-docs.ts @@ -1,6 +1,9 @@ -import type { Options } from '@storybook/core-common'; +import { findDistEsm, Options, StorybookConfig } from '@storybook/core-common'; +import { hasDocsOrControls } from '@storybook/docs-tools'; export function webpackFinal(webpackConfig: any = {}, options: Options) { + if (!hasDocsOrControls(options)) return webpackConfig; + let vueDocgenOptions = {}; options.presetsList?.forEach((preset) => { @@ -26,3 +29,8 @@ export function webpackFinal(webpackConfig: any = {}, options: Options) { }); return webpackConfig; } + +export const config: StorybookConfig['config'] = (entry = [], options) => { + if (!hasDocsOrControls(options)) return entry; + return [...entry, findDistEsm(__dirname, 'client/docs/config')]; +}; diff --git a/app/vue/src/server/framework-preset-vue.ts b/app/vue/src/server/framework-preset-vue.ts index 6eb8e75201db..5ca2341d674f 100644 --- a/app/vue/src/server/framework-preset-vue.ts +++ b/app/vue/src/server/framework-preset-vue.ts @@ -1,8 +1,9 @@ /* eslint-disable no-param-reassign */ import { VueLoaderPlugin } from 'vue-loader'; -import type { Configuration } from 'webpack'; +import { findDistEsm } from '@storybook/core-common'; -import { findDistEsm, Options, TypescriptConfig, StorybookConfig } from '@storybook/core-common'; +import type { Configuration } from 'webpack'; +import type { Options, TypescriptConfig, StorybookConfig } from '@storybook/core-common'; export async function webpack(config: Configuration, { presets }: Options) { const typescriptOptions = await presets.apply('typescript', {} as any); diff --git a/app/vue/src/server/options.ts b/app/vue/src/server/options.ts index e57b04994811..6cd7efb1f6a8 100644 --- a/app/vue/src/server/options.ts +++ b/app/vue/src/server/options.ts @@ -4,5 +4,5 @@ import { LoadOptions } from '@storybook/core-common'; export default { packageJson: sync({ cwd: __dirname }).packageJson, framework: 'vue', - frameworkPresets: [require.resolve('./framework-preset-vue.js')], + frameworkPresets: [require.resolve('./preset.js')], } as LoadOptions; diff --git a/app/vue/src/server/preset.ts b/app/vue/src/server/preset.ts new file mode 100644 index 000000000000..89288293223c --- /dev/null +++ b/app/vue/src/server/preset.ts @@ -0,0 +1,6 @@ +import type { StorybookConfig } from '@storybook/core-common'; + +export const addons: StorybookConfig['addons'] = [ + require.resolve('./framework-preset-vue'), + require.resolve('./framework-preset-vue-docs'), +]; diff --git a/app/vue3/package.json b/app/vue3/package.json index da31cec88367..5070a7338991 100644 --- a/app/vue3/package.json +++ b/app/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -45,11 +45,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/core": "6.5.0-alpha.42", - "@storybook/core-common": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/core": "6.5.0-alpha.48", + "@storybook/core-common": "6.5.0-alpha.48", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/store": "6.5.0-alpha.42", + "@storybook/docs-tools": "6.5.0-alpha.48", + "@storybook/store": "6.5.0-alpha.48", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", @@ -81,6 +82,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/vue3/preset.js b/app/vue3/preset.js index af82ab9cf6fd..f09c6698e046 100644 --- a/app/vue3/preset.js +++ b/app/vue3/preset.js @@ -1 +1 @@ -module.exports = require('./dist/cjs/server/framework-preset-vue3'); +module.exports = require('./dist/cjs/server/preset'); diff --git a/addons/docs/src/frameworks/vue3/config.ts b/app/vue3/src/client/docs/config.ts similarity index 64% rename from addons/docs/src/frameworks/vue3/config.ts rename to app/vue3/src/client/docs/config.ts index 4a4fd37a39fb..dd87a14d1a7e 100644 --- a/addons/docs/src/frameworks/vue3/config.ts +++ b/app/vue3/src/client/docs/config.ts @@ -1,5 +1,5 @@ +import { extractComponentDescription, enhanceArgTypes } from '@storybook/docs-tools'; import { extractArgTypes } from './extractArgTypes'; -import { extractComponentDescription } from '../../lib/docgen'; import { prepareForInline } from './prepareForInline'; export const parameters = { @@ -10,3 +10,5 @@ export const parameters = { extractComponentDescription, }, }; + +export const argTypesEnhancers = [enhanceArgTypes]; diff --git a/addons/docs/src/frameworks/vue3/extractArgTypes.ts b/app/vue3/src/client/docs/extractArgTypes.ts similarity index 80% rename from addons/docs/src/frameworks/vue3/extractArgTypes.ts rename to app/vue3/src/client/docs/extractArgTypes.ts index 039f0c7be2ae..c7a3e4199598 100644 --- a/addons/docs/src/frameworks/vue3/extractArgTypes.ts +++ b/app/vue3/src/client/docs/extractArgTypes.ts @@ -1,6 +1,6 @@ -import { StrictArgTypes } from '@storybook/csf'; -import { ArgTypesExtractor, hasDocgen, extractComponentProps } from '../../lib/docgen'; -import { convert } from '../../lib/convert'; +import type { StrictArgTypes } from '@storybook/csf'; +import type { ArgTypesExtractor } from '@storybook/docs-tools'; +import { hasDocgen, extractComponentProps, convert } from '@storybook/docs-tools'; const SECTIONS = ['props', 'events', 'slots']; diff --git a/addons/docs/src/frameworks/vue3/prepareForInline.ts b/app/vue3/src/client/docs/prepareForInline.ts similarity index 93% rename from addons/docs/src/frameworks/vue3/prepareForInline.ts rename to app/vue3/src/client/docs/prepareForInline.ts index 2f414504289e..155f9253b83d 100644 --- a/addons/docs/src/frameworks/vue3/prepareForInline.ts +++ b/app/vue3/src/client/docs/prepareForInline.ts @@ -1,7 +1,7 @@ import React from 'react'; import * as Vue from 'vue'; import { StoryContext, PartialStoryFn } from '@storybook/csf'; -import { app, VueFramework } from '@storybook/vue3'; +import { app, VueFramework } from '../index'; // This is cast as `any` to workaround type errors caused by Vue 2 types const { render, h } = Vue as any; diff --git a/app/vue3/src/client/preview/decorateStory.ts b/app/vue3/src/client/preview/decorateStory.ts index ba2a31761fda..22fc50e6bbf9 100644 --- a/app/vue3/src/client/preview/decorateStory.ts +++ b/app/vue3/src/client/preview/decorateStory.ts @@ -1,9 +1,9 @@ import type { ConcreteComponent, Component, ComponentOptions } from 'vue'; import { h } from 'vue'; -import { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf'; +import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf'; import { sanitizeStoryContextUpdate } from '@storybook/store'; -import { VueFramework } from './types-6-0'; +import type { VueFramework } from './types-6-0'; /* This normalizes a functional component into a render method in ComponentOptions. diff --git a/app/vue3/src/client/preview/index.ts b/app/vue3/src/client/preview/index.ts index 2c1abba00c9e..f37473e1329e 100644 --- a/app/vue3/src/client/preview/index.ts +++ b/app/vue3/src/client/preview/index.ts @@ -1,10 +1,10 @@ import type { App } from 'vue'; import { start } from '@storybook/core/client'; -import { ClientStoryApi, Loadable } from '@storybook/addons'; +import type { ClientStoryApi, Loadable } from '@storybook/addons'; import './globals'; -import { IStorybookSection } from './types'; -import { VueFramework } from './types-6-0'; +import type { IStorybookSection } from './types'; +import type { VueFramework } from './types-6-0'; import { decorateStory } from './decorateStory'; import { render, renderToDOM, storybookApp } from './render'; diff --git a/app/vue3/src/client/preview/render.ts b/app/vue3/src/client/preview/render.ts index 845c4f80f0ce..a9d3b2020f47 100644 --- a/app/vue3/src/client/preview/render.ts +++ b/app/vue3/src/client/preview/render.ts @@ -1,7 +1,7 @@ import dedent from 'ts-dedent'; import { createApp, h, shallowRef, ComponentPublicInstance } from 'vue'; -import { RenderContext } from '@storybook/store'; -import { ArgsStoryFn } from '@storybook/csf'; +import type { RenderContext } from '@storybook/store'; +import type { ArgsStoryFn } from '@storybook/csf'; import { StoryFnVueReturnType } from './types'; import { VueFramework } from './types-6-0'; diff --git a/app/vue3/src/client/preview/types-6-0.ts b/app/vue3/src/client/preview/types-6-0.ts index 7fcddf3c8349..741a1e50fae3 100644 --- a/app/vue3/src/client/preview/types-6-0.ts +++ b/app/vue3/src/client/preview/types-6-0.ts @@ -1,6 +1,11 @@ -import { ConcreteComponent } from 'vue'; -import { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf'; -import { StoryFnVueReturnType } from './types'; +import type { ConcreteComponent } from 'vue'; +import type { + Args, + ComponentAnnotations, + StoryAnnotations, + AnnotatedStoryFn, +} from '@storybook/csf'; +import type { StoryFnVueReturnType } from './types'; export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf'; diff --git a/app/vue3/src/client/preview/types-7-0.ts b/app/vue3/src/client/preview/types-7-0.ts index b88051446a9d..d897ad97a81a 100644 --- a/app/vue3/src/client/preview/types-7-0.ts +++ b/app/vue3/src/client/preview/types-7-0.ts @@ -1,4 +1,4 @@ -import { Args } from '@storybook/csf'; +import type { Args } from '@storybook/csf'; import type { StoryObj } from './types-6-0'; diff --git a/addons/docs/src/frameworks/vue3/preset.ts b/app/vue3/src/server/framework-preset-vue3-docs.ts similarity index 62% rename from addons/docs/src/frameworks/vue3/preset.ts rename to app/vue3/src/server/framework-preset-vue3-docs.ts index c8e044caf8e2..34e755af3f17 100644 --- a/addons/docs/src/frameworks/vue3/preset.ts +++ b/app/vue3/src/server/framework-preset-vue3-docs.ts @@ -1,6 +1,10 @@ -import type { Options } from '@storybook/core-common'; +import type { Options, StorybookConfig } from '@storybook/core-common'; +import { findDistEsm } from '@storybook/core-common'; +import { hasDocsOrControls } from '@storybook/docs-tools'; export function webpackFinal(webpackConfig: any = {}, options: Options) { + if (!hasDocsOrControls(options)) return webpackConfig; + let vueDocgenOptions = {}; options.presetsList?.forEach((preset) => { @@ -26,3 +30,8 @@ export function webpackFinal(webpackConfig: any = {}, options: Options) { }); return webpackConfig; } + +export const config: StorybookConfig['config'] = (entry = [], options) => { + if (!hasDocsOrControls(options)) return entry; + return [...entry, findDistEsm(__dirname, 'client/docs/config')]; +}; diff --git a/app/vue3/src/server/framework-preset-vue3.ts b/app/vue3/src/server/framework-preset-vue3.ts index dc27c5f1ec73..0db63e4cd193 100644 --- a/app/vue3/src/server/framework-preset-vue3.ts +++ b/app/vue3/src/server/framework-preset-vue3.ts @@ -1,6 +1,7 @@ import { VueLoaderPlugin } from 'vue-loader'; import { Configuration, DefinePlugin } from 'webpack'; -import { findDistEsm, StorybookConfig } from '@storybook/core-common'; +import { findDistEsm } from '@storybook/core-common'; +import type { StorybookConfig } from '@storybook/core-common'; export function webpack(config: Configuration): Configuration { return { diff --git a/app/vue3/src/server/options.ts b/app/vue3/src/server/options.ts index 539771517c8a..ce5415ddde88 100644 --- a/app/vue3/src/server/options.ts +++ b/app/vue3/src/server/options.ts @@ -1,8 +1,8 @@ import { sync } from 'read-pkg-up'; -import { LoadOptions } from '@storybook/core-common'; +import type { LoadOptions } from '@storybook/core-common'; export default { packageJson: sync({ cwd: __dirname }).packageJson, framework: 'vue3', - frameworkPresets: [require.resolve('./framework-preset-vue3')], + frameworkPresets: [require.resolve('./preset')], } as LoadOptions; diff --git a/app/vue3/src/server/preset.ts b/app/vue3/src/server/preset.ts new file mode 100644 index 000000000000..16c9fbcfde38 --- /dev/null +++ b/app/vue3/src/server/preset.ts @@ -0,0 +1,6 @@ +import type { StorybookConfig } from '@storybook/core-common'; + +export const addons: StorybookConfig['addons'] = [ + require.resolve('./framework-preset-vue3'), + require.resolve('./framework-preset-vue3-docs'), +]; diff --git a/app/web-components/package.json b/app/web-components/package.json index 4c9774b01825..7284e4bcd1b5 100644 --- a/app/web-components/package.json +++ b/app/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit-html", @@ -50,13 +50,15 @@ "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-import-meta": "^7.10.4", "@babel/preset-env": "^7.12.11", - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/client-api": "6.5.0-alpha.42", - "@storybook/core": "6.5.0-alpha.42", - "@storybook/core-common": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/client-api": "6.5.0-alpha.48", + "@storybook/client-logger": "6.5.0-alpha.48", + "@storybook/core": "6.5.0-alpha.48", + "@storybook/core-common": "6.5.0-alpha.48", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/preview-web": "6.5.0-alpha.42", - "@storybook/store": "6.5.0-alpha.42", + "@storybook/docs-tools": "6.5.0-alpha.48", + "@storybook/preview-web": "6.5.0-alpha.48", + "@storybook/store": "6.5.0-alpha.48", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "babel-plugin-bundled-import-meta": "^0.3.1", @@ -80,6 +82,6 @@ "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/client/index.js" } diff --git a/app/web-components/preset.js b/app/web-components/preset.js index eff37b035bb3..f09c6698e046 100644 --- a/app/web-components/preset.js +++ b/app/web-components/preset.js @@ -1 +1 @@ -module.exports = require('./dist/cjs/server/framework-preset-web-components'); +module.exports = require('./dist/cjs/server/preset'); diff --git a/addons/docs/src/frameworks/web-components/__testfixtures__/custom-elements.json b/app/web-components/src/client/docs/__testfixtures__/custom-elements.json similarity index 100% rename from addons/docs/src/frameworks/web-components/__testfixtures__/custom-elements.json rename to app/web-components/src/client/docs/__testfixtures__/custom-elements.json diff --git a/addons/docs/src/frameworks/web-components/__testfixtures__/lit-element-demo-card/custom-elements.snapshot b/app/web-components/src/client/docs/__testfixtures__/lit-element-demo-card/custom-elements.snapshot similarity index 100% rename from addons/docs/src/frameworks/web-components/__testfixtures__/lit-element-demo-card/custom-elements.snapshot rename to app/web-components/src/client/docs/__testfixtures__/lit-element-demo-card/custom-elements.snapshot diff --git a/addons/docs/src/frameworks/web-components/__testfixtures__/lit-element-demo-card/input.js b/app/web-components/src/client/docs/__testfixtures__/lit-element-demo-card/input.js similarity index 98% rename from addons/docs/src/frameworks/web-components/__testfixtures__/lit-element-demo-card/input.js rename to app/web-components/src/client/docs/__testfixtures__/lit-element-demo-card/input.js index 64f03ae29da0..8ac6852e9117 100644 --- a/addons/docs/src/frameworks/web-components/__testfixtures__/lit-element-demo-card/input.js +++ b/app/web-components/src/client/docs/__testfixtures__/lit-element-demo-card/input.js @@ -1,3 +1,4 @@ +/* eslint-disable import/no-unresolved */ import global from 'global'; import { LitElement, html, css } from 'lit-element'; diff --git a/addons/docs/src/frameworks/web-components/__testfixtures__/lit-element-demo-card/properties.snapshot b/app/web-components/src/client/docs/__testfixtures__/lit-element-demo-card/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/web-components/__testfixtures__/lit-element-demo-card/properties.snapshot rename to app/web-components/src/client/docs/__testfixtures__/lit-element-demo-card/properties.snapshot diff --git a/addons/docs/src/frameworks/web-components/__testfixtures__/lit-html-welcome/custom-elements.snapshot b/app/web-components/src/client/docs/__testfixtures__/lit-html-welcome/custom-elements.snapshot similarity index 100% rename from addons/docs/src/frameworks/web-components/__testfixtures__/lit-html-welcome/custom-elements.snapshot rename to app/web-components/src/client/docs/__testfixtures__/lit-html-welcome/custom-elements.snapshot diff --git a/addons/docs/src/frameworks/web-components/__testfixtures__/lit-html-welcome/input.js b/app/web-components/src/client/docs/__testfixtures__/lit-html-welcome/input.js similarity index 100% rename from addons/docs/src/frameworks/web-components/__testfixtures__/lit-html-welcome/input.js rename to app/web-components/src/client/docs/__testfixtures__/lit-html-welcome/input.js diff --git a/addons/docs/src/frameworks/web-components/__testfixtures__/lit-html-welcome/properties.snapshot b/app/web-components/src/client/docs/__testfixtures__/lit-html-welcome/properties.snapshot similarity index 100% rename from addons/docs/src/frameworks/web-components/__testfixtures__/lit-html-welcome/properties.snapshot rename to app/web-components/src/client/docs/__testfixtures__/lit-html-welcome/properties.snapshot diff --git a/addons/docs/src/frameworks/web-components/config.ts b/app/web-components/src/client/docs/config.ts similarity index 79% rename from addons/docs/src/frameworks/web-components/config.ts rename to app/web-components/src/client/docs/config.ts index 30273896e170..e0363ff66646 100644 --- a/addons/docs/src/frameworks/web-components/config.ts +++ b/app/web-components/src/client/docs/config.ts @@ -1,7 +1,7 @@ +import { SourceType, enhanceArgTypes } from '@storybook/docs-tools'; import { extractArgTypes, extractComponentDescription } from './custom-elements'; import { sourceDecorator } from './sourceDecorator'; import { prepareForInline } from './prepareForInline'; -import { SourceType } from '../../shared'; export const decorators = [sourceDecorator]; @@ -17,3 +17,5 @@ export const parameters = { }, }, }; + +export const argTypesEnhancers = [enhanceArgTypes]; diff --git a/addons/docs/src/frameworks/web-components/custom-elements.test.ts b/app/web-components/src/client/docs/custom-elements.test.ts similarity index 100% rename from addons/docs/src/frameworks/web-components/custom-elements.test.ts rename to app/web-components/src/client/docs/custom-elements.test.ts diff --git a/addons/docs/src/frameworks/web-components/custom-elements.ts b/app/web-components/src/client/docs/custom-elements.ts similarity index 98% rename from addons/docs/src/frameworks/web-components/custom-elements.ts rename to app/web-components/src/client/docs/custom-elements.ts index 3c17aa7fd7d4..124f7a6978ee 100644 --- a/addons/docs/src/frameworks/web-components/custom-elements.ts +++ b/app/web-components/src/client/docs/custom-elements.ts @@ -1,6 +1,6 @@ -import { getCustomElements, isValidComponent, isValidMetaData } from '@storybook/web-components'; -import { ArgType, ArgTypes } from '@storybook/api'; +import type { ArgType, ArgTypes } from '@storybook/api'; import { logger } from '@storybook/client-logger'; +import { getCustomElements, isValidComponent, isValidMetaData } from '..'; interface TagItem { name: string; diff --git a/addons/docs/src/frameworks/web-components/prepareForInline.ts b/app/web-components/src/client/docs/prepareForInline.ts similarity index 89% rename from addons/docs/src/frameworks/web-components/prepareForInline.ts rename to app/web-components/src/client/docs/prepareForInline.ts index 75f7cc5a4304..b501854839ed 100644 --- a/addons/docs/src/frameworks/web-components/prepareForInline.ts +++ b/app/web-components/src/client/docs/prepareForInline.ts @@ -1,9 +1,9 @@ import type { PartialStoryFn } from '@storybook/csf'; -import { WebComponentsFramework } from '@storybook/web-components'; import React from 'react'; - import { render } from 'lit-html'; +import { WebComponentsFramework } from '..'; + export const prepareForInline = (storyFn: PartialStoryFn) => { class Story extends React.Component { wrapperRef = React.createRef(); diff --git a/addons/docs/src/frameworks/web-components/sourceDecorator.test.ts b/app/web-components/src/client/docs/sourceDecorator.test.ts similarity index 95% rename from addons/docs/src/frameworks/web-components/sourceDecorator.test.ts rename to app/web-components/src/client/docs/sourceDecorator.test.ts index 28cff3d42c79..9b900bfb83aa 100644 --- a/addons/docs/src/frameworks/web-components/sourceDecorator.test.ts +++ b/app/web-components/src/client/docs/sourceDecorator.test.ts @@ -1,8 +1,9 @@ import { html } from 'lit-html'; import { styleMap } from 'lit-html/directives/style-map'; -import { addons, StoryContext, useEffect } from '@storybook/addons'; +import { addons, useEffect } from '@storybook/addons'; +import type { StoryContext } from '@storybook/addons'; +import { SNIPPET_RENDERED } from '@storybook/docs-tools'; import { sourceDecorator } from './sourceDecorator'; -import { SNIPPET_RENDERED } from '../../shared'; jest.mock('@storybook/addons'); const mockedAddons = addons as jest.Mocked; diff --git a/addons/docs/src/frameworks/web-components/sourceDecorator.ts b/app/web-components/src/client/docs/sourceDecorator.ts similarity index 88% rename from addons/docs/src/frameworks/web-components/sourceDecorator.ts rename to app/web-components/src/client/docs/sourceDecorator.ts index 67d68c12af67..e321db557ac9 100644 --- a/addons/docs/src/frameworks/web-components/sourceDecorator.ts +++ b/app/web-components/src/client/docs/sourceDecorator.ts @@ -1,10 +1,10 @@ /* global window */ import { render } from 'lit-html'; -import { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/csf'; +import type { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/csf'; import { addons, useEffect } from '@storybook/addons'; -import { WebComponentsFramework } from '@storybook/web-components'; +import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools'; -import { SNIPPET_RENDERED, SourceType } from '../../shared'; +import type { WebComponentsFramework } from '..'; function skipSourceRender(context: StoryContext) { const sourceParams = context?.parameters.docs?.source; diff --git a/addons/docs/src/frameworks/web-components/web-components-properties.test.ts b/app/web-components/src/client/docs/web-components-properties.test.ts similarity index 100% rename from addons/docs/src/frameworks/web-components/web-components-properties.test.ts rename to app/web-components/src/client/docs/web-components-properties.test.ts diff --git a/app/web-components/src/client/preview/index.ts b/app/web-components/src/client/preview/index.ts index 44ba037d0f03..aeb08b3bc3da 100644 --- a/app/web-components/src/client/preview/index.ts +++ b/app/web-components/src/client/preview/index.ts @@ -1,11 +1,11 @@ /* eslint-disable prefer-destructuring */ import { start } from '@storybook/core/client'; -import { ClientStoryApi, Loadable } from '@storybook/addons'; +import type { ClientStoryApi, Loadable } from '@storybook/addons'; import './globals'; import { renderToDOM } from './render'; -import { IStorybookSection } from './types'; -import { WebComponentsFramework } from './types-6-0'; +import type { IStorybookSection } from './types'; +import type { WebComponentsFramework } from './types-6-0'; const framework = 'web-components'; diff --git a/app/web-components/src/client/preview/types-6-0.ts b/app/web-components/src/client/preview/types-6-0.ts index c7e40e379cee..901b73c907b7 100644 --- a/app/web-components/src/client/preview/types-6-0.ts +++ b/app/web-components/src/client/preview/types-6-0.ts @@ -1,5 +1,10 @@ -import { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf'; -import { StoryFnHtmlReturnType } from './types'; +import type { + Args, + ComponentAnnotations, + StoryAnnotations, + AnnotatedStoryFn, +} from '@storybook/csf'; +import type { StoryFnHtmlReturnType } from './types'; export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf'; diff --git a/app/web-components/src/client/preview/types-7-0.ts b/app/web-components/src/client/preview/types-7-0.ts index b88051446a9d..d897ad97a81a 100644 --- a/app/web-components/src/client/preview/types-7-0.ts +++ b/app/web-components/src/client/preview/types-7-0.ts @@ -1,4 +1,4 @@ -import { Args } from '@storybook/csf'; +import type { Args } from '@storybook/csf'; import type { StoryObj } from './types-6-0'; diff --git a/app/web-components/src/client/preview/types.ts b/app/web-components/src/client/preview/types.ts index 2a9e2564c6e5..04cbf9a47e62 100644 --- a/app/web-components/src/client/preview/types.ts +++ b/app/web-components/src/client/preview/types.ts @@ -1,4 +1,4 @@ -import { TemplateResult, SVGTemplateResult } from 'lit-html'; +import type { TemplateResult, SVGTemplateResult } from 'lit-html'; export type { RenderContext } from '@storybook/core'; export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons'; diff --git a/app/web-components/src/server/framework-preset-web-components-docs.ts b/app/web-components/src/server/framework-preset-web-components-docs.ts new file mode 100644 index 000000000000..507496e74073 --- /dev/null +++ b/app/web-components/src/server/framework-preset-web-components-docs.ts @@ -0,0 +1,7 @@ +import { findDistEsm, StorybookConfig } from '@storybook/core-common'; +import { hasDocsOrControls } from '@storybook/docs-tools'; + +export const config: StorybookConfig['config'] = (entry = [], options) => { + if (!hasDocsOrControls(options)) return entry; + return [...entry, findDistEsm(__dirname, 'client/docs/config')]; +}; diff --git a/app/web-components/src/server/framework-preset-web-components.ts b/app/web-components/src/server/framework-preset-web-components.ts index 6432a901f51b..44e273ff8f3c 100644 --- a/app/web-components/src/server/framework-preset-web-components.ts +++ b/app/web-components/src/server/framework-preset-web-components.ts @@ -1,6 +1,7 @@ -// eslint-disable-next-line import/no-extraneous-dependencies -import { Configuration } from 'webpack'; -import { findDistEsm, Options, StorybookConfig } from '@storybook/core-common'; +import { findDistEsm } from '@storybook/core-common'; + +import type { Options, StorybookConfig } from '@storybook/core-common'; +import type { Configuration } from 'webpack'; export function webpack(config: Configuration, options: Options) { const babelrcOptions = options.features?.babelModeV7 ? null : { babelrc: false }; diff --git a/app/web-components/src/server/options.ts b/app/web-components/src/server/options.ts index 0a63c8168cb1..b94cf9009d76 100644 --- a/app/web-components/src/server/options.ts +++ b/app/web-components/src/server/options.ts @@ -1,8 +1,8 @@ import { sync } from 'read-pkg-up'; -import { LoadOptions } from '@storybook/core-common'; +import type { LoadOptions } from '@storybook/core-common'; export default { packageJson: sync({ cwd: __dirname }).packageJson, framework: 'web-components', - frameworkPresets: [require.resolve('./framework-preset-web-components')], + frameworkPresets: [require.resolve('./preset')], } as LoadOptions; diff --git a/app/web-components/src/server/preset.ts b/app/web-components/src/server/preset.ts new file mode 100644 index 000000000000..2b8b5f434f7c --- /dev/null +++ b/app/web-components/src/server/preset.ts @@ -0,0 +1,6 @@ +import type { StorybookConfig } from '@storybook/core-common'; + +export const addons: StorybookConfig['addons'] = [ + require.resolve('./framework-preset-web-components'), + require.resolve('./framework-preset-web-components-docs'), +]; diff --git a/app/web-components/tsconfig.json b/app/web-components/tsconfig.json index 77e11bbd2ab9..a7b3b6102f4c 100644 --- a/app/web-components/tsconfig.json +++ b/app/web-components/tsconfig.json @@ -2,15 +2,8 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": [ - "webpack-env", - "node" - ] + "types": ["webpack-env", "node"] }, - "include": [ - "src/**/*" - ], - "exclude": [ - "src/__tests__/**/*" - ] -} \ No newline at end of file + "include": ["src/**/*"], + "exclude": ["src/**/*.test.*", "src/__tests__/**/*"] +} diff --git a/docs/configure/css-troubleshooting/angular.mdx b/docs/configure/css-troubleshooting/angular.mdx index 26000d85472d..ab6674b7547e 100644 --- a/docs/configure/css-troubleshooting/angular.mdx +++ b/docs/configure/css-troubleshooting/angular.mdx @@ -39,4 +39,28 @@ Additionally, if you need Storybook specific styles that are separate from your } } } -``` \ No newline at end of file +``` + +### Nx with Angular 13 +If you're working with Storybook and [NX libraries](https://nx.dev/structure/library-types), you can extend your project's configuration (i.e., `project.json`) and provide the application's styles. For example: + +```json + "build-storybook": { + "executor": "@nrwl/storybook:build", + "outputs": ["{options.outputPath}"], + "options": { + "uiFramework": "@storybook/angular", + "outputPath": "dist/storybook/example-lib", + "config": { + "configFolder": "libs/example-lib/storybook/.storybook" + }, + "projectBuildConfig": "example-lib:build-storybook", + "styles": ["apps/example-app/src/styles.scss"] + }, + "configurations": { + "ci": { + "quiet": true + } + } + } +``` diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md index 8ef2ea75c1bf..dda42e4c3185 100644 --- a/docs/essentials/controls.md +++ b/docs/essentials/controls.md @@ -65,7 +65,7 @@ It works as long as you type a valid string into the auto-generated text control We can specify which controls get used by declaring a custom [argType](../api/argtypes.md) for the `variant` property. ArgTypes encode basic metadata for args, such as name, description, defaultValue for an arg. These get automatically filled in by Storybook Docs. -ArgTypes can also contain arbitrary annotations, which the user can override. Since `variant` is a property of the component, let's put that annotation on the default export. +`ArgTypes` can also contain arbitrary annotations, which the user can override. Since `variant` is a property of the component, let's put that annotation on the default export. @@ -105,7 +105,7 @@ To do so, use the `matchers` property in the `controls` parameter: ## Fully custom args -Up until now, we only used auto-generated controls based on the component we're writing stories for. If we are writing [complex stories](../writing-stories/stories-for-multiple-components.md), we may want to add controls for args that aren’t part of the component. +Until now, we only used auto-generated controls based on the component we're writing stories for. If we are writing [complex stories](../writing-stories/stories-for-multiple-components.md), we may want to add controls for args that aren’t part of the component. @@ -135,7 +135,7 @@ Using `argTypes`, you can change the display and behavior of each control. ### Dealing with complex values -You'll notice that when dealing with non-primitive values, you'll run into some limitations. The most obvious issue is that not every value can be represented as part of the `args` param in the URL, losing the ability to share and deeplink to such a state. Beyond that, complex values such as JSX cannot be synchronized between the manager (e.g., Controls addon) and the preview (your story). +When dealing with non-primitive values, you'll notice that you'll run into some limitations. The most obvious issue is that not every value can be represented as part of the `args` param in the URL, losing the ability to share and deeplink to such a state. Beyond that, complex values such as JSX cannot be synchronized between the manager (e.g., Controls addon) and the preview (your story). One way to deal with this is to use primitive values (e.g., strings) as arg values and add a custom `render` function to convert these values to their complex counterpart before rendering. It isn't the nicest way to do it (see below), but certainly the most flexible. @@ -157,7 +157,7 @@ One way to deal with this is to use primitive values (e.g., strings) as arg valu -Unless you need the flexibility of a function, an easier way to map primitives to complex values before rendering is to define a `mapping`. Additionally, you can specify `control.labels` to configure custom labels for your checkbox, radio, or select input. +Unless you need the flexibility of a function, an easier way to map primitives to complex values before rendering is to define a `mapping`, additionally, you can specify `control.labels` to configure custom labels for your checkbox, radio, or select input. @@ -180,29 +180,29 @@ The Controls addon can be configured in two ways: ### Annotation -As shown above, you can configure individual controls with the “control" annotation in the [argTypes](../api/argtypes) field of either a component or story. - -Here is the full list of available controls you can use: - -| Data Type | Control Type | Description | Options | -| :---------- | :----------: | :------------------------------------------------------- | :------------: | -| **boolean** | boolean | checkbox input | - | -| **number** | number | a numeric text box input | min, max, step | -| | range | a range slider input | min, max, step | -| **object** | object | json editor text input | - | -| **array** | object | json editor text input | - | -| | file | a file input that gives you a array of urls | accept | -| **enum** | radio | radio buttons input | - | -| | inline-radio | inline radio buttons input | - | -| | check | multi-select checkbox input | - | -| | inline-check | multi-select inline checkbox input | - | -| | select | select dropdown input | - | -| | multi-select | multi-select dropdown input | - | -| **string** | text | simple text input | - | -| | color | color picker input that assumes strings are color values | presetColors | -| | date | date picker input | - | - -If you need to customize a control for a number data type in your story, you can do it like so: +As shown above, you can configure individual controls with the “control" annotation in the [argTypes](../api/argtypes) field of either a component or story. Below is a condensed example and table featuring all available controls. + +| Data Type | Control | Description | +| ----------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **boolean** | `boolean` | Provides a toggle for switching between possible states.
`argTypes: { active: { control: 'boolean' }}` | +| **number** | `number` | Provides a numeric input to include the range of all possible values.
`argTypes: { even: { control: { type: 'number', min:1, max:30, step: 2 } }}` | +| | `range` | Provides a range slider component to include all possible values.
`argTypes: { odd: { control: { type: 'range', min: 1, max: 30, step: 3 } }}` | +| **object** | `object` | Provides a JSON-based editor component to handle the object's values.
Also allows edition in raw mode.
`argTypes: { user: { control: 'object' }}` | +| **array** | `object` | Provides a JSON-based editor component to handle the values of the array.
Also allows edition in raw mode.
`argTypes: { odd: { control: 'object' }}` | +| | `file` | Provides a file input component that returns an array of URLs.
Can be further customized to accept specific file types.
`argTypes: { avatar: { control: { type: 'file', accept: '.png' } }}` | +| **enum** | `radio` | Provides a set of radio buttons based on the available options.
`argTypes: { contact: { control: 'radio', options: ['email', 'phone', 'mail'] }}` | +| | `inline-radio` | Provides a set of inlined radio buttons based on the available options.
`argTypes: { contact: { control: 'inline-radio', options: ['email', 'phone', 'mail'] }}` | +| | `check` | Provides a set of checkbox components for selecting multiple options.
`argTypes: { contact: { control: 'check', options: ['email', 'phone', 'mail'] }}` | +| | `inline-check` | Provides a set of inlined checkbox components for selecting multiple options.
`argTypes: { contact: { control: 'inline-check', options: ['email', 'phone', 'mail'] }}` | +| | `select` | Provides a drop-down list component to handle single value selection. `argTypes: { age: { control: 'select', options: [20, 30, 40, 50] }}` | +| | `multi-select` | Provides a drop-down list that allows multiple selected values. `argTypes: { countries: { control: 'multi-select', options: ['USA', 'Canada', 'Mexico'] }}` | +| **string** | `text` | Provides a freeform text input.
`argTypes: { label: { control: 'text' }}` | +| | `color` | Provides a color picker component to handle color values.
Can be additionally configured to include a set of color presets.
`argTypes: { color: { control: { type: 'color', presetsColors: ['red', 'green']} }}` | +| | `date` | Provides a datepicker component to handle date selection. `argTypes: { startDate: { control: 'date' }}` | + +
+💡 The date control will convert the date into a UNIX timestamp when the value changes. It's a known limitation that will be fixed in a future release. If you need to represent the actual date, you'll need to update the story's implementation and convert the value into a date object. +
@@ -216,7 +216,7 @@ If you need to customize a control for a number data type in your story, you can
-💡 If you don't provide a specific one, it defaults to the number control type. +💡 Numeric data types will default to a number control unless additional configuration is provided.
### Parameters @@ -257,7 +257,7 @@ For `color` controls, you can specify an array of `presetColors`, either on the -Color presets can be defined as an object with `color` and `title` or a simple CSS color string. These will then be available as swatches in the color picker. When you hover over the color swatch, you'll be able to see its title. If none is specified, it will default to the nearest CSS color name instead. +Color presets can be defined as an object with `color` and `title` or a simple CSS color string. These will then be available as swatches in the color picker. When you hover over the color swatch, you'll be able to see its title. It will default to the nearest CSS color name if none is specified. ### Disable controls for specific properties @@ -348,4 +348,4 @@ Consider the following snippet to force required args first: ]} /> - \ No newline at end of file + diff --git a/docs/faq.md b/docs/faq.md index 4765fcdeb842..9c5934ea7830 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -97,31 +97,6 @@ A common error is that an addon tries to access the "channel", but the channel i 2. In React Native, it's a special case documented in [#1192](https://github.com/storybookjs/storybook/issues/1192) -### Can I modify React component state in stories? - -Not directly. If you control the component source, you can do something like this: - -```js -import React, { Component } from 'react'; - -export default { - title: 'MyComponent', -}; - -class MyComponent extends Component { - constructor(props) { - super(props); - - this.state = { - someVar: 'defaultValue', - ...props.initialState, - }; - } - // ... -} - -export const defaultView = () => ; -``` ### Why aren't Controls visible in the Canvas panel but visible in the Docs panel? @@ -383,4 +358,46 @@ const StoryMeta: ComponentMeta = { export default meta; ``` -Although valid, it introduces additional boilerplate code to the story definition. Instead, we're working towards implementing a safer mechanism based on what's currently being discussed in the following [issue](https://github.com/microsoft/TypeScript/issues/7481). Once the feature is released, we'll migrate our existing examples and documentation accordingly. \ No newline at end of file +Although valid, it introduces additional boilerplate code to the story definition. Instead, we're working towards implementing a safer mechanism based on what's currently being discussed in the following [issue](https://github.com/microsoft/TypeScript/issues/7481). Once the feature is released, we'll migrate our existing examples and documentation accordingly. + + +## Why is Storybook's source loader returning undefined with curried functions? + +This is a known issue with Storybook. If you're interested in getting it fixed, open an issue with a [working reproduction](./contribute/how-to-reproduce) so that it can be triaged and fixed in future releases. + + +## Why are my args no longer displaying the default values? + +Before version 6.3, unset args were set to the `argTypes.defaultValue` if specified or inferred from the component's properties (e.g., React's prop types, Angular inputs, Vue props). Starting with version 6.3, Storybook no longer infers default values but instead defines the arg's value as `undefined` when unset, allowing the framework to supply its default value. + +If you are using `argTypes.defaultValue` to fix the above, you no longer need to, and you can safely remove it from your stories. + +Additionally, suppose you were using `argTypes.defaultValue` or relying on inference to set a default value for an arg. In that case, you should define the arg's value at the component level instead: + +```js +// MyComponent.stories.js + +export default { + component: MyComponent, + args: { + //👇 Defining the arg's value at the component level. + text: 'Something', + }, +}; +``` + +For Storybook's Docs, you can manually configure the displayed value by configuring the `table.defaultValue` setting: + +```js +// MyComponent.stories.js + +export default { + component: MyComponent, + argTypes: { + //👇 Defining the arg's display value in docs. + text: { + table: { defaultValue: { summary: 'SomeType' } }, + }, + }, +}; +``` \ No newline at end of file diff --git a/docs/get-started/installation-command-section/html.mdx b/docs/get-started/installation-command-section/html.mdx index 7dab36ebede0..3575943e26df 100644 --- a/docs/get-started/installation-command-section/html.mdx +++ b/docs/get-started/installation-command-section/html.mdx @@ -2,7 +2,7 @@ Use the Storybook CLI to install it in a single command. Run this inside your _e ```shell # Add Storybook: -npx sb init +npx sb init --type html ``` If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it. diff --git a/docs/sharing/embed.md b/docs/sharing/embed.md index 9c3ea5bcfe87..afd2c009f41a 100644 --- a/docs/sharing/embed.md +++ b/docs/sharing/embed.md @@ -45,7 +45,7 @@ https://5ccbc373887ca40020446347-bysekhynzd.chromatic.com/iframe.html?id=/story/ src="https://5ccbc373887ca40020446347-bysekhynzd.chromatic.com/iframe.html?id=shadowboxcta--default&viewMode=story&shortcuts=false&singleStory=true" width="800" height="200" ->; +> ``` diff --git a/docs/snippets/common/gizmo-story-controls-customization.js.mdx b/docs/snippets/common/gizmo-story-controls-customization.js.mdx index 60a1496be661..3bc936240afa 100644 --- a/docs/snippets/common/gizmo-story-controls-customization.js.mdx +++ b/docs/snippets/common/gizmo-story-controls-customization.js.mdx @@ -5,14 +5,58 @@ import { Gizmo } from './Gizmo'; export default { /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'Gizmo', component: Gizmo, argTypes: { + canRotate: { + control: 'boolean', + }, width: { - control: { type: 'range', min: 400, max: 1200, step: 50 }, + control: { type: 'number', min: 400, max: 1200, step: 50 }, + }, + height: { + control: { type: 'range', min: 200, max: 1500, step: 50 }, + }, + rawData: { + control: 'object', + }, + coordinates: { + control: 'object', + }, + texture: { + control: { + type: 'file', + accept: '.png', + }, + }, + position: { + control: 'radio', + options: ['left', 'right', 'center'], + }, + rotationAxis: { + control: { + type: 'check', + options: ['x', 'y', 'z'], + }, + }, + scaling: { + control: 'select', + options: [10, 50, 75, 100, 200], + }, + label: { + control: 'text', + }, + meshColors: { + control: { + type: 'color', + presetsColors: ['#ff0000', '#00ff00', '#0000ff'], + }, + }, + revisionDate: { + control: 'date', }, }, }; diff --git a/docs/snippets/common/gizmo-story-controls-customization.mdx.mdx b/docs/snippets/common/gizmo-story-controls-customization.mdx.mdx index d7b149b89c5a..79959e089d55 100644 --- a/docs/snippets/common/gizmo-story-controls-customization.mdx.mdx +++ b/docs/snippets/common/gizmo-story-controls-customization.mdx.mdx @@ -9,14 +9,63 @@ import { Gizmo } from './Gizmo'; title="Gizmo" component={Gizmo} argTypes={{ + canRotate: { + control:'boolean', + }, width: { control: { - type: 'range', + type: 'number', min: 400, max: 1200, step: 50, }, }, - }} + height: { + control: { + type: 'range', + min: 200, + max: 1500, + step: 50, + }, + }, + rawData: { + control: 'object', + }, + coordinates: { + control: 'object', + }, + texture: { + control: { + type: 'file', + accept: '.png', + } + }, + position: { + control: 'radio', + options: ['left', 'right', 'center'], + }, + rotationAxis: { + control: { + type: 'check', + options: ['x', 'y', 'z'], + }, + }, + scaling: { + control: 'select', + options: [10, 50, 75, 100, 200], + }, + label: { + control: 'text', + }, + meshColors: { + control: { + type: 'color', + presetsColors: ['#ff0000', '#00ff00', '#0000ff'], + }, + }, + revisionDate: { + control: 'date', + }, +}} /> ``` \ No newline at end of file diff --git a/docs/versions/next.json b/docs/versions/next.json index 910978b5769c..e28e3a2dbf7e 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"6.5.0-alpha.42","info":{"plain":"### Bug Fixes\n\n- Controls/Essentials/Interactions: Add support for main.cjs/mjs/tsx files ([#17524](https://github.com/storybookjs/storybook/pull/17524))\n- Addon-docs: Fix preset handling for builder with options ([#17544](https://github.com/storybookjs/storybook/pull/17544))"}} \ No newline at end of file +{"version":"6.5.0-alpha.48","info":{"plain":"### Features\n\n- Addon-docs: Auto-disable docs presets if docs/controls unused ([#17697](https://github.com/storybookjs/storybook/pull/17697))\n\n### Bug Fixes\n\n- Web-components: Fix CSS class usage in CLI template ([#17702](https://github.com/storybookjs/storybook/pull/17702))\n\n### Maintenance\n\n- Addon-docs: Refactor docs support into individual framework packages ([#17695](https://github.com/storybookjs/storybook/pull/17695))"}} \ No newline at end of file diff --git a/docs/writing-docs/build-documentation.md b/docs/writing-docs/build-documentation.md index fcb87e06d888..6bfb35d37c8c 100644 --- a/docs/writing-docs/build-documentation.md +++ b/docs/writing-docs/build-documentation.md @@ -2,12 +2,6 @@ title: 'Preview and build docs' --- -
- -💡 Currently there's an issue when using MDX stories with IE11. This issue does not apply to [DocsPage](./docs-page.md). If you're interested in helping us fix this issue, read our Contribution guidelines and submit a pull request. - -
- Storybook allows you to create rich and extensive [documentation](./introduction.md) that will help you and any other stakeholder involved in the development process. Out of the box you have the tooling required to not only write it but also to preview it and build it. ## Preview Storybook's documentation diff --git a/docs/writing-docs/docs-page.md b/docs/writing-docs/docs-page.md index 80a7ecf3afec..beddd395d822 100644 --- a/docs/writing-docs/docs-page.md +++ b/docs/writing-docs/docs-page.md @@ -2,12 +2,6 @@ title: 'DocsPage' --- -
- -💡 Currently there's an issue when using MDX stories with IE11. This issue does not apply to DocsPage. If you're interested in helping us fix this issue, read our Contribution guidelines and submit a pull request. - -
- When you install [Storybook Docs](https://storybook.js.org/addons/@storybook/addon-docs), DocsPage is the zero-config default documentation that all stories get out of the box. It aggregates your [stories](../get-started/whats-a-story.md), text descriptions, docgen comments, [args tables](./doc-block-argstable.md), and code examples into a single page for each component. The best practice for docs is for each component to have its own set of documentation and stories. diff --git a/docs/writing-docs/introduction.md b/docs/writing-docs/introduction.md index 927596c76109..690f87144fad 100644 --- a/docs/writing-docs/introduction.md +++ b/docs/writing-docs/introduction.md @@ -2,12 +2,6 @@ title: 'How to document components' --- -
- -💡 Currently there's an issue when using MDX stories with IE11. This issue does not apply to [DocsPage](./docs-page.md). If you're interested in helping us fix this issue, read our Contribution guidelines and submit a pull request. - -
- When you write component stories during development, you also create basic documentation to revisit later. Storybook gives you tools to expand this basic documentation with prose and layout that feature your components and stories prominently. That allows you to create UI library usage guidelines, design system sites, and more. diff --git a/docs/writing-docs/mdx.md b/docs/writing-docs/mdx.md index b62b68bbca7b..a5924a4ebfba 100644 --- a/docs/writing-docs/mdx.md +++ b/docs/writing-docs/mdx.md @@ -4,7 +4,7 @@ title: 'MDX'
-💡 Currently there's an issue when using MDX stories with IE11. This issue does not apply to [Docs page](./docs-page.md). If you're interested in helping us fix this issue, read our Contribution guidelines and submit a pull request. +💡 Currently, there's an issue using MDX stories with IE11, which **doesn't affect** the [Docs page](./docs-page.md). It's a known MDX issue, and once it's solved, Storybook's MDX implementation will be updated accordingly.
diff --git a/docs/writing-tests/importing-stories-in-tests.md b/docs/writing-tests/importing-stories-in-tests.md index 385416572dc7..1f3caa31803b 100644 --- a/docs/writing-tests/importing-stories-in-tests.md +++ b/docs/writing-tests/importing-stories-in-tests.md @@ -165,7 +165,7 @@ With Playwright, you can write a test to check if the inputs are filled and matc -Once you execute Playwright, it opens a new browser window, load Storybook's isolated iframe, asserts if the inputs contain the specified values, and displays the test results in the terminal. +Once you execute Playwright, it opens a new browser window, loads Storybook's isolated iframe, asserts if the inputs contain the specified values, and displays the test results in the terminal. --- diff --git a/examples/angular-cli/.storybook/main.js b/examples/angular-cli/.storybook/main.js index 0357685dd98a..8af67f228e3b 100644 --- a/examples/angular-cli/.storybook/main.js +++ b/examples/angular-cli/.storybook/main.js @@ -40,4 +40,7 @@ module.exports = { }, }, staticDirs: ['../src/assets'], + features: { + buildStoriesJson: true, + }, }; diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json index 7a5689d0c201..24fc70e72521 100644 --- a/examples/angular-cli/package.json +++ b/examples/angular-cli/package.json @@ -1,18 +1,18 @@ { "name": "angular-cli", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "private": true, "license": "MIT", "scripts": { "build": "ng build", - "build-storybook": "yarn storybook-prebuild && build-storybook", + "build-storybook": "yarn storybook-prebuild && ng run angular-cli:build-storybook", "docs:json": "compodoc -p ./tsconfig.json -e json -d .", "e2e": "ng e2e", "postinstall": "ngcc --source ../../node_modules", "ng": "ng", "start": "ng serve", - "storybook": "yarn storybook-prebuild && start-storybook -p 9008 --no-manager-cache", - "storybook-prebuild": "yarn test:generate-output && yarn docs:json", + "storybook": "yarn storybook-prebuild && ng run angular-cli:storybook", + "storybook-prebuild": "yarn test:generate-output", "test": "jest", "test:coverage": "jest --coverage", "test:generate-output": "jest --json --config=jest.addon-config.js --outputFile=addon-jest.testresults.json || true", @@ -39,21 +39,21 @@ "@angular/compiler-cli": "^11.2.14", "@angular/elements": "^11.2.14", "@compodoc/compodoc": "^1.1.18", - "@storybook/addon-a11y": "6.5.0-alpha.42", - "@storybook/addon-actions": "6.5.0-alpha.42", - "@storybook/addon-backgrounds": "6.5.0-alpha.42", - "@storybook/addon-controls": "6.5.0-alpha.42", - "@storybook/addon-docs": "6.5.0-alpha.42", - "@storybook/addon-interactions": "6.5.0-alpha.42", - "@storybook/addon-jest": "6.5.0-alpha.42", - "@storybook/addon-links": "6.5.0-alpha.42", - "@storybook/addon-storyshots": "6.5.0-alpha.42", - "@storybook/addon-storysource": "6.5.0-alpha.42", - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/angular": "6.5.0-alpha.42", + "@storybook/addon-a11y": "6.5.0-alpha.48", + "@storybook/addon-actions": "6.5.0-alpha.48", + "@storybook/addon-backgrounds": "6.5.0-alpha.48", + "@storybook/addon-controls": "6.5.0-alpha.48", + "@storybook/addon-docs": "6.5.0-alpha.48", + "@storybook/addon-interactions": "6.5.0-alpha.48", + "@storybook/addon-jest": "6.5.0-alpha.48", + "@storybook/addon-links": "6.5.0-alpha.48", + "@storybook/addon-storyshots": "6.5.0-alpha.48", + "@storybook/addon-storysource": "6.5.0-alpha.48", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/angular": "6.5.0-alpha.48", "@storybook/babel-plugin-require-context-hook": "1.0.1", "@storybook/jest": "^0.0.9", - "@storybook/source-loader": "6.5.0-alpha.42", + "@storybook/source-loader": "6.5.0-alpha.48", "@storybook/testing-library": "^0.0.9", "@types/core-js": "^2.5.4", "@types/jest": "^26.0.16", diff --git a/examples/angular-cli/src/stories/addons/toolbars/locales/locales.stories.ts b/examples/angular-cli/src/stories/addons/toolbars/locales/locales.stories.ts index f15d5f895ffb..4c3812d5ada2 100644 --- a/examples/angular-cli/src/stories/addons/toolbars/locales/locales.stories.ts +++ b/examples/angular-cli/src/stories/addons/toolbars/locales/locales.stories.ts @@ -1,6 +1,7 @@ -import { DecoratorFunction } from '@storybook/addons'; -import { Meta, moduleMetadata } from '@storybook/angular'; -import { Story } from '@storybook/angular/types-6-0'; +import type { DecoratorFunction } from '@storybook/addons'; +import { moduleMetadata } from '@storybook/angular'; +import type { Meta } from '@storybook/angular'; +import type { Story } from '@storybook/angular/types-6-0'; import { TranslatePipe } from './translate.pipe'; import { DEFAULT_LOCALE } from './translate.service'; diff --git a/examples/angular-cli/src/stories/legacy/__snapshots__/storiesOf.stories.storyshot b/examples/angular-cli/src/stories/legacy/__snapshots__/storiesOf.stories.storyshot deleted file mode 100644 index 0a762f2b8cc1..000000000000 --- a/examples/angular-cli/src/stories/legacy/__snapshots__/storiesOf.stories.storyshot +++ /dev/null @@ -1,40 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Legacy / Story with storiesOf() with some emoji 1`] = ` - - - - - - - -`; - -exports[`Storyshots Legacy / Story with storiesOf() with text 1`] = ` - - - - - -`; diff --git a/examples/angular-cli/src/stories/legacy/storiesOf.stories.ts b/examples/angular-cli/src/stories/legacy/storiesOf.stories.ts deleted file mode 100644 index 8b9f3854d808..000000000000 --- a/examples/angular-cli/src/stories/legacy/storiesOf.stories.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { storiesOf, moduleMetadata } from '@storybook/angular'; -import { Button } from '@storybook/angular/demo'; - -storiesOf('Legacy / Story with storiesOf()', module) - .addDecorator( - moduleMetadata({ - declarations: [Button], - }) - ) - .add('with text', () => ({ - template: ``, - props: { - text: 'Hello Button', - onClick: (event: any) => { - console.log('some bindings work'); - console.log(event); - }, - }, - })) - .add('with some emoji', () => ({ - template: ``, - props: { - text: '😀 😎 👍 💯', - onClick: () => {}, - }, - })); diff --git a/examples/cra-kitchen-sink/.storybook/main.js b/examples/cra-kitchen-sink/.storybook/main.js index 0179e07dd64d..486f57474131 100644 --- a/examples/cra-kitchen-sink/.storybook/main.js +++ b/examples/cra-kitchen-sink/.storybook/main.js @@ -34,4 +34,7 @@ module.exports = { builder: 'webpack4', }, staticDirs: ['../public'], + features: { + buildStoriesJson: true, + }, }; diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json index 0029aec8083e..14304cd892a7 100644 --- a/examples/cra-kitchen-sink/package.json +++ b/examples/cra-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "cra-kitchen-sink", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "private": true, "scripts": { "build": "react-scripts build", @@ -11,7 +11,7 @@ "test": "react-scripts test --env=jsdom" }, "dependencies": { - "@storybook/client-logger": "6.5.0-alpha.42", + "@storybook/client-logger": "6.5.0-alpha.48", "global": "^4.4.0", "prop-types": "^15.7.2", "react": "16.14.0", @@ -21,19 +21,19 @@ }, "devDependencies": { "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", - "@storybook/addon-a11y": "6.5.0-alpha.42", - "@storybook/addon-actions": "6.5.0-alpha.42", - "@storybook/addon-backgrounds": "6.5.0-alpha.42", - "@storybook/addon-docs": "6.5.0-alpha.42", + "@storybook/addon-a11y": "6.5.0-alpha.48", + "@storybook/addon-actions": "6.5.0-alpha.48", + "@storybook/addon-backgrounds": "6.5.0-alpha.48", + "@storybook/addon-docs": "6.5.0-alpha.48", "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0", - "@storybook/addon-jest": "6.5.0-alpha.42", - "@storybook/addon-links": "6.5.0-alpha.42", - "@storybook/addon-storyshots": "6.5.0-alpha.42", - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/builder-webpack4": "6.5.0-alpha.42", + "@storybook/addon-jest": "6.5.0-alpha.48", + "@storybook/addon-links": "6.5.0-alpha.48", + "@storybook/addon-storyshots": "6.5.0-alpha.48", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/builder-webpack4": "6.5.0-alpha.48", "@storybook/preset-create-react-app": "^3.1.6", - "@storybook/react": "6.5.0-alpha.42", - "@storybook/theming": "6.5.0-alpha.42", + "@storybook/react": "6.5.0-alpha.48", + "@storybook/theming": "6.5.0-alpha.48", "webpack": "4" }, "storybook": { diff --git a/examples/cra-react15/package.json b/examples/cra-react15/package.json index fd7f2c9f052e..5e8b0540efa4 100644 --- a/examples/cra-react15/package.json +++ b/examples/cra-react15/package.json @@ -1,6 +1,6 @@ { "name": "cra-react15", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "private": true, "scripts": { "build": "react-scripts build", @@ -19,14 +19,14 @@ "react-scripts": "3.4.4" }, "devDependencies": { - "@storybook/addon-actions": "6.5.0-alpha.42", + "@storybook/addon-actions": "6.5.0-alpha.48", "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0", - "@storybook/addon-links": "6.5.0-alpha.42", - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/builder-webpack4": "6.5.0-alpha.42", + "@storybook/addon-links": "6.5.0-alpha.48", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/builder-webpack4": "6.5.0-alpha.48", "@storybook/preset-create-react-app": "^3.1.6", - "@storybook/react": "6.5.0-alpha.42", - "@storybook/theming": "6.5.0-alpha.42", + "@storybook/react": "6.5.0-alpha.48", + "@storybook/theming": "6.5.0-alpha.48", "babel-core": "6", "babel-runtime": "6", "webpack": "4" diff --git a/examples/cra-ts-essentials/.storybook/main.js b/examples/cra-ts-essentials/.storybook/main.js index 2ddcf7a8e5be..97a4e0a2b0ff 100644 --- a/examples/cra-ts-essentials/.storybook/main.js +++ b/examples/cra-ts-essentials/.storybook/main.js @@ -26,4 +26,7 @@ module.exports = { builder: 'webpack4', }, staticDirs: ['../public'], + features: { + buildStoriesJson: true, + }, }; diff --git a/examples/cra-ts-essentials/package.json b/examples/cra-ts-essentials/package.json index 759fa5194528..52ae2afbf6e4 100644 --- a/examples/cra-ts-essentials/package.json +++ b/examples/cra-ts-essentials/package.json @@ -1,6 +1,6 @@ { "name": "cra-ts-essentials", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "private": true, "scripts": { "build": "react-scripts build", @@ -34,12 +34,12 @@ "typescript": "^3.9.7" }, "devDependencies": { - "@storybook/addon-essentials": "6.5.0-alpha.42", + "@storybook/addon-essentials": "6.5.0-alpha.48", "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0", - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/builder-webpack4": "6.5.0-alpha.42", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/builder-webpack4": "6.5.0-alpha.48", "@storybook/preset-create-react-app": "^3.1.6", - "@storybook/react": "6.5.0-alpha.42", + "@storybook/react": "6.5.0-alpha.48", "webpack": "4" }, "storybook": { diff --git a/examples/cra-ts-kitchen-sink/.storybook/main.ts b/examples/cra-ts-kitchen-sink/.storybook/main.ts index 2f33809ea751..048a7f5cefae 100644 --- a/examples/cra-ts-kitchen-sink/.storybook/main.ts +++ b/examples/cra-ts-kitchen-sink/.storybook/main.ts @@ -1,4 +1,4 @@ -import { Configuration } from 'webpack'; +import type { Configuration } from 'webpack'; const path = require('path'); @@ -30,4 +30,7 @@ module.exports = { builder: 'webpack4', }, staticDirs: ['../public'], + features: { + buildStoriesJson: true, + }, }; diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json index 6793fe1297f0..96f8e72c73f5 100644 --- a/examples/cra-ts-kitchen-sink/package.json +++ b/examples/cra-ts-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "cra-ts-kitchen-sink", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "private": true, "scripts": { "build": "react-scripts build", @@ -34,15 +34,15 @@ "typescript": "^3.9.7" }, "devDependencies": { - "@storybook/addon-a11y": "6.5.0-alpha.42", - "@storybook/addon-actions": "6.5.0-alpha.42", - "@storybook/addon-docs": "6.5.0-alpha.42", + "@storybook/addon-a11y": "6.5.0-alpha.48", + "@storybook/addon-actions": "6.5.0-alpha.48", + "@storybook/addon-docs": "6.5.0-alpha.48", "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0", - "@storybook/addon-links": "6.5.0-alpha.42", - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/builder-webpack4": "6.5.0-alpha.42", + "@storybook/addon-links": "6.5.0-alpha.48", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/builder-webpack4": "6.5.0-alpha.48", "@storybook/preset-create-react-app": "^3.1.6", - "@storybook/react": "6.5.0-alpha.42", + "@storybook/react": "6.5.0-alpha.48", "@types/enzyme": "^3.10.8", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.9.1", diff --git a/examples/ember-cli/.storybook/main.js b/examples/ember-cli/.storybook/main.js index a1eb7ba54fa0..c58025c3fd1c 100644 --- a/examples/ember-cli/.storybook/main.js +++ b/examples/ember-cli/.storybook/main.js @@ -30,4 +30,7 @@ module.exports = { builder: 'webpack4', }, staticDirs: ['../ember-output'], + features: { + buildStoriesJson: true, + }, }; diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json index 5b5be922f825..4d4dbcb5c10b 100644 --- a/examples/ember-cli/package.json +++ b/examples/ember-cli/package.json @@ -1,6 +1,6 @@ { "name": "ember-example", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "private": true, "scripts": { "build": "ember build --output-path ember-output", @@ -17,18 +17,18 @@ "devDependencies": { "@babel/core": "^7.12.10", "@ember/optional-features": "^2.0.0", - "@storybook/addon-a11y": "6.5.0-alpha.42", - "@storybook/addon-actions": "6.5.0-alpha.42", - "@storybook/addon-backgrounds": "6.5.0-alpha.42", - "@storybook/addon-controls": "6.5.0-alpha.42", - "@storybook/addon-docs": "6.5.0-alpha.42", - "@storybook/addon-links": "6.5.0-alpha.42", - "@storybook/addon-storysource": "6.5.0-alpha.42", - "@storybook/addon-viewport": "6.5.0-alpha.42", - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/ember": "6.5.0-alpha.42", + "@storybook/addon-a11y": "6.5.0-alpha.48", + "@storybook/addon-actions": "6.5.0-alpha.48", + "@storybook/addon-backgrounds": "6.5.0-alpha.48", + "@storybook/addon-controls": "6.5.0-alpha.48", + "@storybook/addon-docs": "6.5.0-alpha.48", + "@storybook/addon-links": "6.5.0-alpha.48", + "@storybook/addon-storysource": "6.5.0-alpha.48", + "@storybook/addon-viewport": "6.5.0-alpha.48", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/ember": "6.5.0-alpha.48", "@storybook/ember-cli-storybook": "^0.2.1", - "@storybook/source-loader": "6.5.0-alpha.42", + "@storybook/source-loader": "6.5.0-alpha.48", "babel-loader": "^8.0.0", "broccoli-asset-rev": "^3.0.0", "cross-env": "^7.0.3", diff --git a/examples/html-kitchen-sink/.storybook/main.js b/examples/html-kitchen-sink/.storybook/main.js index dbdf6dddd558..9a7f974f2c16 100644 --- a/examples/html-kitchen-sink/.storybook/main.js +++ b/examples/html-kitchen-sink/.storybook/main.js @@ -24,6 +24,9 @@ module.exports = { core: { builder: 'webpack4', }, + features: { + buildStoriesJson: true, + }, // Test code for built-in stories.json extraction // // refs: { diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json index 5923dfbf1d2d..e659510c66b2 100644 --- a/examples/html-kitchen-sink/package.json +++ b/examples/html-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "html-kitchen-sink", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "private": true, "description": "", "keywords": [], @@ -13,23 +13,23 @@ "storybook": "start-storybook -p 9006 --no-manager-cache" }, "devDependencies": { - "@storybook/addon-a11y": "6.5.0-alpha.42", - "@storybook/addon-actions": "6.5.0-alpha.42", - "@storybook/addon-backgrounds": "6.5.0-alpha.42", - "@storybook/addon-controls": "6.5.0-alpha.42", - "@storybook/addon-docs": "6.5.0-alpha.42", - "@storybook/addon-jest": "6.5.0-alpha.42", - "@storybook/addon-links": "6.5.0-alpha.42", + "@storybook/addon-a11y": "6.5.0-alpha.48", + "@storybook/addon-actions": "6.5.0-alpha.48", + "@storybook/addon-backgrounds": "6.5.0-alpha.48", + "@storybook/addon-controls": "6.5.0-alpha.48", + "@storybook/addon-docs": "6.5.0-alpha.48", + "@storybook/addon-jest": "6.5.0-alpha.48", + "@storybook/addon-links": "6.5.0-alpha.48", "@storybook/addon-postcss": "^2.0.0", - "@storybook/addon-storyshots": "6.5.0-alpha.42", - "@storybook/addon-storysource": "6.5.0-alpha.42", - "@storybook/addon-viewport": "6.5.0-alpha.42", - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/client-api": "6.5.0-alpha.42", - "@storybook/core": "6.5.0-alpha.42", - "@storybook/core-events": "6.5.0-alpha.42", - "@storybook/html": "6.5.0-alpha.42", - "@storybook/source-loader": "6.5.0-alpha.42", + "@storybook/addon-storyshots": "6.5.0-alpha.48", + "@storybook/addon-storysource": "6.5.0-alpha.48", + "@storybook/addon-viewport": "6.5.0-alpha.48", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/client-api": "6.5.0-alpha.48", + "@storybook/core": "6.5.0-alpha.48", + "@storybook/core-events": "6.5.0-alpha.48", + "@storybook/html": "6.5.0-alpha.48", + "@storybook/source-loader": "6.5.0-alpha.48", "autoprefixer": "^10.0.1", "eventemitter3": "^4.0.7", "format-json": "^1.0.3", diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json index ee57973b0865..51c9e9a5fc6c 100644 --- a/examples/official-storybook/package.json +++ b/examples/official-storybook/package.json @@ -1,6 +1,6 @@ { "name": "official-storybook", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "private": true, "scripts": { "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./", @@ -14,31 +14,31 @@ "devDependencies": { "@packtracker/webpack-plugin": "^2.3.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", - "@storybook/addon-a11y": "6.5.0-alpha.42", - "@storybook/addon-actions": "6.5.0-alpha.42", - "@storybook/addon-backgrounds": "6.5.0-alpha.42", - "@storybook/addon-controls": "6.5.0-alpha.42", - "@storybook/addon-docs": "6.5.0-alpha.42", - "@storybook/addon-interactions": "6.5.0-alpha.42", - "@storybook/addon-jest": "6.5.0-alpha.42", - "@storybook/addon-links": "6.5.0-alpha.42", - "@storybook/addon-storyshots": "6.5.0-alpha.42", - "@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.42", - "@storybook/addon-storysource": "6.5.0-alpha.42", - "@storybook/addon-toolbars": "6.5.0-alpha.42", - "@storybook/addon-viewport": "6.5.0-alpha.42", - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/cli": "6.5.0-alpha.42", - "@storybook/components": "6.5.0-alpha.42", - "@storybook/core-events": "6.5.0-alpha.42", + "@storybook/addon-a11y": "6.5.0-alpha.48", + "@storybook/addon-actions": "6.5.0-alpha.48", + "@storybook/addon-backgrounds": "6.5.0-alpha.48", + "@storybook/addon-controls": "6.5.0-alpha.48", + "@storybook/addon-docs": "6.5.0-alpha.48", + "@storybook/addon-interactions": "6.5.0-alpha.48", + "@storybook/addon-jest": "6.5.0-alpha.48", + "@storybook/addon-links": "6.5.0-alpha.48", + "@storybook/addon-storyshots": "6.5.0-alpha.48", + "@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.48", + "@storybook/addon-storysource": "6.5.0-alpha.48", + "@storybook/addon-toolbars": "6.5.0-alpha.48", + "@storybook/addon-viewport": "6.5.0-alpha.48", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/cli": "6.5.0-alpha.48", + "@storybook/components": "6.5.0-alpha.48", + "@storybook/core-events": "6.5.0-alpha.48", "@storybook/design-system": "^5.4.7", "@storybook/jest": "^0.0.9", - "@storybook/node-logger": "6.5.0-alpha.42", - "@storybook/react": "6.5.0-alpha.42", - "@storybook/router": "6.5.0-alpha.42", - "@storybook/source-loader": "6.5.0-alpha.42", + "@storybook/node-logger": "6.5.0-alpha.48", + "@storybook/react": "6.5.0-alpha.48", + "@storybook/router": "6.5.0-alpha.48", + "@storybook/source-loader": "6.5.0-alpha.48", "@storybook/testing-library": "^0.0.9", - "@storybook/theming": "6.5.0-alpha.42", + "@storybook/theming": "6.5.0-alpha.48", "@testing-library/dom": "^7.31.2", "@testing-library/user-event": "^13.1.9", "chromatic": "^6.0.2", @@ -56,7 +56,6 @@ "react": "16.14.0", "react-dom": "16.14.0", "terser-webpack-plugin": "^5.0.3", - "uuid": "^8.3.2", "uuid-browser": "^3.1.0", "webpack": "4" }, diff --git a/examples/preact-kitchen-sink/.storybook/main.js b/examples/preact-kitchen-sink/.storybook/main.js index 781d93b00a98..9ed640ccc25d 100644 --- a/examples/preact-kitchen-sink/.storybook/main.js +++ b/examples/preact-kitchen-sink/.storybook/main.js @@ -25,4 +25,7 @@ module.exports = { builder: 'webpack4', }, staticDirs: ['../public'], + features: { + buildStoriesJson: true, + }, }; diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json index b6c12525dbc6..a413948ca89b 100644 --- a/examples/preact-kitchen-sink/package.json +++ b/examples/preact-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "preact-example", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "private": true, "scripts": { "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", @@ -15,16 +15,16 @@ "devDependencies": { "@babel/core": "^7.12.10", "@babel/plugin-transform-runtime": "^7.12.10", - "@storybook/addon-a11y": "6.5.0-alpha.42", - "@storybook/addon-actions": "6.5.0-alpha.42", - "@storybook/addon-backgrounds": "6.5.0-alpha.42", - "@storybook/addon-links": "6.5.0-alpha.42", - "@storybook/addon-storyshots": "6.5.0-alpha.42", - "@storybook/addon-storysource": "6.5.0-alpha.42", - "@storybook/addon-viewport": "6.5.0-alpha.42", - "@storybook/addons": "6.5.0-alpha.42", - "@storybook/preact": "6.5.0-alpha.42", - "@storybook/source-loader": "6.5.0-alpha.42", + "@storybook/addon-a11y": "6.5.0-alpha.48", + "@storybook/addon-actions": "6.5.0-alpha.48", + "@storybook/addon-backgrounds": "6.5.0-alpha.48", + "@storybook/addon-links": "6.5.0-alpha.48", + "@storybook/addon-storyshots": "6.5.0-alpha.48", + "@storybook/addon-storysource": "6.5.0-alpha.48", + "@storybook/addon-viewport": "6.5.0-alpha.48", + "@storybook/addons": "6.5.0-alpha.48", + "@storybook/preact": "6.5.0-alpha.48", + "@storybook/source-loader": "6.5.0-alpha.48", "@types/prop-types": "^15.7.3", "@types/react": "^17", "@types/react-dom": "^17", diff --git a/examples/react-ts-webpack4/package.json b/examples/react-ts-webpack4/package.json index f11305ae10e2..0cafbf3dcd9c 100644 --- a/examples/react-ts-webpack4/package.json +++ b/examples/react-ts-webpack4/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/example-react-ts-webpack4", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "private": true, "scripts": { "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./", @@ -8,10 +8,10 @@ "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-manager-cache" }, "dependencies": { - "@storybook/addon-controls": "6.5.0-alpha.42", - "@storybook/addon-essentials": "6.5.0-alpha.42", - "@storybook/builder-webpack4": "6.5.0-alpha.42", - "@storybook/react": "6.5.0-alpha.42", + "@storybook/addon-controls": "6.5.0-alpha.48", + "@storybook/addon-essentials": "6.5.0-alpha.48", + "@storybook/builder-webpack4": "6.5.0-alpha.48", + "@storybook/react": "6.5.0-alpha.48", "@types/react": "^16.14.23", "@types/react-dom": "^16.9.14", "prop-types": "15.7.2", diff --git a/examples/react-ts/.storybook/main.ts b/examples/react-ts/.storybook/main.ts index 0d9b8e8580b1..2e82165e7cea 100644 --- a/examples/react-ts/.storybook/main.ts +++ b/examples/react-ts/.storybook/main.ts @@ -32,6 +32,7 @@ const config: StorybookConfig = { buildStoriesJson: true, babelModeV7: true, warnOnLegacyHierarchySeparator: false, + previewMdx2: true, }, framework: '@storybook/react', }; diff --git a/examples/react-ts/package.json b/examples/react-ts/package.json index 1d6c84885d33..c4cc06979a06 100644 --- a/examples/react-ts/package.json +++ b/examples/react-ts/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/example-react-ts", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "private": true, "scripts": { "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook", @@ -18,13 +18,13 @@ "@babel/preset-env": "^7.12.11", "@babel/preset-react": "^7.12.10", "@babel/preset-typescript": "^7.12.7", - "@storybook/addon-essentials": "6.5.0-alpha.42", - "@storybook/addon-storyshots": "6.5.0-alpha.42", - "@storybook/addon-storysource": "6.5.0-alpha.42", - "@storybook/cli": "6.5.0-alpha.42", - "@storybook/components": "6.5.0-alpha.42", - "@storybook/react": "6.5.0-alpha.42", - "@storybook/theming": "6.5.0-alpha.42", + "@storybook/addon-essentials": "6.5.0-alpha.48", + "@storybook/addon-storyshots": "6.5.0-alpha.48", + "@storybook/addon-storysource": "6.5.0-alpha.48", + "@storybook/cli": "6.5.0-alpha.48", + "@storybook/components": "6.5.0-alpha.48", + "@storybook/react": "6.5.0-alpha.48", + "@storybook/theming": "6.5.0-alpha.48", "@testing-library/dom": "^7.31.2", "@testing-library/user-event": "^13.1.9", "@types/babel__preset-env": "^7", diff --git a/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap b/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap index 6131b653d6bf..3926326cf9aa 100644 --- a/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap +++ b/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots Demo/Account Form Standard 1`] = ` +exports[`Storyshots Demo/AccountForm Standard 1`] = ` .emotion-15 { font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; display: -webkit-box; @@ -368,7 +368,7 @@ exports[`Storyshots Demo/Account Form Standard 1`] = ` `; -exports[`Storyshots Demo/Account Form Standard Email Failed 1`] = ` +exports[`Storyshots Demo/AccountForm Standard Email Failed 1`] = ` .emotion-15 { font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; display: -webkit-box; @@ -736,7 +736,7 @@ exports[`Storyshots Demo/Account Form Standard Email Failed 1`] = ` `; -exports[`Storyshots Demo/Account Form Standard Email Filled 1`] = ` +exports[`Storyshots Demo/AccountForm Standard Email Filled 1`] = ` .emotion-15 { font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; display: -webkit-box; @@ -1104,7 +1104,7 @@ exports[`Storyshots Demo/Account Form Standard Email Filled 1`] = ` `; -exports[`Storyshots Demo/Account Form Standard Fail Hover 1`] = ` +exports[`Storyshots Demo/AccountForm Standard Fail Hover 1`] = ` .emotion-15 { font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; display: -webkit-box; @@ -1472,7 +1472,7 @@ exports[`Storyshots Demo/Account Form Standard Fail Hover 1`] = ` `; -exports[`Storyshots Demo/Account Form Standard Password Failed 1`] = ` +exports[`Storyshots Demo/AccountForm Standard Password Failed 1`] = ` .emotion-15 { font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; display: -webkit-box; @@ -1840,7 +1840,7 @@ exports[`Storyshots Demo/Account Form Standard Password Failed 1`] = ` `; -exports[`Storyshots Demo/Account Form Verification 1`] = ` +exports[`Storyshots Demo/AccountForm Verification 1`] = ` .emotion-18 { font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; display: -webkit-box; @@ -2231,7 +2231,7 @@ exports[`Storyshots Demo/Account Form Verification 1`] = ` `; -exports[`Storyshots Demo/Account Form Verification Passsword 1 1`] = ` +exports[`Storyshots Demo/AccountForm Verification Passsword 1 1`] = ` .emotion-18 { font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; display: -webkit-box; @@ -2622,7 +2622,7 @@ exports[`Storyshots Demo/Account Form Verification Passsword 1 1`] = ` `; -exports[`Storyshots Demo/Account Form Verification Password Mismatch 1`] = ` +exports[`Storyshots Demo/AccountForm Verification Password Mismatch 1`] = ` .emotion-18 { font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; display: -webkit-box; @@ -3013,7 +3013,7 @@ exports[`Storyshots Demo/Account Form Verification Password Mismatch 1`] = ` `; -exports[`Storyshots Demo/Account Form Verification Success 1`] = ` +exports[`Storyshots Demo/AccountForm Verification Success 1`] = ` .emotion-18 { font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; display: -webkit-box; @@ -3404,7 +3404,7 @@ exports[`Storyshots Demo/Account Form Verification Success 1`] = ` `; -exports[`Storyshots Docs/Button Basic 1`] = ` +exports[`Storyshots Docs/ButtonMdx Basic 1`] = ` `; -exports[`Storyshots Docs/Button Controls 1`] = ` +exports[`Storyshots Docs/ButtonMdx Controls 1`] = ` `; +exports[`Storyshots Examples / Button Process Env 1`] = ` + +`; + exports[`Storyshots Examples / Button Story No Render 1`] = ` - - - ); -} - -MDXContent.isMDXComponent = true; - -export const basic = () => ; -basic.storyName = 'Basic'; -basic.parameters = { storySource: { source: '' } }; - -const componentMeta = { component: Button, includeStories: ['basic'] }; - -const mdxStoryNameToKey = { Basic: 'basic' }; - -componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: () => ( - - - - ), -}; - -export default componentMeta; -" -`; diff --git a/lib/csf-tools/__testfixtures__/mdx/component-args.output.snapshot b/lib/csf-tools/__testfixtures__/mdx/component-args.output.snapshot deleted file mode 100644 index a6a16c6dba96..000000000000 --- a/lib/csf-tools/__testfixtures__/mdx/component-args.output.snapshot +++ /dev/null @@ -1,77 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`docs-mdx-compiler-plugin component-args.mdx 1`] = ` -"/* @jsxRuntime classic */ -/* @jsx mdx */ -import { assertIsFn, AddContext } from '@storybook/addon-docs'; - -import { Button } from '@storybook/react/demo'; -import { Story, Meta } from '@storybook/addon-docs'; - -const layoutProps = {}; -const MDXLayout = 'wrapper'; -function MDXContent({ components, ...props }) { - return ( - - -

{\`Args\`}

- - - -
- ); -} - -MDXContent.isMDXComponent = true; - -export const componentNotes = () => ; -componentNotes.storyName = 'component notes'; -componentNotes.parameters = { storySource: { source: '' } }; - -const componentMeta = { - title: 'Button', - args: { - a: 1, - b: 2, - }, - argTypes: { - a: { - name: 'A', - }, - b: { - name: 'B', - }, - }, - includeStories: ['componentNotes'], -}; - -const mdxStoryNameToKey = { 'component notes': 'componentNotes' }; - -componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: () => ( - - - - ), -}; - -export default componentMeta; -" -`; diff --git a/lib/csf-tools/__testfixtures__/mdx/component-id.output.snapshot b/lib/csf-tools/__testfixtures__/mdx/component-id.output.snapshot deleted file mode 100644 index a96ae928535b..000000000000 --- a/lib/csf-tools/__testfixtures__/mdx/component-id.output.snapshot +++ /dev/null @@ -1,51 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`docs-mdx-compiler-plugin component-id.mdx 1`] = ` -"/* @jsxRuntime classic */ -/* @jsx mdx */ -import { assertIsFn, AddContext } from '@storybook/addon-docs'; - -import { Button } from '@storybook/react/demo'; -import { Story, Meta } from '@storybook/addon-docs'; - -const layoutProps = {}; -const MDXLayout = 'wrapper'; -function MDXContent({ components, ...props }) { - return ( - - - - - - - ); -} - -MDXContent.isMDXComponent = true; - -export const componentNotes = () => ; -componentNotes.storyName = 'component notes'; -componentNotes.parameters = { storySource: { source: '' } }; - -const componentMeta = { - title: 'Button', - id: 'button-id', - component: Button, - includeStories: ['componentNotes'], -}; - -const mdxStoryNameToKey = { 'component notes': 'componentNotes' }; - -componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: () => ( - - - - ), -}; - -export default componentMeta; -" -`; diff --git a/lib/csf-tools/__testfixtures__/mdx/component-render.output.snapshot b/lib/csf-tools/__testfixtures__/mdx/component-render.output.snapshot deleted file mode 100644 index 2d2151dd73cf..000000000000 --- a/lib/csf-tools/__testfixtures__/mdx/component-render.output.snapshot +++ /dev/null @@ -1,54 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`docs-mdx-compiler-plugin csf3 component-render.mdx 1`] = ` -"/* @jsxRuntime classic */ -/* @jsx mdx */ -import { assertIsFn, AddContext } from '@storybook/addon-docs'; - -import { Button } from '@storybook/react/demo'; -import { Story, Meta } from '@storybook/addon-docs'; - -const layoutProps = {}; -const MDXLayout = 'wrapper'; -function MDXContent({ components, ...props }) { - return ( - - - - - ); -} - -MDXContent.isMDXComponent = true; - -export const one = () => ; -one.storyName = 'one'; -one.parameters = { storySource: { source: '' } }; -one.decorators = [(storyFn) =>
{storyFn()}
]; - -const componentMeta = { - title: 'Button', - decorators: [ - (storyFn) => ( -
- {storyFn()} -
- ), - ], - includeStories: ['one'], -}; - -const mdxStoryNameToKey = { one: 'one' }; - -componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: () => ( - - - - ), -}; - -export default componentMeta; -" -`; diff --git a/lib/csf-tools/__testfixtures__/mdx/default-render.output.snapshot b/lib/csf-tools/__testfixtures__/mdx/default-render.output.snapshot deleted file mode 100644 index e9ba04184e31..000000000000 --- a/lib/csf-tools/__testfixtures__/mdx/default-render.output.snapshot +++ /dev/null @@ -1,44 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`docs-mdx-compiler-plugin csf3 default-render.mdx 1`] = ` -"/* @jsxRuntime classic */ -/* @jsx mdx */ -import { assertIsFn, AddContext } from '@storybook/addon-docs'; - -import { Button } from '@storybook/react/demo'; -import { Story, Meta } from '@storybook/addon-docs'; - -const layoutProps = {}; -const MDXLayout = 'wrapper'; -function MDXContent({ components, ...props }) { - return ( - - - - - ); -} - -MDXContent.isMDXComponent = true; - -export const basic = {}; -basic.storyName = 'Basic'; -basic.parameters = { storySource: { source: '{}' } }; - -const componentMeta = { title: 'Button', component: Button, includeStories: ['basic'] }; - -const mdxStoryNameToKey = { Basic: 'basic' }; - -componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: () => ( - - - - ), -}; - -export default componentMeta; -" -`; diff --git a/lib/csf-tools/__testfixtures__/mdx/docs-only.output.snapshot b/lib/csf-tools/__testfixtures__/mdx/docs-only.output.snapshot deleted file mode 100644 index d46366c31e4c..000000000000 --- a/lib/csf-tools/__testfixtures__/mdx/docs-only.output.snapshot +++ /dev/null @@ -1,46 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`docs-mdx-compiler-plugin docs-only.mdx 1`] = ` -"/* @jsxRuntime classic */ -/* @jsx mdx */ -import { assertIsFn, AddContext } from '@storybook/addon-docs'; - -import { Meta } from '@storybook/addon-docs'; - -const layoutProps = {}; -const MDXLayout = 'wrapper'; -function MDXContent({ components, ...props }) { - return ( - - -

{\`Documentation only\`}

-

{\`This is a documentation-only MDX file which generates a dummy 'docsOnly: true' story.\`}

-
- ); -} - -MDXContent.isMDXComponent = true; - -export const __page = () => { - throw new Error('Docs-only story'); -}; - -__page.parameters = { docsOnly: true }; - -const componentMeta = { title: 'docs-only', includeStories: ['__page'] }; - -const mdxStoryNameToKey = {}; - -componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: () => ( - - - - ), -}; - -export default componentMeta; -" -`; diff --git a/lib/csf-tools/__testfixtures__/mdx/loaders.output.snapshot b/lib/csf-tools/__testfixtures__/mdx/loaders.output.snapshot deleted file mode 100644 index 14c1d64b6336..000000000000 --- a/lib/csf-tools/__testfixtures__/mdx/loaders.output.snapshot +++ /dev/null @@ -1,76 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`docs-mdx-compiler-plugin loaders.mdx 1`] = ` -"/* @jsxRuntime classic */ -/* @jsx mdx */ -import { assertIsFn, AddContext } from '@storybook/addon-docs'; - -import { Button } from '@storybook/react/demo'; -import { Story, Meta } from '@storybook/addon-docs'; - -const layoutProps = {}; -const MDXLayout = 'wrapper'; -function MDXContent({ components, ...props }) { - return ( - - ({ - foo: 1, - }), - ]} - mdxType=\\"Meta\\" - /> -

{\`Story with loader\`}

- ({ - bar: 2, - }), - ]} - mdxType=\\"Story\\" - > - - -
- ); -} - -MDXContent.isMDXComponent = true; - -export const one = () => ; -one.storyName = 'one'; -one.parameters = { storySource: { source: '' } }; -one.loaders = [ - async () => ({ - bar: 2, - }), -]; - -const componentMeta = { - title: 'Button', - loaders: [ - async () => ({ - foo: 1, - }), - ], - includeStories: ['one'], -}; - -const mdxStoryNameToKey = { one: 'one' }; - -componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: () => ( - - - - ), -}; - -export default componentMeta; -" -`; diff --git a/lib/csf-tools/__testfixtures__/mdx/meta-quotes-in-title.output.snapshot b/lib/csf-tools/__testfixtures__/mdx/meta-quotes-in-title.output.snapshot deleted file mode 100644 index 2ac4dfc1ba53..000000000000 --- a/lib/csf-tools/__testfixtures__/mdx/meta-quotes-in-title.output.snapshot +++ /dev/null @@ -1,44 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`docs-mdx-compiler-plugin meta-quotes-in-title.mdx 1`] = ` -"/* @jsxRuntime classic */ -/* @jsx mdx */ -import { assertIsFn, AddContext } from '@storybook/addon-docs'; - -import { Meta } from '@storybook/addon-docs'; - -const layoutProps = {}; -const MDXLayout = 'wrapper'; -function MDXContent({ components, ...props }) { - return ( - - - - ); -} - -MDXContent.isMDXComponent = true; - -export const __page = () => { - throw new Error('Docs-only story'); -}; - -__page.parameters = { docsOnly: true }; - -const componentMeta = { title: \\"Addons/Docs/what's in a title?\\", includeStories: ['__page'] }; - -const mdxStoryNameToKey = {}; - -componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: () => ( - - - - ), -}; - -export default componentMeta; -" -`; diff --git a/lib/csf-tools/__testfixtures__/mdx/non-story-exports.output.snapshot b/lib/csf-tools/__testfixtures__/mdx/non-story-exports.output.snapshot deleted file mode 100644 index 1cbdd52ebaad..000000000000 --- a/lib/csf-tools/__testfixtures__/mdx/non-story-exports.output.snapshot +++ /dev/null @@ -1,58 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`docs-mdx-compiler-plugin non-story-exports.mdx 1`] = ` -"/* @jsxRuntime classic */ -/* @jsx mdx */ -import { assertIsFn, AddContext } from '@storybook/addon-docs'; - -import { Button } from '@storybook/react/demo'; -import { Story, Meta } from '@storybook/addon-docs'; -export const two = 2; - -const layoutProps = { - two, -}; -const MDXLayout = 'wrapper'; -function MDXContent({ components, ...props }) { - return ( - - -

{\`Story definition\`}

- - - - - - - -
- ); -} - -MDXContent.isMDXComponent = true; - -export const one = () => ; -one.storyName = 'one'; -one.parameters = { storySource: { source: '' } }; - -export const helloStory = () => ; -helloStory.storyName = 'hello story'; -helloStory.parameters = { storySource: { source: '' } }; - -const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] }; - -const mdxStoryNameToKey = { one: 'one', 'hello story': 'helloStory' }; - -componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: () => ( - - - - ), -}; - -export default componentMeta; -" -`; diff --git a/lib/csf-tools/__testfixtures__/mdx/parameters.output.snapshot b/lib/csf-tools/__testfixtures__/mdx/parameters.output.snapshot deleted file mode 100644 index 2b11e9746c43..000000000000 --- a/lib/csf-tools/__testfixtures__/mdx/parameters.output.snapshot +++ /dev/null @@ -1,78 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`docs-mdx-compiler-plugin parameters.mdx 1`] = ` -"/* @jsxRuntime classic */ -/* @jsx mdx */ -import { assertIsFn, AddContext } from '@storybook/addon-docs'; - -import { Button } from '@storybook/react/demo'; -import { Story, Meta } from '@storybook/addon-docs'; - -const layoutProps = {}; -const MDXLayout = 'wrapper'; -function MDXContent({ components, ...props }) { - return ( - - - - - - - - - - ); -} - -MDXContent.isMDXComponent = true; - -export const componentNotes = () => ; -componentNotes.storyName = 'component notes'; -componentNotes.parameters = { storySource: { source: '' } }; - -export const storyNotes = () => ; -storyNotes.storyName = 'story notes'; -storyNotes.parameters = { - storySource: { source: '' }, - ...{ - notes: 'story notes', - }, -}; - -const componentMeta = { - title: 'Button', - parameters: { - notes: 'component notes', - }, - component: Button, - includeStories: ['componentNotes', 'storyNotes'], -}; - -const mdxStoryNameToKey = { 'component notes': 'componentNotes', 'story notes': 'storyNotes' }; - -componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: () => ( - - - - ), -}; - -export default componentMeta; -" -`; diff --git a/lib/csf-tools/__testfixtures__/mdx/previews.output.snapshot b/lib/csf-tools/__testfixtures__/mdx/previews.output.snapshot deleted file mode 100644 index 9066ed2add47..000000000000 --- a/lib/csf-tools/__testfixtures__/mdx/previews.output.snapshot +++ /dev/null @@ -1,77 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`docs-mdx-compiler-plugin previews.mdx 1`] = ` -"/* @jsxRuntime classic */ -/* @jsx mdx */ -import { assertIsFn, AddContext } from '@storybook/addon-docs'; - -import { Button } from '@storybook/react/demo'; -import { Canvas, Story, Meta } from '@storybook/addon-docs'; - -const layoutProps = {}; -const MDXLayout = 'wrapper'; -function MDXContent({ components, ...props }) { - return ( - - -

{\`Canvas\`}

-

{\`Canvases can contain normal components, stories, and story references\`}

- - - - - - - - - - -

{\`Canvas without a story\`}

- - - -
- ); -} - -MDXContent.isMDXComponent = true; - -export const helloButton = () => ; -helloButton.storyName = 'hello button'; -helloButton.parameters = { storySource: { source: '' } }; - -export const two = () => ; -two.storyName = 'two'; -two.parameters = { storySource: { source: '' } }; - -const componentMeta = { - title: 'Button', - parameters: { - notes: 'component notes', - }, - component: Button, - includeStories: ['helloButton', 'two'], -}; - -const mdxStoryNameToKey = { 'hello button': 'helloButton', two: 'two' }; - -componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: () => ( - - - - ), -}; - -export default componentMeta; -" -`; diff --git a/lib/csf-tools/__testfixtures__/mdx/story-args.output.snapshot b/lib/csf-tools/__testfixtures__/mdx/story-args.output.snapshot deleted file mode 100644 index 79f67238ceda..000000000000 --- a/lib/csf-tools/__testfixtures__/mdx/story-args.output.snapshot +++ /dev/null @@ -1,78 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`docs-mdx-compiler-plugin story-args.mdx 1`] = ` -"/* @jsxRuntime classic */ -/* @jsx mdx */ -import { assertIsFn, AddContext } from '@storybook/addon-docs'; - -import { Button } from '@storybook/react/demo'; -import { Story, Meta } from '@storybook/addon-docs'; -export const Template = (args) => ; - -const layoutProps = { - Template, -}; -const MDXLayout = 'wrapper'; -function MDXContent({ components, ...props }) { - return ( - - -

{\`Args\`}

- - - {Template.bind({})} - -
- ); -} - -MDXContent.isMDXComponent = true; - -export const componentNotes = Template.bind({}); -componentNotes.storyName = 'component notes'; -componentNotes.argTypes = { - a: { - name: 'A', - }, - b: { - name: 'B', - }, -}; -componentNotes.args = { - a: 1, - b: 2, -}; -componentNotes.parameters = { storySource: { source: 'args => ' } }; - -const componentMeta = { title: 'Button', includeStories: ['componentNotes'] }; - -const mdxStoryNameToKey = { 'component notes': 'componentNotes' }; - -componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: () => ( - - - - ), -}; - -export default componentMeta; -" -`; diff --git a/lib/csf-tools/__testfixtures__/mdx/story-current.output.snapshot b/lib/csf-tools/__testfixtures__/mdx/story-current.output.snapshot deleted file mode 100644 index 82ef5bb6bea5..000000000000 --- a/lib/csf-tools/__testfixtures__/mdx/story-current.output.snapshot +++ /dev/null @@ -1,39 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`docs-mdx-compiler-plugin story-current.mdx 1`] = ` -"/* @jsxRuntime classic */ -/* @jsx mdx */ -import { assertIsFn, AddContext } from '@storybook/addon-docs'; - -import { Story } from '@storybook/addon-docs'; - -const layoutProps = {}; -const MDXLayout = 'wrapper'; -function MDXContent({ components, ...props }) { - return ( - -

{\`Current story\`}

- -
- ); -} - -MDXContent.isMDXComponent = true; - -const componentMeta = { includeStories: [] }; - -const mdxStoryNameToKey = {}; - -componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: () => ( - - - - ), -}; - -export default componentMeta; -" -`; diff --git a/lib/csf-tools/__testfixtures__/mdx/story-def-text-only.output.snapshot b/lib/csf-tools/__testfixtures__/mdx/story-def-text-only.output.snapshot deleted file mode 100644 index 477d05f8cca1..000000000000 --- a/lib/csf-tools/__testfixtures__/mdx/story-def-text-only.output.snapshot +++ /dev/null @@ -1,46 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`docs-mdx-compiler-plugin story-def-text-only.mdx 1`] = ` -"/* @jsxRuntime classic */ -/* @jsx mdx */ -import { assertIsFn, AddContext } from '@storybook/addon-docs'; - -import { Story, Meta } from '@storybook/addon-docs'; - -const layoutProps = {}; -const MDXLayout = 'wrapper'; -function MDXContent({ components, ...props }) { - return ( - - -

{\`Story definition\`}

- - Plain text - -
- ); -} - -MDXContent.isMDXComponent = true; - -export const text = () => 'Plain text'; -text.storyName = 'text'; -text.parameters = { storySource: { source: \\"'Plain text'\\" } }; - -const componentMeta = { title: 'Text', includeStories: ['text'] }; - -const mdxStoryNameToKey = { text: 'text' }; - -componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: () => ( - - - - ), -}; - -export default componentMeta; -" -`; diff --git a/lib/csf-tools/__testfixtures__/mdx/story-definitions.output.snapshot b/lib/csf-tools/__testfixtures__/mdx/story-definitions.output.snapshot deleted file mode 100644 index 6ca818c3b3e2..000000000000 --- a/lib/csf-tools/__testfixtures__/mdx/story-definitions.output.snapshot +++ /dev/null @@ -1,76 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`docs-mdx-compiler-plugin story-definitions.mdx 1`] = ` -"/* @jsxRuntime classic */ -/* @jsx mdx */ -import { assertIsFn, AddContext } from '@storybook/addon-docs'; - -import { Button } from '@storybook/react/demo'; -import { Story, Meta } from '@storybook/addon-docs'; - -const layoutProps = {}; -const MDXLayout = 'wrapper'; -function MDXContent({ components, ...props }) { - return ( - - -

{\`Story definition\`}

- - - - - - - - - - - - -
- ); -} - -MDXContent.isMDXComponent = true; - -export const one = () => ; -one.storyName = 'one'; -one.parameters = { storySource: { source: '' } }; - -export const helloStory = () => ; -helloStory.storyName = 'hello story'; -helloStory.parameters = { storySource: { source: '' } }; - -export const wPunctuation = () => ; -wPunctuation.storyName = 'w/punctuation'; -wPunctuation.parameters = { storySource: { source: '' } }; - -export const _1FineDay = () => ; -_1FineDay.storyName = '1 fine day'; -_1FineDay.parameters = { storySource: { source: '' } }; - -const componentMeta = { - title: 'Button', - includeStories: ['one', 'helloStory', 'wPunctuation', '_1FineDay'], -}; - -const mdxStoryNameToKey = { - one: 'one', - 'hello story': 'helloStory', - 'w/punctuation': 'wPunctuation', - '1 fine day': '_1FineDay', -}; - -componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: () => ( - - - - ), -}; - -export default componentMeta; -" -`; diff --git a/lib/csf-tools/__testfixtures__/mdx/story-function-var.output.snapshot b/lib/csf-tools/__testfixtures__/mdx/story-function-var.output.snapshot deleted file mode 100644 index ebef9ce56c68..000000000000 --- a/lib/csf-tools/__testfixtures__/mdx/story-function-var.output.snapshot +++ /dev/null @@ -1,60 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`docs-mdx-compiler-plugin story-function-var.mdx 1`] = ` -"/* @jsxRuntime classic */ -/* @jsx mdx */ -import { assertIsFn, AddContext } from '@storybook/addon-docs'; - -import { Meta, Story } from '@storybook/addon-docs'; -export const basicFn = () => - - ); -} - -MDXContent.isMDXComponent = true; - -const componentMeta = { includeStories: [] }; - -const mdxStoryNameToKey = {}; - -componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: () => ( - - - - ), -}; - -export default componentMeta; -" -`; diff --git a/lib/csf-tools/index.cjs b/lib/csf-tools/index.cjs new file mode 100644 index 000000000000..69f154ae3e3c --- /dev/null +++ b/lib/csf-tools/index.cjs @@ -0,0 +1,21 @@ +const { FEATURES } = require('global'); +const fs = require('fs-extra'); + +const lib = require('./dist/cjs/index'); + +const readCsfOrMdx = async (fileName, options) => { + let code = (await fs.readFile(fileName, 'utf-8')).toString(); + if (fileName.endsWith('.mdx')) { + const { compile } = + FEATURES && FEATURES.previewMdx2 + ? await import('@storybook/mdx2-csf') + : await import('@storybook/mdx1-csf'); + code = await compile(code); + } + return lib.loadCsf(code, { ...options, fileName }); +}; + +module.exports = { + readCsfOrMdx, + ...lib, +}; diff --git a/lib/csf-tools/index.d.ts b/lib/csf-tools/index.d.ts new file mode 100644 index 000000000000..4d2291e7d3e5 --- /dev/null +++ b/lib/csf-tools/index.d.ts @@ -0,0 +1,4 @@ +import { CsfFile, CsfOptions } from './dist/ts3.9/index.d'; + +export declare const readCsfOrMdx: (fileName: string, options: CsfOptions) => Promise; +export * from './dist/ts3.9/index.d'; diff --git a/lib/csf-tools/index.mjs b/lib/csf-tools/index.mjs new file mode 100644 index 000000000000..fc307625eaff --- /dev/null +++ b/lib/csf-tools/index.mjs @@ -0,0 +1,17 @@ +import global from 'global'; +import fs from 'fs-extra'; + +import { loadCsf } from './dist/esm/index'; + +export const readCsfOrMdx = async (fileName, options) => { + let code = (await fs.readFile(fileName, 'utf-8')).toString(); + if (fileName.endsWith('.mdx')) { + const { compile } = global.FEATURES?.previewMdx2 + ? await import('@storybook/mdx2-csf') + : await import('@storybook/mdx1-csf'); + code = await compile(code); + } + return loadCsf(code, { ...options, fileName }); +}; + +export * from './dist/esm/index'; diff --git a/lib/csf-tools/mdx.d.ts b/lib/csf-tools/mdx.d.ts index 84e1c5ac09af..12da9964eb9f 100644 --- a/lib/csf-tools/mdx.d.ts +++ b/lib/csf-tools/mdx.d.ts @@ -1 +1,2 @@ -export * from './dist/ts3.9/mdx/index.d'; +declare module '@mdx-js/loader'; +export * from '@storybook/mdx1-csf'; diff --git a/lib/csf-tools/mdx.js b/lib/csf-tools/mdx.js index 66cbd81cd768..969e3b17478f 100644 --- a/lib/csf-tools/mdx.js +++ b/lib/csf-tools/mdx.js @@ -1 +1 @@ -module.exports = require('./dist/cjs/mdx'); +module.exports = require('@storybook/mdx1-csf'); diff --git a/lib/csf-tools/package.json b/lib/csf-tools/package.json index 9b01d3d2da1c..82abfdde4428 100644 --- a/lib/csf-tools/package.json +++ b/lib/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "6.5.0-alpha.42", + "version": "6.5.0-alpha.48", "description": "", "keywords": [ "storybook" @@ -20,9 +20,9 @@ }, "license": "MIT", "sideEffects": false, - "main": "dist/cjs/index.js", - "module": "dist/esm/index.js", - "types": "dist/ts3.9/index.d.ts", + "main": "index.cjs", + "module": "index.mjs", + "types": "index.d.ts", "typesVersions": { "<3.8": { "dist/ts3.9/*": [ @@ -47,24 +47,30 @@ "@babel/preset-env": "^7.12.11", "@babel/traverse": "^7.12.11", "@babel/types": "^7.12.11", - "@mdx-js/mdx": "^1.6.22", "@storybook/csf": "0.0.2--canary.87bc651.0", + "@storybook/mdx1-csf": "canary", "core-js": "^3.8.2", "fs-extra": "^9.0.1", "global": "^4.4.0", - "js-string-escape": "^1.0.1", - "lodash": "^4.17.21", - "prettier": ">=2.2.1 <=2.3.0", "regenerator-runtime": "^0.13.7", "ts-dedent": "^2.0.0" }, "devDependencies": { + "@storybook/mdx2-csf": "canary", "@types/fs-extra": "^9.0.6", "js-yaml": "^3.14.1" }, + "peerDependencies": { + "@storybook/mdx2-csf": "*" + }, + "peerDependenciesMeta": { + "@storybook/mdx2-csf": { + "optional": true + } + }, "publishConfig": { "access": "public" }, - "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351", + "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762", "sbmodern": "dist/modern/index.js" } diff --git a/lib/csf-tools/src/CsfFile.ts b/lib/csf-tools/src/CsfFile.ts index 014bde430e23..25af480e83f3 100644 --- a/lib/csf-tools/src/CsfFile.ts +++ b/lib/csf-tools/src/CsfFile.ts @@ -388,8 +388,18 @@ export class CsfFile { }); if (self._namedExportsOrder) { + const unsortedExports = Object.keys(self._storyExports); self._storyExports = sortExports(self._storyExports, self._namedExportsOrder); self._stories = sortExports(self._stories, self._namedExportsOrder); + + const sortedExports = Object.keys(self._storyExports); + if (unsortedExports.length !== sortedExports.length) { + throw new Error( + `Missing exports after sort: ${unsortedExports.filter( + (key) => !sortedExports.includes(key) + )}` + ); + } } return self; diff --git a/lib/csf-tools/src/index.ts b/lib/csf-tools/src/index.ts index 5566b12e1be1..89b66e647fd2 100644 --- a/lib/csf-tools/src/index.ts +++ b/lib/csf-tools/src/index.ts @@ -1,17 +1,3 @@ -import fs from 'fs-extra'; -import mdx from '@mdx-js/mdx'; - -import { loadCsf, CsfOptions } from './CsfFile'; -import { createCompiler } from './mdx'; - -export const readCsfOrMdx = async (fileName: string, options: CsfOptions) => { - let code = (await fs.readFile(fileName, 'utf-8')).toString(); - if (fileName.endsWith('.mdx')) { - code = await mdx(code, { compilers: [createCompiler({})] }); - } - return loadCsf(code, { ...options, fileName }); -}; - export * from './CsfFile'; export * from './ConfigFile'; export * from './getStorySortParameter'; diff --git a/lib/csf-tools/src/mdx/index.ts b/lib/csf-tools/src/mdx/index.ts deleted file mode 100644 index f8a1d598ecbb..000000000000 --- a/lib/csf-tools/src/mdx/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './sb-mdx-plugin'; diff --git a/lib/csf-tools/src/mdx/sb-mdx-plugin.test.ts b/lib/csf-tools/src/mdx/sb-mdx-plugin.test.ts deleted file mode 100644 index 4e565e6bc8db..000000000000 --- a/lib/csf-tools/src/mdx/sb-mdx-plugin.test.ts +++ /dev/null @@ -1,512 +0,0 @@ -import 'jest-specific-snapshot'; -import dedent from 'ts-dedent'; -import path from 'path'; -import mdx from '@mdx-js/mdx'; -import prettier from 'prettier'; -import { createCompiler } from './sb-mdx-plugin'; - -function generate(content) { - const code = mdx.sync(content, { - // filepath: filePath, - compilers: [createCompiler({})], - }); - - return prettier.format(code, { - parser: 'babel', - printWidth: 100, - tabWidth: 2, - bracketSpacing: true, - trailingComma: 'es5', - singleQuote: true, - }); -} - -const fixturesDir = path.join(__dirname, '..', '..', '__testfixtures__', 'mdx'); - -const snap = (prefix) => path.join(fixturesDir, `${prefix}.output.snapshot`); - -describe('docs-mdx-compiler-plugin', () => { - it('component-args.mdx', () => { - expect( - generate(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - # Args - - - - - `) - ).toMatchSpecificSnapshot(snap('component-args')); - }); - - it('component-id.mdx', () => { - expect( - generate(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - - - - `) - ).toMatchSpecificSnapshot(snap('component-id')); - }); - - it('csf-imports.mdx', () => { - expect( - generate(dedent` - import { Story, Meta, Canvas } from '@storybook/addon-docs'; - import { Welcome, Button } from '@storybook/angular/demo'; - import * as MyStories from './My.stories'; - import { Other } from './Other.stories'; - - - - # Stories from CSF imports - - - - - - - - - `) - ).toMatchSpecificSnapshot(snap('csf-imports')); - }); - - it('decorators.mdx', () => { - expect( - generate(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - -
{storyFn()}
]} - /> - - # Decorated story - -
{storyFn()}
]}> - -
- `) - ).toMatchSpecificSnapshot(snap('decorators')); - }); - - it('docs-only.mdx', () => { - expect( - generate(dedent` - import { Meta } from '@storybook/addon-docs'; - - - - # Documentation only - - This is a documentation-only MDX file which generates a dummy 'docsOnly: true' story. - `) - ).toMatchSpecificSnapshot(snap('docs-only')); - }); - - it('loaders.mdx', () => { - expect( - generate(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - ({ foo: 1 })]} /> - - # Story with loader - - ({ bar: 2 })]}> - - - `) - ).toMatchSpecificSnapshot(snap('loaders')); - }); - - it('meta-quotes-in-title.mdx', () => { - expect( - generate(dedent` - import { Meta } from '@storybook/addon-docs'; - - - `) - ).toMatchSpecificSnapshot(snap('meta-quotes-in-title')); - }); - - it('non-story-exports.mdx', () => { - expect( - generate(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - # Story definition - - - - - - export const two = 2; - - - - - `) - ).toMatchSpecificSnapshot(snap('non-story-exports')); - }); - - it('parameters.mdx', () => { - expect( - generate(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - - - - - - - - `) - ).toMatchSpecificSnapshot(snap('parameters')); - }); - - it('previews.mdx', () => { - expect( - generate(dedent` - import { Button } from '@storybook/react/demo'; - import { Canvas, Story, Meta } from '@storybook/addon-docs'; - - - - # Canvas - - Canvases can contain normal components, stories, and story references - - - - - - - - - - - - - Canvas without a story - - - - - `) - ).toMatchSpecificSnapshot(snap('previews')); - }); - - it('story-args.mdx', () => { - expect( - generate(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - # Args - - export const Template = (args) => ; - - - {Template.bind({})} - - `) - ).toMatchSpecificSnapshot(snap('story-args')); - }); - - it('story-current.mdx', () => { - expect( - generate(dedent` - import { Story } from '@storybook/addon-docs'; - - # Current story - - - `) - ).toMatchSpecificSnapshot(snap('story-current')); - }); - - it('story-def-text-only.mdx', () => { - expect( - generate(dedent` - import { Story, Meta } from '@storybook/addon-docs'; - - - - # Story definition - - Plain text - `) - ).toMatchSpecificSnapshot(snap('story-def-text-only')); - }); - - it('story-definitions.mdx', () => { - expect( - generate(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - # Story definition - - - - - - - - - - - - - - - - - `) - ).toMatchSpecificSnapshot(snap('story-definitions')); - }); - - it('story-function-var.mdx', () => { - expect( - generate(dedent` - import { Meta, Story } from '@storybook/addon-docs'; - - - - export const basicFn = () => - `) - ).toMatchSpecificSnapshot(snap('vanilla')); - }); - - it('errors on missing story props', async () => { - await expect(async () => - generate(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - # Bad story - - - - - `) - ).rejects.toThrow('Expected a Story name, id, or story attribute'); - }); - - describe('csf3', () => { - it('auto-title-docs-only.mdx', () => { - expect( - generate(dedent` - import { Meta } from '@storybook/addon-docs'; - - - - # Auto-title Docs Only - - Spme **markdown** here! - `) - ).toMatchSpecificSnapshot(snap('auto-title-docs-only')); - }); - - it('auto-title.mdx', () => { - expect( - generate(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - - - - `) - ).toMatchSpecificSnapshot(snap('auto-title')); - }); - - it('default-render.mdx', () => { - expect( - generate(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - - `) - ).toMatchSpecificSnapshot(snap('default-render')); - }); - - it('component-render.mdx', () => { - expect( - generate(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - * generates error - * 1. child.value =`