diff --git a/CHANGELOG.md b/CHANGELOG.md index 61d5335..38446d2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,11 +1,17 @@ -## [1.0.16](https://github.com/justdlabs/inertia.ts/compare/1.0.15...1.0.16) (2024-09-06) +## [1.0.17](https://github.com/justdlabs/inertia.ts/compare/1.0.16...1.0.17) (2024-09-07) + + +### Bug Fixes + +* move theme switcher to menu sub ([cac009d](https://github.com/justdlabs/inertia.ts/commit/cac009d266be9c5586ecf1446f3e6859af2e237e)) +## [1.0.16](https://github.com/justdlabs/inertia.ts/compare/1.0.15...1.0.16) (2024-09-06) ### Bug Fixes -* bump ([049a347](https://github.com/justdlabs/inertia.ts/commit/049a347323942bccbd54e3b7081a315a49436d40)) +- bump ([049a347](https://github.com/justdlabs/inertia.ts/commit/049a347323942bccbd54e3b7081a315a49436d40)) ## [1.0.15](https://github.com/justdlabs/inertia.ts/compare/1.0.14...1.0.15) (2024-09-01) diff --git a/bun.lockb b/bun.lockb index 917f90f..9640741 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/composer.json b/composer.json index 749ac16..77383f0 100644 --- a/composer.json +++ b/composer.json @@ -1,6 +1,6 @@ { "name": "justd/laravel", - "version": "1.0.16", + "version": "1.0.17", "type": "project", "description": "The skeleton application for the Laravel framework.", "keywords": [ diff --git a/package-lock.json b/package-lock.json index ce1763a..197e438 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { "name": "inertia.ts", - "version": "1.0.16", + "version": "1.0.17", "lockfileVersion": 3, "requires": true, "packages": { "": { - "version": "1.0.16", + "version": "1.0.17", "dependencies": { "clsx": "^2.1.1", "framer-motion": "^11.3.31", diff --git a/package.json b/package.json index 339ca2b..ab3382d 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,8 @@ "@inertiajs/react": "^1.2.0", "@release-it/bumper": "^6.0.1", "@release-it/conventional-changelog": "^8.0.1", - "@tailwindcss/forms": "^0.5.8", - "@types/node": "^18.19.47", + "@tailwindcss/forms": "^0.5.9", + "@types/node": "^18.19.50", "@types/react": "^18.3.5", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.1", @@ -23,7 +23,7 @@ "axios": "^1.7.7", "husky": "^9.1.5", "laravel-vite-plugin": "^1.0.5", - "postcss": "^8.4.42", + "postcss": "^8.4.45", "prettier": "^3.3.3", "prettier-plugin-organize-imports": "^4.0.0", "prettier-plugin-tailwindcss": "^0.6.6", @@ -32,12 +32,12 @@ "release-it": "^17.6.0", "tailwindcss": "^3.4.10", "typescript": "^5.5.4", - "vite": "^5.4.2", + "vite": "^5.4.3", "vite-plugin-watch": "^0.3.1" }, "dependencies": { "clsx": "^2.1.1", - "framer-motion": "^11.3.31", + "framer-motion": "^11.5.4", "justd-icons": "^1.4.44", "react-aria-components": "^1.3.3", "sonner": "^1.5.0", @@ -80,5 +80,5 @@ } } }, - "version": "1.0.16" + "version": "1.0.17" } diff --git a/resources/js/bootstrap.ts b/resources/js/bootstrap.ts index ea21db8..ff0e4f7 100644 --- a/resources/js/bootstrap.ts +++ b/resources/js/bootstrap.ts @@ -1,4 +1,5 @@ import axios from 'axios' + window.axios = axios window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest' diff --git a/resources/js/components/navbar.tsx b/resources/js/components/navbar.tsx index b6e638a..3fdd60f 100644 --- a/resources/js/components/navbar.tsx +++ b/resources/js/components/navbar.tsx @@ -2,6 +2,7 @@ import { PagePropsData } from '@/types' import { usePage } from '@inertiajs/react' import { Container } from 'components/container' import { Logo } from 'components/logo' +import { useTheme } from 'components/theme-provider' import { ThemeSwitcher } from 'components/theme-switcher' import { motion } from 'framer-motion' import { @@ -13,7 +14,7 @@ import { IconSettings } from 'justd-icons' import React from 'react' -import { ListBox, ListBoxItem, ListBoxItemProps } from 'react-aria-components' +import { ListBox, ListBoxItem, ListBoxItemProps, Selection } from 'react-aria-components' import { tv } from 'tailwind-variants' import { Avatar, Button, Link, Menu, Sheet, useMediaQuery } from 'ui' @@ -133,6 +134,9 @@ function LoginMenu() { function UserMenu() { const { auth } = usePage().props + const { theme, setTheme } = useTheme() + const currentTheme = theme || 'system' + const [selectedTheme, setSelectedTheme] = React.useState(new Set([currentTheme])) return ( @@ -141,11 +145,8 @@ function UserMenu() { -
- -
{auth.user.name}
-
+
{auth.user.email}
@@ -155,6 +156,29 @@ function UserMenu() { Settings + + Preferences + { + setSelectedTheme(keys) + // @ts-ignore + setTheme(keys.has('system') ? 'system' : keys.has('dark') ? 'dark' : 'light') + }} + items={[ + { name: 'Light', value: 'light' }, + { name: 'Dark', value: 'dark' }, + { name: 'System', value: 'system' } + ]} + > + {(item) => ( + + {item.name} + + )} + + Documentation diff --git a/resources/js/components/theme-provider.tsx b/resources/js/components/theme-provider.tsx index 4bd2aa1..e997db0 100644 --- a/resources/js/components/theme-provider.tsx +++ b/resources/js/components/theme-provider.tsx @@ -1,4 +1,4 @@ -import { createContext, useContext, useEffect, useState } from 'react' +import * as React from 'react' type Theme = 'dark' | 'light' | 'system' @@ -18,7 +18,7 @@ const initialState: ThemeProviderState = { setTheme: () => null } -const ThemeProviderContext = createContext(initialState) +const ThemeProviderContext = React.createContext(initialState) export function ThemeProvider({ children, @@ -26,9 +26,9 @@ export function ThemeProvider({ storageKey = 'vite-ui-theme', ...props }: ThemeProviderProps) { - const [theme, setTheme] = useState(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme) + const [theme, setTheme] = React.useState(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme) - useEffect(() => { + React.useEffect(() => { const root = window.document.documentElement root.classList.remove('light', 'dark') @@ -40,14 +40,18 @@ export function ThemeProvider({ return } - root.classList.add(theme) + if (theme === 'light' || theme === 'dark') { + root.classList.add(theme) + } }, [theme]) const value = { theme, - setTheme: (theme: Theme) => { - localStorage.setItem(storageKey, theme) - setTheme(theme) + setTheme: (newTheme: Theme) => { + if (newTheme === 'light' || newTheme === 'dark' || newTheme === 'system') { + localStorage.setItem(storageKey, newTheme) + setTheme(newTheme) + } } } @@ -59,7 +63,7 @@ export function ThemeProvider({ } export const useTheme = () => { - const context = useContext(ThemeProviderContext) + const context = React.useContext(ThemeProviderContext) if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider') diff --git a/resources/js/components/ui/avatar.tsx b/resources/js/components/ui/avatar.tsx index 0366b93..f57e41a 100644 --- a/resources/js/components/ui/avatar.tsx +++ b/resources/js/components/ui/avatar.tsx @@ -107,7 +107,7 @@ type AvatarBadgeProps = { } const avatarBadgeStyles = tv({ - base: ['size-3 z-1 absolute bottom-0 right-0 z-10 rounded-full ring-[1.5px] ring-bg bg-bg'], + base: ['size-3 z-10 absolute bottom-0 right-0 rounded-full ring-[1.5px] ring-bg bg-bg'], variants: { size: { 'extra-small': 'size-[0.360rem] translate-x-[0%] translate-y-[0%]', diff --git a/resources/js/components/ui/dialog.tsx b/resources/js/components/ui/dialog.tsx index 39be6a1..6c5f0b4 100644 --- a/resources/js/components/ui/dialog.tsx +++ b/resources/js/components/ui/dialog.tsx @@ -72,15 +72,13 @@ const Header = ({ className, ...props }: DialogHeaderProps) => { ) } -type DialogTitleProps = HeadingProps & { - className?: string -} - -const Title = ({ tracking = 'tight', level = 2, className, ...props }: DialogTitleProps) => ( +const Title = ({ tracking = 'tight', level = 2, className, ...props }: HeadingProps) => ( ) -const Description = ({ className, ...props }: HeadingProps) =>

+const Description = ({ className, ...props }: React.HTMLAttributes) => ( +

+) const Body = ({ className, ...props }: React.HTMLAttributes) => (
diff --git a/resources/js/components/ui/dropdown.tsx b/resources/js/components/ui/dropdown.tsx index 1cde33f..3c27480 100644 --- a/resources/js/components/ui/dropdown.tsx +++ b/resources/js/components/ui/dropdown.tsx @@ -17,10 +17,10 @@ const dropdownItemStyles = tv({ base: [ 'group flex cursor-default select-none items-center gap-x-1.5 rounded-[calc(var(--radius)-1px)] py-2 pl-2.5 relative pr-1.5 text-base outline outline-0 forced-color-adjust-none lg:text-sm', 'has-submenu:open:data-[danger=true]:bg-danger/20 has-submenu:open:data-[danger=true]:text-danger', - 'has-submenu:open:bg-accent has-submenu:open:text-accent-fg [&[data-has-submenu][data-open]>[data-slot=icon]]:text-accent-fg', + 'has-submenu:open:bg-accent has-submenu:open:text-accent-fg [&[data-has-submenu][data-open]_[data-slot=icon]]:text-accent-fg', '[&_[data-slot=avatar]]:-mr-0.5 [&_[data-slot=avatar]]:size-6 sm:[&_[data-slot=avatar]]:size-5', - '[&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-muted-fg [&[data-hovered]>[data-slot=icon]]:text-accent-fg [&[data-focused]>[data-slot=icon]]:text-accent-fg [&[data-danger]>[data-slot=icon]]:text-danger/60', - 'forced-colors:[&>[data-slot=icon]]:text-[CanvasText] forced-colors:[&>[data-slot=icon]]:group-data-[focus]:text-[Canvas] ' + '[&_[data-slot=icon]]:size-4 [&_[data-slot=icon]]:shrink-0 [&_[data-slot=icon]]:text-muted-fg [&[data-hovered]_[data-slot=icon]]:text-accent-fg [&[data-focused]_[data-slot=icon]]:text-accent-fg [&[data-danger]_[data-slot=icon]]:text-danger/60', + 'forced-colors:[&_[data-slot=icon]]:text-[CanvasText] forced-colors:[&_[data-slot=icon]]:group-data-[focus]:text-[Canvas] ' ], variants: { isDisabled: { diff --git a/resources/js/components/ui/heading.tsx b/resources/js/components/ui/heading.tsx index a603b75..4e1e004 100644 --- a/resources/js/components/ui/heading.tsx +++ b/resources/js/components/ui/heading.tsx @@ -1,8 +1,6 @@ import { Heading as HeadingPrimitive } from 'react-aria-components' import { tv } from 'tailwind-variants' -import { isIos } from './primitive' - const headingStyles = tv({ base: 'font-sans tracking-tight text-fg', variants: { @@ -36,7 +34,7 @@ const Heading = ({ className, tracking = 'normal', level = 1, ...props }: Headin className={headingStyles({ level, tracking, - className: isIos() ? 'font-medium' : className + className })} {...props} /> diff --git a/resources/js/components/ui/popover.tsx b/resources/js/components/ui/popover.tsx index 3706dfe..537bc86 100644 --- a/resources/js/components/ui/popover.tsx +++ b/resources/js/components/ui/popover.tsx @@ -23,8 +23,8 @@ const Popover = ({ children, ...props }: { children: React.ReactNode }) => { return {children} } -const Title = ({ className, ...props }: React.ComponentProps) => ( - +const Title = ({ level = 2, className, ...props }: React.ComponentProps) => ( + ) const Header = ({ className, ...props }: React.HTMLAttributes) => ( @@ -67,7 +67,7 @@ const drawerStyles = tv({ variants: { isMenu: { true: 'p-0 [&_[role=dialog]]:px-0 rounded-t-xl', - false: 'p-4 rounded-t-3xl' + false: 'py-4 rounded-t-3xl' }, isEntering: { true: [ diff --git a/resources/js/components/ui/table.tsx b/resources/js/components/ui/table.tsx index 951b0b4..b399a7d 100644 --- a/resources/js/components/ui/table.tsx +++ b/resources/js/components/ui/table.tsx @@ -1,4 +1,4 @@ -import { IconChevronDown, IconChevronUp, IconHamburger } from 'justd-icons' +import { IconChevronLgDown, IconChevronLgUp, IconFilterAsc, IconHamburger } from 'justd-icons' import type { CellProps, ColumnProps, @@ -73,11 +73,11 @@ const TableColumn = ({ children, className, ...props }: TableColumnProps) => ( {children} {allowsSorting && (sortDirection === undefined ? ( - daf + ) : sortDirection === 'ascending' ? ( - + ) : ( - + ))}
@@ -102,11 +102,11 @@ const Header = ({ children, className, columns, ...props }: He ) } -interface TableRow extends RowProps { +interface TableRowProps extends RowProps { className?: string } -const TableRow = ({ children, className, columns, id, ...props }: TableRow) => { +const TableRow = ({ children, className, columns, id, ...props }: TableRowProps) => { const { selectionBehavior, allowsDragging } = useTableOptions() return ( { return ( - + {label && } - + {isLoading && indicatorPlace === 'prefix' ? ( ) : prefix ? (