diginet-core-ui 1.4.39 → 1.4.40

package/src/components/card/footer.js

@@ -0,0 +1,73 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import OptionWrapper from 'components/others/option-wrapper';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, refType as ref } from 'utils';
+
+const CardFooter = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'CardFooter' });
+        const { action = {}, children, className, id, style } = props;
+
+        const ref = useRef(null);
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        return useMemo(() => {
+            return (
+                <div id={id} ref={ref} style={style} className={classNames(`DGN-UI-Card-Footer`, className)}>
+                    {children}
+                </div>
+            );
+        }, [children, className, id, style]);
+    })
+);
+
+// CardFooter.defaultProps = {
+//     className: '',
+//     style: {},
+// };
+
+CardFooter.propTypes = {
+    /** The content of the component. */
+    children: PropTypes.node,
+    /** Class for component. ({container: '', header: '', body: '', footer: ''}) */
+    className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+    /** If `true`, will have divider between body and footer. */
+    style: PropTypes.object,
+    /** The title of the component's header. */
+    title: PropTypes.string,
+    /**
+     * ref methods (ref.current.instance.*method*)
+     *
+     * * option(): Gets all UI component properties
+     *  * Returns value - object
+     * * option(optionName): Gets the value of a single property
+     *  * @param {optionName} - string
+     *  * Returns value - any
+     * * option(optionName, optionValue): Updates the value of a single property
+     *  * @param {optionName} - string
+     *  * @param {optionValue} - any
+     * * option(options): Updates the values of several properties
+     *  * @param {options} - object
+     */
+    ref: ref,
+};
+
+export { CardFooter };
+export default OptionWrapper(CardFooter);

package/src/components/card/header.js

@@ -0,0 +1,74 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Typography } from 'components';
+import OptionWrapper from 'components/others/option-wrapper';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, refType as ref } from 'utils';
+
+const CardHeader = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'CardHeader' });
+        const { action = {}, children, className, id, style, title } = props;
+
+        const ref = useRef(null);
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        return useMemo(() => {
+            return (
+                <div id={id} ref={ref} style={style} className={classNames(`DGN-UI-Card-Header`, className)}>
+                    {children || <Typography type={'h3'}>{title}</Typography>}
+                </div>
+            );
+        }, [children, className, id, style, title]);
+    })
+);
+
+// CardHeader.defaultProps = {
+//     className: '',
+//     style: {},
+// };
+
+CardHeader.propTypes = {
+    /** The content of the component. */
+    children: PropTypes.node,
+    /** Class for component. ({container: '', header: '', body: '', footer: ''}) */
+    className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+    /** If `true`, will have divider between body and footer. */
+    style: PropTypes.object,
+    /** The title of the component's header. */
+    title: PropTypes.string,
+    /**
+     * ref methods (ref.current.instance.*method*)
+     *
+     * * option(): Gets all UI component properties
+     *  * Returns value - object
+     * * option(optionName): Gets the value of a single property
+     *  * @param {optionName} - string
+     *  * Returns value - any
+     * * option(optionName, optionValue): Updates the value of a single property
+     *  * @param {optionName} - string
+     *  * @param {optionValue} - any
+     * * option(options): Updates the values of several properties
+     *  * @param {options} - object
+     */
+    ref: ref,
+};
+
+export { CardHeader };
+export default OptionWrapper(CardHeader);

package/src/components/card/index.js

@@ -0,0 +1,256 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import OptionWrapper from 'components/others/option-wrapper';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import {
+    bgColor,
+    borderRadius4px,
+    boxBorder,
+    flexCol,
+    flexRow,
+    justifyEnd,
+    overflowHidden,
+    parseWidth,
+    parseWidthHeight,
+    positionAbsolute,
+    positionRelative,
+} from 'styles/general';
+import { getColor } from 'styles/utils';
+import { useTheme } from 'theme';
+import { classNames, getProp, refType as ref } from 'utils';
+import { CardBody } from './body';
+import { CardFooter } from './footer';
+import CardHeader from './header';
+import useThemeProps from 'theme/utils/useThemeProps';
+
+const Card = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+        const { colors } = theme;
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'Card' });
+        const {
+            action = {},
+            body: bodyProp,
+            bodyStyle,
+            children,
+            className,
+            dividerColor,
+            direction,
+            footer,
+            footerDivider,
+            footerStyle,
+            header,
+            headerDivider,
+            headerStyle,
+            height,
+            id,
+            style,
+            title,
+            width,
+        } = props;
+
+        const ref = useRef(null);
+
+        const _CardCSS = CardCSS(
+            width,
+            height,
+            headerDivider,
+            footerDivider,
+            getProp(colors, dividerColor, dividerColor),
+            direction,
+            theme
+        );
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        const head =
+            header || title ? (
+                <CardHeader className={classNames(className?.header)} style={headerStyle} title={title}>
+                    {header}
+                </CardHeader>
+            ) : null;
+
+        const foot = footer ? (
+            <CardFooter className={classNames(className?.footer)} style={footerStyle}>
+                {footer}
+            </CardFooter>
+        ) : null;
+
+        const body =
+            bodyProp || (children && (head || foot)) ? (
+                <CardBody className={classNames(className?.body)} style={bodyStyle}>
+                    {bodyProp || children}
+                </CardBody>
+            ) : null;
+
+        return useMemo(() => {
+            return (
+                <div
+                    id={id}
+                    ref={ref}
+                    css={_CardCSS}
+                    style={style}
+                    className={classNames(`DGN-UI-Card`, className?.container || className)}
+                >
+                    {head}
+                    {body || children}
+                    {foot}
+                </div>
+            );
+        }, [
+            bodyProp,
+            bodyStyle,
+            children,
+            className,
+            dividerColor,
+            direction,
+            footer,
+            footerDivider,
+            footerStyle,
+            header,
+            headerDivider,
+            headerStyle,
+            height,
+            id,
+            style,
+            title,
+            width,
+        ]);
+    })
+);
+
+const CardCSS = (width, height, headerDivider, footerDivider, dividerColor, direction, { colors, spacing }) => css`
+    ${direction === 'vertical' ? flexCol : flexRow};
+    ${positionRelative};
+    ${boxBorder};
+    ${borderRadius4px};
+    ${overflowHidden}
+    ${parseWidthHeight(width, height)};
+    ${parseWidth(width)};
+    ${bgColor(getProp(colors, 'system/standard'))};
+    .DGN-UI-Card-Header {
+        ${flexRow};
+        ${positionRelative};
+        ${boxBorder};
+        order: 1;
+        padding: ${spacing([4])};
+        &:after {
+            ${positionAbsolute};
+            content: '';
+            left: 0;
+            right: 0;
+            bottom: 0;
+            margin: ${spacing([0, 4])};
+            border-bottom: ${headerDivider ? `1px solid ${getColor(dividerColor)}` : 'none'};
+        }
+    }
+    .DGN-UI-Card-Body {
+        ${flexCol};
+        ${positionRelative};
+        ${boxBorder};
+        order: 2;
+        padding: ${spacing(headerDivider ? [4] : [0, 4, 4])};
+    }
+    .DGN-UI-Card-Footer {
+        ${flexRow};
+        ${justifyEnd};
+        ${positionRelative};
+        ${boxBorder};
+        order: 3;
+        padding: ${spacing(footerDivider ? [4] : [0, 4, 4])};
+        &:before {
+            ${positionAbsolute};
+            content: '';
+            left: 0;
+            right: 0;
+            top: 0;
+            margin: ${spacing([0, 4])};
+            border-top: ${footerDivider ? `1px solid ${getColor(dividerColor)}` : 'none'};
+        }
+    }
+    .DGN-UI-Card-Extra {
+        ${flexCol};
+        ${positionRelative};
+        ${boxBorder};
+    }
+`;
+
+// Card.defaultProps = {
+//     bodyStyle: {},
+//     className: '',
+//     dividerColor: 'line/category',
+//     direction: 'vertical',
+//     footerDivider: false,
+//     footerStyle: {},
+//     headerDivider: true,
+//     headerStyle: {},
+//     style: {},
+//     width: 258,
+//     height: 'max-content',
+// };
+
+Card.propTypes = {
+    /** The content of the component's body. */
+    body: PropTypes.node,
+    /** The content of the component's body. */
+    bodyStyle: PropTypes.object,
+    /** The content of the component. */
+    children: PropTypes.node,
+    /** Class for component. ({container: '', header: '', body: '', footer: ''}) */
+    className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+    /** Color of divider. */
+    dividerColor: PropTypes.string,
+    /** The content of the component's footer. */
+    footer: PropTypes.node,
+    /** If `true`, will have divider between body and footer. */
+    footerDivider: PropTypes.bool,
+    /** Style inline of component's footer. */
+    footerStyle: PropTypes.object,
+    /** The content of the component's header. */
+    header: PropTypes.node,
+    /** If `true`, will have divider between header and body. */
+    headerDivider: PropTypes.bool,
+    /** Style inline of component's header. */
+    headerStyle: PropTypes.object,
+    /** Height of the component. */
+    height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /** Style inline of component. */
+    style: PropTypes.object,
+    /** The title of the component's header. */
+    title: PropTypes.string,
+    /** Width of the component. */
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /**
+     * ref methods (ref.current.instance.*method*)
+     *
+     * * option(): Gets all UI component properties
+     *  * Returns value - object
+     * * option(optionName): Gets the value of a single property
+     *  * @param {optionName} - string
+     *  * Returns value - any
+     * * option(optionName, optionValue): Updates the value of a single property
+     *  * @param {optionName} - string
+     *  * @param {optionValue} - any
+     * * option(options): Updates the values of several properties
+     *  * @param {options} - object
+     */
+    ref: ref,
+};
+
+export { Card };
+export default OptionWrapper(Card);

package/src/components/card/index.stories.js

@@ -0,0 +1,242 @@
+/* eslint-disable no-undef */
+import { Avatar, Badge, Button, ButtonIcon, Icon, Typography } from 'components';
+import { ImportComp } from 'components/others/import/index.stories';
+import React from 'react';
+import { useTheme } from 'theme';
+import { Card } from '.';
+import { CardBody } from './body';
+import { CardExtra } from './extra';
+import { CardFooter } from './footer';
+import { CardHeader } from './header';
+
+const theme = useTheme();
+const { spacing } = theme;
+
+Card.defaultProps = theme?.components?.Card?.defaultProps || {};
+CardBody.defaultProps = theme?.components?.CardBody?.defaultProps || {};
+CardExtra.defaultProps = theme?.components?.CardExtra?.defaultProps || {};
+CardFooter.defaultProps = theme?.components?.CardFooter?.defaultProps || {};
+CardHeader.defaultProps = theme?.components?.CardHeader?.defaultProps || {};
+
+export default {
+    title: 'Components/Card',
+    component: Card,
+    subcomponents: { CardBody, CardFooter, CardHeader },
+    parameters: {
+        componentSubtitle: 'Cards contain content and actions about a single subject.',
+        backgrounds: {
+            default: 'grey',
+            values: [
+                { name: 'grey', value: 'grey' },
+                { name: 'white', value: 'white' },
+                { name: 'black', value: 'black' },
+            ],
+        },
+    },
+};
+
+const styles = {
+    container: {
+        display: 'flex',
+        gap: 40,
+        flexWrap: 'wrap',
+    },
+    placeholder: {
+        background: '#FAFBFC',
+        border: '1px dashed #9597A1',
+        borderRadius: 4,
+    },
+};
+
+// eslint-disable-next-line react/prop-types
+const Placeholder = ({ width = '100%', height = 112 }) => (
+    <div style={{ ...styles.placeholder, minWidth: width, minHeight: height }} />
+);
+
+const ButtonFooter = (
+    <Button viewType={'filled'} size={'small'}>
+        Button
+    </Button>
+);
+
+const avatar01 = require('../../assets/storybook/avatar01.svg');
+const cover01 = require('../../assets/storybook/cover01.svg');
+
+const loremText =
+    'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.';
+
+const Template = args => {
+    return (
+        <>
+            <ImportComp components={'Card'} />
+            <Card {...args} title={'Card title'} bodyStyle={{ gap: spacing([2]) }} footer={ButtonFooter}>
+                <Placeholder />
+                <Placeholder />
+                <Placeholder />
+            </Card>
+        </>
+    );
+};
+
+const Template2 = args => {
+    return (
+        <>
+            <ImportComp components={'Card, CardBody, CardFooter, CardHeader'} />
+            <Card {...args}>
+                <CardHeader title={'Card title'} />
+                <CardBody style={{ gap: spacing([2]) }}>
+                    <Placeholder />
+                    <Placeholder />
+                    <Placeholder />
+                </CardBody>
+                <CardFooter>{ButtonFooter}</CardFooter>
+            </Card>
+        </>
+    );
+};
+
+const Template3 = args => {
+    return (
+        <>
+            <ImportComp components={'Card, CardBody, CardFooter, CardHeader'} />
+            <div style={styles.container}>
+                <Card {...args} footerDivider headerDivider={false}>
+                    <CardHeader>
+                        <Avatar src={avatar01} />
+                        <div style={{ alignSelf: 'center', marginLeft: spacing([2]) }}>
+                            <Typography type={'h3'} color={'text/main'}>
+                                Theresa Vu
+                            </Typography>
+                            <Typography type={'p2'} color={'line/normal'}>
+                                Designer
+                            </Typography>
+                        </div>
+                        <ButtonIcon circular viewType={'text'} name={'More'} style={{ marginLeft: 'auto' }} />
+                    </CardHeader>
+                    <CardExtra style={{ order: 2, padding: spacing([0, 4, 4]) }}>
+                        <img src={cover01} width={328} style={{ borderRadius: 4 }} alt={''} />
+                    </CardExtra>
+                    <CardBody>
+                        <Typography type={'p3'}>{loremText}</Typography>
+                    </CardBody>
+                    <CardFooter>{ButtonFooter}</CardFooter>
+                </Card>
+                {/* =============================================================== */}
+                <Card {...args} footerDivider headerDivider={false}>
+                    <CardExtra style={{ order: 0 }}>
+                        <img src={cover01} width={360} alt={''} />
+                    </CardExtra>
+                    <CardHeader>
+                        <Avatar src={avatar01} />
+                        <div style={{ alignSelf: 'center', marginLeft: spacing([2]) }}>
+                            <Typography type={'h3'} color={'text/main'}>
+                                Theresa Vu
+                            </Typography>
+                            <Typography type={'p2'} color={'line/normal'}>
+                                Designer
+                            </Typography>
+                        </div>
+                        <ButtonIcon circular viewType={'text'} name={'More'} style={{ marginLeft: 'auto' }} />
+                    </CardHeader>
+                    <CardBody>
+                        <Typography type={'p3'}>{loremText}</Typography>
+                    </CardBody>
+                    <CardFooter>{ButtonFooter}</CardFooter>
+                </Card>
+                {/* =============================================================== */}
+                <Card headerDivider>
+                    <CardHeader style={{ flexDirection: 'column' }}>
+                        <div style={{ display: 'flex' }}>
+                            <Typography type={'h3'} color={'aqua5'} style={{ alignSelf: 'center' }}>
+                                Received
+                            </Typography>
+                            <Icon name={'Info'} color={'aqua5'} style={{ marginLeft: spacing([2]) }} />
+                            <Typography type={'t3'} color={'aqua5'} style={{ marginLeft: 'auto' }}>
+                                3
+                            </Typography>
+                        </div>
+                        <Typography type={'p2'} color={'line/normal'} style={{ marginLeft: 'auto' }}>
+                            đã nhận hồ sơ
+                        </Typography>
+                    </CardHeader>
+                    <CardBody>
+                        <Typography>8 tổng số</Typography>
+                        <Typography>3 xác nhận</Typography>
+                        <Typography>5 đã hủy</Typography>
+                    </CardBody>
+                </Card>
+                {/* =============================================================== */}
+                <Card direction={'horizontal'} headerDivider={false} width={400} height={120}>
+                    <CardExtra style={{ order: 0 }}>
+                        <img src={cover01} width={113} height={120} style={{ objectFit: 'cover' }} alt={''} />
+                    </CardExtra>
+                    <div>
+                        <CardHeader style={{ padding: spacing([3, 4]) }}>
+                            <Typography type={'h3'}>Card title</Typography>
+                        </CardHeader>
+                        <CardBody>
+                            <Typography type={'p3'} lineClamp={2}>
+                                {loremText}
+                            </Typography>
+                        </CardBody>
+                        <CardFooter style={{ justifyContent: 'flex-start', padding: spacing([0, 4, 3]) }}>
+                            {<Button viewType={'link'}>Button</Button>}
+                        </CardFooter>
+                    </div>
+                </Card>
+                {/* =============================================================== */}
+                <Card direction={'horizontal'} headerDivider={false} width={592} height={140}>
+                    <CardExtra style={{ order: 0, padding: spacing(2) }}>
+                        <img
+                            src={cover01}
+                            width={104}
+                            height={104}
+                            style={{ objectFit: 'cover', borderRadius: 4 }}
+                            alt={''}
+                        />
+                    </CardExtra>
+                    <div>
+                        <CardHeader style={{ padding: spacing([2, 0, 1]), flexDirection: 'column' }}>
+                            <Badge content="Internal news" color={'info'} />
+                            <Typography type={'h3'} style={{ padding: spacing([1, 0, 0, 0]) }}>
+                                Running out of anticoagulants, the hospital is at risk of stopping heart surgery
+                            </Typography>
+                        </CardHeader>
+                        <CardBody style={{ padding: 0 }}>
+                            <Typography type={'p3'} lineClamp={2}>
+                                {loremText}
+                            </Typography>
+                            <Typography type={'p2'} color={'text/sub'}>
+                                1 hour ago
+                            </Typography>
+                        </CardBody>
+                    </div>
+                    <CardExtra style={{ alignItems: 'center', marginRight: spacing([1]) }}>
+                        <Badge color={'danger'} size={'giant'} style={{ padding: spacing([4, 0, 26 / 4]) }} />
+                        <ButtonIcon circular name={'More'} viewType={'text'} />
+                    </CardExtra>
+                </Card>
+            </div>
+        </>
+    );
+};
+
+export const UseProp = Template.bind({});
+UseProp.args = {
+    width: 360,
+    dividerColor: '',
+    footerDivider: false,
+    headerDivider: false,
+};
+
+export const UseChildren = Template2.bind({});
+UseChildren.parameters = { controls: { include: [], hideNoControlsWarning: true } };
+UseChildren.args = {
+    width: 360,
+};
+
+export const Examples = Template3.bind({});
+Examples.parameters = { controls: { include: [], hideNoControlsWarning: true } };
+Examples.args = {
+    width: 360,
+};