diff --git a/.circleci/config.yml b/.circleci/config.yml index fcef34d0d0a8..389a649622dc 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -1,14 +1,11 @@ -version: 2 +version: 2.1 aliases: - &defaults working_directory: /tmp/storybook docker: - - image: circleci/node:8 + - image: circleci/node:10 -dependencies: - pre: - - yarn global add npm jobs: build: <<: *defaults @@ -17,7 +14,7 @@ jobs: - restore_cache: name: Restore core dependencies cache keys: - - core-dependencies-v3-{{ checksum "yarn.lock" }} + - core-dependencies-v4-{{ checksum "yarn.lock" }} - run: name: Install dependencies command: yarn install @@ -29,9 +26,11 @@ jobs: command: yarn bootstrap --core - save_cache: name: Cache core dependencies - key: core-dependencies-v3-{{ checksum "yarn.lock" }} + key: core-dependencies-v4-{{ checksum "yarn.lock" }} paths: - - ~/.cache/yarn + - ~/.cache + - node_modules + - /root/.cache - persist_to_workspace: root: . paths: @@ -49,7 +48,7 @@ jobs: at: . - run: name: Run chromatic on the pre-built storybook - command: yarn chromatic -- -d ./storybook-static + command: yarn chromatic packtracker: <<: *defaults steps: @@ -63,97 +62,50 @@ jobs: yarn packtracker examples: <<: *defaults + parallelism: 4 steps: - checkout - attach_workspace: at: . - run: - name: Workaround for https://github.com/GoogleChrome/puppeteer/issues/290 - command: sh ./scripts/workaround-puppeteer-issue-290.sh - - run: - name: Build react kitchen-sink - command: | - cd examples/cra-kitchen-sink - yarn build-storybook - - run: - name: Build react typescript kitchen-sink - command: | - cd examples/cra-ts-kitchen-sink - yarn build-storybook - - run: - name: Build vue kitchen-sink - command: | - cd examples/vue-kitchen-sink - yarn build-storybook - - run: - name: Build svelte kitchen-sink - command: | - cd examples/svelte-kitchen-sink - yarn build-storybook - - run: - name: Build angular-cli - command: | - cd examples/angular-cli - yarn build-storybook - - run: - name: Build ember-cli - command: | - cd examples/ember-cli - yarn build-storybook - - run: - name: Build polymer-cli - command: | - cd examples/polymer-cli - yarn build-storybook - - run: - name: Build marko-cli - command: | - cd examples/marko-cli - yarn build-storybook - - run: - name: Build mithril kitchen-sink - command: | - cd examples/mithril-kitchen-sink - yarn build-storybook - - run: - name: Build html kitchen-sink - command: | - cd examples/html-kitchen-sink - yarn build-storybook - - run: - name: Build riot kitchen-sink - command: | - cd examples/riot-kitchen-sink - yarn build-storybook - - run: - name: Build preact kitchen-sink - command: | - cd examples/preact-kitchen-sink - yarn build-storybook - - run: - name: Build cra react15 + name: examples command: | - cd examples/cra-react15 - yarn build-storybook - - run: - name: Build official-storybook - command: | - cd examples/official-storybook - yarn build-storybook - # - run: - # name: Run image snapshots - # command: yarn test --image - - store_artifacts: - path: examples/official-storybook/image-snapshots/__image_snapshots__ - destination: official_storybook_image_snapshots + yarn build-storybooks - persist_to_workspace: root: . paths: + - built-storybooks + e2e: + working_directory: /tmp/storybook + docker: + - image: cypress/base:8 + environment: + TERM: xterm + steps: + - checkout + - attach_workspace: + at: . + - run: + name: install cypress + command: yarn cypress install + - save_cache: + name: Cache core dependencies + key: core-dependencies-v4-{{ checksum "yarn.lock" }} + paths: + - ~/.cache - node_modules - - examples - - addons - - app - - lib + - /root/.cache + - run: + name: running example + command: yarn serve-storybooks + background: true + - run: + name: await running examples + command: yarn await-serve-storybooks + - run: + name: cypress run + command: yarn cypress run + smoke-tests: <<: *defaults steps: @@ -250,18 +202,13 @@ jobs: - restore_cache: name: Restore core dependencies cache keys: - - core-dependencies-v3-{{ checksum "yarn.lock" }} + - core-dependencies-v4-{{ checksum "yarn.lock" }} - run: name: Install dependencies - command: yarn install + command: yarn bootstrap --install - run: name: Trigger build command: ./scripts/build-frontpage.js - - save_cache: - name: Cache core dependencies - key: core-dependencies-v3-{{ checksum "yarn.lock" }} - paths: - - ~/.cache/yarn docs: <<: *defaults steps: @@ -284,12 +231,7 @@ jobs: name: Cache docs dependencies key: docs-dependencies-v2-{{ checksum "docs/yarn.lock" }} paths: - - ~/.cache/yarn - - persist_to_workspace: - root: . - paths: - - docs/public - - docs/node_modules + - ~/.cache lint: <<: *defaults steps: @@ -322,19 +264,18 @@ jobs: name: Upload coverage command: yarn coverage workflows: - version: 2 - build_test_deploy: + test: jobs: - build - - docs - - frontpage - lint: requires: - - docs - build - examples: requires: - build + - e2e: + requires: + - examples - smoke-tests: requires: - build @@ -353,3 +294,7 @@ workflows: - chromatic: requires: - examples + deploy: + jobs: + - docs + - frontpage diff --git a/.eslintignore b/.eslintignore index 4c73fd8d7a07..327dee03ec47 100644 --- a/.eslintignore +++ b/.eslintignore @@ -12,6 +12,8 @@ scripts/storage *.bundle.js *.js.map *.d.ts +examples/ember-cli/.storybook/preview-head.html +examples/official-storybook/tests/addon-jest.test.js !.remarkrc.js !.babelrc.js diff --git a/.eslintrc.js b/.eslintrc.js index 3cdb41d2dc9c..37080fa43ba5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,161 +1,44 @@ -const error = 2; -const warn = 1; const ignore = 0; +// const warn = 1; +const error = 2; 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'], - }, + extends: ['@storybook/eslint-config-storybook'], 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'], - }, + 'never', + { ignorePackages: true, md: 'always', svg: 'always', json: 'always', tag: 'always' }, ], - 'no-underscore-dangle': [ + 'import/no-unresolved': [error, { ignore: ['@storybook'] }], + 'react/state-in-constructor': ignore, + 'react/static-property-placement': ignore, + 'react/jsx-props-no-spreading': ignore, + 'react/jsx-fragments': ignore, + '@typescript-eslint/ban-ts-ignore': ignore, + '@typescript-eslint/no-object-literal-type-assertion': ignore, + 'react/sort-comp': [ error, { - allow: [ - '__STORYBOOK_CLIENT_API__', - '__STORYBOOK_ADDONS_CHANNEL__', - '__STORYBOOK_STORY_STORE__', + order: [ + 'staticLifecycle', + 'static-methods', + 'instance-variables', + 'lifecycle', + '/^on.+$/', + '/^(get|set)(?!(DerivedStateFromProps|SnapshotBeforeUpdate$)).+$/', + 'instance-methods', + 'instance-variables', + 'everything-else', + 'render', ], + groups: { + staticLifecycle: ['displayName', 'propTypes', 'defaultProps', 'getDerivedStateFromProps'], + }, }, ], - '@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 + 'max-classes-per-file': ignore, }, overrides: [ { @@ -168,6 +51,7 @@ module.exports = { 'docs/src/stories/**', ], rules: { + '@typescript-eslint/no-empty-function': ignore, 'import/no-extraneous-dependencies': ignore, }, }, diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml deleted file mode 100644 index 6c6784258e82..000000000000 --- a/.github/workflows/nodejs.yml +++ /dev/null @@ -1,24 +0,0 @@ -name: Github CI - -on: [push] - -jobs: - build: - - name: Test on node ${{ matrix.node_version }} and ${{ matrix.os }} - runs-on: ${{ matrix.os }} - strategy: - matrix: - node-version: [10] - os: [ubuntu-latest] - - steps: - - uses: actions/checkout@v1 - - name: Use Node.js ${{ matrix.node_version }} - uses: actions/setup-node@v1 - with: - version: ${{ matrix.node_version }} - - name: install, build, and test - run: | - yarn bootstrap --core - yarn test --core diff --git a/.github/workflows/tests-cli.yml b/.github/workflows/tests-cli.yml new file mode 100644 index 000000000000..3dbc20960faf --- /dev/null +++ b/.github/workflows/tests-cli.yml @@ -0,0 +1,40 @@ +name: CLI tests + +on: + push + # push: +# disabled for now: +# https://github.community/t5/GitHub-Actions/Preserve-status-from-previous-action-run/m-p/33821#M1661 +# paths: +# - 'lib/**' +# - 'app/**' + +jobs: + cli: + name: CLI Fixtures + runs-on: ubuntu-latest + steps: + - uses: actions/setup-node@v1 + with: + node-version: '10.x' + - uses: actions/checkout@v1 + - name: install, bootstrap + run: | + yarn bootstrap --core + - name: cli + run: | + yarn test --cli + latest-cra: + name: Latest CRA + runs-on: ubuntu-latest + steps: + - uses: actions/setup-node@v1 + with: + node-version: '10.x' + - uses: actions/checkout@v1 + - name: install, bootstrap + run: | + yarn bootstrap --core + - name: latest-cra + run: | + yarn test-latest-cra \ No newline at end of file diff --git a/.github/workflows/tests-unit.yml b/.github/workflows/tests-unit.yml new file mode 100644 index 000000000000..26e640026d7f --- /dev/null +++ b/.github/workflows/tests-unit.yml @@ -0,0 +1,20 @@ +name: Unit tests + +on: [push] + +jobs: + build: + + name: Test on node ${{ matrix.node_version }} and ${{ matrix.os }} + runs-on: ${{ matrix.os }} + steps: + - uses: actions/checkout@v1 + - uses: actions/setup-node@v1 + with: + node-version: '10.x' + - name: install, bootstrap + run: | + yarn bootstrap --core + - name: test + run: | + yarn test --core diff --git a/.gitignore b/.gitignore index 124238c64b88..48f61b11955e 100644 --- a/.gitignore +++ b/.gitignore @@ -32,3 +32,5 @@ htpasswd storybook-out /addons/docs/common/config-* built-storybooks +cypress/videos +cypress/screenshots diff --git a/.remarkrc.js b/.remarkrc.js index 2c78f5c67277..f8250d11d53a 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 f9a3e73708a3..1ad8e6e3b057 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,17 +1,14 @@ language: node_js node_js: - - "8" + - "10" -cache: - yarn: true - -install: - - yarn install - - yarn bootstrap --core +# install: + # - yarn install + # - yarn bootstrap --core script: jobs: include: - - script: travis_wait 30 yarn test --cli - - script: travis_wait 30 yarn test-latest-cra \ No newline at end of file + - script: echo "placeholder task" + name: "Placeholder task" diff --git a/CHANGELOG.md b/CHANGELOG.md index 18ba6a7251c2..79d3ed1b2339 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,256 @@ +## 5.3.0-alpha.22 (October 18, 2019) + +### Features + +* CLI: Add component meta to framework templates ([#8462](https://github.com/storybookjs/storybook/pull/8462)) + +### Maintenance + +* Build: Add cypress to Storybook CI ([#8397](https://github.com/storybookjs/storybook/pull/8397)) +* Incorrect minimal required node version ([#8427](https://github.com/storybookjs/storybook/pull/8427)) + +## 5.3.0-alpha.21 (October 17, 2019) + +### Features + +* CLI: React-scripts TS template & test ([#8451](https://github.com/storybookjs/storybook/pull/8451)) +* Addon-storysource: Add preset ([#8437](https://github.com/storybookjs/storybook/pull/8437)) + +### Bug Fixes + +* UI: Fix React15 support ([#8454](https://github.com/storybookjs/storybook/pull/8454)) +* Addon-centered: Fix zoom issues for non-Firefox browsers ([#8442](https://github.com/storybookjs/storybook/pull/8442)) +* CLI: Add CRA preset to MDX template ([#8452](https://github.com/storybookjs/storybook/pull/8452)) +* CLI: Add preset-create-react-app to CRA presets template ([#8449](https://github.com/storybookjs/storybook/pull/8449)) +* CLI: Fix CRA-ts fixture package name ([#8457](https://github.com/storybookjs/storybook/pull/8457)) + +## 5.3.0-alpha.20 (October 15, 2019) + +### Features + +* Addon-docs: Support MDX source in Preview w/ no Story blocks ([#7966](https://github.com/storybookjs/storybook/pull/7966)) + +### Bug Fixes + +* Addon-docs: Fix react inline stories ([#8419](https://github.com/storybookjs/storybook/pull/8419)) +* React: Fix custom themes breaking welcome demo ([#8259](https://github.com/storybookjs/storybook/pull/8259)) + +## 5.3.0-alpha.19 (October 15, 2019) + +### Features + +* React: Move Create React App support to external preset ([#8416](https://github.com/storybookjs/storybook/pull/8416)) +* CLI: MDX template support ([#8396](https://github.com/storybookjs/storybook/pull/8396)) + +### Bug Fixes + +* Addon-jest: Make withTests type generic ([#8410](https://github.com/storybookjs/storybook/pull/8410)) +* Addon-docs: Don't error in React when there's no `prepareForInline` ([#8415](https://github.com/storybookjs/storybook/pull/8415)) + +### Dependency Upgrades + +* [Security] Bump lodash from 4.17.11 to 4.17.15 ([#8351](https://github.com/storybookjs/storybook/pull/8351)) + +## 5.3.0-alpha.18 (October 14, 2019) + +### Bug Fixes + +* CSF: Warn when CSF and `storiesOf` mixed in one file ([#8411](https://github.com/storybookjs/storybook/pull/8411)) +* Addon API: Clean preview hooks when removing a story ([#8408](https://github.com/storybookjs/storybook/pull/8408)) +* Addon-docs: Fix typo in default config ([#8403](https://github.com/storybookjs/storybook/pull/8403)) +* Angular: Fix angular2-template-loader / raw-loader version conflicts ([#8269](https://github.com/storybookjs/storybook/pull/8269)) +* CLI: Update button.svelte template ([#8369](https://github.com/storybookjs/storybook/pull/8369)) + +### Maintenance + +* Official-storybook: Add a story with duplicate decorators ([#8407](https://github.com/storybookjs/storybook/pull/8407)) + +## 5.2.4 (October 14, 2019) + +### Bug Fixes + +* Angular: Fix angular2-template-loader / raw-loader version conflicts ([#8269](https://github.com/storybookjs/storybook/pull/8269)) +* CSF: Warn when CSF and `storiesOf` mixed in one file ([#8411](https://github.com/storybookjs/storybook/pull/8411)) +* Addon API: Clean preview hooks when removing a story ([#8408](https://github.com/storybookjs/storybook/pull/8408)) +* Update button.svelte ([#8369](https://github.com/storybookjs/storybook/pull/8369)) +* CSF: Ignore __esModule export ([#8317](https://github.com/storybookjs/storybook/pull/8317)) + +### Maintenance + +* Publish top-level .js and .d.ts files ([#8354](https://github.com/storybookjs/storybook/pull/8354)) + +## 5.3.0-alpha.17 (October 10, 2019) + +### Maintenance + +* Publish top-level .js and .d.ts files ([#8354](https://github.com/storybookjs/storybook/pull/8354)) + +## 5.3.0-alpha.16 (October 10, 2019) + +Publish failed + +## 5.3.0-alpha.15 (October 8, 2019) + +### Features + +* Addon-docs: support vue inline rendering ([#7929](https://github.com/storybookjs/storybook/pull/7929)) + +### Maintenance + +* Typescript: Migrate addon-storyshots ([#7674](https://github.com/storybookjs/storybook/pull/7674)) + +## 5.3.0-alpha.14 (October 8, 2019) + +NPM publish failed + +## 5.3.0-alpha.13 (October 8, 2019) + +### Features + +* MDX: Better ergonomics for documenting CSF ([#8312](https://github.com/storybookjs/storybook/pull/8312)) +* Addon-docs: Story parameter for disabling docs ([#8313](https://github.com/storybookjs/storybook/pull/8313)) + +### Dependency Upgrades + +* Remove redundant dependency on hoist-non-react-statics (#6349) ([#8310](https://github.com/storybookjs/storybook/pull/8310)) + +## 5.3.0-alpha.12 (October 7, 2019) + +### Features + +* CSF: Allow multiple CSF with same title ([#8133](https://github.com/storybookjs/storybook/pull/8133)) + +### Bug Fixes + +* CSF: Ignore __esModule export ([#8317](https://github.com/storybookjs/storybook/pull/8317)) +* React: Improve type of storyFn ([#8197](https://github.com/storybookjs/storybook/pull/8197)) + +## 5.2.3 (October 7, 2019) + +### Bug Fixes + +* Core: Fix lib/core whitelist ([#8182](https://github.com/storybookjs/storybook/pull/8182)) + +## 5.2.2 (October 7, 2019) + +### Bug Fixes + +* Storyshots: First-class CSF support ([#8000](https://github.com/storybookjs/storybook/pull/8000)) +* UI: Move addon dependencies to devDependencies ([#8206](https://github.com/storybookjs/storybook/pull/8206)) +* 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)) +* Addon-knobs: Add missing type def #8105 ([#8118](https://github.com/storybookjs/storybook/pull/8118)) +* Dependencies: add @types/webpack-env to apps that depend on it ([#8119](https://github.com/storybookjs/storybook/pull/8119)) +* Core: Show exception rather than error on react error boundary ([#8100](https://github.com/storybookjs/storybook/pull/8100)) +* UI: Fix inline code styling for dark theme ([#8260](https://github.com/storybookjs/storybook/pull/8260)) +* Addon-ondevice-notes: Validate the state content ([#8261](https://github.com/storybookjs/storybook/pull/8261)) +* Telejson: New version with typings and bugfixes ([#8228](https://github.com/storybookjs/storybook/pull/8228)) +* React: Add DecoratorFn type to exports ([#8121](https://github.com/storybookjs/storybook/pull/8121)) +* Addon-knobs: Handle undefined array value ([#8006](https://github.com/storybookjs/storybook/pull/8006)) +* Preact: Allow JSX.Element story ([#8159](https://github.com/storybookjs/storybook/pull/8159)) +* Storyshots: Fix STORYBOOK_HOOKS_CONTEXT error ([#8163](https://github.com/storybookjs/storybook/pull/8163)) +* Update react-draggable to 4.0.3 ([#8145](https://github.com/storybookjs/storybook/pull/8145)) + +## 5.3.0-alpha.11 (October 6, 2019) + +### Bug Fixes + +* Storyshots: Update `read-pkg-up` usage to work with version `7` ([#8299](https://github.com/storybookjs/storybook/pull/8299)) + +### Maintenance + +* Remove `weak` dependency Node 12 ([#8300](https://github.com/storybookjs/storybook/pull/8300)) + +## 5.3.0-alpha.10 (October 5, 2019) + +### Bug Fixes + +* Storyshots: First-class CSF support ([#8000](https://github.com/storybookjs/storybook/pull/8000)) + +### Maintenance + +* Build: Add CLI test in github actions ([#8064](https://github.com/storybookjs/storybook/pull/8064)) + +## 5.3.0-alpha.9 (October 4, 2019) + +### Features + +* API: Add method to set manager config ([#8232](https://github.com/storybookjs/storybook/pull/8232)) + +### Bug Fixes + +* Core: Show exception rather than error on react error boundary ([#8100](https://github.com/storybookjs/storybook/pull/8100)) +* Addon-knobs: Fix issues caused by rerenders ([#8287](https://github.com/storybookjs/storybook/pull/8287)) + +### Maintenance + +* Fix local `yarn lint` ([#8289](https://github.com/storybookjs/storybook/pull/8289)) +* Fix button knob story ([#8282](https://github.com/storybookjs/storybook/pull/8282)) +* Official examples: apply babel-preset-minify only in production mode ([#8283](https://github.com/storybookjs/storybook/pull/8283)) +* Build: Upgrade chromatic to test ([#8246](https://github.com/storybookjs/storybook/pull/8246)) + +### Dependency Upgrades + +* Upgrade regenerator-runtime to 0.13 in all packages ([#8258](https://github.com/storybookjs/storybook/pull/8258)) +* Misc upgrades ([#8280](https://github.com/storybookjs/storybook/pull/8280)) + +## 5.3.0-alpha.9 (October 4, 2019) + +NPM publish failed + +## 5.3.0-alpha.7 (October 2, 2019) + +### Features + +* UI: Preferred color scheme awareness ([#8271](https://github.com/storybookjs/storybook/pull/8271)) + +### Bug Fixes + +* UI: Fix inline code styling for dark theme ([#8260](https://github.com/storybookjs/storybook/pull/8260)) + +### Maintenance + +* Regenerate lockfile ([#8263](https://github.com/storybookjs/storybook/pull/8263)) + +## 5.3.0-alpha.6 (October 1, 2019) + +### Bug Fixes + +* Addon-ondevice-notes: Validate the state content ([#8261](https://github.com/storybookjs/storybook/pull/8261)) +* API: Fix require cycles in addons hooks ([#8236](https://github.com/storybookjs/storybook/pull/8236)) +* API: Fix missing `channel.off` ([#8234](https://github.com/storybookjs/storybook/pull/8234)) +* Telejson: New version with typings and bugfixes ([#8228](https://github.com/storybookjs/storybook/pull/8228)) +* Addon-links: Update linkTo type to accept function ([#8117](https://github.com/storybookjs/storybook/pull/8117)) +* React: Add DecoratorFn type to exports ([#8121](https://github.com/storybookjs/storybook/pull/8121)) + +### Maintenance + +* Update angular example to v8 ([#7747](https://github.com/storybookjs/storybook/pull/7747)) +* Hitting some flakiness in now deploys, this might help ([#8200](https://github.com/storybookjs/storybook/pull/8200)) +* Remov hooks from extracted StoryItem ([#8256](https://github.com/storybookjs/storybook/pull/8256)) + +### Dependency Upgrades + +* Bump react-native-swipe-gestures to 1.0.4 ([#8235](https://github.com/storybookjs/storybook/pull/8235)) + +## 5.3.0-alpha.5 (September 27, 2019) + +### Maintenance + +* UI: Improve code indentation ([#8218](https://github.com/storybookjs/storybook/pull/8218)) +* Use the extracted linting configs ([#8213](https://github.com/storybookjs/storybook/pull/8213)) + +## 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 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a084900bab8e..638e1aade6f2 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -175,7 +175,7 @@ So the way our script works is that it: Our script leaves the local registry running, for **as long as you keep it running** you can install storybook packages from this local registry. - Navigate to your own project and then change `package.json` so the storybook packages match the version of the one you just published. -- Then just do the normal install procedure using `yarn` or `npm` +- Then you can install using `yarn` or `npm` - Start using your storybook as normally. If you've made a change to storybook's codebase and would want this change to be reflected in your app: @@ -229,7 +229,7 @@ We use the following label scheme to categorize issues: All issues should have a `type` label. `bug`/`feature`/`question`/`discussion` are self-explanatory. `dependencies` is for keeping package dependencies up to date. `maintenance` is a catch-all for any kind of cleanup or refactoring. -They should also have one or more `area`/`status` labels. We use these labels to filter issues down so we can easily see all of the issues for a particular area, and keep the total number of open issues under control. +They should also have one or more `area`/`status` labels. We use these labels to filter issues down so we can see all of the issues for a particular area, and keep the total number of open issues under control. For example, here is the list of [open, untyped issues](https://github.com/storybookjs/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20-label%3A%22bug%22%20-label%3A%22discussion%22%20-label%3A%22feature%22%20-label%3A%22maintenance%22%20-label%3A%22question%20%2F%20support%22%20-label%3A%22documentation%22%20-label%3A%22greenkeeper%22), or here is a list of [bugs that have not been modified since 2017-04-01](https://github.com/storybookjs/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3A%22bug%22%20updated%3A%3C%3D2017-04-01%20). For more info see [searching issues](https://help.github.com/articles/searching-issues/) in the Github docs. @@ -299,7 +299,7 @@ Storybook is broken up into sub-projects that you can install as you need them. #### Connecting Your App To Storybook -**_Note:_** If you aren't seeing addons after linking storybook, you probably have a versioning issue which can be fixed by simply linking each addon you want to use. +**_Note:_** If you aren't seeing addons after linking storybook, you probably have a versioning issue which can be fixed by linking each addon you want to use. This applies for the kitchen sink apps as well as your own projects. _Make sure `yarn dev` is running_ diff --git a/MIGRATION.md b/MIGRATION.md index dbfea23fede6..329e93025f85 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,6 +1,8 @@ # Migration - [Migration](#migration) + - [From version 5.2.x to 5.3.x](#from-version-52x-to-53x) + - [Create React App preset](#create-react-app-preset) - [From version 5.1.x to 5.2.x](#from-version-51x-to-52x) - [Source-loader](#source-loader) - [Default viewports](#default-viewports) @@ -67,6 +69,14 @@ - [Packages renaming](#packages-renaming) - [Deprecated embedded addons](#deprecated-embedded-addons) +## From version 5.2.x to 5.3.x + +### Create React App preset + +You can now move to the new preset for [Create React App](https://create-react-app.dev/). The in-built preset for Create React App will be disabled in Storybook 6.0. + +Simply install [`@storybook/preset-create-react-app`](https://github.com/storybookjs/presets/tree/master/packages/preset-create-react-app) and it will be used automatically. + ## From version 5.1.x to 5.2.x ### Source-loader @@ -77,7 +87,7 @@ Addon-storysource contains a loader, `@storybook/addon-storysource/loader`, whic @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`. +To upgrade to `@storybook/source-loader`, run `npm install -D @storybook/source-loader` (or use `yarn`), and replace every instance of `@storybook/addon-storysource/loader` with `@storybook/source-loader`. ### Default viewports @@ -139,7 +149,7 @@ Storybook 5.1 contains a major overhaul of `@storybook/react-native` as compared In addition, both packages share more code with the rest of Storybook, which will reduce bugs and increase compatibility (e.g. with the latest versions of babel, etc.). -As a user with an existing 4.1.x RN setup, no migration should be necessary to your RN app. Simply upgrading the library should be enough. +As a user with an existing 4.1.x RN setup, no migration should be necessary to your RN app. Upgrading the library should be enough. If you wish to run the optional web server, you will need to do the following migration: @@ -284,7 +294,7 @@ In 5.0, we now provide recommended defaults: This means if you use the characters { `|`, `/`, `.` } in your story kinds it will triggger the story hierarchy to appear. For example `storiesOf('UI|Widgets/Basics/Button')` will create a story root called `UI` containing a `Widgets/Basics` group, containing a `Button` component. -If you wish to opt-out of this new behavior and restore the flat UI, simply set them back to `null` in your storybook config, or remove { `|`, `/`, `.` } from your story kinds: +If you wish to opt-out of this new behavior and restore the flat UI, set them back to `null` in your storybook config, or remove { `|`, `/`, `.` } from your story kinds: ```js addParameters({ @@ -655,7 +665,7 @@ Storybook now uses Babel 7. There's a couple of cases when it can break with you If you are using `create-react-app` (aka CRA), you may need to do some manual steps to upgrade, depending on the setup. - `create-react-app@1` may require manual migrations. - - If you're adding storybook for the first time, it should just work: `sb init` should add the correct dependencies. + - If you're adding storybook for the first time: `sb init` should add the correct dependencies. - If you're upgrading an existing project, your `package.json` probably already uses Babel 6, making it incompatible with `@storybook/react@4` which uses Babel 7. There are two ways to make it compatible, each of which is spelled out in detail in the next section: - Upgrade to Babel 7 if you are not dependent on Babel 6-specific features. - Migrate Babel 6 if you're heavily dependent on some Babel 6-specific features). @@ -674,7 +684,7 @@ yarn add @babel/core babel-loader --dev yarn add babel-loader@7 ``` -Also, make sure you have a `.babelrc` in your project directory. You probably already do if you are using Babel 6 features (otherwise you should consider upgrading to Babel 7 instead). If you don't have one, here's a simple one that works: +Also, make sure you have a `.babelrc` in your project directory. You probably already do if you are using Babel 6 features (otherwise you should consider upgrading to Babel 7 instead). If you don't have one, here's one that works: ```json { @@ -718,7 +728,7 @@ storiesOf('My component', module) This example applies notes globally to all stories. You can apply it locally with `storiesOf(...).addDecorator(withNotes)`. -The story parameters correspond directly to the old withX arguments, so it's easy to migrate your code. See the parameters documentation for the packages that have been upgraded: +The story parameters correspond directly to the old withX arguments, so it's less demanding to migrate your code. See the parameters documentation for the packages that have been upgraded: - [Notes](https://github.com/storybookjs/storybook/blob/master/addons/notes/README.md) - [Jest](https://github.com/storybookjs/storybook/blob/master/addons/jest/README.md) @@ -748,11 +758,11 @@ This was done to support different major versions of babel. ### Base webpack config now contains vital plugins ([#1775](https://github.com/storybookjs/storybook/pull/1775)) -This affects you if you use custom webpack config in [Full Control Mode](https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode) while not preserving the plugins from `storybookBaseConfig`. Before `3.3`, preserving them was just a recommendation, but now it [became](https://github.com/storybookjs/storybook/pull/2578) a requirement. +This affects you if you use custom webpack config in [Full Control Mode](https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode) while not preserving the plugins from `storybookBaseConfig`. Before `3.3`, preserving them was a recommendation, but now it [became](https://github.com/storybookjs/storybook/pull/2578) a requirement. ### Refactored Knobs -Knobs users: there was a bug in 3.2.x where using the knobs addon imported all framework runtimes (e.g. React and Vue). To fix the problem, we [refactored knobs](https://github.com/storybookjs/storybook/pull/1832). Switching to the new style is easy: +Knobs users: there was a bug in 3.2.x where using the knobs addon imported all framework runtimes (e.g. React and Vue). To fix the problem, we [refactored knobs](https://github.com/storybookjs/storybook/pull/1832). Switching to the new style is only takes one line of code. In the case of React or React-Native, import knobs like this: @@ -879,7 +889,7 @@ The new package names are: | `@kadira/storybook-addon-graphql` | `@storybook/addon-graphql` | | `@kadira/react-storybook-decorator-centered` | `@storybook/addon-centered` | -If your codebase is small, it's probably doable to just replace them by hand. (in your codebase and in `package.json`). +If your codebase is small, it's probably doable to replace them by hand (in your codebase and in `package.json`). But if you have a lot of occurrences in your codebase, you can use a [codemod we created](./lib/codemod) for you. @@ -893,7 +903,7 @@ You have to change your `package.json`, prune old and install new dependencies b We used to ship 2 addons with every single installation of storybook: `actions` and `links`. But in practice not everyone is using them, so we decided to deprecate this and in the future, they will be completely removed. If you use `@storybook/react/addons` you will get a deprecation warning. -If you **are** using these addons, migrating is simple: +If you **are** using these addons, it takes two steps to migrate: - add the addons you use to your `package.json`. - update your code: diff --git a/README.md b/README.md index df4d1f1623fb..6b44d241b354 100644 --- a/README.md +++ b/README.md @@ -61,7 +61,7 @@ Storybook runs outside of your app. This allows you to develop UI components in Here are some featured examples that you can reference to see how Storybook works: -Storybook comes with a lot of [addons](https://storybook.js.org/addons/introduction/) for component design, documentation, testing, interactivity, and so on. Storybook's easy-to-use API makes it easy to configure and extend in various ways. It has even been extended to support React Native development for mobile. +Storybook comes with a lot of [addons](https://storybook.js.org/addons/introduction/) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native development for mobile. ## Table of contents @@ -91,7 +91,8 @@ If you'd rather set up your project manually, take a look at our [Slow Start Gui Once it's installed, you can `npm run storybook` and it will run the development server on your local machine, and give you a URL to browse some sample stories. -**Storybook v2.x migration note**: If you're using Storybook v2.x and want to shift to 4.x version the easiest way is: +**Storybook v2.x migration note**: +If you're using Storybook v2.x and want to shift to 4.x version the easiest way is: ```sh cd my-storybook-v2-app @@ -148,7 +149,7 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl | [links](addons/links/) | Create links between stories | | [notes](addons/notes/) | Annotate Storybook stories with notes | | [options](addons/options/) | Customize the Storybook UI in code | -| [storyshots](addons/storyshots/) | Easy snapshot testing for components in Storybook | +| [storyshots](addons/storyshots/) | Snapshot testing for components in Storybook | | [storysource](addons/storysource/) | View the code of your stories within the Storybook UI | | [viewport](addons/viewport/) | Change display sizes and layouts for responsive components using Storybook | diff --git a/RELEASES.md b/RELEASES.md index 6fe01cdd8979..20e3e093f56f 100644 --- a/RELEASES.md +++ b/RELEASES.md @@ -93,7 +93,7 @@ is to upvote it by adding a "thumbs-up" reaction in Github. This way important bugs quickly bubble to the top [with a search](https://github.com/storybookjs/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20sort%3Areactions-%2B1-desc%20label%3Abug). -And of course, the best way to make sure a bug gets addressed quickly is to fix +The best way to make sure a bug gets addressed quickly is to fix it yourself and issue a PR. If the fix is good, we'll try to release it quickly in a patch release. diff --git a/ROADMAP.md b/ROADMAP.md index f98687178543..6a406bc2ccd7 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -24,7 +24,7 @@ Doing these will be backwards compatible. ### Responsive + multi-device viewports preview. -If you're smart about it you can already view the preview on multiple devices and windows. It's just an iframe after-all. +If you're smart about it you can already view the preview on multiple devices and windows. It's an iframe after-all. But story selection and addon-settings are not synced. We want to make this much much simpler and a core feature of storybook. @@ -41,7 +41,7 @@ We're interested in full customizability of our UI, though addons and options. ### Add a playground addon Many other styleguide-type projects have what's called a playground, where developers can change the code rendering the component inside the app. -Storybook has, of course, a very tight connection with your editor, and it has a knobs addon. +Storybook has a very tight connection with your editor, and it has a knobs addon. But we still see value in an addon that will allow the workflow of a playground. ### See multiple (or all) stories in 1 preview. diff --git a/__mocks__/inject-decorator.ts.csf.txt b/__mocks__/inject-decorator.ts.csf.txt new file mode 100644 index 000000000000..47e60534ac87 --- /dev/null +++ b/__mocks__/inject-decorator.ts.csf.txt @@ -0,0 +1,19 @@ +import React from "react"; +import { action } from "@storybook/addon-actions"; +import { Button } from "@storybook/react/demo"; + +export default { + title: "Button" +}; + +export const text = () => ( + +); + +export const emoji = () => ( + +); diff --git a/addons/a11y/package.json b/addons/a11y/package.json index 24ac16ea6dd1..45525ca27eb0 100644 --- a/addons/a11y/package.json +++ b/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "5.3.0-alpha.3", + "version": "5.3.0-alpha.22", "description": "a11y addon for storybook", "keywords": [ "a11y", @@ -24,7 +24,8 @@ "dist/**/*", "docs/**/*", "README.md", - "register.js" + "*.js", + "*.d.ts" ], "main": "dist/index.js", "types": "dist/index.d.ts", @@ -32,26 +33,24 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.3.0-alpha.3", - "@storybook/api": "5.3.0-alpha.3", - "@storybook/client-logger": "5.3.0-alpha.3", - "@storybook/components": "5.3.0-alpha.3", - "@storybook/core-events": "5.3.0-alpha.3", - "@storybook/theming": "5.3.0-alpha.3", + "@storybook/addons": "5.3.0-alpha.22", + "@storybook/api": "5.3.0-alpha.22", + "@storybook/client-logger": "5.3.0-alpha.22", + "@storybook/components": "5.3.0-alpha.22", + "@storybook/core-events": "5.3.0-alpha.22", + "@storybook/theming": "5.3.0-alpha.22", "axe-core": "^3.3.2", - "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", - "hoist-non-react-statics": "^3.3.0", "memoizerific": "^1.11.3", "react": "^16.8.3", "react-redux": "^7.0.2", "react-sizeme": "^2.5.2", "redux": "^4.0.1", + "ts-dedent": "^1.1.0", "util-deprecate": "^1.0.2" }, "devDependencies": { - "@types/common-tags": "^1.8.0", "@types/react-redux": "^7.0.6" }, "publishConfig": { diff --git a/addons/a11y/src/components/ColorBlindness.tsx b/addons/a11y/src/components/ColorBlindness.tsx index 377030466d5b..9d643a797f4a 100644 --- a/addons/a11y/src/components/ColorBlindness.tsx +++ b/addons/a11y/src/components/ColorBlindness.tsx @@ -1,5 +1,5 @@ import { document } from 'global'; -import React, { Component, ReactNode } from 'react'; +import React, { FunctionComponent, ReactNode, useState } from 'react'; import memoize from 'memoizerific'; import { styled } from '@storybook/theming'; @@ -34,13 +34,6 @@ const ColorIcon = styled.span( }) ); -// eslint-disable-next-line @typescript-eslint/no-empty-interface -interface ColorBlindnessProps {} - -interface ColorBlindnessState { - active: string | null; -} - const baseList = [ 'protanopia', 'protanomaly', @@ -86,45 +79,39 @@ const getColorList = (active: string | null, set: (i: string | null) => void): L })), ]; -export class ColorBlindness extends Component { - state: ColorBlindnessState = { - active: null, - }; +export const ColorBlindness: FunctionComponent = () => { + const [active, setActiveState] = useState(null); - setActive = (active: string | null) => { + const setActive = (activeState: string | null): void => { const iframe = getIframe(); if (iframe) { - iframe.style.filter = getFilter(active); - this.setState({ - active, + iframe.style.filter = getFilter(activeState); + setActiveState({ + active: activeState, }); } else { logger.error('Cannot find Storybook iframe'); } }; - render() { - const { active } = this.state; - - return ( - { - const colorList = getColorList(active, i => { - this.setActive(i); - onHide(); - }); - return ; - }} - closeOnClick - onDoubleClick={() => this.setActive(null)} - > - - - - - ); - } -} + return ( + { + const colorList = getColorList(active, i => { + setActive(i); + onHide(); + }); + return ; + }} + closeOnClick + onDoubleClick={() => setActive(null)} + > + + + + + ); +}; diff --git a/addons/a11y/src/components/Report/HighlightToggle.tsx b/addons/a11y/src/components/Report/HighlightToggle.tsx index bb58a5afb289..5d075d8e075a 100644 --- a/addons/a11y/src/components/Report/HighlightToggle.tsx +++ b/addons/a11y/src/components/Report/HighlightToggle.tsx @@ -1,5 +1,5 @@ import { document } from 'global'; -import React, { Component } from 'react'; +import React, { Component, createRef } from 'react'; import { connect } from 'react-redux'; import { styled, themes, convert } from '@storybook/theming'; import memoize from 'memoizerific'; @@ -100,7 +100,7 @@ class HighlightToggle extends Component { elementsToHighlight: [], }; - private checkBoxRef = React.createRef(); + private checkBoxRef = createRef(); componentDidMount() { const { elementsToHighlight, highlightedElementsMap } = this.props; diff --git a/addons/a11y/src/components/Report/Item.tsx b/addons/a11y/src/components/Report/Item.tsx index 9dce767928b1..9122ff53c674 100644 --- a/addons/a11y/src/components/Report/Item.tsx +++ b/addons/a11y/src/components/Report/Item.tsx @@ -1,4 +1,4 @@ -import React, { Component, Fragment } from 'react'; +import React, { Fragment, useState } from 'react'; import { styled } from '@storybook/theming'; import { Icons } from '@storybook/components'; @@ -59,55 +59,42 @@ interface ItemProps { type: RuleType; } -interface ItemState { - open: boolean; -} - -export class Item extends Component { - state = { - open: false, - }; +// export class Item extends Component { +export const Item = (props: ItemProps) => { + const [open, onToggle] = useState(false); - onToggle = () => - this.setState(prevState => ({ - open: !prevState.open, - })); + const { item, type } = props; + const highlightToggleId = `${type}-${item.id}`; - render() { - const { item, type } = this.props; - const { open } = this.state; - const highlightToggleId = `${type}-${item.id}`; - - return ( - - - - - {item.description} - - - - - - {open ? ( - - - - - - ) : null} - - ); - } -} + return ( + + + onToggle(!open)} role="button"> + + {item.description} + + + + + + {open ? ( + + + + + + ) : null} + + ); +}; diff --git a/addons/a11y/src/index.ts b/addons/a11y/src/index.ts index d1b8998a58dc..20c8fc717267 100644 --- a/addons/a11y/src/index.ts +++ b/addons/a11y/src/index.ts @@ -1,8 +1,7 @@ -/* eslint-disable @typescript-eslint/no-object-literal-type-assertion */ import { document } from 'global'; import axe, { AxeResults, ElementContext, RunOptions, Spec } from 'axe-core'; import deprecate from 'util-deprecate'; -import { stripIndents } from 'common-tags'; +import dedent from 'ts-dedent'; import addons, { makeDecorator } from '@storybook/addons'; import { EVENTS, PARAM_KEY } from './constants'; @@ -80,7 +79,7 @@ export const configureA11y = deprecate( (config: any) => { setup = config; }, - stripIndents` + dedent` configureA11y is deprecated, please configure addon-a11y using the addParameter api: addParameters({ diff --git a/addons/actions/package.json b/addons/actions/package.json index 5a7fdeb4a5b2..c4c955199270 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "5.3.0-alpha.3", + "version": "5.3.0-alpha.22", "description": "Action Logger addon for storybook", "keywords": [ "storybook" @@ -19,7 +19,8 @@ "dist/**/*", "docs/**/*", "README.md", - "register.js" + "*.js", + "*.d.ts" ], "main": "dist/index.js", "types": "dist/index.d.ts", @@ -27,19 +28,19 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.3.0-alpha.3", - "@storybook/api": "5.3.0-alpha.3", - "@storybook/client-api": "5.3.0-alpha.3", - "@storybook/components": "5.3.0-alpha.3", - "@storybook/core-events": "5.3.0-alpha.3", - "@storybook/theming": "5.3.0-alpha.3", + "@storybook/addons": "5.3.0-alpha.22", + "@storybook/api": "5.3.0-alpha.22", + "@storybook/client-api": "5.3.0-alpha.22", + "@storybook/components": "5.3.0-alpha.22", + "@storybook/core-events": "5.3.0-alpha.22", + "@storybook/theming": "5.3.0-alpha.22", "core-js": "^3.0.1", "fast-deep-equal": "^2.0.1", "global": "^4.3.2", "polished": "^3.3.1", "prop-types": "^15.7.2", "react": "^16.8.3", - "react-inspector": "^3.0.2", + "react-inspector": "^4.0.0", "uuid": "^3.3.2" }, "devDependencies": { diff --git a/addons/actions/src/manager.tsx b/addons/actions/src/manager.tsx index d77272be077b..a7bfd9dbf596 100644 --- a/addons/actions/src/manager.tsx +++ b/addons/actions/src/manager.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import * as React from 'react'; import addons from '@storybook/addons'; import ActionLogger from './containers/ActionLogger'; import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants'; diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json index 3f7662ba1e2d..24da61ce3e22 100644 --- a/addons/backgrounds/package.json +++ b/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "5.3.0-alpha.3", + "version": "5.3.0-alpha.22", "description": "A storybook addon to show different backgrounds for your preview", "keywords": [ "addon", @@ -23,7 +23,8 @@ "dist/**/*", "docs/**/*", "README.md", - "register.js" + "*.js", + "*.d.ts" ], "main": "dist/index.js", "types": "dist/index.d.ts", @@ -31,12 +32,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.3.0-alpha.3", - "@storybook/api": "5.3.0-alpha.3", - "@storybook/client-logger": "5.3.0-alpha.3", - "@storybook/components": "5.3.0-alpha.3", - "@storybook/core-events": "5.3.0-alpha.3", - "@storybook/theming": "5.3.0-alpha.3", + "@storybook/addons": "5.3.0-alpha.22", + "@storybook/api": "5.3.0-alpha.22", + "@storybook/client-logger": "5.3.0-alpha.22", + "@storybook/components": "5.3.0-alpha.22", + "@storybook/core-events": "5.3.0-alpha.22", + "@storybook/theming": "5.3.0-alpha.22", "core-js": "^3.0.1", "memoizerific": "^1.11.3", "react": "^16.8.3", diff --git a/addons/centered/ember.d.ts b/addons/centered/ember.d.ts new file mode 100644 index 000000000000..21aa4cc429d6 --- /dev/null +++ b/addons/centered/ember.d.ts @@ -0,0 +1,2 @@ +import centered from './dist/ember'; +export default centered; diff --git a/addons/centered/html.d.ts b/addons/centered/html.d.ts new file mode 100644 index 000000000000..d77b06e2f51c --- /dev/null +++ b/addons/centered/html.d.ts @@ -0,0 +1,2 @@ +import centered from './dist/html'; +export default centered; diff --git a/addons/centered/mithril.d.ts b/addons/centered/mithril.d.ts new file mode 100644 index 000000000000..1b0025189196 --- /dev/null +++ b/addons/centered/mithril.d.ts @@ -0,0 +1,2 @@ +import centered from './dist/mithril'; +export default centered; diff --git a/addons/centered/package.json b/addons/centered/package.json index 44b23e5e092a..e5a5ea39efce 100644 --- a/addons/centered/package.json +++ b/addons/centered/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-centered", - "version": "5.3.0-alpha.3", + "version": "5.3.0-alpha.22", "description": "Storybook decorator to center components", "keywords": [ "addon", @@ -20,16 +20,8 @@ "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" + "*.js", + "*.d.ts" ], "main": "dist/index.js", "types": "dist/index.d.ts", @@ -37,7 +29,7 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.3.0-alpha.3", + "@storybook/addons": "5.3.0-alpha.22", "core-js": "^3.0.1", "global": "^4.3.2", "util-deprecate": "^1.0.2" diff --git a/addons/centered/preact.d.ts b/addons/centered/preact.d.ts new file mode 100644 index 000000000000..cae1370b3003 --- /dev/null +++ b/addons/centered/preact.d.ts @@ -0,0 +1,2 @@ +import centered from './dist/preact'; +export default centered; diff --git a/addons/centered/react.d.ts b/addons/centered/react.d.ts new file mode 100644 index 000000000000..e41e86729f25 --- /dev/null +++ b/addons/centered/react.d.ts @@ -0,0 +1,2 @@ +import centered from './dist/react'; +export default centered; diff --git a/addons/centered/svelte.d.ts b/addons/centered/svelte.d.ts new file mode 100644 index 000000000000..d87cbef37cbb --- /dev/null +++ b/addons/centered/svelte.d.ts @@ -0,0 +1,2 @@ +import centered from './dist/svelte'; +export default centered; diff --git a/addons/centered/vue.d.ts b/addons/centered/vue.d.ts new file mode 100644 index 000000000000..a54367f70b46 --- /dev/null +++ b/addons/centered/vue.d.ts @@ -0,0 +1,2 @@ +import centered from './dist/vue'; +export default centered; diff --git a/addons/contexts/README.md b/addons/contexts/README.md index 8f51fd449d87..c781dacbe0e9 100644 --- a/addons/contexts/README.md +++ b/addons/contexts/README.md @@ -6,7 +6,7 @@ ## 💡 Why you need this? Real world users expects your application being customizable, that is why often your components are **polymorphic**: -they simply need to adapt themselves under different contextual environments. Imagine your components can speak +they need to adapt themselves under different contextual environments. Imagine your components can speak Chinese, English, or even French, and they change their skin tone under dark or light theme. Yeah, you want to make sure a component looks great in all scenarios. @@ -25,7 +25,7 @@ once then apply it everywhere**. 1. Define a single global file for managing contextual environments (a.k.a. containers) for all of your stories declaratively. No more repetitive setups or noisy wrapping, making your stories more focused and readable. -2. Support dynamic contextual props switching from Storybook toolbar at runtime. You can easily slice into +2. Support dynamic contextual props switching from Storybook toolbar at runtime. You can slice into different environments (e.g. languages or themes ) to understand how your component is going to respond. 3. Library agnostic: no presumption on what kind of components you want to wrap around your stories. You can even use it to bridge with your favorite routing, state-management solutions, or even your own @@ -65,7 +65,7 @@ import { contexts } from './configs/contexts'; // we will define the contextual addDecorator(withContexts(contexts)); ``` -Alternatively, just like other addons, you can use this addon only for a given set of stories: +Alternatively, like other addons, you can use this addon only for a given set of stories: ```js import { storiesOf } from '@storybook/[framework]'; @@ -220,7 +220,7 @@ be shown at first in the toolbar menu in your Storybook. ## 📔 Notes -1. You can use this addon to inject any valid components, that is why `icon` and `params` can be just optional. +1. You can use this addon to inject any valid components, that is why `icon` and `params` can be optional. 2. As mentioned, extra contextual environment setups can be added at the story level. Please make sure they are passed via the second argument as `{ contexts: [{ /* extra contexts */ }}`. 3. Additional `params` can be "appended" into an existing setup at the story level too (make sure it goes with the diff --git a/addons/contexts/package.json b/addons/contexts/package.json index ba4f458b9957..c2e97ce8c3d1 100644 --- a/addons/contexts/package.json +++ b/addons/contexts/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-contexts", - "version": "5.3.0-alpha.3", + "version": "5.3.0-alpha.22", "description": "Storybook Addon Contexts", "keywords": [ "preact", @@ -17,10 +17,9 @@ "author": "Leo Y. Li", "files": [ "dist/**/*", - "register.js", - "preact.js", - "react.js", - "vue.js" + "README.md", + "*.js", + "*.d.ts" ], "main": "dist/register.js", "scripts": { @@ -28,10 +27,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.3.0-alpha.3", - "@storybook/api": "5.3.0-alpha.3", - "@storybook/components": "5.3.0-alpha.3", - "@storybook/core-events": "5.3.0-alpha.3", + "@storybook/addons": "5.3.0-alpha.22", + "@storybook/api": "5.3.0-alpha.22", + "@storybook/components": "5.3.0-alpha.22", + "@storybook/core-events": "5.3.0-alpha.22", "core-js": "^3.0.1", "global": "^4.3.2", "qs": "^6.6.0" diff --git a/addons/contexts/src/manager/components/ToolBar.tsx b/addons/contexts/src/manager/components/ToolBar.tsx index 16a04113c843..863d36aa9903 100644 --- a/addons/contexts/src/manager/components/ToolBar.tsx +++ b/addons/contexts/src/manager/components/ToolBar.tsx @@ -1,4 +1,4 @@ -import React, { ComponentProps } from 'react'; +import React, { ComponentProps, memo } from 'react'; import { Separator } from '@storybook/components'; import { ToolBarControl } from './ToolBarControl'; import { ContextNode, FCNoChildren, SelectionState } from '../../shared/types.d'; @@ -9,7 +9,7 @@ type ToolBar = FCNoChildren<{ setSelected: ComponentProps['setSelected']; }>; -export const ToolBar: ToolBar = React.memo(({ nodes, state, setSelected }) => +export const ToolBar: ToolBar = memo(({ nodes, state, setSelected }) => nodes.length ? ( <> diff --git a/addons/contexts/src/manager/components/ToolBarControl.tsx b/addons/contexts/src/manager/components/ToolBarControl.tsx index 42c315ef470e..c6c42b761300 100644 --- a/addons/contexts/src/manager/components/ToolBarControl.tsx +++ b/addons/contexts/src/manager/components/ToolBarControl.tsx @@ -1,7 +1,7 @@ -import React from 'react'; +import React, { useState } from 'react'; import { ToolBarMenu } from './ToolBarMenu'; import { OPT_OUT } from '../../shared/constants'; -import { ContextNode, FCNoChildren, Omit } from '../../shared/types.d'; +import { ContextNode, FCNoChildren } from '../../shared/types.d'; type ToolBarControl = FCNoChildren< Omit< @@ -22,7 +22,7 @@ export const ToolBarControl: ToolBarControl = ({ selected, setSelected, }) => { - const [expanded, setExpanded] = React.useState(false); + const [expanded, setExpanded] = useState(false); const paramNames = params.map(({ name }) => name); const activeName = // validate the integrity of the selected name diff --git a/addons/contexts/src/manager/components/ToolBarMenuOptions.tsx b/addons/contexts/src/manager/components/ToolBarMenuOptions.tsx index d0929d7b3e2d..1e1f0f3ed378 100644 --- a/addons/contexts/src/manager/components/ToolBarMenuOptions.tsx +++ b/addons/contexts/src/manager/components/ToolBarMenuOptions.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import * as React from 'react'; import { TooltipLinkList } from '@storybook/components'; import { OPT_OUT } from '../../shared/constants'; import { FCNoChildren } from '../../shared/types.d'; diff --git a/addons/contexts/src/preview/frameworks/react.ts b/addons/contexts/src/preview/frameworks/react.ts index 2984951dc614..d2a0458bbccb 100644 --- a/addons/contexts/src/preview/frameworks/react.ts +++ b/addons/contexts/src/preview/frameworks/react.ts @@ -1,4 +1,4 @@ -import React from 'react'; +import { createElement, ReactElement } from 'react'; import { createAddonDecorator, Render } from '../../index'; import { ContextsPreviewAPI } from '../ContextsPreviewAPI'; @@ -6,9 +6,9 @@ import { ContextsPreviewAPI } from '../ContextsPreviewAPI'; * This is the framework specific bindings for React. * '@storybook/react' expects the returning object from a decorator to be a 'React Element' (vNode). */ -export const renderReact: Render = (contextNodes, propsMap, getStoryVNode) => { +export const renderReact: Render = (contextNodes, propsMap, getStoryVNode) => { const { getRendererFrom } = ContextsPreviewAPI(); - return getRendererFrom(React.createElement)(contextNodes, propsMap, getStoryVNode); + return getRendererFrom(createElement)(contextNodes, propsMap, getStoryVNode); }; export const withContexts = createAddonDecorator(renderReact); diff --git a/addons/contexts/src/shared/types.d.ts b/addons/contexts/src/shared/types.d.ts index e52027bea0a8..a60159fcb1a8 100644 --- a/addons/contexts/src/shared/types.d.ts +++ b/addons/contexts/src/shared/types.d.ts @@ -6,7 +6,6 @@ export { API as ManagerAPI } from '@storybook/api'; // helpers export declare type AnyFunctionReturns = (...arg: any[]) => T; export declare type FCNoChildren

= FunctionComponent<{ children?: never } & P>; -export declare type Omit = Pick>; export declare type GenericProp = null | { readonly [key: string]: unknown; }; diff --git a/addons/cssresources/package.json b/addons/cssresources/package.json index 092ecbf1e080..603f5cd76764 100644 --- a/addons/cssresources/package.json +++ b/addons/cssresources/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-cssresources", - "version": "5.3.0-alpha.3", + "version": "5.3.0-alpha.22", "description": "A storybook addon to switch between css resources at runtime for your story", "keywords": [ "addon", @@ -23,7 +23,8 @@ "dist/**/*", "docs/**/*", "README.md", - "register.js" + "*.js", + "*.d.ts" ], "main": "dist/index.js", "types": "dist/index.d.ts", @@ -31,10 +32,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.3.0-alpha.3", - "@storybook/api": "5.3.0-alpha.3", - "@storybook/components": "5.3.0-alpha.3", - "@storybook/core-events": "5.3.0-alpha.3", + "@storybook/addons": "5.3.0-alpha.22", + "@storybook/api": "5.3.0-alpha.22", + "@storybook/components": "5.3.0-alpha.22", + "@storybook/core-events": "5.3.0-alpha.22", "core-js": "^3.0.1", "global": "^4.3.2", "react": "^16.8.3" diff --git a/addons/cssresources/src/register.tsx b/addons/cssresources/src/register.tsx index 4366ea61801a..8637d1ca5664 100644 --- a/addons/cssresources/src/register.tsx +++ b/addons/cssresources/src/register.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import * as React from 'react'; import { addons, types } from '@storybook/addons'; import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants'; diff --git a/addons/design-assets/package.json b/addons/design-assets/package.json index 4c66672569fd..147c9236f427 100644 --- a/addons/design-assets/package.json +++ b/addons/design-assets/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-design-assets", - "version": "5.3.0-alpha.3", + "version": "5.3.0-alpha.22", "description": "Design asset preview for storybook", "keywords": [ "addon", @@ -25,7 +25,8 @@ "dist/**/*", "docs/**/*", "README.md", - "register.js" + "*.js", + "*.d.ts" ], "main": "dist/index.js", "types": "dist/index.d.ts", @@ -33,21 +34,18 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.3.0-alpha.3", - "@storybook/api": "5.3.0-alpha.3", - "@storybook/client-logger": "5.3.0-alpha.3", - "@storybook/components": "5.3.0-alpha.3", - "@storybook/core-events": "5.3.0-alpha.3", - "@storybook/theming": "5.3.0-alpha.3", - "common-tags": "^1.8.0", + "@storybook/addons": "5.3.0-alpha.22", + "@storybook/api": "5.3.0-alpha.22", + "@storybook/client-logger": "5.3.0-alpha.22", + "@storybook/components": "5.3.0-alpha.22", + "@storybook/core-events": "5.3.0-alpha.22", + "@storybook/theming": "5.3.0-alpha.22", "core-js": "^3.0.1", "global": "^4.3.2", "react": "^16.8.3", + "ts-dedent": "^1.1.0", "use-image": "^1.0.3" }, - "devDependencies": { - "@types/common-tags": "^1.8.0" - }, "publishConfig": { "access": "public" } diff --git a/addons/design-assets/src/register.tsx b/addons/design-assets/src/register.tsx index fb903ec514e5..61ae6a9c77ff 100644 --- a/addons/design-assets/src/register.tsx +++ b/addons/design-assets/src/register.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import * as React from 'react'; import { addons, types } from '@storybook/addons'; import { AddonPanel } from '@storybook/components'; diff --git a/addons/docs/README.md b/addons/docs/README.md index 3cd64bc3b9fb..d46737f42cd3 100644 --- a/addons/docs/README.md +++ b/addons/docs/README.md @@ -6,7 +6,7 @@ Storybook Docs transforms your Storybook stories into world-class component documentation. -**DocsPage.** Out of the box, all your stories get a `DocsPage`. `DocsPage` is a zero-config aggregation of your component stories, text descriptions, docgen comments, props tables, and code examples into simple, easy-to-read pages. +**DocsPage.** Out of the box, all your stories get a `DocsPage`. `DocsPage` is a zero-config aggregation of your component stories, text descriptions, docgen comments, props tables, and code examples into clean, readable pages. **MDX.** If you want more control, `MDX` allows you to write long-form markdown documentation and stories in one file. You can also use it to write pure documentation pages and embed them inside your Storybook alongside your stories. @@ -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@next +yarn add -D @storybook/addon-docs ``` 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: diff --git a/addons/docs/docs/docspage.md b/addons/docs/docs/docspage.md index f014c4362b49..40119a951a34 100644 --- a/addons/docs/docs/docspage.md +++ b/addons/docs/docs/docspage.md @@ -114,7 +114,7 @@ For example, here's the source for `Badge`: ```js /** - * Use `Badge` to highlight key info with a predefined status. Easy peasy! + * Use `Badge` to highlight key info with a predefined status. */ export const Badge = ({ status, children }) => { ... } ``` @@ -199,7 +199,7 @@ What if you don't want a `DocsPage` for your storybook, for a specific component You can replace DocsPage at any level by overriding the `docs.page` parameter: - With `null` to remove docs -- [With MDX](#csf-stories-with-mdx-docs) docs +- [With MDX](./recipes.md#csf-stories-with-mdx-docs) docs - With a custom React component **Globally (config.js)** @@ -237,6 +237,31 @@ Unless you use a custom webpack configuration, all of your story files should ha The docs preset assumes this naming convention for its `source-loader` setup. If you want to use a different naming convention, you'll need a [manual configuration](../README.md#manual-configuration). +## Inline stories vs. Iframe stories + +Due to the complex nature of writing a cross-framework utility like Storybook, the story blocks for most frameworks exist within an `