@fountain-ui/core 3.0.0-alpha.3 → 3.0.0-alpha.31

package/src/TextField/TextField.tsx

@@ -19,10 +19,31 @@ const styles = StyleSheet.create({
     input: {
         flexGrow: 1,
     },
+    inputWrapper: {
+        flexGrow: 1,
+    },
+    placeholderWrapper: {
+        ...StyleSheet.absoluteFillObject,
+        justifyContent: 'center',
+    },
     secureToggleButton: {
         alignItems: 'flex-end',
         padding: 0,
     },
+    searchIconContainer: {
+        left: 12,
+        position: 'absolute',
+    },
+    loadingSinner: {
+        height: 19,
+        width: 19,
+    },
+    clearButton: {
+        height: 36,
+        position: 'absolute',
+        right: 2,
+        width: 32,
+    },
 });
 
 const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {
@@ -35,6 +56,7 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
         onBlur,
         onChangeText: onChangeTextProp,
         onFocus,
+        placeholder: placeholderProp,
         placeholderTextColor: placeholderTextColorProp,
         secureTextEntry: secureTextEntryProp,
         showClearButton: showClearButtonProp,
@@ -82,18 +104,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,
@@ -113,41 +139,58 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
 
             <Row style={containerStyle}>
                 {isSearch ? (
-                    isLoading ? (
-                        <LoadingSpinner/>
-                    ) : (
-                        <Search
-                            color={'base'}
-                            height={18}
-                            width={18}
-                        />
-                    )
+                    <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}
+                        onBlur={handleBlur}
+                        onChangeText={handleChangeText}
+                        onFocus={handleFocus}
+                        ref={ref}
+                        secureTextEntry={secureTextEntry}
+                        style={inputStyle}
+                        value={value}
+                        {...otherProps}
+                    />
+                </View>
 
                 {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}
 

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,
+                        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,
+                        paddingRight: 16,
                     },
+                    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

@@ -2,6 +2,7 @@ import React from 'react';
 import type { FountainUiStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import Row from '../Row';
 import { css, useTheme } from '../styles';
+import BackButton from './BackButton';
 import type ToolbarProps from './ToolbarProps';
 import type { ToolbarSize } from './ToolbarProps';
 
@@ -27,7 +28,7 @@ const sizeMap: Record<ToolbarSize, FountainUiStyle> = {
     large: { height: 56 },
 };
 
-export default function Toolbar(props: ToolbarProps) {
+const Toolbar = (props: ToolbarProps) => {
     const {
         disableGutters = false,
         size = 'medium',
@@ -49,3 +50,7 @@ export default function Toolbar(props: ToolbarProps) {
         />
     );
 };
+
+Toolbar.BackButton = BackButton;
+
+export default Toolbar;

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

@@ -52,14 +52,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),
         },
     };
 };
@@ -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,
     });

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':

package/src/hooks/useCollapsibleAppBar.ts

@@ -1,14 +1,5 @@
 import { useCallback, useRef, useState } from 'react';
-import {
-    Falsy,
-    Keyboard,
-    Platform,
-    RegisteredStyle,
-    ScrollViewProps,
-    StyleSheet,
-    ViewProps,
-    ViewStyle,
-} from 'react-native';
+import { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
 import type { WithTimingConfig } from 'react-native-reanimated';
 import {
     runOnJS,
@@ -19,7 +10,6 @@ import {
     withTiming,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTheme } from '@fountain-ui/styles';
 import { useHeight } from '../internal/hooks';
 import useAppbarStyles from './useAppbarStyles';
 
@@ -40,7 +30,6 @@ export interface ContentInsets {
 
 export interface Options {
     keyboardDismissMode?: 'none' | 'on-drag';
-    dividerExposureMode?: 'always' | 'overlapped';
     supportsReverseScroll?: boolean;
 }
 
@@ -56,7 +45,6 @@ export interface CollapsibleAppBar {
 
 const defaultOptions: Required<Options> = {
     keyboardDismissMode: 'none',
-    dividerExposureMode: 'overlapped',
     supportsReverseScroll: true,
 };
 
@@ -67,7 +55,7 @@ const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
 const dismissKeyboard = () => Keyboard.dismiss();
 
 export default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {
-    const { keyboardDismissMode, dividerExposureMode, supportsReverseScroll }: Required<Options> = {
+    const { keyboardDismissMode, supportsReverseScroll }: Required<Options> = {
         ...defaultOptions,
         ...userOptions,
     };
@@ -88,20 +76,13 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
     const [isScrolled, setIsScrolled] = useState<boolean>(false);
 
-    const theme = useTheme();
-
     const animatedStyle = useAnimatedStyle(() => {
         const transform = [{ translateY: translateY.value }];
 
         return {
             transform,
-            borderColor: dividerExposureMode === 'always' || overlapped.value ? theme.palette.divider : TRANSPARENT,
-            borderBottomWidth: StyleSheet.hairlineWidth,
         };
-    }, [
-        theme,
-        dividerExposureMode,
-    ]);
+    }, []);
 
     const indexRef = useRef<number>(0);
     const offsetsRef = useRef<Array<number>>([]);
@@ -205,7 +186,7 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
             translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);
         },
-    }, [keyboardDismissMode, appBarHeight, isScrolled]);
+    });
 
     const hasCollapsible = collapsibleToolbarHeight > 0;
 

package/src/hooks/useContentContainerStyle.ts

@@ -1,60 +1,72 @@
-import type { ScrollViewProps, ViewStyle } from 'react-native';
+import type { FountainUiStyle } from '@fountain-ui/styles';
+import { css, useTheme } from '../styles';
 import type { Theme } from '../types';
-import { useTheme } from '../styles';
-import useBreakpointUp from './useBreakpointUp';
 
 type Breakpoint = keyof Theme['breakpoints']['values'];
 
-type ContentContainerStyle = ScrollViewProps['contentContainerStyle'];
-
 export interface Config {
-    breakpoint?: Breakpoint;
-    maxWidth?: Breakpoint;
-    styleProvider?: (theme: Theme) => ContentContainerStyle;
+    maxWidth?: number;
+    styleProvider?: (theme: Theme) => FountainUiStyle;
+    isHomeScreen?: boolean;
 }
 
-const defaultConfig: Required<Config> = {
-    breakpoint: 'lg',
-    maxWidth: 'md',
-    styleProvider: () => undefined,
-};
+function getMaxWidth(theme: Theme, breakpoint: Breakpoint, customMaxWidth?: number): number | undefined {
+    switch (breakpoint) {
+        case 'lg':
+        case 'md':
+            return customMaxWidth ?? theme.breakpoints.values[breakpoint];
+        default:
+            return undefined;
+    }
+}
 
-// TODO: Needs to refactor
-function getMaxWidth(theme: Theme, breakpoint: Breakpoint): ViewStyle['maxWidth'] {
+function getHomeScreenPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): number {
     switch (breakpoint) {
+        case 'xxs':
         case 'xs':
-            return theme.breakpoints.values['sm'];
+            return theme.spacing(3);
         case 'sm':
-            return theme.breakpoints.values['md'];
+            return theme.spacing(6);
         case 'md':
-            return theme.breakpoints.values['lg'];
         case 'lg':
-            return 'none';
+        default:
+            return theme.spacing(4);
+    }
+}
+
+function getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint, isHomeScreen?: boolean): number {
+    if (isHomeScreen) {
+        return getHomeScreenPaddingHorizontal(theme, breakpoint);
+    }
+
+    switch (breakpoint) {
+        case 'sm':
+            return theme.spacing(6);
+        default:
+            return theme.spacing(4);
     }
 }
 
-export default function useContentContainerStyle(config: Config = defaultConfig): ContentContainerStyle {
+export default function useContentContainerStyle(config: Config = {}): FountainUiStyle {
     const {
-        breakpoint,
-        maxWidth,
+        maxWidth: customMaxWidth,
         styleProvider,
-    } = {
-        ...defaultConfig,
-        ...config,
-    };
+        isHomeScreen = false,
+    } = config;
 
     const theme = useTheme();
 
+    const currentBreakpoint = theme.breakpoints.current;
+
     const additionalStyle = styleProvider?.(theme);
 
-    const yesStyle: ContentContainerStyle = [
+    return css([
         {
             alignSelf: 'center',
-            maxWidth: getMaxWidth(theme, maxWidth),
+            maxWidth: getMaxWidth(theme, currentBreakpoint, customMaxWidth),
+            paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint, isHomeScreen),
             width: '100%',
         },
         additionalStyle,
-    ];
-
-    return useBreakpointUp(breakpoint, yesStyle, additionalStyle);
+    ]);
 };

package/src/hooks/useFadeInAppBar.ts

@@ -76,7 +76,7 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
     const lastOffsetY = useSharedValue<number>(0);
     const normalized = useSharedValue<number>(0);
 
-    const originalBackgroundColor = theme.palette.background.default;
+    const originalBackgroundColor = theme.palette.background.base;
     const rgbValues = useMemo(() => rgb(originalBackgroundColor), [originalBackgroundColor]);
 
     const animatedAppBarStyle = useAnimatedStyle(() => {
@@ -117,7 +117,7 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
         onMomentumEnd: (event) => {
             lastOffsetY.value = event.contentOffset.y;
         },
-    }, [keyboardDismissMode]);
+    });
 
     const appBarStyle = [
         animatedAppBarStyle,

package/src/index.ts

@@ -149,6 +149,9 @@ export * from './RadioGroup';
 export { default as Row } from './Row';
 export * from './Row';
 
+export { default as Section } from './Section';
+export * from './Section';
+
 export { default as ShadowView } from './ShadowView';
 export * from './ShadowView';
 

package/src/internal/icons/AppBarChevronLeft.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Path } from 'react-native-svg';
+import { createSvgIcon } from '../../utils';
+
+export default createSvgIcon(
+    <React.Fragment>
+        <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7.29289 12.7071C6.90237 12.3166 6.90237 11.6834 7.29289 11.2929L15.2929 3.29289C15.6834 2.90237 16.3166 2.90237 16.7071 3.29289C17.0976 3.68342 17.0976 4.31658 16.7071 4.70711L9.41421 12L16.7071 19.2929C17.0976 19.6834 17.0976 20.3166 16.7071 20.7071C16.3166 21.0976 15.6834 21.0976 15.2929 20.7071L7.29289 12.7071Z"
+        />
+    </React.Fragment>,
+    'AppBarChevronLeft',
+    '0 0 24 24',
+);

package/src/internal/icons/ChevronLeft.tsx

@@ -4,7 +4,10 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        d="M7.58594 12L14.293 18.7071C14.6836 19.0976 15.3167 19.0976 15.7073 18.7071C16.0978 18.3166 16.0978 17.6834 15.7073 17.2929L10.4144 12L15.7073 6.70711C16.0978 6.31658 16.0978 5.68342 15.7073 5.29289C15.3167 4.90237 14.6836 4.90237 14.293 5.29289L7.58594 12Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 12C3.16267e-09 11.7348 0.105357 11.4804 0.292893 11.2929L6.29289 5.29289C6.68342 4.90237 7.31658 4.90237 7.70711 5.29289C8.09763 5.68342 8.09763 6.31658 7.70711 6.70711L2.41421 12L7.70711 17.2929C8.09763 17.6834 8.09763 18.3166 7.70711 18.7071C7.31658 19.0976 6.68342 19.0976 6.29289 18.7071L0.292893 12.7071C0.105357 12.5196 -3.16267e-09 12.2652 0 12Z"
     />,
     'ChevronLeft',
+    '0 0 8 24',
 );