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

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { calendarStyles } from './calendar.styles';
+import type { ICalendarMonthViewProps } from './calendar.types';
+import { useCalendar } from './Context';
+import DayCell from './DayCell';
+import MonthYearOverlay from './MonthYearOverlay';
+import SwipeablePeriod from './SwipeablePeriod';
+import WeekDayTitles from './WeekDayTitles';
+
+export default function MonthView({
+  showWeekDays = true,
+  swipeable,
+  renderDayItem,
+  renderDayTitleItem,
+}: ICalendarMonthViewProps) {
+  const { generateCalendarDays, setActivePeriod } = useCalendar();
+
+  React.useEffect(() => {
+    setActivePeriod('month');
+  }, [setActivePeriod]);
+
+  const content = (
+    <View>
+      {showWeekDays ? <WeekDayTitles renderDayTitleItem={renderDayTitleItem} /> : null}
+      <View style={calendarStyles.daysContainer}>
+        {generateCalendarDays.map((item, index) => (
+          <DayCell key={`${item.year}-${item.month}-${item.day}-${index}`} item={item} renderDayItem={renderDayItem} />
+        ))}
+      </View>
+      <MonthYearOverlay />
+    </View>
+  );
+
+  return (
+    <SwipeablePeriod enabled={swipeable} period="month">
+      {content}
+    </SwipeablePeriod>
+  );
+}

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+import { calendarStyles } from './calendar.styles';
+import { useCalendar } from './Context';
+
+export default function MonthYearOverlay() {
+  const { selectType, monthNames, today, setCurrentMonth, setCurrentYear, setSelectType } = useCalendar();
+
+  if (!selectType) {
+    return null;
+  }
+
+  return (
+    <View style={calendarStyles.monthContainer}>
+      {selectType === 'month' ? (
+        [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(index => (
+          <TouchableOpacity
+            key={index}
+            style={calendarStyles.monthItem}
+            onPress={() => {
+              setCurrentMonth(index);
+              setSelectType(undefined);
+            }}>
+            <Text style={calendarStyles.monthText}>{monthNames[index]}</Text>
+          </TouchableOpacity>
+        ))
+      ) : (
+        <ScrollView
+          style={calendarStyles.yearScrollContainer}
+          contentContainerStyle={calendarStyles.yearScrollContent}
+          showsVerticalScrollIndicator={true}>
+          {Array.from({ length: 101 }, (_, index) => {
+            const year = today.getFullYear() - index;
+            return (
+              <TouchableOpacity
+                key={year}
+                style={calendarStyles.yearItem}
+                onPress={() => {
+                  setCurrentYear(year);
+                  setSelectType(undefined);
+                }}>
+                <Text style={calendarStyles.monthText}>{year}</Text>
+              </TouchableOpacity>
+            );
+          })}
+        </ScrollView>
+      )}
+    </View>
+  );
+}

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

@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react';
+import { GestureDetector, usePanGesture } from 'react-native-gesture-handler';
+import { runOnJS } from 'react-native-reanimated';
+
+import type { TCalendarActivePeriod } from './calendar.types';
+import { useCalendar } from './Context';
+
+const SWIPE_THRESHOLD = 50;
+
+interface ISwipeablePeriodProps {
+  children: React.ReactNode;
+  enabled?: boolean;
+  period?: TCalendarActivePeriod;
+}
+
+export default function SwipeablePeriod({ children, enabled = true, period = 'month' }: ISwipeablePeriodProps) {
+  const { handlePrevPeriod, handleNextPeriod, selectType, swipeable } = useCalendar();
+
+  const isEnabled = enabled && swipeable && !selectType;
+
+  const onSwipePrev = useCallback(() => handlePrevPeriod(period), [handlePrevPeriod, period]);
+  const onSwipeNext = useCallback(() => handleNextPeriod(period), [handleNextPeriod, period]);
+
+  const gesture = usePanGesture({
+    activeOffsetX: [-10, 10],
+    onDeactivate: event => {
+      if (!isEnabled) {
+        return;
+      }
+
+      if (event.translationX < -SWIPE_THRESHOLD) {
+        runOnJS(onSwipeNext)();
+      } else if (event.translationX > SWIPE_THRESHOLD) {
+        runOnJS(onSwipePrev)();
+      }
+    },
+  });
+
+  if (!isEnabled) {
+    return <>{children}</>;
+  }
+
+  return <GestureDetector gesture={gesture}>{children}</GestureDetector>;
+}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+import { calendarStyles } from './calendar.styles';
+import type { TCalendarDayTitleRender } from './calendar.types';
+import { useCalendar } from './Context';
+
+interface IWeekDayTitlesProps {
+  renderDayTitleItem?: TCalendarDayTitleRender;
+}
+
+export default function WeekDayTitles({ renderDayTitleItem: renderDayTitleItemProp }: IWeekDayTitlesProps) {
+  const { weekDays, renderDayTitleItem: renderDayTitleItemContext } = useCalendar();
+  const renderDayTitleItem = renderDayTitleItemProp ?? renderDayTitleItemContext;
+
+  return (
+    <View style={calendarStyles.weekDaysContainer}>
+      {weekDays.map((day, index) =>
+        renderDayTitleItem ? (
+          <View key={index} style={calendarStyles.weekDayTitleCell}>
+            {renderDayTitleItem({ dayName: day, index })}
+          </View>
+        ) : (
+          <Text key={index} style={calendarStyles.weekDayText}>
+            {day}
+          </Text>
+        ),
+      )}
+    </View>
+  );
+}

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

@@ -0,0 +1,40 @@
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+
+import { calendarStyles } from './calendar.styles';
+import type { ICalendarWeekViewProps } from './calendar.types';
+import { useCalendar } from './Context';
+import DayCell from './DayCell';
+import SwipeablePeriod from './SwipeablePeriod';
+import WeekDayTitles from './WeekDayTitles';
+
+export default function WeekView({ swipeable, renderDayItem, renderDayTitleItem }: ICalendarWeekViewProps) {
+  const { generateWeekDays, setActivePeriod } = useCalendar();
+
+  useEffect(() => {
+    setActivePeriod('week');
+    return () => setActivePeriod('month');
+  }, [setActivePeriod]);
+
+  const content = (
+    <View>
+      <WeekDayTitles renderDayTitleItem={renderDayTitleItem} />
+      <View style={calendarStyles.weekRowContainer}>
+        {generateWeekDays.map((item, index) => (
+          <DayCell
+            key={`${item.year}-${item.month}-${item.day}-${index}`}
+            item={item}
+            style={calendarStyles.weekDayButton}
+            renderDayItem={renderDayItem}
+          />
+        ))}
+      </View>
+    </View>
+  );
+
+  return (
+    <SwipeablePeriod enabled={swipeable} period="week">
+      {content}
+    </SwipeablePeriod>
+  );
+}

package/platforms/react-native/solutions/components/Calendar/files/calendar.styles.ts

@@ -0,0 +1,142 @@
+import { StyleSheet } from 'react-native';
+
+export const calendarStyles = StyleSheet.create({
+  container: {
+    // backgroundColor: '#fff',
+    padding: 1,
+  },
+  weekDaysContainer: {
+    flexDirection: 'row',
+    marginVertical: 12,
+  },
+  weekDayText: {
+    flex: 1,
+    textAlign: 'center',
+    fontWeight: '500',
+  },
+  weekDayTitleCell: {
+    flex: 1,
+  },
+  daysContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  weekRowContainer: {
+    flexDirection: 'row',
+  },
+  dayButton: {
+    width: '14.28%',
+    height: '14.28%',
+    aspectRatio: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 4,
+  },
+  weekDayButton: {
+    flex: 1,
+    aspectRatio: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 4,
+  },
+  dayText: {
+    fontSize: 14,
+    fontWeight: '400',
+  },
+  today: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#FF9999',
+  },
+  todayText: {},
+  otherMonthDay: {
+    opacity: 0.5,
+  },
+  otherMonthDayText: {
+    color: '#999',
+  },
+  outMinMaxRangeText: {
+    color: '#999',
+  },
+  startDate: {
+    backgroundColor: '#fe0000',
+    borderRadius: 8,
+  },
+  endDate: {
+    backgroundColor: '#fe0000',
+    borderRadius: 8,
+  },
+  inRange: {
+    backgroundColor: '#FFE5E5',
+  },
+  startEndRange: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: '50%',
+  },
+  inRangeStartWeek: {
+    borderTopLeftRadius: 8,
+    borderBottomLeftRadius: 8,
+  },
+  inRangeEndWeek: {
+    borderTopRightRadius: 8,
+    borderBottomRightRadius: 8,
+  },
+  selectedDayText: {
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+  inRangeText: {},
+  markerDot: {
+    position: 'absolute',
+    bottom: 4,
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: '#fe0000',
+  },
+  monthContainer: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    backgroundColor: '#fff',
+  },
+  monthItem: {
+    width: '33.33%',
+    height: '25%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  yearScrollContainer: {
+    flex: 1,
+    maxHeight: '90%',
+  },
+  yearScrollContent: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingBottom: 10,
+  },
+  yearItem: {
+    width: '33.33%',
+    height: 75,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  monthText: {
+    fontFamily: 'Roboto',
+    fontSize: 14,
+  },
+  hidden: {
+    opacity: 0,
+  },
+});

package/platforms/react-native/solutions/components/Calendar/files/calendar.types.ts

@@ -0,0 +1,126 @@
+import type { ReactNode } from 'react';
+
+export type TCalendarPeriodValue = { startPeriod: Date; endPeriod: Date };
+
+export type TCalendarValue = null | Date | TCalendarPeriodValue;
+
+export type TCalendarSelectType = 'month' | 'year' | undefined;
+
+export type TCalendarActivePeriod = 'month' | 'week';
+
+export type TCalendarMarkedDate = boolean | { dotColor?: string };
+
+export type TCalendarMarkedDates = Record<string, TCalendarMarkedDate>;
+
+/** @deprecated Use TCalendarMarkedDate */
+export type TMarkedDate = TCalendarMarkedDate;
+
+/** @deprecated Use TCalendarMarkedDates */
+export type TMarkedDates = TCalendarMarkedDates;
+
+export type TCalendarDayItem = {
+  day: number;
+  month: number;
+  year: number;
+  date: Date;
+  isCurrentMonth: boolean;
+};
+
+export type TCalendarDayRenderState = {
+  isToday: boolean;
+  isStart: boolean;
+  isEnd: boolean;
+  isInRange: boolean;
+  isOutMinMax: boolean;
+  isStartWeekDay: boolean;
+  isEndWeekDay: boolean;
+  hasMarker: boolean;
+  markerColor?: string;
+};
+
+export type TCalendarDayRenderProps = {
+  item: TCalendarDayItem;
+  state: TCalendarDayRenderState;
+  onPress: () => void;
+  dayName: string;
+};
+
+export type TCalendarDayRender = (props: TCalendarDayRenderProps) => ReactNode;
+
+export type TCalendarDayTitleRender = (props: { dayName: string; index: number }) => ReactNode;
+
+export interface ICalendarProps {
+  type: 'day' | 'period';
+  startWeekDay?: 'monday' | 'sunday';
+  minDate?: Date;
+  maxDate?: Date;
+  monthNames?: string[];
+  daysNames?: string[];
+  value?: TCalendarValue;
+  onChange?: (value: TCalendarValue) => void;
+  defaultViewDate?: Date;
+  swipeable?: boolean;
+  markedDates?: TCalendarMarkedDates;
+  renderDayItem?: TCalendarDayRender;
+  renderDayTitleItem?: TCalendarDayTitleRender;
+  children?: ReactNode | (() => ReactNode);
+}
+
+export interface ICalendarViewProps {
+  swipeable?: boolean;
+  renderDayItem?: TCalendarDayRender;
+  renderDayTitleItem?: TCalendarDayTitleRender;
+}
+
+export interface ICalendarMonthViewProps extends ICalendarViewProps {
+  showWeekDays?: boolean;
+}
+
+export interface ICalendarWeekViewProps extends ICalendarViewProps {}
+
+export interface ICalendarContext {
+  type: 'day' | 'period';
+  value: TCalendarValue | undefined;
+  today: Date;
+  minDate?: Date;
+  maxDate?: Date;
+  currentMonth: number;
+  currentYear: number;
+  currentWeekStart: Date;
+  selectType: TCalendarSelectType;
+  selectedStartDate: Date | null;
+  selectedEndDate: Date | null;
+  firstDayOfWeek: number;
+  monthNames: string[];
+  weekDays: string[];
+  activePeriod: TCalendarActivePeriod;
+  swipeable: boolean;
+  markedDates?: TCalendarMarkedDates;
+  renderDayItem?: TCalendarDayRender;
+  renderDayTitleItem?: TCalendarDayTitleRender;
+
+  handleDateSelect: (year: number, month: number, day: number) => void;
+  handlePrevPeriod: (period?: TCalendarActivePeriod) => void;
+  handleNextPeriod: (period?: TCalendarActivePeriod) => void;
+  handleToday: () => void;
+  setViewDate: (date: Date) => void;
+  setActivePeriod: (period: TCalendarActivePeriod) => void;
+  onMonthSelect: () => void;
+  onYearSelect: () => void;
+  setCurrentMonth: (month: number) => void;
+  setCurrentYear: (year: number) => void;
+  setSelectType: (type: TCalendarSelectType) => void;
+
+  isToday: (year: number, month: number, day: number) => boolean;
+  isInRange: (year: number, month: number, day: number) => boolean;
+  isOutMinMax: (year: number, month: number, day: number) => boolean;
+  isStartDate: (year: number, month: number, day: number) => boolean;
+  isEndDate: (year: number, month: number, day: number) => boolean;
+  isStartWeekDay: (year: number, month: number, day: number) => boolean;
+  isEndWeekDay: (year: number, month: number, day: number) => boolean;
+  formatDate: (date: Date) => string;
+  getDayName: (date: Date) => string;
+  getDayRenderState: (item: TCalendarDayItem) => TCalendarDayRenderState;
+  generateCalendarDays: TCalendarDayItem[];
+  generateWeekDays: TCalendarDayItem[];
+}

package/platforms/react-native/solutions/components/Calendar/files/calendar.utils.ts

@@ -0,0 +1,143 @@
+import type { TCalendarDayItem, TCalendarPeriodValue, TCalendarValue } from './calendar.types';
+
+export const getDaysInMonth = (year: number, month: number) => new Date(year, month + 1, 0).getDate();
+
+export const getFirstDayOfMonth = (year: number, month: number) => new Date(year, month, 1).getDay();
+
+export const formatDate = (date: Date) => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+
+export const addDays = (date: Date, days: number) => {
+  const result = new Date(date);
+  result.setDate(result.getDate() + days);
+  return result;
+};
+
+export const getWeekStart = (date: Date, firstDayOfWeek: number) => {
+  const result = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  const day = result.getDay();
+  const diff = firstDayOfWeek === 1 ? (day === 0 ? -6 : 1 - day) : -day;
+  result.setDate(result.getDate() + diff);
+  return result;
+};
+
+export const resolveInitialDate = (
+  type: 'day' | 'period',
+  value: TCalendarValue | undefined,
+  fallback: Date,
+) => {
+  if (type === 'day' && value instanceof Date) {
+    return value;
+  }
+
+  if (type === 'period' && value && typeof value === 'object' && !(value instanceof Date)) {
+    const period = value as TCalendarPeriodValue;
+    if (period.startPeriod instanceof Date) {
+      return period.startPeriod;
+    }
+  }
+
+  return fallback;
+};
+
+export const generateCalendarDays = (
+  currentYear: number,
+  currentMonth: number,
+  firstDayOfWeek: number,
+): TCalendarDayItem[] => {
+  const days: TCalendarDayItem[] = [];
+  const daysInMonth = getDaysInMonth(currentYear, currentMonth);
+  let firstDayOfMonth = getFirstDayOfMonth(currentYear, currentMonth);
+
+  if (firstDayOfWeek === 1) {
+    firstDayOfMonth = firstDayOfMonth === 0 ? 6 : firstDayOfMonth - 1;
+  }
+
+  const prevMonth = currentMonth === 0 ? 11 : currentMonth - 1;
+  const prevYear = currentMonth === 0 ? currentYear - 1 : currentYear;
+  const daysInPrevMonth = getDaysInMonth(prevYear, prevMonth);
+
+  for (let i = 0; i < firstDayOfMonth; i++) {
+    const day = daysInPrevMonth - firstDayOfMonth + i + 1;
+    days.push({
+      day,
+      month: prevMonth,
+      year: prevYear,
+      date: new Date(prevYear, prevMonth, day),
+      isCurrentMonth: false,
+    });
+  }
+
+  for (let i = 1; i <= daysInMonth; i++) {
+    days.push({
+      day: i,
+      month: currentMonth,
+      year: currentYear,
+      date: new Date(currentYear, currentMonth, i),
+      isCurrentMonth: true,
+    });
+  }
+
+  const totalDaysDisplayed = Math.ceil((firstDayOfMonth + daysInMonth) / 7) * 7;
+  const daysFromNextMonth = totalDaysDisplayed - days.length;
+  const nextMonth = currentMonth === 11 ? 0 : currentMonth + 1;
+  const nextYear = currentMonth === 11 ? currentYear + 1 : currentYear;
+
+  for (let i = 1; i <= daysFromNextMonth; i++) {
+    days.push({
+      day: i,
+      month: nextMonth,
+      year: nextYear,
+      date: new Date(nextYear, nextMonth, i),
+      isCurrentMonth: false,
+    });
+  }
+
+  return days;
+};
+
+export const generateWeekDays = (
+  currentWeekStart: Date,
+  currentMonth: number,
+  currentYear: number,
+): TCalendarDayItem[] => {
+  return Array.from({ length: 7 }, (_, index) => {
+    const date = addDays(currentWeekStart, index);
+    return {
+      day: date.getDate(),
+      month: date.getMonth(),
+      year: date.getFullYear(),
+      date,
+      isCurrentMonth: date.getMonth() === currentMonth && date.getFullYear() === currentYear,
+    };
+  });
+};
+
+export const DEFAULT_MONTH_NAMES = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+export const DEFAULT_DAY_NAMES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+export const getWeekDayLabels = (daysNames?: string[], firstDayOfWeek: number = 0) => {
+  const days = daysNames || DEFAULT_DAY_NAMES;
+  if (firstDayOfWeek === 1) {
+    return [...days.slice(1), days[0]];
+  }
+  return days;
+};
+
+export const getDayName = (date: Date, daysNames?: string[]) => {
+  const days = daysNames || DEFAULT_DAY_NAMES;
+  return days[date.getDay()];
+};

package/platforms/react-native/solutions/components/Calendar/files/index.ts

@@ -0,0 +1,40 @@
+import Common from './Common';
+import { useCalendar } from './Context';
+import MonthView from './MonthView';
+import WeekView from './WeekView';
+
+type TCommon = typeof Common;
+type TMonthView = typeof MonthView;
+type TWeekView = typeof WeekView;
+type TUseCalendar = typeof useCalendar;
+
+interface ICalendar extends TCommon {
+  MonthView: TMonthView;
+  WeekView: TWeekView;
+  useCalendar: TUseCalendar;
+}
+
+const Calendar = Common as ICalendar;
+Calendar.MonthView = MonthView;
+Calendar.WeekView = WeekView;
+Calendar.useCalendar = useCalendar;
+
+export type {
+  ICalendarContext,
+  ICalendarMonthViewProps,
+  ICalendarProps,
+  ICalendarWeekViewProps,
+  TCalendarActivePeriod,
+  TCalendarDayItem,
+  TCalendarDayRender,
+  TCalendarDayRenderProps,
+  TCalendarDayRenderState,
+  TCalendarDayTitleRender,
+  TCalendarMarkedDate,
+  TCalendarMarkedDates,
+  TCalendarPeriodValue,
+  TCalendarSelectType,
+  TCalendarValue,
+} from './calendar.types';
+
+export default Calendar;

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

@@ -0,0 +1,38 @@
+export default {
+  "id": "component:Calendar",
+  "type": "component",
+  "platforms": [
+    "react-native"
+  ],
+  "title": "Calendar",
+  "description": "Calendar from the previous template kit. Treat the API as experimental until it is wired into a screen.",
+  "status": "experimental",
+  "since": "1.0.0",
+  "tags": [
+    "ui",
+    "kit"
+  ],
+  "requires": [],
+  "dependencies": [],
+  "files": [
+    {
+      "from": "files",
+      "to": "ui/components/Calendar"
+    }
+  ],
+  "register": [
+    {
+      "file": "ui/components/index.ts",
+      "marker": "components-import",
+      "code": "import Calendar from './Calendar';\n"
+    },
+    {
+      "file": "ui/components/index.ts",
+      "marker": "components-export",
+      "code": "  Calendar,\n"
+    }
+  ],
+  "manual": [],
+  "api": "Default export from ui/components/Calendar.",
+  "example": "import Calendar from '@components/Calendar';"
+};