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

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/Divider/Divider.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { Text, View } from 'react-native';
+import type { Theme } from '@fountain-ui/styles';
 import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
 import { ExtendedStyle } from '../types';
 import type DividerProps from './DividerProps';
+import type { DividerVariant } from './DividerProps';
 
 const styles = StyleSheet.create({
     container: {
@@ -20,27 +22,34 @@ const styles = StyleSheet.create({
     },
 });
 
+function selectBorderColor(theme: Theme, variant: DividerVariant, vertical: boolean) {
+    switch (variant) {
+        default:
+        case 'base':
+            return vertical ? theme.palette.border.weaker : theme.palette.border.weak;
+        case 'strong':
+            return vertical ? theme.palette.border.weak : theme.palette.border.base;
+    }
+}
+
 export default function Divider(props: DividerProps) {
     const {
-        borderWidth = 1,
+        borderWidth: borderWidthProp,
         children: childrenProp,
-        color = 'divider',
         elementAlign = 'center',
         inset = 0,
         marginBetweenChildren = 2,
         style,
+        variant = 'base' as DividerVariant,
         vertical = false,
         ...otherProps
     } = props;
 
     const theme = useTheme();
 
-    const fontColor = theme.palette.text.secondary;
-    const borderColor = color === 'divider'
-        ? theme.palette.divider
-        : color === 'border'
-            ? theme.palette.border.default
-            : theme.palette[color].main;
+    const borderWidth = borderWidthProp ?? (vertical ? 1 : 0.5);
+    const fontColor = theme.palette.text.weak;
+    const borderColor = selectBorderColor(theme, variant, vertical);
     const marginSize = theme.spacing(1);
     const insetSize = theme.spacing(inset);
 

package/src/Divider/DividerProps.ts

@@ -1,8 +1,12 @@
 import React from 'react';
 import type { ViewProps } from 'react-native';
-import type { CommonComponentColor, OverridableComponentProps } from '../types';
+import type { OverridableComponentProps } from '../types';
 
-export type DividerColor = 'divider' | 'border' | CommonComponentColor;
+export const elementAligns = ['start', 'center', 'end'] as const;
+export type ElementAlign = typeof elementAligns[number];
+
+export const dividerVariants = ['base', 'strong'] as const;
+export type DividerVariant = typeof dividerVariants[number];
 
 export default interface DividerProps extends OverridableComponentProps<ViewProps, {
     /**
@@ -22,12 +26,6 @@ export default interface DividerProps extends OverridableComponentProps<ViewProp
      */
     vertical?: boolean;
 
-    /**
-     * The color of divider. It supports default divider color and those theme colors that make sense for this component.
-     * @default 'divider'
-     */
-    color?: DividerColor;
-
     /**
      * The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.
      * @default 2
@@ -36,7 +34,7 @@ export default interface DividerProps extends OverridableComponentProps<ViewProp
 
     /**
      *  The size of border width. It works as an actual pixel-based border width value of a divider.
-     *  @default 1
+     *  @default if vertical is true 1, otherwise 0.5
      */
     borderWidth?: number;
 
@@ -44,5 +42,11 @@ export default interface DividerProps extends OverridableComponentProps<ViewProp
      *  Set position of children.
      *  @default center
      */
-    elementAlign?: 'start' | 'center' | 'end';
+    elementAlign?: ElementAlign;
+
+    /**
+     * Select the style of the divider based on this value.
+     *  @default base
+     */
+    variant?: DividerVariant;
 }> {}

package/src/Divider/LegacyDivider.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
+import { ExtendedStyle } from '../types';
+import type DividerProps from './LegacyDividerProps';
+
+const styles = StyleSheet.create({
+    container: {
+        alignSelf: 'stretch',
+        alignItems: 'center',
+    },
+    row: {
+        flexDirection: 'row',
+    },
+    column: {
+        flexDirection: 'column',
+    },
+    divider: {
+        flexGrow: 1,
+    },
+});
+
+export default function Divider(props: DividerProps) {
+    const {
+        borderWidth = 1,
+        children: childrenProp,
+        color = 'divider',
+        elementAlign = 'center',
+        inset = 0,
+        marginBetweenChildren = 2,
+        style,
+        vertical = false,
+        ...otherProps
+    } = props;
+
+    const theme = useTheme();
+
+    const fontColor = theme.palette.text.secondary;
+    const borderColor = color === 'divider'
+        ? theme.palette.divider
+        : color === 'border'
+            ? theme.palette.border.default
+            : theme.palette[color].main;
+    const marginSize = theme.spacing(1);
+    const insetSize = theme.spacing(inset);
+
+    const marginLeft = marginSize;
+    const marginRight = marginSize;
+    const marginTop = marginSize;
+    const marginBottom = marginSize;
+
+    const marginStyle = vertical
+        ? { marginLeft, marginRight }
+        : { marginTop, marginBottom };
+
+    const insetStyle = vertical
+        ? { marginTop: insetSize, marginBottom: insetSize }
+        : { marginLeft: insetSize, marginRight: insetSize };
+
+    const borderColorStyle = { borderColor };
+    const borderWidthStyle = (vertical ? { borderRightWidth: borderWidth } : { borderBottomWidth: borderWidth });
+
+    const containerStyle = css([
+        insetStyle,
+        marginStyle,
+        styles.container,
+        vertical ? styles.column : styles.row,
+        childrenProp ? undefined : borderColorStyle,
+        childrenProp ? undefined : borderWidthStyle,
+        style,
+    ]);
+
+    const dividerStyle = css([
+        borderColorStyle,
+        borderWidthStyle,
+        styles.divider,
+    ]);
+
+    const dividerMarginSize = theme.spacing(marginBetweenChildren);
+    const startDividerStyle: ExtendedStyle = {
+        display: elementAlign !== 'start' ? 'flex' : 'none',
+        ...(vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize }),
+    };
+    const endDividerStyle: ExtendedStyle = {
+        display: elementAlign !== 'end' ? 'flex' : 'none',
+        ...(vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize }),
+    };
+
+    const fontStyle = createFontStyle(theme, {
+        selector: (typo) => typo.caption2,
+        color: fontColor,
+    });
+
+    const element = typeof childrenProp === 'string'
+        ? <Text style={css(fontStyle)}>{childrenProp}</Text>
+        : childrenProp;
+
+    const children = childrenProp ? (
+        <React.Fragment>
+            <View style={css([dividerStyle, startDividerStyle])}/>
+            {element}
+            <View style={css([dividerStyle, endDividerStyle])}/>
+        </React.Fragment>
+    ) : null;
+
+    return (
+        <View
+            style={containerStyle}
+            {...otherProps}
+        >
+            {children}
+        </View>
+    );
+};

package/src/Divider/LegacyDividerProps.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import type { ViewProps } from 'react-native';
+import type { CommonComponentColor, OverridableComponentProps } from '../types';
+
+export type DividerColor = 'divider' | 'border' | CommonComponentColor;
+
+export default interface DividerProps extends OverridableComponentProps<ViewProps, {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+
+    /**
+     * The size of the inset. It works as a multiplier factor based on spacing system.
+     * @default 0
+     */
+    inset?: number;
+
+    /**
+     * If `true`, the divider orientation is set to vertical.
+     * @default false
+     */
+    vertical?: boolean;
+
+    /**
+     * The color of divider. It supports default divider color and those theme colors that make sense for this component.
+     * @default 'divider'
+     */
+    color?: DividerColor;
+
+    /**
+     * The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.
+     * @default 2
+     */
+    marginBetweenChildren?: number;
+
+    /**
+     *  The size of border width. It works as an actual pixel-based border width value of a divider.
+     *  @default 1
+     */
+    borderWidth?: number;
+
+    /**
+     *  Set position of children.
+     *  @default center
+     */
+    elementAlign?: 'start' | 'center' | 'end';
+}> {}

package/src/Divider/index.ts

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