react-native-molecules 0.5.0-beta.3 → 0.5.0-beta.31

package/components/Checkbox/types.ts

@@ -1,46 +1,45 @@
-import type { StyleProp, TextProps, TextStyle, ViewStyle } from 'react-native';
+import type { PropsWithoutRef, ReactNode } from 'react';
+import type { TextProps, ViewProps } 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'> & {
+/**
+ * Internal props for the platform control (CheckboxBase).
+ */
+export type CheckboxBaseProps = Omit<TouchableRippleProps, 'children'> & {
     /**
-     * value of checkbox.
+     * Whether the checkbox is checked.
      */
-    value?: boolean;
+    value: boolean;
     /**
-     * defaultValue of checkbox.
-     */
-    defaultValue?: boolean;
-    /**
-     * function execute when the value change i.e checkbox is press
+     * Called when the checkbox is pressed.
      */
     onChange?: (newValue: boolean) => void;
     /**
-     * Whether or not if it's in the indeterminate state, if true, it will override the value
+     * Whether the checkbox is in the indeterminate state (overrides `value`).
      */
     indeterminate?: boolean;
     /**
-     * Whether checkbox is disabled.
+     * Whether the checkbox is disabled.
      */
     disabled?: boolean;
     /**
-     * Size of the icon.
-     * Should be a number or a Design Token
+     * Size of the checkbox.
      */
     size?: Size;
     /**
-     * Custom color for unchecked checkbox.
+     * Custom color for the checked checkbox.
      */
-    uncheckedColor?: string;
+    color?: string;
     /**
-     * Custom color for checkbox.
+     * Custom color for the unchecked checkbox.
      */
-    color?: string;
+    uncheckedColor?: string;
     /**
-     * Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.
+     * Accessibility label for the touchable.
      */
     accessibilityLabel?: string;
     /**
@@ -48,25 +47,60 @@ export type CheckBoxBaseProps = Omit<TouchableRippleProps, 'children'> & {
      */
     testID?: string;
     /**
-     * Label to be displayed next to the checkbox.
+     * Props for the state layer.
+     */
+    stateLayerProps?: PropsWithoutRef<ViewProps>;
+};
+
+/**
+ * The checkbox control (the box). Use inside a CheckboxRow, or standalone with `value`/`onChange`.
+ */
+export type CheckboxProps = Omit<CheckboxBaseProps, 'value' | 'onChange'> & {
+    /**
+     * Whether the checkbox is checked (controlled).
+     */
+    value?: boolean;
+    /**
+     * Default checked state (uncontrolled).
+     */
+    defaultValue?: boolean;
+    /**
+     * Called when the checked state changes.
      */
-    label?: string;
+    onChange?: (newValue: boolean) => void;
+};
+
+export type CheckboxRowProps = ViewProps & {
     /**
-     * Style that is passed to Label element.
+     * Whether the checkbox is checked (controlled).
      */
-    labelStyle?: StyleProp<TextStyle>;
+    value?: boolean;
     /**
-     * Style that is passed to Container element (when label is provided).
+     * Default checked state (uncontrolled).
      */
-    containerStyle?: ViewStyle;
+    defaultValue?: boolean;
     /**
-     * Props for the label text element.
+     * Called when the checked state changes.
      */
-    labelProps?: Omit<TextProps, 'children' | 'style'>;
+    onChange?: (newValue: boolean) => void;
     /**
-     * Checkbox control position relative to label.
+     * Whether the checkbox is in the indeterminate state.
      */
-    position?: 'leading' | 'trailing';
+    indeterminate?: boolean;
+    /**
+     * Disables the row (control + label).
+     */
+    disabled?: boolean;
+    /**
+     * Size applied to the checkbox.
+     */
+    size?: Size;
+    /**
+     * Checkbox control and Checkbox.Label, in any order.
+     */
+    children: ReactNode;
+};
 
-    style?: StyleProp<TextStyle>;
+export type CheckboxLabelProps = TextProps & {
+    children: ReactNode;
 };

package/components/Checkbox/utils.ts

@@ -21,17 +21,14 @@ const checkboxStylesDefault = StyleSheet.create(theme => ({
                 sm: {
                     padding: PADDING,
                     borderRadius: 16,
-                    // iconSize: iconSizeMap.sm,
                 },
                 md: {
                     padding: PADDING,
                     borderRadius: 18,
-                    // iconSize: iconSizeMap.md,
                 },
                 lg: {
                     padding: PADDING,
                     borderRadius: 20,
-                    // iconSize: iconSizeMap.lg,
                 },
             },
         },
@@ -81,82 +78,6 @@ const checkboxStylesDefault = StyleSheet.create(theme => ({
             },
         },
     },
-    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,
 
@@ -175,36 +96,32 @@ const checkboxStylesDefault = StyleSheet.create(theme => ({
             },
         },
     },
-    // 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 }),
-    //             },
-    //         };
-    //     }
-    // },
+const checkboxRowStylesDefault = StyleSheet.create(theme => ({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    label: {
+        flexShrink: 1,
+        flexGrow: 1,
+        color: theme.colors.onSurface,
+        ...theme.typescale.bodyLarge,
+
+        variants: {
+            state: {
+                checked: {},
+                checkedAndHovered: {},
+                hovered: {},
+                disabled: { color: theme.colors.onSurfaceDisabled },
+            },
+        },
+    },
 }));
 
 export const styles = getRegisteredComponentStylesWithFallback('Checkbox', checkboxStylesDefault);
+export const checkboxRowStyles = getRegisteredComponentStylesWithFallback(
+    'Checkbox_Row',
+    checkboxRowStylesDefault,
+);

package/components/Chip/Chip.tsx

@@ -97,10 +97,6 @@ export type Props = Omit<TouchableRippleProps, 'children'> &
          * Whether to show the ActivityIndicator or not
          */
         loading?: boolean;
-        /**
-         * container style
-         */
-        containerStyle?: ViewStyle;
         /**
          * left element container style
          */
@@ -132,7 +128,6 @@ export type Props = Omit<TouchableRippleProps, 'children'> &
 const Chip = (
     {
         style,
-        containerStyle: containerStyleProp,
         label: _label,
         labelCharacterLimit = 20,
         variant = 'outlined',
@@ -158,11 +153,13 @@ const Chip = (
         leftElementIconProps,
         invertLabelColor,
         backgroundColor,
+        onPress,
         ...rest
     }: Props,
     ref: any,
 ) => {
     const { hovered, actionsRef } = useActionState({ ref, actionsToListen: ['hover'] });
+    const Wrapper = onPress ? TouchableRipple : View;
 
     const state = resolveStateVariant({
         disabled: !!disabled,
@@ -192,47 +189,39 @@ const Chip = (
     //     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 { containerStyle, leftElementStyle, rightElementStyle, labelStyle, stateLayerStyle } =
+        useMemo(() => {
+            return {
+                containerStyle: [
+                    styles.container,
+                    selected && selectionBackgroundColor
+                        ? { backgroundColor: selectionBackgroundColor }
+                        : {},
+                    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,
+            labelStyleProp,
+            state,
+            size,
+            variant,
+        ]);
 
     const { accessibilityState, elevation } = useMemo(
         () => ({
@@ -251,14 +240,14 @@ const Chip = (
             {...containerProps}
             elevation={elevation}
             style={containerStyle}
-            backgroundColor={backgroundColor}>
-            <TouchableRipple
+            backgroundColor={backgroundColor}
+            asChild>
+            <Wrapper
                 borderless
                 {...rest}
                 disabled={disabled}
-                style={touchableRippleStyle}
+                onPress={onPress}
                 accessibilityLabel={accessibilityLabel}
-                accessibilityRole="button"
                 accessibilityState={accessibilityState}
                 ref={actionsRef}
                 testID={testID}>
@@ -297,7 +286,7 @@ const Chip = (
                         style={stateLayerStyle}
                     />
                 </>
-            </TouchableRipple>
+            </Wrapper>
         </Surface>
     );
 };
@@ -362,7 +351,7 @@ const RightElement = memo(
                 {onClose ? (
                     <IconButtonWithContrastColor
                         name="close"
-                        size={18}
+                        size={14}
                         accessibilityLabel="Close"
                         disabled={disabled}
                         onPress={onClose}

package/components/Chip/utils.ts

@@ -6,6 +6,9 @@ const chipStylesDefault = StyleSheet.create(theme => ({
     container: {
         borderRadius: theme.shapes.corner.small,
         backgroundColor: theme.colors.surface,
+        paddingHorizontal: theme.spacings['2'],
+        flexDirection: 'row',
+        alignItems: 'center',
 
         variants: {
             variant: {
@@ -47,13 +50,6 @@ const chipStylesDefault = StyleSheet.create(theme => ({
             },
         },
     },
-    touchableRippleContainer: {
-        flex: 1,
-        paddingHorizontal: theme.spacings['2'],
-        borderRadius: theme.shapes.corner.small,
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
     label: {
         display: 'flex',
         color: theme.colors.onSurfaceVariant,

package/components/DateField/DateField.tsx

@@ -0,0 +1,111 @@
+import { memo, useCallback, useMemo, useRef } from 'react';
+
+import type { DatePickerValue, RangeValue } from '../DatePicker/context';
+import { useDatePickerContext } from '../DatePicker/context';
+import type { TextInputProps } from '../TextInput';
+import { TextInputWithMask } from '../TextInputWithMask';
+import { useDateFieldState } from './useDateFieldState';
+
+export type DateFieldInputMode = 'start' | 'end';
+
+export type DateFieldProps = Omit<
+    TextInputProps,
+    'value' | 'defaultValue' | 'onChangeText' | 'inputMode'
+> & {
+    inputMode?: DateFieldInputMode;
+    dateFormat?: string;
+    mask?: string;
+};
+
+const DEFAULT_DATE_FORMAT = 'dd/MM/yyyy';
+
+const isRange = (value: DatePickerValue): value is RangeValue =>
+    value !== null && typeof value === 'object' && 'start' in value && 'end' in value;
+
+const preserveTime = (next: Date | null, prev: Date | null): Date | null => {
+    if (!next || !prev) return next;
+
+    const combined = new Date(next);
+
+    combined.setHours(
+        prev.getHours(),
+        prev.getMinutes(),
+        prev.getSeconds(),
+        prev.getMilliseconds(),
+    );
+    return combined;
+};
+
+function DateField({
+    ref,
+    inputMode = 'start',
+    dateFormat = DEFAULT_DATE_FORMAT,
+    disabled: disabledProp,
+    onBlur,
+    onFocus,
+    ...rest
+}: DateFieldProps) {
+    const {
+        mode,
+        value,
+        commitValue,
+        validRange,
+        disabled: providerDisabled,
+    } = useDatePickerContext();
+    const isBlurredRef = useRef(true);
+
+    const disabled = disabledProp ?? providerDisabled;
+
+    const fieldValue = useMemo<Date | null>(() => {
+        if (mode === 'range') {
+            if (!isRange(value)) return null;
+            return inputMode === 'end' ? value.end : value.start;
+        }
+        return isRange(value) ? null : value;
+    }, [value, mode, inputMode]);
+
+    const onChange = useCallback(
+        (next: Date | null) => {
+            if (mode === 'range') {
+                const current: RangeValue = isRange(value) ? value : { start: null, end: null };
+                commitValue({ ...current, [inputMode]: next });
+                return;
+            }
+            commitValue(preserveTime(next, isRange(value) ? null : value));
+        },
+        [mode, value, inputMode, commitValue],
+    );
+
+    const {
+        formattedValue,
+        onChangeText,
+        onBlur: onInnerBlur,
+        onFocus: onInnerFocus,
+    } = useDateFieldState({
+        value: fieldValue,
+        validRange,
+        inputMode,
+        dateFormat,
+        onChange,
+        onBlur,
+        onFocus,
+        isBlurredRef,
+    });
+
+    return (
+        <TextInputWithMask
+            placeholder={dateFormat}
+            keyboardType="number-pad"
+            mask={dateFormat}
+            {...rest}
+            ref={ref}
+            disabled={disabled}
+            value={formattedValue}
+            onChangeText={onChangeText}
+            onBlur={onInnerBlur}
+            onFocus={onInnerFocus}
+        />
+    );
+}
+
+export default memo(DateField);

package/components/DateField/index.tsx

@@ -0,0 +1,6 @@
+import { getRegisteredComponentWithFallback } from '../../core';
+import DateFieldDefault from './DateField';
+
+export const DateField = getRegisteredComponentWithFallback('DateField', DateFieldDefault);
+
+export type { DateFieldInputMode, DateFieldProps } from './DateField';