react-native-molecules 0.5.0-beta.1 → 0.5.0-beta.11

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({
@@ -58,105 +46,25 @@ const CheckboxAndroid = (
 
     styles.useVariants({
         variant: 'android',
+        // @ts-ignore // TODO - fix this
         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 { iconSize, rippleColor, rippleContainerStyles, stateLayerStyle, 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(),
+                rippleContainerStyles: [styles.root, style],
+                stateLayerStyle: [styles.stateLayer, stateLayerProps?.style],
+            };
+        }, [checked, colorProp, uncheckedColorProp, size, style, stateLayerProps?.style]);
 
     const onChange = useCallback(() => {
         onChangeProp?.(!checked);
@@ -184,18 +92,13 @@ 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={iconSize}
+                    style={iconStyle}
+                />
                 <StateLayer
                     testID={testID ? `${testID}-stateLayer` : ''}
                     {...stateLayerProps}
@@ -206,11 +109,4 @@ const CheckboxAndroid = (
     );
 };
 
-// const styles = StyleSheet.create({
-//     fillContainer: {
-//         alignItems: 'center',
-//         justifyContent: 'center',
-//     },
-// });
-
 export default memo(forwardRef(CheckboxAndroid));

package/components/Checkbox/index.tsx

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

package/components/Checkbox/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const PADDING = 6;
 
@@ -13,6 +13,10 @@ export const iconSizeMap = {
 const checkboxStylesDefault = StyleSheet.create(theme => ({
     root: {
         variants: {
+            variant: {
+                android: {},
+                ios: {},
+            },
             size: {
                 sm: {
                     padding: PADDING,
@@ -128,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,
 
@@ -203,8 +182,4 @@ const checkboxStylesDefault = StyleSheet.create(theme => ({
     // },
 }));
 
-registerComponentsStyles({
-    Checkbox: checkboxStylesDefault,
-});
-
-export const styles = getRegisteredMoleculesComponentStyles('Checkbox') ?? checkboxStylesDefault;
+export const styles = getRegisteredComponentStylesWithFallback('Checkbox', checkboxStylesDefault);

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/index.tsx

@@ -1,6 +1,6 @@
 import type { ComponentType } from 'react';
 
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import { default as ChipComponent, type Props as ChipProps } from './Chip';
 
 export const ChipDefault = Object.assign(
@@ -40,10 +40,6 @@ export const ChipDefault = Object.assign(
     },
 );
 
-registerMoleculesComponents({
-    Chip: ChipDefault,
-});
-
 export const Chip = getRegisteredComponentWithFallback('Chip', ChipDefault);
 
 export type { Props as ChipProps } from './Chip';

package/components/Chip/utils.ts

@@ -1,11 +1,14 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 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,
@@ -91,10 +87,6 @@ const chipStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Chip: chipStylesDefault,
-});
-
-export const styles = getRegisteredMoleculesComponentStyles('Chip');
+export const styles = getRegisteredComponentStylesWithFallback('Chip', chipStylesDefault);
 
 export type States = 'hovered' | 'selectedAndHovered' | 'selected' | 'disabled';

package/components/DatePickerDocked/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import DatePickerDockedDefault from './DatePickerDocked';
 
-registerMoleculesComponents({
-    DatePickerDocked: DatePickerDockedDefault,
-});
-
 export const DatePickerDocked = getRegisteredComponentWithFallback(
     'DatePickerDocked',
     DatePickerDockedDefault,

package/components/DatePickerDocked/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const datePickerDockedStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -131,25 +131,27 @@ const datePickerDockedMonthStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    DatePickerDocked: datePickerDockedStylesDefault,
-    DatePickerDocked_Header: datePickerDockedHeaderStylesDefault,
-    DatePicker_HeaderItem: datePickerHeaderItemStylesDefault,
-    DatePickerDocked_MonthPicker: datePickerMonthPickerStylesDefault,
-    DatePickerDocked_MonthItem: datePickerDockedMonthItemStylesDefault,
-    DatePickerDocked_Month: datePickerDockedMonthStylesDefault,
-});
-
-export const datePickerDockedStyles = getRegisteredMoleculesComponentStyles('DatePickerDocked');
-export const datePickerDockedHeaderStyles =
-    getRegisteredMoleculesComponentStyles('DatePickerDocked_Header');
-export const datePickerHeaderItemStyles =
-    getRegisteredMoleculesComponentStyles('DatePicker_HeaderItem');
-export const datePickerMonthPickerStyles = getRegisteredMoleculesComponentStyles(
+export const datePickerDockedStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerDocked',
+    datePickerDockedStylesDefault,
+);
+export const datePickerDockedHeaderStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerDocked_Header',
+    datePickerDockedHeaderStylesDefault,
+);
+export const datePickerHeaderItemStyles = getRegisteredComponentStylesWithFallback(
+    'DatePicker_HeaderItem',
+    datePickerHeaderItemStylesDefault,
+);
+export const datePickerMonthPickerStyles = getRegisteredComponentStylesWithFallback(
     'DatePickerDocked_MonthPicker',
+    datePickerMonthPickerStylesDefault,
 );
-export const datePickerDockedMonthItemStyles = getRegisteredMoleculesComponentStyles(
+export const datePickerDockedMonthItemStyles = getRegisteredComponentStylesWithFallback(
     'DatePickerDocked_MonthItem',
+    datePickerDockedMonthItemStylesDefault,
+);
+export const datePickerDockedMonthStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerDocked_Month',
+    datePickerDockedMonthStylesDefault,
 );
-export const datePickerDockedMonthStyles =
-    getRegisteredMoleculesComponentStyles('DatePickerDocked_Month');

package/components/DatePickerInline/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import DatePickerInlineDefault from './DatePickerInline';
 
-registerMoleculesComponents({
-    DatePickerInline: DatePickerInlineDefault,
-});
-
 export const DatePickerInline = getRegisteredComponentWithFallback(
     'DatePickerInline',
     DatePickerInlineDefault,

package/components/DatePickerInline/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { daySize } from './dateUtils';
 
 export const dayNamesHeight = 44;
@@ -338,30 +338,43 @@ const datePickerYearItemStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    DatePickerInline: datePickerStylesDefault,
-    DatePicker_Month: datePickerMonthStylesDefault,
-    DatePicker_YearPicker: datePickerYearPickerStylesDefault,
-    DatePicker_Day: datePickerDayStylesDefault,
-    DatePicker_DayEmpty: datePickerDayEmptyStylesDefault,
-    DatePicker_Week: datePickerWeekStylesDefault,
-    DatePicker_Header: datePickerHeaderStylesDefault,
-    DatePicker_DayName: dateDayNameStylesDefault,
-    DatePicker_DayRange: datePickerDayRangeStylesDefault,
-    DatePicker_YearItem: datePickerYearItemStylesDefault,
-});
-
-export const datePickerStyles = getRegisteredMoleculesComponentStyles('DatePickerInline');
-export const datePickerMonthStyles = getRegisteredMoleculesComponentStyles('DatePicker_Month');
-export const datePickerYearPickerStyles =
-    getRegisteredMoleculesComponentStyles('DatePicker_YearPicker');
-export const datePickerDayStyles = getRegisteredMoleculesComponentStyles('DatePicker_Day');
-export const datePickerDayEmptyStyles =
-    getRegisteredMoleculesComponentStyles('DatePicker_DayEmpty');
-export const datePickerWeekStyles = getRegisteredMoleculesComponentStyles('DatePicker_Week');
-export const datePickerHeaderStyles = getRegisteredMoleculesComponentStyles('DatePicker_Header');
-export const dateDayNameStyles = getRegisteredMoleculesComponentStyles('DatePicker_DayName');
-export const datePickerDayRangeStyles =
-    getRegisteredMoleculesComponentStyles('DatePicker_DayRange');
-export const datePickerYearItemStyles =
-    getRegisteredMoleculesComponentStyles('DatePicker_YearItem');
+export const datePickerStyles = getRegisteredComponentStylesWithFallback(
+    'DatePickerInline',
+    datePickerStylesDefault,
+);
+export const datePickerMonthStyles = getRegisteredComponentStylesWithFallback(
+    'DatePicker_Month',
+    datePickerMonthStylesDefault,
+);
+export const datePickerYearPickerStyles = getRegisteredComponentStylesWithFallback(
+    'DatePicker_YearPicker',
+    datePickerYearPickerStylesDefault,
+);
+export const datePickerDayStyles = getRegisteredComponentStylesWithFallback(
+    'DatePicker_Day',
+    datePickerDayStylesDefault,
+);
+export const datePickerDayEmptyStyles = getRegisteredComponentStylesWithFallback(
+    'DatePicker_DayEmpty',
+    datePickerDayEmptyStylesDefault,
+);
+export const datePickerWeekStyles = getRegisteredComponentStylesWithFallback(
+    'DatePicker_Week',
+    datePickerWeekStylesDefault,
+);
+export const datePickerHeaderStyles = getRegisteredComponentStylesWithFallback(
+    'DatePicker_Header',
+    datePickerHeaderStylesDefault,
+);
+export const dateDayNameStyles = getRegisteredComponentStylesWithFallback(
+    'DatePicker_DayName',
+    dateDayNameStylesDefault,
+);
+export const datePickerDayRangeStyles = getRegisteredComponentStylesWithFallback(
+    'DatePicker_DayRange',
+    datePickerDayRangeStylesDefault,
+);
+export const datePickerYearItemStyles = getRegisteredComponentStylesWithFallback(
+    'DatePicker_YearItem',
+    datePickerYearItemStylesDefault,
+);

package/components/DatePickerInput/DatePickerInput.tsx

@@ -5,6 +5,7 @@ import { useLatest, useToggle } from '../../hooks';
 import { noop } from '../../utils/lodash';
 import { DatePickerDocked } from '../DatePickerDocked';
 import { IconButton } from '../IconButton';
+import { TextInput } from '../TextInput';
 import DatePickerInputModal from './DatePickerInputModal';
 import DatePickerInputWithoutModal from './DatePickerInputWithoutModal';
 import type { DatePickerInputProps } from './types';
@@ -125,8 +126,9 @@ function DatePickerInput(
             validRange={validRange}
             onChange={onChange}
             // locale={locale}
-            inputButtons={rightElement}
-        />
+        >
+            <TextInput.Right>{rightElement}</TextInput.Right>
+        </DatePickerInputWithoutModal>
     );
 }