react-native-molecules 0.5.0-beta.2 → 0.5.0-beta.21

package/components/DatePicker/index.tsx

@@ -0,0 +1,45 @@
+import { DateCalendar } from './DateCalendar';
+import { DatePickerActions } from './DatePickerActions';
+import { DatePickerModal } from './DatePickerModal';
+import { DatePickerPopover } from './DatePickerPopover';
+import { DatePickerProvider } from './DatePickerProvider';
+import { DatePickerTrigger } from './DatePickerTrigger';
+
+export const DatePicker = {
+    Provider: DatePickerProvider,
+    Trigger: DatePickerTrigger,
+    Actions: DatePickerActions,
+    Calendar: DateCalendar,
+    Modal: DatePickerModal,
+    Popover: DatePickerPopover,
+};
+
+export type {
+    DatePickerContextType,
+    DatePickerLocale,
+    DatePickerMode,
+    DatePickerValue,
+    DateValue,
+    RangeValue,
+} from './context';
+export { DatePickerContext, useDatePickerContext, useOptionalDatePickerContext } from './context';
+export type { DateCalendarProps } from './DateCalendar';
+export type { DatePickerActionsProps } from './DatePickerActions';
+export { DatePickerActions } from './DatePickerActions';
+export type { DatePickerModalProps } from './DatePickerModal';
+export { DatePickerModal } from './DatePickerModal';
+export type { DatePickerPopoverProps } from './DatePickerPopover';
+export { DatePickerPopover } from './DatePickerPopover';
+export type { DatePickerProviderProps } from './DatePickerProvider';
+export { DatePickerProvider } from './DatePickerProvider';
+export { DatePickerTrigger } from './DatePickerTrigger';
+export {
+    datePickerHeaderItemStyles,
+    datePickerModalContentHeaderStyles,
+    datePickerModalEditStyles,
+    datePickerModalHeaderBackgroundStyles,
+    datePickerModalHeaderStyles,
+    datePickerModalStyles,
+    datePickerMonthItemStyles,
+    datePickerMonthPickerStyles,
+} from './utils';

package/components/DatePicker/utils.ts

@@ -0,0 +1,293 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredComponentStylesWithFallback } from '../../core';
+
+const datePickerModalStylesDefault = StyleSheet.create(theme => ({
+    header: {
+        // backgroundColor: theme.colors.surfaceContainerHighest,
+    },
+    content: {
+        minWidth: 420,
+        width: 420,
+        maxWidth: undefined,
+        flex: undefined,
+        borderRadius: theme.shapes.corner.extraLarge,
+        overflow: 'hidden',
+    },
+    frame: {
+        // backgroundColor: theme.colors.surfaceContainerHighest,
+        width: '100%',
+    },
+    headlineContainer: {
+        // backgroundColor: theme.colors.surface,
+        paddingHorizontal: theme.spacings['5'],
+        paddingTop: theme.spacings['5'],
+        paddingBottom: theme.spacings['4'],
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerCopy: {
+        flex: 1,
+        minWidth: 0,
+    },
+    headline: {
+        ...theme.typescale.labelLarge,
+        color: theme.colors.onSurfaceVariant,
+    },
+    supporting: {
+        fontSize: 44,
+        lineHeight: 52,
+        fontWeight: theme.typescale.displaySmall.fontWeight,
+        color: theme.colors.onSurface,
+        paddingTop: theme.spacings['2'],
+        flexShrink: 1,
+    },
+    modeToggle: {
+        color: theme.colors.onSurfaceVariant,
+        marginLeft: theme.spacings['3'],
+    },
+    body: {
+        // backgroundColor: theme.colors.surfaceContainerHighest,
+        borderTopWidth: StyleSheet.hairlineWidth,
+        borderTopColor: theme.colors.outlineVariant,
+    },
+    calendarContainer: {
+        minHeight: 320,
+        minWidth: undefined,
+        // backgroundColor: theme.colors.surfaceContainerHighest,
+    },
+    calendarRoot: {
+        // backgroundColor: theme.colors.surfaceContainerHighest,
+    },
+    inputContainer: {
+        padding: theme.spacings['6'],
+        paddingTop: theme.spacings['5'],
+        paddingBottom: theme.spacings['4'],
+    },
+    footer: {
+        // backgroundColor: theme.colors.surface,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        columnGap: theme.spacings['2'],
+        paddingHorizontal: theme.spacings['4'],
+        paddingTop: theme.spacings['0'],
+        paddingBottom: theme.spacings['2'],
+    },
+}));
+
+const datePickerModalHeaderStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        color: theme.colors.onPrimary,
+    },
+    animated: {
+        paddingBottom: theme.spacings['0'],
+        elevation: 4,
+    },
+    safeContent: {
+        paddingBottom: theme.spacings['0'],
+
+        variants: {
+            state: {
+                disableSafeTop: {
+                    paddingTop: 0,
+                },
+            },
+        },
+    },
+    safeContentNoTop: {
+        paddingTop: theme.spacings['0'],
+    },
+    appbarHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: theme.spacings['2'],
+        paddingVertical: theme.spacings['2'],
+        elevation: 0,
+        backgroundColor: 'transparent',
+    },
+}));
+
+const datePickerModalContentHeaderStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        color: theme.colors.onPrimary,
+    },
+
+    fill: {
+        flex: 1,
+    },
+    header: {
+        height: 75,
+        alignItems: 'center',
+        flexDirection: 'row',
+        paddingLeft: theme.spacings['6'],
+        paddingRight: theme.spacings['3'],
+    },
+    headerContentContainer: {
+        marginTop: theme.spacings['1'],
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    label: {
+        color: theme.colors.onPrimary,
+        letterSpacing: 1,
+        fontSize: theme.typescale.bodyMedium.fontSize,
+    },
+    headerText: {
+        fontSize: theme.typescale.bodyMedium.fontSize,
+        color: theme.colors.onPrimary,
+    },
+    headerSeparator: {
+        fontSize: theme.typescale.bodyMedium.fontSize,
+        paddingLeft: theme.spacings['2'],
+        paddingRight: theme.spacings['2'],
+        color: theme.colors.onPrimary,
+    },
+    icon: {
+        color: theme.colors.onPrimary,
+    },
+}));
+
+const datePickerModalHeaderBackgroundStylesDefault = StyleSheet.create(theme => ({
+    header: {
+        backgroundColor: theme.colors.primary,
+        paddingBottom: theme.spacings['0'],
+        elevation: 4,
+    },
+    safeContent: {
+        paddingBottom: theme.spacings['0'],
+    },
+}));
+
+const datePickerModalEditStylesDefault = StyleSheet.create(theme => ({
+    container: { padding: theme.spacings['3'] },
+    inner: { flexDirection: 'row' },
+    inputContainer: { flex: 1 },
+    input: { flex: 1 },
+    separator: { width: 12 },
+}));
+
+const datePickerPopoverHeaderStylesDefault = StyleSheet.create(theme => ({
+    buttonContainer: {
+        height: 46,
+        gap: theme.spacings['2'],
+        // width: '50%',
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    buttonWrapper: {},
+    spacer: { flex: 1 },
+    labelStyle: {
+        ...theme.typescale.labelLarge,
+        color: theme.colors.onSurfaceVariant,
+        marginRight: theme.spacings['2'],
+    },
+    buttonStyle: {
+        alignSelf: 'center',
+        borderRadius: theme.shapes.corner.extraSmall,
+    },
+    innerStyle: {
+        paddingLeft: theme.spacings['0'],
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: theme.shapes.corner.extraSmall,
+    },
+    emtpyView: {
+        width: 30,
+    },
+}));
+
+const datePickerPopoverMonthPickerStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        backgroundColor: theme.colors.surface,
+    },
+    month: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'flex-start',
+    },
+    selectedMonth: { color: theme.colors.onSurface },
+    monthButton: {
+        width: '100%',
+        overflow: 'hidden',
+    },
+    monthInner: {
+        height: 46,
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        flexDirection: 'row',
+    },
+    selectedMonthInner: { backgroundColor: theme.colors.surfaceVariant },
+    monthLabel: {
+        fontSize: 16,
+    },
+}));
+
+const datePickerPopoverMonthItemStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        backgroundColor: theme.colors.surface,
+    },
+    monthButton: {
+        width: '100%',
+        overflow: 'hidden',
+        padding: theme.spacings['0'],
+        variants: {
+            state: {
+                selected: {
+                    backgroundColor: theme.colors.surfaceVariant,
+                },
+            },
+        },
+    },
+    monthInner: {
+        height: 46,
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        flexDirection: 'row',
+        padding: theme.spacings['0'],
+    },
+    monthLabel: {
+        fontSize: 16,
+        variants: {
+            state: {
+                selected: {
+                    color: theme.colors.onSurface,
+                },
+            },
+        },
+    },
+}));
+
+export const datePickerModalStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerModal',
+    datePickerModalStylesDefault,
+);
+export const datePickerModalHeaderStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerModal_Header',
+    datePickerModalHeaderStylesDefault,
+);
+export const datePickerModalContentHeaderStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerModal_ContentHeader',
+    datePickerModalContentHeaderStylesDefault,
+);
+export const datePickerModalHeaderBackgroundStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerModal_HeaderBackground',
+    datePickerModalHeaderBackgroundStylesDefault,
+);
+export const datePickerModalEditStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerModal_Edit',
+    datePickerModalEditStylesDefault,
+);
+export const datePickerHeaderItemStyles = getRegisteredComponentStylesWithFallback(
+    'DatePicker_HeaderItem',
+    datePickerPopoverHeaderStylesDefault,
+);
+export const datePickerMonthPickerStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerPopover_MonthPicker',
+    datePickerPopoverMonthPickerStylesDefault,
+);
+export const datePickerMonthItemStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerPopover_MonthItem',
+    datePickerPopoverMonthItemStylesDefault,
+);

package/components/DatePickerInline/DatePickerContext.tsx

@@ -18,4 +18,5 @@ export const {
     Provider,
     useContext: useDatePickerStore,
     useContextValue: useDatePickerStoreValue,
+    useStoreRef: useDatePickerStoreRef,
 } = createFastContext<Store>();

package/components/DatePickerInline/DatePickerDockedHeader.tsx

@@ -0,0 +1,117 @@
+import { add, setYear } from 'date-fns';
+import { memo, useCallback, useMemo } from 'react';
+import { View, type ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import type { DatePickerLocale } from '../DatePicker/context';
+import { useDatePickerStoreRef, useDatePickerStoreValue } from './DatePickerContext';
+import type { DisableWeekDaysType } from './dateUtils';
+import DayNames from './DayNames';
+import HeaderItem from './HeaderItem';
+import { datePickerHeaderStyles } from './utils';
+
+export type DockedHeaderProps = {
+    locale?: DatePickerLocale;
+    scrollMode: 'horizontal' | 'vertical';
+    disableWeekDays?: DisableWeekDaysType;
+    style?: ViewStyle;
+};
+
+function DatePickerDockedHeader({
+    locale = 'en',
+    scrollMode,
+    disableWeekDays,
+    style: styleProp,
+}: DockedHeaderProps) {
+    const setStore = useDatePickerStoreRef().set;
+    const { localDate, pickerType } = useDatePickerStoreValue(state => ({
+        localDate: state.localDate,
+        pickerType: state.pickerType,
+    }));
+    const isHorizontal = scrollMode === 'horizontal';
+
+    const { monthName, year } = useMemo(
+        () => ({
+            monthName: new Intl.DateTimeFormat(locale, { month: 'short' }).format(localDate),
+            year: localDate.getFullYear(),
+        }),
+        [localDate, locale],
+    );
+
+    const handleMonthDropdown = useCallback(() => {
+        setStore(prev => ({ pickerType: prev.pickerType === 'month' ? undefined : 'month' }));
+    }, [setStore]);
+
+    const handleYearDropdown = useCallback(() => {
+        setStore(prev => ({ pickerType: prev.pickerType === 'year' ? undefined : 'year' }));
+    }, [setStore]);
+
+    const handleMonthPrev = useCallback(() => {
+        setStore(prev => ({ localDate: add(prev.localDate, { months: -1 }) }));
+    }, [setStore]);
+
+    const handleMonthNext = useCallback(() => {
+        setStore(prev => ({ localDate: add(prev.localDate, { months: 1 }) }));
+    }, [setStore]);
+
+    const handleYearPrev = useCallback(() => {
+        setStore(prev => ({
+            localDate: setYear(prev.localDate, prev.localDate.getFullYear() - 1),
+        }));
+    }, [setStore]);
+
+    const handleYearNext = useCallback(() => {
+        setStore(prev => ({
+            localDate: setYear(prev.localDate, prev.localDate.getFullYear() + 1),
+        }));
+    }, [setStore]);
+
+    const pickerOpen = pickerType === 'month' || pickerType === 'year';
+
+    return (
+        <View pointerEvents="box-none">
+            {isHorizontal && (
+                <View
+                    style={[
+                        datePickerHeaderStyles.datePickerHeader,
+                        styles.row,
+                        pickerOpen && styles.rowPickerOpen,
+                        styleProp,
+                    ]}>
+                    <HeaderItem
+                        onPrev={handleMonthPrev}
+                        onNext={handleMonthNext}
+                        onPressDropdown={handleMonthDropdown}
+                        type="month"
+                        value={monthName}
+                        pickerType={pickerType}
+                        selecting={pickerType === 'month'}
+                    />
+                    <HeaderItem
+                        onPrev={handleYearPrev}
+                        onNext={handleYearNext}
+                        onPressDropdown={handleYearDropdown}
+                        type="year"
+                        value={year}
+                        pickerType={pickerType}
+                        selecting={pickerType === 'year'}
+                    />
+                </View>
+            )}
+            <DayNames disableWeekDays={disableWeekDays} locale={locale} />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create(theme => ({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    rowPickerOpen: {
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: theme.colors.outlineVariant,
+    },
+}));
+
+export default memo(DatePickerDockedHeader);

package/components/DatePickerInline/DatePickerInline.tsx

@@ -1,18 +1,18 @@
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback } from 'react';
 import { View, type ViewStyle } from 'react-native';
 
 import { useControlledValue } from '../../hooks';
-import type {
-    LocalState,
-    LocalStateMultiple,
-    LocalStateRange,
-    LocalStateSingle,
-} from '../DatePickerModal/types';
+import DatePickerDockedHeader from './DatePickerDockedHeader';
 import DatePickerInlineBase from './DatePickerInlineBase';
 import DatePickerInlineHeader from './DatePickerInlineHeader';
-import type { DatePickerInlineBaseProps } from './types';
+import type { CalendarDate, CalendarDates, DatePickerInlineBaseProps } from './types';
 import { datePickerStyles } from './utils';
 
+type LocalState = LocalStateSingle | LocalStateMultiple | LocalStateRange;
+type LocalStateSingle = { date: CalendarDate };
+type LocalStateMultiple = { dates: CalendarDates };
+type LocalStateRange = { startDate: CalendarDate; endDate: CalendarDate };
+
 export type DatePickerInlineProps = DatePickerInlineBaseProps & {
     containerStyle?: ViewStyle;
 };
@@ -25,6 +25,8 @@ const DatePickerInline = ({
     onChange,
     locale = 'en',
     mode = 'single',
+    headerLayout = 'inline',
+    HeaderComponent,
     containerStyle: containerStyleProp,
     ...rest
 }: DatePickerInlineProps) => {
@@ -40,16 +42,15 @@ const DatePickerInline = ({
         onChange: onInnerChange,
     });
 
-    const { containerStyle } = useMemo(() => {
-        return {
-            containerStyle: [datePickerStyles.container, datePickerStyles.root, containerStyleProp],
-        };
-    }, [containerStyleProp]);
+    const resolvedHeader =
+        HeaderComponent ??
+        (headerLayout === 'docked' ? DatePickerDockedHeader : DatePickerInlineHeader);
 
     return (
-        <View style={containerStyle}>
+        <View style={[datePickerStyles.container, datePickerStyles.root, containerStyleProp]}>
             <DatePickerInlineBase
                 {...rest}
+                headerLayout={headerLayout}
                 locale={locale}
                 mode={mode}
                 startDate={(state as LocalStateRange)?.startDate}
@@ -59,7 +60,7 @@ const DatePickerInline = ({
                 dates={(state as LocalStateMultiple)?.dates}
                 // TODO - fix ts issues
                 // @ts-ignore
-                HeaderComponent={DatePickerInlineHeader}
+                HeaderComponent={resolvedHeader}
             />
         </View>
     );

package/components/DatePickerInline/DatePickerInlineBase.tsx

@@ -43,6 +43,8 @@ function DatePickerInlineBaseChild(props: DatePickerInlineBaseProps) {
         HeaderComponent,
         onToggle,
         monthStyle,
+        showOutsideDays,
+        headerLayout,
     } = props;
     const [pickerType, setStore] = useDatePickerStore(state => state.pickerType);
 
@@ -125,6 +127,7 @@ function DatePickerInlineBaseChild(props: DatePickerInlineBaseProps) {
                     scrollMode={scrollMode}
                     disableWeekDays={disableWeekDays}
                     customMonthStyles={monthStyle}
+                    showOutsideDays={showOutsideDays}
                 />
             );
         },
@@ -140,6 +143,7 @@ function DatePickerInlineBaseChild(props: DatePickerInlineBaseProps) {
             scrollMode,
             disableWeekDays,
             monthStyle,
+            showOutsideDays,
         ],
     );
 
@@ -166,8 +170,10 @@ function DatePickerInlineBaseChild(props: DatePickerInlineBaseProps) {
                 renderItem={renderMonthComponent}
                 renderHeader={renderCalenderHeader}
             />
-            {isHorizontal && pickerType === 'year' && <YearPicker />}
-            {isHorizontal && pickerType === 'month' && <MonthPicker />}
+            {isHorizontal && pickerType === 'year' && (
+                <YearPicker layout={headerLayout === 'docked' ? 'list' : 'grid'} />
+            )}
+            {isHorizontal && pickerType === 'month' && <MonthPicker locale={locale} />}
         </View>
     );
 }

package/components/DatePickerInline/DatePickerInlineHeader.tsx

@@ -1,7 +1,8 @@
-import { add, format } from 'date-fns';
+import { add } from 'date-fns';
 import { memo, useCallback, useMemo } from 'react';
 import { type StyleProp, View, type ViewStyle } from 'react-native';
 
+import type { DatePickerLocale } from '../DatePicker/context';
 import { useDatePickerStore, useDatePickerStoreValue } from './DatePickerContext';
 import type { DisableWeekDaysType } from './dateUtils';
 import DayNames from './DayNames';
@@ -13,7 +14,7 @@ const buttonContainerMarginTop = 4;
 const buttonContainerMarginBottom = 8;
 
 export type CalendarHeaderProps = {
-    locale?: string;
+    locale?: DatePickerLocale;
     scrollMode: 'horizontal' | 'vertical';
     disableWeekDays?: DisableWeekDaysType;
     style?: ViewStyle;
@@ -35,8 +36,11 @@ function DatePickerInlineHeader({
     const { monthName, year } = useMemo(() => {
         const y = localDate.getFullYear();
 
-        return { monthName: format(localDate, 'LLLL'), year: y };
-    }, [localDate]);
+        return {
+            monthName: new Intl.DateTimeFormat(locale, { month: 'long' }).format(localDate),
+            year: y,
+        };
+    }, [localDate, locale]);
 
     const { containerStyle } = useMemo(() => {
         // const { datePickerHeader, buttonContainer, buttonWrapper, spacer, ...rest } =

package/components/DatePickerInline/Day.tsx

@@ -1,11 +1,17 @@
 import { memo, useCallback, useMemo } from 'react';
 import { type StyleProp, View, type ViewStyle } from 'react-native';
 
+import { useActionState } from '../../hooks/useActionState';
 import { resolveStateVariant } from '../../utils';
+import { StateLayer } from '../StateLayer';
 import { Text } from '../Text';
 import { TouchableRipple } from '../TouchableRipple';
 import DayRange from './DayRange';
-import { datePickerDayEmptyStyles, datePickerDayStyles } from './utils';
+import {
+    datePickerDayEmptyStyles,
+    datePickerDayStateLayerStyles,
+    datePickerDayStyles,
+} from './utils';
 
 function EmptyDayPure() {
     return <View style={datePickerDayEmptyStyles.root} />;
@@ -23,6 +29,7 @@ function Day(props: {
     rightCrop: boolean;
     isToday: boolean;
     disabled: boolean;
+    outside?: boolean;
     onPressDate: (date: Date) => any;
 }) {
     const {
@@ -36,17 +43,32 @@ function Day(props: {
         onPressDate,
         isToday,
         disabled,
+        outside,
     } = props;
+
+    const { hovered, actionsRef } = useActionState({ actionsToListen: ['hover'] });
+
     const state = resolveStateVariant({
         disabled,
         selected,
         inRange,
         today: isToday,
+        outside: !!outside,
     });
     datePickerDayStyles.useVariants({
         state: state as any,
     });
 
+    datePickerDayStateLayerStyles.useVariants({
+        state: resolveStateVariant({
+            hovered: hovered,
+            outsideAndHovered: !!outside && !selected && !inRange && hovered,
+            selectedAndHovered: selected && hovered,
+            inRangeAndHovered: inRange && hovered,
+            todayAndHovered: isToday && hovered,
+        }) as any,
+    });
+
     const onPress = useCallback(() => {
         onPressDate(new Date(year, month, day));
     }, [onPressDate, year, month, day]);
@@ -69,6 +91,7 @@ function Day(props: {
             <DayRange inRange={inRange} leftCrop={leftCrop} rightCrop={rightCrop} />
 
             <TouchableRipple
+                ref={actionsRef}
                 testID={`day-${year}-${month}-${day}`}
                 disabled={disabled}
                 borderless={true}
@@ -80,6 +103,7 @@ function Day(props: {
                         {day}
                     </Text>
                 </View>
+                <StateLayer style={datePickerDayStateLayerStyles.stateLayer} />
             </TouchableRipple>
         </View>
     );