Feat/storybook

.storybook/main.js

@@ -0,0 +1,12 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app",
+    "storybook-addon-designs"
+  ]
+}

.storybook/preview.js

@@ -0,0 +1,12 @@
+import { ThemeProvider } from 'styled-components'
+import { theme } from 'resources/theme'
+import { GlobalStyle } from '../src/root'
+
+export const decorators = [
+  (Story) => (
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <Story />
+    </ThemeProvider>
+  )
+]

package.json

@@ -10,7 +10,9 @@
     "lint": "eslint src --ext ts,tsx --no-eslintrc --config .eslintrc-default.json",
     "lint:fix": "yarn lint --fix",
     "type-check": "tsc --project tsconfig.json --pretty --noEmit",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.4",
@@ -33,7 +35,17 @@
     "web-vitals": "^1.0.1"
   },
   "eslintConfig": {
-    "extends": "./.eslintrc.json"
+    "extends": "./.eslintrc.json",
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
   },
   "browserslist": {
     "production": [
@@ -48,6 +60,12 @@
     ]
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^6.3.10",
+    "@storybook/addon-essentials": "^6.3.10",
+    "@storybook/addon-links": "^6.3.10",
+    "@storybook/node-logger": "^6.3.10",
+    "@storybook/preset-create-react-app": "^3.2.0",
+    "@storybook/react": "^6.3.10",
     "@types/marked": "^3.0.1",
     "@types/styled-components": "^5.1.14",
     "@types/uuid": "^8.3.1",
@@ -60,6 +78,7 @@
     "eslint-plugin-only-warn": "^1.0.3",
     "eslint-plugin-promise": "5.1.0",
     "eslint-plugin-react": "7.25.2",
-    "husky": "^7.0.2"
+    "husky": "^7.0.2",
+    "storybook-addon-designs": "^6.2.0"
   }
 }

src/root.tsx

@@ -47,4 +47,4 @@ const GlobalStyle = createGlobalStyle`
   }
 `
 
-export { Root }
+export { Root, GlobalStyle }

src/ui/components/content/index.tsx

@@ -30,7 +30,6 @@ type ContentProps = {
 function Content({
   file,
   inputRef,
-
   handleUpdateTitle,
   handleUpdateFile,
 }: ContentProps) {

src/ui/screens/addonFigma/test.stories.tsx

@@ -0,0 +1,27 @@
+// eslint-disable-next-line no-use-before-define
+import React from 'react'
+import { ComponentMeta } from '@storybook/react'
+import { withDesign } from 'storybook-addon-designs'
+
+type ButtonProps = {
+  children: React.ReactNode
+}
+
+function Button({ children }: ButtonProps) {
+  return <button>{children}</button>
+}
+
+export const myStory = () => <Button><span>Hello, World!</span></Button>
+
+myStory.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File',
+  },
+}
+
+export default {
+  title: 'My stories',
+  component: Button,
+  decorators: [withDesign],
+} as ComponentMeta<typeof Button>

src/ui/screens/home/home.stories.tsx

@@ -0,0 +1,15 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+import { Home } from '.'
+
+export default {
+  title: 'Example/Home',
+  component: Home,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof Home>
+
+const Template: ComponentStory<typeof Home> = () => <Home />
+
+export const Example = Template.bind({})