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

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

@@ -1,100 +1,44 @@
 import React from 'react';
-import { Text } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { createFontStyle, css, useTheme } from '../styles';
+import { Text, View } from 'react-native';
+import { css } from '../styles';
 import { cloneElementSafely } from '../utils';
-import ButtonBase from '../ButtonBase';
+import ButtonBase from '../ButtonBase/ButtonBase';
 import type ChipProps from './ChipProps';
-
-type ChipStyles = NamedStylesStringUnion<'root'>;
-
-const ICON_SIZE = 20;
-
-const useStyles: UseStyles<ChipStyles> = function (): ChipStyles {
-    const theme = useTheme();
-
-    return {
-        root: {
-            alignItems: 'center',
-            borderRadius: theme.shape.roundnessExtra,
-            flexDirection: 'row',
-            height: 32,
-            justifyContent: 'center',
-            paddingLeft: theme.spacing(3),
-            paddingRight: theme.spacing(3),
-        },
-    };
-};
+import type { ChipSize } from './ChipProps';
+import useChipStyle from './useChipStyle';
 
 export default function Chip(props: ChipProps) {
     const {
         children,
-        endIcon: endIconProp,
+        endElement: endElementProp,
         numberOfLines,
         onPress,
-        startIcon: startIconProp,
+        size = 'small' as ChipSize,
+        startElement: startElementProp,
+        startElementVariant = 'default',
         style: styleProp,
-        variant = 'outlined',
         ...otherProps
     } = props;
 
-    const theme = useTheme();
-    const styles = useStyles();
-
-    const fontColor = variant === 'outlined'
-        ? theme.palette.tertiary.main
-        : theme.palette.primary.main;
-
-    const variantStyleMap = {
-        outlined: {
-            backgroundColor: theme.palette.paper.default,
-            borderColor: theme.palette.border.default,
-            borderWidth: 1,
-        },
-        filled: {
-            backgroundColor: theme.palette.paper.grey,
-        },
-        bold: {
-            backgroundColor: theme.palette.paper.default,
-            borderColor: theme.palette.primary.main,
-            borderWidth: 1.5,
-        },
-    };
+    const {
+        container: containerStyle,
+        endElement: endElementStyle,
+        label: labelStyle,
+        startElement: startElementStyle,
+    } = useChipStyle(size, startElementVariant, !!endElementProp);
 
     const chipStyle = css([
-        styles.root,
-        variantStyleMap[variant],
+        containerStyle,
         styleProp,
     ]);
 
-    const fontStyle = createFontStyle(theme, {
-        selector: (typo) => variant === 'bold'
-            ? typo.subtitle2
-            : typo.body2,
-        color: fontColor,
-    });
-
-    const textMarginSize = theme.spacing(1);
-    const textMarginStyle = startIconProp
-        ? { marginLeft: textMarginSize }
-        : endIconProp
-            ? { marginRight: textMarginSize }
-            : undefined;
-
-    const textStyle = css([
-        fontStyle,
-        textMarginStyle,
-        { textAlign: 'center' },
-    ]);
-
-    const iconProps = {
-        width: ICON_SIZE,
-        height: ICON_SIZE,
-        fill: fontColor,
-    };
-
-    const startIcon = cloneElementSafely(startIconProp, iconProps);
-    const endIcon = cloneElementSafely(endIconProp, iconProps);
+    const startElement = startElementVariant === 'icon'
+        ? (
+            <View style={startElementStyle}>
+                {cloneElementSafely(startElementProp)}
+            </View>
+        ) : cloneElementSafely(startElementProp, { style: startElementStyle });
+    const endElement = cloneElementSafely(endElementProp, { style: endElementStyle });
 
     return (
         <ButtonBase
@@ -102,15 +46,15 @@ export default function Chip(props: ChipProps) {
             style={chipStyle}
             {...otherProps}
         >
-            {startIcon}
+            {startElement}
 
             <Text
                 children={children}
                 numberOfLines={numberOfLines}
-                style={textStyle}
+                style={labelStyle}
             />
 
-            {endIcon}
+            {endElement}
         </ButtonBase>
     );
 }

package/src/Chip/ChipProps.ts

@@ -2,13 +2,17 @@ import React from 'react';
 import { OverridableComponentProps } from '../types';
 import type { ButtonBaseProps } from '../ButtonBase';
 
-export type ChipVariant = 'outlined' | 'filled' | 'bold';
+export const chipSizes = ['large', 'small'] as const;
+export type ChipSize = typeof chipSizes[number];
+
+export const chipStartElementVariants = ['default', 'avatar', 'image', 'icon'] as const;
+export type ChipStartElementVariant = typeof chipStartElementVariants[number];
 
 export default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {
     /**
      * Element placed after the children.
      */
-    endIcon?: React.ReactElement;
+    endElement?: React.ReactElement;
 
     /**
      * The content of the component.
@@ -20,14 +24,19 @@ export default interface ChipProps extends OverridableComponentProps<ButtonBaseP
      */
     numberOfLines?: number;
 
+    /**
+     * Determines size of component.
+     * @default 'small'
+     */
+    size?: ChipSize;
+
     /**
      * Element placed before the children.
      */
-    startIcon?: React.ReactElement;
+    startElement?: React.ReactElement;
 
     /**
-     * The variant to use.
-     * @default 'outlined'
+     * Determines the style of the start element.
      */
-    variant?: ChipVariant;
-}> {}
+    startElementVariant?: ChipStartElementVariant;
+}> {}

package/src/Chip/LegacyChip.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { createFontStyle, css, useTheme } from '../styles';
+import { cloneElementSafely } from '../utils';
+import ButtonBase from '../ButtonBase';
+import type ChipProps from './LegacyChipProps';
+
+type ChipStyles = NamedStylesStringUnion<'root'>;
+
+const ICON_SIZE = 20;
+
+const useStyles: UseStyles<ChipStyles> = function (): ChipStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            alignItems: 'center',
+            borderRadius: theme.shape.roundnessExtra,
+            flexDirection: 'row',
+            height: 32,
+            justifyContent: 'center',
+            paddingLeft: theme.spacing(3),
+            paddingRight: theme.spacing(3),
+        },
+    };
+};
+
+export default function Chip(props: ChipProps) {
+    const {
+        children,
+        endIcon: endIconProp,
+        numberOfLines,
+        onPress,
+        startIcon: startIconProp,
+        style: styleProp,
+        variant = 'outlined',
+        ...otherProps
+    } = props;
+
+    const theme = useTheme();
+    const styles = useStyles();
+
+    const fontColor = variant === 'outlined'
+        ? theme.palette.tertiary.main
+        : theme.palette.primary.main;
+
+    const variantStyleMap = {
+        outlined: {
+            backgroundColor: theme.palette.paper.default,
+            borderColor: theme.palette.border.default,
+            borderWidth: 1,
+        },
+        filled: {
+            backgroundColor: theme.palette.paper.grey,
+        },
+        bold: {
+            backgroundColor: theme.palette.paper.default,
+            borderColor: theme.palette.primary.main,
+            borderWidth: 1.5,
+        },
+    };
+
+    const chipStyle = css([
+        styles.root,
+        variantStyleMap[variant],
+        styleProp,
+    ]);
+
+    const fontStyle = createFontStyle(theme, {
+        selector: (typo) => variant === 'bold'
+            ? typo.subtitle2
+            : typo.body2,
+        color: fontColor,
+    });
+
+    const textMarginSize = theme.spacing(1);
+    const textMarginStyle = startIconProp
+        ? { marginLeft: textMarginSize }
+        : endIconProp
+            ? { marginRight: textMarginSize }
+            : undefined;
+
+    const textStyle = css([
+        fontStyle,
+        textMarginStyle,
+        { textAlign: 'center' },
+    ]);
+
+    const iconProps = {
+        width: ICON_SIZE,
+        height: ICON_SIZE,
+        fill: fontColor,
+    };
+
+    const startIcon = cloneElementSafely(startIconProp, iconProps);
+    const endIcon = cloneElementSafely(endIconProp, iconProps);
+
+    return (
+        <ButtonBase
+            onPress={onPress}
+            style={chipStyle}
+            {...otherProps}
+        >
+            {startIcon}
+
+            <Text
+                children={children}
+                numberOfLines={numberOfLines}
+                style={textStyle}
+            />
+
+            {endIcon}
+        </ButtonBase>
+    );
+}

package/src/Chip/LegacyChipProps.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { OverridableComponentProps } from '../types';
+import type { ButtonBaseProps } from '../ButtonBase';
+
+export type ChipVariant = 'outlined' | 'filled' | 'bold';
+
+export default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {
+    /**
+     * Element placed after the children.
+     */
+    endIcon?: React.ReactElement;
+
+    /**
+     * The content of the component.
+     */
+    children: string;
+
+    /**
+     * Number of lines of children.
+     */
+    numberOfLines?: number;
+
+    /**
+     * Element placed before the children.
+     */
+    startIcon?: React.ReactElement;
+
+    /**
+     * The variant to use.
+     * @default 'outlined'
+     */
+    variant?: ChipVariant;
+}> {}

package/src/Chip/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Chip';
-export type { default as ChipProps } from './ChipProps';
+export { default } from './LegacyChip';
+export type { default as ChipProps } from './LegacyChipProps';