mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 16:11:33 +08:00
Merge branch 'master' into addon-jest-improvement
This commit is contained in:
Pavan Kumar Sunkara
GitHub
commit
3eec69461c
@ -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:
|
||||
|
||||
1
.github/CODEOWNERS
vendored
1
.github/CODEOWNERS
vendored
@ -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
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -17,7 +17,7 @@ enum class StorybookApp(val appName: String, val exampleDir: String, val merged:
|
||||
SVELTE("Svelte", "svelte-kitchen-sink"),
|
||||
RIOT("Riot", "riot-kitchen-sink"),
|
||||
HYPERAPP("Hyperapp", "hyperapp-kitchen-sink", false),
|
||||
EMBER("Ember", "ember-cli", false);
|
||||
EMBER("Ember", "ember-cli");
|
||||
|
||||
val lowerName = appName.toLowerCase()
|
||||
|
||||
|
||||
@ -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) |+| |+|+|+|+|+|+|+|+|+|
|
||||
|
||||
17
CHANGELOG.md
17
CHANGELOG.md
@ -1,3 +1,20 @@
|
||||
# 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
|
||||
|
||||
@ -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`
|
||||
|
||||
37
MIGRATION.md
37
MIGRATION.md
@ -9,6 +9,7 @@
|
||||
- [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)
|
||||
@ -82,11 +83,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
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@ Storybook comes with a lot of [addons](https://storybook.js.org/addons/introduct
|
||||
- 🛠[Supported Frameworks & Examples](#supported-frameworks)
|
||||
- 🚇[Sub Projects](#sub-projects)
|
||||
- 🔗[Addons](#addons)
|
||||
- 🏅[Badges & Presentation materials](#badges)
|
||||
- 🏅[Badges & Presentation materials](#badges--presentation-materials)
|
||||
- 👥[Community](#community)
|
||||
- 👏[Contributing](#contributing)
|
||||
- 👨💻[Development scripts](#development-scripts)
|
||||
@ -91,6 +91,7 @@ For additional help, join us [in our Slack](https://now-examples-slackin-rrirkqo
|
||||
| [HTML](app/html) <sup>alpha</sup> | - | [v4.0.0-alpha](https://storybooks-html.netlify.com/) | [](app/html) |
|
||||
| [Svelte](app/svelte) <sup>alpha</sup> | - | [v4.0.0-alpha](https://storybooks-svelte.netlify.com/) | [](app/svelte) |
|
||||
| [Riot](app/riot) <sup>alpha</sup> | - | [v4.0.0-alpha](https://storybooks-riot.netlify.com/) | [](app/riot) |
|
||||
| [Ember](app/ember) | - | [v4.0.0-alpha](https://storybooks-ember.netlify.com/) | [](app/ember) |
|
||||
|
||||
### Sub Projects
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"version": "4.0.0-alpha.24",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -29,10 +29,10 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.0.0-alpha.23",
|
||||
"@storybook/client-logger": "4.0.0-alpha.23",
|
||||
"@storybook/components": "4.0.0-alpha.23",
|
||||
"@storybook/core-events": "4.0.0-alpha.23",
|
||||
"@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"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"version": "4.0.0-alpha.24",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -26,9 +26,9 @@
|
||||
"@emotion/core": "^0.13.1",
|
||||
"@emotion/provider": "^0.11.2",
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.0.0-alpha.23",
|
||||
"@storybook/components": "4.0.0-alpha.23",
|
||||
"@storybook/core-events": "4.0.0-alpha.23",
|
||||
"@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",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"version": "4.0.0-alpha.24",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,8 +28,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.0.0-alpha.23",
|
||||
"@storybook/core-events": "4.0.0-alpha.23",
|
||||
"@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
1
addons/centered/ember.js
Normal file
@ -0,0 +1 @@
|
||||
module.exports = require('./dist/ember');
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"version": "4.0.0-alpha.24",
|
||||
"description": "Storybook decorator to center components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
25
addons/centered/src/ember.js
Normal file
25
addons/centered/src/ember.js
Normal 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,
|
||||
};
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"version": "4.0.0-alpha.24",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -27,8 +27,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.0.0-alpha.23",
|
||||
"@storybook/core-events": "4.0.0-alpha.23",
|
||||
"@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",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"version": "4.0.0-alpha.24",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"version": "4.0.0-alpha.24",
|
||||
"description": "A Storybook addon to show additional information for your stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -25,9 +25,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.0.0-alpha.23",
|
||||
"@storybook/client-logger": "4.0.0-alpha.23",
|
||||
"@storybook/components": "4.0.0-alpha.23",
|
||||
"@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",
|
||||
|
||||
@ -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' {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"version": "4.0.0-alpha.24",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -31,8 +31,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.0.0-alpha.23",
|
||||
"@storybook/components": "4.0.0-alpha.23",
|
||||
"@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"
|
||||
|
||||
@ -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={channel} api={api} />,
|
||||
title: () => <PanelTitle channel={channel} api={api} />,
|
||||
// eslint-disable-next-line react/prop-types
|
||||
render: ({ active }) => <Panel channel={channel} api={api} active={active} />,
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"version": "4.0.0-alpha.24",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -25,9 +25,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.0.0-alpha.23",
|
||||
"@storybook/components": "4.0.0-alpha.23",
|
||||
"@storybook/core-events": "4.0.0-alpha.23",
|
||||
"@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",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"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.23",
|
||||
"@storybook/components": "4.0.0-alpha.23",
|
||||
"@storybook/core-events": "4.0.0-alpha.23",
|
||||
"@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"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-notes",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"version": "4.0.0-alpha.24",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -26,7 +26,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.0.0-alpha.23",
|
||||
"@storybook/addons": "4.0.0-alpha.24",
|
||||
"marked": "^0.5.0",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-options",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"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.23",
|
||||
"@storybook/addons": "4.0.0-alpha.24",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"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.23",
|
||||
"@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.23",
|
||||
"@storybook/addon-links": "4.0.0-alpha.23",
|
||||
"@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.23",
|
||||
"@storybook/react": "4.0.0-alpha.24",
|
||||
"enzyme-to-json": "^3.3.4",
|
||||
"react": "^16.4.2"
|
||||
}
|
||||
|
||||
@ -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,
|
||||
};
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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>
|
||||
`;
|
||||
@ -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()],
|
||||
});
|
||||
|
||||
@ -0,0 +1,8 @@
|
||||
import path from 'path';
|
||||
import initStoryshots, { snapshotWithOptions } from '../src';
|
||||
|
||||
initStoryshots({
|
||||
framework: 'react',
|
||||
configPath: path.join(__dirname, '..', '.storybook'),
|
||||
test: snapshotWithOptions(() => ({})),
|
||||
});
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"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.23",
|
||||
"@storybook/node-logger": "4.0.0-alpha.24",
|
||||
"jest-image-snapshot": "^2.5.0",
|
||||
"puppeteer": "^1.6.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"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.23",
|
||||
"@storybook/components": "4.0.0-alpha.23",
|
||||
"@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",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"version": "4.0.0-alpha.24",
|
||||
"description": "Storybook addon to change the viewport size to mobile",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,9 +24,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.0.0-alpha.23",
|
||||
"@storybook/components": "4.0.0-alpha.23",
|
||||
"@storybook/core-events": "4.0.0-alpha.23",
|
||||
"@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"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"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.23",
|
||||
"@storybook/node-logger": "4.0.0-alpha.23",
|
||||
"@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",
|
||||
|
||||
30
app/ember/README.md
Normal file
30
app/ember/README.md
Normal 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 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
4
app/ember/bin/build.js
Executable 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
3
app/ember/bin/index.js
Executable file
@ -0,0 +1,3 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
require('../dist/server');
|
||||
42
app/ember/package.json
Normal file
42
app/ember/package.json
Normal 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
9
app/ember/src/client/index.js
Normal 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
4
app/ember/src/client/preview/globals.js
Normal 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
18
app/ember/src/client/preview/index.js
Normal 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
71
app/ember/src/client/preview/render.js
Normal 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
4
app/ember/src/server/build.js
Normal 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
15
app/ember/src/server/framework-preset-babel-ember.js
Normal 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
5
app/ember/src/server/index.js
Normal 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
7
app/ember/src/server/options.js
Normal file
@ -0,0 +1,7 @@
|
||||
import packageJson from '../../package.json';
|
||||
|
||||
export default {
|
||||
packageJson,
|
||||
defaultConfigName: 'ember-cli',
|
||||
frameworkPresets: [require.resolve('./framework-preset-babel-ember.js')],
|
||||
};
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"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.23",
|
||||
"@storybook/core": "4.0.0-alpha.24",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"html-loader": "^0.5.5",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/marko",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"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.23",
|
||||
"@storybook/core": "4.0.0-alpha.24",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"marko-loader": "^1.3.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/mithril",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"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.23",
|
||||
"@storybook/core": "4.0.0-alpha.24",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.4.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/polymer",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"version": "4.0.0-alpha.24",
|
||||
"description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -29,7 +29,7 @@
|
||||
"dependencies": {
|
||||
"@babel/polyfill": "^7.0.0",
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"@storybook/core": "4.0.0-alpha.23",
|
||||
"@storybook/core": "4.0.0-alpha.24",
|
||||
"@webcomponents/webcomponentsjs": "^1.2.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-native",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"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.23",
|
||||
"@storybook/channel-websocket": "4.0.0-alpha.23",
|
||||
"@storybook/core": "4.0.0-alpha.23",
|
||||
"@storybook/core-events": "4.0.0-alpha.23",
|
||||
"@storybook/ui": "4.0.0-alpha.23",
|
||||
"@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",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"version": "4.0.0-alpha.24",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -32,7 +32,7 @@
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/core": "4.0.0-alpha.23",
|
||||
"@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",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/riot",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"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.23",
|
||||
"@storybook/core": "4.0.0-alpha.24",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"moment": "^2.22.2",
|
||||
|
||||
@ -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>"`;
|
||||
|
||||
@ -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
23
app/riot/src/client/preview/compileStageFunctions.js
Normal 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());
|
||||
}
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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
24
app/riot/src/client/preview/rendering/index.js
Normal 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
14
app/riot/src/client/preview/rendering/raw.js
Normal 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], {});
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"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.23",
|
||||
"@storybook/core": "4.0.0-alpha.24",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.4.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"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.23",
|
||||
"@storybook/core": "4.0.0-alpha.24",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.4.2",
|
||||
|
||||
@ -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: /
|
||||
|
||||
@ -69,6 +69,12 @@ Then it will appear in the Notes panel like this:
|
||||
|
||||
|
||||
|
||||
> 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.
|
||||
|
||||
157
docs/src/pages/basics/guide-ember/index.md
Normal file
157
docs/src/pages/basics/guide-ember/index.md
Normal 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.
|
||||
@ -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)
|
||||
|
||||
@ -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).
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "angular-cli",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"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.23",
|
||||
"@storybook/addon-backgrounds": "4.0.0-alpha.23",
|
||||
"@storybook/addon-centered": "4.0.0-alpha.23",
|
||||
"@storybook/addon-jest": "4.0.0-alpha.23",
|
||||
"@storybook/addon-knobs": "4.0.0-alpha.23",
|
||||
"@storybook/addon-links": "4.0.0-alpha.23",
|
||||
"@storybook/addon-notes": "4.0.0-alpha.23",
|
||||
"@storybook/addon-options": "4.0.0-alpha.23",
|
||||
"@storybook/addon-storyshots": "4.0.0-alpha.23",
|
||||
"@storybook/addon-storysource": "4.0.0-alpha.23",
|
||||
"@storybook/addons": "4.0.0-alpha.23",
|
||||
"@storybook/angular": "4.0.0-alpha.23",
|
||||
"@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",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cra-kitchen-sink",
|
||||
"version": "4.0.0-alpha.23",
|
||||
"version": "4.0.0-alpha.24",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "react-scripts build",
|
||||
@ -18,21 +18,21 @@
|
||||
"react-lifecycles-compat": "^3.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "4.0.0-alpha.23",
|
||||
"@storybook/addon-actions": "4.0.0-alpha.23",
|
||||
"@storybook/addon-backgrounds": "4.0.0-alpha.23",
|
||||
"@storybook/addon-centered": "4.0.0-alpha.23",
|
||||
"@storybook/addon-events": "4.0.0-alpha.23",
|
||||
"@storybook/addon-info": "4.0.0-alpha.23",
|
||||
"@storybook/addon-jest": "4.0.0-alpha.23",
|
||||
"@storybook/addon-knobs": "4.0.0-alpha.23",
|
||||
"@storybook/addon-links": "4.0.0-alpha.23",
|
||||
"@storybook/addon-notes": "4.0.0-alpha.23",
|
||||
"@storybook/addon-options": "4.0.0-alpha.23",
|
||||
"@storybook/addon-storyshots": "4.0.0-alpha.23",
|
||||
"@storybook/addons": "4.0.0-alpha.23",
|
||||
"@storybook/client-logger": "4.0.0-alpha.23",
|
||||
"@storybook/react": "4.0.0-alpha.23",
|
||||
"@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",
|
||||
|
||||
@ -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
9
examples/ember-cli/.ember-cli
Normal 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
2
examples/ember-cli/.env
Normal file
@ -0,0 +1,2 @@
|
||||
STORYBOOK_EXAMPLE_APP=true
|
||||
STORYBOOK_NAME=ember-example
|
||||
14
examples/ember-cli/.eslintrc.js
Normal file
14
examples/ember-cli/.eslintrc.js
Normal 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
15
examples/ember-cli/.gitignore
vendored
Normal 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
9
examples/ember-cli/.storybook/addons.js
Normal 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
18
examples/ember-cli/.storybook/config.js
Normal 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
10
examples/ember-cli/.storybook/preview-head.html
Normal 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
12
examples/ember-cli/.storybook/webpack.config.js
Normal 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
3
examples/ember-cli/README.md
Normal 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.
|
||||
14
examples/ember-cli/app/app.js
Normal file
14
examples/ember-cli/app/app.js
Normal file
@ -0,0 +1,14 @@
|
||||
import Application from '@ember/application';
|
||||
import loadInitializers from 'ember-load-initializers';
|
||||
import Resolver from './resolver';
|
||||
import config from './config/environment';
|
||||
|
||||
const App = Application.extend({
|
||||
modulePrefix: config.modulePrefix,
|
||||
podModulePrefix: config.podModulePrefix,
|
||||
Resolver,
|
||||
});
|
||||
|
||||
loadInitializers(App, config.modulePrefix);
|
||||
|
||||
export default App;
|
||||
3
examples/ember-cli/app/components/welcome-banner.js
Normal file
3
examples/ember-cli/app/components/welcome-banner.js
Normal file
@ -0,0 +1,3 @@
|
||||
import Component from '@ember/component';
|
||||
|
||||
export default Component.extend({});
|
||||
3
examples/ember-cli/app/components/welcome-page.js
Normal file
3
examples/ember-cli/app/components/welcome-page.js
Normal file
@ -0,0 +1,3 @@
|
||||
import Component from '@ember/component';
|
||||
|
||||
export default Component.extend({});
|
||||
25
examples/ember-cli/app/index.html
Normal file
25
examples/ember-cli/app/index.html
Normal file
@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>ember-example</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
{{content-for "head"}}
|
||||
|
||||
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
|
||||
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/ember-example.css">
|
||||
|
||||
{{content-for "head-footer"}}
|
||||
</head>
|
||||
<body>
|
||||
{{content-for "body"}}
|
||||
|
||||
<script src="{{rootURL}}assets/vendor.js"></script>
|
||||
<script src="{{rootURL}}assets/ember-example.js"></script>
|
||||
|
||||
{{content-for "body-footer"}}
|
||||
</body>
|
||||
</html>
|
||||
0
examples/ember-cli/app/initializers/.gitkeep
Normal file
0
examples/ember-cli/app/initializers/.gitkeep
Normal file
1
examples/ember-cli/app/resolver.js
Normal file
1
examples/ember-cli/app/resolver.js
Normal file
@ -0,0 +1 @@
|
||||
export { default } from 'ember-resolver';
|
||||
12
examples/ember-cli/app/router.js
Normal file
12
examples/ember-cli/app/router.js
Normal file
@ -0,0 +1,12 @@
|
||||
// eslint-disable import/extensions
|
||||
import EmberRouter from '@ember/routing/router';
|
||||
import config from './config/environment';
|
||||
|
||||
const Router = EmberRouter.extend({
|
||||
location: config.locationType,
|
||||
rootURL: config.rootURL,
|
||||
});
|
||||
|
||||
Router.map(() => ({}));
|
||||
|
||||
export default Router;
|
||||
73
examples/ember-cli/app/styles/app.css
Normal file
73
examples/ember-cli/app/styles/app.css
Normal file
@ -0,0 +1,73 @@
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
|
||||
.text-align-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin: 15px;
|
||||
max-width: 600;
|
||||
line-height: 1.4;
|
||||
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #1474f3;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #1474f3;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.code {
|
||||
font-size: 15;
|
||||
font-weight: 600;
|
||||
padding: 2px 5px;
|
||||
border: 1px solid #eae9e9;
|
||||
border-radius: 4px;
|
||||
background-color: #f3f2f2;
|
||||
color: #3a3a3a;
|
||||
}
|
||||
|
||||
.codeBlock {
|
||||
background-color: #f3f2f2;
|
||||
padding: 1px 10px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.note {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.banner {
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
3
examples/ember-cli/app/templates/application.hbs
Normal file
3
examples/ember-cli/app/templates/application.hbs
Normal file
@ -0,0 +1,3 @@
|
||||
{{welcome-page}}
|
||||
|
||||
{{outlet}}
|
||||
@ -0,0 +1,6 @@
|
||||
<div class="banner" style="background-color:{{backgroundColor}}">
|
||||
<h1 class="banner-header" style="color:{{titleColor}};">{{title}}</h1>
|
||||
<p class="banner-subtitle" style="color:{{subTitleColor}}">
|
||||
{{subtitle}}
|
||||
</p>
|
||||
</div>
|
||||
50
examples/ember-cli/app/templates/components/welcome-page.hbs
Normal file
50
examples/ember-cli/app/templates/components/welcome-page.hbs
Normal file
@ -0,0 +1,50 @@
|
||||
<div class="main">
|
||||
<p class="text-align-center">
|
||||
<img class="logo" src="./logo.png" />
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<code class="code">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
|
||||
<a class="link">stories</a>
|
||||
for a component called
|
||||
<code class="code">welcome-banner</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 class="code">welcome-banner</code> component
|
||||
located at <code class="code">app/components/welcome-banner.js</code>.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.<br />
|
||||
Have a look at the
|
||||
<a
|
||||
class="link"
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<p class="note">
|
||||
<b>NOTE:</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<code class="code">.storybook/webpack.config.js</code>
|
||||
to add webpack
|
||||
loaders and plugins you are using in this project.
|
||||
</p>
|
||||
</div>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user