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

package/components/TimePickerField/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import TimePickerFieldDefault from './TimePickerField';
 
-registerMoleculesComponents({
-    TimePickerField: TimePickerFieldDefault,
-});
-
 export const TimePickerField = getRegisteredComponentWithFallback(
     'TimePickerField',
     TimePickerFieldDefault,

package/components/TimePickerField/utils.ts

@@ -5,17 +5,16 @@ export declare type MaskItem = string | RegExp | [RegExp];
 export declare type MaskArray = Array<MaskItem>;
 export declare type Mask = MaskArray | ((value?: string) => MaskArray);
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const timepickerFieldStylesDefault = StyleSheet.create({
     root: {},
 });
 
-registerComponentsStyles({
-    TimePickerField: timepickerFieldStylesDefault,
-});
-
-export const styles = getRegisteredMoleculesComponentStyles('TimePickerField');
+export const styles = getRegisteredComponentStylesWithFallback(
+    'TimePickerField',
+    timepickerFieldStylesDefault,
+);
 
 export const timeMask24Hour: Mask = (text: string = '') => {
     const cleanTime = text.replace(/\D+/g, '');

package/components/TimePickerModal/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import TimePickerModalDefault from './TimePickerModal';
 
-registerMoleculesComponents({
-    TimePickerModal: TimePickerModalDefault,
-});
-
 export const TimePickerModal = getRegisteredComponentWithFallback(
     'TimePickerModal',
     TimePickerModalDefault,

package/components/TimePickerModal/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const timepickerModalStylesDefault = StyleSheet.create(theme => ({
     keyboardView: {
@@ -41,8 +41,7 @@ const timepickerModalStylesDefault = StyleSheet.create(theme => ({
     fill: { flex: 1 },
 }));
 
-registerComponentsStyles({
-    TimePickerModal: timepickerModalStylesDefault,
-});
-
-export const styles = getRegisteredMoleculesComponentStyles('TimePickerModal');
+export const styles = getRegisteredComponentStylesWithFallback(
+    'TimePickerModal',
+    timepickerModalStylesDefault,
+);

package/components/Tooltip/index.tsx

@@ -1,20 +1,16 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import TooltipComponent from './Tooltip';
-import TooltipTrigger from './TooltipTrigger';
 import TooltipContent from './TooltipContent';
+import TooltipTrigger from './TooltipTrigger';
 
 export const TooltipDefault = Object.assign(TooltipComponent, {
     Trigger: TooltipTrigger,
     Content: TooltipContent,
 });
 
-registerMoleculesComponents({
-    Tooltip: TooltipDefault,
-});
-
 export const Tooltip = getRegisteredComponentWithFallback('Tooltip', TooltipDefault);
 
-export { Props as TooltipProps } from './Tooltip';
-export { Props as TooltipTriggerProps } from './TooltipTrigger';
-export { Props as TooltipContentProps } from './TooltipContent';
+export type { Props as TooltipProps } from './Tooltip';
+export type { Props as TooltipContentProps } from './TooltipContent';
+export type { Props as TooltipTriggerProps } from './TooltipTrigger';
 export { tooltipStyles } from './utils';

package/components/Tooltip/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const tooltipStylesDefault = StyleSheet.create(theme => ({
     content: {
@@ -14,8 +14,7 @@ const tooltipStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Tooltip: tooltipStylesDefault,
-});
-
-export const tooltipStyles = getRegisteredMoleculesComponentStyles('Tooltip');
+export const tooltipStyles = getRegisteredComponentStylesWithFallback(
+    'Tooltip',
+    tooltipStylesDefault,
+);

package/components/TouchableRipple/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import TouchableRippleDefault from './TouchableRipple';
 
-registerMoleculesComponents({
-    TouchableRipple: TouchableRippleDefault,
-});
-
 export const TouchableRipple = getRegisteredComponentWithFallback(
     'TouchableRipple',
     TouchableRippleDefault,

package/components/TouchableRipple/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const touchableRippleStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -8,8 +8,7 @@ const touchableRippleStylesDefault = StyleSheet.create(theme => ({
     } as any,
 }));
 
-registerComponentsStyles({
-    TouchableRipple: touchableRippleStylesDefault,
-});
-
-export const touchableRippleStyles = getRegisteredMoleculesComponentStyles('TouchableRipple');
+export const touchableRippleStyles = getRegisteredComponentStylesWithFallback(
+    'TouchableRipple',
+    touchableRippleStylesDefault,
+);

package/components/VerticalDivider/VerticalDivider.tsx

@@ -1,8 +1,8 @@
 import { memo } from 'react';
-import { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
+import { View, type ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 export type Props = Omit<ViewProps, 'children'> & {
     /**
@@ -21,7 +21,6 @@ export type Props = Omit<ViewProps, 'children'> & {
      *  Horizontal spacing of the Divider
      */
     spacing?: number;
-    style?: StyleProp<ViewStyle>;
 };
 
 /**
@@ -70,9 +69,9 @@ const VerticalDivider = ({
             style={[
                 verticalDividerStyles.root,
                 style,
-                topInset && { marginTop: topInset },
-                bottomInset && { marginBottom: bottomInset },
-                spacing && { marginHorizontal: spacing },
+                topInset ? { marginTop: topInset } : undefined,
+                bottomInset ? { marginBottom: bottomInset } : undefined,
+                spacing ? { marginHorizontal: spacing } : undefined,
             ]}
         />
     );
@@ -93,7 +92,9 @@ export const verticalDividerStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('VerticalDivider', verticalDividerStylesDefault);
-export const verticalDividerStyles = getRegisteredMoleculesComponentStyles('HorizontalDivider');
+export const verticalDividerStyles = getRegisteredComponentStylesWithFallback(
+    'VerticalDivider',
+    verticalDividerStylesDefault,
+);
 
 export default memo(VerticalDivider);

package/components/VerticalDivider/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import VerticalDividerDefault from './VerticalDivider';
 
-registerMoleculesComponents({
-    VerticalDivider: VerticalDividerDefault,
-});
-
 export const VerticalDivider = getRegisteredComponentWithFallback(
     'VerticalDivider',
     VerticalDividerDefault,

package/core/componentsRegistry.ts

@@ -1,18 +1,13 @@
-import EventEmitter, {
-    type ConstructorOptions,
-    type event as Event,
-    type eventNS,
-} from 'eventemitter2';
 import type { ComponentType } from 'react';
 
-interface RepositoryConstructor<T> extends ConstructorOptions {
+interface RepositoryConstructor<T> {
     onRegister?: (arg: T, name: string, registery: Record<string, T>) => T;
     name?: string;
 }
 
 let id = Date.now();
 
-export class Repository<T> extends EventEmitter {
+export class Repository<T> {
     private registry: Record<string, T> = {};
     readonly #name!: string;
 
@@ -29,9 +24,7 @@ export class Repository<T> extends EventEmitter {
     constructor({
         onRegister = arg => arg,
         name = Repository.uniqueId,
-        ...options
     }: RepositoryConstructor<T> = {}) {
-        super(options);
         this.#onRegister = onRegister;
         this.#name = name;
     }
@@ -40,11 +33,6 @@ export class Repository<T> extends EventEmitter {
         return !!this.registry[itemName];
     };
 
-    emit(event: eventNS | Event, ...values: any[]) {
-        event = typeof event === 'string' ? `${this.#name}::event` : event;
-        return super.emit(event, ...values);
-    }
-
     /**
      * Register a item with the src.
      */
@@ -58,8 +46,6 @@ export class Repository<T> extends EventEmitter {
             ...this.registry,
             [itemName]: updatedItem,
         };
-
-        this.emit('item_registered', itemName);
     };
 
     /**
@@ -92,17 +78,14 @@ export class Repository<T> extends EventEmitter {
 
 export const componentsRepository = new Repository<Record<string, any>>({
     name: 'Components_Repository',
-    maxListeners: 0,
 });
 
 export const componentsStylesRepository = new Repository<Record<string, any>>({
     name: 'Components_Styles_Repository',
-    maxListeners: 0,
 });
 
 export const componentsUtilsRepository = new Repository<Record<string, any>>({
     name: 'Components_Utils_Repository',
-    maxListeners: 0,
 });
 
 export const registerMoleculesComponent = componentsRepository.registerOne;
@@ -162,3 +145,32 @@ export function getRegisteredComponentWithFallback<T extends ComponentType<any>>
 ): T {
     return (getRegisteredMoleculesComponent(name) ?? defaultComponent) as T;
 }
+
+/**
+ * Gets a registered component with a fallback to the default component
+ * @param name The name of the component to retrieve
+ * @param defaultStyles The default styles to use as fallback
+ * @returns The registered styles or the default styles
+ */
+export function getRegisteredComponentStylesWithFallback<T extends unknown>(
+    name: string,
+    defaultStyles: T,
+): T {
+    return (getRegisteredMoleculesComponentStyles(name) ?? defaultStyles) as T;
+}
+
+/**
+ * Gets a registered component with a fallback to the default component
+ * @param name The name of the component to retrieve
+ * @param defaultUtils The default utils to use as fallback
+ * @returns The registered utils or the default utils
+ */
+export function getRegisteredComponentUtilsWithFallback<T extends unknown>(
+    name: string,
+    defaultUtils: T,
+    key?: string,
+): T {
+    return key
+        ? (((getRegisteredComponentUtils(name) as Record<string, any>)?.[key] ?? defaultUtils) as T)
+        : ((getRegisteredComponentUtils(name) ?? defaultUtils) as T);
+}

package/hooks/index.tsx

@@ -2,7 +2,6 @@
 
 export * from './useActionState';
 export * from './useActive';
-export { default as useBreakpoints } from './useBreakpoints';
 export { default as useColorMode } from './useColorMode';
 export { useContrastColor } from './useContrastColor';
 export { default as useControlledValue } from './useControlledValue';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-molecules",
-    "version": "0.5.0-beta.0",
+    "version": "0.5.0-beta.2",
     "author": "Thet Aung <thetaung.dev@gmail.com>",
     "license": "MIT",
     "main": "index.ts",
@@ -47,7 +47,6 @@
         "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",
@@ -66,7 +65,6 @@
         "@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",

package/shortcuts-manager/ShortcutsManager/utils.tsx

@@ -1,7 +1,8 @@
-import type { Scope, Shortcut } from '../types';
-import { createFastContext } from '../../fast-context';
 import type { ReactNode } from 'react';
 
+import { createFastContext } from '../../fast-context';
+import type { Scope, Shortcut } from '../types';
+
 export type ShortcutsManagerContextType = {
     shortcuts: Record<string, Shortcut>;
     scopes: Record<string, Scope>;

package/shortcuts-manager/useShortcut/index.tsx

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

package/shortcuts-manager/useShortcut/useShortcut.tsx

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

package/utils/lodash.ts

@@ -1,5 +1,4 @@
 import memoize from 'lodash.memoize';
-export { default as debounce } from 'lodash.debounce';
 export { default as get } from 'lodash.get';
 export { default as keyBy } from 'lodash.keyby';
 export { default as memoize } from 'lodash.memoize';

package/utils/repository.ts

@@ -1,19 +1,11 @@
-import EventEmitter, {
-    type ConstructorOptions,
-    type event as Event,
-    type eventNS,
-} from 'eventemitter2';
-
-import { debounce } from './lodash';
-
-interface RepositoryConstructor<T> extends ConstructorOptions {
+interface RepositoryConstructor<T> {
     onRegister?: (arg: T, name: string, registery: Record<string, T>) => T;
     name?: string;
 }
 
 let id = Date.now();
 
-export class Repository<T> extends EventEmitter {
+export class Repository<T> {
     private registry: Record<string, T> = {};
     readonly #name!: string;
 
@@ -30,9 +22,7 @@ export class Repository<T> extends EventEmitter {
     constructor({
         onRegister = arg => arg,
         name = Repository.uniqueId,
-        ...options
     }: RepositoryConstructor<T> = {}) {
-        super(options);
         this.#onRegister = onRegister;
         this.#name = name;
     }
@@ -41,11 +31,6 @@ export class Repository<T> extends EventEmitter {
         return !!this.registry[itemName];
     };
 
-    emit(event: eventNS | Event, ...values: any[]) {
-        event = typeof event === 'string' ? `${this.#name}::event` : event;
-        return super.emit(event, ...values);
-    }
-
     /**
      * Register a item with the src.
      */
@@ -57,8 +42,6 @@ export class Repository<T> extends EventEmitter {
             ...this.registry,
             [itemName]: updatedItem,
         };
-
-        this.emit('item_registered', itemName);
     };
 
     /**
@@ -67,37 +50,4 @@ export class Repository<T> extends EventEmitter {
     getAll = () => {
         return this.registry;
     };
-
-    /**
-     * Register a listener to the module registry.
-     * Return value returns a function that removes the listener.
-     */
-    listen = (
-        callback: (events: string[]) => void,
-        { throttle = 100 }: { throttle?: number } = {},
-    ) => {
-        let cached: string[] = [];
-
-        const wrappedCallback = () => {
-            callback(cached);
-            cached = [];
-        };
-
-        const debouncedCallback = !throttle
-            ? wrappedCallback
-            : debounce(wrappedCallback, Math.abs(throttle), {
-                  trailing: true,
-                  leading: false,
-              });
-
-        const handledCallback = (itemName: string) => {
-            cached.push(itemName);
-            debouncedCallback();
-        };
-
-        this.on('item_registered', handledCallback);
-        return () => {
-            this.off('item_registered', handledCallback);
-        };
-    };
 }

package/utils/tokenStylesParser.ts

@@ -2,6 +2,8 @@ import { StyleSheet } from 'react-native-unistyles';
 
 export const tokenStylesParser = StyleSheet.create(theme => ({
     getColor: (color: string | undefined, propertyName: string = 'color') => ({
-        ...(color ? { [propertyName]: theme.colors[color] ?? color } : {}),
+        ...(color
+            ? { [propertyName]: theme.colors[color as keyof typeof theme.colors] ?? color }
+            : {}),
     }),
 }));

package/hooks/useBreakpoints.tsx

@@ -1,7 +0,0 @@
-import { useTheme } from './useTheme';
-
-const useBreakpoints = () => {
-    return useTheme().grid.breakpoints;
-};
-
-export default useBreakpoints;