From 3fdd1a1f91ec42e5b34f69b24adf210cefe52b4b Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sun, 11 Jun 2017 22:58:13 +0200 Subject: [PATCH 1/4] ADD package --- lib/components/package.json | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 lib/components/package.json diff --git a/lib/components/package.json b/lib/components/package.json new file mode 100644 index 000000000000..e72d9332b284 --- /dev/null +++ b/lib/components/package.json @@ -0,0 +1,27 @@ +{ + "name": "@storybook/components", + "version": "3.1.3", + "description": "Core Storybook Components", + "license": "MIT", + "main": "dist/index.js", + "repository": { + "type": "git", + "url": "https://github.com/storybooks/storybook.git" + }, + "scripts": { + "prepublish": "node ../../scripts/prepublish.js" + }, + "dependencies": { + "glamor": "^2.20.25", + "glamorous": "^3.22.1", + "prop-types": "^15.5.10" + }, + "devDependencies": { + "react": "^15.5.4", + "react-dom": "^15.5.4" + }, + "peerDependencies": { + "react": "*", + "react-dom": "*" + } +} From 08f3f837d7402044aaeacd677ec5f1e134163529 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sun, 11 Jun 2017 23:47:07 +0200 Subject: [PATCH 2/4] WIP --- .eslintignore | 2 +- examples/cra-storybook/package.json | 1 + examples/cra-storybook/src/stories/index.js | 5 +- lib/components/src/demo/Button.js | 21 ++++ lib/components/src/demo/Welcome.js | 104 ++++++++++++++++++++ 5 files changed, 130 insertions(+), 3 deletions(-) create mode 100644 lib/components/src/demo/Button.js create mode 100644 lib/components/src/demo/Welcome.js diff --git a/.eslintignore b/.eslintignore index 93e974542d01..e2549766926e 100644 --- a/.eslintignore +++ b/.eslintignore @@ -3,7 +3,7 @@ build coverage node_modules **/example/** -**/demo/** +app/**/demo/** docs/public *.bundle.js diff --git a/examples/cra-storybook/package.json b/examples/cra-storybook/package.json index 29ba51e8cbf3..55ca7353de23 100644 --- a/examples/cra-storybook/package.json +++ b/examples/cra-storybook/package.json @@ -23,6 +23,7 @@ "@storybook/addon-links": "^3.0.0", "@storybook/addon-events": "^3.0.0", "@storybook/addons": "^3.0.0", + "@storybook/components": "^3.0.0", "@storybook/react": "^3.0.0", "react-scripts": "1.0.1" }, diff --git a/examples/cra-storybook/src/stories/index.js b/examples/cra-storybook/src/stories/index.js index e6344a41bb90..ee7e2b36807d 100644 --- a/examples/cra-storybook/src/stories/index.js +++ b/examples/cra-storybook/src/stories/index.js @@ -7,8 +7,9 @@ import { action } from '@storybook/addon-actions'; import { linkTo } from '@storybook/addon-links'; import WithEvents from '@storybook/addon-events'; -import Button from './Button'; -import Welcome from './Welcome'; +import Button from '@storybook/components/dist/demo/Button'; +import Welcome from '@storybook/components/dist/demo/Welcome'; +// import Welcome from './Welcome'; import App from '../App'; import Logger from './Logger'; diff --git a/lib/components/src/demo/Button.js b/lib/components/src/demo/Button.js new file mode 100644 index 000000000000..e845192199c4 --- /dev/null +++ b/lib/components/src/demo/Button.js @@ -0,0 +1,21 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import glamorous from 'glamorous'; + +const Button = glamorous(({ children, ...rest }) => )({ + border: '1px solid #eee', + borderRadius: 3, + backgroundColor: '#FFFFFF', + cursor: 'pointer', + fontSize: 15, + padding: '3px 10px', + margin: 10, +}); + +Button.displayName = 'Button'; +Button.propTypes = { + children: PropTypes.node.isRequired, + onClick: PropTypes.func, +}; + +export default Button; diff --git a/lib/components/src/demo/Welcome.js b/lib/components/src/demo/Welcome.js new file mode 100644 index 000000000000..ddf09bc89526 --- /dev/null +++ b/lib/components/src/demo/Welcome.js @@ -0,0 +1,104 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import glamorous from 'glamorous'; + +const Main = glamorous.article({ + margin: 15, + maxWidth: 600, + lineHeight: 1.4, + fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif', +}); + +const Title = glamorous.h1({}); + +const Note = glamorous.p({ + opacity: 0.5, +}); + +const InlineCode = glamorous.code({ + fontSize: 15, + fontWeight: 600, + padding: '2px 5px', + border: '1px solid #eae9e9', + borderRadius: 4, + backgroundColor: '#f3f2f2', + color: '#3a3a3a', +}); + +const Link = glamorous.a({ + color: '#1474f3', + textDecoration: 'none', + borderBottom: '1px solid #1474f3', + paddingBottom: 2, +}); + +const Welcome = props => +
+ Welcome to storybook +

This is a UI component dev environment for your app.

+

+ We've added some basic stories inside the + {' '} + src/stories + {' '} + directory. +
+ A story is a single state of one or more UI components. You can have as many stories as + you want. +
+ (Basically a story is like a visual test case.) +

+

+ See these sample + {' '} + stories + {' '} + for a component called + {' '} + Button + . +

+

+ Just like that, you can add your own components as stories. +
+ You can also edit those components and see changes right away. +
+ (Try editing the Button component + located at src/stories/Button.js.) +

+

+ Usually we create stories with smaller UI components in the app.
+ Have a look at the + {' '} + + Writing Stories + + {' '} + section in our documentation. +

+ + NOTE: +
+ Have a look at the + {' '} + .storybook/webpack.config.js + {' '} + to add webpack + loaders and plugins you are using in this project. + +
; + +Welcome.displayName = 'Welcome'; +Welcome.propTypes = { + showApp: PropTypes.func, +}; +Welcome.defaultProps = { + // eslint-disable-next-line no-console + showApp: () => console.log('Welcome to storybook!'), +}; + +export { Welcome as default }; From 294923bac37773308e84dcc791de8d1a23520c56 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 12 Jun 2017 17:52:48 +0200 Subject: [PATCH 3/4] Use new common demo-components --- addons/storyshots/package.json | 4 + .../stories/directly_required/Button.js | 28 ---- .../stories/directly_required/index.js | 4 +- .../stories/required_with_context/Button.js | 27 ---- .../required_with_context/Button.stories.js | 2 +- .../stories/required_with_context/Welcome.js | 127 ----------------- .../required_with_context/Welcome.stories.js | 2 +- app/react-native/package.json | 1 + app/react/demo/.gitignore | 15 -- app/react/demo/.storybook/addons.js | 2 - app/react/demo/.storybook/config.js | 7 - app/react/demo/README.md | 3 - app/react/demo/package.json | 25 ---- app/react/demo/public/favicon.ico | Bin 24838 -> 0 bytes app/react/demo/public/index.html | 31 ---- app/react/demo/src/App.css | 24 ---- app/react/demo/src/App.js | 21 --- app/react/demo/src/App.test.js | 8 -- app/react/demo/src/index.css | 5 - app/react/demo/src/index.js | 6 - app/react/demo/src/logo.svg | 7 - app/react/demo/src/stories/Button.js | 29 ---- app/react/demo/src/stories/Welcome.js | 113 --------------- app/react/demo/src/stories/index.js | 14 -- app/react/package.json | 1 + docs/components/Homepage/Demo/index.js | 5 +- examples/cra-storybook/src/stories/Button.js | 29 ---- examples/cra-storybook/src/stories/Welcome.js | 126 ----------------- examples/cra-storybook/src/stories/index.js | 2 +- examples/test-cra/package.json | 1 + .../src/__snapshots__/storyshots.test.js.snap | 133 +++--------------- examples/test-cra/src/stories/Button.js | 27 ---- .../test-cra/src/stories/ComponentWithRef.js | 2 +- examples/test-cra/src/stories/Welcome.js | 125 ---------------- examples/test-cra/src/stories/index.js | 6 +- .../METEOR/template/.stories/Button.js | 30 ---- .../METEOR/template/.stories/Welcome.js | 125 ---------------- .../METEOR/template/.stories/index.js | 4 +- .../REACT/template/stories/Button.js | 29 ---- .../REACT/template/stories/Welcome.js | 126 ----------------- .../REACT/template/stories/index.js | 6 +- .../template/src/stories/Button.js | 29 ---- .../template/src/stories/Welcome.js | 126 ----------------- .../template/src/stories/index.js | 6 +- .../WEBPACK_REACT/template/stories/Button.js | 27 ---- .../WEBPACK_REACT/template/stories/Welcome.js | 124 ---------------- .../WEBPACK_REACT/template/stories/index.js | 6 +- 47 files changed, 48 insertions(+), 1552 deletions(-) delete mode 100644 addons/storyshots/stories/directly_required/Button.js delete mode 100644 addons/storyshots/stories/required_with_context/Button.js delete mode 100644 addons/storyshots/stories/required_with_context/Welcome.js delete mode 100644 app/react/demo/.gitignore delete mode 100644 app/react/demo/.storybook/addons.js delete mode 100644 app/react/demo/.storybook/config.js delete mode 100644 app/react/demo/README.md delete mode 100644 app/react/demo/package.json delete mode 100644 app/react/demo/public/favicon.ico delete mode 100644 app/react/demo/public/index.html delete mode 100644 app/react/demo/src/App.css delete mode 100644 app/react/demo/src/App.js delete mode 100644 app/react/demo/src/App.test.js delete mode 100644 app/react/demo/src/index.css delete mode 100644 app/react/demo/src/index.js delete mode 100644 app/react/demo/src/logo.svg delete mode 100644 app/react/demo/src/stories/Button.js delete mode 100644 app/react/demo/src/stories/Welcome.js delete mode 100644 app/react/demo/src/stories/index.js delete mode 100644 examples/cra-storybook/src/stories/Button.js delete mode 100644 examples/cra-storybook/src/stories/Welcome.js delete mode 100644 examples/test-cra/src/stories/Button.js delete mode 100644 examples/test-cra/src/stories/Welcome.js delete mode 100644 lib/cli/generators/METEOR/template/.stories/Button.js delete mode 100644 lib/cli/generators/METEOR/template/.stories/Welcome.js delete mode 100644 lib/cli/generators/REACT/template/stories/Button.js delete mode 100644 lib/cli/generators/REACT/template/stories/Welcome.js delete mode 100644 lib/cli/generators/REACT_SCRIPTS/template/src/stories/Button.js delete mode 100644 lib/cli/generators/REACT_SCRIPTS/template/src/stories/Welcome.js delete mode 100644 lib/cli/generators/WEBPACK_REACT/template/stories/Button.js delete mode 100644 lib/cli/generators/WEBPACK_REACT/template/stories/Welcome.js diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json index dc70a7b05f83..1152ac11001e 100644 --- a/addons/storyshots/package.json +++ b/addons/storyshots/package.json @@ -20,6 +20,9 @@ "read-pkg-up": "^2.0.0" }, "devDependencies": { + "@storybook/addons": "^3.0.0", + "@storybook/channels": "^3.0.0", + "@storybook/components": "^3.0.0", "babel-cli": "^6.24.1", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-es2015": "^6.24.1", @@ -30,6 +33,7 @@ "peerDependencies": { "@storybook/addons": "^3.0.0", "@storybook/channels": "^3.0.0", + "@storybook/components": "^3.0.0", "babel-core": "^6.24.1", "react": "*", "react-test-renderer": "*" diff --git a/addons/storyshots/stories/directly_required/Button.js b/addons/storyshots/stories/directly_required/Button.js deleted file mode 100644 index 7141c1c94bc4..000000000000 --- a/addons/storyshots/stories/directly_required/Button.js +++ /dev/null @@ -1,28 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; - -const buttonStyles = { - border: '1px solid #eee', - borderRadius: 3, - backgroundColor: '#FFFFFF', - cursor: 'pointer', - fontSize: 15, - padding: '3px 10px', - margin: 10, -}; - -const Button = ({ children, onClick }) => - ; - -Button.defaultProps = { - onClick: null, -}; - -Button.propTypes = { - children: PropTypes.string.isRequired, - onClick: PropTypes.func, -}; - -export default Button; diff --git a/addons/storyshots/stories/directly_required/index.js b/addons/storyshots/stories/directly_required/index.js index ac81e79db747..03e8ea517a78 100644 --- a/addons/storyshots/stories/directly_required/index.js +++ b/addons/storyshots/stories/directly_required/index.js @@ -1,7 +1,9 @@ import React from 'react'; + import { storiesOf } from '@storybook/react'; // eslint-disable-line import { action } from '@storybook/addon-actions'; // eslint-disable-line -import Button from './Button'; + +import Button from '@storybook/components/dist/demo/Button'; storiesOf('Another Button', module) .add('with text', () => ) diff --git a/addons/storyshots/stories/required_with_context/Button.js b/addons/storyshots/stories/required_with_context/Button.js deleted file mode 100644 index 5bd0eb1d94e9..000000000000 --- a/addons/storyshots/stories/required_with_context/Button.js +++ /dev/null @@ -1,27 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; - -const buttonStyles = { - border: '1px solid #eee', - borderRadius: 3, - backgroundColor: '#FFFFFF', - cursor: 'pointer', - fontSize: 15, - padding: '3px 10px', - margin: 10, -}; - -const Button = ({ children, onClick }) => - ; - -Button.propTypes = { - children: PropTypes.string.isRequired, - onClick: PropTypes.func, -}; -Button.defaultProps = { - onClick: null, -}; - -export default Button; diff --git a/addons/storyshots/stories/required_with_context/Button.stories.js b/addons/storyshots/stories/required_with_context/Button.stories.js index c7a0fa0e636d..46eeb030ecc7 100644 --- a/addons/storyshots/stories/required_with_context/Button.stories.js +++ b/addons/storyshots/stories/required_with_context/Button.stories.js @@ -3,7 +3,7 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; // eslint-disable-line import { action } from '@storybook/addon-actions'; // eslint-disable-line -import Button from './Button'; +import Button from '@storybook/components/dist/demo/Button'; storiesOf('Button', module) .add('with text', () => ) diff --git a/addons/storyshots/stories/required_with_context/Welcome.js b/addons/storyshots/stories/required_with_context/Welcome.js deleted file mode 100644 index da876d5e6849..000000000000 --- a/addons/storyshots/stories/required_with_context/Welcome.js +++ /dev/null @@ -1,127 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ - -import React from 'react'; -import PropTypes from 'prop-types'; - -const styles = { - main: { - margin: 15, - maxWidth: 600, - lineHeight: 1.4, - fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif', - }, - - logo: { - width: 200, - }, - - link: { - color: '#1474f3', - textDecoration: 'none', - borderBottom: '1px solid #1474f3', - paddingBottom: 2, - }, - - code: { - fontSize: 15, - fontWeight: 600, - padding: '2px 5px', - border: '1px solid #eae9e9', - borderRadius: 4, - backgroundColor: '#f3f2f2', - color: '#3a3a3a', - }, - - note: { - opacity: 0.5, - }, -}; - -// eslint-disable-next-line no-console -const log = () => console.log('Welcome to storybook!'); - -export default class Welcome extends React.Component { - constructor(props) { - super(props); - this.clickHandler = event => { - event.preventDefault(); - - const { showApp } = this.props; - showApp(); - }; - } - - render() { - return ( -
-

Welcome to STORYBOOK

-

- This is a UI component dev environment for your app. -

-

- We've added some basic stories inside the - {' '} - src/stories - {' '} - directory. -
- A story is a single state of one or more UI components. You can have as many stories as - you want. -
- (Basically a story is like a visual test case.) -

-

- See these sample - {' '} - stories - {' '} - for a component called - {' '} - Button - . -

-

- Just like that, you can add your own components as stories. -
- You can also edit those components and see changes right away. -
- (Try editing the Button component - located at src/stories/Button.js.) -

-

- This is just one thing you can do with Storybook. -
- Have a look at the - {' '} - - Storybook - - {' '} - repo for more information. -

-

- NOTE: -
- Have a look at the - {' '} - .storybook/webpack.config.js - {' '} - to add webpack - loaders and plugins you are using in this project. -

-
- ); - } -} - -Welcome.propTypes = { - showApp: PropTypes.function, -}; -Welcome.defaultProps = { - showApp: log, -}; diff --git a/addons/storyshots/stories/required_with_context/Welcome.stories.js b/addons/storyshots/stories/required_with_context/Welcome.stories.js index baf0083525df..b3e7b0ca223c 100644 --- a/addons/storyshots/stories/required_with_context/Welcome.stories.js +++ b/addons/storyshots/stories/required_with_context/Welcome.stories.js @@ -3,6 +3,6 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; // eslint-disable-line import { linkTo } from '@storybook/addon-links'; // eslint-disable-line -import Welcome from './Welcome'; +import Welcome from '@storybook/components/dist/demo/Welcome'; storiesOf('Welcome', module).add('to Storybook', () => ); diff --git a/app/react-native/package.json b/app/react-native/package.json index 6d8e420eb25a..31ad61af7b4d 100644 --- a/app/react-native/package.json +++ b/app/react-native/package.json @@ -28,6 +28,7 @@ "@storybook/addon-links": "^3.1.2", "@storybook/addons": "^3.1.2", "@storybook/channel-websocket": "^3.1.2", + "@storybook/components": "^3.0.0", "@storybook/ui": "^3.1.3", "autoprefixer": "^7.0.1", "babel-core": "^6.24.1", diff --git a/app/react/demo/.gitignore b/app/react/demo/.gitignore deleted file mode 100644 index 6c96c5cff124..000000000000 --- a/app/react/demo/.gitignore +++ /dev/null @@ -1,15 +0,0 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. - -# dependencies -node_modules - -# testing -coverage - -# production -build - -# misc -.DS_Store -.env -npm-debug.log diff --git a/app/react/demo/.storybook/addons.js b/app/react/demo/.storybook/addons.js deleted file mode 100644 index 6aed412d04af..000000000000 --- a/app/react/demo/.storybook/addons.js +++ /dev/null @@ -1,2 +0,0 @@ -import '@storybook/addon-actions/register'; -import '@storybook/addon-links/register'; diff --git a/app/react/demo/.storybook/config.js b/app/react/demo/.storybook/config.js deleted file mode 100644 index 35430210ce65..000000000000 --- a/app/react/demo/.storybook/config.js +++ /dev/null @@ -1,7 +0,0 @@ -import { configure } from '@storybook/react'; - -function loadStories() { - require('../src/stories'); -} - -configure(loadStories, module); diff --git a/app/react/demo/README.md b/app/react/demo/README.md deleted file mode 100644 index 7da7ac7ef026..000000000000 --- a/app/react/demo/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# Storybook Demo - -This is a demo app created using `create-react-app` to test new versions of Storybook. Run `npm install` to sync Storybook module with the source code and run `npm run storybook` to start the Storybook. diff --git a/app/react/demo/package.json b/app/react/demo/package.json deleted file mode 100644 index fb92e767005f..000000000000 --- a/app/react/demo/package.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "demo", - "version": "0.1.0", - "private": true, - "devDependencies": { - "react-scripts": "0.9.5", - "@storybook/react": "file:../", - "@storybook/addon-actions": "file:../../addon-actions", - "@storybook/addon-links": "file:../../addon-links", - "@storybook/addons": "file:../../addons" - }, - "dependencies": { - "prop-types": "^15.5.8", - "react": "^15.5.4", - "react-dom": "^15.5.4" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject", - "storybook": "start-storybook -p 9009 -s public", - "build-storybook": "build-storybook -s public" - } -} diff --git a/app/react/demo/public/favicon.ico b/app/react/demo/public/favicon.ico deleted file mode 100644 index 5c125de5d897c1ff5692a656485b3216123dcd89..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 24838 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 - - - - - - - React App - - -
- - - diff --git a/app/react/demo/src/App.css b/app/react/demo/src/App.css deleted file mode 100644 index 15adfdc710ca..000000000000 --- a/app/react/demo/src/App.css +++ /dev/null @@ -1,24 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 80px; -} - -.App-header { - background-color: #222; - height: 150px; - padding: 20px; - color: white; -} - -.App-intro { - font-size: large; -} - -@keyframes App-logo-spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} diff --git a/app/react/demo/src/App.js b/app/react/demo/src/App.js deleted file mode 100644 index d7d52a7f38a3..000000000000 --- a/app/react/demo/src/App.js +++ /dev/null @@ -1,21 +0,0 @@ -import React, { Component } from 'react'; -import logo from './logo.svg'; -import './App.css'; - -class App extends Component { - render() { - return ( -
-
- logo -

Welcome to React

-
-

- To get started, edit src/App.js and save to reload. -

-
- ); - } -} - -export default App; diff --git a/app/react/demo/src/App.test.js b/app/react/demo/src/App.test.js deleted file mode 100644 index b84af98d7203..000000000000 --- a/app/react/demo/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); -}); diff --git a/app/react/demo/src/index.css b/app/react/demo/src/index.css deleted file mode 100644 index b4cc7250b98c..000000000000 --- a/app/react/demo/src/index.css +++ /dev/null @@ -1,5 +0,0 @@ -body { - margin: 0; - padding: 0; - font-family: sans-serif; -} diff --git a/app/react/demo/src/index.js b/app/react/demo/src/index.js deleted file mode 100644 index 5d76a18a8534..000000000000 --- a/app/react/demo/src/index.js +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; -import './index.css'; - -ReactDOM.render(, document.getElementById('root')); diff --git a/app/react/demo/src/logo.svg b/app/react/demo/src/logo.svg deleted file mode 100644 index 6b60c1042f58..000000000000 --- a/app/react/demo/src/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/app/react/demo/src/stories/Button.js b/app/react/demo/src/stories/Button.js deleted file mode 100644 index dbe0bc689d58..000000000000 --- a/app/react/demo/src/stories/Button.js +++ /dev/null @@ -1,29 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; - -const buttonStyles = { - border: '1px solid #eee', - borderRadius: 3, - backgroundColor: '#FFFFFF', - cursor: 'pointer', - fontSize: 15, - padding: '3px 10px', - margin: 10, -}; - -const Button = ({ children, onClick }) => ( - -); - -Button.defaultProps = { - onClick: null, -}; - -Button.propTypes = { - children: PropTypes.string.isRequired, - onClick: PropTypes.func, -}; - -export default Button; diff --git a/app/react/demo/src/stories/Welcome.js b/app/react/demo/src/stories/Welcome.js deleted file mode 100644 index 9e944c427e65..000000000000 --- a/app/react/demo/src/stories/Welcome.js +++ /dev/null @@ -1,113 +0,0 @@ -import React from 'react'; - -const styles = { - main: { - margin: 15, - maxWidth: 600, - lineHeight: 1.4, - fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif', - }, - - logo: { - width: 200, - }, - - link: { - color: '#1474f3', - textDecoration: 'none', - borderBottom: '1px solid #1474f3', - paddingBottom: 2, - }, - - code: { - fontSize: 15, - fontWeight: 600, - padding: '2px 5px', - border: '1px solid #eae9e9', - borderRadius: 4, - backgroundColor: '#f3f2f2', - color: '#3a3a3a', - }, - - codeBlock: { - backgroundColor: '#f3f2f2', - padding: '1px 10px', - margin: '10px 0', - }, -}; - -const codeBlock = ` -// Add this code to "src/stories/index.js" - -import '../index.css'; -import App from '../App'; - -storiesOf('App', module) - .add('default view', () => ( - <App /> - )) -`; - -export default class Welcome extends React.Component { - showApp(e) { - e.preventDefault(); - if (this.props.showApp) this.props.showApp(); - } - - render() { - return ( -
-

Welcome to STORYBOOK

-

- This is a UI component dev environment for your app. -

-

- We've added some basic stories inside the - {' '} - src/stories - {' '} - directory. -
- A story is a single state of one or more UI components. - {' '} - You can have as many stories as you want. -
- (Basically a story is like a visual test case.) -

-

- See these sample - {' '} - stories - {' '} - for a component called - {' '} - Button - . -

-

- Just like that, you can add your own components as stories. -
- Here's how to add your App component as a story. -

${codeBlock}` }} - /> -

-

- Usually we create stories with smaller UI components in the app.
- Have a look at the - {' '} - - Writing Stories - - {' '} - section in our documentation. -

-
- ); - } -} diff --git a/app/react/demo/src/stories/index.js b/app/react/demo/src/stories/index.js deleted file mode 100644 index 87e31def937b..000000000000 --- a/app/react/demo/src/stories/index.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; - -import { storiesOf } from '@storybook/react'; -import { action } from '@storybook/addon-actions'; -import { linkTo } from '@storybook/addon-links'; - -import Button from './Button'; -import Welcome from './Welcome'; - -storiesOf('Welcome', module).add('to Storybook', () => ); - -storiesOf('Button', module) - .add('with text', () => ) - .add('with some emoji', () => ); diff --git a/app/react/package.json b/app/react/package.json index 595d02d57263..af8c5c4cc78e 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -26,6 +26,7 @@ "@storybook/addon-links": "^3.1.2", "@storybook/addons": "^3.1.2", "@storybook/channel-postmessage": "^3.1.2", + "@storybook/components": "^3.0.0", "@storybook/ui": "^3.1.3", "airbnb-js-shims": "^1.1.1", "autoprefixer": "^7.1.1", diff --git a/docs/components/Homepage/Demo/index.js b/docs/components/Homepage/Demo/index.js index e0b426a25c48..f546e877e1cc 100644 --- a/docs/components/Homepage/Demo/index.js +++ b/docs/components/Homepage/Demo/index.js @@ -2,14 +2,13 @@ import React from 'react'; import demoImg from './images/demo.gif'; import './style.css'; -const Demo = () => ( +const Demo = () =>
-
-); +
; export default Demo; diff --git a/examples/cra-storybook/src/stories/Button.js b/examples/cra-storybook/src/stories/Button.js deleted file mode 100644 index 1fc8e5329a4a..000000000000 --- a/examples/cra-storybook/src/stories/Button.js +++ /dev/null @@ -1,29 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ - -import PropTypes from 'prop-types'; -import React from 'react'; - -const buttonStyles = { - border: '1px solid #eee', - borderRadius: 3, - backgroundColor: '#FFFFFF', - cursor: 'pointer', - fontSize: 15, - padding: '3px 10px', - margin: 10, -}; - -const Button = ({ children, onClick }) => - ; - -Button.propTypes = { - children: PropTypes.string.isRequired, - onClick: PropTypes.func, -}; -Button.defaultProps = { - onClick: () => {}, -}; - -export default Button; diff --git a/examples/cra-storybook/src/stories/Welcome.js b/examples/cra-storybook/src/stories/Welcome.js deleted file mode 100644 index 0679fdbeee3b..000000000000 --- a/examples/cra-storybook/src/stories/Welcome.js +++ /dev/null @@ -1,126 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ - -import React from 'react'; -import PropTypes from 'prop-types'; - -const styles = { - main: { - margin: 15, - maxWidth: 600, - lineHeight: 1.4, - fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif', - }, - - logo: { - width: 200, - }, - - link: { - color: '#1474f3', - textDecoration: 'none', - borderBottom: '1px solid #1474f3', - paddingBottom: 2, - }, - - code: { - fontSize: 15, - fontWeight: 600, - padding: '2px 5px', - border: '1px solid #eae9e9', - borderRadius: 4, - backgroundColor: '#f3f2f2', - color: '#3a3a3a', - }, - - note: { - opacity: 0.5, - }, -}; - -// eslint-disable-next-line no-console -const log = () => console.log('Welcome to storybook!'); - -export default class Welcome extends React.Component { - constructor(props) { - super(props); - this.clickHandler = event => { - event.preventDefault(); - - const { showApp } = this.props; - showApp(); - }; - } - - render() { - return ( -
-

Welcome to STORYBOOK

-

- This is a UI component dev environment for your app. -

-

- We've added some basic stories inside the - {' '} - src/stories - {' '} - directory. -
- A story is a single state of one or more UI components. You can have as many stories as - you want. -
- (Basically a story is like a visual test case.) -

-

- See these sample - {' '} - stories - {' '} - for a component called - {' '} - Button - . -

-

- Just like that, you can add your own components as stories. -
- You can also edit those components and see changes right away. -
- (Try editing the Button component - located at src/stories/Button.js.) -

-

- Usually we create stories with smaller UI components in the app.
- Have a look at the - {' '} - - Writing Stories - - {' '} - section in our documentation. -

-

- NOTE: -
- Have a look at the - {' '} - .storybook/webpack.config.js - {' '} - to add webpack - loaders and plugins you are using in this project. -

-
- ); - } -} - -Welcome.propTypes = { - showApp: PropTypes.function, -}; -Welcome.defaultProps = { - showApp: log, -}; diff --git a/examples/cra-storybook/src/stories/index.js b/examples/cra-storybook/src/stories/index.js index ee7e2b36807d..6138c0666627 100644 --- a/examples/cra-storybook/src/stories/index.js +++ b/examples/cra-storybook/src/stories/index.js @@ -9,7 +9,7 @@ import WithEvents from '@storybook/addon-events'; import Button from '@storybook/components/dist/demo/Button'; import Welcome from '@storybook/components/dist/demo/Welcome'; -// import Welcome from './Welcome'; + import App from '../App'; import Logger from './Logger'; diff --git a/examples/test-cra/package.json b/examples/test-cra/package.json index a26cae7fe97a..3d01de846391 100644 --- a/examples/test-cra/package.json +++ b/examples/test-cra/package.json @@ -23,6 +23,7 @@ "@storybook/addons": "file:../../lib/addons", "@storybook/channel-postmessage": "file:../../lib/channel-postmessage", "@storybook/channels": "file:../../lib/channels", + "@storybook/components": "file:../../lib/components", "@storybook/react": "file:../../app/react", "@storybook/ui": "file:../../lib/ui", "react-scripts": "1.0.2", diff --git a/examples/test-cra/src/__snapshots__/storyshots.test.js.snap b/examples/test-cra/src/__snapshots__/storyshots.test.js.snap index ba78f9638b61..a09cbc66cc58 100644 --- a/examples/test-cra/src/__snapshots__/storyshots.test.js.snap +++ b/examples/test-cra/src/__snapshots__/storyshots.test.js.snap @@ -2,18 +2,8 @@ exports[`Storyshots Button with some emoji 1`] = ` @@ -21,18 +11,8 @@ exports[`Storyshots Button with some emoji 1`] = ` exports[`Storyshots Button with text 1`] = ` @@ -41,18 +21,13 @@ exports[`Storyshots Button with text 1`] = ` exports[`Storyshots ComponentWithRef basic 1`] = `
`; exports[`Storyshots Welcome to Storybook 1`] = ` -
-

- Welcome to STORYBOOK +

+ Welcome to storybook

This is a UI component dev environment for your app. @@ -61,17 +36,7 @@ exports[`Storyshots Welcome to Storybook 1`] = ` We've added some basic stories inside the src/stories @@ -86,16 +51,9 @@ exports[`Storyshots Welcome to Storybook 1`] = ` See these sample stories @@ -104,17 +62,7 @@ exports[`Storyshots Welcome to Storybook 1`] = ` for a component called Button @@ -127,67 +75,36 @@ exports[`Storyshots Welcome to Storybook 1`] = `
(Try editing the Button component located at src/stories/Button.js .)

- This is just one thing you can do with Storybook. + Usually we create stories with smaller UI components in the app.
Have a look at the - Storybook + Writing Stories - repo for more information. + section in our documentation.

NOTE: @@ -196,22 +113,12 @@ exports[`Storyshots Welcome to Storybook 1`] = ` Have a look at the .storybook/webpack.config.js to add webpack loaders and plugins you are using in this project.

-
+ `; diff --git a/examples/test-cra/src/stories/Button.js b/examples/test-cra/src/stories/Button.js deleted file mode 100644 index 24b7f4833db0..000000000000 --- a/examples/test-cra/src/stories/Button.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const buttonStyles = { - border: '1px solid #eee', - borderRadius: 3, - backgroundColor: '#FFFFFF', - cursor: 'pointer', - fontSize: 15, - padding: '3px 10px', - margin: 10, -}; - -const Button = ({ children, onClick }) => - ; - -Button.propTypes = { - children: PropTypes.string.isRequired, - onClick: PropTypes.func, -}; -Button.defaultProps = { - onClick: () => {}, -}; - -export default Button; diff --git a/examples/test-cra/src/stories/ComponentWithRef.js b/examples/test-cra/src/stories/ComponentWithRef.js index bdee0751d792..e9f0679af15f 100644 --- a/examples/test-cra/src/stories/ComponentWithRef.js +++ b/examples/test-cra/src/stories/ComponentWithRef.js @@ -5,7 +5,7 @@ class ComponentWithRef extends Component { // Read the scroll width off the DOM element this.scrollWidth = this.ref.scrollWidth; } - scrollWidth: 0; + scrollWidth = 0; render() { return
(this.ref = r)} />; } diff --git a/examples/test-cra/src/stories/Welcome.js b/examples/test-cra/src/stories/Welcome.js deleted file mode 100644 index a864898949dd..000000000000 --- a/examples/test-cra/src/stories/Welcome.js +++ /dev/null @@ -1,125 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const styles = { - main: { - margin: 15, - maxWidth: 600, - lineHeight: 1.4, - fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif', - }, - - logo: { - width: 200, - }, - - link: { - color: '#1474f3', - textDecoration: 'none', - borderBottom: '1px solid #1474f3', - paddingBottom: 2, - }, - - code: { - fontSize: 15, - fontWeight: 600, - padding: '2px 5px', - border: '1px solid #eae9e9', - borderRadius: 4, - backgroundColor: '#f3f2f2', - color: '#3a3a3a', - }, - - note: { - opacity: 0.5, - }, -}; - -// eslint-disable-next-line no-console -const log = () => console.log('Welcome to storybook!'); - -export default class Welcome extends React.Component { - constructor(props) { - super(props); - this.clickHandler = event => { - event.preventDefault(); - - const { showApp } = this.props; - showApp(); - }; - } - - render() { - return ( -
-

Welcome to STORYBOOK

-

- This is a UI component dev environment for your app. -

-

- We've added some basic stories inside the - {' '} - src/stories - {' '} - directory. -
- A story is a single state of one or more UI components. You can have as many stories as - you want. -
- (Basically a story is like a visual test case.) -

-

- See these sample - {' '} - stories - {' '} - for a component called - {' '} - Button - . -

-

- Just like that, you can add your own components as stories. -
- You can also edit those components and see changes right away. -
- (Try editing the Button component - located at src/stories/Button.js.) -

-

- This is just one thing you can do with Storybook. -
- Have a look at the - {' '} - - Storybook - - {' '} - repo for more information. -

-

- NOTE: -
- Have a look at the - {' '} - .storybook/webpack.config.js - {' '} - to add webpack - loaders and plugins you are using in this project. -

-
- ); - } -} - -Welcome.propTypes = { - showApp: PropTypes.function, -}; -Welcome.defaultProps = { - showApp: log, -}; diff --git a/examples/test-cra/src/stories/index.js b/examples/test-cra/src/stories/index.js index e72f193c5e53..53432354ff12 100644 --- a/examples/test-cra/src/stories/index.js +++ b/examples/test-cra/src/stories/index.js @@ -1,13 +1,11 @@ -/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ - import React from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { linkTo } from '@storybook/addon-links'; -import Button from './Button'; -import Welcome from './Welcome'; +import Button from '@storybook/components/dist/demo/Button'; +import Welcome from '@storybook/components/dist/demo/Welcome'; import ComponentWithRef from './ComponentWithRef'; storiesOf('Welcome', module).add('to Storybook', () => ); diff --git a/lib/cli/generators/METEOR/template/.stories/Button.js b/lib/cli/generators/METEOR/template/.stories/Button.js deleted file mode 100644 index 87777532c2f5..000000000000 --- a/lib/cli/generators/METEOR/template/.stories/Button.js +++ /dev/null @@ -1,30 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ - -import PropTypes from 'prop-types'; -import React from 'react'; - -const buttonStyles = { - border: '1px solid #eee', - borderRadius: 3, - backgroundColor: '#FFFFFF', - cursor: 'pointer', - fontSize: 15, - padding: '3px 10px', - margin: 10, -}; - -const Button = ({ children, onClick }) => ( - -); - -Button.propTypes = { - children: PropTypes.string.isRequired, - onClick: PropTypes.func, -}; -Button.defaultProps = { - onClick: () => {}, -}; - -export default Button; diff --git a/lib/cli/generators/METEOR/template/.stories/Welcome.js b/lib/cli/generators/METEOR/template/.stories/Welcome.js deleted file mode 100644 index dfb9021530ed..000000000000 --- a/lib/cli/generators/METEOR/template/.stories/Welcome.js +++ /dev/null @@ -1,125 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ - -import React from 'react'; -import PropTypes from 'prop-types'; - -const styles = { - main: { - margin: 15, - maxWidth: 600, - lineHeight: 1.4, - fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif', - }, - - logo: { - width: 200, - }, - - link: { - color: '#1474f3', - textDecoration: 'none', - borderBottom: '1px solid #1474f3', - paddingBottom: 2, - }, - - code: { - fontSize: 15, - fontWeight: 600, - padding: '2px 5px', - border: '1px solid #eae9e9', - borderRadius: 4, - backgroundColor: '#f3f2f2', - color: '#3a3a3a', - }, - - note: { - opacity: 0.5, - }, -}; - -const log = () => console.log('Welcome to storybook!'); - -export default class Welcome extends React.Component { - constructor(props) { - super(props); - this.clickHandler = event => { - event.preventDefault(); - - const { showApp } = this.props; - showApp(); - }; - } - - render() { - return ( -
-

Welcome to STORYBOOK

-

- This is a UI component dev environment for your app. -

-

- We've added some basic stories inside the - {' '} - src/stories - {' '} - directory. -
- A story is a single state of one or more UI components. You can have as many stories as you want. -
- (Basically a story is like a visual test case.) -

-

- See these sample - {' '} - stories - {' '} - for a component called - {' '} - Button - . -

-

- Just like that, you can add your own components as stories. -
- You can also edit those components and see changes right away. -
- (Try editing the Button component - located at src/stories/Button.js.) -

-

- This is just one thing you can do with Storybook. -
- Have a look at the - {' '} - - Storybook - - {' '} - repo for more information. -

-

- NOTE: -
- Have a look at the - {' '} - .storybook/webpack.config.js - {' '} - to add webpack - loaders and plugins you are using in this project. -

-
- ); - } -} - -Welcome.propTypes = { - showApp: PropTypes.func, -}; -Welcome.defaultProps = { - showApp: log, -}; diff --git a/lib/cli/generators/METEOR/template/.stories/index.js b/lib/cli/generators/METEOR/template/.stories/index.js index 362bce42fba4..9ae3e98110c2 100644 --- a/lib/cli/generators/METEOR/template/.stories/index.js +++ b/lib/cli/generators/METEOR/template/.stories/index.js @@ -6,8 +6,8 @@ import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { linkTo } from '@storybook/addon-links'; -import Button from './Button'; -import Welcome from './Welcome'; +import Button from '@storybook/components/dist/demo/Button'; +import Welcome from '@storybook/components/dist/demo/Welcome'; storiesOf('Welcome', module) .add('to Storybook', () => ( diff --git a/lib/cli/generators/REACT/template/stories/Button.js b/lib/cli/generators/REACT/template/stories/Button.js deleted file mode 100644 index 1fc8e5329a4a..000000000000 --- a/lib/cli/generators/REACT/template/stories/Button.js +++ /dev/null @@ -1,29 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ - -import PropTypes from 'prop-types'; -import React from 'react'; - -const buttonStyles = { - border: '1px solid #eee', - borderRadius: 3, - backgroundColor: '#FFFFFF', - cursor: 'pointer', - fontSize: 15, - padding: '3px 10px', - margin: 10, -}; - -const Button = ({ children, onClick }) => - ; - -Button.propTypes = { - children: PropTypes.string.isRequired, - onClick: PropTypes.func, -}; -Button.defaultProps = { - onClick: () => {}, -}; - -export default Button; diff --git a/lib/cli/generators/REACT/template/stories/Welcome.js b/lib/cli/generators/REACT/template/stories/Welcome.js deleted file mode 100644 index 9f9de6526a80..000000000000 --- a/lib/cli/generators/REACT/template/stories/Welcome.js +++ /dev/null @@ -1,126 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ - -import React from 'react'; -import PropTypes from 'prop-types'; - -const styles = { - main: { - margin: 15, - maxWidth: 600, - lineHeight: 1.4, - fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif', - }, - - logo: { - width: 200, - }, - - link: { - color: '#1474f3', - textDecoration: 'none', - borderBottom: '1px solid #1474f3', - paddingBottom: 2, - }, - - code: { - fontSize: 15, - fontWeight: 600, - padding: '2px 5px', - border: '1px solid #eae9e9', - borderRadius: 4, - backgroundColor: '#f3f2f2', - color: '#3a3a3a', - }, - - note: { - opacity: 0.5, - }, -}; - -const log = () => console.log('Welcome to storybook!'); - -export default class Welcome extends React.Component { - constructor(props) { - super(props); - this.clickHandler = event => { - event.preventDefault(); - - const { showApp } = this.props; - showApp(); - }; - } - - render() { - return ( -
-

Welcome to STORYBOOK

-

- This is a UI component dev environment for your app. -

-

- We've added some basic stories inside the - {' '} - src/stories - {' '} - directory. -
- A story is a single state of one or more UI components. You can have as many stories as - you want. -
- (Basically a story is like a visual test case.) -

-

- See these sample - {' '} - stories - {' '} - for a component called - {' '} - Button - . -

-

- Just like that, you can add your own components as stories. -
- You can also edit those components and see changes right away. -
- (Try editing the Button component - located at src/stories/Button.js.) -

-

- This is just one thing you can do with Storybook. -
- Have a look at the - {' '} - - Storybook - - {' '} - repo for more information. -

-

- NOTE: -
- Have a look at the - {' '} - .storybook/webpack.config.js - {' '} - to add webpack - loaders and plugins you are using in this project. -

-
- ); - } -} - -Welcome.propTypes = { - showApp: PropTypes.function, -}; -Welcome.defaultProps = { - showApp: log, -}; diff --git a/lib/cli/generators/REACT/template/stories/index.js b/lib/cli/generators/REACT/template/stories/index.js index 29f8f2417b8e..bd39ba7885d4 100644 --- a/lib/cli/generators/REACT/template/stories/index.js +++ b/lib/cli/generators/REACT/template/stories/index.js @@ -1,9 +1,11 @@ import React from 'react'; + import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { linkTo } from '@storybook/addon-links'; -import Button from './Button'; -import Welcome from './Welcome'; + +import Button from '@storybook/components/dist/demo/Button'; +import Welcome from '@storybook/components/dist/demo/Welcome'; storiesOf('Welcome', module).add('to Storybook', () => ); diff --git a/lib/cli/generators/REACT_SCRIPTS/template/src/stories/Button.js b/lib/cli/generators/REACT_SCRIPTS/template/src/stories/Button.js deleted file mode 100644 index 1fc8e5329a4a..000000000000 --- a/lib/cli/generators/REACT_SCRIPTS/template/src/stories/Button.js +++ /dev/null @@ -1,29 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ - -import PropTypes from 'prop-types'; -import React from 'react'; - -const buttonStyles = { - border: '1px solid #eee', - borderRadius: 3, - backgroundColor: '#FFFFFF', - cursor: 'pointer', - fontSize: 15, - padding: '3px 10px', - margin: 10, -}; - -const Button = ({ children, onClick }) => - ; - -Button.propTypes = { - children: PropTypes.string.isRequired, - onClick: PropTypes.func, -}; -Button.defaultProps = { - onClick: () => {}, -}; - -export default Button; diff --git a/lib/cli/generators/REACT_SCRIPTS/template/src/stories/Welcome.js b/lib/cli/generators/REACT_SCRIPTS/template/src/stories/Welcome.js deleted file mode 100644 index ad2e19ccbc6f..000000000000 --- a/lib/cli/generators/REACT_SCRIPTS/template/src/stories/Welcome.js +++ /dev/null @@ -1,126 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ - -import React from 'react'; -import PropTypes from 'prop-types'; - -const styles = { - main: { - margin: 15, - maxWidth: 600, - lineHeight: 1.4, - fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif', - }, - - logo: { - width: 200, - }, - - link: { - color: '#1474f3', - textDecoration: 'none', - borderBottom: '1px solid #1474f3', - paddingBottom: 2, - }, - - code: { - fontSize: 15, - fontWeight: 600, - padding: '2px 5px', - border: '1px solid #eae9e9', - borderRadius: 4, - backgroundColor: '#f3f2f2', - color: '#3a3a3a', - }, - - note: { - opacity: 0.5, - }, -}; - -const log = () => console.log('Welcome to storybook!'); - -export default class Welcome extends React.Component { - constructor(props) { - super(props); - this.clickHandler = event => { - event.preventDefault(); - - const { showApp } = this.props; - showApp(); - }; - } - - render() { - return ( -
-

Welcome to STORYBOOK

-

- This is a UI component dev environment for your app. -

-

- We've added some basic stories inside the - {' '} - src/stories - {' '} - directory. -
- A story is a single state of one or more UI components. You can have as many stories as - you want. -
- (Basically a story is like a visual test case.) -

-

- See these sample - {' '} - stories - {' '} - for a component called - {' '} - Button - . -

-

- Just like that, you can add your own components as stories. -
- You can also edit those components and see changes right away. -
- (Try editing the Button component - located at src/stories/Button.js.) -

-

- This is just one thing you can do with Storybook. -
- Have a look at the - {' '} - - Storybook - - {' '} - repo for more information. -

-

- NOTE: -
- Have a look at the - {' '} - .storybook/webpack.config.js - {' '} - to add webpack - loaders and plugins you are using in this project. -

-
- ); - } -} - -Welcome.propTypes = { - showApp: PropTypes.func, -}; -Welcome.defaultProps = { - showApp: log, -}; diff --git a/lib/cli/generators/REACT_SCRIPTS/template/src/stories/index.js b/lib/cli/generators/REACT_SCRIPTS/template/src/stories/index.js index e1e8ecdde4da..bd39ba7885d4 100644 --- a/lib/cli/generators/REACT_SCRIPTS/template/src/stories/index.js +++ b/lib/cli/generators/REACT_SCRIPTS/template/src/stories/index.js @@ -1,13 +1,11 @@ -/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ - import React from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { linkTo } from '@storybook/addon-links'; -import Button from './Button'; -import Welcome from './Welcome'; +import Button from '@storybook/components/dist/demo/Button'; +import Welcome from '@storybook/components/dist/demo/Welcome'; storiesOf('Welcome', module).add('to Storybook', () => ); diff --git a/lib/cli/generators/WEBPACK_REACT/template/stories/Button.js b/lib/cli/generators/WEBPACK_REACT/template/stories/Button.js deleted file mode 100644 index c53d6964717f..000000000000 --- a/lib/cli/generators/WEBPACK_REACT/template/stories/Button.js +++ /dev/null @@ -1,27 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; - -const buttonStyles = { - border: '1px solid #eee', - borderRadius: 3, - backgroundColor: '#FFFFFF', - cursor: 'pointer', - fontSize: 15, - padding: '3px 10px', - margin: 10, -}; - -const Button = ({ children, onClick }) => - ; - -Button.propTypes = { - children: PropTypes.string.isRequired, - onClick: PropTypes.func, -}; -Button.defaultProps = { - onClick: () => {}, -}; - -export default Button; diff --git a/lib/cli/generators/WEBPACK_REACT/template/stories/Welcome.js b/lib/cli/generators/WEBPACK_REACT/template/stories/Welcome.js deleted file mode 100644 index ea3c58337d2a..000000000000 --- a/lib/cli/generators/WEBPACK_REACT/template/stories/Welcome.js +++ /dev/null @@ -1,124 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const styles = { - main: { - margin: 15, - maxWidth: 600, - lineHeight: 1.4, - fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif', - }, - - logo: { - width: 200, - }, - - link: { - color: '#1474f3', - textDecoration: 'none', - borderBottom: '1px solid #1474f3', - paddingBottom: 2, - }, - - code: { - fontSize: 15, - fontWeight: 600, - padding: '2px 5px', - border: '1px solid #eae9e9', - borderRadius: 4, - backgroundColor: '#f3f2f2', - color: '#3a3a3a', - }, - - note: { - opacity: 0.5, - }, -}; - -const log = () => console.log('Welcome to storybook!'); - -export default class Welcome extends React.Component { - constructor(props) { - super(props); - this.clickHandler = event => { - event.preventDefault(); - - const { showApp } = this.props; - showApp(); - }; - } - - render() { - return ( -
-

Welcome to STORYBOOK

-

- This is a UI component dev environment for your app. -

-

- We've added some basic stories inside the - {' '} - src/stories - {' '} - directory. -
- A story is a single state of one or more UI components. You can have as many stories as - you want. -
- (Basically a story is like a visual test case.) -

-

- See these sample - {' '} - stories - {' '} - for a component called - {' '} - Button - . -

-

- Just like that, you can add your own components as stories. -
- You can also edit those components and see changes right away. -
- (Try editing the Button component - located at src/stories/Button.js.) -

-

- This is just one thing you can do with Storybook. -
- Have a look at the - {' '} - - Storybook - - {' '} - repo for more information. -

-

- NOTE: -
- Have a look at the - {' '} - .storybook/webpack.config.js - {' '} - to add webpack - loaders and plugins you are using in this project. -

-
- ); - } -} - -Welcome.propTypes = { - showApp: PropTypes.func, -}; -Welcome.defaultProps = { - showApp: log, -}; diff --git a/lib/cli/generators/WEBPACK_REACT/template/stories/index.js b/lib/cli/generators/WEBPACK_REACT/template/stories/index.js index e1e8ecdde4da..bd39ba7885d4 100644 --- a/lib/cli/generators/WEBPACK_REACT/template/stories/index.js +++ b/lib/cli/generators/WEBPACK_REACT/template/stories/index.js @@ -1,13 +1,11 @@ -/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ - import React from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { linkTo } from '@storybook/addon-links'; -import Button from './Button'; -import Welcome from './Welcome'; +import Button from '@storybook/components/dist/demo/Button'; +import Welcome from '@storybook/components/dist/demo/Welcome'; storiesOf('Welcome', module).add('to Storybook', () => ); From 436767d7e999a7ab3c7a9e044f6bdf9a8ab5c409 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 16 Jun 2017 09:48:17 +0200 Subject: [PATCH 4/4] test --- package.json | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index b15f5c4889ea..5387df19bf56 100644 --- a/package.json +++ b/package.json @@ -6,9 +6,9 @@ }, "scripts": { "bootstrap": "lerna bootstrap", - "bootstrap:docs": "cd docs && npm i", - "bootstrap:test-cra": "lerna exec --scope test-cra -- npm i", - "bootstrap:react-native-vanilla": "lerna exec --scope react-native-vanilla -- npm i", + "bootstrap:docs": "cd docs && npmc install", + "bootstrap:test-cra": "lerna exec --scope test-cra -- npmc install", + "bootstrap:react-native-vanilla": "lerna exec --scope react-native-vanilla -- npmc install", "changelog": "pr-log --sloppy", "precommit": "lint-staged", "coverage": "codecov", @@ -26,6 +26,9 @@ "publish": "lerna publish", "test": "jest --projects ./ ./examples/react-native-vanilla" }, + "engines": { + "node": "node" + }, "devDependencies": { "babel-cli": "^6.24.1", "babel-core": "^6.24.1", @@ -58,6 +61,7 @@ "markdown-it-anchor": "^4.0.0", "markdownlint-cli": "^0.3.1", "nodemon": "^1.11.0", + "npmc": "^5.0.3-canary.12", "prettier": "^1.3.1", "react": "^15.5.4", "react-dom": "^15.5.4", @@ -70,9 +74,6 @@ "remark-toc": "^4.0.0", "shelljs": "^0.7.7" }, - "engines": { - "npm": "<5.0.0" - }, "collective": { "type": "opencollective", "url": "https://opencollective.com/storybook"