react-native-molecules 0.5.0-beta.0

package/components/Chip/index.tsx

@@ -0,0 +1,51 @@
+import type { ComponentType } from 'react';
+
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { default as ChipComponent, type Props as ChipProps } from './Chip';
+
+export const ChipDefault = Object.assign(
+    // @component ./Chip.tsx
+    ChipComponent,
+    {
+        Assist: ChipComponent as ComponentType<
+            Omit<
+                ChipProps,
+                | 'onClose'
+                | 'closeIconName'
+                | 'closeIconType'
+                | 'selected'
+                | 'selectedColor'
+                | 'selectionBackgroundColor'
+            >
+        >,
+        Filter: ChipComponent as ComponentType<
+            Omit<ChipProps, 'onClose' | 'closeIconName' | 'closeIconType'>
+        >,
+        Input: ChipComponent,
+        Suggestion: ChipComponent as ComponentType<
+            Omit<
+                ChipProps,
+                | 'onClose'
+                | 'closeIconName'
+                | 'closeIconType'
+                | 'selected'
+                | 'selectedColor'
+                | 'selectionBackgroundColor'
+                | 'left'
+                | 'right'
+                | 'leftElementContainerStyle'
+                | 'rightElementContainerStyle'
+            >
+        >,
+    },
+);
+
+registerMoleculesComponents({
+    Chip: ChipDefault,
+});
+
+export const Chip = getRegisteredComponentWithFallback('Chip', ChipDefault);
+
+export type { Props as ChipProps } from './Chip';
+export type { States } from './utils';
+export { styles as chipStyles } from './utils';

package/components/Chip/utils.ts

@@ -0,0 +1,100 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const chipStylesDefault = StyleSheet.create(theme => ({
+    container: {
+        borderRadius: theme.shapes.corner.small,
+        backgroundColor: theme.colors.surface,
+
+        variants: {
+            variant: {
+                outlined: {
+                    borderWidth: StyleSheet.hairlineWidth,
+                    borderStyle: 'solid',
+                    borderColor: theme.colors.outline,
+
+                    state: {
+                        disabled: {
+                            borderColor: theme.colors.onSurface,
+                            opacity: 0.38,
+                        },
+                    },
+                },
+                elevated: {
+                    backgroundColor: theme.colors.surface,
+                },
+            },
+
+            state: {
+                selected: {
+                    backgroundColor: theme.colors.secondaryContainer,
+                    borderWidth: 0,
+                },
+                disabled: {
+                    backgroundColor: theme.colors.stateLayer.disabled.onSurface,
+                    borderWidth: 0,
+                },
+            },
+
+            size: {
+                sm: {
+                    minHeight: 28,
+                },
+                md: {
+                    minHeight: 32,
+                },
+            },
+        },
+    },
+    touchableRippleContainer: {
+        flex: 1,
+        paddingHorizontal: theme.spacings['2'],
+        borderRadius: theme.shapes.corner.small,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    label: {
+        display: 'flex',
+        color: theme.colors.onSurfaceVariant,
+
+        variants: {
+            size: {
+                sm: {
+                    paddingHorizontal: theme.spacings['1'],
+                    fontSize: theme.typescale.labelMedium.fontSize,
+                    fontWeight: theme.typescale.labelMedium.fontWeight,
+                    lineHeight: theme.typescale.labelMedium.lineHeight,
+                },
+                md: {
+                    paddingHorizontal: theme.spacings['2'],
+                    fontSize: theme.typescale.labelLarge.fontSize,
+                    fontWeight: theme.typescale.labelLarge.fontWeight,
+                    lineHeight: theme.typescale.labelLarge.lineHeight,
+                },
+            },
+        },
+    },
+    leftElement: {},
+    rightElement: {},
+    stateLayer: {
+        variants: {
+            state: {
+                hovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurfaceVariant,
+                },
+                selectedAndHovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSecondaryContainer,
+                },
+            },
+        },
+    },
+}));
+
+registerComponentsStyles({
+    Chip: chipStylesDefault,
+});
+
+export const styles = getRegisteredMoleculesComponentStyles('Chip');
+
+export type States = 'hovered' | 'selectedAndHovered' | 'selected' | 'disabled';

package/components/DatePickerDocked/DatePickerDocked.tsx

@@ -0,0 +1,30 @@
+import { memo } from 'react';
+
+import DatePickerInlineBase from '../DatePickerInline/DatePickerInlineBase';
+import { Popover } from '../Popover';
+import DatePickerDockedHeader from './DatePickerDockedHeader';
+import type { DatePickerDockedProps } from './types';
+import { datePickerDockedMonthStyles } from './utils';
+
+const DatePickerDocked = (props: DatePickerDockedProps) => {
+    const { triggerRef, isOpen, onToggle, onClose } = props;
+
+    return (
+        <Popover
+            triggerRef={triggerRef}
+            isOpen={isOpen}
+            onClose={onClose}
+            {...props.popoverContentProps}>
+            <DatePickerInlineBase
+                {...props}
+                // TODO - fix ts issues
+                // @ts-ignore
+                HeaderComponent={DatePickerDockedHeader}
+                onToggle={onToggle}
+                monthStyle={datePickerDockedMonthStyles}
+            />
+        </Popover>
+    );
+};
+
+export default memo(DatePickerDocked);

package/components/DatePickerDocked/DatePickerDockedHeader.tsx

@@ -0,0 +1,129 @@
+import { add, format } from 'date-fns';
+import { memo, useCallback, useMemo } from 'react';
+import { View, type ViewStyle } from 'react-native';
+
+import { useDatePickerStore } from '../DatePickerInline/DatePickerContext';
+import type { DisableWeekDaysType } from '../DatePickerInline/dateUtils';
+import DayNames from '../DatePickerInline/DayNames';
+import HeaderItem from '../DatePickerInline/HeaderItem';
+import { dayNamesHeight } from '../DatePickerInline/utils';
+import { datePickerDockedHeaderStyles } from './utils';
+
+const buttonContainerHeight = 56;
+const buttonContainerMarginTop = 4;
+const buttonContainerMarginBottom = 8;
+
+export type CalendarHeaderProps = {
+    locale?: string;
+    disableWeekDays?: DisableWeekDaysType;
+    style?: ViewStyle;
+};
+
+function DatePickerDockedHeader({
+    locale = 'en',
+    disableWeekDays,
+    style: styleProp,
+}: CalendarHeaderProps) {
+    const [{ localDate, pickerType, startDateYear, endDateYear }, setStore] = useDatePickerStore(
+        state => ({
+            localDate: state.localDate,
+            pickerType: state.pickerType,
+            startDateYear: state.startDateYear,
+            endDateYear: state.endDateYear,
+        }),
+    );
+
+    // const componentStyles = useComponentStyles('DatePickerDocked_Header', styleProp);
+
+    const monthName = useMemo(() => {
+        return format(localDate, 'MMM');
+    }, [localDate]);
+
+    const { containerStyle, daysWrapperStyle } = useMemo(() => {
+        return {
+            containerStyle: [datePickerDockedHeaderStyles.datePickerHeader, styleProp],
+            daysWrapperStyle: datePickerDockedHeaderStyles.daysWrapperStyle,
+        };
+    }, [styleProp]);
+
+    const handlePressDropDown = useCallback(
+        (type: 'month' | 'year') => {
+            setStore(prev => ({
+                pickerType: prev.pickerType ? undefined : type,
+            }));
+        },
+        [setStore],
+    );
+
+    const isNotInRange = useCallback(
+        (date: Date) => {
+            const year = date.getFullYear();
+            const month = date.getMonth();
+            if (year < startDateYear || year > endDateYear || month > 11 || month < 0) {
+                return true;
+            }
+            return false;
+        },
+        [startDateYear, endDateYear],
+    );
+
+    const handleChange = useCallback(
+        (offset: number, type?: 'month' | 'year') => {
+            let newDate = localDate;
+            const prop = type === 'month' ? 'months' : 'years';
+            newDate = add(newDate, { [prop]: offset });
+
+            if (isNotInRange(newDate)) return;
+
+            setStore(() => ({
+                localDate: newDate,
+            }));
+        },
+        [isNotInRange, localDate, setStore],
+    );
+
+    const handleChangePrevious = useMemo(() => handleChange.bind(null, -1), [handleChange]);
+    const handleChangeNext = useMemo(() => handleChange.bind(null, 1), [handleChange]);
+
+    return (
+        <View>
+            <View style={containerStyle} pointerEvents={'box-none'}>
+                <HeaderItem
+                    selecting={!!pickerType}
+                    type="month"
+                    value={monthName}
+                    onNext={handleChangeNext}
+                    onPrev={handleChangePrevious}
+                    onPressDropdown={handlePressDropDown}
+                    pickerType={pickerType}
+                />
+                <HeaderItem
+                    selecting={!!pickerType}
+                    type="year"
+                    value={localDate.getFullYear()}
+                    onNext={handleChangeNext}
+                    onPrev={handleChangePrevious}
+                    onPressDropdown={handlePressDropDown}
+                    pickerType={pickerType}
+                />
+            </View>
+            <View style={daysWrapperStyle}>
+                <DayNames disableWeekDays={disableWeekDays} locale={locale} />
+            </View>
+        </View>
+    );
+}
+
+export function getCalendarHeaderHeight(scrollMode: 'horizontal' | 'vertical') {
+    if (scrollMode === 'horizontal') {
+        return (
+            buttonContainerHeight +
+            buttonContainerMarginTop +
+            buttonContainerMarginBottom +
+            dayNamesHeight
+        );
+    }
+    return dayNamesHeight;
+}
+
+export default memo(DatePickerDockedHeader);

package/components/DatePickerDocked/index.tsx

@@ -0,0 +1,21 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import DatePickerDockedDefault from './DatePickerDocked';
+
+registerMoleculesComponents({
+    DatePickerDocked: DatePickerDockedDefault,
+});
+
+export const DatePickerDocked = getRegisteredComponentWithFallback(
+    'DatePickerDocked',
+    DatePickerDockedDefault,
+);
+
+export type { DatePickerDockedProps } from './types';
+export {
+    datePickerDockedHeaderStyles,
+    datePickerDockedMonthItemStyles,
+    datePickerDockedMonthStyles,
+    datePickerDockedStyles,
+    datePickerHeaderItemStyles,
+    datePickerMonthPickerStyles,
+} from './utils';

package/components/DatePickerDocked/types.ts

@@ -0,0 +1,11 @@
+import type { ViewProps } from 'react-native';
+
+import type { DatePickerSingleProps } from '../DatePickerInline';
+
+export type DatePickerDockedProps = DatePickerSingleProps & {
+    triggerRef: any;
+    onToggle: () => void;
+    onClose: () => void;
+    isOpen: boolean;
+    popoverContentProps?: ViewProps;
+};

package/components/DatePickerDocked/utils.ts

@@ -0,0 +1,155 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const datePickerDockedStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        roundness: theme.shapes.corner.extraSmall,
+        headerBackgroundColor: theme.colors.surface,
+    } as any,
+
+    container: {
+        minHeight: 360,
+        minWidth: 360,
+    },
+}));
+
+const datePickerDockedHeaderStylesDefault = StyleSheet.create(theme => ({
+    datePickerHeader: {
+        position: 'relative',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-evenly',
+    },
+    daysWrapperStyle: {
+        marginHorizontal: theme.spacings['3'],
+    },
+}));
+
+const datePickerHeaderItemStylesDefault = StyleSheet.create(theme => ({
+    buttonContainer: {
+        height: 46,
+        width: '50%',
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    buttonWrapper: {},
+    spacer: { flex: 1 },
+    labelStyle: {
+        ...theme.typescale.bodyMedium,
+        opacity: 0.7,
+    },
+    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 datePickerMonthPickerStylesDefault = 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 datePickerDockedMonthItemStylesDefault = 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,
+                },
+            },
+        },
+    },
+}));
+
+const datePickerDockedMonthStylesDefault = StyleSheet.create(theme => ({
+    dockedHeaderStyle: {
+        alignItems: 'flex-start',
+        marginLeft: theme.spacings['4'],
+    },
+    weekContainerStyle: {
+        marginHorizontal: theme.spacings['3'],
+    },
+    backDropStyle: {
+        backgroundColor: 'transparent',
+    },
+}));
+
+registerComponentsStyles({
+    DatePickerDocked: datePickerDockedStylesDefault,
+    DatePickerDocked_Header: datePickerDockedHeaderStylesDefault,
+    DatePicker_HeaderItem: datePickerHeaderItemStylesDefault,
+    DatePickerDocked_MonthPicker: datePickerMonthPickerStylesDefault,
+    DatePickerDocked_MonthItem: datePickerDockedMonthItemStylesDefault,
+    DatePickerDocked_Month: datePickerDockedMonthStylesDefault,
+});
+
+export const datePickerDockedStyles = getRegisteredMoleculesComponentStyles('DatePickerDocked');
+export const datePickerDockedHeaderStyles =
+    getRegisteredMoleculesComponentStyles('DatePickerDocked_Header');
+export const datePickerHeaderItemStyles =
+    getRegisteredMoleculesComponentStyles('DatePicker_HeaderItem');
+export const datePickerMonthPickerStyles = getRegisteredMoleculesComponentStyles(
+    'DatePickerDocked_MonthPicker',
+);
+export const datePickerDockedMonthItemStyles = getRegisteredMoleculesComponentStyles(
+    'DatePickerDocked_MonthItem',
+);
+export const datePickerDockedMonthStyles =
+    getRegisteredMoleculesComponentStyles('DatePickerDocked_Month');

package/components/DatePickerInline/AutoSizer.tsx

@@ -0,0 +1,46 @@
+import { useCallback, useMemo, useState } from 'react';
+import { type LayoutChangeEvent, StyleSheet, View } from 'react-native';
+
+type WidthAndHeight = {
+    width: number;
+    height: number;
+};
+
+export default function AutoSizer({
+    children,
+}: {
+    children: ({ width, height }: WidthAndHeight) => any;
+}) {
+    const [layout, setLayout] = useState<WidthAndHeight | null>(null);
+
+    const onLayout = useCallback(
+        (event: LayoutChangeEvent) => {
+            const nl = event.nativeEvent.layout;
+
+            // https://github.com/necolas/react-native-web/issues/1704
+            if (!layout || layout.width !== nl.width || layout.height !== nl.height) {
+                setLayout({ width: nl.width, height: nl.height });
+            }
+        },
+        [layout, setLayout],
+    );
+
+    const { autoSizerStyle } = useMemo(() => {
+        return {
+            autoSizerStyle: [styles.autoSizer, layout && layout],
+        };
+    }, [layout]);
+
+    return (
+        <View style={autoSizerStyle} onLayout={onLayout}>
+            <>{layout ? children(layout) : null}</>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    autoSizer: {
+        flex: 1,
+        overflow: 'hidden',
+    },
+});

package/components/DatePickerInline/DatePickerContext.tsx

@@ -0,0 +1,21 @@
+import { createFastContext } from '../../fast-context';
+
+export type Store = {
+    localDate: Date;
+    startDateYear: number;
+    endDateYear: number;
+    pickerType: 'month' | 'year' | undefined;
+};
+
+export const defaultValue = {
+    localDate: new Date(),
+    startDateYear: 1800,
+    endDateYear: 2200,
+    pickerType: undefined,
+};
+
+export const {
+    Provider,
+    useContext: useDatePickerStore,
+    useContextValue: useDatePickerStoreValue,
+} = createFastContext<Store>();

package/components/DatePickerInline/DatePickerInline.tsx

@@ -0,0 +1,82 @@
+import { memo, useCallback, useMemo } from 'react';
+import { View, type ViewStyle } from 'react-native';
+
+import { useControlledValue } from '../../hooks';
+import type {
+    LocalState,
+    LocalStateMultiple,
+    LocalStateRange,
+    LocalStateSingle,
+} from '../DatePickerModal/types';
+import DatePickerInlineBase from './DatePickerInlineBase';
+import DatePickerInlineHeader from './DatePickerInlineHeader';
+import type { DatePickerInlineBaseProps } from './types';
+import { datePickerStyles } from './utils';
+
+export type DatePickerInlineProps = DatePickerInlineBaseProps & {
+    containerStyle?: ViewStyle;
+};
+
+const DatePickerInline = ({
+    date,
+    startDate,
+    endDate,
+    dates,
+    onChange,
+    locale = 'en',
+    mode = 'single',
+    containerStyle: containerStyleProp,
+    ...rest
+}: DatePickerInlineProps) => {
+    const onInnerChange = useCallback(
+        (params: any) => {
+            onChange?.(params);
+        },
+        [onChange],
+    );
+
+    const [state, onStateChange] = useControlledValue<LocalState>({
+        value: getStateValue({ date, dates, startDate, endDate }, mode),
+        onChange: onInnerChange,
+    });
+
+    const { containerStyle } = useMemo(() => {
+        return {
+            containerStyle: [datePickerStyles.container, datePickerStyles.root, containerStyleProp],
+        };
+    }, [containerStyleProp]);
+
+    return (
+        <View style={containerStyle}>
+            <DatePickerInlineBase
+                {...rest}
+                locale={locale}
+                mode={mode}
+                startDate={(state as LocalStateRange)?.startDate}
+                endDate={(state as LocalStateRange)?.endDate}
+                date={(state as LocalStateSingle)?.date}
+                onChange={onStateChange as typeof onInnerChange}
+                dates={(state as LocalStateMultiple)?.dates}
+                // TODO - fix ts issues
+                // @ts-ignore
+                HeaderComponent={DatePickerInlineHeader}
+            />
+        </View>
+    );
+};
+
+export const getStateValue = (state: LocalState, mode: DatePickerInlineProps['mode']) => {
+    if (mode === 'single') {
+        return (state as LocalStateSingle).date !== undefined ? state : undefined;
+    } else if (mode === 'range') {
+        return (state as LocalStateRange).startDate !== undefined ||
+            (state as LocalStateRange).endDate !== undefined
+            ? state
+            : undefined;
+    } else if (mode === 'multiple') {
+        return (state as LocalStateMultiple).dates !== undefined ? state : undefined;
+    }
+    return state;
+};
+
+export default memo(DatePickerInline);