@fountain-ui/core 2.0.0-beta.91 → 2.0.0-beta.93

package/src/Button/ButtonProps.ts

@@ -1,12 +1,30 @@
 import React from 'react';
 import type { ButtonBaseProps } from '../ButtonBase';
-import type { OverridableComponentProps, CommonComponentColor } from '../types';
+import type { OverridableComponentProps } from '../types';
 
-export type ButtonColor = CommonComponentColor;
+export const ButtonColors = [
+    'accent',
+    'primary',
+    'danger',
+    'disabled',
+    'secondary',
+    'accentAlt',
+] as const;
+export type ButtonColor = typeof ButtonColors[number];
 
-export type ButtonSize = 'small' | 'medium';
+export const ButtonSizes = [
+    'small',
+    'medium',
+    'large',
+] as const;
+export type ButtonSize = typeof ButtonSizes[number];
 
-export type ButtonVariant = 'contained' | 'outlined' | 'text';
+export const ButtonVariants = [
+    'solid',
+    'outlined',
+    'text',
+] as const;
+export type ButtonVariant = typeof ButtonVariants[number];
 
 export default interface ButtonProps extends OverridableComponentProps<ButtonBaseProps, {
     /**
@@ -14,19 +32,18 @@ export default interface ButtonProps extends OverridableComponentProps<ButtonBas
      */
     children: string;
 
-    /**
-     * If `true`, remove horizontal padding and minimum width.
-     * This prop only applied on `text` variant.
-     * @default false
-     */
-    clipHorizontalSpacing?: boolean;
-
     /**
      * The color of the component. It supports those theme colors that make sense for this component.
      * @default 'primary'
      */
     color?: ButtonColor;
 
+    /**
+     * Determines whether minWidth should be applied.
+     * @default false
+     */
+    disableMinWidth?: boolean;
+
     /**
      * Element placed after the children.
      */
@@ -56,7 +73,7 @@ export default interface ButtonProps extends OverridableComponentProps<ButtonBas
 
     /**
      * The variant to use.
-     * @default 'contained'
+     * @default 'solid'
      */
     variant?: ButtonVariant;
 }> {}

package/src/Button/LegacyButton.tsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import { Linking, Text } from 'react-native';
+import ButtonBase from '../ButtonBase';
+import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
+import { cloneElementSafely } from '../utils';
+import type ButtonProps from './LegacyButtonProps';
+import type { ButtonSize } from './LegacyButtonProps';
+
+type IconSizes = { [n in ButtonSize]: number };
+
+const iconSizes: IconSizes = {
+    small: 20,
+    medium: 24,
+};
+
+const styles = StyleSheet.create({
+    root: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    fullWidth: {
+        width: '100%',
+    },
+    medium: {
+        minWidth: 104,
+        height: 48,
+    },
+    small: {
+        minWidth: 56,
+        height: 32,
+    },
+});
+
+export default function Button(props: ButtonProps) {
+    const {
+        children,
+        clipHorizontalSpacing = false,
+        color = 'primary',
+        disabled = false,
+        endIcon: endIconProp,
+        fullWidth = false,
+        href,
+        onPress,
+        pressEffect,
+        size = 'medium',
+        startIcon: startIconProp,
+        style: styleProp,
+        variant = 'contained',
+        ...otherProps
+    } = props;
+
+    const theme = useTheme();
+
+    const mainColor = theme.palette[color].main;
+
+    const fontColor = variant === 'contained'
+        ? theme.palette[color].contrastTextColor
+        : theme.palette[color].main;
+
+    const variantStyleMap = {
+        contained: {
+            backgroundColor: mainColor,
+        },
+        outlined: {
+            backgroundColor: 'transparent',
+            borderColor: mainColor,
+            borderStyle: 'solid',
+            borderWidth: 1,
+        },
+        text: {
+            backgroundColor: 'transparent',
+        },
+    };
+
+    const iconProps = {
+        width: iconSizes[size],
+        height: iconSizes[size],
+        fill: fontColor,
+    };
+
+    const startIcon = cloneElementSafely(startIconProp, iconProps);
+    const endIcon = cloneElementSafely(endIconProp, iconProps);
+
+    const paddingSize = size === 'small' ? theme.spacing(3) : theme.spacing(4);
+    const paddingLeft = startIcon ? paddingSize - theme.spacing(1) : paddingSize;
+    const paddingRight = endIcon ? paddingSize - theme.spacing(1) : paddingSize;
+
+    const borderRadius = theme.shape.roundnessLarge;
+    const buttonBaseStyle = css([
+        styles.root,
+        variantStyleMap[variant],
+        size === 'medium' ? styles.medium : styles.small,
+        fullWidth ? styles.fullWidth : undefined,
+        { borderRadius, color: fontColor },
+        (variant === 'text' && clipHorizontalSpacing)
+            ? { minWidth: 0 }
+            : { paddingLeft, paddingRight },
+        styleProp,
+    ]);
+
+    const fontStyle = createFontStyle(theme, {
+        selector: (typo) => size === 'small' ? typo.button2 : typo.button1,
+        color: fontColor,
+    });
+
+    const textMarginSize = size === 'small' ? theme.spacing(1) : theme.spacing(2);
+    const textMarginStyle = startIcon
+        ? { marginLeft: textMarginSize }
+        : endIcon
+            ? { marginRight: textMarginSize }
+            : undefined;
+
+    const textStyle = css([
+        fontStyle,
+        textMarginStyle,
+        { textAlign: 'center' },
+    ]);
+
+    const modifiedPressEffect = variant !== 'text' && !pressEffect
+        ? 'scale'
+        : pressEffect;
+
+    const handlePress = async () => {
+        if (disabled) {
+            return;
+        }
+        if (onPress) {
+            onPress();
+            return;
+        }
+        if (href) {
+            if (await Linking.canOpenURL(href)) {
+                await Linking.openURL(href);
+            }
+        }
+    };
+
+    return (
+        <ButtonBase
+            disabled={disabled}
+            onPress={handlePress}
+            style={buttonBaseStyle}
+            pressEffect={modifiedPressEffect}
+            {...otherProps}
+        >
+            {startIcon}
+
+            <Text
+                children={children}
+                style={textStyle}
+            />
+
+            {endIcon}
+        </ButtonBase>
+    );
+};

package/src/Button/LegacyButtonProps.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+import type { ButtonBaseProps } from '../ButtonBase';
+import type { OverridableComponentProps, CommonComponentColor } from '../types';
+
+export type ButtonColor = CommonComponentColor;
+
+export type ButtonSize = 'small' | 'medium';
+
+export type ButtonVariant = 'contained' | 'outlined' | 'text';
+
+export default interface ButtonProps extends OverridableComponentProps<ButtonBaseProps, {
+    /**
+     * The content of the button.
+     */
+    children: string;
+
+    /**
+     * If `true`, remove horizontal padding and minimum width.
+     * This prop only applied on `text` variant.
+     * @default false
+     */
+    clipHorizontalSpacing?: boolean;
+
+    /**
+     * The color of the component. It supports those theme colors that make sense for this component.
+     * @default 'primary'
+     */
+    color?: ButtonColor;
+
+    /**
+     * Element placed after the children.
+     */
+    endIcon?: React.ReactElement;
+
+    /**
+     * If `true`, the button will take up the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+
+    /**
+     * The URL to link to when the button is clicked.
+     */
+    href?: string;
+
+    /**
+     * The size of the button.
+     * @default 'medium'
+     */
+    size?: ButtonSize;
+
+    /**
+     * Element placed before the children.
+     */
+    startIcon?: React.ReactElement;
+
+    /**
+     * The variant to use.
+     * @default 'contained'
+     */
+    variant?: ButtonVariant;
+}> {}

package/src/Button/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Button';
-export type { default as ButtonProps } from './ButtonProps';
+export { default } from './LegacyButton';
+export type { default as ButtonProps } from './LegacyButtonProps';

package/src/Button/useVariantStyleMap.ts

@@ -0,0 +1,99 @@
+import { useMemo } from 'react';
+import { commonColors } from '@fountain-ui/styles';
+import { useTheme } from '../styles';
+import { ButtonColor, ButtonVariant } from './ButtonProps';
+
+type UseVariantStyleMapReturns = {
+    borderColor?: string;
+    fillColor?: string;
+    iconColor?: string;
+    labelColor?: string;
+}
+
+type VariantStyleMap = {
+    [variant in ButtonVariant]: {
+        [color in ButtonColor]?: UseVariantStyleMapReturns;
+    }
+};
+
+export default function useVariantStyleMap(variant: ButtonVariant, color: ButtonColor): UseVariantStyleMapReturns {
+    const theme = useTheme();
+
+    return useMemo(() => {
+        const { palette } = theme;
+
+        const variantStyleMap: VariantStyleMap = {
+            solid: {
+                accent: {
+                    fillColor: palette.fill.accent,
+                    labelColor: commonColors.static.strongInverse,
+                    iconColor: commonColors.static.strongInverse,
+                },
+                primary: {
+                    fillColor: palette.fill.base,
+                    labelColor: palette.text.strongInverse,
+                    iconColor: palette.icon.strongInverse,
+                },
+                danger: {
+                    fillColor: palette.status.danger,
+                    labelColor: commonColors.static.strongInverse,
+                    iconColor: commonColors.static.strongInverse,
+                },
+                disabled: {
+                    fillColor: palette.status.disabled,
+                    labelColor: palette.status.onDisabled,
+                    iconColor: palette.status.onDisabled,
+                },
+            },
+            outlined: {
+                accent: {
+                    borderColor: palette.border.accent,
+                    labelColor: palette.text.accent,
+                    iconColor: palette.icon.accent,
+                },
+                primary: {
+                    borderColor: palette.border.base,
+                    labelColor: palette.text.base,
+                    iconColor: palette.icon.base,
+                },
+                disabled: {
+                    borderColor: palette.status.disabled,
+                    labelColor: palette.status.disabledLabel,
+                    iconColor: palette.status.disabledLabel,
+                },
+            },
+            text: {
+                primary: {
+                    labelColor: palette.text.strong,
+                    iconColor: palette.icon.strong,
+                },
+                secondary: {
+                    labelColor: palette.text.base,
+                    iconColor: palette.icon.base,
+                },
+                accent: {
+                    labelColor: palette.text.accent,
+                    iconColor: palette.icon.accent,
+                },
+                accentAlt: {
+                    labelColor: palette.text.accentAlt,
+                    iconColor: palette.icon.accentAlt,
+                },
+                disabled: {
+                    labelColor: palette.status.disabledLabel,
+                    iconColor: palette.status.disabledLabel,
+                },
+            },
+        };
+
+        if (variantStyleMap[variant][color]) {
+            return variantStyleMap[variant][color] as UseVariantStyleMapReturns;
+        }
+
+        if (process.env.NODE_ENV !== 'production') {
+            console.warn('The selected color is not supported for the chosen variant.');
+        }
+
+        return {};
+    }, [theme, variant, color]);
+}

package/src/ButtonSet/ButtonSet.tsx

@@ -0,0 +1,43 @@
+import React, { Children } from 'react';
+import { View } from 'react-native';
+import type { FalsyReactElement } from '../utils';
+import { cloneElementSafely } from '../utils';
+import type ButtonSetProps from './ButtonSetProps';
+import type { ButtonSetColor, ButtonSetVariant } from './ButtonSetProps';
+import useVariantStyleMap from './useVariantStyleMap';
+import { css } from '../styles';
+
+export default function ButtonSet(props: ButtonSetProps) {
+    const {
+        children,
+        color = 'accent' as ButtonSetColor,
+        variant = 'horizontal' as ButtonSetVariant,
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const {
+        containerStyle,
+        buttonStyleMap,
+    } = useVariantStyleMap(variant, color);
+
+    const buttons = Children.map(children, (child, index) => {
+        const props = {
+            ...buttonStyleMap[index],
+            ...(variant === 'horizontal' ? { style: { flex: 1 } } : {}),
+        };
+        return cloneElementSafely(child as FalsyReactElement, props);
+    });
+
+    return (
+        <View
+            {...otherProps}
+            style={css([
+                containerStyle,
+                styleProp,
+            ])}
+        >
+            {buttons}
+        </View>
+    );
+}

package/src/ButtonSet/ButtonSetProps.ts

@@ -0,0 +1,27 @@
+import type { PropsWithChildren } from 'react';
+import type { ViewProps } from 'react-native';
+import type { OverridableComponentProps } from '../types';
+
+export const buttonSetColors = [
+    'accent',
+    'danger',
+    'warning',
+] as const;
+export type ButtonSetColor = typeof buttonSetColors[number];
+
+export const buttonSetVariants = ['horizontal', 'vertical'] as const;
+export type ButtonSetVariant = typeof buttonSetVariants[number];
+
+export default interface ButtonSetProps extends OverridableComponentProps<PropsWithChildren<ViewProps>, {
+    /**
+     * Determines the base color of the button set that goes inside.
+     * @default 'accent'
+     */
+    color?: ButtonSetColor;
+
+    /**
+     * Determines design variations of the component.
+     * @default 'horizontal'
+     */
+    variant?: ButtonSetVariant;
+}> {}

package/src/ButtonSet/index.ts

@@ -0,0 +1,3 @@
+export { default } from './ButtonSet';
+export type { default as ButtonSetProps, ButtonSetColor, ButtonSetVariant } from './ButtonSetProps';
+export { buttonSetColors, buttonSetVariants } from './ButtonSetProps';

package/src/ButtonSet/useVariantStyleMap.ts

@@ -0,0 +1,84 @@
+import { useMemo } from 'react';
+import type { FountainUiStyle } from '@fountain-ui/styles';
+import { useTheme } from '@fountain-ui/styles';
+import type ButtonProps from '../Button/ButtonProps';
+import type { ButtonSetColor, ButtonSetVariant } from './ButtonSetProps';
+
+type ButtonStyle = Partial<ButtonProps>;
+
+type ButtonStyleMap = {
+    [color in ButtonSetColor]?: ButtonStyle[];
+};
+
+type VariantButtonStyleMap = {
+    [variant in ButtonSetVariant]: {
+        containerStyle: FountainUiStyle;
+        buttonStyleMap: ButtonStyleMap;
+    };
+};
+
+type UseVariantButtonStyleMapReturns = {
+    containerStyle: FountainUiStyle;
+    buttonStyleMap: ButtonStyle[];
+};
+
+export default function useVariantStyleMap(variant: ButtonSetVariant, color: ButtonSetColor): UseVariantButtonStyleMapReturns {
+    const theme = useTheme();
+
+    return useMemo(() => {
+        const variantStyleMap: VariantButtonStyleMap = {
+            horizontal: {
+                containerStyle: {
+                    flexDirection: 'row',
+                    gap: theme.spacing(2),
+                    paddingVertical: theme.spacing(2),
+                },
+                buttonStyleMap: {
+                    accent: [
+                        { color: 'primary', variant: 'outlined' },
+                        { color: 'accent', variant: 'solid' },
+                    ],
+                    danger: [
+                        { color: 'primary', variant: 'outlined' },
+                        { color: 'danger', variant: 'solid' },
+                    ],
+                },
+            },
+            vertical: {
+                containerStyle: {
+                    flexDirection: 'column',
+                    gap: theme.spacing(2.5),
+                    paddingTop: theme.spacing(2),
+                },
+                buttonStyleMap: {
+                    accent: [
+                        { color: 'accent', variant: 'solid' },
+                        { color: 'secondary', variant: 'text' },
+                    ],
+                    danger: [
+                        { color: 'danger', variant: 'solid' },
+                        { color: 'secondary', variant: 'text' },
+                    ],
+                    warning: [
+                        { color: 'primary', variant: 'solid' },
+                        { color: 'danger', variant: 'text' },
+                    ],
+                },
+            },
+        };
+
+        const {
+            containerStyle,
+            buttonStyleMap,
+        } = variantStyleMap[variant];
+
+        if (process.env.NODE_ENV !== 'production' && buttonStyleMap[color] === undefined) {
+            console.warn('The selected color is not supported for the chosen variant.');
+        }
+
+        return {
+            containerStyle,
+            buttonStyleMap: buttonStyleMap[color] ?? [],
+        };
+    }, [theme, variant, color]);
+}

package/src/Checkbox/Checkbox.tsx

@@ -1,39 +1,41 @@
 import React from 'react';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import type CheckboxProps from './CheckboxProps';
+import { Text, View } from 'react-native';
 import ButtonBase from '../ButtonBase';
-import { Checkbox as CheckboxIcon, CheckboxChecked as CheckboxCheckedIcon } from '../internal/icons';
-import { css } from '../styles';
-
-type CheckboxStyle = NamedStylesStringUnion<'root'>;
-
-const useStyles: UseStyles<CheckboxStyle> = function (): CheckboxStyle {
-    return {
-        root: {
-            width: 24,
-            height: 24,
-            justifyContent: 'center',
-            alignItems: 'center',
-        },
-    };
-};
+import { CheckboxOn as CheckboxOnIcon } from '../internal/icons';
+import Row from '../Row';
+import { createFontStyle, css, useTheme } from '../styles';
+import type CheckboxProps from './CheckboxProps';
+import type { CheckboxVariant } from './CheckboxProps';
+import useVariantStyleMap from './useVariantStyleMap';
 
 export default function Checkbox(props: CheckboxProps) {
     const {
         checked = false,
-        checkedIcon: checkedIconProp,
-        color = 'primary',
+        children,
         disabled = false,
-        icon: iconProp,
         onChange,
-        style,
+        style: styleProp,
+        variant = 'square' as CheckboxVariant,
         ...otherProps
     } = props;
 
-    const styles = useStyles();
+    const theme = useTheme();
 
-    const uncheckedIcon = iconProp ? iconProp : <CheckboxIcon color={color}/>;
-    const checkedIcon = checkedIconProp ? checkedIconProp : <CheckboxCheckedIcon color={color}/>;
+    const {
+        checkboxStyle,
+        containerStyle,
+        iconColor,
+    } = useVariantStyleMap(variant, checked);
+
+    const rootStyle = css([
+        children ? containerStyle : undefined,
+        styleProp,
+    ]);
+
+    const fontStyle = createFontStyle(theme, {
+        // TODO: apply typo select.
+        color: theme.palette.text.strong,
+    });
 
     const handlePress = () => {
         if (onChange) {
@@ -41,11 +43,6 @@ export default function Checkbox(props: CheckboxProps) {
         }
     };
 
-    const rootStyle = css([
-        styles.root,
-        style,
-    ]);
-
     return (
         <ButtonBase
             disabled={disabled}
@@ -53,10 +50,28 @@ export default function Checkbox(props: CheckboxProps) {
             style={rootStyle}
             {...otherProps}
         >
-            {checked
-                ? checkedIcon
-                : uncheckedIcon
-            }
+            <View style={checkboxStyle}>
+                {checked ? (
+                    <CheckboxOnIcon
+                        fill={iconColor}
+                        enableV2={true}
+                        height={7.5}
+                        width={11}
+                    />
+                ) : null}
+            </View>
+
+            {children ? (
+                <Row
+                    flexGrow={1}
+                    flexShrink={1}
+                >
+                    <Text
+                        children={children}
+                        style={fontStyle}
+                    />
+                </Row>
+            ) : null}
         </ButtonBase>
     );
 };