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

package/src/Tooltip/Tooltip.tsx

@@ -2,28 +2,79 @@ 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 type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { typographyOf } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase';
 import { createFontStyle, css, useTheme } from '../styles';
-import { Close as CloseIcon } from '../internal/icons';
 import type TooltipProps from './TooltipProps';
-import UpArrow from './UpArrow';
+import type { TooltipBeakLayout, TooltipPlacement, TooltipSize } from './TooltipProps';
+import Beak from './Beaks';
+
+const DEFAULT_BEAK_LAYOUT: TooltipBeakLayout = {
+    offset: 0,
+    placement: 'middle',
+};
 
-const DEFAULT_OPACITY = 0.8;
 const INITIAL_LAYOUT = { width: 0, height: 0, x: 0, y: 0 };
 
 const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };
 
+type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+
+const getFlexDirection = (placement: TooltipPlacement): FlexDirection => {
+    switch (placement) {
+        case 'right':
+            return 'row-reverse';
+        case 'bottom':
+            return 'column-reverse';
+        case 'left':
+            return 'row';
+        case 'top':
+        default:
+            return 'column';
+    }
+};
+
+type TooltipStyles = NamedStylesStringUnion<'root' | 'content' | 'small' | 'large'>;
+
+const useStyles: UseStyles<TooltipStyles> = function (): TooltipStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            position: 'absolute',
+            zIndex: theme.zIndex.tooltip,
+        },
+        content: {
+            backgroundColor: theme.palette.fill.base,
+            paddingHorizontal: theme.spacing(2),
+            paddingVertical: theme.spacing(1.5),
+        },
+        small: {
+            borderRadius: theme.shape.radius.sm,
+            paddingHorizontal: theme.spacing(2),
+            paddingVertical: theme.spacing(1.5),
+        },
+        large: {
+            borderRadius: 5,
+            paddingBottom: theme.spacing(2.5),
+            paddingHorizontal: theme.spacing(4),
+            paddingTop: theme.spacing(2),
+        },
+    };
+};
+
 export default function Tooltip(props: TooltipProps) {
     const {
-        arrowLayout,
+        beakLayout = DEFAULT_BEAK_LAYOUT,
         children,
         initialLayout = INITIAL_LAYOUT,
         left,
         onClose,
-        placement = 'top',
+        placement = 'top' as TooltipPlacement,
         right,
         numberOfTitleLines = 1,
+        size = 'small' as TooltipSize,
         style,
         title,
         tooltipStyle,
@@ -31,8 +82,15 @@ export default function Tooltip(props: TooltipProps) {
         visible = false,
     } = props;
 
+    const {
+        offset: beakOffset,
+        placement: beakPlacement,
+    } = beakLayout;
+
     const theme = useTheme();
 
+    const styles = useStyles();
+
     const [layout, setLayout] = useState(initialLayout);
 
     const scale = useSharedValue(0);
@@ -41,92 +99,89 @@ export default function Tooltip(props: TooltipProps) {
         transform: [{ scale: scale.value }],
     }), []);
 
-    const [r, g, b] = rgb(theme.palette.primary.main);
+    const flexDirection = getFlexDirection(placement);
 
-    const totalVerticalOffset = -(layout.height + verticalOffset);
+    const isVerticalPlacement = placement === 'top' || placement === 'bottom';
+
+    const totalOffset = -((isVerticalPlacement ? layout.height : layout.width) + verticalOffset);
     const tooltipLayoutStyle: ViewProps['style'] = {
-        alignItems: arrowLayout?.placement === 'left'
+        alignItems: beakPlacement === 'start'
             ? 'flex-start'
-            : arrowLayout?.placement === 'right'
+            : beakPlacement === 'end'
                 ? 'flex-end'
                 : 'center',
-        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,
+        flexDirection,
         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',
-           },
+            web: {
+                display: visible ? 'flex' : 'none',
+            },
             default: {},
         }),
+        [placement]: totalOffset,
     };
 
+    const contentStyle = css([
+        styles.content,
+        styles[size],
+        isVerticalPlacement
+            ? { width: '100%' }
+            : { flexGrow: 1, flexShrink: 1 },
+    ]);
+
     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,
+        selector: (typo) => size === 'large'
+            ? typographyOf({
+                fontSize: 13,
+                lineHeight: 19.5,
+                fontFamily: 'Pretendard-Regular',
+                letterSpacing: 0,
+            })
+            // TODO: change caption2.
+            : typo.caption3.regular,
+        color: theme.palette.text.strongInverse,
     });
 
     const textStyle = css([
         fontStyle,
-        {
-            marginRight: theme.spacing(2),
-            flexShrink: 1,
-        },
+        { flexShrink: 1 },
     ]);
 
-    const arrowStyle = css({
-        ...(arrowLayout && {
-            [arrowLayout.placement]: arrowLayout.offset,
-        }),
+    const beakStyle = css({
+        transform: [isVerticalPlacement ? { translateX: beakOffset } : { translateY: beakOffset }],
     });
 
     const buttonElem = (
         <ButtonBase
             pressEffect={'none'}
             onPress={onClose}
+            style={contentStyle}
         >
-            <View style={css(touchableStyle)}>
-                <Text
-                    children={title}
-                    // TODO: Should we provide text prop customization?
-                    numberOfLines={numberOfTitleLines}
-                    style={textStyle}
-                />
-                <CloseIcon
-                    fill={theme.palette.primary.contrastTextColor}
-                    width={20}
-                    height={20}
-                />
-            </View>
+            <Text
+                // TODO: Should we provide text prop customization?
+                numberOfLines={numberOfTitleLines}
+                style={textStyle}
+            >
+                {title}
+            </Text>
         </ButtonBase>
     );
 
-    const arrowElem = (
-        <View style={arrowStyle}>
-            <UpArrow
-                upsideDown={placement === 'top'}
-                fill={theme.palette.primary.main}
-                opacity={DEFAULT_OPACITY}
+    const beakElem = (
+        <View style={beakStyle}>
+            <Beak
+                fill={theme.palette.fill.base}
+                placement={placement}
+                size={size}
             />
         </View>
     );
@@ -144,22 +199,15 @@ export default function Tooltip(props: TooltipProps) {
                     setLayout(event.nativeEvent.layout);
                 }}
                 style={[
+                    styles.root,
                     animatedStyle,
                     tooltipLayoutStyle,
                     tooltipStyle,
                 ]}
             >
-                {placement === 'top' ? (
-                    <React.Fragment>
-                        {buttonElem}
-                        {arrowElem}
-                    </React.Fragment>
-                ) : (
-                    <React.Fragment>
-                        {arrowElem}
-                        {buttonElem}
-                    </React.Fragment>
-                )}
+                {buttonElem}
+
+                {beakElem}
             </Animated.View>
         </View>
     );

package/src/Tooltip/TooltipProps.ts

@@ -3,11 +3,26 @@ import type { TextProps, ViewProps } from 'react-native';
 import type { ComponentProps } from '../types';
 import type { ButtonProps } from '../Button';
 
-export type TooltipPlacement = 'top' | 'bottom';
+export const tooltipPlacements = ['top', 'bottom', 'left', 'right'] as const;
+export type TooltipPlacement = typeof tooltipPlacements[number];
 
-export type TooltipArrowPlacement = 'left' | 'right';
+export const tooltipSizes = ['small', 'large'] as const;
+export type TooltipSize = typeof tooltipSizes[number];
 
-export type TooltipInitialLayout = { height: number, width: number, x: number, y: number };
+export const tooltipBeakPlacements = ['start', 'middle', 'end'] as const;
+export type TooltipBeakPlacement = typeof tooltipBeakPlacements[number];
+
+export type TooltipBeakLayout = {
+    placement: TooltipBeakPlacement;
+    offset: number;
+};
+
+export type TooltipInitialLayout = {
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+};
 
 export default interface TooltipProps extends ComponentProps<{
     /**
@@ -59,13 +74,10 @@ export default interface TooltipProps extends ComponentProps<{
     visible?: boolean;
 
     /**
-     * Tooltip arrow layout.
-     * If 'undefined', the arrow will be centered on tooltip.
+     * Tooltip beak layout.
+     * If 'undefined', the beak will be centered on tooltip.
      */
-    arrowLayout?: {
-        placement: TooltipArrowPlacement;
-        offset: number;
-    }
+    beakLayout?: TooltipBeakLayout;
 
     /**
      * number of tooltip's title lines
@@ -77,5 +89,11 @@ export default interface TooltipProps extends ComponentProps<{
      * position of tooltip before onLayout call
      * @default  { height: 0, width: 0 , x: 0, y: 0}
      */
-    initialLayout: TooltipInitialLayout;
+    initialLayout?: TooltipInitialLayout;
+
+    /**
+     * Determines the size of the tooltip.
+     * @default  'small'
+     */
+    size?: TooltipSize;
 }> {}

package/src/Tooltip/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Tooltip';
-export type { default as TooltipProps } from './TooltipProps';
+export { default } from './LegacyTooltip';
+export type { default as TooltipProps } from './LegacyTooltipProps';

package/src/Typography/LegacyTypography.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Platform, Text, TextStyle } from 'react-native';
+import type { Theme } from '@fountain-ui/styles';
+import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
+import TypographyProps, { AccessibilityMap, TypographyColor } from './LegacyTypographyProps';
+
+const accessibilityMap: AccessibilityMap = {
+    h1: { accessibilityRole: 'header', 'area-level': 1 },
+    h2: { accessibilityRole: 'header', 'area-level': 2 },
+    h3: { accessibilityRole: 'header', 'area-level': 3 },
+    subtitle1: { accessibilityRole: 'header', 'area-level': 6 },
+    subtitle2: { accessibilityRole: 'header', 'area-level': 6 },
+    body1: { accessibilityRole: 'text' },
+    body2: { accessibilityRole: 'text' },
+    caption1: { accessibilityRole: 'text' },
+    caption2: { accessibilityRole: 'text' },
+    flag: { accessibilityRole: 'text' },
+};
+
+function selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {
+    const palette = theme.palette.text;
+
+    switch (colorProp) {
+        case 'inherit':
+            return Platform.OS === 'web' ? 'inherit' : undefined;
+        case 'textPrimary':
+            return palette.primary;
+        case 'textSecondary':
+            return palette.secondary;
+        case 'textAccent':
+            return palette.accent;
+        case 'textHint':
+            return palette.hint;
+    }
+
+    return theme.palette[colorProp]?.main;
+}
+
+const styles = StyleSheet.create({
+    root: {
+        flexShrink: 1,
+        ...(Platform.OS === 'web' ? { maxWidth: '100%' } : {}),
+    },
+});
+
+const Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {
+    const {
+        accessibilityRole,
+        align = 'inherit',
+        ariaLevel,
+        disableFontScaling = false,
+        children,
+        color: colorProp = 'inherit',
+        ellipsizeMode = 'tail',
+        href,
+        numberOfLines,
+        onPress,
+        selectable,
+        style,
+        variant = 'body1',
+        onLayout,
+        onTextLayout,
+    } = props;
+
+    const theme = useTheme();
+
+    const fontStyle = createFontStyle(theme, {
+        selector: (typography) => typography[variant],
+        color: selectColor(theme, colorProp),
+    });
+
+    // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.
+    const textWrapStyle = numberOfLines && numberOfLines > 0 && Platform.OS === 'web' ? { wordWrap: 'normal' } : {};
+
+    const textStyle = css([
+        styles.root,
+        { textAlign: align === 'inherit' ? 'auto' : align },
+        textWrapStyle as TextStyle,
+        fontStyle,
+        style,
+    ]);
+
+    const accessibility = accessibilityMap[variant];
+    const variantRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;
+    const variantLevel = accessibility?.['area-level'];
+
+    return (
+        <Text
+            ref={ref}
+            accessibilityRole={accessibilityRole || variantRole}
+            allowFontScaling={!disableFontScaling}
+            aria-level={ariaLevel || variantLevel}
+            children={children}
+            ellipsizeMode={ellipsizeMode}
+            // @ts-ignore
+            href={href}
+            numberOfLines={numberOfLines}
+            onPress={onPress}
+            selectable={selectable}
+            style={textStyle}
+            onLayout={onLayout}
+            onTextLayout={onTextLayout}
+        />
+    );
+});
+
+export default React.memo(Typography);

package/src/Typography/LegacyTypographyProps.ts

@@ -0,0 +1,122 @@
+import React from 'react';
+import type { AccessibilityProps, TextProps } from 'react-native';
+import type { ComponentProps } from '../types';
+
+export type TypographyAlign = 'inherit' | 'left' | 'center' | 'right' | 'justify';
+
+export type TypographyColor =
+    | 'inherit'
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'warning'
+    | 'error'
+    | 'accent'
+    | 'textPrimary'
+    | 'textSecondary'
+    | 'textAccent'
+    | 'textHint';
+
+export type TypographyVariant =
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'subtitle1'
+    | 'subtitle2'
+    | 'body1'
+    | 'body2'
+    | 'caption1'
+    | 'caption2'
+    | 'flag'
+    | 'button1'
+    | 'button2';
+
+export interface Accessibility {
+    accessibilityRole: AccessibilityProps['accessibilityRole'];
+    'area-level'?: number;
+}
+
+export interface AccessibilityMap extends Partial<{
+    [key: string]: Accessibility;
+}> {}
+
+export default interface TypographyProps extends ComponentProps<{
+    /**
+     * Applies HTML tag at web and communicates purpose of component at app
+     */
+    accessibilityRole?: AccessibilityProps['accessibilityRole'];
+
+    /**
+     * Set the text-align on the component.
+     * The value 'justify' is not supported on Android and fallbacks to left.
+     * @default 'inherit'
+     */
+    align?: TypographyAlign;
+
+    /**
+     * Applies HTML heading level
+     */
+    ariaLevel?: number;
+
+    /**
+     * Specifies whether fonts should scale to respect Text Size accessibility settings.
+     * @default false
+     */
+    disableFontScaling?: boolean;
+
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+
+    /**
+     * The color of the component. It supports those theme colors that make sense for this component.
+     * @default 'inherit'
+     */
+    color?: TypographyColor;
+
+    /**
+     * The text ellipsis mode.
+     * @default 'tail'
+     */
+    ellipsizeMode?: TextProps['ellipsizeMode'];
+
+    /**
+     * Internal use only. The hyperlink of the text.
+     */
+    href?: string;
+
+    /**
+     * Used to truncate the text with an ellipsis after computing the text
+     * layout, including line wrapping, such that the total number of lines
+     * does not exceed this number.
+     */
+    numberOfLines?: TextProps['numberOfLines'];
+
+    /**
+     * Lets the user select text, to use the native copy and paste functionality.
+     */
+    onPress?: TextProps['onPress'];
+
+    /**
+     * Lets the user select text, to use the native copy and paste functionality.
+     */
+    selectable?: boolean;
+
+    /**
+     * Applies the theme typography styles.
+     * @default 'body1'
+     */
+    variant?: TypographyVariant;
+
+
+    /**
+     * Callback that is called when the text layout has been calculated.
+     */
+    onTextLayout?: TextProps['onTextLayout'];
+
+    /**
+     * Callback that is called when the layout of the Text component changes.
+     */
+    onLayout?: TextProps['onLayout'];
+}> {}

package/src/Typography/Typography.tsx

@@ -1,39 +1,32 @@
 import React from 'react';
-import { Platform, Text, TextStyle } from 'react-native';
-import type { Theme } from '@fountain-ui/styles';
+import type { TextProps, TextStyle } from 'react-native';
+import { Platform, Text } from 'react-native';
+import type { FontVariant, FontWeight, Theme } from '@fountain-ui/styles';
 import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
-import TypographyProps, { AccessibilityMap, TypographyColor } from './TypographyProps';
+import type TypographyProps from './TypographyProps';
+import type { AccessibilityMap, TypographyAlign, TypographyColor } from './TypographyProps';
 
 const accessibilityMap: AccessibilityMap = {
-    h1: { accessibilityRole: 'header', 'area-level': 1 },
-    h2: { accessibilityRole: 'header', 'area-level': 2 },
-    h3: { accessibilityRole: 'header', 'area-level': 3 },
-    subtitle1: { accessibilityRole: 'header', 'area-level': 6 },
-    subtitle2: { accessibilityRole: 'header', 'area-level': 6 },
-    body1: { accessibilityRole: 'text' },
-    body2: { accessibilityRole: 'text' },
-    caption1: { accessibilityRole: 'text' },
-    caption2: { accessibilityRole: 'text' },
-    flag: { accessibilityRole: 'text' },
+    // TODO: set accessibilityRole.
+    // h1: { accessibilityRole: 'header', 'aria-level': 1 },
+    // h2: { accessibilityRole: 'header', 'aria-level': 2 },
+    // h3: { accessibilityRole: 'header', 'aria-level': 3 },
+    // subtitle1: { accessibilityRole: 'header', 'aria-level': 6 },
+    // subtitle2: { accessibilityRole: 'header', 'aria-level': 6 },
+    // body1: { accessibilityRole: 'text' },
+    // body2: { accessibilityRole: 'text' },
+    // caption1: { accessibilityRole: 'text' },
+    // caption2: { accessibilityRole: 'text' },
+    // flag: { accessibilityRole: 'text' },
 };
 
 function selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {
-    const palette = theme.palette.text;
-
     switch (colorProp) {
         case 'inherit':
             return Platform.OS === 'web' ? 'inherit' : undefined;
-        case 'textPrimary':
-            return palette.primary;
-        case 'textSecondary':
-            return palette.secondary;
-        case 'textAccent':
-            return palette.accent;
-        case 'textHint':
-            return palette.hint;
+        default:
+            return theme.palette.text[colorProp];
     }
-
-    return theme.palette[colorProp]?.main;
 }
 
 const styles = StyleSheet.create({
@@ -46,18 +39,19 @@ const styles = StyleSheet.create({
 const Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {
     const {
         accessibilityRole,
-        align = 'inherit',
+        align = 'inherit' as TypographyAlign,
         ariaLevel,
         disableFontScaling = false,
         children,
-        color: colorProp = 'inherit',
-        ellipsizeMode = 'tail',
+        color: colorProp = 'inherit' as TypographyColor,
+        ellipsizeMode = 'tail' as TextProps['ellipsizeMode'],
         href,
         numberOfLines,
         onPress,
         selectable,
         style,
-        variant = 'body1',
+        variant = 'body1' as FontVariant,
+        weight = 'medium' as FontWeight,
         onLayout,
         onTextLayout,
     } = props;
@@ -65,7 +59,7 @@ const Typography = React.forwardRef<Text, TypographyProps>(function Typography(p
     const theme = useTheme();
 
     const fontStyle = createFontStyle(theme, {
-        selector: (typography) => typography[variant],
+        selector: (typography) => typography[variant][weight],
         color: selectColor(theme, colorProp),
     });