feat/prettier

.blade.format.json

@@ -0,0 +1,15 @@
+{
+    "echoStyle": "block",
+    "phpOptions": {
+        "singleQuotes": false,
+        "phpVersion": "8.2"
+    },
+    "formatDirectivePhpParameters": true,
+    "formatDirectiveJsonParameters": true,
+    "formatInsideEcho": true,
+    "spacesAfterDirective": 0,
+    "spacesAfterControlDirective": 1,
+    "ignoreDirectives": [],
+    "customIfs": [],
+    "useLaravelPint": true
+}

.gitignore

@@ -1,2 +1,3 @@
 /vendor/
 /build/
+/node_modules/

.prettierignore

@@ -0,0 +1,5 @@
+node_modules
+pnpm-lock.yaml
+composer.lock
+vendor
+resources/css/tw-animate-css.css

.prettierrc

@@ -0,0 +1,20 @@
+{
+    "semi": false,
+    "tabWidth": 4,
+    "useTabs": false,
+    "printWidth": 160,
+    "singleQuote": true,
+    "bracketSameLine": true,
+    "singleAttributePerLine": true,
+    "htmlWhitespaceSensitivity": "css",
+    "tailwindFunctions": ["clsx", "cn", "twMerge"],
+    "plugins": ["prettier-plugin-blade", "prettier-plugin-tailwindcss"],
+    "overrides": [
+        {
+            "files": ["*.blade.php"],
+            "options": {
+                "parser": "blade"
+            }
+        }
+    ]
+}

package.json

@@ -0,0 +1,14 @@
+{
+    "name": "mog",
+    "version": "1.0.0",
+    "private": true,
+    "scripts": {
+        "format": "prettier --write resources .github/workflows",
+        "format:check": "prettier --check resources .github/workflows"
+    },
+    "devDependencies": {
+        "prettier": "^3.0.0",
+        "prettier-plugin-blade": "^2.0.0",
+        "prettier-plugin-tailwindcss": "^0.5.0"
+    }
+}

resources/components/alert.blade.php

@@ -2,7 +2,7 @@
     'variant' => 'default',
     'title',
     'icon',
-    'content'
+    'content',
 ])
 
 @php

resources/components/aspect-ratio.blade.php

@@ -11,7 +11,7 @@
 <div
     {{ $attributes->twMerge('relative w-full') }}
     :style="{'padding-bottom': `${100 / {{ (float) $ratio }} }%`}">
-    <div class="absolute top-0 right-0 bottom-0 left-0">
+    <div class="absolute bottom-0 left-0 right-0 top-0">
         {{ $slot }}
     </div>
 </div>

resources/components/badge.blade.php

@@ -10,7 +10,7 @@
         default => 'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow',
     };
 
-    $defaultClasses = 'focus:ring-ring inline-flex items-center rounded-md border px-3 py-1 text-xs font-semibold transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none';
+    $defaultClasses = 'focus:ring-ring inline-flex items-center rounded-md border px-3 py-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2';
 @endphp
 
 <div {{ $attributes->twMerge($defaultClasses, $variantClasses) }}>{{ $slot }}</div>

resources/components/button.blade.php

@@ -25,7 +25,7 @@
         'focus-visible:ring-ring inline-flex items-center justify-center gap-2',
         'rounded-md text-sm font-medium whitespace-nowrap transition-colors duration-75',
         'hover:cursor-pointer focus-visible:ring-1 focus-visible:outline-none',
-        'disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0'
+        'disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
     );
 
     $tag = $asLink ? 'a' : 'button';

resources/components/dialog.blade.php

@@ -58,7 +58,7 @@
     <div
         x-show="dialog"
         :data-state="dialog ? 'open' : 'closed'"
-        class="bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg">
+        class="bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg">
         <div {{ $header->attributes->twMerge('flex flex-col gap-2 text-center sm:text-left') }}>
             <div {{ $title->attributes->twMerge('text-lg font-semibold') }}>
                 {{ $title }}
@@ -68,8 +68,7 @@ class="bg-background data-[state=open]:animate-in data-[state=closed]:animate-ou
             </div>
         </div>
 
-        <div
-            {{ $footer->attributes->twMerge('flex flex-col-reverse items-center sm:[align-items:unset] sm:flex-row sm:justify-end gap-2') }}>
+        <div {{ $footer->attributes->twMerge('flex flex-col-reverse items-center sm:[align-items:unset] sm:flex-row sm:justify-end gap-2') }}>
             @foreach ($orderedButtons as $name)
                 {{ $$name }}
             @endforeach

resources/components/popover.blade.php

@@ -18,7 +18,7 @@
             const trigger = $refs.trigger.firstElementChild || $refs.trigger
             const rect = trigger.getBoundingClientRect()
             const align = '{{ $align }}'
-            const popover = $refs.content;
+            const popover = $refs.content
 
             // Get popover dimensions (estimate if not visible)
             const popoverWidth = popover?.offsetWidth || 288 // w-72 = 18rem = 288px
@@ -88,15 +88,15 @@
         },
     }"
     x-on:scroll.window="open && positionPopover()"
-    x-on:click.outside="!$refs.content?.contains($event.target) ? open = false : null"
+    x-on:click.outside="! $refs.content?.contains($event.target) ? (open = false) : null"
     x-on:keydown.escape.window="open = false"
     x-on:click="
         positionPopover()
         open = ! open
     "
     x-bind:data-state="open ? 'open' : 'closed'"
     :id="$id('popover')"
-    data-slot='popover'
+    data-slot="popover"
     {{ $attributes->twMerge('relative group') }}>
     <div
         {{ $trigger->attributes }}

resources/components/slide-over.blade.php

@@ -41,7 +41,7 @@
         'bottom' => 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
     };
 
-    if(isset($trigger)) {
+    if (isset($trigger)) {
         $triggerAttributes = $trigger->attributes->merge(['x-on:click' => 'open()']);
 
         $triggerAttributes->twMerge('h-max w-max');

resources/components/toggle.blade.php

@@ -6,7 +6,7 @@
 ])
 
 @php
-    $defaultClasses = 'hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:cursor-pointer focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0';
+    $defaultClasses = 'hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:cursor-pointer focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0';
 
     $variantClasses = match ($variant) {
         'outline' => 'border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-sm',