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

package/components/FilePicker/FilePicker.tsx

@@ -1,8 +1,8 @@
-import { forwardRef, memo, type ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 
+import useControlledValue from '../../hooks/useControlledValue';
 import useFilePicker from '../../hooks/useFilePicker';
 import type { DocumentPickerOptions, DocumentResult } from '../../utils/DocumentPicker';
-import { ActivityIndicator } from '../ActivityIndicator';
 import { IconButton } from '../IconButton';
 import { TextInput, type TextInputProps } from '../TextInput';
 
@@ -10,6 +10,7 @@ export type OmitProp =
     | 'editable'
     | 'multiline'
     | 'onChangeText'
+    | 'onChange'
     | 'keyboardType'
     | 'defaultValue'
     | 'value'
@@ -24,12 +25,9 @@ export type Props = Omit<TextInputProps, OmitProp> &
          */
         multiple?: boolean;
         /**
-         * Displays the Spinner on the right side in place of the default upload icon
-         * @default false
+         * Default value for uncontrolled usage
          */
-        loading?: boolean;
-        left?: ReactNode;
-        right?: ReactNode;
+        defaultValue?: DocumentResult | DocumentResult[];
         /**
          * To Control the value
          */
@@ -37,32 +35,31 @@ export type Props = Omit<TextInputProps, OmitProp> &
         /**
          * The Callback function to return the selected files as an array or object
          */
-        onChange?: (result: DocumentResult | DocumentResult[]) => any;
-        /**
-         * To replace the default progress indicator
-         */
-        progressIndicator?: ReactNode;
+        onChange?: (result: DocumentResult | DocumentResult[] | undefined) => any;
     };
 
-const FilePicker = (
-    {
-        loading,
-        right: rightProp,
-        progressIndicator,
-        type,
-        multiple,
-        transitionStyle,
-        mode,
-        presentationStyle,
-        value,
-        onChange = () => {},
-        onCancel,
-        onError,
-        ...rest
-    }: Props,
-    ref: any,
-) => {
-    const [displayText, setDisplayText] = useState('');
+const FilePicker = ({
+    ref,
+    type,
+    multiple,
+    transitionStyle,
+    mode,
+    presentationStyle,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    onCancel,
+    onError,
+    children,
+    ...rest
+}: Props) => {
+    const [value, onValueChange] = useControlledValue<
+        DocumentResult | DocumentResult[] | undefined
+    >({
+        value: valueProp,
+        defaultValue,
+        onChange,
+    });
 
     const { openFilePicker } = useFilePicker({
         type,
@@ -74,60 +71,34 @@ const FilePicker = (
         onError,
     });
 
-    const onSetInputValue = useCallback(
-        (response: DocumentResult | DocumentResult[] | undefined) => {
-            if (Array.isArray(response)) {
-                if (response.length > 1) {
-                    setDisplayText(`${response.length} file${response.length > 1 ? 's' : ''}`);
-                    return;
-                }
+    const displayText = useMemo(() => {
+        if (!value) return '';
 
-                setDisplayText(response[0].name || '');
-                return;
+        if (Array.isArray(value)) {
+            if (value.length > 1) {
+                return `${value.length} files`;
             }
+            return value[0]?.name || '';
+        }
 
-            setDisplayText(response?.name || '');
-        },
-        [],
-    );
+        return value.name || '';
+    }, [value]);
 
     const onPress = useCallback(() => {
         openFilePicker(response => {
-            onSetInputValue(response);
-
-            onChange?.(response);
+            onValueChange(response);
         });
-    }, [onChange, onSetInputValue, openFilePicker]);
-
-    const rightElement = useMemo(() => {
-        if (!loading) {
-            return (
-                <>
-                    {rightProp || (
-                        <IconButton type="material-community" name="upload" onPress={onPress} />
-                    )}
-                </>
-            );
-        } else {
-            return <>{progressIndicator || <ActivityIndicator />}</>;
-        }
-    }, [loading, onPress, progressIndicator, rightProp]);
-
-    // if the value changes, we only want file name or the length of the array to display the text
-    useEffect(() => {
-        onSetInputValue(value);
-    }, [onSetInputValue, value]);
+    }, [onValueChange, openFilePicker]);
 
     return (
-        <TextInput
-            label="Choose file"
-            {...rest}
-            value={displayText}
-            editable={false}
-            right={rightElement}
-            ref={ref}
-        />
+        <TextInput value={displayText} {...rest} editable={false} ref={ref}>
+            <TextInput.Label>Choose file</TextInput.Label>
+            <TextInput.Right>
+                <IconButton type="material-community" name="upload" onPress={onPress} />
+            </TextInput.Right>
+            {children}
+        </TextInput>
     );
 };
 
-export default memo(forwardRef(FilePicker));
+export default memo(FilePicker);

package/components/FilePicker/index.tsx

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

package/components/FilePicker/utils.ts

@@ -1,13 +1,12 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const filePickerStylesDefault = StyleSheet.create({
     root: {},
 });
 
-registerComponentsStyles({
-    FilePicker: filePickerStylesDefault,
-});
-
-export const defaultStyles = getRegisteredMoleculesComponentStyles('FilePicker');
+export const defaultStyles = getRegisteredComponentStylesWithFallback(
+    'FilePicker',
+    filePickerStylesDefault,
+);

package/components/HelperText/HelperText.tsx

@@ -24,41 +24,6 @@ export type Props = TextProps & {
     testID?: string;
 };
 
-/**
- * Helper text is used in conjuction with input elements to provide additional hints for the user.
- *
- * <div class="screenshots">
- *   <img class="small" src="screenshots/helper-text.gif" />
- * </div>
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { View } from 'react-native';
- * import { HelperText, TextInput } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [text, setText] = React.useState('');
- *
- *    const onChangeText = text => setText(text);
- *
- *   const hasErrors = () => {
- *     return !text.includes('@');
- *   };
- *
- *  return (
- *     <View>
- *       <TextInput label="Email" value={text} onChangeText={onChangeText} />
- *       <HelperText variant="error" visible={hasErrors()}>
- *         Email address is invalid!
- *       </HelperText>
- *     </View>
- *   );
- * };
- *
- * export default MyComponent;
- * ```
- */
 const HelperText = ({
     style: styleProp,
     variant = 'info',

package/components/HelperText/index.tsx

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

package/components/HelperText/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 export const helperTextStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -21,9 +21,7 @@ export const helperTextStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    HelperText: helperTextStylesDefault,
-});
-
-export const styles =
-    getRegisteredMoleculesComponentStyles('HelperText') || helperTextStylesDefault;
+export const styles = getRegisteredComponentStylesWithFallback(
+    'HelperText',
+    helperTextStylesDefault,
+);

package/components/HorizontalDivider/HorizontalDivider.tsx

@@ -2,7 +2,7 @@ import { memo } from 'react';
 import { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 export type Props = Omit<ViewProps, 'children'> & {
     /**
@@ -95,7 +95,9 @@ export const horizontalDividerStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('HorizontalDivider', horizontalDividerStylesDefault);
-export const horizontalDividerStyles = getRegisteredMoleculesComponentStyles('HorizontalDivider');
+export const horizontalDividerStyles = getRegisteredComponentStylesWithFallback(
+    'HorizontalDivider',
+    horizontalDividerStylesDefault,
+);
 
 export default memo(HorizontalDivider);

package/components/HorizontalDivider/index.tsx

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

package/components/Icon/CrossFadeIcon.tsx

@@ -1,14 +1,12 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 
-import Icon, { styles as iconStyles } from './Icon';
+import Icon from './Icon';
 import type { IconProps } from './types';
 
 type Props = IconProps;
 
 const CrossFadeIcon = ({ color, size, name, style, ...rest }: Omit<Props, 'ref'>) => {
-    // const { animationScale: scale } = useComponentStyles('Icon', style);
-    const { animationScale: scale } = iconStyles.root;
     const [currentIcon, setCurrentIcon] = useState<string>(name);
     const [previousIcon, setPreviousIcon] = useState<string | null>(null);
     const { current: fade } = useRef<Animated.Value>(new Animated.Value(1));
@@ -25,12 +23,12 @@ const CrossFadeIcon = ({ color, size, name, style, ...rest }: Omit<Props, 'ref'>
             fade.setValue(1);
 
             Animated.timing(fade, {
-                duration: scale * 200,
+                duration: 200,
                 toValue: 0,
                 useNativeDriver: true,
             }).start();
         }
-    }, [currentIcon, previousIcon, fade, scale]);
+    }, [currentIcon, previousIcon, fade]);
 
     const opacityPrev = fade;
     const opacityNext = previousIcon

package/components/Icon/Icon.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, memo, useMemo } from 'react';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { tokenStylesParser } from '../../utils/tokenStylesParser';
 import iconFactory from './iconFactory';
 import type { IconProps } from './types';
@@ -25,8 +25,6 @@ export const iconStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('Icon', iconStylesDefault);
-
-export const styles = getRegisteredMoleculesComponentStyles('Icon');
+export const styles = getRegisteredComponentStylesWithFallback('Icon', iconStylesDefault);
 
 export default memo(forwardRef(Icon));

package/components/Icon/iconFactory.tsx

@@ -1,6 +1,6 @@
 // import { textFactory } from '../Text/textFactory';
 import { memoize } from '../../utils/lodash';
-import { IconPacks, type IconType } from './types';
+import type { IconType } from './types';
 
 const customIcons: any = {};
 
@@ -10,9 +10,9 @@ export const registerCustomIconType = (id: string, customIcon: any) => {
 
 export default memoize((type: IconType) => {
     switch (type) {
-        case IconPacks.MaterialCommunity:
+        case 'material-community':
             return require('@react-native-vector-icons/material-design-icons').default;
-        case IconPacks.Feather:
+        case 'feather':
             return require('@react-native-vector-icons/feather').default;
         default:
             if (Object.prototype.hasOwnProperty.call(customIcons, type)) {

package/components/Icon/index.tsx

@@ -1,11 +1,7 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import IconDefault from './Icon';
 
-registerMoleculesComponents({
-    Icon: IconDefault,
-});
-
 export const Icon = getRegisteredComponentWithFallback('Icon', IconDefault);
 
 export { registerCustomIconType } from './iconFactory';
-export type { IconPacks, IconProps, IconType } from './types';
+export type { CustomIconTypes, IconProps, IconType } from './types';

package/components/Icon/types.ts

@@ -1,10 +1,5 @@
 import type { ColorValue, TextProps } from 'react-native';
 
-export enum IconPacks {
-    MaterialCommunity = 'material-community',
-    Feather = 'feather',
-}
-
 export interface VectorIconProps extends TextProps {
     /**
      * Size of the icon, can also be passed as fontSize in the style object.
@@ -28,7 +23,23 @@ export interface VectorIconProps extends TextProps {
     color?: ColorValue | number | undefined;
 }
 
-export type IconType = `${IconPacks}`; // in TS 4.1+, we can do this to make enum values as a union type
+/**
+ * Interface for registering custom icon types.
+ * Users can extend this interface via declaration merging to add their own icon types.
+ *
+ * @example
+ * // In your app's type declarations (e.g., global.d.ts or a dedicated types file)
+ * declare module 'react-native-molecules' {
+ *   interface CustomIconTypes {
+ *     'my-custom-icons': true;
+ *     'another-icon-set': true;
+ *   }
+ * }
+ */
+
+export interface CustomIconTypes {}
+
+export type IconType = 'material-community' | 'feather' | keyof CustomIconTypes;
 
 export type IconProps = VectorIconProps & {
     type?: IconType;

package/components/IconButton/IconButton.tsx

@@ -5,15 +5,13 @@ import {
     type StyleProp,
     type TextStyle,
     type ViewProps,
-    type ViewStyle,
 } from 'react-native';
 
 import { useActionState } from '../../hooks/useActionState';
 import { resolveStateVariant } from '../../utils';
-import { Icon, type IconType } from '../Icon';
+import { Icon, type IconProps, type IconType } from '../Icon';
 import CrossFadeIcon from '../Icon/CrossFadeIcon';
 import { StateLayer } from '../StateLayer';
-import { Surface } from '../Surface';
 import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
 import type { IconButtonVariant } from './types';
 import { defaultStyles, iconButtonSizeToIconSizeMap } from './utils';
@@ -63,14 +61,11 @@ export type Props = Omit<TouchableRippleProps, 'children' | 'style'> & {
      */
     style?: StyleProp<TextStyle>;
     iconStyle?: StyleProp<TextStyle>;
+    iconProps?: Omit<IconProps, 'name' | 'type' | 'style' | 'color' | 'size'>;
     /**
      * color of the icon
      */
     color?: string;
-    /**
-     * Style of the innerContainer
-     */
-    innerContainerStyle?: ViewStyle;
     /**
      * Props for the state layer
      * */
@@ -92,10 +87,10 @@ const IconButton = (
         animated = false,
         variant = 'default',
         style,
-        innerContainerStyle: innerContainerStyleProp = emptyObject,
         testID,
         stateLayerProps = emptyObject,
-        iconStyle,
+        iconStyle: iconStyleProp,
+        iconProps,
         ...rest
     }: Props,
     ref: any,
@@ -113,7 +108,9 @@ const IconButton = (
     });
 
     defaultStyles.useVariants({
-        variant,
+        // @ts-ignore // TODO - fix this
+        variant: variant as any,
+        // @ts-ignore // TODO - fix this
         state,
         size: typeof size === 'string' && size ? size : undefined,
     });
@@ -124,9 +121,9 @@ const IconButton = (
         rippleColor,
         containerStyle,
         accessibilityState,
-        innerContainerStyle,
         // accessibilityTraits,
         stateLayerStyle,
+        iconStyle,
     } = useMemo(() => {
         const iconSizeInNum =
             iconButtonSizeToIconSizeMap[size as keyof typeof iconButtonSizeToIconSizeMap] ??
@@ -144,7 +141,6 @@ const IconButton = (
             iconColor: _iconColor,
             iconSize: iconSizeInNum,
             rippleColor: _rippleColor,
-            innerContainerStyle: [defaultStyles.innerContainer, innerContainerStyleProp],
             containerStyle: [
                 iconSizeInNum
                     ? {
@@ -155,60 +151,51 @@ const IconButton = (
                 defaultStyles.root,
                 style,
             ],
+            iconStyle: [defaultStyles.icon, iconStyleProp],
             // accessibilityTraits: disabled ? ['button', 'disabled'] : 'button',
             accessibilityState: { disabled },
             stateLayerStyle: [defaultStyles.stateLayer, stateLayerProps?.style],
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        _iconColor,
-        disabled,
-        innerContainerStyleProp,
-        size,
-        stateLayerProps?.style,
-        style,
-        state,
-        variant,
-    ]);
+    }, [_iconColor, disabled, size, stateLayerProps?.style, style, state, variant]);
 
     return (
-        <Surface style={containerStyle} elevation={0}>
-            <TouchableRipple
-                borderless
-                centered
-                onPress={onPress}
-                rippleColor={rippleColor}
-                accessibilityLabel={accessibilityLabel}
-                style={innerContainerStyle}
-                // accessibilityTraits={accessibilityTraits}
-                // accessibilityComponentType="button"
-                accessibilityRole="button"
-                accessibilityState={accessibilityState}
-                disabled={disabled}
-                hitSlop={
-                    // @ts-ignore
-                    TouchableRipple?.supported ? rippleSupportedHitSlop : rippleUnsupportedHitSlop
-                }
+        <TouchableRipple
+            borderless
+            centered
+            onPress={onPress}
+            rippleColor={rippleColor}
+            accessibilityLabel={accessibilityLabel}
+            style={containerStyle}
+            // accessibilityTraits={accessibilityTraits}
+            // accessibilityComponentType="button"
+            accessibilityRole="button"
+            accessibilityState={accessibilityState}
+            disabled={disabled}
+            hitSlop={
                 // @ts-ignore
-                ref={actionsRef}
-                testID={testID}
-                {...rest}>
-                <>
-                    <IconComponent
-                        color={iconColor}
-                        name={name}
-                        size={iconSize}
-                        type={type}
-                        style={iconStyle}
-                    />
-                    <StateLayer
-                        testID={testID ? `${testID}-stateLayer` : ''}
-                        {...stateLayerProps}
-                        style={stateLayerStyle}
-                    />
-                </>
-            </TouchableRipple>
-        </Surface>
+                TouchableRipple?.supported ? rippleSupportedHitSlop : rippleUnsupportedHitSlop
+            }
+            // @ts-ignore
+            ref={actionsRef}
+            testID={testID}
+            {...rest}>
+            <>
+                <IconComponent
+                    color={iconColor}
+                    name={name}
+                    size={iconSize}
+                    type={type}
+                    style={iconStyle}
+                    {...iconProps}
+                />
+                <StateLayer
+                    testID={testID ? `${testID}-stateLayer` : ''}
+                    {...stateLayerProps}
+                    style={stateLayerStyle}
+                />
+            </>
+        </TouchableRipple>
     );
 };
 

package/components/IconButton/index.tsx

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