Prepare the storybook-readme

.storybook/addons.js

@@ -1,4 +1,4 @@
 import '@storybook/addon-a11y/register'
 import '@storybook/addon-actions/register'
-import '@storybook/addon-links/register'
 import '@storybook/addon-viewport/register'
+import 'storybook-readme/register'

.storybook/config.js

@@ -1,10 +1,18 @@
 import React from 'react'
 import { configure, addDecorator, addParameters } from '@storybook/react'
 import { create } from '@storybook/theming'
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import { withA11y } from '@storybook/addon-a11y'
+import { addReadme } from 'storybook-readme'
 
 import { createTheme } from '../src/themes/createTheme'
 import { ThemeProvider } from '../src/themes/ThemeProvider'
-import { withA11y } from '@storybook/addon-a11y'
+
+const req = require.context('../src/components', true, /.stories.tsx$/)
+
+function loadStories() {
+  req.keys().forEach(filename => req(filename))
+}
 
 addParameters({
   options: {
@@ -17,13 +25,11 @@ addParameters({
     isToolshown: true,
   },
 })
+addParameters({ viewport: { viewports: INITIAL_VIEWPORTS } })
 
-const req = require.context('../src/components', true, /.stories.tsx$/)
-function loadStories() {
-  req.keys().forEach(filename => req(filename))
-}
-
+addDecorator(withA11y)
+addDecorator(addReadme)
 addDecorator(storyFn => <ThemeProvider theme={createTheme()}>{storyFn()}</ThemeProvider>)
+
 configure(loadStories, module)
 
-addDecorator(withA11y)

package.json

@@ -11,8 +11,7 @@
     "@babel/core": "^7.2.2",
     "@storybook/addon-a11y": "^5.1.1",
     "@storybook/addon-actions": "^5.0.11",
-    "@storybook/addon-links": "^5.1.7",
-    "@storybook/addon-viewport": "^5.0.11",
+    "@storybook/addon-viewport": "^5.1.8",
     "@storybook/addons": "^5.0.11",
     "@storybook/cli": "^5.1.7",
     "@storybook/react": "^5.0.11",
@@ -43,6 +42,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-test-renderer": "16.8.6",
+    "storybook-readme": "^5.0.3",
     "styled-components": "^4.3.1",
     "stylelint": "^10.1.0",
     "stylelint-config-prettier": "^5.1.0",

src/components/AppBar/AppBar.stories.tsx

@@ -2,9 +2,16 @@ import { storiesOf } from '@storybook/react'
 import * as React from 'react'
 
 import { AppBar } from './AppBar'
+import readme from './README.md'
 
-storiesOf('AppBar', module).add('all', () => (
-  <AppBar pcSize="l" tabletSize="m" spSize="s">
-    AppBar Component
-  </AppBar>
-))
+storiesOf('AppBar', module)
+  .addParameters({
+    readme: {
+      sidebar: readme,
+    },
+  })
+  .add('AppBar', () => (
+    <AppBar pcSize="l" tabletSize="m" spSize="s">
+      AppBar Component
+    </AppBar>
+  ))

src/components/AppBar/__test__/index.test.tsx → src/components/AppBar/AppBar.test.tsx

@@ -1,14 +1,20 @@
 import { mount } from 'enzyme'
 import React from 'react'
 import ReactTestRenderer from 'react-test-renderer'
-import { AppBar } from '../AppBar'
 
-describe('index', () => {
+import { AppBar } from './AppBar'
+
+describe('AppBar', () => {
+  it('should be match snapshot', () => {
+    const component = mount(<AppBar />)
+    expect(component).toMatchSnapshot()
+  })
+
   it('should be able to render without crashing', () => {
     ReactTestRenderer.create(<AppBar />)
   })
 
-  it('should be render a `<AppBarComponent />`', () => {
+  it('should render a `<AppBarComponent />`', () => {
     const component = mount(
       <AppBar pcSize="l" tabletSize="m" spSize="s">
         AppBar Component

src/components/AppBar/AppBar.tsx

@@ -2,40 +2,39 @@ import * as React from 'react'
 import styled, { css } from 'styled-components'
 
 import { InjectedProps, withTheme } from '../../hocs/withTheme'
-import { ComponentProps, SizePattern, StyledProperties } from '../../types/componentProps'
+import { ComponentProps, Size, StyledProperties } from '../../types/props'
 
-type MergedComponentProps = ComponentProps<{}> & InjectedProps
+type MergedComponentProps = ComponentProps & InjectedProps
 type MergedStyledProps = StyledProperties & InjectedProps
 
 const AppBarComponent: React.FC<MergedComponentProps> = ({ ...props }) => <Wrapper {...props} />
 
 export const AppBar = withTheme(AppBarComponent)
 
-const getSpaceSize = (size: SizePattern): 'xs' | 's' | 'm' => {
+const getSpaceSize = (size: Size): 'xs' | 's' | 'm' => {
   const spaceMap: any = {
-    xs: 'xs',
     s: 'xs',
     m: 's',
     l: 'm',
-    xl: 'm',
   }
   return spaceMap[size]
 }
-const Wrapper: any = styled.div`
+const Wrapper = styled.div`
   ${({ spSize = 'm', pcSize = 'm', tabletSize = 'm', theme }: MergedStyledProps) => {
+    const { size, palette } = theme
     const [pcPadding, tabletPadding, spPadding] = [pcSize, tabletSize, spSize]
       .map(getSpaceSize)
-      .map(size => `0 ${theme.size.pxToRem(theme.size.space[size])}`)
+      .map(spaceSize => `0 ${size.pxToRem(size.space[spaceSize])}`)
 
     return css`
       padding: ${pcPadding};
-      background: ${theme.palette.SmartHRGreen};
+      background: ${palette.SmartHRGreen};
 
-      @media screen and (max-width: ${theme.size.mediaQuery.tablet}px) {
+      @media screen and (max-width: ${size.mediaQuery.tablet}px) {
         padding: ${tabletPadding};
       }
 
-      @media screen and (max-width: ${theme.size.mediaQuery.sp}px) {
+      @media screen and (max-width: ${size.mediaQuery.sp}px) {
         padding: ${spPadding};
       }
     `

src/components/AppBar/README.md

@@ -0,0 +1,19 @@
+# AppBar
+
+```tsx
+import { AppBar } from 'smarthr-ui'
+
+<AppBar pcSize="l" tabletSize="m" spSize="s">
+  AppBar Component
+</AppBar>
+```
+
+## props
+
+| Name       | Required | Type                              | DefaultValue | Description                                                       |
+| ---------- | -------- | --------------------------------- | ------------ | ----------------------------------------------------------------- |
+| pcSize     | -        | **enum** <br> s &#124; m &#124; l | m            | Size of left and right padding when innerWidth is 1000px or more  |
+| tabletSize | -        | **enum** <br> s &#124; m &#124; l | m            | Size of left and right padding when innerWidth is 600px or more   |
+| spSize     | -        | **enum** <br> s &#124; m &#124; l | m            | Size of left and right padding when innerWidth is less than 599px |
+
+The number of mediaQuery can be overwritten by the user.