@varunindiit/create-rn-starter 1.0.1

package/template/src/components/Picker/DatePickerSheet.tsx

@@ -0,0 +1,393 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Pressable, StyleSheet, TouchableOpacity, View } from "react-native";
+import Animated, {
+  FadeIn,
+  FadeOut,
+  Layout,
+} from "react-native-reanimated";
+import { moderateScale } from "react-native-size-matters";
+import { SPACING, THEME } from "../../theme";
+import { useLanguage } from "../../localization";
+import BottomSheet from "../BottomSheet/BottomSheet";
+import { RNButton, RNText } from "../index";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "../Icon/SvgIcons";
+
+interface DatePickerSheetProps {
+  visible: boolean;
+  onClose: () => void;
+  value?: Date | null;
+  minimumDate?: Date;
+  maximumDate?: Date;
+  onConfirm: (date: Date) => void;
+  title?: string;
+}
+
+const WEEKDAY_LABELS = ["S", "M", "T", "W", "T", "F", "S"];
+const MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+const startOfDay = (d: Date) => {
+  const copy = new Date(d);
+  copy.setHours(0, 0, 0, 0);
+  return copy;
+};
+
+const isSameDay = (a?: Date | null, b?: Date | null) => {
+  if (!a || !b) return false;
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+};
+
+const buildCalendar = (year: number, month: number) => {
+  const firstDay = new Date(year, month, 1);
+  const startWeekday = firstDay.getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const cells: (Date | null)[] = [];
+  for (let i = 0; i < startWeekday; i++) cells.push(null);
+  for (let d = 1; d <= daysInMonth; d++) {
+    cells.push(new Date(year, month, d));
+  }
+  while (cells.length % 7 !== 0) cells.push(null);
+  return cells;
+};
+
+const DatePickerSheet: React.FC<DatePickerSheetProps> = ({
+  visible,
+  onClose,
+  value,
+  minimumDate,
+  maximumDate,
+  onConfirm,
+  title,
+}) => {
+  const { t } = useLanguage();
+  const titleText = title ?? t("common.selectDate");
+  const today = useMemo(() => startOfDay(new Date()), []);
+  const minDate = useMemo(
+    () => (minimumDate ? startOfDay(minimumDate) : today),
+    [minimumDate, today]
+  );
+  const maxDate = useMemo(
+    () => (maximumDate ? startOfDay(maximumDate) : null),
+    [maximumDate]
+  );
+
+  const initial = value ? startOfDay(value) : today;
+  const [selected, setSelected] = useState<Date>(initial);
+  const [viewMonth, setViewMonth] = useState<number>(initial.getMonth());
+  const [viewYear, setViewYear] = useState<number>(initial.getFullYear());
+
+  useEffect(() => {
+    if (visible) {
+      const start = value ? startOfDay(value) : today;
+      setSelected(start);
+      setViewMonth(start.getMonth());
+      setViewYear(start.getFullYear());
+    }
+  }, [visible, value, today]);
+
+  const cells = useMemo(
+    () => buildCalendar(viewYear, viewMonth),
+    [viewYear, viewMonth]
+  );
+
+  const canGoPrev = useMemo(() => {
+    const firstOfView = new Date(viewYear, viewMonth, 1);
+    const firstOfMin = new Date(minDate.getFullYear(), minDate.getMonth(), 1);
+    return firstOfView > firstOfMin;
+  }, [viewYear, viewMonth, minDate]);
+
+  const canGoNext = useMemo(() => {
+    if (!maxDate) return true;
+    const firstOfView = new Date(viewYear, viewMonth, 1);
+    const firstOfMax = new Date(maxDate.getFullYear(), maxDate.getMonth(), 1);
+    return firstOfView < firstOfMax;
+  }, [viewYear, viewMonth, maxDate]);
+
+  const goPrev = () => {
+    if (!canGoPrev) return;
+    if (viewMonth === 0) {
+      setViewMonth(11);
+      setViewYear((y) => y - 1);
+    } else {
+      setViewMonth((m) => m - 1);
+    }
+  };
+
+  const goNext = () => {
+    if (!canGoNext) return;
+    if (viewMonth === 11) {
+      setViewMonth(0);
+      setViewYear((y) => y + 1);
+    } else {
+      setViewMonth((m) => m + 1);
+    }
+  };
+
+  const setQuick = (offsetDays: number) => {
+    const next = startOfDay(new Date());
+    next.setDate(next.getDate() + offsetDays);
+    setSelected(next);
+    setViewMonth(next.getMonth());
+    setViewYear(next.getFullYear());
+  };
+
+  const todaySelected = isSameDay(selected, today);
+  const tomorrow = startOfDay(new Date(today));
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  const tomorrowSelected = isSameDay(selected, tomorrow);
+
+  const handleConfirm = () => {
+    onConfirm(selected);
+    onClose();
+  };
+
+  return (
+    <BottomSheet visible={visible} onClose={onClose} contentStyle={styles.sheet}>
+      <View style={styles.header}>
+        <RNText font="semibold" size={18} color={THEME.text}>
+          {titleText}
+        </RNText>
+      </View>
+
+      <View style={styles.quickRow}>
+        <QuickChip
+          label={t("common.today")}
+          active={todaySelected}
+          onPress={() => setQuick(0)}
+        />
+        <QuickChip
+          label={t("common.tomorrow")}
+          active={tomorrowSelected}
+          onPress={() => setQuick(1)}
+        />
+      </View>
+
+      <View style={styles.monthRow}>
+        <TouchableOpacity
+          onPress={goPrev}
+          disabled={!canGoPrev}
+          activeOpacity={0.7}
+          style={[styles.navBtn, !canGoPrev && styles.navBtnDisabled]}
+          hitSlop={10}
+        >
+          <ChevronLeftIcon
+            size={moderateScale(16)}
+            color={canGoPrev ? THEME.primary : THEME.textPlaceholder}
+          />
+        </TouchableOpacity>
+        <Animated.View
+          key={`${viewMonth}-${viewYear}`}
+          entering={FadeIn.duration(180)}
+          exiting={FadeOut.duration(120)}
+        >
+          <RNText font="semibold" size={16} color={THEME.text}>
+            {MONTH_NAMES[viewMonth]} {viewYear}
+          </RNText>
+        </Animated.View>
+        <TouchableOpacity
+          onPress={goNext}
+          disabled={!canGoNext}
+          activeOpacity={0.7}
+          style={[styles.navBtn, !canGoNext && styles.navBtnDisabled]}
+          hitSlop={10}
+        >
+          <ChevronRightIcon
+            size={moderateScale(16)}
+            color={canGoNext ? THEME.primary : THEME.textPlaceholder}
+          />
+        </TouchableOpacity>
+      </View>
+
+      <View style={styles.weekRow}>
+        {WEEKDAY_LABELS.map((d, idx) => (
+          <View key={idx} style={styles.weekCell}>
+            <RNText size={11} font="medium" color={THEME.textMuted}>
+              {d}
+            </RNText>
+          </View>
+        ))}
+      </View>
+
+      <Animated.View
+        key={`grid-${viewMonth}-${viewYear}`}
+        entering={FadeIn.duration(160)}
+        layout={Layout.duration(140)}
+        style={styles.grid}
+      >
+        {cells.map((date, idx) => {
+          if (!date) {
+            return <View key={`e-${idx}`} style={styles.dayCell} />;
+          }
+          const disabled =
+            date < minDate || (maxDate ? date > maxDate : false);
+          const isToday = isSameDay(date, today);
+          const isSelected = isSameDay(date, selected);
+          return (
+            <View key={date.toISOString()} style={styles.dayCell}>
+              <Pressable
+                onPress={() => !disabled && setSelected(date)}
+                disabled={disabled}
+                style={({ pressed }) => [
+                  styles.dayBtn,
+                  isSelected && styles.dayBtnSelected,
+                  isToday && !isSelected && styles.dayBtnToday,
+                  pressed && !disabled && !isSelected && styles.dayBtnPressed,
+                ]}
+              >
+                <RNText
+                  size={14}
+                  font={isSelected ? "semibold" : isToday ? "semibold" : "regular"}
+                  color={
+                    disabled
+                      ? THEME.textPlaceholder
+                      : isSelected
+                      ? THEME.textOnPrimary
+                      : isToday
+                      ? THEME.primary
+                      : THEME.text
+                  }
+                >
+                  {date.getDate()}
+                </RNText>
+              </Pressable>
+            </View>
+          );
+        })}
+      </Animated.View>
+
+      <RNButton
+        title={t("common.confirm")}
+        onPress={handleConfirm}
+        containerStyle={styles.confirmBtn}
+      />
+    </BottomSheet>
+  );
+};
+
+const QuickChip = ({
+  label,
+  active,
+  onPress,
+}: {
+  label: string;
+  active: boolean;
+  onPress: () => void;
+}) => (
+  <TouchableOpacity
+    onPress={onPress}
+    activeOpacity={0.8}
+    style={[styles.chip, active && styles.chipActive]}
+  >
+    <RNText
+      size={13}
+      font="medium"
+      color={active ? THEME.textOnPrimary : THEME.text}
+    >
+      {label}
+    </RNText>
+  </TouchableOpacity>
+);
+
+export default DatePickerSheet;
+
+const styles = StyleSheet.create({
+  sheet: {
+    paddingHorizontal: SPACING.lg,
+    paddingBottom: SPACING.xl,
+  },
+  header: {
+    alignItems: "center",
+    marginBottom: moderateScale(12),
+  },
+  quickRow: {
+    flexDirection: "row",
+    gap: moderateScale(8),
+    marginBottom: moderateScale(16),
+  },
+  chip: {
+    paddingVertical: moderateScale(8),
+    paddingHorizontal: moderateScale(16),
+    borderRadius: moderateScale(20),
+    backgroundColor: THEME.primaryFaint,
+    borderWidth: 1,
+    borderColor: THEME.primaryLight,
+  },
+  chipActive: {
+    backgroundColor: THEME.primary,
+    borderColor: THEME.primary,
+  },
+  monthRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: moderateScale(12),
+    paddingHorizontal: moderateScale(4),
+  },
+  navBtn: {
+    width: moderateScale(34),
+    height: moderateScale(34),
+    borderRadius: moderateScale(17),
+    backgroundColor: THEME.primaryFaint,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  navBtnDisabled: {
+    backgroundColor: THEME.surfaceMuted,
+  },
+  weekRow: {
+    flexDirection: "row",
+    marginBottom: moderateScale(6),
+  },
+  weekCell: {
+    flex: 1,
+    alignItems: "center",
+    paddingVertical: moderateScale(6),
+  },
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+  },
+  dayCell: {
+    width: `${100 / 7}%`,
+    aspectRatio: 1,
+    padding: moderateScale(3),
+  },
+  dayBtn: {
+    flex: 1,
+    borderRadius: moderateScale(999),
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  dayBtnSelected: {
+    backgroundColor: THEME.primary,
+  },
+  dayBtnToday: {
+    borderWidth: 1.2,
+    borderColor: THEME.primary,
+  },
+  dayBtnPressed: {
+    backgroundColor: THEME.primaryFaint,
+  },
+  confirmBtn: {
+    marginTop: moderateScale(16),
+  },
+});

package/template/src/components/Picker/PassengerPickerSheet.tsx

@@ -0,0 +1,237 @@
+import React, { useEffect, useState } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated";
+import { moderateScale } from "react-native-size-matters";
+import { SPACING, THEME } from "../../theme";
+import { useLanguage } from "../../localization";
+import BottomSheet from "../BottomSheet/BottomSheet";
+import { RNButton, RNText } from "../index";
+import {
+  MinusIcon,
+  PlusIcon,
+  UserOutlineIcon,
+} from "../Icon/SvgIcons";
+
+interface PassengerPickerSheetProps {
+  visible: boolean;
+  onClose: () => void;
+  value: number;
+  onConfirm: (count: number) => void;
+  min?: number;
+  max?: number;
+  title?: string;
+  subtitle?: string;
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+const PassengerPickerSheet: React.FC<PassengerPickerSheetProps> = ({
+  visible,
+  onClose,
+  value,
+  onConfirm,
+  min = 1,
+  max = 8,
+  title,
+  subtitle,
+}) => {
+  const { t } = useLanguage();
+  const titleText = title ?? t("home.passengers");
+  const subtitleText = subtitle ?? t("home.passengersSubtitle");
+  const [count, setCount] = useState<number>(value);
+
+  useEffect(() => {
+    if (visible) setCount(value);
+  }, [visible, value]);
+
+  const decrement = () => {
+    if (count <= min) return;
+    setCount((c) => c - 1);
+  };
+
+  const increment = () => {
+    if (count >= max) return;
+    setCount((c) => c + 1);
+  };
+
+  const handleConfirm = () => {
+    onConfirm(count);
+    onClose();
+  };
+
+  const decDisabled = count <= min;
+  const incDisabled = count >= max;
+
+  return (
+    <BottomSheet visible={visible} onClose={onClose} contentStyle={styles.sheet}>
+      <View style={styles.header}>
+        <RNText font="semibold" size={18} color={THEME.text}>
+          {titleText}
+        </RNText>
+        <RNText
+          size={13}
+          color={THEME.textMuted}
+          style={styles.subtitle}
+          textAlign="center"
+        >
+          {subtitleText}
+        </RNText>
+      </View>
+
+      <View style={styles.stepper}>
+        <StepperButton
+          icon={
+            <MinusIcon
+              size={moderateScale(20)}
+              color={decDisabled ? THEME.textPlaceholder : THEME.primary}
+            />
+          }
+          disabled={decDisabled}
+          onPress={decrement}
+        />
+
+        <View style={styles.counterWrap}>
+          <View style={styles.counterInner}>
+            <UserOutlineIcon
+              size={moderateScale(20)}
+              color={THEME.primary}
+            />
+            <RNText
+              font="bold"
+              size={36}
+              color={THEME.text}
+              style={styles.counterText}
+            >
+              {count}
+            </RNText>
+          </View>
+          <RNText size={12} color={THEME.textMuted} style={styles.counterLabel}>
+            {count === 1 ? t("role.passenger") : t("home.passengers")}
+          </RNText>
+        </View>
+
+        <StepperButton
+          icon={
+            <PlusIcon
+              size={moderateScale(20)}
+              color={incDisabled ? THEME.textPlaceholder : THEME.primary}
+            />
+          }
+          disabled={incDisabled}
+          onPress={increment}
+        />
+      </View>
+
+      <RNText
+        size={11}
+        color={THEME.textMuted}
+        textAlign="center"
+        style={styles.limitHint}
+      >
+        Min {min} · Max {max}
+      </RNText>
+
+      <RNButton
+        title={t("common.apply")}
+        onPress={handleConfirm}
+        containerStyle={styles.applyBtn}
+      />
+    </BottomSheet>
+  );
+};
+
+const StepperButton = ({
+  icon,
+  onPress,
+  disabled,
+}: {
+  icon: React.ReactNode;
+  onPress: () => void;
+  disabled: boolean;
+}) => {
+  const scale = useSharedValue(1);
+  const style = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  return (
+    <AnimatedPressable
+      onPress={onPress}
+      disabled={disabled}
+      onPressIn={() => {
+        if (disabled) return;
+        scale.value = withSpring(0.9, { mass: 0.3, damping: 12 });
+      }}
+      onPressOut={() => {
+        scale.value = withSpring(1, { mass: 0.3, damping: 12 });
+      }}
+      style={[
+        styles.stepBtn,
+        disabled && styles.stepBtnDisabled,
+        style,
+      ]}
+    >
+      {icon}
+    </AnimatedPressable>
+  );
+};
+
+export default PassengerPickerSheet;
+
+const styles = StyleSheet.create({
+  sheet: {
+    paddingHorizontal: SPACING.xl,
+    paddingBottom: SPACING.xl,
+  },
+  header: {
+    alignItems: "center",
+    marginBottom: moderateScale(24),
+  },
+  subtitle: {
+    marginTop: moderateScale(6),
+  },
+  stepper: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: moderateScale(8),
+  },
+  stepBtn: {
+    width: moderateScale(56),
+    height: moderateScale(56),
+    borderRadius: moderateScale(28),
+    backgroundColor: THEME.primaryFaint,
+    borderWidth: 1,
+    borderColor: THEME.primaryLight,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  stepBtnDisabled: {
+    backgroundColor: THEME.surfaceMuted,
+    borderColor: THEME.divider,
+  },
+  counterWrap: {
+    flex: 1,
+    alignItems: "center",
+  },
+  counterInner: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  counterText: {
+    marginLeft: moderateScale(8),
+  },
+  counterLabel: {
+    marginTop: moderateScale(4),
+  },
+  limitHint: {
+    marginTop: moderateScale(16),
+  },
+  applyBtn: {
+    marginTop: moderateScale(20),
+  },
+});

package/template/src/components/Text/RNText.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { Text, TextProps, TextStyle, StyleProp } from "react-native";
+import { moderateScale } from "react-native-size-matters";
+import { FONTS, THEME } from "../../theme";
+
+type FontKey =
+  | "light"
+  | "regular"
+  | "italic"
+  | "medium"
+  | "semibold"
+  | "bold"
+  | "extraBold"
+  | "black";
+
+interface RNTextProps extends TextProps {
+  size?: number;
+  font?: FontKey;
+  color?: string;
+  textAlign?: TextStyle["textAlign"];
+  lineHeight?: number;
+  letterSpacing?: number;
+  style?: StyleProp<TextStyle>;
+}
+
+const RNText: React.FC<RNTextProps> = ({
+  size = 14,
+  font = "regular",
+  color = THEME.text,
+  textAlign,
+  lineHeight,
+  letterSpacing,
+  style,
+  children,
+  ...rest
+}) => {
+  const fontSize = moderateScale(size, 0.3);
+  const fontFamily = FONTS[font] || FONTS.regular;
+
+  return (
+    <Text
+      allowFontScaling={false}
+      {...rest}
+      style={[
+        {
+          fontFamily,
+          fontSize,
+          color,
+          textAlign,
+          lineHeight,
+          letterSpacing,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </Text>
+  );
+};
+
+export default RNText;
+export type { RNTextProps };

package/template/src/components/Text/index.ts

@@ -0,0 +1 @@
+export {default as RNText} from "./RNText"