From 93c4ff13d92cd53a2a09ce11f4b052936e4ae085 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 29 Jun 2022 00:13:43 +0800 Subject: [PATCH 1/6] Extract doc blocks --- addons/controls/package.json | 1 + addons/controls/src/ControlsPanel.tsx | 7 +- addons/docs/package.json | 1 + addons/docs/src/blocks/index.ts | 29 +- addons/docs/src/preview.ts | 4 +- examples/doc-blocks/.env | 1 + examples/doc-blocks/.storybook/main.ts | 26 ++ examples/doc-blocks/.storybook/manager.js | 8 + examples/doc-blocks/.storybook/preview.tsx | 11 + examples/doc-blocks/README.md | 3 + examples/doc-blocks/babel.config.js | 7 + examples/doc-blocks/package.json | 40 ++ examples/doc-blocks/tsconfig.json | 13 + lib/blocks/README.md | 23 + lib/blocks/package.json | 68 +++ .../docs => lib/blocks}/src/blocks/Anchor.tsx | 0 .../blocks}/src/blocks/ArgsTable.tsx | 12 +- .../docs => lib/blocks}/src/blocks/Canvas.tsx | 4 +- .../blocks}/src/blocks/Description.tsx | 2 +- .../blocks}/src/blocks/DocsContainer.tsx | 3 +- .../blocks}/src/blocks/DocsContext.ts | 0 .../blocks}/src/blocks/DocsPage.test.ts | 0 .../blocks}/src/blocks/DocsPage.tsx | 0 .../blocks}/src/blocks/DocsRenderer.tsx | 0 .../blocks}/src/blocks/DocsStory.tsx | 0 .../src/blocks/ExternalDocsContainer.tsx | 0 .../src/blocks/ExternalPreview.test.ts | 0 .../blocks}/src/blocks/ExternalPreview.ts | 0 .../blocks}/src/blocks/Heading.tsx | 0 .../docs => lib/blocks}/src/blocks/Meta.tsx | 0 .../blocks}/src/blocks/Preview.tsx | 0 .../blocks}/src/blocks/Primary.tsx | 0 .../docs => lib/blocks}/src/blocks/Props.tsx | 0 .../docs => lib/blocks}/src/blocks/Source.tsx | 4 +- .../blocks}/src/blocks/SourceContainer.tsx | 4 +- .../blocks}/src/blocks/Stories.tsx | 0 .../docs => lib/blocks}/src/blocks/Story.tsx | 3 +- .../blocks}/src/blocks/Subheading.tsx | 0 .../blocks}/src/blocks/Subtitle.tsx | 2 +- .../docs => lib/blocks}/src/blocks/Title.tsx | 2 +- .../blocks}/src/blocks/Wrapper.tsx | 0 .../blocks}/src/blocks/enhanceSource.test.ts | 0 .../blocks}/src/blocks/enhanceSource.ts | 0 lib/blocks/src/blocks/index.ts | 29 ++ .../docs => lib/blocks}/src/blocks/mdx.tsx | 3 +- .../docs => lib/blocks}/src/blocks/types.ts | 0 .../blocks}/src/blocks/useStory.ts | 0 .../docs => lib/blocks}/src/blocks/utils.ts | 0 .../src/components}/ArgsTable/ArgControl.tsx | 2 +- .../src/components}/ArgsTable/ArgJsDoc.tsx | 2 +- .../components/ArgsTable/ArgRow.stories.tsx | 399 ++++++++++++++++++ .../src/components}/ArgsTable/ArgRow.tsx | 2 +- .../src/components}/ArgsTable/ArgValue.tsx | 7 +- .../ArgsTable/ArgsTable.stories.tsx | 155 +++++++ .../src/components}/ArgsTable/ArgsTable.tsx | 6 +- .../ArgsTable/NoControlsWarning.tsx | 2 +- .../ArgsTable/SectionRow.stories.tsx | 47 +++ .../src/components}/ArgsTable/SectionRow.tsx | 2 +- .../ArgsTable/TabbedArgsTable.stories.tsx | 33 ++ .../components}/ArgsTable/TabbedArgsTable.tsx | 2 +- .../src/components}/ArgsTable/index.ts | 0 .../src/components}/ArgsTable/types.ts | 0 .../src/components}/BlockBackgroundStyles.tsx | 0 .../src/components}/ColorPalette.stories.tsx | 19 +- .../src/components}/ColorPalette.tsx | 4 +- .../src/components}/Description.stories.tsx | 35 +- .../src/components}/Description.tsx | 3 +- .../src/components}/DocsPage.stories.tsx | 8 +- .../src/components}/DocsPage.tsx | 5 +- .../src/components}/DocsPageExampleCaption.md | 0 .../components}/DocsPageExampleCaption.mdx | 0 .../src/components}/EmptyBlock.stories.tsx | 1 - .../src/components}/EmptyBlock.tsx | 4 +- .../src/components}/IFrame.tsx | 0 .../src/components}/IconGallery.stories.tsx | 4 +- .../src/components}/IconGallery.tsx | 2 +- .../src/components}/Preview.stories.tsx | 67 ++- .../src/components}/Preview.tsx | 10 +- lib/blocks/src/components/Source.stories.tsx | 74 ++++ .../src/components}/Source.tsx | 4 +- .../src/components}/Story.stories.tsx | 3 +- .../src/components}/Story.tsx | 7 +- lib/blocks/src/components/Title.stories.ts | 9 + lib/blocks/src/components/Title.tsx | 17 + .../src/components}/Toolbar.tsx | 13 +- .../src/components}/Typeset.stories.tsx | 4 +- .../src/components}/Typeset.tsx | 5 +- .../src/components}/ZoomContext.tsx | 0 .../blocks => blocks/src/components}/index.ts | 3 +- .../src/controls/Boolean.stories.tsx | 0 .../src/controls/Boolean.tsx | 2 +- .../src/controls/Color.stories.tsx | 0 .../src/controls/Color.tsx | 6 +- .../src/controls/Date.stories.tsx | 0 .../src/controls/Date.test.ts | 0 .../src/controls/Date.tsx | 3 +- .../src/controls/Files.tsx | 3 +- .../src/controls/Number.stories.tsx | 0 .../src/controls/Number.tsx | 3 +- .../src/controls/Object.stories.tsx | 0 .../src/controls/Object.tsx | 5 +- .../src/controls/Range.stories.tsx | 0 .../src/controls/Range.tsx | 0 .../src/controls/Text.stories.tsx | 0 .../src/controls/Text.tsx | 3 +- .../src/controls/helpers.test.ts | 0 .../src/controls/helpers.ts | 0 .../src/controls/index.tsx | 0 .../src/controls/options/Checkbox.tsx | 0 .../src/controls/options/Options.stories.tsx | 0 .../src/controls/options/Options.tsx | 0 .../src/controls/options/Radio.tsx | 0 .../src/controls/options/Select.tsx | 2 +- .../src/controls/options/helpers.ts | 0 .../src/controls/options/index.ts | 0 .../react-editable-json-tree/JsonNodes.tsx | 0 .../react-editable-json-tree/LICENSE.md | 0 .../react-editable-json-tree/index.tsx | 0 .../types/dataTypes.ts | 0 .../types/deltaTypes.ts | 0 .../types/inputUsageTypes.ts | 0 .../utils/objectTypes.ts | 0 .../react-editable-json-tree/utils/parse.ts | 0 .../react-editable-json-tree/utils/styles.ts | 0 .../src/controls/types.ts | 2 +- lib/blocks/src/index.ts | 7 + lib/blocks/src/typings.d.ts | 4 + lib/blocks/tsconfig.json | 16 + .../src/blocks/ArgsTable/ArgRow.stories.tsx | 350 --------------- .../blocks/ArgsTable/ArgsTable.stories.tsx | 144 ------- .../blocks/ArgsTable/SectionRow.stories.tsx | 39 -- .../ArgsTable/TabbedArgsTable.stories.tsx | 34 -- lib/components/src/blocks/Source.stories.tsx | 58 --- lib/components/src/index.ts | 11 +- .../src/typography/elements/Code.tsx | 16 +- nx.json | 2 + package.json | 1 + .../react/src/docs/react-argtypes.stories.tsx | 4 +- scripts/build-package.js | 44 +- workspace.json | 2 + yarn.lock | 75 +++- 141 files changed, 1295 insertions(+), 811 deletions(-) create mode 100644 examples/doc-blocks/.env create mode 100644 examples/doc-blocks/.storybook/main.ts create mode 100644 examples/doc-blocks/.storybook/manager.js create mode 100644 examples/doc-blocks/.storybook/preview.tsx create mode 100644 examples/doc-blocks/README.md create mode 100644 examples/doc-blocks/babel.config.js create mode 100644 examples/doc-blocks/package.json create mode 100644 examples/doc-blocks/tsconfig.json create mode 100644 lib/blocks/README.md create mode 100644 lib/blocks/package.json rename {addons/docs => lib/blocks}/src/blocks/Anchor.tsx (100%) rename {addons/docs => lib/blocks}/src/blocks/ArgsTable.tsx (99%) rename {addons/docs => lib/blocks}/src/blocks/Canvas.tsx (97%) rename {addons/docs => lib/blocks}/src/blocks/Description.tsx (98%) rename {addons/docs => lib/blocks}/src/blocks/DocsContainer.tsx (96%) rename {addons/docs => lib/blocks}/src/blocks/DocsContext.ts (100%) rename {addons/docs => lib/blocks}/src/blocks/DocsPage.test.ts (100%) rename {addons/docs => lib/blocks}/src/blocks/DocsPage.tsx (100%) rename {addons/docs => lib/blocks}/src/blocks/DocsRenderer.tsx (100%) rename {addons/docs => lib/blocks}/src/blocks/DocsStory.tsx (100%) rename {addons/docs => lib/blocks}/src/blocks/ExternalDocsContainer.tsx (100%) rename {addons/docs => lib/blocks}/src/blocks/ExternalPreview.test.ts (100%) rename {addons/docs => lib/blocks}/src/blocks/ExternalPreview.ts (100%) rename {addons/docs => lib/blocks}/src/blocks/Heading.tsx (100%) rename {addons/docs => lib/blocks}/src/blocks/Meta.tsx (100%) rename {addons/docs => lib/blocks}/src/blocks/Preview.tsx (100%) rename {addons/docs => lib/blocks}/src/blocks/Primary.tsx (100%) rename {addons/docs => lib/blocks}/src/blocks/Props.tsx (100%) rename {addons/docs => lib/blocks}/src/blocks/Source.tsx (97%) rename {addons/docs => lib/blocks}/src/blocks/SourceContainer.tsx (96%) rename {addons/docs => lib/blocks}/src/blocks/Stories.tsx (100%) rename {addons/docs => lib/blocks}/src/blocks/Story.tsx (97%) rename {addons/docs => lib/blocks}/src/blocks/Subheading.tsx (100%) rename {addons/docs => lib/blocks}/src/blocks/Subtitle.tsx (89%) rename {addons/docs => lib/blocks}/src/blocks/Title.tsx (92%) rename {addons/docs => lib/blocks}/src/blocks/Wrapper.tsx (100%) rename {addons/docs => lib/blocks}/src/blocks/enhanceSource.test.ts (100%) rename {addons/docs => lib/blocks}/src/blocks/enhanceSource.ts (100%) create mode 100644 lib/blocks/src/blocks/index.ts rename {addons/docs => lib/blocks}/src/blocks/mdx.tsx (98%) rename {addons/docs => lib/blocks}/src/blocks/types.ts (100%) rename {addons/docs => lib/blocks}/src/blocks/useStory.ts (100%) rename {addons/docs => lib/blocks}/src/blocks/utils.ts (100%) rename lib/{components/src/blocks => blocks/src/components}/ArgsTable/ArgControl.tsx (100%) rename lib/{components/src/blocks => blocks/src/components}/ArgsTable/ArgJsDoc.tsx (97%) create mode 100644 lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx rename lib/{components/src/blocks => blocks/src/components}/ArgsTable/ArgRow.tsx (98%) rename lib/{components/src/blocks => blocks/src/components}/ArgsTable/ArgValue.tsx (95%) create mode 100644 lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx rename lib/{components/src/blocks => blocks/src/components}/ArgsTable/ArgsTable.tsx (98%) rename lib/{components/src/blocks => blocks/src/components}/ArgsTable/NoControlsWarning.tsx (92%) create mode 100644 lib/blocks/src/components/ArgsTable/SectionRow.stories.tsx rename lib/{components/src/blocks => blocks/src/components}/ArgsTable/SectionRow.tsx (98%) create mode 100644 lib/blocks/src/components/ArgsTable/TabbedArgsTable.stories.tsx rename lib/{components/src/blocks => blocks/src/components}/ArgsTable/TabbedArgsTable.tsx (94%) rename lib/{components/src/blocks => blocks/src/components}/ArgsTable/index.ts (100%) rename lib/{components/src/blocks => blocks/src/components}/ArgsTable/types.ts (100%) rename lib/{components/src/blocks => blocks/src/components}/BlockBackgroundStyles.tsx (100%) rename lib/{components/src/blocks => blocks/src/components}/ColorPalette.stories.tsx (83%) rename lib/{components/src/blocks => blocks/src/components}/ColorPalette.tsx (98%) rename lib/{components/src/blocks => blocks/src/components}/Description.stories.tsx (83%) rename lib/{components/src/blocks => blocks/src/components}/Description.tsx (80%) rename lib/{components/src/blocks => blocks/src/components}/DocsPage.stories.tsx (92%) rename lib/{components/src/blocks => blocks/src/components}/DocsPage.tsx (96%) rename lib/{components/src/blocks => blocks/src/components}/DocsPageExampleCaption.md (100%) rename lib/{components/src/blocks => blocks/src/components}/DocsPageExampleCaption.mdx (100%) rename lib/{components/src/blocks => blocks/src/components}/EmptyBlock.stories.tsx (87%) rename lib/{components/src/blocks => blocks/src/components}/EmptyBlock.tsx (92%) rename lib/{components/src/blocks => blocks/src/components}/IFrame.tsx (100%) rename lib/{components/src/blocks => blocks/src/components}/IconGallery.stories.tsx (89%) rename lib/{components/src/blocks => blocks/src/components}/IconGallery.tsx (96%) rename lib/{components/src/blocks => blocks/src/components}/Preview.stories.tsx (76%) rename lib/{components/src/blocks => blocks/src/components}/Preview.tsx (96%) create mode 100644 lib/blocks/src/components/Source.stories.tsx rename lib/{components/src/blocks => blocks/src/components}/Source.tsx (97%) rename lib/{components/src/blocks => blocks/src/components}/Story.stories.tsx (91%) rename lib/{components/src/blocks => blocks/src/components}/Story.tsx (94%) create mode 100644 lib/blocks/src/components/Title.stories.ts create mode 100644 lib/blocks/src/components/Title.tsx rename lib/{components/src/blocks => blocks/src/components}/Toolbar.tsx (91%) rename lib/{components/src/blocks => blocks/src/components}/Typeset.stories.tsx (96%) rename lib/{components/src/blocks => blocks/src/components}/Typeset.tsx (96%) rename lib/{components/src/blocks => blocks/src/components}/ZoomContext.tsx (100%) rename lib/{components/src/blocks => blocks/src/components}/index.ts (90%) rename lib/{components => blocks}/src/controls/Boolean.stories.tsx (100%) rename lib/{components => blocks}/src/controls/Boolean.tsx (98%) rename lib/{components => blocks}/src/controls/Color.stories.tsx (100%) rename lib/{components => blocks}/src/controls/Color.tsx (98%) rename lib/{components => blocks}/src/controls/Date.stories.tsx (100%) rename lib/{components => blocks}/src/controls/Date.test.ts (100%) rename lib/{components => blocks}/src/controls/Date.tsx (98%) rename lib/{components => blocks}/src/controls/Files.tsx (95%) rename lib/{components => blocks}/src/controls/Number.stories.tsx (100%) rename lib/{components => blocks}/src/controls/Number.tsx (98%) rename lib/{components => blocks}/src/controls/Object.stories.tsx (100%) rename lib/{components => blocks}/src/controls/Object.tsx (98%) rename lib/{components => blocks}/src/controls/Range.stories.tsx (100%) rename lib/{components => blocks}/src/controls/Range.tsx (100%) rename lib/{components => blocks}/src/controls/Text.stories.tsx (100%) rename lib/{components => blocks}/src/controls/Text.tsx (96%) rename lib/{components => blocks}/src/controls/helpers.test.ts (100%) rename lib/{components => blocks}/src/controls/helpers.ts (100%) rename lib/{components => blocks}/src/controls/index.tsx (100%) rename lib/{components => blocks}/src/controls/options/Checkbox.tsx (100%) rename lib/{components => blocks}/src/controls/options/Options.stories.tsx (100%) rename lib/{components => blocks}/src/controls/options/Options.tsx (100%) rename lib/{components => blocks}/src/controls/options/Radio.tsx (100%) rename lib/{components => blocks}/src/controls/options/Select.tsx (98%) rename lib/{components => blocks}/src/controls/options/helpers.ts (100%) rename lib/{components => blocks}/src/controls/options/index.ts (100%) rename lib/{components => blocks}/src/controls/react-editable-json-tree/JsonNodes.tsx (100%) rename lib/{components => blocks}/src/controls/react-editable-json-tree/LICENSE.md (100%) rename lib/{components => blocks}/src/controls/react-editable-json-tree/index.tsx (100%) rename lib/{components => blocks}/src/controls/react-editable-json-tree/types/dataTypes.ts (100%) rename lib/{components => blocks}/src/controls/react-editable-json-tree/types/deltaTypes.ts (100%) rename lib/{components => blocks}/src/controls/react-editable-json-tree/types/inputUsageTypes.ts (100%) rename lib/{components => blocks}/src/controls/react-editable-json-tree/utils/objectTypes.ts (100%) rename lib/{components => blocks}/src/controls/react-editable-json-tree/utils/parse.ts (100%) rename lib/{components => blocks}/src/controls/react-editable-json-tree/utils/styles.ts (100%) rename lib/{components => blocks}/src/controls/types.ts (97%) create mode 100644 lib/blocks/src/index.ts create mode 100644 lib/blocks/src/typings.d.ts create mode 100644 lib/blocks/tsconfig.json delete mode 100644 lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx delete mode 100644 lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx delete mode 100644 lib/components/src/blocks/ArgsTable/SectionRow.stories.tsx delete mode 100644 lib/components/src/blocks/ArgsTable/TabbedArgsTable.stories.tsx delete mode 100644 lib/components/src/blocks/Source.stories.tsx diff --git a/addons/controls/package.json b/addons/controls/package.json index 02e7bfe4d629..3432ea00c628 100644 --- a/addons/controls/package.json +++ b/addons/controls/package.json @@ -40,6 +40,7 @@ "dependencies": { "@storybook/addons": "7.0.0-alpha.6", "@storybook/api": "7.0.0-alpha.6", + "@storybook/blocks": "7.0.0-alpha.6", "@storybook/client-logger": "7.0.0-alpha.6", "@storybook/components": "7.0.0-alpha.6", "@storybook/core-common": "7.0.0-alpha.6", diff --git a/addons/controls/src/ControlsPanel.tsx b/addons/controls/src/ControlsPanel.tsx index 6d74c4576235..afcdd3042147 100644 --- a/addons/controls/src/ControlsPanel.tsx +++ b/addons/controls/src/ControlsPanel.tsx @@ -7,7 +7,12 @@ import { useParameter, useStorybookState, } from '@storybook/api'; -import { ArgsTable, NoControlsWarning, PresetColor, SortType } from '@storybook/components'; +import { + PureArgsTable as ArgsTable, + NoControlsWarning, + PresetColor, + SortType, +} from '@storybook/blocks'; import { PARAM_KEY } from './constants'; diff --git a/addons/docs/package.json b/addons/docs/package.json index d9e30d4ff7d9..79625dcf5513 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -54,6 +54,7 @@ "@mdx-js/react": "^1.6.22", "@storybook/addons": "7.0.0-alpha.6", "@storybook/api": "7.0.0-alpha.6", + "@storybook/blocks": "7.0.0-alpha.6", "@storybook/components": "7.0.0-alpha.6", "@storybook/core-common": "7.0.0-alpha.6", "@storybook/core-events": "7.0.0-alpha.6", diff --git a/addons/docs/src/blocks/index.ts b/addons/docs/src/blocks/index.ts index d6d86460ca91..119f7ce62757 100644 --- a/addons/docs/src/blocks/index.ts +++ b/addons/docs/src/blocks/index.ts @@ -1,28 +1 @@ -export { ColorPalette, ColorItem, IconGallery, IconItem, Typeset } from '@storybook/components'; - -export * from './Anchor'; -export * from './ArgsTable'; -export * from './Canvas'; -export * from './Description'; -export * from './DocsContext'; -export * from './DocsPage'; -export * from './DocsContainer'; -export * from './DocsRenderer'; // For testing -export * from './ExternalDocsContainer'; -export * from './DocsStory'; -export * from './Heading'; -export * from './Meta'; -export * from './Preview'; -export * from './Primary'; -export * from './Props'; -export * from './Source'; -export * from './SourceContainer'; -export * from './Stories'; -export * from './Story'; -export * from './Subheading'; -export * from './Subtitle'; -export * from './Title'; -export * from './Wrapper'; - -export * from './types'; -export * from './mdx'; +export * from '@storybook/blocks'; diff --git a/addons/docs/src/preview.ts b/addons/docs/src/preview.ts index 1cb1b297f323..c425f1f9d7f2 100644 --- a/addons/docs/src/preview.ts +++ b/addons/docs/src/preview.ts @@ -1,7 +1,7 @@ -export const parameters = { +export const parameters: any = { docs: { renderer: async () => { - const { DocsRenderer } = await import('./blocks/DocsRenderer'); + const { DocsRenderer } = (await import('./blocks')) as any; return new DocsRenderer(); }, }, diff --git a/examples/doc-blocks/.env b/examples/doc-blocks/.env new file mode 100644 index 000000000000..1566bb1d76a7 --- /dev/null +++ b/examples/doc-blocks/.env @@ -0,0 +1 @@ +FOO=bar \ No newline at end of file diff --git a/examples/doc-blocks/.storybook/main.ts b/examples/doc-blocks/.storybook/main.ts new file mode 100644 index 000000000000..e70bfc60a59c --- /dev/null +++ b/examples/doc-blocks/.storybook/main.ts @@ -0,0 +1,26 @@ +import type { StorybookConfig } from '@storybook/react-webpack5/types'; + +const config: StorybookConfig = { + stories: ['../../../lib/blocks/src/**/*.stories.*'], + logLevel: 'debug', + addons: ['@storybook/addon-essentials'], + core: { + channelOptions: { allowFunction: false, maxDepth: 10 }, + disableTelemetry: true, + }, + typescript: { + check: true, + checkOptions: {}, + }, + features: { + postcss: false, + storyStoreV7: true, + buildStoriesJson: true, + babelModeV7: true, + warnOnLegacyHierarchySeparator: false, + previewMdx2: true, + breakingChangesV7: true, + }, + framework: '@storybook/react-webpack5', +}; +module.exports = config; diff --git a/examples/doc-blocks/.storybook/manager.js b/examples/doc-blocks/.storybook/manager.js new file mode 100644 index 000000000000..ece01ccdfaee --- /dev/null +++ b/examples/doc-blocks/.storybook/manager.js @@ -0,0 +1,8 @@ +import { addons } from '@storybook/addons'; +import startCase from 'lodash/startCase'; + +addons.setConfig({ + sidebar: { + renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)), + }, +}); diff --git a/examples/doc-blocks/.storybook/preview.tsx b/examples/doc-blocks/.storybook/preview.tsx new file mode 100644 index 000000000000..0fad8873ab2f --- /dev/null +++ b/examples/doc-blocks/.storybook/preview.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { Global, ThemeProvider, convert, themes, createReset } from '@storybook/theming'; + +export const decorators = [ + (StoryFn) => ( + + + + + ), +]; diff --git a/examples/doc-blocks/README.md b/examples/doc-blocks/README.md new file mode 100644 index 000000000000..70d4f2ccb02b --- /dev/null +++ b/examples/doc-blocks/README.md @@ -0,0 +1,3 @@ +# Storybook TS example + +This Storybook demonstrates support for TypeScript in Storybook without additional configuration. diff --git a/examples/doc-blocks/babel.config.js b/examples/doc-blocks/babel.config.js new file mode 100644 index 000000000000..15c60d36130c --- /dev/null +++ b/examples/doc-blocks/babel.config.js @@ -0,0 +1,7 @@ +module.exports = { + presets: [ + ['@babel/preset-env', { targets: { chrome: '100' } }], + '@babel/preset-react', + '@babel/preset-typescript', + ], +}; diff --git a/examples/doc-blocks/package.json b/examples/doc-blocks/package.json new file mode 100644 index 000000000000..a4de3e14835f --- /dev/null +++ b/examples/doc-blocks/package.json @@ -0,0 +1,40 @@ +{ + "name": "@storybook/example-doc-blocks", + "version": "7.0.0-alpha.6", + "private": true, + "scripts": { + "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb build", + "debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true yarn sb dev -p 9011", + "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb dev -p 9010 --no-manager-cache" + }, + "dependencies": { + "react": "16.14.0", + "react-dom": "16.14.0" + }, + "devDependencies": { + "@babel/preset-env": "^7.12.11", + "@babel/preset-react": "^7.12.10", + "@babel/preset-typescript": "^7.12.7", + "@storybook/addon-essentials": "7.0.0-alpha.6", + "@storybook/addon-storyshots": "7.0.0-alpha.6", + "@storybook/addon-storysource": "7.0.0-alpha.6", + "@storybook/addons": "7.0.0-alpha.6", + "@storybook/cli": "7.0.0-alpha.6", + "@storybook/components": "7.0.0-alpha.6", + "@storybook/react-webpack5": "7.0.0-alpha.6", + "@storybook/theming": "7.0.0-alpha.6", + "@types/babel__preset-env": "^7", + "@types/react": "^16.14.23", + "@types/react-dom": "^16.9.14", + "cross-env": "^7.0.3", + "lodash": "^4.17.21", + "sb": "7.0.0-alpha.6", + "typescript": "~4.6.3", + "webpack": "5" + }, + "storybook": { + "chromatic": { + "projectToken": "2ea6e5abac97" + } + } +} diff --git a/examples/doc-blocks/tsconfig.json b/examples/doc-blocks/tsconfig.json new file mode 100644 index 000000000000..2a9856e4b65a --- /dev/null +++ b/examples/doc-blocks/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "esModuleInterop": true, + "jsx": "preserve", + "skipLibCheck": true, + "strict": true + }, + "include": [ + "src/*", + ".storybook/main.ts" + ] +} \ No newline at end of file diff --git a/lib/blocks/README.md b/lib/blocks/README.md new file mode 100644 index 000000000000..2a2555b37eef --- /dev/null +++ b/lib/blocks/README.md @@ -0,0 +1,23 @@ +# Storybook Doc Blocks + +Portable documentation components for building design systems in Storybook. + +## Blocks development + +To bootstrap, in the monorepo root: + +```sh +yarn && yarn bootstrap --core +``` + +To develop this package, in the monorepo root: + +```sh +yarn build blocks --watch +``` + +To run storybook, in this directory: + +```sh +yarn storybook +``` diff --git a/lib/blocks/package.json b/lib/blocks/package.json new file mode 100644 index 000000000000..a3bd8a05caa4 --- /dev/null +++ b/lib/blocks/package.json @@ -0,0 +1,68 @@ +{ + "name": "@storybook/blocks", + "version": "7.0.0-alpha.6", + "description": "Storybook Doc Blocks", + "keywords": [ + "storybook" + ], + "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/blocks", + "bugs": { + "url": "https://github.com/storybookjs/storybook/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/storybookjs/storybook.git", + "directory": "lib/blocks" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "license": "MIT", + "sideEffects": false, + "main": "dist/cjs/index.js", + "module": "dist/esm/index.js", + "types": "dist/types/index.d.ts", + "files": [ + "dist/**/*", + "README.md", + "*.js", + "*.d.ts" + ], + "scripts": { + "prepare": "node ../../scripts/prepare.js" + }, + "dependencies": { + "@mdx-js/react": "^1.6.22", + "@storybook/addons": "7.0.0-alpha.6", + "@storybook/api": "7.0.0-alpha.6", + "@storybook/client-logger": "7.0.0-alpha.6", + "@storybook/components": "7.0.0-alpha.6", + "@storybook/core-events": "7.0.0-alpha.6", + "@storybook/csf": "0.0.2--canary.7c6c115.0", + "@storybook/docs-tools": "7.0.0-alpha.6", + "@storybook/preview-web": "7.0.0-alpha.6", + "@storybook/store": "7.0.0-alpha.6", + "@storybook/theming": "7.0.0-alpha.6", + "color-convert": "^2.0.1", + "core-js": "^3.8.2", + "fast-deep-equal": "^3.1.3", + "global": "^4.4.0", + "lodash": "^4.17.21", + "markdown-to-jsx": "^7.1.3", + "memoizerific": "^1.11.3", + "polished": "^4.2.2", + "react-colorful": "^5.1.2", + "regenerator-runtime": "^0.13.7", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "publishConfig": { + "access": "public" + }, + "gitHead": "b2e85f3599c043815b18bbfc5ca563bf1c6e4add" +} diff --git a/addons/docs/src/blocks/Anchor.tsx b/lib/blocks/src/blocks/Anchor.tsx similarity index 100% rename from addons/docs/src/blocks/Anchor.tsx rename to lib/blocks/src/blocks/Anchor.tsx diff --git a/addons/docs/src/blocks/ArgsTable.tsx b/lib/blocks/src/blocks/ArgsTable.tsx similarity index 99% rename from addons/docs/src/blocks/ArgsTable.tsx rename to lib/blocks/src/blocks/ArgsTable.tsx index d30792f387b0..47da0897c90c 100644 --- a/addons/docs/src/blocks/ArgsTable.tsx +++ b/lib/blocks/src/blocks/ArgsTable.tsx @@ -1,17 +1,17 @@ import React, { FC, useContext, useEffect, useState, useCallback } from 'react'; import mapValues from 'lodash/mapValues'; +import { ArgTypesExtractor } from '@storybook/docs-tools'; +import { addons } from '@storybook/addons'; +import { filterArgTypes, PropDescriptor } from '@storybook/store'; +import Events from '@storybook/core-events'; +import { StrictArgTypes, Args, Globals } from '@storybook/csf'; import { ArgsTable as PureArgsTable, ArgsTableProps as PureArgsTableProps, ArgsTableError, 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'; -import { StrictArgTypes, Args, Globals } from '@storybook/csf'; +} from '../components'; import { DocsContext, DocsContextProps } from './DocsContext'; import { Component, CURRENT_SELECTION, PRIMARY_STORY } from './types'; diff --git a/addons/docs/src/blocks/Canvas.tsx b/lib/blocks/src/blocks/Canvas.tsx similarity index 97% rename from addons/docs/src/blocks/Canvas.tsx rename to lib/blocks/src/blocks/Canvas.tsx index 565224700046..13fa8b61ac0e 100644 --- a/addons/docs/src/blocks/Canvas.tsx +++ b/lib/blocks/src/blocks/Canvas.tsx @@ -1,12 +1,12 @@ import React, { FC, ReactElement, ReactNode, ReactNodeArray, useContext } from 'react'; import { MDXProvider } from '@mdx-js/react'; import { toId, storyNameFromExport, AnyFramework } from '@storybook/csf'; +import { resetComponents } from '@storybook/components'; import { - resetComponents, Preview as PurePreview, PreviewProps as PurePreviewProps, PreviewSkeleton, -} from '@storybook/components'; +} from '../components'; import { DocsContext, DocsContextProps } from './DocsContext'; import { SourceContext, SourceContextProps } from './SourceContainer'; import { getSourceProps, SourceState } from './Source'; diff --git a/addons/docs/src/blocks/Description.tsx b/lib/blocks/src/blocks/Description.tsx similarity index 98% rename from addons/docs/src/blocks/Description.tsx rename to lib/blocks/src/blocks/Description.tsx index 2c55f10e740a..7d2b839ac3b4 100644 --- a/addons/docs/src/blocks/Description.tsx +++ b/lib/blocks/src/blocks/Description.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent, useContext } from 'react'; -import { Description, DescriptionProps as PureDescriptionProps } from '@storybook/components'; import { str } from '@storybook/docs-tools'; +import { Description, DescriptionProps as PureDescriptionProps } from '../components'; import { DocsContext, DocsContextProps } from './DocsContext'; import { Component, CURRENT_SELECTION } from './types'; diff --git a/addons/docs/src/blocks/DocsContainer.tsx b/lib/blocks/src/blocks/DocsContainer.tsx similarity index 96% rename from addons/docs/src/blocks/DocsContainer.tsx rename to lib/blocks/src/blocks/DocsContainer.tsx index cb3738804daf..7e0febccf410 100644 --- a/addons/docs/src/blocks/DocsContainer.tsx +++ b/lib/blocks/src/blocks/DocsContainer.tsx @@ -4,8 +4,9 @@ import deprecate from 'util-deprecate'; import dedent from 'ts-dedent'; import { MDXProvider } from '@mdx-js/react'; import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming'; -import { DocsWrapper, DocsContent, components as htmlComponents } from '@storybook/components'; +import { components as htmlComponents } from '@storybook/components'; import { AnyFramework } from '@storybook/csf'; +import { DocsWrapper, DocsContent } from '../components'; import { DocsContextProps, DocsContext } from './DocsContext'; import { anchorBlockIdFromId } from './Anchor'; import { storyBlockIdFromId } from './Story'; diff --git a/addons/docs/src/blocks/DocsContext.ts b/lib/blocks/src/blocks/DocsContext.ts similarity index 100% rename from addons/docs/src/blocks/DocsContext.ts rename to lib/blocks/src/blocks/DocsContext.ts diff --git a/addons/docs/src/blocks/DocsPage.test.ts b/lib/blocks/src/blocks/DocsPage.test.ts similarity index 100% rename from addons/docs/src/blocks/DocsPage.test.ts rename to lib/blocks/src/blocks/DocsPage.test.ts diff --git a/addons/docs/src/blocks/DocsPage.tsx b/lib/blocks/src/blocks/DocsPage.tsx similarity index 100% rename from addons/docs/src/blocks/DocsPage.tsx rename to lib/blocks/src/blocks/DocsPage.tsx diff --git a/addons/docs/src/blocks/DocsRenderer.tsx b/lib/blocks/src/blocks/DocsRenderer.tsx similarity index 100% rename from addons/docs/src/blocks/DocsRenderer.tsx rename to lib/blocks/src/blocks/DocsRenderer.tsx diff --git a/addons/docs/src/blocks/DocsStory.tsx b/lib/blocks/src/blocks/DocsStory.tsx similarity index 100% rename from addons/docs/src/blocks/DocsStory.tsx rename to lib/blocks/src/blocks/DocsStory.tsx diff --git a/addons/docs/src/blocks/ExternalDocsContainer.tsx b/lib/blocks/src/blocks/ExternalDocsContainer.tsx similarity index 100% rename from addons/docs/src/blocks/ExternalDocsContainer.tsx rename to lib/blocks/src/blocks/ExternalDocsContainer.tsx diff --git a/addons/docs/src/blocks/ExternalPreview.test.ts b/lib/blocks/src/blocks/ExternalPreview.test.ts similarity index 100% rename from addons/docs/src/blocks/ExternalPreview.test.ts rename to lib/blocks/src/blocks/ExternalPreview.test.ts diff --git a/addons/docs/src/blocks/ExternalPreview.ts b/lib/blocks/src/blocks/ExternalPreview.ts similarity index 100% rename from addons/docs/src/blocks/ExternalPreview.ts rename to lib/blocks/src/blocks/ExternalPreview.ts diff --git a/addons/docs/src/blocks/Heading.tsx b/lib/blocks/src/blocks/Heading.tsx similarity index 100% rename from addons/docs/src/blocks/Heading.tsx rename to lib/blocks/src/blocks/Heading.tsx diff --git a/addons/docs/src/blocks/Meta.tsx b/lib/blocks/src/blocks/Meta.tsx similarity index 100% rename from addons/docs/src/blocks/Meta.tsx rename to lib/blocks/src/blocks/Meta.tsx diff --git a/addons/docs/src/blocks/Preview.tsx b/lib/blocks/src/blocks/Preview.tsx similarity index 100% rename from addons/docs/src/blocks/Preview.tsx rename to lib/blocks/src/blocks/Preview.tsx diff --git a/addons/docs/src/blocks/Primary.tsx b/lib/blocks/src/blocks/Primary.tsx similarity index 100% rename from addons/docs/src/blocks/Primary.tsx rename to lib/blocks/src/blocks/Primary.tsx diff --git a/addons/docs/src/blocks/Props.tsx b/lib/blocks/src/blocks/Props.tsx similarity index 100% rename from addons/docs/src/blocks/Props.tsx rename to lib/blocks/src/blocks/Props.tsx diff --git a/addons/docs/src/blocks/Source.tsx b/lib/blocks/src/blocks/Source.tsx similarity index 97% rename from addons/docs/src/blocks/Source.tsx rename to lib/blocks/src/blocks/Source.tsx index 5706e216f6e8..c714ed6a33b9 100644 --- a/addons/docs/src/blocks/Source.tsx +++ b/lib/blocks/src/blocks/Source.tsx @@ -1,12 +1,12 @@ import React, { ComponentProps, FC, useContext } from 'react'; -import { Source as PureSource, SourceError } from '@storybook/components'; import type { StoryId, Parameters } from '@storybook/api'; import type { Story } from '@storybook/store'; +import { SourceType } from '@storybook/docs-tools'; +import { Source as PureSource, SourceError } from '../components'; import { DocsContext, DocsContextProps } from './DocsContext'; import { SourceContext, SourceContextProps, SourceItem } from './SourceContainer'; import { CURRENT_SELECTION } from './types'; -import { SourceType } from '../shared'; import { enhanceSource } from './enhanceSource'; import { useStories } from './useStory'; diff --git a/addons/docs/src/blocks/SourceContainer.tsx b/lib/blocks/src/blocks/SourceContainer.tsx similarity index 96% rename from addons/docs/src/blocks/SourceContainer.tsx rename to lib/blocks/src/blocks/SourceContainer.tsx index c15840d47adc..974a52f9e7a6 100644 --- a/addons/docs/src/blocks/SourceContainer.tsx +++ b/lib/blocks/src/blocks/SourceContainer.tsx @@ -1,9 +1,11 @@ import React, { FC, Context, createContext, useEffect, useState } from 'react'; + import deepEqual from 'fast-deep-equal'; import { addons } from '@storybook/addons'; + +import { SNIPPET_RENDERED } from '@storybook/docs-tools'; import type { SyntaxHighlighterFormatTypes } from '@storybook/components'; import type { StoryId } from '@storybook/api'; -import { SNIPPET_RENDERED } from '../shared'; export interface SourceItem { code: string; diff --git a/addons/docs/src/blocks/Stories.tsx b/lib/blocks/src/blocks/Stories.tsx similarity index 100% rename from addons/docs/src/blocks/Stories.tsx rename to lib/blocks/src/blocks/Stories.tsx diff --git a/addons/docs/src/blocks/Story.tsx b/lib/blocks/src/blocks/Story.tsx similarity index 97% rename from addons/docs/src/blocks/Story.tsx rename to lib/blocks/src/blocks/Story.tsx index 85414666eb84..7d6df5bf3465 100644 --- a/addons/docs/src/blocks/Story.tsx +++ b/lib/blocks/src/blocks/Story.tsx @@ -9,10 +9,11 @@ import React, { useState, } from 'react'; import { MDXProvider } from '@mdx-js/react'; -import { resetComponents, Story as PureStory, StorySkeleton } from '@storybook/components'; +import { resetComponents } from '@storybook/components'; import { StoryId, toId, storyNameFromExport, StoryAnnotations, AnyFramework } from '@storybook/csf'; import type { ModuleExport, ModuleExports, Story as StoryType } from '@storybook/store'; +import { Story as PureStory, StorySkeleton } from '../components'; import { CURRENT_SELECTION } from './types'; import { DocsContext, DocsContextProps } from './DocsContext'; import { useStory } from './useStory'; diff --git a/addons/docs/src/blocks/Subheading.tsx b/lib/blocks/src/blocks/Subheading.tsx similarity index 100% rename from addons/docs/src/blocks/Subheading.tsx rename to lib/blocks/src/blocks/Subheading.tsx diff --git a/addons/docs/src/blocks/Subtitle.tsx b/lib/blocks/src/blocks/Subtitle.tsx similarity index 89% rename from addons/docs/src/blocks/Subtitle.tsx rename to lib/blocks/src/blocks/Subtitle.tsx index 64e160176dd5..536d7a19ff0d 100644 --- a/addons/docs/src/blocks/Subtitle.tsx +++ b/lib/blocks/src/blocks/Subtitle.tsx @@ -1,5 +1,5 @@ import React, { useContext, FunctionComponent } from 'react'; -import { Subtitle as PureSubtitle } from '@storybook/components'; +import { Subtitle as PureSubtitle } from '../components'; import { DocsContext } from './DocsContext'; interface SubtitleProps { diff --git a/addons/docs/src/blocks/Title.tsx b/lib/blocks/src/blocks/Title.tsx similarity index 92% rename from addons/docs/src/blocks/Title.tsx rename to lib/blocks/src/blocks/Title.tsx index 100b8b2926df..3c043bc2015f 100644 --- a/addons/docs/src/blocks/Title.tsx +++ b/lib/blocks/src/blocks/Title.tsx @@ -1,5 +1,5 @@ import React, { useContext, FunctionComponent } from 'react'; -import { Title as PureTitle } from '@storybook/components'; +import { Title as PureTitle } from '../components'; import { DocsContext, DocsContextProps } from './DocsContext'; interface TitleProps { diff --git a/addons/docs/src/blocks/Wrapper.tsx b/lib/blocks/src/blocks/Wrapper.tsx similarity index 100% rename from addons/docs/src/blocks/Wrapper.tsx rename to lib/blocks/src/blocks/Wrapper.tsx diff --git a/addons/docs/src/blocks/enhanceSource.test.ts b/lib/blocks/src/blocks/enhanceSource.test.ts similarity index 100% rename from addons/docs/src/blocks/enhanceSource.test.ts rename to lib/blocks/src/blocks/enhanceSource.test.ts diff --git a/addons/docs/src/blocks/enhanceSource.ts b/lib/blocks/src/blocks/enhanceSource.ts similarity index 100% rename from addons/docs/src/blocks/enhanceSource.ts rename to lib/blocks/src/blocks/enhanceSource.ts diff --git a/lib/blocks/src/blocks/index.ts b/lib/blocks/src/blocks/index.ts new file mode 100644 index 000000000000..14453d462802 --- /dev/null +++ b/lib/blocks/src/blocks/index.ts @@ -0,0 +1,29 @@ +export { ColorPalette, ColorItem, IconGallery, IconItem, Typeset } from '../components'; + +export * from './Anchor'; +export * from './ArgsTable'; +export * from './Canvas'; +export * from './Description'; +export * from './DocsContext'; +export * from './DocsRenderer'; +export * from './DocsPage'; +export * from './DocsContainer'; +export * from './DocsStory'; +export * from './ExternalDocsContainer'; +export * from './ExternalPreview'; +export * from './Heading'; +export * from './Meta'; +export * from './Preview'; +export * from './Primary'; +export * from './Props'; +export * from './Source'; +export * from './SourceContainer'; +export * from './Stories'; +export * from './Story'; +export * from './Subheading'; +export * from './Subtitle'; +export * from './Title'; +export * from './Wrapper'; + +export * from './types'; +export * from './mdx'; diff --git a/addons/docs/src/blocks/mdx.tsx b/lib/blocks/src/blocks/mdx.tsx similarity index 98% rename from addons/docs/src/blocks/mdx.tsx rename to lib/blocks/src/blocks/mdx.tsx index 953bd22266b3..e3b468bb5089 100644 --- a/addons/docs/src/blocks/mdx.tsx +++ b/lib/blocks/src/blocks/mdx.tsx @@ -1,9 +1,10 @@ import React, { FC, SyntheticEvent } from 'react'; import { addons } from '@storybook/addons'; import { NAVIGATE_URL } from '@storybook/core-events'; -import { Source, Code, components } from '@storybook/components'; +import { Code, components } from '@storybook/components'; import global from 'global'; import { styled } from '@storybook/theming'; +import { Source } from '../components'; import { DocsContext, DocsContextProps } from './DocsContext'; const { document } = global; diff --git a/addons/docs/src/blocks/types.ts b/lib/blocks/src/blocks/types.ts similarity index 100% rename from addons/docs/src/blocks/types.ts rename to lib/blocks/src/blocks/types.ts diff --git a/addons/docs/src/blocks/useStory.ts b/lib/blocks/src/blocks/useStory.ts similarity index 100% rename from addons/docs/src/blocks/useStory.ts rename to lib/blocks/src/blocks/useStory.ts diff --git a/addons/docs/src/blocks/utils.ts b/lib/blocks/src/blocks/utils.ts similarity index 100% rename from addons/docs/src/blocks/utils.ts rename to lib/blocks/src/blocks/utils.ts diff --git a/lib/components/src/blocks/ArgsTable/ArgControl.tsx b/lib/blocks/src/components/ArgsTable/ArgControl.tsx similarity index 100% rename from lib/components/src/blocks/ArgsTable/ArgControl.tsx rename to lib/blocks/src/components/ArgsTable/ArgControl.tsx index ca5eccee3ce7..9399ef6a0681 100644 --- a/lib/components/src/blocks/ArgsTable/ArgControl.tsx +++ b/lib/blocks/src/components/ArgsTable/ArgControl.tsx @@ -1,5 +1,4 @@ import React, { FC, useCallback, useState, useEffect } from 'react'; -import { Args, ArgType } from './types'; import { BooleanControl, ColorControl, @@ -11,6 +10,7 @@ import { RangeControl, TextControl, } from '../../controls'; +import { Args, ArgType } from './types'; export interface ArgControlProps { row: ArgType; diff --git a/lib/components/src/blocks/ArgsTable/ArgJsDoc.tsx b/lib/blocks/src/components/ArgsTable/ArgJsDoc.tsx similarity index 97% rename from lib/components/src/blocks/ArgsTable/ArgJsDoc.tsx rename to lib/blocks/src/components/ArgsTable/ArgJsDoc.tsx index 3148abeb457e..ff19db281037 100644 --- a/lib/components/src/blocks/ArgsTable/ArgJsDoc.tsx +++ b/lib/blocks/src/components/ArgsTable/ArgJsDoc.tsx @@ -1,7 +1,7 @@ import React, { FC } from 'react'; import { styled } from '@storybook/theming'; +import { codeCommon } from '@storybook/components'; import { JsDocTags } from './types'; -import { codeCommon } from '../../typography/lib/common'; interface ArgJsDocArgs { tags: JsDocTags; diff --git a/lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx b/lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx new file mode 100644 index 000000000000..361d4b635c6f --- /dev/null +++ b/lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx @@ -0,0 +1,399 @@ +import React from 'react'; +import { ResetWrapper } from '@storybook/components'; +import { ArgRow } from './ArgRow'; +import { TableWrapper } from './ArgsTable'; + +export default { + component: ArgRow, + decorators: [ + (getStory) => ( + + + {getStory()} + + + ), + ], + argTypes: { + updateArgs: { action: 'updateArgs' }, + }, +}; + +export const String = { + args: { + row: { + key: 'someString', + name: 'Some String', + description: 'someString description', + type: { + required: true, + }, + control: { + type: 'text', + }, + table: { + type: { + summary: 'string', + }, + defaultValue: { + summary: 'reallylongstringnospaces', + }, + }, + }, + }, +}; + +export const LongName = { + args: { + row: { ...String.args.row, name: 'Really Long String That Takes Up Space' }, + }, +}; + +export const LongDesc = { + args: { + row: { + ...String.args.row, + description: 'really long description that takes up a lot of space. sometimes this happens.', + }, + }, +}; + +export const Boolean = { + args: { + row: { + key: 'someBoolean', + name: 'Some Boolean', + description: 'someBoolean description', + type: { + required: true, + }, + control: { + type: 'boolean', + }, + table: { + type: { + summary: 'string', + }, + defaultValue: { + summary: 'fixme', + }, + }, + }, + }, +}; + +export const Color = { + args: { + row: { + key: 'someColor', + name: 'Some Color', + type: { + name: 'string', + }, + description: 'someColor description', + defaultValue: '#ff0', + control: { + type: 'color', + }, + }, + }, +}; + +export const Date = { + args: { + row: { + key: 'someDate', + name: 'Some Date', + type: { + name: 'string', + }, + description: 'someDate description', + control: { + type: 'date', + }, + }, + }, +}; + +export const Number = { + args: { + row: { + key: 'someNumber', + name: 'Some Number', + description: 'someNumber description', + type: { + required: false, + }, + table: { + type: { + summary: 'number', + }, + defaultValue: { + summary: '0', + }, + }, + control: { + type: 'number', + }, + }, + }, +}; + +export const Range = { + args: { + row: { + ...Number.args.row, + control: { + type: 'range', + }, + }, + }, +}; + +export const Radio = { + args: { + row: { + key: 'someEnum', + name: 'Some Enum', + description: 'someEnum description', + control: { + type: 'radio', + options: ['a', 'b', 'c'], + }, + }, + }, +}; + +export const InlineRadio = { + args: { + row: { ...Radio.args.row, control: { ...Radio.args.row.control, type: 'inline-radio' } }, + }, +}; + +export const Check = { + args: { + row: { ...Radio.args.row, control: { ...Radio.args.row.control, type: 'check' } }, + }, +}; + +export const InlineCheck = { + args: { + row: { ...Radio.args.row, control: { ...Radio.args.row.control, type: 'inline-check' } }, + }, +}; + +export const Select = { + args: { + row: { ...Radio.args.row, control: { ...Radio.args.row.control, type: 'select' } }, + }, +}; + +export const MultiSelect = { + args: { + row: { ...Radio.args.row, control: { ...Radio.args.row.control, type: 'multi-select' } }, + }, +}; + +export const ObjectOf = { + args: { + row: { + key: 'someObject', + name: 'Some Object', + description: 'A simple `objectOf` propType.', + table: { + type: { + summary: 'objectOf(number)', + }, + defaultValue: { + summary: '{ key: 1 }', + }, + }, + control: { + type: 'object', + }, + }, + }, +}; + +export const ArrayOf = { + args: { + row: { + key: 'someArray', + name: 'Some Array', + description: 'array of a certain type', + table: { + type: { + summary: 'number[]', + }, + defaultValue: { + summary: '[1, 2, 3]', + }, + }, + control: { + type: 'array', + }, + }, + }, +}; + +export const ComplexObject = { + args: { + row: { + key: 'someComplex', + name: 'Some Complex', + description: 'A very complex `objectOf` propType.', + table: { + type: { + summary: 'object', + detail: `[{ + id: number, + func: func, + arr: [{ index: number }] + }]`, + }, + defaultValue: { + summary: 'object', + detail: `[{ + id: 1, + func: () => {}, + arr: [{ index: 1 }] + }]`, + }, + }, + control: { + type: 'object', + }, + }, + }, +}; + +export const Func = { + args: { + row: { + key: 'concat', + name: 'Concat', + description: 'concat 2 string values.', + type: { + required: true, + }, + table: { + type: { + summary: '(a: string, b: string) => string', + }, + defaultValue: { + summary: 'func', + detail: '(a, b) => { return a + b; }', + }, + jsDocTags: { + params: [ + { + name: 'a', + description: 'The first string', + }, + { + name: 'b', + description: 'The second string', + }, + ], + returns: { + description: 'The concatenation of both strings', + }, + }, + }, + control: false, + }, + }, +}; + +const enumeration = + '"search" | "arrow-to-bottom" | "arrow-to-right" | "bell" | "check" | "check-circle"'; +export const Enum = { + args: { + row: { + key: 'enum', + name: 'Some enum', + type: { + required: true, + }, + table: { + type: { + summary: enumeration, + }, + }, + }, + }, +}; + +const longEnumeration = + '"search" | "arrow-to-bottom" | "arrow-to-right" | "bell" | "check" | "check-circle" | "chevron-up" | "chevron-down" | "chevron-left" | "chevron-right" | "envelope" | "exchange" | "file" | "file-check" | "file-import" | "file-pdf" | "file-times" | "pencil" | "question" | "question-circle" | "sitemap" | "user" | "times" | "plus" | "exclamation-triangle" | "trash-alt" | "long-arrow-up" | "long-arrow-down" | "long-arrow-left" | "long-arrow-right" | "external-link-alt" | "sticky-note" | "chart-line" | "spinner-third"'; +export const LongEnum = { + args: { + row: { + key: 'longEnum', + name: 'Long enum', + type: { + required: true, + }, + table: { + type: { + summary: longEnumeration, + }, + }, + }, + }, +}; + +const complexUnion = + '((a: string | SVGSVGElement) => void) | RefObject | [a|b] | {a|b}'; +export const ComplexUnion = { + args: { + row: { + key: 'complexUnion', + name: 'Complex', + type: { + required: true, + }, + table: { + type: { + summary: complexUnion, + }, + }, + }, + }, +}; + +export const Markdown = { + args: { + row: { + key: 'someString', + name: 'Some String', + description: + 'A `prop` can *support* __markdown__ syntax. This was ship in ~~5.2~~ 5.3. [Find more info in the storybook docs.](https://storybook.js.org/)', + table: { + type: { + summary: 'string', + }, + }, + control: { + type: 'text', + }, + }, + }, +}; + +export const StringCompact = { + args: { ...String.args, compact: true }, +}; + +export const StringNoControls = { + args: { + row: String.args.row, + }, +}; + +export const StringNoControlsCompact = { + args: { + row: String.args.row, + compact: true, + }, +}; diff --git a/lib/components/src/blocks/ArgsTable/ArgRow.tsx b/lib/blocks/src/components/ArgsTable/ArgRow.tsx similarity index 98% rename from lib/components/src/blocks/ArgsTable/ArgRow.tsx rename to lib/blocks/src/components/ArgsTable/ArgRow.tsx index 0a29f7f858d8..a53201810f28 100644 --- a/lib/components/src/blocks/ArgsTable/ArgRow.tsx +++ b/lib/blocks/src/components/ArgsTable/ArgRow.tsx @@ -2,11 +2,11 @@ import React, { FC } from 'react'; import Markdown from 'markdown-to-jsx'; import { transparentize } from 'polished'; import { styled } from '@storybook/theming'; +import { codeCommon } from '@storybook/components'; import { ArgType, Args, TableAnnotation } from './types'; import { ArgJsDoc } from './ArgJsDoc'; import { ArgValue } from './ArgValue'; import { ArgControl, ArgControlProps } from './ArgControl'; -import { codeCommon } from '../../typography/lib/common'; interface ArgRowProps { row: ArgType; diff --git a/lib/components/src/blocks/ArgsTable/ArgValue.tsx b/lib/blocks/src/components/ArgsTable/ArgValue.tsx similarity index 95% rename from lib/components/src/blocks/ArgsTable/ArgValue.tsx rename to lib/blocks/src/components/ArgsTable/ArgValue.tsx index a7e92a2b6e5f..cdd5ef443853 100644 --- a/lib/components/src/blocks/ArgsTable/ArgValue.tsx +++ b/lib/blocks/src/components/ArgsTable/ArgValue.tsx @@ -1,12 +1,9 @@ import React, { FC, useState } from 'react'; -import { styled } from '@storybook/theming'; import memoize from 'memoizerific'; import uniq from 'lodash/uniq'; +import { styled } from '@storybook/theming'; +import { WithTooltipPure, Icons, SyntaxHighlighter, codeCommon } from '@storybook/components'; import { PropSummaryValue } from './types'; -import { WithTooltipPure } from '../../tooltip/lazy-WithTooltip'; -import { Icons } from '../../icon/icon'; -import { SyntaxHighlighter } from '../../syntaxhighlighter/lazy-syntaxhighlighter'; -import { codeCommon } from '../../typography/lib/common'; interface ArgValueProps { value?: PropSummaryValue; diff --git a/lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx b/lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx new file mode 100644 index 000000000000..31358c3c1a11 --- /dev/null +++ b/lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx @@ -0,0 +1,155 @@ +import React from 'react'; +import { action } from '@storybook/addon-actions'; +import { styled } from '@storybook/theming'; +import { ArgsTable, ArgsTableError } from './ArgsTable'; +import { NoControlsWarning } from './NoControlsWarning'; +import * as ArgRow from './ArgRow.stories'; + +export default { + component: ArgsTable, + title: 'Components/ArgsTable/ArgsTable', + args: { + updateArgs: action('updateArgs'), + resetArgs: action('resetArgs'), + }, +}; +const propsSection = { + category: 'props ', +}; +const eventsSection = { + category: 'events ', +}; +const componentSubsection = { + subcategory: 'MyComponent ', +}; +const htmlElementSubsection = { + subcategory: 'HTMLElement', +}; +const stringType = ArgRow.String.args.row; +const numberType = ArgRow.Number.args.row; +const longEnumType = ArgRow.LongEnum.args.row; + +export const Loading = { + args: { + isLoading: true, + }, +}; + +export const Normal = { + args: { + rows: { + stringType, + numberType, + }, + }, +}; + +export const Compact = { + args: { ...Normal.args, compact: true }, +}; + +const AddonPanelLayout = styled.div(({ theme }) => ({ + fontSize: theme.typography.size.s2 - 1, + background: theme.background.content, +})); + +export const InAddonPanel = { + args: { ...Normal.args, inAddonPanel: true }, + decorators: [(storyFn) => {storyFn()}], +}; + +export const InAddonPanelWithWarning = { + render: (args) => ( + <> + + + + ), + args: { ...InAddonPanel.args, updateArgs: null }, + decorators: InAddonPanel.decorators, +}; + +export const Sections = { + args: { + rows: { + a: { ...stringType, table: { ...stringType.table, ...propsSection } }, + b: { ...numberType, table: { ...stringType.table, ...propsSection } }, + c: { ...stringType, table: { ...stringType.table, ...eventsSection } }, + }, + }, +}; + +export const SectionsCompact = { + args: { ...Sections.args, compact: true }, +}; + +export const SectionsAndSubsections = { + args: { + rows: { + a: { ...stringType, table: { ...stringType.table, ...propsSection, ...componentSubsection } }, + b: { ...numberType, table: { ...stringType.table, ...propsSection, ...componentSubsection } }, + c: { + ...stringType, + table: { ...stringType.table, ...eventsSection, ...componentSubsection }, + }, + d: { + ...stringType, + table: { ...stringType.table, ...eventsSection, ...htmlElementSubsection }, + }, + }, + }, +}; + +export const SubsectionsOnly = { + args: { + rows: { + a: { ...stringType, table: { ...stringType.table, ...componentSubsection } }, + b: { ...numberType, table: { ...stringType.table, ...componentSubsection } }, + c: { ...stringType, table: { ...stringType.table, ...componentSubsection } }, + d: { ...stringType, table: { ...stringType.table, ...htmlElementSubsection } }, + }, + }, +}; + +export const AllControls = { + args: { + rows: { + array: ArgRow.ArrayOf.args.row, + boolean: ArgRow.Boolean.args.row, + color: ArgRow.Color.args.row, + date: ArgRow.Date.args.row, + string: ArgRow.String.args.row, + number: ArgRow.Number.args.row, + range: ArgRow.Number.args.row, + radio: ArgRow.Radio.args.row, + inlineRadio: ArgRow.InlineRadio.args.row, + check: ArgRow.Check.args.row, + inlineCheck: ArgRow.InlineCheck.args.row, + select: ArgRow.Select.args.row, + multiSelect: ArgRow.MultiSelect.args.row, + object: ArgRow.ObjectOf.args.row, + func: ArgRow.Func.args.row, + }, + }, +}; + +export const Error = { + args: { + error: ArgsTableError.NO_COMPONENT, + }, +}; + +export const Empty = { + args: { + rows: {}, + }, +}; + +export const WithDefaultExpandedArgs = { + args: { + rows: { + longEnumType, + }, + initialExpandedArgs: true, + }, +}; diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx b/lib/blocks/src/components/ArgsTable/ArgsTable.tsx similarity index 98% rename from lib/components/src/blocks/ArgsTable/ArgsTable.tsx rename to lib/blocks/src/components/ArgsTable/ArgsTable.tsx index f353984140e5..c2066b95548b 100644 --- a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx +++ b/lib/blocks/src/components/ArgsTable/ArgsTable.tsx @@ -4,13 +4,11 @@ import { styled } from '@storybook/theming'; import { opacify, transparentize, darken, lighten } from 'polished'; import { includeConditionalArg } from '@storybook/csf'; import { once } from '@storybook/client-logger'; -import { Icons } from '../../icon/icon'; +import { Icons, Link, ResetWrapper } from '@storybook/components'; import { ArgRow } from './ArgRow'; import { SectionRow } from './SectionRow'; import { ArgType, ArgTypes, Args, Globals } from './types'; -import { EmptyBlock } from '../EmptyBlock'; -import { Link } from '../../typography/link/link'; -import { ResetWrapper } from '../../typography/ResetWrapper'; +import { EmptyBlock } from '..'; export const TableWrapper = styled.table<{ compact?: boolean; diff --git a/lib/components/src/blocks/ArgsTable/NoControlsWarning.tsx b/lib/blocks/src/components/ArgsTable/NoControlsWarning.tsx similarity index 92% rename from lib/components/src/blocks/ArgsTable/NoControlsWarning.tsx rename to lib/blocks/src/components/ArgsTable/NoControlsWarning.tsx index 113c6000425d..5347cad17d42 100644 --- a/lib/components/src/blocks/ArgsTable/NoControlsWarning.tsx +++ b/lib/blocks/src/components/ArgsTable/NoControlsWarning.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { styled } from '@storybook/theming'; -import { Link } from '../../typography/link/link'; +import { Link } from '@storybook/components'; const NoControlsWrapper = styled.div(({ theme }) => ({ background: theme.background.warning, diff --git a/lib/blocks/src/components/ArgsTable/SectionRow.stories.tsx b/lib/blocks/src/components/ArgsTable/SectionRow.stories.tsx new file mode 100644 index 000000000000..77b4f9860732 --- /dev/null +++ b/lib/blocks/src/components/ArgsTable/SectionRow.stories.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { ResetWrapper } from '@storybook/components'; +import { SectionRow } from './SectionRow'; +import { TableWrapper } from './ArgsTable'; + +export default { + component: SectionRow, + decorators: [ + (getStory) => ( + + + {getStory()} + + + ), + ], +}; + +export const Section = { + args: { + level: 'section', + label: 'Props', + }, +}; + +export const Subsection = { + args: { + level: 'subsection', + label: 'HTMLElement', + }, +}; + +export const Collapsed = { + args: { ...Section.args, initialExpanded: false }, +}; + +export const Nested = { + render: () => ( + + + + Some content + + + + ), +}; diff --git a/lib/components/src/blocks/ArgsTable/SectionRow.tsx b/lib/blocks/src/components/ArgsTable/SectionRow.tsx similarity index 98% rename from lib/components/src/blocks/ArgsTable/SectionRow.tsx rename to lib/blocks/src/components/ArgsTable/SectionRow.tsx index d92ab2985396..3a7a1c650631 100644 --- a/lib/components/src/blocks/ArgsTable/SectionRow.tsx +++ b/lib/blocks/src/components/ArgsTable/SectionRow.tsx @@ -1,7 +1,7 @@ import React, { useState, FC } from 'react'; import { transparentize } from 'polished'; import { styled } from '@storybook/theming'; -import { Icons } from '../../icon/icon'; +import { Icons } from '@storybook/components'; type Level = 'section' | 'subsection'; diff --git a/lib/blocks/src/components/ArgsTable/TabbedArgsTable.stories.tsx b/lib/blocks/src/components/ArgsTable/TabbedArgsTable.stories.tsx new file mode 100644 index 000000000000..1f26d86b1de8 --- /dev/null +++ b/lib/blocks/src/components/ArgsTable/TabbedArgsTable.stories.tsx @@ -0,0 +1,33 @@ +import { TabbedArgsTable } from './TabbedArgsTable'; +import { Normal, Compact, Sections } from './ArgsTable.stories'; + +export default { + component: TabbedArgsTable, +}; + +export const Tabs = { + args: { + tabs: { + Normal: Normal.args, + Compact: Compact.args, + Sections: Sections.args, + }, + }, +}; + +export const TabsInAddonPanel = { + args: { + tabs: { + Normal: Normal.args, + Compact: Compact.args, + Sections: Sections.args, + }, + inAddonPanel: true, + }, +}; + +export const Empty = { + args: { + tabs: {}, + }, +}; diff --git a/lib/components/src/blocks/ArgsTable/TabbedArgsTable.tsx b/lib/blocks/src/components/ArgsTable/TabbedArgsTable.tsx similarity index 94% rename from lib/components/src/blocks/ArgsTable/TabbedArgsTable.tsx rename to lib/blocks/src/components/ArgsTable/TabbedArgsTable.tsx index e49baf7deb2f..aac08306782a 100644 --- a/lib/components/src/blocks/ArgsTable/TabbedArgsTable.tsx +++ b/lib/blocks/src/components/ArgsTable/TabbedArgsTable.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react'; +import { TabsState } from '@storybook/components'; import { ArgsTable, ArgsTableProps, SortType } from './ArgsTable'; -import { TabsState } from '../../tabs/tabs'; export interface TabbedArgsTableProps { tabs: Record; diff --git a/lib/components/src/blocks/ArgsTable/index.ts b/lib/blocks/src/components/ArgsTable/index.ts similarity index 100% rename from lib/components/src/blocks/ArgsTable/index.ts rename to lib/blocks/src/components/ArgsTable/index.ts diff --git a/lib/components/src/blocks/ArgsTable/types.ts b/lib/blocks/src/components/ArgsTable/types.ts similarity index 100% rename from lib/components/src/blocks/ArgsTable/types.ts rename to lib/blocks/src/components/ArgsTable/types.ts diff --git a/lib/components/src/blocks/BlockBackgroundStyles.tsx b/lib/blocks/src/components/BlockBackgroundStyles.tsx similarity index 100% rename from lib/components/src/blocks/BlockBackgroundStyles.tsx rename to lib/blocks/src/components/BlockBackgroundStyles.tsx diff --git a/lib/components/src/blocks/ColorPalette.stories.tsx b/lib/blocks/src/components/ColorPalette.stories.tsx similarity index 83% rename from lib/components/src/blocks/ColorPalette.stories.tsx rename to lib/blocks/src/components/ColorPalette.stories.tsx index f4c18ac7dd71..7306b096e2b5 100644 --- a/lib/components/src/blocks/ColorPalette.stories.tsx +++ b/lib/blocks/src/components/ColorPalette.stories.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { ColorItem, ColorPalette } from './ColorPalette'; export default { - title: 'Docs/ColorPalette', component: ColorPalette, }; @@ -38,14 +37,26 @@ export const NamedColors = () => ( + - ({ fontWeight: theme.typography.weight.bold, diff --git a/lib/components/src/blocks/Description.stories.tsx b/lib/blocks/src/components/Description.stories.tsx similarity index 83% rename from lib/components/src/blocks/Description.stories.tsx rename to lib/blocks/src/components/Description.stories.tsx index 5268723d4788..30fe3c969a62 100644 --- a/lib/components/src/blocks/Description.stories.tsx +++ b/lib/blocks/src/components/Description.stories.tsx @@ -1,13 +1,10 @@ -import React from 'react'; import { Description } from './Description'; export default { - title: 'Docs/Description', component: Description, }; const textCaption = `That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the amplified breathing of the room where Case waited. The semiotics of the bright void beyond the chain link. The tug Marcus Garvey, a steel drum nine meters long and two in diameter, creaked and shuddered as Maelcum punched for a California gambling cartel, then as a paid killer in the dark, curled in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. Still it was a handgun and nine rounds of ammunition, and as he made his way down Shiga from the missionaries, the train reached Case’s station. Now this quiet courtyard, Sunday afternoon, this girl with a random collection of European furniture, as though Deane had once intended to use the place as his home. Case felt the edge of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the console in faded pinks and yellows.`; - const markdownCaption = ` # My Example Markdown @@ -17,7 +14,6 @@ The group looked like tall, exotic grazing animals, swaying gracefully and uncon He stared at the clinic, Molly took him to the Tank War, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a skyscraper canyon. `; - const markdownWithLinksCaption = ` # [Link](https://storybook.js.org/) in heading ## [Link](https://storybook.js.org/) in heading @@ -28,7 +24,6 @@ const markdownWithLinksCaption = ` He stared at the clinic, [Molly](https://storybook.js.org/) took him to the *[Tank War](https://storybook.js.org/)*, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a **[skyscraper](https://storybook.js.org/)** canyon. `; - const markdownWithCodeSnippets = ` # My Example Markdown @@ -49,24 +44,26 @@ const a = fn({ \`\`\` `; -const Template = (args: React.ComponentProps) => ; - -export const Text = Template.bind({}); -Text.args = { - markdown: textCaption, +export const Text = { + args: { + markdown: textCaption, + }, }; -export const Markdown = Template.bind({}); -Markdown.args = { - markdown: markdownCaption, +export const Markdown = { + args: { + markdown: markdownCaption, + }, }; -export const MarkdownLinks = Template.bind({}); -MarkdownLinks.args = { - markdown: markdownWithLinksCaption, +export const MarkdownLinks = { + args: { + markdown: markdownWithLinksCaption, + }, }; -export const MarkdownCodeSnippets = Template.bind({}); -MarkdownCodeSnippets.args = { - markdown: markdownWithCodeSnippets, +export const MarkdownCodeSnippets = { + args: { + markdown: markdownWithCodeSnippets, + }, }; diff --git a/lib/components/src/blocks/Description.tsx b/lib/blocks/src/components/Description.tsx similarity index 80% rename from lib/components/src/blocks/Description.tsx rename to lib/blocks/src/components/Description.tsx index b8e47de00aa0..bc25b82b9bde 100644 --- a/lib/components/src/blocks/Description.tsx +++ b/lib/blocks/src/components/Description.tsx @@ -1,7 +1,6 @@ import React, { FunctionComponent } from 'react'; import Markdown from 'markdown-to-jsx'; -import { ResetWrapper } from '../typography/ResetWrapper'; -import { components } from '../typography/components'; +import { components, ResetWrapper } from '@storybook/components'; export interface DescriptionProps { markdown: string; diff --git a/lib/components/src/blocks/DocsPage.stories.tsx b/lib/blocks/src/components/DocsPage.stories.tsx similarity index 92% rename from lib/components/src/blocks/DocsPage.stories.tsx rename to lib/blocks/src/components/DocsPage.stories.tsx index 499a13fe6cb2..1e03a93c861b 100644 --- a/lib/components/src/blocks/DocsPage.stories.tsx +++ b/lib/blocks/src/components/DocsPage.stories.tsx @@ -1,8 +1,7 @@ import React from 'react'; -import { Global, css } from '@emotion/react'; - +import { Global, css } from '@storybook/theming'; +import { Source, ArgsTable, Description } from '.'; import { Title, Subtitle, DocsPageWrapper } from './DocsPage'; -import { ArgsTable, Source, Description } from './index'; import * as Story from './Story.stories'; import * as Preview from './Preview.stories'; import * as argsTable from './ArgsTable/ArgsTable.stories'; @@ -10,7 +9,6 @@ import * as source from './Source.stories'; import * as description from './Description.stories'; export default { - title: 'Docs/DocsPage', component: DocsPageWrapper, // The goal of this decorator is to mimic some CSS reset. // Like Tailwind CSS or Bulma do, for example. @@ -42,7 +40,7 @@ export const Loading = () => ( - + ); diff --git a/lib/components/src/blocks/DocsPage.tsx b/lib/blocks/src/components/DocsPage.tsx similarity index 96% rename from lib/components/src/blocks/DocsPage.tsx rename to lib/blocks/src/components/DocsPage.tsx index 24bf4503de20..f7e66ac36171 100644 --- a/lib/components/src/blocks/DocsPage.tsx +++ b/lib/blocks/src/components/DocsPage.tsx @@ -1,8 +1,7 @@ import React, { FC } from 'react'; -import { styled, Theme } from '@storybook/theming'; import { transparentize } from 'polished'; - -import { withReset } from '../typography/lib/common'; +import { styled, Theme } from '@storybook/theming'; +import { withReset } from '@storybook/components'; const breakpoint = 600; diff --git a/lib/components/src/blocks/DocsPageExampleCaption.md b/lib/blocks/src/components/DocsPageExampleCaption.md similarity index 100% rename from lib/components/src/blocks/DocsPageExampleCaption.md rename to lib/blocks/src/components/DocsPageExampleCaption.md diff --git a/lib/components/src/blocks/DocsPageExampleCaption.mdx b/lib/blocks/src/components/DocsPageExampleCaption.mdx similarity index 100% rename from lib/components/src/blocks/DocsPageExampleCaption.mdx rename to lib/blocks/src/components/DocsPageExampleCaption.mdx diff --git a/lib/components/src/blocks/EmptyBlock.stories.tsx b/lib/blocks/src/components/EmptyBlock.stories.tsx similarity index 87% rename from lib/components/src/blocks/EmptyBlock.stories.tsx rename to lib/blocks/src/components/EmptyBlock.stories.tsx index 66fb9c5a2d7a..52843ad1a826 100644 --- a/lib/components/src/blocks/EmptyBlock.stories.tsx +++ b/lib/blocks/src/components/EmptyBlock.stories.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { EmptyBlock } from './EmptyBlock'; export default { - title: 'Docs/EmptyBlock', component: EmptyBlock, }; diff --git a/lib/components/src/blocks/EmptyBlock.tsx b/lib/blocks/src/components/EmptyBlock.tsx similarity index 92% rename from lib/components/src/blocks/EmptyBlock.tsx rename to lib/blocks/src/components/EmptyBlock.tsx index 876a1fa41a70..0cf32de5e99f 100644 --- a/lib/components/src/blocks/EmptyBlock.tsx +++ b/lib/blocks/src/components/EmptyBlock.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { styled } from '@storybook/theming'; import { transparentize } from 'polished'; -import { withReset } from '../typography/lib/common'; +import { styled } from '@storybook/theming'; +import { withReset } from '@storybook/components'; const Wrapper = styled.div<{}>(withReset, ({ theme }) => ({ backgroundColor: theme.base === 'light' ? 'rgba(0,0,0,.01)' : 'rgba(255,255,255,.01)', diff --git a/lib/components/src/blocks/IFrame.tsx b/lib/blocks/src/components/IFrame.tsx similarity index 100% rename from lib/components/src/blocks/IFrame.tsx rename to lib/blocks/src/components/IFrame.tsx diff --git a/lib/components/src/blocks/IconGallery.stories.tsx b/lib/blocks/src/components/IconGallery.stories.tsx similarity index 89% rename from lib/components/src/blocks/IconGallery.stories.tsx rename to lib/blocks/src/components/IconGallery.stories.tsx index 817cc90a9d4a..ccc1da0a5fac 100644 --- a/lib/components/src/blocks/IconGallery.stories.tsx +++ b/lib/blocks/src/components/IconGallery.stories.tsx @@ -1,10 +1,8 @@ import React from 'react'; +import { Icons as ExampleIcon } from '@storybook/components'; import { IconItem, IconGallery } from './IconGallery'; -import { Icons as ExampleIcon } from '../icon/icon'; - export default { - title: 'Docs/IconGallery', component: IconGallery, }; diff --git a/lib/components/src/blocks/IconGallery.tsx b/lib/blocks/src/components/IconGallery.tsx similarity index 96% rename from lib/components/src/blocks/IconGallery.tsx rename to lib/blocks/src/components/IconGallery.tsx index 7424eb235f72..4a98f417dfe8 100644 --- a/lib/components/src/blocks/IconGallery.tsx +++ b/lib/blocks/src/components/IconGallery.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent } from 'react'; import { styled } from '@storybook/theming'; -import { ResetWrapper } from '../typography/ResetWrapper'; +import { ResetWrapper } from '@storybook/components'; import { getBlockBackgroundStyle } from './BlockBackgroundStyles'; diff --git a/lib/components/src/blocks/Preview.stories.tsx b/lib/blocks/src/components/Preview.stories.tsx similarity index 76% rename from lib/components/src/blocks/Preview.stories.tsx rename to lib/blocks/src/components/Preview.stories.tsx index b042ccfa7266..6e4c379596e5 100644 --- a/lib/components/src/blocks/Preview.stories.tsx +++ b/lib/blocks/src/components/Preview.stories.tsx @@ -1,36 +1,33 @@ import React from 'react'; import { styled } from '@storybook/theming'; import global from 'global'; - -import { Spaced } from '../spaced/Spaced'; +import { Spaced, Button } from '@storybook/components'; import { Preview, PreviewSkeleton } from './Preview'; import { Story } from './Story'; -import { Button } from '../Button/Button'; -import * as Source from './Source.stories'; +import * as sourceStories from './Source.stories'; const { window: globalWindow } = global; export default { - title: 'Docs/Preview', component: Preview, }; export const Loading = () => ; export const CodeCollapsed = () => ( - + ); export const CodeExpanded = () => ( - + ); export const CodeError = () => ( - + ); @@ -118,27 +115,69 @@ export const WithToolbarMulti = () => ( export const WithFullscreenSingle = () => ( - + ); export const WithFullscreenMulti = () => ( - - + + ); export const WithCenteredSingle = () => ( - + ); export const WithCenteredMulti = () => ( - - + + ); diff --git a/lib/components/src/blocks/Preview.tsx b/lib/blocks/src/components/Preview.tsx similarity index 96% rename from lib/components/src/blocks/Preview.tsx rename to lib/blocks/src/components/Preview.tsx index 1d79e53e8fa6..21edc8ffc75e 100644 --- a/lib/components/src/blocks/Preview.tsx +++ b/lib/blocks/src/components/Preview.tsx @@ -11,12 +11,12 @@ import { darken } from 'polished'; import { styled } from '@storybook/theming'; import global from 'global'; +import { ActionBar, Zoom } from '@storybook/components'; +import type { ActionItem } from '@storybook/components'; +import { Source, SourceProps } from '.'; import { getBlockBackgroundStyle } from './BlockBackgroundStyles'; -import { Source, SourceProps } from './Source'; -import { ActionBar, ActionItem } from '../ActionBar/ActionBar'; import { Toolbar } from './Toolbar'; import { ZoomContext } from './ZoomContext'; -import { Zoom } from '../Zoom/Zoom'; import { StorySkeleton } from './Story'; export interface PreviewProps { @@ -220,9 +220,7 @@ export const Preview: FunctionComponent = ({ const { window: globalWindow } = global; const copyToClipboard = useCallback(async (text: string) => { - const { createCopyToClipboardFunction } = await import( - '../syntaxhighlighter/syntaxhighlighter' - ); + const { createCopyToClipboardFunction } = await import('@storybook/components'); createCopyToClipboardFunction(); }, []); diff --git a/lib/blocks/src/components/Source.stories.tsx b/lib/blocks/src/components/Source.stories.tsx new file mode 100644 index 000000000000..9a2912f11ed2 --- /dev/null +++ b/lib/blocks/src/components/Source.stories.tsx @@ -0,0 +1,74 @@ +import { Source, SourceError } from './Source'; + +export default { + component: Source, +}; + +export const Loading = { + args: { + isLoading: true, + }, +}; + +export const JSX = { + args: { + code: ` + + a.id} /> + +`, + language: 'jsx', + format: false, + }, +}; + +export const CSSWithDarkMode = { + args: { + code: ` +@-webkit-keyframes blinker { + from { opacity: 1.0; } + to { opacity: 0.0; } +} + +.waitingForConnection { + -webkit-animation-name: blinker; + -webkit-animation-iteration-count: infinite; + -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); + -webkit-animation-duration: 1.7s; +} +`, + language: 'css', + format: false, + dark: true, + }, +}; + +export const GraphQLWithFormatting = { + args: { + code: `query HeroNameAndFriends($episode: Episode) { + hero(episode: $episode) { + name + friends { + name + } + } + } +`, + language: 'graphql', + format: true, + }, +}; + +export const NoStory = { + args: { + error: SourceError.NO_STORY, + format: false, + }, +}; + +export const SourceUnavailable = { + args: { + error: SourceError.SOURCE_UNAVAILABLE, + format: false, + }, +}; diff --git a/lib/components/src/blocks/Source.tsx b/lib/blocks/src/components/Source.tsx similarity index 97% rename from lib/components/src/blocks/Source.tsx rename to lib/blocks/src/components/Source.tsx index 4d79f1807b04..150c28c7b851 100644 --- a/lib/components/src/blocks/Source.tsx +++ b/lib/blocks/src/components/Source.tsx @@ -1,8 +1,8 @@ import React, { ComponentProps, FunctionComponent } from 'react'; import { styled, ThemeProvider, convert, themes } from '@storybook/theming'; -import { EmptyBlock } from './EmptyBlock'; +import { SyntaxHighlighter } from '@storybook/components'; -import { SyntaxHighlighter } from '../syntaxhighlighter/lazy-syntaxhighlighter'; +import { EmptyBlock } from './EmptyBlock'; const StyledSyntaxHighlighter = styled(SyntaxHighlighter)<{}>(({ theme }) => ({ // DocBlocks-specific styling and overrides diff --git a/lib/components/src/blocks/Story.stories.tsx b/lib/blocks/src/components/Story.stories.tsx similarity index 91% rename from lib/components/src/blocks/Story.stories.tsx rename to lib/blocks/src/components/Story.stories.tsx index 79136501df5c..df7d5583d922 100644 --- a/lib/components/src/blocks/Story.stories.tsx +++ b/lib/blocks/src/components/Story.stories.tsx @@ -1,9 +1,8 @@ import React, { useState } from 'react'; +import { Button } from '@storybook/components'; import { Story, StorySkeleton, StoryError } from './Story'; -import { Button } from '../Button/Button'; export default { - title: 'Docs/Story', component: Story, }; diff --git a/lib/components/src/blocks/Story.tsx b/lib/blocks/src/components/Story.tsx similarity index 94% rename from lib/components/src/blocks/Story.tsx rename to lib/blocks/src/components/Story.tsx index bc466a54dd23..388a6b151a7a 100644 --- a/lib/components/src/blocks/Story.tsx +++ b/lib/blocks/src/components/Story.tsx @@ -1,13 +1,10 @@ import global from 'global'; import React, { createElement, ElementType, FunctionComponent, Fragment } from 'react'; - import type { Parameters } from '@storybook/csf'; - +import { Loader, getStoryHref } from '@storybook/components'; +import { EmptyBlock } from '.'; import { IFrame } from './IFrame'; -import { EmptyBlock } from './EmptyBlock'; import { ZoomContext } from './ZoomContext'; -import { Loader } from '../Loader/Loader'; -import { getStoryHref } from '../utils/getStoryHref'; const { PREVIEW_URL } = global; const BASE_URL = PREVIEW_URL || 'iframe.html'; diff --git a/lib/blocks/src/components/Title.stories.ts b/lib/blocks/src/components/Title.stories.ts new file mode 100644 index 000000000000..dd2f270187da --- /dev/null +++ b/lib/blocks/src/components/Title.stories.ts @@ -0,0 +1,9 @@ +import { Title } from './Title'; + +export default { component: Title }; + +export const Basic = { + args: { + children: 'Basic title', + }, +}; diff --git a/lib/blocks/src/components/Title.tsx b/lib/blocks/src/components/Title.tsx new file mode 100644 index 000000000000..39353069898d --- /dev/null +++ b/lib/blocks/src/components/Title.tsx @@ -0,0 +1,17 @@ +import { styled, Theme } from '@storybook/theming'; +import { withReset } from '@storybook/components'; + +const breakpoint = 600; + +export const Title = styled.h1<{}>(withReset, ({ theme }: { theme: Theme }) => ({ + color: theme.color.defaultText, + fontSize: theme.typography.size.m3, + fontWeight: theme.typography.weight.black, + lineHeight: '32px', + + [`@media (min-width: ${breakpoint}px)`]: { + fontSize: theme.typography.size.l1, + lineHeight: '36px', + marginBottom: '.5rem', // 8px + }, +})); diff --git a/lib/components/src/blocks/Toolbar.tsx b/lib/blocks/src/components/Toolbar.tsx similarity index 91% rename from lib/components/src/blocks/Toolbar.tsx rename to lib/blocks/src/components/Toolbar.tsx index 0189e08190f8..344f78c1922c 100644 --- a/lib/components/src/blocks/Toolbar.tsx +++ b/lib/blocks/src/components/Toolbar.tsx @@ -1,11 +1,12 @@ import React, { Fragment, FunctionComponent, MouseEvent } from 'react'; import { styled } from '@storybook/theming'; - -import { FlexBar } from '../bar/bar'; -import { Icons } from '../icon/icon'; -import { IconButton, IconButtonSkeleton } from '../bar/button'; - -import { getStoryHref } from '../utils/getStoryHref'; +import { + FlexBar, + Icons, + IconButton, + IconButtonSkeleton, + getStoryHref, +} from '@storybook/components'; interface ZoomProps { zoom: (val: number) => void; diff --git a/lib/components/src/blocks/Typeset.stories.tsx b/lib/blocks/src/components/Typeset.stories.tsx similarity index 96% rename from lib/components/src/blocks/Typeset.stories.tsx rename to lib/blocks/src/components/Typeset.stories.tsx index 4653fdf49cb6..02d08e3e9248 100644 --- a/lib/components/src/blocks/Typeset.stories.tsx +++ b/lib/blocks/src/components/Typeset.stories.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { Typeset } from './Typeset'; export default { - title: 'Docs/Typeset', component: Typeset, }; @@ -11,8 +10,11 @@ const fontWeight = 900; const fontFamily = 'monospace'; export const WithFontSizes = () => ; + export const WithFontWeight = () => ; + export const WithFontFamily = () => ; + export const WithWeightText = () => ( ); diff --git a/lib/components/src/blocks/Typeset.tsx b/lib/blocks/src/components/Typeset.tsx similarity index 96% rename from lib/components/src/blocks/Typeset.tsx rename to lib/blocks/src/components/Typeset.tsx index cb95c6b7d956..121da8d1c761 100644 --- a/lib/components/src/blocks/Typeset.tsx +++ b/lib/blocks/src/components/Typeset.tsx @@ -1,8 +1,7 @@ import React, { FunctionComponent } from 'react'; -import { styled } from '@storybook/theming'; import { transparentize } from 'polished'; - -import { withReset } from '../typography/lib/common'; +import { styled } from '@storybook/theming'; +import { withReset } from '@storybook/components'; import { getBlockBackgroundStyle } from './BlockBackgroundStyles'; const Label = styled.div<{}>(({ theme }) => ({ diff --git a/lib/components/src/blocks/ZoomContext.tsx b/lib/blocks/src/components/ZoomContext.tsx similarity index 100% rename from lib/components/src/blocks/ZoomContext.tsx rename to lib/blocks/src/components/ZoomContext.tsx diff --git a/lib/components/src/blocks/index.ts b/lib/blocks/src/components/index.ts similarity index 90% rename from lib/components/src/blocks/index.ts rename to lib/blocks/src/components/index.ts index 9866fbd5dbbb..68927790479c 100644 --- a/lib/components/src/blocks/index.ts +++ b/lib/blocks/src/components/index.ts @@ -1,8 +1,9 @@ +export * from './Source'; +export * from './EmptyBlock'; export * from './Description'; export * from './DocsPage'; export * from './Preview'; export * from './ArgsTable'; -export * from './Source'; export * from './Story'; export * from './IFrame'; export * from './Typeset'; diff --git a/lib/components/src/controls/Boolean.stories.tsx b/lib/blocks/src/controls/Boolean.stories.tsx similarity index 100% rename from lib/components/src/controls/Boolean.stories.tsx rename to lib/blocks/src/controls/Boolean.stories.tsx diff --git a/lib/components/src/controls/Boolean.tsx b/lib/blocks/src/controls/Boolean.tsx similarity index 98% rename from lib/components/src/controls/Boolean.tsx rename to lib/blocks/src/controls/Boolean.tsx index ac7498c7ac0d..a7ab0596ef18 100644 --- a/lib/components/src/controls/Boolean.tsx +++ b/lib/blocks/src/controls/Boolean.tsx @@ -3,8 +3,8 @@ import React, { FC, useCallback } from 'react'; import { opacify, transparentize } from 'polished'; import { styled } from '@storybook/theming'; +import { Form } from '@storybook/components'; import { getControlId, getControlSetterButtonId } from './helpers'; -import { Form } from '../form'; import { ControlProps, BooleanValue, BooleanConfig } from './types'; const Label = styled.label(({ theme }) => ({ diff --git a/lib/components/src/controls/Color.stories.tsx b/lib/blocks/src/controls/Color.stories.tsx similarity index 100% rename from lib/components/src/controls/Color.stories.tsx rename to lib/blocks/src/controls/Color.stories.tsx diff --git a/lib/components/src/controls/Color.tsx b/lib/blocks/src/controls/Color.tsx similarity index 98% rename from lib/components/src/controls/Color.tsx rename to lib/blocks/src/controls/Color.tsx index 70430a668293..6df555c04ab5 100644 --- a/lib/components/src/controls/Color.tsx +++ b/lib/blocks/src/controls/Color.tsx @@ -10,13 +10,9 @@ import React, { import { HexColorPicker, HslaStringColorPicker, RgbaStringColorPicker } from 'react-colorful'; import convert from 'color-convert'; import throttle from 'lodash/throttle'; - import { styled } from '@storybook/theming'; +import { TooltipNote, WithTooltip, Form, Icons } from '@storybook/components'; import { ControlProps, ColorValue, ColorConfig, PresetColor } from './types'; -import { TooltipNote } from '../tooltip/TooltipNote'; -import { WithTooltip } from '../tooltip/lazy-WithTooltip'; -import { Form } from '../form'; -import { Icons } from '../icon/icon'; import { getControlId } from './helpers'; const Wrapper = styled.div({ diff --git a/lib/components/src/controls/Date.stories.tsx b/lib/blocks/src/controls/Date.stories.tsx similarity index 100% rename from lib/components/src/controls/Date.stories.tsx rename to lib/blocks/src/controls/Date.stories.tsx diff --git a/lib/components/src/controls/Date.test.ts b/lib/blocks/src/controls/Date.test.ts similarity index 100% rename from lib/components/src/controls/Date.test.ts rename to lib/blocks/src/controls/Date.test.ts diff --git a/lib/components/src/controls/Date.tsx b/lib/blocks/src/controls/Date.tsx similarity index 98% rename from lib/components/src/controls/Date.tsx rename to lib/blocks/src/controls/Date.tsx index 81247bccfa4f..891cfb7af6d1 100644 --- a/lib/components/src/controls/Date.tsx +++ b/lib/blocks/src/controls/Date.tsx @@ -1,7 +1,6 @@ import React, { FC, ChangeEvent, RefObject, useState, useRef, useEffect } from 'react'; import { styled } from '@storybook/theming'; - -import { Form } from '../form'; +import { Form } from '@storybook/components'; import { ControlProps, DateValue, DateConfig } from './types'; import { getControlId } from './helpers'; diff --git a/lib/components/src/controls/Files.tsx b/lib/blocks/src/controls/Files.tsx similarity index 95% rename from lib/components/src/controls/Files.tsx rename to lib/blocks/src/controls/Files.tsx index 2f1f1446cc82..dfafb93f61bf 100644 --- a/lib/components/src/controls/Files.tsx +++ b/lib/blocks/src/controls/Files.tsx @@ -1,8 +1,7 @@ import React, { ChangeEvent, FunctionComponent } from 'react'; import { styled } from '@storybook/theming'; +import { Form } from '@storybook/components'; import { ControlProps } from './types'; - -import { Form } from '../form'; import { getControlId } from './helpers'; export interface FilesControlProps extends ControlProps { diff --git a/lib/components/src/controls/Number.stories.tsx b/lib/blocks/src/controls/Number.stories.tsx similarity index 100% rename from lib/components/src/controls/Number.stories.tsx rename to lib/blocks/src/controls/Number.stories.tsx diff --git a/lib/components/src/controls/Number.tsx b/lib/blocks/src/controls/Number.tsx similarity index 98% rename from lib/components/src/controls/Number.tsx rename to lib/blocks/src/controls/Number.tsx index 24c8db6567c3..b9eda69fc1e9 100644 --- a/lib/components/src/controls/Number.tsx +++ b/lib/blocks/src/controls/Number.tsx @@ -1,7 +1,6 @@ import React, { FC, ChangeEvent, useState, useCallback, useEffect, useRef } from 'react'; import { styled } from '@storybook/theming'; - -import { Form } from '../form'; +import { Form } from '@storybook/components'; import { getControlId, getControlSetterButtonId } from './helpers'; import { ControlProps, NumberValue, NumberConfig } from './types'; diff --git a/lib/components/src/controls/Object.stories.tsx b/lib/blocks/src/controls/Object.stories.tsx similarity index 100% rename from lib/components/src/controls/Object.stories.tsx rename to lib/blocks/src/controls/Object.stories.tsx diff --git a/lib/components/src/controls/Object.tsx b/lib/blocks/src/controls/Object.tsx similarity index 98% rename from lib/components/src/controls/Object.tsx rename to lib/blocks/src/controls/Object.tsx index 27ef47202c7c..747fc8600d37 100644 --- a/lib/components/src/controls/Object.tsx +++ b/lib/blocks/src/controls/Object.tsx @@ -12,13 +12,10 @@ import React, { FocusEvent, } from 'react'; import { styled, useTheme, Theme } from '@storybook/theming'; - +import { Form, Icons, IconsProps, IconButton } from '@storybook/components'; import { JsonTree, getObjectType } from './react-editable-json-tree'; import { getControlId, getControlSetterButtonId } from './helpers'; import type { ControlProps, ObjectValue, ObjectConfig } from './types'; -import { Form } from '../form'; -import { Icons, IconsProps } from '../icon/icon'; -import { IconButton } from '../bar/button'; const { window: globalWindow } = global; diff --git a/lib/components/src/controls/Range.stories.tsx b/lib/blocks/src/controls/Range.stories.tsx similarity index 100% rename from lib/components/src/controls/Range.stories.tsx rename to lib/blocks/src/controls/Range.stories.tsx diff --git a/lib/components/src/controls/Range.tsx b/lib/blocks/src/controls/Range.tsx similarity index 100% rename from lib/components/src/controls/Range.tsx rename to lib/blocks/src/controls/Range.tsx diff --git a/lib/components/src/controls/Text.stories.tsx b/lib/blocks/src/controls/Text.stories.tsx similarity index 100% rename from lib/components/src/controls/Text.stories.tsx rename to lib/blocks/src/controls/Text.stories.tsx diff --git a/lib/components/src/controls/Text.tsx b/lib/blocks/src/controls/Text.tsx similarity index 96% rename from lib/components/src/controls/Text.tsx rename to lib/blocks/src/controls/Text.tsx index bbf18c74b015..5799e8c751ed 100644 --- a/lib/components/src/controls/Text.tsx +++ b/lib/blocks/src/controls/Text.tsx @@ -1,7 +1,6 @@ import React, { FC, ChangeEvent, useCallback, useState } from 'react'; import { styled } from '@storybook/theming'; - -import { Form } from '../form'; +import { Form } from '@storybook/components'; import { getControlId, getControlSetterButtonId } from './helpers'; import { ControlProps, TextValue, TextConfig } from './types'; diff --git a/lib/components/src/controls/helpers.test.ts b/lib/blocks/src/controls/helpers.test.ts similarity index 100% rename from lib/components/src/controls/helpers.test.ts rename to lib/blocks/src/controls/helpers.test.ts diff --git a/lib/components/src/controls/helpers.ts b/lib/blocks/src/controls/helpers.ts similarity index 100% rename from lib/components/src/controls/helpers.ts rename to lib/blocks/src/controls/helpers.ts diff --git a/lib/components/src/controls/index.tsx b/lib/blocks/src/controls/index.tsx similarity index 100% rename from lib/components/src/controls/index.tsx rename to lib/blocks/src/controls/index.tsx diff --git a/lib/components/src/controls/options/Checkbox.tsx b/lib/blocks/src/controls/options/Checkbox.tsx similarity index 100% rename from lib/components/src/controls/options/Checkbox.tsx rename to lib/blocks/src/controls/options/Checkbox.tsx diff --git a/lib/components/src/controls/options/Options.stories.tsx b/lib/blocks/src/controls/options/Options.stories.tsx similarity index 100% rename from lib/components/src/controls/options/Options.stories.tsx rename to lib/blocks/src/controls/options/Options.stories.tsx diff --git a/lib/components/src/controls/options/Options.tsx b/lib/blocks/src/controls/options/Options.tsx similarity index 100% rename from lib/components/src/controls/options/Options.tsx rename to lib/blocks/src/controls/options/Options.tsx diff --git a/lib/components/src/controls/options/Radio.tsx b/lib/blocks/src/controls/options/Radio.tsx similarity index 100% rename from lib/components/src/controls/options/Radio.tsx rename to lib/blocks/src/controls/options/Radio.tsx diff --git a/lib/components/src/controls/options/Select.tsx b/lib/blocks/src/controls/options/Select.tsx similarity index 98% rename from lib/components/src/controls/options/Select.tsx rename to lib/blocks/src/controls/options/Select.tsx index 44edefa72d5e..6099a0483188 100644 --- a/lib/components/src/controls/options/Select.tsx +++ b/lib/blocks/src/controls/options/Select.tsx @@ -2,9 +2,9 @@ import React, { FC, ChangeEvent } from 'react'; import { styled } from '@storybook/theming'; import type { CSSObject } from '@storybook/theming'; import { logger } from '@storybook/client-logger'; +import { Icons } from '@storybook/components'; import { ControlProps, OptionsSelection, NormalizedOptionsConfig } from '../types'; import { selectedKey, selectedKeys, selectedValues } from './helpers'; -import { Icons } from '../../icon/icon'; import { getControlId } from '../helpers'; const styleResets: CSSObject = { diff --git a/lib/components/src/controls/options/helpers.ts b/lib/blocks/src/controls/options/helpers.ts similarity index 100% rename from lib/components/src/controls/options/helpers.ts rename to lib/blocks/src/controls/options/helpers.ts diff --git a/lib/components/src/controls/options/index.ts b/lib/blocks/src/controls/options/index.ts similarity index 100% rename from lib/components/src/controls/options/index.ts rename to lib/blocks/src/controls/options/index.ts diff --git a/lib/components/src/controls/react-editable-json-tree/JsonNodes.tsx b/lib/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx similarity index 100% rename from lib/components/src/controls/react-editable-json-tree/JsonNodes.tsx rename to lib/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx diff --git a/lib/components/src/controls/react-editable-json-tree/LICENSE.md b/lib/blocks/src/controls/react-editable-json-tree/LICENSE.md similarity index 100% rename from lib/components/src/controls/react-editable-json-tree/LICENSE.md rename to lib/blocks/src/controls/react-editable-json-tree/LICENSE.md diff --git a/lib/components/src/controls/react-editable-json-tree/index.tsx b/lib/blocks/src/controls/react-editable-json-tree/index.tsx similarity index 100% rename from lib/components/src/controls/react-editable-json-tree/index.tsx rename to lib/blocks/src/controls/react-editable-json-tree/index.tsx diff --git a/lib/components/src/controls/react-editable-json-tree/types/dataTypes.ts b/lib/blocks/src/controls/react-editable-json-tree/types/dataTypes.ts similarity index 100% rename from lib/components/src/controls/react-editable-json-tree/types/dataTypes.ts rename to lib/blocks/src/controls/react-editable-json-tree/types/dataTypes.ts diff --git a/lib/components/src/controls/react-editable-json-tree/types/deltaTypes.ts b/lib/blocks/src/controls/react-editable-json-tree/types/deltaTypes.ts similarity index 100% rename from lib/components/src/controls/react-editable-json-tree/types/deltaTypes.ts rename to lib/blocks/src/controls/react-editable-json-tree/types/deltaTypes.ts diff --git a/lib/components/src/controls/react-editable-json-tree/types/inputUsageTypes.ts b/lib/blocks/src/controls/react-editable-json-tree/types/inputUsageTypes.ts similarity index 100% rename from lib/components/src/controls/react-editable-json-tree/types/inputUsageTypes.ts rename to lib/blocks/src/controls/react-editable-json-tree/types/inputUsageTypes.ts diff --git a/lib/components/src/controls/react-editable-json-tree/utils/objectTypes.ts b/lib/blocks/src/controls/react-editable-json-tree/utils/objectTypes.ts similarity index 100% rename from lib/components/src/controls/react-editable-json-tree/utils/objectTypes.ts rename to lib/blocks/src/controls/react-editable-json-tree/utils/objectTypes.ts diff --git a/lib/components/src/controls/react-editable-json-tree/utils/parse.ts b/lib/blocks/src/controls/react-editable-json-tree/utils/parse.ts similarity index 100% rename from lib/components/src/controls/react-editable-json-tree/utils/parse.ts rename to lib/blocks/src/controls/react-editable-json-tree/utils/parse.ts diff --git a/lib/components/src/controls/react-editable-json-tree/utils/styles.ts b/lib/blocks/src/controls/react-editable-json-tree/utils/styles.ts similarity index 100% rename from lib/components/src/controls/react-editable-json-tree/utils/styles.ts rename to lib/blocks/src/controls/react-editable-json-tree/utils/styles.ts diff --git a/lib/components/src/controls/types.ts b/lib/blocks/src/controls/types.ts similarity index 97% rename from lib/components/src/controls/types.ts rename to lib/blocks/src/controls/types.ts index 668c366f8eef..e14833fa20b8 100644 --- a/lib/components/src/controls/types.ts +++ b/lib/blocks/src/controls/types.ts @@ -1,4 +1,4 @@ -import { ArgType } from '../blocks'; +import { ArgType } from '../components/ArgsTable'; /* eslint-disable @typescript-eslint/no-empty-interface */ export interface ControlProps { diff --git a/lib/blocks/src/index.ts b/lib/blocks/src/index.ts new file mode 100644 index 000000000000..b02a892d1fb0 --- /dev/null +++ b/lib/blocks/src/index.ts @@ -0,0 +1,7 @@ +// FIXME: sort this out, maybe with package.json exports map +// https://medium.com/swlh/npm-new-package-json-exports-field-1a7d1f489ccf +export { ArgsTable as PureArgsTable, NoControlsWarning } from './components'; +export type { SortType } from './components'; + +export * from './blocks'; +export * from './controls'; diff --git a/lib/blocks/src/typings.d.ts b/lib/blocks/src/typings.d.ts new file mode 100644 index 000000000000..87e963fc46b6 --- /dev/null +++ b/lib/blocks/src/typings.d.ts @@ -0,0 +1,4 @@ +declare module '@mdx-js/react'; +declare module 'global'; +declare module 'markdown-to-jsx'; +declare module '*.md'; diff --git a/lib/blocks/tsconfig.json b/lib/blocks/tsconfig.json new file mode 100644 index 000000000000..3fe5e6e0dffa --- /dev/null +++ b/lib/blocks/tsconfig.json @@ -0,0 +1,16 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "types": ["jest"] + }, + "include": ["src/**/*"], + "exclude": [ + "src/**/*.test.*", + "src/**/tests/**/*", + "src/**/__tests__/**/*", + "src/**/*.stories.*", + "src/**/*.mockdata.*", + "src/**/__testfixtures__/**" + ] +} diff --git a/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx deleted file mode 100644 index c071fd70e007..000000000000 --- a/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx +++ /dev/null @@ -1,350 +0,0 @@ -/* eslint-disable camelcase */ -import React from 'react'; -import { action } from '@storybook/addon-actions'; -import { ArgRow } from './ArgRow'; -import { TableWrapper } from './ArgsTable'; -import { ResetWrapper } from '../../typography/ResetWrapper'; - -export default { - component: ArgRow, - title: 'Docs/ArgRow', - decorators: [ - (getStory) => ( - - - {getStory()} - - - ), - ], -}; - -const Template = (args) => ; - -const baseArgs = { - updateArgs: action('updateArgs'), -}; - -export const String = Template.bind({}); -String.args = { - ...baseArgs, - row: { - key: 'someString', - name: 'Some String', - description: 'someString description', - type: { required: true }, - control: { type: 'text' }, - table: { - type: { summary: 'string' }, - defaultValue: { summary: 'reallylongstringnospaces' }, - }, - }, -}; - -export const LongName = Template.bind({}); -LongName.args = { - ...baseArgs, - row: { - ...String.args.row, - name: 'Really Long String That Takes Up Space', - }, -}; - -export const LongDesc = Template.bind({}); -LongDesc.args = { - ...baseArgs, - row: { - ...String.args.row, - description: 'really long description that takes up a lot of space. sometimes this happens.', - }, -}; - -export const Boolean = Template.bind({}); -Boolean.args = { - ...baseArgs, - row: { - key: 'someBoolean', - name: 'Some Boolean', - description: 'someBoolean description', - type: { required: true }, - control: { type: 'boolean' }, - table: { - type: { summary: 'string' }, - defaultValue: { summary: 'fixme' }, - }, - }, -}; - -export const Color = Template.bind({}); -Color.args = { - ...baseArgs, - row: { - key: 'someColor', - name: 'Some Color', - type: { name: 'string' }, - description: 'someColor description', - defaultValue: '#ff0', - control: { type: 'color' }, - }, -}; - -export const Date = Template.bind({}); -Date.args = { - ...baseArgs, - row: { - key: 'someDate', - name: 'Some Date', - type: { name: 'string' }, - description: 'someDate description', - control: { type: 'date' }, - }, -}; - -export const Number = Template.bind({}); -Number.args = { - ...baseArgs, - row: { - key: 'someNumber', - name: 'Some Number', - description: 'someNumber description', - type: { required: false }, - table: { - type: { summary: 'number' }, - defaultValue: { summary: '0' }, - }, - control: { type: 'number' }, - }, -}; - -export const Range = Template.bind({}); -Range.args = { - ...baseArgs, - row: { - ...Number.args.row, - control: { type: 'range' }, - }, -}; - -export const Radio = Template.bind({}); -Radio.args = { - ...baseArgs, - row: { - key: 'someEnum', - name: 'Some Enum', - description: 'someEnum description', - control: { type: 'radio', options: ['a', 'b', 'c'] }, - }, -}; - -export const InlineRadio = Template.bind({}); -InlineRadio.args = { - ...baseArgs, - row: { - ...Radio.args.row, - control: { ...Radio.args.row.control, type: 'inline-radio' }, - }, -}; - -export const Check = Template.bind({}); -Check.args = { - ...baseArgs, - row: { - ...Radio.args.row, - control: { ...Radio.args.row.control, type: 'check' }, - }, -}; - -export const InlineCheck = Template.bind({}); -InlineCheck.args = { - ...baseArgs, - row: { - ...Radio.args.row, - control: { ...Radio.args.row.control, type: 'inline-check' }, - }, -}; - -export const Select = Template.bind({}); -Select.args = { - ...baseArgs, - row: { - ...Radio.args.row, - control: { ...Radio.args.row.control, type: 'select' }, - }, -}; - -export const MultiSelect = Template.bind({}); -MultiSelect.args = { - ...baseArgs, - row: { - ...Radio.args.row, - control: { ...Radio.args.row.control, type: 'multi-select' }, - }, -}; - -export const ObjectOf = Template.bind({}); -ObjectOf.args = { - ...baseArgs, - row: { - key: 'someObject', - name: 'Some Object', - description: 'A simple `objectOf` propType.', - table: { - type: { summary: 'objectOf(number)' }, - defaultValue: { summary: '{ key: 1 }' }, - }, - control: { type: 'object' }, - }, -}; - -export const ArrayOf = Template.bind({}); -ArrayOf.args = { - ...baseArgs, - row: { - key: 'someArray', - name: 'Some Array', - description: 'array of a certain type', - table: { - type: { summary: 'number[]' }, - defaultValue: { summary: '[1, 2, 3]' }, - }, - control: { type: 'array' }, - }, -}; - -export const ComplexObject = Template.bind({}); -ComplexObject.args = { - ...baseArgs, - row: { - key: 'someComplex', - name: 'Some Complex', - description: 'A very complex `objectOf` propType.', - table: { - type: { - summary: 'object', - detail: `[{ - id: number, - func: func, - arr: [{ index: number }] - }]`, - }, - defaultValue: { - summary: 'object', - detail: `[{ - id: 1, - func: () => {}, - arr: [{ index: 1 }] - }]`, - }, - }, - control: { type: 'object' }, - }, -}; - -export const Func = Template.bind({}); -Func.args = { - ...baseArgs, - row: { - key: 'concat', - name: 'Concat', - description: 'concat 2 string values.', - type: { required: true }, - table: { - type: { summary: '(a: string, b: string) => string' }, - defaultValue: { summary: 'func', detail: '(a, b) => { return a + b; }' }, - jsDocTags: { - params: [ - { name: 'a', description: 'The first string' }, - { name: 'b', description: 'The second string' }, - ], - returns: { description: 'The concatenation of both strings' }, - }, - }, - control: false, - }, -}; - -const enumeration = - '"search" | "arrow-to-bottom" | "arrow-to-right" | "bell" | "check" | "check-circle"'; - -export const Enum = Template.bind({}); -Enum.args = { - ...baseArgs, - row: { - key: 'enum', - name: 'Some enum', - type: { required: true }, - table: { - type: { - summary: enumeration, - }, - }, - }, -}; - -const long_enumeration = - '"search" | "arrow-to-bottom" | "arrow-to-right" | "bell" | "check" | "check-circle" | "chevron-up" | "chevron-down" | "chevron-left" | "chevron-right" | "envelope" | "exchange" | "file" | "file-check" | "file-import" | "file-pdf" | "file-times" | "pencil" | "question" | "question-circle" | "sitemap" | "user" | "times" | "plus" | "exclamation-triangle" | "trash-alt" | "long-arrow-up" | "long-arrow-down" | "long-arrow-left" | "long-arrow-right" | "external-link-alt" | "sticky-note" | "chart-line" | "spinner-third"'; - -export const LongEnum = Template.bind({}); -LongEnum.args = { - ...baseArgs, - row: { - key: 'longEnum', - name: 'Long enum', - type: { required: true }, - table: { - type: { - summary: long_enumeration, - }, - }, - }, -}; - -const complexUnion = - '((a: string | SVGSVGElement) => void) | RefObject | [a|b] | {a|b}'; - -export const ComplexUnion = Template.bind({}); -ComplexUnion.args = { - ...baseArgs, - row: { - key: 'complexUnion', - name: 'Complex', - type: { required: true }, - table: { - type: { - summary: complexUnion, - }, - }, - }, -}; - -export const Markdown = Template.bind({}); -Markdown.args = { - ...baseArgs, - row: { - key: 'someString', - name: 'Some String', - description: - 'A `prop` can *support* __markdown__ syntax. This was ship in ~~5.2~~ 5.3. [Find more info in the storybook docs.](https://storybook.js.org/)', - table: { - type: { summary: 'string' }, - }, - control: { type: 'text' }, - }, -}; - -export const StringCompact = Template.bind({}); -StringCompact.args = { - ...String.args, - compact: true, -}; - -export const StringNoControls = Template.bind({}); -StringNoControls.args = { - row: String.args.row, -}; - -export const StringNoControlsCompact = Template.bind({}); -StringNoControlsCompact.args = { - row: String.args.row, - compact: true, -}; diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx deleted file mode 100644 index 0f0fb41b9011..000000000000 --- a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx +++ /dev/null @@ -1,144 +0,0 @@ -import React from 'react'; -import { action } from '@storybook/addon-actions'; -import { styled } from '@storybook/theming'; -import { ArgsTable, ArgsTableError } from './ArgsTable'; -import { NoControlsWarning } from './NoControlsWarning'; -import * as ArgRow from './ArgRow.stories'; - -export default { - component: ArgsTable, - title: 'Docs/ArgsTable', - args: { - updateArgs: action('updateArgs'), - resetArgs: action('resetArgs'), - }, -}; - -const propsSection = { category: 'props ' }; -const eventsSection = { category: 'events ' }; - -const componentSubsection = { subcategory: 'MyComponent ' }; -const htmlElementSubsection = { subcategory: 'HTMLElement' }; - -const stringType = ArgRow.String.args.row; -const numberType = ArgRow.Number.args.row; - -const longEnumType = ArgRow.LongEnum.args.row; - -const Template = (args) => ; - -export const Loading = Template.bind({}); -Loading.args = { isLoading: true }; - -export const Normal = Template.bind({}); -Normal.args = { - rows: { - stringType, - numberType, - }, -}; - -export const Compact = Template.bind({}); -Compact.args = { - ...Normal.args, - compact: true, -}; - -const AddonPanelLayout = styled.div(({ theme }) => ({ - fontSize: theme.typography.size.s2 - 1, - background: theme.background.content, -})); - -export const InAddonPanel = Template.bind({}); -InAddonPanel.args = { - ...Normal.args, - inAddonPanel: true, -}; -InAddonPanel.decorators = [(storyFn) => {storyFn()}]; - -export const InAddonPanelWithWarning = (args) => ( - <> - - - -); -InAddonPanelWithWarning.args = { - ...InAddonPanel.args, - updateArgs: null, -}; -InAddonPanelWithWarning.decorators = InAddonPanel.decorators; - -export const Sections = Template.bind({}); -Sections.args = { - rows: { - a: { ...stringType, table: { ...stringType.table, ...propsSection } }, - b: { ...numberType, table: { ...stringType.table, ...propsSection } }, - c: { ...stringType, table: { ...stringType.table, ...eventsSection } }, - }, -}; - -export const SectionsCompact = Template.bind({}); -SectionsCompact.args = { - ...Sections.args, - compact: true, -}; - -export const SectionsAndSubsections = Template.bind({}); -SectionsAndSubsections.args = { - rows: { - a: { ...stringType, table: { ...stringType.table, ...propsSection, ...componentSubsection } }, - b: { ...numberType, table: { ...stringType.table, ...propsSection, ...componentSubsection } }, - c: { ...stringType, table: { ...stringType.table, ...eventsSection, ...componentSubsection } }, - d: { - ...stringType, - table: { ...stringType.table, ...eventsSection, ...htmlElementSubsection }, - }, - }, -}; - -export const SubsectionsOnly = Template.bind({}); -SubsectionsOnly.args = { - rows: { - a: { ...stringType, table: { ...stringType.table, ...componentSubsection } }, - b: { ...numberType, table: { ...stringType.table, ...componentSubsection } }, - c: { ...stringType, table: { ...stringType.table, ...componentSubsection } }, - d: { ...stringType, table: { ...stringType.table, ...htmlElementSubsection } }, - }, -}; - -export const AllControls = Template.bind({}); -AllControls.args = { - rows: { - array: ArgRow.ArrayOf.args.row, - boolean: ArgRow.Boolean.args.row, - color: ArgRow.Color.args.row, - date: ArgRow.Date.args.row, - string: ArgRow.String.args.row, - number: ArgRow.Number.args.row, - range: ArgRow.Number.args.row, - radio: ArgRow.Radio.args.row, - inlineRadio: ArgRow.InlineRadio.args.row, - check: ArgRow.Check.args.row, - inlineCheck: ArgRow.InlineCheck.args.row, - select: ArgRow.Select.args.row, - multiSelect: ArgRow.MultiSelect.args.row, - object: ArgRow.ObjectOf.args.row, - func: ArgRow.Func.args.row, - }, -}; - -export const Error = Template.bind({}); -Error.args = { - error: ArgsTableError.NO_COMPONENT, -}; - -export const Empty = Template.bind({}); -Empty.args = { rows: {} }; - -export const WithDefaultExpandedArgs = Template.bind({}); -WithDefaultExpandedArgs.args = { - rows: { - longEnumType, - }, - initialExpandedArgs: true, -}; diff --git a/lib/components/src/blocks/ArgsTable/SectionRow.stories.tsx b/lib/components/src/blocks/ArgsTable/SectionRow.stories.tsx deleted file mode 100644 index 961684c2304a..000000000000 --- a/lib/components/src/blocks/ArgsTable/SectionRow.stories.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import { SectionRow } from './SectionRow'; -import { TableWrapper } from './ArgsTable'; -import { ResetWrapper } from '../../typography/ResetWrapper'; - -export default { - component: SectionRow, - title: 'Docs/SectionRow', - decorators: [ - (getStory) => ( - - - {getStory()} - - - ), - ], -}; - -const Template = (args) => ; - -export const Section = Template.bind({}); -Section.args = { level: 'section', label: 'Props' }; - -export const Subsection = Template.bind({}); -Subsection.args = { level: 'subsection', label: 'HTMLElement' }; - -export const Collapsed = Template.bind({}); -Collapsed.args = { ...Section.args, initialExpanded: false }; - -export const Nested = () => ( - - - - Some content - - - -); diff --git a/lib/components/src/blocks/ArgsTable/TabbedArgsTable.stories.tsx b/lib/components/src/blocks/ArgsTable/TabbedArgsTable.stories.tsx deleted file mode 100644 index a64c3299424e..000000000000 --- a/lib/components/src/blocks/ArgsTable/TabbedArgsTable.stories.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import { TabbedArgsTable } from './TabbedArgsTable'; -import { Normal, Compact, Sections } from './ArgsTable.stories'; - -export default { - component: TabbedArgsTable, - title: 'Docs/TabbedArgsTable', -}; - -const Template = (args) => ; - -export const Tabs = Template.bind({}); -Tabs.args = { - tabs: { - Normal: Normal.args, - Compact: Compact.args, - Sections: Sections.args, - }, -}; - -export const TabsInAddonPanel = Template.bind({}); -TabsInAddonPanel.args = { - tabs: { - Normal: Normal.args, - Compact: Compact.args, - Sections: Sections.args, - }, - inAddonPanel: true, -}; - -export const Empty = Template.bind({}); -Empty.args = { - tabs: {}, -}; diff --git a/lib/components/src/blocks/Source.stories.tsx b/lib/components/src/blocks/Source.stories.tsx deleted file mode 100644 index a3dc80c2c859..000000000000 --- a/lib/components/src/blocks/Source.stories.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; -import { Source, SourceError } from './Source'; - -export default { - title: 'Docs/Source', - component: Source, -}; - -export const Loading = (args) => ; -Loading.args = { - isLoading: true, -}; - -const jsxCode = ` - - a.id} /> - -`; - -export const JSX = (args) => ; -JSX.args = { - code: jsxCode, - language: 'jsx', - format: false, -}; - -const cssCode = ` -@-webkit-keyframes blinker { - from { opacity: 1.0; } - to { opacity: 0.0; } -} - -.waitingForConnection { - -webkit-animation-name: blinker; - -webkit-animation-iteration-count: infinite; - -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); - -webkit-animation-duration: 1.7s; -} -`; - -export const CSS = (args) => ; -CSS.args = { - code: cssCode, - language: 'css', - format: false, -}; - -export const NoStory = (args) => ; -NoStory.args = { - error: SourceError.NO_STORY, - format: false, -}; - -export const SourceUnavailable = (args) => ; -SourceUnavailable.args = { - error: SourceError.SOURCE_UNAVAILABLE, - format: false, -}; diff --git a/lib/components/src/index.ts b/lib/components/src/index.ts index 8aa89b5953a0..0c079d883ea7 100644 --- a/lib/components/src/index.ts +++ b/lib/components/src/index.ts @@ -37,6 +37,7 @@ export type { SyntaxHighlighterRendererProps, } from './syntaxhighlighter/syntaxhighlighter-types'; export { SyntaxHighlighter } from './syntaxhighlighter/lazy-syntaxhighlighter'; +export { createCopyToClipboardFunction } from './syntaxhighlighter/syntaxhighlighter'; // UI export { ActionBar } from './ActionBar/ActionBar'; @@ -44,6 +45,7 @@ export { Spaced } from './spaced/Spaced'; export { Placeholder } from './placeholder/placeholder'; export { ScrollArea } from './ScrollArea/ScrollArea'; export { Zoom } from './Zoom/Zoom'; +export type { ActionItem } from './ActionBar/ActionBar'; // Forms export { Button } from './Button/Button'; @@ -57,7 +59,7 @@ export { TooltipLinkList } from './tooltip/TooltipLinkList'; // Toolbar and subcomponents export { Tabs, TabsState, TabBar, TabWrapper } from './tabs/tabs'; -export { IconButton, TabButton } from './bar/button'; +export { IconButton, IconButtonSkeleton, TabButton } from './bar/button'; export { Separator, interleaveSeparators } from './bar/separator'; export { Bar, FlexBar } from './bar/bar'; export { AddonPanel } from './addon-panel/addon-panel'; @@ -68,10 +70,6 @@ export { Icons, Symbols } from './icon/icon'; export { StorybookLogo } from './brand/StorybookLogo'; export { StorybookIcon } from './brand/StorybookIcon'; -// Doc blocks -export * from './blocks'; -export * from './controls'; - // Loader export { Loader } from './Loader/Loader'; @@ -79,6 +77,9 @@ export { Loader } from './Loader/Loader'; export { getStoryHref } from './utils/getStoryHref'; export * from './typography/DocumentFormatting'; +export * from './typography/ResetWrapper'; + +export { withReset, codeCommon } from './typography/lib/common'; // eslint-disable-next-line prefer-destructuring export const components = typography.components; diff --git a/lib/components/src/typography/elements/Code.tsx b/lib/components/src/typography/elements/Code.tsx index e91a7d106190..382c6a7c8cce 100644 --- a/lib/components/src/typography/elements/Code.tsx +++ b/lib/components/src/typography/elements/Code.tsx @@ -1,6 +1,6 @@ import { styled } from '@storybook/theming'; import React, { Children, ComponentProps } from 'react'; -import { StyledSyntaxHighlighter } from '../../blocks/Source'; +import { SyntaxHighlighter } from '../../syntaxhighlighter/syntaxhighlighter'; import { isReactChildString } from '../lib/isReactChildString'; import { codeCommon } from '../lib/common'; @@ -21,6 +21,20 @@ const DefaultCodeBlock = styled.code( codeCommon ); +const StyledSyntaxHighlighter = styled(SyntaxHighlighter)<{}>(({ theme }) => ({ + // DocBlocks-specific styling and overrides + fontSize: `${theme.typography.size.s2 - 1}px`, + lineHeight: '19px', + margin: '25px 0 40px', + borderRadius: theme.appBorderRadius, + boxShadow: + theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0', + 'pre.prismjs': { + padding: 20, + background: 'inherit', + }, +})); + export const Code = ({ className, children, diff --git a/nx.json b/nx.json index a81742f471c3..b02681670acd 100644 --- a/nx.json +++ b/nx.json @@ -53,6 +53,7 @@ "vue-example": { "implicitDependencies": [] }, "web-components-kitchen-sink": { "implicitDependencies": [] }, "@storybook/external-docs": { "implicitDependencies": [] }, + "@storybook/example-doc-blocks": { "implicitDependencies": [] }, "@storybook/angular": { "implicitDependencies": [] }, "@storybook/docs-tools": { "implicitDependencies": [] }, @@ -106,6 +107,7 @@ "@storybook/theming": { "implicitDependencies": [] }, "@storybook/ui": { "implicitDependencies": [] }, "@storybook/preview-web": { "implicitDependencies": [] }, + "@storybook/blocks": { "implicitDependencies": [] }, "@storybook/html-webpack5": { "implicitDependencies": [] }, "@storybook/preact-webpack5": { "implicitDependencies": [] }, diff --git a/package.json b/package.json index cab4d550fc02..9d9dee1b95e7 100644 --- a/package.json +++ b/package.json @@ -164,6 +164,7 @@ "@storybook/angular": "workspace:*", "@storybook/api": "workspace:*", "@storybook/babel-plugin-require-context-hook": "1.0.1", + "@storybook/blocks": "workspace:*", "@storybook/channel-postmessage": "workspace:*", "@storybook/channel-websocket": "workspace:*", "@storybook/channels": "workspace:*", diff --git a/renderers/react/src/docs/react-argtypes.stories.tsx b/renderers/react/src/docs/react-argtypes.stories.tsx index 9a14a0c39f64..b25641389ac5 100644 --- a/renderers/react/src/docs/react-argtypes.stories.tsx +++ b/renderers/react/src/docs/react-argtypes.stories.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import mapValues from 'lodash/mapValues'; -import { ArgsTable } from '@storybook/components'; -import { Args } from '@storybook/api'; +import { PureArgsTable as ArgsTable } from '@storybook/blocks'; +import type { Args } from '@storybook/api'; import { inferControls } from '@storybook/store'; import { storiesOf, StoryContext } from '..'; diff --git a/scripts/build-package.js b/scripts/build-package.js index cd4e79366b07..0c14b424a94f 100644 --- a/scripts/build-package.js +++ b/scripts/build-package.js @@ -36,6 +36,12 @@ async function run() { suffix: '--watch', helpText: 'build on watch mode', }, + prod: { + name: `prod`, + defaultValue: false, + suffix: '--prod', + helpText: 'build on production mode', + }, ...packageTasks, }; @@ -53,6 +59,7 @@ async function run() { let selection; let watchMode = false; + let prodMode = false; if ( !Object.keys(tasks) .map((key) => tasks[key].value) @@ -61,12 +68,20 @@ async function run() { selection = await prompts([ { type: 'toggle', - name: 'mode', + name: 'watch', message: 'Start in watch mode', initial: false, active: 'yes', inactive: 'no', }, + { + type: 'toggle', + name: 'prod', + message: 'Start in production mode', + initial: false, + active: 'yes', + inactive: 'no', + }, { type: 'autocompleteMultiselect', message: 'Select the packages to build', @@ -80,29 +95,34 @@ async function run() { selected: (tasks[key] && tasks[key].defaultValue) || false, })), }, - ]).then(({ mode, todo }) => { - watchMode = mode; + ]).then(({ watch, prod, todo }) => { + watchMode = watch; + prodMode = prod; return todo?.map((key) => tasks[key]); }); } else { // hits here when running yarn build --packagename watchMode = process.argv.includes('--watch'); + prodMode = process.argv.includes('--prod'); selection = Object.keys(tasks) .map((key) => tasks[key]) - .filter((item) => item.name !== 'watch' && item.value === true); + .filter((item) => !['watch', 'prod'].includes(item.name) && item.value === true); } selection?.filter(Boolean).forEach(async (v) => { const commmand = (await readJSON(resolve(v.location, 'package.json'))).scripts.prepare; const cwd = resolve(__dirname, '..', v.location); - const sub = require('execa').command(`yarn ${commmand}${watchMode ? ' --watch' : ''}`, { - cwd, - buffer: false, - shell: true, - env: { - NODE_ENV: 'production', - }, - }); + const sub = require('execa').command( + `yarn ${commmand}${watchMode ? ' --watch' : ''}${prodMode ? ' --optimized' : ''}`, + { + cwd, + buffer: false, + shell: true, + env: { + NODE_ENV: 'production', + }, + } + ); sub.stdout.on('data', (data) => { process.stdout.write(`${chalk.cyan(v.name)}:\n${data}`); diff --git a/workspace.json b/workspace.json index 0e2f3ce69cb3..2fcb0f0c9fab 100644 --- a/workspace.json +++ b/workspace.json @@ -61,6 +61,7 @@ "type": "library" }, "@storybook/external-docs": { "root": "examples/external-docs", "type": "library" }, + "@storybook/example-doc-blocks": { "root": "examples/doc-blocks", "type": "library" }, "@storybook/addons": { "root": "lib/addons", "type": "library" }, "@storybook/api": { "root": "lib/api", "type": "library" }, @@ -90,6 +91,7 @@ "@storybook/csf-tools": { "root": "lib/csf-tools", "type": "library" }, "@storybook/ui": { "root": "lib/ui", "type": "library" }, "@storybook/preview-web": { "root": "lib/preview-web", "type": "library" }, + "@storybook/blocks": { "root": "lib/blocks", "type": "library" }, "@storybook/preset-html-webpack": { "root": "presets/html-webpack", "type": "library" }, "@storybook/preset-preact-webpack": { "root": "presets/preact-webpack", "type": "library" }, diff --git a/yarn.lock b/yarn.lock index 56a6ec48511a..991860db2e73 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7018,6 +7018,7 @@ __metadata: dependencies: "@storybook/addons": 7.0.0-alpha.6 "@storybook/api": 7.0.0-alpha.6 + "@storybook/blocks": 7.0.0-alpha.6 "@storybook/client-logger": 7.0.0-alpha.6 "@storybook/components": 7.0.0-alpha.6 "@storybook/core-common": 7.0.0-alpha.6 @@ -7050,6 +7051,7 @@ __metadata: "@mdx-js/react": ^1.6.22 "@storybook/addons": 7.0.0-alpha.6 "@storybook/api": 7.0.0-alpha.6 + "@storybook/blocks": 7.0.0-alpha.6 "@storybook/components": 7.0.0-alpha.6 "@storybook/core-common": 7.0.0-alpha.6 "@storybook/core-events": 7.0.0-alpha.6 @@ -7710,6 +7712,39 @@ __metadata: languageName: node linkType: hard +"@storybook/blocks@7.0.0-alpha.6, @storybook/blocks@workspace:*, @storybook/blocks@workspace:lib/blocks": + version: 0.0.0-use.local + resolution: "@storybook/blocks@workspace:lib/blocks" + dependencies: + "@mdx-js/react": ^1.6.22 + "@storybook/addons": 7.0.0-alpha.6 + "@storybook/api": 7.0.0-alpha.6 + "@storybook/client-logger": 7.0.0-alpha.6 + "@storybook/components": 7.0.0-alpha.6 + "@storybook/core-events": 7.0.0-alpha.6 + "@storybook/csf": 0.0.2--canary.7c6c115.0 + "@storybook/docs-tools": 7.0.0-alpha.6 + "@storybook/preview-web": 7.0.0-alpha.6 + "@storybook/store": 7.0.0-alpha.6 + "@storybook/theming": 7.0.0-alpha.6 + color-convert: ^2.0.1 + core-js: ^3.8.2 + fast-deep-equal: ^3.1.3 + global: ^4.4.0 + lodash: ^4.17.21 + markdown-to-jsx: ^7.1.3 + memoizerific: ^1.11.3 + polished: ^4.2.2 + react-colorful: ^5.1.2 + regenerator-runtime: ^0.13.7 + ts-dedent: ^2.0.0 + util-deprecate: ^1.0.2 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + languageName: unknown + linkType: soft + "@storybook/builder-webpack5@7.0.0-alpha.6, @storybook/builder-webpack5@workspace:lib/builder-webpack5": version: 0.0.0-use.local resolution: "@storybook/builder-webpack5@workspace:lib/builder-webpack5" @@ -8225,6 +8260,15 @@ __metadata: languageName: node linkType: hard +"@storybook/csf@npm:0.0.2--canary.7c6c115.0": + version: 0.0.2--canary.7c6c115.0 + resolution: "@storybook/csf@npm:0.0.2--canary.7c6c115.0" + dependencies: + lodash: ^4.17.15 + checksum: 85a179664d18eeca8462c1b6ff36f9b68b856c9f9c5143aa6f19b17e4cc97bc08ed69921a5287a61d8c90f61366ff6a5ab89930d158402e7c04d07a3ffaad8bb + languageName: node + linkType: hard + "@storybook/csf@npm:0.0.2--canary.87bc651.0": version: 0.0.2--canary.87bc651.0 resolution: "@storybook/csf@npm:0.0.2--canary.87bc651.0" @@ -8337,6 +8381,34 @@ __metadata: languageName: node linkType: hard +"@storybook/example-doc-blocks@workspace:examples/doc-blocks": + version: 0.0.0-use.local + resolution: "@storybook/example-doc-blocks@workspace:examples/doc-blocks" + dependencies: + "@babel/preset-env": ^7.12.11 + "@babel/preset-react": ^7.12.10 + "@babel/preset-typescript": ^7.12.7 + "@storybook/addon-essentials": 7.0.0-alpha.6 + "@storybook/addon-storyshots": 7.0.0-alpha.6 + "@storybook/addon-storysource": 7.0.0-alpha.6 + "@storybook/addons": 7.0.0-alpha.6 + "@storybook/cli": 7.0.0-alpha.6 + "@storybook/components": 7.0.0-alpha.6 + "@storybook/react-webpack5": 7.0.0-alpha.6 + "@storybook/theming": 7.0.0-alpha.6 + "@types/babel__preset-env": ^7 + "@types/react": ^16.14.23 + "@types/react-dom": ^16.9.14 + cross-env: ^7.0.3 + lodash: ^4.17.21 + react: 16.14.0 + react-dom: 16.14.0 + sb: 7.0.0-alpha.6 + typescript: ~4.6.3 + webpack: 5 + languageName: unknown + linkType: soft + "@storybook/example-react-ts@workspace:examples/react-ts": version: 0.0.0-use.local resolution: "@storybook/example-react-ts@workspace:examples/react-ts" @@ -9049,6 +9121,7 @@ __metadata: "@storybook/angular": "workspace:*" "@storybook/api": "workspace:*" "@storybook/babel-plugin-require-context-hook": 1.0.1 + "@storybook/blocks": "workspace:*" "@storybook/channel-postmessage": "workspace:*" "@storybook/channel-websocket": "workspace:*" "@storybook/channels": "workspace:*" @@ -39796,7 +39869,7 @@ __metadata: languageName: node linkType: hard -"sb@workspace:lib/cli-sb": +"sb@7.0.0-alpha.6, sb@workspace:lib/cli-sb": version: 0.0.0-use.local resolution: "sb@workspace:lib/cli-sb" dependencies: From 2f0b3626ae54d2559025e821d6214900dc0c06e6 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 29 Jun 2022 13:24:47 +0200 Subject: [PATCH 2/6] we should revert this once the prebuilt manager is merged --- package.json | 1 + scripts/build-manager-config/main.js | 5 +++++ yarn.lock | 32 +++++++++++++++++++++++++++- 3 files changed, 37 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 428685b7aa64..eb698b1d4282 100644 --- a/package.json +++ b/package.json @@ -244,6 +244,7 @@ "@typescript-eslint/eslint-plugin": "^5.15.0", "@typescript-eslint/experimental-utils": "^5.20.0", "@typescript-eslint/parser": "^5.15.0", + "assert": "^2.0.0", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^10.1.0", "babel-jest": "^26.6.3", diff --git a/scripts/build-manager-config/main.js b/scripts/build-manager-config/main.js index 876a78f26d61..59f4b043791d 100644 --- a/scripts/build-manager-config/main.js +++ b/scripts/build-manager-config/main.js @@ -5,4 +5,9 @@ module.exports = { builder: '@storybook/builder-webpack5', disableTelemetry: true, }, + managerWebpack: async (config) => { + // eslint-disable-next-line no-param-reassign + config.resolve.fallback = { assert: require.resolve('assert/') }; + return config; + }, }; diff --git a/yarn.lock b/yarn.lock index cad4691138f7..332510a023fd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9323,6 +9323,7 @@ __metadata: "@typescript-eslint/eslint-plugin": ^5.15.0 "@typescript-eslint/experimental-utils": ^5.20.0 "@typescript-eslint/parser": ^5.15.0 + assert: ^2.0.0 babel-core: ^7.0.0-bridge.0 babel-eslint: ^10.1.0 babel-jest: ^26.6.3 @@ -13838,6 +13839,18 @@ __metadata: languageName: node linkType: hard +"assert@npm:^2.0.0": + version: 2.0.0 + resolution: "assert@npm:2.0.0" + dependencies: + es6-object-assign: ^1.1.0 + is-nan: ^1.2.1 + object-is: ^1.0.1 + util: ^0.12.0 + checksum: a25c7ebc07b52cc4dadd5c46d73472e7d4b86e40eb7ebaa12f78c1ba954dbe83612be5dea314b862fc364c305ab3bdbcd1c9d4ec2d92bc37214ae7d5596347f3 + languageName: node + linkType: hard + "assign-symbols@npm:^1.0.0": version: 1.0.0 resolution: "assign-symbols@npm:1.0.0" @@ -20880,6 +20893,13 @@ __metadata: languageName: node linkType: hard +"es6-object-assign@npm:^1.1.0": + version: 1.1.0 + resolution: "es6-object-assign@npm:1.1.0" + checksum: 11c165ae16866aca897dee9b689402f0e871589e859809343ef9e0fdd067133684db16fd15abdba2a99e7319222b9f43e6b747baabb909cee9d0ecbac8deebee + languageName: node + linkType: hard + "es6-promise@npm:^3.1.2": version: 3.3.1 resolution: "es6-promise@npm:3.3.1" @@ -26813,6 +26833,16 @@ __metadata: languageName: node linkType: hard +"is-nan@npm:^1.2.1": + version: 1.3.2 + resolution: "is-nan@npm:1.3.2" + dependencies: + call-bind: ^1.0.0 + define-properties: ^1.1.3 + checksum: 8bfb286f85763f9c2e28ea32e9127702fe980ffd15fa5d63ade3be7786559e6e21355d3625dd364c769c033c5aedf0a2ed3d4025d336abf1b9241e3d9eddc5b0 + languageName: node + linkType: hard + "is-natural-number@npm:^4.0.1": version: 4.0.1 resolution: "is-natural-number@npm:4.0.1" @@ -44502,7 +44532,7 @@ __metadata: languageName: node linkType: hard -"util@npm:^0.12.4": +"util@npm:^0.12.0, util@npm:^0.12.4": version: 0.12.4 resolution: "util@npm:0.12.4" dependencies: From 75114322b99255b0bae2fc742a7e26505be3e2d7 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 29 Jun 2022 13:59:11 +0200 Subject: [PATCH 3/6] fix example --- examples/doc-blocks/.storybook/main.ts | 2 +- lib/csf-tools/src/ConfigFile.test.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/doc-blocks/.storybook/main.ts b/examples/doc-blocks/.storybook/main.ts index e70bfc60a59c..4f50d98e6f67 100644 --- a/examples/doc-blocks/.storybook/main.ts +++ b/examples/doc-blocks/.storybook/main.ts @@ -1,4 +1,4 @@ -import type { StorybookConfig } from '@storybook/react-webpack5/types'; +import type { StorybookConfig } from '@storybook/react-webpack5'; const config: StorybookConfig = { stories: ['../../../lib/blocks/src/**/*.stories.*'], diff --git a/lib/csf-tools/src/ConfigFile.test.ts b/lib/csf-tools/src/ConfigFile.test.ts index 4bbf996f1ffd..edaa9adcb050 100644 --- a/lib/csf-tools/src/ConfigFile.test.ts +++ b/lib/csf-tools/src/ConfigFile.test.ts @@ -131,7 +131,7 @@ describe('ConfigFile', () => { getField( ['stories'], dedent` - import type { StorybookConfig } from '@storybook/react-webpack5/types'; + import type { StorybookConfig } from '@storybook/react-webpack5'; const config: StorybookConfig = { stories: [{ directory: '../src', titlePrefix: 'Demo' }], From 4b1150679b295e12df25031613dd69b7f32f90a1 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 29 Jun 2022 14:10:24 +0200 Subject: [PATCH 4/6] fix version mismatch --- examples/doc-blocks/package.json | 20 +- lib/blocks/package.json | 18 +- yarn.lock | 1347 +----------------------------- 3 files changed, 41 insertions(+), 1344 deletions(-) diff --git a/examples/doc-blocks/package.json b/examples/doc-blocks/package.json index a4de3e14835f..bb7c88dbbe82 100644 --- a/examples/doc-blocks/package.json +++ b/examples/doc-blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/example-doc-blocks", - "version": "7.0.0-alpha.6", + "version": "7.0.0-alpha.7", "private": true, "scripts": { "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb build", @@ -15,20 +15,20 @@ "@babel/preset-env": "^7.12.11", "@babel/preset-react": "^7.12.10", "@babel/preset-typescript": "^7.12.7", - "@storybook/addon-essentials": "7.0.0-alpha.6", - "@storybook/addon-storyshots": "7.0.0-alpha.6", - "@storybook/addon-storysource": "7.0.0-alpha.6", - "@storybook/addons": "7.0.0-alpha.6", - "@storybook/cli": "7.0.0-alpha.6", - "@storybook/components": "7.0.0-alpha.6", - "@storybook/react-webpack5": "7.0.0-alpha.6", - "@storybook/theming": "7.0.0-alpha.6", + "@storybook/addon-essentials": "7.0.0-alpha.7", + "@storybook/addon-storyshots": "7.0.0-alpha.7", + "@storybook/addon-storysource": "7.0.0-alpha.7", + "@storybook/addons": "7.0.0-alpha.7", + "@storybook/cli": "7.0.0-alpha.7", + "@storybook/components": "7.0.0-alpha.7", + "@storybook/react-webpack5": "7.0.0-alpha.7", + "@storybook/theming": "7.0.0-alpha.7", "@types/babel__preset-env": "^7", "@types/react": "^16.14.23", "@types/react-dom": "^16.9.14", "cross-env": "^7.0.3", "lodash": "^4.17.21", - "sb": "7.0.0-alpha.6", + "sb": "7.0.0-alpha.7", "typescript": "~4.6.3", "webpack": "5" }, diff --git a/lib/blocks/package.json b/lib/blocks/package.json index 0242c98fe6a6..8d4ac34974da 100644 --- a/lib/blocks/package.json +++ b/lib/blocks/package.json @@ -34,16 +34,16 @@ }, "dependencies": { "@mdx-js/react": "^1.6.22", - "@storybook/addons": "7.0.0-alpha.6", - "@storybook/api": "7.0.0-alpha.6", - "@storybook/client-logger": "7.0.0-alpha.6", - "@storybook/components": "7.0.0-alpha.6", - "@storybook/core-events": "7.0.0-alpha.6", + "@storybook/addons": "7.0.0-alpha.7", + "@storybook/api": "7.0.0-alpha.7", + "@storybook/client-logger": "7.0.0-alpha.7", + "@storybook/components": "7.0.0-alpha.7", + "@storybook/core-events": "7.0.0-alpha.7", "@storybook/csf": "0.0.2--canary.7c6c115.0", - "@storybook/docs-tools": "7.0.0-alpha.6", - "@storybook/preview-web": "7.0.0-alpha.6", - "@storybook/store": "7.0.0-alpha.6", - "@storybook/theming": "7.0.0-alpha.6", + "@storybook/docs-tools": "7.0.0-alpha.7", + "@storybook/preview-web": "7.0.0-alpha.7", + "@storybook/store": "7.0.0-alpha.7", + "@storybook/theming": "7.0.0-alpha.7", "color-convert": "^2.0.1", "core-js": "^3.8.2", "fast-deep-equal": "^3.1.3", diff --git a/yarn.lock b/yarn.lock index a0b67ab9fdbc..50182cf9a563 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6986,40 +6986,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/addon-actions@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/addon-actions@npm:7.0.0-alpha.6" - dependencies: - "@storybook/addons": 7.0.0-alpha.6 - "@storybook/api": 7.0.0-alpha.6 - "@storybook/client-logger": 7.0.0-alpha.6 - "@storybook/components": 7.0.0-alpha.6 - "@storybook/core-events": 7.0.0-alpha.6 - "@storybook/csf": 0.0.2--canary.4566f4d.1 - "@storybook/theming": 7.0.0-alpha.6 - core-js: ^3.8.2 - fast-deep-equal: ^3.1.3 - global: ^4.4.0 - lodash: ^4.17.21 - polished: ^4.2.2 - prop-types: ^15.7.2 - react-inspector: ^5.1.0 - telejson: ^6.0.8 - ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 - uuid-browser: ^3.1.0 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true - checksum: 0b7be9e74e6fffe973596858911187d68f752bd8ce1bf668634a76cbf654dae7d5b509972ebc849c98018c481bdb6614152f4d19ae4a37a8ec7a967b1be3799f - languageName: node - linkType: hard - "@storybook/addon-backgrounds@7.0.0-alpha.7, @storybook/addon-backgrounds@workspace:*, @storybook/addon-backgrounds@workspace:addons/backgrounds": version: 0.0.0-use.local resolution: "@storybook/addon-backgrounds@workspace:addons/backgrounds" @@ -7047,34 +7013,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/addon-backgrounds@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/addon-backgrounds@npm:7.0.0-alpha.6" - dependencies: - "@storybook/addons": 7.0.0-alpha.6 - "@storybook/api": 7.0.0-alpha.6 - "@storybook/client-logger": 7.0.0-alpha.6 - "@storybook/components": 7.0.0-alpha.6 - "@storybook/core-events": 7.0.0-alpha.6 - "@storybook/csf": 0.0.2--canary.4566f4d.1 - "@storybook/theming": 7.0.0-alpha.6 - core-js: ^3.8.2 - global: ^4.4.0 - memoizerific: ^1.11.3 - ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true - checksum: bc4d90083ab8e3f7c0f8d5c99c10f0c19802815b5344b1287077cf22c029a849078384e9f16f878ae8860413350c3b0d4656fa0ea2bf8c632de54751bf64efc7 - languageName: node - linkType: hard - "@storybook/addon-controls@7.0.0-alpha.7, @storybook/addon-controls@workspace:*, @storybook/addon-controls@workspace:addons/controls": version: 0.0.0-use.local resolution: "@storybook/addon-controls@workspace:addons/controls" @@ -7103,34 +7041,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/addon-controls@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/addon-controls@npm:7.0.0-alpha.6" - dependencies: - "@storybook/addons": 7.0.0-alpha.6 - "@storybook/api": 7.0.0-alpha.6 - "@storybook/client-logger": 7.0.0-alpha.6 - "@storybook/components": 7.0.0-alpha.6 - "@storybook/core-common": 7.0.0-alpha.6 - "@storybook/csf": 0.0.2--canary.4566f4d.1 - "@storybook/node-logger": 7.0.0-alpha.6 - "@storybook/store": 7.0.0-alpha.6 - "@storybook/theming": 7.0.0-alpha.6 - core-js: ^3.8.2 - lodash: ^4.17.21 - ts-dedent: ^2.0.0 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true - checksum: eaf94875bf997d59e7c562d99266fc961b43c1dd7dd3ce3f3a172aeb5854a60d008cad51b91da6da39c405daad24db601f51b38dd175b901e8dffab8c8b562da - languageName: node - linkType: hard - "@storybook/addon-docs@7.0.0-alpha.7, @storybook/addon-docs@workspace:*, @storybook/addon-docs@workspace:addons/docs": version: 0.0.0-use.local resolution: "@storybook/addon-docs@workspace:addons/docs" @@ -7181,53 +7091,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/addon-docs@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/addon-docs@npm:7.0.0-alpha.6" - dependencies: - "@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": 7.0.0-alpha.6 - "@storybook/api": 7.0.0-alpha.6 - "@storybook/components": 7.0.0-alpha.6 - "@storybook/core-common": 7.0.0-alpha.6 - "@storybook/core-events": 7.0.0-alpha.6 - "@storybook/csf": 0.0.2--canary.4566f4d.1 - "@storybook/csf-tools": 7.0.0-alpha.6 - "@storybook/docs-tools": 7.0.0-alpha.6 - "@storybook/mdx1-csf": ^0.0.1 - "@storybook/node-logger": 7.0.0-alpha.6 - "@storybook/postinstall": 7.0.0-alpha.6 - "@storybook/preview-web": 7.0.0-alpha.6 - "@storybook/source-loader": 7.0.0-alpha.6 - "@storybook/store": 7.0.0-alpha.6 - "@storybook/theming": 7.0.0-alpha.6 - babel-loader: ^8.2.5 - core-js: ^3.8.2 - fast-deep-equal: ^3.1.3 - global: ^4.4.0 - lodash: ^4.17.21 - remark-external-links: ^8.0.0 - remark-slug: ^6.0.0 - ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 - peerDependencies: - "@storybook/mdx2-csf": ^0.0.3 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@storybook/mdx2-csf": - optional: true - react: - optional: true - react-dom: - optional: true - checksum: e1e841e20611177afac54b5b5bd81a7c761fd13cbf709c9887acdb402b0414170346a5619a40d5a96d49de473572e5730a0ba72b246af0f1c71c36c25c182713 - languageName: node - linkType: hard - "@storybook/addon-essentials@7.0.0-alpha.7, @storybook/addon-essentials@workspace:*, @storybook/addon-essentials@workspace:addons/essentials": version: 0.0.0-use.local resolution: "@storybook/addon-essentials@workspace:addons/essentials" @@ -7280,55 +7143,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/addon-essentials@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/addon-essentials@npm:7.0.0-alpha.6" - dependencies: - "@storybook/addon-actions": 7.0.0-alpha.6 - "@storybook/addon-backgrounds": 7.0.0-alpha.6 - "@storybook/addon-controls": 7.0.0-alpha.6 - "@storybook/addon-docs": 7.0.0-alpha.6 - "@storybook/addon-measure": 7.0.0-alpha.6 - "@storybook/addon-outline": 7.0.0-alpha.6 - "@storybook/addon-toolbars": 7.0.0-alpha.6 - "@storybook/addon-viewport": 7.0.0-alpha.6 - "@storybook/addons": 7.0.0-alpha.6 - "@storybook/api": 7.0.0-alpha.6 - "@storybook/core-common": 7.0.0-alpha.6 - "@storybook/node-logger": 7.0.0-alpha.6 - core-js: ^3.8.2 - ts-dedent: ^2.0.0 - peerDependencies: - "@babel/core": ^7.9.6 - peerDependenciesMeta: - "@storybook/angular": - optional: true - "@storybook/html": - 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 - checksum: 0f9b14d665300f27c7db3266eeab5972f325195c6517c53a7a45cdedd8ab8e56f76602ef88c04cf677dd97a34e679a78176678bfb6961c29ef9ad9262e0f77fb - languageName: node - linkType: hard - "@storybook/addon-highlight@7.0.0-alpha.7, @storybook/addon-highlight@workspace:*, @storybook/addon-highlight@workspace:addons/highlight": version: 0.0.0-use.local resolution: "@storybook/addon-highlight@workspace:addons/highlight" @@ -7446,30 +7260,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/addon-measure@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/addon-measure@npm:7.0.0-alpha.6" - dependencies: - "@storybook/addons": 7.0.0-alpha.6 - "@storybook/api": 7.0.0-alpha.6 - "@storybook/client-logger": 7.0.0-alpha.6 - "@storybook/components": 7.0.0-alpha.6 - "@storybook/core-events": 7.0.0-alpha.6 - "@storybook/csf": 0.0.2--canary.4566f4d.1 - core-js: ^3.8.2 - global: ^4.4.0 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true - checksum: 18fac76522a94a1812ba57d4624885d25a646ac471d90da76fa1d935a306eb1f6a823f1df5e2fc926756d75366ae9d6a1ec020a10178afdfefed2eb6ac9722e0 - languageName: node - linkType: hard - "@storybook/addon-outline@7.0.0-alpha.7, @storybook/addon-outline@workspace:*, @storybook/addon-outline@workspace:addons/outline": version: 0.0.0-use.local resolution: "@storybook/addon-outline@workspace:addons/outline" @@ -7494,31 +7284,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/addon-outline@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/addon-outline@npm:7.0.0-alpha.6" - dependencies: - "@storybook/addons": 7.0.0-alpha.6 - "@storybook/api": 7.0.0-alpha.6 - "@storybook/client-logger": 7.0.0-alpha.6 - "@storybook/components": 7.0.0-alpha.6 - "@storybook/core-events": 7.0.0-alpha.6 - "@storybook/csf": 0.0.2--canary.4566f4d.1 - core-js: ^3.8.2 - global: ^4.4.0 - ts-dedent: ^2.0.0 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true - checksum: 6837ef6315f7b3dc866e8bb338d0743b25c78e4320bddbde6ec6cf069ec4681856718f06b54ab4250aa2aece5daacebe957dc7d81a57575d9e885c7f34efcdf1 - languageName: node - linkType: hard - "@storybook/addon-postcss@npm:^2.0.0": version: 2.0.0 resolution: "@storybook/addon-postcss@npm:2.0.0" @@ -7642,82 +7407,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/addon-storyshots@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/addon-storyshots@npm:7.0.0-alpha.6" - dependencies: - "@jest/transform": ^26.6.2 - "@storybook/addons": 7.0.0-alpha.6 - "@storybook/babel-plugin-require-context-hook": 1.0.1 - "@storybook/client-api": 7.0.0-alpha.6 - "@storybook/core-client": 7.0.0-alpha.6 - "@storybook/core-common": 7.0.0-alpha.6 - "@storybook/core-webpack": 7.0.0-alpha.6 - "@storybook/csf": 0.0.2--canary.4566f4d.1 - "@types/glob": ^7.1.3 - "@types/jest": ^26.0.16 - "@types/jest-specific-snapshot": ^0.5.3 - core-js: ^3.8.2 - glob: ^7.1.6 - global: ^4.4.0 - jest-specific-snapshot: ^4.0.0 - preact-render-to-string: ^5.1.19 - pretty-format: ^26.6.2 - react-test-renderer: ^16.8.0 || ^17.0.0 - read-pkg-up: ^7.0.1 - ts-dedent: ^2.0.0 - peerDependencies: - "@angular/core": ">=6.0.0" - "@angular/platform-browser-dynamic": ">=6.0.0" - "@storybook/angular": "*" - "@storybook/react": "*" - "@storybook/vue": "*" - "@storybook/vue3": "*" - jest: "*" - jest-preset-angular: "*" - jest-vue-preprocessor: "*" - preact: ^10.5.13 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - rxjs: "*" - svelte: "*" - vue: "*" - vue-jest: "*" - peerDependenciesMeta: - "@angular/core": - optional: true - "@angular/platform-browser-dynamic": - optional: true - "@storybook/angular": - optional: true - "@storybook/react": - optional: true - "@storybook/vue": - optional: true - "@storybook/vue3": - optional: true - jest-preset-angular: - optional: true - jest-vue-preprocessor: - optional: true - preact: - optional: true - react: - optional: true - react-dom: - optional: true - rxjs: - optional: true - svelte: - optional: true - vue: - optional: true - vue-jest: - optional: true - checksum: 41efd26adc0a96a0481b69e131b5c8908d6b39762aac822eb89a72603e12b1ca4a64e3b53ef78c30dfd667a7894f188773c235c08995a81ccc1afc8008e34757 - languageName: node - linkType: hard - "@storybook/addon-storysource@7.0.0-alpha.7, @storybook/addon-storysource@workspace:*, @storybook/addon-storysource@workspace:addons/storysource": version: 0.0.0-use.local resolution: "@storybook/addon-storysource@workspace:addons/storysource" @@ -7746,33 +7435,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/addon-storysource@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/addon-storysource@npm:7.0.0-alpha.6" - dependencies: - "@storybook/addons": 7.0.0-alpha.6 - "@storybook/api": 7.0.0-alpha.6 - "@storybook/client-logger": 7.0.0-alpha.6 - "@storybook/components": 7.0.0-alpha.6 - "@storybook/router": 7.0.0-alpha.6 - "@storybook/source-loader": 7.0.0-alpha.6 - "@storybook/theming": 7.0.0-alpha.6 - core-js: ^3.8.2 - estraverse: ^5.2.0 - prop-types: ^15.7.2 - react-syntax-highlighter: ^15.4.5 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true - checksum: 51b82aae6a441aaa33592034df8720f9479753aaaf9af0dc2a65ff382bba1f203ceef5e5b5b53c37797c71c8a06112ce4fb96ee9121528e487b5d348b7872a82 - languageName: node - linkType: hard - "@storybook/addon-toolbars@7.0.0-alpha.7, @storybook/addon-toolbars@workspace:*, @storybook/addon-toolbars@workspace:addons/toolbars": version: 0.0.0-use.local resolution: "@storybook/addon-toolbars@workspace:addons/toolbars" @@ -7794,28 +7456,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/addon-toolbars@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/addon-toolbars@npm:7.0.0-alpha.6" - dependencies: - "@storybook/addons": 7.0.0-alpha.6 - "@storybook/api": 7.0.0-alpha.6 - "@storybook/client-logger": 7.0.0-alpha.6 - "@storybook/components": 7.0.0-alpha.6 - "@storybook/theming": 7.0.0-alpha.6 - core-js: ^3.8.2 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true - checksum: 820c3eb85dc2fad06647a6fc984f4d5b05c1bb52213f1f30de5a06bdea2511d4c28e2bc8cd56c009c3c036f9c20b0d02577616295064471542124aeb3b6295c3 - languageName: node - linkType: hard - "@storybook/addon-viewport@7.0.0-alpha.7, @storybook/addon-viewport@workspace:*, @storybook/addon-viewport@workspace:addons/viewport": version: 0.0.0-use.local resolution: "@storybook/addon-viewport@workspace:addons/viewport" @@ -7841,32 +7481,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/addon-viewport@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/addon-viewport@npm:7.0.0-alpha.6" - dependencies: - "@storybook/addons": 7.0.0-alpha.6 - "@storybook/api": 7.0.0-alpha.6 - "@storybook/client-logger": 7.0.0-alpha.6 - "@storybook/components": 7.0.0-alpha.6 - "@storybook/core-events": 7.0.0-alpha.6 - "@storybook/theming": 7.0.0-alpha.6 - core-js: ^3.8.2 - global: ^4.4.0 - memoizerific: ^1.11.3 - prop-types: ^15.7.2 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true - checksum: c1d0cf5f8b61d7fbf0748268bec3310f2f6933679403278fcd1549afd9cdfff40d9d7e8148ce37fe838dcc11dc21b3bf36b0f1a8fc54b64f6e4a4f2ab5aca7dc - languageName: node - linkType: hard - "@storybook/addons@7.0.0-alpha.7, @storybook/addons@workspace:*, @storybook/addons@workspace:lib/addons": version: 0.0.0-use.local resolution: "@storybook/addons@workspace:lib/addons" @@ -7953,27 +7567,6 @@ __metadata: languageName: node linkType: hard -"@storybook/addons@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/addons@npm:7.0.0-alpha.6" - dependencies: - "@storybook/api": 7.0.0-alpha.6 - "@storybook/channels": 7.0.0-alpha.6 - "@storybook/client-logger": 7.0.0-alpha.6 - "@storybook/core-events": 7.0.0-alpha.6 - "@storybook/csf": 0.0.2--canary.4566f4d.1 - "@storybook/router": 7.0.0-alpha.6 - "@storybook/theming": 7.0.0-alpha.6 - "@types/webpack-env": ^1.16.4 - core-js: ^3.8.2 - global: ^4.4.0 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 0d68418d52e22c6cbd26210da71db80e6f6bbd901cc1c8261b3a156ed82de108962837a5ef64ed7453003ca666497017ee80a8f38c7143d57aac99a620d064a9 - languageName: node - linkType: hard - "@storybook/angular@7.0.0-alpha.7, @storybook/angular@workspace:*, @storybook/angular@workspace:frameworks/angular": version: 0.0.0-use.local resolution: "@storybook/angular@workspace:frameworks/angular" @@ -8176,33 +7769,6 @@ __metadata: languageName: node linkType: hard -"@storybook/api@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/api@npm:7.0.0-alpha.6" - dependencies: - "@storybook/channels": 7.0.0-alpha.6 - "@storybook/client-logger": 7.0.0-alpha.6 - "@storybook/core-events": 7.0.0-alpha.6 - "@storybook/csf": 0.0.2--canary.4566f4d.1 - "@storybook/router": 7.0.0-alpha.6 - "@storybook/semver": ^7.3.2 - "@storybook/theming": 7.0.0-alpha.6 - core-js: ^3.8.2 - fast-deep-equal: ^3.1.3 - global: ^4.4.0 - lodash: ^4.17.21 - memoizerific: ^1.11.3 - store2: ^2.12.0 - telejson: ^6.0.8 - ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 41f63ed51bbcbb4801eb8452c21f090a10ae897d2038ad10fcd0011e80b47dc152739624fd24ecd5821886030045babc2dfeabf84953e166883525f3893a069f - languageName: node - linkType: hard - "@storybook/babel-plugin-require-context-hook@npm:1.0.1": version: 1.0.1 resolution: "@storybook/babel-plugin-require-context-hook@npm:1.0.1" @@ -8215,16 +7781,16 @@ __metadata: resolution: "@storybook/blocks@workspace:lib/blocks" dependencies: "@mdx-js/react": ^1.6.22 - "@storybook/addons": 7.0.0-alpha.6 - "@storybook/api": 7.0.0-alpha.6 - "@storybook/client-logger": 7.0.0-alpha.6 - "@storybook/components": 7.0.0-alpha.6 - "@storybook/core-events": 7.0.0-alpha.6 + "@storybook/addons": 7.0.0-alpha.7 + "@storybook/api": 7.0.0-alpha.7 + "@storybook/client-logger": 7.0.0-alpha.7 + "@storybook/components": 7.0.0-alpha.7 + "@storybook/core-events": 7.0.0-alpha.7 "@storybook/csf": 0.0.2--canary.7c6c115.0 - "@storybook/docs-tools": 7.0.0-alpha.6 - "@storybook/preview-web": 7.0.0-alpha.6 - "@storybook/store": 7.0.0-alpha.6 - "@storybook/theming": 7.0.0-alpha.6 + "@storybook/docs-tools": 7.0.0-alpha.7 + "@storybook/preview-web": 7.0.0-alpha.7 + "@storybook/store": 7.0.0-alpha.7 + "@storybook/theming": 7.0.0-alpha.7 color-convert: ^2.0.1 core-js: ^3.8.2 fast-deep-equal: ^3.1.3 @@ -8302,62 +7868,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/builder-webpack5@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/builder-webpack5@npm:7.0.0-alpha.6" - dependencies: - "@babel/core": ^7.12.10 - "@storybook/addons": 7.0.0-alpha.6 - "@storybook/api": 7.0.0-alpha.6 - "@storybook/channel-postmessage": 7.0.0-alpha.6 - "@storybook/channel-websocket": 7.0.0-alpha.6 - "@storybook/channels": 7.0.0-alpha.6 - "@storybook/client-api": 7.0.0-alpha.6 - "@storybook/client-logger": 7.0.0-alpha.6 - "@storybook/components": 7.0.0-alpha.6 - "@storybook/core-common": 7.0.0-alpha.6 - "@storybook/core-events": 7.0.0-alpha.6 - "@storybook/core-webpack": 7.0.0-alpha.6 - "@storybook/node-logger": 7.0.0-alpha.6 - "@storybook/preview-web": 7.0.0-alpha.6 - "@storybook/router": 7.0.0-alpha.6 - "@storybook/semver": ^7.3.2 - "@storybook/store": 7.0.0-alpha.6 - "@storybook/theming": 7.0.0-alpha.6 - "@types/node": ^14.0.10 || ^16.0.0 - babel-loader: ^8.2.5 - babel-plugin-named-exports-order: ^0.0.2 - browser-assert: ^1.2.1 - case-sensitive-paths-webpack-plugin: ^2.4.0 - core-js: ^3.8.2 - css-loader: ^6.7.1 - fork-ts-checker-webpack-plugin: ^7.2.8 - glob: ^7.1.6 - glob-promise: ^3.4.0 - global: ^4.4.0 - html-webpack-plugin: ^5.5.0 - path-browserify: ^1.0.1 - process: ^0.11.10 - stable: ^0.1.8 - style-loader: ^3.3.1 - terser-webpack-plugin: ^5.3.1 - ts-dedent: ^2.0.0 - util: ^0.12.4 - util-deprecate: ^1.0.2 - webpack: 5 - webpack-dev-middleware: ^5.3.1 - webpack-hot-middleware: ^2.25.1 - webpack-virtual-modules: ^0.4.3 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - typescript: - optional: true - checksum: c4d2aea6f574f0785eb9edda46dbd0867bc73866831c34c860688a6b01f840ef23fd5e4421a1a12486179762d0dd90be7b3be03156757156a9fe4ea08b31e59f - languageName: node - linkType: hard - "@storybook/channel-postmessage@7.0.0-alpha.7, @storybook/channel-postmessage@workspace:*, @storybook/channel-postmessage@workspace:lib/channel-postmessage": version: 0.0.0-use.local resolution: "@storybook/channel-postmessage@workspace:lib/channel-postmessage" @@ -8372,21 +7882,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/channel-postmessage@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/channel-postmessage@npm:7.0.0-alpha.6" - dependencies: - "@storybook/channels": 7.0.0-alpha.6 - "@storybook/client-logger": 7.0.0-alpha.6 - "@storybook/core-events": 7.0.0-alpha.6 - core-js: ^3.8.2 - global: ^4.4.0 - qs: ^6.10.0 - telejson: ^6.0.8 - checksum: 2df15f202fe2cf7a10a5c748b1e2e4ae1e795dfbcf77c19437f25058e6d80064234856d5739dee0f6cf20ac2fd2b4577aae2affe246ac910eec9785ca61b0ae9 - languageName: node - linkType: hard - "@storybook/channel-websocket@7.0.0-alpha.7, @storybook/channel-websocket@workspace:*, @storybook/channel-websocket@workspace:lib/channel-websocket": version: 0.0.0-use.local resolution: "@storybook/channel-websocket@workspace:lib/channel-websocket" @@ -8399,19 +7894,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/channel-websocket@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/channel-websocket@npm:7.0.0-alpha.6" - dependencies: - "@storybook/channels": 7.0.0-alpha.6 - "@storybook/client-logger": 7.0.0-alpha.6 - core-js: ^3.8.2 - global: ^4.4.0 - telejson: ^6.0.8 - checksum: db4ba1fc8c58683b4e7946841f5680470be8cf7bd6667d539dd237c49031a528d875312c71389c24adf2215179a427dea13d40e8e6014821b878da1b817bea03 - languageName: node - linkType: hard - "@storybook/channels@7.0.0-alpha.7, @storybook/channels@workspace:*, @storybook/channels@workspace:lib/channels": version: 0.0.0-use.local resolution: "@storybook/channels@workspace:lib/channels" @@ -8455,17 +7937,6 @@ __metadata: languageName: node linkType: hard -"@storybook/channels@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/channels@npm:7.0.0-alpha.6" - dependencies: - core-js: ^3.8.2 - ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 - checksum: 1cf4b44cab7d8b33f328fe327768cdb33739b0e388f5fc31b4e2d756d32ba58dc2b56ddcb14e822b93c315cf02523e7cf0eced2c81607b05ff4d803804e16c65 - languageName: node - linkType: hard - "@storybook/cli@7.0.0-alpha.7, @storybook/cli@workspace:*, @storybook/cli@workspace:lib/cli": version: 0.0.0-use.local resolution: "@storybook/cli@workspace:lib/cli" @@ -8514,48 +7985,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/cli@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/cli@npm:7.0.0-alpha.6" - dependencies: - "@babel/core": ^7.12.10 - "@babel/preset-env": ^7.12.11 - "@storybook/codemod": 7.0.0-alpha.6 - "@storybook/core-common": 7.0.0-alpha.6 - "@storybook/core-server": 7.0.0-alpha.6 - "@storybook/csf-tools": 7.0.0-alpha.6 - "@storybook/node-logger": 7.0.0-alpha.6 - "@storybook/semver": ^7.3.2 - "@storybook/telemetry": 7.0.0-alpha.6 - boxen: ^5.1.2 - chalk: ^4.1.0 - commander: ^6.2.1 - core-js: ^3.8.2 - cross-spawn: ^7.0.3 - envinfo: ^7.7.3 - execa: ^5.0.0 - express: ^4.17.1 - find-up: ^5.0.0 - fs-extra: ^9.0.1 - get-port: ^5.1.1 - globby: ^11.0.2 - jscodeshift: ^0.13.1 - json5: ^2.1.3 - leven: ^3.1.0 - prompts: ^2.4.0 - puppeteer-core: ^2.1.1 - read-pkg-up: ^7.0.1 - shelljs: ^0.8.5 - strip-json-comments: ^3.0.1 - ts-dedent: ^2.0.0 - update-notifier: ^5.0.1 - bin: - getstorybook: bin/index.js - sb: bin/index.js - checksum: ee3c372e67bb8cdf943d4ab07a4b12249704395b9dbc6053bc806b11e46a45299d24757d27ae3d04751cc3e49110154e409644ff68d2b40448b5d32966624f9c - languageName: node - linkType: hard - "@storybook/client-api@7.0.0-alpha.7, @storybook/client-api@workspace:*, @storybook/client-api@workspace:lib/client-api": version: 0.0.0-use.local resolution: "@storybook/client-api@workspace:lib/client-api" @@ -8585,36 +8014,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/client-api@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/client-api@npm:7.0.0-alpha.6" - dependencies: - "@storybook/addons": 7.0.0-alpha.6 - "@storybook/channel-postmessage": 7.0.0-alpha.6 - "@storybook/channels": 7.0.0-alpha.6 - "@storybook/client-logger": 7.0.0-alpha.6 - "@storybook/core-events": 7.0.0-alpha.6 - "@storybook/csf": 0.0.2--canary.4566f4d.1 - "@storybook/store": 7.0.0-alpha.6 - "@types/qs": ^6.9.5 - "@types/webpack-env": ^1.16.4 - core-js: ^3.8.2 - fast-deep-equal: ^3.1.3 - global: ^4.4.0 - lodash: ^4.17.21 - memoizerific: ^1.11.3 - qs: ^6.10.0 - store2: ^2.12.0 - synchronous-promise: ^2.0.15 - ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: fdd8edc0c2677dcbcfcbfdf906f9ace78002be79925d0763f0d9596e8c0e3d22e2d07ea27bb9b1d878eeb7217718a15e7bb1ddef7344267fc8339b3627faea06 - languageName: node - linkType: hard - "@storybook/client-logger@7.0.0-alpha.7, @storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger": version: 0.0.0-use.local resolution: "@storybook/client-logger@workspace:lib/client-logger" @@ -8654,16 +8053,6 @@ __metadata: languageName: node linkType: hard -"@storybook/client-logger@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/client-logger@npm:7.0.0-alpha.6" - dependencies: - core-js: ^3.8.2 - global: ^4.4.0 - checksum: d69f6a2ec9e5b973ff4b20e8d0b9e261c931e8af1204beb35c26944b1da7d6fbf14e43a6c293649071d6dec96e2ed910d9dc4ca7fdd9cbdd3679c6d7950d9e86 - languageName: node - linkType: hard - "@storybook/codemod@7.0.0-alpha.7, @storybook/codemod@workspace:*, @storybook/codemod@workspace:lib/codemod": version: 0.0.0-use.local resolution: "@storybook/codemod@workspace:lib/codemod" @@ -8685,26 +8074,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/codemod@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/codemod@npm:7.0.0-alpha.6" - dependencies: - "@babel/types": ^7.12.11 - "@mdx-js/mdx": ^1.6.22 - "@storybook/csf": 0.0.2--canary.4566f4d.1 - "@storybook/csf-tools": 7.0.0-alpha.6 - "@storybook/node-logger": 7.0.0-alpha.6 - core-js: ^3.8.2 - cross-spawn: ^7.0.3 - globby: ^11.0.2 - jscodeshift: ^0.13.1 - lodash: ^4.17.21 - prettier: ">=2.2.1 <=2.3.0" - recast: ^0.19.0 - checksum: 95fb35c3f7a0bfe4509d472bacbbcf8195fa49aab33e625a7fb841d866283651503df966d1b726fafa2581f655068e1c654ff3cfdd77a03f80a641ad89300826 - languageName: node - linkType: hard - "@storybook/components@7.0.0-alpha.7, @storybook/components@workspace:*, @storybook/components@workspace:lib/components": version: 0.0.0-use.local resolution: "@storybook/components@workspace:lib/components" @@ -8743,24 +8112,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/components@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/components@npm:7.0.0-alpha.6" - dependencies: - "@storybook/client-logger": 7.0.0-alpha.6 - "@storybook/csf": 0.0.2--canary.4566f4d.1 - "@storybook/theming": 7.0.0-alpha.6 - core-js: ^3.8.2 - memoizerific: ^1.11.3 - qs: ^6.10.0 - util-deprecate: ^1.0.2 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: ddcf6c55df608a0acd377ce810f53b716255a5eed99b47926681ded2183ce4ff6aceeb20cf88e5070aef47c21db3d45467311cbddc823ba158dd0661d99c99d5 - languageName: node - linkType: hard - "@storybook/core-client@7.0.0-alpha.7, @storybook/core-client@workspace:lib/core-client": version: 0.0.0-use.local resolution: "@storybook/core-client@workspace:lib/core-client" @@ -8789,35 +8140,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/core-client@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/core-client@npm:7.0.0-alpha.6" - dependencies: - "@storybook/addons": 7.0.0-alpha.6 - "@storybook/channel-postmessage": 7.0.0-alpha.6 - "@storybook/channel-websocket": 7.0.0-alpha.6 - "@storybook/client-api": 7.0.0-alpha.6 - "@storybook/client-logger": 7.0.0-alpha.6 - "@storybook/core-events": 7.0.0-alpha.6 - "@storybook/csf": 0.0.2--canary.4566f4d.1 - "@storybook/preview-web": 7.0.0-alpha.6 - "@storybook/store": 7.0.0-alpha.6 - "@storybook/ui": 7.0.0-alpha.6 - ansi-to-html: ^0.6.11 - core-js: ^3.8.2 - global: ^4.4.0 - lodash: ^4.17.21 - qs: ^6.10.0 - regenerator-runtime: ^0.13.7 - ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 - peerDependenciesMeta: - typescript: - optional: true - checksum: 8ef541920af9f06adb939382cbe79f6bae727287883c762a8556cd26f48dd58a6af8b4b6d1780b6f5c0649f84038b9644200f489f3dc82850acbac5dae89e6d0 - languageName: node - linkType: hard - "@storybook/core-common@7.0.0-alpha.7, @storybook/core-common@workspace:lib/core-common": version: 0.0.0-use.local resolution: "@storybook/core-common@workspace:lib/core-common" @@ -8888,71 +8210,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/core-common@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/core-common@npm:7.0.0-alpha.6" - dependencies: - "@babel/core": ^7.12.10 - "@babel/plugin-proposal-class-properties": ^7.12.1 - "@babel/plugin-proposal-decorators": ^7.12.12 - "@babel/plugin-proposal-export-default-from": ^7.12.1 - "@babel/plugin-proposal-nullish-coalescing-operator": ^7.12.1 - "@babel/plugin-proposal-object-rest-spread": ^7.12.1 - "@babel/plugin-proposal-optional-chaining": ^7.12.7 - "@babel/plugin-proposal-private-methods": ^7.12.1 - "@babel/plugin-proposal-private-property-in-object": ^7.12.1 - "@babel/plugin-syntax-dynamic-import": ^7.8.3 - "@babel/plugin-transform-arrow-functions": ^7.12.1 - "@babel/plugin-transform-block-scoping": ^7.12.12 - "@babel/plugin-transform-classes": ^7.12.1 - "@babel/plugin-transform-destructuring": ^7.12.1 - "@babel/plugin-transform-for-of": ^7.12.1 - "@babel/plugin-transform-parameters": ^7.12.1 - "@babel/plugin-transform-shorthand-properties": ^7.12.1 - "@babel/plugin-transform-spread": ^7.12.1 - "@babel/preset-env": ^7.12.11 - "@babel/preset-react": ^7.12.10 - "@babel/preset-typescript": ^7.12.7 - "@babel/register": ^7.12.1 - "@storybook/csf": 0.0.2--canary.4566f4d.1 - "@storybook/node-logger": 7.0.0-alpha.6 - "@storybook/semver": ^7.3.2 - "@types/babel__core": ^7.0.0 - "@types/express": ^4.7.0 - "@types/node": ^14.0.10 || ^16.0.0 - "@types/pretty-hrtime": ^1.0.0 - babel-loader: ^8.2.5 - babel-plugin-macros: ^3.0.1 - babel-plugin-polyfill-corejs3: ^0.1.0 - chalk: ^4.1.0 - core-js: ^3.8.2 - express: ^4.17.1 - file-system-cache: ^1.0.5 - find-up: ^5.0.0 - fs-extra: ^9.0.1 - glob: ^7.1.6 - handlebars: ^4.7.7 - interpret: ^2.2.0 - json5: ^2.1.3 - lazy-universal-dotenv: ^3.0.1 - picomatch: ^2.3.0 - pkg-dir: ^5.0.0 - pretty-hrtime: ^1.0.3 - resolve-from: ^5.0.0 - slash: ^3.0.0 - telejson: ^6.0.8 - ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - typescript: - optional: true - checksum: 67458e8a12fa4e7dc026b08fb08ee69718c63d6bb75d9bcf0dfd700f4769a29a1e27899d0bdc9a222700dd968311ab2c9f660d2e736a9199ce9a382487c721d3 - languageName: node - linkType: hard - "@storybook/core-events@7.0.0-alpha.7, @storybook/core-events@workspace:*, @storybook/core-events@workspace:lib/core-events": version: 0.0.0-use.local resolution: "@storybook/core-events@workspace:lib/core-events" @@ -8988,15 +8245,6 @@ __metadata: languageName: node linkType: hard -"@storybook/core-events@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/core-events@npm:7.0.0-alpha.6" - dependencies: - core-js: ^3.8.2 - checksum: 37deb4fc1229a350f645c1149567b263df7087baa9a2b162facdd2100996697ebbd1c51e6a580948617c773432bbd44ea23c15bb5d57b6dabc57fe80b4b30e31 - languageName: node - linkType: hard - "@storybook/core-server@7.0.0-alpha.7, @storybook/core-server@workspace:lib/core-server": version: 0.0.0-use.local resolution: "@storybook/core-server@workspace:lib/core-server" @@ -9063,68 +8311,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/core-server@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/core-server@npm:7.0.0-alpha.6" - dependencies: - "@discoveryjs/json-ext": ^0.5.3 - "@storybook/core-client": 7.0.0-alpha.6 - "@storybook/core-common": 7.0.0-alpha.6 - "@storybook/core-events": 7.0.0-alpha.6 - "@storybook/csf": 0.0.2--canary.4566f4d.1 - "@storybook/csf-tools": 7.0.0-alpha.6 - "@storybook/docs-mdx": 0.0.1-canary.1.4bea5cc.0 - "@storybook/manager-webpack5": 7.0.0-alpha.6 - "@storybook/node-logger": 7.0.0-alpha.6 - "@storybook/semver": ^7.3.2 - "@storybook/store": 7.0.0-alpha.6 - "@storybook/telemetry": 7.0.0-alpha.6 - "@types/node": ^14.0.10 || ^16.0.0 - "@types/node-fetch": ^2.5.7 - "@types/pretty-hrtime": ^1.0.0 - better-opn: ^2.1.1 - boxen: ^5.1.2 - chalk: ^4.1.0 - cli-table3: ^0.6.1 - commander: ^6.2.1 - compression: ^1.7.4 - core-js: ^3.8.2 - cpy: ^8.1.2 - detect-port: ^1.3.0 - express: ^4.17.1 - fs-extra: ^9.0.1 - global: ^4.4.0 - globby: ^11.0.2 - ip: ^2.0.0 - lodash: ^4.17.21 - node-fetch: ^2.6.7 - open: ^8.4.0 - pretty-hrtime: ^1.0.3 - prompts: ^2.4.0 - read-pkg-up: ^7.0.1 - serve-favicon: ^2.5.0 - slash: ^3.0.0 - telejson: ^6.0.8 - ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 - watchpack: ^2.2.0 - webpack: 5 - ws: ^8.2.3 - x-default-browser: ^0.4.0 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@storybook/builder-webpack5": - optional: true - "@storybook/manager-webpack5": - optional: true - typescript: - optional: true - checksum: 673a67ab0034642ee1717cf52b0d67dbdeefa9bd51a5a8cabe55a3c851022b18c0b0119643bee2f8bd09cc760cc6134853130d75ffb144c25a13f84ea28d41ba - languageName: node - linkType: hard - "@storybook/core-webpack@7.0.0-alpha.7, @storybook/core-webpack@workspace:*, @storybook/core-webpack@workspace:lib/core-webpack": version: 0.0.0-use.local resolution: "@storybook/core-webpack@workspace:lib/core-webpack" @@ -9137,19 +8323,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/core-webpack@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/core-webpack@npm:7.0.0-alpha.6" - dependencies: - "@storybook/core-common": 7.0.0-alpha.6 - "@storybook/node-logger": 7.0.0-alpha.6 - "@types/node": ^14.0.10 || ^16.0.0 - core-js: ^3.8.2 - ts-dedent: ^2.0.0 - checksum: 3c82d2578b66554370cf5760e0eefceb297048055215bd95af09ec013b784b8e17ae39324f5f532b577d29e2b1255a036e438d62b9ceb568191076b0eb794bd7 - languageName: node - linkType: hard - "@storybook/csf-tools@7.0.0-alpha.7, @storybook/csf-tools@workspace:*, @storybook/csf-tools@workspace:lib/csf-tools": version: 0.0.0-use.local resolution: "@storybook/csf-tools@workspace:lib/csf-tools" @@ -9172,26 +8345,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/csf-tools@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/csf-tools@npm:7.0.0-alpha.6" - 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 - "@babel/traverse": ^7.12.11 - "@babel/types": ^7.12.11 - "@storybook/csf": 0.0.2--canary.4566f4d.1 - core-js: ^3.8.2 - fs-extra: ^9.0.1 - global: ^4.4.0 - ts-dedent: ^2.0.0 - checksum: 3147628c1b5974e48d2c5dcfa87a68a8117e79498df134c9633c78c6b250a859af3a15a804ba4bafeb766d009fffd03529519bc084a2060a66c7263b96714e08 - languageName: node - linkType: hard - "@storybook/csf@npm:0.0.2--canary.4566f4d.1": version: 0.0.2--canary.4566f4d.1 resolution: "@storybook/csf@npm:0.0.2--canary.4566f4d.1" @@ -9278,20 +8431,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/docs-tools@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/docs-tools@npm:7.0.0-alpha.6" - dependencies: - "@babel/core": ^7.12.10 - "@storybook/csf": 0.0.2--canary.4566f4d.1 - "@storybook/store": 7.0.0-alpha.6 - core-js: ^3.8.2 - doctrine: ^3.0.0 - lodash: ^4.17.21 - checksum: 9a57bb57ed84e4be1b6043f5401a24034f1e3b9d5060fe2334b91d3eae3b76fd90807885d3db0b3ede5b3a37521755e7299d17090e62a7c6a9ea614ede7f13e5 - languageName: node - linkType: hard - "@storybook/ember-cli-storybook@npm:^0.2.1": version: 0.2.1 resolution: "@storybook/ember-cli-storybook@npm:0.2.1" @@ -9343,14 +8482,14 @@ __metadata: "@babel/preset-env": ^7.12.11 "@babel/preset-react": ^7.12.10 "@babel/preset-typescript": ^7.12.7 - "@storybook/addon-essentials": 7.0.0-alpha.6 - "@storybook/addon-storyshots": 7.0.0-alpha.6 - "@storybook/addon-storysource": 7.0.0-alpha.6 - "@storybook/addons": 7.0.0-alpha.6 - "@storybook/cli": 7.0.0-alpha.6 - "@storybook/components": 7.0.0-alpha.6 - "@storybook/react-webpack5": 7.0.0-alpha.6 - "@storybook/theming": 7.0.0-alpha.6 + "@storybook/addon-essentials": 7.0.0-alpha.7 + "@storybook/addon-storyshots": 7.0.0-alpha.7 + "@storybook/addon-storysource": 7.0.0-alpha.7 + "@storybook/addons": 7.0.0-alpha.7 + "@storybook/cli": 7.0.0-alpha.7 + "@storybook/components": 7.0.0-alpha.7 + "@storybook/react-webpack5": 7.0.0-alpha.7 + "@storybook/theming": 7.0.0-alpha.7 "@types/babel__preset-env": ^7 "@types/react": ^16.14.23 "@types/react-dom": ^16.9.14 @@ -9358,7 +8497,7 @@ __metadata: lodash: ^4.17.21 react: 16.14.0 react-dom: 16.14.0 - sb: 7.0.0-alpha.6 + sb: 7.0.0-alpha.7 typescript: ~4.6.3 webpack: 5 languageName: unknown @@ -9616,50 +8755,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/manager-webpack5@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/manager-webpack5@npm:7.0.0-alpha.6" - dependencies: - "@babel/core": ^7.12.10 - "@babel/plugin-transform-template-literals": ^7.12.1 - "@babel/preset-react": ^7.12.10 - "@storybook/addons": 7.0.0-alpha.6 - "@storybook/core-client": 7.0.0-alpha.6 - "@storybook/core-common": 7.0.0-alpha.6 - "@storybook/core-webpack": 7.0.0-alpha.6 - "@storybook/node-logger": 7.0.0-alpha.6 - "@storybook/theming": 7.0.0-alpha.6 - "@storybook/ui": 7.0.0-alpha.6 - "@types/node": ^14.0.10 || ^16.0.0 - babel-loader: ^8.2.5 - case-sensitive-paths-webpack-plugin: ^2.4.0 - chalk: ^4.1.0 - core-js: ^3.8.2 - css-loader: ^6.7.1 - esbuild-loader: ^2.19.0 - express: ^4.17.1 - find-up: ^5.0.0 - fs-extra: ^9.0.1 - html-webpack-plugin: ^5.5.0 - node-fetch: ^2.6.7 - process: ^0.11.10 - read-pkg-up: ^7.0.1 - resolve-from: ^5.0.0 - style-loader: ^3.3.1 - telejson: ^6.0.8 - terser-webpack-plugin: ^5.3.1 - ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 - webpack: 5 - webpack-dev-middleware: ^5.3.1 - webpack-virtual-modules: ^0.4.3 - peerDependenciesMeta: - typescript: - optional: true - checksum: 822e1360fbca3006fe0c9b55d82cd7521fe74ad61ea76fc72fa698e3c7784dd3f3d8c47d6827da4dd0e15a844f65c7798975ef04145b2acea4f653376dfc283e - languageName: node - linkType: hard - "@storybook/mdx1-csf@npm:^0.0.1": version: 0.0.1 resolution: "@storybook/mdx1-csf@npm:0.0.1" @@ -9708,19 +8803,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/node-logger@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/node-logger@npm:7.0.0-alpha.6" - dependencies: - "@types/npmlog": ^4.1.2 - chalk: ^4.1.0 - core-js: ^3.8.2 - npmlog: ^5.0.1 - pretty-hrtime: ^1.0.3 - checksum: 5e93c8d6c2dcc73ed146d04267aa2c4abd63bdc29798c0c042301ead9729b6da6b6ed316f2e1b7acb588427d10c9793890077156a47d9a3d68c16c572f152d0c - languageName: node - linkType: hard - "@storybook/node-logger@npm:^6.1.14": version: 6.5.5 resolution: "@storybook/node-logger@npm:6.5.5" @@ -9745,15 +8827,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/postinstall@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/postinstall@npm:7.0.0-alpha.6" - dependencies: - core-js: ^3.8.2 - checksum: acbee5ebcad28da926db485566e5a1b782b3501c4d26da99fd38752e394833008749e12e37fa1835c91531ba95386cc257498d5276ee9606bbe58387ff17efb4 - languageName: node - linkType: hard - "@storybook/preact-webpack5@7.0.0-alpha.7, @storybook/preact-webpack5@workspace:*, @storybook/preact-webpack5@workspace:frameworks/preact-webpack5": version: 0.0.0-use.local resolution: "@storybook/preact-webpack5@workspace:frameworks/preact-webpack5" @@ -9884,41 +8957,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/preset-react-webpack@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/preset-react-webpack@npm:7.0.0-alpha.6" - dependencies: - "@babel/preset-flow": ^7.12.1 - "@babel/preset-react": ^7.12.10 - "@pmmmwh/react-refresh-webpack-plugin": ^0.5.5 - "@storybook/core-webpack": 7.0.0-alpha.6 - "@storybook/docs-tools": 7.0.0-alpha.6 - "@storybook/node-logger": 7.0.0-alpha.6 - "@storybook/react": 7.0.0-alpha.6 - "@storybook/react-docgen-typescript-plugin": 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0 - "@storybook/semver": ^7.3.2 - "@types/node": ^14.14.20 || ^16.0.0 - babel-plugin-add-react-displayname: ^0.0.5 - babel-plugin-react-docgen: ^4.2.1 - core-js: ^3.8.2 - fs-extra: ^9.0.1 - react-refresh: ^0.11.0 - peerDependencies: - "@babel/core": ^7.11.5 - jest-specific-snapshot: ^4.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - require-from-string: ^2.0.2 - webpack: 5 - peerDependenciesMeta: - "@babel/core": - optional: true - typescript: - optional: true - checksum: 22e09364ee98860c552328afc4342cf743db1cb0b138cf3dcecb6623dbabf69209defee0989700ebd9e35b9025ac729454c9815d94bd4da1de234e5be16a97b7 - languageName: node - linkType: hard - "@storybook/preset-scss@npm:^1.0.3": version: 1.0.3 resolution: "@storybook/preset-scss@npm:1.0.3" @@ -10069,28 +9107,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/preview-web@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/preview-web@npm:7.0.0-alpha.6" - dependencies: - "@storybook/addons": 7.0.0-alpha.6 - "@storybook/channel-postmessage": 7.0.0-alpha.6 - "@storybook/client-logger": 7.0.0-alpha.6 - "@storybook/core-events": 7.0.0-alpha.6 - "@storybook/csf": 0.0.2--canary.4566f4d.1 - "@storybook/store": 7.0.0-alpha.6 - ansi-to-html: ^0.6.11 - core-js: ^3.8.2 - global: ^4.4.0 - lodash: ^4.17.21 - qs: ^6.10.0 - synchronous-promise: ^2.0.15 - ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 - checksum: f79cedb54057a340477e96525f5fded1dbfdaa42d9d7e38784fea999392ee4a9d63afcfc1438e203ca080c242a20637311ab8e737bad18c57796d4ecd8531247 - languageName: node - linkType: hard - "@storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0, @storybook/react-docgen-typescript-plugin@npm:canary": version: 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0 resolution: "@storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0" @@ -10132,28 +9148,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/react-webpack5@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/react-webpack5@npm:7.0.0-alpha.6" - dependencies: - "@storybook/builder-webpack5": 7.0.0-alpha.6 - "@storybook/preset-react-webpack": 7.0.0-alpha.6 - "@storybook/react": 7.0.0-alpha.6 - "@types/node": ^14.14.20 || ^16.0.0 - core-js: ^3.8.2 - peerDependencies: - "@babel/core": ^7.11.5 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@babel/core": - optional: true - typescript: - optional: true - checksum: 63472ac431eac5871613fa17d9840bfb1983e75a5a58473f5dc1ae45035f1ea17f6ea865b652ac081cb5b5044d5d8a64dd167e703332313c1fd1de6fccd70869 - languageName: node - linkType: hard - "@storybook/react@7.0.0-alpha.7, @storybook/react@workspace:*, @storybook/react@workspace:renderers/react": version: 0.0.0-use.local resolution: "@storybook/react@workspace:renderers/react" @@ -10192,42 +9186,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/react@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/react@npm:7.0.0-alpha.6" - dependencies: - "@storybook/addons": 7.0.0-alpha.6 - "@storybook/client-logger": 7.0.0-alpha.6 - "@storybook/core-client": 7.0.0-alpha.6 - "@storybook/csf": 0.0.2--canary.4566f4d.1 - "@storybook/docs-tools": 7.0.0-alpha.6 - "@storybook/store": 7.0.0-alpha.6 - "@types/estree": ^0.0.51 - "@types/node": ^14.14.20 || ^16.0.0 - acorn: ^7.4.1 - acorn-jsx: ^5.3.1 - acorn-walk: ^7.2.0 - 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 - ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 - peerDependencies: - jest-specific-snapshot: ^4.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - require-from-string: ^2.0.2 - peerDependenciesMeta: - typescript: - optional: true - checksum: bc2ff6f7ed569d269dae2b105b0f29c8597a33ddbf7caa378d6c68283dbd2f58dc7a843e3e2cc03ebedf1c2fb9af21f62fd03495fd70dd3464203d2bec2e22a7 - languageName: node - linkType: hard - "@storybook/root@workspace:.": version: 0.0.0-use.local resolution: "@storybook/root@workspace:." @@ -10571,21 +9529,6 @@ __metadata: languageName: node linkType: hard -"@storybook/router@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/router@npm:7.0.0-alpha.6" - dependencies: - "@storybook/client-logger": 7.0.0-alpha.6 - core-js: ^3.8.2 - memoizerific: ^1.11.3 - qs: ^6.10.0 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: a2fa65a477eefe10ae7dcfa05439dd49263fcc5e428b629d382d62abacbda2d0cbca9dba97a11e0b2a1c7b138f071126b66acc27cc8d8507a81592c68374d7bf - languageName: node - linkType: hard - "@storybook/semver@npm:^7.3.2": version: 7.3.2 resolution: "@storybook/semver@npm:7.3.2" @@ -10650,25 +9593,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/source-loader@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/source-loader@npm:7.0.0-alpha.6" - dependencies: - "@storybook/addons": 7.0.0-alpha.6 - "@storybook/client-logger": 7.0.0-alpha.6 - "@storybook/csf": 0.0.2--canary.4566f4d.1 - core-js: ^3.8.2 - estraverse: ^5.2.0 - global: ^4.4.0 - lodash: ^4.17.21 - prettier: ">=2.2.1 <=2.3.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 7bd85d6c9779c30453714d698dfecf3a4f12e2fa81dfe809c5ed29f9d992efb0a0ab27fc1000165ac3ef9442ade681344b147e01e1105594b2acfd9fb25a9b52 - languageName: node - linkType: hard - "@storybook/store@7.0.0-alpha.7, @storybook/store@workspace:*, @storybook/store@workspace:lib/store": version: 0.0.0-use.local resolution: "@storybook/store@workspace:lib/store" @@ -10693,31 +9617,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/store@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/store@npm:7.0.0-alpha.6" - dependencies: - "@storybook/addons": 7.0.0-alpha.6 - "@storybook/client-logger": 7.0.0-alpha.6 - "@storybook/core-events": 7.0.0-alpha.6 - "@storybook/csf": 0.0.2--canary.4566f4d.1 - core-js: ^3.8.2 - fast-deep-equal: ^3.1.3 - global: ^4.4.0 - lodash: ^4.17.21 - memoizerific: ^1.11.3 - slash: ^3.0.0 - stable: ^0.1.8 - synchronous-promise: ^2.0.15 - ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 0b361b29b0fa4562439a100adb2df8ad8994985bfe2f21496b133073b9583b0e4aad0e4e003ab844c9517d034a68ea2d92a33bd37e1d6834183846607e1eab1d - languageName: node - linkType: hard - "@storybook/svelte-webpack5@7.0.0-alpha.7, @storybook/svelte-webpack5@workspace:*, @storybook/svelte-webpack5@workspace:frameworks/svelte-webpack5": version: 0.0.0-use.local resolution: "@storybook/svelte-webpack5@workspace:frameworks/svelte-webpack5" @@ -10780,25 +9679,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/telemetry@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/telemetry@npm:7.0.0-alpha.6" - dependencies: - "@storybook/client-logger": 7.0.0-alpha.6 - "@storybook/core-common": 7.0.0-alpha.6 - chalk: ^4.1.0 - core-js: ^3.8.2 - detect-package-manager: ^2.0.1 - fetch-retry: ^5.0.2 - fs-extra: ^9.0.1 - global: ^4.4.0 - isomorphic-unfetch: ^3.1.0 - nanoid: ^3.3.1 - read-pkg-up: ^7.0.1 - checksum: 4b36ca0d9753b637799ea34b55cd228d9594434ba73a871ffe5cdb81593bdf5ce03f3ecadb101a315844693cca6b974328fd8dce5aaa0cc2c5202b3767d099de - languageName: node - linkType: hard - "@storybook/testing-library@npm:0.0.14-next.0": version: 0.0.14-next.0 resolution: "@storybook/testing-library@npm:0.0.14-next.0" @@ -10900,20 +9780,6 @@ __metadata: languageName: node linkType: hard -"@storybook/theming@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/theming@npm:7.0.0-alpha.6" - dependencies: - "@storybook/client-logger": 7.0.0-alpha.6 - core-js: ^3.8.2 - memoizerific: ^1.11.3 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 4a00e23e0fca87a1b99e64ba23fc144a054706a7ac9789517c1b630f4f912941140f1545a57cf2e3470d2040223404daca76a2f05eb6d1c564950a83bf4f190d - languageName: node - linkType: hard - "@storybook/ui@7.0.0-alpha.7, @storybook/ui@workspace:*, @storybook/ui@workspace:lib/ui": version: 0.0.0-use.local resolution: "@storybook/ui@workspace:lib/ui" @@ -10954,30 +9820,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/ui@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "@storybook/ui@npm:7.0.0-alpha.6" - dependencies: - "@storybook/addons": 7.0.0-alpha.6 - "@storybook/api": 7.0.0-alpha.6 - "@storybook/channels": 7.0.0-alpha.6 - "@storybook/client-logger": 7.0.0-alpha.6 - "@storybook/components": 7.0.0-alpha.6 - "@storybook/core-events": 7.0.0-alpha.6 - "@storybook/router": 7.0.0-alpha.6 - "@storybook/semver": ^7.3.2 - "@storybook/theming": 7.0.0-alpha.6 - core-js: ^3.8.2 - memoizerific: ^1.11.3 - qs: ^6.10.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - resolve-from: ^5.0.0 - util: ^0.12.4 - checksum: 501a4fa239e3518bed4ffa4e1562281fd100d130a90803e9a76914f520cf89fbaf66bf1c3ff56c0922008511e6eed82c7c74bbf95240f5d9df97e8d597f3dc99 - languageName: node - linkType: hard - "@storybook/vue-webpack5@7.0.0-alpha.7, @storybook/vue-webpack5@workspace:*, @storybook/vue-webpack5@workspace:frameworks/vue-webpack5": version: 0.0.0-use.local resolution: "@storybook/vue-webpack5@workspace:frameworks/vue-webpack5" @@ -14953,13 +13795,6 @@ __metadata: languageName: node linkType: hard -"arrify@npm:^2.0.1": - version: 2.0.1 - resolution: "arrify@npm:2.0.1" - checksum: 3fb30b5e7c37abea1907a60b28a554d2f0fc088757ca9bf5b684786e583fdf14360721eb12575c1ce6f995282eab936712d3c4389122682eafab0e0b57f78dbb - languageName: node - linkType: hard - "asap@npm:^2.0.0, asap@npm:~2.0.3, asap@npm:~2.0.6": version: 2.0.6 resolution: "asap@npm:2.0.6" @@ -18987,35 +17822,6 @@ __metadata: languageName: node linkType: hard -"cp-file@npm:^7.0.0": - version: 7.0.0 - resolution: "cp-file@npm:7.0.0" - dependencies: - graceful-fs: ^4.1.2 - make-dir: ^3.0.0 - nested-error-stacks: ^2.0.0 - p-event: ^4.1.0 - checksum: db3ef3e3e466742f392ae71edb9b2cdbb314e855d97630a65de57bc1097bacf6e844f6d9d44882b8678c0de26ba7e656c2c915960435970067823372e807eafa - languageName: node - linkType: hard - -"cpy@npm:^8.1.2": - version: 8.1.2 - resolution: "cpy@npm:8.1.2" - dependencies: - arrify: ^2.0.1 - cp-file: ^7.0.0 - globby: ^9.2.0 - has-glob: ^1.0.0 - junk: ^3.1.0 - nested-error-stacks: ^2.1.0 - p-all: ^2.1.0 - p-filter: ^2.1.0 - p-map: ^3.0.0 - checksum: 84611fdd526a0582ae501a0fa1e1d55e16348c69110eb17be5fc0c087b7b2aa6caec014286b669e4f123750d01e0c4db77d32fdcdb9840c3df4d161a137a345a - languageName: node - linkType: hard - "cra-kitchen-sink@workspace:examples/cra-kitchen-sink": version: 0.0.0-use.local resolution: "cra-kitchen-sink@workspace:examples/cra-kitchen-sink" @@ -26006,15 +24812,6 @@ __metadata: languageName: node linkType: hard -"has-glob@npm:^1.0.0": - version: 1.0.0 - resolution: "has-glob@npm:1.0.0" - dependencies: - is-glob: ^3.0.0 - checksum: 2546d20b7a667304d8b2e490c2d5a4e20e799a43eb6d97c0d47c0c737bbde082a73731001c791d445b904b3f408d584477df7d2d301183e13c4b3f0a3c81787b - languageName: node - linkType: hard - "has-property-descriptors@npm:^1.0.0": version: 1.0.0 resolution: "has-property-descriptors@npm:1.0.0" @@ -27959,7 +26756,7 @@ __metadata: languageName: node linkType: hard -"is-glob@npm:^3.0.0, is-glob@npm:^3.1.0": +"is-glob@npm:^3.1.0": version: 3.1.0 resolution: "is-glob@npm:3.1.0" dependencies: @@ -30632,13 +29429,6 @@ __metadata: languageName: node linkType: hard -"junk@npm:^3.1.0": - version: 3.1.0 - resolution: "junk@npm:3.1.0" - checksum: 820174b9fa9a3af09aeeeeb1022df2481a2b10752ce5f65ac63924a79cb9bba83ea7c288e8d5b448951109742da5ea69a230846f4bf3c17c5c6a1d0603b63db4 - languageName: node - linkType: hard - "jwa@npm:^1.4.1": version: 1.4.1 resolution: "jwa@npm:1.4.1" @@ -34122,13 +32912,6 @@ __metadata: languageName: node linkType: hard -"nested-error-stacks@npm:^2.0.0, nested-error-stacks@npm:^2.1.0": - version: 2.1.1 - resolution: "nested-error-stacks@npm:2.1.1" - checksum: feec00417e4778661cfbbe657e6add6ca9918dcc026cd697ac330b4a56a79e4882b36dde8abc138167566b1ce4c5baa17d2d4df727a96f8b96aebace1c3ffca7 - languageName: node - linkType: hard - "next-themes@npm:^0.0.8": version: 0.0.8 resolution: "next-themes@npm:0.0.8" @@ -35429,15 +34212,6 @@ __metadata: languageName: node linkType: hard -"p-all@npm:^2.1.0": - version: 2.1.0 - resolution: "p-all@npm:2.1.0" - dependencies: - p-map: ^2.0.0 - checksum: 874eafa2e3f38b258f8beed34549befbc8a52a63818e0981b8beff03f592e1e1f47b8aab2483f844f2745815ffa010def58bf1edbc95614466c55411f02f3049 - languageName: node - linkType: hard - "p-cancelable@npm:^0.4.0": version: 0.4.1 resolution: "p-cancelable@npm:0.4.1" @@ -35475,24 +34249,6 @@ __metadata: languageName: node linkType: hard -"p-event@npm:^4.1.0": - version: 4.2.0 - resolution: "p-event@npm:4.2.0" - dependencies: - p-timeout: ^3.1.0 - checksum: f1b6a2fb13d47f2a8afc00150da5ece0d28940ce3d8fa562873e091d3337d298e78fee9cb18b768598ff1d11df608b2ae23868309ff6405b864a2451ccd6d25a - languageName: node - linkType: hard - -"p-filter@npm:^2.1.0": - version: 2.1.0 - resolution: "p-filter@npm:2.1.0" - dependencies: - p-map: ^2.0.0 - checksum: 5ac34b74b3b691c04212d5dd2319ed484f591c557a850a3ffc93a08cb38c4f5540be059c6b10a185773c479ca583a91ea00c7d6c9958c815e6b74d052f356645 - languageName: node - linkType: hard - "p-finally@npm:^1.0.0": version: 1.0.0 resolution: "p-finally@npm:1.0.0" @@ -35586,22 +34342,13 @@ __metadata: languageName: node linkType: hard -"p-map@npm:^2.0.0, p-map@npm:^2.1.0": +"p-map@npm:^2.1.0": version: 2.1.0 resolution: "p-map@npm:2.1.0" checksum: 735dae87badd4737a2dd582b6d8f93e49a1b79eabbc9815a4d63a528d5e3523e978e127a21d784cccb637010e32103a40d2aaa3ab23ae60250b1a820ca752043 languageName: node linkType: hard -"p-map@npm:^3.0.0": - version: 3.0.0 - resolution: "p-map@npm:3.0.0" - dependencies: - aggregate-error: ^3.0.0 - checksum: 297930737e52412ad9f5787c52774ad6496fad9a8be5f047e75fd0a3dc61930d8f7a9b2bbe1c4d1404e54324228a4f69721da2538208dadaa4ef4c81773c9f20 - languageName: node - linkType: hard - "p-map@npm:^4.0.0": version: 4.0.0 resolution: "p-map@npm:4.0.0" @@ -35653,15 +34400,6 @@ __metadata: languageName: node linkType: hard -"p-timeout@npm:^3.1.0": - version: 3.2.0 - resolution: "p-timeout@npm:3.2.0" - dependencies: - p-finally: ^1.0.0 - checksum: 524b393711a6ba8e1d48137c5924749f29c93d70b671e6db761afa784726572ca06149c715632da8f70c090073afb2af1c05730303f915604fd38ee207b70a61 - languageName: node - linkType: hard - "p-try@npm:^1.0.0": version: 1.0.0 resolution: "p-try@npm:1.0.0" @@ -38752,18 +37490,6 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0": - version: 18.2.0 - resolution: "react-dom@npm:18.2.0" - dependencies: - loose-envify: ^1.1.0 - scheduler: ^0.23.0 - peerDependencies: - react: ^18.2.0 - checksum: 66dfc5f93e13d0674e78ef41f92ed21dfb80f9c4ac4ac25a4b51046d41d4d2186abc915b897f69d3d0ebbffe6184e7c5876f2af26bfa956f179225d921be713a - languageName: node - linkType: hard - "react-dom@npm:^17.0.2": version: 17.0.2 resolution: "react-dom@npm:17.0.2" @@ -39219,15 +37945,6 @@ __metadata: languageName: node linkType: hard -"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0": - version: 18.2.0 - resolution: "react@npm:18.2.0" - dependencies: - loose-envify: ^1.1.0 - checksum: b562d9b569b0cb315e44b48099f7712283d93df36b19a39a67c254c6686479d3980b7f013dc931f4a5a3ae7645eae6386b4aa5eea933baa54ecd0f9acb0902b8 - languageName: node - linkType: hard - "react@npm:^17.0.2": version: 17.0.2 resolution: "react@npm:17.0.2" @@ -41236,18 +39953,7 @@ __metadata: languageName: node linkType: hard -"sb@npm:7.0.0-alpha.6": - version: 7.0.0-alpha.6 - resolution: "sb@npm:7.0.0-alpha.6" - dependencies: - "@storybook/cli": 7.0.0-alpha.6 - bin: - sb: index.js - checksum: fba86700059e95264de888cf75a981ae897816975aa19ac3e7761a68395aa214cc16409cf4cc84794b9279f4b8b9fa24d04f674c22f724f0b46ff866594a3d3d - languageName: node - linkType: hard - -"sb@workspace:lib/cli-sb": +"sb@7.0.0-alpha.7, sb@workspace:lib/cli-sb": version: 0.0.0-use.local resolution: "sb@workspace:lib/cli-sb" dependencies: @@ -41277,15 +39983,6 @@ __metadata: languageName: node linkType: hard -"scheduler@npm:^0.23.0": - version: 0.23.0 - resolution: "scheduler@npm:0.23.0" - dependencies: - loose-envify: ^1.1.0 - checksum: b777f7ca0115e6d93e126ac490dbd82642d14983b3079f58f35519d992fa46260be7d6e6cede433a92db70306310c6f5f06e144f0e40c484199e09c1f7be53dd - languageName: node - linkType: hard - "schema-utils@npm:2.7.0": version: 2.7.0 resolution: "schema-utils@npm:2.7.0" @@ -43069,7 +41766,7 @@ __metadata: languageName: node linkType: hard -"strip-json-comments@npm:^3.0.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 From 37dd381f97b2c0f38961fa668f82cb3bca56b8f8 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 29 Jun 2022 14:31:18 +0200 Subject: [PATCH 5/6] fixes --- lib/blocks/package.json | 23 +++++++++++++++---- lib/manager-webpack5/package.json | 1 + .../src/presets/manager-preset.ts | 11 +++++++++ package.json | 1 - scripts/build-manager-config/main.js | 5 ---- yarn.lock | 4 ++-- 6 files changed, 32 insertions(+), 13 deletions(-) diff --git a/lib/blocks/package.json b/lib/blocks/package.json index 8d4ac34974da..efc037ac8bef 100644 --- a/lib/blocks/package.json +++ b/lib/blocks/package.json @@ -20,9 +20,17 @@ }, "license": "MIT", "sideEffects": false, - "main": "dist/cjs/index.js", - "module": "dist/esm/index.js", - "types": "dist/types/index.d.ts", + "exports": { + ".": { + "require": "./dist/index.js", + "import": "./dist/index.mjs", + "types": "./dist/index.d.ts" + }, + "./package.json": "./package.json" + }, + "main": "dist/index.js", + "module": "dist/index.mjs", + "types": "dist/index.d.ts", "files": [ "dist/**/*", "README.md", @@ -30,7 +38,7 @@ "*.d.ts" ], "scripts": { - "prepare": "node ../../scripts/prepare.js" + "prepare": "esrun ../../scripts/prepare/bundle.ts" }, "dependencies": { "@mdx-js/react": "^1.6.22", @@ -53,10 +61,12 @@ "memoizerific": "^1.11.3", "polished": "^4.2.2", "react-colorful": "^5.1.2", - "regenerator-runtime": "^0.13.7", "ts-dedent": "^2.0.0", "util-deprecate": "^1.0.2" }, + "devDependencies": { + "@digitak/esrun": "^3.2.2" + }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" @@ -64,5 +74,8 @@ "publishConfig": { "access": "public" }, + "bundlerEntrypoint": [ + "./src/index.ts" + ], "gitHead": "b2e85f3599c043815b18bbfc5ca563bf1c6e4add" } diff --git a/lib/manager-webpack5/package.json b/lib/manager-webpack5/package.json index 4f5000f92afc..ce5a7bc3f70b 100644 --- a/lib/manager-webpack5/package.json +++ b/lib/manager-webpack5/package.json @@ -46,6 +46,7 @@ "@storybook/theming": "7.0.0-alpha.7", "@storybook/ui": "7.0.0-alpha.7", "@types/node": "^14.0.10 || ^16.0.0", + "assert": "^2.0.0", "babel-loader": "^8.2.5", "case-sensitive-paths-webpack-plugin": "^2.4.0", "chalk": "^4.1.0", diff --git a/lib/manager-webpack5/src/presets/manager-preset.ts b/lib/manager-webpack5/src/presets/manager-preset.ts index 16aace616e26..b03d68439702 100644 --- a/lib/manager-webpack5/src/presets/manager-preset.ts +++ b/lib/manager-webpack5/src/presets/manager-preset.ts @@ -116,6 +116,16 @@ export async function managerWebpack( ].filter(Boolean), module: { rules: [ + { + test: /\.m?js$/, + type: 'javascript/auto', + }, + { + test: /\.m?js$/, + resolve: { + fullySpecified: false, + }, + }, customManagerRuntimeLoader(), { test: /\.css$/, @@ -159,6 +169,7 @@ export async function managerWebpack( modules: ['node_modules'].concat(envs.NODE_PATH || []), mainFields: ['browser', 'module', 'main'].filter(Boolean), alias: uiPaths, + fallback: { assert: require.resolve('assert/') }, }, recordsPath: resolvePathInStorybookCache('public/records.json'), performance: { diff --git a/package.json b/package.json index 7002d9445a4b..e5a3312b5ebc 100644 --- a/package.json +++ b/package.json @@ -244,7 +244,6 @@ "@typescript-eslint/eslint-plugin": "^5.15.0", "@typescript-eslint/experimental-utils": "^5.20.0", "@typescript-eslint/parser": "^5.15.0", - "assert": "^2.0.0", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^10.1.0", "babel-jest": "^26.6.3", diff --git a/scripts/build-manager-config/main.js b/scripts/build-manager-config/main.js index 59f4b043791d..876a78f26d61 100644 --- a/scripts/build-manager-config/main.js +++ b/scripts/build-manager-config/main.js @@ -5,9 +5,4 @@ module.exports = { builder: '@storybook/builder-webpack5', disableTelemetry: true, }, - managerWebpack: async (config) => { - // eslint-disable-next-line no-param-reassign - config.resolve.fallback = { assert: require.resolve('assert/') }; - return config; - }, }; diff --git a/yarn.lock b/yarn.lock index 50182cf9a563..cb2265db3f01 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7780,6 +7780,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/blocks@workspace:lib/blocks" dependencies: + "@digitak/esrun": ^3.2.2 "@mdx-js/react": ^1.6.22 "@storybook/addons": 7.0.0-alpha.7 "@storybook/api": 7.0.0-alpha.7 @@ -7800,7 +7801,6 @@ __metadata: memoizerific: ^1.11.3 polished: ^4.2.2 react-colorful: ^5.1.2 - regenerator-runtime: ^0.13.7 ts-dedent: ^2.0.0 util-deprecate: ^1.0.2 peerDependencies: @@ -8727,6 +8727,7 @@ __metadata: "@types/terser-webpack-plugin": ^5.2.0 "@types/webpack-dev-middleware": ^5.3.0 "@types/webpack-virtual-modules": ^0.1.1 + assert: ^2.0.0 babel-loader: ^8.2.5 case-sensitive-paths-webpack-plugin: ^2.4.0 chalk: ^4.1.0 @@ -9323,7 +9324,6 @@ __metadata: "@typescript-eslint/eslint-plugin": ^5.15.0 "@typescript-eslint/experimental-utils": ^5.20.0 "@typescript-eslint/parser": ^5.15.0 - assert: ^2.0.0 babel-core: ^7.0.0-bridge.0 babel-eslint: ^10.1.0 babel-jest: ^26.6.3 From 36027e190a7f82b381b68d8788afe60f57959af3 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 29 Jun 2022 14:55:36 +0200 Subject: [PATCH 6/6] fix snapshots --- .../__snapshots__/cra-ts-essentials_manager-dev-posix | 10 ++++++++++ .../__snapshots__/cra-ts-essentials_manager-prod-posix | 10 ++++++++++ .../__snapshots__/html-kitchen-sink_manager-dev-posix | 10 ++++++++++ .../__snapshots__/html-kitchen-sink_manager-prod-posix | 10 ++++++++++ .../src/__snapshots__/vue-3-cli_manager-dev-posix | 10 ++++++++++ .../src/__snapshots__/vue-3-cli_manager-prod-posix | 10 ++++++++++ .../web-components-kitchen-sink_manager-dev-posix | 10 ++++++++++ .../web-components-kitchen-sink_manager-prod-posix | 10 ++++++++++ 8 files changed, 80 insertions(+) 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 badf055c1fa3..3d378929966f 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 @@ -30,6 +30,16 @@ Object { ], "module": Object { "rules": Array [ + Object { + "test": "/\\\\.m?js$/", + "type": "javascript/auto", + }, + Object { + "resolve": Object { + "fullySpecified": false, + }, + "test": "/\\\\.m?js$/", + }, Object { "exclude": Array [ "NODE_MODULES/", 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 481d7f56c981..cc6e9241ee8a 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 @@ -30,6 +30,16 @@ Object { ], "module": Object { "rules": Array [ + Object { + "test": "/\\\\.m?js$/", + "type": "javascript/auto", + }, + Object { + "resolve": Object { + "fullySpecified": false, + }, + "test": "/\\\\.m?js$/", + }, Object { "exclude": Array [ "NODE_MODULES/", 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 a25a6a500583..2ee68cba3583 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 @@ -31,6 +31,16 @@ Object { ], "module": Object { "rules": Array [ + Object { + "test": "/\\\\.m?js$/", + "type": "javascript/auto", + }, + Object { + "resolve": Object { + "fullySpecified": false, + }, + "test": "/\\\\.m?js$/", + }, Object { "exclude": Array [ "NODE_MODULES/", 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 2e6ec1fba9af..0439f8e350bd 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 @@ -31,6 +31,16 @@ Object { ], "module": Object { "rules": Array [ + Object { + "test": "/\\\\.m?js$/", + "type": "javascript/auto", + }, + Object { + "resolve": Object { + "fullySpecified": false, + }, + "test": "/\\\\.m?js$/", + }, Object { "exclude": Array [ "NODE_MODULES/", 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 191d2fe44c2e..3c8bcaefaeb9 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 @@ -32,6 +32,16 @@ Object { ], "module": Object { "rules": Array [ + Object { + "test": "/\\\\.m?js$/", + "type": "javascript/auto", + }, + Object { + "resolve": Object { + "fullySpecified": false, + }, + "test": "/\\\\.m?js$/", + }, Object { "exclude": Array [ "NODE_MODULES/", 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 d5604e189f79..94ea1d686c84 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 @@ -32,6 +32,16 @@ Object { ], "module": Object { "rules": Array [ + Object { + "test": "/\\\\.m?js$/", + "type": "javascript/auto", + }, + Object { + "resolve": Object { + "fullySpecified": false, + }, + "test": "/\\\\.m?js$/", + }, Object { "exclude": Array [ "NODE_MODULES/", 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 51df12cb32b5..68788375ba16 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 @@ -32,6 +32,16 @@ Object { ], "module": Object { "rules": Array [ + Object { + "test": "/\\\\.m?js$/", + "type": "javascript/auto", + }, + Object { + "resolve": Object { + "fullySpecified": false, + }, + "test": "/\\\\.m?js$/", + }, Object { "exclude": Array [ "NODE_MODULES/", 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 a262843af9d7..9135fc0a51fc 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 @@ -32,6 +32,16 @@ Object { ], "module": Object { "rules": Array [ + Object { + "test": "/\\\\.m?js$/", + "type": "javascript/auto", + }, + Object { + "resolve": Object { + "fullySpecified": false, + }, + "test": "/\\\\.m?js$/", + }, Object { "exclude": Array [ "NODE_MODULES/",