react-native-molecules 0.5.0-beta.0

package/components/ElementGroup/ElementGroup.tsx

@@ -0,0 +1,139 @@
+import { Children, cloneElement, forwardRef, memo, type ReactElement, useMemo } from 'react';
+import { View, type ViewProps, type ViewStyle } from 'react-native';
+
+import { isNil } from '../../utils/lodash';
+import { elementGroupStyles } from './utils';
+
+export enum Orientation {
+    Horizontal = 'horizontal',
+    Vertical = 'vertical',
+}
+
+export type Props = Omit<ViewProps, 'style'> & {
+    orientation?: `${Orientation}`;
+    borderRadius?: number | string;
+    style?: ViewStyle;
+};
+
+export const ElementGroup = (
+    {
+        orientation: orientationProp = Orientation.Horizontal,
+        children,
+        style,
+        borderRadius: borderRadiusProp,
+        ...props
+    }: Props,
+    ref: any,
+) => {
+    const orientation = orientationProp === Orientation.Vertical ? 'vertial' : 'horizontal';
+    elementGroupStyles.useVariants({
+        orientation: orientation as any,
+    });
+    // const componentStyles = useComponentStyles(
+    //     'ElementGroup',
+    //     [style, !isNil(borderRadiusProp) ? { borderRadius: borderRadiusProp } : {}],
+    //     {
+    //         orientation: orientation === Orientation.Vertical ? 'vertial' : 'horizontal',
+    //     },
+    // );
+
+    const { containerStyle, borderRadius, borderRadiuses } = useMemo(() => {
+        const {
+            borderRadius: _borderRadius,
+            borderTopLeftRadius,
+            borderTopRightRadius,
+            borderBottomLeftRadius,
+            borderBottomRightRadius,
+            ...restStyle
+        } = elementGroupStyles.root as any;
+        const {
+            borderTopLeftRadius: _borderTopLeftRadius,
+            borderTopRightRadius: _borderTopRightRadius,
+            borderBottomLeftRadius: _borderBottomLeftRadius,
+            borderBottomRightRadius: _borderBottomRightRadius,
+            ..._restStyle
+        } = style ?? {};
+
+        return {
+            containerStyle: [restStyle, _restStyle],
+            borderRadius: borderRadiusProp || _borderRadius,
+            borderRadiuses: {
+                borderTopLeftRadius: borderTopLeftRadius || _borderTopLeftRadius,
+                borderTopRightRadius: borderTopRightRadius || _borderTopRightRadius,
+                borderBottomLeftRadius: borderBottomLeftRadius || _borderBottomLeftRadius,
+                borderBottomRightRadius: borderBottomRightRadius || _borderBottomRightRadius,
+            },
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [style, borderRadiusProp, orientation]);
+
+    const modifiedChildren = useMemo(() => {
+        if (!children) return null;
+
+        if (!Array.isArray(children) || children.length <= 1) return children;
+
+        // if we have enough elements for left, right
+        return Children.map(children, (child: ReactElement, index) => {
+            const [firstBorderProp, lastBorderProp] = {
+                [Orientation.Horizontal]: ['borderTopRightRadius', 'borderBottomLeftRadius'],
+                [Orientation.Vertical]: ['borderBottomLeftRadius', 'borderTopRightRadius'],
+            }[orientation as Orientation];
+
+            const isFirstChild = index === 0;
+            const isLastChild = index === children.length - 1;
+
+            const prop = isFirstChild ? 'first' : isLastChild ? 'last' : 'middle';
+
+            type KeyOfBorderRadiuses = keyof typeof borderRadiuses;
+
+            const mapBorderRadiusFromProp = {
+                [firstBorderProp]: !isNil(borderRadiuses[firstBorderProp as KeyOfBorderRadiuses])
+                    ? borderRadiuses[firstBorderProp as KeyOfBorderRadiuses]
+                    : borderRadius,
+                [lastBorderProp]: !isNil(borderRadiuses[lastBorderProp as KeyOfBorderRadiuses])
+                    ? borderRadiuses[lastBorderProp as KeyOfBorderRadiuses]
+                    : borderRadius,
+            };
+
+            const borderRadiusStyles = {
+                first: {
+                    [firstBorderProp]: 0,
+                    borderBottomRightRadius: 0,
+
+                    borderTopLeftRadius: !isNil(borderRadiuses.borderTopLeftRadius)
+                        ? borderRadiuses.borderTopLeftRadius
+                        : borderRadius,
+                    [lastBorderProp]: mapBorderRadiusFromProp[lastBorderProp],
+                },
+                middle: {
+                    borderTopLeftRadius: 0,
+                    borderBottomRightRadius: 0,
+                    borderTopRightRadius: 0,
+                    borderBottomLeftRadius: 0,
+                },
+                last: {
+                    borderTopLeftRadius: 0,
+                    [lastBorderProp]: 0,
+
+                    borderBottomRightRadius: !isNil(borderRadiuses.borderBottomRightRadius)
+                        ? borderRadiuses.borderBottomRightRadius
+                        : borderRadius,
+                    [firstBorderProp]: mapBorderRadiusFromProp[firstBorderProp],
+                },
+            };
+
+            return cloneElement(child, {
+                ...(child.props as any),
+                style: [(child.props as any).style, borderRadiusStyles[prop]].flat(),
+            });
+        });
+    }, [borderRadius, borderRadiuses, children, orientation]);
+
+    return (
+        <View {...props} style={containerStyle} ref={ref}>
+            {modifiedChildren}
+        </View>
+    );
+};
+
+export default memo(forwardRef(ElementGroup));

package/components/ElementGroup/index.tsx

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

package/components/ElementGroup/utils.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const elementGroupStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        borderRadius: theme.shapes.corner.extraSmall,
+        variants: {
+            orientation: {
+                horizontal: {
+                    flexDirection: 'row',
+                },
+                vertical: {
+                    flexDirection: 'column',
+                },
+            },
+        },
+    },
+}));
+
+registerComponentsStyles({
+    ElementGroup: elementGroupStylesDefault,
+});
+
+export const elementGroupStyles = getRegisteredMoleculesComponentStyles('ElementGroup');

package/components/FAB/FAB.tsx

@@ -0,0 +1,176 @@
+import { forwardRef, memo, useMemo } from 'react';
+import type { TextProps, ViewProps, ViewStyle } from 'react-native';
+import { Text } from 'react-native';
+
+import { useActionState } from '../../hooks';
+import type { MD3Elevation } from '../../types/theme';
+import { resolveStateVariant } from '../../utils';
+import { Icon, type IconProps, type IconType } from '../Icon';
+import { StateLayer } from '../StateLayer';
+import { Surface, type SurfaceProps } from '../Surface';
+import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
+import type { FABVariant } from './types';
+import { fabStyles, iconSizeMap } from './utils';
+
+export type Props = Omit<TouchableRippleProps, 'children'> & {
+    /**
+     * name of the icon
+     * */
+    iconName: string;
+    /**
+     * type of the icon
+     * */
+    iconType?: IconType;
+    /**
+     * icon component's props
+     * */
+    iconProps?: Omit<IconProps, 'name' | 'type' | 'ref'>;
+    /**
+     * Label of the FAB, if provided the FAB will be on extended mode
+     * */
+    label?: string;
+    /**
+     * Props of the label
+     * */
+    labelProps?: Omit<Partial<TextProps>, 'children'>;
+    /**
+     * Props for the surface container
+     * */
+    containerProps?: Omit<SurfaceProps, 'style' | 'ref'>;
+    /**
+     * Props for the innner touchable container
+     * */
+    innerContainerStyle?: ViewStyle;
+    /**
+     * sizes of the FAB
+     * @default 'md'
+     * */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * variants of the FAB
+     * */
+    variant?: FABVariant;
+    /**
+     * Elevation level
+     * @default 2
+     * */
+    elevation?: MD3Elevation;
+    /**
+     * Props for the state layer
+     * */
+    stateLayerProps?: ViewProps;
+};
+
+const emptyObj = {};
+
+const FAB = (
+    {
+        iconName,
+        iconType,
+        iconProps = emptyObj,
+        label,
+        variant = 'primary',
+        size = 'md',
+        elevation: elevationProp,
+        containerProps,
+        innerContainerStyle: innerContainerStyleProp = emptyObj,
+        labelProps = emptyObj,
+        stateLayerProps = emptyObj,
+        disabled = false,
+        onPress,
+        style,
+        testID,
+        ...rest
+    }: Props,
+    ref: any,
+) => {
+    const { hovered, actionsRef } = useActionState({ ref, actionsToListen: ['hover'] });
+
+    const elevation = useMemo(
+        () => (elevationProp === undefined ? 3 : elevationProp),
+        [elevationProp],
+    );
+
+    const state = resolveStateVariant({
+        disabled,
+        hovered,
+    });
+
+    fabStyles.useVariants({
+        variant,
+        size,
+        state: state as any,
+    });
+
+    const {
+        containerStyle,
+        innerContainerStyle,
+        iconStyle,
+        labelStyle,
+        iconSize,
+        stateLayerStyle,
+    } = useMemo(() => {
+        return {
+            containerStyle: [fabStyles.root, style],
+            innerContainerStyle: [fabStyles.innerContainer, innerContainerStyleProp],
+            iconStyle: [fabStyles.icon, iconProps?.style],
+            // @ts-ignore
+            labelStyle: [fabStyles.label, labelProps?.style],
+            iconSize: iconSizeMap[size],
+            stateLayerStyle: [fabStyles.stateLayer, stateLayerProps?.style],
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        iconProps?.style,
+        innerContainerStyleProp,
+        labelProps?.style,
+        stateLayerProps?.style,
+        style,
+        state,
+        variant,
+        size,
+    ]);
+    // TODO: abstract the stateLayer
+    return (
+        <Surface
+            testID={testID ? `${testID}-container` : ''}
+            {...containerProps}
+            elevation={(disabled ? 0 : hovered ? elevation + 1 : elevation) as MD3Elevation}
+            style={containerStyle}>
+            <TouchableRipple
+                testID={testID}
+                {...rest}
+                disabled={disabled}
+                onPress={onPress}
+                style={innerContainerStyle}
+                ref={actionsRef}>
+                <>
+                    <Icon
+                        name={iconName}
+                        type={iconType}
+                        testID={testID ? `${testID}-icon` : ''}
+                        {...iconProps}
+                        size={iconSize}
+                        style={iconStyle}
+                    />
+                    {label && (
+                        <Text
+                            selectable={false}
+                            testID={testID ? `${testID}-label` : ''}
+                            {...labelProps}
+                            style={labelStyle}>
+                            {label}
+                        </Text>
+                    )}
+                    <StateLayer
+                        testID={testID ? `${testID}-stateLayer` : ''}
+                        {...stateLayerProps}
+                        style={stateLayerStyle}
+                    />
+                </>
+            </TouchableRipple>
+        </Surface>
+    );
+};
+
+export default memo(forwardRef(FAB));

package/components/FAB/index.tsx

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

package/components/FAB/types.ts

@@ -0,0 +1 @@
+export type FABVariant = 'primary' | 'secondary' | 'tertiary' | 'surface';

package/components/FAB/utils.ts

@@ -0,0 +1,221 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+export const iconSizeMap = {
+    xs: 18,
+    sm: 24,
+    md: 28,
+    lg: 36,
+};
+
+const fabStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        ...{ iconSize: 24 },
+
+        variants: {
+            state: {
+                disabled: {
+                    backgroundColor: theme.colors.surfaceDisabled,
+                },
+            },
+
+            variant: {
+                primary: {
+                    backgroundColor: theme.colors.primaryContainer,
+                },
+                secondary: {
+                    backgroundColor: theme.colors.secondaryContainer,
+                },
+                tertiary: {
+                    backgroundColor: theme.colors.tertiaryContainer,
+                },
+                surface: {
+                    backgroundColor: theme.colors.surface,
+                },
+            },
+
+            size: {
+                xs: {
+                    minHeight: 32,
+                    minWidth: 32,
+                    borderRadius: theme.shapes.corner.small,
+                },
+                sm: {
+                    minHeight: 40,
+                    minWidth: 40,
+                    borderRadius: theme.shapes.corner.medium,
+                },
+                md: {
+                    minHeight: 56,
+                    minWidth: 56,
+                    borderRadius: theme.shapes.corner.large,
+                },
+                lg: {
+                    minHeight: 96,
+                    minWidth: 96,
+                    borderRadius: theme.shapes.corner.extraLarge,
+                },
+            },
+        },
+    },
+
+    innerContainer: {
+        flexGrow: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+
+        variants: {
+            size: {
+                xs: {
+                    borderRadius: theme.shapes.corner.small,
+                },
+                sm: {
+                    padding: theme.spacings['3'],
+                    borderRadius: theme.shapes.corner.medium,
+                },
+                md: {
+                    padding: theme.spacings['4'],
+                    borderRadius: theme.shapes.corner.large,
+                },
+                lg: {
+                    padding: theme.spacings['7'],
+                    borderRadius: theme.shapes.corner.extraLarge,
+                },
+            },
+        },
+    },
+
+    stateLayer: {
+        variants: {
+            state: {
+                disabled: {
+                    backgroundColor: theme.colors.stateLayer.disabled.onSurface,
+                },
+            },
+
+            size: {
+                xs: {
+                    borderRadius: theme.shapes.corner.small,
+                },
+                sm: {
+                    borderRadius: theme.shapes.corner.medium,
+                },
+                md: {
+                    borderRadius: theme.shapes.corner.large,
+                },
+                lg: {
+                    borderRadius: theme.shapes.corner.extraLarge,
+                },
+            },
+        },
+        compoundVariants: [
+            {
+                variant: 'primary',
+                state: 'hovered',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.hover.onPrimaryContainer,
+                },
+            },
+            {
+                variant: 'secondary',
+                state: 'hovered',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'tertiary',
+                state: 'hovered',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.hover.onTertiaryContainer,
+                },
+            },
+            {
+                variant: 'surface',
+                state: 'hovered',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.hover.primary,
+                },
+            },
+        ],
+    },
+
+    icon: {
+        variants: {
+            state: {
+                disabled: {
+                    color: theme.colors.onSurfaceDisabled,
+                },
+            },
+
+            variant: {
+                primary: {
+                    color: theme.colors.onPrimaryContainer,
+                },
+                secondary: {
+                    color: theme.colors.onSecondaryContainer,
+                },
+                tertiary: {
+                    color: theme.colors.onTertiaryContainer,
+                },
+                surface: {
+                    color: theme.colors.primary,
+                },
+            },
+        },
+    },
+
+    label: {
+        fontSize: theme.typescale.labelSmall.fontSize,
+        lineHeight: theme.typescale.labelSmall.lineHeight,
+        fontWeight: theme.typescale.labelMedium.labelSmall,
+        marginLeft: theme.spacings['1'],
+        variants: {
+            state: {
+                disabled: {
+                    color: theme.colors.onSurfaceDisabled,
+                },
+            },
+
+            variant: {
+                primary: {
+                    color: theme.colors.onPrimaryContainer,
+                },
+                secondary: {
+                    color: theme.colors.onPrimaryContainer,
+                },
+                tertiary: {
+                    color: theme.colors.onPrimaryContainer,
+                },
+                surface: {
+                    color: theme.colors.primary,
+                },
+            },
+
+            size: {
+                sm: {
+                    ...theme.typescale.labelMedium,
+                    marginLeft: theme.spacings['1'],
+                },
+                md: {
+                    ...theme.typescale.labelLarge,
+                    marginLeft: theme.spacings['2'],
+                },
+                lg: {
+                    ...theme.typescale.bodyExtraLarge,
+                    marginLeft: theme.spacings['3'],
+                },
+            },
+        },
+    },
+}));
+
+registerComponentsStyles({
+    FAB: fabStylesDefault,
+});
+
+export const fabStyles = getRegisteredMoleculesComponentStyles('FAB');
+
+export type States = 'hovered' | 'disabled';