From 6339aaa31596c8cab53e0c522bb311548bb784f4 Mon Sep 17 00:00:00 2001 From: shadcn Date: Wed, 5 Feb 2025 17:49:20 +0400 Subject: [PATCH] (7/n) shadcn: improve focus-visible for all elements (#6573) * feat: focus visible colors * fix: lint * fix: tabs --- apps/v4/app/(app)/layout.tsx | 36 +++----- apps/v4/app/(app)/page.tsx | 2 +- apps/v4/app/globals.css | 4 +- apps/v4/components/app-sidebar.tsx | 66 +++++++++++++- apps/v4/components/button-demo.tsx | 91 ++++++++++++++++--- apps/v4/components/chart-demo.tsx | 2 +- apps/v4/components/input-demo.tsx | 1 + apps/v4/components/nav-header.tsx | 32 +++++++ apps/v4/components/nav-main.tsx | 73 --------------- apps/v4/components/nav-projects.tsx | 89 ------------------ apps/v4/components/sheet-demo.tsx | 8 +- apps/v4/components/textarea-demo.tsx | 1 + apps/v4/registry/new-york-v4/ui/accordion.tsx | 2 +- apps/v4/registry/new-york-v4/ui/badge.tsx | 2 +- apps/v4/registry/new-york-v4/ui/button.tsx | 8 +- apps/v4/registry/new-york-v4/ui/checkbox.tsx | 2 +- apps/v4/registry/new-york-v4/ui/input-otp.tsx | 2 +- apps/v4/registry/new-york-v4/ui/input.tsx | 2 +- .../new-york-v4/ui/navigation-menu.tsx | 6 +- .../registry/new-york-v4/ui/radio-group.tsx | 6 +- .../registry/new-york-v4/ui/scroll-area.tsx | 2 +- apps/v4/registry/new-york-v4/ui/select.tsx | 2 +- apps/v4/registry/new-york-v4/ui/sidebar.tsx | 7 +- apps/v4/registry/new-york-v4/ui/switch.tsx | 2 +- apps/v4/registry/new-york-v4/ui/tabs.tsx | 19 +++- apps/v4/registry/new-york-v4/ui/textarea.tsx | 2 +- apps/v4/registry/new-york-v4/ui/toggle.tsx | 2 +- .../r/styles/new-york-v4/accordion.json | 2 +- .../public/r/styles/new-york-v4/badge.json | 2 +- .../public/r/styles/new-york-v4/button.json | 2 +- .../public/r/styles/new-york-v4/checkbox.json | 2 +- .../r/styles/new-york-v4/input-otp.json | 2 +- .../public/r/styles/new-york-v4/input.json | 2 +- .../r/styles/new-york-v4/navigation-menu.json | 2 +- .../r/styles/new-york-v4/radio-group.json | 2 +- .../r/styles/new-york-v4/scroll-area.json | 2 +- .../public/r/styles/new-york-v4/select.json | 2 +- .../public/r/styles/new-york-v4/sidebar.json | 2 +- .../public/r/styles/new-york-v4/switch.json | 2 +- .../www/public/r/styles/new-york-v4/tabs.json | 2 +- .../public/r/styles/new-york-v4/textarea.json | 2 +- .../public/r/styles/new-york-v4/toggle.json | 2 +- package.json | 2 +- 43 files changed, 246 insertions(+), 257 deletions(-) create mode 100644 apps/v4/components/nav-header.tsx delete mode 100644 apps/v4/components/nav-main.tsx delete mode 100644 apps/v4/components/nav-projects.tsx diff --git a/apps/v4/app/(app)/layout.tsx b/apps/v4/app/(app)/layout.tsx index 2d7abfb0b5..e2f94d0136 100644 --- a/apps/v4/app/(app)/layout.tsx +++ b/apps/v4/app/(app)/layout.tsx @@ -1,13 +1,8 @@ -import Link from "next/link" +import { cookies } from "next/headers" import { AppSidebar } from "@/components/app-sidebar" import { ModeSwitcher } from "@/components/mode-switcher" -import { - NavigationMenu, - NavigationMenuItem, - NavigationMenuLink, - NavigationMenuList, -} from "@/registry/new-york-v4/ui/navigation-menu" +import { NavHeader } from "@/components/nav-header" import { Separator } from "@/registry/new-york-v4/ui/separator" import { SidebarInset, @@ -15,34 +10,27 @@ import { SidebarTrigger, } from "@/registry/new-york-v4/ui/sidebar" -export default function AppLayout({ +export default async function AppLayout({ children, }: Readonly<{ children: React.ReactNode }>) { + const cookieStore = await cookies() + const defaultOpen = cookieStore.get("sidebar_state")?.value === "true" + return ( - +
- + - - - - - Home - - - - - Charts - - - - +
diff --git a/apps/v4/app/(app)/page.tsx b/apps/v4/app/(app)/page.tsx index cccd184bb3..a8c87754b6 100644 --- a/apps/v4/app/(app)/page.tsx +++ b/apps/v4/app/(app)/page.tsx @@ -83,7 +83,7 @@ export default function SinkPage() { - + diff --git a/apps/v4/app/globals.css b/apps/v4/app/globals.css index b1df394a45..dd34342a71 100644 --- a/apps/v4/app/globals.css +++ b/apps/v4/app/globals.css @@ -29,7 +29,7 @@ --chart-3: hsl(197 37% 24%); --chart-4: hsl(43 74% 66%); --chart-5: hsl(27 87% 67%); - --radius: 0.65rem; + --radius: 0.6rem; --sidebar-background: hsl(0 0% 98%); --sidebar-foreground: hsl(240 5.3% 26.1%); --sidebar-primary: hsl(240 5.9% 10%); @@ -136,7 +136,7 @@ @layer base { * { - @apply border-border; + @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; diff --git a/apps/v4/components/app-sidebar.tsx b/apps/v4/components/app-sidebar.tsx index 19477bb9d5..391e528453 100644 --- a/apps/v4/components/app-sidebar.tsx +++ b/apps/v4/components/app-sidebar.tsx @@ -6,25 +6,37 @@ import { AudioWaveform, BookOpen, Bot, + ChevronRightIcon, Command, GalleryVerticalEnd, + Search, Settings2, SquareTerminal, } from "lucide-react" -import { NavMain } from "@/registry/new-york-v4/blocks/sidebar-07/components/nav-main" import { NavUser } from "@/registry/new-york-v4/blocks/sidebar-07/components/nav-user" import { TeamSwitcher } from "@/registry/new-york-v4/blocks/sidebar-07/components/team-switcher" +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/registry/new-york-v4/ui/collapsible" +import { Label } from "@/registry/new-york-v4/ui/label" import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, + SidebarGroupContent, SidebarGroupLabel, SidebarHeader, + SidebarInput, SidebarMenu, SidebarMenuButton, SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, SidebarRail, } from "@/registry/new-york-v4/ui/sidebar" @@ -153,9 +165,59 @@ export function AppSidebar({ ...props }: React.ComponentProps) { > + + +
+ + + + +
+ - + + Platform + + {data.navMain.map((item) => ( + + + + + {item.icon && } + {item.title} + + + + + + {item.items?.map((subItem) => ( + + + + {subItem.title} + + + + ))} + + + + + ))} + + Components diff --git a/apps/v4/components/button-demo.tsx b/apps/v4/components/button-demo.tsx index e79e5312a9..28120886cd 100644 --- a/apps/v4/components/button-demo.tsx +++ b/apps/v4/components/button-demo.tsx @@ -1,23 +1,84 @@ -import { Loader2Icon, MailOpenIcon } from "lucide-react" +import { ArrowRightIcon, Loader2Icon, SendIcon } from "lucide-react" import { Button } from "@/registry/new-york-v4/ui/button" export function ButtonDemo() { return ( -
- - - - - - - - +
+
+ + + + + + + + + +
+
+ + + + + + + + + +
+
+ + + + + + + + + +
) } diff --git a/apps/v4/components/chart-demo.tsx b/apps/v4/components/chart-demo.tsx index 308f7e2374..50f8bbb183 100644 --- a/apps/v4/components/chart-demo.tsx +++ b/apps/v4/components/chart-demo.tsx @@ -4,7 +4,7 @@ import { ChartLineDemo } from "@/components/chart-line-demo" export function ChartDemo() { return ( -
+
diff --git a/apps/v4/components/input-demo.tsx b/apps/v4/components/input-demo.tsx index ffa9a7c2c6..bcd50a6264 100644 --- a/apps/v4/components/input-demo.tsx +++ b/apps/v4/components/input-demo.tsx @@ -4,6 +4,7 @@ export function InputDemo() { return (
+ diff --git a/apps/v4/components/nav-header.tsx b/apps/v4/components/nav-header.tsx new file mode 100644 index 0000000000..f8f79be598 --- /dev/null +++ b/apps/v4/components/nav-header.tsx @@ -0,0 +1,32 @@ +"use client" + +import Link from "next/link" +import { usePathname } from "next/navigation" + +import { + NavigationMenu, + NavigationMenuItem, + NavigationMenuLink, + NavigationMenuList, +} from "@/registry/new-york-v4/ui/navigation-menu" + +export function NavHeader() { + const pathname = usePathname() + + return ( + + + + + Home + + + + + Charts + + + + + ) +} diff --git a/apps/v4/components/nav-main.tsx b/apps/v4/components/nav-main.tsx deleted file mode 100644 index 25b99a8a0c..0000000000 --- a/apps/v4/components/nav-main.tsx +++ /dev/null @@ -1,73 +0,0 @@ -"use client" - -import { ChevronRight, type LucideIcon } from "lucide-react" - -import { - Collapsible, - CollapsibleContent, - CollapsibleTrigger, -} from "@/registry/new-york-v4/ui/collapsible" -import { - SidebarGroup, - SidebarGroupLabel, - SidebarMenu, - SidebarMenuButton, - SidebarMenuItem, - SidebarMenuSub, - SidebarMenuSubButton, - SidebarMenuSubItem, -} from "@/registry/new-york-v4/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/apps/v4/components/nav-projects.tsx b/apps/v4/components/nav-projects.tsx deleted file mode 100644 index e4d55c8a4d..0000000000 --- a/apps/v4/components/nav-projects.tsx +++ /dev/null @@ -1,89 +0,0 @@ -"use client" - -import { - Folder, - Forward, - MoreHorizontal, - Trash2, - type LucideIcon, -} from "lucide-react" - -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuSeparator, - DropdownMenuTrigger, -} from "@/registry/new-york-v4/ui/dropdown-menu" -import { - SidebarGroup, - SidebarGroupLabel, - SidebarMenu, - SidebarMenuAction, - SidebarMenuButton, - SidebarMenuItem, - useSidebar, -} from "@/registry/new-york-v4/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/apps/v4/components/sheet-demo.tsx b/apps/v4/components/sheet-demo.tsx index 70094e3dcc..694ce65835 100644 --- a/apps/v4/components/sheet-demo.tsx +++ b/apps/v4/components/sheet-demo.tsx @@ -29,7 +29,7 @@ export function SheetDemo() { done. -
+
@@ -40,10 +40,10 @@ export function SheetDemo() {
- - - + + + diff --git a/apps/v4/components/textarea-demo.tsx b/apps/v4/components/textarea-demo.tsx index 556c87e122..b4ba5957c3 100644 --- a/apps/v4/components/textarea-demo.tsx +++ b/apps/v4/components/textarea-demo.tsx @@ -5,6 +5,7 @@ export function TextareaDemo() { return (