CHANGE folder structure && CHANGE package-names

CONTRIBUTING.md

@@ -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

addons/actions/.storybook/addons.js

@@ -0,0 +1 @@
+import '../register';

packages/addon-links/.storybook/config.js → addons/actions/.storybook/config.js

@@ -1,2 +1,2 @@
-import * as storybook from '@storybook/storybook';
+import * as storybook from '@storybook/react';
 storybook.configure(() => require('./stories'), module);

packages/addon-actions/.storybook/stories.js → addons/actions/.storybook/stories.js

@@ -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([

packages/addon-actions/README.md → addons/actions/README.md

@@ -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', () => (

packages/addon-actions/package.json → addons/actions/package.json

@@ -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",

packages/addon-comments/.storybook/addons.js → addons/comments/.storybook/addons.js

@@ -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();

packages/addon-comments/.storybook/config.js → addons/comments/.storybook/config.js

@@ -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');

packages/addon-comments/README.md → addons/comments/README.md

@@ -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';
 ```

packages/addon-comments/package.json → addons/comments/package.json

@@ -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",

packages/addon-comments/src/stories/index.js → addons/comments/src/stories/index.js

@@ -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';

packages/decorator-centered/README.md → addons/decorator-centered/README.md

@@ -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)

packages/decorator-centered/package.json → addons/decorator-centered/package.json

@@ -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",

packages/addon-actions/.storybook/config.js → addons/graphql/.storybook/config.js

@@ -1,2 +1,2 @@
-import * as storybook from '@storybook/storybook';
+import * as storybook from '@storybook/react';
 storybook.configure(() => require('./stories'), module);

packages/addon-graphql/.storybook/stories.js → addons/graphql/.storybook/stories.js

@@ -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

packages/addon-graphql/README.md → addons/graphql/README.md

@@ -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 = {

packages/addon-graphql/package.json → addons/graphql/package.json

@@ -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"

packages/addon-info/.storybook/config.js → addons/info/.storybook/config.js

@@ -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) => (

packages/addon-info/README.md → addons/info/README.md

@@ -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(

packages/addon-info/example/story.js → addons/info/example/story.js

@@ -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')} />

packages/addon-info/package.json → addons/info/package.json

@@ -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",

packages/addon-knobs/.storybook/config.js → addons/knobs/.storybook/config.js

@@ -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('../example/stories');

packages/addon-knobs/README.md → addons/knobs/README.md

@@ -14,21 +14,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 @storybook/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 '@storybook/storybook-addon-knobs/register'
+import '@storybook/addon-knobs/register'
 ```
 
 Now, write your stories with knobs.
 
 ```js
 import React from 'react';
-import { storiesOf } from '@storybook/storybook';
-import { withKnobs, text, boolean, number } from '@storybook/storybook-addon-knobs';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
 
 const stories = storiesOf('Storybook Knobs', module);
 
@@ -68,11 +68,11 @@ You can see your Knobs in a Storybook panel as shown below.
 
 ## Available Knobs
 
-These are the knobs available for you to use. You can import these Knobs from the `@storybook/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 '@storybook/storybook-addon-knobs';
+import { text } from '@storybook/addon-knobs';
 ```
 
 Just like that, you can import any other following Knobs:

packages/addon-knobs/example/stories/index.js → addons/knobs/example/stories/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@storybook/storybook';
+import { storiesOf } from '@storybook/react';
 import moment from 'moment';
 import { withKnobs, number, object, boolean, text, select, date, array, color } from '../../src';
 

packages/addon-knobs/example/typescript/index.tsx → addons/knobs/example/typescript/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { storiesOf } from '@storybook/storybook';
+import { storiesOf } from '@storybook/react';
 import * as moment from 'moment';
 import {
   withKnobs,

packages/addon-knobs/package.json → addons/knobs/package.json

@@ -14,7 +14,7 @@
     "publish-storybook": "bash .scripts/publish_storybook.sh"
   },
   "devDependencies": {
-    "@storybook/storybook": "*",
+    "@storybook/react": "*",
     "@types/node": "^7.0.12",
     "@types/react": "^15.0.21",
     "git-url-parse": "^6.2.2",

addons/links/.storybook/addons.js

@@ -0,0 +1 @@
+import '../register';

packages/addon-graphql/.storybook/config.js → addons/links/.storybook/config.js

@@ -1,2 +1,2 @@
-import * as storybook from '@storybook/storybook';
+import * as storybook from '@storybook/react';
 storybook.configure(() => require('./stories'), module);

packages/addon-links/.storybook/stories.js → addons/links/.storybook/stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@storybook/storybook';
+import { storiesOf } from '@storybook/react';
 import { linkTo } from '../src';
 
 storiesOf('Button', module)
@@ -12,7 +12,7 @@ storiesOf('Button', module)
   .add('Multiple Selection', () => (
     <MultipleStories onClick={linkTo('Button', (filter) => {
       return filter === 'First' ? 'First Story' : 'Second Story';
-    })}/> 
+    })}/>
   ));
 
 const MultipleStories = ({onClick}) => {

packages/addon-links/README.md → addons/links/README.md

@@ -7,8 +7,8 @@ The Story Links addon can be used to create links between stories. This addon wo
 You can use this addon without installing it.
 
 ```js
-import { storiesOf } from '@storybook/storybook'
-import { linkTo } from '@storybook/storybook-addon-links'
+import { storiesOf } from '@storybook/react'
+import { linkTo } from '@storybook/addon-links'
 
 storiesOf('Button', module)
   .add('First', () => (

packages/addon-links/package.json → addons/links/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@storybook/storybook-addon-links",
+  "name": "@storybook/addon-links",
   "version": "1.0.1",
   "description": "Story Links addon for storybook",
   "main": "dist/index.js",
@@ -21,9 +21,9 @@
   },
   "homepage": "https://github.com/kadirahq/storybook-addon-links#readme",
   "devDependencies": {
-    "@storybook/storybook": "^*",
+    "@storybook/react": "^*",
     "@storybook/addons": "*",
-    "@storybook/storybook-ui": "*",
+    "@storybook/ui": "*",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "shelljs": "^0.7.7"

addons/notes/.storybook/addons.js

@@ -0,0 +1 @@
+import '../src/register';

packages/addon-notes/.storybook/config.js → addons/notes/.storybook/config.js

@@ -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');