diff --git a/.babelrc.js b/.babelrc.js index 3579315ef8e6..c1e808c5983a 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -72,6 +72,11 @@ module.exports = { test: withTests, }, }, + { + test: './app/react-native', + presets: ['module:metro-react-native-babel-preset'], + plugins: ['babel-plugin-macros', ['emotion', { sourceMap: true, autoLabel: true }]], + }, { test: [ './lib/node-logger', diff --git a/.circleci/config.yml b/.circleci/config.yml index fcef34d0d0a8..ed8d38cfe754 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: @@ -48,8 +47,12 @@ jobs: - attach_workspace: at: . - run: - name: Run chromatic on the pre-built storybook - command: yarn chromatic -- -d ./storybook-static + name: Run chromatic on the pre-built official example + command: yarn chromatic --storybook-build-dir="built-storybooks/official-storybook" --exit-zero-on-changes --app-code="ab7m45tp9p" + - run: + name: Run chromatic on the pre-built angular example + command: yarn chromatic --storybook-build-dir="built-storybooks/angular-cli" --exit-zero-on-changes --app-code="tl92yzsj6w" + packtracker: <<: *defaults steps: @@ -63,97 +66,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 +206,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 +235,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 +268,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 +298,7 @@ workflows: - chromatic: requires: - examples + deploy: + jobs: + - docs + - frontpage diff --git a/.eslintignore b/.eslintignore index 4c73fd8d7a07..4b9216815225 100644 --- a/.eslintignore +++ b/.eslintignore @@ -12,6 +12,11 @@ scripts/storage *.bundle.js *.js.map *.d.ts +examples/ember-cli/.storybook/preview-head.html +examples/official-storybook/tests/addon-jest.test.js +examples/cra-ts-kitchen-sink/*.json +examples/cra-ts-kitchen-sink/public/*.json +examples/cra-ts-kitchen-sink/public/*.html !.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/automention.yml b/.github/automention.yml index 4c394263c6ea..177c7086be99 100644 --- a/.github/automention.yml +++ b/.github/automention.yml @@ -7,7 +7,8 @@ 'app: react-native': ['benoitdion', 'gongreg'] 'app: react-native-server': ['benoitdion', 'gongreg'] 'app: svelte': ['rixo', 'cam-stitt', 'plumpNation'] -'app: vue': ['backbone87', 'elevatebart', 'pksunkara'] +'app: vue': ['backbone87', 'elevatebart', 'pksunkara', 'Aaron-Pool'] +'app: web-components': ['daKmoR'] 'api: addons': ['ndelangen'] 'addon: a11y': ['CodeByAlex', 'Armanio', 'jsomsanith'] 'addon: contexts': ['leoyli'] 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..db599cf0f080 --- /dev/null +++ b/.github/workflows/tests-cli.yml @@ -0,0 +1,49 @@ +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: Cache node modules + uses: actions/cache@v1 + with: + path: node_modules + key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.OS }}-build-${{ env.cache-name }}- + ${{ runner.OS }}-build- + ${{ runner.OS }}- + - 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..f3eb332e5d51 --- /dev/null +++ b/.github/workflows/tests-unit.yml @@ -0,0 +1,29 @@ +name: Unit tests + +on: [push] + +jobs: + build: + + name: Test on node ${{ matrix.node_version }} and ${{ matrix.os }} + runs-on: ${{ matrix.os }} + steps: + - uses: actions/setup-node@v1 + with: + node-version: '10.x' + - uses: actions/checkout@v1 + - name: Cache node modules + uses: actions/cache@v1 + with: + path: node_modules + key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.OS }}-build-${{ env.cache-name }}- + ${{ runner.OS }}-build- + ${{ runner.OS }}- + - 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/.npmignore b/.npmignore deleted file mode 100644 index 5bd91d1c9267..000000000000 --- 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 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 09f27e3420ea..1f79651b8886 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,575 @@ +## 5.3.0-alpha.43 (November 11, 2019) + +### Bug Fixes + +* Source-loader: Warn if applied to non-stories file ([#8773](https://github.com/storybookjs/storybook/pull/8773)) + +### Maintenance + +* Presets / Addon-docs: Cleanup framework-specific presets ([#8782](https://github.com/storybookjs/storybook/pull/8782)) +* Add @babel/runtime to workspace ([#8774](https://github.com/storybookjs/storybook/pull/8774)) + +## 5.2.6 (November 9, 2019) + +### Bug Fixes + +* Addon-info: Remove jsnext:main ([#8764](https://github.com/storybookjs/storybook/pull/8764)) +* Addon-info: Fix "The prop 'children' is marked as required in 'Td'" ([#8745](https://github.com/storybookjs/storybook/pull/8745)) +* UI: Fix unmount components on Canvas/Docs tab switch ([#8625](https://github.com/storybookjs/storybook/pull/8625)) +* Addon-docs: Fix code style inside LI ([#8708](https://github.com/storybookjs/storybook/pull/8708)) +* Remove min-height CSS rule from DocsPage wrapper ([#8366](https://github.com/storybookjs/storybook/pull/8366)) +* Core: Revert webpack rebuild changes in node_modules ([#8657](https://github.com/storybookjs/storybook/pull/8657)) +* Addon-notes: Add key to render function ([#8633](https://github.com/storybookjs/storybook/pull/8633)) +* Addon-docs: Fix story scroll-to heuristics ([#8629](https://github.com/storybookjs/storybook/pull/8629)) +* React-native-server: Changed default port to number in CLI options ([#8584](https://github.com/storybookjs/storybook/pull/8584)) +* Increase TooltipLinkList max-height to accommodate more links ([#8545](https://github.com/storybookjs/storybook/pull/8545)) +* Prevent form submission as search is done while typing ([#8546](https://github.com/storybookjs/storybook/pull/8546)) +* Ondevice-knobs: Fix peer dep ([#8644](https://github.com/storybookjs/storybook/pull/8644)) + +## 5.3.0-alpha.42 (November 9, 2019) + +### Bug Fixes + +* Addon-info: Remove jsnext:main ([#8764](https://github.com/storybookjs/storybook/pull/8764)) +* Addon-info: Fix "The prop 'children' is marked as required in 'Td'" ([#8745](https://github.com/storybookjs/storybook/pull/8745)) + +### Maintenance + +* React-native: Update compilation target - it was compiled for old browsers ([#8698](https://github.com/storybookjs/storybook/pull/8698)) + +## 5.3.0-alpha.41 (November 7, 2019) + +### Features + +* Addon-docs: Render array of shape properly in props table ([#8707](https://github.com/storybookjs/storybook/pull/8707)) +* Addon-docs: Render params description in props table, support @ignore ([#8702](https://github.com/storybookjs/storybook/pull/8702)) + +### Bug Fixes + +* Addon-docs: Fix "Cannot read property 'props'" ([#8731](https://github.com/storybookjs/storybook/pull/8731)) +* UI: Fix unmount components on Canvas/Docs tab switch ([#8625](https://github.com/storybookjs/storybook/pull/8625)) +* Angular: Fix loading baseConfig if no angular.json found ([#8727](https://github.com/storybookjs/storybook/pull/8727)) + +## 5.3.0-alpha.40 (November 6, 2019) + +### Features + +* TriConfig configuration refactor ([#8597](https://github.com/storybookjs/storybook/pull/8597)) +* Presets: Ability to combine presets into another preset ([#6828](https://github.com/storybookjs/storybook/pull/6828)) + +### Bug Fixes + +* Theming: Fix invisible hr styles in typography ([#8659](https://github.com/storybookjs/storybook/pull/8659)) + +### Maintenance + +* Build: caching to github workflows ([#8724](https://github.com/storybookjs/storybook/pull/8724)) + +## 5.3.0-alpha.39 (November 5, 2019) + +### Breaking Changes + +* React-native: Require user-provided async storage ([#7801](https://github.com/storybookjs/storybook/pull/7801)) + +### Features + +* Addon-docs: Inline rendering for web-components as default ([#8705](https://github.com/storybookjs/storybook/pull/8705)) + +### Bug Fixes + +* Addon-docs: Fix recipe to use `notes` as component description ([#8718](https://github.com/storybookjs/storybook/pull/8718)) +* Addon-docs: Fix code style inside LI ([#8708](https://github.com/storybookjs/storybook/pull/8708)) +* React Native: Fix on-device-notes ([#8692](https://github.com/storybookjs/storybook/pull/8692)) +* React Native: On Device Knobs Groups Fix ([#8694](https://github.com/storybookjs/storybook/pull/8694)) +* React-native: Fix event listening for story navigation ([#8690](https://github.com/storybookjs/storybook/pull/8690)) +* React-Native: Add safe area wrapper for iphone x and later ([#8679](https://github.com/storybookjs/storybook/pull/8679)) + +## 5.3.0-alpha.38 (November 3, 2019) + +### Bug Fixes + +* React-native: Patch rn-host-detect ([#8683](https://github.com/storybookjs/storybook/pull/8683)) +* React-native: Fix layout in RN61 so addons no longer initially displayed ([#8681](https://github.com/storybookjs/storybook/pull/8681)) + +### Maintenance + +* React-native: Catch touch events when preview is minimized ([#8680](https://github.com/storybookjs/storybook/pull/8680)) +* React-native: Make menu bar have its own position instead of absolute ([#8678](https://github.com/storybookjs/storybook/pull/8678)) + +## 5.3.0-alpha.37 (November 2, 2019) + +### Bug Fixes + +* Source-loader: Fix Typescript support ([#8499](https://github.com/storybookjs/storybook/pull/8499)) + +## 5.3.0-alpha.36 (November 2, 2019) + +### Features + +* Addon-docs: Angular DocsPage props table ([#8621](https://github.com/storybookjs/storybook/pull/8621)) +* Addon-docs: Support jsdoc params to describe function signature ([#8660](https://github.com/storybookjs/storybook/pull/8660)) + +### Bug Fixes + +* Addon-docs: Remove min-height CSS rule from DocsPage wrapper ([#8366](https://github.com/storybookjs/storybook/pull/8366)) +* Addon-docs: Check component propTypes before unwrapping ([#8665](https://github.com/storybookjs/storybook/pull/8665)) + +## 5.3.0-alpha.35 (November 1, 2019) + +### Bug Fixes + +* Core: Revert webpack rebuild changes in node_modules ([#8657](https://github.com/storybookjs/storybook/pull/8657)) +* Ondevice-knobs: Fix peer dep ([#8643](https://github.com/storybookjs/storybook/pull/8643)) + +## 5.3.0-alpha.34 (October 30, 2019) + +### Bug Fixes + +* Addon-notes: Add key to render function ([#8633](https://github.com/storybookjs/storybook/pull/8633)) +* Addon-docs: Fix story scroll-to heuristics ([#8629](https://github.com/storybookjs/storybook/pull/8629)) +* Addon-docs: Fix props table in no props case ([#8632](https://github.com/storybookjs/storybook/pull/8632)) +* Addon-docs/web-components: Add attributes to props table ([#8598](https://github.com/storybookjs/storybook/pull/8598)) +* CLI: Fix package.json update ([#8615](https://github.com/storybookjs/storybook/pull/8615)) +* React-native: Fix background style ([#8480](https://github.com/storybookjs/storybook/pull/8480)) + +### Maintenance + +* Channel: Clean up test ([#8627](https://github.com/storybookjs/storybook/pull/8627)) +* RAX: Fix example app ([#8617](https://github.com/storybookjs/storybook/pull/8617)) + +### Dependency Upgrades + +* Misc. dependency upgrades ([#8612](https://github.com/storybookjs/storybook/pull/8612)) + +## 5.3.0-alpha.33 (October 28, 2019) + +### Maintenance + +* Web-components: Move custom-elements utils to app ([#8592](https://github.com/storybookjs/storybook/pull/8592)) + +## 5.3.0-alpha.32 (October 28, 2019) + +### Features + +* Addon-docs: Props / Description for web-components ([#8585](https://github.com/storybookjs/storybook/pull/8585)) +* Core: Global addDecorator/addParameters ([#8573](https://github.com/storybookjs/storybook/pull/8573)) +* Addon-docs: Generalize Description doc block ([#8590](https://github.com/storybookjs/storybook/pull/8590)) + +### Bug Fixes + +* React-native-server: Changed default port to number in CLI options ([#8584](https://github.com/storybookjs/storybook/pull/8584)) + +### Maintenance + +* Typescript: Use native package types now available ([#8588](https://github.com/storybookjs/storybook/pull/8588)) +* Build: Fix now deploy maybe ([#8589](https://github.com/storybookjs/storybook/pull/8589)) + +## 5.3.0-alpha.31 (October 27, 2019) + +### Dependency Upgrades + +* Upgrade babel-plugin-react-docgen to 4.0.0-beta.1 ([#8581](https://github.com/storybookjs/storybook/pull/8581)) + +## 5.3.0-alpha.30 (October 27, 2019) + +### Features + +* Addon-docs: Modify Typeset doc block to accept units ([#8574](https://github.com/storybookjs/storybook/pull/8574)) + +### Bug Fixes + +* Web-components: Use framework id 'web-components' ([#8579](https://github.com/storybookjs/storybook/pull/8579)) + +### Maintenance + +* WC-kitchen-sink: Add babel-loader dependency ([#8578](https://github.com/storybookjs/storybook/pull/8578)) + +### Dependency Upgrades + +* Upgrade babel-plugin-react-docgen to 3.2.0 ([#8580](https://github.com/storybookjs/storybook/pull/8580)) + +## 5.3.0-alpha.29 (October 25, 2019) + +### Features + +* Addon-docs: Add props loader to vue preset ([#8567](https://github.com/storybookjs/storybook/pull/8567)) + +### Dependency Upgrades + +* Angular: bump zone.js version in peer dependencies ([#8558](https://github.com/storybookjs/storybook/pull/8558)) + +## 5.3.0-alpha.28 (October 25, 2019) + +### Features + +* Addon-docs: Publish web-components preset ([#8563](https://github.com/storybookjs/storybook/pull/8563)) +* Addon-docs: Vue slots/events props table + generalization ([#8489](https://github.com/storybookjs/storybook/pull/8489)) + +## 5.3.0-alpha.27 (October 24, 2019) + +### Features + +* Core: Allow linking to kind/component ID ([#7648](https://github.com/storybookjs/storybook/pull/7648)) +* Addon-docs: Jest MDX transform for storyshots ([#8189](https://github.com/storybookjs/storybook/pull/8189)) +* CLI: Add flag to disable version checks ([#8488](https://github.com/storybookjs/storybook/pull/8488)) +* Typescript: add types for react demo ([#8517](https://github.com/storybookjs/storybook/pull/8517)) + +### Bug Fixes + +* UI: Increase TooltipLinkList max-height to accommodate more links ([#8545](https://github.com/storybookjs/storybook/pull/8545)) +* UI: Prevent form submission as search is done while typing ([#8546](https://github.com/storybookjs/storybook/pull/8546)) + +### Dependency Upgrades + +* Remove outdated and unused `jsx-to-string` library ([#8549](https://github.com/storybookjs/storybook/pull/8549)) + +## 5.3.0-alpha.26 (October 23, 2019) + +Fix web-components storybook dependencies + +## 5.3.0-alpha.25 (October 23, 2019) + +### Features + +* Web-components: New storybook app ([#8400](https://github.com/storybookjs/storybook/pull/8400)) +* Core: Allow custom postcss config ([#8498](https://github.com/storybookjs/storybook/pull/8498)) + +## 5.3.0-alpha.24 (October 22, 2019) + +### Features + +* Docs: Highlight ts and tsx syntax ([#8493](https://github.com/storybookjs/storybook/pull/8493)) + +### Bug Fixes + +* React-native-server: Convert port to number in CLI options ([#8491](https://github.com/storybookjs/storybook/pull/8491)) + +### Maintenance + +* Automate codemod tests as jest snapshots ([#8506](https://github.com/storybookjs/storybook/pull/8506)) + +### Dependency Upgrades + +* Add "@types/react-textarea-autosize" to dependencies ([#8503](https://github.com/storybookjs/storybook/pull/8503)) + +## 5.2.5 (October 22, 2019) + +### Bug Fixes + +* UI: Fix React15 support ([#8454](https://github.com/storybookjs/storybook/pull/8454)) +* React-native-server: Convert port to number in CLI options ([#8491](https://github.com/storybookjs/storybook/pull/8491)) +* Addon-docs: Fix React.forwardedRef/memo props ([#8445](https://github.com/storybookjs/storybook/pull/8445)) +* MDX: Handle `` name starting with number ([#8469](https://github.com/storybookjs/storybook/pull/8469)) +* React: Fix custom themes breaking the welcome demo ([#8259](https://github.com/storybookjs/storybook/pull/8259)) +* Addon-jest: Make withTests type generic ([#8410](https://github.com/storybookjs/storybook/pull/8410)) + +### Dependency Upgrades + +* [Security] Bump lodash from 4.17.11 to 4.17.15 ([#8351](https://github.com/storybookjs/storybook/pull/8351)) + +### Dependency Upgrades + +* Add "@types/react-textarea-autosize" to dependencies ([#8503](https://github.com/storybookjs/storybook/pull/8503)) + +## 5.3.0-alpha.23 (October 19, 2019) + +### Features + +* Webpack: Enabled error details ([#8391](https://github.com/storybookjs/storybook/pull/8391)) + +### Bug Fixes + +* Addon-docs: Fix React.forwardedRef/memo props ([#8445](https://github.com/storybookjs/storybook/pull/8445)) +* MDX: Handle `` name starting with number ([#8469](https://github.com/storybookjs/storybook/pull/8469)) + +### Maintenance + +* ADD a step in circleci to upload storybook for angular ([#8477](https://github.com/storybookjs/storybook/pull/8477)) +* Core: Check module type in configure ([#8412](https://github.com/storybookjs/storybook/pull/8412)) +* Angular: Convert angular-cli stories to CSF ([#7668](https://github.com/storybookjs/storybook/pull/7668)) +* Typescript: Migrate @storybook/mithril ([#8320](https://github.com/storybookjs/storybook/pull/8320)) + +## 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 + +* 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 @@ -28,7 +600,7 @@ Storybook 5.2 is here! - 🖼 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 ugprade from `5.0` or earlier. +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) @@ -810,7 +1382,7 @@ It is now recommended to only use ONE `load` call in your app and it will warn y * Addon-docs: Added inline option to Story block ([#7308](https://github.com/storybookjs/storybook/pull/7308)) * Addon-knobs: Ensure unique knob names across groups ([#6793](https://github.com/storybookjs/storybook/pull/6793)) -* Core: Enable webpack to rebuild changes in node_modules ([#6265](https://github.com/storybooorybook/pull/6265)) +* Core: Enable webpack to rebuild changes in node_modules ([#6265](https://github.com/storybookjs/storybook/pull/6265)) * Addons: Disable option for addon tab ([#6923](https://github.com/storybookjs/storybook/pull/6923)) ### Bug Fixes @@ -1041,7 +1613,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) @@ -2133,7 +2705,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/CONTRIBUTING.md b/CONTRIBUTING.md index 080a123a4684..5235cf76da43 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 059d3ea0f919..2c14ac78797c 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,7 +1,14 @@ # 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) + - [Description doc block](#description-doc-block) + - [React Native Async Storage](#react-native-async-storage) + - [Unified docs preset](#unified-docs-preset) - [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) @@ -65,11 +72,62 @@ - [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. + +### Description doc block + +In 5.3 we've changed `addon-docs`'s `Description` doc block's default behavior. Technically this is a breaking change, but MDX was not officially released in 5.2 and we reserved the right to make small breaking changes. The behavior of `DocsPage`, which was officially released, remains unchanged. + +The old behavior of `` was to concatenate the info parameter or notes parameter, if available, with the docgen information loaded from source comments. If you depend on the old behavior, it's still available with ``. This description type will be removed in Storybook 6.0. + +The new default behavior is to use the framework-specific description extractor, which for React/Vue is still docgen, but may come from other places (e.g. a JSON file) for other frameworks. + +The description doc block on DocsPage has also been updated. To see how to configure it in 5.3, please see [the updated recipe](https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#migrating-from-notesinfo-addons) + +### React Native Async Storage + +Starting from version React Native 0.59, Async Storage is deprecated in React Native itself. The new @react-native-community/async-storage module requires native installation, and we don't want to have it as a dependency for React Native Storybook. + +To avoid that now you have to manually pass asyncStorage to React Native Storybook with asyncStorage prop. To notify users we are displaying a warning about it. + +Solution: + +- Use `require('@react-native-community/async-storage')` for React Native v0.59 and above. +- Use `require('react-native').AsyncStorage` for React Native v0.58 or below. +- Use `null` to disable Async Storage completely. + +```javascript +getStorybookUI({ + ... + asyncStorage: require('@react-native-community/async-storage') || require('react-native').AsyncStorage || null +}); +``` + +### Unified docs preset + +Addon-docs configuration gets simpler in 5.3. In 5.2, each framework had its own preset, e.g. `@storybook/addon-docs/react/preset`. Starting in 5.3, everybody should use `@storybook/addon-docs/preset`. + ## From version 5.1.x to 5.2.x -### default viewports +### Source-loader + +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`, 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 -The default viewports have been reduced to a smaller set, we think is enough for most usecases. +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 @@ -95,7 +153,7 @@ This isn't a breaking change per se, because `addon-docs` is a new feature. Howe ### storySort option -In 5.0.x the global option `sortStoriesByKind` option was [inadverttly removed](#sortstoriesbykind). In 5.2 we've introduced a new option, `storySort`, to replace it. `storySort` takes a comparator function, so it is strictly more powerful than `sortStoriesByKind`. +In 5.0.x the global option `sortStoriesByKind` option was [inadvertently removed](#sortstoriesbykind). In 5.2 we've introduced a new option, `storySort`, to replace it. `storySort` takes a comparator function, so it is strictly more powerful than `sortStoriesByKind`. For example, here's how to sort by story ID using `storySort`: @@ -127,7 +185,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: @@ -272,7 +330,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({ @@ -303,7 +361,7 @@ addDecorator( And here's its new counterpart: ```js -import { create } from '@storybook/theming'; +import { create } from '@storybook/theming/create'; addParameters({ options: { theme: create({ @@ -643,7 +701,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). @@ -662,7 +720,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 { @@ -706,7 +764,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) @@ -736,11 +794,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: @@ -867,7 +925,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. @@ -881,7 +939,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 f80eb15121aa..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 | @@ -164,7 +165,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/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.stories.txt b/__mocks__/inject-decorator.stories.txt index c4f0c4d53e5d..a8eb61d2f221 100644 --- a/__mocks__/inject-decorator.stories.txt +++ b/__mocks__/inject-decorator.stories.txt @@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react'; import { withInfo } from '@storybook/addon-info'; import { action } from '@storybook/addon-actions'; -import DocgenButton from '../components/DocgenButton'; +import { DocgenButton } from '../components/DocgenButton'; import FlowTypeButton from '../components/FlowTypeButton'; import BaseButton from '../components/BaseButton'; import TableComponent from '../components/TableComponent'; 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/README.md b/addons/a11y/README.md index 7d1fc3516923..584e49f67028 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/docs/screenshot.png b/addons/a11y/docs/screenshot.png index 43fe0b333f34..44fbf53fdeb0 100644 Binary files a/addons/a11y/docs/screenshot.png and b/addons/a11y/docs/screenshot.png differ diff --git a/addons/a11y/package.json b/addons/a11y/package.json index d64b37283259..2150f0bb480a 100644 --- a/addons/a11y/package.json +++ b/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "5.3.0-alpha.0", + "version": "5.3.0-alpha.43", "description": "a11y addon for storybook", "keywords": [ "a11y", @@ -20,32 +20,37 @@ "directory": "addons/a11y" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "*.js", + "*.d.ts" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.3.0-alpha.0", - "@storybook/api": "5.3.0-alpha.0", - "@storybook/client-logger": "5.3.0-alpha.0", - "@storybook/components": "5.3.0-alpha.0", - "@storybook/core-events": "5.3.0-alpha.0", - "@storybook/theming": "5.3.0-alpha.0", + "@storybook/addons": "5.3.0-alpha.43", + "@storybook/api": "5.3.0-alpha.43", + "@storybook/client-logger": "5.3.0-alpha.43", + "@storybook/components": "5.3.0-alpha.43", + "@storybook/core-events": "5.3.0-alpha.43", + "@storybook/theming": "5.3.0-alpha.43", "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/components/Report/__snapshots__/HighlightToggle.test.js.snap b/addons/a11y/src/components/Report/__snapshots__/HighlightToggle.test.js.snap index 870f33c87f55..bdef5cabcc02 100644 --- a/addons/a11y/src/components/Report/__snapshots__/HighlightToggle.test.js.snap +++ b/addons/a11y/src/components/Report/__snapshots__/HighlightToggle.test.js.snap @@ -82,12 +82,12 @@ exports[`HighlightToggle component should match snapshot 1`] = ` }, "hoverable": Object { "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0NxQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */", - "name": "1023qba-hoverable", - "styles": "transition:all 150ms ease-out;transform:translate3d(0,0,0);&:hover{transform:translate3d(0,-2px,0);}&:active{transform:translate3d(0,0,0);}label:hoverable;", + "name": "1o7rzh8-hoverable", + "styles": "transition:all 150ms ease-out;transform:translate3d(0,0,0);&:hover{transform:translate3d(0,-2px,0);}&:active{transform:translate3d(0,0,0);};label:hoverable;", }, "inlineGlow": Object { "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNzQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */", - "name": "1euta6d-inlineGlow", + "name": "x4tfcc-inlineGlow", "next": Object { "name": "animation-r0iffl", "next": undefined, @@ -96,7 +96,8 @@ exports[`HighlightToggle component should match snapshot 1`] = ` 50% { opacity: .4; } }", }, - "styles": "animation:animation-r0iffl 1.5s ease-in-out infinite;color:transparent;cursor:progress;label:inlineGlow;", + "styles": "animation:animation-r0iffl 1.5s ease-in-out infinite;color:transparent;cursor:progress;;label:inlineGlow;", + "toString": [Function], }, "jiggle": Object { "anim": 1, diff --git a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap b/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap index ecdb07f6dbde..24e12e704048 100644 --- a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap +++ b/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap @@ -928,6 +928,7 @@ exports[`A11YPanel should render report 1`] = ` "name": "nh5djz", "next": undefined, "styles": "[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}.simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}.simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}.simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0;}.simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}.simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}.simplebar-scrollbar:before{position:absolute;content:\\"\\";border-radius:7px;left:0;right:0;opacity:0;transition:opacity 0.2s linear;background:#333333;}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;transition:opacity 0s linear;}.simplebar-track.simplebar-vertical{top:0;width:11px;}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}.simplebar-track.simplebar-horizontal{left:0;height:11px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}[data-simplebar-direction=\\"rtl\\"] .simplebar-track.simplebar-vertical{right:auto;left:0;}", + "toString": [Function], } } /> 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/docs/screenshot.png b/addons/actions/docs/screenshot.png index f3b6abaf9166..361e9556427b 100644 Binary files a/addons/actions/docs/screenshot.png and b/addons/actions/docs/screenshot.png differ diff --git a/addons/actions/package.json b/addons/actions/package.json index cd23d15f7d73..7bc6fa17ca43 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "5.3.0-alpha.0", + "version": "5.3.0-alpha.43", "description": "Action Logger addon for storybook", "keywords": [ "storybook" @@ -15,25 +15,32 @@ "directory": "addons/actions" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "*.js", + "*.d.ts" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.3.0-alpha.0", - "@storybook/api": "5.3.0-alpha.0", - "@storybook/client-api": "5.3.0-alpha.0", - "@storybook/components": "5.3.0-alpha.0", - "@storybook/core-events": "5.3.0-alpha.0", - "@storybook/theming": "5.3.0-alpha.0", + "@storybook/addons": "5.3.0-alpha.43", + "@storybook/api": "5.3.0-alpha.43", + "@storybook/client-api": "5.3.0-alpha.43", + "@storybook/components": "5.3.0-alpha.43", + "@storybook/core-events": "5.3.0-alpha.43", + "@storybook/theming": "5.3.0-alpha.43", "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 ffacba710be4..2f06533b6243 100644 --- a/addons/backgrounds/package.json +++ b/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "5.3.0-alpha.0", + "version": "5.3.0-alpha.43", "description": "A storybook addon to show different backgrounds for your preview", "keywords": [ "addon", @@ -19,18 +19,25 @@ }, "license": "MIT", "author": "jbaxleyiii", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "*.js", + "*.d.ts" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.3.0-alpha.0", - "@storybook/api": "5.3.0-alpha.0", - "@storybook/client-logger": "5.3.0-alpha.0", - "@storybook/components": "5.3.0-alpha.0", - "@storybook/core-events": "5.3.0-alpha.0", - "@storybook/theming": "5.3.0-alpha.0", + "@storybook/addons": "5.3.0-alpha.43", + "@storybook/api": "5.3.0-alpha.43", + "@storybook/client-logger": "5.3.0-alpha.43", + "@storybook/components": "5.3.0-alpha.43", + "@storybook/core-events": "5.3.0-alpha.43", + "@storybook/theming": "5.3.0-alpha.43", "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 8154ba047255..566bc9dbbb32 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 3abae84952b8..f2876d89cef1 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 7009d594078a..b078b540d1d5 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/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 48ccd3baef0d..9ec1fead27ee 100644 --- a/addons/centered/package.json +++ b/addons/centered/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-centered", - "version": "5.3.0-alpha.0", + "version": "5.3.0-alpha.43", "description": "Storybook decorator to center components", "keywords": [ "addon", @@ -17,13 +17,19 @@ }, "license": "MIT", "author": "Muhammed Thanish ", + "files": [ + "dist/**/*", + "README.md", + "*.js", + "*.d.ts" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.3.0-alpha.0", + "@storybook/addons": "5.3.0-alpha.43", "core-js": "^3.0.1", "global": "^4.3.2", "util-deprecate": "^1.0.2" @@ -33,13 +39,5 @@ "mithril": "*", "preact": "*", "react": "*" - }, - "peerDependencies": { - "mithril": "*", - "preact": "*", - "react": "*" - }, - "publishConfig": { - "access": "public" } } 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/src/mithril.tsx b/addons/centered/src/mithril.tsx index 5ba2d4cc26be..5398d7da5a68 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/preact.tsx b/addons/centered/src/preact.tsx index ccb2bf1512b4..ed2175159472 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 0ca519afee36..ab3d0c3e2876 100644 --- a/addons/centered/src/rax.js +++ b/addons/centered/src/rax.js @@ -1,7 +1,6 @@ /** @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'; import parameters from './parameters'; diff --git a/addons/centered/src/react.tsx b/addons/centered/src/react.tsx index 9eb63f774d85..f914f3120c7b 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/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 78c6b0b72bf9..55d4329823b8 100644 --- a/addons/contexts/package.json +++ b/addons/contexts/package.json @@ -1,38 +1,39 @@ { "name": "@storybook/addon-contexts", - "version": "5.3.0-alpha.0", + "version": "5.3.0-alpha.43", "description": "Storybook Addon Contexts", "keywords": [ - "storybook", "preact", "react", + "storybook", "vue" ], - "author": "Leo Y. Li", - "license": "MIT", - "main": "dist/register.js", - "files": [ - "dist/**/*", - "register.js", - "preact.js", - "react.js", - "vue.js" - ], "repository": { "type": "git", "url": "https://github.com/storybookjs/storybook.git", "directory": "addons/contexts" }, + "license": "MIT", + "author": "Leo Y. Li", + "files": [ + "dist/**/*", + "README.md", + "*.js", + "*.d.ts" + ], + "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.3.0-alpha.0", - "@storybook/api": "5.3.0-alpha.0", - "@storybook/components": "5.3.0-alpha.0", - "@storybook/core-events": "5.3.0-alpha.0", - "core-js": "^3.0.1" + "@storybook/addons": "5.3.0-alpha.43", + "@storybook/api": "5.3.0-alpha.43", + "@storybook/components": "5.3.0-alpha.43", + "@storybook/core-events": "5.3.0-alpha.43", + "core-js": "^3.0.1", + "global": "^4.3.2", + "qs": "^6.6.0" }, "peerDependencies": { "global": "*", @@ -41,11 +42,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 718fd3adee86..2af9ef30aa3e 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/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/manager/libs/useChannel.ts b/addons/contexts/src/manager/libs/useChannel.ts deleted file mode 100644 index f1704a5ba4eb..000000000000 --- 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/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 1e6f251f9cfa..c3ce1f51dad8 100644 --- a/addons/cssresources/package.json +++ b/addons/cssresources/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-cssresources", - "version": "5.3.0-alpha.0", + "version": "5.3.0-alpha.43", "description": "A storybook addon to switch between css resources at runtime for your story", "keywords": [ "addon", @@ -19,16 +19,23 @@ }, "license": "MIT", "author": "nm123github", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "*.js", + "*.d.ts" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.3.0-alpha.0", - "@storybook/api": "5.3.0-alpha.0", - "@storybook/components": "5.3.0-alpha.0", - "@storybook/core-events": "5.3.0-alpha.0", + "@storybook/addons": "5.3.0-alpha.43", + "@storybook/api": "5.3.0-alpha.43", + "@storybook/components": "5.3.0-alpha.43", + "@storybook/core-events": "5.3.0-alpha.43", "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 4874a7ac2382..6dcaba01f877 100644 --- a/addons/design-assets/package.json +++ b/addons/design-assets/package.json @@ -1,14 +1,14 @@ { "name": "@storybook/addon-design-assets", - "version": "5.3.0-alpha.0", + "version": "5.3.0-alpha.43", "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,27 +21,31 @@ "directory": "addons/design-assets" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "*.js", + "*.d.ts" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.3.0-alpha.0", - "@storybook/api": "5.3.0-alpha.0", - "@storybook/client-logger": "5.3.0-alpha.0", - "@storybook/components": "5.3.0-alpha.0", - "@storybook/core-events": "5.3.0-alpha.0", - "@storybook/theming": "5.3.0-alpha.0", - "common-tags": "^1.8.0", + "@storybook/addons": "5.3.0-alpha.43", + "@storybook/api": "5.3.0-alpha.43", + "@storybook/client-logger": "5.3.0-alpha.43", + "@storybook/components": "5.3.0-alpha.43", + "@storybook/core-events": "5.3.0-alpha.43", + "@storybook/theming": "5.3.0-alpha.43", "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 ccdb035a8e3f..0c7308bb2b70 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. @@ -14,14 +14,16 @@ Just like Storybook, Docs supports every major view layer including React, Vue, Read on to learn more: -- [DocsPage](#docspage) -- [MDX](#mdx) -- [Framework support](#framework-support) -- [Installation](#installation) -- [Preset options](#preset-options) -- [Manual configuration](#manual-configuration) -- [TypeScript configuration](#typescript-configuration) -- [More resources](#more-resources) +- [Storybook Docs](#storybook-docs) + - [DocsPage](#docspage) + - [MDX](#mdx) + - [Framework support](#framework-support) + - [Installation](#installation) + - [Be sure to check framework specific installation needs](#be-sure-to-check-framework-specific-installation-needs) + - [Preset options](#preset-options) + - [Manual configuration](#manual-configuration) + - [TypeScript configuration](#typescript-configuration) + - [More resources](#more-resources) ## DocsPage @@ -73,44 +75,43 @@ For more information on `MDX`, see the [`MDX` reference](./docs/mdx.md). ## Framework support -Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some view-layer specific -features as well. This chart captures the current state of support +Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some framework-specific features as well, such as props tables and inline story rendering. This chart captures the current state of support: -| | React | Vue | Angular | HTML | Svelte | Polymer | Marko | Mithril | Riot | Ember | Preact | -| ----------------- | :---: | :-: | :-----: | :--: | :----: | :-----: | :---: | :-----: | :--: | :---: | :----: | -| MDX stories | + | + | + | + | + | + | + | + | + | + | + | -| CSF stories | + | + | + | + | + | + | + | + | + | + | + | -| StoriesOf stories | + | + | + | + | + | + | + | + | + | + | + | -| Source | + | + | + | + | + | + | + | + | + | + | + | -| Notes / Info | + | + | + | + | + | + | + | + | + | + | + | -| Props table | + | # | # | | | | | | | | | -| Docgen | + | # | # | | | | | | | | | -| Inline stories | + | # | | | | | | | | | | +| | React | Vue | Angular | HTML | [Web Components](./web-components) | Svelte | Polymer | Marko | Mithril | Riot | Ember | Preact | +| ----------------- | :---: | :---: | :-----: | :---: | :--------------------------------: | :----: | :-----: | :---: | :-----: | :---: | :---: | :----: | +| MDX stories | + | + | + | + | + | + | + | + | + | + | + | + | +| CSF stories | + | + | + | + | + | + | + | + | + | + | + | + | +| StoriesOf stories | + | + | + | + | + | + | + | + | + | + | + | + | +| Source | + | + | + | + | + | + | + | + | + | + | + | + | +| Notes / Info | + | + | + | + | + | + | + | + | + | + | + | + | +| Props table | + | + | # | | + | | | | | | | | +| Description | + | + | # | | + | | | | | | | | +| Inline stories | + | + | | | + | | | | | | | | **Note:** `#` = WIP support +Want to add enhanced features to your favorite framework? Check out this [dev guide](./docs/multiframework.md) + ## Installation 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: +Docs has peer dependencies on `react`, `react-is`, and `babel-loader`. If you want to write stories in MDX, you may need to add these dependencies as well: ```sh -yarn add -D react babel-loader +yarn add -D react react-is babel-loader ``` Then add the following to your `.storybook/presets.js` exports: ```js -module.exports = ['@storybook/addon-docs/react/preset']; +module.exports = ['@storybook/addon-docs/preset']; ``` -If you're not using `react`, replace it with your framework of choice corresponding to the Storybook package name, e.g. `angular` for `@storybook/angular` etc. - **Configure.** If you're migrating from an earlier version of Storybook and want to use `MDX`, you need to upgrade your Storybook config: ```js @@ -121,6 +122,26 @@ configure(require.context('../src', true, /\.stories\.(js|mdx)$/), module); For more information on the new `configure`, see ["Loading stories"](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/basics/writing-stories/index.md#loading-stories) in the Storybook documentation. +If using in conjunction with the [storyshots add-on](../storyshots/storyshots-core/README.md), you will need to +configure Jest to transform MDX stories into something Storyshots can understand: + +Add the following to your Jest configuration: + +```json +{ + "transform": { + "^.+\\.[tj]sx?$": "babel-jest", + "^.+\\.mdx$": "@storybook/addon-docs/jest-transform-mdx" + } +} +``` + +### Be sure to check framework specific installation needs + +- [Angular](./angular) +- [Vue](./vue) +- [Web Components](./web-components) + ## Preset options The `addon-docs` preset has a few configuration options that can be used to configure its babel/webpack loading behavior. Here's an example of how to use the preset with options: @@ -162,7 +183,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 +232,7 @@ 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/angular/README.md b/addons/docs/angular/README.md new file mode 100644 index 000000000000..3648eda12040 --- /dev/null +++ b/addons/docs/angular/README.md @@ -0,0 +1,164 @@ +

+ +
+ +# Storybook Docs for Angular + +Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for Angular supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs. + +To learn more about Storybook Docs, read the [general documentation](../README.md). To learn the Angular specifics, read on! + +- [Installation](#installation) +- [DocsPage](#docspage) +- [MDX](#mdx) +- [IFrame height](#iframe-height) +- [More resources](#more-resources) + +## Installation + +First add the package. Make sure that the versions for your `@storybook/*` packages match: + +```sh +yarn add -D @storybook/addon-docs@next +``` + +Then add the following to your `.storybook/presets.js` exports: + +```js +module.exports = ['@storybook/addon-docs/preset']; +``` + +## DocsPage + +When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI. + +Props tables for your components requires a few more steps. Docs for Angular relies on [Compodoc](https://compodoc.app/), the excellent API documentation tool. It supports `inputs`, `outputs`, `properties`, `methods`, `view/content child/children` as first class prop types. + +To get this, you'll first need to install Compodoc: + +```sh +yarn add -D @compodoc/compodoc +``` + +Then you'll need to configure Compodoc to generate a `documentation.json` file. Adding the following snippet to your `package.json` creates a metadata file `./documentation.json` each time you run storybook: + +```json +{ + ... + "scripts": { + "docs:json": "compodoc -p ./tsconfig.json -e json -d .", + "storybook": "npm run docs:json && start-storybook -p 9008 -s src/assets", + ... + }, +} +``` + +Unfortunately, it's not currently possible to update this dynamically as you edit your components, but [there's an open issue](https://github.com/storybookjs/storybook/issues/8672) to support this with improvements to Compodoc. + +Next, add the following to your `.storybook/config.json` to load the Compodoc-generated file: + +```js +import { setCompodocJson } from '@storybook/addon-docs/angular'; +import docJson from '../documentation.json'; +setCompodocJson(docJson); +``` + +Finally, be sure to fill in the `component` field in your story metadata: + +```ts +import { AppComponent } from './app.component'; + +export default { + title: 'App Component', + component: AppComponent, +}; +``` + +If you haven't upgraded from `storiesOf`, you can use a parameter to do the same thing: + +```ts +import { storiesOf } from '@storybook/angular'; +import { AppComponent } from './app.component'; + +storiesOf('App Component', module) + .addParameters({ component: AppComponent }) + .add( ... ); +``` + +## MDX + +[MDX](../docs/mdx.md) is a convenient way to document your components in Markdown and embed documentation components, such as stories and props tables, inline. + +Docs has peer dependencies on `react`, `react-is`, and `babel-loader`. If you want to write stories in MDX, you'll need to add these dependencies as well: + +```sh +yarn add -D react react-is babel-loader +``` + +Then update your `.storybook/config.ts` to make sure you load MDX files: + +```ts +configure(require.context('../src/stories', true, /\.stories\.(ts|mdx)$/), module); +``` + +Finally, you can create MDX files like this: + +```md +import { Meta, Story, Props } from '@storybook/addon-docs/blocks'; +import { AppComponent } from './app.component'; + + + +# App Component + +Some **markdown** description, or whatever you want. + +{{ + component: AppComponent, + props: {}, +}} + +## Props + + +``` + +Yes, it's redundant to declare `component` twice. [Coming soon](https://github.com/storybookjs/storybook/issues/8673). + +Also, to use the `Props` doc block, you need to set up Compodoc, [as described above](#docspage). + +## IFrame height + +Storybook Docs renders all Angular stories inside IFrames, with a default height of `60px`. You can update this default globally, or modify the IFrame height locally per story in `DocsPage` and `MDX`. + +To update the global default, modify `.storybook/config.ts`: + +```ts +import { addParameters } from '@storybook/angular'; + +addParameters({ docs: { iframeHeight: 400 } }); +``` + +For `DocsPage`, you need to update the parameter locally in a story: + +```ts +export const basic = () => ... +basic.story = { + parameters: { docs: { iframeHeight: 400 } } +} +``` + +And for `MDX` you can modify it as an attribute on the `Story` element: + +```md +{...} +``` + +## More resources + +Want to learn more? Here are some more articles on Storybook Docs: + +- References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md) +- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) +- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) +- Example: [Storybook Design System](https://github.com/storybookjs/design-system) diff --git a/addons/docs/angular/config.js b/addons/docs/angular/config.js deleted file mode 100644 index 52f6248698b5..000000000000 --- a/addons/docs/angular/config.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('../dist/frameworks/angular/config'); diff --git a/addons/docs/angular/index.js b/addons/docs/angular/index.js index 135f6edf2325..0c9b4dd4dba3 100644 --- a/addons/docs/angular/index.js +++ b/addons/docs/angular/index.js @@ -1 +1 @@ -module.exports = require('../dist/frameworks/common/index'); +module.exports = require('../dist/frameworks/angular/index'); diff --git a/addons/docs/common/index.js b/addons/docs/common/index.js index ab2313695b6d..ac54d6be1af0 100644 --- a/addons/docs/common/index.js +++ b/addons/docs/common/index.js @@ -1,2 +1 @@ -// FIXME: move this to typescript and src/react folder -module.exports = require('../dist/lib/getPropDefs'); +module.exports = require('../dist/frameworks/common'); diff --git a/addons/docs/docs/docspage.md b/addons/docs/docs/docspage.md index b46db8fb4713..5e286be9ee44 100644 --- a/addons/docs/docs/docspage.md +++ b/addons/docs/docs/docspage.md @@ -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'; @@ -77,6 +77,8 @@ Here is a summary of the slots, where the data comes from by default, and the sl | Props | component docgen props or propTypes | `propsSlot` | React, Vue | | Stories | storybook stories | `storiesSlot` | All | +The `storiesSlot` uses the `docs.storyDescription` parameter to show a description for each story, if available. + For more information on frameworks, see ["Framework support"](../README.md#framework-support) ### Title @@ -114,7 +116,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 +201,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,11 +239,36 @@ 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 `