Merge pull request #84 from justdlabs/laravel-11.x

Laravel 11.x

CHANGELOG.md

@@ -1,5 +1,9 @@
 
 
+## [1.0.5](https://github.com/justdlabs/inertia.ts/compare/1.0.4...1.0.5) (2024-08-07)
+
+## [1.0.4](https://github.com/justdlabs/inertia.ts/compare/1.0.3...1.0.4) (2024-08-06)
+
 ## [1.0.3](https://github.com/justdlabs/inertia.ts/compare/1.0.2...1.0.3) (2024-08-05)
 
 ## [1.0.2](https://github.com/justdlabs/inertia.ts/compare/1.0.1...1.0.2) (2024-08-04)

composer.json

@@ -1,6 +1,6 @@
 {
     "name": "justd/laravel",
-    "version": "1.0.3",
+    "version": "1.0.5",
     "type": "project",
     "description": "The skeleton application for the Laravel framework.",
     "keywords": [

package.json

@@ -2,7 +2,6 @@
     "private": true,
     "type": "module",
     "scripts": {
-        "prepare": "husky install",
         "dev": "vite",
         "build": "tsc && vite build && vite build --ssr",
         "format": "prettier --write .",
@@ -23,7 +22,7 @@
         "axios": "^1.7.3",
         "husky": "^9.1.4",
         "laravel-vite-plugin": "^1.0.5",
-        "postcss": "^8.4.40",
+        "postcss": "^8.4.41",
         "prettier": "^3.3.3",
         "prettier-plugin-organize-imports": "^4.0.0",
         "prettier-plugin-tailwindcss": "^0.6.5",
@@ -80,5 +79,5 @@
             }
         }
     },
-    "version": "1.0.3"
+    "version": "1.0.5"
 }

resources/js/components/navbar.tsx

@@ -1,6 +1,13 @@
 import { PagePropsData } from '@/types'
 import { usePage } from '@inertiajs/react'
-import { IconBrandJustd, IconBrandLaravel, IconChevronDown, IconHamburger, IconSettings } from '@irsyadadl/paranoid'
+import {
+    IconBrandJustd,
+    IconBrandLaravel,
+    IconChevronDown,
+    IconColorSwatch,
+    IconHamburger,
+    IconSettings
+} from '@irsyadadl/paranoid'
 import { Container } from 'components/container'
 import { Logo } from 'components/logo'
 import { ThemeSwitcher } from 'components/theme-switcher'
@@ -147,7 +154,7 @@ function UserMenu() {
             <MenuTrigger aria-label="Open menu">
                 <Avatar status="online" size="medium" src={auth.user.gravatar} className="size-8" />
             </MenuTrigger>
-            <MenuContent showArrow placement="bottom end" className="w-60">
+            <MenuContent showArrow placement="bottom end" className="min-w-56">
                 <MenuSection>
                     <MenuHeader separator className="relative">
                         <div className="absolute right-2 top-2">
@@ -175,7 +182,7 @@ function UserMenu() {
                 </MenuItem>
                 <MenuItem target="_blank" href="https://justd.co/colors" className="justify-between">
                     Colors
-                    <IconBrandJustd />
+                    <IconColorSwatch />
                 </MenuItem>
                 <MenuSeparator />
                 <MenuItem routerOptions={{ method: 'post' }} href={route('logout')}>

resources/js/components/ui/card.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import * as React from 'react'
 
 import type { HeadingProps, TextProps } from 'react-aria-components'

resources/js/components/ui/dialog.tsx

@@ -16,11 +16,11 @@ const dialogStyles = tv({
             'dlc peer relative flex max-h-[inherit] [&::-webkit-scrollbar]:size-0.5 [scrollbar-width:thin] flex-col overflow-hidden outline-none peer',
             '[&:not(:has([data-slot=dialog-body]))]:px-6 [&:has([data-slot=dialog-body])_[data-slot=dialog-header]]:px-6 [&:has([data-slot=dialog-body])_[data-slot=dialog-footer]]:px-6'
         ],
-        header: 'relative flex flex-col pb-2.5 gap-y-0.5 pt-6',
+        header: 'relative flex flex-col pb-2 pt-6',
         title: 'flex flex-1 items-center',
-        description: 'text-sm text-muted-fg',
+        description: 'text-sm text-muted-fg mt-1',
         body: [
-            'flex flex-1 flex-col gap-2 overflow-auto px-6',
+            'flex flex-1 flex-col gap-2 overflow-auto px-6 py-1',
             'max-h-[calc(var(--visual-viewport-height)-var(--visual-viewport-vertical-padding)-var(--dialog-header-height,0px)-var(--dialog-footer-height,0px))]'
         ],
         footer: 'mt-auto flex flex-col-reverse justify-between gap-3 pb-6 pt-4 sm:flex-row',
@@ -34,7 +34,12 @@ const Dialog = ({ role, className, ...props }: DialogProps) => {
     return <DialogPrimitive {...props} role={role ?? 'dialog'} className={root({ className })} />
 }
 
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    title?: string
+    description?: string
+}
+
+const DialogHeader = ({ className, ...props }: DialogHeaderProps) => {
     const headerRef = React.useRef<HTMLHeadingElement>(null)
 
     React.useEffect(() => {
@@ -57,7 +62,9 @@ const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivEleme
 
     return (
         <div data-slot="dialog-header" ref={headerRef} className={header({ className })}>
-            {typeof props.children === 'string' ? <DialogTitle {...props} /> : props.children}
+            {props.title && <DialogTitle>{props.title}</DialogTitle>}
+            {props.description && <DialogDescription>{props.description}</DialogDescription>}
+            {!props.title && typeof props.children === 'string' ? <DialogTitle {...props} /> : props.children}
         </div>
     )
 }

resources/js/components/ui/keyboard.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react'
+
+import { Keyboard as KeyboardPrimitive } from 'react-aria-components'
+import { tv } from 'tailwind-variants'
+
+const keyboardStyles = tv({
+    slots: {
+        base: '-mr-1 ml-auto hidden items-center gap-[0.25rem] px-1 lg:inline-flex',
+        kbd: [
+            'text-center font-sans capitalize text-muted-fg group-focus:text-fg forced-colors:group-focus:text-[HighlightText]',
+            'inline-grid min-h-5 min-w-5 place-content-center rounded bg-background font-sans text-[.75rem] uppercase text-fg ring-1 ring-fg/10 group-focus:opacity-60'
+        ]
+    }
+})
+
+const { base, kbd } = keyboardStyles()
+
+interface KeyboardProps extends React.HTMLAttributes<HTMLElement> {
+    keys: string | string[]
+    classNames?: {
+        base?: string
+        kbd?: string
+    }
+}
+
+const Keyboard = ({ keys, classNames, className, ...props }: KeyboardProps) => {
+    return (
+        <KeyboardPrimitive className={base({ className: classNames?.base ?? className })} {...props}>
+            {(Array.isArray(keys) ? keys : keys.split('')).map((char, index) => (
+                <kbd
+                    key={index}
+                    className={kbd({ className: index > 0 && char.length > 1 ? 'pl-1' : classNames?.kbd })}
+                >
+                    {char}
+                </kbd>
+            ))}
+        </KeyboardPrimitive>
+    )
+}
+
+export { Keyboard, type KeyboardProps }