@fountain-ui/core 2.0.0-beta.92 → 2.0.0-beta.94

package/src/TextField/index.tsx

@@ -1,2 +1,2 @@
-export { default } from './TextField';
-export type { default as TextFieldProps } from './TextFieldProps';
+export { default } from './LegacyTextField';
+export type { default as TextFieldProps } from './LegacyTextFieldProps';

package/src/TextField/useVariantStyleMap.ts

@@ -0,0 +1,100 @@
+import { useMemo } from 'react';
+import type { FountainUiStyle, Theme } from '@fountain-ui/styles';
+import { typographyOf } from '@fountain-ui/styles';
+import { createFontStyle, useTheme } from '../styles';
+import type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';
+
+interface VariantStyleMap {
+    containerStyle?: FountainUiStyle;
+    inputStyle?: FountainUiStyle;
+    hintStyle?: FountainUiStyle;
+}
+
+function useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {
+    switch (status) {
+        default:
+        case 'default':
+            return {
+                borderColor: theme.palette.border.base,
+                hintColor: theme.palette.text.weak,
+            };
+        case 'success':
+            return {
+                borderColor: theme.palette.status.success,
+                hintColor: theme.palette.status.success,
+            };
+        case 'error':
+            return {
+                borderColor: theme.palette.status.danger,
+                hintColor: theme.palette.status.danger,
+            };
+    }
+}
+
+export default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {
+    const theme = useTheme();
+
+    const {
+        borderColor,
+        hintColor,
+    } = useStatusColor(theme, status);
+
+    return useMemo(() => {
+        switch (variant) {
+            default:
+            case 'default':
+                return {
+                    containerStyle: {
+                        borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,
+                        borderBottomWidth: 1,
+                    },
+                    inputStyle: {
+                        paddingRight: theme.spacing(4),
+                        paddingVertical: theme.spacing(4),
+                        ...createFontStyle(theme, {
+                            selector: (_) => typographyOf({
+                                fontSize: 18,
+                                lineHeight: 27,
+                                fontFamily: 'Pretendard-SemiBold',
+                                letterSpacing: 0,
+                            }),
+                            color: theme.palette.text.strong,
+                        }),
+                    },
+                    hintStyle: {
+                        marginTop: theme.spacing(2),
+                        ...createFontStyle(theme, {
+                            // selector: (typography) => typography.caption1['regular']
+                            color: hintColor,
+                        }),
+                    },
+                };
+            case 'search':
+                return {
+                    containerStyle: {
+                        backgroundColor: theme.palette.surface.supportive,
+                        borderColor: theme.palette.border.base,
+                        borderRadius: theme.shape.radius.md,
+                        borderWidth: 0.5,
+                        paddingLeft: theme.spacing(3),
+                        paddingRight: theme.spacing(0.5),
+                    },
+                    inputStyle: {
+                        paddingBottom: theme.spacing(2.5),
+                        paddingLeft: theme.spacing(2),
+                        paddingRight: theme.spacing(1),
+                        paddingTop: theme.spacing(2.25),
+                        ...createFontStyle(theme, {
+                            selector: (_) => typographyOf({
+                                fontSize: 16,
+                                lineHeight: 19.2,
+                                fontFamily: 'Pretendard-SemiBold',
+                                letterSpacing: -0.16,
+                            }),
+                            color: theme.palette.text.strong,
+                        }),
+                    },
+                };
+        }
+    }, [theme, borderColor, hintColor, variant, isFocused]);
+}

package/src/Toggle/Toggle.tsx

@@ -0,0 +1,113 @@
+import React, { useRef, useEffect } from 'react';
+import { Animated } from 'react-native';
+import { commonColors, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import ButtonBase from '../ButtonBase';
+import ShadowView from '../ShadowView';
+import { css, useTheme } from '../styles';
+import { ExtendedStyle } from '../types';
+import type ToggleProps from './ToggleProps';
+
+type ToggleStyles = NamedStylesStringUnion<'root' | 'toggle'>;
+
+const useStyles: UseStyles<ToggleStyles> = function (): ToggleStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            borderRadius: theme.shape.radius.full,
+            justifyContent: 'center',
+        },
+        toggle: {
+            backgroundColor: commonColors.static.strongInverse,
+            borderRadius: theme.shape.radius.full,
+        },
+    };
+};
+
+const sizeMap = {
+    medium: {
+        containerHeight: 24,
+        containerWidth: 42,
+        paddingHorizontal: 3,
+        toggleSize: 18,
+    },
+};
+
+export default function Toggle(props: ToggleProps) {
+    const {
+        checked = false,
+        onChange,
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const styles = useStyles();
+
+    const theme = useTheme();
+
+    const animation = useRef(new Animated.Value(checked ? 1 : 0)).current;
+
+    const {
+        containerHeight,
+        containerWidth,
+        paddingHorizontal,
+        toggleSize,
+    } = sizeMap['medium'];
+
+    useEffect(() => {
+        Animated.timing(animation, {
+            toValue: checked ? 1 : 0,
+            duration: 150,
+            useNativeDriver: false,
+        }).start();
+    }, [checked]);
+
+    const translateX = animation.interpolate({
+        inputRange: [0, 1],
+        outputRange: [paddingHorizontal, containerWidth - toggleSize - paddingHorizontal],
+    });
+
+    const containerStyle = css([
+        styles.root,
+        {
+            backgroundColor: checked
+                ? theme.palette.fill.accent
+                : theme.palette.fill.weak,
+            height: containerHeight,
+            width: containerWidth,
+        },
+        styleProp,
+    ]);
+
+    const toggleStyle = css([
+        styles.toggle,
+        {
+            height: toggleSize,
+            width: toggleSize,
+        },
+    ]);
+
+    const animatedStyle = {
+        transform: [{ translateX: translateX as unknown }],
+    } as ExtendedStyle;
+
+    const handlePress = () => {
+        onChange?.(!checked);
+    };
+
+    return (
+        <ButtonBase
+            {...otherProps}
+            pressEffect={'none'}
+            onPress={handlePress}
+            style={containerStyle}
+        >
+            <Animated.View style={animatedStyle}>
+                <ShadowView
+                    style={toggleStyle}
+                    variant={400}
+                />
+            </Animated.View>
+        </ButtonBase>
+    );
+};

package/src/Toggle/ToggleProps.ts

@@ -0,0 +1,21 @@
+import type { ButtonBaseProps } from '../ButtonBase';
+import type { OverridableComponentProps } from '../types';
+
+export default interface ToggleProps extends OverridableComponentProps<Omit<ButtonBaseProps, 'children'>, {
+    /**
+     * If `true`, the component is checked.
+     * @default false
+     */
+    checked?: boolean;
+
+    /**
+     * If `true`, the switch is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * Callback fired when the switch is changed.
+     */
+    onChange?: (newChecked: boolean) => void;
+}> {}

package/src/Toggle/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Toggle';
+export type { default as ToggleProps } from './ToggleProps';

package/src/Tooltip/Beaks/Beak.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import type { TooltipPlacement, TooltipSize } from '../TooltipProps';
+import type BeakProps from './BeakProps';
+import HorizontalLargeBeak from './HorizontalLargeBeak';
+import HorizontalSmallBeak from './HorizontalSmallBeak';
+import VerticalLargeBeak from './VerticalLargeBeak';
+import VerticalSmallBeak from './VerticalSmallBeak';
+
+const getBeakComponent = (placement: TooltipPlacement, size: TooltipSize) => {
+    if (placement === 'top' || placement === 'bottom') {
+        if (size === 'small') return {
+            Component: HorizontalSmallBeak,
+            rotate: placement === 'top' ? '180deg' : '0deg',
+        };
+        if (size === 'large') return {
+            Component: HorizontalLargeBeak,
+            rotate: placement === 'top' ? '180deg' : '0deg',
+        };
+    }
+
+    if (placement === 'left' || placement === 'right') {
+        if (size === 'small') return {
+            Component: VerticalSmallBeak,
+            rotate: placement === 'left' ? '180deg' : '0deg',
+        };
+        if (size === 'large') return {
+            Component: VerticalLargeBeak,
+            rotate: placement === 'left' ? '180deg' : '0deg',
+        };
+    }
+
+    return {
+        Component: () => null,
+        rotate: '0deg',
+    };
+};
+
+export default function Beak(props: BeakProps) {
+    const {
+        placement = 'top' as TooltipPlacement,
+        size = 'small' as TooltipSize,
+        ...otherProps
+    } = props;
+
+    const { Component, rotate } = getBeakComponent(placement, size);
+
+    return (
+        <Component
+            {...otherProps}
+            style={{ transform: [{ rotate }] }}
+        />
+    );
+}

package/src/Tooltip/Beaks/BeakProps.ts

@@ -0,0 +1,4 @@
+import type { SvgProps } from 'react-native-svg';
+import type TooltipProps from '../TooltipProps';
+
+export default interface BeakProps extends SvgProps, Pick<TooltipProps, 'placement' | 'size'> {}

package/src/Tooltip/Beaks/HorizontalLargeBeak.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { SvgProps } from 'react-native-svg';
+import { Path, Svg } from 'react-native-svg';
+
+export default function HorizontalLargeBeak(props: SvgProps) {
+    return (
+        <Svg
+            height={5}
+            viewBox={'0 0 13 5'}
+            width={13}
+            {...props}
+        >
+            <Path
+                d="M5.81034 0.656815L1.82931 4.44828C1.45743 4.80245 0.963553 5 0.45 5H12.55C12.0364 5 11.5426 4.80245 11.1707 4.44828L7.18966 0.656815C6.80345 0.288998 6.19655 0.288999 5.81034 0.656815Z"
+            />
+        </Svg>
+    );
+}

package/src/Tooltip/Beaks/HorizontalSmallBeak.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { SvgProps } from 'react-native-svg';
+import { Path, Svg } from 'react-native-svg';
+
+export default function HorizontalSmallBeak(props: SvgProps) {
+    return (
+        <Svg
+            height={4}
+            viewBox={'0 0 11 4'}
+            width={11}
+            {...props}
+        >
+            <Path
+                d="M5.11034 0.656814L2.17931 3.44828C1.80743 3.80245 1.31355 4 0.800001 4H10.8C10.2864 4 9.79257 3.80245 9.42069 3.44828L6.48966 0.656815C6.10345 0.288998 5.49655 0.288998 5.11034 0.656814Z"
+            />
+        </Svg>
+    );
+}

package/src/Tooltip/Beaks/VerticalLargeBeak.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { SvgProps } from 'react-native-svg';
+import { Path, Svg } from 'react-native-svg';
+
+export default function VerticalLargeBeak(props: SvgProps) {
+    return (
+        <Svg
+            height={28}
+            viewBox={'0 0 5 28'}
+            width={5}
+            {...props}
+        >
+            <Path
+                d="M0.656815 13.3103L4.44828 9.32931C4.80245 8.95743 5 8.46355 5 7.95V20.05C5 19.5364 4.80245 19.0426 4.44828 18.6707L0.656815 14.6897C0.288998 14.3034 0.288998 13.6966 0.656815 13.3103Z"
+            />
+        </Svg>
+    );
+}

package/src/Tooltip/Beaks/VerticalSmallBeak.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { SvgProps } from 'react-native-svg';
+import { Path, Svg } from 'react-native-svg';
+
+export default function VerticalSmallBeak(props: SvgProps) {
+    return (
+        <Svg
+            height={11}
+            viewBox={'0 0 4 11'}
+            width={4}
+            {...props}
+        >
+            <Path
+                d="M0.656815 4.81034L3.44828 1.87931C3.80245 1.50742 4 1.01355 4 0.499994L4 10.5C4 9.98644 3.80245 9.49257 3.44828 9.12068L0.656816 6.18965C0.288999 5.80344 0.288999 5.19655 0.656815 4.81034Z"
+            />
+        </Svg>
+    );
+}

package/src/Tooltip/Beaks/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Beak';
+export type { default as BeakProps } from './BeakProps';

package/src/Tooltip/LegacyTooltip.tsx

@@ -0,0 +1,167 @@
+import React, { useEffect, useState } from 'react';
+import { Platform, Text, View, ViewProps } from 'react-native';
+import type { WithTimingConfig } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { rgb } from '@fountain-ui/utils';
+import ButtonBase from '../ButtonBase';
+import { createFontStyle, css, useTheme } from '../styles';
+import { Close as CloseIcon } from '../internal/icons';
+import type TooltipProps from './LegacyTooltipProps';
+import UpArrow from './UpArrow';
+
+const DEFAULT_OPACITY = 0.8;
+const INITIAL_LAYOUT = { width: 0, height: 0, x: 0, y: 0 };
+
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };
+
+export default function Tooltip(props: TooltipProps) {
+    const {
+        arrowLayout,
+        children,
+        initialLayout = INITIAL_LAYOUT,
+        left,
+        onClose,
+        placement = 'top',
+        right,
+        numberOfTitleLines = 1,
+        style,
+        title,
+        tooltipStyle,
+        verticalOffset = 4,
+        visible = false,
+    } = props;
+
+    const theme = useTheme();
+
+    const [layout, setLayout] = useState(initialLayout);
+
+    const scale = useSharedValue(0);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: scale.value }],
+    }), []);
+
+    const [r, g, b] = rgb(theme.palette.primary.main);
+
+    const totalVerticalOffset = -(layout.height + verticalOffset);
+    const tooltipLayoutStyle: ViewProps['style'] = {
+        alignItems: arrowLayout?.placement === 'left'
+            ? 'flex-start'
+            : arrowLayout?.placement === 'right'
+                ? 'flex-end'
+                : 'center',
+        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,
+        left,
+        position: 'absolute',
+        right,
+        top: placement === 'top' ? totalVerticalOffset : undefined,
+        zIndex: theme.zIndex.tooltip,
+        height: visible ? undefined : 0,
+        overflow: visible ? undefined : 'hidden',
+        ...Platform.select({
+            web: {
+                display: visible ? 'flex' : 'none',
+            },
+            default: {},
+        }),
+    };
+
+    useEffect(() => {
+        const nextScaleValue = visible ? 1 : 0;
+
+        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);
+    }, [visible]);
+
+    const touchableStyle: ViewProps['style'] = {
+        alignItems: 'center',
+        backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,
+        borderRadius: theme.shape.roundness,
+        flexDirection: 'row',
+        padding: theme.spacing(2),
+        width: '100%',
+    };
+
+    const fontStyle = createFontStyle(theme, {
+        selector: (typo) => typo.caption2,
+        color: theme.palette.primary.contrastTextColor,
+    });
+
+    const textStyle = css([
+        fontStyle,
+        {
+            marginRight: theme.spacing(2),
+            flexShrink: 1,
+        },
+    ]);
+
+    const arrowStyle = css({
+        ...(arrowLayout && {
+            [arrowLayout.placement]: arrowLayout.offset,
+        }),
+    });
+
+    const buttonElem = (
+        <ButtonBase
+            pressEffect={'none'}
+            onPress={onClose}
+        >
+            <View style={css(touchableStyle)}>
+                <Text
+                    // TODO: Should we provide text prop customization?
+                    numberOfLines={numberOfTitleLines}
+                    style={textStyle}
+                >
+                    {title}
+                </Text>
+                <CloseIcon
+                    fill={theme.palette.primary.contrastTextColor}
+                    width={20}
+                    height={20}
+                />
+            </View>
+        </ButtonBase>
+    );
+
+    const arrowElem = (
+        <View style={arrowStyle}>
+            <UpArrow
+                upsideDown={placement === 'top'}
+                fill={theme.palette.primary.main}
+                opacity={DEFAULT_OPACITY}
+            />
+        </View>
+    );
+
+    return (
+        <View style={style}>
+            {children}
+
+            <Animated.View
+                onLayout={(event) => {
+                    if (event.nativeEvent.layout.height === 0) {
+                        return;
+                    }
+
+                    setLayout(event.nativeEvent.layout);
+                }}
+                style={[
+                    animatedStyle,
+                    tooltipLayoutStyle,
+                    tooltipStyle,
+                ]}
+            >
+                {placement === 'top' ? (
+                    <React.Fragment>
+                        {buttonElem}
+                        {arrowElem}
+                    </React.Fragment>
+                ) : (
+                    <React.Fragment>
+                        {arrowElem}
+                        {buttonElem}
+                    </React.Fragment>
+                )}
+            </Animated.View>
+        </View>
+    );
+};

package/src/Tooltip/LegacyTooltipProps.ts

@@ -0,0 +1,86 @@
+import React from 'react';
+import type { TextProps, ViewProps } from 'react-native';
+import type { ComponentProps } from '../types';
+import type { ButtonProps } from '../Button';
+
+export type TooltipPlacement = 'top' | 'bottom';
+
+export type TooltipArrowPlacement = 'left' | 'right';
+
+export type TooltipInitialLayout = {
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+};
+
+export default interface TooltipProps extends ComponentProps<{
+    /**
+     * Tooltip reference element.
+     */
+    children: React.ReactNode;
+
+    /**
+     * Left position relative to reference element.
+     */
+    left?: number;
+
+    /**
+     * Callback fired when the component requests to be closed.
+     */
+    onClose?: () => void;
+
+    /**
+     * Tooltip placement.
+     * @default 'top'
+     */
+    placement?: TooltipPlacement;
+
+    /**
+     * Right position relative to reference element.
+     */
+    right?: number;
+
+    /**
+     * Tooltip title.
+     */
+    title: ButtonProps['children'];
+
+    /**
+     * Additional style for tooltip wrapper.
+     */
+    tooltipStyle?: ViewProps['style'];
+
+    /**
+     * The additional amount to vertically shift.
+     * @default 4
+     */
+    verticalOffset?: number;
+
+    /**
+     * If `true`, the tooltip is shown.
+     * @default false
+     */
+    visible?: boolean;
+
+    /**
+     * Tooltip arrow layout.
+     * If 'undefined', the arrow will be centered on tooltip.
+     */
+    arrowLayout?: {
+        placement: TooltipArrowPlacement;
+        offset: number;
+    }
+
+    /**
+     * number of tooltip's title lines
+     * @default 1
+     */
+    numberOfTitleLines?: TextProps['numberOfLines'];
+
+    /**
+     * position of tooltip before onLayout call
+     * @default  { height: 0, width: 0 , x: 0, y: 0}
+     */
+    initialLayout?: TooltipInitialLayout;
+}> {}