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

package/README.md

@@ -4,7 +4,7 @@ React Native Molecules
 
 <h3 align="center">
   Material 3-powered primitives for React Native + Web.<br/>
-  <a href="https://github.com/webbeetechnologies/react-native-molecules/tree/main/docs">Explore the docs</a>
+  <a href="https://molecules.taylordb.ai">Explore the docs</a>
 </h3>
 
 ---

package/components/Button/Button.tsx

@@ -12,11 +12,11 @@ import { type StyleProp, type TextStyle, View, type ViewProps, type ViewStyle }
 import { useActionState } from '../../hooks';
 import type { MD3Elevation } from '../../types/theme';
 import { resolveStateVariant } from '../../utils';
+import { extractPropertiesFromStyles } from '../../utils/extractPropertiesFromStyles';
 import { ActivityIndicator } from '../ActivityIndicator';
 import { Icon, type IconType } from '../Icon';
 import { StateLayer } from '../StateLayer';
 import { Surface, type SurfaceProps } from '../Surface';
-import { extractProperties } from '../Surface/utils';
 import { Text } from '../Text';
 import { TouchableRipple } from '../TouchableRipple';
 import type { ButtonSize, ButtonVariant } from './types';
@@ -209,7 +209,7 @@ const Button = (
             defaultStyles;
 
         // for mobile
-        const { borderRadius } = extractProperties(
+        const { borderRadius } = extractPropertiesFromStyles(
             [defaultStyles.root, styleProp],
             ['borderRadius'],
         );

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/Surface/Surface.android.tsx

@@ -4,8 +4,9 @@ import { useUnistyles } from 'react-native-unistyles';
 
 import { inputRange } from '../../styles/shadow';
 import type { MD3Elevation } from '../../types/theme';
+import { extractPropertiesFromStyles } from '../../utils/extractPropertiesFromStyles';
 import { BackgroundContextWrapper } from './BackgroundContextWrapper';
-import { defaultStyles, extractProperties, getElevationAndroid } from './utils';
+import { defaultStyles, getElevationAndroid } from './utils';
 
 export type Props = ViewProps & {
     /**
@@ -43,7 +44,7 @@ const Surface = ({ elevation = 1, style, children, testID, ...props }: Props, re
                     elevation: getElevationAndroid(elevation, inputRange, elevationLevel),
                 },
             ] as StyleProp<ViewStyle>,
-            surfaceBackground: extractProperties(
+            surfaceBackground: extractPropertiesFromStyles(
                 [defaultStyles.root as ViewStyle, style],
                 ['backgroundColor'],
             ).backgroundColor,

package/components/Surface/Surface.ios.tsx

@@ -3,8 +3,9 @@ import { Animated, type StyleProp, View, type ViewStyle } from 'react-native';
 import { useUnistyles } from 'react-native-unistyles';
 
 import type { MD3Elevation } from '../../types/theme';
+import { extractPropertiesFromStyles } from '../../utils/extractPropertiesFromStyles';
 import { BackgroundContextWrapper } from './BackgroundContextWrapper';
-import { defaultStyles, extractProperties, getStyleForShadowLayer } from './utils';
+import { defaultStyles, getStyleForShadowLayer } from './utils';
 
 export type Props = ComponentPropsWithRef<typeof View> & {
     /**
@@ -78,14 +79,15 @@ const Surface = ({ elevation = 1, style, children, testID, ...props }: Props, re
     })();
 
     const { surfaceBackground, sharedStyle, layer0Style, layer1Style } = useMemo(() => {
-        const { position, alignSelf, top, left, right, bottom, borderRadius } = extractProperties(
-            [defaultStyles.root as ViewStyle, style],
-            ['position', 'alignSelf', 'top', 'left', 'right', 'bottom', 'borderRadius'],
-        );
+        const { position, alignSelf, top, left, right, bottom, borderRadius } =
+            extractPropertiesFromStyles(
+                [defaultStyles.root as ViewStyle, style],
+                ['position', 'alignSelf', 'top', 'left', 'right', 'bottom', 'borderRadius'],
+            );
         const absoluteStyle = { position, alignSelf, top, right, bottom, left };
 
         return {
-            surfaceBackground: extractProperties(
+            surfaceBackground: extractPropertiesFromStyles(
                 [defaultStyles.root as ViewStyle, style],
                 ['backgroundColor'],
             ).backgroundColor,

package/components/Surface/utils.ts

@@ -15,30 +15,6 @@ export const defaultStyles = getRegisteredComponentStylesWithFallback(
     defaultStylesDefault,
 );
 
-// TODO - abstract this
-export function extractProperties(
-    _objectsArray: Record<string, any>,
-    propertiesToExtract: string[],
-) {
-    const extracted: Record<string, any> = {};
-
-    const objectsArray = _objectsArray.flat();
-
-    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;
-}
-
 const _shadowColor = '#000';
 
 const iOSShadowOutputRanges = [

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-molecules",
-    "version": "0.5.0-beta.2",
+    "version": "0.5.0-beta.3",
     "author": "Thet Aung <thetaung.dev@gmail.com>",
     "license": "MIT",
     "main": "index.ts",

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