feat: storybook

.eslintrc.cjs

@@ -6,6 +6,7 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
     'prettier',
+    'plugin:storybook/recommended',
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
@@ -17,6 +18,6 @@ module.exports = {
     ],
     '@typescript-eslint/no-explicit-any': 'off',
     'react-hooks/rules-of-hooks': 'off',
-    'react-refresh/only-export-components': 'off',
+    'react-hooks/exhaustive-deps': 'error',
   },
 }

.github/workflows/check-on-pr.yml

@@ -0,0 +1,56 @@
+name: Lint and build
+
+on:
+  pull_request:
+    branches:
+      - main
+    paths:
+      - "**"
+      - "!README.md"
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install packages
+        run: npm i
+
+      - name: Run TypeScript Compiler
+        run: npm run tsc
+
+      - name: Run ESLint
+        run: npm run lint
+    permissions:
+      contents: read
+      pull-requests: read
+      checks: write
+
+  build:
+    runs-on: ubuntu-latest
+    needs: lint
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install packages
+        run: npm i
+
+      - name: Build
+        run: npm run build
+    permissions:
+      contents: read
+      pull-requests: read
+      checks: write

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .parcel-cache
-/dist
+/dist
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,25 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+import autoprefixer from 'autoprefixer'
+import tailwindcss from 'tailwindcss'
+import { mergeConfig } from 'vite'
+import svgr from 'vite-plugin-svgr'
+
+const config: StorybookConfig = {
+  'stories': ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  'addons': ['@storybook/addon-essentials'],
+  'framework': {
+    'name': '@storybook/react-vite',
+    'options': {},
+  },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      plugins: [svgr()],
+      css: {
+        postcss: {
+          plugins: [tailwindcss(), autoprefixer()],
+        },
+      },
+    })
+  },
+}
+export default config

.storybook/preview.tsx

@@ -0,0 +1,28 @@
+import { ChakraProvider } from '@chakra-ui/react'
+import type { Preview } from '@storybook/react'
+import { MemoryRouter } from 'react-router-dom'
+import theme from '../src/theme'
+import '../styles/index.css'
+import './storybook.css'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ChakraProvider theme={theme}>
+        <MemoryRouter>
+          <Story />
+        </MemoryRouter>
+      </ChakraProvider>
+    ),
+  ],
+}
+
+export default preview

.storybook/storybook.css

@@ -0,0 +1,3 @@
+#storybook-root {
+  height: 100%;
+}