From 2db3faa727fed585fb5d9e6db23cc3835fc88829 Mon Sep 17 00:00:00 2001 From: atanasster Date: Sat, 7 Dec 2019 00:06:15 -0500 Subject: [PATCH 1/6] added viewmode parameter --- .../addon-docs/subcomponents.stories.js | 1 + lib/api/src/modules/stories.ts | 7 ++++++- .../src/components/sidebar/SidebarStories.tsx | 19 +++++++++++++++---- 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/examples/official-storybook/stories/addon-docs/subcomponents.stories.js b/examples/official-storybook/stories/addon-docs/subcomponents.stories.js index dedfa5534759..0a282af957e7 100644 --- a/examples/official-storybook/stories/addon-docs/subcomponents.stories.js +++ b/examples/official-storybook/stories/addon-docs/subcomponents.stories.js @@ -5,6 +5,7 @@ import { ButtonGroup } from '../../components/ButtonGroup'; export default { title: 'Addons/Docs/ButtonGroup', component: ButtonGroup, + parameters: { viewMode: 'docs' }, subcomponents: { DocgenButton }, }; diff --git a/lib/api/src/modules/stories.ts b/lib/api/src/modules/stories.ts index e41556d914a3..7cda1a89455a 100644 --- a/lib/api/src/modules/stories.ts +++ b/lib/api/src/modules/stories.ts @@ -39,6 +39,8 @@ interface Group { isComponent: boolean; isRoot: boolean; isLeaf: boolean; + // MDX stories are "Group" type + parameters?: any; } interface StoryInput { @@ -259,6 +261,7 @@ const initStoriesApi = ({ const { name } = group; const parent = index > 0 && soFar[index - 1].id; const id = sanitize(parent ? `${parent}-${name}` : name); + const isComponent = index === original.length - 1; if (parent === id) { throw new Error( ` @@ -275,9 +278,11 @@ Did you create a path that uses the separator char accidentally, such as 'Vue { +const refinedViewMode = ( + viewMode: string | undefined, + isDocsOnly: boolean, + parameters: { viewMode?: string } = {} +) => { + const { viewMode: pViewMode } = parameters; + if (typeof pViewMode === 'string') { + return pViewMode; + } if (isDocsOnly) { return 'docs'; } @@ -73,6 +81,7 @@ export const Link = ({ onKeyUp, childIds, isExpanded, + parameters, }) => { return isLeaf || (isComponent && !isExpanded) ? ( @@ -80,7 +89,9 @@ export const Link = ({ @@ -161,7 +172,7 @@ const SidebarStories: FunctionComponent = memo( ); } - + console.log(stories); return ( Date: Sat, 7 Dec 2019 00:07:22 -0500 Subject: [PATCH 2/6] remove logs --- lib/ui/src/components/sidebar/SidebarStories.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/ui/src/components/sidebar/SidebarStories.tsx b/lib/ui/src/components/sidebar/SidebarStories.tsx index 550764f41591..056c23230b4b 100644 --- a/lib/ui/src/components/sidebar/SidebarStories.tsx +++ b/lib/ui/src/components/sidebar/SidebarStories.tsx @@ -172,7 +172,6 @@ const SidebarStories: FunctionComponent = memo( ); } - console.log(stories); return ( Date: Sat, 7 Dec 2019 03:39:45 -0500 Subject: [PATCH 3/6] var name paramViewMode --- lib/ui/src/components/sidebar/SidebarStories.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/ui/src/components/sidebar/SidebarStories.tsx b/lib/ui/src/components/sidebar/SidebarStories.tsx index 056c23230b4b..f5e1edd3ac1c 100644 --- a/lib/ui/src/components/sidebar/SidebarStories.tsx +++ b/lib/ui/src/components/sidebar/SidebarStories.tsx @@ -57,9 +57,9 @@ const refinedViewMode = ( isDocsOnly: boolean, parameters: { viewMode?: string } = {} ) => { - const { viewMode: pViewMode } = parameters; - if (typeof pViewMode === 'string') { - return pViewMode; + const { viewMode: paramViewMode } = parameters; + if (typeof paramViewMode === 'string') { + return paramViewMode; } if (isDocsOnly) { return 'docs'; From 615ce7f097da7533c3390cc484ac9ff4f7ab1526 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 28 Jan 2020 13:05:15 +0800 Subject: [PATCH 4/6] Merge branch 'next' into pr/9090 --- .babelrc.js | 12 - .circleci/config.yml | 73 +- .eslintignore | 8 +- .eslintrc.js | 1 + .gitattributes | 1 + .github/CODEOWNERS | 3 - .github/autolabeler.yml | 3 +- .github/automention.yml | 6 +- .gitignore | 1 + .prettierignore | 1 + .vscode/launch.json | 18 +- ADDONS_SUPPORT.md | 44 +- CHANGELOG.md | 392 + CONTRIBUTING.md | 9 +- MIGRATION.md | 97 +- README.md | 7 +- ROADMAP.md | 5 - __mocks__/inject-decorator.ts.csf.txt | 14 +- addons/a11y/README.md | 2 + addons/a11y/package.json | 21 +- addons/a11y/src/components/A11YPanel.test.js | 144 +- addons/a11y/src/components/A11YPanel.tsx | 215 +- addons/a11y/src/components/ColorBlindness.tsx | 10 +- .../a11y/src/components/Report/Elements.tsx | 6 +- .../src/components/Report/HighlightToggle.tsx | 29 +- addons/a11y/src/components/Report/Info.tsx | 6 +- addons/a11y/src/components/Report/Item.tsx | 4 +- addons/a11y/src/components/Report/Rules.tsx | 46 +- addons/a11y/src/components/Report/Tags.tsx | 2 +- addons/a11y/src/components/Tabs.tsx | 26 +- .../__snapshots__/A11YPanel.test.js.snap | 1126 -- addons/a11y/src/constants.ts | 3 +- addons/a11y/src/index.ts | 12 +- addons/a11y/tsconfig.json | 8 +- addons/actions/package.json | 21 +- .../src/components/ActionLogger/style.tsx | 4 +- addons/backgrounds/README.md | 6 +- addons/backgrounds/package.json | 21 +- addons/centered/package.json | 8 +- addons/contexts/README.md | 4 +- addons/contexts/package.json | 14 +- addons/contexts/rax.js | 4 + addons/contexts/src/preview/frameworks/rax.ts | 14 + addons/cssresources/package.json | 18 +- .../cssresources/src/css-resource-panel.tsx | 39 +- addons/design-assets/package.json | 18 +- addons/docs/README.md | 59 +- addons/docs/angular/README.md | 18 +- addons/docs/docs/docspage.md | 28 +- addons/docs/docs/faq.md | 6 +- addons/docs/docs/mdx.md | 27 +- addons/docs/docs/recipes.md | 4 +- addons/docs/ember/README.md | 35 +- addons/docs/package.json | 25 +- addons/docs/react/README.md | 122 + addons/docs/src/blocks/DocsContainer.tsx | 7 +- addons/docs/src/blocks/DocsContext.ts | 9 +- addons/docs/src/blocks/DocsPage.test.ts | 6 + addons/docs/src/blocks/Meta.tsx | 28 +- addons/docs/src/blocks/Preview.tsx | 12 +- addons/docs/src/blocks/Stories.tsx | 2 +- addons/docs/src/blocks/Story.tsx | 10 +- addons/docs/src/blocks/Title.tsx | 12 +- addons/docs/src/blocks/mdx.tsx | 61 +- addons/docs/src/blocks/utils.ts | 5 + addons/docs/src/frameworks/common/preset.ts | 2 +- .../src/frameworks/web-components/config.js | 4 +- .../component-id.output.snapshot | 6 +- .../decorators.output.snapshot | 6 +- .../docs-only.output.snapshot | 6 +- .../meta-quotes-in-title.output.snapshot | 6 +- .../non-story-exports.output.snapshot | 6 +- .../parameters.output.snapshot | 9 +- .../__testfixtures__/previews.output.snapshot | 6 +- .../story-current.output.snapshot | 6 +- .../story-def-text-only.output.snapshot | 8 +- .../story-definitions.output.snapshot | 14 +- .../story-function-var.output.snapshot | 8 +- .../story-function.output.snapshot | 10 +- .../story-object.output.snapshot | 8 +- .../story-references.output.snapshot | 6 +- .../title-template-string.output.snapshot | 6 +- .../__testfixtures__/vanilla.output.snapshot | 6 +- addons/docs/src/mdx/mdx-compiler-plugin.js | 50 +- addons/docs/src/preset.ts | 4 +- addons/docs/vue/README.md | 10 +- addons/essentials/README.md | 51 + addons/essentials/package.json | 49 + addons/essentials/src/index.ts | 32 + addons/essentials/src/typings.d.ts | 1 + .../tsconfig.json | 5 +- addons/events/package.json | 19 +- addons/events/src/components/Panel.tsx | 2 +- addons/google-analytics/package.json | 9 +- addons/graphql/package.json | 10 +- addons/info/package.json | 16 +- .../info/src/__snapshots__/index.test.js.snap | 6 +- addons/info/src/components/Story.js | 2 +- .../src/components/markdown/pre/copyButton.js | 4 +- addons/jest/package.json | 19 +- addons/jest/src/components/Message.tsx | 22 +- addons/jest/src/components/Panel.tsx | 16 +- addons/jest/src/components/Result.tsx | 2 +- addons/jest/src/styles.js | 573 - addons/knobs/README.md | 4 +- addons/knobs/package.json | 21 +- addons/knobs/preset.js | 1 + addons/knobs/src/__types__/knob-test-cases.ts | 1 - addons/knobs/src/components/Panel.tsx | 1 + addons/knobs/src/components/types/Number.tsx | 4 +- addons/knobs/src/components/types/Select.tsx | 2 +- addons/knobs/src/preset/addDecorator.ts | 4 + addons/knobs/src/preset/index.ts | 15 + addons/links/package.json | 19 +- addons/links/src/preview.ts | 2 +- addons/notes/README.md | 14 +- addons/notes/package.json | 22 +- addons/ondevice-actions/README.md | 32 - addons/ondevice-actions/package.json | 45 - addons/ondevice-actions/register.js | 1 - .../src/components/ActionLogger/Inspect.tsx | 177 - .../src/components/ActionLogger/index.tsx | 31 - .../src/containers/ActionLogger/index.tsx | 79 - addons/ondevice-actions/src/index.tsx | 14 - addons/ondevice-backgrounds/README.md | 52 - addons/ondevice-backgrounds/docs/demo.gif | Bin 1955803 -> 0 bytes addons/ondevice-backgrounds/package.json | 47 - addons/ondevice-backgrounds/register.js | 1 - .../src/BackgroundPanel.tsx | 99 - addons/ondevice-backgrounds/src/Swatch.tsx | 37 - addons/ondevice-backgrounds/src/constants.ts | 9 - addons/ondevice-backgrounds/src/container.tsx | 43 - addons/ondevice-backgrounds/src/index.tsx | 40 - addons/ondevice-backgrounds/src/register.tsx | 14 - addons/ondevice-backgrounds/tsconfig.json | 13 - addons/ondevice-knobs/README.md | 32 - addons/ondevice-knobs/package.json | 49 - addons/ondevice-knobs/register.js | 1 - addons/ondevice-knobs/src/GroupTabs.js | 72 - addons/ondevice-knobs/src/PropField.js | 49 - addons/ondevice-knobs/src/PropForm.js | 56 - addons/ondevice-knobs/src/index.js | 17 - addons/ondevice-knobs/src/panel.js | 197 - addons/ondevice-knobs/src/types/Array.js | 55 - addons/ondevice-knobs/src/types/Boolean.js | 39 - addons/ondevice-knobs/src/types/Button.js | 31 - addons/ondevice-knobs/src/types/Color.js | 104 - addons/ondevice-knobs/src/types/Date.js | 104 - addons/ondevice-knobs/src/types/Number.js | 96 - addons/ondevice-knobs/src/types/Object.js | 102 - addons/ondevice-knobs/src/types/Select.js | 73 - addons/ondevice-knobs/src/types/Text.js | 41 - addons/ondevice-knobs/src/types/index.js | 21 - addons/ondevice-notes/README.md | 43 - addons/ondevice-notes/docs/demo.png | Bin 135718 -> 0 bytes addons/ondevice-notes/package.json | 47 - addons/ondevice-notes/register.js | 1 - .../ondevice-notes/src/components/Notes.tsx | 43 - addons/ondevice-notes/src/index.ts | 6 - addons/ondevice-notes/src/register.tsx | 14 - addons/ondevice-notes/src/typings.d.ts | 4 - addons/ondevice-notes/tsconfig.json | 13 - addons/options/package.json | 11 +- addons/queryparams/package.json | 21 +- .../storyshots/storyshots-core/.eslintrc.js | 1 - addons/storyshots/storyshots-core/README.md | 38 +- .../storyshots/storyshots-core/package.json | 16 +- .../src/Stories2SnapsConverter.ts | 2 +- .../src/frameworks/SupportedFramework.ts | 3 +- .../src/frameworks/rax/loader.ts | 33 + .../src/frameworks/rax/renderTree.ts | 12 + .../storyshots-core/src/typings.d.ts | 1 + .../storyshots/storyshots-puppeteer/README.md | 4 +- .../storyshots-puppeteer/package.json | 21 +- .../src/__tests__/url.test.ts | 26 +- .../storyshots-puppeteer/src/axeTest.ts | 2 +- .../storyshots-puppeteer/src/puppeteerTest.ts | 4 +- .../storyshots-puppeteer/src/url.ts | 6 +- addons/storysource/README.md | 36 +- addons/storysource/package.json | 16 +- addons/storysource/src/preset.js | 4 +- addons/storysource/theming-light-dark.png | Bin 0 -> 214359 bytes addons/viewport/README.md | 12 +- addons/viewport/package.json | 18 +- addons/viewport/src/Tool.tsx | 29 +- addons/viewport/src/legacy_preview/index.ts | 2 +- .../src/models/ViewportAddonParameter.ts | 2 +- addons/viewport/src/preview.ts | 7 +- app/angular/package.json | 13 +- app/angular/src/client/index.ts | 4 +- .../__tests__/angular-cli_config.test.ts | 9 + app/angular/src/server/angular-cli_config.ts | 32 +- app/angular/tsconfig.json | 2 +- app/ember/package.json | 14 +- app/ember/src/client/{index.js => index.ts} | 0 .../client/preview/{globals.js => globals.ts} | 0 .../src/client/preview/{index.js => index.ts} | 5 +- .../client/preview/{render.js => render.ts} | 13 +- app/ember/src/client/preview/types.ts | 24 + app/ember/src/server/{build.js => build.ts} | 0 .../server/framework-preset-babel-ember.js | 15 - .../server/framework-preset-babel-ember.ts | 26 + app/ember/src/server/{index.js => index.ts} | 0 .../src/server/{options.js => options.ts} | 2 +- app/ember/src/typings.d.ts | 3 + app/ember/tsconfig.json | 10 + app/html/package.json | 11 +- app/{polymer => marionette}/README.md | 18 +- app/{polymer => marionette}/bin/build.js | 0 app/{polymer => marionette}/bin/index.js | 0 app/marionette/package.json | 48 + .../src/client/index.js | 1 + .../src/client/preview/element_check.js | 18 + app/marionette/src/client/preview/globals.js | 3 + .../src/client/preview/index.js | 7 +- app/marionette/src/client/preview/render.js | 40 + .../src/server/build.js | 0 .../src/server/framework-preset-marionette.js | 3 + .../src/server/index.js | 0 app/marionette/src/server/options.js | 6 + app/{polymer => marionette}/standalone.js | 0 app/marko/package.json | 9 +- app/mithril/package.json | 10 +- app/polymer/package.json | 58 - app/polymer/src/client/preview/globals.js | 6 - app/polymer/src/client/preview/render.js | 45 - .../src/server/framework-preset-polymer.js | 28 - app/polymer/src/server/options.js | 7 - app/preact/package.json | 11 +- app/preact/src/client/preview/types.ts | 2 +- app/rax/package.json | 7 +- app/react-native-server/bin/index.js | 3 - app/react-native-server/package.json | 58 - app/react-native-server/readme.md | 13 - .../client/manager/components/PreviewHelp.js | 58 - .../src/client/manager/index.js | 7 - .../src/client/manager/provider.js | 70 - app/react-native-server/src/server/cli.js | 39 - app/react-native-server/src/server/index.js | 45 - app/react-native-server/src/server/options.js | 28 - .../src/server/rn-options-preset.js | 15 - app/react-native/docs/addons.md | 51 - .../docs/assets/readme/screenshot.png | Bin 159280 -> 0 bytes app/react-native/docs/manual-setup.md | 105 - app/react-native/docs/server.md | 21 - app/react-native/docs/using-devices.md | 27 - app/react-native/package.json | 57 - app/react-native/readme.md | 132 - app/react-native/src/index.ts | 17 - ...bsolute-positioned-keyboard-aware-view.tsx | 103 - .../components/OnDeviceUI/addons/index.tsx | 61 - .../components/OnDeviceUI/addons/list.tsx | 42 - .../components/OnDeviceUI/addons/wrapper.tsx | 42 - .../components/OnDeviceUI/animation.ts | 78 - .../preview/components/OnDeviceUI/index.tsx | 167 - .../components/OnDeviceUI/navigation/bar.tsx | 37 - .../OnDeviceUI/navigation/button.tsx | 39 - .../OnDeviceUI/navigation/constants.ts | 3 - .../OnDeviceUI/navigation/index.tsx | 67 - .../navigation/visibility-button.tsx | 35 - .../preview/components/OnDeviceUI/panel.tsx | 18 - .../src/preview/components/Shared/text.ts | 22 - .../src/preview/components/Shared/theme.ts | 9 - .../components/StoryListView/index.tsx | 196 - .../preview/components/StoryView/index.tsx | 91 - app/react-native/src/preview/index.tsx | 251 - .../src/preview/rn-host-detect.js | 85 - app/react-native/src/typings.d.ts | 89 - app/react-native/tsconfig.json | 12 - app/react/README.md | 4 +- app/react/package.json | 21 +- app/react/src/server/framework-preset-cra.ts | 23 +- app/riot/package.json | 13 +- app/svelte/package.json | 10 +- app/svelte/tsconfig.json | 2 +- app/vue/package.json | 11 +- app/web-components/README.md | 4 +- app/web-components/package.json | 11 +- dev-kits/addon-decorator/package.json | 9 +- dev-kits/addon-parameter/package.json | 17 +- dev-kits/addon-preview-wrapper/package.json | 7 +- dev-kits/addon-roundtrip/package.json | 19 +- docs/gatsby-config.js | 1 + docs/src/new-components/basics/shared/site.js | 2 +- .../basics/tooltip/TooltipLinkList.js | 2 +- docs/src/pages/addons/using-addons/index.md | 2 + docs/src/pages/addons/writing-addons/index.md | 3 +- .../pages/basics/exporting-storybook/index.md | 2 +- docs/src/pages/basics/faq/index.md | 2 +- docs/src/pages/basics/live-examples/index.md | 2 - docs/src/pages/basics/toolbar-guide/index.md | 63 + .../src/pages/basics/writing-stories/index.md | 39 +- .../custom-webpack-config/index.md | 10 +- .../configurations/default-config/index.md | 6 +- .../configurations/options-parameter/index.md | 30 +- .../pages/configurations/overview/index.md | 81 + .../src/pages/configurations/theming/index.md | 2 + .../configurations/typescript-config/index.md | 16 +- docs/src/pages/examples/_examples.yml | 6 + docs/src/pages/examples/thumbnails/bbc.jpg | Bin 0 -> 9213 bytes .../formats/component-story-format/index.md | 63 +- docs/src/pages/formats/mdx-syntax/index.md | 4 +- docs/src/pages/formats/storiesof-api/index.md | 2 +- docs/src/pages/guides/guide-ember/index.md | 4 +- .../pages/guides/guide-react-native/index.md | 2 +- docs/src/pages/guides/guide-react/index.md | 14 +- docs/src/pages/guides/guide-svelte/index.md | 4 +- docs/src/pages/guides/guide-vue/index.md | 2 +- docs/src/pages/presets/introduction/index.md | 32 +- .../src/pages/presets/preset-gallery/index.md | 4 + .../pages/presets/writing-presets/index.md | 56 +- docs/src/versions/latest.json | 2 +- docs/src/versions/next.json | 2 +- examples-native/crna-kitchen-sink/.babelrc.js | 16 - examples-native/crna-kitchen-sink/.env | 1 - examples-native/crna-kitchen-sink/.flowconfig | 63 - examples-native/crna-kitchen-sink/.gitignore | 3 - .../crna-kitchen-sink/.watchmanconfig | 1 - examples-native/crna-kitchen-sink/App.js | 31 - examples-native/crna-kitchen-sink/App.test.js | 9 - examples-native/crna-kitchen-sink/README.md | 9 - examples-native/crna-kitchen-sink/app.json | 23 - .../crna-kitchen-sink/metro.config.js | 23 - .../crna-kitchen-sink/package.json | 52 - .../crna-kitchen-sink/storybook/addons.js | 6 - .../crna-kitchen-sink/storybook/index.js | 22 - .../crna-kitchen-sink/storybook/rn-addons.js | 4 - .../storybook/stories/Button/index.android.js | 17 - .../storybook/stories/Button/index.ios.js | 17 - .../storybook/stories/CenterView/index.js | 16 - .../storybook/stories/CenterView/style.js | 7 - .../storybook/stories/Knobs/index.js | 66 - .../storybook/stories/Welcome/index.js | 57 - .../storybook/stories/index.js | 80 - examples/angular-cli/.storybook/main.js | 20 +- examples/angular-cli/package.json | 34 +- .../src/stories/addon-docs.stories.mdx | 5 +- .../stories/moduleMetadata/dummy.service.ts | 2 +- examples/cra-kitchen-sink/.storybook/main.js | 23 +- .../cra-kitchen-sink/.storybook/preview.js | 2 +- examples/cra-kitchen-sink/package.json | 36 +- .../src/stories/force-rerender.stories.js | 3 +- .../src/stories/perf.stories.js | 24 - examples/cra-react15/.storybook/main.js | 6 +- examples/cra-react15/package.json | 12 +- examples/cra-ts-essentials/.storybook/main.js | 12 + examples/cra-ts-essentials/README.md | 1 + examples/cra-ts-essentials/package.json | 44 + examples/cra-ts-essentials/public/favicon.ico | Bin 0 -> 22382 bytes examples/cra-ts-essentials/public/index.html | 43 + examples/cra-ts-essentials/public/logo192.png | Bin 0 -> 5223 bytes examples/cra-ts-essentials/public/logo512.png | Bin 0 -> 14385 bytes .../cra-ts-essentials/public/manifest.json | 25 + examples/cra-ts-essentials/public/robots.txt | 2 + examples/cra-ts-essentials/src/App.css | 22 + examples/cra-ts-essentials/src/App.test.tsx | 9 + examples/cra-ts-essentials/src/App.tsx | 26 + examples/cra-ts-essentials/src/index.css | 13 + examples/cra-ts-essentials/src/index.tsx | 12 + examples/cra-ts-essentials/src/logo.svg | 1 + .../cra-ts-essentials/src/react-app-env.d.ts | 1 + .../cra-ts-essentials/src/serviceWorker.ts | 143 + .../src/stories/0-Welcome.stories.tsx | 14 + .../src/stories/1-Button.stories.tsx | 21 + examples/cra-ts-essentials/tsconfig.json | 25 + .../cra-ts-kitchen-sink/.storybook/addons.ts | 3 - .../cra-ts-kitchen-sink/.storybook/main.js | 28 + .../cra-ts-kitchen-sink/.storybook/presets.js | 22 - .../.storybook/{config.ts => preview.ts} | 5 +- examples/cra-ts-kitchen-sink/package.json | 20 +- .../src/stories/Button.tsx | 15 + examples/dev-kits/main.js | 38 +- examples/dev-kits/manager.js | 50 +- examples/dev-kits/package.json | 29 +- .../dev-kits/stories/addon-useaddonstate.tsx | 33 + .../dev-kits/stories/addon-usestorystate.tsx | 33 + examples/ember-cli/.eslintrc.js | 1 - examples/ember-cli/.storybook/main.js | 22 +- examples/ember-cli/.storybook/preview.js | 2 +- .../ember-cli/config/optional-features.json | 5 + examples/ember-cli/package.json | 58 +- .../ember-cli/stories/addon-a11y.stories.js | 2 +- .../stories/addon-actions.stories.js | 2 +- .../stories/addon-backgrounds.stories.js | 2 +- .../stories/addon-centered.stories.js | 2 +- .../ember-cli/stories/addon-knobs.stories.js | 2 +- .../ember-cli/stories/addon-links.stories.js | 2 +- .../ember-cli/stories/addon-notes.stories.js | 2 +- examples/ember-cli/stories/index.stories.js | 2 +- .../stories/welcome-banner.stories.js | 2 +- examples/html-kitchen-sink/.storybook/main.js | 24 +- examples/html-kitchen-sink/package.json | 42 +- examples/marko-cli/.storybook/main.js | 12 +- examples/marko-cli/package.json | 18 +- .../mithril-kitchen-sink/.storybook/main.js | 20 +- examples/mithril-kitchen-sink/package.json | 30 +- examples/mithril-kitchen-sink/src/Button.js | 6 +- examples/mithril-kitchen-sink/src/Welcome.js | 2 +- .../components/ButtonGroup.js | 19 + .../components/DocgenButton.js | 23 +- .../components/TsButton.tsx | 26 + examples/official-storybook/intro.stories.mdx | 5 + examples/official-storybook/main.js | 35 +- examples/official-storybook/package.json | 58 +- examples/official-storybook/preview.js | 2 +- .../addon-docs/addon-docs-blocks.stories.js | 5 +- .../stories/addon-docs/forward-ref.stories.js | 13 + .../stories/addon-docs/markdown.stories.mdx | 12 +- .../meta-string-template.stories.mdx | 5 + .../mixed-leaves-component.stories.js | 13 + .../addon-docs/mixed-leaves-folder.stories.js | 12 + .../stories/addon-docs/react-memo.stories.js | 13 + .../stories/addon-docs/ts-button.stories.tsx | 25 + .../addon-info/story-source.stories.js | 2 +- .../stories/addon-knobs/with-knobs.stories.js | 10 +- .../stories/addon-storyshots.stories.js | 1 + .../core/interleaved-exports.stories.js | 16 + .../stories/core/layout.stories.js | 33 + .../core/named-export-order.stories.js | 10 + .../core/reexport-source-loader.stories.js | 8 + ...-addons-storyshots-block-story-1-snap.png} | Bin 502 -> 502 bytes examples/polymer-cli/.env | 1 - examples/polymer-cli/.eslintrc.js | 7 - examples/polymer-cli/.storybook/main.js | 27 - examples/polymer-cli/.storybook/manager.js | 5 - examples/polymer-cli/.storybook/preview.js | 4 - examples/polymer-cli/README.md | 8 - examples/polymer-cli/index.html | 14 - examples/polymer-cli/package.json | 35 - examples/polymer-cli/src/logo.svg | 1 - .../polymer-cli/src/playground-button.html | 48 - .../src/polymer-playground-app.html | 22 - .../separated-button/separated-button.html | 15 - .../src/separated-button/separated-button.js | 26 - .../src/separated-button/useless-mixin.js | 12 - examples/polymer-cli/src/simple-button.html | 31 - .../src/stories/addon-actions.stories.js | 28 - .../src/stories/addon-backgrounds.stories.js | 16 - .../src/stories/addon-knobs.stories.js | 68 - .../src/stories/addon-links.stories.js | 19 - .../src/stories/addon-notes.stories.js | 28 - .../src/stories/components/app.stories.js | 11 - .../src/stories/components/button.stories.js | 8 - .../src/stories/components/welcome.stories.js | 14 - .../polymer-cli/src/stories/core.stories.js | 26 - .../src/stories/custom-decorators.stories.js | 23 - .../src/stories/custom-rendering.stories.js | 23 - .../stories/storybook-welcome-to-polymer.html | 88 - .../polymer-cli/src/string-template-button.js | 28 - examples/polymer-cli/webpack.config.js | 31 - .../preact-kitchen-sink/.storybook/main.js | 22 +- examples/preact-kitchen-sink/package.json | 34 +- examples/rax-kitchen-sink/.storybook/main.js | 26 +- .../{.babelrc.js => babel.config.js} | 7 +- examples/rax-kitchen-sink/build.json | 10 + .../rax-kitchen-sink/jest-addon.config.js | 12 - examples/rax-kitchen-sink/jest.config.js | 13 - examples/rax-kitchen-sink/package.json | 55 +- examples/rax-kitchen-sink/public/index.html | 27 - examples/rax-kitchen-sink/public/rax-logo.png | Bin 55885 -> 0 bytes examples/rax-kitchen-sink/src/app.js | 7 + .../src/components/App/App.test.js | 9 - .../App/__snapshots__/App.test.js.snap | 44 - .../src/components/App/index.js | 70 +- .../src/components/App/index.stylesheet | 27 - .../src/components/Welcome/Welcome.test.js | 9 - .../__snapshots__/Welcome.test.js.snap | 204 - .../src/components/Welcome/index.js | 70 - .../rax-kitchen-sink/src/document/index.jsx | 32 + examples/rax-kitchen-sink/src/index.js | 4 - .../src/stories/addon-centered.stories.js | 10 +- .../src/stories/addon-contexts.stories.js | 57 + .../src/stories/addon-jest.stories.js | 23 - .../src/stories/index.stories.js | 14 +- examples/rax-kitchen-sink/src/stories/note.md | 2 +- examples/riot-kitchen-sink/.storybook/main.js | 20 +- examples/riot-kitchen-sink/package.json | 32 +- examples/standalone-preview/package.json | 4 +- .../stories/Component1.stories.tsx | 7 + .../stories/Component2.stories.tsx | 8 + examples/standalone-preview/storybook.html | 2 +- examples/standalone-preview/storybook.ts | 5 + examples/standalone-preview/storybook.tsx | 10 - .../svelte-kitchen-sink/.storybook/main.js | 20 +- examples/svelte-kitchen-sink/package.json | 30 +- examples/vue-kitchen-sink/.storybook/main.js | 23 +- examples/vue-kitchen-sink/package.json | 36 +- .../core-errors.stories.storyshot | 2 +- .../src/stories/components/InfoButton.vue | 21 +- .../src/stories/core-errors.stories.js | 9 +- .../.storybook/main.js | 18 +- .../custom-elements.json | 17 +- .../web-components-kitchen-sink/package.json | 42 +- lerna.json | 2 +- lib/addons/package.json | 13 +- lib/addons/src/hooks.ts | 3 +- lib/addons/src/types.ts | 11 +- lib/addons/tsconfig.json | 3 +- lib/api/package.json | 18 +- lib/api/src/index.tsx | 119 +- lib/api/src/modules/stories.ts | 72 +- lib/api/src/modules/url.ts | 7 +- lib/api/src/tests/stories.test.js | 4 +- lib/api/src/version.ts | 2 +- lib/channel-postmessage/package.json | 9 +- lib/channel-postmessage/src/index.ts | 2 +- lib/channel-websocket/package.json | 7 +- lib/channels/package.json | 5 +- lib/channels/src/index.ts | 7 + lib/channels/tsconfig.json | 3 +- lib/cli-sb/package.json | 5 +- lib/cli-storybook/package.json | 5 +- lib/cli/README.md | 2 +- .../ANGULAR/template-csf/.storybook/main.js | 8 +- .../src/stories/1-Button.stories.ts | 8 +- .../ANGULAR/template-mdx/.storybook/main.js | 10 +- .../EMBER/template-csf/.storybook/main.js | 2 +- .../template-csf/stories/0-Welcome.stories.js | 2 +- .../template-csf/stories/1-Button.stories.js | 2 +- .../HTML/template-mdx/.storybook/main.js | 2 +- lib/cli/generators/MARIONETTE/index.js | 37 + .../MARIONETTE/template/.storybook/config.js | 9 + .../template/stories/index.stories.js | 20 + .../MARKO/template-csf/.storybook/main.js | 2 +- .../METEOR/template-csf/.storybook/main.js | 2 +- .../MITHRIL/template-csf/.storybook/main.js | 2 +- .../MITHRIL/template-csf/stories/Button.js | 6 +- .../MITHRIL/template-csf/stories/Welcome.js | 10 +- lib/cli/generators/POLYMER/index.js | 40 - .../POLYMER/template-csf/.storybook/main.js | 3 - .../template-csf/src/stories/index.stories.js | 1 - .../PREACT/template-csf/.storybook/main.js | 2 +- lib/cli/generators/RAX/index.js | 1 - ...{1-Button.stories.js => 1-View.stories.js} | 13 +- .../REACT/template-csf/.storybook/main.js | 2 +- .../REACT/template-mdx/.storybook/main.js | 7 +- .../template-csf-ts/.storybook/main.js | 9 +- .../template-csf/.storybook/main.js | 9 +- .../template-mdx/.storybook/main.js | 9 +- .../RIOT/template-csf/.storybook/main.js | 2 +- .../SFC_VUE/template-csf/.storybook/main.js | 4 +- .../SFC_VUE/template-mdx/.storybook/main.js | 5 +- .../SVELTE/template-csf/.storybook/main.js | 2 +- .../VUE/template-csf/.storybook/main.js | 2 +- .../VUE/template-mdx/.storybook/main.js | 3 +- lib/cli/generators/WEB-COMPONENTS/index.js | 6 +- .../template/.storybook/preview.js | 30 + .../template-csf/.storybook/main.js | 4 +- .../template-mdx/.storybook/main.js | 9 +- lib/cli/lib/detect.js | 14 +- lib/cli/lib/has_yarn.js | 9 +- lib/cli/lib/helpers.js | 9 +- lib/cli/lib/initiate.js | 18 +- lib/cli/lib/npm_init.js | 19 +- lib/cli/lib/project_types.js | 5 +- lib/cli/package.json | 64 +- lib/cli/test/fixtures/ember-cli/package.json | 1 - lib/cli/test/fixtures/polymer/package.json | 13 - lib/cli/test/run_tests.sh | 2 +- lib/client-api/package.json | 18 +- lib/client-api/src/client_api.test.ts | 41 + lib/client-api/src/client_api.ts | 30 +- lib/client-api/src/config_api.ts | 9 +- lib/client-api/src/hooks.ts | 48 + lib/client-api/src/index.ts | 2 - lib/client-api/src/storySort.test.ts | 76 + lib/client-api/src/storySort.ts | 77 + lib/client-api/src/story_store.test.ts | 185 +- lib/client-api/src/story_store.ts | 65 +- .../src/subscriptions_store.test.ts | 92 - lib/client-api/src/subscriptions_store.ts | 34 - lib/client-logger/package.json | 5 +- lib/client-logger/tsconfig.json | 3 +- lib/codemod/package.json | 13 +- lib/codemod/src/lib/utils.js | 4 + .../storiesof-to-csf/digit.output.js | 5 + .../transforms/__tests__/transforms.tests.js | 3 +- lib/codemod/src/transforms/csf-to-mdx.js | 15 +- .../src/transforms/storiesof-to-csf.js | 2 +- lib/components/package.json | 9 +- lib/components/src/Button/Button.tsx | 433 +- lib/components/src/Loader/Loader.stories.tsx | 5 + lib/components/src/Loader/Loader.tsx | 37 + .../src/bar/{button.ts => button.tsx} | 27 +- .../src/blocks/ColorPalette.stories.tsx | 26 + lib/components/src/blocks/ColorPalette.tsx | 75 +- lib/components/src/blocks/DocsPage.tsx | 9 +- .../src/blocks/DocsPageExampleCaption.md | 14 +- .../src/blocks/DocsPageExampleCaption.mdx | 14 +- lib/components/src/blocks/EmptyBlock.tsx | 2 +- .../src/blocks/PropsTable/PropJsDoc.tsx | 8 +- .../src/blocks/PropsTable/PropRow.tsx | 8 +- .../src/blocks/PropsTable/PropValue.tsx | 19 +- .../src/blocks/PropsTable/PropsTable.tsx | 8 +- lib/components/src/blocks/Source.tsx | 3 + lib/components/src/blocks/Toolbar.tsx | 12 +- lib/components/src/blocks/Typeset.stories.tsx | 2 + lib/components/src/blocks/Typeset.tsx | 4 +- lib/components/src/form/input/input.tsx | 2 +- lib/components/src/icon/icon.tsx | 4 +- lib/components/src/index.ts | 3 + lib/components/src/shared/animation.ts | 10 + lib/components/src/tabs/tabs.tsx | 2 +- lib/components/src/tooltip/ListItem.tsx | 8 +- .../src/tooltip/Tooltip.stories.tsx | 2 +- .../src/tooltip/WithTooltip.stories.tsx | 38 +- .../src/typography/DocumentFormatting.tsx | 138 +- .../src/typography/DocumentWrapper.tsx | 750 +- lib/components/src/typography/link/link.tsx | 295 +- lib/components/src/typography/shared.tsx | 4 +- lib/components/tsconfig.json | 1 - lib/core-events/package.json | 5 +- lib/core-events/src/index.ts | 6 + lib/core/package.json | 34 +- lib/core/src/client/preview/NoDocs.js | 4 +- lib/core/src/client/preview/index.js | 2 +- lib/core/src/client/preview/start.js | 78 +- lib/core/src/client/preview/start.test.js | 40 +- lib/core/src/client/preview/url.js | 25 +- lib/core/src/client/preview/url.test.js | 23 +- lib/core/src/server/common/babel.js | 2 + lib/core/src/server/config/utils.js | 26 +- lib/core/src/server/manager/manager-preset.js | 17 +- lib/core/src/server/presets.js | 118 +- lib/core/src/server/presets.test.js | 114 + .../src/server/preview/base-webpack.config.js | 9 +- .../server/preview/custom-webpack-preset.js | 2 +- .../server/preview/iframe-webpack.config.js | 12 +- lib/core/src/server/preview/preview-preset.js | 9 +- ...file.js => load-manager-or-addons-file.js} | 6 +- ...file.js => load-preview-or-config-file.js} | 8 +- lib/core/src/server/utils/resolve-file.js | 1 + lib/node-logger/package.json | 7 +- lib/postinstall/package.json | 5 +- lib/postinstall/src/frameworks.ts | 1 - lib/router/package.json | 9 +- lib/router/src/utils.test.js | 53 - lib/router/src/utils.ts | 58 +- lib/router/tsconfig.json | 3 +- lib/source-loader/package.json | 11 +- .../server/__snapshots__/build.test.js.snap | 50 - .../inject-decorator.csf.test.js.snap | 22 +- .../abstract-syntax-tree/generate-helpers.js | 6 +- .../abstract-syntax-tree/parse-helpers.js | 2 +- .../abstract-syntax-tree/traverse-helpers.js | 165 +- lib/source-loader/src/server/build.js | 45 +- lib/source-loader/src/server/build.test.js | 54 - lib/theming/package.json | 8 +- lib/theming/src/index.ts | 1 + lib/theming/tsconfig.json | 3 +- lib/ui/package.json | 27 +- lib/ui/src/app.js | 5 +- lib/ui/src/app.stories.js | 20 +- lib/ui/src/components/layout/container.js | 13 +- lib/ui/src/components/layout/desktop.js | 17 +- lib/ui/src/components/preview/preview.js | 58 +- .../src/components/preview/preview.stories.js | 1 + lib/ui/src/components/sidebar/Sidebar.tsx | 4 +- .../src/components/sidebar/SidebarHeading.tsx | 6 +- lib/ui/src/components/sidebar/SidebarItem.tsx | 5 +- .../src/components/sidebar/SidebarSearch.tsx | 73 +- .../components/sidebar/treeview/treeview.js | 94 +- .../src/components/sidebar/treeview/utils.js | 5 +- lib/ui/src/containers/nav.js | 67 +- lib/ui/src/containers/nav.test.js | 92 + lib/ui/src/containers/preview.js | 22 +- lib/ui/src/index.js | 2 + lib/ui/src/settings/shortcuts.js | 2 +- netlify.toml | 6 +- now.json | 23 - package.json | 12 +- scripts/build-storybooks.js | 22 +- scripts/prepare.js | 9 +- tsconfig.json | 2 +- yarn.lock | 11634 ++++++---------- 675 files changed, 11506 insertions(+), 18765 deletions(-) create mode 100644 .gitattributes create mode 100644 .prettierignore delete mode 100644 addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap create mode 100644 addons/contexts/rax.js create mode 100644 addons/contexts/src/preview/frameworks/rax.ts create mode 100644 addons/docs/react/README.md create mode 100644 addons/essentials/README.md create mode 100644 addons/essentials/package.json create mode 100644 addons/essentials/src/index.ts create mode 100644 addons/essentials/src/typings.d.ts rename addons/{ondevice-actions => essentials}/tsconfig.json (54%) delete mode 100644 addons/jest/src/styles.js create mode 100644 addons/knobs/preset.js create mode 100644 addons/knobs/src/preset/addDecorator.ts create mode 100644 addons/knobs/src/preset/index.ts delete mode 100644 addons/ondevice-actions/README.md delete mode 100644 addons/ondevice-actions/package.json delete mode 100644 addons/ondevice-actions/register.js delete mode 100644 addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx delete mode 100644 addons/ondevice-actions/src/components/ActionLogger/index.tsx delete mode 100644 addons/ondevice-actions/src/containers/ActionLogger/index.tsx delete mode 100644 addons/ondevice-actions/src/index.tsx delete mode 100644 addons/ondevice-backgrounds/README.md delete mode 100644 addons/ondevice-backgrounds/docs/demo.gif delete mode 100644 addons/ondevice-backgrounds/package.json delete mode 100644 addons/ondevice-backgrounds/register.js delete mode 100644 addons/ondevice-backgrounds/src/BackgroundPanel.tsx delete mode 100644 addons/ondevice-backgrounds/src/Swatch.tsx delete mode 100644 addons/ondevice-backgrounds/src/constants.ts delete mode 100644 addons/ondevice-backgrounds/src/container.tsx delete mode 100644 addons/ondevice-backgrounds/src/index.tsx delete mode 100644 addons/ondevice-backgrounds/src/register.tsx delete mode 100644 addons/ondevice-backgrounds/tsconfig.json delete mode 100644 addons/ondevice-knobs/README.md delete mode 100644 addons/ondevice-knobs/package.json delete mode 100644 addons/ondevice-knobs/register.js delete mode 100644 addons/ondevice-knobs/src/GroupTabs.js delete mode 100644 addons/ondevice-knobs/src/PropField.js delete mode 100644 addons/ondevice-knobs/src/PropForm.js delete mode 100644 addons/ondevice-knobs/src/index.js delete mode 100644 addons/ondevice-knobs/src/panel.js delete mode 100644 addons/ondevice-knobs/src/types/Array.js delete mode 100644 addons/ondevice-knobs/src/types/Boolean.js delete mode 100644 addons/ondevice-knobs/src/types/Button.js delete mode 100644 addons/ondevice-knobs/src/types/Color.js delete mode 100644 addons/ondevice-knobs/src/types/Date.js delete mode 100644 addons/ondevice-knobs/src/types/Number.js delete mode 100644 addons/ondevice-knobs/src/types/Object.js delete mode 100644 addons/ondevice-knobs/src/types/Select.js delete mode 100644 addons/ondevice-knobs/src/types/Text.js delete mode 100644 addons/ondevice-knobs/src/types/index.js delete mode 100644 addons/ondevice-notes/README.md delete mode 100644 addons/ondevice-notes/docs/demo.png delete mode 100644 addons/ondevice-notes/package.json delete mode 100644 addons/ondevice-notes/register.js delete mode 100644 addons/ondevice-notes/src/components/Notes.tsx delete mode 100644 addons/ondevice-notes/src/index.ts delete mode 100644 addons/ondevice-notes/src/register.tsx delete mode 100644 addons/ondevice-notes/src/typings.d.ts delete mode 100644 addons/ondevice-notes/tsconfig.json create mode 100644 addons/storyshots/storyshots-core/src/frameworks/rax/loader.ts create mode 100644 addons/storyshots/storyshots-core/src/frameworks/rax/renderTree.ts create mode 100644 addons/storysource/theming-light-dark.png rename app/ember/src/client/{index.js => index.ts} (100%) rename app/ember/src/client/preview/{globals.js => globals.ts} (100%) rename app/ember/src/client/preview/{index.js => index.ts} (65%) rename app/ember/src/client/preview/{render.js => render.ts} (85%) create mode 100644 app/ember/src/client/preview/types.ts rename app/ember/src/server/{build.js => build.ts} (100%) delete mode 100644 app/ember/src/server/framework-preset-babel-ember.js create mode 100644 app/ember/src/server/framework-preset-babel-ember.ts rename app/ember/src/server/{index.js => index.ts} (100%) rename app/ember/src/server/{options.js => options.ts} (72%) create mode 100644 app/ember/src/typings.d.ts create mode 100644 app/ember/tsconfig.json rename app/{polymer => marionette}/README.md (59%) rename app/{polymer => marionette}/bin/build.js (100%) rename app/{polymer => marionette}/bin/index.js (100%) create mode 100644 app/marionette/package.json rename app/{polymer => marionette}/src/client/index.js (96%) create mode 100644 app/marionette/src/client/preview/element_check.js create mode 100644 app/marionette/src/client/preview/globals.js rename app/{polymer => marionette}/src/client/preview/index.js (61%) create mode 100644 app/marionette/src/client/preview/render.js rename app/{polymer => marionette}/src/server/build.js (100%) create mode 100644 app/marionette/src/server/framework-preset-marionette.js rename app/{polymer => marionette}/src/server/index.js (100%) create mode 100644 app/marionette/src/server/options.js rename app/{polymer => marionette}/standalone.js (100%) delete mode 100644 app/polymer/package.json delete mode 100644 app/polymer/src/client/preview/globals.js delete mode 100644 app/polymer/src/client/preview/render.js delete mode 100644 app/polymer/src/server/framework-preset-polymer.js delete mode 100644 app/polymer/src/server/options.js delete mode 100755 app/react-native-server/bin/index.js delete mode 100644 app/react-native-server/package.json delete mode 100644 app/react-native-server/readme.md delete mode 100644 app/react-native-server/src/client/manager/components/PreviewHelp.js delete mode 100644 app/react-native-server/src/client/manager/index.js delete mode 100644 app/react-native-server/src/client/manager/provider.js delete mode 100644 app/react-native-server/src/server/cli.js delete mode 100755 app/react-native-server/src/server/index.js delete mode 100644 app/react-native-server/src/server/options.js delete mode 100644 app/react-native-server/src/server/rn-options-preset.js delete mode 100644 app/react-native/docs/addons.md delete mode 100644 app/react-native/docs/assets/readme/screenshot.png delete mode 100644 app/react-native/docs/manual-setup.md delete mode 100644 app/react-native/docs/server.md delete mode 100644 app/react-native/docs/using-devices.md delete mode 100644 app/react-native/package.json delete mode 100644 app/react-native/readme.md delete mode 100644 app/react-native/src/index.ts delete mode 100644 app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx delete mode 100644 app/react-native/src/preview/components/OnDeviceUI/addons/index.tsx delete mode 100644 app/react-native/src/preview/components/OnDeviceUI/addons/list.tsx delete mode 100644 app/react-native/src/preview/components/OnDeviceUI/addons/wrapper.tsx delete mode 100644 app/react-native/src/preview/components/OnDeviceUI/animation.ts delete mode 100644 app/react-native/src/preview/components/OnDeviceUI/index.tsx delete mode 100644 app/react-native/src/preview/components/OnDeviceUI/navigation/bar.tsx delete mode 100644 app/react-native/src/preview/components/OnDeviceUI/navigation/button.tsx delete mode 100644 app/react-native/src/preview/components/OnDeviceUI/navigation/constants.ts delete mode 100644 app/react-native/src/preview/components/OnDeviceUI/navigation/index.tsx delete mode 100644 app/react-native/src/preview/components/OnDeviceUI/navigation/visibility-button.tsx delete mode 100644 app/react-native/src/preview/components/OnDeviceUI/panel.tsx delete mode 100644 app/react-native/src/preview/components/Shared/text.ts delete mode 100644 app/react-native/src/preview/components/Shared/theme.ts delete mode 100644 app/react-native/src/preview/components/StoryListView/index.tsx delete mode 100644 app/react-native/src/preview/components/StoryView/index.tsx delete mode 100644 app/react-native/src/preview/index.tsx delete mode 100644 app/react-native/src/preview/rn-host-detect.js delete mode 100644 app/react-native/src/typings.d.ts delete mode 100644 app/react-native/tsconfig.json create mode 100644 docs/src/pages/basics/toolbar-guide/index.md create mode 100644 docs/src/pages/configurations/overview/index.md create mode 100644 docs/src/pages/examples/thumbnails/bbc.jpg delete mode 100644 examples-native/crna-kitchen-sink/.babelrc.js delete mode 100644 examples-native/crna-kitchen-sink/.env delete mode 100644 examples-native/crna-kitchen-sink/.flowconfig delete mode 100644 examples-native/crna-kitchen-sink/.gitignore delete mode 100644 examples-native/crna-kitchen-sink/.watchmanconfig delete mode 100644 examples-native/crna-kitchen-sink/App.js delete mode 100644 examples-native/crna-kitchen-sink/App.test.js delete mode 100644 examples-native/crna-kitchen-sink/README.md delete mode 100644 examples-native/crna-kitchen-sink/app.json delete mode 100644 examples-native/crna-kitchen-sink/metro.config.js delete mode 100644 examples-native/crna-kitchen-sink/package.json delete mode 100644 examples-native/crna-kitchen-sink/storybook/addons.js delete mode 100644 examples-native/crna-kitchen-sink/storybook/index.js delete mode 100644 examples-native/crna-kitchen-sink/storybook/rn-addons.js delete mode 100644 examples-native/crna-kitchen-sink/storybook/stories/Button/index.android.js delete mode 100644 examples-native/crna-kitchen-sink/storybook/stories/Button/index.ios.js delete mode 100644 examples-native/crna-kitchen-sink/storybook/stories/CenterView/index.js delete mode 100644 examples-native/crna-kitchen-sink/storybook/stories/CenterView/style.js delete mode 100644 examples-native/crna-kitchen-sink/storybook/stories/Knobs/index.js delete mode 100644 examples-native/crna-kitchen-sink/storybook/stories/Welcome/index.js delete mode 100644 examples-native/crna-kitchen-sink/storybook/stories/index.js delete mode 100644 examples/cra-kitchen-sink/src/stories/perf.stories.js create mode 100644 examples/cra-ts-essentials/.storybook/main.js create mode 100644 examples/cra-ts-essentials/README.md create mode 100644 examples/cra-ts-essentials/package.json create mode 100644 examples/cra-ts-essentials/public/favicon.ico create mode 100644 examples/cra-ts-essentials/public/index.html create mode 100644 examples/cra-ts-essentials/public/logo192.png create mode 100644 examples/cra-ts-essentials/public/logo512.png create mode 100644 examples/cra-ts-essentials/public/manifest.json create mode 100644 examples/cra-ts-essentials/public/robots.txt create mode 100644 examples/cra-ts-essentials/src/App.css create mode 100644 examples/cra-ts-essentials/src/App.test.tsx create mode 100644 examples/cra-ts-essentials/src/App.tsx create mode 100644 examples/cra-ts-essentials/src/index.css create mode 100644 examples/cra-ts-essentials/src/index.tsx create mode 100644 examples/cra-ts-essentials/src/logo.svg create mode 100644 examples/cra-ts-essentials/src/react-app-env.d.ts create mode 100644 examples/cra-ts-essentials/src/serviceWorker.ts create mode 100644 examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx create mode 100644 examples/cra-ts-essentials/src/stories/1-Button.stories.tsx create mode 100644 examples/cra-ts-essentials/tsconfig.json delete mode 100644 examples/cra-ts-kitchen-sink/.storybook/addons.ts create mode 100644 examples/cra-ts-kitchen-sink/.storybook/main.js delete mode 100644 examples/cra-ts-kitchen-sink/.storybook/presets.js rename examples/cra-ts-kitchen-sink/.storybook/{config.ts => preview.ts} (60%) create mode 100644 examples/dev-kits/stories/addon-useaddonstate.tsx create mode 100644 examples/dev-kits/stories/addon-usestorystate.tsx create mode 100644 examples/ember-cli/config/optional-features.json create mode 100644 examples/official-storybook/components/TsButton.tsx create mode 100644 examples/official-storybook/intro.stories.mdx create mode 100644 examples/official-storybook/stories/addon-docs/forward-ref.stories.js create mode 100644 examples/official-storybook/stories/addon-docs/mixed-leaves-component.stories.js create mode 100644 examples/official-storybook/stories/addon-docs/mixed-leaves-folder.stories.js create mode 100644 examples/official-storybook/stories/addon-docs/react-memo.stories.js create mode 100644 examples/official-storybook/stories/addon-docs/ts-button.stories.tsx create mode 100644 examples/official-storybook/stories/core/interleaved-exports.stories.js create mode 100644 examples/official-storybook/stories/core/layout.stories.js create mode 100644 examples/official-storybook/stories/core/named-export-order.stories.js create mode 100644 examples/official-storybook/stories/core/reexport-source-loader.stories.js rename examples/official-storybook/storyshots-puppeteer/__image_snapshots__/{storyshots-image-runner-js-image-snapshots-addons-storyshots-block-1-snap.png => storyshots-image-runner-js-image-snapshots-addons-storyshots-block-story-1-snap.png} (54%) delete mode 100644 examples/polymer-cli/.env delete mode 100644 examples/polymer-cli/.eslintrc.js delete mode 100644 examples/polymer-cli/.storybook/main.js delete mode 100644 examples/polymer-cli/.storybook/manager.js delete mode 100644 examples/polymer-cli/.storybook/preview.js delete mode 100644 examples/polymer-cli/README.md delete mode 100644 examples/polymer-cli/index.html delete mode 100644 examples/polymer-cli/package.json delete mode 100644 examples/polymer-cli/src/logo.svg delete mode 100644 examples/polymer-cli/src/playground-button.html delete mode 100644 examples/polymer-cli/src/polymer-playground-app.html delete mode 100644 examples/polymer-cli/src/separated-button/separated-button.html delete mode 100644 examples/polymer-cli/src/separated-button/separated-button.js delete mode 100644 examples/polymer-cli/src/separated-button/useless-mixin.js delete mode 100644 examples/polymer-cli/src/simple-button.html delete mode 100644 examples/polymer-cli/src/stories/addon-actions.stories.js delete mode 100644 examples/polymer-cli/src/stories/addon-backgrounds.stories.js delete mode 100644 examples/polymer-cli/src/stories/addon-knobs.stories.js delete mode 100644 examples/polymer-cli/src/stories/addon-links.stories.js delete mode 100644 examples/polymer-cli/src/stories/addon-notes.stories.js delete mode 100644 examples/polymer-cli/src/stories/components/app.stories.js delete mode 100644 examples/polymer-cli/src/stories/components/button.stories.js delete mode 100644 examples/polymer-cli/src/stories/components/welcome.stories.js delete mode 100644 examples/polymer-cli/src/stories/core.stories.js delete mode 100644 examples/polymer-cli/src/stories/custom-decorators.stories.js delete mode 100644 examples/polymer-cli/src/stories/custom-rendering.stories.js delete mode 100644 examples/polymer-cli/src/stories/storybook-welcome-to-polymer.html delete mode 100644 examples/polymer-cli/src/string-template-button.js delete mode 100644 examples/polymer-cli/webpack.config.js rename examples/rax-kitchen-sink/{.babelrc.js => babel.config.js} (58%) create mode 100644 examples/rax-kitchen-sink/build.json delete mode 100644 examples/rax-kitchen-sink/jest-addon.config.js delete mode 100644 examples/rax-kitchen-sink/jest.config.js delete mode 100644 examples/rax-kitchen-sink/public/index.html delete mode 100644 examples/rax-kitchen-sink/public/rax-logo.png create mode 100644 examples/rax-kitchen-sink/src/app.js delete mode 100644 examples/rax-kitchen-sink/src/components/App/App.test.js delete mode 100644 examples/rax-kitchen-sink/src/components/App/__snapshots__/App.test.js.snap delete mode 100644 examples/rax-kitchen-sink/src/components/App/index.stylesheet delete mode 100644 examples/rax-kitchen-sink/src/components/Welcome/Welcome.test.js delete mode 100644 examples/rax-kitchen-sink/src/components/Welcome/__snapshots__/Welcome.test.js.snap delete mode 100644 examples/rax-kitchen-sink/src/components/Welcome/index.js create mode 100644 examples/rax-kitchen-sink/src/document/index.jsx delete mode 100644 examples/rax-kitchen-sink/src/index.js create mode 100644 examples/rax-kitchen-sink/src/stories/addon-contexts.stories.js delete mode 100644 examples/rax-kitchen-sink/src/stories/addon-jest.stories.js create mode 100644 examples/standalone-preview/stories/Component1.stories.tsx create mode 100644 examples/standalone-preview/stories/Component2.stories.tsx create mode 100644 examples/standalone-preview/storybook.ts delete mode 100644 examples/standalone-preview/storybook.tsx create mode 100644 lib/cli/generators/MARIONETTE/index.js create mode 100644 lib/cli/generators/MARIONETTE/template/.storybook/config.js create mode 100644 lib/cli/generators/MARIONETTE/template/stories/index.stories.js delete mode 100755 lib/cli/generators/POLYMER/index.js delete mode 100644 lib/cli/generators/POLYMER/template-csf/.storybook/main.js delete mode 100644 lib/cli/generators/POLYMER/template-csf/src/stories/index.stories.js rename lib/cli/generators/RAX/template-csf/stories/{1-Button.stories.js => 1-View.stories.js} (60%) create mode 100644 lib/cli/generators/WEB-COMPONENTS/template/.storybook/preview.js delete mode 100644 lib/cli/test/fixtures/polymer/package.json create mode 100644 lib/client-api/src/storySort.test.ts create mode 100644 lib/client-api/src/storySort.ts delete mode 100644 lib/client-api/src/subscriptions_store.test.ts delete mode 100644 lib/client-api/src/subscriptions_store.ts create mode 100644 lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/digit.output.js create mode 100644 lib/components/src/Loader/Loader.stories.tsx create mode 100644 lib/components/src/Loader/Loader.tsx rename lib/components/src/bar/{button.ts => button.tsx} (67%) create mode 100644 lib/components/src/shared/animation.ts rename lib/core/src/server/utils/{load-custom-addons-file.js => load-manager-or-addons-file.js} (81%) rename lib/core/src/server/utils/{load-custom-config-file.js => load-preview-or-config-file.js} (73%) create mode 100644 lib/core/src/server/utils/resolve-file.js delete mode 100644 lib/router/src/utils.test.js delete mode 100644 lib/source-loader/src/server/__snapshots__/build.test.js.snap delete mode 100644 lib/source-loader/src/server/build.test.js create mode 100644 lib/ui/src/containers/nav.test.js delete mode 100644 now.json diff --git a/.babelrc.js b/.babelrc.js index cb85c9eb2b75..7e6d99f229fc 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -48,13 +48,6 @@ module.exports = { test: withTests, }, }, - { - test: './examples/rax-kitchen-sink', - presets: [ - ['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' }], - ['babel-preset-rax', { development: process.env.BABEL_ENV === 'development' }], - ], - }, { test: './lib', presets: [ @@ -75,11 +68,6 @@ module.exports = { test: withTests, }, }, - { - test: './app/react-native', - presets: ['module:metro-react-native-babel-preset'], - plugins: ['babel-plugin-macros', ['emotion', { sourceMap: true, autoLabel: true }]], - }, { test: [ './lib/node-logger', diff --git a/.circleci/config.yml b/.circleci/config.yml index ed8d38cfe754..4b79060d74be 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -51,7 +51,52 @@ jobs: command: yarn chromatic --storybook-build-dir="built-storybooks/official-storybook" --exit-zero-on-changes --app-code="ab7m45tp9p" - run: name: Run chromatic on the pre-built angular example - command: yarn chromatic --storybook-build-dir="built-storybooks/angular-cli" --exit-zero-on-changes --app-code="tl92yzsj6w" + command: yarn chromatic --storybook-build-dir="built-storybooks/angular-cli" --app-code="tl92yzsj6w" + - run: + name: Run chromatic on the pre-built cra-kitchen-sink example + command: yarn chromatic --storybook-build-dir="built-storybooks/cra-kitchen-sink" --app-code="tg55gajmdt" + - run: + name: Run chromatic on the pre-built cra-react15 example + command: yarn chromatic --storybook-build-dir="built-storybooks/cra-react15" --app-code="gxk7iqej3wt" + - run: + name: Run chromatic on the pre-built cra-ts-essentials example + command: yarn chromatic --storybook-build-dir="built-storybooks/cra-ts-essentials" --app-code="b311ypk6of" + - run: + name: Run chromatic on the pre-built cra-ts-kitchen-sink example + command: yarn chromatic --storybook-build-dir="built-storybooks/cra-ts-kitchen-sink" --app-code="19whyj1tlac" + - run: + name: Run chromatic on the pre-built dev-kits example + command: yarn chromatic --storybook-build-dir="built-storybooks/dev-kits" --app-code="7yykp9ifdxx" + - run: + name: Run chromatic on the pre-built ember-cli example + command: yarn chromatic --storybook-build-dir="built-storybooks/ember-cli" --app-code="19z23qxndju" + - run: + name: Run chromatic on the pre-built html-kitchen-sink example + command: yarn chromatic --storybook-build-dir="built-storybooks/html-kitchen-sink" --app-code="e8zolxoyg8o" + - run: + name: Run chromatic on the pre-built marko-cli example + command: yarn chromatic --storybook-build-dir="built-storybooks/marko-cli" --app-code="qaegx64axu" + - run: + name: Run chromatic on the pre-built mithril-kitchen-sink example + command: yarn chromatic --storybook-build-dir="built-storybooks/mithril-kitchen-sink" --app-code="8adgm46jzk8" + - run: + name: Run chromatic on the pre-built preact-kitchen-sink example + command: yarn chromatic --storybook-build-dir="built-storybooks/preact-kitchen-sink" --app-code="ls0ikhnwqt" + - run: + name: Run chromatic on the pre-built rax-kitchen-sink example + command: yarn chromatic --storybook-build-dir="built-storybooks/rax-kitchen-sink" --app-code="4co6vptx8qo" + - run: + name: Run chromatic on the pre-built riot-kitchen-sink example + command: yarn chromatic --storybook-build-dir="built-storybooks/riot-kitchen-sink" --app-code="g2dp3lnr34a" + - run: + name: Run chromatic on the pre-built svelte-kitchen-sink example + command: yarn chromatic --storybook-build-dir="built-storybooks/svelte-kitchen-sink" --app-code="8ob73wgl995" + - run: + name: Run chromatic on the pre-built vue-kitchen-sink example + command: yarn chromatic --storybook-build-dir="built-storybooks/vue-kitchen-sink" --app-code="cyxj0e38bqj" + - run: + name: Run chromatic on the pre-built web-components-kitchen-sink example + command: yarn chromatic --storybook-build-dir="built-storybooks/web-components-kitchen-sink" --app-code="npm5gsofwkf" packtracker: <<: *defaults @@ -146,11 +191,6 @@ jobs: command: | cd examples/ember-cli yarn storybook --smoke-test --quiet - - run: - name: Run polymer-cli (smoke test) - command: | - cd examples/polymer-cli - yarn storybook --smoke-test --quiet - run: name: Run marko-cli (smoke test) command: | @@ -181,24 +221,6 @@ jobs: command: | cd examples/cra-react15 yarn storybook --smoke-test --quiet - native-smoke-tests: - <<: *defaults - steps: - - checkout - - attach_workspace: - at: . - - run: - name: Bootstrap - command: yarn bootstrap --core - - run: - name: Run React-Native-App example - command: | - cd examples-native/crna-kitchen-sink - yarn storybook --smoke-test - - run: - name: Publish React-Native-App example - command: | - ./scripts/crna-publish.js frontpage: <<: *defaults steps: @@ -286,9 +308,6 @@ workflows: - packtracker: requires: - build - - native-smoke-tests: - requires: - - build - test: requires: - build diff --git a/.eslintignore b/.eslintignore index 4b9216815225..69e43252ce45 100644 --- a/.eslintignore +++ b/.eslintignore @@ -15,9 +15,11 @@ scripts/storage examples/ember-cli/.storybook/preview-head.html examples/official-storybook/tests/addon-jest.test.js examples/cra-ts-kitchen-sink/*.json -examples/cra-ts-kitchen-sink/public/*.json -examples/cra-ts-kitchen-sink/public/*.html - +examples/cra-ts-kitchen-sink/public/* +examples/cra-ts-essentials/*.json +examples/cra-ts-essentials/public/* +examples/rax-kitchen-sink/src/document/* +.yarn !.remarkrc.js !.babelrc.js !.eslintrc.js diff --git a/.eslintrc.js b/.eslintrc.js index 3c53e6faad79..98dff193b3c1 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -14,6 +14,7 @@ module.exports = { 'react/jsx-fragments': 'off', '@typescript-eslint/ban-ts-ignore': 'off', '@typescript-eslint/no-object-literal-type-assertion': 'off', + '@typescript-eslint/no-empty-function': 'off', 'react/sort-comp': [ 'error', { diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 000000000000..5ea62bf2933c --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +.yarn/releases/yarn-*.js linguist-generated=true diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index c23f1075713c..70a20b7fbe5e 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -18,9 +18,7 @@ /addons/viewport/ @saponifi3d /app/angular/ @alterx @igor-dv -/app/polymer/ @ndelangen @naipath @leonrodenburg /app/react/ @xavcz @shilman @thomasbertet -/app/react-native/ @rmevans9 @Gongreg @tmeasday /app/vue/ @thomasbertet @kazupon /app/svelte/ @plumpNation @@ -30,7 +28,6 @@ /examples/cra-kitchen-sink/ @ndelangen @UsulPro /examples/cra-ts-kitchen-sink/ @mucsi96 /examples/official-storybook/ @UsulPro -/examples/polymer-cli/ @naipath @igor-dv /examples/vue-kitchen-sink/ @igor-dv @alexandrebodin /examples/svelte-kitchen-sink/ @plumpNation diff --git a/.github/autolabeler.yml b/.github/autolabeler.yml index 4a4e5cf97216..a418cc267f82 100644 --- a/.github/autolabeler.yml +++ b/.github/autolabeler.yml @@ -13,9 +13,8 @@ 'addon: storyshots': ["addons/storyshots/**"] 'addon: viewport': ["addons/viewport/**"] 'app: angular': ["app/angular/**"] -'app: polymer ': ["app/polymer/**"] 'app: preact': ["app/preact/**"] -'app: react-native': ["app/react-native/**"] +'app: rax': ["app/rax/**"] 'app: react': ["app/react/**"] 'app: vue': ["app/vue/**"] 'app: svelte': ["app/svelte/**"] diff --git a/.github/automention.yml b/.github/automention.yml index 177c7086be99..fd0147cbc3aa 100644 --- a/.github/automention.yml +++ b/.github/automention.yml @@ -2,12 +2,10 @@ 'app: ember': ['gabrielcsapo'] 'app: html': ['Hypnosphi'] 'app: marko': ['nm123github'] -'app: polymer': ['stijnkoopal', 'ndelangen'] 'app: preact': ['BartWaardenburg'] -'app: react-native': ['benoitdion', 'gongreg'] -'app: react-native-server': ['benoitdion', 'gongreg'] +'app: rax': ['SoloJiang'] 'app: svelte': ['rixo', 'cam-stitt', 'plumpNation'] -'app: vue': ['backbone87', 'elevatebart', 'pksunkara', 'Aaron-Pool'] +'app: vue': ['backbone87', 'elevatebart', 'pksunkara', 'Aaron-Pool', 'pocka'] 'app: web-components': ['daKmoR'] 'api: addons': ['ndelangen'] 'addon: a11y': ['CodeByAlex', 'Armanio', 'jsomsanith'] diff --git a/.gitignore b/.gitignore index ffe460ac8a41..1594748ce78d 100644 --- a/.gitignore +++ b/.gitignore @@ -35,3 +35,4 @@ storybook-out built-storybooks cypress/videos cypress/screenshots +examples/ember-cli/ember-output diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 000000000000..61c3bc75a05e --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +.yarn diff --git a/.vscode/launch.json b/.vscode/launch.json index 50ef06713aca..daa7997bc064 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -17,6 +17,22 @@ "skipFiles": [ "/**" ] - }, + }, { + "type": "node", + "request": "launch", + "name": "cli html", + "cwd": "${workspaceFolder}/lib/cli/stories", + "runtimeArgs": [ + "--inspect-brk", + "${workspaceFolder}/lib/cli/bin/index.js", + "init", + "--type", + "html" + ], + "port": 9229, + "skipFiles": [ + "/**" + ] + } ] } \ No newline at end of file diff --git a/ADDONS_SUPPORT.md b/ADDONS_SUPPORT.md index a87bcfb68bc5..540732862587 100644 --- a/ADDONS_SUPPORT.md +++ b/ADDONS_SUPPORT.md @@ -1,25 +1,25 @@ ## Addon / Framework Support Table -| | [React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)| [Marko](app/marko)| [Svelte](app/svelte)| [Riot](app/riot)| [Ember](app/ember)| [Preact](app/preact)| -| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:| -|[a11y](addons/a11y) |+| |+|+|+|+|+|+|+|+|+|+| -|[actions](addons/actions) |+|+*|+|+|+|+|+|+|+|+|+|+| -|[backgrounds](addons/backgrounds) |+|*|+|+|+|+|+|+|+|+|+|+| -|[centered](addons/centered) |+| |+|+| |+|+| |+| |+|+| -|[contexts](addons/contexts) |+| |+| | | | | | | | |+| -|[events](addons/events) |+| |+|+|+|+|+|+| | |+|+| -|[design assets](addons/design-assets) |+| |+|+|+|+|+|+|+|+|+|+| -|[graphql](addons/graphql) |+| | | | | | | | | | | | -|[google-analytics](addons/google-analytics) |+|+|+|+|+|+|+|+|+|+|+|+| -|[info](addons/info) |+| | | | | | | | | | | | -|[jest](addons/jest) |+|+|+|+|+|+|+|+|+|+|+|+| -|[knobs](addons/knobs) |+|+*|+|+|+|+|+|+|+|+|+|+| -|[links](addons/links) |+|+|+|+|+|+|+| |+|+|+|+| -|[notes](addons/notes) |+|+*|+|+|+|+|+| |+|+|+|+| -|[options](addons/options) |+|+|+|+|+|+|+| |+|+|+|+| -|[cssresources](addons/cssresources) |+| |+|+|+|+|+|+|+|+|+|+| -|[storyshots](addons/storyshots) |+|+|+|+| | |+| |+|+| |+| -|[storysource](addons/storysource) |+| |+|+|+|+|+|+|+|+|+|+| -|[viewport](addons/viewport) |+| |+|+|+|+|+|+|+|+|+|+| +| | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) | [Rax](app/rax) | +| ------------------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: | -------------- | +| [a11y](addons/a11y) | + | | + | + | + | + | + | + | + | + | + | + | +| [actions](addons/actions) | + | +\* | + | + | + | + | + | + | + | + | + | + | +| [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + | + | + | + | + | +| [centered](addons/centered) | + | | + | + | + | + | | + | | + | + | + | +| [contexts](addons/contexts) | + | | + | | | | | | | | + | + | +| [events](addons/events) | + | | + | + | + | + | + | | | + | + | + | +| [design assets](addons/design-assets) | + | | + | + | + | + | + | + | + | + | + | + | +| [graphql](addons/graphql) | + | | | | | | | | | | | | +| [google-analytics](addons/google-analytics) | + | + | + | + | + | + | + | + | + | + | + | + | +| [info](addons/info) | + | | | | | | | | | | | | +| [jest](addons/jest) | + | + | + | + | + | + | + | + | + | + | + | + | +| [knobs](addons/knobs) | + | +\* | + | + | + | + | + | + | + | + | + | + | +| [links](addons/links) | + | + | + | + | + | + | | + | + | + | + | + | +| [notes](addons/notes) | + | +\* | + | + | + | + | | + | + | + | + | + | +| [options](addons/options) | + | + | + | + | + | + | | + | + | + | + | + | +| [cssresources](addons/cssresources) | + | | + | + | + | + | + | + | + | + | + | + | +| [storyshots](addons/storyshots) | + | + | + | + | | + | | + | + | | + | + | +| [storysource](addons/storysource) | + | | + | + | + | + | + | + | + | + | + | + | +| [viewport](addons/viewport) | + | | + | + | + | + | + | + | + | + | + | + | -`*` - React Native on device addon (addons/onDevice-\) +`*` - React Native on device addon (addons/onDevice-\) diff --git a/CHANGELOG.md b/CHANGELOG.md index b91f70870b62..4eb340f5edbf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,395 @@ +## 5.3.9 (January 24, 2020) + +### Bug Fixes + +* Addon-docs: Revert breaking source indentation fix ([#9609](https://github.com/storybookjs/storybook/pull/9609)) + +## 6.0.0-alpha.1 (January 23, 2020) + +### Features + +* Core: Enable HMR logging in browser console ([#9535](https://github.com/storybookjs/storybook/pull/9535)) + +### Bug Fixes + +* Addon-knobs: Fix broken link to repo in empty panel ([#9530](https://github.com/storybookjs/storybook/pull/9530)) +* Typescript: Export IStory in `@storybook/angular` ([#9097](https://github.com/storybookjs/storybook/pull/9097)) + +### Maintenance + +* React-native: Extract to its own repo ([#9599](https://github.com/storybookjs/storybook/pull/9599)) +* Polymer: Extract to its own repo ([#9596](https://github.com/storybookjs/storybook/pull/9596)) +* Build: Fix some dependencies & ts problems ([#9603](https://github.com/storybookjs/storybook/pull/9603)) + +## 5.3.8 (January 22, 2020) + +### Bug Fixes + +* Addon-docs: Fix TS false default value in prop table ([#9560](https://github.com/storybookjs/storybook/pull/9560)) +* Addon-knobs: Fix broken repo link in empty panel ([#9530](https://github.com/storybookjs/storybook/pull/9530)) +* Typescript: Export IStory in `@storybook/angular` ([#9097](https://github.com/storybookjs/storybook/pull/9097)) +* Fixed Angular button example story ([#9540](https://github.com/storybookjs/storybook/pull/9540)) +* Clean usage of `@types/webpack-env` dep in all packages ([#9536](https://github.com/storybookjs/storybook/pull/9536)) + +## 6.0.0-alpha.0 (January 21, 2020) + +### Features + +* API: Add useSharedState, useStoryState ([#9566](https://github.com/storybookjs/storybook/pull/9566)) +* Addon-docs: Named colors with ColorPalette ([#9453](https://github.com/storybookjs/storybook/pull/9453)) +* Core: Add preview layouts ([#9229](https://github.com/storybookjs/storybook/pull/9229)) +* Marionette: Add marionette support ([#7981](https://github.com/storybookjs/storybook/pull/7981)) +* Addon-a11y: Support manual run ([#8883](https://github.com/storybookjs/storybook/pull/8883)) +* Addon-cssresources: Disable SyntaxHighlighter for long code ([#9360](https://github.com/storybookjs/storybook/pull/9360)) +* Core: Improve monorepo support ([#8822](https://github.com/storybookjs/storybook/pull/8822)) + +### Bug Fixes + +* Addon-docs: Fix TS false default value in prop table ([#9560](https://github.com/storybookjs/storybook/pull/9560)) +* Addon-docs: Remove hard-coded lineHeight in Typeset block ([#9567](https://github.com/storybookjs/storybook/pull/9567)) +* Fixed Angular button example story ([#9540](https://github.com/storybookjs/storybook/pull/9540)) +* Core: Fix generated entry to import at top of file ([#9398](https://github.com/storybookjs/storybook/pull/9398)) +* Preact: Fix story function typescript type ([#9123](https://github.com/storybookjs/storybook/pull/9123)) +* UI: Make canvas link a link ([#9257](https://github.com/storybookjs/storybook/pull/9257)) + +### Maintenance + +* Build: the build-storybooks script ([#9569](https://github.com/storybookjs/storybook/pull/9569)) +* CLI: Improve Rax template ([#9574](https://github.com/storybookjs/storybook/pull/9574)) +* Typescript: Migrate polymer ([#9565](https://github.com/storybookjs/storybook/pull/9565)) +* Typescript: Migrate ember ([#9020](https://github.com/storybookjs/storybook/pull/9020)) +* Next 6.0.0 ([#9212](https://github.com/storybookjs/storybook/pull/9212)) +* REMOVE subscription_store ([#9228](https://github.com/storybookjs/storybook/pull/9228)) + +### Dependency Upgrades + +* Update husky to v4 ([#9509](https://github.com/storybookjs/storybook/pull/9509)) +* Bumped react-dev-utils dependency to v10. ([#9579](https://github.com/storybookjs/storybook/pull/9579)) +* Bump babel-plugin-macros from 2.7.1 to 2.8.0 ([#9236](https://github.com/storybookjs/storybook/pull/9236)) +* Bump babel-plugin-emotion from 10.0.23 to 10.0.27 ([#9239](https://github.com/storybookjs/storybook/pull/9239)) +* Bump @babel/runtime from 7.7.4 to 7.7.7 ([#9277](https://github.com/storybookjs/storybook/pull/9277)) +* Bump corejs-upgrade-webpack-plugin from 2.2.0 to 3.0.1 ([#9427](https://github.com/storybookjs/storybook/pull/9427)) +* Bump terser-webpack-plugin from 2.2.1 to 2.3.2 ([#9386](https://github.com/storybookjs/storybook/pull/9386)) + +## 5.3.7 (January 20, 2020) + +### Bug Fixes + +* Node-logger: Move `@types/npmlog` to dependencies ([#9538](https://github.com/storybookjs/storybook/pull/9538)) +* Core: Fix legacy story URLs ([#9545](https://github.com/storybookjs/storybook/pull/9545)) +* Addon-docs: Convert default prop value to string ([#9525](https://github.com/storybookjs/storybook/pull/9525)) +* Addon-docs: Preserve Source indentation by default ([#9513](https://github.com/storybookjs/storybook/pull/9513)) + +## 5.3.6 (January 17, 2020) + +### Bug Fixes + +* Source-loader: Bypass if file has no exports ([#9505](https://github.com/storybookjs/storybook/pull/9505)) +* Core: Fix default sorting of docs-only stories ([#9504](https://github.com/storybookjs/storybook/pull/9504)) + +## 5.3.5 (January 17, 2020) + +### Bug Fixes + +* Core: Fix typo for loading addon-notes/register-panel ([#9497](https://github.com/storybookjs/storybook/pull/9497)) +* Source-loader: Add imports to top of file ([#9492](https://github.com/storybookjs/storybook/pull/9492)) + +## 5.3.4 (January 16, 2020) + +### Bug Fixes + +* Core: Fix presets register panel ([#9486](https://github.com/storybookjs/storybook/pull/9486)) +* Core: Fix addon/preset detection for local addons ([#9485](https://github.com/storybookjs/storybook/pull/9485)) +* Core: Fix default story sort ([#9482](https://github.com/storybookjs/storybook/pull/9482)) + +## 5.3.3 (January 14, 2020) + +### Bug Fixes + +* UI: Fix edge case where only one legacy separator is defined ([#9425](https://github.com/storybookjs/storybook/pull/9425)) +* Core: Preserve kind load order on HMR when no sortFn is provided ([#9424](https://github.com/storybookjs/storybook/pull/9424)) +* Angular: Fix missing architect properties ([#9390](https://github.com/storybookjs/storybook/pull/9390)) +* Addon-knobs: Fix null knob values in select ([#9416](https://github.com/storybookjs/storybook/pull/9416)) +* Source-loader: Disable linting altogether ([#9417](https://github.com/storybookjs/storybook/pull/9417)) + +## 5.3.2 (January 13, 2020) + +### Bug Fixes + +* Source-loader: Disable eslint entirely for generated code ([#9410](https://github.com/storybookjs/storybook/pull/9410)) + +## 5.3.1 (January 12, 2020) + +### Bug Fixes + +* Core: Fix generated entry to import at top of file ([#9398](https://github.com/storybookjs/storybook/pull/9398)) + +## 5.3.0 (January 11, 2020) + +Storybook 5.3 is here! + +- 📝 [Custom documentation in MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) +- 🎨 [Multi-framework SB Docs (React, Vue, Angular, WC, Ember)](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea) +- 📦 [Web-components framework support](https://dev.to/open-wc/storybook-for-web-components-on-steroids-4h29) +- 🔼 [Main.js declarative configuration](https://medium.com/storybookjs/declarative-storybook-configuration-49912f77b78) + +5.3 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.3.0-alpha.*`, `5.3.0-beta.*`, and `5.3.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to upgrade from `5.0` or earlier. + +## 5.3.0-rc.14 (January 11, 2020) + +* Merge `master` into `next` for 5.3.0 release ([#9388](https://github.com/storybookjs/storybook/pull/9388)) + +## 5.3.0-rc.13 (January 11, 2020) + +### Bug Fixes + +* Addon-docs: Fix link CORS errors using channel navigate event ([#9381](https://github.com/storybookjs/storybook/pull/9381)) +* CLI: Fix `sb init` to use spawn.sync if creating package.json ([#9359](https://github.com/storybookjs/storybook/pull/9359)) + +### Maintenance + +* Official-storybook: Prop table example for multiple named exports ([#9364](https://github.com/storybookjs/storybook/pull/9364)) +* Addon-docs / web-components: Rename 'props' to 'properties' in props table ([#9362](https://github.com/storybookjs/storybook/pull/9362)) + +### Dependency Upgrades + +* Upgrade @types/webpack-env and @types/node to fix conflicting types ([#9365](https://github.com/storybookjs/storybook/pull/9365)) + +## 5.3.0-rc.12 (January 8, 2020) + +### Bug Fixes + +* Nav UI: Nodes are components only if they contain ALL leaf nodes ([#9356](https://github.com/storybookjs/storybook/pull/9356)) +* Core: Fix HMR for global decorators in main.js config ([#9354](https://github.com/storybookjs/storybook/pull/9354)) +* Presets: Fix register.js addons entry ([#9347](https://github.com/storybookjs/storybook/pull/9347)) +* React: Check CRA is installed before showing warning ([#9346](https://github.com/storybookjs/storybook/pull/9346)) + +## 5.3.0-rc.11 (January 7, 2020) + +### Bug Fixes + +* Addon-Docs: Handle leaf/non-leaf mixture in docs-mode navigation ([#9321](https://github.com/storybookjs/storybook/pull/9321)) + +### Dependency Upgrades + +* Axe storyshots: move to original @wordpress/jest-puppeteer-axe package ([#9337](https://github.com/storybookjs/storybook/pull/9337)) + +## 5.3.0-rc.10 (January 6, 2020) + +### Bug Fixes + +* Revert "Source-loader: Disable no-implicit-any linting" ([#9333](https://github.com/storybookjs/storybook/pull/9333)) +* Addon-docs: Fix scroll behavior on page navigation ([#9331](https://github.com/storybookjs/storybook/pull/9331)) + +## 5.3.0-rc.9 (January 4, 2020) + +### Features + +* CSF: Use `__namedExportsOrder` array in loader if provided ([#9315](https://github.com/storybookjs/storybook/pull/9315)) + +### Bug Fixes + +* Router: Add storyNameFromExport to avoid breaking changes ([#9320](https://github.com/storybookjs/storybook/pull/9320)) + +## 5.3.0-rc.8 (January 3, 2020) + +### Bug Fixes + +* Addon-docs: Tweak props table paragraph spacing ([#9307](https://github.com/storybookjs/storybook/pull/9307)) + +### Maintenance + +* Add minimal typescript component to official-storybook ([#9308](https://github.com/storybookjs/storybook/pull/9308)) + +### Dependency Upgrades + +* React: Upgrade babel-plugin-react-docgen to 4.0.0 ([#9303](https://github.com/storybookjs/storybook/pull/9303)) + +## 5.3.0-rc.7 (January 2, 2020) + +### Bug Fixes + +* Core: Fix babel.js to disable simplify ([#9280](https://github.com/storybookjs/storybook/pull/9280)) +* Storyshots-Puppeteer: Don't infer story ID from its name ([#9291](https://github.com/storybookjs/storybook/pull/9291)) + +## 5.3.0-rc.6 (December 31, 2019) + +This is significant change to `main.js` aka tri-config, dramatically simplifying how addons and presets are registered. See the maintenannce PR for details. + +### Maintenance + +* Main.js: Combine presets/registers in `addons` field ([#9246](https://github.com/storybookjs/storybook/pull/9246)) + +## 5.3.0-rc.5 (December 31, 2019) + +### Bug Fixes + +* Addon-docs: Hide stories block when there are no stories ([#9271](https://github.com/storybookjs/storybook/pull/9271)) +* Source-loader: Disable no-implicit-any linting ([#9272](https://github.com/storybookjs/storybook/pull/9272)) + +## 5.3.0-rc.4 (December 28, 2019) + +### Bug Fixes + +* Addon-docs: Fix MDX story rendering with dynamic component titles ([#9248](https://github.com/storybookjs/storybook/pull/9248)) + +### Maintenance + +* Ignore testfixtures directory in storybook publish ([#9244](https://github.com/storybookjs/storybook/pull/9244)) + +## 5.3.0-rc.3 (December 26, 2019) + +### Bug Fixes + +* Addon-docs: Include ember files in addon-docs publish ([#9230](https://github.com/storybookjs/storybook/pull/9230)) + +### Maintenance + +* Standalone CSF example ([#9223](https://github.com/storybookjs/storybook/pull/9223)) + +### Dependency Upgrades + +* Addon-info: Upgrade marksy for security ([#9234](https://github.com/storybookjs/storybook/pull/9234)) + +## 5.3.0-rc.2 (December 26, 2019) + +Failed NPM publish + +## 5.3.0-rc.1 (December 23, 2019) + +### Bug Fixes + +* Angular: Add default value to the budgets property ([#9207](https://github.com/storybookjs/storybook/pull/9207)) +* DocsPage: Fix title with new path separator scheme ([#9204](https://github.com/storybookjs/storybook/pull/9204)) + +### Maintenance + +* CLI: Make template `stories` glob more permissive ([#9224](https://github.com/storybookjs/storybook/pull/9224)) + +## 5.3.0-rc.0 (December 19, 2019) + +### Features + +* CSF: Use `__orderedExports` in loader if provided ([#9181](https://github.com/storybookjs/storybook/pull/9181)) + +### Bug Fixes + +* Addon-a11y: Fix selected blindness color filter ([#9179](https://github.com/storybookjs/storybook/pull/9179)) + +### Maintenance + +* Addon-essentials: Remove actions, links, knobs ([#9184](https://github.com/storybookjs/storybook/pull/9184)) + +## 5.3.0-beta.31 (December 16, 2019) + +### Features + +* React: Add support for CRA without overrides ([#9157](https://github.com/storybookjs/storybook/pull/9157)) +* Addon-docs: Add fontFamily prop to Typeset component ([#9158](https://github.com/storybookjs/storybook/pull/9158)) + +### Bug Fixes + +* Core: Emit store render event synchronously if we can ([#9087](https://github.com/storybookjs/storybook/pull/9087)) + +## 5.3.0-beta.30 (December 16, 2019) + +Failed NPM publish + +## 5.3.0-beta.29 (December 16, 2019) + +Failed NPM publish + +## 5.3.0-beta.28 (December 16, 2019) + +Failed NPM publish + +## 5.3.0-beta.27 (December 16, 2019) + +Failed NPM publish + +## 5.3.0-beta.26 (December 16, 2019) + +Failed NPM publish + +## 5.3.0-beta.25 (December 15, 2019) + +### Bug Fixes + +* Addon-docs: Hide addons on docs-only stories ([#9125](https://github.com/storybookjs/storybook/pull/9125)) + +### Dependency Upgrades + +* Upgrade vue-docgen-loader to 1.3.0-beta.0 ([#9155](https://github.com/storybookjs/storybook/pull/9155)) + +## 5.3.0-beta.24 (December 15, 2019) + +Failed NPM publish + +## 5.3.0-beta.23 (December 14, 2019) + +### Features + +* Addon-docs: Render components as leaves in `--docs` mode ([#7700](https://github.com/storybookjs/storybook/pull/7700)) + +### Bug Fixes + +* Addon-viewport: Allow viewports config to be optional ([#9137](https://github.com/storybookjs/storybook/pull/9137)) + +## 5.3.0-beta.22 (December 12, 2019) + +### Bug Fixes + +* React: Fix CRA preset check ([#9142](https://github.com/storybookjs/storybook/pull/9142)) + +### Maintenance + +* Build: Change CI to chromatic on all examples ([#9114](https://github.com/storybookjs/storybook/pull/9114)) +* Web-components: Clean up example `custom-elements.json` and expose `defaultValue` ([#9107](https://github.com/storybookjs/storybook/pull/9107)) + +### Dependency Upgrades + +* Restore main jscodeshift package ([#9140](https://github.com/storybookjs/storybook/pull/9140)) + +## 5.3.0-beta.21 (December 11, 2019) + +### Features + +* CLI: Add Yarn workspaces support for init command ([#9104](https://github.com/storybookjs/storybook/pull/9104)) + +### Bug Fixes + +* Addon-docs: Update MDX compiler to fix knobs ([#9118](https://github.com/storybookjs/storybook/pull/9118)) +* CLI: Add web-components to sb init ([#9106](https://github.com/storybookjs/storybook/pull/9106)) + +### Maintenance + +* UI: Remove css usage ([#9003](https://github.com/storybookjs/storybook/pull/9003)) + +## 5.3.0-beta.20 (December 9, 2019) + +### Features + +* Addon-essentials: Remove docs from essentials ([#9093](https://github.com/storybookjs/storybook/pull/9093)) + +### Bug Fixes + +* Source-loader: Handle includeStories/excludeStories in CSF ([#9100](https://github.com/storybookjs/storybook/pull/9100)) +* Source-loader: Support function declaration story exports ([#9092](https://github.com/storybookjs/storybook/pull/9092)) + +### Maintenance + +* CSF: Refactor router utils into CSF library ([#9099](https://github.com/storybookjs/storybook/pull/9099)) + +## 5.3.0-beta.19 (December 7, 2019) + +### Features + +* Addon-essentials ([#9019](https://github.com/storybookjs/storybook/pull/9019)) + +### Bug Fixes + +* Addon-docs: Fix prop table default value for web-components ([#9086](https://github.com/storybookjs/storybook/pull/9086)) + ## 5.3.0-beta.18 (December 6, 2019) ### Features diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 2b591ce9d790..9788a94964bf 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -4,7 +4,7 @@ Thanks for your interest in improving Storybook! We are a community-driven proje Please review this document to help to streamline the process and save everyone's precious time. -This repo uses yarn workspaces, so you should install `yarn@1.3.2` or higher as a package manager. See [installation guide](https://yarnpkg.com/en/docs/install). +This repo uses yarn workspaces, so you should install `yarn` as the package manager. See [installation guide](https://yarnpkg.com/en/docs/install). ## Issues @@ -273,7 +273,7 @@ If you run into trouble here, make sure your node, npm, and **_yarn_** are on th _This method is slow_ 1. `yarn bootstrap --all` -2. Have a beer 🍺 +2. Take a break 🍵 3. `yarn test` (to verify everything worked) ### Working with the kitchen sink apps @@ -283,9 +283,10 @@ Within the `examples` folder of the Storybook repo, you will find kitchen sink e Not only do these show many of the options and add-ons available, they are also automatically linked to all the development packages. We highly encourage you to use these to develop/test contributions on. #### React and Vue + 1. `cd examples/official-storybook` -2. `yarn storybook` -3. Verify that your local version works +2. `yarn storybook` +3. Verify that your local version works ### Working with your own app diff --git a/MIGRATION.md b/MIGRATION.md index 93f7f54e39a2..c2cc89444c23 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -2,12 +2,14 @@ - [Migration](#migration) - [From version 5.2.x to 5.3.x](#from-version-52x-to-53x) + - [To main.js configuration](#to-mainjs-configuration) - [Create React App preset](#create-react-app-preset) - [Description doc block](#description-doc-block) - [React Native Async Storage](#react-native-async-storage) - [Deprecate displayName parameter](#deprecate-displayname-parameter) - [Unified docs preset](#unified-docs-preset) - [Simplified hierarchy separators](#simplified-hierarchy-separators) + - [Addon StoryShots Puppeteer uses external puppeteer](#addon-storyshots-puppeteer-uses-external-puppeteer) - [From version 5.1.x to 5.2.x](#from-version-51x-to-52x) - [Source-loader](#source-loader) - [Default viewports](#default-viewports) @@ -76,6 +78,80 @@ ## From version 5.2.x to 5.3.x +### To main.js configuration + +In storybook 5.3 3 new files for configuration were introduced, that replaced some previous files. + +These files are now soft-deprecated, (_they still work, but over time we will promote users to migrate_): + +- `presets.js` has been renamed to `main.js`. `main.js` is the main point of configuration for storybook. +- `config.js` has been renamed to `preview.js`. `preview.js` configures the "preview" iframe that renders your components. +- `addons.js` has been renamed to `manager.js`. `manager.js` configures Storybook's "manager" UI that wraps the preview, and also configures addons panel. + +#### Using main.js + +`main.js` is now the main point of configuration for Storybook. This is what a basic `main.js` looks like: + +```js +module.exports = { + stories: ['../**/*.stories.js'], + addons: ['@storybook/addon-knobs'], +}; +``` + +You remove all "register" import from `addons.js` and place them inside the array. You can also safely remove the `/register` suffix from these entries, for a cleaner, more readable configuration. If this means `addons.js` is now empty for you, it's safe to remove. + +Next you remove the code that imports/requires all your stories from `config.js`, and change it to a glob-pattern and place that glob in the `stories` array. If this means `config.js` is empty, it's safe to remove. + +If you had a `presets.js` file before you can add the array of presets to the main.js file and remove `presets.js` like so: + +```js +module.exports = { + stories: ['../**/*.stories.js'], + addons: [ + '@storybook/preset-create-react-app' + { + name: '@storybook/addon-docs', + options: { configureJSX: true } + } + ], +}; +``` + +By default, adding a package to the `addons` array will first try to load its `preset` entry, then its `register` entry, and finally, it will just assume the package itself is a preset. + +If you want to load a specific package entry, for example you want to use `@storybook/addon-docs/register`, you can also include that in the addons array and Storybook will do the right thing. + +#### Using preview.js + +If after migrating the imports/requires of your stories to `main.js` you're left with some code in `config.js` it's likely the usage of `addParameters` & `addDecorator`. + +This is fine, rename `config.js` to `preview.js`. + +This file can also be used to inject global stylesheets, fonts etc, into the preview bundle. + +#### Using manager.js + +If you are setting storybook options in `config.js`, especially `theme`, you should migrate it to `manager.js`: + +```js +import { addons } from '@storybook/addons'; +import { create } from '@storybook/theming/create'; + +const theme = create({ + base: 'light', + brandTitle: 'My custom title', +}); + +addons.setConfig({ + panelPosition: 'bottom', + theme, +}); +``` + +This makes storybook load and use the theme in the manager directly. +This allows for richer theming in the future, and has a much better performance! + ### Create React App preset You can now move to the new preset for [Create React App](https://create-react-app.dev/). The in-built preset for Create React App will be disabled in Storybook 6.0. @@ -111,6 +187,8 @@ getStorybookUI({ }); ``` +The benefit of using Async Storage is so that when users refresh the app, Storybook can open their last visited story. + ### Deprecate displayName parameter In 5.2, the story parameter `displayName` was introduced as a publicly visible (but internal) API. Storybook's Component Story Format (CSF) loader used it to modify a story's display name independent of the story's `name`/`id` (which were coupled). @@ -134,11 +212,26 @@ yarn sb migrate upgrade-hierarchy-separators --glob="*.stories.js" If you were using `|` and wish to keep the "root" behavior, use the `showRoots: true` option to re-enable roots: ```js -addParameters({ options: { showRoots: true } }); +addParameters({ + options: { + showRoots: true, + }, +}); ``` NOTE: it is no longer possible to have some stories with roots and others without. If you want to keep the old behavior, simply add a root called "Others" to all your previously unrooted stories. +### Addon StoryShots Puppeteer uses external puppeteer + +To give you more control on the Chrome version used when running StoryShots Puppeteer, `puppeteer` is no more included in the addon dependencies. So you can now pick the version of `puppeteer` you want and set it in your project. + +If you want the latest version available just run: +```sh +yarn add puppeteer --dev +OR +npm install puppeteer --save-dev +``` + ## From version 5.1.x to 5.2.x ### Source-loader @@ -187,7 +280,7 @@ For example, here's how to sort by story ID using `storySort`: addParameters({ options: { storySort: (a, b) => - a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, { numeric: true }), + a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }), }, }); ``` diff --git a/README.md b/README.md index 6b44d241b354..6e431acf9e3c 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.
- +

@@ -91,7 +91,7 @@ If you'd rather set up your project manually, take a look at our [Slow Start Gui Once it's installed, you can `npm run storybook` and it will run the development server on your local machine, and give you a URL to browse some sample stories. -**Storybook v2.x migration note**: +**Storybook v2.x migration note**: If you're using Storybook v2.x and want to shift to 4.x version the easiest way is: ```sh @@ -115,7 +115,7 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl | [React Native](app/react-native) | - | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native.svg)](app/react-native) | | [Vue](app/vue) | [v5.1.0](https://storybooks-vue.netlify.com/) | [![Vue](https://img.shields.io/npm/dm/@storybook/vue.svg)](app/vue) | | [Angular](app/angular) | [v5.1.0](https://storybooks-angular.netlify.com/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular.svg)](app/angular) | -| [Polymer](app/polymer) | [v5.1.0](https://storybooks-polymer.netlify.com/) | [![Polymer](https://img.shields.io/npm/dm/@storybook/polymer.svg)](app/polymer) | +| [Marionette.js](app/marionette) | - | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette.svg)](app/marionette) | | [Mithril](app/mithril) | [v5.1.0](https://storybooks-mithril.netlify.com/) | [![Mithril](https://img.shields.io/npm/dm/@storybook/mithril.svg)](app/mithril) | | [Marko](app/marko) | [v5.1.0](https://storybooks-marko.netlify.com/) | [![Marko](https://img.shields.io/npm/dm/@storybook/marko.svg)](app/marko) | | [HTML](app/html) | [v5.1.0](https://storybooks-html.netlify.com/) | [![HTML](https://img.shields.io/npm/dm/@storybook/html.svg)](app/html) | @@ -123,6 +123,7 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl | [Riot](app/riot) | [v5.1.0](https://storybooks-riot.netlify.com/) | [![Riot](https://img.shields.io/npm/dm/@storybook/riot.svg)](app/riot) | | [Ember](app/ember) | [v5.1.0](https://storybooks-ember.netlify.com/) | [![Ember](https://img.shields.io/npm/dm/@storybook/ember.svg)](app/ember) | | [Preact](app/preact) | [v5.1.0](https://storybooks-preact.netlify.com/) | [![Preact](https://img.shields.io/npm/dm/@storybook/preact.svg)](app/preact) | +| [Rax](app/rax) | [v5.1.0](https://storybooks-rax.netlify.com/) | [![Rax](https://img.shields.io/npm/dm/@storybook/rax.svg)](app/rax) | ### Sub Projects diff --git a/ROADMAP.md b/ROADMAP.md index 6a406bc2ccd7..506d84c86d2d 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -9,7 +9,6 @@ + [Add a playground addon](#add-a-playground-addon) + [See multiple (or all) stories in 1 preview.](#see-multiple--or-all--stories-in-1-preview) * [Supporting other frameworks and libraries](#supporting-other-frameworks-and-libraries) - + [Polymer & Webcomponents](#polymer---webcomponents) + [Aurelia](#aurelia) * [Breaking changes](#breaking-changes) + [Addon API](#addon-api) @@ -60,10 +59,6 @@ Unfortunately, if you choose anything not from the list of [supported frameworks We want you to be able to use storybook with the framework / library of your choice. -### Polymer & Webcomponents - -Storybook for Polymer is currently in development and will support custom elements and plain HTML. - ### Aurelia We're reaching out to the Aurelia maintainers to cooperate on this. diff --git a/__mocks__/inject-decorator.ts.csf.txt b/__mocks__/inject-decorator.ts.csf.txt index 47e60534ac87..b3a3d900dccd 100644 --- a/__mocks__/inject-decorator.ts.csf.txt +++ b/__mocks__/inject-decorator.ts.csf.txt @@ -3,7 +3,9 @@ import { action } from "@storybook/addon-actions"; import { Button } from "@storybook/react/demo"; export default { - title: "Button" + title: "Button", + excludeStories: ["text"], + includeStories: /emoji.*/ }; export const text = () => ( @@ -17,3 +19,13 @@ export const emoji = () => ( ); + +export function emojiFn() { + return ( + + ) +}; diff --git a/addons/a11y/README.md b/addons/a11y/README.md index aa141c5c94c1..f4d086fb9f1d 100755 --- a/addons/a11y/README.md +++ b/addons/a11y/README.md @@ -69,6 +69,8 @@ export default { config: {}, // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter) options: {}, + // optional flag to prevent the automatic check + manual: true, }, }, }; diff --git a/addons/a11y/package.json b/addons/a11y/package.json index b490a1512391..33a9e250d308 100644 --- a/addons/a11y/package.json +++ b/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "5.3.0-beta.18", + "version": "6.0.0-alpha.1", "description": "a11y addon for storybook", "keywords": [ "a11y", @@ -22,7 +22,6 @@ "license": "MIT", "files": [ "dist/**/*", - "docs/**/*", "README.md", "*.js", "*.d.ts" @@ -33,12 +32,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.3.0-beta.18", - "@storybook/api": "5.3.0-beta.18", - "@storybook/client-logger": "5.3.0-beta.18", - "@storybook/components": "5.3.0-beta.18", - "@storybook/core-events": "5.3.0-beta.18", - "@storybook/theming": "5.3.0-beta.18", + "@storybook/addons": "6.0.0-alpha.1", + "@storybook/api": "6.0.0-alpha.1", + "@storybook/client-logger": "6.0.0-alpha.1", + "@storybook/components": "6.0.0-alpha.1", + "@storybook/core-events": "6.0.0-alpha.1", + "@storybook/theming": "6.0.0-alpha.1", "axe-core": "^3.3.2", "core-js": "^3.0.1", "global": "^4.3.2", @@ -51,9 +50,11 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "@types/react-redux": "^7.0.6" + "@types/react-redux": "^7.0.6", + "@types/webpack-env": "^1.15.0" }, "publishConfig": { "access": "public" - } + }, + "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff" } diff --git a/addons/a11y/src/components/A11YPanel.test.js b/addons/a11y/src/components/A11YPanel.test.js index 2f84b31afd39..9bc88673ab01 100644 --- a/addons/a11y/src/components/A11YPanel.test.js +++ b/addons/a11y/src/components/A11YPanel.test.js @@ -1,19 +1,18 @@ import React from 'react'; import { mount } from 'enzyme'; +import { EventEmitter } from 'events'; import { ThemeProvider, themes, convert } from '@storybook/theming'; -import { STORY_RENDERED } from '@storybook/core-events'; -import { ScrollArea } from '@storybook/components'; import { A11YPanel } from './A11YPanel'; import { EVENTS } from '../constants'; function createApi() { - return { - emit: jest.fn(), - on: jest.fn(), - off: jest.fn(), - }; + const emitter = new EventEmitter(); + jest.spyOn(emitter, 'emit'); + jest.spyOn(emitter, 'on'); + jest.spyOn(emitter, 'off'); + return emitter; } const axeResult = { @@ -63,7 +62,7 @@ function ThemedA11YPanel(props) { } describe('A11YPanel', () => { - it('should register STORY_RENDERED, RESULT and ERROR updater on mount', () => { + it('should register event listener on mount', () => { // given const api = createApi(); expect(api.on).not.toHaveBeenCalled(); @@ -73,144 +72,91 @@ describe('A11YPanel', () => { // then expect(api.on.mock.calls.length).toBe(3); - expect(api.on.mock.calls[0][0]).toBe(STORY_RENDERED); - expect(api.on.mock.calls[1][0]).toBe(EVENTS.RESULT); - expect(api.on.mock.calls[2][0]).toBe(EVENTS.ERROR); + expect(api.on.mock.calls[0][0]).toBe(EVENTS.RESULT); + expect(api.on.mock.calls[1][0]).toBe(EVENTS.ERROR); + expect(api.on.mock.calls[2][0]).toBe(EVENTS.MANUAL); }); - it('should request a run on tab activation', () => { + it('should deregister event listener on unmount', () => { // given const api = createApi(); - - const wrapper = mount(); - expect(api.emit).not.toHaveBeenCalled(); - - // when - wrapper.setProps({ active: true }); - wrapper.update(); - - // then - expect(api.emit).toHaveBeenCalledWith(EVENTS.REQUEST); - expect(wrapper.find(ScrollArea).length).toBe(0); - }); - - it('should deregister STORY_RENDERED, RESULT and ERROR updater on unmount', () => { - // given - const api = createApi(); - const wrapper = mount(); expect(api.off).not.toHaveBeenCalled(); // when + const wrapper = mount(); wrapper.unmount(); // then expect(api.off.mock.calls.length).toBe(3); - expect(api.off.mock.calls[0][0]).toBe(STORY_RENDERED); - expect(api.off.mock.calls[1][0]).toBe(EVENTS.RESULT); - expect(api.off.mock.calls[2][0]).toBe(EVENTS.ERROR); + expect(api.off.mock.calls[0][0]).toBe(EVENTS.RESULT); + expect(api.off.mock.calls[1][0]).toBe(EVENTS.ERROR); + expect(api.off.mock.calls[2][0]).toBe(EVENTS.MANUAL); }); - it('should update run result', () => { + it('should handle "initial" status', () => { // given const api = createApi(); - const wrapper = mount(); - const onUpdate = api.on.mock.calls.find(([event]) => event === EVENTS.RESULT)[1]; - - expect( - wrapper - .find('button') - .last() - .text() - .trim() - ).toBe('Rerun tests'); // when - onUpdate(axeResult); - - // then - expect( - wrapper - .find('button') - .last() - .text() - .trim() - ).toBe('Tests completed'); - }); - - it('should request run', () => { - // given - const api = createApi(); const wrapper = mount(); - const request = api.on.mock.calls.find(([event]) => event === STORY_RENDERED)[1]; - - expect( - wrapper - .find('button') - .last() - .text() - .trim() - ).toBe('Rerun tests'); - expect(api.emit).not.toHaveBeenCalled(); - - // when - request(); // then - expect( - wrapper - .find('button') - .last() - .text() - .trim() - ).toBe('Running test'); - expect(api.emit).toHaveBeenCalledWith(EVENTS.REQUEST); + expect(api.emit).not.toHaveBeenCalled(); + expect(wrapper.text()).toMatch(/Initializing/); }); - it('should NOT request run on inactive tab', () => { + it('should handle "manual" status', () => { // given const api = createApi(); - mount(); - const request = api.on.mock.calls.find(([event]) => event === STORY_RENDERED)[1]; - expect(api.emit).not.toHaveBeenCalled(); + const wrapper = mount(); // when - request(); + api.emit(EVENTS.MANUAL, true); + wrapper.update(); // then - expect(api.emit).not.toHaveBeenCalled(); + expect(wrapper.text()).toMatch(/Manually run the accessibility scan/); + expect(api.emit).not.toHaveBeenCalledWith(EVENTS.REQUEST); }); - it('should render report', () => { + it('should handle "running" status', () => { // given const api = createApi(); const wrapper = mount(); - const onUpdate = api.on.mock.calls.find(([event]) => event === EVENTS.RESULT)[1]; // when - onUpdate(axeResult); + api.emit(EVENTS.MANUAL, false); + wrapper.update(); // then - expect(wrapper.find(A11YPanel)).toMatchSnapshot(); + expect(wrapper.text()).toMatch(/Please wait while the accessibility scan is running/); + expect(api.emit).toHaveBeenCalledWith(EVENTS.REQUEST); }); - it("should render loader when it's running", () => { + it('should handle "ran" status', () => { // given const api = createApi(); const wrapper = mount(); - const request = api.on.mock.calls.find(([event]) => event === STORY_RENDERED)[1]; // when - request(); + api.emit(EVENTS.RESULT, axeResult); wrapper.update(); // then - expect(wrapper.find('ScrollArea').length).toBe(0); - expect(wrapper.find('Loader').length).toBe(1); - expect(wrapper.find('ActionBar').length).toBe(1); - expect(wrapper.find('Loader')).toMatchSnapshot(); + expect( + wrapper + .find('button') + .last() + .text() + .trim() + ).toBe('Tests completed'); + expect(wrapper.find('Tabs').prop('tabs').length).toBe(3); + expect(wrapper.find('Tabs').prop('tabs')[0].label.props.children).toEqual([1, ' Violations']); + expect(wrapper.find('Tabs').prop('tabs')[1].label.props.children).toEqual([1, ' Passes']); + expect(wrapper.find('Tabs').prop('tabs')[2].label.props.children).toEqual([1, ' Incomplete']); }); - it('should NOT anything when tab is not active', () => { + it('should handle inactive state', () => { // given const api = createApi(); @@ -218,7 +164,7 @@ describe('A11YPanel', () => { const wrapper = mount(); // then - expect(wrapper.find('ScrollArea').length).toBe(0); - expect(wrapper.find('ActionBar').length).toBe(0); + expect(wrapper.text()).toBe(''); + expect(api.emit).not.toHaveBeenCalled(); }); }); diff --git a/addons/a11y/src/components/A11YPanel.tsx b/addons/a11y/src/components/A11YPanel.tsx index 194acca7be6d..de8215a1b6ab 100644 --- a/addons/a11y/src/components/A11YPanel.tsx +++ b/addons/a11y/src/components/A11YPanel.tsx @@ -1,8 +1,8 @@ +/* eslint-disable react/destructuring-assignment,default-case,consistent-return,no-case-declarations */ import React, { Component, Fragment } from 'react'; import { styled } from '@storybook/theming'; -import { STORY_RENDERED } from '@storybook/core-events'; import { ActionBar, Icons, ScrollArea } from '@storybook/components'; import { AxeResults, Result } from 'axe-core'; @@ -20,19 +20,15 @@ export enum RuleType { INCOMPLETION, } -const Icon = styled(Icons)( - { - height: '12px', - width: '12px', - marginRight: '4px', - }, - ({ status, theme }: any) => - status === 'running' - ? { - animation: `${theme.animation.rotate360} 1s linear infinite;`, - } - : {} -); +const Icon = styled(Icons)({ + height: 12, + width: 12, + marginRight: 4, +}); + +const RotatingIcon = styled(Icon)(({ theme }) => ({ + animation: `${theme.animation.rotate360} 1s linear infinite;`, +})); const Passes = styled.span<{}>(({ theme }) => ({ color: theme.color.positive, @@ -46,34 +42,51 @@ const Incomplete = styled.span<{}>(({ theme }) => ({ color: theme.color.warning, })); -const centeredStyle = { +const Centered = styled.span<{}>({ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', -}; - -const Loader = styled(({ className }) => ( -

- Please wait while the accessibility scan is running - ... -
-))(centeredStyle); -Loader.displayName = 'Loader'; - -interface A11YPanelNormalState { - status: 'ready' | 'ran' | 'running'; +}); + +interface InitialState { + status: 'initial'; +} + +interface ManualState { + status: 'manual'; +} + +interface RunningState { + status: 'running'; +} + +interface RanState { + status: 'ran'; passes: Result[]; violations: Result[]; incomplete: Result[]; } -interface A11YPanelErrorState { +interface ReadyState { + status: 'ready'; + passes: Result[]; + violations: Result[]; + incomplete: Result[]; +} + +interface ErrorState { status: 'error'; error: unknown; } -type A11YPanelState = A11YPanelNormalState | A11YPanelErrorState; +type A11YPanelState = + | InitialState + | ManualState + | RunningState + | RanState + | ReadyState + | ErrorState; interface A11YPanelProps { active: boolean; @@ -82,18 +95,15 @@ interface A11YPanelProps { export class A11YPanel extends Component { state: A11YPanelState = { - status: 'ready', - passes: [], - violations: [], - incomplete: [], + status: 'initial', }; componentDidMount() { const { api } = this.props; - api.on(STORY_RENDERED, this.request); - api.on(EVENTS.RESULT, this.onUpdate); + api.on(EVENTS.RESULT, this.onResult); api.on(EVENTS.ERROR, this.onError); + api.on(EVENTS.MANUAL, this.onManual); } componentDidUpdate(prevProps: A11YPanelProps) { @@ -103,18 +113,18 @@ export class A11YPanel extends Component { if (!prevProps.active && active) { // removes all elements from the redux map in store from the previous panel store.dispatch(clearElements()); - this.request(); } } componentWillUnmount() { const { api } = this.props; - api.off(STORY_RENDERED, this.request); - api.off(EVENTS.RESULT, this.onUpdate); + + api.off(EVENTS.RESULT, this.onResult); api.off(EVENTS.ERROR, this.onError); + api.off(EVENTS.MANUAL, this.onManual); } - onUpdate = ({ passes, violations, incomplete }: AxeResults) => { + onResult = ({ passes, violations, incomplete }: AxeResults) => { this.setState( { status: 'ran', @@ -142,64 +152,67 @@ export class A11YPanel extends Component { }); }; - request = () => { - const { api, active } = this.props; - - if (active) { - this.setState( - { - status: 'running', - }, - () => { - api.emit(EVENTS.REQUEST); - // removes all elements from the redux map in store from the previous panel - store.dispatch(clearElements()); - } - ); + onManual = (manual: boolean) => { + if (manual) { + this.setState({ + status: 'manual', + }); + } else { + this.request(); } }; + request = () => { + const { api } = this.props; + this.setState( + { + status: 'running', + }, + () => { + api.emit(EVENTS.REQUEST); + // removes all elements from the redux map in store from the previous panel + store.dispatch(clearElements()); + } + ); + }; + render() { const { active } = this.props; if (!active) return null; - // eslint-disable-next-line react/destructuring-assignment - if (this.state.status === 'error') { - const { error } = this.state; - return ( -
- The accessibility scan encountered an error. -
- {error} -
- ); - } - - const { passes, violations, incomplete, status } = this.state; - - let actionTitle; - if (status === 'ready') { - actionTitle = 'Rerun tests'; - } else if (status === 'running') { - actionTitle = ( - - Running test - - ); - } else if (status === 'ran') { - actionTitle = ( - - Tests completed - - ); - } - - return ( - - - {status === 'running' ? ( - + switch (this.state.status) { + case 'initial': + return Initializing...; + case 'manual': + return ( + + Manually run the accessibility scan. + + + ); + case 'running': + return ( + + Please wait while the accessibility scan is running + ... + + ); + case 'ready': + case 'ran': + const { passes, violations, incomplete, status } = this.state; + const actionTitle = + status === 'ready' ? ( + 'Rerun tests' ) : ( + + Tests completed + + ); + return ( + { ]} /> - )} - - - - ); + + + ); + case 'error': + const { error } = this.state; + return ( + + The accessibility scan encountered an error. +
+ {error} +
+ ); + } } } diff --git a/addons/a11y/src/components/ColorBlindness.tsx b/addons/a11y/src/components/ColorBlindness.tsx index 9d643a797f4a..87e98989513d 100644 --- a/addons/a11y/src/components/ColorBlindness.tsx +++ b/addons/a11y/src/components/ColorBlindness.tsx @@ -18,7 +18,7 @@ const getFilter = (filter: string | null) => { return `url('#${filter}')`; }; -const ColorIcon = styled.span( +const ColorIcon = styled.span<{ filter: string | null }>( { background: 'linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)', borderRadius: '1rem', @@ -26,7 +26,7 @@ const ColorIcon = styled.span( height: '1rem', width: '1rem', }, - ({ filter }: { filter: string | null }) => ({ + ({ filter }) => ({ filter: getFilter(filter), }), ({ theme }) => ({ @@ -80,16 +80,14 @@ const getColorList = (active: string | null, set: (i: string | null) => void): L ]; export const ColorBlindness: FunctionComponent = () => { - const [active, setActiveState] = useState(null); + const [active, setActiveState] = useState(null); const setActive = (activeState: string | null): void => { const iframe = getIframe(); if (iframe) { iframe.style.filter = getFilter(activeState); - setActiveState({ - active: activeState, - }); + setActiveState(activeState); } else { logger.error('Cannot find Storybook iframe'); } diff --git a/addons/a11y/src/components/Report/Elements.tsx b/addons/a11y/src/components/Report/Elements.tsx index ce713ec948a8..d2fc529b8d05 100644 --- a/addons/a11y/src/components/Report/Elements.tsx +++ b/addons/a11y/src/components/Report/Elements.tsx @@ -15,15 +15,15 @@ const ItemTitle = styled.span<{}>(({ theme }) => ({ borderBottom: `1px solid ${theme.appBorderColor}`, width: '100%', display: 'flex', - paddingBottom: '6px', - marginBottom: '6px', + paddingBottom: 6, + marginBottom: 6, justifyContent: 'space-between', })); const HighlightToggleElement = styled.span({ fontWeight: 'normal', alignSelf: 'center', - paddingRight: '15px', + paddingRight: 15, input: { margin: 0 }, }); diff --git a/addons/a11y/src/components/Report/HighlightToggle.tsx b/addons/a11y/src/components/Report/HighlightToggle.tsx index 2aa554641e39..64c4d0cb7123 100644 --- a/addons/a11y/src/components/Report/HighlightToggle.tsx +++ b/addons/a11y/src/components/Report/HighlightToggle.tsx @@ -5,24 +5,24 @@ import { styled, themes, convert } from '@storybook/theming'; import memoize from 'memoizerific'; import { NodeResult } from 'axe-core'; +import { Dispatch } from 'redux'; import { RuleType } from '../A11YPanel'; import { addElement } from '../../redux-config'; import { IFRAME } from '../../constants'; -export class HighlightedElementData { +export interface HighlightedElementData { originalOutline: string; - isHighlighted: boolean; } interface ToggleProps { elementsToHighlight: NodeResult[]; type: RuleType; - addElement?: (data: any) => void; - highlightedElementsMap?: Map; + addElement: (data: any) => void; + highlightedElementsMap: Map; isToggledOn?: boolean; toggleId?: string; - indeterminate?: boolean; + indeterminate: boolean; } enum CheckBoxStates { @@ -48,7 +48,7 @@ function getElementBySelectorPath(elementPath: string): HTMLElement { if (iframe && iframe.contentDocument && elementPath) { return iframe.contentDocument.querySelector(elementPath); } - return null; + return (null as unknown) as HTMLElement; } function setElementOutlineStyle(targetElement: HTMLElement, outlineStyle: string): void { @@ -64,7 +64,7 @@ function areAllRequiredElementsHighlighted( const targetElement = getElementBySelectorPath(item.target[0]); return ( highlightedElementsMap.has(targetElement) && - highlightedElementsMap.get(targetElement).isHighlighted + (highlightedElementsMap.get(targetElement) as HighlightedElementData).isHighlighted ); }).length; @@ -76,7 +76,7 @@ function areAllRequiredElementsHighlighted( : CheckBoxStates.INDETERMINATE; } -function mapDispatchToProps(dispatch: any) { +function mapDispatchToProps(dispatch: Dispatch) { return { addElement: (data: { element: HTMLElement; data: HighlightedElementData }) => dispatch(addElement(data)), @@ -112,7 +112,7 @@ class HighlightToggle extends Component { }); } - componentDidUpdate(prevProps: Readonly): void { + componentDidUpdate(): void { const { indeterminate } = this.props; if (this.checkBoxRef.current) { this.checkBoxRef.current.indeterminate = indeterminate; @@ -126,8 +126,9 @@ class HighlightToggle extends Component { if (!highlightedElementsMap.has(targetElement)) { return; } - const { originalOutline } = highlightedElementsMap.get(targetElement); - const { isHighlighted } = highlightedElementsMap.get(targetElement); + const { originalOutline, isHighlighted } = highlightedElementsMap.get( + targetElement + ) as HighlightedElementData; const { isToggledOn } = this.props; if ((isToggledOn && isHighlighted) || (!isToggledOn && !isHighlighted)) { const addHighlight = !isToggledOn && !isHighlighted; @@ -151,7 +152,7 @@ class HighlightToggle extends Component { if (highlightedElementsMap.has(targetElement)) { setElementOutlineStyle( targetElement, - highlightedElementsMap.get(targetElement).originalOutline + highlightedElementsMap.get(targetElement)!.originalOutline ); } } @@ -162,9 +163,7 @@ class HighlightToggle extends Component { originalOutline: string ): void { const { addElement: localAddElement } = this.props; - const data: HighlightedElementData = new HighlightedElementData(); - data.isHighlighted = isHighlighted; - data.originalOutline = originalOutline; + const data: HighlightedElementData = { isHighlighted, originalOutline }; const payload = { element: targetElement, highlightedElementData: data }; localAddElement(payload); } diff --git a/addons/a11y/src/components/Report/Info.tsx b/addons/a11y/src/components/Report/Info.tsx index 5b1995fe4149..743a617c02f4 100644 --- a/addons/a11y/src/components/Report/Info.tsx +++ b/addons/a11y/src/components/Report/Info.tsx @@ -4,14 +4,14 @@ import { styled } from '@storybook/theming'; import { Result } from 'axe-core'; const Wrapper = styled.div({ - padding: '12px', - marginBottom: '10px', + padding: 12, + marginBottom: 10, }); const Help = styled.p({ margin: '0 0 12px', }); const Link = styled.a({ - marginTop: '12px', + marginTop: 12, textDecoration: 'underline', color: 'inherit', display: 'block', diff --git a/addons/a11y/src/components/Report/Item.tsx b/addons/a11y/src/components/Report/Item.tsx index 9122ff53c674..2ece16f74a15 100644 --- a/addons/a11y/src/components/Report/Item.tsx +++ b/addons/a11y/src/components/Report/Item.tsx @@ -24,7 +24,7 @@ const Icon = styled(Icons)(({ theme }) => ({ width: 10, minWidth: 10, color: theme.color.mediumdark, - marginRight: '10px', + marginRight: 10, transition: 'transform 0.1s ease-in-out', alignSelf: 'center', display: 'inline-flex', @@ -49,7 +49,7 @@ const HeaderBar = styled.div<{}>(({ theme }) => ({ const HighlightToggleElement = styled.span({ fontWeight: 'normal', float: 'right', - marginRight: '15px', + marginRight: 15, alignSelf: 'center', input: { margin: 0 }, }); diff --git a/addons/a11y/src/components/Report/Rules.tsx b/addons/a11y/src/components/Report/Rules.tsx index a7a61c3a6719..b1485ef4fa60 100644 --- a/addons/a11y/src/components/Report/Rules.tsx +++ b/addons/a11y/src/components/Report/Rules.tsx @@ -1,61 +1,41 @@ import React, { FunctionComponent } from 'react'; import { styled } from '@storybook/theming'; -import { Badge, Icons } from '@storybook/components'; +import { Badge } from '@storybook/components'; import { CheckResult } from 'axe-core'; import { SizeMe } from 'react-sizeme'; -import { RuleType } from '../A11YPanel'; - -const impactColors = { - minor: '#f1c40f', - moderate: '#e67e22', - serious: '#e74c3c', - critical: '#c0392b', - success: '#2ecc71', -}; const List = styled.div({ display: 'flex', flexDirection: 'column', - paddingBottom: '4px', - paddingRight: '4px', - paddingTop: '4px', + paddingBottom: 4, + paddingRight: 4, + paddingTop: 4, fontWeight: '400', } as any); -const Item = styled.div(({ elementWidth }: { elementWidth: number }) => { +const Item = styled.div<{ elementWidth: number }>(({ elementWidth }) => { const maxWidthBeforeBreak = 407; return { flexDirection: elementWidth > maxWidthBeforeBreak ? 'row' : 'inherit', - marginBottom: elementWidth > maxWidthBeforeBreak ? '6px' : '12px', + marginBottom: elementWidth > maxWidthBeforeBreak ? 6 : 12, display: elementWidth > maxWidthBeforeBreak ? 'flex' : 'block', }; }); -const StyledBadge = styled(Badge)(({ status }: { status: string }) => ({ +const StyledBadge = styled(Badge)({ padding: '2px 8px', - marginBottom: '3px', - minWidth: '65px', + marginBottom: 3, + minWidth: 65, maxWidth: 'fit-content', width: '100%', textAlign: 'center', -})); +}); const Message = styled.div({ - paddingLeft: '6px', - paddingRight: '23px', + paddingLeft: 6, + paddingRight: 23, }); -const Status = styled.div(({ passes, impact }: { passes: boolean; impact: string }) => ({ - display: 'inline-flex', - justifyContent: 'center', - alignItems: 'center', - color: passes ? impactColors.success : (impactColors as any)[impact], - '& > svg': { - height: '16px', - width: '16px', - }, -})); - export enum ImpactValue { MINOR = 'minor', MODERATE = 'moderate', @@ -94,7 +74,7 @@ const Rule: FunctionComponent = ({ rule }) => { } return ( - {({ size }: { size: any }) => ( + {({ size }: { size: { width: number; height: number } }) => ( {formatSeverityText(rule.impact)} {rule.message} diff --git a/addons/a11y/src/components/Report/Tags.tsx b/addons/a11y/src/components/Report/Tags.tsx index 62968af6aa31..e11245f55620 100644 --- a/addons/a11y/src/components/Report/Tags.tsx +++ b/addons/a11y/src/components/Report/Tags.tsx @@ -11,7 +11,7 @@ const Wrapper = styled.div({ const Item = styled.div<{}>(({ theme }) => ({ margin: '0 6px', - padding: '5px', + padding: 5, border: `1px solid ${theme.appBorderColor}`, borderRadius: theme.appBorderRadius, })); diff --git a/addons/a11y/src/components/Tabs.tsx b/addons/a11y/src/components/Tabs.tsx index 4ebeac7c4900..b16bd1745991 100644 --- a/addons/a11y/src/components/Tabs.tsx +++ b/addons/a11y/src/components/Tabs.tsx @@ -1,6 +1,6 @@ import React, { Component, SyntheticEvent } from 'react'; -import { styled, themes } from '@storybook/theming'; +import { styled } from '@storybook/theming'; import { NodeResult, Result } from 'axe-core'; import { SizeMe } from 'react-sizeme'; import store, { clearElements } from '../redux-config'; @@ -18,12 +18,12 @@ const Container = styled.div({ const HighlightToggleLabel = styled.label<{}>(({ theme }) => ({ cursor: 'pointer', userSelect: 'none', - marginBottom: '3px', - marginRight: '3px', + marginBottom: 3, + marginRight: 3, color: theme.color.dark, })); -const GlobalToggle = styled.div(({ elementWidth }: { elementWidth: number }) => { +const GlobalToggle = styled.div<{ elementWidth: number }>(({ elementWidth }) => { const maxWidthBeforeBreak = 450; return { cursor: 'pointer', @@ -31,7 +31,7 @@ const GlobalToggle = styled.div(({ elementWidth }: { elementWidth: number }) => padding: elementWidth > maxWidthBeforeBreak ? '12px 15px 10px 0' : '12px 0px 3px 12px', height: '40px', border: 'none', - marginTop: elementWidth > maxWidthBeforeBreak ? '-40px' : '0px', + marginTop: elementWidth > maxWidthBeforeBreak ? -40 : 0, float: elementWidth > maxWidthBeforeBreak ? 'right' : 'left', display: elementWidth > maxWidthBeforeBreak ? 'flex' : 'block', alignItems: 'center', @@ -39,15 +39,15 @@ const GlobalToggle = styled.div(({ elementWidth }: { elementWidth: number }) => borderBottom: elementWidth > maxWidthBeforeBreak ? 'none' : '1px solid rgba(0,0,0,.1)', input: { - marginLeft: '10', - marginRight: '0', - marginTop: '0', - marginBottom: '0', + marginLeft: 10, + marginRight: 0, + marginTop: 0, + marginBottom: 0, }, }; }); -const Item = styled.button( +const Item = styled.button<{ active?: boolean }>( ({ theme }) => ({ textDecoration: 'none', padding: '10px 15px', @@ -66,7 +66,7 @@ const Item = styled.button( borderBottom: `3px solid ${theme.color.secondary}`, }, }), - ({ active, theme }: any) => + ({ active, theme }) => active ? { opacity: 1, @@ -99,7 +99,7 @@ interface TabsState { } function retrieveAllNodesFromResults(items: Result[]): NodeResult[] { - return items.reduce((acc, item) => acc.concat(item.nodes), []); + return items.reduce((acc, item) => acc.concat(item.nodes), [] as NodeResult[]); } export class Tabs extends Component { @@ -109,7 +109,7 @@ export class Tabs extends Component { onToggle = (event: SyntheticEvent) => { this.setState({ - active: parseInt(event.currentTarget.getAttribute('data-index'), 10), + active: parseInt(event.currentTarget.getAttribute('data-index') || '', 10), }); // removes all elements from the redux map in store from the previous panel store.dispatch(clearElements()); diff --git a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap b/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap deleted file mode 100644 index f4267e78d817..000000000000 --- a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap +++ /dev/null @@ -1,1126 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`A11YPanel should render loader when it's running 1`] = ` -@keyframes animation-0 { - from { - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg); - transform: rotate(0deg); - } - - to { - -webkit-transform: rotate(360deg); - -ms-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -.emotion-4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - height: 100%; -} - -.emotion-2 { - height: 12px; - width: 12px; - margin-right: 4px; - -webkit-animation: animation-0 1s linear infinite; - animation: animation-0 1s linear infinite; -} - -.emotion-1 { - shape-rendering: inherit; - -webkit-transform: translate3d(0,0,0); - -ms-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); - display: inline-block; - height: 12px; - width: 12px; - margin-right: 4px; - -webkit-animation: animation-0 1s linear infinite; - animation: animation-0 1s linear infinite; -} - -.emotion-0 { - fill: currentColor; -} - - - -
- - - - - - - - - - - - Please wait while the accessibility scan is running ... -
-
-
-`; - -exports[`A11YPanel should render report 1`] = ` -.emotion-0 { - overflow-y: auto; - height: 100%; - overflow-x: auto; - width: 100%; -} - -.emotion-4 { - position: absolute; - bottom: 0; - right: 0; - max-width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background: #FFFFFF; - z-index: 1; -} - -.emotion-3 { - border: 0 none; - padding: 4px 10px; - cursor: pointer; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: #333333; - background: #FFFFFF; - font-size: 12px; - line-height: 16px; - font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; - font-weight: 700; - border-top: 1px solid rgba(0,0,0,.1); - border-left: 1px solid rgba(0,0,0,.1); - margin-left: -1px; - border-radius: 4px 0 0 0; -} - -.emotion-3:not(:last-child) { - border-right: 1px solid rgba(0,0,0,.1); -} - -.emotion-3 + * { - border-left: 1px solid rgba(0,0,0,.1); - border-radius: 0; -} - -.emotion-3:focus { - box-shadow: #1EA7FD 0 -3px 0 0 inset; - outline: 0 none; -} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - , - "ctr": 35, - "isSpeedy": false, - "key": "css", - "nonce": undefined, - "tags": Array [ - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - ], - }, - } - } - serialized={ - Object { - "map": undefined, - "name": "nh5djz", - "next": undefined, - "styles": "[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}.simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}.simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}.simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0;}.simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}.simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}.simplebar-scrollbar:before{position:absolute;content:\\"\\";border-radius:7px;left:0;right:0;opacity:0;transition:opacity 0.2s linear;background:#333333;}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;transition:opacity 0s linear;}.simplebar-track.simplebar-vertical{top:0;width:11px;}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}.simplebar-track.simplebar-horizontal{left:0;height:11px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}[data-simplebar-direction=\\"rtl\\"] .simplebar-track.simplebar-vertical{right:auto;left:0;}", - "toString": [Function], - } - } - /> - - - - -
-
-
-
-
-
-
-
-
- - 0 - Violations - , - "panel": , - "type": 0, - }, - Object { - "items": Array [], - "label": - 0 - Passes - , - "panel": , - "type": 1, - }, - Object { - "items": Array [], - "label": - 0 - Incomplete - , - "panel": , - "type": 2, - }, - ] - } - > - - - - - -
- - - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - - -
- - - -
-
-
- - -`; diff --git a/addons/a11y/src/constants.ts b/addons/a11y/src/constants.ts index efabac7a268b..79ef7446a159 100755 --- a/addons/a11y/src/constants.ts +++ b/addons/a11y/src/constants.ts @@ -7,5 +7,6 @@ export const CLEAR_ELEMENTS = 'CLEAR_ELEMENTS'; const RESULT = `${ADDON_ID}/result`; const REQUEST = `${ADDON_ID}/request`; const ERROR = `${ADDON_ID}/error`; +const MANUAL = `${ADDON_ID}/manual`; -export const EVENTS = { RESULT, REQUEST, ERROR }; +export const EVENTS = { RESULT, REQUEST, ERROR, MANUAL }; diff --git a/addons/a11y/src/index.ts b/addons/a11y/src/index.ts index a7f53ec29a73..f96d86cb0d07 100644 --- a/addons/a11y/src/index.ts +++ b/addons/a11y/src/index.ts @@ -11,8 +11,10 @@ interface Setup { element?: ElementContext; config: Spec; options: RunOptions; + manual: boolean; } -let setup: Setup = { element: null, config: {}, options: {} }; + +let setup: Setup = { element: undefined, config: {}, options: {}, manual: false }; const getElement = () => { const storyRoot = document.getElementById('story-root'); @@ -58,12 +60,16 @@ export const withA11y = makeDecorator({ if (storedDefaultSetup === null) { storedDefaultSetup = { ...setup }; } - Object.assign(setup, parameters as Setup); + Object.assign(setup, parameters as Partial); } else if (storedDefaultSetup !== null) { Object.assign(setup, storedDefaultSetup); storedDefaultSetup = null; } - addons.getChannel().on(EVENTS.REQUEST, () => run(setup.element, setup.config, setup.options)); + + addons + .getChannel() + .on(EVENTS.REQUEST, () => run(setup.element as ElementContext, setup.config, setup.options)); + addons.getChannel().emit(EVENTS.MANUAL, setup.manual); return getStory(context); }, diff --git a/addons/a11y/tsconfig.json b/addons/a11y/tsconfig.json index 8876bb6737a1..99a91ffc487b 100644 --- a/addons/a11y/tsconfig.json +++ b/addons/a11y/tsconfig.json @@ -2,7 +2,13 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": ["webpack-env"] + "types": ["webpack-env"], + "forceConsistentCasingInFileNames": true, + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true }, "include": [ "src/**/*" diff --git a/addons/actions/package.json b/addons/actions/package.json index 0d292d2f7eea..2da10d047445 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "5.3.0-beta.18", + "version": "6.0.0-alpha.1", "description": "Action Logger addon for storybook", "keywords": [ "storybook" @@ -17,7 +17,6 @@ "license": "MIT", "files": [ "dist/**/*", - "docs/**/*", "README.md", "*.js", "*.d.ts" @@ -28,12 +27,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.3.0-beta.18", - "@storybook/api": "5.3.0-beta.18", - "@storybook/client-api": "5.3.0-beta.18", - "@storybook/components": "5.3.0-beta.18", - "@storybook/core-events": "5.3.0-beta.18", - "@storybook/theming": "5.3.0-beta.18", + "@storybook/addons": "6.0.0-alpha.1", + "@storybook/api": "6.0.0-alpha.1", + "@storybook/client-api": "6.0.0-alpha.1", + "@storybook/components": "6.0.0-alpha.1", + "@storybook/core-events": "6.0.0-alpha.1", + "@storybook/theming": "6.0.0-alpha.1", "core-js": "^3.0.1", "fast-deep-equal": "^2.0.1", "global": "^4.3.2", @@ -45,9 +44,11 @@ }, "devDependencies": { "@types/lodash": "^4.14.149", - "@types/uuid": "^3.4.4" + "@types/uuid": "^3.4.4", + "@types/webpack-env": "^1.15.0" }, "publishConfig": { "access": "public" - } + }, + "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff" } diff --git a/addons/actions/src/components/ActionLogger/style.tsx b/addons/actions/src/components/ActionLogger/style.tsx index 54abfbec1566..450e407a697c 100644 --- a/addons/actions/src/components/ActionLogger/style.tsx +++ b/addons/actions/src/components/ActionLogger/style.tsx @@ -3,7 +3,7 @@ import { opacify } from 'polished'; export const Action = styled.div({ display: 'flex', - padding: '0', + padding: 0, borderLeft: '5px solid transparent', borderBottom: '1px solid transparent', transition: 'all 0.1s', @@ -17,7 +17,7 @@ export const Counter = styled.div<{}>(({ theme }) => ({ fontWeight: theme.typography.weight.bold, lineHeight: 1, padding: '1px 5px', - borderRadius: '20px', + borderRadius: 20, margin: '2px 0px', })); diff --git a/addons/backgrounds/README.md b/addons/backgrounds/README.md index 05ca7d1b5446..fe8554429f64 100644 --- a/addons/backgrounds/README.md +++ b/addons/backgrounds/README.md @@ -73,7 +73,7 @@ export const defaultView = () => ( ); defaultView.story = { parameters: { - background: [ + backgrounds: [ { name: 'red', value: 'rgba(255, 0, 0)' }, ], }, @@ -94,7 +94,7 @@ export const noBackgrounds = () => ( ); noBackgrounds.story = { parameters: { - background: [], + backgrounds: [], }, }; @@ -103,7 +103,7 @@ export const disabledBackgrounds = () => ( ); disabledBackgrounds.story = { parameters: { - background: { disabled: true }, + backgrounds: { disabled: true }, }, }; ``` diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json index 408a0e43f4e6..038f36a8cf24 100644 --- a/addons/backgrounds/package.json +++ b/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "5.3.0-beta.18", + "version": "6.0.0-alpha.1", "description": "A storybook addon to show different backgrounds for your preview", "keywords": [ "addon", @@ -21,7 +21,6 @@ "author": "jbaxleyiii", "files": [ "dist/**/*", - "docs/**/*", "README.md", "*.js", "*.d.ts" @@ -32,21 +31,23 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.3.0-beta.18", - "@storybook/api": "5.3.0-beta.18", - "@storybook/client-logger": "5.3.0-beta.18", - "@storybook/components": "5.3.0-beta.18", - "@storybook/core-events": "5.3.0-beta.18", - "@storybook/theming": "5.3.0-beta.18", + "@storybook/addons": "6.0.0-alpha.1", + "@storybook/api": "6.0.0-alpha.1", + "@storybook/client-logger": "6.0.0-alpha.1", + "@storybook/components": "6.0.0-alpha.1", + "@storybook/core-events": "6.0.0-alpha.1", + "@storybook/theming": "6.0.0-alpha.1", "core-js": "^3.0.1", "memoizerific": "^1.11.3", "react": "^16.8.3", "util-deprecate": "^1.0.2" }, "devDependencies": { - "@types/util-deprecate": "^1.0.0" + "@types/util-deprecate": "^1.0.0", + "@types/webpack-env": "^1.15.0" }, "publishConfig": { "access": "public" - } + }, + "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff" } diff --git a/addons/centered/package.json b/addons/centered/package.json index d4d95df8471a..dc4de5ed806f 100644 --- a/addons/centered/package.json +++ b/addons/centered/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-centered", - "version": "5.3.0-beta.18", + "version": "6.0.0-alpha.1", "description": "Storybook decorator to center components", "keywords": [ "addon", @@ -29,15 +29,17 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.3.0-beta.18", + "@storybook/addons": "6.0.0-alpha.1", "core-js": "^3.0.1", "global": "^4.3.2", "util-deprecate": "^1.0.2" }, "devDependencies": { "@types/mithril": "^1.1.16", + "@types/webpack-env": "^1.15.0", "mithril": "*", "preact": "*", "react": "*" - } + }, + "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff" } diff --git a/addons/contexts/README.md b/addons/contexts/README.md index 34d98fa61e59..7a3f55afb418 100644 --- a/addons/contexts/README.md +++ b/addons/contexts/README.md @@ -109,8 +109,8 @@ export const contexts = [ ], params: [ // an array of params contains a set of predefined `props` for `components` - { name: 'Light Theme', props: { theme /* : your dark theme */ } }, - { name: 'Dark Theme', props: { theme /* : your light theme */ }, default: true }, + { name: 'Light Theme', props: { theme /* : your light theme */ } }, + { name: 'Dark Theme', props: { theme /* : your dark theme */ }, default: true }, ], options: { deep: true, // pass the `props` deeply into all wrapping components diff --git a/addons/contexts/package.json b/addons/contexts/package.json index b452c75ebf4f..e66ce7ab651a 100644 --- a/addons/contexts/package.json +++ b/addons/contexts/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-contexts", - "version": "5.3.0-beta.18", + "version": "6.0.0-alpha.1", "description": "Storybook Addon Contexts", "keywords": [ "preact", @@ -27,10 +27,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.3.0-beta.18", - "@storybook/api": "5.3.0-beta.18", - "@storybook/components": "5.3.0-beta.18", - "@storybook/core-events": "5.3.0-beta.18", + "@storybook/addons": "6.0.0-alpha.1", + "@storybook/api": "6.0.0-alpha.1", + "@storybook/components": "6.0.0-alpha.1", + "@storybook/core-events": "6.0.0-alpha.1", "core-js": "^3.0.1", "global": "^4.3.2", "qs": "^6.6.0" @@ -39,10 +39,12 @@ "global": "*", "preact": "*", "qs": "*", + "rax": "*", "react": "*", "vue": "*" }, "publishConfig": { "access": "public" - } + }, + "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff" } diff --git a/addons/contexts/rax.js b/addons/contexts/rax.js new file mode 100644 index 000000000000..06abd7467f83 --- /dev/null +++ b/addons/contexts/rax.js @@ -0,0 +1,4 @@ +import { withContexts } from './dist/preview/frameworks/rax'; + +export { withContexts }; +export default withContexts; diff --git a/addons/contexts/src/preview/frameworks/rax.ts b/addons/contexts/src/preview/frameworks/rax.ts new file mode 100644 index 000000000000..0748a7d7f7cf --- /dev/null +++ b/addons/contexts/src/preview/frameworks/rax.ts @@ -0,0 +1,14 @@ +import { createElement, RaxElement } from 'rax'; +import { createAddonDecorator, Render } from '../../index'; +import { ContextsPreviewAPI } from '../ContextsPreviewAPI'; + +/** + * This is the framework specific bindings for Rax. + * '@storybook/rax' expects the returning object from a decorator to be a 'Rax Element' (vNode). + */ +export const renderRax: Render> = (contextNodes, propsMap, getStoryVNode) => { + const { getRendererFrom } = ContextsPreviewAPI(); + return getRendererFrom(createElement)(contextNodes, propsMap, getStoryVNode); +}; + +export const withContexts = createAddonDecorator(renderRax); diff --git a/addons/cssresources/package.json b/addons/cssresources/package.json index 272751e8f5fa..eb46b7573594 100644 --- a/addons/cssresources/package.json +++ b/addons/cssresources/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-cssresources", - "version": "5.3.0-beta.18", + "version": "6.0.0-alpha.1", "description": "A storybook addon to switch between css resources at runtime for your story", "keywords": [ "addon", @@ -21,7 +21,6 @@ "author": "nm123github", "files": [ "dist/**/*", - "docs/**/*", "README.md", "*.js", "*.d.ts" @@ -32,18 +31,23 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.3.0-beta.18", - "@storybook/api": "5.3.0-beta.18", - "@storybook/components": "5.3.0-beta.18", - "@storybook/core-events": "5.3.0-beta.18", + "@storybook/addons": "6.0.0-alpha.1", + "@storybook/api": "6.0.0-alpha.1", + "@storybook/components": "6.0.0-alpha.1", + "@storybook/core-events": "6.0.0-alpha.1", + "@storybook/theming": "6.0.0-alpha.1", "core-js": "^3.0.1", "global": "^4.3.2", "react": "^16.8.3" }, + "devDependencies": { + "@types/webpack-env": "^1.15.0" + }, "peerDependencies": { "react": "*" }, "publishConfig": { "access": "public" - } + }, + "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff" } diff --git a/addons/cssresources/src/css-resource-panel.tsx b/addons/cssresources/src/css-resource-panel.tsx index ef0be6e19bb2..2db8391fa7f6 100644 --- a/addons/cssresources/src/css-resource-panel.tsx +++ b/addons/cssresources/src/css-resource-panel.tsx @@ -1,7 +1,8 @@ import React, { Component, Fragment } from 'react'; -import { SyntaxHighlighter } from '@storybook/components'; +import { SyntaxHighlighter, Placeholder, Spaced, Icons } from '@storybook/components'; import { STORY_RENDERED } from '@storybook/core-events'; import { API } from '@storybook/api'; +import { styled } from '@storybook/theming'; import { EVENTS, PARAM_KEY } from './constants'; import { CssResource } from './CssResource'; @@ -20,6 +21,27 @@ interface CssResourceLookup { [key: string]: CssResource; } +const maxLimitToUseSyntaxHighlighter = 100000; + +const PlainCode = styled.pre({ + textAlign: 'left', + fontWeight: 'normal', +}); + +const Warning = styled.div({ + display: 'flex', + padding: '10px', + justifyContent: 'center', + alignItems: 'center', + background: '#fff3cd', + fontSize: 12, + '& svg': { + marginRight: 10, + width: 24, + height: 24, + }, +}); + export class CssResourcePanel extends Component { constructor(props: Props) { super(props); @@ -96,7 +118,20 @@ export class CssResourcePanel extends Component { #{id} - {code ? {code} : null} + {code && code.length < maxLimitToUseSyntaxHighlighter && ( + {code} + )} + {code && code.length >= maxLimitToUseSyntaxHighlighter && ( + + + {code.substring(0, maxLimitToUseSyntaxHighlighter)} ... + + + Rest of the content cannot be displayed + + + + )}
))}
diff --git a/addons/design-assets/package.json b/addons/design-assets/package.json index f685de55c874..d2f2c6df5fdf 100644 --- a/addons/design-assets/package.json +++ b/addons/design-assets/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-design-assets", - "version": "5.3.0-beta.18", + "version": "6.0.0-alpha.1", "description": "Design asset preview for storybook", "keywords": [ "addon", @@ -23,7 +23,6 @@ "license": "MIT", "files": [ "dist/**/*", - "docs/**/*", "README.md", "*.js", "*.d.ts" @@ -34,12 +33,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.3.0-beta.18", - "@storybook/api": "5.3.0-beta.18", - "@storybook/client-logger": "5.3.0-beta.18", - "@storybook/components": "5.3.0-beta.18", - "@storybook/core-events": "5.3.0-beta.18", - "@storybook/theming": "5.3.0-beta.18", + "@storybook/addons": "6.0.0-alpha.1", + "@storybook/api": "6.0.0-alpha.1", + "@storybook/client-logger": "6.0.0-alpha.1", + "@storybook/components": "6.0.0-alpha.1", + "@storybook/core-events": "6.0.0-alpha.1", + "@storybook/theming": "6.0.0-alpha.1", "core-js": "^3.0.1", "global": "^4.3.2", "react": "^16.8.3", @@ -48,5 +47,6 @@ }, "publishConfig": { "access": "public" - } + }, + "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff" } diff --git a/addons/docs/README.md b/addons/docs/README.md index 59458a690b77..1276d5f2c299 100644 --- a/addons/docs/README.md +++ b/addons/docs/README.md @@ -4,6 +4,8 @@ # Storybook Docs +> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. + Storybook Docs transforms your Storybook stories into world-class component documentation. **DocsPage.** Out of the box, all your stories get a `DocsPage`. `DocsPage` is a zero-config aggregation of your component stories, text descriptions, docgen comments, props tables, and code examples into clean, readable pages. @@ -77,16 +79,16 @@ For more information on `MDX`, see the [`MDX` reference](./docs/mdx.md). Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some framework-specific features as well, such as props tables and inline story rendering. This chart captures the current state of support: -| | React | Vue | Angular | HTML | [Web Components](./web-components) | Svelte | Polymer | Marko | Mithril | Riot | Ember | Preact | -| ----------------- | :---: | :-: | :-----: | :--: | :--------------------------------: | :----: | :-----: | :---: | :-----: | :--: | :---: | :----: | -| MDX stories | + | + | + | + | + | + | + | + | + | + | + | + | -| CSF stories | + | + | + | + | + | + | + | + | + | + | + | + | -| StoriesOf stories | + | + | + | + | + | + | + | + | + | + | + | + | -| Source | + | + | + | + | + | + | + | + | + | + | + | + | -| Notes / Info | + | + | + | + | + | + | + | + | + | + | + | + | -| Props table | + | + | # | | + | | | | | | | | -| Description | + | + | # | | + | | | | | | | | -| Inline stories | + | + | | | + | | | | | | | | +| | React | Vue | Angular | Ember | Web Components | HTML | Svelte | Preact | Riot | Mithril | Marko | +| ----------------- | :---: | :-: | :-----: | :---: | :------------: | :--: | :----: | :----: | :--: | :-----: | :---: | +| MDX stories | + | + | + | + | + | + | + | + | + | + | + | +| CSF stories | + | + | + | + | + | + | + | + | + | + | + | +| StoriesOf stories | + | + | + | + | + | + | + | + | + | + | + | +| Source | + | + | + | + | + | + | + | + | + | + | + | +| Notes / Info | + | + | + | + | + | + | + | + | + | + | + | +| Props table | + | + | + | + | + | | | | | | | +| Description | + | + | + | + | + | | | | | | | +| Inline stories | + | + | | | + | | | | | | | **Note:** `#` = WIP support @@ -110,8 +112,8 @@ Then add the following to your `.storybook/main.js`: ```js module.exports = { - presets: ['@storybook/addon-docs/preset'], - stories: ['../src/**/*/stories.(js|mdx)'], + stories: ['../src/**/*.stories.(js|mdx)'], + addons: ['@storybook/addon-docs'], }; ``` @@ -131,8 +133,10 @@ Add the following to your Jest configuration: ### Be sure to check framework specific installation needs -- [Angular](./angular) +- [React](./react) (covered here) - [Vue](./vue) +- [Angular](./angular) +- [Ember](./ember) - [Web Components](./web-components) ## Preset options @@ -141,9 +145,9 @@ The `addon-docs` preset has a few configuration options that can be used to conf ```js module.exports = { - presets: [ + addons: [ { - name: '@storybook/addon-docs/preset', + name: '@storybook/addon-docs', options: { configureJSX: true, babelOptions: {}, @@ -154,29 +158,26 @@ module.exports = { }; ``` -The `configureJsx` option is useful when you're writing your docs in MDX and your project's babel config isn't already set up to handle JSX files. `babelOptions` is a way to further configure the babel processor when you're using `configureJSX`. +The `configureJSX` option is useful when you're writing your docs in MDX and your project's babel config isn't already set up to handle JSX files. `babelOptions` is a way to further configure the babel processor when you're using `configureJSX`. `sourceLoaderOptions` is an object for configuring `@storybook/source-loader`. When set to `null` it tells docs not to run the `source-loader` at all, which can be used as an optimization, or if you're already using `source-loader` in your `main.js`. ## Manual configuration -If you don't want to use the preset, and prefer to configure "the long way", first register the addon in `.storybook/main.js`: - -```js -module.exports = { - addons: ['@storybook/addon-docs/register'] -}; -``` - - -Then configure Storybook's webpack loader in `.storybook/main.js` to understand MDX story files and annotate TS/JS story files with source code using `source-loader`: +If you don't want to use the preset, and prefer to configure "the long way" add the following configuration to `.storybook/main.js` (see comments inline for explanation): ```js const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin'); module.exports = { - webpack: async config => { + // 1. register the docs panel (as opposed to '@storybook/addon-docs' which + // will configure everything with a preset) + addons: ['@storybook/addon-docs/register'], + // 2. manually configure webpack, since you're not using the preset + webpackFinal: async config => { config.module.rules.push({ + // 2a. Load `.stories.mdx` / `.story.mdx` files as CSF and generate + // the docs page from the markdown test: /\.(stories|story)\.mdx$/, use: [ { @@ -194,6 +195,8 @@ module.exports = { }, ], }); + // 2b. Run `source-loader` on story files to show their source code + // automatically in `DocsPage` or the `Source` doc block. config.module.rules.push({ test: /\.(stories|story)\.[tj]sx?$/, loader: require.resolve('@storybook/source-loader'), @@ -201,7 +204,7 @@ module.exports = { enforce: 'pre', }); return config; - } + }, }; ``` diff --git a/addons/docs/angular/README.md b/addons/docs/angular/README.md index 3648eda12040..5783d26dfcaa 100644 --- a/addons/docs/angular/README.md +++ b/addons/docs/angular/README.md @@ -4,6 +4,8 @@ # Storybook Docs for Angular +> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. + Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for Angular supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs. To learn more about Storybook Docs, read the [general documentation](../README.md). To learn the Angular specifics, read on! @@ -22,10 +24,12 @@ First add the package. Make sure that the versions for your `@storybook/*` packa yarn add -D @storybook/addon-docs@next ``` -Then add the following to your `.storybook/presets.js` exports: +Then add the following to your `.storybook/main.js` exports: ```js -module.exports = ['@storybook/addon-docs/preset']; +module.exports = { + addons: ['@storybook/addon-docs'], +}; ``` ## DocsPage @@ -55,7 +59,7 @@ Then you'll need to configure Compodoc to generate a `documentation.json` file. Unfortunately, it's not currently possible to update this dynamically as you edit your components, but [there's an open issue](https://github.com/storybookjs/storybook/issues/8672) to support this with improvements to Compodoc. -Next, add the following to your `.storybook/config.json` to load the Compodoc-generated file: +Next, add the following to `.storybook/preview.ts` to load the Compodoc-generated file: ```js import { setCompodocJson } from '@storybook/addon-docs/angular'; @@ -95,10 +99,12 @@ Docs has peer dependencies on `react`, `react-is`, and `babel-loader`. If you wa yarn add -D react react-is babel-loader ``` -Then update your `.storybook/config.ts` to make sure you load MDX files: +Then update your `.storybook/main.js` to make sure you load MDX files: ```ts -configure(require.context('../src/stories', true, /\.stories\.(ts|mdx)$/), module); +module.exports = { + stories: ['../src/stories/**/*.stories.(js|mdx)'], +}; ``` Finally, you can create MDX files like this: @@ -131,7 +137,7 @@ Also, to use the `Props` doc block, you need to set up Compodoc, [as described a Storybook Docs renders all Angular stories inside IFrames, with a default height of `60px`. You can update this default globally, or modify the IFrame height locally per story in `DocsPage` and `MDX`. -To update the global default, modify `.storybook/config.ts`: +To update the global default, modify `.storybook/preview.ts`: ```ts import { addParameters } from '@storybook/angular'; diff --git a/addons/docs/docs/docspage.md b/addons/docs/docs/docspage.md index 7a51bdab5a8f..048bfa9de52e 100644 --- a/addons/docs/docs/docspage.md +++ b/addons/docs/docs/docspage.md @@ -1,18 +1,28 @@
- +
# Storybook DocsPage When you install [Storybook Docs](../README.md), `DocsPage` is the zero-config default documentation that all stories get out of the box. It aggregates your stories, text descriptions, docgen comments, props tables, and code examples into a single page for each component. -- [Motivation](#motivation) -- [Component parameter](#component-parameter) -- [Subcomponents parameter](#subcomponents-parameter) -- [DocsPage slots](#docspage-slots) -- [Replacing DocsPage](#replacing-docspage) -- [Story file names](#story-file-names) -- [More resources](#more-resources) +- [Storybook DocsPage](#storybook-docspage) + - [Motivation](#motivation) + - [Component parameter](#component-parameter) + - [Subcomponents parameter](#subcomponents-parameter) + - [DocsPage slots](#docspage-slots) + - [Slot values](#slot-values) + - [Title](#title) + - [Subtitle](#subtitle) + - [Description](#description) + - [Primary](#primary) + - [Props](#props) + - [Stories](#stories) + - [Slot functions](#slot-functions) + - [Replacing DocsPage](#replacing-docspage) + - [Story file names](#story-file-names) + - [Inline stories vs. Iframe stories](#inline-stories-vs-iframe-stories) + - [More resources](#more-resources) ## Motivation @@ -80,7 +90,7 @@ If you want organize your documentation differently for groups of components, we `DocsPage` is organized into a series of "slots" including Title, Subtitle, Description, Props, and Story. Each of these slots pulls information from your project and formats it for the screen.
- +
## Slot values diff --git a/addons/docs/docs/faq.md b/addons/docs/docs/faq.md index 871d80643a01..e7592c3e2aa0 100644 --- a/addons/docs/docs/faq.md +++ b/addons/docs/docs/faq.md @@ -10,7 +10,7 @@ You've read the [Storybook Docs README](../README.md). You're already familiar w ## Does Docs support framework X? -Docs does not currently support [React Native](https://github.com/storybooks/storybook/tree/next/app/react-native). Otherwise, [it supports all frameworks that Storybook supports](../README.md#framework-support), including React, Vue, Angular, Ember, Svelte, Polymer, and others. +Docs does not currently support [React Native](https://github.com/storybooks/storybook/tree/next/app/react-native). Otherwise, [it supports all frameworks that Storybook supports](../README.md#framework-support), including React, Vue, Angular, Ember, Svelte, and others. ## How does Docs interact with existing addons? @@ -19,7 +19,7 @@ Currently we hide the addons panel when docs is visible. It's tricky because all ## How do I debug my MDX story?
- +
> "My story renders in docs, but doesn’t show up the way I’d expect in the Canvas” @@ -37,7 +37,7 @@ For example, the following MDX story: Shows up in the dev tools as follows:
- +
This is [Component Story Format (CSF)](https://medium.com/storybookjs/component-story-format-66f4c32366df), so there are ways to debug. You can copy and paste this code into a new `.stories.js` file and play around with it at a lower level to understand what's going wrong. diff --git a/addons/docs/docs/mdx.md b/addons/docs/docs/mdx.md index c3dc2c570015..0d65a34044c3 100644 --- a/addons/docs/docs/mdx.md +++ b/addons/docs/docs/mdx.md @@ -1,21 +1,20 @@
- +
# Storybook Docs MDX -> ⚠️ MDX support is an experimental feature in Storybook 5.2. The API may change in 5.3 outside of the normal semver rules. Be forewarned! - `MDX` is the syntax [Storybook Docs](../README.md) uses to capture long-form markdown documentation and stories in one file. You can also write pure documentation pages in `MDX` and add them to Storybook alongside your stories. -- [Basic example](#basic-example) -- [MDX-Flavored CSF](#mdx-flavored-csf) -- [Writing stories](#writing-stories) -- [Embedding stories](#embedding-stories) -- [Decorators and parameters](#decorators-and-parameters) -- [Documentation-only MDX](#documentation-only-mdx) -- [MDX file names](#mdx-file-names) -- [More resources](#more-resources) +- [Storybook Docs MDX](#storybook-docs-mdx) + - [Basic example](#basic-example) + - [MDX-Flavored CSF](#mdx-flavored-csf) + - [Writing stories](#writing-stories) + - [Embedding stories](#embedding-stories) + - [Decorators and parameters](#decorators-and-parameters) + - [Documentation-only MDX](#documentation-only-mdx) + - [MDX file names](#mdx-file-names) + - [More resources](#more-resources) ## Basic example @@ -46,7 +45,7 @@ markdown documentation. And here's how that's rendered in Storybook:
- +
As you can see there's a lot going on here. We're writing Markdown, we're writing JSX, and somehow we're also defining Storybook stories that are drop-in compatible with the entire Storybook ecosystem. @@ -130,7 +129,7 @@ with unique URLs and isolated snapshot tests. And here's how that gets rendered in Storybook:
- +
## Embedding stories @@ -185,7 +184,7 @@ If you don't define a `Meta`, you can write Markdown and associate with an exist To get a "documentation-only story", in your UI, define a `` as you normally would, but don't define any stories. It will show up in your UI as a documentation node:
- +
## MDX file names diff --git a/addons/docs/docs/recipes.md b/addons/docs/docs/recipes.md index 427b11a5eb91..ead017f8b047 100644 --- a/addons/docs/docs/recipes.md +++ b/addons/docs/docs/recipes.md @@ -76,9 +76,7 @@ And I can also embed arbitrary markdown & JSX in this file. What's happening here: - Your stories are defined in CSF, but because of `includeStories: []`, they are not actually added to Storybook. -- The MDX file is adding the stories to Storybook, and using the story function defined in CSF. -- The MDX loader is using story metadata from CSF, such as name, decorators, parameters, but will give giving preference to anything defined in the MDX file. -- The MDX file is using the Meta `default` defined in the CSF. +- The MDX file is simply importing stories as functions in the MDX, and other aspects of the CSF file, such as decorators, parameters, and any other metadata should be applied as needed in the MDX from the import. ## CSF Stories with arbitrary MDX diff --git a/addons/docs/ember/README.md b/addons/docs/ember/README.md index 7ab9a8d345b6..375b8b0de3e6 100644 --- a/addons/docs/ember/README.md +++ b/addons/docs/ember/README.md @@ -1,5 +1,7 @@ # Storybook Docs for Ember +> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. + Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for Ember supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs. To learn more about Storybook Docs, read the [general documentation](../README.md). To learn the Ember specifics, read on! @@ -18,10 +20,12 @@ First add the package. Make sure that the versions for your `@storybook/*` packa yarn add -D @storybook/addon-docs@next ``` -Then add the following to your `.storybook/presets.js` exports: +Then add the following to your `.storybook/main.js` addons: ```js -module.exports = ['@storybook/addon-docs/preset']; +module.exports = { + addons: ['@storybook/addon-docs'], +}; ``` ## DocsPage @@ -31,16 +35,16 @@ When you [install docs](#installation) you should get basic [DocsPage](../docs/d Props tables for your components requires a few more steps. Docs for Ember relies on [@storybook/ember-cli-storybook addon](https://github.com/storybookjs/ember-cli-storybook), to extract documentation comments from your component source files. If you're using Storybook with Ember, you should already have this addon installed, you will just need to enable it by adding the following config block in your `ember-cli-build.js` file: ```js - let app = new EmberApp(defaults, { - 'ember-cli-storybook': { - enableAddonDocsIntegration: true - } - }); +let app = new EmberApp(defaults, { + 'ember-cli-storybook': { + enableAddonDocsIntegration: true, + }, +}); ``` Now, running the ember-cli server will generate a JSON documentation file at `/storybook-docgen/index.json`. Since generation of this file is tied into the ember-cli build, it will get regenerated everytime component files are saved. For details on documenting your components, check out the examples in the addon that powers the generation [ember-cli-addon-docs-yuidoc](https://github.com/ember-learn/ember-cli-addon-docs-yuidoc#documenting-components). -Next, add the following to your `.storybook/config.js` to load the generated json file: +Next, add the following to your `.storybook/preview.js` to load the generated json file: ```js import { setJSONDoc } from '@storybook/addon-docs/ember'; @@ -77,18 +81,19 @@ Docs has peer dependencies on `react`, `react-is`, and `babel-loader`. If you wa yarn add -D react react-is babel-loader ``` -Then update your `.storybook/config.js` to make sure you load MDX files: +Then update your `.storybook/main.js` to make sure you load MDX files: -```ts -configure(require.context('../src/stories', true, /\.stories\.(js|mdx)$/), module); +```js +module.exports = { + stories: ['../src/stories/**/*.stories.(js|mdx)'], +}; ``` Finally, you can create MDX files like this: ```md import { Meta, Story, Props } from '@storybook/addon-docs/blocks'; -import hbs from 'htmlbars-inline-precompile' - +import { hbs } from 'ember-cli-htmlbars'; @@ -98,7 +103,7 @@ Some **markdown** description, or whatever you want. {{ template: hbs``, - context: { title: "Title" }, +context: { title: "Title" }, }} ## Props @@ -114,7 +119,7 @@ Also, to use the `Props` doc block, you need to set up documentation generation, Storybook Docs renders all Ember stories inside `iframe`s, with a default height of `60px`. You can update this default globally, or modify the `iframe` height locally per story in `DocsPage` and `MDX`. -To update the global default, modify `.storybook/config.js`: +To update the global default, modify `.storybook/preview.js`: ```ts import { addParameters } from '@storybook/ember'; diff --git a/addons/docs/package.json b/addons/docs/package.json index b203f519d4b8..5c4031947ad1 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "5.3.0-beta.18", + "version": "6.0.0-alpha.1", "description": "Superior documentation for your components", "keywords": [ "addon", @@ -19,9 +19,9 @@ "license": "MIT", "files": [ "dist/**/*", - "docs/**/*", "angular/**/*", "common/**/*", + "ember/**/*", "html/**/*", "postinstall/**/*", "react/**/*", @@ -45,13 +45,14 @@ "@mdx-js/loader": "^1.5.1", "@mdx-js/mdx": "^1.5.1", "@mdx-js/react": "^1.5.1", - "@storybook/addons": "5.3.0-beta.18", - "@storybook/api": "5.3.0-beta.18", - "@storybook/components": "5.3.0-beta.18", - "@storybook/postinstall": "5.3.0-beta.18", - "@storybook/router": "5.3.0-beta.18", - "@storybook/source-loader": "5.3.0-beta.18", - "@storybook/theming": "5.3.0-beta.18", + "@storybook/addons": "6.0.0-alpha.1", + "@storybook/api": "6.0.0-alpha.1", + "@storybook/components": "6.0.0-alpha.1", + "@storybook/core-events": "6.0.0-alpha.1", + "@storybook/csf": "0.0.1", + "@storybook/postinstall": "6.0.0-alpha.1", + "@storybook/source-loader": "6.0.0-alpha.1", + "@storybook/theming": "6.0.0-alpha.1", "acorn": "^7.1.0", "acorn-jsx": "^5.1.0", "acorn-walk": "^7.0.0", @@ -69,7 +70,7 @@ "ts-dedent": "^1.1.0", "util-deprecate": "^1.0.2", "vue-docgen-api": "^4.1.0", - "vue-docgen-loader": "^1.2.0" + "vue-docgen-loader": "^1.3.0-beta.0" }, "devDependencies": { "@types/doctrine": "^0.0.3", @@ -77,7 +78,6 @@ "@types/jest": "^24.0.11", "@types/prop-types": "^15.5.9", "@types/util-deprecate": "^1.0.0", - "@types/webpack-env": "^1.14.0", "jest-specific-snapshot": "^2.0.0" }, "peerDependencies": { @@ -87,5 +87,6 @@ }, "publishConfig": { "access": "public" - } + }, + "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff" } diff --git a/addons/docs/react/README.md b/addons/docs/react/README.md new file mode 100644 index 000000000000..55d74e526abf --- /dev/null +++ b/addons/docs/react/README.md @@ -0,0 +1,122 @@ +
+ +
+ +# Storybook Docs for React + +> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. + +Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for React supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs. + +To learn more about Storybook Docs, read the [general documentation](../README.md). To learn the React specifics, read on! + +- [Installation](#installation) +- [DocsPage](#docspage) +- [MDX](#mdx) +- [Inline stories](#inline-stories) +- [More resources](#more-resources) + +## Installation + +First add the package. Make sure that the versions for your `@storybook/*` packages match: + +```sh +yarn add -D @storybook/addon-docs@next +``` + +Then add the following to your `.storybook/main.js` list of `addons`: + +```js +module.exports = { + // other settings + addons: ['@storybook/addon-docs']; +} +``` + +## DocsPage + +When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI. + +To show the props table for your component, be sure to fill in the `component` field in your story metadata: + +```ts +import { Button } from './Button'; + +export default { + title: 'Button', + component: Button, +}; +``` + +If you haven't upgraded from `storiesOf`, you can use a parameter to do the same thing: + +```ts +import { storiesOf } from '@storybook/react'; +import { Button } from './Button'; + +storiesOf('InfoButton', module) + .addParameters({ component: Button }) + .add( ... ); +``` + +## MDX + +[MDX](../docs/mdx.md) is a convenient way to document your components in Markdown and embed documentation components, such as stories and props tables, inline. + +Docs has peer dependencies on `react`, `react-is`, and `babel-loader`. If you want to write stories in MDX, you may need to add these dependencies as well: + +```sh +yarn add -D react react-is babel-loader +``` + +Then update your `.storybook/main.js` to make sure you load MDX files: + +```js +module.exports = { + stories: ['../src/stories/**/*.stories.(js|mdx)'], +}; +``` + +Finally, you can create MDX files like this: + +```md +import { Meta, Story, Props } from '@storybook/addon-docs/blocks'; +import { Button } from './Button'; + + + +# Button + +Some **markdown** description, or whatever you want. + + + + + +## Props + + +``` + +## Inline Stories + +Storybook Docs renders all React stories inline on the page by default. If you want to render stories in an `iframe` so that they are better isolated. To do this, update `.storybook/preview.js`: + +```js +import { addParameters } from '@storybook/react'; + +addParameters({ + docs: { + inlineStories: false, + }, +}); +``` + +## More resources + +Want to learn more? Here are some more articles on Storybook Docs: + +- References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md) +- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) +- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) +- Example: [Storybook Design System](https://github.com/storybookjs/design-system) diff --git a/addons/docs/src/blocks/DocsContainer.tsx b/addons/docs/src/blocks/DocsContainer.tsx index cedf8e18f4de..bc536a2361c2 100644 --- a/addons/docs/src/blocks/DocsContainer.tsx +++ b/addons/docs/src/blocks/DocsContainer.tsx @@ -29,7 +29,12 @@ export const DocsContainer: FunctionComponent = ({ context, const allComponents = { ...defaultComponents, ...userComponents }; useEffect(() => { - const url = new URL(window.parent.location); + let url; + try { + url = new URL(window.parent.location); + } catch (err) { + return; + } if (url.hash) { const element = document.getElementById(url.hash.substring(1)); if (element) { diff --git a/addons/docs/src/blocks/DocsContext.ts b/addons/docs/src/blocks/DocsContext.ts index a900ed260773..1babaafdddd6 100644 --- a/addons/docs/src/blocks/DocsContext.ts +++ b/addons/docs/src/blocks/DocsContext.ts @@ -6,11 +6,12 @@ export interface DocsContextProps { selectedStory?: string; /** - * mdxStoryNameToId is an MDX-compiler-generated mapping of an MDX story's - * display name to its storyId. It's used internally by the `` - * doc block. + * mdxStoryNameToKey is an MDX-compiler-generated mapping of an MDX story's + * display name to its story key for ID generation. It's used internally by the `` + * and `Preview` doc blocks. */ - mdxStoryNameToId?: Record; + mdxStoryNameToKey?: Record; + mdxComponentMeta?: any; parameters?: any; storyStore?: any; forceRender?: () => void; diff --git a/addons/docs/src/blocks/DocsPage.test.ts b/addons/docs/src/blocks/DocsPage.test.ts index 11294b76bb7b..92e7264a40cf 100644 --- a/addons/docs/src/blocks/DocsPage.test.ts +++ b/addons/docs/src/blocks/DocsPage.test.ts @@ -15,4 +15,10 @@ describe('defaultTitleSlot', () => { expect(defaultTitleSlot({ selectedKind: 'a|b', parameters })).toBe('b'); expect(defaultTitleSlot({ selectedKind: 'a/b/c.d', parameters })).toBe('d'); }); + it('empty options', () => { + const parameters = { options: {} }; + expect(defaultTitleSlot({ selectedKind: 'a/b/c', parameters })).toBe('c'); + expect(defaultTitleSlot({ selectedKind: 'a|b', parameters })).toBe('b'); + expect(defaultTitleSlot({ selectedKind: 'a/b/c.d', parameters })).toBe('d'); + }); }); diff --git a/addons/docs/src/blocks/Meta.tsx b/addons/docs/src/blocks/Meta.tsx index 49d43ae83b0a..b4416cf4cb9f 100644 --- a/addons/docs/src/blocks/Meta.tsx +++ b/addons/docs/src/blocks/Meta.tsx @@ -1,4 +1,8 @@ -import { FunctionComponent } from 'react'; +import React, { FC, useContext } from 'react'; +import { document } from 'global'; +import { Anchor } from './Anchor'; +import { DocsContext, DocsContextProps } from './DocsContext'; +import { getDocsStories } from './utils'; type Decorator = (...args: any) => any; @@ -9,9 +13,27 @@ interface MetaProps { parameters?: any; } +function getFirstStoryId(docsContext: DocsContextProps): string { + const stories = getDocsStories(docsContext); + + return stories.length > 0 ? stories[0].id : null; +} + +function renderAnchor() { + const context = useContext(DocsContext); + // eslint-disable-next-line react/destructuring-assignment + const anchorId = getFirstStoryId(context) || context.id; + + return ; +} + /** * This component is used to declare component metadata in docs * and gets transformed into a default export underneath the hood. - * It doesn't actually render anything. */ -export const Meta: FunctionComponent = props => null; +export const Meta: FC = () => { + const params = new URL(document.location).searchParams; + const isDocs = params.get('viewMode') === 'docs'; + + return isDocs ? renderAnchor() : null; +}; diff --git a/addons/docs/src/blocks/Preview.tsx b/addons/docs/src/blocks/Preview.tsx index e108414ea738..05f4cada390b 100644 --- a/addons/docs/src/blocks/Preview.tsx +++ b/addons/docs/src/blocks/Preview.tsx @@ -1,4 +1,5 @@ import React, { FunctionComponent, ReactElement, ReactNode, ReactNodeArray } from 'react'; +import { toId, storyNameFromExport } from '@storybook/csf'; import { Preview as PurePreview, PreviewProps as PurePreviewProps } from '@storybook/components'; import { getSourceProps } from './Source'; import { DocsContext, DocsContextProps } from './DocsContext'; @@ -21,7 +22,7 @@ const getPreviewProps = ( children, ...props }: PreviewProps & { children?: ReactNode }, - { mdxStoryNameToId, storyStore }: DocsContextProps + { mdxStoryNameToKey, mdxComponentMeta, storyStore }: DocsContextProps ): PurePreviewProps => { if (withSource === SourceState.NONE) { return props; @@ -36,7 +37,14 @@ const getPreviewProps = ( const stories = childArray.filter( (c: ReactElement) => c.props && (c.props.id || c.props.name) ) as ReactElement[]; - const targetIds = stories.map(s => s.props.id || mdxStoryNameToId[s.props.name]); + const targetIds = stories.map( + s => + s.props.id || + toId( + mdxComponentMeta.id || mdxComponentMeta.title, + storyNameFromExport(mdxStoryNameToKey[s.props.name]) + ) + ); const sourceProps = getSourceProps({ ids: targetIds }, { storyStore }); return { ...props, // pass through columns etc. diff --git a/addons/docs/src/blocks/Stories.tsx b/addons/docs/src/blocks/Stories.tsx index c1b585e82db7..77b299035a1e 100644 --- a/addons/docs/src/blocks/Stories.tsx +++ b/addons/docs/src/blocks/Stories.tsx @@ -17,7 +17,7 @@ export const Stories: FunctionComponent = ({ slot, title }) => { const stories: DocsStoryProps[] = slot ? slot(componentStories, context) : componentStories && componentStories.slice(1); - if (!stories) { + if (!stories || stories.length === 0) { return null; } return ( diff --git a/addons/docs/src/blocks/Story.tsx b/addons/docs/src/blocks/Story.tsx index f9a4902b08f4..71bb693dd36e 100644 --- a/addons/docs/src/blocks/Story.tsx +++ b/addons/docs/src/blocks/Story.tsx @@ -2,6 +2,7 @@ import React, { createElement, ElementType, FunctionComponent, ReactNode } from import { MDXProvider } from '@mdx-js/react'; import { components as docsComponents } from '@storybook/components/html'; import { Story, StoryProps as PureStoryProps } from '@storybook/components'; +import { toId, storyNameFromExport } from '@storybook/csf'; import { CURRENT_SELECTION } from './shared'; import { DocsContext, DocsContextProps } from './DocsContext'; @@ -40,12 +41,17 @@ const inferInlineStories = (framework: string): boolean => { export const getStoryProps = ( props: StoryProps, - { id: currentId, storyStore, parameters, mdxStoryNameToId }: DocsContextProps | null + { id: currentId, storyStore, mdxStoryNameToKey, mdxComponentMeta }: DocsContextProps | null ): PureStoryProps => { const { id } = props as StoryRefProps; const { name } = props as StoryDefProps; const inputId = id === CURRENT_SELECTION ? currentId : id; - const previewId = inputId || mdxStoryNameToId[name]; + const previewId = + inputId || + toId( + mdxComponentMeta.id || mdxComponentMeta.title, + storyNameFromExport(mdxStoryNameToKey[name]) + ); const { height, inline } = props; const data = storyStore.fromId(previewId); diff --git a/addons/docs/src/blocks/Title.tsx b/addons/docs/src/blocks/Title.tsx index a670600d6e21..bbc4533bb61e 100644 --- a/addons/docs/src/blocks/Title.tsx +++ b/addons/docs/src/blocks/Title.tsx @@ -1,5 +1,5 @@ import React, { useContext, FunctionComponent } from 'react'; -import { parseKind } from '@storybook/router'; +import { parseKind } from '@storybook/csf'; import { Title as PureTitle } from '@storybook/components'; import { DocsContext } from './DocsContext'; import { StringSlot } from './shared'; @@ -11,13 +11,9 @@ interface TitleProps { export const defaultTitleSlot: StringSlot = ({ selectedKind, parameters }) => { const { showRoots, - hierarchyRootSeparator: rootSeparator, - hierarchySeparator: groupSeparator, - } = (parameters && parameters.options) || { - showRoots: undefined, - hierarchyRootSeparator: '|', - hierarchySeparator: /\/|\./, - }; + hierarchyRootSeparator: rootSeparator = '|', + hierarchySeparator: groupSeparator = /\/|\./, + } = (parameters && parameters.options) || {}; let groups; if (typeof showRoots !== 'undefined') { diff --git a/addons/docs/src/blocks/mdx.tsx b/addons/docs/src/blocks/mdx.tsx index 40f8eda8e20e..473ee8a57ee8 100644 --- a/addons/docs/src/blocks/mdx.tsx +++ b/addons/docs/src/blocks/mdx.tsx @@ -1,14 +1,19 @@ import React, { FC, SyntheticEvent } from 'react'; +import addons from '@storybook/addons'; import { Source } from '@storybook/components'; +import { NAVIGATE_URL } from '@storybook/core-events'; import { Code, components } from '@storybook/components/html'; -import { document, window } from 'global'; -import { isNil } from 'lodash'; +import { document } from 'global'; import { styled } from '@storybook/theming'; import { DocsContext, DocsContextProps } from './DocsContext'; -import { scrollToElement } from './utils'; -// Hacky utility for dealing with functions or values in MDX Story elements -export const makeStoryFn = (val: any) => (typeof val === 'function' ? val : () => val); +// Hacky utility for asserting identifiers in MDX Story elements +export const assertIsFn = (val: any) => { + if (typeof val !== 'function') { + throw new Error(`Expected story function, got: ${val}`); + } + return val; +}; // Hacky utilty for adding mdxStoryToId to the default context export const AddContext: FC = props => { @@ -43,11 +48,8 @@ export const CodeOrSourceMdx: FC = ({ className, children, ); }; -function generateHrefWithHash(hash: string): string { - const url = new URL(window.parent.location); - const href = `${url.origin}/${url.search}#${hash}`; - - return href; +function navigate(url: string) { + addons.getChannel().emit(NAVIGATE_URL, url); } // @ts-ignore @@ -60,14 +62,12 @@ interface AnchorInPageProps { const AnchorInPage: FC = ({ hash, children }) => ( { - event.preventDefault(); - - const hashValue = hash.substring(1); - const element = document.getElementById(hashValue); - if (!isNil(element)) { - window.parent.history.replaceState(null, '', generateHrefWithHash(hashValue)); - scrollToElement(element); + const id = hash.substring(1); + const element = document.getElementById(id); + if (element) { + navigate(hash); } }} > @@ -83,7 +83,7 @@ interface AnchorMdxProps { export const AnchorMdx: FC = props => { const { href, target, children, ...rest } = props; - if (!isNil(href)) { + if (href) { // Enable scrolling for in-page anchors. if (href.startsWith('#')) { return {children}; @@ -91,11 +91,16 @@ export const AnchorMdx: FC = props => { // Links to other pages of SB should use the base URL of the top level iframe instead of the base URL of the preview iframe. if (target !== '_blank') { - const parentUrl = new URL(window.parent.location.href); - const newHref = `${parentUrl.origin}${href}`; - return ( - + { + event.preventDefault(); + navigate(href); + }} + target={target} + {...rest} + > {children} ); @@ -144,17 +149,19 @@ const HeaderWithOcticonAnchor: FC = ({ }) => { // @ts-ignore const OcticonHeader = OcticonHeaders[as]; + const hash = `#${id}`; return (