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

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'
@@ -24,11 +22,12 @@ const iconButtonSizeToIconSizeMapDefault = {
 const iconButtonStylesDefault = StyleSheet.create(theme => ({
     root: {
         borderColor: theme.colors.outline,
-        color: theme.colors.onSurfaceVariant,
         borderRadius: theme.shapes.corner.full,
         overflow: 'hidden',
         borderWidth: 0,
         backgroundColor: 'transparent',
+        justifyContent: 'center',
+        alignItems: 'center',
 
         variants: {
             size: {
@@ -73,16 +72,13 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
 
                 contained: {
                     backgroundColor: theme.colors.surfaceVariant,
-                    color: theme.colors.primary,
                 },
 
                 'contained-tonal': {
                     backgroundColor: theme.colors.surfaceVariant,
-                    color: theme.colors.onSurfaceVariant,
                 },
 
                 outlined: {
-                    color: theme.colors.onSurfaceVariant,
                     borderWidth: 1,
                 },
             },
@@ -92,30 +88,23 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
             {
                 variant: 'default',
                 state: 'selectedAndDisabled',
-                styles: {
-                    color: theme.colors.primary,
-                },
+                styles: {},
             },
             {
                 variant: 'default',
                 state: 'selected',
-                styles: {
-                    color: theme.colors.primary,
-                },
+                styles: {},
             },
             {
                 variant: 'default',
                 state: 'selectedAndHovered',
-                styles: {
-                    color: theme.colors.primary,
-                },
+                styles: {},
             },
             {
                 variant: 'contained',
                 state: 'selectedAndDisabled',
                 styles: {
                     backgroundColor: theme.colors.primary,
-                    color: theme.colors.onPrimary,
                 },
             },
             {
@@ -130,14 +119,13 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selected',
                 styles: {
                     backgroundColor: theme.colors.primary,
-                    color: theme.colors.onPrimary,
                 },
             },
             {
                 variant: 'contained',
                 state: 'selectedAndHovered',
                 styles: {
-                    color: theme.colors.primary,
+                    backgroundColor: theme.colors.primary,
                 },
             },
             {
@@ -145,7 +133,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'hovered',
                 styles: {
                     backgroundColor: theme.colors.primary,
-                    color: theme.colors.onPrimary,
                 },
             },
             {
@@ -153,7 +140,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selectedAndDisabled',
                 styles: {
                     backgroundColor: theme.colors.secondaryContainer,
-                    color: theme.colors.onSecondaryContainer,
                 },
             },
             {
@@ -168,7 +154,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selected',
                 styles: {
                     backgroundColor: theme.colors.secondaryContainer,
-                    color: theme.colors.onSecondaryContainer,
                 },
             },
             {
@@ -176,7 +161,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selectedAndHovered',
                 styles: {
                     backgroundColor: theme.colors.secondaryContainer,
-                    color: theme.colors.onSecondaryContainer,
                 },
             },
             {
@@ -184,7 +168,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selectedAndDisabled',
                 styles: {
                     backgroundColor: theme.colors.inverseSurface,
-                    color: theme.colors.inverseOnSurface,
                     borderWidth: 0,
                 },
             },
@@ -200,7 +183,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selected',
                 styles: {
                     backgroundColor: theme.colors.inverseSurface,
-                    color: theme.colors.inverseOnSurface,
                     borderWidth: 0,
                 },
             },
@@ -209,17 +191,12 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selectedAndHovered',
                 styles: {
                     backgroundColor: theme.colors.secondaryContainer,
-                    color: theme.colors.onSecondaryContainer,
                 },
             },
             {
                 variant: 'outlined',
                 state: 'hovered',
-                styles: {
-                    backgroundColor: theme.colors.inverseSurface,
-                    color: theme.colors.inverseOnSurface,
-                    borderWidth: 0,
-                },
+                styles: {},
             },
         ],
     },
@@ -298,28 +275,155 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 variant: 'outlined',
                 state: 'hovered',
                 styles: {
-                    backgroundColor: theme.colors.stateLayer.hover.inverseOnSurface,
+                    backgroundColor: theme.colors.stateLayer.hover.onSurfaceVariant,
                 },
             },
         ],
     },
 
-    innerContainer: {
-        flexGrow: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
+    icon: {
+        color: theme.colors.onSurfaceVariant,
+
+        variants: {
+            variant: {
+                default: {},
+
+                contained: {
+                    color: theme.colors.primary,
+                },
+
+                'contained-tonal': {
+                    color: theme.colors.onSurfaceVariant,
+                },
+
+                outlined: {
+                    color: theme.colors.onSurfaceVariant,
+                },
+            },
+        },
+
+        compoundVariants: [
+            {
+                variant: 'default',
+                state: 'selectedAndDisabled',
+                styles: {
+                    color: theme.colors.primary,
+                },
+            },
+            {
+                variant: 'default',
+                state: 'selected',
+                styles: {
+                    color: theme.colors.primary,
+                },
+            },
+            {
+                variant: 'default',
+                state: 'selectedAndHovered',
+                styles: {
+                    color: theme.colors.primary,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'selectedAndDisabled',
+                styles: {
+                    color: theme.colors.onPrimary,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'disabled',
+                styles: {},
+            },
+            {
+                variant: 'contained',
+                state: 'selected',
+                styles: {
+                    color: theme.colors.onPrimary,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'selectedAndHovered',
+                styles: {
+                    color: theme.colors.onPrimary,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'hovered',
+                styles: {
+                    color: theme.colors.onPrimary,
+                },
+            },
+            {
+                variant: 'contained-tonal',
+                state: 'selectedAndDisabled',
+                styles: {
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'contained-tonal',
+                state: 'disabled',
+                styles: {},
+            },
+            {
+                variant: 'contained-tonal',
+                state: 'selected',
+                styles: {
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'contained-tonal',
+                state: 'selectedAndHovered',
+                styles: {
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'selectedAndDisabled',
+                styles: {
+                    color: theme.colors.inverseOnSurface,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'disabled',
+                styles: {},
+            },
+            {
+                variant: 'outlined',
+                state: 'selected',
+                styles: {
+                    color: theme.colors.inverseOnSurface,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'selectedAndHovered',
+                styles: {
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'hovered',
+                styles: {},
+            },
+        ],
     },
 }));
 
-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,
+);