diginet-core-ui 1.4.39 → 1.4.40

package/src/components/chip/index.js

@@ -0,0 +1,366 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon, Icon, Typography } from 'components';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import {
+    bgColor,
+    border,
+    boxBorder,
+    cursorNotAllowed,
+    displayInlineFlex,
+    flexRow,
+    itemsCenter,
+    justifyCenter,
+    overflowHidden,
+    parseMaxWidthHeight,
+    parseMinWidthHeight,
+    parseWidthHeight,
+    pointerEventsNone,
+    positionAbsolute,
+    positionRelative,
+    textColor,
+    // userSelectNone,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, getProp, hexToRGBA } from 'utils';
+
+const colorMap = new Map([
+    ['default', 'system/active'],
+    ['primary', 'system/active'],
+    ['success', 'semantic/success'],
+    ['warning', 'semantic/warning'],
+    ['danger', 'semantic/danger'],
+    ['info', 'semantic/info'],
+]);
+
+const iconSizeMap = new Map([
+    ['small', `16px`],
+    ['medium', `20px`],
+    ['large', `24px`],
+]);
+
+const typographySizeMap = new Map([
+    ['small', 'p3'],
+    ['medium', 'p2'],
+    ['large', 'p1'],
+]);
+
+const paddingSizeMap = new Map([
+    ['small', `0px 6px`],
+    ['medium', `0px 8px`],
+    ['large', `0px 10px`],
+]);
+
+const minHeightSizeMap = new Map([
+    ['small', `20px`],
+    ['medium', `24px`],
+    ['large', `28px`],
+]);
+
+const Chip = 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: 'Chip' });
+        const {
+            children,
+            className,
+            clearAble,
+            color: colorProps,
+            disabled,
+            endIcon,
+            label,
+            labelProps,
+            onClick,
+            onDbClick: onDbClickProp,
+            onDoubleClick,
+            onRemove,
+            readOnly,
+            size,
+            startIcon,
+            style,
+            viewType,
+        } = props;
+
+        const onDbClick = !onDbClickProp && onDoubleClick ? onDoubleClick : onDbClickProp;
+
+        const ref = useRef(null);
+
+        let color = colorMap.get(colorProps) || colorProps;
+        color = getProp(colors, color, color);
+
+        const infoChip = {
+            color: color,
+            contentColor: viewType !== 'filled' ? color : getProp(colors, 'system/standard'),
+            backgroundColor: viewType !== 'filled' ? getProp(colors, 'system/standard') : color,
+            iconSize: iconSizeMap.get(size),
+            paddingSize: paddingSizeMap.get(size),
+            typographySize: typographySizeMap.get(size),
+            minHeightSize: minHeightSizeMap.get(size),
+            viewType,
+        };
+
+        infoChip.border =
+            viewType === 'ghost'
+                ? 'transparent !important'
+                : colorProps === 'default'
+                ? getProp(colors, 'system/rest')
+                : infoChip?.color;
+        infoChip.contentColor =
+            colorProps === 'default' && viewType === 'outlined'
+                ? getProp(colors, 'system/rest')
+                : infoChip?.contentColor;
+        infoChip.backgroundColor =
+            colorProps === 'default' && viewType === 'filled'
+                ? getProp(colors, 'system/rest')
+                : infoChip?.backgroundColor;
+
+        const _ChipRootCSS = ChipRootCSS(onClick, onDbClick, infoChip, theme);
+        const _ChipIconCSS = ChipIconCSS(infoChip);
+
+        const onRemoveHandler = () => {
+            if (onRemove || disabled) onRemove(ref.current);
+        };
+
+        const _onClick = event => {
+            onClick && event.stopPropagation();
+            if (disabled) return;
+            onClick && onClick(event);
+        };
+
+        const _onDbClick = event => {
+            onDbClick && event.stopPropagation();
+            if (disabled) return;
+            onDbClick && onDbClick(event);
+        };
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            const _instance = {}; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        // Start Icon
+        const startIconView = useMemo(() => {
+            if (typeof startIcon === 'string') {
+                return (
+                    <Icon
+                        name={startIcon}
+                        width={infoChip.iconSize}
+                        height={infoChip.iconSize}
+                        color={'currentColor'}
+                    />
+                );
+            } else return <div css={_ChipIconCSS}>{startIcon}</div>;
+        }, [startIcon, size]);
+
+        // Label
+        const labelView = (
+            <Typography
+                // css={ChipLabelCSS}
+                type={infoChip.typographySize}
+                color={'inherit'}
+                lineClamp={1}
+                hoverTooltip
+                {...labelProps}
+            >
+                {label}
+            </Typography>
+        );
+
+        // End Icon
+        const endIconView = useMemo(() => {
+            let node = endIcon;
+            if (typeof node === 'string') {
+                return (
+                    <Icon
+                        name={node}
+                        width={infoChip.iconSize}
+                        height={infoChip.iconSize}
+                        color={infoChip.contentColor}
+                    />
+                );
+            }
+
+            return clearAble ? (
+                <ButtonIcon
+                    className={'end-icon'}
+                    viewType={'ghost'}
+                    name={'Close'}
+                    width={infoChip.iconSize}
+                    height={infoChip.iconSize}
+                    color={infoChip.contentColor}
+                    disabled={disabled}
+                    onClick={onRemoveHandler}
+                />
+            ) : (
+                node && (
+                    <div css={_ChipIconCSS} className={'end-icon ' + size}>
+                        {node}
+                    </div>
+                )
+            );
+        }, [clearAble, viewType, color, endIcon, size, disabled, onRemove]);
+
+        return (
+            <div
+                css={_ChipRootCSS}
+                ref={ref}
+                className={classNames(
+                    'DGN-UI-Chip',
+                    className,
+                    disabled && 'chip--disabled',
+                    readOnly && 'chip--readOnly',
+                    viewType === 'filled' && 'chip--filled'
+                )}
+                style={style}
+                onClick={_onClick}
+                onDoubleClick={_onDbClick}
+            >
+                {!!startIcon && startIconView}
+                {!!label && labelView}
+                {(!!endIcon || !!clearAble) && endIconView}
+                {children}
+            </div>
+        );
+    })
+);
+
+// const ChipLabelCSS = css`
+//     ${flexRow};
+//     ${itemsCenter};
+//     ${positionRelative};
+//     ${userSelectNone};
+// `;
+
+const ChipRootCSS = (onClick, onDbClick, info, { colors, spacing }) => css`
+    ${displayInlineFlex};
+    ${itemsCenter};
+    ${positionRelative};
+    ${boxBorder};
+    ${border('1px', info.border)};
+    width: max-content;
+    padding: ${info?.paddingSize};
+    ${textColor(info?.contentColor)};
+    ${bgColor(info?.backgroundColor)};
+    border-radius: ${spacing([4])};
+    cursor: ${onClick || onDbClick ? 'pointer' : 'unset'};
+    height: ${info?.minHeightSize};
+    min-height: ${info?.minHeightSize};
+    gap: ${spacing([1])};
+    &.chip--filled {
+        &:not(.chip--disabled):not(.chip--readOnly) {
+            &::after {
+                border-radius: ${spacing([4])};
+                ${positionAbsolute};
+                top: 0;
+                left: 0;
+                content: '';
+                ${parseWidthHeight('100%')};
+                ${pointerEventsNone};
+            }
+            &:hover::after,
+            &:focus::after {
+                ${bgColor(hexToRGBA(getProp(colors, 'system/on-standard'), 0.15))};
+            }
+            &:active::after {
+                ${bgColor(hexToRGBA(getProp(colors, 'system/on-standard'), 0.3))};
+            }
+        }
+    }
+    &:not(.chip--filled) {
+        &:not(.chip--disabled):not(.chip--readOnly):hover {
+            ${border('1px', info?.color)};
+            ${bgColor(hexToRGBA(info?.color, 0.1))};
+            ${textColor(info?.color)};
+        }
+        &:not(.chip--disabled):not(.chip--readOnly):active {
+            ${border('1px', info?.color)};
+            ${bgColor(hexToRGBA(info?.color, 0.3))};
+            ${textColor(info?.color)};
+        }
+        &:not(.chip--disabled):not(.chip--readOnly):focus {
+            ${border('1px', info?.color)};
+            ${bgColor(hexToRGBA(info?.color, 0.2))};
+            ${textColor(info?.color)};
+        }
+    }
+    &.chip--disabled {
+        ${textColor(getProp(colors, 'system/disabled'))};
+        ${bgColor(getProp(colors, 'system/standard'))};
+        ${border('1px', getProp(colors, 'system/disabled'))};
+    }
+    &.chip--readOnly,
+    &.chip--disabled {
+        ${cursorNotAllowed}
+    }
+`;
+
+const ChipIconCSS = info => css`
+    ${flexRow};
+    ${justifyCenter};
+    ${itemsCenter};
+    ${positionRelative};
+    ${boxBorder};
+    ${overflowHidden};
+    ${parseWidthHeight(info?.iconSize)};
+    ${parseMinWidthHeight(info?.iconSize)};
+    ${parseMaxWidthHeight(info?.iconSize)};
+`;
+
+// Chip.defaultProps = {
+//     viewType: 'outlined',
+//     size: 'medium',
+//     color: 'default',
+// };
+
+Chip.propTypes = {
+    /** Content to display in the component. */
+    label: PropTypes.string,
+    /** The CSS class for the component. */
+    className: PropTypes.string,
+    /** Inline style for the component. */
+    style: PropTypes.object,
+    /** The icon displayed at the start of the component. */
+    startIcon: PropTypes.any,
+    /** The icon displayed at the end of the component. */
+    endIcon: PropTypes.any,
+    /** The variant to use. */
+    viewType: PropTypes.oneOf(['ghost', 'outlined', 'filled']),
+    /** Color for the text or background of the Chip. */
+    color: PropTypes.oneOfType([
+        PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']),
+        PropTypes.string,
+    ]),
+    /** Size of the component. */
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
+    /** If `true`, a clear icon will be shown. */
+    clearAble: PropTypes.bool,
+    /** If `true`, all events will be disabled and the color will be changed. */
+    disabled: PropTypes.bool,
+    /** If `true`, all events will be disabled. */
+    readOnly: PropTypes.bool,
+    /** Function to be called after removing the component. */
+    onRemove: PropTypes.func,
+    /** Function to be called when the component is clicked. */
+    onClick: PropTypes.func,
+    /** Function to be called when the component is double-clicked. */
+    onDbClick: PropTypes.func,
+    /** Function to be called when the component is double-clicked (priority over onDbClick). */
+    onDoubleClick: PropTypes.func,
+    /** Content to display on the Chip (same as label). */
+    children: PropTypes.node,
+    /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-typography--title) applied to the `Typography` label. */
+    labelProps: PropTypes.object,
+};
+
+export default Chip;

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

@@ -0,0 +1,190 @@
+import { Chip, Col, Row, Tooltip, Typography } from 'components';
+import { ImportComp } from 'components/others/import/index.stories';
+import React from 'react';
+import { useTheme } from 'theme';
+
+const theme = useTheme();
+const { spacing } = theme;
+
+Chip.defaultProps = theme?.components?.Chip?.defaultProps || {};
+
+export default {
+    title: 'Components/Chip',
+    component: Chip,
+    subcomponents: { Chip },
+    parameters: {
+        componentSubtitle: 'Chips are compact elements that represent an input, attribute, or action.',
+    },
+};
+
+const ListChip = ({ title, args, propsCustom = [], disabledTooltip = false }) => {
+    return (
+        <Row style={{ padding: spacing(2) }}>
+            <Col xs={12}>
+                <Row>
+                    {title && (
+                        <Col xs={12}>
+                            <Typography type={'title1'} color={'primary'}>
+                                {title}
+                            </Typography>
+                        </Col>
+                    )}
+                    <Col xs={12} style={{ display: 'flex', gap: spacing(2), flexWrap: 'wrap', alignItems: 'center' }}>
+                        {[{}, ...propsCustom].map((itemProps, indexProps) => {
+                            const argsTemp = { ...args, ...itemProps };
+                            return (
+                                <Tooltip
+                                    disabled={disabledTooltip}
+                                    key={`outlined--Chip-${indexProps}`}
+                                    title={JSON.stringify(argsTemp)}
+                                >
+                                    <Chip {...argsTemp} />
+                                </Tooltip>
+                            );
+                        })}
+                    </Col>
+                </Row>
+            </Col>
+        </Row>
+    );
+};
+
+const Template = args => (
+    <>
+        <ImportComp components={'Chip'} />
+        <Chip {...args} />
+    </>
+);
+
+const Template1 = args => (
+    <>
+        <ImportComp components={'Chip'} />
+        <Row>
+            <Col xs={12}>
+                <ListChip
+                    args={{ ...args }}
+                    title={'Color'}
+                    propsCustom={[
+                        { color: 'primary' },
+                        { color: 'info' },
+                        { color: 'warning' },
+                        { color: 'success' },
+                        { color: 'danger' },
+                    ]}
+                />
+            </Col>
+            <Col xs={12}>
+                <ListChip
+                    args={{ ...args, readOnly: true }}
+                    title={'ReadOnly'}
+                    propsCustom={[
+                        { color: 'primary' },
+                        { color: 'info' },
+                        { color: 'warning' },
+                        { color: 'success' },
+                        { color: 'danger' },
+                    ]}
+                />
+            </Col>
+            <Col xs={12}>
+                <ListChip args={{ ...args, disabled: true }} title={'Disabled'} />
+            </Col>
+            <Col xs={12}>
+                <ListChip
+                    args={{ ...args, clearAble: true }}
+                    title={'Clear Able'}
+                    propsCustom={[
+                        { color: 'primary' },
+                        { color: 'info' },
+                        { color: 'warning' },
+                        { color: 'success' },
+                        { color: 'danger' },
+                    ]}
+                />
+            </Col>
+            <Col xs={12}>
+                <ListChip
+                    args={{ ...args, startIcon: 'Star' }}
+                    title={'Start Icon'}
+                    propsCustom={[
+                        { color: 'primary' },
+                        { color: 'info' },
+                        { color: 'warning' },
+                        { color: 'success' },
+                        { color: 'danger' },
+                    ]}
+                />
+            </Col>
+            <Col xs={12}>
+                <ListChip
+                    args={{ ...args, endIcon: 'Close' }}
+                    title={'End Icon'}
+                    propsCustom={[
+                        { color: 'primary' },
+                        { color: 'info' },
+                        { color: 'warning' },
+                        { color: 'success' },
+                        { color: 'danger' },
+                    ]}
+                />
+            </Col>
+            <Col xs={12}>
+                <ListChip
+                    args={{ ...args, size: 'small' }}
+                    title={'Size'}
+                    propsCustom={[
+                        { color: 'primary', size: 'small' },
+                        { color: 'primary', size: 'medium' },
+                        { color: 'primary', size: 'large' },
+                    ]}
+                />
+                <ListChip
+                    args={{ ...args, size: 'small' }}
+                    propsCustom={[
+                        { color: 'info', size: 'small' },
+                        { color: 'info' },
+                        { color: 'info', size: 'large' },
+                    ]}
+                />
+                <ListChip
+                    args={{ ...args, size: 'small' }}
+                    propsCustom={[
+                        { color: 'warning', size: 'small' },
+                        { color: 'warning', size: 'medium' },
+                        { color: 'warning', size: 'large' },
+                    ]}
+                />
+                <ListChip
+                    args={{ ...args, size: 'small' }}
+                    propsCustom={[
+                        { color: 'success', size: 'small' },
+                        { color: 'success', size: 'medium' },
+                        { color: 'success', size: 'large' },
+                    ]}
+                />
+                <ListChip
+                    args={{ ...args, size: 'small' }}
+                    propsCustom={[
+                        { color: 'danger', size: 'small' },
+                        { color: 'danger', size: 'medium' },
+                        { color: 'danger', size: 'large' },
+                    ]}
+                />
+            </Col>
+        </Row>
+    </>
+);
+
+export const Outline = Template1.bind({});
+export const Filled = Template1.bind({});
+export const Ghost = Template1.bind({});
+export const Custom = Template.bind({});
+
+Outline.args = {
+    label: 'Label text',
+    viewType: 'outlined',
+};
+
+Ghost.args = { ...Outline.args, viewType: 'ghost' };
+Filled.args = { ...Outline.args, viewType: 'filled' };
+Custom.args = { label: 'Custom' };

package/src/components/collapse/index.js

@@ -0,0 +1,104 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { displayBlock, parseWidthHeight, positionRelative } from 'styles/general';
+
+const Collapse = memo(
+    forwardRef(({ children, className, id, onClosed, onOpened, open, style }, reference) => {
+        const ref = useRef(null);
+        const timer = useRef(null);
+
+        const _onOpen = () => {
+            if (timer.current) {
+                clearTimeout(timer.current);
+            }
+            const scrollHeight = ref.current.scrollHeight;
+            const duration = Math.min(scrollHeight, 1500);
+            ref.current.style.transitionDuration = duration + 'ms';
+            ref.current.style.height = scrollHeight + 'px';
+            timer.current = setTimeout(() => {
+                if (ref.current) {
+                    ref.current.style.height = 'auto';
+                }
+                onOpened && onOpened(ref.current);
+            }, duration);
+        };
+
+        const _onClose = () => {
+            if (ref.current) {
+                if (timer.current) {
+                    clearTimeout(timer.current);
+                }
+                const scrollHeight = ref.current.scrollHeight;
+                ref.current.style.height = scrollHeight + 'px';
+                timer.current = setTimeout(() => {
+                    if (ref.current) {
+                        ref.current.style.height = null;
+                    }
+                    onClosed && onClosed(ref.current);
+                });
+            }
+        };
+
+        useEffect(() => {
+            if (open) {
+                _onOpen();
+            } else {
+                _onClose();
+            }
+        }, [open]);
+
+        useImperativeHandle(reference, () => ({
+            element: ref.current,
+            instance: {},
+        }));
+
+        return useMemo(
+            () => (
+                <div
+                    css={CollapseRoot}
+                    ref={ref}
+                    id={id}
+                    style={style}
+                    className={['DGN-UI-Collapse', className].join(' ').trim().replace(/\s+/g, ' ')}
+                >
+                    {children}
+                </div>
+            ),
+            [children, className, id, onClosed, onOpened, open, style]
+        );
+    })
+);
+
+const CollapseRoot = css`
+    ${displayBlock};
+    ${positionRelative};
+    ${parseWidthHeight('100%', 0)};
+    transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    overflow-y: clip;
+`;
+
+Collapse.defaultProps = {
+    className: '',
+    open: false,
+    style: {},
+};
+
+Collapse.propTypes = {
+    /** The content of the component. */
+    children: PropTypes.node,
+    /** Class for component. */
+    className: PropTypes.string,
+    /** Callback fired when the component closed. */
+    onClosed: PropTypes.func,
+    /** Callback fired when the component opened. */
+    onOpened: PropTypes.func,
+    /** If `true`, the content is shown. */
+    open: PropTypes.bool,
+    /** Style inline of component. */
+    style: PropTypes.object,
+};
+
+export default Collapse;

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

@@ -0,0 +1,35 @@
+import { Button, Collapse, TextInput } from 'components';
+import { ImportComp } from 'components/others/import/index.stories';
+import React, { useState } from 'react';
+
+export default {
+    title: 'Components/Collapse',
+    component: Collapse,
+};
+const Template = args => {
+    const [open, setOpen] = useState(false);
+    return (
+        <>
+            <ImportComp components={'Collapse'} />
+            <Button
+                viewType={'outlined'}
+                text={open ? 'Hide' : 'Show'}
+                onClick={() => setOpen(!open)}
+                style={{ marginBottom: 10 }}
+            />
+            <Collapse
+                {...args}
+                open={open}
+                onOpened={() => console.log('onOpened')}
+                onClosed={() => console.log('onClosed')}
+            >
+                <TextInput label={'Username'} />
+                <TextInput label={'Password'} />
+                <Button viewType={'filled'} color={'primary'} text={'Login'} />
+            </Collapse>
+        </>
+    );
+};
+
+export const Simple = Template.bind({});
+Simple.args = {};