kaze 1.3.1 → 2.0.0

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

@@ -0,0 +1,107 @@
+import { useRef, useState, FormEventHandler } from 'react'
+import { Button } from '@/Components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/Components/ui/dialog'
+import { Input } from '@/Components/ui/input'
+import { Label } from '@/Components/ui/label'
+import InputError from '@/Components/InputError'
+import { useForm } from '@inertiajs/react'
+import { profile_destroy_path } from '@/routes'
+
+export default function DeleteUserForm({ className = '' }: { className?: string }) {
+  const [confirmingUserDeletion, setConfirmingUserDeletion] = useState(false)
+  const passwordInput = useRef<HTMLInputElement>(null)
+
+  const {
+    data,
+    setData,
+    delete: destroy,
+    processing,
+    reset,
+    errors,
+    clearErrors,
+  } = useForm({
+    password: '',
+  })
+
+  const confirmUserDeletion = () => {
+    setConfirmingUserDeletion(true)
+  }
+
+  const deleteUser: FormEventHandler = (e) => {
+    e.preventDefault()
+
+    destroy(profile_destroy_path(), {
+      preserveScroll: true,
+      onSuccess: () => closeModal(),
+      onError: () => passwordInput.current?.focus(),
+      onFinish: () => reset(),
+    })
+  }
+
+  const closeModal = () => {
+    setConfirmingUserDeletion(false)
+
+    clearErrors()
+    reset()
+  }
+
+  return (
+    <section className={`space-y-6 ${className}`}>
+      <Button variant="destructive" onClick={confirmUserDeletion}>
+        Delete Account
+      </Button>
+
+      <Dialog open={confirmingUserDeletion} onOpenChange={(open) => !open && closeModal()}>
+        <DialogContent>
+          <form onSubmit={deleteUser}>
+            <DialogHeader>
+              <DialogTitle>Are you sure you want to delete your account?</DialogTitle>
+
+              <DialogDescription>
+                Once your account is deleted, all of its resources and data will be permanently deleted. Please enter
+                your password to confirm you would like to permanently delete your account.
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="mt-6">
+              <Label htmlFor="password" className="sr-only">
+                Password
+              </Label>
+
+              <Input
+                id="password"
+                type="password"
+                name="password"
+                ref={passwordInput}
+                value={data.password}
+                onChange={(e) => setData('password', e.target.value)}
+                className="mt-1 block w-3/4"
+                autoFocus
+                placeholder="Password"
+              />
+
+              <InputError message={errors.password} className="mt-2" />
+            </div>
+
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={closeModal}>
+                Cancel
+              </Button>
+
+              <Button variant="destructive" disabled={processing}>
+                Delete Account
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </section>
+  )
+}

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

@@ -0,0 +1,41 @@
+import { useState } from 'react'
+import { LucideIcon, Monitor, Moon, Sun } from 'lucide-react'
+import { Appearance, getAppearance, setAppearance } from '@/lib/appearance'
+import { cn } from '@/lib/utils'
+
+const options: { value: Appearance; icon: LucideIcon; label: string }[] = [
+  { value: 'light', icon: Sun, label: 'Light' },
+  { value: 'dark', icon: Moon, label: 'Dark' },
+  { value: 'system', icon: Monitor, label: 'System' },
+]
+
+export default function UpdateAppearanceForm({ className = '' }: { className?: string }) {
+  const [appearance, setCurrentAppearance] = useState<Appearance>(getAppearance)
+
+  const select = (value: Appearance) => {
+    setCurrentAppearance(value)
+    setAppearance(value)
+  }
+
+  return (
+    <div className={cn('inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800', className)}>
+      {options.map(({ value, icon: Icon, label }) => (
+        <button
+          key={value}
+          type="button"
+          onClick={() => select(value)}
+          aria-pressed={appearance === value}
+          className={cn(
+            'flex items-center rounded-md px-3.5 py-1.5 transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50',
+            appearance === value
+              ? 'bg-white shadow-xs dark:bg-neutral-700 dark:text-neutral-100'
+              : 'text-neutral-500 hover:bg-neutral-200/60 hover:text-black dark:text-neutral-400 dark:hover:bg-neutral-700/60',
+          )}
+        >
+          <Icon className="-ml-1 h-4 w-4" />
+          <span className="ml-1.5 text-sm">{label}</span>
+        </button>
+      ))}
+    </div>
+  )
+}

data/stubs/inertia-react-ts/app/javascript/Pages/{Profile → Settings}/Partials/UpdatePasswordForm.tsx

@@ -1,8 +1,8 @@
 import { useRef, FormEventHandler } from 'react'
+import { Button } from '@/Components/ui/button'
+import { Input } from '@/Components/ui/input'
+import { Label } from '@/Components/ui/label'
 import InputError from '@/Components/InputError'
-import InputLabel from '@/Components/InputLabel'
-import PrimaryButton from '@/Components/PrimaryButton'
-import TextInput from '@/Components/TextInput'
 import { useForm } from '@inertiajs/react'
 import { Transition } from '@headlessui/react'
 import { password_update_path } from '@/routes'
@@ -39,19 +39,11 @@ export default function UpdatePasswordForm({ className = '' }: { className?: str
 
   return (
     <section className={className}>
-      <header>
-        <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100">Update Password</h2>
-
-        <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
-          Ensure your account is using a long, random password to stay secure.
-        </p>
-      </header>
-
-      <form onSubmit={updatePassword} className="mt-6 space-y-6">
+      <form onSubmit={updatePassword} className="space-y-6">
         <div>
-          <InputLabel htmlFor="current_password" value="Current Password" />
+          <Label htmlFor="current_password">Current Password</Label>
 
-          <TextInput
+          <Input
             id="current_password"
             ref={currentPasswordInput}
             value={data.current_password}
@@ -65,9 +57,9 @@ export default function UpdatePasswordForm({ className = '' }: { className?: str
         </div>
 
         <div>
-          <InputLabel htmlFor="password" value="New Password" />
+          <Label htmlFor="password">New Password</Label>
 
-          <TextInput
+          <Input
             id="password"
             ref={passwordInput}
             value={data.password}
@@ -81,9 +73,9 @@ export default function UpdatePasswordForm({ className = '' }: { className?: str
         </div>
 
         <div>
-          <InputLabel htmlFor="password_confirmation" value="Confirm Password" />
+          <Label htmlFor="password_confirmation">Confirm Password</Label>
 
-          <TextInput
+          <Input
             id="password_confirmation"
             value={data.password_confirmation}
             onChange={(e) => setData('password_confirmation', e.target.value)}
@@ -96,7 +88,7 @@ export default function UpdatePasswordForm({ className = '' }: { className?: str
         </div>
 
         <div className="flex items-center gap-4">
-          <PrimaryButton disabled={processing}>Save</PrimaryButton>
+          <Button disabled={processing}>Save</Button>
 
           <Transition
             show={recentlySuccessful}
@@ -105,7 +97,7 @@ export default function UpdatePasswordForm({ className = '' }: { className?: str
             leave="transition ease-in-out"
             leaveTo="opacity-0"
           >
-            <p className="text-sm text-gray-600 dark:text-gray-400">Saved.</p>
+            <p className="text-sm text-muted-foreground">Saved.</p>
           </Transition>
         </div>
       </form>

data/stubs/inertia-react-ts/app/javascript/Pages/{Profile → Settings}/Partials/UpdateProfileInformationForm.tsx

@@ -1,7 +1,7 @@
 import InputError from '@/Components/InputError'
-import InputLabel from '@/Components/InputLabel'
-import PrimaryButton from '@/Components/PrimaryButton'
-import TextInput from '@/Components/TextInput'
+import { Button } from '@/Components/ui/button'
+import { Input } from '@/Components/ui/input'
+import { Label } from '@/Components/ui/label'
 import { Link, useForm, usePage } from '@inertiajs/react'
 import { Transition } from '@headlessui/react'
 import { FormEventHandler } from 'react'
@@ -31,25 +31,17 @@ export default function UpdateProfileInformation({
 
   return (
     <section className={className}>
-      <header>
-        <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100">Profile Information</h2>
-
-        <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
-          Update your account's profile information and email address.
-        </p>
-      </header>
-
-      <form onSubmit={submit} className="mt-6 space-y-6">
+      <form onSubmit={submit} className="space-y-6">
         <div>
-          <InputLabel htmlFor="name" value="Name" />
+          <Label htmlFor="name">Name</Label>
 
-          <TextInput
+          <Input
             id="name"
             className="mt-1 block w-full"
             value={data.name}
             onChange={(e) => setData('name', e.target.value)}
             required
-            isFocused
+            autoFocus
             autoComplete="name"
           />
 
@@ -57,9 +49,9 @@ export default function UpdateProfileInformation({
         </div>
 
         <div>
-          <InputLabel htmlFor="email" value="Email" />
+          <Label htmlFor="email">Email</Label>
 
-          <TextInput
+          <Input
             id="email"
             type="email"
             className="mt-1 block w-full"
@@ -74,13 +66,13 @@ export default function UpdateProfileInformation({
 
         {mustVerifyEmail && user.email_verified_at === null && (
           <div>
-            <p className="text-sm mt-2 text-gray-800 dark:text-gray-200">
+            <p className="mt-2 text-sm text-foreground">
               Your email address is unverified.
               <Link
                 href={verification_send_path()}
                 method="post"
                 as="button"
-                className="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
+                className="rounded-md text-sm text-muted-foreground underline outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50"
               >
                 Click here to re-send the verification email.
               </Link>
@@ -95,7 +87,7 @@ export default function UpdateProfileInformation({
         )}
 
         <div className="flex items-center gap-4">
-          <PrimaryButton disabled={processing}>Save</PrimaryButton>
+          <Button disabled={processing}>Save</Button>
 
           <Transition
             show={recentlySuccessful}
@@ -104,7 +96,7 @@ export default function UpdateProfileInformation({
             leave="transition ease-in-out"
             leaveTo="opacity-0"
           >
-            <p className="text-sm text-gray-600 dark:text-gray-400">Saved.</p>
+            <p className="text-sm text-muted-foreground">Saved.</p>
           </Transition>
         </div>
       </form>

data/stubs/inertia-react-ts/app/javascript/Pages/Settings/Password.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 UpdatePasswordForm from './Partials/UpdatePasswordForm'
+import { password_edit_path } from '@/routes'
+import { BreadcrumbItem } from '@/types'
+
+const breadcrumbs: BreadcrumbItem[] = [
+  {
+    title: 'Password settings',
+    href: password_edit_path(),
+  },
+]
+
+export default function Password() {
+  return (
+    <AuthenticatedLayout breadcrumbs={breadcrumbs}>
+      <Head title="Password settings" />
+
+      <SettingsLayout>
+        <div className="space-y-6">
+          <Heading
+            variant="small"
+            title="Update password"
+            description="Ensure your account is using a long, random password to stay secure"
+          />
+          <UpdatePasswordForm />
+        </div>
+      </SettingsLayout>
+    </AuthenticatedLayout>
+  )
+}

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

@@ -0,0 +1,35 @@
+import { Head } from '@inertiajs/react'
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'
+import SettingsLayout from '@/Layouts/SettingsLayout'
+import Heading from '@/Components/Heading'
+import DeleteUserForm from './Partials/DeleteUserForm'
+import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm'
+import { profile_edit_path } from '@/routes'
+import { BreadcrumbItem, PageProps } from '@/types'
+
+const breadcrumbs: BreadcrumbItem[] = [
+  {
+    title: 'Profile settings',
+    href: profile_edit_path(),
+  },
+]
+
+export default function Profile({ mustVerifyEmail, status }: PageProps<{ mustVerifyEmail: boolean; status?: string }>) {
+  return (
+    <AuthenticatedLayout breadcrumbs={breadcrumbs}>
+      <Head title="Profile settings" />
+
+      <SettingsLayout>
+        <div className="space-y-6">
+          <Heading variant="small" title="Profile information" description="Update your name and email address" />
+          <UpdateProfileInformationForm mustVerifyEmail={mustVerifyEmail} status={status} />
+        </div>
+
+        <div className="space-y-6">
+          <Heading variant="small" title="Delete account" description="Delete your account and all of its resources" />
+          <DeleteUserForm />
+        </div>
+      </SettingsLayout>
+    </AuthenticatedLayout>
+  )
+}

data/stubs/inertia-react-ts/app/javascript/entrypoints/application.tsx

@@ -3,6 +3,7 @@ import '../../assets/builds/tailwind.css'
 
 import { createRoot } from 'react-dom/client'
 import { createInertiaApp, type ResolvedComponent } from '@inertiajs/react'
+import { TooltipProvider } from '@/Components/ui/tooltip'
 
 const pages = import.meta.glob<{ default: ResolvedComponent }>('../Pages/**/*.tsx')
 
@@ -24,7 +25,11 @@ createInertiaApp({
   setup({ el, App, props }) {
     const root = createRoot(el)
 
-    root.render(<App {...props} />)
+    root.render(
+      <TooltipProvider delayDuration={0}>
+        <App {...props} />
+      </TooltipProvider>,
+    )
   },
   progress: {
     color: '#4B5563',

data/stubs/inertia-react-ts/app/javascript/hooks/use-initials.tsx

@@ -0,0 +1,23 @@
+import { useCallback } from 'react'
+
+export type GetInitialsFn = (fullName: string) => string
+
+function getInitial(name: string): string {
+  return Array.from(name)[0] ?? ''
+}
+
+export function useInitials(): GetInitialsFn {
+  return useCallback((fullName: string): string => {
+    const names = fullName.trim().split(/\s+/u).filter(Boolean)
+
+    if (names.length === 0) {
+      return ''
+    }
+
+    if (names.length === 1) {
+      return getInitial(names[0]).toUpperCase()
+    }
+
+    return `${getInitial(names[0])}${getInitial(names[names.length - 1])}`.toUpperCase()
+  }, [])
+}

data/stubs/inertia-react-ts/app/javascript/hooks/use-mobile-navigation.tsx

@@ -0,0 +1,11 @@
+import { useCallback } from 'react'
+
+export type CleanupFn = () => void
+
+export function useMobileNavigation(): CleanupFn {
+  return useCallback(() => {
+    // The dropdown leaves pointer-events on the body when it closes during a
+    // page change, which would make the new page unclickable.
+    document.body.style.removeProperty('pointer-events')
+  }, [])
+}

data/stubs/inertia-react-ts/app/javascript/hooks/use-mobile.tsx

@@ -0,0 +1,36 @@
+import { useSyncExternalStore } from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+const mql =
+  typeof window === 'undefined'
+    ? undefined
+    : window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+
+function mediaQueryListener(callback: (event: MediaQueryListEvent) => void) {
+  if (!mql) {
+    return () => {}
+  }
+
+  mql.addEventListener('change', callback)
+
+  return () => {
+    mql.removeEventListener('change', callback)
+  }
+}
+
+function isSmallerThanBreakpoint(): boolean {
+  return mql?.matches ?? false
+}
+
+function getServerSnapshot(): boolean {
+  return false
+}
+
+export function useIsMobile(): boolean {
+  return useSyncExternalStore(
+    mediaQueryListener,
+    isSmallerThanBreakpoint,
+    getServerSnapshot,
+  )
+}

data/stubs/inertia-react-ts/app/javascript/lib/appearance.ts

@@ -0,0 +1,22 @@
+export type Appearance = 'light' | 'dark' | 'system'
+
+const STORAGE_KEY = 'appearance'
+
+export function getAppearance(): Appearance {
+  const stored = localStorage.getItem(STORAGE_KEY)
+
+  return stored === 'light' || stored === 'dark' ? stored : 'system'
+}
+
+export function applyAppearance(appearance: Appearance = getAppearance()): void {
+  const dark =
+    appearance === 'dark' || (appearance === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+
+  document.documentElement.classList.toggle('dark', dark)
+}
+
+export function setAppearance(appearance: Appearance): void {
+  localStorage.setItem(STORAGE_KEY, appearance)
+
+  applyAppearance(appearance)
+}

data/stubs/inertia-react-ts/app/javascript/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

data/stubs/inertia-react-ts/app/javascript/types/global.d.ts

@@ -1,6 +1,6 @@
-import { PageProps as InertiaPageProps } from '@inertiajs/core';
+import { PageProps as InertiaPageProps } from '@inertiajs/core'
 import { AxiosInstance } from 'axios'
-import { PageProps as AppPageProps } from './';
+import { PageProps as AppPageProps } from './'
 
 declare global {
   interface Window {

data/stubs/inertia-react-ts/app/javascript/types/index.d.ts

@@ -1,3 +1,5 @@
+import { LucideIcon } from 'lucide-react'
+
 export interface User {
   id: number
   name: string
@@ -5,8 +7,20 @@ export interface User {
   email_verified_at?: string
 }
 
+export interface NavItem {
+  title: string
+  href: string
+  icon?: LucideIcon
+}
+
+export interface BreadcrumbItem {
+  title: string
+  href: string
+}
+
 export type PageProps<T extends Record<string, unknown> = Record<string, unknown>> = T & {
   auth: {
     user: User
   }
+  sidebar_open: boolean
 }

data/stubs/inertia-react-ts/app/views/layouts/application.html.erb

@@ -6,12 +6,30 @@
     <title><%= content_for(:title) || "Rails" %></title>
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
+    <%# Apply the stored appearance before first paint, so the page never flashes the wrong theme. %>
+    <%= javascript_tag nonce: true do %>
+      (function () {
+        var preference = localStorage.getItem('appearance') || 'system'
+        var query = window.matchMedia('(prefers-color-scheme: dark)')
+
+        document.documentElement.classList.toggle(
+          'dark',
+          preference === 'dark' || (preference === 'system' && query.matches)
+        )
+
+        query.addEventListener('change', function () {
+          if ((localStorage.getItem('appearance') || 'system') === 'system') {
+            document.documentElement.classList.toggle('dark', query.matches)
+          }
+        })
+      })()
+    <% end %>
     <%= vite_client_tag %>
     <%= vite_react_refresh_tag %>
     <%= vite_typescript_tag 'application.tsx', defer: true %>
   </head>
   <body class="font-sans antialiased">
-    <div class="min-h-screen bg-gray-100">
+    <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
       <%= yield %>
     </div>
   </body>

data/stubs/inertia-react-ts/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/assets/tailwind/application.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/Components",
+    "ui": "@/Components/ui",
+    "utils": "@/lib/utils",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

data/stubs/inertia-react-ts/package.json

@@ -8,13 +8,26 @@
   "devDependencies": {
     "@headlessui/react": "^2.2.10",
     "@inertiajs/react": "^3.9.1",
+    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tooltip": "^1.1.8",
     "@types/node": "^26.6.5",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.2",
     "axios": "^1.6.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.61.0",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
+    "tailwind-merge": "^3.7.0",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^7.0.2",
     "vite": "^8.3.4",
     "vite-plugin-rails": "^0.6.0"