feat: create storybook

.storybook/main.js

@@ -0,0 +1,20 @@
+const { resolve } = require('path')
+
+module.exports = {
+  stories: ['../stories/**/*.tsx'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-postcss',
+    'storybook-addon-styled-components-themes/register'
+  ],
+  webpackFinal: async (config) => {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      components: resolve(__dirname, '../src/components'),
+      styles: resolve(__dirname, '../src/styles'),
+      utils: resolve(__dirname, '../src/utils')
+    }
+    return config
+  }
+}

.storybook/preview.js

@@ -0,0 +1,22 @@
+import { ThemeProvider } from 'styled-components'
+import GlobalStyles from 'styles/global'
+import theme from 'styles/theme'
+
+export const decorators = [
+  (Story) => (
+    <ThemeProvider theme={theme}>
+      <GlobalStyles />
+      <Story />
+    </ThemeProvider>
+  )
+]
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/
+    }
+  }
+}

package.json

@@ -6,7 +6,9 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@emotion/react": "^11",
@@ -16,9 +18,15 @@
     "next": "12.1.6",
     "react": "18.1.0",
     "react-dom": "18.1.0",
+    "storybook-addon-styled-components-themes": "^0.0.2",
     "styled-components": "^5.3.5"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-links": "^6.4.22",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/react": "^6.4.22",
     "@types/node": "17.0.33",
     "@types/react": "18.0.9",
     "@types/react-dom": "18.0.4",

src/components/Arrows.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components'
 
 import Button from 'components/Button'
 
-interface Props {
+export interface Props {
   disableUp?: boolean
   onClickUp?: () => void
   disableDown?: boolean

src/components/Button.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import styled, { css } from 'styled-components'
 
-interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   skin?: 'outlined' | 'default' | 'transparent'
   rounded?: boolean
-  size?: 'small' | 'medium' | 'large'
+  size?: 'small' | 'medium'
 }
 
 const Button = (props: Props) => {
@@ -34,13 +34,14 @@ const Container = styled.button<Props>`
     ${skin === 'outlined' &&
     `border: 1px solid ${theme.colors.gray400};background: transparent;`}
 
-  ${skin === 'default' || !skin
+    ${skin === 'default' || !skin
       ? `border: none; background: ${theme.colors.gray200};color: white;`
       : ''}
 
   ${skin === 'transparent' &&
     `border: none;background: transparent;filter: none;box-shadow: none !important;padding: 0 !important;`}
 
+  ${size === 'small' || !size ? 'padding: 7px 20px;' : ''}
   ${size === 'medium' || !size ? 'padding: 15px 80px;' : ''}
 
   filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1))

src/components/Progress.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 
-type Props = React.ProgressHTMLAttributes<HTMLProgressElement>
+export type Props = React.ProgressHTMLAttributes<HTMLProgressElement>
 
 const Progress = (props: Props) => {
   return <Container {...props} />

src/components/Ranger.tsx

@@ -2,9 +2,9 @@ import { useState } from 'react'
 
 import styled from 'styled-components'
 
-import { generateArray } from 'utils'
+import { generateArray } from 'utils/index'
 
-interface Props {
+export interface Props {
   optionsSize: number
   side?: 'left' | 'right' | 'both'
   onSelect?: (value: number) => void
@@ -71,11 +71,16 @@ const Ranger = ({ optionsSize, side = 'both', onSelect }: Props) => {
       </Questions>
 
       {optionsSize >= 3 ? (
-        <Texts>
-          <Text>
-            <span>Much worse</span>
-            <span>than now</span>
-          </Text>
+        <Texts
+          style={{ flexDirection: side === 'left' ? 'row-reverse' : 'row' }}
+        >
+          {side === 'both' && (
+            <Text>
+              <span>Much worse</span>
+              <span>than now</span>
+            </Text>
+          )}
+
           <Text>
             <span>Same</span>
             <span>as now</span>

src/components/Title.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import styled from 'styled-components'
 
-interface Props extends React.HTMLAttributes<HTMLDivElement> {
+export interface Props extends React.HTMLAttributes<HTMLDivElement> {
   tag: 'h1' | 'h2' | 'h3'
 }
 

stories/Arrows.tsx

@@ -0,0 +1,10 @@
+import { Story, Meta } from '@storybook/react'
+import Arrows, { Props } from 'components/Arrows'
+
+export default {
+  title: 'Arrows',
+  component: Arrows,
+  args: {}
+} as Meta
+
+export const Default: Story<Props> = (args) => <Arrows {...args} />

stories/Button.tsx

@@ -0,0 +1,15 @@
+import { Story, Meta } from '@storybook/react'
+import Button, { Props } from 'components/Button'
+
+export default {
+  title: 'Button',
+  component: Button,
+  args: {
+    sklin: 'outline',
+    children: 'Hello Button',
+    size: 'small',
+    rounded: true
+  }
+} as Meta
+
+export const Default: Story<Props> = (args) => <Button {...args} />

stories/Loading.tsx

@@ -0,0 +1,9 @@
+import { Story, Meta } from '@storybook/react'
+import Loading from 'components/Loading'
+
+export default {
+  title: 'Loading',
+  component: Loading
+} as Meta
+
+export const Default: Story = () => <Loading />

stories/Logo.tsx

@@ -0,0 +1,9 @@
+import { Story, Meta } from '@storybook/react'
+import Logo from 'components/Logo'
+
+export default {
+  title: 'Logo',
+  component: Logo
+} as Meta
+
+export const Default: Story = () => <Logo />

stories/Progress.tsx

@@ -0,0 +1,12 @@
+import { Story, Meta } from '@storybook/react'
+import Progress, { Props } from 'components/Progress'
+
+export default {
+  title: 'Progress',
+  component: Progress,
+  args: {
+    value: 0.5
+  }
+} as Meta
+
+export const Default: Story<Props> = (args) => <Progress {...args} />

stories/Ranger.tsx

@@ -0,0 +1,23 @@
+import { Story, Meta } from '@storybook/react'
+import Ranger, { Props } from 'components/Ranger'
+
+export default {
+  title: 'Ranger',
+  component: Ranger,
+  args: {
+    optionsSize: 6,
+    side: 'both'
+  }
+} as Meta
+
+export const Default: Story<Props> = (args) => <Ranger {...args} />
+
+export const RightSide: Story<Props> = (args) => <Ranger {...args} />
+RightSide.args = {
+  side: 'right'
+}
+
+export const LeftSide: Story<Props> = (args) => <Ranger {...args} />
+LeftSide.args = {
+  side: 'left'
+}

stories/Title.tsx

@@ -0,0 +1,23 @@
+import { Story, Meta } from '@storybook/react'
+import Title, { Props } from 'components/Title'
+
+export default {
+  title: 'Title',
+  component: Title,
+  args: {
+    tag: 'h1',
+    children: 'Hello World, pls hide me :)'
+  }
+} as Meta
+
+export const H1: Story<Props> = (args) => <Title {...args} />
+
+export const H2: Story<Props> = (args) => <Title {...args} />
+H2.args = {
+  tag: 'h2'
+}
+
+export const H3: Story<Props> = (args) => <Title {...args} />
+H3.args = {
+  tag: 'h3'
+}

stories/WaterMark.tsx

@@ -0,0 +1,9 @@
+import { Story, Meta } from '@storybook/react'
+import WaterMark from 'components/WaterMark'
+
+export default {
+  title: 'WaterMark',
+  component: WaterMark
+} as Meta
+
+export const Default: Story = () => <WaterMark />