kaze 0.4.0 → 0.6.0

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

@@ -1,9 +1,20 @@
-import { LabelHTMLAttributes } from 'react';
+import { LabelHTMLAttributes } from 'react'
 
-export default function InputLabel({ value, className = '', children, ...props }: LabelHTMLAttributes<HTMLLabelElement> & { value?: string }) {
-    return (
-        <label {...props} className={`block font-medium text-sm text-gray-700 dark:text-gray-300 ` + className}>
-            {value ? value : children}
-        </label>
-    );
+export default function InputLabel({
+  value,
+  className = '',
+  children,
+  ...props
+}: LabelHTMLAttributes<HTMLLabelElement> & { value?: string }) {
+  return (
+    <label
+      {...props}
+      className={
+        `block font-medium text-sm text-gray-700 dark:text-gray-300 ` +
+        className
+      }
+    >
+      {value ? value : children}
+    </label>
+  )
 }

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

@@ -1,68 +1,68 @@
-import { Fragment, PropsWithChildren } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
+import { Fragment, PropsWithChildren } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
 
 export default function Modal({
-    children,
-    show = false,
-    maxWidth = '2xl',
-    closeable = true,
-    onClose = () => {},
+  children,
+  show = false,
+  maxWidth = '2xl',
+  closeable = true,
+  onClose = () => {},
 }: PropsWithChildren<{
-    show: boolean;
-    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-    closeable?: boolean;
-    onClose: CallableFunction;
+  show: boolean
+  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+  closeable?: boolean
+  onClose: CallableFunction
 }>) {
-    const close = () => {
-        if (closeable) {
-            onClose();
-        }
-    };
+  const close = () => {
+    if (closeable) {
+      onClose()
+    }
+  }
 
-    const maxWidthClass = {
-        sm: 'sm:max-w-sm',
-        md: 'sm:max-w-md',
-        lg: 'sm:max-w-lg',
-        xl: 'sm:max-w-xl',
-        '2xl': 'sm:max-w-2xl',
-    }[maxWidth];
+  const maxWidthClass = {
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-md',
+    lg: 'sm:max-w-lg',
+    xl: 'sm:max-w-xl',
+    '2xl': 'sm:max-w-2xl',
+  }[maxWidth]
 
-    return (
-        <Transition show={show} as={Fragment} leave="duration-200">
-            <Dialog
-                as="div"
-                id="modal"
-                className="fixed inset-0 flex overflow-y-auto px-4 py-6 sm:px-0 items-center z-50 transform transition-all"
-                onClose={close}
-            >
-                <Transition.Child
-                    as={Fragment}
-                    enter="ease-out duration-300"
-                    enterFrom="opacity-0"
-                    enterTo="opacity-100"
-                    leave="ease-in duration-200"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                >
-                    <div className="absolute inset-0 bg-gray-500/75 dark:bg-gray-900/75" />
-                </Transition.Child>
+  return (
+    <Transition show={show} as={Fragment} leave="duration-200">
+      <Dialog
+        as="div"
+        id="modal"
+        className="fixed inset-0 flex overflow-y-auto px-4 py-6 sm:px-0 items-center z-50 transform transition-all"
+        onClose={close}
+      >
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="absolute inset-0 bg-gray-500/75 dark:bg-gray-900/75" />
+        </Transition.Child>
 
-                <Transition.Child
-                    as={Fragment}
-                    enter="ease-out duration-300"
-                    enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                    enterTo="opacity-100 translate-y-0 sm:scale-100"
-                    leave="ease-in duration-200"
-                    leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                    leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                >
-                    <Dialog.Panel
-                        className={`mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto ${maxWidthClass}`}
-                    >
-                        {children}
-                    </Dialog.Panel>
-                </Transition.Child>
-            </Dialog>
-        </Transition>
-    );
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          enterTo="opacity-100 translate-y-0 sm:scale-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+          leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        >
+          <Dialog.Panel
+            className={`mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto ${maxWidthClass}`}
+          >
+            {children}
+          </Dialog.Panel>
+        </Transition.Child>
+      </Dialog>
+    </Transition>
+  )
 }

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

@@ -1,18 +1,23 @@
-import { Link, InertiaLinkProps } from '@inertiajs/react';
+import { Link, InertiaLinkProps } from '@inertiajs/react'
 
-export default function NavLink({ active = false, className = '', children, ...props }: InertiaLinkProps & { active: boolean }) {
-    return (
-        <Link
-            {...props}
-            className={
-                'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 transition duration-150 ease-in-out focus:outline-none ' +
-                (active
-                    ? 'border-indigo-400 dark:border-indigo-600 text-gray-900 dark:text-gray-100 focus:border-indigo-700 '
-                    : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 ') +
-                className
-            }
-        >
-            {children}
-        </Link>
-    );
+export default function NavLink({
+  active = false,
+  className = '',
+  children,
+  ...props
+}: InertiaLinkProps & { active: boolean }) {
+  return (
+    <Link
+      {...props}
+      className={
+        'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 transition duration-150 ease-in-out focus:outline-none ' +
+        (active
+          ? 'border-indigo-400 dark:border-indigo-600 text-gray-900 dark:text-gray-100 focus:border-indigo-700 '
+          : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 ') +
+        className
+      }
+    >
+      {children}
+    </Link>
+  )
 }

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

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

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

@@ -1,16 +1,21 @@
-import { Link, InertiaLinkProps } from '@inertiajs/react';
+import { Link, InertiaLinkProps } from '@inertiajs/react'
 
-export default function ResponsiveNavLink({ active = false, className = '', children, ...props }: InertiaLinkProps & { active?: boolean }) {
-    return (
-        <Link
-            {...props}
-            className={`w-full flex items-start ps-3 pe-4 py-2 border-l-4 ${
-                active
-                    ? 'border-indigo-400 dark:border-indigo-600 text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300'
-                    : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600'
-            } text-base font-medium focus:outline-none transition duration-150 ease-in-out ${className}`}
-        >
-            {children}
-        </Link>
-    );
+export default function ResponsiveNavLink({
+  active = false,
+  className = '',
+  children,
+  ...props
+}: InertiaLinkProps & { active?: boolean }) {
+  return (
+    <Link
+      {...props}
+      className={`w-full flex items-start ps-3 pe-4 py-2 border-l-4 ${
+        active
+          ? 'border-indigo-400 dark:border-indigo-600 text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300'
+          : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600'
+      } text-base font-medium focus:outline-none transition duration-150 ease-in-out ${className}`}
+    >
+      {children}
+    </Link>
+  )
 }

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