sun-sword 0.0.1

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

@@ -0,0 +1,122 @@
+import {Controller} from "@hotwired/stimulus"
+import anime from "animejs";
+
+export default class extends Controller {
+    confirmationDestroy(event) {
+        const chooseTypes = document.querySelectorAll(".confirmation-destroy-" + event.params.id);
+        chooseTypes.forEach((element) => {
+            element.classList.remove('hidden');
+        })
+    }
+
+    confirmationDestroyCancel(event) {
+        const chooseTypes = document.querySelectorAll(".confirmation-destroy-" + event.params.id);
+        chooseTypes.forEach((element) => {
+            element.classList.add('hidden');
+        })
+    }
+
+    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');
+        }
+    }
+
+    sidebarToggle(event) {
+        const toggleClose = document.querySelector(".sidebar-toggle-close");
+        const toggeleOpen = document.querySelector(".sidebar-toggle-open");
+        const backdropActive = document.querySelector(".backdrop-active");
+        const sidebar = document.querySelector(".sidebar");
+        if (sidebar.classList.contains('side_hide')) {
+            toggleClose.classList.remove('hidden');
+            toggeleOpen.classList.add('hidden');
+            sidebar.classList.remove('side_hide');
+            backdropActive.classList.remove('hidden');
+            anime({
+                targets: ".backdrop-active",
+                translateX: 0,
+                opacity: [0, 0.6],
+                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 {
+            toggleClose.classList.add('hidden');
+            toggeleOpen.classList.remove('hidden');
+            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) {
+                    backdropActive.classList.add('hidden');
+                }
+            })
+        }
+    }
+
+    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);
+                }
+            })
+        }
+    }
+}
+

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

@@ -0,0 +1,198 @@
+@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/helpers/application_helper.rb

@@ -0,0 +1,5 @@
+module ApplicationHelper
+  def flash_type(flash)
+    flash.map { |type, msg| type }[0]
+  end
+end

data/lib/generators/sun_sword/templates_frontend/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "sun_sword",
+  "private": "true",
+  "type": "module",
+  "author": "kotarominami <kotaroisme@gmail.com>",
+  "license": "MIT"
+}

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

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