diff --git a/addons/knobs/package.json b/addons/knobs/package.json index ed83c3299920..eaff01546323 100644 --- a/addons/knobs/package.json +++ b/addons/knobs/package.json @@ -51,7 +51,7 @@ "devDependencies": { "@types/escape-html": "0.0.20", "@types/react-lifecycles-compat": "^3.0.1", - "@types/react-select": "^3.0.4" + "@types/react-select": "^2.0.19" }, "peerDependencies": { "react": "*" diff --git a/addons/notes/README.md b/addons/notes/README.md index 944bd28d45ec..c0d5082e1401 100644 --- a/addons/notes/README.md +++ b/addons/notes/README.md @@ -44,6 +44,18 @@ export default { }; ``` +### Upgrading to CSF Format + +Add `notes` to the `parameters` object: + +```js +export default { + parameters: { + notes: 'My notes', + } +} +``` + ## Using Markdown Using Markdown in your notes is supported, Storybook will load Markdown as raw by default. diff --git a/addons/storysource/theming-light-dark.png b/addons/storysource/theming-light-dark.png new file mode 100644 index 000000000000..d2689c690a37 Binary files /dev/null and b/addons/storysource/theming-light-dark.png differ diff --git a/app/react/package.json b/app/react/package.json index 031a7a971484..642b416ed216 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -33,7 +33,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@babel/plugin-transform-react-constant-elements": "^7.2.0", + "@babel/plugin-transform-react-constant-elements": "^7.6.3", "@babel/preset-flow": "^7.0.0", "@babel/preset-react": "^7.0.0", "@storybook/addons": "5.3.0-rc.13", diff --git a/app/riot/package.json b/app/riot/package.json index 024ff3ee65be..957fc8fe4c26 100644 --- a/app/riot/package.json +++ b/app/riot/package.json @@ -41,10 +41,10 @@ "ts-dedent": "^1.1.0" }, "devDependencies": { - "@babel/plugin-transform-modules-commonjs": "^7.2.0", - "@babel/preset-env": "^7.4.1", + "@babel/plugin-transform-modules-commonjs": "^7.7.0", + "@babel/preset-env": "^7.7.1", "@babel/preset-flow": "^7.0.0", - "@babel/preset-react": "^7.0.0" + "@babel/preset-react": "^7.7.0" }, "peerDependencies": { "babel-loader": "^7.0.0 || ^8.0.0", diff --git a/docs/src/pages/basics/writing-stories/index.md b/docs/src/pages/basics/writing-stories/index.md index 6edbbcc82dbb..81c2d669e9a5 100644 --- a/docs/src/pages/basics/writing-stories/index.md +++ b/docs/src/pages/basics/writing-stories/index.md @@ -164,7 +164,7 @@ const loaderFn = () => { configure(loaderFn, module); ``` -Storybook uses Webpack's [require.context](https://webpack.js.org/guides/dependency-management/#require-context) to load modules dynamically. Take a look at the relevant Webpack [docs](https://webpack.js.org/guides/dependency-management/#require-context) to learn more about how to use `require.context`. +Storybook uses Webpack's [require.context](https://webpack.js.org/guides/dependency-management/#requirecontext) to load modules dynamically. Take a look at the relevant Webpack [docs](https://webpack.js.org/guides/dependency-management/#requirecontext) to learn more about how to use `require.context`. If you are using the `storiesOf` API directly, or are using `@storybook/react-native` where CSF is unavailable, you should use a loader function with **no return value**: diff --git a/docs/src/pages/configurations/theming/index.md b/docs/src/pages/configurations/theming/index.md index c02a8698c8e6..6ef0ac0d23a2 100644 --- a/docs/src/pages/configurations/theming/index.md +++ b/docs/src/pages/configurations/theming/index.md @@ -23,6 +23,8 @@ addons.setConfig({ ``` +> `addParameters` needs to be called before `configure()` method or it won't have any effect. + When setting a theme, set a full theme object. The theme is replaced, not combined. Read on for more on how to create your own theme. diff --git a/docs/src/pages/guides/guide-ember/index.md b/docs/src/pages/guides/guide-ember/index.md index 20454b21081d..4f96574a813a 100644 --- a/docs/src/pages/guides/guide-ember/index.md +++ b/docs/src/pages/guides/guide-ember/index.md @@ -42,7 +42,7 @@ Then add the following NPM script to your `package.json` in order to start the s ```json { "scripts": { - "build-storybook": "ember build && build-storybook -p 9001 -s dist", + "build-storybook": "ember build && build-storybook -s dist", "storybook": "ember serve & start-storybook -p 9001 -s dist" } } diff --git a/docs/src/pages/guides/guide-svelte/index.md b/docs/src/pages/guides/guide-svelte/index.md index 66d612774739..bdda69b48404 100644 --- a/docs/src/pages/guides/guide-svelte/index.md +++ b/docs/src/pages/guides/guide-svelte/index.md @@ -104,7 +104,7 @@ So you can create a story "view" file, which is essentially a .svelte file to lo {buttonText} - + ``` In this example, the `on:click` that is heard on the `MyButton` component is passed up to the containing component `MyButtonView` using the svelte shorthand. diff --git a/docs/src/pages/presets/preset-gallery/index.md b/docs/src/pages/presets/preset-gallery/index.md index daead0aa4277..6203a94ce42a 100644 --- a/docs/src/pages/presets/preset-gallery/index.md +++ b/docs/src/pages/presets/preset-gallery/index.md @@ -25,6 +25,10 @@ One-line SCSS configuration for Storybook. One-line AntDesign configuration for Storybook. +### [AntDesign](https://github.com/storybookjs/presets/tree/master/packages/preset-ant-design) + +One-line AntDesign configuration for storybook. + ## Community presets There are no community presets available yet. Check back here or edit this page to add yours. diff --git a/docs/src/versions/latest.json b/docs/src/versions/latest.json index e81ba33cc81f..dc2087228b71 100644 --- a/docs/src/versions/latest.json +++ b/docs/src/versions/latest.json @@ -1 +1 @@ -{"version":"5.2.0-alpha.23","info":{"plain":"Storybook 5.1 is a juicy upgrade including:\n\n- 📱 Mobile: Standalone package architecture for React Native\n- 🎟 A11y addon: Realtime accessibility checks and visual feedback\n- 🛠 Context addon: New UI for themes, internationalization, & more\n- 🎛 Presets: One-line configuration for babel, webpack, & addons\n\n5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.1.0-alpha.*`, `5.1.0-beta.*`, and `5.1.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."}} \ No newline at end of file +{"version":"5.2.8","info":{"plain":"### Bug Fixes\n\n* UI: Fix layout of Preview container ([#8628](https://github.com/storybookjs/storybook/pull/8628))\n* Core: Use `stable` package to ensure story sorting is stable ([#8795](https://github.com/storybookjs/storybook/pull/8795))\n* Source-loader: Warn if applied to non-stories file ([#8773](https://github.com/storybookjs/storybook/pull/8773))"}} \ No newline at end of file diff --git a/examples-native/crna-kitchen-sink/package.json b/examples-native/crna-kitchen-sink/package.json index be152bf93570..1c9cdc93b447 100644 --- a/examples-native/crna-kitchen-sink/package.json +++ b/examples-native/crna-kitchen-sink/package.json @@ -29,7 +29,7 @@ "whatwg-fetch": "^3.0.0" }, "devDependencies": { - "@babel/core": "^7.2.2", + "@babel/core": "^7.7.2", "@babel/plugin-transform-react-jsx-source": "^7.2.0", "@storybook/addon-actions": "5.3.0-rc.13", "@storybook/addon-knobs": "5.3.0-rc.13", diff --git a/examples/official-storybook/stories/addon-docs/forward-ref.stories.js b/examples/official-storybook/stories/addon-docs/forward-ref.stories.js new file mode 100644 index 000000000000..f6f2b2a2d968 --- /dev/null +++ b/examples/official-storybook/stories/addon-docs/forward-ref.stories.js @@ -0,0 +1,13 @@ +import React from 'react'; +import { DocgenButton } from '../../components/DocgenButton'; + +const ForwardedButton = React.forwardRef((props, ref) => ); + +export default { + title: 'Addons|Docs/ForwardRef', + component: ForwardedButton, + parameters: { chromatic: { disable: true } }, +}; + +export const displaysCorrectly = () => Hello World!; +displaysCorrectly.story = { name: 'Displays forwarded ref components correctly' }; diff --git a/examples/official-storybook/stories/addon-docs/react-memo.stories.js b/examples/official-storybook/stories/addon-docs/react-memo.stories.js new file mode 100644 index 000000000000..f91bcc18851e --- /dev/null +++ b/examples/official-storybook/stories/addon-docs/react-memo.stories.js @@ -0,0 +1,13 @@ +import React from 'react'; +import { DocgenButton } from '../../components/DocgenButton'; + +const ButtonWithMemo = React.memo(props => ); + +export default { + title: 'Addons|Docs/ButtonWithMemo', + component: ButtonWithMemo, + parameters: { chromatic: { disable: true } }, +}; + +export const displaysCorrectly = () => Hello World!; +displaysCorrectly.story = { name: 'Displays components with memo correctly' }; diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/core-errors.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/core-errors.stories.storyshot new file mode 100644 index 000000000000..d68a8ab769c4 --- /dev/null +++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/core-errors.stories.storyshot @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Core|Errors Null Error 1`] = ``; diff --git a/examples/vue-kitchen-sink/src/stories/core-errors.stories.js b/examples/vue-kitchen-sink/src/stories/core-errors.stories.js new file mode 100644 index 000000000000..400376dde08f --- /dev/null +++ b/examples/vue-kitchen-sink/src/stories/core-errors.stories.js @@ -0,0 +1,11 @@ +export default { + title: 'Core|Errors', + parameters: { chromatic: { disable: true } }, +}; + +export const throwsError = () => { + throw new Error('foo'); +}; +throwsError.story = { parameters: { storyshots: { disable: true } } }; + +export const nullError = () => null; diff --git a/lib/codemod/src/lib/utils.js b/lib/codemod/src/lib/utils.js index c16dd0592522..d1de7ae7ecc9 100644 --- a/lib/codemod/src/lib/utils.js +++ b/lib/codemod/src/lib/utils.js @@ -7,5 +7,9 @@ export const sanitizeName = name => { if (/^\d/.test(key)) { key = `_${key}`; } + // prepend _ if name starts with a digit + if (/^\d/.test(key)) { + key = `_${key}`; + } return key; }; diff --git a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/digit.output.js b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/digit.output.js new file mode 100644 index 000000000000..0dfb48fb260d --- /dev/null +++ b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/digit.output.js @@ -0,0 +1,5 @@ +export default { + title: 'bar', +}; + +export const _1 = () =>