LukeParke/better-auth
1
0
Fork 0
mirror of https://github.com/LukeHagar/better-auth.git synced 2025-12-09 12:27:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: migrate UI components to React 19

Browse Source
This commit is contained in:
Bereket Engida
2025-03-04 20:29:25 +03:00
parent 232f565cb7
commit 210c20eb65
42 changed files with 2456 additions and 2031 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
demo/nextjs/components/ui/carousel.tsx
View File

@@ -42,118 +42,118 @@ function useCarousel() {
return context;
}
const Carousel = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & CarouselProps
>(
(
{
orientation = "horizontal",
opts,
setApi,
plugins,
className,
children,
...props
},
ref,
) => {
const [carouselRef, api] = useEmblaCarousel(
{
...opts,
axis: orientation === "horizontal" ? "x" : "y",
},
plugins,
);
const [canScrollPrev, setCanScrollPrev] = React.useState(false);
const [canScrollNext, setCanScrollNext] = React.useState(false);
const Carousel = (
{
ref,
orientation = "horizontal",
opts,
setApi,
plugins,
className,
children,
...props
}
) => {
const [carouselRef, api] = useEmblaCarousel(
{
...opts,
axis: orientation === "horizontal" ? "x" : "y",
},
plugins,
);
const [canScrollPrev, setCanScrollPrev] = React.useState(false);
const [canScrollNext, setCanScrollNext] = React.useState(false);
const onSelect = React.useCallback((api: CarouselApi) => {
if (!api) {
return;
}
const onSelect = React.useCallback((api: CarouselApi) => {
if (!api) {
return;
}
setCanScrollPrev(api.canScrollPrev());
setCanScrollNext(api.canScrollNext());
}, []);
setCanScrollPrev(api.canScrollPrev());
setCanScrollNext(api.canScrollNext());
}, []);
const scrollPrev = React.useCallback(() => {
api?.scrollPrev();
}, [api]);
const scrollPrev = React.useCallback(() => {
api?.scrollPrev();
}, [api]);
const scrollNext = React.useCallback(() => {
api?.scrollNext();
}, [api]);
const scrollNext = React.useCallback(() => {
api?.scrollNext();
}, [api]);
const handleKeyDown = React.useCallback(
(event: React.KeyboardEvent<HTMLDivElement>) => {
if (event.key === "ArrowLeft") {
event.preventDefault();
scrollPrev();
} else if (event.key === "ArrowRight") {
event.preventDefault();
scrollNext();
}
},
[scrollPrev, scrollNext],
);
const handleKeyDown = React.useCallback(
(event: React.KeyboardEvent<HTMLDivElement>) => {
if (event.key === "ArrowLeft") {
event.preventDefault();
scrollPrev();
} else if (event.key === "ArrowRight") {
event.preventDefault();
scrollNext();
}
},
[scrollPrev, scrollNext],
);
React.useEffect(() => {
if (!api || !setApi) {
return;
}
React.useEffect(() => {
if (!api || !setApi) {
return;
}
setApi(api);
}, [api, setApi]);
setApi(api);
}, [api, setApi]);
React.useEffect(() => {
if (!api) {
return;
}
React.useEffect(() => {
if (!api) {
return;
}
onSelect(api);
api.on("reInit", onSelect);
api.on("select", onSelect);
onSelect(api);
api.on("reInit", onSelect);
api.on("select", onSelect);
return () => {
api?.off("select", onSelect);
};
}, [api, onSelect]);
return () => {
api?.off("select", onSelect);
};
}, [api, onSelect]);
return (
<CarouselContext.Provider
value={{
carouselRef,
api: api,
opts,
orientation:
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
scrollPrev,
scrollNext,
canScrollPrev,
canScrollNext,
}}
>
<div
ref={ref}
onKeyDownCapture={handleKeyDown}
className={cn("relative", className)}
role="region"
aria-roledescription="carousel"
{...props}
>
{children}
</div>
</CarouselContext.Provider>
);
},
);
return (
<CarouselContext.Provider
value={{
carouselRef,
api: api,
opts,
orientation:
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
scrollPrev,
scrollNext,
canScrollPrev,
canScrollNext,
}}
>
<div
ref={ref}
onKeyDownCapture={handleKeyDown}
className={cn("relative", className)}
role="region"
aria-roledescription="carousel"
{...props}
>
{children}
</div>
</CarouselContext.Provider>
);
};
Carousel.displayName = "Carousel";
const CarouselContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
const CarouselContent = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLDivElement> & {
ref: React.RefObject<HTMLDivElement>;
}
) => {
const { carouselRef, orientation } = useCarousel();
return (
@@ -169,13 +169,18 @@ const CarouselContent = React.forwardRef<
/>
</div>
);
});
};
CarouselContent.displayName = "CarouselContent";
const CarouselItem = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
const CarouselItem = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLDivElement> & {
ref: React.RefObject<HTMLDivElement>;
}
) => {
const { orientation } = useCarousel();
return (
@@ -191,13 +196,20 @@ const CarouselItem = React.forwardRef<
{...props}
/>
);
});
};
CarouselItem.displayName = "CarouselItem";
const CarouselPrevious = React.forwardRef<
HTMLButtonElement,
React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
const CarouselPrevious = (
{
ref,
className,
variant = "outline",
size = "icon",
...props
}: React.ComponentProps<typeof Button> & {
ref: React.RefObject<HTMLButtonElement>;
}
) => {
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
return (
@@ -220,13 +232,20 @@ const CarouselPrevious = React.forwardRef<
<span className="sr-only">Previous slide</span>
</Button>
);
});
};
CarouselPrevious.displayName = "CarouselPrevious";
const CarouselNext = React.forwardRef<
HTMLButtonElement,
React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
const CarouselNext = (
{
ref,
className,
variant = "outline",
size = "icon",
...props
}: React.ComponentProps<typeof Button> & {
ref: React.RefObject<HTMLButtonElement>;
}
) => {
const { orientation, scrollNext, canScrollNext } = useCarousel();
return (
@@ -249,7 +268,7 @@ const CarouselNext = React.forwardRef<
<span className="sr-only">Next slide</span>
</Button>
);
});
};
CarouselNext.displayName = "CarouselNext";
export {