@croacroa/react-native-template 1.0.0

package/components/ui/Checkbox.tsx

@@ -0,0 +1,261 @@
+import { TouchableOpacity, View, Text } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  withSpring,
+  withTiming,
+  interpolateColor,
+} from "react-native-reanimated";
+import { Ionicons } from "@expo/vector-icons";
+import { useTheme } from "@/hooks/useTheme";
+import { cn } from "@/utils/cn";
+
+interface CheckboxProps {
+  /**
+   * Whether the checkbox is checked
+   */
+  checked: boolean;
+
+  /**
+   * Callback when the checkbox is toggled
+   */
+  onChange: (checked: boolean) => void;
+
+  /**
+   * Label text
+   */
+  label?: string;
+
+  /**
+   * Description text (below label)
+   */
+  description?: string;
+
+  /**
+   * Whether the checkbox is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Size variant
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Additional class name
+   */
+  className?: string;
+
+  /**
+   * Error message
+   */
+  error?: string;
+}
+
+const AnimatedView = Animated.createAnimatedComponent(View);
+
+const sizes = {
+  sm: { box: 18, icon: 12, label: "text-sm" },
+  md: { box: 22, icon: 16, label: "text-base" },
+  lg: { box: 26, icon: 20, label: "text-lg" },
+};
+
+export function Checkbox({
+  checked,
+  onChange,
+  label,
+  description,
+  disabled = false,
+  size = "md",
+  className,
+  error,
+}: CheckboxProps) {
+  const { isDark } = useTheme();
+  const sizeConfig = sizes[size];
+
+  const animatedBoxStyle = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      checked ? 1 : 0,
+      [0, 1],
+      ["transparent", "#10b981"]
+    );
+
+    const borderColor = interpolateColor(
+      checked ? 1 : 0,
+      [0, 1],
+      [error ? "#ef4444" : isDark ? "#475569" : "#cbd5e1", "#10b981"]
+    );
+
+    return {
+      backgroundColor: withTiming(backgroundColor, { duration: 150 }),
+      borderColor: withTiming(borderColor, { duration: 150 }),
+      transform: [
+        {
+          scale: withSpring(checked ? 1 : 0.95, {
+            damping: 15,
+            stiffness: 400,
+          }),
+        },
+      ],
+    };
+  }, [checked, isDark, error]);
+
+  const animatedCheckStyle = useAnimatedStyle(() => {
+    return {
+      opacity: withTiming(checked ? 1 : 0, { duration: 150 }),
+      transform: [
+        {
+          scale: withSpring(checked ? 1 : 0.5, {
+            damping: 15,
+            stiffness: 400,
+          }),
+        },
+      ],
+    };
+  }, [checked]);
+
+  return (
+    <TouchableOpacity
+      onPress={() => !disabled && onChange(!checked)}
+      disabled={disabled}
+      activeOpacity={0.7}
+      className={cn(
+        "flex-row items-start",
+        disabled && "opacity-50",
+        className
+      )}
+    >
+      <AnimatedView
+        style={[
+          animatedBoxStyle,
+          {
+            width: sizeConfig.box,
+            height: sizeConfig.box,
+            borderWidth: 2,
+            borderRadius: 6,
+            justifyContent: "center",
+            alignItems: "center",
+            marginTop: 2,
+          },
+        ]}
+      >
+        <Animated.View style={animatedCheckStyle}>
+          <Ionicons name="checkmark" size={sizeConfig.icon} color="white" />
+        </Animated.View>
+      </AnimatedView>
+
+      {(label || description) && (
+        <View className="flex-1 ml-3">
+          {label && (
+            <Text
+              className={cn(
+                sizeConfig.label,
+                isDark ? "text-text-dark" : "text-text-light",
+                disabled && "opacity-70"
+              )}
+            >
+              {label}
+            </Text>
+          )}
+          {description && (
+            <Text
+              className={cn(
+                "text-sm mt-0.5",
+                isDark ? "text-muted-dark" : "text-muted-light"
+              )}
+            >
+              {description}
+            </Text>
+          )}
+          {error && <Text className="text-red-500 text-sm mt-1">{error}</Text>}
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+/**
+ * Checkbox Group component for multiple checkboxes
+ */
+interface CheckboxGroupProps<T extends string> {
+  /**
+   * Available options
+   */
+  options: {
+    value: T;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+  }[];
+
+  /**
+   * Currently selected values
+   */
+  value: T[];
+
+  /**
+   * Callback when selection changes
+   */
+  onChange: (value: T[]) => void;
+
+  /**
+   * Group label
+   */
+  label?: string;
+
+  /**
+   * Size variant
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Additional class name
+   */
+  className?: string;
+}
+
+export function CheckboxGroup<T extends string>({
+  options,
+  value,
+  onChange,
+  label,
+  size = "md",
+  className,
+}: CheckboxGroupProps<T>) {
+  const { isDark } = useTheme();
+
+  const handleToggle = (optionValue: T) => {
+    if (value.includes(optionValue)) {
+      onChange(value.filter((v) => v !== optionValue));
+    } else {
+      onChange([...value, optionValue]);
+    }
+  };
+
+  return (
+    <View className={className}>
+      {label && (
+        <Text
+          className={cn(
+            "text-sm font-medium mb-3",
+            isDark ? "text-text-dark" : "text-text-light"
+          )}
+        >
+          {label}
+        </Text>
+      )}
+      <View className="gap-3">
+        {options.map((option) => (
+          <Checkbox
+            key={option.value}
+            checked={value.includes(option.value)}
+            onChange={() => handleToggle(option.value)}
+            label={option.label}
+            description={option.description}
+            disabled={option.disabled}
+            size={size}
+          />
+        ))}
+      </View>
+    </View>
+  );
+}

package/components/ui/Input.stories.tsx

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { View } from "react-native";
+import { Input } from "./Input";
+
+const meta: Meta<typeof Input> = {
+  title: "UI/Input",
+  component: Input,
+  argTypes: {
+    label: {
+      control: "text",
+    },
+    placeholder: {
+      control: "text",
+    },
+    error: {
+      control: "text",
+    },
+    hint: {
+      control: "text",
+    },
+    secureTextEntry: {
+      control: "boolean",
+    },
+  },
+  args: {
+    label: "Label",
+    placeholder: "Enter text...",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {
+  args: {
+    label: "Email",
+    placeholder: "Enter your email",
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    label: "Search",
+    placeholder: "Search...",
+    leftIcon: "search",
+  },
+};
+
+export const Password: Story = {
+  args: {
+    label: "Password",
+    placeholder: "Enter password",
+    secureTextEntry: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: "Email",
+    placeholder: "Enter your email",
+    value: "invalid-email",
+    error: "Please enter a valid email address",
+  },
+};
+
+export const WithHint: Story = {
+  args: {
+    label: "Username",
+    placeholder: "Choose a username",
+    hint: "Username must be 3-20 characters",
+  },
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <Input label="Default" placeholder="Enter text..." />
+      <Input
+        label="With Value"
+        placeholder="Enter text..."
+        value="Hello World"
+      />
+      <Input
+        label="With Error"
+        placeholder="Enter text..."
+        value="Invalid"
+        error="This field has an error"
+      />
+      <Input
+        label="With Hint"
+        placeholder="Enter text..."
+        hint="This is a helpful hint"
+      />
+      <Input
+        label="Password"
+        placeholder="Enter password"
+        secureTextEntry
+      />
+      <Input
+        label="With Icon"
+        placeholder="Search..."
+        leftIcon="search"
+      />
+    </View>
+  ),
+};

package/components/ui/Input.tsx

@@ -0,0 +1,117 @@
+import { forwardRef, useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  TextInputProps,
+  Pressable,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { cn } from "@/utils/cn";
+import { useTheme } from "@/hooks/useTheme";
+
+interface InputProps extends TextInputProps {
+  label?: string;
+  error?: string;
+  hint?: string;
+  leftIcon?: keyof typeof Ionicons.glyphMap;
+  rightIcon?: keyof typeof Ionicons.glyphMap;
+  onRightIconPress?: () => void;
+  containerClassName?: string;
+  inputClassName?: string;
+}
+
+export const Input = forwardRef<TextInput, InputProps>(
+  (
+    {
+      label,
+      error,
+      hint,
+      leftIcon,
+      rightIcon,
+      onRightIconPress,
+      containerClassName,
+      inputClassName,
+      secureTextEntry,
+      ...props
+    },
+    ref
+  ) => {
+    const { isDark } = useTheme();
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const isPassword = secureTextEntry !== undefined;
+
+    const togglePasswordVisibility = () => {
+      setIsPasswordVisible(!isPasswordVisible);
+    };
+
+    return (
+      <View className={cn("w-full", containerClassName)}>
+        {label && (
+          <Text className="mb-2 text-sm font-medium text-text-light dark:text-text-dark">
+            {label}
+          </Text>
+        )}
+
+        <View
+          className={cn(
+            "flex-row items-center rounded-xl border-2 bg-surface-light px-4 dark:bg-surface-dark",
+            error
+              ? "border-red-500"
+              : "border-gray-200 focus-within:border-primary-500 dark:border-gray-700"
+          )}
+        >
+          {leftIcon && (
+            <Ionicons
+              name={leftIcon}
+              size={20}
+              color={isDark ? "#94a3b8" : "#64748b"}
+              style={{ marginRight: 8 }}
+            />
+          )}
+
+          <TextInput
+            ref={ref}
+            className={cn(
+              "flex-1 py-3 text-base text-text-light dark:text-text-dark",
+              inputClassName
+            )}
+            placeholderTextColor={isDark ? "#64748b" : "#94a3b8"}
+            secureTextEntry={isPassword && !isPasswordVisible}
+            {...props}
+          />
+
+          {isPassword ? (
+            <Pressable onPress={togglePasswordVisibility}>
+              <Ionicons
+                name={isPasswordVisible ? "eye-off-outline" : "eye-outline"}
+                size={20}
+                color={isDark ? "#94a3b8" : "#64748b"}
+              />
+            </Pressable>
+          ) : rightIcon ? (
+            <Pressable onPress={onRightIconPress} disabled={!onRightIconPress}>
+              <Ionicons
+                name={rightIcon}
+                size={20}
+                color={isDark ? "#94a3b8" : "#64748b"}
+              />
+            </Pressable>
+          ) : null}
+        </View>
+
+        {error && (
+          <Text className="mt-1 text-sm text-red-500">{error}</Text>
+        )}
+
+        {hint && !error && (
+          <Text className="mt-1 text-sm text-muted-light dark:text-muted-dark">
+            {hint}
+          </Text>
+        )}
+      </View>
+    );
+  }
+);
+
+Input.displayName = "Input";

package/components/ui/Modal.tsx

@@ -0,0 +1,98 @@
+import {
+  Modal as RNModal,
+  View,
+  Text,
+  Pressable,
+  ModalProps as RNModalProps,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { cn } from "@/utils/cn";
+import { useTheme } from "@/hooks/useTheme";
+
+interface ModalProps extends Omit<RNModalProps, "children"> {
+  title?: string;
+  onClose: () => void;
+  showCloseButton?: boolean;
+  size?: "sm" | "md" | "lg" | "full";
+  className?: string;
+  children: React.ReactNode;
+}
+
+const sizeStyles = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  full: "w-full h-full",
+};
+
+export function Modal({
+  visible,
+  title,
+  onClose,
+  showCloseButton = true,
+  size = "md",
+  className,
+  children,
+  ...props
+}: ModalProps) {
+  const { isDark } = useTheme();
+
+  return (
+    <RNModal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+      {...props}
+    >
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        className="flex-1"
+      >
+        <Pressable
+          onPress={onClose}
+          className="flex-1 items-center justify-center bg-black/50 px-4"
+        >
+          <Pressable
+            onPress={(e) => e.stopPropagation()}
+            className={cn(
+              "w-full rounded-2xl bg-background-light p-6 dark:bg-background-dark",
+              size !== "full" && sizeStyles[size],
+              className
+            )}
+          >
+            {/* Header */}
+            {(title || showCloseButton) && (
+              <View className="mb-4 flex-row items-center justify-between">
+                {title ? (
+                  <Text className="text-xl font-semibold text-text-light dark:text-text-dark">
+                    {title}
+                  </Text>
+                ) : (
+                  <View />
+                )}
+                {showCloseButton && (
+                  <Pressable
+                    onPress={onClose}
+                    className="h-8 w-8 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800"
+                  >
+                    <Ionicons
+                      name="close"
+                      size={20}
+                      color={isDark ? "#f8fafc" : "#0f172a"}
+                    />
+                  </Pressable>
+                )}
+              </View>
+            )}
+
+            {/* Content */}
+            {children}
+          </Pressable>
+        </Pressable>
+      </KeyboardAvoidingView>
+    </RNModal>
+  );
+}