mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 23:11:23 +08:00
Merge branch 'next' into migrate-from-simplebar-to-overlaybars-2
# Conflicts: # lib/components/package.json # yarn.lock
This commit is contained in:
Norbert de Langen
commit
fd7c2f9882
@ -68,11 +68,6 @@ module.exports = {
|
||||
test: withTests,
|
||||
},
|
||||
},
|
||||
{
|
||||
test: './app/react-native',
|
||||
presets: ['module:metro-react-native-babel-preset'],
|
||||
plugins: ['babel-plugin-macros', ['emotion', { sourceMap: true, autoLabel: true }]],
|
||||
},
|
||||
{
|
||||
test: [
|
||||
'./lib/node-logger',
|
||||
|
||||
@ -79,9 +79,6 @@ jobs:
|
||||
- run:
|
||||
name: Run chromatic on the pre-built mithril-kitchen-sink example
|
||||
command: yarn chromatic --storybook-build-dir="built-storybooks/mithril-kitchen-sink" --app-code="8adgm46jzk8"
|
||||
- run:
|
||||
name: Run chromatic on the pre-built polymer-cli example
|
||||
command: yarn chromatic --storybook-build-dir="built-storybooks/polymer-cli" --app-code="o6jl9kmh0qd"
|
||||
- run:
|
||||
name: Run chromatic on the pre-built preact-kitchen-sink example
|
||||
command: yarn chromatic --storybook-build-dir="built-storybooks/preact-kitchen-sink" --app-code="ls0ikhnwqt"
|
||||
@ -194,11 +191,6 @@ jobs:
|
||||
command: |
|
||||
cd examples/ember-cli
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run polymer-cli (smoke test)
|
||||
command: |
|
||||
cd examples/polymer-cli
|
||||
yarn storybook --smoke-test --quiet
|
||||
- run:
|
||||
name: Run marko-cli (smoke test)
|
||||
command: |
|
||||
@ -229,24 +221,6 @@ jobs:
|
||||
command: |
|
||||
cd examples/cra-react15
|
||||
yarn storybook --smoke-test --quiet
|
||||
native-smoke-tests:
|
||||
<<: *defaults
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: Bootstrap
|
||||
command: yarn bootstrap --core
|
||||
- run:
|
||||
name: Run React-Native-App example
|
||||
command: |
|
||||
cd examples-native/crna-kitchen-sink
|
||||
yarn storybook --smoke-test
|
||||
- run:
|
||||
name: Publish React-Native-App example
|
||||
command: |
|
||||
./scripts/crna-publish.js
|
||||
frontpage:
|
||||
<<: *defaults
|
||||
steps:
|
||||
@ -334,9 +308,6 @@ workflows:
|
||||
- packtracker:
|
||||
requires:
|
||||
- build
|
||||
- native-smoke-tests:
|
||||
requires:
|
||||
- build
|
||||
- test:
|
||||
requires:
|
||||
- build
|
||||
|
||||
@ -14,6 +14,7 @@ module.exports = {
|
||||
'react/jsx-fragments': 'off',
|
||||
'@typescript-eslint/ban-ts-ignore': 'off',
|
||||
'@typescript-eslint/no-object-literal-type-assertion': 'off',
|
||||
'@typescript-eslint/no-empty-function': 'off',
|
||||
'react/sort-comp': [
|
||||
'error',
|
||||
{
|
||||
|
||||
3
.github/CODEOWNERS
vendored
3
.github/CODEOWNERS
vendored
@ -18,9 +18,7 @@
|
||||
/addons/viewport/ @saponifi3d
|
||||
|
||||
/app/angular/ @alterx @igor-dv
|
||||
/app/polymer/ @ndelangen @naipath @leonrodenburg
|
||||
/app/react/ @xavcz @shilman @thomasbertet
|
||||
/app/react-native/ @rmevans9 @Gongreg @tmeasday
|
||||
/app/vue/ @thomasbertet @kazupon
|
||||
/app/svelte/ @plumpNation
|
||||
|
||||
@ -30,7 +28,6 @@
|
||||
/examples/cra-kitchen-sink/ @ndelangen @UsulPro
|
||||
/examples/cra-ts-kitchen-sink/ @mucsi96
|
||||
/examples/official-storybook/ @UsulPro
|
||||
/examples/polymer-cli/ @naipath @igor-dv
|
||||
/examples/vue-kitchen-sink/ @igor-dv @alexandrebodin
|
||||
/examples/svelte-kitchen-sink/ @plumpNation
|
||||
|
||||
|
||||
2
.github/autolabeler.yml
vendored
2
.github/autolabeler.yml
vendored
@ -13,10 +13,8 @@
|
||||
'addon: storyshots': ["addons/storyshots/**"]
|
||||
'addon: viewport': ["addons/viewport/**"]
|
||||
'app: angular': ["app/angular/**"]
|
||||
'app: polymer ': ["app/polymer/**"]
|
||||
'app: preact': ["app/preact/**"]
|
||||
'app: rax': ["app/rax/**"]
|
||||
'app: react-native': ["app/react-native/**"]
|
||||
'app: react': ["app/react/**"]
|
||||
'app: vue': ["app/vue/**"]
|
||||
'app: svelte': ["app/svelte/**"]
|
||||
|
||||
3
.github/automention.yml
vendored
3
.github/automention.yml
vendored
@ -2,11 +2,8 @@
|
||||
'app: ember': ['gabrielcsapo']
|
||||
'app: html': ['Hypnosphi']
|
||||
'app: marko': ['nm123github']
|
||||
'app: polymer': ['stijnkoopal', 'ndelangen']
|
||||
'app: preact': ['BartWaardenburg']
|
||||
'app: rax': ['SoloJiang']
|
||||
'app: react-native': ['benoitdion', 'gongreg']
|
||||
'app: react-native-server': ['benoitdion', 'gongreg']
|
||||
'app: svelte': ['rixo', 'cam-stitt', 'plumpNation']
|
||||
'app: vue': ['backbone87', 'elevatebart', 'pksunkara', 'Aaron-Pool', 'pocka']
|
||||
'app: web-components': ['daKmoR']
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -35,3 +35,4 @@ storybook-out
|
||||
built-storybooks
|
||||
cypress/videos
|
||||
cypress/screenshots
|
||||
examples/ember-cli/ember-output
|
||||
|
||||
147315
.yarn/releases/yarn-1.21.1.js
generated
vendored
147315
.yarn/releases/yarn-1.21.1.js
generated
vendored
File diff suppressed because one or more lines are too long
7
.yarnrc
7
.yarnrc
@ -1,7 +0,0 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
|
||||
# yarn lockfile v1
|
||||
|
||||
|
||||
frozen-lockfile true
|
||||
lastUpdateCheck 1576044003885
|
||||
yarn-path ".yarn/releases/yarn-1.21.1.js"
|
||||
@ -1,25 +1,25 @@
|
||||
## 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)| [Preact](app/preact)| [Rax](app/rax) |
|
||||
| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
|
||||
|[a11y](addons/a11y) |+| |+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[actions](addons/actions) |+|+*|+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[backgrounds](addons/backgrounds) |+|*|+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[centered](addons/centered) |+| |+|+| |+|+| |+| |+|+|+|
|
||||
|[contexts](addons/contexts) |+| |+| | | | | | | | |+|+|
|
||||
|[events](addons/events) |+| |+|+|+|+|+|+| | |+|+|+|
|
||||
|[design assets](addons/design-assets) |+| |+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[graphql](addons/graphql) |+| | | | | | | | | | | ||
|
||||
|[google-analytics](addons/google-analytics) |+|+|+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[info](addons/info) |+| | | | | | | | | | | | |
|
||||
|[jest](addons/jest) |+|+|+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[knobs](addons/knobs) |+|+*|+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[links](addons/links) |+|+|+|+|+|+|+| |+|+|+|+|+|
|
||||
|[notes](addons/notes) |+|+*|+|+|+|+|+| |+|+|+|+|+|
|
||||
|[options](addons/options) |+|+|+|+|+|+|+| |+|+|+|+|+|
|
||||
|[cssresources](addons/cssresources) |+| |+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[storyshots](addons/storyshots) |+|+|+|+| | |+| |+|+| |+|+|
|
||||
|[storysource](addons/storysource) |+| |+|+|+|+|+|+|+|+|+|+|+|
|
||||
|[viewport](addons/viewport) |+| |+|+|+|+|+|+|+|+|+|+|+|
|
||||
| | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) | [Rax](app/rax) |
|
||||
| ------------------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: | -------------- |
|
||||
| [a11y](addons/a11y) | + | | + | + | + | + | + | + | + | + | + | + |
|
||||
| [actions](addons/actions) | + | +\* | + | + | + | + | + | + | + | + | + | + |
|
||||
| [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + | + | + | + | + |
|
||||
| [centered](addons/centered) | + | | + | + | + | + | | + | | + | + | + |
|
||||
| [contexts](addons/contexts) | + | | + | | | | | | | | + | + |
|
||||
| [events](addons/events) | + | | + | + | + | + | + | | | + | + | + |
|
||||
| [design assets](addons/design-assets) | + | | + | + | + | + | + | + | + | + | + | + |
|
||||
| [graphql](addons/graphql) | + | | | | | | | | | | | |
|
||||
| [google-analytics](addons/google-analytics) | + | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [info](addons/info) | + | | | | | | | | | | | |
|
||||
| [jest](addons/jest) | + | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| [knobs](addons/knobs) | + | +\* | + | + | + | + | + | + | + | + | + | + |
|
||||
| [links](addons/links) | + | + | + | + | + | + | | + | + | + | + | + |
|
||||
| [notes](addons/notes) | + | +\* | + | + | + | + | | + | + | + | + | + |
|
||||
| [options](addons/options) | + | + | + | + | + | + | | + | + | + | + | + |
|
||||
| [cssresources](addons/cssresources) | + | | + | + | + | + | + | + | + | + | + | + |
|
||||
| [storyshots](addons/storyshots) | + | + | + | + | | + | | + | + | | + | + |
|
||||
| [storysource](addons/storysource) | + | | + | + | + | + | + | + | + | + | + | + |
|
||||
| [viewport](addons/viewport) | + | | + | + | + | + | + | + | + | + | + | + |
|
||||
|
||||
`*` - React Native on device addon (addons/onDevice-\<name>)
|
||||
`*` - React Native on device addon (addons/onDevice-\<name>)
|
||||
|
||||
73
CHANGELOG.md
73
CHANGELOG.md
@ -1,3 +1,76 @@
|
||||
## 5.3.9 (January 24, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Revert breaking source indentation fix ([#9609](https://github.com/storybookjs/storybook/pull/9609))
|
||||
|
||||
## 6.0.0-alpha.1 (January 23, 2020)
|
||||
|
||||
### Features
|
||||
|
||||
* Core: Enable HMR logging in browser console ([#9535](https://github.com/storybookjs/storybook/pull/9535))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-knobs: Fix broken link to repo in empty panel ([#9530](https://github.com/storybookjs/storybook/pull/9530))
|
||||
* Typescript: Export IStory in `@storybook/angular` ([#9097](https://github.com/storybookjs/storybook/pull/9097))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* React-native: Extract to its own repo ([#9599](https://github.com/storybookjs/storybook/pull/9599))
|
||||
* Polymer: Extract to its own repo ([#9596](https://github.com/storybookjs/storybook/pull/9596))
|
||||
* Build: Fix some dependencies & ts problems ([#9603](https://github.com/storybookjs/storybook/pull/9603))
|
||||
|
||||
## 5.3.8 (January 22, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Fix TS false default value in prop table ([#9560](https://github.com/storybookjs/storybook/pull/9560))
|
||||
* Addon-knobs: Fix broken repo link in empty panel ([#9530](https://github.com/storybookjs/storybook/pull/9530))
|
||||
* Typescript: Export IStory in `@storybook/angular` ([#9097](https://github.com/storybookjs/storybook/pull/9097))
|
||||
* Fixed Angular button example story ([#9540](https://github.com/storybookjs/storybook/pull/9540))
|
||||
* Clean usage of `@types/webpack-env` dep in all packages ([#9536](https://github.com/storybookjs/storybook/pull/9536))
|
||||
|
||||
## 6.0.0-alpha.0 (January 21, 2020)
|
||||
|
||||
### Features
|
||||
|
||||
* API: Add useSharedState, useStoryState ([#9566](https://github.com/storybookjs/storybook/pull/9566))
|
||||
* Addon-docs: Named colors with ColorPalette ([#9453](https://github.com/storybookjs/storybook/pull/9453))
|
||||
* Core: Add preview layouts ([#9229](https://github.com/storybookjs/storybook/pull/9229))
|
||||
* Marionette: Add marionette support ([#7981](https://github.com/storybookjs/storybook/pull/7981))
|
||||
* Addon-a11y: Support manual run ([#8883](https://github.com/storybookjs/storybook/pull/8883))
|
||||
* Addon-cssresources: Disable SyntaxHighlighter for long code ([#9360](https://github.com/storybookjs/storybook/pull/9360))
|
||||
* Core: Improve monorepo support ([#8822](https://github.com/storybookjs/storybook/pull/8822))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Fix TS false default value in prop table ([#9560](https://github.com/storybookjs/storybook/pull/9560))
|
||||
* Addon-docs: Remove hard-coded lineHeight in Typeset block ([#9567](https://github.com/storybookjs/storybook/pull/9567))
|
||||
* Fixed Angular button example story ([#9540](https://github.com/storybookjs/storybook/pull/9540))
|
||||
* Core: Fix generated entry to import at top of file ([#9398](https://github.com/storybookjs/storybook/pull/9398))
|
||||
* Preact: Fix story function typescript type ([#9123](https://github.com/storybookjs/storybook/pull/9123))
|
||||
* UI: Make canvas link a link ([#9257](https://github.com/storybookjs/storybook/pull/9257))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Build: the build-storybooks script ([#9569](https://github.com/storybookjs/storybook/pull/9569))
|
||||
* CLI: Improve Rax template ([#9574](https://github.com/storybookjs/storybook/pull/9574))
|
||||
* Typescript: Migrate polymer ([#9565](https://github.com/storybookjs/storybook/pull/9565))
|
||||
* Typescript: Migrate ember ([#9020](https://github.com/storybookjs/storybook/pull/9020))
|
||||
* Next 6.0.0 ([#9212](https://github.com/storybookjs/storybook/pull/9212))
|
||||
* REMOVE subscription_store ([#9228](https://github.com/storybookjs/storybook/pull/9228))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* Update husky to v4 ([#9509](https://github.com/storybookjs/storybook/pull/9509))
|
||||
* Bumped react-dev-utils dependency to v10. ([#9579](https://github.com/storybookjs/storybook/pull/9579))
|
||||
* Bump babel-plugin-macros from 2.7.1 to 2.8.0 ([#9236](https://github.com/storybookjs/storybook/pull/9236))
|
||||
* Bump babel-plugin-emotion from 10.0.23 to 10.0.27 ([#9239](https://github.com/storybookjs/storybook/pull/9239))
|
||||
* Bump @babel/runtime from 7.7.4 to 7.7.7 ([#9277](https://github.com/storybookjs/storybook/pull/9277))
|
||||
* Bump corejs-upgrade-webpack-plugin from 2.2.0 to 3.0.1 ([#9427](https://github.com/storybookjs/storybook/pull/9427))
|
||||
* Bump terser-webpack-plugin from 2.2.1 to 2.3.2 ([#9386](https://github.com/storybookjs/storybook/pull/9386))
|
||||
|
||||
## 5.3.7 (January 20, 2020)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
@ -115,7 +115,7 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl
|
||||
| [React Native](app/react-native) | - | [](app/react-native) |
|
||||
| [Vue](app/vue) | [v5.1.0](https://storybooks-vue.netlify.com/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [v5.1.0](https://storybooks-angular.netlify.com/) | [](app/angular) |
|
||||
| [Polymer](app/polymer) | [v5.1.0](https://storybooks-polymer.netlify.com/) | [](app/polymer) |
|
||||
| [Marionette.js](app/marionette) | - | [](app/marionette) |
|
||||
| [Mithril](app/mithril) | [v5.1.0](https://storybooks-mithril.netlify.com/) | [](app/mithril) |
|
||||
| [Marko](app/marko) | [v5.1.0](https://storybooks-marko.netlify.com/) | [](app/marko) |
|
||||
| [HTML](app/html) | [v5.1.0](https://storybooks-html.netlify.com/) | [](app/html) |
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
+ [Add a playground addon](#add-a-playground-addon)
|
||||
+ [See multiple (or all) stories in 1 preview.](#see-multiple--or-all--stories-in-1-preview)
|
||||
* [Supporting other frameworks and libraries](#supporting-other-frameworks-and-libraries)
|
||||
+ [Polymer & Webcomponents](#polymer---webcomponents)
|
||||
+ [Aurelia](#aurelia)
|
||||
* [Breaking changes](#breaking-changes)
|
||||
+ [Addon API](#addon-api)
|
||||
@ -60,10 +59,6 @@ Unfortunately, if you choose anything not from the list of [supported frameworks
|
||||
|
||||
We want you to be able to use storybook with the framework / library of your choice.
|
||||
|
||||
### Polymer & Webcomponents
|
||||
|
||||
Storybook for Polymer is currently in development and will support custom elements and plain HTML.
|
||||
|
||||
### Aurelia
|
||||
|
||||
We're reaching out to the Aurelia maintainers to cooperate on this.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -22,7 +22,6 @@
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
@ -33,12 +32,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/api": "5.3.7",
|
||||
"@storybook/client-logger": "5.3.7",
|
||||
"@storybook/components": "5.3.7",
|
||||
"@storybook/core-events": "5.3.7",
|
||||
"@storybook/theming": "5.3.7",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"@storybook/api": "6.0.0-alpha.1",
|
||||
"@storybook/client-logger": "6.0.0-alpha.1",
|
||||
"@storybook/components": "6.0.0-alpha.1",
|
||||
"@storybook/core-events": "6.0.0-alpha.1",
|
||||
"@storybook/theming": "6.0.0-alpha.1",
|
||||
"axe-core": "^3.3.2",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -17,7 +17,6 @@
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
@ -28,12 +27,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/api": "5.3.7",
|
||||
"@storybook/client-api": "5.3.7",
|
||||
"@storybook/components": "5.3.7",
|
||||
"@storybook/core-events": "5.3.7",
|
||||
"@storybook/theming": "5.3.7",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"@storybook/api": "6.0.0-alpha.1",
|
||||
"@storybook/client-api": "6.0.0-alpha.1",
|
||||
"@storybook/components": "6.0.0-alpha.1",
|
||||
"@storybook/core-events": "6.0.0-alpha.1",
|
||||
"@storybook/theming": "6.0.0-alpha.1",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^2.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -21,7 +21,6 @@
|
||||
"author": "jbaxleyiii",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
@ -32,12 +31,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/api": "5.3.7",
|
||||
"@storybook/client-logger": "5.3.7",
|
||||
"@storybook/components": "5.3.7",
|
||||
"@storybook/core-events": "5.3.7",
|
||||
"@storybook/theming": "5.3.7",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"@storybook/api": "6.0.0-alpha.1",
|
||||
"@storybook/client-logger": "6.0.0-alpha.1",
|
||||
"@storybook/components": "6.0.0-alpha.1",
|
||||
"@storybook/core-events": "6.0.0-alpha.1",
|
||||
"@storybook/theming": "6.0.0-alpha.1",
|
||||
"core-js": "^3.0.1",
|
||||
"memoizerific": "^1.11.3",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "Storybook decorator to center components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -29,7 +29,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"util-deprecate": "^1.0.2"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-contexts",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "Storybook Addon Contexts",
|
||||
"keywords": [
|
||||
"preact",
|
||||
@ -27,10 +27,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/api": "5.3.7",
|
||||
"@storybook/components": "5.3.7",
|
||||
"@storybook/core-events": "5.3.7",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"@storybook/api": "6.0.0-alpha.1",
|
||||
"@storybook/components": "6.0.0-alpha.1",
|
||||
"@storybook/core-events": "6.0.0-alpha.1",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"qs": "^6.6.0"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-cssresources",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "A storybook addon to switch between css resources at runtime for your story",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -21,7 +21,6 @@
|
||||
"author": "nm123github",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
@ -32,11 +31,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/api": "5.3.7",
|
||||
"@storybook/components": "5.3.7",
|
||||
"@storybook/core-events": "5.3.7",
|
||||
"@storybook/theming": "5.3.7",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"@storybook/api": "6.0.0-alpha.1",
|
||||
"@storybook/components": "6.0.0-alpha.1",
|
||||
"@storybook/core-events": "6.0.0-alpha.1",
|
||||
"@storybook/theming": "6.0.0-alpha.1",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-design-assets",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "Design asset preview for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -23,7 +23,6 @@
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
@ -34,12 +33,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/api": "5.3.7",
|
||||
"@storybook/client-logger": "5.3.7",
|
||||
"@storybook/components": "5.3.7",
|
||||
"@storybook/core-events": "5.3.7",
|
||||
"@storybook/theming": "5.3.7",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"@storybook/api": "6.0.0-alpha.1",
|
||||
"@storybook/client-logger": "6.0.0-alpha.1",
|
||||
"@storybook/components": "6.0.0-alpha.1",
|
||||
"@storybook/core-events": "6.0.0-alpha.1",
|
||||
"@storybook/theming": "6.0.0-alpha.1",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -4,6 +4,8 @@
|
||||
|
||||
# Storybook Docs
|
||||
|
||||
> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
|
||||
|
||||
Storybook Docs transforms your Storybook stories into world-class component documentation.
|
||||
|
||||
**DocsPage.** Out of the box, all your stories get a `DocsPage`. `DocsPage` is a zero-config aggregation of your component stories, text descriptions, docgen comments, props tables, and code examples into clean, readable pages.
|
||||
@ -77,16 +79,16 @@ For more information on `MDX`, see the [`MDX` reference](./docs/mdx.md).
|
||||
|
||||
Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some framework-specific features as well, such as props tables and inline story rendering. This chart captures the current state of support:
|
||||
|
||||
| | React | Vue | Angular | Ember | Web Components | HTML | Svelte | Preact | Polymer | Riot | Mithril | Marko |
|
||||
| ----------------- | :---: | :-: | :-----: | :---: | :------------: | :--: | :----: | :----: | :-----: | :--: | :-----: | :---: |
|
||||
| MDX stories | + | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| CSF stories | + | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| StoriesOf stories | + | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Source | + | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Notes / Info | + | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Props table | + | + | + | + | + | | | | | | | |
|
||||
| Description | + | + | + | + | + | | | | | | | |
|
||||
| Inline stories | + | + | | | + | | | | | | | |
|
||||
| | React | Vue | Angular | Ember | Web Components | HTML | Svelte | Preact | Riot | Mithril | Marko |
|
||||
| ----------------- | :---: | :-: | :-----: | :---: | :------------: | :--: | :----: | :----: | :--: | :-----: | :---: |
|
||||
| MDX stories | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| CSF stories | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| StoriesOf stories | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Source | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Notes / Info | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Props table | + | + | + | + | + | | | | | | |
|
||||
| Description | + | + | + | + | + | | | | | | |
|
||||
| Inline stories | + | + | | | + | | | | | | |
|
||||
|
||||
**Note:** `#` = WIP support
|
||||
|
||||
@ -162,22 +164,20 @@ The `configureJSX` option is useful when you're writing your docs in MDX and you
|
||||
|
||||
## Manual configuration
|
||||
|
||||
If you don't want to use the preset, and prefer to configure "the long way", first register the addon in `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
addons: ['@storybook/addon-docs/register'],
|
||||
};
|
||||
```
|
||||
|
||||
Then configure Storybook's webpack loader in `.storybook/main.js` to understand MDX story files and annotate TS/JS story files with source code using `source-loader`:
|
||||
If you don't want to use the preset, and prefer to configure "the long way" add the following configuration to `.storybook/main.js` (see comments inline for explanation):
|
||||
|
||||
```js
|
||||
const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
|
||||
|
||||
module.exports = {
|
||||
// 1. register the docs panel (as opposed to '@storybook/addon-docs' which
|
||||
// will configure everything with a preset)
|
||||
addons: ['@storybook/addon-docs/register'],
|
||||
// 2. manually configure webpack, since you're not using the preset
|
||||
webpackFinal: async config => {
|
||||
config.module.rules.push({
|
||||
// 2a. Load `.stories.mdx` / `.story.mdx` files as CSF and generate
|
||||
// the docs page from the markdown
|
||||
test: /\.(stories|story)\.mdx$/,
|
||||
use: [
|
||||
{
|
||||
@ -195,6 +195,8 @@ module.exports = {
|
||||
},
|
||||
],
|
||||
});
|
||||
// 2b. Run `source-loader` on story files to show their source code
|
||||
// automatically in `DocsPage` or the `Source` doc block.
|
||||
config.module.rules.push({
|
||||
test: /\.(stories|story)\.[tj]sx?$/,
|
||||
loader: require.resolve('@storybook/source-loader'),
|
||||
|
||||
@ -4,6 +4,8 @@
|
||||
|
||||
# Storybook Docs for Angular
|
||||
|
||||
> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
|
||||
|
||||
Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for Angular supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs.
|
||||
|
||||
To learn more about Storybook Docs, read the [general documentation](../README.md). To learn the Angular specifics, read on!
|
||||
|
||||
@ -10,7 +10,7 @@ You've read the [Storybook Docs README](../README.md). You're already familiar w
|
||||
|
||||
## Does Docs support framework X?
|
||||
|
||||
Docs does not currently support [React Native](https://github.com/storybooks/storybook/tree/next/app/react-native). Otherwise, [it supports all frameworks that Storybook supports](../README.md#framework-support), including React, Vue, Angular, Ember, Svelte, Polymer, and others.
|
||||
Docs does not currently support [React Native](https://github.com/storybooks/storybook/tree/next/app/react-native). Otherwise, [it supports all frameworks that Storybook supports](../README.md#framework-support), including React, Vue, Angular, Ember, Svelte, and others.
|
||||
|
||||
## How does Docs interact with existing addons?
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@
|
||||
|
||||
# Storybook Docs MDX
|
||||
|
||||
> ⚠️ MDX support is an experimental feature in Storybook 5.2. The API may change in 5.3 outside of the normal semver rules. Be forewarned!
|
||||
|
||||
`MDX` is the syntax [Storybook Docs](../README.md) uses to capture long-form markdown documentation and stories in one file. You can also write pure documentation pages in `MDX` and add them to Storybook alongside your stories.
|
||||
|
||||
- [Storybook Docs MDX](#storybook-docs-mdx)
|
||||
|
||||
@ -76,9 +76,7 @@ And I can also embed arbitrary markdown & JSX in this file.
|
||||
What's happening here:
|
||||
|
||||
- Your stories are defined in CSF, but because of `includeStories: []`, they are not actually added to Storybook.
|
||||
- The MDX file is adding the stories to Storybook, and using the story function defined in CSF.
|
||||
- The MDX loader is using story metadata from CSF, such as name, decorators, parameters, but will give giving preference to anything defined in the MDX file.
|
||||
- The MDX file is using the Meta `default` defined in the CSF.
|
||||
- The MDX file is simply importing stories as functions in the MDX, and other aspects of the CSF file, such as decorators, parameters, and any other metadata should be applied as needed in the MDX from the import.
|
||||
|
||||
## CSF Stories with arbitrary MDX
|
||||
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
# Storybook Docs for Ember
|
||||
|
||||
> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
|
||||
|
||||
Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for Ember supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs.
|
||||
|
||||
To learn more about Storybook Docs, read the [general documentation](../README.md). To learn the Ember specifics, read on!
|
||||
@ -91,7 +93,7 @@ Finally, you can create MDX files like this:
|
||||
|
||||
```md
|
||||
import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
|
||||
import hbs from 'htmlbars-inline-precompile'
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
|
||||
<Meta title='App Component' component='AppComponent' />
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "Superior documentation for your components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -19,7 +19,6 @@
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"angular/**/*",
|
||||
"common/**/*",
|
||||
"ember/**/*",
|
||||
@ -46,14 +45,14 @@
|
||||
"@mdx-js/loader": "^1.5.1",
|
||||
"@mdx-js/mdx": "^1.5.1",
|
||||
"@mdx-js/react": "^1.5.1",
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/api": "5.3.7",
|
||||
"@storybook/components": "5.3.7",
|
||||
"@storybook/core-events": "5.3.7",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"@storybook/api": "6.0.0-alpha.1",
|
||||
"@storybook/components": "6.0.0-alpha.1",
|
||||
"@storybook/core-events": "6.0.0-alpha.1",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/postinstall": "5.3.7",
|
||||
"@storybook/source-loader": "5.3.7",
|
||||
"@storybook/theming": "5.3.7",
|
||||
"@storybook/postinstall": "6.0.0-alpha.1",
|
||||
"@storybook/source-loader": "6.0.0-alpha.1",
|
||||
"@storybook/theming": "6.0.0-alpha.1",
|
||||
"acorn": "^7.1.0",
|
||||
"acorn-jsx": "^5.1.0",
|
||||
"acorn-walk": "^7.0.0",
|
||||
|
||||
@ -4,6 +4,8 @@
|
||||
|
||||
# Storybook Docs for React
|
||||
|
||||
> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
|
||||
|
||||
Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for React supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs.
|
||||
|
||||
To learn more about Storybook Docs, read the [general documentation](../README.md). To learn the React specifics, read on!
|
||||
|
||||
@ -4,6 +4,8 @@
|
||||
|
||||
# Storybook Docs for Vue
|
||||
|
||||
> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook.
|
||||
|
||||
Storybook Docs transforms your Storybook stories into world-class component documentation. Storybook Docs for Vue supports [DocsPage](../docs/docspage.md) for auto-generated docs, and [MDX](../docs/mdx.md) for rich long-form docs.
|
||||
|
||||
To learn more about Storybook Docs, read the [general documentation](../README.md). To learn the Vue specifics, read on!
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-essentials",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "Curated addons to bring out the best of Storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -27,11 +27,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-backgrounds": "5.3.7",
|
||||
"@storybook/addon-viewport": "5.3.7",
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/api": "5.3.7",
|
||||
"@storybook/node-logger": "5.3.7",
|
||||
"@storybook/addon-backgrounds": "6.0.0-alpha.1",
|
||||
"@storybook/addon-viewport": "6.0.0-alpha.1",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"@storybook/api": "6.0.0-alpha.1",
|
||||
"@storybook/node-logger": "6.0.0-alpha.1",
|
||||
"ts-dedent": "^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,7 +20,6 @@
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
@ -31,11 +30,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/api": "5.3.7",
|
||||
"@storybook/client-api": "5.3.7",
|
||||
"@storybook/core-events": "5.3.7",
|
||||
"@storybook/theming": "5.3.7",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"@storybook/api": "6.0.0-alpha.1",
|
||||
"@storybook/client-api": "6.0.0-alpha.1",
|
||||
"@storybook/core-events": "6.0.0-alpha.1",
|
||||
"@storybook/theming": "6.0.0-alpha.1",
|
||||
"core-js": "^3.0.1",
|
||||
"format-json": "^1.0.3",
|
||||
"lodash": "^4.17.15",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-google-analytics",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "Storybook addon for google analytics",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,8 +20,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/core-events": "5.3.7",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"@storybook/core-events": "6.0.0-alpha.1",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react-ga": "^2.5.7"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,7 +18,6 @@
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
@ -29,8 +28,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/api": "5.3.7",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"@storybook/api": "6.0.0-alpha.1",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"graphiql": "^0.16.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "A Storybook addon to show additional information for your stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,7 +18,6 @@
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
@ -28,10 +27,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/client-logger": "5.3.7",
|
||||
"@storybook/components": "5.3.7",
|
||||
"@storybook/theming": "5.3.7",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"@storybook/client-logger": "6.0.0-alpha.1",
|
||||
"@storybook/components": "6.0.0-alpha.1",
|
||||
"@storybook/theming": "6.0.0-alpha.1",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"marksy": "^8.0.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,7 +24,6 @@
|
||||
"author": "Renaud Tertrais <renaud.tertrais@gmail.com> (https://github.com/renaudtertrais)",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
@ -35,11 +34,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/api": "5.3.7",
|
||||
"@storybook/components": "5.3.7",
|
||||
"@storybook/core-events": "5.3.7",
|
||||
"@storybook/theming": "5.3.7",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"@storybook/api": "6.0.0-alpha.1",
|
||||
"@storybook/components": "6.0.0-alpha.1",
|
||||
"@storybook/core-events": "6.0.0-alpha.1",
|
||||
"@storybook/theming": "6.0.0-alpha.1",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -76,7 +76,7 @@ export default {
|
||||
// then pass the story's prop data to the component’s prop in
|
||||
// the template with `v-bind:` or by placing the prop within
|
||||
// the component’s slot.
|
||||
export const withKnobs = () => ({
|
||||
export const exampleWithKnobs = () => ({
|
||||
components: { MyButton },
|
||||
props: {
|
||||
isDisabled: {
|
||||
@ -133,7 +133,7 @@ export const withKnobs = () => ({
|
||||
### With Ember
|
||||
```js
|
||||
import { withKnobs, text, boolean } from '@storybook/addon-knobs';
|
||||
import hbs from 'htmlbars-inline-precompile';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
|
||||
export default {
|
||||
title: 'StoryBook with Knobs',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,7 +18,6 @@
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
@ -29,12 +28,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/api": "5.3.7",
|
||||
"@storybook/client-api": "5.3.7",
|
||||
"@storybook/components": "5.3.7",
|
||||
"@storybook/core-events": "5.3.7",
|
||||
"@storybook/theming": "5.3.7",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"@storybook/api": "6.0.0-alpha.1",
|
||||
"@storybook/client-api": "6.0.0-alpha.1",
|
||||
"@storybook/components": "6.0.0-alpha.1",
|
||||
"@storybook/core-events": "6.0.0-alpha.1",
|
||||
"@storybook/theming": "6.0.0-alpha.1",
|
||||
"@types/react-color": "^3.0.1",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"core-js": "^3.0.1",
|
||||
|
||||
@ -15,7 +15,6 @@ import {
|
||||
} from '../index';
|
||||
|
||||
// Note: this is a helper to batch test return types and avoid "declared but never read" errors
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
function expectKnobOfType<T>(..._: T[]) {}
|
||||
|
||||
const groupId = 'GROUP-ID1';
|
||||
|
||||
@ -252,6 +252,7 @@ export default class KnobPanel extends PureComponent<KnobPanelProps> {
|
||||
href="https://github.com/storybookjs/storybook/tree/master/addons/knobs"
|
||||
target="_blank"
|
||||
withArrow
|
||||
cancel={false}
|
||||
>
|
||||
dynamically interact with components
|
||||
</Link>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,7 +18,6 @@
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
@ -29,11 +28,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/client-logger": "5.3.7",
|
||||
"@storybook/core-events": "5.3.7",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"@storybook/client-logger": "6.0.0-alpha.1",
|
||||
"@storybook/core-events": "6.0.0-alpha.1",
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/router": "5.3.7",
|
||||
"@storybook/router": "6.0.0-alpha.1",
|
||||
"@types/qs": "^6.9.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.7.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-notes",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -19,7 +19,6 @@
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
@ -30,13 +29,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/api": "5.3.7",
|
||||
"@storybook/client-logger": "5.3.7",
|
||||
"@storybook/components": "5.3.7",
|
||||
"@storybook/core-events": "5.3.7",
|
||||
"@storybook/router": "5.3.7",
|
||||
"@storybook/theming": "5.3.7",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"@storybook/api": "6.0.0-alpha.1",
|
||||
"@storybook/client-logger": "6.0.0-alpha.1",
|
||||
"@storybook/components": "6.0.0-alpha.1",
|
||||
"@storybook/core-events": "6.0.0-alpha.1",
|
||||
"@storybook/router": "6.0.0-alpha.1",
|
||||
"@storybook/theming": "6.0.0-alpha.1",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"markdown-to-jsx": "^6.10.3",
|
||||
|
||||
@ -1,32 +0,0 @@
|
||||
# Storybook Actions Addon for react-native
|
||||
|
||||
Storybook Actions Addon allows you to log events/actions inside stories in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
**This addon is a wrapper for addon [@storybook/addon-actions](https://github.com/storybookjs/storybook/blob/master/addons/actions).
|
||||
Refer to its documentation to understand how to use actions**
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
yarn add -D @storybook/addon-ondevice-actions @storybook/addon-actions
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
Create a file called `rn-addons.js` in your storybook config.
|
||||
|
||||
Add following content to it:
|
||||
|
||||
```js
|
||||
import '@storybook/addon-ondevice-actions/register';
|
||||
```
|
||||
|
||||
Then import `rn-addons.js` next to your `getStorybookUI` call.
|
||||
|
||||
```js
|
||||
import './rn-addons';
|
||||
```
|
||||
|
||||
See [@storybook/addon-actions](https://github.com/storybookjs/storybook/blob/master/addons/actions) to learn how to write stories with actions and the [crna-kitchen-sink app](../../examples-native/crna-kitchen-sink) for more examples.
|
||||
@ -1,46 +0,0 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-actions",
|
||||
"version": "5.3.7",
|
||||
"description": "Action Logger addon for react-native storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/actions",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/core-events": "5.3.7",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^2.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "5.3.7"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-actions": "*",
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
require('./dist').register();
|
||||
@ -1,177 +0,0 @@
|
||||
/* eslint-disable react/no-array-index-key */
|
||||
/* eslint-disable no-nested-ternary */
|
||||
import React, { Component } from 'react';
|
||||
import { Button, View, Text } from 'react-native';
|
||||
|
||||
const theme = {
|
||||
OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
|
||||
OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
|
||||
OBJECT_NAME_COLOR: 'rgb(136, 19, 145)',
|
||||
OBJECT_VALUE_NULL_COLOR: 'rgb(128, 128, 128)',
|
||||
OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(128, 128, 128)',
|
||||
OBJECT_VALUE_REGEXP_COLOR: 'rgb(196, 26, 22)',
|
||||
OBJECT_VALUE_STRING_COLOR: 'rgb(196, 26, 22)',
|
||||
OBJECT_VALUE_SYMBOL_COLOR: 'rgb(196, 26, 22)',
|
||||
OBJECT_VALUE_NUMBER_COLOR: 'rgb(28, 0, 207)',
|
||||
OBJECT_VALUE_BOOLEAN_COLOR: 'rgb(28, 0, 207)',
|
||||
OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(13, 34, 170)',
|
||||
|
||||
ARROW_COLOR: '#6e6e6e',
|
||||
ARROW_MARGIN_RIGHT: 3,
|
||||
ARROW_FONT_SIZE: 12,
|
||||
ARROW_ANIMATION_DURATION: '0',
|
||||
};
|
||||
|
||||
class Inspect extends Component<{ name?: string; value: any }, { expanded: boolean }> {
|
||||
state = { expanded: false };
|
||||
|
||||
render() {
|
||||
const { name, value } = this.props;
|
||||
const { expanded } = this.state;
|
||||
const toggle = (
|
||||
<View style={{ width: 40, height: 40 }}>
|
||||
{name &&
|
||||
((Array.isArray(value) && value.length) ||
|
||||
(value &&
|
||||
typeof value === 'object' &&
|
||||
!Array.isArray(value) &&
|
||||
Object.keys(value).length)) ? (
|
||||
<Button
|
||||
onPress={() => this.setState(s => ({ expanded: !s.expanded }))}
|
||||
title={!expanded ? '▶' : '▼'}
|
||||
/>
|
||||
) : null}
|
||||
</View>
|
||||
);
|
||||
|
||||
const nameComponent = name ? (
|
||||
<Text style={{ color: theme.OBJECT_NAME_COLOR }}>{name}</Text>
|
||||
) : null;
|
||||
|
||||
if (Array.isArray(value)) {
|
||||
if (name) {
|
||||
return (
|
||||
<>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
{toggle}
|
||||
{nameComponent}
|
||||
<Text>{`: ${value.length === 0 ? '[]' : expanded ? '[' : '[...]'}`}</Text>
|
||||
</View>
|
||||
{expanded ? (
|
||||
<View style={{ marginLeft: 40 }}>
|
||||
{value.map((v, i) => (
|
||||
<View key={i} style={{ marginLeft: 40 }}>
|
||||
<Inspect value={v} />
|
||||
</View>
|
||||
))}
|
||||
<View style={{ marginLeft: 20 }}>
|
||||
<Text>]</Text>
|
||||
</View>
|
||||
</View>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<View>
|
||||
<Text>[</Text>
|
||||
{value.map((v, i) => (
|
||||
<View key={i} style={{ marginLeft: 20 }}>
|
||||
<Inspect value={v} />
|
||||
</View>
|
||||
))}
|
||||
<Text>]</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
if (value && typeof value === 'object' && !(value instanceof RegExp)) {
|
||||
if (name) {
|
||||
return (
|
||||
<>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
{toggle}
|
||||
{nameComponent}
|
||||
<Text>
|
||||
{`: ${Object.keys(value).length === 0 ? '{}' : expanded ? '{' : '{...}'}`}
|
||||
</Text>
|
||||
</View>
|
||||
{expanded ? (
|
||||
<View style={{ marginLeft: 40 }}>
|
||||
{Object.entries(value).map(([key, v]) => (
|
||||
<View key={key}>
|
||||
<Inspect name={key} value={v} />
|
||||
</View>
|
||||
))}
|
||||
<View style={{ marginLeft: 20 }}>
|
||||
<Text>{'}'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<View>
|
||||
<Text>{'{'}</Text>
|
||||
{Object.entries(value).map(([key, v]) => (
|
||||
<View key={key}>
|
||||
<Inspect name={key} value={v} />
|
||||
</View>
|
||||
))}
|
||||
<Text>{'}'}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
if (name) {
|
||||
return (
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
{toggle}
|
||||
{nameComponent}
|
||||
<Text>: </Text>
|
||||
<Value value={value} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<View>
|
||||
<Value value={value} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function Value({ value }: { value: any }) {
|
||||
if (value === null) {
|
||||
return <Text style={{ color: theme.OBJECT_VALUE_NULL_COLOR }}>null</Text>;
|
||||
}
|
||||
if (value === undefined) {
|
||||
return <Text style={{ color: theme.OBJECT_VALUE_UNDEFINED_COLOR }}>undefined</Text>;
|
||||
}
|
||||
if (value instanceof RegExp) {
|
||||
return (
|
||||
<Text style={{ color: theme.OBJECT_VALUE_REGEXP_COLOR }}>
|
||||
{`/${value.source}/${value.flags}`}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
switch (typeof value) {
|
||||
case 'string':
|
||||
return (
|
||||
<Text style={{ color: theme.OBJECT_VALUE_STRING_COLOR }}>{JSON.stringify(value)}</Text>
|
||||
);
|
||||
case 'number':
|
||||
return (
|
||||
<Text style={{ color: theme.OBJECT_VALUE_NUMBER_COLOR }}>{JSON.stringify(value)}</Text>
|
||||
);
|
||||
case 'boolean':
|
||||
return (
|
||||
<Text style={{ color: theme.OBJECT_VALUE_BOOLEAN_COLOR }}>{JSON.stringify(value)}</Text>
|
||||
);
|
||||
case 'function':
|
||||
return <Text style={{ color: theme.OBJECT_VALUE_FUNCTION_PREFIX_COLOR }}>[Function]</Text>;
|
||||
default:
|
||||
return <Text>{JSON.stringify(value)}</Text>;
|
||||
}
|
||||
}
|
||||
|
||||
export default Inspect;
|
||||
@ -1,31 +0,0 @@
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import { Button, View, Text, ScrollView } from 'react-native';
|
||||
import { ActionDisplay } from '@storybook/addon-actions';
|
||||
import Inspect from './Inspect';
|
||||
|
||||
interface ActionLoggerProps {
|
||||
actions: ActionDisplay[];
|
||||
onClear: () => void;
|
||||
}
|
||||
|
||||
export const ActionLogger: FunctionComponent<ActionLoggerProps> = ({ actions, onClear }) => (
|
||||
<ScrollView>
|
||||
<ScrollView horizontal>
|
||||
<View>
|
||||
{actions.map((action: ActionDisplay) => (
|
||||
<View key={action.id} style={{ flexDirection: 'row' }}>
|
||||
<View>{action.count > 1 ? <Text>{action.count}</Text> : null}</View>
|
||||
<View style={{ flexGrow: 1 }}>
|
||||
<Inspect name={action.data.name} value={action.data.args || action.data} />
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</ScrollView>
|
||||
<View>
|
||||
<Button onPress={onClear} title="CLEAR" />
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
|
||||
export default ActionLogger;
|
||||
@ -1,79 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import deepEqual from 'fast-deep-equal';
|
||||
|
||||
import { addons } from '@storybook/addons';
|
||||
import { SELECT_STORY } from '@storybook/core-events';
|
||||
import { ActionDisplay, EVENT_ID } from '@storybook/addon-actions';
|
||||
|
||||
import { ActionLogger as ActionLoggerComponent } from '../../components/ActionLogger';
|
||||
|
||||
interface ActionLoggerProps {
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
interface ActionLoggerState {
|
||||
actions: ActionDisplay[];
|
||||
}
|
||||
|
||||
const safeDeepEqual = (a: any, b: any): boolean => {
|
||||
try {
|
||||
return deepEqual(a, b);
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export default class ActionLogger extends Component<ActionLoggerProps, ActionLoggerState> {
|
||||
private channel = addons.getChannel();
|
||||
|
||||
constructor(props: ActionLoggerProps) {
|
||||
super(props);
|
||||
|
||||
this.state = { actions: [] };
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.channel.addListener(EVENT_ID, this.addAction);
|
||||
this.channel.addListener(SELECT_STORY, this.handleStoryChange);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.channel.removeListener(SELECT_STORY, this.handleStoryChange);
|
||||
this.channel.removeListener(EVENT_ID, this.addAction);
|
||||
}
|
||||
|
||||
handleStoryChange = () => {
|
||||
const { actions } = this.state;
|
||||
if (actions.length > 0 && actions[0].options.clearOnStoryChange) {
|
||||
this.clearActions();
|
||||
}
|
||||
};
|
||||
|
||||
addAction = (action: ActionDisplay) => {
|
||||
this.setState((prevState: ActionLoggerState) => {
|
||||
const actions = [...prevState.actions];
|
||||
const previous = actions.length && actions[0];
|
||||
if (previous && safeDeepEqual(previous.data, action.data)) {
|
||||
previous.count++; // eslint-disable-line
|
||||
} else {
|
||||
action.count = 1; // eslint-disable-line
|
||||
actions.unshift(action);
|
||||
}
|
||||
return { actions: actions.slice(0, action.options.limit) };
|
||||
});
|
||||
};
|
||||
|
||||
clearActions = () => {
|
||||
this.setState({ actions: [] });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { actions = [] } = this.state;
|
||||
const { active } = this.props;
|
||||
const props = {
|
||||
actions,
|
||||
onClear: this.clearActions,
|
||||
};
|
||||
return active ? <ActionLoggerComponent {...props} /> : null;
|
||||
}
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import addons from '@storybook/addons';
|
||||
import { ADDON_ID, PANEL_ID, PARAM_KEY } from '@storybook/addon-actions';
|
||||
import ActionLogger from './containers/ActionLogger';
|
||||
|
||||
export function register() {
|
||||
addons.register(ADDON_ID, () => {
|
||||
addons.addPanel(PANEL_ID, {
|
||||
title: 'Actions',
|
||||
render: ({ active, key }) => <ActionLogger key={key} active={active} />,
|
||||
paramKey: PARAM_KEY,
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src"
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["src/__tests__/**/*"]
|
||||
}
|
||||
@ -1,52 +0,0 @@
|
||||
# Storybook Backgrounds Addon for react-native
|
||||
|
||||
Storybook Backgrounds Addon for react-native can be used to change background colors of your stories right from the device.
|
||||
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/ondevice-backgrounds/docs/demo.gif" alt="Storybook Backgrounds Addon Demo" width="400" />
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
yarn add -D @storybook/addon-ondevice-backgrounds
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
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
|
||||
|
||||
react-native users will have to import `storiesOf` from `@storybook/react-native` and are required to add the `withBackgrounds` decorator.
|
||||
|
||||
Then write your stories like this:
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
|
||||
|
||||
addDecorator(withBackgrounds);
|
||||
|
||||
storiesOf('Button', module)
|
||||
.addParameters({
|
||||
backgrounds: [
|
||||
{ name: 'dark', value: '#222222' },
|
||||
{ name: 'light', value: '#eeeeee', default: true },
|
||||
],
|
||||
})
|
||||
.add('with text', () => <Text>Click me</Text>);
|
||||
```
|
||||
|
||||
See [web backgrounds addon](../backgrounds#usage) for detailed usage and the [crna-kitchen-sink app](../../examples-native/crna-kitchen-sink) for more examples.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 MiB |
@ -1,48 +0,0 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-backgrounds",
|
||||
"version": "5.3.7",
|
||||
"description": "A react-native storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"background",
|
||||
"react",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://storybook.js.org",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/ondevice-backgrounds"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/api": "5.3.7",
|
||||
"@storybook/client-api": "5.3.7",
|
||||
"core-js": "^3.0.1",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
require('./dist/register');
|
||||
@ -1,99 +0,0 @@
|
||||
/* eslint-disable react/destructuring-assignment, import/no-extraneous-dependencies */
|
||||
import React, { Component } from 'react';
|
||||
import { View, Text } from 'react-native';
|
||||
import Events from '@storybook/core-events';
|
||||
import { AddonStore } from '@storybook/addons';
|
||||
import { API } from '@storybook/api';
|
||||
import { StoryStore } from '@storybook/client-api';
|
||||
|
||||
import Swatch from './Swatch';
|
||||
import BackgroundEvents, { PARAM_KEY } from './constants';
|
||||
import { Background } from './index';
|
||||
|
||||
const codeSample = `
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
|
||||
|
||||
addDecorator(withBackgrounds);
|
||||
|
||||
storiesOf('First Component', module)
|
||||
.addParameters({
|
||||
backgrounds: [
|
||||
{ name: 'warm', value: 'hotpink', default: true },
|
||||
{ name: 'cool', value: 'deepskyblue' },
|
||||
],
|
||||
})
|
||||
.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>{codeSample}</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
export type Channel = ReturnType<AddonStore['getChannel']>;
|
||||
type Selection = ReturnType<StoryStore['fromId']>;
|
||||
interface BackgroundPanelProps {
|
||||
channel: Channel;
|
||||
api: API;
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
interface BackgroundPanelState {
|
||||
selection: Selection;
|
||||
}
|
||||
|
||||
export default class BackgroundPanel extends Component<BackgroundPanelProps, BackgroundPanelState> {
|
||||
componentDidMount() {
|
||||
this.props.channel.on(Events.SELECT_STORY, this.onStorySelected);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.props.channel.removeListener(Events.SELECT_STORY, this.onStorySelected);
|
||||
}
|
||||
|
||||
setBackgroundFromSwatch = (background: string) => {
|
||||
this.props.channel.emit(BackgroundEvents.UPDATE_BACKGROUND, background);
|
||||
};
|
||||
|
||||
onStorySelected = (selection: Selection) => {
|
||||
this.setState({ selection });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { active, api } = this.props;
|
||||
|
||||
if (!active || !this.state) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const story = api
|
||||
.store()
|
||||
.getStoryAndParameters(this.state.selection.kind, this.state.selection.story);
|
||||
const backgrounds: Background[] = story.parameters[PARAM_KEY];
|
||||
|
||||
return (
|
||||
<View>
|
||||
{backgrounds ? (
|
||||
backgrounds.map(({ value, name }) => (
|
||||
<View key={`${name} ${value}`}>
|
||||
<Swatch value={value} name={name} setBackground={this.setBackgroundFromSwatch} />
|
||||
</View>
|
||||
))
|
||||
) : (
|
||||
<Instructions />
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { TouchableOpacity, View, Text } from 'react-native';
|
||||
|
||||
interface SwatchProps {
|
||||
name: string;
|
||||
value: string;
|
||||
setBackground: (background: string) => void;
|
||||
}
|
||||
|
||||
const Swatch: FunctionComponent<SwatchProps> = ({ 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;
|
||||
@ -1,9 +0,0 @@
|
||||
export const PARAM_KEY = 'backgrounds';
|
||||
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`,
|
||||
};
|
||||
@ -1,43 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import { View } from 'react-native';
|
||||
import Constants from './constants';
|
||||
import { Channel } from './BackgroundPanel';
|
||||
|
||||
interface ContainerProps {
|
||||
initialBackground: string;
|
||||
channel: Channel;
|
||||
}
|
||||
|
||||
interface ContainerState {
|
||||
background: string;
|
||||
}
|
||||
|
||||
export default class Container extends Component<ContainerProps, ContainerState> {
|
||||
constructor(props: ContainerProps) {
|
||||
super(props);
|
||||
this.state = { background: props.initialBackground || '' };
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { channel } = this.props;
|
||||
channel.on(Constants.UPDATE_BACKGROUND, this.onBackgroundChange);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
const { channel } = this.props;
|
||||
channel.removeListener(Constants.UPDATE_BACKGROUND, this.onBackgroundChange);
|
||||
}
|
||||
|
||||
onBackgroundChange = (background: string) => {
|
||||
this.setState({ background });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { background } = this.state;
|
||||
const { children } = this.props;
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: background || 'transparent' }}>{children}</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import addons, { makeDecorator } from '@storybook/addons';
|
||||
|
||||
import Events from './constants';
|
||||
import Container from './container';
|
||||
|
||||
export interface Background {
|
||||
name: string;
|
||||
value: string;
|
||||
default?: boolean;
|
||||
}
|
||||
|
||||
export const withBackgrounds = makeDecorator({
|
||||
name: 'withBackgrounds',
|
||||
parameterName: 'backgrounds',
|
||||
skipIfNoParametersOrOptions: true,
|
||||
allowDeprecatedUsage: true,
|
||||
wrapper: (getStory, context, { options, parameters }) => {
|
||||
const data = parameters || options || [];
|
||||
const backgrounds: Background[] = 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>
|
||||
);
|
||||
},
|
||||
});
|
||||
@ -1,14 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import addons from '@storybook/addons';
|
||||
|
||||
import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
|
||||
import BackgroundPanel from './BackgroundPanel';
|
||||
|
||||
addons.register(ADDON_ID, api => {
|
||||
const channel = addons.getChannel();
|
||||
addons.addPanel(PANEL_ID, {
|
||||
title: 'Backgrounds',
|
||||
render: ({ active }) => <BackgroundPanel channel={channel} api={api} active={active} />,
|
||||
paramKey: PARAM_KEY,
|
||||
});
|
||||
});
|
||||
@ -1,12 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src"
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/__tests__/**/*"
|
||||
]
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
# Storybook Knobs Addon for react-native
|
||||
|
||||
Storybook Knobs Addon allows you to edit react props using the Storybook UI using variables inside stories in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
**This addon is a wrapper for addon [@storybook/addon-knobs](https://github.com/storybookjs/storybook/blob/master/addons/knobs).
|
||||
Refer to its documentation to understand how to use knobs**
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
yarn add -D @storybook/addon-ondevice-knobs @storybook/addon-knobs
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
Create a file called `rn-addons.js` in your storybook config.
|
||||
|
||||
Add following content to it:
|
||||
|
||||
```js
|
||||
import '@storybook/addon-ondevice-knobs/register';
|
||||
```
|
||||
|
||||
Then import `rn-addons.js` next to your `getStorybookUI` call.
|
||||
|
||||
```js
|
||||
import './rn-addons';
|
||||
```
|
||||
|
||||
See [@storybook/addon-knobs](https://github.com/storybookjs/storybook/blob/master/addons/knobs) to learn how to write stories with knobs and the [crna-kitchen-sink app](../../examples-native/crna-kitchen-sink) for more examples.
|
||||
@ -1,50 +0,0 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-knobs",
|
||||
"version": "5.3.7",
|
||||
"description": "Display storybook story knobs on your deviced.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"knobs",
|
||||
"ondevice",
|
||||
"react-native",
|
||||
"storybook"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/ondevice-knobs"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/native": "^10.0.14",
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/core-events": "5.3.7",
|
||||
"core-js": "^3.0.1",
|
||||
"deep-equal": "^1.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-native-color-picker": "^0.4.0",
|
||||
"react-native-modal-datetime-picker": "^7.4.2",
|
||||
"react-native-modal-selector": "^1.0.2",
|
||||
"react-native-switch": "^1.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-knobs": "5.3.7",
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
require('./dist/index').register();
|
||||
@ -1,72 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { ScrollView, Text, TouchableOpacity } from 'react-native';
|
||||
import styled from '@emotion/native';
|
||||
|
||||
const Label = styled.Text(({ theme, active }) => ({
|
||||
color: active ? theme.buttonActiveTextColor : theme.buttonTextColor,
|
||||
fontSize: 17,
|
||||
}));
|
||||
|
||||
class GroupTabs extends Component {
|
||||
renderTab(name, group) {
|
||||
let { title } = group;
|
||||
if (typeof title === 'function') {
|
||||
title = title();
|
||||
}
|
||||
|
||||
const { onGroupSelect, selectedGroup } = this.props;
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
marginTop: 5,
|
||||
marginRight: 15,
|
||||
paddingBottom: 10,
|
||||
}}
|
||||
key={name}
|
||||
onPress={() => onGroupSelect(name)}
|
||||
>
|
||||
<Label active={selectedGroup === name}>{title}</Label>
|
||||
</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;
|
||||
@ -1,49 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { View, Text } from 'react-native';
|
||||
import React from 'react';
|
||||
import styled from '@emotion/native';
|
||||
import TypeMap from './types';
|
||||
|
||||
const InvalidType = () => <Text style={{ margin: 10 }}>Invalid Type</Text>;
|
||||
|
||||
const Label = styled.Text(({ theme }) => ({
|
||||
marginLeft: 10,
|
||||
fontSize: 14,
|
||||
color: theme.labelColor,
|
||||
fontWeight: 'bold',
|
||||
}));
|
||||
|
||||
const PropField = ({ onChange, onPress, knob }) => {
|
||||
const InputType = TypeMap[knob.type] || InvalidType;
|
||||
|
||||
return (
|
||||
<View>
|
||||
{!knob.hideLabel ? <Label>{`${knob.label || knob.name}`}</Label> : null}
|
||||
<InputType knob={knob} onChange={onChange} onPress={onPress} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
PropField.propTypes = {
|
||||
knob: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
value: PropTypes.any,
|
||||
hideLabel: PropTypes.bool,
|
||||
type: PropTypes.oneOf([
|
||||
'text',
|
||||
'number',
|
||||
'color',
|
||||
'boolean',
|
||||
'object',
|
||||
'select',
|
||||
'array',
|
||||
'date',
|
||||
'button',
|
||||
]),
|
||||
}).isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
onPress: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default PropField;
|
||||
@ -1,56 +0,0 @@
|
||||
/* 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,
|
||||
};
|
||||
@ -1,17 +0,0 @@
|
||||
import React from 'react';
|
||||
import addons from '@storybook/addons';
|
||||
import Panel from './panel';
|
||||
|
||||
export { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
export function register() {
|
||||
addons.register('RNKNOBS', () => {
|
||||
const channel = addons.getChannel();
|
||||
addons.addPanel('RNKNOBS', {
|
||||
title: 'Knobs',
|
||||
// eslint-disable-next-line react/prop-types
|
||||
render: ({ active, key }) => <Panel key={key} channel={channel} active={active} />,
|
||||
paramKey: 'knobs',
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -1,197 +0,0 @@
|
||||
import React from 'react';
|
||||
import { View, Text } from 'react-native';
|
||||
import PropTypes from 'prop-types';
|
||||
import { SELECT_STORY, FORCE_RE_RENDER } from '@storybook/core-events';
|
||||
import { SET, SET_OPTIONS, RESET, CHANGE, CLICK } from '@storybook/addon-knobs';
|
||||
import styled from '@emotion/native';
|
||||
import GroupTabs from './GroupTabs';
|
||||
import PropForm from './PropForm';
|
||||
|
||||
const getTimestamp = () => +new Date();
|
||||
|
||||
const DEFAULT_GROUP_ID = 'Other';
|
||||
|
||||
const Touchable = styled.TouchableOpacity(({ theme }) => ({
|
||||
borderRadius: 2,
|
||||
borderWidth: 1,
|
||||
borderColor: theme.borderColor,
|
||||
padding: 4,
|
||||
margin: 10,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}));
|
||||
|
||||
const ResetButton = styled.Text(({ theme }) => ({
|
||||
color: theme.buttonTextColor,
|
||||
}));
|
||||
|
||||
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(SET, this.setKnobs);
|
||||
channel.on(SET_OPTIONS, this.setOptions);
|
||||
channel.on(SELECT_STORY, this.reset);
|
||||
channel.emit(FORCE_RE_RENDER);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
const { channel } = this.props;
|
||||
channel.removeListener(SET, this.setKnobs);
|
||||
channel.removeListener(SELECT_STORY, 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(RESET);
|
||||
};
|
||||
|
||||
emitChange(changedKnob) {
|
||||
const { channel } = this.props;
|
||||
channel.emit(CHANGE, 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.type === 'number'
|
||||
? { ...changedKnob, value: parseFloat(changedKnob.value) }
|
||||
: changedKnob
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
handleClick(knob) {
|
||||
const { channel } = this.props;
|
||||
|
||||
channel.emit(CLICK, knob);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { active } = this.props;
|
||||
|
||||
if (!active) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { knobs, groupId: stateGroupId } = this.state;
|
||||
|
||||
const groups = {};
|
||||
const groupIds = [];
|
||||
|
||||
let knobsArray = Object.keys(knobs);
|
||||
|
||||
const knobsWithGroups = knobsArray.filter(key => knobs[key].groupId);
|
||||
|
||||
knobsWithGroups.forEach(key => {
|
||||
const knobKeyGroupId = knobs[key].groupId;
|
||||
groupIds.push(knobKeyGroupId);
|
||||
groups[knobKeyGroupId] = {
|
||||
render: () => <Text id={knobKeyGroupId}>{knobKeyGroupId}</Text>,
|
||||
title: knobKeyGroupId,
|
||||
};
|
||||
});
|
||||
|
||||
const allHaveGroups = groupIds.length > 0 && knobsArray.length === knobsWithGroups.length;
|
||||
|
||||
// If all of the knobs are assigned to a group, we don't need the default group.
|
||||
const groupId =
|
||||
stateGroupId === DEFAULT_GROUP_ID && allHaveGroups
|
||||
? knobs[knobsWithGroups[0]].groupId
|
||||
: stateGroupId;
|
||||
|
||||
if (groupIds.length > 0) {
|
||||
if (!allHaveGroups) {
|
||||
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);
|
||||
}
|
||||
|
||||
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, paddingTop: 10 }}>
|
||||
{groupIds.length > 0 && (
|
||||
<GroupTabs groups={groups} onGroupSelect={this.onGroupSelect} selectedGroup={groupId} />
|
||||
)}
|
||||
<View>
|
||||
<PropForm
|
||||
knobs={knobsArray}
|
||||
onFieldChange={this.handleChange}
|
||||
onFieldClick={this.handleClick}
|
||||
/>
|
||||
</View>
|
||||
<Touchable onPress={this.reset}>
|
||||
<ResetButton>RESET</ResetButton>
|
||||
</Touchable>
|
||||
</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
|
||||
};
|
||||
@ -1,55 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import styled from '@emotion/native';
|
||||
|
||||
const Input = styled.TextInput(({ theme }) => ({
|
||||
borderWidth: 1,
|
||||
borderColor: theme.borderColor,
|
||||
borderRadius: 2,
|
||||
fontSize: 13,
|
||||
padding: 5,
|
||||
margin: 10,
|
||||
color: theme.labelColor,
|
||||
}));
|
||||
|
||||
function formatArray(value, separator) {
|
||||
if (value === '') {
|
||||
return [];
|
||||
}
|
||||
return value.split(separator);
|
||||
}
|
||||
|
||||
const ArrayType = ({ knob, onChange }) => (
|
||||
<Input
|
||||
id={knob.name}
|
||||
underlineColorAndroid="transparent"
|
||||
autoCapitalize="none"
|
||||
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,
|
||||
separator: PropTypes.string,
|
||||
}),
|
||||
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;
|
||||
@ -1,39 +0,0 @@
|
||||
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;
|
||||
@ -1,31 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { TouchableOpacity } from 'react-native';
|
||||
import styled from '@emotion/native';
|
||||
|
||||
const Label = styled.Text(({ theme }) => ({
|
||||
fontSize: 17,
|
||||
color: theme.labelColor,
|
||||
}));
|
||||
|
||||
const ButtonType = ({ knob, onPress }) => (
|
||||
<TouchableOpacity style={{ margin: 10 }} onPress={() => onPress(knob)}>
|
||||
<Label>{knob.name}</Label>
|
||||
</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;
|
||||
@ -1,104 +0,0 @@
|
||||
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';
|
||||
import styled from '@emotion/native';
|
||||
|
||||
const Touchable = styled.TouchableOpacity(({ theme, color }) => ({
|
||||
borderColor: theme.borderColor,
|
||||
width: 30,
|
||||
height: 20,
|
||||
borderRadius: 2,
|
||||
borderWidth: 1,
|
||||
margin: 10,
|
||||
backgroundColor: color,
|
||||
}));
|
||||
|
||||
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;
|
||||
return (
|
||||
<View>
|
||||
<Touchable color={knob.value} 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;
|
||||
@ -1,104 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { PureComponent } from 'react';
|
||||
import { View } from 'react-native';
|
||||
import DateTimePicker from 'react-native-modal-datetime-picker';
|
||||
import styled from '@emotion/native';
|
||||
|
||||
const Touchable = styled.TouchableOpacity(({ theme }) => ({
|
||||
borderColor: theme.borderColor,
|
||||
borderWidth: 1,
|
||||
borderRadius: 2,
|
||||
padding: 5,
|
||||
}));
|
||||
|
||||
const Label = styled.Text(({ theme }) => ({
|
||||
fontSize: 13,
|
||||
color: theme.labelColor,
|
||||
}));
|
||||
|
||||
// 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' }}>
|
||||
<Touchable onPress={this.showDatePicker}>
|
||||
<Label>{dateString}</Label>
|
||||
</Touchable>
|
||||
<Touchable
|
||||
style={{
|
||||
marginLeft: 5,
|
||||
}}
|
||||
onPress={this.showTimePicker}
|
||||
>
|
||||
<Label>{timeString}</Label>
|
||||
</Touchable>
|
||||
</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;
|
||||
@ -1,96 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { View, Slider } from 'react-native';
|
||||
import styled from '@emotion/native';
|
||||
|
||||
const Input = styled.TextInput(({ theme }) => ({
|
||||
borderWidth: 1,
|
||||
borderColor: theme.borderColor,
|
||||
borderRadius: 2,
|
||||
fontSize: 13,
|
||||
padding: 5,
|
||||
color: theme.labelColor,
|
||||
}));
|
||||
|
||||
class NumberType extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.renderNormal = this.renderNormal.bind(this);
|
||||
this.renderRange = this.renderRange.bind(this);
|
||||
}
|
||||
|
||||
numberTransformer = x => {
|
||||
if (Number.isNaN(Number(x))) {
|
||||
return x.substr(0, x.length - 1);
|
||||
}
|
||||
|
||||
return x;
|
||||
};
|
||||
|
||||
onChangeNormal = value => {
|
||||
const { onChange } = this.props;
|
||||
|
||||
if (!Number.isNaN(value)) {
|
||||
onChange(value);
|
||||
}
|
||||
};
|
||||
|
||||
renderNormal() {
|
||||
const { knob } = this.props;
|
||||
|
||||
return (
|
||||
<Input
|
||||
autoCapitalize="none"
|
||||
underlineColorAndroid="transparent"
|
||||
value={(knob.value || '').toString()}
|
||||
transformer={this.numberTransformer}
|
||||
keyboardType="numeric"
|
||||
onChangeText={this.onChangeNormal}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
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.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
step: PropTypes.number,
|
||||
min: PropTypes.number,
|
||||
max: PropTypes.number,
|
||||
range: PropTypes.bool,
|
||||
}),
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
NumberType.serialize = value => String(value);
|
||||
NumberType.deserialize = value => parseFloat(value);
|
||||
|
||||
export default NumberType;
|
||||
@ -1,102 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import deepEqual from 'deep-equal';
|
||||
import styled from '@emotion/native';
|
||||
|
||||
const Input = styled.TextInput(({ theme }) => ({
|
||||
borderWidth: 1,
|
||||
borderRadius: 2,
|
||||
fontSize: 13,
|
||||
padding: 5,
|
||||
margin: 10,
|
||||
borderColor: theme.borderColor,
|
||||
color: theme.labelColor,
|
||||
}));
|
||||
|
||||
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 withReplacedQuotes = value
|
||||
.replace(/[\u2018\u2019]/g, "'")
|
||||
.replace(/[\u201C\u201D]/g, '"');
|
||||
|
||||
const newState = {
|
||||
jsonString: withReplacedQuotes,
|
||||
};
|
||||
|
||||
try {
|
||||
newState.json = JSON.parse(withReplacedQuotes.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 (
|
||||
<Input
|
||||
id={knob.name}
|
||||
style={extraStyle}
|
||||
value={jsonString}
|
||||
onChangeText={this.handleChange}
|
||||
multiline
|
||||
autoCapitalize="none"
|
||||
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;
|
||||
@ -1,73 +0,0 @@
|
||||
/* eslint no-underscore-dangle: 0 */
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import { View } from 'react-native';
|
||||
import React from 'react';
|
||||
import ModalPicker from 'react-native-modal-selector';
|
||||
import styled from '@emotion/native';
|
||||
|
||||
const Input = styled.TextInput(({ theme }) => ({
|
||||
borderWidth: 1,
|
||||
borderRadius: 2,
|
||||
padding: 5,
|
||||
margin: 10,
|
||||
borderColor: theme.borderColor,
|
||||
color: theme.labelColor,
|
||||
}));
|
||||
|
||||
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 active = options.filter(({ key }) => knob.value === key)[0];
|
||||
const selected = active && active.label;
|
||||
|
||||
return (
|
||||
<View>
|
||||
<ModalPicker
|
||||
data={options}
|
||||
initValue={knob.value}
|
||||
onChange={option => onChange(option.key)}
|
||||
animationType="none"
|
||||
>
|
||||
<Input
|
||||
editable={false}
|
||||
value={selected}
|
||||
autoCapitalize="none"
|
||||
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;
|
||||
@ -1,41 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import styled from '@emotion/native';
|
||||
|
||||
const Input = styled.TextInput(({ theme }) => ({
|
||||
borderWidth: 1,
|
||||
borderColor: theme.borderColor,
|
||||
borderRadius: 2,
|
||||
fontSize: 13,
|
||||
padding: 5,
|
||||
margin: 10,
|
||||
color: theme.labelColor,
|
||||
}));
|
||||
|
||||
const TextType = ({ knob, onChange }) => (
|
||||
<Input
|
||||
id={knob.name}
|
||||
value={knob.value}
|
||||
onChangeText={onChange}
|
||||
autoCapitalize="none"
|
||||
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;
|
||||
@ -1,21 +0,0 @@
|
||||
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,
|
||||
};
|
||||
@ -1,43 +0,0 @@
|
||||
# Storybook Notes Addon for react-native
|
||||
|
||||
The Notes Addon allows you to write notes (text or markdown) for your stories in [Storybook](https://storybook.js.org).
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
yarn add -D @storybook/addon-ondevice-notes
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
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';
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Use the `notes` parameter to add a note to stories:
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/react-native';
|
||||
|
||||
import Component from './Component';
|
||||
|
||||
storiesOf('Component', module).add('with some emoji', () => <Component />, {
|
||||
notes: 'A small component',
|
||||
});
|
||||
```
|
||||
|
||||
See the [crna-kitchen-sink app](../../examples-native/crna-kitchen-sink) for more examples.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 132 KiB |
@ -1,48 +0,0 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-notes",
|
||||
"version": "5.3.7",
|
||||
"description": "Write notes for your react-native Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"notes",
|
||||
"react-native",
|
||||
"storybook"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/ondevice-notes"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/core": "^10.0.20",
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/api": "5.3.7",
|
||||
"@storybook/client-api": "5.3.7",
|
||||
"@storybook/client-logger": "5.3.7",
|
||||
"@storybook/core-events": "5.3.7",
|
||||
"core-js": "^3.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-native-simple-markdown": "^1.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
require('./dist/register.js');
|
||||
@ -1,43 +0,0 @@
|
||||
import React from 'react';
|
||||
import { View } from 'react-native';
|
||||
import Markdown from 'react-native-simple-markdown';
|
||||
import { AddonStore } from '@storybook/addons';
|
||||
import { API } from '@storybook/api';
|
||||
import { ThemeContext } from '@emotion/core';
|
||||
|
||||
export const PARAM_KEY = `notes`;
|
||||
|
||||
interface NotesProps {
|
||||
channel: ReturnType<AddonStore['getChannel']>;
|
||||
api: API;
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
export const Notes = ({ active, api }: NotesProps) => {
|
||||
if (!active) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const selection = api.store().getSelection();
|
||||
|
||||
if (!selection) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const story = api.store().fromId(selection.storyId);
|
||||
const text = story.parameters[PARAM_KEY];
|
||||
|
||||
const textAfterFormatted: string = text ? text.trim() : '';
|
||||
|
||||
return (
|
||||
<View style={{ padding: 10, flex: 1 }}>
|
||||
<ThemeContext.Consumer>
|
||||
{theme => (
|
||||
<Markdown styles={{ text: { color: (theme as any).labelColor } }}>
|
||||
{textAfterFormatted}
|
||||
</Markdown>
|
||||
)}
|
||||
</ThemeContext.Consumer>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
@ -1,6 +0,0 @@
|
||||
import { logger } from '@storybook/client-logger';
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
if (__DEV__) {
|
||||
logger.log("import '@storybook/addon-ondevice-notes/register' to register the notes addon");
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import addons from '@storybook/addons';
|
||||
import { Notes } from './components/Notes';
|
||||
|
||||
export const PARAM_KEY = `notes`;
|
||||
|
||||
addons.register('storybook/notes', api => {
|
||||
const channel = addons.getChannel();
|
||||
addons.addPanel('storybook/notes/panel', {
|
||||
title: 'Notes',
|
||||
render: ({ active, key }) => <Notes key={key} channel={channel} api={api} active={active} />,
|
||||
paramKey: PARAM_KEY,
|
||||
});
|
||||
});
|
||||
4
addons/ondevice-notes/src/typings.d.ts
vendored
4
addons/ondevice-notes/src/typings.d.ts
vendored
@ -1,4 +0,0 @@
|
||||
declare module 'react-native-simple-markdown' {
|
||||
const Markdown: any;
|
||||
export default Markdown;
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src"
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/__tests__/**/*"
|
||||
]
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-options",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "Options addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,7 +18,6 @@
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
@ -29,7 +28,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"core-js": "^3.0.1",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-queryparams",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "parameter addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -19,7 +19,6 @@
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
@ -30,12 +29,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/api": "5.3.7",
|
||||
"@storybook/client-logger": "5.3.7",
|
||||
"@storybook/components": "5.3.7",
|
||||
"@storybook/core-events": "5.3.7",
|
||||
"@storybook/theming": "5.3.7",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"@storybook/api": "6.0.0-alpha.1",
|
||||
"@storybook/client-logger": "6.0.0-alpha.1",
|
||||
"@storybook/components": "6.0.0-alpha.1",
|
||||
"@storybook/core-events": "6.0.0-alpha.1",
|
||||
"@storybook/theming": "6.0.0-alpha.1",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"qs": "^6.6.0",
|
||||
|
||||
@ -4,7 +4,6 @@ module.exports = {
|
||||
'@storybook/angular',
|
||||
'@storybook/html',
|
||||
'@storybook/react',
|
||||
'@storybook/react-native',
|
||||
'@storybook/preact',
|
||||
'@storybook/vue',
|
||||
'@storybook/svelte',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,7 +18,6 @@
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
@ -33,9 +32,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@jest/transform": "^24.9.0",
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/client-api": "5.3.7",
|
||||
"@storybook/core": "5.3.7",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"@storybook/client-api": "6.0.0-alpha.1",
|
||||
"@storybook/core": "6.0.0-alpha.1",
|
||||
"@types/glob": "^7.1.1",
|
||||
"@types/jest": "^24.0.16",
|
||||
"@types/jest-specific-snapshot": "^0.5.3",
|
||||
@ -49,8 +48,8 @@
|
||||
"ts-dedent": "^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-docs": "5.3.7",
|
||||
"@storybook/react": "5.3.7",
|
||||
"@storybook/addon-docs": "6.0.0-alpha.1",
|
||||
"@storybook/react": "6.0.0-alpha.1",
|
||||
"babel-loader": "^8.0.6",
|
||||
"enzyme-to-json": "^3.4.1",
|
||||
"jest-emotion": "^10.0.17",
|
||||
|
||||
@ -43,7 +43,7 @@ export class Stories2SnapsConverter {
|
||||
To fix it, add following to your jest.config.js:
|
||||
transform: {
|
||||
// should be above any other js transform like babel-jest
|
||||
'^.+\\\\.stories\\\\.js$': '@storybook/addon-storyshots/injectFileName',
|
||||
'^.+\\.stories\\.js$': '@storybook/addon-storyshots/injectFileName',
|
||||
}
|
||||
`
|
||||
);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,7 +18,6 @@
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
@ -30,7 +29,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/csf": "0.0.1",
|
||||
"@storybook/node-logger": "5.3.7",
|
||||
"@storybook/node-logger": "6.0.0-alpha.1",
|
||||
"@types/jest-image-snapshot": "^2.8.0",
|
||||
"@wordpress/jest-puppeteer-axe": "^1.5.0",
|
||||
"core-js": "^3.0.1",
|
||||
@ -42,16 +41,16 @@
|
||||
"@types/puppeteer": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "5.3.7",
|
||||
"@storybook/addon-storyshots": "6.0.0-alpha.1",
|
||||
"puppeteer": "^1.12.2 || ^2.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
|
||||
"peerDependenciesMeta": {
|
||||
"puppeteer": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "Stories addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,7 +18,6 @@
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
@ -28,11 +27,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/components": "5.3.7",
|
||||
"@storybook/router": "5.3.7",
|
||||
"@storybook/source-loader": "5.3.7",
|
||||
"@storybook/theming": "5.3.7",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"@storybook/components": "6.0.0-alpha.1",
|
||||
"@storybook/router": "6.0.0-alpha.1",
|
||||
"@storybook/source-loader": "6.0.0-alpha.1",
|
||||
"@storybook/theming": "6.0.0-alpha.1",
|
||||
"core-js": "^3.0.1",
|
||||
"estraverse": "^4.2.0",
|
||||
"loader-utils": "^1.2.3",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 247 KiB After Width: | Height: | Size: 209 KiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "Storybook addon to change the viewport size to mobile",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,7 +18,6 @@
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts"
|
||||
@ -29,12 +28,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/api": "5.3.7",
|
||||
"@storybook/client-logger": "5.3.7",
|
||||
"@storybook/components": "5.3.7",
|
||||
"@storybook/core-events": "5.3.7",
|
||||
"@storybook/theming": "5.3.7",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"@storybook/api": "6.0.0-alpha.1",
|
||||
"@storybook/client-logger": "6.0.0-alpha.1",
|
||||
"@storybook/components": "6.0.0-alpha.1",
|
||||
"@storybook/core-events": "6.0.0-alpha.1",
|
||||
"@storybook/theming": "6.0.0-alpha.1",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"memoizerific": "^1.11.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -33,9 +33,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.3.7",
|
||||
"@storybook/core": "5.3.7",
|
||||
"@storybook/node-logger": "5.3.7",
|
||||
"@storybook/addons": "6.0.0-alpha.1",
|
||||
"@storybook/core": "6.0.0-alpha.1",
|
||||
"@storybook/node-logger": "6.0.0-alpha.1",
|
||||
"@types/webpack-env": "^1.15.0",
|
||||
"core-js": "^3.0.1",
|
||||
"fork-ts-checker-webpack-plugin": "^3.0.1",
|
||||
|
||||
@ -9,6 +9,8 @@ export {
|
||||
raw,
|
||||
} from './preview';
|
||||
|
||||
export { StoryFnAngularReturnType as IStory } from './preview/types';
|
||||
|
||||
export { moduleMetadata } from './preview/angular/decorators';
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "5.3.7",
|
||||
"version": "6.0.0-alpha.1",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
|
||||
"bugs": {
|
||||
@ -30,8 +30,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ember/test-helpers": "^1.5.0",
|
||||
"@storybook/core": "5.3.7",
|
||||
"@ember/test-helpers": "^1.7.0",
|
||||
"@storybook/core": "6.0.0-alpha.1",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
@ -39,9 +39,8 @@
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-loader": "^7.0.0 || ^8.0.0",
|
||||
"babel-plugin-ember-modules-api-polyfill": "^2.4.0",
|
||||
"ember-cli-htmlbars-inline-precompile": "^1.0.3",
|
||||
"ember-source": "^3.4.0"
|
||||
"babel-plugin-ember-modules-api-polyfill": "^2.12.0",
|
||||
"ember-source": "^3.16.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.0.0"
|
||||
|
||||
@ -5,7 +5,17 @@ export function babel(config: Configuration) {
|
||||
const babelConfigPlugins = config.plugins || [];
|
||||
|
||||
const extraPlugins = [
|
||||
[require.resolve('babel-plugin-htmlbars-inline-precompile'), { precompile }],
|
||||
[
|
||||
require.resolve('babel-plugin-htmlbars-inline-precompile'),
|
||||
{
|
||||
precompile,
|
||||
modules: {
|
||||
'ember-cli-htmlbars': 'hbs',
|
||||
'ember-cli-htmlbars-inline-precompile': 'default',
|
||||
'htmlbars-inline-precompile': 'default',
|
||||
},
|
||||
},
|
||||
],
|
||||
[require.resolve('babel-plugin-ember-modules-api-polyfill')],
|
||||
];
|
||||
|
||||
|
||||
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