diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index a7b9ac366..ea3a2488c 100644
--- a/.github/CONTRIBUTING.md
+++ b/.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).
\ No newline at end of file
diff --git a/.storybook/config.js b/.storybook/config.js
deleted file mode 100644
index 0d3047d68..000000000
--- a/.storybook/config.js
+++ /dev/null
@@ -1 +0,0 @@
-import 'vtex-tachyons'
\ No newline at end of file
diff --git a/.storybook/main.js b/.storybook/main.js
index d05dd0c7f..59f584515 100644
--- a/.storybook/main.js
+++ b/.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 } }
diff --git a/.storybook/manager.js b/.storybook/manager.js
new file mode 100644
index 000000000..ebab14a58
--- /dev/null
+++ b/.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,
+ }),
+});
diff --git a/.storybook/preview.js b/.storybook/preview.js
new file mode 100644
index 000000000..4320b3d5a
--- /dev/null
+++ b/.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 => (
{story()}
)) // Add padding in the canvas
\ No newline at end of file
diff --git a/README.md b/README.md
index 8ff60b140..3602ee496 100755
--- a/README.md
+++ b/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:
diff --git a/package.json b/package.json
index 8cf7b59dc..9b99954b1 100644
--- a/package.json
+++ b/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",
diff --git a/react/components/Button/button.stories.tsx b/react/components/Button/button.stories.tsx
index b969c5cb0..b9b0b6056 100644
--- a/react/components/Button/button.stories.tsx
+++ b/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 = () => (
-