@fountain-ui/core 2.0.0-beta.92 → 2.0.0-beta.94

package/src/Chip/useChipStyle.ts

@@ -0,0 +1,123 @@
+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';
+
+interface ChipStyle {
+    container: FountainUiStyle;
+    endElement?: FountainUiStyle;
+    label: TextStyle;
+    startElement?: FountainUiStyle;
+}
+
+type VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;
+
+// TODO: need to refactoring...
+export default function useChipStyle(
+    size: ChipSize,
+    startElementVariant: ChipStartElementVariant,
+    isEndElement: boolean,
+): ChipStyle {
+    const theme = useTheme();
+
+    return useMemo<ChipStyle>(() => {
+        const fontStyleMap: Record<ChipSize, TextStyle> = {
+            small: createFontStyle(theme, {
+                // TODO: select typography.
+                // selector: (typography) => typography.caption1.medium,
+                color: theme.palette.text.strong,
+            }),
+            large: createFontStyle(theme, {
+                // TODO: select typography.
+                // selector: (typography) => typography.body2.medium,
+                color: theme.palette.text.strong,
+            }),
+        };
+
+        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,
+            borderRadius: theme.shape.radius.full,
+            flexDirection: 'row',
+            height: 'fit-content',
+            overflow: 'hidden',
+            width: 'fit-content',
+        };
+
+        const isLarge = size === 'large';
+
+        const variantStyleMap: VariantStyleMap = {
+            avatar: {
+                container: {
+                    paddingLeft: theme.spacing(isLarge ? 1.5 : 1.25),
+                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),
+                    paddingVertical: theme.spacing(isLarge ? 1.25 : 1),
+                },
+                startElement: {
+                    borderRadius: theme.shape.radius.full,
+                    height: isLarge ? 24 : 22,
+                    marginRight: theme.spacing(isLarge ? 1.5 : 1.25),
+                    width: isLarge ? 24 : 22,
+                },
+            },
+            icon: {
+                container: {
+                    paddingLeft: theme.spacing(1.5),
+                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),
+                    paddingVertical: theme.spacing(isLarge ? 1.5 : 1.25),
+                },
+                startElement: {
+                    alignItems: 'center',
+                    height: isLarge ? 22 : 20,
+                    justifyContent: 'center',
+                    marginRight: theme.spacing(isLarge ? 1 : 0.75),
+                    width: isLarge ? 22 : 20,
+                },
+            },
+            image: {
+                container: {
+                    alignItems: 'center',
+                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),
+                },
+                startElement: {
+                    borderRadius: theme.shape.radius.full,
+                    height: isLarge ? 34 : 30,
+                    marginRight: theme.spacing(1.5),
+                    width: isLarge ? 45 : 40,
+                },
+            },
+            default: {
+                container: {
+                    paddingBottom: theme.spacing(1.75),
+                    paddingHorizontal: theme.spacing(isLarge ? 3.5 : 3),
+                    paddingTop: theme.spacing(1.5),
+                },
+            },
+        };
+
+        return {
+            container: {
+                ...baseContainerStyle,
+                ...variantStyleMap[startElementVariant]?.container,
+                ...(isEndElement ? { paddingRight: theme.spacing(isLarge ? 2.5 : 2.25) } : {}),
+            },
+            endElement: endElementStyleMap[size],
+            label: fontStyleMap[size],
+            startElement: variantStyleMap[startElementVariant]?.startElement,
+        };
+    }, [theme, size, startElementVariant]);
+}

package/src/Empty/Empty.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import Button from '../Button/Button';
+import Column from '../Column';
+import Spacer from '../Spacer';
+import { createFontStyle, css, useTheme } from '../styles';
+import type { FalsyReactElement } from '../utils';
+import { cloneElementSafely } from '../utils';
+import type EmptyProps from './EmptyProps';
+
+type EmptyStyles = NamedStylesStringUnion<'root' | 'cta'>;
+
+const useStyles: UseStyles<EmptyStyles> = function (): EmptyStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            alignItems: 'center',
+            flex: 1,
+            justifyContent: 'center',
+            paddingHorizontal: theme.spacing(12),
+        },
+        cta: {
+            alignSelf: 'center',
+        },
+    };
+};
+
+export default function Empty(props: EmptyProps) {
+    const {
+        buttonTitle,
+        description,
+        headerContent: headerContentProp,
+        onButtonPress,
+        style: styleProp,
+        title,
+        ...otherProps
+    } = props;
+
+    const styles = useStyles();
+
+    const theme = useTheme();
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    const headerContent = cloneElementSafely(headerContentProp as FalsyReactElement);
+
+    const titleFontStyle = createFontStyle(theme, {
+        selector: (typography) => typography.header3.semiBold,
+        color: theme.palette.text.strong,
+    });
+
+    const descriptionFontStyle = createFontStyle(theme, {
+        // TODO: select typography.
+        // selector: (typography) =>  typography.body2.regular,
+        color: theme.palette.text.base,
+    });
+
+    return (
+        <Column
+            style={rootStyle}
+            {...otherProps}
+        >
+            {headerContent ? (
+                <React.Fragment>
+                    {headerContent}
+
+                    <Spacer size={6}/>
+                </React.Fragment>
+            ) : null}
+
+            <Text
+                children={title}
+                style={titleFontStyle}
+            />
+
+            {description ? (
+                <React.Fragment>
+                    <Spacer size={2}/>
+
+                    <Text
+                        children={description}
+                        style={descriptionFontStyle}
+                    />
+                </React.Fragment>
+            ) : null}
+
+            {buttonTitle && onButtonPress ? (
+                <React.Fragment>
+                    <Spacer size={6}/>
+
+                    {/* TODO: change Capsule solid variant. */}
+                    <Button
+                        children={buttonTitle}
+                        color={'accent'}
+                        onPress={onButtonPress}
+                        style={styles.cta}
+                        variant={'solid'}
+                    />
+                </React.Fragment>
+            ) : null}
+        </Column>
+    );
+}

package/src/Empty/EmptyProps.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { ViewProps } from 'react-native';
+import type { OverridableComponentProps } from '../types';
+
+export default interface EmptyProps extends OverridableComponentProps<Omit<ViewProps, 'children'>, {
+    /**
+     * Text displayed on the CTA button.
+     */
+    buttonTitle?: string;
+
+    /**
+     * Descriptive text shown below the title.
+     */
+    description?: string;
+
+    /**
+     * Content displayed at the top.
+     * Can be an icon, image, or any visual element.
+     */
+    headerContent?: React.ReactNode;
+
+    /**
+     * Function called when the CTA button is pressed.
+     */
+    onButtonPress?: () => void;
+
+    /**
+     * The main title text.
+     */
+    title: string;
+}> {}

package/src/Empty/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Empty';
+export type { default as EmptyProps } from './EmptyProps';

package/src/IconButton/IconButton.tsx

@@ -1,79 +1,68 @@
 import React from 'react';
-import { Text } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { StyleSheet } from 'react-native';
+import { commonColors, Theme } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase';
-import { createFontStyle, css, useTheme } from '../styles';
+import { css, useTheme } from '../styles';
+import type { SvgIconSize } from '../SvgIcon/SvgIconProps';
 import { cloneElementSafely } from '../utils';
 import type IconButtonProps from './IconButtonProps';
-import type { IconButtonSize } from './IconButtonProps';
+import type { IconButtonColor } from './IconButtonProps';
 
-type IconButtonStyles = NamedStylesStringUnion<'root'>;
+const styles = StyleSheet.create({
+    root: {
+        alignItems: 'center',
+        height: 32,
+        justifyContent: 'center',
+        width: 32,
+    },
+});
 
-type IconSizes = { [n in IconButtonSize]: number };
-
-const iconSizes: IconSizes = {
-    tiny: 16,
-    small: 20,
-    medium: 24,
-    large: 28,
-};
-
-const useStyles: UseStyles<IconButtonStyles> = function (): IconButtonStyles {
-    const theme = useTheme();
-
-    return {
-        root: {
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            padding: theme.spacing(1),
-        },
-    };
-};
+function selectIconColor(theme: Theme, color: IconButtonColor) {
+    switch (color) {
+        default:
+        case 'strong':
+            return theme.palette.icon.strong;
+        case 'base':
+            return theme.palette.icon.base;
+        case 'staticStrongInverse':
+            return commonColors.static.strongInverse;
+        case 'disabled':
+            return theme.palette.status.disabled;
+    }
+}
 
 export default function IconButton(props: IconButtonProps) {
     const {
         children,
-        color = 'primary',
+        color = 'strong' as IconButtonColor,
         disabled = false,
-        label,
         onPress,
-        size = 'medium',
+        iconSize = 'medium' as SvgIconSize,
         style,
         ...otherProps
     } = props;
 
     const theme = useTheme();
-    const styles = useStyles();
 
-    const icon = cloneElementSafely(children, {
-        width: iconSizes[size],
-        height: iconSizes[size],
-        color: color,
-    });
+    const iconColor = selectIconColor(theme, color);
 
-    const fontStyle = createFontStyle(theme, {
-        selector: (typo) => typo.caption1,
-        color: theme.palette[color].main,
+    const icon = cloneElementSafely(children, {
+        enableV2: true,
+        fill: iconColor,
+        size: iconSize,
     });
 
-    const labelStyle = css([
-        fontStyle,
-    ]);
-
     const rootStyle = css([
         styles.root,
         style,
     ]);
 
-    const handlePress = async () => {
+    const handlePress = () => {
         if (disabled) {
             return;
         }
-        if (onPress) {
-            onPress();
-            return;
-        }
+
+        onPress?.();
     };
 
     return (
@@ -84,13 +73,6 @@ export default function IconButton(props: IconButtonProps) {
             {...otherProps}
         >
             {icon}
-
-            {label ? (
-                <Text
-                    children={label}
-                    style={labelStyle}
-                />
-            ) : null}
         </ButtonBase>
     );
 };

package/src/IconButton/IconButtonProps.ts

@@ -1,10 +1,15 @@
 import React from 'react';
 import type { ButtonBaseProps } from '../ButtonBase';
-import type { CommonComponentColor, OverridableComponentProps } from '../types';
+import type { SvgIconSize } from '../SvgIcon/SvgIconProps';
+import type { OverridableComponentProps } from '../types';
 
-export type IconButtonColor = CommonComponentColor;
-
-export type IconButtonSize = 'medium' | 'large' | 'small' | 'tiny';
+export const iconButtonColors = [
+    'strong',
+    'base',
+    'staticStrongInverse',
+    'disabled',
+] as const;
+export type IconButtonColor = typeof iconButtonColors[number];
 
 export default interface IconButtonProps extends OverridableComponentProps<ButtonBaseProps, {
     /**
@@ -14,18 +19,13 @@ export default interface IconButtonProps extends OverridableComponentProps<Butto
 
     /**
      * The color of the component. It supports those theme colors that make sense for this component.
-     * @default 'primary'
+     * @default 'strong'
      */
     color?: IconButtonColor;
 
     /**
-     *  If present, this is typography displayed at the bottom of the icon.
-     */
-    label?: string;
-
-    /**
-     * The size of the button.
+     * Determines the size of the icon that goes inside the button.
      * @default 'medium'
      */
-    size?: IconButtonSize;
+    iconSize?: SvgIconSize;
 }> {}

package/src/IconButton/LegacyIconButton.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import ButtonBase from '../ButtonBase';
+import { createFontStyle, css, useTheme } from '../styles';
+import { cloneElementSafely } from '../utils';
+import type IconButtonProps from './LegacyIconButtonProps';
+import type { IconButtonSize } from './LegacyIconButtonProps';
+
+type IconButtonStyles = NamedStylesStringUnion<'root'>;
+
+type IconSizes = { [n in IconButtonSize]: number };
+
+const iconSizes: IconSizes = {
+    tiny: 16,
+    small: 20,
+    medium: 24,
+    large: 28,
+};
+
+const useStyles: UseStyles<IconButtonStyles> = function (): IconButtonStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: theme.spacing(1),
+        },
+    };
+};
+
+export default function IconButton(props: IconButtonProps) {
+    const {
+        children,
+        color = 'primary',
+        disabled = false,
+        label,
+        onPress,
+        size = 'medium',
+        style,
+        iconSize,
+        ...otherProps
+    } = props;
+
+    const theme = useTheme();
+    const styles = useStyles();
+
+    const icon = cloneElementSafely(children, {
+        width: iconSize ?? iconSizes[size],
+        height: iconSize ?? iconSizes[size],
+        color: color,
+    });
+
+    const fontStyle = createFontStyle(theme, {
+        selector: (typo) => typo.caption1,
+        color: theme.palette[color].main,
+    });
+
+    const labelStyle = css([
+        fontStyle,
+    ]);
+
+    const rootStyle = css([
+        styles.root,
+        style,
+    ]);
+
+    const handlePress = async () => {
+        if (disabled) {
+            return;
+        }
+        if (onPress) {
+            onPress();
+            return;
+        }
+    };
+
+    return (
+        <ButtonBase
+            disabled={disabled}
+            onPress={handlePress}
+            style={rootStyle}
+            {...otherProps}
+        >
+            {icon}
+
+            {label ? (
+                <Text
+                    children={label}
+                    style={labelStyle}
+                />
+            ) : null}
+        </ButtonBase>
+    );
+};

package/src/IconButton/LegacyIconButtonProps.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { ButtonBaseProps } from '../ButtonBase';
+import type { CommonComponentColor, OverridableComponentProps } from '../types';
+
+export type IconButtonColor = CommonComponentColor;
+
+export type IconButtonSize = 'medium' | 'large' | 'small' | 'tiny';
+
+export default interface IconButtonProps extends OverridableComponentProps<ButtonBaseProps, {
+    /**
+     * The icon element.
+     */
+    children: React.ReactElement;
+
+    /**
+     * The color of the component. It supports those theme colors that make sense for this component.
+     * @default 'primary'
+     */
+    color?: IconButtonColor;
+
+    /**
+     *  If present, this is typography displayed at the bottom of the icon.
+     */
+    label?: string;
+
+    /**
+     * The size of the button.
+     * @default 'medium'
+     */
+    size?: IconButtonSize;
+
+    /**
+     * The custom size of the Icon. Not preDefined.
+     */
+    iconSize?: number;
+}> {}

package/src/IconButton/index.ts

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