@utilitywarehouse/hearth-react-native 0.3.1 → 0.4.1

package/src/components/DatePicker/DatePicker.props.ts

@@ -0,0 +1,139 @@
+import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+import type { Dayjs } from 'dayjs';
+import { Ref } from 'react';
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+import type { CalendarActionKind, CalendarViews } from './enums';
+
+export type DateType = string | number | Dayjs | Date | null | undefined;
+
+export type CalendarType = 'gregory';
+
+export type CalendarMode = 'single' | 'range' | 'multiple';
+
+export type NavigationPosition = 'around' | 'right' | 'left';
+
+export type WeekdayFormat = 'min' | 'short' | 'full';
+
+export type MonthFormat = 'short' | 'full';
+
+export type LocalState = {
+  date: DateType;
+  startDate: DateType;
+  endDate: DateType;
+  dates?: DateType[];
+  calendarView: CalendarViews;
+  currentDate: DateType; // used for latest state of calendar based on Month and Year
+  currentYear: number;
+};
+
+export type CalendarAction = {
+  type: CalendarActionKind;
+  payload: any;
+};
+
+export type CalendarDay = {
+  number: number;
+  text: string;
+  date: string;
+  isDisabled: boolean;
+  isCurrentMonth: boolean;
+  dayOfMonth?: number;
+  isToday: boolean;
+  isSelected: boolean;
+  inRange: boolean;
+  leftCrop: boolean;
+  rightCrop: boolean;
+  isStartOfWeek: boolean;
+  isEndOfWeek: boolean;
+  isCrop: boolean;
+  inMiddle: boolean;
+  rangeStart: boolean;
+  rangeEnd: boolean;
+};
+
+export type CalendarWeek = {
+  index: number;
+  name: {
+    full: string;
+    short: string;
+    min: string;
+  };
+};
+
+export type CalendarMonth = {
+  index: number;
+  name: {
+    full: string;
+    short: string;
+  };
+  isSelected: boolean;
+};
+
+export type CalendarYear = {
+  number: number;
+  text: string;
+  isSelected: boolean;
+  isActivated: boolean;
+};
+
+export type SingleChange = (params: { date: DateType }) => void;
+
+export type RangeChange = (params: { startDate: DateType; endDate: DateType }) => void;
+
+export type MultiChange = (params: {
+  dates: DateType[];
+  datePressed?: DateType;
+  change: 'added' | 'removed' | 'updated';
+}) => void;
+
+export type Styles = Partial<ViewStyle | TextStyle | ImageStyle>;
+
+export interface DatePickerBaseProps {
+  mode?: CalendarMode;
+  timeZone?: string;
+  date?: DateType;
+  startDate?: DateType;
+  endDate?: DateType;
+  dates?: DateType[];
+  min?: number;
+  max?: number;
+  onChange?: SingleChange | RangeChange | MultiChange;
+  startYear?: number;
+  endYear?: number;
+  minDate?: DateType;
+  maxDate?: DateType;
+  enabledDates?: DateType[] | ((date: DateType) => boolean);
+  disabledDates?: DateType[] | ((date: DateType) => boolean);
+  firstDayOfWeek?: number;
+  showOutsideDays?: boolean;
+  timePicker?: boolean;
+  use12Hours?: boolean;
+  initialView?: CalendarViews;
+  containerHeight?: number;
+  weekdaysHeight?: number;
+  style?: ViewStyle;
+  navigationPosition?: NavigationPosition;
+  weekdaysFormat?: WeekdayFormat;
+  monthsFormat?: MonthFormat;
+  monthCaptionFormat?: MonthFormat;
+  multiRangeMode?: boolean;
+  hideHeader?: boolean;
+  hideFooter?: boolean;
+  hideWeekdays?: boolean;
+  disableMonthPicker?: boolean;
+  disableYearPicker?: boolean;
+  /** use to handle month and year selectors */
+  month?: number;
+  year?: number;
+  onMonthChange?: (month: number) => void;
+  onYearChange?: (year: number) => void;
+  ref?: Ref<BottomSheetModalMethods<any>>;
+  onCancel?: () => void;
+}
+
+export type Numerals = 'latn';
+
+export type PickerOption = {
+  value: number | string;
+  text: string;
+};

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,98 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { useRef, useState } from 'react';
+import { Platform, View } from 'react-native';
+import { DatePicker, DateType } from '.';
+import { ViewWrap } from '../../../docs/components';
+import { BottomSheetModal } from '../BottomSheet';
+import { Button } from '../Button';
+
+const meta = {
+  title: 'Stories / DatePicker',
+  component: DatePicker,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {},
+  args: {},
+} satisfies Meta<typeof DatePicker>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: {
+    mode: 'single',
+  },
+  render: () => {
+    const [selected, setSelected] = useState<DateType>();
+    const modalRef = useRef<BottomSheetModal>(null);
+
+    return (
+      <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+        <ViewWrap>
+          <Button onPress={() => modalRef.current?.present()}>Show Date Picker</Button>
+          <DatePicker
+            ref={modalRef}
+            mode="single"
+            date={selected}
+            onChange={({ date }) => setSelected(date)}
+            onCancel={() => setSelected(undefined)}
+          />
+        </ViewWrap>
+      </View>
+    );
+  },
+};
+
+export const Range: Story = {
+  args: {
+    mode: 'range',
+  },
+  render: () => {
+    const [range, setRange] = useState<{
+      startDate: DateType;
+      endDate: DateType;
+    }>({ startDate: undefined, endDate: undefined });
+    const modalRef = useRef<BottomSheetModal>(null);
+    return (
+      <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+        <ViewWrap>
+          <Button onPress={() => modalRef.current?.present()}>Show Range Date Picker</Button>
+          <DatePicker
+            mode="range"
+            ref={modalRef}
+            startDate={range.startDate}
+            endDate={range.endDate}
+            onChange={params => setRange(params)}
+            onCancel={() => setRange({ startDate: undefined, endDate: undefined })}
+          />
+        </ViewWrap>
+      </View>
+    );
+  },
+};
+
+export const Multi: Story = {
+  args: {
+    mode: 'multiple',
+  },
+  render: () => {
+    const [dates, setDates] = useState<DateType[]>([]);
+    const modalRef = useRef<BottomSheetModal>(null);
+    return (
+      <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+        <ViewWrap>
+          <Button onPress={() => modalRef.current?.present()}>Show Multi Date Picker</Button>
+          <DatePicker
+            mode="multiple"
+            ref={modalRef}
+            dates={dates}
+            onChange={({ dates }) => setDates(dates)}
+            onCancel={() => setDates([])}
+          />
+        </ViewWrap>
+      </View>
+    );
+  },
+};