From 02932fb33db0adb88d536c890a017077ea8a484f Mon Sep 17 00:00:00 2001 From: omi3 Date: Sat, 14 Sep 2024 12:33:04 +0000 Subject: [PATCH 1/9] Refine(ui): Button, Drop Down, Slider --- packages/ui/src/components/ui/button.tsx | 28 ++++--------------- .../ui/src/components/ui/dropdown-menu.tsx | 5 ++-- packages/ui/src/components/ui/slider.tsx | 4 +-- 3 files changed, 11 insertions(+), 26 deletions(-) diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx index f5292f3..43a2350 100644 --- a/packages/ui/src/components/ui/button.tsx +++ b/packages/ui/src/components/ui/button.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; +import { cn } from '@omi3/utils'; import { Slot } from '@radix-ui/react-slot'; import type { VariantProps } from 'class-variance-authority'; -import { cn } from '@omi3/utils'; import { cva } from 'class-variance-authority'; const buttonVariants = cva( @@ -12,13 +12,13 @@ const buttonVariants = cva( variant: { default: 'bg-main border-2 border-border dark:border-darkBorder shadow-light dark:shadow-dark data-[state=pressed]:translate-x-boxShadowX data-[state=pressed]:translate-y-boxShadowY data-[state=pressed]:shadow-none dark:data-[state=pressed]:shadow-none', - noShadow: 'bg-white border-2 border-border dark:border-darkBorder', + noShadow: 'border-2 border-border dark:border-darkBorder bg-bg dark:bg-secondaryBlack', link: 'underline-offset-4 text-text dark:text-darkText hover:underline', neutral: 'bg-white dark:bg-darkBg dark:text-darkText border-2 border-border dark:border-darkBorder shadow-light dark:shadow-dark data-[state=pressed]:translate-x-boxShadowX data-[state=pressed]:translate-y-boxShadowY data-[state=pressed]:shadow-none dark:data-[state=pressed]:shadow-none', - outline: 'bg-transparent border-2 text-white border-main', - ghost: 'border-none text-white', - second: 'bg-main border-2 text-black border-black', + reverse: + 'bg-main border-2 border-border dark:border-darkBorder hover:translate-x-reverseBoxShadowX hover:translate-y-reverseBoxShadowY hover:shadow-light dark:hover:shadow-dark', + destructive: 'bg-[#ff6b6b] text-white border-2 border-border dark:border-darkBorder shadow-light dark:shadow-dark data-[state=pressed]:translate-x-boxShadowX data-[state=pressed]:translate-y-boxShadowY data-[state=pressed]:shadow-none dark:data-[state=pressed]:shadow-none', }, @@ -40,32 +40,16 @@ export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean; - loading?: boolean; - label?: string | null; } const Button = React.forwardRef( - ( - { - className, - variant, - size, - asChild = false, - loading, - children, - label, - - ...props - }, - ref, - ) => { + ({ className, variant, size, asChild = false, children, ...props }, ref) => { const Comp = asChild ? Slot : 'button'; const [pressed, setPressed] = React.useState(false); return ( setPressed(true)} diff --git a/packages/ui/src/components/ui/dropdown-menu.tsx b/packages/ui/src/components/ui/dropdown-menu.tsx index 0aeee77..24e443a 100644 --- a/packages/ui/src/components/ui/dropdown-menu.tsx +++ b/packages/ui/src/components/ui/dropdown-menu.tsx @@ -66,7 +66,7 @@ const DropdownMenuContent = React.forwardRef< ref={ref} sideOffset={sideOffset} className={cn( - 'z-50 min-w-[8rem] overflow-hidden rounded-base border-2 border-border bg-white p-1 font-base text-black data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-darkBorder dark:bg-darkBg', + 'z-50 min-w-[11rem] overflow-hidden rounded-base border-2 border-border bg-bg p-3 font-base text-black data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-darkBorder dark:bg-darkBg', className, )} {...props} @@ -203,5 +203,6 @@ export { DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, - DropdownMenuTrigger, + DropdownMenuTrigger }; + diff --git a/packages/ui/src/components/ui/slider.tsx b/packages/ui/src/components/ui/slider.tsx index 27dc060..591436c 100644 --- a/packages/ui/src/components/ui/slider.tsx +++ b/packages/ui/src/components/ui/slider.tsx @@ -1,7 +1,7 @@ 'use client' -import * as React from 'react' import * as SliderPrimitive from '@radix-ui/react-slider' +import * as React from 'react' import { cn } from '@omi3/utils' @@ -17,7 +17,7 @@ const Slider = React.forwardRef< )} {...props} > - + From 2c5bf550225fd193cb667cd1c541b1b930bc62c8 Mon Sep 17 00:00:00 2001 From: omi3 Date: Sat, 14 Sep 2024 12:44:00 +0000 Subject: [PATCH 2/9] Enhancement(site): accecibility --- apps/site/app/_components/audio/player.tsx | 41 ++++++++++++++----- apps/site/app/_components/layout/footer.tsx | 4 +- .../app/_components/theme/widgets/index.tsx | 19 ++------- apps/site/app/layout.tsx | 17 +++++--- 4 files changed, 49 insertions(+), 32 deletions(-) diff --git a/apps/site/app/_components/audio/player.tsx b/apps/site/app/_components/audio/player.tsx index c4481ae..073d25e 100644 --- a/apps/site/app/_components/audio/player.tsx +++ b/apps/site/app/_components/audio/player.tsx @@ -6,8 +6,8 @@ import { playtime, seek } from '@omi3/utils'; import { useAtomValue, useSetAtom } from 'jotai'; import { useCallback, useMemo } from 'react'; -import { ThemeWidget } from '../theme'; import { audio } from '@/store'; +import { ThemeWidget } from '../theme'; export function AudioPlayer() { const audioState = useAtomValue(audio.stateAtom); @@ -53,25 +53,31 @@ export function AudioPlayer() { const getPlayPauseIcon = useCallback(() => { switch (playbackState) { case AudioChannel.PlaybackState.PLAYING: - return ; + return ; case AudioChannel.PlaybackState.LOADING: return ; default: - return ; + return ; } }, [playbackState]); return ( - + - Omi3 Player + Omi3 Player - +
- +
-
+
{playtime(currentTime)} {playtime(duration)}
-
{getVolumeIcon()} - +
diff --git a/apps/site/app/_components/layout/footer.tsx b/apps/site/app/_components/layout/footer.tsx index fd836c7..962a61a 100644 --- a/apps/site/app/_components/layout/footer.tsx +++ b/apps/site/app/_components/layout/footer.tsx @@ -1,8 +1,8 @@ export function Footer() { return ( -
+ diff --git a/apps/site/app/_components/theme/widgets/index.tsx b/apps/site/app/_components/theme/widgets/index.tsx index bd7e2c6..c76526c 100644 --- a/apps/site/app/_components/theme/widgets/index.tsx +++ b/apps/site/app/_components/theme/widgets/index.tsx @@ -1,13 +1,7 @@ -import { - Button, - DropdownMenu, - DropdownMenuContent, - DropdownMenuTrigger, - Icons, -} from '@omi3/ui'; +import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, Icons } from '@omi3/ui'; -import { ThemeToggler } from '../_toggler'; import { memo } from 'react'; +import { ThemeToggler } from '../_toggler'; import { useThemeLogic } from '../logic'; export const ThemeWidget = memo(function ThemeWidget() { @@ -16,12 +10,7 @@ export const ThemeWidget = memo(function ThemeWidget() { return ( - - + diff --git a/apps/site/app/layout.tsx b/apps/site/app/layout.tsx index 6e11b88..3c64a64 100644 --- a/apps/site/app/layout.tsx +++ b/apps/site/app/layout.tsx @@ -1,10 +1,10 @@ import '@omi3/ui/neobrutalism.css'; -import { Footer } from './_components/layout/footer'; +import { silk } from '@omi3/ui'; +import { cn } from '@omi3/utils'; import type { Metadata } from 'next'; +import { Footer } from './_components/layout/footer'; import { Providers } from './_providers'; -import { cn } from '@omi3/utils'; -import { silk } from '@omi3/ui'; export const metadata: Metadata = { metadataBase: new URL('https://omi3.dev'), @@ -22,9 +22,16 @@ export default function RootLayout({ }>) { return ( - + -
{children}
+
+ {children} +
From 9f9090901ce968f88b4a25de774fe94ff9fad26f Mon Sep 17 00:00:00 2001 From: omi3 Date: Sat, 14 Sep 2024 12:44:44 +0000 Subject: [PATCH 3/9] docs(changeset): . --- .changeset/pretty-chefs-check.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/pretty-chefs-check.md diff --git a/.changeset/pretty-chefs-check.md b/.changeset/pretty-chefs-check.md new file mode 100644 index 0000000..70f04ca --- /dev/null +++ b/.changeset/pretty-chefs-check.md @@ -0,0 +1,6 @@ +--- +'@omi3/ui': patch +'@omi3/site': patch +--- + +. From c855a3aa4fe15971d265df31529449c640104124 Mon Sep 17 00:00:00 2001 From: omi3 Date: Sat, 14 Sep 2024 12:48:46 +0000 Subject: [PATCH 4/9] Enhancement(site, ui): accecibility --- .changeset/pretty-chefs-check.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/.changeset/pretty-chefs-check.md b/.changeset/pretty-chefs-check.md index 70f04ca..c9a9c1d 100644 --- a/.changeset/pretty-chefs-check.md +++ b/.changeset/pretty-chefs-check.md @@ -3,4 +3,9 @@ '@omi3/site': patch --- -. +This changeset includes minor updates and improvements to `@omi3/ui` package and `@omi3/site`: + +- `@omi3/ui`: Minor enhancements and bug fixes to UI components. +- `@omi3/site`: Small improvements to the site's functionality and user interface. + +These patch updates aim to enhance stability and user experience without introducing major new features or breaking changes. From 9849d407dd285ce344237b1a3851de9823890a8c Mon Sep 17 00:00:00 2001 From: omi3 Date: Sat, 14 Sep 2024 12:55:26 +0000 Subject: [PATCH 5/9] Enhancement(site, ui): accecibility --- apps/site/app/_components/audio/player.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/apps/site/app/_components/audio/player.tsx b/apps/site/app/_components/audio/player.tsx index 073d25e..86756b8 100644 --- a/apps/site/app/_components/audio/player.tsx +++ b/apps/site/app/_components/audio/player.tsx @@ -87,7 +87,9 @@ export function AudioPlayer() { onValueChange={audioHandlers.onValueChange} onValueCommit={audioHandlers.onValueCommit} aria-label="Progression de la lecture" - role="slider" + aria-valuenow={currentTime} + aria-valuemin={0} + aria-valuemax={duration} />
{playtime(currentTime)} @@ -103,7 +105,7 @@ export function AudioPlayer() { {getPlayPauseIcon()}
- {getVolumeIcon()} +
From b4cce2b441f5865130a6b23cb5d7d1c51c067c2e Mon Sep 17 00:00:00 2001 From: omi3 Date: Sat, 14 Sep 2024 14:02:12 +0000 Subject: [PATCH 6/9] Enhancement(site): accecibility --- apps/site/app/_components/audio/player.tsx | 45 ++++++++++------------ 1 file changed, 21 insertions(+), 24 deletions(-) diff --git a/apps/site/app/_components/audio/player.tsx b/apps/site/app/_components/audio/player.tsx index 86756b8..ee51c8d 100644 --- a/apps/site/app/_components/audio/player.tsx +++ b/apps/site/app/_components/audio/player.tsx @@ -6,8 +6,8 @@ import { playtime, seek } from '@omi3/utils'; import { useAtomValue, useSetAtom } from 'jotai'; import { useCallback, useMemo } from 'react'; -import { audio } from '@/store'; import { ThemeWidget } from '../theme'; +import { audio } from '@/store'; export function AudioPlayer() { const audioState = useAtomValue(audio.stateAtom); @@ -79,18 +79,17 @@ export function AudioPlayer() { aria-label="Visualiseur audio" />
- +
+ + Progression de la lecture : {playtime(currentTime)} sur {playtime(duration)} +
{playtime(currentTime)} {playtime(duration)} @@ -106,17 +105,15 @@ export function AudioPlayer() {
- +
+ + Contrôle du volume : {localVolume}% +
From 80254f83d82b30f2a6bed1b6a2cc2117eb07d8e1 Mon Sep 17 00:00:00 2001 From: omi3 Date: Sat, 14 Sep 2024 14:06:42 +0000 Subject: [PATCH 7/9] Enhancement(site): accecibility --- apps/site/app/_components/audio/player.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/app/_components/audio/player.tsx b/apps/site/app/_components/audio/player.tsx index ee51c8d..27f5eee 100644 --- a/apps/site/app/_components/audio/player.tsx +++ b/apps/site/app/_components/audio/player.tsx @@ -87,8 +87,8 @@ export function AudioPlayer() { step={0.1} onValueChange={audioHandlers.onValueChange} onValueCommit={audioHandlers.onValueCommit} + aria-label={`Playback progress: ${playtime(currentTime)} of ${playtime(duration)}`} /> - Progression de la lecture : {playtime(currentTime)} sur {playtime(duration)}
{playtime(currentTime)} @@ -111,8 +111,8 @@ export function AudioPlayer() { max={100} step={1} {...volumeHandlers} + aria-label={`Volume control: ${localVolume}%`} /> - Contrôle du volume : {localVolume}%
From bb1858aedb7b7eff743aeecfc3f476ea43bf613a Mon Sep 17 00:00:00 2001 From: omi3 Date: Sat, 14 Sep 2024 14:14:12 +0000 Subject: [PATCH 8/9] Enhancement(ui): accecibility of Slider Thumb --- apps/site/app/_components/audio/player.tsx | 7 +++ packages/ui/src/components/ui/slider.tsx | 54 ++++++++++++---------- 2 files changed, 37 insertions(+), 24 deletions(-) diff --git a/apps/site/app/_components/audio/player.tsx b/apps/site/app/_components/audio/player.tsx index 27f5eee..b3863f0 100644 --- a/apps/site/app/_components/audio/player.tsx +++ b/apps/site/app/_components/audio/player.tsx @@ -61,6 +61,11 @@ export function AudioPlayer() { } }, [playbackState]); + const getThumbProps = useCallback((value: number) => ({ + 'aria-label': `Current value: ${value}`, + title: `Current value: ${value}`, + }), []); + return ( @@ -88,6 +93,7 @@ export function AudioPlayer() { onValueChange={audioHandlers.onValueChange} onValueCommit={audioHandlers.onValueCommit} aria-label={`Playback progress: ${playtime(currentTime)} of ${playtime(duration)}`} + thumbProps={getThumbProps(currentTime)} />
@@ -112,6 +118,7 @@ export function AudioPlayer() { step={1} {...volumeHandlers} aria-label={`Volume control: ${localVolume}%`} + thumbProps={getThumbProps(localVolume)} />
diff --git a/packages/ui/src/components/ui/slider.tsx b/packages/ui/src/components/ui/slider.tsx index 591436c..95d8232 100644 --- a/packages/ui/src/components/ui/slider.tsx +++ b/packages/ui/src/components/ui/slider.tsx @@ -1,28 +1,34 @@ -'use client' +'use client'; -import * as SliderPrimitive from '@radix-ui/react-slider' -import * as React from 'react' +import * as React from 'react'; +import * as SliderPrimitive from '@radix-ui/react-slider'; -import { cn } from '@omi3/utils' +import { cn } from '@omi3/utils'; -const Slider = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - - - - - - -)) -Slider.displayName = SliderPrimitive.Root.displayName +interface SliderProps extends React.ComponentPropsWithoutRef { + thumbProps?: React.ComponentPropsWithoutRef; +} -export { Slider } +const Slider = React.forwardRef, SliderProps>( + ({ className, thumbProps, ...props }, ref) => ( + + + + + + + ), +); +Slider.displayName = SliderPrimitive.Root.displayName; + +export { Slider }; From 94dc9be6ed88f427f6269098feef0b5193ed0368 Mon Sep 17 00:00:00 2001 From: omi3 Date: Sat, 14 Sep 2024 14:25:54 +0000 Subject: [PATCH 9/9] Enhancement(site): accecibility --- apps/site/app/layout.tsx | 10 ++++------ apps/site/app/page.tsx | 8 +++++--- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/apps/site/app/layout.tsx b/apps/site/app/layout.tsx index 3c64a64..4c2d846 100644 --- a/apps/site/app/layout.tsx +++ b/apps/site/app/layout.tsx @@ -1,10 +1,10 @@ import '@omi3/ui/neobrutalism.css'; -import { silk } from '@omi3/ui'; -import { cn } from '@omi3/utils'; -import type { Metadata } from 'next'; import { Footer } from './_components/layout/footer'; +import type { Metadata } from 'next'; import { Providers } from './_providers'; +import { cn } from '@omi3/utils'; +import { silk } from '@omi3/ui'; export const metadata: Metadata = { metadataBase: new URL('https://omi3.dev'), @@ -29,9 +29,7 @@ export default function RootLayout({ )} > -
- {children} -
+ {children}