kaze 1.4.0 → 2.0.0

data/stubs/inertia-react-ts/app/assets/tailwind/application.css

@@ -1,9 +1,128 @@
 @import "tailwindcss";
+@import "tw-animate-css";
 
 /* Drive `dark:` from a `dark` class rather than prefers-color-scheme, so the
    appearance preference can override the operating system. The layouts apply
    the class before first paint. */
-@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.87 0 0);
+
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.87 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.985 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
 
 @plugin "@tailwindcss/forms";
 

data/stubs/inertia-react-ts/app/javascript/Components/AppLogo.tsx

@@ -0,0 +1,17 @@
+import ApplicationLogo from '@/Components/ApplicationLogo'
+
+export default function AppLogo() {
+  const appName = import.meta.env.VITE_APP_NAME || 'Rails'
+
+  return (
+    <>
+      <div className="flex aspect-square size-8 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+        <ApplicationLogo className="size-5 fill-current text-white dark:text-black" />
+      </div>
+
+      <div className="ml-1 grid flex-1 text-left text-sm">
+        <span className="mb-0.5 truncate leading-tight font-semibold">{appName}</span>
+      </div>
+    </>
+  )
+}

data/stubs/inertia-react-ts/app/javascript/Components/AppShell.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react'
+import { usePage } from '@inertiajs/react'
+import { SidebarProvider } from '@/Components/ui/sidebar'
+
+export default function AppShell({ children }: PropsWithChildren) {
+  const sidebarOpen = usePage().props.sidebar_open
+
+  return <SidebarProvider defaultOpen={sidebarOpen}>{children}</SidebarProvider>
+}

data/stubs/inertia-react-ts/app/javascript/Components/AppSidebar.tsx

@@ -0,0 +1,65 @@
+import { Link } from '@inertiajs/react'
+import { BookOpen, FolderGit2, LayoutGrid } from 'lucide-react'
+import AppLogo from '@/Components/AppLogo'
+import NavFooter from '@/Components/NavFooter'
+import NavMain from '@/Components/NavMain'
+import NavUser from '@/Components/NavUser'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/Components/ui/sidebar'
+import { dashboard_path } from '@/routes'
+import { NavItem } from '@/types'
+
+const mainNavItems: NavItem[] = [
+  {
+    title: 'Dashboard',
+    href: dashboard_path(),
+    icon: LayoutGrid,
+  },
+]
+
+const footerNavItems: NavItem[] = [
+  {
+    title: 'Repository',
+    href: 'https://github.com/cuonggt/kaze',
+    icon: FolderGit2,
+  },
+  {
+    title: 'Documentation',
+    href: 'https://github.com/cuonggt/kaze#readme',
+    icon: BookOpen,
+  },
+]
+
+export default function AppSidebar() {
+  return (
+    <Sidebar collapsible="icon" variant="inset">
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <Link href={dashboard_path()} prefetch>
+                <AppLogo />
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <NavMain items={mainNavItems} />
+      </SidebarContent>
+
+      <SidebarFooter>
+        <NavFooter items={footerNavItems} className="mt-auto" />
+        <NavUser />
+      </SidebarFooter>
+    </Sidebar>
+  )
+}

data/stubs/inertia-react-ts/app/javascript/Components/AppSidebarHeader.tsx

@@ -0,0 +1,14 @@
+import Breadcrumbs from '@/Components/Breadcrumbs'
+import { SidebarTrigger } from '@/Components/ui/sidebar'
+import { BreadcrumbItem } from '@/types'
+
+export default function AppSidebarHeader({ breadcrumbs = [] }: { breadcrumbs?: BreadcrumbItem[] }) {
+  return (
+    <header className="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/50 px-6 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4">
+      <div className="flex items-center gap-2">
+        <SidebarTrigger className="-ml-1" />
+        <Breadcrumbs breadcrumbs={breadcrumbs} />
+      </div>
+    </header>
+  )
+}

data/stubs/inertia-react-ts/app/javascript/Components/Breadcrumbs.tsx

@@ -0,0 +1,43 @@
+import { Fragment } from 'react'
+import { Link } from '@inertiajs/react'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/Components/ui/breadcrumb'
+import { BreadcrumbItem as BreadcrumbItemType } from '@/types'
+
+export default function Breadcrumbs({ breadcrumbs }: { breadcrumbs: BreadcrumbItemType[] }) {
+  if (breadcrumbs.length === 0) {
+    return null
+  }
+
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        {breadcrumbs.map((item, index) => {
+          const isLast = index === breadcrumbs.length - 1
+
+          return (
+            <Fragment key={item.href}>
+              <BreadcrumbItem>
+                {isLast ? (
+                  <BreadcrumbPage>{item.title}</BreadcrumbPage>
+                ) : (
+                  <BreadcrumbLink asChild>
+                    <Link href={item.href}>{item.title}</Link>
+                  </BreadcrumbLink>
+                )}
+              </BreadcrumbItem>
+
+              {!isLast && <BreadcrumbSeparator />}
+            </Fragment>
+          )
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}

data/stubs/inertia-react-ts/app/javascript/Components/Heading.tsx

@@ -0,0 +1,19 @@
+export default function Heading({
+  title,
+  description,
+  variant = 'default',
+}: {
+  title: string
+  description?: string
+  variant?: 'default' | 'small'
+}) {
+  return (
+    <header className={variant === 'small' ? '' : 'mb-8 space-y-0.5'}>
+      <h2 className={variant === 'small' ? 'mb-0.5 text-base font-medium' : 'text-xl font-semibold tracking-tight'}>
+        {title}
+      </h2>
+
+      {description && <p className="text-sm text-muted-foreground">{description}</p>}
+    </header>
+  )
+}

data/stubs/inertia-react-ts/app/javascript/Components/InputError.tsx

@@ -6,7 +6,7 @@ export default function InputError({
   ...props
 }: HTMLAttributes<HTMLParagraphElement> & { message?: string }) {
   return message ? (
-    <p {...props} className={`text-sm text-red-600 dark:text-red-400 ${className}`}>
+    <p {...props} className={`text-sm text-destructive ${className}`}>
       {message}
     </p>
   ) : null

data/stubs/inertia-react-ts/app/javascript/Components/NavFooter.tsx

@@ -0,0 +1,32 @@
+import { ComponentPropsWithoutRef } from 'react'
+import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/Components/ui/sidebar'
+import { cn } from '@/lib/utils'
+import { NavItem } from '@/types'
+
+export default function NavFooter({
+  items,
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof SidebarGroup> & { items: NavItem[] }) {
+  return (
+    <SidebarGroup {...props} className={cn('group-data-[collapsible=icon]:p-0', className)}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton
+                asChild
+                className="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100"
+              >
+                <a href={item.href} target="_blank" rel="noopener noreferrer">
+                  {item.icon && <item.icon className="h-5 w-5" />}
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}

data/stubs/inertia-react-ts/app/javascript/Components/NavMain.tsx

@@ -0,0 +1,32 @@
+import { Link, usePage } from '@inertiajs/react'
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/Components/ui/sidebar'
+import { NavItem } from '@/types'
+
+export default function NavMain({ items }: { items: NavItem[] }) {
+  const { url } = usePage()
+
+  return (
+    <SidebarGroup className="px-2 py-0">
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+
+      <SidebarMenu>
+        {items.map((item) => (
+          <SidebarMenuItem key={item.title}>
+            <SidebarMenuButton asChild isActive={url.startsWith(item.href)} tooltip={{ children: item.title }}>
+              <Link href={item.href} prefetch>
+                {item.icon && <item.icon />}
+                <span>{item.title}</span>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}

data/stubs/inertia-react-ts/app/javascript/Components/NavUser.tsx

@@ -0,0 +1,39 @@
+import { usePage } from '@inertiajs/react'
+import { ChevronsUpDown } from 'lucide-react'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/Components/ui/dropdown-menu'
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/Components/ui/sidebar'
+import UserInfo from '@/Components/UserInfo'
+import UserMenuContent from '@/Components/UserMenuContent'
+import { useIsMobile } from '@/hooks/use-mobile'
+
+export default function NavUser() {
+  const user = usePage().props.auth.user
+  const { state } = useSidebar()
+  const isMobile = useIsMobile()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="group text-sidebar-accent-foreground data-[state=open]:bg-sidebar-accent"
+            >
+              <UserInfo user={user} />
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="end"
+            side={isMobile ? 'bottom' : state === 'collapsed' ? 'left' : 'bottom'}
+          >
+            <UserMenuContent user={user} />
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

data/stubs/inertia-react-ts/app/javascript/Components/UserInfo.tsx

@@ -0,0 +1,23 @@
+import { Avatar, AvatarFallback } from '@/Components/ui/avatar'
+import { useInitials } from '@/hooks/use-initials'
+import { User } from '@/types'
+
+export default function UserInfo({ user, showEmail = false }: { user: User; showEmail?: boolean }) {
+  const getInitials = useInitials()
+
+  return (
+    <>
+      <Avatar className="h-8 w-8 overflow-hidden rounded-full">
+        <AvatarFallback className="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
+          {getInitials(user.name)}
+        </AvatarFallback>
+      </Avatar>
+
+      <div className="grid flex-1 text-left text-sm leading-tight">
+        <span className="truncate font-medium">{user.name}</span>
+
+        {showEmail && <span className="truncate text-xs text-muted-foreground">{user.email}</span>}
+      </div>
+    </>
+  )
+}

data/stubs/inertia-react-ts/app/javascript/Components/UserMenuContent.tsx

@@ -0,0 +1,57 @@
+import { Link, router } from '@inertiajs/react'
+import { LogOut, Settings } from 'lucide-react'
+import {
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from '@/Components/ui/dropdown-menu'
+import UserInfo from '@/Components/UserInfo'
+import { useMobileNavigation } from '@/hooks/use-mobile-navigation'
+import { logout_path, profile_edit_path } from '@/routes'
+import { User } from '@/types'
+
+export default function UserMenuContent({ user }: { user: User }) {
+  const cleanup = useMobileNavigation()
+
+  const handleLogout = () => {
+    cleanup()
+    router.flushAll()
+  }
+
+  return (
+    <>
+      <DropdownMenuLabel className="p-0 font-normal">
+        <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+          <UserInfo user={user} showEmail />
+        </div>
+      </DropdownMenuLabel>
+
+      <DropdownMenuSeparator />
+
+      <DropdownMenuGroup>
+        <DropdownMenuItem asChild>
+          <Link className="block w-full cursor-pointer" href={profile_edit_path()} prefetch onClick={cleanup}>
+            <Settings className="mr-2" />
+            Settings
+          </Link>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+
+      <DropdownMenuSeparator />
+
+      <DropdownMenuItem asChild>
+        <Link
+          className="block w-full cursor-pointer"
+          href={logout_path()}
+          method="post"
+          as="button"
+          onClick={handleLogout}
+        >
+          <LogOut className="mr-2" />
+          Log out
+        </Link>
+      </DropdownMenuItem>
+    </>
+  )
+}

data/stubs/inertia-react-ts/app/javascript/Components/ui/avatar.tsx

@@ -0,0 +1,51 @@
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

data/stubs/inertia-react-ts/app/javascript/Components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}