feat: ✨ add storybook!

.eslintrc.cjs

@@ -14,6 +14,7 @@ module.exports = {
     'plugin:react-hooks/recommended',
     'plugin:import/recommended',
     'plugin:import/typescript',
+    'plugin:storybook/recommended',
     'prettier',
   ],
   parser: '@typescript-eslint/parser',
@@ -84,5 +85,6 @@ module.exports = {
     'dist/',
     'coverage/',
     'vite.config.ts.*.mjs',
+    'storybook-static/',
   ],
 }

.gitignore

@@ -34,3 +34,6 @@ coverage
 
 # vite
 vite.config.ts.*.mjs
+
+# storybook
+storybook-static

.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-themes',
+    '@storybook/themes',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+}
+export default config

.storybook/preview.ts

@@ -0,0 +1,30 @@
+import type { Preview } from '@storybook/react'
+
+import '../src/index.css'
+
+import { withThemeByDataAttribute } from '@storybook/addon-themes'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+
+  decorators: [
+    withThemeByDataAttribute({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'dark',
+      attributeName: 'data-theme',
+    }),
+  ],
+}
+
+export default preview

.vscode/settings.json

@@ -1,10 +1,12 @@
 {
   "cSpell.words": [
+    "autodocs",
     "clsx",
     "daisyui",
     "degit",
     "gitzy",
     "iconify",
+    "lucide",
     "noreferrer",
     "Parens",
     "pnpm",

README.md

@@ -2,12 +2,13 @@
 
 > 🍱 another opinionated [React][react] starter
 
-## Features
+## 🐣 Features
 
 [![vite](https://img.shields.io/badge/Vite-B73BFE?style=for-the-badge&logo=vite&logoColor=FFD62E)][vite]
 [![react](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)][react]
 [![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)][TypeScript]
 [![tailwindcss](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)][tailwindcss]
+[![storybook](https://img.shields.io/badge/storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white)][storybook]
 [![vitest](https://img.shields.io/badge/vitest-6E9F18?style=for-the-badge&logo=vitest&logoColor=white)][vitest]
 [![Testing Library](https://img.shields.io/badge/-testinglibrary-%23E33332?style=for-the-badge&logo=testinglibrary&logoColor=white)][Testing Library]
 [![Playwright](https://img.shields.io/badge/Playwright-45ba4b?style=for-the-badge&logo=Playwright&logoColor=white)][Playwright]
@@ -19,22 +20,23 @@
 - ⚡️ [vite][vite] for instant server start and lighting fast HMR.
 - 🏷️ [TypeScript][TypeScript] for a less frustrating & consistent experience.
 - 💄 [tailwindcss][tailwindcss] for utility-first CSS.
+- 🧱 [storybook][storybook] for building UIs in isolation.
 - 🧪 [vitest][vitest] for fast testing.
 - 🧪 [Playwright][Playwright] for fast and reliable e2e testing.
 - 🩺 [eslint][eslint] for static analysis.
 - 🎨 [prettier][prettier] for formatting.
 - ⚡️ [pnpm][pnpm] for fast and consistent installs.
 - 👷 [GitHub Actions][GitHub Actions] for easy workflow automation.
 
-## Usage
+## 🛠️ Usage
 
 You can either [use this template](https://github.com/jimmy-guzman/react-starter/generate) or use [degit](https://github.com/Rich-Harris/degit), by running the following command:
 
 ```
 degit jimmy-guzman/react-starter
 ```
 
-## Getting Started
+## 🏁 Getting Started
 
 Make sure you're using [node 20](https://nodejs.dev/en/about/releases), I recommend using [fnm](https://github.com/Schniz/fnm) which will allow you to simply run:
 
@@ -62,63 +64,26 @@ pnpm dev
 
 Your application will be available at http://localhost:5173/ ❤️
 
-## Available Tasks
-
-To build for production, run the following command:
-
-```
-pnpm build
-```
-
-To build preview production build, run the following command:
-
-```
-pnpm preview
-```
-
-_must have ran `pnpm build` previously_
-
-To run unit tests, run the following command:
-
-```
-pnpm test
-```
-
-To run e2e tests, run the following command:
-
-```
-pnpm e2e
-```
-
-To lint, run the following command:
-
-```
-pnpm lint
-```
-
-_you can run `pnpm lint:fix` to fix all lint errors_
-
-To format, run the following command:
-
-```
-pnpm format
-```
-
-_you can run `pnpm format:fix` to fix all format errors_
-
-To check types, run the following command:
-
-```
-pnpm typecheck
-```
-
-To interactively update dependencies, run the following command:
-
-```
-pnpm deps:update
-```
-
-## Recommendations
+## 🧞 Available Tasks
+
+| Command              | Action                                                   |
+| :------------------- | :------------------------------------------------------- |
+| `pnpm install`       | Installs dependencies                                    |
+| `pnpm dev`           | Starts local dev server at http://localhost:5173/        |
+| `pnpm build`         | Build your production site to `./dist/`                  |
+| `pnpm preview`       | Preview your build locally, before deploying             |
+| `pnpm test`          | Unit tests your code with vitest                         |
+| `pnpm e2e`           | E2E tests your code with playwright                      |
+| `pnpm lint`          | Lints everything with eslint                             |
+| `pnpm lint:fix`      | Fixes lint errors with eslint                            |
+| `pnpm format`        | Checks formatting with prettier                          |
+| `pnpm format:fix`    | Fixes formatting errors with prettier                    |
+| `pnpm typecheck`     | Checks types with TypeScript                             |
+| `pnpm deps:update`   | Interactively updates dependencies                       |
+| `pnpm stories`       | Starts storybook at http://localhost:6006                |
+| `pnpm stories:build` | Build your production storybook to `./storybook-static/` |
+
+## 💡 Recommendations
 
 If you need to do more, I recommend the following libraries:
 
@@ -137,6 +102,7 @@ If you need to do more, I recommend the following libraries:
 [react]: https://react.dev
 [TypeScript]: https://www.typescriptlang.org
 [tailwindcss]: https://tailwindcss.com
+[storybook]: https://storybook.js.org/
 [eslint]: https://eslint.org
 [vitest]: https://vitest.dev/guide/why.html
 [Testing Library]: https://testing-library.com/docs/guiding-principles

package.json

@@ -15,7 +15,9 @@
     "test": "vitest",
     "coverage": "vitest run --coverage",
     "e2e": "playwright test",
-    "deps:update": "pnpm dlx npm-check-updates -ui"
+    "deps:update": "pnpm dlx npm-check-updates -ui",
+    "stories:build": "storybook build",
+    "stories": "storybook dev -p 6006"
   },
   "dependencies": {
     "clsx": "2.0.0",
@@ -24,8 +26,18 @@
   },
   "devDependencies": {
     "@iconify-json/logos": "1.1.38",
+    "@iconify-json/lucide": "1.1.141",
     "@iconify/tailwind": "0.1.3",
     "@playwright/test": "1.40.0",
+    "@storybook/addon-essentials": "7.5.3",
+    "@storybook/addon-interactions": "7.5.3",
+    "@storybook/addon-links": "7.5.3",
+    "@storybook/addon-onboarding": "1.0.8",
+    "@storybook/addon-themes": "7.5.3",
+    "@storybook/blocks": "7.5.3",
+    "@storybook/react": "7.5.3",
+    "@storybook/react-vite": "7.5.3",
+    "@storybook/testing-library": "0.2.2",
     "@tailwindcss/typography": "0.5.10",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "6.1.4",
@@ -51,12 +63,14 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-react-refresh": "0.4.4",
     "eslint-plugin-simple-import-sort": "10.0.0",
+    "eslint-plugin-storybook": "0.6.15",
     "eslint-plugin-testing-library": "6.1.2",
     "gitzy": "4.0.0",
     "happy-dom": "12.10.3",
     "postcss": "8.4.31",
     "prettier": "3.1.0",
     "prettier-plugin-tailwindcss": "0.5.7",
+    "storybook": "7.5.3",
     "tailwindcss": "3.3.5",
     "typescript": "5.2.2",
     "vite": "5.0.0",