kaze 1.4.0 → 2.0.1

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

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref, type Component } from 'vue'
+import { Monitor, Moon, Sun } from '@lucide/vue'
+import { getAppearance, setAppearance, type Appearance } from '@/lib/appearance'
+import { cn } from '@/lib/utils'
+
+const options: { value: Appearance; icon: Component; label: string }[] = [
+  { value: 'light', icon: Sun, label: 'Light' },
+  { value: 'dark', icon: Moon, label: 'Dark' },
+  { value: 'system', icon: Monitor, label: 'System' },
+]
+
+const appearance = ref<Appearance>(getAppearance())
+
+const select = (value: Appearance) => {
+  appearance.value = value
+  setAppearance(value)
+}
+</script>
+
+<template>
+  <div class="inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800">
+    <button
+      v-for="option in options"
+      :key="option.value"
+      type="button"
+      :aria-pressed="appearance === option.value"
+      :class="
+        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 === option.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',
+        )
+      "
+      @click="select(option.value)"
+    >
+      <component :is="option.icon" class="-ml-1 h-4 w-4" />
+      <span class="ml-1.5 text-sm">{{ option.label }}</span>
+    </button>
+  </div>
+</template>

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import InputError from '@/Components/InputError.vue'
-import InputLabel from '@/Components/InputLabel.vue'
-import PrimaryButton from '@/Components/PrimaryButton.vue'
-import TextInput from '@/Components/TextInput.vue'
+import { Button } from '@/Components/ui/button'
+import { Input } from '@/Components/ui/input'
+import { Label } from '@/Components/ui/label'
 import { useForm } from '@inertiajs/vue3'
 import { ref } from 'vue'
 import { password_update_path } from '@/routes'
@@ -38,19 +38,11 @@ const updatePassword = () => {
 
 <template>
   <section>
-    <header>
-      <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Update Password</h2>
-
-      <p class="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 @submit.prevent="updatePassword" class="mt-6 space-y-6">
+    <form @submit.prevent="updatePassword" class="space-y-6">
       <div>
-        <InputLabel for="current_password" value="Current Password" />
+        <Label for="current_password">Current Password</Label>
 
-        <TextInput
+        <Input
           id="current_password"
           ref="currentPasswordInput"
           v-model="form.current_password"
@@ -63,9 +55,9 @@ const updatePassword = () => {
       </div>
 
       <div>
-        <InputLabel for="password" value="New Password" />
+        <Label for="password">New Password</Label>
 
-        <TextInput
+        <Input
           id="password"
           ref="passwordInput"
           v-model="form.password"
@@ -78,9 +70,9 @@ const updatePassword = () => {
       </div>
 
       <div>
-        <InputLabel for="password_confirmation" value="Confirm Password" />
+        <Label for="password_confirmation">Confirm Password</Label>
 
-        <TextInput
+        <Input
           id="password_confirmation"
           v-model="form.password_confirmation"
           type="password"
@@ -92,7 +84,7 @@ const updatePassword = () => {
       </div>
 
       <div class="flex items-center gap-4">
-        <PrimaryButton :disabled="form.processing">Save</PrimaryButton>
+        <Button :disabled="form.processing">Save</Button>
 
         <Transition
           enter-active-class="transition ease-in-out"
@@ -100,7 +92,7 @@ const updatePassword = () => {
           leave-active-class="transition ease-in-out"
           leave-to-class="opacity-0"
         >
-          <p v-if="form.recentlySuccessful" class="text-sm text-gray-600 dark:text-gray-400">Saved.</p>
+          <p v-if="form.recentlySuccessful" class="text-sm text-muted-foreground">Saved.</p>
         </Transition>
       </div>
     </form>

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import InputError from '@/Components/InputError.vue'
-import InputLabel from '@/Components/InputLabel.vue'
-import PrimaryButton from '@/Components/PrimaryButton.vue'
-import TextInput from '@/Components/TextInput.vue'
+import { Button } from '@/Components/ui/button'
+import { Input } from '@/Components/ui/input'
+import { Label } from '@/Components/ui/label'
 import { Link, useForm, usePage } from '@inertiajs/vue3'
 import { profile_update_path, verification_send_path } from '@/routes'
 
@@ -21,19 +21,11 @@ const form = useForm({
 
 <template>
   <section>
-    <header>
-      <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Profile Information</h2>
-
-      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
-        Update your account's profile information and email address.
-      </p>
-    </header>
-
-    <form @submit.prevent="form.patch(profile_update_path())" class="mt-6 space-y-6">
+    <form @submit.prevent="form.patch(profile_update_path())" class="space-y-6">
       <div>
-        <InputLabel for="name" value="Name" />
+        <Label for="name">Name</Label>
 
-        <TextInput
+        <Input
           id="name"
           type="text"
           class="mt-1 block w-full"
@@ -47,9 +39,9 @@ const form = useForm({
       </div>
 
       <div>
-        <InputLabel for="email" value="Email" />
+        <Label for="email">Email</Label>
 
-        <TextInput
+        <Input
           id="email"
           type="email"
           class="mt-1 block w-full"
@@ -62,13 +54,13 @@ const form = useForm({
       </div>
 
       <div v-if="mustVerifyEmail && user.email_verified_at === null">
-        <p class="text-sm mt-2 text-gray-800 dark:text-gray-200">
+        <p class="mt-2 text-sm text-foreground">
           Your email address is unverified.
           <Link
             :href="verification_send_path()"
             method="post"
             as="button"
-            class="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"
+            class="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>
@@ -83,7 +75,7 @@ const form = useForm({
       </div>
 
       <div class="flex items-center gap-4">
-        <PrimaryButton :disabled="form.processing">Save</PrimaryButton>
+        <Button :disabled="form.processing">Save</Button>
 
         <Transition
           enter-active-class="transition ease-in-out"
@@ -91,7 +83,7 @@ const form = useForm({
           leave-active-class="transition ease-in-out"
           leave-to-class="opacity-0"
         >
-          <p v-if="form.recentlySuccessful" class="text-sm text-gray-600 dark:text-gray-400">Saved.</p>
+          <p v-if="form.recentlySuccessful" class="text-sm text-muted-foreground">Saved.</p>
         </Transition>
       </div>
     </form>

data/stubs/inertia-vue-ts/app/javascript/Pages/Settings/Password.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { Head } from '@inertiajs/vue3'
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
+import SettingsLayout from '@/Layouts/SettingsLayout.vue'
+import Heading from '@/Components/Heading.vue'
+import UpdatePasswordForm from './Partials/UpdatePasswordForm.vue'
+import { password_edit_path } from '@/routes'
+import { BreadcrumbItem } from '@/types'
+
+const breadcrumbs: BreadcrumbItem[] = [
+  {
+    title: 'Password settings',
+    href: password_edit_path(),
+  },
+]
+</script>
+
+<template>
+  <Head title="Password settings" />
+
+  <AuthenticatedLayout :breadcrumbs="breadcrumbs">
+    <SettingsLayout>
+      <div class="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>
+</template>

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { Head } from '@inertiajs/vue3'
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
+import SettingsLayout from '@/Layouts/SettingsLayout.vue'
+import Heading from '@/Components/Heading.vue'
+import DeleteUserForm from './Partials/DeleteUserForm.vue'
+import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm.vue'
+import { profile_edit_path } from '@/routes'
+import { BreadcrumbItem } from '@/types'
+
+defineProps<{
+  mustVerifyEmail?: boolean
+  status?: string
+}>()
+
+const breadcrumbs: BreadcrumbItem[] = [
+  {
+    title: 'Profile settings',
+    href: profile_edit_path(),
+  },
+]
+</script>
+
+<template>
+  <Head title="Profile settings" />
+
+  <AuthenticatedLayout :breadcrumbs="breadcrumbs">
+    <SettingsLayout>
+      <div class="space-y-6">
+        <Heading variant="small" title="Profile information" description="Update your name and email address" />
+        <UpdateProfileInformationForm :must-verify-email="mustVerifyEmail" :status="status" />
+      </div>
+
+      <div class="space-y-6">
+        <Heading variant="small" title="Delete account" description="Delete your account and all of its resources" />
+        <DeleteUserForm />
+      </div>
+    </SettingsLayout>
+  </AuthenticatedLayout>
+</template>

data/stubs/inertia-vue-ts/app/javascript/composables/useInitials.ts

@@ -0,0 +1,29 @@
+export type UseInitialsReturn = {
+  getInitials: (fullName?: string) => string
+}
+
+function getInitial(name: string): string {
+  return Array.from(name)[0] ?? ''
+}
+
+export function getInitials(fullName?: string): string {
+  if (!fullName) {
+    return ''
+  }
+
+  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()
+}
+
+export function useInitials(): UseInitialsReturn {
+  return { getInitials }
+}

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

@@ -10,8 +10,7 @@ export function getAppearance(): Appearance {
 
 export function applyAppearance(appearance: Appearance = getAppearance()): void {
   const dark =
-    appearance === 'dark' ||
-    (appearance === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+    appearance === 'dark' || (appearance === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
 
   document.documentElement.classList.toggle('dark', dark)
 }

data/stubs/inertia-vue-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-vue-ts/app/javascript/types/index.d.ts

@@ -1,3 +1,5 @@
+import { Component } from 'vue'
+
 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?: Component
+}
+
+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-vue-ts/app/javascript/types/vue-shims.d.ts

@@ -0,0 +1,10 @@
+// Lets plain `tsc` resolve single-file components imported from .ts modules,
+// such as the `index.ts` barrels the ui components use. vue-tsc would give
+// richer types, but it does not currently run against TypeScript 7.
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>
+
+  export default component
+}

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

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "typescript": 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",
+    "composables": "@/composables"
+  },
+  "iconLibrary": "lucide"
+}

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

@@ -8,10 +8,17 @@
   "devDependencies": {
     "@headlessui/vue": "^1.7.23",
     "@inertiajs/vue3": "^3.9.1",
+    "@lucide/vue": "^1.61.0",
     "@types/node": "^26.6.5",
     "@vitejs/plugin-vue": "^6.0.10",
+    "@vueuse/core": "^12.8.2",
     "axios": "^1.6.4",
-    "typescript": "^7.0.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "reka-ui": "^2.11.0",
+    "tailwind-merge": "^3.7.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.9.3",
     "vite": "^8.3.4",
     "vite-plugin-rails": "^0.6.0",
     "vue": "^3.5.44",

data/stubs/inertia-vue-ts/vite.config.ts

@@ -1,3 +1,4 @@
+import fs from 'node:fs'
 import { defineConfig } from 'vite'
 import Rails from 'vite-plugin-rails'
 import vue from '@vitejs/plugin-vue'
@@ -6,5 +7,28 @@ export default defineConfig({
   resolve: {
     dedupe: ['axios'],
   },
-  plugins: [Rails(), vue()],
+  plugins: [
+    Rails(),
+    vue({
+      script: {
+        // Components that type their props from another package -- the ui
+        // primitives do this with reka-ui -- need the SFC compiler to read
+        // files to resolve those types. It does not assume filesystem access,
+        // so hand it one.
+        fs: {
+          // statSync, not existsSync: a barrel import like `from "."` probes the
+          // directory itself, and claiming it exists makes the compiler try to
+          // read a directory.
+          fileExists: (file: string) => {
+            try {
+              return fs.statSync(file).isFile()
+            } catch {
+              return false
+            }
+          },
+          readFile: (file: string) => fs.readFileSync(file, 'utf-8'),
+        },
+      },
+    }),
+  ],
 })