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

package/build/typescript/TextField/OutlinedTextField.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import { Animated, LayoutChangeEvent, TextInput } from 'react-native';
-import TextFieldProps from './LegacyTextFieldProps';
-interface OutlinedTextFieldProps extends TextFieldProps {
-    animatedError: Animated.Value;
-    animatedLabel: Animated.Value;
-    focused: boolean;
-    forceFocus: () => void;
-    labelLayout: {
-        measured: boolean;
-        width: number;
-        height: number;
-    };
-    onLayoutAnimatedText: (event: LayoutChangeEvent) => void;
-}
-declare const OutlinedTextField: React.ForwardRefExoticComponent<OutlinedTextFieldProps & React.RefAttributes<TextInput>>;
-export default OutlinedTextField;

package/build/typescript/Tooltip/LegacyTooltip.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type TooltipProps from './LegacyTooltipProps';
-export default function Tooltip(props: TooltipProps): JSX.Element;

package/build/typescript/Tooltip/LegacyTooltipProps.d.ts

@@ -1,72 +0,0 @@
-import React from 'react';
-import type { TextProps, ViewProps } from 'react-native';
-import type { ComponentProps } from '../types';
-import type { ButtonProps } from '../Button';
-export declare type TooltipPlacement = 'top' | 'bottom';
-export declare type TooltipArrowPlacement = 'left' | 'right';
-export declare type TooltipInitialLayout = {
-    height: number;
-    width: number;
-    x: number;
-    y: number;
-};
-export default interface TooltipProps extends ComponentProps<{
-    /**
-     * Tooltip reference element.
-     */
-    children: React.ReactNode;
-    /**
-     * Left position relative to reference element.
-     */
-    left?: number;
-    /**
-     * Callback fired when the component requests to be closed.
-     */
-    onClose?: () => void;
-    /**
-     * Tooltip placement.
-     * @default 'top'
-     */
-    placement?: TooltipPlacement;
-    /**
-     * Right position relative to reference element.
-     */
-    right?: number;
-    /**
-     * Tooltip title.
-     */
-    title: ButtonProps['children'];
-    /**
-     * Additional style for tooltip wrapper.
-     */
-    tooltipStyle?: ViewProps['style'];
-    /**
-     * The additional amount to vertically shift.
-     * @default 4
-     */
-    verticalOffset?: number;
-    /**
-     * If `true`, the tooltip is shown.
-     * @default false
-     */
-    visible?: boolean;
-    /**
-     * Tooltip arrow layout.
-     * If 'undefined', the arrow will be centered on tooltip.
-     */
-    arrowLayout?: {
-        placement: TooltipArrowPlacement;
-        offset: number;
-    };
-    /**
-     * number of tooltip's title lines
-     * @default 1
-     */
-    numberOfTitleLines?: TextProps['numberOfLines'];
-    /**
-     * position of tooltip before onLayout call
-     * @default  { height: 0, width: 0 , x: 0, y: 0}
-     */
-    initialLayout?: TooltipInitialLayout;
-}> {
-}

package/build/typescript/Tooltip/UpArrow.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import type UpArrowProps from './UpArrowProps';
-declare function UpArrow({ upsideDown, fill, opacity }: UpArrowProps): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof UpArrow>;
-export default _default;

package/build/typescript/Tooltip/UpArrowProps.d.ts

@@ -1,17 +0,0 @@
-import type { ComponentProps } from '../types';
-export default interface UpArrowProps extends ComponentProps<{
-    /**
-     * If `true`, arrow is rotating 180.
-     * @default false
-     */
-    upsideDown?: boolean;
-    /**
-     * Fill color for arrow icon.
-     */
-    fill?: string;
-    /**
-     * opacity for arrow icon
-     */
-    opacity?: number;
-}> {
-}

package/build/typescript/Typography/LegacyTypography.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { Text } from 'react-native';
-import TypographyProps from './LegacyTypographyProps';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<Text>>>;
-export default _default;

package/build/typescript/Typography/LegacyTypographyProps.d.ts

@@ -1,81 +0,0 @@
-import React from 'react';
-import type { AccessibilityProps, TextProps } from 'react-native';
-import type { ComponentProps } from '../types';
-export declare type TypographyAlign = 'inherit' | 'left' | 'center' | 'right' | 'justify';
-export declare type TypographyColor = 'inherit' | 'primary' | 'secondary' | 'tertiary' | 'warning' | 'error' | 'accent' | 'textPrimary' | 'textSecondary' | 'textAccent' | 'textHint';
-export declare type TypographyVariant = 'h1' | 'h2' | 'h3' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption1' | 'caption2' | 'flag' | 'button1' | 'button2';
-export interface Accessibility {
-    accessibilityRole: AccessibilityProps['accessibilityRole'];
-    'area-level'?: number;
-}
-export interface AccessibilityMap extends Partial<{
-    [key: string]: Accessibility;
-}> {
-}
-export default interface TypographyProps extends ComponentProps<{
-    /**
-     * Applies HTML tag at web and communicates purpose of component at app
-     */
-    accessibilityRole?: AccessibilityProps['accessibilityRole'];
-    /**
-     * Set the text-align on the component.
-     * The value 'justify' is not supported on Android and fallbacks to left.
-     * @default 'inherit'
-     */
-    align?: TypographyAlign;
-    /**
-     * Applies HTML heading level
-     */
-    ariaLevel?: number;
-    /**
-     * Specifies whether fonts should scale to respect Text Size accessibility settings.
-     * @default false
-     */
-    disableFontScaling?: boolean;
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * The color of the component. It supports those theme colors that make sense for this component.
-     * @default 'inherit'
-     */
-    color?: TypographyColor;
-    /**
-     * The text ellipsis mode.
-     * @default 'tail'
-     */
-    ellipsizeMode?: TextProps['ellipsizeMode'];
-    /**
-     * Internal use only. The hyperlink of the text.
-     */
-    href?: string;
-    /**
-     * Used to truncate the text with an ellipsis after computing the text
-     * layout, including line wrapping, such that the total number of lines
-     * does not exceed this number.
-     */
-    numberOfLines?: TextProps['numberOfLines'];
-    /**
-     * Lets the user select text, to use the native copy and paste functionality.
-     */
-    onPress?: TextProps['onPress'];
-    /**
-     * Lets the user select text, to use the native copy and paste functionality.
-     */
-    selectable?: boolean;
-    /**
-     * Applies the theme typography styles.
-     * @default 'body1'
-     */
-    variant?: TypographyVariant;
-    /**
-     * Callback that is called when the text layout has been calculated.
-     */
-    onTextLayout?: TextProps['onTextLayout'];
-    /**
-     * Callback that is called when the layout of the Text component changes.
-     */
-    onLayout?: TextProps['onLayout'];
-}> {
-}

package/src/Accordion/LegacyAccordion.tsx

@@ -1,188 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { LayoutChangeEvent, View } from 'react-native';
-import Animated, {
-    useAnimatedStyle,
-    useSharedValue,
-    withDelay,
-    withTiming,
-    WithTimingConfig,
-} from 'react-native-reanimated';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { useTheme } from '../styles';
-import { ChevronDown } from '../internal/icons';
-import ButtonBase from '../ButtonBase';
-import Column from '../Column';
-import Row from '../Row';
-import Spacer from '../Spacer';
-import Typography from '../Typography';
-
-import AccordionProps from './LegacyAccordionProps';
-
-type AccordionStyles = NamedStylesStringUnion<'root'
-    | 'title'
-    | 'titleColumn'
-    | 'subtitle'
-    | 'contentView'>;
-
-const ROTATE_HIDE_DEGREE = 0;
-const ROTATE_SHOW_DEGREE = 180;
-const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 200 };
-const INITIAL_EXPANDED_DELAY_MILLIS = 100;
-const CONTENT_OPACITY_DELAY_MILLIS = 200;
-
-const useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {
-    const theme = useTheme();
-
-    return {
-        root: { marginBottom: theme.spacing(2) },
-        title: {
-            borderRadius: theme.spacing(4),
-            backgroundColor: theme.palette.paper.grey,
-            paddingHorizontal: theme.spacing(4),
-            paddingVertical: theme.spacing(3.5),
-            alignItems: 'center',
-            height: 64,
-        },
-        titleColumn: { flexShrink: 1 },
-        subtitle: {
-            fontSize: 11,
-            lineHeight: 12,
-            fontFamily: 'Inter-Regular',
-        },
-        contentView: {
-            position: 'absolute',
-            width: '100%',
-            borderRadius: theme.spacing(4),
-            backgroundColor: theme.palette.paper.grey,
-            paddingHorizontal: theme.spacing(4),
-            paddingVertical: theme.spacing(6),
-            marginTop: theme.spacing(1),
-        },
-    };
-};
-
-export default function Accordion(props: AccordionProps) {
-    const {
-        title,
-        subTitle,
-        content,
-        RightIcon,
-        LeftComponent,
-        isInitialExpanded = false,
-    } = props;
-
-    const styles = useStyles();
-    const theme = useTheme();
-    const CONTENT_MARGIN_HEIGHT = theme.spacing(2);
-
-    const [isExpanded, setIsExpanded] = useState(false);
-    const shouldInitialExpandedRef = useRef<boolean>(isInitialExpanded);
-
-    const rotate = useSharedValue(ROTATE_HIDE_DEGREE);
-    const animatedOpacity = useSharedValue(0);
-
-    const animatedHeight = useSharedValue(0);
-    const [contentHeight, setContentHeight] = useState(0);
-
-    const animatedChevronDownStyles = useAnimatedStyle(() => ({
-        transform: [{ rotate: `${rotate.value}deg` }],
-    }), []);
-
-    const animatedContentBackgroundStyles = useAnimatedStyle(() => ({
-        height: animatedHeight.value,
-        overflow: 'hidden',
-    }), []);
-
-    const animatedContentStyle = useAnimatedStyle(() => ({
-        opacity: animatedOpacity.value,
-    }), []);
-
-    const onPress = () => {
-        setIsExpanded(prev => !prev);
-    };
-
-    const onLayout = (event: LayoutChangeEvent) => {
-        const height = event.nativeEvent.layout.height + CONTENT_MARGIN_HEIGHT;
-        setContentHeight(height);
-
-        if (shouldInitialExpandedRef.current) {
-            shouldInitialExpandedRef.current = false;
-            setTimeout(() => setIsExpanded(true), INITIAL_EXPANDED_DELAY_MILLIS);
-        }
-    };
-
-    useEffect(() => {
-        rotate.value = withTiming(isExpanded ? ROTATE_SHOW_DEGREE : ROTATE_HIDE_DEGREE, ANIMATION_CONFIG);
-
-        animatedHeight.value = withTiming(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);
-
-        animatedOpacity.value = isExpanded
-            ? withDelay(CONTENT_OPACITY_DELAY_MILLIS, withTiming(1, ANIMATION_CONFIG))
-            : withTiming(0, ANIMATION_CONFIG);
-    }, [isExpanded, contentHeight]);
-
-    return (
-        <Column style={styles.root}>
-            <ButtonBase onPress={onPress}>
-                <Row style={styles.title}>
-                    {LeftComponent ? LeftComponent : null}
-
-                    <Column style={styles.titleColumn}>
-                        <Typography
-                            variant={'subtitle2'}
-                            children={title}
-                            color={'textPrimary'}
-                            numberOfLines={1}
-                            disableFontScaling={true}
-                        />
-
-                        {subTitle ? (
-                            <React.Fragment>
-                                <Spacer size={0.5}/>
-
-                                <Typography
-                                    style={styles.subtitle}
-                                    color={'tertiary'}
-                                    children={subTitle}
-                                    numberOfLines={1}
-                                    disableFontScaling={true}
-                                />
-                            </React.Fragment>
-                        ) : null}
-                    </Column>
-
-                    <Spacer flex={1}/>
-
-                    <Spacer size={3}/>
-
-                    <Animated.View style={animatedChevronDownStyles}>
-                        {RightIcon ? RightIcon : (
-                            <ChevronDown
-                                width={20}
-                                height={20}
-                                color={'tertiary'}
-                            />
-                        )}
-                    </Animated.View>
-                </Row>
-            </ButtonBase>
-
-            <Animated.View style={animatedContentBackgroundStyles}>
-                <View
-                    onLayout={onLayout}
-                    style={styles.contentView}
-                >
-                    <Animated.View style={animatedContentStyle}>
-                        {typeof content === 'string' ? (
-                            <Typography
-                                variant={'subtitle2'}
-                                color={'tertiary'}
-                                children={content}
-                            />
-                        ) : (content)}
-                    </Animated.View>
-                </View>
-            </Animated.View>
-        </Column>
-    );
-}

package/src/Accordion/LegacyAccordionProps.ts

@@ -1,34 +0,0 @@
-import React from 'react';
-
-export default interface AccordionProps {
-    /**
-     * The title of the component.
-     */
-    title: string | React.ReactNode;
-
-    /**
-     * The subtitle of the component.
-     */
-    subTitle?: string | React.ReactNode;
-
-    /**
-     * The component to the left of the title.
-     */
-    LeftComponent?: React.ReactNode;
-
-    /**
-     * The icon to the right of the title.
-     */
-    RightIcon?: React.ReactElement;
-
-    /**
-     * The content of the component.
-     */
-    content: string | React.ReactNode;
-
-    /**
-     * The initial state of expanding
-     * @default false
-     */
-    isInitialExpanded?: boolean;
-}

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