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

package/src/AppBar/AppBar.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { View } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import Paper from '../Paper';
 import { css, useTheme } from '../styles';
 import type AppBarProps from './AppBarProps';
+import type { AppBarColor } from './AppBarProps';
 
 type AppBarStyleKeys = 'root';
 
@@ -33,27 +33,21 @@ const AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {
 
     const styles = useStyles();
 
-    const backgroundColor = color === 'default'
-        ? theme.palette.background.default
-        : color === 'paper'
-            ? theme.palette.paper.default
-            : color === 'primary'
-                ? theme.palette.primary.main
-                : 'transparent';
+    const backgroundColorMap: Record<AppBarColor, string> = {
+        default: theme.palette.background.default,
+        alt: theme.palette.background.alt,
+    };
 
     const paperStyle = css([
         styles.root,
-        { backgroundColor },
+        { backgroundColor: backgroundColorMap[color] },
         style,
     ]);
 
     return (
-        <Paper
+        <View
             ref={ref}
-            colorValue={backgroundColor}
-            elevation={0}
             style={paperStyle}
-            square={true}
             {...otherProps}
         />
     );

package/src/AppBar/AppBarProps.ts

@@ -2,7 +2,8 @@ import React from 'react';
 import type { OverridableComponentProps } from '../types';
 import type { PaperProps } from '../Paper';
 
-export type AppBarColor = 'default' | 'paper' | 'primary' | 'transparent';
+export const appBarColors = ['default', 'alt'] as const;
+export type AppBarColor = typeof appBarColors[number];
 
 export default interface AppBarProps extends OverridableComponentProps<PaperProps, {
     /**

package/src/AppBar/index.ts

@@ -1,2 +1,3 @@
 export { default } from './AppBar';
-export type { default as AppBarProps } from './AppBarProps';
+export type { default as AppBarProps } from './AppBarProps';
+export { appBarColors } from './AppBarProps';

package/src/Badge/index.ts

@@ -1,2 +1,13 @@
-export { default } from './LegacyBadge';
-export type { default as BadgeProps } from './LegacyBadgeProps';
+export { default } from './Badge';
+export type {
+    default as BadgeProps,
+    BadgeHorizontalPosition,
+    BadgePosition,
+    BadgeVerticalPosition,
+} from './BadgeProps';
+export {
+    badgeColors,
+    badgeHorizontalPositions,
+    badgeSizes,
+    badgeVerticalPositions,
+} from './BadgeProps';

package/src/Badge/useVariantStyleMap.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import type { TextStyle } from 'react-native';
-import type { FountainUiStyle, Theme } from '@fountain-ui/styles';
+import type { FontStyle, 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';
@@ -45,6 +45,21 @@ export default function useVariantStyleMap(variant: BadgeVariant, size: BadgeSiz
             width: badgeSize,
         };
 
+        const fontStyleMap: Record<BadgeSize, FontStyle> = {
+            large: typographyOf({
+                fontSize: 14,
+                lineHeight: 14,
+                fontFamily: 'Pretendard-Bold',
+                letterSpacing: -0.7,
+            }),
+            medium: typographyOf({
+                fontSize: 12,
+                lineHeight: 12,
+                fontFamily: 'Pretendard-Bold',
+                letterSpacing: -0.6,
+            }),
+        };
+
         switch (variant) {
             default:
             case 'dot':
@@ -59,12 +74,7 @@ export default function useVariantStyleMap(variant: BadgeVariant, size: BadgeSiz
                         justifyContent: 'center',
                     },
                     contentFont: createFontStyle(theme, {
-                        selector: (_) => typographyOf({
-                            fontSize: 12,
-                            lineHeight: 12,
-                            fontFamily: 'Pretendard-Bold',
-                            letterSpacing: -0.6,
-                        }),
+                        selector: (_) => fontStyleMap[size],
                         color: commonColors.opacity.white['100'],
                     }),
                 };

package/src/BottomSheetActions/BottomSheetActions.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { css, useTheme } from '../styles';
+import type BottomSheetActionsProps from './BottomSheetActionsProps';
+
+type BottomSheetActionsStyles = NamedStylesStringUnion<'root'>;
+
+const useStyles: UseStyles<BottomSheetActionsStyles> = function (): BottomSheetActionsStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            marginTop: theme.spacing(4),
+            paddingHorizontal: theme.spacing(6),
+        },
+    };
+};
+
+export default function BottomSheetActions(props: BottomSheetActionsProps) {
+    const {
+        children,
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const styles = useStyles();
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    return (
+        <View
+            style={rootStyle}
+            {...otherProps}
+        >
+            {children}
+        </View>
+    );
+}

package/src/BottomSheetActions/BottomSheetActionsProps.ts

@@ -0,0 +1,4 @@
+import { ViewProps } from 'react-native';
+import type { OverridableComponentProps } from '../types';
+
+export default interface BottomSheetActionsProps extends OverridableComponentProps<ViewProps, {}> {}

package/src/BottomSheetActions/index.ts

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

package/src/BottomSheetContent/BottomSheetContent.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { ScrollView } from 'react-native-gesture-handler';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { css, useTheme } from '../styles';
+import type BottomSheetContentProps from './BottomSheetContentProps';
+
+type BottomSheetContentStyles = NamedStylesStringUnion<'root'>;
+
+const useStyles: UseStyles<BottomSheetContentStyles> = function (): BottomSheetContentStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            flexGrow: 1,
+            flexShrink: 1,
+            paddingBottom: theme.spacing(4),
+            paddingHorizontal: theme.spacing(6),
+        },
+    };
+};
+
+export default function BottomSheetContent(props: BottomSheetContentProps) {
+    const {
+        children,
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const styles = useStyles();
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    return (
+        <ScrollView
+            bounces={false}
+            style={rootStyle}
+            {...otherProps}
+        >
+            {children}
+        </ScrollView>
+    );
+}

package/src/BottomSheetContent/BottomSheetContentProps.ts

@@ -0,0 +1,4 @@
+import type { ScrollViewProps } from 'react-native';
+import type { OverridableComponentProps } from '../types';
+
+export default interface BottomSheetContentProps extends OverridableComponentProps<ScrollViewProps, {}> {}

package/src/BottomSheetContent/index.ts

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

package/src/BottomSheetTitle/BottomSheetTitle.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Text } from 'react-native';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import Button from '../Button/Button';
+import Row from '../Row';
+import { createFontStyle, css, useTheme } from '../styles';
+import type BottomSheetTitleProps from './BottomSheetTitleProps';
+
+type BottomSheetTitleStyles = NamedStylesStringUnion<'root' | 'title' | 'actionButton'>;
+
+const useStyles: UseStyles<BottomSheetTitleStyles> = function (): BottomSheetTitleStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            alignItems: 'center',
+            gap: theme.spacing(8),
+            justifyContent: 'space-between',
+            marginBottom: theme.spacing(4),
+            paddingHorizontal: theme.spacing(6),
+        },
+        title: {
+            paddingBottom: theme.spacing(1.25),
+            paddingTop: theme.spacing(1),
+        },
+        actionButton: {
+            paddingBottom: theme.spacing(1.75),
+            paddingHorizontal: 0,
+            paddingTop: theme.spacing(1.25),
+        },
+    };
+};
+
+export default function BottomSheetTitle(props: BottomSheetTitleProps) {
+    const {
+        actionButtonProps,
+        children,
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const theme = useTheme();
+
+    const styles = useStyles();
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    const titleFontStyle = createFontStyle(theme, {
+        selector: (typography) => typography.header3.semiBold,
+        color: theme.palette.text.strong,
+    });
+
+    const titleStyle = css([
+        styles.title,
+        titleFontStyle,
+    ]);
+
+    return (
+        <Row
+            style={rootStyle}
+            {...otherProps}
+        >
+            <Text
+                children={children}
+                style={titleStyle}
+            />
+
+            {actionButtonProps ? (
+                <Button
+                    children={actionButtonProps.title}
+                    color={'accent'}
+                    disableMinWidth={true}
+                    onPress={actionButtonProps.onPress}
+                    style={styles.actionButton}
+                    variant={'text'}
+                />
+            ) : null}
+        </Row>
+    );
+}

package/src/BottomSheetTitle/BottomSheetTitleProps.ts

@@ -0,0 +1,12 @@
+import type { OverridableComponentProps } from '../types';
+import type { RowProps } from '../Row';
+
+type ActionButtonProps = {
+    title: string;
+    onPress: () => void;
+};
+
+export default interface BottomSheetTitleProps extends OverridableComponentProps<RowProps, {
+    children: string;
+    actionButtonProps?: ActionButtonProps;
+}> {}

package/src/BottomSheetTitle/index.ts

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

package/src/Button/Button.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Linking, Text, View } from 'react-native';
+import { Linking, Text } from 'react-native';
 import type { FontStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { typographyOf } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase/ButtonBase';
@@ -110,6 +110,7 @@ export default function Button(props: ButtonProps) {
 
     const iconProps = {
         fill: iconColor,
+        opacity: isLoading ? 0 : 1,
     };
 
     const startIcon = cloneElementSafely(startIconProp, iconProps);
@@ -124,10 +125,6 @@ export default function Button(props: ButtonProps) {
         styleProp,
     ]);
 
-    const contentStyle = css({
-        opacity: isLoading ? 0 : 1,
-    });
-
     const fontStyle = createFontStyle(theme, {
         selector: (_) => fontStyleMap[size],
         color: labelColor,
@@ -135,7 +132,10 @@ export default function Button(props: ButtonProps) {
 
     const textStyle = css([
         fontStyle,
-        { textAlign: 'center' },
+        {
+            opacity: isLoading ? 0 : 1,
+            textAlign: 'center',
+        },
     ]);
 
     const modifiedPressEffect = variant !== 'text' && !pressEffect
@@ -167,15 +167,13 @@ export default function Button(props: ButtonProps) {
             pressEffect={modifiedPressEffect}
             {...otherProps}
         >
-            <View style={contentStyle}>
-                {startIcon}
+            {startIcon}
 
-                <Text style={textStyle}>
-                    {children}
-                </Text>
+            <Text style={textStyle}>
+                {children}
+            </Text>
 
-                {endIcon}
-            </View>
+            {endIcon}
 
             {isLoading ? (
                 <LoadingSpinner

package/src/Button/ButtonProps.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ButtonBaseProps } from '../ButtonBase';
 import type { OverridableComponentProps } from '../types';
 
-export const ButtonColors = [
+export const buttonColors = [
     'accent',
     'primary',
     'danger',
@@ -10,23 +10,23 @@ export const ButtonColors = [
     'secondary',
     'accentAlt',
 ] as const;
-export type ButtonColor = typeof ButtonColors[number];
+export type ButtonColor = typeof buttonColors[number];
 
-export const ButtonSizes = [
+export const buttonSizes = [
     'small',
     'medium',
     'large',
 ] as const;
-export type ButtonSize = typeof ButtonSizes[number];
+export type ButtonSize = typeof buttonSizes[number];
 
-export const ButtonVariants = [
+export const buttonVariants = [
     'solid',
     'outlined',
     'text',
     'capsuleSolid',
     'capsuleOutlined',
 ] as const;
-export type ButtonVariant = typeof ButtonVariants[number];
+export type ButtonVariant = typeof buttonVariants[number];
 
 export default interface ButtonProps extends OverridableComponentProps<ButtonBaseProps, {
     /**

package/src/Button/index.ts

@@ -1,2 +1,3 @@
-export { default } from './LegacyButton';
-export type { default as ButtonProps } from './LegacyButtonProps';
+export { default } from './Button';
+export type { default as ButtonProps } from './ButtonProps';
+export { buttonColors, buttonSizes, buttonVariants } from './ButtonProps';

package/src/Button/useVariantStyleMap.ts

@@ -96,6 +96,10 @@ export default function useVariantStyleMap(variant: ButtonVariant, color: Button
                     labelColor: palette.text.accentAlt,
                     iconColor: palette.icon.accentAlt,
                 },
+                danger: {
+                    labelColor: palette.status.danger,
+                    iconColor: palette.status.danger,
+                },
                 disabled: {
                     labelColor: palette.status.disabledLabel,
                     iconColor: palette.status.disabledLabel,

package/src/Checkbox/Checkbox.tsx

@@ -33,7 +33,7 @@ export default function Checkbox(props: CheckboxProps) {
     ]);
 
     const fontStyle = createFontStyle(theme, {
-        // TODO: apply typo select.
+        selector: (typography) => typography.body2.regular,
         color: theme.palette.text.strong,
     });
 
@@ -54,7 +54,6 @@ export default function Checkbox(props: CheckboxProps) {
                 {checked ? (
                     <CheckboxOnIcon
                         fill={iconColor}
-                        enableV2={true}
                         height={7.5}
                         width={11}
                     />

package/src/Checkbox/index.ts

@@ -1,2 +1,3 @@
-export { default } from './LegacyCheckbox';
-export type { default as CheckboxProps } from './LegacyCheckboxProps';
+export { default } from './Checkbox';
+export type { default as CheckboxProps } from './CheckboxProps';
+export { checkboxVariants } from './CheckboxProps';

package/src/Checkbox/useVariantStyleMap.ts

@@ -60,8 +60,11 @@ export default function useVariantStyleMap(variant: CheckboxVariant, checked: bo
                 ]),
                 containerStyle: {
                     alignItems: 'center',
+                    borderBottomColor: theme.palette.border.weak,
+                    borderBottomWidth: 0.5,
                     flexDirection: 'row-reverse',
                     gap: theme.spacing(8),
+                    paddingVertical: theme.spacing(3.5),
                 },
                 iconColor: commonColors.static.strongInverse,
             };

package/src/Chip/index.ts

@@ -1,2 +1,3 @@
-export { default } from './LegacyChip';
-export type { default as ChipProps } from './LegacyChipProps';
+export { default } from './Chip';
+export type { default as ChipProps } from './ChipProps';
+export { chipSizes, chipStartElementVariants } from './ChipProps';

package/src/Chip/useChipStyle.ts

@@ -24,13 +24,11 @@ export default function useChipStyle(
     return useMemo<ChipStyle>(() => {
         const fontStyleMap: Record<ChipSize, TextStyle> = {
             small: createFontStyle(theme, {
-                // TODO: select typography.
-                // selector: (typography) => typography.caption1.medium,
+                selector: (typography) => typography.caption1.medium,
                 color: theme.palette.text.strong,
             }),
             large: createFontStyle(theme, {
-                // TODO: select typography.
-                // selector: (typography) => typography.body2.medium,
+                selector: (typography) => typography.body2.medium,
                 color: theme.palette.text.strong,
             }),
         };
@@ -53,9 +51,7 @@ export default function useChipStyle(
             backgroundColor: theme.palette.fill.weaker,
             borderRadius: theme.shape.radius.full,
             flexDirection: 'row',
-            height: 'fit-content',
             overflow: 'hidden',
-            width: 'fit-content',
         };
 
         const isLarge = size === 'large';

package/src/Dialog/Dialog.tsx

@@ -1,12 +1,11 @@
-import React, { Children, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { LayoutChangeEvent, useWindowDimensions } from 'react-native';
 import { css } from '@fountain-ui/styles';
 import Column from '../Column';
-import DialogMedia from '../DialogMedia/DialogMedia';
 import Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';
-import Paper from '../Paper';
-import { cloneElementSafely, FalsyReactElement } from '../utils';
+import ShadowView from '../ShadowView';
 import type DialogProps from './DialogProps';
+import { DialogProvider } from './DialogContext';
 import useDialogStyle from './useDialogStyle';
 
 const TOP_ELEMENT_OFFSET = 20;
@@ -109,14 +108,6 @@ export default function Dialog(props: DialogProps) {
         styleProp,
     ]);
 
-    const contents = Children.map(children, (child) => {
-        // @ts-ignore
-        if (child.type === DialogMedia) {
-            return cloneElementSafely(child as FalsyReactElement, { style: styles.mediaWrapper });
-        }
-        return child;
-    });
-
     return (
         <Modal
             animationStyle={styles.container}
@@ -131,7 +122,7 @@ export default function Dialog(props: DialogProps) {
             style={styles.root}
             {...otherProps}
         >
-            <React.Fragment>
+            <DialogProvider value={{ size }}>
                 {topElement ? (
                     <Column style={fullScreen ? undefined : styles.topElementContainer}>
                         <Column
@@ -143,14 +134,13 @@ export default function Dialog(props: DialogProps) {
                     </Column>
                 ) : null}
 
-                <Paper
-                    elevation={6}
-                    square={fullScreen}
+                <ShadowView
+                    variant={600}
                     style={paperStyle}
                 >
-                    {contents}
-                </Paper>
-            </React.Fragment>
+                    {children}
+                </ShadowView>
+            </DialogProvider>
         </Modal>
     );
 };

package/src/Dialog/DialogContext.tsx

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+import type { DialogSize } from './DialogProps';
+
+export type Context = {
+    size: DialogSize;
+};
+
+const DialogContext = createContext<Context>({
+    size: 'medium',
+});
+
+export const DialogProvider = DialogContext.Provider;
+
+export const useDialogContext = () => useContext(DialogContext);

package/src/Dialog/index.ts

@@ -1,2 +1,5 @@
-export { default } from './LegacyDialog';
-export type { default as DialogProps } from './LegacyDialogProps';
+export { default } from './Dialog';
+export type { default as DialogProps } from './DialogProps';
+export { dialogSizes } from './DialogProps';
+export { DialogProvider, useDialogContext } from './DialogContext';
+export { default as useDialogSectionStyle } from './useDialogSectionStyle';

package/src/Dialog/useDialogSectionStyle.ts

@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
+import type { FountainUiStyle } from '@fountain-ui/styles';
+import { useTheme } from '../styles';
+import { useDialogContext } from './DialogContext';
+import type { DialogSize } from './DialogProps';
+
+export default function useDialogSectionStyle() {
+    const { size } = useDialogContext();
+
+    const { width: windowWidth } = useWindowDimensions();
+
+    const theme = useTheme();
+
+    return useMemo<FountainUiStyle>(() => {
+        const sizePaddingHorizontalMap: Record<DialogSize, FountainUiStyle> = {
+            small: {
+                paddingHorizontal: theme.spacing(6),
+            },
+            medium: {
+                // TODO: need to refactor breakpoints.
+                paddingHorizontal: theme.spacing(windowWidth >= 448 ? 8 : 6),
+            },
+            large: {
+                paddingHorizontal: theme.spacing(8),
+            },
+        };
+
+        return sizePaddingHorizontalMap[size];
+    }, [size, theme, windowWidth]);
+}