react-native-molecules 0.5.0-beta.0

package/components/Avatar/Avatar.tsx

@@ -0,0 +1,189 @@
+import { forwardRef, memo, useCallback, useEffect, useMemo, useState } from 'react';
+import {
+    Image,
+    type ImageErrorEventData,
+    type ImageProps,
+    type NativeSyntheticEvent,
+    type TextProps,
+    View,
+    type ViewProps,
+} from 'react-native';
+
+import { tokenStylesParser } from '../../utils/tokenStylesParser';
+import { Icon, type IconProps } from '../Icon';
+import { Text } from '../Text';
+import { avatarStyles } from './utils';
+
+export type Props = Omit<ViewProps, 'children'> & {
+    source?: ImageProps['source'];
+    /**
+     * Will be used as fallback if source is nullish or image doesn't load
+     * */
+    iconName?: IconProps['name'];
+    iconType?: IconProps['type'];
+    iconProps?: Omit<IconProps, 'name' | 'type' | 'ref'>;
+    /**
+     * Will be used as fallback if link and iconName aren't passed
+     * */
+    label?: string;
+    labelProps?: Omit<TextProps, 'children'>;
+    imageProps?: Omit<ImageProps, 'source'>;
+    /**
+     * Color of the Avatar
+     * Will not be visible if there's an image unless the image has transparency
+     * Can be color string or token
+     * */
+    color?: string;
+    /**
+     * Size of the Avatar
+     * Can be a number of a token
+     * */
+    size?: number | string;
+};
+
+const Avatar = (
+    {
+        source,
+        label,
+        iconName,
+        iconType,
+        color,
+        style,
+        size = 32,
+        iconProps,
+        imageProps,
+        labelProps,
+        ...rest
+    }: Props,
+    ref: any,
+) => {
+    const { iconStyle, imageStyle, labelStyle } = useMemo(() => {
+        return {
+            imageStyle: [avatarStyles.image, imageProps?.style],
+            iconStyle: [avatarStyles.icon, iconProps?.style],
+            labelStyle: [avatarStyles.label, { fontSize: +size * 0.5 }, labelProps?.style],
+        };
+    }, [iconProps?.style, imageProps?.style, labelProps?.style, size]);
+
+    return (
+        <View
+            ref={ref}
+            {...rest}
+            style={[
+                avatarStyles.root,
+                tokenStylesParser.getColor(color as string, 'backgroundColor'),
+                style,
+                { width: +size, height: +size },
+            ]}>
+            <AvatarInner
+                source={source}
+                imageProps={imageProps}
+                iconProps={iconProps}
+                iconStyle={iconStyle}
+                size={+size}
+                iconName={iconName}
+                label={label}
+                labelProps={labelProps}
+                labelStyle={labelStyle}
+                iconType={iconType}
+                imageStyle={imageStyle}
+            />
+        </View>
+    );
+};
+
+type AvatarInnerProps = Pick<
+    Props,
+    'iconName' | 'iconType' | 'iconProps' | 'imageProps' | 'labelProps' | 'label' | 'source'
+> & {
+    imageStyle?: ImageProps['style'];
+    iconStyle?: IconProps['style'];
+    labelStyle?: TextProps['style'];
+    // at this point size will always be a number
+    size: number;
+};
+
+const emptyObj = {};
+
+const AvatarInner = memo(
+    ({
+        imageStyle,
+        source,
+        iconStyle,
+        labelStyle,
+        imageProps = emptyObj,
+        iconProps,
+        labelProps,
+        iconName,
+        iconType,
+        label: labelProp,
+        size,
+    }: AvatarInnerProps) => {
+        const [isImageFailed, setIsImageFailed] = useState(false);
+
+        const { onError } = imageProps;
+
+        const normalizeLabel = useMemo(() => {
+            const { firstWord, secondWord } = extractFirstAndSecondWordArrays(labelProp || '');
+
+            return `${firstWord.at(0) || ''}${secondWord.at(0) || firstWord.at(1) || ''}`;
+        }, [labelProp]);
+
+        const onImageLoadFailed = useCallback(
+            (e: NativeSyntheticEvent<ImageErrorEventData>) => {
+                onError?.(e);
+
+                setIsImageFailed(true);
+            },
+            [onError],
+        );
+
+        useEffect(() => {
+            setIsImageFailed(false);
+        }, [source]);
+
+        if (source && !isImageFailed) {
+            return (
+                <Image
+                    {...imageProps}
+                    onError={onImageLoadFailed}
+                    style={imageStyle}
+                    source={source}
+                />
+            );
+        }
+
+        if (iconName) {
+            return (
+                <Icon
+                    name={iconName}
+                    type={iconType}
+                    size={size * 0.66}
+                    {...iconProps}
+                    style={iconStyle}
+                />
+            );
+        }
+
+        return (
+            <Text {...labelProps} style={labelStyle}>
+                {normalizeLabel}
+            </Text>
+        );
+    },
+);
+
+// convert words into array of chars to handle words that contain surrogate pairs e.g. "👨‍👩‍👧‍👦", "🐶".
+const extractFirstAndSecondWordArrays = (text: string) => {
+    const [firstWord, secondWord = []] = text
+        .split(' ')
+        .splice(0, 2)
+        .map(word => Array.from(word ?? ''));
+
+    return {
+        firstWord,
+        secondWord,
+    };
+};
+
+export default memo(forwardRef(Avatar));

package/components/Avatar/index.tsx

@@ -0,0 +1,11 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import AvatarDefault from './Avatar';
+
+registerMoleculesComponents({
+    Avatar: AvatarDefault,
+});
+
+export const Avatar = getRegisteredComponentWithFallback('Avatar', AvatarDefault);
+
+export type { Props as AvatarProps } from './Avatar';
+export { avatarStyles } from './utils';

package/components/Avatar/utils.ts

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const avatarStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        backgroundColor: theme.colors.primary,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 10,
+        overflow: 'hidden',
+    },
+
+    image: {
+        width: '100%',
+        height: '100%',
+    },
+    icon: {
+        color: '#ffffff',
+        // color: theme.colors.onPrimary,
+    },
+    label: {
+        fontSize: theme.typescale.titleMedium.fontSize,
+        fontWeight: theme.typescale.titleMedium.fontWeight,
+        lineHeight: theme.typescale.titleMedium.lineHeight,
+        textTransform: 'uppercase',
+        color: '#ffffff',
+    },
+}));
+
+registerComponentsStyles({
+    Avatar: avatarStylesDefault,
+});
+
+export const avatarStyles = getRegisteredMoleculesComponentStyles('Avatar');

package/components/Backdrop/Backdrop.tsx

@@ -0,0 +1,18 @@
+import { memo } from 'react';
+import { Pressable } from 'react-native';
+
+import type { BackdropProps } from './types';
+import { backdropStyles } from './utils';
+
+const Backdrop = ({ style, ...rest }: BackdropProps) => {
+    return (
+        <Pressable
+            accessible={false}
+            importantForAccessibility="no"
+            {...rest}
+            style={[backdropStyles.root, style]}
+        />
+    );
+};
+
+export default memo(Backdrop);

package/components/Backdrop/index.tsx

@@ -0,0 +1,11 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import BackdropDefault from './Backdrop';
+
+registerMoleculesComponents({
+    Backdrop: BackdropDefault,
+});
+
+export const Backdrop = getRegisteredComponentWithFallback('Backdrop', BackdropDefault);
+
+export type { BackdropProps } from './types';
+export { backdropStyles } from './utils'; // to import in ThemeProvider

package/components/Backdrop/types.ts

@@ -0,0 +1,3 @@
+import type { PressableProps } from 'react-native';
+
+export type BackdropProps = PressableProps;

package/components/Backdrop/utils.ts

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const backdropStylesDefault = StyleSheet.create({
+    root: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: 'rgb(0, 0, 0)',
+        opacity: 0.3,
+    },
+});
+
+registerComponentsStyles({
+    Backdrop: backdropStylesDefault,
+});
+
+export const backdropStyles = getRegisteredMoleculesComponentStyles('Backdrop');

package/components/Badge/Badge.tsx

@@ -0,0 +1,29 @@
+import { memo } from 'react';
+import { type TextProps, View, type ViewProps } from 'react-native';
+
+import { Text } from '../Text';
+import { badgeStyles } from './utils';
+
+export type Props = Omit<ViewProps, 'children'> & {
+    label?: string | number;
+    size?: 'sm' | 'md';
+    labelProps?: Omit<TextProps, 'children'>;
+};
+
+const Badge = ({ style, label, size = 'md', labelProps = {}, ...rest }: Props) => {
+    badgeStyles.useVariants({
+        size: !label ? 'sm' : size,
+    });
+
+    return (
+        <View style={[badgeStyles.root, style]} {...rest}>
+            {label && size !== 'sm' && (
+                <Text {...labelProps} style={[badgeStyles.label, labelProps?.style]}>
+                    {label}
+                </Text>
+            )}
+        </View>
+    );
+};
+
+export default memo(Badge);

package/components/Badge/index.tsx

@@ -0,0 +1,11 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import BadgeDefault from './Badge';
+
+registerMoleculesComponents({
+    Badge: BadgeDefault,
+});
+
+export const Badge = getRegisteredComponentWithFallback('Badge', BadgeDefault);
+
+export type { Props as BadgeProps } from './Badge';
+export { badgeStyles } from './utils';

package/components/Badge/utils.ts

@@ -0,0 +1,38 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const badgeStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        backgroundColor: theme.colors.error,
+        borderRadius: theme.shapes.corner.full,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: theme.spacings['1'],
+
+        variants: {
+            size: {
+                sm: {
+                    width: 6,
+                    height: 6,
+                    paddingHorizontal: theme.spacings['0'],
+                },
+                md: {
+                    minWidth: 16,
+                    minHeight: 16,
+                },
+            },
+        },
+    },
+
+    label: {
+        color: theme.colors.onError,
+        ...theme.typescale.labelSmall,
+    },
+}));
+
+registerComponentsStyles({
+    Badge: badgeStylesDefault,
+});
+
+export const badgeStyles = getRegisteredMoleculesComponentStyles('Badge');