react-native-molecules 0.5.0-beta.0

package/components/TextInput/index.tsx

@@ -0,0 +1,16 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import TextInputDefault from './TextInput';
+
+registerMoleculesComponents({
+    TextInput: TextInputDefault,
+});
+
+export const TextInput = getRegisteredComponentWithFallback('TextInput', TextInputDefault);
+
+export {
+    type ElementProps as TextInputElementProps,
+    type TextInputHandles,
+    type Props as TextInputProps,
+} from './TextInput';
+export type * from './types';
+export { styles as textInputStyles } from './utils';

package/components/TextInput/types.ts

@@ -0,0 +1,96 @@
+import type { ReactElement, RefObject } from 'react';
+import type {
+    Animated,
+    BlurEvent,
+    ColorValue,
+    FocusEvent,
+    StyleProp,
+    TextInput as NativeTextInput,
+    TextStyle,
+} from 'react-native';
+
+import type { Props as TextInputProps } from './TextInput';
+
+export type TextInputLabelProp = string | ReactElement;
+
+export type TextInputSize = 'lg' | 'md' | 'sm';
+
+export type TextInputVariant = 'flat' | 'outlined' | 'plain';
+
+export type RenderProps = {
+    ref: RefObject<NativeTextInput | null>;
+    onChangeText?: (a: string) => void;
+    placeholder?: string;
+    placeholderTextColor?: ColorValue;
+    editable?: boolean;
+    selectionColor?: string;
+    onFocus?: (args: FocusEvent) => void;
+    onBlur?: (args: BlurEvent) => void;
+    underlineColorAndroid?: string;
+    style: any;
+    multiline?: boolean;
+    size?: TextInputSize;
+    numberOfLines?: number;
+    value?: string;
+    adjustsFontSizeToFit?: boolean;
+    testID?: string;
+};
+
+export type State = {
+    labelAnimation: Animated.Value;
+    errorAnimation: Animated.Value;
+    focused: boolean;
+    placeholder?: string;
+    value?: string;
+    labelLayout: { measured: boolean; width: number; height: number };
+};
+
+export type InputBaseProps = {
+    parentState: State;
+    innerRef: RefObject<NativeTextInput | null>;
+    onFocus?: (args: any) => void;
+    onBlur?: (args: any) => void;
+    forceFocus: () => void;
+    onChangeText?: (value: string) => void;
+    onLayoutAnimatedText: (args: any) => void;
+    componentStyles: Record<string, any>;
+} & Omit<
+    TextInputProps,
+    | 'style'
+    | 'activeOutlineColor'
+    | 'activeUnderlineColor'
+    | 'underlineColor'
+    | 'outlineColor'
+    | 'placeholderTextColor'
+    | 'selectionColor'
+    | 'containerStyle'
+>;
+
+export type InputLabelProps = {
+    baseLabelTranslateX: number;
+    wiggleOffsetX: number;
+    labelScale: number;
+    floatingLabelVerticalOffset?: number;
+    paddingOffset?: { paddingLeft: number; paddingRight: number } | null;
+    labelTranslationXOffset?: number;
+    label?: TextInputLabelProp | null;
+    error?: boolean | null;
+    onLayoutAnimatedText: (args: any) => void;
+    maxFontSizeMultiplier?: number | undefined | null;
+    required?: boolean;
+    testID?: string;
+    style?: StyleProp<TextStyle>;
+    floatingStyle?: StyleProp<TextStyle>;
+    hasValue: boolean;
+    labelLayout: { measured: boolean; width: number; height: number };
+    labelAnimation: Animated.Value;
+    errorAnimation: Animated.Value;
+    focused: boolean;
+};
+
+export type LabelBackgroundProps = {
+    labelProps: InputLabelProps;
+    labelStyle: any;
+    parentState: State;
+    maxFontSizeMultiplier?: number | undefined | null;
+};

package/components/TextInput/utils.ts

@@ -0,0 +1,544 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import {
+    getRegisteredComponentUtils,
+    getRegisteredMoleculesComponentStyles,
+    registerComponentsStyles,
+    registerComponentUtils,
+} from '../../core';
+
+export type States =
+    | 'disabled'
+    | 'focused'
+    | 'hovered'
+    | 'hoveredAndFocused'
+    | 'errorFocusedAndHovered'
+    | 'error'
+    | 'errorFocused'
+    | 'errorHovered'
+    | 'errorDisabled';
+
+const getInputMinHeightDefault = (variant: string, size: string) => {
+    switch (true) {
+        case variant === 'outlined' && size === 'lg':
+            return 64;
+        case variant === 'outlined' && size === 'md':
+            return 56;
+        case variant === 'outlined' && size === 'sm':
+            return 48;
+        case variant === 'flat' && size === 'lg':
+            return 64;
+        case variant === 'flat' && size === 'md':
+            return 56;
+        case variant === 'flat' && size === 'sm':
+            return 52;
+        default:
+            return 0;
+    }
+};
+
+registerComponentUtils('TextInput', {
+    getInputMinHeight: getInputMinHeightDefault,
+});
+
+export const getInputMinHeight =
+    getRegisteredComponentUtils('TextInput').getInputMinHeight ?? getInputMinHeightDefault;
+
+const textInputStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        variants: {
+            variant: {
+                outlined: {},
+            },
+            state: {
+                focused: {
+                    ...({
+                        activeColor: theme.colors.primary,
+                    } as Record<string, any>),
+                },
+                hovered: {},
+                hoveredAndFocused: {
+                    ...({
+                        activeColor: theme.colors.primary,
+                    } as Record<string, any>),
+                },
+                disabled: {},
+                error: {
+                    ...({
+                        activeColor: theme.colors.error,
+                    } as Record<string, any>),
+                },
+                errorFocused: {
+                    ...({
+                        activeColor: theme.colors.error,
+                    } as Record<string, any>),
+                },
+                errorFocusedAndHovered: {
+                    ...({
+                        activeColor: theme.colors.error,
+                    } as Record<string, any>),
+                },
+                errorDisabled: {
+                    ...({
+                        activeColor: theme.colors.error,
+                    } as Record<string, any>),
+                },
+                errorHovered: {},
+            },
+            size: {
+                lg: {},
+                md: {},
+                sm: {},
+            },
+        },
+    },
+
+    container: {
+        flexDirection: 'row',
+        paddingHorizontal: theme.spacings['4'],
+        variants: {
+            variant: {
+                outlined: {
+                    borderRadius: theme.shapes.corner.extraSmall,
+                },
+                flat: {
+                    backgroundColor: theme.colors.surfaceVariant,
+                    borderTopLeftRadius: theme.shapes.corner.extraSmall,
+                    borderTopRightRadius: theme.shapes.corner.extraSmall,
+                },
+                plain: {},
+            },
+        },
+        compoundVariants: [
+            {
+                variant: 'flat',
+                state: 'disabled',
+                styles: {
+                    backgroundColor: theme.colors.surfaceVariant,
+                },
+            },
+        ],
+    },
+    leftElement: {
+        color: theme.colors.onSurfaceVariant,
+        iconSize: 20,
+        marginRight: theme.spacings['3'],
+        marginLeft: theme.spacings._1,
+        justifyContent: 'center',
+
+        state: {
+            disabled: {
+                color: theme.colors.onSurface,
+                opacity: 0.38,
+            },
+            error: {
+                color: theme.colors.onSurfaceVariant,
+            },
+            errorFocused: {
+                color: theme.colors.onSurfaceVariant,
+            },
+            errorFocusedAndHovered: {
+                color: theme.colors.onSurfaceVariant,
+            },
+            errorDisabled: {
+                color: theme.colors.onSurfaceVariant,
+                opacity: 0.38,
+            },
+            errorHovered: {
+                color: theme.colors.onSurfaceVariant,
+            },
+        },
+    },
+    rightElement: {
+        color: theme.colors.onSurfaceVariant,
+        iconSize: 24,
+        marginRight: theme.spacings._1,
+        marginLeft: theme.spacings['3'],
+        justifyContent: 'center',
+
+        variants: {
+            state: {
+                disabled: {
+                    color: theme.colors.onSurface,
+                    opacity: 0.38,
+                },
+                error: {
+                    color: theme.colors.error,
+                },
+                errorFocused: {
+                    color: theme.colors.error,
+                },
+                errorFocusedAndHovered: {
+                    color: theme.colors.error,
+                },
+                errorDisabled: {
+                    color: theme.colors.error,
+                    opacity: 0.38,
+                },
+                errorHovered: {
+                    color: theme.colors.onErrorContainer,
+                },
+            },
+        },
+    },
+    floatingLabel: {
+        variants: {
+            variant: {
+                outlined: {
+                    backgroundColor: theme.colors.surface,
+                },
+            },
+        },
+    },
+    labelText: {
+        position: 'absolute',
+        left: 0,
+        color: theme.colors.onSurfaceVariant,
+        typescale: theme.typescale.bodyLarge,
+
+        variants: {
+            size: {
+                lg: {
+                    ...theme.typescale.bodyExtraLarge,
+                },
+                md: {
+                    ...theme.typescale.bodyLarge,
+                },
+                sm: {
+                    ...theme.typescale.bodyMedium,
+                },
+            },
+
+            variant: {
+                outlined: {
+                    paddingHorizontal: theme.spacings['1'],
+                    marginLeft: theme.spacings._1,
+                },
+            },
+
+            state: {
+                focused: {
+                    color: theme.colors.primary,
+                },
+
+                hoveredAndFocused: {
+                    color: theme.colors.primary,
+                },
+
+                disabled: {
+                    color: theme.colors.onSurface,
+                    opacity: 0.38,
+                },
+
+                error: {
+                    color: theme.colors.error,
+                },
+
+                errorFocused: {
+                    color: theme.colors.error,
+                },
+
+                errorFocusedAndHovered: {
+                    color: theme.colors.error,
+                },
+
+                errorDisabled: {
+                    color: theme.colors.error,
+                    opacity: 0.38,
+                },
+
+                errorHovered: {
+                    color: theme.colors.onErrorContainer,
+                },
+            },
+        },
+    },
+    inputText: {
+        color: theme.colors.onSurface,
+        ...theme.typescale.bodyLarge,
+        flexGrow: 1,
+
+        variants: {
+            size: {
+                lg: {
+                    ...theme.typescale.bodyExtraLarge,
+                },
+                md: {
+                    ...theme.typescale.bodyLarge,
+                },
+                sm: {
+                    ...theme.typescale.bodyMedium,
+                },
+            },
+            variant: {
+                flat: {},
+            },
+
+            state: {
+                disabled: {
+                    color: theme.colors.onSurface,
+                    opacity: 0.38,
+                },
+                error: {
+                    color: theme.colors.onSurface,
+                },
+                errorFocused: {
+                    color: theme.colors.onSurface,
+                },
+                errorFocusedAndHovered: {
+                    color: theme.colors.onSurface,
+                },
+                errorDisabled: {
+                    color: theme.colors.onSurface,
+                    opacity: 0.38,
+                },
+                errorHovered: {
+                    color: theme.colors.onSurface,
+                },
+            },
+        },
+    },
+    supportingText: {
+        variants: {
+            state: {
+                disabled: {
+                    opacity: 0.38,
+                },
+                errorDisabled: {
+                    opacity: 0.38,
+                },
+            },
+        },
+    },
+    placeholder: {
+        color: theme.colors.onSurfaceVariant,
+    },
+    outline: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        _web: {
+            borderRadius: 'inherit',
+        },
+        variants: {
+            variant: {
+                outlined: {
+                    borderRadius: theme.shapes.corner.extraSmall,
+                    borderColor: theme.colors.outline,
+                    borderWidth: 1,
+                },
+                flat: {
+                    backgroundColor: theme.colors.surfaceVariant,
+                },
+            },
+        },
+        compoundVariants: [
+            {
+                variant: 'outlined',
+                state: 'focused',
+                styles: {
+                    borderWidth: 2,
+                    borderColor: theme.colors.primary,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'errorDisabled',
+                styles: {
+                    borderColor: theme.colors.error,
+                    backgroundColor: theme.colors.surface,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'hovered',
+                styles: {
+                    borderColor: theme.colors.onSurface,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'errorHovered',
+                styles: {
+                    borderColor: theme.colors.onErrorContainer,
+                    backgroundColor: theme.colors.surface,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'hoveredAndFocused',
+                styles: {
+                    borderWidth: 2,
+                    borderColor: theme.colors.primary,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'errorFocusedAndHovered',
+                styles: {
+                    borderWidth: 2,
+                    borderColor: theme.colors.error,
+                    backgroundColor: theme.colors.surface,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'errorFocused',
+                styles: {
+                    borderWidth: 2,
+                    borderColor: theme.colors.error,
+                    backgroundColor: theme.colors.surface,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'error',
+                styles: {
+                    borderColor: theme.colors.error,
+                    backgroundColor: theme.colors.surface,
+                },
+            },
+        ],
+    },
+    activeIndicator: {
+        variants: {
+            variant: {
+                flat: {
+                    height: 1,
+                    backgroundColor: theme.colors.onSurfaceVariant,
+                },
+            },
+            state: {
+                errorHovered: {
+                    backgroundColor: theme.colors.onErrorContainer,
+                },
+            },
+        },
+        compoundVariants: [
+            {
+                variant: 'flat',
+                state: 'focused',
+                styles: {
+                    height: 2,
+                    backgroundColor: theme.colors.primary,
+                },
+            },
+            {
+                variant: 'flat',
+                state: 'hovered',
+                styles: {
+                    height: 1,
+                    backgroundColor: theme.colors.onSurface,
+                },
+            },
+            {
+                variant: 'flat',
+                state: 'errorHovered',
+                styles: {
+                    height: 1,
+                    backgroundColor: theme.colors.onErrorContainer,
+                },
+            },
+            {
+                variant: 'flat',
+                state: 'hoveredAndFocused',
+                styles: {
+                    height: 2,
+                    backgroundColor: theme.colors.primary,
+                },
+            },
+            {
+                variant: 'flat',
+                state: 'errorFocusedAndHovered',
+                styles: {
+                    height: 2,
+                    backgroundColor: theme.colors.error,
+                },
+            },
+            {
+                variant: 'flat',
+                state: 'disabled',
+                styles: {
+                    height: 1,
+                    backgroundColor: theme.colors.onSurface,
+                    opacity: 0.38,
+                },
+            },
+            {
+                variant: 'flat',
+                state: 'error',
+                styles: {
+                    backgroundColor: theme.colors.error,
+                },
+            },
+            {
+                variant: 'flat',
+                state: 'errorFocused',
+                styles: {
+                    height: 2,
+                    backgroundColor: theme.colors.error,
+                },
+            },
+            {
+                variant: 'flat',
+                state: 'errorDisabled',
+                styles: {
+                    height: 1,
+                    backgroundColor: theme.colors.error,
+                    opacity: 0.38,
+                },
+            },
+        ],
+    },
+    stateLayer: {
+        compoundVariants: [
+            {
+                variant: 'flat',
+                state: 'hovered',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+            },
+            {
+                variant: 'flat',
+                state: 'errorHovered',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+            },
+        ],
+    },
+    underline: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: 1,
+        zIndex: 1,
+    },
+    labelContainer: {
+        paddingTop: 0,
+        paddingBottom: 0,
+        flexGrow: 1,
+        flexShrink: 1,
+    },
+    patchContainer: {
+        height: 24,
+        zIndex: 2,
+    },
+}));
+
+registerComponentsStyles({
+    TextInput: textInputStylesDefault,
+});
+
+export const styles = getRegisteredMoleculesComponentStyles('TextInput');
+
+export const inputLabelStyles = StyleSheet.create({
+    labelContainer: {
+        zIndex: 3,
+        justifyContent: 'center',
+    },
+});

package/components/TextInputWithMask/TextInputMask.tsx

@@ -0,0 +1,57 @@
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import type { BlurEvent } from 'react-native';
+
+import { TextInput, type TextInputProps } from '../TextInput';
+import { enhanceTextWithMask } from './utils';
+
+export type Props = Omit<TextInputProps, 'onChangeText'> & {
+    mask: string;
+    onChangeText?: (text: string) => void;
+};
+
+// TODO - make it more universal
+function TextInputWithMask(
+    { onChangeText: onChangeTextProp, value = '', mask, onBlur: onBlurProp, ...rest }: Props,
+    ref: any,
+) {
+    const [controlledValue, setControlledValue] = useState<string>(value || '');
+
+    const inputRef = useRef(null);
+
+    const onChangeText = useCallback(
+        (text: string) => {
+            const enhancedText = enhanceTextWithMask(text, mask, controlledValue);
+            setControlledValue(enhancedText);
+            onChangeTextProp?.(enhancedText);
+        },
+        [controlledValue, mask, onChangeTextProp],
+    );
+
+    const onBlur = useCallback(
+        (e: BlurEvent) => {
+            onBlurProp?.(e);
+            onChangeTextProp?.(controlledValue);
+        },
+        [controlledValue, onBlurProp, onChangeTextProp],
+    );
+
+    useEffect(() => {
+        setControlledValue(value || '');
+    }, [value]);
+
+    useImperativeHandle(ref, () =>
+        Object.assign(inputRef?.current || {}, { setDisplayValue: setControlledValue }),
+    );
+
+    return (
+        <TextInput
+            ref={inputRef}
+            {...rest}
+            value={controlledValue}
+            onChangeText={onChangeText}
+            onBlur={onBlur}
+        />
+    );
+}
+
+export default forwardRef(TextInputWithMask);