sun-sword 0.0.9 → 0.0.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ac608a5b50200fae69d551c25b6abddc5355da222a1a8da739a7aba7c27fac03
-  data.tar.gz: 2d9fab48ea8cc5560198a23801e3424683b7a0c236df9b3b13a12bdde468cc29
+  metadata.gz: b3549043ef82d7091d8e6d984f86eefaf03ea039f2844f34f2b4f73e308006e1
+  data.tar.gz: 7d311b8b6e938425160c8d83d9a4122c7ced6271cec8e361caf91156b407c99b
 SHA512:
-  metadata.gz: 1ad02d8c6f6f1f92e2244754dc4fee44d2073af1f071dcb96b67ced1625a432aa4e142b8f06139aef3f491b5b48fee1b7bb3d3f064827e5998b6cae54211958c
-  data.tar.gz: 400165a8e6d7df364e0ea8ab835cef59cdcdf4ed2b1e707d6084605f2c17df99c5e93b948b47668ee48264bf90ef979ee8e203e8ab3494a0d268722df1057a7f
+  metadata.gz: 8d1e7a1946d73a1172608407db3d9edfb29d7832445cbd6eeb75bc648f05934250be28f1bc614b00e757a5984b08cd4ab82b8a22f60c994ad715bf0b21faa523
+  data.tar.gz: 9617f1d30d53033195b5387d677c79526db7744550529f51828a3b6470f2aca849b755e666c64190de81121d0e2880fbd0157be400f1789e2ec1a4f0e00f2fbb

data/.rubocop.yml

@@ -1,6 +1,14 @@
 # Omakase Ruby styling for Rails
 inherit_gem: { rubocop-rails-omakase: rubocop.yml }
 
+# Load extensions via Plugin API (bukan `require:`)
+plugins:
+  - rubocop-rails
+  - rubocop-performance
+  # tambahkan jika dipakai:
+  # - rubocop-rspec
+  # - rubocop-minitest
+
 # Overwrite or add rules to create your own house style
 #
 # # Use `[a, [b, c]]` not `[ a, [ b, c ] ]`
@@ -9,7 +17,7 @@ inherit_gem: { rubocop-rails-omakase: rubocop.yml }
 
 AllCops:
   SuggestExtensions: false
-  TargetRubyVersion: 3.3.4
+  TargetRubyVersion: 3.3
   DisabledByDefault: true
   Exclude:
     - '**/templates/**/*'
@@ -526,9 +534,6 @@ Lint/ShadowedException:
 Lint/RedundantStringCoercion:
   Enabled: true
 
-Lint/Syntax:
-  Enabled: true
-
 Lint/UnderscorePrefixedVariableName:
   Enabled: true
 

data/README.md

@@ -15,28 +15,17 @@ gem 'sun-sword'
 
 And then execute:
 ```bash
-    $ rails new kotaro_minami -d=postgresql -T --skip-javascript --skip-asset-pipeline
-    $ bundle install
-    $ rails generate rider_kick:init
-    $ rails generate rider_kick:clean_arch --setup
-    $ rails db:drop db:create db:migrate db:seed
     $ rails generate sun_sword:frontend
-    $ rubocop -a
+    $ rubocop -A
 ```
 ## Usage
 ```bash
 Description:
      Clean Architecture CRUD generator
-     rails new kotaro_minami -d=postgresql -T --skip-javascript --skip-asset-pipeline
 
 Example:
-    To Generate Init:
-        bin/rails  generate rider_kick:init
-
-    To Generate Pattern:
-        bin/rails  generate rider_kick:clean_arch --setup
-
     To Generate Frontend:
+        bin/rails  generate sun_sword:init
         bin/rails  generate sun_sword:frontend --setup
         
     To Generate scaffold:

data/lib/generators/sun_sword/USAGE

@@ -3,6 +3,7 @@ Description:
      rails new jendral_jack -d=postgresql -T --skip-javascript --skip-asset-pipeline
 
 Example:
+    bin/rails generate sun_sword:init
     bin/rails generate sun_sword:frontend --setup
     bin/rails generate sun_sword:scaffold contacts<check in db/structure>
 

data/lib/generators/sun_sword/frontend_generator.rb

@@ -49,6 +49,10 @@ module SunSword
         gem "turbo-rails"
         gem "stimulus-rails"
         gem "vite_rails"
+
+        group :development do
+          gem "listen"
+        end
       RUBY
       append_to_file('Gemfile', gem_dependencies)
       say 'Vite Rails gem added and bundle installed', :green
@@ -57,10 +61,9 @@ module SunSword
     def install_vite
       template 'package.json', 'package.json'
       run 'bundle exec vite install'
-      run 'yarn add -D sass vite-plugin-full-reload vite-plugin-ruby vite-plugin-stimulus-hmr'
-      run 'yarn add -D tailwindcss @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio @tailwindcss/forms @tailwindcss/line-clamp autoprefixer'
-      run 'yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-tailwindcss path'
-      run 'yarn add @hotwired/stimulus @hotwired/turbo-rails stimulus-vite-helpers vite animejs stimulus-use'
+      run 'yarn add -D vite vite-plugin-full-reload vite-plugin-ruby vite-plugin-stimulus-hmr'
+      run 'yarn add  path stimulus-vite-helpers @hotwired/stimulus @hotwired/turbo-rails @tailwindcss/aspect-ratio @tailwindcss/forms @tailwindcss/line-clamp @tailwindcss/typography @tailwindcss/vite tailwindcss vite-plugin-rails autoprefixer'
+      run 'yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-tailwindcss'
       say 'Vite installed successfully', :green
     end
 
@@ -68,8 +71,6 @@ module SunSword
       say 'Configuring Vite...'
 
       # Add a basic Vite configuration file to your Rails app
-      template 'tailwind.config.js', 'tailwind.config.js'
-      template 'postcss.config.js', 'postcss.config.js'
       template 'vite.config.ts.tt', 'vite.config.ts'
       template 'Procfile.dev', 'Procfile.dev'
       template 'bin/watch', 'bin/watch'

data/lib/generators/sun_sword/templates_frontend/controllers/application_controller.rb.tt

@@ -34,6 +34,10 @@ class ApplicationController < ActionController::Base
 
   def set_layouts
     # "#{current_auth.user.role}/application"
-    'owner/application'
+    'application'
   end
+
+    def ensure_turbo_frame!
+      turbo_frame_request? || turbo_native_app?
+    end
 end

data/lib/generators/sun_sword/templates_frontend/frontend/entrypoints/application.js

@@ -5,7 +5,7 @@ import {stimulus} from "./stimulus"
 import WebController from "../pages/web"
 import SiteStimulusController from "../pages/stimulus.js"
 
-import "../stylesheets/application.scss"
+import "../stylesheets/application.css"
 console.log("Kotaro is here")
 console.log(window.location.hash.slice(1))
 

data/lib/generators/sun_sword/templates_frontend/frontend/pages/web.js

@@ -1,116 +1,118 @@
-import {Controller} from "@hotwired/stimulus"
-import anime from "animejs";
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-    confirmationDestroy(event) {
-        const chooseTypes = document.querySelectorAll(".confirmation-destroy-" + event.params.id);
-        chooseTypes.forEach((element) => {
-            element.classList.remove('hidden');
-        })
+    connect() {
+        this.sidebarEl  = document.querySelector(".sidebar")
+        this.backdropEl = document.querySelector(".backdrop-active")
+        this.toggleBtns = document.querySelectorAll("[data-action~='web#sidebarToggle']")
+        if (!this.sidebarEl || !this.backdropEl) return
+
+        this.isOpen = false
+        this.prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches
+        this._onEsc = (e) => { if (e.key === "Escape") this.sidebarClose() }
+
+        this.backdropEl.addEventListener("click", () => this.sidebarClose(), { passive: true })
+
+        // Inisialisasi: pastikan posisi tertutup
+        this.sidebarEl.classList.add("-translate-x-full")
+        this.sidebarEl.classList.remove("translate-x-0")
+        this._setBackdrop(false)
     }
 
-    confirmationDestroyCancel(event) {
-        const chooseTypes = document.querySelectorAll(".confirmation-destroy-" + event.params.id);
-        chooseTypes.forEach((element) => {
-            element.classList.add('hidden');
-        })
+    // === Sidebar ===
+    sidebarToggle(e) {
+        e?.preventDefault()
+        this.isOpen ? this.sidebarClose() : this.sidebarOpen(e?.currentTarget)
     }
 
-    profileSetting(event) {
-        console.log('Profile');
-        const profileSettingBrowser = document.querySelector(".profile-browser");
-        const profileSettingMobile = document.querySelector(".profile-mobile");
-        if (profileSettingBrowser.classList.contains('hidden')) {
-            profileSettingBrowser.classList.remove('hidden');
-            console.log('show');
-        } else {
-            console.log('hide');
-            profileSettingBrowser.classList.add('hidden');
-        }
-        if (profileSettingMobile.classList.contains('hidden')) {
-            profileSettingMobile.classList.remove('hidden');
-            console.log('show');
-        } else {
-            console.log('hide');
-            profileSettingMobile.classList.add('hidden');
-        }
+    sidebarOpen(triggerEl) {
+        if (this.isOpen) return
+        this.isOpen = true
+
+        // Kurangi jank: pastikan element “on GPU”
+        this.sidebarEl.style.transform = "translate3d(-100%,0,0)"
+        // Force reflow → lalu transisi ke posisi buka pada frame berikut
+        requestAnimationFrame(() => {
+            this.sidebarEl.classList.remove("-translate-x-full")
+            this.sidebarEl.classList.add("translate-x-0")
+            this.sidebarEl.style.transform = "" // kembalikan, biar Tailwind kelas yang mengatur
+        })
+
+        this._setBackdrop(true)
+        document.documentElement.classList.add("overflow-hidden")
+        triggerEl?.setAttribute("aria-expanded", "true")
+        this.sidebarEl.setAttribute("aria-hidden", "false")
+        document.addEventListener("keydown", this._onEsc, { passive: true })
+
+        // Fokus pertama
+        this.sidebarEl.querySelector("a, button, input, [tabindex]")
+            ?.focus({ preventScroll: true })
     }
 
-    sidebarToggle(event) {
-        const backdropActive = document.querySelector(".backdrop-active");
-        const sidebar = document.querySelector(".sidebar");
-        if (sidebar.classList.contains('side_hide')) {
-            sidebar.classList.remove('side_hide');
-            backdropActive.classList.remove('hidden');
-            anime({
-                targets: ".backdrop-active",
-                translateX: 0,
-                opacity: [0, 0.8],
-                easing: 'easeInOutSine',
-                complete: function (anim) {
-                    console.log('Backdrop Active');
-                }
-            })
-            anime({
-                targets: '.sidebar',
-                translateX: 300,
-                duration: 1000,
-                easing: 'easeInOutExpo',
-                complete: function (anim) {
-                    console.log('Sidebar show!');
-                }
-            });
-        } else {
-            sidebar.classList.add('side_hide');
-            anime({
-                targets: '.sidebar',
-                easing: 'easeInOutExpo',
-                translateX: -300,
-                duration: 1000,
-                complete: function (anim) {
-                    console.log('Sidebar Close!');
-                }
-            });
-            anime({
-                targets: ".backdrop-active",
-                translateX: 0,
-                opacity: [0.8, 0],
-                easing: 'easeInOutSine',
-                complete: function (anim) {
-                    backdropActive.classList.add('hidden');
-                }
-            })
-        }
+    sidebarClose() {
+        if (!this.isOpen) return
+        this.isOpen = false
+
+        // Transisi balik (geser keluar)
+        this.sidebarEl.classList.add("-translate-x-full")
+        this.sidebarEl.classList.remove("translate-x-0")
+
+        this._setBackdrop(false)
+        document.documentElement.classList.remove("overflow-hidden")
+        this.sidebarEl.setAttribute("aria-hidden", "true")
+        this.toggleBtns.forEach((btn) => btn.setAttribute("aria-expanded", "false"))
+        document.removeEventListener("keydown", this._onEsc)
+        this.toggleBtns[0]?.focus({ preventScroll: true })
     }
 
     onSidebarClick(event) {
-        event.preventDefault()
-        const url = event.target.href;
-        const backdropActive = document.querySelector(".backdrop-active");
-        const sidebar = document.querySelector(".sidebar");
-        if (url !== undefined) {
-            sidebar.classList.add('side_hide');
-            anime({
-                targets: '.sidebar',
-                easing: 'easeInOutExpo',
-                translateX: -300,
-                duration: 1000,
-                complete: function (anim) {
-                    console.log('Sidebar Close!');
-                }
-            });
-            anime({
-                targets: ".backdrop-active",
-                translateX: 0,
-                opacity: [0.6, 0],
-                easing: 'easeInOutSine',
-                complete: function (anim) {
-                    console.log('opacity');
-                    backdropActive.classList.add('hidden');
-                    Turbo.visit(url);
+        const a = event.target.closest("a, button[type='submit']")
+        if (!a) return
+        setTimeout(() => this.sidebarClose(), 0)
+    }
+
+    // === Util ===
+    _setBackdrop(show) {
+        // Jika user minta “reduce motion”, skip animasi
+        if (this.prefersReduced) {
+            this.backdropEl.classList.toggle("hidden", !show)
+            this.backdropEl.classList.toggle("pointer-events-none", !show)
+            this.backdropEl.style.opacity = show ? "1" : "0"
+            return
+        }
+
+        // Pastikan elemen ada di flow saat mulai animasi
+        this.backdropEl.classList.remove("hidden")
+        requestAnimationFrame(() => {
+            if (show) {
+                this.backdropEl.classList.remove("opacity-0", "pointer-events-none")
+                this.backdropEl.classList.add("opacity-100")
+            } else {
+                // Fade out, lalu sembunyikan setelah selesai
+                this.backdropEl.classList.remove("opacity-100")
+                this.backdropEl.classList.add("opacity-0", "pointer-events-none")
+                const onEnd = () => {
+                    this.backdropEl.classList.add("hidden")
+                    this.backdropEl.removeEventListener("transitionend", onEnd)
                 }
-            })
+                this.backdropEl.addEventListener("transitionend", onEnd)
+            }
+        })
+    }
+
+    // Opsional: submenu & profil tetap bisa dipakai dari versi sebelumnya
+    profileSetting(event) {
+        const container = event.currentTarget.closest("li")
+        const dropdown = container?.querySelector("[class^='profile-']")
+        if (!dropdown) return
+
+        dropdown.classList.toggle("hidden")
+        const closeOnOutside = (e) => {
+            if (!dropdown.contains(e.target) && !event.currentTarget.contains(e.target)) {
+                dropdown.classList.add("hidden")
+                window.removeEventListener("click", closeOnOutside, true)
+            }
         }
+        window.addEventListener("click", closeOnOutside, true)
     }
 }
-

data/lib/generators/sun_sword/templates_frontend/frontend/stylesheets/application.css

@@ -0,0 +1,221 @@
+@import "tailwindcss";
+
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";
+@plugin "@tailwindcss/aspect-ratio";
+
+@source "../../../app/views/**/*.html.erb";
+@source "../../../app/views/**/*.rb";
+@source "../../../app/helpers/**/*.rb";
+@source "./app/frontend/**/*.{js,ts,jsx,tsx,css,scss,ejs}";
+
+
+/* Theme tokens: memetakan screens & font family */
+@theme {
+    /* Breakpoints (sesuai config kamu) */
+    --breakpoint-sm: 640px;
+    --breakpoint-md: 768px;
+    --breakpoint-lg: 1024px;
+    --breakpoint-xl: 1280px;
+    --breakpoint-2xl: 1536px;
+
+    /* Font stack: Open Sans + fallback default Tailwind */
+    --font-sans: "Open Sans", ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+
+@layer base {
+    * {
+        box-sizing: border-box;
+    }
+
+    *:before,
+    *:after {
+        box-sizing: border-box;
+    }
+
+    html {
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    }
+
+    body {
+        font-family: "Open Sans", sans-serif;
+        font-size: 1.6rem;
+        line-height: 1.75;
+        font-weight: 300;
+        color: #303030;
+        letter-spacing: 0.045em;
+        background-color: #fbfbfb;
+    }
+
+    .tooltip {
+        position: relative;
+    }
+
+    strong {
+        font-weight: 500;
+    }
+
+    .tooltip::before {
+        content: "";
+        position: absolute;
+        top: -6px;
+        left: 50%;
+        transform: translateX(-50%);
+        border-width: 4px 6px 0 6px;
+        border-style: solid;
+        border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;
+        z-index: 99;
+        opacity: 0;
+        transition: .3s opacity;
+    }
+
+    [tooltip-position='left']::before {
+        left: 0%;
+        top: 50%;
+        margin-left: -12px;
+        transform: translatey(-50%) rotate(-90deg)
+    }
+
+    [tooltip-position='top']::before {
+        left: 50%;
+    }
+
+    [tooltip-position='buttom']::before {
+        top: 100%;
+        margin-top: 8px;
+        transform: translateX(-50%) translatey(-100%) rotate(-180deg)
+    }
+
+    [tooltip-position='right']::before {
+        left: 100%;
+        top: 50%;
+        margin-left: 1px;
+        transform: translatey(-50%) rotate(90deg)
+    }
+
+    .tooltip::after {
+        content: attr(data-text);
+        position: absolute;
+        min-width: 10rem;
+        left: 50%;
+        top: -6px;
+        transform: translateX(-50%) translateY(-100%);
+        background: rgba(0, 0, 0, 0.7);
+        text-align: center;
+        color: #fff;
+        font-size: 12px;
+        border-radius: 5px;
+        pointer-events: none;
+        padding: 4px 4px;
+        z-index: 99;
+        opacity: 0;
+        transition: .3s opacity;
+    }
+
+    [tooltip-position='left']::after {
+        left: 0;
+        top: 50%;
+        margin-left: -8px;
+        transform: translateX(-100%) translateY(-50%);
+    }
+
+    [tooltip-position='top']::after {
+        left: 50%;
+    }
+
+    [tooltip-position='buttom']::after {
+        top: 100%;
+        margin-top: 8px;
+        transform: translateX(-50%) translateY(0%);
+    }
+
+    [tooltip-position='right']::after {
+        left: 100%;
+        top: 50%;
+        margin-left: 8px;
+        transform: translateX(0%) translateY(-50%);
+    }
+
+    .tooltip:hover::after, .tooltip:hover::before {
+        opacity: 1
+    }
+
+
+    pre {
+        white-space: pre-wrap;
+        word-wrap: break-word;
+    }
+
+//#------------
+h1 {
+    @apply text-2xl;
+}
+
+    h2 {
+        @apply text-xl;
+    }
+
+    h3 {
+        @apply text-lg;
+    }
+
+    .class-button {
+        @apply rounded-md px-3 py-2 text-center text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
+        @apply focus-visible:outline-gray-500 bg-gray-500 hover:bg-white hover:text-gray-500 hover:border-gray-50 hover:outline;
+    }
+
+    .class-button-outline {
+        @apply rounded-md px-3 py-2 text-center text-sm font-semibold text-gray-500 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
+        @apply outline outline-1 border-gray-500 focus-visible:outline-gray-500 bg-white hover:bg-gray-500  hover:text-white hover:border-gray-500  hover:outline;
+    }
+
+    .class-label {
+        @apply text-sm font-semibold leading-6 text-gray-900;
+    }
+
+    .class-text-field {
+        @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6;
+    }
+
+    .class-card-container {
+        @apply overflow-hidden bg-white shadow sm:rounded-lg p-5
+    }
+
+    .class-input {
+        @apply sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:py-6 pl-2
+    }
+
+    .class-tr {
+        @apply top-0 z-10 border-b border-gray-300 bg-white/75 px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell
+    }
+
+    .class-td {
+        @apply whitespace-nowrap px-3 py-5 text-sm text-gray-500
+    }
+
+    .class-menu-link {
+        @apply hover:font-semibold hover:text-gray-500 block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700
+    }
+
+    .class-text-link {
+        @apply hover:font-semibold hover:text-gray-500 block rounded-md text-sm leading-6 text-gray-700
+    }
+
+    .class-menu-active-link {
+        @apply font-semibold block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700
+    }
+}
+
+@layer utilities {
+    /* Chrome, Safari and Opera */
+    .no-scrollbar::-webkit-scrollbar {
+        display: none;
+    }
+
+    .no-scrollbar {
+        -ms-overflow-style: none; /* IE and Edge */
+        scrollbar-width: none; /* Firefox */
+    }
+}

data/lib/generators/sun_sword/templates_frontend/views/components/_action_destroy.html.erb.tt

@@ -5,7 +5,7 @@
     </svg>
   </button>
   <div class="confirmation-destroy-<%%= value.id %> hidden relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="false">
-    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity min-h-screen z-100"></div>
+    <div class="fixed inset-0 bg-gray-500/75 transition-opacity min-h-screen z-100"></div>
     <div class="fixed inset-0 z-100 w-screen overflow-y-auto">
       <div class="flex min-h-full justify-center p-4 text-center items-center sm:p-0">
         <div class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">

data/lib/generators/sun_sword/templates_frontend/views/layouts/application.html.erb.tt

@@ -16,8 +16,7 @@
   <%%= csp_meta_tag %>
 
   <%%= vite_client_tag %>
-  <%%= vite_stylesheet_tag 'application.scss', data: { "turbo-track": "reload" } %>
-  <%%= vite_javascript_tag 'application' %>
+  <%%= vite_javascript_tag "application", "data-turbo-track": "reload", defer: true %>
 </head>
 
 <body class="h-full" data-turbo="true">

data/lib/generators/sun_sword/templates_frontend/views/layouts/dashboard/application.html.erb.tt

@@ -16,7 +16,7 @@
   <%%= csp_meta_tag %>
 
   <%%= vite_client_tag %>
-  <%%= vite_javascript_tag 'application', data: { "turbo-track": "reload" } %>
+  <%%= vite_javascript_tag "application", "data-turbo-track": "reload", defer: true %>
 </head>
 
 <body class="h-full" data-turbo="true">
@@ -27,7 +27,11 @@
       <div class="relative isolate flex min-h-svh w-full bg-white max-lg:flex-col lg:bg-zinc-100 dark:bg-zinc-900 dark:lg:bg-zinc-950">
 
         <%%# mobile %>
-        <div class="fixed bg-white rounded-2xl m-2 inset-y-0 w-64 -left-[300px] lg:hidden sidebar side_hide z-50" data-action="click->web#onSidebarClick">
+        <div
+                class="fixed inset-y-0 left-0 z-50 w-64 max-w-[85vw] bg-white rounded-2xl m-2
+         -translate-x-full will-change-transform transition-transform duration-300 ease-out
+         lg:hidden sidebar"
+                data-action="click->web#onSidebarClick">
           <nav class="flex h-full min-h-0 flex-col">
             <%%= render "components/layouts/sidebar", from: :mobile %>
           </nav>
@@ -53,7 +57,10 @@
         </div>
 
         <main class="flex flex-1 flex-col pb-2 lg:min-w-0 lg:pl-64 lg:pr-2 lg:pt-2">
-          <div class="fixed inset-0 bg-gray-900 backdrop-blur-lg backdrop-active opacity-0 hidden lg:hidden" aria-hidden="true"></div>
+          <div
+                  class="fixed inset-0 z-40 bg-black/50 opacity-0 pointer-events-none
+         transition-opacity duration-300 ease-out backdrop-active lg:hidden hidden"
+                  aria-hidden="true"></div>
           <div class="grow p-6 lg:rounded-lg lg:bg-white lg:p-10 lg:shadow-sm lg:ring-1 lg:ring-zinc-950/5 dark:lg:bg-zinc-900 dark:lg:ring-white/10">
             <div class="mx-auto max-w-6xl">
               <%%= yield %>

data/lib/generators/sun_sword/templates_frontend/vite.config.ts.tt

@@ -2,9 +2,12 @@ import {defineConfig} from 'vite'
 import RubyPlugin from 'vite-plugin-ruby'
 import FullReload from 'vite-plugin-full-reload'
 import StimulusHMR from 'vite-plugin-stimulus-hmr';
+// @ts-ignore
+import tailwindcss from "@tailwindcss/vite";
 export default defineConfig({
     plugins: [
         RubyPlugin(),
+        tailwindcss(),
         FullReload(['config/routes.rb', 'app/views/**/*', 'app/frontend/pages/**/*']),
         StimulusHMR()
     ],
@@ -16,12 +19,5 @@ export default defineConfig({
                 application: 'app/frontend/entrypoints/application.js'
             }
         }
-    },
-    css: {
-        preprocessorOptions: {
-            scss: {
-                api: 'modern-compiler' // or "modern"
-            }
-        }
     }
 })

data/lib/sun_sword/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module SunSword
-  VERSION = '0.0.9'
+  VERSION = '0.0.10'
   public_constant :VERSION
 end

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: sun-sword
 version: !ruby/object:Gem::Version
-  version: 0.0.9
+  version: 0.0.10
 platform: ruby
 authors:
 - kotarominami
-autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-11-25 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -88,12 +87,10 @@ files:
 - lib/generators/sun_sword/templates_frontend/frontend/entrypoints/stimulus.js
 - lib/generators/sun_sword/templates_frontend/frontend/pages/stimulus.js
 - lib/generators/sun_sword/templates_frontend/frontend/pages/web.js
-- lib/generators/sun_sword/templates_frontend/frontend/stylesheets/application.scss
+- lib/generators/sun_sword/templates_frontend/frontend/stylesheets/application.css
 - lib/generators/sun_sword/templates_frontend/helpers/application_helper.rb
 - lib/generators/sun_sword/templates_frontend/package.json
-- lib/generators/sun_sword/templates_frontend/postcss.config.js
 - lib/generators/sun_sword/templates_frontend/rubocop.yml.tt
-- lib/generators/sun_sword/templates_frontend/tailwind.config.js
 - lib/generators/sun_sword/templates_frontend/views/components/_action_destroy.html.erb.tt
 - lib/generators/sun_sword/templates_frontend/views/components/_action_edit.html.erb.tt
 - lib/generators/sun_sword/templates_frontend/views/components/_action_show.html.erb.tt
@@ -124,7 +121,6 @@ licenses:
 - MIT
 metadata:
   source_code_uri: https://github.com/kotaroisme/sun-sword
-post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -139,8 +135,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.23
-signing_key:
+rubygems_version: 3.7.2
 specification_version: 4
 summary: Sun Sword is a Generator for Clean Architecture
 test_files: []

data/lib/generators/sun_sword/templates_frontend/frontend/stylesheets/application.scss

@@ -1,198 +0,0 @@
-@use "tailwindcss/base";
-@use "tailwindcss/components";
-@use "tailwindcss/utilities";
-
-@layer base {
-  * {
-    box-sizing: border-box;
-  }
-
-  *:before,
-  *:after {
-    box-sizing: border-box;
-  }
-
-  html {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  }
-
-  body {
-    font-family: "Open Sans", sans-serif;
-    font-size: 1.6rem;
-    line-height: 1.75;
-    font-weight: 300;
-    color: #303030;
-    letter-spacing: 0.045em;
-    background-color: #fbfbfb;
-  }
-
-  .tooltip {
-    position: relative;
-  }
-
-  strong {
-    font-weight: 500;
-  }
-
-  .tooltip::before {
-    content: "";
-    position: absolute;
-    top: -6px;
-    left: 50%;
-    transform: translateX(-50%);
-    border-width: 4px 6px 0 6px;
-    border-style: solid;
-    border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;
-    z-index: 99;
-    opacity: 0;
-    transition: .3s opacity;
-  }
-
-  [tooltip-position='left']::before {
-    left: 0%;
-    top: 50%;
-    margin-left: -12px;
-    transform: translatey(-50%) rotate(-90deg)
-  }
-
-  [tooltip-position='top']::before {
-    left: 50%;
-  }
-
-  [tooltip-position='buttom']::before {
-    top: 100%;
-    margin-top: 8px;
-    transform: translateX(-50%) translatey(-100%) rotate(-180deg)
-  }
-
-  [tooltip-position='right']::before {
-    left: 100%;
-    top: 50%;
-    margin-left: 1px;
-    transform: translatey(-50%) rotate(90deg)
-  }
-
-  .tooltip::after {
-    content: attr(data-text);
-    position: absolute;
-    min-width: 10rem;
-    left: 50%;
-    top: -6px;
-    transform: translateX(-50%) translateY(-100%);
-    background: rgba(0, 0, 0, 0.7);
-    text-align: center;
-    color: #fff;
-    font-size: 12px;
-    border-radius: 5px;
-    pointer-events: none;
-    padding: 4px 4px;
-    z-index: 99;
-    opacity: 0;
-    transition: .3s opacity;
-  }
-
-  [tooltip-position='left']::after {
-    left: 0;
-    top: 50%;
-    margin-left: -8px;
-    transform: translateX(-100%) translateY(-50%);
-  }
-
-  [tooltip-position='top']::after {
-    left: 50%;
-  }
-
-  [tooltip-position='buttom']::after {
-    top: 100%;
-    margin-top: 8px;
-    transform: translateX(-50%) translateY(0%);
-  }
-
-  [tooltip-position='right']::after {
-    left: 100%;
-    top: 50%;
-    margin-left: 8px;
-    transform: translateX(0%) translateY(-50%);
-  }
-
-  .tooltip:hover::after, .tooltip:hover::before {
-    opacity: 1
-  }
-
-
-  pre {
-    white-space: pre-wrap;
-    word-wrap: break-word;
-  }
-
-  //#------------
-  h1 {
-    @apply text-2xl;
-  }
-
-  h2 {
-    @apply text-xl;
-  }
-
-  h3 {
-    @apply text-lg;
-  }
-
-  .class-button {
-    @apply rounded-md px-3 py-2 text-center text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
-    @apply focus-visible:outline-gray-500 bg-gray-500 hover:bg-white hover:text-gray-500 hover:border-gray-50 hover:outline;
-  }
-
-  .class-button-outline {
-    @apply rounded-md px-3 py-2 text-center text-sm font-semibold text-gray-500 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
-    @apply outline outline-1 border-gray-500 focus-visible:outline-gray-500 bg-white hover:bg-gray-500  hover:text-white hover:border-gray-500  hover:outline;
-  }
-
-  .class-label {
-    @apply text-sm font-semibold leading-6 text-gray-900;
-  }
-
-  .class-text-field {
-    @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6;
-  }
-
-  .class-card-container {
-    @apply overflow-hidden bg-white shadow sm:rounded-lg p-5
-  }
-
-  .class-input {
-    @apply sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:py-6 pl-2
-  }
-
-  .class-tr {
-    @apply top-0 z-10 border-b border-gray-300 bg-white bg-opacity-75 px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell
-  }
-
-  .class-td {
-    @apply whitespace-nowrap px-3 py-5 text-sm text-gray-500
-  }
-
-  .class-menu-link {
-    @apply hover:font-semibold hover:text-gray-500 block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700
-  }
-
-  .class-text-link {
-    @apply hover:font-semibold hover:text-gray-500 block rounded-md text-sm leading-6 text-gray-700
-  }
-
-  .class-menu-active-link {
-    @apply font-semibold block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700
-  }
-}
-
-@layer utilities {
-  /* Chrome, Safari and Opera */
-  .no-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
-
-  .no-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-}

data/lib/generators/sun_sword/templates_frontend/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

data/lib/generators/sun_sword/templates_frontend/tailwind.config.js

@@ -1,39 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-const defaultTheme = require('tailwindcss/defaultTheme')
-
-module.exports = {
-    content: [
-        './app/helpers/**/*.rb',
-        './app/views/**/*.{.erb,erb}',
-        './app/frontend/**/*.{js, css, scss, ejs}',
-    ],
-    theme: {
-        screens: {
-            'sm': '640px',
-            // => @media (min-width: 640px) { ... }
-
-            'md': '768px',
-            // => @media (min-width: 768px) { ... }
-
-            'lg': '1024px',
-            // => @media (min-width: 1024px) { ... }
-
-            'xl': '1280px',
-            // => @media (min-width: 1280px) { ... }
-
-            '2xl': '1536px',
-            // => @media (min-width: 1536px) { ... }
-        },
-        extend: {
-            fontFamily: {
-                sans: ['Open Sans', ...defaultTheme.fontFamily.sans],
-            },
-        },
-    },
-    plugins: [
-        require('@tailwindcss/aspect-ratio'),
-        require('@tailwindcss/forms'),
-        require('@tailwindcss/typography'),
-    ],
-}
-