react-native-molecules 0.5.0-beta.0

package/package.json

@@ -0,0 +1,114 @@
+{
+    "name": "react-native-molecules",
+    "version": "0.5.0-beta.0",
+    "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.debounce": "^4.0.8",
+        "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.debounce": "^4.0.7",
+        "@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"
+                }
+            ]
+        ]
+    }
+}

package/shortcuts-manager/EventsManager.tsx

@@ -0,0 +1,121 @@
+import { memo, useCallback, useEffect } from 'react';
+
+import {
+    useShortcutsManagerContextValueSelector,
+    useShortcutsManagerStoreRef,
+} from './ShortcutsManager/utils';
+import type { ShortcutEventDetail } from './types';
+import { calculateShortcutEventName, getPressedModifierKeys, normalizeKeys } from './utils';
+
+const defaultMatcher = (_e: KeyboardEvent, key: string | string[], details: ShortcutEventDetail) =>
+    normalizeKeys(key) === details.normalizedKey;
+
+const EventsManager = () => {
+    const { store, set: setShortcutsManagerStore } = useShortcutsManagerStoreRef();
+
+    const onKeyDown = useCallback(
+        (e: KeyboardEvent) => {
+            const modifierKeys = getPressedModifierKeys(e);
+            const normalizedKeys = normalizeKeys([e.key].concat(modifierKeys));
+
+            setShortcutsManagerStore(prev => ({
+                pressedKeys: [...prev.pressedKeys, e.key],
+            }));
+
+            let shouldPrevent = false;
+
+            Object.values(store.current.shortcuts).forEach(shortcut => {
+                if (shortcut.scope) {
+                    const shortcutScope = store.current.scopes[shortcut.scope];
+
+                    if (!shortcutScope) return;
+
+                    if (
+                        !(
+                            shortcutScope?.node === document.activeElement ||
+                            shortcutScope?.node?.contains(document.activeElement)
+                        )
+                    )
+                        return;
+                }
+
+                const matcher = shortcut.matcher || defaultMatcher;
+
+                const foundMatchedKeys = shortcut.keys.find(keyGroup =>
+                    matcher(e, keyGroup, {
+                        pressedKeys: [e.key].concat(modifierKeys),
+                        normalizedKey: normalizedKeys,
+                        modifiers: modifierKeys,
+                        key: e.key,
+                    }),
+                );
+
+                if (!foundMatchedKeys) return;
+
+                shouldPrevent = !!shortcut.preventDefault;
+
+                const event = new CustomEvent<ShortcutEventDetail>(
+                    calculateShortcutEventName(shortcut.name),
+                    {
+                        detail: {
+                            pressedKeys: [e.key].concat(modifierKeys),
+                            normalizedKey: normalizedKeys,
+                            modifiers: modifierKeys,
+                            key: e.key,
+                        },
+                    },
+                );
+
+                document.dispatchEvent(event);
+            });
+
+            if (shouldPrevent) {
+                e.preventDefault();
+            }
+        },
+        [setShortcutsManagerStore, store],
+    );
+
+    const onKeyUp = useCallback(
+        (e: KeyboardEvent) => {
+            e.preventDefault();
+
+            setShortcutsManagerStore(prev => ({
+                pressedKeys: prev.pressedKeys?.filter(key => key !== e.key),
+            }));
+        },
+        [setShortcutsManagerStore],
+    );
+
+    const onBlur = useCallback(() => {
+        setShortcutsManagerStore(() => ({
+            pressedKeys: [],
+        }));
+    }, [setShortcutsManagerStore]);
+
+    useEffect(() => {
+        document.addEventListener('keydown', onKeyDown);
+        document.addEventListener('keyup', onKeyUp);
+        document.addEventListener('blur', onBlur);
+
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+            document.removeEventListener('keyup', onKeyUp);
+            document.removeEventListener('blur', onBlur);
+        };
+    }, [onBlur, onKeyDown, onKeyUp]);
+
+    return null;
+};
+
+const EventManagerContainer = memo(() => {
+    const { isDisabled } = useShortcutsManagerContextValueSelector(state => ({
+        isDisabled: !!state.disabled,
+    }));
+
+    if (isDisabled) return null;
+
+    return <EventsManager />;
+});
+
+export default memo(EventManagerContainer);

package/shortcuts-manager/ShortcutsManager/ShortcutsManager.native.tsx

@@ -0,0 +1,9 @@
+import { memo } from 'react';
+
+import type { ShortcutsManagerProps } from './utils';
+
+const ShortcutsManager = ({ children }: ShortcutsManagerProps) => {
+    return <>{children}</>;
+};
+
+export default memo(ShortcutsManager);

package/shortcuts-manager/ShortcutsManager/ShortcutsManager.tsx

@@ -0,0 +1,58 @@
+import { memo, useContext, useEffect, useMemo, useRef } from 'react';
+
+import { keyBy } from '../../utils/lodash';
+import EventsManager from '../EventsManager';
+import type { Shortcut } from '../types';
+import {
+    ShortcutsManagerContext,
+    ShortcutsManagerContextProvider,
+    type ShortcutsManagerContextType,
+    type ShortcutsManagerProps,
+} from './utils';
+
+const _ShortcutsManager = ({ shortcuts, scopes, children }: ShortcutsManagerProps) => {
+    const shortcutsRef = useRef<Shortcut[]>(shortcuts || []);
+    const scopesRef = useRef(scopes);
+    const parentContextRef = useContext(ShortcutsManagerContext);
+
+    const contextValue = useMemo(() => {
+        const currentValue = {
+            shortcuts: keyBy(shortcutsRef.current, 'name'),
+            scopes: keyBy(scopesRef.current, 'name'),
+        } as ShortcutsManagerContextType;
+
+        if (!parentContextRef) return currentValue;
+
+        return {
+            shortcuts: {
+                ...currentValue.shortcuts,
+                ...parentContextRef.store.current.shortcuts,
+            },
+            scopes: {
+                ...currentValue.scopes,
+                ...parentContextRef.store.current.scopes,
+            },
+        } as ShortcutsManagerContextType;
+    }, [parentContextRef]);
+
+    // disable the parent event listener, we only need 1 listener
+    useEffect(() => {
+        if (!parentContextRef) return;
+
+        parentContextRef.set(() => ({ disabled: true }));
+
+        // if unmounted re-enable parent event listener
+        return () => {
+            parentContextRef.set(() => ({ disabled: false }));
+        };
+    }, [parentContextRef]);
+
+    return (
+        <ShortcutsManagerContextProvider value={contextValue}>
+            <EventsManager />
+            {children}
+        </ShortcutsManagerContextProvider>
+    );
+};
+
+export default memo(_ShortcutsManager);

package/shortcuts-manager/ShortcutsManager/index.tsx

@@ -0,0 +1,2 @@
+export { default as ShortcutsManager } from './ShortcutsManager';
+export * from './utils';

package/shortcuts-manager/ShortcutsManager/utils.tsx

@@ -0,0 +1,30 @@
+import type { Scope, Shortcut } from '../types';
+import { createFastContext } from '../../fast-context';
+import type { ReactNode } from 'react';
+
+export type ShortcutsManagerContextType = {
+    shortcuts: Record<string, Shortcut>;
+    scopes: Record<string, Scope>;
+    pressedKeys: string[];
+    disabled?: boolean;
+};
+
+const defaultValue = {
+    shortcuts: [],
+    scopes: [],
+    pressedKeys: [],
+} as unknown as ShortcutsManagerContextType;
+
+export const {
+    Provider: ShortcutsManagerContextProvider,
+    useContext: useShortcutsManagerContextSelector,
+    useContextValue: useShortcutsManagerContextValueSelector,
+    useStoreRef: useShortcutsManagerStoreRef,
+    Context: ShortcutsManagerContext,
+} = createFastContext<ShortcutsManagerContextType>(defaultValue);
+
+export type ShortcutsManagerProps = {
+    children: ReactNode;
+    shortcuts?: Shortcut[];
+    scopes?: Scope[];
+};

package/shortcuts-manager/index.tsx

@@ -0,0 +1,6 @@
+export * from './ShortcutsManager';
+export * from './types';
+export * from './useIsKeyPressed';
+export * from './useSetScopes';
+export * from './useShortcut';
+export * from './utils';

package/shortcuts-manager/types.ts

@@ -0,0 +1,24 @@
+export type Shortcut = {
+    name: string;
+    keys: (string | string[])[];
+    scope?: string;
+    preventDefault?: boolean;
+    matcher?: (e: KeyboardEvent, key: string | string[], details: ShortcutEventDetail) => boolean;
+};
+
+export type Scope = {
+    name: string;
+    /*
+     * HTMLElement
+     * this is currently the only way for now to get focustrap feature.
+     * TODO - find a solution with ref
+     * */
+    node?: Element | null;
+};
+
+export type ShortcutEventDetail = {
+    pressedKeys: string[];
+    normalizedKey: string;
+    modifiers: string[];
+    key: string;
+};

package/shortcuts-manager/useIsKeyPressed/index.tsx

@@ -0,0 +1 @@
+export { default as useIsKeyPress } from './useIsKeyPress';

package/shortcuts-manager/useIsKeyPressed/useIsKeyPress.tsx

@@ -0,0 +1,9 @@
+import { useShortcutsManagerContextValueSelector } from '../ShortcutsManager';
+
+const useIsKeyPress = (key: string) => {
+    return useShortcutsManagerContextValueSelector(
+        prev => !!prev.pressedKeys.find(pressedKey => pressedKey === key),
+    );
+};
+
+export default useIsKeyPress;

package/shortcuts-manager/useSetScopes/index.tsx

@@ -0,0 +1 @@
+export { default as useSetScopes } from './useSetScopes';

package/shortcuts-manager/useSetScopes/useSetScopes.native.tsx

@@ -0,0 +1,9 @@
+import { useCallback } from 'react';
+
+import type { Scope } from '../types';
+
+const useSetScopes = () => {
+    return useCallback((_newScopes: Scope[] | ((currentScopes: Scope[]) => Scope[])) => {}, []);
+};
+
+export default useSetScopes;

package/shortcuts-manager/useSetScopes/useSetScopes.tsx

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+
+import { keyBy } from '../../utils/lodash';
+import { useShortcutsManagerStoreRef } from '../ShortcutsManager/utils';
+import type { Scope } from '../types';
+
+const useSetScopes = () => {
+    const { set: setStore } = useShortcutsManagerStoreRef();
+
+    return useCallback(
+        (newScopes: Scope[] | ((currentScopes: Scope[]) => Scope[])) => {
+            setStore(prev => ({
+                scopes: keyBy(
+                    typeof newScopes === 'function'
+                        ? newScopes(Object.values(prev.scopes))
+                        : newScopes,
+                    'name',
+                ),
+            }));
+        },
+        [setStore],
+    );
+};
+
+export default useSetScopes;

package/shortcuts-manager/useShortcut/index.tsx

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

package/shortcuts-manager/useShortcut/types.ts

@@ -0,0 +1,3 @@
+import type { Shortcut, ShortcutEventDetail } from '../types';
+
+export type ShortcutCallbackArgs = ShortcutEventDetail & { shortcut: Shortcut; event: CustomEvent };

package/shortcuts-manager/useShortcut/useShortcut.native.tsx

@@ -0,0 +1,9 @@
+import type { Shortcut } from '../types';
+
+const useShortcut = (
+    _name: string,
+    _callback: (shortcut: Shortcut) => void,
+    _disabled: boolean = false,
+) => {};
+
+export default useShortcut;

package/shortcuts-manager/useShortcut/useShortcut.tsx

@@ -0,0 +1,61 @@
+import { useCallback, useEffect } from 'react';
+import useLatest from '../../hooks/useLatest';
+
+import { useShortcutsManagerStoreRef } from '../ShortcutsManager';
+import type { ShortcutEventDetail } from '../types';
+import { calculateShortcutEventName } from '../utils';
+import type { ShortcutCallbackArgs } from './types';
+
+const useShortcut = (
+    name: string,
+    callback: (args: ShortcutCallbackArgs) => void,
+    disabled: boolean = false,
+    capture: boolean = false,
+) => {
+    const { store } = useShortcutsManagerStoreRef();
+
+    const nameRef = useLatest(name);
+    const callbackRef = useLatest(callback);
+
+    const onCallback = useCallback(
+        (e: CustomEvent<ShortcutEventDetail>) => {
+            const shortcut = store.current.shortcuts[nameRef.current];
+
+            if (!shortcut) {
+                throw new Error(`Shortcut with name: ${nameRef.current} does not exist`);
+            }
+
+            const scope = store.current.scopes[shortcut.scope || ''];
+
+            if (shortcut.scope && !scope) return;
+
+            // if there is node, we check if one of the elements instead it is focused
+            if (
+                scope?.node &&
+                !(
+                    scope.node === document.activeElement ||
+                    scope.node.contains(document.activeElement)
+                )
+            )
+                return;
+
+            callbackRef.current({ ...e.detail, shortcut: shortcut, event: e });
+        },
+        [callbackRef, nameRef, store],
+    );
+
+    useEffect(() => {
+        if (disabled) return;
+
+        const eventName = calculateShortcutEventName(nameRef.current);
+
+        document.addEventListener(eventName, onCallback as (e: Event) => void, capture);
+
+        return () => {
+            document.removeEventListener(eventName, onCallback as (e: Event) => void, capture);
+        };
+        // eslint-disable-next-line
+    }, [onCallback, nameRef, disabled]);
+};
+
+export default useShortcut;

package/shortcuts-manager/utils.ts

@@ -0,0 +1,105 @@
+const MODIFIER_KEYS = ['meta', 'alt', 'shift', 'control'];
+
+export const isModifierKey = (pressedKey: string) => {
+    return MODIFIER_KEYS.includes(pressedKey);
+};
+
+// This file handles key-name discrepancies between browsers.
+// For the list of discrepancies, go to: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values.
+const mappings = new Map([
+    [' ', 'space'], // custom mapping
+    ['spacebar', 'space'],
+    ['scroll', 'scrolllock'],
+    ['del', 'delete'],
+    ['esc', 'escape'],
+    ['medianexttrack', 'mediatracknext'],
+    ['mediaprevioustrack', 'mediatrackprevious'],
+    ['volumeup', 'audiovolumeup'],
+    ['volumedown', 'audiovolumedown'],
+    ['volumemute', 'audiovolumemute'],
+    ['multiply', '*'],
+    ['add', '+'],
+    ['divide', '/'],
+    ['subtract', '-'],
+    ['left', 'arrowleft'],
+    ['right', 'arrowright'],
+    ['up', 'arrowup'],
+    ['down', 'arrowdown'],
+]);
+
+/**
+ * Get a single, normalized string from the list of the `KeyboardEvent.key` properties.
+ *
+ * @param {Array<string>} keys The list of the `KeyboardEvent.key` properties
+ * @returns {string}
+ */
+export const normalizeKeys = (keys: string | string[]): string => {
+    if (typeof keys === 'string') return keys.toLowerCase();
+
+    return keys
+        .map(key => {
+            const lowercaseKey = key.toLowerCase();
+
+            if (mappings.has(lowercaseKey)) {
+                return mappings.get(lowercaseKey) as string;
+            }
+
+            return lowercaseKey;
+        })
+        .sort()
+        .join('+');
+};
+
+/**
+ * Get every pressed modifier key from the performed `KeyboardEvent`.
+ *
+ * @private
+ * @param {KeyboardEvent} event The event object.
+ * @param {boolean} [mergeMetaKeys=false] If `true,` the function will return the "control" and "meta"
+ *                                        modifiers keys as the "control/meta" name. This allows creating
+ *                                        keyboard shortcuts with modifier key that trigger the shortcut
+ *                                        actions depend on the OS keyboard layout (the Meta key for macOS
+ *                                        and Control for non macOS system).
+ * @returns {string[]}
+ */
+export const getPressedModifierKeys = (event: KeyboardEvent, mergeMetaKeys = false) => {
+    const pressedModifierKeys = [];
+
+    if (event.altKey) {
+        pressedModifierKeys.push('alt');
+    }
+
+    if (mergeMetaKeys && (event.ctrlKey || event.metaKey)) {
+        pressedModifierKeys.push('control/meta');
+    } else {
+        if (event.ctrlKey) {
+            pressedModifierKeys.push('control');
+        }
+
+        if (event.metaKey) {
+            pressedModifierKeys.push('meta');
+        }
+    }
+
+    if (event.shiftKey) {
+        pressedModifierKeys.push('shift');
+    }
+
+    return pressedModifierKeys;
+};
+
+export const isKey = (pressedKey: string, key: string) =>
+    mappings.get(pressedKey.toLowerCase()) === key;
+
+export const isSpaceKey = (pressedKey: string) => isKey(pressedKey, 'space');
+
+export const isEnterKey = (pressedKey: string) => isKey(pressedKey, 'enter');
+
+export const isEscapeKey = (pressedKey: string) => isKey(pressedKey, 'escape');
+
+export const isTabKey = (pressedKey: string) => isKey(pressedKey, 'tab');
+
+export const shortcutEventPrefix = 'shortcut-event-';
+
+export const calculateShortcutEventName = (shortcutName: string) =>
+    `${shortcutEventPrefix}-${shortcutName}`;

package/styles/index.ts

@@ -0,0 +1,4 @@
+export { generateDarkThemeColors, MD3DarkTheme } from './themes/DarkTheme';
+export { generateLightThemeColors, MD3LightTheme } from './themes/LightTheme';
+export { tokens } from './themes/tokens';
+export { darkenBy, lightenBy } from './utils';