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

package/src/Button/useVariantStyleMap.ts

@@ -0,0 +1,178 @@
+import { useMemo } from 'react';
+import type { FountainUiStyle } from '@fountain-ui/styles';
+import { commonColors } from '@fountain-ui/styles';
+import { useTheme } from '../styles';
+import { ButtonColor, ButtonVariant } from './ButtonProps';
+
+type UseVariantStyleMapReturns = {
+    container?: FountainUiStyle;
+    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: {
+                    container: {
+                        backgroundColor: palette.fill.accent,
+                    },
+                    labelColor: commonColors.static.strongInverse,
+                    iconColor: commonColors.static.strongInverse,
+                },
+                primary: {
+                    container: {
+                        backgroundColor: palette.fill.base,
+                    },
+                    labelColor: palette.text.strongInverse,
+                    iconColor: palette.icon.strongInverse,
+                },
+                danger: {
+                    container: {
+                        backgroundColor: palette.status.danger,
+                    },
+                    labelColor: commonColors.static.strongInverse,
+                    iconColor: commonColors.static.strongInverse,
+                },
+                disabled: {
+                    container: {
+                        backgroundColor: palette.status.disabled,
+                    },
+                    labelColor: palette.status.onDisabled,
+                    iconColor: palette.status.onDisabled,
+                },
+            },
+            outlined: {
+                accent: {
+                    container: {
+                        borderColor: palette.border.accent,
+                        borderWidth: 1,
+                    },
+                    labelColor: palette.text.accent,
+                    iconColor: palette.icon.accent,
+                },
+                primary: {
+                    container: {
+                        borderColor: palette.border.base,
+                        borderWidth: 1,
+                    },
+                    labelColor: palette.text.base,
+                    iconColor: palette.icon.base,
+                },
+                disabled: {
+                    container: {
+                        borderColor: palette.status.disabled,
+                        borderWidth: 1,
+                    },
+                    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,
+                },
+            },
+            capsuleSolid: {
+                accent: {
+                    container: {
+                        backgroundColor: theme.palette.fill.accent,
+                        borderRadius: theme.shape.radius.full,
+                    },
+                    labelColor: commonColors.static.strongInverse,
+                    iconColor: commonColors.static.strongInverse,
+                },
+                primary: {
+                    container: {
+                        backgroundColor: theme.palette.fill.base,
+                        borderRadius: theme.shape.radius.full,
+                    },
+                    labelColor: palette.text.strongInverse,
+                    iconColor: palette.icon.strongInverse,
+                },
+                danger: {
+                    container: {
+                        backgroundColor: theme.palette.status.danger,
+                        borderRadius: theme.shape.radius.full,
+                    },
+                    labelColor: commonColors.static.strongInverse,
+                    iconColor: commonColors.static.strongInverse,
+                },
+                secondary: {
+                    container: {
+                        backgroundColor: commonColors.static.strongInverse,
+                        borderRadius: theme.shape.radius.full,
+                    },
+                    labelColor: theme.palette.text.strong,
+                    iconColor: theme.palette.icon.strong,
+                },
+                disabled: {
+                    container: {
+                        backgroundColor: theme.palette.status.disabled,
+                        borderRadius: theme.shape.radius.full,
+                    },
+                    labelColor: theme.palette.status.onDisabled,
+                    iconColor: theme.palette.status.onDisabled,
+                },
+            },
+            capsuleOutlined: {
+                primary: {
+                    container: {
+                        borderColor: theme.palette.border.base,
+                        borderRadius: theme.shape.radius.full,
+                        borderWidth: 1,
+                    },
+                    labelColor: theme.palette.text.strong,
+                    iconColor: theme.palette.icon.strong,
+                },
+                disabled: {
+                    container: {
+                        borderColor: theme.palette.status.disabled,
+                        borderRadius: theme.shape.radius.full,
+                        borderWidth: 1,
+                    },
+                    labelColor: theme.palette.status.disabledLabel,
+                    iconColor: theme.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/ButtonBase/ButtonBase.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { Animated } from 'react-native';
 import { useAnimatedValue, useThrottle } from '../hooks';
 import { isNotAndroid12 } from '../utils';
@@ -10,7 +10,6 @@ interface StartPressAnimation {
 }
 
 export const ORIGINAL_OPACITY = 1;
-export const DISABLED_OPACITY = .3;
 const ACTIVE_OPACITY = .65;
 
 const ORIGINAL_SCALE = 1;
@@ -35,14 +34,12 @@ const startTimingAnimationWithDefaults = (
     }).start();
 };
 
-const getOpacityByDisabled = (disabled: boolean) => disabled ? DISABLED_OPACITY : ORIGINAL_OPACITY;
-
 export default function ButtonBase(props: ButtonBaseProps) {
     const {
         children,
         disabled = false,
         disableThrottle = false,
-        onPress,
+        onPress: _onPress,
         onPressOut,
         pressEffect = 'opacity',
         pressDelay: pressDelayOrNil,
@@ -51,18 +48,15 @@ export default function ButtonBase(props: ButtonBaseProps) {
         ...otherProps
     } = props;
 
+    const onPress = useCallback(() => _onPress?.(), [_onPress]);
     const handlePress = useThrottle({
         periodMillis: disableThrottle ? 0 : throttleMillis,
         callback: onPress,
     });
 
-    const opacity = useAnimatedValue(getOpacityByDisabled(disabled));
+    const opacity = useAnimatedValue(ORIGINAL_OPACITY);
     const scale = useAnimatedValue(ORIGINAL_SCALE);
 
-    useEffect(() => {
-        opacity.setValue(getOpacityByDisabled(disabled));
-    }, [disabled, pressEffect]);
-
     const startScaleAnimation = useCallback<StartPressAnimation>((pressIn, isHover) => {
         if (!isHover) {
             startTimingAnimationWithDefaults(

package/src/ButtonBase/LegacyButtonBase.tsx

@@ -0,0 +1,135 @@
+import React, { useCallback, useEffect } from 'react';
+import { Animated } from 'react-native';
+import { useAnimatedValue, useThrottle } from '../hooks';
+import { isNotAndroid12 } from '../utils';
+import { AnimatedPressable } from '../animated';
+import type ButtonBaseProps from './ButtonBaseProps';
+
+interface StartPressAnimation {
+    (pressIn: boolean, isHover: boolean): void;
+}
+
+export const ORIGINAL_OPACITY = 1;
+export const DISABLED_OPACITY = .3;
+const ACTIVE_OPACITY = .65;
+
+const ORIGINAL_SCALE = 1;
+const MINIFIED_SCALE = .96;
+
+// at "node_modules/react-native/Libraries/Pressability.js"
+// const DEFAULT_MIN_PRESS_DURATION = 130;
+const SCALE_EFFECT_PRESS_IN_DELAY = 130;
+const OPACITY_EFFECT_PRESS_IN_DELAY = 0;
+
+type TimingAnimationValue = Animated.Value | Animated.ValueXY;
+type TimingAnimationToValue = Animated.TimingAnimationConfig['toValue'];
+
+const startTimingAnimationWithDefaults = (
+    value: TimingAnimationValue,
+    toValue: TimingAnimationToValue,
+) => {
+    Animated.timing(value, {
+        toValue,
+        duration: 150,
+        useNativeDriver: isNotAndroid12,
+    }).start();
+};
+
+const getOpacityByDisabled = (disabled: boolean) => disabled ? DISABLED_OPACITY : ORIGINAL_OPACITY;
+
+export default function ButtonBase(props: ButtonBaseProps) {
+    const {
+        children,
+        disabled = false,
+        disableThrottle = false,
+        onPress,
+        onPressOut,
+        pressEffect = 'opacity',
+        pressDelay: pressDelayOrNil,
+        style: styleProp,
+        throttleMillis = 650,
+        ...otherProps
+    } = props;
+
+    const handlePress = useThrottle({
+        periodMillis: disableThrottle ? 0 : throttleMillis,
+        callback: onPress,
+    });
+
+    const opacity = useAnimatedValue(getOpacityByDisabled(disabled));
+    const scale = useAnimatedValue(ORIGINAL_SCALE);
+
+    useEffect(() => {
+        opacity.setValue(getOpacityByDisabled(disabled));
+    }, [disabled, pressEffect]);
+
+    const startScaleAnimation = useCallback<StartPressAnimation>((pressIn, isHover) => {
+        if (!isHover) {
+            startTimingAnimationWithDefaults(
+                scale,
+                pressIn ? MINIFIED_SCALE : ORIGINAL_SCALE,
+            );
+        }
+    }, []);
+
+    const startOpacityAnimation = useCallback<StartPressAnimation>((pressIn) => {
+        if (pressIn) {
+            opacity.setValue(ACTIVE_OPACITY);
+        } else {
+            startTimingAnimationWithDefaults(opacity, ORIGINAL_OPACITY);
+        }
+    }, []);
+
+    const startPressAnimation = useCallback<StartPressAnimation>((pressIn, isHover = false) => {
+        if (pressEffect === 'scale') {
+            startScaleAnimation(pressIn, isHover);
+        } else if (pressEffect === 'opacity') {
+            startOpacityAnimation(pressIn, isHover);
+        }
+    }, [pressEffect]);
+
+    const handlePressIn = useCallback(() => {
+        startPressAnimation(true, false);
+    }, [startPressAnimation]);
+
+    const handlePressOut = useCallback(() => {
+        onPressOut && onPressOut();
+
+        startPressAnimation(false, false);
+    }, [startPressAnimation, onPressOut]);
+
+    const animatedStyle = {
+        opacity,
+        transform: [{ scale }],
+    };
+
+    const defaultPressDelay = pressEffect === 'scale'
+        ? SCALE_EFFECT_PRESS_IN_DELAY
+        : OPACITY_EFFECT_PRESS_IN_DELAY;
+    const pressDelay = pressDelayOrNil ?? defaultPressDelay;
+
+    return (
+        <AnimatedPressable
+            disabled={disabled}
+            onPress={handlePress}
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
+            style={[
+                animatedStyle,
+                styleProp,
+            ]}
+            unstable_pressDelay={pressDelay}
+            {...otherProps}
+        >
+            {typeof children !== 'function' ? (
+                ({ hovered }) => {
+                    if (hovered !== undefined && !disabled) {
+                        startPressAnimation(hovered, true);
+                    }
+
+                    return children;
+                }
+            ) : children}
+        </AnimatedPressable>
+    );
+};

package/src/ButtonBase/index.ts

@@ -1,2 +1,2 @@
-export { default } from './ButtonBase';
-export type { default as ButtonBaseProps } from './ButtonBaseProps';
+export { default } from './LegacyButtonBase';
+export type { default as ButtonBaseProps } from './ButtonBaseProps';

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

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