diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index 74c039c..0000000 --- a/.prettierignore +++ /dev/null @@ -1,6 +0,0 @@ -**/vendor -**/public -**/bootstrap -**/.git -**/.svn -**/.hg diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index 0e60db7..0000000 --- a/.prettierrc +++ /dev/null @@ -1,12 +0,0 @@ -{ - "tailwindFunctions": ["clsx", "tw", "tv", "cn", "twMerge", "tm", "cx"], - "plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-organize-imports"], - "printWidth": 120, - "singleQuote": true, - "trailingComma": "none", - "tabWidth": 2, - "semi": true, - "useTabs": false, - "bracketSpacing": true, - "bracketSameLine": false -} diff --git a/README.md b/README.md index 2cf439e..1ed5295 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -### TL;DR +### TL;DR ```bash composer create-project justd/laravel your-project-name diff --git a/biome.json b/biome.json new file mode 100644 index 0000000..0f7859d --- /dev/null +++ b/biome.json @@ -0,0 +1,80 @@ +{ + "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json", + "organizeImports": { + "enabled": true + }, + "vcs": { + "enabled": false, + "clientKind": "git", + "useIgnoreFile": false + }, + "files": { + "ignoreUnknown": false, + "ignore": ["vendor", "node_modules", "resources/js/ziggy.js"] + }, + "linter": { + "enabled": true, + "rules": { + "recommended": true, + "style": { + "noNonNullAssertion": "off", + "noParameterAssign": "warn", + "useImportType": "error" + }, + "complexity": { + "useArrowFunction": "error" + }, + "a11y": { + "noSvgWithoutTitle": "off", + "useValidAnchor": "off", + "useSemanticElements": "off" + }, + "correctness": { + "useHookAtTopLevel": "error", + "noUnusedImports": "error", + "useExhaustiveDependencies": "off", + "noChildrenProp": "off" + }, + "suspicious": { + "noExplicitAny": "off", + "noArrayIndexKey": "off", + "noConsoleLog": "warn" + }, + "nursery": { + "useSortedClasses": { + "level": "error", + "fix": "safe", + "options": { + "attributes": ["classList"], + "functions": ["cn", "twJoin", "tv", "composeRenderProps", "composeTailwindRenderProps"] + } + } + } + }, + "ignore": [] + }, + "formatter": { + "enabled": true, + "indentStyle": "space", + "indentWidth": 2, + "lineWidth": 100, + "ignore": [] + }, + "javascript": { + "formatter": { + "quoteStyle": "double", + "arrowParentheses": "always", + "bracketSameLine": false, + "bracketSpacing": true, + "jsxQuoteStyle": "double", + "quoteProperties": "asNeeded", + "semicolons": "asNeeded", + "trailingCommas": "all" + } + }, + "json": { + "formatter": { + "trailingCommas": "none" + } + } +} diff --git a/bun.lockb b/bun.lockb index e8d3fca..764e7d0 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 2e0e69e..b1eb45d 100644 --- a/package.json +++ b/package.json @@ -4,11 +4,12 @@ "scripts": { "dev": "vite", "build": "tsc && vite build && vite build --ssr", - "format": "prettier --write .", + "format": "biome format --write resources/js && biome lint --fix resources/js", "release": "export GITHUB_TOKEN=$(cat .github_token) && release-it", "preview": "tsc && npm run build && php artisan inertia:start-ssr" }, "devDependencies": { + "@biomejs/biome": "^1.9.4", "@commitlint/cli": "^19.7.1", "@commitlint/config-conventional": "^19.7.1", "@inertiajs/react": "^2.0.3", @@ -21,20 +22,17 @@ "axios": "^1.7.9", "husky": "^9.1.7", "laravel-vite-plugin": "^1.2.0", - "prettier": "^3.4.2", - "prettier-plugin-organize-imports": "^4.1.0", - "prettier-plugin-tailwindcss": "^0.6.11", "release-it": "^17.11.0", - "tailwindcss": "^4.0.4", + "tailwindcss": "^4.0.6", "typescript": "^5.7.3", "vite-plugin-watch": "^0.3.1" }, "dependencies": { - "@tailwindcss/vite": "^4.0.4", - "@types/node": "^22.13.1", + "@tailwindcss/vite": "^4.0.6", + "@types/node": "^22.13.4", "clsx": "^2.1.1", - "justd-icons": "^1.10.24", - "motion": "^12.4.0", + "justd-icons": "^1.10.25", + "motion": "^12.4.2", "react": "^19.0.0", "react-aria-components": "^1.6.0", "react-dom": "^19.0.0", diff --git a/resources/css/app.css b/resources/css/app.css index 970fb0e..1af5ab8 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -4,8 +4,9 @@ @variant dark (&:is(.dark *)); @theme { - --font-sans: 'Figtree', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', - 'Segoe UI Symbol', 'Noto Color Emoji'; + --font-sans: + 'Figtree', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; --color-border: var(--border); --color-input: var(--input); diff --git a/resources/js/app.tsx b/resources/js/app.tsx index 9ee4d5c..b0960a4 100644 --- a/resources/js/app.tsx +++ b/resources/js/app.tsx @@ -1,32 +1,33 @@ -import '../css/app.css'; -import './bootstrap'; +import "../css/app.css" +import "./bootstrap" -import { Providers } from '@/components/providers'; -import { Ziggy } from '@/ziggy'; -import { createInertiaApp } from '@inertiajs/react'; -import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'; -import { createRoot, hydrateRoot } from 'react-dom/client'; -import { useRoute } from 'ziggy-js'; +import { Providers } from "@/components/providers" +import { Ziggy } from "@/ziggy" +import { createInertiaApp } from "@inertiajs/react" +import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers" +import { createRoot, hydrateRoot } from "react-dom/client" +import { useRoute } from "ziggy-js" -const appName = import.meta.env.VITE_APP_NAME || 'Laravel'; +const appName = import.meta.env.VITE_APP_NAME || "Laravel" createInertiaApp({ - title: (title) => (title ? title + ' / ' + appName : appName), - resolve: (name) => resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')), + title: (title) => (title ? `${title} / ${appName}` : appName), + resolve: (name) => + resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob("./pages/**/*.tsx")), setup({ el, App, props }) { // @ts-expect-error - window.route = useRoute(Ziggy as any); + window.route = useRoute(Ziggy as any) const appElement = ( - ); + ) if (import.meta.env.SSR) { - hydrateRoot(el, appElement); - return; + hydrateRoot(el, appElement) + return } - createRoot(el).render(appElement); + createRoot(el).render(appElement) }, - progress: false -}); + progress: false, +}) diff --git a/resources/js/bootstrap.ts b/resources/js/bootstrap.ts index d66f224..0b333ed 100644 --- a/resources/js/bootstrap.ts +++ b/resources/js/bootstrap.ts @@ -1,5 +1,5 @@ -import axios from 'axios'; +import axios from "axios" -window.axios = axios; +window.axios = axios -window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; +window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest" diff --git a/resources/js/components/flash-message.tsx b/resources/js/components/flash-message.tsx index cc9c0f3..7ca9041 100644 --- a/resources/js/components/flash-message.tsx +++ b/resources/js/components/flash-message.tsx @@ -1,15 +1,15 @@ -import { FlashMessageData } from '@/types/index'; -import { usePage } from '@inertiajs/react'; -import { useEffect } from 'react'; -import { toast } from 'sonner'; -import { Toast } from 'ui'; +import type { FlashMessageData } from "@/types" +import { usePage } from "@inertiajs/react" +import { useEffect } from "react" +import { toast } from "sonner" +import { Toast } from "ui" export function FlashMessage() { - const { flash_message } = usePage<{ flash_message: FlashMessageData }>().props; + const { flash_message } = usePage<{ flash_message: FlashMessageData }>().props useEffect(() => { - if (flash_message && flash_message.message) { - (toast as any)[flash_message.type](flash_message.message); + if (flash_message?.message) { + ;(toast as any)[flash_message.type](flash_message.message) } - }, [flash_message]); - return ; + }, [flash_message]) + return } diff --git a/resources/js/components/footer.tsx b/resources/js/components/footer.tsx index 4dee121..0c6e5f4 100644 --- a/resources/js/components/footer.tsx +++ b/resources/js/components/footer.tsx @@ -1,35 +1,35 @@ -import { ThemeSwitcher } from '@/components/theme-switcher'; -import { SVGProps } from 'react'; -import { Button, Link, TextField } from 'ui'; +import { ThemeSwitcher } from "@/components/theme-switcher" +import type { SVGProps } from "react" +import { Button, Link, TextField } from "ui" const navigation = { solutions: [ - { name: 'Marketing', href: '#' }, - { name: 'Analytics', href: '#' }, - { name: 'Commerce', href: '#' }, - { name: 'Insights', href: '#' } + { name: "Marketing", href: "#" }, + { name: "Analytics", href: "#" }, + { name: "Commerce", href: "#" }, + { name: "Insights", href: "#" }, ], support: [ - { name: 'Pricing', href: '#' }, - { name: 'Documentation', href: '#' }, - { name: 'Guides', href: '#' }, - { name: 'API Status', href: '#' } + { name: "Pricing", href: "#" }, + { name: "Documentation", href: "#" }, + { name: "Guides", href: "#" }, + { name: "API Status", href: "#" }, ], company: [ - { name: 'About', href: '/about' }, - { name: 'Blog', href: '#' }, - { name: 'Jobs', href: '#' }, - { name: 'Press', href: '#' }, - { name: 'Partners', href: '#' } + { name: "About", href: "/about" }, + { name: "Blog", href: "#" }, + { name: "Jobs", href: "#" }, + { name: "Press", href: "#" }, + { name: "Partners", href: "#" }, ], legal: [ - { name: 'Privacy', href: '/privacy-policy' }, - { name: 'Terms', href: '/terms-of-service' } + { name: "Privacy", href: "/privacy-policy" }, + { name: "Terms", href: "/terms-of-service" }, ], social: [ { - name: 'Facebook', - href: '#', + name: "Facebook", + href: "#", icon: (props: SVGProps) => ( - ) + ), }, { - name: 'Instagram', - href: '#', + name: "Instagram", + href: "#", icon: (props: SVGProps) => ( - ) + ), }, { - name: 'Twitter', - href: '#', + name: "Twitter", + href: "#", icon: (props: SVGProps) => ( - ) + ), }, { - name: 'GitHub', - href: '#', + name: "GitHub", + href: "#", icon: (props: SVGProps) => ( - ) + ), }, { - name: 'YouTube', - href: '#', + name: "YouTube", + href: "#", icon: (props: SVGProps) => ( - ) - } - ] -}; + ), + }, + ], +} export function Footer() { return ( @@ -97,16 +97,19 @@ export function Footer() { -
+
-

Solutions

-
    +

    Solutions

    +
      {navigation.solutions.map((item) => (
    • - + {item.name}
      • @@ -114,11 +117,14 @@ export function Footer() {
-

Support

-
    +

    Support

    +
      {navigation.support.map((item) => (
    • - + {item.name}
      • @@ -128,11 +134,14 @@ export function Footer() {
-

Company

-
    +

    Company

    +
      {navigation.company.map((item) => (
    • - + {item.name}
      • @@ -140,11 +149,14 @@ export function Footer() {
-

Legal

-
    +

    Legal

    +
      {navigation.legal.map((item) => (
    • - + {item.name}
      • @@ -154,9 +166,11 @@ export function Footer() {
-
-

Subscribe to our newsletter

-

+

+

+ Subscribe to our newsletter +

+

The latest news, articles, and resources, sent to your inbox weekly.

@@ -170,7 +184,7 @@ export function Footer() { isRequired placeholder="Enter your email" /> -
+
@@ -178,7 +192,7 @@ export function Footer() {
-
+
{navigation.social.map((item) => ( ))}
-

- © 2020 Inertia.ts by{' '} - +

+ © 2020 Inertia.ts by{" "} + irsyadadl , Inc. All rights reserved. @@ -201,5 +219,5 @@ export function Footer() {

- ); + ) } diff --git a/resources/js/components/header.tsx b/resources/js/components/header.tsx index 4838301..1725095 100644 --- a/resources/js/components/header.tsx +++ b/resources/js/components/header.tsx @@ -1,16 +1,16 @@ -import { cn } from '@/utils/classes'; -import * as React from 'react'; -import { Container } from 'ui'; +import { cn } from "@/utils/classes" +import * as React from "react" +import { Container } from "ui" const Header = React.forwardRef>( ({ className, ...props }, ref) => ( -
+
-

{props.title}

+

{props.title}
- ) -); -Header.displayName = 'Header'; + ), +) +Header.displayName = "Header" -export { Header }; +export { Header } diff --git a/resources/js/components/input-error.tsx b/resources/js/components/input-error.tsx index 30234b1..cd31c69 100644 --- a/resources/js/components/input-error.tsx +++ b/resources/js/components/input-error.tsx @@ -1,15 +1,15 @@ -import { cn } from '@/utils/classes'; -import { HTMLAttributes } from 'react'; -import { Description } from 'ui'; +import { cn } from "@/utils/classes" +import type { HTMLAttributes } from "react" +import { Description } from "ui" export function InputError({ message, - className = '', + className = "", ...props }: HTMLAttributes & { message?: string }) { return message ? ( - + {message} - ) : null; + ) : null } diff --git a/resources/js/components/logo.tsx b/resources/js/components/logo.tsx index 9fb9ffd..cb75b2b 100644 --- a/resources/js/components/logo.tsx +++ b/resources/js/components/logo.tsx @@ -1,7 +1,7 @@ -import { cn } from '@/utils/classes'; -import { IconBrandLaravel } from 'justd-icons'; -import React from 'react'; +import { cn } from "@/utils/classes" +import { IconBrandLaravel } from "justd-icons" +import type React from "react" export function Logo({ className, ...props }: React.SVGProps) { - return ; + return } diff --git a/resources/js/components/providers.tsx b/resources/js/components/providers.tsx index dc5b4be..cb825f4 100644 --- a/resources/js/components/providers.tsx +++ b/resources/js/components/providers.tsx @@ -1,12 +1,12 @@ -import { ThemeProvider } from '@/components/theme-provider'; -import { router } from '@inertiajs/react'; -import React from 'react'; -import { RouterProvider } from 'react-aria-components'; +import { ThemeProvider } from "@/components/theme-provider" +import { router } from "@inertiajs/react" +import type React from "react" +import { RouterProvider } from "react-aria-components" export function Providers({ children }: { children: React.ReactNode }) { return ( router.visit(to, options as any)}> {children} - ); + ) } diff --git a/resources/js/components/theme-provider.tsx b/resources/js/components/theme-provider.tsx index 11c078e..0c84eb2 100644 --- a/resources/js/components/theme-provider.tsx +++ b/resources/js/components/theme-provider.tsx @@ -1,71 +1,75 @@ -import * as React from 'react'; +import * as React from "react" -type Theme = 'dark' | 'light' | 'system'; +type Theme = "dark" | "light" | "system" type ThemeProviderProps = { - children: React.ReactNode; - defaultTheme?: Theme; - storageKey?: string; -}; + children: React.ReactNode + defaultTheme?: Theme + storageKey?: string +} type ThemeProviderState = { - theme: Theme; - setTheme: (theme: Theme) => void; -}; + theme: Theme + setTheme: (theme: Theme) => void +} const initialState: ThemeProviderState = { - theme: 'system', - setTheme: () => null -}; + theme: "system", + setTheme: () => null, +} -const ThemeProviderContext = React.createContext(initialState); +const ThemeProviderContext = React.createContext(initialState) export function ThemeProvider({ children, - defaultTheme = 'system', - storageKey = 'vite-ui-theme', + defaultTheme = "system", + storageKey = "vite-ui-theme", ...props }: ThemeProviderProps) { - const [theme, setTheme] = React.useState(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme); + const [theme, setTheme] = React.useState( + () => (localStorage.getItem(storageKey) as Theme) || defaultTheme, + ) React.useEffect(() => { - const root = window.document.documentElement; + const root = window.document.documentElement - root.classList.remove('light', 'dark'); + root.classList.remove("light", "dark") - if (theme === 'system') { - const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + if (theme === "system") { + const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches + ? "dark" + : "light" - root.classList.add(systemTheme); - return; + root.classList.add(systemTheme) + return } - if (theme === 'light' || theme === 'dark') { - root.classList.add(theme); + if (theme === "light" || theme === "dark") { + root.classList.add(theme) } - }, [theme]); + }, [theme]) const value = { theme, setTheme: (newTheme: Theme) => { - if (newTheme === 'light' || newTheme === 'dark' || newTheme === 'system') { - localStorage.setItem(storageKey, newTheme); - setTheme(newTheme); + if (newTheme === "light" || newTheme === "dark" || newTheme === "system") { + localStorage.setItem(storageKey, newTheme) + setTheme(newTheme) } - } - }; + }, + } return ( {children} - ); + ) } export const useTheme = () => { - const context = React.useContext(ThemeProviderContext); + const context = React.useContext(ThemeProviderContext) - if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider'); + if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider") - return context; -}; + return context +} diff --git a/resources/js/components/theme-switcher.tsx b/resources/js/components/theme-switcher.tsx index 1e4034f..b367f04 100644 --- a/resources/js/components/theme-switcher.tsx +++ b/resources/js/components/theme-switcher.tsx @@ -1,31 +1,31 @@ -import { useTheme } from '@/components/theme-provider'; -import { IconDeviceDesktop2, IconMoon, IconSun } from 'justd-icons'; -import { Button, composeTailwindRenderProps } from 'ui'; +import { useTheme } from "@/components/theme-provider" +import { IconDeviceDesktop2, IconMoon, IconSun } from "justd-icons" +import { Button, composeTailwindRenderProps } from "ui" export function ThemeSwitcher({ - shape = 'square', - appearance = 'plain', + shape = "square", + appearance = "plain", className, ...props }: React.ComponentProps) { - const { theme, setTheme } = useTheme(); + const { theme, setTheme } = useTheme() const toggleTheme = () => { - const nextTheme = theme === 'light' ? 'dark' : theme === 'dark' ? 'system' : 'light'; - setTheme(nextTheme); - }; + const nextTheme = theme === "light" ? "dark" : theme === "dark" ? "system" : "light" + setTheme(nextTheme) + } return ( - ); + ) } diff --git a/resources/js/components/ui/avatar.tsx b/resources/js/components/ui/avatar.tsx index 3d0eda8..d1116a7 100644 --- a/resources/js/components/ui/avatar.tsx +++ b/resources/js/components/ui/avatar.tsx @@ -1,59 +1,66 @@ -import { tv, type VariantProps } from 'tailwind-variants'; +import { type VariantProps, tv } from "tailwind-variants" const avatar = tv({ base: [ - 'inline-grid shrink-0 align-middle [--avatar-radius:20%] [--ring-opacity:20%] *:col-start-1 *:row-start-1', - '-outline-offset-1 outline-1 outline-fg/(--ring-opacity)' + "inline-grid shrink-0 align-middle [--avatar-radius:20%] [--ring-opacity:20%] *:col-start-1 *:row-start-1", + "-outline-offset-1 outline-1 outline-fg/(--ring-opacity)", ], variants: { shape: { - square: 'rounded-(--avatar-radius) *:rounded-(--avatar-radius)', - circle: 'rounded-full *:rounded-full' + square: "rounded-(--avatar-radius) *:rounded-(--avatar-radius)", + circle: "rounded-full *:rounded-full", }, size: { - 'extra-small': 'size-5 *:size-5', - small: 'size-6 *:size-6', - medium: 'size-8 *:size-8', - large: 'size-10 *:size-10', - 'extra-large': 'size-12 *:size-12' - } - } -}); + "extra-small": "size-5 *:size-5", + small: "size-6 *:size-6", + medium: "size-8 *:size-8", + large: "size-10 *:size-10", + "extra-large": "size-12 *:size-12", + }, + }, +}) interface AvatarProps extends VariantProps { - src?: string | null; - initials?: string; - alt?: string; - className?: string; + src?: string | null + initials?: string + alt?: string + className?: string } const Avatar = ({ src = null, - shape = 'circle', - size = 'medium', + shape = "circle", + size = "medium", initials, - alt = '', + alt = "", className, ...props -}: AvatarProps & React.ComponentPropsWithoutRef<'span'>) => { +}: AvatarProps & React.ComponentPropsWithoutRef<"span">) => { return ( {initials && ( {alt && {alt}} - + {initials} )} {src && {alt}} - ); -}; + ) +} -export { Avatar }; -export type { AvatarProps }; +export { Avatar } +export type { AvatarProps } diff --git a/resources/js/components/ui/button.tsx b/resources/js/components/ui/button.tsx index 3071c13..093ff3f 100644 --- a/resources/js/components/ui/button.tsx +++ b/resources/js/components/ui/button.tsx @@ -1,91 +1,93 @@ import { Button as ButtonPrimitive, type ButtonProps as ButtonPrimitiveProps, - composeRenderProps -} from 'react-aria-components'; -import { tv } from 'tailwind-variants'; + composeRenderProps, +} from "react-aria-components" +import { tv } from "tailwind-variants" -import { focusButtonStyles } from './primitive'; +import { focusButtonStyles } from "./primitive" const buttonStyles = tv({ extend: focusButtonStyles, base: [ - 'kbt32x relative inline-flex items-center justify-center gap-x-2 border font-medium', - 'forced-colors:[--btn-icon:ButtonText] forced-colors:data-hovered:[--btn-icon:ButtonText]', - '*:data-[slot=icon]:-mx-0.5 data-hovered:*:data-[slot=icon]:text-current/90 data-pressed:*:data-[slot=icon]:text-current *:data-[slot=icon]:my-1 *:data-[slot=icon]:size-4 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:text-current/60 *:data-[slot=icon]:transition', - '*:data-[slot=avatar]:-mx-0.5 *:data-[slot=avatar]:my-1 *:data-[slot=avatar]:*:size-4 *:data-[slot=avatar]:size-4 *:data-[slot=avatar]:shrink-0' + "kbt32x relative inline-flex items-center justify-center gap-x-2 border font-medium", + "forced-colors:[--btn-icon:ButtonText] forced-colors:data-hovered:[--btn-icon:ButtonText]", + "*:data-[slot=icon]:-mx-0.5 data-hovered:*:data-[slot=icon]:text-current/90 data-pressed:*:data-[slot=icon]:text-current *:data-[slot=icon]:my-1 *:data-[slot=icon]:size-4 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:text-current/60 *:data-[slot=icon]:transition", + "*:data-[slot=avatar]:-mx-0.5 *:data-[slot=avatar]:my-1 *:data-[slot=avatar]:*:size-4 *:data-[slot=avatar]:size-4 *:data-[slot=avatar]:shrink-0", ], variants: { intent: { primary: [ - 'outline-primary [--btn-bg:theme(--color-primary/95%)] [--btn-border:var(--color-primary)] [--btn-fg:var(--color-primary-fg)] dark:[--btn-bg:theme(--color-primary/90%)]', - '[--btn-bg-hovered:theme(--color-primary/87%)] [--btn-border-hovered:theme(--color-primary/87%)] dark:[--btn-bg-hovered:theme(--color-primary)] dark:[--btn-border-hovered:theme(--color-primary)]', - 'inset-shadow-primary-fg/20 data-hovered:inset-shadow-primary-fg/25 data-pressed:inset-shadow-primary-fg/20' + "outline-primary [--btn-bg:theme(--color-primary/95%)] [--btn-border:var(--color-primary)] [--btn-fg:var(--color-primary-fg)] dark:[--btn-bg:theme(--color-primary/90%)]", + "[--btn-bg-hovered:theme(--color-primary/87%)] [--btn-border-hovered:theme(--color-primary/87%)] dark:[--btn-bg-hovered:theme(--color-primary)] dark:[--btn-border-hovered:theme(--color-primary)]", + "inset-shadow-primary-fg/20 data-hovered:inset-shadow-primary-fg/25 data-pressed:inset-shadow-primary-fg/20", ], secondary: [ - '[--btn-bg:theme(--color-secondary/95%)] [--btn-border:theme(--color-secondary-fg/10%)] [--btn-fg:var(--color-secondary-fg)] dark:[--btn-bg:theme(--color-secondary/85%)] dark:[--btn-border:theme(--color-secondary-fg/7%)]', - '[--btn-bg-hovered:color-mix(in_oklab,var(--color-secondary)_60%,white_20%)] dark:[--btn-bg-hovered:color-mix(in_oklab,var(--color-secondary)_96%,white_4%)]', - 'inset-shadow-white/15 data-hovered:inset-shadow-white/20 data-pressed:inset-shadow-white/15' + "[--btn-bg:theme(--color-secondary/95%)] [--btn-border:theme(--color-secondary-fg/10%)] [--btn-fg:var(--color-secondary-fg)] dark:[--btn-bg:theme(--color-secondary/85%)] dark:[--btn-border:theme(--color-secondary-fg/7%)]", + "[--btn-bg-hovered:color-mix(in_oklab,var(--color-secondary)_60%,white_20%)] dark:[--btn-bg-hovered:color-mix(in_oklab,var(--color-secondary)_96%,white_4%)]", + "inset-shadow-white/15 data-hovered:inset-shadow-white/20 data-pressed:inset-shadow-white/15", ], warning: [ - '[--btn-warning:theme(--color-warning/97%)]', - '[--btn-warning-hovered:color-mix(in_oklab,var(--color-warning)_85%,white_15%)]', - 'dark:[--btn-warning-hovered:color-mix(in_oklab,var(--color-warning)_90%,white_10%)]', - 'outline-warning [--btn-bg:var(--btn-warning)] [--btn-border:var(--btn-warning)] [--btn-fg:var(--color-warning-fg)]', - '[--btn-bg-hovered:var(--btn-warning-hovered)] [--btn-border-hovered:var(--btn-warning-hovered)]', - 'inset-shadow-white/25 data-hovered:inset-shadow-white/30 data-pressed:inset-shadow-white/25' + "[--btn-warning:theme(--color-warning/97%)]", + "[--btn-warning-hovered:color-mix(in_oklab,var(--color-warning)_85%,white_15%)]", + "dark:[--btn-warning-hovered:color-mix(in_oklab,var(--color-warning)_90%,white_10%)]", + "outline-warning [--btn-bg:var(--btn-warning)] [--btn-border:var(--btn-warning)] [--btn-fg:var(--color-warning-fg)]", + "[--btn-bg-hovered:var(--btn-warning-hovered)] [--btn-border-hovered:var(--btn-warning-hovered)]", + "inset-shadow-white/25 data-hovered:inset-shadow-white/30 data-pressed:inset-shadow-white/25", ], danger: [ - 'outline-danger [--btn-bg:theme(--color-danger/95%)] [--btn-border:var(--color-danger)] [--btn-fg:var(--color-danger-fg)] dark:[--btn-bg:var(--color-danger)]', - '[--btn-danger-hovered:color-mix(in_oklab,var(--color-danger)_93%,white_7%)]', - 'dark:[--btn-danger-hovered:color-mix(in_oklab,var(--color-danger)_96%,white_4%)]', - '[--btn-bg-hovered:var(--btn-danger-hovered)] [--btn-border-hovered:var(--btn-danger-hovered)]', - 'inset-shadow-danger-fg/30 data-hovered:inset-shadow-danger-fg/35 data-pressed:inset-shadow-danger-fg/30' - ] + "outline-danger [--btn-bg:theme(--color-danger/95%)] [--btn-border:var(--color-danger)] [--btn-fg:var(--color-danger-fg)] dark:[--btn-bg:var(--color-danger)]", + "[--btn-danger-hovered:color-mix(in_oklab,var(--color-danger)_93%,white_7%)]", + "dark:[--btn-danger-hovered:color-mix(in_oklab,var(--color-danger)_96%,white_4%)]", + "[--btn-bg-hovered:var(--btn-danger-hovered)] [--btn-border-hovered:var(--btn-danger-hovered)]", + "inset-shadow-danger-fg/30 data-hovered:inset-shadow-danger-fg/35 data-pressed:inset-shadow-danger-fg/30", + ], }, appearance: { solid: [ - 'inset-ring-0 dark:inset-ring dark:border-0', - 'inset-ring-(--btn-border) inset-shadow-2xs border-(--btn-border) bg-(--btn-bg) text-(--btn-fg)', - 'data-hovered:bg-(--btn-bg-hovered) data-hovered:ring-(--btn-border-hovered)', - 'data-pressed:border-(--btn-border) data-pressed:bg-(--btn-bg)' + "inset-ring-0 dark:inset-ring dark:border-0", + "inset-ring-(--btn-border) inset-shadow-2xs border-(--btn-border) bg-(--btn-bg) text-(--btn-fg)", + "data-hovered:bg-(--btn-bg-hovered) data-hovered:ring-(--btn-border-hovered)", + "data-pressed:border-(--btn-border) data-pressed:bg-(--btn-bg)", ], - outline: ['border data-hovered:bg-secondary data-pressed:bg-secondary'], - plain: ['border-transparent data-hovered:bg-secondary data-pressed:bg-secondary'] + outline: ["border data-hovered:bg-secondary data-pressed:bg-secondary"], + plain: ["border-transparent data-hovered:bg-secondary data-pressed:bg-secondary"], }, size: { - 'extra-small': 'h-8 px-[calc(var(--spacing)*2.7)] text-xs/4 lg:text-[0.800rem]/4', - small: 'h-9 px-3.5 text-sm/5 sm:text-sm/5', - medium: 'h-10 px-4 text-base sm:text-sm/6', - large: 'h-11 px-4.5 text-base *:data-[slot=icon]:mx-[-1.5px] sm:*:data-[slot=icon]:size-5 lg:text-base/7', - 'square-petite': 'size-9 shrink-0' + "extra-small": + "h-8 px-[calc(var(--spacing)*2.7)] text-xs/4 **:data-[slot=avatar]:*:size-3.5 **:data-[slot=avatar]:size-3.5 **:data-[slot=icon]:size-3 lg:text-[0.800rem]/4", + small: "h-9 px-3.5 text-sm/5 sm:text-sm/5", + medium: "h-10 px-4 text-base sm:text-sm/6", + large: + "h-11 px-4.5 text-base *:data-[slot=icon]:mx-[-1.5px] sm:*:data-[slot=icon]:size-5 lg:text-base/7", + "square-petite": "size-9 shrink-0", }, shape: { - square: 'rounded-lg', - circle: 'rounded-full' + square: "rounded-lg", + circle: "rounded-full", }, isDisabled: { - false: 'cursor-pointer forced-colors:data-disabled:text-[GrayText]', - true: 'inset-shadow-none cursor-default border-0 opacity-50 ring-0 dark:inset-ring-0 forced-colors:data-disabled:text-[GrayText]' + false: "cursor-pointer forced-colors:data-disabled:text-[GrayText]", + true: "inset-shadow-none cursor-default border-0 opacity-50 ring-0 dark:inset-ring-0 forced-colors:data-disabled:text-[GrayText]", }, isPending: { - true: 'cursor-default opacity-50' - } + true: "cursor-default opacity-50", + }, }, defaultVariants: { - intent: 'primary', - appearance: 'solid', - size: 'medium', - shape: 'square' - } -}); + intent: "primary", + appearance: "solid", + size: "medium", + shape: "square", + }, +}) interface ButtonProps extends ButtonPrimitiveProps { - intent?: 'primary' | 'secondary' | 'danger' | 'warning'; - size?: 'medium' | 'large' | 'square-petite' | 'extra-small' | 'small'; - shape?: 'square' | 'circle'; - appearance?: 'solid' | 'outline' | 'plain'; - ref?: React.Ref; + intent?: "primary" | "secondary" | "danger" | "warning" + size?: "medium" | "large" | "square-petite" | "extra-small" | "small" + shape?: "square" | "circle" + appearance?: "solid" | "outline" | "plain" + ref?: React.Ref } const Button = ({ className, intent, appearance, size, shape, ref, ...props }: ButtonProps) => { @@ -100,14 +102,16 @@ const Button = ({ className, intent, appearance, size, shape, ref, ...props }: B appearance, size, shape, - className - }) + className, + }), )} > - {(values) => <>{typeof props.children === 'function' ? props.children(values) : props.children}} + {(values) => ( + <>{typeof props.children === "function" ? props.children(values) : props.children} + )} - ); -}; + ) +} -export { Button, ButtonPrimitive, buttonStyles }; -export type { ButtonProps }; +export { Button, buttonStyles } +export type { ButtonProps } diff --git a/resources/js/components/ui/card.tsx b/resources/js/components/ui/card.tsx index 4c9c8f8..ccb2586 100644 --- a/resources/js/components/ui/card.tsx +++ b/resources/js/components/ui/card.tsx @@ -1,60 +1,85 @@ -import { tv } from 'tailwind-variants'; - -import { Heading } from './heading'; - -const card = tv({ - slots: { - root: [ - 'xrkr xkd2 rounded-lg border bg-bg text-fg shadow-xs has-[table]:overflow-hidden **:data-[slot=table-header]:bg-muted/50 has-[table]:**:data-[slot=card-footer]:border-t **:[table]:overflow-hidden' - ], - header: 'flex flex-col gap-y-1 px-6 py-5', - title: 'font-semibold leading-none tracking-tight sm:leading-6', - description: 'text-muted-fg text-sm', - content: - 'px-6 pb-6 has-[table]:border-t has-[[data-slot=table-header]]:bg-muted/40 has-[table]:p-0 **:data-[slot=table-cell]:px-6 **:data-[slot=table-column]:px-6 [&:has(table)+[data-slot=card-footer]]:py-5', - footer: 'flex items-center p-6 pt-0' - } -}); - -const { root, header, title, description, content, footer } = card(); +import { cn } from "@/utils/classes" +import { Heading } from "./heading" const Card = ({ className, ...props }: React.HTMLAttributes) => { - return
; -}; + return ( +
+ ) +} interface HeaderProps extends React.HTMLAttributes { - title?: string; - description?: string; + title?: string + description?: string } -const Header = ({ className, title, description, children, ...props }: HeaderProps) => ( -
- {title && {title}} - {description && {description}} - {!title && typeof children === 'string' ? {children} : children} +const CardHeader = ({ className, title, description, children, ...props }: HeaderProps) => ( +
+ {title && {title}} + {description && {description}} + {!title && typeof children === "string" ? {children} : children}
-); +) -const Title = ({ className, level = 3, ...props }: React.ComponentProps) => { - return ; -}; +const CardTitle = ({ className, level = 3, ...props }: React.ComponentProps) => { + return ( + + ) +} -const Description = ({ className, ...props }: React.HTMLAttributes) => { - return
; -}; +const CardDescription = ({ className, ...props }: React.HTMLAttributes) => { + return ( +
+ ) +} -const Content = ({ className, ...props }: React.HTMLAttributes) => { - return
; -}; +const CardContent = ({ className, ...props }: React.HTMLAttributes) => { + return ( +
+ ) +} -const Footer = ({ className, ...props }: React.HTMLAttributes) => { - return
; -}; +const CardFooter = ({ className, ...props }: React.HTMLAttributes) => { + return ( +
+ ) +} -Card.Content = Content; -Card.Description = Description; -Card.Footer = Footer; -Card.Header = Header; -Card.Title = Title; +Card.Content = CardContent +Card.Description = CardDescription +Card.Footer = CardFooter +Card.Header = CardHeader +Card.Title = CardTitle -export { Card }; +export { Card } diff --git a/resources/js/components/ui/checkbox.tsx b/resources/js/components/ui/checkbox.tsx index 1a93f0e..c6b0fad 100644 --- a/resources/js/components/ui/checkbox.tsx +++ b/resources/js/components/ui/checkbox.tsx @@ -1,71 +1,74 @@ -import { IconCheck, IconMinus } from 'justd-icons'; +import { IconCheck, IconMinus } from "justd-icons" import type { CheckboxGroupProps as CheckboxGroupPrimitiveProps, CheckboxProps as CheckboxPrimitiveProps, - ValidationResult -} from 'react-aria-components'; + ValidationResult, +} from "react-aria-components" import { CheckboxGroup as CheckboxGroupPrimitive, Checkbox as CheckboxPrimitive, - composeRenderProps -} from 'react-aria-components'; -import { tv } from 'tailwind-variants'; + composeRenderProps, +} from "react-aria-components" +import { tv } from "tailwind-variants" -import { cn } from '@/utils/classes'; -import { Description, FieldError, Label } from './field'; -import { composeTailwindRenderProps } from './primitive'; +import { cn } from "@/utils/classes" +import { Description, FieldError, Label } from "./field" +import { composeTailwindRenderProps } from "./primitive" interface CheckboxGroupProps extends CheckboxGroupPrimitiveProps { - label?: string; - description?: string; - errorMessage?: string | ((validation: ValidationResult) => string); + label?: string + description?: string + errorMessage?: string | ((validation: ValidationResult) => string) } const CheckboxGroup = ({ className, ...props }: CheckboxGroupProps) => { return ( - - + + {props.label && } {props.children as React.ReactNode} {props.description && {props.description}} {props.errorMessage} - ); -}; + ) +} const checkboxStyles = tv({ - base: 'group flex items-center gap-2 text-sm transition', + base: "group flex items-center gap-2 text-sm transition", variants: { isDisabled: { - true: 'opacity-50' - } - } -}); + true: "opacity-50", + }, + }, +}) const boxStyles = tv({ - base: 'flex size-4 shrink-0 items-center justify-center rounded border border-input text-bg transition *:data-[slot=icon]:size-3', + base: "flex size-4 shrink-0 items-center justify-center rounded border border-input text-bg transition *:data-[slot=icon]:size-3", variants: { isSelected: { - false: 'bg-muted', + false: "bg-muted", true: [ - 'border-primary bg-primary text-primary-fg', - 'group-data-invalid:border-danger/70 group-data-invalid:bg-danger group-data-invalid:text-danger-fg' - ] + "border-primary bg-primary text-primary-fg", + "group-data-invalid:border-danger/70 group-data-invalid:bg-danger group-data-invalid:text-danger-fg", + ], }, isFocused: { true: [ - 'border-primary ring-4 ring-primary/20', - 'group-data-invalid:border-danger/70 group-data-invalid:text-danger-fg group-data-invalid:ring-danger/20' - ] + "border-primary ring-4 ring-primary/20", + "group-data-invalid:border-danger/70 group-data-invalid:text-danger-fg group-data-invalid:ring-danger/20", + ], }, isInvalid: { - true: 'border-danger/70 bg-danger/20 text-danger-fg ring-danger/20' - } - } -}); + true: "border-danger/70 bg-danger/20 text-danger-fg ring-danger/20", + }, + }, +}) interface CheckboxProps extends CheckboxPrimitiveProps { - description?: string; - label?: string; + description?: string + label?: string } const Checkbox = ({ className, ...props }: CheckboxProps) => { @@ -73,15 +76,15 @@ const Checkbox = ({ className, ...props }: CheckboxProps) => { - checkboxStyles({ ...renderProps, className }) + checkboxStyles({ ...renderProps, className }), )} > {({ isSelected, isIndeterminate, ...renderProps }) => ( -
+
{isIndeterminate ? : isSelected ? : null} @@ -89,15 +92,21 @@ const Checkbox = ({ className, ...props }: CheckboxProps) => {
<> - {props.label ? : (props.children as React.ReactNode)} + {props.label ? ( + + ) : ( + (props.children as React.ReactNode) + )} {props.description && {props.description}}
)} - ); -}; + ) +} -export { Checkbox, CheckboxGroup }; -export type { CheckboxGroupProps, CheckboxProps }; +export { Checkbox, CheckboxGroup } +export type { CheckboxGroupProps, CheckboxProps } diff --git a/resources/js/components/ui/container.tsx b/resources/js/components/ui/container.tsx index c8caf97..ccc8572 100644 --- a/resources/js/components/ui/container.tsx +++ b/resources/js/components/ui/container.tsx @@ -1,26 +1,26 @@ -import { tv } from 'tailwind-variants'; +import { tv } from "tailwind-variants" const containerStyles = tv({ - base: '@container mx-auto w-full max-w-7xl lg:max-w-(--breakpoint-xl) 2xl:max-w-(--breakpoint-2xl)', + base: "@container mx-auto w-full max-w-7xl lg:max-w-(--breakpoint-xl) 2xl:max-w-(--breakpoint-2xl)", variants: { intent: { - constrained: 'sm:px-6 lg:px-8', - 'padded-content': 'px-4 sm:px-6 lg:px-8' - } + constrained: "sm:px-6 lg:px-8", + "padded-content": "px-4 sm:px-6 lg:px-8", + }, }, defaultVariants: { - intent: 'padded-content' - } -}); + intent: "padded-content", + }, +}) interface ContainerProps extends React.HTMLAttributes { - intent?: 'constrained' | 'padded-content'; - ref?: React.Ref; + intent?: "constrained" | "padded-content" + ref?: React.Ref } const Container = ({ className, intent, ref, ...props }: ContainerProps) => (
-); +) -export { Container }; -export type { ContainerProps }; +export { Container } +export type { ContainerProps } diff --git a/resources/js/components/ui/dialog.tsx b/resources/js/components/ui/dialog.tsx index 7f9219c..f3ed909 100644 --- a/resources/js/components/ui/dialog.tsx +++ b/resources/js/components/ui/dialog.tsx @@ -1,145 +1,171 @@ -import { useEffect, useRef } from 'react'; +import { useEffect, useRef } from "react" -import { IconX } from 'justd-icons'; -import type { ButtonProps as ButtonPrimitiveProps, DialogProps, HeadingProps } from 'react-aria-components'; -import { Button as ButtonPrimitive, Dialog as DialogPrimitive, Heading } from 'react-aria-components'; -import { tv } from 'tailwind-variants'; +import { IconX } from "justd-icons" +import type { HeadingProps } from "react-aria-components" +import { + Button as ButtonPrimitive, + Dialog as DialogPrimitive, + Heading, + Text, +} from "react-aria-components" +import { tv } from "tailwind-variants" -import { useMediaQuery } from '@/utils/use-media-query'; -import { Button, type ButtonProps } from './button'; +import { useMediaQuery } from "@/utils/use-media-query" +import { Button, type ButtonProps } from "./button" const dialogStyles = tv({ slots: { root: [ - 'peer/dialog group/dialog relative flex max-h-[inherit] flex-col overflow-hidden outline-hidden [scrollbar-width:thin] [&::-webkit-scrollbar]:size-0.5' + "peer/dialog group/dialog relative flex max-h-[inherit] flex-col overflow-hidden outline-hidden [scrollbar-width:thin] [&::-webkit-scrollbar]:size-0.5", ], header: - 'relative flex flex-col gap-0.5 p-4 sm:gap-1 sm:p-6 [&[data-slot=dialog-header]:has(+[data-slot=dialog-footer])]:pb-0', - description: 'text-muted-fg text-sm', + "relative flex flex-col gap-0.5 p-4 sm:gap-1 sm:p-6 [&[data-slot=dialog-header]:has(+[data-slot=dialog-footer])]:pb-0", + description: "text-muted-fg text-sm", body: [ - 'isolate flex flex-1 flex-col overflow-auto px-4 sm:px-6', - 'max-h-[calc(var(--visual-viewport-height)-var(--visual-viewport-vertical-padding)-var(--dialog-header-height,0px)-var(--dialog-footer-height,0px))]' + "isolate flex flex-1 flex-col overflow-auto px-4 py-1 sm: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: 'isolate mt-auto flex flex-col-reverse justify-between gap-3 p-4 sm:flex-row sm:p-6', + footer: + "isolate mt-auto flex flex-col-reverse justify-between gap-3 p-4 pt-3 sm:flex-row sm:p-6 sm:pt-5", closeIndicator: - 'close absolute top-1 right-1 z-50 grid size-8 place-content-center rounded-xl data-focused:bg-secondary data-hovered:bg-secondary data-focused:outline-hidden data-focus-visible:ring-1 data-focus-visible:ring-primary sm:top-2 sm:right-2 sm:size-7 sm:rounded-md' - } -}); - -const { root, header, description, body, footer, closeIndicator } = dialogStyles(); - -const Dialog = ({ role, className, ...props }: DialogProps) => { - return ; -}; + "close absolute top-1 right-1 z-50 grid size-8 place-content-center rounded-xl data-focused:bg-secondary data-hovered:bg-secondary data-focused:outline-hidden data-focus-visible:ring-1 data-focus-visible:ring-primary sm:top-2 sm:right-2 sm:size-7 sm:rounded-md", + }, +}) + +const { root, header, description, body, footer, closeIndicator } = dialogStyles() + +const Dialog = ({ + role = "dialog", + className, + ...props +}: React.ComponentProps) => { + return +} -const Trigger = (props: ButtonPrimitiveProps) => ; +const Trigger = (props: React.ComponentProps) => ( + +) type DialogHeaderProps = React.HTMLAttributes & { - title?: string; - description?: string; -}; + title?: string + description?: string +} const Header = ({ className, ...props }: DialogHeaderProps) => { - const headerRef = useRef(null); + const headerRef = useRef(null) useEffect(() => { - const header = headerRef.current; + const header = headerRef.current if (!header) { - return; + return } const observer = new ResizeObserver((entries) => { for (const entry of entries) { - header.parentElement?.style.setProperty('--dialog-header-height', `${entry.target.clientHeight}px`); + header.parentElement?.style.setProperty( + "--dialog-header-height", + `${entry.target.clientHeight}px`, + ) } - }); + }) - observer.observe(header); - return () => observer.unobserve(header); - }, []); + observer.observe(header) + return () => observer.unobserve(header) + }, []) return (
{props.title && {props.title}} {props.description && {props.description}} - {!props.title && typeof props.children === 'string' ? : props.children} + {!props.title && typeof props.children === "string" ? <Title {...props} /> : props.children} </div> - ); -}; + ) +} const titleStyles = tv({ - base: 'flex flex-1 items-center text-fg', + base: "flex flex-1 items-center text-fg", variants: { level: { - 1: 'font-semibold text-lg sm:text-xl', - 2: 'font-semibold text-lg sm:text-xl', - 3: 'font-semibold text-base sm:text-lg', - 4: 'font-semibold text-base' - } - } -}); - -interface DialogTitleProps extends Omit<HeadingProps, 'level'> { - level?: 1 | 2 | 3 | 4; - ref?: React.Ref<HTMLHeadingElement>; + 1: "font-semibold text-lg sm:text-xl", + 2: "font-semibold text-lg sm:text-xl", + 3: "font-semibold text-base sm:text-lg", + 4: "font-semibold text-base", + }, + }, +}) + +interface DialogTitleProps extends Omit<HeadingProps, "level"> { + level?: 1 | 2 | 3 | 4 + ref?: React.Ref<HTMLHeadingElement> } const Title = ({ level = 2, className, ref, ...props }: DialogTitleProps) => ( - <Heading slot="title" level={level} ref={ref} className={titleStyles({ level, className })} {...props} /> -); - -type DialogDescriptionProps = React.ComponentProps<'div'>; + <Heading + slot="title" + level={level} + ref={ref} + className={titleStyles({ level, className })} + {...props} + /> +) + +type DialogDescriptionProps = React.ComponentProps<"div"> const Description = ({ className, ref, ...props }: DialogDescriptionProps) => ( - <div className={description({ className })} ref={ref} {...props} /> -); + <Text slot="description" className={description({ className })} ref={ref} {...props} /> +) -type DialogBodyProps = React.ComponentProps<'div'>; +type DialogBodyProps = React.ComponentProps<"div"> const Body = ({ className, ref, ...props }: DialogBodyProps) => ( <div data-slot="dialog-body" ref={ref} className={body({ className })} {...props} /> -); +) -type DialogFooterProps = React.ComponentProps<'div'>; +type DialogFooterProps = React.ComponentProps<"div"> const Footer = ({ className, ...props }: DialogFooterProps) => { - const footerRef = useRef<HTMLDivElement>(null); + const footerRef = useRef<HTMLDivElement>(null) useEffect(() => { - const footer = footerRef.current; + const footer = footerRef.current if (!footer) { - return; + return } const observer = new ResizeObserver((entries) => { for (const entry of entries) { - footer.parentElement?.style.setProperty('--dialog-footer-height', `${entry.target.clientHeight}px`); + footer.parentElement?.style.setProperty( + "--dialog-footer-height", + `${entry.target.clientHeight}px`, + ) } - }); + }) - observer.observe(footer); + observer.observe(footer) return () => { - observer.unobserve(footer); - }; - }, []); - return <div ref={footerRef} data-slot="dialog-footer" className={footer({ className })} {...props} />; -}; + observer.unobserve(footer) + } + }, []) + return ( + <div ref={footerRef} data-slot="dialog-footer" className={footer({ className })} {...props} /> + ) +} -const Close = ({ className, appearance = 'outline', ref, ...props }: ButtonProps) => { - return <Button slot="close" className={className} ref={ref} appearance={appearance} {...props} />; -}; +const Close = ({ className, appearance = "outline", ref, ...props }: ButtonProps) => { + return <Button slot="close" className={className} ref={ref} appearance={appearance} {...props} /> +} interface CloseButtonIndicatorProps extends ButtonProps { - className?: string; - isDismissable?: boolean | undefined; + className?: string + isDismissable?: boolean | undefined } const CloseIndicator = ({ className, ...props }: CloseButtonIndicatorProps) => { - const isMobile = useMediaQuery('(max-width: 600px)'); - const buttonRef = useRef<HTMLButtonElement>(null); + const isMobile = useMediaQuery("(max-width: 600px)") + const buttonRef = useRef<HTMLButtonElement>(null) useEffect(() => { if (isMobile && buttonRef.current) { - buttonRef.current.focus(); + buttonRef.current.focus() } - }, [isMobile]); + }, [isMobile]) return props.isDismissable ? ( <ButtonPrimitive ref={buttonRef} @@ -150,24 +176,24 @@ const CloseIndicator = ({ className, ...props }: CloseButtonIndicatorProps) => { > <IconX className="size-4" /> </ButtonPrimitive> - ) : null; -}; - -Dialog.Trigger = Trigger; -Dialog.Header = Header; -Dialog.Title = Title; -Dialog.Description = Description; -Dialog.Body = Body; -Dialog.Footer = Footer; -Dialog.Close = Close; -Dialog.CloseIndicator = CloseIndicator; - -export { Dialog }; + ) : null +} + +Dialog.Trigger = Trigger +Dialog.Header = Header +Dialog.Title = Title +Dialog.Description = Description +Dialog.Body = Body +Dialog.Footer = Footer +Dialog.Close = Close +Dialog.CloseIndicator = CloseIndicator + +export { Dialog } export type { CloseButtonIndicatorProps, DialogBodyProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, - DialogTitleProps -}; + DialogTitleProps, +} diff --git a/resources/js/components/ui/dropdown.tsx b/resources/js/components/ui/dropdown.tsx index 4898dfa..6229f78 100644 --- a/resources/js/components/ui/dropdown.tsx +++ b/resources/js/components/ui/dropdown.tsx @@ -1,8 +1,7 @@ -import { cn } from '@/utils/classes'; -import { IconCheck } from 'justd-icons'; +import { cn } from "@/utils/classes" +import { IconCheck } from "justd-icons" import { Collection, - composeRenderProps, Header, ListBoxItem as ListBoxItemPrimitive, type ListBoxItemProps, @@ -11,107 +10,122 @@ import { Separator, type SeparatorProps, Text, - type TextProps -} from 'react-aria-components'; -import { tv } from 'tailwind-variants'; -import { Keyboard } from './keyboard'; + type TextProps, + composeRenderProps, +} from "react-aria-components" +import { tv } from "tailwind-variants" +import { Keyboard } from "./keyboard" const dropdownItemStyles = tv({ base: [ - 'col-span-full grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] not-has-data-[slot=dropdown-item-details]:items-center has-data-[slot=dropdown-item-details]:**:data-[slot=checked-icon]:mt-[1.5px] supports-[grid-template-columns:subgrid]:grid-cols-subgrid', - 'group relative cursor-default select-none rounded-[calc(var(--radius-lg)-1px)] px-[calc(var(--spacing)*2.3)] py-[calc(var(--spacing)*1.3)] forced-color:text-[Highlight] text-base text-fg outline-0 forced-color-adjust-none sm:text-sm/6 forced-colors:text-[LinkText]', - '**:data-[slot=avatar]:*:mr-2 **:data-[slot=avatar]:*:size-6 **:data-[slot=avatar]:mr-2 **:data-[slot=avatar]:size-6 sm:**:data-[slot=avatar]:*:size-5 sm:**:data-[slot=avatar]:size-5', - 'data-danger:**:data-[slot=icon]:text-danger/60 **:data-[slot=icon]:size-4 **:data-[slot=icon]:shrink-0 **:data-[slot=icon]:text-muted-fg data-focused:data-danger:**:data-[slot=icon]:text-danger', - 'data-[slot=menu-radio]:*:data-[slot=icon]:size-3 *:data-[slot=icon]:mr-2', - 'forced-colors:**:data-[slot=icon]:text-[CanvasText] forced-colors:group-data-focused:**:data-[slot=icon]:text-[Canvas] ', - '[&>[slot=label]+[data-slot=icon]]:absolute [&>[slot=label]+[data-slot=icon]]:right-0' + "col-span-full grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] not-has-data-[slot=dropdown-item-details]:items-center has-data-[slot=dropdown-item-details]:**:data-[slot=checked-icon]:mt-[1.5px] supports-[grid-template-columns:subgrid]:grid-cols-subgrid", + "group relative cursor-default select-none rounded-[calc(var(--radius-lg)-1px)] px-[calc(var(--spacing)*2.3)] py-[calc(var(--spacing)*1.3)] forced-color:text-[Highlight] text-base text-fg outline-0 forced-color-adjust-none sm:text-sm/6 forced-colors:text-[LinkText]", + "**:data-[slot=avatar]:*:mr-2 **:data-[slot=avatar]:*:size-6 **:data-[slot=avatar]:mr-2 **:data-[slot=avatar]:size-6 sm:**:data-[slot=avatar]:*:size-5 sm:**:data-[slot=avatar]:size-5", + "data-danger:**:data-[slot=icon]:text-danger/60 **:data-[slot=icon]:size-4 **:data-[slot=icon]:shrink-0 **:data-[slot=icon]:text-muted-fg data-focused:data-danger:**:data-[slot=icon]:text-danger", + "data-[slot=menu-radio]:*:data-[slot=icon]:size-3 *:data-[slot=icon]:mr-2", + "forced-colors:**:data-[slot=icon]:text-[CanvasText] forced-colors:group-data-focused:**:data-[slot=icon]:text-[Canvas] ", + "[&>[slot=label]+[data-slot=icon]]:absolute [&>[slot=label]+[data-slot=icon]]:right-0", ], variants: { isDisabled: { - true: 'text-muted-fg forced-colors:text-[GrayText]' + true: "text-muted-fg forced-colors:text-[GrayText]", }, isSelected: { - true: '**:data-[slot=avatar]:*:hidden **:data-[slot=avatar]:hidden **:data-[slot=icon]:hidden' + true: "**:data-[slot=avatar]:*:hidden **:data-[slot=avatar]:hidden **:data-[slot=icon]:hidden", }, isFocused: { - false: 'data-danger:text-danger', + false: "data-danger:text-danger", true: [ - '**:data-[slot=icon]:text-accent-fg **:[kbd]:text-accent-fg', - 'bg-accent text-accent-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]', - 'data-danger:bg-danger/10 data-danger:text-danger', - 'data-[slot=description]:text-accent-fg data-[slot=label]:text-accent-fg [&_.text-muted-fg]:text-accent-fg/80' - ] - } - } -}); + "**:data-[slot=icon]:text-accent-fg **:[kbd]:text-accent-fg", + "bg-accent text-accent-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]", + "data-danger:bg-danger/10 data-danger:text-danger", + "data-[slot=description]:text-accent-fg data-[slot=label]:text-accent-fg [&_.text-muted-fg]:text-accent-fg/80", + ], + }, + }, +}) const dropdownSectionStyles = tv({ slots: { - section: 'col-span-full grid grid-cols-[auto_1fr]', - header: 'col-span-full px-2.5 py-1 font-medium text-muted-fg text-sm sm:text-xs' - } -}); + section: "col-span-full grid grid-cols-[auto_1fr]", + header: "col-span-full px-2.5 py-1 font-medium text-muted-fg text-sm sm:text-xs", + }, +}) -const { section, header } = dropdownSectionStyles(); +const { section, header } = dropdownSectionStyles() interface DropdownSectionProps<T> extends SectionProps<T> { - title?: string; + title?: string } const DropdownSection = <T extends object>({ className, ...props }: DropdownSectionProps<T>) => { return ( <ListBoxSection className={section({ className })}> - {'title' in props && <Header className={header()}>{props.title}</Header>} + {"title" in props && <Header className={header()}>{props.title}</Header>} <Collection items={props.items}>{props.children}</Collection> </ListBoxSection> - ); -}; + ) +} -type DropdownItemProps = ListBoxItemProps; +type DropdownItemProps = ListBoxItemProps const DropdownItem = ({ className, ...props }: DropdownItemProps) => { - const textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined); + const textValue = + props.textValue || (typeof props.children === "string" ? props.children : undefined) return ( <ListBoxItemPrimitive textValue={textValue} className={composeRenderProps(className, (className, renderProps) => - dropdownItemStyles({ ...renderProps, className }) + dropdownItemStyles({ ...renderProps, className }), )} {...props} > {composeRenderProps(props.children, (children, { isSelected }) => ( <> {isSelected && <IconCheck className="-mx-0.5 mr-2" data-slot="checked-icon" />} - {typeof children === 'string' ? <DropdownLabel>{children}</DropdownLabel> : children} + {typeof children === "string" ? <DropdownLabel>{children}</DropdownLabel> : children} </> ))} </ListBoxItemPrimitive> - ); -}; + ) +} interface DropdownItemDetailProps extends TextProps { - label?: TextProps['children']; - description?: TextProps['children']; + label?: TextProps["children"] + description?: TextProps["children"] classNames?: { - label?: TextProps['className']; - description?: TextProps['className']; - }; + label?: TextProps["className"] + description?: TextProps["className"] + } } -const DropdownItemDetails = ({ label, description, classNames, ...props }: DropdownItemDetailProps) => { - const { slot, children, title, ...restProps } = props; +const DropdownItemDetails = ({ + label, + description, + classNames, + ...props +}: DropdownItemDetailProps) => { + const { slot, children, title, ...restProps } = props return ( - <div data-slot="dropdown-item-details" className="col-start-2 flex flex-col gap-y-1" {...restProps}> + <div + data-slot="dropdown-item-details" + className="col-start-2 flex flex-col gap-y-1" + {...restProps} + > {label && ( - <Text slot={slot ?? 'label'} className={cn('font-medium sm:text-sm', classNames?.label)} {...restProps}> + <Text + slot={slot ?? "label"} + className={cn("font-medium sm:text-sm", classNames?.label)} + {...restProps} + > {label} </Text> )} {description && ( <Text - slot={slot ?? 'description'} - className={cn('text-muted-fg text-xs', classNames?.description)} + slot={slot ?? "description"} + className={cn("text-muted-fg text-xs", classNames?.description)} {...restProps} > {description} @@ -119,24 +133,28 @@ const DropdownItemDetails = ({ label, description, classNames, ...props }: Dropd )} {!title && children} </div> - ); -}; + ) +} interface MenuLabelProps extends TextProps { - ref?: React.Ref<HTMLDivElement>; + ref?: React.Ref<HTMLDivElement> } const DropdownLabel = ({ className, ref, ...props }: MenuLabelProps) => ( - <Text slot="label" ref={ref} className={cn('col-start-2', className)} {...props} /> -); + <Text slot="label" ref={ref} className={cn("col-start-2", className)} {...props} /> +) const DropdownSeparator = ({ className, ...props }: SeparatorProps) => ( - <Separator orientation="horizontal" className={cn('-mx-1 col-span-full my-1 h-px bg-border', className)} {...props} /> -); + <Separator + orientation="horizontal" + className={cn("-mx-1 col-span-full my-1 h-px bg-border", className)} + {...props} + /> +) const DropdownKeyboard = ({ className, ...props }: React.ComponentProps<typeof Keyboard>) => { - return <Keyboard className={cn('absolute right-2 pl-2', className)} {...props} />; -}; + return <Keyboard className={cn("absolute right-2 pl-2", className)} {...props} /> +} /** * Note: This is not exposed component, but it's used in other components to render dropdowns. @@ -145,11 +163,11 @@ const DropdownKeyboard = ({ className, ...props }: React.ComponentProps<typeof K export { DropdownItem, DropdownItemDetails, - dropdownItemStyles, DropdownKeyboard, DropdownLabel, DropdownSection, + DropdownSeparator, + dropdownItemStyles, dropdownSectionStyles, - DropdownSeparator -}; -export type { DropdownItemDetailProps, DropdownItemProps, DropdownSectionProps }; +} +export type { DropdownItemDetailProps, DropdownItemProps, DropdownSectionProps } diff --git a/resources/js/components/ui/field.tsx b/resources/js/components/ui/field.tsx index eee4d7f..314d896 100644 --- a/resources/js/components/ui/field.tsx +++ b/resources/js/components/ui/field.tsx @@ -5,87 +5,96 @@ import type { LabelProps, TextFieldProps as TextFieldPrimitiveProps, TextProps, - ValidationResult -} from 'react-aria-components'; + ValidationResult, +} from "react-aria-components" import { - composeRenderProps, FieldError as FieldErrorPrimitive, Group, Input as InputPrimitive, Label as LabelPrimitive, - Text -} from 'react-aria-components'; -import { tv } from 'tailwind-variants'; + Text, + composeRenderProps, +} from "react-aria-components" +import { tv } from "tailwind-variants" -import { composeTailwindRenderProps, focusStyles } from './primitive'; +import { composeTailwindRenderProps, focusStyles } from "./primitive" interface FieldProps { - label?: string; - placeholder?: string; - description?: string; - errorMessage?: string | ((validation: ValidationResult) => string); - 'aria-label'?: TextFieldPrimitiveProps['aria-label']; - 'aria-labelledby'?: TextFieldPrimitiveProps['aria-labelledby']; + label?: string + placeholder?: string + description?: string + errorMessage?: string | ((validation: ValidationResult) => string) + "aria-label"?: TextFieldPrimitiveProps["aria-label"] + "aria-labelledby"?: TextFieldPrimitiveProps["aria-labelledby"] } const fieldStyles = tv({ slots: { - description: 'text-pretty text-muted-fg text-sm/6', - label: 'w-fit cursor-default font-medium text-secondary-fg text-sm', - fieldError: 'text-danger text-sm/6 forced-colors:text-[Mark]', - input: [ - 'w-full min-w-0 bg-transparent px-2.5 py-2 text-base text-fg placeholder-muted-fg outline-hidden data-focused:outline-hidden sm:text-sm [&::-ms-reveal]:hidden' - ] - } -}); + description: "text-pretty text-muted-fg text-sm/6", + label: "w-fit cursor-default font-medium text-secondary-fg text-sm/6", + fieldError: "text-danger text-sm/6 forced-colors:text-[Mark]", + }, +}) -const { description, label, fieldError, input } = fieldStyles(); +const { description, label, fieldError } = fieldStyles() const Label = ({ className, ...props }: LabelProps) => { - return <LabelPrimitive {...props} className={label({ className })} />; -}; + return <LabelPrimitive {...props} className={label({ className })} /> +} interface DescriptionProps extends TextProps { - isWarning?: boolean; - ref?: React.RefObject<HTMLElement>; + isWarning?: boolean + ref?: React.RefObject<HTMLElement> } const Description = ({ ref, className, ...props }: DescriptionProps) => { - const isWarning = props.isWarning ?? false; + const isWarning = props.isWarning ?? false return ( <Text ref={ref} {...props} slot="description" - className={description({ className: isWarning ? 'text-warning' : className })} + className={description({ className: isWarning ? "text-warning" : className })} /> - ); -}; + ) +} interface FieldErrorProps extends FieldErrorPrimitiveProps { - ref?: React.RefObject<HTMLElement>; + ref?: React.RefObject<HTMLElement> } const FieldError = ({ className, ref, ...props }: FieldErrorProps) => { - return <FieldErrorPrimitive ref={ref} {...props} className={composeTailwindRenderProps(className, fieldError())} />; -}; + return ( + <FieldErrorPrimitive + ref={ref} + {...props} + className={composeTailwindRenderProps(className, fieldError())} + /> + ) +} const fieldGroupStyles = tv({ base: [ - 'group flex h-10 items-center overflow-hidden rounded-lg border border-input transition duration-200 ease-out', - 'focus-within:ring-4 group-data-invalid:focus-within:border-danger group-data-invalid:focus-within:ring-danger/20', - '[&>[role=progressbar]]:mr-2.5', - '**:data-[slot=icon]:size-4 **:data-[slot=icon]:shrink-0', - '*:data-[slot=suffix]:mr-2.5 *:data-[slot=suffix]:text-muted-fg', - '*:data-[slot=prefix]:ml-2.5 *:data-[slot=prefix]:text-muted-fg' + "group flex h-10 items-center overflow-hidden rounded-lg border border-input shadow-xs transition duration-200 ease-out", + "relative focus-within:ring-4 group-data-invalid:focus-within:border-danger group-data-invalid:focus-within:ring-danger/20", + "[&>[role=progressbar]:first-child]:ml-2.5 [&>[role=progressbar]:last-child]:mr-2.5", + "**:data-[slot=icon]:size-4 **:data-[slot=icon]:shrink-0 **:[button]:shrink-0", + "[&>button:has([data-slot=icon]):first-child]:left-0 [&>button:has([data-slot=icon]):last-child]:right-0 [&>button:has([data-slot=icon])]:absolute", + "*:data-[slot=icon]:pointer-events-none *:data-[slot=icon]:absolute *:data-[slot=icon]:top-[calc(var(--spacing)*2.7)] *:data-[slot=icon]:z-10 *:data-[slot=icon]:size-4 *:data-[slot=icon]:text-muted-fg", + "[&>[data-slot=icon]:first-child]:left-2.5 [&>[data-slot=icon]:last-child]:right-2.5", + "[&:has([data-slot=icon]+input)]:pl-6 [&:has(input+[data-slot=icon])]:pr-6", + "[&:has([data-slot=icon]+[role=group])]:pl-6 [&:has([role=group]+[data-slot=icon])]:pr-6", + "has-[[data-slot=icon]:last-child]:[&_input]:pr-7", + "*:[button]:h-8 *:[button]:rounded-[calc(var(--radius-sm)-1px)] *:[button]:px-2.5", + "[&>button:first-child]:ml-[calc(var(--spacing)*0.7)] [&>button:last-child]:mr-[calc(var(--spacing)*0.7)]", ], variants: { isFocusWithin: focusStyles.variants.isFocused, isInvalid: focusStyles.variants.isInvalid, isDisabled: { - true: 'opacity-50 forced-colors:border-[GrayText]' - } - } -}); + true: "opacity-50 forced-colors:border-[GrayText]", + }, + }, +}) const FieldGroup = ({ className, ...props }: GroupProps) => { return ( @@ -94,19 +103,29 @@ const FieldGroup = ({ className, ...props }: GroupProps) => { className={composeRenderProps(className, (className, renderProps) => fieldGroupStyles({ ...renderProps, - className - }) + className, + }), )} /> - ); -}; + ) +} interface InputProps extends InputPrimitiveProps { - ref?: React.RefObject<HTMLInputElement>; + ref?: React.RefObject<HTMLInputElement> } + const Input = ({ className, ref, ...props }: InputProps) => { - return <InputPrimitive ref={ref} {...props} className={composeTailwindRenderProps(className, input())} />; -}; + return ( + <InputPrimitive + ref={ref} + {...props} + className={composeTailwindRenderProps( + className, + "w-full min-w-0 bg-transparent px-2.5 py-2 text-base text-fg placeholder-muted-fg outline-hidden data-focused:outline-hidden sm:text-sm/6 [&::-ms-reveal]:hidden [&::-webkit-search-cancel-button]:hidden", + )} + /> + ) +} -export { Description, FieldError, FieldGroup, Input, Label }; -export type { FieldErrorProps, FieldProps, InputProps }; +export { Description, FieldError, FieldGroup, Input, Label } +export type { FieldErrorProps, FieldProps, InputProps } diff --git a/resources/js/components/ui/form.tsx b/resources/js/components/ui/form.tsx index 5ec069d..be50876 100644 --- a/resources/js/components/ui/form.tsx +++ b/resources/js/components/ui/form.tsx @@ -1,12 +1,12 @@ -import type { FormProps as FormPrimitiveProps } from 'react-aria-components'; -import { Form as FormPrimitive } from 'react-aria-components'; +import type { FormProps as FormPrimitiveProps } from "react-aria-components" +import { Form as FormPrimitive } from "react-aria-components" interface FormProps extends FormPrimitiveProps { - ref?: React.RefObject<HTMLFormElement>; + ref?: React.RefObject<HTMLFormElement> } const Form = ({ ref, ...props }: FormProps) => { - return <FormPrimitive ref={ref} {...props} />; -}; + return <FormPrimitive ref={ref} {...props} /> +} -export { Form }; -export type { FormProps }; +export { Form } +export type { FormProps } diff --git a/resources/js/components/ui/heading.tsx b/resources/js/components/ui/heading.tsx index 33aea73..77e0b6c 100644 --- a/resources/js/components/ui/heading.tsx +++ b/resources/js/components/ui/heading.tsx @@ -1,44 +1,46 @@ -import { tv } from 'tailwind-variants'; +import { tv } from "tailwind-variants" const headingStyles = tv({ - base: 'font-sans text-fg tracking-tight', + base: "font-sans text-fg tracking-tight", variants: { level: { - 1: 'font-bold text-xl sm:text-2xl', - 2: 'font-semibold text-lg sm:text-xl', - 3: 'font-semibold text-base sm:text-lg', - 4: 'font-semibold text-base' + 1: "font-bold text-xl sm:text-2xl", + 2: "font-semibold text-lg sm:text-xl", + 3: "font-semibold text-base sm:text-lg", + 4: "font-semibold text-base", }, tracking: { - tighter: 'tracking-tighter', - tight: 'tracking-tight', - normal: 'tracking-normal', - wide: 'tracking-wide', - wider: 'tracking-wider', - widest: 'tracking-widest' - } - } -}); -type HeadingType = { level?: 1 | 2 | 3 | 4 } & React.ComponentPropsWithoutRef<'h1' | 'h2' | 'h3' | 'h4'>; + tighter: "tracking-tighter", + tight: "tracking-tight", + normal: "tracking-normal", + wide: "tracking-wide", + wider: "tracking-wider", + widest: "tracking-widest", + }, + }, +}) +type HeadingType = { level?: 1 | 2 | 3 | 4 } & React.ComponentPropsWithoutRef< + "h1" | "h2" | "h3" | "h4" +> interface HeadingProps extends HeadingType { - tracking?: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest'; - className?: string | undefined; + tracking?: "tighter" | "tight" | "normal" | "wide" | "wider" | "widest" + className?: string | undefined } -const Heading = ({ className, tracking = 'normal', level = 1, ...props }: HeadingProps) => { - const Element: `h${typeof level}` = `h${level}`; +const Heading = ({ className, tracking = "normal", level = 1, ...props }: HeadingProps) => { + const Element: `h${typeof level}` = `h${level}` return ( <Element className={headingStyles({ level, tracking, - className + className, })} {...props} /> - ); -}; + ) +} -export { Heading }; -export type { HeadingProps }; +export { Heading } +export type { HeadingProps } diff --git a/resources/js/components/ui/index.ts b/resources/js/components/ui/index.ts index 01a66c0..52678ab 100644 --- a/resources/js/components/ui/index.ts +++ b/resources/js/components/ui/index.ts @@ -1,27 +1,27 @@ -export * from './avatar'; -export * from './button'; -export * from './card'; -export * from './checkbox'; -export * from './container'; -export * from './dialog'; -export * from './dropdown'; -export * from './field'; -export * from './form'; -export * from './heading'; -export * from './keyboard'; -export * from './link'; -export * from './list-box'; -export * from './loader'; -export * from './menu'; -export * from './modal'; -export * from './navbar'; -export * from './pagination'; -export * from './popover'; -export * from './primitive'; -export * from './select'; -export * from './separator'; -export * from './sheet'; -export * from './table'; -export * from './text-field'; -export * from './toast'; -export * from './visually-hidden'; +export * from "./avatar" +export * from "./button" +export * from "./card" +export * from "./checkbox" +export * from "./container" +export * from "./dialog" +export * from "./dropdown" +export * from "./field" +export * from "./form" +export * from "./heading" +export * from "./keyboard" +export * from "./link" +export * from "./list-box" +export * from "./loader" +export * from "./menu" +export * from "./modal" +export * from "./navbar" +export * from "./pagination" +export * from "./popover" +export * from "./primitive" +export * from "./select" +export * from "./separator" +export * from "./sheet" +export * from "./table" +export * from "./text-field" +export * from "./toast" +export * from "./visually-hidden" diff --git a/resources/js/components/ui/keyboard.tsx b/resources/js/components/ui/keyboard.tsx index 1006390..ed46ef6 100644 --- a/resources/js/components/ui/keyboard.tsx +++ b/resources/js/components/ui/keyboard.tsx @@ -1,34 +1,37 @@ -import { Keyboard as KeyboardPrimitive } from 'react-aria-components'; -import { tv } from 'tailwind-variants'; +import { Keyboard as KeyboardPrimitive } from "react-aria-components" +import { tv } from "tailwind-variants" const keyboardStyles = tv({ slots: { - base: 'hidden text-current/70 group-data-focused:text-fg group-data-hovered:text-fg group-data-disabled:opacity-50 group-data-focused:opacity-90 lg:inline-flex lg:inline-flex forced-colors:group-data-focused:text-[HighlightText]', - kbd: 'inline-grid min-h-5 min-w-[2ch] place-content-center rounded text-center font-sans text-[.75rem] uppercase' - } -}); + base: "hidden text-current/70 group-data-focused:text-fg group-data-hovered:text-fg group-data-disabled:opacity-50 group-data-focused:opacity-90 lg:inline-flex forced-colors:group-data-focused:text-[HighlightText]", + kbd: "inline-grid min-h-5 min-w-[2ch] place-content-center rounded text-center font-sans text-[.75rem] uppercase", + }, +}) -const { base, kbd } = keyboardStyles(); +const { base, kbd } = keyboardStyles() interface KeyboardProps extends React.HTMLAttributes<HTMLElement> { - keys: string | string[]; + keys: string | string[] classNames?: { - base?: string; - kbd?: string; - }; + 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 })}> + {(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 }; -export type { KeyboardProps }; +export { Keyboard } +export type { KeyboardProps } diff --git a/resources/js/components/ui/link.tsx b/resources/js/components/ui/link.tsx index 117e0b1..1881a21 100644 --- a/resources/js/components/ui/link.tsx +++ b/resources/js/components/ui/link.tsx @@ -1,26 +1,30 @@ -import { composeRenderProps, Link as LinkPrimitive, type LinkProps as LinkPrimitiveProps } from 'react-aria-components'; -import { tv } from 'tailwind-variants'; +import { + Link as LinkPrimitive, + type LinkProps as LinkPrimitiveProps, + composeRenderProps, +} from "react-aria-components" +import { tv } from "tailwind-variants" -import { focusButtonStyles } from './primitive'; +import { focusButtonStyles } from "./primitive" const linkStyles = tv({ extend: focusButtonStyles, - base: 'transition-[color,_opacity] data-disabled:cursor-default data-disabled:opacity-60 forced-colors:data-disabled:text-[GrayText]', + base: "transition-[color,_opacity] data-disabled:cursor-default data-disabled:opacity-60 forced-colors:data-disabled:text-[GrayText]", variants: { intent: { - unstyled: 'text-current', - primary: 'text-fg data-hovered:underline', - secondary: 'text-muted-fg data-hovered:text-secondary-fg' - } + unstyled: "text-current", + primary: "text-fg data-hovered:underline", + secondary: "text-muted-fg data-hovered:text-secondary-fg", + }, }, defaultVariants: { - intent: 'unstyled' - } -}); + intent: "unstyled", + }, +}) interface LinkProps extends LinkPrimitiveProps { - intent?: 'primary' | 'secondary' | 'unstyled'; - ref?: React.RefObject<HTMLAnchorElement>; + intent?: "primary" | "secondary" | "unstyled" + ref?: React.RefObject<HTMLAnchorElement> } const Link = ({ className, ref, ...props }: LinkProps) => { @@ -29,13 +33,15 @@ const Link = ({ className, ref, ...props }: LinkProps) => { ref={ref} {...props} className={composeRenderProps(className, (className, renderProps) => - linkStyles({ ...renderProps, intent: props.intent, className }) + linkStyles({ ...renderProps, intent: props.intent, className }), )} > - {(values) => <>{typeof props.children === 'function' ? props.children(values) : props.children}</>} + {(values) => ( + <>{typeof props.children === "function" ? props.children(values) : props.children}</> + )} </LinkPrimitive> - ); -}; + ) +} -export { Link }; -export type { LinkProps }; +export { Link, linkStyles } +export type { LinkProps } diff --git a/resources/js/components/ui/list-box.tsx b/resources/js/components/ui/list-box.tsx index 1e460ea..bc8783f 100644 --- a/resources/js/components/ui/list-box.tsx +++ b/resources/js/components/ui/list-box.tsx @@ -1,114 +1,104 @@ -import { IconCheck, IconHamburger } from 'justd-icons'; -import type { ListBoxItemProps as ListBoxItemPrimitiveProps, ListBoxProps } from 'react-aria-components'; -import { composeRenderProps, ListBoxItem, ListBox as ListBoxPrimitive } from 'react-aria-components'; -import { tv } from 'tailwind-variants'; +import { IconCheck, IconHamburger } from "justd-icons" +import type { + ListBoxItemProps as ListBoxItemPrimitiveProps, + ListBoxProps, +} from "react-aria-components" +import { + ListBoxItem as ListBoxItemPrimitive, + ListBox as ListBoxPrimitive, + composeRenderProps, +} from "react-aria-components" -import { cn } from '@/utils/classes'; -import { DropdownItemDetails, DropdownSection } from './dropdown'; -import { composeTailwindRenderProps } from './primitive'; - -const listBoxStyles = tv({ - base: 'flex max-h-96 w-full min-w-56 flex-col gap-y-1 overflow-y-auto rounded-xl border p-1 shadow-lg outline-hidden [scrollbar-width:thin] [&::-webkit-scrollbar]:size-0.5' -}); +import { cn } from "@/utils/classes" +import { DropdownItemDetails, DropdownLabel, DropdownSection, dropdownItemStyles } from "./dropdown" const ListBox = <T extends object>({ className, ...props }: ListBoxProps<T>) => ( <ListBoxPrimitive {...props} - className={composeRenderProps(className, (className, renderProps) => listBoxStyles({ ...renderProps, className }))} + className={composeRenderProps(className, (className) => + cn( + [ + "flex max-h-96 w-full min-w-56 flex-col gap-y-1 overflow-y-auto rounded-xl border p-1 shadow-lg outline-hidden [scrollbar-width:thin] [&::-webkit-scrollbar]:size-0.5", + "grid grid-cols-[auto_1fr] overflow-auto *:[[role='group']+[role=group]]:mt-4 *:[[role='group']+[role=separator]]:mt-1", + ], + className, + ), + )} /> -); +) -const listBoxItemStyles = tv({ - base: 'lbi relative cursor-pointer rounded-[calc(var(--radius-lg)-1px)] p-2 text-base outline-hidden sm:text-sm', - variants: { - isFocusVisible: { - true: 'bg-secondary text-accent-fg text-accent-fg/70' - }, - isHovered: { - true: 'bg-accent text-accent-fg [&:hover_[slot=description]]:text-accent-fg/70 [&:hover_[slot=label]]:text-accent-fg [&_.text-muted-fg]:text-accent-fg/80' - }, - isFocused: { - true: 'bg-accent text-accent-fg **:data-[slot=icon]:text-accent-fg **:data-[slot=label]:text-accent-fg [&_.text-muted-fg]:text-accent-fg/80' - }, - isSelected: { - true: 'bg-accent text-accent-fg **:data-[slot=icon]:text-accent-fg **:data-[slot=label]:text-accent-fg [&_.text-muted-fg]:text-accent-fg/80' - }, - isDragging: { true: 'cursor-grabbing bg-secondary text-secondary-fg' }, - isDisabled: { - true: 'cursor-default text-muted-fg opacity-70' - } - } -}); +// const listBoxItemStyles = tv({ +// base: "lbi col-span-full relative cursor-pointer rounded-[calc(var(--radius-lg)-1px)] p-2 text-base outline-hidden sm:text-sm", +// variants: { +// isFocusVisible: { +// true: "bg-secondary text-accent-fg", +// }, +// isHovered: { +// true: "bg-accent text-accent-fg [&:hover_[slot=description]]:text-accent-fg/70 [&:hover_[slot=label]]:text-accent-fg [&_.text-muted-fg]:text-accent-fg/80", +// }, +// isFocused: { +// true: "bg-accent text-accent-fg **:data-[slot=icon]:text-accent-fg **:data-[slot=label]:text-accent-fg [&_.text-muted-fg]:text-accent-fg/80", +// }, +// isSelected: { +// true: "bg-accent text-accent-fg **:data-[slot=icon]:text-accent-fg **:data-[slot=label]:text-accent-fg [&_.text-muted-fg]:text-accent-fg/80", +// }, +// isDragging: { true: "cursor-grabbing bg-secondary text-secondary-fg" }, +// isDisabled: { +// true: "cursor-default text-muted-fg opacity-70", +// }, +// }, +// }) interface ListBoxItemProps<T extends object> extends ListBoxItemPrimitiveProps<T> { - className?: string; + className?: string } -const Item = <T extends object>({ children, className, ...props }: ListBoxItemProps<T>) => { - const textValue = typeof children === 'string' ? children : undefined; +const ListBoxItem = <T extends object>({ children, className, ...props }: ListBoxItemProps<T>) => { + const textValue = typeof children === "string" ? children : undefined return ( - <ListBoxItem + <ListBoxItemPrimitive textValue={textValue} {...props} className={composeRenderProps(className, (className, renderProps) => - listBoxItemStyles({ + dropdownItemStyles({ ...renderProps, - className - }) + className, + }), )} > - {(values) => ( - <div className="flex items-center gap-2"> - <> - {values.allowsDragging && ( - <IconHamburger - className={cn( - 'size-4 shrink-0 text-muted-fg transition', - values.isFocused && 'text-fg', - values.isDragging && 'text-fg', - values.isSelected && 'text-accent-fg/70' - )} - /> - )} - <div className="flex flex-col"> - {typeof children === 'function' ? children(values) : children} - - {values.isSelected && ( - <span className="absolute top-3 right-2 animate-in lg:top-2.5"> - <IconCheck /> - </span> + {({ allowsDragging, isSelected, isFocused, isDragging }) => ( + <> + {allowsDragging && ( + <IconHamburger + className={cn( + "size-4 shrink-0 text-muted-fg transition", + isFocused && "text-fg", + isDragging && "text-fg", + isSelected && "text-accent-fg/70", )} - </div> - </> - </div> + /> + )} + {isSelected && <IconCheck className="-mx-0.5 mr-2" data-slot="checked-icon" />} + {typeof children === "string" ? <DropdownLabel>{children}</DropdownLabel> : children} + </> )} - </ListBoxItem> - ); -}; - -type ListBoxPickerProps<T> = ListBoxProps<T>; + </ListBoxItemPrimitive> + ) +} -const ListBoxPicker = <T extends object>({ className, ...props }: ListBoxPickerProps<T>) => { +type ListBoxSectionProps = React.ComponentProps<typeof DropdownSection> +const ListBoxSection = ({ className, ...props }: ListBoxSectionProps) => { return ( - <ListBoxPrimitive - className={composeTailwindRenderProps( - className, - 'grid max-h-72 grid-cols-[auto_1fr] overflow-auto p-1 outline-hidden' - )} - {...props} - /> - ); -}; + <DropdownSection className={cn(className, "[&_.lbi:last-child]:-mb-1.5 gap-y-1")} {...props} /> + ) +} -const Section = ({ className, ...props }: React.ComponentProps<typeof DropdownSection>) => { - return <DropdownSection className={cn(className, '[&_.lbi:last-child]:-mb-1.5 gap-y-1')} {...props} />; -}; +const ListBoxItemDetails = DropdownItemDetails -ListBox.Section = Section; -ListBox.ItemDetails = DropdownItemDetails; -ListBox.Item = Item; -ListBox.Picker = ListBoxPicker; +ListBox.Section = ListBoxSection +ListBox.ItemDetails = ListBoxItemDetails +ListBox.Item = ListBoxItem -export { ListBox, listBoxStyles }; -export type { ListBoxItemProps, ListBoxPickerProps }; +export { ListBox } +export type { ListBoxItemProps, ListBoxSectionProps } diff --git a/resources/js/components/ui/loader.tsx b/resources/js/components/ui/loader.tsx index 7a5056f..24bddd4 100644 --- a/resources/js/components/ui/loader.tsx +++ b/resources/js/components/ui/loader.tsx @@ -1,38 +1,38 @@ -import { cn } from '@/utils/classes'; -import { IconLoader } from 'justd-icons'; -import { ProgressBar } from 'react-aria-components'; -import type { VariantProps } from 'tailwind-variants'; -import { tv } from 'tailwind-variants'; +import { cn } from "@/utils/classes" +import { IconLoader } from "justd-icons" +import { ProgressBar } from "react-aria-components" +import type { VariantProps } from "tailwind-variants" +import { tv } from "tailwind-variants" const loaderStyles = tv({ - base: 'relative', + base: "relative", variants: { intent: { - current: 'text-current', - primary: 'text-primary', - secondary: 'text-muted-fg', - success: 'text-success', - warning: 'text-warning', - danger: 'text-danger' + current: "text-current", + primary: "text-primary", + secondary: "text-muted-fg", + success: "text-success", + warning: "text-warning", + danger: "text-danger", }, size: { - small: 'size-4', - medium: 'size-6', - large: 'size-8', - 'extra-large': 'size-10' - } + small: "size-4", + medium: "size-6", + large: "size-8", + "extra-large": "size-10", + }, }, defaultVariants: { - intent: 'current', - size: 'small' - } -}); + intent: "current", + size: "small", + }, +}) -type LoaderVariantProps = VariantProps<typeof loaderStyles>; +type LoaderVariantProps = VariantProps<typeof loaderStyles> const Bars = ({ className, ...props }: React.SVGProps<SVGSVGElement>) => ( <svg - className={cn('size-4', className)} + className={cn("size-4", className)} data-slot="icon" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" @@ -130,10 +130,10 @@ const Bars = ({ className, ...props }: React.SVGProps<SVGSVGElement>) => ( /> </rect> </svg> -); -const Ring = (props: React.SVGProps<SVGSVGElement>) => <IconLoader {...props} />; +) +const Ring = (props: React.SVGProps<SVGSVGElement>) => <IconLoader {...props} /> const Spin = ({ className, ...props }: React.SVGProps<SVGSVGElement>) => ( - <svg className={cn('size-4', className)} data-slot="icon" viewBox="0 0 2400 2400" {...props}> + <svg className={cn("size-4", className)} data-slot="icon" viewBox="0 0 2400 2400" {...props}> <g strokeWidth="200" strokeLinecap="round" fill="none"> <line x1="1200" y1="600" x2="1200" y2="100" /> <line opacity="0.5" x1="1200" y1="2300" x2="1200" y2="1800" /> @@ -160,33 +160,33 @@ const Spin = ({ className, ...props }: React.SVGProps<SVGSVGElement>) => ( /> </g> </svg> -); +) const LOADERS = { bars: Bars, ring: Ring, - spin: Spin -}; + spin: Spin, +} -const DEFAULT_SPINNER = 'spin'; +const DEFAULT_SPINNER = "spin" interface LoaderProps - extends Omit<React.ComponentPropsWithoutRef<'svg'>, 'display' | 'opacity' | 'intent'>, + extends Omit<React.ComponentPropsWithoutRef<"svg">, "display" | "opacity" | "intent">, LoaderVariantProps { - variant?: keyof typeof LOADERS; - percentage?: number; - isIndeterminate?: boolean; - formatOptions?: Intl.NumberFormatOptions; - ref?: React.RefObject<SVGSVGElement>; + variant?: keyof typeof LOADERS + percentage?: number + isIndeterminate?: boolean + formatOptions?: Intl.NumberFormatOptions + ref?: React.RefObject<SVGSVGElement> } const Loader = ({ isIndeterminate = true, ref, ...props }: LoaderProps) => { - const { className, variant = DEFAULT_SPINNER, intent, size, ...spinnerProps } = props; - const LoaderPrimitive = LOADERS[variant in LOADERS ? variant : DEFAULT_SPINNER]; + const { className, variant = DEFAULT_SPINNER, intent, size, ...spinnerProps } = props + const LoaderPrimitive = LOADERS[variant in LOADERS ? variant : DEFAULT_SPINNER] return ( <ProgressBar - aria-label={props['aria-label'] ?? 'Loading...'} + aria-label={props["aria-label"] ?? "Loading..."} formatOptions={props.formatOptions} isIndeterminate={isIndeterminate} > @@ -196,16 +196,16 @@ const Loader = ({ isIndeterminate = true, ref, ...props }: LoaderProps) => { intent, size, className: cn([ - ['ring'].includes(variant) && 'animate-spin', - variant === 'spin' && 'stroke-current', - className - ]) + ["ring"].includes(variant) && "animate-spin", + variant === "spin" && "stroke-current", + className, + ]), })} ref={ref} {...spinnerProps} /> </ProgressBar> - ); -}; + ) +} -export { Loader }; +export { Loader } diff --git a/resources/js/components/ui/menu.tsx b/resources/js/components/ui/menu.tsx index 59e67ad..75f4220 100644 --- a/resources/js/components/ui/menu.tsx +++ b/resources/js/components/ui/menu.tsx @@ -1,47 +1,47 @@ -import { createContext, use } from 'react'; +import { createContext, use } from "react" -import { IconBulletFill, IconCheck, IconChevronLgRight } from 'justd-icons'; +import { IconBulletFill, IconCheck, IconChevronLgRight } from "justd-icons" import type { ButtonProps, MenuItemProps as MenuItemPrimitiveProps, MenuProps as MenuPrimitiveProps, MenuSectionProps as MenuSectionPrimitiveProps, MenuTriggerProps as MenuTriggerPrimitiveProps, - PopoverProps -} from 'react-aria-components'; + PopoverProps, +} from "react-aria-components" import { Button, Collection, - composeRenderProps, Header, MenuItem as MenuItemPrimitive, Menu as MenuPrimitive, MenuSection as MenuSectionPrimitive, MenuTrigger as MenuTriggerPrimitive, - SubmenuTrigger as SubmenuTriggerPrimitive -} from 'react-aria-components'; -import type { VariantProps } from 'tailwind-variants'; -import { tv } from 'tailwind-variants'; + SubmenuTrigger as SubmenuTriggerPrimitive, + composeRenderProps, +} from "react-aria-components" +import type { VariantProps } from "tailwind-variants" +import { tv } from "tailwind-variants" -import { cn } from '@/utils/classes'; +import { cn } from "@/utils/classes" import { DropdownItemDetails, - dropdownItemStyles, DropdownKeyboard, DropdownLabel, + DropdownSeparator, + dropdownItemStyles, dropdownSectionStyles, - DropdownSeparator -} from './dropdown'; -import { Popover } from './popover'; +} from "./dropdown" +import { Popover } from "./popover" interface MenuContextProps { - respectScreen: boolean; + respectScreen: boolean } -const MenuContext = createContext<MenuContextProps>({ respectScreen: true }); +const MenuContext = createContext<MenuContextProps>({ respectScreen: true }) interface MenuProps extends MenuTriggerPrimitiveProps { - respectScreen?: boolean; + respectScreen?: boolean } const Menu = ({ respectScreen = true, ...props }: MenuProps) => { @@ -49,41 +49,47 @@ const Menu = ({ respectScreen = true, ...props }: MenuProps) => { <MenuContext value={{ respectScreen }}> <MenuTriggerPrimitive {...props}>{props.children}</MenuTriggerPrimitive> </MenuContext> - ); -}; + ) +} const MenuSubMenu = ({ delay = 0, ...props }) => ( <SubmenuTriggerPrimitive {...props} delay={delay}> {props.children} </SubmenuTriggerPrimitive> -); +) const menuStyles = tv({ slots: { menu: "grid max-h-[calc(var(--visual-viewport-height)-10rem)] grid-cols-[auto_1fr] overflow-auto rounded-xl p-1 outline-hidden [clip-path:inset(0_0_0_0_round_calc(var(--radius-lg)-2px))] sm:max-h-[inherit] *:[[role='group']+[role=group]]:mt-4 *:[[role='group']+[role=separator]]:mt-1", - popover: 'z-50 p-0 shadow-xs outline-hidden sm:min-w-40', - trigger: ['relative inline text-left outline-hidden data-focus-visible:ring-1 data-focus-visible:ring-primary'] - } -}); + popover: "z-50 p-0 shadow-xs outline-hidden sm:min-w-40", + trigger: [ + "relative inline text-left outline-hidden data-focus-visible:ring-1 data-focus-visible:ring-primary", + ], + }, +}) -const { menu, popover, trigger } = menuStyles(); +const { menu, popover, trigger } = menuStyles() interface MenuTriggerProps extends ButtonProps { - className?: string; - ref?: React.Ref<HTMLButtonElement>; + className?: string + ref?: React.Ref<HTMLButtonElement> } const MenuTrigger = ({ className, ref, ...props }: MenuTriggerProps) => ( <Button ref={ref} data-slot="menu-trigger" className={trigger({ className })} {...props}> - {(values) => <>{typeof props.children === 'function' ? props.children(values) : props.children}</>} + {(values) => ( + <>{typeof props.children === "function" ? props.children(values) : props.children}</> + )} </Button> -); - -interface MenuContentProps<T> extends Omit<PopoverProps, 'children' | 'style'>, MenuPrimitiveProps<T> { - className?: string; - popoverClassName?: string; - showArrow?: boolean; - respectScreen?: boolean; +) + +interface MenuContentProps<T> + extends Omit<PopoverProps, "children" | "style">, + MenuPrimitiveProps<T> { + className?: string + popoverClassName?: string + showArrow?: boolean + respectScreen?: boolean } const MenuContent = <T extends object>({ @@ -92,27 +98,27 @@ const MenuContent = <T extends object>({ popoverClassName, ...props }: MenuContentProps<T>) => { - const { respectScreen } = use(MenuContext); + const { respectScreen } = use(MenuContext) return ( <Popover.Content respectScreen={respectScreen} showArrow={showArrow} className={popover({ - className: popoverClassName + className: popoverClassName, })} {...props} > <MenuPrimitive className={menu({ className })} {...props} /> </Popover.Content> - ); -}; + ) +} interface MenuItemProps extends MenuItemPrimitiveProps, VariantProps<typeof dropdownItemStyles> { - isDanger?: boolean; + isDanger?: boolean } const MenuItem = ({ className, isDanger = false, children, ...props }: MenuItemProps) => { - const textValue = props.textValue || (typeof children === 'string' ? children : undefined); + const textValue = props.textValue || (typeof children === "string" ? children : undefined) return ( <MenuItemPrimitive className={composeRenderProps(className, (className, renderProps) => @@ -120,22 +126,22 @@ const MenuItem = ({ className, isDanger = false, children, ...props }: MenuItemP ...renderProps, className: renderProps.hasSubmenu ? cn([ - 'data-open:data-danger:bg-danger/10 data-open:data-danger:text-danger', - 'data-open:bg-accent data-open:text-accent-fg data-open:*:data-[slot=icon]:text-accent-fg data-open:*:[.text-muted-fg]:text-accent-fg', - className + "data-open:data-danger:bg-danger/10 data-open:data-danger:text-danger", + "data-open:bg-accent data-open:text-accent-fg data-open:*:data-[slot=icon]:text-accent-fg data-open:*:[.text-muted-fg]:text-accent-fg", + className, ]) - : className - }) + : className, + }), )} textValue={textValue} - data-danger={isDanger ? 'true' : undefined} + data-danger={isDanger ? "true" : undefined} {...props} > {(values) => ( <> {values.isSelected && ( <> - {values.selectionMode === 'single' && ( + {values.selectionMode === "single" && ( <span data-slot="bullet-icon" className="-mx-0.5 mr-2 flex size-4 shrink-0 items-center justify-center **:data-[slot=indicator]:size-2.5 **:data-[slot=indicator]:shrink-0" @@ -143,67 +149,69 @@ const MenuItem = ({ className, isDanger = false, children, ...props }: MenuItemP <IconBulletFill data-slot="indicator" /> </span> )} - {values.selectionMode === 'multiple' && ( + {values.selectionMode === "multiple" && ( <IconCheck className="-mx-0.5 mr-2 size-4" data-slot="checked-icon" /> )} </> )} - {typeof children === 'function' ? children(values) : children} + {typeof children === "function" ? children(values) : children} - {values.hasSubmenu && <IconChevronLgRight data-slot="chevron" className="absolute right-2 size-3.5" />} + {values.hasSubmenu && ( + <IconChevronLgRight data-slot="chevron" className="absolute right-2 size-3.5" /> + )} </> )} </MenuItemPrimitive> - ); -}; + ) +} export interface MenuHeaderProps extends React.ComponentProps<typeof Header> { - separator?: boolean; + separator?: boolean } const MenuHeader = ({ className, separator = false, ...props }: MenuHeaderProps) => ( <Header className={cn( - 'col-span-full px-2.5 py-2 font-semibold text-base sm:text-sm', - separator && '-mx-1 mb-1 border-b sm:px-3 sm:pb-[0.625rem]', - className + "col-span-full px-2.5 py-2 font-semibold text-base sm:text-sm", + separator && "-mx-1 mb-1 border-b sm:px-3 sm:pb-[0.625rem]", + className, )} {...props} /> -); +) -const { section, header } = dropdownSectionStyles(); +const { section, header } = dropdownSectionStyles() interface MenuSectionProps<T> extends MenuSectionPrimitiveProps<T> { - ref?: React.Ref<HTMLDivElement>; - title?: string; + ref?: React.Ref<HTMLDivElement> + title?: string } const MenuSection = <T extends object>({ className, ref, ...props }: MenuSectionProps<T>) => { return ( <MenuSectionPrimitive ref={ref} className={section({ className })} {...props}> - {'title' in props && <Header className={header()}>{props.title}</Header>} + {"title" in props && <Header className={header()}>{props.title}</Header>} <Collection items={props.items}>{props.children}</Collection> </MenuSectionPrimitive> - ); -}; - -const MenuSeparator = DropdownSeparator; -const MenuItemDetails = DropdownItemDetails; -const MenuKeyboard = DropdownKeyboard; -const MenuLabel = DropdownLabel; - -Menu.Keyboard = MenuKeyboard; -Menu.Content = MenuContent; -Menu.Header = MenuHeader; -Menu.Item = MenuItem; -Menu.Section = MenuSection; -Menu.Separator = MenuSeparator; -Menu.ItemDetails = MenuItemDetails; -Menu.Label = MenuLabel; -Menu.Trigger = MenuTrigger; -Menu.Submenu = MenuSubMenu; - -export { Menu }; -export type { MenuContentProps, MenuItemProps, MenuProps, MenuSectionProps, MenuTriggerProps }; + ) +} + +const MenuSeparator = DropdownSeparator +const MenuItemDetails = DropdownItemDetails +const MenuKeyboard = DropdownKeyboard +const MenuLabel = DropdownLabel + +Menu.Keyboard = MenuKeyboard +Menu.Content = MenuContent +Menu.Header = MenuHeader +Menu.Item = MenuItem +Menu.Section = MenuSection +Menu.Separator = MenuSeparator +Menu.ItemDetails = MenuItemDetails +Menu.Label = MenuLabel +Menu.Trigger = MenuTrigger +Menu.Submenu = MenuSubMenu + +export { Menu } +export type { MenuContentProps, MenuItemProps, MenuProps, MenuSectionProps, MenuTriggerProps } diff --git a/resources/js/components/ui/modal.tsx b/resources/js/components/ui/modal.tsx index 1bc88a0..6aa91d6 100644 --- a/resources/js/components/ui/modal.tsx +++ b/resources/js/components/ui/modal.tsx @@ -1,128 +1,145 @@ -import type { DialogProps, DialogTriggerProps, ModalOverlayProps } from 'react-aria-components'; -import { composeRenderProps, DialogTrigger, ModalOverlay, Modal as ModalPrimitive } from 'react-aria-components'; -import { tv, type VariantProps } from 'tailwind-variants'; +import type { DialogProps, DialogTriggerProps, ModalOverlayProps } from "react-aria-components" +import { + DialogTrigger, + ModalOverlay, + Modal as ModalPrimitive, + composeRenderProps, +} from "react-aria-components" +import { type VariantProps, tv } from "tailwind-variants" -import { Dialog } from './dialog'; +import { Dialog } from "./dialog" -const overlay = tv({ +const Modal = (props: DialogTriggerProps) => { + return <DialogTrigger {...props} /> +} + +const modalOverlayStyles = tv({ base: [ - 'fixed top-0 left-0 isolate z-50 h-(--visual-viewport-height) w-full', - 'flex items-end justify-end bg-fg/15 text-center sm:items-center sm:justify-center dark:bg-bg/40', - '[--visual-viewport-vertical-padding:16px] sm:[--visual-viewport-vertical-padding:32px]' + "fixed top-0 left-0 isolate z-50 h-(--visual-viewport-height) w-full", + "flex items-end justify-end bg-fg/15 text-center sm:items-center sm:justify-center dark:bg-bg/40", + "[--visual-viewport-vertical-padding:16px] sm:[--visual-viewport-vertical-padding:32px]", ], variants: { isBlurred: { - true: 'bg-bg supports-backdrop-filter:bg-bg/15 supports-backdrop-filter:backdrop-blur dark:supports-backdrop-filter:bg-bg/40' + true: "bg-bg supports-backdrop-filter:bg-bg/15 supports-backdrop-filter:backdrop-blur dark:supports-backdrop-filter:bg-bg/40", }, isEntering: { - true: 'fade-in animate-in duration-200 ease-out' + true: "fade-in animate-in duration-200 ease-out", }, isExiting: { - true: 'fade-out animate-out duration-150 ease-in' - } - } -}); -const content = tv({ + true: "fade-out animate-out ease-in", + }, + }, +}) +const modalContentStyles = tv({ base: [ - 'max-h-full w-full rounded-t-2xl bg-overlay text-left align-middle text-overlay-fg shadow-lg ring-1 ring-fg/5', - 'overflow-hidden sm:rounded-2xl dark:ring-border' + "max-h-full w-full rounded-t-2xl bg-overlay text-left align-middle text-overlay-fg shadow-lg ring-1 ring-fg/5", + "overflow-hidden sm:rounded-2xl dark:ring-border", ], variants: { isEntering: { - true: ['fade-in slide-in-from-bottom animate-in duration-200 ease-out', 'sm:zoom-in-95 sm:slide-in-from-bottom-0'] + true: [ + "fade-in slide-in-from-bottom animate-in duration-200 ease-out", + "sm:zoom-in-95 sm:slide-in-from-bottom-0", + ], }, isExiting: { - true: ['slide-out-to-bottom sm:slide-out-to-bottom-0 sm:zoom-out-95 animate-out duration-150 ease-in'] + true: [ + "slide-out-to-bottom sm:slide-out-to-bottom-0 sm:zoom-out-95 animate-out duration-150 ease-in", + ], }, size: { - xs: 'sm:max-w-xs', - sm: 'sm:max-w-sm', - md: 'sm:max-w-md', - lg: 'sm:max-w-lg', - xl: 'sm:max-w-xl', - '2xl': 'sm:max-w-2xl', - '3xl': 'sm:max-w-3xl', - '4xl': 'sm:max-w-4xl', - '5xl': 'sm:max-w-5xl' - } + xs: "sm:max-w-xs", + sm: "sm:max-w-sm", + md: "sm:max-w-md", + lg: "sm:max-w-lg", + xl: "sm:max-w-xl", + "2xl": "sm:max-w-2xl", + "3xl": "sm:max-w-3xl", + "4xl": "sm:max-w-4xl", + "5xl": "sm:max-w-5xl", + }, }, defaultVariants: { - size: 'lg' - } -}); - -const Modal = (props: DialogTriggerProps) => { - return <DialogTrigger {...props} />; -}; + size: "lg", + }, +}) interface ModalContentProps - extends Omit<React.ComponentProps<typeof Modal>, 'children'>, - Omit<ModalOverlayProps, 'className' | 'children'>, - VariantProps<typeof content> { - 'aria-label'?: DialogProps['aria-label']; - 'aria-labelledby'?: DialogProps['aria-labelledby']; - role?: DialogProps['role']; - children?: DialogProps['children']; - closeButton?: boolean; - isBlurred?: boolean; + extends Omit<ModalOverlayProps, "className" | "children">, + Pick<DialogProps, "aria-label" | "aria-labelledby" | "role" | "children">, + VariantProps<typeof modalContentStyles> { + closeButton?: boolean + isBlurred?: boolean classNames?: { - overlay?: ModalOverlayProps['className']; - content?: ModalOverlayProps['className']; - }; + overlay?: ModalOverlayProps["className"] + content?: ModalOverlayProps["className"] + } } const ModalContent = ({ classNames, - isDismissable = true, + isDismissable: isDismissableInternal, isBlurred = false, children, size, - role, + role = "dialog", closeButton = true, ...props }: ModalContentProps) => { - const _isDismissable = role === 'alertdialog' ? false : isDismissable; + const isDismissable = isDismissableInternal ?? role !== "alertdialog" + return ( <ModalOverlay - isDismissable={_isDismissable} - className={composeRenderProps(classNames?.overlay, (className, renderProps) => { - return overlay({ + isDismissable={isDismissable} + className={composeRenderProps(classNames?.overlay, (className, renderProps) => + modalOverlayStyles({ ...renderProps, isBlurred, - className - }); - })} + className, + }), + )} {...props} > <ModalPrimitive + isDismissable={isDismissable} className={composeRenderProps(classNames?.content, (className, renderProps) => - content({ + modalContentStyles({ ...renderProps, size, - className - }) + className, + }), )} + {...props} > - <Dialog aria-label={props['aria-label']} role={role}> + <Dialog role={role}> {(values) => ( <> - {typeof children === 'function' ? children(values) : children} - {closeButton && <Dialog.CloseIndicator isDismissable={_isDismissable} />} + {typeof children === "function" ? children(values) : children} + {closeButton && <Dialog.CloseIndicator isDismissable={isDismissable} />} </> )} </Dialog> </ModalPrimitive> </ModalOverlay> - ); -}; + ) +} + +const ModalTrigger = Dialog.Trigger +const ModalHeader = Dialog.Header +const ModalTitle = Dialog.Title +const ModalDescription = Dialog.Description +const ModalFooter = Dialog.Footer +const ModalBody = Dialog.Body +const ModalClose = Dialog.Close -Modal.Trigger = Dialog.Trigger; -Modal.Header = Dialog.Header; -Modal.Title = Dialog.Title; -Modal.Description = Dialog.Description; -Modal.Footer = Dialog.Footer; -Modal.Body = Dialog.Body; -Modal.Close = Dialog.Close; -Modal.Content = ModalContent; +Modal.Trigger = ModalTrigger +Modal.Header = ModalHeader +Modal.Title = ModalTitle +Modal.Description = ModalDescription +Modal.Footer = ModalFooter +Modal.Body = ModalBody +Modal.Close = ModalClose +Modal.Content = ModalContent -export { Modal }; +export { Modal } diff --git a/resources/js/components/ui/navbar.tsx b/resources/js/components/ui/navbar.tsx index de9478a..4b80a00 100644 --- a/resources/js/components/ui/navbar.tsx +++ b/resources/js/components/ui/navbar.tsx @@ -1,57 +1,57 @@ -import { createContext, use, useCallback, useId, useMemo, useState } from 'react'; +import { createContext, use, useCallback, useId, useMemo, useState } from "react" -import { IconHamburger } from 'justd-icons'; -import { LayoutGroup, motion } from 'motion/react'; -import type { LinkProps } from 'react-aria-components'; -import { composeRenderProps, Link } from 'react-aria-components'; -import { tv, type VariantProps } from 'tailwind-variants'; +import { IconHamburger } from "justd-icons" +import { LayoutGroup, motion } from "motion/react" +import type { LinkProps } from "react-aria-components" +import { Link, composeRenderProps } from "react-aria-components" +import { type VariantProps, tv } from "tailwind-variants" -import { cn } from '@/utils/classes'; -import { useMediaQuery } from '@/utils/use-media-query'; -import { Button, type ButtonProps } from './button'; -import { composeTailwindRenderProps } from './primitive'; -import { Sheet } from './sheet'; +import { cn } from "@/utils/classes" +import { useMediaQuery } from "@/utils/use-media-query" +import { Button, type ButtonProps } from "./button" +import { composeTailwindRenderProps } from "./primitive" +import { Sheet } from "./sheet" type NavbarOptions = { - side?: 'left' | 'right'; - isSticky?: boolean; - intent?: 'navbar' | 'floating' | 'inset'; -}; + side?: "left" | "right" + isSticky?: boolean + intent?: "navbar" | "floating" | "inset" +} type NavbarContextProps = { - open: boolean; - setOpen: (open: boolean) => void; - isCompact: boolean; - toggleNavbar: () => void; -} & NavbarOptions; + open: boolean + setOpen: (open: boolean) => void + isCompact: boolean + toggleNavbar: () => void +} & NavbarOptions -const NavbarContext = createContext<NavbarContextProps | null>(null); +const NavbarContext = createContext<NavbarContextProps | null>(null) function useNavbar() { - const context = use(NavbarContext); + const context = use(NavbarContext) if (!context) { - throw new Error('useNavbar must be used within a Navbar.'); + throw new Error("useNavbar must be used within a Navbar.") } - return context; + return context } -interface NavbarProps extends React.ComponentProps<'header'>, NavbarOptions { - defaultOpen?: boolean; - isOpen?: boolean; - onOpenChange?: (open: boolean) => void; +interface NavbarProps extends React.ComponentProps<"header">, NavbarOptions { + defaultOpen?: boolean + isOpen?: boolean + onOpenChange?: (open: boolean) => void } const navbarStyles = tv({ - base: '@container relative isolate flex w-full flex-col', + base: "relative isolate flex w-full flex-col", variants: { intent: { - floating: 'px-2.5 pt-2', - navbar: '', - inset: 'min-h-svh bg-navbar dark:bg-bg' - } - } -}); + floating: "px-2.5 pt-2", + navbar: "", + inset: "min-h-svh bg-navbar dark:bg-bg", + }, + }, +}) const Navbar = ({ children, @@ -59,29 +59,29 @@ const Navbar = ({ onOpenChange: setOpenProp, defaultOpen = false, className, - side = 'left', + side = "left", isSticky = false, - intent = 'navbar', + intent = "navbar", ...props }: NavbarProps) => { - const isCompact = useMediaQuery('(max-width: 765px)'); - const [_open, _setOpen] = useState(defaultOpen); - const open = openProp ?? _open; + const isCompact = useMediaQuery("(max-width: 768px)") + const [_open, _setOpen] = useState(defaultOpen) + const open = openProp ?? _open const setOpen = useCallback( (value: boolean | ((value: boolean) => boolean)) => { if (setOpenProp) { - return setOpenProp?.(typeof value === 'function' ? value(open) : value); + return setOpenProp?.(typeof value === "function" ? value(open) : value) } - _setOpen(value); + _setOpen(value) }, - [setOpenProp, open] - ); + [setOpenProp, open], + ) const toggleNavbar = useCallback(() => { - setOpen((open) => !open); - }, [setOpen]); + setOpen((open) => !open) + }, [setOpen]) const contextValue = useMemo<NavbarContextProps>( () => ({ @@ -91,50 +91,55 @@ const Navbar = ({ toggleNavbar, intent, isSticky, - side + side, }), - [open, setOpen, isCompact, toggleNavbar, intent, isSticky, side] - ); + [open, setOpen, isCompact, toggleNavbar, intent, isSticky, side], + ) return ( <NavbarContext value={contextValue}> - <header data-navbar-intent={intent} className={navbarStyles({ intent, className })} {...props}> + <header + data-navbar-intent={intent} + className={navbarStyles({ intent, className })} + {...props} + > {children} </header> </NavbarContext> - ); -}; + ) +} const navStyles = tv({ base: [ - 'group peer @md:flex hidden h-(--navbar-height) w-full items-center px-4 [--navbar-height:3.5rem]', - '[&>div]:mx-auto @md:[&>div]:flex [&>div]:w-full [&>div]:max-w-[1680px] [&>div]:items-center' + "group peer hidden h-(--navbar-height) w-full items-center px-4 [--navbar-height:3.5rem] md:flex", + "[&>div]:mx-auto [&>div]:w-full [&>div]:max-w-[1680px] [&>div]:items-center md:[&>div]:flex", ], variants: { isSticky: { - true: 'sticky top-0 z-40' + true: "sticky top-0 z-40", }, intent: { floating: - 'mx-auto w-full max-w-7xl rounded-xl border bg-navbar @md:px-4 text-navbar-fg 2xl:max-w-(--breakpoint-2xl)', - navbar: 'border-b bg-navbar @md:px-6 text-navbar-fg', + "mx-auto w-full max-w-7xl rounded-xl border bg-navbar text-navbar-fg md:px-4 2xl:max-w-(--breakpoint-2xl)", + navbar: "border-b bg-navbar text-navbar-fg md:px-6", inset: [ - 'mx-auto @md:px-6', - '[&>div]:mx-auto @md:[&>div]:flex [&>div]:w-full [&>div]:items-center 2xl:[&>div]:max-w-(--breakpoint-2xl)' - ] - } - } -}); - -interface NavbarNavProps extends React.ComponentProps<'div'> { - intent?: 'navbar' | 'floating' | 'inset'; - isSticky?: boolean; - side?: 'left' | 'right'; + "mx-auto md:px-6", + "[&>div]:mx-auto [&>div]:w-full [&>div]:items-center md:[&>div]:flex 2xl:[&>div]:max-w-(--breakpoint-2xl)", + ], + }, + }, +}) + +interface NavbarNavProps extends React.ComponentProps<"div"> { + intent?: "navbar" | "floating" | "inset" + isSticky?: boolean + side?: "left" | "right" + useDefaultResponsive?: boolean } -const NavbarNav = ({ className, ref, ...props }: NavbarNavProps) => { - const { isCompact, side, intent, isSticky, open, setOpen } = useNavbar(); +const NavbarNav = ({ useDefaultResponsive = true, className, ref, ...props }: NavbarNavProps) => { + const { isCompact, side, intent, isSticky, open, setOpen } = useNavbar() - if (isCompact) { + if (isCompact && useDefaultResponsive) { return ( <Sheet isOpen={open} onOpenChange={setOpen} {...props}> <Sheet.Content @@ -142,177 +147,194 @@ const NavbarNav = ({ className, ref, ...props }: NavbarNavProps) => { aria-label="Compact Navbar" data-navbar="compact" classNames={{ - content: 'text-fg [&>button]:hidden' + content: "text-fg [&>button]:hidden", }} - isFloat={intent === 'floating'} + isFloat={intent === "floating"} > - <Sheet.Body className="@md:px-4 px-2">{props.children}</Sheet.Body> + <Sheet.Body className="px-2 md:px-4">{props.children}</Sheet.Body> </Sheet.Content> </Sheet> - ); + ) } return ( - <div data-navbar-nav="true" ref={ref} className={navStyles({ isSticky, intent, className })} {...props}> + <div + data-navbar-nav="true" + ref={ref} + className={navStyles({ isSticky, intent, className })} + {...props} + > <div>{props.children}</div> </div> - ); -}; + ) +} interface NavbarTriggerProps extends ButtonProps { - ref?: React.RefObject<HTMLButtonElement>; + ref?: React.RefObject<HTMLButtonElement> } const NavbarTrigger = ({ className, onPress, ref, ...props }: NavbarTriggerProps) => { - const { toggleNavbar } = useNavbar(); + const { toggleNavbar } = useNavbar() return ( <Button ref={ref} data-navbar-trigger="true" appearance="plain" - aria-label={props['aria-label'] || 'Toggle Navbar'} + aria-label={props["aria-label"] || "Toggle Navbar"} size="square-petite" className={className} onPress={(event) => { - onPress?.(event); - toggleNavbar(); + onPress?.(event) + toggleNavbar() }} {...props} > <IconHamburger /> <span className="sr-only">Toggle Navbar</span> </Button> - ); -}; + ) +} -const Section = ({ className, ...props }: React.ComponentProps<'div'>) => { - const { isCompact } = useNavbar(); - const id = useId(); +const NavbarSection = ({ className, ...props }: React.ComponentProps<"div">) => { + const { isCompact } = useNavbar() + const id = useId() return ( <LayoutGroup id={id}> <div data-navbar-section="true" - className={cn('flex', isCompact ? 'flex-col gap-y-4' : 'flex-row items-center gap-x-3', className)} + className={cn( + "flex", + isCompact ? "flex-col gap-y-4" : "flex-row items-center gap-x-3", + className, + )} {...props} > {props.children} </div> </LayoutGroup> - ); -}; + ) +} const navItemStyles = tv({ base: [ - '*:data-[slot=icon]:-mx-0.5 relative flex cursor-pointer items-center gap-x-2 px-2 @md:text-sm text-muted-fg no-underline outline-hidden transition-colors forced-colors:transform-none forced-colors:outline-0 forced-colors:data-disabled:text-[GrayText]', - 'data-focused:text-fg data-hovered:text-fg data-pressed:text-fg data-focus-visible:outline-1 data-focus-visible:outline-primary', - '**:data-[slot=chevron]:size-4 **:data-[slot=chevron]:transition-transform', - 'data-pressed:**:data-[slot=chevron]:rotate-180 *:data-[slot=icon]:size-4 *:data-[slot=icon]:shrink-0', - 'data-disabled:cursor-default data-disabled:opacity-50 data-disabled:forced-colors:text-[GrayText]' + "*:data-[slot=icon]:-mx-0.5 relative flex cursor-pointer items-center gap-x-2 px-2 text-muted-fg no-underline outline-hidden transition-colors md:text-sm forced-colors:transform-none forced-colors:outline-0 forced-colors:data-disabled:text-[GrayText]", + "data-focused:text-fg data-hovered:text-fg data-pressed:text-fg data-focus-visible:outline-1 data-focus-visible:outline-primary", + "**:data-[slot=chevron]:size-4 **:data-[slot=chevron]:transition-transform", + "data-pressed:**:data-[slot=chevron]:rotate-180 *:data-[slot=icon]:size-4 *:data-[slot=icon]:shrink-0", + "data-disabled:cursor-default data-disabled:opacity-50 data-disabled:forced-colors:text-[GrayText]", ], variants: { isCurrent: { - true: 'cursor-default text-navbar-fg' - } - } -}); + true: "cursor-default text-navbar-fg", + }, + }, +}) interface NavbarItemProps extends LinkProps { - isCurrent?: boolean; + isCurrent?: boolean } -const Item = ({ className, isCurrent, ...props }: NavbarItemProps) => { - const { intent, isCompact } = useNavbar(); +const NavbarItem = ({ className, isCurrent, ...props }: NavbarItemProps) => { + const { intent, isCompact } = useNavbar() return ( <Link data-navbar-item="true" - aria-current={isCurrent ? 'page' : undefined} + aria-current={isCurrent ? "page" : undefined} className={composeRenderProps(className, (className, ...renderProps) => - navItemStyles({ ...renderProps, isCurrent, className }) + navItemStyles({ ...renderProps, isCurrent, className }), )} {...props} > {(values) => ( <> - {typeof props.children === 'function' ? props.children(values) : props.children} + {typeof props.children === "function" ? props.children(values) : props.children} - {(isCurrent || values.isCurrent) && !isCompact && intent !== 'floating' && ( + {(isCurrent || values.isCurrent) && !isCompact && intent !== "floating" && ( <motion.span layoutId="current-indicator" + data-slot="current-indicator" className="absolute inset-x-2 bottom-[calc(var(--navbar-height)*-0.33)] h-0.5 rounded-full bg-fg" /> )} </> )} </Link> - ); -}; + ) +} -const Logo = ({ className, ...props }: LinkProps) => { +const NavbarLogo = ({ className, ...props }: LinkProps) => { return ( <Link className={composeTailwindRenderProps( className, - 'relative @md:mr-4 flex items-center gap-x-2 @md:px-0 px-2 @md:py-0 py-4 text-fg data-focus-visible:outline-1 data-focus-visible:outline-primary data-focused:outline-hidden' + "relative flex items-center gap-x-2 px-2 py-4 text-fg data-focus-visible:outline-1 data-focus-visible:outline-primary data-focused:outline-hidden md:mr-4 md:px-0 md:py-0", )} {...props} /> - ); -}; + ) +} -const Flex = ({ className, ref, ...props }: React.ComponentProps<'div'>) => { - return <div ref={ref} className={cn('flex items-center @md:gap-3 gap-2', className)} {...props} />; -}; +const NavbarFlex = ({ className, ref, ...props }: React.ComponentProps<"div">) => { + return <div ref={ref} className={cn("flex items-center gap-2 md:gap-3", className)} {...props} /> +} const compactStyles = tv({ - base: 'flex @md:hidden justify-between bg-navbar text-navbar-fg peer-has-[[data-navbar-intent=floating]]:border', + base: "flex justify-between bg-navbar text-navbar-fg peer-has-[[data-navbar-intent=floating]]:border md:hidden", variants: { intent: { - floating: 'h-12 rounded-lg border px-3.5', - inset: 'h-14 border-b px-4', - navbar: 'h-14 border-b px-4' - } - } -}); + floating: "h-12 rounded-lg border px-3.5", + inset: "h-14 border-b px-4", + navbar: "h-14 border-b px-4", + }, + }, +}) -interface NavbarCompactProps extends React.ComponentProps<'div'>, VariantProps<typeof compactStyles> { - ref?: React.RefObject<HTMLDivElement>; +interface NavbarCompactProps + extends React.ComponentProps<"div">, + VariantProps<typeof compactStyles> { + ref?: React.RefObject<HTMLDivElement> } const NavbarCompact = ({ className, ref, ...props }: NavbarCompactProps) => { - const { intent } = useNavbar(); - return <div ref={ref} className={compactStyles({ intent, className })} {...props} />; -}; + const { intent } = useNavbar() + return <div ref={ref} className={compactStyles({ intent, className })} {...props} /> +} const insetStyles = tv({ - base: 'grow', + base: "grow", variants: { intent: { - floating: '', - inset: '@md:rounded-lg bg-bg @md:shadow-xs @md:ring-1 @md:ring-fg/15 dark:bg-navbar @md:dark:ring-border', - navbar: '' - } - } -}); + floating: "", + inset: + "bg-bg md:rounded-lg md:shadow-xs md:ring-1 md:ring-fg/15 dark:bg-navbar md:dark:ring-border", + navbar: "", + }, + }, +}) -const Inset = ({ className, ref, ...props }: React.ComponentProps<'div'>) => { - const { intent } = useNavbar(); +const NavbarInset = ({ className, ref, ...props }: React.ComponentProps<"div">) => { + const { intent } = useNavbar() return ( <main ref={ref} data-navbar-intent={intent} - className={cn('flex flex-1 flex-col', intent === 'inset' && 'bg-navbar @md:px-2 pb-2 dark:bg-bg', className)} + className={cn( + "flex flex-1 flex-col", + intent === "inset" && "bg-navbar pb-2 md:px-2 dark:bg-bg", + className, + )} > <div className={insetStyles({ intent, className })}>{props.children}</div> </main> - ); -}; - -Navbar.Nav = NavbarNav; -Navbar.Inset = Inset; -Navbar.Compact = NavbarCompact; -Navbar.Flex = Flex; -Navbar.Trigger = NavbarTrigger; -Navbar.Logo = Logo; -Navbar.Item = Item; -Navbar.Section = Section; - -export { Navbar }; -export type { NavbarCompactProps, NavbarItemProps, NavbarNavProps, NavbarProps, NavbarTriggerProps }; + ) +} + +Navbar.Nav = NavbarNav +Navbar.Inset = NavbarInset +Navbar.Compact = NavbarCompact +Navbar.Flex = NavbarFlex +Navbar.Trigger = NavbarTrigger +Navbar.Logo = NavbarLogo +Navbar.Item = NavbarItem +Navbar.Section = NavbarSection + +export { Navbar } +export type { NavbarCompactProps, NavbarItemProps, NavbarNavProps, NavbarProps, NavbarTriggerProps } diff --git a/resources/js/components/ui/pagination.tsx b/resources/js/components/ui/pagination.tsx index dc214aa..c1d1ff2 100644 --- a/resources/js/components/ui/pagination.tsx +++ b/resources/js/components/ui/pagination.tsx @@ -1,34 +1,40 @@ import { IconChevronLgLeft, IconChevronLgRight, - IconChevronsLgLeft, - IconChevronsLgRight, - IconDotsHorizontal -} from 'justd-icons'; -import type { ListBoxItemProps, ListBoxProps, ListBoxSectionProps } from 'react-aria-components'; -import { composeRenderProps, ListBox, ListBoxItem, ListBoxSection, Separator } from 'react-aria-components'; + IconChevronWallLeft, + IconChevronWallRight, + IconDotsHorizontal, +} from "justd-icons" +import type { ListBoxItemProps, ListBoxProps, ListBoxSectionProps } from "react-aria-components" +import { + ListBox, + ListBoxItem, + ListBoxSection, + Separator, + composeRenderProps, +} from "react-aria-components" -import { cn } from '@/utils/classes'; -import { tv } from 'tailwind-variants'; -import { buttonStyles } from './button'; +import { cn } from "@/utils/classes" +import { tv } from "tailwind-variants" +import { buttonStyles } from "./button" const paginationStyles = tv({ slots: { - pagination: 'mx-auto flex w-full justify-center gap-[5px]', - section: 'flex h-9 gap-[5px]', - list: 'flex flex-row items-center gap-[5px]', + pagination: "mx-auto flex w-full justify-center gap-[5px]", + section: "flex h-9 gap-[5px]", + list: "flex flex-row items-center gap-[5px]", itemButton: - 'cursor-pointer font-normal text-fg data-focus-visible:border-primary data-focus-visible:bg-primary/10 data-focus-visible:ring-4 data-focus-visible:ring-primary/20', - itemLabel: 'grid h-9 place-content-center px-3.5 tabular-nums', - itemSeparator: 'grid h-9 place-content-center', + "cursor-pointer font-normal text-fg data-focus-visible:border-primary data-focus-visible:bg-primary/10 data-focus-visible:ring-4 data-focus-visible:ring-primary/20", + itemLabel: "grid h-9 place-content-center px-3.5 tabular-nums", + itemSeparator: "grid h-9 place-content-center", itemEllipsis: - 'flex size-9 items-center justify-center rounded-lg border border-transparent data-focus-visible:border-primary data-focus-visible:bg-primary/10 data-focused:outline-hidden data-focus-visible:ring-4 data-focus-visible:ring-primary/20', - itemEllipsisIcon: 'flex size-9 items-center justify-center', + "flex size-9 items-center justify-center rounded-lg border border-transparent data-focus-visible:border-primary data-focus-visible:bg-primary/10 data-focused:outline-hidden data-focus-visible:ring-4 data-focus-visible:ring-primary/20", + itemEllipsisIcon: "flex size-9 items-center justify-center", defaultItem: - 'cursor-pointer font-normal tabular-nums disabled:cursor-default disabled:opacity-100 data-focus-visible:border-primary data-focus-visible:bg-primary/10 data-focus-visible:ring-4 data-focus-visible:ring-primary/20', - itemSeparatorLine: 'h-5 w-[1.5px] shrink-0 rotate-[14deg] bg-secondary-fg/40' - } -}); + "cursor-pointer font-normal tabular-nums disabled:cursor-default disabled:opacity-100 data-focus-visible:border-primary data-focus-visible:bg-primary/10 data-focus-visible:ring-4 data-focus-visible:ring-primary/20", + itemSeparatorLine: "h-5 w-[1.5px] shrink-0 rotate-[14deg] bg-secondary-fg/40", + }, +}) const { pagination, @@ -40,62 +46,66 @@ const { itemEllipsis, itemEllipsisIcon, defaultItem, - itemSeparatorLine -} = paginationStyles(); + itemSeparatorLine, +} = paginationStyles() -type PagginationProps = React.ComponentProps<'nav'>; +type PagginationProps = React.ComponentProps<"nav"> const Pagination = ({ className, ref, ...props }: PagginationProps) => ( <nav aria-label="pagination" ref={ref} className={pagination({ className })} {...props} /> -); +) interface PaginationSectionProps<T> extends ListBoxSectionProps<T> { - ref?: React.RefObject<HTMLElement>; + ref?: React.RefObject<HTMLElement> } -const PaginationSection = <T extends object>({ className, ref, ...props }: PaginationSectionProps<T>) => ( +const PaginationSection = <T extends object>({ + className, + ref, + ...props +}: PaginationSectionProps<T>) => ( <ListBoxSection ref={ref} {...props} className={section({ className })} /> -); +) interface PaginationListProps<T> extends ListBoxProps<T> { - ref?: React.RefObject<HTMLDivElement>; + ref?: React.RefObject<HTMLDivElement> } -const List = <T extends object>({ className, ref, ...props }: PaginationListProps<T>) => { +const PaginationList = <T extends object>({ className, ref, ...props }: PaginationListProps<T>) => { return ( <ListBox ref={ref} orientation="horizontal" - aria-label={props['aria-label'] || 'Pagination'} + aria-label={props["aria-label"] || "Pagination"} layout="grid" className={composeRenderProps(className, (className) => list({ className }))} {...props} /> - ); -}; + ) +} const renderListItem = ( props: ListBoxItemProps & { - textValue?: string; - 'aria-current'?: string | undefined; - isDisabled?: boolean; - className?: string; + textValue?: string + "aria-current"?: string | undefined + isDisabled?: boolean + className?: string }, - children: React.ReactNode -) => <ListBoxItem {...props}>{children}</ListBoxItem>; + children: React.ReactNode, +) => <ListBoxItem {...props}>{children}</ListBoxItem> interface PaginationItemProps extends ListBoxItemProps { - children?: React.ReactNode; - className?: string; - intent?: 'primary' | 'secondary'; - size?: 'medium' | 'large' | 'square-petite' | 'extra-small' | 'small'; - shape?: 'square' | 'circle'; - appearance?: 'solid' | 'outline' | 'plain'; - isCurrent?: boolean; - segment?: 'label' | 'separator' | 'ellipsis' | 'default' | 'last' | 'first' | 'previous' | 'next'; + children?: React.ReactNode + className?: string + intent?: "primary" | "secondary" + size?: "medium" | "large" | "square-petite" | "extra-small" | "small" + shape?: "square" | "circle" + appearance?: "solid" | "outline" | "plain" + isCurrent?: boolean + segment?: "label" | "separator" | "ellipsis" | "default" | "last" | "first" | "previous" | "next" } -const Item = ({ - segment = 'default', - size = 'small', - appearance = 'outline', +const PaginationItem = ({ + segment = "default", + size = "small", + appearance = "outline", intent, className, isCurrent, @@ -103,90 +113,94 @@ const Item = ({ ...props }: PaginationItemProps) => { const textValue = - typeof children === 'string' ? children : typeof children === 'number' ? children.toString() : undefined; + typeof children === "string" + ? children + : typeof children === "number" + ? children.toString() + : undefined const renderPaginationIndicator = (indicator: React.ReactNode) => renderListItem( { textValue: segment, - 'aria-current': isCurrent ? 'page' : undefined, + "aria-current": isCurrent ? "page" : undefined, isDisabled: isCurrent, className: cn( buttonStyles({ - appearance: 'outline', - size: 'small', - className: itemButton() + appearance: "outline", + size: "small", + className: itemButton(), }), - className + className, ), - ...props + ...props, }, - indicator - ); + indicator, + ) switch (segment) { - case 'label': + case "label": return renderListItem( { textValue: textValue, className: itemLabel({ className }), - ...props + ...props, }, - children - ); - case 'separator': + children, + ) + case "separator": return renderListItem( { - textValue: 'Separator', + textValue: "Separator", className: itemSeparator({ className }), - ...props + ...props, }, - <Separator orientation="vertical" className={itemSeparatorLine()} /> - ); - case 'ellipsis': + <Separator orientation="vertical" className={itemSeparatorLine()} />, + ) + case "ellipsis": return renderListItem( { - textValue: 'More pages', + textValue: "More pages", className: itemEllipsis({ className }), - ...props + ...props, }, <span aria-hidden className={itemEllipsisIcon({ className })}> <IconDotsHorizontal /> - </span> - ); - case 'previous': - return renderPaginationIndicator(<IconChevronLgLeft />); - case 'next': - return renderPaginationIndicator(<IconChevronLgRight />); - case 'first': - return renderPaginationIndicator(<IconChevronsLgLeft />); - case 'last': - return renderPaginationIndicator(<IconChevronsLgRight />); + </span>, + ) + case "previous": + return renderPaginationIndicator(<IconChevronLgLeft />) + case "next": + return renderPaginationIndicator(<IconChevronLgRight />) + case "first": + return renderPaginationIndicator(<IconChevronWallLeft />) + case "last": + return renderPaginationIndicator(<IconChevronWallRight />) default: return renderListItem( { textValue: textValue, - 'aria-current': isCurrent ? 'page' : undefined, + "aria-current": isCurrent ? "page" : undefined, isDisabled: isCurrent, className: cn( buttonStyles({ - intent: isCurrent ? 'primary' : intent, - appearance: isCurrent ? 'solid' : appearance, + intent: isCurrent ? "primary" : intent, + appearance: isCurrent ? "solid" : appearance, size, - className: defaultItem({ className }) + className: defaultItem({ className }), }), - className + className, ), - ...props + ...props, }, - children - ); + children, + ) } -}; +} -Pagination.Item = Item; -Pagination.List = List; -Pagination.Section = PaginationSection; +Pagination.Item = PaginationItem +Pagination.List = PaginationList +Pagination.Section = PaginationSection -export { Pagination }; -export type { PagginationProps, PaginationItemProps, PaginationListProps, PaginationSectionProps }; +export { Pagination } +export type { PagginationProps, PaginationItemProps, PaginationListProps, PaginationSectionProps } diff --git a/resources/js/components/ui/popover.tsx b/resources/js/components/ui/popover.tsx index 30e93b7..5cf6111 100644 --- a/resources/js/components/ui/popover.tsx +++ b/resources/js/components/ui/popover.tsx @@ -1,10 +1,9 @@ import type { DialogTriggerProps, ModalOverlayProps, - PopoverProps as PopoverPrimitiveProps -} from 'react-aria-components'; + PopoverProps as PopoverPrimitiveProps, +} from "react-aria-components" import { - composeRenderProps, type DialogProps, DialogTrigger, Modal, @@ -12,98 +11,105 @@ import { OverlayArrow, PopoverContext, Popover as PopoverPrimitive, - useSlottedContext -} from 'react-aria-components'; -import { tv } from 'tailwind-variants'; + composeRenderProps, + useSlottedContext, +} from "react-aria-components" +import { tv } from "tailwind-variants" -import { cn } from '@/utils/classes'; -import { useMediaQuery } from '@/utils/use-media-query'; -import { twMerge } from 'tailwind-merge'; -import type { DialogBodyProps, DialogFooterProps, DialogHeaderProps, DialogTitleProps } from './dialog'; -import { Dialog } from './dialog'; +import { cn } from "@/utils/classes" +import { useMediaQuery } from "@/utils/use-media-query" +import { twMerge } from "tailwind-merge" +import type { + DialogBodyProps, + DialogFooterProps, + DialogHeaderProps, + DialogTitleProps, +} from "./dialog" +import { Dialog } from "./dialog" -type PopoverProps = DialogTriggerProps; -const Popover = ({ children, ...props }: PopoverProps) => { - return <DialogTrigger {...props}>{children}</DialogTrigger>; -}; +type PopoverProps = DialogTriggerProps +const Popover = (props: PopoverProps) => { + return <DialogTrigger {...props} /> +} -const Title = ({ level = 2, className, ...props }: DialogTitleProps) => ( - <Dialog.Title className={twMerge('sm:leading-none', level === 2 && 'sm:text-lg', className)} {...props} /> -); +const PopoverTitle = ({ level = 2, className, ...props }: DialogTitleProps) => ( + <Dialog.Title + className={twMerge("sm:leading-none", level === 2 && "sm:text-lg", className)} + {...props} + /> +) -const Header = ({ className, ...props }: DialogHeaderProps) => ( - <Dialog.Header className={twMerge('sm:p-4', className)} {...props} /> -); +const PopoverHeader = ({ className, ...props }: DialogHeaderProps) => ( + <Dialog.Header className={twMerge("sm:p-4", className)} {...props} /> +) -const Footer = ({ className, ...props }: DialogFooterProps) => ( - <Dialog.Footer className={cn('sm:p-4', className)} {...props} /> -); +const PopoverFooter = ({ className, ...props }: DialogFooterProps) => ( + <Dialog.Footer className={cn("sm:p-4", className)} {...props} /> +) -const Body = ({ className, ref, ...props }: DialogBodyProps) => ( - <Dialog.Body ref={ref} className={cn('sm:px-4 sm:pt-0', className)} {...props} /> -); +const PopoverBody = ({ className, ref, ...props }: DialogBodyProps) => ( + <Dialog.Body ref={ref} className={cn("sm:px-4 sm:pt-0", className)} {...props} /> +) const content = tv({ base: [ - 'peer/popover-content max-w-xs rounded-xl border bg-overlay bg-clip-padding text-overlay-fg shadow-xs transition-transform [scrollbar-width:thin] sm:max-w-3xl sm:text-sm dark:backdrop-saturate-200 forced-colors:bg-[Canvas] [&::-webkit-scrollbar]:size-0.5' + "peer/popover-content max-w-xs rounded-xl border bg-overlay bg-clip-padding text-overlay-fg shadow-xs transition-transform [scrollbar-width:thin] sm:max-w-3xl sm:text-sm dark:backdrop-saturate-200 forced-colors:bg-[Canvas] [&::-webkit-scrollbar]:size-0.5", ], variants: { isPicker: { - true: 'max-h-72 min-w-(--trigger-width) overflow-y-auto', - false: 'min-w-80' + true: "max-h-72 min-w-(--trigger-width) overflow-y-auto", + false: "min-w-80", }, isMenu: { - true: 'p-0' + true: "", }, isEntering: { true: [ - 'fade-in animate-in duration-150 ease-out', - 'data-[placement=left]:slide-in-from-right-1 data-[placement=right]:slide-in-from-left-1 data-[placement=top]:slide-in-from-bottom-1 data-[placement=bottom]:slide-in-from-top-1' - ] + "fade-in animate-in duration-150 ease-out", + "data-[placement=left]:slide-in-from-right-1 data-[placement=right]:slide-in-from-left-1 data-[placement=top]:slide-in-from-bottom-1 data-[placement=bottom]:slide-in-from-top-1", + ], }, isExiting: { true: [ - 'fade-out animate-out duration-100 ease-in', - 'data-[placement=left]:slide-out-to-right-1 data-[placement=right]:slide-out-to-left-1 data-[placement=top]:slide-out-to-bottom-1 data-[placement=bottom]:slide-out-to-top-1' - ] - } - } -}); + "fade-out animate-out duration-100 ease-in", + "data-[placement=left]:slide-out-to-right-1 data-[placement=right]:slide-out-to-left-1 data-[placement=top]:slide-out-to-bottom-1 data-[placement=bottom]:slide-out-to-top-1", + ], + }, + }, +}) const drawer = tv({ base: [ - 'fixed top-auto bottom-0 z-50 max-h-full w-full max-w-2xl border border-b-transparent bg-overlay outline-hidden' + "fixed top-auto bottom-0 z-50 max-h-full w-full max-w-2xl border border-b-transparent bg-overlay outline-hidden", ], variants: { isMenu: { - true: 'rounded-t-xl p-0 [&_[role=dialog]]:*:not-has-[[data-slot=dialog-body]]:px-1', - false: 'rounded-t-2xl' + true: "rounded-t-xl p-0 [&_[role=dialog]]:*:not-has-[[data-slot=dialog-body]]:px-1", + false: "rounded-t-2xl", }, isEntering: { true: [ - '[transition:transform_0.5s_cubic-bezier(0.32,_0.72,_0,_1)] [will-change:transform]', - 'fade-in-0 slide-in-from-bottom-56 animate-in duration-200', - '[transition:translate3d(0,_100%,_0)]', - 'sm:slide-in-from-bottom-auto sm:slide-in-from-top-[20%]' - ] + "[transition:transform_0.5s_cubic-bezier(0.32,_0.72,_0,_1)] [will-change:transform]", + "fade-in-0 slide-in-from-bottom-56 animate-in duration-200", + "[transition:translate3d(0,_100%,_0)]", + "sm:slide-in-from-bottom-auto sm:slide-in-from-top-[20%]", + ], }, isExiting: { - true: 'slide-out-to-bottom-56 animate-out duration-200 ease-in' - } - } -}); + true: "slide-out-to-bottom-56 animate-out duration-200 ease-in", + }, + }, +}) interface PopoverContentProps - extends Omit<React.ComponentProps<typeof Modal>, 'children'>, - Omit<PopoverPrimitiveProps, 'children' | 'className'>, - Omit<ModalOverlayProps, 'className'> { - children: React.ReactNode; - showArrow?: boolean; - style?: React.CSSProperties; - respectScreen?: boolean; - 'aria-label'?: DialogProps['aria-label']; - 'aria-labelledby'?: DialogProps['aria-labelledby']; - className?: string | ((values: { defaultClassName?: string }) => string); + extends Omit<PopoverPrimitiveProps, "children" | "className">, + Omit<ModalOverlayProps, "className">, + Pick<DialogProps, "aria-label" | "aria-labelledby"> { + children: React.ReactNode + showArrow?: boolean + style?: React.CSSProperties + respectScreen?: boolean + className?: string | ((values: { defaultClassName?: string }) => string) } const PopoverContent = ({ @@ -113,13 +119,13 @@ const PopoverContent = ({ className, ...props }: PopoverContentProps) => { - const isMobile = useMediaQuery('(max-width: 600px)'); - const popoverContext = useSlottedContext(PopoverContext)!; - const isMenuTrigger = popoverContext?.trigger === 'MenuTrigger'; - const isSubmenuTrigger = popoverContext?.trigger === 'SubmenuTrigger'; - const isMenu = isMenuTrigger || isSubmenuTrigger; - const offset = showArrow ? 12 : 8; - const effectiveOffset = isSubmenuTrigger ? offset - 5 : offset; + const isMobile = useMediaQuery("(max-width: 600px)") + const popoverContext = useSlottedContext(PopoverContext)! + const isMenuTrigger = popoverContext?.trigger === "MenuTrigger" + const isSubmenuTrigger = popoverContext?.trigger === "SubmenuTrigger" + const isMenu = isMenuTrigger || isSubmenuTrigger + const offset = showArrow ? 12 : 8 + const effectiveOffset = isSubmenuTrigger ? offset - 5 : offset return isMobile && respectScreen ? ( <ModalOverlay className="fixed top-0 left-0 isolate z-50 h-(--visual-viewport-height) w-full bg-overlay/10 [--visual-viewport-vertical-padding:16px]" @@ -128,10 +134,10 @@ const PopoverContent = ({ > <Modal className={composeRenderProps(className, (className, renderProps) => - drawer({ ...renderProps, isMenu, className }) + drawer({ ...renderProps, isMenu, className }), )} > - <Dialog role="dialog" className="outline-hidden"> + <Dialog role="dialog" aria-label={props["aria-label"] || isMenu ? "Menu" : undefined}> {children} </Dialog> </Modal> @@ -139,13 +145,13 @@ const PopoverContent = ({ ) : ( <PopoverPrimitive offset={effectiveOffset} - {...props} className={composeRenderProps(className, (className, renderProps) => content({ ...renderProps, - className - }) + className, + }), )} + {...props} > {showArrow && ( <OverlayArrow className="group"> @@ -159,40 +165,25 @@ const PopoverContent = ({ </svg> </OverlayArrow> )} - <Dialog role="dialog" className="outline-hidden"> + <Dialog role="dialog" aria-label={props["aria-label"] || isMenu ? "Menu" : undefined}> {children} </Dialog> </PopoverPrimitive> - ); -}; + ) +} -const Picker = ({ children, className, ...props }: PopoverContentProps) => { - return ( - <PopoverPrimitive - {...props} - className={composeRenderProps(className, (className, renderProps) => - content({ - ...renderProps, - isPicker: true, - className - }) - )} - > - {children} - </PopoverPrimitive> - ); -}; +const PopoverTrigger = Dialog.Trigger +const PopoverClose = Dialog.Close +const PopoverDescription = Dialog.Description -Popover.Primitive = PopoverPrimitive; -Popover.Trigger = Dialog.Trigger; -Popover.Close = Dialog.Close; -Popover.Content = PopoverContent; -Popover.Description = Dialog.Description; -Popover.Body = Body; -Popover.Footer = Footer; -Popover.Header = Header; -Popover.Picker = Picker; -Popover.Title = Title; +Popover.Trigger = PopoverTrigger +Popover.Close = PopoverClose +Popover.Description = PopoverDescription +Popover.Content = PopoverContent +Popover.Body = PopoverBody +Popover.Footer = PopoverFooter +Popover.Header = PopoverHeader +Popover.Title = PopoverTitle -export { Popover }; -export type { PopoverContentProps, PopoverProps }; +export { Popover, PopoverContent } +export type { PopoverContentProps, PopoverProps } diff --git a/resources/js/components/ui/primitive.tsx b/resources/js/components/ui/primitive.tsx index 0d07ce7..190d16b 100644 --- a/resources/js/components/ui/primitive.tsx +++ b/resources/js/components/ui/primitive.tsx @@ -1,38 +1,38 @@ -import { composeRenderProps } from 'react-aria-components'; -import { twMerge } from 'tailwind-merge'; -import { tv } from 'tailwind-variants'; +import { composeRenderProps } from "react-aria-components" +import { twMerge } from "tailwind-merge" +import { tv } from "tailwind-variants" function composeTailwindRenderProps<T>( className: string | ((v: T) => string) | undefined, - tailwind: string + tailwind: string, ): string | ((v: T) => string) { - return composeRenderProps(className, (className) => twMerge(tailwind, className)); + return composeRenderProps(className, (className) => twMerge(tailwind, className)) } const focusRing = tv({ variants: { - isFocused: { true: 'outline-hidden ring-4 ring-ring/20 data-invalid:ring-danger/20' }, - isFocusVisible: { true: 'outline-hidden ring-4 ring-ring/20' }, - isInvalid: { true: 'ring-4 ring-danger/20' } - } -}); + isFocused: { true: "outline-hidden ring-4 ring-ring/20 data-invalid:ring-danger/20" }, + isFocusVisible: { true: "outline-hidden ring-4 ring-ring/20" }, + isInvalid: { true: "ring-4 ring-danger/20" }, + }, +}) const focusStyles = tv({ extend: focusRing, variants: { - isFocused: { true: 'border-ring/70 forced-colors:border-[Highlight]' }, - isInvalid: { true: 'border-danger/70 forced-colors:border-[Mark]' } - } -}); + isFocused: { true: "border-ring/70 forced-colors:border-[Highlight]" }, + isInvalid: { true: "border-danger/70 forced-colors:border-[Mark]" }, + }, +}) const focusButtonStyles = tv({ - base: 'outline outline-ring outline-offset-2 forced-colors:outline-[Highlight]', + base: "outline outline-ring outline-offset-2 forced-colors:outline-[Highlight]", variants: { isFocusVisible: { - false: 'outline-0', - true: 'outline-2' - } - } -}); + false: "outline-0", + true: "outline-2", + }, + }, +}) -export { composeTailwindRenderProps, focusButtonStyles, focusRing, focusStyles }; +export { composeTailwindRenderProps, focusButtonStyles, focusRing, focusStyles } diff --git a/resources/js/components/ui/select.tsx b/resources/js/components/ui/select.tsx index 67055a9..d40e8a7 100644 --- a/resources/js/components/ui/select.tsx +++ b/resources/js/components/ui/select.tsx @@ -1,78 +1,107 @@ -import { IconChevronLgDown } from 'justd-icons'; -import type { ListBoxProps, SelectProps as SelectPrimitiveProps, ValidationResult } from 'react-aria-components'; -import { Button, composeRenderProps, Select as SelectPrimitive, SelectValue } from 'react-aria-components'; -import { tv } from 'tailwind-variants'; - -import type { Placement } from '@react-types/overlays'; -import { DropdownItem, DropdownItemDetails, DropdownLabel, DropdownSection, DropdownSeparator } from './dropdown'; -import { Description, FieldError, Label } from './field'; -import { ListBox } from './list-box'; -import { Popover } from './popover'; -import { composeTailwindRenderProps, focusStyles } from './primitive'; +import { cn } from "@/utils/classes" +import { IconChevronLgDown } from "justd-icons" +import type { + ListBoxProps, + PopoverProps, + SelectProps as SelectPrimitiveProps, + ValidationResult, +} from "react-aria-components" +import { + Button, + Select as SelectPrimitive, + SelectValue, + composeRenderProps, +} from "react-aria-components" +import { tv } from "tailwind-variants" +import { + DropdownItem, + DropdownItemDetails, + DropdownLabel, + DropdownSection, + DropdownSeparator, +} from "./dropdown" +import { Description, FieldError, Label } from "./field" +import { ListBox } from "./list-box" +import { PopoverContent } from "./popover" +import { composeTailwindRenderProps, focusStyles } from "./primitive" const selectTriggerStyles = tv({ extend: focusStyles, base: [ - 'btr flex h-10 w-full cursor-default items-center items-center gap-4 gap-x-2 rounded-lg border border-input py-2 pr-2 pl-3 text-start shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] transition **:data-[slot=icon]:size-4 group-data-disabled:opacity-50 dark:shadow-none', - 'group-data-open:border-ring/70 group-data-open:ring-4 group-data-open:ring-ring/20', - 'text-fg group-data-invalid:border-danger group-data-invalid:ring-danger/20 forced-colors:group-data-invalid:border-[Mark]' + "btr flex h-10 w-full cursor-default items-center gap-4 gap-x-2 rounded-lg border border-input py-2 pr-2 pl-3 text-start shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] transition **:data-[slot=icon]:size-4 group-data-disabled:opacity-50 dark:shadow-none", + "group-data-open:border-ring/70 group-data-open:ring-4 group-data-open:ring-ring/20", + "text-fg group-data-invalid:border-danger group-data-invalid:ring-danger/20 forced-colors:group-data-invalid:border-[Mark]", ], variants: { isDisabled: { - true: 'opacity-50 forced-colors:border-[GrayText] forced-colors:text-[GrayText]' - } - } -}); + true: "opacity-50 forced-colors:border-[GrayText] forced-colors:text-[GrayText]", + }, + }, +}) interface SelectProps<T extends object> extends SelectPrimitiveProps<T> { - label?: string; - description?: string; - errorMessage?: string | ((validation: ValidationResult) => string); - items?: Iterable<T>; - className?: string; + label?: string + description?: string + errorMessage?: string | ((validation: ValidationResult) => string) + items?: Iterable<T> + className?: string } const Select = <T extends object>({ label, description, errorMessage, - children, className, ...props }: SelectProps<T>) => { return ( <SelectPrimitive {...props} - className={composeTailwindRenderProps(className, 'group flex w-full flex-col gap-y-1.5')} + className={composeTailwindRenderProps(className, "group flex w-full flex-col gap-y-1.5")} > - {label && <Label>{label}</Label>} - {children as React.ReactNode} - {description && <Description>{description}</Description>} - <FieldError>{errorMessage}</FieldError> + {(values) => ( + <> + {label && <Label>{label}</Label>} + {typeof props.children === "function" ? props.children(values) : props.children} + {description && <Description>{description}</Description>} + <FieldError>{errorMessage}</FieldError> + </> + )} </SelectPrimitive> - ); -}; + ) +} -interface ListProps<T extends object> extends ListBoxProps<T> { - items?: Iterable<T>; - placement?: Placement; - children: React.ReactNode | ((item: T) => React.ReactNode); - className?: string; +interface SelectListProps<T extends object> + extends ListBoxProps<T>, + Pick<PopoverProps, "placement"> { + items?: Iterable<T> + popoverClassName?: PopoverProps["className"] } -const List = <T extends object>({ className, children, items, placement, ...props }: ListProps<T>) => { +const SelectList = <T extends object>({ + children, + items, + className, + popoverClassName, + ...props +}: SelectListProps<T>) => { return ( - <Popover.Picker className={className} placement={placement}> - <ListBox.Picker aria-label="items" items={items} {...props}> + <PopoverContent + showArrow={false} + respectScreen={false} + className={cn("sm:min-w-(--trigger-width)", popoverClassName)} + placement={props.placement} + > + <ListBox className={cn("border-0", className)} items={items} {...props}> {children} - </ListBox.Picker> - </Popover.Picker> - ); -}; + </ListBox> + </PopoverContent> + ) +} interface SelectTriggerProps extends React.ComponentProps<typeof Button> { - prefix?: React.ReactNode; - className?: string; + prefix?: React.ReactNode + className?: string } const SelectTrigger = ({ className, ...props }: SelectTriggerProps) => { @@ -81,8 +110,8 @@ const SelectTrigger = ({ className, ...props }: SelectTriggerProps) => { className={composeRenderProps(className, (className, renderProps) => selectTriggerStyles({ ...renderProps, - className - }) + className, + }), )} > {props.prefix && <span className="-mr-1">{props.prefix}</span>} @@ -92,16 +121,22 @@ const SelectTrigger = ({ className, ...props }: SelectTriggerProps) => { className="size-4 shrink-0 text-muted-fg duration-300 group-data-open:rotate-180 group-data-open:text-fg group-data-disabled:opacity-50 forced-colors:text-[ButtonText] forced-colors:group-data-disabled:text-[GrayText]" /> </Button> - ); -}; + ) +} + +const SelectSection = DropdownSection +const SelectSeparator = DropdownSeparator +const SelectLabel = DropdownLabel +const SelectOptionDetails = DropdownItemDetails +const SelectOption = DropdownItem -Select.OptionDetails = DropdownItemDetails; -Select.Option = DropdownItem; -Select.Label = DropdownLabel; -Select.Separator = DropdownSeparator; -Select.Section = DropdownSection; -Select.Trigger = SelectTrigger; -Select.List = List; +Select.OptionDetails = SelectOptionDetails +Select.Option = SelectOption +Select.Label = SelectLabel +Select.Separator = SelectSeparator +Select.Section = SelectSection +Select.Trigger = SelectTrigger +Select.List = SelectList -export { Select }; -export type { SelectProps, SelectTriggerProps }; +export { Select } +export type { SelectProps, SelectTriggerProps } diff --git a/resources/js/components/ui/separator.tsx b/resources/js/components/ui/separator.tsx index ebaec4c..c8f2be0 100644 --- a/resources/js/components/ui/separator.tsx +++ b/resources/js/components/ui/separator.tsx @@ -1,21 +1,21 @@ -import { Separator as Divider, type SeparatorProps as DividerProps } from 'react-aria-components'; -import { tv } from 'tailwind-variants'; +import { Separator as Divider, type SeparatorProps as DividerProps } from "react-aria-components" +import { tv } from "tailwind-variants" const separatorStyles = tv({ - base: 'shrink-0 bg-border forced-colors:bg-[ButtonBorder]', + base: "shrink-0 bg-border forced-colors:bg-[ButtonBorder]", variants: { orientation: { - horizontal: 'h-px w-full', - vertical: 'w-px' - } + horizontal: "h-px w-full", + vertical: "w-px", + }, }, defaultVariants: { - orientation: 'horizontal' - } -}); + orientation: "horizontal", + }, +}) interface SeparatorProps extends DividerProps { - className?: string; + className?: string } const Separator = ({ className, ...props }: SeparatorProps) => { @@ -24,11 +24,11 @@ const Separator = ({ className, ...props }: SeparatorProps) => { {...props} className={separatorStyles({ orientation: props.orientation, - className: className + className: className, })} /> - ); -}; + ) +} -export { Separator }; -export type { SeparatorProps }; +export { Separator } +export type { SeparatorProps } diff --git a/resources/js/components/ui/sheet.tsx b/resources/js/components/ui/sheet.tsx index d5966c3..c80415e 100644 --- a/resources/js/components/ui/sheet.tsx +++ b/resources/js/components/ui/sheet.tsx @@ -1,101 +1,101 @@ -import type { DialogProps, DialogTriggerProps, ModalOverlayProps } from 'react-aria-components'; -import { composeRenderProps, DialogTrigger, Modal, ModalOverlay } from 'react-aria-components'; -import { tv, type VariantProps } from 'tailwind-variants'; +import type { DialogProps, DialogTriggerProps, ModalOverlayProps } from "react-aria-components" +import { DialogTrigger, Modal, ModalOverlay, composeRenderProps } from "react-aria-components" +import { type VariantProps, tv } from "tailwind-variants" -import { Dialog } from './dialog'; +import { Dialog } from "./dialog" const overlayStyles = tv({ base: [ - 'fixed top-0 left-0 isolate z-50 flex h-(--visual-viewport-height) w-full items-center justify-center bg-fg/15 p-4 dark:bg-bg/40' + "fixed top-0 left-0 isolate z-50 flex h-(--visual-viewport-height) w-full items-center justify-center bg-fg/15 p-4 dark:bg-bg/40", ], variants: { isBlurred: { - true: 'bg-bg/15 backdrop-blur dark:bg-bg/40' + true: "bg-bg/15 backdrop-blur dark:bg-bg/40", }, isEntering: { - true: 'fade-in animate-in duration-300 ease-out' + true: "fade-in animate-in duration-300 ease-out", }, isExiting: { - true: 'fade-out animate-out duration-200 ease-in' - } - } -}); + true: "fade-out animate-out duration-200 ease-in", + }, + }, +}) -type Sides = 'top' | 'bottom' | 'left' | 'right'; +type Sides = "top" | "bottom" | "left" | "right" const generateCompoundVariants = (sides: Array<Sides>) => { return sides.map((side) => ({ side, isFloat: true, className: - side === 'top' - ? 'top-2 inset-x-2 rounded-xl ring-1 border-b-0' - : side === 'bottom' - ? 'bottom-2 inset-x-2 rounded-xl ring-1 border-t-0' - : side === 'left' - ? 'left-2 inset-y-2 rounded-xl ring-1 border-r-0' - : 'right-2 inset-y-2 rounded-xl ring-1 border-l-0' - })); -}; + side === "top" + ? "top-2 inset-x-2 rounded-xl ring-1 border-b-0" + : side === "bottom" + ? "bottom-2 inset-x-2 rounded-xl ring-1 border-t-0" + : side === "left" + ? "left-2 inset-y-2 rounded-xl ring-1 border-r-0" + : "right-2 inset-y-2 rounded-xl ring-1 border-l-0", + })) +} const contentStyles = tv({ - base: 'fixed z-50 grid gap-4 border-fg/5 bg-overlay text-overlay-fg shadow-lg transition ease-in-out dark:border-border', + base: "fixed z-50 grid gap-4 border-fg/5 bg-overlay text-overlay-fg shadow-lg transition ease-in-out dark:border-border", variants: { isEntering: { - true: 'animate-in duration-300 ' + true: "animate-in duration-300 ", }, isExiting: { - true: 'animate-out duration-200' + true: "animate-out duration-200", }, side: { - top: 'data-entering:slide-in-from-top data-exiting:slide-out-to-top inset-x-0 top-0 rounded-b-2xl border-b', + top: "data-entering:slide-in-from-top data-exiting:slide-out-to-top inset-x-0 top-0 rounded-b-2xl border-b", bottom: - 'data-entering:slide-in-from-bottom data-exiting:slide-out-to-bottom inset-x-0 bottom-0 rounded-t-2xl border-t', - left: 'data-entering:slide-in-from-left data-exiting:slide-out-to-left inset-y-0 left-0 h-auto w-full max-w-xs overflow-y-auto border-r', + "data-entering:slide-in-from-bottom data-exiting:slide-out-to-bottom inset-x-0 bottom-0 rounded-t-2xl border-t", + left: "data-entering:slide-in-from-left data-exiting:slide-out-to-left inset-y-0 left-0 h-auto w-full max-w-xs overflow-y-auto border-r", right: - 'data-entering:slide-in-from-right data-exiting:slide-out-to-right inset-y-0 right-0 h-auto w-full max-w-xs overflow-y-auto border-l' + "data-entering:slide-in-from-right data-exiting:slide-out-to-right inset-y-0 right-0 h-auto w-full max-w-xs overflow-y-auto border-l", }, isFloat: { - false: 'border-fg/20 dark:border-border', - true: 'ring-fg/5 dark:ring-border' - } + false: "border-fg/20 dark:border-border", + true: "ring-fg/5 dark:ring-border", + }, }, - compoundVariants: generateCompoundVariants(['top', 'bottom', 'left', 'right']) -}); + compoundVariants: generateCompoundVariants(["top", "bottom", "left", "right"]), +}) -type SheetProps = DialogTriggerProps; +type SheetProps = DialogTriggerProps const Sheet = (props: SheetProps) => { - return <DialogTrigger {...props} />; -}; + return <DialogTrigger {...props} /> +} interface SheetContentProps - extends Omit<React.ComponentProps<typeof Modal>, 'children' | 'className'>, - Omit<ModalOverlayProps, 'className'>, + extends Omit<React.ComponentProps<typeof Modal>, "children" | "className">, + Omit<ModalOverlayProps, "className">, VariantProps<typeof overlayStyles> { - 'aria-label'?: DialogProps['aria-label']; - 'aria-labelledby'?: DialogProps['aria-labelledby']; - role?: DialogProps['role']; - closeButton?: boolean; - isBlurred?: boolean; - isFloat?: boolean; - side?: Sides; + "aria-label"?: DialogProps["aria-label"] + "aria-labelledby"?: DialogProps["aria-labelledby"] + role?: DialogProps["role"] + closeButton?: boolean + isBlurred?: boolean + isFloat?: boolean + side?: Sides classNames?: { - overlay?: ModalOverlayProps['className']; - content?: ModalOverlayProps['className']; - }; + overlay?: ModalOverlayProps["className"] + content?: ModalOverlayProps["className"] + } } const SheetContent = ({ classNames, isBlurred = false, isDismissable = true, - side = 'right', - role = 'dialog', + side = "right", + role = "dialog", closeButton = true, isFloat = true, children, ...props }: SheetContentProps) => { - const _isDismissable = role === 'alertdialog' ? false : isDismissable; + const _isDismissable = role === "alertdialog" ? false : isDismissable return ( <ModalOverlay isDismissable={_isDismissable} @@ -103,8 +103,8 @@ const SheetContent = ({ return overlayStyles({ ...renderProps, isBlurred, - className - }); + className, + }) })} {...props} > @@ -114,32 +114,45 @@ const SheetContent = ({ ...renderProps, side, isFloat, - className - }) + className, + }), )} {...props} > {(values) => ( - <Dialog role={role} aria-label={props['aria-label'] ?? undefined} className="h-full"> + <Dialog role={role} aria-label={props["aria-label"] ?? undefined} className="h-full"> <> - {typeof children === 'function' ? children(values) : children} - {closeButton && <Dialog.CloseIndicator className="top-2.5 right-2.5" isDismissable={_isDismissable} />} + {typeof children === "function" ? children(values) : children} + {closeButton && ( + <Dialog.CloseIndicator + className="top-2.5 right-2.5" + isDismissable={_isDismissable} + /> + )} </> </Dialog> )} </Modal> </ModalOverlay> - ); -}; + ) +} + +const SheetTrigger = Dialog.Trigger +const SheetFooter = Dialog.Footer +const SheetHeader = Dialog.Header +const SheetTitle = Dialog.Title +const SheetDescription = Dialog.Description +const SheetBody = Dialog.Body +const SheetClose = Dialog.Close -Sheet.Trigger = Dialog.Trigger; -Sheet.Footer = Dialog.Footer; -Sheet.Content = SheetContent; -Sheet.Header = Dialog.Header; -Sheet.Title = Dialog.Title; -Sheet.Description = Dialog.Description; -Sheet.Body = Dialog.Body; -Sheet.Close = Dialog.Close; +Sheet.Trigger = SheetTrigger +Sheet.Footer = SheetFooter +Sheet.Header = SheetHeader +Sheet.Title = SheetTitle +Sheet.Description = SheetDescription +Sheet.Body = SheetBody +Sheet.Close = SheetClose +Sheet.Content = SheetContent -export { Sheet }; -export type { SheetContentProps, SheetProps, Sides }; +export { Sheet } +export type { SheetContentProps, SheetProps, Sides } diff --git a/resources/js/components/ui/table.tsx b/resources/js/components/ui/table.tsx index b3a9393..fc25780 100644 --- a/resources/js/components/ui/table.tsx +++ b/resources/js/components/ui/table.tsx @@ -1,6 +1,6 @@ -import React from 'react'; +import React from "react" -import { IconChevronLgDown, IconHamburger } from 'justd-icons'; +import { IconChevronLgDown, IconHamburger } from "justd-icons" import type { CellProps, ColumnProps, @@ -8,53 +8,53 @@ import type { TableHeaderProps as HeaderProps, RowProps, TableBodyProps, - TableProps as TablePrimitiveProps -} from 'react-aria-components'; + TableProps as TablePrimitiveProps, +} from "react-aria-components" import { Button, Cell, Collection, Column, ColumnResizer as ColumnResizerPrimitive, - composeRenderProps, ResizableTableContainer, Row, - TableBody, - TableHeader, + TableBody as TableBodyPrimitive, + TableHeader as TableHeaderPrimitive, Table as TablePrimitive, - useTableOptions -} from 'react-aria-components'; -import { tv } from 'tailwind-variants'; + composeRenderProps, + useTableOptions, +} from "react-aria-components" +import { tv } from "tailwind-variants" -import { cn } from '@/utils/classes'; -import { Checkbox } from './checkbox'; +import { cn } from "@/utils/classes" +import { Checkbox } from "./checkbox" const table = tv({ slots: { - root: 'table w-full min-w-full caption-bottom border-spacing-0 text-sm outline-hidden [--table-selected-bg:color-mix(in_oklab,var(--color-primary)_5%,white_90%)] **:data-drop-target:border **:data-drop-target:border-primary dark:[--table-selected-bg:color-mix(in_oklab,var(--color-primary)_25%,black_70%)]', - header: 'x32 border-b', - row: 'tr group relative cursor-default border-b bg-bg text-fg/70 outline-hidden ring-primary data-selected:data-hovered:bg-(--table-selected-bg)/70 data-selected:bg-(--table-selected-bg) data-focus-visible:ring-1 data-focused:ring-0 dark:data-selected:data-hovered:bg-[color-mix(in_oklab,var(--color-primary)_40%,black_60%)] dark:data-selected:data-hovered:bg-subtle/60', + root: "table w-full min-w-full caption-bottom border-spacing-0 text-sm outline-hidden [--table-selected-bg:color-mix(in_oklab,var(--color-primary)_5%,white_90%)] **:data-drop-target:border **:data-drop-target:border-primary dark:[--table-selected-bg:color-mix(in_oklab,var(--color-primary)_25%,black_70%)]", + header: "x32 border-b", + row: "tr group relative cursor-default border-b bg-bg text-muted-fg outline-hidden ring-primary data-selected:data-hovered:bg-(--table-selected-bg)/70 data-selected:bg-(--table-selected-bg) data-focus-visible:ring-1 data-focused:ring-0 dark:data-selected:data-hovered:bg-[color-mix(in_oklab,var(--color-primary)_30%,black_70%)]", cellIcon: - 'grid size-[1.15rem] flex-none shrink-0 place-content-center rounded bg-secondary text-fg *:data-[slot=icon]:size-3.5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:transition-transform *:data-[slot=icon]:duration-200', + "grid size-[1.15rem] flex-none shrink-0 place-content-center rounded bg-secondary text-fg *:data-[slot=icon]:size-3.5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:transition-transform *:data-[slot=icon]:duration-200", columnResizer: [ - 'absolute top-0 right-0 bottom-0 grid w-px touch-none place-content-center px-1 [&[data-resizing]>div]:bg-primary', - '&[data-resizable-direction=left]:cursor-e-resize &[data-resizable-direction=right]:cursor-w-resize data-[resizable-direction=both]:cursor-ew-resize' - ] - } -}); + "absolute top-0 right-0 bottom-0 grid w-px touch-none place-content-center px-1 [&[data-resizing]>div]:bg-primary", + "&[data-resizable-direction=left]:cursor-e-resize &[data-resizable-direction=right]:cursor-w-resize data-[resizable-direction=both]:cursor-ew-resize", + ], + }, +}) -const { root, header, row, cellIcon, columnResizer } = table(); +const { root, header, row, cellIcon, columnResizer } = table() interface TableProps extends TablePrimitiveProps { - className?: string; - allowResize?: boolean; + className?: string + allowResize?: boolean } const TableContext = React.createContext<TableProps>({ - allowResize: false -}); + allowResize: false, +}) -const useTableContext = () => React.useContext(TableContext); +const useTableContext = () => React.useContext(TableContext) const Table = ({ children, className, ...props }: TableProps) => ( <TableContext.Provider value={props}> @@ -72,7 +72,7 @@ const Table = ({ children, className, ...props }: TableProps) => ( )} </div> </TableContext.Provider> -); +) const ColumnResizer = ({ className, ...props }: ColumnResizerProps) => ( <ColumnResizerPrimitive @@ -80,51 +80,55 @@ const ColumnResizer = ({ className, ...props }: ColumnResizerProps) => ( className={composeRenderProps(className, (className, renderProps) => columnResizer({ ...renderProps, - className - }) + className, + }), )} > <div className="h-full w-px bg-border py-3" /> </ColumnResizerPrimitive> -); +) -const Body = <T extends object>(props: TableBodyProps<T>) => ( - <TableBody data-slot="table-body" {...props} className={cn('[&_.tr:last-child]:border-0')} /> -); +const TableBody = <T extends object>(props: TableBodyProps<T>) => ( + <TableBodyPrimitive + data-slot="table-body" + {...props} + className={cn("[&_.tr:last-child]:border-0")} + /> +) interface TableCellProps extends CellProps { - className?: string; + className?: string } const cellStyles = tv({ - base: 'group whitespace-nowrap px-3 py-3 outline-hidden', + base: "group whitespace-nowrap px-3 py-3 outline-hidden", variants: { allowResize: { - true: 'overflow-hidden truncate' - } - } -}); + true: "overflow-hidden truncate", + }, + }, +}) const TableCell = ({ children, className, ...props }: TableCellProps) => { - const { allowResize } = useTableContext(); + const { allowResize } = useTableContext() return ( <Cell data-slot="table-cell" {...props} className={cellStyles({ allowResize, className })}> {children} </Cell> - ); -}; + ) +} const columnStyles = tv({ - base: 'relative allows-sorting:cursor-pointer whitespace-nowrap px-3 py-3 text-left font-medium outline-hidden data-dragging:cursor-grabbing [&:has([slot=selection])]:pr-0', + base: "relative allows-sorting:cursor-pointer whitespace-nowrap px-3 py-3 text-left font-medium outline-hidden data-dragging:cursor-grabbing [&:has([slot=selection])]:pr-0", variants: { isResizable: { - true: 'overflow-hidden truncate' - } - } -}); + true: "overflow-hidden truncate", + }, + }, +}) interface TableColumnProps extends ColumnProps { - className?: string; - isResizable?: boolean; + className?: string + isResizable?: boolean } const TableColumn = ({ isResizable = false, className, ...props }: TableColumnProps) => { @@ -134,7 +138,7 @@ const TableColumn = ({ isResizable = false, className, ...props }: TableColumnPr {...props} className={columnStyles({ isResizable, - className + className, })} > {({ allowsSorting, sortDirection, isHovered }) => ( @@ -142,8 +146,8 @@ const TableColumn = ({ isResizable = false, className, ...props }: TableColumnPr <> {props.children as React.ReactNode} {allowsSorting && ( - <span className={cellIcon({ className: isHovered ? 'bg-secondary-fg/10' : '' })}> - <IconChevronLgDown className={sortDirection === 'ascending' ? 'rotate-180' : ''} /> + <span className={cellIcon({ className: isHovered ? "bg-secondary-fg/10" : "" })}> + <IconChevronLgDown className={sortDirection === "ascending" ? "rotate-180" : ""} /> </span> )} {isResizable && <ColumnResizer />} @@ -151,34 +155,54 @@ const TableColumn = ({ isResizable = false, className, ...props }: TableColumnPr </div> )} </Column> - ); -}; + ) +} interface TableHeaderProps<T extends object> extends HeaderProps<T> { - className?: string; - ref?: React.Ref<HTMLTableSectionElement>; + className?: string + ref?: React.Ref<HTMLTableSectionElement> } -const Header = <T extends object>({ children, ref, className, columns, ...props }: TableHeaderProps<T>) => { - const { selectionBehavior, selectionMode, allowsDragging } = useTableOptions(); +const TableHeader = <T extends object>({ + children, + ref, + className, + columns, + ...props +}: TableHeaderProps<T>) => { + const { selectionBehavior, selectionMode, allowsDragging } = useTableOptions() return ( - <TableHeader data-slot="table-header" ref={ref} className={header({ className })} {...props}> + <TableHeaderPrimitive + data-slot="table-header" + ref={ref} + className={header({ className })} + {...props} + > {allowsDragging && <Column className="w-0" />} - {selectionBehavior === 'toggle' && ( - <Column className="w-0 pl-4">{selectionMode === 'multiple' && <Checkbox slot="selection" />}</Column> + {selectionBehavior === "toggle" && ( + <Column className="w-0 pl-4"> + {selectionMode === "multiple" && <Checkbox slot="selection" />} + </Column> )} <Collection items={columns}>{children}</Collection> - </TableHeader> - ); -}; + </TableHeaderPrimitive> + ) +} interface TableRowProps<T extends object> extends RowProps<T> { - className?: string; - ref?: React.Ref<HTMLTableRowElement>; + className?: string + ref?: React.Ref<HTMLTableRowElement> } -const TableRow = <T extends object>({ children, className, columns, id, ref, ...props }: TableRowProps<T>) => { - const { selectionBehavior, allowsDragging } = useTableOptions(); +const TableRow = <T extends object>({ + children, + className, + columns, + id, + ref, + ...props +}: TableRowProps<T>) => { + const { selectionBehavior, allowsDragging } = useTableOptions() return ( <Row ref={ref} @@ -187,19 +211,25 @@ const TableRow = <T extends object>({ children, className, columns, id, ref, ... {...props} className={row({ className: - 'href' in props - ? cn('cursor-pointer data-hovered:bg-secondary/50 data-hovered:text-secondary-fg', className) - : '' + "href" in props + ? cn( + "cursor-pointer data-hovered:bg-secondary/50 data-hovered:text-secondary-fg", + className, + ) + : "", })} > {allowsDragging && ( <Cell className="group cursor-grab pr-0 ring-primary data-dragging:cursor-grabbing"> - <Button className="relative bg-transparent py-1.5 pl-3.5 text-muted-fg data-pressed:text-fg" slot="drag"> + <Button + className="relative bg-transparent py-1.5 pl-3.5 text-muted-fg data-pressed:text-fg" + slot="drag" + > <IconHamburger /> </Button> </Cell> )} - {selectionBehavior === 'toggle' && ( + {selectionBehavior === "toggle" && ( <Cell className="pl-4"> <span aria-hidden @@ -210,14 +240,14 @@ const TableRow = <T extends object>({ children, className, columns, id, ref, ... )} <Collection items={columns}>{children}</Collection> </Row> - ); -}; + ) +} -Table.Body = Body; -Table.Cell = TableCell; -Table.Column = TableColumn; -Table.Header = Header; -Table.Row = TableRow; +Table.Body = TableBody +Table.Cell = TableCell +Table.Column = TableColumn +Table.Header = TableHeader +Table.Row = TableRow -export { Table }; -export type { TableBodyProps, TableCellProps, TableColumnProps, TableProps, TableRowProps }; +export { Table } +export type { TableBodyProps, TableCellProps, TableColumnProps, TableProps, TableRowProps } diff --git a/resources/js/components/ui/text-field.tsx b/resources/js/components/ui/text-field.tsx index ea1fc3c..6d6eb7d 100644 --- a/resources/js/components/ui/text-field.tsx +++ b/resources/js/components/ui/text-field.tsx @@ -1,39 +1,38 @@ -import { useState } from 'react'; +import { useState } from "react" -import type { TextInputDOMProps } from '@react-types/shared'; -import { IconEye, IconEyeClosed } from 'justd-icons'; +import type { TextInputDOMProps } from "@react-types/shared" +import { IconEye, IconEyeClosed } from "justd-icons" import { Button as ButtonPrimitive, TextField as TextFieldPrimitive, - type TextFieldProps as TextFieldPrimitiveProps -} from 'react-aria-components'; -import { twJoin } from 'tailwind-merge'; + type TextFieldProps as TextFieldPrimitiveProps, +} from "react-aria-components" -import type { FieldProps } from './field'; -import { Description, FieldError, FieldGroup, Input, Label } from './field'; -import { Loader } from './loader'; -import { composeTailwindRenderProps } from './primitive'; +import type { FieldProps } from "./field" +import { Description, FieldError, FieldGroup, Input, Label } from "./field" +import { Loader } from "./loader" +import { composeTailwindRenderProps } from "./primitive" -type InputType = Exclude<TextInputDOMProps['type'], 'password'>; +type InputType = Exclude<TextInputDOMProps["type"], "password"> interface BaseTextFieldProps extends TextFieldPrimitiveProps, FieldProps { - prefix?: React.ReactNode; - suffix?: React.ReactNode; - isPending?: boolean; - className?: string; + prefix?: React.ReactNode + suffix?: React.ReactNode + isPending?: boolean + className?: string } interface RevealableTextFieldProps extends BaseTextFieldProps { - isRevealable: true; - type: 'password'; + isRevealable: true + type: "password" } interface NonRevealableTextFieldProps extends BaseTextFieldProps { - isRevealable?: never; - type?: InputType; + isRevealable?: never + type?: InputType } -type TextFieldProps = RevealableTextFieldProps | NonRevealableTextFieldProps; +type TextFieldProps = RevealableTextFieldProps | NonRevealableTextFieldProps const TextField = ({ placeholder, @@ -48,35 +47,30 @@ const TextField = ({ type, ...props }: TextFieldProps) => { - const [isPasswordVisible, setIsPasswordVisible] = useState(false); - const inputType = isRevealable ? (isPasswordVisible ? 'text' : 'password') : type; + const [isPasswordVisible, setIsPasswordVisible] = useState(false) + const inputType = isRevealable ? (isPasswordVisible ? "text" : "password") : type const handleTogglePasswordVisibility = () => { - setIsPasswordVisible((prev) => !prev); - }; + setIsPasswordVisible((prev) => !prev) + } return ( <TextFieldPrimitive type={inputType} {...props} - className={composeTailwindRenderProps(className, 'group flex flex-col gap-y-1.5')} + className={composeTailwindRenderProps(className, "group flex flex-col gap-y-1")} > {!props.children ? ( <> {label && <Label>{label}</Label>} <FieldGroup - isInvalid={!!errorMessage} isDisabled={props.isDisabled} - className={twJoin( - '**:[button]:inset-ring-0 **:[button]:inset-shadow-none **:[button]:h-8 **:[button]:rounded-[calc(var(--radius-lg)*0.5)] **:[button]:px-3.5 **:[button]:has-data-[slot=icon]:w-8 **:[button]:has-data-[slot=icon]:p-0 dark:**:[button]:inset-ring-0', - '[&>[data-slot=suffix]>button]:mr-[calc(var(--spacing)*-1.7)] [&>[data-slot=suffix]>button]:data-focus-visible:outline-1 [&>[data-slot=suffix]>button]:data-focus-visible:outline-offset-1', - '[&>[data-slot=prefix]>button]:ml-[calc(var(--spacing)*-1.7)] [&>[data-slot=prefix]>button]:data-focus-visible:outline-1 [&>[data-slot=prefix]>button]:data-focus-visible:outline-offset-1' - )} - data-loading={isPending ? 'true' : undefined} + isInvalid={!!errorMessage} + data-loading={isPending ? "true" : undefined} > - {prefix ? ( - <span data-slot="prefix" className="atrs x2e2"> - {prefix} - </span> - ) : null} + {prefix && typeof prefix === "string" ? ( + <span className="ml-2 text-muted-fg">{prefix}</span> + ) : ( + prefix + )} <Input placeholder={placeholder} /> {isRevealable ? ( <ButtonPrimitive @@ -88,9 +82,13 @@ const TextField = ({ {isPasswordVisible ? <IconEyeClosed /> : <IconEye />} </ButtonPrimitive> ) : isPending ? ( - <Loader variant="spin" data-slot="suffix" /> + <Loader variant="spin" /> ) : suffix ? ( - <span data-slot="suffix">{suffix}</span> + typeof suffix === "string" ? ( + <span className="mr-2 text-muted-fg">{suffix}</span> + ) : ( + suffix + ) ) : null} </FieldGroup> {description && <Description>{description}</Description>} @@ -100,8 +98,8 @@ const TextField = ({ props.children )} </TextFieldPrimitive> - ); -}; + ) +} -export { TextField }; -export type { TextFieldProps }; +export { TextField } +export type { TextFieldProps } diff --git a/resources/js/components/ui/toast.tsx b/resources/js/components/ui/toast.tsx index ea0958c..d96910c 100644 --- a/resources/js/components/ui/toast.tsx +++ b/resources/js/components/ui/toast.tsx @@ -1,21 +1,21 @@ -import { useTheme } from '@/components/theme-provider'; -import { cn } from '@/utils/classes'; +import { useTheme } from "@/components/theme-provider" +import { cn } from "@/utils/classes" import { IconCircleCheckFill, IconCircleExclamationFill, IconCircleInfoFill, - IconTriangleExclamationFill -} from 'justd-icons'; -import { Toaster as ToasterPrimitive, type ToasterProps } from 'sonner'; + IconTriangleExclamationFill, +} from "justd-icons" +import { Toaster as ToasterPrimitive, type ToasterProps } from "sonner" -import { buttonStyles } from './button'; -import { Loader } from './loader'; +import { buttonStyles } from "./button" +import { Loader } from "./loader" const Toast = ({ ...props }: ToasterProps) => { - const { theme = 'system' } = useTheme(); + const { theme = "system" } = useTheme() return ( <ToasterPrimitive - theme={theme as ToasterProps['theme']} + theme={theme as ToasterProps["theme"]} className="toaster group" richColors icons={{ @@ -23,50 +23,50 @@ const Toast = ({ ...props }: ToasterProps) => { error: <IconTriangleExclamationFill />, warning: <IconCircleExclamationFill />, success: <IconCircleCheckFill />, - loading: <Loader variant="spin" /> + loading: <Loader variant="spin" />, }} toastOptions={{ unstyled: true, closeButton: true, classNames: { toast: cn( - 'text-[0.925rem] not-has-data-description:**:data-title:font-normal!', - 'has-data-description:**:data-title:font-medium [&:has([data-description])_[data-title]]:text-base!', - 'has-data-[slot=icon]:**:data-content:pl-0', - 'has-data-button:*:data-content:mb-10', - 'has-data-button:**:data-close-button:hidden! flex w-full rounded-xl p-4', - 'inset-ring-1 inset-ring-current/10 backdrop-blur-3xl' + "text-[0.925rem] not-has-data-description:**:data-title:font-normal!", + "has-data-description:**:data-title:font-medium [&:has([data-description])_[data-title]]:text-base!", + "has-data-[slot=icon]:**:data-content:pl-0", + "has-data-button:*:data-content:mb-10", + "has-data-button:hover:**:data-close-button:hidden! flex w-full rounded-xl p-4", + "inset-ring-1 inset-ring-current/10 border-transparent backdrop-blur-3xl", ), - icon: 'absolute top-[0.2rem] [--toast-icon-margin-end:7px] *:data-[slot=icon]:text-fg *:data-[slot=icon]:size-4.5 **:data-[slot=icon]:text-current', - title: '', - description: '', - default: 'bg-bg text-fg [--gray2:theme(--color-fg/10%)]', - content: 'pr-6 *:data-description:text-current/65! *:data-description:text-sm!', + icon: "absolute top-[0.2rem] [--toast-icon-margin-end:7px] *:data-[slot=icon]:text-fg *:data-[slot=icon]:size-4.5 **:data-[slot=icon]:text-current", + title: "", + description: "", + default: "bg-bg text-fg [--gray2:theme(--color-fg/10%)]", + content: "pr-6 *:data-description:text-current/65! *:data-description:text-sm!", error: - 'inset-ring-danger/15 dark:inset-ring-danger/25 [--error-bg:theme(--color-danger/10%)] [--error-border:transparent] [--error-text:var(--color-danger)]', - info: 'inset-ring-sky-600/15 dark:inset-ring-sky-500/20 [--info-border:transparent] [--info-bg:theme(--color-sky-500/10%)] [--info-text:var(--color-sky-700)] dark:[--info-bg:theme(--color-sky-500/15%)] dark:[--info-text:var(--color-sky-400)]', + "inset-ring-danger/15 dark:inset-ring-danger/20 [--error-bg:theme(--color-danger/5%)] [--error-text:var(--color-danger)]", + info: "inset-ring-sky-600/15 dark:inset-ring-sky-500/20 [--info-bg:theme(--color-sky-500/5%)] [--info-text:var(--color-sky-700)] dark:[--info-text:var(--color-sky-400)]", warning: - 'inset-ring-warning/30 dark:inset-ring-warning/15 [--warning-bg:theme(--color-warning/20%)] dark:[--warning-bg:theme(--color-warning/10%)] [--warning-border:transparent] [--warning-text:var(--color-warning-fg)] dark:[--warning-text:var(--color-warning)]', + "inset-ring-warning/15 dark:inset-ring-warning/20 [--warning-bg:theme(--color-warning/7%)] [--warning-text:var(--color-warning-fg)] dark:[--warning-text:var(--color-warning)]", success: - 'inset-ring-success/20 [--success-bg:theme(--color-success/80%)] dark:[--success-bg:theme(--color-success/20%)] [--success-border:transparent] [--success-text:#fff] dark:[--success-text:var(--color-success)]', + "inset-ring-success/15 [--success-bg:theme(--color-success/5%)] [--success-text:var(--color-success)]", cancelButton: buttonStyles({ className: - 'hover:border-secondary-fg/10 hover:bg-secondary/90 self-start absolute bottom-4 left-4 justify-self-start', - size: 'extra-small', - appearance: 'outline' + "hover:border-secondary-fg/10 hover:bg-secondary/90 self-start absolute bottom-4 left-4 justify-self-start", + size: "extra-small", + appearance: "outline", }), actionButton: buttonStyles({ - className: 'absolute bottom-4 right-4 self-end justify-self-end', - size: 'extra-small' + className: "absolute bottom-4 right-4 self-end justify-self-end", + size: "extra-small", }), closeButton: - '*:[svg]:size-12 size-6! rounded-md! [--gray1:transparent] [--gray4:transparent] [--gray5:transparent] [--gray12:current] [--toast-close-button-start:full] [--toast-close-button-end:-6px] [--toast-close-button-transform:translate(-75%,60%)] absolute' - } + "*:[svg]:size-5 group-hover:block! hidden! size-6! rounded-md! [--gray1:transparent] [--gray4:transparent] [--gray5:transparent] [--gray12:current] [--toast-close-button-start:full] [--toast-close-button-end:-6px] [--toast-close-button-transform:translate(-75%,60%)] absolute", + }, }} {...props} /> - ); -}; + ) +} -export { Toast }; -export type { ToasterProps }; +export { Toast } +export type { ToasterProps } diff --git a/resources/js/components/ui/touch-target.tsx b/resources/js/components/ui/touch-target.tsx index e9297db..e914d38 100644 --- a/resources/js/components/ui/touch-target.tsx +++ b/resources/js/components/ui/touch-target.tsx @@ -1,15 +1,15 @@ -import * as React from 'react'; +import type * as React from "react" const TouchTarget = ({ children }: { children: React.ReactNode }) => { return ( <> <span - className="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden" + className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 size-[max(100%,2.75rem)] [@media(pointer:fine)]:hidden" aria-hidden="true" /> {children} </> - ); -}; + ) +} -export { TouchTarget }; +export { TouchTarget } diff --git a/resources/js/components/ui/visually-hidden.tsx b/resources/js/components/ui/visually-hidden.tsx index d0cd4a0..333a9c2 100644 --- a/resources/js/components/ui/visually-hidden.tsx +++ b/resources/js/components/ui/visually-hidden.tsx @@ -1,13 +1,13 @@ -import { useVisuallyHidden } from 'react-aria'; +import { useVisuallyHidden } from "react-aria" type VisuallyHiddenSpanProps = { - children: React.ReactNode; -}; + children: React.ReactNode +} const VisuallyHidden = ({ children }: VisuallyHiddenSpanProps) => { - const { visuallyHiddenProps } = useVisuallyHidden(); + const { visuallyHiddenProps } = useVisuallyHidden() - return <span {...visuallyHiddenProps}>{children}</span>; -}; + return <span {...visuallyHiddenProps}>{children}</span> +} -export { VisuallyHidden }; +export { VisuallyHidden } diff --git a/resources/js/layouts/app-layout.tsx b/resources/js/layouts/app-layout.tsx index eb2e94d..c2639ef 100644 --- a/resources/js/layouts/app-layout.tsx +++ b/resources/js/layouts/app-layout.tsx @@ -1,7 +1,7 @@ -import { FlashMessage } from '@/components/flash-message'; -import { Footer } from '@/components/footer'; -import { AppNavbar } from '@/layouts/app-navbar'; -import { PropsWithChildren } from 'react'; +import { FlashMessage } from "@/components/flash-message" +import { Footer } from "@/components/footer" +import { AppNavbar } from "@/layouts/app-navbar" +import type { PropsWithChildren } from "react" export default function AppLayout({ children }: PropsWithChildren) { return ( @@ -10,5 +10,5 @@ export default function AppLayout({ children }: PropsWithChildren) { <AppNavbar>{children}</AppNavbar> <Footer /> </div> - ); + ) } diff --git a/resources/js/layouts/app-navbar.tsx b/resources/js/layouts/app-navbar.tsx index c672518..236a20b 100644 --- a/resources/js/layouts/app-navbar.tsx +++ b/resources/js/layouts/app-navbar.tsx @@ -1,7 +1,7 @@ -import { useTheme } from '@/components/theme-provider'; -import { ThemeSwitcher } from '@/components/theme-switcher'; -import { PagePropsData } from '@/types'; -import { usePage } from '@inertiajs/react'; +import { useTheme } from "@/components/theme-provider" +import { ThemeSwitcher } from "@/components/theme-switcher" +import type { PagePropsData } from "@/types" +import { usePage } from "@inertiajs/react" import { IconArrowUpRight, IconBrandJustd, @@ -10,30 +10,31 @@ import { IconColorPalette, IconColorSwatch, IconLogout, - IconSettings -} from 'justd-icons'; -import React from 'react'; -import { Selection } from 'react-aria-components'; -import { Avatar, buttonStyles, Link, Menu, Navbar, Separator } from 'ui'; + IconPackage, + IconSettings, +} from "justd-icons" +import { useState, useEffect } from "react" +import type { Selection } from "react-aria-components" +import { Avatar, buttonStyles, Link, Menu, Navbar, Separator } from "ui" const navigations = [ { - name: 'Home', - textValue: 'Home', - href: '/' + name: "Home", + textValue: "Home", + href: "/", }, { - name: 'About', - textValue: 'About', - href: '/about' - } -]; + name: "About", + textValue: "About", + href: "/about", + }, +] export function AppNavbar({ children, ...props }: React.ComponentProps<typeof Navbar>) { - const page = usePage(); - const { auth } = usePage<PagePropsData>().props; - const [isOpen, setIsOpen] = React.useState(false); - React.useEffect(() => setIsOpen(false), [page.url]); + const page = usePage() + const { auth } = usePage<PagePropsData>().props + const [isOpen, setIsOpen] = useState(false) + useEffect(() => setIsOpen(false), [page.url]) return ( <Navbar isOpen={isOpen} onOpenChange={setIsOpen} {...props}> <Navbar.Nav> @@ -49,35 +50,52 @@ export function AppNavbar({ children, ...props }: React.ComponentProps<typeof Na <Menu> <Navbar.Item className="group"> Resources... - <IconChevronLgDown className="transition-transform size-4 ml-2 group-data-pressed:rotate-180" /> + <IconChevronLgDown className="ml-2 size-4 transition-transform group-data-pressed:rotate-180" /> </Navbar.Item> <Menu.Content className="sm:min-w-48"> <Menu.Submenu> <Menu.Item> + <IconBrandJustdBlocks /> <Menu.Label>Blocks</Menu.Label> </Menu.Item> <Menu.Content> - <Menu.Item target="_blank" href="https://blocks.getjustd.com" className="justify-between"> + <Menu.Item + target="_blank" + href="https://blocks.getjustd.com" + className="justify-between" + > <IconBrandJustdBlocks /> <Menu.Label>Premium Blocks</Menu.Label> </Menu.Item> - <Menu.Item target="_blank" href="https://getjustd.com/blocks" className="justify-between"> + <Menu.Item + target="_blank" + href="https://getjustd.com/blocks" + className="justify-between" + > <IconBrandJustd /> <Menu.Label>Basic Blocks</Menu.Label> </Menu.Item> </Menu.Content> </Menu.Submenu> <Menu.Item target="_blank" href="https://getjustd.com" className="justify-between"> - <IconBrandJustd /> + <IconPackage /> <Menu.Label>Components</Menu.Label> <IconArrowUpRight /> </Menu.Item> - <Menu.Item target="_blank" href="https://getjustd.com/colors" className="justify-between"> + <Menu.Item + target="_blank" + href="https://getjustd.com/colors" + className="justify-between" + > <IconColorSwatch /> <Menu.Label>Colors</Menu.Label> <IconArrowUpRight /> </Menu.Item> - <Menu.Item target="_blank" href="https://getjustd.com/themes" className="justify-between"> + <Menu.Item + target="_blank" + href="https://getjustd.com/themes" + className="justify-between" + > <IconColorPalette /> <Menu.Label>Themes</Menu.Label> <IconArrowUpRight /> @@ -91,17 +109,20 @@ export function AppNavbar({ children, ...props }: React.ComponentProps<typeof Na </Menu> </Navbar.Section> - <Navbar.Section className="hidden ml-auto gap-x-1 lg:flex"> + <Navbar.Section className="ml-auto hidden gap-x-1 lg:flex"> {!auth.user && <ThemeSwitcher />} {auth.user ? ( <UserMenu /> ) : ( <> - <Separator orientation="vertical" className="h-6 mr-2" /> - <Link className={buttonStyles({ appearance: 'outline', size: 'small' })} href={route('login')}> + <Separator orientation="vertical" className="mr-2 h-6" /> + <Link + className={buttonStyles({ appearance: "outline", size: "small" })} + href={route("login")} + > Login </Link> - <Navbar.Item href={route('register')}>Register</Navbar.Item> + <Navbar.Item href={route("register")}>Register</Navbar.Item> </> )} </Navbar.Section> @@ -122,8 +143,8 @@ export function AppNavbar({ children, ...props }: React.ComponentProps<typeof Na ) : ( <> <Link - className={buttonStyles({ appearance: 'outline', size: 'small', shape: 'circle' })} - href={route('login')} + className={buttonStyles({ appearance: "outline", size: "small", shape: "circle" })} + href={route("login")} > Login </Link> @@ -134,18 +155,18 @@ export function AppNavbar({ children, ...props }: React.ComponentProps<typeof Na {children} </Navbar> - ); + ) } function UserMenu() { - const { auth } = usePage<PagePropsData>().props; - const { theme, setTheme } = useTheme(); - const currentTheme = theme || 'system'; - const [selectedTheme, setSelectedTheme] = React.useState<Selection>(new Set([currentTheme])); + const { auth } = usePage<PagePropsData>().props + const { theme, setTheme } = useTheme() + const currentTheme = theme || "system" + const [selectedTheme, setSelectedTheme] = useState<Selection>(new Set([currentTheme])) return ( <Menu> <Menu.Trigger - className="group data-hovered:bg-secondary p-1 rounded-lg flex justify-between text-left items-start" + className="group flex items-start justify-between rounded-lg p-1 text-left data-hovered:bg-secondary" aria-label="Open menu" > <Avatar src={auth.user.gravatar} shape="square" className="mr-2 size-9 *:size-9" /> @@ -153,19 +174,21 @@ function UserMenu() { <strong className="font-semibold text-sm">{auth.user.name}</strong> <span className="text-xs">{auth.user.email}</span> </div> - <IconChevronLgDown className="group-data-pressed:rotate-180 transition-transform" /> + <IconChevronLgDown className="transition-transform group-data-pressed:rotate-180" /> </Menu.Trigger> <Menu.Content placement="bottom end" className="sm:min-w-60"> <Menu.Section> <Menu.Header separator className="relative"> <div>{auth.user.name}</div> - <div className="text-muted-fg font-normal text-sm whitespace-nowrap truncate pr-6">{auth.user.email}</div> + <div className="truncate whitespace-nowrap pr-6 font-normal text-muted-fg text-sm"> + {auth.user.email} + </div> </Menu.Header> </Menu.Section> - <Menu.Item href={route('dashboard')}> + <Menu.Item href={route("dashboard")}> <Menu.Label>Dashboard</Menu.Label> </Menu.Item> - <Menu.Item href={route('profile.edit')} className="justify-between"> + <Menu.Item href={route("profile.edit")} className="justify-between"> <Menu.Label>Settings</Menu.Label> <IconSettings /> </Menu.Item> @@ -177,14 +200,14 @@ function UserMenu() { selectionMode="single" selectedKeys={selectedTheme} onSelectionChange={(keys) => { - setSelectedTheme(keys); + setSelectedTheme(keys) // @ts-ignore - setTheme(keys.has('system') ? 'system' : keys.has('dark') ? 'dark' : 'light'); + setTheme(keys.has("system") ? "system" : keys.has("dark") ? "dark" : "light") }} items={[ - { name: 'Light', value: 'light' }, - { name: 'Dark', value: 'dark' }, - { name: 'System', value: 'system' } + { name: "Light", value: "light" }, + { name: "Dark", value: "dark" }, + { name: "System", value: "system" }, ]} > {(item) => ( @@ -196,18 +219,24 @@ function UserMenu() { </Menu.Submenu> <Menu.Separator /> - <Menu.Item routerOptions={{ method: 'post' }} href={route('logout')}> + <Menu.Item routerOptions={{ method: "post" }} href={route("logout")}> <Menu.Label>Logout</Menu.Label> <IconLogout /> </Menu.Item> </Menu.Content> </Menu> - ); + ) } export function IconBrandJustdBlocks() { return ( - <svg className="size-4.5 sm:size-5" xmlns="http://www.w3.org/2000/svg" height={24} fill="none" viewBox="0 0 24 24"> + <svg + className="size-4.5 sm:size-5" + xmlns="http://www.w3.org/2000/svg" + height={24} + fill="none" + viewBox="0 0 24 24" + > <rect width={20} height={20} x={2} y={2} fill="#0D6DFD" rx="3.75" /> <g fill="#fff" filter="url(#a)" shapeRendering="crispEdges"> <path d="M5.36 6.311c0-.525.426-.952.951-.952h1.904c.526 0 .952.427.952.952v1.904a.95.95 0 0 1-.952.952H6.311a.95.95 0 0 1-.952-.952z" /> @@ -232,7 +261,11 @@ export function IconBrandJustdBlocks() { filterUnits="userSpaceOnUse" > <feFlood floodOpacity={0} result="BackgroundImageFix" /> - <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" /> + <feColorMatrix + in="SourceAlpha" + result="hardAlpha" + values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" + /> <feOffset dy=".032" /> <feGaussianBlur stdDeviation=".032" /> <feComposite in2="hardAlpha" operator="out" /> @@ -242,5 +275,5 @@ export function IconBrandJustdBlocks() { </filter> </defs> </svg> - ); + ) } diff --git a/resources/js/layouts/guest-layout.tsx b/resources/js/layouts/guest-layout.tsx index 569c57c..9dfd568 100644 --- a/resources/js/layouts/guest-layout.tsx +++ b/resources/js/layouts/guest-layout.tsx @@ -1,28 +1,28 @@ -import { FlashMessage } from '@/components/flash-message'; -import { Logo } from '@/components/logo'; -import { Card } from '@/components/ui/card'; -import { PropsWithChildren, ReactNode } from 'react'; -import { Link } from 'ui'; +import { FlashMessage } from "@/components/flash-message" +import { Logo } from "@/components/logo" +import { Card } from "@/components/ui/card" +import type { PropsWithChildren, ReactNode } from "react" +import { Link } from "ui" interface GuestLayoutProps { - header?: string | null; - description?: string | ReactNode | null; + header?: string | null + description?: string | ReactNode | null } export default function GuestLayout({ description = null, header = null, - children + children, }: PropsWithChildren<GuestLayoutProps>) { return ( <div className="flex min-h-screen flex-col items-center pt-6 sm:justify-center sm:pt-0"> <FlashMessage /> - <Link href={route('home')}> + <Link href={route("home")}> <Logo className="mx-auto size-8" /> </Link> <div className="mt-10 w-full max-w-lg"> - <Card className="rounded-none border-l-transparent border-r-transparent shadow-none sm:rounded-lg sm:border-l-border sm:border-r-border sm:shadow-sm lg:rounded-xl "> + <Card className="rounded-none border-r-transparent border-l-transparent shadow-none sm:rounded-lg sm:border-r-border sm:border-l-border sm:shadow-sm lg:rounded-xl "> <Card.Header> <Card.Title>{header}</Card.Title> <Card.Description>{description}</Card.Description> @@ -31,5 +31,5 @@ export default function GuestLayout({ </Card> </div> </div> - ); + ) } diff --git a/resources/js/pages/about.tsx b/resources/js/pages/about.tsx index 7af1231..21e8fe0 100644 --- a/resources/js/pages/about.tsx +++ b/resources/js/pages/about.tsx @@ -1,8 +1,8 @@ -import { Header } from '@/components/header'; -import AppLayout from '@/layouts/app-layout'; -import { Head } from '@inertiajs/react'; -import React from 'react'; -import { Card, Container } from 'ui'; +import { Header } from "@/components/header" +import AppLayout from "@/layouts/app-layout" +import { Head } from "@inertiajs/react" +import type React from "react" +import { Card, Container } from "ui" export default function About() { return ( @@ -13,7 +13,7 @@ export default function About() { <Card className="p-6">Your about page content goes here.</Card> </Container> </> - ); + ) } -About.layout = (page: React.ReactNode) => <AppLayout children={page} />; +About.layout = (page: React.ReactNode) => <AppLayout children={page} /> diff --git a/resources/js/pages/auth/confirm-password.tsx b/resources/js/pages/auth/confirm-password.tsx index 4a7aec7..62cadd3 100644 --- a/resources/js/pages/auth/confirm-password.tsx +++ b/resources/js/pages/auth/confirm-password.tsx @@ -1,30 +1,30 @@ -import GuestLayout from '@/layouts/guest-layout'; -import { Head, useForm } from '@inertiajs/react'; -import { useEffect } from 'react'; -import { Button, Form, TextField } from 'ui'; +import GuestLayout from "@/layouts/guest-layout" +import { Head, useForm } from "@inertiajs/react" +import { useEffect } from "react" +import { Button, Form, TextField } from "ui" export default function ConfirmPassword() { const { data, setData, post, processing, errors, reset } = useForm({ - password: '' - }); + password: "", + }) useEffect(() => { return () => { - reset('password'); - }; - }, []); + reset("password") + } + }, []) const submit = (e: { preventDefault: () => void }) => { - e.preventDefault(); + e.preventDefault() - post(route('password.confirm')); - }; + post(route("password.confirm")) + } return ( <> <Head title="Confirm Password" /> - <div className="mb-4 text-sm text-muted-fg"> + <div className="mb-4 text-muted-fg text-sm"> This is a secure area of the application. Please confirm your password before continuing. </div> @@ -37,7 +37,7 @@ export default function ConfirmPassword() { value={data.password} className="mt-1 block w-full" autoFocus - onChange={(v) => setData('password', v)} + onChange={(v) => setData("password", v)} /> <div className="mt-4 flex items-center justify-end"> @@ -45,7 +45,7 @@ export default function ConfirmPassword() { </div> </Form> </> - ); + ) } -ConfirmPassword.layout = (page: any) => <GuestLayout children={page} />; +ConfirmPassword.layout = (page: any) => <GuestLayout children={page} /> diff --git a/resources/js/pages/auth/forgot-password.tsx b/resources/js/pages/auth/forgot-password.tsx index 48a7a09..cb10043 100644 --- a/resources/js/pages/auth/forgot-password.tsx +++ b/resources/js/pages/auth/forgot-password.tsx @@ -1,25 +1,25 @@ -import GuestLayout from '@/layouts/guest-layout'; -import { Head, useForm } from '@inertiajs/react'; -import { Button, Form, TextField } from 'ui'; +import GuestLayout from "@/layouts/guest-layout" +import { Head, useForm } from "@inertiajs/react" +import { Button, Form, TextField } from "ui" interface ForgotPasswordProps { - status: string; + status: string } export default function ForgotPassword({ status }: ForgotPasswordProps) { const { data, setData, post, processing, errors } = useForm({ - email: '' - }); + email: "", + }) const submit = (e: { preventDefault: () => void }) => { - e.preventDefault(); - post('/forgot-password'); - }; + e.preventDefault() + post("/forgot-password") + } return ( <> <Head title="Forgot Password" /> - {status && <div className="mb-4 text-sm font-medium text-success">{status}</div>} + {status && <div className="mb-4 font-medium text-sm text-success">{status}</div>} <Form validationErrors={errors} onSubmit={submit}> <TextField @@ -29,7 +29,7 @@ export default function ForgotPassword({ status }: ForgotPasswordProps) { isRequired errorMessage={errors.email} autoFocus - onChange={(v) => setData('email', v)} + onChange={(v) => setData("email", v)} /> <div className="mt-4 flex items-center justify-end"> @@ -39,7 +39,7 @@ export default function ForgotPassword({ status }: ForgotPasswordProps) { </div> </Form> </> - ); + ) } ForgotPassword.layout = (page: any) => ( @@ -50,4 +50,4 @@ ForgotPassword.layout = (page: any) => ( reset link that will allow you to choose a new one." children={page} /> -); +) diff --git a/resources/js/pages/auth/login.tsx b/resources/js/pages/auth/login.tsx index e8b4389..faef491 100644 --- a/resources/js/pages/auth/login.tsx +++ b/resources/js/pages/auth/login.tsx @@ -1,38 +1,41 @@ -import GuestLayout from '@/layouts/guest-layout'; -import { Head, useForm } from '@inertiajs/react'; -import React, { useEffect } from 'react'; -import { Button, Checkbox, Form, Link, TextField } from 'ui'; +import GuestLayout from "@/layouts/guest-layout" +import { Head, useForm } from "@inertiajs/react" +import type React from "react" +import { useEffect } from "react" +import { Button, Checkbox, Form, Link, TextField } from "ui" interface LoginProps { - status: string; - canResetPassword: boolean; + status: string + canResetPassword: boolean } export default function Login(args: LoginProps) { - const { status, canResetPassword } = args; + const { status, canResetPassword } = args const { data, setData, post, processing, errors, reset } = useForm({ - email: '', - password: '', - remember: '' - }); + email: "", + password: "", + remember: "", + }) useEffect(() => { return () => { - reset('password'); - }; - }, []); + reset("password") + } + }, []) const submit = (e: { preventDefault: () => void }) => { - e.preventDefault(); + e.preventDefault() - post(route('login')); - }; + post(route("login")) + } return ( <> <Head title="Log in" /> - {status && <div className="mb-4 text-sm font-medium text-green-600 dark:text-green-400">{status}</div>} + {status && ( + <div className="mb-4 font-medium text-green-600 text-sm dark:text-green-400">{status}</div> + )} <Form validationErrors={errors} onSubmit={submit} className="flex flex-col gap-y-4"> <TextField @@ -42,7 +45,7 @@ export default function Login(args: LoginProps) { value={data.email} autoComplete="username" autoFocus - onChange={(v) => setData('email', v)} + onChange={(v) => setData("email", v)} errorMessage={errors.email} isRequired /> @@ -52,13 +55,13 @@ export default function Login(args: LoginProps) { label="Password" value={data.password} autoComplete="current-password" - onChange={(v) => setData('password', v)} + onChange={(v) => setData("password", v)} errorMessage={errors.password} isRequired /> <div className="flex items-center justify-between"> - <Checkbox name="remember" onChange={(v) => setData('remember', v as any)}> + <Checkbox name="remember" onChange={(v) => setData("remember", v as any)}> Remember me </Checkbox> {canResetPassword && ( @@ -71,15 +74,15 @@ export default function Login(args: LoginProps) { Log in </Button> <div className="text-center"> - <Link href={route('register')} className="sm:text-sm" intent="secondary"> + <Link href={route("register")} className="sm:text-sm" intent="secondary"> Dont have account? Register </Link> </div> </Form> </> - ); + ) } Login.layout = (page: React.ReactNode) => { - return <GuestLayout header="Login" description="Log in to your account." children={page} />; -}; + return <GuestLayout header="Login" description="Log in to your account." children={page} /> +} diff --git a/resources/js/pages/auth/register.tsx b/resources/js/pages/auth/register.tsx index 8717f86..6b86b77 100644 --- a/resources/js/pages/auth/register.tsx +++ b/resources/js/pages/auth/register.tsx @@ -1,28 +1,29 @@ -import GuestLayout from '@/layouts/guest-layout'; -import { Head, useForm } from '@inertiajs/react'; -import React, { useEffect } from 'react'; -import { Button, Form, Link, TextField } from 'ui'; +import GuestLayout from "@/layouts/guest-layout" +import { Head, useForm } from "@inertiajs/react" +import type React from "react" +import { useEffect } from "react" +import { Button, Form, Link, TextField } from "ui" export default function Register() { const { data, setData, post, processing, errors, reset } = useForm({ - name: '', - email: '', - password: '', - password_confirmation: '', - terms: false - }); + name: "", + email: "", + password: "", + password_confirmation: "", + terms: false, + }) useEffect(() => { return () => { - reset('password', 'password_confirmation'); - }; - }, []); + reset("password", "password_confirmation") + } + }, []) const submit = (e: { preventDefault: () => void }) => { - e.preventDefault(); + e.preventDefault() - post('/register'); - }; + post("/register") + } return ( <> <Head title="Register" /> @@ -35,7 +36,7 @@ export default function Register() { value={data.name} autoComplete="name" autoFocus - onChange={(v) => setData('name', v)} + onChange={(v) => setData("name", v)} errorMessage={errors.name} isRequired /> @@ -45,7 +46,7 @@ export default function Register() { label="Email" value={data.email} autoComplete="username" - onChange={(v) => setData('email', v)} + onChange={(v) => setData("email", v)} errorMessage={errors.email} isRequired /> @@ -56,7 +57,7 @@ export default function Register() { label="Password" value={data.password} autoComplete="current-password" - onChange={(v) => setData('password', v)} + onChange={(v) => setData("password", v)} errorMessage={errors.password} isRequired /> @@ -66,7 +67,7 @@ export default function Register() { label="Confirm Password" name="password_confirmation" value={data.password_confirmation} - onChange={(v) => setData('password_confirmation', v)} + onChange={(v) => setData("password_confirmation", v)} errorMessage={errors.password_confirmation} isRequired /> @@ -81,9 +82,11 @@ export default function Register() { </div> </Form> </> - ); + ) } Register.layout = (page: React.ReactNode) => { - return <GuestLayout header="Register" description="Register for your new account." children={page} />; -}; + return ( + <GuestLayout header="Register" description="Register for your new account." children={page} /> + ) +} diff --git a/resources/js/pages/auth/reset-password.tsx b/resources/js/pages/auth/reset-password.tsx index f0d16fa..8657de9 100644 --- a/resources/js/pages/auth/reset-password.tsx +++ b/resources/js/pages/auth/reset-password.tsx @@ -1,34 +1,32 @@ -import GuestLayout from '@/layouts/guest-layout'; -import { Head, useForm } from '@inertiajs/react'; -import { useEffect } from 'react'; -import { Button, Form, TextField } from 'ui'; +import GuestLayout from "@/layouts/guest-layout" +import { Head, useForm } from "@inertiajs/react" +import { useEffect } from "react" +import { Button, Form, TextField } from "ui" interface ResetPasswordProps { - token: string; - email: string; + token: string + email: string } -type InputTargetProps = { name: any; value: any }; - export default function ResetPassword(args: ResetPasswordProps) { - const { token, email } = args; + const { token, email } = args const { data, setData, post, processing, errors, reset } = useForm({ token: token, email: email, - password: '', - password_confirmation: '' - }); + password: "", + password_confirmation: "", + }) useEffect(() => { return () => { - reset('password', 'password_confirmation'); - }; - }, []); + reset("password", "password_confirmation") + } + }, []) const submit = (e: { preventDefault: () => void }) => { - e.preventDefault(); - post('/reset-password'); - }; + e.preventDefault() + post("/reset-password") + } return ( <> @@ -43,7 +41,7 @@ export default function ResetPassword(args: ResetPasswordProps) { name="email" value={data.email} autoComplete="username" - onChange={(v) => setData('email', v)} + onChange={(v) => setData("email", v)} /> <TextField @@ -55,7 +53,7 @@ export default function ResetPassword(args: ResetPasswordProps) { value={data.password} autoComplete="new-password" autoFocus - onChange={(v) => setData('password', v)} + onChange={(v) => setData("password", v)} /> <TextField @@ -64,7 +62,7 @@ export default function ResetPassword(args: ResetPasswordProps) { name="password_confirmation" value={data.password_confirmation} autoComplete="new-password" - onChange={(v) => setData('password_confirmation', v)} + onChange={(v) => setData("password_confirmation", v)} errorMessage={errors.password_confirmation} isRequired /> @@ -76,7 +74,7 @@ export default function ResetPassword(args: ResetPasswordProps) { </div> </Form> </> - ); + ) } -ResetPassword.layout = (page: any) => <GuestLayout children={page} />; +ResetPassword.layout = (page: any) => <GuestLayout children={page} /> diff --git a/resources/js/pages/auth/verify-email.tsx b/resources/js/pages/auth/verify-email.tsx index 0913b26..3bd483b 100644 --- a/resources/js/pages/auth/verify-email.tsx +++ b/resources/js/pages/auth/verify-email.tsx @@ -1,21 +1,22 @@ -import GuestLayout from '@/layouts/guest-layout'; -import { Head, useForm } from '@inertiajs/react'; -import { Button, Form, Link } from 'ui'; +import GuestLayout from "@/layouts/guest-layout" +import { Head, useForm } from "@inertiajs/react" +import { Button, Form, Link } from "ui" export default function VerifyEmail({ status }: { status?: any }) { - const { post, processing } = useForm(); + const { post, processing } = useForm() const submit = (e: { preventDefault: () => void }) => { - e.preventDefault(); + e.preventDefault() - post('/email/verification-notification'); - }; + post("/email/verification-notification") + } return ( <> <Head title="Email Verification" /> - {status === 'verification-link-sent' && ( - <div className="mb-4 text-sm font-medium text-green-600"> - A new verification link has been sent to the email address you provided during registration. + {status === "verification-link-sent" && ( + <div className="mb-4 font-medium text-green-600 text-sm"> + A new verification link has been sent to the email address you provided during + registration. </div> )} @@ -27,9 +28,9 @@ export default function VerifyEmail({ status }: { status?: any }) { </Form> <Link - href={'/logout'} + href={"/logout"} routerOptions={{ - method: 'post' + method: "post", }} intent="secondary" > @@ -37,7 +38,7 @@ export default function VerifyEmail({ status }: { status?: any }) { </Link> </div> </> - ); + ) } VerifyEmail.layout = (page: any) => ( @@ -48,4 +49,4 @@ VerifyEmail.layout = (page: any) => ( link we just emailed to you? If you didn't receive the email, we will gladly send you another." children={page} /> -); +) diff --git a/resources/js/pages/dashboard.tsx b/resources/js/pages/dashboard.tsx index 46db103..85f1645 100644 --- a/resources/js/pages/dashboard.tsx +++ b/resources/js/pages/dashboard.tsx @@ -1,7 +1,7 @@ -import AppLayout from '@/layouts/app-layout'; -import { PagePropsData } from '@/types'; -import { Head } from '@inertiajs/react'; -import { Card, Container } from 'ui'; +import AppLayout from "@/layouts/app-layout" +import type { PagePropsData } from "@/types" +import { Head } from "@inertiajs/react" +import { Card, Container } from "ui" export default function Dashboard({ auth }: PagePropsData) { return ( @@ -9,10 +9,10 @@ export default function Dashboard({ auth }: PagePropsData) { <Head title="Dashboard" /> <Container className="py-12"> - <Card className="p-6 w-full">Hello, {auth.user.name}!</Card> + <Card className="w-full p-6">Hello, {auth.user.name}!</Card> </Container> </> - ); + ) } -Dashboard.layout = (page: any) => <AppLayout children={page} />; +Dashboard.layout = (page: any) => <AppLayout children={page} /> diff --git a/resources/js/pages/home.tsx b/resources/js/pages/home.tsx index 6b842eb..0632db1 100644 --- a/resources/js/pages/home.tsx +++ b/resources/js/pages/home.tsx @@ -1,47 +1,52 @@ -import { Header } from '@/components/header'; -import { Logo } from '@/components/logo'; -import AppLayout from '@/layouts/app-layout'; -import { IconBrandJustdBlocks } from '@/layouts/app-navbar'; -import { Head } from '@inertiajs/react'; -import { IconBrandJustd, IconBrandParanoid, IconBrandParsinta, IconWindowVisitFill } from 'justd-icons'; -import { Card, Container, Link } from 'ui'; +import { Header } from "@/components/header" +import { Logo } from "@/components/logo" +import AppLayout from "@/layouts/app-layout" +import { IconBrandJustdBlocks } from "@/layouts/app-navbar" +import { Head } from "@inertiajs/react" +import { + IconBrandJustd, + IconBrandParanoid, + IconBrandParsinta, + IconWindowVisitFill, +} from "justd-icons" +import { Card, Container, Link } from "ui" const items = [ { - name: 'Justd', - url: 'https://getjustd.com', + name: "Justd", + url: "https://getjustd.com", icon: IconBrandJustd, description: - ' Justd is a chill set of React components, built on top of React Aria Components, all about keeping the web accessible.' + " Justd is a chill set of React components, built on top of React Aria Components, all about keeping the web accessible.", }, { - name: 'Blocks', - url: 'https://blocks.getjustd.com', + name: "Blocks", + url: "https://blocks.getjustd.com", icon: IconBrandJustdBlocks, description: - 'Create stunning, professional-grade layouts that not only save time but also elevate the quality of your projects.' + "Create stunning, professional-grade layouts that not only save time but also elevate the quality of your projects.", }, { - name: 'Icons', - url: 'https://getjustd.com/icons', + name: "Icons", + url: "https://getjustd.com/icons", icon: IconBrandParanoid, description: - 'A library of beautifully crafted react icons, perfect for enhancing the visual appeal and user experience of your web applications.' + "A library of beautifully crafted react icons, perfect for enhancing the visual appeal and user experience of your web applications.", }, { - name: 'Templates', - url: 'https://blocks.getjustd.com/templates', + name: "Templates", + url: "https://blocks.getjustd.com/templates", icon: IconWindowVisitFill, - description: 'Explore the next.js templates from web apps to design systems, all here.' + description: "Explore the next.js templates from web apps to design systems, all here.", }, { - name: 'Parsinta', - url: 'https://parsinta.com', + name: "Parsinta", + url: "https://parsinta.com", icon: IconBrandParsinta, description: - 'Improve your skills with Parsinta by pushing your skills to the next level, through the series here such as Laravel, Vue, React, Tailwind CSS and Much more.' - } -]; + "Improve your skills with Parsinta by pushing your skills to the next level, through the series here such as Laravel, Vue, React, Tailwind CSS and Much more.", + }, +] export default function Home() { return ( @@ -49,31 +54,34 @@ export default function Home() { <Head title="Welcome to Laravel" /> <Header title="Inertia Typescript" /> <Container> - <div className="overflow-hidden rounded-lg border lg:border-border border-transparent"> + <div className="overflow-hidden rounded-lg border border-transparent lg:border-border"> <div> <div className="sm:p-20"> <Link href="https://getjustd.com" target="_blank" - className="grid place-content-center size-12 outline-1 outline-border rounded-full" + className="grid size-12 place-content-center rounded-full outline-1 outline-border" > <Logo className="block size-7" /> </Link> - <div className="max-w-2xl mb-8"> - <div className="mt-6 text-xl sm:text-2xl">Laravel application with Inertia and React Typescript!</div> + <div className="mb-8 max-w-2xl"> + <div className="mt-6 text-xl sm:text-2xl"> + Laravel application with Inertia and React Typescript! + </div> <div className="mt-4 text-muted-fg sm:text-lg"> - This is a Laravel application with Inertia and React Typescript. It is a work in progress. If you have - any questions or suggestions, please feel free to contact me. + This is a Laravel application with Inertia and React Typescript. It is a work in + progress. If you have any questions or suggestions, please feel free to contact + me. </div> </div> - <div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> + <div className="grid grid-cols-1 gap-4 sm:grid-cols-2"> {items.map((item) => ( <div className="relative" key={item.name}> <Link className="absolute inset-0 size-full" target="_blank" href={item.url} /> <Card> <div className="px-6 pt-6"> - <div className="size-8 *:size-5 grid place-content-center rounded-full border"> + <div className="grid size-8 place-content-center rounded-full border *:size-5"> <item.icon /> </div> </div> @@ -90,7 +98,7 @@ export default function Home() { </div> </Container> </> - ); + ) } -Home.layout = (page: any) => <AppLayout children={page} />; +Home.layout = (page: any) => <AppLayout children={page} /> diff --git a/resources/js/pages/profile/edit.tsx b/resources/js/pages/profile/edit.tsx index 8b39626..c6bf08e 100644 --- a/resources/js/pages/profile/edit.tsx +++ b/resources/js/pages/profile/edit.tsx @@ -1,15 +1,15 @@ -import { Header } from '@/components/header'; -import AppLayout from '@/layouts/app-layout'; -import { Head } from '@inertiajs/react'; -import { Container } from 'ui'; -import { DeleteUserForm, UpdatePasswordForm, UpdateProfileInformationForm } from './partials'; +import { Header } from "@/components/header" +import AppLayout from "@/layouts/app-layout" +import { Head } from "@inertiajs/react" +import { Container } from "ui" +import { DeleteUserForm, UpdatePasswordForm, UpdateProfileInformationForm } from "./partials" interface Props { - mustVerifyEmail: boolean; - status?: string; + mustVerifyEmail: boolean + status?: string } -const title = 'Profile'; +const title = "Profile" export default function Edit({ mustVerifyEmail, status }: Props) { return ( @@ -17,14 +17,14 @@ export default function Edit({ mustVerifyEmail, status }: Props) { <Head title={title} /> <Header title={title} /> <Container> - <div className="max-w-3xl flex flex-col gap-y-6"> + <div className="flex max-w-3xl flex-col gap-y-6"> <UpdateProfileInformationForm mustVerifyEmail={mustVerifyEmail} status={status} /> <UpdatePasswordForm /> <DeleteUserForm /> </div> </Container> </> - ); + ) } -Edit.layout = (page: any) => <AppLayout children={page} />; +Edit.layout = (page: any) => <AppLayout children={page} /> diff --git a/resources/js/pages/profile/partials/delete-user-form.tsx b/resources/js/pages/profile/partials/delete-user-form.tsx index 12e997c..49ec561 100644 --- a/resources/js/pages/profile/partials/delete-user-form.tsx +++ b/resources/js/pages/profile/partials/delete-user-form.tsx @@ -1,45 +1,46 @@ -import { Button } from '@/components/ui/button'; -import { useForm } from '@inertiajs/react'; -import { useState } from 'react'; -import { Card, Modal, TextField } from 'ui'; +import { Button } from "@/components/ui/button" +import { useForm } from "@inertiajs/react" +import { useState } from "react" +import { Card, Modal, TextField } from "ui" export function DeleteUserForm() { - const [confirmingUserDeletion, setConfirmingUserDeletion] = useState(false); + const [confirmingUserDeletion, setConfirmingUserDeletion] = useState(false) const { data, setData, delete: destroy, processing, reset, - errors + errors, } = useForm({ - password: '' - }); + password: "", + }) const confirmUserDeletion = () => { - setConfirmingUserDeletion(true); - }; + setConfirmingUserDeletion(true) + } const deleteUser = () => { - destroy(route('profile.destroy'), { + destroy(route("profile.destroy"), { preserveScroll: true, onSuccess: () => closeModal(), - onFinish: () => reset() - }); - }; + onFinish: () => reset(), + }) + } const closeModal = () => { - setConfirmingUserDeletion(false); - reset(); - }; + setConfirmingUserDeletion(false) + reset() + } return ( <Card> <Card.Header> <Card.Title>Delete Account</Card.Title> <Card.Description> - Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your - account, please download any data or information that you wish to retain. + Once your account is deleted, all of its resources and data will be permanently deleted. + Before deleting your account, please download any data or information that you wish to + retain. </Card.Description> </Card.Header> <Card.Content> @@ -49,9 +50,9 @@ export function DeleteUserForm() { <Modal.Header> <Modal.Title>Delete Account</Modal.Title> <Modal.Description> - Are you sure you want to delete your account? Once your account is deleted, all of its resources and - data will be permanently deleted. Please enter your password to confirm you would like to permanently - delete your account. + Are you sure you want to delete your account? Once your account is deleted, all of + its resources and data will be permanently deleted. Please enter your password to + confirm you would like to permanently delete your account. </Modal.Description> </Modal.Header> @@ -60,7 +61,7 @@ export function DeleteUserForm() { type="password" placeholder="Password" value={data.password} - onChange={(v) => setData('password', v)} + onChange={(v) => setData("password", v)} errorMessage={errors.password} isRequired /> @@ -75,5 +76,5 @@ export function DeleteUserForm() { </Modal> </Card.Content> </Card> - ); + ) } diff --git a/resources/js/pages/profile/partials/index.ts b/resources/js/pages/profile/partials/index.ts index db4bbbd..0d90590 100644 --- a/resources/js/pages/profile/partials/index.ts +++ b/resources/js/pages/profile/partials/index.ts @@ -1,3 +1,3 @@ -export * from './delete-user-form'; -export * from './update-password-form'; -export * from './update-profile-information-form'; +export * from "./delete-user-form" +export * from "./update-password-form" +export * from "./update-profile-information-form" diff --git a/resources/js/pages/profile/partials/update-password-form.tsx b/resources/js/pages/profile/partials/update-password-form.tsx index e17f338..cf6dade 100644 --- a/resources/js/pages/profile/partials/update-password-form.tsx +++ b/resources/js/pages/profile/partials/update-password-form.tsx @@ -1,44 +1,46 @@ -import { useForm } from '@inertiajs/react'; -import { useRef } from 'react'; -import { toast } from 'sonner'; -import { Button, Card, Form, TextField } from 'ui'; +import { useForm } from "@inertiajs/react" +import { useRef } from "react" +import { toast } from "sonner" +import { Button, Card, Form, TextField } from "ui" export function UpdatePasswordForm() { - const passwordInput = useRef<HTMLInputElement>(null); - const currentPasswordInput = useRef<HTMLInputElement>(null); + const passwordInput = useRef<HTMLInputElement>(null) + const currentPasswordInput = useRef<HTMLInputElement>(null) const { data, setData, put, errors, reset, processing, recentlySuccessful } = useForm({ - current_password: '', - password: '', - password_confirmation: '' - }); + current_password: "", + password: "", + password_confirmation: "", + }) const submit = (e: { preventDefault: () => void }) => { - e.preventDefault(); - put(route('password.update'), { + e.preventDefault() + put(route("password.update"), { preserveScroll: true, onSuccess: () => { - toast.success('Your profile information has been updated.'); - reset(); + toast.success("Your profile information has been updated.") + reset() }, onError: () => { if (errors.password) { - reset('password', 'password_confirmation'); - passwordInput.current?.focus(); + reset("password", "password_confirmation") + passwordInput.current?.focus() } if (errors.current_password) { - reset('current_password'); - currentPasswordInput.current?.focus(); + reset("current_password") + currentPasswordInput.current?.focus() } - } - }); - }; + }, + }) + } return ( <Card> <Card.Header> <Card.Title>Update Password</Card.Title> - <Card.Description>Ensure your account is using a long, random password to stay secure.</Card.Description> + <Card.Description> + Ensure your account is using a long, random password to stay secure. + </Card.Description> </Card.Header> <Card.Content> @@ -46,7 +48,7 @@ export function UpdatePasswordForm() { <TextField label="Current Password" value={data.current_password} - onChange={(v) => setData('current_password', v)} + onChange={(v) => setData("current_password", v)} type="password" autoComplete="current-password" isRequired @@ -58,7 +60,7 @@ export function UpdatePasswordForm() { label="Password" value={data.password} autoComplete="current-password" - onChange={(v) => setData('password', v)} + onChange={(v) => setData("password", v)} errorMessage={errors.password} isRequired /> @@ -68,7 +70,7 @@ export function UpdatePasswordForm() { label="Confirm Password" name="password_confirmation" value={data.password_confirmation} - onChange={(v) => setData('password_confirmation', v)} + onChange={(v) => setData("password_confirmation", v)} errorMessage={errors.password_confirmation} isRequired /> @@ -78,10 +80,10 @@ export function UpdatePasswordForm() { Save </Button> - {recentlySuccessful && <p className="text-sm text-muted-fg">Saved.</p>} + {recentlySuccessful && <p className="text-muted-fg text-sm">Saved.</p>} </div> </Form> </Card.Content> </Card> - ); + ) } diff --git a/resources/js/pages/profile/partials/update-profile-information-form.tsx b/resources/js/pages/profile/partials/update-profile-information-form.tsx index 0222e8e..b7dd158 100644 --- a/resources/js/pages/profile/partials/update-profile-information-form.tsx +++ b/resources/js/pages/profile/partials/update-profile-information-form.tsx @@ -1,32 +1,34 @@ -import { PagePropsData } from '@/types'; -import { useForm, usePage } from '@inertiajs/react'; -import { Button, Card, Form, Link, TextField } from 'ui'; +import type { PagePropsData } from "@/types" +import { useForm, usePage } from "@inertiajs/react" +import { Button, Card, Form, Link, TextField } from "ui" interface Props { - mustVerifyEmail: boolean; - status?: string; - className?: string; + mustVerifyEmail: boolean + status?: string + className?: string } export function UpdateProfileInformationForm({ mustVerifyEmail, status, className }: Props) { - const { auth } = usePage<PagePropsData>().props; + const { auth } = usePage<PagePropsData>().props const { data, setData, patch, errors, processing, recentlySuccessful } = useForm({ - name: auth.user.name ?? '', - email: auth.user.email ?? '' - }); + name: auth.user.name ?? "", + email: auth.user.email ?? "", + }) const submit = (e: { preventDefault: () => void }) => { - e.preventDefault(); - patch(route('profile.update'), { - preserveScroll: true - }); - }; + e.preventDefault() + patch(route("profile.update"), { + preserveScroll: true, + }) + } return ( <Card> <Card.Header> <Card.Title>Profile Information</Card.Title> - <Card.Description>Update your account's profile information and email address.</Card.Description> + <Card.Description> + Update your account's profile information and email address. + </Card.Description> </Card.Header> <Card.Content> <Form validationErrors={errors} onSubmit={submit} className="space-y-6"> @@ -35,7 +37,7 @@ export function UpdateProfileInformationForm({ mustVerifyEmail, status, classNam label="Name" type="text" value={data.name} - onChange={(v) => setData('name', v)} + onChange={(v) => setData("name", v)} isRequired errorMessage={errors.name} autoFocus @@ -46,7 +48,7 @@ export function UpdateProfileInformationForm({ mustVerifyEmail, status, classNam type="email" label="Email" value={data.email} - onChange={(v) => setData('email', v)} + onChange={(v) => setData("email", v)} isRequired errorMessage={errors.email} autoComplete="email" @@ -57,18 +59,18 @@ export function UpdateProfileInformationForm({ mustVerifyEmail, status, classNam <p className="mt-2 text-sm"> Your email address is unverified. <Link - href={route('verification.send')} + href={route("verification.send")} intent="secondary" routerOptions={{ - method: 'post' + method: "post", }} > Click here to re-send the verification email. </Link> </p> - {status === 'verification-link-sent' && ( - <div className="mt-2 text-sm font-medium text-green-600"> + {status === "verification-link-sent" && ( + <div className="mt-2 font-medium text-green-600 text-sm"> A new verification link has been sent to your email address. </div> )} @@ -79,10 +81,10 @@ export function UpdateProfileInformationForm({ mustVerifyEmail, status, classNam <Button type="submit" isDisabled={processing}> Save </Button> - {recentlySuccessful && <p className="text-sm text-muted-fg">Saved.</p>} + {recentlySuccessful && <p className="text-muted-fg text-sm">Saved.</p>} </div> </Form> </Card.Content> </Card> - ); + ) } diff --git a/resources/js/ssr.tsx b/resources/js/ssr.tsx index ebcbe28..8319441 100644 --- a/resources/js/ssr.tsx +++ b/resources/js/ssr.tsx @@ -1,28 +1,28 @@ -import { Ziggy as ziggy } from '@/ziggy'; -import { createInertiaApp } from '@inertiajs/react'; -import createServer from '@inertiajs/react/server'; -import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'; -import ReactDOMServer from 'react-dom/server'; -import { route, type RouteName } from 'ziggy-js'; +import { createInertiaApp } from "@inertiajs/react" +import createServer from "@inertiajs/react/server" +import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers" +import ReactDOMServer from "react-dom/server" +import { route } from "ziggy-js" + +const appName = import.meta.env.VITE_APP_NAME || "Laravel" -const appName = import.meta.env.VITE_APP_NAME || 'Laravel'; createServer((page) => createInertiaApp({ page, render: ReactDOMServer.renderToString, - title: (title) => (title ? `${title} / ${appName}` : appName), - resolve: (name) => resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')), + title: (title) => `${title} - ${appName}`, + resolve: (name) => + resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob("./pages/**/*.tsx")), setup: ({ App, props }) => { - // @ts-expect-error - global.route<RouteName> = (name, params, absolute) => - // @ts-expect-error + // @ts-ignore + global.route = (name, params, absolute) => route(name, params as any, absolute, { - ...ziggy, - // @ts-expect-error - location: new URL(page.props.ziggy.location) - }); - - return <App {...props} />; - } - }) -); + // @ts-ignore + ...page.props.ziggy, + // @ts-ignore + location: new URL(page.props.ziggy.location), + }) + return <App {...props} /> + }, + }), +) diff --git a/resources/js/types/global.d.ts b/resources/js/types/global.d.ts index 3d6ba97..496e063 100644 --- a/resources/js/types/global.d.ts +++ b/resources/js/types/global.d.ts @@ -1,17 +1,17 @@ -import { VisitOptions } from '@inertiajs/core'; -import { type AxiosInstance } from 'axios'; -import { type route as routeFn } from 'ziggy-js'; +import type { VisitOptions } from "@inertiajs/core" +import type { AxiosInstance } from "axios" +import type { route as routeFn } from "ziggy-js" declare global { interface Window { - axios: AxiosInstance; + axios: AxiosInstance } - let route: typeof routeFn; + let route: typeof routeFn } -declare module 'react-aria-components' { +declare module "react-aria-components" { interface RouterConfig { - routerOptions: VisitOptions; + routerOptions: VisitOptions } } diff --git a/resources/js/types/index.ts b/resources/js/types/index.ts index 7a0abac..05c27e9 100644 --- a/resources/js/types/index.ts +++ b/resources/js/types/index.ts @@ -1,18 +1,18 @@ export type AuthData = { - user: AuthenticatedUserData; -}; + user: AuthenticatedUserData +} export type AuthenticatedUserData = { - id: number; - email: string; - name: string; - gravatar: string; - email_verified_at: string | null; -}; + id: number + email: string + name: string + gravatar: string + email_verified_at: string | null +} export type FlashMessageData = { - type: string; - message: string; -}; + type: string + message: string +} export type PagePropsData = { - auth: AuthData; - flashMessage: FlashMessageData; -}; + auth: AuthData + flashMessage: FlashMessageData +} diff --git a/resources/js/utils/classes.ts b/resources/js/utils/classes.ts index 80a7444..c9ac784 100644 --- a/resources/js/utils/classes.ts +++ b/resources/js/utils/classes.ts @@ -1,6 +1,6 @@ -import { ClassValue, clsx } from 'clsx'; -import { twMerge } from 'tailwind-merge'; +import { type ClassValue, clsx } from "clsx" +import { twMerge } from "tailwind-merge" -const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs)); +const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs)) -export { cn }; +export { cn } diff --git a/resources/js/utils/use-media-query.ts b/resources/js/utils/use-media-query.ts index 110f85b..f6f9cb7 100644 --- a/resources/js/utils/use-media-query.ts +++ b/resources/js/utils/use-media-query.ts @@ -1,19 +1,19 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useState } from "react" export const useMediaQuery = (query: string) => { - const [value, setValue] = useState(false); + const [value, setValue] = useState(false) useEffect(() => { const onChange = (event: MediaQueryListEvent) => { - setValue(event.matches); - }; + setValue(event.matches) + } - const result = matchMedia(query); - result.addEventListener('change', onChange); - setValue(result.matches); + const result = matchMedia(query) + result.addEventListener("change", onChange) + setValue(result.matches) - return () => result.removeEventListener('change', onChange); - }, [query]); + return () => result.removeEventListener("change", onChange) + }, [query]) - return value; -}; + return value +}