@byldpartners/ui 0.0.1

package/src/components/Drawer/Drawer.native.tsx

@@ -0,0 +1,244 @@
+import {
+  useRef,
+  useEffect,
+  createContext,
+  useContext,
+  type ReactNode,
+} from "react";
+import {
+  View,
+  Text,
+  Modal,
+  Pressable,
+  Animated,
+  Dimensions,
+  PanResponder,
+  type ViewProps,
+  type TextProps,
+} from "react-native";
+import { cn } from "../../utils/cn";
+import type {
+  DrawerProps,
+  DrawerTriggerProps,
+  DrawerContentProps,
+  DrawerHeaderProps,
+  DrawerFooterProps,
+  DrawerTitleProps,
+  DrawerDescriptionProps,
+  DrawerCloseProps,
+} from "./Drawer.types";
+import { useDrawer } from "./useDrawer";
+
+const { height: SCREEN_HEIGHT } = Dimensions.get("window");
+
+interface DrawerContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const DrawerContext = createContext<DrawerContextValue>({
+  open: false,
+  onOpenChange: () => {},
+});
+
+function Drawer({
+  children,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+}: DrawerProps) {
+  const { open, onOpenChange } = useDrawer({
+    open: controlledOpen,
+    onOpenChange: controlledOnOpenChange,
+  });
+
+  return (
+    <DrawerContext.Provider value={{ open, onOpenChange }}>
+      {children}
+    </DrawerContext.Provider>
+  );
+}
+Drawer.displayName = "Drawer";
+
+interface DrawerTriggerNativeProps extends DrawerTriggerProps {
+  onPress?: () => void;
+}
+
+function DrawerTrigger({ children, onPress }: DrawerTriggerNativeProps) {
+  const { onOpenChange } = useContext(DrawerContext);
+  return (
+    <Pressable
+      onPress={() => {
+        onOpenChange(true);
+        onPress?.();
+      }}
+    >
+      {children}
+    </Pressable>
+  );
+}
+DrawerTrigger.displayName = "DrawerTrigger";
+
+interface DrawerContentNativeProps extends DrawerContentProps {}
+
+const CLOSE_THRESHOLD = 100;
+
+function DrawerContent({ children, className }: DrawerContentNativeProps) {
+  const { open, onOpenChange } = useContext(DrawerContext);
+  const translateY = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => false,
+      onMoveShouldSetPanResponder: (_, gestureState) =>
+        gestureState.dy > 10,
+      onPanResponderMove: (_, gestureState) => {
+        if (gestureState.dy > 0) {
+          translateY.setValue(gestureState.dy);
+        }
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        if (gestureState.dy > CLOSE_THRESHOLD || gestureState.vy > 0.5) {
+          Animated.timing(translateY, {
+            toValue: SCREEN_HEIGHT,
+            duration: 250,
+            useNativeDriver: true,
+          }).start(() => onOpenChange(false));
+        } else {
+          Animated.spring(translateY, {
+            toValue: 0,
+            useNativeDriver: true,
+            damping: 20,
+            stiffness: 150,
+          }).start();
+        }
+      },
+    }),
+  ).current;
+
+  useEffect(() => {
+    if (open) {
+      Animated.spring(translateY, {
+        toValue: 0,
+        useNativeDriver: true,
+        damping: 20,
+        stiffness: 150,
+      }).start();
+    } else {
+      Animated.timing(translateY, {
+        toValue: SCREEN_HEIGHT,
+        duration: 250,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [open, translateY]);
+
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType="none"
+      onRequestClose={() => onOpenChange(false)}
+    >
+      <Pressable
+        className="flex-1 bg-black/50 justify-end"
+        onPress={() => onOpenChange(false)}
+      >
+        <Animated.View
+          className={cn(
+            "bg-background rounded-t-xl pb-8",
+            className,
+          )}
+          style={{
+            maxHeight: SCREEN_HEIGHT * 0.85,
+            transform: [{ translateY }],
+          }}
+          {...panResponder.panHandlers}
+        >
+          <Pressable onPress={(e) => e.stopPropagation()}>
+            <View className="w-[100px] h-1.5 bg-border rounded-full self-center mt-3 mb-2" />
+            {children}
+          </Pressable>
+        </Animated.View>
+      </Pressable>
+    </Modal>
+  );
+}
+DrawerContent.displayName = "DrawerContent";
+
+interface DrawerHeaderNativeProps extends DrawerHeaderProps {}
+
+function DrawerHeader({ children, className }: DrawerHeaderNativeProps) {
+  return (
+    <View className={cn("p-4 items-center", className)}>
+      {children}
+    </View>
+  );
+}
+DrawerHeader.displayName = "DrawerHeader";
+
+interface DrawerFooterNativeProps extends DrawerFooterProps {}
+
+function DrawerFooter({ children, className }: DrawerFooterNativeProps) {
+  return (
+    <View className={cn("p-4 gap-2", className)}>
+      {children}
+    </View>
+  );
+}
+DrawerFooter.displayName = "DrawerFooter";
+
+interface DrawerTitleNativeProps extends DrawerTitleProps {}
+
+function DrawerTitle({ children, className }: DrawerTitleNativeProps) {
+  return (
+    <Text className={cn("text-lg font-semibold text-foreground", className)}>
+      {children}
+    </Text>
+  );
+}
+DrawerTitle.displayName = "DrawerTitle";
+
+interface DrawerDescriptionNativeProps extends DrawerDescriptionProps {}
+
+function DrawerDescription({ children, className }: DrawerDescriptionNativeProps) {
+  return (
+    <Text className={cn("text-sm text-muted-foreground mt-1", className)}>
+      {children}
+    </Text>
+  );
+}
+DrawerDescription.displayName = "DrawerDescription";
+
+interface DrawerCloseNativeProps extends DrawerCloseProps {
+  onPress?: () => void;
+}
+
+function DrawerClose({ children, onPress }: DrawerCloseNativeProps) {
+  const { onOpenChange } = useContext(DrawerContext);
+  return (
+    <Pressable
+      onPress={() => {
+        onOpenChange(false);
+        onPress?.();
+      }}
+    >
+      {children || (
+        <Text className="text-sm text-muted-foreground text-center">
+          Close
+        </Text>
+      )}
+    </Pressable>
+  );
+}
+DrawerClose.displayName = "DrawerClose";
+
+export {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerClose,
+};

package/src/components/Drawer/Drawer.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+} from "./Drawer.web";
+
+const meta: Meta<typeof Drawer> = {
+  title: "Components/Drawer",
+  component: Drawer,
+  tags: ["autodocs"],
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+type Story = StoryObj<typeof Drawer>;
+
+export const Default: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger>Open Drawer</DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Edit Profile</DrawerTitle>
+          <DrawerDescription>
+            Make changes to your profile here. Click save when you're done.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerFooter>
+          <button>Save changes</button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+};

package/src/components/Drawer/Drawer.types.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react";
+
+export interface DrawerProps {
+  children?: ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export interface DrawerTriggerProps {
+  children?: ReactNode;
+  className?: string;
+  asChild?: boolean;
+}
+
+export interface DrawerContentProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface DrawerHeaderProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface DrawerFooterProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface DrawerTitleProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface DrawerDescriptionProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface DrawerCloseProps {
+  children?: ReactNode;
+  className?: string;
+  asChild?: boolean;
+}

package/src/components/Drawer/Drawer.web.tsx

@@ -0,0 +1,133 @@
+import { Drawer as DrawerPrimitive } from "vaul";
+import { cn } from "../../utils/cn";
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root {...props} />;
+}
+Drawer.displayName = "Drawer";
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger {...props} />;
+}
+DrawerTrigger.displayName = "DrawerTrigger";
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal {...props} />;
+}
+DrawerPortal.displayName = "DrawerPortal";
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close {...props} />;
+}
+DrawerClose.displayName = "DrawerClose";
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      className={cn(
+        "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+DrawerOverlay.displayName = "DrawerOverlay";
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal>
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        className={cn(
+          "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background text-foreground",
+          className,
+        )}
+        {...props}
+      >
+        <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+}
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      className={cn(
+        "text-lg font-semibold leading-none tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+DrawerTitle.displayName = "DrawerTitle";
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+DrawerDescription.displayName = "DrawerDescription";
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};

package/src/components/Drawer/index.native.ts

@@ -0,0 +1,2 @@
+export { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, DrawerClose } from "./Drawer.native";
+export type { DrawerProps } from "./Drawer.types";

package/src/components/Drawer/index.ts

@@ -0,0 +1,2 @@
+export * from "./Drawer.web";
+export type * from "./Drawer.types";

package/src/components/Drawer/useDrawer.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useDrawer } from "./useDrawer";
+
+describe("useDrawer", () => {
+  it("defaults to closed", () => {
+    const { result } = renderHook(() => useDrawer());
+    expect(result.current.open).toBe(false);
+  });
+
+  it("opens via onOpenChange", () => {
+    const { result } = renderHook(() => useDrawer());
+    act(() => result.current.onOpenChange(true));
+    expect(result.current.open).toBe(true);
+  });
+
+  it("calls external onOpenChange", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() => useDrawer({ onOpenChange: onChange }));
+    act(() => result.current.onOpenChange(true));
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it("works in controlled mode", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useDrawer({ open: false, onOpenChange: onChange }),
+    );
+    act(() => result.current.onOpenChange(true));
+    expect(result.current.open).toBe(false);
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+});

package/src/components/Drawer/useDrawer.ts

@@ -0,0 +1,19 @@
+import { useControllableState } from "../../hooks/useControllableState";
+
+interface UseDrawerProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function useDrawer({ open: controlledOpen, onOpenChange }: UseDrawerProps = {}) {
+  const [open, setOpen] = useControllableState<boolean>({
+    value: controlledOpen,
+    defaultValue: false,
+    onChange: onOpenChange,
+  });
+
+  return {
+    open,
+    onOpenChange: setOpen,
+  };
+}