🚀 Setup component storybook

.npmrc

@@ -3,3 +3,7 @@
 # @link https://docs.expo.dev/guides/monorepos/#common-issues
 node-linker=hoisted
 strict-peer-dependencies=false
+
+# storybook
+auto-install-peers=true
+legacy-peer-deps=true

apps/storybook/.storybook/main.ts

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

apps/storybook/.storybook/preview.ts

@@ -0,0 +1,28 @@
+import type { Preview, ReactRenderer } from "@storybook/react";
+import { withThemeByClassName } from "@storybook/addon-themes";
+
+import "../src/app/globals.css";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: { toc: true },
+  },
+  decorators: [
+    withThemeByClassName<ReactRenderer>({
+      themes: {
+        light: "light",
+        dark: "dark",
+      },
+      defaultTheme: "light",
+    }),
+  ],
+};
+
+export default preview;

apps/storybook/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/storybook/next.config.js

@@ -0,0 +1,13 @@
+/** @type {import("next").NextConfig} */
+const config = {
+    reactStrictMode: true,
+
+    /** Enables hot reloading for local packages without a build step */
+    transpilePackages: ["@acme/ui"],
+
+    /** We already do linting and typechecking as separate tasks in CI */
+    eslint: { ignoreDuringBuilds: true },
+    typescript: { ignoreBuildErrors: true },
+};
+
+export default config;

apps/nextjs-demo/package.json → apps/storybook/package.json

@@ -1,43 +1,65 @@
 {
-  "name": "@acme/nextjs-demo",
+  "name": "@acme/storybook",
   "version": "0.1.0",
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "next build",
+    "build": "storybook build",
     "clean": "git clean -xdf .next .turbo node_modules",
-    "dev": "next dev",
+    "dev": "storybook dev -p 6006",
     "format": "prettier --check . --ignore-path ../../.gitignore",
     "lint": "next lint",
     "start": "next start",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@acme/ui": "workspace:^0.1.0",
-    "geist": "^1.2.0",
+    "@blocknote/core": "^0.10.1",
+    "@blocknote/react": "^0.10.1",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "class-variance-authority": "^0.7.0",
+    "classnames": "^2.4.0",
+    "clsx": "^2.0.0",
+    "lucide-react": "^0.301.0",
     "next": "^14.0.4",
+    "next-themes": "^0.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "superjson": "2.2.1",
-    "zod": "^3.22.4"
+    "tailwind-merge": "^2.2.0",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@acme/eslint-config": "workspace:^0.2.0",
     "@acme/prettier-config": "workspace:^0.1.0",
     "@acme/tailwind-config": "workspace:^0.1.0",
     "@acme/tsconfig": "workspace:^0.1.0",
+    "@storybook/addon-essentials": "^7.6.6",
+    "@storybook/addon-interactions": "^7.6.6",
+    "@storybook/addon-links": "^7.6.6",
+    "@storybook/addon-onboarding": "^1.0.10",
+    "@storybook/addon-themes": "^7.6.6",
+    "@storybook/blocks": "^7.6.6",
+    "@storybook/nextjs": "^7.6.6",
+    "@storybook/react": "^7.6.6",
+    "@storybook/test": "^7.6.6",
     "@types/node": "^20.10.6",
     "@types/react": "^18.2.46",
     "@types/react-dom": "^18.2.18",
-    "dotenv-cli": "^7.3.0",
+    "autoprefixer": "^10.4.16",
     "eslint": "^8.56.0",
+    "postcss": "^8.4.32",
     "prettier": "^3.1.1",
+    "storybook": "^7.6.6",
     "tailwindcss": "^3.4.0",
     "typescript": "^5.3.3"
   },
   "eslintConfig": {
     "root": true,
     "extends": [
+      "plugin:storybook/recommended",
       "@acme/eslint-config/base",
       "@acme/eslint-config/nextjs",
       "@acme/eslint-config/react"