CHANGE folder structure && CHANGE package-names
@ -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:
|
||||
|
||||
@ -155,7 +155,7 @@ getstorybook
|
||||
Then link storybook inside the sample project with:
|
||||
|
||||
```sh
|
||||
npm link @storybook/storybook
|
||||
npm link @storybook/react
|
||||
```
|
||||
|
||||
### Getting Changes
|
||||
|
1
addons/actions/.storybook/addons.js
Normal file
@ -0,0 +1 @@
|
||||
import '../register';
|
@ -1,2 +1,2 @@
|
||||
import * as storybook from '@storybook/storybook';
|
||||
import * as storybook from '@storybook/react';
|
||||
storybook.configure(() => require('./stories'), module);
|
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/storybook';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action, decorateAction } from '../src';
|
||||
|
||||
const pickFirst = decorateAction([
|
@ -13,8 +13,8 @@ Import the `action` function and use it to create actions handlers. When creatin
|
||||
> *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, action } from '@storybook/storybook'
|
||||
// or import { action } from '@storybook/addon-actions'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import { action } from '@storybook/addon-actions'
|
||||
|
||||
storiesOf('Button', module)
|
||||
.add('default view', () => (
|
Before Width: | Height: | Size: 163 KiB After Width: | Height: | Size: 163 KiB |
@ -21,9 +21,9 @@
|
||||
},
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/packages/addon-actions",
|
||||
"devDependencies": {
|
||||
"@storybook/storybook": "*",
|
||||
"@storybook/react": "*",
|
||||
"@storybook/addons": "*",
|
||||
"@storybook/storybook-ui": "*",
|
||||
"@storybook/ui": "*",
|
||||
"react": "^15.5.4",
|
||||
"react-dom": "^15.5.4",
|
||||
"react-test-renderer": "^15.5.4",
|
@ -1,6 +1,7 @@
|
||||
// Use the line below to register this addon
|
||||
// import '@storybook/storybook-addon-comments/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 '@storybook/storybook';
|
||||
import { configure } from '@storybook/react';
|
||||
|
||||
function loadStories() {
|
||||
require('../src/stories');
|
@ -9,11 +9,11 @@ This Storybook addon allows you to add comments for your stories. This addon wor
|
||||
First, install the addon
|
||||
|
||||
```shell
|
||||
npm install -D @storybook/storybook-addon-comments
|
||||
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/storybook-addon-comments/register';
|
||||
import '@storybook/addon-comments/register';
|
||||
```
|
Before Width: | Height: | Size: 151 KiB After Width: | Height: | Size: 151 KiB |
@ -34,11 +34,11 @@
|
||||
"react-textarea-autosize": "^4.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/storybook": "*",
|
||||
"@storybook/react": "*",
|
||||
"@storybook/addons": "*",
|
||||
"@kadira/storybook-database-cloud": "*",
|
||||
"@kadira/storybook-deployer": "*",
|
||||
"@storybook/storybook-ui": "*",
|
||||
"@storybook/ui": "*",
|
||||
"git-url-parse": "^6.2.2",
|
||||
"react": "^15.5.4",
|
||||
"react-dom": "^15.5.4",
|
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { storiesOf, action } from '@storybook/storybook';
|
||||
import { storiesOf, action } from '@storybook/react';
|
||||
import Button from '../index';
|
||||
import CommentForm from '../manager/components/CommentForm';
|
||||
import CommentList from '../manager/components/CommentList';
|
@ -13,7 +13,7 @@ You can set the decorator locally:
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/storybook';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import MyComponent from '../my_component';
|
||||
import centered from '@storybook/react-storybook-decorator-centered';
|
||||
|
||||
@ -26,7 +26,7 @@ storiesOf('MyComponent', module)
|
||||
Or you can also add this decorator globally:
|
||||
|
||||
```js
|
||||
import { configure, addDecorator } from '@storybook/storybook';
|
||||
import { configure, addDecorator } from '@storybook/react';
|
||||
import centered from '@storybook/react-storybook-decorator-centered';
|
||||
|
||||
addDecorator(centered);
|
||||
@ -41,7 +41,7 @@ configure(function () {
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import { configure, setAddon } from '@storybook/storybook';
|
||||
import { configure, setAddon } from '@storybook/react';
|
||||
import centered from '@storybook/react-storybook-decorator-centered';
|
||||
|
||||
setAddon({
|
||||
@ -61,7 +61,7 @@ configure(function () {
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/storybook';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import MyComponent from '../my_component';
|
||||
|
||||
storiesOf('MyComponent', module)
|
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@storybook/react-storybook-decorator-centered",
|
||||
"name": "@storybook/decorator-centered",
|
||||
"version": "1.1.2",
|
||||
"description": "React Storybook decorator to center components",
|
||||
"main": "build/index.js",
|
@ -1,2 +1,2 @@
|
||||
import * as storybook from '@storybook/storybook';
|
||||
import * as storybook from '@storybook/react';
|
||||
storybook.configure(() => require('./stories'), module);
|
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/storybook'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import { setupGraphiQL } from '../src'
|
||||
|
||||
// setup the graphiql helper which can be used with the add method later
|
@ -9,14 +9,14 @@ The GraphiQL addon can be used to display the GraphiQL IDE with example queries.
|
||||
First, install the addon
|
||||
|
||||
```shell
|
||||
npm install -D @storybook/storybook-addon-graphql
|
||||
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/storybook'
|
||||
import { setupGraphiQL } from '@storybook/storybook-addon-graphql'
|
||||
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' });
|
||||
@ -36,8 +36,8 @@ storiesOf('GraphQL Demo', module)
|
||||
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/storybook'
|
||||
import { setupGraphiQL } from '@storybook/storybook-addon-graphql'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import { setupGraphiQL } from '@storybook/addon-graphql'
|
||||
|
||||
const fetcher = function (params) {
|
||||
const options = {
|
Before Width: | Height: | Size: 249 KiB After Width: | Height: | Size: 249 KiB |
@ -21,7 +21,7 @@
|
||||
},
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/packages/addon-graphql",
|
||||
"devDependencies": {
|
||||
"@storybook/storybook": "*",
|
||||
"@storybook/react": "*",
|
||||
"react": "^15.5.4",
|
||||
"react-dom": "^15.5.4",
|
||||
"shelljs": "^0.7.7"
|
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { configure, setAddon, addDecorator } from '@storybook/storybook';
|
||||
import { configure, setAddon, addDecorator } from '@storybook/react';
|
||||
import InfoAddon from '../src/';
|
||||
|
||||
addDecorator((story) => (
|
@ -15,7 +15,7 @@ npm i -D @storybook/react-storybook-addon-info
|
||||
Then set the addon in the place you configure storybook like this:
|
||||
|
||||
```js
|
||||
import { configure, setAddon } from '@storybook/storybook';
|
||||
import { configure, setAddon } from '@storybook/react';
|
||||
import infoAddon from '@storybook/react-storybook-addon-info';
|
||||
|
||||
setAddon(infoAddon);
|
||||
@ -30,7 +30,7 @@ Then create your stories with the `.addWithInfo` API.
|
||||
```js
|
||||
import React from 'react';
|
||||
import Button from './Button';
|
||||
import { storiesOf, action } from '@storybook/storybook';
|
||||
import { storiesOf, action } from '@storybook/react';
|
||||
|
||||
storiesOf('Button')
|
||||
.addWithInfo(
|
Before Width: | Height: | Size: 189 KiB After Width: | Height: | Size: 189 KiB |
@ -1,14 +1,13 @@
|
||||
import React from 'react';
|
||||
import Button from './Button';
|
||||
import { storiesOf } from '@storybook/storybook';
|
||||
|
||||
import { storiesOf, action } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import backgrounds from 'react-storybook-addon-backgrounds';
|
||||
|
||||
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')} />
|
@ -13,7 +13,7 @@
|
||||
"publish-storybook": "bash .scripts/publish_storybook.sh"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/storybook": "*",
|
||||
"@storybook/react": "*",
|
||||
"git-url-parse": "^6.2.2",
|
||||
"react": "^15.5.4",
|
||||
"react-dom": "^15.5.4",
|