diff --git a/.circleci/config.yml b/.circleci/config.yml index fcef34d0d0a..95236b5996e 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -4,7 +4,7 @@ aliases: - &defaults working_directory: /tmp/storybook docker: - - image: circleci/node:8 + - image: circleci/node:10 dependencies: pre: diff --git a/.eslintrc.js b/.eslintrc.js index 3cdb41d2dc9..0a2e0a462f1 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,162 +1,8 @@ -const error = 2; -const warn = 1; const ignore = 0; module.exports = { root: true, - extends: [ - 'airbnb', - 'plugin:jest/recommended', - 'plugin:import/react-native', - 'plugin:@typescript-eslint/recommended', - 'prettier', - 'prettier/react', - 'prettier/@typescript-eslint', - ], - plugins: [ - '@typescript-eslint', - 'prettier', - 'jest', - 'import', - 'react', - 'jsx-a11y', - 'json', - 'html', - ], - parser: '@typescript-eslint/parser', - parserOptions: { - ecmaVersion: 8, - sourceType: 'module', - ecmaFeatures: { - jsx: true, - }, - }, - env: { es6: true, node: true, 'jest/globals': true }, - settings: { - 'import/core-modules': ['enzyme'], - 'import/ignore': ['node_modules\\/(?!@storybook)'], - 'import/resolver': { - node: { - extensions: ['.js', '.ts', '.tsx', '.mjs', '.d.ts'], - paths: ['node_modules/', 'node_modules/@types/'], - }, - }, - 'html/html-extensions': ['.html'], - }, - rules: { - 'no-restricted-imports': [ - error, - { - paths: [ - { - name: 'lodash.isequal', - message: - 'Lodash modularised (and lodash < 4.17.11) have CVE vulnerabilities. Please use tree-shakeable imports like lodash/xxx instead', - }, - { - name: 'lodash.mergewith', - message: - 'Lodash modularised (and lodash < 4.17.11) have CVE vulnerabilities. Please use tree-shakeable imports like lodash/xxx instead', - }, - { - name: 'lodash.pick', - message: - 'Lodash modularised (and lodash < 4.17.11) have CVE vulnerabilities. Please use tree-shakeable imports like lodash/xxx instead', - }, - ], - // catch-all for any lodash modularised. The CVE is listed against the entire family for lodash < 4.17.11 - patterns: ['lodash.*'], - }, - ], - 'prettier/prettier': [warn], - 'no-debugger': process.env.NODE_ENV === 'production' ? error : ignore, - 'class-methods-use-this': ignore, - 'import/extensions': [ - error, - 'always', - { - js: 'never', - ts: 'never', - tsx: 'never', - mjs: 'never', - }, - ], - 'import/no-extraneous-dependencies': [ - error, - { - devDependencies: [ - 'examples/**', - 'examples-native/**', - '**/example/**', - '*.js', - '**/*.test.js', - '**/*.stories.*', - '**/scripts/*.js', - '**/stories/**/*.js', - '**/__tests__/**/*.js', - '**/.storybook/**/*.*', - ], - peerDependencies: true, - }, - ], - 'import/prefer-default-export': ignore, - 'import/default': error, - 'import/named': error, - 'import/namespace': error, - 'react/jsx-filename-extension': [ - warn, - { - extensions: ['.js', '.jsx', '.tsx'], - }, - ], - 'react/jsx-no-bind': [ - error, - { - ignoreDOMComponents: true, - ignoreRefs: true, - allowArrowFunctions: true, - allowFunctions: true, - allowBind: true, - }, - ], - 'jsx-a11y/accessible-emoji': ignore, - 'jsx-a11y/label-has-associated-control': [ - warn, - { - labelComponents: ['CustomInputLabel'], - labelAttributes: ['label'], - controlComponents: ['CustomInput'], - depth: 3, - }, - ], - 'react/no-unescaped-entities': ignore, - 'jsx-a11y/label-has-for': [error, { required: { some: ['nesting', 'id'] } }], - 'jsx-a11y/anchor-is-valid': [ - error, - { - components: ['A', 'LinkTo', 'Link'], - specialLink: ['overrideParams', 'kind', 'story', 'to'], - }, - ], - 'no-underscore-dangle': [ - error, - { - allow: [ - '__STORYBOOK_CLIENT_API__', - '__STORYBOOK_ADDONS_CHANNEL__', - '__STORYBOOK_STORY_STORE__', - ], - }, - ], - '@typescript-eslint/no-var-requires': ignore, - '@typescript-eslint/camelcase': ignore, - '@typescript-eslint/no-unused-vars': ignore, - '@typescript-eslint/explicit-member-accessibility': ignore, - '@typescript-eslint/explicit-function-return-type': ignore, - '@typescript-eslint/no-explicit-any': ignore, // would prefer to enable this - '@typescript-eslint/no-use-before-define': ignore, // this is duplicated - '@typescript-eslint/interface-name-prefix': ignore, // I don't agree - }, + extends: ['@storybook/eslint-config-storybook'], overrides: [ { files: [ diff --git a/.github/main.workflow b/.github/main.workflow deleted file mode 100644 index 6cbd4dcdcb7..00000000000 --- a/.github/main.workflow +++ /dev/null @@ -1,32 +0,0 @@ -action "Danger JS" { - uses = "danger/danger-js@master" - secrets = ["GITHUB_TOKEN"] - args = "--dangerfile .ci/danger/dangerfile.ts" -} - -workflow "Dangerfile JS Pull" { - on = "pull_request" - resolves = "Danger JS" -} - -workflow "Dangerfile JS Label" { - on = "label" - resolves = "Danger JS" -} - -# === - -action "Automention" { - uses = "shilman/automention@master" - secrets = ["GITHUB_TOKEN"] -} - -workflow "Automention Issues" { - on = "issues" - resolves = "Automention" -} - -workflow "Automention PRs" { - on = "pull_request" - resolves = "Automention" -} \ No newline at end of file diff --git a/.github/workflows/issues.yml b/.github/workflows/issues.yml new file mode 100644 index 00000000000..ae3f37a4c57 --- /dev/null +++ b/.github/workflows/issues.yml @@ -0,0 +1,12 @@ +on: issues +name: Automention Issues +jobs: + automention: + name: Automention + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@master + - name: Automention + uses: shilman/automention@master + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/label.yml b/.github/workflows/label.yml new file mode 100644 index 00000000000..1ad95fd643c --- /dev/null +++ b/.github/workflows/label.yml @@ -0,0 +1,14 @@ +on: label +name: Dangerfile JS Label +jobs: + dangerJS: + name: Danger JS + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@master + - name: Danger JS + uses: danger/danger-js@master + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + args: --dangerfile .ci/danger/dangerfile.ts diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index 78488bdfccd..6c6784258e8 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -1,4 +1,4 @@ -name: Node CI +name: Github CI on: [push] @@ -9,8 +9,8 @@ jobs: runs-on: ${{ matrix.os }} strategy: matrix: - node-version: [8, 10, 12] - os: [ubuntu-latest, windows-latest, macOS-latest] + node-version: [10] + os: [ubuntu-latest] steps: - uses: actions/checkout@v1 diff --git a/.github/workflows/pull_request-automention-prs.yml b/.github/workflows/pull_request-automention-prs.yml new file mode 100644 index 00000000000..ea2a220c29a --- /dev/null +++ b/.github/workflows/pull_request-automention-prs.yml @@ -0,0 +1,12 @@ +on: pull_request +name: Automention PRs +jobs: + automention: + name: Automention + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@master + - name: Automention + uses: shilman/automention@master + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/pull_request-dangerfile-js-pull.yml b/.github/workflows/pull_request-dangerfile-js-pull.yml new file mode 100644 index 00000000000..0a50068bc8a --- /dev/null +++ b/.github/workflows/pull_request-dangerfile-js-pull.yml @@ -0,0 +1,14 @@ +on: pull_request +name: Dangerfile JS Pull +jobs: + dangerJS: + name: Danger JS + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@master + - name: Danger JS + uses: danger/danger-js@master + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + args: --dangerfile .ci/danger/dangerfile.ts diff --git a/.gitignore b/.gitignore index 0830b92f408..124238c64b8 100644 --- a/.gitignore +++ b/.gitignore @@ -30,4 +30,5 @@ scripts/storage htpasswd /false storybook-out -/addons/docs/common/config-* \ No newline at end of file +/addons/docs/common/config-* +built-storybooks diff --git a/.npmignore b/.npmignore deleted file mode 100644 index 5bd91d1c926..00000000000 --- a/.npmignore +++ /dev/null @@ -1,10 +0,0 @@ -/example/ -/demo/ -/docs/ -/media/ -/node_modules/ -/.storybook/ - -*.md - -.babelrc diff --git a/.remarkrc.js b/.remarkrc.js index 2c78f5c6727..f8250d11d53 100644 --- a/.remarkrc.js +++ b/.remarkrc.js @@ -1,3 +1,2 @@ -module.exports = { - plugins: ['remark-preset-lint-recommended', ['remark-lint-list-item-indent', false]], -}; +/* eslint-disable import/no-extraneous-dependencies */ +module.exports = require('@storybook/linter-config/remark.config'); diff --git a/.travis.yml b/.travis.yml index f9a3e73708a..3846108e2aa 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,6 +1,6 @@ language: node_js node_js: - - "8" + - "10" cache: yarn: true diff --git a/CHANGELOG.md b/CHANGELOG.md index 725e0ad0436..208af4bb519 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,179 @@ +## 5.3.0-alpha.4 (September 26, 2019) + +### Bug Fixes + +* UI: Move addon dependencies to devDependencies ([#8206](https://github.com/storybookjs/storybook/pull/8206)) +* Addon-knobs: Handle undefined array value ([#8006](https://github.com/storybookjs/storybook/pull/8006)) + +### Maintenance + +* Build: Upgrade from node8 to node10 ([#8207](https://github.com/storybookjs/storybook/pull/8207)) + +## 5.3.0-alpha.3 (September 25, 2019) + +### Bug Fixes + +* Dependencies: add @types/webpack-env to apps that depend on it ([#8119](https://github.com/storybookjs/storybook/pull/8119)) +* UI: Removes default CSS margins on viewport ([#7742](https://github.com/storybookjs/storybook/pull/7742)) + +## 5.3.0-alpha.2 (September 24, 2019) + +### Bug Fixes + +* Core: Fix lib/core files ([#8182](https://github.com/storybookjs/storybook/pull/8182)) + +## 5.3.0-alpha.1 (September 23, 2019) + +### Bug Fixes + +* Preact: Allow JSX.Element story ([#8159](https://github.com/storybookjs/storybook/pull/8159)) +* Addon-docs: CSS classes for escape-hatch theming wrapper/content ([#8061](https://github.com/storybookjs/storybook/pull/8061)) +* CLI: Fix variable collisions in storiesof-to-csf ([#8106](https://github.com/storybookjs/storybook/pull/8106)) +* Storyshots: Fix STORYBOOK_HOOKS_CONTEXT error ([#8163](https://github.com/storybookjs/storybook/pull/8163)) +* Addon-contexts: Remove peer dependencies ([#7675](https://github.com/storybookjs/storybook/pull/7675)) +* Addon-knobs: Add missing type def ([#8118](https://github.com/storybookjs/storybook/pull/8118)) + +### Dependency Upgrades + +* Update react-draggable to 4.0.3 ([#8145](https://github.com/storybookjs/storybook/pull/8145)) + +## 5.2.1 (September 17, 2019) + +### Bug Fixes + +* Core: Fix error handling ([#8097](https://github.com/storybookjs/storybook/pull/8097)) + +## 5.3.0-alpha.0 (September 16, 2019) + +### Features + +* UI: Debounce sidebar search filter ([#8032](https://github.com/storybookjs/storybook/pull/8032)) + +### Bug Fixes + +* Core: Fix error handling ([#8097](https://github.com/storybookjs/storybook/pull/8097)) + +### Maintenance + +* CLI: Add wrapper packages: sb & storybook ([#8034](https://github.com/storybookjs/storybook/pull/8034)) +* Build: Update now config ([#8049](https://github.com/storybookjs/storybook/pull/8049)) + +## 5.2.0 (September 13, 2019) + +Storybook 5.2 is here! + +- πŸ“š DocsPage: Zero-config documentation +- πŸ“¦ Component Story Format: Portable ES6 modules +- πŸ–Ό Design System: Best practice component development +- 🧩 Addon API: Simplified w/ hooks + +5.2 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.2.0-alpha.*`, `5.2.0-beta.*`, and `5.2.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.2.0-rc.11 (September 10, 2019) + +### Features + +* DocsPage: show docs.storyDescription above story ([#8037](https://github.com/storybookjs/storybook/pull/8037)) + +### Maintenance + +* Migrate to new github actions ([#8045](https://github.com/storybookjs/storybook/pull/8045)) + +## 5.2.0-rc.10 (September 9, 2019) + +### Bug Fixes + +* Angular: remove webpack-env from tsconfig types ([#8036](https://github.com/storybookjs/storybook/pull/8036)) + +### Documentation + +* Guides: Update all guides to CSF ([#8030](https://github.com/storybookjs/storybook/pull/8030)) + +## 5.2.0-rc.9 (September 7, 2019) + +### Bug Fixes + +* Addon-knobs: allow array values in select and options knobs ([#8027](https://github.com/storybookjs/storybook/pull/8027)) + +## 5.2.0-rc.8 (September 6, 2019) + +### Bug Fixes + +* Addon-docs: Scroll story into view ([#7994](https://github.com/storybookjs/storybook/pull/7994)) +* Addon-docs: Fix LI styling for dark color theme ([#8015](https://github.com/storybookjs/storybook/pull/8015)) + +## 5.2.0-rc.7 (September 6, 2019) + +Publish failed + +## 5.2.0-rc.6 (September 5, 2019) + +### Bug Fixes + +* Addon-docs: Doc blocks fixes for dark theme ([#7991](https://github.com/storybookjs/storybook/pull/7991)) +* API: Fix useEfect in inline Docs ([#7992](https://github.com/storybookjs/storybook/pull/7992)) +* UI: Fix enableShortcuts option ([#7990](https://github.com/storybookjs/storybook/pull/7990)) +* Addon-docs: Error handling for invalid Story id ([#7965](https://github.com/storybookjs/storybook/pull/7965)) + +## 5.2.0-rc.5 (September 4, 2019) + +### Bug Fixes + +* CLI: Force welcome stories to show up first in load order ([#7979](https://github.com/storybookjs/storybook/pull/7979)) + +## 5.2.0-rc.4 (September 3, 2019) + +### Bug Fixes + +* Addon-docs: Fix MDX theme bleed with reset context ([#7974](https://github.com/storybookjs/storybook/pull/7974)) + +## 5.2.0-rc.3 (September 3, 2019) + +Failed publish + +## 5.2.0-rc.2 (September 1, 2019) + +### Bug Fixes + +* Addon-docs: Fix inline stories using react hooks ([#7946](https://github.com/storybookjs/storybook/pull/7946)) + +## 5.2.0-rc.1 (August 31, 2019) + +### Features + +* Core: Add html lang attribute to iframe ([#7892](https://github.com/storybookjs/storybook/pull/7892)) + +### Bug Fixes + +* Source-loader: Fix CSF display name handling ([#7940](https://github.com/storybookjs/storybook/pull/7940)) +* React-native: Resolve deprecated methods ([#7908](https://github.com/storybookjs/storybook/pull/7908)) +* Addon-viewport: keep styles on rotation-change ([#7683](https://github.com/storybookjs/storybook/pull/7683)) +* Addon-viewport: Fix defaultViewport ([#7934](https://github.com/storybookjs/storybook/pull/7934)) + +## 5.2.0-rc.0 (August 30, 2019) + +5.2 is in RC!!! πŸŽ‰What this means: + +- no glaring bugs relating to new features (that we know of) +- bugfixes only until 5.2 final +- follow-on features to be released in `5.3-alpha` ASAP + +Track progress on the [5.2 release issue](https://github.com/storybookjs/storybook/issues/7430) + +## 5.2.0-beta.48 (August 30, 2019) + +### Bug Fixes + +* Addon-docs: Fix docs-only story ID suffix ([#7921](https://github.com/storybookjs/storybook/pull/7921)) + +### Maintenance + +* Replace favicon with new Storybook icon. ([#7922](https://github.com/storybookjs/storybook/pull/7922)) + +### Dependency Upgrades + +* Bump react-draggable from 3.1.1 to 3.3.2 ([#7912](https://github.com/storybookjs/storybook/pull/7912)) + ## 5.2.0-beta.47 (August 30, 2019) ### Bug Fixes @@ -904,7 +1080,7 @@ Storybook 5.1 is a juicy upgrade including: - πŸ›  Context addon: New UI for themes, internationalization, & more - πŸŽ› Presets: One-line configuration for babel, webpack, & addons -5.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 ugprade from `5.0` or earlier. +5.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. ## 5.1.0 (June 5, 2019) @@ -1996,7 +2172,7 @@ Storybook 5.0 is a completely new UI with the following improvements: - ⌨️ 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/storybookjs/storybook/blob/next/MIGRATION.md) to ugprade from `4.x`. + 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/storybookjs/storybook/blob/next/MIGRATION.md) to upgrade from `4.x`. ## 5.0.0-rc.11 (March 5, 2019) diff --git a/MIGRATION.md b/MIGRATION.md index 059d3ea0f91..dbfea23fede 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -2,6 +2,8 @@ - [Migration](#migration) - [From version 5.1.x to 5.2.x](#from-version-51x-to-52x) + - [Source-loader](#source-loader) + - [Default viewports](#default-viewports) - [Grid toolbar-feature](#grid-toolbar-feature) - [Docs mode docgen](#docs-mode-docgen) - [storySort option](#storysort-option) @@ -67,9 +69,19 @@ ## From version 5.1.x to 5.2.x -### default viewports +### Source-loader -The default viewports have been reduced to a smaller set, we think is enough for most usecases. +Addon-storysource contains a loader, `@storybook/addon-storysource/loader`, which has been deprecated in 5.2. If you use it, you'll see the warning: + +``` +@storybook/addon-storysource/loader is deprecated, please use @storybook/source-loader instead. +``` + +To upgrade to `@storybook/source-loader`, simply `npm install -D @storybook/source-laoder` (or use `yarn`), and replace every instance of `@storybook/addon-storysource/loaoder` with `@storybook/source-loader`. + +### Default viewports + +The default viewports have been reduced to a smaller set, we think is enough for most use cases. You can get the old default back by adding the following to your `config.js`: ```js diff --git a/README.md b/README.md index f80eb15121a..df4d1f1623f 100644 --- a/README.md +++ b/README.md @@ -164,7 +164,7 @@ We have a badge! Link it to your live Storybook example. [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/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/storybookjs/press). +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 [brand repo](https://github.com/storybookjs/brand). ## Community diff --git a/addons/a11y/README.md b/addons/a11y/README.md index 7d1fc351692..584e49f6702 100755 --- a/addons/a11y/README.md +++ b/addons/a11y/README.md @@ -45,7 +45,7 @@ storiesOf('button', module) ``` For more customizability. Use the `addParameters` function to configure [aXe options](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure). -You can override these options at story level too. +You can override these options [at story level too](https://storybook.js.org/docs/configurations/options-parameter/#per-story-options). ```js import React from 'react'; diff --git a/addons/a11y/package.json b/addons/a11y/package.json index e3554469660..6a08b9a1251 100644 --- a/addons/a11y/package.json +++ b/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "a11y addon for storybook", "keywords": [ "a11y", @@ -20,18 +20,24 @@ "directory": "addons/a11y" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "register.js" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/api": "5.2.0-beta.47", - "@storybook/client-logger": "5.2.0-beta.47", - "@storybook/components": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", - "@storybook/theming": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/api": "5.3.0-alpha.4", + "@storybook/client-logger": "5.3.0-alpha.4", + "@storybook/components": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", + "@storybook/theming": "5.3.0-alpha.4", "axe-core": "^3.3.2", "common-tags": "^1.8.0", "core-js": "^3.0.1", diff --git a/addons/actions/package.json b/addons/actions/package.json index 38c09766a8f..d004c9f26a6 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Action Logger addon for storybook", "keywords": [ "storybook" @@ -15,18 +15,24 @@ "directory": "addons/actions" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "register.js" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/api": "5.2.0-beta.47", - "@storybook/client-api": "5.2.0-beta.47", - "@storybook/components": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", - "@storybook/theming": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/api": "5.3.0-alpha.4", + "@storybook/client-api": "5.3.0-alpha.4", + "@storybook/components": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", + "@storybook/theming": "5.3.0-alpha.4", "core-js": "^3.0.1", "fast-deep-equal": "^2.0.1", "global": "^4.3.2", diff --git a/addons/backgrounds/README.md b/addons/backgrounds/README.md index db9cde1aa46..e55d1a0c2a2 100644 --- a/addons/backgrounds/README.md +++ b/addons/backgrounds/README.md @@ -4,7 +4,7 @@ Storybook Background Addon can be used to change background colors inside the pr [Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md) -![React Storybook Screenshot](https://storybook.js.org/img/addon-backgrounds.gif) +![React Storybook Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/master/docs/static/img/addon-backgrounds.gif) ## Installation diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json index 0f997875a23..f1d5463c9b7 100644 --- a/addons/backgrounds/package.json +++ b/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "A storybook addon to show different backgrounds for your preview", "keywords": [ "addon", @@ -19,18 +19,24 @@ }, "license": "MIT", "author": "jbaxleyiii", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "register.js" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/api": "5.2.0-beta.47", - "@storybook/client-logger": "5.2.0-beta.47", - "@storybook/components": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", - "@storybook/theming": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/api": "5.3.0-alpha.4", + "@storybook/client-logger": "5.3.0-alpha.4", + "@storybook/components": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", + "@storybook/theming": "5.3.0-alpha.4", "core-js": "^3.0.1", "memoizerific": "^1.11.3", "react": "^16.8.3", diff --git a/addons/backgrounds/src/constants.ts b/addons/backgrounds/src/constants.ts index 8154ba04725..566bc9dbbb3 100644 --- a/addons/backgrounds/src/constants.ts +++ b/addons/backgrounds/src/constants.ts @@ -1,5 +1,6 @@ export const ADDON_ID = 'storybook/background'; export const PARAM_KEY = 'backgrounds'; +export const GRID_PARAM_KEY = 'grid'; export const EVENTS = { UPDATE: `${ADDON_ID}/update`, diff --git a/addons/backgrounds/src/containers/BackgroundSelector.tsx b/addons/backgrounds/src/containers/BackgroundSelector.tsx index 3abae84952b..f2876d89cef 100644 --- a/addons/backgrounds/src/containers/BackgroundSelector.tsx +++ b/addons/backgrounds/src/containers/BackgroundSelector.tsx @@ -128,7 +128,7 @@ export class BackgroundSelector extends Component { ({ [`#${iframeId}`]: { - background: + backgroundColor: selectedBackgroundColor === 'transparent' ? theme.background.content : selectedBackgroundColor, diff --git a/addons/backgrounds/src/containers/GridSelector.tsx b/addons/backgrounds/src/containers/GridSelector.tsx index 7009d594078..b078b540d1d 100644 --- a/addons/backgrounds/src/containers/GridSelector.tsx +++ b/addons/backgrounds/src/containers/GridSelector.tsx @@ -1,15 +1,20 @@ -import React, { FunctionComponent } from 'react'; +import React, { FunctionComponent, memo } from 'react'; -import { useAddonState } from '@storybook/api'; +import { useAddonState, useParameter } from '@storybook/api'; import { Global } from '@storybook/theming'; import { Icons, IconButton } from '@storybook/components'; -import { ADDON_ID } from '../constants'; +import { ADDON_ID, GRID_PARAM_KEY } from '../constants'; + +export interface BackgroundGridParameters { + cellSize: number; +} const iframeId = 'storybook-preview-iframe'; -export const GridSelector: FunctionComponent = () => { +export const GridSelector: FunctionComponent = memo(() => { const [state, setState] = useAddonState(`${ADDON_ID}/grid`); + const { cellSize } = useParameter(GRID_PARAM_KEY, { cellSize: 20 }); return ( { ) : null} ); -}; +}); diff --git a/addons/centered/package.json b/addons/centered/package.json index 688159f95f4..950d29b5131 100644 --- a/addons/centered/package.json +++ b/addons/centered/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-centered", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Storybook decorator to center components", "keywords": [ "addon", @@ -17,13 +17,27 @@ }, "license": "MIT", "author": "Muhammed Thanish ", + "files": [ + "dist/**/*", + "README.md", + "angular.js", + "angular.d.ts", + "ember.js", + "html.js", + "mithril.js", + "preact.js", + "rax.js", + "react.js", + "svelte.js", + "vue.js" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", "core-js": "^3.0.1", "global": "^4.3.2", "util-deprecate": "^1.0.2" @@ -33,13 +47,5 @@ "mithril": "*", "preact": "*", "react": "*" - }, - "peerDependencies": { - "mithril": "*", - "preact": "*", - "react": "*" - }, - "publishConfig": { - "access": "public" } } diff --git a/addons/centered/src/mithril.tsx b/addons/centered/src/mithril.tsx index 5ba2d4cc26b..5398d7da5a6 100644 --- a/addons/centered/src/mithril.tsx +++ b/addons/centered/src/mithril.tsx @@ -1,4 +1,5 @@ /** @jsx m */ +/* eslint-disable import/no-extraneous-dependencies */ import m, { ComponentTypes } from 'mithril'; import { makeDecorator } from '@storybook/addons'; import parameters from './parameters'; diff --git a/addons/centered/src/parameters.ts b/addons/centered/src/parameters.ts index 8baf4066664..87b1150136a 100644 --- a/addons/centered/src/parameters.ts +++ b/addons/centered/src/parameters.ts @@ -1,3 +1,4 @@ +// eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion const parameters = { name: 'centered', parameterName: 'centered', diff --git a/addons/centered/src/preact.tsx b/addons/centered/src/preact.tsx index ccb2bf1512b..ed217515947 100644 --- a/addons/centered/src/preact.tsx +++ b/addons/centered/src/preact.tsx @@ -1,4 +1,5 @@ /** @jsx h */ +/* eslint-disable import/no-extraneous-dependencies */ import { Component, h } from 'preact'; import { makeDecorator } from '@storybook/addons'; import parameters from './parameters'; diff --git a/addons/centered/src/rax.js b/addons/centered/src/rax.js index 8833b2337a8..ab3d0c3e287 100644 --- a/addons/centered/src/rax.js +++ b/addons/centered/src/rax.js @@ -1,9 +1,8 @@ /** @jsx createElement */ -// eslint-disable-next-line import/no-extraneous-dependencies +/* eslint-disable import/no-extraneous-dependencies */ import { createElement } from 'rax'; -// eslint-disable-next-line import/no-extraneous-dependencies import View from 'rax-view'; -import { makeDecorator } from '@storybook/addons/src/make-decorator'; +import { makeDecorator } from '@storybook/addons'; import parameters from './parameters'; import styles from './styles'; diff --git a/addons/centered/src/react.tsx b/addons/centered/src/react.tsx index 9eb63f774d8..f914f3120c7 100644 --- a/addons/centered/src/react.tsx +++ b/addons/centered/src/react.tsx @@ -1,3 +1,4 @@ +/* eslint-disable import/no-extraneous-dependencies */ import React, { ReactNode } from 'react'; import { makeDecorator, StoryFn } from '@storybook/addons'; import parameters from './parameters'; diff --git a/addons/centered/src/styles.ts b/addons/centered/src/styles.ts index 9a8dcf291da..4fc4796bdf6 100644 --- a/addons/centered/src/styles.ts +++ b/addons/centered/src/styles.ts @@ -1,3 +1,4 @@ +// eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion const styles = { style: { position: 'fixed', diff --git a/addons/contexts/package.json b/addons/contexts/package.json index 01fa4fece55..cd33a5d77eb 100644 --- a/addons/contexts/package.json +++ b/addons/contexts/package.json @@ -1,16 +1,20 @@ { "name": "@storybook/addon-contexts", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Storybook Addon Contexts", "keywords": [ - "storybook", "preact", "react", + "storybook", "vue" ], - "author": "Leo Y. Li", + "repository": { + "type": "git", + "url": "https://github.com/storybookjs/storybook.git", + "directory": "addons/contexts" + }, "license": "MIT", - "main": "dist/register.js", + "author": "Leo Y. Li", "files": [ "dist/**/*", "register.js", @@ -18,21 +22,19 @@ "react.js", "vue.js" ], - "repository": { - "type": "git", - "url": "https://github.com/storybookjs/storybook.git", - "directory": "addons/contexts" - }, + "main": "dist/register.js", "scripts": { - "prepare": "node ../../scripts/prepare.js", - "dev:check-types": "tsc --noEmit" + "dev:check-types": "tsc --noEmit", + "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/api": "5.2.0-beta.47", - "@storybook/components": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", - "core-js": "^3.0.1" + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/api": "5.3.0-alpha.4", + "@storybook/components": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", + "core-js": "^3.0.1", + "global": "^4.3.2", + "qs": "^6.6.0" }, "peerDependencies": { "global": "*", @@ -41,11 +43,6 @@ "react": "*", "vue": "*" }, - "devDependencies": { - "preact": "*", - "react": "*", - "vue": "*" - }, "publishConfig": { "access": "public" } diff --git a/addons/contexts/src/manager/ContextsManager.tsx b/addons/contexts/src/manager/ContextsManager.tsx index 718fd3adee8..2af9ef30aa3 100644 --- a/addons/contexts/src/manager/ContextsManager.tsx +++ b/addons/contexts/src/manager/ContextsManager.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState, useCallback } from 'react'; -import { useChannel } from './libs/useChannel'; +import { useChannel } from '@storybook/api'; import { ToolBar } from './components/ToolBar'; import { deserialize, serialize } from '../shared/serializers'; import { PARAM, REBOOT_MANAGER, UPDATE_MANAGER, UPDATE_PREVIEW } from '../shared/constants'; @@ -21,11 +21,13 @@ export const ContextsManager: ContextsManager = ({ api }) => { ); // from preview - useChannel(UPDATE_MANAGER, newNodes => setNodes(newNodes || []), []); + const emit = useChannel({ + [UPDATE_MANAGER]: newNodes => setNodes(newNodes || []), + }); // to preview - useEffect(() => api.emit(REBOOT_MANAGER), []); - useEffect(() => api.emit(UPDATE_PREVIEW, state), [state]); + useEffect(() => emit(REBOOT_MANAGER), []); + useEffect(() => emit(UPDATE_PREVIEW, state), [state]); useEffect(() => api.setQueryParams({ [PARAM]: serialize(state) }), [state]); return ; diff --git a/addons/contexts/src/manager/libs/useChannel.ts b/addons/contexts/src/manager/libs/useChannel.ts deleted file mode 100644 index f1704a5ba4e..00000000000 --- a/addons/contexts/src/manager/libs/useChannel.ts +++ /dev/null @@ -1,19 +0,0 @@ -import addons from '@storybook/addons'; -import { useEffect } from 'react'; -import { AnyFunctionReturns } from '../../shared/types.d'; - -/** - * The React hook version of Storybook Channel API. - */ -type UseChannel = ( - event: string, - eventHandler: AnyFunctionReturns, - input?: unknown[] -) => void; - -export const useChannel: UseChannel = (event, eventHandler, inputs = []) => - useEffect(() => { - const channel = addons.getChannel(); - channel.on(event, eventHandler); - return () => channel.removeListener(event, eventHandler); - }, inputs); diff --git a/addons/cssresources/package.json b/addons/cssresources/package.json index 8e2bdc257a1..eb7c212ad9a 100644 --- a/addons/cssresources/package.json +++ b/addons/cssresources/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-cssresources", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "A storybook addon to switch between css resources at runtime for your story", "keywords": [ "addon", @@ -19,16 +19,22 @@ }, "license": "MIT", "author": "nm123github", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "register.js" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/api": "5.2.0-beta.47", - "@storybook/components": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/api": "5.3.0-alpha.4", + "@storybook/components": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", "core-js": "^3.0.1", "global": "^4.3.2", "react": "^16.8.3" diff --git a/addons/design-assets/package.json b/addons/design-assets/package.json index fc15b1c4630..b13c087de83 100644 --- a/addons/design-assets/package.json +++ b/addons/design-assets/package.json @@ -1,14 +1,14 @@ { "name": "@storybook/addon-design-assets", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Design asset preview for storybook", "keywords": [ "addon", - "storybook", - "parameter", - "design", "assets", + "design", "files", + "parameter", + "storybook", "viewer" ], "homepage": "https://github.com/storybookjs/storybook#readme", @@ -21,18 +21,24 @@ "directory": "addons/design-assets" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "register.js" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/api": "5.2.0-beta.47", - "@storybook/client-logger": "5.2.0-beta.47", - "@storybook/components": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", - "@storybook/theming": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/api": "5.3.0-alpha.4", + "@storybook/client-logger": "5.3.0-alpha.4", + "@storybook/components": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", + "@storybook/theming": "5.3.0-alpha.4", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/addons/docs/README.md b/addons/docs/README.md index 25d168c7bb7..3cd64bc3b9f 100644 --- a/addons/docs/README.md +++ b/addons/docs/README.md @@ -83,8 +83,8 @@ features as well. This chart captures the current state of support | StoriesOf stories | + | + | + | + | + | + | + | + | + | + | + | | Source | + | + | + | + | + | + | + | + | + | + | + | | Notes / Info | + | + | + | + | + | + | + | + | + | + | + | -| Props table | + | + | # | | | | | | | | | -| Docgen | + | + | # | | | | | | | | | +| Props table | + | # | # | | | | | | | | | +| Docgen | + | # | # | | | | | | | | | | Inline stories | + | # | | | | | | | | | | **Note:** `#` = WIP support @@ -94,7 +94,7 @@ features as well. This chart captures the current state of support First add the package. Make sure that the versions for your `@storybook/*` packages match: ```sh -yarn add -D @storybook/addon-docs +yarn add -D @storybook/addon-docs@next ``` Docs has peer dependencies on `react` and `babel-loader`. If you want to write stories in MDX, you may need to add these dependencies as well: @@ -162,7 +162,9 @@ module.exports = async ({ config }) => { { loader: 'babel-loader', // may or may not need this line depending on your app's setup - plugins: ['@babel/plugin-transform-react-jsx'], + options: { + plugins: ['@babel/plugin-transform-react-jsx'], + }, }, { loader: '@mdx-js/loader', @@ -209,7 +211,8 @@ Install the preset with care. If you've already configured Typescript manually, 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) +- 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) - [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing) diff --git a/addons/docs/docs/docspage.md b/addons/docs/docs/docspage.md index 8e0f30c3c62..f014c4362b4 100644 --- a/addons/docs/docs/docspage.md +++ b/addons/docs/docs/docspage.md @@ -24,7 +24,7 @@ However, `DocsPage` brings the following improvements: - It supports all frameworks that Storybook supports, including React, Vue, Angular and [many others](../README.md#framework-support). - It generates better documentation that can be used as a standalone docs site, independently of Storybook. - It supports better configuration, so you can capture project specific information with ease. -- It's built to work with [`MDX`](./mdx.md`) when you need more control of your documentation. +- It's built to work with [`MDX`](./mdx.md) when you need more control of your documentation. ## Component parameter @@ -32,7 +32,7 @@ However, `DocsPage` brings the following improvements: Storybook uses `component` to extract the component's description and props, and will rely on it further in future releases. We encourage you to add it to existing stories and use it in all new stories. -Here's how to set the component in [Component Story Format (CSF)](): +Here's how to set the component in [Component Story Format (CSF)](https://storybook.js.org/docs/formats/component-story-format/): ```js import { Badge } from './Badge'; @@ -241,7 +241,8 @@ The docs preset assumes this naming convention for its `source-loader` setup. If Want to learn more? Here are some more articles on Storybook Docs: -- References: [README](../README.md) / [MDX](./mdx.md) / [FAQ](./faq.md) / [Recipes](recipes.md) +- References: [README](../README.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](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) - [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing) diff --git a/addons/docs/docs/faq.md b/addons/docs/docs/faq.md index 2cde39f4cf2..c64e62fe1d7 100644 --- a/addons/docs/docs/faq.md +++ b/addons/docs/docs/faq.md @@ -46,7 +46,8 @@ This is just [Component Story Format (CSF)](https://medium.com/storybookjs/compo Want to learn more? Here are some more articles on Storybook Docs: -- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [Recipes](recipes.md) +- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [Recipes](recipes.md) / [Theming](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) - [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing) diff --git a/addons/docs/docs/mdx.md b/addons/docs/docs/mdx.md index 4f7b1d958fb..e70d1ff5889 100644 --- a/addons/docs/docs/mdx.md +++ b/addons/docs/docs/mdx.md @@ -198,7 +198,8 @@ Be sure to update your Storybook config file to load `.stories.mdx` stories, as `MDX` is an experimental feature and there's a lot more that hasn't been documented yet. Here are some more articles on Storybook Docs that contain more information: -- References: [README](../README.md) / [DocsPage](docspage.md) / [FAQ](faq.md) / [Recipes](recipes.md) +- References: [README](../README.md) / [DocsPage](docspage.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](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) - [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing) diff --git a/addons/docs/docs/recipes.md b/addons/docs/docs/recipes.md index 5c60d9db1a8..9c18bb74a5a 100644 --- a/addons/docs/docs/recipes.md +++ b/addons/docs/docs/recipes.md @@ -6,6 +6,7 @@ - [Pure MDX Stories](#pure-mdx-stories) - [Mixed CSF / MDX Stories](#mixed-csf--mdx-stories) - [CSF Stories with MDX Docs](#csf-stories-with-mdx-docs) +- [Mixing storiesOf with CSF/MDX](#mixing-storiesof-with-csfmdx) - [Migrating from notes/info addons](#migrating-from-notesinfo-addons) - [Exporting documentation](#exporting-documentation) - [More resources](#more-resources) @@ -18,7 +19,7 @@ If you want to intersperse longform documentation in your Storybook, for example ## Pure MDX Stories -[MDX](mdx.md) is an alternative to syntax to CSF that allows you co-locate your stories and your documentation. Everything you can do in CSF, you can do in MDX. And if you're consuming it in [Webpack](https://webpack.js.org/), it exposes an _identical_ interface, so the two files are interchangeable. Some teams will choose to write all of their Storybook in MDX and never look back. +[MDX](mdx.md) is an alternative syntax to CSF that allows you to co-locate your stories and your documentation. Everything you can do in CSF, you can do in MDX. And if you're consuming it in [Webpack](https://webpack.js.org/), it exposes an _identical_ interface, so the two files are interchangeable. Some teams will choose to write all of their Storybook in MDX and never look back. ## Mixed CSF / MDX Stories @@ -71,6 +72,34 @@ Note that in contrast to other examples, the MDX file suffix is `.mdx` rather th 2. You can refer to existing stories (i.e. ``) but cannot define new stories (i.e. ``). 3. The documentation gets exported as the default export (MDX default) rather than as a parameter hanging off the default export (CSF). +## Mixing storiesOf with CSF/MDX + +You might have a collection of stories using the `storiesOf` API and want to add CSF/MDX piecemeal. Or you might have certain stories that are only possible with the `storiesOf` API (e.g. dynamically generated ones) + +So how do you mix these two types? The first argument to `configure` can be a `require.context "req"`, an array of `req's`, or a `loader function`. The loader function should either return null or an array of module exports that include the default export. The default export is used by `configure` to load CSF/MDX files. + +So here's a naive implementation of a loader function that assumes that none of your `storiesOf` files contains a default export, and filters out those exports: + +```js +const loadFn = () => { + const req = require.context('../src', true, /\.stories\.js$/); + return req + .keys() + .map(fname => req(fname)) + .filter(exp => !!exp.default); +}; + +configure(loadFn, module); +``` + +We could have baked this heuristic into Storybook, but we can't assume that your `storiesOf` files don't have default exports. If they do, you can filter them some other way (e.g. by file name). + +If you don't filter out those files, you'll see the following error: + +> "Loader function passed to 'configure' should return void or an array of module exports that all contain a 'default' export" + +We made this error explicit to make sure you know what you're doing when you mix `storiesOf` and CSF/MDX. + ## Migrating from notes/info addons If you're currently using the notes/info addons, you can upgrade to DocsPage [using slots](./docspage.md#docspage-slots). There are different ways to use each addon, so you can adapt this recipe according to your use case. @@ -103,7 +132,8 @@ yarn build-storybook --docs Want to learn more? Here are some more articles on Storybook Docs: -- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) +- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Theming](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) - [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing) diff --git a/addons/docs/docs/theming.md b/addons/docs/docs/theming.md new file mode 100644 index 00000000000..3c430407c60 --- /dev/null +++ b/addons/docs/docs/theming.md @@ -0,0 +1,71 @@ +# Storybook Docs Theming + +[Storybook Docs](../README.md) is themable! There are three different levels of theming, just to keep things interesting: + +- [Storybook theming](#storybook-theming) +- [CSS escape hatches](#css-escape-hatches) +- [MDX component overrides](#mdx-component-overrides) + +## Storybook theming + +Storybook theming is the **recommended way** to theme your docs. If you update your storybook theme according to [the documentation](https://storybook.js.org/docs/configurations/theming/), Storybook Docs should adapt in reasonable ways. + +For example, here's how to change your docs (and Storybook) to the dark theme, by modifying `.storybook/config.js`: + +```js +import { addParameters } from '@storybook/react'; +import { themes } from '@storybook/theming'; + +addParameters({ + options: { + theme: themes.dark, + }, +}); +``` + +## CSS escape hatches + +The Storybook theme API is narrow by design. If you want to have fine-grained control over the CSS, all of the Docs components are tagged with class names to make this possible. This is advanced usage: use at your own risk. + +The classes correspond to markdown elements (e.g. `sbdocs-h1`, `sbdocs-p`, etc.) to UI elements on the page (e.g. `sbdocs-container`, `sbdocs-content`, etc.). To see the currently available classes, simply "inspect element" in your browser. + +You can style these classes in `.storybook/preview-head.html`. For example, here's how to make the content wider for UHD displays: + +```html + +``` + +> NOTE: All of these elements also have the `sbdocs` class, which is simply an idiomatic way of increasing the CSS specificity so you don't have to use `!important`. + +## MDX component overrides + +If you're using MDX, there's one more level of themability. MDX allows you to [completely override the components](https://mdxjs.com/advanced/components) that are rendered from markdown using a `components` parameter. This is an advanced usage that we don't officially support in Storybook, but it's a powerful mechanism if you need it. + +Here's how you might insert a custom code renderer for `code` blocks on the page, in `.storybook/config.js`: + +```js +import { addParameters } from '@storybook/react'; +import { CodeBlock } from './CodeBlock'; + +addParameters({ + docs: { + components: { + code: CodeBlock, + }, + }, +}); +``` + +## More resources + +Want to learn more? Here are some more articles on Storybook Docs: + +- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.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) +- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing) diff --git a/addons/docs/package.json b/addons/docs/package.json index 6fc346a58c5..363be61516e 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Superior documentation for your components", "keywords": [ "addon", @@ -17,6 +17,19 @@ "directory": "addons/docs" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "angular/**/*", + "common/**/*", + "html/**/*", + "react/**/*", + "vue/**/*", + "README.md", + "blocks.js", + "mdx-compiler-plugin.js", + "register.js" + ], "main": "dist/public_api.js", "types": "dist/public_api.d.ts", "scripts": { @@ -29,12 +42,12 @@ "@mdx-js/loader": "^1.1.0", "@mdx-js/mdx": "^1.1.0", "@mdx-js/react": "^1.0.27", - "@storybook/addons": "5.2.0-beta.47", - "@storybook/api": "5.2.0-beta.47", - "@storybook/components": "5.2.0-beta.47", - "@storybook/router": "5.2.0-beta.47", - "@storybook/source-loader": "5.2.0-beta.47", - "@storybook/theming": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/api": "5.3.0-alpha.4", + "@storybook/components": "5.3.0-alpha.4", + "@storybook/router": "5.3.0-alpha.4", + "@storybook/source-loader": "5.3.0-alpha.4", + "@storybook/theming": "5.3.0-alpha.4", "core-js": "^3.0.1", "global": "^4.3.2", "js-string-escape": "^1.0.1", @@ -44,7 +57,7 @@ "devDependencies": { "@types/prop-types": "^15.5.9", "@types/util-deprecate": "^1.0.0", - "@types/webpack-env": "^1.13.7" + "@types/webpack-env": "^1.14.0" }, "peerDependencies": { "babel-loader": "^8.0.0", diff --git a/addons/docs/src/blocks/Anchor.tsx b/addons/docs/src/blocks/Anchor.tsx new file mode 100644 index 00000000000..6e7dd721541 --- /dev/null +++ b/addons/docs/src/blocks/Anchor.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +export const anchorBlockIdFromId = (storyId: string) => `anchor--${storyId}`; + +export interface AnchorProps { + storyId: string; +} + +export const Anchor: React.FC = ({ storyId, children }) => ( +
{children}
+); diff --git a/addons/docs/src/blocks/DocsContainer.tsx b/addons/docs/src/blocks/DocsContainer.tsx index d61ea3fe2c4..03bb11b1913 100644 --- a/addons/docs/src/blocks/DocsContainer.tsx +++ b/addons/docs/src/blocks/DocsContainer.tsx @@ -1,11 +1,12 @@ -/* eslint-disable react/destructuring-assignment */ - import React from 'react'; +import { document } from 'global'; import { MDXProvider } from '@mdx-js/react'; import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming'; import { DocsWrapper, DocsContent, Source } from '@storybook/components'; import { components as htmlComponents, Code } from '@storybook/components/html'; import { DocsContextProps, DocsContext } from './DocsContext'; +import { anchorBlockIdFromId } from './Anchor'; +import { storyBlockIdFromId } from './Story'; interface DocsContainerProps { context: DocsContextProps; @@ -44,17 +45,31 @@ export const DocsContainer: React.FunctionComponent = ({ context, children, }) => { - const parameters = (context && context.parameters) || {}; + const { id: storyId = null, parameters = {} } = context || {}; const options = parameters.options || {}; const theme = ensureTheme(options.theme); const { components: userComponents = null } = parameters.docs || {}; const components = { ...defaultComponents, ...userComponents }; + + React.useEffect(() => { + let element = document.getElementById(anchorBlockIdFromId(storyId)); + if (!element) { + element = document.getElementById(storyBlockIdFromId(storyId)); + } + if (element) { + element.scrollIntoView({ + behavior: 'smooth', + block: 'end', + inline: 'nearest', + }); + } + }, [storyId]); return ( - - {children} + + {children} diff --git a/addons/docs/src/blocks/DocsPage.tsx b/addons/docs/src/blocks/DocsPage.tsx index ea55de4993f..6192bb27d85 100644 --- a/addons/docs/src/blocks/DocsPage.tsx +++ b/addons/docs/src/blocks/DocsPage.tsx @@ -7,6 +7,7 @@ import { DocsContext } from './DocsContext'; import { Description, getDocgen } from './Description'; import { Story } from './Story'; import { Preview } from './Preview'; +import { Anchor } from './Anchor'; import { getPropsTableProps } from './Props'; export interface SlotContext { @@ -34,7 +35,6 @@ export interface DocsPageProps { interface DocsStoryProps { id: string; name: string; - description?: string; expanded?: boolean; withToolbar?: boolean; parameters?: any; @@ -82,18 +82,19 @@ const StoryHeading = H3; const DocsStory: React.FunctionComponent = ({ id, name, - description, expanded = true, withToolbar = false, parameters, }) => ( - <> + {expanded && {(parameters && parameters.displayName) || name}} - {expanded && description && } + {expanded && parameters && parameters.docs && parameters.docs.storyDescription && ( + + )} - + ); export const DocsPage: React.FunctionComponent = ({ diff --git a/addons/docs/src/blocks/Story.tsx b/addons/docs/src/blocks/Story.tsx index b098222c3e7..2d0764b92fc 100644 --- a/addons/docs/src/blocks/Story.tsx +++ b/addons/docs/src/blocks/Story.tsx @@ -1,9 +1,18 @@ import React from 'react'; +import { MDXProvider } from '@mdx-js/react'; +import { components as docsComponents } from '@storybook/components/html'; import { Story, StoryProps as PureStoryProps } from '@storybook/components'; import { CURRENT_SELECTION } from './shared'; import { DocsContext, DocsContextProps } from './DocsContext'; +export const storyBlockIdFromId = (storyId: string) => `story--${storyId}`; + +const resetComponents: Record = {}; +Object.keys(docsComponents).forEach(key => { + resetComponents[key] = (props: any) => React.createElement(key, props); +}); + interface CommonProps { height?: string; inline?: boolean; @@ -58,7 +67,13 @@ const StoryContainer: React.FunctionComponent = props => ( {context => { const storyProps = getStoryProps(props, context); - return ; + return ( +
+ + + +
+ ); }} ); diff --git a/addons/docs/src/blocks/index.ts b/addons/docs/src/blocks/index.ts index 221fe9e567f..96a50525817 100644 --- a/addons/docs/src/blocks/index.ts +++ b/addons/docs/src/blocks/index.ts @@ -1,5 +1,6 @@ export { ColorPalette, ColorItem, IconGallery, IconItem, Typeset } from '@storybook/components'; +export * from './Anchor'; export * from './Description'; export * from './DocsContext'; export * from './DocsPage'; diff --git a/addons/docs/src/typings.d.ts b/addons/docs/src/typings.d.ts index d7a027bd9c9..ab6a2ebd1cc 100644 --- a/addons/docs/src/typings.d.ts +++ b/addons/docs/src/typings.d.ts @@ -1,2 +1,3 @@ declare module '@mdx-js/react'; declare module '@storybook/addon-docs/mdx-compiler-plugin'; +declare module 'global'; diff --git a/addons/events/package.json b/addons/events/package.json index ec8af0403b2..977a35ced6d 100644 --- a/addons/events/package.json +++ b/addons/events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-events", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Add events to your Storybook stories.", "keywords": [ "addon", @@ -18,17 +18,23 @@ "directory": "addons/events" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "register.js" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/api": "5.2.0-beta.47", - "@storybook/client-api": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", - "@storybook/theming": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/api": "5.3.0-alpha.4", + "@storybook/client-api": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", + "@storybook/theming": "5.3.0-alpha.4", "core-js": "^3.0.1", "format-json": "^1.0.3", "lodash": "^4.17.11", diff --git a/addons/google-analytics/package.json b/addons/google-analytics/package.json index 6952aad0fc4..0a4557fd624 100644 --- a/addons/google-analytics/package.json +++ b/addons/google-analytics/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-google-analytics", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Storybook addon for google analytics", "keywords": [ "addon", @@ -20,8 +20,8 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", "core-js": "^3.0.1", "global": "^4.3.2", "react-ga": "^2.5.7" diff --git a/addons/graphql/package.json b/addons/graphql/package.json index 6665fd07e4d..6426519aeb8 100644 --- a/addons/graphql/package.json +++ b/addons/graphql/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-graphql", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Storybook addon to display the GraphiQL IDE", "keywords": [ "addon", @@ -16,17 +16,23 @@ "directory": "addons/graphql" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "register.js" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/api": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/api": "5.3.0-alpha.4", "core-js": "^3.0.1", "global": "^4.3.2", - "graphiql": "^0.13.0", + "graphiql": "^0.14.2", "graphql": "^14.2.1", "prop-types": "^15.7.2" }, diff --git a/addons/info/package.json b/addons/info/package.json index 683626b3d4c..52612fc56d0 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-info", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "A Storybook addon to show additional information for your stories.", "keywords": [ "addon", @@ -16,16 +16,21 @@ "directory": "addons/info" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md" + ], "main": "dist/index.js", "jsnext:main": "src/index.js", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/client-logger": "5.2.0-beta.47", - "@storybook/components": "5.2.0-beta.47", - "@storybook/theming": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/client-logger": "5.3.0-alpha.4", + "@storybook/components": "5.3.0-alpha.4", + "@storybook/theming": "5.3.0-alpha.4", "core-js": "^3.0.1", "global": "^4.3.2", "jsx-to-string": "^1.4.0", diff --git a/addons/jest/README.md b/addons/jest/README.md index fa89df2c731..1a872c7ffd9 100644 --- a/addons/jest/README.md +++ b/addons/jest/README.md @@ -26,14 +26,14 @@ When running **Jest**, be sure to save the results in a json file: ```js "scripts": { - "test:generate-output": "jest --json --outputFile=jest-test-results.json" + "test:generate-output": "jest --json --outputFile=.jest-test-results.json" } ``` You may want to add it the result file to `.gitignore`, since it's a generated file: ``` -jest-test-results.json +.jest-test-results.json ``` But much like lockfiles and snapshots checking-in generated files can have certain advantages as well. It's up to you. diff --git a/addons/jest/package.json b/addons/jest/package.json index 5d0c9bd91d9..312c66710c1 100644 --- a/addons/jest/package.json +++ b/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "React storybook addon that show component jest report", "keywords": [ "addon", @@ -22,17 +22,23 @@ }, "license": "MIT", "author": "Renaud Tertrais (https://github.com/renaudtertrais)", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "register.js" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/api": "5.2.0-beta.47", - "@storybook/components": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", - "@storybook/theming": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/api": "5.3.0-alpha.4", + "@storybook/components": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", + "@storybook/theming": "5.3.0-alpha.4", "core-js": "^3.0.1", "global": "^4.3.2", "react": "^16.8.3", diff --git a/addons/knobs/.npmignore b/addons/knobs/.npmignore deleted file mode 100644 index 02ba1793bbe..00000000000 --- a/addons/knobs/.npmignore +++ /dev/null @@ -1 +0,0 @@ -.babelrc diff --git a/addons/knobs/package.json b/addons/knobs/package.json index 8bd2281bbb4..ead50623442 100644 --- a/addons/knobs/package.json +++ b/addons/knobs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-knobs", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Storybook Addon Prop Editor Component", "keywords": [ "addon", @@ -16,18 +16,32 @@ "directory": "addons/knobs" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "angular.js", + "html.js", + "marko.js", + "mithril.js", + "polymer.js", + "react.js", + "vue.js", + "register.js" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/api": "5.2.0-beta.47", - "@storybook/client-api": "5.2.0-beta.47", - "@storybook/components": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", - "@storybook/theming": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/api": "5.3.0-alpha.4", + "@storybook/client-api": "5.3.0-alpha.4", + "@storybook/components": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", + "@storybook/theming": "5.3.0-alpha.4", + "@types/react-color": "^3.0.1", "copy-to-clipboard": "^3.0.8", "core-js": "^3.0.1", "escape-html": "^1.0.3", @@ -40,16 +54,15 @@ "react-lifecycles-compat": "^3.0.4", "react-select": "^3.0.0" }, + "devDependencies": { + "@types/escape-html": "0.0.20", + "@types/react-lifecycles-compat": "^3.0.1", + "@types/react-select": "^3.0.4" + }, "peerDependencies": { "react": "*" }, "publishConfig": { "access": "public" - }, - "devDependencies": { - "@types/escape-html": "0.0.20", - "@types/react-color": "^3.0.1", - "@types/react-lifecycles-compat": "^3.0.1", - "@types/react-select": "^2.0.19" } } diff --git a/addons/knobs/src/__types__/knob-test-cases.ts b/addons/knobs/src/__types__/knob-test-cases.ts index c0ef4ab67e5..19a147f5000 100644 --- a/addons/knobs/src/__types__/knob-test-cases.ts +++ b/addons/knobs/src/__types__/knob-test-cases.ts @@ -106,7 +106,7 @@ expectKnobOfType( }, 'none' ), - select('select with string array', ['yes', 'no'], 'yes'), + select('select with string array', ['yes', 'no'], 'yes'), select('select with string literal array', stringLiteralArray, stringLiteralArray[0]), select('select with readonly array', ['red', 'blue'] as const, 'red'), select('select with string enum options', ButtonVariant, ButtonVariant.primary) @@ -123,7 +123,7 @@ expectKnobOfType( { 'type a': SomeEnum.Type1, 'type b': SomeEnum.Type2 }, SomeEnum.Type2 ), - select('select with number array', [1, 2, 3, 4], 1), + select('select with number array', [1, 2, 3, 4], 1), select('select with readonly number array', [1, 2] as const, 1) ); @@ -131,6 +131,60 @@ expectKnobOfType( select('select with null option', { a: 1, b: null }, null, groupId) ); +expectKnobOfType( + select( + 'select with string and string array options', + { + Red: 'red', + Blue: 'blue', + Yellow: 'yellow', + Rainbow: ['red', 'orange', 'etc'], + None: 'transparent', + }, + 'red' + ) +); + +expectKnobOfType( + select( + 'select with number and number array options', + { + Red: 1, + Blue: 2, + Yellow: 3, + Rainbow: [4, 5, 6], + None: 7, + }, + 7 + ) +); + +expectKnobOfType( + select( + 'select with string, string array, and null options', + { + Red: 'red', + Blue: 'blue', + Yellow: 'yellow', + Rainbow: ['red', 'orange', 'etc'], + None: null, + }, + null + ) +); + +expectKnobOfType( + select( + 'select with number array options', + { + ones: [1], + twos: [2, 2], + threes: [3, 3, 3], + }, + [1] + ) +); + /** Object knob */ expectKnobOfType( @@ -163,6 +217,68 @@ expectKnobOfType( options('options with group', {}, '', { display: 'check' }) ); +expectKnobOfType( + options('select with null option', { a: 1, b: null }, null, { display: 'check' }) +); + +expectKnobOfType( + options( + 'options with string and string array options', + { + Red: 'red', + Blue: 'blue', + Yellow: 'yellow', + Rainbow: ['red', 'orange', 'etc'], + None: 'transparent', + }, + 'red', + { display: 'check' } + ) +); + +expectKnobOfType( + options( + 'select with number and number array options', + { + Red: 1, + Blue: 2, + Yellow: 3, + Rainbow: [4, 5, 6], + None: 7, + }, + 7, + { display: 'check' } + ) +); + +expectKnobOfType( + options( + 'select with string, string array, and null options', + { + Red: 'red', + Blue: 'blue', + Yellow: 'yellow', + Rainbow: ['red', 'orange', 'etc'], + None: null, + }, + null, + { display: 'check' } + ) +); + +expectKnobOfType( + options( + 'select with number array options', + { + ones: [1], + twos: [2, 2], + threes: [3, 3, 3], + }, + [1], + { display: 'check' } + ) +); + /** Array knob */ const arrayReadonly = array('array as readonly', ['hi', 'there'] as const); diff --git a/addons/knobs/src/components/Panel.tsx b/addons/knobs/src/components/Panel.tsx index 7d0f5540ff4..701a3efc6ac 100644 --- a/addons/knobs/src/components/Panel.tsx +++ b/addons/knobs/src/components/Panel.tsx @@ -228,6 +228,7 @@ export default class KnobPanel extends PureComponent { render: ({ active }) => ( (knob.groupId || DEFAULT_GROUP_ID) === knobKeyGroupId )} diff --git a/addons/knobs/src/components/types/Array.tsx b/addons/knobs/src/components/types/Array.tsx index fb360866712..3b1bed3bb30 100644 --- a/addons/knobs/src/components/types/Array.tsx +++ b/addons/knobs/src/components/types/Array.tsx @@ -62,7 +62,7 @@ export default class ArrayType extends Component { render() { const { knob } = this.props; - const value = knob.value.join(knob.separator); + const value = knob.value && knob.value.join(knob.separator); return ( extends KnobControlConfig { diff --git a/addons/knobs/src/components/types/Select.tsx b/addons/knobs/src/components/types/Select.tsx index 9b1f6ab62d6..8a7f387859f 100644 --- a/addons/knobs/src/components/types/Select.tsx +++ b/addons/knobs/src/components/types/Select.tsx @@ -4,13 +4,13 @@ import PropTypes from 'prop-types'; import { Form } from '@storybook/components'; import { KnobControlConfig, KnobControlProps } from './types'; -export type SelectTypeKnobValue = string | number | null | undefined; +export type SelectTypeKnobValue = string | number | null | undefined | PropertyKey[]; export type SelectTypeOptionsProp = - | Record - | Record, T[keyof T]> - | Exclude[] - | readonly Exclude[]; + | Record + | Record, T[keyof T]> + | Extract[] + | readonly Extract[]; export interface SelectTypeKnob extends KnobControlConfig { @@ -31,8 +31,8 @@ const SelectType: FunctionComponent & { } = ({ knob, onChange }) => { const { options } = knob; const entries = Array.isArray(options) - ? options.reduce>((acc, k) => ({ ...acc, [k]: k }), {}) - : (options as Record); + ? options.reduce>((acc, k) => ({ ...acc, [k]: k }), {}) + : (options as Record); const selectedKey = Object.keys(entries).find(k => { if (Array.isArray(knob.value)) { diff --git a/addons/links/package.json b/addons/links/package.json index 6512ac22480..4c574dce0e7 100644 --- a/addons/links/package.json +++ b/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Story Links addon for storybook", "keywords": [ "addon", @@ -16,15 +16,22 @@ "directory": "addons/links" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "react.js", + "register.js" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", - "@storybook/router": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", + "@storybook/router": "5.3.0-alpha.4", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/addons/links/src/manager.ts b/addons/links/src/manager.ts index f2ec52c1585..d5aa5b78898 100644 --- a/addons/links/src/manager.ts +++ b/addons/links/src/manager.ts @@ -4,7 +4,9 @@ import EVENTS, { ADDON_ID } from './constants'; export const register = () => { addons.register(ADDON_ID, api => { - api.on(EVENTS.REQUEST, ({ kind, name }) => { + const channel = addons.getChannel(); + + channel.on(EVENTS.REQUEST, ({ kind, name }) => { const id = api.storyId(kind, name); api.emit(EVENTS.RECEIVE, id); }); diff --git a/addons/links/src/preview.ts b/addons/links/src/preview.ts index ec6e74cffbd..3a80caedcc9 100644 --- a/addons/links/src/preview.ts +++ b/addons/links/src/preview.ts @@ -1,15 +1,19 @@ import { document, HTMLElement } from 'global'; import qs from 'qs'; import addons from '@storybook/addons'; -import { SELECT_STORY, STORY_CHANGED } from '@storybook/core-events'; +import { STORY_CHANGED, SELECT_STORY } from '@storybook/core-events'; import { toId } from '@storybook/router/utils'; -interface Params { +interface ParamsId { + storyId: string; +} +interface ParamsCombo { kind: string; story: string; } -export const navigate = (params: Params) => addons.getChannel().emit(SELECT_STORY, params); +export const navigate = (params: ParamsId | ParamsCombo) => + addons.getChannel().emit(SELECT_STORY, params); const generateUrl = (id: string) => { const { location } = document; @@ -25,6 +29,7 @@ const valueOrCall = (args: string[]) => (value: string | ((...args: string[]) => export const linkTo = (kind: string, story?: string) => (...args: string[]) => { const resolver = valueOrCall(args); + navigate({ kind: resolver(kind), story: resolver(story), diff --git a/addons/notes/package.json b/addons/notes/package.json index 1b6d5dc0e00..c0876387c8a 100644 --- a/addons/notes/package.json +++ b/addons/notes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-notes", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Write notes for your Storybook stories.", "keywords": [ "addon", @@ -17,19 +17,26 @@ "directory": "addons/notes" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "register.js", + "register-panel.js" + ], "main": "dist/public_api.js", "types": "dist/public_api.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/api": "5.2.0-beta.47", - "@storybook/client-logger": "5.2.0-beta.47", - "@storybook/components": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", - "@storybook/router": "5.2.0-beta.47", - "@storybook/theming": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/api": "5.3.0-alpha.4", + "@storybook/client-logger": "5.3.0-alpha.4", + "@storybook/components": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", + "@storybook/router": "5.3.0-alpha.4", + "@storybook/theming": "5.3.0-alpha.4", "core-js": "^3.0.1", "global": "^4.3.2", "markdown-to-jsx": "^6.10.3", @@ -40,7 +47,7 @@ "devDependencies": { "@types/prop-types": "^15.5.9", "@types/util-deprecate": "^1.0.0", - "@types/webpack-env": "^1.13.7" + "@types/webpack-env": "^1.14.0" }, "peerDependencies": { "react": "*" diff --git a/addons/ondevice-actions/package.json b/addons/ondevice-actions/package.json index 5b3e4723251..d5eca4db8d9 100644 --- a/addons/ondevice-actions/package.json +++ b/addons/ondevice-actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-ondevice-actions", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Action Logger addon for react-native storybook", "keywords": [ "storybook" @@ -14,18 +14,24 @@ "url": "https://github.com/storybookjs/storybook.git" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "register.js" + ], "main": "dist/index.js", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", "core-js": "^3.0.1", "fast-deep-equal": "^2.0.1" }, "devDependencies": { - "@storybook/addon-actions": "5.2.0-beta.47" + "@storybook/addon-actions": "5.3.0-alpha.4" }, "peerDependencies": { "@storybook/addon-actions": "*", diff --git a/addons/ondevice-backgrounds/package.json b/addons/ondevice-backgrounds/package.json index 5a5a27832a8..42db1fd0607 100644 --- a/addons/ondevice-backgrounds/package.json +++ b/addons/ondevice-backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-ondevice-backgrounds", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "A react-native storybook addon to show different backgrounds for your preview", "keywords": [ "addon", @@ -18,13 +18,18 @@ "directory": "addons/ondevice-backgrounds" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "register.js" + ], "main": "dist/index.js", - "jsnext:main": "src/index.js", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", "core-js": "^3.0.1", "prop-types": "^15.7.2" }, diff --git a/addons/ondevice-knobs/package.json b/addons/ondevice-knobs/package.json index 5922f208b57..5a4d1df452a 100644 --- a/addons/ondevice-knobs/package.json +++ b/addons/ondevice-knobs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-ondevice-knobs", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Display storybook story knobs on your deviced.", "keywords": [ "addon", @@ -15,14 +15,19 @@ "directory": "addons/ondevice-knobs" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "register.js" + ], "main": "dist/index.js", - "jsnext:main": "src/index.js", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", "core-js": "^3.0.1", "deep-equal": "^1.0.1", "prop-types": "^15.7.2", diff --git a/addons/ondevice-notes/package.json b/addons/ondevice-notes/package.json index 1a4a56de309..031f19edd9f 100644 --- a/addons/ondevice-notes/package.json +++ b/addons/ondevice-notes/package.json @@ -1,12 +1,12 @@ { "name": "@storybook/addon-ondevice-notes", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Write notes for your react-native Storybook stories.", "keywords": [ "addon", "notes", - "storybook", - "react-native" + "react-native", + "storybook" ], "repository": { "type": "git", @@ -14,14 +14,19 @@ "directory": "addons/ondevice-notes" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "register.js" + ], "main": "dist/index.js", - "jsnext:main": "src/index.js", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/client-logger": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/client-logger": "5.3.0-alpha.4", "core-js": "^3.0.1", "prop-types": "^15.7.2", "react-native-simple-markdown": "^1.1.0" diff --git a/addons/options/package.json b/addons/options/package.json index 5c2a30c0af1..9419e346068 100644 --- a/addons/options/package.json +++ b/addons/options/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-options", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Options addon for storybook", "keywords": [ "addon", @@ -16,13 +16,19 @@ "directory": "addons/options" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "register.js" + ], "main": "dist/index.js", "types": "dist/public_api.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", "core-js": "^3.0.1", "util-deprecate": "^1.0.2" }, diff --git a/addons/queryparams/package.json b/addons/queryparams/package.json index ae461931acf..90deb5df6f9 100644 --- a/addons/queryparams/package.json +++ b/addons/queryparams/package.json @@ -1,11 +1,11 @@ { "name": "@storybook/addon-queryparams", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "parameter addon for storybook", "keywords": [ "addon", - "storybook", - "query" + "query", + "storybook" ], "homepage": "https://github.com/storybookjs/storybook#readme", "bugs": { @@ -17,18 +17,23 @@ "directory": "addons/addon-queryparams" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/api": "5.2.0-beta.47", - "@storybook/client-logger": "5.2.0-beta.47", - "@storybook/components": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", - "@storybook/theming": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/api": "5.3.0-alpha.4", + "@storybook/client-logger": "5.3.0-alpha.4", + "@storybook/components": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", + "@storybook/theming": "5.3.0-alpha.4", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/addons/storyshots/storyshots-core/.npmignore b/addons/storyshots/storyshots-core/.npmignore deleted file mode 100644 index 02ba1793bbe..00000000000 --- a/addons/storyshots/storyshots-core/.npmignore +++ /dev/null @@ -1 +0,0 @@ -.babelrc diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json index 13d92d2af06..d75353d4571 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.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.", "keywords": [ "addon", @@ -16,8 +16,12 @@ "directory": "addons/storyshots/storyshots-core" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md" + ], "main": "dist/index.js", - "jsnext:main": "src/index.js", "scripts": { "build-storybook": "build-storybook", "example": "jest storyshot.test", @@ -25,7 +29,7 @@ "storybook": "start-storybook -p 6006" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", "core-js": "^3.0.1", "glob": "^7.1.3", "global": "^4.3.2", @@ -35,7 +39,7 @@ }, "devDependencies": { "enzyme-to-json": "^3.3.5", - "jest-emotion": "^10.0.10", + "jest-emotion": "^10.0.17", "react": "^16.8.3" }, "publishConfig": { diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json index ee0affa897f..23a2b4d38d9 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.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Image snapshots addition to StoryShots based on puppeteer", "keywords": [ "addon", @@ -16,25 +16,29 @@ "directory": "addons/storyshots/storyshots-puppeteer" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md" + ], "main": "dist/index.js", - "jsnext:main": "src/index.js", "scripts": { "prepare": "node ../../../scripts/prepare.js" }, "dependencies": { - "@storybook/node-logger": "5.2.0-beta.47", - "@storybook/router": "5.2.0-beta.47", + "@storybook/node-logger": "5.3.0-alpha.4", + "@storybook/router": "5.3.0-alpha.4", "core-js": "^3.0.1", "jest-image-snapshot": "^2.8.2", "regenerator-runtime": "^0.12.1" }, - "optionalDependencies": { - "puppeteer": "^1.12.2" - }, "peerDependencies": { "@storybook/addon-storyshots": "5.2.0-beta.13", "puppeteer": "^1.12.2" }, + "optionalDependencies": { + "puppeteer": "^1.12.2" + }, "publishConfig": { "access": "public" } diff --git a/addons/storysource/README.md b/addons/storysource/README.md index 0060aa1be55..0adba11e979 100644 --- a/addons/storysource/README.md +++ b/addons/storysource/README.md @@ -4,7 +4,7 @@ This addon is used to show stories source in the addon panel. [Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md) -![Storysource Demo](demo.gif) +![Storysource Demo](./docs/demo.gif) ## Getting Started diff --git a/addons/storysource/demo.gif b/addons/storysource/docs/demo.gif similarity index 100% rename from addons/storysource/demo.gif rename to addons/storysource/docs/demo.gif diff --git a/addons/storysource/package.json b/addons/storysource/package.json index 132877da578..c7022ea6f28 100644 --- a/addons/storysource/package.json +++ b/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Stories addon for storybook", "keywords": [ "addon", @@ -16,17 +16,23 @@ "directory": "addons/storysource" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "loader.js", + "register.js" + ], "main": "dist/index.js", - "jsnext:main": "src/index.js", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/components": "5.2.0-beta.47", - "@storybook/router": "5.2.0-beta.47", - "@storybook/source-loader": "5.2.0-beta.47", - "@storybook/theming": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/components": "5.3.0-alpha.4", + "@storybook/router": "5.3.0-alpha.4", + "@storybook/source-loader": "5.3.0-alpha.4", + "@storybook/theming": "5.3.0-alpha.4", "core-js": "^3.0.1", "estraverse": "^4.2.0", "loader-utils": "^1.2.3", diff --git a/addons/viewport/package.json b/addons/viewport/package.json index 7ac2a9a1a13..4c0f8c695f7 100644 --- a/addons/viewport/package.json +++ b/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Storybook addon to change the viewport size to mobile", "keywords": [ "addon", @@ -16,30 +16,37 @@ "directory": "addons/viewport" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "preview.js", + "register.js" + ], "main": "preview.js", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/api": "5.2.0-beta.47", - "@storybook/client-logger": "5.2.0-beta.47", - "@storybook/components": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", - "@storybook/theming": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/api": "5.3.0-alpha.4", + "@storybook/client-logger": "5.3.0-alpha.4", + "@storybook/components": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", + "@storybook/theming": "5.3.0-alpha.4", "core-js": "^3.0.1", "global": "^4.3.2", "memoizerific": "^1.11.3", "prop-types": "^15.7.2", "util-deprecate": "^1.0.2" }, + "devDependencies": { + "@types/util-deprecate": "^1.0.0" + }, "peerDependencies": { "react": "*" }, "publishConfig": { "access": "public" - }, - "devDependencies": { - "@types/util-deprecate": "^1.0.0" } } diff --git a/addons/viewport/src/Tool.tsx b/addons/viewport/src/Tool.tsx index 999ccd40d42..5bf5ea573c2 100644 --- a/addons/viewport/src/Tool.tsx +++ b/addons/viewport/src/Tool.tsx @@ -20,6 +20,7 @@ interface ViewportItem { } const toList = memoize(50)((items: ViewportMap): ViewportItem[] => [ + // eslint-disable-next-line no-use-before-define ...baseViewports, ...Object.entries(items).map(([id, { name, ...rest }]) => ({ ...rest, id, title: name })), ]); @@ -71,7 +72,11 @@ interface Link extends LinkBase { onClick: () => void; } -const flip = ({ width, height }: ViewportStyles) => ({ height: width, width: height }); +const flip = ({ width, height, ...styles }: ViewportStyles) => ({ + ...styles, + height: width, + width: height, +}); const ActiveViewportSize = styled.div(() => ({ display: 'inline-flex', @@ -133,6 +138,14 @@ export const ViewportTool: FunctionComponent<{}> = React.memo( }); const list = toList(viewports); + useEffect(() => { + setState({ + selected: + defaultViewport || (viewports[state.selected] ? state.selected : responsiveViewport.id), + isRotated: state.isRotated, + }); + }, [defaultViewport]); + const { selected, isRotated } = state; const item = list.find(i => i.id === selected) || diff --git a/app/angular/.npmignore b/app/angular/.npmignore deleted file mode 100644 index 6d236e2ff68..00000000000 --- a/app/angular/.npmignore +++ /dev/null @@ -1,2 +0,0 @@ -docs -.babelrc diff --git a/app/angular/package.json b/app/angular/package.json index 569db0c6cfb..a44c258870a 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -15,6 +15,14 @@ "directory": "app/angular" }, "license": "MIT", + "files": [ + "bin/**/*", + "dist/**/*", + "README.md", + "standalone.js", + "demo.js", + "demo.d.ts" + ], "main": "dist/client/index.js", "types": "dist/client/index.d.ts", "bin": { @@ -26,21 +34,22 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/core": "5.2.0-beta.47", - "@storybook/node-logger": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/core": "5.3.0-alpha.4", + "@storybook/node-logger": "5.3.0-alpha.4", "angular2-template-loader": "^0.6.2", "core-js": "^3.0.1", "fork-ts-checker-webpack-plugin": "^1.3.4", "global": "^4.3.2", "regenerator-runtime": "^0.12.1", "sass-loader": "^7.1.0", + "strip-json-comments": "^3.0.1", "ts-loader": "^6.0.1", "tsconfig-paths-webpack-plugin": "^3.2.0" }, "devDependencies": { "@types/autoprefixer": "^9.4.0", - "@types/webpack-env": "^1.13.9", + "@types/webpack-env": "^1.14.0", "webpack": "^4.33.0" }, "peerDependencies": { @@ -56,7 +65,7 @@ "babel-loader": "^7.0.0 || ^8.0.0", "rxjs": "^6.0.0", "typescript": "^3.4.0", - "webpack": "^4.32.2", + "webpack": "^4.32.0", "zone.js": "^0.8.29 || ^0.9.0" }, "engines": { diff --git a/app/angular/src/server/__tests__/angular-cli_config.test.ts b/app/angular/src/server/__tests__/angular-cli_config.test.ts index f9e916c8b1f..0152523fdde 100644 --- a/app/angular/src/server/__tests__/angular-cli_config.test.ts +++ b/app/angular/src/server/__tests__/angular-cli_config.test.ts @@ -1,9 +1,7 @@ +import stripJsonComments from 'strip-json-comments'; import { Path } from '@angular-devkit/core'; import { getAngularCliWebpackConfigOptions } from '../angular-cli_config'; -// @ts-ignore -import angularJson from './angular.json'; - // eslint-disable-next-line global-require jest.mock('fs', () => require('../../../../../__mocks__/fs')); jest.mock('path', () => ({ @@ -14,15 +12,19 @@ jest.mock('path', () => ({ resolve: (...args) => 'tsconfig.json', })); +const angularJson = jest + .requireActual('fs') + .readFileSync(jest.requireActual('path').resolve(__dirname, 'angular.json'), 'utf8'); + const setupFiles = (files: any) => { // eslint-disable-next-line no-underscore-dangle, global-require require('fs').__setMockFiles(files); }; -describe('angualr-cli_config', () => { +describe('angular-cli_config', () => { describe('getAngularCliWebpackConfigOptions()', () => { it('should return have empty `buildOptions.sourceMap` and `buildOptions.optimization` by default', () => { - setupFiles({ 'angular.json': JSON.stringify(angularJson) }); + setupFiles({ 'angular.json': angularJson }); const config = getAngularCliWebpackConfigOptions('/' as Path); @@ -36,7 +38,7 @@ describe('angualr-cli_config', () => { it('should use `storybook` project by default when project is defined', () => { // Lazy clone example angular json - const overrideAngularJson = JSON.parse(JSON.stringify(angularJson)); + const overrideAngularJson = JSON.parse(stripJsonComments(angularJson)); // Add storybook project overrideAngularJson.projects.storybook = { architect: { diff --git a/app/angular/src/server/__tests__/angular.json b/app/angular/src/server/__tests__/angular.json index 1280b032aea..b04b1d60b44 100644 --- a/app/angular/src/server/__tests__/angular.json +++ b/app/angular/src/server/__tests__/angular.json @@ -1,4 +1,6 @@ { + /* angular.json can have comments */ + // angular.json can have comments "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", diff --git a/app/angular/src/server/angular-cli_config.ts b/app/angular/src/server/angular-cli_config.ts index b08d79a2b3f..f717e3220c7 100644 --- a/app/angular/src/server/angular-cli_config.ts +++ b/app/angular/src/server/angular-cli_config.ts @@ -4,6 +4,7 @@ import path from 'path'; import fs from 'fs'; import { logger } from '@storybook/node-logger'; import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin'; +import stripJsonComments from 'strip-json-comments'; import { isBuildAngularInstalled, normalizeAssetPatterns, @@ -33,7 +34,7 @@ function getTsConfigOptions(tsConfigPath: Path) { return basicOptions; } - const tsConfig = JSON.parse(fs.readFileSync(tsConfigPath, 'utf8')); + const tsConfig = JSON.parse(stripJsonComments(fs.readFileSync(tsConfigPath, 'utf8'))); const { baseUrl } = tsConfig.compilerOptions as CompilerOptions; @@ -52,7 +53,7 @@ export function getAngularCliWebpackConfigOptions(dirToSearch: Path) { return null; } - const angularJson = JSON.parse(fs.readFileSync(fname, 'utf8')); + const angularJson = JSON.parse(stripJsonComments(fs.readFileSync(fname, 'utf8'))); const { projects, defaultProject } = angularJson; if (!projects || !Object.keys(projects).length) { diff --git a/app/angular/tsconfig.json b/app/angular/tsconfig.json index 8a9ea247510..6c12e109887 100644 --- a/app/angular/tsconfig.json +++ b/app/angular/tsconfig.json @@ -3,7 +3,7 @@ "compileOnSave": false, "compilerOptions": { "outDir": "dist", - "types": ["webpack-env"], + "types": [], "rootDir": "./src", "resolveJsonModule": true } diff --git a/app/ember/package.json b/app/ember/package.json index 1c4186c0660..6c8f2744813 100644 --- a/app/ember/package.json +++ b/app/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember", "bugs": { @@ -12,6 +12,12 @@ "directory": "app/ember" }, "license": "MIT", + "files": [ + "bin/**/*", + "dist/**/*", + "README.md", + "standalone.js" + ], "main": "dist/client/index.js", "jsnext:main": "src/client/index.js", "bin": { @@ -24,7 +30,7 @@ }, "dependencies": { "@ember/test-helpers": "^1.5.0", - "@storybook/core": "5.2.0-beta.47", + "@storybook/core": "5.3.0-alpha.4", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/app/html/.npmignore b/app/html/.npmignore deleted file mode 100644 index 329fc8d67ad..00000000000 --- a/app/html/.npmignore +++ /dev/null @@ -1,3 +0,0 @@ -docs -src -.babelrc diff --git a/app/html/package.json b/app/html/package.json index 0580f78781e..f2870914312 100644 --- a/app/html/package.json +++ b/app/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -15,6 +15,12 @@ "directory": "app/html" }, "license": "MIT", + "files": [ + "bin/**/*", + "dist/**/*", + "README.md", + "standalone.js" + ], "main": "dist/client/index.js", "types": "dist/client/index.d.ts", "bin": { @@ -26,8 +32,9 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/core": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/core": "5.3.0-alpha.4", + "@types/webpack-env": "^1.13.9", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/app/marko/.npmignore b/app/marko/.npmignore deleted file mode 100644 index 6d236e2ff68..00000000000 --- a/app/marko/.npmignore +++ /dev/null @@ -1,2 +0,0 @@ -docs -.babelrc diff --git a/app/marko/package.json b/app/marko/package.json index 66d19699534..1b9177b6342 100644 --- a/app/marko/package.json +++ b/app/marko/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/marko", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -15,8 +15,13 @@ "directory": "app/marko" }, "license": "MIT", + "files": [ + "bin/**/*", + "dist/**/*", + "README.md", + "standalone.js" + ], "main": "dist/client/index.js", - "jsnext:main": "src/client/index.js", "bin": { "build-storybook": "./bin/build.js", "start-storybook": "./bin/index.js", @@ -26,9 +31,9 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@marko/webpack": "^1.2.0", - "@storybook/client-logger": "5.2.0-beta.47", - "@storybook/core": "5.2.0-beta.47", + "@marko/webpack": "^2.0.0", + "@storybook/client-logger": "5.3.0-alpha.4", + "@storybook/core": "5.3.0-alpha.4", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/app/marko/src/server/framework-preset-marko.js b/app/marko/src/server/framework-preset-marko.js index 7b11e4df657..5c5d74a7b64 100644 --- a/app/marko/src/server/framework-preset-marko.js +++ b/app/marko/src/server/framework-preset-marko.js @@ -8,9 +8,6 @@ export function webpack(config) { { test: /\.marko$/, loader: require.resolve('@marko/webpack/loader'), - options: { - compiler: require.resolve('marko/compiler'), - }, }, ], }, diff --git a/app/mithril/.npmignore b/app/mithril/.npmignore deleted file mode 100644 index 6d236e2ff68..00000000000 --- a/app/mithril/.npmignore +++ /dev/null @@ -1,2 +0,0 @@ -docs -.babelrc diff --git a/app/mithril/package.json b/app/mithril/package.json index ed2419e95cb..be44090136a 100644 --- a/app/mithril/package.json +++ b/app/mithril/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/mithril", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Storybook for Mithril: Develop Mithril Component in isolation.", "keywords": [ "storybook" @@ -15,8 +15,13 @@ "directory": "app/mithril" }, "license": "MIT", + "files": [ + "bin/**/*", + "dist/**/*", + "README.md", + "standalone.js" + ], "main": "dist/client/index.js", - "jsnext:main": "src/client/index.js", "bin": { "build-storybook": "./bin/build.js", "start-storybook": "./bin/index.js", @@ -27,7 +32,7 @@ }, "dependencies": { "@babel/plugin-transform-react-jsx": "^7.3.0", - "@storybook/core": "5.2.0-beta.47", + "@storybook/core": "5.3.0-alpha.4", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/app/polymer/.npmignore b/app/polymer/.npmignore deleted file mode 100644 index 329fc8d67ad..00000000000 --- a/app/polymer/.npmignore +++ /dev/null @@ -1,3 +0,0 @@ -docs -src -.babelrc diff --git a/app/polymer/package.json b/app/polymer/package.json index 1209d85f527..19956095569 100644 --- a/app/polymer/package.json +++ b/app/polymer/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/polymer", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -15,6 +15,12 @@ "directory": "app/polymer" }, "license": "MIT", + "files": [ + "bin/**/*", + "dist/**/*", + "README.md", + "standalone.js" + ], "main": "dist/client/index.js", "bin": { "build-storybook": "./bin/build.js", @@ -25,7 +31,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "5.2.0-beta.47", + "@storybook/core": "5.3.0-alpha.4", "@webcomponents/webcomponentsjs": "^1.2.0", "common-tags": "^1.8.0", "core-js": "^3.0.1", diff --git a/app/preact/.npmignore b/app/preact/.npmignore deleted file mode 100644 index 6d236e2ff68..00000000000 --- a/app/preact/.npmignore +++ /dev/null @@ -1,2 +0,0 @@ -docs -.babelrc diff --git a/app/preact/package.json b/app/preact/package.json index 09b1b5925b6..69e8a054e5a 100644 --- a/app/preact/package.json +++ b/app/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" @@ -15,6 +15,12 @@ "directory": "app/preact" }, "license": "MIT", + "files": [ + "bin/**/*", + "dist/**/*", + "README.md", + "standalone.js" + ], "main": "dist/client/index.js", "types": "dist/client/index.d.ts", "bin": { @@ -27,8 +33,9 @@ }, "dependencies": { "@babel/plugin-transform-react-jsx": "^7.3.0", - "@storybook/addons": "5.2.0-beta.47", - "@storybook/core": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/core": "5.3.0-alpha.4", + "@types/webpack-env": "^1.13.9", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/app/preact/src/client/preview/types.ts b/app/preact/src/client/preview/types.ts index 9ee1c996608..8e3e08f1409 100644 --- a/app/preact/src/client/preview/types.ts +++ b/app/preact/src/client/preview/types.ts @@ -1,6 +1,6 @@ import { StoryFn, ClientStoryApi, Loadable } from '@storybook/addons'; -export type StoryFnPreactReturnType = string | Node; +export type StoryFnPreactReturnType = string | Node | JSX.Element; export interface ShowErrorArgs { title: string; diff --git a/app/rax/.npmignore b/app/rax/.npmignore deleted file mode 100644 index 6d236e2ff68..00000000000 --- a/app/rax/.npmignore +++ /dev/null @@ -1,2 +0,0 @@ -docs -.babelrc diff --git a/app/rax/package.json b/app/rax/package.json index 712ee4f470b..8400c4452ff 100644 --- a/app/rax/package.json +++ b/app/rax/package.json @@ -1,10 +1,10 @@ { "name": "@storybook/rax", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Storybook for Rax: Develop Rax Component in isolation.", "keywords": [ - "storybook", - "rax" + "rax", + "storybook" ], "homepage": "https://github.com/storybookjs/storybook/tree/master/app/rax", "bugs": { @@ -16,8 +16,13 @@ "directory": "app/rax" }, "license": "MIT", + "files": [ + "bin/**/*", + "dist/**/*", + "README.md", + "standalone.js" + ], "main": "dist/client/index.js", - "jsnext:main": "src/client/index.js", "bin": { "build-storybook": "./bin/build.js", "start-storybook": "./bin/index.js", @@ -27,15 +32,16 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "5.2.0-beta.47", + "@storybook/core": "5.3.0-alpha.4", "babel-preset-rax": "^1.0.0-beta.0", "common-tags": "^1.8.0", - "core-js": "^2.6.2", + "core-js": "^3.0.1", + "driver-dom": "^2.0.0", "global": "^4.3.2", "regenerator-runtime": "^0.12.1" }, "devDependencies": { - "rax": "^0.6.5" + "rax": "^1.0.0" }, "peerDependencies": { "babel-loader": "^7.0.0 || ^8.0.0", diff --git a/app/rax/src/client/preview/render.js b/app/rax/src/client/preview/render.js index 99f54aed0bc..b678e19211d 100644 --- a/app/rax/src/client/preview/render.js +++ b/app/rax/src/client/preview/render.js @@ -1,4 +1,6 @@ import { createElement, render } from 'rax'; +import * as DriverDOM from 'driver-dom'; + import { document } from 'global'; import { stripIndents } from 'common-tags'; @@ -12,9 +14,9 @@ export default function renderMain({ showError, // forceRender, }) { - const element = storyFn(); + const Element = storyFn; - if (!element) { + if (!Element) { showError({ title: `Expecting a Rax element from the story: "${selectedStory}" of "${selectedKind}".`, description: stripIndents` @@ -27,5 +29,7 @@ export default function renderMain({ showMain(); - render(element, rootElement); + render(createElement(Element), rootElement, { + driver: DriverDOM, + }); } diff --git a/app/react-native-server/.npmignore b/app/react-native-server/.npmignore deleted file mode 100644 index 6d236e2ff68..00000000000 --- a/app/react-native-server/.npmignore +++ /dev/null @@ -1,2 +0,0 @@ -docs -.babelrc diff --git a/app/react-native-server/package.json b/app/react-native-server/package.json index b0d6d0a79d5..b268e7e84e0 100644 --- a/app/react-native-server/package.json +++ b/app/react-native-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native-server", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "A better way to develop React Native Components for your app", "keywords": [ "react", @@ -16,6 +16,11 @@ "url": "https://github.com/storybookjs/storybook.git" }, "license": "MIT", + "files": [ + "bin/**/*", + "dist/**/*", + "README.md" + ], "bin": { "start-storybook": "./bin/index.js", "storybook-server": "./bin/index.js" @@ -24,12 +29,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/api": "5.2.0-beta.47", - "@storybook/channel-websocket": "5.2.0-beta.47", - "@storybook/core": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", - "@storybook/ui": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/api": "5.3.0-alpha.4", + "@storybook/channel-websocket": "5.3.0-alpha.4", + "@storybook/core": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", + "@storybook/ui": "5.3.0-alpha.4", "commander": "^2.19.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/app/react-native/.npmignore b/app/react-native/.npmignore deleted file mode 100644 index 6d236e2ff68..00000000000 --- a/app/react-native/.npmignore +++ /dev/null @@ -1,2 +0,0 @@ -docs -.babelrc diff --git a/app/react-native/package.json b/app/react-native/package.json index 24ba80d1c16..82379719cd5 100644 --- a/app/react-native/package.json +++ b/app/react-native/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "A better way to develop React Native Components for your app", "keywords": [ "react", @@ -17,20 +17,25 @@ "directory": "app/react-native" }, "license": "MIT", + "files": [ + "bin/**/*", + "dist/**/*", + "README.md" + ], "main": "dist/index.js", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@emotion/core": "^10.0.14", + "@emotion/core": "^10.0.17", "@emotion/native": "^10.0.14", - "@storybook/addons": "5.2.0-beta.47", - "@storybook/channel-websocket": "5.2.0-beta.47", - "@storybook/channels": "5.2.0-beta.47", - "@storybook/client-api": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/channel-websocket": "5.3.0-alpha.4", + "@storybook/channels": "5.3.0-alpha.4", + "@storybook/client-api": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", "core-js": "^3.0.1", - "emotion-theming": "^10.0.14", + "emotion-theming": "^10.0.19", "react-native-swipe-gestures": "^1.0.3", "rn-host-detect": "^1.1.5" }, diff --git a/app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx b/app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx index d368802cdd5..4760f9dbb3b 100644 --- a/app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx +++ b/app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx @@ -27,7 +27,8 @@ export default class AbsolutePositionedKeyboardAwareView extends PureComponent

=8.0.0" }, diff --git a/app/react/src/client/preview/element_check.test.tsx b/app/react/src/client/preview/element_check.test.tsx deleted file mode 100644 index 862eee2a548..00000000000 --- a/app/react/src/client/preview/element_check.test.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import React from 'react'; -import isReactRenderable, { isValidFiberElement, isPriorToFiber } from './element_check'; - -describe('element_check.utils.isValidFiberElement', () => { - it('should accept to render a string', () => { - const string = 'react is awesome'; - - expect(isValidFiberElement(string)).toBe(true); - }); - - it('should accept to render a number', () => { - const number = 42; - - expect(isValidFiberElement(number)).toBe(true); - }); - - it('should accept to render a valid React element', () => { - const element = ; - - expect(isValidFiberElement(element)).toBe(true); - }); - - it("shouldn't accept to render an arbitrary object", () => { - const object = { key: 'bee bop' }; - - expect(isValidFiberElement(object)).toBe(false); - }); - - it("shouldn't accept to render a function", () => { - const noop = () => {}; - - expect(isValidFiberElement(noop)).toBe(false); - }); - - it("shouldn't accept to render undefined", () => { - expect(isValidFiberElement(undefined)).toBe(false); - }); -}); - -describe('element_check.utils.isPriorToFiber', () => { - it('should return true if React version is prior to Fiber (< 16)', () => { - const oldVersion = '0.14.5'; - const version = '15.5.4'; - - expect(isPriorToFiber(oldVersion)).toBe(true); - expect(isPriorToFiber(version)).toBe(true); - }); - - it('should return false if React version is using Fiber features (>= 16)', () => { - const alphaVersion = '16.0.0-alpha.13'; - const version = '18.3.1'; - - expect(isPriorToFiber(alphaVersion)).toBe(false); - expect(isPriorToFiber(version)).toBe(false); - }); -}); - -describe('element_check.isReactRenderable', () => { - const string = 'yo'; - const number = 1337; - const element = what's up; - const array = [string, number, element]; - const object = { key: null } as any; - - it('allows rendering React elements only prior to React Fiber', () => { - // mutate version for the purpose of the test - // @ts-ignore - React.version = '15.5.4'; - - expect(isReactRenderable(string)).toBe(false); - expect(isReactRenderable(number)).toBe(false); - expect(isReactRenderable(element)).toBe(true); - expect(isReactRenderable(array)).toBe(false); - expect(isReactRenderable(object)).toBe(false); - }); - - it('allows rendering string, numbers, arrays and React elements with React Fiber', () => { - // mutate version for the purpose of the test - // @ts-ignore - React.version = '16.0.0-alpha.13'; - - expect(isReactRenderable(string)).toBe(true); - expect(isReactRenderable(number)).toBe(true); - expect(isReactRenderable(element)).toBe(true); - expect(isReactRenderable(array)).toBe(true); - expect(isReactRenderable(object)).toBe(false); - }); -}); diff --git a/app/react/src/client/preview/element_check.ts b/app/react/src/client/preview/element_check.ts deleted file mode 100644 index 42f6b551c45..00000000000 --- a/app/react/src/client/preview/element_check.ts +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import flattenDeep from 'lodash/flattenDeep'; - -// return true if the element is renderable with react fiber -export const isValidFiberElement = (element: React.ReactElement) => - typeof element === 'string' || typeof element === 'number' || React.isValidElement(element); - -export const isPriorToFiber = (version: string) => { - const [majorVersion] = version.split('.'); - - return Number(majorVersion) < 16; -}; - -// accepts an element and return true if renderable else return false -const isReactRenderable = (element: React.ReactElement): boolean => { - // storybook is running with a version prior to fiber, - // run a simple check on the element - if (isPriorToFiber(React.version)) { - return React.isValidElement(element); - } - - // the element is not an array, check if its a fiber renderable element - if (!Array.isArray(element)) { - return isValidFiberElement(element); - } - - // the element is in fact a list of elements (array), - // loop on its elements to see if its ok to render them - const elementsList = element.map(isReactRenderable); - - // flatten the list of elements (possibly deep nested) - const flatList = flattenDeep(elementsList); - - // keep only invalid elements - const invalidElements = flatList.filter(elementIsRenderable => elementIsRenderable === false); - - // it's ok to render this list if there is no invalid elements inside - return !invalidElements.length; -}; - -export default isReactRenderable; diff --git a/app/react/src/client/preview/render.tsx b/app/react/src/client/preview/render.tsx index 36068d6c09b..be14c1fdb21 100644 --- a/app/react/src/client/preview/render.tsx +++ b/app/react/src/client/preview/render.tsx @@ -1,9 +1,7 @@ import { document } from 'global'; import React from 'react'; import ReactDOM from 'react-dom'; -import { stripIndents } from 'common-tags'; -import isReactRenderable from './element_check'; -import { RenderMainArgs } from './types'; +import { RenderMainArgs, ShowErrorArgs } from './types'; const rootEl = document ? document.getElementById('root') : null; @@ -16,37 +14,49 @@ const render = (node: React.ReactElement, el: Element) => ); }); +class ErrorBoundary extends React.Component<{ + showError: (args: ShowErrorArgs) => void; + showMain: () => void; +}> { + state = { hasError: false }; + + static getDerivedStateFromError() { + return { hasError: true }; + } + + componentDidMount() { + const { hasError } = this.state; + const { showMain } = this.props; + if (!hasError) { + showMain(); + } + } + + componentDidCatch({ message, stack }: Error) { + const { showError } = this.props; + // message partially duplicates stack, strip it + showError({ title: message.split(/\n/)[0], description: stack }); + } + + render() { + const { hasError } = this.state; + const { children } = this.props; + + return hasError ? null : children; + } +} + export default async function renderMain({ storyFn: StoryFn, - selectedKind, - selectedStory, showMain, showError, forceRender, }: RenderMainArgs) { - const element = ; - - if (!element) { - showError({ - title: `Expecting a React element from the story: "${selectedStory}" of "${selectedKind}".`, - description: stripIndents` - Did you forget to return the React element from the story? - Use "() => ()" or "() => { return ; }" when defining the story. - `, - }); - return; - } - - if (!isReactRenderable(element)) { - showError({ - title: `Expecting a valid React element from the story: "${selectedStory}" of "${selectedKind}".`, - description: stripIndents` - Seems like you are not returning a correct React element from the story. - Could you double check that? - `, - }); - return; - } + const element = ( + + + + ); // We need to unmount the existing set of components in the DOM node. // Otherwise, React may not recreate instances for every story run. @@ -58,5 +68,4 @@ export default async function renderMain({ } await render(element, rootEl); - showMain(); } diff --git a/app/riot/.npmignore b/app/riot/.npmignore deleted file mode 100644 index b467c377fd1..00000000000 --- a/app/riot/.npmignore +++ /dev/null @@ -1,2 +0,0 @@ -src -.babelrc diff --git a/app/riot/package.json b/app/riot/package.json index f410aeb0fe9..31ef19fcd20 100644 --- a/app/riot/package.json +++ b/app/riot/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/riot", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -15,6 +15,12 @@ "directory": "app/riot" }, "license": "MIT", + "files": [ + "bin/**/*", + "dist/**/*", + "README.md", + "standalone.js" + ], "main": "dist/client/index.js", "bin": { "build-storybook": "./bin/build.js", @@ -25,7 +31,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "5.2.0-beta.47", + "@storybook/core": "5.3.0-alpha.4", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/app/svelte/.npmignore b/app/svelte/.npmignore deleted file mode 100644 index 6d236e2ff68..00000000000 --- a/app/svelte/.npmignore +++ /dev/null @@ -1,2 +0,0 @@ -docs -.babelrc diff --git a/app/svelte/package.json b/app/svelte/package.json index 1e3e4d63b64..3016342139b 100644 --- a/app/svelte/package.json +++ b/app/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -15,8 +15,13 @@ "directory": "app/svelte" }, "license": "MIT", + "files": [ + "bin/**/*", + "dist/**/*", + "README.md", + "standalone.js" + ], "main": "dist/client/index.js", - "jsnext:main": "src/client/index.js", "bin": { "build-storybook": "./bin/build.js", "start-storybook": "./bin/index.js", @@ -26,7 +31,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/core": "5.2.0-beta.47", + "@storybook/core": "5.3.0-alpha.4", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/app/vue/.npmignore b/app/vue/.npmignore deleted file mode 100644 index 6d236e2ff68..00000000000 --- a/app/vue/.npmignore +++ /dev/null @@ -1,2 +0,0 @@ -docs -.babelrc diff --git a/app/vue/package.json b/app/vue/package.json index 32e023ca6d9..c7946ab4320 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -15,6 +15,12 @@ "directory": "app/vue" }, "license": "MIT", + "files": [ + "bin/**/*", + "dist/**/*", + "README.md", + "standalone.js" + ], "main": "dist/client/index.js", "types": "dist/client/index.d.ts", "bin": { @@ -26,8 +32,9 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/core": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/core": "5.3.0-alpha.4", + "@types/webpack-env": "^1.13.9", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/app/vue/src/client/preview/index.ts b/app/vue/src/client/preview/index.ts index 814c6217177..f00ff833860 100644 --- a/app/vue/src/client/preview/index.ts +++ b/app/vue/src/client/preview/index.ts @@ -17,13 +17,18 @@ import { extractProps } from './util'; export const WRAPS = 'STORYBOOK_WRAPS'; -function prepare(rawStory: StoryFnVueReturnType, innerStory?: VueConstructor): VueConstructor { +function prepare( + rawStory: StoryFnVueReturnType, + innerStory?: VueConstructor +): VueConstructor | null { let story: ComponentOptions | VueConstructor; if (typeof rawStory === 'string') { story = { template: rawStory }; - } else { + } else if (rawStory != null) { story = rawStory as ComponentOptions; + } else { + return null; } // @ts-ignore diff --git a/dev-kits/addon-decorator/package.json b/dev-kits/addon-decorator/package.json index c8a9655591e..61283f211da 100644 --- a/dev-kits/addon-decorator/package.json +++ b/dev-kits/addon-decorator/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-decorator", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "decorator addon for storybook", "keywords": [ "devkit", @@ -24,8 +24,8 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/client-api": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/client-api": "5.3.0-alpha.4", "core-js": "^3.0.1", "global": "^3.0.1" }, diff --git a/dev-kits/addon-parameter/package.json b/dev-kits/addon-parameter/package.json index 3bd31530708..b815c5b5e0c 100644 --- a/dev-kits/addon-parameter/package.json +++ b/dev-kits/addon-parameter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-parameter", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "parameter addon for storybook", "keywords": [ "devkit", @@ -24,12 +24,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/api": "5.2.0-beta.47", - "@storybook/client-logger": "5.2.0-beta.47", - "@storybook/components": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", - "@storybook/theming": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/api": "5.3.0-alpha.4", + "@storybook/client-logger": "5.3.0-alpha.4", + "@storybook/components": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", + "@storybook/theming": "5.3.0-alpha.4", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/dev-kits/addon-roundtrip/package.json b/dev-kits/addon-roundtrip/package.json index caac455937d..ae5851a0a9c 100644 --- a/dev-kits/addon-roundtrip/package.json +++ b/dev-kits/addon-roundtrip/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-roundtrip", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "roundtrip addon for storybook", "keywords": [ "devkit", @@ -24,13 +24,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/api": "5.2.0-beta.47", - "@storybook/client-api": "5.2.0-beta.47", - "@storybook/client-logger": "5.2.0-beta.47", - "@storybook/components": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", - "@storybook/theming": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/api": "5.3.0-alpha.4", + "@storybook/client-api": "5.3.0-alpha.4", + "@storybook/client-logger": "5.3.0-alpha.4", + "@storybook/components": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", + "@storybook/theming": "5.3.0-alpha.4", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/docs/package.json b/docs/package.json index 933e7d8160f..61de6098d94 100644 --- a/docs/package.json +++ b/docs/package.json @@ -15,7 +15,7 @@ "serve": "gatsby serve" }, "dependencies": { - "@storybook/components": "5.2.0-beta.7", + "@storybook/components": "5.2.0-beta.48", "@storybook/theming": "5.2.0-beta.7", "babel-loader": "^6.4.1", "babel-plugin-styled-components": "^1.10.6", @@ -47,7 +47,7 @@ "react-router": "^4.3.1", "react-stack-grid": "^0.7.1", "recompose": "^0.30.0", - "sitemap": "^4.0.1", + "sitemap": "^4.1.1", "styled-components": "^4.3.2", "validatorjs": "^3.15.1" } diff --git a/docs/src/new-components/basics/tooltip/TooltipLinkList.js b/docs/src/new-components/basics/tooltip/TooltipLinkList.js index 75cd38c5f76..9c9a8d68b85 100644 --- a/docs/src/new-components/basics/tooltip/TooltipLinkList.js +++ b/docs/src/new-components/basics/tooltip/TooltipLinkList.js @@ -7,7 +7,7 @@ const List = styled.div` min-width: 180px; overflow: hidden; overflow-y: auto; - maxHeight: ${10.5 * 32 /* 10.5 items */}; + maxheight: ${10.5 * 32 /* 10.5 items */}; `; function TooltipLinkList({ links, LinkWrapper }) { diff --git a/docs/src/pages/basics/live-examples/index.md b/docs/src/pages/basics/live-examples/index.md index d3d39bdc24f..4f236c045a1 100644 --- a/docs/src/pages/basics/live-examples/index.md +++ b/docs/src/pages/basics/live-examples/index.md @@ -4,32 +4,37 @@ title: 'Live Examples' --- ### Next release -- [React Official](https://monorepo.storybook.now.sh/examples/official-storybook/) -- [Vue](https://monorepo.storybook.now.sh/examples/vue-kitchen-sink/) -- [Angular](https://monorepo.storybook.now.sh/examples/angular-cli/) -- [Polymer](https://monorepo.storybook.now.sh/examples/polymer-cli/) -- [Mithril](https://monorepo.storybook.now.sh/examples/mithril-kitchen-sink/) -- [Marko](https://monorepo.storybook.now.sh/examples/marko-cli/) -- [HTML](https://monorepo.storybook.now.sh/examples/html-kitchen-sink/) -- [Svelte](https://monorepo.storybook.now.sh/examples/svelte-kitchen-sink/) -- [Riot](https://monorepo.storybook.now.sh/examples/riot-kitchen-sink/) -- [Ember](https://monorepo.storybook.now.sh/examples/ember-cli/) -- [Preact](https://monorepo.storybook.now.sh/examples/preact-kitchen-sink/) + +- [React Official](https://storybookjs-next.now.sh/official-storybook/) +- [Vue](https://storybookjs-next.now.sh/vue-kitchen-sink/) +- [Angular](https://storybookjs-next.now.sh/angular-cli/) +- [Polymer](https://storybookjs-next.now.sh/polymer-cli/) +- [Mithril](https://storybookjs-next.now.sh/mithril-kitchen-sink/) +- [Marko](https://storybookjs-next.now.sh/marko-cli/) +- [HTML](https://storybookjs-next.now.sh/html-kitchen-sink/) +- [Svelte](https://storybookjs-next.now.sh/svelte-kitchen-sink/) +- [Riot](https://storybookjs-next.now.sh/riot-kitchen-sink/) +- [Ember](https://storybookjs-next.now.sh/ember-cli/) +- [Preact](https://storybookjs-next.now.sh/preact-kitchen-sink/) +- [Rax](https://storybookjs-next.now.sh/rax-kitchen-sink/) ### Current release -- [React Official](https://monorepo-git-master.storybook.now.sh/examples/official-storybook/) -- [Vue](https://monorepo-git-master.storybook.now.sh/examples/vue-kitchen-sink/) -- [Angular](https://monorepo-git-master.storybook.now.sh/examples/angular-cli/) -- [Polymer](https://monorepo-git-master.storybook.now.sh/examples/polymer-cli/) -- [Mithril](https://monorepo-git-master.storybook.now.sh/examples/mithril-kitchen-sink/) -- [Marko](https://monorepo-git-master.storybook.now.sh/examples/marko-cli/) -- [HTML](https://monorepo-git-master.storybook.now.sh/examples/html-kitchen-sink/) -- [Svelte](https://monorepo-git-master.storybook.now.sh/examples/svelte-kitchen-sink/) -- [Riot](https://monorepo-git-master.storybook.now.sh/examples/riot-kitchen-sink/) -- [Ember](https://monorepo-git-master.storybook.now.sh/examples/ember-cli/) -- [Preact](https://monorepo-git-master.storybook.now.sh/examples/preact-kitchen-sink/) + +- [React Official](https://storybookjs.now.sh/official-storybook/) +- [Vue](https://storybookjs.now.sh/vue-kitchen-sink/) +- [Angular](https://storybookjs.now.sh/angular-cli/) +- [Polymer](https://storybookjs.now.sh/polymer-cli/) +- [Mithril](https://storybookjs.now.sh/mithril-kitchen-sink/) +- [Marko](https://storybookjs.now.sh/marko-cli/) +- [HTML](https://storybookjs.now.sh/html-kitchen-sink/) +- [Svelte](https://storybookjs.now.sh/svelte-kitchen-sink/) +- [Riot](https://storybookjs.now.sh/riot-kitchen-sink/) +- [Ember](https://storybookjs.now.sh/ember-cli/) +- [Preact](https://storybookjs.now.sh/preact-kitchen-sink/) +- [Rax](https://storybookjs.now.sh/rax-kitchen-sink/) ### 5.1 + - [React Official](https://storybooks-official.netlify.com) - [Vue](https://storybooks-vue.netlify.com/) - [Angular](https://storybooks-angular.netlify.com/) @@ -43,12 +48,14 @@ title: 'Live Examples' - [Preact](https://storybooks-preact.netlify.com/) ### 3.4 + - [React Official](https://release-3-4--storybooks-official.netlify.com) - [Vue](https://release-3-4--storybooks-vue.netlify.com/) - [Angular](https://release-3-4--storybooks-angular.netlify.com/) - [Polymer](https://release-3-4--storybooks-polymer.netlify.com/) ### 3.3 + - [React Official](https://release-3-3--storybooks-official.netlify.com) - [Vue](https://release-3-3--storybooks-vue.netlify.com/) - [Angular](https://release-3-3--storybooks-angular.netlify.com/) diff --git a/docs/src/pages/basics/writing-stories/index.md b/docs/src/pages/basics/writing-stories/index.md index 41f1d0d2024..fca8e72e0a8 100644 --- a/docs/src/pages/basics/writing-stories/index.md +++ b/docs/src/pages/basics/writing-stories/index.md @@ -103,13 +103,15 @@ import { configure } from '@storybook/react'; configure(require.context('../src/components', true, /\.stories\.js$/), module); ``` +> NOTE: The `configure` function should be called only once in `config.js`. + The `configure` function accepts: - A single `require.context` "`req`" - An array of `req`s to load from multiple locations - A loader function that should return void or an array of module exports -If you want to load from multiple locations, you could use an array: +If you want to load from multiple locations, you can use an array: ```js import { configure } from '@storybook/react'; @@ -120,7 +122,22 @@ configure([ ], module); ``` -Or if you want to do some custom loading logic, you can use a loader function. Just remember to return an array of module exports if you want to use the module story format: +Or if you want to do some custom loading logic, you can use a loader function. Just remember to return an array of module exports if you want to use Component Story Format. Here's an example that forces files to load in a specific order. + +```js +import { configure } from '@storybook/react'; + +const loaderFn = () => ([ + require('./welcome.stories.js'), + require('./prelude.stories.js'), + require('./button.stories.js'), + require('./input.stories.js'), +]); + +configure(loaderFn, module); +``` + +Here's another example that mixes manual loading with glob-style loading: ```js import { configure } from '@storybook/react'; @@ -137,7 +154,23 @@ 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`. -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. +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**: + +```js +import { configure } from '@storybook/react'; + +const loaderFn = () => { + // manual loading + require('./welcome.stories.js'); + require('./button.stories.js'); + + // dynamic loading, unavailable in react-native + const req = require.context('../src/components', true, /\.stories\.js$/); + req.keys().forEach(req(fname)); +}; + +configure(loaderFn, module); +``` Furthermore, the **React Native** packager resolves all imports at build-time, so it's not possible to load modules dynamically. There is a third party loader [react-native-storybook-loader](https://github.com/elderfo/react-native-storybook-loader) to automatically generate the import statements for all stories. diff --git a/docs/src/pages/configurations/env-vars/index.md b/docs/src/pages/configurations/env-vars/index.md index d2a7901366c..056fefd0e6c 100644 --- a/docs/src/pages/configurations/env-vars/index.md +++ b/docs/src/pages/configurations/env-vars/index.md @@ -24,6 +24,14 @@ out.log(process.env.STORYBOOK_DATA_KEY); > Even though we can access these env variables anywhere in the client side JS code, it's better to use them only inside stories and inside the main Storybook config file. +## Usage in custom head/body + +These environment variables can be used in [custom head](/configurations/add-custom-head-tags) and [custom body](/configurations/add-custom-body) files. + +Storybook will replace percent-delimited variable names with their values; e.g. `%STORYBOOK_THEME%` will become `red`. + +> If using the environment variables as attributes or values in JavaScript, you may need to add quotes, as the value will be inserted directly. e.g. `` + ## Build time environment variables You can also pass these environment variables when you are [building your storybook](/basics/exporting-storybook) with `build-storybook`. diff --git a/docs/src/pages/configurations/typescript-config/index.md b/docs/src/pages/configurations/typescript-config/index.md index e16f1253613..199f91f10e9 100644 --- a/docs/src/pages/configurations/typescript-config/index.md +++ b/docs/src/pages/configurations/typescript-config/index.md @@ -113,7 +113,7 @@ The default `tsconfig.json` that comes with CRA works great. If your stories are ## Create a TSX storybook index -The default storybook index file is `stories/index.js` -- you'll want to rename this to `stories/index.tsx`. +The default storybook index file is `stories/index.stories.js` -- you'll want to rename this to `stories/index.stories.tsx`. ## Import tsx stories @@ -122,13 +122,7 @@ Change `config.ts` inside the Storybook config directory (by default, it’s `.s ```js import { configure } from '@storybook/react'; // automatically import all files ending in *.stories.tsx -const req = require.context('../stories', true, /\.stories\.tsx$/); - -function loadStories() { - req.keys().forEach(req); -} - -configure(loadStories, module); +configure(require.context('../src', true, /\.stories\.tsx?$/), module) ``` ## Using TypeScript with the TSDocgen addon diff --git a/docs/src/pages/guides/guide-angular/index.md b/docs/src/pages/guides/guide-angular/index.md index a5b5edf7ab8..9a2e27d60c5 100644 --- a/docs/src/pages/guides/guide-angular/index.md +++ b/docs/src/pages/guides/guide-angular/index.md @@ -55,33 +55,10 @@ To do that, create a file at `.storybook/config.js` with the following content: ```ts import { configure } from '@storybook/angular'; -function loadStories() { - require('../stories/index.js'); - // You can require as many stories as you need. -} - -configure(loadStories, module); +configure(require.context('../src', true, /\.stories\.[tj]s$/), module); ``` -That'll load stories in `../stories/index.js`. You can choose where to place stories, you can co-locate them with source files, or place them in an other directory. - -> Requiring all your stories becomes bothersome real quick, so you can use this to load all stories matching a glob. -> ->

-> details -> -> ```ts -> import { configure } from '@storybook/angular'; -> -> function loadStories() { -> const req = require.context('../stories', true, /\.stories\.ts$/); -> req.keys().forEach(filename => req(filename)); -> } -> -> configure(loadStories, module); -> ``` -> ->
+That will load all the stories underneath your `../src` directory that match the pattern `*.stories.[tj]sx?`. We recommend co-locating your stories with your source files, but you can place them wherever you choose. ## Step 4: Storybook TypeScript configuration @@ -105,33 +82,34 @@ This makes it necessary to create a `tsconfig.json` file at `.storybook/tsconfig ## Step 5: Write your stories -Now create a `../stories/index.js` file, and write your first story like this: +Now create a `../src/index.stories.js` file, and write your first story like this: ```ts -import { storiesOf } from '@storybook/angular'; import { Button } from '@storybook/angular/demo'; -storiesOf('My Button', module) - .add('with text', () => ({ - component: Button, - props: { - text: 'Hello Button', - }, - })) - .add('with emoji', () => ({ - component: Button, - props: { - text: 'πŸ˜€ 😎 πŸ‘ πŸ’―', - }, - })); +export default { title: 'My Button' } + +export const withText = () => ({ + component: Button, + props: { + text: 'Hello Button', + }, +}); + +export const withEmoji = () => ({ + component: Button, + props: { + text: 'πŸ˜€ 😎 πŸ‘ πŸ’―', + }, +}); ``` Each story is a single state of your component. In the above case, there are two stories for the demo button component: ```plaintext Button - β”œβ”€β”€ with text - └── with emoji + β”œβ”€β”€ With Text + └── With Emoji ``` ## Finally: Run your Storybook diff --git a/docs/src/pages/guides/guide-ember/index.md b/docs/src/pages/guides/guide-ember/index.md index 911c4c52777..8d46462f270 100644 --- a/docs/src/pages/guides/guide-ember/index.md +++ b/docs/src/pages/guides/guide-ember/index.md @@ -64,78 +64,77 @@ To do that, simply create a file at `.storybook/config.js` with the following co ```js import { configure } from '@storybook/ember'; -function loadStories() { - require('../stories/index.js'); - // You can require as many stories as you need. -} - -configure(loadStories, module); +configure(require.context('../src', true, /\.stories\.js$/), module); ``` -That'll load stories in `../stories/index.js`. +That will load all the stories underneath your `../src` directory that match the pattern `*.stories.js`. We recommend co-locating your stories with your source files, but you can place them wherever you choose. ## Write your stories -Now you can write some stories inside the `../stories/index.js` file, like this: +Now you can write some stories inside the `../stories/index.stories.js` file, like this: > It is important that you import the `hbs` function that is provided by a babel plugin in `@storybook/ember` ```js import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -storiesOf('Demo', module) - .add('heading', () => hbs`

Hello World

`) - .add('button', () => { - return { - template: hbs``, - context: { - onClick: (e) => console.log(e) - } +export default { title: 'Demo' }; + +export const heading = () => hbs`

Hello World

`; + +export const button = () => { + return { + template: hbs``, + context: { + onClick: (e) => console.log(e) } - }) - .add('component', () => { - return { - template: hbs`{{foo-bar - click=onClick - }}`, - context: { - onClick: (e) => console.log(e) - } + } +}; + +export const component = () => { + return { + template: hbs`{{foo-bar + click=onClick + }}`, + context: { + onClick: (e) => console.log(e) } - }); + } +}; ``` > If you are using an older version of ember <= 3.1 please use this story style ```js import { compile } from 'ember-source/dist/ember-template-compiler'; -import { storiesOf } from '@storybook/ember'; -storiesOf('Demo', module) - .add('heading', () => compile(`

Hello World

`)) - .add('button', () => { - return { - template: compile(``), - context: { - onClick: (e) => console.log(e) - } +export default { title: 'Demo' }; + +export const heading = () => compile(`

Hello World

`); + +export const button = () => { + return { + template: compile(``), + context: { + onClick: (e) => console.log(e) } - }) - .add('component', () => { - return { - template: compile(`{{foo-bar - click=onClick - }}`), - context: { - onClick: (e) => console.log(e) - } + } +}; + +export const component = () => { + return { + template: compile(`{{foo-bar + click=onClick + }}`), + context: { + onClick: (e) => console.log(e) } - }); + } +}; ``` A story is either: diff --git a/docs/src/pages/guides/guide-html/index.md b/docs/src/pages/guides/guide-html/index.md index 8db981a626d..5fe563f9c2b 100644 --- a/docs/src/pages/guides/guide-html/index.md +++ b/docs/src/pages/guides/guide-html/index.md @@ -63,56 +63,33 @@ To do that, create a file at `.storybook/config.js` with the following content: ```js import { configure } from '@storybook/html'; -function loadStories() { - require('../stories/index.js'); - // You can require as many stories as you need. -} - -configure(loadStories, module); +configure(require.context('../src', true, /\.stories\.js$/), module); ``` -That'll load stories in `../stories/index.js`. You can choose where to place stories, you can co-locate them with source files, or place them in an other directory. - -> Requiring all your stories becomes bothersome real quick, so you can use this to load all stories matching a glob. -> ->
-> details -> -> ```js -> import { configure } from '@storybook/html'; -> -> function loadStories() { -> const req = require.context('../stories', true, /\.stories\.js$/); -> req.keys().forEach(filename => req(filename)); -> } -> -> configure(loadStories, module); -> ``` -> ->
+That will load all the stories underneath your `../src` directory that match the pattern `*.stories.js`. We recommend co-locating your stories with your source files, but you can place them wherever you choose. ## Step 4: Write your stories -Now create a `../stories/index.js` file, and write your first story like this: +Now create a `../src/index.stories.js` file, and write your first story like this: ```js -import { storiesOf } from '@storybook/html'; +export default { title: 'Button' }; -storiesOf('Button', module) - .add('with text', () => '') - .add('with emoji', () => { - const button = document.createElement('button'); - button.innerText = 'πŸ˜€ 😎 πŸ‘ πŸ’―'; - return button; - }); +export const withText = () => ''; + +export const withEmoji = () => { + const button = document.createElement('button'); + button.innerText = 'πŸ˜€ 😎 πŸ‘ πŸ’―'; + return button; +}; ``` Each story is a single state of your component. In the above case, there are two stories for the demo button component: ```plaintext Button - β”œβ”€β”€ with text - └── with emoji + β”œβ”€β”€ With Text + └── With Emoji ``` ## Finally: Run your Storybook diff --git a/docs/src/pages/guides/guide-marko/index.md b/docs/src/pages/guides/guide-marko/index.md index 9da8adc2cfc..01334129f25 100644 --- a/docs/src/pages/guides/guide-marko/index.md +++ b/docs/src/pages/guides/guide-marko/index.md @@ -55,59 +55,37 @@ To do that, create a file at `.storybook/config.js` with the following content: ```js import { configure } from '@storybook/marko'; -function loadStories() { - require('../stories/index.js'); - // You can require as many stories as you need. -} - -configure(loadStories, module); +configure(require.context('../src', true, /\.stories\.js$/), module); ``` -That'll load stories in `../stories/index.js`. You can choose where to place stories, you can co-locate them with source files, or place them in an other directory. - -> Requiring all your stories becomes bothersome real quick, so you can use this to load all stories matching a glob. -> ->
-> details -> -> ```js -> import { configure } from '@storybook/marko'; -> -> function loadStories() { -> const req = require.context('../stories', true, /\.stories\.js$/); -> req.keys().forEach(filename => req(filename)); -> } -> -> configure(loadStories, module); -> ``` -> ->
+That will load all the stories underneath your `../src` directory that match the pattern `*.stories.js`. We recommend co-locating your stories with your source files, but you can place them wherever you choose. ## Step 4: Write your stories -Now create a `../stories/index.js` file, and write your first story like this: +Now create a `../src/index.stories.js` file, and write your first story like this: ```js -import { storiesOf } from '@storybook/marko'; import Button from '../components/button/index.marko'; -storiesOf('Button', module) - .add('with text', () => ({ - component: Button, - input: { text 'some text' } - })) - .add('with emoji', () => ({ - component: Button, - input: { text 'πŸ˜€ 😎 πŸ‘ πŸ’―' } - })); +export default { title: 'Button' } + +export const withText = () => ({ + component: Button, + input: { text 'some text' } +}); + +export const withEmoji = () => ({ + component: Button, + input: { text 'πŸ˜€ 😎 πŸ‘ πŸ’―' } +}); ``` Each story is a single state of your component. In the above case, there are two stories for the demo button component: ```plaintext Button - β”œβ”€β”€ with text - └── with emoji + β”œβ”€β”€ With Text + └── With Emoji ``` ## Finally: Run your Storybook diff --git a/docs/src/pages/guides/guide-mithril/index.md b/docs/src/pages/guides/guide-mithril/index.md index 5cd447794e1..cb9c1684fc1 100644 --- a/docs/src/pages/guides/guide-mithril/index.md +++ b/docs/src/pages/guides/guide-mithril/index.md @@ -56,60 +56,38 @@ To do that, create a file at `.storybook/config.js` with the following content: ```js import { configure } from '@storybook/mithril'; -function loadStories() { - require('../stories/index.js'); - // You can require as many stories as you need. -} - -configure(loadStories, module); +configure(require.context('../src', true, /\.stories\.js$/), module); ``` -That'll load stories in `../stories/index.js`. You can choose where to place stories, you can co-locate them with source files, or place them in an other directory. - -> Requiring all your stories becomes bothersome real quick, so you can use this to load all stories matching a glob. -> ->
-> details -> -> ```js -> import { configure } from '@storybook/mithril'; -> -> function loadStories() { -> const req = require.context('../stories', true, /\.stories\.js$/); -> req.keys().forEach(filename => req(filename)); -> } -> -> configure(loadStories, module); -> ``` -> ->
+That will load all the stories underneath your `../src` directory that match the pattern `*.stories.js`. We recommend co-locating your stories with your source files, but you can place them wherever you choose. ## Step 4: Write your stories -Now create a `../stories/index.js` file, and write your first story like this: +Now create a `../src/index.stories.js` file, and write your first story like this: ```js /** @jsx m */ import m from 'mithril'; -import { storiesOf } from '@storybook/mithril'; import { Button } from ''; -storiesOf('Button', module) - .add('with text', () => ( - - )) - .add('with emoji', () => ( - - )); +export default { title: 'Button' } + +export const withText = () => ( + +); + +export const withEmoji = () => ( + +); ``` Each story is a single state of your component. In the above case, there are two stories for the demo button component: ```plaintext Button - β”œβ”€β”€ with text - └── with emoji + β”œβ”€β”€ With Text + └── With Emoji ``` ## Finally: Run your Storybook diff --git a/docs/src/pages/guides/guide-preact/index.md b/docs/src/pages/guides/guide-preact/index.md index 21f33354d9f..b4f9e0fdf17 100644 --- a/docs/src/pages/guides/guide-preact/index.md +++ b/docs/src/pages/guides/guide-preact/index.md @@ -56,58 +56,36 @@ To do that, create a file at `.storybook/config.js` with the following content: ```js import { configure } from '@storybook/preact'; -function loadStories() { - require('../stories/index.js'); - // You can require as many stories as you need. -} - -configure(loadStories, module); +configure(require.context('../src', true, /\.stories\.js$/), module); ``` -That'll load stories in `../stories/index.js`. You can choose where to place stories, you can co-locate them with source files, or place them in an other directory. - -> Requiring all your stories becomes bothersome real quick, so you can use this to load all stories matching a glob. -> ->
-> details -> -> ```js -> import { configure } from '@storybook/preact'; -> -> function loadStories() { -> const req = require.context('../stories', true, /\.stories\.js$/); -> req.keys().forEach(filename => req(filename)); -> } -> -> configure(loadStories, module); -> ``` -> ->
+That will load all the stories underneath your `../src` directory that match the pattern `*.stories.js`. We recommend co-locating your stories with your source files, but you can place them wherever you choose. ## Step 4: Write your stories -Now create a `../stories/index.js` file, and write your first story like this: +Now create a `../src/index.stories.js` file, and write your first story like this: ```js import { h } from 'preact'; -import { storiesOf } from '@storybook/preact'; import { Button } from ''; -storiesOf('Button', module) - .add('with text', () => ( - - )) - .add('with emoji', () => ( - - )); +export default { title: 'Button' } + +export const withText = () => ( + +); + +export const withEmoji = () => ( + +); ``` Each story is a single state of your component. In the above case, there are two stories for the demo button component: ```plaintext Button - β”œβ”€β”€ with text - └── with emoji + β”œβ”€β”€ With Text + └── With Emoji ``` ## Finally: Run your Storybook diff --git a/docs/src/pages/guides/guide-rax/index.md b/docs/src/pages/guides/guide-rax/index.md index 4c5994e9b14..0284101df10 100644 --- a/docs/src/pages/guides/guide-rax/index.md +++ b/docs/src/pages/guides/guide-rax/index.md @@ -56,55 +56,30 @@ To do that, create a file at `.storybook/config.js` with the following content: ```js import { configure } from '@storybook/rax'; -function loadStories() { - require('../stories/index.js'); - // You can require as many stories as you need. -} - -configure(loadStories, module); +configure(require.context('../src', true, /\.stories\.js$/), module); ``` -That'll load stories in `../stories/index.js`. You can choose where to place stories, you can co-locate them with source files, or place them in an other directory. - -> Requiring all your stories becomes bothersome real quick, so you can use this to load all stories matching a glob. -> ->
-> details -> -> ```js -> import { configure } from '@storybook/rax'; -> -> function loadStories() { -> const req = require.context('../stories', true, /\.stories\.js$/); -> req.keys().forEach(filename => req(filename)); -> } -> -> configure(loadStories, module); -> ``` -> ->
+That will load all the stories underneath your `../src` directory that match the pattern `*.stories.js`. We recommend co-locating your stories with your source files, but you can place them wherever you choose. ## Step 4: Write your stories -Now create a `../stories/index.js` file, and write your first story like this: +Now create a `../src/index.stories.js` file, and write your first story like this: ```js import { createElement } from 'rax'; -import { storiesOf } from '@storybook/rax'; - import Button from ''; -storiesOf('Button', module) - .add('with text', () => ) - .add('with emoji', () => ); +export const { title: 'Button' } +export const withText = () => ; +export const withEmoji = () => ; ``` Each story is a single state of your component. In the above case, there are two stories for the demo button component: ```plaintext Button - β”œβ”€β”€ with text - └── with emoji + β”œβ”€β”€ With Text + └── With Emoji ``` ## Finally: Run your Storybook diff --git a/docs/src/pages/guides/guide-react/index.md b/docs/src/pages/guides/guide-react/index.md index 100478492f9..f69eaa8e48c 100644 --- a/docs/src/pages/guides/guide-react/index.md +++ b/docs/src/pages/guides/guide-react/index.md @@ -58,58 +58,34 @@ To do that, create a file at `.storybook/config.js` with the following content: ```js import { configure } from '@storybook/react'; -function loadStories() { - require('../stories/index.js'); - // You can require as many stories as you need. -} - -configure(loadStories, module); +configure(require.context('../src', true, /\.stories\.js$/), module); ``` -That'll load stories in `../stories/index.js`. You can choose where to place stories, you can co-locate them with source files, or place them in an other directory. - -> Requiring all your stories becomes bothersome real quick, so you can use this to load all stories matching a glob. -> ->
-> details -> -> ```js -> import { configure } from '@storybook/react'; -> -> function loadStories() { -> const req = require.context('../stories', true, /\.stories\.js$/); -> req.keys().forEach(filename => req(filename)); -> } -> -> configure(loadStories, module); -> ``` -> ->
+That will load all the stories underneath your `../src` directory that match the pattern `*.stories.js`. We recommend co-locating your stories with your source files, but you can place them wherever you choose. ## Step 4: Write your stories -Now create a `../stories/index.js` file, and write your first story like this: +Now create a `../src/index.stories.js` file, and write your first story like this: ```js import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Button } from '@storybook/react/demo'; -storiesOf('Button', module) - .add('with text', () => ( - - )) - .add('with emoji', () => ( - - )); +export default { title: 'Button' }; + +export const withText = () => ; + +export const withEmoji = () => ( + +); ``` Each story is a single state of your component. In the above case, there are two stories for the demo button component: ```plaintext Button - β”œβ”€β”€ with text - └── with emoji + β”œβ”€β”€ With Text + └── With Emoji ``` ## Finally: Run your Storybook diff --git a/docs/src/pages/guides/guide-react/new.md b/docs/src/pages/guides/guide-react/new.md deleted file mode 100644 index ba199cea54b..00000000000 --- a/docs/src/pages/guides/guide-react/new.md +++ /dev/null @@ -1,158 +0,0 @@ - -## Automatic setup - -You may have tried to use our quick start guide to setup your project for Storybook. -If it failed because it couldn't detect you're using vue, you could try forcing it to use vue: - -```sh -npx -p @storybook/cli sb init --type vue -``` - -## Manual setup - -If you want to set up Storybook manually for your React project, this is the guide for you. - -## Step 1: Add dependencies - -### Add @storybook/vue - -Add `@storybook/vue` to your project. To do that, run: - -```sh -npm install @storybook/vue --save-dev -``` - -### Add vue, vue-dom, @babel/core, and babel-loader - -Make sure that you have `vue`, `vue-loader`, `vue-template-compiler`, `@babel/core`, and `babel-loader` in your dependencies as well because we list these as a peer dependencies: - -```sh -npm install vue --save -npm install babel-loader vue-loader vue-template-compiler @babel/core --save-dev -``` - -## Step 2: Add a npm script - -Then add the following NPM script to your `package.json` in order to start the storybook later in this guide: - -```json -{ - "scripts": { - "storybook": "start-storybook" - } -} -``` - -## Step 3: Create the config file - -For a basic Storybook configuration, the only thing you need to do is tell Storybook where to find stories. - -To do that, create a file at `.storybook/config.js` with the following content: - -```js -import { configure } from '@storybook/vue'; - -function loadStories() { - require('../stories/index.js'); - // You can require as many stories as you need. -} - -configure(loadStories, module); -``` - -That'll load stories in `../stories/index.js`. You can choose where to place stories, you can co-locate them with source files, or place them in an other directory. - -> Requiring all your stories becomes bothersome real quick, so you can use this to load all stories matching a glob. -> ->
-> details -> -> ```js -> import { configure } from '@storybook/vue'; -> -> function loadStories() { -> const req = require.context('../stories', true, /\.stories\.js$/); -> req.keys().forEach(filename => req(filename)); -> } -> -> configure(loadStories, module); -> ``` -> ->
-> -> -> You might be using global components or vue plugins such as vuex, in that case you'll need to register them in this `config.js` file. -> ->
-> details -> -> ```js -> import { configure } from '@storybook/vue'; -> -> import Vue from 'vue'; -> -> // Import Vue plugins -> import Vuex from 'vuex'; -> -> // Import your global components. -> import Mybutton from '../src/stories/Button.vue'; -> -> // Install Vue plugins. -> Vue.use(Vuex); -> -> // Register global components. -> Vue.component('my-button', Mybutton); -> -> function loadStories() { -> // You can require as many stories as you need. -> require('../src/stories'); -> } -> -> configure(loadStories, module); -> ``` -> -> This example registered your custom `Button.vue` component, installed the Vuex plugin, and loaded your Storybook stories defined in `../stories/index.js`. -> -> All custom components and Vue plugins should be registered before calling `configure()`. -> ->
- - -## Step 4: Write your stories - -Now create a `../stories/index.js` file, and write your first story like this: - -```js -import Vue from 'vue'; -import { storiesOf } from '@storybook/vue'; -import MyButton from './Button.vue'; - -storiesOf('Button', module) - .add('with text', () => 'with text') - .add('with emoji', () => 'πŸ˜€ 😎 πŸ‘ πŸ’―') - .add('as a component', () => ({ - components: { MyButton }, - template: 'rounded' - })); -``` - -Each story is a single state of your component. In the above case, there are two stories for the demo button component: - -```plaintext -Button - β”œβ”€β”€ with text - β”œβ”€β”€ with emoji - └── as a component -``` - -## Finally: Run your Storybook - -Now everything is ready. Run your storybook with: - -```sh -npm run storybook -``` - -Storybook should start, on a random open port in dev-mode. - -Now you can develop your components and write stories and see the changes in Storybook immediately since it uses Webpack's hot module reloading. diff --git a/docs/src/pages/guides/guide-riot/index.md b/docs/src/pages/guides/guide-riot/index.md index 9b220c7dcc5..ba250af2720 100644 --- a/docs/src/pages/guides/guide-riot/index.md +++ b/docs/src/pages/guides/guide-riot/index.md @@ -55,55 +55,10 @@ To do that, create a file at `.storybook/config.js` with the following content: ```ts import { configure } from '@storybook/riot'; -function loadStories() { - require('../stories/index.js'); - // You can require as many stories as you need. -} - -configure(loadStories, module); +configure(require.context('../src', true, /\.stories\.js$/), module); ``` -That'll load stories in `../stories/index.js`. You can choose where to place stories, you can co-locate them with source files, or place them in an other directory. - -> Requiring all your stories becomes bothersome real quick, so you can use this to load all stories matching a glob. -> ->
-> details -> -> ```ts -> import { configure } from '@storybook/riot'; -> -> function loadStories() { -> const req = require.context('../stories', true, /\.stories\.ts$/); -> req.keys().forEach(filename => req(filename)); -> } -> -> configure(loadStories, module); -> ``` -> ->
-> -> -> Additionally this is the place where you can register global component. -> ->
-> details -> -> ```ts -> import { configure } from '@storybook/riot'; -> -> // Import your globally available components. -> import '../src/stories/Button.tag'; -> -> function loadStories() { -> require('../stories/index.js'); -> // You can require as many stories as you need. -> } -> -> configure(loadStories, module); -> ``` -> ->
+That will load all the stories underneath your `../src` directory that match the pattern `*.stories.js`. We recommend co-locating your stories with your source files, but you can place them wherever you choose. ## Step 4: Storybook TypeScript configuration @@ -127,63 +82,58 @@ This makes it necessary to create a `tsconfig.json` file at `.storybook/tsconfig ## Step 5: Write your stories -Now create a `../stories/index.js` file, and write your first story like this: +Now create a `../src/index.stories.js` file, and write your first story like this: ```js -import { tag, mount, storiesOf } from '@storybook/riot'; +import { tag, mount } from '@storybook/riot'; import SimpleTestRaw from './SimpleTest.txt'; //can be loaded as string if you prefer import './AnotherTest.tag'; //if you need to import .tag files as text, just use the raw-loader instead of the riot-tag-loader -storiesOf('My Component', module) - .add( - 'built with tag', // the template is compiled below - () => - tag('test', '
simple test ({ opts.value })
', '', '', () => {}) && - mount('test', { value: 'with a parameter' })) +export default { title: 'My Component' }; + +// the template is compiled below +export const builtWithTag = () => ( + tag('test', '
simple test ({ opts.value })
', '', '', () => {}) && + mount('test', { value: 'with a parameter' }) +); - // tags[0] will be the parent tag, always - // you can leave out the root tag, if we find out that the new root tag - // is a built-in html tag, it will be wrapped - .add('built as string', () => ({ tags: ['
simple test
'] }) +// tags[0] will be the parent tag, always +// you can leave out the root tag, if we find out that the new root tag +// is a built-in html tag, it will be wrapped +export const builtAsString = () => ({ + tags: ['
simple test
'] +}); - // the component is a string, it will be instantiated without params - // e.g. - .add('built from raw import', () => SimpleTestRaw) +// the component is a string, it will be instantiated without params +// e.g. +export const builtFromRawImport = () => SimpleTestRaw; - // the comprehensive form is this one - // list all the possible tags (the root element is in the content) - // then scenario is compiled and executed - .add( - 'built from tags and scenario', - () => ({ - tags: [{ content: SimpleTestRaw, boundAs: 'mustBeUniquePlease' }], - scenario: - '', - }), - { - notes: - 'WARN : the tag file root element must have exactly the same name (or else you will see nothing)', - } - ) +// the comprehensive form is this one +// list all the possible tags (the root element is in the content) +// then scenario is compiled and executed +// WARN : the tag file root element must have exactly the same name (or else you will see nothing) +export const builtFromTagsAndScenario = () => ({ + tags: [{ content: SimpleTestRaw, boundAs: 'mustBeUniquePlease' }], + scenario: + '', +}); - // the tag is already compiled before running the js - // the tag name 'anothertest' must match exactly the root tag inside the tag file - // mind the lower case - .add('built from the precompilation', () => mount('anothertest', {}), { - notes: 'WARN, only works in lower case, never upper case with precompiled templates', - }); +// the tag is already compiled before running the js +// the tag name 'anothertest' must match exactly the root tag inside the tag file +// must be lower case +export const builtFromThePrecompilation = () => mount('anothertest', {}); ``` Each story is a single state of your component. In the above case, there are two stories for the demo button component: ```plaintext My Component - β”œβ”€β”€ built with tag - β”œβ”€β”€ built as string - β”œβ”€β”€ bubuilt from raw import - β”œβ”€β”€ built from tags and scenario - └── built from the precompilation + β”œβ”€β”€ Built With Tag + β”œβ”€β”€ Built As String + β”œβ”€β”€ Built From Raw Import + β”œβ”€β”€ Built From Tags And Scenario + └── Built From The Precompilation ``` ## Finally: Run your Storybook diff --git a/docs/src/pages/guides/guide-svelte/index.md b/docs/src/pages/guides/guide-svelte/index.md index 3b38e81699b..c208554dd00 100644 --- a/docs/src/pages/guides/guide-svelte/index.md +++ b/docs/src/pages/guides/guide-svelte/index.md @@ -57,56 +57,33 @@ To do that, create a file at `.storybook/config.js` with the following content: ```js import { configure } from '@storybook/svelte'; -function loadStories() { - require('../stories/index.js'); - // You can require as many stories as you need. -} - -configure(loadStories, module); +configure(require.context('../src', true, /\.stories\.js$/), module); ``` -That'll load stories in `../stories/index.js`. You can choose where to place stories, you can co-locate them with source files, or place them in an other directory. - -> Requiring all your stories becomes bothersome real quick, so you can use this to load all stories matching a glob. -> ->
-> details -> -> ```js -> import { configure } from '@storybook/svelte'; -> -> function loadStories() { -> const req = require.context('../stories', true, /\.stories\.js$/); -> req.keys().forEach(filename => req(filename)); -> } -> -> configure(loadStories, module); -> ``` -> ->
+That will load all the stories underneath your `../src` directory that match the pattern `*.stories.js`. We recommend co-locating your stories with your source files, but you can place them wherever you choose. ## Step 4: Write your stories -Now create a `../stories/index.js` file, and write your first story like this: +Now create a `../src/index.stories.js` file, and write your first story like this: ```js -import { storiesOf } from '@storybook/svelte'; import MyButton from '../components/MyButton.svelte'; -storiesOf('MyButton', module) - .add('with text', () => ({ - Component: MyButton, - props: { - buttonText: 'some text', - }, - })) - .add('with some emojies', () => ({ - Component: MyButton, +export default { title: 'MyButton' } - props: { - buttonText: 'πŸ˜€ 😎 πŸ‘ πŸ’―', - }, - })); +export const withText = () => ({ + Component: MyButton, + props: { + buttonText: 'some text', + }, +}); + +export const withEmoji = () => ({ + Component: MyButton, + props: { + buttonText: 'πŸ˜€ 😎 πŸ‘ πŸ’―', + }, +}); ``` Svelte storybooks don't support using templates in a story yet. @@ -129,33 +106,31 @@ It's the equivalent to `on:click="fire('click', event)"`, but it's worth knowing You would then write a story for this "view" the exact same way you did with a component. ```js -import { storiesOf } from '@storybook/svelte'; import MyButtonView from '../views/MyButtonView.svelte'; -storiesOf('Button', module) - .add('wrapped component(s) example', () => ({ - Components: MyButtonView, +export default { title 'Button' } - props: { - buttonText: 'some text', - rounded: true, +export const wrappedComponentExample = () => ({ + Components: MyButtonView, + props: { + buttonText: 'some text', + rounded: true, + }, + on: { + click: (event) => { + console.log('clicked', event); }, - - on: { - click: (event) => { - console.log('clicked', event); - }, - }, - })); + }, +}); ``` Each story is a single state of your component. In the above case, there are two stories for the demo button component: ```plaintext Button - β”œβ”€β”€ with text - β”œβ”€β”€ with emoji - └── wrapped component(s) example + β”œβ”€β”€ With Text + β”œβ”€β”€ With Emoji + └── Wrapped Component Example ``` ## Finally: Run your Storybook diff --git a/docs/src/pages/guides/guide-vue/index.md b/docs/src/pages/guides/guide-vue/index.md index 6b25110309f..28631e33dbd 100644 --- a/docs/src/pages/guides/guide-vue/index.md +++ b/docs/src/pages/guides/guide-vue/index.md @@ -56,35 +56,11 @@ To do that, create a file at `.storybook/config.js` with the following content: ```js import { configure } from '@storybook/vue'; -function loadStories() { - require('../stories/index.js'); - // You can require as many stories as you need. -} - -configure(loadStories, module); +configure(require.context('../src', true, /\.stories\.js$/), module); ``` -That'll load stories in `../stories/index.js`. You can choose where to place stories, you can co-locate them with source files, or place them in an other directory. +That will load all the stories underneath your `../src` directory that match the pattern `*.stories.js`. We recommend co-locating your stories with your source files, but you can place them wherever you choose. -> Requiring all your stories becomes bothersome real quick, so you can use this to load all stories matching a glob. -> ->
-> details -> -> ```js -> import { configure } from '@storybook/vue'; -> -> function loadStories() { -> const req = require.context('../stories', true, /\.stories\.js$/); -> req.keys().forEach(filename => req(filename)); -> } -> -> configure(loadStories, module); -> ``` -> ->
-> -> > You might be using global components or vue plugins such as vuex, in that case you'll need to register them in this `config.js` file. > >
@@ -107,15 +83,10 @@ That'll load stories in `../stories/index.js`. You can choose where to place sto > // Register global components. > Vue.component('my-button', Mybutton); > -> function loadStories() { -> // You can require as many stories as you need. -> require('../src/stories'); -> } -> -> configure(loadStories, module); +> configure(require.context('../src', true, /\.stories\.js$/), module); > ``` > -> This example registered your custom `Button.vue` component, installed the Vuex plugin, and loaded your Storybook stories defined in `../stories/index.js`. +> This example registered your custom `Button.vue` component, installed the Vuex plugin, and loaded your Storybook stories defined in `../src/index.stories.js`. > > All custom components and Vue plugins should be registered before calling `configure()`. > @@ -128,25 +99,27 @@ Now create a `../stories/index.js` file, and write your first story like this: ```js import Vue from 'vue'; -import { storiesOf } from '@storybook/vue'; import MyButton from './Button.vue'; -storiesOf('Button', module) - .add('with text', () => 'with text') - .add('with emoji', () => 'πŸ˜€ 😎 πŸ‘ πŸ’―') - .add('as a component', () => ({ - components: { MyButton }, - template: 'rounded' - })); +export default { title: 'Button' }; + +export const withText = () => 'with text'; + +export const withEmoji = () => 'πŸ˜€ 😎 πŸ‘ πŸ’―'; + +export const asAComponent = () => ({ + components: { MyButton }, + template: 'rounded' +}); ``` Each story is a single state of your component. In the above case, there are three stories for the demo button component: ```plaintext Button - β”œβ”€β”€ with text - β”œβ”€β”€ with emoji - └── as a component + β”œβ”€β”€ With Text + β”œβ”€β”€ With Emoji + └── As A Component ``` > If your story is returning a plain template you can only use globally registered components. @@ -159,7 +132,7 @@ Button > If your story returns a plain string like below, you will need to register globally each VueJs component that it uses. > > ```js -> .add('with text', () => 'with text') +> export const withText = () => 'with text'; > ``` > > In big solutions, globally registered components can conflict with each other. @@ -170,9 +143,9 @@ Button > - use a JSX render function like below. No need to register anything. > > ```jsx -> .add('with text', () => ({ -> render: h => with text -> })) +> export const withText = () => ({ +> render: h => with text +> }); > ``` > >
diff --git a/docs/src/versions/next.json b/docs/src/versions/next.json index ffe1f9faf1e..aa78c5c8c6e 100644 --- a/docs/src/versions/next.json +++ b/docs/src/versions/next.json @@ -1 +1 @@ -{"version":"5.2.0-beta.47","info":{"plain":"### Bug Fixes\n\n* UI: Optimize treeview render/filter performance ([#7910](https://github.com/storybookjs/storybook/pull/7910))\n* Addon-docs: Fix DocsPage to respect displayName ([#7915](https://github.com/storybookjs/storybook/pull/7915))"}} \ No newline at end of file +{"version":"5.3.0-alpha.4","info":{"plain":"### Bug Fixes\n\n* UI: Move addon dependencies to devDependencies ([#8206](https://github.com/storybookjs/storybook/pull/8206))\n* Addon-knobs: Handle undefined array value ([#8006](https://github.com/storybookjs/storybook/pull/8006))\n\n### Maintenance\n\n* Build: Upgrade from node8 to node10 ([#8207](https://github.com/storybookjs/storybook/pull/8207))"}} \ No newline at end of file diff --git a/docs/yarn.lock b/docs/yarn.lock index c73d74efff9..3c1288dcb40 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -279,6 +279,13 @@ dependencies: "@ndhoule/map" "^2.0.1" +"@storybook/client-logger@5.2.0-beta.48": + version "5.2.0-beta.48" + resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.2.0-beta.48.tgz#6a1d3b16accce30476730d4c45833722b136dacc" + integrity sha512-dHodCe9gzLZynGhu9mRgWpZSSJkyneuVOGfVvrQWD/uwFNxpxuAPcfVtlw7pYoEEdBiXrPa1rB1j127wDQllAw== + dependencies: + core-js "^3.0.1" + "@storybook/client-logger@5.2.0-beta.7": version "5.2.0-beta.7" resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.2.0-beta.7.tgz#6d503b9c01fd0b430b1d72ed67ee1eeb63115cac" @@ -286,13 +293,13 @@ dependencies: core-js "^3.0.1" -"@storybook/components@5.2.0-beta.7": - version "5.2.0-beta.7" - resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.2.0-beta.7.tgz#a61eba234c4556dff9fafe6b0c6211eb0da07b14" - integrity sha512-wo9RWkUFs3ExDfQIxS9koDxKnLHl4aKTWteC1UalFtvu6bKvN7IXhhE7FwaSLqQL6BL2koTcBN3vg28tRz1Y8Q== +"@storybook/components@5.2.0-beta.48": + version "5.2.0-beta.48" + resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.2.0-beta.48.tgz#ab353fb2e96bb48fe947a25bdeede027ddd8244a" + integrity sha512-LGMj7+8/lii79T+Jf9qXyF9n73hGqqPaSQnbzYs0uL+HHy7bqsxm4MD80YAKUfL0rgTb2ne6fw9mShFSCHmbkA== dependencies: - "@storybook/client-logger" "5.2.0-beta.7" - "@storybook/theming" "5.2.0-beta.7" + "@storybook/client-logger" "5.2.0-beta.48" + "@storybook/theming" "5.2.0-beta.48" "@types/react-syntax-highlighter" "10.1.0" core-js "^3.0.1" global "^4.3.2" @@ -310,6 +317,24 @@ react-textarea-autosize "^7.1.0" simplebar-react "^1.0.0-alpha.6" +"@storybook/theming@5.2.0-beta.48": + version "5.2.0-beta.48" + resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.2.0-beta.48.tgz#8a2664781a2868d1ae2c427e5aa14ded94724dc7" + integrity sha512-unsVWu9RIiTanmA0ET/U46SmGLs8FndBejtdNZkfGtLX+ZKEkLGwgUr+1hPlHGwe60byMxwlVMoy5qZLajT6fA== + dependencies: + "@emotion/core" "^10.0.14" + "@emotion/styled" "^10.0.14" + "@storybook/client-logger" "5.2.0-beta.48" + common-tags "^1.8.0" + core-js "^3.0.1" + deep-object-diff "^1.1.0" + emotion-theming "^10.0.14" + global "^4.3.2" + memoizerific "^1.11.3" + polished "^3.3.1" + prop-types "^15.7.2" + resolve-from "^5.0.0" + "@storybook/theming@5.2.0-beta.7": version "5.2.0-beta.7" resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.2.0-beta.7.tgz#7b76d0cee992235a0fb09583a5953ce101ceb47f" @@ -429,6 +454,13 @@ "@types/prop-types" "*" csstype "^2.2.0" +"@types/sax@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@types/sax/-/sax-1.2.0.tgz#6025e0b7fc7cd5f3d83808a6809730bac798565d" + integrity sha512-D8ef/GGUjiHuUOiXV6tkJw6Zq2Sm8vcBScJSvj+monDI5YncJ6M3oNIXR7EtmWPVqJw0jsZF2ARN/X5gvGmQSA== + dependencies: + "@types/node" "*" + "@types/tmp@^0.0.32": version "0.0.32" resolved "https://registry.yarnpkg.com/@types/tmp/-/tmp-0.0.32.tgz#0d3cb31022f8427ea58c008af32b80da126ca4e3" @@ -7886,9 +7918,9 @@ mitt@^1.1.2: integrity sha512-mUDCnVNsAi+eD6qA0HkRkwYczbLHJ49z17BGe2PYRhZL4wpZUFZGJHU7/5tmvohoma+Hdn0Vh/oJTiPEmgSruA== mixin-deep@^1.2.0: - version "1.3.1" - resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.1.tgz#a49e7268dce1a0d9698e45326c5626df3543d0fe" - integrity sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ== + version "1.3.2" + resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566" + integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA== dependencies: for-in "^1.0.2" is-extendable "^1.0.1" @@ -10858,14 +10890,6 @@ sc-formatter@^3.0.1: resolved "https://registry.yarnpkg.com/sc-formatter/-/sc-formatter-3.0.2.tgz#9abdb14e71873ce7157714d3002477bbdb33c4e6" integrity sha512-9PbqYBpCq+OoEeRQ3QfFIGE6qwjjBcd2j7UjgDlhnZbtSnuGgHdcRklPKYGuYFH82V/dwd+AIpu8XvA1zqTd+A== -scheduler@^0.13.6: - version "0.13.6" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889" - integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ== - dependencies: - loose-envify "^1.1.0" - object-assign "^4.1.1" - scheduler@^0.15.0: version "0.15.0" resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.15.0.tgz#6bfcf80ff850b280fed4aeecc6513bc0b4f17f8e" @@ -11183,13 +11207,15 @@ simplebar@^4.0.0-alpha.9: resize-observer-polyfill "^1.5.1" scrollbarwidth "^0.1.3" -sitemap@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/sitemap/-/sitemap-4.0.1.tgz#12789791b30911b8530db0cd2513252ada967273" - integrity sha512-LaOxQmvczMcI5OZojwm/IEynht2aJ3J3jfvH05Z2svx4/j+CK8Vvi3KhNmZYFwc3RcdW4Nuj+qMY2QmyqV5+1Q== +sitemap@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/sitemap/-/sitemap-4.1.1.tgz#c9b459c7d797e629c61f56b86586d4f67dbf250b" + integrity sha512-+8yd66IxyIFEMFkFpVoPuoPwBvdiL7Ap/HS5YD7igqO4phkyTPFIprCAE9NMHehAY5ZGN3MkAze4lDrOAX3sVQ== dependencies: "@types/node" "^12.0.2" + "@types/sax" "^1.2.0" arg "^4.1.1" + sax "^1.2.4" xmlbuilder "^13.0.0" slash@^1.0.0: diff --git a/examples-native/crna-kitchen-sink/package.json b/examples-native/crna-kitchen-sink/package.json index e313cdb1e8e..73d3dcfc9a1 100644 --- a/examples-native/crna-kitchen-sink/package.json +++ b/examples-native/crna-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "crna-kitchen-sink", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "private": true, "main": "node_modules/expo/AppEntry.js", "scripts": { @@ -24,14 +24,14 @@ "devDependencies": { "@babel/core": "^7.2.2", "@babel/plugin-transform-react-jsx-source": "^7.2.0", - "@storybook/addon-actions": "5.2.0-beta.47", - "@storybook/addon-knobs": "5.2.0-beta.47", - "@storybook/addon-ondevice-actions": "5.2.0-beta.47", - "@storybook/addon-ondevice-backgrounds": "5.2.0-beta.47", - "@storybook/addon-ondevice-knobs": "5.2.0-beta.47", - "@storybook/addon-ondevice-notes": "5.2.0-beta.47", - "@storybook/addons": "5.2.0-beta.47", - "@storybook/react-native": "5.2.0-beta.47", + "@storybook/addon-actions": "5.3.0-alpha.4", + "@storybook/addon-knobs": "5.3.0-alpha.4", + "@storybook/addon-ondevice-actions": "5.3.0-alpha.4", + "@storybook/addon-ondevice-backgrounds": "5.3.0-alpha.4", + "@storybook/addon-ondevice-knobs": "5.3.0-alpha.4", + "@storybook/addon-ondevice-notes": "5.3.0-alpha.4", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/react-native": "5.3.0-alpha.4", "babel-loader": "^8.0.4", "babel-plugin-module-resolver": "^3.2.0", "babel-preset-expo": "^5.1.1", diff --git a/examples/angular-cli/angular.json b/examples/angular-cli/angular.json index ee854886930..3c6ce6acb38 100644 --- a/examples/angular-cli/angular.json +++ b/examples/angular-cli/angular.json @@ -1,4 +1,6 @@ { + /* angular.json can have comments */ + // angular.json can have comments "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json index 54fa05125c0..2af220f5046 100644 --- a/examples/angular-cli/package.json +++ b/examples/angular-cli/package.json @@ -1,14 +1,14 @@ { "name": "angular-cli", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "private": true, "license": "MIT", "scripts": { "build": "ng build", - "build-storybook": "npm run storybook:prebuild && build-storybook -s src/assets", + "prebuild-storybook": "npm run storybook:prebuild && cd ../.. && yarn add node-sass -W -s && cd examples/angular-cli", + "build-storybook": "build-storybook -s src/assets", "e2e": "ng e2e", "ng": "ng", - "now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet", "start": "ng serve", "storybook": "npm run storybook:prebuild && start-storybook -p 9008 -s src/assets", "storybook:prebuild": "npm run test:generate-output", @@ -26,6 +26,7 @@ "@angular/platform-browser-dynamic": "^7.2.6", "@ngrx/store": "^7.2.0", "core-js": "^3.0.1", + "node-sass": "^4.12.0", "rxjs": "^6.3.3", "rxjs-compat": "^6.4.0", "zone.js": "^0.8.29" @@ -34,25 +35,25 @@ "@angular-devkit/build-angular": "^0.13.4", "@angular/cli": "^7.3.6", "@angular/compiler-cli": "^7.2.6", - "@storybook/addon-a11y": "5.2.0-beta.47", - "@storybook/addon-actions": "5.2.0-beta.47", - "@storybook/addon-backgrounds": "5.2.0-beta.47", - "@storybook/addon-centered": "5.2.0-beta.47", - "@storybook/addon-docs": "5.2.0-beta.47", - "@storybook/addon-jest": "5.2.0-beta.47", - "@storybook/addon-knobs": "5.2.0-beta.47", - "@storybook/addon-links": "5.2.0-beta.47", - "@storybook/addon-notes": "5.2.0-beta.47", - "@storybook/addon-options": "5.2.0-beta.47", - "@storybook/addon-storyshots": "5.2.0-beta.47", - "@storybook/addon-storysource": "5.2.0-beta.47", - "@storybook/addons": "5.2.0-beta.47", - "@storybook/angular": "5.2.0-beta.47", - "@storybook/source-loader": "5.2.0-beta.47", + "@storybook/addon-a11y": "5.3.0-alpha.4", + "@storybook/addon-actions": "5.3.0-alpha.4", + "@storybook/addon-backgrounds": "5.3.0-alpha.4", + "@storybook/addon-centered": "5.3.0-alpha.4", + "@storybook/addon-docs": "5.3.0-alpha.4", + "@storybook/addon-jest": "5.3.0-alpha.4", + "@storybook/addon-knobs": "5.3.0-alpha.4", + "@storybook/addon-links": "5.3.0-alpha.4", + "@storybook/addon-notes": "5.3.0-alpha.4", + "@storybook/addon-options": "5.3.0-alpha.4", + "@storybook/addon-storyshots": "5.3.0-alpha.4", + "@storybook/addon-storysource": "5.3.0-alpha.4", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/angular": "5.3.0-alpha.4", + "@storybook/source-loader": "5.3.0-alpha.4", "@types/core-js": "^2.5.0", "@types/jest": "^24.0.11", - "@types/node": "~12.0.2", - "@types/webpack-env": "^1.13.7", + "@types/node": "^12.0.8", + "@types/webpack-env": "^1.14.0", "babel-plugin-require-context-hook": "^1.0.0", "global": "^4.3.2", "jasmine-core": "~3.4.0", @@ -61,6 +62,6 @@ "jest-preset-angular": "^7.1.0", "protractor": "~5.4.2", "ts-node": "~8.3.0", - "typescript": "^3.4.1" + "typescript": "^3.4.0" } } diff --git a/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva.component.ts b/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva.component.ts index 3806d30ac5e..6f554b896ba 100644 --- a/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva.component.ts +++ b/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva.component.ts @@ -12,6 +12,7 @@ const NOOP = () => {}; providers: [ { provide: NG_VALUE_ACCESSOR, + // eslint-disable-next-line no-use-before-define useExisting: forwardRef(() => CustomCvaComponent), multi: true, }, diff --git a/examples/angular-cli/tsconfig.json b/examples/angular-cli/tsconfig.json index 873ddb613f1..b5517cfd5fd 100644 --- a/examples/angular-cli/tsconfig.json +++ b/examples/angular-cli/tsconfig.json @@ -1,4 +1,6 @@ { + /* tsconfig.json can have comments */ + // tsconfig.json can have comments "lerna": { "disabled": true }, diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json index 8e2c3ee1992..6deb126142c 100644 --- a/examples/cra-kitchen-sink/package.json +++ b/examples/cra-kitchen-sink/package.json @@ -1,12 +1,11 @@ { "name": "cra-kitchen-sink", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "private": true, "scripts": { "build": "react-scripts build", "build-storybook": "build-storybook -s public", "eject": "react-scripts eject", - "now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet", "start": "react-scripts start", "storybook": "start-storybook -p 9010 -s public", "test": "react-scripts test --env=jsdom" @@ -19,23 +18,23 @@ "react-lifecycles-compat": "^3.0.4" }, "devDependencies": { - "@storybook/addon-a11y": "5.2.0-beta.47", - "@storybook/addon-actions": "5.2.0-beta.47", - "@storybook/addon-backgrounds": "5.2.0-beta.47", - "@storybook/addon-centered": "5.2.0-beta.47", - "@storybook/addon-docs": "5.2.0-beta.47", - "@storybook/addon-events": "5.2.0-beta.47", - "@storybook/addon-info": "5.2.0-beta.47", - "@storybook/addon-jest": "5.2.0-beta.47", - "@storybook/addon-knobs": "5.2.0-beta.47", - "@storybook/addon-links": "5.2.0-beta.47", - "@storybook/addon-notes": "5.2.0-beta.47", - "@storybook/addon-options": "5.2.0-beta.47", - "@storybook/addon-storyshots": "5.2.0-beta.47", - "@storybook/addons": "5.2.0-beta.47", - "@storybook/client-logger": "5.2.0-beta.47", - "@storybook/react": "5.2.0-beta.47", - "@storybook/theming": "5.2.0-beta.47", + "@storybook/addon-a11y": "5.3.0-alpha.4", + "@storybook/addon-actions": "5.3.0-alpha.4", + "@storybook/addon-backgrounds": "5.3.0-alpha.4", + "@storybook/addon-centered": "5.3.0-alpha.4", + "@storybook/addon-docs": "5.3.0-alpha.4", + "@storybook/addon-events": "5.3.0-alpha.4", + "@storybook/addon-info": "5.3.0-alpha.4", + "@storybook/addon-jest": "5.3.0-alpha.4", + "@storybook/addon-knobs": "5.3.0-alpha.4", + "@storybook/addon-links": "5.3.0-alpha.4", + "@storybook/addon-notes": "5.3.0-alpha.4", + "@storybook/addon-options": "5.3.0-alpha.4", + "@storybook/addon-storyshots": "5.3.0-alpha.4", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/client-logger": "5.3.0-alpha.4", + "@storybook/react": "5.3.0-alpha.4", + "@storybook/theming": "5.3.0-alpha.4", "react-scripts": "^3.0.1" } } diff --git a/examples/cra-react15/package.json b/examples/cra-react15/package.json index b933e8f0c0c..7ad9486c108 100644 --- a/examples/cra-react15/package.json +++ b/examples/cra-react15/package.json @@ -1,6 +1,6 @@ { "name": "cra-react15", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "private": true, "dependencies": { "babel-loader": "8.0.6", @@ -14,15 +14,14 @@ "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject", - "now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet", "storybook": "start-storybook -p 9009 -s public", "build-storybook": "build-storybook -s public" }, "devDependencies": { - "@storybook/addon-actions": "5.2.0-beta.47", - "@storybook/addon-links": "5.2.0-beta.47", - "@storybook/react": "5.2.0-beta.47", - "@storybook/theming": "5.2.0-beta.47", + "@storybook/addon-actions": "5.3.0-alpha.4", + "@storybook/addon-links": "5.3.0-alpha.4", + "@storybook/react": "5.3.0-alpha.4", + "@storybook/theming": "5.3.0-alpha.4", "babel-core": "6", "babel-runtime": "6" } diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json index e2d644f08eb..d353cb35c81 100644 --- a/examples/cra-ts-kitchen-sink/package.json +++ b/examples/cra-ts-kitchen-sink/package.json @@ -1,11 +1,10 @@ { "name": "cra-ts-kitchen-sink", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "private": true, "scripts": { "build-storybook": "build-storybook -s public", "lint": "tslint src/**/*.ts{,x}", - "now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet", "storybook": "start-storybook -p 9010 -s public", "test": "react-scripts test --env=jsdom" }, @@ -14,14 +13,14 @@ "react-dom": "^16.8.3" }, "devDependencies": { - "@storybook/addon-a11y": "5.2.0-beta.47", - "@storybook/addon-actions": "5.2.0-beta.47", - "@storybook/addon-info": "5.2.0-beta.47", - "@storybook/addon-options": "5.2.0-beta.47", - "@storybook/addons": "5.2.0-beta.47", - "@storybook/react": "5.2.0-beta.47", + "@storybook/addon-a11y": "5.3.0-alpha.4", + "@storybook/addon-actions": "5.3.0-alpha.4", + "@storybook/addon-info": "5.3.0-alpha.4", + "@storybook/addon-options": "5.3.0-alpha.4", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/react": "5.3.0-alpha.4", "@types/enzyme": "^3.9.0", - "@types/react": "^16.8.3", + "@types/react": "^16.8.14", "@types/react-dom": "^16.8.2", "enzyme": "^3.9.0", "enzyme-adapter-react-16": "^1.9.1", @@ -31,6 +30,6 @@ "react-scripts": "^3.0.1", "tslint": "^5.14.0", "tslint-config-airbnb": "^5.11.1", - "typescript": "^3.4.1" + "typescript": "^3.4.0" } } diff --git a/examples/dev-kits/package.json b/examples/dev-kits/package.json index 9d6b56c788a..53ec0188379 100644 --- a/examples/dev-kits/package.json +++ b/examples/dev-kits/package.json @@ -1,22 +1,21 @@ { "name": "@storybook/example-devkits", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "private": true, "scripts": { - "build-storybook": "build-storybook -c ./ -s built-storybooks", - "now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet", + "build-storybook": "build-storybook -c ./", "storybook": "start-storybook -p 9011 -c ./" }, "devDependencies": { - "@storybook/addon-decorator": "5.2.0-beta.47", - "@storybook/addon-parameter": "5.2.0-beta.47", - "@storybook/addon-roundtrip": "5.2.0-beta.47", - "@storybook/addons": "5.2.0-beta.47", - "@storybook/components": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", - "@storybook/node-logger": "5.2.0-beta.47", - "@storybook/react": "5.2.0-beta.47", - "@storybook/theming": "5.2.0-beta.47", + "@storybook/addon-decorator": "5.3.0-alpha.4", + "@storybook/addon-parameter": "5.3.0-alpha.4", + "@storybook/addon-roundtrip": "5.3.0-alpha.4", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/components": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", + "@storybook/node-logger": "5.3.0-alpha.4", + "@storybook/react": "5.3.0-alpha.4", + "@storybook/theming": "5.3.0-alpha.4", "cors": "^2.8.5", "cross-env": "^5.2.0", "enzyme-to-json": "^3.3.5", @@ -26,7 +25,7 @@ "format-json": "^1.0.3", "global": "^4.3.2", "graphql": "^14.1.1", - "jest-emotion": "^10.0.10", + "jest-emotion": "^10.0.17", "paths.macro": "^2.0.2", "prop-types": "^15.7.2", "react": "^16.8.3", diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json index b6f48712383..dab1739a127 100644 --- a/examples/ember-cli/package.json +++ b/examples/ember-cli/package.json @@ -1,12 +1,12 @@ { "name": "ember-example", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "private": true, "scripts": { "build": "ember build", - "build-storybook": "yarn build && cp -r public/* dist && build-storybook -s dist", + "prebuild-storybook": "yarn build && cp -r public/* dist", + "build-storybook": "build-storybook -s dist", "dev": "ember serve", - "now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet", "storybook": "yarn build && start-storybook -p 9009 -s dist", "storybook:dev": "yarn dev & start-storybook -p 9009 -s dist" }, @@ -15,19 +15,19 @@ }, "devDependencies": { "@babel/core": "^7.3.4", - "@storybook/addon-a11y": "5.2.0-beta.47", - "@storybook/addon-actions": "5.2.0-beta.47", - "@storybook/addon-backgrounds": "5.2.0-beta.47", - "@storybook/addon-centered": "5.2.0-beta.47", - "@storybook/addon-knobs": "5.2.0-beta.47", - "@storybook/addon-links": "5.2.0-beta.47", - "@storybook/addon-notes": "5.2.0-beta.47", - "@storybook/addon-options": "5.2.0-beta.47", - "@storybook/addon-storysource": "5.2.0-beta.47", - "@storybook/addon-viewport": "5.2.0-beta.47", - "@storybook/addons": "5.2.0-beta.47", - "@storybook/ember": "5.2.0-beta.47", - "@storybook/source-loader": "5.2.0-beta.47", + "@storybook/addon-a11y": "5.3.0-alpha.4", + "@storybook/addon-actions": "5.3.0-alpha.4", + "@storybook/addon-backgrounds": "5.3.0-alpha.4", + "@storybook/addon-centered": "5.3.0-alpha.4", + "@storybook/addon-knobs": "5.3.0-alpha.4", + "@storybook/addon-links": "5.3.0-alpha.4", + "@storybook/addon-notes": "5.3.0-alpha.4", + "@storybook/addon-options": "5.3.0-alpha.4", + "@storybook/addon-storysource": "5.3.0-alpha.4", + "@storybook/addon-viewport": "5.3.0-alpha.4", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/ember": "5.3.0-alpha.4", + "@storybook/source-loader": "5.3.0-alpha.4", "babel-loader": "^8", "broccoli-asset-rev": "^3.0.0", "cross-env": "^5.2.0", diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json index 3af783de5c0..c5212028935 100644 --- a/examples/html-kitchen-sink/package.json +++ b/examples/html-kitchen-sink/package.json @@ -1,6 +1,6 @@ { "name": "html-kitchen-sink", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "private": true, "description": "", "keywords": [], @@ -10,30 +10,29 @@ "scripts": { "build-storybook": "build-storybook", "generate-addon-jest-testresults": "jest --config=tests/addon-jest.config.json --json --outputFile=stories/addon-jest.testresults.json", - "now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet", "storybook": "start-storybook -p 9006" }, "devDependencies": { - "@storybook/addon-a11y": "5.2.0-beta.47", - "@storybook/addon-actions": "5.2.0-beta.47", - "@storybook/addon-backgrounds": "5.2.0-beta.47", - "@storybook/addon-centered": "5.2.0-beta.47", - "@storybook/addon-docs": "5.2.0-beta.47", - "@storybook/addon-events": "5.2.0-beta.47", - "@storybook/addon-jest": "5.2.0-beta.47", - "@storybook/addon-knobs": "5.2.0-beta.47", - "@storybook/addon-links": "5.2.0-beta.47", - "@storybook/addon-notes": "5.2.0-beta.47", - "@storybook/addon-options": "5.2.0-beta.47", - "@storybook/addon-storyshots": "5.2.0-beta.47", - "@storybook/addon-storysource": "5.2.0-beta.47", - "@storybook/addon-viewport": "5.2.0-beta.47", - "@storybook/addons": "5.2.0-beta.47", - "@storybook/client-api": "5.2.0-beta.47", - "@storybook/core": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", - "@storybook/html": "5.2.0-beta.47", - "@storybook/source-loader": "5.2.0-beta.47", + "@storybook/addon-a11y": "5.3.0-alpha.4", + "@storybook/addon-actions": "5.3.0-alpha.4", + "@storybook/addon-backgrounds": "5.3.0-alpha.4", + "@storybook/addon-centered": "5.3.0-alpha.4", + "@storybook/addon-docs": "5.3.0-alpha.4", + "@storybook/addon-events": "5.3.0-alpha.4", + "@storybook/addon-jest": "5.3.0-alpha.4", + "@storybook/addon-knobs": "5.3.0-alpha.4", + "@storybook/addon-links": "5.3.0-alpha.4", + "@storybook/addon-notes": "5.3.0-alpha.4", + "@storybook/addon-options": "5.3.0-alpha.4", + "@storybook/addon-storyshots": "5.3.0-alpha.4", + "@storybook/addon-storysource": "5.3.0-alpha.4", + "@storybook/addon-viewport": "5.3.0-alpha.4", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/client-api": "5.3.0-alpha.4", + "@storybook/core": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", + "@storybook/html": "5.3.0-alpha.4", + "@storybook/source-loader": "5.3.0-alpha.4", "eventemitter3": "^4.0.0", "format-json": "^1.0.3", "global": "^4.3.2" diff --git a/examples/marko-cli/package.json b/examples/marko-cli/package.json index 55540b66b05..145ff758a22 100644 --- a/examples/marko-cli/package.json +++ b/examples/marko-cli/package.json @@ -1,6 +1,6 @@ { "name": "marko-cli", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "private": true, "description": "Demo of how to build an app using marko-starter", "repository": { @@ -12,7 +12,6 @@ "scripts": { "build": "NODE_ENV=production marko-starter build", "build-storybook": "build-storybook", - "now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet", "prettier": "prettier src/**/*.{js,css,less} *.js --write", "serve-static": "NODE_ENV=production marko-starter serve-static", "start": "marko-starter server", @@ -24,14 +23,14 @@ "marko-starter": "^2.0.4" }, "devDependencies": { - "@storybook/addon-a11y": "5.2.0-beta.47", - "@storybook/addon-actions": "5.2.0-beta.47", - "@storybook/addon-knobs": "5.2.0-beta.47", - "@storybook/addon-options": "5.2.0-beta.47", - "@storybook/addon-storysource": "5.2.0-beta.47", - "@storybook/addons": "5.2.0-beta.47", - "@storybook/marko": "5.2.0-beta.47", - "@storybook/source-loader": "5.2.0-beta.47", + "@storybook/addon-a11y": "5.3.0-alpha.4", + "@storybook/addon-actions": "5.3.0-alpha.4", + "@storybook/addon-knobs": "5.3.0-alpha.4", + "@storybook/addon-options": "5.3.0-alpha.4", + "@storybook/addon-storysource": "5.3.0-alpha.4", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/marko": "5.3.0-alpha.4", + "@storybook/source-loader": "5.3.0-alpha.4", "prettier": "^1.16.4", "webpack": "^4.33.0" } diff --git a/examples/mithril-kitchen-sink/package.json b/examples/mithril-kitchen-sink/package.json index 41786e67e3a..0713938e309 100644 --- a/examples/mithril-kitchen-sink/package.json +++ b/examples/mithril-kitchen-sink/package.json @@ -1,30 +1,29 @@ { "name": "mithril-example", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "private": true, "scripts": { "build-storybook": "build-storybook", - "now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet", "storybook": "start-storybook -p 9007" }, "dependencies": { "mithril": "^1.1.6" }, "devDependencies": { - "@storybook/addon-a11y": "5.2.0-beta.47", - "@storybook/addon-actions": "5.2.0-beta.47", - "@storybook/addon-backgrounds": "5.2.0-beta.47", - "@storybook/addon-centered": "5.2.0-beta.47", - "@storybook/addon-knobs": "5.2.0-beta.47", - "@storybook/addon-links": "5.2.0-beta.47", - "@storybook/addon-notes": "5.2.0-beta.47", - "@storybook/addon-options": "5.2.0-beta.47", - "@storybook/addon-storyshots": "5.2.0-beta.47", - "@storybook/addon-storysource": "5.2.0-beta.47", - "@storybook/addon-viewport": "5.2.0-beta.47", - "@storybook/addons": "5.2.0-beta.47", - "@storybook/mithril": "5.2.0-beta.47", - "@storybook/source-loader": "5.2.0-beta.47", + "@storybook/addon-a11y": "5.3.0-alpha.4", + "@storybook/addon-actions": "5.3.0-alpha.4", + "@storybook/addon-backgrounds": "5.3.0-alpha.4", + "@storybook/addon-centered": "5.3.0-alpha.4", + "@storybook/addon-knobs": "5.3.0-alpha.4", + "@storybook/addon-links": "5.3.0-alpha.4", + "@storybook/addon-notes": "5.3.0-alpha.4", + "@storybook/addon-options": "5.3.0-alpha.4", + "@storybook/addon-storyshots": "5.3.0-alpha.4", + "@storybook/addon-storysource": "5.3.0-alpha.4", + "@storybook/addon-viewport": "5.3.0-alpha.4", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/mithril": "5.3.0-alpha.4", + "@storybook/source-loader": "5.3.0-alpha.4", "webpack": "^4.33.0" } } diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json index 1e5a32e86df..1eb4a76b60b 100644 --- a/examples/official-storybook/package.json +++ b/examples/official-storybook/package.json @@ -1,48 +1,47 @@ { "name": "official-storybook", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "private": true, "scripts": { - "build-storybook": "build-storybook -c ./ -s built-storybooks", + "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./", "chromatic": "chromatic test --storybook-addon --exit-zero-on-changes --app-code ab7m45tp9p", "do-image-snapshots": "../../node_modules/.bin/jest --projects=./image-snapshots", "generate-addon-jest-testresults": "jest --config=tests/addon-jest.config.json --json --outputFile=stories/addon-jest.testresults.json", "graphql": "node ./graphql-server/index.js", "image-snapshots": "yarn run build-storybook && yarn run do-image-snapshots", - "now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet", "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ -s built-storybooks --no-dll", "packtracker": "yarn storybook --smoke-test --quiet && cross-env PT_PROJECT_TOKEN=1af1d41b-d737-41d4-ac00-53c8f3913b53 packtracker-upload --stats=./node_modules/.cache/storybook/manager-stats.json" }, "devDependencies": { "@packtracker/webpack-plugin": "^2.0.1", - "@storybook/addon-a11y": "5.2.0-beta.47", - "@storybook/addon-actions": "5.2.0-beta.47", - "@storybook/addon-backgrounds": "5.2.0-beta.47", - "@storybook/addon-centered": "5.2.0-beta.47", - "@storybook/addon-contexts": "5.2.0-beta.47", - "@storybook/addon-cssresources": "5.2.0-beta.47", - "@storybook/addon-design-assets": "5.2.0-beta.47", - "@storybook/addon-docs": "5.2.0-beta.47", - "@storybook/addon-events": "5.2.0-beta.47", - "@storybook/addon-graphql": "5.2.0-beta.47", - "@storybook/addon-info": "5.2.0-beta.47", - "@storybook/addon-jest": "5.2.0-beta.47", - "@storybook/addon-knobs": "5.2.0-beta.47", - "@storybook/addon-links": "5.2.0-beta.47", - "@storybook/addon-notes": "5.2.0-beta.47", - "@storybook/addon-options": "5.2.0-beta.47", - "@storybook/addon-queryparams": "5.2.0-beta.47", - "@storybook/addon-storyshots": "5.2.0-beta.47", - "@storybook/addon-storyshots-puppeteer": "5.2.0-beta.47", - "@storybook/addon-storysource": "5.2.0-beta.47", - "@storybook/addon-viewport": "5.2.0-beta.47", - "@storybook/addons": "5.2.0-beta.47", - "@storybook/components": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", - "@storybook/node-logger": "5.2.0-beta.47", - "@storybook/react": "5.2.0-beta.47", - "@storybook/source-loader": "5.2.0-beta.47", - "@storybook/theming": "5.2.0-beta.47", + "@storybook/addon-a11y": "5.3.0-alpha.4", + "@storybook/addon-actions": "5.3.0-alpha.4", + "@storybook/addon-backgrounds": "5.3.0-alpha.4", + "@storybook/addon-centered": "5.3.0-alpha.4", + "@storybook/addon-contexts": "5.3.0-alpha.4", + "@storybook/addon-cssresources": "5.3.0-alpha.4", + "@storybook/addon-design-assets": "5.3.0-alpha.4", + "@storybook/addon-docs": "5.3.0-alpha.4", + "@storybook/addon-events": "5.3.0-alpha.4", + "@storybook/addon-graphql": "5.3.0-alpha.4", + "@storybook/addon-info": "5.3.0-alpha.4", + "@storybook/addon-jest": "5.3.0-alpha.4", + "@storybook/addon-knobs": "5.3.0-alpha.4", + "@storybook/addon-links": "5.3.0-alpha.4", + "@storybook/addon-notes": "5.3.0-alpha.4", + "@storybook/addon-options": "5.3.0-alpha.4", + "@storybook/addon-queryparams": "5.3.0-alpha.4", + "@storybook/addon-storyshots": "5.3.0-alpha.4", + "@storybook/addon-storyshots-puppeteer": "5.3.0-alpha.4", + "@storybook/addon-storysource": "5.3.0-alpha.4", + "@storybook/addon-viewport": "5.3.0-alpha.4", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/components": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", + "@storybook/node-logger": "5.3.0-alpha.4", + "@storybook/react": "5.3.0-alpha.4", + "@storybook/source-loader": "5.3.0-alpha.4", + "@storybook/theming": "5.3.0-alpha.4", "cors": "^2.8.5", "cross-env": "^5.2.0", "enzyme-to-json": "^3.3.5", @@ -52,7 +51,7 @@ "format-json": "^1.0.3", "global": "^4.3.2", "graphql": "^14.1.1", - "jest-emotion": "^10.0.11", + "jest-emotion": "^10.0.17", "lodash": "^4.17.11", "paths.macro": "^2.0.2", "prop-types": "^15.7.2", diff --git a/examples/official-storybook/preview-head.html b/examples/official-storybook/preview-head.html index f04a5f31bc1..832d1d79398 100644 --- a/examples/official-storybook/preview-head.html +++ b/examples/official-storybook/preview-head.html @@ -5,4 +5,8 @@ #dotenv-file-not-loaded { display: %DOTENV_DISPLAY_WARNING%; } + + .sbdocs.sbdocs-content { + max-width: 600px; + } diff --git a/examples/official-storybook/stories/addon-backgrounds.stories.js b/examples/official-storybook/stories/addon-backgrounds.stories.js index 3276313fe34..b9eb8b54be7 100644 --- a/examples/official-storybook/stories/addon-backgrounds.stories.js +++ b/examples/official-storybook/stories/addon-backgrounds.stories.js @@ -62,3 +62,13 @@ skippedViaDisableTrue.story = { backgrounds: { disable: true }, }, }; + +export const gridCellSize = () => ( + +); + +gridCellSize.story = { + parameters: { + grid: { cellSize: 10 }, + }, +}; diff --git a/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx b/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx index 5fc45bc20c1..27ab93c9a75 100644 --- a/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx +++ b/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx @@ -28,6 +28,10 @@ import DocgenButton from '../../components/DocgenButton'; + + + + ## A random color ColorPalette @@ -82,6 +86,10 @@ export const nonStory2 = () => ; // another one <>This is an iframe! + +

Hello Hugh

+ + {() => { return
function result
; diff --git a/examples/official-storybook/stories/addon-graphql.stories.js b/examples/official-storybook/stories/addon-graphql.stories.js index 44187c83c6b..6a175d206e5 100644 --- a/examples/official-storybook/stories/addon-graphql.stories.js +++ b/examples/official-storybook/stories/addon-graphql.stories.js @@ -4,11 +4,10 @@ export default { title: 'Addons|GraphQL', }; -export const getPickachu = () =>
hello
; - -getPickachu.story = { - name: 'get Pickachu', +export const getPikachu = () =>
hello
; +getPikachu.story = { + name: 'get Pikachu', parameters: { graphiql: { query: `{ diff --git a/examples/official-storybook/stories/core/errors.stories.js b/examples/official-storybook/stories/core/errors.stories.js index 962a37a4d45..4c1db62270a 100644 --- a/examples/official-storybook/stories/core/errors.stories.js +++ b/examples/official-storybook/stories/core/errors.stories.js @@ -1,6 +1,7 @@ import React, { Fragment } from 'react'; -const BadComponent = () => ({ renderable: 'no, react can not render objects' }); +const badOutput = { renderable: 'no, react can not render objects' }; +const BadComponent = () => badOutput; export default { title: 'Core|Errors', @@ -24,7 +25,7 @@ export const badComponent = () => ( ); badComponent.story = { - name: 'story errors - variant error', + name: 'story errors - invariant error', parameters: { notes: 'Story does not return something react can render', storyshots: { disable: true }, @@ -32,7 +33,7 @@ badComponent.story = { }, }; -export const badStory = () => false; +export const badStory = () => badOutput; badStory.story = { name: 'story errors - story un-renderable type', parameters: { diff --git a/examples/official-storybook/stories/core/parameters.stories.js b/examples/official-storybook/stories/core/parameters.stories.js index 1f9551856fa..5e327839fb3 100644 --- a/examples/official-storybook/stories/core/parameters.stories.js +++ b/examples/official-storybook/stories/core/parameters.stories.js @@ -20,7 +20,7 @@ export default { // I'm not sure what we should recommend regarding propTypes? are they a good idea for examples? // Given we sort of control the props, should we export a prop type? export const passed = ({ parameters: { options, ...parameters }, ...rest }) => ( - 
StoryContext: {JSON.stringify({ ...rest, parameters }, null, 2)}
+ 
Parameters: {JSON.stringify(parameters, null, 2)}
); passed.story = { name: 'passed to story', diff --git a/examples/official-storybook/stories/demo/button.stories.js b/examples/official-storybook/stories/demo/button.stories.js index 274eb231df0..e0958d19ef4 100644 --- a/examples/official-storybook/stories/demo/button.stories.js +++ b/examples/official-storybook/stories/demo/button.stories.js @@ -5,6 +5,11 @@ import { Button } from '@storybook/react/demo'; export default { title: 'Other|Demo/Button', component: Button, + parameters: { + docs: { + inlineStories: false, + }, + }, }; export const withText = () => ; @@ -31,4 +36,9 @@ export const withCounter = () => { withCounter.story = { name: 'with counter', + parameters: { + docs: { + storyDescription: 'This demonstrates react hooks working inside stories. Go team! πŸš€', + }, + }, }; diff --git a/examples/official-storybook/stories/demo/button.stories.mdx b/examples/official-storybook/stories/demo/button.stories.mdx index 66b88fe374f..a20e5690550 100644 --- a/examples/official-storybook/stories/demo/button.stories.mdx +++ b/examples/official-storybook/stories/demo/button.stories.mdx @@ -1,12 +1,14 @@ import { useState } from 'react'; import { action } from '@storybook/addon-actions'; import { Button } from '@storybook/react/demo'; -import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; # Simple Button + + ## Hello diff --git a/examples/official-storybook/stories/hooks.stories.js b/examples/official-storybook/stories/hooks.stories.js index 7f98f4e00c9..3f349858e25 100644 --- a/examples/official-storybook/stories/hooks.stories.js +++ b/examples/official-storybook/stories/hooks.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { useState } from '@storybook/client-api'; +import { useEffect, useRef, useState } from '@storybook/client-api'; export default { title: 'Hooks', @@ -19,3 +19,28 @@ export const Input = () => { const [text, setText] = useState('foo'); return setText(e.target.value)} />; }; + +export const effect = () => { + const ref = useRef(); + useEffect(() => { + if (ref.current != null) { + ref.current.style.backgroundColor = 'yellow'; + } + }); + + return ( + + ); +}; + +export const reactHookCheckbox = () => { + const [on, setOn] = React.useState(false); + return ( + + ); +}; diff --git a/examples/polymer-cli/package.json b/examples/polymer-cli/package.json index 1fe792eed51..f716985527b 100644 --- a/examples/polymer-cli/package.json +++ b/examples/polymer-cli/package.json @@ -1,26 +1,25 @@ { "name": "polymer-cli", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "private": true, "scripts": { "build-storybook": "build-storybook", - "now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet", "start": "webpack-dev-server", "storybook": "start-storybook -p 9001 -c .storybook" }, "dependencies": { "@polymer/polymer": "^2.6.0", - "@storybook/addon-a11y": "5.2.0-beta.47", - "@storybook/addon-actions": "5.2.0-beta.47", - "@storybook/addon-backgrounds": "5.2.0-beta.47", - "@storybook/addon-knobs": "5.2.0-beta.47", - "@storybook/addon-links": "5.2.0-beta.47", - "@storybook/addon-notes": "5.2.0-beta.47", - "@storybook/addon-options": "5.2.0-beta.47", - "@storybook/addon-storysource": "5.2.0-beta.47", - "@storybook/addon-viewport": "5.2.0-beta.47", - "@storybook/polymer": "5.2.0-beta.47", - "@storybook/source-loader": "5.2.0-beta.47", + "@storybook/addon-a11y": "5.3.0-alpha.4", + "@storybook/addon-actions": "5.3.0-alpha.4", + "@storybook/addon-backgrounds": "5.3.0-alpha.4", + "@storybook/addon-knobs": "5.3.0-alpha.4", + "@storybook/addon-links": "5.3.0-alpha.4", + "@storybook/addon-notes": "5.3.0-alpha.4", + "@storybook/addon-options": "5.3.0-alpha.4", + "@storybook/addon-storysource": "5.3.0-alpha.4", + "@storybook/addon-viewport": "5.3.0-alpha.4", + "@storybook/polymer": "5.3.0-alpha.4", + "@storybook/source-loader": "5.3.0-alpha.4", "@webcomponents/webcomponentsjs": "^1.2.0", "global": "^4.3.2", "lit-html": "^1.0.0", diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json index 9c097912a0a..683da567ff6 100644 --- a/examples/preact-kitchen-sink/package.json +++ b/examples/preact-kitchen-sink/package.json @@ -1,12 +1,11 @@ { "name": "preact-example", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "private": true, "scripts": { "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", "build-storybook": "build-storybook -s public", "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", - "now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet", "storybook": "start-storybook -p 9009 -s public" }, "dependencies": { @@ -16,21 +15,21 @@ "devDependencies": { "@babel/core": "^7.3.4", "@babel/plugin-transform-runtime": "^7.2.0", - "@storybook/addon-a11y": "5.2.0-beta.47", - "@storybook/addon-actions": "5.2.0-beta.47", - "@storybook/addon-backgrounds": "5.2.0-beta.47", - "@storybook/addon-centered": "5.2.0-beta.47", - "@storybook/addon-contexts": "5.2.0-beta.47", - "@storybook/addon-knobs": "5.2.0-beta.47", - "@storybook/addon-links": "5.2.0-beta.47", - "@storybook/addon-notes": "5.2.0-beta.47", - "@storybook/addon-options": "5.2.0-beta.47", - "@storybook/addon-storyshots": "5.2.0-beta.47", - "@storybook/addon-storysource": "5.2.0-beta.47", - "@storybook/addon-viewport": "5.2.0-beta.47", - "@storybook/addons": "5.2.0-beta.47", - "@storybook/preact": "5.2.0-beta.47", - "@storybook/source-loader": "5.2.0-beta.47", + "@storybook/addon-a11y": "5.3.0-alpha.4", + "@storybook/addon-actions": "5.3.0-alpha.4", + "@storybook/addon-backgrounds": "5.3.0-alpha.4", + "@storybook/addon-centered": "5.3.0-alpha.4", + "@storybook/addon-contexts": "5.3.0-alpha.4", + "@storybook/addon-knobs": "5.3.0-alpha.4", + "@storybook/addon-links": "5.3.0-alpha.4", + "@storybook/addon-notes": "5.3.0-alpha.4", + "@storybook/addon-options": "5.3.0-alpha.4", + "@storybook/addon-storyshots": "5.3.0-alpha.4", + "@storybook/addon-storysource": "5.3.0-alpha.4", + "@storybook/addon-viewport": "5.3.0-alpha.4", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/preact": "5.3.0-alpha.4", + "@storybook/source-loader": "5.3.0-alpha.4", "babel-loader": "^8.0.4", "cross-env": "^5.2.0", "file-loader": "^3.0.1", diff --git a/examples/rax-kitchen-sink/.storybook/config.js b/examples/rax-kitchen-sink/.storybook/config.js index 85a893e61cd..211422ec39a 100644 --- a/examples/rax-kitchen-sink/.storybook/config.js +++ b/examples/rax-kitchen-sink/.storybook/config.js @@ -2,12 +2,11 @@ import { configure, addParameters } from '@storybook/rax'; addParameters({ options: { - name: 'Rax Kitchen Sink', + name: 'Stroybook for Rax', url: 'https://github.com/storybookjs/storybook/tree/master/examples/rax-kitchen-sink', goFullScreen: false, showAddonsPanel: true, showSearchBox: false, - sortStoriesByKind: false, hierarchySeparator: /\./, hierarchyRootSeparator: /\|/, enableShortcuts: true, diff --git a/examples/rax-kitchen-sink/package.json b/examples/rax-kitchen-sink/package.json index 7ef25c1ecd0..3d9cc8fccf4 100644 --- a/examples/rax-kitchen-sink/package.json +++ b/examples/rax-kitchen-sink/package.json @@ -1,50 +1,47 @@ { "name": "rax-kitchen-sink", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "private": true, "scripts": { - "test:generate-output": "jest --json --outputFile=jest-test-results.json --config=./jest-addon.config.js", - "now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet", + "test:generate-output": "jest --json --outputFile=jest-test-results.json --config=./jest-addon.config.js -u", "test": "jest", "start": "rax-scripts start", "build": "rax-scripts build", "storybook": "start-storybook -p 9009 -s public", - "prestorybook": "npm run test:generate-output", - "prebuild:storybook": "npm run test:generate-output", + "prestorybook": "yarn test:generate-output", + "prebuild-storybook": "yarn test:generate-output", "build-storybook": "build-storybook -s public" }, "dependencies": { "event-emitter": "^0.3.5", - "rax": "^0.6.5", - "rax-button": "^0.6.5", - "rax-image": "^0.6.8", - "rax-link": "^0.6.5", - "rax-picker": "^0.6.5", + "rax": "^1.0.0", + "rax-image": "^1.0.0", + "rax-link": "^1.0.0", "rax-text": "^1.0.0", - "rax-view": "^0.6.5" + "rax-view": "^1.0.0" }, "devDependencies": { - "@storybook/addon-a11y": "5.2.0-beta.47", - "@storybook/addon-actions": "5.2.0-beta.47", - "@storybook/addon-backgrounds": "5.2.0-beta.47", - "@storybook/addon-centered": "5.2.0-beta.47", - "@storybook/addon-events": "5.2.0-beta.47", - "@storybook/addon-info": "5.2.0-beta.47", - "@storybook/addon-jest": "5.2.0-beta.47", - "@storybook/addon-knobs": "5.2.0-beta.47", - "@storybook/addon-links": "5.2.0-beta.47", - "@storybook/addon-notes": "5.2.0-beta.47", - "@storybook/addon-options": "5.2.0-beta.47", - "@storybook/addon-storyshots": "5.2.0-beta.47", - "@storybook/addon-storysource": "5.2.0-beta.47", - "@storybook/addon-viewport": "5.2.0-beta.47", - "@storybook/addons": "5.2.0-beta.47", - "@storybook/rax": "5.2.0-beta.47", - "@storybook/source-loader": "5.2.0-beta.47", + "@storybook/addon-a11y": "5.3.0-alpha.4", + "@storybook/addon-actions": "5.3.0-alpha.4", + "@storybook/addon-backgrounds": "5.3.0-alpha.4", + "@storybook/addon-centered": "5.3.0-alpha.4", + "@storybook/addon-events": "5.3.0-alpha.4", + "@storybook/addon-info": "5.3.0-alpha.4", + "@storybook/addon-jest": "5.3.0-alpha.4", + "@storybook/addon-knobs": "5.3.0-alpha.4", + "@storybook/addon-links": "5.3.0-alpha.4", + "@storybook/addon-notes": "5.3.0-alpha.4", + "@storybook/addon-options": "5.3.0-alpha.4", + "@storybook/addon-storyshots": "5.3.0-alpha.4", + "@storybook/addon-storysource": "5.3.0-alpha.4", + "@storybook/addon-viewport": "5.3.0-alpha.4", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/rax": "5.3.0-alpha.4", + "@storybook/source-loader": "5.3.0-alpha.4", "babel-eslint": "^8.2.2", "babel-preset-rax": "^1.0.0-beta.0", - "rax-scripts": "^1.0.0-beta.10", - "rax-test-renderer": "^0.6.5", + "rax-scripts": "^2.0.0", + "rax-test-renderer": "^1.0.0", "stylesheet-loader": "^0.6.5" } } diff --git a/examples/rax-kitchen-sink/src/components/App/__snapshots__/App.test.js.snap b/examples/rax-kitchen-sink/src/components/App/__snapshots__/App.test.js.snap index 649a3944632..052ed9614b7 100644 --- a/examples/rax-kitchen-sink/src/components/App/__snapshots__/App.test.js.snap +++ b/examples/rax-kitchen-sink/src/components/App/__snapshots__/App.test.js.snap @@ -17,7 +17,6 @@ Object { "flexDirection": "column", "flexShrink": 0, "fontSize": 32, - "position": "relative", "whiteSpace": "pre-wrap", }, "tagName": "SPAN", @@ -30,7 +29,6 @@ Object { "display": "flex", "flexDirection": "column", "flexShrink": 0, - "position": "relative", }, "tagName": "DIV", }, @@ -46,7 +44,6 @@ Object { "flexDirection": "column", "flexShrink": 0, "fontSize": 32, - "position": "relative", "whiteSpace": "pre-wrap", }, "tagName": "SPAN", @@ -59,7 +56,6 @@ Object { "display": "flex", "flexDirection": "column", "flexShrink": 0, - "position": "relative", }, "tagName": "DIV", } diff --git a/examples/rax-kitchen-sink/src/components/Logger.js b/examples/rax-kitchen-sink/src/components/Logger.js deleted file mode 100644 index 52b1b9357e6..00000000000 --- a/examples/rax-kitchen-sink/src/components/Logger.js +++ /dev/null @@ -1,107 +0,0 @@ -import { createElement, Component, PropTypes } from 'rax'; -import EventEmitter from 'event-emitter'; -import allOff from 'event-emitter/all-off'; -import View from 'rax-view'; -import Text from 'rax-text'; -import Button from 'rax-button'; - -export const EVENTS = { - TEST_EVENT_1: 'TEST_EVENT_1', - TEST_EVENT_2: 'TEST_EVENT_2', - TEST_EVENT_3: 'TEST_EVENT_3', -}; - -const styles = { - button: { - position: 'absolute', - top: 10, - right: 10, - background: '#000', - padding: 5, - border: 'none', - boxShadow: 'none', - }, - buttonText: { - fontSize: 14, - color: '#FFF', - }, - container: { - minHeight: '500px', - width: '100%', - }, - item: { - backgroundColor: '#d2d2d2', - paddingTop: 5, - paddingBottom: 5, - paddingLeft: 10, - paddingRight: 10, - marginBottom: 5, - }, -}; - -class Logger extends Component { - state = { - events: [], - }; - - static propTypes = { - emitter: PropTypes.instanceOf(EventEmitter).isRequired, - }; - - componentDidMount() { - const { emitter } = this.props; - - Object.values(EVENTS).forEach(eventName => { - emitter.on(eventName, this.onEvent.bind(this, eventName)); - }); - } - - componentWillUnmount() { - const { emitter } = this.props; - - allOff(emitter); - } - - onEvent = (name, payload) => { - const { events } = this.state; - this.setState({ - events: [...events, { name, payload }], - }); - }; - - clearEvents = () => { - this.setState({ - events: [], - }); - }; - - renderEvent({ name, payload }) { - return createElement( - View, - { style: styles.item }, - createElement(Text, null, '----------------------------------'), - createElement(Text, null, `Name: ${name}`), - createElement(Text, null, `Payload: ${JSON.stringify(payload)}`), - createElement(Text, null, '----------------------------------') - ); - } - - render() { - const { events } = this.state; - - return ( - - {events.map(this.renderEvent)} - {events.length ? ( - - ) : null} - - ); - } -} - -export default Logger; diff --git a/examples/rax-kitchen-sink/src/components/Welcome/__snapshots__/Welcome.test.js.snap b/examples/rax-kitchen-sink/src/components/Welcome/__snapshots__/Welcome.test.js.snap index 2ba840dbb07..9b8f4ed5508 100644 --- a/examples/rax-kitchen-sink/src/components/Welcome/__snapshots__/Welcome.test.js.snap +++ b/examples/rax-kitchen-sink/src/components/Welcome/__snapshots__/Welcome.test.js.snap @@ -17,13 +17,13 @@ Object { "fontSize": 40, "fontWeight": "bold", "lineHeight": 50, - "position": "relative", "whiteSpace": "pre-wrap", }, "tagName": "SPAN", }, Object { "attributes": Object { + "class": "rax-image ", "fallbackSource": Object { "uri": "https://user-images.githubusercontent.com/677114/49848760-999e7d00-fe11-11e8-978f-264ea31f6739.png", }, @@ -35,7 +35,6 @@ Object { "load": [Function], }, "style": Object { - "display": "flex", "height": 100, "margin": "0 auto", "objectFit": "cover", @@ -57,7 +56,6 @@ Object { "flexDirection": "column", "flexShrink": 0, "fontSize": 12, - "position": "relative", "whiteSpace": "pre-wrap", }, "tagName": "SPAN", @@ -71,7 +69,6 @@ Object { "flexDirection": "column", "flexShrink": 0, "marginBottom": 10, - "position": "relative", }, "tagName": "DIV", }, @@ -89,7 +86,6 @@ Object { "flexDirection": "column", "flexShrink": 0, "fontSize": 12, - "position": "relative", "whiteSpace": "pre-wrap", }, "tagName": "SPAN", @@ -103,7 +99,6 @@ Object { "flexDirection": "column", "flexShrink": 0, "marginBottom": 10, - "position": "relative", }, "tagName": "DIV", }, @@ -121,7 +116,6 @@ Object { "flexDirection": "column", "flexShrink": 0, "fontSize": 12, - "position": "relative", "whiteSpace": "pre-wrap", }, "tagName": "SPAN", @@ -135,20 +129,19 @@ Object { "flexDirection": "column", "flexShrink": 0, "marginBottom": 10, - "position": "relative", }, "tagName": "DIV", }, Object { "attributes": Object { - "role": "button", + "type": "button", }, "children": Array [ Object { "children": Array [ Object { "children": Array [ - "Button", + "button", ], "style": Object { "alignContent": "flex-start", @@ -158,7 +151,6 @@ Object { "flexDirection": "column", "flexShrink": 0, "fontSize": 12, - "position": "relative", "whiteSpace": "pre-wrap", }, "tagName": "SPAN", @@ -172,22 +164,11 @@ Object { "flexDirection": "column", "flexShrink": 0, "marginBottom": 10, - "position": "relative", }, "tagName": "DIV", }, ], - "style": Object { - "alignContent": "flex-start", - "border": "0 solid black", - "boxSizing": "border-box", - "cursor": "pointer", - "display": "flex", - "flexDirection": "column", - "flexShrink": 0, - "position": "relative", - }, - "tagName": "DIV", + "tagName": "BUTTON", }, Object { "children": Array [ @@ -203,7 +184,6 @@ Object { "flexDirection": "column", "flexShrink": 0, "fontSize": 12, - "position": "relative", "whiteSpace": "pre-wrap", }, "tagName": "SPAN", @@ -217,7 +197,6 @@ Object { "flexDirection": "column", "flexShrink": 0, "marginBottom": 10, - "position": "relative", }, "tagName": "DIV", }, @@ -235,7 +214,6 @@ Object { "flexDirection": "column", "flexShrink": 0, "fontSize": 12, - "position": "relative", "whiteSpace": "pre-wrap", }, "tagName": "SPAN", @@ -249,7 +227,6 @@ Object { "flexDirection": "column", "flexShrink": 0, "marginBottom": 10, - "position": "relative", }, "tagName": "DIV", }, @@ -263,7 +240,6 @@ Object { "flexShrink": 0, "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif", "margin": 15, - "position": "relative", }, "tagName": "DIV", } diff --git a/examples/rax-kitchen-sink/src/components/Welcome/index.js b/examples/rax-kitchen-sink/src/components/Welcome/index.js index 9a44216fcf9..8715efacb67 100644 --- a/examples/rax-kitchen-sink/src/components/Welcome/index.js +++ b/examples/rax-kitchen-sink/src/components/Welcome/index.js @@ -2,7 +2,7 @@ import { createElement } from 'rax'; import View from 'rax-view'; import Text from 'rax-text'; -import Button from 'rax-button'; +// import Button from 'rax-button'; import Image from 'rax-image'; const Main = ({ children, ...props }) => ( @@ -55,9 +55,9 @@ const Welcome = ({ showApp }) => ( like a visual test case.)

See these sample

- +

for a component called 'Button'.

Just like that, you can add your own components as stories. You can also edit those components diff --git a/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js b/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js index a13959df30e..38e0e524a5e 100644 --- a/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js +++ b/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js @@ -2,7 +2,6 @@ import { createElement } from 'rax'; import { withA11Y } from '@storybook/addon-a11y'; import Text from 'rax-text'; import View from 'rax-view'; -import Button from 'rax-button'; import markdown from './note.md'; export default { @@ -26,13 +25,13 @@ withStyle.story = { }; export const withMarkdown = () => ( - + ); withMarkdown.story = { diff --git a/examples/rax-kitchen-sink/src/stories/addon-actions.stories.js b/examples/rax-kitchen-sink/src/stories/addon-actions.stories.js index 908ed8b8709..8d7cabd2c34 100644 --- a/examples/rax-kitchen-sink/src/stories/addon-actions.stories.js +++ b/examples/rax-kitchen-sink/src/stories/addon-actions.stories.js @@ -1,25 +1,28 @@ import { createElement } from 'rax'; import { action } from '@storybook/addon-actions'; -import Button from 'rax-button'; import Text from 'rax-text'; export default { title: 'Addon|addon-actions', }; -export const withText = () => ; +export const withText = () => ( + +); withText.story = { name: 'with text', }; export const withSomeEmoji = () => ( - + ); withSomeEmoji.story = { diff --git a/examples/rax-kitchen-sink/src/stories/addon-centered.stories.js b/examples/rax-kitchen-sink/src/stories/addon-centered.stories.js index d6afa8ed056..e28ff40f04b 100644 --- a/examples/rax-kitchen-sink/src/stories/addon-centered.stories.js +++ b/examples/rax-kitchen-sink/src/stories/addon-centered.stories.js @@ -1,6 +1,5 @@ import { createElement } from 'rax'; import Centered from '@storybook/addon-centered/rax'; -import Button from 'rax-button'; import Text from 'rax-text'; import App from '../components/App'; @@ -10,9 +9,9 @@ export default { }; export const button = () => ( - + ); button.story = { name: 'Button' }; diff --git a/examples/rax-kitchen-sink/src/stories/addon-events.stories.js b/examples/rax-kitchen-sink/src/stories/addon-events.stories.js deleted file mode 100644 index ec064c38108..00000000000 --- a/examples/rax-kitchen-sink/src/stories/addon-events.stories.js +++ /dev/null @@ -1,41 +0,0 @@ -import { createElement } from 'rax'; -import withEvents from '@storybook/addon-events'; -import ee from 'event-emitter'; -import Logger, { EVENTS } from '../components/Logger'; - -const emitter = ee(); - -const decorator = withEvents({ - emit: emitter.emit.bind(emitter), - events: [ - { - name: EVENTS.TEST_EVENT_1, - title: 'Test event 1', - payload: 'hi', - }, - { - name: EVENTS.TEST_EVENT_2, - title: 'Test event 2', - payload: 'ho', - }, - { - name: EVENTS.TEST_EVENT_3, - title: 'Test event 3', - payload: { - text: 'very complicated payload', - number: 1, - }, - }, - ], -}); - -export default { - title: 'Addon|addon-events', - decorators: [decorator], -}; - -export const eventsLogger = () => ; - -eventsLogger.story = { - name: 'Events Logger', -}; diff --git a/examples/rax-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/rax-kitchen-sink/src/stories/addon-knobs.stories.js index 45ad805ae6a..af84931e473 100644 --- a/examples/rax-kitchen-sink/src/stories/addon-knobs.stories.js +++ b/examples/rax-kitchen-sink/src/stories/addon-knobs.stories.js @@ -1,7 +1,6 @@ import { createElement } from 'rax'; import { withKnobs, text, boolean, number } from '@storybook/addon-knobs'; -import Button from 'rax-button'; import Text from 'rax-text'; export default { @@ -29,9 +28,9 @@ export const withAButton = () => { color: disabled ? '#666' : '#000', }; return ( - + ); }; diff --git a/examples/rax-kitchen-sink/src/stories/addon-links.stories.js b/examples/rax-kitchen-sink/src/stories/addon-links.stories.js deleted file mode 100644 index e95e6934c26..00000000000 --- a/examples/rax-kitchen-sink/src/stories/addon-links.stories.js +++ /dev/null @@ -1,31 +0,0 @@ -import { createElement } from 'rax'; -import { linkTo } from '@storybook/addon-links'; -import Picker from 'rax-picker'; -import Welcome from '../components/Welcome'; - -export default { - title: 'Addon|addon-links', -}; - -export const linkToNotes = () => { - return ( - value)}> - - - - - - ); -}; - -linkToNotes.story = { - name: 'Link to notes', -}; - -export const welcomeScreenWithLinkToBasicButton = () => ( - -); - -welcomeScreenWithLinkToBasicButton.story = { - name: 'Welcome screen with link to Basic > Button', -}; diff --git a/examples/riot-kitchen-sink/package.json b/examples/riot-kitchen-sink/package.json index cca8412cb2c..122a6524ff8 100644 --- a/examples/riot-kitchen-sink/package.json +++ b/examples/riot-kitchen-sink/package.json @@ -1,12 +1,11 @@ { "name": "riot-example", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "private": true, "scripts": { "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", "build-storybook": "build-storybook -s public", "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", - "now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet", "storybook": "start-storybook -p 9009 -s public" }, "dependencies": { @@ -16,20 +15,20 @@ }, "devDependencies": { "@babel/core": "^7.3.4", - "@storybook/addon-a11y": "5.2.0-beta.47", - "@storybook/addon-actions": "5.2.0-beta.47", - "@storybook/addon-backgrounds": "5.2.0-beta.47", - "@storybook/addon-centered": "5.2.0-beta.47", - "@storybook/addon-knobs": "5.2.0-beta.47", - "@storybook/addon-links": "5.2.0-beta.47", - "@storybook/addon-notes": "5.2.0-beta.47", - "@storybook/addon-options": "5.2.0-beta.47", - "@storybook/addon-storyshots": "5.2.0-beta.47", - "@storybook/addon-storysource": "5.2.0-beta.47", - "@storybook/addon-viewport": "5.2.0-beta.47", - "@storybook/addons": "5.2.0-beta.47", - "@storybook/riot": "5.2.0-beta.47", - "@storybook/source-loader": "5.2.0-beta.47", + "@storybook/addon-a11y": "5.3.0-alpha.4", + "@storybook/addon-actions": "5.3.0-alpha.4", + "@storybook/addon-backgrounds": "5.3.0-alpha.4", + "@storybook/addon-centered": "5.3.0-alpha.4", + "@storybook/addon-knobs": "5.3.0-alpha.4", + "@storybook/addon-links": "5.3.0-alpha.4", + "@storybook/addon-notes": "5.3.0-alpha.4", + "@storybook/addon-options": "5.3.0-alpha.4", + "@storybook/addon-storyshots": "5.3.0-alpha.4", + "@storybook/addon-storysource": "5.3.0-alpha.4", + "@storybook/addon-viewport": "5.3.0-alpha.4", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/riot": "5.3.0-alpha.4", + "@storybook/source-loader": "5.3.0-alpha.4", "babel-loader": "^8.0.4", "cross-env": "^5.2.0", "file-loader": "^3.0.1", diff --git a/examples/standalone-preview/package.json b/examples/standalone-preview/package.json index 3544ca4bad6..6936b222c67 100644 --- a/examples/standalone-preview/package.json +++ b/examples/standalone-preview/package.json @@ -1,12 +1,12 @@ { "name": "standalone-preview", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "private": true, "scripts": { "storybook": "parcel ./storybook.html --port 1337" }, "devDependencies": { - "@storybook/react": "5.2.0-beta.47", + "@storybook/react": "5.3.0-alpha.4", "parcel": "^1.12.3", "react": "^16.8.4", "react-dom": "^16.8.4" diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json index 6e037514b60..0d9641db847 100644 --- a/examples/svelte-kitchen-sink/package.json +++ b/examples/svelte-kitchen-sink/package.json @@ -1,29 +1,28 @@ { "name": "svelte-example", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "private": true, "scripts": { "build-storybook": "build-storybook -s public", - "now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet", "storybook": "start-storybook -p 9009 -s public" }, "dependencies": { "global": "^4.3.2" }, "devDependencies": { - "@storybook/addon-a11y": "5.2.0-beta.47", - "@storybook/addon-actions": "5.2.0-beta.47", - "@storybook/addon-backgrounds": "5.2.0-beta.47", - "@storybook/addon-centered": "5.2.0-beta.47", - "@storybook/addon-knobs": "5.2.0-beta.47", - "@storybook/addon-links": "5.2.0-beta.47", - "@storybook/addon-notes": "5.2.0-beta.47", - "@storybook/addon-options": "5.2.0-beta.47", - "@storybook/addon-storyshots": "5.2.0-beta.47", - "@storybook/addon-storysource": "5.2.0-beta.47", - "@storybook/addon-viewport": "5.2.0-beta.47", - "@storybook/addons": "5.2.0-beta.47", - "@storybook/source-loader": "5.2.0-beta.47", - "@storybook/svelte": "5.2.0-beta.47" + "@storybook/addon-a11y": "5.3.0-alpha.4", + "@storybook/addon-actions": "5.3.0-alpha.4", + "@storybook/addon-backgrounds": "5.3.0-alpha.4", + "@storybook/addon-centered": "5.3.0-alpha.4", + "@storybook/addon-knobs": "5.3.0-alpha.4", + "@storybook/addon-links": "5.3.0-alpha.4", + "@storybook/addon-notes": "5.3.0-alpha.4", + "@storybook/addon-options": "5.3.0-alpha.4", + "@storybook/addon-storyshots": "5.3.0-alpha.4", + "@storybook/addon-storysource": "5.3.0-alpha.4", + "@storybook/addon-viewport": "5.3.0-alpha.4", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/source-loader": "5.3.0-alpha.4", + "@storybook/svelte": "5.3.0-alpha.4" } } diff --git a/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap b/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap index 5e21fe591a2..494e638e51c 100644 --- a/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap +++ b/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap @@ -278,6 +278,8 @@ exports[`Storyshots Button Square 1`] = ` `; +exports[`Storyshots Core|Errors Null Error 1`] = ``; + exports[`Storyshots Core|Parameters Passed To Story 1`] = `

Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"docs":{"iframeHeight":"60px"},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter","displayName":"passed to story"} diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json index 5dd174052f0..06f8099b6f4 100644 --- a/examples/vue-kitchen-sink/package.json +++ b/examples/vue-kitchen-sink/package.json @@ -1,12 +1,11 @@ { "name": "vue-example", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "private": true, "scripts": { "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", "build-storybook": "build-storybook -s public", "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", - "now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet", "storybook": "start-storybook -p 9009 -s public" }, "dependencies": { @@ -15,22 +14,22 @@ }, "devDependencies": { "@babel/core": "^7.3.4", - "@storybook/addon-a11y": "5.2.0-beta.47", - "@storybook/addon-actions": "5.2.0-beta.47", - "@storybook/addon-backgrounds": "5.2.0-beta.47", - "@storybook/addon-centered": "5.2.0-beta.47", - "@storybook/addon-contexts": "5.2.0-beta.47", - "@storybook/addon-docs": "5.2.0-beta.47", - "@storybook/addon-knobs": "5.2.0-beta.47", - "@storybook/addon-links": "5.2.0-beta.47", - "@storybook/addon-notes": "5.2.0-beta.47", - "@storybook/addon-options": "5.2.0-beta.47", - "@storybook/addon-storyshots": "5.2.0-beta.47", - "@storybook/addon-storysource": "5.2.0-beta.47", - "@storybook/addon-viewport": "5.2.0-beta.47", - "@storybook/addons": "5.2.0-beta.47", - "@storybook/source-loader": "5.2.0-beta.47", - "@storybook/vue": "5.2.0-beta.47", + "@storybook/addon-a11y": "5.3.0-alpha.4", + "@storybook/addon-actions": "5.3.0-alpha.4", + "@storybook/addon-backgrounds": "5.3.0-alpha.4", + "@storybook/addon-centered": "5.3.0-alpha.4", + "@storybook/addon-contexts": "5.3.0-alpha.4", + "@storybook/addon-docs": "5.3.0-alpha.4", + "@storybook/addon-knobs": "5.3.0-alpha.4", + "@storybook/addon-links": "5.3.0-alpha.4", + "@storybook/addon-notes": "5.3.0-alpha.4", + "@storybook/addon-options": "5.3.0-alpha.4", + "@storybook/addon-storyshots": "5.3.0-alpha.4", + "@storybook/addon-storysource": "5.3.0-alpha.4", + "@storybook/addon-viewport": "5.3.0-alpha.4", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/source-loader": "5.3.0-alpha.4", + "@storybook/vue": "5.3.0-alpha.4", "babel-core": "^7.0.0-bridge.0", "babel-loader": "^8.0.5", "cross-env": "^5.2.0", diff --git a/examples/vue-kitchen-sink/src/stories/addon-docs.stories.mdx b/examples/vue-kitchen-sink/src/stories/addon-docs.stories.mdx index 445657fe2a1..cd2c3787a4c 100644 --- a/examples/vue-kitchen-sink/src/stories/addon-docs.stories.mdx +++ b/examples/vue-kitchen-sink/src/stories/addon-docs.stories.mdx @@ -73,6 +73,8 @@ Just like in React, we can easily reference other stories in our docs: + + ## More info For more info, check out the [Storybook Docs Technical Preview](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing). diff --git a/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js b/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js index fd5f87471b0..d9eebaed48b 100644 --- a/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js +++ b/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js @@ -4,9 +4,7 @@ import Welcome from '../Welcome.vue'; export default { title: 'Welcome', - parameters: { - component: Welcome, - }, + component: Welcome, }; export const welcome = () => { 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 00000000000..c74f8b07057 --- /dev/null +++ b/examples/vue-kitchen-sink/src/stories/core-errors.stories.js @@ -0,0 +1,10 @@ +export default { + title: 'Core|Errors', +}; + +export const throwsError = () => { + throw new Error('foo'); +}; +throwsError.story = { parameters: { storyshots: { disable: true } } }; + +export const nullError = () => null; diff --git a/lerna.json b/lerna.json index a8a171bd1a4..f901e70f518 100644 --- a/lerna.json +++ b/lerna.json @@ -2,5 +2,5 @@ "npmClient": "yarn", "useWorkspaces": true, "registry": "https://registry.npmjs.org", - "version": "5.2.0-beta.47" + "version": "5.3.0-alpha.4" } diff --git a/lib/addons/package.json b/lib/addons/package.json index 84ce59f1b0a..a9d3e66b742 100644 --- a/lib/addons/package.json +++ b/lib/addons/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addons", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Storybook addons store", "keywords": [ "storybook" @@ -15,16 +15,20 @@ "directory": "lib/addons" }, "license": "MIT", + "files": [ + "dist/**/*", + "README.md" + ], "main": "dist/public_api.js", "types": "dist/public_api.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/api": "5.2.0-beta.47", - "@storybook/channels": "5.2.0-beta.47", - "@storybook/client-logger": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", + "@storybook/api": "5.3.0-alpha.4", + "@storybook/channels": "5.3.0-alpha.4", + "@storybook/client-logger": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", "core-js": "^3.0.1", "global": "^4.3.2", "util-deprecate": "^1.0.2" diff --git a/lib/addons/src/hooks.ts b/lib/addons/src/hooks.ts index 05c32e71584..b6b8596c2f4 100644 --- a/lib/addons/src/hooks.ts +++ b/lib/addons/src/hooks.ts @@ -1,6 +1,6 @@ -import { window } from 'global'; +import window from 'global'; import { logger } from '@storybook/client-logger'; -import { FORCE_RE_RENDER, STORY_RENDERED } from '@storybook/core-events'; +import { FORCE_RE_RENDER, STORY_RENDERED, DOCS_RENDERED } from '@storybook/core-events'; import addons, { StoryGetter, StoryContext } from './public_api'; interface StoryStore { @@ -31,6 +31,8 @@ interface Effect { type Decorator = (getStory: StoryGetter, context: StoryContext) => any; type AbstractFunction = (...args: any[]) => any; +const RenderEvents = [STORY_RENDERED, DOCS_RENDERED]; + export class HooksContext { hookListsMap: WeakMap; @@ -54,6 +56,12 @@ export class HooksContext { currentContext: StoryContext | null; + renderListener = () => { + this.triggerEffects(); + this.currentContext = null; + this.removeRenderListeners(); + }; + constructor() { this.init(); } @@ -79,6 +87,7 @@ export class HooksContext { } }); this.init(); + this.removeRenderListeners(); } getNextHook() { @@ -104,6 +113,16 @@ export class HooksContext { this.prevEffects = this.currentEffects; this.currentEffects = []; } + + addRenderListeners() { + const channel = addons.getChannel(); + RenderEvents.forEach(e => channel.on(e, this.renderListener)); + } + + removeRenderListeners() { + const channel = addons.getChannel(); + RenderEvents.forEach(e => channel.removeListener(e, this.renderListener)); + } } const hookify = (fn: AbstractFunction) => (...args: any[]) => { @@ -170,10 +189,7 @@ export const applyHooks = ( ); } } - addons.getChannel().once(STORY_RENDERED, () => { - hooks.triggerEffects(); - hooks.currentContext = null; - }); + hooks.addRenderListeners(); return result; }; }; diff --git a/lib/api/package.json b/lib/api/package.json index bbc64a9df48..d189a25faf2 100644 --- a/lib/api/package.json +++ b/lib/api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/api", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Core Storybook API & Context", "keywords": [ "storybook" @@ -14,17 +14,21 @@ "url": "https://github.com/storybookjs/storybook.git" }, "license": "MIT", + "files": [ + "dist/**/*", + "README.md" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ./scripts/generateVersion.js && node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/channels": "5.2.0-beta.47", - "@storybook/client-logger": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", - "@storybook/router": "5.2.0-beta.47", - "@storybook/theming": "5.2.0-beta.47", + "@storybook/channels": "5.3.0-alpha.4", + "@storybook/client-logger": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", + "@storybook/router": "5.3.0-alpha.4", + "@storybook/theming": "5.3.0-alpha.4", "core-js": "^3.0.1", "fast-deep-equal": "^2.0.1", "global": "^4.3.2", diff --git a/lib/api/src/modules/shortcuts.ts b/lib/api/src/modules/shortcuts.ts index c6f4ee46310..d78bebde5a6 100644 --- a/lib/api/src/modules/shortcuts.ts +++ b/lib/api/src/modules/shortcuts.ts @@ -118,8 +118,11 @@ export default function initShortcuts({ store }: Module) { handleShortcutFeature(fullApi, feature) { const { layout: { isFullscreen, showNav, showPanel }, + ui: { enableShortcuts }, } = store.getState(); - + if (!enableShortcuts) { + return; + } switch (feature) { case 'escape': { if (isFullscreen) { @@ -274,7 +277,6 @@ export default function initShortcuts({ store }: Module) { event.target.getAttribute('contenteditable') !== null ); } - // Listen for keydown events in the manager document.addEventListener('keydown', (event: Event) => { if (!focusInInput(event)) { diff --git a/lib/api/src/version.ts b/lib/api/src/version.ts index 85d9e2a5f82..1432ae1def4 100644 --- a/lib/api/src/version.ts +++ b/lib/api/src/version.ts @@ -1 +1 @@ -export const version = '5.2.0-beta.47'; +export const version = '5.3.0-alpha.4'; diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json index 3884f09e52e..2b794d38f04 100644 --- a/lib/channel-postmessage/package.json +++ b/lib/channel-postmessage/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-postmessage", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "", "keywords": [ "storybook" @@ -15,14 +15,18 @@ "directory": "lib/channel-postmessage" }, "license": "MIT", + "files": [ + "dist/**/*", + "README.md" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/channels": "5.2.0-beta.47", - "@storybook/client-logger": "5.2.0-beta.47", + "@storybook/channels": "5.3.0-alpha.4", + "@storybook/client-logger": "5.3.0-alpha.4", "core-js": "^3.0.1", "global": "^4.3.2", "telejson": "^2.2.2" diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json index 9b5592c1ea9..ef5ac7c2b77 100644 --- a/lib/channel-websocket/package.json +++ b/lib/channel-websocket/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-websocket", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "", "keywords": [ "storybook" @@ -15,13 +15,17 @@ "directory": "lib/channel-websocket" }, "license": "MIT", + "files": [ + "dist/**/*", + "README.md" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/channels": "5.2.0-beta.47", + "@storybook/channels": "5.3.0-alpha.4", "core-js": "^3.0.1", "global": "^4.3.2", "json-fn": "^1.1.1" diff --git a/lib/channels/package.json b/lib/channels/package.json index a05e70ea29a..5546cab32fa 100644 --- a/lib/channels/package.json +++ b/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "", "keywords": [ "storybook" @@ -15,6 +15,10 @@ "directory": "lib/channels" }, "license": "MIT", + "files": [ + "dist/**/*", + "README.md" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { diff --git a/lib/cli-sb/README.md b/lib/cli-sb/README.md new file mode 100644 index 00000000000..3b6a3dc82ea --- /dev/null +++ b/lib/cli-sb/README.md @@ -0,0 +1,3 @@ +# Storybook CLI + +This is a wrapper for https://www.npmjs.com/package/@storybook/cli \ No newline at end of file diff --git a/lib/cli-sb/index.js b/lib/cli-sb/index.js new file mode 100755 index 00000000000..457ff863bb4 --- /dev/null +++ b/lib/cli-sb/index.js @@ -0,0 +1,3 @@ +#!/usr/bin/env node + +require('@storybook/cli/bin/index'); diff --git a/lib/cli-sb/package.json b/lib/cli-sb/package.json new file mode 100644 index 00000000000..c6daa3e10df --- /dev/null +++ b/lib/cli-sb/package.json @@ -0,0 +1,31 @@ +{ + "name": "sb", + "version": "5.3.0-alpha.4", + "private": true, + "description": "Storybook CLI", + "keywords": [ + "storybook" + ], + "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/cli", + "bugs": { + "url": "https://github.com/storybookjs/storybook/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/storybookjs/storybook.git", + "directory": "lib/cli" + }, + "license": "MIT", + "bin": { + "sb": "./index.js" + }, + "scripts": { + "prepare": "node ../../scripts/prepare.js" + }, + "dependencies": { + "@storybook/cli": "5.3.0-alpha.4" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/lib/cli-storybook/README.md b/lib/cli-storybook/README.md new file mode 100644 index 00000000000..3b6a3dc82ea --- /dev/null +++ b/lib/cli-storybook/README.md @@ -0,0 +1,3 @@ +# Storybook CLI + +This is a wrapper for https://www.npmjs.com/package/@storybook/cli \ No newline at end of file diff --git a/lib/cli-storybook/index.js b/lib/cli-storybook/index.js new file mode 100755 index 00000000000..457ff863bb4 --- /dev/null +++ b/lib/cli-storybook/index.js @@ -0,0 +1,3 @@ +#!/usr/bin/env node + +require('@storybook/cli/bin/index'); diff --git a/lib/cli-storybook/package.json b/lib/cli-storybook/package.json new file mode 100644 index 00000000000..e90f0196f9b --- /dev/null +++ b/lib/cli-storybook/package.json @@ -0,0 +1,32 @@ +{ + "name": "storybook", + "version": "5.3.0-alpha.4", + "private": true, + "description": "Storybook CLI", + "keywords": [ + "storybook" + ], + "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/cli", + "bugs": { + "url": "https://github.com/storybookjs/storybook/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/storybookjs/storybook.git", + "directory": "lib/cli" + }, + "license": "MIT", + "bin": { + "sb": "./index.js", + "storybook": "./index.js" + }, + "scripts": { + "prepare": "node ../../scripts/prepare.js" + }, + "dependencies": { + "@storybook/cli": "5.3.0-alpha.4" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/lib/cli/generators/ANGULAR/angular-helpers.js b/lib/cli/generators/ANGULAR/angular-helpers.js index b5acae4dfee..e7e6436571a 100644 --- a/lib/cli/generators/ANGULAR/angular-helpers.js +++ b/lib/cli/generators/ANGULAR/angular-helpers.js @@ -3,7 +3,7 @@ import * as fs from 'fs'; import { readFileAsJson, writeFileAsJson } from '../../lib/helpers'; export function getAngularAppTsConfigPath() { - const angularJson = readFileAsJson('angular.json'); + const angularJson = readFileAsJson('angular.json', true); const { defaultProject } = angularJson; const tsConfigPath = angularJson.projects[defaultProject].architect.build.options.tsConfig; @@ -20,7 +20,7 @@ export function getAngularAppTsConfigJson() { return false; } - return readFileAsJson(tsConfigPath); + return readFileAsJson(tsConfigPath, true); } function setStorybookTsconfigExtendsPath(tsconfigJson) { @@ -31,12 +31,20 @@ function setStorybookTsconfigExtendsPath(tsconfigJson) { } export function editStorybookTsConfig(tsconfigPath) { - let tsConfigJson = readFileAsJson(tsconfigPath); + let tsConfigJson; + try { + tsConfigJson = readFileAsJson(tsconfigPath); + } catch (e) { + if (e.name === 'SyntaxError' && e.message.indexOf('Unexpected token /') > -1) { + throw new Error(`Comments are disallowed in ${tsconfigPath}`); + } + throw e; + } tsConfigJson = setStorybookTsconfigExtendsPath(tsConfigJson); writeFileAsJson(tsconfigPath, tsConfigJson); } export function isDefaultProjectSet() { - const angularJson = readFileAsJson('angular.json'); + const angularJson = readFileAsJson('angular.json', true); return angularJson && !!angularJson.defaultProject; } diff --git a/lib/cli/generators/ANGULAR/template/src/stories/Welcome.stories.ts b/lib/cli/generators/ANGULAR/template/src/stories/0-Welcome.stories.ts similarity index 100% rename from lib/cli/generators/ANGULAR/template/src/stories/Welcome.stories.ts rename to lib/cli/generators/ANGULAR/template/src/stories/0-Welcome.stories.ts diff --git a/lib/cli/generators/ANGULAR/template/src/stories/Button.stories.ts b/lib/cli/generators/ANGULAR/template/src/stories/1-Button.stories.ts similarity index 100% rename from lib/cli/generators/ANGULAR/template/src/stories/Button.stories.ts rename to lib/cli/generators/ANGULAR/template/src/stories/1-Button.stories.ts diff --git a/lib/cli/generators/EMBER/template/stories/Welcome.stories.js b/lib/cli/generators/EMBER/template/stories/0-Welcome.stories.js similarity index 90% rename from lib/cli/generators/EMBER/template/stories/Welcome.stories.js rename to lib/cli/generators/EMBER/template/stories/0-Welcome.stories.js index b7db119a380..e3eaa5ba782 100644 --- a/lib/cli/generators/EMBER/template/stories/Welcome.stories.js +++ b/lib/cli/generators/EMBER/template/stories/0-Welcome.stories.js @@ -1,6 +1,5 @@ /* eslint-disable import/extensions */ import hbs from 'htmlbars-inline-precompile'; -import { action } from '@storybook/addon-actions'; import { linkTo } from '@storybook/addon-links'; export default { diff --git a/lib/cli/generators/EMBER/template/stories/Button.stories.js b/lib/cli/generators/EMBER/template/stories/1-Button.stories.js similarity index 100% rename from lib/cli/generators/EMBER/template/stories/Button.stories.js rename to lib/cli/generators/EMBER/template/stories/1-Button.stories.js diff --git a/lib/cli/generators/METEOR/template/stories/Welcome.stories.js b/lib/cli/generators/METEOR/template/stories/0-Welcome.stories.js similarity index 100% rename from lib/cli/generators/METEOR/template/stories/Welcome.stories.js rename to lib/cli/generators/METEOR/template/stories/0-Welcome.stories.js diff --git a/lib/cli/generators/METEOR/template/stories/Button.stories.js b/lib/cli/generators/METEOR/template/stories/1-Button.stories.js similarity index 100% rename from lib/cli/generators/METEOR/template/stories/Button.stories.js rename to lib/cli/generators/METEOR/template/stories/1-Button.stories.js diff --git a/lib/cli/generators/MITHRIL/template/stories/Welcome.stories.js b/lib/cli/generators/MITHRIL/template/stories/0-Welcome.stories.js similarity index 100% rename from lib/cli/generators/MITHRIL/template/stories/Welcome.stories.js rename to lib/cli/generators/MITHRIL/template/stories/0-Welcome.stories.js diff --git a/lib/cli/generators/MITHRIL/template/stories/Button.stories.js b/lib/cli/generators/MITHRIL/template/stories/1-Button.stories.js similarity index 100% rename from lib/cli/generators/MITHRIL/template/stories/Button.stories.js rename to lib/cli/generators/MITHRIL/template/stories/1-Button.stories.js diff --git a/lib/cli/generators/PREACT/template/stories/Welcome.stories.js b/lib/cli/generators/PREACT/template/stories/0-Welcome.stories.js similarity index 100% rename from lib/cli/generators/PREACT/template/stories/Welcome.stories.js rename to lib/cli/generators/PREACT/template/stories/0-Welcome.stories.js diff --git a/lib/cli/generators/PREACT/template/stories/Button.stories.js b/lib/cli/generators/PREACT/template/stories/1-Button.stories.js similarity index 100% rename from lib/cli/generators/PREACT/template/stories/Button.stories.js rename to lib/cli/generators/PREACT/template/stories/1-Button.stories.js diff --git a/lib/cli/generators/RAX/template/.storybook/config.js b/lib/cli/generators/RAX/template/.storybook/config.js index 76f54a31448..d964ae12046 100644 --- a/lib/cli/generators/RAX/template/.storybook/config.js +++ b/lib/cli/generators/RAX/template/.storybook/config.js @@ -8,7 +8,6 @@ addParameters({ showAddonsPanel: true, showSearchBox: false, addonPanelInRight: true, - sortStoriesByKind: false, hierarchySeparator: /\./, hierarchyRootSeparator: /\|/, enableShortcuts: true, diff --git a/lib/cli/generators/RAX/template/stories/Welcome.stories.js b/lib/cli/generators/RAX/template/stories/0-Welcome.stories.js similarity index 100% rename from lib/cli/generators/RAX/template/stories/Welcome.stories.js rename to lib/cli/generators/RAX/template/stories/0-Welcome.stories.js diff --git a/lib/cli/generators/RAX/template/stories/Button.stories.js b/lib/cli/generators/RAX/template/stories/1-Button.stories.js similarity index 60% rename from lib/cli/generators/RAX/template/stories/Button.stories.js rename to lib/cli/generators/RAX/template/stories/1-Button.stories.js index e5f8290c7a3..3a9a6a19524 100644 --- a/lib/cli/generators/RAX/template/stories/Button.stories.js +++ b/lib/cli/generators/RAX/template/stories/1-Button.stories.js @@ -1,19 +1,22 @@ import { createElement } from 'rax'; import { action } from '@storybook/addon-actions'; -import Button from 'rax-button'; import Text from 'rax-text'; export default { title: 'Button', }; -export const text = () => ; +export const text = () => ( + +); export const emoji = () => ( - + ); diff --git a/lib/cli/generators/REACT/template/stories/Welcome.stories.js b/lib/cli/generators/REACT/template/stories/0-Welcome.stories.js similarity index 100% rename from lib/cli/generators/REACT/template/stories/Welcome.stories.js rename to lib/cli/generators/REACT/template/stories/0-Welcome.stories.js diff --git a/lib/cli/generators/REACT/template/stories/Button.stories.js b/lib/cli/generators/REACT/template/stories/1-Button.stories.js similarity index 100% rename from lib/cli/generators/REACT/template/stories/Button.stories.js rename to lib/cli/generators/REACT/template/stories/1-Button.stories.js diff --git a/lib/cli/generators/REACT_SCRIPTS/template/src/stories/Welcome.stories.js b/lib/cli/generators/REACT_SCRIPTS/template/src/stories/0-Welcome.stories.js similarity index 100% rename from lib/cli/generators/REACT_SCRIPTS/template/src/stories/Welcome.stories.js rename to lib/cli/generators/REACT_SCRIPTS/template/src/stories/0-Welcome.stories.js diff --git a/lib/cli/generators/REACT_SCRIPTS/template/src/stories/Button.stories.js b/lib/cli/generators/REACT_SCRIPTS/template/src/stories/1-Button.stories.js similarity index 100% rename from lib/cli/generators/REACT_SCRIPTS/template/src/stories/Button.stories.js rename to lib/cli/generators/REACT_SCRIPTS/template/src/stories/1-Button.stories.js diff --git a/lib/cli/generators/RIOT/template/stories/Welcome.stories.js b/lib/cli/generators/RIOT/template/stories/0-Welcome.stories.js similarity index 100% rename from lib/cli/generators/RIOT/template/stories/Welcome.stories.js rename to lib/cli/generators/RIOT/template/stories/0-Welcome.stories.js diff --git a/lib/cli/generators/RIOT/template/stories/Button.stories.js b/lib/cli/generators/RIOT/template/stories/1-Button.stories.js similarity index 100% rename from lib/cli/generators/RIOT/template/stories/Button.stories.js rename to lib/cli/generators/RIOT/template/stories/1-Button.stories.js diff --git a/lib/cli/generators/SFC_VUE/template/src/stories/Welcome.stories.js b/lib/cli/generators/SFC_VUE/template/src/stories/0-Welcome.stories.js similarity index 100% rename from lib/cli/generators/SFC_VUE/template/src/stories/Welcome.stories.js rename to lib/cli/generators/SFC_VUE/template/src/stories/0-Welcome.stories.js diff --git a/lib/cli/generators/SFC_VUE/template/src/stories/Button.stories.js b/lib/cli/generators/SFC_VUE/template/src/stories/1-Button.stories.js similarity index 100% rename from lib/cli/generators/SFC_VUE/template/src/stories/Button.stories.js rename to lib/cli/generators/SFC_VUE/template/src/stories/1-Button.stories.js diff --git a/lib/cli/generators/VUE/template/stories/Welcome.stories.js b/lib/cli/generators/VUE/template/stories/0-Welcome.stories.js similarity index 100% rename from lib/cli/generators/VUE/template/stories/Welcome.stories.js rename to lib/cli/generators/VUE/template/stories/0-Welcome.stories.js diff --git a/lib/cli/generators/VUE/template/stories/Button.stories.js b/lib/cli/generators/VUE/template/stories/1-Button.stories.js similarity index 100% rename from lib/cli/generators/VUE/template/stories/Button.stories.js rename to lib/cli/generators/VUE/template/stories/1-Button.stories.js diff --git a/lib/cli/generators/WEBPACK_REACT/template/stories/Welcome.stories.js b/lib/cli/generators/WEBPACK_REACT/template/stories/0-Welcome.stories.js similarity index 100% rename from lib/cli/generators/WEBPACK_REACT/template/stories/Welcome.stories.js rename to lib/cli/generators/WEBPACK_REACT/template/stories/0-Welcome.stories.js diff --git a/lib/cli/generators/WEBPACK_REACT/template/stories/Button.stories.js b/lib/cli/generators/WEBPACK_REACT/template/stories/1-Button.stories.js similarity index 100% rename from lib/cli/generators/WEBPACK_REACT/template/stories/Button.stories.js rename to lib/cli/generators/WEBPACK_REACT/template/stories/1-Button.stories.js diff --git a/lib/cli/lib/helpers.js b/lib/cli/lib/helpers.js index 6b0d67ee801..fe0b3a863c7 100644 --- a/lib/cli/lib/helpers.js +++ b/lib/cli/lib/helpers.js @@ -4,6 +4,7 @@ import fs from 'fs'; import chalk from 'chalk'; import { sync as spawnSync } from 'cross-spawn'; import { gt, satisfies } from 'semver'; +import stripJsonComments from 'strip-json-comments'; import latestVersion from './latest_version'; import { version, devDependencies } from '../package.json'; @@ -62,13 +63,14 @@ export function getBowerJson() { return JSON.parse(jsonContent); } -export function readFileAsJson(jsonPath) { +export function readFileAsJson(jsonPath, allowComments) { const filePath = path.resolve(jsonPath); if (!fs.existsSync(filePath)) { return false; } - const jsonContent = fs.readFileSync(filePath, 'utf8'); + const fileContent = fs.readFileSync(filePath, 'utf8'); + const jsonContent = allowComments ? stripJsonComments(fileContent) : fileContent; return JSON.parse(jsonContent); } diff --git a/lib/cli/lib/initiate.js b/lib/cli/lib/initiate.js index 26437136e30..a89ad6639f1 100644 --- a/lib/cli/lib/initiate.js +++ b/lib/cli/lib/initiate.js @@ -197,6 +197,7 @@ const installStorybook = (projectType, options) => { // Add a new line for the clear visibility. logger.log(); + // eslint-disable-next-line no-use-before-define return projectTypeInquirer(options); } }; diff --git a/lib/cli/package.json b/lib/cli/package.json index cf0125132a8..5c531bf6bb2 100644 --- a/lib/cli/package.json +++ b/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Storybook's CLI - easiest method of adding storybook to your projects", "keywords": [ "cli", @@ -18,6 +18,13 @@ }, "license": "MIT", "author": "Storybook Team", + "files": [ + "bin/**/*", + "docs/**/*", + "generators/**/*", + "lib/**/*", + "README.md" + ], "bin": { "getstorybook": "./bin/index.js", "sb": "./bin/index.js" @@ -29,7 +36,7 @@ "dependencies": { "@babel/core": "^7.4.5", "@babel/preset-env": "^7.4.5", - "@storybook/codemod": "5.2.0-beta.47", + "@storybook/codemod": "5.3.0-alpha.4", "chalk": "^2.4.1", "commander": "^2.19.0", "core-js": "^3.0.1", @@ -44,36 +51,37 @@ "pkg-add-deps": "^0.1.0", "semver": "^6.0.0", "shelljs": "^0.8.3", + "strip-json-comments": "^3.0.1", "update-notifier": "^3.0.0" }, "devDependencies": { - "@storybook/addon-actions": "5.2.0-beta.47", - "@storybook/addon-centered": "5.2.0-beta.47", - "@storybook/addon-graphql": "5.2.0-beta.47", - "@storybook/addon-info": "5.2.0-beta.47", - "@storybook/addon-knobs": "5.2.0-beta.47", - "@storybook/addon-links": "5.2.0-beta.47", - "@storybook/addon-notes": "5.2.0-beta.47", - "@storybook/addon-options": "5.2.0-beta.47", - "@storybook/addon-storyshots": "5.2.0-beta.47", - "@storybook/addons": "5.2.0-beta.47", - "@storybook/angular": "5.2.0-beta.47", - "@storybook/channel-postmessage": "5.2.0-beta.47", - "@storybook/channel-websocket": "5.2.0-beta.47", - "@storybook/channels": "5.2.0-beta.47", - "@storybook/ember": "5.2.0-beta.47", - "@storybook/html": "5.2.0-beta.47", - "@storybook/marko": "5.2.0-beta.47", - "@storybook/mithril": "5.2.0-beta.47", - "@storybook/polymer": "5.2.0-beta.47", - "@storybook/preact": "5.2.0-beta.47", - "@storybook/rax": "5.2.0-beta.47", - "@storybook/react": "5.2.0-beta.47", - "@storybook/react-native": "5.2.0-beta.47", - "@storybook/riot": "5.2.0-beta.47", - "@storybook/svelte": "5.2.0-beta.47", - "@storybook/ui": "5.2.0-beta.47", - "@storybook/vue": "5.2.0-beta.47" + "@storybook/addon-actions": "5.3.0-alpha.4", + "@storybook/addon-centered": "5.3.0-alpha.4", + "@storybook/addon-graphql": "5.3.0-alpha.4", + "@storybook/addon-info": "5.3.0-alpha.4", + "@storybook/addon-knobs": "5.3.0-alpha.4", + "@storybook/addon-links": "5.3.0-alpha.4", + "@storybook/addon-notes": "5.3.0-alpha.4", + "@storybook/addon-options": "5.3.0-alpha.4", + "@storybook/addon-storyshots": "5.3.0-alpha.4", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/angular": "5.3.0-alpha.4", + "@storybook/channel-postmessage": "5.3.0-alpha.4", + "@storybook/channel-websocket": "5.3.0-alpha.4", + "@storybook/channels": "5.3.0-alpha.4", + "@storybook/ember": "5.3.0-alpha.4", + "@storybook/html": "5.3.0-alpha.4", + "@storybook/marko": "5.3.0-alpha.4", + "@storybook/mithril": "5.3.0-alpha.4", + "@storybook/polymer": "5.3.0-alpha.4", + "@storybook/preact": "5.3.0-alpha.4", + "@storybook/rax": "5.3.0-alpha.4", + "@storybook/react": "5.3.0-alpha.4", + "@storybook/react-native": "5.3.0-alpha.4", + "@storybook/riot": "5.3.0-alpha.4", + "@storybook/svelte": "5.3.0-alpha.4", + "@storybook/ui": "5.3.0-alpha.4", + "@storybook/vue": "5.3.0-alpha.4" }, "publishConfig": { "access": "public" diff --git a/lib/cli/story.js b/lib/cli/story.js new file mode 100644 index 00000000000..2a64488eda1 --- /dev/null +++ b/lib/cli/story.js @@ -0,0 +1,10 @@ +export default { + title: 'Story', +}; + +export const startCase = () => 'foo'; +export const camelCase = () => 'foo'; + +camelCase.story = { + name: 'camelCase', +}; diff --git a/lib/cli/test/fixtures/angular-cli-v6/package.json b/lib/cli/test/fixtures/angular-cli-v6/package.json index edcdc384ae7..a19dfbbd17f 100644 --- a/lib/cli/test/fixtures/angular-cli-v6/package.json +++ b/lib/cli/test/fixtures/angular-cli-v6/package.json @@ -31,7 +31,7 @@ "@angular/language-service": "^6.1.0", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", - "@types/node": "~8.9.4", + "@types/node": "^12.0.8", "codelyzer": "~4.3.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", @@ -42,7 +42,7 @@ "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~7.0.0", - "tslint": "~5.11.0", - "typescript": "~2.9.2" + "tslint": "^5.14.0", + "typescript": "^3.4.0" } } diff --git a/lib/cli/test/fixtures/angular-cli-v7/angular.json b/lib/cli/test/fixtures/angular-cli-v7/angular.json index 37e7d11039d..5fb64a03ee6 100644 --- a/lib/cli/test/fixtures/angular-cli-v7/angular.json +++ b/lib/cli/test/fixtures/angular-cli-v7/angular.json @@ -1,4 +1,6 @@ { + /* angular.json can have comments */ + // angular.json can have comments "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", @@ -136,4 +138,4 @@ } }, "defaultProject": "angular-cli-v7" -} \ No newline at end of file +} diff --git a/lib/cli/test/fixtures/angular-cli-v7/package.json b/lib/cli/test/fixtures/angular-cli-v7/package.json index e316e54912f..0d181a69b94 100644 --- a/lib/cli/test/fixtures/angular-cli-v7/package.json +++ b/lib/cli/test/fixtures/angular-cli-v7/package.json @@ -31,7 +31,7 @@ "@angular/language-service": "~7.0.0", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", - "@types/node": "~8.9.4", + "@types/node": "^12.0.8", "codelyzer": "~4.3.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", @@ -42,7 +42,7 @@ "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~7.0.0", - "tslint": "~5.11.0", - "typescript": "~3.1.1" + "tslint": "^5.14.0", + "typescript": "^3.4.0" } } diff --git a/lib/cli/test/fixtures/angular-cli-v7/tsconfig.json b/lib/cli/test/fixtures/angular-cli-v7/tsconfig.json index 46aeded1b27..03ed6abbcf2 100644 --- a/lib/cli/test/fixtures/angular-cli-v7/tsconfig.json +++ b/lib/cli/test/fixtures/angular-cli-v7/tsconfig.json @@ -1,4 +1,6 @@ { + /* tsconfig.json can have comments */ + // tsconfig.json can have comments "compileOnSave": false, "compilerOptions": { "baseUrl": "./", diff --git a/lib/client-api/package.json b/lib/client-api/package.json index 3866513ad26..ef03a8b4509 100644 --- a/lib/client-api/package.json +++ b/lib/client-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-api", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "Storybook Client API", "keywords": [ "storybook" @@ -15,18 +15,22 @@ "directory": "lib/client-api" }, "license": "MIT", + "files": [ + "dist/**/*", + "README.md" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.47", - "@storybook/channel-postmessage": "5.2.0-beta.47", - "@storybook/channels": "5.2.0-beta.47", - "@storybook/client-logger": "5.2.0-beta.47", - "@storybook/core-events": "5.2.0-beta.47", - "@storybook/router": "5.2.0-beta.47", + "@storybook/addons": "5.3.0-alpha.4", + "@storybook/channel-postmessage": "5.3.0-alpha.4", + "@storybook/channels": "5.3.0-alpha.4", + "@storybook/client-logger": "5.3.0-alpha.4", + "@storybook/core-events": "5.3.0-alpha.4", + "@storybook/router": "5.3.0-alpha.4", "common-tags": "^1.8.0", "core-js": "^3.0.1", "eventemitter3": "^4.0.0", diff --git a/lib/client-api/src/hooks.test.js b/lib/client-api/src/hooks.test.js index 9a073616bbe..b28b2f2aab3 100644 --- a/lib/client-api/src/hooks.test.js +++ b/lib/client-api/src/hooks.test.js @@ -19,18 +19,32 @@ jest.mock('@storybook/client-logger', () => ({ logger: { warn: jest.fn(), log: jest.fn() }, })); +const SOME_EVENT = 'someEvent'; let mockChannel; let hooks; +let onSomeEvent; +let removeSomeEventListener; beforeEach(() => { + onSomeEvent = jest.fn(); + removeSomeEventListener = jest.fn(); mockChannel = { emit: jest.fn(), - on: jest.fn(), - once: (event, callback) => { - if (event === STORY_RENDERED) { - callback(); + on(event, callback) { + switch (event) { + case STORY_RENDERED: + callback(); + break; + case SOME_EVENT: + onSomeEvent(event, callback); + break; + default: + } + }, + removeListener(event, callback) { + if (event === SOME_EVENT) { + removeSomeEventListener(event, callback); } }, - removeListener: jest.fn(), }; hooks = new HooksContext(); addons.setChannel(mockChannel); @@ -166,28 +180,28 @@ describe('Preview hooks', () => { run(() => {}, [ storyFn => { useChannel({ - SOME_EVENT: handler, + [SOME_EVENT]: handler, }); return storyFn(); }, ]); - expect(mockChannel.on).toHaveBeenCalledTimes(1); - expect(mockChannel.removeListener).toHaveBeenCalledTimes(0); + expect(onSomeEvent).toHaveBeenCalledTimes(1); + expect(removeSomeEventListener).toHaveBeenCalledTimes(0); }); it('calls .removeListener when removing the decorator', () => { const handler = () => {}; run(() => {}, [ storyFn => { useChannel({ - SOME_EVENT: handler, + [SOME_EVENT]: handler, }); return storyFn(); }, ]); - expect(mockChannel.on).toHaveBeenCalledTimes(1); - expect(mockChannel.removeListener).toHaveBeenCalledTimes(0); + expect(onSomeEvent).toHaveBeenCalledTimes(1); + expect(removeSomeEventListener).toHaveBeenCalledTimes(0); run(() => {}); - expect(mockChannel.removeListener).toHaveBeenCalledTimes(1); + expect(removeSomeEventListener).toHaveBeenCalledTimes(1); }); }); describe('useStoryContext', () => { diff --git a/lib/client-logger/package.json b/lib/client-logger/package.json index 90fddbdd227..b1db0b666c4 100644 --- a/lib/client-logger/package.json +++ b/lib/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "", "keywords": [ "storybook" @@ -15,6 +15,10 @@ "directory": "lib/client-logger" }, "license": "MIT", + "files": [ + "dist/**/*", + "README.md" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { diff --git a/lib/codemod/package.json b/lib/codemod/package.json index 63b2e7b735c..975d620b9e9 100644 --- a/lib/codemod/package.json +++ b/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "5.2.0-beta.47", + "version": "5.3.0-alpha.4", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" @@ -15,6 +15,10 @@ "directory": "lib/codemod" }, "license": "MIT", + "files": [ + "dist/**/*", + "README.md" + ], "main": "dist/index.js", "jsnext:main": "src/index.js", "scripts": { @@ -22,7 +26,8 @@ }, "dependencies": { "@mdx-js/mdx": "^1.0.0", - "@storybook/node-logger": "5.2.0-beta.47", + "@storybook/node-logger": "5.3.0-alpha.4", + "@storybook/router": "5.3.0-alpha.4", "core-js": "^3.0.1", "cross-spawn": "^6.0.5", "globby": "^10.0.1", diff --git a/lib/codemod/src/lib/utils.js b/lib/codemod/src/lib/utils.js index 822774440a2..4d782569a21 100644 --- a/lib/codemod/src/lib/utils.js +++ b/lib/codemod/src/lib/utils.js @@ -9,5 +9,9 @@ export const sanitizeName = name => { if (isReserved(key)) { key = `${key}Story`; } + // 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/basic.input.js b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/basic.input.js index 459203a0429..17c8f6abc1a 100644 --- a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/basic.input.js +++ b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/basic.input.js @@ -14,4 +14,5 @@ storiesOf('Button', module)
)) - .add('w/punctuation', () => ; +const buttonHookFn = () => { + const [count, setCount] = React.useState(0); + return ( + + ); +}; + export const inline = () => ; export const error = () => ; + +export const reactHook = () => ; diff --git a/lib/components/src/blocks/Story.tsx b/lib/components/src/blocks/Story.tsx index c322bda8dc1..c098d043554 100644 --- a/lib/components/src/blocks/Story.tsx +++ b/lib/components/src/blocks/Story.tsx @@ -1,5 +1,4 @@ import React from 'react'; - import { IFrame } from './IFrame'; import { EmptyBlock } from './EmptyBlock'; import { ZoomContext } from './ZoomContext'; @@ -10,6 +9,12 @@ export enum StoryError { NO_STORY = 'No component or story to display', } +/** error message for Story with null storyFn + * if the story id exists, it must be pointing to a non-existing story + * if there is assigned story id, the story must be empty + */ +const MISSING_STORY = (id?: string) => (id ? `Story "${id}" doesn't exist.` : StoryError.NO_STORY); + interface CommonProps { title: string; height?: string; @@ -17,7 +22,7 @@ interface CommonProps { } type InlineStoryProps = { - storyFn: () => React.ElementType; + storyFn: React.ElementType; } & CommonProps; type IFrameStoryProps = CommonProps; @@ -48,10 +53,14 @@ const InlineZoomWrapper: React.FC<{ scale: number }> = ({ scale, children }) => ); }; -const InlineStory: React.FunctionComponent = ({ id, storyFn, height }) => ( +const InlineStory: React.FunctionComponent = ({ storyFn, height, id }) => (
- {({ scale }) => {storyFn()}} + {({ scale }) => ( + + {storyFn ? React.createElement(storyFn) : {MISSING_STORY(id)}} + + )}
); @@ -67,7 +76,7 @@ const IFrameStory: React.FunctionComponent = ({ return (