Skip to content

Commit

Permalink
Merge pull request #83 from justdlabs/laravel-11.x
Browse files Browse the repository at this point in the history
Laravel 11.x
  • Loading branch information
irsyadadl authored Aug 5, 2024
2 parents 9f17de9 + e79579a commit c9daffc
Show file tree
Hide file tree
Showing 17 changed files with 523 additions and 298 deletions.
8 changes: 4 additions & 4 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@


## [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)

## 1.0.1 (2024-08-04)


### Bug Fixes

* make all automate ([ac5b394](https://github.com/justdlabs/inertia.ts/commit/ac5b3945c2cb5576a908939a2b9420b9db05d411))

- make all automate ([ac5b394](https://github.com/justdlabs/inertia.ts/commit/ac5b3945c2cb5576a908939a2b9420b9db05d411))

### Chores

* Update build command in readme ([7076e29](https://github.com/justdlabs/inertia.ts/commit/7076e29aed986a524adecce8b4176df531a6485d))
- Update build command in readme ([7076e29](https://github.com/justdlabs/inertia.ts/commit/7076e29aed986a524adecce8b4176df531a6485d))
2 changes: 1 addition & 1 deletion composer.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "justd/laravel",
"version": "1.0.2",
"version": "1.0.3",
"type": "project",
"description": "The skeleton application for the Laravel framework.",
"keywords": [
Expand Down
14 changes: 7 additions & 7 deletions composer.lock

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -80,5 +80,5 @@
}
}
},
"version": "1.0.2"
"version": "1.0.3"
}
8 changes: 4 additions & 4 deletions resources/css/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
--card: 0 0% 100%;
--card-header: 240 5% 99%;

--popover: 0 0% 100%;
--popover-fg: 240 10% 3.9%;
--overlay: 0 0% 100%;
--overlay-fg: 240 10% 3.9%;

--primary: 216 98% 52%;
--primary-fg: 0 0% 100%;
Expand Down Expand Up @@ -49,8 +49,8 @@
--card: 240 10% 3.9%;
--card-header: 240 6% 6%;

--popover: 240 6% 6%;
--popover-fg: 0 0% 98%;
--overlay: 240 6% 6%;
--overlay-fg: 0 0% 98%;

--secondary: 240 3.7% 15.9%;
--secondary-fg: 0 0% 98%;
Expand Down
25 changes: 12 additions & 13 deletions resources/js/components/navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ import {
Sheet,
SheetContent,
SheetHeader,
SheetOverlay,
SheetTitle,
useMediaQuery
} from 'ui'
Expand Down Expand Up @@ -155,7 +154,9 @@ function UserMenu() {
<ThemeSwitcher />
</div>
<div>{auth.user.name}</div>
<div className="text-muted-fg font-normal text-sm">{auth.user.email}</div>
<div className="text-muted-fg font-normal text-sm whitespace-nowrap truncate pr-10">
{auth.user.email}
</div>
</MenuHeader>
</MenuSection>
<MenuItem href={route('dashboard')}>Dashboard</MenuItem>
Expand Down Expand Up @@ -196,17 +197,15 @@ function ResponsiveNavbar() {
<IconHamburger />
Menu
</Button>
<SheetOverlay>
<SheetContent>
<SheetHeader className="text-left">
<SheetTitle className="inline-flex items-center gap-x-2">
<Logo />
{import.meta.env.VITE_APP_NAME}
</SheetTitle>
</SheetHeader>
<NavContent />
</SheetContent>
</SheetOverlay>
<SheetContent>
<SheetHeader className="text-left">
<SheetTitle className="inline-flex items-center gap-x-2">
<Logo />
{import.meta.env.VITE_APP_NAME}
</SheetTitle>
</SheetHeader>
<NavContent />
</SheetContent>
</Sheet>

<Link href="/">
Expand Down
4 changes: 3 additions & 1 deletion resources/js/components/ui/card.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client'

import * as React from 'react'

import type { HeadingProps, TextProps } from 'react-aria-components'
Expand All @@ -9,7 +11,7 @@ import { Description } from './field'
const card = tv({
slots: {
root: [
'xrkr rounded-lg xkd2 [&:has(table)_.ccvgs8x]:border-t [&:has(table)_.x32]:bg-tertiary [&:has(table)]:overflow-hidden border bg-card text-fg shadow-sm [&:has(.larhy3):not(:has(.yahnba))>.ccvgs8x]:pt-6 [&:has(.larhy3)]:overflow-hidden [&_table]:overflow-hidden'
'xrkr rounded-lg xkd2 [&:has(table)_.ccvgs8x]:border-t [&:has(table)_.x32]:bg-tertiary [&:has(table)]:overflow-hidden border bg-background text-fg shadow-sm [&:has(.larhy3):not(:has(.yahnba))>.ccvgs8x]:pt-6 [&:has(.larhy3)]:overflow-hidden [&_table]:overflow-hidden'
],
header: 'flex xlw32 flex-col space-y-1.5 px-6 py-5',
title: 'text-lg klda font-semibold leading-none tracking-tight',
Expand Down
156 changes: 145 additions & 11 deletions resources/js/components/ui/dialog.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,150 @@
import { Dialog as DialogPrimitive, type DialogProps } from 'react-aria-components'
import { twMerge } from 'tailwind-merge'
import * as React from 'react'

import { IconX } from '@irsyadadl/paranoid'
import { Dialog as DialogPrimitive, type DialogProps, OverlayTriggerStateContext } from 'react-aria-components'
import { tv } from 'tailwind-variants'

import type { ButtonProps } from './button'
import { Button } from './button'
import type { HeadingProps } from './heading'
import { Heading } from './heading'
import { useMediaQuery } from './primitive'

const dialogStyles = tv({
slots: {
root: [
'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',
title: 'flex flex-1 items-center',
description: 'text-sm text-muted-fg',
body: [
'flex flex-1 flex-col gap-2 overflow-auto px-6',
'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',
closeIndicator: 'close absolute right-2 top-2 size-6 z-50'
}
})

const { root, header, title, description, body, footer, closeIndicator } = dialogStyles()

const Dialog = ({ role, className, ...props }: DialogProps) => {
return <DialogPrimitive {...props} role={role ?? 'dialog'} className={root({ className })} />
}

const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
const headerRef = React.useRef<HTMLHeadingElement>(null)

React.useEffect(() => {
const header = headerRef.current
if (!header) {
return
}

const observer = new ResizeObserver((entries) => {
for (const entry of entries) {
header.parentElement?.style.setProperty('--dialog-header-height', `${entry.target.clientHeight}px`)
}
})

observer.observe(header)
return () => {
observer.unobserve(header)
}
}, [])

const Dialog = ({ className, ...props }: DialogProps) => {
return (
<DialogPrimitive
{...props}
className={twMerge(
'relative max-h-[inherit] overflow-y-auto p-4 focus:outline-none outline-0 [[data-placement]>&]:p-4 dlc',
className
)}
/>
<div data-slot="dialog-header" ref={headerRef} className={header({ className })}>
{typeof props.children === 'string' ? <DialogTitle {...props} /> : props.children}
</div>
)
}

export { Dialog }
interface DialogTitleProps extends HeadingProps {
className?: string
}

const DialogTitle = ({ tracking = 'tight', level = 2, className, ...props }: DialogTitleProps) => (
<Heading slot="title" tracking={tracking} level={level} className={title({ className })} {...props} />
)

const DialogDescription = ({ className, ...props }: HeadingProps) => (
<p className={description({ className })} {...props} />
)

const DialogBody = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div data-slot="dialog-body" className={body({ className })} {...props} />
)

const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
const footerRef = React.useRef<HTMLDivElement>(null)

React.useEffect(() => {
const footer = footerRef.current

if (!footer) {
return
}

const observer = new ResizeObserver((entries) => {
for (const entry of entries) {
footer.parentElement?.style.setProperty('--dialog-footer-height', `${entry.target.clientHeight}px`)
}
})

observer.observe(footer)
return () => {
observer.unobserve(footer)
}
}, [])
return <div ref={footerRef} data-slot="dialog-footer" className={footer({ className })} {...props} />
}

const DialogClose = ({ className, ...props }: ButtonProps) => {
const state = React.useContext(OverlayTriggerStateContext)!
return <Button className={className} appearance="outline" onPress={() => state.close()} {...props} />
}

interface CloseButtonIndicatorProps {
className?: string
close: () => void
isDismissable?: boolean | undefined
}

const DialogCloseIndicator = ({ className, ...props }: CloseButtonIndicatorProps) => {
const isMobile = useMediaQuery('(max-width: 600px)')
const buttonRef = React.useRef<HTMLButtonElement>(null)

React.useEffect(() => {
if (isMobile && buttonRef.current) {
buttonRef.current.focus()
}
}, [isMobile])
return props.isDismissable ? (
<Button
ref={buttonRef}
{...(isMobile ? { autoFocus: true } : {})}
appearance="plain"
size="square-petite"
aria-label="Close"
onPress={props.close}
className={closeIndicator({ className })}
>
<IconX className="size-4" />
</Button>
) : null
}

export {
Dialog,
DialogBody,
DialogClose,
DialogCloseIndicator,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
type DialogTitleProps
}
45 changes: 45 additions & 0 deletions resources/js/components/ui/heading.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { isIOS } from '@react-aria/utils'
import { Heading as HeadingPrimitive, type HeadingProps as HeadingPrimitiveProps } from 'react-aria-components'
import { tv } from 'tailwind-variants'

const headingStyles = tv({
base: 'font-sans tracking-tight text-fg',
variants: {
level: {
1: 'font-bold text-lg',
2: 'font-semibold text-lg sm:text-lg/5',
3: 'font-semibold text-base/6 sm:text-base/6',
4: 'font-medium text-base/6 sm:text-sm/6'
},
tracking: {
tighter: 'tracking-tighter',
tight: 'tracking-tight',
normal: 'tracking-normal',
wide: 'tracking-wide',
wider: 'tracking-wider',
widest: 'tracking-widest'
}
}
})

interface HeadingProps extends HeadingPrimitiveProps {
level?: 1 | 2 | 3 | 4
tracking?: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest'
className?: string
}

const Heading = ({ className, tracking = 'normal', level = 1, ...props }: HeadingProps) => {
return (
<HeadingPrimitive
level={level}
className={headingStyles({
level,
tracking,
className: isIOS() ? 'font-medium' : className
})}
{...props}
/>
)
}

export { Heading, type HeadingProps }
4 changes: 2 additions & 2 deletions resources/js/components/ui/menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const MenuContent = <T extends object>({
<Popover
offset={currentOffset}
className={cn(
'z-50 min-w-40 rounded-xl border bg-popover text-popover-fg outline-none entering:animate-in exiting:animate-out entering:fade-in-0 exiting:fade-out-0 exiting:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2',
'z-50 min-w-40 rounded-xl border bg-overlay text-overlay-fg outline-none entering:animate-in exiting:animate-out entering:fade-in-0 exiting:fade-out-0 exiting:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2',
popoverClassName
)}
{...props}
Expand All @@ -78,7 +78,7 @@ const MenuContent = <T extends object>({
width={12}
height={12}
viewBox="0 0 12 12"
className="block fill-popover stroke-border group-placement-left:-rotate-90 group-placement-right:rotate-90 group-placement-bottom:rotate-180 forced-colors:fill-[Canvas] forced-colors:stroke-[ButtonBorder]"
className="block fill-overlay stroke-border group-placement-left:-rotate-90 group-placement-right:rotate-90 group-placement-bottom:rotate-180 forced-colors:fill-[Canvas] forced-colors:stroke-[ButtonBorder]"
>
<path d="M0 0 L6 6 L12 0" />
</svg>
Expand Down
Loading

0 comments on commit c9daffc

Please sign in to comment.