Add storybook

Author: thayannevls

.babelrc

@@ -5,7 +5,7 @@
     ["@babel/preset-env", { "loose": true }]
   ],
   "plugins": [
-    "@babel/plugin-proposal-class-properties",
+    ["@babel/plugin-proposal-class-properties", { "loose": true }],
     "transform-es2015-modules-commonjs",
     "dynamic-import-node"
   ]

.github/CONTRIBUTING.md

@@ -3,14 +3,46 @@
 Want to contribute to VTEX Styleguide? There are a few things you need to know.
 
 ### Release Schedule
+
 Thursday release: patch version weekly on each Thursday for routine bug fix (anytime for urgent bug fix).
 
 Tuesday release: minor version at the Tuesday of every week for new features.
 
 Major version releases are not included in this schedule.
 
 ### Open Development
+
 All work on VTEX Styleguide happens directly on GitHub. Both core team members and external contributors send pull requests which go through the same review process.
 
 ### 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
+            ├── index.test.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.
+6. The stories must be written in typescript.
+
+Help us add the missing component stories through this [issue](https://github.com/vtex/styleguide/issues/1157).

.github/PULL_REQUEST_TEMPLATE.md

@@ -3,13 +3,31 @@
 <!--- Describe your changes in detail. -->
 
 #### What problem is this solving?
-[Running workspace](http://link)
 
+[Running workspace](http://link)
 
 <!--- What is the motivation and context for this change? -->
 
 #### How should this be manually tested?
 
+<!-- Add the code that is necessary to test your change in the Playground-->
+<details>
+<summary>Add this code in <code>react/playground/Playground.tsx</code>:</summary>
+
+```jsx
+import React from 'react'
+import PageHeader from '../PageHeader'
+import Layout from '../Layout'
+const Playground = () => (
+  <Layout fullWidth pageHeader={<PageHeader title="Playground" />}>
+    {/* Add your code here, don't forget to delete after */}
+  </Layout>
+)
+export default Playground
+```
+
+</details>
+
 #### Screenshots or example usage
 
 #### Types of changes

.storybook/main.ts

@@ -0,0 +1,22 @@
+const path = require('path')
+
+const custom = require('../config/webpack.config.js')
+
+module.exports = {
+  stories: [
+    '../react/playground/stories.tsx',
+    '../react/components/**/*.stories.tsx',
+  ],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-a11y',
+    '@storybook/addon-links',
+  ],
+  webpackFinal: config => {
+    config.resolve.extensions.push('.ts', '.tsx')
+    return {
+      ...config,
+      module: { ...config.module, rules: custom.module.rules },
+    }
+  },
+}

.storybook/manager.ts

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

.storybook/preview.tsx

@@ -0,0 +1,6 @@
+import '@storybook/addon-console'
+import 'vtex-tachyons'
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+}

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:
@@ -120,6 +130,7 @@ yarn deploy
 The `icon` components supports customization through the `<use>` element available in SVG. [Read more](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use)
 
 **How to use:** In the same page that has a icon, load in any place inside the `<html>` a SVG with the following structure:
+
 ```svg
 <svg class="dn" height="0" version="1.1" width="0" xmlns="http://www.w3.org/2000/svg">
   <defs>
@@ -133,5 +144,6 @@ The `icon` components supports customization through the `<use>` element availab
   </defs>
 </svg>
 ```
+
 - The ID must match the ID of the icon you want to replace. To see all available options, [view icons folder](https://github.com/vtex/styleguide/tree/master/react/components/icon).
 - Inside one SVG you can have more than one `<g id="">`, one for each icon you want to update.

babel.config.js

@@ -6,7 +6,7 @@ module.exports = {
     ['@babel/preset-env', { loose: true }],
   ],
   plugins: [
-    '@babel/plugin-proposal-class-properties',
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
     'transform-es2015-modules-commonjs',
     'dynamic-import-node',
   ],

config/webpack.config.js

@@ -128,7 +128,7 @@ module.exports = {
         // its runtime that would otherwise processed through "file" loader.
         // Also exclude `html` and `json` extensions so they get processed
         // by webpacks internal loaders.
-        exclude: [/\.(js|jsx|mjs|ts|tsx)$/, /\.css$/, /\.html$/, /\.json$/],
+        exclude: [/\.(js|jsx|mjs|ts|tsx|ejs)$/, /\.css$/, /\.html$/, /\.json$/],
         loader: require.resolve('file-loader'),
         options: {
           name: 'static/media/[name].[hash:8].[ext]',

package.json

@@ -22,7 +22,9 @@
     "postreleasy": "vtex publish --public --verbose",
     "lint-fix": "eslint react --ext js,jsx,ts,tsx --fix --max-warnings 0",
     "prettier-conflict-check": "eslint --print-config .eslintrc | eslint-config-prettier-check",
-    "build": "run-s compile styleguide:build"
+    "build": "run-s compile styleguide:build",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "main": "./lib/index.js",
   "files": [
@@ -47,6 +49,14 @@
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
+    "@storybook/addon-a11y": "^6.0.21",
+    "@storybook/addon-actions": "^6.0.21",
+    "@storybook/addon-console": "^1.2.1",
+    "@storybook/addon-essentials": "^6.0.21",
+    "@storybook/addon-links": "^6.0.21",
+    "@storybook/addon-viewport": "^6.0.21",
+    "@storybook/addons": "^6.0.21",
+    "@storybook/react": "^6.0.21",
     "@testing-library/jest-dom": "^5.1.1",
     "@testing-library/react": "^9.5.0",
     "@testing-library/react-hooks": "^3.2.1",
@@ -84,6 +94,7 @@
     "react-app-polyfill": "^1.0.1",
     "react-dev-utils": "^9.0.1",
     "react-dom": "^16.12.0",
+    "react-is": "^16.13.1",
     "react-styleguidist": "^9.1.12",
     "react-test-renderer": "^16.13.0",
     "style-loader": "^0.23.1",
@@ -119,6 +130,10 @@
     "react-dom": "^16.8.0",
     "recharts": "^2.0.0-beta.1"
   },
+  "resolutions": {
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  },
   "husky": {
     "hooks": {
       "pre-push": "npm run prettier-conflict-check && npm run lint"

react/components/Button/button.stories.tsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Story, Meta } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+
+import Button, { propTypes } from '.'
+
+type ButtonProps = PropTypes.InferProps<typeof propTypes>
+
+const variations = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'danger',
+  'danger-tertiary',
+  'inverted-tertiary',
+]
+const sizes = ['small', 'regular', 'large']
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: {
+    variation: {
+      control: {
+        type: 'select',
+        options: variations,
+      },
+    },
+    size: {
+      control: {
+        type: 'inline-radio',
+        options: sizes,
+      },
+    },
+    onClick: {
+      action: 'button-click',
+    },
+  },
+} as Meta
+
+const Template: Story<ButtonProps> = args => <Button {...args} type="button" />
+
+export const Default = Template.bind({})
+Default.args = {
+  variation: 'primary',
+  isLoading: false,
+  disabled: false,
+  block: false,
+  size: 'regular',
+  children: 'Button',
+}
+
+export const withLoadingState = Template.bind({})
+withLoadingState.args = {
+  ...Default.args,
+  isLoading: true,
+}
+
+export const withDifferentVariations = () => (
+  <>
+    {variations.map(variation => (
+      <>
+        <Button type="button" variation={variation}>
+          {variation}
+        </Button>
+        <br />
+        <br />
+      </>
+    ))}
+  </>
+)
+
+export const withOnMouseEvents = Template.bind({})
+withOnMouseEvents.args = {
+  ...Default.args,
+  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'),
+}
+
+export const withDifferentSizes = () => (
+  <>
+    {sizes.map(size => (
+      <>
+        <Button type="button" size={size}>
+          {size}
+        </Button>
+        <br />
+        <br />
+      </>
+    ))}
+  </>
+)

react/components/Tooltip/index.tsx

@@ -39,7 +39,7 @@ const propTypes = {
   ]),
 }
 
-type Props = PropTypes.InferProps<typeof propTypes>
+export type Props = PropTypes.InferProps<typeof propTypes>
 
 const defaultProps: Props = {
   trigger: 'hover',

react/components/Tooltip/tooltip.stories.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+
+import { Position } from './TooltipPopup'
+import Tooltip, { Props } from '.'
+import Button from '../Button'
+
+const positions: Position[] = ['top', 'left', 'right', 'bottom']
+
+export default {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  argTypes: {
+    position: {
+      control: {
+        type: 'select',
+        options: positions,
+      },
+    },
+    fallbackPosition: {
+      control: {
+        type: 'select',
+        options: positions,
+      },
+    },
+    trigger: {
+      control: {
+        type: 'inline-radio',
+        options: ['click', 'hover', 'focus'],
+      },
+    },
+    wordBreak: {
+      control: {
+        type: 'select',
+        options: ['normal', 'break-all', 'keep-all', 'break-word'],
+      },
+    },
+  },
+} as Meta
+
+const Template: Story<Props> = args => <Tooltip {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  label: 'Tooltip Label',
+  trigger: 'hover',
+  wordBreak: 'normal',
+  position: 'bottom',
+  delay: 0,
+  fallbackPosition: 'right',
+  children: <Button type="button">Button</Button>,
+  size: 'small',
+}