From 200fa2fb24b44f53c77ecdb9efb9f00ab860df94 Mon Sep 17 00:00:00 2001 From: zhangtao25 Date: Sat, 16 Nov 2024 22:10:30 +0800 Subject: [PATCH] chore: repo overall update --- packages/canyon-platform/app/globals.css | 92 + packages/canyon-platform/app/page.tsx | 3 +- .../canyon-platform/app/projects/new/page.tsx | 102 +- .../components/qushi-chart.tsx | 97 + packages/canyon-platform/package.json | 5 +- packages/canyon-platform/tailwind.config.ts | 110 +- packages/{ui => canyon-ui}/README.md | 0 packages/canyon-ui/components/app-sidebar.tsx | 175 + packages/canyon-ui/components/nav-main.tsx | 73 + .../canyon-ui/components/nav-projects.tsx | 89 + packages/canyon-ui/components/nav-user.tsx | 114 + .../canyon-ui/components/team-switcher.tsx | 89 + .../canyon-ui/components/ui/accordion.tsx | 58 + .../canyon-ui/components/ui/alert-dialog.tsx | 141 + packages/canyon-ui/components/ui/alert.tsx | 59 + .../canyon-ui/components/ui/aspect-ratio.tsx | 7 + packages/canyon-ui/components/ui/avatar.tsx | 50 + packages/canyon-ui/components/ui/badge.tsx | 36 + .../canyon-ui/components/ui/breadcrumb.tsx | 115 + packages/canyon-ui/components/ui/button.tsx | 56 + packages/canyon-ui/components/ui/calendar.tsx | 66 + packages/canyon-ui/components/ui/card.tsx | 79 + packages/canyon-ui/components/ui/carousel.tsx | 262 ++ packages/canyon-ui/components/ui/chart.tsx | 365 ++ packages/canyon-ui/components/ui/checkbox.tsx | 30 + .../canyon-ui/components/ui/collapsible.tsx | 11 + packages/canyon-ui/components/ui/command.tsx | 153 + .../canyon-ui/components/ui/context-menu.tsx | 200 + packages/canyon-ui/components/ui/dialog.tsx | 122 + packages/canyon-ui/components/ui/drawer.tsx | 118 + .../canyon-ui/components/ui/dropdown-menu.tsx | 200 + packages/canyon-ui/components/ui/form.tsx | 178 + .../canyon-ui/components/ui/hover-card.tsx | 29 + .../canyon-ui/components/ui/input-otp.tsx | 71 + packages/canyon-ui/components/ui/input.tsx | 22 + packages/canyon-ui/components/ui/label.tsx | 26 + packages/canyon-ui/components/ui/menubar.tsx | 236 ++ .../components/ui/navigation-menu.tsx | 128 + .../canyon-ui/components/ui/pagination.tsx | 117 + packages/canyon-ui/components/ui/popover.tsx | 31 + packages/canyon-ui/components/ui/progress.tsx | 28 + .../canyon-ui/components/ui/radio-group.tsx | 44 + .../canyon-ui/components/ui/resizable.tsx | 45 + .../canyon-ui/components/ui/scroll-area.tsx | 48 + packages/canyon-ui/components/ui/select.tsx | 160 + .../canyon-ui/components/ui/separator.tsx | 31 + packages/canyon-ui/components/ui/sheet.tsx | 140 + packages/canyon-ui/components/ui/sidebar.tsx | 763 ++++ packages/canyon-ui/components/ui/skeleton.tsx | 15 + packages/canyon-ui/components/ui/slider.tsx | 28 + packages/canyon-ui/components/ui/sonner.tsx | 31 + packages/canyon-ui/components/ui/switch.tsx | 29 + packages/canyon-ui/components/ui/table.tsx | 117 + packages/canyon-ui/components/ui/tabs.tsx | 55 + packages/canyon-ui/components/ui/textarea.tsx | 22 + packages/canyon-ui/components/ui/toast.tsx | 129 + packages/canyon-ui/components/ui/toaster.tsx | 35 + .../canyon-ui/components/ui/toggle-group.tsx | 61 + packages/canyon-ui/components/ui/toggle.tsx | 45 + packages/canyon-ui/components/ui/tooltip.tsx | 30 + packages/canyon-ui/lib/utils.ts | 6 + packages/canyon-ui/package.json | 68 + packages/canyon-ui/tsconfig.json | 27 + pnpm-lock.yaml | 3216 ++++++++++++++--- 64 files changed, 8661 insertions(+), 427 deletions(-) create mode 100644 packages/canyon-platform/components/qushi-chart.tsx rename packages/{ui => canyon-ui}/README.md (100%) create mode 100644 packages/canyon-ui/components/app-sidebar.tsx create mode 100644 packages/canyon-ui/components/nav-main.tsx create mode 100644 packages/canyon-ui/components/nav-projects.tsx create mode 100644 packages/canyon-ui/components/nav-user.tsx create mode 100644 packages/canyon-ui/components/team-switcher.tsx create mode 100644 packages/canyon-ui/components/ui/accordion.tsx create mode 100644 packages/canyon-ui/components/ui/alert-dialog.tsx create mode 100644 packages/canyon-ui/components/ui/alert.tsx create mode 100644 packages/canyon-ui/components/ui/aspect-ratio.tsx create mode 100644 packages/canyon-ui/components/ui/avatar.tsx create mode 100644 packages/canyon-ui/components/ui/badge.tsx create mode 100644 packages/canyon-ui/components/ui/breadcrumb.tsx create mode 100644 packages/canyon-ui/components/ui/button.tsx create mode 100644 packages/canyon-ui/components/ui/calendar.tsx create mode 100644 packages/canyon-ui/components/ui/card.tsx create mode 100644 packages/canyon-ui/components/ui/carousel.tsx create mode 100644 packages/canyon-ui/components/ui/chart.tsx create mode 100644 packages/canyon-ui/components/ui/checkbox.tsx create mode 100644 packages/canyon-ui/components/ui/collapsible.tsx create mode 100644 packages/canyon-ui/components/ui/command.tsx create mode 100644 packages/canyon-ui/components/ui/context-menu.tsx create mode 100644 packages/canyon-ui/components/ui/dialog.tsx create mode 100644 packages/canyon-ui/components/ui/drawer.tsx create mode 100644 packages/canyon-ui/components/ui/dropdown-menu.tsx create mode 100644 packages/canyon-ui/components/ui/form.tsx create mode 100644 packages/canyon-ui/components/ui/hover-card.tsx create mode 100644 packages/canyon-ui/components/ui/input-otp.tsx create mode 100644 packages/canyon-ui/components/ui/input.tsx create mode 100644 packages/canyon-ui/components/ui/label.tsx create mode 100644 packages/canyon-ui/components/ui/menubar.tsx create mode 100644 packages/canyon-ui/components/ui/navigation-menu.tsx create mode 100644 packages/canyon-ui/components/ui/pagination.tsx create mode 100644 packages/canyon-ui/components/ui/popover.tsx create mode 100644 packages/canyon-ui/components/ui/progress.tsx create mode 100644 packages/canyon-ui/components/ui/radio-group.tsx create mode 100644 packages/canyon-ui/components/ui/resizable.tsx create mode 100644 packages/canyon-ui/components/ui/scroll-area.tsx create mode 100644 packages/canyon-ui/components/ui/select.tsx create mode 100644 packages/canyon-ui/components/ui/separator.tsx create mode 100644 packages/canyon-ui/components/ui/sheet.tsx create mode 100644 packages/canyon-ui/components/ui/sidebar.tsx create mode 100644 packages/canyon-ui/components/ui/skeleton.tsx create mode 100644 packages/canyon-ui/components/ui/slider.tsx create mode 100644 packages/canyon-ui/components/ui/sonner.tsx create mode 100644 packages/canyon-ui/components/ui/switch.tsx create mode 100644 packages/canyon-ui/components/ui/table.tsx create mode 100644 packages/canyon-ui/components/ui/tabs.tsx create mode 100644 packages/canyon-ui/components/ui/textarea.tsx create mode 100644 packages/canyon-ui/components/ui/toast.tsx create mode 100644 packages/canyon-ui/components/ui/toaster.tsx create mode 100644 packages/canyon-ui/components/ui/toggle-group.tsx create mode 100644 packages/canyon-ui/components/ui/toggle.tsx create mode 100644 packages/canyon-ui/components/ui/tooltip.tsx create mode 100644 packages/canyon-ui/lib/utils.ts create mode 100644 packages/canyon-ui/package.json create mode 100755 packages/canyon-ui/tsconfig.json diff --git a/packages/canyon-platform/app/globals.css b/packages/canyon-platform/app/globals.css index 09486a85..807213f2 100644 --- a/packages/canyon-platform/app/globals.css +++ b/packages/canyon-platform/app/globals.css @@ -35,3 +35,95 @@ a:hover { opacity: 0.8; text-decoration: underline; } + + + + +/*shaui*/ + + + +body { + font-family: Arial, Helvetica, sans-serif; +} + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --ring: 0 0% 3.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + --radius: 0.5rem; + --sidebar-background: 0 0% 98%; + --sidebar-foreground: 240 5.3% 26.1%; + --sidebar-primary: 240 5.9% 10%; + --sidebar-primary-foreground: 0 0% 98%; + --sidebar-accent: 240 4.8% 95.9%; + --sidebar-accent-foreground: 240 5.9% 10%; + --sidebar-border: 220 13% 91%; + --sidebar-ring: 217.2 91.2% 59.8%; + } + .dark { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + --sidebar-background: 240 5.9% 10%; + --sidebar-foreground: 240 4.8% 95.9%; + --sidebar-primary: 224.3 76.3% 48%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 240 3.7% 15.9%; + --sidebar-accent-foreground: 240 4.8% 95.9%; + --sidebar-border: 240 3.7% 15.9%; + --sidebar-ring: 217.2 91.2% 59.8%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/packages/canyon-platform/app/page.tsx b/packages/canyon-platform/app/page.tsx index b873ae3d..2520effb 100644 --- a/packages/canyon-platform/app/page.tsx +++ b/packages/canyon-platform/app/page.tsx @@ -1,6 +1,7 @@ +import {Button} from 'canyon-ui/components/ui/button' const HomePage = () => { return
- HomePage +
} diff --git a/packages/canyon-platform/app/projects/new/page.tsx b/packages/canyon-platform/app/projects/new/page.tsx index 10f00233..670767f0 100644 --- a/packages/canyon-platform/app/projects/new/page.tsx +++ b/packages/canyon-platform/app/projects/new/page.tsx @@ -1,7 +1,99 @@ -const ProjectNewPage = () => { - return
- ProjectNewPage -
+"use client" + +import { TrendingUp } from "lucide-react" +import { CartesianGrid, Line, LineChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "canyon-ui/components/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "canyon-ui/components/ui/chart" +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +function QushiChart() { + return ( + + + Line Chart - Multiple + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } /> + + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+
+
+ + + ) } -export default ProjectNewPage +export default QushiChart diff --git a/packages/canyon-platform/components/qushi-chart.tsx b/packages/canyon-platform/components/qushi-chart.tsx new file mode 100644 index 00000000..6a08d364 --- /dev/null +++ b/packages/canyon-platform/components/qushi-chart.tsx @@ -0,0 +1,97 @@ +"use client" + +import { TrendingUp } from "lucide-react" +import { CartesianGrid, Line, LineChart, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/components/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/components/ui/chart" +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig + +export function QushiChart() { + return ( + + + Line Chart - Multiple + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } /> + + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+
+
+ + + ) +} diff --git a/packages/canyon-platform/package.json b/packages/canyon-platform/package.json index 5d704946..ace5150b 100644 --- a/packages/canyon-platform/package.json +++ b/packages/canyon-platform/package.json @@ -19,12 +19,15 @@ "axios": "^1.7.7", "canyon-report": "^0.0.8-beta-49", "dotenv": "^16.4.5", + "lucide-react": "^0.460.0", "next": "15.0.3", "prisma": "^5.22.0", "react": "19.0.0-rc-66855b96-20241106", "react-dom": "19.0.0-rc-66855b96-20241106", + "recharts": "^2.13.3", "shiki": "^1.22.1", - "swr": "^2.2.5" + "swr": "^2.2.5", + "canyon-ui": "workspace:^" }, "devDependencies": { "@iconify/json": "^2.2.242", diff --git a/packages/canyon-platform/tailwind.config.ts b/packages/canyon-platform/tailwind.config.ts index e7b46d70..941bfecc 100644 --- a/packages/canyon-platform/tailwind.config.ts +++ b/packages/canyon-platform/tailwind.config.ts @@ -1,21 +1,95 @@ import type { Config } from "tailwindcss"; -import tailwindcssAnimate from "tailwindcss-animate"; -import { addDynamicIconSelectors } from "@iconify/tailwind"; -export default { - content: [ - "./pages/**/*.{js,ts,jsx,tsx,mdx}", - "./components/**/*.{js,ts,jsx,tsx,mdx}", - "./app/**/*.{js,ts,jsx,tsx,mdx}", - ], - theme: { - extend: { - colors: { - background: "var(--background)", - foreground: "var(--foreground)", - }, - }, - }, - plugins: [tailwindcssAnimate, addDynamicIconSelectors({ - })], +export default { + darkMode: ["class"], + content: [ + "./pages/**/*.{js,ts,jsx,tsx,mdx}", + "./components/**/*.{js,ts,jsx,tsx,mdx}", + "./app/**/*.{js,ts,jsx,tsx,mdx}", + "node_modules/canyon-ui/components/**/*.{js,ts,jsx,tsx,mdx}", + ], + theme: { + extend: { + colors: { + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', + card: { + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))' + }, + popover: { + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))' + }, + primary: { + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))' + }, + secondary: { + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))' + }, + muted: { + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))' + }, + accent: { + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))' + }, + destructive: { + DEFAULT: 'hsl(var(--destructive))', + foreground: 'hsl(var(--destructive-foreground))' + }, + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + chart: { + '1': 'hsl(var(--chart-1))', + '2': 'hsl(var(--chart-2))', + '3': 'hsl(var(--chart-3))', + '4': 'hsl(var(--chart-4))', + '5': 'hsl(var(--chart-5))' + }, + sidebar: { + DEFAULT: 'hsl(var(--sidebar-background))', + foreground: 'hsl(var(--sidebar-foreground))', + primary: 'hsl(var(--sidebar-primary))', + 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))', + accent: 'hsl(var(--sidebar-accent))', + 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))', + border: 'hsl(var(--sidebar-border))', + ring: 'hsl(var(--sidebar-ring))' + } + }, + borderRadius: { + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)' + }, + keyframes: { + 'accordion-down': { + from: { + height: '0' + }, + to: { + height: 'var(--radix-accordion-content-height)' + } + }, + 'accordion-up': { + from: { + height: 'var(--radix-accordion-content-height)' + }, + to: { + height: '0' + } + } + }, + animation: { + 'accordion-down': 'accordion-down 0.2s ease-out', + 'accordion-up': 'accordion-up 0.2s ease-out' + } + } + }, + plugins: [require("tailwindcss-animate")], } satisfies Config; diff --git a/packages/ui/README.md b/packages/canyon-ui/README.md similarity index 100% rename from packages/ui/README.md rename to packages/canyon-ui/README.md diff --git a/packages/canyon-ui/components/app-sidebar.tsx b/packages/canyon-ui/components/app-sidebar.tsx new file mode 100644 index 00000000..94ad3a01 --- /dev/null +++ b/packages/canyon-ui/components/app-sidebar.tsx @@ -0,0 +1,175 @@ +"use client" + +import * as React from "react" +import { + AudioWaveform, + BookOpen, + Bot, + Command, + Frame, + GalleryVerticalEnd, + Map, + PieChart, + Settings2, + SquareTerminal, +} from "lucide-react" + +import { NavMain } from "@/components/nav-main" +import { NavProjects } from "@/components/nav-projects" +import { NavUser } from "@/components/nav-user" +import { TeamSwitcher } from "@/components/team-switcher" +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarHeader, + SidebarRail, +} from "@/components/ui/sidebar" + +// This is sample data. +const data = { + user: { + name: "shadcn", + email: "m@example.com", + avatar: "/avatars/shadcn.jpg", + }, + teams: [ + { + name: "Acme Inc", + logo: GalleryVerticalEnd, + plan: "Enterprise", + }, + { + name: "Acme Corp.", + logo: AudioWaveform, + plan: "Startup", + }, + { + name: "Evil Corp.", + logo: Command, + plan: "Free", + }, + ], + navMain: [ + { + title: "Playground", + url: "#", + icon: SquareTerminal, + isActive: true, + items: [ + { + title: "History", + url: "#", + }, + { + title: "Starred", + url: "#", + }, + { + title: "Settings", + url: "#", + }, + ], + }, + { + title: "Models", + url: "#", + icon: Bot, + items: [ + { + title: "Genesis", + url: "#", + }, + { + title: "Explorer", + url: "#", + }, + { + title: "Quantum", + url: "#", + }, + ], + }, + { + title: "Documentation", + url: "#", + icon: BookOpen, + items: [ + { + title: "Introduction", + url: "#", + }, + { + title: "Get Started", + url: "#", + }, + { + title: "Tutorials", + url: "#", + }, + { + title: "Changelog", + url: "#", + }, + ], + }, + { + title: "Settings", + url: "#", + icon: Settings2, + items: [ + { + title: "General", + url: "#", + }, + { + title: "Team", + url: "#", + }, + { + title: "Billing", + url: "#", + }, + { + title: "Limits", + url: "#", + }, + ], + }, + ], + projects: [ + { + name: "Design Engineering", + url: "#", + icon: Frame, + }, + { + name: "Sales & Marketing", + url: "#", + icon: PieChart, + }, + { + name: "Travel", + url: "#", + icon: Map, + }, + ], +} + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + + + + + + + + + ) +} diff --git a/packages/canyon-ui/components/nav-main.tsx b/packages/canyon-ui/components/nav-main.tsx new file mode 100644 index 00000000..1d71af13 --- /dev/null +++ b/packages/canyon-ui/components/nav-main.tsx @@ -0,0 +1,73 @@ +"use client" + +import { ChevronRight, type LucideIcon } from "lucide-react" + +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/components/ui/collapsible" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, +} from "@/components/ui/sidebar" + +export function NavMain({ + items, +}: { + items: { + title: string + url: string + icon?: LucideIcon + isActive?: boolean + items?: { + title: string + url: string + }[] + }[] +}) { + return ( + + Platform + + {items.map((item) => ( + + + + + {item.icon && } + {item.title} + + + + + + {item.items?.map((subItem) => ( + + + + {subItem.title} + + + + ))} + + + + + ))} + + + ) +} diff --git a/packages/canyon-ui/components/nav-projects.tsx b/packages/canyon-ui/components/nav-projects.tsx new file mode 100644 index 00000000..f50b20de --- /dev/null +++ b/packages/canyon-ui/components/nav-projects.tsx @@ -0,0 +1,89 @@ +"use client" + +import { + Folder, + Forward, + MoreHorizontal, + Trash2, + type LucideIcon, +} from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/components/ui/sidebar" + +export function NavProjects({ + projects, +}: { + projects: { + name: string + url: string + icon: LucideIcon + }[] +}) { + const { isMobile } = useSidebar() + + return ( + + Projects + + {projects.map((item) => ( + + + + + {item.name} + + + + + + + More + + + + + + View Project + + + + Share Project + + + + + Delete Project + + + + + ))} + + + + More + + + + + ) +} diff --git a/packages/canyon-ui/components/nav-user.tsx b/packages/canyon-ui/components/nav-user.tsx new file mode 100644 index 00000000..d12ef780 --- /dev/null +++ b/packages/canyon-ui/components/nav-user.tsx @@ -0,0 +1,114 @@ +"use client" + +import { + BadgeCheck, + Bell, + ChevronsUpDown, + CreditCard, + LogOut, + Sparkles, +} from "lucide-react" + +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "@/components/ui/avatar" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/components/ui/sidebar" + +export function NavUser({ + user, +}: { + user: { + name: string + email: string + avatar: string + } +}) { + const { isMobile } = useSidebar() + + return ( + + + + + + + + CN + +
+ {user.name} + {user.email} +
+ + + + + +
+ + + CN + +
+ {user.name} + {user.email} +
+
+ + + + + + Upgrade to Pro + + + + + + + Account + + + + Billing + + + + Notifications + + + + + + Log out + + + + + + ) +} diff --git a/packages/canyon-ui/components/team-switcher.tsx b/packages/canyon-ui/components/team-switcher.tsx new file mode 100644 index 00000000..2808e0a4 --- /dev/null +++ b/packages/canyon-ui/components/team-switcher.tsx @@ -0,0 +1,89 @@ +"use client" + +import * as React from "react" +import { ChevronsUpDown, Plus } from "lucide-react" + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/components/ui/sidebar" + +export function TeamSwitcher({ + teams, +}: { + teams: { + name: string + logo: React.ElementType + plan: string + }[] +}) { + const { isMobile } = useSidebar() + const [activeTeam, setActiveTeam] = React.useState(teams[0]) + + return ( + + + + + +
+ +
+
+ + {activeTeam.name} + + {activeTeam.plan} +
+ + + + + + Teams + + {teams.map((team, index) => ( + setActiveTeam(team)} + className="gap-2 p-2" + > +
+ +
+ {team.name} + ⌘{index + 1} + + ))} + + +
+ +
+
Add team
+ + + + + + ) +} diff --git a/packages/canyon-ui/components/ui/accordion.tsx b/packages/canyon-ui/components/ui/accordion.tsx new file mode 100644 index 00000000..24c788c2 --- /dev/null +++ b/packages/canyon-ui/components/ui/accordion.tsx @@ -0,0 +1,58 @@ +"use client" + +import * as React from "react" +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import { ChevronDown } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Accordion = AccordionPrimitive.Root + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AccordionItem.displayName = "AccordionItem" + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + +)) +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+ +)) + +AccordionContent.displayName = AccordionPrimitive.Content.displayName + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/packages/canyon-ui/components/ui/alert-dialog.tsx b/packages/canyon-ui/components/ui/alert-dialog.tsx new file mode 100644 index 00000000..25e7b474 --- /dev/null +++ b/packages/canyon-ui/components/ui/alert-dialog.tsx @@ -0,0 +1,141 @@ +"use client" + +import * as React from "react" +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" + +import { cn } from "@/lib/utils" +import { buttonVariants } from "@/components/ui/button" + +const AlertDialog = AlertDialogPrimitive.Root + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger + +const AlertDialogPortal = AlertDialogPrimitive.Portal + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)) +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName + +const AlertDialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogHeader.displayName = "AlertDialogHeader" + +const AlertDialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogFooter.displayName = "AlertDialogFooter" + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName + +const AlertDialogAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName + +const AlertDialogCancel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName + +export { + AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel, +} diff --git a/packages/canyon-ui/components/ui/alert.tsx b/packages/canyon-ui/components/ui/alert.tsx new file mode 100644 index 00000000..41fa7e05 --- /dev/null +++ b/packages/canyon-ui/components/ui/alert.tsx @@ -0,0 +1,59 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const alertVariants = cva( + "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", + { + variants: { + variant: { + default: "bg-background text-foreground", + destructive: + "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)) +Alert.displayName = "Alert" + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertTitle.displayName = "AlertTitle" + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertDescription.displayName = "AlertDescription" + +export { Alert, AlertTitle, AlertDescription } diff --git a/packages/canyon-ui/components/ui/aspect-ratio.tsx b/packages/canyon-ui/components/ui/aspect-ratio.tsx new file mode 100644 index 00000000..d6a5226f --- /dev/null +++ b/packages/canyon-ui/components/ui/aspect-ratio.tsx @@ -0,0 +1,7 @@ +"use client" + +import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" + +const AspectRatio = AspectRatioPrimitive.Root + +export { AspectRatio } diff --git a/packages/canyon-ui/components/ui/avatar.tsx b/packages/canyon-ui/components/ui/avatar.tsx new file mode 100644 index 00000000..51e507ba --- /dev/null +++ b/packages/canyon-ui/components/ui/avatar.tsx @@ -0,0 +1,50 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils" + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/packages/canyon-ui/components/ui/badge.tsx b/packages/canyon-ui/components/ui/badge.tsx new file mode 100644 index 00000000..f000e3ef --- /dev/null +++ b/packages/canyon-ui/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/packages/canyon-ui/components/ui/breadcrumb.tsx b/packages/canyon-ui/components/ui/breadcrumb.tsx new file mode 100644 index 00000000..60e6c96f --- /dev/null +++ b/packages/canyon-ui/components/ui/breadcrumb.tsx @@ -0,0 +1,115 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { ChevronRight, MoreHorizontal } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Breadcrumb = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<"nav"> & { + separator?: React.ReactNode + } +>(({ ...props }, ref) =>