react-native-molecules 0.5.0-beta.2 → 0.5.0-beta.21

package/components/Checkbox/CheckboxBase.tsx

@@ -1,15 +1,6 @@
 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 { forwardRef, memo, type PropsWithoutRef, useCallback, useMemo } from 'react';
+import { Platform, type ViewProps } from 'react-native';
 
 import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
@@ -44,9 +35,6 @@ const CheckboxAndroid = (
     }: 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({
@@ -63,101 +51,18 @@ const CheckboxAndroid = (
         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 { rippleColor, rippleContainerStyles, iconStyle } = useMemo(() => {
         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],
+            rippleContainerStyles: [styles.root, 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]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [checked, colorProp, uncheckedColorProp, style, size, state]);
 
     const onChange = useCallback(() => {
         onChangeProp?.(!checked);
@@ -185,33 +90,21 @@ const CheckboxAndroid = (
             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>
+                <Icon
+                    allowFontScaling={false}
+                    type="material-community"
+                    name={icon}
+                    size={iconSizeMap[size]}
+                    style={iconStyle}
+                />
                 <StateLayer
                     testID={testID ? `${testID}-stateLayer` : ''}
                     {...stateLayerProps}
-                    style={stateLayerStyle}
+                    style={[styles.stateLayer, stateLayerProps?.style]}
                 />
             </>
         </TouchableRipple>
     );
 };
 
-// const styles = StyleSheet.create({
-//     fillContainer: {
-//         alignItems: 'center',
-//         justifyContent: 'center',
-//     },
-// });
-
 export default memo(forwardRef(CheckboxAndroid));

package/components/Checkbox/utils.ts

@@ -132,31 +132,6 @@ const checkboxStylesDefault = StyleSheet.create(theme => ({
             },
         ],
     },
-    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,
 

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,13 @@ const Chip = (
             {...containerProps}
             elevation={elevation}
             style={containerStyle}
-            backgroundColor={backgroundColor}>
-            <TouchableRipple
+            backgroundColor={backgroundColor}
+            asChild>
+            <Wrapper
                 borderless
                 {...rest}
                 disabled={disabled}
-                style={touchableRippleStyle}
                 accessibilityLabel={accessibilityLabel}
-                accessibilityRole="button"
                 accessibilityState={accessibilityState}
                 ref={actionsRef}
                 testID={testID}>
@@ -297,7 +285,7 @@ const Chip = (
                         style={stateLayerStyle}
                     />
                 </>
-            </TouchableRipple>
+            </Wrapper>
         </Surface>
     );
 };
@@ -362,7 +350,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';

package/components/{DatePickerInput/inputUtils.ts → DateField/useDateFieldState.ts}

@@ -10,34 +10,31 @@ import { useRangeChecker } from '../DatePickerInline/dateUtils';
 const formatValue = (value: Date | null | undefined, dateFormat: string) =>
     !isNil(value) ? format(value, dateFormat) || '' : '';
 
-export default function useDateInput({
-    // locale,
-    value,
-    validRange,
-    inputMode = 'start',
-    onChange,
-    dateFormat,
-    onBlur: onBlurProp,
-    onFocus: onFocusProp,
-    isBlurredRef,
-}: {
-    onChange?: (d: Date | null) => void;
-    onBlur?: (e: BlurEvent) => void;
-    onFocus?: (e: FocusEvent) => void;
-    // locale: undefined | string;
+type Props = {
     value?: Date | null;
     validRange?: ValidRangeType;
     inputMode: 'start' | 'end';
     dateFormat: string;
     isBlurredRef: RefObject<boolean>;
-}) {
-    const { isDisabled, isWithinValidRange } = useRangeChecker(validRange);
+    onChange?: (value: Date | null) => void;
+    onBlur?: (e: BlurEvent) => void;
+    onFocus?: (e: FocusEvent) => void;
+};
 
+export function useDateFieldState({
+    value,
+    validRange,
+    inputMode,
+    dateFormat,
+    isBlurredRef,
+    onChange,
+    onBlur: onBlurProp,
+    onFocus: onFocusProp,
+}: Props) {
+    const { isDisabled, isWithinValidRange } = useRangeChecker(validRange);
     const [formattedValue, setFormattedValue] = useState(() => formatValue(value, dateFormat));
     const formattedValueRef = useLatest(formattedValue);
 
-    // const [error, setError] = useState<null | string>(null);
-
     const onChangeText = useCallback(
         (date: string) => {
             const parsedDate = parse(date, dateFormat, new Date());
@@ -51,45 +48,18 @@ export default function useDateInput({
             );
 
             if (!isValid(parsedDate)) {
-                // TODO: Translate
-                // setError(`Date format must be ${dateFormat}`);
                 onChange?.(date ? value ?? null : null);
-
                 return;
             }
 
             const finalDate = inputMode === 'end' ? endOfDay(parsedDate) : parsedDate;
 
-            if (isDisabled(finalDate)) {
-                // TODO: Translate
-                // setError('Day is not allowed');
+            if (isDisabled(finalDate) || !isWithinValidRange(finalDate)) {
                 onChange?.(null);
-
-                return;
-            }
-            if (!isWithinValidRange(finalDate)) {
-                // TODO: Translate
-                // const errors =
-                //     validStart && validEnd
-                //         ? [
-                //               `${`Must be between ${format(validStart, dateFormat)} - ${format(
-                //                   validEnd,
-                //                   dateFormat,
-                //               )})`}`,
-                //           ]
-                //         : [
-                //               validStart ? `Must be later then ${validStart}` : '',
-                //               validEnd ? `Must be earlier then ${validEnd}` : '',
-                //           ];
-
-                // setError(errors.filter(n => n).join(' '));
-                onChange?.(null);
-
                 return;
             }
 
             onChange?.(finalDate);
-            // setError(null);
         },
         [
             dateFormat,
@@ -128,8 +98,6 @@ export default function useDateInput({
     }, [value, dateFormat, isBlurredRef]);
 
     return {
-        onChange,
-        // error,
         formattedValue,
         onChangeText,
         onBlur,

package/components/DatePicker/DateCalendar.tsx

@@ -0,0 +1,83 @@
+import { memo } from 'react';
+
+import { getRegisteredComponentWithFallback } from '../../core';
+import {
+    DatePickerInline,
+    type DatePickerInlineProps,
+    type RangeChange,
+    type SingleChange,
+} from '../DatePickerInline';
+import { useOptionalDatePickerContext } from './context';
+
+export type DateCalendarProps = DatePickerInlineProps;
+
+const DateCalendarDefault = memo((props: DateCalendarProps) => {
+    const ctx = useOptionalDatePickerContext();
+
+    const hasExplicitState =
+        props.date !== undefined ||
+        props.startDate !== undefined ||
+        props.endDate !== undefined ||
+        props.dates !== undefined ||
+        props.onChange !== undefined;
+
+    const isRange = props.mode === 'range' || ctx?.mode === 'range';
+    const effectiveHeaderLayout = props.headerLayout ?? (ctx ? 'docked' : 'inline');
+    const showOutsideDays =
+        props.showOutsideDays ?? (effectiveHeaderLayout === 'docked' && !isRange);
+
+    if (!ctx || hasExplicitState) {
+        return <DatePickerInline {...props} showOutsideDays={showOutsideDays} />;
+    }
+
+    const locale = props.locale ?? ctx.locale;
+    const validRange = props.validRange ?? ctx.validRange;
+
+    if (ctx.mode === 'range') {
+        const range =
+            ctx.draftValue && typeof ctx.draftValue === 'object' && 'start' in ctx.draftValue
+                ? ctx.draftValue
+                : { start: null, end: null };
+        const onChange: RangeChange = ({ startDate, endDate }) => {
+            ctx.setValue({ start: startDate ?? null, end: endDate ?? null });
+        };
+        return (
+            <DatePickerInline
+                {...props}
+                mode="range"
+                startDate={range.start ?? undefined}
+                endDate={range.end ?? undefined}
+                onChange={onChange}
+                locale={locale}
+                validRange={validRange}
+                headerLayout={props.headerLayout ?? 'docked'}
+                showOutsideDays={showOutsideDays}
+            />
+        );
+    }
+
+    const single =
+        ctx.draftValue && typeof ctx.draftValue === 'object' && 'start' in ctx.draftValue
+            ? null
+            : ctx.draftValue;
+    const onChange: SingleChange = ({ date }) => {
+        ctx.setValue(date ?? null);
+    };
+
+    return (
+        <DatePickerInline
+            {...props}
+            mode="single"
+            date={single ?? undefined}
+            onChange={onChange}
+            locale={locale}
+            validRange={validRange}
+            headerLayout={props.headerLayout ?? 'docked'}
+            showOutsideDays={showOutsideDays}
+        />
+    );
+});
+
+DateCalendarDefault.displayName = 'DateCalendar';
+
+export const DateCalendar = getRegisteredComponentWithFallback('DateCalendar', DateCalendarDefault);