@fountain-ui/core 3.0.0-alpha.5 → 3.0.0-alpha.50

package/src/Tabs/useTabsStyle.ts

@@ -0,0 +1,79 @@
+import { useMemo } from 'react';
+import type { FountainUiStyle } from '@fountain-ui/styles';
+import { useBreakpointUp } from '../hooks';
+import { useTheme } from '../styles';
+import type { TabSize, TabVariant } from '../Tab';
+
+interface TabsStyle {
+    container: FountainUiStyle;
+    contentContainer?: FountainUiStyle;
+}
+
+export default function useTabsStyle(variant: TabVariant, size: TabSize, scrollable: boolean) {
+    const theme = useTheme();
+
+    const isSmallUp = useBreakpointUp('sm', true, false);
+
+    const isMediumUp = useBreakpointUp('md', true, false);
+
+    return useMemo<TabsStyle>(() => {
+        switch (variant) {
+            case 'circular': {
+                const paddingHorizontal = isSmallUp ? 20 : (size === 'small' ? 8 : 12);
+
+                return {
+                    container: {
+                        paddingBottom: 8,
+                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,
+                    },
+                    contentContainer: {
+                        paddingHorizontal: scrollable ? paddingHorizontal : 0,
+                    },
+                };
+            }
+            case 'circular-home': {
+                const paddingHorizontal = isSmallUp ? 20 : 8;
+
+                return {
+                    container: {
+                        paddingBottom: 8,
+                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,
+                    },
+                    contentContainer: {
+                        paddingHorizontal: scrollable ? paddingHorizontal : 0,
+                    },
+                };
+            }
+            case 'bottom-navigation': {
+                const paddingHorizontal = 24;
+
+                return {
+                    container: {
+                        ...(isMediumUp ? {
+                            alignSelf: 'center',
+                            minWidth: 460,
+                        } : {}),
+                        justifyContent: 'space-between',
+                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,
+                    },
+                    contentContainer: {
+                        paddingHorizontal: scrollable ? paddingHorizontal : 0,
+                    },
+                };
+            }
+            case 'default':
+            default: {
+                const paddingHorizontal = isSmallUp ? 14 : 6;
+
+                return {
+                    container: {
+                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,
+                    },
+                    contentContainer: {
+                        paddingHorizontal: scrollable ? paddingHorizontal : 0,
+                    },
+                };
+            }
+        }
+    }, [theme, variant, isMediumUp, isSmallUp, size, scrollable]);
+}

package/src/TextField/TextField.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
 import { Platform, StyleSheet, Text, TextInput, View } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
@@ -11,6 +11,8 @@ import type TextFieldProps from './TextFieldProps';
 import type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';
 import useVariantStyleMap from './useVariantStyleMap';
 
+const isWeb = Platform.OS === 'web';
+
 const styles = StyleSheet.create({
     root: {
         alignItems: 'center',
@@ -19,9 +21,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,
     },
 });
 
@@ -29,15 +59,20 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
     const {
         autoFocus,
         containerStyle: containerStyleProp,
+        multiline,
         editable = true,
         hint,
+        inputFontSize = 'large',
         isLoading,
+        maxLength,
         onBlur,
         onChangeText: onChangeTextProp,
         onFocus,
+        placeholder: placeholderProp,
         placeholderTextColor: placeholderTextColorProp,
         secureTextEntry: secureTextEntryProp,
         showClearButton: showClearButtonProp,
+        showWordCounter = false,
         status = 'default' as TextFieldStatus,
         style: styleProp,
         title,
@@ -55,7 +90,18 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
     const [isFocused, setIsFocused] = useState<boolean>(autoFocus ?? false);
     const [secureTextEntry, setSecureTextEntry] = useState<boolean>(secureTextEntryProp ?? false);
 
-    const variantStyles = useVariantStyleMap(variant, status, isFocused);
+    const internalRef = useRef<TextInput>(null);
+
+    const mergedRef = useCallback((node: TextInput | null) => {
+        (internalRef as React.MutableRefObject<TextInput | null>).current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        } else if (ref) {
+            (ref as React.MutableRefObject<TextInput | null>).current = node;
+        }
+    }, [ref]);
+
+    const variantStyles = useVariantStyleMap(variant, status, isFocused, inputFontSize);
 
     const handleBlur = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
         setIsFocused(false);
@@ -71,6 +117,21 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
         setSecureTextEntry((current) => !current);
     };
 
+    const resizeHeight = useCallback(() => {
+        const el = internalRef.current as unknown as HTMLTextAreaElement | null;
+        if (el) {
+            el.style.height = 'auto';
+            el.style.height = `${el.scrollHeight}px`;
+        }
+    }, []);
+
+    useLayoutEffect(() => {
+        const shouldResizeHeight = multiline && isWeb;
+        if (shouldResizeHeight) {
+            resizeHeight();
+        }
+    }, [resizeHeight, multiline, value]);
+
     const handleChangeText = (text: string) => {
         onChangeTextProp?.(text);
     };
@@ -89,11 +150,15 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
     const inputStyle = css([
         styles.input,
         variantStyles.inputStyle,
-        Platform.OS === 'web' ? { outlineWidth: 0 } as FountainUiStyle : {},
+        variantStyles.inputFontStyle,
+        isWeb ? { 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,66 +177,96 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
             ) : null}
 
             <Row style={containerStyle}>
-                {isSearch ? (
-                    isLoading ? (
-                        <LoadingSpinner/>
-                    ) : (
-                        <Search
-                            color={'base'}
-                            height={18}
-                            width={18}
-                        />
-                    )
-                ) : null}
+                <React.Fragment>
+                    {isSearch ? (
+                        <View style={styles.searchIconContainer}>
+                            {isLoading ? (
+                                <LoadingSpinner style={styles.loadingSinner}/>
+                            ) : (
+                                <Search
+                                    color={'base'}
+                                    height={19}
+                                    width={19}
+                                />
+                            )}
+                        </View>
+                    ) : null}
 
-                <TextInput
-                    autoFocus={autoFocus}
-                    editable={!disabled}
-                    onBlur={handleBlur}
-                    onChangeText={handleChangeText}
-                    onFocus={handleFocus}
-                    placeholderTextColor={placeholderTextColor}
-                    ref={ref}
-                    secureTextEntry={secureTextEntry}
-                    style={inputStyle}
-                    value={value}
-                    {...otherProps}
-                />
+                    <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}
+                            maxLength={maxLength}
+                            onBlur={handleBlur}
+                            onChangeText={handleChangeText}
+                            onFocus={handleFocus}
+                            ref={mergedRef}
+                            secureTextEntry={secureTextEntry}
+                            style={inputStyle}
+                            value={value}
+                            multiline={multiline}
+                            {...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>
 
+            {showWordCounter && maxLength && !isSearch ? (
+                <Text
+                    children={`${value?.length ?? 0}/${maxLength}`}
+                    style={variantStyles.hintStyle}
+                />
+            ) : null}
+
             {hint && !isSearch ? (
                 <Text
                     children={hint}

package/src/TextField/TextFieldProps.ts

@@ -9,6 +9,9 @@ export type TextFieldStatus = typeof textFieldStatus[number];
 export const textFieldVariants = ['default', 'search'] as const;
 export type TextFieldVariant = typeof textFieldVariants[number];
 
+export const textFieldInputFontSizes = ['large', 'small'] as const;
+export type TextFieldInputFontSize = typeof textFieldInputFontSizes[number];
+
 export default interface TextFieldProps extends OverridableComponentProps<TextInputProps, {
     /**
      * Determines the style of the container that wraps the input.
@@ -47,4 +50,17 @@ export default interface TextFieldProps extends OverridableComponentProps<TextIn
      * @default default
      */
     variant?: TextFieldVariant;
+
+    /**
+     * Determines the font size of the input.
+     * @default large
+     */
+    inputFontSize?: TextFieldInputFontSize;
+
+    /**
+     * Determines whether to display the word counter below the input.
+     * Requires maxLength to be set.
+     * @default false
+     */
+    showWordCounter?: boolean;
 }> {}

package/src/TextField/useVariantStyleMap.ts

@@ -1,11 +1,38 @@
 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';
-import type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';
+import type { TextFieldInputFontSize, TextFieldStatus, TextFieldVariant } from './TextFieldProps';
+
+const fontSizeStyleMap = {
+    large: {
+        fontSize: 18,
+        lineHeight: 27,
+        fontFamily: 'PretendardStd-SemiBold',
+        letterSpacing: 0,
+    },
+    small: {
+        fontSize: 14,
+        lineHeight: 21,
+        fontFamily: 'PretendardStd-Medium',
+        letterSpacing: 0,
+    },
+} as const;
+
+const containerPaddingMap = {
+    large: {
+        paddingVertical: 14,
+    },
+    small: {
+        paddingTop: 18,
+        paddingBottom: 16,
+    },
+} as const;
 
 interface VariantStyleMap {
     containerStyle?: FountainUiStyle;
+    inputFontStyle?: TextStyle;
     inputStyle?: FountainUiStyle;
     hintStyle?: FountainUiStyle;
 }
@@ -31,7 +58,12 @@ function useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: s
     }
 }
 
-export default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {
+export default function useVariantStyleMap(
+    variant: TextFieldVariant,
+    status: TextFieldStatus,
+    isFocused: boolean,
+    inputFontSize: TextFieldInputFontSize = 'large',
+): VariantStyleMap {
     const theme = useTheme();
 
     const {
@@ -47,24 +79,21 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                     containerStyle: {
                         borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,
                         borderBottomWidth: 1,
+                        gap: 16,
+                        minHeight: 54,
+                        ...containerPaddingMap[inputFontSize],
                     },
                     inputStyle: {
-                        paddingRight: theme.spacing(4),
-                        paddingVertical: theme.spacing(4),
-                        ...createFontStyle(theme, {
-                            selector: (_) => typographyOf({
-                                fontSize: 18,
-                                lineHeight: 27,
-                                fontFamily: 'PretendardStd-SemiBold',
-                                letterSpacing: 0,
-                            }),
-                            color: theme.palette.text.strong,
-                        }),
+                        padding: 0,
                     },
+                    inputFontStyle: createFontStyle(theme, {
+                        selector: (_) => typographyOf(fontSizeStyleMap[inputFontSize]),
+                        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,25 +105,23 @@ 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: 'PretendardStd-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]);
+    }, [theme, borderColor, hintColor, variant, isFocused, inputFontSize]);
 }

package/src/Toolbar/BackButton/BackButton.tsx

@@ -0,0 +1,42 @@
+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}
+        >
+            <AppBarChevronLeft
+                height={24}
+                width={24}
+            />
+        </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';