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

package/utils/DocumentPicker/documentPicker.ts

@@ -2,6 +2,14 @@ import { Platform } from 'react-native';
 
 import type { DocumentPickerOptions, DocumentResult } from './types';
 
+class OperationCanceledError extends Error {
+    code = 'OPERATION_CANCELED';
+    constructor() {
+        super('user canceled the document picker');
+        this.name = 'OperationCanceledError';
+    }
+}
+
 const resolveFileData = (file: File): Promise<DocumentResult> => {
     return new Promise((resolve, reject) => {
         const mimeType = file.type;
@@ -31,46 +39,89 @@ const resolveFileData = (file: File): Promise<DocumentResult> => {
 const getDocumentAsyncWeb = async ({
     type = '*/*',
     multiple = false,
-}: DocumentPickerOptions): Promise<DocumentResult | DocumentResult[]> => {
+    onCancel,
+    onError,
+}: DocumentPickerOptions): Promise<DocumentResult[]> => {
     // SSR guard
     if (Platform.OS !== 'web') {
-        return { type: 'cancel' };
+        const error = new OperationCanceledError();
+        onCancel?.();
+        throw error;
     }
 
-    const input = document.createElement('input');
-    input.style.display = 'none';
-    input.setAttribute('type', 'file');
-    // @ts-expect-error
-    input.setAttribute('accept', Array.isArray(type) ? type.join(',') : type);
+    return new Promise((resolve, reject) => {
+        try {
+            const input = document.createElement('input');
+            input.style.display = 'none';
+            input.setAttribute('type', 'file');
+            // @ts-expect-error
+            input.setAttribute('accept', Array.isArray(type) ? type.join(',') : type);
 
-    if (multiple) {
-        input.setAttribute('multiple', 'multiple');
-    }
+            if (multiple) {
+                input.setAttribute('multiple', 'multiple');
+            }
 
-    document.body.appendChild(input);
+            document.body.appendChild(input);
 
-    return new Promise(resolve => {
-        input.addEventListener('change', () => {
-            if (input.files) {
-                const response: Promise<DocumentResult>[] = [];
+            const cleanup = () => {
+                try {
+                    document.body.removeChild(input);
+                } catch (e) {
+                    // Input already removed, ignore
+                }
+            };
 
-                Array.from(input.files).forEach(file => response.push(resolveFileData(file)));
+            input.addEventListener('change', async () => {
+                try {
+                    if (input.files && input.files.length > 0) {
+                        const response: Promise<DocumentResult>[] = [];
 
-                return resolve(Promise.all(response));
-            } else {
-                resolve({ type: 'cancel' });
-            }
+                        Array.from(input.files).forEach(file =>
+                            response.push(resolveFileData(file)),
+                        );
 
-            document.body.removeChild(input);
-        });
+                        const results = await Promise.all(response);
+                        resolve(results);
+                    }
+                } catch (error) {
+                    onError?.(error);
+                    reject(error);
+                } finally {
+                    cleanup();
+                }
+            });
 
-        const event = new MouseEvent('click');
-        input.dispatchEvent(event);
+            input.addEventListener('cancel', () => {
+                const error = new OperationCanceledError();
+                onCancel?.();
+                cleanup();
+                reject(error);
+            });
+
+            input.addEventListener('error', () => {
+                const error = new Error('File picker error occurred');
+                onError?.(error);
+                cleanup();
+                reject(error);
+            });
+
+            const event = new MouseEvent('click');
+            input.dispatchEvent(event);
+        } catch (error) {
+            // Handle errors from file picker setup or opening
+            onError?.(error);
+            reject(error);
+        }
     });
 };
 
+const pickSingle = (options: DocumentPickerOptions = {}) =>
+    getDocumentAsyncWeb({ ...options, multiple: false });
+
+const pickMultiple = (options: DocumentPickerOptions = {}) =>
+    getDocumentAsyncWeb({ ...options, multiple: true });
+
 export default {
-    pickSingle: ({ type }: DocumentPickerOptions) => getDocumentAsyncWeb({ type, multiple: false }),
-    pickMultiple: ({ type }: DocumentPickerOptions) =>
-        getDocumentAsyncWeb({ type, multiple: true }),
+    pickSingle,
+    pickMultiple,
 };

package/utils/DocumentPicker/types.ts

@@ -12,7 +12,6 @@ export type DocumentPickerOptions = Omit<RNDocumentPickerOptions, 'allowMultiSel
     multiple?: boolean;
     /**
      * runs when the DocumentPicker is cancelled
-     *  currently, only supported on IOS and Android
      */
     onCancel?: () => void;
     /**

package/utils/extractPropertiesFromStyles.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+// TODO - abstract this
+export function extractPropertiesFromStyles(
+    _objectsArray: Record<string, any>,
+    propertiesToExtract: string[],
+) {
+    const extracted: Record<string, any> = {};
+
+    const objectsArray = StyleSheet.flatten(_objectsArray);
+
+    for (let i = objectsArray.length - 1; i >= 0; i--) {
+        const obj = objectsArray[i];
+
+        for (const prop of propertiesToExtract) {
+            if (!obj) continue;
+            if (prop in obj) {
+                // @ts-ignore
+                extracted[prop] = obj[prop];
+            }
+        }
+    }
+
+    return extracted;
+}

package/utils/extractSubcomponents.ts

@@ -0,0 +1,89 @@
+import type { ReactElement, ReactNode } from 'react';
+import { Children, type FC, isValidElement } from 'react';
+
+export type ExtractSubcomponentsArgs<T extends string> = {
+    children: ReactNode;
+    /**
+     * array of displayName as string
+     * */
+    allowedChildren: (T | { name: T; allowMultiple?: boolean })[];
+    /**
+     * If true, also returns the remaining children that don't match any of the allowedChildren
+     * in a `rest` property
+     */
+    includeRest?: boolean;
+};
+
+export type ExtractSubcomponentsResult<T extends string, IncludeRest extends boolean = false> = {
+    [key in T]: ReactElement[];
+} & (IncludeRest extends true ? { rest: ReactNode[] } : {});
+
+/**
+ *  This will return an object with the displayNames as the property names
+ *  eg. allowedChildren: ['Drawer_Header', 'Drawer_Content', 'Drawer_Footer', 'DrawerItem'];
+ *
+ *  return value -> {
+ *    Drawer_Header: [],
+ *    Drawer_Content: [],
+ *    Drawer_Footer: [],
+ *    DrawerItem: [],
+ *  }
+ *
+ *  If includeRest is true, also returns:
+ *  {
+ *    ...above,
+ *    rest: [remaining children that don't match allowedChildren]
+ *  }
+ *  */
+export function extractSubcomponents<
+    T extends string = string,
+    IncludeRest extends boolean = false,
+>({
+    children,
+    allowedChildren,
+    includeRest,
+}: ExtractSubcomponentsArgs<T> & { includeRest?: IncludeRest }): ExtractSubcomponentsResult<
+    T,
+    IncludeRest
+> {
+    // Single map: name → allowMultiple
+    const allowedMap = new Map<T, boolean>();
+    for (const entry of allowedChildren) {
+        if (typeof entry === 'string') {
+            allowedMap.set(entry as T, true);
+        } else {
+            allowedMap.set(entry.name, entry.allowMultiple ?? true);
+        }
+    }
+
+    const result = (includeRest ? { rest: [] } : {}) as ExtractSubcomponentsResult<T, IncludeRest>;
+    for (const name of allowedMap.keys()) {
+        (result as any)[name] = [];
+    }
+
+    Children.forEach(children, child => {
+        if (!isValidElement(child)) {
+            if (includeRest) (result as any).rest.push(child);
+            return;
+        }
+
+        const displayName = (child.type as FC)?.displayName as T | undefined;
+        if (!displayName) {
+            if (includeRest) (result as any).rest.push(child);
+            return;
+        }
+
+        const allowMultiple = allowedMap.get(displayName);
+        if (allowMultiple !== undefined) {
+            if (allowMultiple) {
+                (result as any)[displayName].push(child);
+            } else {
+                (result as any)[displayName] = [child];
+            }
+        } else if (includeRest) {
+            (result as any).rest.push(child);
+        }
+    });
+
+    return result;
+}

package/utils/lodash.ts

@@ -1,8 +1,80 @@
-import memoize from 'lodash.memoize';
-export { default as get } from 'lodash.get';
-export { default as keyBy } from 'lodash.keyby';
-export { default as memoize } from 'lodash.memoize';
-export { default as omitBy } from 'lodash.omitby';
+type MemoizeCache<K = any, V = any> = {
+    has(key: K): boolean;
+    get(key: K): V | undefined;
+    set(key: K, value: V): unknown;
+};
+
+type MemoizeFn = {
+    <T extends (...args: any[]) => any>(
+        func: T,
+        resolver?: (...args: Parameters<T>) => any,
+    ): MemoizedFunction<T>;
+    Cache: { new (): MemoizeCache<any, any> };
+};
+
+export interface MemoizedFunction<T extends (...args: any[]) => any> {
+    (...args: Parameters<T>): ReturnType<T>;
+    cache: MemoizeCache<any, ReturnType<T>>;
+}
+
+export const memoize: MemoizeFn = ((
+    func: (...args: any[]) => any,
+    resolver?: (...args: any[]) => any,
+) => {
+    if (typeof func !== 'function') {
+        throw new TypeError('Expected a function');
+    }
+    const memoized = function (this: unknown, ...args: any[]) {
+        const key = resolver ? resolver.apply(this, args) : args[0];
+        const { cache } = memoized as MemoizedFunction<typeof func>;
+        if (cache.has(key)) {
+            return cache.get(key);
+        }
+        const result = func.apply(this, args);
+        cache.set(key, result);
+        return result;
+    } as MemoizedFunction<typeof func>;
+
+    (memoized as MemoizedFunction<typeof func>).cache = new memoize.Cache();
+    return memoized;
+}) as MemoizeFn;
+
+memoize.Cache = Map;
+
+type Iteratee<T> = ((item: T) => string | number | symbol) | keyof T;
+
+export const keyBy = <T extends Record<string, any>>(
+    collection: T[],
+    iteratee: Iteratee<T>,
+): Record<string, T> => {
+    const result: Record<string, T> = {};
+    if (!Array.isArray(collection)) return result;
+
+    const getter = typeof iteratee === 'function' ? iteratee : (item: T) => item[iteratee];
+    for (const item of collection) {
+        const key = getter(item);
+        if (key != null) {
+            result[String(key)] = item;
+        }
+    }
+    return result;
+};
+
+type Predicate = (value: any, key: string) => boolean;
+
+export const omitBy = <T extends Record<string, any>>(
+    object: T,
+    predicate: Predicate,
+): Partial<T> => {
+    if (object == null) return {};
+    const result: Partial<T> = {};
+    for (const [key, value] of Object.entries(object)) {
+        if (!predicate(value, key)) {
+            result[key as keyof T] = value;
+        }
+    }
+    return result;
+};
 
 export const isNil = (value: unknown): value is null | undefined => value == null;
 export const noop = () => {};

package/components/DatePickerDocked/DatePickerDocked.tsx

@@ -1,30 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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

@@ -1,17 +0,0 @@
-import { getRegisteredComponentWithFallback } from '../../core';
-import DatePickerDockedDefault from './DatePickerDocked';
-
-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

@@ -1,11 +0,0 @@
-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

@@ -1,157 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-
-import { getRegisteredComponentStylesWithFallback } 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',
-    },
-}));
-
-export const datePickerDockedStyles = getRegisteredComponentStylesWithFallback(
-    'DatePickerDocked',
-    datePickerDockedStylesDefault,
-);
-export const datePickerDockedHeaderStyles = getRegisteredComponentStylesWithFallback(
-    'DatePickerDocked_Header',
-    datePickerDockedHeaderStylesDefault,
-);
-export const datePickerHeaderItemStyles = getRegisteredComponentStylesWithFallback(
-    'DatePicker_HeaderItem',
-    datePickerHeaderItemStylesDefault,
-);
-export const datePickerMonthPickerStyles = getRegisteredComponentStylesWithFallback(
-    'DatePickerDocked_MonthPicker',
-    datePickerMonthPickerStylesDefault,
-);
-export const datePickerDockedMonthItemStyles = getRegisteredComponentStylesWithFallback(
-    'DatePickerDocked_MonthItem',
-    datePickerDockedMonthItemStylesDefault,
-);
-export const datePickerDockedMonthStyles = getRegisteredComponentStylesWithFallback(
-    'DatePickerDocked_Month',
-    datePickerDockedMonthStylesDefault,
-);