react-native-molecules 0.5.0-beta.0

package/components/Checkbox/types.ts

@@ -0,0 +1,72 @@
+import type { StyleProp, TextProps, TextStyle, ViewStyle } from 'react-native';
+
+import type { TouchableRippleProps } from '../TouchableRipple';
+
+export type Size = 'sm' | 'md' | 'lg';
+export type States = 'disabled' | 'checked' | 'hovered' | 'checkedAndHovered';
+
+export type CheckBoxBaseProps = Omit<TouchableRippleProps, 'children'> & {
+    /**
+     * value of checkbox.
+     */
+    value?: boolean;
+    /**
+     * defaultValue of checkbox.
+     */
+    defaultValue?: boolean;
+    /**
+     * function execute when the value change i.e checkbox is press
+     */
+    onChange?: (newValue: boolean) => void;
+    /**
+     * Whether or not if it's in the indeterminate state, if true, it will override the value
+     */
+    indeterminate?: boolean;
+    /**
+     * Whether checkbox is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Size of the icon.
+     * Should be a number or a Design Token
+     */
+    size?: Size;
+    /**
+     * Custom color for unchecked checkbox.
+     */
+    uncheckedColor?: string;
+    /**
+     * Custom color for checkbox.
+     */
+    color?: string;
+    /**
+     * Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.
+     */
+    accessibilityLabel?: string;
+    /**
+     * testID to be used on tests.
+     */
+    testID?: string;
+    /**
+     * Label to be displayed next to the checkbox.
+     */
+    label?: string;
+    /**
+     * Style that is passed to Label element.
+     */
+    labelStyle?: StyleProp<TextStyle>;
+    /**
+     * Style that is passed to Container element (when label is provided).
+     */
+    containerStyle?: ViewStyle;
+    /**
+     * Props for the label text element.
+     */
+    labelProps?: Omit<TextProps, 'children' | 'style'>;
+    /**
+     * Checkbox control position relative to label.
+     */
+    position?: 'leading' | 'trailing';
+
+    style?: StyleProp<TextStyle>;
+};

package/components/Checkbox/utils.ts

@@ -0,0 +1,210 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const PADDING = 6;
+
+export const iconSizeMap = {
+    sm: 20,
+    md: 24,
+    lg: 28,
+};
+
+const checkboxStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        variants: {
+            size: {
+                sm: {
+                    padding: PADDING,
+                    borderRadius: 16,
+                    // iconSize: iconSizeMap.sm,
+                },
+                md: {
+                    padding: PADDING,
+                    borderRadius: 18,
+                    // iconSize: iconSizeMap.md,
+                },
+                lg: {
+                    padding: PADDING,
+                    borderRadius: 20,
+                    // iconSize: iconSizeMap.lg,
+                },
+            },
+        },
+
+        compoundVariants: [
+            {
+                variant: 'android',
+                size: 'sm',
+                styles: {
+                    width: 32,
+                    height: 32,
+                },
+            },
+            {
+                variant: 'android',
+                size: 'md',
+                styles: {
+                    width: 36,
+                    height: 36,
+                },
+            },
+            {
+                variant: 'android',
+                size: 'lg',
+                styles: {
+                    width: 40,
+                    height: 40,
+                },
+            },
+        ],
+    },
+    stateLayer: {
+        variants: {
+            state: {
+                hovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+                checkedAndHovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.primary,
+                },
+            },
+
+            variant: {
+                ios: {
+                    backgroundColor: 'transparent',
+                },
+            },
+        },
+    },
+    itemContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    label: {
+        flexShrink: 1,
+        flexGrow: 1,
+        variants: {
+            variant: {
+                item: {
+                    color: theme.colors.onSurface,
+                },
+            },
+            isLeading: {
+                true: {
+                    textAlign: 'right',
+                    paddingLeft: 0,
+                    paddingRight: theme.spacings['2'],
+                },
+                false: {
+                    textAlign: 'left',
+                    paddingLeft: theme.spacings['2'],
+                    paddingRight: 0,
+                },
+            },
+        },
+        compoundVariants: [
+            {
+                variant: 'item',
+                size: 'sm',
+                styles: {
+                    ...theme.typescale.bodyMedium,
+                },
+            },
+            {
+                variant: 'item',
+                size: 'md',
+                styles: {
+                    ...theme.typescale.bodyMedium,
+                },
+            },
+            {
+                variant: 'item',
+                size: 'lg',
+                styles: {
+                    ...theme.typescale.bodyLarge,
+                },
+            },
+        ],
+    },
+    fillContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    animatedFill: {
+        width: 24 / 2 + (PADDING - 2),
+        height: 24 / 2 + (PADDING - 2),
+
+        variants: {
+            size: {
+                sm: {
+                    width: iconSizeMap.sm / 2 + (PADDING - 2),
+                    height: iconSizeMap.sm / 2 + (PADDING - 2),
+                },
+                md: {
+                    width: iconSizeMap.md / 2 + (PADDING - 2),
+                    height: iconSizeMap.md / 2 + (PADDING - 2),
+                },
+                lg: {
+                    width: iconSizeMap.lg / 2 + (PADDING - 2),
+                    height: iconSizeMap.lg / 2 + (PADDING - 2),
+                },
+            },
+        },
+    },
+    icon: {
+        color: theme.colors.onSurfaceVariant,
+
+        variants: {
+            state: {
+                checked: {
+                    color: theme.colors.primary,
+                },
+                checkedAndHovered: {
+                    color: theme.colors.primary,
+                },
+                disabled: {
+                    color: theme.colors.onSurfaceDisabled,
+                },
+                hovered: {},
+            },
+        },
+    },
+    // compoundVariantStyles: (variant: 'android' | 'ios' | 'item', size: Size, state: States) => {
+    //     if (variant === 'android') {
+    //         return {
+    //             root: {
+    //                 ...(size === 'sm' && { width: 32, height: 32 }),
+    //                 ...(size === 'md' && { width: 36, height: 36 }),
+    //                 ...(size === 'lg' && { width: 40, height: 40 }),
+    //             },
+    //             stateLayer: {
+    //                 ...(state === 'hovered' && {
+    //                     backgroundColor: theme.colors.stateLayer.hover.onSurface,
+    //                 }),
+    //                 ...(state === 'checkedAndHovered' && {
+    //                     backgroundColor: theme.colors.stateLayer.hover.primary,
+    //                 }),
+    //             },
+    //         } as any;
+    //     }
+
+    //     if (variant === 'item') {
+    //         return {
+    //             root: {
+    //                 labelColor: 'colors.onSurface',
+    //                 ...(size === 'sm' && { labelTypeScale: theme.typescale.bodyMedium }),
+    //                 ...(size === 'md' && { labelTypeScale: theme.typescale.bodyLarge }),
+    //                 ...(size === 'lg' && { labelTypeScale: theme.typescale.bodyLarge }),
+    //             },
+    //         };
+    //     }
+    // },
+}));
+
+registerComponentsStyles({
+    Checkbox: checkboxStylesDefault,
+});
+
+export const styles = getRegisteredMoleculesComponentStyles('Checkbox') ?? checkboxStylesDefault;

package/components/Chip/Chip.tsx

@@ -0,0 +1,416 @@
+import {
+    type ComponentType,
+    forwardRef,
+    memo,
+    type PropsWithoutRef,
+    type ReactNode,
+    useContext,
+    useMemo,
+} from 'react';
+import {
+    type GestureResponderEvent,
+    type StyleProp,
+    type TextProps,
+    type TextStyle,
+    View,
+    type ViewProps,
+    type ViewStyle,
+} from 'react-native';
+
+import { useActionState } from '../../hooks';
+import type { WithElements } from '../../types';
+import type { MD3Elevation } from '../../types/theme';
+import { BackgroundContext, resolveStateVariant } from '../../utils';
+import { ActivityIndicator, type ActivityIndicatorProps } from '../ActivityIndicator';
+import { Icon, type IconProps } from '../Icon';
+import { IconButton, type IconButtonProps } from '../IconButton';
+import { StateLayer } from '../StateLayer';
+import { Surface } from '../Surface';
+import { Text } from '../Text';
+import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
+import { type States, styles } from './utils';
+
+export type Props = Omit<TouchableRippleProps, 'children'> &
+    WithElements<ReactNode> & {
+        /**
+         * label of the chip
+         * Will be truncated if it's longer than 20 characters
+         */
+        label: string;
+        /**
+         * character limit of the label
+         */
+        labelCharacterLimit?: number;
+        /**
+         * Variant of the chip.
+         * - `elevated` - elevated chip with shadow and without outline.
+         * - `outlined` - chip with an outline. (outline will always have elevation 0 even if it's specified)
+         */
+        variant?: 'elevated' | 'outlined';
+        /**
+         *
+         * */
+        size?: 'sm' | 'md';
+        /**
+         * callback event when the closeIcon is pressed
+         */
+        onClose?: () => void;
+        /**
+         * elevation level of the elevated chip
+         */
+        elevation?: MD3Elevation;
+        /**
+         * selected state
+         */
+        selected?: boolean;
+        /**
+         * props for the close icon
+         * default is { name: 'close', onPress: onClose, disabled, accessibilityLabel: 'Close' }
+         */
+        closeIconProps?: Partial<IconButtonProps>;
+        /**
+         * props for the ActivityIndicator
+         * default is { size: 18 }
+         */
+        activityIndicatorProps?: Partial<ActivityIndicatorProps>;
+        /**
+         * Whether to style the chip color as selected.
+         */
+        selectedColor?: string;
+        /**
+         * Whether to display overlay on selected chip
+         */
+        selectionBackgroundColor?: string;
+        /**
+         * Accessibility label for the chip. This is read by the screen reader when the user taps the chip.
+         */
+        accessibilityLabel?: string;
+        /**
+         * Whether the chip is disabled. A disabled chip is greyed out and `onPress` is not called on touch.
+         */
+        disabled?: boolean;
+        /**
+         * Function to execute on press.
+         */
+        onPress?: (e: GestureResponderEvent) => void;
+        /**
+         * Whether to show the ActivityIndicator or not
+         */
+        loading?: boolean;
+        /**
+         * container style
+         */
+        containerStyle?: ViewStyle;
+        /**
+         * left element container style
+         */
+        leftElementContainerStyle?: ViewStyle;
+        /**
+         * right element container style
+         */
+        rightElementContainerStyle?: ViewStyle;
+        /**
+         * label style
+         */
+        labelStyle?: Partial<TextStyle>;
+        /**
+         * Pass down testID from chip props to touchable for Detox tests.
+         */
+        /**
+         * props for the stateLayer
+         */
+        stateLayerProps?: PropsWithoutRef<ViewProps>;
+        testID?: string;
+        containerProps?: Omit<PropsWithoutRef<ViewProps>, 'style'>;
+        leftElementIconProps?: IconProps;
+        rightElementIconProps?: IconProps;
+        backgroundColor?: string;
+
+        invertLabelColor?: boolean;
+    };
+
+const Chip = (
+    {
+        style,
+        containerStyle: containerStyleProp,
+        label: _label,
+        labelCharacterLimit = 20,
+        variant = 'outlined',
+        size = 'md',
+        disabled,
+        elevation: elevationProp = 1,
+        left,
+        right,
+        loading = false,
+        onClose,
+        closeIconProps,
+        activityIndicatorProps,
+        selected = false,
+        leftElementContainerStyle,
+        rightElementContainerStyle,
+        labelStyle: labelStyleProp,
+        accessibilityLabel,
+        selectedColor,
+        selectionBackgroundColor,
+        stateLayerProps = {},
+        testID = 'chip',
+        containerProps,
+        leftElementIconProps,
+        invertLabelColor,
+        backgroundColor,
+        ...rest
+    }: Props,
+    ref: any,
+) => {
+    const { hovered, actionsRef } = useActionState({ ref, actionsToListen: ['hover'] });
+
+    const state = resolveStateVariant({
+        disabled: !!disabled,
+        selected,
+        selectedAndHovered: selected && hovered,
+        hovered,
+    });
+
+    styles.useVariants({
+        variant,
+        size,
+        state: state as States,
+    });
+
+    const iconSize = size === 'sm' ? 15 : 18;
+    // const componentStyles = useComponentStyles('Chip', [
+    //     style,
+    //     {
+    //         container: containerStyleProp || {},
+    //         leftElement: leftElementContainerStyleProp || {},
+    //         rightElement: rightElementContainerStyleProp || {},
+    //         label: labelStyleProp || {},
+    //     },
+    //     selectionBackgroundColorProp
+    //         ? { selectionBackgroundColor: selectionBackgroundColorProp }
+    //         : {},
+    //     selectedColorProp ? { selectedColor: selectedColorProp } : {},
+    // ]);
+
+    const {
+        containerStyle,
+        touchableRippleStyle,
+        leftElementStyle,
+        rightElementStyle,
+        labelStyle,
+        stateLayerStyle,
+    } = useMemo(() => {
+        return {
+            containerStyle: [
+                styles.container,
+                selected && selectionBackgroundColor
+                    ? { backgroundColor: selectionBackgroundColor }
+                    : {},
+                containerStyleProp,
+            ],
+            touchableRippleStyle: [styles.touchableRippleContainer, style],
+            leftElementStyle: [styles.leftElement, leftElementContainerStyle],
+            rightElementStyle: [styles.rightElement, rightElementContainerStyle],
+            labelStyle: [
+                styles.label,
+                selected && selectedColor ? { color: selectedColor } : {},
+                labelStyleProp,
+            ],
+            stateLayerStyle: [styles.stateLayer, stateLayerProps?.style],
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        leftElementContainerStyle,
+        rightElementContainerStyle,
+        selected,
+        selectedColor,
+        selectionBackgroundColor,
+        stateLayerProps?.style,
+        style,
+        containerStyleProp,
+        labelStyleProp,
+        state,
+        size,
+        variant,
+    ]);
+
+    const { accessibilityState, elevation } = useMemo(
+        () => ({
+            accessibilityState: {
+                selected,
+                disabled,
+            },
+            elevation: variant === 'outlined' || disabled ? 0 : elevationProp,
+        }),
+        [disabled, elevationProp, selected, variant],
+    );
+    const label = `${_label}`.trim();
+
+    return (
+        <Surface
+            {...containerProps}
+            elevation={elevation}
+            style={containerStyle}
+            backgroundColor={backgroundColor}>
+            <TouchableRipple
+                borderless
+                {...rest}
+                disabled={disabled}
+                style={touchableRippleStyle}
+                accessibilityLabel={accessibilityLabel}
+                accessibilityRole="button"
+                accessibilityState={accessibilityState}
+                ref={actionsRef}
+                testID={testID}>
+                <>
+                    <LeftElement
+                        iconSize={iconSize}
+                        leftElementStyle={leftElementStyle}
+                        left={left}
+                        activityIndicatorProps={activityIndicatorProps}
+                        loading={loading}
+                        selected={selected}
+                        iconProps={leftElementIconProps}
+                        invert={invertLabelColor}
+                    />
+                    <Label
+                        selectable={false}
+                        style={labelStyle as TextProps['style']}
+                        invert={invertLabelColor}>
+                        {label.length < labelCharacterLimit
+                            ? label
+                            : `${label.substring(0, labelCharacterLimit - 3)}...`}
+                    </Label>
+                    <RightElement
+                        rightElementStyle={rightElementStyle}
+                        accessibilityState={accessibilityState}
+                        right={right}
+                        disabled={disabled}
+                        onClose={onClose}
+                        closeIconProps={closeIconProps}
+                        invert={invertLabelColor}
+                    />
+
+                    <StateLayer
+                        testID={testID ? `${testID}-stateLayer` : ''}
+                        {...stateLayerProps}
+                        style={stateLayerStyle}
+                    />
+                </>
+            </TouchableRipple>
+        </Surface>
+    );
+};
+
+type LeftElementProps = Pick<Props, 'activityIndicatorProps' | 'left' | 'loading' | 'selected'> & {
+    leftElementStyle: StyleProp<ViewStyle>;
+    iconSize: number;
+    iconProps?: IconProps;
+    invert?: boolean;
+};
+const LeftElement = memo(
+    ({
+        iconSize,
+        loading,
+        left,
+        selected,
+        activityIndicatorProps,
+        leftElementStyle,
+        iconProps,
+        invert,
+    }: LeftElementProps) => {
+        return loading || left || selected ? (
+            <View style={leftElementStyle}>
+                {loading ? (
+                    <ActivityIndicator size={iconSize} {...(activityIndicatorProps || {})} />
+                ) : (
+                    left || (
+                        <IconWithContrastColor
+                            name="check"
+                            size={iconSize}
+                            {...iconProps}
+                            invert={invert}
+                        />
+                    )
+                )}
+            </View>
+        ) : (
+            <></>
+        );
+    },
+);
+
+type RightElementProps = Pick<
+    Props,
+    'onClose' | 'right' | 'closeIconProps' | 'disabled' | 'accessibilityState'
+> & {
+    rightElementStyle: StyleProp<ViewStyle>;
+    invert?: boolean;
+};
+const RightElement = memo(
+    ({
+        onClose,
+        right,
+        disabled,
+        closeIconProps,
+        rightElementStyle,
+        accessibilityState,
+        invert,
+    }: RightElementProps) => {
+        return onClose || right ? (
+            <View style={rightElementStyle}>
+                {onClose ? (
+                    <IconButtonWithContrastColor
+                        name="close"
+                        size={18}
+                        accessibilityLabel="Close"
+                        disabled={disabled}
+                        onPress={onClose}
+                        accessibilityState={accessibilityState}
+                        {...(closeIconProps || {})}
+                        invert={invert}
+                    />
+                ) : (
+                    right
+                )}
+            </View>
+        ) : (
+            <></>
+        );
+    },
+);
+
+const withInvertColorResolved =
+    <T extends { style?: TextProps['style'] } = {}>(
+        Component: ComponentType<T>,
+        prop: string = 'style',
+    ) =>
+    ({ invert, ...props }: T & { invert?: boolean }) => {
+        const { color: contrastColor } = useContext(BackgroundContext);
+
+        const componentStyle = useMemo(
+            () => (!invert ? props.style : [props.style, { color: contrastColor }]),
+            [invert, props.style, contrastColor],
+        );
+
+        const normalizedProps = {
+            ...props,
+            [prop]: componentStyle,
+        } as unknown as T;
+
+        return <Component {...normalizedProps} />;
+    };
+
+const Label = withInvertColorResolved((props: TextProps) => {
+    return <Text {...props} />;
+});
+
+const IconWithContrastColor = withInvertColorResolved((props: IconProps) => {
+    return <Icon {...props} />;
+});
+
+const IconButtonWithContrastColor = withInvertColorResolved((props: IconButtonProps) => {
+    return <IconButton {...props} />;
+}, 'iconStyle');
+
+export default memo(forwardRef(Chip));