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

package/components/TextInput/index.tsx

@@ -1,7 +1,23 @@
 import { getRegisteredComponentWithFallback } from '../../core';
-import TextInputDefault from './TextInput';
+import TextInputDefault, {
+    TextInputIcon,
+    TextInputLabel,
+    TextInputLeft,
+    TextInputOutline,
+    TextInputRight,
+    TextInputSupportingText,
+} from './TextInput';
+
+const TextInputBase = getRegisteredComponentWithFallback('TextInput', TextInputDefault);
 
-export const TextInput = getRegisteredComponentWithFallback('TextInput', TextInputDefault);
+export const TextInput = Object.assign(TextInputBase, {
+    Label: TextInputLabel,
+    Left: TextInputLeft,
+    Right: TextInputRight,
+    Icon: TextInputIcon,
+    Outline: TextInputOutline,
+    SupportingText: TextInputSupportingText,
+});
 
 export {
     type ElementProps as TextInputElementProps,
@@ -9,4 +25,4 @@ export {
     type Props as TextInputProps,
 } from './TextInput';
 export type * from './types';
-export { styles as textInputStyles } from './utils';
+export { TextInputContext } from './utils';

package/components/TextInput/types.ts

@@ -1,37 +1,96 @@
-import type { ReactElement, RefObject } from 'react';
+import type { ReactElement, ReactNode, RefObject } from 'react';
 import type {
     Animated,
-    BlurEvent,
-    ColorValue,
-    FocusEvent,
+    GestureResponderEvent,
+    LayoutChangeEvent,
+    PressableProps,
     StyleProp,
     TextInput as NativeTextInput,
+    TextProps,
     TextStyle,
+    ViewStyle,
 } from 'react-native';
 
+import type { IconProps } from '../Icon';
 import type { Props as TextInputProps } from './TextInput';
 
 export type TextInputLabelProp = string | ReactElement;
 
-export type TextInputSize = 'lg' | 'md' | 'sm';
+// States for compound component context
+export type TextInputStates =
+    | 'disabled'
+    | 'focused'
+    | 'hovered'
+    | 'hoveredAndFocused'
+    | 'errorFocusedAndHovered'
+    | 'error'
+    | 'errorFocused'
+    | 'errorHovered'
+    | 'errorDisabled'
+    | 'default';
+
+// Context type for compound components
+export type TextInputContextType = {
+    // Variants
+    variant: TextInputVariant;
+    size: TextInputSize;
+    state: TextInputStates;
+
+    // State flags
+    disabled: boolean;
+    error: boolean;
+    focused: boolean;
+    hovered: boolean;
+    hasValue: boolean;
+    hasLabel: boolean;
+    required: boolean;
+    multiline: boolean;
+
+    // Layout
+    labelLayout: { measured: boolean; width: number; height: number };
+    leftElementLayout: { measured: boolean; width: number; height: number };
+    onLayoutLabel: (e: LayoutChangeEvent) => void;
+    onLayoutLeftElement: (e: LayoutChangeEvent) => void;
+
+    // Refs and handlers
+    forceFocus: () => void;
+};
+
+// Compound component props
+export type TextInputLabelCompoundProps = TextProps & {
+    children: TextInputLabelProp;
+    floatingStyle?: StyleProp<TextStyle>;
+    maxFontSizeMultiplier?: number;
+};
+
+export type TextInputElementCompoundProps = Omit<PressableProps, 'onPress'> & {
+    onPress?: null | ((event: GestureResponderEvent, forceFocus: () => void) => void) | undefined;
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    onLayout?: (e: LayoutChangeEvent) => void;
+};
+
+export type TextInputIconCompoundProps = Omit<IconProps, 'color'> & {
+    color?: string;
+};
+
+export type TextInputSupportingTextCompoundProps = {
+    children: string;
+    style?: StyleProp<TextStyle>;
+};
+
+export type TextInputOutlineCompoundProps = {
+    style?: StyleProp<ViewStyle>;
+};
+
+export type TextInputSize = 'xs' | 'lg' | 'md' | 'sm';
 
 export type TextInputVariant = 'flat' | 'outlined' | 'plain';
 
-export type RenderProps = {
+export type RenderProps = Omit<TextInputProps, 'ref'> & {
     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;
 };
@@ -54,17 +113,7 @@ export type InputBaseProps = {
     onChangeText?: (value: string) => void;
     onLayoutAnimatedText: (args: any) => void;
     componentStyles: Record<string, any>;
-} & Omit<
-    TextInputProps,
-    | 'style'
-    | 'activeOutlineColor'
-    | 'activeUnderlineColor'
-    | 'underlineColor'
-    | 'outlineColor'
-    | 'placeholderTextColor'
-    | 'selectionColor'
-    | 'containerStyle'
->;
+} & Omit<TextInputProps, 'style' | 'placeholderTextColor' | 'selectionColor' | 'containerStyle'>;
 
 export type InputLabelProps = {
     baseLabelTranslateX: number;

package/components/TextInput/utils.ts

@@ -1,9 +1,30 @@
+import { createContext } from 'react';
 import { StyleSheet } from 'react-native-unistyles';
 
 import {
     getRegisteredComponentStylesWithFallback,
     getRegisteredComponentUtilsWithFallback,
 } from '../../core';
+import type { TextInputContextType, TextInputStates } from './types';
+
+export const TextInputContext = createContext<TextInputContextType>({
+    variant: 'outlined',
+    size: 'sm',
+    state: 'default' as TextInputStates,
+    disabled: false,
+    error: false,
+    focused: false,
+    hovered: false,
+    hasValue: false,
+    hasLabel: false,
+    required: false,
+    multiline: false,
+    labelLayout: { measured: false, width: 0, height: 0 },
+    leftElementLayout: { measured: false, width: 0, height: 0 },
+    onLayoutLabel: () => {},
+    onLayoutLeftElement: () => {},
+    forceFocus: () => {},
+});
 
 export type States =
     | 'disabled'
@@ -24,12 +45,16 @@ const getInputMinHeightDefault = (variant: string, size: string) => {
             return 56;
         case variant === 'outlined' && size === 'sm':
             return 48;
+        case variant === 'outlined' && size === 'xs':
+            return 40;
         case variant === 'flat' && size === 'lg':
             return 64;
         case variant === 'flat' && size === 'md':
             return 56;
         case variant === 'flat' && size === 'sm':
             return 52;
+        case variant === 'flat' && size === 'xs':
+            return 48;
         default:
             return 0;
     }
@@ -41,58 +66,12 @@ export const getInputMinHeight = getRegisteredComponentUtilsWithFallback(
     'getInputMinHeight',
 );
 
+// Main TextInput component styles
 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: {
@@ -116,68 +95,103 @@ const textInputStylesDefault = StyleSheet.create(theme => ({
             },
         ],
     },
-    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,
-            },
+    input: {
+        color: theme.colors.onSurface,
+        ...theme.typescale.bodyLarge,
+        flexGrow: 1,
+
+        _web: {
+            outline: 'none',
         },
-    },
-    rightElement: {
-        color: theme.colors.onSurfaceVariant,
-        iconSize: 24,
-        marginRight: theme.spacings._1,
-        marginLeft: theme.spacings['3'],
-        justifyContent: 'center',
 
         variants: {
+            size: {
+                lg: {
+                    ...theme.typescale.bodyExtraLarge,
+                },
+                md: {
+                    ...theme.typescale.bodyLarge,
+                },
+                sm: {
+                    ...theme.typescale.bodyMedium,
+                },
+                xs: {
+                    ...theme.typescale.bodyMedium,
+                },
+            },
+            variant: {
+                flat: {
+                    paddingTop: 12,
+                },
+            },
+
             state: {
                 disabled: {
                     color: theme.colors.onSurface,
                     opacity: 0.38,
                 },
                 error: {
-                    color: theme.colors.error,
+                    color: theme.colors.onSurface,
                 },
                 errorFocused: {
-                    color: theme.colors.error,
+                    color: theme.colors.onSurface,
                 },
                 errorFocusedAndHovered: {
-                    color: theme.colors.error,
+                    color: theme.colors.onSurface,
                 },
                 errorDisabled: {
-                    color: theme.colors.error,
+                    color: theme.colors.onSurface,
                     opacity: 0.38,
                 },
                 errorHovered: {
-                    color: theme.colors.onErrorContainer,
+                    color: theme.colors.onSurface,
                 },
             },
         },
     },
+
+    placeholder: {
+        color: theme.colors.onSurfaceVariant,
+    },
+
+    stateLayer: {
+        borderTopLeftRadius: theme.shapes.corner.extraSmall,
+        borderTopRightRadius: theme.shapes.corner.extraSmall,
+        variants: {
+            variant: {},
+            state: {},
+        },
+        compoundVariants: [
+            {
+                variant: 'flat',
+                state: 'hovered',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+            },
+            {
+                variant: 'flat',
+                state: 'errorHovered',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+            },
+        ],
+    },
+
+    inputWrapper: {
+        paddingTop: 0,
+        paddingBottom: 0,
+        flexGrow: 1,
+        flexShrink: 1,
+    },
+}));
+
+export const styles = getRegisteredComponentStylesWithFallback('TextInput', textInputStylesDefault);
+
+// TextInput.Label styles
+const textInputLabelStylesDefault = StyleSheet.create(theme => ({
     floatingLabel: {
         variants: {
             variant: {
@@ -187,11 +201,12 @@ const textInputStylesDefault = StyleSheet.create(theme => ({
             },
         },
     },
+
     labelText: {
         position: 'absolute',
         left: 0,
         color: theme.colors.onSurfaceVariant,
-        typescale: theme.typescale.bodyLarge,
+        ...theme.typescale.bodyLarge,
 
         variants: {
             size: {
@@ -204,6 +219,9 @@ const textInputStylesDefault = StyleSheet.create(theme => ({
                 sm: {
                     ...theme.typescale.bodyMedium,
                 },
+                xs: {
+                    ...theme.typescale.bodyMedium,
+                },
             },
 
             variant: {
@@ -250,51 +268,95 @@ const textInputStylesDefault = StyleSheet.create(theme => ({
             },
         },
     },
-    inputText: {
-        color: theme.colors.onSurface,
-        ...theme.typescale.bodyLarge,
-        flexGrow: 1,
+}));
+
+export const textInputLabelStyles = getRegisteredComponentStylesWithFallback(
+    'TextInputLabel',
+    textInputLabelStylesDefault,
+);
+
+// TextInput.Left styles
+const textInputLeftStylesDefault = StyleSheet.create(theme => ({
+    leftElement: {
+        color: theme.colors.onSurfaceVariant,
+        marginRight: theme.spacings['3'],
+        marginLeft: theme.spacings._1,
+        justifyContent: 'center',
 
         variants: {
-            size: {
-                lg: {
-                    ...theme.typescale.bodyExtraLarge,
+            state: {
+                disabled: {
+                    color: theme.colors.onSurface,
+                    opacity: 0.38,
                 },
-                md: {
-                    ...theme.typescale.bodyLarge,
+                error: {
+                    color: theme.colors.onSurfaceVariant,
                 },
-                sm: {
-                    ...theme.typescale.bodyMedium,
+                errorFocused: {
+                    color: theme.colors.onSurfaceVariant,
+                },
+                errorFocusedAndHovered: {
+                    color: theme.colors.onSurfaceVariant,
+                },
+                errorDisabled: {
+                    color: theme.colors.onSurfaceVariant,
+                    opacity: 0.38,
+                },
+                errorHovered: {
+                    color: theme.colors.onSurfaceVariant,
                 },
             },
-            variant: {
-                flat: {},
-            },
+        },
+    },
+}));
+
+export const textInputLeftStyles = getRegisteredComponentStylesWithFallback(
+    'TextInputLeft',
+    textInputLeftStylesDefault,
+);
+
+// TextInput.Right styles
+const textInputRightStylesDefault = StyleSheet.create(theme => ({
+    rightElement: {
+        color: theme.colors.onSurfaceVariant,
+        marginRight: theme.spacings._1,
+        marginLeft: theme.spacings['3'],
+        justifyContent: 'center',
 
+        variants: {
             state: {
                 disabled: {
                     color: theme.colors.onSurface,
                     opacity: 0.38,
                 },
                 error: {
-                    color: theme.colors.onSurface,
+                    color: theme.colors.error,
                 },
                 errorFocused: {
-                    color: theme.colors.onSurface,
+                    color: theme.colors.error,
                 },
                 errorFocusedAndHovered: {
-                    color: theme.colors.onSurface,
+                    color: theme.colors.error,
                 },
                 errorDisabled: {
-                    color: theme.colors.onSurface,
+                    color: theme.colors.error,
                     opacity: 0.38,
                 },
                 errorHovered: {
-                    color: theme.colors.onSurface,
+                    color: theme.colors.onErrorContainer,
                 },
             },
         },
     },
+}));
+
+export const textInputRightStyles = getRegisteredComponentStylesWithFallback(
+    'TextInputRight',
+    textInputRightStylesDefault,
+);
+
+// TextInput.SupportingText styles
+const textInputSupportingTextStylesDefault = StyleSheet.create({
     supportingText: {
         variants: {
             state: {
@@ -307,9 +369,15 @@ const textInputStylesDefault = StyleSheet.create(theme => ({
             },
         },
     },
-    placeholder: {
-        color: theme.colors.onSurfaceVariant,
-    },
+});
+
+export const textInputSupportingTextStyles = getRegisteredComponentStylesWithFallback(
+    'TextInputSupportingText',
+    textInputSupportingTextStylesDefault,
+);
+
+// TextInput.Outline styles
+const textInputOutlineStylesDefault = StyleSheet.create(theme => ({
     outline: {
         position: 'absolute',
         left: 0,
@@ -322,7 +390,8 @@ const textInputStylesDefault = StyleSheet.create(theme => ({
         variants: {
             variant: {
                 outlined: {
-                    borderRadius: theme.shapes.corner.extraSmall,
+                    // this will be inherited from root
+                    // borderRadius: theme.shapes.corner.extraSmall,
                     borderColor: theme.colors.outline,
                     borderWidth: 1,
                 },
@@ -399,6 +468,7 @@ const textInputStylesDefault = StyleSheet.create(theme => ({
             },
         ],
     },
+
     activeIndicator: {
         variants: {
             variant: {
@@ -489,24 +559,7 @@ const textInputStylesDefault = StyleSheet.create(theme => ({
             },
         ],
     },
-    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,
@@ -515,23 +568,60 @@ const textInputStylesDefault = StyleSheet.create(theme => ({
         height: 1,
         zIndex: 1,
     },
-    labelContainer: {
-        paddingTop: 0,
-        paddingBottom: 0,
-        flexGrow: 1,
-        flexShrink: 1,
-    },
-    patchContainer: {
-        height: 24,
-        zIndex: 2,
-    },
 }));
 
-export const styles = getRegisteredComponentStylesWithFallback('TextInput', textInputStylesDefault);
+export const textInputOutlineStyles = getRegisteredComponentStylesWithFallback(
+    'TextInputOutline',
+    textInputOutlineStylesDefault,
+);
 
-export const inputLabelStyles = StyleSheet.create({
-    labelContainer: {
-        zIndex: 3,
-        justifyContent: 'center',
+// TextInput.Icon styles
+const textInputIconStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        variants: {
+            state: {
+                default: {
+                    color: theme.colors.onSurfaceVariant,
+                },
+                focused: {
+                    color: theme.colors.onSurfaceVariant,
+                },
+                hovered: {
+                    color: theme.colors.onSurfaceVariant,
+                },
+                hoveredAndFocused: {
+                    color: theme.colors.onSurfaceVariant,
+                },
+                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,
+                },
+            },
+            position: {
+                left: {},
+                right: {},
+            },
+        },
     },
-});
+}));
+
+export const textInputIconStyles = getRegisteredComponentStylesWithFallback(
+    'TextInputIcon',
+    textInputIconStylesDefault,
+);