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

package/components/Drawer/Collapsible/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../../core';
 
 export const drawerCollapsibleStylesDefault = StyleSheet.create({
     root: {},
@@ -31,19 +31,19 @@ export const drawerCollapsibleItemContentStylesDefault = StyleSheet.create({
     root: {},
 });
 
-registerComponentsStyles({
-    Drawer_Collapsible: drawerCollapsibleStylesDefault,
-    Drawer_CollapsibleItem: drawerCollapsibleItemStylesDefault,
-    Drawer_CollapsibleItem_Header: drawerCollapsibleItemHeaderStylesDefault,
-    Drawer_CollapsibleItem_Content: drawerCollapsibleItemContentStylesDefault,
-});
-
-export const drawerCollapsibleStyles = getRegisteredMoleculesComponentStyles('Drawer_Collapsible');
-export const drawerCollapsibleItemStyles =
-    getRegisteredMoleculesComponentStyles('Drawer_CollapsibleItem');
-export const drawerCollapsibleItemHeaderStyles = getRegisteredMoleculesComponentStyles(
+export const drawerCollapsibleStyles = getRegisteredComponentStylesWithFallback(
+    'Drawer_Collapsible',
+    drawerCollapsibleStylesDefault,
+);
+export const drawerCollapsibleItemStyles = getRegisteredComponentStylesWithFallback(
+    'Drawer_CollapsibleItem',
+    drawerCollapsibleItemStylesDefault,
+);
+export const drawerCollapsibleItemHeaderStyles = getRegisteredComponentStylesWithFallback(
     'Drawer_CollapsibleItem_Header',
+    drawerCollapsibleItemHeaderStylesDefault,
 );
-export const drawerCollapsibleItemContentStyles = getRegisteredMoleculesComponentStyles(
+export const drawerCollapsibleItemContentStyles = getRegisteredComponentStylesWithFallback(
     'Drawer_CollapsibleItem_Content',
+    drawerCollapsibleItemContentStylesDefault,
 );

package/components/Drawer/Drawer.tsx

@@ -2,7 +2,7 @@ import { memo, type ReactElement } from 'react';
 import { View, type ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { useSubcomponents } from '../../hooks';
 
 export type Props = Omit<ViewProps, 'children'> & {
@@ -37,7 +37,6 @@ const drawerStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('Drawer', drawerStylesDefault);
-export const drawerStyles = getRegisteredMoleculesComponentStyles('Drawer');
+export const drawerStyles = getRegisteredComponentStylesWithFallback('Drawer', drawerStylesDefault);
 
 export default memo(Drawer);

package/components/Drawer/DrawerContent.tsx

@@ -2,7 +2,7 @@ import { type ComponentType, memo } from 'react';
 import { ScrollView, type ScrollViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 export type Props = ScrollViewProps & {
     /**
@@ -27,8 +27,10 @@ const drawerContentStylesDefault = StyleSheet.create(theme => ({
         flex: 1,
     },
 }));
-registerComponentStyles('Drawer_Content', drawerContentStylesDefault);
-export const drawerContentStyles = getRegisteredMoleculesComponentStyles('Drawer_Content');
+export const drawerContentStyles = getRegisteredComponentStylesWithFallback(
+    'Drawer_Content',
+    drawerContentStylesDefault,
+);
 
 DrawerContent.displayName = 'Drawer_Content';
 

package/components/Drawer/DrawerFooter.tsx

@@ -2,7 +2,7 @@ import { memo } from 'react';
 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 = ViewProps & {};
 
@@ -20,8 +20,9 @@ const drawerFooterStylesDefault = StyleSheet.create({
     root: {},
 });
 
-registerComponentStyles('Drawer_Footer', drawerFooterStylesDefault);
-
-export const drawerFooterStyles = getRegisteredMoleculesComponentStyles('Drawer_Footer');
+export const drawerFooterStyles = getRegisteredComponentStylesWithFallback(
+    'Drawer_Footer',
+    drawerFooterStylesDefault,
+);
 
 export default DrawerFooter;

package/components/Drawer/DrawerHeader.tsx

@@ -2,7 +2,7 @@ import { memo } from 'react';
 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 = ViewProps & {};
 
@@ -20,8 +20,9 @@ const drawerHeaderStylesDefault = StyleSheet.create({
     root: {},
 });
 
-registerComponentStyles('Drawer_Header', drawerHeaderStylesDefault);
-
-export const drawerHeaderStyles = getRegisteredMoleculesComponentStyles('Drawer_Header');
+export const drawerHeaderStyles = getRegisteredComponentStylesWithFallback(
+    'Drawer_Header',
+    drawerHeaderStylesDefault,
+);
 
 export default DrawerHeader;

package/components/Drawer/DrawerItem.tsx

@@ -2,7 +2,7 @@ import { forwardRef, memo, type ReactNode, useMemo } from 'react';
 import { type TextProps, type TextStyle, View, type ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { useActionState } from '../../hooks';
 import type { WithElements } from '../../types';
 import { resolveStateVariant } from '../../utils';
@@ -200,7 +200,9 @@ const drawerItemStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('Drawer_Item', drawerItemStylesDefault);
-export const drawerItemStyles = getRegisteredMoleculesComponentStyles('Drawer_Item');
+export const drawerItemStyles = getRegisteredComponentStylesWithFallback(
+    'Drawer_Item',
+    drawerItemStylesDefault,
+);
 
 export default memo(forwardRef(DrawerItem));

package/components/Drawer/DrawerItemGroup.tsx

@@ -2,7 +2,7 @@ import { memo, type ReactNode, useMemo } from 'react';
 import { type TextProps, View, type ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { HorizontalDivider, type HorizontalDividerProps } from '../HorizontalDivider';
 import { Text } from '../Text';
 
@@ -73,9 +73,10 @@ const drawerItemGroupStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('Drawer_ItemGroup', drawerItemGroupStylesDefault);
-
-export const drawerItemGroupStyles = getRegisteredMoleculesComponentStyles('Drawer_ItemGroup');
+export const drawerItemGroupStyles = getRegisteredComponentStylesWithFallback(
+    'Drawer_ItemGroup',
+    drawerItemGroupStylesDefault,
+);
 
 DrawerItemGroup.displayName = 'Drawer_ItemGroup';
 

package/components/Drawer/index.tsx

@@ -1,4 +1,4 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import { DrawerCollapsible, DrawerCollapsibleItem } from './Collapsible';
 import DrawerComponent from './Drawer';
 import DrawerContent from './DrawerContent';
@@ -17,10 +17,6 @@ const DrawerDefault = Object.assign(DrawerComponent, {
     CollapsibleItem: DrawerCollapsibleItem,
 });
 
-registerMoleculesComponents({
-    Drawer: DrawerDefault,
-});
-
 export const Drawer = getRegisteredComponentWithFallback('Drawer', DrawerDefault);
 
 export {

package/components/Drawer/utils.ts

@@ -1,8 +1,8 @@
-import { registerComponentsStyles } from '../../core';
+// import { registerComponentsStyles } from '../../core';
 
-registerComponentsStyles({
-    // Drawer_Collapsible: drawerCollapsibleStyles,
-    // Drawer_CollapsibleItem: drawerCollapsibleItemStyles,
-    // Drawer_CollapsibleItem_Header: drawerCollapsibleItemHeaderStyles,
-    // Drawer_CollapsibleItem_Content: drawerCollapsibleItemContentStyles,
-});
+// registerComponentsStyles({
+// Drawer_Collapsible: drawerCollapsibleStyles,
+// Drawer_CollapsibleItem: drawerCollapsibleItemStyles,
+// Drawer_CollapsibleItem_Header: drawerCollapsibleItemHeaderStyles,
+// Drawer_CollapsibleItem_Content: drawerCollapsibleItemContentStyles,
+// });

package/components/ElementGroup/ElementGroup.tsx

@@ -1,6 +1,7 @@
 import { Children, cloneElement, forwardRef, memo, type ReactElement, useMemo } from 'react';
 import { View, type ViewProps, type ViewStyle } from 'react-native';
 
+import { extractPropertiesFromStyles } from '../../utils/extractPropertiesFromStyles';
 import { isNil } from '../../utils/lodash';
 import { elementGroupStyles } from './utils';
 
@@ -44,24 +45,25 @@ export const ElementGroup = (
             borderTopRightRadius,
             borderBottomLeftRadius,
             borderBottomRightRadius,
-            ...restStyle
-        } = elementGroupStyles.root as any;
-        const {
-            borderTopLeftRadius: _borderTopLeftRadius,
-            borderTopRightRadius: _borderTopRightRadius,
-            borderBottomLeftRadius: _borderBottomLeftRadius,
-            borderBottomRightRadius: _borderBottomRightRadius,
-            ..._restStyle
-        } = style ?? {};
+        } = extractPropertiesFromStyles(
+            [elementGroupStyles.root, style],
+            [
+                'borderRadius',
+                'borderTopLeftRadius',
+                'borderTopRightRadius',
+                'borderBottomLeftRadius',
+                'borderBottomRightRadius',
+            ],
+        );
 
         return {
-            containerStyle: [restStyle, _restStyle],
+            containerStyle: [elementGroupStyles.root, style],
             borderRadius: borderRadiusProp || _borderRadius,
             borderRadiuses: {
-                borderTopLeftRadius: borderTopLeftRadius || _borderTopLeftRadius,
-                borderTopRightRadius: borderTopRightRadius || _borderTopRightRadius,
-                borderBottomLeftRadius: borderBottomLeftRadius || _borderBottomLeftRadius,
-                borderBottomRightRadius: borderBottomRightRadius || _borderBottomRightRadius,
+                borderTopLeftRadius: borderTopLeftRadius,
+                borderTopRightRadius: borderTopRightRadius,
+                borderBottomLeftRadius: borderBottomLeftRadius,
+                borderBottomRightRadius: borderBottomRightRadius,
             },
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/components/ElementGroup/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import ElementGroupDefault from './ElementGroup';
 
-registerMoleculesComponents({
-    ElementGroup: ElementGroupDefault,
-});
-
 export const ElementGroup = getRegisteredComponentWithFallback('ElementGroup', ElementGroupDefault);
 
 export type { Props as ElementGroupProps } from './ElementGroup';

package/components/ElementGroup/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const elementGroupStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -18,8 +18,7 @@ const elementGroupStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    ElementGroup: elementGroupStylesDefault,
-});
-
-export const elementGroupStyles = getRegisteredMoleculesComponentStyles('ElementGroup');
+export const elementGroupStyles = getRegisteredComponentStylesWithFallback(
+    'ElementGroup',
+    elementGroupStylesDefault,
+);

package/components/FAB/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import FABDefault from './FAB';
 
-registerMoleculesComponents({
-    FAB: FABDefault,
-});
-
 export const FAB = getRegisteredComponentWithFallback('FAB', FABDefault);
 
 export type { Props as FABProps } from './FAB';

package/components/FAB/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 export const iconSizeMap = {
     xs: 18,
@@ -170,7 +170,7 @@ const fabStylesDefault = StyleSheet.create(theme => ({
     label: {
         fontSize: theme.typescale.labelSmall.fontSize,
         lineHeight: theme.typescale.labelSmall.lineHeight,
-        fontWeight: theme.typescale.labelMedium.labelSmall,
+        fontWeight: theme.typescale.labelSmall.fontWeight,
         marginLeft: theme.spacings['1'],
         variants: {
             state: {
@@ -212,10 +212,6 @@ const fabStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    FAB: fabStylesDefault,
-});
-
-export const fabStyles = getRegisteredMoleculesComponentStyles('FAB');
+export const fabStyles = getRegisteredComponentStylesWithFallback('FAB', fabStylesDefault);
 
 export type States = 'hovered' | 'disabled';

package/components/FilePicker/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import FilePickerDefault from './FilePicker';
 
-registerMoleculesComponents({
-    FilePicker: FilePickerDefault,
-});
-
 export const FilePicker = getRegisteredComponentWithFallback('FilePicker', FilePickerDefault);
 
 export type { Props as FilePickerProps } from './FilePicker';

package/components/FilePicker/utils.ts

@@ -1,13 +1,12 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const filePickerStylesDefault = StyleSheet.create({
     root: {},
 });
 
-registerComponentsStyles({
-    FilePicker: filePickerStylesDefault,
-});
-
-export const defaultStyles = getRegisteredMoleculesComponentStyles('FilePicker');
+export const defaultStyles = getRegisteredComponentStylesWithFallback(
+    'FilePicker',
+    filePickerStylesDefault,
+);

package/components/HelperText/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import HelperTextDefault from './HelperText';
 
-registerMoleculesComponents({
-    HelperText: HelperTextDefault,
-});
-
 export const HelperText = getRegisteredComponentWithFallback('HelperText', HelperTextDefault);
 
 export { type Props as HelperTextProps } from './HelperText';

package/components/HelperText/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 export const helperTextStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -21,9 +21,7 @@ export const helperTextStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    HelperText: helperTextStylesDefault,
-});
-
-export const styles =
-    getRegisteredMoleculesComponentStyles('HelperText') || helperTextStylesDefault;
+export const styles = getRegisteredComponentStylesWithFallback(
+    'HelperText',
+    helperTextStylesDefault,
+);

package/components/HorizontalDivider/HorizontalDivider.tsx

@@ -2,7 +2,7 @@ import { memo } from 'react';
 import { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 export type Props = Omit<ViewProps, 'children'> & {
     /**
@@ -95,7 +95,9 @@ export const horizontalDividerStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('HorizontalDivider', horizontalDividerStylesDefault);
-export const horizontalDividerStyles = getRegisteredMoleculesComponentStyles('HorizontalDivider');
+export const horizontalDividerStyles = getRegisteredComponentStylesWithFallback(
+    'HorizontalDivider',
+    horizontalDividerStylesDefault,
+);
 
 export default memo(HorizontalDivider);

package/components/HorizontalDivider/index.tsx

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

package/components/Icon/CrossFadeIcon.tsx

@@ -1,14 +1,12 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 
-import Icon, { styles as iconStyles } from './Icon';
+import Icon from './Icon';
 import type { IconProps } from './types';
 
 type Props = IconProps;
 
 const CrossFadeIcon = ({ color, size, name, style, ...rest }: Omit<Props, 'ref'>) => {
-    // const { animationScale: scale } = useComponentStyles('Icon', style);
-    const { animationScale: scale } = iconStyles.root;
     const [currentIcon, setCurrentIcon] = useState<string>(name);
     const [previousIcon, setPreviousIcon] = useState<string | null>(null);
     const { current: fade } = useRef<Animated.Value>(new Animated.Value(1));
@@ -25,12 +23,12 @@ const CrossFadeIcon = ({ color, size, name, style, ...rest }: Omit<Props, 'ref'>
             fade.setValue(1);
 
             Animated.timing(fade, {
-                duration: scale * 200,
+                duration: 200,
                 toValue: 0,
                 useNativeDriver: true,
             }).start();
         }
-    }, [currentIcon, previousIcon, fade, scale]);
+    }, [currentIcon, previousIcon, fade]);
 
     const opacityPrev = fade;
     const opacityNext = previousIcon

package/components/Icon/Icon.tsx

@@ -1,8 +1,7 @@
 import { forwardRef, memo, useMemo } from 'react';
 import { StyleSheet } from 'react-native-unistyles';
-import type { Mappings } from 'react-native-unistyles/lib/typescript/src/core/withUnistyles/types';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { tokenStylesParser } from '../../utils/tokenStylesParser';
 import iconFactory from './iconFactory';
 import type { IconProps } from './types';
@@ -10,15 +9,7 @@ import type { IconProps } from './types';
 /**
  * Neutral component. Doesn't have platform specific styles
  */
-const Icon = (
-    {
-        type = 'material-community',
-        style,
-        color,
-        ...rest
-    }: IconProps & { uniProps?: Mappings<any> },
-    ref: any,
-) => {
+const Icon = ({ type = 'material-community', style, color, ...rest }: IconProps, ref: any) => {
     const IconComponent = iconFactory(type);
     const componentStyles = useMemo(
         () => [styles.root, style, tokenStylesParser.getColor(color as string)],
@@ -34,8 +25,6 @@ export const iconStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('Icon', iconStylesDefault);
-
-export const styles = getRegisteredMoleculesComponentStyles('Icon');
+export const styles = getRegisteredComponentStylesWithFallback('Icon', iconStylesDefault);
 
 export default memo(forwardRef(Icon));

package/components/Icon/iconFactory.tsx

@@ -1,6 +1,6 @@
 // import { textFactory } from '../Text/textFactory';
 import { memoize } from '../../utils/lodash';
-import { IconPacks, type IconType } from './types';
+import type { IconType } from './types';
 
 const customIcons: any = {};
 
@@ -10,9 +10,9 @@ export const registerCustomIconType = (id: string, customIcon: any) => {
 
 export default memoize((type: IconType) => {
     switch (type) {
-        case IconPacks.MaterialCommunity:
+        case 'material-community':
             return require('@react-native-vector-icons/material-design-icons').default;
-        case IconPacks.Feather:
+        case 'feather':
             return require('@react-native-vector-icons/feather').default;
         default:
             if (Object.prototype.hasOwnProperty.call(customIcons, type)) {

package/components/Icon/index.tsx

@@ -1,11 +1,7 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import IconDefault from './Icon';
 
-registerMoleculesComponents({
-    Icon: IconDefault,
-});
-
 export const Icon = getRegisteredComponentWithFallback('Icon', IconDefault);
 
 export { registerCustomIconType } from './iconFactory';
-export type { IconPacks, IconProps, IconType } from './types';
+export type { CustomIconTypes, IconProps, IconType } from './types';

package/components/Icon/types.ts

@@ -1,10 +1,5 @@
 import type { ColorValue, TextProps } from 'react-native';
 
-export enum IconPacks {
-    MaterialCommunity = 'material-community',
-    Feather = 'feather',
-}
-
 export interface VectorIconProps extends TextProps {
     /**
      * Size of the icon, can also be passed as fontSize in the style object.
@@ -28,7 +23,23 @@ export interface VectorIconProps extends TextProps {
     color?: ColorValue | number | undefined;
 }
 
-export type IconType = `${IconPacks}`; // in TS 4.1+, we can do this to make enum values as a union type
+/**
+ * Interface for registering custom icon types.
+ * Users can extend this interface via declaration merging to add their own icon types.
+ *
+ * @example
+ * // In your app's type declarations (e.g., global.d.ts or a dedicated types file)
+ * declare module 'react-native-molecules' {
+ *   interface CustomIconTypes {
+ *     'my-custom-icons': true;
+ *     'another-icon-set': true;
+ *   }
+ * }
+ */
+
+export interface CustomIconTypes {}
+
+export type IconType = 'material-community' | 'feather' | keyof CustomIconTypes;
 
 export type IconProps = VectorIconProps & {
     type?: IconType;