monorepo

Boshen · Boshen · commit 5a24ba3c8d3b · 2025-09-12T16:12:39.000+08:00
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
@@ -11,6 +11,9 @@
     "test": "vite test"
   },
   "dependencies": {
+    "@vibe/ui": "workspace:*",
+    "@vibe/utils": "workspace:*",
+    "@vibe/shared": "workspace:*",
     "lucide-react": "^0.542.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
diff --git a/apps/dashboard/src/MinificationBenchmarks.tsx b/apps/dashboard/src/MinificationBenchmarks.tsx
@@ -1,6 +1,6 @@
 import { LibraryBenchmarkCard } from './components/minification/LibraryBenchmarkCard';
 import { MinificationStats } from './components/minification/MinificationStats';
-import { libraries } from './utils/minification-data';
+import { libraries } from '@vibe/utils';
 
 function MinificationBenchmarks() {
   return (
diff --git a/apps/dashboard/src/components/dashboard/PerformanceTrendChart.tsx b/apps/dashboard/src/components/dashboard/PerformanceTrendChart.tsx
@@ -2,8 +2,7 @@ import { ArrowRight } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 import rolldownStats from '../../../../../rolldown-version-stats.json';
-import { Button } from '../ui/Button';
-import { Card } from '../ui/Card';
+import { Button, Card } from '@vibe/ui';
 
 const performanceTrend = rolldownStats.slice(-7).map(stat => ({
   version: `v${stat.version}`,
diff --git a/apps/dashboard/src/components/dashboard/RecentActivityChart.tsx b/apps/dashboard/src/components/dashboard/RecentActivityChart.tsx
@@ -1,7 +1,6 @@
 import { Activity } from 'lucide-react';
 import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
-import { Badge } from '../ui/Badge';
-import { Card } from '../ui/Card';
+import { Badge, Card } from '@vibe/ui';
 
 const recentActivityData = [
   { date: 'Mon', commits: 12, issues: 5, prs: 3 },
diff --git a/apps/dashboard/src/components/dashboard/RecentUpdatesCard.tsx b/apps/dashboard/src/components/dashboard/RecentUpdatesCard.tsx
@@ -1,7 +1,6 @@
 import { Package } from 'lucide-react';
 import rolldownStats from '../../../../../rolldown-version-stats.json';
-import { Badge } from '../ui/Badge';
-import { Card } from '../ui/Card';
+import { Badge, Card } from '@vibe/ui';
 
 export function RecentUpdatesCard() {
   return (
diff --git a/apps/dashboard/src/components/dashboard/StatCard.tsx b/apps/dashboard/src/components/dashboard/StatCard.tsx
@@ -1,7 +1,7 @@
 import { TrendingDown, TrendingUp } from 'lucide-react';
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Card } from '../ui/Card';
+import { Card } from '@vibe/ui';
 
 interface StatCardProps {
   title: string;
diff --git a/apps/dashboard/src/components/dashboard/StatsGrid.tsx b/apps/dashboard/src/components/dashboard/StatsGrid.tsx
@@ -1,7 +1,7 @@
 import { Clock, Download, Package, Zap } from 'lucide-react';
 import minificationData from '../../../../../minification-benchmarks-data.json';
 import rolldownStats from '../../../../../rolldown-version-stats.json';
-import { CardGrid } from '../ui/Card';
+import { CardGrid } from '@vibe/ui';
 import { StatCard } from './StatCard';
 
 export function StatsGrid() {
diff --git a/apps/dashboard/src/components/layout/AppBar.tsx b/apps/dashboard/src/components/layout/AppBar.tsx
@@ -1,5 +1,5 @@
 import { Bell, Search, User } from 'lucide-react';
-import { Button } from '../ui/Button';
+import { Button } from '@vibe/ui';
 
 interface AppBarProps {
   title?: string;
diff --git a/apps/dashboard/src/components/rolldown/BuildTimeChart.tsx b/apps/dashboard/src/components/rolldown/BuildTimeChart.tsx
@@ -1,7 +1,7 @@
 import { Bar, BarChart, CartesianGrid, LabelList, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 import * as semver from 'semver';
 import rolldownStats from '../../../../../rolldown-version-stats.json';
-import { buildTimeTooltipFormatter } from '../../utils/rolldown-formatters';
+import { buildTimeTooltipFormatter } from '@vibe/utils';
 
 const buildTimeData = rolldownStats.map(stat => ({
   name: `v${stat.version}`,
diff --git a/apps/dashboard/src/components/rolldown/BundleSizeChart.tsx b/apps/dashboard/src/components/rolldown/BundleSizeChart.tsx
@@ -1,7 +1,7 @@
 import { Bar, BarChart, CartesianGrid, Cell, LabelList, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 import * as semver from 'semver';
 import rolldownStats from '../../../../../rolldown-version-stats.json';
-import { bundleSizeDiffTooltipFormatter, formatNumberWithCommas } from '../../utils/rolldown-formatters';
+import { bundleSizeDiffTooltipFormatter, formatNumberWithCommas } from '@vibe/utils';
 
 const sortedRolldownStats = [...rolldownStats].sort((a, b) => semver.compare(a.version, b.version));
 
diff --git a/apps/dashboard/src/components/rolldown/StatsCards.tsx b/apps/dashboard/src/components/rolldown/StatsCards.tsx
@@ -1,5 +1,5 @@
 import rolldownStats from '../../../../../rolldown-version-stats.json';
-import { formatNumberWithCommas } from '../../utils/rolldown-formatters';
+import { formatNumberWithCommas } from '@vibe/utils';
 
 const buildTimeData = rolldownStats.map(stat => stat.buildTime);
 
diff --git a/apps/dashboard/src/pages/DashboardPage.tsx b/apps/dashboard/src/pages/DashboardPage.tsx
@@ -4,7 +4,7 @@ import { RecentUpdatesCard } from '../components/dashboard/RecentUpdatesCard';
 import { StatsGrid } from '../components/dashboard/StatsGrid';
 import { PageContainer } from '../components/layout/PageContainer';
 
-import { PageHeader } from '../components/shared/PageHeader';
+import { PageHeader } from '@vibe/shared';
 
 function DashboardPage() {
   return (
diff --git a/apps/dashboard/src/pages/MinificationBenchmarksPage.tsx b/apps/dashboard/src/pages/MinificationBenchmarksPage.tsx
@@ -1,9 +1,8 @@
 import { FileDown, Gauge, Timer, Zap } from 'lucide-react';
 import minificationData from '../../../../minification-benchmarks-data.json';
 import { PageContainer } from '../components/layout/PageContainer';
-import { PageHeader } from '../components/shared/PageHeader';
-import { Badge } from '../components/ui/Badge';
-import { Card } from '../components/ui/Card';
+import { PageHeader } from '@vibe/shared';
+import { Badge, Card } from '@vibe/ui';
 import MinificationBenchmarks from '../MinificationBenchmarks';
 
 function MinificationBenchmarksPage() {
diff --git a/apps/dashboard/src/pages/NpmDownloadsPage.tsx b/apps/dashboard/src/pages/NpmDownloadsPage.tsx
@@ -1,8 +1,7 @@
 import { Calendar, Download, Package, TrendingUp } from 'lucide-react';
 import { PageContainer } from '../components/layout/PageContainer';
-import { PageHeader } from '../components/shared/PageHeader';
-import { Badge } from '../components/ui/Badge';
-import { Card } from '../components/ui/Card';
+import { PageHeader } from '@vibe/shared';
+import { Badge, Card } from '@vibe/ui';
 import NpmDownloads from '../NpmDownloads';
 
 function NpmDownloadsPage() {
diff --git a/apps/dashboard/src/pages/RolldownStatsPage.tsx b/apps/dashboard/src/pages/RolldownStatsPage.tsx
@@ -2,9 +2,8 @@ import { BarChart3, Clock, Package, TrendingUp } from 'lucide-react';
 import { useState } from 'react';
 import rolldownStatsData from '../../../../rolldown-version-stats.json';
 import { PageContainer } from '../components/layout/PageContainer';
-import { PageHeader } from '../components/shared/PageHeader';
-import { Badge } from '../components/ui/Badge';
-import { Card } from '../components/ui/Card';
+import { PageHeader } from '@vibe/shared';
+import { Badge, Card } from '@vibe/ui';
 import RolldownStats from '../RolldownStats';
 
 function RolldownStatsPage() {
diff --git a/apps/dashboard/tsconfig.json b/apps/dashboard/tsconfig.json
@@ -2,6 +2,9 @@
   "files": [],
   "references": [
     { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
+    { "path": "./tsconfig.node.json" },
+    { "path": "../../packages/ui" },
+    { "path": "../../packages/utils" },
+    { "path": "../../packages/shared" }
   ]
 }
diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@vibe/shared",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react": "^19.1.1",
+    "recharts": "^2.12.6"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.10",
+    "typescript": "catalog:"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  }
+}
diff --git a/packages/shared/src/PageHeader.tsx b/packages/shared/src/PageHeader.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface PageHeaderProps {
+  title: string;
+  subtitle?: string;
+  icon?: React.ReactNode;
+  action?: React.ReactNode;
+}
+
+export function PageHeader({ title, subtitle, icon, action }: PageHeaderProps) {
+  return (
+    <div className='mb-8'>
+      <div className='flex items-center justify-between'>
+        <div>
+          <h1 className='text-3xl font-bold text-slate-900 dark:text-white flex items-center gap-3'>
+            {icon}
+            {title}
+          </h1>
+          {subtitle && (
+            <p className='mt-2 text-slate-600 dark:text-slate-400'>
+              {subtitle}
+            </p>
+          )}
+        </div>
+        {action}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
@@ -0,0 +1 @@
+export { PageHeader } from './PageHeader'
diff --git a/packages/shared/tsconfig.json b/packages/shared/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "declaration": true,
+    "declarationMap": true,
+    "noEmit": false,
+    "allowImportingTsExtensions": false
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"],
+  "references": [
+    { "path": "../ui" },
+    { "path": "../utils" }
+  ]
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@vibe/ui",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "lucide-react": "^0.542.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "typescript": "catalog:"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  }
+}
diff --git a/packages/ui/src/Badge.tsx b/packages/ui/src/Badge.tsx
@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+
+export interface BadgeProps {
+  children: ReactNode;
+  variant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
+  size?: 'sm' | 'md';
+  className?: string;
+}
+
+export function Badge({
+  children,
+  variant = 'default',
+  size = 'md',
+  className = '',
+}: BadgeProps) {
+  const variantClasses = {
+    default: 'bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300',
+    success: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
+    warning: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400',
+    danger: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
+    info: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
+  };
+
+  const sizeClasses = {
+    sm: 'px-2 py-0.5 text-xs',
+    md: 'px-2.5 py-1 text-sm',
+  };
+
+  return (
+    <span
+      className={`inline-flex items-center font-medium rounded-full ${variantClasses[variant]} ${
+        sizeClasses[size]
+      } ${className}`}
+    >
+      {children}
+    </span>
+  );
+}
diff --git a/packages/ui/src/Button.tsx b/packages/ui/src/Button.tsx
@@ -0,0 +1,49 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+  size?: 'sm' | 'md' | 'lg';
+  icon?: ReactNode;
+  children?: ReactNode;
+}
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  icon,
+  children,
+  className = '',
+  disabled,
+  ...props
+}: ButtonProps) {
+  const baseClasses =
+    'inline-flex items-center justify-center font-medium transition-all duration-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2';
+
+  const variantClasses = {
+    primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600',
+    secondary:
+      'bg-slate-200 text-slate-900 hover:bg-slate-300 focus:ring-slate-500 dark:bg-slate-700 dark:text-white dark:hover:bg-slate-600',
+    ghost:
+      'bg-transparent text-slate-600 hover:bg-slate-100 focus:ring-slate-500 dark:text-slate-300 dark:hover:bg-slate-800',
+    danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 dark:bg-red-500 dark:hover:bg-red-600',
+  };
+
+  const sizeClasses = {
+    sm: 'px-3 py-1.5 text-sm gap-1.5',
+    md: 'px-4 py-2 text-sm gap-2',
+    lg: 'px-6 py-3 text-base gap-2.5',
+  };
+
+  const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : '';
+
+  return (
+    <button
+      className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${disabledClasses} ${className}`}
+      disabled={disabled}
+      {...props}
+    >
+      {icon && <span className='flex-shrink-0'>{icon}</span>}
+      {children}
+    </button>
+  );
+}
diff --git a/packages/ui/src/Card.tsx b/packages/ui/src/Card.tsx
diff --git a/packages/ui/src/Skeleton.tsx b/packages/ui/src/Skeleton.tsx
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
diff --git a/packages/utils/package.json b/packages/utils/package.json
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
diff --git a/packages/utils/src/minification-data.ts b/packages/utils/src/minification-data.ts
diff --git a/packages/utils/src/rolldown-formatters.ts b/packages/utils/src/rolldown-formatters.ts
diff --git a/packages/utils/tsconfig.json b/packages/utils/tsconfig.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tsconfig.json b/tsconfig.json
