@fountain-ui/core 3.0.0-alpha.2 → 3.0.0-alpha.20

package/src/Chip/ChipProps.ts

@@ -2,6 +2,9 @@ import React from 'react';
 import { OverridableComponentProps } from '../types';
 import type { ButtonBaseProps } from '../ButtonBase';
 
+export const chipColors = ['default', 'white'] as const;
+export type ChipColor = typeof chipColors[number];
+
 export const chipSizes = ['large', 'small'] as const;
 export type ChipSize = typeof chipSizes[number];
 
@@ -10,20 +13,26 @@ export type ChipStartElementVariant = typeof chipStartElementVariants[number];
 
 export default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {
     /**
-     * Element placed after the children.
+     * The content of the component.
      */
-    endElement?: React.ReactElement;
+    children: string;
 
     /**
-     * The content of the component.
+     * Set backgroundColor of the component.
+     * @default 'default'
      */
-    children: string;
+    color?: ChipColor;
 
     /**
      * Number of lines of children.
      */
     numberOfLines?: number;
 
+    /**
+     * If `true`, showing a close icon and applying a highlighted style.
+     */
+    selected?: boolean;
+
     /**
      * Determines size of component.
      * @default 'small'

package/src/Chip/index.ts

@@ -1,3 +1,3 @@
 export { default } from './Chip';
 export type { default as ChipProps } from './ChipProps';
-export { chipSizes, chipStartElementVariants } from './ChipProps';
+export { chipColors, chipSizes, chipStartElementVariants } from './ChipProps';

package/src/Chip/useChipStyle.ts

@@ -2,13 +2,14 @@ import { useMemo } from 'react';
 import type { TextStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
 import { createFontStyle, useTheme } from '../styles';
-import type { ChipSize, ChipStartElementVariant } from './ChipProps';
+import type { ChipColor, ChipSize, ChipStartElementVariant } from './ChipProps';
 
 interface ChipStyle {
     container: FountainUiStyle;
-    endElement?: FountainUiStyle;
+    closeButton?: FountainUiStyle;
     label: TextStyle;
     startElement?: FountainUiStyle;
+    startElementContainer?: FountainUiStyle;
 }
 
 type VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;
@@ -17,7 +18,8 @@ type VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;
 export default function useChipStyle(
     size: ChipSize,
     startElementVariant: ChipStartElementVariant,
-    isEndElement: boolean,
+    color: ChipColor,
+    selected: boolean,
 ): ChipStyle {
     const theme = useTheme();
 
@@ -25,22 +27,22 @@ export default function useChipStyle(
         const fontStyleMap: Record<ChipSize, TextStyle> = {
             small: createFontStyle(theme, {
                 selector: (typography) => typography.caption1.medium,
-                color: theme.palette.text.strong,
+                color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong,
             }),
             large: createFontStyle(theme, {
                 selector: (typography) => typography.body2.medium,
-                color: theme.palette.text.strong,
+                color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong,
             }),
         };
 
-        const endElementStyleMap: Record<ChipSize, FountainUiStyle> = {
+        const closeButtonStyleMap: Record<ChipSize, FountainUiStyle> = {
             small: {
                 height: 14,
                 marginLeft: theme.spacing(2),
                 width: 8.17,
             },
             large: {
-                height: 16,
+                height: 17,
                 marginLeft: theme.spacing(2.5),
                 width: 9,
             },
@@ -48,7 +50,10 @@ export default function useChipStyle(
 
         const baseContainerStyle: FountainUiStyle = {
             alignItems: 'center',
-            backgroundColor: theme.palette.fill.weaker,
+            backgroundColor: selected ? theme.palette.fill.base
+                : color === 'white'
+                    ? theme.palette.surface.base
+                    : theme.palette.fill.weaker,
             borderRadius: theme.shape.radius.full,
             flexDirection: 'row',
             overflow: 'hidden',
@@ -65,9 +70,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 +84,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,9 +105,11 @@ 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: {
@@ -109,11 +125,12 @@ 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],
+            closeButton: closeButtonStyleMap[size],
             label: fontStyleMap[size],
             startElement: variantStyleMap[startElementVariant]?.startElement,
+            startElementContainer: variantStyleMap[startElementVariant]?.startElementContainer,
         };
-    }, [theme, size, startElementVariant]);
+    }, [theme, size, startElementVariant, color, selected]);
 }

package/src/Dialog/Dialog.tsx

@@ -14,7 +14,6 @@ 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();
 
@@ -51,7 +50,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 +69,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 +77,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 +96,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;
 
@@ -124,7 +123,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 +142,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: topSafeAreaInset,
+            },
         };
 
-        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/ImageCore/ImageCoreNative.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useContext } from 'react';
 import { Animated } from 'react-native';
-import FastImage from 'react-native-fast-image';
+import FastImage from '@d11/react-native-fast-image';
 import { useAnimatedValue } from '../hooks';
 import { isNotAndroid12 } from '../utils';
 import type ImageCoreProps from './ImageCoreProps';