feat: setup full Next.js toolchain and core dependencies
- Add runtime deps: react-query, react-hook-form+zod, zustand, ky, openapi-fetch, better-auth, react-markdown, shiki, recharts, next-themes, nuqs, sonner, cmdk, vaul, embla-carousel-react, motion, date-fns, tailwind-merge, clsx, cva - Add dev tooling: vitest, testing-library, playwright, prettier(+tailwind plugin), husky, lint-staged, jsdom - Wire providers (QueryClient, Theme, NuqsAdapter, Tooltip, Sonner) into layout - Add vitest/playwright/prettier configs + lint-staged pre-commit hook - Add lib/query-client + lib/http (ky) helpers and sample unit test - Fix react-hooks/set-state-in-effect lint errors (use-mobile useSyncExternalStore, carousel async init) - Remove committed Next-generated types/ duplicates (regenerated under .next/types)
This commit is contained in:
asepharyana committed
1 parent
046f201e63
commit
8093dd2b7f
87 files changed
+8683
-305
No files matched your search
@@ -0,0 +1,208 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
|
||||
import { cn } from "cn";
|
||||
|
||||
type DrawerContextProps = {
|
||||
hasSnapPoints: boolean;
|
||||
modal: DrawerPrimitive.Root.Props["modal"];
|
||||
showSwipeHandle: boolean;
|
||||
swipeDirection: NonNullable<DrawerPrimitive.Root.Props["swipeDirection"]>;
|
||||
};
|
||||
|
||||
const DrawerContext = React.createContext<DrawerContextProps | null>(null);
|
||||
|
||||
function useDrawer() {
|
||||
const context = React.useContext(DrawerContext);
|
||||
|
||||
if (!context) {
|
||||
throw new Error("useDrawer must be used within a Drawer.");
|
||||
}
|
||||
|
||||
return context;
|
||||
}
|
||||
|
||||
function Drawer({
|
||||
modal = true,
|
||||
showSwipeHandle = false,
|
||||
snapPoints,
|
||||
swipeDirection = "down",
|
||||
...props
|
||||
}: DrawerPrimitive.Root.Props & {
|
||||
showSwipeHandle?: boolean;
|
||||
}) {
|
||||
const hasSnapPoints = snapPoints != null && snapPoints.length > 0;
|
||||
const contextValue = React.useMemo(
|
||||
() => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }),
|
||||
[hasSnapPoints, modal, showSwipeHandle, swipeDirection]
|
||||
);
|
||||
|
||||
return (
|
||||
<DrawerContext.Provider value={contextValue}>
|
||||
<DrawerPrimitive.Root
|
||||
data-slot="drawer"
|
||||
modal={modal}
|
||||
snapPoints={snapPoints}
|
||||
swipeDirection={swipeDirection}
|
||||
{...props}
|
||||
/>
|
||||
</DrawerContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
|
||||
return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
|
||||
}
|
||||
|
||||
function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
|
||||
return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
|
||||
}
|
||||
|
||||
function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
|
||||
return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
|
||||
}
|
||||
|
||||
function DrawerOverlay({ className, ...props }: DrawerPrimitive.Backdrop.Props) {
|
||||
return (
|
||||
<DrawerPrimitive.Backdrop
|
||||
data-slot="drawer-overlay"
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xLine truncated
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DrawerSwipeHandle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="drawer-swipe-handle"
|
||||
aria-hidden="true"
|
||||
className={cn(
|
||||
"relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direcLine truncated
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DrawerContent({ className, children, ...props }: DrawerPrimitive.Popup.Props) {
|
||||
const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer();
|
||||
const swipeAxis = swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
|
||||
|
||||
return (
|
||||
<DrawerPortal data-slot="drawer-portal">
|
||||
{modal === true && <DrawerOverlay data-snap-points={hasSnapPoints ? "" : undefined} />}
|
||||
<DrawerPrimitive.Viewport
|
||||
data-slot="drawer-viewport"
|
||||
data-modal={modal}
|
||||
className="pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto"
|
||||
>
|
||||
<DrawerPrimitive.Popup
|
||||
data-slot="drawer-popup"
|
||||
data-swipe-axis={swipeAxis}
|
||||
data-snap-points={hasSnapPoints ? "" : undefined}
|
||||
className={cn(
|
||||
// Base.
|
||||
"group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpoLine truncated
|
||||
// Nested.
|
||||
"data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",
|
||||
// Bleed.
|
||||
"after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full",
|
||||
// Sizing.
|
||||
"[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]",
|
||||
// Stack.
|
||||
"[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-Line truncated
|
||||
// Transitions.
|
||||
"data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]",
|
||||
// Axis: y.
|
||||
"data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)",
|
||||
// Axis: x.
|
||||
"data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row",
|
||||
// Direction: down.
|
||||
"data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]",
|
||||
// Direction: up.
|
||||
"data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]",
|
||||
// Direction: left.
|
||||
"data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]",
|
||||
// Direction: right.
|
||||
"data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{showSwipeHandle && <DrawerSwipeHandle />}
|
||||
<DrawerPrimitive.Content
|
||||
data-slot="drawer-content"
|
||||
className={cn(
|
||||
"flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</DrawerPrimitive.Content>
|
||||
</DrawerPrimitive.Popup>
|
||||
</DrawerPrimitive.Viewport>
|
||||
</DrawerPortal>
|
||||
);
|
||||
}
|
||||
|
||||
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="drawer-header"
|
||||
className={cn(
|
||||
"flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="drawer-footer"
|
||||
className={cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
|
||||
return (
|
||||
<DrawerPrimitive.Title
|
||||
data-slot="drawer-title"
|
||||
className={cn("font-heading text-base font-medium text-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props) {
|
||||
return (
|
||||
<DrawerPrimitive.Description
|
||||
data-slot="drawer-description"
|
||||
className={cn("text-sm text-balance text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Drawer,
|
||||
DrawerPortal,
|
||||
DrawerOverlay,
|
||||
DrawerSwipeHandle,
|
||||
DrawerTrigger,
|
||||
DrawerClose,
|
||||
DrawerContent,
|
||||
DrawerHeader,
|
||||
DrawerFooter,
|
||||
DrawerTitle,
|
||||
DrawerDescription,
|
||||
};
|
||||
Reference in new issue
Block a user