mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 01:31:06 +08:00
Merge branch 'next' into feat/refactor
This commit is contained in:
Norbert de Langen
commit
5e41764fd2
@ -4,7 +4,7 @@ aliases:
|
||||
- &defaults
|
||||
working_directory: /tmp/storybook
|
||||
docker:
|
||||
- image: circleci/node:8
|
||||
- image: circleci/node:10
|
||||
|
||||
dependencies:
|
||||
pre:
|
||||
|
||||
156
.eslintrc.js
156
.eslintrc.js
@ -1,162 +1,8 @@
|
||||
const error = 2;
|
||||
const warn = 1;
|
||||
const ignore = 0;
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: [
|
||||
'airbnb',
|
||||
'plugin:jest/recommended',
|
||||
'plugin:import/react-native',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'prettier',
|
||||
'prettier/react',
|
||||
'prettier/@typescript-eslint',
|
||||
],
|
||||
plugins: [
|
||||
'@typescript-eslint',
|
||||
'prettier',
|
||||
'jest',
|
||||
'import',
|
||||
'react',
|
||||
'jsx-a11y',
|
||||
'json',
|
||||
'html',
|
||||
],
|
||||
parser: '@typescript-eslint/parser',
|
||||
parserOptions: {
|
||||
ecmaVersion: 8,
|
||||
sourceType: 'module',
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
},
|
||||
},
|
||||
env: { es6: true, node: true, 'jest/globals': true },
|
||||
settings: {
|
||||
'import/core-modules': ['enzyme'],
|
||||
'import/ignore': ['node_modules\\/(?!@storybook)'],
|
||||
'import/resolver': {
|
||||
node: {
|
||||
extensions: ['.js', '.ts', '.tsx', '.mjs', '.d.ts'],
|
||||
paths: ['node_modules/', 'node_modules/@types/'],
|
||||
},
|
||||
},
|
||||
'html/html-extensions': ['.html'],
|
||||
},
|
||||
rules: {
|
||||
'no-restricted-imports': [
|
||||
error,
|
||||
{
|
||||
paths: [
|
||||
{
|
||||
name: 'lodash.isequal',
|
||||
message:
|
||||
'Lodash modularised (and lodash < 4.17.11) have CVE vulnerabilities. Please use tree-shakeable imports like lodash/xxx instead',
|
||||
},
|
||||
{
|
||||
name: 'lodash.mergewith',
|
||||
message:
|
||||
'Lodash modularised (and lodash < 4.17.11) have CVE vulnerabilities. Please use tree-shakeable imports like lodash/xxx instead',
|
||||
},
|
||||
{
|
||||
name: 'lodash.pick',
|
||||
message:
|
||||
'Lodash modularised (and lodash < 4.17.11) have CVE vulnerabilities. Please use tree-shakeable imports like lodash/xxx instead',
|
||||
},
|
||||
],
|
||||
// catch-all for any lodash modularised. The CVE is listed against the entire family for lodash < 4.17.11
|
||||
patterns: ['lodash.*'],
|
||||
},
|
||||
],
|
||||
'prettier/prettier': [warn],
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? error : ignore,
|
||||
'class-methods-use-this': ignore,
|
||||
'import/extensions': [
|
||||
error,
|
||||
'always',
|
||||
{
|
||||
js: 'never',
|
||||
ts: 'never',
|
||||
tsx: 'never',
|
||||
mjs: 'never',
|
||||
},
|
||||
],
|
||||
'import/no-extraneous-dependencies': [
|
||||
error,
|
||||
{
|
||||
devDependencies: [
|
||||
'examples/**',
|
||||
'examples-native/**',
|
||||
'**/example/**',
|
||||
'*.js',
|
||||
'**/*.test.js',
|
||||
'**/*.stories.*',
|
||||
'**/scripts/*.js',
|
||||
'**/stories/**/*.js',
|
||||
'**/__tests__/**/*.js',
|
||||
'**/.storybook/**/*.*',
|
||||
],
|
||||
peerDependencies: true,
|
||||
},
|
||||
],
|
||||
'import/prefer-default-export': ignore,
|
||||
'import/default': error,
|
||||
'import/named': error,
|
||||
'import/namespace': error,
|
||||
'react/jsx-filename-extension': [
|
||||
warn,
|
||||
{
|
||||
extensions: ['.js', '.jsx', '.tsx'],
|
||||
},
|
||||
],
|
||||
'react/jsx-no-bind': [
|
||||
error,
|
||||
{
|
||||
ignoreDOMComponents: true,
|
||||
ignoreRefs: true,
|
||||
allowArrowFunctions: true,
|
||||
allowFunctions: true,
|
||||
allowBind: true,
|
||||
},
|
||||
],
|
||||
'jsx-a11y/accessible-emoji': ignore,
|
||||
'jsx-a11y/label-has-associated-control': [
|
||||
warn,
|
||||
{
|
||||
labelComponents: ['CustomInputLabel'],
|
||||
labelAttributes: ['label'],
|
||||
controlComponents: ['CustomInput'],
|
||||
depth: 3,
|
||||
},
|
||||
],
|
||||
'react/no-unescaped-entities': ignore,
|
||||
'jsx-a11y/label-has-for': [error, { required: { some: ['nesting', 'id'] } }],
|
||||
'jsx-a11y/anchor-is-valid': [
|
||||
error,
|
||||
{
|
||||
components: ['A', 'LinkTo', 'Link'],
|
||||
specialLink: ['overrideParams', 'kind', 'story', 'to'],
|
||||
},
|
||||
],
|
||||
'no-underscore-dangle': [
|
||||
error,
|
||||
{
|
||||
allow: [
|
||||
'__STORYBOOK_CLIENT_API__',
|
||||
'__STORYBOOK_ADDONS_CHANNEL__',
|
||||
'__STORYBOOK_STORY_STORE__',
|
||||
],
|
||||
},
|
||||
],
|
||||
'@typescript-eslint/no-var-requires': ignore,
|
||||
'@typescript-eslint/camelcase': ignore,
|
||||
'@typescript-eslint/no-unused-vars': ignore,
|
||||
'@typescript-eslint/explicit-member-accessibility': ignore,
|
||||
'@typescript-eslint/explicit-function-return-type': ignore,
|
||||
'@typescript-eslint/no-explicit-any': ignore, // would prefer to enable this
|
||||
'@typescript-eslint/no-use-before-define': ignore, // this is duplicated
|
||||
'@typescript-eslint/interface-name-prefix': ignore, // I don't agree
|
||||
},
|
||||
extends: ['@storybook/eslint-config-storybook'],
|
||||
overrides: [
|
||||
{
|
||||
files: [
|
||||
|
||||
32
.github/main.workflow
vendored
32
.github/main.workflow
vendored
@ -1,32 +0,0 @@
|
||||
action "Danger JS" {
|
||||
uses = "danger/danger-js@master"
|
||||
secrets = ["GITHUB_TOKEN"]
|
||||
args = "--dangerfile .ci/danger/dangerfile.ts"
|
||||
}
|
||||
|
||||
workflow "Dangerfile JS Pull" {
|
||||
on = "pull_request"
|
||||
resolves = "Danger JS"
|
||||
}
|
||||
|
||||
workflow "Dangerfile JS Label" {
|
||||
on = "label"
|
||||
resolves = "Danger JS"
|
||||
}
|
||||
|
||||
# ===
|
||||
|
||||
action "Automention" {
|
||||
uses = "shilman/automention@master"
|
||||
secrets = ["GITHUB_TOKEN"]
|
||||
}
|
||||
|
||||
workflow "Automention Issues" {
|
||||
on = "issues"
|
||||
resolves = "Automention"
|
||||
}
|
||||
|
||||
workflow "Automention PRs" {
|
||||
on = "pull_request"
|
||||
resolves = "Automention"
|
||||
}
|
||||
12
.github/workflows/issues.yml
vendored
Normal file
12
.github/workflows/issues.yml
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
on: issues
|
||||
name: Automention Issues
|
||||
jobs:
|
||||
automention:
|
||||
name: Automention
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@master
|
||||
- name: Automention
|
||||
uses: shilman/automention@master
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
14
.github/workflows/label.yml
vendored
Normal file
14
.github/workflows/label.yml
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
on: label
|
||||
name: Dangerfile JS Label
|
||||
jobs:
|
||||
dangerJS:
|
||||
name: Danger JS
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@master
|
||||
- name: Danger JS
|
||||
uses: danger/danger-js@master
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
with:
|
||||
args: --dangerfile .ci/danger/dangerfile.ts
|
||||
6
.github/workflows/nodejs.yml
vendored
6
.github/workflows/nodejs.yml
vendored
@ -1,4 +1,4 @@
|
||||
name: Node CI
|
||||
name: Github CI
|
||||
|
||||
on: [push]
|
||||
|
||||
@ -9,8 +9,8 @@ jobs:
|
||||
runs-on: ${{ matrix.os }}
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [8, 10, 12]
|
||||
os: [ubuntu-latest, windows-latest, macOS-latest]
|
||||
node-version: [10]
|
||||
os: [ubuntu-latest]
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v1
|
||||
|
||||
12
.github/workflows/pull_request-automention-prs.yml
vendored
Normal file
12
.github/workflows/pull_request-automention-prs.yml
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
on: pull_request
|
||||
name: Automention PRs
|
||||
jobs:
|
||||
automention:
|
||||
name: Automention
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@master
|
||||
- name: Automention
|
||||
uses: shilman/automention@master
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
14
.github/workflows/pull_request-dangerfile-js-pull.yml
vendored
Normal file
14
.github/workflows/pull_request-dangerfile-js-pull.yml
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
on: pull_request
|
||||
name: Dangerfile JS Pull
|
||||
jobs:
|
||||
dangerJS:
|
||||
name: Danger JS
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@master
|
||||
- name: Danger JS
|
||||
uses: danger/danger-js@master
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
with:
|
||||
args: --dangerfile .ci/danger/dangerfile.ts
|
||||
3
.gitignore
vendored
3
.gitignore
vendored
@ -30,4 +30,5 @@ scripts/storage
|
||||
htpasswd
|
||||
/false
|
||||
storybook-out
|
||||
/addons/docs/common/config-*
|
||||
/addons/docs/common/config-*
|
||||
built-storybooks
|
||||
|
||||
10
.npmignore
10
.npmignore
@ -1,10 +0,0 @@
|
||||
/example/
|
||||
/demo/
|
||||
/docs/
|
||||
/media/
|
||||
/node_modules/
|
||||
/.storybook/
|
||||
|
||||
*.md
|
||||
|
||||
.babelrc
|
||||
@ -1,3 +1,2 @@
|
||||
module.exports = {
|
||||
plugins: ['remark-preset-lint-recommended', ['remark-lint-list-item-indent', false]],
|
||||
};
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
module.exports = require('@storybook/linter-config/remark.config');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- "8"
|
||||
- "10"
|
||||
|
||||
cache:
|
||||
yarn: true
|
||||
|
||||
121
CHANGELOG.md
121
CHANGELOG.md
@ -1,3 +1,120 @@
|
||||
## 5.3.0-alpha.4 (September 26, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* UI: Move addon dependencies to devDependencies ([#8206](https://github.com/storybookjs/storybook/pull/8206))
|
||||
* Addon-knobs: Handle undefined array value ([#8006](https://github.com/storybookjs/storybook/pull/8006))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Build: Upgrade from node8 to node10 ([#8207](https://github.com/storybookjs/storybook/pull/8207))
|
||||
|
||||
## 5.3.0-alpha.3 (September 25, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Dependencies: add @types/webpack-env to apps that depend on it ([#8119](https://github.com/storybookjs/storybook/pull/8119))
|
||||
* UI: Removes default CSS margins on viewport ([#7742](https://github.com/storybookjs/storybook/pull/7742))
|
||||
|
||||
## 5.3.0-alpha.2 (September 24, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Core: Fix lib/core files ([#8182](https://github.com/storybookjs/storybook/pull/8182))
|
||||
|
||||
## 5.3.0-alpha.1 (September 23, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Preact: Allow JSX.Element story ([#8159](https://github.com/storybookjs/storybook/pull/8159))
|
||||
* Addon-docs: CSS classes for escape-hatch theming wrapper/content ([#8061](https://github.com/storybookjs/storybook/pull/8061))
|
||||
* CLI: Fix variable collisions in storiesof-to-csf ([#8106](https://github.com/storybookjs/storybook/pull/8106))
|
||||
* Storyshots: Fix STORYBOOK_HOOKS_CONTEXT error ([#8163](https://github.com/storybookjs/storybook/pull/8163))
|
||||
* Addon-contexts: Remove peer dependencies ([#7675](https://github.com/storybookjs/storybook/pull/7675))
|
||||
* Addon-knobs: Add missing type def ([#8118](https://github.com/storybookjs/storybook/pull/8118))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* Update react-draggable to 4.0.3 ([#8145](https://github.com/storybookjs/storybook/pull/8145))
|
||||
|
||||
## 5.2.1 (September 17, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Core: Fix error handling ([#8097](https://github.com/storybookjs/storybook/pull/8097))
|
||||
|
||||
## 5.3.0-alpha.0 (September 16, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* UI: Debounce sidebar search filter ([#8032](https://github.com/storybookjs/storybook/pull/8032))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Core: Fix error handling ([#8097](https://github.com/storybookjs/storybook/pull/8097))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* CLI: Add wrapper packages: sb & storybook ([#8034](https://github.com/storybookjs/storybook/pull/8034))
|
||||
* Build: Update now config ([#8049](https://github.com/storybookjs/storybook/pull/8049))
|
||||
|
||||
## 5.2.0 (September 13, 2019)
|
||||
|
||||
Storybook 5.2 is here!
|
||||
|
||||
- 📚 DocsPage: Zero-config documentation
|
||||
- 📦 Component Story Format: Portable ES6 modules
|
||||
- 🖼 Design System: Best practice component development
|
||||
- 🧩 Addon API: Simplified w/ hooks
|
||||
|
||||
5.2 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.2.0-alpha.*`, `5.2.0-beta.*`, and `5.2.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to upgrade from `5.0` or earlier.
|
||||
|
||||
## 5.2.0-rc.11 (September 10, 2019)
|
||||
|
||||
### Features
|
||||
|
||||
* DocsPage: show docs.storyDescription above story ([#8037](https://github.com/storybookjs/storybook/pull/8037))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* Migrate to new github actions ([#8045](https://github.com/storybookjs/storybook/pull/8045))
|
||||
|
||||
## 5.2.0-rc.10 (September 9, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Angular: remove webpack-env from tsconfig types ([#8036](https://github.com/storybookjs/storybook/pull/8036))
|
||||
|
||||
### Documentation
|
||||
|
||||
* Guides: Update all guides to CSF ([#8030](https://github.com/storybookjs/storybook/pull/8030))
|
||||
|
||||
## 5.2.0-rc.9 (September 7, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-knobs: allow array values in select and options knobs ([#8027](https://github.com/storybookjs/storybook/pull/8027))
|
||||
|
||||
## 5.2.0-rc.8 (September 6, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Scroll story into view ([#7994](https://github.com/storybookjs/storybook/pull/7994))
|
||||
* Addon-docs: Fix LI styling for dark color theme ([#8015](https://github.com/storybookjs/storybook/pull/8015))
|
||||
|
||||
## 5.2.0-rc.7 (September 6, 2019)
|
||||
|
||||
Publish failed
|
||||
|
||||
## 5.2.0-rc.6 (September 5, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-docs: Doc blocks fixes for dark theme ([#7991](https://github.com/storybookjs/storybook/pull/7991))
|
||||
* API: Fix useEfect in inline Docs ([#7992](https://github.com/storybookjs/storybook/pull/7992))
|
||||
* UI: Fix enableShortcuts option ([#7990](https://github.com/storybookjs/storybook/pull/7990))
|
||||
* Addon-docs: Error handling for invalid Story id ([#7965](https://github.com/storybookjs/storybook/pull/7965))
|
||||
|
||||
## 5.2.0-rc.5 (September 4, 2019)
|
||||
|
||||
### Bug Fixes
|
||||
@ -963,7 +1080,7 @@ Storybook 5.1 is a juicy upgrade including:
|
||||
- 🛠 Context addon: New UI for themes, internationalization, & more
|
||||
- 🎛 Presets: One-line configuration for babel, webpack, & addons
|
||||
|
||||
5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.1.0-alpha.*`, `5.1.0-beta.*`, and `5.1.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to ugprade from `5.0` or earlier.
|
||||
5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.1.0-alpha.*`, `5.1.0-beta.*`, and `5.1.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to upgrade from `5.0` or earlier.
|
||||
|
||||
## 5.1.0 (June 5, 2019)
|
||||
|
||||
@ -2055,7 +2172,7 @@ Storybook 5.0 is a completely new UI with the following improvements:
|
||||
- ⌨️ Improved keyboard shortcuts that are user configurable
|
||||
- 🌍 New URL structure that eliminates long strings of query parameters
|
||||
|
||||
5.0 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.0.0-alpha.*`, `5.0.0-beta.*`, and `5.0.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to ugprade from `4.x`.
|
||||
5.0 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.0.0-alpha.*`, `5.0.0-beta.*`, and `5.0.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to upgrade from `4.x`.
|
||||
|
||||
## 5.0.0-rc.11 (March 5, 2019)
|
||||
|
||||
|
||||
16
MIGRATION.md
16
MIGRATION.md
@ -2,6 +2,8 @@
|
||||
|
||||
- [Migration](#migration)
|
||||
- [From version 5.1.x to 5.2.x](#from-version-51x-to-52x)
|
||||
- [Source-loader](#source-loader)
|
||||
- [Default viewports](#default-viewports)
|
||||
- [Grid toolbar-feature](#grid-toolbar-feature)
|
||||
- [Docs mode docgen](#docs-mode-docgen)
|
||||
- [storySort option](#storysort-option)
|
||||
@ -67,9 +69,19 @@
|
||||
|
||||
## From version 5.1.x to 5.2.x
|
||||
|
||||
### default viewports
|
||||
### Source-loader
|
||||
|
||||
The default viewports have been reduced to a smaller set, we think is enough for most usecases.
|
||||
Addon-storysource contains a loader, `@storybook/addon-storysource/loader`, which has been deprecated in 5.2. If you use it, you'll see the warning:
|
||||
|
||||
```
|
||||
@storybook/addon-storysource/loader is deprecated, please use @storybook/source-loader instead.
|
||||
```
|
||||
|
||||
To upgrade to `@storybook/source-loader`, simply `npm install -D @storybook/source-loader` (or use `yarn`), and replace every instance of `@storybook/addon-storysource/loader` with `@storybook/source-loader`.
|
||||
|
||||
### Default viewports
|
||||
|
||||
The default viewports have been reduced to a smaller set, we think is enough for most use cases.
|
||||
You can get the old default back by adding the following to your `config.js`:
|
||||
|
||||
```js
|
||||
|
||||
@ -164,7 +164,7 @@ We have a badge! Link it to your live Storybook example.
|
||||
[](link to site)
|
||||
```
|
||||
|
||||
If you're looking for material to use in your presentation about storybook, like logo's video material and the colors we use etc, you can find all of that at our [press repo](https://github.com/storybookjs/press).
|
||||
If you're looking for material to use in your presentation about storybook, like logo's video material and the colors we use etc, you can find all of that at our [brand repo](https://github.com/storybookjs/brand).
|
||||
|
||||
## Community
|
||||
|
||||
|
||||
@ -45,7 +45,7 @@ storiesOf('button', module)
|
||||
```
|
||||
|
||||
For more customizability. Use the `addParameters` function to configure [aXe options](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure).
|
||||
You can override these options at story level too.
|
||||
You can override these options [at story level too](https://storybook.js.org/docs/configurations/options-parameter/#per-story-options).
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -20,18 +20,24 @@
|
||||
"directory": "addons/a11y"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/api": "5.2.0-rc.5",
|
||||
"@storybook/client-logger": "5.2.0-rc.5",
|
||||
"@storybook/components": "5.2.0-rc.5",
|
||||
"@storybook/core-events": "5.2.0-rc.5",
|
||||
"@storybook/theming": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/api": "5.3.0-alpha.4",
|
||||
"@storybook/client-logger": "5.3.0-alpha.4",
|
||||
"@storybook/components": "5.3.0-alpha.4",
|
||||
"@storybook/core-events": "5.3.0-alpha.4",
|
||||
"@storybook/theming": "5.3.0-alpha.4",
|
||||
"axe-core": "^3.3.2",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -15,18 +15,24 @@
|
||||
"directory": "addons/actions"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/api": "5.2.0-rc.5",
|
||||
"@storybook/client-api": "5.2.0-rc.5",
|
||||
"@storybook/components": "5.2.0-rc.5",
|
||||
"@storybook/core-events": "5.2.0-rc.5",
|
||||
"@storybook/theming": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/api": "5.3.0-alpha.4",
|
||||
"@storybook/client-api": "5.3.0-alpha.4",
|
||||
"@storybook/components": "5.3.0-alpha.4",
|
||||
"@storybook/core-events": "5.3.0-alpha.4",
|
||||
"@storybook/theming": "5.3.0-alpha.4",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^2.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -4,7 +4,7 @@ Storybook Background Addon can be used to change background colors inside the pr
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -19,18 +19,24 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "jbaxleyiii",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/api": "5.2.0-rc.5",
|
||||
"@storybook/client-logger": "5.2.0-rc.5",
|
||||
"@storybook/components": "5.2.0-rc.5",
|
||||
"@storybook/core-events": "5.2.0-rc.5",
|
||||
"@storybook/theming": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/api": "5.3.0-alpha.4",
|
||||
"@storybook/client-logger": "5.3.0-alpha.4",
|
||||
"@storybook/components": "5.3.0-alpha.4",
|
||||
"@storybook/core-events": "5.3.0-alpha.4",
|
||||
"@storybook/theming": "5.3.0-alpha.4",
|
||||
"core-js": "^3.0.1",
|
||||
"memoizerific": "^1.11.3",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
export const ADDON_ID = 'storybook/background';
|
||||
export const PARAM_KEY = 'backgrounds';
|
||||
export const GRID_PARAM_KEY = 'grid';
|
||||
|
||||
export const EVENTS = {
|
||||
UPDATE: `${ADDON_ID}/update`,
|
||||
|
||||
@ -128,7 +128,7 @@ export class BackgroundSelector extends Component<Props> {
|
||||
<Global
|
||||
styles={(theme: Theme) => ({
|
||||
[`#${iframeId}`]: {
|
||||
background:
|
||||
backgroundColor:
|
||||
selectedBackgroundColor === 'transparent'
|
||||
? theme.background.content
|
||||
: selectedBackgroundColor,
|
||||
|
||||
@ -1,15 +1,20 @@
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import React, { FunctionComponent, memo } from 'react';
|
||||
|
||||
import { useAddonState } from '@storybook/api';
|
||||
import { useAddonState, useParameter } from '@storybook/api';
|
||||
import { Global } from '@storybook/theming';
|
||||
import { Icons, IconButton } from '@storybook/components';
|
||||
|
||||
import { ADDON_ID } from '../constants';
|
||||
import { ADDON_ID, GRID_PARAM_KEY } from '../constants';
|
||||
|
||||
export interface BackgroundGridParameters {
|
||||
cellSize: number;
|
||||
}
|
||||
|
||||
const iframeId = 'storybook-preview-iframe';
|
||||
|
||||
export const GridSelector: FunctionComponent = () => {
|
||||
export const GridSelector: FunctionComponent = memo(() => {
|
||||
const [state, setState] = useAddonState<boolean>(`${ADDON_ID}/grid`);
|
||||
const { cellSize } = useParameter<BackgroundGridParameters>(GRID_PARAM_KEY, { cellSize: 20 });
|
||||
|
||||
return (
|
||||
<IconButton
|
||||
@ -23,19 +28,24 @@ export const GridSelector: FunctionComponent = () => {
|
||||
<Global
|
||||
styles={{
|
||||
[`#${iframeId}`]: {
|
||||
backgroundSize: '100px 100px, 100px 100px, 20px 20px, 20px 20px',
|
||||
backgroundSize: [
|
||||
`${cellSize * 5}px ${cellSize * 5}px`,
|
||||
`${cellSize * 5}px ${cellSize * 5}px`,
|
||||
`${cellSize}px ${cellSize}px`,
|
||||
`${cellSize}px ${cellSize}px`,
|
||||
].join(', '),
|
||||
backgroundPosition: '-1px -1px, -1px -1px, -1px -1px, -1px -1px',
|
||||
backgroundBlendMode: 'difference',
|
||||
backgroundImage: [
|
||||
'linear-gradient(rgba(130, 130, 130,0.5) 1px,transparent 1px)',
|
||||
'linear-gradient(90deg,rgb(130, 130, 130,0.5) 1px,transparent 1px)',
|
||||
'linear-gradient(rgba(130, 130, 130, 0.25) 1px,transparent 1px)',
|
||||
'linear-gradient(90deg,rgba(130, 130, 130, 0.25) 1px,transparent 1px)',
|
||||
].join(','),
|
||||
'linear-gradient(rgba(130, 130, 130, 0.5) 1px, transparent 1px)',
|
||||
'linear-gradient(90deg, rgba(130, 130, 130, 0.5) 1px, transparent 1px)',
|
||||
'linear-gradient(rgba(130, 130, 130, 0.25) 1px, transparent 1px)',
|
||||
'linear-gradient(90deg, rgba(130, 130, 130, 0.25) 1px, transparent 1px)',
|
||||
].join(', '),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
</IconButton>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Storybook decorator to center components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -17,13 +17,27 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "Muhammed Thanish <mnmtanish@gmail.com>",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"angular.js",
|
||||
"angular.d.ts",
|
||||
"ember.js",
|
||||
"html.js",
|
||||
"mithril.js",
|
||||
"preact.js",
|
||||
"rax.js",
|
||||
"react.js",
|
||||
"svelte.js",
|
||||
"vue.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"util-deprecate": "^1.0.2"
|
||||
@ -33,13 +47,5 @@
|
||||
"mithril": "*",
|
||||
"preact": "*",
|
||||
"react": "*"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"mithril": "*",
|
||||
"preact": "*",
|
||||
"react": "*"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
/** @jsx m */
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import m, { ComponentTypes } from 'mithril';
|
||||
import { makeDecorator } from '@storybook/addons';
|
||||
import parameters from './parameters';
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
// eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
|
||||
const parameters = {
|
||||
name: 'centered',
|
||||
parameterName: 'centered',
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
/** @jsx h */
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { Component, h } from 'preact';
|
||||
import { makeDecorator } from '@storybook/addons';
|
||||
import parameters from './parameters';
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
/** @jsx createElement */
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { createElement } from 'rax';
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import View from 'rax-view';
|
||||
import { makeDecorator } from '@storybook/addons/src/make-decorator';
|
||||
import { makeDecorator } from '@storybook/addons';
|
||||
import parameters from './parameters';
|
||||
import styles from './styles';
|
||||
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import React, { ReactNode } from 'react';
|
||||
import { makeDecorator, StoryFn } from '@storybook/addons';
|
||||
import parameters from './parameters';
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
// eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
|
||||
const styles = {
|
||||
style: {
|
||||
position: 'fixed',
|
||||
|
||||
@ -1,16 +1,20 @@
|
||||
{
|
||||
"name": "@storybook/addon-contexts",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Storybook Addon Contexts",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
"preact",
|
||||
"react",
|
||||
"storybook",
|
||||
"vue"
|
||||
],
|
||||
"author": "Leo Y. Li",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/contexts"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/register.js",
|
||||
"author": "Leo Y. Li",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"register.js",
|
||||
@ -18,21 +22,19 @@
|
||||
"react.js",
|
||||
"vue.js"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/contexts"
|
||||
},
|
||||
"main": "dist/register.js",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js",
|
||||
"dev:check-types": "tsc --noEmit"
|
||||
"dev:check-types": "tsc --noEmit",
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/api": "5.2.0-rc.5",
|
||||
"@storybook/components": "5.2.0-rc.5",
|
||||
"@storybook/core-events": "5.2.0-rc.5",
|
||||
"core-js": "^3.0.1"
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/api": "5.3.0-alpha.4",
|
||||
"@storybook/components": "5.3.0-alpha.4",
|
||||
"@storybook/core-events": "5.3.0-alpha.4",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"qs": "^6.6.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"global": "*",
|
||||
@ -41,11 +43,6 @@
|
||||
"react": "*",
|
||||
"vue": "*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"preact": "*",
|
||||
"react": "*",
|
||||
"vue": "*"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import { useChannel } from './libs/useChannel';
|
||||
import { useChannel } from '@storybook/api';
|
||||
import { ToolBar } from './components/ToolBar';
|
||||
import { deserialize, serialize } from '../shared/serializers';
|
||||
import { PARAM, REBOOT_MANAGER, UPDATE_MANAGER, UPDATE_PREVIEW } from '../shared/constants';
|
||||
@ -21,11 +21,13 @@ export const ContextsManager: ContextsManager = ({ api }) => {
|
||||
);
|
||||
|
||||
// from preview
|
||||
useChannel(UPDATE_MANAGER, newNodes => setNodes(newNodes || []), []);
|
||||
const emit = useChannel({
|
||||
[UPDATE_MANAGER]: newNodes => setNodes(newNodes || []),
|
||||
});
|
||||
|
||||
// to preview
|
||||
useEffect(() => api.emit(REBOOT_MANAGER), []);
|
||||
useEffect(() => api.emit(UPDATE_PREVIEW, state), [state]);
|
||||
useEffect(() => emit(REBOOT_MANAGER), []);
|
||||
useEffect(() => emit(UPDATE_PREVIEW, state), [state]);
|
||||
useEffect(() => api.setQueryParams({ [PARAM]: serialize(state) }), [state]);
|
||||
|
||||
return <ToolBar nodes={nodes} state={state || {}} setSelected={setSelected} />;
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
import addons from '@storybook/addons';
|
||||
import { useEffect } from 'react';
|
||||
import { AnyFunctionReturns } from '../../shared/types.d';
|
||||
|
||||
/**
|
||||
* The React hook version of Storybook Channel API.
|
||||
*/
|
||||
type UseChannel = (
|
||||
event: string,
|
||||
eventHandler: AnyFunctionReturns<void>,
|
||||
input?: unknown[]
|
||||
) => void;
|
||||
|
||||
export const useChannel: UseChannel = (event, eventHandler, inputs = []) =>
|
||||
useEffect(() => {
|
||||
const channel = addons.getChannel();
|
||||
channel.on(event, eventHandler);
|
||||
return () => channel.removeListener(event, eventHandler);
|
||||
}, inputs);
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-cssresources",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "A storybook addon to switch between css resources at runtime for your story",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -19,16 +19,22 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "nm123github",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/api": "5.2.0-rc.5",
|
||||
"@storybook/components": "5.2.0-rc.5",
|
||||
"@storybook/core-events": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/api": "5.3.0-alpha.4",
|
||||
"@storybook/components": "5.3.0-alpha.4",
|
||||
"@storybook/core-events": "5.3.0-alpha.4",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3"
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
{
|
||||
"name": "@storybook/addon-design-assets",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Design asset preview for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook",
|
||||
"parameter",
|
||||
"design",
|
||||
"assets",
|
||||
"design",
|
||||
"files",
|
||||
"parameter",
|
||||
"storybook",
|
||||
"viewer"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook#readme",
|
||||
@ -21,18 +21,24 @@
|
||||
"directory": "addons/design-assets"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/api": "5.2.0-rc.5",
|
||||
"@storybook/client-logger": "5.2.0-rc.5",
|
||||
"@storybook/components": "5.2.0-rc.5",
|
||||
"@storybook/core-events": "5.2.0-rc.5",
|
||||
"@storybook/theming": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/api": "5.3.0-alpha.4",
|
||||
"@storybook/client-logger": "5.3.0-alpha.4",
|
||||
"@storybook/components": "5.3.0-alpha.4",
|
||||
"@storybook/core-events": "5.3.0-alpha.4",
|
||||
"@storybook/theming": "5.3.0-alpha.4",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -83,8 +83,8 @@ features as well. This chart captures the current state of support
|
||||
| StoriesOf stories | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Source | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Notes / Info | + | + | + | + | + | + | + | + | + | + | + |
|
||||
| Props table | + | + | # | | | | | | | | |
|
||||
| Docgen | + | + | # | | | | | | | | |
|
||||
| Props table | + | # | # | | | | | | | | |
|
||||
| Docgen | + | # | # | | | | | | | | |
|
||||
| Inline stories | + | # | | | | | | | | | |
|
||||
|
||||
**Note:** `#` = WIP support
|
||||
@ -162,7 +162,9 @@ module.exports = async ({ config }) => {
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
// may or may not need this line depending on your app's setup
|
||||
plugins: ['@babel/plugin-transform-react-jsx'],
|
||||
options: {
|
||||
plugins: ['@babel/plugin-transform-react-jsx'],
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: '@mdx-js/loader',
|
||||
@ -209,7 +211,8 @@ Install the preset with care. If you've already configured Typescript manually,
|
||||
|
||||
Want to learn more? Here are some more articles on Storybook Docs:
|
||||
|
||||
- References: [DocsPage](./docs/docspage.md) / [MDX](./docs/mdx.md) / [FAQ](./docs/faq.md) / [Recipes](./docs/recipes.md)
|
||||
- References: [DocsPage](./docs/docspage.md) / [MDX](./docs/mdx.md) / [FAQ](./docs/faq.md) / [Recipes](./docs/recipes.md) / [Theming](./docs/theming.md)
|
||||
- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
|
||||
- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
|
||||
- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
|
||||
- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
|
||||
|
||||
@ -32,7 +32,7 @@ However, `DocsPage` brings the following improvements:
|
||||
|
||||
Storybook uses `component` to extract the component's description and props, and will rely on it further in future releases. We encourage you to add it to existing stories and use it in all new stories.
|
||||
|
||||
Here's how to set the component in [Component Story Format (CSF)]():
|
||||
Here's how to set the component in [Component Story Format (CSF)](https://storybook.js.org/docs/formats/component-story-format/):
|
||||
|
||||
```js
|
||||
import { Badge } from './Badge';
|
||||
@ -241,7 +241,8 @@ The docs preset assumes this naming convention for its `source-loader` setup. If
|
||||
|
||||
Want to learn more? Here are some more articles on Storybook Docs:
|
||||
|
||||
- References: [README](../README.md) / [MDX](./mdx.md) / [FAQ](./faq.md) / [Recipes](recipes.md)
|
||||
- References: [README](../README.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md)
|
||||
- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
|
||||
- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
|
||||
- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
|
||||
- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
|
||||
|
||||
@ -46,7 +46,8 @@ This is just [Component Story Format (CSF)](https://medium.com/storybookjs/compo
|
||||
|
||||
Want to learn more? Here are some more articles on Storybook Docs:
|
||||
|
||||
- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [Recipes](recipes.md)
|
||||
- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [Recipes](recipes.md) / [Theming](theming.md)
|
||||
- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
|
||||
- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
|
||||
- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
|
||||
- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
|
||||
|
||||
@ -198,7 +198,8 @@ Be sure to update your Storybook config file to load `.stories.mdx` stories, as
|
||||
|
||||
`MDX` is an experimental feature and there's a lot more that hasn't been documented yet. Here are some more articles on Storybook Docs that contain more information:
|
||||
|
||||
- References: [README](../README.md) / [DocsPage](docspage.md) / [FAQ](faq.md) / [Recipes](recipes.md)
|
||||
- References: [README](../README.md) / [DocsPage](docspage.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md)
|
||||
- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
|
||||
- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
|
||||
- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
|
||||
- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
|
||||
|
||||
@ -19,7 +19,7 @@ If you want to intersperse longform documentation in your Storybook, for example
|
||||
|
||||
## Pure MDX Stories
|
||||
|
||||
[MDX](mdx.md) is an alternative to syntax to CSF that allows you co-locate your stories and your documentation. Everything you can do in CSF, you can do in MDX. And if you're consuming it in [Webpack](https://webpack.js.org/), it exposes an _identical_ interface, so the two files are interchangeable. Some teams will choose to write all of their Storybook in MDX and never look back.
|
||||
[MDX](mdx.md) is an alternative syntax to CSF that allows you to co-locate your stories and your documentation. Everything you can do in CSF, you can do in MDX. And if you're consuming it in [Webpack](https://webpack.js.org/), it exposes an _identical_ interface, so the two files are interchangeable. Some teams will choose to write all of their Storybook in MDX and never look back.
|
||||
|
||||
## Mixed CSF / MDX Stories
|
||||
|
||||
@ -132,7 +132,8 @@ yarn build-storybook --docs
|
||||
|
||||
Want to learn more? Here are some more articles on Storybook Docs:
|
||||
|
||||
- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md)
|
||||
- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Theming](theming.md)
|
||||
- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
|
||||
- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
|
||||
- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
|
||||
- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
|
||||
|
||||
71
addons/docs/docs/theming.md
Normal file
71
addons/docs/docs/theming.md
Normal file
@ -0,0 +1,71 @@
|
||||
# Storybook Docs Theming
|
||||
|
||||
[Storybook Docs](../README.md) is themable! There are three different levels of theming, just to keep things interesting:
|
||||
|
||||
- [Storybook theming](#storybook-theming)
|
||||
- [CSS escape hatches](#css-escape-hatches)
|
||||
- [MDX component overrides](#mdx-component-overrides)
|
||||
|
||||
## Storybook theming
|
||||
|
||||
Storybook theming is the **recommended way** to theme your docs. If you update your storybook theme according to [the documentation](https://storybook.js.org/docs/configurations/theming/), Storybook Docs should adapt in reasonable ways.
|
||||
|
||||
For example, here's how to change your docs (and Storybook) to the dark theme, by modifying `.storybook/config.js`:
|
||||
|
||||
```js
|
||||
import { addParameters } from '@storybook/react';
|
||||
import { themes } from '@storybook/theming';
|
||||
|
||||
addParameters({
|
||||
options: {
|
||||
theme: themes.dark,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## CSS escape hatches
|
||||
|
||||
The Storybook theme API is narrow by design. If you want to have fine-grained control over the CSS, all of the Docs components are tagged with class names to make this possible. This is advanced usage: use at your own risk.
|
||||
|
||||
The classes correspond to markdown elements (e.g. `sbdocs-h1`, `sbdocs-p`, etc.) to UI elements on the page (e.g. `sbdocs-container`, `sbdocs-content`, etc.). To see the currently available classes, simply "inspect element" in your browser.
|
||||
|
||||
You can style these classes in `.storybook/preview-head.html`. For example, here's how to make the content wider for UHD displays:
|
||||
|
||||
```html
|
||||
<style>
|
||||
.sbdocs.sbdocs-content {
|
||||
max-width: 1440px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
> NOTE: All of these elements also have the `sbdocs` class, which is simply an idiomatic way of increasing the CSS specificity so you don't have to use `!important`.
|
||||
|
||||
## MDX component overrides
|
||||
|
||||
If you're using MDX, there's one more level of themability. MDX allows you to [completely override the components](https://mdxjs.com/advanced/components) that are rendered from markdown using a `components` parameter. This is an advanced usage that we don't officially support in Storybook, but it's a powerful mechanism if you need it.
|
||||
|
||||
Here's how you might insert a custom code renderer for `code` blocks on the page, in `.storybook/config.js`:
|
||||
|
||||
```js
|
||||
import { addParameters } from '@storybook/react';
|
||||
import { CodeBlock } from './CodeBlock';
|
||||
|
||||
addParameters({
|
||||
docs: {
|
||||
components: {
|
||||
code: CodeBlock,
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## More resources
|
||||
|
||||
Want to learn more? Here are some more articles on Storybook Docs:
|
||||
|
||||
- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md)
|
||||
- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
|
||||
- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
|
||||
- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
|
||||
- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Superior documentation for your components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -17,6 +17,19 @@
|
||||
"directory": "addons/docs"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"angular/**/*",
|
||||
"common/**/*",
|
||||
"html/**/*",
|
||||
"react/**/*",
|
||||
"vue/**/*",
|
||||
"README.md",
|
||||
"blocks.js",
|
||||
"mdx-compiler-plugin.js",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/public_api.js",
|
||||
"types": "dist/public_api.d.ts",
|
||||
"scripts": {
|
||||
@ -29,12 +42,12 @@
|
||||
"@mdx-js/loader": "^1.1.0",
|
||||
"@mdx-js/mdx": "^1.1.0",
|
||||
"@mdx-js/react": "^1.0.27",
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/api": "5.2.0-rc.5",
|
||||
"@storybook/components": "5.2.0-rc.5",
|
||||
"@storybook/router": "5.2.0-rc.5",
|
||||
"@storybook/source-loader": "5.2.0-rc.5",
|
||||
"@storybook/theming": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/api": "5.3.0-alpha.4",
|
||||
"@storybook/components": "5.3.0-alpha.4",
|
||||
"@storybook/router": "5.3.0-alpha.4",
|
||||
"@storybook/source-loader": "5.3.0-alpha.4",
|
||||
"@storybook/theming": "5.3.0-alpha.4",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"js-string-escape": "^1.0.1",
|
||||
@ -44,7 +57,7 @@
|
||||
"devDependencies": {
|
||||
"@types/prop-types": "^15.5.9",
|
||||
"@types/util-deprecate": "^1.0.0",
|
||||
"@types/webpack-env": "^1.13.7"
|
||||
"@types/webpack-env": "^1.14.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-loader": "^8.0.0",
|
||||
|
||||
11
addons/docs/src/blocks/Anchor.tsx
Normal file
11
addons/docs/src/blocks/Anchor.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
export const anchorBlockIdFromId = (storyId: string) => `anchor--${storyId}`;
|
||||
|
||||
export interface AnchorProps {
|
||||
storyId: string;
|
||||
}
|
||||
|
||||
export const Anchor: React.FC<AnchorProps> = ({ storyId, children }) => (
|
||||
<div id={anchorBlockIdFromId(storyId)}>{children}</div>
|
||||
);
|
||||
@ -1,11 +1,12 @@
|
||||
/* eslint-disable react/destructuring-assignment */
|
||||
|
||||
import React from 'react';
|
||||
import { document } from 'global';
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
|
||||
import { DocsWrapper, DocsContent, Source } from '@storybook/components';
|
||||
import { components as htmlComponents, Code } from '@storybook/components/html';
|
||||
import { DocsContextProps, DocsContext } from './DocsContext';
|
||||
import { anchorBlockIdFromId } from './Anchor';
|
||||
import { storyBlockIdFromId } from './Story';
|
||||
|
||||
interface DocsContainerProps {
|
||||
context: DocsContextProps;
|
||||
@ -44,17 +45,31 @@ export const DocsContainer: React.FunctionComponent<DocsContainerProps> = ({
|
||||
context,
|
||||
children,
|
||||
}) => {
|
||||
const parameters = (context && context.parameters) || {};
|
||||
const { id: storyId = null, parameters = {} } = context || {};
|
||||
const options = parameters.options || {};
|
||||
const theme = ensureTheme(options.theme);
|
||||
const { components: userComponents = null } = parameters.docs || {};
|
||||
const components = { ...defaultComponents, ...userComponents };
|
||||
|
||||
React.useEffect(() => {
|
||||
let element = document.getElementById(anchorBlockIdFromId(storyId));
|
||||
if (!element) {
|
||||
element = document.getElementById(storyBlockIdFromId(storyId));
|
||||
}
|
||||
if (element) {
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'end',
|
||||
inline: 'nearest',
|
||||
});
|
||||
}
|
||||
}, [storyId]);
|
||||
return (
|
||||
<DocsContext.Provider value={context}>
|
||||
<ThemeProvider theme={theme}>
|
||||
<MDXProvider components={components}>
|
||||
<DocsWrapper>
|
||||
<DocsContent>{children}</DocsContent>
|
||||
<DocsWrapper className="sbdocs sbdocs-wrapper">
|
||||
<DocsContent className="sbdocs sbdocs-content">{children}</DocsContent>
|
||||
</DocsWrapper>
|
||||
</MDXProvider>
|
||||
</ThemeProvider>
|
||||
|
||||
@ -7,6 +7,7 @@ import { DocsContext } from './DocsContext';
|
||||
import { Description, getDocgen } from './Description';
|
||||
import { Story } from './Story';
|
||||
import { Preview } from './Preview';
|
||||
import { Anchor } from './Anchor';
|
||||
import { getPropsTableProps } from './Props';
|
||||
|
||||
export interface SlotContext {
|
||||
@ -34,7 +35,6 @@ export interface DocsPageProps {
|
||||
interface DocsStoryProps {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
expanded?: boolean;
|
||||
withToolbar?: boolean;
|
||||
parameters?: any;
|
||||
@ -82,18 +82,19 @@ const StoryHeading = H3;
|
||||
const DocsStory: React.FunctionComponent<DocsStoryProps> = ({
|
||||
id,
|
||||
name,
|
||||
description,
|
||||
expanded = true,
|
||||
withToolbar = false,
|
||||
parameters,
|
||||
}) => (
|
||||
<>
|
||||
<Anchor storyId={id}>
|
||||
{expanded && <StoryHeading>{(parameters && parameters.displayName) || name}</StoryHeading>}
|
||||
{expanded && description && <Description markdown={description} />}
|
||||
{expanded && parameters && parameters.docs && parameters.docs.storyDescription && (
|
||||
<Description markdown={parameters.docs.storyDescription} />
|
||||
)}
|
||||
<Preview withToolbar={withToolbar}>
|
||||
<Story id={id} />
|
||||
</Preview>
|
||||
</>
|
||||
</Anchor>
|
||||
);
|
||||
|
||||
export const DocsPage: React.FunctionComponent<DocsPageProps> = ({
|
||||
|
||||
@ -6,6 +6,8 @@ import { CURRENT_SELECTION } from './shared';
|
||||
|
||||
import { DocsContext, DocsContextProps } from './DocsContext';
|
||||
|
||||
export const storyBlockIdFromId = (storyId: string) => `story--${storyId}`;
|
||||
|
||||
const resetComponents: Record<string, React.ElementType> = {};
|
||||
Object.keys(docsComponents).forEach(key => {
|
||||
resetComponents[key] = (props: any) => React.createElement(key, props);
|
||||
@ -66,7 +68,7 @@ const StoryContainer: React.FunctionComponent<StoryProps> = props => (
|
||||
{context => {
|
||||
const storyProps = getStoryProps(props, context);
|
||||
return (
|
||||
<div className="foobar">
|
||||
<div id={storyBlockIdFromId(storyProps.id)}>
|
||||
<MDXProvider components={resetComponents}>
|
||||
<Story {...storyProps} />
|
||||
</MDXProvider>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
export { ColorPalette, ColorItem, IconGallery, IconItem, Typeset } from '@storybook/components';
|
||||
|
||||
export * from './Anchor';
|
||||
export * from './Description';
|
||||
export * from './DocsContext';
|
||||
export * from './DocsPage';
|
||||
|
||||
1
addons/docs/src/typings.d.ts
vendored
1
addons/docs/src/typings.d.ts
vendored
@ -1,2 +1,3 @@
|
||||
declare module '@mdx-js/react';
|
||||
declare module '@storybook/addon-docs/mdx-compiler-plugin';
|
||||
declare module 'global';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,17 +18,23 @@
|
||||
"directory": "addons/events"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/api": "5.2.0-rc.5",
|
||||
"@storybook/client-api": "5.2.0-rc.5",
|
||||
"@storybook/core-events": "5.2.0-rc.5",
|
||||
"@storybook/theming": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/api": "5.3.0-alpha.4",
|
||||
"@storybook/client-api": "5.3.0-alpha.4",
|
||||
"@storybook/core-events": "5.3.0-alpha.4",
|
||||
"@storybook/theming": "5.3.0-alpha.4",
|
||||
"core-js": "^3.0.1",
|
||||
"format-json": "^1.0.3",
|
||||
"lodash": "^4.17.11",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-google-analytics",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Storybook addon for google analytics",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,8 +20,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/core-events": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/core-events": "5.3.0-alpha.4",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react-ga": "^2.5.7"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -16,17 +16,23 @@
|
||||
"directory": "addons/graphql"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/api": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/api": "5.3.0-alpha.4",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"graphiql": "^0.13.0",
|
||||
"graphiql": "^0.14.2",
|
||||
"graphql": "^14.2.1",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "A Storybook addon to show additional information for your stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -16,16 +16,21 @@
|
||||
"directory": "addons/info"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"jsnext:main": "src/index.js",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/client-logger": "5.2.0-rc.5",
|
||||
"@storybook/components": "5.2.0-rc.5",
|
||||
"@storybook/theming": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/client-logger": "5.3.0-alpha.4",
|
||||
"@storybook/components": "5.3.0-alpha.4",
|
||||
"@storybook/theming": "5.3.0-alpha.4",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"jsx-to-string": "^1.4.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,17 +22,23 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "Renaud Tertrais <renaud.tertrais@gmail.com> (https://github.com/renaudtertrais)",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/api": "5.2.0-rc.5",
|
||||
"@storybook/components": "5.2.0-rc.5",
|
||||
"@storybook/core-events": "5.2.0-rc.5",
|
||||
"@storybook/theming": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/api": "5.3.0-alpha.4",
|
||||
"@storybook/components": "5.3.0-alpha.4",
|
||||
"@storybook/core-events": "5.3.0-alpha.4",
|
||||
"@storybook/theming": "5.3.0-alpha.4",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.3",
|
||||
|
||||
@ -1 +0,0 @@
|
||||
.babelrc
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -16,18 +16,32 @@
|
||||
"directory": "addons/knobs"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"angular.js",
|
||||
"html.js",
|
||||
"marko.js",
|
||||
"mithril.js",
|
||||
"polymer.js",
|
||||
"react.js",
|
||||
"vue.js",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/api": "5.2.0-rc.5",
|
||||
"@storybook/client-api": "5.2.0-rc.5",
|
||||
"@storybook/components": "5.2.0-rc.5",
|
||||
"@storybook/core-events": "5.2.0-rc.5",
|
||||
"@storybook/theming": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/api": "5.3.0-alpha.4",
|
||||
"@storybook/client-api": "5.3.0-alpha.4",
|
||||
"@storybook/components": "5.3.0-alpha.4",
|
||||
"@storybook/core-events": "5.3.0-alpha.4",
|
||||
"@storybook/theming": "5.3.0-alpha.4",
|
||||
"@types/react-color": "^3.0.1",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"core-js": "^3.0.1",
|
||||
"escape-html": "^1.0.3",
|
||||
@ -40,16 +54,15 @@
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
"react-select": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/escape-html": "0.0.20",
|
||||
"@types/react-lifecycles-compat": "^3.0.1",
|
||||
"@types/react-select": "^3.0.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/escape-html": "0.0.20",
|
||||
"@types/react-color": "^3.0.1",
|
||||
"@types/react-lifecycles-compat": "^3.0.1",
|
||||
"@types/react-select": "^2.0.19"
|
||||
}
|
||||
}
|
||||
|
||||
@ -106,7 +106,7 @@ expectKnobOfType<string>(
|
||||
},
|
||||
'none'
|
||||
),
|
||||
select('select with string array', ['yes', 'no'], 'yes'),
|
||||
select<string>('select with string array', ['yes', 'no'], 'yes'),
|
||||
select('select with string literal array', stringLiteralArray, stringLiteralArray[0]),
|
||||
select('select with readonly array', ['red', 'blue'] as const, 'red'),
|
||||
select<ButtonVariant>('select with string enum options', ButtonVariant, ButtonVariant.primary)
|
||||
@ -123,7 +123,7 @@ expectKnobOfType<number>(
|
||||
{ 'type a': SomeEnum.Type1, 'type b': SomeEnum.Type2 },
|
||||
SomeEnum.Type2
|
||||
),
|
||||
select('select with number array', [1, 2, 3, 4], 1),
|
||||
select<number>('select with number array', [1, 2, 3, 4], 1),
|
||||
select('select with readonly number array', [1, 2] as const, 1)
|
||||
);
|
||||
|
||||
@ -131,6 +131,60 @@ expectKnobOfType<number | null>(
|
||||
select('select with null option', { a: 1, b: null }, null, groupId)
|
||||
);
|
||||
|
||||
expectKnobOfType<string | string[]>(
|
||||
select(
|
||||
'select with string and string array options',
|
||||
{
|
||||
Red: 'red',
|
||||
Blue: 'blue',
|
||||
Yellow: 'yellow',
|
||||
Rainbow: ['red', 'orange', 'etc'],
|
||||
None: 'transparent',
|
||||
},
|
||||
'red'
|
||||
)
|
||||
);
|
||||
|
||||
expectKnobOfType<number | number[]>(
|
||||
select(
|
||||
'select with number and number array options',
|
||||
{
|
||||
Red: 1,
|
||||
Blue: 2,
|
||||
Yellow: 3,
|
||||
Rainbow: [4, 5, 6],
|
||||
None: 7,
|
||||
},
|
||||
7
|
||||
)
|
||||
);
|
||||
|
||||
expectKnobOfType<string | string[] | null>(
|
||||
select(
|
||||
'select with string, string array, and null options',
|
||||
{
|
||||
Red: 'red',
|
||||
Blue: 'blue',
|
||||
Yellow: 'yellow',
|
||||
Rainbow: ['red', 'orange', 'etc'],
|
||||
None: null,
|
||||
},
|
||||
null
|
||||
)
|
||||
);
|
||||
|
||||
expectKnobOfType<number[]>(
|
||||
select(
|
||||
'select with number array options',
|
||||
{
|
||||
ones: [1],
|
||||
twos: [2, 2],
|
||||
threes: [3, 3, 3],
|
||||
},
|
||||
[1]
|
||||
)
|
||||
);
|
||||
|
||||
/** Object knob */
|
||||
|
||||
expectKnobOfType(
|
||||
@ -163,6 +217,68 @@ expectKnobOfType(
|
||||
options('options with group', {}, '', { display: 'check' })
|
||||
);
|
||||
|
||||
expectKnobOfType<number | null>(
|
||||
options('select with null option', { a: 1, b: null }, null, { display: 'check' })
|
||||
);
|
||||
|
||||
expectKnobOfType<string | string[]>(
|
||||
options(
|
||||
'options with string and string array options',
|
||||
{
|
||||
Red: 'red',
|
||||
Blue: 'blue',
|
||||
Yellow: 'yellow',
|
||||
Rainbow: ['red', 'orange', 'etc'],
|
||||
None: 'transparent',
|
||||
},
|
||||
'red',
|
||||
{ display: 'check' }
|
||||
)
|
||||
);
|
||||
|
||||
expectKnobOfType<number | number[]>(
|
||||
options(
|
||||
'select with number and number array options',
|
||||
{
|
||||
Red: 1,
|
||||
Blue: 2,
|
||||
Yellow: 3,
|
||||
Rainbow: [4, 5, 6],
|
||||
None: 7,
|
||||
},
|
||||
7,
|
||||
{ display: 'check' }
|
||||
)
|
||||
);
|
||||
|
||||
expectKnobOfType<string | string[] | null>(
|
||||
options(
|
||||
'select with string, string array, and null options',
|
||||
{
|
||||
Red: 'red',
|
||||
Blue: 'blue',
|
||||
Yellow: 'yellow',
|
||||
Rainbow: ['red', 'orange', 'etc'],
|
||||
None: null,
|
||||
},
|
||||
null,
|
||||
{ display: 'check' }
|
||||
)
|
||||
);
|
||||
|
||||
expectKnobOfType<number[]>(
|
||||
options(
|
||||
'select with number array options',
|
||||
{
|
||||
ones: [1],
|
||||
twos: [2, 2],
|
||||
threes: [3, 3, 3],
|
||||
},
|
||||
[1],
|
||||
{ display: 'check' }
|
||||
)
|
||||
);
|
||||
|
||||
/** Array knob */
|
||||
|
||||
const arrayReadonly = array('array as readonly', ['hi', 'there'] as const);
|
||||
|
||||
@ -228,6 +228,7 @@ export default class KnobPanel extends PureComponent<KnobPanelProps> {
|
||||
render: ({ active }) => (
|
||||
<TabWrapper key={knobKeyGroupId} active={active}>
|
||||
<PropForm
|
||||
// eslint-disable-next-line no-use-before-define
|
||||
knobs={knobsArray.filter(
|
||||
knob => (knob.groupId || DEFAULT_GROUP_ID) === knobKeyGroupId
|
||||
)}
|
||||
|
||||
@ -62,7 +62,7 @@ export default class ArrayType extends Component<ArrayTypeProps> {
|
||||
|
||||
render() {
|
||||
const { knob } = this.props;
|
||||
const value = knob.value.join(knob.separator);
|
||||
const value = knob.value && knob.value.join(knob.separator);
|
||||
|
||||
return (
|
||||
<Form.Textarea
|
||||
|
||||
@ -9,7 +9,14 @@ import CheckboxesType from './Checkboxes';
|
||||
|
||||
// TODO: Apply the Storybook theme to react-select
|
||||
|
||||
export type OptionsTypeKnobSingleValue = string | number | null | undefined;
|
||||
export type OptionsTypeKnobSingleValue =
|
||||
| string
|
||||
| number
|
||||
| null
|
||||
| undefined
|
||||
| string[]
|
||||
| number[]
|
||||
| (string | number)[];
|
||||
|
||||
export type OptionsTypeKnobValue<
|
||||
T extends OptionsTypeKnobSingleValue = OptionsTypeKnobSingleValue
|
||||
@ -24,7 +31,7 @@ export type OptionsKnobOptionsDisplay =
|
||||
| 'multi-select';
|
||||
|
||||
export interface OptionsKnobOptions {
|
||||
display?: OptionsKnobOptionsDisplay;
|
||||
display: OptionsKnobOptionsDisplay;
|
||||
}
|
||||
|
||||
export interface OptionsTypeKnob<T extends OptionsTypeKnobValue> extends KnobControlConfig<T> {
|
||||
|
||||
@ -4,13 +4,13 @@ import PropTypes from 'prop-types';
|
||||
import { Form } from '@storybook/components';
|
||||
import { KnobControlConfig, KnobControlProps } from './types';
|
||||
|
||||
export type SelectTypeKnobValue = string | number | null | undefined;
|
||||
export type SelectTypeKnobValue = string | number | null | undefined | PropertyKey[];
|
||||
|
||||
export type SelectTypeOptionsProp<T extends SelectTypeKnobValue = SelectTypeKnobValue> =
|
||||
| Record<string | number, T>
|
||||
| Record<Exclude<T, null | undefined>, T[keyof T]>
|
||||
| Exclude<T, null | undefined>[]
|
||||
| readonly Exclude<T, null | undefined>[];
|
||||
| Record<PropertyKey, T>
|
||||
| Record<Extract<T, PropertyKey>, T[keyof T]>
|
||||
| Extract<T, PropertyKey>[]
|
||||
| readonly Extract<T, PropertyKey>[];
|
||||
|
||||
export interface SelectTypeKnob<T extends SelectTypeKnobValue = SelectTypeKnobValue>
|
||||
extends KnobControlConfig<T> {
|
||||
@ -31,8 +31,8 @@ const SelectType: FunctionComponent<SelectTypeProps> & {
|
||||
} = ({ knob, onChange }) => {
|
||||
const { options } = knob;
|
||||
const entries = Array.isArray(options)
|
||||
? options.reduce<Record<string, SelectTypeKnobValue>>((acc, k) => ({ ...acc, [k]: k }), {})
|
||||
: (options as Record<string, SelectTypeKnobValue>);
|
||||
? options.reduce<Record<PropertyKey, SelectTypeKnobValue>>((acc, k) => ({ ...acc, [k]: k }), {})
|
||||
: (options as Record<PropertyKey, SelectTypeKnobValue>);
|
||||
|
||||
const selectedKey = Object.keys(entries).find(k => {
|
||||
if (Array.isArray(knob.value)) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -16,15 +16,22 @@
|
||||
"directory": "addons/links"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"react.js",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/core-events": "5.2.0-rc.5",
|
||||
"@storybook/router": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/core-events": "5.3.0-alpha.4",
|
||||
"@storybook/router": "5.3.0-alpha.4",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-notes",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -17,19 +17,26 @@
|
||||
"directory": "addons/notes"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js",
|
||||
"register-panel.js"
|
||||
],
|
||||
"main": "dist/public_api.js",
|
||||
"types": "dist/public_api.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/api": "5.2.0-rc.5",
|
||||
"@storybook/client-logger": "5.2.0-rc.5",
|
||||
"@storybook/components": "5.2.0-rc.5",
|
||||
"@storybook/core-events": "5.2.0-rc.5",
|
||||
"@storybook/router": "5.2.0-rc.5",
|
||||
"@storybook/theming": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/api": "5.3.0-alpha.4",
|
||||
"@storybook/client-logger": "5.3.0-alpha.4",
|
||||
"@storybook/components": "5.3.0-alpha.4",
|
||||
"@storybook/core-events": "5.3.0-alpha.4",
|
||||
"@storybook/router": "5.3.0-alpha.4",
|
||||
"@storybook/theming": "5.3.0-alpha.4",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"markdown-to-jsx": "^6.10.3",
|
||||
@ -40,7 +47,7 @@
|
||||
"devDependencies": {
|
||||
"@types/prop-types": "^15.5.9",
|
||||
"@types/util-deprecate": "^1.0.0",
|
||||
"@types/webpack-env": "^1.13.7"
|
||||
"@types/webpack-env": "^1.14.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-actions",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Action Logger addon for react-native storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -14,18 +14,24 @@
|
||||
"url": "https://github.com/storybookjs/storybook.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/core-events": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/core-events": "5.3.0-alpha.4",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^2.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "5.2.0-rc.5"
|
||||
"@storybook/addon-actions": "5.3.0-alpha.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-actions": "*",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-backgrounds",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "A react-native storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,13 +18,18 @@
|
||||
"directory": "addons/ondevice-backgrounds"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"jsnext:main": "src/index.js",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"core-js": "^3.0.1",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-knobs",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Display storybook story knobs on your deviced.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -15,14 +15,19 @@
|
||||
"directory": "addons/ondevice-knobs"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"jsnext:main": "src/index.js",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/core-events": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/core-events": "5.3.0-alpha.4",
|
||||
"core-js": "^3.0.1",
|
||||
"deep-equal": "^1.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-notes",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Write notes for your react-native Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"notes",
|
||||
"storybook",
|
||||
"react-native"
|
||||
"react-native",
|
||||
"storybook"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -14,14 +14,19 @@
|
||||
"directory": "addons/ondevice-notes"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"jsnext:main": "src/index.js",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/client-logger": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/client-logger": "5.3.0-alpha.4",
|
||||
"core-js": "^3.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-native-simple-markdown": "^1.1.0"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-options",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Options addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -16,13 +16,19 @@
|
||||
"directory": "addons/options"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/public_api.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"core-js": "^3.0.1",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
{
|
||||
"name": "@storybook/addon-queryparams",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "parameter addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook",
|
||||
"query"
|
||||
"query",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook#readme",
|
||||
"bugs": {
|
||||
@ -17,18 +17,23 @@
|
||||
"directory": "addons/addon-queryparams"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/api": "5.2.0-rc.5",
|
||||
"@storybook/client-logger": "5.2.0-rc.5",
|
||||
"@storybook/components": "5.2.0-rc.5",
|
||||
"@storybook/core-events": "5.2.0-rc.5",
|
||||
"@storybook/theming": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/api": "5.3.0-alpha.4",
|
||||
"@storybook/client-logger": "5.3.0-alpha.4",
|
||||
"@storybook/components": "5.3.0-alpha.4",
|
||||
"@storybook/core-events": "5.3.0-alpha.4",
|
||||
"@storybook/theming": "5.3.0-alpha.4",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1 +0,0 @@
|
||||
.babelrc
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -16,8 +16,12 @@
|
||||
"directory": "addons/storyshots/storyshots-core"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"jsnext:main": "src/index.js",
|
||||
"scripts": {
|
||||
"build-storybook": "build-storybook",
|
||||
"example": "jest storyshot.test",
|
||||
@ -25,7 +29,7 @@
|
||||
"storybook": "start-storybook -p 6006"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"core-js": "^3.0.1",
|
||||
"glob": "^7.1.3",
|
||||
"global": "^4.3.2",
|
||||
@ -35,7 +39,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"enzyme-to-json": "^3.3.5",
|
||||
"jest-emotion": "^10.0.10",
|
||||
"jest-emotion": "^10.0.17",
|
||||
"react": "^16.8.3"
|
||||
},
|
||||
"publishConfig": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Image snapshots addition to StoryShots based on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -16,25 +16,29 @@
|
||||
"directory": "addons/storyshots/storyshots-puppeteer"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"jsnext:main": "src/index.js",
|
||||
"scripts": {
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/node-logger": "5.2.0-rc.5",
|
||||
"@storybook/router": "5.2.0-rc.5",
|
||||
"@storybook/node-logger": "5.3.0-alpha.4",
|
||||
"@storybook/router": "5.3.0-alpha.4",
|
||||
"core-js": "^3.0.1",
|
||||
"jest-image-snapshot": "^2.8.2",
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"puppeteer": "^1.12.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "5.2.0-beta.13",
|
||||
"puppeteer": "^1.12.2"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"puppeteer": "^1.12.2"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ This addon is used to show stories source in the addon panel.
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 343 KiB After Width: | Height: | Size: 343 KiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Stories addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -16,17 +16,23 @@
|
||||
"directory": "addons/storysource"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"loader.js",
|
||||
"register.js"
|
||||
],
|
||||
"main": "dist/index.js",
|
||||
"jsnext:main": "src/index.js",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/components": "5.2.0-rc.5",
|
||||
"@storybook/router": "5.2.0-rc.5",
|
||||
"@storybook/source-loader": "5.2.0-rc.5",
|
||||
"@storybook/theming": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/components": "5.3.0-alpha.4",
|
||||
"@storybook/router": "5.3.0-alpha.4",
|
||||
"@storybook/source-loader": "5.3.0-alpha.4",
|
||||
"@storybook/theming": "5.3.0-alpha.4",
|
||||
"core-js": "^3.0.1",
|
||||
"estraverse": "^4.2.0",
|
||||
"loader-utils": "^1.2.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Storybook addon to change the viewport size to mobile",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -16,30 +16,37 @@
|
||||
"directory": "addons/viewport"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"preview.js",
|
||||
"register.js"
|
||||
],
|
||||
"main": "preview.js",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/api": "5.2.0-rc.5",
|
||||
"@storybook/client-logger": "5.2.0-rc.5",
|
||||
"@storybook/components": "5.2.0-rc.5",
|
||||
"@storybook/core-events": "5.2.0-rc.5",
|
||||
"@storybook/theming": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/api": "5.3.0-alpha.4",
|
||||
"@storybook/client-logger": "5.3.0-alpha.4",
|
||||
"@storybook/components": "5.3.0-alpha.4",
|
||||
"@storybook/core-events": "5.3.0-alpha.4",
|
||||
"@storybook/theming": "5.3.0-alpha.4",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"memoizerific": "^1.11.3",
|
||||
"prop-types": "^15.7.2",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/util-deprecate": "^1.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/util-deprecate": "^1.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,6 +20,7 @@ interface ViewportItem {
|
||||
}
|
||||
|
||||
const toList = memoize(50)((items: ViewportMap): ViewportItem[] => [
|
||||
// eslint-disable-next-line no-use-before-define
|
||||
...baseViewports,
|
||||
...Object.entries(items).map(([id, { name, ...rest }]) => ({ ...rest, id, title: name })),
|
||||
]);
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
docs
|
||||
.babelrc
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -15,6 +15,14 @@
|
||||
"directory": "app/angular"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"bin/**/*",
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"standalone.js",
|
||||
"demo.js",
|
||||
"demo.d.ts"
|
||||
],
|
||||
"main": "dist/client/index.js",
|
||||
"types": "dist/client/index.d.ts",
|
||||
"bin": {
|
||||
@ -26,21 +34,22 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/core": "5.2.0-rc.5",
|
||||
"@storybook/node-logger": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/core": "5.3.0-alpha.4",
|
||||
"@storybook/node-logger": "5.3.0-alpha.4",
|
||||
"angular2-template-loader": "^0.6.2",
|
||||
"core-js": "^3.0.1",
|
||||
"fork-ts-checker-webpack-plugin": "^1.3.4",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.12.1",
|
||||
"sass-loader": "^7.1.0",
|
||||
"strip-json-comments": "^3.0.1",
|
||||
"ts-loader": "^6.0.1",
|
||||
"tsconfig-paths-webpack-plugin": "^3.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/autoprefixer": "^9.4.0",
|
||||
"@types/webpack-env": "^1.13.9",
|
||||
"@types/webpack-env": "^1.14.0",
|
||||
"webpack": "^4.33.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
@ -56,7 +65,7 @@
|
||||
"babel-loader": "^7.0.0 || ^8.0.0",
|
||||
"rxjs": "^6.0.0",
|
||||
"typescript": "^3.4.0",
|
||||
"webpack": "^4.32.2",
|
||||
"webpack": "^4.32.0",
|
||||
"zone.js": "^0.8.29 || ^0.9.0"
|
||||
},
|
||||
"engines": {
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
import stripJsonComments from 'strip-json-comments';
|
||||
import { Path } from '@angular-devkit/core';
|
||||
import { getAngularCliWebpackConfigOptions } from '../angular-cli_config';
|
||||
|
||||
// @ts-ignore
|
||||
import angularJson from './angular.json';
|
||||
|
||||
// eslint-disable-next-line global-require
|
||||
jest.mock('fs', () => require('../../../../../__mocks__/fs'));
|
||||
jest.mock('path', () => ({
|
||||
@ -14,15 +12,19 @@ jest.mock('path', () => ({
|
||||
resolve: (...args) => 'tsconfig.json',
|
||||
}));
|
||||
|
||||
const angularJson = jest
|
||||
.requireActual('fs')
|
||||
.readFileSync(jest.requireActual('path').resolve(__dirname, 'angular.json'), 'utf8');
|
||||
|
||||
const setupFiles = (files: any) => {
|
||||
// eslint-disable-next-line no-underscore-dangle, global-require
|
||||
require('fs').__setMockFiles(files);
|
||||
};
|
||||
|
||||
describe('angualr-cli_config', () => {
|
||||
describe('angular-cli_config', () => {
|
||||
describe('getAngularCliWebpackConfigOptions()', () => {
|
||||
it('should return have empty `buildOptions.sourceMap` and `buildOptions.optimization` by default', () => {
|
||||
setupFiles({ 'angular.json': JSON.stringify(angularJson) });
|
||||
setupFiles({ 'angular.json': angularJson });
|
||||
|
||||
const config = getAngularCliWebpackConfigOptions('/' as Path);
|
||||
|
||||
@ -36,7 +38,7 @@ describe('angualr-cli_config', () => {
|
||||
|
||||
it('should use `storybook` project by default when project is defined', () => {
|
||||
// Lazy clone example angular json
|
||||
const overrideAngularJson = JSON.parse(JSON.stringify(angularJson));
|
||||
const overrideAngularJson = JSON.parse(stripJsonComments(angularJson));
|
||||
// Add storybook project
|
||||
overrideAngularJson.projects.storybook = {
|
||||
architect: {
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
{
|
||||
/* angular.json can have comments */
|
||||
// angular.json can have comments
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
|
||||
@ -4,6 +4,7 @@ import path from 'path';
|
||||
import fs from 'fs';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
|
||||
import stripJsonComments from 'strip-json-comments';
|
||||
import {
|
||||
isBuildAngularInstalled,
|
||||
normalizeAssetPatterns,
|
||||
@ -33,7 +34,7 @@ function getTsConfigOptions(tsConfigPath: Path) {
|
||||
return basicOptions;
|
||||
}
|
||||
|
||||
const tsConfig = JSON.parse(fs.readFileSync(tsConfigPath, 'utf8'));
|
||||
const tsConfig = JSON.parse(stripJsonComments(fs.readFileSync(tsConfigPath, 'utf8')));
|
||||
|
||||
const { baseUrl } = tsConfig.compilerOptions as CompilerOptions;
|
||||
|
||||
@ -52,7 +53,7 @@ export function getAngularCliWebpackConfigOptions(dirToSearch: Path) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const angularJson = JSON.parse(fs.readFileSync(fname, 'utf8'));
|
||||
const angularJson = JSON.parse(stripJsonComments(fs.readFileSync(fname, 'utf8')));
|
||||
const { projects, defaultProject } = angularJson;
|
||||
|
||||
if (!projects || !Object.keys(projects).length) {
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"outDir": "dist",
|
||||
"types": ["webpack-env"],
|
||||
"types": [],
|
||||
"rootDir": "./src",
|
||||
"resolveJsonModule": true
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
|
||||
"bugs": {
|
||||
@ -12,6 +12,12 @@
|
||||
"directory": "app/ember"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"bin/**/*",
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"standalone.js"
|
||||
],
|
||||
"main": "dist/client/index.js",
|
||||
"jsnext:main": "src/client/index.js",
|
||||
"bin": {
|
||||
@ -24,7 +30,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ember/test-helpers": "^1.5.0",
|
||||
"@storybook/core": "5.2.0-rc.5",
|
||||
"@storybook/core": "5.3.0-alpha.4",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
docs
|
||||
src
|
||||
.babelrc
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -15,6 +15,12 @@
|
||||
"directory": "app/html"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"bin/**/*",
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"standalone.js"
|
||||
],
|
||||
"main": "dist/client/index.js",
|
||||
"types": "dist/client/index.d.ts",
|
||||
"bin": {
|
||||
@ -26,8 +32,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/core": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/core": "5.3.0-alpha.4",
|
||||
"@types/webpack-env": "^1.13.9",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
docs
|
||||
.babelrc
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/marko",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -15,8 +15,13 @@
|
||||
"directory": "app/marko"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"bin/**/*",
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"standalone.js"
|
||||
],
|
||||
"main": "dist/client/index.js",
|
||||
"jsnext:main": "src/client/index.js",
|
||||
"bin": {
|
||||
"build-storybook": "./bin/build.js",
|
||||
"start-storybook": "./bin/index.js",
|
||||
@ -26,9 +31,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@marko/webpack": "^1.2.0",
|
||||
"@storybook/client-logger": "5.2.0-rc.5",
|
||||
"@storybook/core": "5.2.0-rc.5",
|
||||
"@marko/webpack": "^2.0.0",
|
||||
"@storybook/client-logger": "5.3.0-alpha.4",
|
||||
"@storybook/core": "5.3.0-alpha.4",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -8,9 +8,6 @@ export function webpack(config) {
|
||||
{
|
||||
test: /\.marko$/,
|
||||
loader: require.resolve('@marko/webpack/loader'),
|
||||
options: {
|
||||
compiler: require.resolve('marko/compiler'),
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
docs
|
||||
.babelrc
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/mithril",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Storybook for Mithril: Develop Mithril Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -15,8 +15,13 @@
|
||||
"directory": "app/mithril"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"bin/**/*",
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"standalone.js"
|
||||
],
|
||||
"main": "dist/client/index.js",
|
||||
"jsnext:main": "src/client/index.js",
|
||||
"bin": {
|
||||
"build-storybook": "./bin/build.js",
|
||||
"start-storybook": "./bin/index.js",
|
||||
@ -27,7 +32,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.3.0",
|
||||
"@storybook/core": "5.2.0-rc.5",
|
||||
"@storybook/core": "5.3.0-alpha.4",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
docs
|
||||
src
|
||||
.babelrc
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/polymer",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -15,6 +15,12 @@
|
||||
"directory": "app/polymer"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"bin/**/*",
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"standalone.js"
|
||||
],
|
||||
"main": "dist/client/index.js",
|
||||
"bin": {
|
||||
"build-storybook": "./bin/build.js",
|
||||
@ -25,7 +31,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "5.2.0-rc.5",
|
||||
"@storybook/core": "5.3.0-alpha.4",
|
||||
"@webcomponents/webcomponentsjs": "^1.2.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
docs
|
||||
.babelrc
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -15,6 +15,12 @@
|
||||
"directory": "app/preact"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"bin/**/*",
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"standalone.js"
|
||||
],
|
||||
"main": "dist/client/index.js",
|
||||
"types": "dist/client/index.d.ts",
|
||||
"bin": {
|
||||
@ -27,8 +33,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.3.0",
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/core": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/core": "5.3.0-alpha.4",
|
||||
"@types/webpack-env": "^1.13.9",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { StoryFn, ClientStoryApi, Loadable } from '@storybook/addons';
|
||||
|
||||
export type StoryFnPreactReturnType = string | Node;
|
||||
export type StoryFnPreactReturnType = string | Node | JSX.Element;
|
||||
|
||||
export interface ShowErrorArgs {
|
||||
title: string;
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
docs
|
||||
.babelrc
|
||||
@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "@storybook/rax",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "Storybook for Rax: Develop Rax Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
"rax"
|
||||
"rax",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/rax",
|
||||
"bugs": {
|
||||
@ -16,8 +16,13 @@
|
||||
"directory": "app/rax"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"bin/**/*",
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"standalone.js"
|
||||
],
|
||||
"main": "dist/client/index.js",
|
||||
"jsnext:main": "src/client/index.js",
|
||||
"bin": {
|
||||
"build-storybook": "./bin/build.js",
|
||||
"start-storybook": "./bin/index.js",
|
||||
@ -27,15 +32,16 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "5.2.0-rc.5",
|
||||
"@storybook/core": "5.3.0-alpha.4",
|
||||
"babel-preset-rax": "^1.0.0-beta.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.6.2",
|
||||
"core-js": "^3.0.1",
|
||||
"driver-dom": "^2.0.0",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"rax": "^0.6.5"
|
||||
"rax": "^1.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-loader": "^7.0.0 || ^8.0.0",
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { createElement, render } from 'rax';
|
||||
import * as DriverDOM from 'driver-dom';
|
||||
|
||||
import { document } from 'global';
|
||||
import { stripIndents } from 'common-tags';
|
||||
|
||||
@ -12,9 +14,9 @@ export default function renderMain({
|
||||
showError,
|
||||
// forceRender,
|
||||
}) {
|
||||
const element = storyFn();
|
||||
const Element = storyFn;
|
||||
|
||||
if (!element) {
|
||||
if (!Element) {
|
||||
showError({
|
||||
title: `Expecting a Rax element from the story: "${selectedStory}" of "${selectedKind}".`,
|
||||
description: stripIndents`
|
||||
@ -27,5 +29,7 @@ export default function renderMain({
|
||||
|
||||
showMain();
|
||||
|
||||
render(element, rootElement);
|
||||
render(createElement(Element), rootElement, {
|
||||
driver: DriverDOM,
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
docs
|
||||
.babelrc
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-native-server",
|
||||
"version": "5.2.0-rc.5",
|
||||
"version": "5.3.0-alpha.4",
|
||||
"description": "A better way to develop React Native Components for your app",
|
||||
"keywords": [
|
||||
"react",
|
||||
@ -16,6 +16,11 @@
|
||||
"url": "https://github.com/storybookjs/storybook.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"bin/**/*",
|
||||
"dist/**/*",
|
||||
"README.md"
|
||||
],
|
||||
"bin": {
|
||||
"start-storybook": "./bin/index.js",
|
||||
"storybook-server": "./bin/index.js"
|
||||
@ -24,12 +29,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-rc.5",
|
||||
"@storybook/api": "5.2.0-rc.5",
|
||||
"@storybook/channel-websocket": "5.2.0-rc.5",
|
||||
"@storybook/core": "5.2.0-rc.5",
|
||||
"@storybook/core-events": "5.2.0-rc.5",
|
||||
"@storybook/ui": "5.2.0-rc.5",
|
||||
"@storybook/addons": "5.3.0-alpha.4",
|
||||
"@storybook/api": "5.3.0-alpha.4",
|
||||
"@storybook/channel-websocket": "5.3.0-alpha.4",
|
||||
"@storybook/core": "5.3.0-alpha.4",
|
||||
"@storybook/core-events": "5.3.0-alpha.4",
|
||||
"@storybook/ui": "5.3.0-alpha.4",
|
||||
"commander": "^2.19.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
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