GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 14:11:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/angular/support-base-url' into support-base-url

Browse Source 
# Conflicts:
#	app/angular/package.json
#	yarn.lock
This commit is contained in:
igor-dv 2018-10-09 02:33:29 +03:00
commit ffee031c0e
337 changed files with 7042 additions and 18150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
.circleci/config.yml
View File

@ -37,6 +37,7 @@ jobs:
paths:
- node_modules
- examples/angular-cli/node_modules
- examples/ember-cli/node_modules
- examples/cra-kitchen-sink/node_modules
- examples/mithril-kitchen-sink/node_modules
- examples/official-storybook/node_modules
@ -78,6 +79,11 @@ jobs:
command: |
cd examples/angular-cli
yarn build-storybook
- run:
name: Build ember-cli
command: |
cd examples/ember-cli
yarn build-storybook
- run:
name: Build polymer-cli
command: |
@ -140,6 +146,11 @@ jobs:
command: |
cd examples/angular-cli
yarn storybook --smoke-test
- run:
name: Run ember-cli (smoke test)
command: |
cd examples/ember-cli
yarn storybook --smoke-test
- run:
name: Run polymer-cli (smoke test)
command: |
@ -173,22 +184,12 @@ jobs:
at: .
- run:
name: Bootstrap
command: yarn bootstrap --reactnative --reactnativeapp
- run:
name: Run React-Native example
command: |
cd examples/react-native-vanilla
yarn storybook --smoke-test
command: yarn bootstrap --reactnativeapp
- run:
name: Run React-Native-App example
command: |
cd examples/crna-kitchen-sink
yarn storybook --smoke-test
- run:
name: Run React-Native unit tests
command: |
yarn test --coverage --runInBand --reactnative
yarn coverage
docs:
<<: *defaults
steps:
@ -250,8 +251,6 @@ jobs:
command: yarn coverage
cli:
<<: *defaults
docker:
- image: andthensome/docker-node-rsync
environment:
BASH_ENV: ~/.bashrc
steps:
@ -264,8 +263,6 @@ jobs:
no_output_timeout: 1800
cli-latest-cra:
<<: *defaults
docker:
- image: andthensome/docker-node-rsync
environment:
BASH_ENV: ~/.bashrc
steps:

1
.github/CODEOWNERS vendored
View File

@ -31,7 +31,6 @@
/examples/crna-kitchen-sink/ @Gongreg @danielduan
/examples/official-storybook/ @hypnosphi @danielduan @UsulPro
/examples/polymer-cli/ @naipath @igor-dv
/examples/react-native-vanilla/ @tmeasday @danielduan
/examples/vue-kitchen-sink/ @igor-dv @alexandrebodin
/examples/svelte-kitchen-sink/ @plumpNation

4
.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_CliTest.kt vendored
View File

@ -26,12 +26,12 @@ object OpenSourceProjects_Storybook_CliTest : BuildType({
yarn
yarn bootstrap --core
""".trimIndent()
dockerImage = "andthensome/docker-node-rsync"
dockerImage = "node:%docker.node.version%"
}
script {
name = "Test"
scriptContent = "yarn test --cli"
dockerImage = "andthensome/docker-node-rsync"
dockerImage = "node:%docker.node.version%"
}
}

6
.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_CliTestLatestCra.kt vendored
View File

@ -21,15 +21,17 @@ object OpenSourceProjects_Storybook_CliTestLatestCra : BuildType({
script {
name = "Bootstrap"
scriptContent = """
set -e -x
yarn
yarn bootstrap --core
""".trimIndent()
dockerImage = "andthensome/docker-node-rsync"
dockerImage = "node:%docker.node.version%"
}
script {
name = "Test"
scriptContent = "yarn test-latest-cra"
dockerImage = "andthensome/docker-node-rsync"
dockerImage = "node:%docker.node.version%"
}
}

20
.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_ReactNative.kt vendored
View File

@ -9,8 +9,6 @@ object OpenSourceProjects_Storybook_ReactNative : BuildType({
id = "OpenSourceProjects_Storybook_ReactNative"
name = "React Native"
artifactRules = "examples/react-native-vanilla/coverage/lcov-report => coverage.zip"
params {
param("env.PUPPETEER_SKIP_CHROMIUM_DOWNLOAD", "true")
}
@ -26,15 +24,7 @@ object OpenSourceProjects_Storybook_ReactNative : BuildType({
name = "Bootstrap"
scriptContent = """
yarn
yarn bootstrap --core --reactnative --reactnativeapp
""".trimIndent()
dockerImage = "node:%docker.node.version%"
}
script {
name = "react-native-vanilla"
scriptContent = """
cd examples/react-native-vanilla
yarn storybook --smoke-test
yarn bootstrap --core --reactnativeapp
""".trimIndent()
dockerImage = "node:%docker.node.version%"
}
@ -46,14 +36,6 @@ object OpenSourceProjects_Storybook_ReactNative : BuildType({
""".trimIndent()
dockerImage = "node:%docker.node.version%"
}
script {
name = "Test"
scriptContent = """
yarn test --reactnative --coverage --runInBand --teamcity
yarn coverage
""".trimIndent()
dockerImage = "node:%docker.node.version%"
}
}
features {

5
.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt vendored
View File

@ -14,9 +14,10 @@ enum class StorybookApp(val appName: String, val exampleDir: String, val merged:
MITHRIL("Mithril", "mithril-kitchen-sink"),
HTML("HTML", "html-kitchen-sink"),
MARKO("Marko", "marko-cli"),
HYPERAPP("Hyperapp", "hyperapp-kitchen-sink", false),
SVELTE("Svelte", "svelte-kitchen-sink"),
RIOT("Riot", "riot-kitchen-sink");
RIOT("Riot", "riot-kitchen-sink"),
HYPERAPP("Hyperapp", "hyperapp-kitchen-sink", false),
EMBER("Ember", "ember-cli");
val lowerName = appName.toLowerCase()

34
ADDONS_SUPPORT.md
View File

@ -1,19 +1,19 @@
## Addon / Framework Support Table
| | [React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)| [Marko](app/marko)| [Svelte](app/svelte)| [Riot](app/riot)|
| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
|[a11y](addons/a11y) |+| |+|+|+|+|+|+| | |
|[actions](addons/actions) |+|+|+|+|+|+|+|+|+|+|
|[backgrounds](addons/backgrounds) |+| |+|+|+|+|+|+|+|+|
|[centered](addons/centered) |+| |+|+| |+|+| |+| |
|[events](addons/events) |+| |+|+|+|+|+|+| | |
|[graphql](addons/graphql) |+| | | | | | | | | |
|[info](addons/info) |+| | | | | | | | | |
|[jest](addons/jest) |+| | |+| | |+| | | |
|[knobs](addons/knobs) |+|+|+|+|+|+|+|+|+|+|
|[links](addons/links) |+|+|+|+|+|+|+| |+|+|
|[notes](addons/notes) |+| |+|+|+|+|+| |+|+|
|[options](addons/options) |+|+|+|+|+|+|+| |+|+|
|[storyshots](addons/storyshots) |+|+|+|+| | |+| |+|+|
|[storysource](addons/storysource)|+| |+|+|+|+|+|+|+|+|
|[viewport](addons/viewport) |+| |+|+|+|+|+|+|+|+|
| | [React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)| [Marko](app/marko)| [Svelte](app/svelte)| [Riot](app/riot)| [Ember](app/ember)|
| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
|[a11y](addons/a11y) |+| |+|+|+|+|+|+| | |+|
|[actions](addons/actions) |+|+|+|+|+|+|+|+|+|+|+|
|[backgrounds](addons/backgrounds)|+| |+|+|+|+|+|+|+|+|+|
|[centered](addons/centered) |+| |+|+| |+|+| |+| |+|
|[events](addons/events) |+| |+|+|+|+|+|+| | |+|
|[graphql](addons/graphql) |+| | | | | | | | | | |
|[info](addons/info) |+| | | | | | | | | | |
|[jest](addons/jest) |+| | |+| | |+| | | | |
|[knobs](addons/knobs) |+|+|+|+|+|+|+|+|+|+|+|
|[links](addons/links) |+|+|+|+|+|+|+| |+|+|+|
|[notes](addons/notes) |+| |+|+|+|+|+| |+|+|+|
|[options](addons/options) |+|+|+|+|+|+|+| |+|+|+|
|[storyshots](addons/storyshots) |+|+|+|+| | |+| |+|+| |
|[storysource](addons/storysource)|+| |+|+|+|+|+|+|+|+|+|
|[viewport](addons/viewport) |+| |+|+|+|+|+|+|+|+|+|

36
CHANGELOG.md
View File

@ -1,3 +1,39 @@
# 4.0.0-alpha.24
2018-October-04
#### Features
- Ember: add ember support [#4237](https://github.com/storybooks/storybook/pull/4237)
- Riot: support the tagConstructor option [#4258](https://github.com/storybooks/storybook/pull/4258)
- Presets: Add "addons" and "config" to preset extensions [#4240](https://github.com/storybooks/storybook/pull/4240)
#### Bug Fixes
- Webpack: Fix broken SVGs [#4260](https://github.com/storybooks/storybook/pull/4260)
- Babel/minify: use `builtIns: false` [#4262](https://github.com/storybooks/storybook/pull/4262)
- Addon-Notes: Fix how markdownOptions are passed to marked [#4242](https://github.com/storybooks/storybook/pull/4242)
- Addon-Knobs: Fix broken colorpicker [#4222](https://github.com/storybooks/storybook/pull/4222)
# 4.0.0-alpha.23
2018-September-25
#### Features
- Angular build time optimization [#4118](https://github.com/storybooks/storybook/pull/4118)
- Pass Jest done callback to testMethod [#3853](https://github.com/storybooks/storybook/pull/3853)
#### Bug Fixes
- Fix getstorybook CLI [#4213](https://github.com/storybooks/storybook/pull/4213)
- FIX regression devtool, in case of cross domain parent, window.parent might throw [#4199](https://github.com/storybooks/storybook/pull/4199)
#### Dependency Upgrades
- Upgrade deps dealing with license issues [#4228](https://github.com/storybooks/storybook/pull/4228)
- Use @emotion/snapshot-serializer [#4206](https://github.com/storybooks/storybook/pull/4206)
# 4.0.0-alpha.22
2018-September-19

7
CONTRIBUTING.md
View File

@ -60,13 +60,6 @@ You can also pick suites from CLI. Suites available are listed below.
This option executes test from `<rootdir>/app/react`, `<rootdir>/app/vue`, and `<rootdir>/lib`.
Before the tests are ran, the project must be bootstrapped with core. You can accomplish this with `yarn bootstrap --core`
##### React-Native example Tests
`yarn test --reactnative`
This option executes tests from `<rootdir>/app/react-native`.
Before these tests are ran, the project must be bootstrapped with the React Native example enabled. You can accomplish this by running `yarn bootstrap --reactnative`
##### CRA-kitchen-sink - Image snapshots using Storyshots
`yarn test --image`

50
MIGRATION.md
View File

@ -5,10 +5,12 @@
- [From version 3.4.x to 4.0.x](#from-version-34x-to-40x)
- [Keyboard shortcuts moved](#keyboard-shortcuts-moved)
- [Removed addWithInfo](#removed-add-with-info)
- [Removed RN packager](#removed-rn-packager)
- [Removed RN addons](#removed-rn-addons)
- [Storyshots changes](#storyshots-changes)
- [Webpack 4](#webpack-4)
- [Babel 7](#babel-7)
- [Create-react-app](#create-react-app)
- [From version 3.3.x to 3.4.x](#from-version-33x-to-34x)
- [From version 3.2.x to 3.3.x](#from-version-32x-to-33x)
- [Refactored Knobs](#refactored-knobs)
@ -24,9 +26,9 @@
- [Packages renaming](#packages-renaming)
- [Deprecated embedded addons](#deprecated-embedded-addons)
## From 3.4.x to 4.0
## From version 3.4.x to 4.0.x
With 4.0 as our first major release in over a year, we've collected a lot of cleanup tasks. All deprecations have been marked for months, so we hope that there will be no significant impact on your project.
With 4.0 as our first major release in over a year, we've collected a lot of cleanup tasks. Most of the deprecations have been marked for months, so we hope that there will be no significant impact on your project.
### Generic addons
@ -57,6 +59,14 @@ import { number } from "@storybook/addon-knobs";
`Addon-info`'s `addWithInfo` has been marked deprecated since 3.2. In 4.0 we've removed it completely. See the package [README](https://github.com/storybooks/storybook/blob/master/addons/info/README.md) for the proper usage.
### Removed RN packager
Since storybook version v4.0 packager is removed from storybook. The suggested storybook usage is to include it inside your app.
If you want to keep the old behaviour, you have to start the packager yourself with a different project root.
`npm run storybook start -p 7007 | react-native start --projectRoot storybook`
Removed cli options: `--packager-port --root --projectRoots -r, --reset-cache --skip-packager --haul --platform --metro-config`
### Removed RN addons
The `@storybook/react-native` had built-in addons (`addon-actions` and `addon-links`) that have been marked as deprecated since 3.x. They have been fully removed in 4.x. If your project still uses the built-ins, you'll need to add explicit dependencies on `@storybook/addon-actions` and/or `@storybook/addon-links` and import directly from those packages.
@ -82,11 +92,43 @@ Storybook now uses webpack 4. If you have a [custom webpack config](https://stor
Storybook now uses Babel 7. There's a couple of cases when it can break with your app:
* If you aren't using Babel yourself, and don't have .babelrc, install following dependencies:
- If you aren't using Babel yourself, and don't have .babelrc, install following dependencies:
```
npm i -D @babel/core babel-loader@next
```
* If you're using Babel 6, make sure that you have direct dependencies on `babel-core@6` and `babel-loader@7`.
- If you're using Babel 6, make sure that you have direct dependencies on `babel-core@6` and `babel-loader@7` and that you have a `.babelrc` in your project directory.
### Create-react-app
If you are using `create-react-app` (aka CRA), you may need to do some manual steps to upgrade, depending on the setup.
- `create-react-app@1` may require manual migrations.
- If you're adding storybook for the first time, it should just work: `storybook init` should add the correct dependencies.
- If you've upgrading an existing project, your `package.json` probably already uses Babel 6, making it incompatible with `@storybook/react@4` which uses Babel 7. There are two ways to make it compatible, each of which is spelled out in detail in the next section:
- Upgrade to Babel 7 if you are not dependent on Babel 6-specific features.
- Migrate Babel 6 if you're heavily dependent on some Babel 6-specific features).
- `create-react-app@2` should be compatible as is, since it uses babel 7.
#### Upgrade CRA1 to babel 7
```
yarn remove babel-core babel-runtime
yarn add @babel/core babel-loader --dev
```
#### Migrate CRA1 while keeping babel 6
```
yarn add babel-loader@7
```
Also make sure you have a `.babelrc` in your project directory. You probably already do if you are using Babel 6 features (otherwise you should consider upgrading to Babel 7 instead). If you don't have one, here's a simple one that works:
```json
{
"presets": ["env", "react"]
}
```
### start-storybook opens browser automatically

113
README.md
View File

@ -18,8 +18,9 @@ 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
![Storybook Screenshot](media/storybook-intro.gif)
<center>
<img src="media/storybook-intro.gif" width="100%" />
</center>
README for:
- [![Alpha](https://img.shields.io/npm/v/@storybook/core/alpha.svg)](https://github.com/storybooks/storybook)
@ -34,18 +35,17 @@ Storybook comes with a lot of [addons](https://storybook.js.org/addons/introduct
## Table of contents
- [Getting Started](#getting-started)
- [Projects](#projects)
- [Supported Frameworks](#supported-frameworks)
- [Sub Projects](#sub-projects)
- [Addons](#addons)
- [Live Examples](#live-examples) 💪
- [Badges](#badges)
- [Community](#community)
- [Contributing](#contributing)
- [Development scripts](#development-scripts)
- [Backers](#backers)
- [Sponsors](#sponsors)
- 🚀[Getting Started](#getting-started)
- 📒[Projects](#projects)
- 🛠[Supported Frameworks & Examples](#supported-frameworks)
- 🚇[Sub Projects](#sub-projects)
- 🔗[Addons](#addons)
- 🏅[Badges & Presentation materials](#badges--presentation-materials)
- 👥[Community](#community)
- 👏[Contributing](#contributing)
- 👨‍💻[Development scripts](#development-scripts)
- 💵[Backers](#backers)
- 💸[Sponsors](#sponsors)
## Getting Started
@ -79,16 +79,19 @@ For additional help, join us [in our Slack](https://now-examples-slackin-rrirkqo
### Supported Frameworks
- [React](app/react) [![React](https://img.shields.io/npm/dt/@storybook/react.svg)](app/react)
- [React Native](app/react-native) [![React Native](https://img.shields.io/npm/dt/@storybook/react-native.svg)](app/react-native)
- [Vue](app/vue) [![Vue](https://img.shields.io/npm/dt/@storybook/vue.svg)](app/vue)
- [Angular](app/angular) [![Angular](https://img.shields.io/npm/dt/@storybook/angular.svg)](app/angular)
- [Polymer](app/polymer) [![Polymer](https://img.shields.io/npm/dt/@storybook/polymer.svg)](app/polymer)
- [Mithril](app/mithril) <sup>alpha</sup> [![Mithril](https://img.shields.io/npm/dt/@storybook/mithril.svg)](app/mithril)
- [Marko](app/marko) <sup>alpha</sup> [![Marko](https://img.shields.io/npm/dt/@storybook/marko.svg)](app/marko)
- [HTML](app/html) <sup>alpha</sup> [![HTML](https://img.shields.io/npm/dt/@storybook/html.svg)](app/html)
- [Svelte](app/svelte) <sup>alpha</sup> [![Svelte](https://img.shields.io/npm/dt/@storybook/svelte.svg)](app/svelte)
- [Riot](app/riot) <sup>alpha</sup> [![Riot](https://img.shields.io/npm/dt/@storybook/riot.svg)](app/riot)
| Framework | Demo latest | Demo prerelease | |
|----|---|---|---|
| [React](app/react) | [v3.4.x](https://release-3-4--storybooks-official.netlify.com), [v3.3.x](https://release-3-3--storybooks-official.netlify.com) | [v4.0.0-alpha](https://storybooks-official.netlify.com) | [![React](https://img.shields.io/npm/dt/@storybook/react.svg)](app/react) |
| [React Native](app/react-native) | - | - | [![React Native](https://img.shields.io/npm/dt/@storybook/react-native.svg)](app/react-native) |
| [Vue](app/vue) | [v3.4.x](https://release-3-4--storybooks-vue.netlify.com/), [v3.3.x](https://release-3-3--storybooks-vue.netlify.com/) | [v4.0.0-alpha](https://storybooks-vue.netlify.com/) | [![Vue](https://img.shields.io/npm/dt/@storybook/vue.svg)](app/vue) |
| [Angular](app/angular) | [v3.4.x](https://release-3-4--storybooks-angular.netlify.com/), [v3.3.x](https://release-3-3--storybooks-angular.netlify.com/) | [v4.0.0-alpha](https://storybooks-angular.netlify.com/) | [![Angular](https://img.shields.io/npm/dt/@storybook/angular.svg)](app/angular) |
| [Polymer](app/polymer) | [v3.4.x](https://release-3-4--storybooks-polymer.netlify.com/) | [v4.0.0-alpha](https://storybooks-polymer.netlify.com/) | [![Polymer](https://img.shields.io/npm/dt/@storybook/polymer.svg)](app/polymer) |
| [Mithril](app/mithril) <sup>alpha</sup> | - | [v4.0.0-alpha](https://storybooks-mithril.netlify.com/) | [![Mithril](https://img.shields.io/npm/dt/@storybook/mithril.svg)](app/mithril) |
| [Marko](app/marko) <sup>alpha</sup> | - | [v4.0.0-alpha](https://storybooks-marko.netlify.com/) | [![Marko](https://img.shields.io/npm/dt/@storybook/marko.svg)](app/marko) |
| [HTML](app/html) <sup>alpha</sup> | - | [v4.0.0-alpha](https://storybooks-html.netlify.com/) | [![HTML](https://img.shields.io/npm/dt/@storybook/html.svg)](app/html) |
| [Svelte](app/svelte) <sup>alpha</sup> | - | [v4.0.0-alpha](https://storybooks-svelte.netlify.com/) | [![Svelte](https://img.shields.io/npm/dt/@storybook/svelte.svg)](app/svelte) |
| [Riot](app/riot) <sup>alpha</sup> | - | [v4.0.0-alpha](https://storybooks-riot.netlify.com/) | [![Riot](https://img.shields.io/npm/dt/@storybook/riot.svg)](app/riot) |
| [Ember](app/ember) | - | [v4.0.0-alpha](https://storybooks-ember.netlify.com/) | [![Ember](https://img.shields.io/npm/dt/@storybook/ember.svg)](app/ember) |
### Sub Projects
@ -97,51 +100,27 @@ For additional help, join us [in our Slack](https://now-examples-slackin-rrirkqo
### Addons
- [a11y](addons/a11y/) - Test components for user accessibility in Storybook
- [actions](addons/actions/) - Log actions as users interact with components in the Storybook UI
- [backgrounds](addons/backgrounds/) - Let users choose backgrounds in the Storybook UI
- [centered](addons/centered/) - Center the alignment of your components within the Storybook UI
- [events](addons/events/) - Interactively fire events to components that respond to EventEmitter
- [graphql](addons/graphql/) - Query a GraphQL server within Storybook stories
- [info](addons/info/) - Annotate stories with extra component usage information
- [jest](addons/jest/) - View the results of components' unit tests in Storybook
- [knobs](addons/knobs/) - Interactively edit component prop data in the Storybook UI
- [links](addons/links/) - Create links between stories
- [notes](addons/notes/) - Annotate Storybook stories with notes
- [options](addons/options/) - Customize the Storybook UI in code
- [storyshots](addons/storyshots/) - Easy snapshot testing for components in Storybook
- [storysource](addons/storysource/) - View the code of your stories within the Storybook UI
- [viewport](addons/viewport/) - Change display sizes and layouts for responsive components using Storybook
| Addons | |
|----|---|
| [a11y](addons/a11y/) | Test components for user accessibility in Storybook |
| [actions](addons/actions/) | Log actions as users interact with components in the Storybook UI |
| [backgrounds](addons/backgrounds/) | Let users choose backgrounds in the Storybook UI |
| [centered](addons/centered/) | Center the alignment of your components within the Storybook UI |
| [events](addons/events/) | Interactively fire events to components that respond to EventEmitter |
| [graphql](addons/graphql/) | Query a GraphQL server within Storybook stories |
| [info](addons/info/) | Annotate stories with extra component usage information |
| [jest](addons/jest/) | View the results of components' unit tests in Storybook |
| [knobs](addons/knobs/) | Interactively edit component prop data in the Storybook UI |
| [links](addons/links/) | Create links between stories |
| [notes](addons/notes/) | Annotate Storybook stories with notes |
| [options](addons/options/) | Customize the Storybook UI in code |
| [storyshots](addons/storyshots/) | Easy snapshot testing for components in Storybook |
| [storysource](addons/storysource/) | View the code of your stories within the Storybook UI |
| [viewport](addons/viewport/) | Change display sizes and layouts for responsive components using Storybook |
See [Addon / Framework Support Table](ADDONS_SUPPORT.md)
## Live Examples
### 4.0.alpha
> Note, this is an Alpha version which may not be well tested. Features in this version are not final.
- [React Official](https://storybooks-official.netlify.com)
- [Vue](https://storybooks-vue.netlify.com/)
- [Angular](https://storybooks-angular.netlify.com/)
- [Polymer](https://storybooks-polymer.netlify.com/)
- [Mithril](https://storybooks-mithril.netlify.com/)
- [Marko](https://storybooks-marko.netlify.com/)
- [HTML](https://storybooks-html.netlify.com/)
- [Svelte](https://storybooks-svelte.netlify.com/)
- [Riot](https://storybooks-riot.netlify.com/)
### 3.4
- [React Official](https://release-3-4--storybooks-official.netlify.com)
- [Vue](https://release-3-4--storybooks-vue.netlify.com/)
- [Angular](https://release-3-4--storybooks-angular.netlify.com/)
- [Polymer](https://release-3-4--storybooks-polymer.netlify.com/)
### 3.3
- [React Official](https://release-3-3--storybooks-official.netlify.com)
- [Vue](https://release-3-3--storybooks-vue.netlify.com/)
- [Angular](https://release-3-3--storybooks-angular.netlify.com/)
## Badges
## Badges & Presentation materials
We have a badge ! Link it to your live Storybook example.
@ -151,6 +130,8 @@ We have a badge ! Link it to your live Storybook example.
[![Storybook](https://github.com/storybooks/press/blob/master/badges/storybook.svg)](link to site)
```
If you're looking for material to use in your presentation about storybook, like logo's video material and the colors we use etc, you can find all of that at our [press repo](https://github.com/storybooks/press).
## Community
- Tweeting via [@storybookjs](https://twitter.com/storybookjs)

7
ROADMAP.md
View File

@ -11,7 +11,6 @@
* [Supporting other frameworks and libraries](#supporting-other-frameworks-and-libraries)
+ [Polymer & Webcomponents](#polymer---webcomponents)
+ [Aurelia](#aurelia)
+ [Ember](#ember)
* [Breaking changes](#breaking-changes)
+ [Addon API](#addon-api)
+ [API for adding stories](#api-for-adding-stories)
@ -69,10 +68,6 @@ Storybook for Polymer is currently in development, and will support custom eleme
We're reaching out to the Aurelia maintainers to cooperate on this.
### Ember
We're reaching out to the Ember maintainers to cooperate on this.
## Breaking changes
### Addon API
@ -92,7 +87,7 @@ We have a new logo, so next step is a overhaul of our documentation site.
### Record videos and write blog post on how to use, tweak & develop storybook
- writing addons,
- writing addons,
- choosing the right addons.
- how to start developing on our codebase.
- how to use storybook itself and the CLI.

12
addons/a11y/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "a11y addon for storybook",
"keywords": [
"a11y",
@ -28,11 +28,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@emotion/styled": "0.10.5",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/client-logger": "4.0.0-alpha.22",
"@storybook/components": "4.0.0-alpha.22",
"@storybook/core-events": "4.0.0-alpha.22",
"@emotion/styled": "^0.10.6",
"@storybook/addons": "4.0.0-alpha.24",
"@storybook/client-logger": "4.0.0-alpha.24",
"@storybook/components": "4.0.0-alpha.24",
"@storybook/core-events": "4.0.0-alpha.24",
"axe-core": "^3.0.3",
"global": "^4.3.2",
"prop-types": "^15.6.2"

16
addons/actions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "Action Logger addon for storybook",
"keywords": [
"storybook"
@ -23,15 +23,15 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@emotion/core": "^0.13.0",
"@emotion/provider": "0.11.1",
"@emotion/styled": "0.10.5",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/components": "4.0.0-alpha.22",
"@storybook/core-events": "4.0.0-alpha.22",
"@emotion/core": "^0.13.1",
"@emotion/provider": "^0.11.2",
"@emotion/styled": "^0.10.6",
"@storybook/addons": "4.0.0-alpha.24",
"@storybook/components": "4.0.0-alpha.24",
"@storybook/core-events": "4.0.0-alpha.24",
"deep-equal": "^1.0.1",
"global": "^4.3.2",
"lodash.isequal": "^4.5.0",
"lodash": "^4.17.11",
"make-error": "^1.3.5",
"prop-types": "^15.6.2",
"react-inspector": "^2.3.0",

2
addons/actions/src/preview/withActions.js
View File

@ -1,6 +1,6 @@
// Based on http://backbonejs.org/docs/backbone.html#section-164
import { document, Element } from 'global';
import isEqual from 'lodash.isequal';
import isEqual from 'lodash/isEqual';
import addons from '@storybook/addons';
import Events from '@storybook/core-events';

8
addons/backgrounds/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "A storybook addon to show different backgrounds for your preview",
"keywords": [
"addon",
@ -27,9 +27,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@emotion/styled": "0.10.5",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/core-events": "4.0.0-alpha.22",
"@emotion/styled": "^0.10.6",
"@storybook/addons": "4.0.0-alpha.24",
"@storybook/core-events": "4.0.0-alpha.24",
"global": "^4.3.2",
"prop-types": "^15.6.2",
"util-deprecate": "^1.0.2"

1
addons/centered/ember.js Normal file
View File

@ -0,0 +1 @@
module.exports = require('./dist/ember');

2
addons/centered/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-centered",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "Storybook decorator to center components",
"keywords": [
"addon",

25
addons/centered/src/ember.js Normal file
View File

@ -0,0 +1,25 @@
import { document } from 'global';
import styles from './styles';
export default function(storyFn) {
const { template, context } = storyFn();
const element = document.createElement('div');
Object.assign(element.style, styles.style);
const innerElement = document.createElement('div');
Object.assign(innerElement.style, styles.innerStyle);
element.appendChild(innerElement);
// the inner element should append the parent
innerElement.appendTo = function appendTo(el) {
el.appendChild(element);
};
return {
template,
context,
element: innerElement,
};
}

8
addons/events/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-events",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "Add events to your Storybook stories.",
"keywords": [
"addon",
@ -26,9 +26,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@emotion/styled": "0.10.5",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/core-events": "4.0.0-alpha.22",
"@emotion/styled": "^0.10.6",
"@storybook/addons": "4.0.0-alpha.24",
"@storybook/core-events": "4.0.0-alpha.24",
"format-json": "^1.0.3",
"prop-types": "^15.6.2",
"react-lifecycles-compat": "^3.0.4",

2
addons/graphql/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-graphql",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "Storybook addon to display the GraphiQL IDE",
"keywords": [
"addon",

10
addons/info/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-info",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "A Storybook addon to show additional information for your stories.",
"keywords": [
"addon",
@ -24,10 +24,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@emotion/styled": "0.10.5",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/client-logger": "4.0.0-alpha.22",
"@storybook/components": "4.0.0-alpha.22",
"@emotion/styled": "^0.10.6",
"@storybook/addons": "4.0.0-alpha.24",
"@storybook/client-logger": "4.0.0-alpha.24",
"@storybook/components": "4.0.0-alpha.24",
"core-js": "2.5.7",
"global": "^4.3.2",
"marksy": "^6.0.3",

12
addons/jest/README.md
View File

@ -42,7 +42,7 @@ but this can mean you'll experience merge conflicts on this file in the future.
## Generating the test results
You need to make sure the generated test-restuls file exists before you start storybook.
You need to make sure the generated test-results file exists before you start storybook.
During development you will likely start jest in watch-mode
and so the json file will be re-generated every time code or tests change.
@ -52,7 +52,7 @@ npm run test:generate-output -- --watch
This change will then be HMR (hot module reloaded) using webpack and displayed by this addon.
If you want to pre-run jest automaticly during development or a static build,
If you want to pre-run jest automatically during development or a static build,
you may need to consider that if your tests fail, the script receives a non-0 exit code and will exit.
You could create a `prebuild:storybook` npm script, which will never fail by appending `|| true`:
@ -77,7 +77,7 @@ import '@storybook/addon-jest/register';
## Usage
Assuming that you have created a test files `MyComponent.test.js` and `MyOtherComponent.test.js`
Assuming that you have created test files `MyComponent.test.js` and `MyOtherComponent.test.js`
In your `story.js`
@ -136,15 +136,15 @@ storiesOf('MyComponent', module).add('Story', () => <div>Jest results disabled h
### withTests(options)
- **options.results**: OBJECT jest output results. _mandatory_
- **filesExt**: STRING test file extention. _optional_. This allow you to write "MyComponent" and not "MyComponent.test.js". It will be used as regex to find your file results. Default value is `((\\.specs?)|(\\.tests?))?(\\.js)?$`. That mean it will match: MyComponent.js, MyComponent.test.js, MyComponent.tests.js, MyComponent.spec.js, MyComponent.specs.js...
- **filesExt**: STRING test file extension. _optional_. This allows you to write "MyComponent" and not "MyComponent.test.js". It will be used as regex to find your file results. Default value is `((\\.specs?)|(\\.tests?))?(\\.js)?$`. That means it will match: MyComponent.js, MyComponent.test.js, MyComponent.tests.js, MyComponent.spec.js, MyComponent.specs.js...
## Usage with Angular
Assuming that you have created a test files `my.component.spec.ts` and `my-other.comonent.spec.ts`
Assuming that you have created test files `my.component.spec.ts` and `my-other.comonent.spec.ts`
Configure Jest with [jest-preset-angular](https://www.npmjs.com/package/jest-preset-angular)
In project`s`typings.d.ts` add
In project's `typings.d.ts` add
```ts
declare module '*.json' {

8
addons/jest/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
@ -30,9 +30,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@emotion/styled": "0.10.5",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/components": "4.0.0-alpha.22",
"@emotion/styled": "^0.10.6",
"@storybook/addons": "4.0.0-alpha.24",
"@storybook/components": "4.0.0-alpha.24",
"global": "^4.3.2",
"prop-types": "^15.6.2",
"util-deprecate": "^1.0.2"

2
addons/jest/src/register.js
View File

@ -7,7 +7,7 @@ import Panel from './components/Panel';
addons.register('storybook/tests', api => {
const channel = addons.getChannel();
addons.addPanel('storybook/tests/panel', {
title: <PanelTitle channel={addons.getChannel()} api={api} />,
title: () => <PanelTitle channel={addons.getChannel()} api={api} />,
// eslint-disable-next-line react/prop-types
render: ({ active }) => <Panel channel={channel} api={api} active={active} />,
});

10
addons/knobs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-knobs",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "Storybook Addon Prop Editor Component",
"keywords": [
"addon",
@ -24,10 +24,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@emotion/styled": "0.10.5",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/components": "4.0.0-alpha.22",
"@storybook/core-events": "4.0.0-alpha.22",
"@emotion/styled": "^0.10.6",
"@storybook/addons": "4.0.0-alpha.24",
"@storybook/components": "4.0.0-alpha.24",
"@storybook/core-events": "4.0.0-alpha.24",
"copy-to-clipboard": "^3.0.8",
"escape-html": "^1.0.3",
"fast-deep-equal": "^2.0.1",

7
addons/knobs/src/components/types/Color.js
View File

@ -28,10 +28,13 @@ class ColorType extends React.Component {
document.addEventListener('mousedown', this.handleWindowMouseDown);
}
shouldComponentUpdate(nextProps) {
shouldComponentUpdate(nextProps, nextState) {
const { knob } = this.props;
const { displayColorPicker } = this.state;
return nextProps.knob.value !== knob.value;
return (
nextProps.knob.value !== knob.value || nextState.displayColorPicker !== displayColorPicker
);
}
componentWillUnmount() {

8
addons/links/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "Story Links addon for storybook",
"keywords": [
"addon",
@ -24,9 +24,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/components": "4.0.0-alpha.22",
"@storybook/core-events": "4.0.0-alpha.22",
"@storybook/addons": "4.0.0-alpha.24",
"@storybook/components": "4.0.0-alpha.24",
"@storybook/core-events": "4.0.0-alpha.24",
"global": "^4.3.2",
"prop-types": "^15.6.2"
},

6
addons/notes/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-notes",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "Write notes for your Storybook stories.",
"keywords": [
"addon",
@ -25,8 +25,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@emotion/styled": "0.10.5",
"@storybook/addons": "4.0.0-alpha.22",
"@emotion/styled": "^0.10.6",
"@storybook/addons": "4.0.0-alpha.24",
"marked": "^0.5.0",
"prop-types": "^15.6.2"
},

3
addons/notes/src/index.js
View File

@ -2,8 +2,7 @@ import addons, { makeDecorator } from '@storybook/addons';
import marked from 'marked';
function renderMarkdown(text, options) {
marked.setOptions({ ...marked.defaults, options });
return marked(text);
return marked(text, { ...marked.defaults, ...options });
}
export const withNotes = makeDecorator({

4
addons/options/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-options",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "Options addon for storybook",
"keywords": [
"addon",
@ -23,7 +23,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/addons": "4.0.0-alpha.24",
"util-deprecate": "^1.0.2"
},
"peerDependencies": {

76
addons/storyshots/storyshots-core/README.md
View File

@ -27,6 +27,8 @@ If you still need to configure jest you can use the resources mentioned below:
> Note: If you use React 16, you'll need to follow [these additional instructions](https://github.com/facebook/react/issues/9102#issuecomment-283873039).
>
> Note: Make sure you have added the ```json``` extention to ```moduleFileExtensions``` in ```jest.config.json```. If this is missing it leads to the [following error](https://github.com/storybooks/storybook/issues/3728): ```Cannot find module 'spdx-license-ids' from 'scan.js'```.
>
> Note: Please make sure you are using ```jsdom``` as the testEnvironment on your jest config file.
### Configure Jest to work with Webpack's [require.context()](https://webpack.js.org/guides/dependency-management/#require-context)
@ -45,11 +47,11 @@ function loadStories() {
configure(loadStories, module);
```
The problem here is that it will work only during the build with webpack,
other tools may lack this feature. Since Storyshot is running under Jest,
we need to polyfill this functionality to work with Jest. The easiest
way is to integrate it to babel. One of the possible babel plugins to
polyfill this functionality might be
The problem here is that it will work only during the build with webpack,
other tools may lack this feature. Since Storyshot is running under Jest,
we need to polyfill this functionality to work with Jest. The easiest
way is to integrate it to babel. One of the possible babel plugins to
polyfill this functionality might be
[babel-plugin-require-context-hook](https://github.com/smrq/babel-plugin-require-context-hook).
To register it, add the following to your jest setup:
@ -73,8 +75,8 @@ And after, add the plugin to `.babelrc`:
}
```
Make sure **not** to include this babel plugin in the config
environment that applies to webpack, otherwise it may
Make sure **not** to include this babel plugin in the config
environment that applies to webpack, otherwise it may
replace a real `require.context` functionality.
### Configure Jest for React
@ -185,6 +187,21 @@ initStoryshots({
})
```
Provide a function to have story-specific options:
```js
initStoryshots({
test: snapshotWithOptions(story =>({
createNodeMock: (element) => {
if(story.name == 'foobar') {
return null
}
return element
},
})),
})
```
### StoryShots for async rendered components
@ -223,11 +240,11 @@ const Environment = () =>
});
/**
NOTICE that the QueryRenderer render its children via its render props.
If we don't take the StoryShot async then we will only see the QueryRenderer in the StoryShot.
If we don't take the StoryShot async then we will only see the QueryRenderer in the StoryShot.
The following QueryRenderer returns null in the first render (it can be a loading indicator instead in real file) and then when it gets the data to respond to query, it renders again with props containing the data for the Component
*/
const renderStory = (query, environment, variables = {}) => (
@ -297,9 +314,9 @@ initStoryshots({
```
NOTICE that When using the `asyncJest: true` option, you also must specify a `test` method that calls the `done()` callback.
This is a really powerful technique to write stories of Relay components because it integrates data fetching with component rendering. So instead of passing data props manually, we can let Relay do the job for us as it does in our application.
This is a really powerful technique to write stories of Relay components because it integrates data fetching with component rendering. So instead of passing data props manually, we can let Relay do the job for us as it does in our application.
Whenever you change you're data requirements by adding (and rendering) or (accidentally) deleting fields in your graphql query fragments, you'll get a different snapshot and thus an error in the StoryShot test.
Whenever you change you're data requirements by adding (and rendering) or (accidentally) deleting fields in your graphql query fragments, you'll get a different snapshot and thus an error in the StoryShot test.
## Options
@ -424,23 +441,30 @@ initStoryshots({
```
If you are using enzyme, you need to make sure jest knows how to serialize rendered components.
You can either pass in a serializer (see below) or specify an enzyme-compatible serializer (like [enzyme-to-json](https://github.com/adriantoine/enzyme-to-json), [jest-serializer-enzyme](https://github.com/rogeliog/jest-serializer-enzyme) etc.) as the default `snapshotSerializer` in your config.
For that, you can pass an enzyme-compatible snapshotSerializer (like [enzyme-to-json](https://github.com/adriantoine/enzyme-to-json), [jest-serializer-enzyme](https://github.com/rogeliog/jest-serializer-enzyme) etc.) with the `snapshotSerializer` option (see below).
Example for jest config in `package.json`:
```json
"devDependencies": {
"enzyme-to-json": "^3.2.2"
},
"jest": {
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
}
### `snapshotSerializers`
Pass an array of snapshotSerializers to the jest runtime that serializes your story (such as enzyme-to-json).
```js
import initStoryshots from '@storybook/addon-storyshots';
import { createSerializer } from 'enzyme-to-json';
initStoryshots({
renderer: mount,
snapshotSerializers: [createSerializer()],
});
```
### `serializer`
This option needs to be set if either:
* the multiSnapshot function is used to create multiple snapshot files (i.e. one per story), since it ignores any serializers specified in your jest config.
* serializers not specified in your jest config should be used when snapshotting stories.
Pass a custom serializer (such as enzyme-to-json) to serialize components to snapshot-comparable data.
### `serializer` (deprecated)
Pass a custom serializer (such as enzyme-to-json) to serialize components to snapshot-comparable data. The functionality of this option is completely covered by [snapshotSerializers](`snapshotSerializers`) which should be used instead.
```js
import initStoryshots from '@storybook/addon-storyshots';

10
addons/storyshots/storyshots-core/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
"keywords": [
"addon",
@ -28,17 +28,17 @@
},
"dependencies": {
"@babel/runtime": "^7.0.0",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/addons": "4.0.0-alpha.24",
"glob": "^7.1.3",
"global": "^4.3.2",
"jest-specific-snapshot": "^1.0.0",
"read-pkg-up": "^4.0.0"
},
"devDependencies": {
"@storybook/addon-actions": "4.0.0-alpha.22",
"@storybook/addon-links": "4.0.0-alpha.22",
"@storybook/addon-actions": "4.0.0-alpha.24",
"@storybook/addon-links": "4.0.0-alpha.24",
"@storybook/addons": "4.0.0-alpha.20",
"@storybook/react": "4.0.0-alpha.22",
"@storybook/react": "4.0.0-alpha.24",
"enzyme-to-json": "^3.3.4",
"react": "^16.4.2"
}

2
addons/storyshots/storyshots-core/src/api/ensureOptionsDefaults.js
View File

@ -28,6 +28,7 @@ function ensureOptionsDefaults(options) {
storyKindRegex,
renderer,
serializer,
snapshotSerializers,
stories2snapsConverter = defaultStories2SnapsConverter,
test: testMethod = snapshotWithOptions({ renderer, serializer }),
} = options;
@ -41,6 +42,7 @@ function ensureOptionsDefaults(options) {
storyKindRegex,
stories2snapsConverter,
testMethod,
snapshotSerializers,
integrityOptions,
};
}

2
addons/storyshots/storyshots-core/src/api/index.js
View File

@ -39,6 +39,7 @@ function testStorySnapshots(options = {}) {
stories2snapsConverter,
testMethod,
integrityOptions,
snapshotSerializers,
} = ensureOptionsDefaults(options);
const testMethodParams = {
@ -58,6 +59,7 @@ function testStorySnapshots(options = {}) {
storyNameRegex,
testMethod,
testMethodParams,
snapshotSerializers,
});
integrityTest(integrityOptions, stories2snapsConverter);

10
addons/storyshots/storyshots-core/src/api/snapshotsTestsTemplate.js
View File

@ -1,4 +1,5 @@
import { describe, it } from 'global';
import { addSerializer } from 'jest-specific-snapshot';
function snapshotTest({
asyncJest,
@ -48,7 +49,14 @@ function snapshotTestSuite({ kind, stories, suite, storyNameRegex, ...restParams
});
}
function snapshotsTests({ groups, storyKindRegex, ...restParams }) {
function snapshotsTests({ groups, storyKindRegex, snapshotSerializers, ...restParams }) {
if (snapshotSerializers) {
snapshotSerializers.forEach(serializer => {
addSerializer(serializer);
expect.addSnapshotSerializer(serializer);
});
}
// eslint-disable-next-line
for (const group of groups) {
const { fileName, kind, stories } = group;

10
addons/storyshots/storyshots-core/src/frameworks/react/renderTree.js
View File

@ -5,7 +5,15 @@ function getRenderedTree(story, context, { renderer, serializer, ...rendererOpti
const storyElement = story.render(context);
const currentRenderer = renderer || reactTestRenderer.create;
const tree = currentRenderer(storyElement, rendererOptions);
return serializer ? serializer(tree) : tree;
if (serializer) {
// eslint-disable-next-line no-console
console.warn(
'The "serializer" option of @storybook/addon-storyshots has been deprecated. Please use "snapshotSerializers: [<your serializer>]" in the future.'
);
return serializer(tree);
}
return tree;
}
export default getRenderedTree;

5
addons/storyshots/storyshots-core/src/test-bodies.js
View File

@ -1,12 +1,15 @@
import 'jest-specific-snapshot';
const isFunction = obj => !!(obj && obj.constructor && obj.call && obj.apply);
const optionsOrCallOptions = (opts, story) => (isFunction(opts) ? opts(story) : opts);
export const snapshotWithOptions = (options = {}) => ({
story,
context,
renderTree,
snapshotFileName,
}) => {
const result = renderTree(story, context, options);
const result = renderTree(story, context, optionsOrCallOptions(options, story));
function match(tree) {
if (snapshotFileName) {

233
addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap Normal file
View File

@ -0,0 +1,233 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Another Button with some emoji 1`] = `
.emotion-0 {
border: 1px solid #eee;
border-radius: 3px;
background-color: #FFFFFF;
cursor: pointer;
font-size: 15px;
padding: 3px 10px;
margin: 10px;
}
<button
className="emotion-0 emotion-1"
onClick={[Function]}
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
`;
exports[`Storyshots Another Button with text 1`] = `
.emotion-0 {
border: 1px solid #eee;
border-radius: 3px;
background-color: #FFFFFF;
cursor: pointer;
font-size: 15px;
padding: 3px 10px;
margin: 10px;
}
<button
className="emotion-0 emotion-1"
onClick={[Function]}
>
Hello Button
</button>
`;
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
<h1>
</h1>
`;
exports[`Storyshots Button with some emoji 1`] = `
.emotion-0 {
border: 1px solid #eee;
border-radius: 3px;
background-color: #FFFFFF;
cursor: pointer;
font-size: 15px;
padding: 3px 10px;
margin: 10px;
}
<button
className="emotion-0 emotion-1"
onClick={[Function]}
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
`;
exports[`Storyshots Button with text 1`] = `
.emotion-0 {
border: 1px solid #eee;
border-radius: 3px;
background-color: #FFFFFF;
cursor: pointer;
font-size: 15px;
padding: 3px 10px;
margin: 10px;
}
<button
className="emotion-0 emotion-1"
onClick={[Function]}
>
Hello Button
</button>
`;
exports[`Storyshots Welcome to Storybook 1`] = `
.emotion-18 {
margin: 15px;
max-width: 600px;
line-height: 1.4;
font-family: "Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif;
}
.emotion-2 {
font-size: 15px;
font-weight: 600;
padding: 2px 5px;
border: 1px solid #eae9e9;
border-radius: 4px;
background-color: #f3f2f2;
color: #3a3a3a;
}
.emotion-4 {
color: #1474f3;
-webkit-text-decoration: none;
text-decoration: none;
border-bottom: 1px solid #1474f3;
padding-bottom: 2px;
border-top: none;
border-right: none;
border-left: none;
background-color: transparent;
padding: 0;
cursor: pointer;
font: inherit;
}
.emotion-12 {
color: #1474f3;
-webkit-text-decoration: none;
text-decoration: none;
border-bottom: 1px solid #1474f3;
padding-bottom: 2px;
}
.emotion-16 {
opacity: 0.5;
}
<article
className="emotion-18 emotion-19"
>
<h1
className="emotion-0 emotion-1"
>
Welcome to storybook
</h1>
<p>
This is a UI component dev environment for your app.
</p>
<p>
We've added some basic stories inside the
<code
className="emotion-2 emotion-3"
>
src/stories
</code>
directory.
<br />
A story is a single state of one or more UI components. You can have as many stories as you want.
<br />
(Basically a story is like a visual test case.)
</p>
<p>
See these sample
<button
className="emotion-4 emotion-5"
onClick={[Function]}
>
stories
</button>
for a component called
<code
className="emotion-2 emotion-3"
>
Button
</code>
.
</p>
<p>
Just like that, you can add your own components as stories.
<br />
You can also edit those components and see changes right away.
<br />
(Try editing the
<code
className="emotion-2 emotion-3"
>
Button
</code>
stories located at
<code
className="emotion-2 emotion-3"
>
src/stories/index.js
</code>
.)
</p>
<p>
Usually we create stories with smaller UI components in the app.
<br />
Have a look at the
<a
className="emotion-12 emotion-13"
href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer"
target="_blank"
>
Writing Stories
</a>
section in our documentation.
</p>
<p
className="emotion-16 emotion-17"
>
<b>
NOTE:
</b>
<br />
Have a look at the
<code
className="emotion-2 emotion-3"
>
.storybook/webpack.config.js
</code>
to add webpack loaders and plugins you are using in this project.
</p>
</article>
`;

4
addons/storyshots/storyshots-core/stories/storyshot.enzyme.test.js
View File

@ -1,11 +1,11 @@
import path from 'path';
import { mount } from 'enzyme';
import toJSON from 'enzyme-to-json';
import { createSerializer } from 'enzyme-to-json';
import initStoryshots from '../src';
initStoryshots({
framework: 'react',
configPath: path.join(__dirname, '..', '.storybook'),
renderer: mount,
serializer: toJSON,
snapshotSerializers: [createSerializer()],
});

8
addons/storyshots/storyshots-core/stories/storyshot.snapshotWithOptionsFunction.test.js Normal file
View File

@ -0,0 +1,8 @@
import path from 'path';
import initStoryshots, { snapshotWithOptions } from '../src';
initStoryshots({
framework: 'react',
configPath: path.join(__dirname, '..', '.storybook'),
test: snapshotWithOptions(() => ({})),
});

4
addons/storyshots/storyshots-puppeteer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots-puppeteer",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "Image snappshots addition to StoryShots base on puppeteer",
"keywords": [
"addon",
@ -25,7 +25,7 @@
},
"dependencies": {
"@babel/runtime": "^7.0.0",
"@storybook/node-logger": "4.0.0-alpha.22",
"@storybook/node-logger": "4.0.0-alpha.24",
"jest-image-snapshot": "^2.5.0",
"puppeteer": "^1.6.2"
},

6
addons/storysource/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storysource",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "Stories addon for storybook",
"keywords": [
"addon",
@ -25,8 +25,8 @@
},
"dependencies": {
"@babel/runtime": "^7.0.0",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/components": "4.0.0-alpha.22",
"@storybook/addons": "4.0.0-alpha.24",
"@storybook/components": "4.0.0-alpha.24",
"estraverse": "^4.2.0",
"loader-utils": "^1.1.0",
"prettier": "^1.14.0",

10
addons/viewport/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-viewport",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "Storybook addon to change the viewport size to mobile",
"keywords": [
"addon",
@ -23,10 +23,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@emotion/styled": "0.10.5",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/components": "4.0.0-alpha.22",
"@storybook/core-events": "4.0.0-alpha.22",
"@emotion/styled": "^0.10.6",
"@storybook/addons": "4.0.0-alpha.24",
"@storybook/components": "4.0.0-alpha.24",
"@storybook/core-events": "4.0.0-alpha.24",
"global": "^4.3.2",
"prop-types": "^15.6.2",
"util-deprecate": "^1.0.2"

8
app/angular/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/angular",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -29,8 +29,8 @@
},
"dependencies": {
"@babel/runtime": "^7.0.0",
"@storybook/core": "4.0.0-alpha.22",
"@storybook/node-logger": "4.0.0-alpha.22",
"@storybook/core": "4.0.0-alpha.24",
"@storybook/node-logger": "4.0.0-alpha.24",
"angular2-template-loader": "^0.6.2",
"core-js": "^2.5.7",
"fork-ts-checker-webpack-plugin": "^0.4.9",
@ -40,7 +40,7 @@
"sass-loader": "^7.1.0",
"ts-loader": "^4.5.0",
"tsconfig-paths-webpack-plugin": "^3.2.0",
"webpack": "^4.17.1",
"webpack": "^4.20.0",
"zone.js": "^0.8.26"
},
"peerDependencies": {

30
app/ember/README.md Normal file
View File

@ -0,0 +1,30 @@
# Storybook for Ember
Storybook for Ember is a UI development environment for your Ember components.
With it, you can visualize different states of your UI components and develop them interactively.
![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/media/storybook-intro.gif)
Storybook runs outside of your app.
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
## Getting Started
```sh
npm i -g @storybook/cli
cd my-ember-app
storybook init
```
For more information visit: [storybook.js.org](https://storybook.js.org)
* * *
Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish.
You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want.
## Docs
- [Basics](https://storybook.js.org/basics/introduction)
- [Configurations](https://storybook.js.org/configurations/default-config)
- [Addons](https://storybook.js.org/addons/introduction)

4
app/ember/bin/build.js Executable file
View File

@ -0,0 +1,4 @@
#!/usr/bin/env node
process.env.NODE_ENV = process.env.NODE_ENV || 'production';
require('../dist/server/build');

3
app/ember/bin/index.js Executable file
View File

@ -0,0 +1,3 @@
#!/usr/bin/env node
require('../dist/server');

42
app/ember/package.json Normal file
View File

@ -0,0 +1,42 @@
{
"name": "@storybook/ember",
"version": "4.0.0-alpha.24",
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
"homepage": "https://github.com/storybooks/storybook/tree/master/app/ember",
"publishConfig": {
"access": "public"
},
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/storybooks/storybook.git"
},
"license": "MIT",
"main": "dist/client/index.js",
"jsnext:main": "src/client/index.js",
"bin": {
"build-storybook": "./bin/build.js",
"start-storybook": "./bin/index.js",
"storybook-server": "./bin/index.js"
},
"scripts": {
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@babel/runtime": "^7.0.0",
"@ember/test-helpers": "^0.7.25",
"@storybook/core": "4.0.0-alpha.24",
"common-tags": "^1.8.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"global": "^4.3.2"
},
"peerDependencies": {
"babel-loader": "^7.0.0 || ^8.0.0",
"babel-plugin-ember-modules-api-polyfill": "^2.4.0",
"ember-cli-htmlbars-inline-precompile": "^1.0.3",
"ember-source": "^3.4.0"
}
}

9
app/ember/src/client/index.js Normal file
View File

@ -0,0 +1,9 @@
export {
storiesOf,
setAddon,
addDecorator,
addParameters,
configure,
getStorybook,
forceReRender,
} from './preview';

4
app/ember/src/client/preview/globals.js Normal file
View File

@ -0,0 +1,4 @@
import { window } from 'global';
window.STORYBOOK_NAME = process.env.STORYBOOK_NAME;
window.STORYBOOK_ENV = 'ember';

18
app/ember/src/client/preview/index.js Normal file
View File

@ -0,0 +1,18 @@
import { start } from '@storybook/core/client';
import './globals';
import render from './render';
const { clientApi, configApi, forceReRender } = start(render);
export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
clearDecorators,
getStorybook,
} = clientApi;
export const { configure } = configApi;
export { forceReRender };

71
app/ember/src/client/preview/render.js Normal file
View File

@ -0,0 +1,71 @@
/* eslint-disable no-undef */
import { window, document } from 'global';
import { stripIndents } from 'common-tags';
const rootEl = document.getElementById('root');
const config = window.require(`${window.STORYBOOK_NAME}/config/environment`);
const app = window.require(`${window.STORYBOOK_NAME}/app`).default.create({
autoboot: false,
rootElement: rootEl,
...config.APP,
});
let lastPromise = app.boot();
let hasRendered = false;
function render(options, el) {
const { template, context = {}, element } = options;
if (hasRendered) {
lastPromise = lastPromise.then(instance => instance.destroy());
}
lastPromise = lastPromise
.then(() => {
const appInstancePrivate = app.buildInstance();
return appInstancePrivate.boot().then(() => appInstancePrivate);
})
.then(instance => {
instance.register(
'component:story-mode',
Ember.Component.extend({
layout: template || options,
...context,
})
);
const component = instance.lookup('component:story-mode');
if (element) {
component.appendTo(element);
element.appendTo(el);
} else {
component.appendTo(el);
}
hasRendered = true;
return instance;
});
}
export default function renderMain({ story, selectedKind, selectedStory, showMain, showError }) {
const element = story();
if (!element) {
showError({
title: `Expecting a Ember element from the story: "${selectedStory}" of "${selectedKind}".`,
description: stripIndents`
Did you forget to return the Ember element from the story?
Use "() => hbs('{{component}}')" or "() => { return {
template: hbs\`{{component}}\`
} }" when defining the story.
`,
});
return;
}
showMain();
render(element, rootEl);
}

4
app/ember/src/server/build.js Normal file
View File

@ -0,0 +1,4 @@
import { buildStatic } from '@storybook/core/server';
import options from './options';
buildStatic(options);

15
app/ember/src/server/framework-preset-babel-ember.js Normal file
View File

@ -0,0 +1,15 @@
import { precompile } from 'ember-source/dist/ember-template-compiler';
export function babel(config) {
const babelConfigPlugins = config.plugins || [];
const extraPlugins = [
[require.resolve('babel-plugin-htmlbars-inline-precompile'), { precompile }],
[require.resolve('babel-plugin-ember-modules-api-polyfill')],
];
return {
...config,
plugins: [].concat(babelConfigPlugins, extraPlugins),
};
}

5
app/ember/src/server/index.js Normal file
View File

@ -0,0 +1,5 @@
import { buildDev } from '@storybook/core/server';
import options from './options';
buildDev(options);

7
app/ember/src/server/options.js Normal file
View File

@ -0,0 +1,7 @@
import packageJson from '../../package.json';
export default {
packageJson,
defaultConfigName: 'ember-cli',
frameworkPresets: [require.resolve('./framework-preset-babel-ember.js')],
};

4
app/html/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/html",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -28,7 +28,7 @@
},
"dependencies": {
"@babel/runtime": "^7.0.0",
"@storybook/core": "4.0.0-alpha.22",
"@storybook/core": "4.0.0-alpha.24",
"common-tags": "^1.8.0",
"global": "^4.3.2",
"html-loader": "^0.5.5",

4
app/marko/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/marko",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -29,7 +29,7 @@
},
"dependencies": {
"@babel/runtime": "^7.0.0",
"@storybook/core": "4.0.0-alpha.22",
"@storybook/core": "4.0.0-alpha.24",
"common-tags": "^1.8.0",
"global": "^4.3.2",
"marko-loader": "^1.3.3",

4
app/mithril/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/mithril",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "Storybook for Mithril: Develop Mithril Component in isolation.",
"keywords": [
"storybook"
@ -30,7 +30,7 @@
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.0.0",
"@babel/runtime": "^7.0.0",
"@storybook/core": "4.0.0-alpha.22",
"@storybook/core": "4.0.0-alpha.24",
"common-tags": "^1.8.0",
"global": "^4.3.2",
"react": "^16.4.2",

6
app/polymer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/polymer",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -29,13 +29,13 @@
"dependencies": {
"@babel/polyfill": "^7.0.0",
"@babel/runtime": "^7.0.0",
"@storybook/core": "4.0.0-alpha.22",
"@storybook/core": "4.0.0-alpha.24",
"@webcomponents/webcomponentsjs": "^1.2.0",
"common-tags": "^1.8.0",
"global": "^4.3.2",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"webpack": "^4.17.1"
"webpack": "^4.20.0"
},
"devDependencies": {
"lit-html": "^0.10.2",

22
app/react-native/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/react-native",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "A better way to develop React Native Components for your app",
"keywords": [
"react",
@ -28,11 +28,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/channel-websocket": "4.0.0-alpha.22",
"@storybook/core": "4.0.0-alpha.22",
"@storybook/core-events": "4.0.0-alpha.22",
"@storybook/ui": "4.0.0-alpha.22",
"@storybook/addons": "4.0.0-alpha.24",
"@storybook/channel-websocket": "4.0.0-alpha.24",
"@storybook/core": "4.0.0-alpha.24",
"@storybook/core-events": "4.0.0-alpha.24",
"@storybook/ui": "4.0.0-alpha.24",
"babel-loader": "^7.1.5",
"babel-plugin-macros": "^2.3.0",
"babel-plugin-syntax-async-functions": "^6.13.0",
@ -42,10 +42,8 @@
"babel-plugin-transform-regenerator": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-flow": "^6.23.0",
"babel-preset-minify": "^0.4.2",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"babel-runtime": "^6.26.0",
"case-sensitive-paths-webpack-plugin": "^2.1.2",
"commander": "^2.17.0",
@ -58,16 +56,16 @@
"json5": "^2.0.1",
"prop-types": "^15.6.2",
"raw-loader": "^0.5.1",
"react-dev-utils": "6.0.0-next.3e165448",
"react-dev-utils": "6.0.0-next.2150693d",
"react-native-compat": "^1.0.0",
"react-native-iphone-x-helper": "^1.0.3",
"shelljs": "^0.8.2",
"universal-dotenv": "^1.9.0",
"url-parse": "^1.4.3",
"uuid": "^3.3.2",
"webpack": "^4.17.1",
"webpack-dev-middleware": "^3.2.0",
"webpack-hot-middleware": "^2.22.3",
"webpack": "^4.20.0",
"webpack-dev-middleware": "^3.4.0",
"webpack-hot-middleware": "^2.24.2",
"ws": "^6.0.0"
},
"devDependencies": {

76
app/react-native/readme.md
View File

@ -15,14 +15,11 @@ npm -g i @storybook/cli
storybook init
```
After you have installed, there are additional steps for `create-react-native-app` apps. See the section for details, otherwise skip to [Start Storybook](#start-storybook)
to see the next step.
The next thing you need to do is make Storybook UI visible in your app.
## Create React Native App (CRNA)
### CRNA, React Native vanilla
If you run `storybook init` inside a CRNA app, you'll be notified that there is an extra step required to use Storybook.
The easiest way to use Storybook inside CRNA is to simply replace your App with the Storybook UI, which is possible by replacing `App.js` with a single line of code:
The easiest way to use Storybook is to simply replace your App with the Storybook UI, which is possible by replacing `App.js` with a single line of code:
```js
export default from './storybook';
@ -39,10 +36,13 @@ import App from './app';
module.exports = __DEV__ ? StorybookUI : App;
```
Alternatively, `StorybookUI` is simply a RN `View` component that can be embedded anywhere in your RN application, e.g. on a tab or within an admin screen.
### React Native Navigation, other complex use cases
## Start Storybook
`StorybookUI` is simply a RN `View` component that can be embedded anywhere in your RN application, e.g. on a tab or within an admin screen.
## Start Storybook server (optional)
If you want to control storybook from browser/VS Code/websockets you need to start the server.
After initial setup start the storybook server with the storybook npm script.
```shell
@ -51,6 +51,15 @@ npm run storybook
Now, you can open <http://localhost:7007> to view your storybook menus in the browser.
## Old standalone behaviour
Since storybook version v4.0 packager is removed from storybook.
The suggested storybook usage is to include it inside your app.
If you want to keep the old behaviour, you have to start the packager yourself with a different project root.
```
npm run storybook start -p 7007 | react-native start --projectRoot storybook
```
## Start App
To see your Storybook stories on the device, you should start your mobile app for the `<platform>` of your choice (typically `ios` or `android`). (Note that due to an implementation detail, your stories will only show up in the left pane of your browser window after your device has connected to this storybook server.)
@ -68,41 +77,6 @@ Once your app is started, changing the selected story in web browser will update
If you are using Android and you get the following error after running the app: `'websocket: connection error', 'Failed to connect to localhost/127.0.0.1:7007'`, you have to forward the port 7007 on your device/emulator to port 7007 on your local machine with the following command:
`adb reverse tcp:7007 tcp:7007`
## Using Haul-cli
[Haul](https://github.com/callstack-io/haul) is an alternative to the react-native packager and has several advantages in that it allows you to define your own loaders, and handles symlinks better.
If you want to use haul instead of the react-native packager, modify the storybook npm script to:
```sh
storybook start -p 7007 --haul webpack.haul.storybook.js --platform android | ios | all
```
Where webpack.haul.storybook.js should look something like this:
```js
module.exports = ({ platform }) => ({
entry: `./storybook/index.${platform}.js`,
// any other haul config here.
});
```
## Seamless Typescript Integration
*Note: These instructions are for react-native >= 0.45, @storybook/react-native >= 4.0.0-alpha.2 or higher and the (default) [metro](https://github.com/facebook/metro) bundler*
For seamless type integration (no intermediate build step) we use the custom rn cli config feature and the [react-native-typescript-transformer](https://github.com/ds300/react-native-typescript-transformer) project
First follow the instructions [here](https://github.com/ds300/react-native-typescript-transformer#step-1-install).
Now update your storybook `package.json` script to the following
"scripts": {
"storybook": "storybook start --metro-config $PWD/rn-cli.config.js -p 7007"
}
The metro bundler requires an absolute path to the config. The above setup assumes the `rn-cli.config.js` is in the root of your project or next to your `package.json`
## Start Command Parameters
The following parameters can be passed to the start command:
@ -112,32 +86,16 @@ The following parameters can be passed to the start command:
host to listen on
-p, --port <port>
port to listen on
--haul <configFile>
use haul with config file
--platform <ios|android|all>
build platform-specific build
-s, --secured
whether server is running on https
-c, --config-dir [dir-name]
storybook config directory
--metro-config [relative-config-path]
Metro Bundler Custom config
-e, --environment [environment]
DEVELOPMENT/PRODUCTION environment for webpack
-r, --reset-cache
reset react native packager
--skip-packager
run only storybook server
-i, --manual-id
allow multiple users to work with same storybook
--smoke-test
Exit after successful start
--packager-port <packagerPort>
Custom packager port
--root [root]
Add additional root(s) to be used by the packager in this project
--projectRoots [projectRoots]
Override the root(s) to be used by the packager
```
## getStorybookUI Options

67
app/react-native/src/bin/storybook-start.js vendored
View File

@ -1,6 +1,5 @@
#!/usr/bin/env node
/* eslint-disable no-console */
import { exec } from 'child_process';
import path from 'path';
import program from 'commander';
import Server from '../server';
@ -8,19 +7,11 @@ import Server from '../server';
program
.option('-h, --host <host>', 'host to listen on')
.option('-p, --port <port>', 'port to listen on')
.option('--haul <configFile>', 'use haul with config file')
.option('--platform <ios|android|all>', 'build platform-specific build')
.option('-s, --secured', 'whether server is running on https')
.option('-c, --config-dir [dir-name]', 'storybook config directory')
.option('--metro-config [relative-config-path]', 'Metro Bundler Custom config')
.option('-e, --environment [environment]', 'DEVELOPMENT/PRODUCTION environment for webpack')
.option('-r, --reset-cache', 'reset react native packager')
.option('--skip-packager', 'run only storybook server')
.option('-i, --manual-id', 'allow multiple users to work with same storybook')
.option('--smoke-test', 'Exit after successful start')
.option('--packager-port <packagerPort>', 'Custom packager port')
.option('--root [root]', 'Add additional root(s) to be used by the packager in this project')
.option('--projectRoots [projectRoots]', 'Override the root(s) to be used by the packager')
.parse(process.argv);
const projectDir = path.resolve();
@ -48,61 +39,3 @@ server.listen(...listenAddr, err => {
process.exit(0);
}
});
if (!program.skipPackager) {
let symlinks = [];
let roots = [projectDir];
if (program.root) {
roots = roots.concat(program.root.split(',').map(root => path.resolve(root)));
}
try {
// eslint-disable-next-line global-require
require('babel-register')({
presets: [require.resolve('babel-preset-flow')],
ignore: false,
babelrc: false,
});
// eslint-disable-next-line global-require
const findSymlinkedModules = require('react-native/local-cli/util/findSymlinkedModules');
symlinks = roots.reduce((arr, rootPath) => arr.concat(findSymlinkedModules(rootPath, roots)), [
...roots,
]);
} catch (e) {
console.warn(`Unable to load findSymlinksPaths: ${e.message}`, e);
}
let projectRoots = (configDir === projectDir ? [] : [configDir]).concat(symlinks);
if (program.projectRoots) {
projectRoots = projectRoots.concat(
program.projectRoots.split(',').map(root => path.resolve(root))
);
}
let cliCommand = 'react-native start';
if (program.metroConfig) {
cliCommand += ` --config ${program.metroConfig}`;
}
if (program.haul) {
const platform = program.platform || 'all';
cliCommand = `haul start --config ${program.haul} --platform ${platform}`;
}
// RN packager
exec(
[
cliCommand,
`--projectRoots ${projectRoots.join(',')}`,
program.resetCache && '--reset-cache',
program.packagerPort && `--port=${program.packagerPort}`,
]
.filter(x => x)
.join(' '),
{ async: true }
);
}

10
app/react/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/react",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -31,14 +31,14 @@
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/runtime": "^7.0.0",
"@emotion/styled": "0.10.5",
"@storybook/core": "4.0.0-alpha.22",
"@emotion/styled": "^0.10.6",
"@storybook/core": "4.0.0-alpha.24",
"babel-plugin-react-docgen": "^2.0.0-babel7.0",
"common-tags": "^1.8.0",
"global": "^4.3.2",
"lodash.flattendeep": "^4.4.0",
"lodash": "^4.17.11",
"prop-types": "^15.6.2",
"react-dev-utils": "6.0.0-next.3e165448"
"react-dev-utils": "6.0.0-next.2150693d"
},
"peerDependencies": {
"babel-loader": "^7.0.0 || ^8.0.0",

2
app/react/src/client/preview/element_check.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import flattenDeep from 'lodash.flattendeep';
import flattenDeep from 'lodash/flattenDeep';
// return true if the element is renderable with react fiber
export const isValidFiberElement = element =>

4
app/riot/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/riot",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -28,7 +28,7 @@
},
"dependencies": {
"@babel/runtime": "^7.0.0",
"@storybook/core": "4.0.0-alpha.22",
"@storybook/core": "4.0.0-alpha.24",
"common-tags": "^1.8.0",
"global": "^4.3.2",
"moment": "^2.22.2",

2
app/riot/src/client/preview/__snapshots__/render-riot.test.js.snap
View File

@ -1,5 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`render a riot element can accept a constructor 1`] = `"<simpletest hacked=\\"true\\" test=\\"with a parameter\\"><div>HACKED : true ; simple test (with a parameter). Oh, by the way (value is mapped to riotValue)</div></simpletest>"`;
exports[`render a riot element can nest several tags 1`] = `"<matriochka><div><tag1><div>Inside tag1:<ul><li><tag2><div>Inside tag2:<ul><li><tag3><div>Inside tag3:<ul><li><tag4><div>Inside tag4:<ul><li><tag5><div>Inside tag5:<ul><li>Content</li></ul></div></tag5></li></ul></div></tag4></li></ul></div></tag3></li></ul></div></tag2></li></ul></div></tag1></div></matriochka>"`;
exports[`render a riot element can template some vars 1`] = `"<simpletest test=\\"with a parameter\\"><div>simple test (with a parameter). Oh, by the way (value is mapped to riotValue)</div></simpletest>"`;

13
app/riot/src/client/preview/compileNow.js
View File

@ -1,13 +0,0 @@
import compiler from 'riot-compiler';
export function asCompiledCode(text) {
return compiler
.compile(text, {})
.replace('var riot = require("riot")', '')
.replace('riot.tag2(', 'tag2(');
}
export function compileNow(tag2, text) {
// eslint-disable-next-line no-eval
return tag2 && eval(asCompiledCode(text));
}

23
app/riot/src/client/preview/compileStageFunctions.js Normal file
View File

@ -0,0 +1,23 @@
import compiler from 'riot-compiler';
export const alreadyCompiledMarker = "var riot = require('riot')";
export function asCompiledCode(text) {
return compiler
.compile(text, {})
.replace('var riot = require("riot")', '')
.replace('riot.tag2(', 'tag2(');
}
export function compileNow(tag2, text) {
// eslint-disable-next-line no-eval
return tag2 && eval(asCompiledCode(text));
}
export function getRidOfRiotNoise(compiled) {
return compiled.replace(/riot\.tag2/g, 'tag2').replace(alreadyCompiledMarker, '');
}
export function setConstructor(compiledSourceCode, constructor) {
return compiledSourceCode.replace(/function\(opts\)\s*{\s*}(?=\);$)/, constructor.toString());
}

2
app/riot/src/client/preview/index.js
View File

@ -3,7 +3,7 @@ import { start } from '@storybook/core/client';
import './globals';
import riot, { tag2, mount as vendorMount } from 'riot';
import render from './render';
import { compileNow as unboundCompileNow, asCompiledCode } from './compileNow';
import { compileNow as unboundCompileNow, asCompiledCode } from './compileStageFunctions';
const { clientApi, configApi, forceReRender } = start(render);

35
app/riot/src/client/preview/render-riot.test.js
View File

@ -1,7 +1,8 @@
import { document } from 'global';
import { unregister, tag2, mount } from 'riot';
import compiler from 'riot-compiler';
import { render } from './render-riot';
import { render } from './rendering';
import { asCompiledCode } from './compileStageFunctions';
const rootElement = document.createElement('div');
rootElement.id = 'root';
@ -46,6 +47,14 @@ describe('render a riot element', () => {
// does only work in true mode, and not in jest mode
});
it('will be possible to compile a template before rendering it', () => {
const compiledTemplate = asCompiledCode('<template><div>raw code</div></template>');
expect(compiledTemplate).toEqual(
"tag2('template', '<div>raw code</div>', '', '', function(opts) {\n});"
);
});
it('works with a json consisting in a tagName and opts', () => {
tag2('hello', '<p>Hello { opts.suffix }</p>', '', '', () => {});
@ -94,4 +103,28 @@ describe('render a riot element', () => {
expect(rootElement.innerHTML).toMatchSnapshot();
});
it('can accept a constructor', () => {
expect(
render(
{
tags: [
{
content:
"<SimpleTest><div>HACKED : {opts.hacked} ; simple test ({opts.test || 'without parameter'}). Oh, by the way ({opts.riotValue || '... well, nothing'})</div></SimpleTest>",
boundAs: 'mustBeUniquePlease',
},
],
template:
'<SimpleTest hacked={hacked} test={ "with a parameter" } value={"value is mapped to riotValue"}></SimpleTest>',
tagConstructor() {
this.hacked = true;
},
},
context
)
).toBe(true);
expect(rootElement.innerHTML).toMatchSnapshot();
});
});

2
app/riot/src/client/preview/render.js
View File

@ -1,7 +1,7 @@
import { document } from 'global';
import { stripIndents } from 'common-tags';
import { unregister } from 'riot';
import { render as renderRiot } from './render-riot';
import { render as renderRiot } from './rendering';
export default function renderMain({
story,

5
app/riot/src/client/preview/rendering/compiledButUnmounted.js Normal file
View File

@ -0,0 +1,5 @@
import { mount } from 'riot';
export default function renderCompiledButUnmounted(component) {
mount('root', component.tagName, component.opts || {});
}

24
app/riot/src/client/preview/rendering/index.js Normal file
View File

@ -0,0 +1,24 @@
import renderCompiledButUnmounted from './compiledButUnmounted';
import renderStringified from './stringified';
import renderRaw from './raw';
export function render(component) {
if (typeof component === 'string') {
renderRaw(component);
return true;
}
const { tags } = component || {};
if (Array.isArray(tags)) {
renderStringified(component);
return true;
}
if (component && component.tagName) {
renderCompiledButUnmounted(component);
return true;
}
if (component && component.length) {
// already rendered, nothing to do
return true;
}
return false;
}

14
app/riot/src/client/preview/rendering/raw.js Normal file
View File

@ -0,0 +1,14 @@
import { mount, tag2 as tag } from 'riot';
import compiler from 'riot-compiler';
import { alreadyCompiledMarker, getRidOfRiotNoise } from '../compileStageFunctions';
export default function renderRaw(sourceCode) {
const tag2 = tag; // eslint-disable-line no-unused-vars
// eslint-disable-next-line no-eval
eval(
getRidOfRiotNoise(
`${compiler.compile(sourceCode.replace(alreadyCompiledMarker, '').trim(), {})}`
)
);
mount('root', /tag2\s*\(\s*'([^']+)'/.exec(sourceCode)[1], {});
}

53
app/riot/src/client/preview/render-riot.js → app/riot/src/client/preview/rendering/stringified.js
View File

@ -1,8 +1,7 @@
import { document } from 'global';
import { mount, unregister, tag2 as tag } from 'riot';
import compiler from 'riot-compiler';
const alreadyCompiledMarker = "var riot = require('riot')";
import { document } from 'global';
import { alreadyCompiledMarker, getRidOfRiotNoise, setConstructor } from '../compileStageFunctions';
function guessRootName(stringified) {
const whiteSpaceLocation = stringified.indexOf(' ', stringified.indexOf('<') + 1);
@ -31,12 +30,10 @@ function compileText(code, rootName) {
.trim();
}
const getRidOfRiotNoise = compiled =>
compiled.replace(/riot\.tag2/g, 'tag2').replace(alreadyCompiledMarker, '');
function renderStringified({
export default function renderStringified({
tags,
template = `<${(tags[0] || []).boundAs || guessRootName(tags[0] || '')}/>`,
tagConstructor,
}) {
const tag2 = tag; // eslint-disable-line no-unused-vars
tags.forEach(oneTag => {
@ -49,43 +46,11 @@ function renderStringified({
eval(getRidOfRiotNoise(`${compiled}`)); // eslint-disable-line no-eval
});
const sourceCode = `<root>${template}</root>`;
if (template !== '<root/>') eval(getRidOfRiotNoise(`${compiler.compile(sourceCode, {})}`)); // eslint-disable-line no-eval
const compiledRootSource = !tagConstructor
? `${compiler.compile(sourceCode, {})}`
: setConstructor(`${compiler.compile(sourceCode, {})}`, tagConstructor);
if (template !== '<root/>') eval(getRidOfRiotNoise(compiledRootSource)); // eslint-disable-line no-eval
mount('*');
}
function renderRaw(sourceCode) {
const tag2 = tag; // eslint-disable-line no-unused-vars
// eslint-disable-next-line no-eval
eval(
getRidOfRiotNoise(
`${compiler.compile(sourceCode.replace(alreadyCompiledMarker, '').trim(), {})}`
)
);
mount('root', /tag2\s*\(\s*'([^']+)'/.exec(sourceCode)[1], {});
}
function renderCompiledButUnmounted(component) {
mount('root', component.tagName, component.opts || {});
}
export function render(component) {
if (typeof component === 'string') {
renderRaw(component);
return true;
}
const { tags } = component || {};
if (Array.isArray(tags)) {
renderStringified(component);
return true;
}
if (component && component.tagName) {
renderCompiledButUnmounted(component);
return true;
}
if (component && component.length) {
// already rendered, nothing to do
return true;
}
return false;
}

4
app/svelte/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/svelte",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -28,7 +28,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/core": "4.0.0-alpha.22",
"@storybook/core": "4.0.0-alpha.24",
"common-tags": "^1.8.0",
"global": "^4.3.2",
"react": "^16.4.2",

4
app/vue/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/vue",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -29,7 +29,7 @@
},
"dependencies": {
"@babel/runtime": "^7.0.0",
"@storybook/core": "4.0.0-alpha.22",
"@storybook/core": "4.0.0-alpha.24",
"common-tags": "^1.8.0",
"global": "^4.3.2",
"react": "^16.4.2",

7
app/vue/src/client/preview/index.js
View File

@ -13,7 +13,12 @@ const decorateStory = (getStory, decorators) =>
decorators.reduce(
(decorated, decorator) => context => {
const story = () => decorated(context);
const decoratedStory = decorator(story, context);
let decoratedStory = decorator(story, context);
if (typeof decoratedStory === 'string') {
decoratedStory = { template: decoratedStory };
}
decoratedStory.components = decoratedStory.components || {};
decoratedStory.components.story = createWrapperComponent(story());
return decoratedStory;

10
dependencies.yml
View File

@ -11,16 +11,6 @@ collectors:
# - type: repo-issue
# versions: "Y.0.0"
# Temporarily disabled
# - type: js-npm
# path: examples/react-native-vanilla
# actors:
# # pull requests for updates to our major version
# - type: js-npm
# versions: "L.Y.Y"
# # create issues for new major versions
# - type: repo-issue
# versions: "Y.0.0"
- type: js-lerna
path: /

6
docs/src/pages/addons/writing-addons/index.md
View File

@ -69,6 +69,12 @@ Then it will appear in the Notes panel like this:
![With notes](../static/stories-with-notes.png)
> To avoid having addons show up at the same time as each other, each addon should be aware of the active prop sent by Storybook and only render addon when active is true.
```js
render: ({ active }) => <Notes channel={channel} api={api} active={active} />,
```
## Setup
First, create an `addons.js` inside the Storybook config directory and add the following content to it.

6
docs/src/pages/basics/guide-angular/index.md
View File

@ -32,12 +32,12 @@ ng new your-angular-prj
cd your-angular-prj
```
## Add @storybook/angular and babel-core
## Add @storybook/angular and @babel/core
Next, install `@storybook/angular` and `babel-core` (it's a peerDependency) to your project:
Next, install `@storybook/angular`, `@babel/core`, and `babel-loader` (it's a peerDependency) to your project:
```sh
npm i --save-dev @storybook/angular babel-core
npm i --save-dev @storybook/angular @babel/core babel-loader
```
Then add the following NPM script to your package json in order to start the storybook later in this guide:

157
docs/src/pages/basics/guide-ember/index.md Normal file
View File

@ -0,0 +1,157 @@
---
id: 'guide-ember'
title: 'Storybook for Ember'
---
You may have tried to use our quick start guide to setup your project for Storybook. If you want to set up Storybook manually, this is the guide for you.
> This will also help you to understand how Storybook works.
## Starter Guide Ember
Storybook has its own Webpack setup and a dev server.
In this guide, we will set up Storybook for your Ember project.
## Table of contents
- [Add @storybook/ember](#add-storybookember)
- [Setup environment](#setup-environment)
- [Create the config file](#create-the-config-file)
- [Write your stories](#write-your-stories)
- [Run your Storybook](#run-your-storybook)
## Add @storybook/ember
First of all, you need to add `@storybook/ember` to your project. To do that, simply run:
```sh
npm i --save-dev @storybook/ember
```
If you don't have `package.json` in your project, you'll need to init it first:
```sh
npm init
```
Then add the following NPM script to your package json in order to start the storybook later in this guide:
> In order for your storybook to run properly be sure to be either run `ember serve` or `ember build` before running any storybook commands.
```json
{
"scripts": {
"storybook": "start-storybook -p 9001 -c .storybook"
}
}
```
## Setup environment
### Adding preview-head.html
In order for storybook to register your ember application you must add the following file to `.storybook/preview-head.html`
> These scripts may not contain everything you need, a good point of reference is to look at what is in the head tag in your applications `dist/index.html` file when you build.
```
<meta name="{ember-app-name}/config/environment" content="%7B%22modulePrefix%22%3A%22{ember-app-name}%22%2C%22environment%22%3A%22test%22%2C%22rootURL%22%3A%22/%22%2C%22locationType%22%3A%22auto%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22{ember-app-name}%22%2C%22version%22%3A%224.0.0-alpha.23+4f61a2fb%22%7D%7D" />
<link integrity="" rel="stylesheet" href="./assets/vendor.css">
<link integrity="" rel="stylesheet" href="./assets/{ember-app-name}.css">
<script src="./assets/vendor.js"></script>
<script>
runningTests = true;
</script>
<script src="./assets/{ember-app-name}.js"></script>
```
> Adding the runningTests script is extremely important don't forget to add this as it will result in your application binding multiple times.
Substitute `ember-app-name` with the name of your ember application.
> This is found by going to `package.json` and referencing the name field
### Adding .env
A file named `.env` is needed in the root directory with the following contents:
```
STORYBOOK_NAME={ember-app-name}
```
## Create the config file
Storybook can be configured in several different ways.
That’s why we need a config directory. We've added a `-c` option to the above NPM script mentioning `.storybook` as the config directory.
For the basic Storybook configuration file, you don't need to do much, but simply tell Storybook where to find stories.
To do that, simply create a file at `.storybook/config.js` with the following content:
```js
import { configure } from '@storybook/ember';
function loadStories() {
require('../stories/index.js');
// You can require as many stories as you need.
}
configure(loadStories, module);
```
That'll load stories in `../stories/index.js`.
## Write your stories
Now you can write some stories inside the `../stories/index.js` file, like this:
> It is import that you import the `hbs` function that is provided by a babel plugin in `@storybook/ember`
```js
import hbs from 'htmlbars-inline-precompile';
import { storiesOf } from '@storybook/ember';
storiesOf('Demo', module)
.add('heading', () => hbs`<h1>Hello World</h1>`)
.add('button', () => {
return {
template: hbs`<button {{action onClick}}>
Hello Button
</button>`
},
context: {
onClick: (e) => console.log(e)
}
})
.add('component', () => {
return {
template: hbs`{{foo-bar
click=onClick
}}`
},
context: {
onClick: (e) => console.log(e)
}
});
```
A story is either:
1. A single handlebars fragment generated using the `hbs` function
2. An object that contains template and context that will be bound to the resulting element
> In order to get your storybook to get new changes made to the `foo-bar` or any other components that are defined in your Ember app you must run `ember serve` as a sidecar for the build files to get generated.
## Run your Storybook
Now everything is ready. Simply run your storybook with:
```sh
npm run storybook
```
Now you can change components and write stories whenever you need to.

1
docs/src/pages/basics/live-examples/index.md
View File

@ -15,6 +15,7 @@ title: 'Live Examples'
- [HTML](https://storybooks-html.netlify.com/)
- [Svelte](https://storybooks-svelte.netlify.com/)
- [Riot](https://storybooks-riot.netlify.com/)
- [Ember](https://storybooks-ember.netlify.com/)
### 3.4
- [React Official](https://release-3-4--storybooks-official.netlify.com)

1
docs/src/pages/basics/quick-start-guide/index.md
View File

@ -37,5 +37,6 @@ To learn more about what `getstorybook` command does, have a look at the slow st
* [Marko](/basics/guide-marko/)
* [HTML](/basics/guide-html/)
* [Svelte](/basics/guide-svelte/)
* [Ember](/basics/guide-ember/)
A tutorial is also available at [Learn Storybook](https://www.learnstorybook.com) for a step-by-step guide (only available for React).

6
docs/src/pages/testing/automated-visual-testing/index.md
View File

@ -61,18 +61,18 @@ Here's a sample Storybook we'd like to visually test:
The Storybook UI has a bunch of elements you wouldn't want to include in your visual test. Besides being extraneous, your tests could incorrectly fail when you add a new, unrelated story or state because it would show up in the side menu.
Instead, we'll want to render a component's story by itself. Let's assume the above Storybook runs on port 9009 and we can access it via http://localhost:9009/.
Instead, we'll want to render a component's story by itself. Let's assume the above Storybook runs on port 9009 and we can access it via [http://localhost:9009/](http://localhost:9009/).
Now let's pick a single story: the "with text" story of the Button.
The URL for that story contains a number of query parameters, but the first two are the most important: http://localhost:9009/?selectedKind=Button&selectedStory=with+text
The URL for that story contains a number of query parameters, but the first two are the most important: [http://localhost:9009/?selectedKind=Button&selectedStory=with+text](http://localhost:9009/?selectedKind=Button&selectedStory=with+text)
- selectedKind=Button
- selectedStory=with+text
Using these two parameters we can generate the URL to render the story by itself. Instead of the URL's path being the homepage/index we use `/iframe.html`:
http://localhost:9009/iframe.html?selectedKind=Button&selectedStory=with+text
[http://localhost:9009/iframe.html?selectedKind=Button&selectedStory=with+text](http://localhost:9009/iframe.html?selectedKind=Button&selectedStory=with+text)
![Storybook iframe Screenshot](../static/storybook-iframe-screenshot.png)

1857
docs/yarn.lock
View File

File diff suppressed because it is too large Load Diff

26
examples/angular-cli/package.json
View File

@ -1,6 +1,6 @@
{
"name": "angular-cli",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"private": true,
"license": "MIT",
"scripts": {
@ -54,18 +54,18 @@
"@angular-devkit/build-angular": "^0.7.5",
"@angular/cli": "^6.1.5",
"@angular/compiler-cli": "^6.1.4",
"@storybook/addon-actions": "4.0.0-alpha.22",
"@storybook/addon-backgrounds": "4.0.0-alpha.22",
"@storybook/addon-centered": "4.0.0-alpha.22",
"@storybook/addon-jest": "4.0.0-alpha.22",
"@storybook/addon-knobs": "4.0.0-alpha.22",
"@storybook/addon-links": "4.0.0-alpha.22",
"@storybook/addon-notes": "4.0.0-alpha.22",
"@storybook/addon-options": "4.0.0-alpha.22",
"@storybook/addon-storyshots": "4.0.0-alpha.22",
"@storybook/addon-storysource": "4.0.0-alpha.22",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/angular": "4.0.0-alpha.22",
"@storybook/addon-actions": "4.0.0-alpha.24",
"@storybook/addon-backgrounds": "4.0.0-alpha.24",
"@storybook/addon-centered": "4.0.0-alpha.24",
"@storybook/addon-jest": "4.0.0-alpha.24",
"@storybook/addon-knobs": "4.0.0-alpha.24",
"@storybook/addon-links": "4.0.0-alpha.24",
"@storybook/addon-notes": "4.0.0-alpha.24",
"@storybook/addon-options": "4.0.0-alpha.24",
"@storybook/addon-storyshots": "4.0.0-alpha.24",
"@storybook/addon-storysource": "4.0.0-alpha.24",
"@storybook/addons": "4.0.0-alpha.24",
"@storybook/angular": "4.0.0-alpha.24",
"@types/jest": "^23.3.1",
"@types/node": "~10.9.2",
"@types/storybook__addon-options": "^3.2.2",

35
examples/cra-kitchen-sink/package.json
View File

@ -1,6 +1,6 @@
{
"name": "cra-kitchen-sink",
"version": "4.0.0-alpha.22",
"version": "4.0.0-alpha.24",
"private": true,
"scripts": {
"build": "react-scripts build",
@ -18,26 +18,25 @@
"react-lifecycles-compat": "^3.0.4"
},
"devDependencies": {
"@storybook/addon-a11y": "4.0.0-alpha.22",
"@storybook/addon-actions": "4.0.0-alpha.22",
"@storybook/addon-backgrounds": "4.0.0-alpha.22",
"@storybook/addon-centered": "4.0.0-alpha.22",
"@storybook/addon-events": "4.0.0-alpha.22",
"@storybook/addon-info": "4.0.0-alpha.22",
"@storybook/addon-jest": "4.0.0-alpha.22",
"@storybook/addon-knobs": "4.0.0-alpha.22",
"@storybook/addon-links": "4.0.0-alpha.22",
"@storybook/addon-notes": "4.0.0-alpha.22",
"@storybook/addon-options": "4.0.0-alpha.22",
"@storybook/addon-storyshots": "4.0.0-alpha.22",
"@storybook/addons": "4.0.0-alpha.22",
"@storybook/client-logger": "4.0.0-alpha.22",
"@storybook/react": "4.0.0-alpha.22",
"@storybook/addon-a11y": "4.0.0-alpha.24",
"@storybook/addon-actions": "4.0.0-alpha.24",
"@storybook/addon-backgrounds": "4.0.0-alpha.24",
"@storybook/addon-centered": "4.0.0-alpha.24",
"@storybook/addon-events": "4.0.0-alpha.24",
"@storybook/addon-info": "4.0.0-alpha.24",
"@storybook/addon-jest": "4.0.0-alpha.24",
"@storybook/addon-knobs": "4.0.0-alpha.24",
"@storybook/addon-links": "4.0.0-alpha.24",
"@storybook/addon-notes": "4.0.0-alpha.24",
"@storybook/addon-options": "4.0.0-alpha.24",
"@storybook/addon-storyshots": "4.0.0-alpha.24",
"@storybook/addons": "4.0.0-alpha.24",
"@storybook/client-logger": "4.0.0-alpha.24",
"@storybook/react": "4.0.0-alpha.24",
"enzyme": "^3.5.0",
"enzyme-adapter-react-16": "^1.3.0",
"enzyme-to-json": "^3.3.4",
"jest": "^23.4.2",
"react-scripts": "^1.1.5",
"webpack": "^4.17.1"
"react-scripts": "^1.1.5"
}
}

4
examples/cra-kitchen-sink/src/storyshots.test.js
View File

@ -3,7 +3,7 @@ import path from 'path';
import { render as renderer, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import serializer from 'enzyme-to-json';
import { createSerializer } from 'enzyme-to-json';
configure({ adapter: new Adapter() });
@ -13,6 +13,6 @@ initStoryshots({
integrityOptions: { cwd: path.join(__dirname, 'stories') },
test: multiSnapshotWithOptions({
renderer,
serializer,
}),
snapshotSerializers: [createSerializer()],
});

9
examples/ember-cli/.ember-cli Normal file
View File

@ -0,0 +1,9 @@
{
/**
Ember CLI sends analytics information by default. The data is completely
anonymous, but there are times when you might want to disable this behavior.
Setting `disableAnalytics` to true will prevent any data from being sent.
*/
"disableAnalytics": false
}

2
examples/ember-cli/.env Normal file
View File

@ -0,0 +1,2 @@
STORYBOOK_EXAMPLE_APP=true
STORYBOOK_NAME=ember-example

14
examples/ember-cli/.eslintrc.js Normal file
View File

@ -0,0 +1,14 @@
module.exports = {
rules: {
'import/extensions': 0,
},
settings: {
'import/core-modules': [
'@ember/component',
'@ember/routing/router',
'@ember/application',
'./config/environment',
'htmlbars-inline-precompile',
],
},
};

15
examples/ember-cli/.gitignore vendored Normal file
View File

@ -0,0 +1,15 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
node_modules
# testing
coverage
# production
build
# misc
.DS_Store
npm-debug.log
tmp

9
examples/ember-cli/.storybook/addons.js Normal file
View File

@ -0,0 +1,9 @@
import '@storybook/addon-a11y/register';
import '@storybook/addon-storysource/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-notes/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-viewport/register';
import '@storybook/addon-options/register';
import '@storybook/addon-backgrounds/register';

18
examples/ember-cli/.storybook/config.js Normal file
View File

@ -0,0 +1,18 @@
import { configure, addDecorator } from '@storybook/ember';
import { withOptions } from '@storybook/addon-options';
addDecorator(
withOptions({
hierarchySeparator: /\/|\./,
hierarchyRootSeparator: /\|/,
})
);
function loadStories() {
require('../stories/index.stories');
const req = require.context('../stories', true, /\.stories\.js$/);
req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);

10
examples/ember-cli/.storybook/preview-head.html Normal file
View File

@ -0,0 +1,10 @@
<meta name="ember-example/config/environment" content="%7B%22modulePrefix%22%3A%22ember-example%22%2C%22environment%22%3A%22test%22%2C%22rootURL%22%3A%22/%22%2C%22locationType%22%3A%22auto%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22ember-example%22%2C%22version%22%3A%224.0.0-alpha.23+4f61a2fb%22%7D%7D" />
<link integrity="" rel="stylesheet" href="./assets/vendor.css">
<link integrity="" rel="stylesheet" href="./assets/ember-example.css">
<script src="./assets/vendor.js"></script>
<script>
runningTests = true;
</script>
<script src="./assets/ember-example.js"></script>

12
examples/ember-cli/.storybook/webpack.config.js Normal file
View File

@ -0,0 +1,12 @@
const path = require('path');
module.exports = (storybookBaseConfig, configType, defaultConfig) => {
defaultConfig.module.rules.push({
test: [/\.stories\.js$/, /index\.js$/],
loaders: [require.resolve('@storybook/addon-storysource/loader')],
include: [path.resolve(__dirname, '../')],
enforce: 'pre',
});
return defaultConfig;
};

3
examples/ember-cli/README.md Normal file
View File

@ -0,0 +1,3 @@
# Storybook Demo
This is a demo app to test Ember integration with Storybook. Run `npm install` to sync Storybook module with the source code and run `npm run storybook` to start the Storybook.

Some files were not shown because too many files have changed in this diff Show More