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

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,4 +1,4 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import TooltipComponent from './Tooltip';
 import TooltipContent from './TooltipContent';
 import TooltipTrigger from './TooltipTrigger';
@@ -8,10 +8,6 @@ export const TooltipDefault = Object.assign(TooltipComponent, {
     Content: TooltipContent,
 });
 
-registerMoleculesComponents({
-    Tooltip: TooltipDefault,
-});
-
 export const Tooltip = getRegisteredComponentWithFallback('Tooltip', TooltipDefault);
 
 export type { Props as TooltipProps } from './Tooltip';

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-molecules",
-    "version": "0.5.0-beta.1",
+    "version": "0.5.0-beta.3",
     "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/utils/extractPropertiesFromStyles.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+// TODO - abstract this
+export function extractPropertiesFromStyles(
+    _objectsArray: Record<string, any>,
+    propertiesToExtract: string[],
+) {
+    const extracted: Record<string, any> = {};
+
+    const objectsArray = StyleSheet.flatten(_objectsArray);
+
+    for (let i = objectsArray.length - 1; i >= 0; i--) {
+        const obj = objectsArray[i];
+
+        for (const prop of propertiesToExtract) {
+            if (!obj) continue;
+            if (prop in obj) {
+                // @ts-ignore
+                extracted[prop] = obj[prop];
+            }
+        }
+    }
+
+    return extracted;
+}

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