kaze 0.5.0 → 0.6.0

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

@@ -1,18 +1,24 @@
-import { ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes } from 'react'
 
-export default function SecondaryButton({ type = 'button', className = '', disabled, children, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
-    return (
-        <button
-            {...props}
-            type={type}
-            className={
-                `inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150 ${
-                    disabled && 'opacity-25'
-                } ` + className
-            }
-            disabled={disabled}
-        >
-            {children}
-        </button>
-    );
+export default function SecondaryButton({
+  type = 'button',
+  className = '',
+  disabled,
+  children,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      {...props}
+      type={type}
+      className={
+        `inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150 ${
+          disabled && 'opacity-25'
+        } ` + className
+      }
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  )
 }

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

@@ -1,30 +1,41 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef, InputHTMLAttributes } from 'react';
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  InputHTMLAttributes,
+} from 'react'
 
 export default forwardRef(function TextInput(
-    { type = 'text', className = '', isFocused = false, ...props }: InputHTMLAttributes<HTMLInputElement> & { isFocused?: boolean },
-    ref
+  {
+    type = 'text',
+    className = '',
+    isFocused = false,
+    ...props
+  }: InputHTMLAttributes<HTMLInputElement> & { isFocused?: boolean },
+  ref,
 ) {
-    const localRef = useRef<HTMLInputElement>(null);
+  const localRef = useRef<HTMLInputElement>(null)
 
-    useImperativeHandle(ref, () => ({
-        focus: () => localRef.current?.focus(),
-    }));
+  useImperativeHandle(ref, () => ({
+    focus: () => localRef.current?.focus(),
+  }))
 
-    useEffect(() => {
-        if (isFocused) {
-            localRef.current?.focus();
-        }
-    }, []);
+  useEffect(() => {
+    if (isFocused) {
+      localRef.current?.focus()
+    }
+  }, [])
 
-    return (
-        <input
-            {...props}
-            type={type}
-            className={
-                'border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm ' +
-                className
-            }
-            ref={localRef}
-        />
-    );
-});
+  return (
+    <input
+      {...props}
+      type={type}
+      className={
+        'border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm ' +
+        className
+      }
+      ref={localRef}
+    />
+  )
+})

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

@@ -1,131 +1,171 @@
-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 } from '@inertiajs/react';
-import { User } from '@/types';
-import { dashboard_path, logout_path, profile_edit_path } from '@/routes';
+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 } from '@inertiajs/react'
+import { User } from '@/types'
+import { dashboard_path, logout_path, profile_edit_path } from '@/routes'
 
-export default function Authenticated({ user, header, children }: PropsWithChildren<{ user: User, header?: ReactNode }>) {
-    const [showingNavigationDropdown, setShowingNavigationDropdown] = useState(false);
+export default function Authenticated({
+  user,
+  header,
+  children,
+}: PropsWithChildren<{ user: User; header?: ReactNode }>) {
+  const [showingNavigationDropdown, setShowingNavigationDropdown] =
+    useState(false)
 
-    const { pathname = '' } = typeof window !== 'undefined' ? window.location : {};
+  const { pathname = '' } = typeof window !== 'undefined' ? window.location : {}
 
-    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-gray-800" />
-                                </Link>
-                            </div>
+  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-gray-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 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-none transition ease-in-out duration-150"
-                                            >
-                                                {user.name}
+            <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-none 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>
+                        <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>
+                  <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-none 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="-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-none 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={
+            (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="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>
+            <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">
-                    <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">{header}</div>
-                </header>
-            )}
+      {header && (
+        <header className="bg-white shadow">
+          <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+            {header}
+          </div>
+        </header>
+      )}
 
-            <main>{children}</main>
-        </div>
-    );
+      <main>{children}</main>
+    </div>
+  )
 }

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

@@ -1,19 +1,19 @@
-import ApplicationLogo from '@/Components/ApplicationLogo';
-import { Link } from '@inertiajs/react';
-import { PropsWithChildren } from 'react';
+import ApplicationLogo from '@/Components/ApplicationLogo'
+import { Link } from '@inertiajs/react'
+import { PropsWithChildren } from 'react'
 
 export default function Guest({ 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>
-                <Link href="/">
-                    <ApplicationLogo className="w-20 h-20 fill-current text-gray-500" />
-                </Link>
-            </div>
+  return (
+    <div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
+      <div>
+        <Link href="/">
+          <ApplicationLogo className="w-20 h-20 fill-current text-gray-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">
-                {children}
-            </div>
-        </div>
-    );
+      <div className="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
+        {children}
+      </div>
+    </div>
+  )
 }

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

@@ -1,52 +1,55 @@
-import GuestLayout from '@/Layouts/GuestLayout';
-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';
+import GuestLayout from '@/Layouts/GuestLayout'
+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'
 
 export default function ForgotPassword({ status }: { status?: string }) {
-    const { data, setData, post, processing, errors } = useForm({
-        email: '',
-    });
-
-    const submit: FormEventHandler = (e) => {
-        e.preventDefault();
-
-        post(password_email_path());
-    };
-
-    return (
-        <GuestLayout>
-            <Head title="Forgot Password" />
-
-            <div className="mb-4 text-sm text-gray-600">
-                Forgot your password? No problem. Just let us know your email address and we will email you a password
-                reset link that will allow you to choose a new one.
-            </div>
-
-            {status && <div className="mb-4 font-medium text-sm text-green-600">{status}</div>}
-
-            <form onSubmit={submit}>
-                <TextInput
-                    id="email"
-                    type="email"
-                    name="email"
-                    value={data.email}
-                    className="mt-1 block w-full"
-                    isFocused={true}
-                    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}>
-                        Email Password Reset Link
-                    </PrimaryButton>
-                </div>
-            </form>
-        </GuestLayout>
-    );
+  const { data, setData, post, processing, errors } = useForm({
+    email: '',
+  })
+
+  const submit: FormEventHandler = (e) => {
+    e.preventDefault()
+
+    post(password_email_path())
+  }
+
+  return (
+    <GuestLayout>
+      <Head title="Forgot Password" />
+
+      <div className="mb-4 text-sm text-gray-600">
+        Forgot your password? No problem. Just let us know your email address
+        and we will email you a password reset link that will allow you to
+        choose a new one.
+      </div>
+
+      {status && (
+        <div className="mb-4 font-medium text-sm text-green-600">{status}</div>
+      )}
+
+      <form onSubmit={submit}>
+        <TextInput
+          id="email"
+          type="email"
+          name="email"
+          value={data.email}
+          className="mt-1 block w-full"
+          isFocused={true}
+          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}>
+            Email Password Reset Link
+          </PrimaryButton>
+        </div>
+      </form>
+    </GuestLayout>
+  )
 }