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

package/package.json

@@ -1,112 +1,96 @@
 {
-    "name": "react-native-molecules",
-    "version": "0.5.0-beta.3",
-    "author": "Thet Aung <thetaung.dev@gmail.com>",
-    "license": "MIT",
-    "main": "index.ts",
-    "files": [
-        "components",
-        "context-bridge",
-        "core",
-        "fast-context",
-        "hocs",
-        "hooks",
-        "shortcuts-manager",
-        "styles",
-        "types",
-        "utils",
-        "index.ts",
-        "!**/__tests__",
-        "!**/__fixtures__",
-        "!**/__mocks__"
-    ],
-    "scripts": {
-        "fix-typescript-output": "cd lib/typescript && mv src/* . && rm -rf src",
-        "example:expo": "pnpm --filter=expo-example run",
-        "start": "MOLECULES_ENV=storybook pnpm storybook",
-        "run:testcases": "pnpm workspace test-cases start",
-        "test": "MOLECULES_ENV=storybook jest && pnpm test-storybook",
-        "test-jest": "jest",
-        "bundle": "MOLECULES_ENV=release rm -rf dist && mkdir -p dist && npm pack --pack-destination=dist",
-        "do-release": "npm publish ./dist/react-native-molecules-$npm_package_version.tgz --access=public",
-        "release": "pnpm bundle && pnpm do-release",
-        "release:dev": "npm version prerelease --preid=dev && pnpm release --tag=dev",
-        "storybook": "MOLECULES_ENV=storybook storybook dev -p 6006",
-        "test-storybook": "test-storybook",
-        "coverage": "cp coverage/storybook/coverage-storybook.json coverage/coverage-storybook.json && npx nyc report --reporter=html -t coverage --report-dir coverage/lcov-report",
-        "test:coverage": "pnpm test-jest --coverage && pnpm test-storybook --coverage && pnpm coverage",
-        "build-storybook": "storybook build",
-        "chromatic:all": "MOLECULES_ENV=storybook npx chromatic --project-token=934368a7f6c9",
-        "chromatic": "MOLECULES_ENV=storybook pnpm chromatic:all --only-changed",
-        "perf": "npx reassure"
-    },
-    "dependencies": {
-        "@gorhom/portal": "^1.0.14",
-        "@react-native-vector-icons/feather": "^12.4.0",
-        "@react-native-vector-icons/material-design-icons": "^12.4.0",
-        "color": "^4.2.3",
-        "date-fns": "^4.1.0",
-        "eventemitter2": "^6.4.9",
-        "lodash.get": "^4.4.2",
-        "lodash.keyby": "^4.6.0",
-        "lodash.memoize": "^4.1.2",
-        "lodash.omitby": "^4.6.0",
-        "use-sync-external-store": "^1.2.0"
-    },
-    "peerDependencies": {
-        "@react-native-documents/picker": "^10.1.2",
-        "react": "19.1.0",
-        "react-native": "0.81.4",
-        "react-native-unistyles": "^3.0.15",
-        "react-native-web": "~0.21.1"
-    },
-    "devDependencies": {
-        "@react-native-documents/picker": "^10.1.2",
-        "@types/color": "^3.0.3",
-        "@types/jest": "^29.1.2",
-        "@types/lodash": "^4.17.13",
-        "@types/lodash.get": "^4.4.7",
-        "@types/lodash.keyby": "^4.6.7",
-        "@types/lodash.memoize": "^4.1.7",
-        "@types/lodash.omitby": "^4.6.7",
-        "@types/react": "~19.1.10",
-        "@types/use-sync-external-store": "^1.5.0",
-        "react": "19.1.0",
-        "react-native": "0.81.4",
-        "react-native-builder-bob": "^0.17.1",
-        "react-native-unistyles": "^3.0.15",
-        "react-native-web": "~0.21.1"
-    },
-    "eslintIgnore": [
-        "node_modules/",
-        "lib/",
-        "test-cases/node_modules",
-        "dist",
-        "cache"
-    ],
-    "react-native-builder-bob": {
-        "source": "src",
-        "output": "lib",
-        "targets": [
-            [
-                "commonjs",
-                {
-                    "configFile": true
-                }
-            ],
-            [
-                "module",
-                {
-                    "configFile": true
-                }
-            ],
-            [
-                "typescript",
-                {
-                    "project": "tsconfig.build.json",
-                    "rootDir": "src"
-                }
-            ]
-        ]
-    }
-}
+  "name": "react-native-molecules",
+  "version": "0.5.0-beta.31",
+  "author": "Thet Aung <thetaung.dev@gmail.com>",
+  "license": "MIT",
+  "main": "index.ts",
+  "sideEffects": [
+    "components/DatePicker/context.tsx",
+    "components/DatePickerInline/store.tsx",
+    "components/List/context.tsx",
+    "components/Select/context.tsx",
+    "components/TimePicker/context.tsx",
+    "components/Popover/common.ts"
+  ],
+  "files": [
+    "components",
+    "context-bridge",
+    "core",
+    "fast-context",
+    "hocs",
+    "hooks",
+    "shortcuts-manager",
+    "styles",
+    "types",
+    "utils",
+    "index.ts",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "dependencies": {
+    "@gorhom/portal": "^1.0.14",
+    "@radix-ui/react-compose-refs": "^1.1.2",
+    "@react-native-vector-icons/feather": "^12.4.0",
+    "@react-native-vector-icons/material-design-icons": "^12.4.0",
+    "color": "^4.2.3",
+    "date-fns": "^4.1.0",
+    "eventemitter2": "^6.4.9",
+    "flubber": "^0.4.2",
+    "use-sync-external-store": "^1.2.0",
+    "@react-native-molecules/utils": "^1.0.0-beta.6"
+  },
+  "peerDependencies": {
+    "@react-native-documents/picker": "^10.1.2",
+    "react": ">=19",
+    "react-native": "0.81.4",
+    "react-native-svg": ">=12.1.0",
+    "react-native-unistyles": "^3.0.22",
+    "react-native-web": "~0.21.1",
+    "react-native-reanimated": ">=4.0.0",
+    "react-native-redash": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/flubber": "^0.4.0",
+    "react-native-svg": "^15.10.1",
+    "@react-native-documents/picker": "^10.1.2",
+    "@types/color": "^3.0.3",
+    "@types/jest": "^29.1.2",
+    "@types/react": "~19.1.10",
+    "@types/use-sync-external-store": "^1.5.0",
+    "react": "19.1.0",
+    "react-native": "0.81.4",
+    "react-native-builder-bob": "^0.17.1",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-unistyles": "^3.2.4",
+    "react-native-web": "~0.21.1"
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/",
+    "test-cases/node_modules",
+    "dist",
+    "cache"
+  ],
+  "scripts": {
+    "fix-typescript-output": "cd lib/typescript && mv src/* . && rm -rf src",
+    "example:expo": "pnpm --filter=expo-example run",
+    "start": "MOLECULES_ENV=storybook pnpm storybook",
+    "run:testcases": "pnpm workspace test-cases start",
+    "test": "MOLECULES_ENV=storybook jest && pnpm test-storybook",
+    "test-jest": "jest",
+    "bundle": "MOLECULES_ENV=release rm -rf dist && mkdir -p dist && pnpm pack --pack-destination=dist",
+    "do-release": "npm publish ./dist/react-native-molecules-$npm_package_version.tgz --access=public",
+    "release": "pnpm bundle && pnpm do-release",
+    "release:dev": "npm version prerelease --preid=dev --tag-version-prefix=\"react-native-molecules-v\" && pnpm release --tag=dev",
+    "release:beta": "npm version prerelease --preid=beta --tag-version-prefix=\"react-native-molecules-v\" && pnpm release --tag=beta",
+    "storybook": "MOLECULES_ENV=storybook storybook dev -p 6006",
+    "test-storybook": "test-storybook",
+    "coverage": "cp coverage/storybook/coverage-storybook.json coverage/coverage-storybook.json && npx nyc report --reporter=html -t coverage --report-dir coverage/lcov-report",
+    "test:coverage": "pnpm test-jest --coverage && pnpm test-storybook --coverage && pnpm coverage",
+    "build-storybook": "storybook build",
+    "chromatic:all": "MOLECULES_ENV=storybook npx chromatic --project-token=934368a7f6c9",
+    "chromatic": "MOLECULES_ENV=storybook pnpm chromatic:all --only-changed",
+    "perf": "npx reassure"
+  }
+}

package/shortcuts-manager/ShortcutsManager/ShortcutsManager.tsx

@@ -1,6 +1,6 @@
+import { keyBy } from '@react-native-molecules/utils/helpers/lodash';
 import { memo, useContext, useEffect, useMemo, useRef } from 'react';
 
-import { keyBy } from '../../utils/lodash';
 import EventsManager from '../EventsManager';
 import type { Shortcut } from '../types';
 import {
@@ -10,9 +10,12 @@ import {
     type ShortcutsManagerProps,
 } from './utils';
 
+const defaultScopes: ShortcutsManagerProps['scopes'] = [];
+const defaultShortcuts: Shortcut[] = [];
+
 const _ShortcutsManager = ({ shortcuts, scopes, children }: ShortcutsManagerProps) => {
-    const shortcutsRef = useRef<Shortcut[]>(shortcuts || []);
-    const scopesRef = useRef(scopes);
+    const shortcutsRef = useRef<Shortcut[]>(shortcuts || defaultShortcuts);
+    const scopesRef = useRef(scopes || defaultScopes);
     const parentContextRef = useContext(ShortcutsManagerContext);
 
     const contextValue = useMemo(() => {

package/shortcuts-manager/ShortcutsManager/utils.tsx

@@ -1,6 +1,6 @@
+import { createFastContext } from '@react-native-molecules/utils/fast-context';
 import type { ReactNode } from 'react';
 
-import { createFastContext } from '../../fast-context';
 import type { Scope, Shortcut } from '../types';
 
 export type ShortcutsManagerContextType = {

package/shortcuts-manager/useSetScopes/useSetScopes.tsx

@@ -1,6 +1,6 @@
+import { keyBy } from '@react-native-molecules/utils/helpers/lodash';
 import { useCallback } from 'react';
 
-import { keyBy } from '../../utils/lodash';
 import { useShortcutsManagerStoreRef } from '../ShortcutsManager/utils';
 import type { Scope } from '../types';
 

package/shortcuts-manager/useShortcut/useShortcut.tsx

@@ -1,6 +1,6 @@
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import { useCallback, useEffect } from 'react';
 
-import useLatest from '../../hooks/useLatest';
 import { useShortcutsManagerStoreRef } from '../ShortcutsManager';
 import type { ShortcutEventDetail } from '../types';
 import { calculateShortcutEventName } from '../utils';

package/styles/shadow.ts

@@ -8,7 +8,8 @@ export const inputRange: MD3Elevation[] = [0, 1, 2, 3, 4, 5];
 export const shadowHeight = [0, 1, 2, 4, 6, 8];
 export const shadowRadius = [0, 3, 6, 8, 10, 12];
 
-export default function shadow(elevation: number) {
+export default function shadow(_elevation: number) {
+    const elevation = typeof _elevation === 'number' ? (_elevation > 5 ? 5 : _elevation) : 0;
     return {
         shadowColor: MD3_SHADOW_COLOR,
         shadowOpacity: elevation ? MD3_SHADOW_OPACITY : 0,

package/styles/themes/LightTheme.tsx

@@ -25,7 +25,7 @@ export const generateLightThemeColors = (
         error: palette.error40,
         errorContainer: palette.error90,
         onPrimary: palette.primary100,
-        onPrimaryContainer: palette.primary10,
+        onPrimaryContainer: palette.primary30,
         onSecondary: palette.secondary100,
         onSecondaryContainer: palette.secondary10,
         onTertiary: palette.tertiary100,

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/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/extractTextStyles.ts

@@ -1,7 +1,6 @@
+import { memoize } from '@react-native-molecules/utils/helpers/lodash';
 import type { TextStyle } from 'react-native';
 
-import { memoize } from './lodash';
-
 const textStyleProps = [
     'color',
     'fontFamily',

package/utils/formatNumberWithMask/formatNumberWithMask.ts

@@ -1,5 +1,6 @@
+import { isNil } from '@react-native-molecules/utils/helpers/lodash';
+
 import { createNumberMask, type CreateNumberMaskProps } from '../createNumberMask';
-import { isNil } from '../lodash';
 import { formatWithMask } from './formatWithMask';
 
 export type FormatNumberWithMaskProps = CreateNumberMaskProps & {

package/utils/index.ts

@@ -1,7 +1,5 @@
 export { addEventListener, addListener } from './addEventListener';
 export { BackgroundContext } from './backgroundContext';
-export { default as color, resolveContrastColor } from './color';
-export * from './compare';
 export { default as composeEventHandlers } from './composeEventHandlers';
 export { createNumberMask, type CreateNumberMaskProps } from './createNumberMask';
 export * from './createSyntheticEvent';
@@ -16,5 +14,4 @@ export {
     normalizeToNumberString,
     type NormalizeToNumberStringProps,
 } from './normalizeToNumberString';
-export { Repository } from './repository';
 export * from './resolveStateVariant';

package/utils/normalizeToNumberString/normalizeToNumberString.ts

@@ -1,4 +1,4 @@
-import { isNil } from '../lodash';
+import { isNil } from '@react-native-molecules/utils/helpers/lodash';
 
 export type NormalizeToNumberStringProps = {
     text: string;

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);