@croacroa/react-native-template 1.0.0

package/components/ui/BottomSheet.tsx

@@ -0,0 +1,307 @@
+import { forwardRef, useCallback, useMemo, ReactNode } from "react";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import GorhomBottomSheet, {
+  BottomSheetBackdrop,
+  BottomSheetView,
+  BottomSheetScrollView,
+  BottomSheetBackdropProps,
+} from "@gorhom/bottom-sheet";
+import { Ionicons } from "@expo/vector-icons";
+import { useTheme } from "@/hooks/useTheme";
+import { cn } from "@/utils/cn";
+
+/**
+ * Hook to control BottomSheet imperatively
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { ref, open, close, snapTo } = useBottomSheet();
+ *
+ *   return (
+ *     <>
+ *       <Button onPress={() => open()}>Open Sheet</Button>
+ *       <BottomSheet ref={ref}>
+ *         <Text>Content</Text>
+ *       </BottomSheet>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+import { useRef } from "react";
+
+interface BottomSheetProps {
+  /**
+   * Content to render inside the bottom sheet
+   */
+  children: ReactNode;
+
+  /**
+   * Snap points for the bottom sheet (e.g., ['25%', '50%', '90%'])
+   */
+  snapPoints?: (string | number)[];
+
+  /**
+   * Initial snap point index
+   */
+  index?: number;
+
+  /**
+   * Title displayed in the header
+   */
+  title?: string;
+
+  /**
+   * Show close button in header
+   */
+  showCloseButton?: boolean;
+
+  /**
+   * Called when the sheet is closed
+   */
+  onClose?: () => void;
+
+  /**
+   * Called when the sheet index changes
+   */
+  onChange?: (index: number) => void;
+
+  /**
+   * Whether to enable backdrop
+   */
+  enableBackdrop?: boolean;
+
+  /**
+   * Whether to close on backdrop press
+   */
+  closeOnBackdropPress?: boolean;
+
+  /**
+   * Whether content is scrollable
+   */
+  scrollable?: boolean;
+
+  /**
+   * Whether to enable handle
+   */
+  enableHandle?: boolean;
+
+  /**
+   * Additional styles for the container
+   */
+  containerClassName?: string;
+
+  /**
+   * Additional styles for the content
+   */
+  contentClassName?: string;
+}
+
+export type BottomSheetRef = GorhomBottomSheet;
+
+export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
+  (
+    {
+      children,
+      snapPoints: customSnapPoints,
+      index = -1,
+      title,
+      showCloseButton = true,
+      onClose,
+      onChange,
+      enableBackdrop = true,
+      closeOnBackdropPress = true,
+      scrollable = false,
+      enableHandle = true,
+      containerClassName,
+      contentClassName,
+    },
+    ref
+  ) => {
+    const { isDark } = useTheme();
+
+    // Default snap points
+    const snapPoints = useMemo(
+      () => customSnapPoints || ["50%", "90%"],
+      [customSnapPoints]
+    );
+
+    // Handle sheet changes
+    const handleSheetChanges = useCallback(
+      (sheetIndex: number) => {
+        onChange?.(sheetIndex);
+        if (sheetIndex === -1) {
+          onClose?.();
+        }
+      },
+      [onChange, onClose]
+    );
+
+    // Handle close button press
+    const handleClose = useCallback(() => {
+      if (ref && "current" in ref && ref.current) {
+        ref.current.close();
+      }
+      onClose?.();
+    }, [ref, onClose]);
+
+    // Backdrop component
+    const renderBackdrop = useCallback(
+      (props: BottomSheetBackdropProps) => (
+        <BottomSheetBackdrop
+          {...props}
+          disappearsOnIndex={-1}
+          appearsOnIndex={0}
+          pressBehavior={closeOnBackdropPress ? "close" : "none"}
+          opacity={0.5}
+        />
+      ),
+      [closeOnBackdropPress]
+    );
+
+    // Handle component
+    const renderHandle = useCallback(() => {
+      if (!enableHandle) return null;
+
+      return (
+        <View className="items-center pt-2 pb-1">
+          <View
+            className={cn(
+              "w-10 h-1 rounded-full",
+              isDark ? "bg-gray-600" : "bg-gray-300"
+            )}
+          />
+        </View>
+      );
+    }, [enableHandle, isDark]);
+
+    const ContentWrapper = scrollable ? BottomSheetScrollView : BottomSheetView;
+
+    return (
+      <GorhomBottomSheet
+        ref={ref}
+        index={index}
+        snapPoints={snapPoints}
+        onChange={handleSheetChanges}
+        backdropComponent={enableBackdrop ? renderBackdrop : null}
+        handleComponent={renderHandle}
+        enablePanDownToClose
+        backgroundStyle={[
+          styles.background,
+          { backgroundColor: isDark ? "#1e293b" : "#ffffff" },
+        ]}
+        style={styles.sheet}
+      >
+        <View
+          className={cn(
+            "flex-1",
+            isDark ? "bg-surface-dark" : "bg-white",
+            containerClassName
+          )}
+        >
+          {/* Header */}
+          {(title || showCloseButton) && (
+            <View
+              className={cn(
+                "flex-row items-center justify-between px-4 py-3 border-b",
+                isDark ? "border-gray-700" : "border-gray-100"
+              )}
+            >
+              <Text
+                className={cn(
+                  "text-lg font-semibold",
+                  isDark ? "text-text-dark" : "text-text-light"
+                )}
+              >
+                {title || ""}
+              </Text>
+              {showCloseButton && (
+                <TouchableOpacity
+                  onPress={handleClose}
+                  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                  className="p-1"
+                >
+                  <Ionicons
+                    name="close"
+                    size={24}
+                    color={isDark ? "#f8fafc" : "#0f172a"}
+                  />
+                </TouchableOpacity>
+              )}
+            </View>
+          )}
+
+          {/* Content */}
+          <ContentWrapper
+            style={styles.contentContainer}
+            contentContainerStyle={[
+              styles.content,
+              scrollable && styles.scrollContent,
+            ]}
+          >
+            <View className={cn("flex-1", contentClassName)}>{children}</View>
+          </ContentWrapper>
+        </View>
+      </GorhomBottomSheet>
+    );
+  }
+);
+
+BottomSheet.displayName = "BottomSheet";
+
+const styles = StyleSheet.create({
+  sheet: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: -4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 5,
+  },
+  background: {
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+  },
+  contentContainer: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingBottom: 40,
+  },
+});
+
+export function useBottomSheet() {
+  const ref = useRef<BottomSheetRef>(null);
+
+  const open = useCallback((snapIndex = 0) => {
+    ref.current?.snapToIndex(snapIndex);
+  }, []);
+
+  const close = useCallback(() => {
+    ref.current?.close();
+  }, []);
+
+  const snapTo = useCallback((index: number) => {
+    ref.current?.snapToIndex(index);
+  }, []);
+
+  const expand = useCallback(() => {
+    ref.current?.expand();
+  }, []);
+
+  const collapse = useCallback(() => {
+    ref.current?.collapse();
+  }, []);
+
+  return {
+    ref,
+    open,
+    close,
+    snapTo,
+    expand,
+    collapse,
+  };
+}

package/components/ui/Button.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { Button } from "./Button";
+
+const meta: Meta<typeof Button> = {
+  title: "UI/Button",
+  component: Button,
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["primary", "secondary", "outline", "ghost", "danger"],
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+    },
+    isLoading: {
+      control: "boolean",
+    },
+    disabled: {
+      control: "boolean",
+    },
+  },
+  args: {
+    children: "Button",
+    variant: "primary",
+    size: "md",
+    isLoading: false,
+    disabled: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    variant: "primary",
+    children: "Primary Button",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+    children: "Secondary Button",
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: "outline",
+    children: "Outline Button",
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    variant: "ghost",
+    children: "Ghost Button",
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    variant: "danger",
+    children: "Danger Button",
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+    children: "Loading",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: "Disabled",
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <View style={{ gap: 12 }}>
+      <Button size="sm">Small</Button>
+      <Button size="md">Medium</Button>
+      <Button size="lg">Large</Button>
+    </View>
+  ),
+};
+
+export const WithIcon: Story = {
+  render: () => (
+    <Button>
+      <Ionicons name="add" size={20} color="#fff" style={{ marginRight: 8 }} />
+      Add Item
+    </Button>
+  ),
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <View style={{ gap: 12 }}>
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="danger">Danger</Button>
+    </View>
+  ),
+};

package/components/ui/Button.tsx

@@ -0,0 +1,104 @@
+import { forwardRef } from "react";
+import {
+  Pressable,
+  Text,
+  ActivityIndicator,
+  PressableProps,
+  View,
+} from "react-native";
+import { cn } from "@/utils/cn";
+
+type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "danger";
+type ButtonSize = "sm" | "md" | "lg";
+
+interface ButtonProps extends PressableProps {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  isLoading?: boolean;
+  className?: string;
+  textClassName?: string;
+  children: React.ReactNode;
+}
+
+const variantStyles: Record<ButtonVariant, string> = {
+  primary: "bg-primary-600 active:bg-primary-700",
+  secondary: "bg-gray-200 dark:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-600",
+  outline: "border-2 border-gray-300 dark:border-gray-600 bg-transparent active:bg-gray-100 dark:active:bg-gray-800",
+  ghost: "bg-transparent active:bg-gray-100 dark:active:bg-gray-800",
+  danger: "bg-red-600 active:bg-red-700",
+};
+
+const variantTextStyles: Record<ButtonVariant, string> = {
+  primary: "text-white",
+  secondary: "text-text-light dark:text-text-dark",
+  outline: "text-text-light dark:text-text-dark",
+  ghost: "text-primary-600 dark:text-primary-400",
+  danger: "text-white",
+};
+
+const sizeStyles: Record<ButtonSize, string> = {
+  sm: "px-3 py-2",
+  md: "px-4 py-3",
+  lg: "px-6 py-4",
+};
+
+const textSizeStyles: Record<ButtonSize, string> = {
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+};
+
+export const Button = forwardRef<View, ButtonProps>(
+  (
+    {
+      variant = "primary",
+      size = "md",
+      isLoading = false,
+      disabled,
+      className,
+      textClassName,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isDisabled = disabled || isLoading;
+
+    return (
+      <Pressable
+        ref={ref}
+        disabled={isDisabled}
+        className={cn(
+          "flex-row items-center justify-center rounded-xl",
+          variantStyles[variant],
+          sizeStyles[size],
+          isDisabled && "opacity-50",
+          className
+        )}
+        {...props}
+      >
+        {isLoading ? (
+          <ActivityIndicator
+            color={variant === "primary" || variant === "danger" ? "#ffffff" : "#3b82f6"}
+            size="small"
+          />
+        ) : typeof children === "string" ? (
+          <Text
+            className={cn(
+              "font-semibold",
+              variantTextStyles[variant],
+              textSizeStyles[size],
+              textClassName
+            )}
+          >
+            {children}
+          </Text>
+        ) : (
+          children
+        )}
+      </Pressable>
+    );
+  }
+);
+
+Button.displayName = "Button";

package/components/ui/Card.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { View, Text } from "react-native";
+import { Card } from "./Card";
+
+const meta: Meta<typeof Card> = {
+  title: "UI/Card",
+  component: Card,
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "elevated", "outlined"],
+    },
+  },
+  args: {
+    variant: "default",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Card {...args} className="p-4">
+      <Text>Default Card Content</Text>
+    </Card>
+  ),
+};
+
+export const Elevated: Story = {
+  render: () => (
+    <Card variant="elevated" className="p-4">
+      <Text>Elevated Card with Shadow</Text>
+    </Card>
+  ),
+};
+
+export const Outlined: Story = {
+  render: () => (
+    <Card variant="outlined" className="p-4">
+      <Text>Outlined Card with Border</Text>
+    </Card>
+  ),
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <Card variant="default" className="p-4">
+        <Text style={{ fontWeight: "bold" }}>Default</Text>
+        <Text>Background color, no border</Text>
+      </Card>
+      <Card variant="elevated" className="p-4">
+        <Text style={{ fontWeight: "bold" }}>Elevated</Text>
+        <Text>Background color with shadow</Text>
+      </Card>
+      <Card variant="outlined" className="p-4">
+        <Text style={{ fontWeight: "bold" }}>Outlined</Text>
+        <Text>Transparent with border</Text>
+      </Card>
+    </View>
+  ),
+};
+
+export const ComplexContent: Story = {
+  render: () => (
+    <Card className="p-4">
+      <View style={{ gap: 8 }}>
+        <Text style={{ fontSize: 18, fontWeight: "bold" }}>Card Title</Text>
+        <Text style={{ color: "#64748b" }}>
+          This is a more complex card with multiple elements inside.
+        </Text>
+        <View
+          style={{
+            height: 100,
+            backgroundColor: "#f1f5f9",
+            borderRadius: 8,
+            marginTop: 8,
+          }}
+        />
+      </View>
+    </Card>
+  ),
+};

package/components/ui/Card.tsx

@@ -0,0 +1,32 @@
+import { View, ViewProps } from "react-native";
+import { cn } from "@/utils/cn";
+
+interface CardProps extends ViewProps {
+  variant?: "default" | "elevated" | "outlined";
+  className?: string;
+  children: React.ReactNode;
+}
+
+export function Card({
+  variant = "default",
+  className,
+  children,
+  ...props
+}: CardProps) {
+  return (
+    <View
+      className={cn(
+        "rounded-xl",
+        variant === "default" && "bg-surface-light dark:bg-surface-dark",
+        variant === "elevated" &&
+          "bg-surface-light shadow-lg dark:bg-surface-dark",
+        variant === "outlined" &&
+          "border-2 border-gray-200 bg-transparent dark:border-gray-700",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}