react-native-molecules 0.5.0-beta.0

package/components/Select/index.ts

@@ -0,0 +1,14 @@
+export { default as Select } from './Select';
+export type {
+    DefaultItemT,
+    SelectContentProps,
+    SelectContextValue,
+    SelectDropdownContextValue,
+    SelectDropdownProps,
+    SelectGroupProps,
+    SelectOptionProps,
+    SelectProviderProps,
+    SelectSearchInputProps,
+    SelectTriggerProps,
+    SelectValueProps,
+} from './types';

package/components/Select/types.ts

@@ -0,0 +1,115 @@
+import type { ComponentType, ReactNode } from 'react';
+import type {
+    GestureResponderEvent,
+    ScrollViewProps,
+    TextInputProps,
+    ViewProps,
+} from 'react-native';
+
+import type { PopoverProps } from '../Popover';
+
+export type DefaultItemT = {
+    id: string | number;
+    label?: string;
+    selectable?: boolean;
+    [key: string]: any;
+};
+
+// SelectContext types
+export type SelectContextValue<Option extends DefaultItemT = DefaultItemT> = {
+    value: Option | Option[] | null;
+    multiple: boolean;
+    onAdd: (item: Option) => void;
+    onRemove: (item: Option) => void;
+    disabled?: boolean;
+    error?: boolean;
+    labelKey?: string;
+    options: Option[];
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    filteredOptions: Option[];
+};
+
+// SelectDropdownContext types
+export type SelectDropdownContextValue = {
+    isOpen: boolean;
+    onClose: () => void;
+    onOpen: () => void;
+};
+
+// SelectProvider props
+export type SelectProviderProps<Option extends DefaultItemT = DefaultItemT> = {
+    children: ReactNode;
+    value?: Option['id'] | Option['id'][] | null;
+    defaultValue?: Option['id'] | Option['id'][] | null;
+    onChange?: (
+        value: Option['id'] | Option['id'][] | null,
+        item: Option,
+        event?: GestureResponderEvent,
+    ) => void;
+    multiple?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    labelKey?: string;
+    options: Option[];
+    searchKey?: string;
+    onSearchChange?: (query: string) => void;
+    hideSelected?: boolean;
+};
+
+// Select.Trigger props
+export type SelectTriggerProps = ViewProps & {
+    children?: ReactNode;
+};
+
+// Select.Value props
+export type SelectValueProps = ViewProps & {
+    placeholder?: string;
+    renderValue?: (value: DefaultItemT | DefaultItemT[] | null) => ReactNode;
+};
+
+// Select.Dropdown props
+export type SelectDropdownProps = Omit<
+    PopoverProps,
+    'isOpen' | 'onClose' | 'triggerRef' | 'children'
+> & {
+    children: ReactNode;
+    WrapperComponent?: ComponentType<any>;
+    wrapperComponentProps?: Record<string, any>;
+};
+
+// Select.Content props
+export type SelectContentProps<Option extends DefaultItemT = DefaultItemT> = Omit<
+    ScrollViewProps,
+    'children'
+> & {
+    children: (item: Option, isSelected: boolean) => ReactNode;
+    ContainerComponent?: ComponentType<any>;
+    emptyState?: ReactNode;
+};
+
+// Select.Group props
+export type SelectGroupProps = ViewProps & {
+    children: ReactNode;
+    label?: string;
+};
+
+// Select.Option props
+export type SelectOptionProps<Option extends DefaultItemT = DefaultItemT> = ViewProps & {
+    /**
+     * Unique id for the option
+     */
+    value: Option['id'];
+    children?: ReactNode;
+    renderItem?: (item: Option, isSelected: boolean) => ReactNode;
+    onPress?: (item: Option, event: GestureResponderEvent) => void;
+    /**
+     * When true, the option can't be selected (similar to HTML option disabled)
+     */
+    disabled?: boolean;
+};
+
+// Select.SearchInput props
+export type SelectSearchInputProps = TextInputProps & {
+    onQueryChange?: (query: string) => void;
+};

package/components/StateLayer/StateLayer.tsx

@@ -0,0 +1,12 @@
+import { forwardRef, memo } from 'react';
+import { View, type ViewProps } from 'react-native';
+
+import { stateLayerStyles } from './utils';
+
+export type Props = ViewProps;
+
+const StateLayer = ({ style, ...rest }: Props, ref: any) => {
+    return <View {...rest} style={[stateLayerStyles.root, style]} ref={ref} />;
+};
+
+export default memo(forwardRef(StateLayer));

package/components/StateLayer/index.tsx

@@ -0,0 +1,11 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import StateLayerDefault from './StateLayer';
+
+registerMoleculesComponents({
+    StateLayer: StateLayerDefault,
+});
+
+export const StateLayer = getRegisteredComponentWithFallback('StateLayer', StateLayerDefault);
+
+export type { Props as StateLayerProps } from './StateLayer';
+export { stateLayerStyles } from './utils';

package/components/StateLayer/utils.ts

@@ -0,0 +1,17 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const stateLayerStylesDefault = StyleSheet.create({
+    root: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: 'transparent',
+        zIndex: -1,
+    },
+});
+
+registerComponentsStyles({
+    StateLayer: stateLayerStylesDefault,
+});
+
+export const stateLayerStyles = getRegisteredMoleculesComponentStyles('StateLayer');

package/components/Surface/BackgroundContextWrapper.tsx

@@ -0,0 +1,27 @@
+import { memo, type ReactNode, useContext, useMemo } from 'react';
+
+import { useContrastColor } from '../../hooks/useContrastColor';
+import { BackgroundContext } from '../../utils/backgroundContext';
+
+export const BackgroundContextWrapper = memo(
+    ({ backgroundColor, children }: { backgroundColor: string; children: ReactNode }) => {
+        const contrastColor = useContrastColor(backgroundColor, undefined, undefined);
+
+        const parentContext = useContext(BackgroundContext);
+        const isTransparent = backgroundColor === 'transparent';
+
+        const surfaceContextValue = useMemo(
+            () => ({
+                backgroundColor,
+                color: contrastColor,
+            }),
+            [backgroundColor, contrastColor],
+        );
+
+        return (
+            <BackgroundContext.Provider value={isTransparent ? parentContext : surfaceContextValue}>
+                {children}
+            </BackgroundContext.Provider>
+        );
+    },
+);

package/components/Surface/Surface.android.tsx

@@ -0,0 +1,62 @@
+import { forwardRef, memo, type ReactNode, useMemo } from 'react';
+import { Animated, type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
+import { useUnistyles } from 'react-native-unistyles';
+
+import { inputRange } from '../../styles/shadow';
+import type { MD3Elevation } from '../../types/theme';
+import { BackgroundContextWrapper } from './BackgroundContextWrapper';
+import { defaultStyles, extractProperties, getElevationAndroid } from './utils';
+
+export type Props = ViewProps & {
+    /**
+     * Content of the `Surface`.
+     */
+    children: ReactNode;
+    backgroundColor?: string;
+    style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    elevation?: MD3Elevation;
+    /**
+     * TestID used for testing purposes
+     */
+    testID?: string;
+};
+
+const elevationLevel = [0, 1, 2, 6, 8, 12];
+
+const Surface = ({ elevation = 1, style, children, testID, ...props }: Props, ref: any) => {
+    const { theme } = useUnistyles();
+
+    const backgroundColor = (() => {
+        // @ts-ignore
+        return theme.colors.elevation?.[`level${elevation}`];
+    })();
+
+    const { memoizedStyles, surfaceBackground } = useMemo(() => {
+        return {
+            memoizedStyles: [
+                {
+                    backgroundColor,
+                },
+                defaultStyles.root,
+                style,
+                {
+                    elevation: getElevationAndroid(elevation, inputRange, elevationLevel),
+                },
+            ] as StyleProp<ViewStyle>,
+            surfaceBackground: extractProperties(
+                [defaultStyles.root as ViewStyle, style],
+                ['backgroundColor'],
+            ).backgroundColor,
+        };
+    }, [backgroundColor, elevation, style]);
+
+    return (
+        <BackgroundContextWrapper backgroundColor={surfaceBackground}>
+            <View ref={ref} {...props} testID={testID} style={memoizedStyles}>
+                {children}
+            </View>
+        </BackgroundContextWrapper>
+    );
+};
+
+export default memo(forwardRef(Surface));

package/components/Surface/Surface.ios.tsx

@@ -0,0 +1,123 @@
+import { type ComponentPropsWithRef, forwardRef, memo, type ReactNode, useMemo } from 'react';
+import { Animated, type StyleProp, View, type ViewStyle } from 'react-native';
+import { useUnistyles } from 'react-native-unistyles';
+
+import type { MD3Elevation } from '../../types/theme';
+import { BackgroundContextWrapper } from './BackgroundContextWrapper';
+import { defaultStyles, extractProperties, getStyleForShadowLayer } from './utils';
+
+export type Props = ComponentPropsWithRef<typeof View> & {
+    /**
+     * Content of the `Surface`.
+     */
+    children: ReactNode;
+    backgroundColor?: string;
+    style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    /**
+     * @supported Available in v5.x with theme version 3
+     * Changes shadows and background on iOS and Android.
+     * Used to create UI hierarchy between components.
+     *
+     * Note: In version 2 the `elevation` prop was accepted via `style` prop i.e. `style={{ elevation: 4 }}`.
+     * It's no longer supported with theme version 3 and you should use `elevation` property instead.
+     */
+    elevation?: MD3Elevation;
+    /**
+     * TestID used for testing purposes
+     */
+    testID?: string;
+};
+
+/**
+ * Surface is a basic container that can give depth to an element with elevation shadow.
+ * On dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.
+ * See [Dark Theme](https://callstack.github.io/react-native-paper/theming.html#dark-theme) for more information.
+ * Overlay and shadow can be applied by specifying the `elevation` property both on Android and iOS.
+ *
+ * <div class="screenshots">
+ *   <figure>
+ *     <img class="medium" src="screenshots/surface-android.png" />
+ *     <figcaption>Surface on Android</figcaption>
+ *   </figure>
+ *   <figure>
+ *     <img class="medium" src="screenshots/surface-ios.png" />
+ *     <figcaption>Surface on iOS</figcaption>
+ *   </figure>
+ * </div>
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Surface, Text } from 'react-native-paper';
+ * import { StyleSheet } from 'react-native';
+ *
+ * const MyComponent = () => (
+ *   <Surface style={styles.surface} elevation={4}>
+ *      <Text>Surface</Text>
+ *   </Surface>
+ * );
+ *
+ * export default MyComponent;
+ *
+ * const styles = StyleSheet.create({
+ *   surface: {
+ *     padding: 8,
+ *     height: 80,
+ *     width: 80,
+ *     alignItems: 'center',
+ *     justifyContent: 'center',
+ *   },
+ * });
+ * ```
+ */
+const Surface = ({ elevation = 1, style, children, testID, ...props }: Props, ref: any) => {
+    const { theme } = useUnistyles();
+    const backgroundColor = (() => {
+        // @ts-ignore
+        return theme.colors.elevation?.[`level${elevation}`];
+    })();
+
+    const { surfaceBackground, sharedStyle, layer0Style, layer1Style } = useMemo(() => {
+        const { position, alignSelf, top, left, right, bottom, borderRadius } = extractProperties(
+            [defaultStyles.root as ViewStyle, style],
+            ['position', 'alignSelf', 'top', 'left', 'right', 'bottom', 'borderRadius'],
+        );
+        const absoluteStyle = { position, alignSelf, top, right, bottom, left };
+
+        return {
+            surfaceBackground: extractProperties(
+                [defaultStyles.root as ViewStyle, style],
+                ['backgroundColor'],
+            ).backgroundColor,
+            sharedStyle: [
+                { backgroundColor, borderRadius },
+                defaultStyles.root,
+                style,
+                {
+                    position: undefined,
+                    alignSelf: undefined,
+                    top: undefined,
+                    left: undefined,
+                    right: undefined,
+                    bottom: undefined,
+                },
+            ],
+            layer0Style: [getStyleForShadowLayer(0, elevation), absoluteStyle, { borderRadius }],
+            layer1Style: [getStyleForShadowLayer(1, elevation), { borderRadius }],
+        };
+    }, [backgroundColor, elevation, style]);
+
+    return (
+        <BackgroundContextWrapper backgroundColor={surfaceBackground}>
+            <View ref={ref} style={layer0Style}>
+                <View style={layer1Style}>
+                    <View {...props} testID={testID} style={sharedStyle}>
+                        {children}
+                    </View>
+                </View>
+            </View>
+        </BackgroundContextWrapper>
+    );
+};
+
+export default memo(forwardRef(Surface));

package/components/Surface/Surface.tsx

@@ -0,0 +1,48 @@
+import { forwardRef, memo, type ReactNode, useMemo } from 'react';
+import { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
+
+import shadow from '../../styles/shadow';
+import type { MD3Elevation } from '../../types/theme';
+import { BackgroundContextWrapper } from './BackgroundContextWrapper';
+import { defaultStyles } from './utils';
+
+export type Props = ViewProps & {
+    /**
+     * Content of the `Surface`.
+     */
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    elevation?: MD3Elevation;
+    backgroundColor?: string;
+    /**
+     * TestID used for testing purposes
+     */
+    testID?: string;
+};
+
+// for Web
+const Surface = (
+    { elevation = 1, style, children, testID, backgroundColor, ...props }: Props,
+    ref: any,
+) => {
+    const { surfaceStyle } = useMemo(() => {
+        return {
+            surfaceStyle: [
+                elevation ? shadow(elevation) : null,
+                defaultStyles.root,
+                style,
+                backgroundColor ? { backgroundColor } : {},
+            ] as StyleProp<ViewStyle>,
+        };
+    }, [backgroundColor, elevation, style]);
+
+    return (
+        <BackgroundContextWrapper backgroundColor={backgroundColor!}>
+            <View ref={ref} {...props} testID={testID} style={surfaceStyle}>
+                {children}
+            </View>
+        </BackgroundContextWrapper>
+    );
+};
+
+export default memo(forwardRef(Surface));

package/components/Surface/index.tsx

@@ -0,0 +1,12 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import SurfaceDefault from './Surface';
+
+registerMoleculesComponents({
+    Surface: SurfaceDefault,
+});
+
+export const Surface = getRegisteredComponentWithFallback('Surface', SurfaceDefault);
+
+export * from './BackgroundContextWrapper';
+export type { Props as SurfaceProps } from './Surface';
+export { defaultStyles as surfaceStyles } from './utils';

package/components/Surface/utils.ts

@@ -0,0 +1,106 @@
+import type { Animated } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { inputRange } from '../../styles/shadow';
+
+const defaultStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        backgroundColor: theme.colors.surface,
+    },
+}));
+
+registerComponentsStyles({
+    Surface: defaultStylesDefault,
+});
+
+export const defaultStyles = getRegisteredMoleculesComponentStyles('Surface');
+
+// TODO - abstract this
+export function extractProperties(
+    _objectsArray: Record<string, any>,
+    propertiesToExtract: string[],
+) {
+    const extracted: Record<string, any> = {};
+
+    const objectsArray = _objectsArray.flat();
+
+    for (let i = objectsArray.length - 1; i >= 0; i--) {
+        const obj = objectsArray[i];
+
+        for (const prop of propertiesToExtract) {
+            if (!obj) continue;
+            if (prop in obj) {
+                // @ts-ignore
+                extracted[prop] = obj[prop];
+            }
+        }
+    }
+
+    return extracted;
+}
+
+const _shadowColor = '#000';
+
+const iOSShadowOutputRanges = [
+    {
+        shadowOpacity: 0.15,
+        height: [0, 1, 2, 4, 6, 8],
+        shadowRadius: [0, 3, 6, 8, 10, 12],
+    },
+    {
+        shadowOpacity: 0.3,
+        height: [0, 1, 1, 1, 2, 4],
+        shadowRadius: [0, 1, 2, 3, 3, 4],
+    },
+];
+
+export const getStyleForAnimatedShadowLayer = (
+    layer: 0 | 1,
+    elevation: Animated.Value,
+    shadowColor = _shadowColor,
+) => {
+    return {
+        shadowColor,
+        shadowOpacity: elevation.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, iOSShadowOutputRanges[layer].shadowOpacity],
+            extrapolate: 'clamp',
+        }),
+        shadowOffset: {
+            width: 0,
+            height: elevation.interpolate({
+                inputRange,
+                outputRange: iOSShadowOutputRanges[layer].height,
+            }),
+        },
+        shadowRadius: elevation.interpolate({
+            inputRange,
+            outputRange: iOSShadowOutputRanges[layer].shadowRadius,
+        }),
+    };
+};
+
+export const getStyleForShadowLayer = (
+    layer: 0 | 1,
+    elevation: number,
+    shadowColor = _shadowColor,
+) => {
+    return {
+        shadowColor,
+        shadowOpacity: elevation ? iOSShadowOutputRanges[layer].shadowOpacity : 0,
+        shadowOffset: {
+            width: 0,
+            height: iOSShadowOutputRanges[layer].height[elevation],
+        },
+        shadowRadius: iOSShadowOutputRanges[layer].shadowRadius[elevation],
+    };
+};
+
+export const getElevationAndroid = (
+    elevation: number,
+    _inputRange: number[],
+    elevationLevel: number[],
+) => {
+    return elevationLevel[elevation];
+};

package/components/Switch/Switch.ios.tsx

@@ -0,0 +1,67 @@
+import { forwardRef, memo } from 'react';
+import {
+    Switch as NativeSwitch,
+    type SwitchProps,
+    type TextStyle,
+    type ViewStyle,
+} from 'react-native';
+
+import { useControlledValue } from '../../hooks';
+import type { IconType } from '../Icon';
+
+export type Props = SwitchProps & {
+    checkedIcon?: string;
+    unCheckedIcon?: string;
+    size?: number;
+    checkedIconType?: IconType;
+    uncheckedIconType?: IconType;
+    thumbStyle?: ViewStyle;
+    thumbContainerStyle?: ViewStyle;
+    switchOverlayStyle?: ViewStyle;
+    iconStyle?: TextStyle;
+};
+
+const Switch = (
+    {
+        trackColor,
+        thumbColor,
+        onValueChange,
+        disabled,
+        value: valueProp,
+        // Accept but ignore these props for API compatibility
+        checkedIcon: _checkedIcon,
+        unCheckedIcon: _unCheckedIcon,
+        size: _size,
+        checkedIconType: _checkedIconType,
+        uncheckedIconType: _uncheckedIconType,
+        thumbStyle: _thumbStyle,
+        thumbContainerStyle: _thumbContainerStyle,
+        switchOverlayStyle: _switchOverlayStyle,
+        iconStyle: _iconStyle,
+        style,
+        ...rest
+    }: Props,
+    ref: any,
+) => {
+    const [value, onChange] = useControlledValue({
+        value: valueProp,
+        onChange: onValueChange as any,
+        defaultValue: !!valueProp,
+        disabled,
+    });
+
+    return (
+        <NativeSwitch
+            ref={ref}
+            value={value}
+            onValueChange={onChange}
+            disabled={disabled}
+            trackColor={trackColor}
+            thumbColor={thumbColor}
+            style={style}
+            {...rest}
+        />
+    );
+};
+
+export default memo(forwardRef(Switch));