mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 08:01:20 +08:00
Merge branch 'master' into master
This commit is contained in:
Filipp Riabchun
GitHub
commit
ea90cf618c
@ -184,22 +184,12 @@ jobs:
|
||||
at: .
|
||||
- run:
|
||||
name: Bootstrap
|
||||
command: yarn bootstrap --reactnative --reactnativeapp
|
||||
- run:
|
||||
name: Run React-Native example
|
||||
command: |
|
||||
cd examples/react-native-vanilla
|
||||
yarn storybook --smoke-test
|
||||
command: yarn bootstrap --reactnativeapp
|
||||
- run:
|
||||
name: Run React-Native-App example
|
||||
command: |
|
||||
cd examples/crna-kitchen-sink
|
||||
yarn storybook --smoke-test
|
||||
- run:
|
||||
name: Run React-Native unit tests
|
||||
command: |
|
||||
yarn test --coverage --runInBand --reactnative
|
||||
yarn coverage
|
||||
docs:
|
||||
<<: *defaults
|
||||
steps:
|
||||
|
||||
1
.github/CODEOWNERS
vendored
1
.github/CODEOWNERS
vendored
@ -31,7 +31,6 @@
|
||||
/examples/crna-kitchen-sink/ @Gongreg @danielduan
|
||||
/examples/official-storybook/ @hypnosphi @danielduan @UsulPro
|
||||
/examples/polymer-cli/ @naipath @igor-dv
|
||||
/examples/react-native-vanilla/ @tmeasday @danielduan
|
||||
/examples/vue-kitchen-sink/ @igor-dv @alexandrebodin
|
||||
/examples/svelte-kitchen-sink/ @plumpNation
|
||||
|
||||
|
||||
@ -33,6 +33,7 @@ object OpenSourceProjects_Storybook_Build_2 : BuildType({
|
||||
+:release/*
|
||||
+:master
|
||||
+:dependencies.io-*
|
||||
+:snyk-fix-*
|
||||
""".trimIndent()
|
||||
}
|
||||
retryBuild {
|
||||
@ -63,7 +64,10 @@ object OpenSourceProjects_Storybook_Build_2 : BuildType({
|
||||
param("github_oauth_user", "Hypnosphi")
|
||||
}
|
||||
merge {
|
||||
branchFilter = "+:dependencies.io-*"
|
||||
branchFilter = """
|
||||
+:dependencies.io-*
|
||||
+:snyk-fix-*
|
||||
""".trimIndent()
|
||||
destinationBranch = "<default>"
|
||||
commitMessage = "Merge branch '%teamcity.build.branch%'"
|
||||
}
|
||||
|
||||
@ -60,6 +60,11 @@ object OpenSourceProjects_Storybook_Danger : BuildType({
|
||||
}
|
||||
param("github_oauth_user", "Hypnosphi")
|
||||
}
|
||||
feature {
|
||||
type = "pullRequests"
|
||||
param("filterAuthorRole", "EVERYBODY")
|
||||
param("authenticationType", "vcsRoot")
|
||||
}
|
||||
}
|
||||
|
||||
requirements {
|
||||
|
||||
@ -42,7 +42,6 @@ object OpenSourceProjects_Storybook_Lint_Warnings : BuildType({
|
||||
+:pull/*
|
||||
+:release/*
|
||||
+:master
|
||||
+:dependencies.io-*
|
||||
""".trimIndent()
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,8 +9,6 @@ object OpenSourceProjects_Storybook_ReactNative : BuildType({
|
||||
id = "OpenSourceProjects_Storybook_ReactNative"
|
||||
name = "React Native"
|
||||
|
||||
artifactRules = "examples/react-native-vanilla/coverage/lcov-report => coverage.zip"
|
||||
|
||||
params {
|
||||
param("env.PUPPETEER_SKIP_CHROMIUM_DOWNLOAD", "true")
|
||||
}
|
||||
@ -26,15 +24,7 @@ object OpenSourceProjects_Storybook_ReactNative : BuildType({
|
||||
name = "Bootstrap"
|
||||
scriptContent = """
|
||||
yarn
|
||||
yarn bootstrap --core --reactnative --reactnativeapp
|
||||
""".trimIndent()
|
||||
dockerImage = "node:%docker.node.version%"
|
||||
}
|
||||
script {
|
||||
name = "react-native-vanilla"
|
||||
scriptContent = """
|
||||
cd examples/react-native-vanilla
|
||||
yarn storybook --smoke-test
|
||||
yarn bootstrap --core --reactnativeapp
|
||||
""".trimIndent()
|
||||
dockerImage = "node:%docker.node.version%"
|
||||
}
|
||||
@ -46,14 +36,6 @@ object OpenSourceProjects_Storybook_ReactNative : BuildType({
|
||||
""".trimIndent()
|
||||
dockerImage = "node:%docker.node.version%"
|
||||
}
|
||||
script {
|
||||
name = "Test"
|
||||
scriptContent = """
|
||||
yarn test --reactnative --coverage --runInBand --teamcity
|
||||
yarn coverage
|
||||
""".trimIndent()
|
||||
dockerImage = "node:%docker.node.version%"
|
||||
}
|
||||
}
|
||||
|
||||
features {
|
||||
|
||||
@ -0,0 +1,53 @@
|
||||
package OpenSourceProjects_Storybook.patches.buildTypes
|
||||
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.*
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.BuildFeature
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.VcsTrigger
|
||||
import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.vcs
|
||||
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 {
|
||||
param("env.PULL_REQUEST_URL", "https://github.com/storybooks/storybook/%teamcity.build.branch%")
|
||||
}
|
||||
update {
|
||||
param("env.PULL_REQUEST_URL", "https://github.com/storybooks/storybook/pull/%teamcity.build.branch%")
|
||||
}
|
||||
}
|
||||
|
||||
triggers {
|
||||
val trigger1 = find<VcsTrigger> {
|
||||
vcs {
|
||||
quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
|
||||
triggerRules = "-:comment=^TeamCity change:**"
|
||||
branchFilter = """
|
||||
+:*
|
||||
-:master
|
||||
""".trimIndent()
|
||||
}
|
||||
}
|
||||
trigger1.apply {
|
||||
triggerRules = ""
|
||||
}
|
||||
}
|
||||
|
||||
features {
|
||||
val feature1 = find<BuildFeature> {
|
||||
feature {
|
||||
type = "pullRequests"
|
||||
param("authenticationType", "vcsRoot")
|
||||
param("filterAuthorRole", "EVERYBODY")
|
||||
}
|
||||
}
|
||||
feature1.apply {
|
||||
param("authenticationType", "token")
|
||||
param("secure:accessToken", "credentialsJSON:5ffe2d7e-531e-4f6f-b1fc-a41bfea26eaa")
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -8,7 +8,6 @@ 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"
|
||||
branchSpec = "+:refs/(pull/*)/head"
|
||||
authMethod = uploadedKey {
|
||||
userName = "git"
|
||||
uploadedKey = "Storybook bot"
|
||||
|
||||
@ -1,19 +1,21 @@
|
||||
## Addon / Framework Support Table
|
||||
|
||||
| | [React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)| [Marko](app/marko)| [Svelte](app/svelte)| [Riot](app/riot)| [Ember](app/ember)|
|
||||
| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
|
||||
|[a11y](addons/a11y) |+| |+|+|+|+|+|+| | |+|
|
||||
|[actions](addons/actions) |+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[backgrounds](addons/backgrounds)|+| |+|+|+|+|+|+|+|+|+|
|
||||
|[centered](addons/centered) |+| |+|+| |+|+| |+| |+|
|
||||
|[events](addons/events) |+| |+|+|+|+|+|+| | |+|
|
||||
|[graphql](addons/graphql) |+| | | | | | | | | | |
|
||||
|[info](addons/info) |+| | | | | | | | | | |
|
||||
|[jest](addons/jest) |+| | |+| | |+| | | | |
|
||||
|[knobs](addons/knobs) |+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[links](addons/links) |+|+|+|+|+|+|+| |+|+|+|
|
||||
|[notes](addons/notes) |+| |+|+|+|+|+| |+|+|+|
|
||||
|[options](addons/options) |+|+|+|+|+|+|+| |+|+|+|
|
||||
|[storyshots](addons/storyshots) |+|+|+|+| | |+| |+|+| |
|
||||
|[storysource](addons/storysource)|+| |+|+|+|+|+|+|+|+|+|
|
||||
|[viewport](addons/viewport) |+| |+|+|+|+|+|+|+|+|+|
|
||||
## Addon / Framework Support Table
|
||||
|
||||
| | [React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)| [Marko](app/marko)| [Svelte](app/svelte)| [Riot](app/riot)| [Ember](app/ember)|
|
||||
| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
|
||||
|[a11y](addons/a11y) |+| |+|+|+|+|+|+| | |+|
|
||||
|[actions](addons/actions) |+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[backgrounds](addons/backgrounds)|+|*|+|+|+|+|+|+|+|+|+|
|
||||
|[centered](addons/centered) |+| |+|+| |+|+| |+| |+|
|
||||
|[events](addons/events) |+| |+|+|+|+|+|+| | |+|
|
||||
|[graphql](addons/graphql) |+| | | | | | | | | | |
|
||||
|[info](addons/info) |+| | | | | | | | | | |
|
||||
|[jest](addons/jest) |+| | |+| | |+| | | | |
|
||||
|[knobs](addons/knobs) |+|+*|+|+|+|+|+|+|+|+|+|
|
||||
|[links](addons/links) |+|+|+|+|+|+|+| |+|+|+|
|
||||
|[notes](addons/notes) |+|+*|+|+|+|+|+| |+|+|+|
|
||||
|[options](addons/options) |+|+|+|+|+|+|+| |+|+|+|
|
||||
|[storyshots](addons/storyshots) |+|+|+|+| | |+| |+|+| |
|
||||
|[storysource](addons/storysource)|+| |+|+|+|+|+|+|+|+|+|
|
||||
|[viewport](addons/viewport) |+| |+|+|+|+|+|+|+|+|+|
|
||||
|
||||
`*` - React Native on device addon (addons/onDevice-\<name>)
|
||||
|
||||
@ -60,13 +60,6 @@ You can also pick suites from CLI. Suites available are listed below.
|
||||
This option executes test from `<rootdir>/app/react`, `<rootdir>/app/vue`, and `<rootdir>/lib`.
|
||||
Before the tests are ran, the project must be bootstrapped with core. You can accomplish this with `yarn bootstrap --core`
|
||||
|
||||
##### React-Native example Tests
|
||||
|
||||
`yarn test --reactnative`
|
||||
|
||||
This option executes tests from `<rootdir>/app/react-native`.
|
||||
Before these tests are ran, the project must be bootstrapped with the React Native example enabled. You can accomplish this by running `yarn bootstrap --reactnative`
|
||||
|
||||
##### CRA-kitchen-sink - Image snapshots using Storyshots
|
||||
|
||||
`yarn test --image`
|
||||
|
||||
54
MAINTAINERS.md
Normal file
54
MAINTAINERS.md
Normal file
@ -0,0 +1,54 @@
|
||||
This document will document some of the processes that members of the documentation team should adhere to.
|
||||
|
||||
# PR Process
|
||||
|
||||
1. Triage with the correct [label](#labels)
|
||||
2. If there a change related to it ensure it has been published and tested before closing
|
||||
|
||||
# Labels
|
||||
|
||||
| label name | purpose |
|
||||
|:--------------:|:------------|
|
||||
| accessibility | |
|
||||
| addon:(name) | |
|
||||
| app:(name) | |
|
||||
| api:(name) | |
|
||||
| cleanup | Minor cleanup style change that won't show up in release changelog |
|
||||
| bug | |
|
||||
| cli | |
|
||||
| good first review | |
|
||||
| compatibility with other tools | |
|
||||
| patch | Bugfix & documentation PR that need to be picked to release branch |
|
||||
| picked | Patch PRs cherry-picked to master |
|
||||
| compatibility with other tools | |
|
||||
| components | |
|
||||
| core | |
|
||||
| decorators | |
|
||||
| dependencies:update | |
|
||||
| dependencies | |
|
||||
| discussion | |
|
||||
| do not merge | |
|
||||
| documentation | |
|
||||
| feature request | |
|
||||
| good first issue | |
|
||||
| has workaround | |
|
||||
| help wanted | |
|
||||
| high priority | |
|
||||
| in progress | |
|
||||
| inactive | |
|
||||
| maintenance | |
|
||||
| merged | |
|
||||
| needs example | |
|
||||
| needs more info | |
|
||||
| needs rebase | |
|
||||
| needs reproduction | |
|
||||
| needs review | |
|
||||
| performance issue | |
|
||||
| presets | |
|
||||
| question / support | |
|
||||
| ready | |
|
||||
| security | |
|
||||
| todo | |
|
||||
| typescript | |
|
||||
| ui | |
|
||||
| won't fix | |
|
||||
20
MIGRATION.md
20
MIGRATION.md
@ -5,11 +5,13 @@
|
||||
- [From version 3.4.x to 4.0.x](#from-version-34x-to-40x)
|
||||
- [Keyboard shortcuts moved](#keyboard-shortcuts-moved)
|
||||
- [Removed addWithInfo](#removed-add-with-info)
|
||||
- [Removed RN packager](#removed-rn-packager)
|
||||
- [Removed RN addons](#removed-rn-addons)
|
||||
- [Storyshots changes](#storyshots-changes)
|
||||
- [Webpack 4](#webpack-4)
|
||||
- [Babel 7](#babel-7)
|
||||
- [Create-react-app](#create-react-app)
|
||||
- [CLI rename](#cli-rename)
|
||||
- [From version 3.3.x to 3.4.x](#from-version-33x-to-34x)
|
||||
- [From version 3.2.x to 3.3.x](#from-version-32x-to-33x)
|
||||
- [Refactored Knobs](#refactored-knobs)
|
||||
@ -27,7 +29,7 @@
|
||||
|
||||
## From version 3.4.x to 4.0.x
|
||||
|
||||
With 4.0 as our first major release in over a year, we've collected a lot of cleanup tasks. All deprecations have been marked for months, so we hope that there will be no significant impact on your project.
|
||||
With 4.0 as our first major release in over a year, we've collected a lot of cleanup tasks. Most of the deprecations have been marked for months, so we hope that there will be no significant impact on your project.
|
||||
|
||||
### Generic addons
|
||||
|
||||
@ -58,6 +60,14 @@ import { number } from "@storybook/addon-knobs";
|
||||
|
||||
`Addon-info`'s `addWithInfo` has been marked deprecated since 3.2. In 4.0 we've removed it completely. See the package [README](https://github.com/storybooks/storybook/blob/master/addons/info/README.md) for the proper usage.
|
||||
|
||||
### Removed RN packager
|
||||
|
||||
Since storybook version v4.0 packager is removed from storybook. The suggested storybook usage is to include it inside your app.
|
||||
If you want to keep the old behaviour, you have to start the packager yourself with a different project root.
|
||||
`npm run storybook start -p 7007 | react-native start --projectRoot storybook`
|
||||
|
||||
Removed cli options: `--packager-port --root --projectRoots -r, --reset-cache --skip-packager --haul --platform --metro-config`
|
||||
|
||||
### Removed RN addons
|
||||
|
||||
The `@storybook/react-native` had built-in addons (`addon-actions` and `addon-links`) that have been marked as deprecated since 3.x. They have been fully removed in 4.x. If your project still uses the built-ins, you'll need to add explicit dependencies on `@storybook/addon-actions` and/or `@storybook/addon-links` and import directly from those packages.
|
||||
@ -125,6 +135,14 @@ Also make sure you have a `.babelrc` in your project directory. You probably alr
|
||||
|
||||
If you're using `start-storybook` on CI, you may need to opt out of this using the new `--ci` flag.
|
||||
|
||||
### CLI Rename
|
||||
|
||||
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 sb init
|
||||
```
|
||||
|
||||
## From version 3.3.x to 3.4.x
|
||||
|
||||
There are no expected breaking changes in the 3.4.x release, but 3.4 contains a major refactor to make it easier to support new frameworks, and we will document any breaking changes here if they arise.
|
||||
|
||||
126
README.md
126
README.md
@ -10,22 +10,24 @@
|
||||
[](#backers)
|
||||
[](#sponsors)
|
||||
[](https://github.com/storybooks/storybook/blob/master/LICENSE)
|
||||
|
||||
<!-- [](https://www.browserstack.com/automate/public-build/<badge_key>) -->
|
||||
|
||||
* * *
|
||||
---
|
||||
|
||||
Storybook is a development environment for UI components.
|
||||
It allows you to browse a component library, view the different states of each component, and interactively develop and test components.
|
||||
|
||||
## Intro
|
||||
|
||||
<center>
|
||||
<img src="media/storybook-intro.gif" width="100%" />
|
||||
</center>
|
||||
|
||||
README for:
|
||||
- [](https://github.com/storybooks/storybook)
|
||||
- [](https://github.com/storybooks/storybook/tree/release/3.4)
|
||||
|
||||
- [](https://github.com/storybooks/storybook)
|
||||
- [](https://github.com/storybooks/storybook/tree/release/3.4)
|
||||
|
||||
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.
|
||||
|
||||
@ -35,38 +37,36 @@ Storybook comes with a lot of [addons](https://storybook.js.org/addons/introduct
|
||||
|
||||
## Table of contents
|
||||
|
||||
- 🚀[Getting Started](#getting-started)
|
||||
- 📒[Projects](#projects)
|
||||
- 🛠[Supported Frameworks & Examples](#supported-frameworks)
|
||||
- 🚇[Sub Projects](#sub-projects)
|
||||
- 🔗[Addons](#addons)
|
||||
- 🏅[Badges & Presentation materials](#badges--presentation-materials)
|
||||
- 👥[Community](#community)
|
||||
- 👏[Contributing](#contributing)
|
||||
- 👨💻[Development scripts](#development-scripts)
|
||||
- 💵[Backers](#backers)
|
||||
- 💸[Sponsors](#sponsors)
|
||||
- 🚀[Getting Started](#getting-started)
|
||||
- 📒[Projects](#projects)
|
||||
- 🛠[Supported Frameworks & Examples](#supported-frameworks)
|
||||
- 🚇[Sub Projects](#sub-projects)
|
||||
- 🔗[Addons](#addons)
|
||||
- 🏅[Badges & Presentation materials](#badges--presentation-materials)
|
||||
- 👥[Community](#community)
|
||||
- 👏[Contributing](#contributing)
|
||||
- 👨💻[Development scripts](#development-scripts)
|
||||
- 💵[Backers](#backers)
|
||||
- 💸[Sponsors](#sponsors)
|
||||
|
||||
## Getting Started
|
||||
|
||||
First install storybook:
|
||||
|
||||
```sh
|
||||
npm i -g @storybook/cli
|
||||
cd my-react-app
|
||||
getstorybook
|
||||
npx -p @storybook/cli sb init
|
||||
```
|
||||
|
||||
The `-g` global install is used to run our cli tool in your project directory to generate templates for your existing projects. To avoid the global install and start your project manually, take a look at our [Slow Start Guide](https://storybook.js.org/basics/slow-start-guide/).
|
||||
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/).
|
||||
|
||||
Once it's installed, you can `npm run storybook` and it will run the development server on your local machine, and give you a URL to browse some sample stories.
|
||||
|
||||
**Storybook v2.x migration note**: If you're using Storybook v2.x and want to shift to 3.x version the easiest way is:
|
||||
**Storybook v2.x migration note**: If you're using Storybook v2.x and want to shift to 4.x version the easiest way is:
|
||||
|
||||
```sh
|
||||
npm i -g @storybook/cli
|
||||
cd my-storybook-v2-app
|
||||
getstorybook
|
||||
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,44 +79,44 @@ 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) | - | [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-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) | - | [v4.0.0-alpha](https://storybooks-ember.netlify.com/) | [](app/ember) |
|
||||
|
||||
### Sub Projects
|
||||
|
||||
- [CLI](lib/cli) - Streamlined installation for a variety of app types
|
||||
- [examples](examples) - Code examples to illustrate different Storybook use cases
|
||||
- [CLI](lib/cli) - Streamlined installation for a variety of app types
|
||||
- [examples](examples) - Code examples to illustrate different Storybook use cases
|
||||
|
||||
### Addons
|
||||
|
||||
| Addons | |
|
||||
|----|---|
|
||||
| [a11y](addons/a11y/) | Test components for user accessibility in Storybook |
|
||||
| [actions](addons/actions/) | Log actions as users interact with components in the Storybook UI |
|
||||
| [backgrounds](addons/backgrounds/) | Let users choose backgrounds in the Storybook UI |
|
||||
| [centered](addons/centered/) | Center the alignment of your components within the Storybook UI |
|
||||
| [events](addons/events/) | Interactively fire events to components that respond to EventEmitter |
|
||||
| [graphql](addons/graphql/) | Query a GraphQL server within Storybook stories |
|
||||
| [info](addons/info/) | Annotate stories with extra component usage information |
|
||||
| [jest](addons/jest/) | View the results of components' unit tests in Storybook |
|
||||
| [knobs](addons/knobs/) | Interactively edit component prop data in the Storybook UI |
|
||||
| [links](addons/links/) | Create links between stories |
|
||||
| [notes](addons/notes/) | Annotate Storybook stories with notes |
|
||||
| [options](addons/options/) | Customize the Storybook UI in code |
|
||||
| [storyshots](addons/storyshots/) | Easy snapshot testing for components in Storybook |
|
||||
| [storysource](addons/storysource/) | View the code of your stories within the Storybook UI |
|
||||
| [viewport](addons/viewport/) | Change display sizes and layouts for responsive components using Storybook |
|
||||
| Addons | |
|
||||
| ---------------------------------- | -------------------------------------------------------------------------- |
|
||||
| [a11y](addons/a11y/) | Test components for user accessibility in Storybook |
|
||||
| [actions](addons/actions/) | Log actions as users interact with components in the Storybook UI |
|
||||
| [backgrounds](addons/backgrounds/) | Let users choose backgrounds in the Storybook UI |
|
||||
| [centered](addons/centered/) | Center the alignment of your components within the Storybook UI |
|
||||
| [events](addons/events/) | Interactively fire events to components that respond to EventEmitter |
|
||||
| [graphql](addons/graphql/) | Query a GraphQL server within Storybook stories |
|
||||
| [info](addons/info/) | Annotate stories with extra component usage information |
|
||||
| [jest](addons/jest/) | View the results of components' unit tests in Storybook |
|
||||
| [knobs](addons/knobs/) | Interactively edit component prop data in the Storybook UI |
|
||||
| [links](addons/links/) | Create links between stories |
|
||||
| [notes](addons/notes/) | Annotate Storybook stories with notes |
|
||||
| [options](addons/options/) | Customize the Storybook UI in code |
|
||||
| [storyshots](addons/storyshots/) | Easy snapshot testing for components in Storybook |
|
||||
| [storysource](addons/storysource/) | View the code of your stories within the Storybook UI |
|
||||
| [viewport](addons/viewport/) | Change display sizes and layouts for responsive components using Storybook |
|
||||
|
||||
See [Addon / Framework Support Table](ADDONS_SUPPORT.md)
|
||||
|
||||
@ -134,11 +134,11 @@ If you're looking for material to use in your presentation about storybook, like
|
||||
|
||||
## Community
|
||||
|
||||
- Tweeting via [@storybookjs](https://twitter.com/storybookjs)
|
||||
- Blogging at [Medium](https://medium.com/storybookjs)
|
||||
- Chatting on [Slack](https://now-examples-slackin-rrirkqohko.now.sh/)
|
||||
- Discussions on [Discord](https://discord.gg/sMFvFsG)
|
||||
- Streaming saved at [Youtube](https://www.youtube.com/channel/UCr7Quur3eIyA_oe8FNYexfg)
|
||||
- Tweeting via [@storybookjs](https://twitter.com/storybookjs)
|
||||
- Blogging at [Medium](https://medium.com/storybookjs)
|
||||
- Chatting on [Slack](https://now-examples-slackin-rrirkqohko.now.sh/)
|
||||
- Discussions on [Discord](https://discord.gg/sMFvFsG)
|
||||
- Streaming saved at [Youtube](https://www.youtube.com/channel/UCr7Quur3eIyA_oe8FNYexfg)
|
||||
|
||||
## Contributing
|
||||
|
||||
@ -146,8 +146,8 @@ If you're looking for material to use in your presentation about storybook, like
|
||||
|
||||
We welcome contributions to Storybook!
|
||||
|
||||
- ⇄ Pull requests and ★ Stars are always welcome.
|
||||
- Read our [contributing guide](CONTRIBUTING.md) to get started.
|
||||
- ⇄ Pull requests and ★ Stars are always welcome.
|
||||
- Read our [contributing guide](CONTRIBUTING.md) to get started.
|
||||
|
||||
### Development scripts
|
||||
|
||||
@ -164,16 +164,16 @@ We welcome contributions to Storybook!
|
||||
|
||||
> boolean check if code conforms to linting rules - uses remark & eslint
|
||||
|
||||
- `yarn lint:js` - will check js
|
||||
- `yarn lint:md` - will check markdown + code samples
|
||||
- `yarn lint:js` - will check js
|
||||
- `yarn lint:md` - will check markdown + code samples
|
||||
|
||||
- `yarn lint:js --fix` - will automatically fix js
|
||||
- `yarn lint:js --fix` - will automatically fix js
|
||||
|
||||
#### `yarn test`
|
||||
|
||||
> boolean check if unit tests all pass - uses jest
|
||||
|
||||
- `yarn run test --core --watch` - will run core tests in watch-mode
|
||||
- `yarn run test --core --watch` - will run core tests in watch-mode
|
||||
|
||||
### Sponsors
|
||||
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"@storybook/client-logger": "4.0.0-alpha.24",
|
||||
"@storybook/components": "4.0.0-alpha.24",
|
||||
"@storybook/core-events": "4.0.0-alpha.24",
|
||||
"axe-core": "^3.0.3",
|
||||
"axe-core": "^3.1.2",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
"@storybook/core-events": "4.0.0-alpha.24",
|
||||
"deep-equal": "^1.0.1",
|
||||
"global": "^4.3.2",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"lodash": "^4.17.11",
|
||||
"make-error": "^1.3.5",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-inspector": "^2.3.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Based on http://backbonejs.org/docs/backbone.html#section-164
|
||||
import { document, Element } from 'global';
|
||||
import isEqual from 'lodash.isequal';
|
||||
import isEqual from 'lodash/isEqual';
|
||||
import addons from '@storybook/addons';
|
||||
import Events from '@storybook/core-events';
|
||||
|
||||
|
||||
@ -25,8 +25,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"global": "^4.3.2",
|
||||
"graphiql": "^0.11.11",
|
||||
"graphql": "^0.13.2",
|
||||
"graphiql": "^0.12.0",
|
||||
"graphql": "^14.0.2",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
"@storybook/components": "4.0.0-alpha.24",
|
||||
"core-js": "2.5.7",
|
||||
"global": "^4.3.2",
|
||||
"marksy": "^6.0.3",
|
||||
"marksy": "^6.1.0",
|
||||
"nested-object-assign": "^1.0.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-addons-create-fragment": "^15.5.3",
|
||||
@ -38,7 +38,7 @@
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react-test-renderer": "^16.4.2"
|
||||
"react-test-renderer": "^16.5.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
|
||||
@ -26,47 +26,47 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`PropTable multiLineText should include all propTypes by default 1`] = `
|
||||
<ForwardRef>
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
<ForwardRef
|
||||
<Th
|
||||
bordered={true}
|
||||
>
|
||||
property
|
||||
</ForwardRef>
|
||||
<ForwardRef
|
||||
</Th>
|
||||
<Th
|
||||
bordered={true}
|
||||
>
|
||||
propType
|
||||
</ForwardRef>
|
||||
<ForwardRef
|
||||
</Th>
|
||||
<Th
|
||||
bordered={true}
|
||||
>
|
||||
required
|
||||
</ForwardRef>
|
||||
<ForwardRef
|
||||
</Th>
|
||||
<Th
|
||||
bordered={true}
|
||||
>
|
||||
default
|
||||
</ForwardRef>
|
||||
<ForwardRef
|
||||
</Th>
|
||||
<Th
|
||||
bordered={true}
|
||||
>
|
||||
description
|
||||
</ForwardRef>
|
||||
</Th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
key="foo"
|
||||
>
|
||||
<ForwardRef
|
||||
<Td
|
||||
bordered={true}
|
||||
code={true}
|
||||
>
|
||||
foo
|
||||
</ForwardRef>
|
||||
<ForwardRef
|
||||
</Td>
|
||||
<Td
|
||||
bordered={true}
|
||||
code={true}
|
||||
>
|
||||
@ -78,21 +78,21 @@ exports[`PropTable multiLineText should include all propTypes by default 1`] = `
|
||||
}
|
||||
}
|
||||
/>
|
||||
</ForwardRef>
|
||||
<ForwardRef
|
||||
</Td>
|
||||
<Td
|
||||
bordered={true}
|
||||
>
|
||||
-
|
||||
</ForwardRef>
|
||||
<ForwardRef
|
||||
</Td>
|
||||
<Td
|
||||
bordered={true}
|
||||
>
|
||||
-
|
||||
</ForwardRef>
|
||||
<ForwardRef
|
||||
</Td>
|
||||
<Td
|
||||
bordered={true}
|
||||
/>
|
||||
</tr>
|
||||
</tbody>
|
||||
</ForwardRef>
|
||||
</Table>
|
||||
`;
|
||||
|
||||
@ -35,6 +35,7 @@
|
||||
"@storybook/components": "4.0.0-alpha.24",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2",
|
||||
"upath": "^1.1.0",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -1,17 +1,18 @@
|
||||
import addons from '@storybook/addons';
|
||||
import deprecate from 'util-deprecate';
|
||||
import { normalize } from 'upath';
|
||||
|
||||
const findTestResults = (testFiles, jestTestResults, jestTestFilesExt) =>
|
||||
const findTestResults = (testFiles, jestTestResults, jestTestFilesOptions) =>
|
||||
Object.values(testFiles).map(name => {
|
||||
const fileName = `${name}${jestTestFilesOptions.filesExt}`;
|
||||
if (jestTestResults && jestTestResults.testResults) {
|
||||
return {
|
||||
fileName,
|
||||
name,
|
||||
result: jestTestResults.testResults.find(t =>
|
||||
new RegExp(`${name}${jestTestFilesExt}`).test(t.name)
|
||||
),
|
||||
result: jestTestResults.testResults.find(t => normalize(t.name).includes(fileName)),
|
||||
};
|
||||
}
|
||||
return { name };
|
||||
return { fileName, name };
|
||||
});
|
||||
|
||||
const emitAddTests = ({ kind, story, testFiles, options }) => {
|
||||
|
||||
@ -7,8 +7,7 @@ import Panel from './components/Panel';
|
||||
addons.register('storybook/tests', api => {
|
||||
const channel = addons.getChannel();
|
||||
addons.addPanel('storybook/tests/panel', {
|
||||
// eslint-disable-next-line react/prop-types
|
||||
title: () => <PanelTitle channel={addons.getChannel()} api={api} />,
|
||||
title: () => <PanelTitle channel={channel} api={api} />,
|
||||
// eslint-disable-next-line react/prop-types
|
||||
render: ({ active }) => <Panel channel={channel} api={api} active={active} />,
|
||||
});
|
||||
|
||||
@ -28,7 +28,9 @@ class ArrayType extends React.Component {
|
||||
render() {
|
||||
const { knob } = this.props;
|
||||
|
||||
return <Textarea id={knob.name} value={knob.value} onChange={this.handleChange} size="flex" />;
|
||||
const value = knob.value.join(knob.separator);
|
||||
|
||||
return <Textarea id={knob.name} value={value} onChange={this.handleChange} size="flex" />;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^0.10.6",
|
||||
"@storybook/addons": "4.0.0-alpha.24",
|
||||
"marked": "^0.5.0",
|
||||
"marked": "^0.5.1",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
89
addons/ondevice-backgrounds/README.md
Normal file
89
addons/ondevice-backgrounds/README.md
Normal file
@ -0,0 +1,89 @@
|
||||
# Storybook Addon On Device Backgrounds
|
||||
|
||||
Storybook On Device Background Addon can be used to change background colors inside the the simulator in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
npm i -D @storybook/addon-ondevice-backgrounds
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
Then create a file called `rn-addons.js` in your storybook config.
|
||||
|
||||
Add following content to it:
|
||||
|
||||
```js
|
||||
import '@storybook/addon-ondevice-backgrounds/register';
|
||||
```
|
||||
|
||||
Then import `rn-addons.js` next to your `getStorybookUI` call.
|
||||
```js
|
||||
import './rn-addons';
|
||||
```
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
Then write your stories like this:
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
|
||||
|
||||
storiesOf('Button', module)
|
||||
.addDecorator(
|
||||
withBackgrounds([
|
||||
{ name: 'twitter', value: '#00aced', default: true },
|
||||
{ name: 'facebook', value: '#3b5998' },
|
||||
])
|
||||
)
|
||||
.add('with text', () => <Text>Click me</Text>);
|
||||
```
|
||||
|
||||
You can add the backgrounds to all stories with `addDecorator` in `.storybook/config.js`:
|
||||
|
||||
```js
|
||||
import { addDecorator } from '@storybook/react-native'; // <- or your storybook framework
|
||||
import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
|
||||
|
||||
addDecorator(
|
||||
withBackgrounds([
|
||||
{ name: 'twitter', value: '#00aced', default: true },
|
||||
{ name: 'facebook', value: '#3b5998' },
|
||||
])
|
||||
);
|
||||
```
|
||||
|
||||
If you want to override backgrounds for a single story or group of stories, pass the `backgrounds` parameter:
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
|
||||
storiesOf('Button', module)
|
||||
.addParameters({
|
||||
backgrounds: [
|
||||
{ name: 'red', value: '#F44336' },
|
||||
{ name: 'blue', value: '#2196F3', default: true },
|
||||
],
|
||||
})
|
||||
.add('with text', () => <button>Click me</button>);
|
||||
```
|
||||
|
||||
If you don't want to use backgrounds for a story, you can set the `backgrounds` parameter to `[]`, or use `{ disable: true }` to skip the addon:
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
|
||||
storiesOf('Button', module).add('with text', () => <button>Click me</button>, {
|
||||
backgrounds: { disable: true },
|
||||
});
|
||||
```
|
||||
BIN
addons/ondevice-backgrounds/docs/demo.png
Normal file
BIN
addons/ondevice-backgrounds/docs/demo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
33
addons/ondevice-backgrounds/package.json
Normal file
33
addons/ondevice-backgrounds/package.json
Normal file
@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-backgrounds",
|
||||
"version": "4.0.0-alpha.24",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"background",
|
||||
"react",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://storybook.js.org",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"jsnext:main": "src/index.js",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-alpha.24",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
}
|
||||
}
|
||||
1
addons/ondevice-backgrounds/register.js
Normal file
1
addons/ondevice-backgrounds/register.js
Normal file
@ -0,0 +1 @@
|
||||
require('./dist/register');
|
||||
112
addons/ondevice-backgrounds/src/BackgroundPanel.js
Normal file
112
addons/ondevice-backgrounds/src/BackgroundPanel.js
Normal file
@ -0,0 +1,112 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { View, Text } from 'react-native';
|
||||
import Events from './constants';
|
||||
import Swatch from './Swatch';
|
||||
|
||||
const defaultBackground = {
|
||||
name: 'default',
|
||||
value: 'transparent',
|
||||
};
|
||||
|
||||
const instructionsHtml = `
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { withBackgrounds } from '@storybook/addon-backgrounds';
|
||||
|
||||
storiesOf('First Component', module)
|
||||
.addDecorator(withBackgrounds([
|
||||
{ name: 'twitter', value: '#00aced' },
|
||||
{ name: 'facebook', value: '#3b5998" },
|
||||
]))
|
||||
.add("First Button", () => <button>Click me</button>);
|
||||
`.trim();
|
||||
|
||||
const Instructions = () => (
|
||||
<View>
|
||||
<Text style={{ fontSize: 16 }}>Setup Instructions</Text>
|
||||
<Text>
|
||||
Please add the background decorator definition to your story. The background decorate accepts
|
||||
an array of items, which should include a name for your color (preferably the css class name)
|
||||
and the corresponding color / image value.
|
||||
</Text>
|
||||
<Text>
|
||||
Below is an example of how to add the background decorator to your story definition.
|
||||
</Text>
|
||||
<Text>{instructionsHtml}</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
export default class BackgroundPanel extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = { backgrounds: [] };
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { channel } = this.props;
|
||||
|
||||
this.onSet = channel.on(Events.SET, data => {
|
||||
const backgrounds = [...data];
|
||||
|
||||
this.setState({ backgrounds });
|
||||
});
|
||||
|
||||
this.onUnset = channel.on(Events.UNSET, () => {
|
||||
this.setState({ backgrounds: [] });
|
||||
});
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
const { channel } = this.props;
|
||||
channel.removeListener(Events.SET, this.onSet);
|
||||
channel.removeListener(Events.UNSET, this.onUnset);
|
||||
}
|
||||
|
||||
setBackgroundFromSwatch = background => {
|
||||
this.update(background);
|
||||
};
|
||||
|
||||
update(background) {
|
||||
const { channel } = this.props;
|
||||
channel.emit(Events.UPDATE_BACKGROUND, background);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { active } = this.props;
|
||||
const { backgrounds = [] } = this.state;
|
||||
|
||||
if (!active) {
|
||||
return null;
|
||||
}
|
||||
if (!backgrounds.length) return <Instructions />;
|
||||
|
||||
const hasDefault = backgrounds.filter(x => x.default).length;
|
||||
if (!hasDefault) backgrounds.push(defaultBackground);
|
||||
|
||||
return (
|
||||
<View>
|
||||
{backgrounds.map(({ value, name }) => (
|
||||
<View key={`${name} ${value}`}>
|
||||
<Swatch value={value} name={name} setBackground={this.setBackgroundFromSwatch} />
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
BackgroundPanel.propTypes = {
|
||||
active: PropTypes.bool.isRequired,
|
||||
api: PropTypes.shape({
|
||||
getQueryParam: PropTypes.func,
|
||||
setQueryParams: PropTypes.func,
|
||||
}).isRequired,
|
||||
channel: PropTypes.shape({
|
||||
emit: PropTypes.func,
|
||||
on: PropTypes.func,
|
||||
removeListener: PropTypes.func,
|
||||
}),
|
||||
};
|
||||
BackgroundPanel.defaultProps = {
|
||||
channel: undefined,
|
||||
};
|
||||
30
addons/ondevice-backgrounds/src/Swatch.js
Normal file
30
addons/ondevice-backgrounds/src/Swatch.js
Normal file
@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { TouchableOpacity, View, Text } from 'react-native';
|
||||
|
||||
const Swatch = ({ name, value, setBackground }) => (
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
borderRadius: 4,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(0,0,0,0.2)',
|
||||
marginTop: 10,
|
||||
marginBottom: 20,
|
||||
marginHorizontal: 10,
|
||||
}}
|
||||
onPress={() => setBackground(value)}
|
||||
>
|
||||
<View style={{ flex: 1, backgroundColor: value, height: 40 }} />
|
||||
<View style={{ padding: 4, flexDirection: 'row', justifyContent: 'space-between' }}>
|
||||
<Text>{name}:</Text>
|
||||
<Text>{value}</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
Swatch.propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
value: PropTypes.string.isRequired,
|
||||
setBackground: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default Swatch;
|
||||
8
addons/ondevice-backgrounds/src/constants.js
Normal file
8
addons/ondevice-backgrounds/src/constants.js
Normal file
@ -0,0 +1,8 @@
|
||||
export const ADDON_ID = 'storybook-addon-background';
|
||||
export const PANEL_ID = `${ADDON_ID}/background-panel`;
|
||||
|
||||
export default {
|
||||
SET: `${ADDON_ID}:set`,
|
||||
UNSET: `${ADDON_ID}:unset`,
|
||||
UPDATE_BACKGROUND: `${ADDON_ID}:update`,
|
||||
};
|
||||
52
addons/ondevice-backgrounds/src/container.js
Normal file
52
addons/ondevice-backgrounds/src/container.js
Normal file
@ -0,0 +1,52 @@
|
||||
import React from 'react';
|
||||
import { View } from 'react-native';
|
||||
import PropTypes from 'prop-types';
|
||||
import Events from './constants';
|
||||
|
||||
export default class Container extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { background: props.initialBackground || '' };
|
||||
this.onBackgroundChange = this.onBackgroundChange.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { channel } = this.props;
|
||||
// Listen to the notes and render it.
|
||||
channel.on(Events.UPDATE_BACKGROUND, this.onBackgroundChange);
|
||||
}
|
||||
|
||||
// This is some cleanup tasks when the Notes panel is unmounting.
|
||||
componentWillUnmount() {
|
||||
const { channel } = this.props;
|
||||
channel.removeListener(Events.UPDATE_BACKGROUND, this.onBackgroundChange);
|
||||
}
|
||||
|
||||
onBackgroundChange(background) {
|
||||
this.setState({ background });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { background } = this.state;
|
||||
const { children } = this.props;
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: background || 'transparent' }}>{children}</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Container.propTypes = {
|
||||
channel: PropTypes.shape({
|
||||
emit: PropTypes.func,
|
||||
on: PropTypes.func,
|
||||
removeListener: PropTypes.func,
|
||||
}),
|
||||
initialBackground: PropTypes.string,
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
Container.defaultProps = {
|
||||
channel: undefined,
|
||||
initialBackground: '',
|
||||
};
|
||||
34
addons/ondevice-backgrounds/src/index.js
Normal file
34
addons/ondevice-backgrounds/src/index.js
Normal file
@ -0,0 +1,34 @@
|
||||
import React from 'react';
|
||||
|
||||
import addons, { makeDecorator } from '@storybook/addons';
|
||||
|
||||
import Events from './constants';
|
||||
import Container from './container';
|
||||
|
||||
export const withBackgrounds = makeDecorator({
|
||||
name: 'withBackgrounds',
|
||||
parameterName: 'backgrounds',
|
||||
skipIfNoParametersOrOptions: true,
|
||||
allowDeprecatedUsage: true,
|
||||
wrapper: (getStory, context, { options, parameters }) => {
|
||||
const data = parameters || options || [];
|
||||
const backgrounds = Array.isArray(data) ? data : Object.values(data);
|
||||
|
||||
let background = 'transparent';
|
||||
if (backgrounds.length !== 0) {
|
||||
addons.getChannel().emit(Events.SET, backgrounds);
|
||||
|
||||
const defaultOrFirst = backgrounds.find(x => x.default) || backgrounds[0];
|
||||
|
||||
if (defaultOrFirst) {
|
||||
background = defaultOrFirst.value;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Container initialBackground={background} channel={addons.getChannel()}>
|
||||
{getStory(context)}
|
||||
</Container>
|
||||
);
|
||||
},
|
||||
});
|
||||
14
addons/ondevice-backgrounds/src/register.js
Normal file
14
addons/ondevice-backgrounds/src/register.js
Normal file
@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
import addons from '@storybook/addons';
|
||||
|
||||
import { ADDON_ID, PANEL_ID } from './constants';
|
||||
import BackgroundPanel from './BackgroundPanel';
|
||||
|
||||
addons.register(ADDON_ID, api => {
|
||||
const channel = addons.getChannel();
|
||||
addons.addPanel(PANEL_ID, {
|
||||
title: 'Backgrounds',
|
||||
// eslint-disable-next-line react/prop-types
|
||||
render: ({ active }) => <BackgroundPanel channel={channel} api={api} active={active} />,
|
||||
});
|
||||
});
|
||||
38
addons/ondevice-knobs/README.md
Normal file
38
addons/ondevice-knobs/README.md
Normal file
@ -0,0 +1,38 @@
|
||||
# Storybook Addon On Device Knobs
|
||||
|
||||
Storybook Addon On Device Knobs allow you to edit React props dynamically using the Storybook UI.
|
||||
You can also use Knobs as a dynamic variable inside stories in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
This is how Knobs look like:
|
||||
|
||||
[](https://storybooks-official.netlify.com/?knob-Dollars=12.5&knob-Name=Storyteller&knob-Years%20in%20NY=9&knob-background=%23ffff00&knob-Age=70&knob-Items%5B0%5D=Laptop&knob-Items%5B1%5D=Book&knob-Items%5B2%5D=Whiskey&knob-Other%20Fruit=lime&knob-Birthday=1484870400000&knob-Nice=true&knob-Styles=%7B%22border%22%3A%223px%20solid%20%23ff00ff%22%2C%22padding%22%3A%2210px%22%7D&knob-Fruit=apple&selectedKind=Addons%7CKnobs.withKnobs&selectedStory=tweaks%20static%20values&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs)
|
||||
|
||||
**This addon is a wrapper for addon [@storybook/addon-knobs](https://github.com/storybooks/storybook/blob/master/addons/knobs).
|
||||
Refer to its documentation to understand how to use knobs**
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
First of all, you need to install knobs into your project.
|
||||
|
||||
```sh
|
||||
npm install @storybook/addon-ondevice-knobs
|
||||
```
|
||||
|
||||
Then create a file called `rn-addons.js` in your storybook config.
|
||||
|
||||
```js
|
||||
import '@storybook/addon-ondevice-knobs/register';
|
||||
```
|
||||
|
||||
|
||||
Then import `rn-addons.js` next to your `getStorybookUI` call.
|
||||
```js
|
||||
import './rn-addons';
|
||||
```
|
||||
|
||||
Now, write your stories with knobs.
|
||||
|
||||
**Refer to [@storybook/addon-knobs](https://github.com/storybooks/storybook/blob/master/addons/knobs) to learn how to write stories.**
|
||||
36
addons/ondevice-knobs/package.json
Normal file
36
addons/ondevice-knobs/package.json
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-knobs",
|
||||
"version": "4.0.0-alpha.24",
|
||||
"description": "Display storybook story knobs on your deviced.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"knobs",
|
||||
"ondevice",
|
||||
"react-native",
|
||||
"storybook"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"jsnext:main": "src/index.js",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-alpha.24",
|
||||
"deep-equal": "^1.0.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-native-color-picker": "^0.4.0",
|
||||
"react-native-modal-datetime-picker": "^5.1.0",
|
||||
"react-native-modal-selector": "^0.0.27",
|
||||
"react-native-switch": "^1.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-knobs": "4.0.0-alpha.24",
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
}
|
||||
}
|
||||
1
addons/ondevice-knobs/register.js
Normal file
1
addons/ondevice-knobs/register.js
Normal file
@ -0,0 +1 @@
|
||||
require('./dist/index').register();
|
||||
72
addons/ondevice-knobs/src/GroupTabs.js
Normal file
72
addons/ondevice-knobs/src/GroupTabs.js
Normal file
@ -0,0 +1,72 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { ScrollView, Text, TouchableOpacity } from 'react-native';
|
||||
|
||||
class GroupTabs extends Component {
|
||||
renderTab(name, group) {
|
||||
let { title } = group;
|
||||
if (typeof title === 'function') {
|
||||
title = title();
|
||||
}
|
||||
|
||||
const { onGroupSelect, selectedGroup } = this.props;
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
marginRight: 15,
|
||||
paddingBottom: 10,
|
||||
}}
|
||||
key={name}
|
||||
onPress={() => onGroupSelect(name)}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: selectedGroup === name ? 'black' : '#ccc',
|
||||
fontSize: 17,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { groups } = this.props;
|
||||
|
||||
const entries = groups ? Object.entries(groups) : null;
|
||||
|
||||
return entries && entries.length ? (
|
||||
<ScrollView
|
||||
horizontal
|
||||
style={{
|
||||
marginHorizontal: 10,
|
||||
flexDirection: 'row',
|
||||
marginBottom: 10,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#ccc',
|
||||
}}
|
||||
>
|
||||
{entries.map(([key, value]) => this.renderTab(key, value))}
|
||||
</ScrollView>
|
||||
) : (
|
||||
<Text>no groups available</Text>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
GroupTabs.defaultProps = {
|
||||
groups: {},
|
||||
onGroupSelect: () => {},
|
||||
selectedGroup: null,
|
||||
};
|
||||
|
||||
GroupTabs.propTypes = {
|
||||
// eslint-disable-next-line react/forbid-prop-types
|
||||
groups: PropTypes.object,
|
||||
onGroupSelect: PropTypes.func,
|
||||
selectedGroup: PropTypes.string,
|
||||
};
|
||||
|
||||
export default GroupTabs;
|
||||
39
addons/ondevice-knobs/src/PropField.js
Normal file
39
addons/ondevice-knobs/src/PropField.js
Normal file
@ -0,0 +1,39 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { View, Text } from 'react-native';
|
||||
import React from 'react';
|
||||
import TypeMap from './types';
|
||||
|
||||
const InvalidType = () => <Text style={{ margin: 10 }}>Invalid Type</Text>;
|
||||
|
||||
const PropField = ({ onChange, onPress, knob }) => {
|
||||
const InputType = TypeMap[knob.type] || InvalidType;
|
||||
|
||||
return (
|
||||
<View>
|
||||
{!knob.hideLabel ? (
|
||||
<Text
|
||||
style={{
|
||||
marginLeft: 10,
|
||||
fontSize: 14,
|
||||
color: 'rgb(68, 68, 68)',
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
>
|
||||
{`${knob.name}`}
|
||||
</Text>
|
||||
) : null}
|
||||
<InputType knob={knob} onChange={onChange} onPress={onPress} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
PropField.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.any,
|
||||
}).isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
onPress: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default PropField;
|
||||
56
addons/ondevice-knobs/src/PropForm.js
Normal file
56
addons/ondevice-knobs/src/PropForm.js
Normal file
@ -0,0 +1,56 @@
|
||||
/* eslint no-underscore-dangle: 0 */
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { View } from 'react-native';
|
||||
import PropField from './PropField';
|
||||
|
||||
export default class propForm extends React.Component {
|
||||
makeChangeHandler(name, type) {
|
||||
return value => {
|
||||
const { onFieldChange } = this.props;
|
||||
const change = { name, type, value };
|
||||
onFieldChange(change);
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { knobs, onFieldClick } = this.props;
|
||||
|
||||
return (
|
||||
<View>
|
||||
{knobs.map(knob => {
|
||||
const changeHandler = this.makeChangeHandler(knob.name, knob.type);
|
||||
return (
|
||||
<PropField
|
||||
key={knob.name}
|
||||
name={knob.name}
|
||||
type={knob.type}
|
||||
value={knob.value}
|
||||
knob={knob}
|
||||
onChange={changeHandler}
|
||||
onPress={onFieldClick}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
propForm.displayName = 'propForm';
|
||||
|
||||
propForm.defaultProps = {
|
||||
knobs: [],
|
||||
};
|
||||
|
||||
propForm.propTypes = {
|
||||
knobs: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.any,
|
||||
})
|
||||
),
|
||||
onFieldChange: PropTypes.func.isRequired,
|
||||
onFieldClick: PropTypes.func.isRequired,
|
||||
};
|
||||
14
addons/ondevice-knobs/src/index.js
Normal file
14
addons/ondevice-knobs/src/index.js
Normal file
@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
import addons from '@storybook/addons';
|
||||
import Panel from './panel';
|
||||
|
||||
export function register() {
|
||||
addons.register('RNKNOBS', () => {
|
||||
const channel = addons.getChannel();
|
||||
addons.addPanel('RNKNOBS', {
|
||||
title: 'Knobs',
|
||||
// eslint-disable-next-line react/prop-types
|
||||
render: ({ active }) => <Panel channel={channel} active={active} />,
|
||||
});
|
||||
});
|
||||
}
|
||||
170
addons/ondevice-knobs/src/panel.js
Normal file
170
addons/ondevice-knobs/src/panel.js
Normal file
@ -0,0 +1,170 @@
|
||||
import React from 'react';
|
||||
import { View, Text, TouchableOpacity } from 'react-native';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import GroupTabs from './GroupTabs';
|
||||
import PropForm from './PropForm';
|
||||
|
||||
const getTimestamp = () => +new Date();
|
||||
|
||||
const DEFAULT_GROUP_ID = 'ALL';
|
||||
|
||||
export default class Panel extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
this.setKnobs = this.setKnobs.bind(this);
|
||||
this.reset = this.reset.bind(this);
|
||||
this.setOptions = this.setOptions.bind(this);
|
||||
this.onGroupSelect = this.onGroupSelect.bind(this);
|
||||
|
||||
this.state = { knobs: {}, groupId: DEFAULT_GROUP_ID };
|
||||
this.options = {};
|
||||
|
||||
this.lastEdit = getTimestamp();
|
||||
this.loadedFromUrl = false;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { channel } = this.props;
|
||||
|
||||
channel.on('addon:knobs:setKnobs', this.setKnobs);
|
||||
channel.on('addon:knobs:setOptions', this.setOptions);
|
||||
|
||||
channel.on('selectStory', this.reset);
|
||||
|
||||
channel.emit('forceReRender');
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
const { channel } = this.props;
|
||||
channel.removeListener('addon:knobs:setKnobs', this.setKnobs);
|
||||
channel.removeListener('selectStory', this.reset);
|
||||
}
|
||||
|
||||
onGroupSelect(name) {
|
||||
this.setState({ groupId: name });
|
||||
}
|
||||
|
||||
setOptions(options = { timestamps: false }) {
|
||||
this.options = options;
|
||||
}
|
||||
|
||||
setKnobs({ knobs, timestamp }) {
|
||||
if (!this.options.timestamps || !timestamp || this.lastEdit <= timestamp) {
|
||||
this.setState({ knobs });
|
||||
}
|
||||
}
|
||||
|
||||
reset = () => {
|
||||
const { channel } = this.props;
|
||||
this.setState({ knobs: {} });
|
||||
channel.emit('addon:knobs:reset');
|
||||
};
|
||||
|
||||
emitChange(changedKnob) {
|
||||
const { channel } = this.props;
|
||||
channel.emit('addon:knobs:knobChange', changedKnob);
|
||||
}
|
||||
|
||||
handleChange(changedKnob) {
|
||||
this.lastEdit = getTimestamp();
|
||||
const { knobs } = this.state;
|
||||
const { name } = changedKnob;
|
||||
const newKnobs = { ...knobs };
|
||||
newKnobs[name] = {
|
||||
...newKnobs[name],
|
||||
...changedKnob,
|
||||
};
|
||||
|
||||
this.setState({ knobs: newKnobs });
|
||||
|
||||
this.setState({ knobs: newKnobs }, this.emitChange(changedKnob));
|
||||
}
|
||||
|
||||
handleClick(knob) {
|
||||
const { channel } = this.props;
|
||||
|
||||
channel.emit('addon:knobs:knobClick', knob);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { active } = this.props;
|
||||
|
||||
if (!active) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { knobs, groupId } = this.state;
|
||||
|
||||
const groups = {};
|
||||
const groupIds = [];
|
||||
|
||||
let knobsArray = Object.keys(knobs);
|
||||
|
||||
knobsArray.filter(key => knobs[key].groupId).forEach(key => {
|
||||
const knobKeyGroupId = knobs[key].groupId;
|
||||
groupIds.push(knobKeyGroupId);
|
||||
groups[knobKeyGroupId] = {
|
||||
render: () => <Text id={knobKeyGroupId}>{knobKeyGroupId}</Text>,
|
||||
title: knobKeyGroupId,
|
||||
};
|
||||
});
|
||||
|
||||
if (groupIds.length > 0) {
|
||||
groups[DEFAULT_GROUP_ID] = {
|
||||
render: () => <Text id={DEFAULT_GROUP_ID}>{DEFAULT_GROUP_ID}</Text>,
|
||||
title: DEFAULT_GROUP_ID,
|
||||
};
|
||||
if (groupId !== DEFAULT_GROUP_ID) {
|
||||
knobsArray = knobsArray.filter(key => knobs[key].groupId === groupId);
|
||||
}
|
||||
}
|
||||
|
||||
knobsArray = knobsArray.map(key => knobs[key]);
|
||||
|
||||
if (knobsArray.length === 0) {
|
||||
return <Text>NO KNOBS</Text>;
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
{groupIds.length > 0 && (
|
||||
<GroupTabs groups={groups} onGroupSelect={this.onGroupSelect} selectedGroup={groupId} />
|
||||
)}
|
||||
<View>
|
||||
<PropForm
|
||||
knobs={knobsArray}
|
||||
onFieldChange={this.handleChange}
|
||||
onFieldClick={this.handleClick}
|
||||
/>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
borderRadius: 2,
|
||||
borderWidth: 1,
|
||||
borderColor: '#f7f4f4',
|
||||
padding: 4,
|
||||
margin: 10,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
onPress={this.reset}
|
||||
>
|
||||
<Text>RESET</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Panel.propTypes = {
|
||||
active: PropTypes.bool.isRequired,
|
||||
channel: PropTypes.shape({
|
||||
emit: PropTypes.func,
|
||||
on: PropTypes.func,
|
||||
removeListener: PropTypes.func,
|
||||
}).isRequired,
|
||||
onReset: PropTypes.object, // eslint-disable-line
|
||||
};
|
||||
53
addons/ondevice-knobs/src/types/Array.js
Normal file
53
addons/ondevice-knobs/src/types/Array.js
Normal file
@ -0,0 +1,53 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
import { TextInput } from 'react-native';
|
||||
|
||||
function formatArray(value, separator) {
|
||||
if (value === '') {
|
||||
return [];
|
||||
}
|
||||
return value.split(separator);
|
||||
}
|
||||
|
||||
const ArrayType = ({ knob, onChange }) => (
|
||||
<TextInput
|
||||
id={knob.name}
|
||||
underlineColorAndroid="transparent"
|
||||
style={{
|
||||
borderWidth: 1,
|
||||
borderColor: '#f7f4f4',
|
||||
borderRadius: 2,
|
||||
fontSize: 13,
|
||||
padding: 5,
|
||||
margin: 10,
|
||||
color: '#555',
|
||||
}}
|
||||
value={knob.value.join(knob.separator)}
|
||||
onChangeText={e => onChange(formatArray(e, knob.separator))}
|
||||
/>
|
||||
);
|
||||
|
||||
ArrayType.defaultProps = {
|
||||
knob: {},
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
ArrayType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.array,
|
||||
}),
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
ArrayType.serialize = value => value;
|
||||
ArrayType.deserialize = value => {
|
||||
if (Array.isArray(value)) return value;
|
||||
|
||||
return Object.keys(value)
|
||||
.sort()
|
||||
.reduce((array, key) => [...array, value[key]], []);
|
||||
};
|
||||
|
||||
export default ArrayType;
|
||||
39
addons/ondevice-knobs/src/types/Boolean.js
Normal file
39
addons/ondevice-knobs/src/types/Boolean.js
Normal file
@ -0,0 +1,39 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { View } from 'react-native';
|
||||
import { Switch } from 'react-native-switch';
|
||||
import React from 'react';
|
||||
|
||||
class BooleanType extends React.Component {
|
||||
onValueChange = () => {
|
||||
const { onChange, knob } = this.props;
|
||||
onChange(!knob.value);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { knob } = this.props;
|
||||
|
||||
return (
|
||||
<View style={{ margin: 10 }}>
|
||||
<Switch id={knob.name} onValueChange={this.onValueChange} value={knob.value} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
BooleanType.defaultProps = {
|
||||
knob: {},
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
BooleanType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.bool,
|
||||
}),
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
BooleanType.serialize = value => (value ? String(value) : null);
|
||||
BooleanType.deserialize = value => value === 'true';
|
||||
|
||||
export default BooleanType;
|
||||
25
addons/ondevice-knobs/src/types/Button.js
Normal file
25
addons/ondevice-knobs/src/types/Button.js
Normal file
@ -0,0 +1,25 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { TouchableOpacity, Text } from 'react-native';
|
||||
|
||||
const ButtonType = ({ knob, onPress }) => (
|
||||
<TouchableOpacity style={{ margin: 10 }} onPress={() => onPress(knob)}>
|
||||
<Text style={{ fontSize: 17, color: '#007aff' }}>{knob.name}</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
ButtonType.defaultProps = {
|
||||
knob: {},
|
||||
};
|
||||
|
||||
ButtonType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
}),
|
||||
onPress: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
ButtonType.serialize = value => value;
|
||||
ButtonType.deserialize = value => value;
|
||||
|
||||
export default ButtonType;
|
||||
101
addons/ondevice-knobs/src/types/Color.js
Normal file
101
addons/ondevice-knobs/src/types/Color.js
Normal file
@ -0,0 +1,101 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { Text, Modal, View, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
|
||||
import { ColorPicker, fromHsv } from 'react-native-color-picker';
|
||||
|
||||
class ColorType extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
displayColorPicker: false,
|
||||
};
|
||||
}
|
||||
|
||||
openColorPicker = () => {
|
||||
this.setState({
|
||||
displayColorPicker: true,
|
||||
});
|
||||
};
|
||||
|
||||
closeColorPicker = () => {
|
||||
this.setState({
|
||||
displayColorPicker: false,
|
||||
});
|
||||
};
|
||||
|
||||
onChangeColor = color => {
|
||||
const { onChange } = this.props;
|
||||
|
||||
onChange(fromHsv(color));
|
||||
};
|
||||
|
||||
render() {
|
||||
const { knob } = this.props;
|
||||
const { displayColorPicker } = this.state;
|
||||
const colorStyle = {
|
||||
borderColor: 'rgb(247, 244, 244)',
|
||||
width: 30,
|
||||
height: 20,
|
||||
borderRadius: 2,
|
||||
margin: 10,
|
||||
backgroundColor: knob.value,
|
||||
};
|
||||
return (
|
||||
<View>
|
||||
<TouchableOpacity style={colorStyle} onPress={this.openColorPicker} />
|
||||
<Modal
|
||||
supportedOrientations={['portrait', 'landscape']}
|
||||
transparent
|
||||
visible={displayColorPicker}
|
||||
onRequestClose={this.closeColorPicker}
|
||||
>
|
||||
<TouchableWithoutFeedback onPress={this.closeColorPicker}>
|
||||
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
|
||||
<TouchableWithoutFeedback>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgb(247, 244, 244)',
|
||||
width: 250,
|
||||
height: 250,
|
||||
padding: 10,
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity
|
||||
onPress={this.closeColorPicker}
|
||||
style={{ alignSelf: 'flex-end', padding: 5 }}
|
||||
>
|
||||
<Text style={{ fontSize: 18, fontWeight: 'bold' }}>X</Text>
|
||||
</TouchableOpacity>
|
||||
<ColorPicker
|
||||
onColorSelected={this.onChangeColor}
|
||||
defaultColor={knob.value}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ColorType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
}),
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
ColorType.defaultProps = {
|
||||
knob: {},
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
ColorType.serialize = value => value;
|
||||
ColorType.deserialize = value => value;
|
||||
|
||||
export default ColorType;
|
||||
103
addons/ondevice-knobs/src/types/Date.js
Normal file
103
addons/ondevice-knobs/src/types/Date.js
Normal file
@ -0,0 +1,103 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { PureComponent } from 'react';
|
||||
import { TouchableOpacity, Text, View } from 'react-native';
|
||||
import DateTimePicker from 'react-native-modal-datetime-picker';
|
||||
|
||||
// TODO seconds support
|
||||
class DateType extends PureComponent {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
isDateVisible: false,
|
||||
isTimeVisible: false,
|
||||
};
|
||||
}
|
||||
|
||||
showDatePicker = () => {
|
||||
this.setState({ isDateVisible: true });
|
||||
};
|
||||
|
||||
showTimePicker = () => {
|
||||
this.setState({ isTimeVisible: true });
|
||||
};
|
||||
|
||||
hidePicker = () => {
|
||||
this.setState({ isDateVisible: false, isTimeVisible: false });
|
||||
};
|
||||
|
||||
onDatePicked = date => {
|
||||
const value = date.valueOf();
|
||||
const { onChange } = this.props;
|
||||
onChange(value);
|
||||
this.hidePicker();
|
||||
};
|
||||
|
||||
render() {
|
||||
const { knob } = this.props;
|
||||
|
||||
const { isTimeVisible, isDateVisible } = this.state;
|
||||
const d = new Date(knob.value);
|
||||
|
||||
// https://stackoverflow.com/a/30272803
|
||||
const dateString = [
|
||||
`0${d.getDate()}`.slice(-2),
|
||||
`0${d.getMonth() + 1}`.slice(-2),
|
||||
d.getFullYear(),
|
||||
].join('-');
|
||||
const timeString = `${`0${d.getHours()}`.slice(-2)}:${`0${d.getMinutes()}`.slice(-2)}`;
|
||||
|
||||
return (
|
||||
<View style={{ margin: 10 }}>
|
||||
<View style={{ flexDirection: 'row' }}>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
borderWidth: 1,
|
||||
borderColor: '#f7f4f4',
|
||||
borderRadius: 2,
|
||||
padding: 5,
|
||||
}}
|
||||
onPress={this.showDatePicker}
|
||||
>
|
||||
<Text style={{ fontSize: 13, color: '#555' }}>{dateString}</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
borderWidth: 1,
|
||||
borderColor: '#f7f4f4',
|
||||
borderRadius: 2,
|
||||
padding: 5,
|
||||
marginLeft: 5,
|
||||
}}
|
||||
onPress={this.showTimePicker}
|
||||
>
|
||||
<Text style={{ fontSize: 13, color: '#555' }}>{timeString}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<DateTimePicker
|
||||
date={d}
|
||||
isVisible={isTimeVisible || isDateVisible}
|
||||
mode={isTimeVisible ? 'time' : 'date'}
|
||||
onConfirm={this.onDatePicked}
|
||||
onCancel={this.hidePicker}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
DateType.defaultProps = {
|
||||
knob: {},
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
DateType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.number,
|
||||
}),
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
DateType.serialize = value => String(value);
|
||||
DateType.deserialize = value => parseFloat(value);
|
||||
|
||||
export default DateType;
|
||||
72
addons/ondevice-knobs/src/types/Number.js
Normal file
72
addons/ondevice-knobs/src/types/Number.js
Normal file
@ -0,0 +1,72 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { TextInput, View, Slider } from 'react-native';
|
||||
|
||||
class NumberType extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.renderNormal = this.renderNormal.bind(this);
|
||||
this.renderRange = this.renderRange.bind(this);
|
||||
}
|
||||
|
||||
renderNormal() {
|
||||
const { knob, onChange } = this.props;
|
||||
|
||||
return (
|
||||
<TextInput
|
||||
style={{
|
||||
borderWidth: 1,
|
||||
borderColor: '#f7f4f4',
|
||||
borderRadius: 2,
|
||||
fontSize: 13,
|
||||
padding: 5,
|
||||
color: '#555',
|
||||
}}
|
||||
underlineColorAndroid="transparent"
|
||||
value={knob.value.toString()}
|
||||
keyboardType="numeric"
|
||||
onChangeText={val => onChange(parseFloat(val))}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
renderRange() {
|
||||
const { knob, onChange } = this.props;
|
||||
|
||||
return (
|
||||
<Slider
|
||||
value={knob.value}
|
||||
minimumValue={knob.min}
|
||||
maximumValue={knob.max}
|
||||
step={knob.step}
|
||||
onSlidingComplete={val => onChange(parseFloat(val))}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { knob } = this.props;
|
||||
|
||||
return (
|
||||
<View style={{ margin: 10 }}>{knob.range ? this.renderRange() : this.renderNormal()}</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
NumberType.defaultProps = {
|
||||
knob: {},
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
NumberType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.number,
|
||||
}),
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
NumberType.serialize = value => String(value);
|
||||
NumberType.deserialize = value => parseFloat(value);
|
||||
|
||||
export default NumberType;
|
||||
95
addons/ondevice-knobs/src/types/Object.js
Normal file
95
addons/ondevice-knobs/src/types/Object.js
Normal file
@ -0,0 +1,95 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { TextInput } from 'react-native';
|
||||
import deepEqual from 'deep-equal';
|
||||
|
||||
const styles = {
|
||||
borderWidth: 1,
|
||||
borderColor: '#f7f4f4',
|
||||
borderRadius: 2,
|
||||
fontSize: 13,
|
||||
padding: 5,
|
||||
margin: 10,
|
||||
color: '#555',
|
||||
};
|
||||
|
||||
class ObjectType extends React.Component {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
getJSONString() {
|
||||
const { json, jsonString } = this.state;
|
||||
const { knob } = this.props;
|
||||
|
||||
// If there is an error in the JSON, we need to give that errored JSON.
|
||||
if (this.failed) return jsonString;
|
||||
|
||||
// If the editor value and the knob value is the same, we need to return the
|
||||
// editor value as it allow user to add new fields to the JSON.
|
||||
if (deepEqual(json, knob.value)) return jsonString;
|
||||
|
||||
// If the knob's value is different from the editor, it seems like
|
||||
// there's a outside change and we need to get that.
|
||||
return JSON.stringify(knob.value, null, 2);
|
||||
}
|
||||
|
||||
handleChange = value => {
|
||||
const { onChange } = this.props;
|
||||
const newState = {
|
||||
jsonString: value,
|
||||
};
|
||||
|
||||
try {
|
||||
newState.json = JSON.parse(value.trim());
|
||||
onChange(newState.json);
|
||||
this.failed = false;
|
||||
} catch (err) {
|
||||
this.failed = true;
|
||||
}
|
||||
|
||||
this.setState(newState);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { knob } = this.props;
|
||||
const jsonString = this.getJSONString();
|
||||
const extraStyle = {};
|
||||
|
||||
if (this.failed) {
|
||||
extraStyle.borderWidth = 1;
|
||||
extraStyle.borderColor = '#fadddd';
|
||||
extraStyle.backgroundColor = '#fff5f5';
|
||||
}
|
||||
|
||||
return (
|
||||
<TextInput
|
||||
id={knob.name}
|
||||
style={{ ...styles, ...extraStyle }}
|
||||
value={jsonString}
|
||||
onChangeText={this.handleChange}
|
||||
multiline
|
||||
underlineColorAndroid="transparent"
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ObjectType.defaultProps = {
|
||||
knob: {},
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
ObjectType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
}),
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
ObjectType.serialize = object => JSON.stringify(object);
|
||||
ObjectType.deserialize = value => (value ? JSON.parse(value) : {});
|
||||
|
||||
export default ObjectType;
|
||||
69
addons/ondevice-knobs/src/types/Select.js
Normal file
69
addons/ondevice-knobs/src/types/Select.js
Normal file
@ -0,0 +1,69 @@
|
||||
/* eslint no-underscore-dangle: 0 */
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import { View, TextInput } from 'react-native';
|
||||
import React from 'react';
|
||||
import ModalPicker from 'react-native-modal-selector';
|
||||
|
||||
class SelectType extends React.Component {
|
||||
getOptions = ({ options }) => {
|
||||
if (Array.isArray(options)) {
|
||||
return options.map(val => ({ key: val, label: val }));
|
||||
}
|
||||
|
||||
return Object.keys(options).map(key => ({ label: key, key: options[key] }));
|
||||
};
|
||||
|
||||
render() {
|
||||
const { knob, onChange } = this.props;
|
||||
|
||||
const options = this.getOptions(knob);
|
||||
|
||||
const selected = options.filter(({ key }) => knob.value === key)[0].label;
|
||||
|
||||
return (
|
||||
<View>
|
||||
<ModalPicker
|
||||
data={options}
|
||||
initValue={knob.value}
|
||||
onChange={option => onChange(option.key)}
|
||||
animationType="none"
|
||||
>
|
||||
<TextInput
|
||||
style={{
|
||||
borderWidth: 1,
|
||||
borderColor: '#f7f4f4',
|
||||
borderRadius: 2,
|
||||
padding: 5,
|
||||
color: '#555',
|
||||
margin: 10,
|
||||
}}
|
||||
editable={false}
|
||||
value={selected}
|
||||
underlineColorAndroid="transparent"
|
||||
/>
|
||||
</ModalPicker>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SelectType.defaultProps = {
|
||||
knob: {},
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
SelectType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
|
||||
selectV2: PropTypes.bool,
|
||||
}),
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
SelectType.serialize = value => value;
|
||||
SelectType.deserialize = value => value;
|
||||
|
||||
export default SelectType;
|
||||
39
addons/ondevice-knobs/src/types/Text.js
Normal file
39
addons/ondevice-knobs/src/types/Text.js
Normal file
@ -0,0 +1,39 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { TextInput } from 'react-native';
|
||||
|
||||
const TextType = ({ knob, onChange }) => (
|
||||
<TextInput
|
||||
style={{
|
||||
borderWidth: 1,
|
||||
borderColor: '#f7f4f4',
|
||||
borderRadius: 2,
|
||||
fontSize: 13,
|
||||
padding: 5,
|
||||
margin: 10,
|
||||
color: '#555',
|
||||
}}
|
||||
id={knob.name}
|
||||
value={knob.value}
|
||||
onChangeText={onChange}
|
||||
underlineColorAndroid="transparent"
|
||||
/>
|
||||
);
|
||||
|
||||
TextType.defaultProps = {
|
||||
knob: {},
|
||||
onChange: value => value,
|
||||
};
|
||||
|
||||
TextType.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
}),
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
TextType.serialize = value => value;
|
||||
TextType.deserialize = value => value;
|
||||
|
||||
export default TextType;
|
||||
21
addons/ondevice-knobs/src/types/index.js
Normal file
21
addons/ondevice-knobs/src/types/index.js
Normal file
@ -0,0 +1,21 @@
|
||||
import TextType from './Text';
|
||||
import NumberType from './Number';
|
||||
import ColorType from './Color';
|
||||
import BooleanType from './Boolean';
|
||||
import ObjectType from './Object';
|
||||
import SelectType from './Select';
|
||||
import ArrayType from './Array';
|
||||
import DateType from './Date';
|
||||
import ButtonType from './Button';
|
||||
|
||||
export default {
|
||||
text: TextType,
|
||||
number: NumberType,
|
||||
color: ColorType,
|
||||
boolean: BooleanType,
|
||||
object: ObjectType,
|
||||
select: SelectType,
|
||||
array: ArrayType,
|
||||
date: DateType,
|
||||
button: ButtonType,
|
||||
};
|
||||
48
addons/ondevice-notes/README.md
Normal file
48
addons/ondevice-notes/README.md
Normal file
@ -0,0 +1,48 @@
|
||||
# Storybook Addon On Device Notes
|
||||
|
||||
Storybook Addon On Device Notes allows you to write notes (text or markdown) for your stories in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
### 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/)**
|
||||
|
||||
```sh
|
||||
yarn add -D @storybook/addon-ondevice-notes
|
||||
```
|
||||
|
||||
Then create a file called `rn-addons.js` in your storybook config.
|
||||
|
||||
Add following content to it:
|
||||
|
||||
```js
|
||||
import '@storybook/addon-ondevice-notes/register';
|
||||
```
|
||||
|
||||
Then import `rn-addons.js` next to your `getStorybookUI` call.
|
||||
```js
|
||||
import './rn-addons';
|
||||
```
|
||||
|
||||
Then add the `withNotes` decorator to all stories in your `config.js`:
|
||||
|
||||
```js
|
||||
// Import from @storybook/X where X is your framework
|
||||
import { addDecorator } from '@storybook/react-native';
|
||||
import { withNotes } from '@storybook/addon-ondevice-notes';
|
||||
|
||||
addDecorator(withNotes);
|
||||
```
|
||||
|
||||
You can use the `notes` parameter to add a note to each story:
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
|
||||
import Component from './Component';
|
||||
|
||||
storiesOf('Component', module)
|
||||
.add('with some emoji', () => <Component />, { notes: 'A very simple component' });
|
||||
```
|
||||
BIN
addons/ondevice-notes/docs/demo.png
Normal file
BIN
addons/ondevice-notes/docs/demo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 253 KiB |
29
addons/ondevice-notes/package.json
Normal file
29
addons/ondevice-notes/package.json
Normal file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-notes",
|
||||
"version": "4.0.0-alpha.24",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"notes",
|
||||
"storybook"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybooks/storybook.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"jsnext:main": "src/index.js",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-alpha.24",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-native-simple-markdown": "^1.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
}
|
||||
}
|
||||
1
addons/ondevice-notes/register.js
Normal file
1
addons/ondevice-notes/register.js
Normal file
@ -0,0 +1 @@
|
||||
require('./dist/register.js');
|
||||
42
addons/ondevice-notes/src/__tests__/index.js
Normal file
42
addons/ondevice-notes/src/__tests__/index.js
Normal file
@ -0,0 +1,42 @@
|
||||
import addons from '@storybook/addons';
|
||||
import { withNotes } from '..';
|
||||
|
||||
addons.getChannel = jest.fn();
|
||||
|
||||
describe('Storybook Addon Notes', () => {
|
||||
it('should inject text from `notes` parameter', () => {
|
||||
const channel = { emit: jest.fn() };
|
||||
addons.getChannel.mockReturnValue(channel);
|
||||
|
||||
const getStory = jest.fn();
|
||||
const context = { parameters: { notes: 'hello' } };
|
||||
|
||||
withNotes(getStory, context);
|
||||
expect(channel.emit).toHaveBeenCalledWith('storybook/notes/add_notes', 'hello');
|
||||
expect(getStory).toHaveBeenCalledWith(context);
|
||||
});
|
||||
|
||||
it('should inject text even if no `notes` parameter is set to reset the addon', () => {
|
||||
const channel = { emit: jest.fn() };
|
||||
addons.getChannel.mockReturnValue(channel);
|
||||
|
||||
const getStory = jest.fn();
|
||||
const context = {};
|
||||
|
||||
withNotes(getStory, context);
|
||||
expect(channel.emit).toHaveBeenCalled();
|
||||
expect(getStory).toHaveBeenCalledWith(context);
|
||||
});
|
||||
|
||||
it('should inject markdown from `notes.markdown` parameter', () => {
|
||||
const channel = { emit: jest.fn() };
|
||||
addons.getChannel.mockReturnValue(channel);
|
||||
|
||||
const getStory = jest.fn();
|
||||
const context = { parameters: { notes: { markdown: '# hello' } } };
|
||||
|
||||
withNotes(getStory, context);
|
||||
expect(channel.emit).toHaveBeenCalledWith('storybook/notes/add_notes', '# hello');
|
||||
expect(getStory).toHaveBeenCalledWith(context);
|
||||
});
|
||||
});
|
||||
34
addons/ondevice-notes/src/index.js
Normal file
34
addons/ondevice-notes/src/index.js
Normal file
@ -0,0 +1,34 @@
|
||||
import addons, { makeDecorator } from '@storybook/addons';
|
||||
|
||||
export const withNotes = makeDecorator({
|
||||
name: 'withNotes',
|
||||
parameterName: 'notes',
|
||||
wrapper: (getStory, context, { options, parameters }) => {
|
||||
const channel = addons.getChannel();
|
||||
|
||||
const storyOptions = parameters || options;
|
||||
|
||||
if (!storyOptions) {
|
||||
channel.emit('storybook/notes/add_notes', '');
|
||||
|
||||
return getStory(context);
|
||||
}
|
||||
|
||||
const { text, markdown } =
|
||||
typeof storyOptions === 'string' ? { text: storyOptions } : storyOptions;
|
||||
|
||||
if (!text && !markdown) {
|
||||
throw new Error('You must set of one of `text` or `markdown` on the `notes` parameter');
|
||||
}
|
||||
|
||||
channel.emit('storybook/notes/add_notes', text || markdown);
|
||||
|
||||
return getStory(context);
|
||||
},
|
||||
});
|
||||
|
||||
export const withMarkdownNotes = (text, options) =>
|
||||
withNotes({
|
||||
markdown: text,
|
||||
markdownOptions: options,
|
||||
});
|
||||
65
addons/ondevice-notes/src/register.js
Normal file
65
addons/ondevice-notes/src/register.js
Normal file
@ -0,0 +1,65 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { View } from 'react-native';
|
||||
import Markdown from 'react-native-simple-markdown';
|
||||
import addons from '@storybook/addons';
|
||||
|
||||
export class Notes extends React.Component {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
this.state = { text: '' };
|
||||
this.onAddNotes = this.onAddNotes.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { channel } = this.props;
|
||||
// Listen to the notes and render it.
|
||||
channel.on('storybook/notes/add_notes', this.onAddNotes);
|
||||
}
|
||||
|
||||
// This is some cleanup tasks when the Notes panel is unmounting.
|
||||
componentWillUnmount() {
|
||||
this.unmounted = true;
|
||||
const { channel } = this.props;
|
||||
channel.removeListener('storybook/notes/add_notes', this.onAddNotes);
|
||||
}
|
||||
|
||||
onAddNotes(text) {
|
||||
this.setState({ text });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { active } = this.props;
|
||||
const { text } = this.state;
|
||||
const textAfterFormatted = text ? text.trim() : '';
|
||||
|
||||
return active ? (
|
||||
<View style={{ padding: 10, flex: 1 }}>
|
||||
<Markdown>{textAfterFormatted}</Markdown>
|
||||
</View>
|
||||
) : null;
|
||||
}
|
||||
}
|
||||
|
||||
Notes.propTypes = {
|
||||
active: PropTypes.bool.isRequired,
|
||||
channel: PropTypes.shape({
|
||||
on: PropTypes.func,
|
||||
emit: PropTypes.func,
|
||||
removeListener: PropTypes.func,
|
||||
}).isRequired,
|
||||
api: PropTypes.shape({
|
||||
onStory: PropTypes.func,
|
||||
getQueryParam: PropTypes.func,
|
||||
setQueryParams: PropTypes.func,
|
||||
}).isRequired,
|
||||
};
|
||||
|
||||
addons.register('storybook/notes', api => {
|
||||
const channel = addons.getChannel();
|
||||
addons.addPanel('storybook/notes/panel', {
|
||||
title: 'Notes',
|
||||
// eslint-disable-next-line react/prop-types
|
||||
render: ({ active }) => <Notes channel={channel} api={api} active={active} />,
|
||||
});
|
||||
});
|
||||
@ -441,23 +441,30 @@ initStoryshots({
|
||||
```
|
||||
|
||||
If you are using enzyme, you need to make sure jest knows how to serialize rendered components.
|
||||
You can either pass in a serializer (see below) or specify an enzyme-compatible serializer (like [enzyme-to-json](https://github.com/adriantoine/enzyme-to-json), [jest-serializer-enzyme](https://github.com/rogeliog/jest-serializer-enzyme) etc.) as the default `snapshotSerializer` in your config.
|
||||
For that, you can pass an enzyme-compatible snapshotSerializer (like [enzyme-to-json](https://github.com/adriantoine/enzyme-to-json), [jest-serializer-enzyme](https://github.com/rogeliog/jest-serializer-enzyme) etc.) with the `snapshotSerializer` option (see below).
|
||||
|
||||
Example for jest config in `package.json`:
|
||||
```json
|
||||
"devDependencies": {
|
||||
"enzyme-to-json": "^3.2.2"
|
||||
},
|
||||
"jest": {
|
||||
"snapshotSerializers": [
|
||||
"enzyme-to-json/serializer"
|
||||
]
|
||||
}
|
||||
|
||||
### `snapshotSerializers`
|
||||
|
||||
Pass an array of snapshotSerializers to the jest runtime that serializes your story (such as enzyme-to-json).
|
||||
|
||||
```js
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
import { createSerializer } from 'enzyme-to-json';
|
||||
|
||||
initStoryshots({
|
||||
renderer: mount,
|
||||
snapshotSerializers: [createSerializer()],
|
||||
});
|
||||
```
|
||||
|
||||
### `serializer`
|
||||
This option needs to be set if either:
|
||||
* the multiSnapshot function is used to create multiple snapshot files (i.e. one per story), since it ignores any serializers specified in your jest config.
|
||||
* serializers not specified in your jest config should be used when snapshotting stories.
|
||||
|
||||
Pass a custom serializer (such as enzyme-to-json) to serialize components to snapshot-comparable data.
|
||||
### `serializer` (deprecated)
|
||||
|
||||
Pass a custom serializer (such as enzyme-to-json) to serialize components to snapshot-comparable data. The functionality of this option is completely covered by [snapshotSerializers](`snapshotSerializers`) which should be used instead.
|
||||
|
||||
```js
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
"storybook": "start-storybook -p 6006"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@storybook/addons": "4.0.0-alpha.24",
|
||||
"glob": "^7.1.3",
|
||||
"global": "^4.3.2",
|
||||
@ -37,9 +37,9 @@
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "4.0.0-alpha.24",
|
||||
"@storybook/addon-links": "4.0.0-alpha.24",
|
||||
"@storybook/addons": "4.0.0-alpha.20",
|
||||
"@storybook/addons": "4.0.0-alpha.24",
|
||||
"@storybook/react": "4.0.0-alpha.24",
|
||||
"enzyme-to-json": "^3.3.4",
|
||||
"react": "^16.4.2"
|
||||
"react": "^16.5.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,6 +28,7 @@ function ensureOptionsDefaults(options) {
|
||||
storyKindRegex,
|
||||
renderer,
|
||||
serializer,
|
||||
snapshotSerializers,
|
||||
stories2snapsConverter = defaultStories2SnapsConverter,
|
||||
test: testMethod = snapshotWithOptions({ renderer, serializer }),
|
||||
} = options;
|
||||
@ -41,6 +42,7 @@ function ensureOptionsDefaults(options) {
|
||||
storyKindRegex,
|
||||
stories2snapsConverter,
|
||||
testMethod,
|
||||
snapshotSerializers,
|
||||
integrityOptions,
|
||||
};
|
||||
}
|
||||
|
||||
@ -39,6 +39,7 @@ function testStorySnapshots(options = {}) {
|
||||
stories2snapsConverter,
|
||||
testMethod,
|
||||
integrityOptions,
|
||||
snapshotSerializers,
|
||||
} = ensureOptionsDefaults(options);
|
||||
|
||||
const testMethodParams = {
|
||||
@ -58,6 +59,7 @@ function testStorySnapshots(options = {}) {
|
||||
storyNameRegex,
|
||||
testMethod,
|
||||
testMethodParams,
|
||||
snapshotSerializers,
|
||||
});
|
||||
|
||||
integrityTest(integrityOptions, stories2snapsConverter);
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { describe, it } from 'global';
|
||||
import { addSerializer } from 'jest-specific-snapshot';
|
||||
|
||||
function snapshotTest({
|
||||
asyncJest,
|
||||
@ -48,7 +49,14 @@ function snapshotTestSuite({ kind, stories, suite, storyNameRegex, ...restParams
|
||||
});
|
||||
}
|
||||
|
||||
function snapshotsTests({ groups, storyKindRegex, ...restParams }) {
|
||||
function snapshotsTests({ groups, storyKindRegex, snapshotSerializers, ...restParams }) {
|
||||
if (snapshotSerializers) {
|
||||
snapshotSerializers.forEach(serializer => {
|
||||
addSerializer(serializer);
|
||||
expect.addSnapshotSerializer(serializer);
|
||||
});
|
||||
}
|
||||
|
||||
// eslint-disable-next-line
|
||||
for (const group of groups) {
|
||||
const { fileName, kind, stories } = group;
|
||||
|
||||
@ -5,7 +5,15 @@ function getRenderedTree(story, context, { renderer, serializer, ...rendererOpti
|
||||
const storyElement = story.render(context);
|
||||
const currentRenderer = renderer || reactTestRenderer.create;
|
||||
const tree = currentRenderer(storyElement, rendererOptions);
|
||||
return serializer ? serializer(tree) : tree;
|
||||
|
||||
if (serializer) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn(
|
||||
'The "serializer" option of @storybook/addon-storyshots has been deprecated. Please use "snapshotSerializers: [<your serializer>]" in the future.'
|
||||
);
|
||||
return serializer(tree);
|
||||
}
|
||||
return tree;
|
||||
}
|
||||
|
||||
export default getRenderedTree;
|
||||
|
||||
@ -11,7 +11,7 @@ exports[`Storyshots Another Button with some emoji 1`] = `
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
<ForwardRef
|
||||
<Button
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Styled(button)
|
||||
@ -29,7 +29,7 @@ exports[`Storyshots Another Button with some emoji 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</Styled(button)>
|
||||
</ForwardRef>
|
||||
</Button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Another Button with text 1`] = `
|
||||
@ -43,7 +43,7 @@ exports[`Storyshots Another Button with text 1`] = `
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
<ForwardRef
|
||||
<Button
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Styled(button)
|
||||
@ -56,7 +56,7 @@ exports[`Storyshots Another Button with text 1`] = `
|
||||
Hello Button
|
||||
</button>
|
||||
</Styled(button)>
|
||||
</ForwardRef>
|
||||
</Button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
|
||||
@ -76,7 +76,7 @@ exports[`Storyshots Button with some emoji 1`] = `
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
<ForwardRef
|
||||
<Button
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Styled(button)
|
||||
@ -94,7 +94,7 @@ exports[`Storyshots Button with some emoji 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</Styled(button)>
|
||||
</ForwardRef>
|
||||
</Button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button with text 1`] = `
|
||||
@ -108,7 +108,7 @@ exports[`Storyshots Button with text 1`] = `
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
<ForwardRef
|
||||
<Button
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Styled(button)
|
||||
@ -121,7 +121,7 @@ exports[`Storyshots Button with text 1`] = `
|
||||
Hello Button
|
||||
</button>
|
||||
</Styled(button)>
|
||||
</ForwardRef>
|
||||
</Button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Welcome to Storybook 1`] = `
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import path from 'path';
|
||||
import { mount } from 'enzyme';
|
||||
import toJSON from 'enzyme-to-json';
|
||||
import { createSerializer } from 'enzyme-to-json';
|
||||
import initStoryshots from '../src';
|
||||
|
||||
initStoryshots({
|
||||
framework: 'react',
|
||||
configPath: path.join(__dirname, '..', '.storybook'),
|
||||
renderer: mount,
|
||||
serializer: toJSON,
|
||||
snapshotSerializers: [createSerializer()],
|
||||
});
|
||||
|
||||
@ -24,10 +24,10 @@
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@storybook/node-logger": "4.0.0-alpha.24",
|
||||
"jest-image-snapshot": "^2.5.0",
|
||||
"puppeteer": "^1.6.2"
|
||||
"puppeteer": "^1.9.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "4.0.0-alpha.16"
|
||||
|
||||
@ -24,14 +24,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@storybook/addons": "4.0.0-alpha.24",
|
||||
"@storybook/components": "4.0.0-alpha.24",
|
||||
"estraverse": "^4.2.0",
|
||||
"loader-utils": "^1.1.0",
|
||||
"prettier": "^1.14.0",
|
||||
"prettier": "^1.14.3",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-syntax-highlighter": "^8.0.1"
|
||||
"react-syntax-highlighter": "^9.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
|
||||
@ -360,7 +360,7 @@ describe('Viewport/Panel', () => {
|
||||
});
|
||||
|
||||
it('passes the children', () => {
|
||||
expect(select.props().children).toHaveLength(15);
|
||||
expect(select.props().children).toHaveLength(17);
|
||||
});
|
||||
|
||||
it('onChange it updates the viewport', () => {
|
||||
|
||||
@ -43,16 +43,32 @@ export const INITIAL_VIEWPORTS = {
|
||||
iphone8p: {
|
||||
name: 'iPhone 8 Plus',
|
||||
styles: {
|
||||
height: '960px',
|
||||
width: '540px',
|
||||
height: '736px',
|
||||
width: '414px',
|
||||
},
|
||||
type: 'mobile',
|
||||
},
|
||||
iphonex: {
|
||||
name: 'iPhone X',
|
||||
styles: {
|
||||
height: '1218px',
|
||||
width: '563px',
|
||||
height: '812px',
|
||||
width: '375px',
|
||||
},
|
||||
type: 'mobile',
|
||||
},
|
||||
iphonexr: {
|
||||
name: 'iPhone XR',
|
||||
styles: {
|
||||
height: '896px',
|
||||
width: '414px',
|
||||
},
|
||||
type: 'mobile',
|
||||
},
|
||||
iphonexsmax: {
|
||||
name: 'iPhone Xs Max',
|
||||
styles: {
|
||||
height: '896px',
|
||||
width: '414px',
|
||||
},
|
||||
type: 'mobile',
|
||||
},
|
||||
|
||||
@ -28,18 +28,19 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@storybook/core": "4.0.0-alpha.24",
|
||||
"@storybook/node-logger": "4.0.0-alpha.24",
|
||||
"angular2-template-loader": "^0.6.2",
|
||||
"core-js": "^2.5.7",
|
||||
"fork-ts-checker-webpack-plugin": "^0.4.9",
|
||||
"fork-ts-checker-webpack-plugin": "^0.4.10",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.4.2",
|
||||
"react-dom": "^16.4.2",
|
||||
"react": "^16.5.2",
|
||||
"react-dom": "^16.5.2",
|
||||
"sass-loader": "^7.1.0",
|
||||
"ts-loader": "^4.5.0",
|
||||
"webpack": "^4.20.0",
|
||||
"ts-loader": "^5.2.1",
|
||||
"tsconfig-paths-webpack-plugin": "^3.2.0",
|
||||
"webpack": "^4.20.2",
|
||||
"zone.js": "^0.8.26"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
86
app/angular/src/server/angular-cli_config.js
vendored
86
app/angular/src/server/angular-cli_config.js
vendored
@ -1,8 +1,46 @@
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
|
||||
import { isBuildAngularInstalled, normalizeAssetPatterns } from './angular-cli_utils';
|
||||
|
||||
function getTsConfigOptions(tsConfigPath) {
|
||||
const basicOptions = {
|
||||
options: {},
|
||||
raw: {},
|
||||
fileNames: [],
|
||||
errors: [],
|
||||
};
|
||||
|
||||
if (!fs.existsSync(tsConfigPath)) {
|
||||
return basicOptions;
|
||||
}
|
||||
|
||||
const tsConfig = JSON.parse(fs.readFileSync(tsConfigPath, 'utf8'));
|
||||
const { baseUrl } = tsConfig.compilerOptions || {};
|
||||
|
||||
if (baseUrl) {
|
||||
const tsConfigDirName = path.dirname(tsConfigPath);
|
||||
basicOptions.options.baseUrl = path.resolve(tsConfigDirName, baseUrl);
|
||||
}
|
||||
|
||||
return basicOptions;
|
||||
}
|
||||
|
||||
function getAngularCliParts(cliWebpackConfigOptions) {
|
||||
// eslint-disable-next-line global-require, import/no-extraneous-dependencies
|
||||
const ngCliConfigFactory = require('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs');
|
||||
|
||||
try {
|
||||
return {
|
||||
cliCommonConfig: ngCliConfigFactory.getCommonConfig(cliWebpackConfigOptions),
|
||||
cliStyleConfig: ngCliConfigFactory.getStylesConfig(cliWebpackConfigOptions),
|
||||
};
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export function getAngularCliWebpackConfigOptions(dirToSearch) {
|
||||
const fname = path.join(dirToSearch, 'angular.json');
|
||||
|
||||
@ -31,16 +69,16 @@ export function getAngularCliWebpackConfigOptions(dirToSearch) {
|
||||
project.sourceRoot
|
||||
);
|
||||
|
||||
const projectRoot = path.resolve(dirToSearch, project.root);
|
||||
const tsConfigPath = path.resolve(dirToSearch, projectOptions.tsConfig);
|
||||
const tsConfig = getTsConfigOptions(tsConfigPath);
|
||||
|
||||
return {
|
||||
root: dirToSearch,
|
||||
projectRoot: path.resolve(dirToSearch, project.root),
|
||||
projectRoot,
|
||||
tsConfigPath,
|
||||
tsConfig,
|
||||
supportES2015: false,
|
||||
tsConfig: {
|
||||
options: {},
|
||||
fileNames: [],
|
||||
errors: [],
|
||||
},
|
||||
tsConfigPath: path.resolve(dirToSearch, 'src/tsconfig.app.json'),
|
||||
buildOptions: {
|
||||
...projectOptions,
|
||||
assets: normalizedAssets,
|
||||
@ -49,27 +87,26 @@ export function getAngularCliWebpackConfigOptions(dirToSearch) {
|
||||
}
|
||||
|
||||
export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions) {
|
||||
if (!cliWebpackConfigOptions) return baseConfig;
|
||||
if (!cliWebpackConfigOptions) {
|
||||
return baseConfig;
|
||||
}
|
||||
|
||||
if (!isBuildAngularInstalled()) {
|
||||
logger.info('=> Using base config because @angular-devkit/build-angular is not installed.');
|
||||
return baseConfig;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line global-require, import/no-extraneous-dependencies
|
||||
const ngcliConfigFactory = require('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs');
|
||||
const cliParts = getAngularCliParts(cliWebpackConfigOptions);
|
||||
|
||||
let cliCommonConfig;
|
||||
let cliStyleConfig;
|
||||
try {
|
||||
cliCommonConfig = ngcliConfigFactory.getCommonConfig(cliWebpackConfigOptions);
|
||||
cliStyleConfig = ngcliConfigFactory.getStylesConfig(cliWebpackConfigOptions);
|
||||
} catch (e) {
|
||||
if (!cliParts) {
|
||||
logger.warn('=> Failed to get angular-cli webpack config.');
|
||||
return baseConfig;
|
||||
}
|
||||
|
||||
logger.info('=> Get angular-cli webpack config.');
|
||||
|
||||
const { cliCommonConfig, cliStyleConfig } = cliParts;
|
||||
|
||||
// Don't use storybooks .css/.scss rules because we have to use rules created by @angular-devkit/build-angular
|
||||
// because @angular-devkit/build-angular created rules have include/exclude for global style files.
|
||||
const rulesExcludingStyles = baseConfig.module.rules.filter(
|
||||
@ -85,7 +122,7 @@ export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions
|
||||
.concat(Object.values(cliStyleConfig.entry).reduce((acc, item) => acc.concat(item), [])),
|
||||
};
|
||||
|
||||
const mod = {
|
||||
const module = {
|
||||
...baseConfig.module,
|
||||
rules: [...cliStyleConfig.module.rules, ...rulesExcludingStyles],
|
||||
};
|
||||
@ -93,11 +130,24 @@ export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions
|
||||
// We use cliCommonConfig plugins to serve static assets files.
|
||||
const plugins = [...cliStyleConfig.plugins, ...cliCommonConfig.plugins, ...baseConfig.plugins];
|
||||
|
||||
const resolve = {
|
||||
...baseConfig.resolve,
|
||||
modules: Array.from(
|
||||
new Set([...baseConfig.resolve.modules, ...cliCommonConfig.resolve.modules])
|
||||
),
|
||||
plugins: [
|
||||
new TsconfigPathsPlugin({
|
||||
configFile: cliWebpackConfigOptions.buildOptions.tsConfig,
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
return {
|
||||
...baseConfig,
|
||||
entry,
|
||||
module: mod,
|
||||
module,
|
||||
plugins,
|
||||
resolve,
|
||||
resolveLoader: cliCommonConfig.resolveLoader,
|
||||
};
|
||||
}
|
||||
|
||||
1
app/angular/src/server/index.js
vendored
1
app/angular/src/server/index.js
vendored
@ -1,5 +1,4 @@
|
||||
import { buildDev } from '@storybook/core/server';
|
||||
|
||||
import options from './options';
|
||||
|
||||
buildDev(options);
|
||||
|
||||
8
app/angular/standalone.js
vendored
Normal file
8
app/angular/standalone.js
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
const build = require('@storybook/core/standalone');
|
||||
const frameworkOptions = require('./dist/server/options').default;
|
||||
|
||||
async function buildStandalone(options) {
|
||||
return build(options, frameworkOptions);
|
||||
}
|
||||
|
||||
module.exports = buildStandalone;
|
||||
@ -25,15 +25,17 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"@ember/test-helpers": "^0.7.25",
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@ember/test-helpers": "^0.7.26",
|
||||
"@storybook/core": "4.0.0-alpha.24",
|
||||
"global": "^4.3.2"
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.5.2",
|
||||
"react-dom": "^16.5.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-loader": "^7.0.0 || ^8.0.0",
|
||||
"babel-plugin-ember-modules-api-polyfill": "^2.4.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"ember-cli-htmlbars-inline-precompile": "^1.0.3",
|
||||
"ember-source": "^3.4.0"
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { buildDev } from '@storybook/core/server';
|
||||
|
||||
import options from './options';
|
||||
|
||||
buildDev(options);
|
||||
|
||||
8
app/ember/standalone.js
Normal file
8
app/ember/standalone.js
Normal file
@ -0,0 +1,8 @@
|
||||
const build = require('@storybook/core/standalone');
|
||||
const frameworkOptions = require('./dist/server/options').default;
|
||||
|
||||
async function buildStandalone(options) {
|
||||
return build(options, frameworkOptions);
|
||||
}
|
||||
|
||||
module.exports = buildStandalone;
|
||||
@ -27,13 +27,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@storybook/core": "4.0.0-alpha.24",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"html-loader": "^0.5.5",
|
||||
"react": "^16.4.2",
|
||||
"react-dom": "^16.4.2"
|
||||
"react": "^16.5.2",
|
||||
"react-dom": "^16.5.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-loader": "^7.0.0 || ^8.0.0"
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { buildDev } from '@storybook/core/server';
|
||||
|
||||
import options from './options';
|
||||
|
||||
buildDev(options);
|
||||
|
||||
8
app/html/standalone.js
Normal file
8
app/html/standalone.js
Normal file
@ -0,0 +1,8 @@
|
||||
const build = require('@storybook/core/standalone');
|
||||
const frameworkOptions = require('./dist/server/options').default;
|
||||
|
||||
async function buildStandalone(options) {
|
||||
return build(options, frameworkOptions);
|
||||
}
|
||||
|
||||
module.exports = buildStandalone;
|
||||
@ -28,14 +28,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@storybook/core": "4.0.0-alpha.24",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"marko-loader": "^1.3.3",
|
||||
"raw-loader": "^0.5.1",
|
||||
"react": "^16.4.2",
|
||||
"react-dom": "^16.4.2"
|
||||
"react": "^16.5.2",
|
||||
"react-dom": "^16.5.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-loader": "^7.0.0 || ^8.0.0",
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { buildDev } from '@storybook/core/server';
|
||||
|
||||
import options from './options';
|
||||
|
||||
buildDev(options);
|
||||
|
||||
8
app/marko/standalone.js
Normal file
8
app/marko/standalone.js
Normal file
@ -0,0 +1,8 @@
|
||||
const build = require('@storybook/core/standalone');
|
||||
const frameworkOptions = require('./dist/server/options').default;
|
||||
|
||||
async function buildStandalone(options) {
|
||||
return build(options, frameworkOptions);
|
||||
}
|
||||
|
||||
module.exports = buildStandalone;
|
||||
@ -29,12 +29,12 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.0.0",
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@storybook/core": "4.0.0-alpha.24",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.4.2",
|
||||
"react-dom": "^16.4.2"
|
||||
"react": "^16.5.2",
|
||||
"react-dom": "^16.5.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"mithril": "^1.1.6"
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { buildDev } from '@storybook/core/server';
|
||||
|
||||
import options from './options';
|
||||
|
||||
buildDev(options);
|
||||
|
||||
8
app/mithril/standalone.js
Normal file
8
app/mithril/standalone.js
Normal file
@ -0,0 +1,8 @@
|
||||
const build = require('@storybook/core/standalone');
|
||||
const frameworkOptions = require('./dist/server/options').default;
|
||||
|
||||
async function buildStandalone(options) {
|
||||
return build(options, frameworkOptions);
|
||||
}
|
||||
|
||||
module.exports = buildStandalone;
|
||||
@ -28,14 +28,14 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/polyfill": "^7.0.0",
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@storybook/core": "4.0.0-alpha.24",
|
||||
"@webcomponents/webcomponentsjs": "^1.2.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.4.2",
|
||||
"react-dom": "^16.4.2",
|
||||
"webpack": "^4.20.0"
|
||||
"react": "^16.5.2",
|
||||
"react-dom": "^16.5.2",
|
||||
"webpack": "^4.20.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"lit-html": "^0.10.2",
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { buildDev } from '@storybook/core/server';
|
||||
|
||||
import options from './options';
|
||||
|
||||
buildDev(options);
|
||||
|
||||
8
app/polymer/standalone.js
Normal file
8
app/polymer/standalone.js
Normal file
@ -0,0 +1,8 @@
|
||||
const build = require('@storybook/core/standalone');
|
||||
const frameworkOptions = require('./dist/server/options').default;
|
||||
|
||||
async function buildStandalone(options) {
|
||||
return build(options, frameworkOptions);
|
||||
}
|
||||
|
||||
module.exports = buildStandalone;
|
||||
50
app/react-native/docs/addons.md
Normal file
50
app/react-native/docs/addons.md
Normal file
@ -0,0 +1,50 @@
|
||||
# Addons
|
||||
|
||||
Storybook supports addons. You can read more about them [here](https://storybook.js.org/addons/introduction/)
|
||||
|
||||
There is one big difference in React Native is that it has two types of addons: Addons that work in the browser
|
||||
and addons that work on the app itself (on device addons).
|
||||
|
||||
## Browser addons
|
||||
Browser addons are default addons to storybook. You create a file called addons.js inside storybook and it is
|
||||
automatically added inside your browser.
|
||||
|
||||
## On device addons
|
||||
On device addons are addons that are displayed in your app in addons panel.
|
||||
To use them you have to create a file called `rn-addons.js` next to your storybook entry.
|
||||
Because React Native does not dynamically resolve imports, you also have to manually import them.
|
||||
Example:
|
||||
**storybook/index.js**
|
||||
```
|
||||
import { getStorybookUI, configure } from '@storybook/react-native';
|
||||
import './rn-addons';
|
||||
// import stories
|
||||
configure(() => {
|
||||
require($PATH_TO_STORIES);
|
||||
}, module);
|
||||
|
||||
const StorybookUI = getStorybookUI();
|
||||
export default StorybookUI;
|
||||
|
||||
**storybook/rn-addons.js**
|
||||
```
|
||||
import '@storybook/addon-ondevice-knobs/register';
|
||||
import '@storybook/addon-ondevice-notes/register';
|
||||
...
|
||||
```
|
||||
|
||||
This step is done automatically when you install Storybook for the first time and also described in [Manual Setup](https://github.com/storybooks/storybook/blob/master/app/react-native/docs/manual-setup.md)
|
||||
|
||||
## Compatibility
|
||||
Addon compatibilty can be found [here](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
## Performance of on device addons
|
||||
Because on device addons are inside the app, they are also rerendered on every change. This can reduce performance a lot.
|
||||
|
||||
## Writing the on device addons
|
||||
On device addons use same addon store and api as web addons. The only difference in api is that you don't have `api` prop
|
||||
and have to rely on channel for everything.
|
||||
|
||||
The main difference between browser and app addons is that the render has to be supported by React Native (View, Text).
|
||||
For more info about writing addons read [writing addons](https://storybook.js.org/addons/writing-addons/) section in
|
||||
storybook documentation.
|
||||
@ -6,31 +6,37 @@ First, install the `@storybook/react-native` module
|
||||
npm install @storybook/react-native
|
||||
```
|
||||
|
||||
Create a new directory called `storybook` in your project root and create an entry file (index.ios.js or index.android.js) as given below. (Don't forget to replace "MyApplicationName" with your app name).
|
||||
Create a new directory called `storybook` in your project root and create an entry file (index.js) as given below.
|
||||
(Don't forget to replace "MyApplicationName" with your app name).
|
||||
|
||||
**storybook/index.js**
|
||||
```js
|
||||
import { AppRegistry } from 'react-native';
|
||||
import { getStorybookUI, configure } from '@storybook/react-native';
|
||||
import './addons';
|
||||
import './rn-addons';
|
||||
|
||||
// import your stories
|
||||
configure(function() {
|
||||
// import stories
|
||||
configure(() => {
|
||||
// eslint-disable-next-line global-require
|
||||
require('./stories');
|
||||
}, module);
|
||||
|
||||
const StorybookUI = getStorybookUI({
|
||||
port: 7007,
|
||||
host: 'localhost',
|
||||
});
|
||||
AppRegistry.registerComponent('MyApplicationName', () => StorybookUI);
|
||||
const StorybookUIRoot = getStorybookUI();
|
||||
|
||||
AppRegistry.registerComponent('MyApplicationName', () => StorybookUIRoot);
|
||||
export default StorybookUIRoot;
|
||||
```
|
||||
|
||||
Create a file named `addons.js` file in `storybook` directory to use addons. Here is a list of default addons:
|
||||
Create a file called `rn-addons.js`
|
||||
In this file you can import on device addons.
|
||||
|
||||
```js
|
||||
import '@storybook/addon-actions';
|
||||
import '@storybook/addon-links';
|
||||
**storybook/rn-addons.js**
|
||||
```
|
||||
import '@storybook/addon-ondevice-knobs/register';
|
||||
import '@storybook/addon-ondevice-notes/register';
|
||||
...
|
||||
```
|
||||
|
||||
|
||||
Then write your first story in the `stories` directory like this:
|
||||
|
||||
@ -58,12 +64,31 @@ storiesOf('CenteredView')
|
||||
));
|
||||
```
|
||||
|
||||
Then add following NPM script into your `package.json` file:
|
||||
Finally replace your app entry with
|
||||
```js
|
||||
import './storybook';
|
||||
```
|
||||
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.
|
||||
|
||||
## Server support
|
||||
|
||||
If you want to support having a storybook server running add following NPM script into your `package.json` file:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"storybook": "storybook start -p 7007"
|
||||
"storybook": "storybook start"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
If you want to have addons inside browser, create a file named `addons.js` file in `storybook`. Here is a list of default addons:
|
||||
|
||||
**storybook/addons.js**
|
||||
```js
|
||||
import '@storybook/addon-actions';
|
||||
import '@storybook/addon-links';
|
||||
```
|
||||
|
||||
|
||||
24
app/react-native/docs/server.md
Normal file
24
app/react-native/docs/server.md
Normal file
@ -0,0 +1,24 @@
|
||||
# Storybook server
|
||||
The default usage of React Native Storybook till version 4 involved starting Storybook server.
|
||||
Starting from v4 we do not expect user to start the server since in most cases it is not really necessary.
|
||||
|
||||
In case you still want to run Storybook server simply call `npm run storybook` or `npx storybook start`.
|
||||
|
||||
## Benefits of storybook server
|
||||
|
||||
* ### Websockets connection
|
||||
The main benefit you get from running storybook server is that your app will be listening for websockets connection.
|
||||
That means that you can create your own tools that integrate with your storybook app.
|
||||
|
||||
* ### IDE Plugins
|
||||
Having server running allows you to control your storybook view from inside web page or your ide.
|
||||
|
||||
There is a plugin for [JetBrains IDEs](https://plugins.jetbrains.com/plugin/9910-storybook) and there is one
|
||||
for [VS Code](https://github.com/orta/vscode-react-native-storybooks).
|
||||
|
||||
|
||||
* ### Web addons
|
||||
There are Storybook addons that work with React Native but do not have on device implementations.
|
||||
|
||||
|
||||
|
||||
@ -29,12 +29,13 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.0.0-alpha.24",
|
||||
"@storybook/channels": "4.0.0-alpha.24",
|
||||
"@storybook/channel-websocket": "4.0.0-alpha.24",
|
||||
"@storybook/core": "4.0.0-alpha.24",
|
||||
"@storybook/core-events": "4.0.0-alpha.24",
|
||||
"@storybook/ui": "4.0.0-alpha.24",
|
||||
"babel-loader": "^7.1.5",
|
||||
"babel-plugin-macros": "^2.3.0",
|
||||
"babel-loader": "^8.0.4",
|
||||
"babel-plugin-macros": "^2.4.2",
|
||||
"babel-plugin-syntax-async-functions": "^6.13.0",
|
||||
"babel-plugin-syntax-trailing-function-commas": "^6.22.0",
|
||||
"babel-plugin-transform-class-properties": "^6.24.1",
|
||||
@ -42,33 +43,30 @@
|
||||
"babel-plugin-transform-regenerator": "^6.26.0",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"babel-preset-flow": "^6.23.0",
|
||||
"babel-preset-minify": "^0.4.2",
|
||||
"babel-preset-minify": "^0.5.0",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"babel-register": "^6.26.0",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"case-sensitive-paths-webpack-plugin": "^2.1.2",
|
||||
"commander": "^2.17.0",
|
||||
"commander": "^2.19.0",
|
||||
"dotenv-webpack": "^1.5.7",
|
||||
"ejs": "^2.6.1",
|
||||
"express": "^4.16.3",
|
||||
"find-cache-dir": "^2.0.0",
|
||||
"generate-page-webpack-plugin": "^1.1.0",
|
||||
"global": "^4.3.2",
|
||||
"json5": "^2.0.1",
|
||||
"html-webpack-plugin": "^4.0.0-beta.1",
|
||||
"json5": "^2.1.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"raw-loader": "^0.5.1",
|
||||
"react-dev-utils": "6.0.0-next.2150693d",
|
||||
"react-native-compat": "^1.0.0",
|
||||
"react-native-iphone-x-helper": "^1.0.3",
|
||||
"react-dev-utils": "6.0.4",
|
||||
"react-native-swipe-gestures": "^1.0.2",
|
||||
"shelljs": "^0.8.2",
|
||||
"universal-dotenv": "^1.9.0",
|
||||
"universal-dotenv": "^1.9.1",
|
||||
"url-parse": "^1.4.3",
|
||||
"uuid": "^3.3.2",
|
||||
"webpack": "^4.20.0",
|
||||
"webpack": "^4.20.2",
|
||||
"webpack-dev-middleware": "^3.4.0",
|
||||
"webpack-hot-middleware": "^2.24.2",
|
||||
"ws": "^6.0.0"
|
||||
"webpack-hot-middleware": "^2.24.3",
|
||||
"ws": "^6.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react-native": "^0.52.2"
|
||||
|
||||
@ -15,14 +15,11 @@ npm -g i @storybook/cli
|
||||
storybook init
|
||||
```
|
||||
|
||||
After you have installed, there are additional steps for `create-react-native-app` apps. See the section for details, otherwise skip to [Start Storybook](#start-storybook)
|
||||
to see the next step.
|
||||
The next thing you need to do is make Storybook UI visible in your app.
|
||||
|
||||
## Create React Native App (CRNA)
|
||||
### CRNA, React Native vanilla
|
||||
|
||||
If you run `storybook init` inside a CRNA app, you'll be notified that there is an extra step required to use Storybook.
|
||||
|
||||
The easiest way to use Storybook inside CRNA is to simply replace your App with the Storybook UI, which is possible by replacing `App.js` with a single line of code:
|
||||
The easiest way to use Storybook is to simply replace your App with the Storybook UI, which is possible by replacing `App.js` with a single line of code:
|
||||
|
||||
```js
|
||||
export default from './storybook';
|
||||
@ -39,10 +36,13 @@ import App from './app';
|
||||
module.exports = __DEV__ ? StorybookUI : App;
|
||||
```
|
||||
|
||||
Alternatively, `StorybookUI` is simply a RN `View` component that can be embedded anywhere in your RN application, e.g. on a tab or within an admin screen.
|
||||
### React Native Navigation, other complex use cases
|
||||
|
||||
## Start Storybook
|
||||
`StorybookUI` is simply a RN `View` component that can be embedded anywhere in your RN application, e.g. on a tab or within an admin screen.
|
||||
|
||||
|
||||
## Start Storybook server (optional)
|
||||
If you want to control storybook from browser/VS Code/websockets you need to start the server.
|
||||
After initial setup start the storybook server with the storybook npm script.
|
||||
|
||||
```shell
|
||||
@ -51,6 +51,15 @@ npm run storybook
|
||||
|
||||
Now, you can open <http://localhost:7007> to view your storybook menus in the browser.
|
||||
|
||||
## Old standalone behaviour
|
||||
Since storybook version v4.0 packager is removed from storybook.
|
||||
The suggested storybook usage is to include it inside your app.
|
||||
If you want to keep the old behaviour, you have to start the packager yourself with a different project root.
|
||||
|
||||
```
|
||||
npm run storybook start -p 7007 | react-native start --projectRoot storybook
|
||||
```
|
||||
|
||||
## Start App
|
||||
|
||||
To see your Storybook stories on the device, you should start your mobile app for the `<platform>` of your choice (typically `ios` or `android`). (Note that due to an implementation detail, your stories will only show up in the left pane of your browser window after your device has connected to this storybook server.)
|
||||
@ -68,41 +77,6 @@ Once your app is started, changing the selected story in web browser will update
|
||||
If you are using Android and you get the following error after running the app: `'websocket: connection error', 'Failed to connect to localhost/127.0.0.1:7007'`, you have to forward the port 7007 on your device/emulator to port 7007 on your local machine with the following command:
|
||||
`adb reverse tcp:7007 tcp:7007`
|
||||
|
||||
## Using Haul-cli
|
||||
|
||||
[Haul](https://github.com/callstack-io/haul) is an alternative to the react-native packager and has several advantages in that it allows you to define your own loaders, and handles symlinks better.
|
||||
|
||||
If you want to use haul instead of the react-native packager, modify the storybook npm script to:
|
||||
|
||||
```sh
|
||||
storybook start -p 7007 --haul webpack.haul.storybook.js --platform android | ios | all
|
||||
```
|
||||
|
||||
Where webpack.haul.storybook.js should look something like this:
|
||||
|
||||
```js
|
||||
module.exports = ({ platform }) => ({
|
||||
entry: `./storybook/index.${platform}.js`,
|
||||
// any other haul config here.
|
||||
});
|
||||
```
|
||||
|
||||
## Seamless Typescript Integration
|
||||
|
||||
*Note: These instructions are for react-native >= 0.45, @storybook/react-native >= 4.0.0-alpha.2 or higher and the (default) [metro](https://github.com/facebook/metro) bundler*
|
||||
|
||||
For seamless type integration (no intermediate build step) we use the custom rn cli config feature and the [react-native-typescript-transformer](https://github.com/ds300/react-native-typescript-transformer) project
|
||||
|
||||
First follow the instructions [here](https://github.com/ds300/react-native-typescript-transformer#step-1-install).
|
||||
|
||||
Now update your storybook `package.json` script to the following
|
||||
|
||||
"scripts": {
|
||||
"storybook": "storybook start --metro-config $PWD/rn-cli.config.js -p 7007"
|
||||
}
|
||||
|
||||
The metro bundler requires an absolute path to the config. The above setup assumes the `rn-cli.config.js` is in the root of your project or next to your `package.json`
|
||||
|
||||
## Start Command Parameters
|
||||
|
||||
The following parameters can be passed to the start command:
|
||||
@ -112,32 +86,16 @@ The following parameters can be passed to the start command:
|
||||
host to listen on
|
||||
-p, --port <port>
|
||||
port to listen on
|
||||
--haul <configFile>
|
||||
use haul with config file
|
||||
--platform <ios|android|all>
|
||||
build platform-specific build
|
||||
-s, --secured
|
||||
whether server is running on https
|
||||
-c, --config-dir [dir-name]
|
||||
storybook config directory
|
||||
--metro-config [relative-config-path]
|
||||
Metro Bundler Custom config
|
||||
-e, --environment [environment]
|
||||
DEVELOPMENT/PRODUCTION environment for webpack
|
||||
-r, --reset-cache
|
||||
reset react native packager
|
||||
--skip-packager
|
||||
run only storybook server
|
||||
-i, --manual-id
|
||||
allow multiple users to work with same storybook
|
||||
--smoke-test
|
||||
Exit after successful start
|
||||
--packager-port <packagerPort>
|
||||
Custom packager port
|
||||
--root [root]
|
||||
Add additional root(s) to be used by the packager in this project
|
||||
--projectRoots [projectRoots]
|
||||
Override the root(s) to be used by the packager
|
||||
```
|
||||
|
||||
## getStorybookUI Options
|
||||
@ -146,8 +104,8 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi
|
||||
|
||||
```
|
||||
{
|
||||
onDeviceUI: Boolean (false)
|
||||
-- display stories list on the device
|
||||
onDeviceUI: Boolean (true)
|
||||
-- display navigator and addons on the device
|
||||
disableWebsockets: Boolean (false)
|
||||
-- allows to display stories without running storybook server. Should be used with onDeviceUI
|
||||
secured: Boolean (false)
|
||||
@ -158,6 +116,10 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi
|
||||
-- port to use
|
||||
query: String ("")
|
||||
-- additional query string to pass to websockets
|
||||
isUIHidden: Boolean (false)
|
||||
-- should the ui be closed initialy.
|
||||
tabOpen: Number (0)
|
||||
-- which tab should be open. -1 Navigator, 0 Preview, 1 Addons
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
73
app/react-native/src/bin/storybook-start.js
vendored
73
app/react-native/src/bin/storybook-start.js
vendored
@ -1,26 +1,17 @@
|
||||
#!/usr/bin/env node
|
||||
/* eslint-disable no-console */
|
||||
import { exec } from 'child_process';
|
||||
import path from 'path';
|
||||
import program from 'commander';
|
||||
import Server from '../server';
|
||||
|
||||
program
|
||||
.option('-h, --host <host>', 'host to listen on')
|
||||
.option('-p, --port <port>', 'port to listen on')
|
||||
.option('--haul <configFile>', 'use haul with config file')
|
||||
.option('--platform <ios|android|all>', 'build platform-specific build')
|
||||
.option('-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')
|
||||
.option('-c, --config-dir [dir-name]', 'storybook config directory')
|
||||
.option('--metro-config [relative-config-path]', 'Metro Bundler Custom config')
|
||||
.option('-e, --environment [environment]', 'DEVELOPMENT/PRODUCTION environment for webpack')
|
||||
.option('-r, --reset-cache', 'reset react native packager')
|
||||
.option('--skip-packager', 'run only storybook server')
|
||||
.option('-i, --manual-id', 'allow multiple users to work with same storybook')
|
||||
.option('--smoke-test', 'Exit after successful start')
|
||||
.option('--packager-port <packagerPort>', 'Custom packager port')
|
||||
.option('--root [root]', 'Add additional root(s) to be used by the packager in this project')
|
||||
.option('--projectRoots [projectRoots]', 'Override the root(s) to be used by the packager')
|
||||
.parse(process.argv);
|
||||
|
||||
const projectDir = path.resolve();
|
||||
@ -42,67 +33,9 @@ server.listen(...listenAddr, err => {
|
||||
if (err) {
|
||||
throw err;
|
||||
}
|
||||
const address = `http://${program.host || 'localhost'}:${program.port}/`;
|
||||
const address = `http://${program.host}:${program.port}/`;
|
||||
console.info(`\nReact Native Storybook started on => ${address}\n`);
|
||||
if (program.smokeTest) {
|
||||
process.exit(0);
|
||||
}
|
||||
});
|
||||
|
||||
if (!program.skipPackager) {
|
||||
let symlinks = [];
|
||||
|
||||
let roots = [projectDir];
|
||||
|
||||
if (program.root) {
|
||||
roots = roots.concat(program.root.split(',').map(root => path.resolve(root)));
|
||||
}
|
||||
|
||||
try {
|
||||
// eslint-disable-next-line global-require
|
||||
require('babel-register')({
|
||||
presets: [require.resolve('babel-preset-flow')],
|
||||
ignore: false,
|
||||
babelrc: false,
|
||||
});
|
||||
|
||||
// eslint-disable-next-line global-require
|
||||
const findSymlinkedModules = require('react-native/local-cli/util/findSymlinkedModules');
|
||||
symlinks = roots.reduce((arr, rootPath) => arr.concat(findSymlinkedModules(rootPath, roots)), [
|
||||
...roots,
|
||||
]);
|
||||
} catch (e) {
|
||||
console.warn(`Unable to load findSymlinksPaths: ${e.message}`, e);
|
||||
}
|
||||
|
||||
let projectRoots = (configDir === projectDir ? [] : [configDir]).concat(symlinks);
|
||||
|
||||
if (program.projectRoots) {
|
||||
projectRoots = projectRoots.concat(
|
||||
program.projectRoots.split(',').map(root => path.resolve(root))
|
||||
);
|
||||
}
|
||||
|
||||
let cliCommand = 'react-native start';
|
||||
|
||||
if (program.metroConfig) {
|
||||
cliCommand += ` --config ${program.metroConfig}`;
|
||||
}
|
||||
|
||||
if (program.haul) {
|
||||
const platform = program.platform || 'all';
|
||||
cliCommand = `haul start --config ${program.haul} --platform ${platform}`;
|
||||
}
|
||||
// RN packager
|
||||
exec(
|
||||
[
|
||||
cliCommand,
|
||||
`--projectRoots ${projectRoots.join(',')}`,
|
||||
program.resetCache && '--reset-cache',
|
||||
program.packagerPort && `--port=${program.packagerPort}`,
|
||||
]
|
||||
.filter(x => x)
|
||||
.join(' '),
|
||||
{ async: true }
|
||||
);
|
||||
}
|
||||
|
||||
89
app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.js
vendored
Normal file
89
app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.js
vendored
Normal file
@ -0,0 +1,89 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Platform, Keyboard, Dimensions, View } from 'react-native';
|
||||
|
||||
import style from './style';
|
||||
|
||||
// Android changes screen size when keyboard opens.
|
||||
// To avoid issues we use absolute positioned element with predefined screen size
|
||||
export default class AbsolutePositionedKeyboardAwareView extends PureComponent {
|
||||
componentWillMount() {
|
||||
this.keyboardDidShowListener = Keyboard.addListener(
|
||||
'keyboardDidShow',
|
||||
this.keyboardDidShowHandler
|
||||
);
|
||||
this.keyboardDidHideListener = Keyboard.addListener(
|
||||
'keyboardDidHide',
|
||||
this.keyboardDidHideHandler
|
||||
);
|
||||
Dimensions.addEventListener('change', this.removeKeyboardOnOrientationChange);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.keyboardDidShowListener.remove();
|
||||
this.keyboardDidHideListener.remove();
|
||||
Dimensions.removeEventListener('change', this.removeKeyboardOnOrientationChange);
|
||||
}
|
||||
|
||||
keyboardDidShowHandler = e => {
|
||||
if (Platform.OS === 'android') {
|
||||
const { previewWidth } = this.props;
|
||||
// There is bug in RN android that keyboardDidShow event is called simply when you go from portrait to landscape.
|
||||
// To make sure that this is keyboard event we check screen width
|
||||
if (previewWidth === e.endCoordinates.width) {
|
||||
this.keyboardOpen = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// When rotating screen from portrait to landscape with keyboard open on android it calls keyboardDidShow, but doesn't call
|
||||
// keyboardDidHide. To avoid issues we set keyboardOpen to false immediately on keyboardChange.
|
||||
removeKeyboardOnOrientationChange = () => {
|
||||
if (Platform.OS === 'android') {
|
||||
this.keyboardOpen = false;
|
||||
}
|
||||
};
|
||||
|
||||
keyboardDidHideHandler = () => {
|
||||
if (this.keyboardOpen) {
|
||||
this.keyboardOpen = false;
|
||||
}
|
||||
};
|
||||
|
||||
onLayoutHandler = ({ nativeEvent }) => {
|
||||
if (!this.keyboardOpen) {
|
||||
const { width, height } = nativeEvent.layout;
|
||||
const { onLayout } = this.props;
|
||||
|
||||
onLayout({
|
||||
previewHeight: height,
|
||||
previewWidth: width,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { children, previewWidth, previewHeight } = this.props;
|
||||
|
||||
return (
|
||||
<View style={style.flex} onLayout={this.onLayoutHandler}>
|
||||
<View
|
||||
style={
|
||||
previewWidth === 0
|
||||
? style.flex
|
||||
: { position: 'absolute', width: previewWidth, height: previewHeight }
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
AbsolutePositionedKeyboardAwareView.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
previewWidth: PropTypes.number.isRequired,
|
||||
previewHeight: PropTypes.number.isRequired,
|
||||
onLayout: PropTypes.func.isRequired,
|
||||
};
|
||||
47
app/react-native/src/preview/components/OnDeviceUI/addons/index.js
vendored
Normal file
47
app/react-native/src/preview/components/OnDeviceUI/addons/index.js
vendored
Normal file
@ -0,0 +1,47 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { View, Text } from 'react-native';
|
||||
import addons from '@storybook/addons';
|
||||
|
||||
import AddonsList from './list';
|
||||
import AddonWrapper from './wrapper';
|
||||
import style from '../style';
|
||||
|
||||
export default class Addons extends PureComponent {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
addons.loadAddons({});
|
||||
this.panels = addons.getPanels();
|
||||
|
||||
this.state = {
|
||||
addonSelected: Object.keys(this.panels)[0] || null,
|
||||
};
|
||||
}
|
||||
|
||||
onPressAddon = addonSelected => {
|
||||
this.setState({ addonSelected });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { addonSelected } = this.state;
|
||||
|
||||
if (Object.keys(this.panels).length === 0) {
|
||||
return (
|
||||
<View style={[style.flex, style.center]}>
|
||||
<Text style={style.text}>No onDevice addons loaded.</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={style.flex}>
|
||||
<AddonsList
|
||||
onPressAddon={this.onPressAddon}
|
||||
panels={this.panels}
|
||||
addonSelected={addonSelected}
|
||||
/>
|
||||
<AddonWrapper addonSelected={addonSelected} panels={this.panels} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
50
app/react-native/src/preview/components/OnDeviceUI/addons/list.js
vendored
Normal file
50
app/react-native/src/preview/components/OnDeviceUI/addons/list.js
vendored
Normal file
@ -0,0 +1,50 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { View, ScrollView, StyleSheet } from 'react-native';
|
||||
|
||||
import Button from '../navigation/button';
|
||||
|
||||
const style = StyleSheet.create({
|
||||
list: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: 'white',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#e6e6e6',
|
||||
},
|
||||
});
|
||||
|
||||
export default class AddonList extends PureComponent {
|
||||
renderTab = (id, title) => {
|
||||
const { addonSelected, onPressAddon } = this.props;
|
||||
|
||||
return (
|
||||
<Button active={id === addonSelected} key={id} id={id} onPress={onPressAddon}>
|
||||
{title}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { panels } = this.props;
|
||||
const addonKeys = Object.keys(panels);
|
||||
|
||||
return (
|
||||
<View style={style.list}>
|
||||
<ScrollView showsHorizontalScrollIndicator={false} horizontal style={style.addonList}>
|
||||
{addonKeys.map(id => this.renderTab(id, panels[id].title))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
AddonList.propTypes = {
|
||||
panels: PropTypes.objectOf(
|
||||
PropTypes.shape({
|
||||
title: PropTypes.string.isRequired,
|
||||
render: PropTypes.func.isRequired,
|
||||
}).isRequired
|
||||
).isRequired,
|
||||
onPressAddon: PropTypes.func.isRequired,
|
||||
addonSelected: PropTypes.string.isRequired,
|
||||
};
|
||||
27
app/react-native/src/preview/components/OnDeviceUI/addons/tab.js
vendored
Normal file
27
app/react-native/src/preview/components/OnDeviceUI/addons/tab.js
vendored
Normal file
@ -0,0 +1,27 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { TouchableOpacity, Text } from 'react-native';
|
||||
|
||||
import style from '../style';
|
||||
|
||||
export default class Tab extends PureComponent {
|
||||
onPressHandler = () => {
|
||||
const { onPress, id } = this.props;
|
||||
onPress(id);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { title } = this.props;
|
||||
return (
|
||||
<TouchableOpacity style={style.tab} onPress={this.onPressHandler}>
|
||||
<Text style={style.text}>{title}</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Tab.propTypes = {
|
||||
onPress: PropTypes.func.isRequired,
|
||||
id: PropTypes.string.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
};
|
||||
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