kaze 1.3.1 → 2.0.0

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

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-primary/10 animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

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

@@ -0,0 +1,55 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 4,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-w-sm rounded-md px-3 py-1.5 text-xs",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

data/stubs/inertia-react-ts/app/javascript/Layouts/AuthenticatedLayout.tsx

@@ -1,130 +1,22 @@
-import { useState, PropsWithChildren, ReactNode } from 'react'
-import ApplicationLogo from '@/Components/ApplicationLogo'
-import Dropdown from '@/Components/Dropdown'
-import NavLink from '@/Components/NavLink'
-import ResponsiveNavLink from '@/Components/ResponsiveNavLink'
-import { Link, usePage } from '@inertiajs/react'
-import { dashboard_path, logout_path, profile_edit_path } from '@/routes'
-
-export default function AuthenticatedLayout({ header, children }: PropsWithChildren<{ header?: ReactNode }>) {
-  const user = usePage().props.auth.user
-
-  const [showingNavigationDropdown, setShowingNavigationDropdown] = useState(false)
-
-  const { pathname = '' } = typeof window !== 'undefined' ? window.location : {}
-
+import { PropsWithChildren } from 'react'
+import AppShell from '@/Components/AppShell'
+import AppSidebar from '@/Components/AppSidebar'
+import AppSidebarHeader from '@/Components/AppSidebarHeader'
+import { SidebarInset } from '@/Components/ui/sidebar'
+import { BreadcrumbItem } from '@/types'
+
+export default function AuthenticatedLayout({
+  breadcrumbs = [],
+  children,
+}: PropsWithChildren<{ breadcrumbs?: BreadcrumbItem[] }>) {
   return (
-    <div className="min-h-screen bg-gray-100">
-      <nav className="bg-white border-b border-gray-100">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between h-16">
-            <div className="flex">
-              <div className="shrink-0 flex items-center">
-                <Link href="/">
-                  <ApplicationLogo className="block h-9 w-auto fill-current text-red-800" />
-                </Link>
-              </div>
-
-              <div className="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
-                <NavLink href={dashboard_path()} active={pathname.match(/dashboard/) != null}>
-                  Dashboard
-                </NavLink>
-              </div>
-            </div>
-
-            <div className="hidden sm:flex sm:items-center sm:ms-6">
-              <div className="ms-3 relative">
-                <Dropdown>
-                  <Dropdown.Trigger>
-                    <span className="inline-flex rounded-md">
-                      <button
-                        type="button"
-                        className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-hidden transition ease-in-out duration-150"
-                      >
-                        {user.name}
-
-                        <svg
-                          className="ms-2 -me-0.5 h-4 w-4"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 20 20"
-                          fill="currentColor"
-                        >
-                          <path
-                            fillRule="evenodd"
-                            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                            clipRule="evenodd"
-                          />
-                        </svg>
-                      </button>
-                    </span>
-                  </Dropdown.Trigger>
-
-                  <Dropdown.Content>
-                    <Dropdown.Link href={profile_edit_path()}>Profile</Dropdown.Link>
-                    <Dropdown.Link href={logout_path()} method="post" as="button">
-                      Log Out
-                    </Dropdown.Link>
-                  </Dropdown.Content>
-                </Dropdown>
-              </div>
-            </div>
-
-            <div className="-me-2 flex items-center sm:hidden">
-              <button
-                onClick={() => setShowingNavigationDropdown((previousState) => !previousState)}
-                className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
-              >
-                <svg className="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                  <path
-                    className={!showingNavigationDropdown ? 'inline-flex' : 'hidden'}
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M4 6h16M4 12h16M4 18h16"
-                  />
-                  <path
-                    className={showingNavigationDropdown ? 'inline-flex' : 'hidden'}
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <div className={(showingNavigationDropdown ? 'block' : 'hidden') + ' sm:hidden'}>
-          <div className="pt-2 pb-3 space-y-1">
-            <ResponsiveNavLink href={dashboard_path()} active={pathname.match(/dashboard/) != null}>
-              Dashboard
-            </ResponsiveNavLink>
-          </div>
-
-          <div className="pt-4 pb-1 border-t border-gray-200">
-            <div className="px-4">
-              <div className="font-medium text-base text-gray-800">{user.name}</div>
-              <div className="font-medium text-sm text-gray-500">{user.email}</div>
-            </div>
-
-            <div className="mt-3 space-y-1">
-              <ResponsiveNavLink href={profile_edit_path()}>Profile</ResponsiveNavLink>
-              <ResponsiveNavLink method="post" href={logout_path()} as="button">
-                Log Out
-              </ResponsiveNavLink>
-            </div>
-          </div>
-        </div>
-      </nav>
-
-      {header && (
-        <header className="bg-white shadow-sm">
-          <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">{header}</div>
-        </header>
-      )}
-
-      <main>{children}</main>
-    </div>
+    <AppShell>
+      <AppSidebar />
+
+      <SidebarInset className="min-w-0 overflow-x-clip">
+        <AppSidebarHeader breadcrumbs={breadcrumbs} />
+        {children}
+      </SidebarInset>
+    </AppShell>
   )
 }

data/stubs/inertia-react-ts/app/javascript/Layouts/GuestLayout.tsx

@@ -4,14 +4,14 @@ import { PropsWithChildren } from 'react'
 
 export default function GuestLayout({ children }: PropsWithChildren) {
   return (
-    <div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
+    <div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-gray-900">
       <div>
         <Link href="/">
           <ApplicationLogo className="w-20 h-20 fill-current text-red-500" />
         </Link>
       </div>
 
-      <div className="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
+      <div className="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-gray-800 shadow-md overflow-hidden sm:rounded-lg">
         {children}
       </div>
     </div>

data/stubs/inertia-react-ts/app/javascript/Layouts/SettingsLayout.tsx

@@ -0,0 +1,57 @@
+import { PropsWithChildren } from 'react'
+import { Link, usePage } from '@inertiajs/react'
+import Heading from '@/Components/Heading'
+import { Button } from '@/Components/ui/button'
+import { Separator } from '@/Components/ui/separator'
+import { cn } from '@/lib/utils'
+import { appearance_edit_path, password_edit_path, profile_edit_path } from '@/routes'
+import { NavItem } from '@/types'
+
+const sidebarNavItems: NavItem[] = [
+  {
+    title: 'Profile',
+    href: profile_edit_path(),
+  },
+  {
+    title: 'Password',
+    href: password_edit_path(),
+  },
+  {
+    title: 'Appearance',
+    href: appearance_edit_path(),
+  },
+]
+
+export default function SettingsLayout({ children }: PropsWithChildren) {
+  const { url } = usePage()
+
+  return (
+    <div className="px-4 py-6">
+      <Heading title="Settings" description="Manage your profile and account settings" />
+
+      <div className="flex flex-col lg:flex-row lg:space-x-12">
+        <aside className="w-full max-w-xl lg:w-48">
+          <nav className="flex flex-col space-y-1 space-x-0" aria-label="Settings">
+            {sidebarNavItems.map((item) => (
+              <Button
+                key={item.href}
+                size="sm"
+                variant="ghost"
+                asChild
+                className={cn('w-full justify-start', { 'bg-muted': url.startsWith(item.href) })}
+              >
+                <Link href={item.href}>{item.title}</Link>
+              </Button>
+            ))}
+          </nav>
+        </aside>
+
+        <Separator className="my-6 lg:hidden" />
+
+        <div className="flex-1 md:max-w-2xl">
+          <section className="max-w-xl space-y-12">{children}</section>
+        </div>
+      </div>
+    </div>
+  )
+}

data/stubs/inertia-react-ts/app/javascript/Pages/Auth/ForgotPassword.tsx

@@ -1,7 +1,7 @@
 import GuestLayout from '@/Layouts/GuestLayout'
+import { Button } from '@/Components/ui/button'
+import { Input } from '@/Components/ui/input'
 import InputError from '@/Components/InputError'
-import PrimaryButton from '@/Components/PrimaryButton'
-import TextInput from '@/Components/TextInput'
 import { Head, useForm } from '@inertiajs/react'
 import { FormEventHandler } from 'react'
 import { password_email_path } from '@/routes'
@@ -29,22 +29,22 @@ export default function ForgotPassword({ status }: { status?: string }) {
       {status && <div className="mb-4 font-medium text-sm text-green-600 dark:text-green-400">{status}</div>}
 
       <form onSubmit={submit}>
-        <TextInput
+        <Input
           id="email"
           type="email"
           name="email"
           value={data.email}
           className="mt-1 block w-full"
-          isFocused={true}
+          autoFocus
           onChange={(e) => setData('email', e.target.value)}
         />
 
         <InputError message={errors.email} className="mt-2" />
 
         <div className="flex items-center justify-end mt-4">
-          <PrimaryButton className="ms-4" disabled={processing}>
+          <Button className="ms-4" disabled={processing}>
             Email Password Reset Link
-          </PrimaryButton>
+          </Button>
         </div>
       </form>
     </GuestLayout>

data/stubs/inertia-react-ts/app/javascript/Pages/Auth/Login.tsx

@@ -1,10 +1,10 @@
 import { FormEventHandler } from 'react'
-import Checkbox from '@/Components/Checkbox'
+import { Button } from '@/Components/ui/button'
+import { Input } from '@/Components/ui/input'
+import { Label } from '@/Components/ui/label'
+import { Checkbox } from '@/Components/ui/checkbox'
 import GuestLayout from '@/Layouts/GuestLayout'
 import InputError from '@/Components/InputError'
-import InputLabel from '@/Components/InputLabel'
-import PrimaryButton from '@/Components/PrimaryButton'
-import TextInput from '@/Components/TextInput'
 import { Head, Link, useForm } from '@inertiajs/react'
 import { login_path, password_request_path } from '@/routes'
 
@@ -31,16 +31,16 @@ export default function Login({ status }: { status?: string }) {
 
       <form onSubmit={submit}>
         <div>
-          <InputLabel htmlFor="email" value="Email" />
+          <Label htmlFor="email">Email</Label>
 
-          <TextInput
+          <Input
             id="email"
             type="email"
             name="email"
             value={data.email}
             className="mt-1 block w-full"
             autoComplete="username"
-            isFocused={true}
+            autoFocus
             onChange={(e) => setData('email', e.target.value)}
           />
 
@@ -48,9 +48,9 @@ export default function Login({ status }: { status?: string }) {
         </div>
 
         <div className="mt-4">
-          <InputLabel htmlFor="password" value="Password" />
+          <Label htmlFor="password">Password</Label>
 
-          <TextInput
+          <Input
             id="password"
             type="password"
             name="password"
@@ -65,7 +65,12 @@ export default function Login({ status }: { status?: string }) {
 
         <div className="block mt-4">
           <label className="flex items-center">
-            <Checkbox name="remember" checked={data.remember} onChange={(e) => setData('remember', (e.target.checked || false) as false)} />
+            <Checkbox
+              id="remember"
+              name="remember"
+              checked={data.remember}
+              onCheckedChange={(checked) => setData('remember', (checked === true) as false)}
+            />
             <span className="ms-2 text-sm text-gray-600 dark:text-gray-400">Remember me</span>
           </label>
         </div>
@@ -78,9 +83,9 @@ export default function Login({ status }: { status?: string }) {
             Forgot your password?
           </Link>
 
-          <PrimaryButton className="ms-4" disabled={processing}>
+          <Button className="ms-4" disabled={processing}>
             Log in
-          </PrimaryButton>
+          </Button>
         </div>
       </form>
     </GuestLayout>

data/stubs/inertia-react-ts/app/javascript/Pages/Auth/Register.tsx

@@ -1,9 +1,9 @@
 import { FormEventHandler } from 'react'
+import { Button } from '@/Components/ui/button'
+import { Input } from '@/Components/ui/input'
+import { Label } from '@/Components/ui/label'
 import GuestLayout from '@/Layouts/GuestLayout'
 import InputError from '@/Components/InputError'
-import InputLabel from '@/Components/InputLabel'
-import PrimaryButton from '@/Components/PrimaryButton'
-import TextInput from '@/Components/TextInput'
 import { Head, Link, useForm } from '@inertiajs/react'
 import { login_path, register_path } from '@/routes'
 
@@ -29,15 +29,15 @@ export default function Register() {
 
       <form onSubmit={submit}>
         <div>
-          <InputLabel htmlFor="name" value="Name" />
+          <Label htmlFor="name">Name</Label>
 
-          <TextInput
+          <Input
             id="name"
             name="name"
             value={data.name}
             className="mt-1 block w-full"
             autoComplete="name"
-            isFocused={true}
+            autoFocus
             onChange={(e) => setData('name', e.target.value)}
             required
           />
@@ -46,9 +46,9 @@ export default function Register() {
         </div>
 
         <div className="mt-4">
-          <InputLabel htmlFor="email" value="Email" />
+          <Label htmlFor="email">Email</Label>
 
-          <TextInput
+          <Input
             id="email"
             type="email"
             name="email"
@@ -63,9 +63,9 @@ export default function Register() {
         </div>
 
         <div className="mt-4">
-          <InputLabel htmlFor="password" value="Password" />
+          <Label htmlFor="password">Password</Label>
 
-          <TextInput
+          <Input
             id="password"
             type="password"
             name="password"
@@ -80,9 +80,9 @@ export default function Register() {
         </div>
 
         <div className="mt-4">
-          <InputLabel htmlFor="password_confirmation" value="Confirm Password" />
+          <Label htmlFor="password_confirmation">Confirm Password</Label>
 
-          <TextInput
+          <Input
             id="password_confirmation"
             type="password"
             name="password_confirmation"
@@ -104,9 +104,9 @@ export default function Register() {
             Already registered?
           </Link>
 
-          <PrimaryButton className="ms-4" disabled={processing}>
+          <Button className="ms-4" disabled={processing}>
             Register
-          </PrimaryButton>
+          </Button>
         </div>
       </form>
     </GuestLayout>

data/stubs/inertia-react-ts/app/javascript/Pages/Auth/ResetPassword.tsx

@@ -1,9 +1,9 @@
 import { FormEventHandler } from 'react'
+import { Button } from '@/Components/ui/button'
+import { Input } from '@/Components/ui/input'
+import { Label } from '@/Components/ui/label'
 import GuestLayout from '@/Layouts/GuestLayout'
 import InputError from '@/Components/InputError'
-import InputLabel from '@/Components/InputLabel'
-import PrimaryButton from '@/Components/PrimaryButton'
-import TextInput from '@/Components/TextInput'
 import { Head, useForm } from '@inertiajs/react'
 import { password_store_path } from '@/routes'
 
@@ -28,16 +28,16 @@ export default function ResetPassword({ token }: { token: string }) {
 
       <form onSubmit={submit}>
         <div>
-          <InputLabel htmlFor="password" value="Password" />
+          <Label htmlFor="password">Password</Label>
 
-          <TextInput
+          <Input
             id="password"
             type="password"
             name="password"
             value={data.password}
             className="mt-1 block w-full"
             autoComplete="new-password"
-            isFocused={true}
+            autoFocus
             onChange={(e) => setData('password', e.target.value)}
           />
 
@@ -45,9 +45,9 @@ export default function ResetPassword({ token }: { token: string }) {
         </div>
 
         <div className="mt-4">
-          <InputLabel htmlFor="password_confirmation" value="Confirm Password" />
+          <Label htmlFor="password_confirmation">Confirm Password</Label>
 
-          <TextInput
+          <Input
             type="password"
             name="password_confirmation"
             value={data.password_confirmation}
@@ -60,9 +60,9 @@ export default function ResetPassword({ token }: { token: string }) {
         </div>
 
         <div className="flex items-center justify-end mt-4">
-          <PrimaryButton className="ms-4" disabled={processing}>
+          <Button className="ms-4" disabled={processing}>
             Reset Password
-          </PrimaryButton>
+          </Button>
         </div>
       </form>
     </GuestLayout>

data/stubs/inertia-react-ts/app/javascript/Pages/Auth/VerifyEmail.tsx

@@ -1,5 +1,5 @@
 import GuestLayout from '@/Layouts/GuestLayout'
-import PrimaryButton from '@/Components/PrimaryButton'
+import { Button } from '@/Components/ui/button'
 import { Head, Link, useForm } from '@inertiajs/react'
 import { FormEventHandler } from 'react'
 import { logout_path, verification_send_path } from '@/routes'
@@ -30,7 +30,7 @@ export default function VerifyEmail({ status }: { status?: string }) {
 
       <form onSubmit={submit}>
         <div className="mt-4 flex items-center justify-between">
-          <PrimaryButton disabled={processing}>Resend Verification Email</PrimaryButton>
+          <Button disabled={processing}>Resend Verification Email</Button>
 
           <Link
             href={logout_path()}

data/stubs/inertia-react-ts/app/javascript/Pages/Dashboard.tsx

@@ -1,18 +1,23 @@
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'
 import { Head } from '@inertiajs/react'
+import { dashboard_path } from '@/routes'
+import { BreadcrumbItem } from '@/types'
+
+const breadcrumbs: BreadcrumbItem[] = [
+  {
+    title: 'Dashboard',
+    href: dashboard_path(),
+  },
+]
 
 export default function Dashboard() {
   return (
-    <AuthenticatedLayout
-      header={<h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">Dashboard</h2>}
-    >
+    <AuthenticatedLayout breadcrumbs={breadcrumbs}>
       <Head title="Dashboard" />
 
-      <div className="py-12">
-        <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
-          <div className="bg-white dark:bg-gray-800 overflow-hidden shadow-xs sm:rounded-lg">
-            <div className="p-6 text-gray-900 dark:text-gray-100">You're logged in!</div>
-          </div>
+      <div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
+        <div className="relative min-h-[60vh] flex-1 overflow-hidden rounded-xl border border-sidebar-border/70 p-6 dark:border-sidebar-border">
+          You're logged in!
         </div>
       </div>
     </AuthenticatedLayout>

data/stubs/inertia-react-ts/app/javascript/Pages/Settings/Appearance.tsx

@@ -0,0 +1,33 @@
+import { Head } from '@inertiajs/react'
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'
+import SettingsLayout from '@/Layouts/SettingsLayout'
+import Heading from '@/Components/Heading'
+import UpdateAppearanceForm from './Partials/UpdateAppearanceForm'
+import { appearance_edit_path } from '@/routes'
+import { BreadcrumbItem } from '@/types'
+
+const breadcrumbs: BreadcrumbItem[] = [
+  {
+    title: 'Appearance settings',
+    href: appearance_edit_path(),
+  },
+]
+
+export default function Appearance() {
+  return (
+    <AuthenticatedLayout breadcrumbs={breadcrumbs}>
+      <Head title="Appearance settings" />
+
+      <SettingsLayout>
+        <div className="space-y-6">
+          <Heading
+            variant="small"
+            title="Appearance settings"
+            description="Update the appearance settings for your account"
+          />
+          <UpdateAppearanceForm />
+        </div>
+      </SettingsLayout>
+    </AuthenticatedLayout>
+  )
+}