@fountain-ui/core 2.0.0-beta.98 → 3.0.0-alpha.10

package/src/Checkbox/useVariantStyleMap.ts

@@ -12,6 +12,7 @@ const styles = StyleSheet.create({
 });
 
 type useVariantStyleMapReturns = {
+    checkboxContainerStyle?: FountainUiStyle;
     checkboxStyle?: FountainUiStyle;
     containerStyle?: FountainUiStyle;
     iconColor?: string;
@@ -23,6 +24,10 @@ export default function useVariantStyleMap(variant: CheckboxVariant, checked: bo
     switch (variant) {
         case 'square':
             return {
+                checkboxContainerStyle: {
+                    alignSelf: 'flex-start',
+                    paddingTop: 3,
+                },
                 checkboxStyle: css([
                     styles.checkbox,
                     {
@@ -37,9 +42,9 @@ export default function useVariantStyleMap(variant: CheckboxVariant, checked: bo
                     },
                 ]),
                 containerStyle: {
-                    alignItems: 'center',
                     flexDirection: 'row',
                     gap: theme.spacing(3),
+                    paddingVertical: theme.spacing(2),
                 },
                 iconColor: theme.palette.fill.baseAlt,
             };
@@ -60,8 +65,11 @@ export default function useVariantStyleMap(variant: CheckboxVariant, checked: bo
                 ]),
                 containerStyle: {
                     alignItems: 'center',
+                    borderBottomColor: theme.palette.border.weak,
+                    borderBottomWidth: 0.5,
                     flexDirection: 'row-reverse',
                     gap: theme.spacing(8),
+                    paddingVertical: theme.spacing(3.5),
                 },
                 iconColor: commonColors.static.strongInverse,
             };

package/src/Chip/index.ts

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

package/src/Chip/useChipStyle.ts

@@ -24,13 +24,11 @@ export default function useChipStyle(
     return useMemo<ChipStyle>(() => {
         const fontStyleMap: Record<ChipSize, TextStyle> = {
             small: createFontStyle(theme, {
-                // TODO: select typography.
-                // selector: (typography) => typography.caption1.medium,
+                selector: (typography) => typography.caption1.medium,
                 color: theme.palette.text.strong,
             }),
             large: createFontStyle(theme, {
-                // TODO: select typography.
-                // selector: (typography) => typography.body2.medium,
+                selector: (typography) => typography.body2.medium,
                 color: theme.palette.text.strong,
             }),
         };
@@ -53,9 +51,7 @@ export default function useChipStyle(
             backgroundColor: theme.palette.fill.weaker,
             borderRadius: theme.shape.radius.full,
             flexDirection: 'row',
-            height: 'fit-content',
             overflow: 'hidden',
-            width: 'fit-content',
         };
 
         const isLarge = size === 'large';

package/src/Dialog/Dialog.tsx

@@ -1,12 +1,11 @@
-import React, { Children, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { LayoutChangeEvent, useWindowDimensions } from 'react-native';
 import { css } from '@fountain-ui/styles';
 import Column from '../Column';
-import DialogMedia from '../DialogMedia/DialogMedia';
 import Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';
-import Paper from '../Paper';
-import { cloneElementSafely, FalsyReactElement } from '../utils';
+import ShadowView from '../ShadowView';
 import type DialogProps from './DialogProps';
+import { DialogProvider } from './DialogContext';
 import useDialogStyle from './useDialogStyle';
 
 const TOP_ELEMENT_OFFSET = 20;
@@ -109,14 +108,6 @@ export default function Dialog(props: DialogProps) {
         styleProp,
     ]);
 
-    const contents = Children.map(children, (child) => {
-        // @ts-ignore
-        if (child.type === DialogMedia) {
-            return cloneElementSafely(child as FalsyReactElement, { style: styles.mediaWrapper });
-        }
-        return child;
-    });
-
     return (
         <Modal
             animationStyle={styles.container}
@@ -131,7 +122,7 @@ export default function Dialog(props: DialogProps) {
             style={styles.root}
             {...otherProps}
         >
-            <React.Fragment>
+            <DialogProvider value={{ size }}>
                 {topElement ? (
                     <Column style={fullScreen ? undefined : styles.topElementContainer}>
                         <Column
@@ -143,14 +134,13 @@ export default function Dialog(props: DialogProps) {
                     </Column>
                 ) : null}
 
-                <Paper
-                    elevation={6}
-                    square={fullScreen}
+                <ShadowView
+                    variant={600}
                     style={paperStyle}
                 >
-                    {contents}
-                </Paper>
-            </React.Fragment>
+                    {children}
+                </ShadowView>
+            </DialogProvider>
         </Modal>
     );
 };

package/src/Dialog/DialogContext.tsx

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+import type { DialogSize } from './DialogProps';
+
+export type Context = {
+    size: DialogSize;
+};
+
+const DialogContext = createContext<Context>({
+    size: 'medium',
+});
+
+export const DialogProvider = DialogContext.Provider;
+
+export const useDialogContext = () => useContext(DialogContext);

package/src/Dialog/index.ts

@@ -1,2 +1,5 @@
-export { default } from './LegacyDialog';
-export type { default as DialogProps } from './LegacyDialogProps';
+export { default } from './Dialog';
+export type { default as DialogProps } from './DialogProps';
+export { dialogSizes } from './DialogProps';
+export { DialogProvider, useDialogContext } from './DialogContext';
+export { default as useDialogSectionStyle } from './useDialogSectionStyle';

package/src/Dialog/useDialogSectionStyle.ts

@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
+import type { FountainUiStyle } from '@fountain-ui/styles';
+import { useTheme } from '../styles';
+import { useDialogContext } from './DialogContext';
+import type { DialogSize } from './DialogProps';
+
+export default function useDialogSectionStyle() {
+    const { size } = useDialogContext();
+
+    const { width: windowWidth } = useWindowDimensions();
+
+    const theme = useTheme();
+
+    return useMemo<FountainUiStyle>(() => {
+        const sizePaddingHorizontalMap: Record<DialogSize, FountainUiStyle> = {
+            small: {
+                paddingHorizontal: theme.spacing(6),
+            },
+            medium: {
+                // TODO: need to refactor breakpoints.
+                paddingHorizontal: theme.spacing(windowWidth >= 448 ? 8 : 6),
+            },
+            large: {
+                paddingHorizontal: theme.spacing(8),
+            },
+        };
+
+        return sizePaddingHorizontalMap[size];
+    }, [size, theme, windowWidth]);
+}

package/src/Dialog/useDialogStyle.ts

@@ -4,18 +4,12 @@ import type { FountainUiStyle, NamedStylesStringUnion } from '@fountain-ui/style
 import { useTheme } from '../styles';
 import type { DialogSize } from './DialogProps';
 
-type SizeStyleMap = FountainUiStyle & {
-    maxWidth: number;
-    paddingHorizontal: number;
-}
-
 type DialogStyleKeys =
     | 'root'
     | 'container'
     | 'paper'
     | 'topElementContainer'
-    | 'topElementContent'
-    | 'mediaWrapper';
+    | 'topElementContent';
 
 type DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;
 
@@ -28,27 +22,22 @@ export default function useDialogStyle(size: DialogSize, fullScreen: boolean): D
     } = useWindowDimensions();
 
     return useMemo(() => {
-        const sizeStyleMap: Record<DialogSize, SizeStyleMap> = {
+        const sizeStyleMap: Record<DialogSize, FountainUiStyle> = {
             small: {
                 maxWidth: 260,
-                paddingHorizontal: theme.spacing(6),
             },
             medium: {
                 maxWidth: 400,
-                // TODO: need to refactor breakpoints.
-                paddingHorizontal: theme.spacing(windowWidth >= 448 ? 8 : 6),
             },
             large: {
                 maxWidth: 512,
                 minHeight: 360,
-                paddingHorizontal: theme.spacing(8),
                 width: 512,
             },
         };
 
-        const marginVertical = theme.spacing(6);
-        const dialogMaxHeight = windowHeight - marginVertical * 2;
-        const paddingHorizontal = sizeStyleMap[size]?.paddingHorizontal;
+        const containerPaddingVertical = theme.spacing(6);
+        const dialogMaxHeight = windowHeight - containerPaddingVertical * 2;
         const dialogMaxWidth = sizeStyleMap[size]?.maxWidth;
 
         return {
@@ -61,13 +50,19 @@ export default function useDialogStyle(size: DialogSize, fullScreen: boolean): D
                 height: '100%',
                 width: '100%',
             } : {
+                alignItems: 'center',
                 // TODO: need to refactor breakpoints.
-                marginHorizontal: theme.spacing(windowWidth > 320 ? 6 : 4),
+                paddingHorizontal: theme.spacing(windowWidth > 320 ? 6 : 4),
+                paddingVertical: containerPaddingVertical,
+                width: '100%',
             },
             paper: fullScreen ? {
-                flexGrow: 1,
+                backgroundColor: theme.palette.surface.base,
+                height: '100%',
+                width: '100%',
             } : {
-                marginVertical,
+                backgroundColor: theme.palette.surface.base,
+                borderRadius: theme.shape.radius.xl,
                 maxHeight: dialogMaxHeight,
                 overflow: 'hidden',
                 width: '100%',
@@ -79,12 +74,9 @@ export default function useDialogStyle(size: DialogSize, fullScreen: boolean): D
             },
             topElementContent: {
                 position: 'absolute',
-                bottom: -1 * theme.spacing(4),
+                bottom: 0,
                 width: '100%',
             },
-            mediaWrapper: {
-                marginHorizontal: theme.spacing(4) - (paddingHorizontal ?? 0),
-            },
         };
     }, [theme, windowHeight, windowWidth, size, fullScreen]);
 }

package/src/DialogActions/DialogActions.tsx

@@ -1,18 +1,43 @@
 import React from 'react';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import Column from '../Column';
-import { EdgeInsets } from '../styles';
+import { useDialogSectionStyle } from '../Dialog';
+import { css, useTheme } from '../styles';
 import type DialogActionsProps from './DialogActionsProps';
 
+type DialogActionsStyles = NamedStylesStringUnion<'root'>;
+
+const useStyles: UseStyles<DialogActionsStyles> = function (): DialogActionsStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            paddingTop: theme.spacing(2),
+            paddingBottom: theme.spacing(4),
+        },
+    };
+};
+
 export default function DialogActions(props: DialogActionsProps) {
     const {
         children,
+        style: styleProp,
         ...otherProps
     } = props;
 
+    const styles = useStyles();
+
+    const sectionStyle = useDialogSectionStyle();
+
+    const rootStyle = css([
+        styles.root,
+        sectionStyle,
+        styleProp,
+    ]);
+
     return (
         <Column
-            alignItems={'center'}
-            insets={EdgeInsets.fromLTRB(0, 2, 0, 4)}
+            style={rootStyle}
             {...otherProps}
         >
             {children}

package/src/DialogActions/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyDialogActions';
+export { default } from './DialogActions';
 export type { default as DialogActionsProps } from './DialogActionsProps';

package/src/DialogContent/DialogContent.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ScrollView, Text, TextStyle } from 'react-native';
 import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { useDialogSectionStyle } from '../Dialog';
 import { createFontStyle, css, useTheme } from '../styles';
 import type DialogContentProps from './DialogContentProps';
 
@@ -30,14 +31,16 @@ export default function DialogContent(props: DialogContentProps) {
 
     const styles = useStyles();
 
+    const sectionStyle = useDialogSectionStyle();
+
     const rootStyle = css([
         styles.root,
+        sectionStyle,
         styleProp,
     ]);
 
     const contentFontStyle = createFontStyle(theme, {
-        // TODO: select typography.
-        // selector: (typography) => typography.body2.regular,
+        selector: (typography) => typography.body2.regular,
         color: theme.palette.text.base,
     });
 
@@ -48,6 +51,7 @@ export default function DialogContent(props: DialogContentProps) {
 
     return (
         <ScrollView
+            bounces={false}
             style={rootStyle}
             {...otherProps}
         >

package/src/DialogContent/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyDialogContent';
-export type { default as DialogContentProps } from './LegacyDialogContentProps';
+export { default } from './DialogContent';
+export type { default as DialogContentProps } from './DialogContentProps';

package/src/DialogMedia/DialogMedia.tsx

@@ -17,6 +17,7 @@ const useStyles: UseStyles<DialogMediaStyles> = function (): DialogMediaStyles {
             paddingTop: theme.spacing(8),
         },
         image: {
+            paddingHorizontal: theme.spacing(4),
             paddingTop: theme.spacing(4),
         },
     };

package/src/DialogMedia/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyDialogMedia';
-export type { default as DialogMediaProps } from './LegacyDialogMediaProps';
+export { default } from './DialogMedia';
+export type { default as DialogMediaProps } from './DialogMediaProps';

package/src/DialogTitle/DialogTitle.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 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 type DialogTitleProps from './DialogTitleProps';
 
@@ -30,8 +31,11 @@ export default function DialogTitle(props: DialogTitleProps) {
 
     const styles = useStyles();
 
+    const sectionStyle = useDialogSectionStyle();
+
     const rootStyle = css([
         styles.root,
+        sectionStyle,
         styleProp,
     ]);
 

package/src/DialogTitle/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyDialogTitle';
-export type { default as DialogTitleProps } from './LegacyDialogTitleProps';
+export { default } from './DialogTitle';
+export type { default as DialogTitleProps } from './DialogTitleProps';

package/src/Divider/Divider.tsx

@@ -96,7 +96,7 @@ export default function Divider(props: DividerProps) {
     };
 
     const fontStyle = createFontStyle(theme, {
-        selector: (typo) => typo.caption2,
+        selector: (typo) => typo.caption2.medium,
         color: fontColor,
     });
 

package/src/Divider/DividerProps.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import type { ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
 
-export const elementAligns = ['start', 'center', 'end'] as const;
-export type ElementAlign = typeof elementAligns[number];
+export const dividerElementAligns = ['start', 'center', 'end'] as const;
+export type DividerElementAlign = typeof dividerElementAligns[number];
 
 export const dividerVariants = ['base', 'strong'] as const;
 export type DividerVariant = typeof dividerVariants[number];
@@ -42,7 +42,7 @@ export default interface DividerProps extends OverridableComponentProps<ViewProp
      *  Set position of children.
      *  @default center
      */
-    elementAlign?: ElementAlign;
+    elementAlign?: DividerElementAlign;
 
     /**
      * Select the style of the divider based on this value.

package/src/Divider/index.ts

@@ -1,2 +1,3 @@
-export { default } from './LegacyDivider';
-export type { default as DividerProps } from './LegacyDividerProps';
+export { default } from './Divider';
+export type { default as DividerProps } from './DividerProps';
+export { dividerVariants, dividerElementAligns } from './DividerProps';

package/src/Empty/Empty.tsx

@@ -19,7 +19,7 @@ const useStyles: UseStyles<EmptyStyles> = function (): EmptyStyles {
             alignItems: 'center',
             flex: 1,
             justifyContent: 'center',
-            paddingHorizontal: theme.spacing(12),
+            paddingHorizontal: theme.spacing(5),
         },
         cta: {
             alignSelf: 'center',
@@ -55,8 +55,7 @@ export default function Empty(props: EmptyProps) {
     });
 
     const descriptionFontStyle = createFontStyle(theme, {
-        // TODO: select typography.
-        // selector: (typography) =>  typography.body2.regular,
+        selector: (typography) => typography.body3.regular,
         color: theme.palette.text.base,
     });
 
@@ -93,13 +92,12 @@ export default function Empty(props: EmptyProps) {
                 <React.Fragment>
                     <Spacer size={6}/>
 
-                    {/* TODO: change Capsule solid variant. */}
                     <Button
                         children={buttonTitle}
                         color={'accent'}
                         onPress={onButtonPress}
                         style={styles.cta}
-                        variant={'solid'}
+                        variant={'capsuleSolid'}
                     />
                 </React.Fragment>
             ) : null}

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { commonColors, Theme } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase';
+import { LoadingSpinner } from '../internal';
 import { css, useTheme } from '../styles';
 import type { SvgIconSize } from '../SvgIcon/SvgIconProps';
 import { cloneElementSafely } from '../utils';
@@ -15,8 +16,17 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         width: 32,
     },
+    loadingSpinner: {
+        position: 'absolute',
+    },
 });
 
+const loadingSpinnerSizeMap: Record<SvgIconSize, number> = {
+    small: 14,
+    medium: 16,
+    large: 18,
+};
+
 function selectIconColor(theme: Theme, color: IconButtonColor) {
     switch (color) {
         default:
@@ -34,16 +44,18 @@ function selectIconColor(theme: Theme, color: IconButtonColor) {
 export default function IconButton(props: IconButtonProps) {
     const {
         children,
-        color = 'strong' as IconButtonColor,
+        color: colorProp = 'strong' as IconButtonColor,
         disabled = false,
         onPress,
         iconSize = 'medium' as SvgIconSize,
+        isLoading = false,
         style,
         ...otherProps
     } = props;
 
     const theme = useTheme();
 
+    const color: IconButtonColor = disabled ? 'disabled' : colorProp;
     const iconColor = selectIconColor(theme, color);
 
     const icon = cloneElementSafely(children, {
@@ -57,6 +69,18 @@ export default function IconButton(props: IconButtonProps) {
         style,
     ]);
 
+    const contentStyle = css({
+        opacity: isLoading ? 0 : 1,
+    });
+
+    const loadingSpinnerStyle = css([
+        styles.loadingSpinner,
+        {
+            height: loadingSpinnerSizeMap[iconSize],
+            width: loadingSpinnerSizeMap[iconSize],
+        },
+    ]);
+
     const handlePress = () => {
         if (disabled) {
             return;
@@ -72,7 +96,13 @@ export default function IconButton(props: IconButtonProps) {
             style={rootStyle}
             {...otherProps}
         >
-            {icon}
+            <View style={contentStyle}>
+                {icon}
+            </View>
+
+            {isLoading ? (
+                <LoadingSpinner style={loadingSpinnerStyle}/>
+            ) : null}
         </ButtonBase>
     );
 };

package/src/IconButton/IconButtonProps.ts

@@ -28,4 +28,10 @@ export default interface IconButtonProps extends OverridableComponentProps<Butto
      * @default 'medium'
      */
     iconSize?: SvgIconSize;
+
+    /**
+     * Determines whether to show the loading status or not.
+     * @default false
+     */
+    isLoading?: boolean;
 }> {}

package/src/IconButton/index.ts

@@ -1,2 +1,3 @@
-export { default } from './LegacyIconButton';
-export type { default as IconButtonProps } from './LegacyIconButtonProps';
+export { default } from './IconButton';
+export type { default as IconButtonProps } from './IconButtonProps';
+export { iconButtonColors } from './IconButtonProps';