react-native-molecules 0.5.0-beta.0

package/components/Drawer/Collapsible/DrawerCollapsibleItem.tsx

@@ -0,0 +1,38 @@
+import { createContext, forwardRef, memo, useMemo } from 'react';
+
+import { AccordionItem, type AccordionItemProps } from '../../Accordion';
+import { drawerCollapsibleItemStyles } from './utils';
+
+export type Props = AccordionItemProps & {
+    active?: boolean;
+};
+
+const DrawerCollapsibleItem = memo(
+    forwardRef(({ style, active = false, children, ...rest }: Props, ref: any) => {
+        const contextValue = useMemo(
+            () => ({
+                active,
+            }),
+            [active],
+        );
+
+        return (
+            <DrawerCollapsibleItemContext.Provider value={contextValue}>
+                <AccordionItem
+                    {...rest}
+                    style={useMemo(() => [drawerCollapsibleItemStyles.root, style], [style])}
+                    ref={ref}>
+                    {children}
+                </AccordionItem>
+            </DrawerCollapsibleItemContext.Provider>
+        );
+    }),
+);
+
+export const DrawerCollapsibleItemContext = createContext({
+    active: false,
+});
+
+DrawerCollapsibleItem.displayName = 'AccordionItem';
+
+export default DrawerCollapsibleItem;

package/components/Drawer/Collapsible/DrawerCollapsibleItemContent.tsx

@@ -0,0 +1,16 @@
+import { memo } from 'react';
+
+import { AccordionItem, type AccordionItemContentProps } from '../../Accordion';
+import { drawerCollapsibleItemContentStyles } from './utils';
+
+export type Props = AccordionItemContentProps & {};
+
+const DrawerCollapsibleItemContent = memo(({ style, ...rest }: Props) => {
+    return (
+        <AccordionItem.Content {...rest} style={[drawerCollapsibleItemContentStyles.root, style]} />
+    );
+});
+
+DrawerCollapsibleItemContent.displayName = 'AccordionItem_Content';
+
+export default DrawerCollapsibleItemContent;

package/components/Drawer/Collapsible/DrawerCollapsibleItemHeader.tsx

@@ -0,0 +1,48 @@
+import { forwardRef, memo, useContext, useMemo } from 'react';
+
+import { resolveStateVariant } from '../../../utils';
+import { AccordionItem, type AccordionItemHeaderProps } from '../../Accordion';
+import { DrawerCollapsibleItemContext } from './DrawerCollapsibleItem';
+import { drawerCollapsibleItemHeaderStyles } from './utils';
+
+export type Props = AccordionItemHeaderProps & {};
+
+const DrawerCollapsibleItemHeader = memo(
+    forwardRef(({ style, ...rest }: Props, ref: any) => {
+        const { active } = useContext(DrawerCollapsibleItemContext);
+
+        const state = resolveStateVariant({
+            active,
+        });
+        drawerCollapsibleItemHeaderStyles.useVariants({
+            state: state as any,
+        });
+
+        const { leftElementStyle, rightElementStyle, contentStyle, headerStyle } = useMemo(() => {
+            const { content, leftElement, rightElement } = drawerCollapsibleItemHeaderStyles;
+
+            return {
+                headerStyle: [style],
+                leftElementStyle: leftElement,
+                rightElementStyle: rightElement,
+                contentStyle: content,
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [style, state]);
+
+        return (
+            <AccordionItem.Header
+                {...rest}
+                style={headerStyle}
+                contentStyle={contentStyle}
+                leftElementStyle={leftElementStyle}
+                rightElementStyle={rightElementStyle}
+                ref={ref}
+            />
+        );
+    }),
+);
+
+DrawerCollapsibleItemHeader.displayName = 'AccordionItem_Header';
+
+export default DrawerCollapsibleItemHeader;

package/components/Drawer/Collapsible/index.tsx

@@ -0,0 +1,23 @@
+import DrawerCollapsibleItemComponent from './DrawerCollapsibleItem';
+import DrawerCollapsibleItemContent from './DrawerCollapsibleItemContent';
+import DrawerCollapsibleItemHeader from './DrawerCollapsibleItemHeader';
+
+export const DrawerCollapsibleItem = Object.assign(DrawerCollapsibleItemComponent, {
+    Header: DrawerCollapsibleItemHeader,
+    Content: DrawerCollapsibleItemContent,
+});
+
+export type { AccordionHeaderElementProps as DrawerCollapsibleItemHeaderElementProps } from '../../Accordion';
+export {
+    default as DrawerCollapsible,
+    type Props as DrawerCollapsibleProps,
+} from './DrawerCollapsible';
+export type { Props as DrawerCollapsibleItemProps } from './DrawerCollapsibleItem';
+export type { Props as DrawerCollapsibleItemContentProps } from './DrawerCollapsibleItemContent';
+export type { Props as DrawerCollapsibleItemHeaderProps } from './DrawerCollapsibleItemHeader';
+export {
+    drawerCollapsibleItemContentStyles,
+    drawerCollapsibleItemHeaderStyles,
+    drawerCollapsibleItemStyles,
+    drawerCollapsibleStyles,
+} from './utils';

package/components/Drawer/Collapsible/utils.ts

@@ -0,0 +1,49 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../../core';
+
+export const drawerCollapsibleStylesDefault = StyleSheet.create({
+    root: {},
+});
+
+export const drawerCollapsibleItemStylesDefault = StyleSheet.create({
+    root: {},
+});
+
+export const drawerCollapsibleItemHeaderStylesDefault = StyleSheet.create(theme => ({
+    content: {
+        color: theme.colors.onSurfaceVariant,
+        ...theme.typescale.labelLarge,
+
+        variants: {
+            state: {
+                active: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+            },
+        },
+    },
+    leftElement: {},
+    rightElement: {},
+}));
+
+export const drawerCollapsibleItemContentStylesDefault = StyleSheet.create({
+    root: {},
+});
+
+registerComponentsStyles({
+    Drawer_Collapsible: drawerCollapsibleStylesDefault,
+    Drawer_CollapsibleItem: drawerCollapsibleItemStylesDefault,
+    Drawer_CollapsibleItem_Header: drawerCollapsibleItemHeaderStylesDefault,
+    Drawer_CollapsibleItem_Content: drawerCollapsibleItemContentStylesDefault,
+});
+
+export const drawerCollapsibleStyles = getRegisteredMoleculesComponentStyles('Drawer_Collapsible');
+export const drawerCollapsibleItemStyles =
+    getRegisteredMoleculesComponentStyles('Drawer_CollapsibleItem');
+export const drawerCollapsibleItemHeaderStyles = getRegisteredMoleculesComponentStyles(
+    'Drawer_CollapsibleItem_Header',
+);
+export const drawerCollapsibleItemContentStyles = getRegisteredMoleculesComponentStyles(
+    'Drawer_CollapsibleItem_Content',
+);

package/components/Drawer/Drawer.tsx

@@ -0,0 +1,43 @@
+import { memo, type ReactElement } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { useSubcomponents } from '../../hooks';
+
+export type Props = Omit<ViewProps, 'children'> & {
+    children: ReactElement | ReactElement[];
+};
+
+const allowedChildren = ['Drawer_Footer', 'Drawer_Header', 'Drawer_Content'];
+
+const Drawer = ({ style, children, ...rest }: Props) => {
+    const { Drawer_Header, Drawer_Footer, Drawer_Content } = useSubcomponents({
+        children,
+        allowedChildren,
+    });
+
+    return (
+        <View style={[drawerStyles.root, style]} {...rest}>
+            {Drawer_Header[0]}
+            {Drawer_Content[0]}
+            {Drawer_Footer[0]}
+        </View>
+    );
+};
+
+const drawerStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        borderTopRightRadius: theme.shapes.corner.large,
+        borderBottomRightRadius: theme.shapes.corner.large,
+        overflow: 'hidden',
+        backgroundColor: theme.colors.surface,
+        minWidth: 360,
+        flexGrow: 1,
+    },
+}));
+
+registerComponentStyles('Drawer', drawerStylesDefault);
+export const drawerStyles = getRegisteredMoleculesComponentStyles('Drawer');
+
+export default memo(Drawer);

package/components/Drawer/DrawerContent.tsx

@@ -0,0 +1,35 @@
+import { type ComponentType, memo } from 'react';
+import { ScrollView, type ScrollViewProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+
+export type Props = ScrollViewProps & {
+    /**
+     * ContainerComponent prop allows to replace the default container used in DrawerContent - ScrollView
+     * */
+    ContainerComponent?: ComponentType<any>;
+};
+
+const DrawerContent = memo(
+    ({ style, children, ContainerComponent = ScrollView, ...rest }: Props) => {
+        return (
+            <ContainerComponent style={[drawerContentStyles.root, style]} {...rest}>
+                {children}
+            </ContainerComponent>
+        );
+    },
+);
+
+const drawerContentStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        paddingHorizontal: theme.spacings['3'],
+        flex: 1,
+    },
+}));
+registerComponentStyles('Drawer_Content', drawerContentStylesDefault);
+export const drawerContentStyles = getRegisteredMoleculesComponentStyles('Drawer_Content');
+
+DrawerContent.displayName = 'Drawer_Content';
+
+export default DrawerContent;

package/components/Drawer/DrawerFooter.tsx

@@ -0,0 +1,27 @@
+import { memo } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+
+export type Props = ViewProps & {};
+
+const DrawerFooter = memo(({ style, children, ...rest }: Props) => {
+    return (
+        <View style={[drawerFooterStyles.root, style]} {...rest}>
+            {children}
+        </View>
+    );
+});
+
+DrawerFooter.displayName = 'Drawer_Footer';
+
+const drawerFooterStylesDefault = StyleSheet.create({
+    root: {},
+});
+
+registerComponentStyles('Drawer_Footer', drawerFooterStylesDefault);
+
+export const drawerFooterStyles = getRegisteredMoleculesComponentStyles('Drawer_Footer');
+
+export default DrawerFooter;

package/components/Drawer/DrawerHeader.tsx

@@ -0,0 +1,27 @@
+import { memo } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+
+export type Props = ViewProps & {};
+
+const DrawerHeader = memo(({ style, children, ...rest }: Props) => {
+    return (
+        <View style={[drawerHeaderStyles.root, style]} {...rest}>
+            {children}
+        </View>
+    );
+});
+
+DrawerHeader.displayName = 'Drawer_Header';
+
+const drawerHeaderStylesDefault = StyleSheet.create({
+    root: {},
+});
+
+registerComponentStyles('Drawer_Header', drawerHeaderStylesDefault);
+
+export const drawerHeaderStyles = getRegisteredMoleculesComponentStyles('Drawer_Header');
+
+export default DrawerHeader;

package/components/Drawer/DrawerItem.tsx

@@ -0,0 +1,206 @@
+import { forwardRef, memo, type ReactNode, useMemo } from 'react';
+import { type TextProps, type TextStyle, View, type ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { useActionState } from '../../hooks';
+import type { WithElements } from '../../types';
+import { resolveStateVariant } from '../../utils';
+import { Text } from '../Text';
+import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
+
+export type DrawerItemElementProps = { color: string; hovered: boolean };
+
+export type DrawerItemElement = ReactNode | ((props: DrawerItemElementProps) => ReactNode);
+
+export type Props = Omit<TouchableRippleProps, 'children' | 'disabled'> &
+    WithElements<DrawerItemElement> & {
+        label?: string;
+        active?: boolean;
+        children?: ReactNode;
+
+        leftElementContainerStyle?: ViewStyle;
+        rightElementContainerStyle?: ViewStyle;
+        contentStyle?: ViewStyle;
+        labelStyle?: TextStyle;
+        labelProps?: Omit<TextProps, 'children' | 'style'>;
+    };
+
+const emptyObj = {};
+
+const DrawerItem = (
+    {
+        left,
+        right,
+        label,
+        children,
+        style,
+        active = false,
+        leftElementContainerStyle = emptyObj,
+        rightElementContainerStyle = emptyObj,
+        labelStyle: labelStyleProp = emptyObj,
+        contentStyle: contentStyleProp = emptyObj,
+        labelProps,
+        ...rest
+    }: Props,
+    ref: any,
+) => {
+    const { hovered, actionsRef } = useActionState({ ref, actionsToListen: ['hover'] });
+    const state = resolveStateVariant({
+        activeAndHovered: active && hovered,
+        active,
+        hovered,
+    });
+    drawerItemStyles.useVariants({
+        state: state as any,
+    });
+
+    const {
+        leftElementColor,
+        rightElementColor,
+        containerStyle,
+        leftElementStyle,
+        rightElementStyle,
+        contentStyle,
+        labelStyle,
+    } = useMemo(() => {
+        const { leftElement, rightElement, label: _labelStyle, content } = drawerItemStyles;
+        const {
+            leftElementColor: _leftElementColor,
+            rightElementColor: _rightElementColor,
+            ...restStyle
+        } = drawerItemStyles.root;
+
+        return {
+            leftElementColor: _leftElementColor,
+            rightElementColor: _rightElementColor,
+            containerStyle: [restStyle, style],
+            leftElementStyle: [leftElement, leftElementContainerStyle],
+            rightElementStyle: [rightElement, rightElementContainerStyle],
+            labelStyle: [_labelStyle, labelStyleProp],
+            contentStyle: [content, contentStyleProp],
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        contentStyleProp,
+        labelStyleProp,
+        leftElementContainerStyle,
+        rightElementContainerStyle,
+        style,
+        state,
+    ]);
+
+    const _hoveredForLeftElement = typeof left === 'function' ? hovered : false;
+    const _hoveredForRightElement = typeof right === 'function' ? hovered : false;
+
+    const leftElement = useMemo(
+        () =>
+            left ? (
+                <View style={leftElementStyle}>
+                    {typeof left === 'function'
+                        ? left?.({
+                              color: leftElementColor,
+                              hovered: _hoveredForLeftElement,
+                          })
+                        : left}
+                </View>
+            ) : null,
+        [left, leftElementColor, leftElementStyle, _hoveredForLeftElement],
+    );
+
+    const rightElement = useMemo(
+        () =>
+            right ? (
+                <View style={rightElementStyle}>
+                    {typeof right === 'function'
+                        ? right?.({
+                              color: rightElementColor,
+                              hovered: _hoveredForRightElement,
+                          })
+                        : right}
+                </View>
+            ) : null,
+        [right, rightElementColor, rightElementStyle, _hoveredForRightElement],
+    );
+
+    return (
+        <TouchableRipple style={containerStyle} {...rest} ref={actionsRef}>
+            <>
+                {leftElement}
+                <View style={contentStyle}>
+                    <Text style={labelStyle} selectable={false} {...labelProps}>
+                        {label}
+                    </Text>
+                    {children}
+                </View>
+                {rightElement}
+            </>
+        </TouchableRipple>
+    );
+};
+
+const drawerItemStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        minHeight: 56,
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: theme.shapes.corner.full,
+        paddingLeft: theme.spacings['4'],
+        paddingRight: theme.spacings['6'],
+
+        leftElementColor: theme.colors.onSurfaceVariant,
+        rightElementColor: theme.colors.onSurfaceVariant,
+
+        variants: {
+            state: {
+                activeAndHovered: {
+                    backgroundColor: theme.colors.secondaryContainer,
+                    leftElementColor: theme.colors.onSecondaryContainer,
+                },
+                active: {
+                    backgroundColor: theme.colors.secondaryContainer,
+                    leftElementColor: theme.colors.onSecondaryContainer,
+                },
+                hovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+            },
+        },
+    },
+
+    leftElement: {
+        marginRight: theme.spacings['3'],
+    },
+    rightElement: {
+        marginLeft: theme.spacings['3'],
+    },
+
+    content: {
+        flexDirection: 'row',
+        flex: 1,
+    },
+
+    label: {
+        color: theme.colors.onSurfaceVariant,
+        lineHeight: theme.typescale.labelLarge.lineHeight,
+        fontSize: theme.typescale.labelLarge.fontSize,
+        fontWeight: theme.typescale.labelLarge.fontWeight,
+        flexGrow: 1,
+
+        variants: {
+            state: {
+                activeAndHovered: {
+                    color: theme.colors.onSecondaryContainer,
+                },
+                active: {
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
+        },
+    },
+}));
+
+registerComponentStyles('Drawer_Item', drawerItemStylesDefault);
+export const drawerItemStyles = getRegisteredMoleculesComponentStyles('Drawer_Item');
+
+export default memo(forwardRef(DrawerItem));

package/components/Drawer/DrawerItemGroup.tsx

@@ -0,0 +1,82 @@
+import { memo, type ReactNode, useMemo } from 'react';
+import { type TextProps, View, type ViewProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { HorizontalDivider, type HorizontalDividerProps } from '../HorizontalDivider';
+import { Text } from '../Text';
+
+export type Props = ViewProps & {
+    title?: ReactNode;
+    showDivider?: boolean;
+    dividerProps?: HorizontalDividerProps;
+    titleProps?: TextProps;
+};
+
+const DrawerItemGroup = memo(
+    ({
+        title,
+        style,
+        children,
+        showDivider,
+        dividerProps = {},
+        titleProps = {},
+        ...rest
+    }: Props) => {
+        const { containerStyle, titleStyle, dividerStyle, dividerRestProps } = useMemo(() => {
+            const { title: _titleStyle, divider: _dividerStyle } = drawerItemGroupStyles;
+            const { style: dividerStyleProp, ..._dividerRestProps } = dividerProps;
+
+            return {
+                containerStyle: [drawerItemGroupStyles.root, style],
+                titleStyle: _titleStyle,
+                dividerStyle: [_dividerStyle, dividerStyleProp],
+                dividerRestProps: _dividerRestProps,
+            };
+        }, [dividerProps, style]);
+
+        return (
+            <View style={containerStyle} {...rest}>
+                <>
+                    {title && (
+                        <Text {...titleProps} style={[titleStyle, titleProps?.style]}>
+                            {title}
+                        </Text>
+                    )}
+                </>
+                {children}
+                <>
+                    {showDivider && (
+                        <HorizontalDivider style={dividerStyle} {...dividerRestProps} />
+                    )}
+                </>
+            </View>
+        );
+    },
+);
+
+const drawerItemGroupStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        marginBottom: theme.spacings['1'],
+    },
+    title: {
+        color: theme.colors.onSurfaceVariant,
+        lineHeight: theme.typescale.titleSmall.lineHeight,
+        fontSize: theme.typescale.titleSmall.fontSize,
+        fontWeight: theme.typescale.titleSmall.fontWeight,
+        marginVertical: theme.spacings['4'],
+        marginHorizontal: theme.spacings['3'],
+    },
+
+    divider: {
+        marginTop: theme.spacings['1'],
+    },
+}));
+
+registerComponentStyles('Drawer_ItemGroup', drawerItemGroupStylesDefault);
+
+export const drawerItemGroupStyles = getRegisteredMoleculesComponentStyles('Drawer_ItemGroup');
+
+DrawerItemGroup.displayName = 'Drawer_ItemGroup';
+
+export default DrawerItemGroup;

package/components/Drawer/index.tsx

@@ -0,0 +1,47 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { DrawerCollapsible, DrawerCollapsibleItem } from './Collapsible';
+import DrawerComponent from './Drawer';
+import DrawerContent from './DrawerContent';
+import DrawerFooter from './DrawerFooter';
+import DrawerHeader from './DrawerHeader';
+import DrawerItem from './DrawerItem';
+import DrawerItemGroup from './DrawerItemGroup';
+
+const DrawerDefault = Object.assign(DrawerComponent, {
+    Item: DrawerItem,
+    ItemGroup: DrawerItemGroup,
+    Header: DrawerHeader,
+    Content: DrawerContent,
+    Footer: DrawerFooter,
+    Collapsible: DrawerCollapsible,
+    CollapsibleItem: DrawerCollapsibleItem,
+});
+
+registerMoleculesComponents({
+    Drawer: DrawerDefault,
+});
+
+export const Drawer = getRegisteredComponentWithFallback('Drawer', DrawerDefault);
+
+export {
+    type DrawerCollapsibleItemContentProps,
+    drawerCollapsibleItemContentStyles,
+    type DrawerCollapsibleItemHeaderElementProps,
+    type DrawerCollapsibleItemHeaderProps,
+    drawerCollapsibleItemHeaderStyles,
+    type DrawerCollapsibleItemProps,
+    drawerCollapsibleItemStyles,
+    type DrawerCollapsibleProps,
+    drawerCollapsibleStyles,
+} from './Collapsible';
+export { type Props as DrawerProps, drawerStyles } from './Drawer';
+export { type Props as DrawerContentProps, drawerContentStyles } from './DrawerContent';
+export { type Props as DrawerFooterProps, drawerFooterStyles } from './DrawerFooter';
+export { type Props as DrawerHeaderProps, drawerHeaderStyles } from './DrawerHeader';
+export {
+    type DrawerItemElement,
+    type DrawerItemElementProps,
+    type Props as DrawerItemProps,
+    drawerItemStyles,
+} from './DrawerItem';
+export { type Props as DrawerItemGroupProps, drawerItemGroupStyles } from './DrawerItemGroup';

package/components/Drawer/types.ts

@@ -0,0 +1,3 @@
+import type { ViewProps } from 'react-native';
+
+export type TemplateComponentProps = ViewProps & {};

package/components/Drawer/utils.ts

@@ -0,0 +1,8 @@
+import { registerComponentsStyles } from '../../core';
+
+registerComponentsStyles({
+    // Drawer_Collapsible: drawerCollapsibleStyles,
+    // Drawer_CollapsibleItem: drawerCollapsibleItemStyles,
+    // Drawer_CollapsibleItem_Header: drawerCollapsibleItemHeaderStyles,
+    // Drawer_CollapsibleItem_Content: drawerCollapsibleItemContentStyles,
+});