react-native-molecules 0.5.0-beta.0

package/components/Link/index.tsx

@@ -0,0 +1,11 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import LinkDefault from './Link';
+
+registerMoleculesComponents({
+    Link: LinkDefault,
+});
+
+export const Link = getRegisteredComponentWithFallback('Link', LinkDefault);
+
+export type { Props as LinkProps } from './Link';
+export { linkStyles } from './utils';

package/components/Link/utils.ts

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getCursorStyle } from '../../utils';
+
+// type States = 'disabled' | 'hovered';
+
+const linkStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        ...getCursorStyle('pointer'),
+        color: theme.colors.primary,
+        ...theme.typescale.labelLarge,
+
+        _web: {
+            _hover: {
+                textDecorationLine: 'underline',
+            },
+        },
+
+        variants: {
+            state: {
+                disabled: {
+                    color: theme.colors.onSurfaceDisabled,
+                    opacity: 0.38,
+                    ...getCursorStyle('pointer'),
+                },
+                default: {},
+            },
+        },
+    },
+}));
+
+registerComponentsStyles({
+    Link: linkStylesDefault,
+});
+
+export const linkStyles = getRegisteredMoleculesComponentStyles('Link');

package/components/ListItem/ListItem.tsx

@@ -0,0 +1,136 @@
+import { createContext, forwardRef, memo, type ReactNode, useMemo } from 'react';
+import { type StyleProp, View, type ViewStyle } from 'react-native';
+
+import { useActionState } from '../../hooks';
+import type { WithElements } from '../../types';
+import { resolveStateVariant } from '../../utils';
+import { HorizontalDivider } from '../HorizontalDivider';
+import { StateLayer } from '../StateLayer';
+import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
+import { listItemStyles } from './utils';
+
+export type Props = Omit<TouchableRippleProps, 'children'> &
+    WithElements<ReactNode | ((renderArgs: { hovered: boolean }) => ReactNode)> & {
+        hovered?: boolean;
+        /**
+         * Description text for the list item or callback which returns a React element to display the description.
+         */
+        children: ReactNode;
+        /**
+         * Style that is passed to the wrapping TouchableRipple element.
+         */
+        style?: StyleProp<ViewStyle>;
+        /**
+         * Whether the divider shows or not.
+         */
+        divider?: boolean;
+        /**
+         * variant of the ListItem
+         */
+        variant?: 'default' | 'menuItem';
+        /**
+         * Whether the ListItem is selected or not
+         */
+        selected?: boolean;
+        /**
+         * Whether the ListItem is hoverable or not
+         * @default true if onPress is passed
+         */
+        hoverable?: boolean;
+    };
+
+const ListItem = (
+    {
+        left,
+        right,
+        children,
+        style: styleProp,
+        disabled = false,
+        divider = false,
+        variant = 'default',
+        selected = false,
+        onPress,
+        hoverable: hoverableProp = false,
+        hovered: hoveredProp = false,
+        ...props
+    }: Props,
+    ref: any,
+) => {
+    const { hovered: _hovered, actionsRef } = useActionState({ ref, actionsToListen: ['hover'] });
+    const hoverable = hoverableProp || !!onPress;
+    const hovered = hoveredProp || _hovered;
+
+    const state = resolveStateVariant({
+        selected,
+        disabled,
+        hovered: hoverable && hovered,
+    }) as any;
+
+    listItemStyles.useVariants({
+        state,
+        variant: variant as any,
+    });
+
+    const {
+        containerStyles,
+        innerContainerStyle,
+        contentStyle,
+        leftElementStyle,
+        rightElementStyle,
+    } = useMemo(() => {
+        const { innerContainer, content, leftElement, rightElement } = listItemStyles;
+        return {
+            containerStyles: [listItemStyles.root, styleProp],
+            innerContainerStyle: innerContainer,
+            contentStyle: content,
+            leftElementStyle: leftElement,
+            rightElementStyle: rightElement,
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [styleProp, state, variant]);
+
+    const contextValue = useMemo(
+        () => ({ disabled, hovered: hoverable && hovered, selected, variant }),
+        [disabled, hoverable, hovered, selected, variant],
+    );
+
+    return (
+        <TouchableRipple
+            {...props}
+            style={containerStyles}
+            disabled={disabled}
+            onPress={onPress}
+            ref={actionsRef}>
+            <>
+                <View style={innerContainerStyle}>
+                    {left ? (
+                        <View style={leftElementStyle}>
+                            {typeof left === 'function' ? left({ hovered }) : left}
+                        </View>
+                    ) : null}
+                    <View style={contentStyle}>
+                        <ListItemContext.Provider value={contextValue}>
+                            <>{children}</>
+                        </ListItemContext.Provider>
+                    </View>
+                    {right ? (
+                        <View style={rightElementStyle}>
+                            {typeof right === 'function' ? right({ hovered }) : right}
+                        </View>
+                    ) : null}
+                </View>
+                {divider && <HorizontalDivider />}
+                <StateLayer style={listItemStyles.stateLayer} />
+            </>
+        </TouchableRipple>
+    );
+};
+
+export const ListItemContext = createContext({
+    disabled: false,
+    hovered: false,
+    selected: false,
+    variant: 'default',
+});
+
+export default memo(forwardRef(ListItem));

package/components/ListItem/ListItemDescription.tsx

@@ -0,0 +1,25 @@
+import { memo, useContext } from 'react';
+import { type TextProps } from 'react-native';
+
+import { resolveStateVariant } from '../../utils';
+import { Text } from '../Text';
+import { ListItemContext } from './ListItem';
+import { listItemDescriptionStyles } from './utils';
+
+type Props = TextProps & {};
+
+const ListItemDescription = ({ style, ...rest }: Props) => {
+    const { disabled, hovered, variant } = useContext(ListItemContext);
+
+    listItemDescriptionStyles.useVariants({
+        state: resolveStateVariant({
+            disabled,
+            hovered,
+        }) as any,
+        variant: variant as any,
+    });
+
+    return <Text selectable={false} {...rest} style={[listItemDescriptionStyles.root, style]} />;
+};
+
+export default memo(ListItemDescription);

package/components/ListItem/ListItemTitle.tsx

@@ -0,0 +1,25 @@
+import { memo, useContext } from 'react';
+import { type TextProps } from 'react-native';
+
+import { resolveStateVariant } from '../../utils';
+import { Text } from '../Text';
+import { ListItemContext } from './ListItem';
+import { listItemTitleStyles } from './utils';
+
+type Props = TextProps & {};
+
+const ListItemTitle = ({ style, ...rest }: Props) => {
+    const { disabled, hovered, variant } = useContext(ListItemContext);
+
+    listItemTitleStyles.useVariants({
+        state: resolveStateVariant({
+            disabled,
+            hovered,
+        }) as any,
+        variant: variant as any,
+    });
+
+    return <Text selectable={false} {...rest} style={[listItemTitleStyles.root, style]} />;
+};
+
+export default memo(ListItemTitle);

package/components/ListItem/index.tsx

@@ -0,0 +1,18 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import ListItemComponent from './ListItem';
+import ListItemDescription from './ListItemDescription';
+import ListItemTitle from './ListItemTitle';
+
+const ListItemDefault = Object.assign(ListItemComponent, {
+    Title: ListItemTitle,
+    Description: ListItemDescription,
+});
+
+registerMoleculesComponents({
+    ListItem: ListItemDefault,
+});
+
+export const ListItem = getRegisteredComponentWithFallback('ListItem', ListItemDefault);
+
+export type { Props as ListItemProps } from './ListItem';
+export { listItemDescriptionStyles, listItemStyles, listItemTitleStyles } from './utils';

package/components/ListItem/utils.ts

@@ -0,0 +1,113 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const listItemStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        backgroundColor: theme.colors.surface,
+
+        variants: {
+            state: {
+                disabled: {
+                    opacity: 0.38,
+                },
+                hovered: {},
+
+                selected: {
+                    backgroundColor: theme.colors.surfaceVariant,
+                },
+            },
+            variant: {
+                default: {
+                    paddingTop: theme.spacings['2'],
+                    paddingBottom: theme.spacings['2'],
+                    paddingLeft: theme.spacings['4'],
+                    paddingRight: theme.spacings['6'],
+                },
+                menuItem: {
+                    paddingVertical: theme.spacings['2'],
+                    paddingHorizontal: theme.spacings['3'],
+                    minHeight: 48,
+                    justifyContent: 'center',
+                },
+            },
+        },
+    },
+
+    innerContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+
+    content: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+
+    leftElement: {
+        marginRight: theme.spacings['3'],
+        marginLeft: theme.spacings._1,
+    },
+    rightElement: {
+        marginRight: theme.spacings._1,
+        marginLeft: theme.spacings['3'],
+    },
+    stateLayer: {
+        variants: {
+            state: {
+                hovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.primary,
+                },
+            },
+        },
+    },
+}));
+
+const listItemTitleStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        color: theme.colors.onSurface,
+        ...theme.typescale.bodyLarge,
+
+        variants: {
+            variant: {
+                menuItem: {
+                    ...theme.typescale.labelLarge,
+                },
+            },
+            state: {
+                hovered: {},
+                disabled: {},
+            },
+        },
+    },
+}));
+
+const listItemDescriptionStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        color: theme.colors.onSurfaceVariant,
+        ...theme.typescale.bodyMedium,
+
+        variants: {
+            variant: {
+                menuItem: {
+                    ...theme.typescale.bodySmall,
+                },
+            },
+            state: {
+                disabled: {},
+                hovered: {},
+            },
+        },
+    },
+}));
+
+registerComponentsStyles({
+    ListItem: listItemStylesDefault,
+    ListItem_Title: listItemTitleStylesDefault,
+    ListItem_Description: listItemDescriptionStylesDefault,
+});
+
+export const listItemStyles = getRegisteredMoleculesComponentStyles('ListItem');
+export const listItemTitleStyles = getRegisteredMoleculesComponentStyles('ListItem_Title');
+export const listItemDescriptionStyles =
+    getRegisteredMoleculesComponentStyles('ListItem_Description');

package/components/Menu/Menu.tsx

@@ -0,0 +1,69 @@
+import { createContext, memo, type ReactElement, useMemo } from 'react';
+import type { ViewStyle } from 'react-native';
+
+import { Popover, type PopoverProps } from '../Popover';
+import { menuStyles } from './utils';
+
+export type Props = Omit<PopoverProps, 'setIsOpen' | 'onClose' | 'children'> & {
+    style?: ViewStyle;
+    closeOnSelect?: boolean;
+    onClose: () => void;
+    children: ReactElement | ReactElement[];
+};
+
+const emptyObj = {} as ViewStyle;
+
+const Menu = ({
+    isOpen,
+    onClose,
+    children,
+    style: styleProp,
+    backdropStyles = emptyObj,
+    closeOnSelect = true,
+    ...rest
+}: Props) => {
+    const { backdropStyle, style } = useMemo(() => {
+        return {
+            backdropStyle: [menuStyles.backdrop, backdropStyles] as unknown as ViewStyle,
+            style: [menuStyles.root, styleProp] as unknown as ViewStyle,
+        };
+    }, [backdropStyles, styleProp]);
+
+    const contextValue = useMemo(
+        () => ({
+            closeOnSelect,
+            onClose,
+        }),
+        [closeOnSelect, onClose],
+    );
+
+    // const { menuItemsLength } = useMemo(
+    //     () => ({
+    //         menuItemsLength:
+    //             Children.map(children, child => child)?.filter(
+    //                 child => (child.type as FC)?.displayName === 'MenuItem',
+    //             )?.length || 0,
+    //     }),
+    //     [children],
+    // );
+    //
+    // console.log({ menuItemsLength });
+
+    return (
+        <Popover
+            isOpen={isOpen}
+            onClose={onClose}
+            backdropStyles={backdropStyle}
+            style={style}
+            {...rest}>
+            <MenuContext.Provider value={contextValue}>{children}</MenuContext.Provider>
+        </Popover>
+    );
+};
+
+export const MenuContext = createContext({
+    closeOnSelect: true,
+    onClose: () => {},
+});
+
+export default memo(Menu);

package/components/Menu/MenuDivider.tsx

@@ -0,0 +1,13 @@
+import { memo } from 'react';
+
+import { HorizontalDivider, type HorizontalDividerProps } from '../HorizontalDivider';
+
+export type Props = HorizontalDividerProps & {};
+
+const MenuDivider = memo(({ spacing = 8, ...rest }: Props) => {
+    return <HorizontalDivider spacing={spacing} {...rest} />;
+});
+
+MenuDivider.displayName = 'Menu_Divider';
+
+export default MenuDivider;

package/components/Menu/MenuItem.tsx

@@ -0,0 +1,128 @@
+import { forwardRef, memo, type ReactNode, useCallback, useContext, useMemo } from 'react';
+import {
+    type GestureResponderEvent,
+    type StyleProp,
+    Text,
+    type TextProps,
+    View,
+    type ViewStyle,
+} from 'react-native';
+
+import { useActionState } from '../../hooks';
+import type { WithElements } from '../../types';
+import { resolveStateVariant } from '../../utils';
+import { StateLayer, type StateLayerProps } from '../StateLayer';
+import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
+import { MenuContext } from './Menu';
+import { menuItemStyles } from './utils';
+
+export type Props = TouchableRippleProps &
+    WithElements<ReactNode> & {
+        size?: 'default' | 'dense';
+        stateLayerProps?: StateLayerProps;
+        textProps?: Omit<TextProps, 'children'>;
+        leftElementStyle?: StyleProp<ViewStyle>;
+        rightElementStyle?: StyleProp<ViewStyle>;
+    };
+
+const emptyObj = {};
+
+const _MenuItem = (
+    {
+        onPress,
+        left,
+        right,
+        children,
+        disabled = false,
+        size = 'default',
+        style,
+        testID,
+        stateLayerProps,
+        textProps = emptyObj,
+        leftElementStyle: _leftElementStyle,
+        rightElementStyle: _rightElementStyle,
+        ...rest
+    }: Props,
+    ref: any,
+) => {
+    const { hovered, actionsRef } = useActionState({ ref, actionsToListen: ['hover'] });
+
+    const { closeOnSelect, onClose } = useContext(MenuContext);
+
+    const state = resolveStateVariant({
+        disabled,
+        hovered,
+    });
+
+    menuItemStyles.useVariants({
+        size: size as any,
+        state: state as any,
+    });
+
+    const onPressItem = useCallback(
+        (e: GestureResponderEvent) => {
+            if (closeOnSelect) onClose();
+
+            onPress?.(e);
+        },
+        [closeOnSelect, onClose, onPress],
+    );
+
+    const { containerStyle, leftElementStyle, rightElementStyle, textStyle, stateLayerStyle } =
+        useMemo(() => {
+            const { text, leftElement, rightElement, stateLayer } = menuItemStyles;
+
+            return {
+                containerStyle: [menuItemStyles.root, style],
+                textStyle: [text, textProps?.style],
+                leftElementStyle: [leftElement, _leftElementStyle],
+                rightElementStyle: [rightElement, _rightElementStyle],
+                stateLayerStyle: stateLayer,
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [_leftElementStyle, _rightElementStyle, style, textProps?.style, state, size]);
+
+    return (
+        <TouchableRipple
+            {...rest}
+            testID={testID}
+            style={containerStyle}
+            disabled={disabled}
+            onPress={onPressItem}
+            ref={actionsRef}>
+            <>
+                {left ? (
+                    <View style={leftElementStyle} testID={testID ? `${testID}-left` : ''}>
+                        {left}
+                    </View>
+                ) : null}
+
+                <Text
+                    style={textStyle}
+                    numberOfLines={1}
+                    {...textProps}
+                    testID={testID ? `${testID}-text` : ''}>
+                    {children}
+                </Text>
+
+                {right ? (
+                    <View style={rightElementStyle} testID={testID ? `${testID}-right` : ''}>
+                        {right}
+                    </View>
+                ) : null}
+
+                <StateLayer
+                    testID={testID ? `${testID}-stateLayer` : ''}
+                    {...stateLayerProps}
+                    style={stateLayerStyle}
+                />
+            </>
+        </TouchableRipple>
+    );
+};
+
+const MenuItem = memo(forwardRef(_MenuItem));
+
+MenuItem.displayName = 'Menu_Item';
+
+export default MenuItem;

package/components/Menu/index.tsx

@@ -0,0 +1,19 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import MenuComponent from './Menu';
+import MenuDivider from './MenuDivider';
+import MenuItem from './MenuItem';
+
+export const MenuDefault = Object.assign(MenuComponent, {
+    Item: MenuItem,
+    Divider: MenuDivider,
+});
+
+registerMoleculesComponents({
+    Menu: MenuDefault,
+});
+
+export const Menu = getRegisteredComponentWithFallback('Menu', MenuDefault);
+
+export type { Props as MenuProps } from './Menu';
+export type { Props as MenuItemProps } from './MenuItem';
+export { menuItemStyles, menuStyles } from './utils';

package/components/Menu/utils.ts

@@ -0,0 +1,92 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const menuStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        paddingVertical: theme.spacings['2'],
+        backgroundColor: theme.colors.surface,
+        minWidth: 112,
+        maxWidth: 280,
+        borderRadius: theme.shapes.corner.small as unknown as number,
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    backdrop: {
+        opacity: 0,
+    },
+}));
+
+const menuItemStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        paddingVertical: theme.spacings['2'],
+        flexDirection: 'row',
+        alignItems: 'center',
+
+        variants: {
+            state: {
+                disabled: {
+                    opacity: 0.38,
+                },
+                hovered: {},
+            },
+            size: {
+                default: {
+                    paddingHorizontal: theme.spacings['4'],
+                    height: 48,
+                },
+
+                dense: {
+                    paddingLeft: theme.spacings['4'],
+                    paddingRight: theme.spacings['2'],
+                    height: 32,
+                },
+            },
+        },
+    },
+
+    text: {
+        flex: 1,
+        color: theme.colors.onSurface,
+
+        size: {
+            default: {
+                ...theme.typescale.bodyLarge,
+            },
+
+            dense: {
+                ...theme.typescale.bodyMedium,
+            },
+        },
+    },
+
+    leftElement: {
+        marginRight: theme.spacings['5'],
+        marginLeft: theme.spacings['2'],
+    },
+    rightElement: {
+        marginRight: theme.spacings['2'],
+        marginLeft: theme.spacings['5'],
+    },
+
+    stateLayer: {
+        variants: {
+            state: {
+                disabled: {
+                    backgroundColor: 'transparent',
+                },
+                hovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+            },
+        },
+    },
+}));
+
+registerComponentsStyles({
+    Menu: menuStylesDefault,
+    Menu_Item: menuItemStylesDefault,
+});
+
+export const menuStyles = getRegisteredMoleculesComponentStyles('Menu');
+export const menuItemStyles = getRegisteredMoleculesComponentStyles('Menu_Item');