add storybook guide in readme and contributing, customize storybook t…

…heme and add stories eexamples

.github/CONTRIBUTING.md

@@ -14,3 +14,32 @@ All work on VTEX Styleguide happens directly on GitHub. Both core team members a
 
 ### Branch Organization
 According to our [release schedule](#release-schedule), we maintain two branches: `master` and `features`. Bug fixes should have `master` as it base branch, while new features should be merged into `features`.
+
+### Storybook Organization
+
+#### Story file location
+
+Our stories are located alongside with the components they document and the Playground are located in `react/playground`.
+
+Example:
+
+```
+•
+└── react
+    └── components
+        └── Button
+            ├── index.tsx
+            └── button.stories.tsx
+
+```
+
+#### Conventions
+
+1. The `Default` stories must allow to edit all the component props through Knobs.
+2. The name of the stories that shows different states or variations should start with `with`. Examples: `withTitle`, `withCustomColor`.
+3. Don't use external images in the stories, prefer to add images in the `.storybook/public/` folder.
+4. Component stories must be in a single file with the name `{componentName}.stories.tsx`. Examples: `button.stories.tsx`, `modal.stories.tsx`.
+5. Try not to add custom CSS in the stories.
+
+
+Help us add the missing component stories through this [issue](https://github.com/vtex/styleguide/issues/1157).

.storybook/main.js

@@ -3,7 +3,13 @@ const path = require('path');
 const custom = require('../config/webpack.config.js')
 
 module.exports = {
-  stories: ['../react/components/**/*.stories.tsx'],
+  stories: ['../react/playground/stories.tsx', '../react/components/**/*.stories.tsx'],
+  addons: [
+    '@storybook/addon-viewport',
+    '@storybook/addon-knobs/register',
+    '@storybook/addon-actions/register',
+    '@storybook/addon-a11y/register'
+  ],
   webpackFinal: (config) => {
     config.resolve.extensions.push('.ts', '.tsx')
     return { ...config, module: { ...config.module, rules: custom.module.rules } }

.storybook/manager.js

@@ -0,0 +1,25 @@
+import {addons} from '@storybook/addons';
+import {create} from '@storybook/theming';
+
+addons.setConfig({
+  panelPosition: 'bottom',
+
+  theme: create({
+    base: 'light',
+
+    // UI
+    appBorderRadius: 4,
+    appBg: '#FFFFFF',
+    contentBg: '#FFFFFF',
+    textColor: '#3f3f40',
+
+    // Typography
+    fontBase: '"Fabriga", sans-serif',
+    fontCode: 'monospace',
+
+
+    brandTitle: 'VTEX Styleguide',
+    brandUrl: '/',
+    brandImage: null,
+  }),
+});

.storybook/preview.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { addParameters, addDecorator } from '@storybook/react'
+import '@storybook/addon-console'
+import 'vtex-tachyons'
+
+addParameters({
+  options: {
+    showNav: true,
+    showPanel: true, // show the code panel by default
+  },
+})
+
+addDecorator(story => (<div style={{padding: '10px'}}>{story()}</div>)) // Add padding in the canvas

README.md

@@ -28,6 +28,16 @@ yarn install
 yarn styleguide
 ```
 
+### Storybook
+
+We use [Storybook](https://storybook.js.org/) environment to help us build and test our components in real time. You can edit the Playground file and add the components you are working on, after this run the command below to see your changes in http://localhost:6006/ :
+
+```shell
+yarn storybook
+```
+
+If you want to change or add stories, take a look at this [guide](https://github.com/vtex/styleguide/blob/master/.github/CONTRIBUTING.md#storybook-organization) before.
+
 ## Developing using `npm link`
 
 Run this in this repo:

package.json

@@ -39,8 +39,12 @@
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
+    "@storybook/addon-a11y": "^5.3.18",
     "@storybook/addon-actions": "^5.3.18",
+    "@storybook/addon-console": "^1.2.1",
+    "@storybook/addon-knobs": "^5.3.18",
     "@storybook/addon-links": "^5.3.18",
+    "@storybook/addon-viewport": "^5.3.18",
     "@storybook/addons": "^5.3.18",
     "@storybook/react": "^5.3.18",
     "@testing-library/jest-dom": "^5.1.1",

react/components/Button/button.stories.tsx

@@ -1,14 +1,61 @@
 import React from 'react'
+import { withA11y } from '@storybook/addon-a11y'
+import { withKnobs, text, boolean, select } from "@storybook/addon-knobs"
+import { action } from '@storybook/addon-actions'
 
 import Button from '.'
 
 export default {
-  title: 'Button',
+  title: 'Components|Button',
   component: Button,
+  decorators: [withA11y, withKnobs]
 }
 
-export const withText = () => (
-  <Button type="primary">
-    With a text
+const variations = ['primary', 'secondary', 'tertiary', 'danger', 'danger-tertiary', 'inverted-tertiary']
+
+export const Default = () => (
+  <Button
+    variation={select('Variation', variations, 'primary')}
+    isLoading={boolean('Is loading', false)}
+    disabled={boolean('Disabled', false)}
+    block={boolean('Block', false)}
+    size={select('Size', ['small', 'regular', 'large'], 'regular')}
+    onClick={action('button-click')}
+    onFocus={action('button-focus')}
+  >
+    {text("Label", "With a text")}
+  </Button>
+)
+
+export const withLoadingState = () => (
+  <Button
+    isLoading={true}
+  >
+    Loading
+  </Button>
+)
+
+export const withDiffentVariations = () => (
+  <>
+    {variations.map(variation => (
+      <>
+        <Button variation={variation}>{variation}</Button>
+        <br/>
+        <br/>
+      </>
+    ))}
+  </>
+)
+
+export const withOnMouseEvents = () => (
+  <Button
+    onMouseDown={action('button-on-mouse-down')}
+    onMouseEnter={action('button-on-mouse-enter')}
+    onMouseOver={action('button-on-mouse-over')}
+    onMouseLeave={action('button-on-mouse-leave')}
+    onMouseOut={action('button-on-mouse-out')}
+    onMouseUp={action('button-on-mouse-up')}
+  >
+    Button
   </Button>
 )

react/components/Tooltip/tooltip.stories.tsx

@@ -1,14 +1,28 @@
 import React from 'react'
+import { withKnobs, text, boolean, select } from "@storybook/addon-knobs"
 
 import Tooltip from '.'
+import Button from '../Button'
 
 export default {
-  title: 'Tooltip',
+  title: 'Components|Tooltip',
   component: Tooltip,
+  decorators: [withKnobs]
 }
 
-export const tooltipTop = () => (
-  <Tooltip label="tooltip text">
-    <span>oi</span>
+export const Default = () => (
+  <Tooltip
+    label={text('Label', 'Tooltip Label')}
+    trigger={select('Trigger', ['click', 'hover', 'focus'], 'hover')}
+    wordBreak={select('Word Break', ['normal', 'break-all', 'keep-all', 'break-word'], 'normal')}
+    position={select('Position', ['top', 'left', 'right', 'bottom'], 'left')}
+  >
+    <Button>Button</Button>
+  </Tooltip>
+)
+
+export const AlwaysVisible = () => (
+  <Tooltip label="Tooltip Label" trigger="focus">
+    <Button autoFocus={true}>Button with focus</Button>
   </Tooltip>
 )

react/playground/All.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+/*
+  This story should contain all our components.
+*/
+const All = () => (<h1>Under construction</h1>)
+
+export default All

react/playground/ExamplePage.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+
+/*
+  This story should have an example page using our components.
+*/
+const ExamplePage = () => (<h1>Under construction</h1>)
+
+export default ExamplePage

react/playground/Playground.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import PageHeader from '../PageHeader'
+import PageBlock from '../PageBlock'
+import Layout from '../Layout'
+
+const Playground = () => (
+  <Layout
+    fullWidth
+    pageHeader={<PageHeader title="Playground"/>}
+  >
+    <PageBlock>
+      {/* Add your code here, don't forget to delete after */}
+    </PageBlock>
+  </Layout>
+)
+
+export default Playground

react/playground/stories.tsx

@@ -0,0 +1,9 @@
+import Playground from './Playground'
+import ExamplePage from './ExamplePage'
+import All from './All'
+
+export default {
+  title: 'Playground|Playground'
+}
+
+export { Playground, ExamplePage, All }