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

package/src/Chip/useChipStyle.ts

@@ -1,57 +1,89 @@
 import { useMemo } from 'react';
 import type { TextStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
+import type { SvgIconProps } from '../SvgIcon';
 import { createFontStyle, useTheme } from '../styles';
-import type { ChipSize, ChipStartElementVariant } from './ChipProps';
+import type { ChipColor, ChipSize, ChipStartElementVariant, ChipVariant } from './ChipProps';
 
 interface ChipStyle {
     container: FountainUiStyle;
-    endElement?: FountainUiStyle;
+    closeButtonContainer?: FountainUiStyle;
+    closeIconSize?: Pick<SvgIconProps, 'height' | 'width'>;
     label: TextStyle;
     startElement?: FountainUiStyle;
+    startElementContainer?: FountainUiStyle;
 }
 
 type VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;
 
+const closeButtonContainerStyleMap: Record<ChipSize, FountainUiStyle> = {
+    small: {
+        marginLeft: 8,
+        paddingTop: 1,
+    },
+    large: {
+        marginLeft: 10,
+        paddingTop: 1,
+    },
+};
+
+const closeIconSize: Record<ChipSize, ChipStyle['closeIconSize']> = {
+    small: {
+        height: 14,
+        width: 8.17,
+    },
+    large: {
+        height: 16,
+        width: 9,
+    },
+};
+
 // TODO: need to refactoring...
 export default function useChipStyle(
     size: ChipSize,
     startElementVariant: ChipStartElementVariant,
-    isEndElement: boolean,
+    color: ChipColor,
+    selected: boolean,
+    variant: ChipVariant = 'filled',
 ): ChipStyle {
     const theme = useTheme();
 
     return useMemo<ChipStyle>(() => {
+        const isOutlined = variant === 'outlined';
+
+        const textColor = selected
+            ? theme.palette.text.strongInverse
+            : isOutlined
+                ? theme.palette.text.base
+                : theme.palette.text.strong;
+
         const fontStyleMap: Record<ChipSize, TextStyle> = {
             small: createFontStyle(theme, {
                 selector: (typography) => typography.caption1.medium,
-                color: theme.palette.text.strong,
+                color: textColor,
             }),
             large: createFontStyle(theme, {
                 selector: (typography) => typography.body2.medium,
-                color: theme.palette.text.strong,
+                color: textColor,
             }),
         };
 
-        const endElementStyleMap: Record<ChipSize, FountainUiStyle> = {
-            small: {
-                height: 14,
-                marginLeft: theme.spacing(2),
-                width: 8.17,
-            },
-            large: {
-                height: 16,
-                marginLeft: theme.spacing(2.5),
-                width: 9,
-            },
-        };
-
         const baseContainerStyle: FountainUiStyle = {
             alignItems: 'center',
-            backgroundColor: theme.palette.fill.weaker,
+            backgroundColor: selected
+                ? theme.palette.fill.base
+                : isOutlined
+                    ? 'transparent'
+                    : color === 'white'
+                        ? theme.palette.surface.base
+                        : theme.palette.fill.weaker,
             borderRadius: theme.shape.radius.full,
             flexDirection: 'row',
             overflow: 'hidden',
+            ...(isOutlined && {
+                borderWidth: 1,
+                borderColor: theme.palette.border.weak,
+            }),
         };
 
         const isLarge = size === 'large';
@@ -65,9 +97,11 @@ export default function useChipStyle(
                 },
                 startElement: {
                     borderRadius: theme.shape.radius.full,
-                    height: isLarge ? 24 : 22,
+                    height: isLarge ? 26 : 23,
+                    width: isLarge ? 26 : 23,
+                },
+                startElementContainer: {
                     marginRight: theme.spacing(isLarge ? 1.5 : 1.25),
-                    width: isLarge ? 24 : 22,
                 },
             },
             icon: {
@@ -77,11 +111,18 @@ export default function useChipStyle(
                     paddingVertical: theme.spacing(isLarge ? 1.5 : 1.25),
                 },
                 startElement: {
+                    color: selected
+                        ? theme.palette.icon.strongInverse
+                        : theme.palette.icon.strong,
+                    height: isLarge ? 17 : 16,
+                    width: isLarge ? 17 : 16,
+                },
+                startElementContainer: {
                     alignItems: 'center',
-                    height: isLarge ? 22 : 20,
+                    height: isLarge ? 24 : 21,
                     justifyContent: 'center',
                     marginRight: theme.spacing(isLarge ? 1 : 0.75),
-                    width: isLarge ? 22 : 20,
+                    width: isLarge ? 24 : 21,
                 },
             },
             image: {
@@ -91,15 +132,18 @@ export default function useChipStyle(
                 },
                 startElement: {
                     borderRadius: theme.shape.radius.full,
-                    height: isLarge ? 34 : 30,
+                    height: isLarge ? 36 : 31,
+                    width: isLarge ? 48 : 40,
+                },
+                startElementContainer: {
                     marginRight: theme.spacing(1.5),
-                    width: isLarge ? 45 : 40,
                 },
             },
             default: {
                 container: {
                     paddingBottom: theme.spacing(1.75),
-                    paddingHorizontal: theme.spacing(isLarge ? 3.5 : 3),
+                    paddingLeft: theme.spacing(isLarge ? 3.5 : 3),
+                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),
                     paddingTop: theme.spacing(1.5),
                 },
             },
@@ -109,11 +153,13 @@ export default function useChipStyle(
             container: {
                 ...baseContainerStyle,
                 ...variantStyleMap[startElementVariant]?.container,
-                ...(isEndElement ? { paddingRight: theme.spacing(isLarge ? 2.5 : 2.25) } : {}),
+                ...(selected ? { paddingRight: theme.spacing(isLarge ? 2.5 : 2.25) } : {}),
             },
-            endElement: endElementStyleMap[size],
+            closeButtonContainer: closeButtonContainerStyleMap[size],
+            closeIconSize: closeIconSize[size],
             label: fontStyleMap[size],
             startElement: variantStyleMap[startElementVariant]?.startElement,
+            startElementContainer: variantStyleMap[startElementVariant]?.startElementContainer,
         };
-    }, [theme, size, startElementVariant]);
+    }, [theme, size, startElementVariant, color, selected, variant]);
 }

package/src/Dialog/Dialog.tsx

@@ -8,13 +8,12 @@ import type DialogProps from './DialogProps';
 import { DialogProvider } from './DialogContext';
 import useDialogStyle from './useDialogStyle';
 
-const TOP_ELEMENT_OFFSET = 20;
+const TOP_ELEMENT_HIDDEN_OFFSET = 20;
 
 export default function Dialog(props: DialogProps) {
     const {
         animationType = ANIMATION_TYPE.SLIDE,
         children,
-        fullScreen = false,
         hideBackdrop,
         onClose,
         style: styleProp,
@@ -24,7 +23,7 @@ export default function Dialog(props: DialogProps) {
         ...otherProps
     } = props;
 
-    const styles = useDialogStyle(size, fullScreen);
+    const styles = useDialogStyle(size);
 
     const { height: screenHeight } = useWindowDimensions();
 
@@ -39,8 +38,10 @@ export default function Dialog(props: DialogProps) {
             return [];
         }
 
+        const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);
+
         return [{
-            toValue: (topElementHeight - TOP_ELEMENT_OFFSET) / 2,
+            toValue: (topElementHeightWithoutOffset) / 2,
             type: ANIMATION_TYPE.SLIDE,
         }];
     }, [topElementHeight]);
@@ -51,7 +52,7 @@ export default function Dialog(props: DialogProps) {
                 toValue: 0,
                 type: ANIMATION_TYPE.FADE,
             }];
-        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
+        } else if (animationType === ANIMATION_TYPE.SLIDE) {
             return [
                 {
                     toValue: screenHeight,
@@ -70,7 +71,7 @@ export default function Dialog(props: DialogProps) {
             toValue: screenHeight,
             type: ANIMATION_TYPE.SLIDE,
         }];
-    }, [animationType, fullScreen, screenHeight]);
+    }, [animationType, screenHeight]);
 
     const openAnimation = useMemo<AnimationUnit[]>(() => {
         if (animationType === ANIMATION_TYPE.FADE) {
@@ -78,7 +79,7 @@ export default function Dialog(props: DialogProps) {
                 toValue: 1,
                 type: ANIMATION_TYPE.FADE,
             }];
-        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
+        } else if (animationType === ANIMATION_TYPE.SLIDE) {
             return [
                 {
                     toValue: 0,
@@ -97,9 +98,9 @@ export default function Dialog(props: DialogProps) {
             toValue: 0,
             type: ANIMATION_TYPE.SLIDE,
         }];
-    }, [animationType, fullScreen]);
+    }, [animationType]);
 
-    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;
+    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE ? 1 : undefined;
 
     const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;
 
@@ -111,6 +112,7 @@ export default function Dialog(props: DialogProps) {
     return (
         <Modal
             animationStyle={styles.container}
+            avoidKeyboard={size !== 'full'}
             closeAnimation={closeAnimation}
             hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}
             initialOpacity={initialOpacity}
@@ -124,7 +126,7 @@ export default function Dialog(props: DialogProps) {
         >
             <DialogProvider value={{ size }}>
                 {topElement ? (
-                    <Column style={fullScreen ? undefined : styles.topElementContainer}>
+                    <Column style={styles.topElementContainer}>
                         <Column
                             style={styles.topElementContent}
                             onLayout={handleTopElementLayout}
@@ -143,4 +145,4 @@ export default function Dialog(props: DialogProps) {
             </DialogProvider>
         </Modal>
     );
-};
+}

package/src/Dialog/DialogProps.ts

@@ -3,7 +3,7 @@ import type { ModalProps } from '../Modal';
 import type { OverridableComponentProps } from '../types';
 import { ANIMATION_TYPE } from '../Modal';
 
-export const dialogSizes = ['small', 'medium', 'large'] as const;
+export const dialogSizes = ['small', 'medium', 'large', 'full'] as const;
 export type DialogSize = typeof dialogSizes[number];
 
 export default interface DialogProps extends OverridableComponentProps<ModalProps, {
@@ -18,12 +18,6 @@ export default interface DialogProps extends OverridableComponentProps<ModalProp
      */
     children?: React.ReactNode;
 
-    /**
-     * If `true`, the dialog is full-screen.
-     * @default false
-     */
-    fullScreen?: boolean;
-
     /**
      * Determines the minWidth of the Dialog.
      * @default 'medium'

package/src/Dialog/useDialogSectionStyle.ts

@@ -15,14 +15,16 @@ export default function useDialogSectionStyle() {
     return useMemo<FountainUiStyle>(() => {
         const sizePaddingHorizontalMap: Record<DialogSize, FountainUiStyle> = {
             small: {
-                paddingHorizontal: theme.spacing(6),
+                paddingHorizontal: 24,
             },
             medium: {
-                // TODO: need to refactor breakpoints.
-                paddingHorizontal: theme.spacing(windowWidth >= 448 ? 8 : 6),
+                paddingHorizontal: windowWidth >= 448 ? 32 : 24,
             },
             large: {
-                paddingHorizontal: theme.spacing(8),
+                paddingHorizontal: 32,
+            },
+            full: {
+                paddingHorizontal: windowWidth >= 448 ? 32 : 24,
             },
         };
 

package/src/Dialog/useDialogStyle.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { FountainUiStyle, NamedStylesStringUnion } from '@fountain-ui/styles';
 import { useTheme } from '../styles';
 import type { DialogSize } from './DialogProps';
@@ -13,7 +14,7 @@ type DialogStyleKeys =
 
 type DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;
 
-export default function useDialogStyle(size: DialogSize, fullScreen: boolean): DialogStyles {
+export default function useDialogStyle(size: DialogSize): DialogStyles {
     const theme = useTheme();
 
     const {
@@ -21,6 +22,11 @@ export default function useDialogStyle(size: DialogSize, fullScreen: boolean): D
         width: windowWidth,
     } = useWindowDimensions();
 
+    const {
+        bottom: bottomSafeAreaInset,
+        top: topSafeAreaInset,
+    } = useSafeAreaInsets();
+
     return useMemo(() => {
         const sizeStyleMap: Record<DialogSize, FountainUiStyle> = {
             small: {
@@ -34,32 +40,38 @@ export default function useDialogStyle(size: DialogSize, fullScreen: boolean): D
                 minHeight: 360,
                 width: 512,
             },
+            full: {
+                paddingBottom: bottomSafeAreaInset,
+                paddingTop: Math.max(0, topSafeAreaInset - 3),
+            },
         };
 
-        const containerPaddingVertical = theme.spacing(6);
+        const containerPaddingVertical = 24;
         const dialogMaxHeight = windowHeight - containerPaddingVertical * 2;
         const dialogMaxWidth = sizeStyleMap[size]?.maxWidth;
 
+        const isFullScreen = size === 'full';
+
         return {
             root: {
                 alignItems: 'center',
                 justifyContent: 'center',
                 zIndex: theme.zIndex.dialog,
             },
-            container: fullScreen ? {
+            container: isFullScreen ? {
                 height: '100%',
                 width: '100%',
             } : {
                 alignItems: 'center',
-                // TODO: need to refactor breakpoints.
-                paddingHorizontal: theme.spacing(windowWidth > 320 ? 6 : 4),
+                paddingHorizontal: windowWidth > theme.breakpoints.values.xs ? 24 : 16,
                 paddingVertical: containerPaddingVertical,
                 width: '100%',
             },
-            paper: fullScreen ? {
+            paper: isFullScreen ? {
                 backgroundColor: theme.palette.surface.base,
                 height: '100%',
                 width: '100%',
+                ...sizeStyleMap[size],
             } : {
                 backgroundColor: theme.palette.surface.base,
                 borderRadius: theme.shape.radius.xl,
@@ -78,5 +90,5 @@ export default function useDialogStyle(size: DialogSize, fullScreen: boolean): D
                 width: '100%',
             },
         };
-    }, [theme, windowHeight, windowWidth, size, fullScreen]);
+    }, [theme, windowHeight, windowWidth, size, bottomSafeAreaInset, topSafeAreaInset]);
 }

package/src/DialogActions/DialogActions.tsx

@@ -12,7 +12,6 @@ const useStyles: UseStyles<DialogActionsStyles> = function (): DialogActionsStyl
 
     return {
         root: {
-            paddingTop: theme.spacing(2),
             paddingBottom: theme.spacing(4),
         },
     };

package/src/DialogTitle/DialogLargeTitle.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import type { DialogProps } from '../Dialog';
+import type DialogTitleProps from './DialogTitleProps';
+import { createFontStyle, css, useTheme } from '../styles';
+import IconButton from '../IconButton';
+import { ChevronLeft, Close } from '../internal';
+
+const styles = StyleSheet.create({
+    root: {
+        alignItems: 'center',
+        height: 64,
+        justifyContent: 'center',
+        paddingHorizontal: 80,
+        width: '100%',
+    },
+    backButton: {
+        height: 40,
+        left: 20,
+        paddingLeft: 5,
+        paddingRight: 11,
+        paddingVertical: 8,
+        position: 'absolute',
+        width: 40,
+    },
+    closeButton: {
+        height: 40,
+        left: 20,
+        padding: 8,
+        position: 'absolute',
+        width: 40,
+    },
+});
+
+interface DialogLargeTitleProps extends DialogTitleProps {
+    closeButtonType?: 'back' | 'close';
+    onClose: DialogProps['onClose'];
+}
+
+export default function DialogLargeTitle(props: DialogLargeTitleProps) {
+    const {
+        children,
+        closeButtonType = 'close',
+        onClose,
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const theme = useTheme();
+
+    const fontStyle = createFontStyle(theme, {
+        selector: (typo) => typo.header4.semiBold,
+        color: theme.palette.text.strong,
+    });
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    return (
+        <View
+            style={rootStyle}
+            {...otherProps}
+        >
+            {typeof onClose === 'function' ? (
+                closeButtonType === 'back' ? (
+                    <IconButton
+                        style={styles.backButton}
+                        onPress={onClose}
+                    >
+                        <ChevronLeft
+                            color={'strong'}
+                            size={'large'}
+                        />
+                    </IconButton>
+                ) : (
+                    <IconButton
+                        style={styles.closeButton}
+                        onPress={onClose}
+                    >
+                        <Close
+                            color={'strong'}
+                            size={'large'}
+                        />
+                    </IconButton>
+                )
+            ) : null}
+
+            <Text style={fontStyle}>
+                {children}
+            </Text>
+        </View>
+    );
+}

package/src/DialogTitle/DialogTitle.tsx

@@ -3,6 +3,7 @@ import { Text, View } from 'react-native';
 import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { useDialogSectionStyle } from '../Dialog';
 import { createFontStyle, css, useTheme } from '../styles';
+import DialogLargeTitle from './DialogLargeTitle';
 import type DialogTitleProps from './DialogTitleProps';
 
 type DialogTitleStyles = NamedStylesStringUnion<'root' | 'title'>;
@@ -20,7 +21,7 @@ const useStyles: UseStyles<DialogTitleStyles> = function (): DialogTitleStyles {
     };
 };
 
-export default function DialogTitle(props: DialogTitleProps) {
+const DialogTitle = (props: DialogTitleProps) => {
     const {
         children,
         style: styleProp,
@@ -62,3 +63,7 @@ export default function DialogTitle(props: DialogTitleProps) {
         </View>
     );
 };
+
+DialogTitle.Large = DialogLargeTitle;
+
+export default DialogTitle;

package/src/Divider/Divider.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import type { Theme } from '@fountain-ui/styles';
+import { commonColors } from '@fountain-ui/styles';
 import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
 import { ExtendedStyle } from '../types';
 import type DividerProps from './DividerProps';
@@ -29,6 +30,10 @@ function selectBorderColor(theme: Theme, variant: DividerVariant, vertical: bool
             return vertical ? theme.palette.border.weaker : theme.palette.border.weak;
         case 'strong':
             return vertical ? theme.palette.border.weak : theme.palette.border.base;
+        case 'strongStatic':
+            return commonColors.opacity.white['13'];
+        case 'baseStatic':
+            return commonColors.opacity.white['10'];
     }
 }
 

package/src/Divider/DividerProps.ts

@@ -5,7 +5,7 @@ import type { OverridableComponentProps } from '../types';
 export const dividerElementAligns = ['start', 'center', 'end'] as const;
 export type DividerElementAlign = typeof dividerElementAligns[number];
 
-export const dividerVariants = ['base', 'strong'] as const;
+export const dividerVariants = ['base', 'strong', 'baseStatic', 'strongStatic'] as const;
 export type DividerVariant = typeof dividerVariants[number];
 
 export default interface DividerProps extends OverridableComponentProps<ViewProps, {

package/src/Empty/Empty.tsx

@@ -55,7 +55,7 @@ export default function Empty(props: EmptyProps) {
     });
 
     const descriptionFontStyle = createFontStyle(theme, {
-        selector: (typography) => typography.body2.regular,
+        selector: (typography) => typography.body3.regular,
         color: theme.palette.text.base,
     });
 

package/src/Flexbox/Flexbox.tsx

@@ -27,6 +27,7 @@ export default function createFlexbox(direction: 'row' | 'column') {
             flexGrow,
             flexShrink,
             flexWrap,
+            gap,
             children,
             insets,
             justifyContent,
@@ -46,6 +47,7 @@ export default function createFlexbox(direction: 'row' | 'column') {
             flexGrow,
             flexShrink,
             flexWrap,
+            gap,
             justifyContent,
             overflow,
         };

package/src/Flexbox/FlexboxProps.ts

@@ -48,6 +48,11 @@ export default interface FlexboxProps extends OverridableComponentProps<ViewProp
      */
     flexWrap?: FlexStyle['flexWrap'];
 
+    /**
+     * Defines the spacing between items in a flex container.
+     */
+    gap?: number | undefined;
+
     /**
      * Content of this component.
      */

package/src/IconButton/IconButton.tsx

@@ -36,6 +36,8 @@ function selectIconColor(theme: Theme, color: IconButtonColor) {
             return theme.palette.icon.base;
         case 'staticStrongInverse':
             return commonColors.static.strongInverse;
+        case 'staticBaseOpacityInverse':
+            return commonColors.static.baseOpacityInverse;
         case 'disabled':
             return theme.palette.status.disabled;
     }

package/src/IconButton/IconButtonProps.ts

@@ -7,6 +7,7 @@ export const iconButtonColors = [
     'strong',
     'base',
     'staticStrongInverse',
+    'staticBaseOpacityInverse',
     'disabled',
 ] as const;
 export type IconButtonColor = typeof iconButtonColors[number];

package/src/Image/Image.tsx

@@ -5,6 +5,8 @@ import type { ImageCoreProps } from '../ImageCore';
 import ImageCore from '../ImageCore';
 import { css, StyleSheet, useTheme } from '../styles';
 import type ImageProps from './ImageProps';
+import OverlayCloseButton from './OverlayCloseButton';
+import preload from './preload';
 
 type PlaceholderMode =
     | 'default'
@@ -34,9 +36,9 @@ const useStyles: UseStyles<ImageStyles> = function (): ImageStyles {
             backgroundColor: theme.palette.paper.grey,
         },
         outlined: {
-            borderWidth: StyleSheet.hairlineWidth,
+            borderWidth: 0.5,
             borderStyle: 'solid',
-            borderColor: theme.palette.paper.grey,
+            borderColor: theme.palette.border.weak,
         },
         error: {
             alignItems: 'center',
@@ -63,11 +65,12 @@ function determinePlaceholderMode(props: ImageProps): PlaceholderMode {
     return props.placeholder ? 'custom' : 'default';
 }
 
-export default function Image(props: ImageProps) {
+function Image(props: ImageProps) {
     const {
         alt,
         cache = 'immutable',
         disableDrag,
+        disableFadeIn,
         disableLongClick,
         disableOutline,
         disablePlaceholder,
@@ -138,6 +141,7 @@ export default function Image(props: ImageProps) {
                     alt={alt}
                     cache={cache}
                     disableDrag={disableDrag}
+                    disableFadeIn={disableFadeIn}
                     disableLongClick={disableLongClick}
                     height={'100%'}
                     loading={loading}
@@ -156,4 +160,9 @@ export default function Image(props: ImageProps) {
             ) : null}
         </View>
     );
-};
+}
+
+Image.OverlayCloseButton = OverlayCloseButton;
+Image.preload = preload;
+
+export default Image;