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

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,
@@ -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,7 +1,7 @@
 import { forwardRef, memo, useMemo } from 'react';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { tokenStylesParser } from '../../utils/tokenStylesParser';
 import iconFactory from './iconFactory';
 import type { IconProps } from './types';
@@ -25,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/index.tsx

@@ -1,10 +1,6 @@
-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';

package/components/IconButton/IconButton.tsx

@@ -113,7 +113,9 @@ const IconButton = (
     });
 
     defaultStyles.useVariants({
-        variant,
+        // @ts-ignore // TODO - fix this
+        variant: variant as any,
+        // @ts-ignore // TODO - fix this
         state,
         size: typeof size === 'string' && size ? size : undefined,
     });

package/components/IconButton/index.tsx

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

package/components/IconButton/utils.ts

@@ -1,11 +1,9 @@
 import { StyleSheet } from 'react-native-unistyles';
 
 import {
-    getRegisteredMoleculesComponentStyles,
-    registerComponentsStyles,
-    registerComponentUtils,
-} from '../../core';
-import { getRegisteredComponentUtils } from './../../core/componentsRegistry';
+    getRegisteredComponentStylesWithFallback,
+    getRegisteredComponentUtilsWithFallback,
+} from './../../core/componentsRegistry';
 
 export type States =
     | 'selectedAndDisabled'
@@ -311,15 +309,12 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    IconButton: iconButtonStylesDefault,
-});
-
-registerComponentUtils('IconButton', {
+export const defaultStyles = getRegisteredComponentStylesWithFallback(
+    'IconButton',
+    iconButtonStylesDefault,
+);
+export const iconButtonSizeToIconSizeMap = getRegisteredComponentUtilsWithFallback(
+    'IconButton',
     iconButtonSizeToIconSizeMapDefault,
-});
-
-export const defaultStyles = getRegisteredMoleculesComponentStyles('IconButton');
-export const iconButtonSizeToIconSizeMap =
-    getRegisteredComponentUtils('IconButton')?.iconButtonSizeToIconSizeMapDefault ||
-    iconButtonSizeToIconSizeMapDefault;
+    'iconButtonSizeToIconSizeMap',
+);

package/components/If/index.tsx

@@ -1,13 +1,9 @@
 import type { PropsWithChildren } from 'react';
 
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 
 const IfDefault = (props: PropsWithChildren<{ shouldRender?: boolean }>) => {
     return <>{!!props.shouldRender && props.children}</>;
 };
 
-registerMoleculesComponents({
-    If: IfDefault,
-});
-
 export const If = getRegisteredComponentWithFallback('If', IfDefault);

package/components/InputAddon/index.tsx

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

package/components/InputAddon/utils.ts

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

package/components/Link/index.tsx

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

package/components/Link/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 // type States = 'disabled' | 'hovered';
 
@@ -32,8 +32,4 @@ const linkStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Link: linkStylesDefault,
-});
-
-export const linkStyles = getRegisteredMoleculesComponentStyles('Link');
+export const linkStyles = getRegisteredComponentStylesWithFallback('Link', linkStylesDefault);

package/components/ListItem/index.tsx

@@ -1,4 +1,4 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import ListItemComponent from './ListItem';
 import ListItemDescription from './ListItemDescription';
 import ListItemTitle from './ListItemTitle';
@@ -8,10 +8,6 @@ const ListItemDefault = Object.assign(ListItemComponent, {
     Description: ListItemDescription,
 });
 
-registerMoleculesComponents({
-    ListItem: ListItemDefault,
-});
-
 export const ListItem = getRegisteredComponentWithFallback('ListItem', ListItemDefault);
 
 export type { Props as ListItemProps } from './ListItem';

package/components/ListItem/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const listItemStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -101,13 +101,15 @@ const listItemDescriptionStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    ListItem: listItemStylesDefault,
-    ListItem_Title: listItemTitleStylesDefault,
-    ListItem_Description: listItemDescriptionStylesDefault,
-});
-
-export const listItemStyles = getRegisteredMoleculesComponentStyles('ListItem');
-export const listItemTitleStyles = getRegisteredMoleculesComponentStyles('ListItem_Title');
-export const listItemDescriptionStyles =
-    getRegisteredMoleculesComponentStyles('ListItem_Description');
+export const listItemStyles = getRegisteredComponentStylesWithFallback(
+    'ListItem',
+    listItemStylesDefault,
+);
+export const listItemTitleStyles = getRegisteredComponentStylesWithFallback(
+    'ListItem_Title',
+    listItemTitleStylesDefault,
+);
+export const listItemDescriptionStyles = getRegisteredComponentStylesWithFallback(
+    'ListItem_Description',
+    listItemDescriptionStylesDefault,
+);

package/components/Menu/index.tsx

@@ -1,4 +1,4 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import MenuComponent from './Menu';
 import MenuDivider from './MenuDivider';
 import MenuItem from './MenuItem';
@@ -8,10 +8,6 @@ export const MenuDefault = Object.assign(MenuComponent, {
     Divider: MenuDivider,
 });
 
-registerMoleculesComponents({
-    Menu: MenuDefault,
-});
-
 export const Menu = getRegisteredComponentWithFallback('Menu', MenuDefault);
 
 export type { Props as MenuProps } from './Menu';

package/components/Menu/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const menuStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -83,10 +83,8 @@ const menuItemStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Menu: menuStylesDefault,
-    Menu_Item: menuItemStylesDefault,
-});
-
-export const menuStyles = getRegisteredMoleculesComponentStyles('Menu');
-export const menuItemStyles = getRegisteredMoleculesComponentStyles('Menu_Item');
+export const menuStyles = getRegisteredComponentStylesWithFallback('Menu', menuStylesDefault);
+export const menuItemStyles = getRegisteredComponentStylesWithFallback(
+    'Menu_Item',
+    menuItemStylesDefault,
+);

package/components/Modal/index.tsx

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

package/components/Modal/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const modalStylesDefault = StyleSheet.create(theme => ({
     root: {},
@@ -38,8 +38,4 @@ const modalStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Modal: modalStylesDefault,
-});
-
-export const modalStyles = getRegisteredMoleculesComponentStyles('Modal');
+export const modalStyles = getRegisteredComponentStylesWithFallback('Modal', modalStylesDefault);

package/components/NavigationRail/NavigationRailHeader.tsx

@@ -7,7 +7,7 @@ export type Props = ViewProps & {};
 
 const NavigationRailHeader = memo(({ style, children, ...rest }: Props) => {
     return (
-        <View style={[navigationRailHeaderStyles.root, style]} {...rest}>
+        <View style={[navigationRailHeaderStyles.header, style]} {...rest}>
             {children}
         </View>
     );

package/components/NavigationRail/index.tsx

@@ -1,4 +1,4 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import NavigationRailComponent from './NavigationRail';
 import NavigationRailContent from './NavigationRailContent';
 import NavigationRailFooter from './NavigationRailFooter';
@@ -12,10 +12,6 @@ export const NavigationRailDefault = Object.assign(NavigationRailComponent, {
     Footer: NavigationRailFooter,
 });
 
-registerMoleculesComponents({
-    NavigationRail: NavigationRailDefault,
-});
-
 export const NavigationRail = getRegisteredComponentWithFallback(
     'NavigationRail',
     NavigationRailDefault,