feat(examples): Add new examples using shadcn/ui cli (#38)

* feat(examples): Add new examples using shadcn/ui cli * chore: improve --------- Co-authored-by: sorrycc <[email protected]>
umijs · Nov 13, 2024 · 7bca6c7 · 7bca6c7
1 parent b34554b
commit 7bca6c7
Show file tree

Hide file tree

Showing 25 changed files with 2,060 additions and 96 deletions.
diff --git a/examples/hackernews/package.json b/examples/hackernews/package.json
@@ -14,7 +14,6 @@
     "firebase": "^2.4.2"
   },
   "devDependencies": {
-    "@total-typescript/tsconfig": "^1.0.4",
     "typescript": "^5.6.3"
   }
 }
diff --git a/examples/normal/package.json b/examples/normal/package.json
@@ -12,7 +12,6 @@
     "@umijs/tnf": "workspace:*"
   },
   "devDependencies": {
-    "@total-typescript/tsconfig": "^1.0.4",
     "typescript": "^5.6.3"
   }
 }
diff --git a/examples/shadcn-cli/.tnfrc.ts b/examples/shadcn-cli/.tnfrc.ts
@@ -0,0 +1,6 @@
+export default {
+  router: {
+    defaultPreload: 'intent',
+  },
+  tailwindcss: true,
+};
diff --git a/examples/shadcn-cli/components.json b/examples/shadcn-cli/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "tailwind": {
+    "config": "./tailwind.config.js",
+    "css": "src/tailwind.css",
+    "baseColor": "zinc",
+    "cssVariables": false,
+    "prefix": "tnf-tw-"
+  },
+  "rsc": false,
+  "aliases": {
+    "utils": "@/lib/utils",
+    "components": "@/components",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "tsx": true
+}
diff --git a/examples/shadcn-cli/package.json b/examples/shadcn-cli/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@examples/shadcn-cli",
+  "private": true,
+  "scripts": {
+    "build": "tnf build",
+    "dev": "tnf dev",
+    "preview": "tnf preview"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.4",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@umijs/tnf": "workspace:*",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.456.0",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.6.3"
+  }
+}
diff --git a/examples/shadcn-cli/public/index.html b/examples/shadcn-cli/public/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="/client.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="/client.js"></script>
+  </body>
+</html>
diff --git a/examples/shadcn-cli/src/components/app-sidebar.tsx b/examples/shadcn-cli/src/components/app-sidebar.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Calendar, Home, Inbox, Search, Settings } from 'lucide-react';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/components/ui/sidebar';
+
+// Menu items.
+const items = [
+  {
+    title: 'Home',
+    url: '#',
+    icon: Home,
+  },
+  {
+    title: 'Inbox',
+    url: '#',
+    icon: Inbox,
+  },
+  {
+    title: 'Calendar',
+    url: '#',
+    icon: Calendar,
+  },
+  {
+    title: 'Search',
+    url: '#',
+    icon: Search,
+  },
+  {
+    title: 'Settings',
+    url: '#',
+    icon: Settings,
+  },
+];
+
+export function AppSidebar() {
+  return (
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Application</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {items.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url}>
+                      <item.icon />
+                      <span>{item.title}</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  );
+}
diff --git a/examples/shadcn-cli/src/components/ui/button.tsx b/examples/shadcn-cli/src/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { type VariantProps, cva } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'tnf-tw-inline-flex tnf-tw-items-center tnf-tw-justify-center tnf-tw-gap-2 tnf-tw-whitespace-nowrap tnf-tw-rounded-md tnf-tw-text-sm tnf-tw-font-medium tnf-tw-ring-offset-white tnf-tw-transition-colors focus-visible:tnf-tw-outline-none focus-visible:tnf-tw-ring-2 focus-visible:tnf-tw-ring-zinc-950 focus-visible:tnf-tw-ring-offset-2 disabled:tnf-tw-pointer-events-none disabled:tnf-tw-opacity-50 [&_svg]:tnf-tw-pointer-events-none [&_svg]:tnf-tw-size-4 [&_svg]:tnf-tw-shrink-0 dark:tnf-tw-ring-offset-zinc-950 dark:focus-visible:tnf-tw-ring-zinc-300',
+  {
+    variants: {
+      variant: {
+        default:
+          'tnf-tw-bg-zinc-900 tnf-tw-text-zinc-50 hover:tnf-tw-bg-zinc-900/90 dark:tnf-tw-bg-zinc-50 dark:tnf-tw-text-zinc-900 dark:hover:tnf-tw-bg-zinc-50/90',
+        destructive:
+          'tnf-tw-bg-red-500 tnf-tw-text-zinc-50 hover:tnf-tw-bg-red-500/90 dark:tnf-tw-bg-red-900 dark:tnf-tw-text-zinc-50 dark:hover:tnf-tw-bg-red-900/90',
+        outline:
+          'tnf-tw-border tnf-tw-border-zinc-200 tnf-tw-bg-white hover:tnf-tw-bg-zinc-100 hover:tnf-tw-text-zinc-900 dark:tnf-tw-border-zinc-800 dark:tnf-tw-bg-zinc-950 dark:hover:tnf-tw-bg-zinc-800 dark:hover:tnf-tw-text-zinc-50',
+        secondary:
+          'tnf-tw-bg-zinc-100 tnf-tw-text-zinc-900 hover:tnf-tw-bg-zinc-100/80 dark:tnf-tw-bg-zinc-800 dark:tnf-tw-text-zinc-50 dark:hover:tnf-tw-bg-zinc-800/80',
+        ghost:
+          'hover:tnf-tw-bg-zinc-100 hover:tnf-tw-text-zinc-900 dark:hover:tnf-tw-bg-zinc-800 dark:hover:tnf-tw-text-zinc-50',
+        link: 'tnf-tw-text-zinc-900 tnf-tw-underline-offset-4 hover:tnf-tw-underline dark:tnf-tw-text-zinc-50',
+      },
+      size: {
+        default: 'tnf-tw-h-10 tnf-tw-px-4 tnf-tw-py-2',
+        sm: 'tnf-tw-h-9 tnf-tw-rounded-md tnf-tw-px-3',
+        lg: 'tnf-tw-h-11 tnf-tw-rounded-md tnf-tw-px-8',
+        icon: 'tnf-tw-h-10 tnf-tw-w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/examples/shadcn-cli/src/components/ui/input.tsx b/examples/shadcn-cli/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'tnf-tw-flex tnf-tw-h-10 tnf-tw-w-full tnf-tw-rounded-md tnf-tw-border tnf-tw-border-zinc-200 tnf-tw-bg-white tnf-tw-px-3 tnf-tw-py-2 tnf-tw-text-base tnf-tw-ring-offset-white file:tnf-tw-border-0 file:tnf-tw-bg-transparent file:tnf-tw-text-sm file:tnf-tw-font-medium file:tnf-tw-text-zinc-950 placeholder:tnf-tw-text-zinc-500 focus-visible:tnf-tw-outline-none focus-visible:tnf-tw-ring-2 focus-visible:tnf-tw-ring-zinc-950 focus-visible:tnf-tw-ring-offset-2 disabled:tnf-tw-cursor-not-allowed disabled:tnf-tw-opacity-50 md:tnf-tw-text-sm dark:tnf-tw-border-zinc-800 dark:tnf-tw-bg-zinc-950 dark:tnf-tw-ring-offset-zinc-950 dark:file:tnf-tw-text-zinc-50 dark:placeholder:tnf-tw-text-zinc-400 dark:focus-visible:tnf-tw-ring-zinc-300',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/examples/shadcn-cli/src/components/ui/separator.tsx b/examples/shadcn-cli/src/components/ui/separator.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cn } from '@/lib/utils';
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref,
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'tnf-tw-shrink-0 tnf-tw-bg-zinc-200 dark:tnf-tw-bg-zinc-800',
+        orientation === 'horizontal'
+          ? 'tnf-tw-h-[1px] tnf-tw-w-full'
+          : 'tnf-tw-h-full tnf-tw-w-[1px]',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };