From 08f3f837d7402044aaeacd677ec5f1e134163529 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Sun, 11 Jun 2017 23:47:07 +0200
Subject: [PATCH] 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 }) => <button {...rest}>{children}</button>)({
+  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 =>
+  <Main>
+    <Title>Welcome to storybook</Title>
+    <p>This is a UI component dev environment for your app.</p>
+    <p>
+      We've added some basic stories inside the
+      {' '}
+      <InlineCode>src/stories</InlineCode>
+      {' '}
+      directory.
+      <br />
+      A story is a single state of one or more UI components. You can have as many stories as
+      you want.
+      <br />
+      (Basically a story is like a visual test case.)
+    </p>
+    <p>
+      See these sample
+      {' '}
+      <Link onClick={props.showApp} role="button" tabIndex="0">stories</Link>
+      {' '}
+      for a component called
+      {' '}
+      <InlineCode>Button</InlineCode>
+      .
+    </p>
+    <p>
+      Just like that, you can add your own components as stories.
+      <br />
+      You can also edit those components and see changes right away.
+      <br />
+      (Try editing the <InlineCode>Button</InlineCode> component
+      located at <InlineCode>src/stories/Button.js</InlineCode>.)
+    </p>
+    <p>
+      Usually we create stories with smaller UI components in the app.<br />
+      Have a look at the
+      {' '}
+      <Link
+        href="https://storybook.js.org/basics/writing-stories"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Writing Stories
+      </Link>
+      {' '}
+      section in our documentation.
+    </p>
+    <Note>
+      <b>NOTE:</b>
+      <br />
+      Have a look at the
+      {' '}
+      <InlineCode>.storybook/webpack.config.js</InlineCode>
+      {' '}
+      to add webpack
+      loaders and plugins you are using in this project.
+    </Note>
+  </Main>;
+
+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 };