@fountain-ui/core 3.0.0-alpha.1 → 3.0.0-alpha.11

package/src/DialogContent/DialogContent.tsx

@@ -40,8 +40,7 @@ export default function DialogContent(props: DialogContentProps) {
     ]);
 
     const contentFontStyle = createFontStyle(theme, {
-        // TODO: select typography.
-        // selector: (typography) => typography.body2.regular,
+        selector: (typography) => typography.body2.regular,
         color: theme.palette.text.base,
     });
 

package/src/DialogTitle/BackButton.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import type { IconButtonProps } from '../IconButton';
+import IconButton from '../IconButton';
+import { ChevronLeft } from '../internal';
+import { css } from '@fountain-ui/styles';
+
+const styles = StyleSheet.create({
+    root: {
+        height: 40,
+        left: 20,
+        paddingLeft: 5,
+        paddingRight: 11,
+        paddingVertical: 8,
+        position: 'absolute',
+        width: 40,
+    },
+});
+
+interface BackButtonProps extends Omit<IconButtonProps, 'children'> {}
+
+export default function BackButton(props: BackButtonProps) {
+    const {
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    return (
+        <IconButton
+            style={rootStyle}
+            {...otherProps}
+        >
+            <ChevronLeft
+                color={'strong'}
+                size={'large'}
+            />
+        </IconButton>
+    );
+}

package/src/DialogTitle/CloseButton.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import type { IconButtonProps } from '../IconButton';
+import IconButton from '../IconButton';
+import { Close } from '../internal';
+import { css } from '@fountain-ui/styles';
+
+const styles = StyleSheet.create({
+    root: {
+        height: 40,
+        left: 20,
+        padding: 8,
+        position: 'absolute',
+        width: 40,
+    },
+});
+
+interface CloseButtonProps extends Omit<IconButtonProps, 'children'> {}
+
+export default function CloseButton(props: CloseButtonProps) {
+    const {
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    return (
+        <IconButton
+            style={rootStyle}
+            {...otherProps}
+        >
+            <Close
+                color={'strong'}
+                size={'large'}
+            />
+        </IconButton>
+    );
+}

package/src/DialogTitle/DialogTitle.tsx

@@ -3,6 +3,8 @@ import { Text, View } from 'react-native';
 import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { useDialogSectionStyle } from '../Dialog';
 import { createFontStyle, css, useTheme } from '../styles';
+import BackButton from './BackButton';
+import CloseButton from './CloseButton';
 import type DialogTitleProps from './DialogTitleProps';
 
 type DialogTitleStyles = NamedStylesStringUnion<'root' | 'title'>;
@@ -20,7 +22,7 @@ const useStyles: UseStyles<DialogTitleStyles> = function (): DialogTitleStyles {
     };
 };
 
-export default function DialogTitle(props: DialogTitleProps) {
+const DialogTitle = (props: DialogTitleProps) => {
     const {
         children,
         style: styleProp,
@@ -62,3 +64,9 @@ export default function DialogTitle(props: DialogTitleProps) {
         </View>
     );
 };
+
+DialogTitle.BackButton = BackButton;
+
+DialogTitle.CloseButton = CloseButton;
+
+export default DialogTitle;

package/src/Divider/Divider.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import type { Theme } from '@fountain-ui/styles';
+import { commonColors } from '@fountain-ui/styles';
 import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
 import { ExtendedStyle } from '../types';
 import type DividerProps from './DividerProps';
@@ -29,6 +30,10 @@ function selectBorderColor(theme: Theme, variant: DividerVariant, vertical: bool
             return vertical ? theme.palette.border.weaker : theme.palette.border.weak;
         case 'strong':
             return vertical ? theme.palette.border.weak : theme.palette.border.base;
+        case 'strongStatic':
+            return commonColors.opacity.white['13'];
+        case 'baseStatic':
+            return commonColors.opacity.white['10'];
     }
 }
 
@@ -96,7 +101,7 @@ export default function Divider(props: DividerProps) {
     };
 
     const fontStyle = createFontStyle(theme, {
-        selector: (typo) => typo.caption2,
+        selector: (typo) => typo.caption2.medium,
         color: fontColor,
     });
 

package/src/Divider/DividerProps.ts

@@ -2,10 +2,10 @@ import React from 'react';
 import type { ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
 
-export const elementAligns = ['start', 'center', 'end'] as const;
-export type ElementAlign = typeof elementAligns[number];
+export const dividerElementAligns = ['start', 'center', 'end'] as const;
+export type DividerElementAlign = typeof dividerElementAligns[number];
 
-export const dividerVariants = ['base', 'strong'] as const;
+export const dividerVariants = ['base', 'strong', 'baseStatic', 'strongStatic'] as const;
 export type DividerVariant = typeof dividerVariants[number];
 
 export default interface DividerProps extends OverridableComponentProps<ViewProps, {
@@ -42,7 +42,7 @@ export default interface DividerProps extends OverridableComponentProps<ViewProp
      *  Set position of children.
      *  @default center
      */
-    elementAlign?: ElementAlign;
+    elementAlign?: DividerElementAlign;
 
     /**
      * Select the style of the divider based on this value.

package/src/Divider/index.ts

@@ -1,2 +1,3 @@
 export { default } from './Divider';
 export type { default as DividerProps } from './DividerProps';
+export { dividerVariants, dividerElementAligns } from './DividerProps';

package/src/Empty/Empty.tsx

@@ -55,8 +55,7 @@ export default function Empty(props: EmptyProps) {
     });
 
     const descriptionFontStyle = createFontStyle(theme, {
-        // TODO: select typography.
-        // selector: (typography) =>  typography.body2.regular,
+        selector: (typography) => typography.body3.regular,
         color: theme.palette.text.base,
     });
 

package/src/Flexbox/Flexbox.tsx

@@ -27,6 +27,7 @@ export default function createFlexbox(direction: 'row' | 'column') {
             flexGrow,
             flexShrink,
             flexWrap,
+            gap,
             children,
             insets,
             justifyContent,
@@ -46,6 +47,7 @@ export default function createFlexbox(direction: 'row' | 'column') {
             flexGrow,
             flexShrink,
             flexWrap,
+            gap,
             justifyContent,
             overflow,
         };

package/src/Flexbox/FlexboxProps.ts

@@ -48,6 +48,11 @@ export default interface FlexboxProps extends OverridableComponentProps<ViewProp
      */
     flexWrap?: FlexStyle['flexWrap'];
 
+    /**
+     * Defines the spacing between items in a flex container.
+     */
+    gap?: number | undefined;
+
     /**
      * Content of this component.
      */

package/src/IconButton/index.ts

@@ -1,2 +1,3 @@
 export { default } from './IconButton';
 export type { default as IconButtonProps } from './IconButtonProps';
+export { iconButtonColors } from './IconButtonProps';

package/src/ListItem/ListItem.tsx

@@ -1,36 +1,52 @@
 import React from 'react';
-import { Platform, View } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import type { FlexStyle } from 'react-native';
+import { Platform, Text, View } from 'react-native';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { typographyOf } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase';
-import { css, useTheme } from '../styles';
-import ListItemProps from './ListItemProps';
+import Row from '../Row';
+import { createFontStyle, css, useTheme } from '../styles';
+import type ListItemProps from './ListItemProps';
 
-type ListItemStyles = NamedStylesStringUnion<'root'>;
+type ListItemStyles = NamedStylesStringUnion<'content' | 'description' | 'divider' | 'dividerWrapper'>;
 
 const useStyles: UseStyles<ListItemStyles> = function (): ListItemStyles {
     const theme = useTheme();
 
     return {
-        root: {
-            flexDirection: 'row',
-            paddingVertical: theme.spacing(3),
+        content: {
+            gap: theme.spacing(2),
+            paddingVertical: theme.spacing(3.75),
             paddingHorizontal: theme.spacing(4),
             width: '100%',
         },
+        description: {
+            paddingRight: theme.spacing(20),
+        },
+        divider: {
+            borderBottomColor: theme.palette.border.weak,
+            borderBottomWidth: 0.5,
+        },
+        dividerWrapper: {
+            paddingHorizontal: theme.spacing(4),
+        },
     };
 };
 
 export default function ListItem(props: ListItemProps) {
     const {
-        alignItems = 'center',
+        alignItems = 'center' as FlexStyle['alignItems'],
         button = false,
         children,
+        description,
         disabled = false,
         onPress,
         style,
         ...otherProps
     } = props;
 
+    const theme = useTheme();
+
     const styles = useStyles();
 
     const rootComponentProps = {
@@ -38,33 +54,58 @@ export default function ListItem(props: ListItemProps) {
         ...otherProps,
     };
 
-    const rootStyle = css([
-        styles.root,
-        { alignItems },
+    const contentWrapperStyle = css([
+        styles.content,
         style,
     ]);
 
-    if (button) {
-        return (
-            // @ts-ignore
-            <View {...rootComponentProps}>
+    const descriptionFontStyle = createFontStyle(theme, {
+        selector: (_) => typographyOf({
+            fontSize: 14,
+            lineHeight: 19.6,
+            fontFamily: 'PretendardStd-Regular',
+            letterSpacing: 0,
+        }),
+        color: theme.palette.text.base,
+    });
+
+    const content = (
+        <React.Fragment>
+            <Row alignItems={alignItems}>
+                {children}
+            </Row>
+
+            {description ? (
+                <Text style={css([
+                    styles.description,
+                    descriptionFontStyle,
+                ])}>
+                    {description}
+                </Text>
+            ) : null}
+        </React.Fragment>
+    );
+
+    return (
+        // @ts-ignore
+        <View {...rootComponentProps}>
+            {button ? (
                 <ButtonBase
                     disabled={disabled}
                     onPress={onPress}
-                    style={rootStyle}
+                    style={contentWrapperStyle}
                 >
-                    {children}
+                    {content}
                 </ButtonBase>
-            </View>
-        );
-    }
+            ) : (
+                <View style={contentWrapperStyle}>
+                    {content}
+                </View>
+            )}
 
-    return (
-        // @ts-ignore
-        <View
-            children={children}
-            style={rootStyle}
-            {...rootComponentProps}
-        />
+            <View style={styles.dividerWrapper}>
+                <View style={styles.divider}/>
+            </View>
+        </View>
     );
 };

package/src/ListItem/ListItemProps.ts

@@ -16,6 +16,11 @@ export default interface ListItemProps extends OverridableComponentProps<React.P
      */
     button?: boolean;
 
+    /**
+     * Displays a description in this item.
+     */
+    description?: string;
+
     /**
      * Whether to prevent interaction with the ButtonBase.
      * @default false

package/src/ListItemIcon/ListItemIcon.tsx

@@ -11,8 +11,7 @@ const useStyles: UseStyles<ListItemIconStyles> = function (): ListItemIconStyles
 
     return {
         root: {
-            marginRight: theme.spacing(2),
-            minWidth: 24,
+            marginRight: theme.spacing(3),
             flexShrink: 0,
         },
     };

package/src/ListItemSecondaryAction/ListItemSecondaryAction.tsx

@@ -9,6 +9,8 @@ type ListItemSecondaryActionStyles = NamedStylesStringUnion<'root'>;
 const useStyles: UseStyles<ListItemSecondaryActionStyles> = function (): ListItemSecondaryActionStyles {
     return {
         root: {
+            alignItems: 'center',
+            flexDirection: 'row',
             flexShrink: 0,
             marginLeft: 'auto',
         },

package/src/ListItemText/ListItemText.tsx

@@ -1,37 +1,42 @@
 import React from 'react';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { Text } from 'react-native';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { typographyOf } from '@fountain-ui/styles';
 import Column from '../Column';
-import Typography from '../Typography';
-import { css, useTheme } from '../styles';
+import { createFontStyle, css, useTheme } from '../styles';
 import type ListItemTextProps from './ListItemTextProps';
 
-type ListItemTextStyles = NamedStylesStringUnion<'root' | 'multiline'>;
+type ListItemTextStyles = NamedStylesStringUnion<'root'>;
 
 const useStyles: UseStyles<ListItemTextStyles> = function (): ListItemTextStyles {
-    const theme = useTheme();
-
     return {
         root: {
             flexGrow: 1,
             flexShrink: 1,
         },
-        multiline: {
-            marginBottom: theme.spacing(1),
-        },
     };
 };
 
 export default function ListItemText(props: ListItemTextProps) {
     const {
-        primary,
-        secondary,
+        children,
         style,
         ...otherProps
     } = props;
 
+    const theme = useTheme();
+
     const styles = useStyles();
 
-    const isMultiline = !!(primary && secondary);
+    const fontStyle = createFontStyle(theme, {
+        selector: (_) => typographyOf({
+            fontSize: 16,
+            lineHeight: 19.2,
+            fontFamily: 'PretendardStd-Medium',
+            letterSpacing: 0,
+        }),
+        color: theme.palette.text.strong,
+    });
 
     return (
         <Column
@@ -41,22 +46,9 @@ export default function ListItemText(props: ListItemTextProps) {
             ])}
             {...otherProps}
         >
-            {primary ? (
-                <Typography
-                    children={primary}
-                    color={'strong'}
-                    variant={'body3'}
-                    style={isMultiline ? styles.multiline : undefined}
-                />
-            ) : null}
-
-            {secondary ? (
-                <Typography
-                    children={secondary}
-                    color={'strong'}
-                    variant={'body3'}
-                />
-            ) : null}
+            <Text style={fontStyle}>
+                {children}
+            </Text>
         </Column>
     );
 };

package/src/ListItemText/ListItemTextProps.ts

@@ -1,17 +1,9 @@
-import type { TypographyProps } from '../Typography';
 import type { OverridableComponentProps } from '../types';
 import type { ColumnProps } from '../Column';
 
-type BaseProps = Omit<ColumnProps, 'children'>;
-
-export default interface ListItemTextProps extends OverridableComponentProps<BaseProps, {
+export default interface ListItemTextProps extends OverridableComponentProps<ColumnProps, {
     /**
      * The main content element.
      */
-    primary?: TypographyProps['children'];
-
-    /**
-     * The secondary content element.
-     */
-    secondary?: TypographyProps['children'];
+    children: string;
 }> {}

package/src/ListSubheader/ListSubheader.tsx

@@ -27,7 +27,7 @@ export default function ListSubheader(props: ListSubheaderProps) {
                 <Typography
                     children={children}
                     color={'strong'}
-                    variant={'caption3'}
+                    variant={'caption2'}
                 />
             )}
         </Row>

package/src/Pagination/NumberPagination.tsx

@@ -45,7 +45,7 @@ export default function NumberPagination(props: NumberPaginationProps) {
     const typography = typographyOf({
         fontSize: 9.5,
         lineHeight: 11.4,
-        fontFamily: 'Pretendard-SemiBold',
+        fontFamily: 'PretendardStd-SemiBold',
         letterSpacing: -0.19,
     });
 

package/src/Pagination/Pagination.tsx

@@ -8,7 +8,7 @@ import IconButton from '../IconButton';
 import PaginationItem from '../PaginationItem';
 import NumberPagination from './NumberPagination';
 import type PaginationProps from './PaginationProps';
-import type { PaginationVariant } from './PaginationProps';
+import type { PaginationColor, PaginationVariant } from './PaginationProps';
 
 type PaginationStyleKeys =
     | 'root'
@@ -65,6 +65,7 @@ export default function Pagination(props: PaginationProps) {
     const {
         bundleSize = 1,
         children,
+        color = 'base' as PaginationColor,
         count,
         disabled = false,
         hideIndicator = false,
@@ -134,7 +135,7 @@ export default function Pagination(props: PaginationProps) {
                 currentPage={page}
                 maxPage={count}
             />
-        ) : times(i => renderItem({ index: i, disabled, selected: i === page }), count)
+        ) : times(i => renderItem({ color, index: i, disabled, selected: i === page }), count)
     ) : null;
 
     const containerProps = {

package/src/Pagination/PaginationProps.ts

@@ -2,10 +2,19 @@ import React from 'react';
 import type { ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
 
+export const paginationColors = ['base', 'static'] as const;
+export type PaginationColor = typeof paginationColors[number];
+
 export const paginationVariants = ['dot', 'number'] as const;
 export type PaginationVariant = typeof paginationVariants[number];
 
 export interface PaginationRenderItemParams {
+    /**
+     * Set color of dot.
+     * @default 'base'
+     */
+    color?: PaginationColor;
+
     /**
      * Index of the pagination item.
      */
@@ -34,6 +43,12 @@ export default interface PaginationProps extends OverridableComponentProps<ViewP
      */
     children?: React.ReactNode;
 
+    /**
+     * Set color of dot.
+     * @default 'base'
+     */
+    color?: PaginationColor;
+
     /**
      * The total number of pages.
      */

package/src/Pagination/index.ts

@@ -1,2 +1,3 @@
 export { default } from './Pagination';
-export type { default as PaginationProps } from './PaginationProps';
+export type { default as PaginationProps, PaginationColor, PaginationVariant } from './PaginationProps';
+export { paginationColors, paginationVariants } from './PaginationProps';

package/src/PaginationItem/PaginationItem.tsx

@@ -1,47 +1,54 @@
 import React from 'react';
-import { View } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { StyleSheet, View, ViewStyle } from 'react-native';
+import { commonColors, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { PaginationColor } from '../Pagination';
 import { css, useTheme } from '../styles';
 import type PaginationItemProps from './PaginationItemProps';
 
-type PaginationItemStyles = NamedStylesStringUnion<'root' | 'selected' | 'unselected'>;
+const DEFAULT_SIZE = 6;
 
-const useStyles: UseStyles<PaginationItemStyles> = function (): PaginationItemStyles {
+const styles = StyleSheet.create({
+    root: {
+        width: DEFAULT_SIZE,
+        height: DEFAULT_SIZE,
+        borderRadius: DEFAULT_SIZE * 0.5,
+        marginHorizontal: 4,
+    },
+});
+
+function getBackgroundColor(color: PaginationColor, selected: boolean): ViewStyle['backgroundColor'] {
     const theme = useTheme();
 
-    const size = 6;
-
-    return {
-        root: {
-            width: size,
-            height: size,
-            borderRadius: size * 0.5,
-            marginHorizontal: theme.spacing(1),
-        },
-        selected: {
-            backgroundColor: theme.palette.fill.base,
-        },
-        unselected: {
-            backgroundColor: theme.palette.status.disabled,
-        },
-    };
-};
+    switch (color) {
+        case 'static':
+            return selected
+                ? commonColors.static.strongInverse
+                : commonColors.static.weakOpacityInverse;
+        case 'base':
+        default:
+            return selected
+                ? theme.palette.fill.base
+                : theme.palette.status.disabled;
+
+    }
+}
 
 function PaginationItem(props: PaginationItemProps) {
     const {
+        color = 'base' as PaginationColor,
         disabled,
-        selected,
+        selected = false,
         style,
         ...otherProps
     } = props;
 
-    const styles = useStyles();
+    const backgroundColor = getBackgroundColor(color, selected);
 
     return (
         <View
             style={css([
                 styles.root,
-                selected ? styles.selected : styles.unselected,
+                { backgroundColor },
                 style,
             ])}
             {...otherProps}