feat: use monorepo (#17)

* ci: update release config

* chore: monorepo

* chore: bump turbo

* fix: turbo config

* feat: enable turbo new tui

* feat: new docs

* feat: update docs

* feat: split ui to  package

* docs: update docs

* feat: add `web` package

* feat: add `tauri` package

* chore: remove deprecated docs

* feat:  package

* chore: remove internal pro-components

* feat: change the menu control icon

* feat: internal storybook

* chore: eslint fix quiet

* fix: fix table schema

* fix: filed

.github/workflows/gh-deploy.yml

@@ -31,20 +31,19 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
         with:
-          fetch-depth: 0 # 如果未启用 lastUpdated，则不需要
-      - uses: pnpm/action-setup@v3 # 如果使用 pnpm，请取消注释
-      # - uses: oven-sh/setup-bun@v1 # 如果使用 Bun，请取消注释
+          fetch-depth: 0
+      - uses: pnpm/action-setup@v3
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: pnpm # 或 pnpm / yarn
+          cache: pnpm
       - name: Setup Pages
         uses: actions/configure-pages@v4
       - name: Install dependencies
-        run: pnpm install # 或 pnpm install / yarn install / bun install
+        run: pnpm install
       - name: Build with VitePress
-        run: pnpm docs:build # 或 pnpm docs:build / yarn docs:build / bun run docs:build
+        run: pnpm docs:build
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

.github/workflows/release.yml

@@ -1,22 +1,36 @@
 name: Release
 
+permissions:
+  contents: write
+  id-token: write
+
 on:
-  push:
-    tags:
-      - "v*"
+  workflow_dispatch:
 
 jobs:
   release:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: git config
         run: |
           git config user.name "${ACTION_ACTOR}"
           git config user.email "${ACTION_ACTOR}@users.noreply.github.com"
-      - run: npm install
-      - run: npm run release
+
+      - name: Set node
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          registry-url: "https://registry.npmjs.org"
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Release
+        run: pnpm run release --verbose
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -33,6 +33,16 @@ dist-ssr
 docs/.vitepress/dist
 docs/.vitepress/cache
 
-
 # vitest
 coverage/
+
+# turbo
+.turbo
+
+# next.js
+/.next/
+/out/
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.vscode/settings.json

@@ -55,5 +55,18 @@
   "i18n-ally.localesPaths": "locales",
   "i18n-ally.displayLanguage": "zh-CN",
   "typescript.tsdk": "node_modules/typescript/lib",
-  "cSpell.words": ["autodocs", "hookform", "lucide", "ofetch", "tanstack"]
+  "cSpell.words": [
+    "autodocs",
+    "classname",
+    "clsx",
+    "hono",
+    "hookform",
+    "hyoban",
+    "lucide",
+    "ofetch",
+    "tanstack",
+    "tsup"
+  ],
+  "typescript.preferences.autoImportFileExcludePatterns": ["react-day-picker"],
+  "typescript.preferences.importModuleSpecifier": "shortest"
 }

apps/admin/.storybook/Introduction.mdx

@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Introduction" />
+
+# Welcome to Admin UI Storybook
+
+This is a UI component library built with React, Tailwind CSS, and Shadcn UI.
+
+## Getting Started
+
+Our component library provides a set of reusable components that follow modern design principles and best practices.
+
+### Key Features
+
+- 🎨 Built with Tailwind CSS
+- 🔧 Powered by Shadcn UI
+- ⚛️ React Components
+- 📱 Responsive Design
+- 🌙 Dark Mode Support
+- ♿ Accessibility First
+
+### Component Categories
+
+- **Layout Components**: Sidebar, Layout, Container
+- **Data Display**: Tables, Cards, Lists
+- **Form Elements**: Input, Select, Checkbox
+- **Feedback**: Toast, Alert, Modal
+- **Navigation**: Breadcrumb, Menu, Tabs
+
+## Installation

.storybook/ThemeChanger.tsx → apps/admin/.storybook/ThemeChanger.tsx

@@ -1,9 +1,9 @@
+import { Button } from "@repo/ui/button"
 import { addons } from "@storybook/manager-api"
+import { useTheme } from "@storybook/theming"
 import { Moon, Sun } from "lucide-react"
 import * as React from "react"
 
-import { useTheme } from "../src/components/theme/theme-provider"
-import { Button } from "../src/components/ui/button"
 import { darkTheme, lightTheme } from "./theme"
 
 export function ThemeChanger() {

apps/admin/.storybook/main.ts

@@ -0,0 +1,28 @@
+import { dirname, join } from "node:path"
+
+import type { StorybookConfig } from "@storybook/react-vite"
+
+const config: StorybookConfig = {
+  stories: [
+    "../src/**/*.mdx",
+    "./**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("storybook-dark-mode"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+  docs: {},
+}
+
+export default config
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")))
+}

.storybook/preview.tsx → apps/admin/.storybook/preview.tsx

@@ -1,4 +1,4 @@
-import "../src/styles/index.css"
+import "@repo/ui/globals.css"
 
 import type { Preview } from "@storybook/react"
 import { themes } from "@storybook/theming"

apps/admin/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "admin",
+  "type": "module",
+  "version": "1.1.0",
+  "private": true,
+  "packageManager": "[email protected]",
+  "homepage": "https://github.com/TinsFox/shadcnui-boilerplate",
+  "repository": {
+    "url": "https://github.com/TinsFox/shadcnui-boilerplate",
+    "type": "git"
+  },
+  "scripts": {
+    "build": "tsc && vite build",
+    "build-storybook": "storybook build",
+    "commit": "commit",
+    "commitlint": "commitlint --edit",
+    "coverage": "vitest run --coverage",
+    "dev": "vite dev",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
+    "prepare": "test -f .env || cp .env.example .env",
+    "preview": "vite preview",
+    "start": "tsc && vite build && vite preview",
+    "storybook": "storybook dev -p 6006",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui",
+    "test:watch": "vitest watch"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.9.1",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@repo/pro-components": "workspace:*",
+    "@repo/ui": "workspace:*",
+    "@tanstack/react-query": "^5.59.17",
+    "@tanstack/react-table": "^8.20.5",
+    "clsx": "^2.1.1",
+    "date-fns": "^2.30.0",
+    "dotenv": "^16.4.5",
+    "framer-motion": "^11.11.11",
+    "i18next": "^23.16.4",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "input-otp": "^1.4.0",
+    "jotai": "^2.10.1",
+    "lodash-es": "^4.17.21",
+    "lucide-react": "^0.429.0",
+    "ofetch": "^1.4.1",
+    "qrcode.react": "^4.1.0",
+    "react": "^18.3.1",
+    "react-day-picker": "^8.10.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.1",
+    "react-hotkeys-hook": "^4.6.1",
+    "react-i18next": "^15.1.0",
+    "react-markdown": "^9.0.1",
+    "react-resizable-panels": "^2.1.6",
+    "react-router-dom": "^6.27.0",
+    "recharts": "2.13.0-alpha.4",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.0",
+    "sonner": "^1.6.1",
+    "storybook-dark-mode": "^4.0.2",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.9.9",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@faker-js/faker": "^8.4.1",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-links": "^8.4.5",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/manager-api": "^8.4.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-vite": "^8.4.5",
+    "@storybook/test": "^8.4.5",
+    "@storybook/theming": "^8.4.5",
+    "@t3-oss/env-core": "^0.11.1",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tanstack/react-query-devtools": "^5.59.17",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^20.17.5",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react-swc": "^3.7.1",
+    "@vitest/coverage-v8": "^1.6.0",
+    "@vitest/ui": "^1.6.0",
+    "autoprefixer": "^10.4.20",
+    "click-to-react-component": "^1.1.0",
+    "jsdom": "^25.0.1",
+    "postcss": "^8.4.47",
+    "storybook": "^8.4.5",
+    "tailwindcss": "^3.4.14",
+    "turbo": "^2.2.3",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10",
+    "vite-plugin-html": "^3.2.2",
+    "vite-tsconfig-paths": "^5.0.1",
+    "vitepress": "^1.4.3",
+    "vitest": "^2.1.4"
+  }
+}

apps/admin/src/components/announcement.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { BrowserRouter } from "react-router-dom"
+
+import { Announcement } from "./announcement"
+
+const meta = {
+  title: "Components/Announcement",
+  component: Announcement,
+  decorators: [
+    (Story) => (
+      <BrowserRouter>
+        <Story />
+      </BrowserRouter>
+    ),
+  ],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Announcement>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

src/components/announcement.tsx → apps/admin/src/components/announcement.tsx

@@ -1,9 +1,8 @@
 import { ArrowRightIcon } from "@radix-ui/react-icons"
+import { Separator } from "@repo/ui/separator"
 import { PieChart } from "lucide-react"
 import { Link } from "react-router-dom"
 
-import { Separator } from "@/ui/separator"
-
 export function Announcement() {
   return (
     <Link

src/components/common/ErrorElement.tsx → apps/admin/src/components/common/ErrorElement.tsx

@@ -1,4 +1,5 @@
 import pkg from "@pkg"
+import { Button } from "@repo/ui/button"
 import { useEffect, useRef } from "react"
 import { isRouteErrorResponse, useRouteError } from "react-router-dom"
 import { toast } from "sonner"
@@ -7,8 +8,6 @@ import { Logo } from "@/components/icons/logo"
 import { attachOpenInEditor } from "@/lib/dev"
 import { getNewIssueUrl } from "@/lib/issues"
 
-import { Button } from "../ui/button"
-
 export function ErrorElement() {
   const error = useRouteError()
   const message = isRouteErrorResponse(error) ?

src/components/common/NotFound.tsx → apps/admin/src/components/common/NotFound.tsx

@@ -1,8 +1,8 @@
+import { buttonVariants } from "@repo/ui/button"
 import { m } from "framer-motion"
 import { useNavigate } from "react-router-dom"
 
 import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/ui/button"
 
 export const NotFound = () => {
   const navigate = useNavigate()

src/components/date-picker-with-range.tsx → apps/admin/src/components/date-picker-with-range.tsx

@@ -1,15 +1,11 @@
+import { Button } from "@repo/ui/button"
+import { Calendar } from "@repo/ui/calendar"
+import { Popover, PopoverContent, PopoverTrigger } from "@repo/ui/popover"
 import { addDays, format } from "date-fns"
 import { Calendar as CalendarIcon } from "lucide-react"
 import * as React from "react"
 import type { DateRange } from "react-day-picker"
 
-import { Button } from "@/components/ui/button"
-import { Calendar } from "@/components/ui/calendar"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
 import { cn } from "@/lib/utils"
 
 export default function DatePickerWithRange({