RubyGems - kaze - Versions diffs - 0.2.0 - Mend

kaze 0.2.0

Files changed (121) hide show

data/stubs/inertia-react-ts/app/javascript/entrypoints/bootstrap.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import axios from 'axios';
+window.axios = axios;
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

data/stubs/inertia-react-ts/app/javascript/types/global.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { AxiosInstance } from 'axios';
+declare global {
+    interface Window {
+        axios: AxiosInstance;
+    }
+}

data/stubs/inertia-react-ts/app/javascript/types/index.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+export interface User {
+    id: number;
+    name: string;
+    email: string;
+    email_verified_at: string;
+}
+export type PageProps<T extends Record<string, unknown> = Record<string, unknown>> = T & {
+    auth: {
+        user: User;
+    };
+};

data/stubs/inertia-react-ts/app/javascript/types/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ /// <reference types="vite/client" />

data/stubs/inertia-react-ts/app/views/layouts/application.html.erb ADDED Viewed

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title><%= content_for(:title) || "Rails" %></title>
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.bunny.net">
+    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
+    <%= vite_client_tag %>
+    <%= vite_react_refresh_tag %>
+    <%= vite_typescript_tag 'application.tsx', defer: true %>
+  </head>
+  <body class="font-sans antialiased">
+    <div class="min-h-screen bg-gray-100">
+      <%= yield %>
+    </div>
+  </body>
+</html>

data/stubs/inertia-react-ts/config/tailwind.config.js ADDED Viewed

@@ -0,0 +1,22 @@
+import defaultTheme from 'tailwindcss/defaultTheme';
+import forms from '@tailwindcss/forms';
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './public/*.html',
+    './app/helpers/**/*.rb',
+    './app/views/**/*',
+    './app/javascript/**/*.tsx',
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Figtree', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+  plugins: [forms],
+}

data/stubs/inertia-react-ts/package.json ADDED Viewed

@@ -0,0 +1,26 @@
+{
+    "private": true,
+    "type": "module",
+    "scripts": {
+      "dev": "vite",
+      "build": "tsc && bin/rails tailwindcss:build && vite build"
+    },
+    "devDependencies": {
+      "@headlessui/react": "^2.0.4",
+      "@inertiajs/react": "^1.1.0",
+      "@tailwindcss/forms": "^0.5.7",
+      "@types/node": "^18.13.0",
+      "@types/react": "^18.0.28",
+      "@types/react-dom": "^18.0.10",
+      "@vitejs/plugin-react": "^4.2.0",
+      "autoprefixer": "^10.4.12",
+      "axios": "^1.6.4",
+      "postcss": "^8.4.31",
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0",
+      "tailwindcss": "^3.2.1",
+      "typescript": "^5.0.2",
+      "vite": "^5.2.11",
+      "vite-plugin-rails": "^0.5.0"
+    }
+  }

data/stubs/inertia-react-ts/tsconfig.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "isolatedModules": true,
+    "target": "ESNext",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./app/javascript/*"]
+    }
+  },
+  "include": ["app/javascript/**/*.ts", "app/javascript/**/*.tsx", "app/javascript/**/*.d.ts"]
+}

data/stubs/inertia-react-ts/vite.config.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import Rails from 'vite-plugin-rails'
+import react from '@vitejs/plugin-react'
+export default defineConfig({
+  resolve: {
+    dedupe: ['axios']
+  },
+  plugins: [
+    Rails(),
+    react(),
+  ],
+})

data/stubs/inertia-vue-ts/app/javascript/Components/ApplicationLogo.vue ADDED Viewed

@@ -0,0 +1,8 @@
+<template>
+    <svg viewBox="0 -6 32 32" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fill-rule="evenodd">
+            <path d="M0-6h32v32H0z"/>
+            <path fill="#c00" fill-rule="nonzero" d="M.985 19.636s.422-4.163 3.375-9.087c2.954-4.924 7.99-8.65 12.083-9.017 8.144-.816 15.46 6.485 15.46 6.485s-.24.168-.494.38C23.42 2.49 18.54 5.274 17.005 6.02c-7.033 3.925-4.91 13.616-4.91 13.616H.987zM24.137 2.32c-.45-.182-.9-.35-1.364-.505l.056-.93c.885.254 1.237.423 1.363.493l-.056.943zM22.8 5.304c.45.028.915.084 1.393.183l-.056.872c-.464-.1-.928-.155-1.392-.17l.056-.885zM17.597.913c-.407 0-.815.015-1.223.058l-.268-.83c.465-.056.915-.084 1.35-.084l.282.858h-.14zm.676 5.178c.35-.154.76-.31 1.237-.45l.31.93c-.41.125-.817.294-1.225.49l-.323-.97zm-6.386-3.7c-.366.184-.718.395-1.083.62l-.647-.985c.38-.225.745-.42 1.097-.604l.633.97zm2.883 6.33c.252-.323.548-.646.87-.942l.634.957c-.31.323-.59.647-.83 1L14.77 8.72zm-2.04 4.53c.112-.506.24-1.027.422-1.547l1.012.802c-.14.548-.24 1.097-.295 1.645l-1.14-.9zM6.57 6.57c-.34.35-.662.73-.958 1.11L4.53 6.752c.323-.352.674-.704 1.04-1.055l1 .872zm-4.25 6.286c-.224.52-.52 1.21-.702 1.688L0 13.954c.14-.38.436-1.084.703-1.69l1.618.592zm10.2 3.967l1.518.548c.084.663.21 1.28.337 1.83l-1.688-.605c-.07-.422-.14-1.027-.168-1.772z"/>
+        </g>
+    </svg>
+</template>

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

@@ -0,0 +1,29 @@
+<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 dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm 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 ADDED Viewed

@@ -0,0 +1,7 @@
+<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-none 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 ADDED Viewed

@@ -0,0 +1,75 @@
+<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 ADDED Viewed

@@ -0,0 +1,16 @@
+<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-none 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/InputError.vue ADDED Viewed

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineProps<{
+    message?: string;
+}>();
+</script>
+<template>
+    <div v-show="message">
+        <p class="text-sm text-red-600 dark:text-red-400">
+            {{ message }}
+        </p>
+    </div>
+</template>

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

@@ -0,0 +1,12 @@
+<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>

data/stubs/inertia-vue-ts/app/javascript/Components/Modal.vue ADDED Viewed

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, watch } from 'vue';
+const props = withDefaults(
+    defineProps<{
+        show?: boolean;
+        maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+        closeable?: boolean;
+    }>(),
+    {
+        show: false,
+        maxWidth: '2xl',
+        closeable: true,
+    }
+);
+const emit = defineEmits(['close']);
+watch(
+    () => props.show,
+    () => {
+        if (props.show) {
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = 'visible';
+        }
+    }
+);
+const close = () => {
+    if (props.closeable) {
+        emit('close');
+    }
+};
+const closeOnEscape = (e: KeyboardEvent) => {
+    if (e.key === 'Escape' && props.show) {
+        close();
+    }
+};
+onMounted(() => document.addEventListener('keydown', closeOnEscape));
+onUnmounted(() => {
+    document.removeEventListener('keydown', closeOnEscape);
+    document.body.style.overflow = 'visible';
+});
+const maxWidthClass = computed(() => {
+    return {
+        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',
+    }[props.maxWidth];
+});
+</script>
+<template>
+    <Teleport to="body">
+        <Transition leave-active-class="duration-200">
+            <div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50" scroll-region>
+                <Transition
+                    enter-active-class="ease-out duration-300"
+                    enter-from-class="opacity-0"
+                    enter-to-class="opacity-100"
+                    leave-active-class="ease-in duration-200"
+                    leave-from-class="opacity-100"
+                    leave-to-class="opacity-0"
+                >
+                    <div v-show="show" class="fixed inset-0 transform transition-all" @click="close">
+                        <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75" />
+                    </div>
+                </Transition>
+                <Transition
+                    enter-active-class="ease-out duration-300"
+                    enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    enter-to-class="opacity-100 translate-y-0 sm:scale-100"
+                    leave-active-class="ease-in duration-200"
+                    leave-from-class="opacity-100 translate-y-0 sm:scale-100"
+                    leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                >
+                    <div
+                        v-show="show"
+                        class="mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto"
+                        :class="maxWidthClass"
+                    >
+                        <slot v-if="show" />
+                    </div>
+                </Transition>
+            </div>
+        </Transition>
+    </Teleport>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/NavLink.vue ADDED Viewed

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Link } from '@inertiajs/vue3';
+const props = defineProps<{
+    href: string;
+    active?: boolean;
+}>();
+const classes = computed(() =>
+    props.active
+        ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
+        : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 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:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 transition duration-150 ease-in-out'
+);
+</script>
+<template>
+    <Link :href="href" :class="classes">
+        <slot />
+    </Link>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/PrimaryButton.vue ADDED Viewed

@@ -0,0 +1,7 @@
+<template>
+    <button
+        class="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"
+    >
+        <slot />
+    </button>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/ResponsiveNavLink.vue ADDED Viewed

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Link } from '@inertiajs/vue3';
+const props = defineProps<{
+    href: string;
+    active?: boolean;
+}>();
+const classes = computed(() =>
+    props.active
+        ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-start text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-none 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 transition duration-150 ease-in-out'
+        : 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium 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:outline-none 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 transition duration-150 ease-in-out'
+);
+</script>
+<template>
+    <Link :href="href" :class="classes">
+        <slot />
+    </Link>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/SecondaryButton.vue ADDED Viewed

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+withDefaults(
+    defineProps<{
+        type?: 'button' | 'submit' | 'reset';
+    }>(),
+    {
+        type: 'button',
+    }
+);
+</script>
+<template>
+    <button
+        :type="type"
+        class="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"
+    >
+        <slot />
+    </button>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/TextInput.vue ADDED Viewed

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+const model = defineModel<string>({ required: true });
+const input = ref<HTMLInputElement | null>(null);
+onMounted(() => {
+    if (input.value?.hasAttribute('autofocus')) {
+        input.value?.focus();
+    }
+});
+defineExpose({ focus: () => input.value?.focus() });
+</script>
+<template>
+    <input
+        class="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"
+        v-model="model"
+        ref="input"
+    />
+</template>