react-native-molecules 0.5.0-beta.0

package/types/index.ts

@@ -0,0 +1,129 @@
+import type { ComponentPropsWithoutRef, ComponentType } from 'react';
+import type { StyleProp } from 'react-native';
+
+export * from './theme';
+
+export type NoInfer<T> = [T][T extends any ? 0 : never];
+
+export type DeepPartial<T> = T extends object
+    ? {
+          [P in keyof T]?: DeepPartial<T[P]>;
+      }
+    : T;
+
+export type $Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
+
+export type $RemoveChildren<T extends ComponentType<any>> = $Omit<
+    ComponentPropsWithoutRef<T>,
+    'children'
+>;
+
+/*
+ *  T stands for ComponentStyle type eg. ViewStyl
+ *  C stands for Customer Properties
+ *  S stands for ComponentStates
+ * */
+export type ComponentStyleProp<T, C = {}> = StyleProp<T> & C;
+
+export type ComponentStylePropWithResolvers<
+    T,
+    S extends ComponentState,
+    C = {},
+    Z = {},
+> = ComponentStyleProp<T, C> & {
+    states?: {
+        [key in S]?: ComponentStyleProp<T, C>;
+    };
+    sizes?: {
+        [key: string]: ComponentSize<Z>;
+    };
+};
+
+export type ComponentStylePropWithVariants<
+    T,
+    S extends ComponentState = ComponentState,
+    C = {},
+    Z = {},
+> = ComponentStylePropWithResolvers<T, S, C, Z> & {
+    variants?: {
+        [key: string]: ComponentStylePropWithResolvers<T, S, C, Z>;
+    };
+};
+
+export type ComponentState =
+    | 'selected_disabled'
+    | 'selected'
+    | 'disabled'
+    | 'hovered'
+    | 'focused'
+    | 'pressed'
+    | string;
+
+export type ComponentSize<Z = {}> = Z & {
+    margin?: number | string;
+    marginBottom?: number | string;
+    marginEnd?: number | string;
+    marginHorizontal?: number | string;
+    marginLeft?: number | string;
+    marginRight?: number | string;
+    marginStart?: number | string;
+    marginTop?: number | string;
+    marginVertical?: number | string;
+
+    padding?: number | string;
+    paddingBottom?: number | string;
+    paddingEnd?: number | string;
+    paddingHorizontal?: number | string;
+    paddingLeft?: number | string;
+    paddingRight?: number | string;
+    paddingStart?: number | string;
+    paddingTop?: number | string;
+    paddingVertical?: number | string;
+
+    maxHeight?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    minWidth?: number | string;
+    height?: number | string;
+    width?: number | string;
+
+    borderBottomWidth?: number | string;
+    borderEndWidth?: number | string;
+    borderLeftWidth?: number | string;
+    borderRightWidth?: number | string;
+    borderStartWidth?: number | string;
+    borderTopWidth?: number | string;
+    borderWidth?: number | string;
+
+    borderBottomEndRadius?: number | string;
+    borderBottomLeftRadius?: number | string;
+    borderBottomRightRadius?: number | string;
+    borderBottomStartRadius?: number | string;
+    borderRadius?: number | string;
+    borderTopEndRadius?: number | string;
+    borderTopLeftRadius?: number | string;
+    borderTopRightRadius?: number | string;
+    borderTopStartRadius?: number | string;
+
+    fontSize?: number | string;
+    fontWeight?:
+        | 'normal'
+        | 'bold'
+        | '100'
+        | '200'
+        | '300'
+        | '400'
+        | '500'
+        | '600'
+        | '700'
+        | '800'
+        | '900'
+        | string;
+    letterSpacing?: number | string;
+    lineHeight?: number | string;
+};
+
+export type WithElements<T> = {
+    left?: T;
+    right?: T;
+};

package/types/theme.ts

@@ -0,0 +1,159 @@
+import type { StyleProp } from 'react-native';
+
+export type Breakpoints = {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+
+export type ITheme = {
+    light: MD3Theme;
+    dark: MD3Theme;
+    grid: {
+        breakpoints: Partial<Breakpoints>;
+        numberOfColumns: number;
+    };
+    resolveComponentStyles: (args: ResolveComponentStylesArgs) => StyleProp<any>;
+};
+
+export type MD3Theme = {
+    themeName: string;
+    dark: boolean;
+    animation: {
+        scale: number;
+        durations: Record<string, number>;
+    };
+    colors: MD3Colors;
+    typescale: MD3Typescale;
+    shapes: MD3Shapes;
+    spacings: Record<string, number>;
+    letterSpacings: Record<string, string | number>;
+    fontSizes: Record<string, string | number>;
+    fontWeights: Record<string, string | number>;
+    lineHeights: Record<string, string | number>;
+    elevations: Record<string, number>;
+};
+
+export type ResolveComponentStylesArgs = {
+    componentTheme: StyleProp<any>;
+    style: StyleProp<any>;
+    variant?: string;
+    states?: { [key: string]: boolean };
+    size?: string;
+};
+
+export type Font = {
+    fontFamily: string;
+    fontWeight?:
+        | 'normal'
+        | 'bold'
+        | '100'
+        | '200'
+        | '300'
+        | '400'
+        | '500'
+        | '600'
+        | '700'
+        | '800'
+        | '900';
+};
+
+export type MD3Colors = {
+    primary: string;
+    primaryContainer: string;
+    secondary: string;
+    secondaryContainer: string;
+    tertiary: string;
+    tertiaryContainer: string;
+    surface: string;
+    surfaceVariant: string;
+    surfaceDisabled: string;
+    background: string;
+    error: string;
+    errorContainer: string;
+    onPrimary: string;
+    onPrimaryContainer: string;
+    onSecondary: string;
+    onSecondaryContainer: string;
+    onTertiary: string;
+    onTertiaryContainer: string;
+    onSurface: string;
+    onSurfaceVariant: string;
+    onSurfaceDisabled: string;
+    onError: string;
+    onErrorContainer: string;
+    onBackground: string;
+    outline: string;
+    inverseSurface: string;
+    inverseOnSurface: string;
+    inversePrimary: string;
+    backdrop: string;
+    elevation: MD3ElevationColors;
+    lines: string;
+    palette: Record<string, string>;
+    opacity: Record<string, number>;
+    surfaceContainerHighest: string;
+    stateLayer: {};
+};
+
+export type MD3Shapes = {
+    corner: {
+        none: number;
+        extraSmall: number;
+        small: number;
+        medium: number;
+        large: number;
+        extraLarge: number;
+    };
+};
+
+export enum MD3TypescaleKey {
+    displayLarge = 'displayLarge',
+    displayMedium = 'displayMedium',
+    displaySmall = 'displaySmall',
+
+    headlineLarge = 'headlineLarge',
+    headlineMedium = 'headlineMedium',
+    headlineSmall = 'headlineSmall',
+
+    titleLarge = 'titleLarge',
+    titleMedium = 'titleMedium',
+    titleSmall = 'titleSmall',
+
+    labelLarge = 'labelLarge',
+    labelMedium = 'labelMedium',
+    labelSmall = 'labelSmall',
+
+    bodyLarge = 'bodyLarge',
+    bodyMedium = 'bodyMedium',
+    bodySmall = 'bodySmall',
+}
+
+export type MD3Type = {
+    fontFamily: string;
+    letterSpacing: number;
+    fontWeight: Font['fontWeight'];
+    lineHeight: number;
+    fontSize: number;
+};
+
+export type MD3Typescale = {
+    [key in MD3TypescaleKey]: MD3Type;
+};
+
+export type MD3Elevation = 0 | 1 | 2 | 3 | 4 | 5;
+
+export enum ElevationLevels {
+    'level0',
+    'level1',
+    'level2',
+    'level3',
+    'level4',
+    'level5',
+}
+
+export type MD3ElevationColors = {
+    [key in keyof typeof ElevationLevels]: string;
+};

package/utils/DocumentPicker/documentPicker.native.ts

@@ -0,0 +1,10 @@
+import { type DocumentPickerOptions, pick } from '@react-native-documents/picker';
+
+const pickMultiple = ({ allowMultiSelection = true, ...rest }: DocumentPickerOptions) =>
+    pick({ allowMultiSelection, ...rest });
+
+// to make sure only these 2 functions are available for all three platforms
+export default {
+    pickSingle: pick,
+    pickMultiple: pickMultiple,
+};

package/utils/DocumentPicker/documentPicker.ts

@@ -0,0 +1,76 @@
+import { Platform } from 'react-native';
+
+import type { DocumentPickerOptions, DocumentResult } from './types';
+
+const resolveFileData = (file: File): Promise<DocumentResult> => {
+    return new Promise((resolve, reject) => {
+        const mimeType = file.type;
+        const reader = new FileReader();
+
+        reader.onerror = () => {
+            reject(new Error(`Failed to read the selected media because the operation failed.`));
+        };
+        reader.onload = ({ target }) => {
+            const uri = (target as any).result;
+
+            resolve({
+                type: 'success',
+                uri,
+                mimeType,
+                name: file.name,
+                file: file,
+                lastModified: file.lastModified,
+                size: file.size,
+            });
+        };
+        // Read in the image file as a binary string.
+        reader.readAsDataURL(file);
+    });
+};
+
+const getDocumentAsyncWeb = async ({
+    type = '*/*',
+    multiple = false,
+}: DocumentPickerOptions): Promise<DocumentResult | DocumentResult[]> => {
+    // SSR guard
+    if (Platform.OS !== 'web') {
+        return { type: 'cancel' };
+    }
+
+    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');
+    }
+
+    document.body.appendChild(input);
+
+    return new Promise(resolve => {
+        input.addEventListener('change', () => {
+            if (input.files) {
+                const response: Promise<DocumentResult>[] = [];
+
+                Array.from(input.files).forEach(file => response.push(resolveFileData(file)));
+
+                return resolve(Promise.all(response));
+            } else {
+                resolve({ type: 'cancel' });
+            }
+
+            document.body.removeChild(input);
+        });
+
+        const event = new MouseEvent('click');
+        input.dispatchEvent(event);
+    });
+};
+
+export default {
+    pickSingle: ({ type }: DocumentPickerOptions) => getDocumentAsyncWeb({ type, multiple: false }),
+    pickMultiple: ({ type }: DocumentPickerOptions) =>
+        getDocumentAsyncWeb({ type, multiple: true }),
+};

package/utils/DocumentPicker/index.ts

@@ -0,0 +1,2 @@
+export { default as DocumentPicker } from './documentPicker';
+export type * from './types';

package/utils/DocumentPicker/types.ts

@@ -0,0 +1,28 @@
+import type {
+    DocumentPickerOptions as RNDocumentPickerOptions,
+    DocumentPickerResponse,
+} from '@react-native-documents/picker/lib/typescript';
+
+export type { types as documentTypes } from '@react-native-documents/picker';
+export type DocumentPickerOptions = Omit<RNDocumentPickerOptions, 'allowMultiSelection'> & {
+    /**
+     * Allows multiple files to be selected from the system UI.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * runs when the DocumentPicker is cancelled
+     *  currently, only supported on IOS and Android
+     */
+    onCancel?: () => void;
+    /**
+     * runs when the DocumentPicker is errored
+     */
+    onError?: (e: any) => void;
+};
+
+export type DocumentResult = Partial<DocumentPickerResponse> & {
+    mimeType?: string;
+    file?: File;
+    lastModified?: number;
+};

package/utils/addEventListener.tsx

@@ -0,0 +1,51 @@
+import type { EmitterSubscription, NativeEventSubscription } from 'react-native';
+
+export function addEventListener<
+    T extends {
+        addEventListener: (...args: any) => NativeEventSubscription | EmitterSubscription;
+    } & { removeEventListener?: (...args: any) => void } & {
+        remove?: (...args: any) => void;
+    },
+>(Module: T, ...rest: Parameters<typeof Module.addEventListener>) {
+    const [eventName, handler] = rest;
+
+    let removed = false;
+
+    const subscription = Module.addEventListener(eventName, handler) ?? {
+        remove: () => {
+            if (removed) {
+                return;
+            }
+
+            Module.removeEventListener?.(eventName, handler);
+            Module.remove?.(eventName, handler);
+            removed = true;
+        },
+    };
+
+    return subscription;
+}
+
+export function addListener<
+    T extends {
+        addListener: (...args: any) => EmitterSubscription;
+        removeEventListener: (...args: any) => void;
+    },
+>(Module: T, ...rest: Parameters<typeof Module.addListener>) {
+    const [eventName, handler] = rest;
+
+    let removed = false;
+
+    const subscription = Module.addListener(eventName, handler) ?? {
+        remove: () => {
+            if (removed) {
+                return;
+            }
+
+            Module.removeEventListener(eventName, handler);
+            removed = true;
+        },
+    };
+
+    return subscription;
+}

package/utils/backgroundContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+export const BackgroundContext = createContext<{
+    backgroundColor?: string;
+    color?: string;
+}>({
+    backgroundColor: undefined,
+    color: undefined,
+});

package/utils/color.ts

@@ -0,0 +1,22 @@
+import color from 'color';
+
+import { weakMemoized } from './lodash';
+
+export const resolveContrastColor = weakMemoized(
+    (
+        bgColor: string,
+        lightColor: string = '#fff',
+        darkColor: string = '#000',
+        isDarkMode?: boolean,
+    ) => {
+        let isLightColor = !isDarkMode;
+        try {
+            // TODO: Account for transparency.
+            isLightColor = color(bgColor).isLight();
+        } finally {
+            return isLightColor ? darkColor : lightColor;
+        }
+    },
+);
+
+export default color;

package/utils/compare/index.ts

@@ -0,0 +1,54 @@
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
+/**
+ * inlined Object.is polyfill to avoid requiring consumers ship their own
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+ */
+function is(x: any, y: any) {
+    // SameValue algorithm
+    if (x === y) {
+        // Steps 1-5, 7-10
+        // Steps 6.b-6.e: +0 != -0
+        return x !== 0 || 1 / x === 1 / y;
+    } else {
+        // Step 6.a: NaN == NaN
+        return x !== x && y !== y;
+    }
+}
+
+/**
+ * Performs equality by iterating through keys on an object and returning false
+ * when any key has values which are not strictly equal between the arguments.
+ * Returns true when the values of all keys are strictly equal.
+ */
+export function shallowCompare(objA?: unknown, objB?: unknown) {
+    if (is(objA, objB)) {
+        return true;
+    }
+
+    if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+        return false;
+    }
+
+    const keysA = Object.keys(objA);
+    const keysB = Object.keys(objB);
+
+    if (keysA.length !== keysB.length) {
+        return false;
+    }
+
+    // Test for A's keys different from B.
+    for (let i = 0; i < keysA.length; i++) {
+        if (
+            !hasOwnProperty.call(objB, keysA[i]) ||
+            !is(
+                (objA as Record<string, unknown>)[keysA[i]],
+                (objB as Record<string, unknown>)[keysA[i]],
+            )
+        ) {
+            return false;
+        }
+    }
+
+    return true;
+}

package/utils/composeEventHandlers.ts

@@ -0,0 +1,9 @@
+export default function composeEventHandlers<E>(
+    originalEventHandler?: null | ((event: E) => void),
+    ourEventHandler?: (event: E) => void,
+) {
+    return function handleEvent(event: E) {
+        originalEventHandler?.(event);
+        ourEventHandler?.(event);
+    };
+}

package/utils/createNumberMask/createNumberMask.ts

@@ -0,0 +1,98 @@
+import { escapeRegex } from '../escapeRegex';
+
+export type Mask = MaskArray | ((value?: string) => MaskArray);
+export type MaskArray = Array<MaskItem>;
+export type MaskItem = string | RegExp | [RegExp];
+
+export type Props = {
+    /** Character for thousands delimiter. Defaults to `"."` */
+    delimiter?: string;
+    /** Decimal precision. Defaults to `2` */
+    precision?: number;
+    /** Decimal separator character. Defaults to `","`  */
+    separator?: string;
+    prefix?: string | string[];
+    suffix?: string | string[];
+    getDelimiterOffset?: (index: number) => number;
+    allowNegative?: boolean;
+    optionalPrefix?: string | string[];
+};
+
+const joinIfStringArr = (value: string | string[]) =>
+    Array.isArray(value) ? value.join('') : value || '';
+
+export default function createNumberMask(props?: Props): Mask {
+    const {
+        delimiter = ',',
+        precision = 2,
+        prefix = [],
+        separator = '.',
+        suffix = [],
+        getDelimiterOffset = (_index: number) => 3,
+        allowNegative = true,
+    } = props || {};
+
+    return (value: string | number = '') => {
+        value = String(value);
+
+        // the first prefix will allow plus sign, minus sign(if allowNegative is true), and the prefix from the args
+        let firstPrefix: string | RegExp = new RegExp(
+            `[+${allowNegative ? '\\-' : ''}${escapeRegex(joinIfStringArr(prefix))}]`,
+            'g',
+        );
+
+        // if the first value already included, plus or minus sign, the value that comes after it should be the prefix
+        // otherwise, it means the first value has the prefix (doesnt matter if it's an array)
+        let secondPrefix: string | string[] = ['+', '-'].includes(value[0]) ? prefix : [];
+
+        const hasMinusSign = allowNegative && value[0] === '-';
+        const hasMinusSignOrPlusSign = hasMinusSign || value[0] === '+';
+        const isFirstValueNumber = !Number.isNaN(value[0]);
+
+        // if the first value that has been entered is a number and not plus or minus sign, the prefix should be displayed before that value
+        if (isFirstValueNumber && !hasMinusSignOrPlusSign) {
+            firstPrefix = '';
+            secondPrefix = prefix;
+        }
+
+        const shouldAddSeparatorOnMask = !!value && precision > 0 && !!separator;
+        const [normalizedValue = '', ...mantissa] =
+            shouldAddSeparatorOnMask || precision === 0 ? value.split(separator) : [value];
+        const numericValue = normalizedValue.replace(/\D+/g, '') || '';
+        const decimalLength = Math.max(
+            0,
+            Math.min(mantissa.join('').replace(/\D+/g, '').length, precision),
+        );
+
+        const mask: MaskArray = numericValue.split('').map(() => /\d/);
+
+        if (delimiter) {
+            let i = 0;
+            let elapsed = numericValue.length;
+
+            do {
+                const precisionOffset = 0;
+                const separatorOffset = 0;
+                const thousandOffset = getDelimiterOffset(i) + (delimiter ? 1 : 0);
+                elapsed -= getDelimiterOffset(i);
+
+                if (elapsed <= 0) {
+                    break;
+                }
+
+                const delimiterPosition =
+                    -precisionOffset - separatorOffset - i * thousandOffset - 3;
+
+                mask.splice(delimiterPosition, 0, delimiter);
+                i++;
+            } while (true);
+        }
+
+        const hasDecimalAlready = shouldAddSeparatorOnMask && value.includes(separator);
+        if (hasDecimalAlready) {
+            mask.push(separator, ...Array.from({ length: decimalLength }, () => /\d/));
+        }
+
+        return [firstPrefix, ...secondPrefix, ...mask, ...suffix];
+    };
+}

package/utils/createNumberMask/index.ts

@@ -0,0 +1,5 @@
+export {
+    default as createNumberMask,
+    type Props as CreateNumberMaskProps,
+    type Mask,
+} from './createNumberMask';

package/utils/createSyntheticEvent.ts

@@ -0,0 +1,31 @@
+export const createSyntheticEvent = <T extends Element, E extends Event>(
+    event: E,
+): React.SyntheticEvent<T, E> => {
+    let isDefaultPrevented = false;
+    let isPropagationStopped = false;
+    const preventDefault = () => {
+        isDefaultPrevented = true;
+        event.preventDefault();
+    };
+    const stopPropagation = () => {
+        isPropagationStopped = true;
+        event.stopPropagation();
+    };
+    return {
+        nativeEvent: event,
+        currentTarget: event.currentTarget as EventTarget & T,
+        target: event.target as EventTarget & T,
+        bubbles: event.bubbles,
+        cancelable: event.cancelable,
+        defaultPrevented: event.defaultPrevented,
+        eventPhase: event.eventPhase,
+        isTrusted: event.isTrusted,
+        preventDefault,
+        isDefaultPrevented: () => isDefaultPrevented,
+        stopPropagation,
+        isPropagationStopped: () => isPropagationStopped,
+        persist: () => {},
+        timeStamp: event.timeStamp,
+        type: event.type,
+    };
+};