@fountain-ui/core 3.0.0-alpha.4 → 3.0.0-alpha.41

package/src/TextField/TextField.tsx

@@ -19,9 +19,37 @@ const styles = StyleSheet.create({
     input: {
         flexGrow: 1,
     },
+    inputWrapper: {
+        flexGrow: 1,
+        flexShrink: 1,
+    },
+    placeholderWrapper: {
+        ...StyleSheet.absoluteFillObject,
+        justifyContent: 'center',
+    },
     secureToggleButton: {
         alignItems: 'flex-end',
         padding: 0,
+        position: 'absolute',
+        right: 0,
+    },
+    searchIconContainer: {
+        left: 12,
+        position: 'absolute',
+    },
+    loadingSinner: {
+        height: 19,
+        width: 19,
+    },
+    clearButton: {
+        height: 36,
+        position: 'absolute',
+        right: 2,
+        width: 32,
+    },
+    secureButtonContainer: {
+        justifyContent: 'center',
+        width: 32,
     },
 });
 
@@ -35,6 +63,7 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
         onBlur,
         onChangeText: onChangeTextProp,
         onFocus,
+        placeholder: placeholderProp,
         placeholderTextColor: placeholderTextColorProp,
         secureTextEntry: secureTextEntryProp,
         showClearButton: showClearButtonProp,
@@ -82,18 +111,22 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
     const showClearButton = showClearButtonProp ?? isSearch;
 
     const titleFontStyle = createFontStyle(theme, {
-        // selector: (typography) => typography.caption1['semiBold']
+        selector: (typography) => typography.caption1['semiBold'],
         color: theme.palette.text.strong,
     });
 
     const inputStyle = css([
         styles.input,
         variantStyles.inputStyle,
+        variantStyles.inputFontStyle,
         Platform.OS === 'web' ? { outlineWidth: 0 } as FountainUiStyle : {},
         styleProp,
     ]);
 
-    const placeholderTextColor = placeholderTextColorProp ?? theme.palette.status.disabledLabel;
+    const placeholderFontStyle = css([
+        variantStyles.inputFontStyle,
+        { color: placeholderTextColorProp ?? theme.palette.status.disabledLabel },
+    ]);
 
     const containerStyle = css([
         styles.root,
@@ -112,63 +145,84 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
             ) : null}
 
             <Row style={containerStyle}>
-                {isSearch ? (
-                    isLoading ? (
-                        <LoadingSpinner/>
-                    ) : (
-                        <Search
-                            color={'base'}
-                            height={18}
-                            width={18}
+                <React.Fragment>
+                    {isSearch ? (
+                        <View style={styles.searchIconContainer}>
+                            {isLoading ? (
+                                <LoadingSpinner style={styles.loadingSinner}/>
+                            ) : (
+                                <Search
+                                    color={'base'}
+                                    height={19}
+                                    width={19}
+                                />
+                            )}
+                        </View>
+                    ) : null}
+
+                    <View style={styles.inputWrapper}>
+                        <View
+                            pointerEvents={'none'}
+                            style={styles.placeholderWrapper}
+                        >
+                            {placeholderProp && !value ? (
+                                <Text
+                                    children={placeholderProp}
+                                    numberOfLines={1}
+                                    style={placeholderFontStyle}
+                                />
+                            ) : null}
+                        </View>
+
+                        <TextInput
+                            autoFocus={autoFocus}
+                            editable={!disabled}
+                            onBlur={handleBlur}
+                            onChangeText={handleChangeText}
+                            onFocus={handleFocus}
+                            ref={ref}
+                            secureTextEntry={secureTextEntry}
+                            style={inputStyle}
+                            value={value}
+                            {...otherProps}
                         />
-                    )
-                ) : null}
-
-                <TextInput
-                    autoFocus={autoFocus}
-                    editable={!disabled}
-                    onBlur={handleBlur}
-                    onChangeText={handleChangeText}
-                    onFocus={handleFocus}
-                    placeholderTextColor={placeholderTextColor}
-                    ref={ref}
-                    secureTextEntry={secureTextEntry}
-                    style={inputStyle}
-                    value={value}
-                    {...otherProps}
-                />
+                    </View>
+                </React.Fragment>
 
                 {showClearButton && value?.length && value.length > 0 ? (
                     <IconButton
                         color={'base'}
                         children={
                             <Clear
-                                height={13.75}
-                                width={15}
+                                height={17.31}
+                                width={15.9}
                             />
                         }
                         onPress={handleClear}
+                        style={styles.clearButton}
                     />
                 ) : null}
 
                 {secureTextEntryProp && !isSearch ? (
-                    <IconButton
-                        color={'base'}
-                        onPress={handleSecureTogglePress}
-                        style={styles.secureToggleButton}
-                    >
-                        {secureTextEntry ? (
-                            <EyeOff
-                                height={19}
-                                width={17.42}
-                            />
-                        ) : (
-                            <EyeOn
-                                height={19}
-                                width={17.42}
-                            />
-                        )}
-                    </IconButton>
+                    <View style={styles.secureButtonContainer}>
+                        <IconButton
+                            color={'base'}
+                            onPress={handleSecureTogglePress}
+                            style={styles.secureToggleButton}
+                        >
+                            {secureTextEntry ? (
+                                <EyeOff
+                                    height={19}
+                                    width={17.42}
+                                />
+                            ) : (
+                                <EyeOn
+                                    height={19}
+                                    width={17.42}
+                                />
+                            )}
+                        </IconButton>
+                    </View>
                 ) : null}
             </Row>
 

package/src/TextField/useVariantStyleMap.ts

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import type { TextStyle } from 'react-native';
 import type { FountainUiStyle, Theme } from '@fountain-ui/styles';
 import { typographyOf } from '@fountain-ui/styles';
 import { createFontStyle, useTheme } from '../styles';
@@ -6,6 +7,7 @@ import type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';
 
 interface VariantStyleMap {
     containerStyle?: FountainUiStyle;
+    inputFontStyle?: TextStyle;
     inputStyle?: FountainUiStyle;
     hintStyle?: FountainUiStyle;
 }
@@ -47,24 +49,26 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                     containerStyle: {
                         borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,
                         borderBottomWidth: 1,
+                        gap: 16,
+                        minHeight: 60,
+                        paddingVertical: 16,
                     },
                     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,
-                        }),
+                        padding: 0,
                     },
+                    inputFontStyle: createFontStyle(theme, {
+                        selector: (_) => typographyOf({
+                            fontSize: 18,
+                            lineHeight: 27,
+                            fontFamily: 'PretendardStd-SemiBold',
+                            letterSpacing: 0,
+                        }),
+                        color: theme.palette.text.strong,
+                    }),
                     hintStyle: {
                         marginTop: theme.spacing(2),
                         ...createFontStyle(theme, {
-                            // selector: (typography) => typography.caption1['regular']
+                            selector: (typography) => typography.caption1['regular'],
                             color: hintColor,
                         }),
                     },
@@ -76,24 +80,22 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                         borderColor: theme.palette.border.base,
                         borderRadius: theme.shape.radius.md,
                         borderWidth: 0.5,
-                        paddingLeft: theme.spacing(3),
-                        paddingRight: theme.spacing(0.5),
+                        paddingBottom: 12,
+                        paddingHorizontal: 39,
+                        paddingTop: 11,
                     },
                     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,
-                        }),
+                        padding: 0,
                     },
+                    inputFontStyle: createFontStyle(theme, {
+                        selector: (_) => typographyOf({
+                            fontSize: 16,
+                            lineHeight: 19.2,
+                            fontFamily: 'PretendardStd-SemiBold',
+                            letterSpacing: -0.16,
+                        }),
+                        color: theme.palette.text.strong,
+                    }),
                 };
         }
     }, [theme, borderColor, hintColor, variant, isFocused]);

package/src/Toolbar/BackButton/BackButton.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import IconButton from '../../IconButton';
+import { AppBarChevronLeft } from '../../internal';
+import type BackButtonProps from './BackButtonProps';
+import { css } from '@fountain-ui/styles';
+
+const styles = StyleSheet.create({
+    root: {
+        height: 40,
+        left: 4,
+        paddingLeft: 5,
+        paddingRight: 11,
+        paddingVertical: 8,
+        position: 'absolute',
+        width: 40,
+    },
+});
+
+export default function BackButton(props: BackButtonProps) {
+    const {
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    return (
+        <IconButton
+            style={rootStyle}
+            {...otherProps}
+        >
+            <React.Fragment>
+                <AppBarChevronLeft
+                    height={24}
+                    width={24}
+                />
+            </React.Fragment>
+        </IconButton>
+    );
+}

package/src/Toolbar/BackButton/BackButtonProps.ts

@@ -0,0 +1,4 @@
+import type { IconButtonProps } from '../../IconButton';
+import type { OverridableComponentProps } from '../../types';
+
+export default interface BackButtonProps extends OverridableComponentProps<Omit<IconButtonProps, 'children'>, {}> {}

package/src/Toolbar/BackButton/index.ts

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

package/src/Toolbar/Toolbar.tsx

@@ -1,23 +1,26 @@
 import React from 'react';
+import { View } from 'react-native';
 import type { FountainUiStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import Row from '../Row';
-import { css, useTheme } from '../styles';
+import { useBreakpointUp } from '../hooks';
+import { css } from '../styles';
+import BackButton from './BackButton';
 import type ToolbarProps from './ToolbarProps';
 import type { ToolbarSize } from './ToolbarProps';
 
-type ToolbarStyles = NamedStylesStringUnion<'root' | 'gutters'>;
+type ToolbarStyles = NamedStylesStringUnion<'container' | 'root'>;
 
 const useStyles: UseStyles<ToolbarStyles> = function (): ToolbarStyles {
-    const theme = useTheme();
+    const shouldApplyHorizontalPadding = useBreakpointUp('sm', true, false);
 
     return {
+        container: {
+            paddingHorizontal: shouldApplyHorizontalPadding ? 8 : 0,
+        },
         root: {
             alignItems: 'center',
             flexWrap: 'nowrap',
         },
-        gutters: {
-            paddingHorizontal: theme.spacing(4),
-        },
     };
 };
 
@@ -27,9 +30,8 @@ const sizeMap: Record<ToolbarSize, FountainUiStyle> = {
     large: { height: 56 },
 };
 
-export default function Toolbar(props: ToolbarProps) {
+const Toolbar = (props: ToolbarProps) => {
     const {
-        disableGutters = false,
         size = 'medium',
         style,
         ...otherProps
@@ -37,15 +39,22 @@ export default function Toolbar(props: ToolbarProps) {
 
     const styles = useStyles();
 
+    const rootStyle = css([
+        styles.root,
+        sizeMap[size],
+        style,
+    ]);
+
     return (
-        <Row
-            style={css([
-                styles.root,
-                !disableGutters ? styles.gutters : undefined,
-                sizeMap[size],
-                style,
-            ])}
-            {...otherProps}
-        />
+        <View style={styles.container}>
+            <Row
+                style={rootStyle}
+                {...otherProps}
+            />
+        </View>
     );
 };
+
+Toolbar.BackButton = BackButton;
+
+export default Toolbar;

package/src/Toolbar/ToolbarProps.ts

@@ -11,12 +11,6 @@ export default interface ToolbarProps extends OverridableComponentProps<RowProps
      */
     children: React.ReactNode,
 
-    /**
-     * If `true`, disables gutter padding.
-     * @default false
-     */
-    disableGutters?: boolean,
-
     /**
      * Determines the height of the toolbar.
      * @default 'medium'

package/src/Tooltip/Beaks/index.ts

@@ -1,2 +1,6 @@
 export { default } from './Beak';
 export type { default as BeakProps } from './BeakProps';
+export { default as HorizontalLargeBeak } from './HorizontalLargeBeak';
+export { default as HorizontalSmallBeak } from './HorizontalSmallBeak';
+export { default as VerticalLargeBeak } from './VerticalLargeBeak';
+export { default as VerticalSmallBeak } from './VerticalSmallBeak';

package/src/Tooltip/Tooltip.tsx

@@ -3,7 +3,6 @@ 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 type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { typographyOf } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase';
 import { createFontStyle, css, useTheme } from '../styles';
 import type TooltipProps from './TooltipProps';
@@ -52,14 +51,14 @@ const useStyles: UseStyles<TooltipStyles> = function (): TooltipStyles {
         },
         small: {
             borderRadius: theme.shape.radius.sm,
+            paddingBottom: theme.spacing(1.75),
             paddingHorizontal: theme.spacing(2),
-            paddingVertical: theme.spacing(1.5),
+            paddingTop: theme.spacing(1.5),
         },
         large: {
             borderRadius: 5,
-            paddingBottom: theme.spacing(2.5),
             paddingHorizontal: theme.spacing(4),
-            paddingTop: theme.spacing(2),
+            paddingVertical: theme.spacing(2),
         },
     };
 };
@@ -80,6 +79,7 @@ export default function Tooltip(props: TooltipProps) {
         tooltipStyle,
         verticalOffset = 4,
         visible = false,
+        ...otherProps
     } = props;
 
     const {
@@ -97,7 +97,7 @@ export default function Tooltip(props: TooltipProps) {
 
     const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ scale: scale.value }],
-    }), []);
+    }), [scale]);
 
     const flexDirection = getFlexDirection(placement);
 
@@ -140,12 +140,7 @@ export default function Tooltip(props: TooltipProps) {
 
     const fontStyle = createFontStyle(theme, {
         selector: (typo) => size === 'large'
-            ? typographyOf({
-                fontSize: 13,
-                lineHeight: 19.5,
-                fontFamily: 'Pretendard-Regular',
-                letterSpacing: 0,
-            })
+            ? typo.body3.regular
             : typo.caption2.regular,
         color: theme.palette.text.strongInverse,
     });
@@ -186,7 +181,10 @@ export default function Tooltip(props: TooltipProps) {
     );
 
     return (
-        <View style={style}>
+        <View
+            style={style}
+            {...otherProps}
+        >
             {children}
 
             <Animated.View

package/src/Tooltip/TooltipProps.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { TextProps, ViewProps } from 'react-native';
-import type { ComponentProps } from '../types';
 import type { ButtonProps } from '../Button';
+import type { OverridableComponentProps } from '../types';
 
 export const tooltipPlacements = ['top', 'bottom', 'left', 'right'] as const;
 export type TooltipPlacement = typeof tooltipPlacements[number];
@@ -24,7 +24,7 @@ export type TooltipInitialLayout = {
     y: number;
 };
 
-export default interface TooltipProps extends ComponentProps<{
+export default interface TooltipProps extends OverridableComponentProps<ViewProps, {
     /**
      * Tooltip reference element.
      */

package/src/Tooltip/index.ts

@@ -1,3 +1,4 @@
 export { default } from './Tooltip';
 export type { default as TooltipProps, TooltipBeakLayout, TooltipBeakPlacement } from './TooltipProps';
 export { tooltipBeakPlacements, tooltipPlacements, tooltipSizes } from './TooltipProps';
+export * from './Beaks';

package/src/Typography/Typography.tsx

@@ -46,6 +46,7 @@ const Typography = React.forwardRef<Text, TypographyProps>(function Typography(p
         color: colorProp = 'inherit' as TypographyColor,
         ellipsizeMode = 'tail' as TextProps['ellipsizeMode'],
         href,
+        lineHeight,
         numberOfLines,
         onPress,
         selectable,
@@ -59,7 +60,7 @@ const Typography = React.forwardRef<Text, TypographyProps>(function Typography(p
     const theme = useTheme();
 
     const fontStyle = createFontStyle(theme, {
-        selector: (typography) => typography[variant][weight],
+        selector: (typography) => typography[variant]?.[weight],
         color: selectColor(theme, colorProp),
     });
 
@@ -71,6 +72,7 @@ const Typography = React.forwardRef<Text, TypographyProps>(function Typography(p
         { textAlign: align === 'inherit' ? 'auto' : align },
         textWrapStyle as TextStyle,
         fontStyle,
+        lineHeight ? { lineHeight } : undefined,
         style,
     ]);
 

package/src/Typography/TypographyProps.ts

@@ -76,6 +76,11 @@ export default interface TypographyProps extends ComponentProps<{
      */
     href?: string;
 
+    /**
+     * Defines the vertical spacing between lines of text.
+     */
+    lineHeight?: TextStyle['lineHeight'];
+
     /**
      * Used to truncate the text with an ellipsis after computing the text
      * layout, including line wrapping, such that the total number of lines

package/src/hooks/useBreakpointUp.ts

@@ -12,8 +12,10 @@ export default function useBreakpointUp<R>(target: Breakpoint, yes: R, no: R): R
     // TODO: Needs to refactor
     const isUp = useMemo<boolean>(() => {
         switch (target) {
-            case 'xs':
+            case 'xxs':
                 return true;
+            case 'xs':
+                return current === 'xs' || current === 'sm' || current === 'md' || current === 'lg';
             case 'sm':
                 return current === 'sm' || current === 'md' || current === 'lg';
             case 'md':