react-native-molecules 0.5.0-beta.0

package/components/Tabs/utils.ts

@@ -0,0 +1,126 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const tabsStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        activeColor: theme.colors.primary,
+    } as any,
+
+    itemsContainer: {
+        flexDirection: 'row',
+        position: 'relative',
+        flex: 1,
+    },
+
+    indicator: {
+        position: 'absolute',
+        bottom: 0,
+
+        variants: {
+            variant: {
+                primary: {
+                    height: 3,
+                    borderTopLeftRadius: 3,
+                    borderTopRightRadius: 3,
+                },
+                secondary: {
+                    height: 2,
+                },
+            },
+        },
+    },
+
+    divider: {},
+}));
+
+const tabsItemStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        ...({ activeColor: theme.colors.primary } as any),
+
+        flex: 1,
+        paddingVertical: theme.spacings['2'],
+        paddingHorizontal: theme.spacings['4'],
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+
+    contentsContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    stateLayer: {
+        variants: {
+            variant: {
+                primary: {},
+                secondary: {},
+            },
+            state: {
+                hovered: {},
+                active: {},
+                activeAndHovered: {},
+                default: {},
+            },
+        },
+        compoundVariants: [
+            {
+                variant: 'primary',
+                state: 'hovered',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+            },
+            {
+                variant: 'primary',
+                state: 'hovered',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+            },
+            {
+                variant: 'primary',
+                state: 'activeAndHovered',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.hover.primary,
+                },
+            },
+            {
+                variant: 'secondary',
+                state: 'hovered',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+            },
+            {
+                variant: 'secondary',
+                state: 'activeAndHovered',
+                styles: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+            },
+        ],
+    },
+}));
+
+const tabsLabelStylesDefault = StyleSheet.create(theme => ({
+    label: {
+        ...theme.typescale.titleSmall,
+        color: theme.colors.onSurface,
+    },
+
+    icon: {
+        color: theme.colors.onSurfaceVariant,
+    },
+}));
+
+registerComponentsStyles({
+    Tabs: tabsStylesDefault,
+    Tabs_Item: tabsItemStylesDefault,
+    Tabs_Label: tabsLabelStylesDefault,
+});
+
+export const tabsStyles = getRegisteredMoleculesComponentStyles('Tabs');
+export const tabsItemStyles = getRegisteredMoleculesComponentStyles('Tabs_Item');
+export const tabsLabelStyles = getRegisteredMoleculesComponentStyles('Tabs_Label');
+
+export type States = 'hovered' | 'active' | 'activeAndHovered' | 'disabled';

package/components/Text/Text.tsx

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import {
+    getRegisteredComponentWithFallback,
+    getRegisteredMoleculesComponentStyles,
+    registerComponentStyles,
+    registerMoleculesComponent,
+} from '../../core';
+import { textFactory } from './textFactory';
+
+const defaultStyles = StyleSheet.create(theme => ({
+    root: { color: theme.colors.onSurface, ...theme.typescale.bodyMedium },
+}));
+
+registerComponentStyles('Text', defaultStyles);
+
+const TextDefault = textFactory(
+    (getRegisteredMoleculesComponentStyles('Text') as any) ?? defaultStyles,
+);
+
+registerMoleculesComponent('Text', TextDefault);
+
+export default getRegisteredComponentWithFallback('Text', TextDefault);

package/components/Text/index.tsx

@@ -0,0 +1,2 @@
+export { default as Text } from './Text';
+export { textFactory } from './textFactory';

package/components/Text/textFactory.tsx

@@ -0,0 +1,33 @@
+import { type ComponentType, createContext, forwardRef, memo, useContext } from 'react';
+import { Text, type TextProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+const HasAncestorContext = createContext(false);
+
+const defaultStyles = StyleSheet.create(theme => ({
+    root: { color: theme.colors.onSurface, ...theme.typescale.bodyMedium },
+}));
+
+export const textFactory = (
+    componentStyles: typeof defaultStyles = defaultStyles,
+    isBlockLevelElement = false,
+    DefaultComponent: ComponentType<any> = Text,
+) => {
+    return memo(
+        forwardRef((props: TextProps, ref: any) => {
+            const { style, ...rest } = props;
+            const hasAncestorText = useContext(HasAncestorContext);
+
+            const styles =
+                hasAncestorText && !isBlockLevelElement ? style : [componentStyles?.root, style];
+
+            return hasAncestorText ? (
+                <DefaultComponent ref={ref} style={styles} {...rest} />
+            ) : (
+                <HasAncestorContext.Provider value={true}>
+                    <DefaultComponent ref={ref} style={styles} {...rest} />
+                </HasAncestorContext.Provider>
+            );
+        }),
+    );
+};

package/components/TextInput/InputLabel.tsx

@@ -0,0 +1,181 @@
+import { memo, useCallback, useMemo, useState } from 'react';
+import { Animated, type LayoutChangeEvent } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import type { InputLabelProps } from './types';
+
+const InputLabel = (props: InputLabelProps) => {
+    const {
+        labelAnimation,
+        errorAnimation,
+        hasValue,
+        focused,
+        labelLayout,
+        style,
+        label,
+        floatingLabelVerticalOffset,
+        error,
+        onLayoutAnimatedText,
+        baseLabelTranslateX,
+        wiggleOffsetX,
+        labelScale,
+        paddingOffset,
+        labelTranslationXOffset,
+        maxFontSizeMultiplier,
+        required,
+        testID,
+        floatingStyle,
+    } = props;
+
+    const [containerLayout, setContainerLayout] = useState<{
+        measured: boolean;
+        width: number;
+        height: number;
+    }>({
+        measured: false,
+        width: 0,
+        height: 0,
+    });
+
+    const handleLayoutContainer = useCallback((e: LayoutChangeEvent) => {
+        setContainerLayout({
+            width: e.nativeEvent.layout.width,
+            height: e.nativeEvent.layout.height,
+            measured: true,
+        });
+    }, []);
+
+    const { containerStyle, minimizedLabelStyle, normalLabelStyle } = useMemo(() => {
+        const isLabelFloating = hasValue || focused;
+
+        const labelStyle = {
+            transform: [
+                {
+                    // Wiggle the label when there's an error
+                    translateX: errorAnimation.interpolate({
+                        inputRange: [0, 0.5, 1],
+                        outputRange: [0, hasValue && error ? wiggleOffsetX : 0, 0],
+                    }),
+                },
+                {
+                    // Move label to top
+                    translateY: labelAnimation.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [
+                            (floatingLabelVerticalOffset || 0) - containerLayout.height / 2,
+                            0,
+                        ],
+                    }),
+                },
+                {
+                    // Make label smaller
+                    scale: labelAnimation.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [labelScale, 1],
+                    }),
+                },
+            ],
+        };
+        const labelTranslationX = {
+            transform: [
+                {
+                    // Offset label scale since RN doesn't support transform origin
+                    translateX: labelAnimation.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [baseLabelTranslateX, labelTranslationXOffset || 0],
+                    }),
+                },
+            ],
+        };
+
+        return {
+            containerStyle: [
+                StyleSheet.absoluteFill,
+                {
+                    zIndex: 3,
+                    justifyContent: 'center' as const,
+                },
+                {
+                    opacity:
+                        // Hide the label in minimized state until we measure it's width
+                        !isLabelFloating || labelLayout.measured ? 1 : 0,
+                },
+                labelTranslationX,
+            ],
+            minimizedLabelStyle: [
+                // {
+                //     color: theme.colors.onSurface,
+                // },
+                labelStyle,
+                paddingOffset || {},
+                {
+                    opacity: labelAnimation.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [isLabelFloating ? 1 : 0, 0],
+                    }),
+                },
+                style,
+                isLabelFloating ? floatingStyle : {},
+            ],
+            normalLabelStyle: [
+                // {
+                //     color: theme.colors.onSurface,
+                // },
+                labelStyle,
+                paddingOffset || {},
+                {
+                    opacity: isLabelFloating ? 0 : 1,
+                },
+                style,
+            ],
+        };
+    }, [
+        hasValue,
+        focused,
+        errorAnimation,
+        error,
+        wiggleOffsetX,
+        labelAnimation,
+        floatingLabelVerticalOffset,
+        containerLayout.height,
+        labelScale,
+        baseLabelTranslateX,
+        labelTranslationXOffset,
+        labelLayout.measured,
+        paddingOffset,
+        style,
+        floatingStyle,
+    ]);
+
+    // Position colored placeholder and gray placeholder on top of each other and crossfade them
+    // This gives the effect of animating the color, but allows us to use native driver
+    return (
+        <>
+            {label && (
+                <Animated.View
+                    pointerEvents="none"
+                    style={containerStyle}
+                    onLayout={handleLayoutContainer}>
+                    <Animated.Text
+                        onLayout={onLayoutAnimatedText}
+                        style={minimizedLabelStyle}
+                        numberOfLines={1}
+                        maxFontSizeMultiplier={maxFontSizeMultiplier}
+                        testID={`${testID}-label-active`}>
+                        {label}
+                    </Animated.Text>
+                    <Animated.Text
+                        // variant={parentState.focused ? 'bodyLarge' : 'bodySmall'}
+                        style={normalLabelStyle}
+                        numberOfLines={1}
+                        maxFontSizeMultiplier={maxFontSizeMultiplier}
+                        testID={`${testID}-label-inactive`}>
+                        {typeof label === 'string' ? `${label}${required ? '*' : ''}` : label}
+                    </Animated.Text>
+                </Animated.View>
+            )}
+        </>
+    );
+};
+
+export default memo(InputLabel);