@effijs/templates 0.0.0-stage → 1.0.0-alpha.0

package/platforms/react-native/solutions/components/BottomSheetWidgets/files/bottomSheet/List.BottomSheet.tsx

@@ -0,0 +1,62 @@
+import { useNavigation } from '@effijs/navigation-react-native';
+import { createContext, JSX, useContext, useState } from 'react';
+
+import BottomSheet from '@components/BottomSheet';
+
+export interface IListBottomSheetProps {
+  value?: any;
+  data: any[];
+  title?: string;
+  description?: string;
+  onSearch?: (query: string, item: any) => boolean;
+  renderItem: (item: any, close: () => void) => JSX.Element;
+}
+
+const ListContext = createContext<{ value: any; setValue: (value?: any) => void }>({
+  value: undefined,
+  setValue: () => {},
+});
+
+export function useListContext() {
+  return useContext(ListContext);
+}
+
+export default function ListBottomSheet({
+  value: initial,
+  title,
+  description,
+  data: allData,
+  onSearch,
+  renderItem,
+}: IListBottomSheetProps) {
+  const { close } = useNavigation();
+  const [value, setValue] = useState(initial);
+  const [data, setData] = useState(allData);
+
+  return (
+    <BottomSheet onClose={close} maxHeight={500}>
+      <BottomSheet.Header title={title} description={description} trailingActions={['close']} />
+      {onSearch ? (
+        <BottomSheet.Search
+          placeholder="Search"
+          onSearch={query => {
+            if (!query) {
+              setData(allData);
+              return;
+            }
+            const filtered = allData.filter(item => onSearch?.(query, item));
+            setData(filtered);
+          }}
+        />
+      ) : null}
+      <ListContext.Provider value={{ value, setValue }}>
+        <BottomSheet.FlatList
+          data={data}
+          renderItem={props => renderItem?.(props, close)}
+          contentContainerStyle={{ paddingBottom: 20 }}
+          showsVerticalScrollIndicator={true}
+        />
+      </ListContext.Provider>
+    </BottomSheet>
+  );
+}

package/platforms/react-native/solutions/components/BottomSheetWidgets/solution.js

@@ -0,0 +1,49 @@
+export default {
+  "id": "component:BottomSheetWidgets",
+  "type": "component",
+  "platforms": [
+    "react-native"
+  ],
+  "title": "Bottom sheet widgets",
+  "description": "List and date-time sheets, plus Form.Element.SelectPicker.",
+  "status": "stable",
+  "since": "1.0.0",
+  "tags": [
+    "ui",
+    "widget"
+  ],
+  "requires": [
+    "component:BottomSheet"
+  ],
+  "dependencies": [],
+  "files": [
+    {
+      "from": "files/bottomSheet",
+      "to": "ui/widgets/bottomSheet"
+    },
+    {
+      "from": "files/SelectPicker.tsx",
+      "to": "ui/components/Form/SelectPicker.tsx"
+    }
+  ],
+  "register": [
+    {
+      "file": "ui/components/Form/index.ts",
+      "marker": "form-imports",
+      "code": "import SelectPicker from './SelectPicker';\n"
+    },
+    {
+      "file": "ui/components/Form/index.ts",
+      "marker": "form-types",
+      "code": "    SelectPicker: typeof SelectPicker;\n"
+    },
+    {
+      "file": "ui/components/Form/index.ts",
+      "marker": "form-elements",
+      "code": "  SelectPicker,\n"
+    }
+  ],
+  "manual": [],
+  "api": "List bottom sheet and SelectPicker. DateTimePicker widget is used by component:DateTimePicker.",
+  "example": "<Form.Element.SelectPicker data={items} />"
+};

package/platforms/react-native/solutions/components/Calendar/README.md

@@ -0,0 +1,29 @@
+# Calendar
+
+Calendar from the previous template kit. Treat the API as experimental until it is wired into a screen.
+
+## API
+
+Default export from ui/components/Calendar.
+
+## Example
+
+```tsx
+import Calendar from '@components/Calendar';
+```
+
+## Dependencies
+
+None beyond the setup baseline.
+
+No other solutions are required.
+
+## Manual steps
+
+None.
+
+## Added in
+
+1.0.0 (`experimental`).
+
+Install with `forge g add --id component:Calendar`.

package/platforms/react-native/solutions/components/Calendar/files/Common.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { calendarStyles } from './calendar.styles';
+import type { ICalendarProps } from './calendar.types';
+import { CalendarProvider } from './Context';
+
+export default function CalendarCommon({ children, type = 'day', ...providerProps }: ICalendarProps) {
+  const resolvedChildren = typeof children === 'function' ? children() : children;
+
+  return (
+    <CalendarProvider type={type} {...providerProps}>
+      <View style={calendarStyles.container}>{resolvedChildren}</View>
+    </CalendarProvider>
+  );
+}

package/platforms/react-native/solutions/components/Calendar/files/Context.tsx

@@ -0,0 +1,466 @@
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';
+
+import type {
+  ICalendarContext,
+  ICalendarProps,
+  TCalendarActivePeriod,
+  TCalendarDayItem,
+  TCalendarDayRenderState,
+  TCalendarSelectType,
+} from './calendar.types';
+import {
+  addDays,
+  DEFAULT_MONTH_NAMES,
+  formatDate,
+  generateCalendarDays,
+  generateWeekDays,
+  getDayName,
+  getWeekDayLabels,
+  getWeekStart,
+  resolveInitialDate,
+} from './calendar.utils';
+
+const CalendarContext = createContext<ICalendarContext | null>(null);
+
+const resolveMarker = (markedDates: ICalendarProps['markedDates'], dateKey: string) => {
+  const marker = markedDates?.[dateKey];
+  if (!marker) {
+    return { hasMarker: false, markerColor: undefined };
+  }
+
+  if (typeof marker === 'boolean') {
+    return { hasMarker: marker, markerColor: undefined };
+  }
+
+  return { hasMarker: true, markerColor: marker.dotColor };
+};
+
+export function CalendarProvider({
+  children,
+  type = 'day',
+  minDate,
+  maxDate,
+  value,
+  onChange,
+  startWeekDay,
+  daysNames,
+  monthNames: customMonthNames,
+  defaultViewDate,
+  swipeable = true,
+  markedDates,
+  renderDayItem,
+  renderDayTitleItem,
+}: ICalendarProps & { children: ReactNode }) {
+  const today = useMemo(() => new Date(), []);
+  const initialDate = useMemo(
+    () => defaultViewDate ?? resolveInitialDate(type, value, today),
+    [defaultViewDate, type, value, today],
+  );
+
+  const [selectType, setSelectType] = useState<TCalendarSelectType>();
+  const [currentMonth, setCurrentMonth] = useState(() => initialDate.getMonth());
+  const [currentYear, setCurrentYear] = useState(() => initialDate.getFullYear());
+  const [currentWeekStart, setCurrentWeekStart] = useState(() => {
+    const firstDayOfWeek = startWeekDay === 'monday' ? 1 : 0;
+    return getWeekStart(initialDate, firstDayOfWeek);
+  });
+  const [activePeriod, setActivePeriod] = useState<TCalendarActivePeriod>('month');
+
+  const [selectedStartDate, setSelectedStartDate] = useState<Date | null>(() =>
+    type === 'day' && value instanceof Date
+      ? value
+      : type === 'period' &&
+          value &&
+          typeof value === 'object' &&
+          !(value instanceof Date) &&
+          value.startPeriod instanceof Date
+        ? value.startPeriod
+        : null,
+  );
+  const [selectedEndDate, setSelectedEndDate] = useState<Date | null>(() =>
+    type === 'period' &&
+    value &&
+    typeof value === 'object' &&
+    !(value instanceof Date) &&
+    value.endPeriod instanceof Date
+      ? value.endPeriod
+      : null,
+  );
+
+  const firstDayOfWeek = useMemo(() => (startWeekDay === 'monday' ? 1 : 0), [startWeekDay]);
+
+  const monthNames = useMemo(() => customMonthNames || DEFAULT_MONTH_NAMES, [customMonthNames]);
+  const weekDays = useMemo(() => getWeekDayLabels(daysNames, firstDayOfWeek), [daysNames, firstDayOfWeek]);
+
+  useEffect(() => {
+    if (type === 'day' && value instanceof Date) {
+      setSelectedStartDate(value);
+      setSelectedEndDate(null);
+      setCurrentMonth(value.getMonth());
+      setCurrentYear(value.getFullYear());
+      setCurrentWeekStart(getWeekStart(value, firstDayOfWeek));
+      return;
+    }
+
+    if (type === 'period' && value && typeof value === 'object' && !(value instanceof Date)) {
+      const start = value.startPeriod instanceof Date ? value.startPeriod : null;
+      const end = value.endPeriod instanceof Date ? value.endPeriod : null;
+      setSelectedStartDate(start);
+      setSelectedEndDate(end);
+
+      if (start) {
+        setCurrentMonth(start.getMonth());
+        setCurrentYear(start.getFullYear());
+        setCurrentWeekStart(getWeekStart(start, firstDayOfWeek));
+      }
+      return;
+    }
+
+    if (value === null) {
+      setSelectedStartDate(null);
+      setSelectedEndDate(null);
+    }
+  }, [value, type, firstDayOfWeek]);
+
+  const isToday = useCallback(
+    (year: number, month: number, day: number) =>
+      today.getDate() === day && today.getMonth() === month && today.getFullYear() === year,
+    [today],
+  );
+
+  const handleDateSelect = useCallback(
+    (year: number, month: number, day: number) => {
+      let selectedDate: Date | null = new Date(year, month, day);
+
+      if (minDate && selectedDate < minDate) {
+        return;
+      }
+
+      if (maxDate && selectedDate > maxDate) {
+        return;
+      }
+
+      if (type === 'day') {
+        if (selectedStartDate && formatDate(selectedDate) === formatDate(selectedStartDate)) {
+          selectedDate = null;
+        }
+
+        setSelectedStartDate(selectedDate);
+        setSelectedEndDate(null);
+        onChange?.(selectedDate);
+        return;
+      }
+
+      if (type === 'period') {
+        if (
+          selectedStartDate &&
+          selectedEndDate &&
+          (formatDate(selectedDate) === formatDate(selectedStartDate) ||
+            formatDate(selectedDate) === formatDate(selectedEndDate))
+        ) {
+          setSelectedStartDate(null);
+          setSelectedEndDate(null);
+          onChange?.(null);
+          return;
+        }
+
+        if (!selectedStartDate || (selectedStartDate && selectedEndDate)) {
+          setSelectedStartDate(selectedDate);
+          setSelectedEndDate(null);
+          onChange?.(null);
+        } else {
+          const period = {
+            startPeriod: selectedStartDate,
+            endPeriod: selectedDate,
+          };
+          if (selectedDate < selectedStartDate) {
+            period.startPeriod = selectedDate;
+            period.endPeriod = selectedStartDate;
+
+            setSelectedStartDate(selectedDate);
+            setSelectedEndDate(selectedStartDate);
+          } else {
+            setSelectedEndDate(selectedDate);
+          }
+          onChange?.(period);
+        }
+      }
+    },
+    [minDate, maxDate, selectedStartDate, selectedEndDate, type, onChange],
+  );
+
+  const isInRange = useCallback(
+    (year: number, month: number, day: number) => {
+      if (!selectedStartDate || !selectedEndDate) return false;
+
+      const date = new Date(year, month, day);
+      return date >= selectedStartDate && date <= selectedEndDate;
+    },
+    [selectedStartDate, selectedEndDate],
+  );
+
+  const isOutMinMax = useCallback(
+    (year: number, month: number, day: number) => {
+      if (!minDate && !maxDate) {
+        return false;
+      }
+
+      const date = new Date(year, month, day);
+
+      return Boolean((minDate && minDate > date) || (maxDate && maxDate < date));
+    },
+    [minDate, maxDate],
+  );
+
+  const isStartDate = useCallback(
+    (year: number, month: number, day: number) => {
+      if (!selectedStartDate) return false;
+
+      const date = new Date(year, month, day);
+      return formatDate(date) === formatDate(selectedStartDate);
+    },
+    [selectedStartDate],
+  );
+
+  const isEndDate = useCallback(
+    (year: number, month: number, day: number) => {
+      if (!selectedEndDate) return false;
+
+      const date = new Date(year, month, day);
+      return formatDate(date) === formatDate(selectedEndDate);
+    },
+    [selectedEndDate],
+  );
+
+  const isStartWeekDay = useCallback(
+    (year: number, month: number, day: number) => {
+      const date = new Date(year, month, day);
+      return date.getDay() === firstDayOfWeek;
+    },
+    [firstDayOfWeek],
+  );
+
+  const isEndWeekDay = useCallback(
+    (year: number, month: number, day: number) => {
+      const date = new Date(year, month, day);
+      return date.getDay() === (firstDayOfWeek === 1 ? 0 : 6);
+    },
+    [firstDayOfWeek],
+  );
+
+  const goToPreviousMonth = useCallback(() => {
+    if (currentMonth === 0) {
+      setCurrentMonth(11);
+      setCurrentYear(prev => prev - 1);
+    } else {
+      setCurrentMonth(prev => prev - 1);
+    }
+  }, [currentMonth]);
+
+  const goToNextMonth = useCallback(() => {
+    if (currentMonth === 11) {
+      setCurrentMonth(0);
+      setCurrentYear(prev => prev + 1);
+    } else {
+      setCurrentMonth(prev => prev + 1);
+    }
+  }, [currentMonth]);
+
+  const goToPreviousWeek = useCallback(() => {
+    setCurrentWeekStart(prev => {
+      const next = addDays(prev, -7);
+      setCurrentMonth(next.getMonth());
+      setCurrentYear(next.getFullYear());
+      return next;
+    });
+  }, []);
+
+  const goToNextWeek = useCallback(() => {
+    setCurrentWeekStart(prev => {
+      const next = addDays(prev, 7);
+      setCurrentMonth(next.getMonth());
+      setCurrentYear(next.getFullYear());
+      return next;
+    });
+  }, []);
+
+  const handlePrevPeriod = useCallback(
+    (period?: TCalendarActivePeriod) => {
+      const target = period ?? activePeriod;
+      if (target === 'week') {
+        goToPreviousWeek();
+        return;
+      }
+      goToPreviousMonth();
+    },
+    [activePeriod, goToPreviousMonth, goToPreviousWeek],
+  );
+
+  const handleNextPeriod = useCallback(
+    (period?: TCalendarActivePeriod) => {
+      const target = period ?? activePeriod;
+      if (target === 'week') {
+        goToNextWeek();
+        return;
+      }
+      goToNextMonth();
+    },
+    [activePeriod, goToNextMonth, goToNextWeek],
+  );
+
+  const handleToday = useCallback(() => {
+    setCurrentMonth(today.getMonth());
+    setCurrentYear(today.getFullYear());
+    setCurrentWeekStart(getWeekStart(today, firstDayOfWeek));
+  }, [today, firstDayOfWeek]);
+
+  const setViewDate = useCallback(
+    (date: Date) => {
+      setCurrentMonth(date.getMonth());
+      setCurrentYear(date.getFullYear());
+      setCurrentWeekStart(getWeekStart(date, firstDayOfWeek));
+    },
+    [firstDayOfWeek],
+  );
+
+  const onMonthSelect = useCallback(() => {
+    setSelectType(prev => (prev === 'month' ? undefined : 'month'));
+  }, []);
+
+  const onYearSelect = useCallback(() => {
+    setSelectType(prev => (prev === 'year' ? undefined : 'year'));
+  }, []);
+
+  const calendarDays = useMemo(
+    () => generateCalendarDays(currentYear, currentMonth, firstDayOfWeek),
+    [currentYear, currentMonth, firstDayOfWeek],
+  );
+
+  const weekDaysItems = useMemo(
+    () => generateWeekDays(currentWeekStart, currentMonth, currentYear),
+    [currentWeekStart, currentMonth, currentYear],
+  );
+
+  const getDayNameForDate = useCallback((date: Date) => getDayName(date, daysNames), [daysNames]);
+
+  const getDayRenderState = useCallback(
+    (item: TCalendarDayItem): TCalendarDayRenderState => {
+      const markerInfo = resolveMarker(markedDates, formatDate(item.date));
+
+      return {
+        isToday: isToday(item.year, item.month, item.day),
+        isStart: isStartDate(item.year, item.month, item.day),
+        isEnd: isEndDate(item.year, item.month, item.day),
+        isInRange: isInRange(item.year, item.month, item.day),
+        isOutMinMax: isOutMinMax(item.year, item.month, item.day),
+        isStartWeekDay: isStartWeekDay(item.year, item.month, item.day),
+        isEndWeekDay: isEndWeekDay(item.year, item.month, item.day),
+        hasMarker: markerInfo.hasMarker,
+        markerColor: markerInfo.markerColor,
+      };
+    },
+    [markedDates, isToday, isStartDate, isEndDate, isInRange, isOutMinMax, isStartWeekDay, isEndWeekDay],
+  );
+
+  const contextValue = useMemo<ICalendarContext>(
+    () => ({
+      type,
+      value,
+      today,
+      minDate,
+      maxDate,
+      currentMonth,
+      currentYear,
+      currentWeekStart,
+      selectType,
+      selectedStartDate,
+      selectedEndDate,
+      firstDayOfWeek,
+      monthNames,
+      weekDays,
+      activePeriod,
+      swipeable,
+      markedDates,
+      renderDayItem,
+      renderDayTitleItem,
+      handleDateSelect,
+      handlePrevPeriod,
+      handleNextPeriod,
+      handleToday,
+      setViewDate,
+      setActivePeriod,
+      onMonthSelect,
+      onYearSelect,
+      setCurrentMonth,
+      setCurrentYear,
+      setSelectType,
+      isToday,
+      isInRange,
+      isOutMinMax,
+      isStartDate,
+      isEndDate,
+      isStartWeekDay,
+      isEndWeekDay,
+      formatDate,
+      getDayName: getDayNameForDate,
+      getDayRenderState,
+      generateCalendarDays: calendarDays,
+      generateWeekDays: weekDaysItems,
+    }),
+    [
+      type,
+      value,
+      today,
+      minDate,
+      maxDate,
+      currentMonth,
+      currentYear,
+      currentWeekStart,
+      selectType,
+      selectedStartDate,
+      selectedEndDate,
+      firstDayOfWeek,
+      monthNames,
+      weekDays,
+      activePeriod,
+      swipeable,
+      markedDates,
+      renderDayItem,
+      renderDayTitleItem,
+      handleDateSelect,
+      handlePrevPeriod,
+      handleNextPeriod,
+      handleToday,
+      setViewDate,
+      onMonthSelect,
+      onYearSelect,
+      isToday,
+      isInRange,
+      isOutMinMax,
+      isStartDate,
+      isEndDate,
+      isStartWeekDay,
+      isEndWeekDay,
+      getDayRenderState,
+      getDayNameForDate,
+      calendarDays,
+      weekDaysItems,
+    ],
+  );
+
+  return <CalendarContext.Provider value={contextValue}>{children}</CalendarContext.Provider>;
+}
+
+export function useCalendar(): ICalendarContext {
+  const context = useContext(CalendarContext);
+
+  if (!context) {
+    throw new Error('useCalendar must be used within a Calendar component');
+  }
+
+  return context;
+}
+
+export function useOptionalCalendar() {
+  return useContext(CalendarContext);
+}

package/platforms/react-native/solutions/components/Calendar/files/DayCell.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { calendarStyles } from './calendar.styles';
+import type { TCalendarDayItem, TCalendarDayRender } from './calendar.types';
+import { useCalendar } from './Context';
+
+interface IDayCellProps {
+  item: TCalendarDayItem;
+  style?: StyleProp<ViewStyle>;
+  renderDayItem?: TCalendarDayRender;
+}
+
+export default function DayCell({ item, style, renderDayItem: renderDayItemProp }: IDayCellProps) {
+  const {
+    handleDateSelect,
+    getDayRenderState,
+    selectedStartDate,
+    selectedEndDate,
+    formatDate,
+    getDayName,
+    renderDayItem: renderDayItemContext,
+  } = useCalendar();
+
+  const state = getDayRenderState(item);
+  const renderDayItem = renderDayItemProp ?? renderDayItemContext;
+  const onPress = () => handleDateSelect(item.year, item.month, item.day);
+  const dayName = getDayName(item.date);
+
+  if (renderDayItem) {
+    return renderDayItem({ item, state, onPress, dayName });
+  }
+
+  const isStart = state.isStart;
+  const isEnd = state.isEnd;
+  const isRange = state.isInRange;
+  const isOutMinMaxRange = state.isOutMinMax;
+  const isTodayDate = state.isToday;
+  const isStartWeekDate = state.isStartWeekDay;
+  const isEndWeekDate = state.isEndWeekDay;
+
+  return (
+    <TouchableOpacity style={[calendarStyles.dayButton, style]} onPress={onPress}>
+      {selectedStartDate &&
+      selectedEndDate &&
+      formatDate(selectedStartDate) !== formatDate(selectedEndDate) &&
+      (isStart || isEnd) ? (
+        <View
+          style={[
+            calendarStyles.startEndRange,
+            {
+              backgroundColor: isStart || isEnd ? '#FE00001A' : 'transparent',
+              right: isStart ? 0 : undefined,
+              left: isEnd ? 0 : undefined,
+            },
+          ]}
+        />
+      ) : null}
+      <View
+        style={[
+          StyleSheet.absoluteFill,
+          !isStart && !isEnd && !isRange && !item.isCurrentMonth && calendarStyles.otherMonthDay,
+          isStart && calendarStyles.startDate,
+          isEnd && calendarStyles.endDate,
+          isRange && !isStart && !isEnd && calendarStyles.inRange,
+          isRange && !isStart && !isEnd && isStartWeekDate && calendarStyles.inRangeStartWeek,
+          isRange && !isStart && !isEnd && isEndWeekDate && calendarStyles.inRangeEndWeek,
+        ]}
+      />
+      <Text
+        style={[
+          calendarStyles.dayText,
+          !item.isCurrentMonth && calendarStyles.otherMonthDayText,
+          item.isCurrentMonth && isOutMinMaxRange && calendarStyles.outMinMaxRangeText,
+          isTodayDate && calendarStyles.todayText,
+          (isStart || isEnd) && calendarStyles.selectedDayText,
+          isRange && !isStart && !isEnd && calendarStyles.inRangeText,
+        ]}>
+        {item.day}
+      </Text>
+      {isTodayDate ? <View style={calendarStyles.today} /> : null}
+      {state.hasMarker ? (
+        <View
+          style={[calendarStyles.markerDot, state.markerColor ? { backgroundColor: state.markerColor } : undefined]}
+        />
+      ) : null}
+    </TouchableOpacity>
+  );
+}