feat: add storybook

.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint"],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+  ],
+  overrides: [
+    {
+      files: ["*.js"],
+      env: {
+        node: true,
+      },
+    },
+    {
+      files: ["stories/**/*"],
+      extends: ["plugin:storybook/recommended"],
+    },
+  ],
+};

.storybook/main.js

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

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

src/Button.tsx → libs/Button.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
 
 export const Button = styled.button`
-  background-color: green;
+  background-color: coral;
 `;