react-native-molecules 0.5.0-beta.0

package/components/ActivityIndicator/AnimatedSpinner.tsx

@@ -0,0 +1,121 @@
+import { memo, useMemo } from 'react';
+import { Animated, Easing, type ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { tokenStylesParser } from '../../utils/tokenStylesParser';
+
+const AnimatedSpinner = ({
+    index,
+    size,
+    color,
+    timer,
+    duration,
+    style,
+}: {
+    index: number;
+    size: number;
+    timer: Animated.Value;
+    duration: number;
+    color: string | undefined;
+    style: ViewStyle;
+}) => {
+    const { containerStyle, layer } = useMemo(
+        () => ({
+            containerStyle: {
+                width: size,
+                height: size / 2,
+                overflow: 'hidden' as const,
+            },
+            layer: {
+                ...StyleSheet.absoluteFillObject,
+
+                justifyContent: 'center',
+                alignItems: 'center',
+            } as ViewStyle,
+        }),
+        [size],
+    );
+    const offsetContainerStyles = useMemo(() => {
+        const offsetStyle = index ? { top: size / 2 } : null;
+
+        return [containerStyle, offsetStyle];
+    }, [containerStyle, index, size]);
+
+    const frames = (60 * duration) / 1000;
+    const easing = Easing.bezier(0.4, 0.0, 0.7, 1.0);
+    const inputRange = useMemo(
+        () => Array.from(new Array(frames), (_, frameIndex) => frameIndex / (frames - 1)),
+        [frames],
+    );
+    const outputRange = useMemo(
+        () =>
+            Array.from(new Array(frames), (_, frameIndex) => {
+                let progress = (2 * frameIndex) / (frames - 1);
+                const rotation = index ? +(360 - 15) : -(180 - 15);
+
+                if (progress > 1.0) {
+                    progress = 2.0 - progress;
+                }
+
+                const direction = index ? -1 : +1;
+
+                return `${direction * (180 - 30) * easing(progress) + rotation}deg`;
+            }),
+        [easing, frames, index],
+    );
+
+    const layerStyle = {
+        width: size,
+        height: size,
+        transform: [
+            {
+                rotate: timer.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [`${0 + 30 + 15}deg`, `${2 * 360 + 30 + 15}deg`],
+                }),
+            },
+        ],
+    };
+
+    const viewportStyle = {
+        width: size,
+        height: size,
+        transform: [
+            {
+                translateY: index ? -size / 2 : 0,
+            },
+            {
+                rotate: timer.interpolate({ inputRange, outputRange }),
+            },
+        ],
+    };
+
+    const lineStyle = {
+        width: size,
+        height: size,
+        borderWidth: size / 10,
+        borderRadius: size / 2,
+    };
+
+    return (
+        <Animated.View style={layer}>
+            <Animated.View style={layerStyle}>
+                <Animated.View style={offsetContainerStyles} collapsable={false}>
+                    <Animated.View style={viewportStyle}>
+                        <Animated.View style={containerStyle} collapsable={false}>
+                            <Animated.View
+                                style={[
+                                    style,
+                                    tokenStylesParser.getColor(color, 'borderColor'),
+                                    lineStyle,
+                                ]}
+                            />
+                        </Animated.View>
+                    </Animated.View>
+                </Animated.View>
+            </Animated.View>
+        </Animated.View>
+    );
+};
+
+export default memo(AnimatedSpinner);

package/components/ActivityIndicator/index.tsx

@@ -0,0 +1,17 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import ActivityIndicatorDefault from './ActivityIndicator';
+
+registerMoleculesComponents({
+    ActivityIndicator: ActivityIndicatorDefault,
+});
+
+export const ActivityIndicator = getRegisteredComponentWithFallback(
+    'ActivityIndicator',
+    ActivityIndicatorDefault,
+);
+
+export {
+    type Props as ActivityIndicatorProps,
+    activityIndicatorStyles,
+    activityIndicatorStylesDefault,
+} from './ActivityIndicator';

package/components/Appbar/AppbarActions.tsx

@@ -0,0 +1,13 @@
+import { memo } from 'react';
+
+import { IconButton, type IconButtonProps } from '../IconButton';
+
+export type Props = Omit<IconButtonProps, 'ref'> & {};
+
+const AppbarActions = memo(({ size = 24, ...rest }: Props) => {
+    return <IconButton size={size} {...rest} />;
+});
+
+AppbarActions.displayName = 'Appbar_Actions';
+
+export default AppbarActions;

package/components/Appbar/AppbarBase.tsx

@@ -0,0 +1,60 @@
+import { createContext, memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { useSubcomponents } from '../../hooks';
+import { Surface } from '../Surface';
+import type { AppbarBaseProps, AppbarType } from './types';
+import { appbarBaseStyles } from './utils';
+
+const AppbarBase = ({
+    _type = 'center-aligned',
+    elevation = 0,
+    children,
+    style,
+    innerContainerStyle: innerContainerStyleProp,
+    scrolling = false,
+    ...rest
+}: AppbarBaseProps) => {
+    const { containerStyle, innerContainerStyle } = useMemo(() => {
+        return {
+            containerStyle: [
+                scrolling ? { backgroundColor: 'colors.surfaceVariant' } : {},
+                appbarBaseStyles.root,
+                style,
+            ],
+            innerContainerStyle: [appbarBaseStyles.innerContainer, innerContainerStyleProp],
+        };
+    }, [innerContainerStyleProp, scrolling, style]);
+
+    const { Appbar_Left, Appbar_Right, Appbar_Title } = useSubcomponents({
+        children,
+        allowedChildren: ['Appbar_Left', 'Appbar_Right', 'Appbar_Title'],
+    });
+
+    const contextValue = useMemo(() => ({ type: _type }), [_type]);
+
+    return (
+        <Surface elevation={elevation} style={containerStyle} {...rest}>
+            <AppbarContext.Provider value={contextValue}>
+                <View style={innerContainerStyle}>
+                    {Appbar_Left[0]}
+                    <>
+                        {_type === 'center-aligned' || _type === 'small' ? (
+                            Appbar_Title[0]
+                        ) : (
+                            <View />
+                        )}
+                    </>
+                    {Appbar_Right[0]}
+                </View>
+                <>{(_type === 'medium' || _type === 'large') && Appbar_Title[0]}</>
+            </AppbarContext.Provider>
+        </Surface>
+    );
+};
+
+export const AppbarContext = createContext<{ type: AppbarType }>({
+    type: 'center-aligned',
+});
+
+export default memo(AppbarBase);

package/components/Appbar/AppbarCenterAligned.tsx

@@ -0,0 +1,13 @@
+import { memo, useMemo } from 'react';
+
+import { default as AppbarBase } from './AppbarBase';
+import type { AppbarProps } from './types';
+import { appbarCenterAlignedStyles } from './utils';
+
+const AppbarCenterAligned = ({ style, ...rest }: AppbarProps) => {
+    const componentStyles = useMemo(() => [appbarCenterAlignedStyles.root, style], [style]);
+
+    return <AppbarBase _type="center-aligned" style={componentStyles} {...rest} />;
+};
+
+export default memo(AppbarCenterAligned);

package/components/Appbar/AppbarLarge.tsx

@@ -0,0 +1,13 @@
+import { memo, useMemo } from 'react';
+
+import { default as AppbarBase } from './AppbarBase';
+import type { AppbarProps } from './types';
+import { appbarLargeStyles } from './utils';
+
+const AppbarLarge = ({ style, ...rest }: AppbarProps) => {
+    const componentStyles = useMemo(() => [appbarLargeStyles.root, style], [style]);
+
+    return <AppbarBase _type="large" style={componentStyles} {...rest} />;
+};
+
+export default memo(AppbarLarge);

package/components/Appbar/AppbarLeft.tsx

@@ -0,0 +1,26 @@
+import { memo, type ReactElement, useContext } from 'react';
+import { View, type ViewProps } from 'react-native';
+
+import { AppbarContext } from './AppbarBase';
+import { appbarLeft } from './utils';
+
+export type Props = Omit<ViewProps, 'children'> & {
+    children: ReactElement;
+};
+
+const AppbarLeft = memo(({ children, style, ...rest }: Props) => {
+    const { type } = useContext(AppbarContext);
+
+    appbarLeft.useVariants({
+        size: type,
+    });
+    return (
+        <View {...rest} style={[appbarLeft.root, style]}>
+            {children}
+        </View>
+    );
+});
+
+AppbarLeft.displayName = 'Appbar_Left';
+
+export default AppbarLeft;

package/components/Appbar/AppbarMedium.tsx

@@ -0,0 +1,13 @@
+import { memo, useMemo } from 'react';
+
+import { default as AppbarBase } from './AppbarBase';
+import type { AppbarProps } from './types';
+import { appbarMediumStyles } from './utils';
+
+const AppbarMedium = ({ style, ...rest }: AppbarProps) => {
+    const componentStyles = useMemo(() => [appbarMediumStyles.root, style], [style]);
+
+    return <AppbarBase _type="medium" style={componentStyles} {...rest} />;
+};
+
+export default memo(AppbarMedium);

package/components/Appbar/AppbarRight.tsx

@@ -0,0 +1,40 @@
+import { Children, cloneElement, memo, type ReactElement, useMemo } from 'react';
+import { View, type ViewProps } from 'react-native';
+
+import { appbarRight } from './utils';
+
+export type Props = Omit<ViewProps, 'children'> & {
+    children: ReactElement | ReactElement[];
+    /** number or design token
+     * */
+    spacing?: number | string;
+};
+
+const AppbarRight = memo(({ children, spacing, style, ...rest }: Props) => {
+    const content = useMemo(
+        () =>
+            Children.map(children, child => {
+                return cloneElement(child, {
+                    // @ts-expect-error // TODO: fix this
+                    style: [
+                        {
+                            marginLeft: spacing,
+                        },
+                        // @ts-expect-error // TODO: fix this
+                        child.props?.style,
+                    ],
+                });
+            }),
+        [children, spacing],
+    );
+
+    return (
+        <View {...rest} style={[appbarRight.root, style]}>
+            {content}
+        </View>
+    );
+});
+
+AppbarRight.displayName = 'Appbar_Right';
+
+export default AppbarRight;

package/components/Appbar/AppbarSmall.tsx

@@ -0,0 +1,13 @@
+import { memo, useMemo } from 'react';
+
+import { default as AppbarBase } from './AppbarBase';
+import type { AppbarProps } from './types';
+import { appbarSmallStyles } from './utils';
+
+const AppbarSmall = ({ style, ...rest }: AppbarProps) => {
+    const componentStyles = useMemo(() => [appbarSmallStyles.root, style], [style]);
+
+    return <AppbarBase _type="small" style={componentStyles} {...rest} />;
+};
+
+export default memo(AppbarSmall);

package/components/Appbar/AppbarTitle.tsx

@@ -0,0 +1,49 @@
+import { type ComponentType, memo, useContext } from 'react';
+import type { TextProps } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
+
+import { AppbarContext } from './AppbarBase';
+import { appbarTitle } from './utils';
+
+export type Props = TextProps & {
+    size?: 'sm' | 'md' | 'lg';
+    Wrapper?: ComponentType<any>;
+};
+
+const AppbarTitle = memo(({ style, children, Wrapper: WrapperProp, ...rest }: Props) => {
+    const Wrapper = WrapperProp ?? Text;
+
+    const { type } = useContext(AppbarContext);
+
+    appbarTitle.useVariants({
+        size: type === 'large' ? 'lg' : type === 'medium' ? 'md' : 'sm',
+    });
+
+    return (
+        <Wrapper
+            style={[styles[type], appbarTitle.root, style]}
+            accessibilityRole="header"
+            {...rest}>
+            {children}
+        </Wrapper>
+    );
+});
+
+const styles = StyleSheet.create({
+    'center-aligned': {
+        justifyContent: 'center',
+    },
+    small: {
+        justifyContent: 'flex-start',
+    },
+    medium: {
+        alignItems: 'flex-end',
+    },
+    large: {
+        alignItems: 'flex-end',
+    },
+});
+
+AppbarTitle.displayName = 'Appbar_Title';
+
+export default AppbarTitle;

package/components/Appbar/index.tsx

@@ -0,0 +1,46 @@
+import type { ComponentType } from 'react';
+
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import AppbarActions from './AppbarActions';
+import AppbarBase from './AppbarBase';
+import AppbarCenterAligned from './AppbarCenterAligned';
+import AppbarLarge from './AppbarLarge';
+import AppbarLeft from './AppbarLeft';
+import AppbarMedium from './AppbarMedium';
+import AppbarRight from './AppbarRight';
+import AppbarSmall from './AppbarSmall';
+import AppbarTitle from './AppbarTitle';
+import type { AppbarProps } from './types';
+
+export const AppbarDefault = Object.assign(AppbarBase as ComponentType<AppbarProps>, {
+    Small: AppbarSmall,
+    CenterAligned: AppbarCenterAligned,
+    Medium: AppbarMedium,
+    Large: AppbarLarge,
+
+    Left: AppbarLeft,
+    Right: AppbarRight,
+    Title: AppbarTitle,
+    Actions: AppbarActions,
+});
+registerMoleculesComponents({
+    Appbar: AppbarDefault,
+});
+
+export const Appbar = getRegisteredComponentWithFallback('Appbar', AppbarDefault);
+
+export type { Props as AppbarActionsProps } from './AppbarActions';
+export type { Props as AppbarLeftProps } from './AppbarLeft';
+export type { Props as AppbarRightProps } from './AppbarRight';
+export type { Props as AppbarTitleProps } from './AppbarTitle';
+export type { AppbarProps } from './types';
+export {
+    appbarBaseStyles,
+    appbarCenterAlignedStyles,
+    appbarLargeStyles,
+    appbarLeft,
+    appbarMediumStyles,
+    appbarRight,
+    appbarSmallStyles,
+    appbarTitle,
+} from './utils';

package/components/Appbar/types.ts

@@ -0,0 +1,19 @@
+import type { ReactElement } from 'react';
+import type { ViewStyle } from 'react-native';
+
+import type { MD3Elevation } from '../../types/theme';
+import type { SurfaceProps } from '../Surface';
+
+export type AppbarType = 'center-aligned' | 'small' | 'medium' | 'large';
+
+export type AppbarBaseProps = Omit<SurfaceProps, 'children' | 'elevation' | 'ref'> & {
+    _type?: AppbarType;
+
+    innerContainerStyle?: ViewStyle;
+    children: ReactElement | ReactElement[];
+
+    scrolling?: boolean;
+    elevation?: MD3Elevation;
+};
+
+export type AppbarProps = Omit<AppbarBaseProps, '_type'>;

package/components/Appbar/utils.ts

@@ -0,0 +1,127 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const appbarBaseStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        paddingHorizontal: theme.spacings['4'],
+        backgroundColor: theme.colors.surface,
+        flex: 1,
+        minHeight: 64,
+    },
+
+    innerContainer: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+}));
+
+const appbarCenterAlignedStylesDefault = StyleSheet.create({
+    root: { minHeight: 64 },
+});
+
+const appbarSmallStylesDefault = StyleSheet.create({
+    root: { minHeight: 64 },
+});
+
+const appbarMediumStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        paddingHorizontal: theme.spacings['4'],
+        paddingVertical: theme.spacings['5'],
+        minHeight: 112,
+    },
+
+    innerContainer: {
+        marginBottom: theme.spacings['6'],
+    },
+}));
+
+const appbarLargeStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        paddingHorizontal: theme.spacings['4'],
+        paddingVertical: theme.spacings['5'],
+        minHeight: 152,
+    },
+
+    innerContainer: {
+        marginBottom: theme.spacings['6'],
+    },
+}));
+
+const appbarTitleDefault = StyleSheet.create(theme => ({
+    root: {
+        display: 'flex',
+        flex: 1,
+        color: theme.colors.onSurface,
+
+        variants: {
+            size: {
+                sm: {
+                    lineHeight: theme.typescale.titleLarge.lineHeight,
+                    fontSize: theme.typescale.titleLarge.fontSize,
+                    fontWeight: theme.typescale.titleLarge.fontWeight,
+                },
+                md: {
+                    lineHeight: theme.typescale.headlineSmall.lineHeight,
+                    fontSize: theme.typescale.headlineSmall.fontSize,
+                    fontWeight: theme.typescale.headlineSmall.fontWeight,
+                },
+                lg: {
+                    lineHeight: theme.typescale.headlineMedium.lineHeight,
+                    fontSize: theme.typescale.headlineMedium.fontSize,
+                    fontWeight: theme.typescale.headlineMedium.fontWeight,
+                },
+            },
+        },
+    },
+}));
+
+const appbarRightDefault = StyleSheet.create(theme => ({
+    root: {
+        spacing: theme.spacings['6'],
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+}));
+
+const appbarLeftDefault = StyleSheet.create(theme => ({
+    root: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginRight: theme.spacings['6'],
+
+        variants: {
+            size: {
+                small: {
+                    marginRight: theme.spacings['4'],
+                },
+                'center-aligned': {},
+                medium: {},
+                large: {},
+            },
+        },
+    },
+}));
+
+registerComponentsStyles({
+    Appbar: appbarBaseStylesDefault,
+    Appbar_CenterAligned: appbarCenterAlignedStylesDefault,
+    Appbar_Small: appbarSmallStylesDefault,
+    Appbar_Medium: appbarMediumStylesDefault,
+    Appbar_Large: appbarLargeStylesDefault,
+    Appbar_Left: appbarLeftDefault,
+    Appbar_Right: appbarRightDefault,
+    Appbar_Title: appbarTitleDefault,
+});
+
+export const appbarBaseStyles = getRegisteredMoleculesComponentStyles('Appbar');
+export const appbarCenterAlignedStyles =
+    getRegisteredMoleculesComponentStyles('Appbar_CenterAligned');
+export const appbarSmallStyles = getRegisteredMoleculesComponentStyles('Appbar_Small');
+export const appbarMediumStyles = getRegisteredMoleculesComponentStyles('Appbar_Medium');
+export const appbarLargeStyles = getRegisteredMoleculesComponentStyles('Appbar_Large');
+export const appbarTitle = getRegisteredMoleculesComponentStyles('Appbar_Title');
+export const appbarRight = getRegisteredMoleculesComponentStyles('Appbar_Right');
+export const appbarLeft = getRegisteredMoleculesComponentStyles('Appbar_Left');