@fountain-ui/core 2.0.0-beta.98 → 3.0.0-alpha.10

package/src/Badge/LegacyBadge.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { css, useTheme } from '../styles';
-import BadgeProps, { BadgePosition } from './LegacyBadgeProps';
-
-const defaultPosition: BadgePosition = {
-    vertical: 'top',
-    horizontal: 'right',
-};
-
-type BadgeStyles = NamedStylesStringUnion<'root' | 'badge'>;
-
-const useStyles: UseStyles<BadgeStyles> = function (): BadgeStyles {
-    const theme = useTheme();
-
-    const dotSize = 4;
-
-    return {
-        root: {},
-        badge: {
-            backgroundColor: theme.palette.secondary.main,
-            borderRadius: dotSize * 0.5,
-            height: dotSize,
-            position: 'absolute',
-            width: dotSize,
-        },
-    };
-};
-
-export default function Badge(props: BadgeProps) {
-    const {
-        children,
-        invisible = false,
-        position = defaultPosition,
-        style,
-        offset = 0,
-        ...otherProps
-    } = props;
-
-    const styles = useStyles();
-
-    const rootStyle = css([
-        styles.root,
-        style,
-    ]);
-
-    const badgeStyle = css([
-        styles.badge,
-        {
-            [position.vertical]: offset,
-            [position.horizontal]: offset,
-        },
-    ]);
-
-    return (
-        <View
-            style={rootStyle}
-            {...otherProps}
-        >
-            {children}
-
-            {!invisible ? <View style={badgeStyle}/> : null}
-        </View>
-    );
-};

package/src/Badge/LegacyBadgeProps.ts

@@ -1,40 +0,0 @@
-import React from 'react';
-import type { ViewProps } from 'react-native';
-import type { OverridableComponentProps } from '../types';
-
-export type BadgeHorizontalPosition = 'right' | 'left';
-
-export type BadgeVerticalPosition = 'top' | 'bottom';
-
-export interface BadgePosition {
-    vertical: BadgeVerticalPosition;
-    horizontal: BadgeHorizontalPosition;
-}
-
-export default interface BadgeProps extends OverridableComponentProps<ViewProps, {
-    /**
-     * The badge will be added relative to this node.
-     */
-    children?: React.ReactNode;
-
-    /**
-     * If `true`, the badge is invisible.
-     * @default false
-     */
-    invisible?: boolean;
-
-    /**
-     * The position of the badge.
-     * @default {
-     *     vertical: 'top',
-     *     horizontal: 'right',
-     * }
-     */
-    position?: BadgePosition;
-
-    /**
-     * The offset of the badge.
-     * @default 0
-     */
-    offset?: number;
-}> {}

package/src/Button/LegacyButton.tsx

@@ -1,157 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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/Checkbox/LegacyCheckbox.tsx

@@ -1,62 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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/CheckboxGroup/CheckboxGroup.tsx

@@ -1,47 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

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

package/src/Chip/LegacyChip.tsx

@@ -1,116 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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;
-}> {}