diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 81169f1382f..c23f1075713 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -7,12 +7,12 @@ /addons/centered/ @kazupon /addons/events/ @z4o4z @ndelangen /addons/graphql/ @mnmtanish -/addons/info/ @theinterned @z4o4z @UsulPro @dangreenisrael @danielduan +/addons/info/ @theinterned @z4o4z @UsulPro @dangreenisrael /addons/jest/ @renaudtertrais /addons/knobs/ @alexandrebodin @theinterned @leonrodenburg @alterx /addons/links/ @ndelangen /addons/notes/ @alexandrebodin -/addons/options/ @danielduan @UsulPro +/addons/options/ @UsulPro /addons/storyshots/ @igor-dv @thomasbertet /addons/storysource/ @igor-dv /addons/viewport/ @saponifi3d @@ -20,7 +20,7 @@ /app/angular/ @alterx @igor-dv /app/polymer/ @ndelangen @naipath @leonrodenburg /app/react/ @xavcz @shilman @thomasbertet -/app/react-native/ @rmevans9 @danielduan @Gongreg @tmeasday +/app/react-native/ @rmevans9 @Gongreg @tmeasday /app/vue/ @thomasbertet @kazupon /app/svelte/ @plumpNation @@ -29,12 +29,12 @@ /examples/angular-cli/ @igor-dv @alterx /examples/cra-kitchen-sink/ @ndelangen @UsulPro /examples/cra-ts-kitchen-sink/ @mucsi96 -/examples/official-storybook/ @danielduan @UsulPro +/examples/official-storybook/ @UsulPro /examples/polymer-cli/ @naipath @igor-dv /examples/vue-kitchen-sink/ @igor-dv @alexandrebodin /examples/svelte-kitchen-sink/ @plumpNation -/examples-native/crna-kitchen-sink/ @Gongreg @danielduan +/examples-native/crna-kitchen-sink/ @Gongreg /lib/addons/ @ndelangen @theinterned /lib/channel-postmessage/ @mnmtanish @ndelangen diff --git a/.github/main.workflow b/.github/main.workflow deleted file mode 100644 index 6cbd4dcdcb7..00000000000 --- a/.github/main.workflow +++ /dev/null @@ -1,32 +0,0 @@ -action "Danger JS" { - uses = "danger/danger-js@master" - secrets = ["GITHUB_TOKEN"] - args = "--dangerfile .ci/danger/dangerfile.ts" -} - -workflow "Dangerfile JS Pull" { - on = "pull_request" - resolves = "Danger JS" -} - -workflow "Dangerfile JS Label" { - on = "label" - resolves = "Danger JS" -} - -# === - -action "Automention" { - uses = "shilman/automention@master" - secrets = ["GITHUB_TOKEN"] -} - -workflow "Automention Issues" { - on = "issues" - resolves = "Automention" -} - -workflow "Automention PRs" { - on = "pull_request" - resolves = "Automention" -} \ No newline at end of file diff --git a/.github/workflows/issues.yml b/.github/workflows/issues.yml new file mode 100644 index 00000000000..ae3f37a4c57 --- /dev/null +++ b/.github/workflows/issues.yml @@ -0,0 +1,12 @@ +on: issues +name: Automention Issues +jobs: + automention: + name: Automention + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@master + - name: Automention + uses: shilman/automention@master + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/label.yml b/.github/workflows/label.yml new file mode 100644 index 00000000000..1ad95fd643c --- /dev/null +++ b/.github/workflows/label.yml @@ -0,0 +1,14 @@ +on: label +name: Dangerfile JS Label +jobs: + dangerJS: + name: Danger JS + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@master + - name: Danger JS + uses: danger/danger-js@master + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + args: --dangerfile .ci/danger/dangerfile.ts diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml new file mode 100644 index 00000000000..6c6784258e8 --- /dev/null +++ b/.github/workflows/nodejs.yml @@ -0,0 +1,24 @@ +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/pull_request-automention-prs.yml b/.github/workflows/pull_request-automention-prs.yml new file mode 100644 index 00000000000..ea2a220c29a --- /dev/null +++ b/.github/workflows/pull_request-automention-prs.yml @@ -0,0 +1,12 @@ +on: pull_request +name: Automention PRs +jobs: + automention: + name: Automention + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@master + - name: Automention + uses: shilman/automention@master + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/pull_request-dangerfile-js-pull.yml b/.github/workflows/pull_request-dangerfile-js-pull.yml new file mode 100644 index 00000000000..0a50068bc8a --- /dev/null +++ b/.github/workflows/pull_request-dangerfile-js-pull.yml @@ -0,0 +1,14 @@ +on: pull_request +name: Dangerfile JS Pull +jobs: + dangerJS: + name: Danger JS + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@master + - name: Danger JS + uses: danger/danger-js@master + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + args: --dangerfile .ci/danger/dangerfile.ts diff --git a/.gitignore b/.gitignore index 0830b92f408..124238c64b8 100644 --- a/.gitignore +++ b/.gitignore @@ -30,4 +30,5 @@ scripts/storage htpasswd /false storybook-out -/addons/docs/common/config-* \ No newline at end of file +/addons/docs/common/config-* +built-storybooks diff --git a/.npmignore b/.npmignore deleted file mode 100644 index 5bd91d1c926..00000000000 --- a/.npmignore +++ /dev/null @@ -1,10 +0,0 @@ -/example/ -/demo/ -/docs/ -/media/ -/node_modules/ -/.storybook/ - -*.md - -.babelrc diff --git a/CHANGELOG.md b/CHANGELOG.md index 3f92a93b8f6..c272661d490 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,319 @@ +## 5.2.1 (September 17, 2019) + +### Bug Fixes + +* Core: Fix error handling ([#8097](https://github.com/storybookjs/storybook/pull/8097)) + +## 5.3.0-alpha.0 (September 16, 2019) + +### Features + +* UI: Debounce sidebar search filter ([#8032](https://github.com/storybookjs/storybook/pull/8032)) + +### Bug Fixes + +* Core: Fix error handling ([#8097](https://github.com/storybookjs/storybook/pull/8097)) + +### Maintenance + +* CLI: Add wrapper packages: sb & storybook ([#8034](https://github.com/storybookjs/storybook/pull/8034)) +* Build: Update now config ([#8049](https://github.com/storybookjs/storybook/pull/8049)) + +## 5.2.0 (September 13, 2019) + +Storybook 5.2 is here! + +- 📚 DocsPage: Zero-config documentation +- 📦 Component Story Format: Portable ES6 modules +- 🖼 Design System: Best practice component development +- 🧩 Addon API: Simplified w/ hooks + +5.2 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.2.0-alpha.*`, `5.2.0-beta.*`, and `5.2.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to upgrade from `5.0` or earlier. + +## 5.2.0-rc.11 (September 10, 2019) + +### Features + +* DocsPage: show docs.storyDescription above story ([#8037](https://github.com/storybookjs/storybook/pull/8037)) + +### Maintenance + +* Migrate to new github actions ([#8045](https://github.com/storybookjs/storybook/pull/8045)) + +## 5.2.0-rc.10 (September 9, 2019) + +### Bug Fixes + +* Angular: remove webpack-env from tsconfig types ([#8036](https://github.com/storybookjs/storybook/pull/8036)) + +### Documentation + +* Guides: Update all guides to CSF ([#8030](https://github.com/storybookjs/storybook/pull/8030)) + +## 5.2.0-rc.9 (September 7, 2019) + +### Bug Fixes + +* Addon-knobs: allow array values in select and options knobs ([#8027](https://github.com/storybookjs/storybook/pull/8027)) + +## 5.2.0-rc.8 (September 6, 2019) + +### Bug Fixes + +* Addon-docs: Scroll story into view ([#7994](https://github.com/storybookjs/storybook/pull/7994)) +* Addon-docs: Fix LI styling for dark color theme ([#8015](https://github.com/storybookjs/storybook/pull/8015)) + +## 5.2.0-rc.7 (September 6, 2019) + +Publish failed + +## 5.2.0-rc.6 (September 5, 2019) + +### Bug Fixes + +* Addon-docs: Doc blocks fixes for dark theme ([#7991](https://github.com/storybookjs/storybook/pull/7991)) +* API: Fix useEfect in inline Docs ([#7992](https://github.com/storybookjs/storybook/pull/7992)) +* UI: Fix enableShortcuts option ([#7990](https://github.com/storybookjs/storybook/pull/7990)) +* Addon-docs: Error handling for invalid Story id ([#7965](https://github.com/storybookjs/storybook/pull/7965)) + +## 5.2.0-rc.5 (September 4, 2019) + +### Bug Fixes + +* CLI: Force welcome stories to show up first in load order ([#7979](https://github.com/storybookjs/storybook/pull/7979)) + +## 5.2.0-rc.4 (September 3, 2019) + +### Bug Fixes + +* Addon-docs: Fix MDX theme bleed with reset context ([#7974](https://github.com/storybookjs/storybook/pull/7974)) + +## 5.2.0-rc.3 (September 3, 2019) + +Failed publish + +## 5.2.0-rc.2 (September 1, 2019) + +### Bug Fixes + +* Addon-docs: Fix inline stories using react hooks ([#7946](https://github.com/storybookjs/storybook/pull/7946)) + +## 5.2.0-rc.1 (August 31, 2019) + +### Features + +* Core: Add html lang attribute to iframe ([#7892](https://github.com/storybookjs/storybook/pull/7892)) + +### Bug Fixes + +* Source-loader: Fix CSF display name handling ([#7940](https://github.com/storybookjs/storybook/pull/7940)) +* React-native: Resolve deprecated methods ([#7908](https://github.com/storybookjs/storybook/pull/7908)) +* Addon-viewport: keep styles on rotation-change ([#7683](https://github.com/storybookjs/storybook/pull/7683)) +* Addon-viewport: Fix defaultViewport ([#7934](https://github.com/storybookjs/storybook/pull/7934)) + +## 5.2.0-rc.0 (August 30, 2019) + +5.2 is in RC!!! 🎉What this means: + +- no glaring bugs relating to new features (that we know of) +- bugfixes only until 5.2 final +- follow-on features to be released in `5.3-alpha` ASAP + +Track progress on the [5.2 release issue](https://github.com/storybookjs/storybook/issues/7430) + +## 5.2.0-beta.48 (August 30, 2019) + +### Bug Fixes + +* Addon-docs: Fix docs-only story ID suffix ([#7921](https://github.com/storybookjs/storybook/pull/7921)) + +### Maintenance + +* Replace favicon with new Storybook icon. ([#7922](https://github.com/storybookjs/storybook/pull/7922)) + +### Dependency Upgrades + +* Bump react-draggable from 3.1.1 to 3.3.2 ([#7912](https://github.com/storybookjs/storybook/pull/7912)) + +## 5.2.0-beta.47 (August 30, 2019) + +### Bug Fixes + +* UI: Optimize treeview render/filter performance ([#7910](https://github.com/storybookjs/storybook/pull/7910)) +* Addon-docs: Fix DocsPage to respect displayName ([#7915](https://github.com/storybookjs/storybook/pull/7915)) + +## 5.2.0-beta.46 (August 29, 2019) + +CSF users: this reverts the `makeDisplayName` change introduced in `5.2.0-beta.43` for maintainability reasons. See [#7901](https://github.com/storybookjs/storybook/pull/7901) for full rationale. And apologies for the inconvenience! + +### Bug Fixes + +* React: Fix missing props in the Welcome.tsx demo ([#7774](https://github.com/storybookjs/storybook/pull/7774)) + +### Maintenance + +* CSF: Revert `makeDisplayName` & add stable `storyNameFromExport` ([#7901](https://github.com/storybookjs/storybook/pull/7901)) +* Addon-a11y: Upgrade axe to 3.3.2 which adds/mods rules ([#7888](https://github.com/storybookjs/storybook/pull/7888)) + +## 5.2.0-beta.45 (August 28, 2019) + +### Bug Fixes + +* Addon-docs: Fix MDX Story ID to match new CSF ([#7894](https://github.com/storybookjs/storybook/pull/7894)) + +## 5.2.0-beta.44 (August 28, 2019) + +Publish failed + +## 5.2.0-beta.43 (August 28, 2019) + +CSF users: This is potentially a breaking change. If you want to opt-out of the new default display name calculation (`lodash.startCase`) you can add the following to your SB config: + +```js +addParameters({ options: { makeDisplayName: key => key }}); +``` + +### Features + +* CSF: Transform CSF named exports w/ `makeDisplayName` ([#7878](https://github.com/storybookjs/storybook/pull/7878)) + +## 5.2.0-beta.42 (August 28, 2019) + +Addon-docs users: This is a breaking change if you have been hacking the `docs` parameter manually. If you're using the zero-config option for `DocsPage` or `MDX`, you should be unaffected by it. + +### Maintenance + +* Addon-docs: Make config API consistent with other addons ([#7874](https://github.com/storybookjs/storybook/pull/7874)) + +## 5.2.0-beta.41 (August 27, 2019) + +### Features + +* Addon-info: Add configurable component comparator ([#7409](https://github.com/storybookjs/storybook/pull/7409)) + +### Bug Fixes + +* Addon-viewports: Add back default viewports ([#7448](https://github.com/storybookjs/storybook/pull/7448)) +* Core: Pass a separate hooks context per story ([#7860](https://github.com/storybookjs/storybook/pull/7860)) +* UI: Fix TooltipLinkList not scrollable ([#7865](https://github.com/storybookjs/storybook/pull/7865)) + +### Maintenance + +* UI: Add ignore `first-child` selector warning flag ([#7861](https://github.com/storybookjs/storybook/pull/7861)) + +## 5.2.0-beta.40 (August 23, 2019) + +### Bug Fixes + +* Addon-docs: Fix DocsPage primary story switching ([#7849](https://github.com/storybookjs/storybook/pull/7849)) +* Source-loader: Selectively ignore typescript errors in generated code ([#7845](https://github.com/storybookjs/storybook/pull/7845)) +* Addon-docs: Force hidden attribute on #root element ([#7841](https://github.com/storybookjs/storybook/pull/7841)) + +### Maintenance + +* Remove temporarily added --no-dll option on examples ([#7647](https://github.com/storybookjs/storybook/pull/7647)) + +## 5.2.0-beta.39 (August 22, 2019) + +### Bug Fixes + +* React-Native: Fix tabs layout issue on simulator ([#7809](https://github.com/storybookjs/storybook/pull/7809)) +* Source-loader: Selectively ignore typescript errors in generated code ([#7831](https://github.com/storybookjs/storybook/pull/7831)) + +## 5.2.0-beta.38 (August 21, 2019) + +### Bug Fixes + +* FIX issue where the block of build info (including url) wouldn't show if passed --ci #7821 ([#7822](https://github.com/storybookjs/storybook/pull/7822)) + +### Maintenance + +* CLI: Remove babel-register in favor of esm ([#7823](https://github.com/storybookjs/storybook/pull/7823)) + +## 5.2.0-beta.37 (August 20, 2019) + +### Breaking Changes + +* Addon-docs: Add docsContainer parameter ([#7814](https://github.com/storybookjs/storybook/pull/7814)) + +## 5.2.0-beta.36 (August 20, 2019) + +### Features + +* Addon-docs: Improved "No docs" message ([#7785](https://github.com/storybookjs/storybook/pull/7785)) +* Core: Add .pdf support to file-loader ([#7651](https://github.com/storybookjs/storybook/pull/7651)) + +### Bug Fixes + +* Preview hooks: trigger effects after story render ([#7791](https://github.com/storybookjs/storybook/pull/7791)) + +## 5.2.0-beta.35 (August 20, 2019) + +Failed publish + +## 5.2.0-beta.34 (August 20, 2019) + +Failed publish + +## 5.2.0-beta.33 (August 18, 2019) + +### Features + +* Addon-jest: Add pending & todo items ([#7793](https://github.com/storybookjs/storybook/pull/7793)) + +### Bug Fixes + +* Addon-docs: Fix unique key warning ([#7796](https://github.com/storybookjs/storybook/pull/7796)) + +## 5.2.0-beta.32 (August 17, 2019) + +### Bug Fixes + +* Addon-docs: Fix docs-only story load ([#7787](https://github.com/storybookjs/storybook/pull/7787)) + +### Maintenance + +* Addon-docs: Unwrap doc blocks stories ([#7788](https://github.com/storybookjs/storybook/pull/7788)) + +## 5.2.0-beta.31 (August 16, 2019) + +### Features + +* Addon-docs: Add toolbar support to Preview ([#7778](https://github.com/storybookjs/storybook/pull/7778)) + +### Bug Fixes + +* Addon-docs: Fix CSS bleed issue in doc blocks ([#7771](https://github.com/storybookjs/storybook/pull/7771)) + +## 5.2.0-beta.30 (August 14, 2019) + +### Features + +* CLI: Don't output startup information on smoke test ([#6949](https://github.com/storybookjs/storybook/pull/6949)) +* Ondevice-knobs: Expose withKnobs from addon-knobs ([#7555](https://github.com/storybookjs/storybook/pull/7555)) + +### Maintenance + +* Addon-Jest: Add flexibility ([#7748](https://github.com/storybookjs/storybook/pull/7748)) + +## 5.1.11 (August 13, 2019) + +### Bug Fixes + +* Core: Add polyfill for fetch ([#7401](https://github.com/storybookjs/storybook/pull/7401)) +* Core: Revert "Fix #7167 addon-centered causes component to disappear when zooming" ([#7750](https://github.com/storybookjs/storybook/pull/7750)) + +## 5.2.0-beta.29 (August 13, 2019) + +### Breaking Changes + +* Addon-docs: Packaging for 5.2 release ([#7741](https://github.com/storybookjs/storybook/pull/7741)) + +### Bug Fixes + +* Core: Revert "Fix #7167 addon-centered causes component to disappear when zooming" ([#7750](https://github.com/storybookjs/storybook/pull/7750)) +* Core: Revert "Addon-centered: Fix disappearing when zoomed" ([#7749](https://github.com/storybookjs/storybook/pull/7749)) + ## 5.2.0-beta.28 (August 10, 2019) ### Features @@ -725,7 +1041,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) @@ -1817,7 +2133,7 @@ Storybook 5.0 is a completely new UI with the following improvements: - ⌨️ Improved keyboard shortcuts that are user configurable - 🌍 New URL structure that eliminates long strings of query parameters - 5.0 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.0.0-alpha.*`, `5.0.0-beta.*`, and `5.0.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to ugprade from `4.x`. + 5.0 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.0.0-alpha.*`, `5.0.0-beta.*`, and `5.0.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to upgrade from `4.x`. ## 5.0.0-rc.11 (March 5, 2019) diff --git a/MIGRATION.md b/MIGRATION.md index 03a0c652874..059d3ea0f91 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -67,6 +67,21 @@ ## From version 5.1.x to 5.2.x +### default viewports + +The default viewports have been reduced to a smaller set, we think is enough for most usecases. +You can get the old default back by adding the following to your `config.js`: + +```js +import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; + +addParameters({ + viewport: { + viewports: INITIAL_VIEWPORTS, + }, +}); +``` + ### Grid toolbar-feature The grid feature in the toolbar has been relocated to [addon-background](https://github.com/storybookjs/storybook/tree/next/addons/backgrounds), follow the setup intructions on that addon to get the feature again. diff --git a/README.md b/README.md index 9f1ec997604..f80eb15121a 100644 --- a/README.md +++ b/README.md @@ -1,38 +1,62 @@ -# Storybook -

- Build Status on CircleCI - CodeFactor - Known Vulnerabilities - BCH compliance - codecov - License

-

-

- - Storybook Slack - Backers on Open Collective - Sponsors on Open Collective - Official Twitter Handle + + Storybook +

---- +

Build bulletproof UI components faster

+ +
+ +

+ + Build Status on CircleCI + + + CodeFactor + + + Known Vulnerabilities + + + codecov + + + License + +
+ + + + + Storybook Slack + + + Backers on Open Collective + + + Sponsors on Open Collective + + + Official Twitter Handle + +

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. -## Intro -

- README for:
+ View README for:
latest next

+## Intro + Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies. Here are some featured examples that you can reference to see how Storybook works: diff --git a/addons/a11y/README.md b/addons/a11y/README.md index 7d1fc351692..584e49f6702 100755 --- a/addons/a11y/README.md +++ b/addons/a11y/README.md @@ -45,7 +45,7 @@ storiesOf('button', module) ``` For more customizability. Use the `addParameters` function to configure [aXe options](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure). -You can override these options at story level too. +You can override these options [at story level too](https://storybook.js.org/docs/configurations/options-parameter/#per-story-options). ```js import React from 'react'; diff --git a/addons/a11y/package.json b/addons/a11y/package.json index 4fe2a5f5c14..8e7209b3a7d 100644 --- a/addons/a11y/package.json +++ b/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "5.2.0-beta.28", + "version": "5.3.0-alpha.0", "description": "a11y addon for storybook", "keywords": [ "a11y", @@ -20,19 +20,25 @@ "directory": "addons/a11y" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "register.js" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.28", - "@storybook/api": "5.2.0-beta.28", - "@storybook/client-logger": "5.2.0-beta.28", - "@storybook/components": "5.2.0-beta.28", - "@storybook/core-events": "5.2.0-beta.28", - "@storybook/theming": "5.2.0-beta.28", - "axe-core": "^3.2.2", + "@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", + "axe-core": "^3.3.2", "common-tags": "^1.8.0", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap b/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap index c5ef61d7253..ecdb07f6dbd 100644 --- a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap +++ b/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap @@ -139,6 +139,7 @@ exports[`A11YPanel should render report 1`] = ` background: #FFFFFF; font-size: 12px; line-height: 16px; + font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 700; border-top: 1px solid rgba(0,0,0,.1); border-left: 1px solid rgba(0,0,0,.1); @@ -215,13 +216,13 @@ exports[`A11YPanel should render report 1`] = ` "insert": [Function], "inserted": Object { "0": true, - "110qmus": true, "11xgcgt": true, "1551xjo": true, "15paq49": true, "1977chw": true, "19mcg9j": true, "1ez3l8h": true, + "1imo1gr": true, "1kbt4a0": true, "1l7fvsg": true, "1vwgrhn": true, @@ -497,7 +498,7 @@ exports[`A11YPanel should render report 1`] = ` data-emotion="css" > - .emotion-3{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;} + .emotion-3{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;} , +``` + +> NOTE: All of these elements also have the `sbdocs` class, which is simply an idiomatic way of increasing the CSS specificity so you don't have to use `!important`. + +## MDX component overrides + +If you're using MDX, there's one more level of themability. MDX allows you to [completely override the components](https://mdxjs.com/advanced/components) that are rendered from markdown using a `components` parameter. This is an advanced usage that we don't officially support in Storybook, but it's a powerful mechanism if you need it. + +Here's how you might insert a custom code renderer for `code` blocks on the page, in `.storybook/config.js`: + +```js +import { addParameters } from '@storybook/react'; +import { CodeBlock } from './CodeBlock'; + +addParameters({ + docs: { + components: { + code: CodeBlock, + }, + }, +}); +``` + +## More resources + +Want to learn more? Here are some more articles on Storybook Docs: + +- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) +- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) +- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) +- Example: [Storybook Design System](https://github.com/storybookjs/design-system) +- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing) diff --git a/addons/docs/package.json b/addons/docs/package.json index 026dba7c2f3..b80e9ad0bc1 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "5.2.0-beta.28", + "version": "5.3.0-alpha.0", "description": "Superior documentation for your components", "keywords": [ "addon", @@ -17,6 +17,19 @@ "directory": "addons/docs" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "angular/**/*", + "common/**/*", + "html/**/*", + "react/**/*", + "vue/**/*", + "README.md", + "blocks.js", + "mdx-compiler-plugin.js", + "register.js" + ], "main": "dist/public_api.js", "types": "dist/public_api.d.ts", "scripts": { @@ -25,15 +38,16 @@ "dependencies": { "@babel/generator": "^7.4.0", "@babel/parser": "^7.4.2", + "@babel/plugin-transform-react-jsx": "^7.3.0", "@mdx-js/loader": "^1.1.0", "@mdx-js/mdx": "^1.1.0", "@mdx-js/react": "^1.0.27", - "@storybook/addons": "5.2.0-beta.28", - "@storybook/api": "5.2.0-beta.28", - "@storybook/components": "5.2.0-beta.28", - "@storybook/router": "5.2.0-beta.28", - "@storybook/source-loader": "5.2.0-beta.28", - "@storybook/theming": "5.2.0-beta.28", + "@storybook/addons": "5.3.0-alpha.0", + "@storybook/api": "5.3.0-alpha.0", + "@storybook/components": "5.3.0-alpha.0", + "@storybook/router": "5.3.0-alpha.0", + "@storybook/source-loader": "5.3.0-alpha.0", + "@storybook/theming": "5.3.0-alpha.0", "core-js": "^3.0.1", "global": "^4.3.2", "js-string-escape": "^1.0.1", @@ -46,7 +60,8 @@ "@types/webpack-env": "^1.13.7" }, "peerDependencies": { - "react": "*" + "babel-loader": "^8.0.0", + "react": "^16.8.0" }, "publishConfig": { "access": "public" diff --git a/addons/docs/src/blocks/Anchor.tsx b/addons/docs/src/blocks/Anchor.tsx new file mode 100644 index 00000000000..6e7dd721541 --- /dev/null +++ b/addons/docs/src/blocks/Anchor.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +export const anchorBlockIdFromId = (storyId: string) => `anchor--${storyId}`; + +export interface AnchorProps { + storyId: string; +} + +export const Anchor: React.FC = ({ storyId, children }) => ( +
{children}
+); diff --git a/addons/docs/src/blocks/DocsContainer.tsx b/addons/docs/src/blocks/DocsContainer.tsx index 1e829cbbfbd..03bb11b1913 100644 --- a/addons/docs/src/blocks/DocsContainer.tsx +++ b/addons/docs/src/blocks/DocsContainer.tsx @@ -1,49 +1,75 @@ -/* eslint-disable react/destructuring-assignment */ - import React from 'react'; +import { document } from 'global'; import { MDXProvider } from '@mdx-js/react'; -import { Global, createGlobal, ThemeProvider, ensure as ensureTheme } from '@storybook/theming'; -import { DocumentFormatting, DocsWrapper, DocsContent } from '@storybook/components'; +import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming'; +import { DocsWrapper, DocsContent, Source } from '@storybook/components'; +import { components as htmlComponents, Code } from '@storybook/components/html'; import { DocsContextProps, DocsContext } from './DocsContext'; +import { anchorBlockIdFromId } from './Anchor'; +import { storyBlockIdFromId } from './Story'; interface DocsContainerProps { context: DocsContextProps; - content: React.ElementType; } -const defaultComponents = { - // p: ({ children }) => {children}, - wrapper: DocumentFormatting, +interface CodeOrSourceProps { + className?: string; +} +export const CodeOrSource: React.FC = props => { + const { className, children, ...rest } = props; + // markdown-to-jsx does not add className to inline code + if ( + typeof className !== 'string' && + (typeof children !== 'string' || !(children as string).match(/[\n\r]/g)) + ) { + return {children}; + } + // className: "lang-jsx" + const language = className && className.split('-'); + return ( + + ); }; -const globalWithOverflow = (args: any) => { - const global = createGlobal(args); - const { body, ...rest } = global; - const { overflow, ...bodyRest } = body; - return { - body: bodyRest, - ...rest, - }; +const defaultComponents = { + ...htmlComponents, + code: CodeOrSource, }; export const DocsContainer: React.FunctionComponent = ({ context, - content: MDXContent, + children, }) => { - const parameters = (context && context.parameters) || {}; + const { id: storyId = null, parameters = {} } = context || {}; const options = parameters.options || {}; const theme = ensureTheme(options.theme); - const { components: userComponents = null } = options.docs || {}; + const { components: userComponents = null } = parameters.docs || {}; const components = { ...defaultComponents, ...userComponents }; + + React.useEffect(() => { + let element = document.getElementById(anchorBlockIdFromId(storyId)); + if (!element) { + element = document.getElementById(storyBlockIdFromId(storyId)); + } + if (element) { + element.scrollIntoView({ + behavior: 'smooth', + block: 'end', + inline: 'nearest', + }); + } + }, [storyId]); return ( - - - - - + + {children} diff --git a/addons/docs/src/blocks/DocsContext.ts b/addons/docs/src/blocks/DocsContext.ts index 26efed04813..ac71a1d545b 100644 --- a/addons/docs/src/blocks/DocsContext.ts +++ b/addons/docs/src/blocks/DocsContext.ts @@ -6,15 +6,11 @@ export interface DocsContextProps { selectedStory?: string; /** - * mdxKind is a statically-generated "kind" that corresponds to the - * component that's being documented in the MDX file, It's combined - * with the MDX story name `...` to - * generate a storyId. In the case that the user is viewing a non-MDX - * story, the value of `mdxKind` will be the currently-selected kind. - * (I can't remember the corner case in which using the currentl-selected - * kind breaks down in MDX-defined stories, but there is one!) + * mdxStoryNameToId is an MDX-compiler-generated mapping of an MDX story's + * display name to its storyId. It's used internally by the `` + * doc block. */ - mdxKind?: string; + mdxStoryNameToId?: Record; parameters?: any; storyStore?: any; forceRender?: () => void; diff --git a/addons/docs/src/blocks/DocsPage.tsx b/addons/docs/src/blocks/DocsPage.tsx index b2486bcf6bd..6192bb27d85 100644 --- a/addons/docs/src/blocks/DocsPage.tsx +++ b/addons/docs/src/blocks/DocsPage.tsx @@ -1,41 +1,43 @@ import React from 'react'; import { parseKind } from '@storybook/router'; -import { styled } from '@storybook/theming'; -import { - DocsPage as PureDocsPage, - DocsPageProps as PureDocsPageProps, - PropsTable, - PropsTableProps, -} from '@storybook/components'; -import { DocsContext, DocsContextProps } from './DocsContext'; -import { DocsContainer } from './DocsContainer'; +import { DocsPage as PureDocsPage, PropsTable, PropsTableProps } from '@storybook/components'; +import { H2, H3 } from '@storybook/components/html'; +import { DocsContext } from './DocsContext'; import { Description, getDocgen } from './Description'; import { Story } from './Story'; import { Preview } from './Preview'; -import { Props, getPropsTableProps } from './Props'; +import { Anchor } from './Anchor'; +import { getPropsTableProps } from './Props'; -export type StringSlot = (context: DocsContextProps) => string | void; -export type PropsSlot = (context: DocsContextProps) => PropsTableProps | void; -export type StorySlot = ( - storyData: StoryData, - isPrimary: boolean, - context: DocsContextProps -) => DocsStoryProps; +export interface SlotContext { + id?: string; + selectedKind?: string; + selectedStory?: string; + parameters?: any; + storyStore?: any; +} + +export type StringSlot = (context: SlotContext) => string | void; +export type PropsSlot = (context: SlotContext) => PropsTableProps | void; +export type StorySlot = (stories: StoryData[], context: SlotContext) => DocsStoryProps | void; +export type StoriesSlot = (stories: StoryData[], context: SlotContext) => DocsStoryProps[] | void; export interface DocsPageProps { titleSlot: StringSlot; subtitleSlot: StringSlot; descriptionSlot: StringSlot; + primarySlot: StorySlot; propsSlot: PropsSlot; - storySlot: StorySlot; + storiesSlot: StoriesSlot; } interface DocsStoryProps { id: string; name: string; - description?: string; expanded?: boolean; + withToolbar?: boolean; + parameters?: any; } interface StoryData { @@ -58,39 +60,50 @@ const defaultTitleSlot: StringSlot = ({ selectedKind, parameters }) => { }; const defaultSubtitleSlot: StringSlot = ({ parameters }) => - parameters && parameters.componentDescription; + parameters && parameters.componentSubtitle; const defaultPropsSlot: PropsSlot = context => getPropsTableProps({ of: '.' }, context); const defaultDescriptionSlot: StringSlot = ({ parameters }) => parameters && getDocgen(parameters.component); -const defaultStorySlot: StorySlot = (storyData, isPrimary, context) => storyData; +const defaultPrimarySlot: StorySlot = stories => stories && stories[0]; +const defaultStoriesSlot: StoriesSlot = stories => { + if (stories && stories.length > 1) { + const [first, ...rest] = stories; + return rest; + } + return null; +}; -const StoriesHeading = styled.h2(); -const StoryHeading = styled.h3(); +const StoriesHeading = H2; +const StoryHeading = H3; const DocsStory: React.FunctionComponent = ({ id, name, - description, expanded = true, + withToolbar = false, + parameters, }) => ( - <> - {expanded && {name}} - {expanded && description && } - + + {expanded && {(parameters && parameters.displayName) || name}} + {expanded && parameters && parameters.docs && parameters.docs.storyDescription && ( + + )} + - + ); -const DocsPage: React.FunctionComponent = ({ - titleSlot, - subtitleSlot, - descriptionSlot, - propsSlot, - storySlot, +export const DocsPage: React.FunctionComponent = ({ + titleSlot = defaultTitleSlot, + subtitleSlot = defaultSubtitleSlot, + descriptionSlot = defaultDescriptionSlot, + primarySlot = defaultPrimarySlot, + propsSlot = defaultPropsSlot, + storiesSlot = defaultStoriesSlot, }) => ( {context => { @@ -100,50 +113,20 @@ const DocsPage: React.FunctionComponent = ({ const propsTableProps = propsSlot(context); const { selectedKind, storyStore } = context; - const componentStories = (storyStore.raw() as StoryData[]).filter( - s => s.kind === selectedKind - ); - const [primary, ...rest] = componentStories.map((storyData, idx) => - storySlot(storyData, idx === 0, context) - ); + const componentStories = storyStore.getStoriesForKind(selectedKind); + const primary = primarySlot(componentStories, context); + const stories = storiesSlot(componentStories, context); return ( - + {primary && } {propsTableProps && } - Stories - {rest.map(story => story && )} + {stories && stories.length > 0 && Stories} + {stories && + stories.map(story => story && )} ); }} ); - -interface DocsPageWrapperProps { - context: DocsContextProps; - titleSlot?: StringSlot; - subtitleSlot?: StringSlot; - descriptionSlot?: StringSlot; - propsSlot?: PropsSlot; - storySlot?: StorySlot; -} - -const DocsPageWrapper: React.FunctionComponent = ({ - context, - titleSlot = defaultTitleSlot, - subtitleSlot = defaultSubtitleSlot, - descriptionSlot = defaultDescriptionSlot, - propsSlot = defaultPropsSlot, - storySlot = defaultStorySlot, -}) => ( - /* eslint-disable react/destructuring-assignment */ - ( - - )} - /> -); - -export { DocsPageWrapper as DocsPage }; diff --git a/addons/docs/src/blocks/Preview.tsx b/addons/docs/src/blocks/Preview.tsx index bc18d47405c..19276cccb3b 100644 --- a/addons/docs/src/blocks/Preview.tsx +++ b/addons/docs/src/blocks/Preview.tsx @@ -1,6 +1,5 @@ import React, { ReactNodeArray } from 'react'; import { Preview as PurePreview, PreviewProps as PurePreviewProps } from '@storybook/components'; -import { toId } from '@storybook/router'; import { getSourceProps } from './Source'; import { DocsContext, DocsContextProps } from './DocsContext'; @@ -20,7 +19,7 @@ const getPreviewProps = ( children, ...props }: PreviewProps & { children?: React.ReactNode }, - { mdxKind, storyStore }: DocsContextProps + { mdxStoryNameToId, storyStore }: DocsContextProps ): PurePreviewProps => { if (withSource === SourceState.NONE && !children) { return props; @@ -29,7 +28,7 @@ const getPreviewProps = ( const stories = childArray.filter( (c: React.ReactElement) => c.props && (c.props.id || c.props.name) ) as React.ReactElement[]; - const targetIds = stories.map(s => s.props.id || toId(mdxKind, s.props.name)); + const targetIds = stories.map(s => s.props.id || mdxStoryNameToId[s.props.name]); const sourceProps = getSourceProps({ ids: targetIds }, { storyStore }); return { ...props, // pass through columns etc. diff --git a/addons/docs/src/blocks/Props.tsx b/addons/docs/src/blocks/Props.tsx index 53b396cdbc1..b618fb15074 100644 --- a/addons/docs/src/blocks/Props.tsx +++ b/addons/docs/src/blocks/Props.tsx @@ -23,17 +23,16 @@ export const getPropsTableProps = ( { exclude, of }: PropsProps, { parameters }: DocsContextProps ): PropsTableProps => { - const { component } = parameters; try { + const params = parameters || {}; + const { component, framework = null } = params; + const target = of === CURRENT_SELECTION ? component : of; if (!target) { throw new Error(PropsTableError.NO_COMPONENT); } - const { framework = null } = parameters || {}; - const { getPropDefs = inferPropDefs(framework) } = - (parameters && parameters.options && parameters.options.docs) || {}; - + const { getPropDefs = inferPropDefs(framework) } = params.docs || {}; if (!getPropDefs) { throw new Error(PropsTableError.PROPS_UNSUPPORTED); } diff --git a/addons/docs/src/blocks/Story.tsx b/addons/docs/src/blocks/Story.tsx index 6940fbe192b..2d0764b92fc 100644 --- a/addons/docs/src/blocks/Story.tsx +++ b/addons/docs/src/blocks/Story.tsx @@ -1,10 +1,18 @@ import React from 'react'; -import { toId } from '@storybook/router'; +import { MDXProvider } from '@mdx-js/react'; +import { components as docsComponents } from '@storybook/components/html'; import { Story, StoryProps as PureStoryProps } from '@storybook/components'; import { CURRENT_SELECTION } from './shared'; import { DocsContext, DocsContextProps } from './DocsContext'; +export const storyBlockIdFromId = (storyId: string) => `story--${storyId}`; + +const resetComponents: Record = {}; +Object.keys(docsComponents).forEach(key => { + resetComponents[key] = (props: any) => React.createElement(key, props); +}); + interface CommonProps { height?: string; inline?: boolean; @@ -32,12 +40,12 @@ const inferInlineStories = (framework: string): boolean => { export const getStoryProps = ( props: StoryProps, - { id: currentId, storyStore, parameters, mdxKind }: DocsContextProps + { id: currentId, storyStore, parameters, mdxStoryNameToId }: DocsContextProps ): PureStoryProps => { const { id } = props as StoryRefProps; const { name } = props as StoryDefProps; const inputId = id === CURRENT_SELECTION ? currentId : id; - const previewId = inputId || toId(mdxKind, name); + const previewId = inputId || mdxStoryNameToId[name]; const { height, inline } = props; const data = storyStore.fromId(previewId); @@ -45,7 +53,7 @@ export const getStoryProps = ( // prefer props, then global options, then framework-inferred values const { inlineStories = inferInlineStories(framework), iframeHeight = undefined } = - (parameters && parameters.options && parameters.options.docs) || {}; + (parameters && parameters.docs) || {}; return { inline: typeof inline === 'boolean' ? inline : inlineStories, id: previewId, @@ -59,7 +67,13 @@ const StoryContainer: React.FunctionComponent = props => ( {context => { const storyProps = getStoryProps(props, context); - return ; + return ( +
+ + + +
+ ); }} ); diff --git a/addons/docs/src/blocks/index.ts b/addons/docs/src/blocks/index.ts index 221fe9e567f..96a50525817 100644 --- a/addons/docs/src/blocks/index.ts +++ b/addons/docs/src/blocks/index.ts @@ -1,5 +1,6 @@ export { ColorPalette, ColorItem, IconGallery, IconItem, Typeset } from '@storybook/components'; +export * from './Anchor'; export * from './Description'; export * from './DocsContext'; export * from './DocsPage'; diff --git a/addons/docs/src/frameworks/angular/config.js b/addons/docs/src/frameworks/angular/config.js index 1c4f0ff0b16..bf960fad550 100644 --- a/addons/docs/src/frameworks/angular/config.js +++ b/addons/docs/src/frameworks/angular/config.js @@ -1,7 +1,10 @@ /* eslint-disable import/no-extraneous-dependencies */ import { addParameters } from '@storybook/angular'; -import { DocsPage } from '@storybook/addon-docs/blocks'; +import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'; addParameters({ - docs: DocsPage, + docs: { + container: DocsContainer, + page: DocsPage, + }, }); diff --git a/addons/docs/src/frameworks/html/config.js b/addons/docs/src/frameworks/html/config.js index e309c872803..f4c6dd942e3 100644 --- a/addons/docs/src/frameworks/html/config.js +++ b/addons/docs/src/frameworks/html/config.js @@ -1,7 +1,10 @@ /* eslint-disable import/no-extraneous-dependencies */ import { addParameters } from '@storybook/html'; -import { DocsPage } from '@storybook/addon-docs/blocks'; +import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'; addParameters({ - docs: DocsPage, + docs: { + container: DocsContainer, + page: DocsPage, + }, }); diff --git a/addons/docs/src/frameworks/react/config.js b/addons/docs/src/frameworks/react/config.js index 0b0bcf5d69f..22887966ba3 100644 --- a/addons/docs/src/frameworks/react/config.js +++ b/addons/docs/src/frameworks/react/config.js @@ -1,7 +1,10 @@ /* eslint-disable import/no-extraneous-dependencies */ import { addParameters } from '@storybook/react'; -import { DocsPage } from '@storybook/addon-docs/blocks'; +import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'; addParameters({ - docs: DocsPage, + docs: { + container: DocsContainer, + page: DocsPage, + }, }); diff --git a/addons/docs/src/frameworks/vue/config.js b/addons/docs/src/frameworks/vue/config.js index 94889f73bea..76f22f9cb6e 100644 --- a/addons/docs/src/frameworks/vue/config.js +++ b/addons/docs/src/frameworks/vue/config.js @@ -1,7 +1,10 @@ /* eslint-disable import/no-extraneous-dependencies */ import { addParameters } from '@storybook/vue'; -import { DocsPage } from '@storybook/addon-docs/blocks'; +import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'; addParameters({ - docs: DocsPage, + docs: { + container: DocsContainer, + page: DocsPage, + }, }); diff --git a/addons/docs/src/mdx/__snapshots__/mdx-compiler-plugin.test.js.snap b/addons/docs/src/mdx/__snapshots__/mdx-compiler-plugin.test.js.snap index f83d2bfa351..519c6c08745 100644 --- a/addons/docs/src/mdx/__snapshots__/mdx-compiler-plugin.test.js.snap +++ b/addons/docs/src/mdx/__snapshots__/mdx-compiler-plugin.test.js.snap @@ -53,6 +53,7 @@ MDXContent.isMDXComponent = true; export const one = () => ; one.story = {}; +one.story.name = 'one'; one.story.parameters = { mdxSource: '' }; one.story.decorators = [storyFn =>
{storyFn()}
]; @@ -72,12 +73,15 @@ const componentMeta = { includeStories: ['one'], }; -const mdxKind = componentMeta.title || componentMeta.displayName; -const WrappedMDXContent = ({ context }) => ( - -); +const mdxStoryNameToId = { one: 'button--one' }; + componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = WrappedMDXContent; +componentMeta.parameters.docs = { + container: ({ context, children }) => ( + {children} + ), + page: MDXContent, +}; export default componentMeta; " @@ -117,20 +121,23 @@ function MDXContent({ components, ...props }) { MDXContent.isMDXComponent = true; -export const storybookDocsOnly = () => { +export const __page = () => { throw new Error('Docs-only story'); }; -storybookDocsOnly.story = { parameters: { docsOnly: true } }; +__page.story = { parameters: { docsOnly: true } }; -const componentMeta = { title: 'docs-only', includeStories: ['storybookDocsOnly'] }; +const componentMeta = { title: 'docs-only', includeStories: ['__page'] }; + +const mdxStoryNameToId = {}; -const mdxKind = componentMeta.title || componentMeta.displayName; -const WrappedMDXContent = ({ context }) => ( - -); componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = WrappedMDXContent; +componentMeta.parameters.docs = { + container: ({ context, children }) => ( + {children} + ), + page: MDXContent, +}; export default componentMeta; " @@ -177,6 +184,7 @@ MDXContent.isMDXComponent = true; export const one = () => ; one.story = {}; +one.story.name = 'one'; one.story.parameters = { mdxSource: '' }; export const helloStory = () => ; @@ -186,12 +194,15 @@ helloStory.story.parameters = { mdxSource: '' }; const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] }; -const mdxKind = componentMeta.title || componentMeta.displayName; -const WrappedMDXContent = ({ context }) => ( - -); +const mdxStoryNameToId = { one: 'button--one', 'hello story': 'button--hello-story' }; + componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = WrappedMDXContent; +componentMeta.parameters.docs = { + container: ({ context, children }) => ( + {children} + ), + page: MDXContent, +}; export default componentMeta; " @@ -268,12 +279,18 @@ const componentMeta = { includeStories: ['componentNotes', 'storyNotes'], }; -const mdxKind = componentMeta.title || componentMeta.displayName; -const WrappedMDXContent = ({ context }) => ( - -); +const mdxStoryNameToId = { + 'component notes': 'button--component-notes', + 'story notes': 'button--story-notes', +}; + componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = WrappedMDXContent; +componentMeta.parameters.docs = { + container: ({ context, children }) => ( + {children} + ), + page: MDXContent, +}; export default componentMeta; " @@ -334,6 +351,7 @@ helloButton.story.parameters = { mdxSource: '' }; export const two = () => ; two.story = {}; +two.story.name = 'two'; two.story.parameters = { mdxSource: '' }; const componentMeta = { @@ -344,12 +362,15 @@ const componentMeta = { includeStories: ['helloButton', 'two'], }; -const mdxKind = componentMeta.title || componentMeta.displayName; -const WrappedMDXContent = ({ context }) => ( - -); +const mdxStoryNameToId = { 'hello button': 'button--hello-button', two: 'button--two' }; + componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = WrappedMDXContent; +componentMeta.parameters.docs = { + container: ({ context, children }) => ( + {children} + ), + page: MDXContent, +}; export default componentMeta; " @@ -386,12 +407,15 @@ MDXContent.isMDXComponent = true; const componentMeta = { includeStories: [] }; -const mdxKind = componentMeta.title || componentMeta.displayName; -const WrappedMDXContent = ({ context }) => ( - -); +const mdxStoryNameToId = {}; + componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = WrappedMDXContent; +componentMeta.parameters.docs = { + container: ({ context, children }) => ( + {children} + ), + page: MDXContent, +}; export default componentMeta; " @@ -431,16 +455,20 @@ MDXContent.isMDXComponent = true; export const text = () => 'Plain text'; text.story = {}; +text.story.name = 'text'; text.story.parameters = { mdxSource: \\"'Plain text'\\" }; const componentMeta = { title: 'Text', includeStories: ['text'] }; -const mdxKind = componentMeta.title || componentMeta.displayName; -const WrappedMDXContent = ({ context }) => ( - -); +const mdxStoryNameToId = { text: 'text--text' }; + componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = WrappedMDXContent; +componentMeta.parameters.docs = { + container: ({ context, children }) => ( + {children} + ), + page: MDXContent, +}; export default componentMeta; " @@ -487,6 +515,7 @@ MDXContent.isMDXComponent = true; export const one = () => ; one.story = {}; +one.story.name = 'one'; one.story.parameters = { mdxSource: '' }; export const helloStory = () => ; @@ -501,12 +530,19 @@ wPunctuation.story.parameters = { mdxSource: '' const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory', 'wPunctuation'] }; -const mdxKind = componentMeta.title || componentMeta.displayName; -const WrappedMDXContent = ({ context }) => ( - -); +const mdxStoryNameToId = { + one: 'button--one', + 'hello story': 'button--hello-story', + 'w/punctuation': 'button--w-punctuation', +}; + componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = WrappedMDXContent; +componentMeta.parameters.docs = { + container: ({ context, children }) => ( + {children} + ), + page: MDXContent, +}; export default componentMeta; " @@ -545,27 +581,30 @@ function MDXContent({ components, ...props }) { MDXContent.isMDXComponent = true; -export const story0 = () => { +export const functionStory = () => { const btn = document.createElement('button'); btn.innerHTML = 'Hello Button'; btn.addEventListener('click', action('Click')); return btn; }; -story0.story = {}; -story0.story.name = 'function'; -story0.story.parameters = { +functionStory.story = {}; +functionStory.story.name = 'function'; +functionStory.story.parameters = { mdxSource: \\"() => {\\\\n const btn = document.createElement('button');\\\\n btn.innerHTML = 'Hello Button';\\\\n btn.addEventListener('click', action('Click'));\\\\n return btn;\\\\n}\\", }; -const componentMeta = { includeStories: ['story0'] }; +const componentMeta = { includeStories: ['functionStory'] }; + +const mdxStoryNameToId = {}; -const mdxKind = componentMeta.title || componentMeta.displayName; -const WrappedMDXContent = ({ context }) => ( - -); componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = WrappedMDXContent; +componentMeta.parameters.docs = { + container: ({ context, children }) => ( + {children} + ), + page: MDXContent, +}; export default componentMeta; " @@ -631,12 +670,15 @@ toStorybook.story.parameters = { const componentMeta = { title: 'MDX|Welcome', includeStories: ['toStorybook'] }; -const mdxKind = componentMeta.title || componentMeta.displayName; -const WrappedMDXContent = ({ context }) => ( - -); +const mdxStoryNameToId = { 'to storybook': 'mdx-welcome--to-storybook' }; + componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = WrappedMDXContent; +componentMeta.parameters.docs = { + container: ({ context, children }) => ( + {children} + ), + page: MDXContent, +}; export default componentMeta; " @@ -673,12 +715,15 @@ MDXContent.isMDXComponent = true; const componentMeta = { includeStories: [] }; -const mdxKind = componentMeta.title || componentMeta.displayName; -const WrappedMDXContent = ({ context }) => ( - -); +const mdxStoryNameToId = {}; + componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = WrappedMDXContent; +componentMeta.parameters.docs = { + container: ({ context, children }) => ( + {children} + ), + page: MDXContent, +}; export default componentMeta; " @@ -716,12 +761,15 @@ MDXContent.isMDXComponent = true; const componentMeta = { includeStories: [] }; -const mdxKind = componentMeta.title || componentMeta.displayName; -const WrappedMDXContent = ({ context }) => ( - -); +const mdxStoryNameToId = {}; + componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = WrappedMDXContent; +componentMeta.parameters.docs = { + container: ({ context, children }) => ( + {children} + ), + page: MDXContent, +}; export default componentMeta; " diff --git a/addons/docs/src/mdx/mdx-compiler-plugin.js b/addons/docs/src/mdx/mdx-compiler-plugin.js index ce0eeb52e5e..5414993eac8 100644 --- a/addons/docs/src/mdx/mdx-compiler-plugin.js +++ b/addons/docs/src/mdx/mdx-compiler-plugin.js @@ -3,6 +3,7 @@ const parser = require('@babel/parser'); const generate = require('@babel/generator').default; const camelCase = require('lodash/camelCase'); const jsStringEscape = require('js-string-escape'); +const { toId, storyNameFromExport } = require('@storybook/router/utils'); // Generate the MDX as is, but append named exports for every // story in the contents @@ -17,17 +18,19 @@ function getAttr(elt, what) { return attr && attr.value; } -function getStoryFn(name, counter) { - if (name) { - const storyFn = camelCase(name.replace(/[^a-z0-9-]/g, '-')); - if (storyFn.length > 1 && !RESERVED.exec(storyFn)) { - return storyFn; - } - } - return `story${counter}`; -} +const isReserved = name => RESERVED.exec(name); -function genStoryExport(ast, counter) { +const sanitizeName = name => { + let key = camelCase(name); + if (isReserved(key)) { + key = `${key}Story`; + } + return key; +}; + +const getStoryKey = (name, counter) => (name ? sanitizeName(name) : `story${counter}`); + +function genStoryExport(ast, context) { let storyName = getAttr(ast.openingElement, 'name'); let storyId = getAttr(ast.openingElement, 'id'); storyName = storyName && storyName.value; @@ -45,7 +48,7 @@ function genStoryExport(ast, counter) { // console.log('genStoryExport', JSON.stringify(ast, null, 2)); const statements = []; - const storyKey = getStoryFn(storyName, counter); + const storyKey = getStoryKey(storyName, context.counter); let body = ast.children.find(n => n.type !== 'JSXText'); let storyCode = null; @@ -72,9 +75,8 @@ function genStoryExport(ast, counter) { } statements.push(`${storyKey}.story = {};`); - if (storyName !== storyKey) { - statements.push(`${storyKey}.story.name = '${storyName}';`); - } + // always preserve the name, since CSF exports can get modified by displayName + statements.push(`${storyKey}.story.name = '${storyName}';`); let parameters = getAttr(ast.openingElement, 'parameters'); parameters = parameters && parameters.expression; @@ -94,23 +96,26 @@ function genStoryExport(ast, counter) { statements.push(`${storyKey}.story.decorators = ${decos};`); } + // eslint-disable-next-line no-param-reassign + context.storyNameToKey[storyName] = storyKey; + return { [storyKey]: statements.join('\n'), }; } -function genPreviewExports(ast, counter) { +function genPreviewExports(ast, context) { // console.log('genPreviewExports', JSON.stringify(ast, null, 2)); - let localCounter = counter; const previewExports = {}; for (let i = 0; i < ast.children.length; i += 1) { const child = ast.children[i]; if (child.type === 'JSXElement' && child.openingElement.name.name === 'Story') { - const storyExport = genStoryExport(child, localCounter); + const storyExport = genStoryExport(child, context); if (storyExport) { Object.assign(previewExports, storyExport); - localCounter += 1; + // eslint-disable-next-line no-param-reassign + context.counter += 1; } } } @@ -163,12 +168,16 @@ function getExports(node, counter) { // insert `mdxKind` into the context so that we can know what "kind" we're rendering into // when we render ..., since this MDX can be attached to any `selectedKind`! const wrapperJs = ` -const mdxKind = componentMeta.title || componentMeta.displayName; -const WrappedMDXContent = ({ context }) => ; componentMeta.parameters = componentMeta.parameters || {}; -componentMeta.parameters.docs = WrappedMDXContent; +componentMeta.parameters.docs = { + container: ({ context, children }) => {children}, + page: MDXContent, +}; `.trim(); +// Use this rather than JSON.stringify because `Meta`'s attributes +// are already valid code strings, so we want to insert them raw +// rather than add an extra set of quotes function stringifyMeta(meta) { let result = '{ '; Object.entries(meta).forEach(([key, val]) => { @@ -186,16 +195,18 @@ function extractExports(node, options) { const storyExports = []; const includeStories = []; let metaExport = null; - let counter = 0; + const context = { + counter: 0, + storyNameToKey: {}, + }; node.children.forEach(n => { - const exports = getExports(n, counter); + const exports = getExports(n, context); if (exports) { const { stories, meta } = exports; if (stories) { Object.entries(stories).forEach(([key, story]) => { includeStories.push(key); storyExports.push(story); - counter += 1; }); } if (meta) { @@ -208,22 +219,32 @@ function extractExports(node, options) { }); if (metaExport) { if (!storyExports.length) { - storyExports.push( - 'export const storybookDocsOnly = () => { throw new Error("Docs-only story"); };' - ); - storyExports.push('storybookDocsOnly.story = { parameters: { docsOnly: true } };'); - includeStories.push('storybookDocsOnly'); + storyExports.push('export const __page = () => { throw new Error("Docs-only story"); };'); + storyExports.push('__page.story = { parameters: { docsOnly: true } };'); + includeStories.push('__page'); } } else { metaExport = {}; } metaExport.includeStories = JSON.stringify(includeStories); + const { title } = metaExport; + const mdxStoryNameToId = Object.entries(context.storyNameToKey).reduce( + (acc, [storyName, storyKey]) => { + if (title) { + acc[storyName] = toId(title, storyNameFromExport(storyKey)); + } + return acc; + }, + {} + ); + const fullJsx = [ 'import { DocsContainer } from "@storybook/addon-docs/blocks";', defaultJsx, ...storyExports, `const componentMeta = ${stringifyMeta(metaExport)};`, + `const mdxStoryNameToId = ${JSON.stringify(mdxStoryNameToId)};`, wrapperJs, 'export default componentMeta;', ].join('\n\n'); diff --git a/addons/docs/src/typings.d.ts b/addons/docs/src/typings.d.ts index d7a027bd9c9..ab6a2ebd1cc 100644 --- a/addons/docs/src/typings.d.ts +++ b/addons/docs/src/typings.d.ts @@ -1,2 +1,3 @@ declare module '@mdx-js/react'; declare module '@storybook/addon-docs/mdx-compiler-plugin'; +declare module 'global'; diff --git a/addons/events/package.json b/addons/events/package.json index 99db629c540..aba885be53e 100644 --- a/addons/events/package.json +++ b/addons/events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-events", - "version": "5.2.0-beta.28", + "version": "5.3.0-alpha.0", "description": "Add events to your Storybook stories.", "keywords": [ "addon", @@ -18,17 +18,23 @@ "directory": "addons/events" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "register.js" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.28", - "@storybook/api": "5.2.0-beta.28", - "@storybook/client-api": "5.2.0-beta.28", - "@storybook/core-events": "5.2.0-beta.28", - "@storybook/theming": "5.2.0-beta.28", + "@storybook/addons": "5.3.0-alpha.0", + "@storybook/api": "5.3.0-alpha.0", + "@storybook/client-api": "5.3.0-alpha.0", + "@storybook/core-events": "5.3.0-alpha.0", + "@storybook/theming": "5.3.0-alpha.0", "core-js": "^3.0.1", "format-json": "^1.0.3", "lodash": "^4.17.11", diff --git a/addons/google-analytics/package.json b/addons/google-analytics/package.json index efd49faf6ca..ac48e733110 100644 --- a/addons/google-analytics/package.json +++ b/addons/google-analytics/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-google-analytics", - "version": "5.2.0-beta.28", + "version": "5.3.0-alpha.0", "description": "Storybook addon for google analytics", "keywords": [ "addon", @@ -20,8 +20,8 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.28", - "@storybook/core-events": "5.2.0-beta.28", + "@storybook/addons": "5.3.0-alpha.0", + "@storybook/core-events": "5.3.0-alpha.0", "core-js": "^3.0.1", "global": "^4.3.2", "react-ga": "^2.5.7" diff --git a/addons/graphql/package.json b/addons/graphql/package.json index 01a3c0d2740..e1398cd8114 100644 --- a/addons/graphql/package.json +++ b/addons/graphql/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-graphql", - "version": "5.2.0-beta.28", + "version": "5.3.0-alpha.0", "description": "Storybook addon to display the GraphiQL IDE", "keywords": [ "addon", @@ -16,14 +16,20 @@ "directory": "addons/graphql" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md", + "register.js" + ], "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.28", - "@storybook/api": "5.2.0-beta.28", + "@storybook/addons": "5.3.0-alpha.0", + "@storybook/api": "5.3.0-alpha.0", "core-js": "^3.0.1", "global": "^4.3.2", "graphiql": "^0.13.0", diff --git a/addons/info/package.json b/addons/info/package.json index 48126f98068..a456613c409 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-info", - "version": "5.2.0-beta.28", + "version": "5.3.0-alpha.0", "description": "A Storybook addon to show additional information for your stories.", "keywords": [ "addon", @@ -16,16 +16,21 @@ "directory": "addons/info" }, "license": "MIT", + "files": [ + "dist/**/*", + "docs/**/*", + "README.md" + ], "main": "dist/index.js", "jsnext:main": "src/index.js", "scripts": { "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "5.2.0-beta.28", - "@storybook/client-logger": "5.2.0-beta.28", - "@storybook/components": "5.2.0-beta.28", - "@storybook/theming": "5.2.0-beta.28", + "@storybook/addons": "5.3.0-alpha.0", + "@storybook/client-logger": "5.3.0-alpha.0", + "@storybook/components": "5.3.0-alpha.0", + "@storybook/theming": "5.3.0-alpha.0", "core-js": "^3.0.1", "global": "^4.3.2", "jsx-to-string": "^1.4.0", diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap index 3d423cfb256..435e233d916 100644 --- a/addons/info/src/__snapshots__/index.test.js.snap +++ b/addons/info/src/__snapshots__/index.test.js.snap @@ -26,6 +26,7 @@ exports[`addon Info should render and external markdown 1`] = ` maxPropObjectKeys={3} maxPropStringLength={50} maxPropsIntoLine={3} + propTableCompare={[Function]} propTables={Array []} propTablesExclude={Array []} showHeader={true} @@ -160,6 +161,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)" maxPropObjectKeys={3} maxPropStringLength={50} maxPropsIntoLine={3} + propTableCompare={[Function]} propTables={Array []} propTablesExclude={Array []} showHeader={true} @@ -292,6 +294,7 @@ exports[`addon Info should render for memoized component 1`] = ` maxPropObjectKeys={3} maxPropStringLength={50} maxPropsIntoLine={3} + propTableCompare={[Function]} propTables={null} propTablesExclude={Array []} showHeader={true} @@ -769,6 +772,7 @@ exports[`addon Info should render component description if story kind matches co background: #FFFFFF; font-size: 12px; line-height: 16px; + font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 700; border-top: 1px solid rgba(0,0,0,.1); border-left: 1px solid rgba(0,0,0,.1); @@ -820,6 +824,7 @@ exports[`addon Info should render component description if story kind matches co maxPropObjectKeys={3} maxPropStringLength={50} maxPropsIntoLine={3} + propTableCompare={[Function]} propTables={null} propTablesExclude={Array []} showHeader={true} @@ -1360,8 +1365,8 @@ exports[`addon Info should render component description if story kind matches co Object { "insert": [Function], "inserted": Object { - "110qmus": true, "11xgcgt": true, + "1imo1gr": true, "1maezg8": true, "1si67pu": true, "4zr3vl": true, @@ -2077,7 +2082,7 @@ exports[`addon Info should render component description if story kind matches co data-emotion="css" > - .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;} + .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;} , , , , diff --git a/examples/official-storybook/stories/addon-backgrounds.stories.js b/examples/official-storybook/stories/addon-backgrounds.stories.js index 3276313fe34..b9eb8b54be7 100644 --- a/examples/official-storybook/stories/addon-backgrounds.stories.js +++ b/examples/official-storybook/stories/addon-backgrounds.stories.js @@ -62,3 +62,13 @@ skippedViaDisableTrue.story = { backgrounds: { disable: true }, }, }; + +export const gridCellSize = () => ( + +); + +gridCellSize.story = { + parameters: { + grid: { cellSize: 10 }, + }, +}; diff --git a/examples/official-storybook/stories/addon-docs.stories.js b/examples/official-storybook/stories/addon-docs/addon-docs.stories.js similarity index 68% rename from examples/official-storybook/stories/addon-docs.stories.js rename to examples/official-storybook/stories/addon-docs/addon-docs.stories.js index d598a749b8b..d95b67ef951 100644 --- a/examples/official-storybook/stories/addon-docs.stories.js +++ b/examples/official-storybook/stories/addon-docs/addon-docs.stories.js @@ -1,7 +1,7 @@ import React from 'react'; -import notes from './notes/notes.md'; -import mdxNotes from './notes/notes.mdx'; -import DocgenButton from '../components/DocgenButton'; +import notes from '../notes/notes.md'; +import mdxNotes from '../notes/notes.mdx'; +import DocgenButton from '../../components/DocgenButton'; export default { title: 'Addons|Docs/stories', @@ -10,6 +10,12 @@ export default { export const basic = () =>
Click docs tab to see basic docs
; +export const noDocs = () =>
Click docs tab to see no docs error
; +noDocs.story = { + name: 'no docs', + parameters: { docs: { page: null } }, +}; + export const withNotes = () =>
Click docs tab to see DocsPage docs
; withNotes.story = { name: 'with notes', @@ -28,7 +34,7 @@ export const mdxOverride = () =>
Click docs tab to see MDX-overridden docs< mdxOverride.story = { name: 'mdx override', parameters: { - docs: mdxNotes, + docs: { page: mdxNotes }, }, }; @@ -36,6 +42,6 @@ export const jsxOverride = () =>
Click docs tab to see JSX-overridden docs< jsxOverride.story = { name: 'jsx override', parameters: { - docs: () =>
Hello docs
, + docs: { page: () =>
Hello docs
}, }, }; diff --git a/examples/official-storybook/stories/addon-docs.stories.mdx b/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx similarity index 87% rename from examples/official-storybook/stories/addon-docs.stories.mdx rename to examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx index 12054b5f471..27ab93c9a75 100644 --- a/examples/official-storybook/stories/addon-docs.stories.mdx +++ b/examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx @@ -10,8 +10,8 @@ import { } from '@storybook/addon-docs/blocks'; import { action } from '@storybook/addon-actions'; import { Button } from '@storybook/react/demo'; -import FlowTypeButton from '../components/FlowTypeButton'; -import DocgenButton from '../components/DocgenButton'; +import FlowTypeButton from '../../components/FlowTypeButton'; +import DocgenButton from '../../components/DocgenButton'; + + + + ## A random color ColorPalette @@ -82,6 +86,10 @@ export const nonStory2 = () => ; // another one <>This is an iframe! + +

Hello Hugh

+ + {() => { return
function result
; @@ -92,7 +100,9 @@ export const nonStory2 = () => ; // another one ## Configurable height - + + + ## Description diff --git a/examples/official-storybook/stories/addon-docs-docs-only.stories.mdx b/examples/official-storybook/stories/addon-docs/docs-only.stories.mdx similarity index 100% rename from examples/official-storybook/stories/addon-docs-docs-only.stories.mdx rename to examples/official-storybook/stories/addon-docs/docs-only.stories.mdx diff --git a/examples/official-storybook/stories/addon-docs/markdown.stories.mdx b/examples/official-storybook/stories/addon-docs/markdown.stories.mdx new file mode 100644 index 00000000000..3431243f0cc --- /dev/null +++ b/examples/official-storybook/stories/addon-docs/markdown.stories.mdx @@ -0,0 +1,139 @@ +import { Meta } from '@storybook/addon-docs/blocks'; + + + +# h1 Heading + +## h2 Heading + +### h3 Heading + +#### h4 Heading + +##### h5 Heading + +###### h6 Heading + +## Paragraphs + +The Storybook design system codifies existing UI components into a central, well-maintained repository. It is built to address having to paste the same components into multiple projects again and again. This simplifies building UI's with Storybook's design patterns. + +SDS was created by Kyle Suss, Dominic Nguyen (me!), and Michael Shilman with invaluable accessibility contributions from Jimmy Somsanith. + +## Emphasis + +**This is bold text** + +**_This is bold italic text_** + +_This is italic text_ + +_This is italic text_ + +~~Strikethrough~~ + +## Blockquotes + +> Blockquotes can also be nested... +> +> > ...by using additional greater-than signs right next to each other... +> > +> > > ...or with spaces between arrows. + +## Lists + +Unordered + +- Create a list by starting a line with `+`, `-`, or `*` +- Sub-lists are made by indenting 2 spaces: + - Marker character change forces new list start: + - Ac tristique libero volutpat at + * Facilisis in pretium nisl aliquet + - Nulla volutpat aliquam velit +- Very easy! + - Marker character change forces new list start: + - Ac tristique libero volutpat at + * Facilisis in pretium nisl aliquet + - Nulla volutpat aliquam velit +- Final item + +Ordered + +1. Lorem ipsum dolor sit amet +2. Consectetur adipiscing elit +3. Integer molestie lorem at massa + +Start numbering with offset: + +57. foo +1. bar + +## Code + +Inline `code` + +Indented code + + // Some comments + line 1 of code + line 2 of code + line 3 of code + +Block code "fences" + +``` +Sample text here... +``` + +JS syntax highlighting + +```js +var foo = function(bar) { + return bar++; +}; + +console.log(foo(5)); +``` + +CSS syntax + +```css +.foo { + color: #eee; +} +``` + +HTML syntax + +```html +

yo html

+ +

And here we go

+``` + +## Tables + +| Option | Description | +| ------ | ------------------------------------------------------------------------- | +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | + +Right aligned columns + +| Option | Description | +| -----: | ------------------------------------------------------------------------: | +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | + +## Links + +[link text](https://hichroma.com) + +[link with title](https://hichroma.com 'Insert title!') + +## Images + +![Minion](https://octodex.github.com/images/minion.png) +![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg 'The Stormtroopocat') diff --git a/examples/official-storybook/stories/addon-docs/mdx.stories.js b/examples/official-storybook/stories/addon-docs/mdx.stories.js new file mode 100644 index 00000000000..8d558fb190b --- /dev/null +++ b/examples/official-storybook/stories/addon-docs/mdx.stories.js @@ -0,0 +1,14 @@ +import React from 'react'; +import { DocsContainer } from '@storybook/addon-docs/blocks'; +import markdown from './markdown.stories.mdx'; + +export default { + title: 'Addons|Docs/mdx-in-story', + decorators: [storyFn => {storyFn()}], +}; + +// This renders the contents of the docs panel into story content +export const typography = () => { + const Docs = markdown.parameters.docs.page; + return ; +}; diff --git a/examples/official-storybook/stories/addon-graphql.stories.js b/examples/official-storybook/stories/addon-graphql.stories.js index 44187c83c6b..6a175d206e5 100644 --- a/examples/official-storybook/stories/addon-graphql.stories.js +++ b/examples/official-storybook/stories/addon-graphql.stories.js @@ -4,11 +4,10 @@ export default { title: 'Addons|GraphQL', }; -export const getPickachu = () =>
hello
; - -getPickachu.story = { - name: 'get Pickachu', +export const getPikachu = () =>
hello
; +getPikachu.story = { + name: 'get Pikachu', parameters: { graphiql: { query: `{ diff --git a/examples/official-storybook/stories/addon-jest.testresults.json b/examples/official-storybook/stories/addon-jest.testresults.json index e1e28365633..d6bd6709fad 100644 --- a/examples/official-storybook/stories/addon-jest.testresults.json +++ b/examples/official-storybook/stories/addon-jest.testresults.json @@ -1,109 +1 @@ -{ - "numFailedTestSuites": 1, - "numFailedTests": 4, - "numPassedTestSuites": 0, - "numPassedTests": 3, - "numPendingTestSuites": 0, - "numPendingTests": 0, - "numRuntimeErrorTestSuites": 0, - "numTotalTestSuites": 1, - "numTotalTests": 7, - "snapshot": { - "added": 0, - "didUpdate": false, - "failure": false, - "filesAdded": 0, - "filesRemoved": 0, - "filesUnmatched": 0, - "filesUpdated": 0, - "matched": 0, - "total": 0, - "unchecked": 0, - "unmatched": 0, - "updated": 0 - }, - "startTime": 1515086750721, - "success": false, - "testResults": [ - { - "assertionResults": [ - { - "ancestorTitles": [], - "failureMessages": [], - "fullName": "true should be true", - "status": "passed", - "title": "true should be true" - }, - { - "ancestorTitles": [ - "In a describe: " - ], - "failureMessages": [], - "fullName": "In a describe: true should still be true", - "status": "passed", - "title": "true should still be true" - }, - { - "ancestorTitles": [ - "In a describe: " - ], - "failureMessages": [], - "fullName": "In a describe: a list should contain 3 items", - "status": "passed", - "title": "a list should contain 3 items" - }, - { - "ancestorTitles": [ - "In a describe: " - ], - "failureMessages": [ - "Error: \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).toEqual(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m)\u001b[22m\n\nExpected value to equal:\n \u001b[32m\"everything is awesome\"\u001b[39m\nReceived:\n \u001b[31m\"everything is all right\"\u001b[39m\n at Object. (/home/toto/IdeaProjects/storybook-toto/examples/official-storybook/tests/addon-jest.test.js:16:39)\n at Object.asyncFn (/home/toto/IdeaProjects/storybook-toto/examples/official-storybook/node_modules/jest-jasmine2/build/jasmine_async.js:124:345)\n at resolve (/home/toto/IdeaProjects/storybook-toto/examples/official-storybook/node_modules/jest-jasmine2/build/queue_runner.js:46:12)\n at Promise ()\n at mapper (/home/toto/IdeaProjects/storybook-toto/examples/official-storybook/node_modules/jest-jasmine2/build/queue_runner.js:34:499)\n at promise.then (/home/toto/IdeaProjects/storybook-toto/examples/official-storybook/node_modules/jest-jasmine2/build/queue_runner.js:74:39)\n at \n at process._tickCallback (internal/process/next_tick.js:169:7)" - ], - "fullName": "In a describe: everything is awesome", - "status": "failed", - "title": "everything is awesome" - }, - { - "ancestorTitles": [ - "A bunch of failing tests: " - ], - "failureMessages": [ - "Error: \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).toBe(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m)\u001b[22m\n\nExpected value to be (using ===):\n \u001b[32mfalse\u001b[39m\nReceived:\n \u001b[31mtrue\u001b[39m\n at Object. (/home/toto/IdeaProjects/storybook-toto/examples/official-storybook/tests/addon-jest.test.js:22:18)\n at Object.asyncFn (/home/toto/IdeaProjects/storybook-toto/examples/official-storybook/node_modules/jest-jasmine2/build/jasmine_async.js:124:345)\n at resolve (/home/toto/IdeaProjects/storybook-toto/examples/official-storybook/node_modules/jest-jasmine2/build/queue_runner.js:46:12)\n at Promise ()\n at mapper (/home/toto/IdeaProjects/storybook-toto/examples/official-storybook/node_modules/jest-jasmine2/build/queue_runner.js:34:499)\n at promise.then (/home/toto/IdeaProjects/storybook-toto/examples/official-storybook/node_modules/jest-jasmine2/build/queue_runner.js:74:39)\n at \n at process._tickCallback (internal/process/next_tick.js:169:7)" - ], - "fullName": "A bunch of failing tests: true should still be true", - "status": "failed", - "title": "true should still be true" - }, - { - "ancestorTitles": [ - "A bunch of failing tests: " - ], - "failureMessages": [ - "Error: \u001b[2mexpect(\u001b[22m\u001b[31marray\u001b[39m\u001b[2m).toContain(\u001b[22m\u001b[32mvalue\u001b[39m\u001b[2m)\u001b[22m\n\nExpected array:\n \u001b[31m[\"a\", \"b\", \"3\"]\u001b[39m\nTo contain value:\n \u001b[32m301\u001b[39m\n at Object. (/home/toto/IdeaProjects/storybook-toto/examples/official-storybook/tests/addon-jest.test.js:26:29)\n at Object.asyncFn (/home/toto/IdeaProjects/storybook-toto/examples/official-storybook/node_modules/jest-jasmine2/build/jasmine_async.js:124:345)\n at resolve (/home/toto/IdeaProjects/storybook-toto/examples/official-storybook/node_modules/jest-jasmine2/build/queue_runner.js:46:12)\n at Promise ()\n at mapper (/home/toto/IdeaProjects/storybook-toto/examples/official-storybook/node_modules/jest-jasmine2/build/queue_runner.js:34:499)\n at promise.then (/home/toto/IdeaProjects/storybook-toto/examples/official-storybook/node_modules/jest-jasmine2/build/queue_runner.js:74:39)\n at \n at process._tickCallback (internal/process/next_tick.js:169:7)" - ], - "fullName": "A bunch of failing tests: a list should contain 3 items", - "status": "failed", - "title": "a list should contain 3 items" - }, - { - "ancestorTitles": [ - "A bunch of failing tests: " - ], - "failureMessages": [ - "Error: \u001b[2mexpect(\u001b[22m\u001b[31mfunction\u001b[39m\u001b[2m).toThrow(\u001b[22m\u001b[32mundefined\u001b[39m\u001b[2m)\u001b[22m\n\nExpected the function to throw an error.\nBut it didn't throw anything.\n at Object. (/home/toto/IdeaProjects/storybook-toto/examples/official-storybook/tests/addon-jest.test.js:30:28)\n at Object.asyncFn (/home/toto/IdeaProjects/storybook-toto/examples/official-storybook/node_modules/jest-jasmine2/build/jasmine_async.js:124:345)\n at resolve (/home/toto/IdeaProjects/storybook-toto/examples/official-storybook/node_modules/jest-jasmine2/build/queue_runner.js:46:12)\n at Promise ()\n at mapper (/home/toto/IdeaProjects/storybook-toto/examples/official-storybook/node_modules/jest-jasmine2/build/queue_runner.js:34:499)\n at promise.then (/home/toto/IdeaProjects/storybook-toto/examples/official-storybook/node_modules/jest-jasmine2/build/queue_runner.js:74:39)\n at \n at process._tickCallback (internal/process/next_tick.js:169:7)" - ], - "fullName": "A bunch of failing tests: should work", - "status": "failed", - "title": "should work" - } - ], - "endTime": 1515086751669, - "message": "\u001b[1m\u001b[31m \u001b[1m● \u001b[1mIn a describe: › everything is awesome\u001b[39m\u001b[22m\n\n \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).toEqual(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m)\u001b[22m\n \n Expected value to equal:\n \u001b[32m\"everything is awesome\"\u001b[39m\n Received:\n \u001b[31m\"everything is all right\"\u001b[39m\n\u001b[2m \u001b[22m\n\u001b[2m \u001b[2mat Object. (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/tests/addon-jest.test.js\u001b[39m\u001b[0m\u001b[2m:16:39)\u001b[2m\u001b[22m\n\u001b[2m at Promise ()\u001b[22m\n\u001b[2m at \u001b[22m\n\u001b[2m \u001b[2mat process._tickCallback (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/internal/process/next_tick.js\u001b[39m\u001b[0m\u001b[2m:169:7)\u001b[2m\u001b[22m\n\n\u001b[1m\u001b[31m \u001b[1m● \u001b[1mA bunch of failing tests: › true should still be true\u001b[39m\u001b[22m\n\n \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).toBe(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m)\u001b[22m\n \n Expected value to be (using ===):\n \u001b[32mfalse\u001b[39m\n Received:\n \u001b[31mtrue\u001b[39m\n\u001b[2m \u001b[22m\n\u001b[2m \u001b[2mat Object. (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/tests/addon-jest.test.js\u001b[39m\u001b[0m\u001b[2m:22:18)\u001b[2m\u001b[22m\n\u001b[2m at Promise ()\u001b[22m\n\u001b[2m at \u001b[22m\n\u001b[2m \u001b[2mat process._tickCallback (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/internal/process/next_tick.js\u001b[39m\u001b[0m\u001b[2m:169:7)\u001b[2m\u001b[22m\n\n\u001b[1m\u001b[31m \u001b[1m● \u001b[1mA bunch of failing tests: › a list should contain 3 items\u001b[39m\u001b[22m\n\n \u001b[2mexpect(\u001b[22m\u001b[31marray\u001b[39m\u001b[2m).toContain(\u001b[22m\u001b[32mvalue\u001b[39m\u001b[2m)\u001b[22m\n \n Expected array:\n \u001b[31m[\"a\", \"b\", \"3\"]\u001b[39m\n To contain value:\n \u001b[32m301\u001b[39m\n\u001b[2m \u001b[22m\n\u001b[2m \u001b[2mat Object. (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/tests/addon-jest.test.js\u001b[39m\u001b[0m\u001b[2m:26:29)\u001b[2m\u001b[22m\n\u001b[2m at Promise ()\u001b[22m\n\u001b[2m at \u001b[22m\n\u001b[2m \u001b[2mat process._tickCallback (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/internal/process/next_tick.js\u001b[39m\u001b[0m\u001b[2m:169:7)\u001b[2m\u001b[22m\n\n\u001b[1m\u001b[31m \u001b[1m● \u001b[1mA bunch of failing tests: › should work\u001b[39m\u001b[22m\n\n \u001b[2mexpect(\u001b[22m\u001b[31mfunction\u001b[39m\u001b[2m).toThrow(\u001b[22m\u001b[32mundefined\u001b[39m\u001b[2m)\u001b[22m\n \n Expected the function to throw an error.\n But it didn't throw anything.\n\u001b[2m \u001b[22m\n\u001b[2m \u001b[2mat Object. (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/tests/addon-jest.test.js\u001b[39m\u001b[0m\u001b[2m:30:28)\u001b[2m\u001b[22m\n\u001b[2m at Promise ()\u001b[22m\n\u001b[2m at \u001b[22m\n\u001b[2m \u001b[2mat process._tickCallback (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/internal/process/next_tick.js\u001b[39m\u001b[0m\u001b[2m:169:7)\u001b[2m\u001b[22m\n", - "name": "/home/toto/IdeaProjects/storybook-toto/examples/official-storybook/tests/addon-jest.test.js", - "startTime": 1515086751196, - "status": "failed", - "summary": "" - } - ], - "wasInterrupted": false -} \ No newline at end of file +{"numFailedTestSuites":1,"numFailedTests":4,"numPassedTestSuites":0,"numPassedTests":3,"numPendingTestSuites":0,"numPendingTests":2,"numRuntimeErrorTestSuites":0,"numTodoTests":2,"numTotalTestSuites":1,"numTotalTests":11,"openHandles":[],"snapshot":{"added":0,"didUpdate":false,"failure":true,"filesAdded":0,"filesRemoved":1,"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeysByFile":[],"unmatched":0,"updated":0},"startTime":1564439110263,"success":false,"testResults":[{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"true should be true","location":null,"status":"passed","title":"true should be true"},{"ancestorTitles":["In a describe: "],"failureMessages":[],"fullName":"In a describe: true should still be true","location":null,"status":"passed","title":"true should still be true"},{"ancestorTitles":["In a describe: "],"failureMessages":[],"fullName":"In a describe: a list should contain 3 items","location":null,"status":"passed","title":"a list should contain 3 items"},{"ancestorTitles":["In a describe: "],"failureMessages":["Error: \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).\u001b[22mtoEqual\u001b[2m(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m) // deep equality\u001b[22m\n\nExpected: \u001b[32m\"everything is awesome\"\u001b[39m\nReceived: \u001b[31m\"everything is all right\"\u001b[39m\n at Object.toEqual (/Users/fabianrademacher/React/storybook/examples/official-storybook/tests/addon-jest.test.js:16:39)\n at Object.asyncJestTest (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)\n at resolve (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:43:12)\n at new Promise ()\n at mapper (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:26:19)\n at promise.then (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:73:41)\n at process._tickCallback (internal/process/next_tick.js:68:7)"],"fullName":"In a describe: everything is awesome","location":null,"status":"failed","title":"everything is awesome"},{"ancestorTitles":["A bunch of failing tests: "],"failureMessages":["Error: \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).\u001b[22mtoBe\u001b[2m(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m) // Object.is equality\u001b[22m\n\nExpected: \u001b[32mfalse\u001b[39m\nReceived: \u001b[31mtrue\u001b[39m\n at Object.toBe (/Users/fabianrademacher/React/storybook/examples/official-storybook/tests/addon-jest.test.js:22:18)\n at Object.asyncJestTest (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)\n at resolve (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:43:12)\n at new Promise ()\n at mapper (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:26:19)\n at promise.then (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:73:41)\n at process._tickCallback (internal/process/next_tick.js:68:7)"],"fullName":"A bunch of failing tests: true should still be true","location":null,"status":"failed","title":"true should still be true"},{"ancestorTitles":["A bunch of failing tests: "],"failureMessages":["Error: \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).\u001b[22mtoContain\u001b[2m(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m) // indexOf\u001b[22m\n\nExpected value: \u001b[32m301\u001b[39m\nReceived array: \u001b[31m[\"a\", \"b\", \"3\"]\u001b[39m\n at Object.toContain (/Users/fabianrademacher/React/storybook/examples/official-storybook/tests/addon-jest.test.js:26:29)\n at Object.asyncJestTest (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)\n at resolve (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:43:12)\n at new Promise ()\n at mapper (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:26:19)\n at promise.then (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:73:41)\n at process._tickCallback (internal/process/next_tick.js:68:7)"],"fullName":"A bunch of failing tests: a list should contain 3 items","location":null,"status":"failed","title":"a list should contain 3 items"},{"ancestorTitles":["A bunch of failing tests: "],"failureMessages":["Error: \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).\u001b[22mtoThrow\u001b[2m()\u001b[22m\n\nReceived function did not throw\n at Object.toThrow (/Users/fabianrademacher/React/storybook/examples/official-storybook/tests/addon-jest.test.js:30:22)\n at Object.asyncJestTest (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)\n at resolve (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:43:12)\n at new Promise ()\n at mapper (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:26:19)\n at promise.then (/Users/fabianrademacher/React/storybook/node_modules/jest-jasmine2/build/queueRunner.js:73:41)\n at process._tickCallback (internal/process/next_tick.js:68:7)"],"fullName":"A bunch of failing tests: should work","location":null,"status":"failed","title":"should work"},{"ancestorTitles":["A bunch of failing tests: "],"failureMessages":[],"fullName":"A bunch of failing tests: Test this Todo later","location":null,"status":"todo","title":"Test this Todo later"},{"ancestorTitles":["Skipped tests:"],"failureMessages":[],"fullName":"Skipped tests: Would be true if not skipped","location":null,"status":"pending","title":"Would be true if not skipped"},{"ancestorTitles":["Skipped tests:"],"failureMessages":[],"fullName":"Skipped tests: Could fail, if not skipped","location":null,"status":"pending","title":"Could fail, if not skipped"},{"ancestorTitles":["Skipped tests:"],"failureMessages":[],"fullName":"Skipped tests: Test Todo is not skipped","location":null,"status":"todo","title":"Test Todo is not skipped"}],"endTime":1564439111804,"message":"\u001b[1m\u001b[31m \u001b[1m● \u001b[1mIn a describe: › everything is awesome\u001b[39m\u001b[22m\n\n \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).\u001b[22mtoEqual\u001b[2m(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m) // deep equality\u001b[22m\n\n Expected: \u001b[32m\"everything is awesome\"\u001b[39m\n Received: \u001b[31m\"everything is all right\"\u001b[39m\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 14 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 15 | \u001b[39m test(\u001b[32m'everything is awesome'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m\u001b[31m\u001b[1m>\u001b[2m\u001b[39m\u001b[90m 16 | \u001b[39m expect(\u001b[32m'everything is all right'\u001b[39m)\u001b[33m.\u001b[39mtoEqual(\u001b[32m'everything is awesome'\u001b[39m)\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m | \u001b[39m \u001b[31m\u001b[1m^\u001b[2m\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 17 | \u001b[39m })\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 18 | \u001b[39m})\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 19 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[2mat Object.toEqual (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/tests/addon-jest.test.js\u001b[39m\u001b[0m\u001b[2m:16:39)\u001b[2m\u001b[22m\n\n\u001b[1m\u001b[31m \u001b[1m● \u001b[1mA bunch of failing tests: › true should still be true\u001b[39m\u001b[22m\n\n \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).\u001b[22mtoBe\u001b[2m(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m) // Object.is equality\u001b[22m\n\n Expected: \u001b[32mfalse\u001b[39m\n Received: \u001b[31mtrue\u001b[39m\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 20 | \u001b[39mdescribe(\u001b[32m'A bunch of failing tests: '\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 21 | \u001b[39m test(\u001b[32m'true should still be true'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m\u001b[31m\u001b[1m>\u001b[2m\u001b[39m\u001b[90m 22 | \u001b[39m expect(\u001b[36mtrue\u001b[39m)\u001b[33m.\u001b[39mtoBe(\u001b[36mfalse\u001b[39m)\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m | \u001b[39m \u001b[31m\u001b[1m^\u001b[2m\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 23 | \u001b[39m })\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 24 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 25 | \u001b[39m test(\u001b[32m'a list should contain 3 items'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[2mat Object.toBe (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/tests/addon-jest.test.js\u001b[39m\u001b[0m\u001b[2m:22:18)\u001b[2m\u001b[22m\n\n\u001b[1m\u001b[31m \u001b[1m● \u001b[1mA bunch of failing tests: › a list should contain 3 items\u001b[39m\u001b[22m\n\n \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).\u001b[22mtoContain\u001b[2m(\u001b[22m\u001b[32mexpected\u001b[39m\u001b[2m) // indexOf\u001b[22m\n\n Expected value: \u001b[32m301\u001b[39m\n Received array: \u001b[31m[\"a\", \"b\", \"3\"]\u001b[39m\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 24 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 25 | \u001b[39m test(\u001b[32m'a list should contain 3 items'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m\u001b[31m\u001b[1m>\u001b[2m\u001b[39m\u001b[90m 26 | \u001b[39m expect([\u001b[32m'a'\u001b[39m\u001b[33m,\u001b[39m \u001b[32m'b'\u001b[39m\u001b[33m,\u001b[39m \u001b[32m'3'\u001b[39m])\u001b[33m.\u001b[39mtoContain(\u001b[35m301\u001b[39m)\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m | \u001b[39m \u001b[31m\u001b[1m^\u001b[2m\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 27 | \u001b[39m })\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 28 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 29 | \u001b[39m test(\u001b[32m'should work'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[2mat Object.toContain (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/tests/addon-jest.test.js\u001b[39m\u001b[0m\u001b[2m:26:29)\u001b[2m\u001b[22m\n\n\u001b[1m\u001b[31m \u001b[1m● \u001b[1mA bunch of failing tests: › should work\u001b[39m\u001b[22m\n\n \u001b[2mexpect(\u001b[22m\u001b[31mreceived\u001b[39m\u001b[2m).\u001b[22mtoThrow\u001b[2m()\u001b[22m\n\n Received function did not throw\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 28 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 29 | \u001b[39m test(\u001b[32m'should work'\u001b[39m\u001b[33m,\u001b[39m () \u001b[33m=>\u001b[39m {\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m\u001b[31m\u001b[1m>\u001b[2m\u001b[39m\u001b[90m 30 | \u001b[39m expect(() \u001b[33m=>\u001b[39m {})\u001b[33m.\u001b[39mtoThrow()\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m | \u001b[39m \u001b[31m\u001b[1m^\u001b[2m\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 31 | \u001b[39m })\u001b[33m;\u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 32 | \u001b[39m\u001b[0m\u001b[22m\n\u001b[2m \u001b[0m \u001b[90m 33 | \u001b[39m test\u001b[33m.\u001b[39mtodo(\u001b[32m'Test this Todo later'\u001b[39m)\u001b[0m\u001b[22m\n\u001b[2m\u001b[22m\n\u001b[2m \u001b[2mat Object.toThrow (\u001b[2m\u001b[0m\u001b[36mexamples/official-storybook/tests/addon-jest.test.js\u001b[39m\u001b[0m\u001b[2m:30:22)\u001b[2m\u001b[22m\n","name":"/Users/fabianrademacher/React/storybook/examples/official-storybook/tests/addon-jest.test.js","startTime":1564439111282,"status":"failed","summary":""}],"wasInterrupted":false,"coverageMap":{}} \ No newline at end of file diff --git a/examples/official-storybook/stories/core/errors.stories.js b/examples/official-storybook/stories/core/errors.stories.js index 962a37a4d45..4c1db62270a 100644 --- a/examples/official-storybook/stories/core/errors.stories.js +++ b/examples/official-storybook/stories/core/errors.stories.js @@ -1,6 +1,7 @@ import React, { Fragment } from 'react'; -const BadComponent = () => ({ renderable: 'no, react can not render objects' }); +const badOutput = { renderable: 'no, react can not render objects' }; +const BadComponent = () => badOutput; export default { title: 'Core|Errors', @@ -24,7 +25,7 @@ export const badComponent = () => ( ); badComponent.story = { - name: 'story errors - variant error', + name: 'story errors - invariant error', parameters: { notes: 'Story does not return something react can render', storyshots: { disable: true }, @@ -32,7 +33,7 @@ badComponent.story = { }, }; -export const badStory = () => false; +export const badStory = () => badOutput; badStory.story = { name: 'story errors - story un-renderable type', parameters: { diff --git a/examples/official-storybook/stories/core/parameters.stories.js b/examples/official-storybook/stories/core/parameters.stories.js index 1f9551856fa..5e327839fb3 100644 --- a/examples/official-storybook/stories/core/parameters.stories.js +++ b/examples/official-storybook/stories/core/parameters.stories.js @@ -20,7 +20,7 @@ export default { // I'm not sure what we should recommend regarding propTypes? are they a good idea for examples? // Given we sort of control the props, should we export a prop type? export const passed = ({ parameters: { options, ...parameters }, ...rest }) => ( - 
StoryContext: {JSON.stringify({ ...rest, parameters }, null, 2)}
+ 
Parameters: {JSON.stringify(parameters, null, 2)}
); passed.story = { name: 'passed to story', diff --git a/examples/official-storybook/stories/demo/button.stories.js b/examples/official-storybook/stories/demo/button.stories.js index 274eb231df0..e0958d19ef4 100644 --- a/examples/official-storybook/stories/demo/button.stories.js +++ b/examples/official-storybook/stories/demo/button.stories.js @@ -5,6 +5,11 @@ import { Button } from '@storybook/react/demo'; export default { title: 'Other|Demo/Button', component: Button, + parameters: { + docs: { + inlineStories: false, + }, + }, }; export const withText = () => ; @@ -31,4 +36,9 @@ export const withCounter = () => { withCounter.story = { name: 'with counter', + parameters: { + docs: { + storyDescription: 'This demonstrates react hooks working inside stories. Go team! 🚀', + }, + }, }; diff --git a/examples/official-storybook/stories/hooks.stories.js b/examples/official-storybook/stories/hooks.stories.js new file mode 100644 index 00000000000..3f349858e25 --- /dev/null +++ b/examples/official-storybook/stories/hooks.stories.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { useEffect, useRef, useState } from '@storybook/client-api'; + +export default { + title: 'Hooks', +}; + +export const Checkbox = () => { + const [on, setOn] = useState(false); + return ( + + ); +}; + +export const Input = () => { + const [text, setText] = useState('foo'); + return setText(e.target.value)} />; +}; + +export const effect = () => { + const ref = useRef(); + useEffect(() => { + if (ref.current != null) { + ref.current.style.backgroundColor = 'yellow'; + } + }); + + return ( + + ); +}; + +export const reactHookCheckbox = () => { + const [on, setOn] = React.useState(false); + return ( + + ); +}; diff --git a/examples/official-storybook/stories/notes/notes.mdx b/examples/official-storybook/stories/notes/notes.mdx index 48dc5de86ea..f030ec4a893 100644 --- a/examples/official-storybook/stories/notes/notes.mdx +++ b/examples/official-storybook/stories/notes/notes.mdx @@ -1,3 +1,12 @@ +import { Props, Story } from '@storybook/addon-docs/blocks'; +import { Button } from '@storybook/react/demo'; + # Welcome! -Let's just write markdown without stories +Let's write markdown without stories + +But we can still use doc blocks in our stories + + + + diff --git a/examples/official-storybook/tests/addon-jest.test.js b/examples/official-storybook/tests/addon-jest.test.js index 8236a32e390..2e98560ff35 100644 --- a/examples/official-storybook/tests/addon-jest.test.js +++ b/examples/official-storybook/tests/addon-jest.test.js @@ -29,4 +29,18 @@ describe('A bunch of failing tests: ', () => { test('should work', () => { expect(() => {}).toThrow(); }); + + test.todo('Test this Todo later'); +}); + +describe('Skipped tests:', () => { + test.skip('Would be true if not skipped', () => { + expect(true).toBe(true); + }); + + test.skip('Could fail, if not skipped', () => { + expect(() => {}).toThrow(); + }); + + test.todo('Test Todo is not skipped'); }); diff --git a/examples/polymer-cli/package.json b/examples/polymer-cli/package.json index ac4ecff9239..47ef67e3f01 100644 --- a/examples/polymer-cli/package.json +++ b/examples/polymer-cli/package.json @@ -1,26 +1,25 @@ { "name": "polymer-cli", - "version": "5.2.0-beta.28", + "version": "5.3.0-alpha.0", "private": true, "scripts": { "build-storybook": "build-storybook", - "now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet", "start": "webpack-dev-server", "storybook": "start-storybook -p 9001 -c .storybook" }, "dependencies": { "@polymer/polymer": "^2.6.0", - "@storybook/addon-a11y": "5.2.0-beta.28", - "@storybook/addon-actions": "5.2.0-beta.28", - "@storybook/addon-backgrounds": "5.2.0-beta.28", - "@storybook/addon-knobs": "5.2.0-beta.28", - "@storybook/addon-links": "5.2.0-beta.28", - "@storybook/addon-notes": "5.2.0-beta.28", - "@storybook/addon-options": "5.2.0-beta.28", - "@storybook/addon-storysource": "5.2.0-beta.28", - "@storybook/addon-viewport": "5.2.0-beta.28", - "@storybook/polymer": "5.2.0-beta.28", - "@storybook/source-loader": "5.2.0-beta.28", + "@storybook/addon-a11y": "5.3.0-alpha.0", + "@storybook/addon-actions": "5.3.0-alpha.0", + "@storybook/addon-backgrounds": "5.3.0-alpha.0", + "@storybook/addon-knobs": "5.3.0-alpha.0", + "@storybook/addon-links": "5.3.0-alpha.0", + "@storybook/addon-notes": "5.3.0-alpha.0", + "@storybook/addon-options": "5.3.0-alpha.0", + "@storybook/addon-storysource": "5.3.0-alpha.0", + "@storybook/addon-viewport": "5.3.0-alpha.0", + "@storybook/polymer": "5.3.0-alpha.0", + "@storybook/source-loader": "5.3.0-alpha.0", "@webcomponents/webcomponentsjs": "^1.2.0", "global": "^4.3.2", "lit-html": "^1.0.0", diff --git a/examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap b/examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap index b2a8566165f..62ce652fe3f 100644 --- a/examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap +++ b/examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots Addons|Actions Action and method 1`] = ` +exports[`Storyshots Addons|Actions Action And Method 1`] = ` `; -exports[`Storyshots Addon|Backgrounds story 2 1`] = ` +exports[`Storyshots Addon|Backgrounds Story 2 1`] = ` `; -exports[`Storyshots Addon|Centered rounded 1`] = ` +exports[`Storyshots Addon|Centered Rounded 1`] = `
@@ -77,7 +77,7 @@ exports[`Storyshots Addon|Contexts Languages 1`] = `
`; -exports[`Storyshots Addon|Contexts Simple CSS Theming 1`] = ` +exports[`Storyshots Addon|Contexts Simple Css Theming 1`] = `
@@ -87,7 +87,7 @@ exports[`Storyshots Addon|Contexts Simple CSS Theming 1`] = `
`; -exports[`Storyshots Addon|Knobs All knobs 1`] = ` +exports[`Storyshots Addon|Knobs All Knobs 1`] = `
@@ -131,13 +131,13 @@ exports[`Storyshots Addon|Knobs Simple 1`] = `
`; -exports[`Storyshots Addon|Knobs XSS safety 1`] = ` +exports[`Storyshots Addon|Knobs Xss Safety 1`] = `
<img src=x onerror="alert('XSS Attack')" >
`; -exports[`Storyshots Addon|Links Go to welcome 1`] = ` +exports[`Storyshots Addon|Links Go To Welcome 1`] = `
`; -exports[`Storyshots Button rounded 1`] = ` +exports[`Storyshots Button Rounded 1`] = ` `; -exports[`Storyshots Custom|Method for rendering Vue pre-registered component 1`] = ` +exports[`Storyshots Custom|Method for rendering Vue Pre Registered Component 1`] = `

This component was pre-registered in .storybook/config.js @@ -384,7 +386,13 @@ exports[`Storyshots Custom|Method for rendering Vue pre-registered component 1`]

`; -exports[`Storyshots Custom|Method for rendering Vue render + component 1`] = ` +exports[`Storyshots Custom|Method for rendering Vue Render 1`] = ` +
+ renders a div with some text in it.. +
+`; + +exports[`Storyshots Custom|Method for rendering Vue Render Component 1`] = ` ); + +const buttonFn = () => ; + +export const withToolbar = () => ( + + + +); + +export const withToolbarMulti = () => ( + + + + +); diff --git a/lib/components/src/blocks/Preview.tsx b/lib/components/src/blocks/Preview.tsx index 49e275a4162..e91bd9c6ddf 100644 --- a/lib/components/src/blocks/Preview.tsx +++ b/lib/components/src/blocks/Preview.tsx @@ -1,16 +1,20 @@ import React from 'react'; import { styled } from '@storybook/theming'; import { darken } from 'polished'; +import { logger } from '@storybook/client-logger'; import { getBlockBackgroundStyle } from './BlockBackgroundStyles'; import { Source, SourceProps } from './Source'; -import { ActionBar } from '../ActionBar/ActionBar'; +import { ActionBar, ActionItem } from '../ActionBar/ActionBar'; +import { Toolbar } from './Toolbar'; +import { ZoomContext } from './ZoomContext'; export interface PreviewProps { isColumn?: boolean; columns?: number; withSource?: SourceProps; isExpanded?: boolean; + withToolbar?: boolean; } const ChildrenContainer = styled.div(({ isColumn, columns }) => ({ @@ -30,6 +34,8 @@ const StyledSource = styled(Source)<{}>(({ theme }) => ({ margin: 0, borderTopLeftRadius: 0, borderTopRightRadius: 0, + borderBottomLeftRadius: theme.appBorderRadius, + borderBottomRightRadius: theme.appBorderRadius, border: 'none', background: @@ -41,21 +47,71 @@ const StyledSource = styled(Source)<{}>(({ theme }) => ({ }, })); -const PreviewWrapper = styled.div(({ theme, withSource }) => ({ - ...getBlockBackgroundStyle(theme), - padding: '30px 20px', - position: 'relative', - borderBottomLeftRadius: withSource && 0, - borderBottomRightRadius: withSource && 0, -})); +const PreviewWrapper = styled.div( + ({ theme, withSource, isExpanded }) => ({ + ...getBlockBackgroundStyle(theme), + padding: '30px 20px', + position: 'relative', + overflow: 'hidden', + borderBottomLeftRadius: withSource && isExpanded && 0, + borderBottomRightRadius: withSource && isExpanded && 0, + borderBottomWidth: isExpanded && 0, + }), + ({ withToolbar }) => withToolbar && { paddingTop: 64 } +); const PreviewContainer = styled.div({ margin: '25px 0 40px', }); +interface SourceItem { + source?: React.ReactElement; + actionItem: ActionItem; +} + +const getSource = ( + withSource: SourceProps, + expanded: boolean, + setExpanded: Function +): SourceItem => { + switch (true) { + case !!(withSource && withSource.error): { + return { + source: null, + actionItem: { + title: 'No code available', + disabled: true, + onClick: () => setExpanded(false), + }, + }; + } + case expanded: { + return { + source: , + actionItem: { title: 'Hide code', onClick: () => setExpanded(false) }, + }; + } + default: { + return { + source: null, + actionItem: { title: 'Show code', onClick: () => setExpanded(true) }, + }; + } + } +}; +function getStoryId(children: React.ReactNode) { + if (React.Children.count(children) === 1) { + const elt = children as React.ReactElement; + if (elt.props) { + return elt.props.id; + } + } + return null; +} + /** * A preview component for showing one or more component `Story` - * items. The preview also shows the source for the componnent + * items. The preview also shows the source for the component * as a drop-down. */ const Preview: React.FunctionComponent = ({ @@ -63,29 +119,39 @@ const Preview: React.FunctionComponent = ({ columns, children, withSource, + withToolbar = false, isExpanded = false, ...props }) => { const [expanded, setExpanded] = React.useState(isExpanded); - const { source, actionItem } = expanded - ? { - source: , - actionItem: { title: 'Hide code', onClick: () => setExpanded(false) }, - } - : { - source: null, - actionItem: { title: 'Show code', onClick: () => setExpanded(true) }, - }; + const { source, actionItem } = getSource(withSource, expanded, setExpanded); + const [scale, setScale] = React.useState(1); + + if (withToolbar && Array.isArray(children)) { + logger.warn('Cannot use toolbar with multiple preview children, disabling'); + } + const showToolbar = withToolbar && !Array.isArray(children); return ( - - - {Array.isArray(children) ? ( - children.map((child, i) =>
{child}
) - ) : ( -
{children}
- )} - + + {showToolbar && ( + setScale(scale * z)} + resetZoom={() => setScale(1)} + storyId={getStoryId(children)} + baseUrl="./iframe.html" + /> + )} + + + {Array.isArray(children) ? ( + children.map((child, i) =>
{child}
) + ) : ( +
{children}
+ )} + + {withSource && } {withSource && source} diff --git a/lib/components/src/blocks/PropsTable/PropRow.stories.tsx b/lib/components/src/blocks/PropsTable/PropRow.stories.tsx index e244e0b77b5..04b0e6f98b5 100644 --- a/lib/components/src/blocks/PropsTable/PropRow.stories.tsx +++ b/lib/components/src/blocks/PropsTable/PropRow.stories.tsx @@ -1,8 +1,7 @@ import React from 'react'; import { PropRow } from './PropRow'; - import { Table } from './PropsTable'; -import { DocsPageWrapper } from '../DocsPage'; +import { ResetWrapper } from '../../typography/DocumentFormatting'; export default { component: PropRow, @@ -10,11 +9,11 @@ export default { excludeStories: /.*Def$/, decorators: [ getStory => ( - + {getStory()}
- + ), ], }; diff --git a/lib/components/src/blocks/PropsTable/PropsTable.stories.tsx b/lib/components/src/blocks/PropsTable/PropsTable.stories.tsx index f62a7a975b1..3a43436ae02 100644 --- a/lib/components/src/blocks/PropsTable/PropsTable.stories.tsx +++ b/lib/components/src/blocks/PropsTable/PropsTable.stories.tsx @@ -1,16 +1,14 @@ import React from 'react'; import { PropsTable, PropsTableError } from './PropsTable'; -import { DocsPageWrapper } from '../DocsPage'; import { stringDef, numberDef } from './PropRow.stories'; export default { component: PropsTable, title: 'Docs|PropTable', - decorators: [storyFn => {storyFn()}], }; +export const normal = () => ; + export const error = () => ; export const empty = () => ; - -export const normal = () => ; diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx index b23ec02ef82..e462a57de7f 100644 --- a/lib/components/src/blocks/PropsTable/PropsTable.tsx +++ b/lib/components/src/blocks/PropsTable/PropsTable.tsx @@ -4,13 +4,14 @@ import { opacify, transparentize } from 'polished'; import { PropRow } from './PropRow'; import { PropDef } from './PropDef'; import { EmptyBlock } from '../EmptyBlock'; +import { ResetWrapper } from '../../typography/DocumentFormatting'; export const Table = styled.table<{}>(({ theme }) => ({ '&&': { // Resets for cascading/system styles borderCollapse: 'collapse', borderSpacing: 0, - + color: theme.color.defaultText, tr: { border: 'none', background: 'none', @@ -146,20 +147,22 @@ const PropsTable: React.FunctionComponent = props => { return No props found for this component; } return ( - - - - - - - - - - {rows.map(row => ( - - ))} - -
NameDescriptionDefault
+ + + + + + + + + + + {rows.map(row => ( + + ))} + +
NameDescriptionDefault
+ ); }; diff --git a/lib/components/src/blocks/Source.stories.tsx b/lib/components/src/blocks/Source.stories.tsx index 2166ce10ef3..bad3ea4acae 100644 --- a/lib/components/src/blocks/Source.stories.tsx +++ b/lib/components/src/blocks/Source.stories.tsx @@ -1,19 +1,11 @@ import React from 'react'; import { Source, SourceError } from './Source'; -import { DocsPageWrapper } from './DocsPage'; export default { title: 'Docs|Source', component: Source, - decorators: [getStory => {getStory()}], }; -export const noStory = () => ; -noStory.story = { name: 'no story' }; - -export const sourceUnavailable = () => ; -sourceUnavailable.story = { name: 'source unavailable' }; - const jsxCode = ` a.id} /> @@ -38,3 +30,7 @@ const cssCode = ` `.trim(); export const css = () => ; + +export const noStory = () => ; + +export const sourceUnavailable = () => ; diff --git a/lib/components/src/blocks/Source.tsx b/lib/components/src/blocks/Source.tsx index dadd3d97364..34faf42c845 100644 --- a/lib/components/src/blocks/Source.tsx +++ b/lib/components/src/blocks/Source.tsx @@ -6,7 +6,10 @@ import { SyntaxHighlighter } from '../syntaxhighlighter/syntaxhighlighter'; const StyledSyntaxHighlighter = styled(SyntaxHighlighter)<{}>(({ theme }) => ({ // DocBlocks-specific styling and overrides + fontSize: `${theme.typography.size.s2 - 1}px`, + lineHeight: '19px', margin: '25px 0 40px', + borderRadius: theme.appBorderRadius, boxShadow: theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0', @@ -28,6 +31,7 @@ interface SourceErrorProps { interface SourceCodeProps { language?: string; code?: string; + format?: boolean; dark?: boolean; } @@ -44,12 +48,13 @@ const Source: React.FunctionComponent = props => { return {error}; } - const { language, code, dark, ...rest } = props as SourceCodeProps; + const { language, code, dark, format, ...rest } = props as SourceCodeProps; const syntaxHighlighter = ( {getStory()}], }; +const buttonFn = () => ; + +const buttonHookFn = () => { + const [count, setCount] = React.useState(0); + return ( + + ); +}; + +export const inline = () => ; + export const error = () => ; -const buttonFn = () => ; - -export const inline = () => ; +export const reactHook = () => ; diff --git a/lib/components/src/blocks/Story.tsx b/lib/components/src/blocks/Story.tsx index 0cdd022ab67..c098d043554 100644 --- a/lib/components/src/blocks/Story.tsx +++ b/lib/components/src/blocks/Story.tsx @@ -1,7 +1,7 @@ import React from 'react'; - import { IFrame } from './IFrame'; import { EmptyBlock } from './EmptyBlock'; +import { ZoomContext } from './ZoomContext'; const BASE_URL = 'iframe.html'; @@ -9,18 +9,23 @@ export enum StoryError { NO_STORY = 'No component or story to display', } +/** error message for Story with null storyFn + * if the story id exists, it must be pointing to a non-existing story + * if there is assigned story id, the story must be empty + */ +const MISSING_STORY = (id?: string) => (id ? `Story "${id}" doesn't exist.` : StoryError.NO_STORY); + interface CommonProps { title: string; height?: string; + id: string; } type InlineStoryProps = { - storyFn: () => React.ElementType; + storyFn: React.ElementType; } & CommonProps; -type IFrameStoryProps = { - id: string; -} & CommonProps; +type IFrameStoryProps = CommonProps; type ErrorProps = { error?: StoryError; @@ -31,8 +36,33 @@ export type StoryProps = (InlineStoryProps | IFrameStoryProps | ErrorProps) & { inline: boolean; }; -const InlineStory: React.FunctionComponent = ({ storyFn, height }) => ( -
{storyFn()}
+const InlineZoomWrapper: React.FC<{ scale: number }> = ({ scale, children }) => { + return scale === 1 ? ( + <>{children} + ) : ( +
+
+ {children} +
+
+ ); +}; + +const InlineStory: React.FunctionComponent = ({ storyFn, height, id }) => ( +
+ + {({ scale }) => ( + + {storyFn ? React.createElement(storyFn) : {MISSING_STORY(id)}} + + )} + +
); const IFrameStory: React.FunctionComponent = ({ @@ -41,19 +71,25 @@ const IFrameStory: React.FunctionComponent = ({ height = '500px', }) => (
-