mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-02 05:03:44 +08:00
Merge branch 'next' into pr/nlko/4595
This commit is contained in:
Norbert de Langen
commit
04836afe8d
@ -120,52 +120,52 @@ jobs:
|
||||
name: Run react kitchen-sink (smoke test)
|
||||
command: |
|
||||
cd examples/cra-kitchen-sink
|
||||
yarn storybook --smoke-test
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run vue kitchen-sink (smoke test)
|
||||
command: |
|
||||
cd examples/vue-kitchen-sink
|
||||
yarn storybook --smoke-test
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run svelte kitchen-sink (smoke test)
|
||||
command: |
|
||||
cd examples/svelte-kitchen-sink
|
||||
yarn storybook --smoke-test
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run angular-cli (smoke test)
|
||||
command: |
|
||||
cd examples/angular-cli
|
||||
yarn storybook --smoke-test
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run ember-cli (smoke test)
|
||||
command: |
|
||||
cd examples/ember-cli
|
||||
yarn storybook --smoke-test
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run polymer-cli (smoke test)
|
||||
command: |
|
||||
cd examples/polymer-cli
|
||||
yarn storybook --smoke-test
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run marko-cli (smoke test)
|
||||
command: |
|
||||
cd examples/marko-cli
|
||||
yarn storybook --smoke-test
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run official-storybook (smoke test)
|
||||
command: |
|
||||
cd examples/official-storybook
|
||||
yarn storybook --smoke-test
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run mithril kitchen-sink (smoke test)
|
||||
command: |
|
||||
cd examples/mithril-kitchen-sink
|
||||
yarn storybook --smoke-test
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run riot kitchen-sink (smoke test)
|
||||
command: |
|
||||
cd examples/riot-kitchen-sink
|
||||
yarn storybook --smoke-test
|
||||
yarn storybook --smoke-test --quiet
|
||||
native-smoke-tests:
|
||||
<<: *defaults
|
||||
steps:
|
||||
|
||||
14
.github/PULL_REQUEST_TEMPLATE.md
vendored
14
.github/PULL_REQUEST_TEMPLATE.md
vendored
@ -4,11 +4,17 @@ Issue:
|
||||
|
||||
## How to test
|
||||
|
||||
Is this testable with Jest or Chromatic screenshots?
|
||||
Does this need a new example in the kitchen sink apps?
|
||||
Does this need an update to the documentation?
|
||||
- Is this testable with Jest or Chromatic screenshots?
|
||||
- Does this need a new example in the kitchen sink apps?
|
||||
- Does this need an update to the documentation?
|
||||
|
||||
If your answer is yes to any of these, please make sure to include it in your PR.
|
||||
|
||||
For maintainers only: Please tag your pull request with at least one of the following:
|
||||
<!--
|
||||
|
||||
Everybody: Please submit all PRs to the `next` branch unless they are specific to current release. Storybook maintainers cherry-pick bug and documentation fixes into the `master` branch as part of the release process, so you shouldn't need to worry about this.
|
||||
|
||||
Maintainers: Please tag your pull request with at least one of the following:
|
||||
`["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]`
|
||||
|
||||
-->
|
||||
|
||||
7
.prettierrc
Normal file
7
.prettierrc
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"printWidth": 100,
|
||||
"tabWidth": 2,
|
||||
"bracketSpacing": true,
|
||||
"trailingComma": "es5",
|
||||
"singleQuote": true
|
||||
}
|
||||
@ -195,6 +195,6 @@ object Project : Project({
|
||||
}
|
||||
|
||||
params {
|
||||
param("docker.node.version", "latest")
|
||||
param("docker.node.version", "dubnium")
|
||||
}
|
||||
})
|
||||
|
||||
@ -46,6 +46,7 @@ object OpenSourceProjects_Storybook_Bootstrap : BuildType({
|
||||
+:pull/*
|
||||
+:release/*
|
||||
+:master
|
||||
+:next
|
||||
+:snyk-fix-*
|
||||
""".trimIndent()
|
||||
enabled = false
|
||||
|
||||
@ -33,6 +33,7 @@ object OpenSourceProjects_Storybook_Build_2 : BuildType({
|
||||
+:pull/*
|
||||
+:release/*
|
||||
+:master
|
||||
+:next
|
||||
+:snyk-fix-*
|
||||
""".trimIndent()
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@ object OpenSourceProjects_Storybook_CliTest : BuildType({
|
||||
set -e -x
|
||||
|
||||
yarn
|
||||
yarn test --cli
|
||||
yarn test --cli --teamcity
|
||||
""".trimIndent()
|
||||
dockerImage = "node:%docker.node.version%"
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@ object OpenSourceProjects_Storybook_CliTestLatestCra : BuildType({
|
||||
set -e -x
|
||||
|
||||
yarn
|
||||
yarn test-latest-cra
|
||||
yarn test-latest-cra -t
|
||||
""".trimIndent()
|
||||
dockerImage = "node:%docker.node.version%"
|
||||
}
|
||||
@ -40,6 +40,7 @@ object OpenSourceProjects_Storybook_CliTestLatestCra : BuildType({
|
||||
+:pull/*
|
||||
+:release/*
|
||||
+:master
|
||||
+:next
|
||||
""".trimIndent()
|
||||
}
|
||||
retryBuild {}
|
||||
|
||||
@ -13,8 +13,8 @@ object OpenSourceProjects_Storybook_Danger : BuildType({
|
||||
name = "Danger"
|
||||
|
||||
params {
|
||||
password("env.DANGER_GITHUB_API_TOKEN", "credentialsJSON:7f0943ab-dfca-49dd-b926-03062007bfd0")
|
||||
param("env.PULL_REQUEST_URL", "https://github.com/storybooks/storybook/pull/%teamcity.build.branch%")
|
||||
password("env.DANGER_GITHUB_API_TOKEN", "credentialsJSON:9ac87388-d267-4def-a10e-3e596369f644")
|
||||
param("env.PULL_REQUEST_URL", "https://github.com/storybooks/storybook/%teamcity.build.branch%")
|
||||
}
|
||||
|
||||
vcs {
|
||||
|
||||
@ -12,7 +12,7 @@ object OpenSourceProjects_Storybook_Docs : BuildType({
|
||||
artifactRules = "docs/public => docs.zip"
|
||||
|
||||
params {
|
||||
param("Deploy branch", "release/3.4")
|
||||
param("Deploy branch", "master")
|
||||
}
|
||||
|
||||
vcs {
|
||||
|
||||
@ -42,6 +42,7 @@ object OpenSourceProjects_Storybook_Lint_Warnings : BuildType({
|
||||
+:pull/*
|
||||
+:release/*
|
||||
+:master
|
||||
+:next
|
||||
""".trimIndent()
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,7 +30,7 @@ object OpenSourceProjects_Storybook_SmokeTests : BuildType({
|
||||
set -e -x
|
||||
|
||||
cd examples/$exampleDir
|
||||
yarn storybook --smoke-test
|
||||
yarn storybook --smoke-test --quiet
|
||||
""".trimIndent()
|
||||
dockerImage = "node:%docker.node.version%"
|
||||
}
|
||||
@ -44,7 +44,7 @@ object OpenSourceProjects_Storybook_SmokeTests : BuildType({
|
||||
set -e -x
|
||||
|
||||
cd examples/official-storybook
|
||||
yarn storybook --smoke-test
|
||||
yarn storybook --smoke-test --quiet
|
||||
""".trimIndent()
|
||||
dockerImage = "node:%docker.node.version%"
|
||||
}
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
package OpenSourceProjects_Storybook.patches.buildTypes
|
||||
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.*
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
|
||||
|
||||
/*
|
||||
This patch script was generated by TeamCity on settings change in UI.
|
||||
To apply the patch, change the buildType with uuid = '759f0116-2f7d-4c03-8220-56e4ab03be3a' (id = 'OpenSourceProjects_Storybook_Danger')
|
||||
accordingly, and delete the patch script.
|
||||
*/
|
||||
changeBuildType("759f0116-2f7d-4c03-8220-56e4ab03be3a") {
|
||||
params {
|
||||
expect {
|
||||
password("env.DANGER_GITHUB_API_TOKEN", "credentialsJSON:7f0943ab-dfca-49dd-b926-03062007bfd0")
|
||||
}
|
||||
update {
|
||||
password("env.DANGER_GITHUB_API_TOKEN", "credentialsJSON:9ac87388-d267-4def-a10e-3e596369f644")
|
||||
}
|
||||
expect {
|
||||
param("env.PULL_REQUEST_URL", "https://github.com/storybooks/storybook/pull/%teamcity.build.branch%")
|
||||
}
|
||||
update {
|
||||
param("env.PULL_REQUEST_URL", "https://github.com/storybooks/storybook/%teamcity.build.branch%")
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
package OpenSourceProjects_Storybook.patches.buildTypes
|
||||
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.*
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.ui.*
|
||||
|
||||
/*
|
||||
This patch script was generated by TeamCity on settings change in UI.
|
||||
To apply the patch, change the buildType with uuid = 'b1db1a3a-a4cf-46ea-8f55-98b86611f92e' (id = 'OpenSourceProjects_Storybook_CliTest')
|
||||
accordingly, and delete the patch script.
|
||||
*/
|
||||
changeBuildType("b1db1a3a-a4cf-46ea-8f55-98b86611f92e") {
|
||||
params {
|
||||
add {
|
||||
param("docker.node.version", "latest")
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -6,8 +6,9 @@ import jetbrains.buildServer.configs.kotlin.v2017_2.vcs.GitVcsRoot
|
||||
object OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster : GitVcsRoot({
|
||||
uuid = "cec03c4b-d52c-42a0-8e9e-53bde85d6b33"
|
||||
id = "OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster"
|
||||
name = "https://github.com/storybooks/storybook#refs/heads/master"
|
||||
name = "Main root"
|
||||
url = "git@github.com:storybooks/storybook.git"
|
||||
branch = "refs/heads/next"
|
||||
branchSpec = """
|
||||
+:refs/(pull/*)/head
|
||||
+:refs/heads/*
|
||||
|
||||
@ -8,6 +8,7 @@ object OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMa
|
||||
id = "OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster1"
|
||||
name = "https://github.com/storybooks/storybook#refs/heads/master (1)"
|
||||
url = "git@github.com:storybooks/storybook.git"
|
||||
branch = "refs/heads/next"
|
||||
authMethod = uploadedKey {
|
||||
userName = "git"
|
||||
uploadedKey = "Storybook bot"
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
package OpenSourceProjects_Storybook.vcsRoots
|
||||
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.*
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.vcs.GitVcsRoot
|
||||
|
||||
object OpenSourceProjects_Storybook_SBNext : GitVcsRoot({
|
||||
uuid = "f0bd8d49-0f6a-4859-9d26-d066af4b5d6d"
|
||||
id = "OpenSourceProjects_Storybook_SBNext"
|
||||
name = "SBNext"
|
||||
url = "git@github.com:storybooks/SBNext.git"
|
||||
branch = "refs/heads/POC-bundler"
|
||||
authMethod = uploadedKey {
|
||||
userName = "git"
|
||||
uploadedKey = "Storybook bot"
|
||||
}
|
||||
})
|
||||
119
CHANGELOG.md
119
CHANGELOG.md
@ -1,7 +1,121 @@
|
||||
# 4.1.0-alpha.1
|
||||
|
||||
2018-November-06
|
||||
|
||||
#### Features
|
||||
|
||||
- Core: add cursor images to webpack loader [#4498](https://github.com/storybooks/storybook/pull/4498)
|
||||
- Storyshots-puppeteer: Allow specifying an existing browser [#4721](https://github.com/storybooks/storybook/pull/4721)
|
||||
- React-native: close StoryListView after tap again in the current story [#4714](https://github.com/storybooks/storybook/pull/4714)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
- Bump @angular/compiler from 7.0.1 to 7.0.2 [#4677](https://github.com/storybooks/storybook/pull/4677)
|
||||
- Bump @types/jest from 23.3.8 to 23.3.9 [#4658](https://github.com/storybooks/storybook/pull/4658)
|
||||
- Bump copy-webpack-plugin from 4.5.4 to 4.6.0 [#4674](https://github.com/storybooks/storybook/pull/4674)
|
||||
- Bump @ngrx/store from 6.1.1 to 6.1.2 [#4678](https://github.com/storybooks/storybook/pull/4678)
|
||||
- [Security] Bump merge from 1.2.0 to 1.2.1 [#4686](https://github.com/storybooks/storybook/pull/4686)
|
||||
|
||||
# 4.1.0-alpha.0
|
||||
|
||||
Publish failed
|
||||
|
||||
# 4.0.4
|
||||
|
||||
2018-November-06
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Core: Change extensions ordering in webpack config [#4708](https://github.com/storybooks/storybook/pull/4708)
|
||||
- Addon-Knobs: Fix PropTypes in NumberType [#4669](https://github.com/storybooks/storybook/pull/4669)
|
||||
- Addon-Viewport: Fix "defaultViewport" configuration [#4683](https://github.com/storybooks/storybook/pull/4683)
|
||||
- Addon-Jest: Fix test matching [#4689](https://github.com/storybooks/storybook/pull/4689)
|
||||
- Fix tests in node 11 by using `Array#sort` correctly [#4720](https://github.com/storybooks/storybook/pull/4720)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
- Bump react-syntax-highlighter from 9.0.1 to 10.0.0 [#4654](https://github.com/storybooks/storybook/pull/4654)
|
||||
- Remove SB deps from cli tests [#4705](https://github.com/storybooks/storybook/pull/4705)
|
||||
|
||||
# 4.0.3
|
||||
|
||||
2018-November-06
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- React: Fix css relative asset urls [#4695](https://github.com/storybooks/storybook/pull/4695)
|
||||
- Core: Fix a bug with buildStaticStandalone resolving too early [#4649](https://github.com/storybooks/storybook/pull/4649)
|
||||
- Angular: Fixes component imports from dist [#4682](https://github.com/storybooks/storybook/pull/4682)
|
||||
- Addon-info: Improve accessibility with contrast [#4698](https://github.com/storybooks/storybook/pull/4698)
|
||||
- Ember: update ergonomics to not require any manual setup [#4594](https://github.com/storybooks/storybook/pull/4594)
|
||||
- React-native: fix accessibility for component preview (iOS+VoiceOver) [#4601](https://github.com/storybooks/storybook/pull/4601)
|
||||
|
||||
#### Maintenance
|
||||
|
||||
- Update release process and `master` becomes the stable branch [#4719](https://github.com/storybooks/storybook/pull/4719)
|
||||
- Report CLI tests to teamcity [#4671](https://github.com/storybooks/storybook/pull/4671)
|
||||
|
||||
#### Dependency Upgrades
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
30 PRs
|
||||
</summary>
|
||||
|
||||
- Bump @angular/core from 7.0.1 to 7.0.2 [#4675](https://github.com/storybooks/storybook/pull/4675)
|
||||
- [Security] Bump merge from 1.2.0 to 1.2.1 in /docs [#4687](https://github.com/storybooks/storybook/pull/4687)
|
||||
- Bump typescript from 3.1.4 to 3.1.6 [#4699](https://github.com/storybooks/storybook/pull/4699)
|
||||
- Set zone.js as a peer and dev dependency [#4663](https://github.com/storybooks/storybook/pull/4663)
|
||||
- chore(core): update css-loader to latest [#4619](https://github.com/storybooks/storybook/pull/4619)
|
||||
- Bump css-loader from 1.0.0 to 1.0.1 [#4655](https://github.com/storybooks/storybook/pull/4655)
|
||||
- Bump @ngrx/store from 6.1.0 to 6.1.1 [#4653](https://github.com/storybooks/storybook/pull/4653)
|
||||
- Allow for angular-devkit/core version aligned with Angular v7 [#4652](https://github.com/storybooks/storybook/pull/4652)
|
||||
- Bump ember-load-initializers from 1.1.0 to 2.0.0 [#4634](https://github.com/storybooks/storybook/pull/4634)
|
||||
- Bump @ember/test-helpers from 0.7.27 to 1.0.0 [#4630](https://github.com/storybooks/storybook/pull/4630)
|
||||
- Bump @storybook/addon-actions from 3.4.11 to 4.0.0 in /docs [#4626](https://github.com/storybooks/storybook/pull/4626)
|
||||
- Bump gatsby-plugin-sharp from 2.0.7 to 2.0.10 in /docs [#4627](https://github.com/storybooks/storybook/pull/4627)
|
||||
- Bump typescript from 3.1.3 to 3.1.4 [#4629](https://github.com/storybooks/storybook/pull/4629)
|
||||
- Bump react-scripts from 2.0.5 to 2.1.0 [#4631](https://github.com/storybooks/storybook/pull/4631)
|
||||
- Bump ember-source from 3.5.0 to 3.5.1 [#4633](https://github.com/storybooks/storybook/pull/4633)
|
||||
- Bump @types/node from 10.12.0 to 10.12.1 [#4635](https://github.com/storybooks/storybook/pull/4635)
|
||||
- Bump react-dev-utils from 6.0.5 to 6.1.0 [#4636](https://github.com/storybooks/storybook/pull/4636)
|
||||
- Bump eslint from 5.7.0 to 5.8.0 [#4613](https://github.com/storybooks/storybook/pull/4613)
|
||||
- Bump express-graphql from 0.6.12 to 0.7.1 [#4610](https://github.com/storybooks/storybook/pull/4610)
|
||||
- Bump tslint-plugin-prettier from 2.0.0 to 2.0.1 [#4609](https://github.com/storybooks/storybook/pull/4609)
|
||||
- Bump eslint-plugin-jest from 21.26.1 to 21.26.2 [#4606](https://github.com/storybooks/storybook/pull/4606)
|
||||
- Bump @types/jest from 23.3.7 to 23.3.8 [#4611](https://github.com/storybooks/storybook/pull/4611)
|
||||
- Bump fork-ts-checker-webpack-plugin from 0.4.10 to 0.4.14 [#4607](https://github.com/storybooks/storybook/pull/4607)
|
||||
- Bump autoprefixer from 9.2.1 to 9.3.1 [#4605](https://github.com/storybooks/storybook/pull/4605)
|
||||
- Bump jasmine-core from 3.2.1 to 3.3.0 [#4581](https://github.com/storybooks/storybook/pull/4581)
|
||||
- Bump react-dom from 16.5.2 to 16.6.0 [#4580](https://github.com/storybooks/storybook/pull/4580)
|
||||
- Bump eslint-plugin-jest from 21.25.1 to 21.26.1 [#4583](https://github.com/storybooks/storybook/pull/4583)
|
||||
- Bump react from 16.5.2 to 16.6.0 [#4584](https://github.com/storybooks/storybook/pull/4584)
|
||||
- Bump react-syntax-highlighter from 9.0.0 to 9.0.1 [#4585](https://github.com/storybooks/storybook/pull/4585)
|
||||
- Bump remark-cli from 5.0.0 to 6.0.0 [#4551](https://github.com/storybooks/storybook/pull/4551)
|
||||
|
||||
</details>
|
||||
|
||||
# 4.0.2
|
||||
|
||||
2018-October-31
|
||||
|
||||
Fix broken 4.0.1 release
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Addon-knobs: fix select array values showing k [#4586](https://github.com/storybooks/storybook/pull/4586)
|
||||
|
||||
# 4.0.1
|
||||
|
||||
2018-October-31
|
||||
|
||||
Broken release - `@storybook/client-logger` [somehow didn't get published to NPM.](https://github.com/storybooks/storybook/issues/4660)
|
||||
|
||||
# 4.0.0
|
||||
|
||||
Storybook 4.0 is our first major-version update in over a year! Key improvements include:
|
||||
2018-October-29
|
||||
|
||||
[Storybook 4.0](https://medium.com/storybookjs/storybook-4-0-is-here-10b9857fc7de) is our first major-version update in over a year! Key improvements include:
|
||||
|
||||
- Build tools
|
||||
- Webpack 4 [#3148](https://github.com/storybooks/storybook/pull/3148)
|
||||
@ -30,7 +144,8 @@ Storybook 4.0 is our first major-version update in over a year! Key improvements
|
||||
- CLI-less Node api [#4344](https://github.com/storybooks/storybook/pull/4344)
|
||||
- Rename CLI to sb [#4345](https://github.com/storybooks/storybook/pull/4345)
|
||||
|
||||
There are hundreds of more fixes, features, and tweaks in the 4.0 release. See changelogs for `4.0.0-rc.*` and `4.0.0-alpha.*` for details, the [Storybook 4.0 migration guide](https://medium.com/storybookjs/migrating-to-storybook-4-c65b19a03d2c) for a step-by-step walkthrough, or our [migration docs](MIGRATION.md#from-version-34x-to-40x) for an enumeration of breaking changes.
|
||||
There are hundreds of more fixes, features, and tweaks in the 4.0 release. See changelogs for `4.0.0-rc.*` and `4.0.0-alpha.*` for details; check out our [migration guide](https://medium.com/storybookjs/migrating-to-storybook-4-c65b19a03d2c) for a walkthrough of how to upgrade or the
|
||||
[migration docs](https://github.com/storybooks/storybook/blob/master/MIGRATION.md#from-version-34x-to-40x) for an enumeration of breaking changes.
|
||||
|
||||
# 4.0.0-rc.6
|
||||
|
||||
|
||||
@ -10,13 +10,13 @@ This repo uses yarn workspaces, so you should install `yarn@1.3.2` or higher as
|
||||
|
||||
No software is bug-free. So, if you got an issue, follow these steps:
|
||||
|
||||
- Search the [issue list](https://github.com/storybooks/storybook/issues?utf8=%E2%9C%93&q=) for current and old issues.
|
||||
- If you find an existing issue, please UPVOTE the issue by adding a "thumbs-up reaction". We use this to help prioritize issues!
|
||||
- If none of that is helping, create an issue with the following information:
|
||||
- Clear title (shorter is better).
|
||||
- Describe the issue in clear language.
|
||||
- Share error logs, screenshots and etc.
|
||||
- To speed up the issue fixing process, send us a sample repo with the issue you faced:
|
||||
- Search the [issue list](https://github.com/storybooks/storybook/issues?utf8=%E2%9C%93&q=) for current and old issues.
|
||||
- If you find an existing issue, please UPVOTE the issue by adding a "thumbs-up reaction". We use this to help prioritize issues!
|
||||
- If none of that is helping, create an issue with the following information:
|
||||
- Clear title (shorter is better).
|
||||
- Describe the issue in clear language.
|
||||
- Share error logs, screenshots and etc.
|
||||
- To speed up the issue fixing process, send us a sample repo with the issue you faced:
|
||||
|
||||
### Testing against `master`
|
||||
|
||||
@ -47,11 +47,11 @@ This command will list all the suites and options for running tests.
|
||||
yarn test
|
||||
```
|
||||
|
||||
The options for running tests can be selected from the cli or be passed to `yarn test` with specific parameters. Available modes include `--watch`, `--coverage`, and `--runInBand`, which will respectively run tests in watch mode, output code coverage, and run selected test suites serially in the current process.
|
||||
The options for running tests can be selected from the cli or be passed to `yarn test` with specific parameters. Available modes include `--watch`, `--coverage`, and `--runInBand`, which will respectively run tests in watch mode, output code coverage, and run selected test suites serially in the current process.
|
||||
|
||||
You can use the `--update` flag to update snapshots or screenshots as needed.
|
||||
|
||||
You can also pick suites from CLI. Suites available are listed below.
|
||||
You can also pick suites from CLI. Suites available are listed below.
|
||||
|
||||
##### Core & Examples Tests
|
||||
|
||||
@ -147,15 +147,14 @@ When creating new unit test files, the tests should adhere to a particular folde
|
||||
| +-- [filename].test.js
|
||||
```
|
||||
|
||||
|
||||
## Pull Requests (PRs)
|
||||
|
||||
We welcome your contributions. There are many ways you can help us. This is few of those ways:
|
||||
|
||||
- Fix typos and add more [documentation](https://github.com/storybooks/storybook/labels/needs%20docs).
|
||||
- Try to fix some [bugs](https://github.com/storybooks/storybook/labels/bug).
|
||||
- Work on [API](https://github.com/storybooks/storybook/labels/enhancement%3A%20api), [Addons](https://github.com/storybooks/storybook/labels/enhancement%3A%20addons), [UI](https://github.com/storybooks/storybook/labels/enhancement%3A%20ui) or [Webpack](https://github.com/storybooks/storybook/labels/enhancement%3A%20webpack) use enhancements and new [features](https://github.com/storybooks/storybook/labels/feature%20request).
|
||||
- Add more [tests](https://codecov.io/gh/storybooks/storybook/tree/master/packages) (specially for the [UI](https://codecov.io/gh/storybooks/storybook/tree/master/packages/storybook-ui/src)).
|
||||
- Fix typos and add more [documentation](https://github.com/storybooks/storybook/labels/needs%20docs).
|
||||
- Try to fix some [bugs](https://github.com/storybooks/storybook/labels/bug).
|
||||
- Work on [API](https://github.com/storybooks/storybook/labels/enhancement%3A%20api), [Addons](https://github.com/storybooks/storybook/labels/enhancement%3A%20addons), [UI](https://github.com/storybooks/storybook/labels/enhancement%3A%20ui) or [Webpack](https://github.com/storybooks/storybook/labels/enhancement%3A%20webpack) use enhancements and new [features](https://github.com/storybooks/storybook/labels/feature%20request).
|
||||
- Add more [tests](https://codecov.io/gh/storybooks/storybook/tree/master/packages) (specially for the [UI](https://codecov.io/gh/storybooks/storybook/tree/master/packages/storybook-ui/src)).
|
||||
|
||||
Before you submit a new PR, make sure you run `yarn test`. Do not submit a PR if tests are failing. If you need any help, create an issue and ask.
|
||||
|
||||
@ -179,9 +178,9 @@ Once you've helped out on a few issues, if you'd like triage access you can help
|
||||
|
||||
We use the following label scheme to categorize issues:
|
||||
|
||||
- **type** - `bug`, `feature`, `question / support`, `discussion`, `dependencies`, `maintenance`.
|
||||
- **area** - `addon: x`, `addons-api`, `stories-api`, `ui`, etc.
|
||||
- **status** - `needs reproduction`, `needs PR`, `in progress`, etc.
|
||||
- **type** - `bug`, `feature`, `question / support`, `discussion`, `dependencies`, `maintenance`.
|
||||
- **area** - `addon: x`, `addons-api`, `stories-api`, `ui`, etc.
|
||||
- **status** - `needs reproduction`, `needs PR`, `in progress`, etc.
|
||||
|
||||
All issues should have a `type` label. `bug`/`feature`/`question`/`discussion` are self-explanatory. `dependencies` is for keeping package dependencies up to date. `maintenance` is a catch-all for any kind of cleanup or refactoring.
|
||||
|
||||
@ -193,15 +192,15 @@ If an issue is a `bug`, and it doesn't have a clear reproduction that you have p
|
||||
|
||||
### Closing issues
|
||||
|
||||
- Duplicate issues should be closed with a link to the original.
|
||||
- Unreproducible issues should be closed if it's not possible to reproduce them (if the reporter drops offline,
|
||||
it is reasonable to wait 2 weeks before closing).
|
||||
- `bug`s should be labelled `merged` when merged, and be closed when the issue is fixed and released.
|
||||
- `feature`s, `maintenance`s, `greenkeeper`s should be labelled `merged` when merged,
|
||||
and closed when released or if the feature is deemed not appropriate.
|
||||
- `question / support`s should be closed when the question has been answered.
|
||||
If the questioner drops offline, a reasonable period to wait is two weeks.
|
||||
- `discussion`s should be closed at a maintainer's discretion.
|
||||
- Duplicate issues should be closed with a link to the original.
|
||||
- Unreproducible issues should be closed if it's not possible to reproduce them (if the reporter drops offline,
|
||||
it is reasonable to wait 2 weeks before closing).
|
||||
- `bug`s should be labelled `merged` when merged, and be closed when the issue is fixed and released.
|
||||
- `feature`s, `maintenance`s, `greenkeeper`s should be labelled `merged` when merged,
|
||||
and closed when released or if the feature is deemed not appropriate.
|
||||
- `question / support`s should be closed when the question has been answered.
|
||||
If the questioner drops offline, a reasonable period to wait is two weeks.
|
||||
- `discussion`s should be closed at a maintainer's discretion.
|
||||
|
||||
## Development Guide
|
||||
|
||||
@ -211,8 +210,8 @@ If an issue is a `bug`, and it doesn't have a clear reproduction that you have p
|
||||
|
||||
Please have the **_latest_** stable versions of the following on your machine
|
||||
|
||||
- node
|
||||
- yarn
|
||||
- node
|
||||
- yarn
|
||||
|
||||
### Initial Setup
|
||||
|
||||
@ -295,15 +294,15 @@ If you don't see the changes rerun `yarn storybook` again in your sandbox app
|
||||
|
||||
This section is for Storybook maintainers who will be creating releases. It assumes:
|
||||
|
||||
- yarn >= 1.3.2
|
||||
- you've yarn linked `pr-log` from <https://github.com/storybooks/pr-log/pull/2>
|
||||
- yarn >= 1.3.2
|
||||
- you've yarn linked `pr-log` from <https://github.com/storybooks/pr-log/pull/2>
|
||||
|
||||
The current manual release sequence is as follows:
|
||||
|
||||
- Generate a changelog and verify the release by hand
|
||||
- Push the changelog to master or the release branch
|
||||
- Clean, build and publish the release
|
||||
- Cut and paste the changelog to the github release page, and mark it as a (pre-) release
|
||||
- Generate a changelog and verify the release by hand
|
||||
- Push the changelog to master or the release branch
|
||||
- Clean, build and publish the release
|
||||
- Cut and paste the changelog to the github release page, and mark it as a (pre-) release
|
||||
|
||||
**NOTE:** The very first time you publish a scoped package (`@storybook/x`) you need to make sure that it's package.json contains the following
|
||||
|
||||
@ -320,22 +319,22 @@ This sequence applies to both releases and pre-releases, but differs slightly be
|
||||
#### Prerelease:
|
||||
|
||||
```sh
|
||||
# make sure you current with origin/master.
|
||||
git checkout release/X.Y
|
||||
# make sure you current with origin/next.
|
||||
git checkout next
|
||||
git status
|
||||
|
||||
# generate changelog and edit as appropriate
|
||||
# generates a Next section
|
||||
yarn changelog Next
|
||||
yarn changelog x.y.z-alpha.a
|
||||
|
||||
# Edit the changelog/PRs as needed, then commit
|
||||
git commit -m "Updated changelog for vX.Y"
|
||||
git commit -m "x.y.z-alpha.a changelog"
|
||||
|
||||
# clean build
|
||||
yarn bootstrap --reset --core
|
||||
|
||||
# publish and tag the release
|
||||
npm run publish:alpha
|
||||
yarn run publish:next
|
||||
|
||||
# update the release page
|
||||
open https://github.com/storybooks/storybook/releases
|
||||
@ -350,16 +349,16 @@ git status
|
||||
|
||||
# generate changelog and edit as appropriate
|
||||
# generates a vNext section
|
||||
yarn changelog X.Y
|
||||
yarn changelog x.y.z
|
||||
|
||||
# Edit the changelog/PRs as needed, then commit
|
||||
git commit -m "Changelog for vX.Y"
|
||||
git commit -m "x.y.z changelog"
|
||||
|
||||
# clean build
|
||||
yarn bootstrap --reset --core
|
||||
|
||||
# publish and tag the release
|
||||
npm run publish
|
||||
yarn run publish
|
||||
|
||||
# update the release page
|
||||
open https://github.com/storybooks/storybook/releases
|
||||
|
||||
2
LICENSE
2
LICENSE
@ -1,6 +1,6 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2017 Kadira Inc. <hello@kadira.io>
|
||||
Copyright (c) 2018 Norbert de Langen ndelangen@me.com
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@ -179,7 +179,7 @@ If you're using `start-storybook` on CI, you may need to opt out of this using t
|
||||
We've deprecated the `getstorybook` CLI in 4.0. The new way to install storybook is `sb init`. We recommend using `npx` for convenience and to make sure you're always using the latest version of the CLI:
|
||||
|
||||
```
|
||||
npx -p @storybook/cli@rc sb init
|
||||
npx -p @storybook/cli sb init
|
||||
```
|
||||
|
||||
### Addon story parameters
|
||||
|
||||
32
README.md
32
README.md
@ -27,7 +27,7 @@ It allows you to browse a component library, view the different states of each c
|
||||
README for:
|
||||
|
||||
- [](https://github.com/storybooks/storybook)
|
||||
- [](https://github.com/storybooks/storybook/tree/release/3.4)
|
||||
- [](https://github.com/storybooks/storybook/tree/master)
|
||||
|
||||
Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.
|
||||
|
||||
@ -55,7 +55,7 @@ First install storybook:
|
||||
|
||||
```sh
|
||||
cd my-react-app
|
||||
npx -p @storybook/cli@rc sb init
|
||||
npx -p @storybook/cli sb init
|
||||
```
|
||||
|
||||
If you'd rather set up your project manually, take a look at our [Slow Start Guide](https://storybook.js.org/basics/slow-start-guide/).
|
||||
@ -66,7 +66,7 @@ Once it's installed, you can `npm run storybook` and it will run the development
|
||||
|
||||
```sh
|
||||
cd my-storybook-v2-app
|
||||
npx -p @storybook/cli@rc sb init
|
||||
npx -p @storybook/cli sb init
|
||||
```
|
||||
|
||||
It runs a codemod to update all package names. Read all migration details in our [Migration Guide](MIGRATION.md)
|
||||
@ -79,19 +79,19 @@ For additional help, join us [in our Slack](https://now-examples-slackin-rrirkqo
|
||||
|
||||
### Supported Frameworks
|
||||
|
||||
| Framework | Demo latest | Demo prerelease | |
|
||||
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [v3.4.x](https://release-3-4--storybooks-official.netlify.com), [v3.3.x](https://release-3-3--storybooks-official.netlify.com) | [v4.0.0-alpha](https://storybooks-official.netlify.com) | [](app/react) |
|
||||
| [React Native](app/react-native) | - | - | [](app/react-native) |
|
||||
| [Vue](app/vue) | [v3.4.x](https://release-3-4--storybooks-vue.netlify.com/), [v3.3.x](https://release-3-3--storybooks-vue.netlify.com/) | [v4.0.0-alpha](https://storybooks-vue.netlify.com/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [v3.4.x](https://release-3-4--storybooks-angular.netlify.com/), [v3.3.x](https://release-3-3--storybooks-angular.netlify.com/) | [v4.0.0-alpha](https://storybooks-angular.netlify.com/) | [](app/angular) |
|
||||
| [Polymer](app/polymer) | [v3.4.x](https://release-3-4--storybooks-polymer.netlify.com/) | [v4.0.0-alpha](https://storybooks-polymer.netlify.com/) | [](app/polymer) |
|
||||
| [Mithril](app/mithril) <sup>alpha</sup> | - | [v4.0.0-alpha](https://storybooks-mithril.netlify.com/) | [](app/mithril) |
|
||||
| [Marko](app/marko) <sup>alpha</sup> | - | [v4.0.0-alpha](https://storybooks-marko.netlify.com/) | [](app/marko) |
|
||||
| [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) <sup>alpha</sup> | - | [v4.0.0-alpha](https://storybooks-ember.netlify.com/) | [](app/ember) |
|
||||
| Framework | Demo latest | Demo prerelease | |
|
||||
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [v3.4.x](https://release-3-4--storybooks-official.netlify.com), [v3.3.x](https://release-3-3--storybooks-official.netlify.com) | [v4.0.0](https://storybooks-official.netlify.com) | [](app/react) |
|
||||
| [React Native](app/react-native) | - | - | [](app/react-native) |
|
||||
| [Vue](app/vue) | [v3.4.x](https://release-3-4--storybooks-vue.netlify.com/), [v3.3.x](https://release-3-3--storybooks-vue.netlify.com/) | [v4.0.0](https://storybooks-vue.netlify.com/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [v3.4.x](https://release-3-4--storybooks-angular.netlify.com/), [v3.3.x](https://release-3-3--storybooks-angular.netlify.com/) | [v4.0.0](https://storybooks-angular.netlify.com/) | [](app/angular) |
|
||||
| [Polymer](app/polymer) | [v3.4.x](https://release-3-4--storybooks-polymer.netlify.com/) | [v4.0.0](https://storybooks-polymer.netlify.com/) | [](app/polymer) |
|
||||
| [Mithril](app/mithril) | - | [v4.0.0](https://storybooks-mithril.netlify.com/) | [](app/mithril) |
|
||||
| [Marko](app/marko) | - | [v4.0.0](https://storybooks-marko.netlify.com/) | [](app/marko) |
|
||||
| [HTML](app/html) | - | [v4.0.0](https://storybooks-html.netlify.com/) | [](app/html) |
|
||||
| [Svelte](app/svelte) | - | [v4.0.0](https://storybooks-svelte.netlify.com/) | [](app/svelte) |
|
||||
| [Riot](app/riot) | - | [v4.0.0](https://storybooks-riot.netlify.com/) | [](app/riot) |
|
||||
| [Ember](app/ember) | - | [v4.0.0](https://storybooks-ember.netlify.com/) | [](app/ember) |
|
||||
|
||||
### Sub Projects
|
||||
|
||||
|
||||
57
RELEASES.md
57
RELEASES.md
@ -2,11 +2,19 @@
|
||||
|
||||
A Storybook release process based on [Semver](http://semver.org/). In short:
|
||||
|
||||
1. Merge bugfix PRs directly into master automatically release (~daily)
|
||||
1. Merge all PRs into `next`, which is the default branch. Cherry-pick bugfix PRs into `master`, which is the stable release.
|
||||
|
||||
2. Merge feature and breaking PRs into a release branch (e.g. `release/3.2`) and release features in groups along with a marketing push after a preview period (~monthly)
|
||||
2. Every week: release patch releases off `master` to the NPM tag `latest`, and alpha releases off `next` to the NPM tag `next` (as e.g. `4.1.0-alpha.0`).
|
||||
|
||||
3. Consensus on critical infrastructure/bugs that are needed before we can do a minor release, so that we pay down our tech debt as we go.
|
||||
3. Every month or two, merge `next` into `master` and release a minor/major version according to `semver`. We set minor release dates as soon as we have feature clarity and manage to those dates:
|
||||
- Date should be a Monday so if we slip we don't get pushed into the weekend
|
||||
- T-3wk:
|
||||
- Draft announcement and socialize
|
||||
- Announce dates in #maintenance so people can react
|
||||
- T-1wk:
|
||||
- If you want your feature in the release, it should already be released on next by this time
|
||||
- Create release branch and only cherrypick bugfixes
|
||||
- Set up launch plan
|
||||
|
||||
## Motivation
|
||||
|
||||
@ -38,8 +46,8 @@ releases. We'll try our best to restrict breaking changes to MAJOR releases.
|
||||
## PATCH releases
|
||||
|
||||
Every bugfix should go out as soon as we've verified the fix, and based on the
|
||||
current rate of contribution, we should be issuing PATCH releases multiple times per week.
|
||||
Soon we'll automate the process so that a release will go out every time a PR is
|
||||
current rate of contribution, we should be issuing PATCH releases weekly.
|
||||
Eventually we'll automate the process so that a release will go out every time a PR is
|
||||
merged into `master`, and we've already laid most of the groundwork for this.
|
||||
|
||||
## MINOR releases
|
||||
@ -48,14 +56,10 @@ Every new feature, particularly significant ones (e.g. Vue support, deep
|
||||
hierarchy for stories) deserves more attention:
|
||||
|
||||
1. They should be well-tested by the community before we release.
|
||||
2. They often have architectural implications for the entire Storybook ecosystem, so should be discussed thoroughly before release. Doing `alpha` releases allow us to test in the community without necessarily achieving agreement. For example, currently `Vue` support is in `alpha`, although it contains potentially controversial changes to addons.
|
||||
2. They often have architectural implications for the entire Storybook ecosystem, so should be discussed thoroughly before release. Doing `alpha` releases allow us to test in the community without necessarily achieving agreement.
|
||||
3. They often deserve proper marketing treatment (blog posts, release announcement, podcast, etc.)
|
||||
|
||||
Therefore we merge these into a release branch of the form `release/MAJOR.MINOR`
|
||||
and we create preview releases and get them tested by the community before
|
||||
merging those branches into `master`.
|
||||
|
||||
> NOTE: it is possible to edit the `base` branch in a PR, so we can expect users to issue PRs to `master`, but as maintainers as we see feature releases we should set them to merge into the appropriate release branch.
|
||||
Therefore we release `alpha` versions continuously on the NPM `next` tag to allow people to test out features as soon as they are ready.
|
||||
|
||||
In general we should release 2-3 headline features per minor release for
|
||||
marketing purposes. Each headline feature should get its own blog post on the
|
||||
@ -64,11 +68,7 @@ post.
|
||||
|
||||
## MAJOR releases
|
||||
|
||||
We should avoid major releases, and should try to do these at most 1-2x per
|
||||
year. Ideally each breaking change would have been agreed upon by the
|
||||
maintainers and validated in backwards-compatible feature releases. At some
|
||||
point once a change has been thoroughly vetted, we deprecate the old way and
|
||||
give some time for people to upgrade to the new way. Finally MAJOR releases
|
||||
We should avoid major releases, but won't hold ourselves back on this. Making storybook better is the prime directive, and if we have to make breaking changes to do it, we will. That said, MAJOR releases
|
||||
should have killer features that reward users for upgrading, and should not be
|
||||
used to scratch our own architectural itches -- unless those itches are really
|
||||
killing development in some meaningful way.
|
||||
@ -88,7 +88,6 @@ or to understand what is blocking the release so they can actually do something
|
||||
about it. Discussion about which bugs are critical happens in the `#maintenance`
|
||||
channel [in our Slack](https://now-examples-slackin-rrirkqohko.now.sh/) [](https://now-examples-slackin-rrirkqohko.now.sh/)
|
||||
|
||||
|
||||
If you're experiencing a bug, the best way to make sure that it gets attention
|
||||
is to upvote it by adding a "thumbs-up" reaction in Github. This way important
|
||||
bugs quickly bubble to the top [with a
|
||||
@ -100,20 +99,20 @@ in a patch release.
|
||||
|
||||
## Decision-making
|
||||
|
||||
- For PATCH changes, all discussion can occur in issue/PR comments (and random slack chat as needed).
|
||||
- For MINOR feature changes, there are multiple stages of discussion:
|
||||
- The feature may be discussed in an issue before it is implemented (ex: <https://github.com/storybooks/storybook/issues/151>)
|
||||
- Once it's implemented, the discussion may be occur on the PR (ex: <https://github.com/storybooks/storybook/pull/1329>)
|
||||
- If people disagree on an implementation and it can't be resolved in discussion, they may issue alternative PR's with different ideas
|
||||
- Ultimately the maintainers will reach a consensus before merging the changes. There is no set process for this, but we're all adults.
|
||||
- Since MINOR features are released in alpha before they are fully released, new issues may be created by end users, etc.
|
||||
- For MAJOR infrastructural changes, the discussion may take place over time, in gists like this one, issues, slack discussions, etc.
|
||||
- Once the breaking changes have been reduced to an actual implementation, it looks pretty much like a feature release (only with higher stakes and probably a longer stabilization process).
|
||||
- For PATCH changes, all discussion can occur in issue/PR comments (and random slack chat as needed).
|
||||
- For MINOR feature changes, there are multiple stages of discussion:
|
||||
- The feature may be discussed in an issue before it is implemented (ex: <https://github.com/storybooks/storybook/issues/151>)
|
||||
- Once it's implemented, the discussion may be occur on the PR (ex: <https://github.com/storybooks/storybook/pull/1329>)
|
||||
- If people disagree on an implementation and it can't be resolved in discussion, they may issue alternative PR's with different ideas
|
||||
- Ultimately the maintainers will reach a consensus before merging the changes. There is no set process for this, but we're all adults.
|
||||
- Since MINOR features are released in alpha before they are fully released, new issues may be created by end users, etc.
|
||||
- For MAJOR infrastructural changes, the discussion may take place over time, in gists like this one, issues, slack discussions, etc.
|
||||
- Once the breaking changes have been reduced to an actual implementation, it looks pretty much like a feature release (only with higher stakes and probably a longer stabilization process).
|
||||
|
||||
## FAQ's
|
||||
|
||||
#### How does my PR get merged?
|
||||
|
||||
- For PATCH PR's, any maintainer can review, test, approve, and merge it.
|
||||
- For MINOR/MAJOR PR's, once a maintainer reviews, tests, and approves it, s/he should clear it with the other maintainers before merging it into the release branch.
|
||||
|
||||
- For PATCH PR's, any maintainer can review, test, approve, and merge it.
|
||||
- For MINOR/MAJOR PR's, once a maintainer reviews, tests, and approves it, s/he should clear it with the other maintainers before merging it into the release branch.
|
||||
- Once a release date has been set and we cut off merging, we'll create a temporary branch to hold that release so that it doesn't block merging to `next`.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -29,10 +29,10 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.0.0-rc.6",
|
||||
"@storybook/client-logger": "4.0.0-rc.6",
|
||||
"@storybook/components": "4.0.0-rc.6",
|
||||
"@storybook/core-events": "4.0.0-rc.6",
|
||||
"@storybook/addons": "4.1.0-alpha.1",
|
||||
"@storybook/client-logger": "4.1.0-alpha.1",
|
||||
"@storybook/components": "4.1.0-alpha.1",
|
||||
"@storybook/core-events": "4.1.0-alpha.1",
|
||||
"axe-core": "^3.1.2",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"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-rc.6",
|
||||
"@storybook/components": "4.0.0-rc.6",
|
||||
"@storybook/core-events": "4.0.0-rc.6",
|
||||
"@storybook/addons": "4.1.0-alpha.1",
|
||||
"@storybook/components": "4.1.0-alpha.1",
|
||||
"@storybook/core-events": "4.1.0-alpha.1",
|
||||
"deep-equal": "^1.0.1",
|
||||
"global": "^4.3.2",
|
||||
"lodash": "^4.17.11",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"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-rc.6",
|
||||
"@storybook/core-events": "4.0.0-rc.6",
|
||||
"@storybook/addons": "4.1.0-alpha.1",
|
||||
"@storybook/core-events": "4.1.0-alpha.1",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2",
|
||||
"util-deprecate": "^1.0.2"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "Storybook decorator to center components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -27,8 +27,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.0.0-rc.6",
|
||||
"@storybook/core-events": "4.0.0-rc.6",
|
||||
"@storybook/addons": "4.1.0-alpha.1",
|
||||
"@storybook/core-events": "4.1.0-alpha.1",
|
||||
"format-json": "^1.0.3",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-google-analytics",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "Storybook addon for google analytics",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,7 +24,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-rc.6",
|
||||
"@storybook/addons": "4.1.0-alpha.1",
|
||||
"global": "^4.3.2",
|
||||
"react-ga": "^2.5.3"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"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-rc.6",
|
||||
"@storybook/client-logger": "4.0.0-rc.6",
|
||||
"@storybook/components": "4.0.0-rc.6",
|
||||
"@storybook/addons": "4.1.0-alpha.1",
|
||||
"@storybook/client-logger": "4.1.0-alpha.1",
|
||||
"@storybook/components": "4.1.0-alpha.1",
|
||||
"core-js": "2.5.7",
|
||||
"global": "^4.3.2",
|
||||
"marksy": "^6.1.0",
|
||||
|
||||
@ -356,7 +356,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
}
|
||||
}
|
||||
>
|
||||
@ -400,7 +400,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
}
|
||||
}
|
||||
>
|
||||
@ -427,7 +427,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
}
|
||||
}
|
||||
>
|
||||
@ -455,7 +455,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
}
|
||||
}
|
||||
/>
|
||||
@ -481,7 +481,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
}
|
||||
}
|
||||
>
|
||||
@ -529,7 +529,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
}
|
||||
}
|
||||
>
|
||||
@ -663,7 +663,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
|
||||
"color": "#a11",
|
||||
},
|
||||
"empty": Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
},
|
||||
"func": Object {
|
||||
"color": "#170",
|
||||
@ -724,7 +724,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
|
||||
"color": "#a11",
|
||||
},
|
||||
"empty": Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
},
|
||||
"func": Object {
|
||||
"color": "#170",
|
||||
@ -789,7 +789,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
|
||||
"color": "#a11",
|
||||
},
|
||||
"empty": Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
},
|
||||
"func": Object {
|
||||
"color": "#170",
|
||||
@ -884,7 +884,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
|
||||
"color": "#a11",
|
||||
},
|
||||
"empty": Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
},
|
||||
"func": Object {
|
||||
"color": "#170",
|
||||
@ -933,7 +933,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
|
||||
"color": "#a11",
|
||||
},
|
||||
"empty": Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
},
|
||||
"func": Object {
|
||||
"color": "#170",
|
||||
@ -986,7 +986,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
|
||||
"color": "#a11",
|
||||
},
|
||||
"empty": Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
},
|
||||
"func": Object {
|
||||
"color": "#170",
|
||||
@ -1039,7 +1039,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
|
||||
"color": "#a11",
|
||||
},
|
||||
"empty": Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
},
|
||||
"func": Object {
|
||||
"color": "#170",
|
||||
@ -1180,7 +1180,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
}
|
||||
}
|
||||
>
|
||||
@ -1199,7 +1199,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
}
|
||||
}
|
||||
>
|
||||
@ -1767,7 +1767,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
}
|
||||
}
|
||||
>
|
||||
@ -1811,7 +1811,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
}
|
||||
}
|
||||
>
|
||||
@ -1838,7 +1838,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
}
|
||||
}
|
||||
>
|
||||
@ -1866,7 +1866,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
}
|
||||
}
|
||||
/>
|
||||
@ -1892,7 +1892,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
}
|
||||
}
|
||||
>
|
||||
@ -1940,7 +1940,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
}
|
||||
}
|
||||
>
|
||||
@ -2074,7 +2074,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
|
||||
"color": "#a11",
|
||||
},
|
||||
"empty": Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
},
|
||||
"func": Object {
|
||||
"color": "#170",
|
||||
@ -2135,7 +2135,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
|
||||
"color": "#a11",
|
||||
},
|
||||
"empty": Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
},
|
||||
"func": Object {
|
||||
"color": "#170",
|
||||
@ -2200,7 +2200,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
|
||||
"color": "#a11",
|
||||
},
|
||||
"empty": Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
},
|
||||
"func": Object {
|
||||
"color": "#170",
|
||||
@ -2295,7 +2295,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
|
||||
"color": "#a11",
|
||||
},
|
||||
"empty": Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
},
|
||||
"func": Object {
|
||||
"color": "#170",
|
||||
@ -2344,7 +2344,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
|
||||
"color": "#a11",
|
||||
},
|
||||
"empty": Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
},
|
||||
"func": Object {
|
||||
"color": "#170",
|
||||
@ -2397,7 +2397,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
|
||||
"color": "#a11",
|
||||
},
|
||||
"empty": Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
},
|
||||
"func": Object {
|
||||
"color": "#170",
|
||||
@ -2450,7 +2450,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
|
||||
"color": "#a11",
|
||||
},
|
||||
"empty": Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
},
|
||||
"func": Object {
|
||||
"color": "#170",
|
||||
@ -2591,7 +2591,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
}
|
||||
}
|
||||
>
|
||||
@ -2610,7 +2610,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"color": "#777",
|
||||
"color": "#444",
|
||||
}
|
||||
}
|
||||
>
|
||||
|
||||
@ -5,7 +5,7 @@ import Props from './Props';
|
||||
const stylesheet = {
|
||||
containerStyle: {},
|
||||
tagStyle: {
|
||||
color: '#777',
|
||||
color: '#444',
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -33,7 +33,7 @@ const getValueStyles = (codeColors = {}) => ({
|
||||
},
|
||||
|
||||
empty: {
|
||||
color: '#777',
|
||||
color: '#444',
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -350,7 +350,7 @@ class Story extends Component {
|
||||
extract(children);
|
||||
|
||||
const array = Array.from(types.keys());
|
||||
array.sort((a, b) => getName(a) > getName(b));
|
||||
array.sort((a, b) => (getName(a) > getName(b) ? 1 : -1));
|
||||
|
||||
propTables = array.map((type, i) => (
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"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-rc.6",
|
||||
"@storybook/components": "4.0.0-rc.6",
|
||||
"@storybook/addons": "4.1.0-alpha.1",
|
||||
"@storybook/components": "4.1.0-alpha.1",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2",
|
||||
"upath": "^1.1.0",
|
||||
|
||||
@ -5,13 +5,19 @@ import { normalize } from 'upath';
|
||||
const findTestResults = (testFiles, jestTestResults, jestTestFilesExt) =>
|
||||
Object.values(testFiles).map(name => {
|
||||
const fileName = `${name}${jestTestFilesExt}`;
|
||||
|
||||
if (jestTestResults && jestTestResults.testResults) {
|
||||
const fileNamePattern = new RegExp(fileName);
|
||||
|
||||
return {
|
||||
fileName,
|
||||
name,
|
||||
result: jestTestResults.testResults.find(t => normalize(t.name).includes(fileName)),
|
||||
result: jestTestResults.testResults.find(test =>
|
||||
normalize(test.name).match(fileNamePattern)
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
return { fileName, name };
|
||||
});
|
||||
|
||||
@ -38,13 +44,12 @@ export const withTests = userOptions => {
|
||||
}, 'Passing component filenames to the `@storybook/addon-jest` via `withTests` is deprecated. Instead, use the `jest` story parameter');
|
||||
}
|
||||
|
||||
const [
|
||||
story,
|
||||
{
|
||||
kind,
|
||||
parameters: { jest: testFiles },
|
||||
},
|
||||
] = args;
|
||||
const [story, { kind, parameters = {} }] = args;
|
||||
let { jest: testFiles } = parameters;
|
||||
|
||||
if (typeof testFiles === 'string') {
|
||||
testFiles = [testFiles];
|
||||
}
|
||||
|
||||
if (testFiles && !testFiles.disable) {
|
||||
emitAddTests({ kind, story, testFiles, options });
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -25,9 +25,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.0.0-rc.6",
|
||||
"@storybook/components": "4.0.0-rc.6",
|
||||
"@storybook/core-events": "4.0.0-rc.6",
|
||||
"@storybook/addons": "4.1.0-alpha.1",
|
||||
"@storybook/components": "4.1.0-alpha.1",
|
||||
"@storybook/core-events": "4.1.0-alpha.1",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"escape-html": "^1.0.3",
|
||||
"fast-deep-equal": "^2.0.1",
|
||||
|
||||
@ -85,7 +85,7 @@ class NumberType extends React.Component {
|
||||
NumberType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.number,
|
||||
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
range: PropTypes.bool,
|
||||
min: PropTypes.number,
|
||||
max: PropTypes.number,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,9 +24,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-rc.6",
|
||||
"@storybook/components": "4.0.0-rc.6",
|
||||
"@storybook/core-events": "4.0.0-rc.6",
|
||||
"@storybook/addons": "4.1.0-alpha.1",
|
||||
"@storybook/components": "4.1.0-alpha.1",
|
||||
"@storybook/core-events": "4.1.0-alpha.1",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
|
||||
@ -7,7 +7,8 @@ Storybook Addon Notes allows you to write notes (text or HTML) for your stories
|
||||
|
||||
|
||||
### Getting Started
|
||||
**NOTE: Documentation on master branch is for alpha version, stable release is on [release/3.4](https://github.com/storybooks/storybook/tree/release/3.4/addons/)**
|
||||
|
||||
**NOTE: Documentation on master branch is for alpha version, stable release is on [master](https://github.com/storybooks/storybook/tree/master/addons/)**
|
||||
|
||||
```sh
|
||||
yarn add -D @storybook/addon-notes
|
||||
@ -38,8 +39,9 @@ import { storiesOf } from '@storybook/react';
|
||||
|
||||
import Component from './Component';
|
||||
|
||||
storiesOf('Component', module)
|
||||
.add('with some emoji', () => <Component />, { notes: 'A very simple component' });
|
||||
storiesOf('Component', module).add('with some emoji', () => <Component />, {
|
||||
notes: 'A very simple component',
|
||||
});
|
||||
```
|
||||
|
||||
#### Using Markdown
|
||||
@ -51,9 +53,7 @@ import { storiesOf } from '@storybook/react';
|
||||
import Component from './Component';
|
||||
import someMarkdownText from './someMarkdownText.md';
|
||||
|
||||
storiesOf('Component', module).add(
|
||||
'With Markdown',
|
||||
() => <Component />,
|
||||
{ notes: { markdown: someMarkdownText } }
|
||||
);
|
||||
storiesOf('Component', module).add('With Markdown', () => <Component />, {
|
||||
notes: { markdown: someMarkdownText },
|
||||
});
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-notes",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -26,7 +26,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.0.0-rc.6",
|
||||
"@storybook/addons": "4.1.0-alpha.1",
|
||||
"marked": "^0.5.1",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-backgrounds",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -26,7 +26,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-rc.6",
|
||||
"@storybook/addons": "4.1.0-alpha.1",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-knobs",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "Display storybook story knobs on your deviced.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -23,7 +23,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-rc.6",
|
||||
"@storybook/addons": "4.1.0-alpha.1",
|
||||
"deep-equal": "^1.0.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-native-color-picker": "^0.4.0",
|
||||
@ -32,7 +32,7 @@
|
||||
"react-native-switch": "^1.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-knobs": "4.0.0-alpha.24",
|
||||
"@storybook/addon-knobs": "4.1.0-alpha.1",
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
}
|
||||
|
||||
@ -7,7 +7,8 @@ Storybook Addon On Device Notes allows you to write notes (text or markdown) for
|
||||
|
||||
|
||||
### Getting Started
|
||||
**NOTE: Documentation on master branch is for alpha version, stable release is on [release/3.4](https://github.com/storybooks/storybook/tree/release/3.4/addons/)**
|
||||
|
||||
**NOTE: Documentation on master branch is for alpha version, stable release is on [master](https://github.com/storybooks/storybook/tree/master/addons/)**
|
||||
|
||||
```sh
|
||||
yarn add -D @storybook/addon-ondevice-notes
|
||||
@ -22,6 +23,7 @@ import '@storybook/addon-ondevice-notes/register';
|
||||
```
|
||||
|
||||
Then import `rn-addons.js` next to your `getStorybookUI` call.
|
||||
|
||||
```js
|
||||
import './rn-addons';
|
||||
```
|
||||
@ -43,6 +45,7 @@ import { storiesOf } from '@storybook/react-native';
|
||||
|
||||
import Component from './Component';
|
||||
|
||||
storiesOf('Component', module)
|
||||
.add('with some emoji', () => <Component />, { notes: 'A very simple component' });
|
||||
storiesOf('Component', module).add('with some emoji', () => <Component />, {
|
||||
notes: 'A very simple component',
|
||||
});
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-notes",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -21,7 +21,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-rc.6",
|
||||
"@storybook/addons": "4.1.0-alpha.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-native-simple-markdown": "^1.1.0"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-options",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "Options addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -23,7 +23,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-rc.6",
|
||||
"@storybook/addons": "4.1.0-alpha.1",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,17 +28,17 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@storybook/addons": "4.0.0-rc.6",
|
||||
"@storybook/addons": "4.1.0-alpha.1",
|
||||
"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-rc.6",
|
||||
"@storybook/addon-links": "4.0.0-rc.6",
|
||||
"@storybook/addons": "4.0.0-alpha.24",
|
||||
"@storybook/react": "4.0.0-rc.6",
|
||||
"@storybook/addon-actions": "4.1.0-alpha.1",
|
||||
"@storybook/addon-links": "4.1.0-alpha.1",
|
||||
"@storybook/addons": "4.1.0-alpha.1",
|
||||
"@storybook/react": "4.1.0-alpha.1",
|
||||
"enzyme-to-json": "^3.3.4",
|
||||
"react": "^16.6.0"
|
||||
}
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
## Configure Storyshots for image snapshots ( alpha )
|
||||
## Configure Storyshots for image snapshots
|
||||
|
||||
/*\ **React-native** is **not supported** by this test function.
|
||||
/\*\ **React-native** is **not supported** by this test function.
|
||||
|
||||
Internally, it uses [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot).
|
||||
|
||||
When willing to generate and compare image snapshots for your stories, you have two options:
|
||||
|
||||
- Have a storybook running (ie. accessible via http(s), for instance using `yarn run storybook`)
|
||||
- Have a static build of the storybook (for instance, using `yarn run build-storybook`)
|
||||
|
||||
@ -13,59 +14,75 @@ Then you will need to reference the storybook URL (`file://...` if local, `http(
|
||||
### Using default values for _imageSnapshots_
|
||||
|
||||
Then you can either create a new Storyshots instance or edit the one you previously used:
|
||||
|
||||
```js
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
|
||||
|
||||
initStoryshots({suite: 'Image storyshots', test: imageSnapshot()});
|
||||
initStoryshots({ suite: 'Image storyshots', test: imageSnapshot() });
|
||||
```
|
||||
|
||||
This will assume you have a storybook running on at _<http://localhost:6006>_.
|
||||
Internally here are the steps:
|
||||
|
||||
- Launches a Chrome headless using [puppeteer](https://github.com/GoogleChrome/puppeteer)
|
||||
- Browses each stories (calling _<http://localhost:6006/iframe.html?...>_ URL),
|
||||
- Take screenshots & save all images under _\_image_snapshots\__ folder.
|
||||
- Take screenshots & save all images under \_\_image_snapshots\_\_ folder.
|
||||
|
||||
### Specifying the storybook URL
|
||||
|
||||
If you want to set specific storybook URL, you can specify via the `storybookUrl` parameter, see below:
|
||||
|
||||
```js
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
|
||||
|
||||
initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'http://my-specific-domain.com:9010'})});
|
||||
initStoryshots({
|
||||
suite: 'Image storyshots',
|
||||
test: imageSnapshot({ storybookUrl: 'http://my-specific-domain.com:9010' }),
|
||||
});
|
||||
```
|
||||
|
||||
The above config will use _<https://my-specific-domain.com:9010>_ for screenshots. You can also use query parameters in your URL (e.g. for setting a different background for your storyshots, if you use `@storybook/addon-backgrounds`).
|
||||
|
||||
|
||||
You may also use a local static build of storybook if you do not want to run the webpack dev-server:
|
||||
|
||||
```js
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
|
||||
|
||||
initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'file:///path/to/my/storybook-static'})});
|
||||
initStoryshots({
|
||||
suite: 'Image storyshots',
|
||||
test: imageSnapshot({ storybookUrl: 'file:///path/to/my/storybook-static' }),
|
||||
});
|
||||
```
|
||||
|
||||
### Specifying options to _jest-image-snapshots_
|
||||
|
||||
If you wish to customize [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot), then you can provide a `getMatchOptions` parameter that should return the options config object. Additionally, you can provide `beforeScreenshot` which is called before the screenshot is captured.
|
||||
|
||||
```js
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
|
||||
const getMatchOptions = ({context : {kind, story}, url}) => {
|
||||
const getMatchOptions = ({ context: { kind, story }, url }) => {
|
||||
return {
|
||||
failureThreshold: 0.2,
|
||||
failureThresholdType: 'percent',
|
||||
}
|
||||
}
|
||||
const beforeScreenshot = (page, {context : {kind, story}, url}) => {
|
||||
};
|
||||
};
|
||||
const beforeScreenshot = (page, { context: { kind, story }, url }) => {
|
||||
return new Promise(resolve =>
|
||||
setTimeout(() => {
|
||||
resolve();
|
||||
}, 600)
|
||||
)
|
||||
}
|
||||
initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'http://localhost:6006', getMatchOptions, beforeScreenshot})});
|
||||
setTimeout(() => {
|
||||
resolve();
|
||||
}, 600)
|
||||
);
|
||||
};
|
||||
initStoryshots({
|
||||
suite: 'Image storyshots',
|
||||
test: imageSnapshot({ storybookUrl: 'http://localhost:6006', getMatchOptions, beforeScreenshot }),
|
||||
});
|
||||
```
|
||||
|
||||
`getMatchOptions` receives an object: `{ context: {kind, story}, url}`. _kind_ is the kind of the story and the _story_ its name. _url_ is the URL the browser will use to screenshot.
|
||||
|
||||
`beforeScreenshot` receives the [Puppeteer page instance](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-page) and an object: `{ context: {kind, story}, url}`. _kind_ is the kind of the story and the _story_ its name. _url_ is the URL the browser will use to screenshot. `beforeScreenshot` is part of the promise chain and is called after the browser navigation is completed but before the screenshot is taken. It allows for triggering events on the page elements and delaying the screenshot and can be used avoid regressions due to mounting animations.
|
||||
@ -77,12 +94,15 @@ You might use `getGotoOptions` to specify options when the storybook is navigati
|
||||
```js
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
|
||||
const getGotoOptions = ({context, url}) => {
|
||||
const getGotoOptions = ({ context, url }) => {
|
||||
return {
|
||||
waitUntil: 'networkidle0',
|
||||
}
|
||||
}
|
||||
initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'http://localhost:6006', getGotoOptions})});
|
||||
};
|
||||
};
|
||||
initStoryshots({
|
||||
suite: 'Image storyshots',
|
||||
test: imageSnapshot({ storybookUrl: 'http://localhost:6006', getGotoOptions }),
|
||||
});
|
||||
```
|
||||
|
||||
### Specifying options to _screenshot()_ (puppeteer API)
|
||||
@ -112,14 +132,37 @@ import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
|
||||
|
||||
const chromeExecutablePath = '/usr/local/bin/chrome';
|
||||
|
||||
initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'http://localhost:6006', chromeExecutablePath})});
|
||||
initStoryshots({
|
||||
suite: 'Image storyshots',
|
||||
test: imageSnapshot({ storybookUrl: 'http://localhost:6006', chromeExecutablePath }),
|
||||
});
|
||||
```
|
||||
|
||||
### Specifying a custom puppeteer `browser` instance
|
||||
|
||||
You might use `customBrowser` to specify a custom instance of a puppeteer `browser` object. This will prevent `storyshots-puppeteer` from creating its own `browser`. It will create and close pages within the `browser`, and it is your responsibility to manage the lifecycle of the `browser` itself.
|
||||
|
||||
```js
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
|
||||
import puppeteer from 'puppeteer';
|
||||
|
||||
(async function() {
|
||||
const customBrowser = await puppeteer.connect('ws://yourUrl');
|
||||
|
||||
initStoryshots({
|
||||
suite: 'Image storyshots',
|
||||
test: imageSnapshot({ storybookUrl: 'http://localhost:6006', customBrowser }),
|
||||
});
|
||||
})();
|
||||
```
|
||||
|
||||
|
||||
### Customizing a `page` instance
|
||||
|
||||
Sometimes, there is a need to customize a page before it calls the `goto` api.
|
||||
Sometimes, there is a need to customize a page before it calls the `goto` api.
|
||||
|
||||
An example of device emulation:
|
||||
An example of device emulation:
|
||||
|
||||
```js
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
@ -133,11 +176,11 @@ function customizePage(page) {
|
||||
}
|
||||
|
||||
initStoryshots({
|
||||
suite: 'Image storyshots',
|
||||
suite: 'Image storyshots',
|
||||
test: imageSnapshot({
|
||||
storybookUrl: 'http://localhost:6006',
|
||||
customizePage,
|
||||
})
|
||||
storybookUrl: 'http://localhost:6006',
|
||||
customizePage,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
@ -154,19 +197,21 @@ You have two options here, you can either:
|
||||
|
||||
- Create a custom test file using Jest outside of the CRA scope:
|
||||
|
||||
A more robust approach would be to separate existing test files ran by create-react-app (anything `(test|spec).js` suffixed files) from the test files to run storyshots with image snapshots.
|
||||
This use case can be achieved by using a custom name for the test file, ie something like `image-storyshots.runner.js`. This file will contains the `initStoryshots` call with image snapshots configuration.
|
||||
Then you will create a separate script entry in your package.json, for instance
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"image-snapshots" : "jest image-storyshots.runner.js --config path/to/custom/jest.config.json"
|
||||
}
|
||||
}
|
||||
```
|
||||
Note that you will certainly need a custom config file for Jest as you run it outside of the CRA scope and thus you do not have the built-in config.
|
||||
A more robust approach would be to separate existing test files ran by create-react-app (anything `(test|spec).js` suffixed files) from the test files to run storyshots with image snapshots.
|
||||
This use case can be achieved by using a custom name for the test file, ie something like `image-storyshots.runner.js`. This file will contains the `initStoryshots` call with image snapshots configuration.
|
||||
Then you will create a separate script entry in your package.json, for instance
|
||||
|
||||
Once that's setup, you can run `yarn run image-snapshots` (or `npm run image-snapshots`).
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"image-snapshots": "jest image-storyshots.runner.js --config path/to/custom/jest.config.json"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Note that you will certainly need a custom config file for Jest as you run it outside of the CRA scope and thus you do not have the built-in config.
|
||||
|
||||
Once that's setup, you can run `yarn run image-snapshots` (or `npm run image-snapshots`).
|
||||
|
||||
### Reminder
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "Image snappshots addition to StoryShots base on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -25,11 +25,11 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@storybook/node-logger": "4.0.0-rc.6",
|
||||
"@storybook/node-logger": "4.1.0-alpha.1",
|
||||
"jest-image-snapshot": "^2.6.0",
|
||||
"puppeteer": "^1.9.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "4.0.0-alpha.16"
|
||||
"@storybook/addon-storyshots": "4.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,6 +19,7 @@ const defaultConfig = {
|
||||
beforeScreenshot: noop,
|
||||
getGotoOptions: noop,
|
||||
customizePage: asyncNoop,
|
||||
customBrowser: undefined,
|
||||
};
|
||||
|
||||
export const imageSnapshot = (customConfig = {}) => {
|
||||
@ -30,10 +31,16 @@ export const imageSnapshot = (customConfig = {}) => {
|
||||
beforeScreenshot,
|
||||
getGotoOptions,
|
||||
customizePage,
|
||||
customBrowser,
|
||||
} = { ...defaultConfig, ...customConfig };
|
||||
|
||||
let browser; // holds ref to browser. (ie. Chrome)
|
||||
let page; // Hold ref to the page to screenshot.
|
||||
|
||||
if (customBrowser) {
|
||||
browser = customBrowser;
|
||||
}
|
||||
|
||||
const testFn = async ({ context }) => {
|
||||
const { kind, framework, story } = context;
|
||||
if (framework === 'rn') {
|
||||
@ -73,14 +80,22 @@ export const imageSnapshot = (customConfig = {}) => {
|
||||
expect(image).toMatchImageSnapshot(getMatchOptions({ context, url }));
|
||||
};
|
||||
|
||||
testFn.afterAll = () => browser.close();
|
||||
testFn.afterAll = () => {
|
||||
if (customBrowser) {
|
||||
return page.close();
|
||||
}
|
||||
|
||||
return browser.close();
|
||||
};
|
||||
|
||||
testFn.beforeAll = async () => {
|
||||
// add some options "no-sandbox" to make it work properly on some Linux systems as proposed here: https://github.com/Googlechrome/puppeteer/issues/290#issuecomment-322851507
|
||||
browser = await puppeteer.launch({
|
||||
args: ['--no-sandbox ', '--disable-setuid-sandbox'],
|
||||
executablePath: chromeExecutablePath,
|
||||
});
|
||||
if (!browser) {
|
||||
// add some options "no-sandbox" to make it work properly on some Linux systems as proposed here: https://github.com/Googlechrome/puppeteer/issues/290#issuecomment-322851507
|
||||
browser = await puppeteer.launch({
|
||||
args: ['--no-sandbox ', '--disable-setuid-sandbox'],
|
||||
executablePath: chromeExecutablePath,
|
||||
});
|
||||
}
|
||||
|
||||
page = await browser.newPage();
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "Stories addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -25,13 +25,13 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@storybook/addons": "4.0.0-rc.6",
|
||||
"@storybook/components": "4.0.0-rc.6",
|
||||
"@storybook/addons": "4.1.0-alpha.1",
|
||||
"@storybook/components": "4.1.0-alpha.1",
|
||||
"estraverse": "^4.2.0",
|
||||
"loader-utils": "^1.1.0",
|
||||
"prettier": "^1.14.3",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-syntax-highlighter": "^9.0.1"
|
||||
"react-syntax-highlighter": "^10.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { RoutedLink, monoFonts } from '@storybook/components';
|
||||
import jsx from 'react-syntax-highlighter/languages/prism/jsx';
|
||||
import { darcula } from 'react-syntax-highlighter/styles/prism';
|
||||
import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light';
|
||||
import { createElement } from 'react-syntax-highlighter';
|
||||
import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
|
||||
import { darcula } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||
import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
|
||||
import createElement from 'react-syntax-highlighter/dist/esm/create-element';
|
||||
import { EVENT_ID } from './events';
|
||||
|
||||
// TODO: take from theme
|
||||
@ -29,7 +29,7 @@ const highlighterTheme = {
|
||||
},
|
||||
};
|
||||
|
||||
registerLanguage('jsx', jsx);
|
||||
SyntaxHighlighter.registerLanguage('jsx', jsx);
|
||||
|
||||
const styles = {
|
||||
story: {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"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-rc.6",
|
||||
"@storybook/components": "4.0.0-rc.6",
|
||||
"@storybook/core-events": "4.0.0-rc.6",
|
||||
"@storybook/addons": "4.1.0-alpha.1",
|
||||
"@storybook/components": "4.1.0-alpha.1",
|
||||
"@storybook/core-events": "4.1.0-alpha.1",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2",
|
||||
"util-deprecate": "^1.0.2"
|
||||
|
||||
@ -25,8 +25,9 @@ const Container = styled.div({
|
||||
});
|
||||
Container.displayName = 'Container';
|
||||
|
||||
const getDefaultViewport = (viewports, candidateViewport) =>
|
||||
candidateViewport in viewports ? candidateViewport : Object.keys(viewports)[0];
|
||||
function getDefaultViewport(viewports, candidateViewport) {
|
||||
return candidateViewport in viewports ? candidateViewport : Object.keys(viewports)[0];
|
||||
}
|
||||
|
||||
const getViewports = viewports =>
|
||||
Object.keys(viewports).length > 0 ? viewports : INITIAL_VIEWPORTS;
|
||||
@ -62,7 +63,6 @@ export class Panel extends Component {
|
||||
|
||||
componentDidMount() {
|
||||
const { channel, api } = this.props;
|
||||
const { defaultViewport } = this.state;
|
||||
|
||||
this.iframe = document.getElementById(storybookIframe);
|
||||
|
||||
@ -71,6 +71,7 @@ export class Panel extends Component {
|
||||
channel.on(SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.setStoryDefaultViewport);
|
||||
|
||||
this.unsubscribeFromOnStory = api.onStory(() => {
|
||||
const { defaultViewport } = this.state;
|
||||
this.setStoryDefaultViewport(defaultViewport);
|
||||
});
|
||||
}
|
||||
@ -98,7 +99,7 @@ export class Panel extends Component {
|
||||
};
|
||||
|
||||
configure = (options = Panel.defaultOptions) => {
|
||||
const viewports = getViewports(options.viewports);
|
||||
const viewports = getViewports(options.viewports || {});
|
||||
const defaultViewport = getDefaultViewport(viewports, options.defaultViewport);
|
||||
|
||||
this.setState(
|
||||
|
||||
@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
|
||||
|
||||
```sh
|
||||
cd my-angular-app
|
||||
npx -p @storybook/cli@rc sb init
|
||||
npx -p @storybook/cli sb init
|
||||
```
|
||||
|
||||
For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -29,28 +29,31 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@storybook/core": "4.0.0-rc.6",
|
||||
"@storybook/node-logger": "4.0.0-rc.6",
|
||||
"@storybook/core": "4.1.0-alpha.1",
|
||||
"@storybook/node-logger": "4.1.0-alpha.1",
|
||||
"angular2-template-loader": "^0.6.2",
|
||||
"core-js": "^2.5.7",
|
||||
"fork-ts-checker-webpack-plugin": "^0.4.10",
|
||||
"fork-ts-checker-webpack-plugin": "^0.4.14",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.6.0",
|
||||
"react-dom": "^16.6.0",
|
||||
"sass-loader": "^7.1.0",
|
||||
"ts-loader": "^5.2.2",
|
||||
"tsconfig-paths-webpack-plugin": "^3.2.0",
|
||||
"webpack": "^4.23.1",
|
||||
"zone.js": "^0.8.26"
|
||||
"webpack": "^4.23.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular-devkit/core": "^0.6.1",
|
||||
"@angular-devkit/core": "^0.6.1 || >=7.0.0",
|
||||
"@angular/common": ">=6.0.0",
|
||||
"@angular/compiler": ">=6.0.0",
|
||||
"@angular/core": ">=6.0.0",
|
||||
"@angular/forms": ">=6.0.0",
|
||||
"@angular/platform-browser": ">=6.0.0",
|
||||
"@angular/platform-browser-dynamic": ">=6.0.0",
|
||||
"babel-loader": "^7.0.0 || ^8.0.0"
|
||||
"babel-loader": "^7.0.0 || ^8.0.0",
|
||||
"zone.js": "^0.8.26"
|
||||
},
|
||||
"devDependencies": {
|
||||
"zone.js": "^0.8.26"
|
||||
}
|
||||
}
|
||||
|
||||
9
app/angular/src/server/angular-cli_config.js
vendored
9
app/angular/src/server/angular-cli_config.js
vendored
@ -126,6 +126,15 @@ export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions
|
||||
plugins: [
|
||||
new TsconfigPathsPlugin({
|
||||
configFile: cliWebpackConfigOptions.buildOptions.tsConfig,
|
||||
// After ng build my-lib the default value of 'main' in the package.json is 'umd'
|
||||
// This causes that you cannot import components directly from dist
|
||||
// https://github.com/angular/angular-cli/blob/9f114aee1e009c3580784dd3bb7299bdf4a5918c/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/browser.ts#L68
|
||||
mainFields: [
|
||||
...(cliWebpackConfigOptions.supportES2015 ? ['es2015'] : []),
|
||||
'browser',
|
||||
'module',
|
||||
'main',
|
||||
],
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
|
||||
|
||||
```sh
|
||||
cd my-ember-app
|
||||
npx -p @storybook/cli@rc sb init
|
||||
npx -p @storybook/cli sb init
|
||||
```
|
||||
|
||||
For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/ember",
|
||||
"publishConfig": {
|
||||
@ -26,8 +26,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@ember/test-helpers": "^0.7.27",
|
||||
"@storybook/core": "4.0.0-rc.6",
|
||||
"@ember/test-helpers": "^1.0.0",
|
||||
"@storybook/core": "4.1.0-alpha.1",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.6.0",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Storybook for HTML <sup>alpha</sup>
|
||||
# Storybook for HTML
|
||||
|
||||
---
|
||||
|
||||
@ -14,7 +14,7 @@ So you can develop UI components in isolation without worrying about app specifi
|
||||
|
||||
```sh
|
||||
cd my-app
|
||||
npx -p @storybook/cli@rc sb init -t html
|
||||
npx -p @storybook/cli sb init -t html
|
||||
```
|
||||
|
||||
For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -28,7 +28,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@storybook/core": "4.0.0-rc.6",
|
||||
"@storybook/core": "4.1.0-alpha.1",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"html-loader": "^0.5.5",
|
||||
|
||||
@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
|
||||
|
||||
```sh
|
||||
cd my-marko-app
|
||||
npx -p @storybook/cli@rc sb init
|
||||
npx -p @storybook/cli sb init
|
||||
```
|
||||
|
||||
For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/marko",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -29,7 +29,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@storybook/core": "4.0.0-rc.6",
|
||||
"@storybook/core": "4.1.0-alpha.1",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"marko-loader": "^1.3.3",
|
||||
|
||||
@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
|
||||
|
||||
```sh
|
||||
cd my-mithril-app
|
||||
npx -p @storybook/cli@rc sb init
|
||||
npx -p @storybook/cli sb init
|
||||
```
|
||||
|
||||
For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/mithril",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"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.1.2",
|
||||
"@storybook/core": "4.0.0-rc.6",
|
||||
"@storybook/core": "4.1.0-alpha.1",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.6.0",
|
||||
|
||||
@ -14,7 +14,7 @@ So you can develop UI components in isolation without worrying about app specifi
|
||||
|
||||
```sh
|
||||
cd my-polymer-app
|
||||
npx -p @storybook/cli@rc sb init
|
||||
npx -p @storybook/cli sb init
|
||||
```
|
||||
|
||||
For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/polymer",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"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.1.2",
|
||||
"@storybook/core": "4.0.0-rc.6",
|
||||
"@storybook/core": "4.1.0-alpha.1",
|
||||
"@webcomponents/webcomponentsjs": "^1.2.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -25,6 +25,7 @@ configure(() => {
|
||||
|
||||
const StorybookUI = getStorybookUI();
|
||||
export default StorybookUI;
|
||||
```
|
||||
|
||||
**storybook/rn-addons.js**
|
||||
```
|
||||
|
||||
@ -42,6 +42,7 @@ Then write your first story in the `stories` directory like this:
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
import React from 'react';
|
||||
import { View, Text } from 'react-native';
|
||||
|
||||
const style = {
|
||||
@ -56,7 +57,7 @@ const CenteredView = ({ children }) => (
|
||||
</View>
|
||||
);
|
||||
|
||||
storiesOf('CenteredView')
|
||||
storiesOf('CenteredView', module)
|
||||
.add('default view', () => (
|
||||
<CenteredView>
|
||||
<Text>Hello Storybook</Text>
|
||||
@ -68,6 +69,15 @@ Finally replace your app entry with
|
||||
```js
|
||||
import './storybook';
|
||||
```
|
||||
|
||||
For example, if your entry app is named App.js/index.js (Expo/Vanilla). You can replace it with the following.
|
||||
|
||||
```
|
||||
import StorybookUI from './storybook';
|
||||
|
||||
export default StorybookUI;
|
||||
```
|
||||
|
||||
If you cannot replace your entry point just make sure that the component exported from `./storybook` is displayed
|
||||
somewhere in your app. `StorybookUI` is simply a RN `View` component that can be embedded anywhere in your
|
||||
RN application, e.g. on a tab or within an admin screen.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-native",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "A better way to develop React Native Components for your app",
|
||||
"keywords": [
|
||||
"react",
|
||||
@ -28,12 +28,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-rc.6",
|
||||
"@storybook/channel-websocket": "4.0.0-rc.6",
|
||||
"@storybook/channels": "4.0.0-rc.6",
|
||||
"@storybook/core": "4.0.0-rc.6",
|
||||
"@storybook/core-events": "4.0.0-rc.6",
|
||||
"@storybook/ui": "4.0.0-rc.6",
|
||||
"@storybook/addons": "4.1.0-alpha.1",
|
||||
"@storybook/channel-websocket": "4.1.0-alpha.1",
|
||||
"@storybook/channels": "4.1.0-alpha.1",
|
||||
"@storybook/core": "4.1.0-alpha.1",
|
||||
"@storybook/core-events": "4.1.0-alpha.1",
|
||||
"@storybook/ui": "4.1.0-alpha.1",
|
||||
"babel-loader": "^8.0.4",
|
||||
"babel-plugin-macros": "^2.4.2",
|
||||
"babel-plugin-syntax-async-functions": "^6.13.0",
|
||||
@ -58,7 +58,7 @@
|
||||
"lazy-universal-dotenv": "^2.0.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"raw-loader": "^0.5.1",
|
||||
"react-dev-utils": "^6.0.5",
|
||||
"react-dev-utils": "^6.1.0",
|
||||
"react-native-swipe-gestures": "^1.0.2",
|
||||
"shelljs": "^0.8.2",
|
||||
"url-parse": "^1.4.3",
|
||||
|
||||
@ -12,7 +12,7 @@ The `storybook` CLI tool can be used to add Storybook to your React Native app.
|
||||
|
||||
```shell
|
||||
cd my-rn-app
|
||||
npx -p @storybook/cli@rc sb init
|
||||
npx -p @storybook/cli sb init
|
||||
```
|
||||
|
||||
The next thing you need to do is make Storybook UI visible in your app.
|
||||
@ -121,6 +121,11 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi
|
||||
-- should the ui be closed initialy.
|
||||
tabOpen: Number (0)
|
||||
-- which tab should be open. -1 Navigator, 0 Preview, 1 Addons
|
||||
initialSelection: Object (null)
|
||||
-- initialize storybook with a specific story. In case a valid object is passed, it will take precedence over `shouldPersistSelection. ex: `{ kind: 'Knobs', story: 'with knobs' }`
|
||||
shouldPersistSelection: Boolean (true)
|
||||
-- initialize storybook with the last selected story.`
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
1
app/react-native/src/bin/storybook-start.js
vendored
1
app/react-native/src/bin/storybook-start.js
vendored
@ -5,6 +5,7 @@ import program from 'commander';
|
||||
import Server from '../server';
|
||||
|
||||
program
|
||||
.allowUnknownOption()
|
||||
.option('-h, --host <host>', 'host to listen on', 'localhost')
|
||||
.option('-p, --port <port>', 'port to listen on', 7007)
|
||||
.option('-s, --secured', 'whether server is running on https')
|
||||
|
||||
@ -63,6 +63,11 @@ export default class OnDeviceUI extends PureComponent {
|
||||
};
|
||||
|
||||
handleStoryChange = selection => {
|
||||
const { selection: prevSelection } = this.state;
|
||||
if (selection.kind === prevSelection.kind && selection.story === prevSelection.story) {
|
||||
this.handleToggleTab(PREVIEW);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
selection: {
|
||||
kind: selection.kind,
|
||||
@ -124,6 +129,7 @@ export default class OnDeviceUI extends PureComponent {
|
||||
<Animated.View style={previewWrapperStyles}>
|
||||
<Animated.View style={previewStyles}>
|
||||
<TouchableOpacity
|
||||
accessible={false}
|
||||
style={style.flex}
|
||||
disabled={tabOpen === PREVIEW}
|
||||
onPress={this.handleOpenPreview}
|
||||
|
||||
43
app/react-native/src/preview/index.js
vendored
43
app/react-native/src/preview/index.js
vendored
@ -1,7 +1,7 @@
|
||||
/* eslint-disable react/no-this-in-sfc, no-underscore-dangle */
|
||||
|
||||
import React from 'react';
|
||||
import { NativeModules } from 'react-native';
|
||||
import { AsyncStorage, NativeModules } from 'react-native';
|
||||
import parse from 'url-parse';
|
||||
import addons from '@storybook/addons';
|
||||
|
||||
@ -12,6 +12,8 @@ import { StoryStore, ClientApi } from '@storybook/core/client';
|
||||
import OnDeviceUI from './components/OnDeviceUI';
|
||||
import StoryView from './components/StoryView';
|
||||
|
||||
const STORAGE_KEY = 'lastOpenedStory';
|
||||
|
||||
export default class Preview {
|
||||
constructor() {
|
||||
this._addons = {};
|
||||
@ -65,7 +67,7 @@ export default class Preview {
|
||||
const port = params.port !== false ? `:${params.port || 7007}` : '';
|
||||
|
||||
const query = params.query || '';
|
||||
const { secured } = params;
|
||||
const { initialSelection, secured, shouldPersistSelection } = params;
|
||||
const websocketType = secured ? 'wss' : 'ws';
|
||||
const httpType = secured ? 'https' : 'http';
|
||||
|
||||
@ -75,7 +77,7 @@ export default class Preview {
|
||||
url,
|
||||
async: onDeviceUI,
|
||||
onError: () => {
|
||||
this._setInitialStory();
|
||||
this._setInitialStory(initialSelection, shouldPersistSelection);
|
||||
|
||||
setInitialStory = true;
|
||||
},
|
||||
@ -133,8 +135,20 @@ export default class Preview {
|
||||
channel.emit(Events.GET_CURRENT_STORY);
|
||||
}
|
||||
|
||||
_setInitialStory = () => {
|
||||
const story = this._getInitialStory();
|
||||
_setInitialStory = async (initialSelection, shouldPersistSelection = true) => {
|
||||
let story = this._getInitialStory();
|
||||
|
||||
if (initialSelection && this._checkStory(initialSelection)) {
|
||||
story = initialSelection;
|
||||
} else if (shouldPersistSelection) {
|
||||
const value = await AsyncStorage.getItem(STORAGE_KEY);
|
||||
const previousStory = JSON.parse(value);
|
||||
|
||||
if (this._checkStory(previousStory)) {
|
||||
story = previousStory;
|
||||
}
|
||||
}
|
||||
|
||||
if (story) {
|
||||
this._selectStory(story);
|
||||
}
|
||||
@ -142,6 +156,7 @@ export default class Preview {
|
||||
|
||||
_getInitialStory = () => {
|
||||
const dump = this._stories.dumpStoryBook();
|
||||
|
||||
const nonEmptyKind = dump.find(kind => kind.stories.length > 0);
|
||||
if (nonEmptyKind) {
|
||||
return this._getStory({ kind: nonEmptyKind.kind, story: nonEmptyKind.stories[0] });
|
||||
@ -158,6 +173,24 @@ export default class Preview {
|
||||
|
||||
_selectStory(selection) {
|
||||
const channel = addons.getChannel();
|
||||
|
||||
channel.emit(Events.SELECT_STORY, this._getStory(selection));
|
||||
AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(selection));
|
||||
}
|
||||
|
||||
_checkStory(selection) {
|
||||
if (!selection || typeof selection !== 'object' || !selection.kind || !selection.story) {
|
||||
console.warn('invalid storybook selection'); // eslint-disable-line no-console
|
||||
return null;
|
||||
}
|
||||
|
||||
const story = this._getStory(selection);
|
||||
|
||||
if (story.storyFn === null) {
|
||||
console.warn('invalid storybook selection'); // eslint-disable-line no-console
|
||||
return null;
|
||||
}
|
||||
|
||||
return story;
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
|
||||
|
||||
```sh
|
||||
cd my-react-app
|
||||
npx -p @storybook/cli@rc sb init
|
||||
npx -p @storybook/cli sb init
|
||||
```
|
||||
|
||||
For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -32,15 +32,15 @@
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/core": "4.0.0-rc.6",
|
||||
"@storybook/node-logger": "4.0.0-rc.6",
|
||||
"@storybook/core": "4.1.0-alpha.1",
|
||||
"@storybook/node-logger": "4.1.0-alpha.1",
|
||||
"babel-plugin-react-docgen": "^2.0.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"lodash": "^4.17.11",
|
||||
"mini-css-extract-plugin": "^0.4.4",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-dev-utils": "^6.0.5",
|
||||
"react-dev-utils": "^6.1.0",
|
||||
"semver": "^5.6.0",
|
||||
"webpack": "^4.23.1"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { window } from 'global';
|
||||
|
||||
if (window.parent !== window) {
|
||||
if (window && window.parent !== window) {
|
||||
try {
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
@ -8,4 +8,7 @@ if (window.parent !== window) {
|
||||
// The above line can throw if we do not have access to the parent frame -- i.e. cross origin
|
||||
}
|
||||
}
|
||||
window.STORYBOOK_ENV = 'react';
|
||||
|
||||
if (window) {
|
||||
window.STORYBOOK_ENV = 'react';
|
||||
}
|
||||
|
||||
24
app/react/src/client/preview/index.test.js
Normal file
24
app/react/src/client/preview/index.test.js
Normal file
@ -0,0 +1,24 @@
|
||||
/* eslint-disable global-require */
|
||||
describe('preview', () => {
|
||||
afterEach(() => {
|
||||
jest.resetModules();
|
||||
});
|
||||
|
||||
const isFunction = value => typeof value === 'function';
|
||||
|
||||
it('should return the client api in a browser environment', () => {
|
||||
const api = require('.');
|
||||
expect(Object.keys(api).length).toBeGreaterThan(0);
|
||||
expect(Object.values(api).every(isFunction)).toEqual(true);
|
||||
});
|
||||
|
||||
it('should return the client api in a node.js environment', () => {
|
||||
jest.mock('global', () => ({
|
||||
document: undefined,
|
||||
window: undefined,
|
||||
}));
|
||||
const api = require('.');
|
||||
expect(Object.keys(api).length).toBeGreaterThan(0);
|
||||
expect(Object.values(api).every(isFunction)).toEqual(true);
|
||||
});
|
||||
});
|
||||
@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
|
||||
import { stripIndents } from 'common-tags';
|
||||
import isReactRenderable from './element_check';
|
||||
|
||||
const rootEl = document.getElementById('root');
|
||||
const rootEl = document ? document.getElementById('root') : null;
|
||||
|
||||
function render(node, el) {
|
||||
ReactDOM.render(
|
||||
|
||||
@ -1,12 +1,25 @@
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import semver from 'semver';
|
||||
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
|
||||
|
||||
import { normalizeCondition } from 'webpack/lib/RuleSet';
|
||||
|
||||
let reactScriptsPath;
|
||||
function getReactScriptsPath() {
|
||||
if (reactScriptsPath) return reactScriptsPath;
|
||||
const appDirectory = fs.realpathSync(process.cwd());
|
||||
const reactScriptsScriptPath = fs.realpathSync(
|
||||
path.join(appDirectory, '/node_modules/.bin/react-scripts')
|
||||
);
|
||||
reactScriptsPath = path.join(reactScriptsScriptPath, '../..');
|
||||
return reactScriptsPath;
|
||||
}
|
||||
|
||||
export function isReactScriptsInstalled() {
|
||||
try {
|
||||
// eslint-disable-next-line global-require, import/no-extraneous-dependencies
|
||||
const reactScriptsJson = require('react-scripts/package.json');
|
||||
// eslint-disable-next-line global-require, import/no-dynamic-require
|
||||
const reactScriptsJson = require(path.join(getReactScriptsPath(), 'package.json'));
|
||||
if (semver.lt(reactScriptsJson.version, '2.0.0')) return false;
|
||||
return true;
|
||||
} catch (e) {
|
||||
@ -42,12 +55,12 @@ export function getStyleRules(rules) {
|
||||
|
||||
export function getCraWebpackConfig(mode) {
|
||||
if (mode === 'production') {
|
||||
// eslint-disable-next-line global-require, import/no-extraneous-dependencies
|
||||
return require('react-scripts/config/webpack.config.prod');
|
||||
// eslint-disable-next-line global-require, import/no-dynamic-require
|
||||
return require(path.join(getReactScriptsPath(), 'config/webpack.config.prod'));
|
||||
}
|
||||
|
||||
// eslint-disable-next-line global-require, import/no-extraneous-dependencies
|
||||
return require('react-scripts/config/webpack.config.dev');
|
||||
// eslint-disable-next-line global-require, import/no-dynamic-require
|
||||
return require(path.join(getReactScriptsPath(), 'config/webpack.config.dev'));
|
||||
}
|
||||
|
||||
export function applyCRAWebpackConfig(baseConfig) {
|
||||
@ -64,14 +77,7 @@ export function applyCRAWebpackConfig(baseConfig) {
|
||||
// Add css minification for production
|
||||
const plugins = [...baseConfig.plugins];
|
||||
if (baseConfig.mode === 'production') {
|
||||
plugins.push(
|
||||
new MiniCssExtractPlugin({
|
||||
// Options similar to the same options in webpackOptions.output
|
||||
// both options are optional
|
||||
filename: 'static/css/[name].[contenthash:8].css',
|
||||
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
|
||||
})
|
||||
);
|
||||
plugins.push(new MiniCssExtractPlugin());
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Storybook for Riot <sup>alpha</sup>
|
||||
# Storybook for Riot
|
||||
|
||||
---
|
||||
|
||||
@ -14,7 +14,7 @@ So you can develop UI components in isolation without worrying about app specifi
|
||||
|
||||
```sh
|
||||
cd my-riot-app
|
||||
npx -p @storybook/cli@rc sb init
|
||||
npx -p @storybook/cli sb init
|
||||
```
|
||||
|
||||
For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/riot",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -28,7 +28,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@storybook/core": "4.0.0-rc.6",
|
||||
"@storybook/core": "4.1.0-alpha.1",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"raw-loader": "^0.5.1",
|
||||
|
||||
@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
|
||||
|
||||
```sh
|
||||
cd my-svelte-app
|
||||
npx -p @storybook/cli@rc sb init
|
||||
npx -p @storybook/cli sb init
|
||||
```
|
||||
|
||||
For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"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-rc.6",
|
||||
"@storybook/core": "4.1.0-alpha.1",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.6.0",
|
||||
|
||||
@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
|
||||
|
||||
```sh
|
||||
cd my-vue-app
|
||||
npx -p @storybook/cli@rc sb init
|
||||
npx -p @storybook/cli sb init
|
||||
```
|
||||
|
||||
For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue",
|
||||
"version": "4.0.0-rc.6",
|
||||
"version": "4.1.0-alpha.1",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -29,7 +29,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@storybook/core": "4.0.0-rc.6",
|
||||
"@storybook/core": "4.1.0-alpha.1",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.6.0",
|
||||
|
||||
@ -10,7 +10,7 @@ const Versions = {
|
||||
MAJOR: 'MAJOR',
|
||||
};
|
||||
|
||||
const branchVersion = Versions.PATCH;
|
||||
const branchVersion = Versions.MINOR;
|
||||
|
||||
const checkRequiredLabels = labels => {
|
||||
const forbiddenLabels = flatten([
|
||||
|
||||
@ -19,8 +19,8 @@
|
||||
"prepare": "npm run snyk-protect"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "^3.4.11",
|
||||
"@storybook/addon-links": "^3.4.11",
|
||||
"@storybook/addon-actions": "^4.0.0",
|
||||
"@storybook/addon-links": "^4.0.4",
|
||||
"@storybook/addons": "^3.4.11",
|
||||
"@storybook/react": "^3.4.11",
|
||||
"babel-loader": "^6.4.1",
|
||||
@ -28,7 +28,7 @@
|
||||
"common-tags": "^1.8.0",
|
||||
"gatsby": "^1.9.279",
|
||||
"gatsby-link": "^1.6.45",
|
||||
"gatsby-plugin-sharp": "^2.0.7",
|
||||
"gatsby-plugin-sharp": "^2.0.12",
|
||||
"gatsby-remark-autolink-headers": "^1.4.19",
|
||||
"gatsby-remark-copy-linked-files": "^1.5.37",
|
||||
"gatsby-remark-images": "^1.5.67",
|
||||
@ -36,7 +36,7 @@
|
||||
"gatsby-source-filesystem": "^1.5.39",
|
||||
"gatsby-transformer-remark": "^1.7.44",
|
||||
"global": "^4.3.2",
|
||||
"highlight.js": "^9.13.0",
|
||||
"highlight.js": "^9.13.1",
|
||||
"lodash": "^4.17.11",
|
||||
"marked": "^0.5.1",
|
||||
"prop-types": "^15.6.2",
|
||||
@ -46,8 +46,8 @@
|
||||
"react-helmet": "^5.2.0",
|
||||
"react-router": "^4.3.1",
|
||||
"react-stack-grid": "^0.7.1",
|
||||
"sitemap": "^2.0.1",
|
||||
"snyk": "^1.104.0"
|
||||
"sitemap": "^2.1.0",
|
||||
"snyk": "^1.108.0"
|
||||
},
|
||||
"snyk": true
|
||||
}
|
||||
|
||||
@ -24,11 +24,9 @@ class MainLinks extends React.Component {
|
||||
<h2>Try Now</h2>
|
||||
<pre>
|
||||
<code>
|
||||
npm i -g @storybook/cli
|
||||
cd my-react-vue-angular-app
|
||||
<br />
|
||||
cd my-react-app
|
||||
<br />
|
||||
getstorybook
|
||||
npx -p @storybook/cli sb init
|
||||
<br />
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
@ -11,34 +11,34 @@ This is a list of available addons for Storybook.
|
||||
|
||||
With a11y you can test compliance of your stories with web accessibility standards.
|
||||
|
||||
### [Actions](https://github.com/storybooks/storybook/tree/release/3.4/addons/actions)
|
||||
### [Actions](https://github.com/storybooks/storybook/tree/master/addons/actions)
|
||||
|
||||
With actions, you can inspect events related to your components. This is pretty neat when you are manually testing your components.
|
||||
|
||||
Also, you can think of this as a way to document events in your components.
|
||||
|
||||
### [Links](https://github.com/storybooks/storybook/tree/release/3.4/addons/links)
|
||||
### [Links](https://github.com/storybooks/storybook/tree/master/addons/links)
|
||||
|
||||
With links you can link stories together. With that, you can build demos and prototypes directly from your UI components.
|
||||
|
||||
### [Knobs](https://github.com/storybooks/storybook/tree/release/3.4/addons/knobs)
|
||||
### [Knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs)
|
||||
|
||||
Knobs allow you to edit React props dynamically using the Storybook UI.
|
||||
You can also use Knobs as dynamic variables inside your stories.
|
||||
|
||||
### [Notes](https://github.com/storybooks/storybook/tree/release/3.4/addons/notes)
|
||||
### [Notes](https://github.com/storybooks/storybook/tree/master/addons/notes)
|
||||
|
||||
With this addon, you can write notes for each story in your component. This is pretty useful when you are working with a team.
|
||||
|
||||
### [Info](https://github.com/storybooks/storybook/tree/release/3.4/addons/info)
|
||||
### [Info](https://github.com/storybooks/storybook/tree/master/addons/info)
|
||||
|
||||
If you are using Storybook as a style guide, then this addon will help you to build a nice-looking style guide with docs, automatic sample source code with a PropType explorer.
|
||||
|
||||
### [Options](https://github.com/storybooks/storybook/tree/release/3.4/addons/options)
|
||||
### [Options](https://github.com/storybooks/storybook/tree/master/addons/options)
|
||||
|
||||
The Storybook webapp UI can be customised with this addon. It can be used to change the header, show/hide various UI elements and to enable full-screen mode by default.
|
||||
|
||||
### [Storyshots](https://github.com/storybooks/storybook/tree/release/3.4/addons/storyshots)
|
||||
### [Storyshots](https://github.com/storybooks/storybook/tree/master/addons/storyshots)
|
||||
|
||||
Storyshots is a way to automatically jest-snapshot all your stories. [More info here](/testing/structural-testing/).
|
||||
|
||||
@ -46,18 +46,22 @@ Storyshots is a way to automatically jest-snapshot all your stories. [More info
|
||||
|
||||
Redirects console output (logs, errors, warnings) into Action Logger Panel. `withConsole` decorator notifies from what stories logs are coming.
|
||||
|
||||
### [Backgrounds](https://github.com/storybooks/storybook/tree/release/3.4/addons/background)
|
||||
### [Backgrounds](https://github.com/storybooks/storybook/tree/master/addons/background)
|
||||
|
||||
With this addon, you can switch between background colors and background images for your preview components. It is really helpful for styleguides.
|
||||
|
||||
### [Viewport](https://github.com/storybooks/storybook/tree/release/3.4/addons/viewport)
|
||||
### [Viewport](https://github.com/storybooks/storybook/tree/master/addons/viewport)
|
||||
|
||||
Viewport allows your stories to be displayed in different sizes and layouts in [Storybook](https://storybook.js.org). This helps build responsive components inside of Storybook.
|
||||
Viewport allows your stories to be displayed in different sizes and layouts in [Storybook](https://storybook.js.org). This helps build responsive components inside of Storybook.
|
||||
|
||||
### [Google Analytics](https://github.com/storybooks/storybook/tree/master/addons/google-analytics)
|
||||
|
||||
Support google analytics in [Storybook](https://storybook.js.org)
|
||||
|
||||
### [Storysource](https://github.com/storybooks/storybook/tree/master/addons/storysource)
|
||||
|
||||
Show story source in the addon panel.
|
||||
|
||||
## Community Addons
|
||||
|
||||
You need to install these addons directly from NPM in order to use them.
|
||||
@ -146,13 +150,17 @@ reset state.
|
||||
Convert stories into Sketch 💎 symbols.
|
||||
|
||||
### [styled components theme](https://github.com/echoulen/storybook-addon-styled-component-theme)
|
||||
|
||||
styled components theme selection.
|
||||
|
||||
### [AngularJS](https://github.com/titonobre/storybook-addon-angularjs)
|
||||
|
||||
Create stories with AngularJS(1.x) components.
|
||||
|
||||
### [JSS theme](https://github.com/vertexbz/storybook-addon-jss-theme)
|
||||
|
||||
JSS theme selection.
|
||||
|
||||
### [React live edit](https://github.com/vertexbz/storybook-addon-react-live-edit)
|
||||
|
||||
Provides live react story editing and preview.
|
||||
|
||||
@ -37,50 +37,20 @@ 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.
|
||||
> In order for your storybook to run properly be sure to be either run `ember serve` or `ember build` before running any storybook commands. Running `ember serve` before storybook will enable live reloading.
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"storybook": "start-storybook -p 9001 -s dist"
|
||||
"build-storybook": "ember build && build-storybook -p 9001 -s dist",
|
||||
"storybook": "ember serve & start-storybook -p 9001 -s dist"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 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}
|
||||
```
|
||||
Your environment will be preconfigured using `ember-cli-storybook`. This will add a `preview-head.html`, a `.env` and make sure that your environment is configured to work with live reload.
|
||||
|
||||
## Create the config file
|
||||
|
||||
|
||||
@ -31,11 +31,11 @@ npm i --save-dev @storybook/react
|
||||
|
||||
## Add react, react-dom, babel-core, and babel-loader
|
||||
|
||||
Make sure that you have `react`, `react-dom`, `babel-core`, and `babel-loader` in your dependencies as well because we list these as a peerDependency:
|
||||
Make sure that you have `react`, `react-dom`, `@babel/core`, and `babel-loader` in your dependencies as well because we list these as a peerDependency:
|
||||
|
||||
```sh
|
||||
npm i --save react react-dom
|
||||
npm i --save-dev babel-core
|
||||
npm i --save-dev @babel/core
|
||||
npm i --save-dev babel-loader
|
||||
```
|
||||
|
||||
|
||||
@ -3,8 +3,7 @@ id: 'live-examples'
|
||||
title: 'Live Examples'
|
||||
---
|
||||
|
||||
### 4.0.alpha
|
||||
> Note, this is an Alpha version. Some of the features still might not be released
|
||||
### 4.0
|
||||
|
||||
- [React Official](https://storybooks-official.netlify.com)
|
||||
- [Vue](https://storybooks-vue.netlify.com/)
|
||||
@ -18,12 +17,14 @@ title: 'Live Examples'
|
||||
- [Ember](https://storybooks-ember.netlify.com/)
|
||||
|
||||
### 3.4
|
||||
|
||||
- [React Official](https://release-3-4--storybooks-official.netlify.com)
|
||||
- [Vue](https://release-3-4--storybooks-vue.netlify.com/)
|
||||
- [Angular](https://release-3-4--storybooks-angular.netlify.com/)
|
||||
- [Polymer](https://release-3-4--storybooks-polymer.netlify.com/)
|
||||
|
||||
### 3.3
|
||||
|
||||
- [React Official](https://release-3-3--storybooks-official.netlify.com)
|
||||
- [Vue](https://release-3-3--storybooks-vue.netlify.com/)
|
||||
- [Angular](https://release-3-3--storybooks-angular.netlify.com/)
|
||||
|
||||
@ -10,13 +10,13 @@ Get started using the automated command line tool. This command adds a set of bo
|
||||
|
||||
```sh
|
||||
cd my-project-directory
|
||||
npx -p @storybook/cli@rc sb init
|
||||
npx -p @storybook/cli sb init
|
||||
```
|
||||
|
||||
The tool inspects your `package.json` to determine which view layer you're using. If you want to develop HTML snippets in storybook, we can't determine that automatically. So to install storybook for HTML, use the `--type` flag to force that the HTML project type:
|
||||
|
||||
```
|
||||
npx -p @storybook/cli@rc sb init --type html
|
||||
npx -p @storybook/cli sb init --type html
|
||||
```
|
||||
|
||||
To setup a project manually, take a look at the [Slow Start Guide](/basics/slow-start-guide/).
|
||||
@ -42,5 +42,6 @@ To learn more about what the Storybook CLI command `sb init` command does, have
|
||||
- [HTML](/basics/guide-html/)
|
||||
- [Svelte](/basics/guide-svelte/)
|
||||
- [Ember](/basics/guide-ember/)
|
||||
- [Riot](/basics/guide-riot/)
|
||||
|
||||
A tutorial is also available at [Learn Storybook](https://www.learnstorybook.com) for a step-by-step guide (only available for React).
|
||||
|
||||
@ -28,7 +28,7 @@ Here are some key features of Storybook's Babel configurations.
|
||||
|
||||
We have added ES2016 support with Babel for transpiling your JS code.
|
||||
In addition to that, we've added a few experimental features, like object spreading and async await.
|
||||
Check out our [source](https://github.com/storybooks/storybook/blob/master/lib/core/src/server/config/babel.js#L4) to learn more about these plugins.
|
||||
Check out our [source](https://github.com/storybooks/storybook/blob/master/lib/core/src/server/config/babel.dev.js) to learn more about these plugins.
|
||||
|
||||
### .babelrc support
|
||||
|
||||
|
||||
@ -86,4 +86,5 @@ storybook({
|
||||
port: 9009,
|
||||
configDir: './.storybook',
|
||||
});
|
||||
```
|
||||
```
|
||||
|
||||
|
||||
@ -57,7 +57,17 @@ overlayBackground: applied to overlay `background`, // 'linear-gradient(to botto
|
||||
All options above are single key options, in other words, they are variables, and their usage is fixed.
|
||||
|
||||
We will extend the theming ability in the future and possibly add more deep theming ability.
|
||||
Right now we have identified the most likely thing you might want to change the appearance of more then just 1 variable so we allow you the deep-theme the header using: `brand`.
|
||||
Right now we allow to deep theme: `stories nav panel`. Below are the varaiables that are used to deep theme `stories nav panel`.
|
||||
|
||||
storiesNav: deep theme for `stories nav`
|
||||
|
||||
```
|
||||
storiesNav: {
|
||||
backgroundColor: 'aqua',
|
||||
}
|
||||
```
|
||||
|
||||
brand: deep theme for brand including `brand name` and `shortcuts`
|
||||
|
||||
```
|
||||
brand: {
|
||||
@ -65,6 +75,69 @@ brand: {
|
||||
}
|
||||
```
|
||||
|
||||
brandLink: deep theme for only `brand name`
|
||||
|
||||
```
|
||||
brandLink: {
|
||||
border: 'none'
|
||||
}
|
||||
```
|
||||
|
||||
filter: deep thene for `stories filter section`
|
||||
|
||||
```
|
||||
filter: {
|
||||
backgroundColor: 'red',
|
||||
}
|
||||
```
|
||||
|
||||
treeHeader: deep thene for `tree header`
|
||||
|
||||
```
|
||||
treeHeader: {
|
||||
color: 'blue',
|
||||
}
|
||||
```
|
||||
|
||||
treeMenuHeader: deep thene for `tree menu header` of each menu
|
||||
|
||||
```
|
||||
treeMenuHeader: {
|
||||
color: 'aqua',
|
||||
}
|
||||
```
|
||||
|
||||
menuLink: deep thene for `menu link` of each story
|
||||
|
||||
```
|
||||
menuLink: {
|
||||
color: 'black',
|
||||
}
|
||||
```
|
||||
|
||||
activeMenuLink: deep thene for `active menu link` for the active story
|
||||
|
||||
```
|
||||
activeMenuLink: {
|
||||
fontWeight: 'light',
|
||||
}
|
||||
```
|
||||
|
||||
treeArrow: deep theme for `tree arrow`. This accepts an object which receives `height`, `width`, `base` and `wrapper`
|
||||
|
||||
```
|
||||
treeArrow: {
|
||||
height: 5,
|
||||
width: 5,
|
||||
base: {
|
||||
fontSize: '12px'
|
||||
},
|
||||
wrapper: {
|
||||
backgroundColor: 'white'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The styles provided here support everything [emotion](https://emotion.sh/) does. So that included things like nested selectors!
|
||||
|
||||
## Adding more theme variables for addons
|
||||
|
||||
@ -10,6 +10,7 @@ This is a central reference for using Storybook with Typescript.
|
||||
```bash
|
||||
yarn add -D typescript
|
||||
yarn add -D awesome-typescript-loader
|
||||
yarn add -D @types/storybook__react # typings
|
||||
yarn add -D @storybook/addon-info react-docgen-typescript-webpack-plugin # optional but recommended
|
||||
yarn add -D jest "@types/jest" ts-jest #testing
|
||||
```
|
||||
@ -18,7 +19,7 @@ We have had the best experience using `awesome-typescript-loader`, but other tut
|
||||
|
||||
## Setting up Typescript to work with Storybook
|
||||
|
||||
We first have to use the [custom Webpack config in full control mode, extending default configs](/configurations/custom-webpack-config/#full-control-mode--default):
|
||||
We first have to use the [custom Webpack config in full control mode, extending default configs](/configurations/custom-webpack-config/#full-control-mode--default) by creating a `webpack.config.js` file in our Storybook configuration directory (by default, it’s `.storybook`):
|
||||
|
||||
```js
|
||||
const path = require('path');
|
||||
@ -34,7 +35,7 @@ module.exports = (baseConfig, env, config) => {
|
||||
};
|
||||
```
|
||||
|
||||
The above example shows a working config with the TSDocgen plugin also integrated; remove the optional sections if you don't plan on using them.
|
||||
The above example shows a working Webpack config with the TSDocgen plugin also integrated; remove the optional sections if you don't plan on using them.
|
||||
|
||||
## `tsconfig.json`
|
||||
|
||||
@ -84,7 +85,7 @@ const req = require.context('../stories', true, /.stories.tsx$/);
|
||||
The very handy [Storybook Info addon](https://github.com/storybooks/storybook/tree/master/addons/info) autogenerates prop tables documentation for each component, however it doesn't work with Typescript types. The current solution is to use [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) to preprocess the Typescript files to give the Info addon what it needs. The webpack config above does this, and so for the rest of your stories you use it as per normal:
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import TicTacToeCell from './TicTacToeCell';
|
||||
@ -137,7 +138,7 @@ addDecorator({
|
||||
This can be used like so:
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { PrimaryButton } from './Button';
|
||||
@ -185,26 +186,17 @@ Note: Component docgen information can not be generated for components that are
|
||||
|
||||
The ts-jest [README](https://github.com/kulshekhar/ts-jest) explains pretty clearly how to get Jest to recognize TypeScript code.
|
||||
|
||||
This is an example package.json config for jest:
|
||||
This is an example `jest.config.js` file for jest:
|
||||
|
||||
```json
|
||||
"jest": {
|
||||
"transform": {
|
||||
".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
|
||||
},
|
||||
"mapCoverage": true,
|
||||
"testPathIgnorePatterns": [
|
||||
"/node_modules/",
|
||||
"/lib/"
|
||||
],
|
||||
"testRegex": "(/test/.*|\\.(test|spec))\\.(ts|tsx|js)$",
|
||||
"moduleFileExtensions": [
|
||||
"ts",
|
||||
"tsx",
|
||||
"js",
|
||||
"json"
|
||||
]
|
||||
}
|
||||
```js
|
||||
module.exports = {
|
||||
transform: {
|
||||
".(ts|tsx)": "ts-jest",
|
||||
},
|
||||
testPathIgnorePatterns: ["/node_modules/", "/lib/"],
|
||||
testRegex: "(/test/.*|\\.(test|spec))\\.(ts|tsx|js)$",
|
||||
moduleFileExtensions: ["ts", "tsx", "js", "json"],
|
||||
};
|
||||
```
|
||||
|
||||
## Building your Typescript Storybook
|
||||
|
||||
@ -159,3 +159,10 @@ trunx:
|
||||
demo: https://g14n.info/trunx
|
||||
source: https://github.com/fibo/trunx
|
||||
site: https://github.com/fibo/trunx
|
||||
auth0:
|
||||
thumbnail: cosmos.png
|
||||
title: Cosmos
|
||||
description: A Design System For Auth0 Products
|
||||
demo: https://auth0-cosmos.now.sh/sandbox/
|
||||
source: https://github.com/auth0/cosmos
|
||||
site: https://auth0-cosmos.now.sh/
|
||||
|
||||
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