react-native-molecules 0.5.0-beta.0

package/components/FilePicker/FilePicker.tsx

@@ -0,0 +1,133 @@
+import { forwardRef, memo, type ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+
+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';
+
+export type OmitProp =
+    | 'editable'
+    | 'multiline'
+    | 'onChangeText'
+    | 'keyboardType'
+    | 'defaultValue'
+    | 'value'
+    | 'left'
+    | 'right';
+
+export type Props = Omit<TextInputProps, OmitProp> &
+    DocumentPickerOptions & {
+        /**
+         * Allows multiple files to be selected from the system UI.
+         * @default false
+         */
+        multiple?: boolean;
+        /**
+         * Displays the Spinner on the right side in place of the default upload icon
+         * @default false
+         */
+        loading?: boolean;
+        left?: ReactNode;
+        right?: ReactNode;
+        /**
+         * To Control the value
+         */
+        value?: DocumentResult | DocumentResult[];
+        /**
+         * 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;
+    };
+
+const FilePicker = (
+    {
+        loading,
+        right: rightProp,
+        progressIndicator,
+        type,
+        multiple,
+        transitionStyle,
+        mode,
+        presentationStyle,
+        value,
+        onChange = () => {},
+        onCancel,
+        onError,
+        ...rest
+    }: Props,
+    ref: any,
+) => {
+    const [displayText, setDisplayText] = useState('');
+
+    const { openFilePicker } = useFilePicker({
+        type,
+        mode,
+        multiple,
+        transitionStyle,
+        presentationStyle,
+        onCancel,
+        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;
+                }
+
+                setDisplayText(response[0].name || '');
+                return;
+            }
+
+            setDisplayText(response?.name || '');
+        },
+        [],
+    );
+
+    const onPress = useCallback(() => {
+        openFilePicker(response => {
+            onSetInputValue(response);
+
+            onChange?.(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]);
+
+    return (
+        <TextInput
+            label="Choose file"
+            {...rest}
+            value={displayText}
+            editable={false}
+            right={rightElement}
+            ref={ref}
+        />
+    );
+};
+
+export default memo(forwardRef(FilePicker));

package/components/FilePicker/index.tsx

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

package/components/FilePicker/utils.ts

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

package/components/HelperText/HelperText.tsx

@@ -0,0 +1,139 @@
+import { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { LayoutChangeEvent, StyleProp, TextProps, TextStyle } from 'react-native';
+import { Animated } from 'react-native';
+
+import { styles } from './utils';
+
+export type Props = TextProps & {
+    /**
+     * Type of the helper text.
+     */
+    variant?: 'error' | 'info';
+    /**
+     * Whether to display the helper text.
+     */
+    visible?: boolean;
+    /**
+     * Text content of the HelperText.
+     */
+    children: ReactNode;
+    style?: StyleProp<TextStyle>;
+    /**
+     * TestID used for testing purposes
+     */
+    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',
+    visible = true,
+    onLayout,
+    maxFontSizeMultiplier = 1.5,
+    ...rest
+}: Props) => {
+    styles.useVariants({
+        variant,
+    });
+    const { current: shown } = useRef<Animated.Value>(new Animated.Value(visible ? 1 : 0));
+
+    const [textHeight, setTextHeight] = useState(0);
+
+    const { textStyle } = useMemo(() => {
+        // @ts-ignore
+
+        return {
+            textStyle: [
+                styles.root,
+                {
+                    opacity: shown,
+                    transform:
+                        visible && variant === 'error'
+                            ? [
+                                  {
+                                      translateY: shown.interpolate({
+                                          inputRange: [0, 1],
+                                          outputRange: [-textHeight / 2, 0],
+                                      }),
+                                  },
+                              ]
+                            : [],
+                },
+                styleProp,
+            ],
+        };
+    }, [shown, styleProp, textHeight, variant, visible]);
+
+    useEffect(() => {
+        if (visible) {
+            // show text
+            Animated.timing(shown, {
+                toValue: 1,
+                duration: 150,
+                useNativeDriver: true,
+            }).start();
+        } else {
+            // hide text
+            Animated.timing(shown, {
+                toValue: 0,
+                duration: 180,
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [visible, shown]);
+
+    const handleTextLayout = useCallback(
+        (e: LayoutChangeEvent) => {
+            onLayout?.(e);
+            setTextHeight(e.nativeEvent.layout.height);
+        },
+        [onLayout],
+    );
+
+    return (
+        <Animated.Text
+            onLayout={handleTextLayout}
+            style={textStyle}
+            maxFontSizeMultiplier={maxFontSizeMultiplier}
+            {...rest}>
+            {rest.children}
+        </Animated.Text>
+    );
+};
+
+export default memo(HelperText);

package/components/HelperText/index.tsx

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

package/components/HelperText/utils.ts

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+export const helperTextStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        fontSize: theme.typescale.bodySmall.fontSize,
+        paddingVertical: theme.spacings['1'],
+        paddingHorizontal: theme.spacings['4'],
+
+        variants: {
+            variant: {
+                error: {
+                    color: theme.colors.error,
+                },
+                info: {
+                    color: theme.colors.onSurfaceVariant,
+                },
+            },
+        },
+    },
+}));
+
+registerComponentsStyles({
+    HelperText: helperTextStylesDefault,
+});
+
+export const styles =
+    getRegisteredMoleculesComponentStyles('HelperText') || helperTextStylesDefault;

package/components/HorizontalDivider/HorizontalDivider.tsx

@@ -0,0 +1,101 @@
+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';
+
+export type Props = Omit<ViewProps, 'children'> & {
+    /**
+     * left inset of the divider.
+     */
+    leftInset?: number;
+    /**
+     * right inset of the divider.
+     */
+    rightInset?: number;
+    /**
+     *  Whether divider should be bolded.
+     */
+    bold?: boolean;
+    /**
+     *  Vertical spacing of the Divider
+     */
+    spacing?: number;
+    style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * A divider is a thin, lightweight separator that groups content in lists and page layouts.
+ *
+ * <div class="screenshots">
+ *  <figure>
+ *    <img class="medium" src="screenshots/divider.png" />
+ *  </figure>
+ * </div>
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { View } from 'react-native';
+ * import { Divider, Text } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <View>
+ *     <Text>Lemon</Text>
+ *     <Divider />
+ *     <Text>Mango</Text>
+ *     <Divider />
+ *   </View>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+
+const HorizontalDivider = ({
+    leftInset = 0,
+    rightInset = 0,
+    style,
+    bold = false,
+    spacing = 0,
+    ...rest
+}: Props) => {
+    horizontalDividerStyles.useVariants({
+        isBold: bold,
+    });
+
+    return (
+        <View
+            {...rest}
+            style={
+                [
+                    horizontalDividerStyles.root,
+                    leftInset && { marginLeft: leftInset },
+                    rightInset && { marginRight: rightInset },
+                    spacing && { marginVertical: spacing },
+                    style,
+                ] as StyleProp<ViewStyle>
+            }
+        />
+    );
+};
+
+export const horizontalDividerStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        height: StyleSheet.hairlineWidth,
+        background: theme.colors.outlineVariant,
+
+        variants: {
+            isBold: {
+                true: {
+                    height: 1,
+                },
+            },
+        },
+    },
+}));
+
+registerComponentStyles('HorizontalDivider', horizontalDividerStylesDefault);
+export const horizontalDividerStyles = getRegisteredMoleculesComponentStyles('HorizontalDivider');
+
+export default memo(HorizontalDivider);

package/components/HorizontalDivider/index.tsx

@@ -0,0 +1,13 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import HorizontalDividerDefault from './HorizontalDivider';
+
+registerMoleculesComponents({
+    HorizontalDivider: HorizontalDividerDefault,
+});
+
+export const HorizontalDivider = getRegisteredComponentWithFallback(
+    'HorizontalDivider',
+    HorizontalDividerDefault,
+);
+
+export { type Props as HorizontalDividerProps, horizontalDividerStyles } from './HorizontalDivider';

package/components/Icon/CrossFadeIcon.tsx

@@ -0,0 +1,116 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+
+import Icon, { styles as iconStyles } 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));
+
+    useEffect(() => {
+        if (currentIcon !== name) {
+            setPreviousIcon(() => currentIcon);
+            setCurrentIcon(() => name);
+        }
+    }, [currentIcon, name]);
+
+    useEffect(() => {
+        if (previousIcon && previousIcon !== currentIcon) {
+            fade.setValue(1);
+
+            Animated.timing(fade, {
+                duration: scale * 200,
+                toValue: 0,
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [currentIcon, previousIcon, fade, scale]);
+
+    const opacityPrev = fade;
+    const opacityNext = previousIcon
+        ? fade.interpolate({
+              inputRange: [0, 1],
+              outputRange: [1, 0],
+          })
+        : 1;
+
+    const rotatePrev = fade.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['-90deg', '0deg'],
+    });
+
+    const rotateNext = previousIcon
+        ? fade.interpolate({
+              inputRange: [0, 1],
+              outputRange: ['0deg', '-180deg'],
+          })
+        : '0deg';
+
+    const containerStyles = useMemo(
+        () => [
+            styles.content,
+            style,
+            {
+                height: size,
+                width: size,
+            },
+        ],
+        [size, style],
+    );
+
+    const prevIconStyles = useMemo(
+        () => [
+            styles.icon,
+            {
+                opacity: opacityPrev,
+                transform: [{ rotate: rotatePrev }],
+            },
+        ],
+        [opacityPrev, rotatePrev],
+    );
+    const nextIconStyles = useMemo(
+        () => [
+            styles.icon,
+            {
+                opacity: opacityNext,
+                transform: [{ rotate: rotateNext }],
+            },
+        ],
+        [opacityNext, rotateNext],
+    );
+
+    return (
+        <View style={containerStyles}>
+            {previousIcon ? (
+                <Animated.View style={prevIconStyles}>
+                    <Icon name={previousIcon} size={size} color={color} {...rest} />
+                </Animated.View>
+            ) : null}
+            <Animated.View style={nextIconStyles}>
+                <Icon name={currentIcon} size={size} color={color} />
+            </Animated.View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    content: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    icon: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    },
+});
+
+export default CrossFadeIcon;

package/components/Icon/Icon.tsx

@@ -0,0 +1,41 @@
+import { forwardRef, memo, useMemo } from 'react';
+import { StyleSheet } from 'react-native-unistyles';
+import type { Mappings } from 'react-native-unistyles/lib/typescript/src/core/withUnistyles/types';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { tokenStylesParser } from '../../utils/tokenStylesParser';
+import iconFactory from './iconFactory';
+import type { IconProps } from './types';
+
+/**
+ * Neutral component. Doesn't have platform specific styles
+ */
+const Icon = (
+    {
+        type = 'material-community',
+        style,
+        color,
+        ...rest
+    }: IconProps & { uniProps?: Mappings<any> },
+    ref: any,
+) => {
+    const IconComponent = iconFactory(type);
+    const componentStyles = useMemo(
+        () => [styles.root, style, tokenStylesParser.getColor(color as string)],
+        [style, color],
+    );
+
+    return <IconComponent ref={ref} style={componentStyles} {...rest} />;
+};
+
+export const iconStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        color: theme.colors.onSurface,
+    },
+}));
+
+registerComponentStyles('Icon', iconStylesDefault);
+
+export const styles = getRegisteredMoleculesComponentStyles('Icon');
+
+export default memo(forwardRef(Icon));

package/components/Icon/iconFactory.tsx

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

package/components/Icon/index.tsx

@@ -0,0 +1,11 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } 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';

package/components/Icon/types.ts

@@ -0,0 +1,35 @@
+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.
+     *
+     * @default 12
+     */
+    size?: number | undefined;
+
+    /**
+     * Name of the icon to show
+     *
+     * See Icon Explorer app
+     * {@link https://github.com/oblador/react-native-vector-icons/tree/master/Examples/IconExplorer}
+     */
+    name: string;
+
+    /**
+     * Color of the icon
+     *
+     */
+    color?: ColorValue | number | undefined;
+}
+
+export type IconType = `${IconPacks}`; // in TS 4.1+, we can do this to make enum values as a union type
+
+export type IconProps = VectorIconProps & {
+    type?: IconType;
+};