kaze 0.4.0 → 0.6.0

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>
+  )
 }

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

@@ -1,98 +1,106 @@
-import { useEffect, FormEventHandler } from 'react';
-import Checkbox from '@/Components/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';
+import { useEffect, FormEventHandler } from 'react'
+import Checkbox from '@/Components/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'
 
-export default function Login({ status, canResetPassword }: { status?: string, canResetPassword: boolean }) {
-    const { data, setData, post, processing, errors, reset } = useForm({
-        email: '',
-        password: '',
-        remember: false,
-    });
+export default function Login({
+  status,
+  canResetPassword,
+}: {
+  status?: string
+  canResetPassword: boolean
+}) {
+  const { data, setData, post, processing, errors, reset } = useForm({
+    email: '',
+    password: '',
+    remember: false,
+  })
 
-    useEffect(() => {
-        return () => {
-            reset('password');
-        };
-    }, []);
+  useEffect(() => {
+    return () => {
+      reset('password')
+    }
+  }, [])
 
-    const submit: FormEventHandler = (e) => {
-        e.preventDefault();
+  const submit: FormEventHandler = (e) => {
+    e.preventDefault()
 
-        post(login_path());
-    };
+    post(login_path())
+  }
 
-    return (
-        <GuestLayout>
-            <Head title="Log in" />
+  return (
+    <GuestLayout>
+      <Head title="Log in" />
 
-            {status && <div className="mb-4 font-medium text-sm text-green-600">{status}</div>}
+      {status && (
+        <div className="mb-4 font-medium text-sm text-green-600">{status}</div>
+      )}
 
-            <form onSubmit={submit}>
-                <div>
-                    <InputLabel htmlFor="email" value="Email" />
+      <form onSubmit={submit}>
+        <div>
+          <InputLabel htmlFor="email" value="Email" />
 
-                    <TextInput
-                        id="email"
-                        type="email"
-                        name="email"
-                        value={data.email}
-                        className="mt-1 block w-full"
-                        autoComplete="username"
-                        isFocused={true}
-                        onChange={(e) => setData('email', e.target.value)}
-                    />
+          <TextInput
+            id="email"
+            type="email"
+            name="email"
+            value={data.email}
+            className="mt-1 block w-full"
+            autoComplete="username"
+            isFocused={true}
+            onChange={(e) => setData('email', e.target.value)}
+          />
 
-                    <InputError message={errors.email} className="mt-2" />
-                </div>
+          <InputError message={errors.email} className="mt-2" />
+        </div>
 
-                <div className="mt-4">
-                    <InputLabel htmlFor="password" value="Password" />
+        <div className="mt-4">
+          <InputLabel htmlFor="password" value="Password" />
 
-                    <TextInput
-                        id="password"
-                        type="password"
-                        name="password"
-                        value={data.password}
-                        className="mt-1 block w-full"
-                        autoComplete="current-password"
-                        onChange={(e) => setData('password', e.target.value)}
-                    />
+          <TextInput
+            id="password"
+            type="password"
+            name="password"
+            value={data.password}
+            className="mt-1 block w-full"
+            autoComplete="current-password"
+            onChange={(e) => setData('password', e.target.value)}
+          />
 
-                    <InputError message={errors.password} className="mt-2" />
-                </div>
+          <InputError message={errors.password} className="mt-2" />
+        </div>
 
-                <div className="block mt-4">
-                    <label className="flex items-center">
-                        <Checkbox
-                            name="remember"
-                            checked={data.remember}
-                            onChange={(e) => setData('remember', e.target.checked)}
-                        />
-                        <span className="ms-2 text-sm text-gray-600">Remember me</span>
-                    </label>
-                </div>
+        <div className="block mt-4">
+          <label className="flex items-center">
+            <Checkbox
+              name="remember"
+              checked={data.remember}
+              onChange={(e) => setData('remember', e.target.checked)}
+            />
+            <span className="ms-2 text-sm text-gray-600">Remember me</span>
+          </label>
+        </div>
 
-                <div className="flex items-center justify-end mt-4">
-                    {canResetPassword && (
-                        <Link
-                            href={password_request_path()}
-                            className="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-                        >
-                            Forgot your password?
-                        </Link>
-                    )}
+        <div className="flex items-center justify-end mt-4">
+          {canResetPassword && (
+            <Link
+              href={password_request_path()}
+              className="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+            >
+              Forgot your password?
+            </Link>
+          )}
 
-                    <PrimaryButton className="ms-4" disabled={processing}>
-                        Log in
-                    </PrimaryButton>
-                </div>
-            </form>
-        </GuestLayout>
-    );
+          <PrimaryButton className="ms-4" disabled={processing}>
+            Log in
+          </PrimaryButton>
+        </div>
+      </form>
+    </GuestLayout>
+  )
 }