diff --git a/.circleci/config.yml b/.circleci/config.yml index 97a1f443f23..94662b9b9e2 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -200,6 +200,25 @@ jobs: command: | cd examples-native/crna-kitchen-sink yarn storybook --smoke-test + frontpage: + <<: *defaults + steps: + - checkout + - restore_cache: + name: Restore core dependencies cache + keys: + - core-dependencies-v3-{{ checksum "yarn.lock" }} + - run: + name: Install dependencies + command: yarn install + - run: + name: Trigger build + command: ./scripts/build-frontpage.js + - save_cache: + name: Cache core dependencies + key: core-dependencies-v3-{{ checksum "yarn.lock" }} + paths: + - ~/.cache/yarn docs: <<: *defaults steps: @@ -288,6 +307,7 @@ workflows: jobs: - build - docs + - frontpage - lint: requires: - docs diff --git a/.eslintignore b/.eslintignore index 76cb54f8b1e..909aea6b614 100644 --- a/.eslintignore +++ b/.eslintignore @@ -18,3 +18,8 @@ lib/cli/test !.eslintrc-markdown.js !.jest.config.js !.storybook + +REACT_NATIVE +examples-native +react-native +ondevice-* \ No newline at end of file diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Build_2.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Build_2.kt index e5654291060..ff46ba3b0e1 100644 --- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Build_2.kt +++ b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Build_2.kt @@ -39,6 +39,7 @@ object OpenSourceProjects_Storybook_Build_2 : BuildType({ } retryBuild { delaySeconds = 60 + enabled = false } finishBuildTrigger { enabled = false diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_CliTestLatestCra.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_CliTestLatestCra.kt index b593d0ff9c1..83df8e13baa 100644 --- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_CliTestLatestCra.kt +++ b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_CliTestLatestCra.kt @@ -43,7 +43,9 @@ object OpenSourceProjects_Storybook_CliTestLatestCra : BuildType({ +:next """.trimIndent() } - retryBuild {} + retryBuild { + enabled = false + } } features { diff --git a/CHANGELOG.md b/CHANGELOG.md index 3b09a97e799..bd41469f381 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,109 @@ +## 5.1.0-alpha.0 (March 6, 2019) + +### Features + +* UI: Custom scrollbars ([#5714](https://github.com/storybooks/storybook/pull/5714)) + +### Bug Fixes + +* Fix: Move `react-select` dependency to 2.2 ([#5867](https://github.com/storybooks/storybook/pull/5867)) + +### Maintenance + +* Cleanup unused dependencies ([#5453](https://github.com/storybooks/storybook/pull/5453)) +* Add directory attribute to repositories in package.json files ([#5643](https://github.com/storybooks/storybook/pull/5643)) + +### Dependency Upgrades + +* Project-wide dependency upgrades ([#5740](https://github.com/storybooks/storybook/pull/5740)) +* Bump react-is from 16.8.1 to 16.8.3 ([#5743](https://github.com/storybooks/storybook/pull/5743)) +* Bump danger from 7.0.13 to 7.0.14 ([#5744](https://github.com/storybooks/storybook/pull/5744)) +* Bump babel-plugin-named-asset-import from 0.3.0 to 0.3.1 ([#5745](https://github.com/storybooks/storybook/pull/5745)) +* Bump eslint-plugin-json from 1.3.2 to 1.4.0 ([#5719](https://github.com/storybooks/storybook/pull/5719)) +* Bump react-native-modal-datetime-picker from 5.1.0 to 6.0.0 ([#4425](https://github.com/storybooks/storybook/pull/4425)) +* Bump immer from 1.12.0 to 2.0.0 ([#5694](https://github.com/storybooks/storybook/pull/5694)) +* Bump danger from 7.0.11 to 7.0.13 ([#5696](https://github.com/storybooks/storybook/pull/5696)) +* Bump eslint-plugin-jsx-a11y from 6.2.0 to 6.2.1 ([#5698](https://github.com/storybooks/storybook/pull/5698)) +* Bump @angular/platform-browser-dynamic from 7.2.4 to 7.2.6 ([#5697](https://github.com/storybooks/storybook/pull/5697)) +* Bump eslint from 5.12.1 to 5.14.1 ([#5653](https://github.com/storybooks/storybook/pull/5653)) +* Bump babel-preset-react-app from 7.0.0 to 7.0.1 ([#5674](https://github.com/storybooks/storybook/pull/5674)) +* Bump react from 16.8.1 to 16.8.2 ([#5673](https://github.com/storybooks/storybook/pull/5673)) +* Bump @angular/cli from 7.3.0 to 7.3.2 ([#5654](https://github.com/storybooks/storybook/pull/5654)) +* Bump @types/jest from 24.0.0 to 24.0.6 ([#5655](https://github.com/storybooks/storybook/pull/5655)) +* Bump lint-staged from 8.1.3 to 8.1.4 ([#5606](https://github.com/storybooks/storybook/pull/5606)) +* Bump @types/lodash from 4.14.120 to 4.14.121 ([#5609](https://github.com/storybooks/storybook/pull/5609)) +* Bump webpack from 4.29.0 to 4.29.3 ([#5570](https://github.com/storybooks/storybook/pull/5570)) +* update modal manager for rn 0.58 support ([#5581](https://github.com/storybooks/storybook/pull/5581)) +* Bump danger from 7.0.7 to 7.0.11 ([#5568](https://github.com/storybooks/storybook/pull/5568)) +* Bump jest-jasmine2 from 24.0.0 to 24.1.0 ([#5569](https://github.com/storybooks/storybook/pull/5569)) +* Bump jest-jasmine2 from 24.0.0 to 24.1.0 ([#5567](https://github.com/storybooks/storybook/pull/5567)) +* Bump handlebars from 4.0.12 to 4.1.0 ([#5576](https://github.com/storybooks/storybook/pull/5576)) +* Bump esm from 3.2.1 to 3.2.4 ([#5556](https://github.com/storybooks/storybook/pull/5556)) +* Bump @types/jest from 23.3.13 to 24.0.0 ([#5554](https://github.com/storybooks/storybook/pull/5554)) +* Bump webpack-dev-middleware from 3.5.1 to 3.5.2 ([#5552](https://github.com/storybooks/storybook/pull/5552)) +* Bump @emotion/core from 10.0.6 to 10.0.7 ([#5555](https://github.com/storybooks/storybook/pull/5555)) +* Bump terser-webpack-plugin from 1.2.1 to 1.2.2 ([#5553](https://github.com/storybooks/storybook/pull/5553)) +* Bump fuse.js from 3.3.1 to 3.4.2 ([#5538](https://github.com/storybooks/storybook/pull/5538)) +* Bump @angular/platform-browser-dynamic from 7.2.3 to 7.2.4 ([#5540](https://github.com/storybooks/storybook/pull/5540)) +* Bump emotion-theming from 10.0.6 to 10.0.7 ([#5541](https://github.com/storybooks/storybook/pull/5541)) +* Bump eslint-config-prettier from 3.6.0 to 4.0.0 ([#5539](https://github.com/storybooks/storybook/pull/5539)) + +## 5.0.0 (March 5, 2019) + +Storybook 5.0 is a completely new UI with the following improvements: + +- 🌓 New design with light and dark themes +- 🛠 Canvas toolbar for easy access to addons +- 🗺 Overhauled navigation sidebar with an intuitive menu +- 🗜 Redesigned addons panel with handy buttons to toggle visibility and orientation +- ⌨️ Improved keyboard shortcuts that are user configurable +- 🌍 New URL structure that eliminates long strings of query parameters + +5.0 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.0.0-alpha.*`, `5.0.0-beta.*`, and `5.0.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybooks/storybook/blob/next/MIGRATION.md) to ugprade from `4.x`. + +## 5.0.0-rc.11 (March 5, 2019) + +### Bug Fixes + +* UI: Fix base theme initialization and theme bootup ([#5843](https://github.com/storybooks/storybook/pull/5843)) +* UI: Fix SidebarItem feels "laggy" when clicked ([#5850](https://github.com/storybooks/storybook/pull/5850)) + +## 5.0.0-rc.10 (March 4, 2019) + +### Bug Fixes + +* Addon-viewports: Restore v4 behaviour ([#5829](https://github.com/storybooks/storybook/pull/5829)) +* Addon-backgrounds: Remove previously deprecated default export ([#5828](https://github.com/storybooks/storybook/pull/5828)) + +### Maintenance + +* Addon-a11y: Cleanup and document migration ([#5833](https://github.com/storybooks/storybook/pull/5833)) + +## 5.0.0-rc.9 (March 3, 2019) + +### Features + +* Core: Allow local decorators via params ([#5806](https://github.com/storybooks/storybook/pull/5806)) + +### Bug Fixes + +* Core: Add warning for decorators added "mid-kind" ([#5819](https://github.com/storybooks/storybook/pull/5819)) +* Addon-notes: Support inline code markdown ([#5802](https://github.com/storybooks/storybook/pull/5802)) +* Theming: Fix theme loading bugs ([#5787](https://github.com/storybooks/storybook/pull/5787)) +* CLI: Fix build-storybook with simplebar esm files ([#5816](https://github.com/storybooks/storybook/pull/5816)) + +## 5.0.0-rc.8 (March 1, 2019) + +### Features + +* Core: Allow local decorators via params ([#5806](https://github.com/storybooks/storybook/pull/5806)) + +### Bug Fixes + +* UI: Sort storiesHash so grouped keys appear together ([#5805](https://github.com/storybooks/storybook/pull/5805)) +* UI: Close tooltips on iframe clicks on keypresses ([#5807](https://github.com/storybooks/storybook/pull/5807)) +* Addon-Info: Add font family to info panel ([#5759](https://github.com/storybooks/storybook/pull/5759)) + ## 5.0.0-rc.7 (February 28, 2019) ### Features @@ -83,6 +189,7 @@ ### Features * UI: Allow collapsing active story and use separate expansion for filtered ([#5625](https://github.com/storybooks/storybook/pull/5625)) +* UI: Handle prerelease versions in version check ([#5641](https://github.com/storybooks/storybook/pull/5641)) ### Bug Fixes diff --git a/MIGRATION.md b/MIGRATION.md index b2897816561..79917cbbccf 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -2,8 +2,16 @@ - [From version 4.1.x to 5.0.x](#from-version-41x-to-50x) - [Webpack config simplification](#webpack-config-simplification) + - [Theming overhaul](#theming-overhaul) - [Story hierarchy defaults](#story-hierarchy-defaults) - [Options addon deprecated](#options-addon-deprecated) + - [Individual story decorators](#individual-story-decorators) + - [Addon backgrounds uses parameters](#addon-backgrounds-uses-parameters) + - [Addon cssresources name attribute renamed](#addon-cssresources-name-attribute-renamed) + - [Addon viewport uses parameters](#addon-viewport-uses-parameters) + - [Addon a11y uses parameters](#addon-a11y-uses-parameters-decorator-renamed) + - [New keyboard shortcuts defaults](#new-keyboard-shortcuts-defaults) + - [New URL structure](#new-url-structure) - [From version 4.0.x to 4.1.x](#from-version-40x-to-41x) - [Private addon config](#private-addon-config) - [React 15.x](#react-15x) @@ -45,7 +53,7 @@ Storybook 5.0 includes sweeping UI changes as well as changes to the addon API and custom webpack configuration. We've tried to keep backwards compatibility in most cases, but there are some notable exceptions documented below. -## Webpack config simplifcation +## Webpack config simplification The API for custom webpack configuration has been simplifed in 5.0, but it's a breaking change. @@ -54,13 +62,17 @@ Storybook's "full control mode" for webpack allows you to override the webpack c In Storybook 5 there is a single signature for full-control mode that takes a parameters object with the fields `config` and `mode`: ```js -module.exports = ({ config, mode }) => { config.modules.rules.push(...); return config; } +module.exports = ({ config, mode }) => { config.module.rules.push(...); return config; } ``` In contrast, the 4.x configuration function accepted either two or three arguments (`(baseConfig, mode)`, or `(baseConfig, mode, defaultConfig)`). The `config` object in the 5.x signature is equivalent to 4.x's `defaultConfig`. Please see the [current custom webpack documentation](https://github.com/storybooks/storybook/blob/next/docs/src/pages/configurations/custom-webpack-config/index.md) for more information on custom webpack config. +## Theming overhaul + +Theming has been rewritten in v5. If you used theming in v4, please consult the [theming docs](https://github.com/storybooks/storybook/blob/next/docs/src/pages/configurations/theming/index.md) to learn about the new API. + ## Story hierarchy defaults Storybook's UI contains a hierarchical tree of stories that can be configured by `hierarchySeparator` and `hierarchyRootSeparator` [options](./addons/options/README.md). @@ -139,6 +151,164 @@ Here is the mapping from old options to new: Storybook v5 removes the search dialog box in favor of a quick search in the navigation view, so `showSearchBox` has been removed. +## Individual story decorators + +The behavior of adding decorators to a kind has changed in SB5 ([#5781](https://github.com/storybooks/storybook/issues/5781)). + +In SB4 it was possible to add decorators to only a subset of the stories of a kind. + +```js +storiesOf('Stories', module) + .add('noncentered', () => 'Hello') + .addDecorator(centered) + .add('centered', () => 'Hello'); +``` + +The semantics has changed in SB5 so that calling `addDecorator` on a kind adds a decorator to all its stories, no mater the order. So in the previous example, both stories would be centered. + +To allow for a subset of the stories in a kind to be decorated, we've added the ability to add decorators to individual stories using parameters: + +```js +storiesOf('Stories', module) + .add('noncentered', () => 'Hello') + .add('centered', () => 'Hello', { decorators: [centered] }); +``` + +## Addon backgrounds uses parameters + +Similarly, `@storybook/addon-backgrounds` uses parameters to pass background options. If you previously had: + +```js +import { withBackgrounds } from `@storybook/addon-backgrounds`; + +storiesOf('Stories', module) + .addDecorator(withBackgrounds(options)); +``` + +You should replace it with: + +```js +storiesOf('Stories', module).addParameters({ backgrounds: options }); +``` + +You can pass `backgrounds` parameters at the global level (via `addParameters` imported from `@storybook/react` et al.), and the story level (via the third argument to `.add()`). + +## Addon cssresources name attribute renamed + +In the options object for `@storybook/addon-cssresources`, the `name` attribute for each resource has been renamed to `id`. If you previously had: + +```js +import { withCssResources } from '@storybook/addon-cssresources'; +import { addDecorator } from '@storybook/react'; + +addDecorator( + withCssResources({ + cssresources: [ + { + name: `bluetheme`, // Previous + code: ``, + picked: false, + }, + ], + }) +); +``` + +You should replace it with: + +```js +import { withCssResources } from '@storybook/addon-cssresources'; +import { addDecorator } from '@storybook/react'; + +addDecorator( + withCssResources({ + cssresources: [ + { + id: `bluetheme`, // Renamed + code: ``, + picked: false, + }, + ], + }) +); +``` + +## Addon viewport uses parameters + +Similarly, `@storybook/addon-viewport` uses parameters to pass viewport options. If you previously had: + +```js +import { configureViewport } from `@storybook/addon-viewport`; + +configureViewport(options); +``` + +You should replace it with: + +```js +import { addParameters } from '@storybook/react'; // or others + +addParameters({ viewport: options }); +``` + +The `withViewport` decorator is also no longer supported and should be replaced with a parameter based API as above. Also the `onViewportChange` callback is no longer supported. + +See the [viewport addon README](https://github.com/storybooks/storybook/blob/master/addons/viewport/README.md) for more information. + +## Addon a11y uses parameters, decorator renamed + +Similarly, `@storybook/addon-a11y` uses parameters to pass a11y options. If you previously had: + +```js +import { configureA11y } from `@storybook/addon-a11y`; + +configureA11y(options); +``` + +You should replace it with: + +```js +import { addParameters } from '@storybook/react'; // or others + +addParameters({ a11y: options }); +``` + +You can also pass `a11y` parameters at the component level (via `storiesOf(...).addParameters`), and the story level (via the third argument to `.add()`). + +Furthermore, the decorator `checkA11y` has been deprecated and renamed to `withA11y` to make it consistent with other Storybook decorators. + +See the [a11y addon README](https://github.com/storybooks/storybook/blob/master/addons/a11y/README.md) for more information. + +## New keyboard shortcuts defaults + +Storybook's keyboard shortcuts are updated in 5.0, but they are configurable via the menu so if you want to set them back you can: + +| Shorctut | Old | New | +| ---------------------- | ----------- | ----- | +| Toggle sidebar | cmd-shift-X | S | +| Toggle addons panel | cmd-shift-Z | A | +| Toggle addons position | cmd-shift-G | D | +| Toggle fullscreen | cmd-shift-F | F | +| Next story | cmd-shift-→ | alt-→ | +| Prev story | cmd-shift-← | alt-← | +| Next component | | alt-↓ | +| Prev component | | alt-↑ | +| Search | | / | + +## New URL structure + +We've update Storybook's URL structure in 5.0. The old structure used URL parameters to save the UI state, resulting in long ugly URLs. v5 respects the old URL parameters, but largely does away with them. + +The old structure encoded `selectedKind` and `selectedStory` among other parameters. Storybook v5 respects these parameters but will issue a deprecation message in the browser console warning of potential future removal. + +The new URL structure looks like: + +``` +https://url-of-storybook?path=/story/ +``` + +The structure of `storyId` is a slugified `--` (slugified = lowercase, hyphen-separated). Each `storyId` must be unique. We plan to build more features into Storybook in upcoming versions based on this new structure. + ## From version 4.0.x to 4.1.x There are are a few migrations you should be aware of in 4.1, including one unintentionally breaking change for advanced addon usage. @@ -168,17 +338,19 @@ However, if you're developing React components, this means you need to upgrade t Also, here's the error you'll get if you're running an older version of React: ``` + core.browser.esm.js:15 Uncaught TypeError: Object(...) is not a function - at Module../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:15) - at **webpack_require** (bootstrap:724) - at fn (bootstrap:101) - at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1) - at **webpack_require** (bootstrap:724) - at fn (bootstrap:101) - at Module../node_modules/@emotion/styled/dist/styled.esm.js (styled.esm.js:1) - at **webpack_require** (bootstrap:724) - at fn (bootstrap:101) - at Object../node_modules/@storybook/components/dist/navigation/MenuLink.js (MenuLink.js:12) +at Module../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:15) +at **webpack_require** (bootstrap:724) +at fn (bootstrap:101) +at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1) +at **webpack_require** (bootstrap:724) +at fn (bootstrap:101) +at Module../node_modules/@emotion/styled/dist/styled.esm.js (styled.esm.js:1) +at **webpack_require** (bootstrap:724) +at fn (bootstrap:101) +at Object../node_modules/@storybook/components/dist/navigation/MenuLink.js (MenuLink.js:12) + ``` ### Generic addons diff --git a/README.md b/README.md index f9dd2d8e08d..ee4bcde07ca 100644 --- a/README.md +++ b/README.md @@ -131,10 +131,10 @@ See [Addon / Framework Support Table](ADDONS_SUPPORT.md) We have a badge! Link it to your live Storybook example. -![Storybook](https://github.com/storybooks/brand/blob/master/badge/badge-storybook.svg) +![Storybook](https://cdn.jsdelivr.net/gh/storybooks/brand@master/badge/badge-storybook.svg) ```md -[![Storybook](https://github.com/storybooks/brand/blob/master/badge/badge-storybook.svg)](link to site) +[![Storybook](https://cdn.jsdelivr.net/gh/storybooks/brand@master/badge/badge-storybook.svg)](link to site) ``` If you're looking for material to use in your presentation about storybook, like logo's video material and the colors we use etc, you can find all of that at our [press repo](https://github.com/storybooks/press). diff --git a/addons/a11y/README.md b/addons/a11y/README.md index ea4ce8e1c8a..04f3f809819 100755 --- a/addons/a11y/README.md +++ b/addons/a11y/README.md @@ -20,16 +20,16 @@ Add this line to your `addons.js` file (create this file inside your storybook c import '@storybook/addon-a11y/register'; ``` -import the `withA11Y` decorator to check your stories for violations within your components. +import the `withA11y` decorator to check your stories for violations within your components. ```js import React from 'react'; import { storiesOf } from '@storybook/react'; -import { withA11Y } from '@storybook/addon-a11y'; +import { withA11y } from '@storybook/addon-a11y'; // should only be added once // best place is in config.js -addDecorator(withA11Y) +addDecorator(withA11y) storiesOf('button', module) .add('Accessible', () => ( @@ -51,9 +51,9 @@ You can override these options at story level too. import React from 'react'; import { storiesOf, addDecorator, addParameters } from '@storybook/react'; -import { withA11Y } from '@storybook/addon-a11y'; +import { withA11y } from '@storybook/addon-a11y'; -addDecorator(withA11Y) +addDecorator(withA11y) addParameters({ a11y: { // ... axe options diff --git a/addons/a11y/package.json b/addons/a11y/package.json index 4748f46f06d..281923dcf15 100644 --- a/addons/a11y/package.json +++ b/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "a11y addon for storybook", "keywords": [ "a11y", @@ -26,18 +26,18 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.0.0-beta.3", - "@storybook/client-logger": "5.0.0-beta.3", - "@storybook/components": "5.0.0-beta.3", - "@storybook/core-events": "5.0.0-beta.3", - "@storybook/theming": "5.0.0-beta.3", + "@storybook/addons": "5.1.0-alpha.0", + "@storybook/client-logger": "5.1.0-alpha.0", + "@storybook/components": "5.1.0-alpha.0", + "@storybook/core-events": "5.1.0-alpha.0", + "@storybook/theming": "5.1.0-alpha.0", "axe-core": "^3.1.2", "common-tags": "^1.8.0", - "core-js": "^2.6.2", + "core-js": "^2.6.5", "global": "^4.3.2", "memoizerific": "^1.11.3", - "prop-types": "^15.6.2", - "react": "^16.8.2", + "prop-types": "^15.7.2", + "react": "^16.8.3", "util-deprecate": "^1.0.2" }, "publishConfig": { diff --git a/addons/a11y/src/index.js b/addons/a11y/src/index.js index dd18397d73d..13428ae784d 100644 --- a/addons/a11y/src/index.js +++ b/addons/a11y/src/index.js @@ -3,7 +3,7 @@ import axe from 'axe-core'; import deprecate from 'util-deprecate'; import { stripIndents } from 'common-tags'; -import addons, { makeDecorator } from '@storybook/addons'; +import addons from '@storybook/addons'; import { STORY_RENDERED } from '@storybook/core-events'; import EVENTS, { PARAM_KEY } from './constants'; @@ -24,16 +24,16 @@ const report = input => { channel.emit(EVENTS.RESULT, input); }; -const run = (c, o) => { +const run = (config, options) => { progress = progress.then(() => { axe.reset(); - if (c) { - axe.configure(c); + if (config) { + axe.configure(config); } return axe .run( getElement(), - o || { + options || { restoreScroll: true, } ) @@ -41,18 +41,14 @@ const run = (c, o) => { }); }; -export const withA11Y = makeDecorator({ - name: 'withA11Y', - parameterName: PARAM_KEY, - skipIfNoParametersOrOptions: false, - allowDeprecatedUsage: false, - - wrapper: (getStory, context, opt) => { - setup = opt.parameters || opt.options || {}; - - return getStory(context); - }, -}); +// NOTE: we should add paramaters to the STORY_RENDERED event and deprecate this +export const withA11y = (getStory, context) => { + const params = context.parameters[PARAM_KEY]; + if (params) { + setup = params; + } + return getStory(context); +}; channel.on(STORY_RENDERED, () => run(setup.config, setup.options)); channel.on(EVENTS.REQUEST, () => run(setup.config, setup.options)); @@ -61,10 +57,16 @@ if (module && module.hot && module.hot.decline) { module.hot.decline(); } +// TODO: REMOVE at v6.0.0 +export const withA11Y = deprecate( + (...args) => withA11y(...args), + 'withA11Y has been renamed withA11y' +); + // TODO: REMOVE at v6.0.0 export const checkA11y = deprecate( - (...args) => withA11Y(...args), - 'checkA11y has been replaced with withA11Y' + (...args) => withA11y(...args), + 'checkA11y has been renamed withA11y' ); // TODO: REMOVE at v6.0.0 diff --git a/addons/actions/package.json b/addons/actions/package.json index 933887809c1..94538cca176 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Action Logger addon for storybook", "keywords": [ "storybook" @@ -21,18 +21,18 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.0.0-beta.3", - "@storybook/components": "5.0.0-beta.3", - "@storybook/core-events": "5.0.0-beta.3", - "@storybook/theming": "5.0.0-beta.3", - "core-js": "^2.6.2", + "@storybook/addons": "5.1.0-alpha.0", + "@storybook/components": "5.1.0-alpha.0", + "@storybook/core-events": "5.1.0-alpha.0", + "@storybook/theming": "5.1.0-alpha.0", + "core-js": "^2.6.5", "fast-deep-equal": "^2.0.1", "global": "^4.3.2", "lodash": "^4.17.11", - "prop-types": "^15.6.2", - "polished": "^2.3.3", - "react": "^16.8.2", - "react-inspector": "^2.3.0", + "polished": "^3.0.0", + "prop-types": "^15.7.2", + "react": "^16.8.3", + "react-inspector": "^2.3.1", "uuid": "^3.3.2" }, "publishConfig": { diff --git a/addons/actions/src/components/ActionLogger/style.tsx b/addons/actions/src/components/ActionLogger/style.tsx index 06d83aa7941..6fb7d0d3498 100644 --- a/addons/actions/src/components/ActionLogger/style.tsx +++ b/addons/actions/src/components/ActionLogger/style.tsx @@ -1,6 +1,5 @@ import { styled } from '@storybook/theming'; import { opacify } from 'polished'; -import { ActionBar } from '@storybook/components'; export const Action = styled.div({ display: 'flex', diff --git a/addons/backgrounds/mithril.js b/addons/backgrounds/mithril.js deleted file mode 100644 index c22c26b6732..00000000000 --- a/addons/backgrounds/mithril.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/deprecated'); diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json index 9feac8a9f92..5c537447b0f 100644 --- a/addons/backgrounds/package.json +++ b/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "A storybook addon to show different backgrounds for your preview", "keywords": [ "addon", @@ -25,15 +25,15 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.0.0-beta.3", - "@storybook/client-logger": "5.0.0-beta.3", - "@storybook/components": "5.0.0-beta.3", - "@storybook/core-events": "5.0.0-beta.3", - "@storybook/theming": "5.0.0-beta.3", - "core-js": "^2.6.2", + "@storybook/addons": "5.1.0-alpha.0", + "@storybook/client-logger": "5.1.0-alpha.0", + "@storybook/components": "5.1.0-alpha.0", + "@storybook/core-events": "5.1.0-alpha.0", + "@storybook/theming": "5.1.0-alpha.0", + "core-js": "^2.6.5", "global": "^4.3.2", "memoizerific": "^1.11.3", - "react": "^16.8.2", + "react": "^16.8.3", "util-deprecate": "^1.0.2" }, "devDependencies": { diff --git a/addons/backgrounds/src/constants.ts b/addons/backgrounds/src/constants.ts index df63c53889d..503f310a6f5 100644 --- a/addons/backgrounds/src/constants.ts +++ b/addons/backgrounds/src/constants.ts @@ -1,7 +1,2 @@ export const ADDON_ID = 'storybook/background'; export const PARAM_KEY = 'backgrounds'; - -export const EVENTS = { - SET: `${ADDON_ID}:set`, - UNSET: `${ADDON_ID}:unset`, -}; diff --git a/addons/backgrounds/src/deprecated.ts b/addons/backgrounds/src/deprecated.ts deleted file mode 100644 index f03a1a29018..00000000000 --- a/addons/backgrounds/src/deprecated.ts +++ /dev/null @@ -1,8 +0,0 @@ -import deprecate from 'util-deprecate'; - -import backgrounds from '.'; - -export default deprecate( - backgrounds, - "addon-backgrounds: framework-specific imports are deprecated, just use `import backgrounds from '@storybook/addon-backgrounds`" -); diff --git a/addons/backgrounds/src/index.ts b/addons/backgrounds/src/index.ts index de5cb59a21f..51e8ff3a9db 100644 --- a/addons/backgrounds/src/index.ts +++ b/addons/backgrounds/src/index.ts @@ -1,43 +1,18 @@ -import { addons, makeDecorator, StoryContext, StoryGetter, WrapperSettings } from '@storybook/addons'; +import { makeDecorator, StoryContext, StoryGetter } from '@storybook/addons'; import deprecate from 'util-deprecate'; -import { REGISTER_SUBSCRIPTION } from '@storybook/core-events'; -import { EVENTS } from './constants'; -import { BackgroundConfig } from './models'; - -let prevBackgrounds: BackgroundConfig[]; - -const subscription = () => () => { - prevBackgrounds = null; - addons.getChannel().emit(EVENTS.UNSET); -}; - -export const withBackgrounds = makeDecorator({ - name: 'withBackgrounds', - parameterName: 'backgrounds', - skipIfNoParametersOrOptions: true, - allowDeprecatedUsage: true, - wrapper: (getStory: StoryGetter, context: StoryContext, { options, parameters }: WrapperSettings) => { - const data = parameters || options || []; - const backgrounds = Array.isArray(data) ? data : Object.values(data); - - if (backgrounds.length === 0) { +// This decorator is kept purely so we produce a decorator that is compatible with both +// `addDecorator(withBackgrounds(...))` and `addDecorator(withBackgrounds)` +export const withBackgrounds = deprecate( + makeDecorator({ + name: 'withBackgrounds', + parameterName: 'backgrounds', + wrapper: (getStory: StoryGetter, context: StoryContext) => { return getStory(context); - } - - if (prevBackgrounds !== backgrounds) { - addons.getChannel().emit(EVENTS.SET, backgrounds); - prevBackgrounds = backgrounds; - } - addons.getChannel().emit(REGISTER_SUBSCRIPTION, subscription); - - return getStory(context); - }, -}); - -export default deprecate( - withBackgrounds, - 'The default export of @storybook/addon-backgrounds is deprecated, please `import { withBackgrounds }` instead' + }, + }), + `Note that withBackgrounds(options) has been replaced by addParameters({ backgrounds: options}) +Read more about it in the migration guide: https://github.com/storybooks/storybook/blob/master/MIGRATION.md` ); if (module && module.hot && module.hot.decline) { diff --git a/addons/backgrounds/vue.js b/addons/backgrounds/vue.js deleted file mode 100644 index c22c26b6732..00000000000 --- a/addons/backgrounds/vue.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/deprecated'); diff --git a/addons/centered/package.json b/addons/centered/package.json index 32e12433dee..6783e870d39 100644 --- a/addons/centered/package.json +++ b/addons/centered/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-centered", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Storybook decorator to center components", "keywords": [ "addon", @@ -23,7 +23,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "core-js": "^2.6.2", + "core-js": "^2.6.5", "global": "^4.3.2", "util-deprecate": "^1.0.2" }, diff --git a/addons/cssresources/package.json b/addons/cssresources/package.json index 0e137c6e50a..2ddd3a9264b 100644 --- a/addons/cssresources/package.json +++ b/addons/cssresources/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-cssresources", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "A storybook addon to switch between css resources at runtime for your story", "keywords": [ "addon", @@ -25,12 +25,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.0.0-beta.3", - "@storybook/components": "5.0.0-beta.3", - "@storybook/core-events": "5.0.0-beta.3", - "core-js": "^2.6.2", + "@storybook/addons": "5.1.0-alpha.0", + "@storybook/components": "5.1.0-alpha.0", + "@storybook/core-events": "5.1.0-alpha.0", + "core-js": "^2.6.5", "global": "^4.3.2", - "react": "^16.8.2" + "react": "^16.8.3" }, "peerDependencies": { "react": "*" diff --git a/addons/events/package.json b/addons/events/package.json index fdeb785652b..dd04ba69f99 100644 --- a/addons/events/package.json +++ b/addons/events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-events", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Add events to your Storybook stories.", "keywords": [ "addon", @@ -24,13 +24,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.0.0-beta.3", - "@storybook/core-events": "5.0.0-beta.3", - "@storybook/theming": "5.0.0-beta.3", - "core-js": "^2.6.2", + "@storybook/addons": "5.1.0-alpha.0", + "@storybook/core-events": "5.1.0-alpha.0", + "@storybook/theming": "5.1.0-alpha.0", + "core-js": "^2.6.5", "format-json": "^1.0.3", - "prop-types": "^15.6.2", - "react": "^16.8.2", + "prop-types": "^15.7.2", + "react": "^16.8.3", "react-lifecycles-compat": "^3.0.4", "react-textarea-autosize": "^7.0.4", "util-deprecate": "^1.0.2" diff --git a/addons/google-analytics/package.json b/addons/google-analytics/package.json index b37fef567e0..3e474ab3e68 100644 --- a/addons/google-analytics/package.json +++ b/addons/google-analytics/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-google-analytics", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Storybook addon for google analytics", "keywords": [ "addon", @@ -20,11 +20,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.0.0-beta.3", - "@storybook/core-events": "5.0.0-beta.3", - "core-js": "^2.6.2", + "@storybook/addons": "5.1.0-alpha.0", + "@storybook/core-events": "5.1.0-alpha.0", + "core-js": "^2.6.5", "global": "^4.3.2", - "react-ga": "^2.5.3" + "react-ga": "^2.5.7" }, "publishConfig": { "access": "public" diff --git a/addons/graphql/package.json b/addons/graphql/package.json index 94f93d88b60..a2e89eb65c4 100644 --- a/addons/graphql/package.json +++ b/addons/graphql/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-graphql", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Storybook addon to display the GraphiQL IDE", "keywords": [ "addon", @@ -22,11 +22,11 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "core-js": "^2.6.2", + "core-js": "^2.6.5", "global": "^4.3.2", "graphiql": "^0.12.0", "graphql": "^14.1.1", - "prop-types": "^15.6.2" + "prop-types": "^15.7.2" }, "peerDependencies": { "react": "*" diff --git a/addons/info/package.json b/addons/info/package.json index 1bc0edce6dc..07a2fd70578 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-info", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "A Storybook addon to show additional information for your stories.", "keywords": [ "addon", @@ -22,23 +22,23 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.0.0-beta.3", - "@storybook/client-logger": "5.0.0-beta.3", - "@storybook/components": "5.0.0-beta.3", - "@storybook/theming": "5.0.0-beta.3", - "core-js": "^2.6.2", + "@storybook/addons": "5.1.0-alpha.0", + "@storybook/client-logger": "5.1.0-alpha.0", + "@storybook/components": "5.1.0-alpha.0", + "@storybook/theming": "5.1.0-alpha.0", + "core-js": "^2.6.5", "global": "^4.3.2", "marksy": "^6.1.0", - "nested-object-assign": "^1.0.1", - "prop-types": "^15.6.2", - "react": "^16.8.2", - "react-addons-create-fragment": "^15.5.3", + "nested-object-assign": "^1.0.3", + "prop-types": "^15.7.2", + "react": "^16.8.3", + "react-addons-create-fragment": "^15.6.2", "react-is": "^16.8.3", "react-lifecycles-compat": "^3.0.4", "util-deprecate": "^1.0.2" }, "devDependencies": { - "react-test-renderer": "^16.8.1" + "react-test-renderer": "^16.8.3" }, "peerDependencies": { "react": "*" diff --git a/addons/jest/package.json b/addons/jest/package.json index 76380331ca2..7c4df30d220 100644 --- a/addons/jest/package.json +++ b/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "React storybook addon that show component jest report", "keywords": [ "addon", @@ -28,14 +28,14 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.0.0-beta.3", - "@storybook/core-events": "5.0.0-beta.3", - "@storybook/theming": "5.0.0-beta.3", - "@storybook/components": "5.0.0-beta.3", - "core-js": "^2.6.2", + "@storybook/addons": "5.1.0-alpha.0", + "@storybook/components": "5.1.0-alpha.0", + "@storybook/core-events": "5.1.0-alpha.0", + "@storybook/theming": "5.1.0-alpha.0", + "core-js": "^2.6.5", "global": "^4.3.2", - "prop-types": "^15.6.2", - "react": "^16.8.2", + "prop-types": "^15.7.2", + "react": "^16.8.3", "upath": "^1.1.0", "util-deprecate": "^1.0.2" }, diff --git a/addons/knobs/package.json b/addons/knobs/package.json index 9afc41f926c..f65c1dace06 100644 --- a/addons/knobs/package.json +++ b/addons/knobs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-knobs", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Storybook Addon Prop Editor Component", "keywords": [ "addon", @@ -22,21 +22,21 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.0.0-beta.3", - "@storybook/components": "5.0.0-beta.3", - "@storybook/core-events": "5.0.0-beta.3", - "@storybook/theming": "5.0.0-beta.3", + "@storybook/addons": "5.1.0-alpha.0", + "@storybook/components": "5.1.0-alpha.0", + "@storybook/core-events": "5.1.0-alpha.0", + "@storybook/theming": "5.1.0-alpha.0", "copy-to-clipboard": "^3.0.8", - "core-js": "^2.6.2", + "core-js": "^2.6.5", "escape-html": "^1.0.3", "fast-deep-equal": "^2.0.1", "global": "^4.3.2", "lodash.debounce": "^4.0.8", - "prop-types": "^15.6.2", - "qs": "^6.5.2", + "prop-types": "^15.7.2", + "qs": "^6.6.0", "react-color": "^2.17.0", "react-lifecycles-compat": "^3.0.4", - "react-select": "^2.3.0" + "react-select": "^2.2.0" }, "peerDependencies": { "react": "*" diff --git a/addons/knobs/src/components/__tests__/Panel.js b/addons/knobs/src/components/__tests__/Panel.js index 6fc9321af28..60bd11af464 100644 --- a/addons/knobs/src/components/__tests__/Panel.js +++ b/addons/knobs/src/components/__tests__/Panel.js @@ -3,7 +3,7 @@ import { shallow, mount } from 'enzyme'; import { STORY_CHANGED } from '@storybook/core-events'; import { TabsState } from '@storybook/components'; -import { ThemeProvider, themes } from '@storybook/theming'; +import { ThemeProvider, themes, convert } from '@storybook/theming'; import Panel from '../Panel'; import { CHANGE, SET } from '../../shared'; import PropForm from '../PropForm'; @@ -191,7 +191,7 @@ describe('Panel', () => { // We have to do a full mount. const root = mount( - + ); @@ -225,7 +225,7 @@ describe('Panel', () => { it('should have one tab per groupId and an empty ALL tab when all are defined', () => { const root = mount( - + ); @@ -265,7 +265,7 @@ describe('Panel', () => { it('the ALL tab should have its own additional content when there are knobs both with and without a groupId', () => { const root = mount( - + ); diff --git a/addons/links/package.json b/addons/links/package.json index 7792ed42a31..952274e1b54 100644 --- a/addons/links/package.json +++ b/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Story Links addon for storybook", "keywords": [ "addon", @@ -22,13 +22,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.0.0-beta.3", - "@storybook/core-events": "5.0.0-beta.3", + "@storybook/addons": "5.1.0-alpha.0", + "@storybook/core-events": "5.1.0-alpha.0", "common-tags": "^1.8.0", - "core-js": "^2.6.2", + "core-js": "^2.6.5", "global": "^4.3.2", - "prop-types": "^15.6.2", - "qs": "^6.5.2" + "prop-types": "^15.7.2", + "qs": "^6.6.0" }, "peerDependencies": { "react": "*" diff --git a/addons/notes/package.json b/addons/notes/package.json index ea33b448ba4..550d71b4a34 100644 --- a/addons/notes/package.json +++ b/addons/notes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-notes", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Write notes for your Storybook stories.", "keywords": [ "addon", @@ -23,17 +23,17 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.0.0-beta.3", - "@storybook/client-logger": "5.0.0-beta.3", - "@storybook/components": "5.0.0-beta.3", - "@storybook/core-events": "5.0.0-beta.3", - "@storybook/theming": "5.0.0-beta.3", + "@storybook/addons": "5.1.0-alpha.0", + "@storybook/client-logger": "5.1.0-alpha.0", + "@storybook/components": "5.1.0-alpha.0", + "@storybook/core-events": "5.1.0-alpha.0", + "@storybook/theming": "5.1.0-alpha.0", "markdown-to-jsx": "^6.9.1", - "prop-types": "^15.6.2", + "prop-types": "^15.7.2", "util-deprecate": "^1.0.2" }, "devDependencies": { - "@types/prop-types": "^15.5.7", + "@types/prop-types": "^15.5.9", "@types/util-deprecate": "^1.0.0", "@types/webpack-env": "^1.13.7" }, diff --git a/addons/notes/src/Panel.test.js b/addons/notes/src/Panel.test.js new file mode 100644 index 00000000000..19bcf0da497 --- /dev/null +++ b/addons/notes/src/Panel.test.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { SyntaxHighlighter as SyntaxHighlighterBase } from '@storybook/components'; +import { SyntaxHighlighter } from './Panel.tsx'; + +describe('NotesPanel', () => { + describe('SyntaxHighlighter component', () => { + it('should return code if className is undefined', () => { + const wrapper = shallow(some text); + const code = wrapper.find('code'); + expect(code.exists()).toBeTruthy(); + expect(code.text()).toBe('some text'); + }); + it('should return SyntaxHighlighterBase if there is a className prop', () => { + const wrapper = shallow( + some text + ); + const syntaxHighlighterBase = wrapper.find(SyntaxHighlighterBase); + expect(syntaxHighlighterBase.exists()).toBeTruthy(); + expect(syntaxHighlighterBase.prop('language')).toBe('jsx'); + }); + }); +}); diff --git a/addons/notes/src/Panel.tsx b/addons/notes/src/Panel.tsx index 5229362d653..543ea9f6135 100644 --- a/addons/notes/src/Panel.tsx +++ b/addons/notes/src/Panel.tsx @@ -41,7 +41,15 @@ function read(param: Parameters | undefined): string | undefined { } } -const SyntaxHighlighter = (props: any) => ; +export const SyntaxHighlighter = (props: any) => { + // markdown-to-jsx does not add className to inline code + if (props.className === undefined) { + return {props.children}; + } + //className: "lang-jsx" + const language = props.className.split('-'); + return ; +}; const defaultOptions = { overrides: { @@ -105,21 +113,25 @@ export default class NotesPanel extends React.Component // TODO: memoize const extraElements = Object.entries(api.getElements(types.NOTES_ELEMENT)).reduce((acc, [k, v]) => ({ ...acc, [k]: v.render }), {}); - const options = { ...defaultOptions, overrides: { ...defaultOptions.overrides, ...extraElements } }; + const options = { + ...defaultOptions, + overrides: { ...defaultOptions.overrides, ...extraElements }, + }; return value ? ( - - {value} + + {value} ) : ( + No notes yet - No notes yet - - - Learn how to document components in Markdown + Learn how to{' '} + + document components in Markdown + ); diff --git a/addons/ondevice-backgrounds/package.json b/addons/ondevice-backgrounds/package.json index f0b22cfb6fe..438cedc167b 100644 --- a/addons/ondevice-backgrounds/package.json +++ b/addons/ondevice-backgrounds/package.json @@ -1,6 +1,7 @@ { "name": "@storybook/addon-ondevice-backgrounds", - "version": "5.0.0-beta.3", + "private": true, + "version": "5.1.0-alpha.0", "description": "A storybook addon to show different backgrounds for your preview", "keywords": [ "addon", @@ -24,9 +25,9 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.0.0-beta.3", - "core-js": "^2.6.2", - "prop-types": "^15.6.2" + "@storybook/addons": "5.1.0-alpha.0", + "core-js": "^2.6.5", + "prop-types": "^15.7.2" }, "peerDependencies": { "react": "*", diff --git a/addons/ondevice-knobs/package.json b/addons/ondevice-knobs/package.json index 5a83f1460ec..ebc72423fdd 100644 --- a/addons/ondevice-knobs/package.json +++ b/addons/ondevice-knobs/package.json @@ -1,6 +1,7 @@ { "name": "@storybook/addon-ondevice-knobs", - "version": "5.0.0-beta.3", + "private": true, + "version": "5.1.0-alpha.0", "description": "Display storybook story knobs on your deviced.", "keywords": [ "addon", @@ -21,10 +22,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.0.0-beta.3", - "core-js": "^2.6.2", + "@storybook/addons": "5.1.0-alpha.0", + "core-js": "^2.6.5", "deep-equal": "^1.0.1", - "prop-types": "^15.6.2", + "prop-types": "^15.7.2", "react-native-color-picker": "^0.4.0", "react-native-modal-datetime-picker": "^6.0.0", "react-native-modal-selector": "^1.0.2", diff --git a/addons/ondevice-notes/package.json b/addons/ondevice-notes/package.json index 29826abbe2a..4ee410b9c18 100644 --- a/addons/ondevice-notes/package.json +++ b/addons/ondevice-notes/package.json @@ -1,6 +1,7 @@ { "name": "@storybook/addon-ondevice-notes", - "version": "5.0.0-beta.3", + "private": true, + "version": "5.1.0-alpha.0", "description": "Write notes for your Storybook stories.", "keywords": [ "addon", @@ -19,9 +20,9 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.0.0-beta.3", - "core-js": "^2.6.2", - "prop-types": "^15.6.2", + "@storybook/addons": "5.1.0-alpha.0", + "core-js": "^2.6.5", + "prop-types": "^15.7.2", "react-native-simple-markdown": "^1.1.0" }, "peerDependencies": { diff --git a/addons/options/package.json b/addons/options/package.json index 2a7044309b1..c4a610cd6e8 100644 --- a/addons/options/package.json +++ b/addons/options/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-options", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Options addon for storybook", "keywords": [ "addon", @@ -21,8 +21,8 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.0.0-beta.3", - "core-js": "^2.6.2", + "@storybook/addons": "5.1.0-alpha.0", + "core-js": "^2.6.5", "util-deprecate": "^1.0.2" }, "peerDependencies": { diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json index 84550cfb5c2..1cce8ecf0b7 100644 --- a/addons/storyshots/storyshots-core/package.json +++ b/addons/storyshots/storyshots-core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.", "keywords": [ "addon", @@ -25,8 +25,8 @@ "storybook": "start-storybook -p 6006" }, "dependencies": { - "@storybook/addons": "5.0.0-beta.3", - "core-js": "^2.6.2", + "@storybook/addons": "5.1.0-alpha.0", + "core-js": "^2.6.5", "glob": "^7.1.3", "global": "^4.3.2", "jest-specific-snapshot": "^1.0.0", @@ -34,9 +34,9 @@ "regenerator-runtime": "^0.12.1" }, "devDependencies": { - "enzyme-to-json": "^3.3.4", - "jest-emotion": "^10.0.6", - "react": "^16.8.2" + "enzyme-to-json": "^3.3.5", + "jest-emotion": "^10.0.7", + "react": "^16.8.3" }, "publishConfig": { "access": "public" diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json index d2e5ee86b28..f7acc97174e 100644 --- a/addons/storyshots/storyshots-puppeteer/package.json +++ b/addons/storyshots/storyshots-puppeteer/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots-puppeteer", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Image snappshots addition to StoryShots base on puppeteer", "keywords": [ "addon", @@ -22,11 +22,11 @@ "prepare": "node ../../../scripts/prepare.js" }, "dependencies": { - "@storybook/router": "5.0.0-beta.3", - "@storybook/node-logger": "5.0.0-beta.3", - "core-js": "^2.6.2", - "jest-image-snapshot": "^2.6.0", - "puppeteer": "^1.12.0", + "@storybook/node-logger": "5.1.0-alpha.0", + "@storybook/router": "5.1.0-alpha.0", + "core-js": "^2.6.5", + "jest-image-snapshot": "^2.8.1", + "puppeteer": "^1.12.2", "regenerator-runtime": "^0.12.1" }, "peerDependencies": { diff --git a/addons/storysource/README.md b/addons/storysource/README.md index 2718ac6d089..7c12c548d36 100644 --- a/addons/storysource/README.md +++ b/addons/storysource/README.md @@ -23,14 +23,14 @@ import '@storybook/addon-storysource/register'; Use this hook to a custom webpack.config. This will generate a decorator call in every story: ```js -module.exports = function (baseConfig, env, defaultConfig) { - defaultConfig.module.rules.push({ +module.exports = function ({ config }) { + config.module.rules.push({ test: /\.stories\.jsx?$/, loaders: [require.resolve('@storybook/addon-storysource/loader')], enforce: 'pre', }); - return defaultConfig; + return config; }; ``` diff --git a/addons/storysource/package.json b/addons/storysource/package.json index 83c11a29243..83b629c4d30 100644 --- a/addons/storysource/package.json +++ b/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Stories addon for storybook", "keywords": [ "addon", @@ -22,15 +22,15 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.0.0-beta.3", - "@storybook/components": "5.0.0-beta.3", - "@storybook/theming": "5.0.0-beta.3", - "@storybook/router": "5.0.0-beta.3", - "core-js": "^2.6.2", + "@storybook/addons": "5.1.0-alpha.0", + "@storybook/components": "5.1.0-alpha.0", + "@storybook/router": "5.1.0-alpha.0", + "@storybook/theming": "5.1.0-alpha.0", + "core-js": "^2.6.5", "estraverse": "^4.2.0", - "loader-utils": "^1.2.1", + "loader-utils": "^1.2.3", "prettier": "^1.16.4", - "prop-types": "^15.6.2", + "prop-types": "^15.7.2", "react-syntax-highlighter": "^8.0.1", "regenerator-runtime": "^0.12.1" }, diff --git a/addons/viewport/README.md b/addons/viewport/README.md index 5356c91bcff..5e9273e9b48 100644 --- a/addons/viewport/README.md +++ b/addons/viewport/README.md @@ -1,6 +1,6 @@ # Storybook Viewport Addon -Storybook Viewport Addon allows your stories to be displayed in different sizes and layouts in [Storybook](https://storybook.js.org). This helps build responsive components inside of Storybook. +Storybook Viewport Addon allows your stories to be displayed in different sizes and layouts in [Storybook](https://storybook.js.org). This helps build responsive components inside of Storybook. [Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md) @@ -28,21 +28,30 @@ import '@storybook/addon-viewport/register'; ## Configuration -Import and use the `configureViewport` function in your `config.js` file. +The viewport addon is configured by story parameters with the `viewport` key. To configure globally, import `addParameters` from your app layer in your `config.js` file. ```js -import { configureViewport } from '@storybook/addon-viewport'; +import { addParameters } from '@storybook/react'; + +addParameters({ viewport: options }); ``` +Options can take a object with the following keys: + ### defaultViewport : String ----- + +--- + Setting this property to, let say `iphone6`, will make `iPhone 6` the default device/viewport for all stories. Default is `'responsive'` which fills 100% of the preview area. ### viewports : Object ----- + +--- + A key-value pair of viewport's key and properties (see `Viewport` definition below) for all viewports to be displayed. Default is [`INITIAL_VIEWPORTS`](src/shared/index.js) #### Viewport Model + ```js { /** @@ -70,154 +79,81 @@ A key-value pair of viewport's key and properties (see `Viewport` definition bel } ``` -## Decorators +## Configuring per component or story -Sometimes you want to show collection of mobile stories, and you know those stories look horible on desktop (`responsive`), so you think you need to change the default viewport only for those? +Parameters can be configured for a whole set of stories or a single story via the standard parameter API: -Here is the answer, with `withViewport` decorator, you can change the default viewport of single, multiple, or all stories. - -`withViewport` accepts either -* A `String`, which represents the default viewport, or -* An `Object`, which looks like ```js -{ - name: 'iphone6', // default viewport - onViewportChange({ viewport }) { // called whenever different viewport is selected from the dropdown +import addStories from '@storybook/react'; - } -} +addStories('Stories', module) + // To set a default viewport for all the stories for this component + .addParameters({ viewport: { defaultViewport: 'iphone6' }}) + .add('story', () => , { viewport: 'iphonex' }); ``` ## Examples -### Basic Usage - -Simply import the Storybook Viewport Addon in the `addons.js` file in your `.storybook` directory. - -```js -import '@storybook/addon-viewport/register' -``` - -This will register the Viewport Addon to Storybook and will show up in the action area. - - ### Use Custom Set of Devices -This will replace all previous devices with `Kindle Fire 2` and `Kindle Fire HD` by simply calling `configureViewport` with the two devices as `viewports` in `config.js` file in your `.storybook` directory. +This will replace all previous devices with `Kindle Fire 2` and `Kindle Fire HD` by simply calling `addParameters` with the two devices as `viewports` in `config.js` file in your `.storybook` directory. ```js -import { configureViewport } from '@storybook/addon-viewport'; +import { addParameters } from '@storybook/react'; const newViewports = { kindleFire2: { name: 'Kindle Fire 2', styles: { width: '600px', - height: '963px' - } + height: '963px', + }, }, kindleFireHD: { name: 'Kindle Fire HD', styles: { width: '533px', - height: '801px' - } - } + height: '801px', + }, + }, }; -configureViewport({ - viewports: newViewports +addParameters({ + viewport: { viewports: newViewports }, }); ``` - ### Add New Device This will add both `Kindle Fire 2` and `Kindle Fire HD` to the list of devices. This is acheived by making use of the exported [`INITIAL_VIEWPORTS`](src/shared/index.js) property, by merging it with the new viewports and pass the result as `viewports` to `configureViewport` function ```js -import { configureViewport, INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; +import { addParameters } from '@storybook/react'; +import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; const newViewports = { kindleFire2: { name: 'Kindle Fire 2', styles: { width: '600px', - height: '963px' - } + height: '963px', + }, }, kindleFireHD: { name: 'Kindle Fire HD', styles: { width: '533px', - height: '801px' - } - } + height: '801px', + }, + }, }; -configureViewport({ - viewports: { - ...INITIAL_VIEWPORTS, - ...newViewports - } +addParameters({ + viewport: { + viewports: { + ...INITIAL_VIEWPORTS, + ...newViewports, + }, + }, }); ``` - - -### Change The Default Viewport - -This will make `iPhone 6` the default viewport for all stories. - -```js -import { configureViewport } from '@storybook/addon-viewport'; - -configureViewport({ - defaultViewport: 'iphone6' -}); -``` - -## withViewport Decorator - -Change the default viewport for single/multiple/global stories, or listen to viewport selection changes - -```js -import React from 'react'; -import { storiesOf, addDecorator } from '@storybook/react'; -import { withViewport } from '@storybook/addon-viewport'; - -// Globablly -addDecorator(withViewport('iphone5')); - -// Collection -storiesOf('Decorator with string', module) - .addDecorator(withViewport('iphone6')) - .add('iPhone 6', () => ( -

- Do I look good on iPhone 6? -

- )); - -// Single -storiesOf('Parameterized story', module) - .addDecorator(withViewport()) - .add( - 'iPad', - () => ( -

- Do I look good on iPad? -

- ), - { viewport: 'ipad' } - ); - -storiesOf('Decorator with object', module) - .addDecorator( - withViewport({ - onViewportChange({ viewport }) { - console.log(`Viewport changed: ${viewport.name} (${viewport.type})`); // e.g. Viewport changed: iphone6 (mobile) - }, - }) - ) - .add('onViewportChange', () => ); - -``` diff --git a/addons/viewport/package.json b/addons/viewport/package.json index c160844d939..4f57c9d0a14 100644 --- a/addons/viewport/package.json +++ b/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Storybook addon to change the viewport size to mobile", "keywords": [ "addon", @@ -21,15 +21,15 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.0.0-beta.3", - "@storybook/client-logger": "5.0.0-beta.3", - "@storybook/components": "5.0.0-beta.3", - "@storybook/core-events": "5.0.0-beta.3", - "@storybook/theming": "5.0.0-beta.3", - "core-js": "^2.6.2", + "@storybook/addons": "5.1.0-alpha.0", + "@storybook/client-logger": "5.1.0-alpha.0", + "@storybook/components": "5.1.0-alpha.0", + "@storybook/core-events": "5.1.0-alpha.0", + "@storybook/theming": "5.1.0-alpha.0", + "core-js": "^2.6.5", "global": "^4.3.2", "memoizerific": "^1.11.3", - "prop-types": "^15.6.2", + "prop-types": "^15.7.2", "util-deprecate": "^1.0.2" }, "peerDependencies": { diff --git a/addons/viewport/preview.js b/addons/viewport/preview.js index 0c0f6c62539..aea18c08354 100644 --- a/addons/viewport/preview.js +++ b/addons/viewport/preview.js @@ -4,4 +4,3 @@ exports.configureViewport = preview.configureViewport; exports.DEFAULT_VIEWPORT = preview.DEFAULT_VIEWPORT; exports.INITIAL_VIEWPORTS = preview.INITIAL_VIEWPORTS; exports.withViewport = preview.withViewport; -exports.Viewport = preview.Viewport; diff --git a/addons/viewport/src/Tool.js b/addons/viewport/src/Tool.js index 3e986d455d1..2c4390838f1 100644 --- a/addons/viewport/src/Tool.js +++ b/addons/viewport/src/Tool.js @@ -1,6 +1,7 @@ import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; import memoize from 'memoizerific'; +import deprecate from 'util-deprecate'; import { Global } from '@storybook/theming'; @@ -8,6 +9,7 @@ import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/comp import { SET_STORIES } from '@storybook/core-events'; import { PARAM_KEY } from './constants'; +import { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from './defaults'; const toList = memoize(50)(items => items ? Object.entries(items).map(([id, value]) => ({ ...value, id })) : [] @@ -26,14 +28,35 @@ const createItem = memoize(1000)((id, name, value, change) => ({ const flip = ({ width, height }) => ({ height: width, width: height }); +const deprecatedViewportString = deprecate( + () => 0, + 'The viewport parameter must be an object with keys `viewports` and `defaultViewport`' +); +const deprecateOnViewportChange = deprecate( + () => 0, + 'The viewport parameter `onViewportChange` is no longer supported' +); + const getState = memoize(10)((props, state, change) => { const data = props.api.getCurrentStoryData(); - const list = toList(data && data.parameters && data.parameters[PARAM_KEY]); + const parameters = data && data.parameters && data.parameters[PARAM_KEY]; + + if (parameters && typeof parameters !== 'object') { + deprecatedViewportString(); + } + + const { disable, viewports, defaultViewport, onViewportChange } = parameters || {}; + + if (onViewportChange) { + deprecateOnViewportChange(); + } + + const list = disable ? [] : toList(viewports || INITIAL_VIEWPORTS); const selected = state.selected === 'responsive' || list.find(i => i.id === state.selected) ? state.selected - : list.find(i => i.default) || 'responsive'; + : list.find(i => i.default) || defaultViewport || DEFAULT_VIEWPORT; const resets = selected !== 'responsive' diff --git a/addons/viewport/src/constants.js b/addons/viewport/src/constants.js index 90beefe690d..1a9e8f7376b 100644 --- a/addons/viewport/src/constants.js +++ b/addons/viewport/src/constants.js @@ -1,5 +1,5 @@ export const ADDON_ID = 'storybook/viewport'; -export const PARAM_KEY = 'viewports'; +export const PARAM_KEY = 'viewport'; export default { UPDATE: `${ADDON_ID}/update`, diff --git a/addons/viewport/src/legacy_preview/index.js b/addons/viewport/src/legacy_preview/index.js index 9a4af3066d5..7bb7c3ef5fc 100644 --- a/addons/viewport/src/legacy_preview/index.js +++ b/addons/viewport/src/legacy_preview/index.js @@ -1,7 +1,7 @@ import deprecate from 'util-deprecate'; export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from '../defaults'; -export { default as withViewport, Viewport } from './withViewport'; +export { default as withViewport } from './withViewport'; export const configureViewport = deprecate(() => {}, -'usage is deprecated, use .addParameters({ viewport }) instead'); +'configureViewport is no longer supported, use .addParameters({ viewport }) instead'); diff --git a/addons/viewport/src/legacy_preview/withViewport.js b/addons/viewport/src/legacy_preview/withViewport.js index 5cdb169ca31..f1f6ca2a6f9 100644 --- a/addons/viewport/src/legacy_preview/withViewport.js +++ b/addons/viewport/src/legacy_preview/withViewport.js @@ -3,17 +3,11 @@ import deprecate from 'util-deprecate'; const withViewport = makeDecorator({ name: 'withViewport', - parameterName: 'viewports', - allowDeprecatedUsage: true, + parameterName: 'viewport', wrapper: deprecate( (getStory, context) => getStory(context), - 'usage is deprecated, use .addParameters({ viewport }) instead' + 'withViewport is no longer supported, use .addParameters({ viewport }) instead' ), }); export default withViewport; - -export const Viewport = deprecate( - ({ children }) => children, - ` usage is deprecated, use .addParameters({ viewport }) instead` -); diff --git a/app/angular/package.json b/app/angular/package.json index 1627ed717b3..1d3d3fdfb86 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -26,17 +26,17 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "5.0.0-beta.3", - "@storybook/node-logger": "5.0.0-beta.3", + "@storybook/core": "5.1.0-alpha.0", + "@storybook/node-logger": "5.1.0-alpha.0", "angular2-template-loader": "^0.6.2", - "core-js": "^2.6.2", + "core-js": "^2.6.5", "fork-ts-checker-webpack-plugin": "^0.5.2", "global": "^4.3.2", "regenerator-runtime": "^0.12.1", "sass-loader": "^7.1.0", - "ts-loader": "^5.3.2", + "ts-loader": "^5.3.3", "tsconfig-paths-webpack-plugin": "^3.2.0", - "webpack": "^4.29.3" + "webpack": "^4.29.6" }, "devDependencies": { "zone.js": "^0.8.29" @@ -50,7 +50,7 @@ "@angular/platform-browser": ">=6.0.0", "@angular/platform-browser-dynamic": ">=6.0.0", "babel-loader": "^7.0.0 || ^8.0.0", - "zone.js": "^0.8.27" + "zone.js": "^0.8.29" }, "publishConfig": { "access": "public" diff --git a/app/ember/package.json b/app/ember/package.json index c30516d3062..1854465d4f8 100644 --- a/app/ember/package.json +++ b/app/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybooks/storybook/tree/master/app/ember", "bugs": { @@ -23,10 +23,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@ember/test-helpers": "^1.3.1", - "@storybook/core": "5.0.0-beta.3", + "@ember/test-helpers": "^1.5.0", + "@storybook/core": "5.1.0-alpha.0", "common-tags": "^1.8.0", - "core-js": "^2.6.2", + "core-js": "^2.6.5", "global": "^4.3.2", "regenerator-runtime": "^0.12.1" }, diff --git a/app/html/package.json b/app/html/package.json index d0e99f8203f..4d9f2bea948 100644 --- a/app/html/package.json +++ b/app/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -25,9 +25,9 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "5.0.0-beta.3", + "@storybook/core": "5.1.0-alpha.0", "common-tags": "^1.8.0", - "core-js": "^2.6.2", + "core-js": "^2.6.5", "global": "^4.3.2", "html-loader": "^0.5.5", "regenerator-runtime": "^0.12.1" diff --git a/app/marko/package.json b/app/marko/package.json index 57f4a674031..2f3b7f977f3 100644 --- a/app/marko/package.json +++ b/app/marko/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/marko", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -26,17 +26,17 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "5.0.0-beta.3", + "@storybook/core": "5.1.0-alpha.0", "common-tags": "^1.8.0", - "core-js": "^2.6.2", + "core-js": "^2.6.5", "global": "^4.3.2", - "marko-loader": "^1.3.3", + "marko-loader": "^1.5.0", "raw-loader": "^1.0.0", "regenerator-runtime": "^0.12.1" }, "peerDependencies": { "babel-loader": "^7.0.0 || ^8.0.0", - "marko": "^4.10.0", + "marko": "^4.15.2", "marko-widgets": "^7.0.1" }, "publishConfig": { diff --git a/app/marko/src/server/framework-preset-marko.js b/app/marko/src/server/framework-preset-marko.js index eb0cef0b82f..2975ccf6c5e 100644 --- a/app/marko/src/server/framework-preset-marko.js +++ b/app/marko/src/server/framework-preset-marko.js @@ -8,6 +8,9 @@ export function webpack(config) { { test: /\.marko$/, loader: require.resolve('marko-loader'), + options: { + compiler: require.resolve('marko/compiler'), + }, }, ], }, diff --git a/app/mithril/package.json b/app/mithril/package.json index 19f31296c03..0a4bb202664 100644 --- a/app/mithril/package.json +++ b/app/mithril/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/mithril", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Storybook for Mithril: Develop Mithril Component in isolation.", "keywords": [ "storybook" @@ -27,9 +27,9 @@ }, "dependencies": { "@babel/plugin-transform-react-jsx": "^7.3.0", - "@storybook/core": "5.0.0-beta.3", + "@storybook/core": "5.1.0-alpha.0", "common-tags": "^1.8.0", - "core-js": "^2.6.2", + "core-js": "^2.6.5", "global": "^4.3.2", "regenerator-runtime": "^0.12.1" }, diff --git a/app/polymer/package.json b/app/polymer/package.json index 92198d73423..90ad3b0e3e7 100644 --- a/app/polymer/package.json +++ b/app/polymer/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/polymer", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -25,13 +25,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "5.0.0-beta.3", + "@storybook/core": "5.1.0-alpha.0", "@webcomponents/webcomponentsjs": "^1.2.0", "common-tags": "^1.8.0", - "core-js": "^2.6.2", + "core-js": "^2.6.5", "global": "^4.3.2", "regenerator-runtime": "^0.12.1", - "webpack": "^4.29.3" + "webpack": "^4.29.6" }, "devDependencies": { "lit-html": "^1.0.0", diff --git a/app/preact/package.json b/app/preact/package.json index 034c82d0f2d..b406eb71518 100644 --- a/app/preact/package.json +++ b/app/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" @@ -27,9 +27,9 @@ }, "dependencies": { "@babel/plugin-transform-react-jsx": "^7.3.0", - "@storybook/core": "5.0.0-beta.3", + "@storybook/core": "5.1.0-alpha.0", "common-tags": "^1.8.0", - "core-js": "^2.6.2", + "core-js": "^2.6.5", "global": "^4.3.2", "regenerator-runtime": "^0.12.1" }, @@ -38,7 +38,7 @@ }, "peerDependencies": { "babel-loader": "^7.0.0 || ^8.0.0", - "preact": "^8.3.1" + "preact": "^8.4.2" }, "publishConfig": { "access": "public" diff --git a/app/react-native/package.json b/app/react-native/package.json index a6526a7ce14..15ef8356558 100644 --- a/app/react-native/package.json +++ b/app/react-native/package.json @@ -1,6 +1,7 @@ { "name": "@storybook/react-native", - "version": "5.0.0-beta.3", + "private": true, + "version": "5.1.0-alpha.0", "description": "A better way to develop React Native Components for your app", "keywords": [ "react", @@ -26,12 +27,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.0.0-beta.3", - "@storybook/channel-websocket": "5.0.0-beta.3", - "@storybook/channels": "5.0.0-beta.3", - "@storybook/core": "5.0.0-beta.3", - "@storybook/core-events": "5.0.0-beta.3", - "@storybook/ui": "5.0.0-beta.3", + "@storybook/addons": "5.1.0-alpha.0", + "@storybook/channel-websocket": "5.1.0-alpha.0", + "@storybook/channels": "5.1.0-alpha.0", + "@storybook/core": "5.1.0-alpha.0", + "@storybook/core-events": "5.1.0-alpha.0", + "@storybook/ui": "5.1.0-alpha.0", "babel-loader": "^8.0.4", "babel-plugin-macros": "^2.4.5", "babel-plugin-syntax-async-functions": "^6.13.0", @@ -48,23 +49,23 @@ "commander": "^2.19.0", "dotenv-webpack": "^1.7.0", "ejs": "^2.6.1", - "express": "^4.16.3", + "express": "^4.16.4", "find-cache-dir": "^2.0.0", "global": "^4.3.2", "html-webpack-plugin": "^4.0.0-beta.2", "json5": "^2.1.0", "lazy-universal-dotenv": "^2.0.0", - "prop-types": "^15.6.2", + "prop-types": "^15.7.2", "raw-loader": "^1.0.0", - "react-dev-utils": "^7.0.1", + "react-dev-utils": "^7.0.3", "react-native-swipe-gestures": "^1.0.2", - "shelljs": "^0.8.2", - "url-parse": "^1.4.3", + "shelljs": "^0.8.3", + "url-parse": "^1.4.4", "uuid": "^3.3.2", - "webpack": "^4.29.3", - "webpack-dev-middleware": "^3.5.2", + "webpack": "^4.29.6", + "webpack-dev-middleware": "^3.6.0", "webpack-hot-middleware": "^2.24.3", - "ws": "^6.1.3" + "ws": "^6.1.4" }, "devDependencies": { "react-native": "^0.52.2" diff --git a/app/react/package.json b/app/react/package.json index 15ba7909135..514c1f5bbc4 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -29,22 +29,22 @@ "@babel/plugin-transform-react-constant-elements": "^7.2.0", "@babel/preset-flow": "^7.0.0", "@babel/preset-react": "^7.0.0", - "@storybook/core": "5.0.0-beta.3", - "@storybook/node-logger": "5.0.0-beta.3", + "@storybook/core": "5.1.0-alpha.0", + "@storybook/node-logger": "5.1.0-alpha.0", "@svgr/webpack": "^4.0.3", "babel-plugin-named-asset-import": "^0.3.1", "babel-plugin-react-docgen": "^2.0.2", "babel-preset-react-app": "^7.0.1", "common-tags": "^1.8.0", - "core-js": "^2.6.2", + "core-js": "^2.6.5", "global": "^4.3.2", "lodash": "^4.17.11", "mini-css-extract-plugin": "^0.5.0", - "prop-types": "^15.6.2", - "react-dev-utils": "^7.0.1", + "prop-types": "^15.7.2", + "react-dev-utils": "^7.0.3", "regenerator-runtime": "^0.12.1", "semver": "^5.6.0", - "webpack": "^4.29.3" + "webpack": "^4.29.6" }, "peerDependencies": { "babel-loader": "^7.0.0 || ^8.0.0", diff --git a/app/riot/package.json b/app/riot/package.json index 2034aea46e1..45474c02f14 100644 --- a/app/riot/package.json +++ b/app/riot/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/riot", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -25,16 +25,16 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "5.0.0-beta.3", + "@storybook/core": "5.1.0-alpha.0", "common-tags": "^1.8.0", - "core-js": "^2.6.2", + "core-js": "^2.6.5", "global": "^4.3.2", "raw-loader": "^1.0.0", "regenerator-runtime": "^0.12.1" }, "devDependencies": { "@babel/plugin-transform-modules-commonjs": "^7.2.0", - "@babel/preset-env": "^7.3.1", + "@babel/preset-env": "^7.3.4", "@babel/preset-flow": "^7.0.0", "@babel/preset-react": "^7.0.0" }, diff --git a/app/svelte/package.json b/app/svelte/package.json index 9e9563f9163..94e90459235 100644 --- a/app/svelte/package.json +++ b/app/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -26,15 +26,15 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "5.0.0-beta.3", + "@storybook/core": "5.1.0-alpha.0", "common-tags": "^1.8.0", - "core-js": "^2.6.2", + "core-js": "^2.6.5", "global": "^4.3.2", "regenerator-runtime": "^0.12.1" }, "devDependencies": { "svelte": "^2.16.1", - "svelte-loader": "^2.12.0" + "svelte-loader": "^2.13.3" }, "peerDependencies": { "babel-loader": "^7.0.0 || ^8.0.0", diff --git a/app/vue/package.json b/app/vue/package.json index 01f39344883..eaf326a10d9 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue", - "version": "5.0.0-beta.3", + "version": "5.1.0-alpha.0", "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -26,23 +26,23 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "5.0.0-beta.3", + "@storybook/core": "5.1.0-alpha.0", "common-tags": "^1.8.0", - "core-js": "^2.6.2", + "core-js": "^2.6.5", "global": "^4.3.2", "regenerator-runtime": "^0.12.1" }, "devDependencies": { "babel-preset-vue": "^2.0.2", - "vue": "^2.6.3", - "vue-loader": "15.6.2", - "vue-template-compiler": "^2.6.3" + "vue": "^2.6.8", + "vue-loader": "^15.7.0", + "vue-template-compiler": "^2.6.8" }, "peerDependencies": { "babel-loader": "^7.0.0 || ^8.0.0", - "vue": ">=2.5.16", - "vue-loader": ">=15.x.x", - "vue-template-compiler": ">=2.5.16" + "vue": "^2.6.8", + "vue-loader": "^15.7.0", + "vue-template-compiler": "^2.6.8" }, "publishConfig": { "access": "public" diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js index 3b807525588..ac639e25976 100644 --- a/docs/gatsby-config.js +++ b/docs/gatsby-config.js @@ -19,7 +19,6 @@ module.exports = { '/basics/writing-stories/', '/basics/exporting-storybook/', '/basics/faq/', - '/basics/community/', '/basics/live-examples/', ], configurations: [ @@ -45,7 +44,6 @@ module.exports = { addons: [ '/addons/introduction/', '/addons/using-addons/', - '/addons/addon-gallery/', '/addons/writing-addons/', '/addons/api/', ], diff --git a/docs/gatsby-node.js b/docs/gatsby-node.js index 20b1735765f..e9676a818b3 100644 --- a/docs/gatsby-node.js +++ b/docs/gatsby-node.js @@ -14,6 +14,24 @@ function pagesToSitemap(pages) { })); } +function getVersionData(distTag) { + const versionFile = `${__dirname}/src/versions/${distTag}.json`; + if (!fs.existsSync(versionFile)) { + return null; + } + const data = { + [distTag]: JSON.parse(fs.readFileSync(versionFile)), + }; + return data; +} + +function generateVersionsFile() { + const latest = getVersionData('latest'); + const next = getVersionData('next'); + const data = { ...latest, ...next }; + fs.writeFileSync(`${__dirname}/public/versions.json`, JSON.stringify(data)); +} + function generateSitemap(pages) { const sitemap = sm.createSitemap({ hostname: 'https://storybook.js.org', @@ -36,6 +54,7 @@ module.exports = { } } `); + generateVersionsFile(); generateSitemap(result.data.allSitePage.edges.map(({ node }) => node)); }, onCreateNode({ node, boundActionCreators, getNode }) { diff --git a/docs/src/components/Footer/index.js b/docs/src/components/Footer/index.js index 8c88f57cfe5..92b9411936a 100644 --- a/docs/src/components/Footer/index.js +++ b/docs/src/components/Footer/index.js @@ -1,5 +1,4 @@ import React from 'react'; -import Link from 'gatsby-link'; import slackIcon from './images/slack-icon.png'; import githubIcon from './images/github-icon.png'; import './style.css'; @@ -10,7 +9,7 @@ const Footer = () => (
- Maintained by the Storybook Community. + Maintained by the Storybook Community.
{ + // Tailor the following test to your environment. + // This example assumes that any internal link (intended for Gatsby) + // will start with exactly one slash, and that anything else is external. + const internal = /^\/(?!\/)/.test(to); + + // Use Gatsby Link for internal links, and for others + if (internal) { + return ( + + {children} + + ); + } + return ( + + {children} + + ); +}; + +Link.propTypes = { + children: PropTypes.node.isRequired, + to: PropTypes.string.isRequired, +}; + class Header extends React.Component { renderSections() { - return sections.map(section => { - const { currentSection } = this.props; - const className = currentSection === section.id ? 'selected' : ''; - - return ( - - {section.caption} - - ); - }); + return sections.map(section => ( + + {section.caption} + + )); } render() { @@ -36,7 +62,7 @@ class Header extends React.Component {