kaze 1.4.0 → 2.0.1

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

@@ -1,100 +0,0 @@
-import { useState, createContext, useContext, PropsWithChildren, Dispatch, SetStateAction } from 'react'
-import { Link, InertiaLinkProps } from '@inertiajs/react'
-import { Transition } from '@headlessui/react'
-
-const DropDownContext = createContext<{
-  open: boolean
-  setOpen: Dispatch<SetStateAction<boolean>>
-  toggleOpen: () => void
-}>({
-  open: false,
-  setOpen: () => {},
-  toggleOpen: () => {},
-})
-
-const Dropdown = ({ children }: PropsWithChildren) => {
-  const [open, setOpen] = useState(false)
-
-  const toggleOpen = () => {
-    setOpen((previousState) => !previousState)
-  }
-
-  return (
-    <DropDownContext.Provider value={{ open, setOpen, toggleOpen }}>
-      <div className="relative">{children}</div>
-    </DropDownContext.Provider>
-  )
-}
-
-const Trigger = ({ children }: PropsWithChildren) => {
-  const { open, setOpen, toggleOpen } = useContext(DropDownContext)
-
-  return (
-    <>
-      <div onClick={toggleOpen}>{children}</div>
-
-      {open && <div className="fixed inset-0 z-40" onClick={() => setOpen(false)}></div>}
-    </>
-  )
-}
-
-const Content = ({
-  align = 'right',
-  width = '48',
-  contentClasses = 'py-1 bg-white dark:bg-gray-700',
-  children,
-}: PropsWithChildren<{ align?: 'left' | 'right'; width?: '48'; contentClasses?: string }>) => {
-  const { open, setOpen } = useContext(DropDownContext)
-
-  let alignmentClasses = 'origin-top'
-
-  if (align === 'left') {
-    alignmentClasses = 'ltr:origin-top-left rtl:origin-top-right start-0'
-  } else if (align === 'right') {
-    alignmentClasses = 'ltr:origin-top-right rtl:origin-top-left end-0'
-  }
-
-  let widthClasses = ''
-
-  if (width === '48') {
-    widthClasses = 'w-48'
-  }
-
-  return (
-    <>
-      <Transition
-        show={open}
-        enter="transition ease-out duration-200"
-        enterFrom="opacity-0 scale-95"
-        enterTo="opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="opacity-100 scale-100"
-        leaveTo="opacity-0 scale-95"
-      >
-        <div
-          className={`absolute z-50 mt-2 rounded-md shadow-lg ${alignmentClasses} ${widthClasses}`}
-          onClick={() => setOpen(false)}
-        >
-          <div className={`rounded-md ring-1 ring-black ring-opacity-5 ${contentClasses}`}>{children}</div>
-        </div>
-      </Transition>
-    </>
-  )
-}
-
-const DropdownLink = ({ className = '', children, ...props }: InertiaLinkProps) => {
-  return (
-    <Link
-      {...props}
-      className={`block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-hidden focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out ${className}`}
-    >
-      {children}
-    </Link>
-  )
-}
-
-Dropdown.Trigger = Trigger
-Dropdown.Content = Content
-Dropdown.Link = DropdownLink
-
-export default Dropdown

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

@@ -1,14 +0,0 @@
-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>
-  )
-}

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

@@ -1,66 +0,0 @@
-import { PropsWithChildren } from 'react'
-import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
-
-export default function Modal({
-  children,
-  show = false,
-  maxWidth = '2xl',
-  closeable = true,
-  onClose = () => {},
-}: PropsWithChildren<{
-  show: boolean
-  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'
-  closeable?: boolean
-  onClose: CallableFunction
-}>) {
-  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]
-
-  return (
-    <Transition show={show} 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}
-      >
-        <TransitionChild
-          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" />
-        </TransitionChild>
-
-        <TransitionChild
-          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"
-        >
-          <DialogPanel
-            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}
-          </DialogPanel>
-        </TransitionChild>
-      </Dialog>
-    </Transition>
-  )
-}

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

@@ -1,21 +0,0 @@
-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-hidden ${
-        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,20 +0,0 @@
-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-hidden 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,21 +0,0 @@
-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-hidden transition duration-150 ease-in-out ${className}`}
-    >
-      {children}
-    </Link>
-  )
-}

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

@@ -1,22 +0,0 @@
-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-xs hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-hidden 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,32 +0,0 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef, InputHTMLAttributes } from 'react'
-
-export default forwardRef(function TextInput(
-  {
-    type = 'text',
-    className = '',
-    isFocused = false,
-    ...props
-  }: InputHTMLAttributes<HTMLInputElement> & { isFocused?: boolean },
-  ref,
-) {
-  const localRef = useRef<HTMLInputElement>(null)
-
-  useImperativeHandle(ref, () => ({
-    focus: () => 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-xs ${className}`}
-      ref={localRef}
-    />
-  )
-})

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

@@ -1,37 +0,0 @@
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'
-import DeleteUserForm from './Partials/DeleteUserForm'
-import UpdateAppearanceForm from './Partials/UpdateAppearanceForm'
-import UpdatePasswordForm from './Partials/UpdatePasswordForm'
-import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm'
-import { Head } from '@inertiajs/react'
-import { PageProps } from '@/types'
-
-export default function Edit({ mustVerifyEmail, status }: PageProps<{ mustVerifyEmail: boolean; status?: string }>) {
-  return (
-    <AuthenticatedLayout
-      header={<h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">Profile</h2>}
-    >
-      <Head title="Profile" />
-
-      <div className="py-12">
-        <div className="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
-          <div className="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
-            <UpdateAppearanceForm className="max-w-xl" />
-          </div>
-
-          <div className="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
-            <UpdateProfileInformationForm mustVerifyEmail={mustVerifyEmail} status={status} className="max-w-xl" />
-          </div>
-
-          <div className="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
-            <UpdatePasswordForm className="max-w-xl" />
-          </div>
-
-          <div className="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
-            <DeleteUserForm className="max-w-xl" />
-          </div>
-        </div>
-      </div>
-    </AuthenticatedLayout>
-  )
-}

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

@@ -1,102 +0,0 @@
-import { useRef, useState, FormEventHandler } from 'react'
-import DangerButton from '@/Components/DangerButton'
-import InputError from '@/Components/InputError'
-import InputLabel from '@/Components/InputLabel'
-import Modal from '@/Components/Modal'
-import SecondaryButton from '@/Components/SecondaryButton'
-import TextInput from '@/Components/TextInput'
-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}`}>
-      <header>
-        <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100">Delete Account</h2>
-
-        <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
-          Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your
-          account, please download any data or information that you wish to retain.
-        </p>
-      </header>
-
-      <DangerButton onClick={confirmUserDeletion}>Delete Account</DangerButton>
-
-      <Modal show={confirmingUserDeletion} onClose={closeModal}>
-        <form onSubmit={deleteUser} className="p-6">
-          <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100">
-            Are you sure you want to delete your account?
-          </h2>
-
-          <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
-            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.
-          </p>
-
-          <div className="mt-6">
-            <InputLabel htmlFor="password" value="Password" className="sr-only" />
-
-            <TextInput
-              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"
-              isFocused
-              placeholder="Password"
-            />
-
-            <InputError message={errors.password} className="mt-2" />
-          </div>
-
-          <div className="mt-6 flex justify-end">
-            <SecondaryButton onClick={closeModal}>Cancel</SecondaryButton>
-
-            <DangerButton className="ms-3" disabled={processing}>
-              Delete Account
-            </DangerButton>
-          </div>
-        </form>
-      </Modal>
-    </section>
-  )
-}

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

@@ -1,47 +0,0 @@
-import { useState } from 'react'
-import { Appearance, getAppearance, setAppearance } from '@/lib/appearance'
-
-const options: { value: Appearance; label: string }[] = [
-  { value: 'light', label: 'Light' },
-  { value: 'dark', label: 'Dark' },
-  { value: 'system', label: 'System' },
-]
-
-export default function UpdateAppearanceForm({ className = '' }: { className?: string }) {
-  const [appearance, setCurrentAppearance] = useState<Appearance>(getAppearance)
-
-  const select = (value: Appearance) => {
-    setCurrentAppearance(value)
-    setAppearance(value)
-  }
-
-  return (
-    <section className={className}>
-      <header>
-        <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100">Appearance</h2>
-
-        <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
-          Choose how the application looks to you. System follows your device setting.
-        </p>
-      </header>
-
-      <div className="mt-6 inline-flex rounded-lg bg-gray-100 p-1 dark:bg-gray-900">
-        {options.map((option) => (
-          <button
-            key={option.value}
-            type="button"
-            onClick={() => select(option.value)}
-            aria-pressed={appearance === option.value}
-            className={`rounded-md px-4 py-1.5 text-sm font-medium transition focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 ${
-              appearance === option.value
-                ? 'bg-white text-gray-900 shadow-xs dark:bg-gray-700 dark:text-gray-100'
-                : 'text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'
-            }`}
-          >
-            {option.label}
-          </button>
-        ))}
-      </div>
-    </section>
-  )
-}

data/stubs/inertia-vue-ts/app/javascript/Components/Checkbox.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const emit = defineEmits(['update:checked'])
-
-const props = defineProps<{
-  checked: boolean
-  value?: any
-}>()
-
-const proxyChecked = computed({
-  get() {
-    return props.checked
-  },
-
-  set(val) {
-    emit('update:checked', val)
-  },
-})
-</script>
-
-<template>
-  <input
-    type="checkbox"
-    :value="value"
-    v-model="proxyChecked"
-    class="rounded-sm dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-xs focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800"
-  />
-</template>

data/stubs/inertia-vue-ts/app/javascript/Components/DangerButton.vue

@@ -1,7 +0,0 @@
-<template>
-  <button
-    class="inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-hidden focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150"
-  >
-    <slot />
-  </button>
-</template>

data/stubs/inertia-vue-ts/app/javascript/Components/Dropdown.vue

@@ -1,75 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    align?: 'left' | 'right'
-    width?: '48'
-    contentClasses?: string
-  }>(),
-  {
-    align: 'right',
-    width: '48',
-    contentClasses: 'py-1 bg-white dark:bg-gray-700',
-  },
-)
-
-const closeOnEscape = (e: KeyboardEvent) => {
-  if (open.value && e.key === 'Escape') {
-    open.value = false
-  }
-}
-
-onMounted(() => document.addEventListener('keydown', closeOnEscape))
-onUnmounted(() => document.removeEventListener('keydown', closeOnEscape))
-
-const widthClass = computed(() => {
-  return {
-    48: 'w-48',
-  }[props.width.toString()]
-})
-
-const alignmentClasses = computed(() => {
-  if (props.align === 'left') {
-    return 'ltr:origin-top-left rtl:origin-top-right start-0'
-  } else if (props.align === 'right') {
-    return 'ltr:origin-top-right rtl:origin-top-left end-0'
-  } else {
-    return 'origin-top'
-  }
-})
-
-const open = ref(false)
-</script>
-
-<template>
-  <div class="relative">
-    <div @click="open = !open">
-      <slot name="trigger" />
-    </div>
-
-    <!-- Full Screen Dropdown Overlay -->
-    <div v-show="open" class="fixed inset-0 z-40" @click="open = false"></div>
-
-    <Transition
-      enter-active-class="transition ease-out duration-200"
-      enter-from-class="opacity-0 scale-95"
-      enter-to-class="opacity-100 scale-100"
-      leave-active-class="transition ease-in duration-75"
-      leave-from-class="opacity-100 scale-100"
-      leave-to-class="opacity-0 scale-95"
-    >
-      <div
-        v-show="open"
-        class="absolute z-50 mt-2 rounded-md shadow-lg"
-        :class="[widthClass, alignmentClasses]"
-        style="display: none"
-        @click="open = false"
-      >
-        <div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses">
-          <slot name="content" />
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>

data/stubs/inertia-vue-ts/app/javascript/Components/DropdownLink.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import { Link } from '@inertiajs/vue3'
-
-defineProps<{
-  href: string
-}>()
-</script>
-
-<template>
-  <Link
-    :href="href"
-    class="block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-hidden focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out"
-  >
-    <slot />
-  </Link>
-</template>

data/stubs/inertia-vue-ts/app/javascript/Components/InputLabel.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  value?: string
-}>()
-</script>
-
-<template>
-  <label class="block font-medium text-sm text-gray-700 dark:text-gray-300">
-    <span v-if="value">{{ value }}</span>
-    <span v-else><slot /></span>
-  </label>
-</template>