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

package/components/Button/utils.ts

@@ -1,32 +1,109 @@
-import { Platform } from 'react-native';
+import { createContext } from 'react';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { getRegisteredComponentStylesWithFallback } from '../../core';
+import type { ButtonContextType } from './types';
 
 export const sizeToIconSizeMap = {
-    xs: 18,
-    sm: 22,
+    xs: 20,
+    sm: 20,
     md: 24,
-    lg: 26,
+    lg: 32,
+    xl: 40,
 };
 
-const defaultStylesDefault = StyleSheet.create(theme => {
+export const sizeToHeightMap = {
+    xs: 32,
+    sm: 40,
+    md: 56,
+    lg: 96,
+    xl: 136,
+};
+
+export const sizeToPaddingMap = {
+    xs: 12,
+    sm: 16,
+    md: 24,
+    lg: 48,
+    xl: 64,
+};
+
+export const sizeToIconGapMap = {
+    xs: 4,
+    sm: 8,
+    md: 8,
+    lg: 12,
+    xl: 16,
+};
+
+export const elevationMap: Record<string, Record<string, number>> = {
+    true: {
+        contained: 1,
+        'contained-tonal': 1,
+        elevated: 2,
+    },
+    false: {
+        elevated: 1,
+    },
+};
+
+export const ButtonContext = createContext<ButtonContextType>({
+    variant: 'text',
+    size: 'sm',
+    state: 'default',
+    disabled: false,
+    labelColor: undefined,
+    iconSize: undefined,
+});
+
+const buttonStylesDefault = StyleSheet.create(theme => {
     return {
         root: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderStyle: 'solid',
             variants: {
                 size: {
+                    xs: {
+                        minWidth: 64,
+                        height: 32,
+                        paddingHorizontal: 12,
+                        gap: 4,
+                    },
                     sm: {
                         minWidth: 64,
-                        borderRadius: theme.shapes.corner.full,
+                        height: 40,
+                        paddingHorizontal: 16,
+                        gap: 8,
                     },
                     md: {
                         minWidth: 64,
-                        borderRadius: theme.shapes.corner.full,
+                        height: 56,
+                        paddingHorizontal: 24,
+                        gap: 8,
                     },
                     lg: {
-                        minWidth: 64,
+                        minWidth: 96,
+                        height: 96,
+                        paddingHorizontal: 48,
+                        gap: 12,
+                    },
+                    xl: {
+                        minWidth: 136,
+                        height: 136,
+                        paddingHorizontal: 64,
+                        gap: 16,
+                    },
+                },
+                shape: {
+                    rounded: {
                         borderRadius: theme.shapes.corner.full,
                     },
+                    square: {
+                        // Base - will be overridden by compoundVariants for size-specific radii
+                        borderRadius: 12,
+                    },
                 },
 
                 state: {
@@ -128,6 +205,42 @@ const defaultStylesDefault = StyleSheet.create(theme => {
                         // elevationLevel: theme.elevations.level1,
                     },
                 },
+                // Square shape + size compound variants for border radius
+                {
+                    shape: 'square',
+                    size: 'xs',
+                    styles: {
+                        borderRadius: theme.shapes.corner.medium,
+                    },
+                },
+                {
+                    shape: 'square',
+                    size: 'sm',
+                    styles: {
+                        borderRadius: theme.shapes.corner.medium,
+                    },
+                },
+                {
+                    shape: 'square',
+                    size: 'md',
+                    styles: {
+                        borderRadius: theme.shapes.corner.large,
+                    },
+                },
+                {
+                    shape: 'square',
+                    size: 'lg',
+                    styles: {
+                        borderRadius: theme.shapes.corner.extraLarge,
+                    },
+                },
+                {
+                    shape: 'square',
+                    size: 'xl',
+                    styles: {
+                        borderRadius: theme.shapes.corner.extraLarge,
+                    },
+                },
             ],
         },
         stateLayer: {
@@ -184,230 +297,139 @@ const defaultStylesDefault = StyleSheet.create(theme => {
                 },
             ],
         },
+    };
+});
 
-        button: {
-            borderStyle: 'solid',
-        },
-        content: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexGrow: 1,
-        },
-        iconContainer: {
-            ...(Platform.OS !== 'web'
-                ? { marginLeft: theme.spacings['4'], marginRight: theme.spacings._4 }
-                : {}),
-        },
-        icon: {
-            ...(Platform.OS === 'web'
-                ? { marginLeft: theme.spacings['4'], marginRight: theme.spacings._4 }
-                : {}),
-            variants: {
-                state: {
-                    disabled: {
-                        color: theme.colors.onSurfaceDisabled,
-                    },
-                    hovered: {},
-                    default: {},
+/**
+ * Styles for Button.Icon component
+ */
+const buttonIconStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        variants: {
+            state: {
+                disabled: {
+                    color: theme.colors.onSurfaceDisabled,
+                },
+                hovered: {},
+                default: {},
+            },
+            variant: {
+                outlined: {
+                    color: theme.colors.primary,
                 },
-                variant: {
-                    outlined: {
-                        color: theme.colors.primary,
-                    },
-                    text: {
-                        color: theme.colors.primary,
-                    },
-                    contained: {
-                        color: theme.colors.onPrimary,
-                    },
-                    elevated: {
-                        color: theme.colors.primary,
-                    },
-                    'contained-tonal': {
-                        color: theme.colors.onSecondaryContainer,
-                    },
+                text: {
+                    color: theme.colors.primary,
                 },
-            },
-        },
-        iconTextMode: {
-            marginLeft: theme.spacings['3'],
-            marginRight: theme.spacings._2,
-        },
-        label: {
-            display: 'flex',
-            alignItems: 'center',
-            textAlign: 'center',
-            marginVertical: theme.spacings['2l'],
-            marginHorizontal: theme.spacings['6'],
-            ...theme.typescale.labelLarge,
-
-            variants: {
-                size: {
-                    sm: {
-                        ...theme.typescale.labelMedium,
-                    },
-                    md: {
-                        ...theme.typescale.labelLarge,
-                    },
-                    lg: {
-                        ...theme.typescale.labelLarge,
-                        fontSize: theme.typescale.bodyLarge.fontSize,
-                    },
+                contained: {
+                    color: theme.colors.onPrimary,
                 },
-                variant: {
-                    outlined: {
-                        color: theme.colors.primary,
-                    },
-                    text: {
-                        color: theme.colors.primary,
-                    },
-                    contained: {
-                        color: theme.colors.onPrimary,
-                    },
-                    elevated: {
-                        color: theme.colors.primary,
-                    },
-                    'contained-tonal': {
-                        color: theme.colors.onSecondaryContainer,
-                    },
+                elevated: {
+                    color: theme.colors.primary,
                 },
-                state: {
-                    disabled: {
-                        color: theme.colors.onSurfaceDisabled,
-                    },
-                    hovered: {},
-                    default: {},
+                'contained-tonal': {
+                    color: theme.colors.onSecondaryContainer,
                 },
             },
+        },
+    },
+}));
 
-            compoundVariants: [
-                {
-                    variant: 'outlined',
-                    state: 'disabled',
-                    styles: {
-                        color: theme.colors.stateLayer.disabled.onSurface_Level4,
-                    },
+/**
+ * Styles for Button.Text component
+ */
+const buttonTextStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        ...theme.typescale.labelLarge,
+        variants: {
+            size: {
+                xs: {
+                    ...theme.typescale.labelLarge,
                 },
-
-                {
-                    variant: 'text',
-                    state: 'disabled',
-                    styles: {
-                        color: theme.colors.stateLayer.disabled.onSurface_Level4,
-                    },
+                sm: {
+                    ...theme.typescale.labelLarge,
                 },
-                {
-                    variant: 'contained',
-                    state: 'disabled',
-                    styles: {
-                        color: theme.colors.stateLayer.disabled.onSurface_Level4,
-                    },
+                md: {
+                    ...theme.typescale.titleMedium,
                 },
-                {
-                    variant: 'elevated',
-                    state: 'disabled',
-                    styles: {
-                        color: theme.colors.stateLayer.disabled.onSurface_Level4,
-                    },
+                lg: {
+                    ...theme.typescale.headlineSmall,
                 },
-
-                {
-                    variant: 'contained-tonal',
-                    state: 'disabled',
-                    styles: {
-                        color: theme.colors.stateLayer.disabled.onSurface_Level4,
-                    },
+                xl: {
+                    ...theme.typescale.headlineLarge,
                 },
-            ],
-        },
-        labelText: {
-            marginVertical: theme.spacings['2l'],
-            marginHorizontal: theme.spacings['3'],
-            ...theme.typescale.labelLarge,
-
-            variants: {
-                variant: {
-                    text: {
-                        color: theme.colors.primary,
-                    },
+            },
+            variant: {
+                text: {
+                    color: theme.colors.primary,
                 },
-                state: {
-                    disabled: {
-                        color: theme.colors.onSurfaceDisabled,
-                    },
-                    hovered: {},
-                    default: {},
+                outlined: {
+                    color: theme.colors.primary,
                 },
-                size: {
-                    sm: {
-                        ...theme.typescale.labelMedium,
-                    },
-                    md: {
-                        ...theme.typescale.labelLarge,
-                    },
-                    lg: {
-                        ...theme.typescale.labelLarge,
-                        fontSize: theme.typescale.bodyLarge.fontSize,
-                    },
+                contained: {
+                    color: theme.colors.onPrimary,
+                },
+                elevated: {
+                    color: theme.colors.primary,
+                },
+                'contained-tonal': {
+                    color: theme.colors.onSecondaryContainer,
                 },
             },
-
-            compoundVariants: [
-                {
-                    variant: 'text',
-                    state: 'disabled',
-                    styles: {
-                        color: theme.colors.stateLayer.disabled.onSurface_Level4,
-                    },
+            state: {
+                disabled: {
+                    color: theme.colors.onSurfaceDisabled,
                 },
-            ],
+                hovered: {},
+                default: {},
+            },
         },
-        labelTextAddons: {
-            marginVertical: theme.spacings['2l'],
-            marginHorizontal: theme.spacings['4'],
+    },
+}));
 
-            variants: {
-                variant: {
-                    text: {
-                        color: theme.colors.primary,
-                    },
+const buttonActivityIndicatorStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        variants: {
+            state: {
+                disabled: {
+                    color: theme.colors.onSurfaceDisabled,
+                },
+                hovered: {},
+                default: {},
+            },
+            variant: {
+                outlined: {
+                    color: theme.colors.primary,
                 },
-                state: {
-                    disabled: {
-                        color: theme.colors.onSurfaceDisabled,
-                    },
-                    hovered: {},
-                    default: {},
+                text: {
+                    color: theme.colors.primary,
                 },
-                size: {
-                    sm: {
-                        ...theme.typescale.labelMedium,
-                    },
-                    md: {
-                        ...theme.typescale.labelLarge,
-                    },
-                    lg: {
-                        ...theme.typescale.labelLarge,
-                        fontSize: theme.typescale.bodyLarge.fontSize,
-                    },
+                contained: {
+                    color: theme.colors.onPrimary,
                 },
-            },
-
-            compoundVariants: [
-                {
-                    variant: 'text',
-                    state: 'disabled',
-                    styles: {
-                        color: theme.colors.stateLayer.disabled.onSurface_Level4,
-                    },
+                elevated: {
+                    color: theme.colors.primary,
                 },
-            ],
+                'contained-tonal': {
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
         },
-    };
-});
+    },
+}));
+
+export const buttonStyles = getRegisteredComponentStylesWithFallback('Button', buttonStylesDefault);
+
+export const buttonIconStyles = getRegisteredComponentStylesWithFallback(
+    'ButtonIcon',
+    buttonIconStylesDefault,
+);
+
+export const buttonTextStyles = getRegisteredComponentStylesWithFallback(
+    'ButtonText',
+    buttonTextStylesDefault,
+);
 
-export const defaultStyles = getRegisteredComponentStylesWithFallback(
-    'Button',
-    defaultStylesDefault,
+export const buttonActivityIndicatorStyles = getRegisteredComponentStylesWithFallback(
+    'ButtonActivityIndicator',
+    buttonActivityIndicatorStylesDefault,
 );

package/components/Checkbox/CheckboxBase.tsx

@@ -1,15 +1,6 @@
 import setColor from 'color';
-import {
-    forwardRef,
-    memo,
-    type PropsWithoutRef,
-    useCallback,
-    useEffect,
-    useMemo,
-    useRef,
-} from 'react';
-import { Animated, Platform, View, type ViewProps } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
+import { forwardRef, memo, type PropsWithoutRef, useCallback, useMemo } from 'react';
+import { Platform, type ViewProps } from 'react-native';
 
 import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
@@ -44,9 +35,6 @@ const CheckboxAndroid = (
     }: Props,
     ref: any,
 ) => {
-    const { current: scaleAnim } = useRef<Animated.Value>(new Animated.Value(1));
-    const isFirstRendering = useRef<boolean>(true);
-
     const { actionsRef, hovered } = useActionState({ ref, actionsToListen: ['hover'] });
 
     const state = resolveStateVariant({
@@ -63,101 +51,20 @@ const CheckboxAndroid = (
         size,
     });
 
-    // const componentStyles = useComponentStyles('Checkbox', style, {
-    //     variant: 'android',
-    //     state: resolveStateVariant({
-    //         disabled,
-    //         checkedAndHovered: checked && !indeterminate && hovered,
-    //         checked: checked && !indeterminate,
-    //         hovered,
-    //     }),
-    //     size,
-    // });
-
-    const borderWidth = scaleAnim.interpolate({
-        inputRange: [0.8, 1],
-        outputRange: [7, 0],
-    });
-
-    const {
-        iconSize,
-        rippleColor,
-        scale,
-        animationDuration,
-        rippleContainerStyles,
-        filledContainerStyles,
-        animatedContainerStyles,
-        animatedFillStyles,
-        stateLayerStyle,
-        iconStyle,
-    } = useMemo(() => {
-        // const {
-        //     color: checkedColor,
-        //     uncheckedColor,
-        //     animationScale: _scale,
-        //     animationDuration: _animationDuration,
-        //     iconSize: _iconSize,
-        //     padding,
-        //     width,
-        //     height,
-        //     borderRadius,
-        //     ...checkboxStyles
-        //     // @ts-ignore
-        // } = styles.root;
-
-        const _color = tokenStylesParser.getColor(checked ? colorProp : uncheckedColorProp);
-
-        return {
-            iconStyle: [styles.icon, _color],
-            iconSize: iconSizeMap[size],
-            // TODO - fix this on web
-            rippleColor:
-                Platform.OS === 'web' ? undefined : setColor(_color).fade(0.32).rgb().string(),
-            checkboxStyle: [styles.root, style],
-            scale: 1,
-            animationDuration: 100,
-            rippleContainerStyles: [styles.root],
-            animatedContainerStyles: { transform: [{ scale: scaleAnim }] },
-            filledContainerStyles: [StyleSheet.absoluteFill, styles.fillContainer],
-            // for toggle animation // This needs to be computed because it's opinionated animation
-            animatedFillStyles: [
-                styles.animatedFill, // 4 because padding - border(which is 1px each side)
-                tokenStylesParser.getColor(checked ? colorProp : uncheckedColorProp, 'borderColor'),
-                { borderWidth },
-            ],
-            stateLayerStyle: [styles.stateLayer, stateLayerProps?.style],
-        };
-    }, [
-        borderWidth,
-        checked,
-        colorProp,
-        scaleAnim,
-        stateLayerProps?.style,
-        style,
-        uncheckedColorProp,
-        size,
-    ]);
-
-    useEffect(() => {
-        // Do not run animation on very first rendering
-        if (isFirstRendering.current) {
-            isFirstRendering.current = false;
-            return;
-        }
-
-        Animated.sequence([
-            Animated.timing(scaleAnim, {
-                toValue: 0.85,
-                duration: checked ? animationDuration * scale : 0,
-                useNativeDriver: false,
-            }),
-            Animated.timing(scaleAnim, {
-                toValue: 1,
-                duration: checked ? animationDuration * scale : animationDuration * scale * 1.75,
-                useNativeDriver: false,
-            }),
-        ]).start();
-    }, [checked, scaleAnim, scale, animationDuration]);
+    const { iconSize, rippleColor, rippleContainerStyles, stateLayerStyle, iconStyle } =
+        useMemo(() => {
+            const _color = tokenStylesParser.getColor(checked ? colorProp : uncheckedColorProp);
+
+            return {
+                iconStyle: [styles.icon, _color],
+                iconSize: iconSizeMap[size],
+                // TODO - fix this on web
+                rippleColor:
+                    Platform.OS === 'web' ? undefined : setColor(_color).fade(0.32).rgb().string(),
+                rippleContainerStyles: [styles.root, style],
+                stateLayerStyle: [styles.stateLayer, stateLayerProps?.style],
+            };
+        }, [checked, colorProp, uncheckedColorProp, size, style, stateLayerProps?.style]);
 
     const onChange = useCallback(() => {
         onChangeProp?.(!checked);
@@ -185,18 +92,13 @@ const CheckboxAndroid = (
             testID={testID}
             ref={actionsRef}>
             <>
-                <Animated.View style={animatedContainerStyles}>
-                    <Icon
-                        allowFontScaling={false}
-                        type="material-community"
-                        name={icon}
-                        size={iconSize}
-                        style={iconStyle}
-                    />
-                    <View style={filledContainerStyles}>
-                        <Animated.View style={animatedFillStyles} />
-                    </View>
-                </Animated.View>
+                <Icon
+                    allowFontScaling={false}
+                    type="material-community"
+                    name={icon}
+                    size={iconSize}
+                    style={iconStyle}
+                />
                 <StateLayer
                     testID={testID ? `${testID}-stateLayer` : ''}
                     {...stateLayerProps}
@@ -207,11 +109,4 @@ const CheckboxAndroid = (
     );
 };
 
-// const styles = StyleSheet.create({
-//     fillContainer: {
-//         alignItems: 'center',
-//         justifyContent: 'center',
-//     },
-// });
-
 export default memo(forwardRef(CheckboxAndroid));