react-native-molecules 0.5.0-beta.0

package/components/RadioButton/RadioButtonItem.tsx

@@ -0,0 +1,232 @@
+import { forwardRef, memo, useCallback, useContext, useMemo } from 'react';
+import { type StyleProp, StyleSheet, type TextStyle, View, type ViewStyle } from 'react-native';
+
+import { resolveStateVariant } from '../../utils';
+import { Text } from '../Text';
+import { TouchableRipple } from '../TouchableRipple';
+import RadioButton from './RadioButton';
+import { RadioButtonContext } from './RadioButtonGroup';
+import { handlePress, isChecked, radioButtonItemStyles } from './utils';
+
+export type Props = {
+    /**
+     * Value of the radio button.
+     */
+    value: string;
+    /**
+     * Label to be displayed on the item.
+     */
+    label: string;
+    /**
+     * Whether radio is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Function to execute on press.
+     */
+    onPress?: () => void;
+    /**
+     * Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.
+     */
+    accessibilityLabel?: string;
+    /**
+     * Custom color for unchecked radio.
+     */
+    uncheckedColor?: string;
+    /**
+     * Custom color for radio.
+     */
+    color?: string;
+    /**
+     * Status of radio button.
+     */
+    status?: 'checked' | 'unchecked';
+    /**
+     * Additional styles for container View.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * TouchableRipple style
+     */
+    rippleContainerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Style that is passed to Label element.
+     */
+    labelStyle?: StyleProp<TextStyle>;
+    /**
+     * Style that is passed to Container element.
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * testID to be used on tests.
+     */
+    testID?: string;
+    /**
+     * Radio button control position.
+     */
+    position?: 'leading' | 'trailing';
+};
+
+/**
+ * RadioButton.Item allows you to press the whole row (item) instead of only the RadioButton.
+ *
+ * <div class="screenshots">
+ *   <figure>
+ *     <img class="medium" src="screenshots/radio-item.ios.png" />
+ *     <figcaption>Pressed</figcaption>
+ *   </figure>
+ * </div>
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { RadioButton } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [value, setValue] = React.useState('first');
+ *
+ *   return (
+ *     <RadioButton.Group onValueChange={value => setValue(value)} value={value}>
+ *       <RadioButton.Item label="First item" value="first" />
+ *       <RadioButton.Item label="Second item" value="second" />
+ *     </RadioButton.Group>
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ *```
+ */
+const RadioButtonItem = (
+    {
+        value,
+        label,
+        style: styleProp,
+        labelStyle,
+        onPress,
+        disabled,
+        color,
+        uncheckedColor,
+        status,
+        accessibilityLabel = label,
+        testID,
+        position = 'trailing',
+        containerStyle,
+        rippleContainerStyle,
+    }: Props,
+    ref: any,
+) => {
+    const context = useContext(RadioButtonContext);
+
+    const checked = useMemo(
+        () =>
+            isChecked({
+                contextValue: context?.value,
+                status,
+                value,
+            }) === 'checked',
+        [context?.value, status, value],
+    );
+
+    const state = resolveStateVariant({
+        disabled: !!disabled,
+        checked,
+    });
+
+    radioButtonItemStyles.useVariants({
+        state: state as any,
+    });
+
+    // const componentStyles = useComponentStyles('RadioButton_Item', styleProp, {
+    //     state: resolveStateVariant({
+    //         disabled: !!disabled,
+    //         checked,
+    //     }),
+    // });
+
+    const isLeading = position === 'leading';
+
+    const { containerStyles, labelStyles, accessibilityState, radioButtonProps } = useMemo(() => {
+        return {
+            containerStyles: [radioButtonItemStyles.root, styles.container, containerStyle],
+            labelStyles: [
+                styles.label,
+                radioButtonItemStyles.label,
+                {
+                    textAlign: isLeading ? 'right' : 'left',
+                },
+                labelStyle,
+            ] as StyleProp<TextStyle>,
+            accessibilityState: {
+                checked,
+                disabled,
+            },
+            radioButtonProps: {
+                value,
+                disabled,
+                status,
+                color,
+                uncheckedColor,
+                checked,
+                style: styleProp,
+            },
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        checked,
+        color,
+        containerStyle,
+        disabled,
+        isLeading,
+        labelStyle,
+        status,
+        styleProp,
+        uncheckedColor,
+        value,
+        state,
+    ]);
+
+    const onRadioPress = useCallback(
+        () =>
+            handlePress({
+                onPress: onPress,
+                onValueChange: context?.onValueChange,
+                value,
+            }),
+        [onPress, context?.onValueChange, value],
+    );
+
+    return (
+        <TouchableRipple
+            ref={ref}
+            onPress={onRadioPress}
+            accessibilityLabel={accessibilityLabel}
+            accessibilityRole="radio"
+            accessibilityState={accessibilityState}
+            testID={testID}
+            disabled={disabled}
+            style={rippleContainerStyle}>
+            <View style={containerStyles} pointerEvents="none">
+                {isLeading && <RadioButton {...radioButtonProps} />}
+                <Text style={labelStyles}>{label}</Text>
+                {!isLeading && <RadioButton {...radioButtonProps} />}
+            </View>
+        </TouchableRipple>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    label: {
+        flexShrink: 1,
+        flexGrow: 1,
+        fontSize: 16,
+    },
+});
+
+RadioButtonItem.displayName = 'RadioButton_Item';
+
+export default memo(forwardRef(RadioButtonItem));

package/components/RadioButton/index.ts

@@ -0,0 +1,27 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import RadioButtonComponent from './RadioButton';
+import RadioButtonGroup from './RadioButtonGroup';
+import RadioButtonItem from './RadioButtonItem';
+
+const RadioButtonDefault = Object.assign(
+    // @component ./RadioButton.tsx
+    RadioButtonComponent,
+    {
+        // @component ./RadioButtonGroup.tsx
+        Group: RadioButtonGroup,
+        // @component ./RadioButtonItem.tsx
+        Item: RadioButtonItem,
+    },
+);
+
+registerMoleculesComponents({
+    RadioButton: RadioButtonDefault,
+});
+
+export const RadioButton = getRegisteredComponentWithFallback('RadioButton', RadioButtonDefault);
+
+export { Props as RadioButtonProps } from './RadioButton';
+export { Props as RadioButtonGroupProps } from './RadioButtonGroup';
+export { Props as RadioButtonItemProps } from './RadioButtonItem';
+
+export { radioButtonStyles, radioButtonItemStyles } from './utils';

package/components/RadioButton/utils.ts

@@ -0,0 +1,164 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+// type States = 'disabled' | 'checked' | 'hovered' | 'checkedAndHovered';
+
+export const DEFAULT_ICON_SIZE = 24;
+export const ANIMATION_DURATION = 100;
+
+const radioButtonStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        // color: theme.colors.onSurfaceVariant,
+        // uncheckedColor: theme.colors.onSurfaceVariant,
+        // variants: {
+        //     state: {
+        //         checked: {
+        //             color: theme.colors.primary,
+        //         },
+        //         disabled: {
+        //             color: theme.colors.onSurfaceDisabled,
+        //             uncheckedColor: theme.colors.onSurfaceDisabled,
+        //         },
+        //     },
+        // },
+    },
+
+    container: {
+        borderRadius: theme.shapes.corner.full as unknown as number,
+    },
+    radioContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    radio: {
+        height: 20,
+        width: 20,
+        borderRadius: 10,
+        margin: 8,
+        borderColor: theme.colors.onSurfaceVariant,
+
+        variants: {
+            state: {
+                checked: {
+                    borderColor: theme.colors.primary,
+                },
+                disabled: {
+                    borderColor: theme.colors.onSurfaceDisabled,
+                },
+            },
+        },
+    },
+    dot: {
+        height: 10,
+        width: 10,
+        borderRadius: 5,
+        backgroundColor: theme.colors.onSurfaceVariant,
+
+        variants: {
+            state: {
+                checked: {
+                    backgroundColor: theme.colors.primary,
+                },
+                disabled: {
+                    backgroundColor: theme.colors.onSurfaceDisabled,
+                },
+            },
+        },
+    },
+    icon: {
+        backgroundColor: theme.colors.onSurfaceVariant,
+
+        variants: {
+            state: {
+                checked: {
+                    backgroundColor: theme.colors.primary,
+                },
+                disabled: {
+                    backgroundColor: theme.colors.onSurfaceDisabled,
+                },
+            },
+        },
+    },
+    stateLayer: {
+        variants: {
+            state: {
+                hovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+
+                checkedAndHovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.primary,
+                },
+            },
+        },
+    },
+}));
+
+const radioButtonItemStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        paddingVertical: theme.spacings['2'],
+        paddingHorizontal: theme.spacings['4'],
+
+        variants: {
+            state: {
+                checked: {},
+                disabled: {},
+            },
+        },
+    },
+    label: {
+        color: theme.colors.onSurface,
+
+        variants: {
+            state: {
+                checked: {},
+                disabled: {
+                    color: theme.colors.onSurfaceDisabled,
+                },
+            },
+        },
+    },
+}));
+
+registerComponentsStyles({
+    RadioButton: radioButtonStylesDefault,
+    RadioButton_Item: radioButtonItemStylesDefault,
+});
+
+export const radioButtonStyles = getRegisteredMoleculesComponentStyles('RadioButton');
+export const radioButtonItemStyles = getRegisteredMoleculesComponentStyles('RadioButton_Item');
+
+export const handlePress = ({
+    onPress,
+    value,
+    onValueChange,
+}: {
+    onPress?: () => void;
+    value: string;
+    onValueChange?: (value: string) => void;
+}) => {
+    if (onPress && onValueChange) {
+        console.warn(
+            `onPress in the scope of RadioButtonGroup will not be executed, use onValueChange instead`,
+        );
+    }
+
+    onValueChange ? onValueChange(value) : onPress?.();
+};
+
+export const isChecked = ({
+    value,
+    status,
+    contextValue,
+}: {
+    value: string;
+    status?: 'checked' | 'unchecked';
+    contextValue?: string;
+}) => {
+    if (contextValue !== undefined && contextValue !== null) {
+        return contextValue === value ? 'checked' : 'unchecked';
+    } else {
+        return status;
+    }
+};

package/components/Rating/Rating.tsx

@@ -0,0 +1,149 @@
+import { forwardRef, memo, useMemo } from 'react';
+import { View, type ViewProps, type ViewStyle } from 'react-native';
+
+import { useControlledValue } from '../../hooks';
+import type { IconProps, IconType } from '../Icon';
+import type { TooltipProps } from '../Tooltip';
+import RatingItem from './RatingItem';
+import { ratingStyles } from './utils';
+
+export type Props = ViewProps & {
+    /**
+     * rating count
+     * @default 5
+     */
+    count?: number;
+    /**
+     * The rating value.
+     */
+    value?: number;
+    /**
+     * The default value for the uncontrolled state
+     * @default undefined
+     */
+    defaultValue?: number;
+    /**
+     * Callback function that is fired when the hover state changes.
+     * @param {number} value The new value.
+     */
+    onChange?: (value: number) => void;
+    /** Removes all hover effects and pointer events.
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * If `true`, the component is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * name of the empty icon
+     */
+    iconName?: string;
+    /**
+     * the type of the empty icon
+     */
+    iconType?: IconType;
+    /**
+     * name of the active icon
+     */
+    activeIconName?: string;
+    /**
+     * type of the active icon
+     */
+    activeIconType?: IconType;
+    /**
+     * size of all the icons
+     * */
+    size?: number;
+    /**
+     * color of the empty icon
+     * */
+    color?: string;
+    /**
+     * color of the active icon
+     * */
+    activeColor?: string;
+    /**
+     * style of the icon container component
+     * */
+    iconContainerStyle?: ViewStyle;
+    /**
+     * props for to pass down to all the icons
+     * */
+    iconProps?: Omit<IconProps, 'name' | 'type' | 'color' | 'ref'>;
+    /**
+     * display tooltips
+     * */
+    showTooltips?: boolean;
+    /**
+     * for configuring tooltip
+     * won't be used if showTooltips is false
+     * */
+    tooltipProps?: TooltipProps;
+};
+
+const Rating = (
+    {
+        count = 5,
+        value: valueProp,
+        defaultValue,
+        onChange: onChangeProp,
+        size = 24,
+        disabled,
+        readonly,
+        iconContainerStyle,
+        iconName = 'star-outline',
+        iconType = 'material-community',
+        activeIconName = 'star',
+        activeIconType = 'material-community',
+        iconProps = {},
+        color,
+        activeColor,
+        style,
+        testID,
+        showTooltips,
+        tooltipProps,
+        ...rest
+    }: Props,
+    ref: any,
+) => {
+    const componentStyles = useMemo(() => [ratingStyles.root, style], [style]);
+
+    const [value, onChange] = useControlledValue({
+        value: valueProp,
+        defaultValue,
+        onChange: onChangeProp,
+    });
+
+    const arrayFromCount = useMemo(() => Array.from({ length: count }, (_, i) => i + 1), [count]);
+
+    return (
+        <View style={componentStyles} {...rest} testID={testID} ref={ref}>
+            {arrayFromCount.map(i => (
+                <RatingItem
+                    key={i}
+                    size={size}
+                    disabled={disabled}
+                    readonly={readonly}
+                    iconContainerStyle={iconContainerStyle}
+                    {...iconProps}
+                    index={i}
+                    name={iconName}
+                    type={iconType}
+                    activeIconName={activeIconName}
+                    activeIconType={activeIconType}
+                    value={value}
+                    onChange={onChange}
+                    color={color}
+                    activeColor={activeColor}
+                    testID={testID ? `${testID}-rating-item-${i}` : ''}
+                    showTooltips={showTooltips}
+                    tooltipProps={tooltipProps}
+                />
+            ))}
+        </View>
+    );
+};
+
+export default memo(forwardRef(Rating));

package/components/Rating/RatingItem.tsx

@@ -0,0 +1,125 @@
+import { forwardRef, memo, useCallback, useMemo } from 'react';
+import { Pressable, type ViewStyle } from 'react-native';
+import { Icon, type IconProps, type IconType } from '../Icon';
+import { Tooltip, type TooltipProps } from '../Tooltip';
+import { resolveStateVariant } from '../../utils';
+import { ratingItemStyles } from './utils';
+
+export type Props = Omit<IconProps, 'ref'> & {
+    index: number;
+    value: number;
+    onChange: (val: number) => void;
+    activeIconName: string;
+    activeIconType: IconType;
+    disabled?: boolean;
+    readonly?: boolean;
+    iconContainerStyle?: ViewStyle;
+    activeColor?: string;
+    color?: string;
+    showTooltips?: boolean;
+    tooltipProps?: Omit<TooltipProps, 'children'>;
+};
+
+const RatingItem = (
+    {
+        style,
+        disabled = false,
+        readonly = false,
+        iconContainerStyle,
+        value,
+        index,
+        onChange,
+        name,
+        type,
+        activeIconName,
+        activeIconType,
+        activeColor = 'rgb(250, 175, 0)',
+        color,
+        showTooltips = true,
+        tooltipProps = {},
+        ...rest
+    }: Props,
+    ref: any,
+) => {
+    const active = value >= index;
+
+    // const componentStyles = useComponentStyles(
+    //     'Rating_Item',
+    //     [active ? { color: activeColor } : color ? { color } : {}, style],
+    //     {
+    //         state: resolveStateVariant({
+    //             activeAndDisabled: active && disabled,
+    //             activeAndReadonly: active && readonly,
+    //             active,
+    //             disabled,
+    //             readonly,
+    //         }),
+    //     },
+    // );
+    const state = resolveStateVariant({
+        activeAndDisabled: active && disabled,
+        activeAndReadonly: active && readonly,
+        active,
+        disabled,
+        readonly,
+    });
+    ratingItemStyles.useVariants({
+        state: state as any,
+    });
+    const componentStyles = useMemo(
+        () => [
+            ratingItemStyles.root,
+            active ? { color: activeColor } : color ? { color } : {},
+            style,
+        ],
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [active, activeColor, color, style, state],
+    );
+
+    const onPress = useCallback(() => {
+        onChange(value === index ? 0 : index);
+    }, [index, onChange, value]);
+
+    const IconComponent = useMemo(
+        () => (
+            <Pressable
+                ref={ref}
+                style={iconContainerStyle}
+                onPress={onPress}
+                disabled={disabled || readonly}>
+                <Icon
+                    style={componentStyles}
+                    {...rest}
+                    name={value >= index ? activeIconName : name}
+                    type={value >= index ? activeIconType : type}
+                />
+            </Pressable>
+        ),
+        [
+            activeIconName,
+            activeIconType,
+            componentStyles,
+            disabled,
+            iconContainerStyle,
+            index,
+            name,
+            onPress,
+            readonly,
+            ref,
+            rest,
+            type,
+            value,
+        ],
+    );
+
+    return showTooltips ? (
+        <Tooltip {...tooltipProps}>
+            <Tooltip.Trigger>{IconComponent}</Tooltip.Trigger>
+            <Tooltip.Content>{index}</Tooltip.Content>
+        </Tooltip>
+    ) : (
+        IconComponent
+    );
+};
+
+export default memo(forwardRef(RatingItem));

package/components/Rating/index.tsx

@@ -0,0 +1,13 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import RatingDefault from './Rating';
+
+registerMoleculesComponents({
+    Rating: RatingDefault,
+});
+
+export const Rating = getRegisteredComponentWithFallback('Rating', RatingDefault);
+
+export type { Props as RatingProps } from './Rating';
+export type { Props as RatingItemProps } from './RatingItem';
+export type { States } from './utils';
+export { ratingItemStyles, ratingStyles } from './utils';