From 8570188f6a623cf31841f1b25179cb593ccae6e1 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Mar 2022 11:52:20 +0800 Subject: [PATCH 01/17] Addon-docs: Refactor common libraries into docs-utils --- addons/docs/common-preset.js | 19 - addons/docs/package.json | 101 +--- addons/docs/preset.js | 28 +- addons/docs/src/blocks/ArgsTable.tsx | 2 +- addons/docs/src/blocks/Description.tsx | 3 +- addons/docs/src/lib/index.ts | 1 - lib/docs-tools/README.md | 6 + lib/docs-tools/package.json | 60 +++ .../__testfixtures__/proptypes/arrays.js | 0 .../__testfixtures__/proptypes/enums.js | 0 .../__testfixtures__/proptypes/misc.js | 0 .../__testfixtures__/proptypes/objects.js | 0 .../__testfixtures__/proptypes/react.js | 0 .../__testfixtures__/proptypes/scalars.js | 0 .../__testfixtures__/typescript/aliases.tsx | 0 .../__testfixtures__/typescript/arrays.tsx | 0 .../__testfixtures__/typescript/enums.tsx | 0 .../__testfixtures__/typescript/functions.tsx | 0 .../typescript/interfaces.tsx | 0 .../typescript/intersections.tsx | 0 .../__testfixtures__/typescript/optionals.tsx | 0 .../__testfixtures__/typescript/records.tsx | 0 .../__testfixtures__/typescript/scalars.tsx | 0 .../__testfixtures__/typescript/tuples.tsx | 0 .../__testfixtures__/typescript/unions.tsx | 0 .../src/argTypes}/convert/convert.test.ts | 0 .../src/argTypes}/convert/flow/convert.ts | 0 .../src/argTypes}/convert/flow/index.ts | 0 .../src/argTypes}/convert/flow/types.ts | 0 .../docs-tools/src/argTypes}/convert/index.ts | 0 .../argTypes}/convert/proptypes/convert.ts | 0 .../src/argTypes}/convert/proptypes/index.ts | 0 .../src/argTypes}/convert/proptypes/types.ts | 0 .../argTypes}/convert/typescript/convert.ts | 0 .../src/argTypes}/convert/typescript/index.ts | 0 .../src/argTypes}/convert/typescript/types.ts | 0 .../docs-tools/src/argTypes}/convert/utils.ts | 0 .../src/argTypes}/docgen/PropDef.ts | 0 .../src/argTypes}/docgen/createPropDef.ts | 2 +- .../docgen/extractDocgenProps.test.ts | 2 +- .../argTypes}/docgen/extractDocgenProps.ts | 2 +- .../docgen/flow/createDefaultValue.ts | 2 +- .../docgen/flow/createPropDef.test.ts | 0 .../argTypes}/docgen/flow/createPropDef.ts | 0 .../src/argTypes}/docgen/flow/createType.ts | 2 +- .../docs-tools/src/argTypes}/docgen/index.ts | 1 + .../docgen/typeScript/createDefaultValue.ts | 2 +- .../docgen/typeScript/createPropDef.test.ts | 0 .../docgen/typeScript/createPropDef.ts | 0 .../argTypes}/docgen/typeScript/createType.ts | 2 +- .../docs-tools/src/argTypes}/docgen/types.ts | 2 +- .../argTypes}/docgen/utils/defaultValue.ts | 0 .../src/argTypes}/docgen/utils/docgenInfo.ts | 2 +- .../src/argTypes}/docgen/utils/index.ts | 0 .../src/argTypes}/docgen/utils/string.ts | 0 .../src/argTypes/enhanceArgTypes.test.ts | 269 ++++++++++ .../src/argTypes/enhanceArgTypes.ts | 20 + lib/docs-tools/src/argTypes/index.ts | 8 + .../src/argTypes}/jsdocParser.test.ts | 0 .../docs-tools/src/argTypes}/jsdocParser.ts | 0 lib/docs-tools/src/argTypes/types.ts | 1 + lib/docs-tools/src/argTypes/typings.d.ts | 1 + .../docs-tools/src/argTypes}/utils.test.ts | 0 .../docs-tools/src/argTypes}/utils.ts | 2 +- lib/docs-tools/src/index.ts | 2 + lib/docs-tools/src/shared.ts | 28 + lib/docs-tools/tsconfig.json | 20 + nx.json | 3 + package.json | 1 + workspace.json | 4 + yarn.lock | 481 +++--------------- 71 files changed, 526 insertions(+), 553 deletions(-) delete mode 100644 addons/docs/common-preset.js delete mode 100644 addons/docs/src/lib/index.ts create mode 100644 lib/docs-tools/README.md create mode 100644 lib/docs-tools/package.json rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/__testfixtures__/proptypes/arrays.js (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/__testfixtures__/proptypes/enums.js (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/__testfixtures__/proptypes/misc.js (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/__testfixtures__/proptypes/objects.js (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/__testfixtures__/proptypes/react.js (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/__testfixtures__/proptypes/scalars.js (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/__testfixtures__/typescript/aliases.tsx (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/__testfixtures__/typescript/arrays.tsx (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/__testfixtures__/typescript/enums.tsx (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/__testfixtures__/typescript/functions.tsx (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/__testfixtures__/typescript/interfaces.tsx (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/__testfixtures__/typescript/intersections.tsx (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/__testfixtures__/typescript/optionals.tsx (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/__testfixtures__/typescript/records.tsx (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/__testfixtures__/typescript/scalars.tsx (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/__testfixtures__/typescript/tuples.tsx (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/__testfixtures__/typescript/unions.tsx (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/convert.test.ts (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/flow/convert.ts (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/flow/index.ts (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/flow/types.ts (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/index.ts (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/proptypes/convert.ts (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/proptypes/index.ts (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/proptypes/types.ts (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/typescript/convert.ts (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/typescript/index.ts (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/typescript/types.ts (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/convert/utils.ts (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/docgen/PropDef.ts (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/docgen/createPropDef.ts (98%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/docgen/extractDocgenProps.test.ts (99%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/docgen/extractDocgenProps.ts (98%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/docgen/flow/createDefaultValue.ts (91%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/docgen/flow/createPropDef.test.ts (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/docgen/flow/createPropDef.ts (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/docgen/flow/createType.ts (97%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/docgen/index.ts (76%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/docgen/typeScript/createDefaultValue.ts (87%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/docgen/typeScript/createPropDef.test.ts (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/docgen/typeScript/createPropDef.ts (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/docgen/typeScript/createType.ts (89%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/docgen/types.ts (96%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/docgen/utils/defaultValue.ts (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/docgen/utils/docgenInfo.ts (92%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/docgen/utils/index.ts (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/docgen/utils/string.ts (100%) create mode 100644 lib/docs-tools/src/argTypes/enhanceArgTypes.test.ts create mode 100644 lib/docs-tools/src/argTypes/enhanceArgTypes.ts create mode 100644 lib/docs-tools/src/argTypes/index.ts rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/jsdocParser.test.ts (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/jsdocParser.ts (100%) create mode 100644 lib/docs-tools/src/argTypes/types.ts create mode 100644 lib/docs-tools/src/argTypes/typings.d.ts rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/utils.test.ts (100%) rename {addons/docs/src/lib => lib/docs-tools/src/argTypes}/utils.ts (91%) create mode 100644 lib/docs-tools/src/index.ts create mode 100644 lib/docs-tools/src/shared.ts create mode 100644 lib/docs-tools/tsconfig.json 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/package.json b/addons/docs/package.json index be11849af7bb..879c601d6594 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -55,22 +55,17 @@ "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/react": "^1.6.22", "@storybook/addons": "6.5.0-alpha.47", "@storybook/api": "6.5.0-alpha.47", - "@storybook/builder-webpack4": "6.5.0-alpha.47", - "@storybook/client-logger": "6.5.0-alpha.47", "@storybook/components": "6.5.0-alpha.47", - "@storybook/core": "6.5.0-alpha.47", + "@storybook/core-common": "6.5.0-alpha.47", "@storybook/core-events": "6.5.0-alpha.47", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/csf-tools": "6.5.0-alpha.47", + "@storybook/docs-tools": "6.5.0-alpha.47", "@storybook/mdx1-csf": "canary", "@storybook/node-logger": "6.5.0-alpha.47", "@storybook/postinstall": "6.5.0-alpha.47", @@ -78,134 +73,44 @@ "@storybook/source-loader": "6.5.0-alpha.47", "@storybook/store": "6.5.0-alpha.47", "@storybook/theming": "6.5.0-alpha.47", - "acorn": "^7.4.1", - "acorn-jsx": "^5.3.1", - "acorn-walk": "^7.2.0", "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", - "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.47", - "@storybook/html": "6.5.0-alpha.47", "@storybook/mdx2-csf": "canary", - "@storybook/react": "6.5.0-alpha.47", - "@storybook/vue": "6.5.0-alpha.47", - "@storybook/web-components": "6.5.0-alpha.47", - "@types/cross-spawn": "^6.0.2", - "@types/doctrine": "^0.0.3", - "@types/estree": "^0.0.44", - "@types/loader-utils": "^2.0.0", - "@types/prop-types": "^15.7.3", - "@types/tmp": "^0.2.0", "@types/util-deprecate": "^1.0.0", "babel-loader": "^8.0.0", - "babel-plugin-react-docgen": "^4.2.1", - "cross-spawn": "^7.0.3", - "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", - "vue": "^2.6.10", - "webpack": "4", - "zone.js": "^0.11.3" + "webpack": "4" }, "peerDependencies": { - "@storybook/angular": "6.5.0-alpha.47", - "@storybook/html": "6.5.0-alpha.47", "@storybook/mdx2-csf": "*", - "@storybook/react": "6.5.0-alpha.47", - "@storybook/vue": "6.5.0-alpha.47", - "@storybook/vue3": "6.5.0-alpha.47", - "@storybook/web-components": "6.5.0-alpha.47", - "lit": "^2.0.0", - "lit-html": "^1.4.1 || ^2.0.0", "react": "^16.8.0 || ^17.0.0", "react-dom": "^16.8.0 || ^17.0.0", - "svelte": "^3.31.2", - "sveltedoc-parser": "^4.1.0", - "vue": "^2.6.10 || ^3.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/mdx2-csf": { "optional": true }, - "@storybook/react": { - "optional": true - }, - "@storybook/vue": { - "optional": true - }, - "@storybook/vue3": { - "optional": true - }, - "@storybook/web-components": { - "optional": true - }, - "lit": { - "optional": true - }, - "lit-html": { - "optional": true - }, "react": { "optional": true }, "react-dom": { "optional": true }, - "svelte": { - "optional": true - }, - "sveltedoc-parser": { - "optional": true - }, - "vue": { - "optional": true - }, "webpack": { "optional": true } 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/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/lib/docs-tools/README.md b/lib/docs-tools/README.md new file mode 100644 index 000000000000..548b69550455 --- /dev/null +++ b/lib/docs-tools/README.md @@ -0,0 +1,6 @@ +# Storybook Docs Utils + +Shared utility functions for frameworks to implement docs + +- ArgType extraction +- Dynamic snippet generation diff --git a/lib/docs-tools/package.json b/lib/docs-tools/package.json new file mode 100644 index 000000000000..a78b5a3c7d57 --- /dev/null +++ b/lib/docs-tools/package.json @@ -0,0 +1,60 @@ +{ + "name": "@storybook/docs-tools", + "version": "6.5.0-alpha.47", + "description": "Shared utility functions for frameworks to implement docs", + "keywords": [ + "storybook" + ], + "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/docs-tools", + "bugs": { + "url": "https://github.com/storybookjs/storybook/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/storybookjs/storybook.git", + "directory": "lib/docs-tools" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "license": "MIT", + "sideEffects": false, + "main": "dist/cjs/index.js", + "module": "dist/esm/index.js", + "types": "dist/ts3.9/index.d.ts", + "typesVersions": { + "<3.8": { + "dist/ts3.9/*": [ + "dist/ts3.4/*" + ] + } + }, + "files": [ + "dist/**/*", + "README.md", + "*.js", + "*.d.ts" + ], + "scripts": { + "prepare": "node ../../scripts/prepare.js" + }, + "dependencies": { + "@babel/core": "^7.12.10", + "@storybook/csf": "0.0.2--canary.87bc651.0", + "@storybook/store": "6.5.0-alpha.47", + "core-js": "^3.8.2", + "doctrine": "^3.0.0", + "lodash": "^4.17.21", + "regenerator-runtime": "^0.13.7" + }, + "devDependencies": { + "jest-specific-snapshot": "^4.0.0", + "require-from-string": "^2.0.2" + }, + "publishConfig": { + "access": "public" + }, + "gitHead": "af457c20c773f57bea0504bf525a2f74852fe94a", + "sbmodern": "dist/modern/index.js" +} diff --git a/addons/docs/src/lib/convert/__testfixtures__/proptypes/arrays.js b/lib/docs-tools/src/argTypes/convert/__testfixtures__/proptypes/arrays.js similarity index 100% rename from addons/docs/src/lib/convert/__testfixtures__/proptypes/arrays.js rename to lib/docs-tools/src/argTypes/convert/__testfixtures__/proptypes/arrays.js diff --git a/addons/docs/src/lib/convert/__testfixtures__/proptypes/enums.js b/lib/docs-tools/src/argTypes/convert/__testfixtures__/proptypes/enums.js similarity index 100% rename from addons/docs/src/lib/convert/__testfixtures__/proptypes/enums.js rename to lib/docs-tools/src/argTypes/convert/__testfixtures__/proptypes/enums.js diff --git a/addons/docs/src/lib/convert/__testfixtures__/proptypes/misc.js b/lib/docs-tools/src/argTypes/convert/__testfixtures__/proptypes/misc.js similarity index 100% rename from addons/docs/src/lib/convert/__testfixtures__/proptypes/misc.js rename to lib/docs-tools/src/argTypes/convert/__testfixtures__/proptypes/misc.js diff --git a/addons/docs/src/lib/convert/__testfixtures__/proptypes/objects.js b/lib/docs-tools/src/argTypes/convert/__testfixtures__/proptypes/objects.js similarity index 100% rename from addons/docs/src/lib/convert/__testfixtures__/proptypes/objects.js rename to lib/docs-tools/src/argTypes/convert/__testfixtures__/proptypes/objects.js diff --git a/addons/docs/src/lib/convert/__testfixtures__/proptypes/react.js b/lib/docs-tools/src/argTypes/convert/__testfixtures__/proptypes/react.js similarity index 100% rename from addons/docs/src/lib/convert/__testfixtures__/proptypes/react.js rename to lib/docs-tools/src/argTypes/convert/__testfixtures__/proptypes/react.js diff --git a/addons/docs/src/lib/convert/__testfixtures__/proptypes/scalars.js b/lib/docs-tools/src/argTypes/convert/__testfixtures__/proptypes/scalars.js similarity index 100% rename from addons/docs/src/lib/convert/__testfixtures__/proptypes/scalars.js rename to lib/docs-tools/src/argTypes/convert/__testfixtures__/proptypes/scalars.js diff --git a/addons/docs/src/lib/convert/__testfixtures__/typescript/aliases.tsx b/lib/docs-tools/src/argTypes/convert/__testfixtures__/typescript/aliases.tsx similarity index 100% rename from addons/docs/src/lib/convert/__testfixtures__/typescript/aliases.tsx rename to lib/docs-tools/src/argTypes/convert/__testfixtures__/typescript/aliases.tsx diff --git a/addons/docs/src/lib/convert/__testfixtures__/typescript/arrays.tsx b/lib/docs-tools/src/argTypes/convert/__testfixtures__/typescript/arrays.tsx similarity index 100% rename from addons/docs/src/lib/convert/__testfixtures__/typescript/arrays.tsx rename to lib/docs-tools/src/argTypes/convert/__testfixtures__/typescript/arrays.tsx diff --git a/addons/docs/src/lib/convert/__testfixtures__/typescript/enums.tsx b/lib/docs-tools/src/argTypes/convert/__testfixtures__/typescript/enums.tsx similarity index 100% rename from addons/docs/src/lib/convert/__testfixtures__/typescript/enums.tsx rename to lib/docs-tools/src/argTypes/convert/__testfixtures__/typescript/enums.tsx diff --git a/addons/docs/src/lib/convert/__testfixtures__/typescript/functions.tsx b/lib/docs-tools/src/argTypes/convert/__testfixtures__/typescript/functions.tsx similarity index 100% rename from addons/docs/src/lib/convert/__testfixtures__/typescript/functions.tsx rename to lib/docs-tools/src/argTypes/convert/__testfixtures__/typescript/functions.tsx diff --git a/addons/docs/src/lib/convert/__testfixtures__/typescript/interfaces.tsx b/lib/docs-tools/src/argTypes/convert/__testfixtures__/typescript/interfaces.tsx similarity index 100% rename from addons/docs/src/lib/convert/__testfixtures__/typescript/interfaces.tsx rename to lib/docs-tools/src/argTypes/convert/__testfixtures__/typescript/interfaces.tsx diff --git a/addons/docs/src/lib/convert/__testfixtures__/typescript/intersections.tsx b/lib/docs-tools/src/argTypes/convert/__testfixtures__/typescript/intersections.tsx similarity index 100% rename from addons/docs/src/lib/convert/__testfixtures__/typescript/intersections.tsx rename to lib/docs-tools/src/argTypes/convert/__testfixtures__/typescript/intersections.tsx diff --git a/addons/docs/src/lib/convert/__testfixtures__/typescript/optionals.tsx b/lib/docs-tools/src/argTypes/convert/__testfixtures__/typescript/optionals.tsx similarity index 100% rename from addons/docs/src/lib/convert/__testfixtures__/typescript/optionals.tsx rename to lib/docs-tools/src/argTypes/convert/__testfixtures__/typescript/optionals.tsx diff --git a/addons/docs/src/lib/convert/__testfixtures__/typescript/records.tsx b/lib/docs-tools/src/argTypes/convert/__testfixtures__/typescript/records.tsx similarity index 100% rename from addons/docs/src/lib/convert/__testfixtures__/typescript/records.tsx rename to lib/docs-tools/src/argTypes/convert/__testfixtures__/typescript/records.tsx diff --git a/addons/docs/src/lib/convert/__testfixtures__/typescript/scalars.tsx b/lib/docs-tools/src/argTypes/convert/__testfixtures__/typescript/scalars.tsx similarity index 100% rename from addons/docs/src/lib/convert/__testfixtures__/typescript/scalars.tsx rename to lib/docs-tools/src/argTypes/convert/__testfixtures__/typescript/scalars.tsx diff --git a/addons/docs/src/lib/convert/__testfixtures__/typescript/tuples.tsx b/lib/docs-tools/src/argTypes/convert/__testfixtures__/typescript/tuples.tsx similarity index 100% rename from addons/docs/src/lib/convert/__testfixtures__/typescript/tuples.tsx rename to lib/docs-tools/src/argTypes/convert/__testfixtures__/typescript/tuples.tsx diff --git a/addons/docs/src/lib/convert/__testfixtures__/typescript/unions.tsx b/lib/docs-tools/src/argTypes/convert/__testfixtures__/typescript/unions.tsx similarity index 100% rename from addons/docs/src/lib/convert/__testfixtures__/typescript/unions.tsx rename to lib/docs-tools/src/argTypes/convert/__testfixtures__/typescript/unions.tsx diff --git a/addons/docs/src/lib/convert/convert.test.ts b/lib/docs-tools/src/argTypes/convert/convert.test.ts similarity index 100% rename from addons/docs/src/lib/convert/convert.test.ts rename to lib/docs-tools/src/argTypes/convert/convert.test.ts diff --git a/addons/docs/src/lib/convert/flow/convert.ts b/lib/docs-tools/src/argTypes/convert/flow/convert.ts similarity index 100% rename from addons/docs/src/lib/convert/flow/convert.ts rename to lib/docs-tools/src/argTypes/convert/flow/convert.ts diff --git a/addons/docs/src/lib/convert/flow/index.ts b/lib/docs-tools/src/argTypes/convert/flow/index.ts similarity index 100% rename from addons/docs/src/lib/convert/flow/index.ts rename to lib/docs-tools/src/argTypes/convert/flow/index.ts diff --git a/addons/docs/src/lib/convert/flow/types.ts b/lib/docs-tools/src/argTypes/convert/flow/types.ts similarity index 100% rename from addons/docs/src/lib/convert/flow/types.ts rename to lib/docs-tools/src/argTypes/convert/flow/types.ts diff --git a/addons/docs/src/lib/convert/index.ts b/lib/docs-tools/src/argTypes/convert/index.ts similarity index 100% rename from addons/docs/src/lib/convert/index.ts rename to lib/docs-tools/src/argTypes/convert/index.ts diff --git a/addons/docs/src/lib/convert/proptypes/convert.ts b/lib/docs-tools/src/argTypes/convert/proptypes/convert.ts similarity index 100% rename from addons/docs/src/lib/convert/proptypes/convert.ts rename to lib/docs-tools/src/argTypes/convert/proptypes/convert.ts diff --git a/addons/docs/src/lib/convert/proptypes/index.ts b/lib/docs-tools/src/argTypes/convert/proptypes/index.ts similarity index 100% rename from addons/docs/src/lib/convert/proptypes/index.ts rename to lib/docs-tools/src/argTypes/convert/proptypes/index.ts diff --git a/addons/docs/src/lib/convert/proptypes/types.ts b/lib/docs-tools/src/argTypes/convert/proptypes/types.ts similarity index 100% rename from addons/docs/src/lib/convert/proptypes/types.ts rename to lib/docs-tools/src/argTypes/convert/proptypes/types.ts diff --git a/addons/docs/src/lib/convert/typescript/convert.ts b/lib/docs-tools/src/argTypes/convert/typescript/convert.ts similarity index 100% rename from addons/docs/src/lib/convert/typescript/convert.ts rename to lib/docs-tools/src/argTypes/convert/typescript/convert.ts diff --git a/addons/docs/src/lib/convert/typescript/index.ts b/lib/docs-tools/src/argTypes/convert/typescript/index.ts similarity index 100% rename from addons/docs/src/lib/convert/typescript/index.ts rename to lib/docs-tools/src/argTypes/convert/typescript/index.ts diff --git a/addons/docs/src/lib/convert/typescript/types.ts b/lib/docs-tools/src/argTypes/convert/typescript/types.ts similarity index 100% rename from addons/docs/src/lib/convert/typescript/types.ts rename to lib/docs-tools/src/argTypes/convert/typescript/types.ts diff --git a/addons/docs/src/lib/convert/utils.ts b/lib/docs-tools/src/argTypes/convert/utils.ts similarity index 100% rename from addons/docs/src/lib/convert/utils.ts rename to lib/docs-tools/src/argTypes/convert/utils.ts diff --git a/addons/docs/src/lib/docgen/PropDef.ts b/lib/docs-tools/src/argTypes/docgen/PropDef.ts similarity index 100% rename from addons/docs/src/lib/docgen/PropDef.ts rename to lib/docs-tools/src/argTypes/docgen/PropDef.ts diff --git a/addons/docs/src/lib/docgen/createPropDef.ts b/lib/docs-tools/src/argTypes/docgen/createPropDef.ts similarity index 98% rename from addons/docs/src/lib/docgen/createPropDef.ts rename to lib/docs-tools/src/argTypes/docgen/createPropDef.ts index 3916a3aeff35..e39bb07c6ea5 100644 --- a/addons/docs/src/lib/docgen/createPropDef.ts +++ b/lib/docs-tools/src/argTypes/docgen/createPropDef.ts @@ -1,4 +1,4 @@ -import { PropDefaultValue } from '@storybook/components'; +import { PropDefaultValue } from './PropDef'; import { PropDef, TypeSystem, DocgenInfo, DocgenType, DocgenPropDefaultValue } from './types'; import { JsDocParsingResult } from '../jsdocParser'; import { createSummaryValue } from '../utils'; diff --git a/addons/docs/src/lib/docgen/extractDocgenProps.test.ts b/lib/docs-tools/src/argTypes/docgen/extractDocgenProps.test.ts similarity index 99% rename from addons/docs/src/lib/docgen/extractDocgenProps.test.ts rename to lib/docs-tools/src/argTypes/docgen/extractDocgenProps.test.ts index 5195cf2e4b3a..01c0f16cb057 100644 --- a/addons/docs/src/lib/docgen/extractDocgenProps.test.ts +++ b/lib/docs-tools/src/argTypes/docgen/extractDocgenProps.test.ts @@ -1,6 +1,6 @@ /* eslint-disable no-underscore-dangle */ -import { Component } from '../../blocks/types'; +import { Component } from '../types'; import { extractComponentProps } from './extractDocgenProps'; const DOCGEN_SECTION = 'props'; diff --git a/addons/docs/src/lib/docgen/extractDocgenProps.ts b/lib/docs-tools/src/argTypes/docgen/extractDocgenProps.ts similarity index 98% rename from addons/docs/src/lib/docgen/extractDocgenProps.ts rename to lib/docs-tools/src/argTypes/docgen/extractDocgenProps.ts index c7a9090adf4f..3a0bd81a6320 100644 --- a/addons/docs/src/lib/docgen/extractDocgenProps.ts +++ b/lib/docs-tools/src/argTypes/docgen/extractDocgenProps.ts @@ -1,4 +1,4 @@ -import { Component } from '../../blocks/types'; +import { Component } from '../types'; import { ExtractedJsDoc, parseJsDoc } from '../jsdocParser'; import { PropDef, DocgenInfo, TypeSystem } from './types'; import { getDocgenSection, isValidDocgenSection, getDocgenDescription } from './utils'; diff --git a/addons/docs/src/lib/docgen/flow/createDefaultValue.ts b/lib/docs-tools/src/argTypes/docgen/flow/createDefaultValue.ts similarity index 91% rename from addons/docs/src/lib/docgen/flow/createDefaultValue.ts rename to lib/docs-tools/src/argTypes/docgen/flow/createDefaultValue.ts index a9be5f0fe9d4..4e505ff99c0d 100644 --- a/addons/docs/src/lib/docgen/flow/createDefaultValue.ts +++ b/lib/docs-tools/src/argTypes/docgen/flow/createDefaultValue.ts @@ -1,4 +1,4 @@ -import { PropDefaultValue } from '@storybook/components'; +import { PropDefaultValue } from '../PropDef'; import { DocgenPropDefaultValue, DocgenPropType } from '../types'; import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../utils'; import { isDefaultValueBlacklisted } from '../utils/defaultValue'; diff --git a/addons/docs/src/lib/docgen/flow/createPropDef.test.ts b/lib/docs-tools/src/argTypes/docgen/flow/createPropDef.test.ts similarity index 100% rename from addons/docs/src/lib/docgen/flow/createPropDef.test.ts rename to lib/docs-tools/src/argTypes/docgen/flow/createPropDef.test.ts diff --git a/addons/docs/src/lib/docgen/flow/createPropDef.ts b/lib/docs-tools/src/argTypes/docgen/flow/createPropDef.ts similarity index 100% rename from addons/docs/src/lib/docgen/flow/createPropDef.ts rename to lib/docs-tools/src/argTypes/docgen/flow/createPropDef.ts diff --git a/addons/docs/src/lib/docgen/flow/createType.ts b/lib/docs-tools/src/argTypes/docgen/flow/createType.ts similarity index 97% rename from addons/docs/src/lib/docgen/flow/createType.ts rename to lib/docs-tools/src/argTypes/docgen/flow/createType.ts index 2e9d86a93a4f..9ff87d4c8778 100644 --- a/addons/docs/src/lib/docgen/flow/createType.ts +++ b/lib/docs-tools/src/argTypes/docgen/flow/createType.ts @@ -1,4 +1,4 @@ -import { PropType } from '@storybook/components'; +import { PropType } from '../PropDef'; import { DocgenFlowType } from '../types'; import { createSummaryValue, isTooLongForTypeSummary } from '../../utils'; diff --git a/addons/docs/src/lib/docgen/index.ts b/lib/docs-tools/src/argTypes/docgen/index.ts similarity index 76% rename from addons/docs/src/lib/docgen/index.ts rename to lib/docs-tools/src/argTypes/docgen/index.ts index 4116325caa86..ade7440d7c34 100644 --- a/addons/docs/src/lib/docgen/index.ts +++ b/lib/docs-tools/src/argTypes/docgen/index.ts @@ -1,3 +1,4 @@ export * from './types'; export * from './utils'; export * from './extractDocgenProps'; +export * from './PropDef'; diff --git a/addons/docs/src/lib/docgen/typeScript/createDefaultValue.ts b/lib/docs-tools/src/argTypes/docgen/typeScript/createDefaultValue.ts similarity index 87% rename from addons/docs/src/lib/docgen/typeScript/createDefaultValue.ts rename to lib/docs-tools/src/argTypes/docgen/typeScript/createDefaultValue.ts index 14bfcf67b687..fd4d04788922 100644 --- a/addons/docs/src/lib/docgen/typeScript/createDefaultValue.ts +++ b/lib/docs-tools/src/argTypes/docgen/typeScript/createDefaultValue.ts @@ -1,4 +1,4 @@ -import { PropDefaultValue } from '@storybook/components'; +import { PropDefaultValue } from '../PropDef'; import { DocgenInfo } from '../types'; import { createSummaryValue } from '../../utils'; import { isDefaultValueBlacklisted } from '../utils/defaultValue'; diff --git a/addons/docs/src/lib/docgen/typeScript/createPropDef.test.ts b/lib/docs-tools/src/argTypes/docgen/typeScript/createPropDef.test.ts similarity index 100% rename from addons/docs/src/lib/docgen/typeScript/createPropDef.test.ts rename to lib/docs-tools/src/argTypes/docgen/typeScript/createPropDef.test.ts diff --git a/addons/docs/src/lib/docgen/typeScript/createPropDef.ts b/lib/docs-tools/src/argTypes/docgen/typeScript/createPropDef.ts similarity index 100% rename from addons/docs/src/lib/docgen/typeScript/createPropDef.ts rename to lib/docs-tools/src/argTypes/docgen/typeScript/createPropDef.ts diff --git a/addons/docs/src/lib/docgen/typeScript/createType.ts b/lib/docs-tools/src/argTypes/docgen/typeScript/createType.ts similarity index 89% rename from addons/docs/src/lib/docgen/typeScript/createType.ts rename to lib/docs-tools/src/argTypes/docgen/typeScript/createType.ts index c2022c90d4f3..9aa53722f04c 100644 --- a/addons/docs/src/lib/docgen/typeScript/createType.ts +++ b/lib/docs-tools/src/argTypes/docgen/typeScript/createType.ts @@ -1,4 +1,4 @@ -import { PropType } from '@storybook/components'; +import { PropType } from '../PropDef'; import { DocgenInfo } from '../types'; import { createSummaryValue } from '../../utils'; diff --git a/addons/docs/src/lib/docgen/types.ts b/lib/docs-tools/src/argTypes/docgen/types.ts similarity index 96% rename from addons/docs/src/lib/docgen/types.ts rename to lib/docs-tools/src/argTypes/docgen/types.ts index c1e9c8734f38..3f6cd1d30204 100644 --- a/addons/docs/src/lib/docgen/types.ts +++ b/lib/docs-tools/src/argTypes/docgen/types.ts @@ -1,6 +1,6 @@ import type { StrictArgTypes } from '@storybook/csf'; import type { PropDef } from './PropDef'; -import type { Component } from '../../blocks/types'; +import type { Component } from '../types'; export type PropsExtractor = (component: Component) => { rows?: PropDef[] } | null; diff --git a/addons/docs/src/lib/docgen/utils/defaultValue.ts b/lib/docs-tools/src/argTypes/docgen/utils/defaultValue.ts similarity index 100% rename from addons/docs/src/lib/docgen/utils/defaultValue.ts rename to lib/docs-tools/src/argTypes/docgen/utils/defaultValue.ts diff --git a/addons/docs/src/lib/docgen/utils/docgenInfo.ts b/lib/docs-tools/src/argTypes/docgen/utils/docgenInfo.ts similarity index 92% rename from addons/docs/src/lib/docgen/utils/docgenInfo.ts rename to lib/docs-tools/src/argTypes/docgen/utils/docgenInfo.ts index da7f21f7a06d..73da47deca51 100644 --- a/addons/docs/src/lib/docgen/utils/docgenInfo.ts +++ b/lib/docs-tools/src/argTypes/docgen/utils/docgenInfo.ts @@ -1,6 +1,6 @@ /* eslint-disable no-underscore-dangle */ -import { Component } from '../../../blocks/types'; +import { Component } from '../../types'; import { str } from './string'; export function hasDocgen(component: Component): boolean { diff --git a/addons/docs/src/lib/docgen/utils/index.ts b/lib/docs-tools/src/argTypes/docgen/utils/index.ts similarity index 100% rename from addons/docs/src/lib/docgen/utils/index.ts rename to lib/docs-tools/src/argTypes/docgen/utils/index.ts diff --git a/addons/docs/src/lib/docgen/utils/string.ts b/lib/docs-tools/src/argTypes/docgen/utils/string.ts similarity index 100% rename from addons/docs/src/lib/docgen/utils/string.ts rename to lib/docs-tools/src/argTypes/docgen/utils/string.ts diff --git a/lib/docs-tools/src/argTypes/enhanceArgTypes.test.ts b/lib/docs-tools/src/argTypes/enhanceArgTypes.test.ts new file mode 100644 index 000000000000..5380ac6a4efc --- /dev/null +++ b/lib/docs-tools/src/argTypes/enhanceArgTypes.test.ts @@ -0,0 +1,269 @@ +import type { ArgTypes } from '@storybook/api'; +import type { StrictInputType } from '@storybook/csf'; +import { enhanceArgTypes } from './enhanceArgTypes'; + +expect.addSnapshotSerializer({ + print: (val: any) => JSON.stringify(val, null, 2), + test: (val) => typeof val !== 'string', +}); + +const enhance = ({ + argType, + arg, + extractedArgTypes, + isArgsStory = true, +}: { + argType?: StrictInputType; + arg?: any; + extractedArgTypes?: ArgTypes; + isArgsStory?: boolean; +}) => { + const context = { + componentId: 'foo', + title: 'foo', + kind: 'foo', + id: 'foo--bar', + name: 'bar', + story: 'bar', + component: 'dummy', + parameters: { + __isArgsStory: isArgsStory, + docs: { + extractArgTypes: extractedArgTypes && (() => extractedArgTypes), + }, + }, + argTypes: argType && { input: argType }, + initialArgs: { input: arg }, + args: { input: arg }, + globals: {}, + }; + return enhanceArgTypes(context); +}; + +describe('enhanceArgTypes', () => { + describe('no-args story function', () => { + it('should no-op', () => { + expect( + enhance({ + argType: { name: 'input', foo: 'unmodified', type: { name: 'number' } }, + isArgsStory: false, + }).input + ).toMatchInlineSnapshot(` + { + "name": "input", + "foo": "unmodified", + "type": { + "name": "number" + } + } + `); + }); + }); + describe('args story function', () => { + describe('single-source input', () => { + describe('argTypes input', () => { + it('number', () => { + expect( + enhance({ + argType: { name: 'input', type: { name: 'number' } }, + }).input + ).toMatchInlineSnapshot(` + { + "name": "input", + "type": { + "name": "number" + } + } + `); + }); + }); + + describe('extraction from component', () => { + it('number', () => { + expect( + enhance({ extractedArgTypes: { input: { name: 'input', type: { name: 'number' } } } }) + .input + ).toMatchInlineSnapshot(` + { + "name": "input", + "type": { + "name": "number" + } + } + `); + }); + }); + + describe('controls input', () => { + it('range', () => { + expect( + enhance({ + argType: { name: 'input', control: { type: 'range', min: 0, max: 100 } }, + }).input + ).toMatchInlineSnapshot(` + { + "name": "input", + "control": { + "type": "range", + "min": 0, + "max": 100 + } + } + `); + }); + it('options', () => { + expect( + enhance({ + argType: { name: 'input', control: { type: 'radio', options: [1, 2] } }, + }).input + ).toMatchInlineSnapshot(` + { + "name": "input", + "control": { + "type": "radio", + "options": [ + 1, + 2 + ] + } + } + `); + }); + }); + }); + + describe('mixed-source input', () => { + it('user-specified argTypes take precedence over extracted argTypes', () => { + expect( + enhance({ + argType: { name: 'input', type: { name: 'number' } }, + extractedArgTypes: { input: { type: { name: 'string' } } }, + }).input + ).toMatchInlineSnapshot(` + { + "type": { + "name": "number" + }, + "name": "input" + } + `); + }); + + it('user-specified argTypes take precedence over inferred argTypes', () => { + expect( + enhance({ + argType: { name: 'input', type: { name: 'number' } }, + arg: 'hello', + }).input + ).toMatchInlineSnapshot(` + { + "name": "input", + "type": { + "name": "number" + } + } + `); + }); + + it('extracted argTypes take precedence over inferred argTypes', () => { + expect( + enhance({ + extractedArgTypes: { input: { type: { name: 'string' } } }, + arg: 6, + }).input + ).toMatchInlineSnapshot(` + { + "type": { + "name": "string" + } + } + `); + }); + + it('user-specified controls take precedence over inferred controls', () => { + expect( + enhance({ + argType: { name: 'input', defaultValue: 5, control: { type: 'range', step: 50 } }, + arg: 3, + extractedArgTypes: { input: { name: 'input' } }, + }).input + ).toMatchInlineSnapshot(` + { + "name": "input", + "defaultValue": 5, + "control": { + "type": "range", + "step": 50 + } + } + `); + }); + + it('includes extracted argTypes when there are no user-specified argTypes', () => { + expect( + enhance({ + arg: 3, + extractedArgTypes: { input: { name: 'input' }, foo: { type: { name: 'number' } } }, + }) + ).toMatchInlineSnapshot(` + { + "input": { + "name": "input" + }, + "foo": { + "type": { + "name": "number" + } + } + } + `); + }); + + it('includes extracted argTypes when user-specified argTypes match', () => { + expect( + enhance({ + argType: { name: 'input', type: { name: 'number' } }, + extractedArgTypes: { input: { name: 'input' }, foo: { type: { name: 'number' } } }, + }) + ).toMatchInlineSnapshot(` + { + "input": { + "name": "input", + "type": { + "name": "number" + } + }, + "foo": { + "type": { + "name": "number" + } + } + } + `); + }); + + it('excludes extracted argTypes when user-specified argTypes do not match', () => { + expect( + enhance({ + argType: { name: 'input', type: { name: 'number' } }, + extractedArgTypes: { foo: { type: { name: 'number' } } }, + }) + ).toMatchInlineSnapshot(` + { + "foo": { + "type": { + "name": "number" + } + }, + "input": { + "name": "input", + "type": { + "name": "number" + } + } + } + `); + }); + }); + }); +}); diff --git a/lib/docs-tools/src/argTypes/enhanceArgTypes.ts b/lib/docs-tools/src/argTypes/enhanceArgTypes.ts new file mode 100644 index 000000000000..540b80e56b42 --- /dev/null +++ b/lib/docs-tools/src/argTypes/enhanceArgTypes.ts @@ -0,0 +1,20 @@ +import { AnyFramework, StoryContextForEnhancers } from '@storybook/csf'; +import { combineParameters } from '@storybook/store'; + +export const enhanceArgTypes = ( + context: StoryContextForEnhancers +) => { + const { + component, + argTypes: userArgTypes, + parameters: { docs = {} }, + } = context; + const { extractArgTypes } = docs; + + const extractedArgTypes = extractArgTypes && component ? extractArgTypes(component) : {}; + const withExtractedTypes = extractedArgTypes + ? combineParameters(extractedArgTypes, userArgTypes) + : userArgTypes; + + return withExtractedTypes; +}; diff --git a/lib/docs-tools/src/argTypes/index.ts b/lib/docs-tools/src/argTypes/index.ts new file mode 100644 index 000000000000..44761ab8643e --- /dev/null +++ b/lib/docs-tools/src/argTypes/index.ts @@ -0,0 +1,8 @@ +export * from './convert'; +export * from './docgen'; + +export * from './jsdocParser'; +export * from './types'; +export * from './utils'; + +export * from './enhanceArgTypes'; diff --git a/addons/docs/src/lib/jsdocParser.test.ts b/lib/docs-tools/src/argTypes/jsdocParser.test.ts similarity index 100% rename from addons/docs/src/lib/jsdocParser.test.ts rename to lib/docs-tools/src/argTypes/jsdocParser.test.ts diff --git a/addons/docs/src/lib/jsdocParser.ts b/lib/docs-tools/src/argTypes/jsdocParser.ts similarity index 100% rename from addons/docs/src/lib/jsdocParser.ts rename to lib/docs-tools/src/argTypes/jsdocParser.ts diff --git a/lib/docs-tools/src/argTypes/types.ts b/lib/docs-tools/src/argTypes/types.ts new file mode 100644 index 000000000000..d0f1029edef9 --- /dev/null +++ b/lib/docs-tools/src/argTypes/types.ts @@ -0,0 +1 @@ +export type Component = any; diff --git a/lib/docs-tools/src/argTypes/typings.d.ts b/lib/docs-tools/src/argTypes/typings.d.ts new file mode 100644 index 000000000000..2496ff59dc18 --- /dev/null +++ b/lib/docs-tools/src/argTypes/typings.d.ts @@ -0,0 +1 @@ +declare module 'require-from-string'; diff --git a/addons/docs/src/lib/utils.test.ts b/lib/docs-tools/src/argTypes/utils.test.ts similarity index 100% rename from addons/docs/src/lib/utils.test.ts rename to lib/docs-tools/src/argTypes/utils.test.ts diff --git a/addons/docs/src/lib/utils.ts b/lib/docs-tools/src/argTypes/utils.ts similarity index 91% rename from addons/docs/src/lib/utils.ts rename to lib/docs-tools/src/argTypes/utils.ts index b623c12e19b7..b0f7b6ddf141 100644 --- a/addons/docs/src/lib/utils.ts +++ b/lib/docs-tools/src/argTypes/utils.ts @@ -1,4 +1,4 @@ -import { PropSummaryValue } from '@storybook/components'; +import { PropSummaryValue } from './docgen'; export const MAX_TYPE_SUMMARY_LENGTH = 90; export const MAX_DEFAULT_VALUE_SUMMARY_LENGTH = 50; diff --git a/lib/docs-tools/src/index.ts b/lib/docs-tools/src/index.ts new file mode 100644 index 000000000000..42f31e5436c4 --- /dev/null +++ b/lib/docs-tools/src/index.ts @@ -0,0 +1,2 @@ +export * from './argTypes'; +export * from './shared'; diff --git a/lib/docs-tools/src/shared.ts b/lib/docs-tools/src/shared.ts new file mode 100644 index 000000000000..178bf46ca387 --- /dev/null +++ b/lib/docs-tools/src/shared.ts @@ -0,0 +1,28 @@ +export const ADDON_ID = 'storybook/docs'; +export const PANEL_ID = `${ADDON_ID}/panel`; +export const PARAM_KEY = `docs`; + +export const SNIPPET_RENDERED = `${ADDON_ID}/snippet-rendered`; + +export enum SourceType { + /** + * AUTO is the default + * + * Use the CODE logic if: + * - the user has set a custom source snippet in `docs.source.code` story parameter + * - the story is not an args-based story + * + * Use the DYNAMIC rendered snippet if the story is an args story + */ + AUTO = 'auto', + + /** + * Render the code extracted by source-loader + */ + CODE = 'code', + + /** + * Render dynamically-rendered source snippet from the story's virtual DOM (currently React only) + */ + DYNAMIC = 'dynamic', +} diff --git a/lib/docs-tools/tsconfig.json b/lib/docs-tools/tsconfig.json new file mode 100644 index 000000000000..fb14222847dc --- /dev/null +++ b/lib/docs-tools/tsconfig.json @@ -0,0 +1,20 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "types": [ + "node" + ] + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "src/**/*.test.*", + "src/**/tests/**/*", + "src/**/__tests__/**/*", + "src/**/*.stories.*", + "src/**/*.mockdata.*", + "src/**/__testfixtures__/**" + ] +} \ No newline at end of file diff --git a/nx.json b/nx.json index 663353aee341..588fa7bfcf83 100644 --- a/nx.json +++ b/nx.json @@ -70,6 +70,9 @@ "@storybook/angular": { "implicitDependencies": [] }, + "@storybook/docs-tools": { + "implicitDependencies": [] + }, "@storybook/ember": { "implicitDependencies": [] }, diff --git a/package.json b/package.json index e966b634fabe..d40d3be31ccb 100644 --- a/package.json +++ b/package.json @@ -164,6 +164,7 @@ "@storybook/core": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/csf-tools": "workspace:*", + "@storybook/docs-tools": "workspace:*", "@storybook/ember": "workspace:*", "@storybook/eslint-config-storybook": "^2.4.0", "@storybook/html": "workspace:*", diff --git a/workspace.json b/workspace.json index f4ea5394d9ce..9fcfaf6e8534 100644 --- a/workspace.json +++ b/workspace.json @@ -69,6 +69,10 @@ "root": "app/angular", "type": "library" }, + "@storybook/docs-tools": { + "root": "app/docs-tools", + "type": "library" + }, "@storybook/ember": { "root": "app/ember", "type": "library" diff --git a/yarn.lock b/yarn.lock index f80961de8013..4eeacf2cdb4e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2768,32 +2768,6 @@ __metadata: languageName: node linkType: hard -"@ember/test-helpers@npm:^2.1.4": - version: 2.6.0 - resolution: "@ember/test-helpers@npm:2.6.0" - dependencies: - "@ember/test-waiters": ^3.0.0 - broccoli-debug: ^0.6.5 - broccoli-funnel: ^3.0.8 - ember-cli-babel: ^7.26.6 - ember-cli-htmlbars: ^5.7.1 - ember-destroyable-polyfill: ^2.0.3 - checksum: 76f125590f683e4af22be0242657fe4ccbfd97950d8db33f17519638e9a84ba859489650410b80f2ec8d81eb34f577883f65309a2fc63c178ff75759ebc18b35 - languageName: node - linkType: hard - -"@ember/test-waiters@npm:^3.0.0": - version: 3.0.1 - resolution: "@ember/test-waiters@npm:3.0.1" - dependencies: - calculate-cache-key-for-tree: ^2.0.0 - ember-cli-babel: ^7.26.6 - ember-cli-version-checker: ^5.1.2 - semver: ^7.3.5 - checksum: 5c4ed1a8e6851a8cfbccad268073932920bc575b36e22da2351feeab2ee73810f620d707194c73c6dff0a5aca3440952102b96519cd54cc4f9cc4957a1abcf41 - languageName: node - linkType: hard - "@emotion/cache@npm:^10.0.27": version: 10.0.29 resolution: "@emotion/cache@npm:10.0.29" @@ -2840,7 +2814,7 @@ __metadata: languageName: node linkType: hard -"@emotion/is-prop-valid@npm:0.8.8, @emotion/is-prop-valid@npm:^0.8.1, @emotion/is-prop-valid@npm:^0.8.6, @emotion/is-prop-valid@npm:^0.8.8": +"@emotion/is-prop-valid@npm:0.8.8, @emotion/is-prop-valid@npm:^0.8.1, @emotion/is-prop-valid@npm:^0.8.6": version: 0.8.8 resolution: "@emotion/is-prop-valid@npm:0.8.8" dependencies: @@ -2914,14 +2888,14 @@ __metadata: languageName: node linkType: hard -"@emotion/stylis@npm:0.8.5, @emotion/stylis@npm:^0.8.4": +"@emotion/stylis@npm:0.8.5": version: 0.8.5 resolution: "@emotion/stylis@npm:0.8.5" checksum: f109e3f11cb0d48e8658aaa23578c5bcfe35e297819cfb089a3de6ba8dc0f89b0960474922690c6028df5d2e1895b4967f2fb280642c030054c312f1e137ce26 languageName: node linkType: hard -"@emotion/unitless@npm:0.7.5, @emotion/unitless@npm:^0.7.0, @emotion/unitless@npm:^0.7.4": +"@emotion/unitless@npm:0.7.5, @emotion/unitless@npm:^0.7.0": version: 0.7.5 resolution: "@emotion/unitless@npm:0.7.5" checksum: 4d0d94f53cb97b4481bbfa394953e1899a0b877644642ba9dd7247c27eb8c48e14e22aeb11411d7d9874685ad85dd5fb5b50eb78c6d8840eb56a84b92dcef2f4 @@ -4492,13 +4466,6 @@ __metadata: languageName: node linkType: hard -"@lit/reactive-element@npm:^1.3.0": - version: 1.3.0 - resolution: "@lit/reactive-element@npm:1.3.0" - checksum: a92a6762d8d9f1be19720021034fb20c6e446a6c530257668e536a0468156fa44276b301d0b1ffa34161ec986e09628a477542a0e40acfc37edbc7f29c7b7f39 - languageName: node - linkType: hard - "@mdx-js/mdx@npm:^1.6.22": version: 1.6.22 resolution: "@mdx-js/mdx@npm:1.6.22" @@ -6353,134 +6320,53 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-docs@workspace:addons/docs" dependencies: - "@angular/core": ^11.2.14 "@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 - "@emotion/core": ^10.3.1 - "@emotion/styled": ^10.0.27 "@jest/transform": ^26.6.2 "@mdx-js/react": ^1.6.22 "@storybook/addons": 6.5.0-alpha.47 - "@storybook/angular": 6.5.0-alpha.47 "@storybook/api": 6.5.0-alpha.47 - "@storybook/builder-webpack4": 6.5.0-alpha.47 - "@storybook/client-logger": 6.5.0-alpha.47 "@storybook/components": 6.5.0-alpha.47 - "@storybook/core": 6.5.0-alpha.47 + "@storybook/core-common": 6.5.0-alpha.47 "@storybook/core-events": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/csf-tools": 6.5.0-alpha.47 - "@storybook/html": 6.5.0-alpha.47 + "@storybook/docs-tools": 6.5.0-alpha.47 "@storybook/mdx1-csf": canary "@storybook/mdx2-csf": canary "@storybook/node-logger": 6.5.0-alpha.47 "@storybook/postinstall": 6.5.0-alpha.47 "@storybook/preview-web": 6.5.0-alpha.47 - "@storybook/react": 6.5.0-alpha.47 "@storybook/source-loader": 6.5.0-alpha.47 "@storybook/store": 6.5.0-alpha.47 "@storybook/theming": 6.5.0-alpha.47 - "@storybook/vue": 6.5.0-alpha.47 - "@storybook/web-components": 6.5.0-alpha.47 - "@types/cross-spawn": ^6.0.2 - "@types/doctrine": ^0.0.3 - "@types/estree": ^0.0.44 - "@types/loader-utils": ^2.0.0 - "@types/prop-types": ^15.7.3 - "@types/tmp": ^0.2.0 "@types/util-deprecate": ^1.0.0 - acorn: ^7.4.1 - acorn-jsx: ^5.3.1 - acorn-walk: ^7.2.0 babel-loader: ^8.0.0 - babel-plugin-react-docgen: ^4.2.1 core-js: ^3.8.2 - cross-spawn: ^7.0.3 - doctrine: ^3.0.0 - escodegen: ^2.0.0 fast-deep-equal: ^3.1.3 global: ^4.4.0 - html-tags: ^3.1.0 - jest: ^26.6.3 - jest-specific-snapshot: ^4.0.0 - lit-element: ^3.0.2 - lit-html: ^2.0.2 - 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 - require-from-string: ^2.0.2 - rxjs: ^6.6.3 - styled-components: ^5.2.1 - sveltedoc-parser: 4.1.0 - tmp: ^0.2.1 ts-dedent: ^2.0.0 util-deprecate: ^1.0.2 - vue: ^2.6.10 webpack: 4 - zone.js: ^0.11.3 peerDependencies: - "@storybook/angular": 6.5.0-alpha.47 - "@storybook/html": 6.5.0-alpha.47 "@storybook/mdx2-csf": "*" - "@storybook/react": 6.5.0-alpha.47 - "@storybook/vue": 6.5.0-alpha.47 - "@storybook/vue3": 6.5.0-alpha.47 - "@storybook/web-components": 6.5.0-alpha.47 - lit: ^2.0.0 - lit-html: ^1.4.1 || ^2.0.0 react: ^16.8.0 || ^17.0.0 react-dom: ^16.8.0 || ^17.0.0 - svelte: ^3.31.2 - sveltedoc-parser: ^4.1.0 - vue: ^2.6.10 || ^3.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/mdx2-csf": optional: true - "@storybook/react": - optional: true - "@storybook/vue": - optional: true - "@storybook/vue3": - optional: true - "@storybook/web-components": - optional: true - lit: - optional: true - lit-html: - optional: true react: optional: true react-dom: optional: true - svelte: - optional: true - sveltedoc-parser: - optional: true - vue: - optional: true webpack: optional: true languageName: unknown @@ -6965,38 +6851,43 @@ __metadata: "@nrwl/workspace": ^11.6.3 "@storybook/addons": 6.5.0-alpha.47 "@storybook/api": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 "@storybook/core": 6.5.0-alpha.47 "@storybook/core-common": 6.5.0-alpha.47 "@storybook/core-events": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 + "@storybook/docs-tools": 6.5.0-alpha.47 "@storybook/node-logger": 6.5.0-alpha.47 "@storybook/semver": ^7.3.2 "@storybook/store": 6.5.0-alpha.47 "@types/autoprefixer": ^9.7.2 - "@types/jest": ^26.0.16 "@types/node": ^14.14.20 || ^16.0.0 "@types/react": ^16.14.23 "@types/react-dom": ^16.9.14 "@types/webpack-env": ^1.16.0 autoprefixer: ^9.8.6 core-js: ^3.8.2 + cross-spawn: ^7.0.3 find-up: ^5.0.0 fork-ts-checker-webpack-plugin: ^4.1.6 global: ^4.4.0 jest: ^26.6.3 jest-preset-angular: ^8.3.2 + jest-specific-snapshot: ^4.0.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 + tmp: ^0.2.1 ts-dedent: ^2.0.0 - ts-jest: ^26.4.4 ts-loader: ^8.0.14 tsconfig-paths-webpack-plugin: ^3.3.0 util-deprecate: ^1.0.2 @@ -7699,6 +7590,22 @@ __metadata: languageName: node linkType: hard +"@storybook/docs-tools@6.5.0-alpha.47, @storybook/docs-tools@workspace:*, @storybook/docs-tools@workspace:lib/docs-tools": + version: 0.0.0-use.local + resolution: "@storybook/docs-tools@workspace:lib/docs-tools" + dependencies: + "@babel/core": ^7.12.10 + "@storybook/csf": 0.0.2--canary.87bc651.0 + "@storybook/store": 6.5.0-alpha.47 + core-js: ^3.8.2 + doctrine: ^3.0.0 + jest-specific-snapshot: ^4.0.0 + lodash: ^4.17.21 + regenerator-runtime: ^0.13.7 + require-from-string: ^2.0.2 + languageName: unknown + linkType: soft + "@storybook/ember-cli-storybook@npm:^0.2.1": version: 0.2.1 resolution: "@storybook/ember-cli-storybook@npm:0.2.1" @@ -7715,9 +7622,9 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/ember@workspace:app/ember" dependencies: - "@ember/test-helpers": ^2.1.4 "@storybook/core": 6.5.0-alpha.47 "@storybook/core-common": 6.5.0-alpha.47 + "@storybook/docs-tools": 6.5.0-alpha.47 "@storybook/store": 6.5.0-alpha.47 core-js: ^3.8.2 global: ^4.4.0 @@ -7808,10 +7715,10 @@ __metadata: resolution: "@storybook/html@workspace:app/html" dependencies: "@storybook/addons": 6.5.0-alpha.47 - "@storybook/client-api": 6.5.0-alpha.47 "@storybook/core": 6.5.0-alpha.47 "@storybook/core-common": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 + "@storybook/docs-tools": 6.5.0-alpha.47 "@storybook/preview-web": 6.5.0-alpha.47 "@storybook/store": 6.5.0-alpha.47 "@types/node": ^14.14.20 || ^16.0.0 @@ -7824,6 +7731,7 @@ __metadata: read-pkg-up: ^7.0.1 regenerator-runtime: ^0.13.7 ts-dedent: ^2.0.0 + webpack: 4 peerDependencies: "@babel/core": "*" bin: @@ -8183,33 +8091,42 @@ __metadata: "@babel/preset-react": ^7.12.10 "@pmmmwh/react-refresh-webpack-plugin": ^0.5.3 "@storybook/addons": 6.5.0-alpha.47 - "@storybook/client-api": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 "@storybook/core": 6.5.0-alpha.47 "@storybook/core-common": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 + "@storybook/docs-tools": 6.5.0-alpha.47 "@storybook/node-logger": 6.5.0-alpha.47 "@storybook/react-docgen-typescript-plugin": 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0 "@storybook/semver": ^7.3.2 "@storybook/store": 6.5.0-alpha.47 "@types/node": ^14.14.20 || ^16.0.0 - "@types/prompts": ^2.0.9 + "@types/util-deprecate": ^1.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 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 + require-from-string: ^2.0.2 peerDependenciesMeta: "@babel/core": optional: true @@ -8297,6 +8214,7 @@ __metadata: "@storybook/core": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/csf-tools": "workspace:*" + "@storybook/docs-tools": "workspace:*" "@storybook/ember": "workspace:*" "@storybook/eslint-config-storybook": ^2.4.0 "@storybook/html": "workspace:*" @@ -8617,21 +8535,27 @@ __metadata: resolution: "@storybook/svelte@workspace:app/svelte" dependencies: "@storybook/addons": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 "@storybook/core": 6.5.0-alpha.47 "@storybook/core-common": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 + "@storybook/docs-tools": 6.5.0-alpha.47 + "@storybook/node-logger": 6.5.0-alpha.47 "@storybook/store": 6.5.0-alpha.47 + "@types/loader-utils": ^2.0.0 "@types/webpack-env": ^1.16.0 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 svelte: ^3.31.2 svelte-loader: ^3.0.0 - sveltedoc-parser: ^4.1.0 + sveltedoc-parser: 4.1.0 ts-dedent: ^2.0.0 + webpack: 4 peerDependencies: "@babel/core": "*" svelte: ^3.1.0 @@ -8753,6 +8677,7 @@ __metadata: "@storybook/core": 6.5.0-alpha.47 "@storybook/core-common": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 + "@storybook/docs-tools": 6.5.0-alpha.47 "@storybook/store": 6.5.0-alpha.47 "@types/node": ^14.14.20 || ^16.0.0 "@types/webpack-env": ^1.16.0 @@ -8787,14 +8712,17 @@ __metadata: resolution: "@storybook/vue@workspace:app/vue" dependencies: "@storybook/addons": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 "@storybook/core": 6.5.0-alpha.47 "@storybook/core-common": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 + "@storybook/docs-tools": 6.5.0-alpha.47 "@storybook/store": 6.5.0-alpha.47 "@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 @@ -8821,7 +8749,7 @@ __metadata: languageName: unknown linkType: soft -"@storybook/web-components@6.5.0-alpha.47, @storybook/web-components@workspace:*, @storybook/web-components@workspace:app/web-components": +"@storybook/web-components@workspace:*, @storybook/web-components@workspace:app/web-components": version: 0.0.0-use.local resolution: "@storybook/web-components@workspace:app/web-components" dependencies: @@ -8830,9 +8758,11 @@ __metadata: "@babel/preset-env": ^7.12.11 "@storybook/addons": 6.5.0-alpha.47 "@storybook/client-api": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 "@storybook/core": 6.5.0-alpha.47 "@storybook/core-common": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 + "@storybook/docs-tools": 6.5.0-alpha.47 "@storybook/preview-web": 6.5.0-alpha.47 "@storybook/store": 6.5.0-alpha.47 "@types/node": ^14.14.20 || ^16.0.0 @@ -9597,13 +9527,6 @@ __metadata: languageName: node linkType: hard -"@types/estree@npm:^0.0.44": - version: 0.0.44 - resolution: "@types/estree@npm:0.0.44" - checksum: 3659c1f020b3b4351a30301a46ad0321189316bf75288823d606c4b561c5a64d28591712cd706763aafa35690c51dece35a7567c676896814c31e48ffc3b135f - languageName: node - linkType: hard - "@types/estree@npm:^0.0.46": version: 0.0.46 resolution: "@types/estree@npm:0.0.46" @@ -10398,13 +10321,6 @@ __metadata: languageName: node linkType: hard -"@types/tmp@npm:^0.2.0": - version: 0.2.3 - resolution: "@types/tmp@npm:0.2.3" - checksum: a9a32d723b483713ef537af31caddfcc2129ba21a0d56f5e4eef39508e07d415b1ec7327486d15b2cd4ac277deaaef0f8368ed1a0f4029e5ef5c393f9c15856b - languageName: node - linkType: hard - "@types/trusted-types@npm:^2.0.2": version: 2.0.2 resolution: "@types/trusted-types@npm:2.0.2" @@ -12443,7 +12359,7 @@ __metadata: languageName: node linkType: hard -"acorn@npm:^8.0.0, acorn@npm:^8.2.4, acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.6.0": +"acorn@npm:^8.0.0, acorn@npm:^8.2.4, acorn@npm:^8.4.1, acorn@npm:^8.5.0": version: 8.7.0 resolution: "acorn@npm:8.7.0" bin: @@ -13434,21 +13350,6 @@ __metadata: languageName: node linkType: hard -"async-disk-cache@npm:^2.0.0": - version: 2.1.0 - resolution: "async-disk-cache@npm:2.1.0" - dependencies: - debug: ^4.1.1 - heimdalljs: ^0.2.3 - istextorbinary: ^2.5.1 - mkdirp: ^0.5.0 - rimraf: ^3.0.0 - rsvp: ^4.8.5 - username-sync: ^1.0.2 - checksum: 131110af8f0c21ebdc32154c6650bf9156589fcf2c237cf2935128855dc4d543db94c1b6315bf65c85dcc8c3d4d3e9ab4428983b5ee54d20bc6593735237088b - languageName: node - linkType: hard - "async-each@npm:^1.0.1": version: 1.0.3 resolution: "async-each@npm:1.0.3" @@ -13874,17 +13775,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-debug-macros@npm:^0.2.0": - version: 0.2.0 - resolution: "babel-plugin-debug-macros@npm:0.2.0" - dependencies: - semver: ^5.3.0 - peerDependencies: - "@babel/core": ^7.0.0-beta.42 - checksum: d70d26a0e3ceeb5af0c91b0726448cec237f433afa5b493ba344a615f63ab29576c92e391f834c8c7cce57a549bf7a3e5f663771dac216daaf9887727090d901 - languageName: node - linkType: hard - "babel-plugin-debug-macros@npm:^0.3.3, babel-plugin-debug-macros@npm:^0.3.4": version: 0.3.4 resolution: "babel-plugin-debug-macros@npm:0.3.4" @@ -13967,19 +13857,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-htmlbars-inline-precompile@npm:^5.0.0": - version: 5.3.1 - resolution: "babel-plugin-htmlbars-inline-precompile@npm:5.3.1" - dependencies: - babel-plugin-ember-modules-api-polyfill: ^3.5.0 - line-column: ^1.0.2 - magic-string: ^0.25.7 - parse-static-imports: ^1.1.0 - string.prototype.matchall: ^4.0.5 - checksum: 8a93893d22f5dc6cb8c271c228311b3cb60b01df247f592e0d88df88b690114f7193fc2175c72de3ad3898a81a53dc0c407c6f059801315dea912e5628c9a5fa - languageName: node - linkType: hard - "babel-plugin-istanbul@npm:^5.1.0": version: 5.2.0 resolution: "babel-plugin-istanbul@npm:5.2.0" @@ -14074,7 +13951,7 @@ __metadata: languageName: node linkType: hard -"babel-plugin-named-asset-import@npm:^0.3.1, babel-plugin-named-asset-import@npm:^0.3.6, babel-plugin-named-asset-import@npm:^0.3.7": +"babel-plugin-named-asset-import@npm:^0.3.6, babel-plugin-named-asset-import@npm:^0.3.7": version: 0.3.8 resolution: "babel-plugin-named-asset-import@npm:0.3.8" peerDependencies: @@ -14161,7 +14038,7 @@ __metadata: languageName: node linkType: hard -"babel-plugin-styled-components@npm:>= 1, babel-plugin-styled-components@npm:>= 1.12.0": +"babel-plugin-styled-components@npm:>= 1": version: 2.0.6 resolution: "babel-plugin-styled-components@npm:2.0.6" dependencies: @@ -14597,7 +14474,7 @@ __metadata: languageName: node linkType: hard -"binaryextensions@npm:1 || 2, binaryextensions@npm:^2.1.2": +"binaryextensions@npm:1 || 2": version: 2.3.0 resolution: "binaryextensions@npm:2.3.0" checksum: 5b118f3b864a9908109c93d0534e21983c0cf2e064c00e2866f60af3920179c85f1ca74275271b66c9381d8d5ea8c9bd254d50cf279dbcb3a9dfb9e40baaa3f2 @@ -15069,21 +14946,6 @@ __metadata: languageName: node linkType: hard -"broccoli-funnel@npm:^3.0.8": - version: 3.0.8 - resolution: "broccoli-funnel@npm:3.0.8" - dependencies: - array-equal: ^1.0.0 - broccoli-plugin: ^4.0.7 - debug: ^4.1.1 - fs-tree-diff: ^2.0.1 - heimdalljs: ^0.2.0 - minimatch: ^3.0.0 - walk-sync: ^2.0.2 - checksum: 0cffcd9e8b075151348a59ff37e20a3b235e70b3c8ae58c39b6dfe35d2242e00d06d670cac8a412b459a04fb6427ae186ddaf2834f6492ed4a96163f119c7f27 - languageName: node - linkType: hard - "broccoli-kitchen-sink-helpers@npm:^0.2.5": version: 0.2.9 resolution: "broccoli-kitchen-sink-helpers@npm:0.2.9" @@ -15230,25 +15092,6 @@ __metadata: languageName: node linkType: hard -"broccoli-persistent-filter@npm:^3.1.2": - version: 3.1.2 - resolution: "broccoli-persistent-filter@npm:3.1.2" - dependencies: - async-disk-cache: ^2.0.0 - async-promise-queue: ^1.0.3 - broccoli-plugin: ^4.0.3 - fs-tree-diff: ^2.0.0 - hash-for-dep: ^1.5.0 - heimdalljs: ^0.2.1 - heimdalljs-logger: ^0.1.7 - promise-map-series: ^0.2.1 - rimraf: ^3.0.0 - symlink-or-copy: ^1.0.1 - sync-disk-cache: ^2.0.0 - checksum: 349d716019c1e273eff4ef93233d7753e66610a5b9aacdcc4e1b3faecdc4ea7b2a9ed8ad982ae1ba7a5bce35a470637d4db0c9534300952582c630f4cc14485a - languageName: node - linkType: hard - "broccoli-plugin@npm:1.1.0": version: 1.1.0 resolution: "broccoli-plugin@npm:1.1.0" @@ -15300,7 +15143,7 @@ __metadata: languageName: node linkType: hard -"broccoli-plugin@npm:^4.0.2, broccoli-plugin@npm:^4.0.3, broccoli-plugin@npm:^4.0.7": +"broccoli-plugin@npm:^4.0.2": version: 4.0.7 resolution: "broccoli-plugin@npm:4.0.7" dependencies: @@ -18355,17 +18198,6 @@ __metadata: languageName: node linkType: hard -"css-to-react-native@npm:^3.0.0": - version: 3.0.0 - resolution: "css-to-react-native@npm:3.0.0" - dependencies: - camelize: ^1.0.0 - css-color-keywords: ^1.0.0 - postcss-value-parser: ^4.0.2 - checksum: 03dcf5381ff6a888e3621aaffd812fd52df803d01c264b99142a9f73942007c2e953bd27339d6e2da2504a940a2b0d3cc702d3a737165703a0d8ae9c5626c1c1 - languageName: node - linkType: hard - "css-tree@npm:1.0.0-alpha.37": version: 1.0.0-alpha.37 resolution: "css-tree@npm:1.0.0-alpha.37" @@ -19920,16 +19752,6 @@ __metadata: languageName: node linkType: hard -"editions@npm:^2.2.0": - version: 2.3.1 - resolution: "editions@npm:2.3.1" - dependencies: - errlop: ^2.0.0 - semver: ^6.3.0 - checksum: 18a507230eff7a16e4f6839323ba9a9c9504a3ae46efcf6d0512fe639a43e64c977f17b2f586987e319f8308674d148f0201e960ef29d3d0207e65f8fe5d77e9 - languageName: node - linkType: hard - "ee-first@npm:1.1.1": version: 1.1.1 resolution: "ee-first@npm:1.1.1" @@ -20027,7 +19849,7 @@ __metadata: languageName: node linkType: hard -"ember-cli-babel@npm:^7.1.2, ember-cli-babel@npm:^7.13.0, ember-cli-babel@npm:^7.13.2, ember-cli-babel@npm:^7.19.0, ember-cli-babel@npm:^7.22.1, ember-cli-babel@npm:^7.23.0, ember-cli-babel@npm:^7.26.6, ember-cli-babel@npm:^7.5.0, ember-cli-babel@npm:^7.7.3": +"ember-cli-babel@npm:^7.1.2, ember-cli-babel@npm:^7.13.0, ember-cli-babel@npm:^7.13.2, ember-cli-babel@npm:^7.19.0, ember-cli-babel@npm:^7.22.1, ember-cli-babel@npm:^7.23.0, ember-cli-babel@npm:^7.5.0, ember-cli-babel@npm:^7.7.3": version: 7.26.11 resolution: "ember-cli-babel@npm:7.26.11" dependencies: @@ -20094,30 +19916,6 @@ __metadata: languageName: node linkType: hard -"ember-cli-htmlbars@npm:^5.7.1": - version: 5.7.2 - resolution: "ember-cli-htmlbars@npm:5.7.2" - dependencies: - "@ember/edition-utils": ^1.2.0 - babel-plugin-htmlbars-inline-precompile: ^5.0.0 - broccoli-debug: ^0.6.5 - broccoli-persistent-filter: ^3.1.2 - broccoli-plugin: ^4.0.3 - common-tags: ^1.8.0 - ember-cli-babel-plugin-helpers: ^1.1.1 - ember-cli-version-checker: ^5.1.2 - fs-tree-diff: ^2.0.1 - hash-for-dep: ^1.5.1 - heimdalljs-logger: ^0.1.10 - json-stable-stringify: ^1.0.1 - semver: ^7.3.4 - silent-error: ^1.1.1 - strip-bom: ^4.0.0 - walk-sync: ^2.2.0 - checksum: 7c4e69947f396056af21d1b153bcb97dd958fcfc52cc1f7cd7e84a6dc90558ca4b63bc3a77066c96da519cdd7733b565d800c4ab3643d5010612b6e322dd15dc - languageName: node - linkType: hard - "ember-cli-inject-live-reload@npm:^2.0.2": version: 2.1.0 resolution: "ember-cli-inject-live-reload@npm:2.1.0" @@ -20260,7 +20058,7 @@ __metadata: languageName: node linkType: hard -"ember-cli-version-checker@npm:^5.1.1, ember-cli-version-checker@npm:^5.1.2": +"ember-cli-version-checker@npm:^5.1.1": version: 5.1.2 resolution: "ember-cli-version-checker@npm:5.1.2" dependencies: @@ -20372,30 +20170,6 @@ __metadata: languageName: node linkType: hard -"ember-compatibility-helpers@npm:^1.2.1": - version: 1.2.6 - resolution: "ember-compatibility-helpers@npm:1.2.6" - dependencies: - babel-plugin-debug-macros: ^0.2.0 - ember-cli-version-checker: ^5.1.1 - find-up: ^5.0.0 - fs-extra: ^9.1.0 - semver: ^5.4.1 - checksum: 691390534e43623b0e339540ef42362b97e142f136487e1031ff53afc2772cce94c3b0db7dab1e09446a58c2e23d3c075af00e87805e61fb2b2a164d81daa417 - languageName: node - linkType: hard - -"ember-destroyable-polyfill@npm:^2.0.3": - version: 2.0.3 - resolution: "ember-destroyable-polyfill@npm:2.0.3" - dependencies: - ember-cli-babel: ^7.22.1 - ember-cli-version-checker: ^5.1.1 - ember-compatibility-helpers: ^1.2.1 - checksum: da2dbb6bbf7d0ca56d96aeba9ce46ad31cd3f690a376c2fdd9e6b3a111bb68c60765fd49e9a39ab7032011df7b28af21fb87a2a27e83582084bf2956b5441005 - languageName: node - linkType: hard - "ember-example@workspace:examples/ember-cli": version: 0.0.0-use.local resolution: "ember-example@workspace:examples/ember-cli" @@ -20910,13 +20684,6 @@ __metadata: languageName: node linkType: hard -"errlop@npm:^2.0.0": - version: 2.2.0 - resolution: "errlop@npm:2.2.0" - checksum: dd4bcd0cf9d3c0942dbfbf8c07d10715bbf06118d53f4b77102e8b653e421e3858abb613ff4e5f55df62f01fa54ea31a7cea620b05c43d20a2c040aac3c46085 - languageName: node - linkType: hard - "errno@npm:^0.1.1, errno@npm:^0.1.3, errno@npm:~0.1.1, errno@npm:~0.1.7": version: 0.1.8 resolution: "errno@npm:0.1.8" @@ -21690,7 +21457,7 @@ __metadata: languageName: node linkType: hard -"eslint-visitor-keys@npm:^3.0.0, eslint-visitor-keys@npm:^3.1.0": +"eslint-visitor-keys@npm:^3.0.0": version: 3.3.0 resolution: "eslint-visitor-keys@npm:3.3.0" checksum: fc6a9b5bdee8d90e35e7564fd9db10fdf507a2c089a4f0d4d3dd091f7f4ac6790547c8b1b7a760642ef819f875ef86dd5bcb8cdf01b0775f57a699f4e6a20a18 @@ -21782,17 +21549,6 @@ __metadata: languageName: node linkType: hard -"espree@npm:9.2.0": - version: 9.2.0 - resolution: "espree@npm:9.2.0" - dependencies: - acorn: ^8.6.0 - acorn-jsx: ^5.3.1 - eslint-visitor-keys: ^3.1.0 - checksum: fa0acceb6bf151193b873379ba8ee3771c93ce3b656aeb9fe4a36adcf170e315925096e8addddd2d347ae6026ab18febc5892e314e6b109b61a9c3be75f88dc0 - languageName: node - linkType: hard - "espree@npm:^7.3.0, espree@npm:^7.3.1": version: 7.3.1 resolution: "espree@npm:7.3.1" @@ -24974,7 +24730,7 @@ __metadata: languageName: node linkType: hard -"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0": +"hoist-non-react-statics@npm:^3.3.0": version: 3.3.2 resolution: "hoist-non-react-statics@npm:3.3.2" dependencies: @@ -27388,17 +27144,6 @@ __metadata: languageName: node linkType: hard -"istextorbinary@npm:^2.5.1": - version: 2.6.0 - resolution: "istextorbinary@npm:2.6.0" - dependencies: - binaryextensions: ^2.1.2 - editions: ^2.2.0 - textextensions: ^2.5.0 - checksum: 43efaf1eecc740defc3f445383553ec3fe248e368c86a5ad58010a265bd3ac30f85e65216fbd5cccac6efe265e1dd6eb1a2b83f9a7707140ec335b3402fe89cc - languageName: node - linkType: hard - "iterate-iterator@npm:^1.0.1": version: 1.0.2 resolution: "iterate-iterator@npm:1.0.2" @@ -29938,16 +29683,6 @@ __metadata: languageName: node linkType: hard -"line-column@npm:^1.0.2": - version: 1.0.2 - resolution: "line-column@npm:1.0.2" - dependencies: - isarray: ^1.0.0 - isobject: ^2.0.0 - checksum: 75aa918a9791362a3369c7222689350dc6df5b040314525ba79c3682f1386e13a3ceddd6b2584b8cb5c3ab3a5b3c50c940a182772dbb6361303bf6ef65fc2d64 - languageName: node - linkType: hard - "lines-and-columns@npm:^1.1.6": version: 1.2.4 resolution: "lines-and-columns@npm:1.2.4" @@ -30028,16 +29763,6 @@ __metadata: languageName: node linkType: hard -"lit-element@npm:^3.0.2": - version: 3.2.0 - resolution: "lit-element@npm:3.2.0" - dependencies: - "@lit/reactive-element": ^1.3.0 - lit-html: ^2.2.0 - checksum: d3b3e8b7fe47c4fbf75de0dca70bfa4c7f874dede7a2a5561a4c03e5bd7b4d18ba111b1c36cea14423ab2a7fd9b8c1a4d2f224a5012ab23b3ddb46600e08d5af - languageName: node - linkType: hard - "lit-html@npm:2.0.2": version: 2.0.2 resolution: "lit-html@npm:2.0.2" @@ -30047,15 +29772,6 @@ __metadata: languageName: node linkType: hard -"lit-html@npm:^2.0.2, lit-html@npm:^2.2.0": - version: 2.2.0 - resolution: "lit-html@npm:2.2.0" - dependencies: - "@types/trusted-types": ^2.0.2 - checksum: 9e7d593c0c7b657791e919fa315f66377444741faac4de574b3b64c50bdd5a8fbda8c61274616ccc546beb26712c5f6117f4297d805beac66fb0b14a604e3d7a - languageName: node - linkType: hard - "livereload-js@npm:^3.3.1": version: 3.3.3 resolution: "livereload-js@npm:3.3.3" @@ -34699,13 +34415,6 @@ __metadata: languageName: node linkType: hard -"parse-static-imports@npm:^1.1.0": - version: 1.1.0 - resolution: "parse-static-imports@npm:1.1.0" - checksum: 24a210b3ed4fc8ab4d79a807956484a60f97cd0e8174d4c2c88c034fdba65d87ce62ec293aadee46e07d476959610a905a2b80d60b343fd525e057479cabfbbe - languageName: node - linkType: hard - "parse-url@npm:^6.0.0": version: 6.0.0 resolution: "parse-url@npm:6.0.0" @@ -42221,7 +41930,7 @@ __metadata: languageName: node linkType: hard -"string.prototype.matchall@npm:^4.0.0 || ^3.0.1, string.prototype.matchall@npm:^4.0.2, string.prototype.matchall@npm:^4.0.5, string.prototype.matchall@npm:^4.0.6": +"string.prototype.matchall@npm:^4.0.0 || ^3.0.1, string.prototype.matchall@npm:^4.0.2, string.prototype.matchall@npm:^4.0.6": version: 4.0.6 resolution: "string.prototype.matchall@npm:4.0.6" dependencies: @@ -42480,7 +42189,7 @@ __metadata: languageName: node linkType: hard -"strip-json-comments@npm:3.1.1, strip-json-comments@npm:^3.1.0, strip-json-comments@npm:^3.1.1": +"strip-json-comments@npm:^3.1.0, strip-json-comments@npm:^3.1.1": version: 3.1.1 resolution: "strip-json-comments@npm:3.1.1" checksum: 9681a6257b925a7fa0f285851c0e613cc934a50661fa7bb41ca9cbbff89686bb4a0ee366e6ecedc4daafd01e83eee0720111ab294366fe7c185e935475ebcecd @@ -42574,28 +42283,6 @@ __metadata: languageName: node linkType: hard -"styled-components@npm:^5.2.1": - version: 5.3.3 - resolution: "styled-components@npm:5.3.3" - dependencies: - "@babel/helper-module-imports": ^7.0.0 - "@babel/traverse": ^7.4.5 - "@emotion/is-prop-valid": ^0.8.8 - "@emotion/stylis": ^0.8.4 - "@emotion/unitless": ^0.7.4 - babel-plugin-styled-components: ">= 1.12.0" - css-to-react-native: ^3.0.0 - hoist-non-react-statics: ^3.0.0 - shallowequal: ^1.1.0 - supports-color: ^5.5.0 - peerDependencies: - react: ">= 16.8.0" - react-dom: ">= 16.8.0" - react-is: ">= 16.8.0" - checksum: 0fda77406c668a16c753f0778850a90d5fbeae419791dac533e3f67e77f8c767d89022626aafa169fffe8b0873e15bf71126b2bab945dc98af6079d8b90e7488 - languageName: node - linkType: hard - "styled_string@npm:0.0.1": version: 0.0.1 resolution: "styled_string@npm:0.0.1" @@ -42885,17 +42572,6 @@ __metadata: languageName: node linkType: hard -"sveltedoc-parser@npm:^4.1.0": - version: 4.3.1 - resolution: "sveltedoc-parser@npm:4.3.1" - dependencies: - eslint: 8.4.1 - espree: 9.2.0 - htmlparser2-svelte: 4.1.0 - checksum: 38e0258956fcf1bbe2ecc61286b73e96eedbec62e236c6b3adfc7055a4b2b50034b99f887a9e5eaccac233a87ccbc9434abe156f6a3ef25a640dcb54a4b99f46 - languageName: node - linkType: hard - "svg-parser@npm:^2.0.0, svg-parser@npm:^2.0.2": version: 2.0.4 resolution: "svg-parser@npm:2.0.4" @@ -43008,19 +42684,6 @@ __metadata: languageName: node linkType: hard -"sync-disk-cache@npm:^2.0.0": - version: 2.1.0 - resolution: "sync-disk-cache@npm:2.1.0" - dependencies: - debug: ^4.1.1 - heimdalljs: ^0.2.6 - mkdirp: ^0.5.0 - rimraf: ^3.0.0 - username-sync: ^1.0.2 - checksum: d1bfc95940188d500f17aaec249e45fbf55c30839d9a68be8a28606183b149beb87c76969e74372ba601ea50b42716489673ea7031334f42f98ec2f06921b59c - languageName: node - linkType: hard - "synchronous-promise@npm:^2.0.15": version: 2.0.15 resolution: "synchronous-promise@npm:2.0.15" @@ -43403,7 +43066,7 @@ __metadata: languageName: node linkType: hard -"textextensions@npm:1 || 2, textextensions@npm:^2.5.0": +"textextensions@npm:1 || 2": version: 2.6.0 resolution: "textextensions@npm:2.6.0" checksum: 02cb5eb25a0a4597d402a6971741a2d49335e699051db44e4f252ecb4249bb193f08068ecd6d880565f7b34c84832fe60f4b82119b9a2d5e3e58e85509c3dc96 @@ -45981,7 +45644,7 @@ __metadata: languageName: node linkType: hard -"vue@npm:^2.6.10, vue@npm:^2.6.12": +"vue@npm:^2.6.12": version: 2.6.14 resolution: "vue@npm:2.6.14" checksum: efbe26ccc7c1bd025b88e464ebc81217b92350a77b98049122a46ac2242e249719f930d3914e2efdeaaa521a51e6e6b1cb9ffbf95b4835ed94dc92efb481040f From 56796df6355cc9aed46f20586b747ab719d8a4ae Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Mar 2022 11:53:29 +0800 Subject: [PATCH 02/17] Missing files --- addons/docs/src/frameworks/common/config.ts | 6 +- .../frameworks/common/enhanceArgTypes.test.ts | 269 ------------------ .../src/frameworks/common/enhanceArgTypes.ts | 20 -- 3 files changed, 1 insertion(+), 294 deletions(-) delete mode 100644 addons/docs/src/frameworks/common/enhanceArgTypes.test.ts delete mode 100644 addons/docs/src/frameworks/common/enhanceArgTypes.ts diff --git a/addons/docs/src/frameworks/common/config.ts b/addons/docs/src/frameworks/common/config.ts index f5ec177688f9..10f3227e89d5 100644 --- a/addons/docs/src/frameworks/common/config.ts +++ b/addons/docs/src/frameworks/common/config.ts @@ -1,12 +1,8 @@ -import { enhanceArgTypes } from './enhanceArgTypes'; - export const parameters = { docs: { inlineStories: false, getContainer: async () => (await import('../../blocks')).DocsContainer, getPage: async () => (await import('../../blocks')).DocsPage, - iframeHeight: 100, + iframeHeight: 110, }, }; - -export const argTypesEnhancers = [enhanceArgTypes]; diff --git a/addons/docs/src/frameworks/common/enhanceArgTypes.test.ts b/addons/docs/src/frameworks/common/enhanceArgTypes.test.ts deleted file mode 100644 index 5380ac6a4efc..000000000000 --- a/addons/docs/src/frameworks/common/enhanceArgTypes.test.ts +++ /dev/null @@ -1,269 +0,0 @@ -import type { ArgTypes } from '@storybook/api'; -import type { StrictInputType } from '@storybook/csf'; -import { enhanceArgTypes } from './enhanceArgTypes'; - -expect.addSnapshotSerializer({ - print: (val: any) => JSON.stringify(val, null, 2), - test: (val) => typeof val !== 'string', -}); - -const enhance = ({ - argType, - arg, - extractedArgTypes, - isArgsStory = true, -}: { - argType?: StrictInputType; - arg?: any; - extractedArgTypes?: ArgTypes; - isArgsStory?: boolean; -}) => { - const context = { - componentId: 'foo', - title: 'foo', - kind: 'foo', - id: 'foo--bar', - name: 'bar', - story: 'bar', - component: 'dummy', - parameters: { - __isArgsStory: isArgsStory, - docs: { - extractArgTypes: extractedArgTypes && (() => extractedArgTypes), - }, - }, - argTypes: argType && { input: argType }, - initialArgs: { input: arg }, - args: { input: arg }, - globals: {}, - }; - return enhanceArgTypes(context); -}; - -describe('enhanceArgTypes', () => { - describe('no-args story function', () => { - it('should no-op', () => { - expect( - enhance({ - argType: { name: 'input', foo: 'unmodified', type: { name: 'number' } }, - isArgsStory: false, - }).input - ).toMatchInlineSnapshot(` - { - "name": "input", - "foo": "unmodified", - "type": { - "name": "number" - } - } - `); - }); - }); - describe('args story function', () => { - describe('single-source input', () => { - describe('argTypes input', () => { - it('number', () => { - expect( - enhance({ - argType: { name: 'input', type: { name: 'number' } }, - }).input - ).toMatchInlineSnapshot(` - { - "name": "input", - "type": { - "name": "number" - } - } - `); - }); - }); - - describe('extraction from component', () => { - it('number', () => { - expect( - enhance({ extractedArgTypes: { input: { name: 'input', type: { name: 'number' } } } }) - .input - ).toMatchInlineSnapshot(` - { - "name": "input", - "type": { - "name": "number" - } - } - `); - }); - }); - - describe('controls input', () => { - it('range', () => { - expect( - enhance({ - argType: { name: 'input', control: { type: 'range', min: 0, max: 100 } }, - }).input - ).toMatchInlineSnapshot(` - { - "name": "input", - "control": { - "type": "range", - "min": 0, - "max": 100 - } - } - `); - }); - it('options', () => { - expect( - enhance({ - argType: { name: 'input', control: { type: 'radio', options: [1, 2] } }, - }).input - ).toMatchInlineSnapshot(` - { - "name": "input", - "control": { - "type": "radio", - "options": [ - 1, - 2 - ] - } - } - `); - }); - }); - }); - - describe('mixed-source input', () => { - it('user-specified argTypes take precedence over extracted argTypes', () => { - expect( - enhance({ - argType: { name: 'input', type: { name: 'number' } }, - extractedArgTypes: { input: { type: { name: 'string' } } }, - }).input - ).toMatchInlineSnapshot(` - { - "type": { - "name": "number" - }, - "name": "input" - } - `); - }); - - it('user-specified argTypes take precedence over inferred argTypes', () => { - expect( - enhance({ - argType: { name: 'input', type: { name: 'number' } }, - arg: 'hello', - }).input - ).toMatchInlineSnapshot(` - { - "name": "input", - "type": { - "name": "number" - } - } - `); - }); - - it('extracted argTypes take precedence over inferred argTypes', () => { - expect( - enhance({ - extractedArgTypes: { input: { type: { name: 'string' } } }, - arg: 6, - }).input - ).toMatchInlineSnapshot(` - { - "type": { - "name": "string" - } - } - `); - }); - - it('user-specified controls take precedence over inferred controls', () => { - expect( - enhance({ - argType: { name: 'input', defaultValue: 5, control: { type: 'range', step: 50 } }, - arg: 3, - extractedArgTypes: { input: { name: 'input' } }, - }).input - ).toMatchInlineSnapshot(` - { - "name": "input", - "defaultValue": 5, - "control": { - "type": "range", - "step": 50 - } - } - `); - }); - - it('includes extracted argTypes when there are no user-specified argTypes', () => { - expect( - enhance({ - arg: 3, - extractedArgTypes: { input: { name: 'input' }, foo: { type: { name: 'number' } } }, - }) - ).toMatchInlineSnapshot(` - { - "input": { - "name": "input" - }, - "foo": { - "type": { - "name": "number" - } - } - } - `); - }); - - it('includes extracted argTypes when user-specified argTypes match', () => { - expect( - enhance({ - argType: { name: 'input', type: { name: 'number' } }, - extractedArgTypes: { input: { name: 'input' }, foo: { type: { name: 'number' } } }, - }) - ).toMatchInlineSnapshot(` - { - "input": { - "name": "input", - "type": { - "name": "number" - } - }, - "foo": { - "type": { - "name": "number" - } - } - } - `); - }); - - it('excludes extracted argTypes when user-specified argTypes do not match', () => { - expect( - enhance({ - argType: { name: 'input', type: { name: 'number' } }, - extractedArgTypes: { foo: { type: { name: 'number' } } }, - }) - ).toMatchInlineSnapshot(` - { - "foo": { - "type": { - "name": "number" - } - }, - "input": { - "name": "input", - "type": { - "name": "number" - } - } - } - `); - }); - }); - }); -}); diff --git a/addons/docs/src/frameworks/common/enhanceArgTypes.ts b/addons/docs/src/frameworks/common/enhanceArgTypes.ts deleted file mode 100644 index 540b80e56b42..000000000000 --- a/addons/docs/src/frameworks/common/enhanceArgTypes.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { AnyFramework, StoryContextForEnhancers } from '@storybook/csf'; -import { combineParameters } from '@storybook/store'; - -export const enhanceArgTypes = ( - context: StoryContextForEnhancers -) => { - const { - component, - argTypes: userArgTypes, - parameters: { docs = {} }, - } = context; - const { extractArgTypes } = docs; - - const extractedArgTypes = extractArgTypes && component ? extractArgTypes(component) : {}; - const withExtractedTypes = extractedArgTypes - ? combineParameters(extractedArgTypes, userArgTypes) - : userArgTypes; - - return withExtractedTypes; -}; From e772002895ce3a08f63d44831241118c42b3c4d8 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Mar 2022 12:27:25 +0800 Subject: [PATCH 03/17] Angular: Add docs preset to framework --- addons/docs/angular/index.d.ts | 2 +- addons/docs/angular/index.js | 8 +++++++- app/angular/package.json | 11 ++++++++--- app/angular/src/builders/build-storybook/index.ts | 2 +- .../__testfixtures__/doc-button/argtypes.snapshot | 0 .../doc-button/compodoc-posix.snapshot | 0 .../doc-button/compodoc-windows.snapshot | 0 .../client/docs}/__testfixtures__/doc-button/input.ts | 0 .../__testfixtures__/doc-button/properties.snapshot | 0 .../docs}/__testfixtures__/doc-button/tsconfig.json | 0 .../src/client/docs}/angular-properties.test.ts | 1 + .../angular/src/client/docs}/compodoc.test.ts | 0 .../angular/src/client/docs}/compodoc.ts | 0 .../angular => app/angular/src/client/docs}/config.ts | 4 +++- .../angular => app/angular/src/client/docs}/index.ts | 0 .../angular/src/client/docs}/prepareForInline.ts | 4 ++-- .../angular/src/client/docs}/sourceDecorator.ts | 6 +++--- .../angular => app/angular/src/client/docs}/types.ts | 0 .../src/server/framework-preset-angular-docs.ts | 7 +++++++ app/angular/src/server/preset.ts | 1 + yarn.lock | 1 + 21 files changed, 35 insertions(+), 12 deletions(-) rename {addons/docs/src/frameworks/angular => app/angular/src/client/docs}/__testfixtures__/doc-button/argtypes.snapshot (100%) rename {addons/docs/src/frameworks/angular => app/angular/src/client/docs}/__testfixtures__/doc-button/compodoc-posix.snapshot (100%) rename {addons/docs/src/frameworks/angular => app/angular/src/client/docs}/__testfixtures__/doc-button/compodoc-windows.snapshot (100%) rename {addons/docs/src/frameworks/angular => app/angular/src/client/docs}/__testfixtures__/doc-button/input.ts (100%) rename {addons/docs/src/frameworks/angular => app/angular/src/client/docs}/__testfixtures__/doc-button/properties.snapshot (100%) rename {addons/docs/src/frameworks/angular => app/angular/src/client/docs}/__testfixtures__/doc-button/tsconfig.json (100%) rename {addons/docs/src/frameworks/angular => app/angular/src/client/docs}/angular-properties.test.ts (99%) rename {addons/docs/src/frameworks/angular => app/angular/src/client/docs}/compodoc.test.ts (100%) rename {addons/docs/src/frameworks/angular => app/angular/src/client/docs}/compodoc.ts (100%) rename {addons/docs/src/frameworks/angular => app/angular/src/client/docs}/config.ts (81%) rename {addons/docs/src/frameworks/angular => app/angular/src/client/docs}/index.ts (100%) rename {addons/docs/src/frameworks/angular => app/angular/src/client/docs}/prepareForInline.ts (87%) rename {addons/docs/src/frameworks/angular => app/angular/src/client/docs}/sourceDecorator.ts (91%) rename {addons/docs/src/frameworks/angular => app/angular/src/client/docs}/types.ts (100%) create mode 100644 app/angular/src/server/framework-preset-angular-docs.ts 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/app/angular/package.json b/app/angular/package.json index bc404778a8b9..d2e8907486dd 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -47,10 +47,12 @@ "dependencies": { "@storybook/addons": "6.5.0-alpha.47", "@storybook/api": "6.5.0-alpha.47", + "@storybook/client-logger": "6.5.0-alpha.47", "@storybook/core": "6.5.0-alpha.47", "@storybook/core-common": "6.5.0-alpha.47", "@storybook/core-events": "6.5.0-alpha.47", "@storybook/csf": "0.0.2--canary.87bc651.0", + "@storybook/docs-tools": "6.5.0-alpha.47", "@storybook/node-logger": "6.5.0-alpha.47", "@storybook/semver": "^7.3.2", "@storybook/store": "6.5.0-alpha.47", @@ -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,11 @@ "@angular/platform-browser-dynamic": "^11.2.14", "@nrwl/workspace": "^11.6.3", "@types/autoprefixer": "^9.7.2", - "@types/jest": "^26.0.16", + "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", diff --git a/app/angular/src/builders/build-storybook/index.ts b/app/angular/src/builders/build-storybook/index.ts index 63c47785c9c8..4fe76129d37d 100644 --- a/app/angular/src/builders/build-storybook/index.ts +++ b/app/angular/src/builders/build-storybook/index.ts @@ -12,12 +12,12 @@ 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'; +import buildStandalone, { StandaloneOptions } from '../../../standalone'; import { runCompodoc } from '../utils/run-compodoc'; import { buildStandaloneErrorHandler } from '../utils/build-standalone-errors-handler'; 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 100% rename from addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot rename to app/angular/src/client/docs/__testfixtures__/doc-button/argtypes.snapshot 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 100% 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 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 100% rename from addons/docs/src/frameworks/angular/compodoc.ts rename to app/angular/src/client/docs/compodoc.ts 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 91% rename from addons/docs/src/frameworks/angular/sourceDecorator.ts rename to app/angular/src/client/docs/sourceDecorator.ts index 1c38edbd17f9..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 type { PartialStoryFn } from '@storybook/csf'; -import type { StoryContext, AngularFramework } from '@storybook/angular'; -import { computesTemplateSourceFromComponent } from '@storybook/angular/renderer'; -import { SNIPPET_RENDERED, SourceType } from '../../shared'; +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/server/framework-preset-angular-docs.ts b/app/angular/src/server/framework-preset-angular-docs.ts new file mode 100644 index 000000000000..53f2fe09efa6 --- /dev/null +++ b/app/angular/src/server/framework-preset-angular-docs.ts @@ -0,0 +1,7 @@ +import path from 'path'; +import { StorybookConfig } from '@storybook/core-common'; + +export const config: StorybookConfig['config'] = (entry = [], options) => { + console.log({ options }); + return [...entry, path.join(__dirname, '../../../dist/ts3.9/client/docs/config')]; +}; 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/yarn.lock b/yarn.lock index 4eeacf2cdb4e..bbc677dd26d2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8100,6 +8100,7 @@ __metadata: "@storybook/react-docgen-typescript-plugin": 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0 "@storybook/semver": ^7.3.2 "@storybook/store": 6.5.0-alpha.47 + "@types/estree": ^0.0.51 "@types/node": ^14.14.20 || ^16.0.0 "@types/util-deprecate": ^1.0.0 "@types/webpack-env": ^1.16.0 From b9604088040ebd7d7eeb5c59afa8cb06b43150c8 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Mar 2022 12:28:11 +0800 Subject: [PATCH 04/17] Ember: Add docs preset to framework --- addons/docs/ember/index.js | 7 ++- app/ember/package.json | 2 +- app/ember/src/client/docs/config.js | 12 +++++ .../ember/src/client/docs}/index.js | 0 .../ember/src/client/docs}/jsondoc.js | 0 .../ember/src/client/preview/docs}/config.js | 0 app/ember/src/client/preview/docs/index.js | 1 + app/ember/src/client/preview/docs/jsondoc.js | 50 +++++++++++++++++++ .../src/server/framework-preset-ember-docs.ts | 6 +++ app/ember/src/server/options.ts | 5 +- 10 files changed, 80 insertions(+), 3 deletions(-) create mode 100644 app/ember/src/client/docs/config.js rename {addons/docs/src/frameworks/ember => app/ember/src/client/docs}/index.js (100%) rename {addons/docs/src/frameworks/ember => app/ember/src/client/docs}/jsondoc.js (100%) rename {addons/docs/src/frameworks/ember => app/ember/src/client/preview/docs}/config.js (100%) create mode 100644 app/ember/src/client/preview/docs/index.js create mode 100644 app/ember/src/client/preview/docs/jsondoc.js create mode 100644 app/ember/src/server/framework-preset-ember-docs.ts 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/app/ember/package.json b/app/ember/package.json index 99391bedf8e1..44cc842a48e8 100644 --- a/app/ember/package.json +++ b/app/ember/package.json @@ -42,9 +42,9 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@ember/test-helpers": "^2.1.4", "@storybook/core": "6.5.0-alpha.47", "@storybook/core-common": "6.5.0-alpha.47", + "@storybook/docs-tools": "6.5.0-alpha.47", "@storybook/store": "6.5.0-alpha.47", "core-js": "^3.8.2", "global": "^4.4.0", 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-ember-docs.ts b/app/ember/src/server/framework-preset-ember-docs.ts new file mode 100644 index 000000000000..d2103c02d53d --- /dev/null +++ b/app/ember/src/server/framework-preset-ember-docs.ts @@ -0,0 +1,6 @@ +import type { StorybookConfig } from '@storybook/core-common'; +import { findDistEsm } from '@storybook/core-common'; + +export const config: StorybookConfig['config'] = (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 7f7d42a3c561..e418b10f04b9 100644 --- a/app/ember/src/server/options.ts +++ b/app/ember/src/server/options.ts @@ -4,5 +4,8 @@ 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('./framework-preset-babel-ember.js'), + require.resolve('./framework-preset-ember-docs.js'), + ], } as LoadOptions; From 0de7cd0605d68c9f8681367f280b93528c44953b Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Mar 2022 12:29:05 +0800 Subject: [PATCH 05/17] HTML: Add docs preset to framework --- app/html/package.json | 5 +++-- .../html => app/html/src/client/docs}/config.ts | 2 +- .../html/src/client/docs}/prepareForInline.tsx | 0 .../html/src/client/docs}/sourceDecorator.test.ts | 5 ++--- .../html/src/client/docs}/sourceDecorator.ts | 5 ++--- app/html/src/server/framework-preset-html-docs.ts | 5 +++++ app/html/src/server/options.ts | 5 ++++- app/html/tsconfig.json | 15 ++++----------- 8 files changed, 21 insertions(+), 21 deletions(-) rename {addons/docs/src/frameworks/html => app/html/src/client/docs}/config.ts (86%) rename {addons/docs/src/frameworks/html => app/html/src/client/docs}/prepareForInline.tsx (100%) rename {addons/docs/src/frameworks/html => app/html/src/client/docs}/sourceDecorator.test.ts (95%) rename {addons/docs/src/frameworks/html => app/html/src/client/docs}/sourceDecorator.ts (94%) create mode 100644 app/html/src/server/framework-preset-html-docs.ts diff --git a/app/html/package.json b/app/html/package.json index ebc2c1e9bb3e..526e31ba877c 100644 --- a/app/html/package.json +++ b/app/html/package.json @@ -46,10 +46,10 @@ }, "dependencies": { "@storybook/addons": "6.5.0-alpha.47", - "@storybook/client-api": "6.5.0-alpha.47", "@storybook/core": "6.5.0-alpha.47", "@storybook/core-common": "6.5.0-alpha.47", "@storybook/csf": "0.0.2--canary.87bc651.0", + "@storybook/docs-tools": "6.5.0-alpha.47", "@storybook/preview-web": "6.5.0-alpha.47", "@storybook/store": "6.5.0-alpha.47", "@types/node": "^14.14.20 || ^16.0.0", @@ -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": "*" 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 95% rename from addons/docs/src/frameworks/html/sourceDecorator.test.ts rename to app/html/src/client/docs/sourceDecorator.test.ts index 59e19ab083d5..18e5e3ace141 100644 --- a/addons/docs/src/frameworks/html/sourceDecorator.test.ts +++ b/app/html/src/client/docs/sourceDecorator.test.ts @@ -1,7 +1,6 @@ -import { addons, useEffect } from '@storybook/addons'; -import type { StoryContext } from '@storybook/addons'; +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 94% rename from addons/docs/src/frameworks/html/sourceDecorator.ts rename to app/html/src/client/docs/sourceDecorator.ts index 58fa63a1b98e..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 type { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/csf'; import dedent from 'ts-dedent'; -import type { 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/server/framework-preset-html-docs.ts b/app/html/src/server/framework-preset-html-docs.ts new file mode 100644 index 000000000000..f742f32da245 --- /dev/null +++ b/app/html/src/server/framework-preset-html-docs.ts @@ -0,0 +1,5 @@ +import { findDistEsm, StorybookConfig } from '@storybook/core-common'; + +export const config: StorybookConfig['config'] = (entry = []) => { + return [...entry, findDistEsm(__dirname, 'client/docs/config')]; +}; diff --git a/app/html/src/server/options.ts b/app/html/src/server/options.ts index 5888e8a10ec5..581ab6ea98f7 100644 --- a/app/html/src/server/options.ts +++ b/app/html/src/server/options.ts @@ -4,5 +4,8 @@ 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('./framework-preset-html'), + require.resolve('./framework-preset-html-docs'), + ], } as LoadOptions; 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__/**/*"] +} From 12f9e15e94836a44e1f92be90671c5472d0c99d5 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Mar 2022 12:30:47 +0800 Subject: [PATCH 06/17] Svelte: Add docs preset to framework --- app/svelte/package.json | 10 ++++++++-- app/svelte/src/client/docs/HOC.svelte | 7 +++++++ .../svelte => app/svelte/src/client/docs}/config.ts | 3 +++ .../svelte/src/client/docs}/extractArgTypes.test.ts | 0 .../svelte/src/client/docs}/extractArgTypes.ts | 2 +- .../client/docs}/extractComponentDescription.test.ts | 0 .../src/client/docs}/extractComponentDescription.ts | 2 +- .../svelte/src/client/docs}/prepareForInline.ts | 4 +++- .../svelte/src/client/docs}/sample/MockButton.svelte | 0 .../svelte/src/client/docs}/sourceDecorator.test.ts | 0 .../svelte/src/client/docs}/sourceDecorator.ts | 2 +- .../svelte/src/server/framework-preset-svelte-docs.ts | 9 +++++++-- app/svelte/src/server/options.ts | 5 ++++- .../svelte/src/server}/svelte-docgen-loader.ts | 2 ++ 14 files changed, 37 insertions(+), 9 deletions(-) create mode 100644 app/svelte/src/client/docs/HOC.svelte rename {addons/docs/src/frameworks/svelte => app/svelte/src/client/docs}/config.ts (79%) rename {addons/docs/src/frameworks/svelte => app/svelte/src/client/docs}/extractArgTypes.test.ts (100%) rename {addons/docs/src/frameworks/svelte => app/svelte/src/client/docs}/extractArgTypes.ts (97%) rename {addons/docs/src/frameworks/svelte => app/svelte/src/client/docs}/extractComponentDescription.test.ts (100%) rename {addons/docs/src/frameworks/svelte => app/svelte/src/client/docs}/extractComponentDescription.ts (80%) rename {addons/docs/src/frameworks/svelte => app/svelte/src/client/docs}/prepareForInline.ts (75%) rename {addons/docs/src/frameworks/svelte => app/svelte/src/client/docs}/sample/MockButton.svelte (100%) rename {addons/docs/src/frameworks/svelte => app/svelte/src/client/docs}/sourceDecorator.test.ts (100%) rename {addons/docs/src/frameworks/svelte => app/svelte/src/client/docs}/sourceDecorator.ts (98%) rename addons/docs/src/frameworks/svelte/preset.ts => app/svelte/src/server/framework-preset-svelte-docs.ts (62%) rename {addons/docs/src/frameworks/svelte => app/svelte/src/server}/svelte-docgen-loader.ts (98%) diff --git a/app/svelte/package.json b/app/svelte/package.json index 51660c347e68..54d41c4777ad 100644 --- a/app/svelte/package.json +++ b/app/svelte/package.json @@ -47,20 +47,26 @@ }, "dependencies": { "@storybook/addons": "6.5.0-alpha.47", + "@storybook/client-logger": "6.5.0-alpha.47", "@storybook/core": "6.5.0-alpha.47", "@storybook/core-common": "6.5.0-alpha.47", "@storybook/csf": "0.0.2--canary.87bc651.0", + "@storybook/docs-tools": "6.5.0-alpha.47", + "@storybook/node-logger": "6.5.0-alpha.47", "@storybook/store": "6.5.0-alpha.47", "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" 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 97% rename from addons/docs/src/frameworks/svelte/extractArgTypes.ts rename to app/svelte/src/client/docs/extractArgTypes.ts index be6dcbcd85f8..91e28729c1af 100644 --- a/addons/docs/src/frameworks/svelte/extractArgTypes.ts +++ b/app/svelte/src/client/docs/extractArgTypes.ts @@ -7,7 +7,7 @@ import type { JSDocTypeConst, } from 'sveltedoc-parser/typings'; -import type { 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 100% rename from addons/docs/src/frameworks/svelte/sourceDecorator.test.ts rename to app/svelte/src/client/docs/sourceDecorator.test.ts diff --git a/addons/docs/src/frameworks/svelte/sourceDecorator.ts b/app/svelte/src/client/docs/sourceDecorator.ts similarity index 98% rename from addons/docs/src/frameworks/svelte/sourceDecorator.ts rename to app/svelte/src/client/docs/sourceDecorator.ts index 3a98f3af22c7..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 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/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/options.ts b/app/svelte/src/server/options.ts index ee8c399d9af3..7fe93a0ea140 100644 --- a/app/svelte/src/server/options.ts +++ b/app/svelte/src/server/options.ts @@ -4,5 +4,8 @@ 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('./framework-preset-svelte.js'), + require.resolve('./framework-preset-svelte-docs.js'), + ], } as LoadOptions; 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 From 23ac884c4984aa24527b24de9964be0ee03f731f Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Mar 2022 12:36:30 +0800 Subject: [PATCH 07/17] React: Add docs preset to framework --- app/react/package.json | 18 ++++++++++++++---- .../10017-ts-union/argTypes.snapshot | 0 .../10017-ts-union/docgen.snapshot | 0 .../__testfixtures__/10017-ts-union/input.tsx | 0 .../10017-ts-union/properties.snapshot | 0 .../argTypes.snapshot | 0 .../docgen.snapshot | 0 .../10278-ts-multiple-components/input.tsx | 0 .../properties.snapshot | 0 .../8140-js-prop-types-oneof/argTypes.snapshot | 0 .../8140-js-prop-types-oneof/docgen.snapshot | 0 .../8140-js-prop-types-oneof/input.js | 0 .../properties.snapshot | 0 .../8143-ts-imported-types/argTypes.snapshot | 0 .../8143-ts-imported-types/docgen.snapshot | 0 .../8143-ts-imported-types/input.tsx | 0 .../8143-ts-imported-types/properties.snapshot | 0 .../8143-ts-imported-types/types.ts | 0 .../argTypes.snapshot | 0 .../8143-ts-react-fc-generics/docgen.snapshot | 0 .../8143-ts-react-fc-generics/input.tsx | 0 .../properties.snapshot | 0 .../8279-js-styled-docgen/argTypes.snapshot | 0 .../8279-js-styled-docgen/docgen.snapshot | 0 .../8279-js-styled-docgen/input.js | 0 .../8279-js-styled-docgen/properties.snapshot | 0 .../argTypes.snapshot | 0 .../8428-js-static-prop-types/docgen.snapshot | 0 .../8428-js-static-prop-types/input.js | 0 .../properties.snapshot | 0 .../argTypes.snapshot | 0 .../8663-js-styled-components/docgen.snapshot | 0 .../8663-js-styled-components/input.js | 0 .../properties.snapshot | 0 .../8740-ts-multi-props/argTypes.snapshot | 0 .../8740-ts-multi-props/docgen.snapshot | 0 .../8740-ts-multi-props/input.tsx | 0 .../8740-ts-multi-props/properties.snapshot | 0 .../8894-9511-ts-forward-ref/argTypes.snapshot | 0 .../8894-9511-ts-forward-ref/docgen.snapshot | 0 .../8894-9511-ts-forward-ref/input.tsx | 0 .../properties.snapshot | 0 .../9023-js-hoc/argTypes.snapshot | 0 .../9023-js-hoc/docgen.snapshot | 0 .../__testfixtures__/9023-js-hoc/input.js | 0 .../9023-js-hoc/properties.snapshot | 0 .../9399-js-proptypes-shape/argTypes.snapshot | 0 .../9399-js-proptypes-shape/docgen.snapshot | 0 .../9399-js-proptypes-shape/input.js | 0 .../properties.snapshot | 0 .../9465-ts-type-props/argTypes.snapshot | 0 .../9465-ts-type-props/docgen.snapshot | 0 .../9465-ts-type-props/input.tsx | 0 .../9465-ts-type-props/properties.snapshot | 0 .../9493-ts-display-name/argTypes.snapshot | 0 .../9493-ts-display-name/docgen.snapshot | 0 .../9493-ts-display-name/input.tsx | 0 .../9493-ts-display-name/properties.snapshot | 0 .../argTypes.snapshot | 0 .../docgen.snapshot | 0 .../9556-ts-react-default-exports/input.tsx | 0 .../properties.snapshot | 0 .../9575-ts-camel-case/argTypes.snapshot | 0 .../9575-ts-camel-case/docgen.snapshot | 0 .../9575-ts-camel-case/input.tsx | 0 .../9575-ts-camel-case/properties.snapshot | 0 .../9586-js-react-memo/argTypes.snapshot | 0 .../9586-js-react-memo/docgen.snapshot | 0 .../9586-js-react-memo/input.js | 0 .../9586-js-react-memo/properties.snapshot | 0 .../9591-ts-import-types/Bar.tsx | 0 .../9591-ts-import-types/argTypes.snapshot | 0 .../9591-ts-import-types/docgen.snapshot | 0 .../9591-ts-import-types/input.tsx | 0 .../9591-ts-import-types/properties.snapshot | 0 .../9592-ts-styled-props/argTypes.snapshot | 0 .../9592-ts-styled-props/docgen.snapshot | 0 .../9592-ts-styled-props/input.tsx | 0 .../9592-ts-styled-props/properties.snapshot | 0 .../9626-js-default-values/argTypes.snapshot | 0 .../9626-js-default-values/docgen.snapshot | 0 .../9626-js-default-values/input.js | 0 .../9626-js-default-values/properties.snapshot | 0 .../argTypes.snapshot | 0 .../9668-js-proptypes-no-jsdoc/docgen.snapshot | 0 .../9668-js-proptypes-no-jsdoc/input.js | 0 .../properties.snapshot | 0 .../9721-ts-deprecated-jsdoc/argTypes.snapshot | 0 .../9721-ts-deprecated-jsdoc/docgen.snapshot | 0 .../9721-ts-deprecated-jsdoc/input.tsx | 0 .../properties.snapshot | 0 .../9764-ts-extend-props/argTypes.snapshot | 0 .../9764-ts-extend-props/docgen.snapshot | 0 .../9764-ts-extend-props/input.tsx | 0 .../9764-ts-extend-props/properties.snapshot | 0 .../9827-ts-default-values/argTypes.snapshot | 0 .../9827-ts-default-values/docgen.snapshot | 0 .../9827-ts-default-values/input.tsx | 0 .../9827-ts-default-values/properties.snapshot | 0 .../9832-ts-enum-export/argTypes.snapshot | 0 .../9832-ts-enum-export/docgen.snapshot | 0 .../9832-ts-enum-export/input.tsx | 0 .../9832-ts-enum-export/properties.snapshot | 0 .../9922-ts-component-props/argTypes.snapshot | 0 .../9922-ts-component-props/docgen.snapshot | 0 .../9922-ts-component-props/input.tsx | 0 .../properties.snapshot | 0 .../client/docs}/__testfixtures__/imported.js | 0 .../js-class-component/argTypes.snapshot | 0 .../js-class-component/docgen.snapshot | 0 .../js-class-component/input.js | 0 .../js-class-component/properties.snapshot | 0 .../argTypes.snapshot | 0 .../docgen.snapshot | 0 .../input.js | 0 .../properties.snapshot | 0 .../argTypes.snapshot | 0 .../docgen.snapshot | 0 .../input.js | 0 .../properties.snapshot | 0 .../js-function-component/argTypes.snapshot | 0 .../js-function-component/docgen.snapshot | 0 .../js-function-component/input.js | 0 .../js-function-component/properties.snapshot | 0 .../argTypes.snapshot | 0 .../docgen.snapshot | 0 .../input.tsx | 0 .../properties.snapshot | 0 .../ts-function-component/argTypes.snapshot | 0 .../ts-function-component/docgen.snapshot | 0 .../ts-function-component/input.tsx | 0 .../ts-function-component/properties.snapshot | 0 .../react/src/client/docs}/config.ts | 6 ++++-- .../react/src/client/docs}/extractArgTypes.ts | 2 +- .../react/src/client/docs}/extractProps.ts | 6 ++++-- .../src/client/docs}/jsxDecorator.test.tsx | 2 +- .../react/src/client/docs}/jsxDecorator.tsx | 6 +++--- .../react/src/client/docs}/lib/captions.ts | 0 .../src/client/docs}/lib/componentTypes.ts | 0 .../lib/defaultValues/createDefaultValue.ts | 8 ++++++-- .../defaultValues/createFromRawDefaultProp.ts | 10 +++++++--- .../docs}/lib/defaultValues/generateArray.ts | 7 +++++-- .../docs}/lib/defaultValues/generateObject.ts | 8 ++++++-- .../client/docs}/lib/defaultValues/index.ts | 0 .../lib/defaultValues/prettyIdentifier.ts | 0 .../react/src/client/docs}/lib/generateCode.ts | 0 .../react/src/client/docs}/lib/index.ts | 0 .../docs}/lib/inspection/acornParser.test.ts | 0 .../client/docs}/lib/inspection/acornParser.ts | 0 .../src/client/docs}/lib/inspection/index.ts | 0 .../docs}/lib/inspection/inspectValue.ts | 0 .../src/client/docs}/lib/inspection/types.ts | 0 .../react/src/client/docs}/lib/isHtmlTag.ts | 0 .../src/client/docs}/propTypes/createType.ts | 8 ++++++-- .../propTypes/generateFuncSignature.test.ts | 2 +- .../docs}/propTypes/generateFuncSignature.ts | 2 +- .../client/docs}/propTypes/handleProp.test.tsx | 4 ++-- .../src/client/docs}/propTypes/handleProp.ts | 5 +++-- .../docs}/propTypes/rawDefaultPropResolvers.ts | 2 +- .../src/client/docs}/propTypes/sortProps.ts | 5 +++-- .../client/docs}/react-argtypes.stories.tsx | 6 ++++-- .../src/client/docs}/react-properties.test.ts | 8 ++++---- .../docs}/typeScript/handleProp.test.tsx | 5 +++-- .../src/client/docs}/typeScript/handleProp.ts | 2 +- .../src/server/framework-preset-react-docs.ts | 7 +++++++ app/react/src/server/preset.ts | 1 + app/react/tsconfig.json | 15 ++++----------- 167 files changed, 92 insertions(+), 53 deletions(-) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/10017-ts-union/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/10017-ts-union/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/10017-ts-union/input.tsx (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/10017-ts-union/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/10278-ts-multiple-components/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/10278-ts-multiple-components/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/10278-ts-multiple-components/input.tsx (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/10278-ts-multiple-components/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8140-js-prop-types-oneof/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8140-js-prop-types-oneof/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8140-js-prop-types-oneof/input.js (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8140-js-prop-types-oneof/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8143-ts-imported-types/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8143-ts-imported-types/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8143-ts-imported-types/input.tsx (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8143-ts-imported-types/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8143-ts-imported-types/types.ts (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8143-ts-react-fc-generics/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8143-ts-react-fc-generics/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8143-ts-react-fc-generics/input.tsx (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8143-ts-react-fc-generics/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8279-js-styled-docgen/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8279-js-styled-docgen/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8279-js-styled-docgen/input.js (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8279-js-styled-docgen/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8428-js-static-prop-types/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8428-js-static-prop-types/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8428-js-static-prop-types/input.js (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8428-js-static-prop-types/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8663-js-styled-components/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8663-js-styled-components/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8663-js-styled-components/input.js (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8663-js-styled-components/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8740-ts-multi-props/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8740-ts-multi-props/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8740-ts-multi-props/input.tsx (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8740-ts-multi-props/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8894-9511-ts-forward-ref/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8894-9511-ts-forward-ref/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8894-9511-ts-forward-ref/input.tsx (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/8894-9511-ts-forward-ref/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9023-js-hoc/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9023-js-hoc/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9023-js-hoc/input.js (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9023-js-hoc/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9399-js-proptypes-shape/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9399-js-proptypes-shape/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9399-js-proptypes-shape/input.js (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9399-js-proptypes-shape/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9465-ts-type-props/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9465-ts-type-props/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9465-ts-type-props/input.tsx (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9465-ts-type-props/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9493-ts-display-name/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9493-ts-display-name/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9493-ts-display-name/input.tsx (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9493-ts-display-name/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9556-ts-react-default-exports/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9556-ts-react-default-exports/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9556-ts-react-default-exports/input.tsx (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9556-ts-react-default-exports/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9575-ts-camel-case/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9575-ts-camel-case/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9575-ts-camel-case/input.tsx (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9575-ts-camel-case/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9586-js-react-memo/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9586-js-react-memo/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9586-js-react-memo/input.js (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9586-js-react-memo/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9591-ts-import-types/Bar.tsx (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9591-ts-import-types/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9591-ts-import-types/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9591-ts-import-types/input.tsx (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9591-ts-import-types/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9592-ts-styled-props/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9592-ts-styled-props/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9592-ts-styled-props/input.tsx (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9592-ts-styled-props/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9626-js-default-values/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9626-js-default-values/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9626-js-default-values/input.js (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9626-js-default-values/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9668-js-proptypes-no-jsdoc/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9668-js-proptypes-no-jsdoc/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9668-js-proptypes-no-jsdoc/input.js (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9668-js-proptypes-no-jsdoc/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9721-ts-deprecated-jsdoc/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9721-ts-deprecated-jsdoc/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9721-ts-deprecated-jsdoc/input.tsx (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9721-ts-deprecated-jsdoc/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9764-ts-extend-props/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9764-ts-extend-props/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9764-ts-extend-props/input.tsx (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9764-ts-extend-props/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9827-ts-default-values/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9827-ts-default-values/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9827-ts-default-values/input.tsx (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9827-ts-default-values/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9832-ts-enum-export/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9832-ts-enum-export/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9832-ts-enum-export/input.tsx (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9832-ts-enum-export/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9922-ts-component-props/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9922-ts-component-props/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9922-ts-component-props/input.tsx (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/9922-ts-component-props/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/imported.js (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/js-class-component/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/js-class-component/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/js-class-component/input.js (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/js-class-component/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/js-function-component-inline-defaults-no-propTypes/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/js-function-component-inline-defaults-no-propTypes/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/js-function-component-inline-defaults-no-propTypes/input.js (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/js-function-component-inline-defaults-no-propTypes/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/js-function-component-inline-defaults/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/js-function-component-inline-defaults/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/js-function-component-inline-defaults/input.js (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/js-function-component-inline-defaults/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/js-function-component/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/js-function-component/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/js-function-component/input.js (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/js-function-component/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/ts-function-component-inline-defaults/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/ts-function-component-inline-defaults/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/ts-function-component-inline-defaults/input.tsx (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/ts-function-component-inline-defaults/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/ts-function-component/argTypes.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/ts-function-component/docgen.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/ts-function-component/input.tsx (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/__testfixtures__/ts-function-component/properties.snapshot (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/config.ts (73%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/extractArgTypes.ts (91%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/extractProps.ts (94%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/jsxDecorator.test.tsx (99%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/jsxDecorator.tsx (97%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/lib/captions.ts (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/lib/componentTypes.ts (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/lib/defaultValues/createDefaultValue.ts (94%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/lib/defaultValues/createFromRawDefaultProp.ts (96%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/lib/defaultValues/generateArray.ts (79%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/lib/defaultValues/generateObject.ts (80%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/lib/defaultValues/index.ts (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/lib/defaultValues/prettyIdentifier.ts (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/lib/generateCode.ts (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/lib/index.ts (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/lib/inspection/acornParser.test.ts (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/lib/inspection/acornParser.ts (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/lib/inspection/index.ts (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/lib/inspection/inspectValue.ts (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/lib/inspection/types.ts (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/lib/isHtmlTag.ts (100%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/propTypes/createType.ts (98%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/propTypes/generateFuncSignature.test.ts (99%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/propTypes/generateFuncSignature.ts (93%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/propTypes/handleProp.test.tsx (99%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/propTypes/handleProp.ts (92%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/propTypes/rawDefaultPropResolvers.ts (95%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/propTypes/sortProps.ts (85%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/react-argtypes.stories.tsx (97%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/react-properties.test.ts (96%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/typeScript/handleProp.test.tsx (99%) rename {addons/docs/src/frameworks/react => app/react/src/client/docs}/typeScript/handleProp.ts (93%) create mode 100644 app/react/src/server/framework-preset-react-docs.ts diff --git a/app/react/package.json b/app/react/package.json index 389119642aeb..dc2c621e57c3 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -50,37 +50,47 @@ "@babel/preset-react": "^7.12.10", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", "@storybook/addons": "6.5.0-alpha.47", + "@storybook/client-logger": "6.5.0-alpha.47", "@storybook/core": "6.5.0-alpha.47", "@storybook/core-common": "6.5.0-alpha.47", "@storybook/csf": "0.0.2--canary.87bc651.0", + "@storybook/docs-tools": "6.5.0-alpha.47", "@storybook/node-logger": "6.5.0-alpha.47", "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0", "@storybook/semver": "^7.3.2", "@storybook/store": "6.5.0-alpha.47", + "@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.47", - "@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": { 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 73% rename from addons/docs/src/frameworks/react/config.ts rename to app/react/src/client/docs/config.ts index e2614d15b362..393befc24150 100644 --- a/addons/docs/src/frameworks/react/config.ts +++ b/app/react/src/client/docs/config.ts @@ -1,8 +1,8 @@ import type { PartialStoryFn } from '@storybook/csf'; -import type { ReactFramework } from '@storybook/react'; +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 91% rename from addons/docs/src/frameworks/react/extractArgTypes.ts rename to app/react/src/client/docs/extractArgTypes.ts index 161725abe377..333052be43e1 100644 --- a/addons/docs/src/frameworks/react/extractArgTypes.ts +++ b/app/react/src/client/docs/extractArgTypes.ts @@ -1,5 +1,5 @@ import type { StrictArgTypes } from '@storybook/csf'; -import type { PropDef, ArgTypesExtractor } from '../../lib/docgen'; +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..45796b657a45 100644 --- a/addons/docs/src/frameworks/react/propTypes/createType.ts +++ b/app/react/src/client/docs/propTypes/createType.ts @@ -1,6 +1,10 @@ import { PropType } from '@storybook/components'; -import { createSummaryValue, isTooLongForTypeSummary } from '../../../lib'; -import { ExtractedProp, DocgenPropType } from '../../../lib/docgen'; +import { + ExtractedProp, + DocgenPropType, + 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..d7ed578f7e5a 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 { generateFuncSignature, generateShortFuncSignature } from './generateFuncSignature'; -import { parseJsDoc } from '../../../lib/jsdocParser'; +import { parseJsDoc } from '@storybook/docs-tools'; 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 97% rename from addons/docs/src/frameworks/react/react-argtypes.stories.tsx rename to app/react/src/client/docs/react-argtypes.stories.tsx index 5f98016d96a3..5f9511115c8d 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); diff --git a/addons/docs/src/frameworks/react/react-properties.test.ts b/app/react/src/client/docs/react-properties.test.ts similarity index 96% rename from addons/docs/src/frameworks/react/react-properties.test.ts rename to app/react/src/client/docs/react-properties.test.ts index da14c62a9322..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 type { StoryContext } from '@storybook/react'; import type { AnyFramework } from '@storybook/csf'; -import requireFromString from 'require-from-string'; +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/server/framework-preset-react-docs.ts b/app/react/src/server/framework-preset-react-docs.ts new file mode 100644 index 000000000000..4b83b052047a --- /dev/null +++ b/app/react/src/server/framework-preset-react-docs.ts @@ -0,0 +1,7 @@ +import type { StorybookConfig } from '@storybook/core-common'; +import { findDistEsm } from '@storybook/core-common'; + +export const config: StorybookConfig['config'] = (entry = [], options) => { + console.log({ options }); + return [...entry, findDistEsm(__dirname, 'client/docs/config')]; +}; diff --git a/app/react/src/server/preset.ts b/app/react/src/server/preset.ts index 4370c920f60e..aa847f76bef0 100644 --- a/app/react/src/server/preset.ts +++ b/app/react/src/server/preset.ts @@ -10,4 +10,5 @@ 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__/**"] +} From 3a2114317216a959cff1596e9c7c3726a366982e Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Mar 2022 12:37:52 +0800 Subject: [PATCH 08/17] Vue: Move docs preset to framework --- app/vue/package.json | 3 + app/vue/src/client/docs/config.ts | 19 ++ .../vue/src/client/docs}/extractArgTypes.ts | 5 +- app/vue/src/client/docs/prepareForInline.ts | 39 +++ .../src/client/docs}/sourceDecorator.test.ts | 0 app/vue/src/client/docs/sourceDecorator.ts | 242 ++++++++++++++++++ .../vue/src/client/preview/docs}/config.ts | 6 +- .../client/preview/docs/extractArgTypes.ts | 86 +++++++ .../client/preview/docs}/prepareForInline.ts | 2 +- .../preview/docs/sourceDecorator.test.ts | 144 +++++++++++ .../client/preview/docs}/sourceDecorator.ts | 5 +- .../src/server/framework-preset-vue-docs.ts | 6 +- app/vue/src/server/options.ts | 5 +- .../src/stories/addon-docs.stories.mdx | 4 +- .../src/stories/components/app.stories.js | 2 +- 15 files changed, 556 insertions(+), 12 deletions(-) create mode 100644 app/vue/src/client/docs/config.ts rename {addons/docs/src/frameworks/vue => app/vue/src/client/docs}/extractArgTypes.ts (92%) create mode 100644 app/vue/src/client/docs/prepareForInline.ts rename {addons/docs/src/frameworks/vue => app/vue/src/client/docs}/sourceDecorator.test.ts (100%) create mode 100644 app/vue/src/client/docs/sourceDecorator.ts rename {addons/docs/src/frameworks/vue => app/vue/src/client/preview/docs}/config.ts (72%) create mode 100644 app/vue/src/client/preview/docs/extractArgTypes.ts rename {addons/docs/src/frameworks/vue => app/vue/src/client/preview/docs}/prepareForInline.ts (95%) create mode 100644 app/vue/src/client/preview/docs/sourceDecorator.test.ts rename {addons/docs/src/frameworks/vue => app/vue/src/client/preview/docs}/sourceDecorator.ts (97%) rename addons/docs/src/frameworks/vue/preset.ts => app/vue/src/server/framework-preset-vue-docs.ts (77%) diff --git a/app/vue/package.json b/app/vue/package.json index a04a7959c622..93d8141cd50e 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -46,14 +46,17 @@ }, "dependencies": { "@storybook/addons": "6.5.0-alpha.47", + "@storybook/client-logger": "6.5.0-alpha.47", "@storybook/core": "6.5.0-alpha.47", "@storybook/core-common": "6.5.0-alpha.47", "@storybook/csf": "0.0.2--canary.87bc651.0", + "@storybook/docs-tools": "6.5.0-alpha.47", "@storybook/store": "6.5.0-alpha.47", "@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", diff --git a/app/vue/src/client/docs/config.ts b/app/vue/src/client/docs/config.ts new file mode 100644 index 000000000000..fe69d10e31d8 --- /dev/null +++ b/app/vue/src/client/docs/config.ts @@ -0,0 +1,19 @@ +import { extractComponentDescription, enhanceArgTypes } from '@storybook/docs-tools'; +import { extractArgTypes } from './extractArgTypes'; +import { prepareForInline } from './prepareForInline'; +import { sourceDecorator } from './sourceDecorator'; + +export const parameters = { + foobar: 'baz', + docs: { + inlineStories: true, + iframeHeight: 120, + prepareForInline, + extractArgTypes, + extractComponentDescription, + }, +}; + +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 92% rename from addons/docs/src/frameworks/vue/extractArgTypes.ts rename to app/vue/src/client/docs/extractArgTypes.ts index 2df96363b274..92a9f113e9c0 100644 --- a/addons/docs/src/frameworks/vue/extractArgTypes.ts +++ b/app/vue/src/client/docs/extractArgTypes.ts @@ -1,7 +1,6 @@ import type { StrictArgTypes } from '@storybook/csf'; -import { hasDocgen, extractComponentProps } from '../../lib/docgen'; -import type { ArgTypesExtractor, DocgenInfo, PropDef } from '../../lib/docgen'; -import { convert } from '../../lib/convert'; +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/app/vue/src/client/docs/prepareForInline.ts b/app/vue/src/client/docs/prepareForInline.ts new file mode 100644 index 000000000000..f9c4fa176456 --- /dev/null +++ b/app/vue/src/client/docs/prepareForInline.ts @@ -0,0 +1,39 @@ +import React from 'react'; +import Vue from '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 + +// FIXME get this from @storybook/vue +const COMPONENT = 'STORYBOOK_COMPONENT'; +const VALUES = 'STORYBOOK_VALUES'; + +export const prepareForInline = ( + storyFn: PartialStoryFn, + { args }: StoryContext +) => { + const component = storyFn(); + const el = React.useRef(null); + + // FIXME: This recreates the Vue instance every time, which should be optimized + React.useEffect(() => { + const root = new Vue({ + el: el.current, + data() { + return { + [COMPONENT]: component, + [VALUES]: args, + }; + }, + render(h) { + const children = this[COMPONENT] ? [h(this[COMPONENT])] : undefined; + return h('div', { attrs: { id: 'root' } }, children); + }, + }); + return () => root.$destroy(); + }); + + return React.createElement('div', null, React.createElement('div', { ref: el })); +}; 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/app/vue/src/client/docs/sourceDecorator.ts b/app/vue/src/client/docs/sourceDecorator.ts new file mode 100644 index 000000000000..534426b1cbd9 --- /dev/null +++ b/app/vue/src/client/docs/sourceDecorator.ts @@ -0,0 +1,242 @@ +/* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */ + +import type { StoryContext } from '@storybook/csf'; +import { addons } from '@storybook/addons'; +import { logger } from '@storybook/client-logger'; +import type Vue from 'vue'; + +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; + const isArgsStory = context?.parameters.__isArgsStory; + + // always render if the user forces it + if (sourceParams?.type === SourceType.DYNAMIC) { + return false; + } + + // never render if the user is forcing the block to render code, or + // if the user provides code, or if it's not an args story. + return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE; +}; + +export const sourceDecorator = (storyFn: any, context: StoryContext) => { + const story = storyFn(); + console.log({ story }); + + // See ../react/jsxDecorator.tsx + if (skipSourceRender(context)) { + return story; + } + + const channel = addons.getChannel(); + + const storyComponent = getStoryComponent(story.options.STORYBOOK_WRAPS); + + return { + components: { + Story: story, + }, + // We need to wait until the wrapper component to be mounted so Vue runtime + // struct VNode tree. We get `this._vnode == null` if switch to `created` + // lifecycle hook. + mounted() { + // Theoretically this does not happens but we need to check it. + if (!this._vnode) { + return; + } + + try { + const storyNode = lookupStoryInstance(this, storyComponent); + + const code = vnodeToString(storyNode._vnode); + + const emitFormattedTemplate = async () => { + const prettier = await import('prettier/standalone'); + const prettierHtml = await import('prettier/parser-html'); + + channel.emit( + SNIPPET_RENDERED, + (context || {}).id, + prettier.format(``, { + parser: 'vue', + plugins: [prettierHtml], + // Because the parsed vnode missing spaces right before/after the surround tag, + // we always get weird wrapped code without this option. + htmlWhitespaceSensitivity: 'ignore', + }) + ); + }; + + emitFormattedTemplate(); + } catch (e) { + logger.warn(`Failed to generate dynamic story source: ${e}`); + } + }, + template: '', + }; +}; + +export function vnodeToString(vnode: Vue.VNode): string { + const attrString = [ + ...(vnode.data?.slot ? ([['slot', vnode.data.slot]] as [string, any][]) : []), + ['class', stringifyClassAttribute(vnode)], + ...(vnode.componentOptions?.propsData ? Object.entries(vnode.componentOptions.propsData) : []), + ...(vnode.data?.attrs ? Object.entries(vnode.data.attrs) : []), + ] + .filter(([name], index, list) => list.findIndex((item) => item[0] === name) === index) + .map(([name, value]) => stringifyAttr(name, value)) + .filter(Boolean) + .join(' '); + + if (!vnode.componentOptions) { + // Non-component elements (div, span, etc...) + if (vnode.tag) { + if (!vnode.children) { + return `<${vnode.tag} ${attrString}/>`; + } + + return `<${vnode.tag} ${attrString}>${vnode.children.map(vnodeToString).join('')}`; + } + + // TextNode + if (vnode.text) { + if (/[<>"&]/.test(vnode.text)) { + return `{{\`${vnode.text.replace(/`/g, '\\`')}\`}}`; + } + + return vnode.text; + } + + // Unknown + return ''; + } + + // Probably users never see the "unknown-component". It seems that vnode.tag + // is always set. + const tag = vnode.componentOptions.tag || vnode.tag || 'unknown-component'; + + if (!vnode.componentOptions.children) { + return `<${tag} ${attrString}/>`; + } + + return `<${tag} ${attrString}>${vnode.componentOptions.children + .map(vnodeToString) + .join('')}`; +} + +function stringifyClassAttribute(vnode: Vue.VNode): string | undefined { + if (!vnode.data || (!vnode.data.staticClass && !vnode.data.class)) { + return undefined; + } + + return ( + [...(vnode.data.staticClass?.split(' ') ?? []), ...normalizeClassBinding(vnode.data.class)] + .filter(Boolean) + .join(' ') || undefined + ); +} + +// https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes +function normalizeClassBinding(binding: unknown): readonly string[] { + if (!binding) { + return []; + } + + if (typeof binding === 'string') { + return [binding]; + } + + if (binding instanceof Array) { + // To handle an object-in-array binding smartly, we use recursion + return binding.map(normalizeClassBinding).reduce((a, b) => [...a, ...b], []); + } + + if (typeof binding === 'object') { + return Object.entries(binding) + .filter(([, active]) => !!active) + .map(([className]) => className); + } + + // Unknown class binding + return []; +} + +function stringifyAttr(attrName: string, value?: any): string | null { + if (typeof value === 'undefined' || typeof value === 'function') { + return null; + } + + if (value === true) { + return attrName; + } + + if (typeof value === 'string') { + return `${attrName}=${quote(value)}`; + } + + // TODO: Better serialization (unquoted object key, Symbol/Classes, etc...) + // Seems like Prettier don't format JSON-look object (= when keys are quoted) + return `:${attrName}=${quote(JSON.stringify(value))}`; +} + +function quote(value: string) { + return value.includes(`"`) && !value.includes(`'`) + ? `'${value}'` + : `"${value.replace(/"/g, '"')}"`; +} + +/** + * Skip decorators and grab a story component itself. + * https://github.com/pocka/storybook-addon-vue-info/pull/113 + */ +function getStoryComponent(w: any) { + let matched = w; + + while ( + matched && + matched.options && + matched.options.components && + matched.options.components.story && + matched.options.components.story.options && + matched.options.components.story.options.STORYBOOK_WRAPS + ) { + matched = matched.options.components.story.options.STORYBOOK_WRAPS; + } + return matched; +} + +interface VueInternal { + // We need to access this private property, in order to grab the vnode of the + // component instead of the "vnode of the parent of the component". + // Probably it's safe to rely on this because vm.$vnode is a reference for this. + // https://github.com/vuejs/vue/issues/6070#issuecomment-314389883 + _vnode: Vue.VNode; +} + +/** + * Find the story's instance from VNode tree. + */ +function lookupStoryInstance(instance: Vue, storyComponent: any): (Vue & VueInternal) | null { + if ( + instance.$vnode && + instance.$vnode.componentOptions && + instance.$vnode.componentOptions.Ctor === storyComponent + ) { + return instance as Vue & VueInternal; + } + + for (let i = 0, l = instance.$children.length; i < l; i += 1) { + const found = lookupStoryInstance(instance.$children[i], storyComponent); + + if (found) { + return found; + } + } + + return null; +} diff --git a/addons/docs/src/frameworks/vue/config.ts b/app/vue/src/client/preview/docs/config.ts similarity index 72% rename from addons/docs/src/frameworks/vue/config.ts rename to app/vue/src/client/preview/docs/config.ts index a5e41a726139..225bf3a0d254 100644 --- a/addons/docs/src/frameworks/vue/config.ts +++ b/app/vue/src/client/preview/docs/config.ts @@ -1,11 +1,15 @@ +import { extractComponentDescription } from '@storybook/docs-tools'; import { extractArgTypes } from './extractArgTypes'; -import { extractComponentDescription } from '../../lib/docgen'; import { prepareForInline } from './prepareForInline'; import { sourceDecorator } from './sourceDecorator'; +console.log('hello2'); + export const parameters = { + foobar: 'baz', docs: { inlineStories: true, + iframeHeight: 120, prepareForInline, extractArgTypes, extractComponentDescription, diff --git a/app/vue/src/client/preview/docs/extractArgTypes.ts b/app/vue/src/client/preview/docs/extractArgTypes.ts new file mode 100644 index 000000000000..92a9f113e9c0 --- /dev/null +++ b/app/vue/src/client/preview/docs/extractArgTypes.ts @@ -0,0 +1,86 @@ +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']; + +/** + * Check if "@values" tag is defined within docgenInfo. + * If true, then propDef is mutated. + */ +function isEnum(propDef: PropDef, docgenInfo: DocgenInfo): false | PropDef { + // cast as any, since "values" doesn't exist in DocgenInfo type + const { type, values } = docgenInfo as any; + const matched = Array.isArray(values) && values.length && type.name !== 'enum'; + + if (!matched) return false; + + const enumString = values.join(', '); + let { summary } = propDef.type; + summary = summary ? `${summary}: ${enumString}` : enumString; + + Object.assign(propDef.type, { + ...propDef.type, + name: 'enum', + value: values, + summary, + }); + return propDef; +} + +/** + * @returns {Array} result + * @returns {PropDef} result.def - propDef + * @returns {boolean} result.isChanged - flag whether propDef is mutated or not. + * this is needed to prevent sbType from performing convert(docgenInfo). + */ +function verifyPropDef(propDef: PropDef, docgenInfo: DocgenInfo): [PropDef, boolean] { + let def = propDef; + let isChanged = false; + + // another callback can be added here. + // callback is mutually exclusive from each other. + const callbacks = [isEnum]; + for (let i = 0, len = callbacks.length; i < len; i += 1) { + const matched = callbacks[i](propDef, docgenInfo); + if (matched) { + def = matched; + isChanged = true; + } + } + + return [def, isChanged]; +} + +export const extractArgTypes: ArgTypesExtractor = (component) => { + if (!hasDocgen(component)) { + return null; + } + const results: StrictArgTypes = {}; + SECTIONS.forEach((section) => { + const props = extractComponentProps(component, section); + props.forEach(({ propDef, docgenInfo, jsDocTags }) => { + const [result, isPropDefChanged] = verifyPropDef(propDef, docgenInfo); + const { name, type, description, defaultValue: defaultSummary, required } = result; + + let sbType; + if (isPropDefChanged) { + sbType = type; + } else { + sbType = section === 'props' ? convert(docgenInfo) : { name: 'void' }; + } + results[name] = { + name, + description, + type: { required, ...sbType }, + table: { + type, + jsDocTags, + defaultValue: defaultSummary, + category: section, + }, + }; + }); + }); + return results; +}; diff --git a/addons/docs/src/frameworks/vue/prepareForInline.ts b/app/vue/src/client/preview/docs/prepareForInline.ts similarity index 95% rename from addons/docs/src/frameworks/vue/prepareForInline.ts rename to app/vue/src/client/preview/docs/prepareForInline.ts index 151710fcb503..3696a6bb7687 100644 --- a/addons/docs/src/frameworks/vue/prepareForInline.ts +++ b/app/vue/src/client/preview/docs/prepareForInline.ts @@ -1,7 +1,7 @@ import React from 'react'; import Vue from 'vue'; import type { StoryContext, PartialStoryFn } from '@storybook/csf'; -import type { VueFramework } from '@storybook/vue'; +import type { VueFramework } from '../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/app/vue/src/client/preview/docs/sourceDecorator.test.ts b/app/vue/src/client/preview/docs/sourceDecorator.test.ts new file mode 100644 index 000000000000..54695c1ea84f --- /dev/null +++ b/app/vue/src/client/preview/docs/sourceDecorator.test.ts @@ -0,0 +1,144 @@ +/* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */ + +import { ComponentOptions } from 'vue'; +import Vue from 'vue/dist/vue'; +import { vnodeToString } from './sourceDecorator'; + +expect.addSnapshotSerializer({ + print: (val: any) => val, + test: (val) => typeof val === 'string', +}); + +const getVNode = (Component: ComponentOptions) => { + const vm = new Vue({ + render(h: (c: any) => unknown) { + return h(Component); + }, + }).$mount(); + + return vm.$children[0]._vnode; +}; + +describe('vnodeToString', () => { + it('basic', () => { + expect( + vnodeToString( + getVNode({ + template: ``, + }) + ) + ).toMatchInlineSnapshot(``); + }); + + it('static class', () => { + expect( + vnodeToString( + getVNode({ + template: ``, + }) + ) + ).toMatchInlineSnapshot(``); + }); + + it('string dynamic class', () => { + expect( + vnodeToString( + getVNode({ + template: ``, + }) + ) + ).toMatchInlineSnapshot(``); + }); + + it('non-string dynamic class', () => { + expect( + vnodeToString( + getVNode({ + template: ``, + }) + ) + ).toMatchInlineSnapshot(``); + }); + + it('array dynamic class', () => { + expect( + vnodeToString( + getVNode({ + template: ``, + }) + ) + ).toMatchInlineSnapshot(``); + }); + + it('object dynamic class', () => { + expect( + vnodeToString( + getVNode({ + template: ``, + }) + ) + ).toMatchInlineSnapshot(``); + }); + + it('merge dynamic and static classes', () => { + expect( + vnodeToString( + getVNode({ + template: ``, + }) + ) + ).toMatchInlineSnapshot(``); + }); + + it('attributes', () => { + const MyComponent: ComponentOptions = { + props: ['propA', 'propB', 'propC', 'propD', 'propE', 'propF', 'propG'], + template: '
', + }; + + expect( + vnodeToString( + getVNode({ + components: { MyComponent }, + data(): { props: Record } { + return { + props: { + propA: 'propA', + propB: 1, + propC: null, + propD: { + foo: 'bar', + }, + propE: true, + propF() { + const foo = 'bar'; + + return foo; + }, + propG: undefined, + }, + }; + }, + template: ``, + }) + ) + ).toMatchInlineSnapshot( + `` + ); + }); + + it('children', () => { + expect( + vnodeToString( + getVNode({ + template: ` +
+
+ +
+
`, + }) + ) + ).toMatchInlineSnapshot(`
`); + }); +}); diff --git a/addons/docs/src/frameworks/vue/sourceDecorator.ts b/app/vue/src/client/preview/docs/sourceDecorator.ts similarity index 97% rename from addons/docs/src/frameworks/vue/sourceDecorator.ts rename to app/vue/src/client/preview/docs/sourceDecorator.ts index 3a8f49c399d1..38eed0d20ff7 100644 --- a/addons/docs/src/frameworks/vue/sourceDecorator.ts +++ b/app/vue/src/client/preview/docs/sourceDecorator.ts @@ -4,9 +4,9 @@ import type { StoryContext } from '@storybook/csf'; import { addons } from '@storybook/addons'; import { logger } from '@storybook/client-logger'; import type Vue from 'vue'; -import type { VueFramework } from '@storybook/vue'; -import { SourceType, SNIPPET_RENDERED } from '../../shared'; +import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools'; +import type { VueFramework } from '../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/addons/docs/src/frameworks/vue/preset.ts b/app/vue/src/server/framework-preset-vue-docs.ts similarity index 77% rename from addons/docs/src/frameworks/vue/preset.ts rename to app/vue/src/server/framework-preset-vue-docs.ts index 5650c588cc67..86730dbf779f 100644 --- a/addons/docs/src/frameworks/vue/preset.ts +++ b/app/vue/src/server/framework-preset-vue-docs.ts @@ -1,4 +1,4 @@ -import type { Options } from '@storybook/core-common'; +import { findDistEsm, Options, StorybookConfig } from '@storybook/core-common'; export function webpackFinal(webpackConfig: any = {}, options: Options) { let vueDocgenOptions = {}; @@ -26,3 +26,7 @@ export function webpackFinal(webpackConfig: any = {}, options: Options) { }); return webpackConfig; } + +export const config: StorybookConfig['config'] = (entry = []) => { + return [...entry, findDistEsm(__dirname, 'client/docs/config')]; +}; diff --git a/app/vue/src/server/options.ts b/app/vue/src/server/options.ts index e57b04994811..acb669ab4096 100644 --- a/app/vue/src/server/options.ts +++ b/app/vue/src/server/options.ts @@ -4,5 +4,8 @@ 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('./framework-preset-vue.js'), + require.resolve('./framework-preset-vue-docs.js'), + ], } as LoadOptions; diff --git a/examples/vue-kitchen-sink/src/stories/addon-docs.stories.mdx b/examples/vue-kitchen-sink/src/stories/addon-docs.stories.mdx index 62481f719b8a..5c0fb992edba 100644 --- a/examples/vue-kitchen-sink/src/stories/addon-docs.stories.mdx +++ b/examples/vue-kitchen-sink/src/stories/addon-docs.stories.mdx @@ -69,11 +69,11 @@ The default configuration for `addon-docs/vue` implements the `prepareForInline` To provide a tangible example of the inline/iframe rendering contexts, here's the same story rendered both ways. - + - + The biggest win here is that we don't have to worry about setting the height anymore. The story can calculate its height like any other inline element. As you can see, several of the stories on this page are quite small, but take up `500px`, because that's the default story height, and we didn't tweak the story to be an explicit height. Another huge gain here is in terms of performance. Using an iframe to render a single element is definitely unnecessary in most cases and, as you may have noticed while reading this page, can _really_ cause page performance to suffer. diff --git a/examples/vue-kitchen-sink/src/stories/components/app.stories.js b/examples/vue-kitchen-sink/src/stories/components/app.stories.js index 8f957aa35913..e58a19f78b05 100644 --- a/examples/vue-kitchen-sink/src/stories/components/app.stories.js +++ b/examples/vue-kitchen-sink/src/stories/components/app.stories.js @@ -11,4 +11,4 @@ export default { export const Default = () => ({ render: (h) => h(App), }); -Default.storyName = 'App'; +// Default.storyName = 'App'; From e6f379d8c5337fbbde19028a65f5568aad9e80be Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Mar 2022 12:38:18 +0800 Subject: [PATCH 09/17] Vue3: Move docs preset to framework --- app/vue3/package.json | 1 + .../frameworks/vue3 => app/vue3/src/client/docs}/config.ts | 4 +++- .../vue3 => app/vue3/src/client/docs}/extractArgTypes.ts | 5 ++--- .../vue3 => app/vue3/src/client/docs}/prepareForInline.ts | 5 ++--- .../vue3/src/server/framework-preset-vue3-docs.ts | 6 +++++- app/vue3/src/server/options.ts | 5 ++++- 6 files changed, 17 insertions(+), 9 deletions(-) rename {addons/docs/src/frameworks/vue3 => app/vue3/src/client/docs}/config.ts (64%) rename {addons/docs/src/frameworks/vue3 => app/vue3/src/client/docs}/extractArgTypes.ts (83%) rename {addons/docs/src/frameworks/vue3 => app/vue3/src/client/docs}/prepareForInline.ts (82%) rename addons/docs/src/frameworks/vue3/preset.ts => app/vue3/src/server/framework-preset-vue3-docs.ts (77%) diff --git a/app/vue3/package.json b/app/vue3/package.json index 16dfdc7f4dbf..cea9439315a1 100644 --- a/app/vue3/package.json +++ b/app/vue3/package.json @@ -49,6 +49,7 @@ "@storybook/core": "6.5.0-alpha.47", "@storybook/core-common": "6.5.0-alpha.47", "@storybook/csf": "0.0.2--canary.87bc651.0", + "@storybook/docs-tools": "6.5.0-alpha.47", "@storybook/store": "6.5.0-alpha.47", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", 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 83% rename from addons/docs/src/frameworks/vue3/extractArgTypes.ts rename to app/vue3/src/client/docs/extractArgTypes.ts index ef05e29c8467..c7a3e4199598 100644 --- a/addons/docs/src/frameworks/vue3/extractArgTypes.ts +++ b/app/vue3/src/client/docs/extractArgTypes.ts @@ -1,7 +1,6 @@ import type { StrictArgTypes } from '@storybook/csf'; -import { hasDocgen, extractComponentProps } from '../../lib/docgen'; -import type { ArgTypesExtractor } from '../../lib/docgen'; -import { convert } from '../../lib/convert'; +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 82% rename from addons/docs/src/frameworks/vue3/prepareForInline.ts rename to app/vue3/src/client/docs/prepareForInline.ts index 3c41236f9443..155f9253b83d 100644 --- a/addons/docs/src/frameworks/vue3/prepareForInline.ts +++ b/app/vue3/src/client/docs/prepareForInline.ts @@ -1,8 +1,7 @@ import React from 'react'; import * as Vue from 'vue'; -import { app } from '@storybook/vue3'; -import type { StoryContext, PartialStoryFn } from '@storybook/csf'; -import type { VueFramework } from '@storybook/vue3'; +import { StoryContext, PartialStoryFn } from '@storybook/csf'; +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/addons/docs/src/frameworks/vue3/preset.ts b/app/vue3/src/server/framework-preset-vue3-docs.ts similarity index 77% rename from addons/docs/src/frameworks/vue3/preset.ts rename to app/vue3/src/server/framework-preset-vue3-docs.ts index c8e044caf8e2..f830fcf96d95 100644 --- a/addons/docs/src/frameworks/vue3/preset.ts +++ b/app/vue3/src/server/framework-preset-vue3-docs.ts @@ -1,4 +1,4 @@ -import type { Options } from '@storybook/core-common'; +import { findDistEsm, Options, StorybookConfig } from '@storybook/core-common'; export function webpackFinal(webpackConfig: any = {}, options: Options) { let vueDocgenOptions = {}; @@ -26,3 +26,7 @@ export function webpackFinal(webpackConfig: any = {}, options: Options) { }); return webpackConfig; } + +export const config: StorybookConfig['config'] = (entry = []) => { + return [...entry, findDistEsm(__dirname, 'client/docs/config')]; +}; diff --git a/app/vue3/src/server/options.ts b/app/vue3/src/server/options.ts index 6cd0f3261d0a..f649466ece9b 100644 --- a/app/vue3/src/server/options.ts +++ b/app/vue3/src/server/options.ts @@ -4,5 +4,8 @@ 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('./framework-preset-vue3'), + require.resolve('./framework-preset-vue3-docs'), + ], } as LoadOptions; From 32e4de9c941808a91e13de547ad2f98cd04dfcb7 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Mar 2022 12:39:32 +0800 Subject: [PATCH 10/17] Web-components: Move docs preset to framework --- app/web-components/package.json | 2 + .../__testfixtures__/custom-elements.json | 0 .../custom-elements.snapshot | 0 .../lit-element-demo-card/input.js | 0 .../lit-element-demo-card/properties.snapshot | 0 .../lit-html-welcome/custom-elements.snapshot | 0 .../lit-html-welcome/input.js | 0 .../lit-html-welcome/properties.snapshot | 0 .../web-components/src/client/docs}/config.ts | 4 +- .../src/client/docs}/custom-elements.test.ts | 0 .../src/client/docs}/custom-elements.ts | 2 +- .../src/client/docs}/prepareForInline.ts | 4 +- .../src/client/docs}/sourceDecorator.test.ts | 2 +- .../src/client/docs}/sourceDecorator.ts | 4 +- .../docs}/web-components-properties.test.ts | 0 .../framework-preset-web-components-docs.ts | 6 + app/web-components/src/server/options.ts | 5 +- app/web-components/tsconfig.json | 15 +- .../web-components-kitchen-sink/package.json | 1 + .../web-components-kitchen-sink/yarn.lock | 433 +++++++----------- 20 files changed, 196 insertions(+), 282 deletions(-) rename {addons/docs/src/frameworks/web-components => app/web-components/src/client/docs}/__testfixtures__/custom-elements.json (100%) rename {addons/docs/src/frameworks/web-components => app/web-components/src/client/docs}/__testfixtures__/lit-element-demo-card/custom-elements.snapshot (100%) rename {addons/docs/src/frameworks/web-components => app/web-components/src/client/docs}/__testfixtures__/lit-element-demo-card/input.js (100%) rename {addons/docs/src/frameworks/web-components => app/web-components/src/client/docs}/__testfixtures__/lit-element-demo-card/properties.snapshot (100%) rename {addons/docs/src/frameworks/web-components => app/web-components/src/client/docs}/__testfixtures__/lit-html-welcome/custom-elements.snapshot (100%) rename {addons/docs/src/frameworks/web-components => app/web-components/src/client/docs}/__testfixtures__/lit-html-welcome/input.js (100%) rename {addons/docs/src/frameworks/web-components => app/web-components/src/client/docs}/__testfixtures__/lit-html-welcome/properties.snapshot (100%) rename {addons/docs/src/frameworks/web-components => app/web-components/src/client/docs}/config.ts (79%) rename {addons/docs/src/frameworks/web-components => app/web-components/src/client/docs}/custom-elements.test.ts (100%) rename {addons/docs/src/frameworks/web-components => app/web-components/src/client/docs}/custom-elements.ts (99%) rename {addons/docs/src/frameworks/web-components => app/web-components/src/client/docs}/prepareForInline.ts (89%) rename {addons/docs/src/frameworks/web-components => app/web-components/src/client/docs}/sourceDecorator.test.ts (98%) rename {addons/docs/src/frameworks/web-components => app/web-components/src/client/docs}/sourceDecorator.ts (92%) rename {addons/docs/src/frameworks/web-components => app/web-components/src/client/docs}/web-components-properties.test.ts (100%) create mode 100644 app/web-components/src/server/framework-preset-web-components-docs.ts diff --git a/app/web-components/package.json b/app/web-components/package.json index 697d491c1855..1f9a52193e49 100644 --- a/app/web-components/package.json +++ b/app/web-components/package.json @@ -52,9 +52,11 @@ "@babel/preset-env": "^7.12.11", "@storybook/addons": "6.5.0-alpha.47", "@storybook/client-api": "6.5.0-alpha.47", + "@storybook/client-logger": "6.5.0-alpha.47", "@storybook/core": "6.5.0-alpha.47", "@storybook/core-common": "6.5.0-alpha.47", "@storybook/csf": "0.0.2--canary.87bc651.0", + "@storybook/docs-tools": "6.5.0-alpha.47", "@storybook/preview-web": "6.5.0-alpha.47", "@storybook/store": "6.5.0-alpha.47", "@types/node": "^14.14.20 || ^16.0.0", 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 100% 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 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 99% rename from addons/docs/src/frameworks/web-components/custom-elements.ts rename to app/web-components/src/client/docs/custom-elements.ts index 2959f1b72312..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 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 98% rename from addons/docs/src/frameworks/web-components/sourceDecorator.test.ts rename to app/web-components/src/client/docs/sourceDecorator.test.ts index 3e97052855d6..9b900bfb83aa 100644 --- a/addons/docs/src/frameworks/web-components/sourceDecorator.test.ts +++ b/app/web-components/src/client/docs/sourceDecorator.test.ts @@ -2,8 +2,8 @@ import { html } from 'lit-html'; import { styleMap } from 'lit-html/directives/style-map'; 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 92% rename from addons/docs/src/frameworks/web-components/sourceDecorator.ts rename to app/web-components/src/client/docs/sourceDecorator.ts index 91c7aeca9f67..e321db557ac9 100644 --- a/addons/docs/src/frameworks/web-components/sourceDecorator.ts +++ b/app/web-components/src/client/docs/sourceDecorator.ts @@ -2,9 +2,9 @@ import { render } from 'lit-html'; import type { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/csf'; import { addons, useEffect } from '@storybook/addons'; -import type { 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/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..3b8f15d9bc06 --- /dev/null +++ b/app/web-components/src/server/framework-preset-web-components-docs.ts @@ -0,0 +1,6 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { findDistEsm, StorybookConfig } from '@storybook/core-common'; + +export const config: StorybookConfig['config'] = (entry = []) => { + return [...entry, findDistEsm(__dirname, 'client/docs/config')]; +}; diff --git a/app/web-components/src/server/options.ts b/app/web-components/src/server/options.ts index 8b40200e0ac2..b70f09694263 100644 --- a/app/web-components/src/server/options.ts +++ b/app/web-components/src/server/options.ts @@ -4,5 +4,8 @@ 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('./framework-preset-web-components'), + require.resolve('./framework-preset-web-components-docs'), + ], } as LoadOptions; 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/examples/web-components-kitchen-sink/package.json b/examples/web-components-kitchen-sink/package.json index 06de0008b15d..19d274a6aa21 100644 --- a/examples/web-components-kitchen-sink/package.json +++ b/examples/web-components-kitchen-sink/package.json @@ -40,6 +40,7 @@ "@storybook/core-events": "portal:../../lib/core-events", "@storybook/core-server": "portal:../../lib/core-server", "@storybook/csf-tools": "portal:../../lib/csf-tools", + "@storybook/docs-tools": "portal:../../lib/docs-tools", "@storybook/jest": "^0.0.5", "@storybook/manager-webpack4": "portal:../../lib/manager-webpack4", "@storybook/node-logger": "portal:../../lib/node-logger", diff --git a/examples/web-components-kitchen-sink/yarn.lock b/examples/web-components-kitchen-sink/yarn.lock index 61c88f1f068f..ed91380c35f1 100644 --- a/examples/web-components-kitchen-sink/yarn.lock +++ b/examples/web-components-kitchen-sink/yarn.lock @@ -1686,13 +1686,6 @@ __metadata: languageName: node linkType: hard -"@base2/pretty-print-object@npm:1.0.1": - version: 1.0.1 - resolution: "@base2/pretty-print-object@npm:1.0.1" - checksum: 98f77ea185a30c854897feb2a68fe51be8451a1a0b531bac61a5dd67033926a0ba0c9be6e0f819b8cb72ca349b3e7648bf81c12fd21df0b45219c75a3a75784b - languageName: node - linkType: hard - "@bcoe/v8-coverage@npm:^0.2.3": version: 0.2.3 resolution: "@bcoe/v8-coverage@npm:0.2.3" @@ -2121,14 +2114,14 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-a11y@portal:../../addons/a11y::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.46 - "@storybook/api": 6.5.0-alpha.46 - "@storybook/channels": 6.5.0-alpha.46 - "@storybook/client-logger": 6.5.0-alpha.46 - "@storybook/components": 6.5.0-alpha.46 - "@storybook/core-events": 6.5.0-alpha.46 + "@storybook/addons": 6.5.0-alpha.47 + "@storybook/api": 6.5.0-alpha.47 + "@storybook/channels": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 + "@storybook/components": 6.5.0-alpha.47 + "@storybook/core-events": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/theming": 6.5.0-alpha.46 + "@storybook/theming": 6.5.0-alpha.47 axe-core: ^4.2.0 core-js: ^3.8.2 global: ^4.4.0 @@ -2152,12 +2145,12 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-actions@portal:../../addons/actions::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.46 - "@storybook/api": 6.5.0-alpha.46 - "@storybook/components": 6.5.0-alpha.46 - "@storybook/core-events": 6.5.0-alpha.46 + "@storybook/addons": 6.5.0-alpha.47 + "@storybook/api": 6.5.0-alpha.47 + "@storybook/components": 6.5.0-alpha.47 + "@storybook/core-events": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/theming": 6.5.0-alpha.46 + "@storybook/theming": 6.5.0-alpha.47 core-js: ^3.8.2 fast-deep-equal: ^3.1.3 global: ^4.4.0 @@ -2185,13 +2178,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-backgrounds@portal:../../addons/backgrounds::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.46 - "@storybook/api": 6.5.0-alpha.46 - "@storybook/client-logger": 6.5.0-alpha.46 - "@storybook/components": 6.5.0-alpha.46 - "@storybook/core-events": 6.5.0-alpha.46 + "@storybook/addons": 6.5.0-alpha.47 + "@storybook/api": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 + "@storybook/components": 6.5.0-alpha.47 + "@storybook/core-events": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/theming": 6.5.0-alpha.46 + "@storybook/theming": 6.5.0-alpha.47 core-js: ^3.8.2 global: ^4.4.0 memoizerific: ^1.11.3 @@ -2213,15 +2206,15 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-controls@portal:../../addons/controls::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.46 - "@storybook/api": 6.5.0-alpha.46 - "@storybook/client-logger": 6.5.0-alpha.46 - "@storybook/components": 6.5.0-alpha.46 - "@storybook/core-common": 6.5.0-alpha.46 + "@storybook/addons": 6.5.0-alpha.47 + "@storybook/api": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 + "@storybook/components": 6.5.0-alpha.47 + "@storybook/core-common": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/node-logger": 6.5.0-alpha.46 - "@storybook/store": 6.5.0-alpha.46 - "@storybook/theming": 6.5.0-alpha.46 + "@storybook/node-logger": 6.5.0-alpha.47 + "@storybook/store": 6.5.0-alpha.47 + "@storybook/theming": 6.5.0-alpha.47 core-js: ^3.8.2 lodash: ^4.17.21 ts-dedent: ^2.0.0 @@ -2240,103 +2233,48 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-docs@portal:../../addons/docs::locator=web-components-kitchen-sink%40workspace%3A." 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/react": ^1.6.22 - "@storybook/addons": 6.5.0-alpha.46 - "@storybook/api": 6.5.0-alpha.46 - "@storybook/builder-webpack4": 6.5.0-alpha.46 - "@storybook/client-logger": 6.5.0-alpha.46 - "@storybook/components": 6.5.0-alpha.46 - "@storybook/core": 6.5.0-alpha.46 - "@storybook/core-events": 6.5.0-alpha.46 + "@storybook/addons": 6.5.0-alpha.47 + "@storybook/api": 6.5.0-alpha.47 + "@storybook/components": 6.5.0-alpha.47 + "@storybook/core-common": 6.5.0-alpha.47 + "@storybook/core-events": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/csf-tools": 6.5.0-alpha.46 + "@storybook/docs-tools": 6.5.0-alpha.47 "@storybook/mdx1-csf": canary - "@storybook/node-logger": 6.5.0-alpha.46 - "@storybook/postinstall": 6.5.0-alpha.46 - "@storybook/preview-web": 6.5.0-alpha.46 - "@storybook/source-loader": 6.5.0-alpha.46 - "@storybook/store": 6.5.0-alpha.46 - "@storybook/theming": 6.5.0-alpha.46 - acorn: ^7.4.1 - acorn-jsx: ^5.3.1 - acorn-walk: ^7.2.0 + "@storybook/node-logger": 6.5.0-alpha.47 + "@storybook/postinstall": 6.5.0-alpha.47 + "@storybook/preview-web": 6.5.0-alpha.47 + "@storybook/source-loader": 6.5.0-alpha.47 + "@storybook/store": 6.5.0-alpha.47 + "@storybook/theming": 6.5.0-alpha.47 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 - 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 peerDependencies: - "@storybook/angular": 6.5.0-alpha.46 - "@storybook/html": 6.5.0-alpha.46 "@storybook/mdx2-csf": "*" - "@storybook/react": 6.5.0-alpha.46 - "@storybook/vue": 6.5.0-alpha.46 - "@storybook/vue3": 6.5.0-alpha.46 - "@storybook/web-components": 6.5.0-alpha.46 - lit: ^2.0.0 - lit-html: ^1.4.1 || ^2.0.0 react: ^16.8.0 || ^17.0.0 react-dom: ^16.8.0 || ^17.0.0 - svelte: ^3.31.2 - sveltedoc-parser: ^4.1.0 - vue: ^2.6.10 || ^3.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/mdx2-csf": optional: true - "@storybook/react": - optional: true - "@storybook/vue": - optional: true - "@storybook/vue3": - optional: true - "@storybook/web-components": - optional: true - lit: - optional: true - lit-html: - optional: true react: optional: true react-dom: optional: true - svelte: - optional: true - sveltedoc-parser: - optional: true - vue: - optional: true webpack: optional: true languageName: node @@ -2372,11 +2310,11 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-links@portal:../../addons/links::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.46 - "@storybook/client-logger": 6.5.0-alpha.46 - "@storybook/core-events": 6.5.0-alpha.46 + "@storybook/addons": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 + "@storybook/core-events": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/router": 6.5.0-alpha.46 + "@storybook/router": 6.5.0-alpha.47 "@types/qs": ^6.9.5 core-js: ^3.8.2 global: ^4.4.0 @@ -2400,12 +2338,12 @@ __metadata: resolution: "@storybook/addon-storyshots@portal:../../addons/storyshots/storyshots-core::locator=web-components-kitchen-sink%40workspace%3A." dependencies: "@jest/transform": ^26.6.2 - "@storybook/addons": 6.5.0-alpha.46 + "@storybook/addons": 6.5.0-alpha.47 "@storybook/babel-plugin-require-context-hook": 1.0.1 - "@storybook/client-api": 6.5.0-alpha.46 - "@storybook/core": 6.5.0-alpha.46 - "@storybook/core-client": 6.5.0-alpha.46 - "@storybook/core-common": 6.5.0-alpha.46 + "@storybook/client-api": 6.5.0-alpha.47 + "@storybook/core": 6.5.0-alpha.47 + "@storybook/core-client": 6.5.0-alpha.47 + "@storybook/core-common": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 "@types/glob": ^7.1.3 "@types/jest": ^26.0.16 @@ -2475,13 +2413,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-storysource@portal:../../addons/storysource::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.46 - "@storybook/api": 6.5.0-alpha.46 - "@storybook/client-logger": 6.5.0-alpha.46 - "@storybook/components": 6.5.0-alpha.46 - "@storybook/router": 6.5.0-alpha.46 - "@storybook/source-loader": 6.5.0-alpha.46 - "@storybook/theming": 6.5.0-alpha.46 + "@storybook/addons": 6.5.0-alpha.47 + "@storybook/api": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 + "@storybook/components": 6.5.0-alpha.47 + "@storybook/router": 6.5.0-alpha.47 + "@storybook/source-loader": 6.5.0-alpha.47 + "@storybook/theming": 6.5.0-alpha.47 core-js: ^3.8.2 estraverse: ^5.2.0 loader-utils: ^2.0.0 @@ -2504,12 +2442,12 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-viewport@portal:../../addons/viewport::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.46 - "@storybook/api": 6.5.0-alpha.46 - "@storybook/client-logger": 6.5.0-alpha.46 - "@storybook/components": 6.5.0-alpha.46 - "@storybook/core-events": 6.5.0-alpha.46 - "@storybook/theming": 6.5.0-alpha.46 + "@storybook/addons": 6.5.0-alpha.47 + "@storybook/api": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 + "@storybook/components": 6.5.0-alpha.47 + "@storybook/core-events": 6.5.0-alpha.47 + "@storybook/theming": 6.5.0-alpha.47 core-js: ^3.8.2 global: ^4.4.0 memoizerific: ^1.11.3 @@ -2530,13 +2468,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addons@portal:../../lib/addons::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/api": 6.5.0-alpha.46 - "@storybook/channels": 6.5.0-alpha.46 - "@storybook/client-logger": 6.5.0-alpha.46 - "@storybook/core-events": 6.5.0-alpha.46 + "@storybook/api": 6.5.0-alpha.47 + "@storybook/channels": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 + "@storybook/core-events": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/router": 6.5.0-alpha.46 - "@storybook/theming": 6.5.0-alpha.46 + "@storybook/router": 6.5.0-alpha.47 + "@storybook/theming": 6.5.0-alpha.47 "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 global: ^4.4.0 @@ -2551,13 +2489,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/api@portal:../../lib/api::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/channels": 6.5.0-alpha.46 - "@storybook/client-logger": 6.5.0-alpha.46 - "@storybook/core-events": 6.5.0-alpha.46 + "@storybook/channels": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 + "@storybook/core-events": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/router": 6.5.0-alpha.46 + "@storybook/router": 6.5.0-alpha.47 "@storybook/semver": ^7.3.2 - "@storybook/theming": 6.5.0-alpha.46 + "@storybook/theming": 6.5.0-alpha.47 core-js: ^3.8.2 fast-deep-equal: ^3.1.3 global: ^4.4.0 @@ -2586,22 +2524,22 @@ __metadata: resolution: "@storybook/builder-webpack4@portal:../../lib/builder-webpack4::locator=web-components-kitchen-sink%40workspace%3A." dependencies: "@babel/core": ^7.12.10 - "@storybook/addons": 6.5.0-alpha.46 - "@storybook/api": 6.5.0-alpha.46 - "@storybook/channel-postmessage": 6.5.0-alpha.46 - "@storybook/channels": 6.5.0-alpha.46 - "@storybook/client-api": 6.5.0-alpha.46 - "@storybook/client-logger": 6.5.0-alpha.46 - "@storybook/components": 6.5.0-alpha.46 - "@storybook/core-common": 6.5.0-alpha.46 - "@storybook/core-events": 6.5.0-alpha.46 - "@storybook/node-logger": 6.5.0-alpha.46 - "@storybook/preview-web": 6.5.0-alpha.46 - "@storybook/router": 6.5.0-alpha.46 + "@storybook/addons": 6.5.0-alpha.47 + "@storybook/api": 6.5.0-alpha.47 + "@storybook/channel-postmessage": 6.5.0-alpha.47 + "@storybook/channels": 6.5.0-alpha.47 + "@storybook/client-api": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 + "@storybook/components": 6.5.0-alpha.47 + "@storybook/core-common": 6.5.0-alpha.47 + "@storybook/core-events": 6.5.0-alpha.47 + "@storybook/node-logger": 6.5.0-alpha.47 + "@storybook/preview-web": 6.5.0-alpha.47 + "@storybook/router": 6.5.0-alpha.47 "@storybook/semver": ^7.3.2 - "@storybook/store": 6.5.0-alpha.46 - "@storybook/theming": 6.5.0-alpha.46 - "@storybook/ui": 6.5.0-alpha.46 + "@storybook/store": 6.5.0-alpha.47 + "@storybook/theming": 6.5.0-alpha.47 + "@storybook/ui": 6.5.0-alpha.47 "@types/node": ^14.0.10 || ^16.0.0 "@types/webpack": ^4.41.26 autoprefixer: ^9.8.6 @@ -2645,9 +2583,9 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/channel-postmessage@portal:../../lib/channel-postmessage::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/channels": 6.5.0-alpha.46 - "@storybook/client-logger": 6.5.0-alpha.46 - "@storybook/core-events": 6.5.0-alpha.46 + "@storybook/channels": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 + "@storybook/core-events": 6.5.0-alpha.47 core-js: ^3.8.2 global: ^4.4.0 qs: ^6.10.0 @@ -2659,8 +2597,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/channel-websocket@portal:../../lib/channel-websocket::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/channels": 6.5.0-alpha.46 - "@storybook/client-logger": 6.5.0-alpha.46 + "@storybook/channels": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 core-js: ^3.8.2 global: ^4.4.0 telejson: ^5.3.3 @@ -2681,13 +2619,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/client-api@portal:../../lib/client-api::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.46 - "@storybook/channel-postmessage": 6.5.0-alpha.46 - "@storybook/channels": 6.5.0-alpha.46 - "@storybook/client-logger": 6.5.0-alpha.46 - "@storybook/core-events": 6.5.0-alpha.46 + "@storybook/addons": 6.5.0-alpha.47 + "@storybook/channel-postmessage": 6.5.0-alpha.47 + "@storybook/channels": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 + "@storybook/core-events": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/store": 6.5.0-alpha.46 + "@storybook/store": 6.5.0-alpha.47 "@types/qs": ^6.9.5 "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 @@ -2720,9 +2658,9 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/components@portal:../../lib/components::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/client-logger": 6.5.0-alpha.46 + "@storybook/client-logger": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/theming": 6.5.0-alpha.46 + "@storybook/theming": 6.5.0-alpha.47 core-js: ^3.8.2 regenerator-runtime: ^0.13.7 peerDependencies: @@ -2735,16 +2673,16 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/core-client@portal:../../lib/core-client::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.46 - "@storybook/channel-postmessage": 6.5.0-alpha.46 - "@storybook/channel-websocket": 6.5.0-alpha.46 - "@storybook/client-api": 6.5.0-alpha.46 - "@storybook/client-logger": 6.5.0-alpha.46 - "@storybook/core-events": 6.5.0-alpha.46 + "@storybook/addons": 6.5.0-alpha.47 + "@storybook/channel-postmessage": 6.5.0-alpha.47 + "@storybook/channel-websocket": 6.5.0-alpha.47 + "@storybook/client-api": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 + "@storybook/core-events": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/preview-web": 6.5.0-alpha.46 - "@storybook/store": 6.5.0-alpha.46 - "@storybook/ui": 6.5.0-alpha.46 + "@storybook/preview-web": 6.5.0-alpha.47 + "@storybook/store": 6.5.0-alpha.47 + "@storybook/ui": 6.5.0-alpha.47 airbnb-js-shims: ^2.2.1 ansi-to-html: ^0.6.11 core-js: ^3.8.2 @@ -2791,7 +2729,7 @@ __metadata: "@babel/preset-react": ^7.12.10 "@babel/preset-typescript": ^7.12.7 "@babel/register": ^7.12.1 - "@storybook/node-logger": 6.5.0-alpha.46 + "@storybook/node-logger": 6.5.0-alpha.47 "@storybook/semver": ^7.3.2 "@types/node": ^14.0.10 || ^16.0.0 "@types/pretty-hrtime": ^1.0.0 @@ -2841,16 +2779,16 @@ __metadata: resolution: "@storybook/core-server@portal:../../lib/core-server::locator=web-components-kitchen-sink%40workspace%3A." dependencies: "@discoveryjs/json-ext": ^0.5.3 - "@storybook/builder-webpack4": 6.5.0-alpha.46 - "@storybook/core-client": 6.5.0-alpha.46 - "@storybook/core-common": 6.5.0-alpha.46 - "@storybook/core-events": 6.5.0-alpha.46 + "@storybook/builder-webpack4": 6.5.0-alpha.47 + "@storybook/core-client": 6.5.0-alpha.47 + "@storybook/core-common": 6.5.0-alpha.47 + "@storybook/core-events": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/csf-tools": 6.5.0-alpha.46 - "@storybook/manager-webpack4": 6.5.0-alpha.46 - "@storybook/node-logger": 6.5.0-alpha.46 + "@storybook/csf-tools": 6.5.0-alpha.47 + "@storybook/manager-webpack4": 6.5.0-alpha.47 + "@storybook/node-logger": 6.5.0-alpha.47 "@storybook/semver": ^7.3.2 - "@storybook/store": 6.5.0-alpha.46 + "@storybook/store": 6.5.0-alpha.47 "@types/node": ^14.0.10 || ^16.0.0 "@types/node-fetch": ^2.5.7 "@types/pretty-hrtime": ^1.0.0 @@ -2901,8 +2839,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/core@portal:../../lib/core::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/core-client": 6.5.0-alpha.46 - "@storybook/core-server": 6.5.0-alpha.46 + "@storybook/core-client": 6.5.0-alpha.47 + "@storybook/core-server": 6.5.0-alpha.47 peerDependencies: react: ^16.8.0 || ^17.0.0 react-dom: ^16.8.0 || ^17.0.0 @@ -2952,6 +2890,19 @@ __metadata: languageName: node linkType: hard +"@storybook/docs-tools@portal:../../lib/docs-tools::locator=web-components-kitchen-sink%40workspace%3A.": + version: 0.0.0-use.local + resolution: "@storybook/docs-tools@portal:../../lib/docs-tools::locator=web-components-kitchen-sink%40workspace%3A." + dependencies: + "@babel/core": ^7.12.10 + "@storybook/csf": 0.0.2--canary.87bc651.0 + "@storybook/store": 6.5.0-alpha.47 + core-js: ^3.8.2 + doctrine: ^3.0.0 + regenerator-runtime: ^0.13.7 + languageName: node + linkType: soft + "@storybook/manager-webpack4@portal:../../lib/manager-webpack4::locator=web-components-kitchen-sink%40workspace%3A.": version: 0.0.0-use.local resolution: "@storybook/manager-webpack4@portal:../../lib/manager-webpack4::locator=web-components-kitchen-sink%40workspace%3A." @@ -2959,12 +2910,12 @@ __metadata: "@babel/core": ^7.12.10 "@babel/plugin-transform-template-literals": ^7.12.1 "@babel/preset-react": ^7.12.10 - "@storybook/addons": 6.5.0-alpha.46 - "@storybook/core-client": 6.5.0-alpha.46 - "@storybook/core-common": 6.5.0-alpha.46 - "@storybook/node-logger": 6.5.0-alpha.46 - "@storybook/theming": 6.5.0-alpha.46 - "@storybook/ui": 6.5.0-alpha.46 + "@storybook/addons": 6.5.0-alpha.47 + "@storybook/core-client": 6.5.0-alpha.47 + "@storybook/core-common": 6.5.0-alpha.47 + "@storybook/node-logger": 6.5.0-alpha.47 + "@storybook/theming": 6.5.0-alpha.47 + "@storybook/ui": 6.5.0-alpha.47 "@types/node": ^14.0.10 || ^16.0.0 "@types/webpack": ^4.41.26 babel-loader: ^8.0.0 @@ -3043,12 +2994,12 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/preview-web@portal:../../lib/preview-web::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.46 - "@storybook/channel-postmessage": 6.5.0-alpha.46 - "@storybook/client-logger": 6.5.0-alpha.46 - "@storybook/core-events": 6.5.0-alpha.46 + "@storybook/addons": 6.5.0-alpha.47 + "@storybook/channel-postmessage": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 + "@storybook/core-events": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/store": 6.5.0-alpha.46 + "@storybook/store": 6.5.0-alpha.47 ansi-to-html: ^0.6.11 core-js: ^3.8.2 global: ^4.4.0 @@ -3069,7 +3020,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/router@portal:../../lib/router::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/client-logger": 6.5.0-alpha.46 + "@storybook/client-logger": 6.5.0-alpha.47 core-js: ^3.8.2 regenerator-runtime: ^0.13.7 peerDependencies: @@ -3094,8 +3045,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@portal:../../lib/source-loader::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.46 - "@storybook/client-logger": 6.5.0-alpha.46 + "@storybook/addons": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 core-js: ^3.8.2 estraverse: ^5.2.0 @@ -3114,9 +3065,9 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/store@portal:../../lib/store::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.46 - "@storybook/client-logger": 6.5.0-alpha.46 - "@storybook/core-events": 6.5.0-alpha.46 + "@storybook/addons": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 + "@storybook/core-events": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 core-js: ^3.8.2 fast-deep-equal: ^3.1.3 @@ -3139,7 +3090,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/theming@portal:../../lib/theming::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/client-logger": 6.5.0-alpha.46 + "@storybook/client-logger": 6.5.0-alpha.47 core-js: ^3.8.2 regenerator-runtime: ^0.13.7 peerDependencies: @@ -3152,15 +3103,15 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/ui@portal:../../lib/ui::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.46 - "@storybook/api": 6.5.0-alpha.46 - "@storybook/channels": 6.5.0-alpha.46 - "@storybook/client-logger": 6.5.0-alpha.46 - "@storybook/components": 6.5.0-alpha.46 - "@storybook/core-events": 6.5.0-alpha.46 - "@storybook/router": 6.5.0-alpha.46 + "@storybook/addons": 6.5.0-alpha.47 + "@storybook/api": 6.5.0-alpha.47 + "@storybook/channels": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 + "@storybook/components": 6.5.0-alpha.47 + "@storybook/core-events": 6.5.0-alpha.47 + "@storybook/router": 6.5.0-alpha.47 "@storybook/semver": ^7.3.2 - "@storybook/theming": 6.5.0-alpha.46 + "@storybook/theming": 6.5.0-alpha.47 core-js: ^3.8.2 regenerator-runtime: ^0.13.7 resolve-from: ^5.0.0 @@ -3177,13 +3128,15 @@ __metadata: "@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.46 - "@storybook/client-api": 6.5.0-alpha.46 - "@storybook/core": 6.5.0-alpha.46 - "@storybook/core-common": 6.5.0-alpha.46 + "@storybook/addons": 6.5.0-alpha.47 + "@storybook/client-api": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.47 + "@storybook/core": 6.5.0-alpha.47 + "@storybook/core-common": 6.5.0-alpha.47 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/preview-web": 6.5.0-alpha.46 - "@storybook/store": 6.5.0-alpha.46 + "@storybook/docs-tools": 6.5.0-alpha.47 + "@storybook/preview-web": 6.5.0-alpha.47 + "@storybook/store": 6.5.0-alpha.47 "@types/node": ^14.14.20 || ^16.0.0 "@types/webpack-env": ^1.16.0 babel-plugin-bundled-import-meta: ^0.3.1 @@ -3779,16 +3732,7 @@ __metadata: languageName: node linkType: hard -"acorn-jsx@npm:^5.3.1": - version: 5.3.2 - resolution: "acorn-jsx@npm:5.3.2" - peerDependencies: - acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 - checksum: 4c54868fbef3b8d58927d5e33f0a4de35f59012fe7b12cf9dfbb345fb8f46607709e1c4431be869a23fb63c151033d84c4198fa9f79385cec34fcb1dd53974c1 - languageName: node - linkType: hard - -"acorn-walk@npm:^7.1.1, acorn-walk@npm:^7.2.0": +"acorn-walk@npm:^7.1.1": version: 7.2.0 resolution: "acorn-walk@npm:7.2.0" checksum: ff99f3406ed8826f7d6ef6ac76b7608f099d45a1ff53229fa267125da1924188dbacf02e7903dfcfd2ae4af46f7be8847dc7d564c73c4e230dfb69c8ea8e6b4c @@ -3804,7 +3748,7 @@ __metadata: languageName: node linkType: hard -"acorn@npm:^7.1.1, acorn@npm:^7.4.1": +"acorn@npm:^7.1.1": version: 7.4.1 resolution: "acorn@npm:7.4.1" bin: @@ -7606,13 +7550,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"html-tags@npm:^3.1.0": - version: 3.1.0 - resolution: "html-tags@npm:3.1.0" - checksum: 057986ab130901137cf78d8561f47176c6874cc6ceb3bbc301fb5871d65f0efa83b3fb922ce8a90e0999e33ff4ab37006b560e60a1d3efc6a456510454711936 - languageName: node - linkType: hard - "html-void-elements@npm:^1.0.0": version: 1.0.5 resolution: "html-void-elements@npm:1.0.5" @@ -8270,13 +8207,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"is-plain-object@npm:5.0.0": - version: 5.0.0 - resolution: "is-plain-object@npm:5.0.0" - checksum: 893e42bad832aae3511c71fd61c0bf61aa3a6d853061c62a307261842727d0d25f761ce9379f7ba7226d6179db2a3157efa918e7fe26360f3bf0842d9f28942c - languageName: node - linkType: hard - "is-plain-object@npm:^2.0.3, is-plain-object@npm:^2.0.4": version: 2.0.4 resolution: "is-plain-object@npm:2.0.4" @@ -10140,15 +10070,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"nanoid@npm:^3.1.23": - version: 3.1.23 - resolution: "nanoid@npm:3.1.23" - bin: - nanoid: bin/nanoid.cjs - checksum: a3207f946e2db59f8095118d5c57615f217e7f8a743bdb83212e222bd263516dbd83db226675d9b8634ed928ff2019db96ca06825a391af4256b02f7bec4b443 - languageName: node - linkType: hard - "nanomatch@npm:^1.2.9": version: 1.2.13 resolution: "nanomatch@npm:1.2.13" @@ -10650,7 +10571,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"p-limit@npm:^3.0.2, p-limit@npm:^3.1.0": +"p-limit@npm:^3.0.2": version: 3.1.0 resolution: "p-limit@npm:3.1.0" dependencies: @@ -11534,20 +11455,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"react-element-to-jsx-string@npm:^14.3.4": - version: 14.3.4 - resolution: "react-element-to-jsx-string@npm:14.3.4" - dependencies: - "@base2/pretty-print-object": 1.0.1 - is-plain-object: 5.0.0 - react-is: 17.0.2 - peerDependencies: - react: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 - react-dom: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 - checksum: 4ead664b2e26e76af57c9ce2f2a46e79fda1d3a408afb5f34d03357d195b7f41a1a86bb9286b6d6ba76c9c2611fe56bc038665cf27fdb56f571d235ddfce9ffb - languageName: node - linkType: hard - "react-inspector@npm:^5.1.0": version: 5.1.1 resolution: "react-inspector@npm:5.1.1" @@ -11561,7 +11468,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"react-is@npm:17.0.2, react-is@npm:^16.12.0 || ^17.0.0, react-is@npm:^17.0.1, react-is@npm:^17.0.2": +"react-is@npm:^16.12.0 || ^17.0.0, react-is@npm:^17.0.1, react-is@npm:^17.0.2": version: 17.0.2 resolution: "react-is@npm:17.0.2" checksum: 2bdb6b93fbb1820b024b496042cce405c57e2f85e777c9aabd55f9b26d145408f9f74f5934676ffdc46f3dcff656d78413a6e43968e7b3f92eea35b3052e9053 From e89658c4d66462704d3f9c8763c752594c170845 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Mar 2022 17:46:03 +0800 Subject: [PATCH 11/17] Fix typo --- workspace.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/workspace.json b/workspace.json index 9fcfaf6e8534..010773cb9475 100644 --- a/workspace.json +++ b/workspace.json @@ -70,7 +70,7 @@ "type": "library" }, "@storybook/docs-tools": { - "root": "app/docs-tools", + "root": "lib/docs-tools", "type": "library" }, "@storybook/ember": { From b43f8006c9b4068176642eeaa5f8727aabbfcbab Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Mar 2022 18:41:10 +0800 Subject: [PATCH 12/17] React: Simplify docs preset --- .../server/framework-preset-react-docgen.ts | 53 ------------------ ...ts => framework-preset-react-docs.test.ts} | 2 +- .../src/server/framework-preset-react-docs.ts | 55 ++++++++++++++++++- app/react/src/server/preset.ts | 1 - 4 files changed, 54 insertions(+), 57 deletions(-) delete mode 100644 app/react/src/server/framework-preset-react-docgen.ts rename app/react/src/server/{framework-preset-react-docgen.test.ts => framework-preset-react-docs.test.ts} (97%) diff --git a/app/react/src/server/framework-preset-react-docgen.ts b/app/react/src/server/framework-preset-react-docgen.ts deleted file mode 100644 index dece10b01137..000000000000 --- a/app/react/src/server/framework-preset-react-docgen.ts +++ /dev/null @@ -1,53 +0,0 @@ -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'; - -export async function babel(config: TransformOptions, { presets }: Options) { - const typescriptOptions = await presets.apply('typescript', {} as any); - - const { reactDocgen } = typescriptOptions; - - if (typeof reactDocgen !== 'string') { - return config; - } - - return { - ...config, - overrides: [ - { - test: reactDocgen === 'react-docgen' ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/, - plugins: [ - [ - require.resolve('babel-plugin-react-docgen'), - { - DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES', - }, - ], - ], - }, - ], - }; -} - -export async function webpackFinal(config: Configuration, { presets }: Options) { - const typescriptOptions = await presets.apply('typescript', {} as any); - - const { reactDocgen, reactDocgenTypescriptOptions } = typescriptOptions; - - if (reactDocgen !== 'react-docgen-typescript') { - return config; - } - - return { - ...config, - plugins: [ - ...config.plugins, - new ReactDocgenTypescriptPlugin({ - ...reactDocgenTypescriptOptions, - // We *need* this set so that RDT returns default values in the same format as react-docgen - savePropValueAsString: true, - }), - ], - }; -} diff --git a/app/react/src/server/framework-preset-react-docgen.test.ts b/app/react/src/server/framework-preset-react-docs.test.ts similarity index 97% rename from app/react/src/server/framework-preset-react-docgen.test.ts rename to app/react/src/server/framework-preset-react-docs.test.ts index 28b27989a915..74a98428e4af 100644 --- a/app/react/src/server/framework-preset-react-docgen.test.ts +++ b/app/react/src/server/framework-preset-react-docs.test.ts @@ -1,6 +1,6 @@ import ReactDocgenTypescriptPlugin from '@storybook/react-docgen-typescript-plugin'; import type { TypescriptConfig } from '@storybook/core-common'; -import * as preset from './framework-preset-react-docgen'; +import * as preset from './framework-preset-react-docs'; describe('framework-preset-react-docgen', () => { const babelPluginReactDocgenPath = require.resolve('babel-plugin-react-docgen'); diff --git a/app/react/src/server/framework-preset-react-docs.ts b/app/react/src/server/framework-preset-react-docs.ts index 4b83b052047a..c9f4b5074472 100644 --- a/app/react/src/server/framework-preset-react-docs.ts +++ b/app/react/src/server/framework-preset-react-docs.ts @@ -1,7 +1,58 @@ -import type { StorybookConfig } from '@storybook/core-common'; +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'; + +export async function babel(config: TransformOptions, { presets }: Options) { + const typescriptOptions = await presets.apply('typescript', {} as any); + + const { reactDocgen } = typescriptOptions; + + if (typeof reactDocgen !== 'string') { + return config; + } + + return { + ...config, + overrides: [ + { + test: reactDocgen === 'react-docgen' ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/, + plugins: [ + [ + require.resolve('babel-plugin-react-docgen'), + { + DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES', + }, + ], + ], + }, + ], + }; +} + +export async function webpackFinal(config: Configuration, { presets }: Options) { + const typescriptOptions = await presets.apply('typescript', {} as any); + + const { reactDocgen, reactDocgenTypescriptOptions } = typescriptOptions; + + if (reactDocgen !== 'react-docgen-typescript') { + return config; + } + + return { + ...config, + plugins: [ + ...config.plugins, + new ReactDocgenTypescriptPlugin({ + ...reactDocgenTypescriptOptions, + // We *need* this set so that RDT returns default values in the same format as react-docgen + savePropValueAsString: true, + }), + ], + }; +} export const config: StorybookConfig['config'] = (entry = [], options) => { - console.log({ options }); return [...entry, findDistEsm(__dirname, 'client/docs/config')]; }; diff --git a/app/react/src/server/preset.ts b/app/react/src/server/preset.ts index aa847f76bef0..b0807877e886 100644 --- a/app/react/src/server/preset.ts +++ b/app/react/src/server/preset.ts @@ -9,6 +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'), ]; From 8537b2461e8c085e1b480efa77df83c18c0dba88 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Mar 2022 18:41:29 +0800 Subject: [PATCH 13/17] Fix linting errors --- .../src/builders/build-storybook/index.ts | 3 +- .../src/client/docs/propTypes/createType.ts | 9 ++---- .../propTypes/generateFuncSignature.test.ts | 2 +- .../client/docs/react-argtypes.stories.tsx | 30 ------------------- .../lit-element-demo-card/input.js | 1 + .../framework-preset-web-components-docs.ts | 1 - 6 files changed, 5 insertions(+), 41 deletions(-) diff --git a/app/angular/src/builders/build-storybook/index.ts b/app/angular/src/builders/build-storybook/index.ts index 4fe76129d37d..8fce45360707 100644 --- a/app/angular/src/builders/build-storybook/index.ts +++ b/app/angular/src/builders/build-storybook/index.ts @@ -10,13 +10,12 @@ import { from, Observable, of, throwError } from 'rxjs'; 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 { BrowserBuilderOptions, ExtraEntryPoint, StylePreprocessorOptions, } from '@angular-devkit/build-angular'; + import buildStandalone, { StandaloneOptions } from '../../../standalone'; import { runCompodoc } from '../utils/run-compodoc'; import { buildStandaloneErrorHandler } from '../utils/build-standalone-errors-handler'; diff --git a/app/react/src/client/docs/propTypes/createType.ts b/app/react/src/client/docs/propTypes/createType.ts index 45796b657a45..cc3286dce0cc 100644 --- a/app/react/src/client/docs/propTypes/createType.ts +++ b/app/react/src/client/docs/propTypes/createType.ts @@ -1,10 +1,5 @@ -import { PropType } from '@storybook/components'; -import { - ExtractedProp, - DocgenPropType, - createSummaryValue, - isTooLongForTypeSummary, -} from '@storybook/docs-tools'; +import type { ExtractedProp, DocgenPropType, PropType } from '@storybook/docs-tools'; +import { createSummaryValue, isTooLongForTypeSummary } from '@storybook/docs-tools'; import { generateFuncSignature, generateShortFuncSignature, diff --git a/app/react/src/client/docs/propTypes/generateFuncSignature.test.ts b/app/react/src/client/docs/propTypes/generateFuncSignature.test.ts index d7ed578f7e5a..c62464b01e1b 100644 --- a/app/react/src/client/docs/propTypes/generateFuncSignature.test.ts +++ b/app/react/src/client/docs/propTypes/generateFuncSignature.test.ts @@ -1,5 +1,5 @@ -import { generateFuncSignature, generateShortFuncSignature } from './generateFuncSignature'; import { parseJsDoc } from '@storybook/docs-tools'; +import { generateFuncSignature, generateShortFuncSignature } from './generateFuncSignature'; describe('generateFuncSignature', () => { it('should return an empty string when there is no @params and @returns tags', () => { diff --git a/app/react/src/client/docs/react-argtypes.stories.tsx b/app/react/src/client/docs/react-argtypes.stories.tsx index 5f9511115c8d..9a14a0c39f64 100644 --- a/app/react/src/client/docs/react-argtypes.stories.tsx +++ b/app/react/src/client/docs/react-argtypes.stories.tsx @@ -53,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/app/web-components/src/client/docs/__testfixtures__/lit-element-demo-card/input.js b/app/web-components/src/client/docs/__testfixtures__/lit-element-demo-card/input.js index 64f03ae29da0..8ac6852e9117 100644 --- a/app/web-components/src/client/docs/__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/app/web-components/src/server/framework-preset-web-components-docs.ts b/app/web-components/src/server/framework-preset-web-components-docs.ts index 3b8f15d9bc06..f742f32da245 100644 --- a/app/web-components/src/server/framework-preset-web-components-docs.ts +++ b/app/web-components/src/server/framework-preset-web-components-docs.ts @@ -1,4 +1,3 @@ -// eslint-disable-next-line import/no-extraneous-dependencies import { findDistEsm, StorybookConfig } from '@storybook/core-common'; export const config: StorybookConfig['config'] = (entry = []) => { From bfc4e77d7ae53df62e4f164bfa1a195b0f88627b Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 12 Mar 2022 18:59:50 +0800 Subject: [PATCH 14/17] Fix failing unit tests --- app/angular/package.json | 1 + .../src/builders/build-storybook/index.ts | 3 +- .../doc-button/compodoc-undefined.snapshot | 1326 +++++++++++++++++ .../src/stories/components/app.stories.js | 2 +- .../cra-ts-essentials_manager-dev-posix | 2 +- .../cra-ts-essentials_manager-prod-posix | 2 +- .../cra-ts-essentials_preview-dev-posix | 8 +- .../cra-ts-essentials_preview-prod-posix | 8 +- .../html-kitchen-sink_manager-dev-posix | 2 +- .../html-kitchen-sink_manager-prod-posix | 2 +- .../html-kitchen-sink_preview-dev-posix | 4 +- .../html-kitchen-sink_preview-prod-posix | 4 +- .../__snapshots__/vue-3-cli_manager-dev-posix | 2 +- .../vue-3-cli_manager-prod-posix | 2 +- .../__snapshots__/vue-3-cli_preview-dev-posix | 4 +- .../vue-3-cli_preview-prod-posix | 4 +- ...-components-kitchen-sink_manager-dev-posix | 2 +- ...components-kitchen-sink_manager-prod-posix | 2 +- ...-components-kitchen-sink_preview-dev-posix | 4 +- ...components-kitchen-sink_preview-prod-posix | 4 +- yarn.lock | 8 + 21 files changed, 1366 insertions(+), 30 deletions(-) create mode 100644 app/angular/src/client/docs/__testfixtures__/doc-button/compodoc-undefined.snapshot diff --git a/app/angular/package.json b/app/angular/package.json index d2e8907486dd..f7ee539a516d 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -97,6 +97,7 @@ "@angular/platform-browser-dynamic": "^11.2.14", "@nrwl/workspace": "^11.6.3", "@types/autoprefixer": "^9.7.2", + "@types/tmp": "^0.2.3", "cross-spawn": "^7.0.3", "jest": "^26.6.3", "jest-preset-angular": "^8.3.2", diff --git a/app/angular/src/builders/build-storybook/index.ts b/app/angular/src/builders/build-storybook/index.ts index 8fce45360707..1995b4efa568 100644 --- a/app/angular/src/builders/build-storybook/index.ts +++ b/app/angular/src/builders/build-storybook/index.ts @@ -16,7 +16,8 @@ import { StylePreprocessorOptions, } from '@angular-devkit/build-angular'; -import buildStandalone, { StandaloneOptions } from '../../../standalone'; +// 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/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/examples/vue-kitchen-sink/src/stories/components/app.stories.js b/examples/vue-kitchen-sink/src/stories/components/app.stories.js index e58a19f78b05..8f957aa35913 100644 --- a/examples/vue-kitchen-sink/src/stories/components/app.stories.js +++ b/examples/vue-kitchen-sink/src/stories/components/app.stories.js @@ -11,4 +11,4 @@ export default { export const Default = () => ({ render: (h) => h(App), }); -// Default.storyName = 'App'; +Default.storyName = 'App'; diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix index 33b3a2b90ae8..51e1c74a02fa 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix @@ -6,7 +6,7 @@ Object { "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/register.js", + "ROOT/addons/docs/dist/esm/register", "ROOT/addons/controls/dist/esm/register.js", "ROOT/addons/actions/dist/esm/register.js", "ROOT/addons/backgrounds/dist/esm/register.js", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix index 6fbcb3d087af..28bb2d32108b 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix @@ -6,7 +6,7 @@ Object { "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/register.js", + "ROOT/addons/docs/dist/esm/register", "ROOT/addons/controls/dist/esm/register.js", "ROOT/addons/actions/dist/esm/register.js", "ROOT/addons/backgrounds/dist/esm/register.js", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix index 32009fdc2093..c0f5cd0feded 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix @@ -8,8 +8,8 @@ Object { "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config.js-generated-config-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/react/config.js-generated-config-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", + "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js", @@ -86,7 +86,7 @@ Object { "babelrc": false, "cacheCompression": false, "cacheDirectory": true, - "cacheIdentifier": "development:babel-plugin-named-asset-import@0.3.8:babel-preset-react-app@10.0.1:react-dev-utils@11.0.4:react-scripts@4.0.3", + "cacheIdentifier": "development:babel-plugin-named-asset-import@:babel-preset-react-app@10.0.1:react-dev-utils@11.0.4:react-scripts@4.0.3", "compact": false, "configFile": false, "customize": "NODE_MODULES/babel-preset-react-app/webpack-overrides.js", @@ -147,7 +147,7 @@ Object { "babelrc": false, "cacheCompression": false, "cacheDirectory": true, - "cacheIdentifier": "development:babel-plugin-named-asset-import@0.3.8:babel-preset-react-app@10.0.1:react-dev-utils@11.0.4:react-scripts@4.0.3", + "cacheIdentifier": "development:babel-plugin-named-asset-import@:babel-preset-react-app@10.0.1:react-dev-utils@11.0.4:react-scripts@4.0.3", "compact": false, "configFile": false, "inputSourceMap": true, diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix index 4f85422ed503..e6371f7c088e 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix @@ -7,8 +7,8 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config.js-generated-config-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/react/config.js-generated-config-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", + "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js", @@ -85,7 +85,7 @@ Object { "babelrc": false, "cacheCompression": false, "cacheDirectory": true, - "cacheIdentifier": "production:babel-plugin-named-asset-import@0.3.8:babel-preset-react-app@10.0.1:react-dev-utils@11.0.4:react-scripts@4.0.3", + "cacheIdentifier": "production:babel-plugin-named-asset-import@:babel-preset-react-app@10.0.1:react-dev-utils@11.0.4:react-scripts@4.0.3", "compact": true, "configFile": false, "customize": "NODE_MODULES/babel-preset-react-app/webpack-overrides.js", @@ -145,7 +145,7 @@ Object { "babelrc": false, "cacheCompression": false, "cacheDirectory": true, - "cacheIdentifier": "production:babel-plugin-named-asset-import@0.3.8:babel-preset-react-app@10.0.1:react-dev-utils@11.0.4:react-scripts@4.0.3", + "cacheIdentifier": "production:babel-plugin-named-asset-import@:babel-preset-react-app@10.0.1:react-dev-utils@11.0.4:react-scripts@4.0.3", "compact": false, "configFile": false, "inputSourceMap": true, diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix index af9a49f22ed7..b0b601e85c6a 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix @@ -5,7 +5,7 @@ Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/register.js", + "ROOT/addons/docs/dist/esm/register", "ROOT/addons/a11y/dist/esm/register.js", "ROOT/addons/actions/dist/esm/register.js", "ROOT/addons/backgrounds/dist/esm/register.js", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix index 8f50e4fbc06d..6b9d055e21bd 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix @@ -5,7 +5,7 @@ Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/register.js", + "ROOT/addons/docs/dist/esm/register", "ROOT/addons/a11y/dist/esm/register.js", "ROOT/addons/actions/dist/esm/register.js", "ROOT/addons/backgrounds/dist/esm/register.js", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix index 8329a956d318..97d781a3de9f 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix @@ -7,9 +7,9 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config.js-generated-config-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/html/config.js-generated-config-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/html/dist/esm/client/preview/config-generated-config-entry.js", + "ROOT/app/html/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/addons/a11y/dist/esm/a11yRunner.js-generated-config-entry.js", "ROOT/addons/a11y/dist/esm/a11yHighlight.js-generated-config-entry.js", "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix index fb86a9f37532..b70aaf539387 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix @@ -6,9 +6,9 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/globals/globals.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config.js-generated-config-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/html/config.js-generated-config-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/html/dist/esm/client/preview/config-generated-config-entry.js", + "ROOT/app/html/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/addons/a11y/dist/esm/a11yRunner.js-generated-config-entry.js", "ROOT/addons/a11y/dist/esm/a11yHighlight.js-generated-config-entry.js", "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix index ff3201dcc1bb..891dad8796c8 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix @@ -6,7 +6,7 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/links/dist/esm/register.js", - "ROOT/addons/docs/dist/esm/register.js", + "ROOT/addons/docs/dist/esm/register", "ROOT/addons/controls/dist/esm/register.js", "ROOT/addons/actions/dist/esm/register.js", "ROOT/addons/backgrounds/dist/esm/register.js", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix index d5cc7d3c6f28..99eb742814ca 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix @@ -6,7 +6,7 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/links/dist/esm/register.js", - "ROOT/addons/docs/dist/esm/register.js", + "ROOT/addons/docs/dist/esm/register", "ROOT/addons/controls/dist/esm/register.js", "ROOT/addons/actions/dist/esm/register.js", "ROOT/addons/backgrounds/dist/esm/register.js", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix index c8f18c578b6d..fe42332cf78f 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix @@ -7,9 +7,9 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config.js-generated-config-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/vue3/config.js-generated-config-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js", + "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/addons/links/dist/esm/preset/addDecorator.js-generated-config-entry.js", "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix index f5394fba46ae..4792caed2d1d 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix @@ -6,9 +6,9 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/globals/globals.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config.js-generated-config-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/vue3/config.js-generated-config-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js", + "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/addons/links/dist/esm/preset/addDecorator.js-generated-config-entry.js", "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix index 1d69b08207fd..1c0d32d308b3 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix @@ -5,7 +5,7 @@ Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/register.js", + "ROOT/addons/docs/dist/esm/register", "ROOT/addons/controls/dist/esm/register.js", "ROOT/addons/a11y/dist/esm/register.js", "ROOT/addons/actions/dist/esm/register.js", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix index 23f5ae4c2e36..c090d10a5866 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix @@ -5,7 +5,7 @@ Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/register.js", + "ROOT/addons/docs/dist/esm/register", "ROOT/addons/controls/dist/esm/register.js", "ROOT/addons/a11y/dist/esm/register.js", "ROOT/addons/actions/dist/esm/register.js", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix index 553b23c0d6f2..c816a27405c8 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix @@ -7,9 +7,9 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config.js-generated-config-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/web-components/config.js-generated-config-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/web-components/dist/esm/client/preview/config-generated-config-entry.js", + "ROOT/app/web-components/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/addons/a11y/dist/esm/a11yRunner.js-generated-config-entry.js", "ROOT/addons/a11y/dist/esm/a11yHighlight.js-generated-config-entry.js", "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix index 0118654b4c3f..c7b0fb4ff3e9 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix @@ -6,9 +6,9 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/globals/globals.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config.js-generated-config-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/web-components/config.js-generated-config-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/web-components/dist/esm/client/preview/config-generated-config-entry.js", + "ROOT/app/web-components/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/addons/a11y/dist/esm/a11yRunner.js-generated-config-entry.js", "ROOT/addons/a11y/dist/esm/a11yHighlight.js-generated-config-entry.js", "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", diff --git a/yarn.lock b/yarn.lock index bbc677dd26d2..efcad8df3f98 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6864,6 +6864,7 @@ __metadata: "@types/node": ^14.14.20 || ^16.0.0 "@types/react": ^16.14.23 "@types/react-dom": ^16.9.14 + "@types/tmp": ^0.2.3 "@types/webpack-env": ^1.16.0 autoprefixer: ^9.8.6 core-js: ^3.8.2 @@ -10322,6 +10323,13 @@ __metadata: languageName: node linkType: hard +"@types/tmp@npm:^0.2.3": + version: 0.2.3 + resolution: "@types/tmp@npm:0.2.3" + checksum: a9a32d723b483713ef537af31caddfcc2129ba21a0d56f5e4eef39508e07d415b1ec7327486d15b2cd4ac277deaaef0f8368ed1a0f4029e5ef5c393f9c15856b + languageName: node + linkType: hard + "@types/trusted-types@npm:^2.0.2": version: 2.0.2 resolution: "@types/trusted-types@npm:2.0.2" From 0b0164f44de33c3aba15fb6b17328bbd8c176934 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 13 Mar 2022 18:29:16 +0800 Subject: [PATCH 15/17] Update yarn.lock --- examples/web-components-kitchen-sink/yarn.lock | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/web-components-kitchen-sink/yarn.lock b/examples/web-components-kitchen-sink/yarn.lock index ed91380c35f1..648b38a1cb14 100644 --- a/examples/web-components-kitchen-sink/yarn.lock +++ b/examples/web-components-kitchen-sink/yarn.lock @@ -2899,6 +2899,7 @@ __metadata: "@storybook/store": 6.5.0-alpha.47 core-js: ^3.8.2 doctrine: ^3.0.0 + lodash: ^4.17.21 regenerator-runtime: ^0.13.7 languageName: node linkType: soft From 24e4128942b53c90a2dec3cc408bfee51500ca6d Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 13 Mar 2022 20:55:25 +0800 Subject: [PATCH 16/17] Update addons/docs/src/frameworks/common/config.ts --- addons/docs/src/frameworks/common/config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/docs/src/frameworks/common/config.ts b/addons/docs/src/frameworks/common/config.ts index 10f3227e89d5..20632390005a 100644 --- a/addons/docs/src/frameworks/common/config.ts +++ b/addons/docs/src/frameworks/common/config.ts @@ -3,6 +3,6 @@ export const parameters = { inlineStories: false, getContainer: async () => (await import('../../blocks')).DocsContainer, getPage: async () => (await import('../../blocks')).DocsPage, - iframeHeight: 110, + iframeHeight: 100, }, }; From a84f75a75e257602a87afa503a6ca43206dd8a0e Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 13 Mar 2022 21:19:56 +0800 Subject: [PATCH 17/17] Vue: Clean up docs preset --- app/vue/src/client/docs/config.ts | 1 - app/vue/src/client/preview/docs/config.ts | 19 -- .../client/preview/docs/extractArgTypes.ts | 86 ------- .../client/preview/docs/prepareForInline.ts | 39 --- .../preview/docs/sourceDecorator.test.ts | 144 ----------- .../client/preview/docs/sourceDecorator.ts | 242 ------------------ 6 files changed, 531 deletions(-) delete mode 100644 app/vue/src/client/preview/docs/config.ts delete mode 100644 app/vue/src/client/preview/docs/extractArgTypes.ts delete mode 100644 app/vue/src/client/preview/docs/prepareForInline.ts delete mode 100644 app/vue/src/client/preview/docs/sourceDecorator.test.ts delete mode 100644 app/vue/src/client/preview/docs/sourceDecorator.ts diff --git a/app/vue/src/client/docs/config.ts b/app/vue/src/client/docs/config.ts index fe69d10e31d8..537773e4dfb6 100644 --- a/app/vue/src/client/docs/config.ts +++ b/app/vue/src/client/docs/config.ts @@ -4,7 +4,6 @@ import { prepareForInline } from './prepareForInline'; import { sourceDecorator } from './sourceDecorator'; export const parameters = { - foobar: 'baz', docs: { inlineStories: true, iframeHeight: 120, diff --git a/app/vue/src/client/preview/docs/config.ts b/app/vue/src/client/preview/docs/config.ts deleted file mode 100644 index 225bf3a0d254..000000000000 --- a/app/vue/src/client/preview/docs/config.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { extractComponentDescription } from '@storybook/docs-tools'; -import { extractArgTypes } from './extractArgTypes'; -import { prepareForInline } from './prepareForInline'; -import { sourceDecorator } from './sourceDecorator'; - -console.log('hello2'); - -export const parameters = { - foobar: 'baz', - docs: { - inlineStories: true, - iframeHeight: 120, - prepareForInline, - extractArgTypes, - extractComponentDescription, - }, -}; - -export const decorators = [sourceDecorator]; diff --git a/app/vue/src/client/preview/docs/extractArgTypes.ts b/app/vue/src/client/preview/docs/extractArgTypes.ts deleted file mode 100644 index 92a9f113e9c0..000000000000 --- a/app/vue/src/client/preview/docs/extractArgTypes.ts +++ /dev/null @@ -1,86 +0,0 @@ -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']; - -/** - * Check if "@values" tag is defined within docgenInfo. - * If true, then propDef is mutated. - */ -function isEnum(propDef: PropDef, docgenInfo: DocgenInfo): false | PropDef { - // cast as any, since "values" doesn't exist in DocgenInfo type - const { type, values } = docgenInfo as any; - const matched = Array.isArray(values) && values.length && type.name !== 'enum'; - - if (!matched) return false; - - const enumString = values.join(', '); - let { summary } = propDef.type; - summary = summary ? `${summary}: ${enumString}` : enumString; - - Object.assign(propDef.type, { - ...propDef.type, - name: 'enum', - value: values, - summary, - }); - return propDef; -} - -/** - * @returns {Array} result - * @returns {PropDef} result.def - propDef - * @returns {boolean} result.isChanged - flag whether propDef is mutated or not. - * this is needed to prevent sbType from performing convert(docgenInfo). - */ -function verifyPropDef(propDef: PropDef, docgenInfo: DocgenInfo): [PropDef, boolean] { - let def = propDef; - let isChanged = false; - - // another callback can be added here. - // callback is mutually exclusive from each other. - const callbacks = [isEnum]; - for (let i = 0, len = callbacks.length; i < len; i += 1) { - const matched = callbacks[i](propDef, docgenInfo); - if (matched) { - def = matched; - isChanged = true; - } - } - - return [def, isChanged]; -} - -export const extractArgTypes: ArgTypesExtractor = (component) => { - if (!hasDocgen(component)) { - return null; - } - const results: StrictArgTypes = {}; - SECTIONS.forEach((section) => { - const props = extractComponentProps(component, section); - props.forEach(({ propDef, docgenInfo, jsDocTags }) => { - const [result, isPropDefChanged] = verifyPropDef(propDef, docgenInfo); - const { name, type, description, defaultValue: defaultSummary, required } = result; - - let sbType; - if (isPropDefChanged) { - sbType = type; - } else { - sbType = section === 'props' ? convert(docgenInfo) : { name: 'void' }; - } - results[name] = { - name, - description, - type: { required, ...sbType }, - table: { - type, - jsDocTags, - defaultValue: defaultSummary, - category: section, - }, - }; - }); - }); - return results; -}; diff --git a/app/vue/src/client/preview/docs/prepareForInline.ts b/app/vue/src/client/preview/docs/prepareForInline.ts deleted file mode 100644 index 3696a6bb7687..000000000000 --- a/app/vue/src/client/preview/docs/prepareForInline.ts +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import Vue from 'vue'; -import type { StoryContext, PartialStoryFn } from '@storybook/csf'; -import type { VueFramework } from '../types-6-0'; - -// Inspired by https://github.com/egoist/vue-to-react, -// modified to store args as props in the root store - -// FIXME get this from @storybook/vue -const COMPONENT = 'STORYBOOK_COMPONENT'; -const VALUES = 'STORYBOOK_VALUES'; - -export const prepareForInline = ( - storyFn: PartialStoryFn, - { args }: StoryContext -) => { - const component = storyFn(); - const el = React.useRef(null); - - // FIXME: This recreates the Vue instance every time, which should be optimized - React.useEffect(() => { - const root = new Vue({ - el: el.current, - data() { - return { - [COMPONENT]: component, - [VALUES]: args, - }; - }, - render(h) { - const children = this[COMPONENT] ? [h(this[COMPONENT])] : undefined; - return h('div', { attrs: { id: 'root' } }, children); - }, - }); - return () => root.$destroy(); - }); - - return React.createElement('div', null, React.createElement('div', { ref: el })); -}; diff --git a/app/vue/src/client/preview/docs/sourceDecorator.test.ts b/app/vue/src/client/preview/docs/sourceDecorator.test.ts deleted file mode 100644 index 54695c1ea84f..000000000000 --- a/app/vue/src/client/preview/docs/sourceDecorator.test.ts +++ /dev/null @@ -1,144 +0,0 @@ -/* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */ - -import { ComponentOptions } from 'vue'; -import Vue from 'vue/dist/vue'; -import { vnodeToString } from './sourceDecorator'; - -expect.addSnapshotSerializer({ - print: (val: any) => val, - test: (val) => typeof val === 'string', -}); - -const getVNode = (Component: ComponentOptions) => { - const vm = new Vue({ - render(h: (c: any) => unknown) { - return h(Component); - }, - }).$mount(); - - return vm.$children[0]._vnode; -}; - -describe('vnodeToString', () => { - it('basic', () => { - expect( - vnodeToString( - getVNode({ - template: ``, - }) - ) - ).toMatchInlineSnapshot(``); - }); - - it('static class', () => { - expect( - vnodeToString( - getVNode({ - template: ``, - }) - ) - ).toMatchInlineSnapshot(``); - }); - - it('string dynamic class', () => { - expect( - vnodeToString( - getVNode({ - template: ``, - }) - ) - ).toMatchInlineSnapshot(``); - }); - - it('non-string dynamic class', () => { - expect( - vnodeToString( - getVNode({ - template: ``, - }) - ) - ).toMatchInlineSnapshot(``); - }); - - it('array dynamic class', () => { - expect( - vnodeToString( - getVNode({ - template: ``, - }) - ) - ).toMatchInlineSnapshot(``); - }); - - it('object dynamic class', () => { - expect( - vnodeToString( - getVNode({ - template: ``, - }) - ) - ).toMatchInlineSnapshot(``); - }); - - it('merge dynamic and static classes', () => { - expect( - vnodeToString( - getVNode({ - template: ``, - }) - ) - ).toMatchInlineSnapshot(``); - }); - - it('attributes', () => { - const MyComponent: ComponentOptions = { - props: ['propA', 'propB', 'propC', 'propD', 'propE', 'propF', 'propG'], - template: '
', - }; - - expect( - vnodeToString( - getVNode({ - components: { MyComponent }, - data(): { props: Record } { - return { - props: { - propA: 'propA', - propB: 1, - propC: null, - propD: { - foo: 'bar', - }, - propE: true, - propF() { - const foo = 'bar'; - - return foo; - }, - propG: undefined, - }, - }; - }, - template: ``, - }) - ) - ).toMatchInlineSnapshot( - `` - ); - }); - - it('children', () => { - expect( - vnodeToString( - getVNode({ - template: ` -
-
- -
-
`, - }) - ) - ).toMatchInlineSnapshot(`
`); - }); -}); diff --git a/app/vue/src/client/preview/docs/sourceDecorator.ts b/app/vue/src/client/preview/docs/sourceDecorator.ts deleted file mode 100644 index 38eed0d20ff7..000000000000 --- a/app/vue/src/client/preview/docs/sourceDecorator.ts +++ /dev/null @@ -1,242 +0,0 @@ -/* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */ - -import type { StoryContext } from '@storybook/csf'; -import { addons } from '@storybook/addons'; -import { logger } from '@storybook/client-logger'; -import type Vue from 'vue'; - -import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools'; -import type { VueFramework } from '../types-6-0'; - -export const skipSourceRender = (context: StoryContext) => { - const sourceParams = context?.parameters.docs?.source; - const isArgsStory = context?.parameters.__isArgsStory; - - // always render if the user forces it - if (sourceParams?.type === SourceType.DYNAMIC) { - return false; - } - - // never render if the user is forcing the block to render code, or - // if the user provides code, or if it's not an args story. - return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE; -}; - -export const sourceDecorator = (storyFn: any, context: StoryContext) => { - const story = storyFn(); - console.log({ story }); - - // See ../react/jsxDecorator.tsx - if (skipSourceRender(context)) { - return story; - } - - const channel = addons.getChannel(); - - const storyComponent = getStoryComponent(story.options.STORYBOOK_WRAPS); - - return { - components: { - Story: story, - }, - // We need to wait until the wrapper component to be mounted so Vue runtime - // struct VNode tree. We get `this._vnode == null` if switch to `created` - // lifecycle hook. - mounted() { - // Theoretically this does not happens but we need to check it. - if (!this._vnode) { - return; - } - - try { - const storyNode = lookupStoryInstance(this, storyComponent); - - const code = vnodeToString(storyNode._vnode); - - const emitFormattedTemplate = async () => { - const prettier = await import('prettier/standalone'); - const prettierHtml = await import('prettier/parser-html'); - - channel.emit( - SNIPPET_RENDERED, - (context || {}).id, - prettier.format(``, { - parser: 'vue', - plugins: [prettierHtml], - // Because the parsed vnode missing spaces right before/after the surround tag, - // we always get weird wrapped code without this option. - htmlWhitespaceSensitivity: 'ignore', - }) - ); - }; - - emitFormattedTemplate(); - } catch (e) { - logger.warn(`Failed to generate dynamic story source: ${e}`); - } - }, - template: '', - }; -}; - -export function vnodeToString(vnode: Vue.VNode): string { - const attrString = [ - ...(vnode.data?.slot ? ([['slot', vnode.data.slot]] as [string, any][]) : []), - ['class', stringifyClassAttribute(vnode)], - ...(vnode.componentOptions?.propsData ? Object.entries(vnode.componentOptions.propsData) : []), - ...(vnode.data?.attrs ? Object.entries(vnode.data.attrs) : []), - ] - .filter(([name], index, list) => list.findIndex((item) => item[0] === name) === index) - .map(([name, value]) => stringifyAttr(name, value)) - .filter(Boolean) - .join(' '); - - if (!vnode.componentOptions) { - // Non-component elements (div, span, etc...) - if (vnode.tag) { - if (!vnode.children) { - return `<${vnode.tag} ${attrString}/>`; - } - - return `<${vnode.tag} ${attrString}>${vnode.children.map(vnodeToString).join('')}`; - } - - // TextNode - if (vnode.text) { - if (/[<>"&]/.test(vnode.text)) { - return `{{\`${vnode.text.replace(/`/g, '\\`')}\`}}`; - } - - return vnode.text; - } - - // Unknown - return ''; - } - - // Probably users never see the "unknown-component". It seems that vnode.tag - // is always set. - const tag = vnode.componentOptions.tag || vnode.tag || 'unknown-component'; - - if (!vnode.componentOptions.children) { - return `<${tag} ${attrString}/>`; - } - - return `<${tag} ${attrString}>${vnode.componentOptions.children - .map(vnodeToString) - .join('')}`; -} - -function stringifyClassAttribute(vnode: Vue.VNode): string | undefined { - if (!vnode.data || (!vnode.data.staticClass && !vnode.data.class)) { - return undefined; - } - - return ( - [...(vnode.data.staticClass?.split(' ') ?? []), ...normalizeClassBinding(vnode.data.class)] - .filter(Boolean) - .join(' ') || undefined - ); -} - -// https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes -function normalizeClassBinding(binding: unknown): readonly string[] { - if (!binding) { - return []; - } - - if (typeof binding === 'string') { - return [binding]; - } - - if (binding instanceof Array) { - // To handle an object-in-array binding smartly, we use recursion - return binding.map(normalizeClassBinding).reduce((a, b) => [...a, ...b], []); - } - - if (typeof binding === 'object') { - return Object.entries(binding) - .filter(([, active]) => !!active) - .map(([className]) => className); - } - - // Unknown class binding - return []; -} - -function stringifyAttr(attrName: string, value?: any): string | null { - if (typeof value === 'undefined' || typeof value === 'function') { - return null; - } - - if (value === true) { - return attrName; - } - - if (typeof value === 'string') { - return `${attrName}=${quote(value)}`; - } - - // TODO: Better serialization (unquoted object key, Symbol/Classes, etc...) - // Seems like Prettier don't format JSON-look object (= when keys are quoted) - return `:${attrName}=${quote(JSON.stringify(value))}`; -} - -function quote(value: string) { - return value.includes(`"`) && !value.includes(`'`) - ? `'${value}'` - : `"${value.replace(/"/g, '"')}"`; -} - -/** - * Skip decorators and grab a story component itself. - * https://github.com/pocka/storybook-addon-vue-info/pull/113 - */ -function getStoryComponent(w: any) { - let matched = w; - - while ( - matched && - matched.options && - matched.options.components && - matched.options.components.story && - matched.options.components.story.options && - matched.options.components.story.options.STORYBOOK_WRAPS - ) { - matched = matched.options.components.story.options.STORYBOOK_WRAPS; - } - return matched; -} - -interface VueInternal { - // We need to access this private property, in order to grab the vnode of the - // component instead of the "vnode of the parent of the component". - // Probably it's safe to rely on this because vm.$vnode is a reference for this. - // https://github.com/vuejs/vue/issues/6070#issuecomment-314389883 - _vnode: Vue.VNode; -} - -/** - * Find the story's instance from VNode tree. - */ -function lookupStoryInstance(instance: Vue, storyComponent: any): (Vue & VueInternal) | null { - if ( - instance.$vnode && - instance.$vnode.componentOptions && - instance.$vnode.componentOptions.Ctor === storyComponent - ) { - return instance as Vue & VueInternal; - } - - for (let i = 0, l = instance.$children.length; i < l; i += 1) { - const found = lookupStoryInstance(instance.$children[i], storyComponent); - - if (found) { - return found; - } - } - - return null; -}