react-native-molecules 0.5.0-beta.0

package/components/IconButton/IconButton.tsx

@@ -0,0 +1,218 @@
+import color from 'color';
+import { forwardRef, memo, useMemo } from 'react';
+import {
+    type GestureResponderEvent,
+    type StyleProp,
+    type TextStyle,
+    type ViewProps,
+    type ViewStyle,
+} from 'react-native';
+
+import { useActionState } from '../../hooks/useActionState';
+import { resolveStateVariant } from '../../utils';
+import { Icon, type IconType } from '../Icon';
+import CrossFadeIcon from '../Icon/CrossFadeIcon';
+import { StateLayer } from '../StateLayer';
+import { Surface } from '../Surface';
+import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
+import type { IconButtonVariant } from './types';
+import { defaultStyles, iconButtonSizeToIconSizeMap } from './utils';
+
+const whiteSpace = 12;
+
+export type Props = Omit<TouchableRippleProps, 'children' | 'style'> & {
+    /**
+     * Icon to display.
+     */
+    name: string;
+    /**
+     * Mode of the icon button. By default there is no specified mode - only pressable icon will be rendered.
+     */
+    variant?: IconButtonVariant;
+    /**
+     * Whether icon button is selected. A selected button receives alternative combination of icon and container colors.
+     */
+    selected?: boolean;
+    /**
+     * Size of the icon.
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | number;
+    /**
+     * Type of the icon. Default is material
+     * Should be a number or a Design Token
+     */
+    type?: IconType;
+    /**
+     * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.
+     */
+    disabled?: boolean;
+    /**
+     * Whether an icon change is animated.
+     */
+    animated?: boolean;
+    /**
+     * Accessibility label for the button. This is read by the screen reader when the user taps the button.
+     */
+    accessibilityLabel?: string;
+    /**
+     * Function to execute on press.
+     */
+    onPress?: (e: GestureResponderEvent) => void;
+    /**
+     * backgroundColor and color will be extracted from here and act as buttonBackgroundColor and iconColor
+     */
+    style?: StyleProp<TextStyle>;
+    iconStyle?: StyleProp<TextStyle>;
+    /**
+     * color of the icon
+     */
+    color?: string;
+    /**
+     * Style of the innerContainer
+     */
+    innerContainerStyle?: ViewStyle;
+    /**
+     * Props for the state layer
+     * */
+    stateLayerProps?: ViewProps;
+};
+
+const emptyObject = {};
+
+const IconButton = (
+    {
+        name,
+        size = 24,
+        color: _iconColor,
+        type,
+        accessibilityLabel,
+        disabled = false,
+        onPress,
+        selected = false,
+        animated = false,
+        variant = 'default',
+        style,
+        innerContainerStyle: innerContainerStyleProp = emptyObject,
+        testID,
+        stateLayerProps = emptyObject,
+        iconStyle,
+        ...rest
+    }: Props,
+    ref: any,
+) => {
+    const IconComponent = animated ? CrossFadeIcon : Icon;
+
+    const { hovered, actionsRef } = useActionState({ ref, actionsToListen: ['hover'] });
+
+    const state = resolveStateVariant({
+        selectedAndDisabled: selected && disabled,
+        selectedAndHovered: hovered && selected,
+        disabled,
+        hovered,
+        selected,
+    });
+
+    defaultStyles.useVariants({
+        variant,
+        state,
+        size: typeof size === 'string' && size ? size : undefined,
+    });
+
+    const {
+        iconColor,
+        iconSize,
+        rippleColor,
+        containerStyle,
+        accessibilityState,
+        innerContainerStyle,
+        // accessibilityTraits,
+        stateLayerStyle,
+    } = useMemo(() => {
+        const iconSizeInNum =
+            iconButtonSizeToIconSizeMap[size as keyof typeof iconButtonSizeToIconSizeMap] ??
+            (typeof size === 'number' && size ? (size as number) : undefined);
+
+        let _rippleColor: string | undefined;
+
+        try {
+            _rippleColor = color(_iconColor).alpha(0.12).rgb().string();
+        } catch (e) {
+            _rippleColor = undefined;
+        }
+
+        return {
+            iconColor: _iconColor,
+            iconSize: iconSizeInNum,
+            rippleColor: _rippleColor,
+            innerContainerStyle: [defaultStyles.innerContainer, innerContainerStyleProp],
+            containerStyle: [
+                iconSizeInNum
+                    ? {
+                          width: iconSizeInNum + whiteSpace,
+                          height: iconSizeInNum + whiteSpace,
+                      }
+                    : {},
+                defaultStyles.root,
+                style,
+            ],
+            // accessibilityTraits: disabled ? ['button', 'disabled'] : 'button',
+            accessibilityState: { disabled },
+            stateLayerStyle: [defaultStyles.stateLayer, stateLayerProps?.style],
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        _iconColor,
+        disabled,
+        innerContainerStyleProp,
+        size,
+        stateLayerProps?.style,
+        style,
+        state,
+        variant,
+    ]);
+
+    return (
+        <Surface style={containerStyle} elevation={0}>
+            <TouchableRipple
+                borderless
+                centered
+                onPress={onPress}
+                rippleColor={rippleColor}
+                accessibilityLabel={accessibilityLabel}
+                style={innerContainerStyle}
+                // accessibilityTraits={accessibilityTraits}
+                // accessibilityComponentType="button"
+                accessibilityRole="button"
+                accessibilityState={accessibilityState}
+                disabled={disabled}
+                hitSlop={
+                    // @ts-ignore
+                    TouchableRipple?.supported ? rippleSupportedHitSlop : rippleUnsupportedHitSlop
+                }
+                // @ts-ignore
+                ref={actionsRef}
+                testID={testID}
+                {...rest}>
+                <>
+                    <IconComponent
+                        color={iconColor}
+                        name={name}
+                        size={iconSize}
+                        type={type}
+                        style={iconStyle}
+                    />
+                    <StateLayer
+                        testID={testID ? `${testID}-stateLayer` : ''}
+                        {...stateLayerProps}
+                        style={stateLayerStyle}
+                    />
+                </>
+            </TouchableRipple>
+        </Surface>
+    );
+};
+
+const rippleSupportedHitSlop = { top: 10, left: 10, bottom: 10, right: 10 };
+const rippleUnsupportedHitSlop = { top: 6, left: 6, bottom: 6, right: 6 };
+
+export default memo(forwardRef(IconButton));

package/components/IconButton/index.tsx

@@ -0,0 +1,11 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import IconButtonDefault from './IconButton';
+
+registerMoleculesComponents({
+    IconButton: IconButtonDefault,
+});
+
+export const IconButton = getRegisteredComponentWithFallback('IconButton', IconButtonDefault);
+
+export type { Props as IconButtonProps } from './IconButton';
+export { defaultStyles } from './utils';

package/components/IconButton/types.ts

@@ -0,0 +1 @@
+export type IconButtonVariant = 'default' | 'outlined' | 'contained' | 'contained-tonal';

package/components/IconButton/utils.ts

@@ -0,0 +1,325 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import {
+    getRegisteredMoleculesComponentStyles,
+    registerComponentsStyles,
+    registerComponentUtils,
+} from '../../core';
+import { getRegisteredComponentUtils } from './../../core/componentsRegistry';
+
+export type States =
+    | 'selectedAndDisabled'
+    | 'disabled'
+    | 'selected'
+    | 'hovered'
+    | 'selectedAndHovered';
+
+const iconButtonSizeToIconSizeMapDefault = {
+    xs: 14,
+    sm: 18,
+    md: 22,
+    lg: 26,
+};
+
+const iconButtonStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        borderColor: theme.colors.outline,
+        color: theme.colors.onSurfaceVariant,
+        borderRadius: theme.shapes.corner.full,
+        overflow: 'hidden',
+        borderWidth: 0,
+        backgroundColor: 'transparent',
+
+        variants: {
+            size: {
+                xs: {
+                    width: 26,
+                    height: 26,
+                    borderRadius: theme.shapes.corner.full,
+                },
+                sm: {
+                    width: 30,
+                    height: 30,
+                    borderRadius: theme.shapes.corner.full,
+                },
+                md: {
+                    width: 34,
+                    height: 34,
+                    borderRadius: theme.shapes.corner.full,
+                },
+                lg: {
+                    width: 38,
+                    height: 38,
+                    borderRadius: theme.shapes.corner.full,
+                },
+                undefined: {},
+            },
+
+            state: {
+                disabled: {
+                    opacity: 0.38,
+                },
+                selectedAndDisabled: {
+                    opacity: 0.38,
+                },
+                selected: {},
+                selectedAndHovered: {},
+                hovered: {},
+                default: {},
+            },
+
+            variant: {
+                default: {},
+
+                contained: {
+                    backgroundColor: theme.colors.surfaceVariant,
+                    color: theme.colors.primary,
+                },
+
+                'contained-tonal': {
+                    backgroundColor: theme.colors.surfaceVariant,
+                    color: theme.colors.onSurfaceVariant,
+                },
+
+                outlined: {
+                    color: theme.colors.onSurfaceVariant,
+                    borderWidth: 1,
+                },
+            },
+        },
+
+        compoundVariants: [
+            {
+                variant: 'default',
+                state: 'selectedAndDisabled',
+                styles: {
+                    color: theme.colors.primary,
+                },
+            },
+            {
+                variant: 'default',
+                state: 'selected',
+                styles: {
+                    color: theme.colors.primary,
+                },
+            },
+            {
+                variant: 'default',
+                state: 'selectedAndHovered',
+                styles: {
+                    color: theme.colors.primary,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'selectedAndDisabled',
+                styles: {
+                    backgroundColor: theme.colors.primary,
+                    color: theme.colors.onPrimary,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'disabled',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.disabled.onSurface,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'selected',
+                styles: {
+                    backgroundColor: theme.colors.primary,
+                    color: theme.colors.onPrimary,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'selectedAndHovered',
+                styles: {
+                    color: theme.colors.primary,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'hovered',
+                styles: {
+                    backgroundColor: theme.colors.primary,
+                    color: theme.colors.onPrimary,
+                },
+            },
+            {
+                variant: 'contained-tonal',
+                state: 'selectedAndDisabled',
+                styles: {
+                    backgroundColor: theme.colors.secondaryContainer,
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'contained-tonal',
+                state: 'disabled',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.disabled.onSurface,
+                },
+            },
+            {
+                variant: 'contained-tonal',
+                state: 'selected',
+                styles: {
+                    backgroundColor: theme.colors.secondaryContainer,
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'contained-tonal',
+                state: 'selectedAndHovered',
+                styles: {
+                    backgroundColor: theme.colors.secondaryContainer,
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'selectedAndDisabled',
+                styles: {
+                    backgroundColor: theme.colors.inverseSurface,
+                    color: theme.colors.inverseOnSurface,
+                    borderWidth: 0,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'disabled',
+                styles: {
+                    borderColor: theme.colors.onSurface,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'selected',
+                styles: {
+                    backgroundColor: theme.colors.inverseSurface,
+                    color: theme.colors.inverseOnSurface,
+                    borderWidth: 0,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'selectedAndHovered',
+                styles: {
+                    backgroundColor: theme.colors.secondaryContainer,
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'hovered',
+                styles: {
+                    backgroundColor: theme.colors.inverseSurface,
+                    color: theme.colors.inverseOnSurface,
+                    borderWidth: 0,
+                },
+            },
+        ],
+    },
+    stateLayer: {
+        variants: {
+            state: {
+                disabled: {},
+                selectedAndDisabled: {},
+                selected: {},
+                selectedAndHovered: {},
+                hovered: {},
+                default: {},
+            },
+            size: {
+                undefined: {},
+            },
+
+            variant: {
+                default: {},
+                contained: {},
+                'contained-tonal': {},
+                outlined: {},
+            },
+        },
+        compoundVariants: [
+            {
+                variant: 'default',
+                state: 'selectedAndHovered',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.hover.primary,
+                },
+            },
+            {
+                variant: 'default',
+                state: 'hovered',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurfaceVariant,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'selectedAndHovered',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.hover.primary,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'hovered',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.hover.onPrimary,
+                },
+            },
+            {
+                variant: 'contained-tonal',
+                state: 'selectedAndHovered',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'contained-tonal',
+                state: 'hovered',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurfaceVariant,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'selectedAndHovered',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'hovered',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.hover.inverseOnSurface,
+                },
+            },
+        ],
+    },
+
+    innerContainer: {
+        flexGrow: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+}));
+
+registerComponentsStyles({
+    IconButton: iconButtonStylesDefault,
+});
+
+registerComponentUtils('IconButton', {
+    iconButtonSizeToIconSizeMapDefault,
+});
+
+export const defaultStyles = getRegisteredMoleculesComponentStyles('IconButton');
+export const iconButtonSizeToIconSizeMap =
+    getRegisteredComponentUtils('IconButton')?.iconButtonSizeToIconSizeMapDefault ||
+    iconButtonSizeToIconSizeMapDefault;

package/components/If/index.tsx

@@ -0,0 +1,13 @@
+import type { PropsWithChildren } from 'react';
+
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+
+const IfDefault = (props: PropsWithChildren<{ shouldRender?: boolean }>) => {
+    return <>{!!props.shouldRender && props.children}</>;
+};
+
+registerMoleculesComponents({
+    If: IfDefault,
+});
+
+export const If = getRegisteredComponentWithFallback('If', IfDefault);

package/components/InputAddon/InputAddon.tsx

@@ -0,0 +1,27 @@
+import { memo } from 'react';
+import { View, type ViewProps } from 'react-native';
+
+import { inputAddonStyles } from './utils';
+
+enum InputAddonVariants {
+    Left = 'left',
+    Right = 'right',
+}
+
+export type Props = ViewProps & {
+    variant: `${InputAddonVariants}`;
+};
+
+const InputAddon = ({ variant, style, children, ...rest }: Props) => {
+    inputAddonStyles.useVariants({
+        variant,
+    });
+
+    return (
+        <View style={[inputAddonStyles.root, style]} {...rest}>
+            {children}
+        </View>
+    );
+};
+
+export default memo(InputAddon);

package/components/InputAddon/index.tsx

@@ -0,0 +1,11 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import InputAddonDefault from './InputAddon';
+
+registerMoleculesComponents({
+    InputAddon: InputAddonDefault,
+});
+
+export const InputAddon = getRegisteredComponentWithFallback('InputAddon', InputAddonDefault);
+
+export type { Props as InputAddonProps } from './InputAddon';
+export { inputAddonStyles } from './utils';

package/components/InputAddon/utils.ts

@@ -0,0 +1,33 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const inputAddonStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: theme.colors.surfaceVariant,
+        borderColor: theme.colors.outline,
+        borderWidth: 1,
+        borderRadius: theme.spacings['1'],
+        paddingHorizontal: theme.spacings['2'],
+
+        variants: {
+            variant: {
+                left: {
+                    borderRightWidth: 0,
+                },
+
+                right: {
+                    borderLeftWidth: 0,
+                },
+            },
+        },
+    },
+}));
+
+registerComponentsStyles({
+    InputAddon: inputAddonStylesDefault,
+});
+
+export const inputAddonStyles = getRegisteredMoleculesComponentStyles('InputAddon');

package/components/Link/Link.tsx

@@ -0,0 +1,48 @@
+import { forwardRef, memo, useCallback } from 'react';
+import { type GestureResponderEvent, Linking, Platform, type TextProps } from 'react-native';
+
+import { resolveStateVariant } from '../../utils';
+import { Text } from '../Text';
+import { linkStyles } from './utils';
+
+export type Props = TextProps & {
+    href?: string;
+    disabled?: boolean;
+};
+
+const Link = (
+    { style, children, onPress: onPressProp, href, disabled = false, ...rest }: Props,
+    ref: any,
+) => {
+    linkStyles.useVariants({
+        state: resolveStateVariant({
+            disabled,
+        }) as any,
+    });
+
+    const onPress = useCallback(
+        (e: GestureResponderEvent) => {
+            if (disabled) return;
+
+            onPressProp?.(e);
+
+            if (Platform.OS === 'web') return;
+            if (href) Linking.openURL(href);
+        },
+        [disabled, onPressProp, href],
+    );
+
+    return (
+        <Text
+            style={[linkStyles.root, style]}
+            {...(Platform.OS === 'web' ? { href } : {})}
+            onPress={onPress}
+            accessibilityRole="link"
+            {...rest}
+            ref={ref}>
+            {children}
+        </Text>
+    );
+};
+
+export default memo(forwardRef(Link));