feat(storybook): setup (#5)

- setup storybook
- setup basic color palette and variants for button

---------

Co-authored-by: Shayne Preston <shayne.preston@protonmail.com>

.eslintrc

@@ -1,7 +1,8 @@
 {
   "extends": [
     "@remix-run/eslint-config",
-    "@remix-run/eslint-config/node"
+    "@remix-run/eslint-config/node",
+      "plugin:storybook/recommended"
   ],
   "settings": {
     "import/internal-regex": "^@example/"

.gitignore

@@ -16,3 +16,6 @@ yalc.lock
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+*storybook.log
+storybook-static

.prettierignore

@@ -15,3 +15,10 @@ coverage
 
 .yalc
 yalc.lock
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
+storybook-static

package.json

@@ -21,13 +21,15 @@
   "scripts": {
     "____ RUN COMMANDS ___": "",
     "dev": "vite",
+    "dev:storybook": "storybook dev -c storybook -p 6006",
     "start": "cross-env NODE_ENV=production dotenvx run -- node ./build/hono-server/server.js --max-http-header-size 50000",
     "start:docker": "docker run --rm -p 8080:8080 --env-file .env hono-remix-template",
     "____ BUILD COMMANDS ____": "",
     "build": "pnpm run clean:build && pnpm run build:remix && pnpm run build:server",
     "build:remix": "remix vite:build",
     "build:server": "tsc --project ./tsconfig.server.json",
     "build:docker": "docker build -t hono-remix-template .",
+    "build:storybook": "storybook build -c storybook",
     "____ TEST COMMANDS ____": "",
     "test:ci": "pnpm run clean:test && pnpm run test",
     "test": "vitest --coverage=false --watch=false",
@@ -76,12 +78,20 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
     "@dotenvx/dotenvx": "^1.22.0",
     "@hono/vite-dev-server": "^0.16.0",
     "@playwright/test": "^1.48.2",
     "@remix-run/dev": "^2.13.1",
     "@remix-run/eslint-config": "^2.13.1",
     "@remix-run/testing": "^2.13.1",
+    "@storybook/addon-essentials": "^8.4.4",
+    "@storybook/addon-interactions": "^8.4.4",
+    "@storybook/addon-onboarding": "^8.4.4",
+    "@storybook/blocks": "^8.4.4",
+    "@storybook/react": "^8.4.4",
+    "@storybook/react-vite": "^8.4.4",
+    "@storybook/test": "^8.4.4",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@types/node": "^22.9.0",
@@ -90,16 +100,19 @@
     "cross-env": "^7.0.3",
     "eslint": "^8",
     "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-storybook": "^0.11.1",
     "jsdom": "^25.0.1",
     "lint-staged": "^15.2.10",
     "mkcert": "^3.2.0",
     "mkdirp": "^3.0.1",
     "prettier": "^3.3.3",
     "rimraf": "^6.0.1",
+    "storybook": "^8.4.4",
     "tsx": "^4.19.2",
     "typescript": "5.4.5",
     "vite": "^5.4.10",
     "vite-plugin-stylex": "^0.13.0",
+    "vite-tsconfig-paths": "^5.1.3",
     "vitest": "^2.1.4",
     "vitest-axe": "^0.1.0"
   },