mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 18:31:08 +08:00
Merge branch 'master' into 1017-deprecate-builtin-addons
This commit is contained in:
Michael Shilman
GitHub
commit
4cedd222c4
22
.bithoundrc
Normal file
22
.bithoundrc
Normal file
@ -0,0 +1,22 @@
|
||||
{
|
||||
"ignore": [
|
||||
"addons/links/.storybook/stories.js",
|
||||
"addons/info/.storybook/config.js",
|
||||
"lib/cli/generators/METEOR/template/.stories/Welcome.js",
|
||||
"lib/storyshots/.storybook/config.js",
|
||||
"addons/actions/.storybook/stories.js",
|
||||
"addons/graphql/.storybook/stories.js",
|
||||
"addons/info/.storybook/user/modify_webpack_config.js",
|
||||
"addons/info/.storybook/webpack.config.js",
|
||||
"addons/knobs/.storybook/user/modify_webpack_config.js",
|
||||
"addons/options/.storybook/stories.js",
|
||||
"lib/cli/generators/METEOR/template/.stories/Button.js",
|
||||
"lib/cli/generators/METEOR/template/.stories/index.js",
|
||||
"*.ts"
|
||||
],
|
||||
"critics": {
|
||||
"wc": {
|
||||
"limit": 500
|
||||
}
|
||||
}
|
||||
}
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -12,3 +12,4 @@ coverage/
|
||||
build
|
||||
packages/examples/automated-*
|
||||
yarn.lock
|
||||
/**/LICENSE
|
||||
|
||||
@ -33,16 +33,16 @@ To test your project against the current latest version of storybook, you can cl
|
||||
```
|
||||
cd packages/react-storybook
|
||||
npm link
|
||||
|
||||
|
||||
cd <your-project>
|
||||
npm link @kadira/storybook
|
||||
|
||||
|
||||
# repeat with whichever other parts of the monorepo you are using.
|
||||
```
|
||||
|
||||
### Reproductions
|
||||
|
||||
The best way to help figure out an issue you are having is to produce a minimal reproduction against the `master` branch.
|
||||
The best way to help figure out an issue you are having is to produce a minimal reproduction against the `master` branch.
|
||||
|
||||
A good way to do that is using the example `test-cra` app embedded in this repository:
|
||||
|
||||
@ -99,7 +99,18 @@ Issues that are tagged `question / support` or `needs reproduction` are great pl
|
||||
|
||||
### Triaging issues
|
||||
|
||||
Once you've helped out on a few issues, if you'd like triage access, you can help label issues, and respond to reporters. New issues should be labelled as one of `bug`, `new feature`, `question / support` or `discussion`.
|
||||
Once you've helped out on a few issues, if you'd like triage access you can help label issues and respond to reporters.
|
||||
|
||||
We use the following label scheme to categorize issues:
|
||||
- **type** - `bug`, `feature`, `question / support`, `discussion`, `greenkeeper`, `maintenance`.
|
||||
- **area** - `addon: x`, `addons-api`, `stories-api`, `ui`, etc.
|
||||
- **status** - `needs reproduction`, `needs PR`, `in progress`, etc.
|
||||
|
||||
All issues should have a `type` label. `bug`/`feature`/`question`/`discussion` are self-explanatory. `greenkeeper` is for keeping package dependencies up to date. `maintenance` is a catch-all for any kind of cleanup or refactoring.
|
||||
|
||||
They should also have one or more `area`/`status` labels. We use these labels to filter issues down so we can easily see all of the issues for a particular area, and keep the total number of open issues under control.
|
||||
|
||||
For example, here is the list of [open, untyped issues](https://github.com/storybooks/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20-label%3A%22bug%22%20-label%3A%22discussion%22%20-label%3A%22feature%22%20-label%3A%22maintenance%22%20-label%3A%22question%20%2F%20support%22%20-label%3A%22documentation%22%20-label%3A%22greenkeeper%22), or here is a list of [bugs that have not been modified since 2017-04-01](https://github.com/storybooks/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3A%22bug%22%20updated%3A%3C%3D2017-04-01%20). For more info see [searching issues](https://help.github.com/articles/searching-issues/) in the Github docs.
|
||||
|
||||
If an issue is a `bug`, and it doesn't have a clear reproduction that you have personally confirmed, label it `needs reproduction` and ask the author to try and create a reproduction, or have a go yourself.
|
||||
|
||||
@ -109,15 +120,14 @@ If an issue is a `bug`, and it doesn't have a clear reproduction that you have p
|
||||
|
||||
- Unreproducible issues should be closed if it's not possible to reproduce them (if the reporter drops offline, it is reasonable to wait 2 weeks before closing).
|
||||
|
||||
- `bug`s should be closed when the issue is fixed and merged to `master`
|
||||
- `bug`s should be labeled `merged` when merged, and be closed when the issue is fixed and released.
|
||||
|
||||
- `new feature`s should be closed when merged or if the feature is deemed to be not appropriate.
|
||||
- `feature`s, `maintenance`s, `greenkeeper`s should be labeled `merged` when merged, and closed when released or if the feature is deemed not appropriate.
|
||||
|
||||
- `question / support`s should be closed when the question has been answered. If the questioner drops offline, a reasonable period to wait is two weeks.
|
||||
|
||||
- `discussion`s should be closed at a maintainer's discretion.
|
||||
|
||||
|
||||
## Development Guide
|
||||
|
||||
> If you want to work on a UI feature, refer to the [Storybook UI](https://github.com/storybooks/storybook/tree/master/packages/storybook-ui) project.
|
||||
@ -155,7 +165,7 @@ getstorybook
|
||||
Then link storybook inside the sample project with:
|
||||
|
||||
```sh
|
||||
npm link @kadira/storybook
|
||||
npm link @storybook/react
|
||||
```
|
||||
|
||||
### Getting Changes
|
||||
|
||||
2
LICENSE
2
LICENSE
@ -1,6 +1,6 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 Your Name. <name@emailprovider.io>
|
||||
Copyright (c) 2017 Kadira Inc. <hello@kadira.io>
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
33
README.md
33
README.md
@ -3,10 +3,11 @@
|
||||
[](https://travis-ci.org/storybooks/storybook)
|
||||
[](https://www.codefactor.io/repository/github/storybooks/storybook)
|
||||
[](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
|
||||
[](https://bettercodehub.com/results/storybooks/storybook) [](https://codecov.io/gh/storybooks/storybook)
|
||||
[](https://bettercodehub.com/results/storybooks/storybook) [](https://codecov.io/gh/storybooks/storybook)
|
||||
[](https://storybooks-slackin.herokuapp.com/)
|
||||
|
||||
Storybook is a development environment for React UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.
|
||||
Storybook is a development environment for UI components.
|
||||
It allows you to browse a component library, view the different states of each component, and interactively develop and test components.
|
||||
|
||||
## Intro
|
||||
|
||||
@ -20,30 +21,32 @@ Storybook comes with a lot of [addons](https://storybooks.js.org/docs/react-stor
|
||||
|
||||
First install storybook:
|
||||
```js
|
||||
npm i -g getstorybook
|
||||
npm i -g @storybook/cli
|
||||
cd my-react-app
|
||||
getstorybook
|
||||
```
|
||||
|
||||
Once it's installed, you can `npm run storybook` and it will run the development server on your local machine, and give you a URL to browse some sample stories.
|
||||
|
||||
For full documentation on using Storybook visit: https://storybooks.js.org
|
||||
For full documentation on using Storybook visit: [storybooks.js.org](https://storybooks.js.org)
|
||||
|
||||
## Main Projects
|
||||
- [react-storybook](packages/react-storybook) - Storybook for React components
|
||||
- [react-native-storybook](packages/react-native-storybook) - Storybook for React components
|
||||
- [storyshots](packages/storyshots) - Easy snapshot testing for storybook
|
||||
- [getstorybook](packages/getstorybook) - Streamlined installation for a variety of app types
|
||||
- [Storybook for react](app/react-storybook) - Storybook for React components
|
||||
- [Storybook for react-native](packages/react-native-storybook) - Storybook for React components
|
||||
|
||||
## Sub Projects
|
||||
- [Storyshots](lib/storyshots) - Easy snapshot testing for storybook
|
||||
- [CLI](lib/cli) - Streamlined installation for a variety of app types
|
||||
- [examples](examples) - Code examples to illustrate different Storybook use cases
|
||||
|
||||
## Addons
|
||||
- [addon-actions](packages/addon-actions/) - Log actions as users interact with components in storybook
|
||||
- [addon-comments](packages/addon-comments/) - Comment on storybook stories
|
||||
- [addon-graphql](packages/addon-graphql/) - Query a GraphQL server within Storybook stories
|
||||
- [addon-info](packages/addon-info/) - Annotate stories with extra component usage information
|
||||
- [addon-knobs](packages/addon-knobs/) - Interactively edit component prop data in the Storybook UI
|
||||
- [addon-notes](packages/addon-notes/) - Annotate storybook stories with notes
|
||||
- [addon-options](packages/addon-options/) - Customize the storybook UI in code
|
||||
- [addon-actions](addon/actions/) - Log actions as users interact with components in storybook
|
||||
- [addon-comments](addon/comments/) - Comment on storybook stories
|
||||
- [addon-graphql](addon/graphql/) - Query a GraphQL server within Storybook stories
|
||||
- [addon-info](addon/info/) - Annotate stories with extra component usage information
|
||||
- [addon-knobs](addon/knobs/) - Interactively edit component prop data in the Storybook UI
|
||||
- [addon-notes](addon/notes/) - Annotate storybook stories with notes
|
||||
- [addon-options](addon/options/) - Customize the storybook UI in code
|
||||
|
||||
## Contributing
|
||||
|
||||
|
||||
1
addons/actions/.storybook/addons.js
Normal file
1
addons/actions/.storybook/addons.js
Normal file
@ -0,0 +1 @@
|
||||
import '../register';
|
||||
@ -1,2 +1,2 @@
|
||||
import * as storybook from '@kadira/storybook';
|
||||
import * as storybook from '@storybook/react';
|
||||
storybook.configure(() => require('./stories'), module);
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@kadira/storybook';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action, decorateAction } from '../src';
|
||||
|
||||
const pickFirst = decorateAction([
|
||||
56
addons/actions/README.md
Normal file
56
addons/actions/README.md
Normal file
@ -0,0 +1,56 @@
|
||||
# Storybook Addon Actions
|
||||
[](https://greenkeeper.io/)
|
||||
[](https://travis-ci.org/storybooks/storybook)
|
||||
[](https://www.codefactor.io/repository/github/storybooks/storybook)
|
||||
[](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
|
||||
[](https://bettercodehub.com/results/storybooks/storybook) [](https://codecov.io/gh/storybooks/storybook)
|
||||
[](https://storybooks-slackin.herokuapp.com/)
|
||||
|
||||
Storybook Addon Actions can be used to display data received by event handlers in [Storybook](https://storybooks.js.org).
|
||||
|
||||
This addon works with Storybook for:
|
||||
[React](https://github.com/storybooks/storybook/tree/master/app/react) and
|
||||
[React Native](https://github.com/storybooks/storybook/tree/master/app/react-native).
|
||||
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
You can use this addon without installing it manually.
|
||||
|
||||
Import the `action` function and use it to create actions handlers. When creating action handlers, provide a **name** to make it easier to identify.
|
||||
|
||||
> *Note: Make sure NOT to use reserved words as function names. [issues#29](https://github.com/storybooks/storybook-addon-actions/issues/29#issuecomment-288274794)*
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import { action } from '@storybook/addon-actions'
|
||||
|
||||
storiesOf('Button', module)
|
||||
.add('default view', () => (
|
||||
<Button onClick={ action('button-click') }>
|
||||
Hello World!
|
||||
</Button>
|
||||
))
|
||||
```
|
||||
|
||||
## Action Decorators
|
||||
|
||||
If you wish to process action data before sending them over to the logger, you can do it with action decorators.
|
||||
|
||||
`decorateAction` takes an array of decorator functions. Each decorator function is passed an array of arguments, and should return a new arguments array to use. `decorateAction` returns a function that can be used like `action` but will log the modified arguments instead of the original arguments.
|
||||
|
||||
```js
|
||||
import { action, decorateAction } from '@storybook/addon-actions'
|
||||
|
||||
const firstArgAction = decorateAction([
|
||||
args => args.slice(0, 1)
|
||||
]);
|
||||
|
||||
storiesOf('Button', module)
|
||||
.add('default view', () => (
|
||||
<Button onClick={ firstArgAction('button-click') }>
|
||||
Hello World!
|
||||
</Button>
|
||||
))
|
||||
```
|
||||
|
Before Width: | Height: | Size: 163 KiB After Width: | Height: | Size: 163 KiB |
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@kadira/storybook-addon-actions",
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "1.1.3",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"main": "dist/index.js",
|
||||
@ -10,20 +10,20 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/kadirahq/storybook-addon-actions.git"
|
||||
"url": "git+https://github.com/storybooks/storybook.git"
|
||||
},
|
||||
"keywords": [
|
||||
"storybook"
|
||||
],
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/kadirahq/storybook-addon-actions/issues"
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
},
|
||||
"homepage": "https://github.com/kadirahq/storybook-addon-actions#readme",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/packages/addon-actions",
|
||||
"devDependencies": {
|
||||
"@kadira/storybook": "*",
|
||||
"@kadira/storybook-addons": "*",
|
||||
"@kadira/storybook-ui": "*",
|
||||
"@storybook/react": "*",
|
||||
"@storybook/addons": "*",
|
||||
"@storybook/ui": "*",
|
||||
"react": "^15.5.4",
|
||||
"react-dom": "^15.5.4",
|
||||
"react-test-renderer": "^15.5.4",
|
||||
@ -36,7 +36,7 @@
|
||||
"react-inspector": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@kadira/storybook-addons": "*",
|
||||
"@storybook/addons": "*",
|
||||
"react": "*",
|
||||
"react-dom": "*"
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
// addons, panels and events get unique names using a prefix
|
||||
export const ADDON_ID = 'kadirahq/storybook-addon-actions';
|
||||
export const ADDON_ID = 'storybook/addon-actions';
|
||||
export const PANEL_ID = `${ADDON_ID}/actions-panel`;
|
||||
export const EVENT_ID = `${ADDON_ID}/action-event`;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import addons from '@kadira/storybook-addons';
|
||||
import addons from '@storybook/addons';
|
||||
import ActionLogger from './containers/ActionLogger';
|
||||
import { ADDON_ID, PANEL_ID } from './';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import addons from '@kadira/storybook-addons';
|
||||
import addons from '@storybook/addons';
|
||||
import stringify from 'json-stringify-safe';
|
||||
import { EVENT_ID } from './';
|
||||
|
||||
78
addons/centered/README.md
Normal file
78
addons/centered/README.md
Normal file
@ -0,0 +1,78 @@
|
||||
# Storybook Centered Decorator
|
||||
[](https://greenkeeper.io/)
|
||||
[](https://travis-ci.org/storybooks/storybook)
|
||||
[](https://www.codefactor.io/repository/github/storybooks/storybook)
|
||||
[](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
|
||||
[](https://bettercodehub.com/results/storybooks/storybook) [](https://codecov.io/gh/storybooks/storybook)
|
||||
[](https://storybooks-slackin.herokuapp.com/)
|
||||
|
||||
Storybook Centered Decorator can be used to center components inside the preview in [Storybook](https://storybooks.js.org).
|
||||
|
||||
This addon works with Storybook for:
|
||||
[React](https://github.com/storybooks/storybook/tree/master/app/react).
|
||||
|
||||
### Usage
|
||||
|
||||
```sh
|
||||
npm i @storybook/addon-centered
|
||||
```
|
||||
|
||||
#### As a decorator
|
||||
You can set the decorator locally:
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import MyComponent from '../Component';
|
||||
import centered from '@storybook/addon-centered';
|
||||
|
||||
storiesOf('MyComponent', module)
|
||||
.addDecorator(centered)
|
||||
.add('without props', () => (<MyComponent />))
|
||||
.add('with some props', () => (<MyComponent text="The Comp"/>));
|
||||
```
|
||||
|
||||
Or you can also add this decorator globally:
|
||||
|
||||
```js
|
||||
import { configure, addDecorator } from '@storybook/react';
|
||||
import centered from '@storybook/react-storybook-decorator-centered';
|
||||
|
||||
addDecorator(centered);
|
||||
|
||||
configure(function () {
|
||||
//...
|
||||
}, module);
|
||||
```
|
||||
|
||||
#### As an extension
|
||||
1 - Configure the extension
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import { configure, setAddon } from '@storybook/react';
|
||||
import centered from '@storybook/addon-centered';
|
||||
|
||||
setAddon({
|
||||
addCentered(storyName, storyFn) {
|
||||
this.add(storyName, (context) => (
|
||||
centered.call(context, storyFn)
|
||||
));
|
||||
}
|
||||
});
|
||||
|
||||
configure(function () {
|
||||
//...
|
||||
}, module);
|
||||
```
|
||||
|
||||
2 - Use it in your story
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import Component from '../Component';
|
||||
|
||||
storiesOf('Component', module)
|
||||
.addCentered('without props', () => (<Component />))
|
||||
```
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@kadira/react-storybook-decorator-centered",
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "1.1.2",
|
||||
"description": "React Storybook decorator to center components",
|
||||
"main": "build/index.js",
|
||||
@ -1,6 +1,7 @@
|
||||
// Use the line below to register this addon
|
||||
// import '@kadira/storybook-addon-comments/register';
|
||||
import '@kadira/storybook-addon-actions/register';
|
||||
// import '@storybook/addon-comments/register';
|
||||
import '@storybook/addon-actions/register';
|
||||
import '@kadira/storybook-database-cloud/register';
|
||||
|
||||
import { init } from '../src/manager';
|
||||
init();
|
||||
@ -3,7 +3,7 @@
|
||||
// This is an auto generated file with React CDK.
|
||||
// Do not modify this file.
|
||||
|
||||
import { configure } from '@kadira/storybook';
|
||||
import { configure } from '@storybook/react';
|
||||
|
||||
function loadStories() {
|
||||
require('../src/stories');
|
||||
28
addons/comments/README.md
Normal file
28
addons/comments/README.md
Normal file
@ -0,0 +1,28 @@
|
||||
# Storybook Comments Addon
|
||||
[](https://greenkeeper.io/)
|
||||
[](https://travis-ci.org/storybooks/storybook)
|
||||
[](https://www.codefactor.io/repository/github/storybooks/storybook)
|
||||
[](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
|
||||
[](https://bettercodehub.com/results/storybooks/storybook) [](https://codecov.io/gh/storybooks/storybook)
|
||||
[](https://storybooks-slackin.herokuapp.com/)
|
||||
|
||||
Storybook Comments Addon allows you to add comments for your stories in [Storybook](https://storybooks.js.org).
|
||||
|
||||
This addon works with Storybook for:
|
||||
[React](https://github.com/storybooks/storybook/tree/master/app/react).
|
||||
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, install the addon
|
||||
|
||||
```sh
|
||||
npm install -D @storybook/addon-comments
|
||||
```
|
||||
|
||||
Add this line to your `addons.js` file (create this file inside your storybook config directory if needed).
|
||||
|
||||
```js
|
||||
import '@storybook/addon-comments/register';
|
||||
```
|
||||
|
Before Width: | Height: | Size: 151 KiB After Width: | Height: | Size: 151 KiB |
@ -1,19 +1,19 @@
|
||||
{
|
||||
"name": "@kadira/storybook-addon-comments",
|
||||
"name": "@storybook/addon-comments",
|
||||
"version": "1.9.1",
|
||||
"description": "Comments addon for Storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/kadirahq/storybook-addon-comments#readme",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/packages/addon-comments",
|
||||
"bugs": {
|
||||
"url": "https://github.com/kadirahq/storybook-addon-comments/issues"
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "preview.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/kadirahq/storybook-addon-comments.git"
|
||||
"url": "git+https://github.com/storybooks/storybook.git"
|
||||
},
|
||||
"scripts": {
|
||||
"prepublish": "node ../../scripts/prepublish.js",
|
||||
@ -34,11 +34,11 @@
|
||||
"react-textarea-autosize": "^4.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@kadira/storybook": "*",
|
||||
"@kadira/storybook-addons": "*",
|
||||
"@storybook/react": "*",
|
||||
"@storybook/addons": "*",
|
||||
"@kadira/storybook-database-cloud": "*",
|
||||
"@kadira/storybook-deployer": "*",
|
||||
"@kadira/storybook-ui": "*",
|
||||
"@storybook/ui": "*",
|
||||
"git-url-parse": "^6.2.2",
|
||||
"react": "^15.5.4",
|
||||
"react-dom": "^15.5.4",
|
||||
@ -46,7 +46,7 @@
|
||||
"shelljs": "^0.7.7"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@kadira/storybook-addons": "*",
|
||||
"@storybook/addons": "*",
|
||||
"react": "*",
|
||||
"react-dom": "*"
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import addons from '@kadira/storybook-addons';
|
||||
import addons from '@storybook/addons';
|
||||
import CommentsPanel from '../../components/CommentsPanel/';
|
||||
import DataStore from './dataStore';
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/* eslint import/prefer-default-export:0 */
|
||||
|
||||
import React from 'react';
|
||||
import addons from '@kadira/storybook-addons';
|
||||
import addons from '@storybook/addons';
|
||||
import CommentsPanel from './containers/CommentsPanel';
|
||||
import { ADDON_ID, PANEL_ID } from '../shared';
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
// addons, panels and events get unique names using a prefix
|
||||
export const ADDON_ID = 'kadirahq/storybook-addon-comments';
|
||||
export const ADDON_ID = 'storybooks/addon-comments';
|
||||
export const PANEL_ID = `${ADDON_ID}/comments-panel`;
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { storiesOf, action } from '@kadira/storybook';
|
||||
import { storiesOf, action } from '@storybook/react';
|
||||
import Button from '../index';
|
||||
import CommentForm from '../manager/components/CommentForm';
|
||||
import CommentList from '../manager/components/CommentList';
|
||||
@ -1,2 +1,2 @@
|
||||
import * as storybook from '@kadira/storybook';
|
||||
import * as storybook from '@storybook/react';
|
||||
storybook.configure(() => require('./stories'), module);
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@kadira/storybook'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import { setupGraphiQL } from '../src'
|
||||
|
||||
// setup the graphiql helper which can be used with the add method later
|
||||
69
addons/graphql/README.md
Normal file
69
addons/graphql/README.md
Normal file
@ -0,0 +1,69 @@
|
||||
# Storybook GraphiQL Addon
|
||||
[](https://greenkeeper.io/)
|
||||
[](https://travis-ci.org/storybooks/storybook)
|
||||
[](https://www.codefactor.io/repository/github/storybooks/storybook)
|
||||
[](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
|
||||
[](https://bettercodehub.com/results/storybooks/storybook) [](https://codecov.io/gh/storybooks/storybook)
|
||||
[](https://storybooks-slackin.herokuapp.com/)
|
||||
|
||||
Storybook GraphiQL Addon can be used to display the GraphiQL IDE with example queries in [Storybook](https://storybooks.js.org).
|
||||
|
||||
This addon works with Storybook for:
|
||||
[React](https://github.com/storybooks/storybook/tree/master/app/react).
|
||||
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, install the addon
|
||||
|
||||
```shell
|
||||
npm install -D @storybook/addon-graphql
|
||||
```
|
||||
|
||||
Import the `setupGraphiQL` function and use it to create the graphiql helper with a base url.
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import { setupGraphiQL } from '@storybook/addon-graphql'
|
||||
|
||||
// setup the graphiql helper which can be used with the add method later
|
||||
const graphiql = setupGraphiQL({ url: 'http://localhost:3000/graphql' });
|
||||
|
||||
storiesOf('GraphQL Demo', module)
|
||||
.add('get user info', graphiql(`{
|
||||
user(id: "1") {
|
||||
name
|
||||
}
|
||||
}`));
|
||||
```
|
||||
|
||||
> Tip: try creating the helper in another file and import the configured graphiql helper from it
|
||||
|
||||
## Advanced Setup
|
||||
|
||||
The `setupGraphiQL` function also accepts a fetcher parameter which can be used to change how graphiql gets data. If the fetcher parameter is not given, it'll create a fetcher which uses the `fetch` api to make requests. The above example can also be written using a custom fetcher.
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import { setupGraphiQL } from '@storybook/addon-graphql'
|
||||
|
||||
const fetcher = function (params) {
|
||||
const options = {
|
||||
method: 'post',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(params),
|
||||
};
|
||||
return fetch(url, options).then(res => res.json());
|
||||
};
|
||||
|
||||
// create the helper with a custom fetcher
|
||||
const graphiql = setupGraphiQL({ fetcher });
|
||||
|
||||
storiesOf('GraphQL Demo', module)
|
||||
.add('get user info', graphiql(`{
|
||||
user(id: "1") {
|
||||
name
|
||||
}
|
||||
}`));
|
||||
```
|
||||
|
Before Width: | Height: | Size: 249 KiB After Width: | Height: | Size: 249 KiB |
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@kadira/storybook-addon-graphql",
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "1.0.1",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"main": "dist/index.js",
|
||||
@ -10,24 +10,24 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/kadirahq/storybook-addon-graphql.git"
|
||||
"url": "git+https://github.com/storybooks/storybook.git"
|
||||
},
|
||||
"keywords": [
|
||||
"storybook"
|
||||
],
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/kadirahq/storybook-addon-graphql/issues"
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
},
|
||||
"homepage": "https://github.com/kadirahq/storybook-addon-graphql#readme",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/packages/addon-graphql",
|
||||
"devDependencies": {
|
||||
"@kadira/storybook": "*",
|
||||
"@storybook/react": "*",
|
||||
"react": "^15.5.4",
|
||||
"react-dom": "^15.5.4",
|
||||
"shelljs": "^0.7.7"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@kadira/storybook-addons": "*",
|
||||
"@storybook/addons": "*",
|
||||
"react": "*"
|
||||
},
|
||||
"dependencies": {
|
||||
@ -1,2 +1,2 @@
|
||||
import '@kadira/storybook-addon-actions/register';
|
||||
import '@storybook/addon-actions/register';
|
||||
import 'react-storybook-addon-backgrounds/register';
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { configure, setAddon, addDecorator } from '@kadira/storybook';
|
||||
import { configure, setAddon, addDecorator } from '@storybook/react';
|
||||
import InfoAddon from '../src/';
|
||||
|
||||
addDecorator((story) => (
|
||||
62
addons/info/README.md
Normal file
62
addons/info/README.md
Normal file
@ -0,0 +1,62 @@
|
||||
# Storybook Info Addon
|
||||
[](https://greenkeeper.io/)
|
||||
[](https://travis-ci.org/storybooks/storybook)
|
||||
[](https://www.codefactor.io/repository/github/storybooks/storybook)
|
||||
[](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
|
||||
[](https://bettercodehub.com/results/storybooks/storybook) [](https://codecov.io/gh/storybooks/storybook)
|
||||
[](https://storybooks-slackin.herokuapp.com/)
|
||||
|
||||
Storybook Info Addon will show additional information for your stories in [Storybook](https://storybooks.js.org).
|
||||
Useful when you want to display usage or other types of documentation alongside your story.
|
||||
|
||||
This addon works with Storybook for:
|
||||
[React](https://github.com/storybooks/storybook/tree/master/app/react).
|
||||
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
Install the following npm module:
|
||||
|
||||
```sh
|
||||
npm i -D @storybook/addon-info
|
||||
```
|
||||
|
||||
Then set the addon in the place you configure storybook like this:
|
||||
|
||||
```js
|
||||
import { configure, setAddon } from '@storybook/react';
|
||||
import infoAddon from '@storybook/addon-info';
|
||||
|
||||
setAddon(infoAddon);
|
||||
|
||||
configure(function () {
|
||||
//...
|
||||
}, module);
|
||||
```
|
||||
|
||||
Then create your stories with the `.addWithInfo` API.
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import Component from './Component';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
storiesOf('Component')
|
||||
.addWithInfo(
|
||||
'simple usage',
|
||||
`This is the basic usage with the button with providing a label to show the text.`,
|
||||
() => (
|
||||
<Component>Click the "?" mark at top-right to view the info.</Componentp>
|
||||
),
|
||||
);
|
||||
```
|
||||
|
||||
> Have a look at [this example](example/story.js) stories to learn more about the `addWithInfo` API.
|
||||
|
||||
## The FAQ
|
||||
|
||||
**Components lose their names on static build**
|
||||
|
||||
Component names also get minified with other javascript code when building for production.
|
||||
When creating components, set the `displayName` static property to show the correct component name on static builds.
|
||||
|
Before Width: | Height: | Size: 189 KiB After Width: | Height: | Size: 189 KiB |
@ -1,14 +1,15 @@
|
||||
import React from 'react';
|
||||
import Button from './Button';
|
||||
import { storiesOf } from '@kadira/storybook';
|
||||
import { action } from '@kadira/storybook-addon-actions';
|
||||
|
||||
import { storiesOf, action } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import backgrounds from 'react-storybook-addon-backgrounds';
|
||||
|
||||
storiesOf('Button').addWithInfo(
|
||||
storiesOf(
|
||||
'Button',
|
||||
).addWithInfo(
|
||||
'simple usage',
|
||||
`
|
||||
This is the basic usage with the button with providing a label to show the text.
|
||||
`,
|
||||
'This is the basic usage with the button with providing a label to show the text.',
|
||||
() => (
|
||||
<div>
|
||||
<Button label="The Button" onClick={action('onClick')} />
|
||||
@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "@kadira/react-storybook-addon-info",
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "3.4.0",
|
||||
"description": "A React Storybook addon to show additional information for your stories.",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/kadirahq/react-storybook-addon-info.git"
|
||||
"url": "git+https://github.com/storybooks/storybook.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
@ -13,7 +13,7 @@
|
||||
"publish-storybook": "bash .scripts/publish_storybook.sh"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@kadira/storybook": "*",
|
||||
"@storybook/react": "*",
|
||||
"git-url-parse": "^6.2.2",
|
||||
"react": "^15.5.4",
|
||||
"react-dom": "^15.5.4",
|
||||
@ -260,9 +260,12 @@ export default class Story extends React.Component {
|
||||
if (children.props && children.props.children) {
|
||||
extract(children.props.children);
|
||||
}
|
||||
if (typeof children === 'string' || typeof children.type === 'string' ||
|
||||
if (
|
||||
typeof children === 'string' ||
|
||||
typeof children.type === 'string' ||
|
||||
(Array.isArray(this.props.propTablesExclude) && // also ignore excluded types
|
||||
~this.props.propTablesExclude.indexOf(children.type))) {
|
||||
~this.props.propTablesExclude.indexOf(children.type))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
if (children.type && !types.has(children.type)) {
|
||||
@ -3,7 +3,7 @@
|
||||
// This is an auto generated file with React CDK.
|
||||
// Do not modify this file.
|
||||
|
||||
import { configure } from '@kadira/storybook';
|
||||
import { configure } from '@storybook/react';
|
||||
|
||||
function loadStories() {
|
||||
require('../example/stories');
|
||||
@ -1,7 +1,16 @@
|
||||
# Storybook Addon Knobs [](https://circleci.com/gh/storybooks/storybook-addon-knobs)
|
||||
# Storybook Addon Knobs
|
||||
[](https://greenkeeper.io/)
|
||||
[](https://travis-ci.org/storybooks/storybook)
|
||||
[](https://www.codefactor.io/repository/github/storybooks/storybook)
|
||||
[](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
|
||||
[](https://bettercodehub.com/results/storybooks/storybook) [](https://codecov.io/gh/storybooks/storybook)
|
||||
[](https://storybooks-slackin.herokuapp.com/)
|
||||
|
||||
Knobs allow you to edit React props dynamically using the Storybook UI.
|
||||
You can also use Knobs as a dynamic variable inside stories.
|
||||
Storybook Addon Knobs allow you to edit React props dynamically using the Storybook UI.
|
||||
You can also use Knobs as a dynamic variable inside stories in [Storybook](https://storybooks.js.org).
|
||||
|
||||
This addon works with Storybook for:
|
||||
[React](https://github.com/storybooks/storybook/tree/master/app/react).
|
||||
|
||||
This is how Knobs look like:
|
||||
|
||||
@ -14,21 +23,21 @@ This is how Knobs look like:
|
||||
First of all, you need to install knobs into your project as a dev dependency.
|
||||
|
||||
```js
|
||||
npm i -D @kadira/storybook-addon-knobs
|
||||
npm i -D @storybook/addon-knobs
|
||||
```
|
||||
|
||||
Then, configure it as an addon by adding it to your `addons.js` file (located in the Storybook config directory).
|
||||
|
||||
```js
|
||||
import '@kadira/storybook-addon-knobs/register'
|
||||
import '@storybook/addon-knobs/register'
|
||||
```
|
||||
|
||||
Now, write your stories with knobs.
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@kadira/storybook';
|
||||
import { withKnobs, text, boolean, number } from '@kadira/storybook-addon-knobs';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
|
||||
|
||||
const stories = storiesOf('Storybook Knobs', module);
|
||||
|
||||
@ -64,15 +73,15 @@ You can see your Knobs in a Storybook panel as shown below.
|
||||
* Introduction blog post.
|
||||
* Watch this video on how to use knobs
|
||||
* [Live Storybook with Knobs](https://goo.gl/uX9WLf)
|
||||
* Have a look at this [sample Storybook repo](https://github.com/kadira-samples/storybook-knobs-example).
|
||||
* Have a look at this [sample Storybook repo](https://github.com/storybook-samples/storybook-knobs-example).
|
||||
|
||||
## Available Knobs
|
||||
|
||||
These are the knobs available for you to use. You can import these Knobs from the `@kadira/storybook-addon-knobs` module.
|
||||
These are the knobs available for you to use. You can import these Knobs from the `@storybook/addon-knobs` module.
|
||||
Here's how to import the **text** Knob.
|
||||
|
||||
```js
|
||||
import { text } from '@kadira/storybook-addon-knobs';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
```
|
||||
|
||||
Just like that, you can import any other following Knobs:
|
||||
@ -164,8 +173,9 @@ const defaultValue = ['Red']
|
||||
const value = array(label, defaultValue);
|
||||
```
|
||||
|
||||
> While editing values inside the knob, you will need to use a separator. By default it's a comma, but this can be
|
||||
override by passing a separator variable.
|
||||
> While editing values inside the knob, you will need to use a separator.
|
||||
> By default it's a comma, but this can be override by passing a separator variable.
|
||||
>
|
||||
> ```js
|
||||
> const separator = ':';
|
||||
> const value = array(label, defaultValue, separator);
|
||||
|
Before Width: | Height: | Size: 709 KiB After Width: | Height: | Size: 709 KiB |
|
Before Width: | Height: | Size: 143 KiB After Width: | Height: | Size: 143 KiB |
|
Before Width: | Height: | Size: 230 KiB After Width: | Height: | Size: 230 KiB |
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@kadira/storybook';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import moment from 'moment';
|
||||
import { withKnobs, number, object, boolean, text, select, date, array, color } from '../../src';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import { storiesOf } from '@kadira/storybook';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import * as moment from 'moment';
|
||||
import {
|
||||
withKnobs,
|
||||
@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "@kadira/storybook-addon-knobs",
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "1.7.1",
|
||||
"description": "React Storybook Addon Prop Editor Component",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/kadirahq/react-storybook-addon-knobs.git"
|
||||
"url": "git+https://github.com/storybooks/storybook.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
@ -14,7 +14,7 @@
|
||||
"publish-storybook": "bash .scripts/publish_storybook.sh"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@kadira/storybook": "*",
|
||||
"@storybook/react": "*",
|
||||
"@types/node": "^7.0.12",
|
||||
"@types/react": "^15.0.21",
|
||||
"git-url-parse": "^6.2.2",
|
||||
@ -26,7 +26,7 @@
|
||||
"typescript-definition-tester": "^0.0.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@kadira/storybook-addons": "*",
|
||||
"@storybook/addons": "*",
|
||||
"react": "*",
|
||||
"react-dom": "*"
|
||||
},
|
||||
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