Adding updates to actions and code styles

Author: tnylea

.github/workflows/lint.yml

@@ -0,0 +1,46 @@
+name: linter
+
+on:
+  push:
+    branches:
+      - develop
+      - main
+  pull_request:
+    branches:
+      - develop
+      - main
+
+jobs:
+  quality:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.2'
+
+      - name: Install Dependencies
+        run: |
+          composer install -q --no-ansi --no-interaction --no-scripts --no-progress --prefer-dist
+          npm install
+
+      - name: Run Pint
+        run: vendor/bin/pint
+
+      - name: Frontend Format Check
+        run: npm run format
+
+      - name: Frontend Lint
+        run: npm run lint
+
+      - name: Commit changes
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: fix code style
+          commit_options: '--no-verify'
+
+      # We need to run PHPStan after commiting changes as it does not auto-fix errors.
+      - name: PHPStan
+        run: ./vendor/bin/phpstan

composer.json

@@ -75,4 +75,4 @@
     },
     "minimum-stability": "dev",
     "prefer-stable": true
-}
+}

eslint.config.js

@@ -1,58 +1,58 @@
 import js from '@eslint/js';
 import prettier from 'eslint-config-prettier';
+import vue from 'eslint-plugin-vue';
 import globals from 'globals';
 import typescript from 'typescript-eslint';
-import vue from 'eslint-plugin-vue';
 
 /** @type {import('eslint').Linter.Config[]} */
 export default [
     js.configs.recommended,
     ...typescript.configs.recommended,
     {
         ...vue.configs.flat.recommended,
-        ...vue.configs["flat/strongly-recommended"],
-        ...vue.configs["flat/essential"],
+        ...vue.configs['flat/strongly-recommended'],
+        ...vue.configs['flat/essential'],
         languageOptions: {
             globals: {
                 ...globals.browser,
             },
         },
         rules: {
-            "vue/match-component-import-name": "warn",
-            "vue/match-component-file-name": [
-                "error",
+            'vue/match-component-import-name': 'warn',
+            'vue/match-component-file-name': [
+                'error',
                 {
-                    extensions: ["vue"],
+                    extensions: ['vue'],
                     shouldMatchCase: true,
                 },
             ],
-            "vue/component-definition-name-casing": ["error", "PascalCase"],
-            "vue/block-tag-newline": [
-                "warn",
+            'vue/component-definition-name-casing': ['error', 'PascalCase'],
+            'vue/block-tag-newline': [
+                'warn',
                 {
-                    singleline: "always",
-                    multiline: "always",
+                    singleline: 'always',
+                    multiline: 'always',
                     maxEmptyLines: 0,
                 },
             ],
-            "vue/html-self-closing": [
-                "error",
+            'vue/html-self-closing': [
+                'error',
                 {
                     html: {
-                        void: "always",
-                        normal: "never",
-                        component: "always",
+                        void: 'always',
+                        normal: 'never',
+                        component: 'always',
                     },
-                    svg: "always",
-                    math: "always",
+                    svg: 'always',
+                    math: 'always',
                 },
             ],
-            "vue/require-default-prop": "off",
+            'vue/require-default-prop': 'off',
         },
     },
     {
         plugins: {
-            "@typescript-eslint": tseslint.plugin,
+            '@typescript-eslint': tseslint.plugin,
         },
         languageOptions: {
             parser: tseslint.parser,
@@ -65,4 +65,4 @@ export default [
         ignores: ['vendor', 'node_modules', 'public', 'bootstrap/ssr', 'tailwind.config.js'],
     },
     prettier, // Turn off all rules that might conflict with Prettier
-];
+];

resources/css/app.css

@@ -83,4 +83,4 @@
     body {
         @apply bg-background text-foreground;
     }
-}
+}

resources/js/app.ts

@@ -2,8 +2,8 @@ import '../css/app.css';
 
 import { createInertiaApp } from '@inertiajs/vue3';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
-import { createApp, h } from 'vue';
 import type { DefineComponent } from 'vue';
+import { createApp, h } from 'vue';
 import { ZiggyVue } from '../../vendor/tightenco/ziggy';
 import { initializeTheme } from './composables/useAppearance';
 

resources/js/components/AppContent.vue

@@ -1,25 +1,21 @@
 <script setup lang="ts">
-import { SidebarInset } from '@/components/ui/sidebar'
-import { computed } from 'vue'
+import { SidebarInset } from '@/components/ui/sidebar';
+import { computed } from 'vue';
 
 interface Props {
-  variant?: 'header' | 'sidebar'
-  class?: string
+    variant?: 'header' | 'sidebar';
+    class?: string;
 }
 
-const props = defineProps<Props>()
-const className = computed(() => props.class)
+const props = defineProps<Props>();
+const className = computed(() => props.class);
 </script>
 
 <template>
-  <SidebarInset v-if="props.variant === 'sidebar'" :class="className">
-    <slot />
-  </SidebarInset>
-  <main
-    v-else
-    class="flex h-full flex-1 flex-col gap-4 rounded-xl max-w-7xl mx-auto w-full"
-    :class="className"
-  >
-    <slot />
-  </main>
+    <SidebarInset v-if="props.variant === 'sidebar'" :class="className">
+        <slot />
+    </SidebarInset>
+    <main v-else class="mx-auto flex h-full w-full max-w-7xl flex-1 flex-col gap-4 rounded-xl" :class="className">
+        <slot />
+    </main>
 </template>

resources/js/components/AppHeader.vue

@@ -1,56 +1,42 @@
 <script setup lang="ts">
-import { Link, usePage } from '@inertiajs/vue3'
-import type { BreadcrumbItem, NavItem } from '@/types'
-import AppLogo from '@/components/AppLogo.vue'
-import AppLogoIcon from '@/components/AppLogoIcon.vue'
-import { Button } from "@/components/ui/button"
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-} from '@/components/ui/tooltip'
-import {
-    Sheet,
-    SheetContent,
-    SheetHeader,
-    SheetTrigger,
-} from '@/components/ui/sheet'
+import AppLogo from '@/components/AppLogo.vue';
+import AppLogoIcon from '@/components/AppLogoIcon.vue';
+import UserMenuContent from '@/components/UserMenuContent.vue';
+import { Button } from '@/components/ui/button';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import {
     NavigationMenu,
     NavigationMenuItem,
     NavigationMenuLink,
     NavigationMenuList,
     navigationMenuTriggerStyle,
-} from '@/components/ui/navigation-menu'
-import { BookOpenText, ChevronDown, FolderGit2, LayoutGrid, Menu, Search } from 'lucide-vue-next'
-import UserMenuContent from '@/components/UserMenuContent.vue'
-import { getInitials } from '@/composables/useInitials'
-import { computed } from 'vue'
+} from '@/components/ui/navigation-menu';
+import { Sheet, SheetContent, SheetHeader, SheetTrigger } from '@/components/ui/sheet';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { getInitials } from '@/composables/useInitials';
+import type { BreadcrumbItem, NavItem } from '@/types';
+import { Link, usePage } from '@inertiajs/vue3';
+import { BookOpenText, ChevronDown, FolderGit2, LayoutGrid, Menu, Search } from 'lucide-vue-next';
+import { computed } from 'vue';
 
 interface Props {
-    breadcrumbs?: BreadcrumbItem[]
+    breadcrumbs?: BreadcrumbItem[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    breadcrumbs: () => []
-})
+    breadcrumbs: () => [],
+});
 
-const page = usePage()
-const auth = computed(() => page.props.auth)
+const page = usePage();
+const auth = computed(() => page.props.auth);
 
 const isCurrentRoute = (url: string) => {
-    return page.url === url
-}
+    return page.url === url;
+};
 
-const activeItemStyles = computed(() => (url: string) => 
-    isCurrentRoute(url) ? 'bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100' : ''
-)
+const activeItemStyles = computed(
+    () => (url: string) => (isCurrentRoute(url) ? 'bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100' : ''),
+);
 
 const mainNavItems: NavItem[] = [
     {
@@ -77,13 +63,12 @@ const rightNavItems: NavItem[] = [
 <template>
     <div>
         <div class="border-b border-sidebar-border/80">
-            <div class="flex h-16 items-center px-4 md:max-w-7xl mx-auto">
+            <div class="mx-auto flex h-16 items-center px-4 md:max-w-7xl">
                 <!-- Mobile Menu -->
                 <div class="lg:hidden">
-                    
                     <Sheet>
                         <SheetTrigger :as-child="true">
-                            <Button variant="ghost" size="icon" class="w-9 h-9 mr-2">
+                            <Button variant="ghost" size="icon" class="mr-2 h-9 w-9">
                                 <Menu class="h-5 w-5" />
                             </Button>
                         </SheetTrigger>
@@ -93,7 +78,7 @@ const rightNavItems: NavItem[] = [
                                 <AppLogoIcon class="size-6 fill-current text-black dark:text-white" />
                             </SheetHeader>
                             <div className="flex flex-col justify-between h-full space-y-4 py-6 flex-1">
-                                <nav class="space-y-1 -mx-3">
+                                <nav class="-mx-3 space-y-1">
                                     <Link
                                         v-for="item in mainNavItems"
                                         :key="item.title"
@@ -112,7 +97,7 @@ const rightNavItems: NavItem[] = [
                                         :href="item.url"
                                         target="_blank"
                                         rel="noopener noreferrer"
-                                        class="flex items-center text-sm space-x-2 font-medium"
+                                        class="flex items-center space-x-2 text-sm font-medium"
                                     >
                                         <component v-if="item.icon" :is="item.icon" class="h-5 w-5" />
                                         <span>{{ item.title }}</span>
@@ -128,10 +113,8 @@ const rightNavItems: NavItem[] = [
                 </Link>
 
                 <!-- Desktop Menu -->
-                <div class="hidden lg:flex lg:flex-1 h-full">
-                    
-
-                    <NavigationMenu class="flex h-full items-stretch ml-10">
+                <div class="hidden h-full lg:flex lg:flex-1">
+                    <NavigationMenu class="ml-10 flex h-full items-stretch">
                         <NavigationMenuList class="flex h-full items-stretch space-x-2">
                             <NavigationMenuItem v-for="(item, index) in mainNavItems" :key="index" class="relative flex h-full items-center">
                                 <Link :href="item.url">
@@ -146,12 +129,11 @@ const rightNavItems: NavItem[] = [
                             </NavigationMenuItem>
                         </NavigationMenuList>
                     </NavigationMenu>
-
                 </div>
 
                 <div class="ml-auto flex items-center space-x-2">
                     <div class="relative flex items-center space-x-1">
-                        <Button variant="ghost" size="icon" class="w-9 h-9 cursor-pointer">
+                        <Button variant="ghost" size="icon" class="h-9 w-9 cursor-pointer">
                             <Search class="h-5 w-5" />
                         </Button>
 
@@ -178,24 +160,18 @@ const rightNavItems: NavItem[] = [
 
                     <DropdownMenu>
                         <DropdownMenuTrigger :as-child="true">
-                            <Button
-                                variant="ghost"
-                                size="icon"
-                                class="relative h-9 w-auto px-1 rounded-md"
-                            >
-                                <span><img
-                                    v-if="auth.user?.avatar"
-                                    :src="auth.user.avatar"
-                                    :alt="auth.user.name"
-                                    class="rounded-full"
-                                />
-                                <span v-else class="flex h-7 w-7 items-center justify-center rounded-md bg-primary/10 text-sm font-medium text-primary">
-                                    {{ getInitials(auth.user?.name) }}
-                                </span>
+                            <Button variant="ghost" size="icon" class="relative h-9 w-auto rounded-md px-1">
+                                <span
+                                    ><img v-if="auth.user?.avatar" :src="auth.user.avatar" :alt="auth.user.name" class="rounded-full" />
+                                    <span
+                                        v-else
+                                        class="flex h-7 w-7 items-center justify-center rounded-md bg-primary/10 text-sm font-medium text-primary"
+                                    >
+                                        {{ getInitials(auth.user?.name) }}
+                                    </span>
                                 </span>
-                                <ChevronDown class="ml-auto size-4 mr-1" />
+                                <ChevronDown class="ml-auto mr-1 size-4" />
                             </Button>
-                            
                         </DropdownMenuTrigger>
                         <DropdownMenuContent align="end" class="w-56">
                             <UserMenuContent :user="auth.user" />
@@ -204,10 +180,10 @@ const rightNavItems: NavItem[] = [
                 </div>
             </div>
         </div>
-        <div v-if="props.breadcrumbs.length > 1" class="w-full flex border-b border-sidebar-border/70">
-            <div class="flex h-12 items-center justify-start w-full px-4 md:max-w-7xl mx-auto text-neutral-500">
+        <div v-if="props.breadcrumbs.length > 1" class="flex w-full border-b border-sidebar-border/70">
+            <div class="mx-auto flex h-12 w-full items-center justify-start px-4 text-neutral-500 md:max-w-7xl">
                 <Breadcrumbs :breadcrumbs="props.breadcrumbs" />
             </div>
         </div>
     </div>
-</template>
+</template>