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

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>
     );
 };

package/src/Checkbox/CheckboxProps.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-import type { CommonComponentColor, OverridableComponentProps } from '../types';
+import type { OverridableComponentProps } from '../types';
 import type { ButtonBaseProps } from '../ButtonBase';
 
 type BaseProps = Omit<ButtonBaseProps, 'onPress' | 'children'>;
 
-export type CheckboxColor = CommonComponentColor;
+export const checkboxVariants = ['square', 'round'] as const;
+export type CheckboxVariant = typeof checkboxVariants[number];
 
 export default interface CheckboxProps extends OverridableComponentProps<BaseProps, {
     /**
@@ -14,15 +14,9 @@ export default interface CheckboxProps extends OverridableComponentProps<BasePro
     checked?: boolean;
 
     /**
-     * The checked Icon which is replaced.
+     * Content which is sharing pressable next to checkbox.
      */
-    checkedIcon?: React.ReactElement;
-
-    /**
-     * The color of the component. It supports those theme colors that make sense for this component.
-     * @default 'primary'
-     */
-    color?: CheckboxColor;
+    children?: string;
 
     /**
      * If `true`, the checkbox is disabled.
@@ -31,12 +25,13 @@ export default interface CheckboxProps extends OverridableComponentProps<BasePro
     disabled?: boolean;
 
     /**
-     * The unchecked Icon which is replaced.
+     * Callback fired when the state is changed.
      */
-    icon?: React.ReactElement;
+    onChange?: (newChecked: boolean) => void;
 
     /**
-     * Callback fired when the state is changed.
+     * Determines the shape and style of the checkbox.
+     * @default 'square'
      */
-    onChange?: (newChecked: boolean) => void;
+    variant?: CheckboxVariant
 }> {}

package/src/Checkbox/LegacyCheckbox.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import ButtonBase from '../ButtonBase';
+import { Checkbox as CheckboxIcon, CheckboxChecked as CheckboxCheckedIcon } from '../internal/icons';
+import { css } from '../styles';
+import type CheckboxProps from './LegacyCheckboxProps';
+
+type CheckboxStyle = NamedStylesStringUnion<'root'>;
+
+const useStyles: UseStyles<CheckboxStyle> = function (): CheckboxStyle {
+    return {
+        root: {
+            width: 24,
+            height: 24,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+    };
+};
+
+export default function Checkbox(props: CheckboxProps) {
+    const {
+        checked = false,
+        checkedIcon: checkedIconProp,
+        color = 'primary',
+        disabled = false,
+        icon: iconProp,
+        onChange,
+        style,
+        ...otherProps
+    } = props;
+
+    const styles = useStyles();
+
+    const uncheckedIcon = iconProp ? iconProp : <CheckboxIcon color={color}/>;
+    const checkedIcon = checkedIconProp ? checkedIconProp : <CheckboxCheckedIcon color={color}/>;
+
+    const handlePress = () => {
+        if (onChange) {
+            onChange(!checked);
+        }
+    };
+
+    const rootStyle = css([
+        styles.root,
+        style,
+    ]);
+
+    return (
+        <ButtonBase
+            disabled={disabled}
+            onPress={handlePress}
+            style={rootStyle}
+            {...otherProps}
+        >
+            {checked
+                ? checkedIcon
+                : uncheckedIcon
+            }
+        </ButtonBase>
+    );
+};

package/src/Checkbox/LegacyCheckboxProps.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { CommonComponentColor, OverridableComponentProps } from '../types';
+import type { ButtonBaseProps } from '../ButtonBase';
+
+type BaseProps = Omit<ButtonBaseProps, 'onPress' | 'children'>;
+
+export type CheckboxColor = CommonComponentColor;
+
+export default interface CheckboxProps extends OverridableComponentProps<BaseProps, {
+    /**
+     * If `true`, the component is checked.
+     * @default false
+     */
+    checked?: boolean;
+
+    /**
+     * The checked Icon which is replaced.
+     */
+    checkedIcon?: React.ReactElement;
+
+    /**
+     * The color of the component. It supports those theme colors that make sense for this component.
+     * @default 'primary'
+     */
+    color?: CheckboxColor;
+
+    /**
+     * If `true`, the checkbox is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * The unchecked Icon which is replaced.
+     */
+    icon?: React.ReactElement;
+
+    /**
+     * Callback fired when the state is changed.
+     */
+    onChange?: (newChecked: boolean) => void;
+}> {}

package/src/Checkbox/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Checkbox';
-export type { default as CheckboxProps } from './CheckboxProps';
+export { default } from './LegacyCheckbox';
+export type { default as CheckboxProps } from './LegacyCheckboxProps';

package/src/Checkbox/useVariantStyleMap.ts

@@ -0,0 +1,71 @@
+import { StyleSheet } from 'react-native';
+import { commonColors, FountainUiStyle } from '@fountain-ui/styles';
+import { css, useTheme } from '../styles';
+import type { CheckboxVariant } from './CheckboxProps';
+
+const styles = StyleSheet.create({
+    checkbox: {
+        alignItems: 'center',
+        borderWidth: 1,
+        justifyContent: 'center',
+    },
+});
+
+type useVariantStyleMapReturns = {
+    checkboxStyle?: FountainUiStyle;
+    containerStyle?: FountainUiStyle;
+    iconColor?: string;
+};
+
+export default function useVariantStyleMap(variant: CheckboxVariant, checked: boolean): useVariantStyleMapReturns {
+    const theme = useTheme();
+
+    switch (variant) {
+        case 'square':
+            return {
+                checkboxStyle: css([
+                    styles.checkbox,
+                    {
+                        borderColor: theme.palette.border.base,
+                        borderRadius: theme.shape.radius.xs,
+                        height: 18,
+                        width: 18,
+                        ...(checked ? {
+                            backgroundColor: theme.palette.fill.base,
+                            borderColor: theme.palette.fill.base,
+                        } : {}),
+                    },
+                ]),
+                containerStyle: {
+                    alignItems: 'center',
+                    flexDirection: 'row',
+                    gap: theme.spacing(3),
+                },
+                iconColor: theme.palette.fill.baseAlt,
+            };
+        case 'round':
+            return {
+                checkboxStyle: css([
+                    styles.checkbox,
+                    {
+                        borderColor: theme.palette.border.base,
+                        borderRadius: theme.shape.radius.full,
+                        height: 20,
+                        width: 20,
+                        ...(checked ? {
+                            backgroundColor: theme.palette.fill.accent,
+                            borderColor: theme.palette.fill.accent,
+                        } : {}),
+                    },
+                ]),
+                containerStyle: {
+                    alignItems: 'center',
+                    flexDirection: 'row-reverse',
+                    gap: theme.spacing(8),
+                },
+                iconColor: commonColors.static.strongInverse,
+            };
+        default:
+            return {};
+    }
+}

package/src/CheckboxGroup/CheckboxGroup.tsx

@@ -0,0 +1,47 @@
+import React, { Children } from 'react';
+import { View } from 'react-native';
+import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import type { CheckboxVariant } from '../Checkbox/CheckboxProps';
+import { useTheme } from '../styles';
+import type { FalsyReactElement } from '../utils';
+import { cloneElementSafely } from '../utils';
+import type CheckboxGroupProps from './CheckboxGroupProps';
+
+type CheckboxItemStyles = NamedStylesStringUnion<CheckboxVariant>;
+
+const useStyles: UseStyles<CheckboxItemStyles> = function (): CheckboxItemStyles {
+    const theme = useTheme();
+
+    return {
+        square: {
+            paddingVertical: theme.spacing(2),
+        },
+        round: {
+            borderBottomColor: theme.palette.border.weak,
+            borderBottomWidth: 0.5,
+            paddingVertical: theme.spacing(3.5),
+        },
+    };
+};
+
+export default function CheckboxGroup(props: CheckboxGroupProps) {
+    const {
+        children,
+        variant = 'square' as CheckboxVariant,
+        ...otherProps
+    } = props;
+
+    const styles = useStyles();
+
+    const content = Children.map(children, (child) => (
+        <View style={styles[variant]}>
+            {cloneElementSafely(child as FalsyReactElement, { variant })}
+        </View>
+    ));
+
+    return (
+        <View {...otherProps}>
+            {content}
+        </View>
+    );
+}

package/src/CheckboxGroup/CheckboxGroupProps.ts

@@ -0,0 +1,11 @@
+import type { ViewProps } from 'react-native';
+import type { OverridableComponentProps } from '../types';
+import type { CheckboxVariant } from '../Checkbox/CheckboxProps';
+
+export default interface CheckboxGroupProps extends OverridableComponentProps<ViewProps, {
+    /**
+     * Determines the shape and style of the checkbox.
+     * @default 'square'
+     */
+    variant?: CheckboxVariant;
+}> {}

package/src/CheckboxGroup/index.ts

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

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;
 }> {}