react-native-molecules 0.5.0-beta.3 → 0.5.0-beta.31

package/components/TimePickerModal/TimePickerModal.tsx

@@ -1,115 +0,0 @@
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { KeyboardAvoidingView, Platform, View } from 'react-native';
-
-import { format } from '../../utils/date-fns';
-import { Button } from '../Button';
-import { IconButton } from '../IconButton';
-import { Modal, type ModalProps } from '../Modal';
-import { Portal } from '../Portal';
-import { Text } from '../Text';
-import TimePicker from '../TimePicker/TimePicker';
-import {
-    clockTypes,
-    getTimeInputTypeIcon,
-    inputTypes,
-    type PossibleClockTypes,
-    type PossibleInputTypes,
-    reverseInputTypes,
-} from '../TimePicker/timeUtils';
-import { styles } from './utils';
-
-export type Props = Omit<ModalProps, 'children'> & {
-    is24Hour?: boolean;
-    label?: string;
-    uppercase?: boolean;
-    cancelLabel?: string;
-    confirmLabel?: string;
-    time?: string;
-    onConfirm: (time: string) => any;
-    keyboardIcon?: string;
-    clockIcon?: string;
-    isLandscape?: boolean;
-};
-
-export function TimePickerModal({
-    isOpen,
-    onClose,
-    onConfirm: onConfirmProp,
-    time: timeProp,
-    label = 'Select time',
-    uppercase = false,
-    cancelLabel = 'Cancel',
-    confirmLabel = 'Ok',
-    is24Hour,
-    keyboardIcon = 'keyboard-outline',
-    clockIcon = 'clock-outline',
-    isLandscape = false,
-    style,
-    ...rest
-}: Props) {
-    const [inputType, setInputType] = useState<PossibleInputTypes>(inputTypes.picker);
-    const [focused, setFocused] = useState<PossibleClockTypes>(clockTypes.hours);
-    const [time, setTime] = useState(() => timeProp || format(new Date(), 'HH:mm'));
-
-    const modelStyle = useMemo(() => [styles.modalContent, style], [style]);
-
-    const onFocusInput = useCallback((type: PossibleClockTypes) => setFocused(type), []);
-
-    const onChange = useCallback(
-        (params: { focused?: PossibleClockTypes | undefined; time: string }) => {
-            if (params.focused) {
-                setFocused(params.focused);
-            }
-
-            setTime(params.time);
-        },
-        [setFocused, setTime],
-    );
-
-    const onConfirm = useCallback(() => onConfirmProp(time), [onConfirmProp, time]);
-
-    useEffect(() => {
-        setTime(timeProp || format(new Date(), 'HH:mm'));
-    }, [timeProp]);
-
-    return (
-        <Portal>
-            <Modal {...rest} isOpen={isOpen} style={modelStyle} onClose={onClose}>
-                <KeyboardAvoidingView
-                    style={styles.keyboardView}
-                    behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
-                    <View style={styles.labelContainer}>
-                        <Text style={styles.label}>{uppercase ? label.toUpperCase() : label}</Text>
-                    </View>
-                    <View style={styles.timePickerContainer}>
-                        <TimePicker
-                            is24Hour={is24Hour}
-                            inputType={inputType}
-                            focused={focused}
-                            time={time}
-                            onTimeChange={onChange}
-                            onFocusInput={onFocusInput}
-                            isLandscape={isLandscape}
-                        />
-                    </View>
-                    <View style={styles.footer}>
-                        <IconButton
-                            name={getTimeInputTypeIcon(inputType, {
-                                keyboard: keyboardIcon,
-                                picker: clockIcon,
-                            })}
-                            onPress={() => setInputType(reverseInputTypes[inputType])}
-                            style={styles.inputTypeToggle}
-                            accessibilityLabel="toggle keyboard"
-                        />
-                        <View style={styles.fill} />
-                        <Button onPress={onClose}>{cancelLabel}</Button>
-                        <Button onPress={onConfirm}>{confirmLabel}</Button>
-                    </View>
-                </KeyboardAvoidingView>
-            </Modal>
-        </Portal>
-    );
-}
-
-export default memo(TimePickerModal);

package/components/TimePickerModal/index.tsx

@@ -1,10 +0,0 @@
-import { getRegisteredComponentWithFallback } from '../../core';
-import TimePickerModalDefault from './TimePickerModal';
-
-export const TimePickerModal = getRegisteredComponentWithFallback(
-    'TimePickerModal',
-    TimePickerModalDefault,
-);
-
-export type { Props as TimePickerModalProps } from './TimePickerModal';
-export { styles } from './utils';

package/components/TimePickerModal/utils.ts

@@ -1,47 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-
-import { getRegisteredComponentStylesWithFallback } from '../../core';
-
-const timepickerModalStylesDefault = StyleSheet.create(theme => ({
-    keyboardView: {
-        justifyContent: 'center',
-        alignItems: 'center',
-        flex: 1,
-    },
-    modalContent: {
-        minWidth: 287,
-        width: undefined,
-        maxWidth: undefined,
-        flex: undefined,
-        borderRadius: theme.shapes.corner.extraLarge,
-    },
-    labelContainer: {
-        height: 28,
-        justifyContent: 'flex-end',
-        paddingLeft: theme.spacings['6'],
-        paddingRight: theme.spacings['6'],
-        alignSelf: 'flex-start',
-    },
-    label: {
-        letterSpacing: 1,
-        fontSize: theme.typescale.labelLarge.fontSize,
-        color: theme.colors.onSurface,
-        fontWeight: theme.typescale.labelLarge.fontWeight,
-    },
-    timePickerContainer: {
-        padding: theme.spacings['6'],
-    },
-    footer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: theme.spacings['2'],
-        width: '100%',
-    },
-    inputTypeToggle: { margin: theme.spacings['1'] },
-    fill: { flex: 1 },
-}));
-
-export const styles = getRegisteredComponentStylesWithFallback(
-    'TimePickerModal',
-    timepickerModalStylesDefault,
-);

package/components/VerticalDivider/VerticalDivider.tsx

@@ -1,100 +0,0 @@
-import { memo } from 'react';
-import { View, type ViewProps } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-
-import { getRegisteredComponentStylesWithFallback } from '../../core';
-
-export type Props = Omit<ViewProps, 'children'> & {
-    /**
-     *  Top Inset of the Divider.
-     */
-    topInset?: number;
-    /**
-     *  Bottom Inset of the Divider.
-     */
-    bottomInset?: number;
-    /**
-     *  Whether divider should be bolded.
-     */
-    bold?: boolean;
-    /**
-     *  Horizontal spacing of the Divider
-     */
-    spacing?: number;
-};
-
-/**
- * A divider is a thin, lightweight separator that groups content in lists and page layouts.
- *
- * <div class="screenshots">
- *  <figure>
- *    <img class="medium" src="screenshots/divider.png" />
- *  </figure>
- * </div>
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { View } from 'react-native';
- * import { Divider, Text } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <View>
- *     <Text>Lemon</Text>
- *     <Divider />
- *     <Text>Mango</Text>
- *     <Divider />
- *   </View>
- * );
- *
- * export default MyComponent;
- * ```
- */
-
-const VerticalDivider = ({
-    topInset = 0,
-    bottomInset = 0,
-    spacing = 0,
-    style,
-    bold = false,
-    ...rest
-}: Props) => {
-    verticalDividerStyles.useVariants({
-        isBold: bold,
-    });
-
-    return (
-        <View
-            {...rest}
-            style={[
-                verticalDividerStyles.root,
-                style,
-                topInset ? { marginTop: topInset } : undefined,
-                bottomInset ? { marginBottom: bottomInset } : undefined,
-                spacing ? { marginHorizontal: spacing } : undefined,
-            ]}
-        />
-    );
-};
-
-export const verticalDividerStylesDefault = StyleSheet.create(theme => ({
-    root: {
-        width: StyleSheet.hairlineWidth,
-        background: theme.colors.outlineVariant,
-
-        variants: {
-            isBold: {
-                true: {
-                    width: 1,
-                },
-            },
-        },
-    },
-}));
-
-export const verticalDividerStyles = getRegisteredComponentStylesWithFallback(
-    'VerticalDivider',
-    verticalDividerStylesDefault,
-);
-
-export default memo(VerticalDivider);

package/components/VerticalDivider/index.tsx

@@ -1,9 +0,0 @@
-import { getRegisteredComponentWithFallback } from '../../core';
-import VerticalDividerDefault from './VerticalDivider';
-
-export const VerticalDivider = getRegisteredComponentWithFallback(
-    'VerticalDivider',
-    VerticalDividerDefault,
-);
-
-export { type Props as VerticalDividerProps, verticalDividerStyles } from './VerticalDivider';

package/context-bridge/index.tsx

@@ -1,87 +0,0 @@
-import type { ComponentType, Context as ContextType, PropsWithChildren } from 'react';
-import { Fragment, useContext, useId, useMemo, useRef, useState } from 'react';
-
-import typedMemo from '../hocs/typedMemo';
-import { Repository } from '../utils/repository';
-
-// https://github.com/pmndrs/its-fine/blob/main/src/index.tsx
-// In development, React will warn about using contexts between renderers.
-// Hide the warning because its-fine fixes this issue
-// https://github.com/facebook/react/pull/12779
-function wrapContext<T>(context: React.Context<T>): React.Context<T> {
-    try {
-        return Object.defineProperties(context, {
-            _currentRenderer: {
-                get() {
-                    return null;
-                },
-                set() {},
-            },
-            _currentRenderer2: {
-                get() {
-                    return null;
-                },
-                set() {},
-            },
-        });
-    } catch (_) {
-        return context;
-    }
-}
-
-export const createContextBridge = <T extends object>(
-    bridgeName: string,
-    Wrapper: ComponentType<T>,
-    contexts: ContextType<any>[] = [],
-) => {
-    const respository = new Repository<ContextType<any>[]>({
-        name: bridgeName,
-        onRegister: (arg, name, registry) => {
-            return [registry[name] ?? [], arg].flat();
-        },
-    });
-
-    return {
-        registerContextToBridge: (updatedContexts: ContextType<any> | ContextType<any>[]) => {
-            respository.register(
-                'contexts',
-                ([] as ContextType<any>[])
-                    .concat(updatedContexts)
-                    .map(context => wrapContext(context)),
-            );
-        },
-        BridgedComponent: typedMemo((props: PropsWithChildren<T> & { name?: string }) => {
-            const { name, ...rest } = props;
-            const contextValuesRef = useRef<any[]>([]);
-
-            const id = useId();
-
-            const [allContexts] = useState(() =>
-                Array.from(new Set([...contexts, ...Object.values(respository.getAll()).flat()])),
-            );
-
-            for (const i in allContexts) {
-                // eslint-disable-next-line react-hooks/rules-of-hooks
-                contextValuesRef.current[i] = useContext(allContexts[i]);
-            }
-
-            const content = useMemo(() => {
-                return allContexts.reduce((acc, Context, currentIndex) => {
-                    return (
-                        <Context.Provider value={contextValuesRef.current[currentIndex]}>
-                            {acc}
-                        </Context.Provider>
-                    );
-                }, <>{props.children}</>);
-                // eslint-disable-next-line react-hooks/exhaustive-deps
-            }, [...contextValuesRef.current, allContexts, props.children]);
-
-            const _key = name ? name + id : id;
-            return (
-                <Wrapper name={name} {...(rest as T)}>
-                    <Fragment key={_key}>{content}</Fragment>
-                </Wrapper>
-            );
-        }),
-    };
-};

package/fast-context/index.tsx

@@ -1,190 +0,0 @@
-import {
-    type Context,
-    createContext,
-    type ReactNode,
-    type RefObject,
-    useCallback,
-    useContext,
-    useEffect,
-    useMemo,
-    useRef,
-} from 'react';
-import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
-
-import typedMemo from '../hocs/typedMemo';
-import { usePrevious } from '../hooks';
-import { shallowCompare } from '../utils';
-
-type StoreDataType = Record<string, any>;
-
-type SelectorOutputType<IStore, SelectorOutput> = (store: IStore) => SelectorOutput;
-
-type UseStoreDataReturnType<T> = {
-    get: () => T;
-    set: (value: (prev: T) => Partial<T>) => void;
-    store: RefObject<T>;
-    subscribe: (callback: () => void) => () => void;
-};
-
-const useStoreData = <IStore extends StoreDataType>(
-    value: IStore,
-    defaultValue: IStore | null,
-    watch: boolean = false,
-): UseStoreDataReturnType<IStore> => {
-    const store = useRef<IStore>({ ...defaultValue, ...(value as IStore) });
-    const watchRef = useRef(watch);
-
-    const get = useCallback(() => store.current, [store]);
-
-    const subscribers = useRef(new Set<() => void>());
-
-    const set = useCallback(
-        (callback: (prev: IStore) => Partial<IStore>) => {
-            store.current = { ...store.current, ...callback(store.current) };
-            subscribers.current.forEach(subscriber => subscriber());
-        },
-        [store],
-    );
-
-    const subscribe = useCallback((callback: () => void) => {
-        subscribers.current.add(callback);
-
-        return () => subscribers.current.delete(callback);
-    }, []);
-
-    /** The effect is required to trigger the updates on the consumers */
-    useEffect(() => {
-        if (!watchRef.current) return;
-        set(prev => ({ ...prev, ...value }));
-    }, [set, value]);
-
-    /**
-     * Cases:
-     * 1. when the value updates, we want the data to be updated immediately
-     * 2. the data stored in store.current may not be current with regards to the parent and the parent must have dropped the references related to the data.
-     * 3. because store.current is a ref, on watch and change, if we update store.current, no side-effect introduced.
-     */
-    if (usePrevious(value).current !== value && watchRef.current) {
-        store.current = { ...store.current, ...value };
-    }
-
-    return useMemo(
-        () => ({
-            get,
-            set,
-            subscribe,
-            store,
-        }),
-        [get, set, subscribe],
-    );
-};
-
-export const createFastContext = <T extends StoreDataType = {}>(
-    defaultValue: T | null = null,
-    watch: boolean = false,
-) => {
-    const context = createContext<UseStoreDataReturnType<T> | null>(null);
-
-    return {
-        /**
-         * using the value from here will never cause a rerender as context is based on refs.
-         */
-        useStoreRef: createUseRefContext(context),
-
-        /**
-         *
-         * the value is memoized and thus changing the value will have no effect.
-         * use key prop to unmount and remount if necessary. alternatively use set from the context to update the value.
-         *
-         */
-        Provider: createProvider<T>(
-            context as Context<UseStoreDataReturnType<T>>,
-            defaultValue,
-            watch,
-        ),
-
-        /**
-         *
-         * @param selector
-         * @param equalityCheck
-         * @returns tuple, first item is return value of the selector and the second item is setter
-         *
-         */
-        useContext: <SelectorOutput,>(
-            selector: SelectorOutputType<T, SelectorOutput>,
-            equalityCheck = shallowCompare,
-        ) => useStore(context as Context<UseStoreDataReturnType<T>>, selector, equalityCheck),
-
-        /**
-         *
-         * @param selector
-         * @param equalityCheck
-         * @returns return value of the selector
-         *
-         */
-        useContextValue: <SelectorOutput,>(
-            selector: SelectorOutputType<T, SelectorOutput>,
-            equalityCheck = shallowCompare,
-        ) => useStoreValue(context as Context<UseStoreDataReturnType<T>>, selector, equalityCheck),
-        /**
-         * context of the store. Useful for ContextBridge
-         */
-        Context: context,
-    };
-};
-
-export const createProvider = <T extends Record<string, any> = {}>(
-    StoreContext: Context<UseStoreDataReturnType<T>>,
-    defaultValue: T | null,
-    watch: boolean,
-) =>
-    typedMemo(({ value, children }: { value: T; children: ReactNode }) => {
-        return (
-            <StoreContext.Provider value={useStoreData<T>(value, defaultValue, watch) as any}>
-                {children}
-            </StoreContext.Provider>
-        );
-    });
-
-export const createUseRefContext = <T,>(_Context: Context<UseStoreDataReturnType<T> | null>) => {
-    return () => {
-        const value = useContext<UseStoreDataReturnType<T> | null>(_Context);
-        if (value === null)
-            throw 'Fast Context requires the value to be wrapped in a Provider with a value.';
-
-        return value;
-    };
-};
-
-export const useStore = <IStore extends StoreDataType, SelectorOutput>(
-    _Context: Context<UseStoreDataReturnType<IStore>>,
-    selector: SelectorOutputType<IStore, SelectorOutput>,
-    equalityFn = Object.is,
-): [SelectorOutput, (value: (prev: IStore) => Partial<IStore>) => void] => {
-    const store = useContext(_Context);
-    if (!store) {
-        throw new Error('Store not found');
-    }
-
-    const state = useSyncExternalStoreWithSelector(
-        store.subscribe,
-        () => {
-            return store.get();
-        },
-        undefined,
-        snapshot => {
-            return selector(snapshot);
-        },
-        equalityFn,
-    );
-
-    return [state, store.set];
-};
-
-export const useStoreValue = <IStore extends StoreDataType, SelectorOutput>(
-    _Context: Context<UseStoreDataReturnType<IStore>>,
-    selector: SelectorOutputType<IStore, SelectorOutput>,
-    equalityFn = Object.is,
-) => {
-    return useStore(_Context, selector, equalityFn)[0];
-};

package/hocs/typedMemo.tsx

@@ -1,5 +0,0 @@
-import { memo } from 'react';
-
-const typedMemo: <T>(c: T) => T = memo;
-
-export default typedMemo;

package/hooks/useControlledValue.tsx

@@ -1,68 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-type ReturnType<T> = [T, (value: T, ...args: any[]) => void];
-
-type Args<T> = {
-    value?: T;
-    defaultValue?: T;
-    onChange?: (value: T, ...args: any[]) => any;
-    disabled?: boolean;
-    manipulateValue?: (value: T | undefined, prevValue: T | undefined) => T;
-};
-
-const defaultManipulateValue = (val: any) => val;
-
-const useControlledValue = <T,>({
-    value: valueProp,
-    defaultValue,
-    disabled = false,
-    onChange,
-    manipulateValue = defaultManipulateValue,
-}: Args<T>): ReturnType<T> => {
-    const value = useMemo(
-        () =>
-            valueProp !== undefined
-                ? manipulateValue(valueProp, undefined)
-                : manipulateValue(defaultValue, undefined),
-        [defaultValue, manipulateValue, valueProp],
-    );
-
-    const hasWarnedRef = useRef(false);
-
-    const isUncontrolled = useRef(valueProp).current === undefined;
-    const [uncontrolledValue, setValue] = useState(value);
-
-    const updateValue = useCallback(
-        (val: T, ...rest: any[]) => {
-            if (disabled) return;
-
-            if (isUncontrolled) {
-                setValue(manipulateValue(val, uncontrolledValue));
-            }
-
-            onChange?.(
-                manipulateValue(val, isUncontrolled ? uncontrolledValue : valueProp),
-                ...rest,
-            );
-        },
-        [disabled, isUncontrolled, manipulateValue, onChange, uncontrolledValue, valueProp],
-    );
-
-    useEffect(() => {
-        if (hasWarnedRef.current) return;
-        hasWarnedRef.current = true;
-
-        if (valueProp !== undefined && isUncontrolled) {
-            console.warn(
-                'Trying to change the value from uncontrolled to controlled can lead to inconsistencies',
-            );
-        }
-    }, [isUncontrolled, valueProp]);
-
-    return useMemo(
-        () => [isUncontrolled ? uncontrolledValue : value, updateValue],
-        [isUncontrolled, uncontrolledValue, updateValue, value],
-    );
-};
-
-export default useControlledValue;

package/hooks/useLatest.tsx

@@ -1,9 +0,0 @@
-import { useRef } from 'react';
-
-const useLatest = <T,>(value: T) => {
-    const ref = useRef(value);
-    ref.current = value;
-    return ref;
-};
-
-export default useLatest;

package/hooks/useMergedRefs.ts

@@ -1,14 +0,0 @@
-import { useCallback } from 'react';
-
-import { mergeRefs } from '../utils';
-import useLatest from './useLatest';
-
-export const useMergedRefs: typeof mergeRefs = refs => {
-    const latestRefs = useLatest(refs);
-    return useCallback(
-        value => {
-            mergeRefs(latestRefs.current)(value);
-        },
-        [latestRefs],
-    );
-};

package/hooks/usePrevious.ts

@@ -1,13 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-const usePrevious = <T>(value: T) => {
-    const ref = useRef<T>(value);
-
-    useEffect(() => {
-        ref.current = value;
-    }, [value]);
-
-    return ref;
-};
-
-export default usePrevious;