react-native-molecules 0.5.0-beta.0

package/components/Button/utils.ts

@@ -0,0 +1,416 @@
+import { Platform } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+export const sizeToIconSizeMap = {
+    xs: 18,
+    sm: 22,
+    md: 24,
+    lg: 26,
+};
+
+const defaultStylesDefault = StyleSheet.create(theme => {
+    return {
+        root: {
+            flexGrow: 1,
+
+            variants: {
+                size: {
+                    sm: {
+                        minWidth: 64,
+                        borderRadius: theme.shapes.corner.full,
+                    },
+                    md: {
+                        minWidth: 64,
+                        borderRadius: theme.shapes.corner.full,
+                    },
+                    lg: {
+                        minWidth: 64,
+                        borderRadius: theme.shapes.corner.full,
+                    },
+                },
+
+                state: {
+                    disabled: {
+                        color: theme.colors.onSurfaceDisabled,
+                    },
+                    hovered: {},
+                    default: {},
+                },
+                variant: {
+                    outlined: {
+                        backgroundColor: 'transparent',
+                        color: theme.colors.primary,
+                        borderColor: theme.colors.outline,
+                        borderWidth: 1,
+                        // elevationLevel: theme.elevations.level0,
+                    },
+                    text: {
+                        backgroundColor: 'transparent',
+                        color: theme.colors.primary,
+                        // elevationLevel: theme.elevations.level0,
+                    },
+                    contained: {
+                        backgroundColor: theme.colors.primary,
+                        color: theme.colors.onPrimary,
+                        // elevationLevel: theme.elevations.level0,
+                    },
+                    elevated: {
+                        backgroundColor: theme.colors.elevation.level1,
+                        color: theme.colors.primary,
+                        // elevationLevel: theme.elevations.level1,
+                    },
+                    'contained-tonal': {
+                        backgroundColor: theme.colors.secondaryContainer,
+                        color: theme.colors.onSecondaryContainer,
+                        // elevationLevel: theme.elevations.level0,
+                    },
+                },
+            },
+            compoundVariants: [
+                {
+                    variant: 'outlined',
+                    state: 'disabled',
+                    styles: {
+                        borderColor: theme.colors.stateLayer.disabled.onSurface,
+                    },
+                },
+                {
+                    variant: 'outlined',
+                    state: 'hovered',
+                    styles: {
+                        backgroundColor: theme.colors.stateLayer.hover.primary,
+                    },
+                },
+                {
+                    variant: 'text',
+                    state: 'disabled',
+                    styles: {},
+                },
+                {
+                    variant: 'contained',
+                    state: 'disabled',
+                    styles: {
+                        backgroundColor: theme.colors.stateLayer.disabled.onSurface,
+                    },
+                },
+                {
+                    variant: 'contained',
+                    state: 'hovered',
+                    styles: {
+                        // elevationLevel: theme.elevations.level1,
+                    },
+                },
+                {
+                    variant: 'elevated',
+                    state: 'disabled',
+                    styles: {
+                        backgroundColor: theme.colors.stateLayer.disabled.onSurface,
+                    },
+                },
+                {
+                    variant: 'elevated',
+                    state: 'hovered',
+                    styles: {
+                        // elevationLevel: theme.elevations.level2,
+                    },
+                },
+                {
+                    variant: 'contained-tonal',
+                    state: 'disabled',
+                    styles: {
+                        backgroundColor: theme.colors.stateLayer.disabled.onSurface,
+                    },
+                },
+                {
+                    variant: 'contained-tonal',
+                    state: 'hovered',
+                    styles: {
+                        // elevationLevel: theme.elevations.level1,
+                    },
+                },
+            ],
+        },
+        stateLayer: {
+            variants: {
+                variant: {
+                    text: {},
+                    contained: {},
+                    elevated: {},
+                    'contained-tonal': {},
+                    outlined: {},
+                },
+                size: {
+                    lg: {},
+                },
+                state: {
+                    hovered: {},
+                    disabled: {},
+                    default: {},
+                },
+            },
+            compoundVariants: [
+                {
+                    variant: 'text',
+                    state: 'hovered',
+                    styles: {
+                        backgroundColor: theme.colors.stateLayer.hover.primary,
+                    },
+                },
+                {
+                    variant: 'contained',
+                    state: 'hovered',
+                    styles: {
+                        backgroundColor: theme.colors.stateLayer.hover.onPrimary,
+                    },
+                },
+                {
+                    variant: 'elevated',
+                    state: 'hovered',
+                    styles: {
+                        backgroundColor: theme.colors.stateLayer.hover.primary,
+                    },
+                },
+                {
+                    variant: 'outlined',
+                    state: 'hovered',
+                    styles: {},
+                },
+                {
+                    variant: 'contained-tonal',
+                    state: 'hovered',
+                    styles: {
+                        backgroundColor: theme.colors.stateLayer.hover.onSecondaryContainer,
+                    },
+                },
+            ],
+        },
+
+        button: {
+            borderStyle: 'solid',
+        },
+        content: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexGrow: 1,
+        },
+        iconContainer: {
+            ...(Platform.OS !== 'web'
+                ? { marginLeft: theme.spacings['4'], marginRight: theme.spacings._4 }
+                : {}),
+        },
+        icon: {
+            ...(Platform.OS === 'web'
+                ? { marginLeft: theme.spacings['4'], marginRight: theme.spacings._4 }
+                : {}),
+            variants: {
+                state: {
+                    disabled: {
+                        color: theme.colors.onSurfaceDisabled,
+                    },
+                    hovered: {},
+                    default: {},
+                },
+                variant: {
+                    outlined: {
+                        color: theme.colors.primary,
+                    },
+                    text: {
+                        color: theme.colors.primary,
+                    },
+                    contained: {
+                        color: theme.colors.onPrimary,
+                    },
+                    elevated: {
+                        color: theme.colors.primary,
+                    },
+                    'contained-tonal': {
+                        color: theme.colors.onSecondaryContainer,
+                    },
+                },
+            },
+        },
+        iconTextMode: {
+            marginLeft: theme.spacings['3'],
+            marginRight: theme.spacings._2,
+        },
+        label: {
+            display: 'flex',
+            alignItems: 'center',
+            textAlign: 'center',
+            marginVertical: theme.spacings['2l'],
+            marginHorizontal: theme.spacings['6'],
+            ...theme.typescale.labelLarge,
+
+            variants: {
+                size: {
+                    sm: {
+                        ...theme.typescale.labelMedium,
+                    },
+                    md: {
+                        ...theme.typescale.labelLarge,
+                    },
+                    lg: {
+                        ...theme.typescale.labelLarge,
+                        fontSize: theme.typescale.bodyLarge.fontSize,
+                    },
+                },
+                variant: {
+                    outlined: {
+                        color: theme.colors.primary,
+                    },
+                    text: {
+                        color: theme.colors.primary,
+                    },
+                    contained: {
+                        color: theme.colors.onPrimary,
+                    },
+                    elevated: {
+                        color: theme.colors.primary,
+                    },
+                    'contained-tonal': {
+                        color: theme.colors.onSecondaryContainer,
+                    },
+                },
+                state: {
+                    disabled: {
+                        color: theme.colors.onSurfaceDisabled,
+                    },
+                    hovered: {},
+                    default: {},
+                },
+            },
+
+            compoundVariants: [
+                {
+                    variant: 'outlined',
+                    state: 'disabled',
+                    styles: {
+                        color: theme.colors.stateLayer.disabled.onSurface_Level4,
+                    },
+                },
+
+                {
+                    variant: 'text',
+                    state: 'disabled',
+                    styles: {
+                        color: theme.colors.stateLayer.disabled.onSurface_Level4,
+                    },
+                },
+                {
+                    variant: 'contained',
+                    state: 'disabled',
+                    styles: {
+                        color: theme.colors.stateLayer.disabled.onSurface_Level4,
+                    },
+                },
+                {
+                    variant: 'elevated',
+                    state: 'disabled',
+                    styles: {
+                        color: theme.colors.stateLayer.disabled.onSurface_Level4,
+                    },
+                },
+
+                {
+                    variant: 'contained-tonal',
+                    state: 'disabled',
+                    styles: {
+                        color: theme.colors.stateLayer.disabled.onSurface_Level4,
+                    },
+                },
+            ],
+        },
+        labelText: {
+            marginVertical: theme.spacings['2l'],
+            marginHorizontal: theme.spacings['3'],
+            ...theme.typescale.labelLarge,
+
+            variants: {
+                variant: {
+                    text: {
+                        color: theme.colors.primary,
+                    },
+                },
+                state: {
+                    disabled: {
+                        color: theme.colors.onSurfaceDisabled,
+                    },
+                    hovered: {},
+                    default: {},
+                },
+                size: {
+                    sm: {
+                        ...theme.typescale.labelMedium,
+                    },
+                    md: {
+                        ...theme.typescale.labelLarge,
+                    },
+                    lg: {
+                        ...theme.typescale.labelLarge,
+                        fontSize: theme.typescale.bodyLarge.fontSize,
+                    },
+                },
+            },
+
+            compoundVariants: [
+                {
+                    variant: 'text',
+                    state: 'disabled',
+                    styles: {
+                        color: theme.colors.stateLayer.disabled.onSurface_Level4,
+                    },
+                },
+            ],
+        },
+        labelTextAddons: {
+            marginVertical: theme.spacings['2l'],
+            marginHorizontal: theme.spacings['4'],
+
+            variants: {
+                variant: {
+                    text: {
+                        color: theme.colors.primary,
+                    },
+                },
+                state: {
+                    disabled: {
+                        color: theme.colors.onSurfaceDisabled,
+                    },
+                    hovered: {},
+                    default: {},
+                },
+                size: {
+                    sm: {
+                        ...theme.typescale.labelMedium,
+                    },
+                    md: {
+                        ...theme.typescale.labelLarge,
+                    },
+                    lg: {
+                        ...theme.typescale.labelLarge,
+                        fontSize: theme.typescale.bodyLarge.fontSize,
+                    },
+                },
+            },
+
+            compoundVariants: [
+                {
+                    variant: 'text',
+                    state: 'disabled',
+                    styles: {
+                        color: theme.colors.stateLayer.disabled.onSurface_Level4,
+                    },
+                },
+            ],
+        },
+    };
+});
+
+registerComponentsStyles({
+    Button: defaultStylesDefault,
+});
+
+export const defaultStyles = getRegisteredMoleculesComponentStyles('Button');

package/components/Card/Card.tsx

@@ -0,0 +1,160 @@
+import { forwardRef, memo, useMemo } from 'react';
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { useActionState } from '../../hooks';
+import type { MD3Elevation } from '../../types/theme';
+import { resolveStateVariant } from '../../utils';
+import { Surface } from '../Surface';
+import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
+import type { CardVariant } from './types';
+
+export type Props = TouchableRippleProps & {
+    variant?: CardVariant;
+    touchableContainerStyle?: ViewStyle;
+    elevation?: MD3Elevation;
+    disableOnHoverElevation?: boolean;
+};
+
+const emptyObj = {};
+
+const Card = (
+    {
+        variant = 'elevated',
+        disabled,
+        style,
+        elevation: elevationProp = 0,
+        children,
+        touchableContainerStyle = emptyObj,
+        disableOnHoverElevation = false,
+        ...rest
+    }: Props,
+    ref: any,
+) => {
+    const { hovered, pressed } = useActionState({ ref, actionsToListen: ['hover', 'press'] });
+    const state = resolveStateVariant({
+        disabled: !!disabled,
+        pressed: !!pressed,
+        hovered: !!hovered,
+    });
+
+    cardStyles.useVariants({
+        variant,
+        state,
+    });
+
+    const elevationLevel = variant === 'elevated' ? (hovered ? 2 : 1) : hovered ? 1 : 0;
+
+    const styles = useMemo(() => {
+        return {
+            container: [cardStyles.container, cardStyles.root, style],
+            innerContainer: [cardStyles.innerContainer, touchableContainerStyle],
+        };
+        // eslint-disable-next-line
+    }, [variant, state, style, touchableContainerStyle]);
+
+    const elevation = elevationProp === undefined ? elevationLevel ?? 0 : elevationProp;
+
+    return (
+        <Surface
+            style={styles.container}
+            elevation={
+                variant === 'outlined'
+                    ? elevationProp
+                    : ((!(disableOnHoverElevation && hovered)
+                          ? (elevationProp || 0) + elevationLevel
+                          : elevation) as MD3Elevation)
+            }>
+            <TouchableRipple style={styles.innerContainer} {...rest} disabled={disabled} ref={ref}>
+                <>{children}</>
+            </TouchableRipple>
+        </Surface>
+    );
+};
+
+const cardStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        animationDuration: `${theme.animation.durations['1']}`,
+
+        variants: {
+            variant: {
+                elevated: {},
+                filled: {},
+                outlined: {},
+                undefined: {},
+            },
+        },
+        compoundVariants: [
+            {
+                variant: 'outlined',
+                state: 'disabled',
+                styles: {
+                    opacity: 0.12,
+                },
+            },
+        ],
+    },
+    container: {
+        borderRadius: theme.shapes.corner.medium,
+
+        variants: {
+            variant: {
+                elevated: {
+                    backgroundColor: theme.colors.surface,
+                },
+
+                filled: {
+                    backgroundColor: theme.colors.surfaceVariant,
+                },
+
+                outlined: {
+                    borderWidth: 1,
+                    borderColor: theme.colors.outlineVariant,
+                },
+            },
+        },
+
+        compoundVariants: [
+            {
+                variant: 'elevated',
+                state: 'disabled',
+                styles: {
+                    backgroundColor: theme.colors.surfaceVariant,
+                    opacity: 0.38,
+                },
+            },
+
+            {
+                variant: 'filled',
+                state: 'disabled',
+                styles: {
+                    backgroundColor: theme.colors.surface,
+                    opacity: 0.38,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'disabled',
+                styles: {
+                    opacity: 0.38,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'hovered',
+                styles: {
+                    borderColor: theme.colors.outline,
+                },
+            },
+        ],
+    },
+    innerContainer: {
+        borderRadius: theme.shapes.corner.medium,
+    },
+}));
+
+registerComponentStyles('Card', cardStylesDefault);
+export const cardStyles = getRegisteredMoleculesComponentStyles('Card');
+
+export default memo(forwardRef(Card));

package/components/Card/CardActions.tsx

@@ -0,0 +1,18 @@
+import { forwardRef, memo, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+
+import { cardActionsStyles } from './utils';
+
+export type Props = ViewProps & {
+    children: ReactNode | ReactNode[];
+};
+
+const CardActions = memo(
+    forwardRef(({ style, ...rest }: Props, ref: any) => {
+        return <View style={[cardActionsStyles.root, style]} {...rest} ref={ref} />;
+    }),
+);
+
+CardActions.displayName = 'Card_Actions';
+
+export default CardActions;

package/components/Card/CardContent.tsx

@@ -0,0 +1,29 @@
+import { forwardRef, memo, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+
+export type Props = ViewProps & {
+    children: ReactNode | ReactNode[];
+};
+
+const CardContent = memo(
+    forwardRef(({ style, ...rest }: Props, ref: any) => {
+        return <View style={[cardContentStyles.root, style]} {...rest} ref={ref} />;
+    }),
+);
+
+CardContent.displayName = 'Card_Content';
+
+const cardContentStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        padding: theme.spacings['4'],
+    },
+}));
+
+registerComponentStyles('Card_Content', cardContentStylesDefault);
+
+export const cardContentStyles = getRegisteredMoleculesComponentStyles('Card_Content');
+
+export default CardContent;

package/components/Card/CardHeader.tsx

@@ -0,0 +1,31 @@
+import { forwardRef, memo, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+
+export type Props = ViewProps & {
+    children: ReactNode | ReactNode[];
+};
+
+const CardHeader = memo(
+    forwardRef(({ style, ...rest }: Props, ref: any) => {
+        return <View style={[cardHeaderStyles.root, style]} {...rest} ref={ref} />;
+    }),
+);
+
+CardHeader.displayName = 'Card_Header';
+
+const cardHeaderStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        paddingHorizontal: theme.spacings['4'],
+        paddingTop: theme.spacings['4'],
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+}));
+registerComponentStyles('Card_Header', cardHeaderStylesDefault);
+export const cardHeaderStyles = getRegisteredMoleculesComponentStyles('Card_Header');
+
+export default CardHeader;

package/components/Card/CardHeadline.tsx

@@ -0,0 +1,15 @@
+import { forwardRef, memo } from 'react';
+
+import CardTypography, { type Props as TypographyProps } from './CardTypography';
+
+export type Props = Omit<TypographyProps, 'variant'>;
+
+const CardHeadline = memo(
+    forwardRef(({ size = 'md', ...rest }: Props, ref: any) => {
+        return (
+            <CardTypography ref={ref} selectable={false} size={size} {...rest} variant="headline" />
+        );
+    }),
+);
+
+export default memo(CardHeadline);