RubyGems - kaze - Versions diffs - 0.2.0 - Mend

kaze 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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>