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

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

package/src/Dialog/LegacyDialog.tsx

@@ -1,198 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { LayoutChangeEvent, useWindowDimensions } from 'react-native';
-import { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import Column from '../Column';
-import Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';
-import Paper from '../Paper';
-import { useTheme } from '../styles';
-import type DialogProps from './LegacyDialogProps';
-
-type DialogStyleKeys =
-    | 'root'
-    | 'paper'
-    | 'paperFullScreen'
-    | 'animation'
-    | 'animationFullScreen'
-    | 'topElementSize'
-    | 'topElementPosition';
-
-type DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;
-
-const DIALOG_MAX_WIDTH = 328;
-
-const TOP_ELEMENT_OFFSET = 20;
-
-const useStyles: UseStyles<DialogStyles> = function (): DialogStyles {
-    const theme = useTheme();
-
-    const { width } = useWindowDimensions();
-
-    const margin = theme.spacing(4);
-    const dialogWidth = width - margin * 2;
-
-    return {
-        root: {
-            alignItems: 'center',
-            justifyContent: 'center',
-            zIndex: theme.zIndex.dialog,
-        },
-        paper: {
-            borderRadius: theme.shape.roundnessExtra,
-            margin,
-            maxWidth: DIALOG_MAX_WIDTH,
-            overflow: 'hidden',
-            width: dialogWidth,
-        },
-        paperFullScreen: {
-            flexGrow: 1,
-        },
-        animation: {},
-        animationFullScreen: {
-            width: '100%',
-            height: '100%',
-        },
-        topElementSize: {
-            marginHorizontal: margin,
-            maxWidth: DIALOG_MAX_WIDTH,
-            width: dialogWidth,
-        },
-        topElementPosition: {
-            position: 'absolute',
-            bottom: -1 * theme.spacing(4),
-            width: '100%',
-        },
-    };
-};
-
-export default function Dialog(props: DialogProps) {
-    const {
-        animationType = ANIMATION_TYPE.SLIDE,
-        children,
-        fullScreen = false,
-        hideBackdrop,
-        onClose,
-        style = {},
-        visible,
-        topElement,
-        ...otherProps
-    } = props;
-
-    const styles = useStyles();
-
-    const { height: screenHeight } = useWindowDimensions();
-
-    const [topElementHeight, setTopElementHeight] = useState(0);
-    const handleTopElementLayout = (event: LayoutChangeEvent) => {
-        const { height } = event.nativeEvent.layout;
-        setTopElementHeight(height);
-    };
-
-    const offsetAnimation = useMemo<AnimationUnit[]>(() => {
-        if (topElementHeight === 0) {
-            return [];
-        }
-
-        return [{
-            toValue: (topElementHeight - TOP_ELEMENT_OFFSET) / 2,
-            type: ANIMATION_TYPE.SLIDE,
-        }];
-    }, [topElementHeight]);
-
-    const closeAnimation = useMemo<AnimationUnit[]>(() => {
-        if (animationType === ANIMATION_TYPE.FADE) {
-            return [{
-                toValue: 0,
-                type: ANIMATION_TYPE.FADE,
-            }];
-        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
-            return [
-                {
-                    toValue: screenHeight,
-                    type: ANIMATION_TYPE.SLIDE,
-                },
-                {
-                    duration: 150,
-                    toValue: 0,
-                    type: ANIMATION_TYPE.FADE,
-                },
-            ];
-        }
-
-        return [{
-            duration: 150,
-            toValue: screenHeight,
-            type: ANIMATION_TYPE.SLIDE,
-        }];
-    }, [animationType, fullScreen, screenHeight]);
-
-    const openAnimation = useMemo<AnimationUnit[]>(() => {
-        if (animationType === ANIMATION_TYPE.FADE) {
-            return [{
-                toValue: 1,
-                type: ANIMATION_TYPE.FADE,
-            }];
-        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
-            return [
-                {
-                    toValue: 0,
-                    type: ANIMATION_TYPE.SLIDE,
-                },
-                {
-                    delay: 50,
-                    duration: 150,
-                    toValue: 1,
-                    type: ANIMATION_TYPE.FADE,
-                },
-            ];
-        }
-
-        return [{
-            toValue: 0,
-            type: ANIMATION_TYPE.SLIDE,
-        }];
-    }, [animationType, fullScreen]);
-
-    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;
-
-    const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;
-
-    return (
-        <Modal
-            animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}
-            closeAnimation={closeAnimation}
-            hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}
-            initialOpacity={initialOpacity}
-            initialTranslateY={initialTranslateY}
-            onClose={onClose}
-            openAnimation={openAnimation}
-            offsetAnimation={offsetAnimation}
-            visible={visible}
-            style={styles.root}
-            {...otherProps}
-        >
-            <React.Fragment>
-                {topElement ? (
-                    <Column style={fullScreen ? undefined : styles.topElementSize}>
-                        <Column
-                            style={styles.topElementPosition}
-                            onLayout={handleTopElementLayout}
-                        >
-                            {topElement}
-                        </Column>
-                    </Column>
-                ) : null}
-
-                <Paper
-                    elevation={6}
-                    square={fullScreen}
-                    style={css([
-                        fullScreen ? styles.paperFullScreen : styles.paper,
-                        style,
-                    ])}
-                >
-                    {children}
-                </Paper>
-            </React.Fragment>
-        </Modal>
-    );
-};

package/src/Dialog/LegacyDialogProps.ts

@@ -1,28 +0,0 @@
-import React from 'react';
-import type { ModalProps } from '../Modal';
-import type { OverridableComponentProps } from '../types';
-import { ANIMATION_TYPE } from '../Modal';
-
-export default interface DialogProps extends OverridableComponentProps<ModalProps, {
-    /**
-     * Type of animation used when the dialog opens and closes.
-     * @default 'slide'
-     */
-    animationType?: ANIMATION_TYPE;
-
-    /**
-     * Dialog children, usually the included sub-components.
-     */
-    children?: React.ReactNode;
-
-    /**
-     * If `true`, the dialog is full-screen.
-     * @default false
-     */
-    fullScreen?: boolean;
-
-    /**
-     * Top element for displaying additional information on the dialog.
-     */
-    topElement?: React.ReactNode;
-}> {}

package/src/DialogActions/LegacyDialogActions.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import Column from '../Column';
-import { EdgeInsets } from '../styles';
-import type DialogActionsProps from './DialogActionsProps';
-
-export default function DialogActions(props: DialogActionsProps) {
-    const {
-        children,
-        ...otherProps
-    } = props;
-
-    return (
-        <Column
-            alignItems={'center'}
-            insets={EdgeInsets.all(6)}
-            {...otherProps}
-        >
-            <Column>
-                {children}
-            </Column>
-        </Column>
-    );
-};

package/src/DialogContent/LegacyDialogContent.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import Column from '../Column';
-import Typography from '../Typography';
-import { EdgeInsets } from '../styles';
-import type DialogContentProps from './LegacyDialogContentProps';
-
-export default function DialogContent(props: DialogContentProps) {
-    const {
-        children,
-        disableTypography = false,
-        ...otherProps
-    } = props;
-
-    return (
-        <Column
-            insets={EdgeInsets.fromVH(2, 6)}
-            {...otherProps}
-        >
-            {disableTypography ? (
-                children
-            ) : (
-                <Typography
-                    children={children}
-                    color={'textSecondary'}
-                    variant={'body2'}
-                />
-            )}
-        </Column>
-    );
-};

package/src/DialogContent/LegacyDialogContentProps.ts

@@ -1,10 +0,0 @@
-import type { OverridableComponentProps } from '../types';
-import type { ColumnProps } from '../Column';
-
-export default interface DialogContentProps extends OverridableComponentProps<ColumnProps, {
-    /**
-     * If `true`, the children won't be wrapped by a typography component.
-     * @default false
-     */
-    disableTypography?: boolean;
-}> {}

package/src/DialogMedia/LegacyDialogMedia.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import Image from '../Image';
-import type DialogMediaProps from './LegacyDialogMediaProps';
-
-export default function DialogMedia(props: DialogMediaProps) {
-    const {
-        children,
-        image,
-        ...otherProps
-    } = props;
-
-    return (
-        <Image
-            disableOutline={true}
-            loading={'eager'}
-            overlaidChildren={children}
-            source={{ uri: image }}
-            {...otherProps}
-        />
-    );
-};