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

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';

package/src/Chip/useChipStyle.ts

@@ -0,0 +1,123 @@
+import { useMemo } from 'react';
+import type { TextStyle } from 'react-native';
+import type { FountainUiStyle } from '@fountain-ui/styles';
+import { createFontStyle, useTheme } from '../styles';
+import type { ChipSize, ChipStartElementVariant } from './ChipProps';
+
+interface ChipStyle {
+    container: FountainUiStyle;
+    endElement?: FountainUiStyle;
+    label: TextStyle;
+    startElement?: FountainUiStyle;
+}
+
+type VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;
+
+// TODO: need to refactoring...
+export default function useChipStyle(
+    size: ChipSize,
+    startElementVariant: ChipStartElementVariant,
+    isEndElement: boolean,
+): ChipStyle {
+    const theme = useTheme();
+
+    return useMemo<ChipStyle>(() => {
+        const fontStyleMap: Record<ChipSize, TextStyle> = {
+            small: createFontStyle(theme, {
+                // TODO: select typography.
+                // selector: (typography) => typography.caption1.medium,
+                color: theme.palette.text.strong,
+            }),
+            large: createFontStyle(theme, {
+                // TODO: select typography.
+                // selector: (typography) => typography.body2.medium,
+                color: theme.palette.text.strong,
+            }),
+        };
+
+        const endElementStyleMap: Record<ChipSize, FountainUiStyle> = {
+            small: {
+                height: 14,
+                marginLeft: theme.spacing(2),
+                width: 8.17,
+            },
+            large: {
+                height: 16,
+                marginLeft: theme.spacing(2.5),
+                width: 9,
+            },
+        };
+
+        const baseContainerStyle: FountainUiStyle = {
+            alignItems: 'center',
+            backgroundColor: theme.palette.fill.weaker,
+            borderRadius: theme.shape.radius.full,
+            flexDirection: 'row',
+            height: 'fit-content',
+            overflow: 'hidden',
+            width: 'fit-content',
+        };
+
+        const isLarge = size === 'large';
+
+        const variantStyleMap: VariantStyleMap = {
+            avatar: {
+                container: {
+                    paddingLeft: theme.spacing(isLarge ? 1.5 : 1.25),
+                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),
+                    paddingVertical: theme.spacing(isLarge ? 1.25 : 1),
+                },
+                startElement: {
+                    borderRadius: theme.shape.radius.full,
+                    height: isLarge ? 24 : 22,
+                    marginRight: theme.spacing(isLarge ? 1.5 : 1.25),
+                    width: isLarge ? 24 : 22,
+                },
+            },
+            icon: {
+                container: {
+                    paddingLeft: theme.spacing(1.5),
+                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),
+                    paddingVertical: theme.spacing(isLarge ? 1.5 : 1.25),
+                },
+                startElement: {
+                    alignItems: 'center',
+                    height: isLarge ? 22 : 20,
+                    justifyContent: 'center',
+                    marginRight: theme.spacing(isLarge ? 1 : 0.75),
+                    width: isLarge ? 22 : 20,
+                },
+            },
+            image: {
+                container: {
+                    alignItems: 'center',
+                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),
+                },
+                startElement: {
+                    borderRadius: theme.shape.radius.full,
+                    height: isLarge ? 34 : 30,
+                    marginRight: theme.spacing(1.5),
+                    width: isLarge ? 45 : 40,
+                },
+            },
+            default: {
+                container: {
+                    paddingBottom: theme.spacing(1.75),
+                    paddingHorizontal: theme.spacing(isLarge ? 3.5 : 3),
+                    paddingTop: theme.spacing(1.5),
+                },
+            },
+        };
+
+        return {
+            container: {
+                ...baseContainerStyle,
+                ...variantStyleMap[startElementVariant]?.container,
+                ...(isEndElement ? { paddingRight: theme.spacing(isLarge ? 2.5 : 2.25) } : {}),
+            },
+            endElement: endElementStyleMap[size],
+            label: fontStyleMap[size],
+            startElement: variantStyleMap[startElementVariant]?.startElement,
+        };
+    }, [theme, size, startElementVariant]);
+}

package/src/Empty/Empty.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import Button from '../Button/Button';
+import Column from '../Column';
+import Spacer from '../Spacer';
+import { createFontStyle, css, useTheme } from '../styles';
+import type { FalsyReactElement } from '../utils';
+import { cloneElementSafely } from '../utils';
+import type EmptyProps from './EmptyProps';
+
+type EmptyStyles = NamedStylesStringUnion<'root' | 'cta'>;
+
+const useStyles: UseStyles<EmptyStyles> = function (): EmptyStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            alignItems: 'center',
+            flex: 1,
+            justifyContent: 'center',
+            paddingHorizontal: theme.spacing(12),
+        },
+        cta: {
+            alignSelf: 'center',
+        },
+    };
+};
+
+export default function Empty(props: EmptyProps) {
+    const {
+        buttonTitle,
+        description,
+        headerContent: headerContentProp,
+        onButtonPress,
+        style: styleProp,
+        title,
+        ...otherProps
+    } = props;
+
+    const styles = useStyles();
+
+    const theme = useTheme();
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    const headerContent = cloneElementSafely(headerContentProp as FalsyReactElement);
+
+    const titleFontStyle = createFontStyle(theme, {
+        selector: (typography) => typography.header3.semiBold,
+        color: theme.palette.text.strong,
+    });
+
+    const descriptionFontStyle = createFontStyle(theme, {
+        // TODO: select typography.
+        // selector: (typography) =>  typography.body2.regular,
+        color: theme.palette.text.base,
+    });
+
+    return (
+        <Column
+            style={rootStyle}
+            {...otherProps}
+        >
+            {headerContent ? (
+                <React.Fragment>
+                    {headerContent}
+
+                    <Spacer size={6}/>
+                </React.Fragment>
+            ) : null}
+
+            <Text
+                children={title}
+                style={titleFontStyle}
+            />
+
+            {description ? (
+                <React.Fragment>
+                    <Spacer size={2}/>
+
+                    <Text
+                        children={description}
+                        style={descriptionFontStyle}
+                    />
+                </React.Fragment>
+            ) : null}
+
+            {buttonTitle && onButtonPress ? (
+                <React.Fragment>
+                    <Spacer size={6}/>
+
+                    {/* TODO: change Capsule solid variant. */}
+                    <Button
+                        children={buttonTitle}
+                        color={'accent'}
+                        onPress={onButtonPress}
+                        style={styles.cta}
+                        variant={'solid'}
+                    />
+                </React.Fragment>
+            ) : null}
+        </Column>
+    );
+}

package/src/Empty/EmptyProps.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { ViewProps } from 'react-native';
+import type { OverridableComponentProps } from '../types';
+
+export default interface EmptyProps extends OverridableComponentProps<Omit<ViewProps, 'children'>, {
+    /**
+     * Text displayed on the CTA button.
+     */
+    buttonTitle?: string;
+
+    /**
+     * Descriptive text shown below the title.
+     */
+    description?: string;
+
+    /**
+     * Content displayed at the top.
+     * Can be an icon, image, or any visual element.
+     */
+    headerContent?: React.ReactNode;
+
+    /**
+     * Function called when the CTA button is pressed.
+     */
+    onButtonPress?: () => void;
+
+    /**
+     * The main title text.
+     */
+    title: string;
+}> {}

package/src/Empty/index.ts

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

package/src/IconButton/LegacyIconButton.tsx

@@ -40,6 +40,7 @@ export default function IconButton(props: IconButtonProps) {
         onPress,
         size = 'medium',
         style,
+        iconSize,
         ...otherProps
     } = props;
 
@@ -47,8 +48,8 @@ export default function IconButton(props: IconButtonProps) {
     const styles = useStyles();
 
     const icon = cloneElementSafely(children, {
-        width: iconSizes[size],
-        height: iconSizes[size],
+        width: iconSize ?? iconSizes[size],
+        height: iconSize ?? iconSizes[size],
         color: color,
     });
 

package/src/IconButton/LegacyIconButtonProps.ts

@@ -28,4 +28,9 @@ export default interface IconButtonProps extends OverridableComponentProps<Butto
      * @default 'medium'
      */
     size?: IconButtonSize;
+
+    /**
+     * The custom size of the Icon. Not preDefined.
+     */
+    iconSize?: number;
 }> {}

package/src/Pagination/LegacyPagination.tsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import { View } from 'react-native';
+import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { times } from '@fountain-ui/utils';
+import { ChevronLeft, ChevronRight } from '../internal/icons';
+import { css, useTheme } from '../styles';
+import IconButton from '../IconButton';
+import PaginationItem from '../PaginationItem/LegacyPaginationItem';
+import type PaginationProps from './LegacyPaginationProps';
+
+type PaginationStyleKeys =
+    | 'root'
+    | 'rootInline'
+    | 'rootAnchor'
+    | 'items'
+    | 'arrowContainer'
+    | 'prevInline'
+    | 'prevAnchor'
+    | 'nextInline'
+    | 'nextAnchor';
+
+type PaginationStyles = NamedStylesStringUnion<PaginationStyleKeys>;
+
+const useStyles: UseStyles<PaginationStyles> = function (): PaginationStyles {
+    const theme = useTheme();
+
+    return {
+        root: {},
+        rootInline: {
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        rootAnchor: {
+            flexDirection: 'column',
+        },
+        items: {
+            flexDirection: 'row',
+            justifyContent: 'center',
+            marginTop: theme.spacing(2),
+        },
+        arrowContainer: {
+            flexDirection: 'column',
+            justifyContent: 'center',
+        },
+        prevInline: {
+            marginRight: theme.spacing(1),
+        },
+        prevAnchor: {
+            position: 'absolute',
+            left: -24,
+        },
+        nextInline: {
+            marginLeft: theme.spacing(1),
+        },
+        nextAnchor: {
+            position: 'absolute',
+            right: -24,
+        },
+    };
+};
+
+export default function Pagination(props: PaginationProps) {
+    const {
+        bundleSize = 1,
+        children,
+        count,
+        disabled = false,
+        hideIndicator = false,
+        hideNextButton = false,
+        hidePrevButton = false,
+        infinite = false,
+        onChange,
+        page,
+        renderItem = ({ index, ...rest }) => <PaginationItem key={`${index}`} {...rest}/>,
+        style,
+        ...otherProps
+    } = props;
+
+    const styles = useStyles();
+
+    const firstPage = 0;
+    const lastPage = count - 1;
+
+    const handleChange = (nextPage: number) => {
+        if (nextPage >= firstPage && nextPage <= lastPage) {
+            if (onChange) {
+                onChange(nextPage);
+            }
+        }
+    };
+
+    const handlePrevPress = () => {
+        const prevPage = page - bundleSize >= firstPage
+            ? page - bundleSize
+            : (infinite ? count - bundleSize + page : firstPage);
+
+        handleChange(prevPage);
+    };
+
+    const handleNextPress = () => {
+        const nextPage = page + bundleSize <= lastPage
+            ? page + bundleSize
+            : (infinite ? page + bundleSize - count : lastPage);
+
+        handleChange(nextPage);
+    };
+
+    const prevButton = !hidePrevButton ? (
+        <IconButton
+            color={'tertiary'}
+            disabled={disabled || (!infinite && page <= firstPage)}
+            onPress={handlePrevPress}
+            size={'small'}
+            style={children ? styles.prevAnchor : styles.prevInline}
+        >
+            <ChevronLeft/>
+        </IconButton>
+    ) : null;
+
+    const nextButton = !hideNextButton ? (
+        <IconButton
+            color={'tertiary'}
+            disabled={disabled || (!infinite && page + bundleSize > lastPage)}
+            onPress={handleNextPress}
+            size={'small'}
+            style={children ? styles.nextAnchor : styles.nextInline}
+        >
+            <ChevronRight/>
+        </IconButton>
+    ) : null;
+
+    const items = !hideIndicator ? (
+        times(i => renderItem({ index: i, disabled, selected: i === page }), count)
+    ) : null;
+
+    const containerProps = {
+        style: css([
+            styles.root,
+            children ? styles.rootAnchor : styles.rootInline,
+            style,
+        ]),
+        ...otherProps,
+    };
+
+    if (children) {
+        return (
+            <View {...containerProps}>
+                <View style={css(styles.arrowContainer)}>
+                    {children}
+                    {prevButton}
+                    {nextButton}
+                </View>
+
+                <View style={css(styles.items)}>
+                    {items}
+                </View>
+            </View>
+        );
+    }
+
+    return (
+        <View {...containerProps}>
+            {prevButton}
+            {items}
+            {nextButton}
+        </View>
+    );
+};