react-native-molecules 0.5.0-beta.0

package/components/Card/CardMedia.tsx

@@ -0,0 +1,36 @@
+import { forwardRef, memo, type ReactNode } from 'react';
+import { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+
+export type Props = ViewProps & {
+    style?: StyleProp<ViewStyle>;
+    children: ReactNode;
+};
+
+const CardMedia = memo(
+    forwardRef(({ style, children, ...rest }: Props, ref: any) => {
+        return (
+            <View style={[cardMediaStyles.root, style]} {...rest} ref={ref}>
+                {children}
+            </View>
+        );
+    }),
+);
+
+const cardMediaStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        height: 195,
+        borderRadius: theme.shapes.corner.medium,
+        overflow: 'hidden',
+        marginBottom: theme.spacings['4'],
+    },
+}));
+
+registerComponentStyles('Card_Media', cardMediaStylesDefault);
+export const cardMediaStyles = getRegisteredMoleculesComponentStyles('Card_Media');
+
+CardMedia.displayName = 'Card_Media';
+
+export default CardMedia;

package/components/Card/CardSubhead.tsx

@@ -0,0 +1,15 @@
+import { forwardRef, memo } from 'react';
+
+import CardTypography, { type Props as TypographyProps } from './CardTypography';
+
+export type Props = Omit<TypographyProps, 'variant'>;
+
+const CardSubhead = memo(
+    forwardRef(({ size = 'md', ...rest }: Props, ref: any) => {
+        return (
+            <CardTypography ref={ref} selectable={false} size={size} {...rest} variant="subhead" />
+        );
+    }),
+);
+
+export default CardSubhead;

package/components/Card/CardText.tsx

@@ -0,0 +1,13 @@
+import { forwardRef, memo } from 'react';
+
+import CardTypography, { type Props as TypographyProps } from './CardTypography';
+
+export type Props = Omit<TypographyProps, 'variant'>;
+
+const CardText = memo(
+    forwardRef(({ size = 'md', ...rest }: Props, ref: any) => {
+        return <CardTypography ref={ref} selectable={false} size={size} {...rest} variant="text" />;
+    }),
+);
+
+export default CardText;

package/components/Card/CardTypography.tsx

@@ -0,0 +1,113 @@
+import { forwardRef, memo } from 'react';
+import { type TextProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { Text } from '../Text';
+
+export type Props = TextProps & {
+    variant?: 'headline' | 'subhead' | 'text';
+    size?: 'sm' | 'md' | 'lg';
+};
+
+const CardTypography = ({ style, variant = 'text', size = 'md', ...rest }: Props, ref: any) => {
+    cardTypograhyStyles.useVariants({
+        variant,
+        // @ts-ignore
+        size,
+    });
+
+    return (
+        <Text ref={ref} selectable={false} {...rest} style={[cardTypograhyStyles.root, style]} />
+    );
+};
+
+const cardTypograhyStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        color: theme.colors.onSurface,
+
+        variants: {
+            variant: {
+                headline: {
+                    marginBottom: theme.spacings['3'],
+                },
+                subhead: {
+                    marginBottom: theme.spacings['3'],
+                },
+                text: {
+                    marginBottom: theme.spacings['1'],
+                },
+            },
+        },
+        compoundVariants: [
+            {
+                variant: 'headline',
+                size: 'sm',
+                styles: {
+                    ...theme.typescale.headlineSmall,
+                },
+            },
+            {
+                variant: 'headline',
+                size: 'md',
+                styles: {
+                    ...theme.typescale.headlineMedium,
+                },
+            },
+            {
+                variant: 'headline',
+                size: 'lg',
+                styles: {
+                    ...theme.typescale.headlineLarge,
+                },
+            },
+            {
+                variant: 'subhead',
+                size: 'sm',
+                styles: {
+                    ...theme.typescale.titleSmall,
+                },
+            },
+            {
+                variant: 'subhead',
+                size: 'md',
+                styles: {
+                    ...theme.typescale.titleMedium,
+                },
+            },
+            {
+                variant: 'subhead',
+                size: 'lg',
+                styles: {
+                    ...theme.typescale.titleLarge,
+                },
+            },
+            {
+                variant: 'text',
+                size: 'sm',
+                styles: {
+                    ...theme.typescale.bodySmall,
+                },
+            },
+            {
+                variant: 'text',
+                size: 'md',
+                styles: {
+                    ...theme.typescale.bodyMedium,
+                },
+            },
+            {
+                variant: 'text',
+                size: 'lg',
+                styles: {
+                    ...theme.typescale.bodyLarge,
+                },
+            },
+        ],
+    },
+}));
+
+registerComponentStyles('Card_Typography', cardTypograhyStylesDefault);
+export const cardTypograhyStyles = getRegisteredMoleculesComponentStyles('Card_Typography');
+
+export default memo(forwardRef(CardTypography));

package/components/Card/index.tsx

@@ -0,0 +1,38 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { default as CardComponent } from './Card';
+import { default as CardActions } from './CardActions';
+import { default as CardContent } from './CardContent';
+import { default as CardHeader } from './CardHeader';
+import { default as CardHeadline } from './CardHeadline';
+import { default as CardMedia } from './CardMedia';
+import { default as CardSubhead } from './CardSubhead';
+import { default as CardText } from './CardText';
+export const CardDefault = Object.assign(
+    // @component ./Checkbox.tsx
+    CardComponent,
+    {
+        Header: CardHeader,
+        Content: CardContent,
+        Media: CardMedia,
+        Headline: CardHeadline,
+        Subhead: CardSubhead,
+        Text: CardText,
+        Actions: CardActions,
+    },
+);
+
+registerMoleculesComponents({
+    Card: CardDefault,
+});
+
+export const Card = getRegisteredComponentWithFallback('Card', CardDefault);
+
+export { type Props as CardProps, cardStyles } from './Card';
+export { type Props as CardActionsProps } from './CardActions';
+export { type Props as CardContentProps, cardContentStyles } from './CardContent';
+export { type Props as CardHeaderProps, cardHeaderStyles } from './CardHeader';
+export { type Props as CardMediaProps, cardMediaStyles } from './CardMedia';
+export { type Props as CardTextProps, cardTypograhyStyles } from './CardTypography';
+export type { CardTypographyVariant } from './utils';
+export type { CardTypographySize } from './utils';
+export { cardActionsStyles } from './utils';

package/components/Card/types.ts

@@ -0,0 +1 @@
+export type CardVariant = 'elevated' | 'outlined' | 'filled';

package/components/Card/utils.ts

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+export type States = 'hovered' | 'focused' | 'pressed' | 'disabled';
+export type CardTypographyVariant = 'headline' | 'subhead' | 'text';
+export type CardTypographySize = 'sm' | 'md' | 'lg';
+
+const cardActionsStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        paddingHorizontal: theme.spacings['4'],
+        paddingBottom: theme.spacings['4'],
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme.spacings['3'],
+    },
+}));
+
+registerComponentsStyles({
+    Card_Actions: cardActionsStylesDefault,
+});
+
+export const cardActionsStyles = getRegisteredMoleculesComponentStyles('Card_Actions');

package/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,123 @@
+import { forwardRef, memo, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { useControlledValue } from '../../hooks';
+import { resolveStateVariant } from '../../utils';
+import { Text } from '../Text';
+import CheckboxBase from './CheckboxBase';
+import type { CheckBoxBaseProps, States } from './types';
+import { styles } from './utils';
+
+export type Props = CheckBoxBaseProps;
+
+const Checkbox = (
+    {
+        value: valueProp,
+        onChange: onChangeProp,
+        defaultValue,
+        disabled,
+        indeterminate,
+        label,
+        labelStyle,
+        containerStyle,
+        labelProps,
+        position = 'leading',
+        accessibilityLabel: accessibilityLabelProp,
+        testID,
+        size = 'md',
+        style: styleProp,
+        ...rest
+    }: Props,
+    ref: any,
+) => {
+    const [value, onChange] = useControlledValue({
+        value: valueProp,
+        onChange: onChangeProp,
+        defaultValue,
+        disabled: disabled,
+    });
+
+    // Prepare label-related state and styles (always compute, even if not used)
+    const isLeading = position === 'leading';
+    const checked = Boolean(value) && !indeterminate;
+    const state = resolveStateVariant({ disabled: Boolean(disabled), checked });
+    const accessibilityLabel = accessibilityLabelProp ?? label;
+
+    // Use variants only when label is provided
+    if (label) {
+        styles.useVariants({
+            variant: 'item',
+            state: state as States,
+            isLeading,
+            size,
+        });
+    }
+
+    const { containerStyles, labelStyles, style } = useMemo(() => {
+        return {
+            containerStyles: [styles.itemContainer, containerStyle],
+            labelStyles: [
+                // @ts-ignore
+                styles.label,
+                labelStyle,
+            ],
+            style: [styles.root, styleProp],
+        };
+    }, [containerStyle, labelStyle, styleProp]);
+
+    const onLabelPress = useCallback(() => {
+        if (!disabled) {
+            onChange(!value);
+        }
+    }, [onChange, value, disabled]);
+
+    const accessibilityState = useMemo(
+        () => ({
+            checked: Boolean(value),
+            disabled,
+        }),
+        [disabled, value],
+    );
+
+    const checkboxStyle = label ? style : styleProp;
+    const checkboxAccessibilityLabel = label ? undefined : accessibilityLabelProp;
+
+    const checkbox = (
+        <CheckboxBase
+            ref={label ? undefined : ref}
+            value={value}
+            onChange={onChange}
+            disabled={disabled}
+            indeterminate={indeterminate}
+            size={size}
+            style={checkboxStyle}
+            testID={testID}
+            accessibilityLabel={checkboxAccessibilityLabel}
+            {...rest}
+        />
+    );
+
+    if (!label) {
+        return checkbox;
+    }
+
+    return (
+        <View style={containerStyles} ref={ref}>
+            {isLeading && checkbox}
+            <Text
+                onPress={onLabelPress}
+                disabled={disabled}
+                selectable={false}
+                accessibilityLabel={accessibilityLabel}
+                accessibilityRole="checkbox"
+                accessibilityState={accessibilityState}
+                {...labelProps}
+                style={labelStyles}>
+                {label}
+            </Text>
+            {!isLeading && checkbox}
+        </View>
+    );
+};
+
+export default memo(forwardRef(Checkbox));

package/components/Checkbox/CheckboxBase.ios.tsx

@@ -0,0 +1,86 @@
+import setColor from 'color';
+import { forwardRef, memo, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { resolveStateVariant } from '../../utils';
+import { Icon } from '../Icon';
+import { TouchableRipple } from '../TouchableRipple';
+import type { CheckBoxBaseProps, States } from './types';
+import { iconSizeMap, styles } from './utils';
+
+export type Props = Omit<CheckBoxBaseProps, 'uncheckedColor' | 'value' | 'defaultValue'> & {
+    value: boolean;
+};
+
+const CheckboxIOS = (
+    {
+        value: checked,
+        indeterminate,
+        disabled = false,
+        size = 'sm',
+        onChange: onChangeProp,
+        color: colorProp,
+        style,
+        testID,
+        ...rest
+    }: Props,
+    ref: any,
+) => {
+    const state = resolveStateVariant({
+        disabled,
+        checked: checked && !indeterminate,
+    });
+
+    styles.useVariants({
+        variant: 'ios',
+        state: state as States,
+        size,
+    });
+
+    const { checkedColor, iconSize, rippleColor, rippleContainerStyles, iconContainerStyles } =
+        useMemo(() => {
+            const _checkedColor = colorProp;
+
+            return {
+                checkedColor: _checkedColor,
+                iconSize: iconSizeMap[size],
+                rippleColor: setColor(_checkedColor).fade(0.32).rgb().string(),
+                rippleContainerStyles: [styles.root, style],
+                iconContainerStyles: { opacity: indeterminate || checked ? 1 : 0 },
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [checked, colorProp, indeterminate, style, state, size]);
+
+    const onChange = useCallback(() => {
+        onChangeProp?.(!checked);
+    }, [checked, onChangeProp]);
+
+    const icon = indeterminate ? 'minus' : 'check';
+
+    return (
+        <TouchableRipple
+            {...rest}
+            borderless
+            rippleColor={rippleColor}
+            onPress={onChange}
+            disabled={disabled}
+            accessibilityRole="checkbox"
+            accessibilityState={{ disabled, checked }}
+            accessibilityLiveRegion="polite"
+            style={rippleContainerStyles}
+            testID={testID}
+            ref={ref}>
+            <View style={iconContainerStyles}>
+                <Icon
+                    allowFontScaling={false}
+                    type="material-community"
+                    name={icon}
+                    size={iconSize}
+                    color={checkedColor}
+                />
+            </View>
+        </TouchableRipple>
+    );
+};
+
+export default memo(forwardRef(CheckboxIOS));

package/components/Checkbox/CheckboxBase.tsx

@@ -0,0 +1,216 @@
+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 { useActionState } from '../../hooks';
+import { resolveStateVariant } from '../../utils';
+import { tokenStylesParser } from '../../utils/tokenStylesParser';
+import { Icon } from '../Icon';
+import { StateLayer } from '../StateLayer';
+import { TouchableRipple } from '../TouchableRipple';
+import type { CheckBoxBaseProps, States } from './types';
+import { iconSizeMap, styles } from './utils';
+
+export type Props = Omit<CheckBoxBaseProps, 'value' | 'defaultValue'> & {
+    value: boolean;
+    /**
+     * props for the stateLayer
+     */
+    stateLayerProps?: PropsWithoutRef<ViewProps>;
+};
+
+const CheckboxAndroid = (
+    {
+        value: checked,
+        indeterminate,
+        disabled = false,
+        size = 'md',
+        onChange: onChangeProp,
+        testID,
+        style,
+        color: colorProp,
+        uncheckedColor: uncheckedColorProp,
+        stateLayerProps = {},
+        ...rest
+    }: 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({
+        disabled,
+        checkedAndHovered: checked && !indeterminate && hovered,
+        checked: checked && !indeterminate,
+        hovered,
+    });
+
+    styles.useVariants({
+        variant: 'android',
+        state: state as States,
+        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 onChange = useCallback(() => {
+        onChangeProp?.(!checked);
+    }, [checked, onChangeProp]);
+
+    const icon = indeterminate
+        ? 'minus-box'
+        : checked
+        ? 'checkbox-marked'
+        : 'checkbox-blank-outline';
+
+    const accessibilityState = useMemo(() => ({ disabled, checked }), [checked, disabled]);
+
+    return (
+        <TouchableRipple
+            {...rest}
+            borderless
+            rippleColor={rippleColor}
+            onPress={onChange}
+            disabled={disabled}
+            accessibilityRole="checkbox"
+            accessibilityState={accessibilityState}
+            accessibilityLiveRegion="polite"
+            style={rippleContainerStyles}
+            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>
+                <StateLayer
+                    testID={testID ? `${testID}-stateLayer` : ''}
+                    {...stateLayerProps}
+                    style={stateLayerStyle}
+                />
+            </>
+        </TouchableRipple>
+    );
+};
+
+// const styles = StyleSheet.create({
+//     fillContainer: {
+//         alignItems: 'center',
+//         justifyContent: 'center',
+//     },
+// });
+
+export default memo(forwardRef(CheckboxAndroid));

package/components/Checkbox/index.tsx

@@ -0,0 +1,11 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import CheckboxComponent from './Checkbox';
+
+registerMoleculesComponents({
+    Checkbox: CheckboxComponent,
+});
+
+export const Checkbox = getRegisteredComponentWithFallback('Checkbox', CheckboxComponent);
+
+export type { Props as CheckboxProps } from './Checkbox';
+export { styles as checkboxStyles } from './utils';