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

package/src/Accordion/LegacyAccordion.tsx

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

@@ -0,0 +1,34 @@
+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/Accordion/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Accordion';
-export type { default as AccordionProps } from './AccordionProps'
+export { default } from './LegacyAccordion';
+export type { default as AccordionProps } from './LegacyAccordionProps';

package/src/Accordion/useVariantStyleMap.ts

@@ -0,0 +1,127 @@
+import { useMemo } from 'react';
+import type { TextStyle } from 'react-native';
+import type { FountainUiStyle } from '@fountain-ui/styles';
+import { typographyOf } from '@fountain-ui/styles';
+import { createFontStyle, useTheme } from '../styles';
+import type { AccordionVariant } from './AccordionProps';
+
+interface VariantStyle {
+    container: FountainUiStyle;
+    content: FountainUiStyle;
+    contentFont: TextStyle;
+    subTitleFont?: TextStyle;
+    title: FountainUiStyle;
+    titleFont: TextStyle;
+}
+
+export default function useVariantStyleMap(variant: AccordionVariant): VariantStyle {
+    const theme = useTheme();
+
+    return useMemo(() => {
+        switch (variant) {
+            default:
+            case 'solid':
+                return {
+                    container: {
+                        backgroundColor: theme.palette.surface.supportive,
+                        borderRadius: theme.shape.radius.md,
+                    },
+                    content: {
+                        borderTopColor: theme.palette.border.weak,
+                        borderTopWidth: 0.5,
+                        marginHorizontal: theme.spacing(4),
+                        paddingBottom: theme.spacing(5),
+                        paddingTop: theme.spacing(4),
+                    },
+                    contentFont: createFontStyle(theme, {
+                        selector: (typography) => typography.body3.regular,
+                        color: theme.palette.text.base,
+                    }),
+                    subTitleFont: createFontStyle(theme, {
+                        // TODO: select typography.
+                        // selector: (typography) => typography.caption1.regular,
+                        color: theme.palette.text.base,
+                    }),
+                    title: {
+                        alignItems: 'center',
+                        paddingLeft: theme.spacing(4),
+                        paddingRight: theme.spacing(2),
+                        paddingVertical: theme.spacing(4),
+                    },
+                    titleFont: createFontStyle(theme, {
+                        selector: (_) => typographyOf({
+                            fontSize: 15,
+                            lineHeight: 19.5,
+                            fontFamily: 'Pretendard-SemiBold',
+                            letterSpacing: 0,
+                        }),
+                        color: theme.palette.text.strong,
+                    }),
+                };
+            case 'line':
+                return {
+                    container: {
+                        borderColor: theme.palette.border.weak,
+                        borderRadius: theme.shape.radius.md,
+                        borderWidth: 1,
+                    },
+                    content: {
+                        borderTopColor: theme.palette.border.weak,
+                        borderTopWidth: 0.5,
+                        marginHorizontal: theme.spacing(4),
+                        paddingBottom: theme.spacing(4),
+                        paddingTop: theme.spacing(3),
+                    },
+                    contentFont: createFontStyle(theme, {
+                        // TODO: select typography.
+                        // selector: typography => typography.caption2.regular,
+                        color: theme.palette.text.base,
+                    }),
+                    title: {
+                        alignItems: 'center',
+                        paddingBottom: theme.spacing(1),
+                        paddingLeft: theme.spacing(4),
+                        paddingRight: theme.spacing(2),
+                        paddingTop: theme.spacing(0.75),
+                    },
+                    titleFont: createFontStyle(theme, {
+                        selector: (typography) => typography.caption1short.semiBold,
+                        color: theme.palette.text.base,
+                    }),
+                };
+            case 'underline':
+                return {
+                    container: {
+                        borderBottomColor: theme.palette.border.weak,
+                        borderBottomWidth: 1,
+                    },
+                    content: {
+                        borderTopColor: theme.palette.border.weak,
+                        borderTopWidth: 0.5,
+                        paddingBottom: theme.spacing(5),
+                        paddingLeft: theme.spacing(0.5),
+                        paddingRight: theme.spacing(2),
+                        paddingTop: theme.spacing(4),
+                    },
+                    contentFont: createFontStyle(theme, {
+                        selector: (typography) => typography.body3.regular,
+                        color: theme.palette.text.base,
+                    }),
+                    title: {
+                        alignItems: 'center',
+                        paddingLeft: theme.spacing(0.5),
+                        paddingVertical: theme.spacing(2),
+                    },
+                    titleFont: createFontStyle(theme, {
+                        selector: (_) => typographyOf({
+                            fontSize: 15,
+                            lineHeight: 19.5,
+                            fontFamily: 'Pretendard-SemiBold',
+                            letterSpacing: 0,
+                        }),
+                        color: theme.palette.text.strong,
+                    }),
+                };
+        }
+    }, [theme, variant]);
+}

package/src/Badge/Badge.tsx

@@ -1,52 +1,40 @@
 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 './BadgeProps';
+import { Text, View } from 'react-native';
+import { css } from '../styles';
+import type BadgeProps from './BadgeProps';
+import type { BadgeColor, BadgePosition, BadgeSize, BadgeVariant } from './BadgeProps';
+import useVariantStyleMap from './useVariantStyleMap';
 
 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,
+        color = 'accent' as BadgeColor,
+        content,
         invisible = false,
         position = defaultPosition,
-        style,
+        size = 'medium' as BadgeSize,
+        style: styleProp,
         offset = 0,
+        variant = 'dot' as BadgeVariant,
         ...otherProps
     } = props;
 
-    const styles = useStyles();
+    const {
+        badge: baseBadgeStyle,
+        contentFont: contentFontStyle,
+    } = useVariantStyleMap(variant, size, color);
 
     const rootStyle = css([
-        styles.root,
-        style,
+        styleProp,
     ]);
 
     const badgeStyle = css([
-        styles.badge,
+        baseBadgeStyle,
         {
             [position.vertical]: offset,
             [position.horizontal]: offset,
@@ -60,7 +48,13 @@ export default function Badge(props: BadgeProps) {
         >
             {children}
 
-            {!invisible ? <View style={badgeStyle}/> : null}
+            {!invisible ? (
+                <View style={badgeStyle}>
+                    {content !== undefined && content !== null ? (
+                        <Text style={contentFontStyle}>{content}</Text>
+                    ) : null}
+                </View>
+            ) : null}
         </View>
     );
 };

package/src/Badge/BadgeProps.ts

@@ -2,21 +2,43 @@ import React from 'react';
 import type { ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
 
-export type BadgeHorizontalPosition = 'right' | 'left';
+export const badgeHorizontalPositions = ['right', 'left'] as const;
+export type BadgeHorizontalPosition = typeof badgeHorizontalPositions[number];
 
-export type BadgeVerticalPosition = 'top' | 'bottom';
+export const badgeVerticalPositions = ['top', 'bottom'] as const;
+export type BadgeVerticalPosition = typeof badgeVerticalPositions[number];
 
 export interface BadgePosition {
     vertical: BadgeVerticalPosition;
     horizontal: BadgeHorizontalPosition;
 }
 
+export const badgeColors = ['accent', 'danger'] as const;
+export type BadgeColor = typeof badgeColors[number];
+
+export const badgeSizes = ['large', 'medium'] as const;
+export type BadgeSize = typeof badgeSizes[number];
+
+export const badgeVariants = ['dot', 'number'] as const;
+export type BadgeVariant = typeof badgeVariants[number];
+
 export default interface BadgeProps extends OverridableComponentProps<ViewProps, {
     /**
      * The badge will be added relative to this node.
      */
     children?: React.ReactNode;
 
+    /**
+     *
+     * @default 'accent'
+     */
+    color?: BadgeColor;
+
+    /**
+     * (only number variant)
+     */
+    content?: number;
+
     /**
      * If `true`, the badge is invisible.
      * @default false
@@ -37,4 +59,15 @@ export default interface BadgeProps extends OverridableComponentProps<ViewProps,
      * @default 0
      */
     offset?: number;
+
+    /**
+     *
+     */
+    size?: BadgeSize;
+
+    /**
+     *
+     * @default 'dot'
+     */
+    variant?: BadgeVariant;
 }> {}

package/src/Badge/LegacyBadge.tsx

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

@@ -0,0 +1,40 @@
+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/Badge/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Badge';
-export type { default as BadgeProps } from './BadgeProps';
+export { default } from './LegacyBadge';
+export type { default as BadgeProps } from './LegacyBadgeProps';

package/src/Badge/useVariantStyleMap.ts

@@ -0,0 +1,73 @@
+import { useMemo } from 'react';
+import type { TextStyle } from 'react-native';
+import type { FountainUiStyle, Theme } from '@fountain-ui/styles';
+import { commonColors, typographyOf } from '@fountain-ui/styles';
+import { createFontStyle, useTheme } from '../styles';
+import type { BadgeColor, BadgeSize, BadgeVariant } from './BadgeProps';
+
+const sizeMap: Record<BadgeVariant, Partial<Record<BadgeSize, number>>> = {
+    dot: {
+        medium: 4,
+    },
+    number: {
+        large: 26,
+        medium: 22,
+    },
+};
+
+const getColorMap = (theme: Theme): Record<BadgeColor, string> => ({
+    accent: theme.palette.fill.accent,
+    danger: theme.palette.status.danger,
+});
+
+interface VariantStyle {
+    badge: FountainUiStyle;
+    contentFont?: TextStyle;
+}
+
+export default function useVariantStyleMap(variant: BadgeVariant, size: BadgeSize, color: BadgeColor): VariantStyle {
+    const theme = useTheme();
+
+    return useMemo<VariantStyle>(() => {
+        const badgeSize = sizeMap[variant][size] ?? sizeMap[variant].medium;
+
+        if (process.env.NODE_ENV !== 'production' && sizeMap[variant][size] === undefined) {
+            console.warn('The selected size is not supported for the chosen variant.');
+        }
+
+        const colorMap = getColorMap(theme);
+
+        const commonBadgeStyle: FountainUiStyle = {
+            backgroundColor: colorMap[color],
+            borderRadius: theme.shape.radius.full,
+            height: badgeSize,
+            position: 'absolute',
+            width: badgeSize,
+        };
+
+        switch (variant) {
+            default:
+            case 'dot':
+                return {
+                    badge: { ...commonBadgeStyle },
+                };
+            case 'number':
+                return {
+                    badge: {
+                        ...commonBadgeStyle,
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    },
+                    contentFont: createFontStyle(theme, {
+                        selector: (_) => typographyOf({
+                            fontSize: 12,
+                            lineHeight: 12,
+                            fontFamily: 'Pretendard-Bold',
+                            letterSpacing: -0.6,
+                        }),
+                        color: commonColors.opacity.white['100'],
+                    }),
+                };
+        }
+    }, [theme, variant, size, color]);
+}