react-native-molecules 0.5.0-beta.3 → 0.5.0-beta.31

package/components/DateTimePicker/index.tsx

@@ -1,10 +0,0 @@
-import { getRegisteredComponentWithFallback } from '../../core';
-import DateTimePickerDefault from './DateTimePicker';
-
-export const DateTimePicker = getRegisteredComponentWithFallback(
-    'DateTimePicker',
-    DateTimePickerDefault,
-);
-
-export type { Props as DateTimePickerProps } from './DateTimePicker';
-export { dateTimePickerStyles } from './utils';

package/components/DateTimePicker/utils.ts

@@ -1,12 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-
-import { getRegisteredComponentStylesWithFallback } from '../../core';
-
-const dateTimePickerStylesDefault = StyleSheet.create({
-    container: {},
-});
-
-export const dateTimePickerStyles = getRegisteredComponentStylesWithFallback(
-    'DateTimePicker',
-    dateTimePickerStylesDefault,
-);

package/components/HorizontalDivider/HorizontalDivider.tsx

@@ -1,103 +0,0 @@
-import { memo } from 'react';
-import { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-
-import { getRegisteredComponentStylesWithFallback } from '../../core';
-
-export type Props = Omit<ViewProps, 'children'> & {
-    /**
-     * left inset of the divider.
-     */
-    leftInset?: number;
-    /**
-     * right inset of the divider.
-     */
-    rightInset?: number;
-    /**
-     *  Whether divider should be bolded.
-     */
-    bold?: boolean;
-    /**
-     *  Vertical spacing of the Divider
-     */
-    spacing?: number;
-    style?: StyleProp<ViewStyle>;
-};
-
-/**
- * A divider is a thin, lightweight separator that groups content in lists and page layouts.
- *
- * <div class="screenshots">
- *  <figure>
- *    <img class="medium" src="screenshots/divider.png" />
- *  </figure>
- * </div>
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { View } from 'react-native';
- * import { Divider, Text } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <View>
- *     <Text>Lemon</Text>
- *     <Divider />
- *     <Text>Mango</Text>
- *     <Divider />
- *   </View>
- * );
- *
- * export default MyComponent;
- * ```
- */
-
-const HorizontalDivider = ({
-    leftInset = 0,
-    rightInset = 0,
-    style,
-    bold = false,
-    spacing = 0,
-    ...rest
-}: Props) => {
-    horizontalDividerStyles.useVariants({
-        isBold: bold,
-    });
-
-    return (
-        <View
-            {...rest}
-            style={
-                [
-                    horizontalDividerStyles.root,
-                    leftInset && { marginLeft: leftInset },
-                    rightInset && { marginRight: rightInset },
-                    spacing && { marginVertical: spacing },
-                    style,
-                ] as StyleProp<ViewStyle>
-            }
-        />
-    );
-};
-
-export const horizontalDividerStylesDefault = StyleSheet.create(theme => ({
-    root: {
-        height: StyleSheet.hairlineWidth,
-        background: theme.colors.outlineVariant,
-
-        variants: {
-            isBold: {
-                true: {
-                    height: 1,
-                },
-            },
-        },
-    },
-}));
-
-export const horizontalDividerStyles = getRegisteredComponentStylesWithFallback(
-    'HorizontalDivider',
-    horizontalDividerStylesDefault,
-);
-
-export default memo(HorizontalDivider);

package/components/HorizontalDivider/index.tsx

@@ -1,9 +0,0 @@
-import { getRegisteredComponentWithFallback } from '../../core';
-import HorizontalDividerDefault from './HorizontalDivider';
-
-export const HorizontalDivider = getRegisteredComponentWithFallback(
-    'HorizontalDivider',
-    HorizontalDividerDefault,
-);
-
-export { type Props as HorizontalDividerProps, horizontalDividerStyles } from './HorizontalDivider';

package/components/ListItem/ListItem.tsx

@@ -1,136 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

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

package/components/ListItem/utils.ts

@@ -1,115 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-
-import { getRegisteredComponentStylesWithFallback } 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: {},
-            },
-        },
-    },
-}));
-
-export const listItemStyles = getRegisteredComponentStylesWithFallback(
-    'ListItem',
-    listItemStylesDefault,
-);
-export const listItemTitleStyles = getRegisteredComponentStylesWithFallback(
-    'ListItem_Title',
-    listItemTitleStylesDefault,
-);
-export const listItemDescriptionStyles = getRegisteredComponentStylesWithFallback(
-    'ListItem_Description',
-    listItemDescriptionStylesDefault,
-);

package/components/Menu/MenuDivider.tsx

@@ -1,13 +0,0 @@
-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

@@ -1,128 +0,0 @@
-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;