diginet-core-ui 1.4.39 → 1.4.40

package/src/components/slider/slider-item.js

@@ -0,0 +1,222 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { CircularProgress } from 'components';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { animations } from 'styles/animation';
+import {
+    displayBlock,
+    displayNone,
+    justifyCenter,
+    left,
+    parseMaxWidthHeight,
+    parseWidthHeight,
+    positionAbsolute,
+    top,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import { classNames, getFileType, randomString } from 'utils';
+
+const fadeIn = animations.fadeIn;
+
+const regex = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&/=]*)/g;
+const googleDriveRegex = /(http(s)?:\/\/.)?(drive\.google\.com\/file\/d\/)/;
+const googleDocsRegex = /(http(s)?:\/\/.)?(docs\.google\.com\/fileview\?)/;
+const checkURL = link => {
+    const res = regex.test(link);
+    if (res) {
+        if (googleDriveRegex.test(link)) {
+            const id = link.split('/')[0] === 'drive.google.com' ? link.split('/')[3] : link.split('/')[5];
+            return `https://docs.google.com/viewer?srcid=${id}&pid=explorer&efh=false&a=v&chrome=false&embedded=true`;
+        }
+        if (googleDocsRegex.test(link)) {
+            return `https://docs.google.com/viewer?srcid=${
+                link.split('=')[1]
+            }&pid=explorer&efh=false&a=v&chrome=false&embedded=true`;
+        }
+    }
+    return link;
+};
+
+const SliderItem = memo(
+    forwardRef(({ active, animation, fileName, url, dataType, ...props }, reference) => {
+        const theme = useTheme();
+        const Id = randomString(7, { allowSymbol: false, allowNumber: false });
+        const IDs = {
+            frame: 'DGN-UI-Slider-frame' + Id,
+            image: 'DGN-UI-Slider-image' + Id,
+            itemContainer: 'DGN-UI-Slider-item-container-' + Id,
+            video: 'DGN-UI-Slider-video' + Id,
+        };
+
+        const ref = useRef(null);
+        const iframeRef = useRef(null);
+        const [iframeTimeoutId, setIframeTimeoutId] = useState(null);
+
+        const _FrameCSS = FrameCSS(theme);
+
+        const getViewer = (filePath, fileType) => {
+            switch (fileType) {
+                case 'image': {
+                    return <img {...props} className={IDs.image} css={ImageCSS} src={filePath} alt={''} />;
+                }
+                case 'word':
+                case 'sheet': {
+                    return (
+                        <iframe
+                            {...props}
+                            className={IDs.frame}
+                            css={_FrameCSS}
+                            frameBorder={0}
+                            src={`https://view.officeapps.live.com/op/view.aspx?src=${filePath}&activeCell=A1`}
+                            title={fileName}
+                        />
+                    );
+                }
+                case 'pdf': {
+                    return (
+                        <iframe
+                            {...props}
+                            ref={iframeRef}
+                            className={IDs.frame}
+                            css={_FrameCSS}
+                            frameBorder={0}
+                            src={getIframeLink(filePath)}
+                            title={fileName}
+                            onLoad={iframeLoaded}
+                            onError={updateIframeSrc}
+                        />
+                    );
+                }
+                case 'mp4': {
+                    return (
+                        <video autoPlay={true} className={IDs.video} controls="controls" height="auto" width="auto">
+                            <source src={filePath} type="video/mp4" />
+                        </video>
+                    );
+                }
+                case 'another': {
+                    return (
+                        <iframe
+                            {...props}
+                            className={IDs.frame}
+                            css={_FrameCSS}
+                            frameBorder={0}
+                            src={checkURL(filePath)}
+                            title={fileName}
+                        />
+                    );
+                }
+                default: {
+                    return (
+                        <iframe
+                            {...props}
+                            className={IDs.frame}
+                            css={_FrameCSS}
+                            frameBorder={0}
+                            src={filePath}
+                            title={fileName}
+                        />
+                    );
+                }
+            }
+        };
+
+        useEffect(() => {
+            const fileType = getFileType(url, undefined, false);
+            if (fileType === 'pdf') {
+                const intervalId = setInterval(updateIframeSrc, 2000);
+                setIframeTimeoutId(intervalId);
+            }
+        }, []);
+
+        const iframeLoaded = () => {
+            clearInterval(iframeTimeoutId);
+            setIframeTimeoutId(null);
+        };
+
+        const getIframeLink = (data = '') => {
+            if (dataType === 'pdf' && data && data.indexOf('data:application/') > -1) return data;
+            return `https://docs.google.com/gview?url=${url}&embedded=true`;
+        };
+
+        const updateIframeSrc = () => {
+            if (iframeRef.current) {
+                iframeRef.current.src = getIframeLink();
+            }
+        };
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            const _instance = {}; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        const handleGetViewer = () => {
+            return dataType === 'pdf' ? dataType : getFileType(url, undefined, false);
+        };
+
+        return (
+            <div
+                className={classNames(IDs.itemContainer, active && 'active', animation && 'item-animation')}
+                css={ItemContainerCSS}
+                id={IDs.itemContainer}
+                ref={ref}
+            >
+                {iframeTimeoutId && getFileType(url, undefined, false) === 'pdf' && (
+                    <div css={LoadingCSS}>
+                        <CircularProgress size={'xs'} />
+                    </div>
+                )}
+                {getViewer(url, handleGetViewer())}
+            </div>
+        );
+    })
+);
+
+const ItemContainerCSS = css`
+    ${displayNone};
+    ${justifyCenter};
+    ${parseWidthHeight('100%')};
+    &.item-animation {
+        animation: ${fadeIn} 1s;
+    }
+`;
+
+const FrameCSS = ({ spacing }) => css`
+    ${displayBlock};
+    ${parseWidthHeight('100%', '85vh')};
+    margin: ${spacing([0])};
+    padding: ${spacing([0])};
+`;
+
+const ImageCSS = css`
+    ${displayBlock};
+    ${parseWidthHeight('auto')};
+    ${parseMaxWidthHeight('100%')};
+    margin: auto;
+`;
+
+const LoadingCSS = css`
+    ${positionAbsolute};
+    ${top('50%')};
+    ${left('50%')};
+    transform: translate(-50%, -50%);
+`;
+
+SliderItem.defaultProps = {
+    active: false,
+    animation: true,
+};
+
+SliderItem.propTypes = {
+    active: PropTypes.bool,
+    animation: PropTypes.bool,
+    fileName: PropTypes.string,
+    url: PropTypes.string,
+};
+
+export default SliderItem;

package/src/components/status/index.js

@@ -0,0 +1,145 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Icon, Typography } from 'components';
+import OptionWrapper from 'components/others/option-wrapper';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import {
+    bgColor,
+    borderRadius,
+    boxBorder,
+    displayFlex,
+    flexRow,
+    itemsCenter,
+    parseMinHeight,
+    parseWidth,
+    textColor,
+    whiteSpaceNoWrap,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import { classNames, getProp } from 'utils';
+
+const colorMap = new Map([['default', 'system/rest']]);
+
+const iconSizeMap = new Map([
+    ['small', '16px'],
+    ['medium', '20px'],
+    ['large', '24px'],
+]);
+
+const typographySizeMap = new Map([
+    ['small', 'p3'],
+    ['medium', 'p2'],
+    ['large', 'p1'],
+]);
+
+const filledPaddingSizeMap = new Map([
+    ['small', [0.5, 2]],
+    ['medium', [0.5, 2]],
+    ['large', [0.5, 3]],
+]);
+
+const Status = memo(
+    forwardRef(({ action = {}, className, color: colorProp, icon, id, size, style, text, viewType }, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const ref = useRef(null);
+
+        const theme = useTheme();
+
+        const outlinedPaddingSize = filledPaddingSizeMap.get(size);
+        const color = colorMap.get(colorProp) || getProp(theme.colors, colorProp, colorProp) || 'system/rest';
+        const iconSize = iconSizeMap.get(size);
+        const typographySize = typographySizeMap.get(size);
+
+        const _StatusRootCSS = StatusRootCSS(iconSize, color, size, viewType, outlinedPaddingSize, 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 StatusIconView =
+            typeof icon === 'string' ? (
+                <Icon name={icon} width={iconSize} height={iconSize} color={'currentColor'} viewBox />
+            ) : (
+                icon
+            );
+
+        const StatusTextView = (
+            <Typography css={whiteSpaceNoWrap} type={typographySize} color={'inherit'}>
+                {text}
+            </Typography>
+        );
+
+        return useMemo(() => {
+            return (
+                <div
+                    css={_StatusRootCSS}
+                    ref={ref}
+                    id={id}
+                    style={style}
+                    className={classNames('DGN-UI-Status', viewType, size, className)}
+                >
+                    {StatusIconView}
+                    {StatusTextView}
+                </div>
+            );
+        }, [className, colorProp, icon, id, size, style, text, viewType, theme]);
+    })
+);
+
+const StatusRootCSS = (iconSize, color, size, viewType, outlinedPaddingSize, { colors, spacing }) => css`
+    ${displayFlex};
+    ${flexRow};
+    ${itemsCenter};
+    ${boxBorder};
+    ${parseWidth('fit-content')};
+    ${parseMinHeight(iconSize)};
+    gap: ${spacing([size === 'small' ? 0.5 : 1])};
+    ${textColor(color)};
+    ${bgColor('transparent')};
+    ${viewType === 'filled' &&
+    css`
+        ${textColor(getProp(colors, 'fill/surface'))};
+        ${bgColor(color)};
+        ${borderRadius(20)};
+        padding: ${spacing(outlinedPaddingSize)};
+    `}
+`;
+
+Status.defaultProps = {
+    className: '',
+    icon: '',
+    size: 'medium',
+    style: {},
+    text: '',
+    viewType: 'ghost',
+};
+
+Status.propTypes = {
+    /** Class for component. */
+    className: PropTypes.string,
+    /** The color of the component. */
+    color: PropTypes.string,
+    /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed before the content. */
+    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    /** The size of the component. */
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
+    /** Style inline of component. */
+    style: PropTypes.object,
+    /** The content of the component. */
+    text: PropTypes.string,
+    /** The variant to use. */
+    viewType: PropTypes.oneOf(['filled', 'ghost']),
+};
+
+export { Status };
+export default OptionWrapper(Status);

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

@@ -0,0 +1,71 @@
+import { ImportComp } from 'components/others/import/index.stories';
+import React from 'react';
+import { Status } from '.';
+
+export default {
+    title: 'Components/Status',
+    component: Status,
+};
+
+const styles = {
+    flexRow: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        gap: 24,
+    },
+    flexCol: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 24,
+    },
+};
+
+const sizeArr = ['small', 'medium', 'large'];
+const colorArr = ['primary', 'info', 'success', 'warning', 'danger'];
+
+const Template = () => (
+    <>
+        <ImportComp components={'Status'} />
+        <div style={styles.flexCol}>
+            <div style={styles.flexRow}>
+                <Status icon={'Star'} text={'Default'} />
+                {colorArr.map((color, idx) => (
+                    <Status key={idx} icon={'Star'} text={color} color={color} />
+                ))}
+            </div>
+            <div style={styles.flexRow}>
+                <Status icon={'Star'} text={'Default'} viewType={'filled'} />
+                {colorArr.map((color, idx) => (
+                    <Status key={idx} icon={'Star'} text={color} color={color} viewType={'filled'} />
+                ))}
+            </div>
+            <div style={styles.flexRow}>
+                {sizeArr.map((size, idx) => {
+                    return <Status key={idx} icon={'Star'} text={size} size={size} />;
+                })}
+            </div>
+            <div style={styles.flexRow}>
+                {sizeArr.map((size, idx) => {
+                    return <Status key={idx} icon={'Star'} text={size} size={size} viewType={'filled'} />;
+                })}
+            </div>
+        </div>
+    </>
+);
+
+const Template2 = args => (
+    <>
+        <ImportComp components={'Status'} />
+        <Status {...args} />
+    </>
+);
+export const Sample = Template.bind({});
+Sample.parameters = { controls: { disable: true } };
+
+export const Custom = Template2.bind({});
+Custom.args = {
+    text: 'Status',
+    icon: 'Star',
+};

package/src/components/tab/context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const TabContext = createContext({});
+
+export default TabContext;

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

@@ -0,0 +1,123 @@
+import { Button, ButtonIcon, Icon, ModalSample, TabContainer, TabHeader, TabItem, TabPanel } from 'components';
+import { ImportComp } from 'components/others/import/index.stories';
+import React, { useState } from 'react';
+import { useTheme } from 'theme';
+
+const theme = useTheme();
+TabItem.defaultProps = theme?.components?.TabItem?.defaultProps || {};
+TabContainer.defaultProps = theme?.components?.TabContainer?.defaultProps || {};
+TabHeader.defaultProps = theme?.components?.TabHeader?.defaultProps || {};
+TabPanel.defaultProps = theme?.components?.TabPanel?.defaultProps || {};
+
+export default {
+    title: 'Components/Tab',
+    component: TabContainer,
+    subcomponents: { TabContainer, TabHeader, TabItem, TabPanel },
+    parameters: {
+        componentSubtitle: 'Tabs make it easy to explore and switch between different views.',
+    },
+};
+
+const text01 = `Hey, once upon a younger year When all our shadows disappeared The animals inside came out to play
+Hey, when face to face with all our fears Learned our lessons through the tears Made memories we
+knew would never fade`;
+
+const text02 = `One day my father—he told me, "Son, don't let it slip away" He took me in his arms, I heard him
+say, "When you get older Your wild life will live for younger days Think of me if ever you're
+afraid."`;
+
+const text03 = `When thunder clouds start pouring down Light a fire they can't put out Carve your name into
+those shinning stars He said, "Go venture far beyond the shores. Don't forsake…`;
+
+const longText = 'New Arrivals in the Longest Text of Nonfiction';
+
+const Template = args => {
+    const [open, setOpen] = useState(false);
+    const [tabIndexInModal, setTabIndexInModal] = useState(0);
+    return (
+        <>
+            <ImportComp components={'TabContainer, TabHeader, TabItem, TabPanel'} />
+            <TabContainer {...args}>
+                <TabHeader>
+                    <TabItem index={0} label={'Button 1'} />
+                    <TabItem index={1} startIcon={<Icon name={'Add'} color={'currentColor'} />} label={'Button 2'} />
+                    <TabItem
+                        index={2}
+                        label={'Button 4'}
+                        endIcon={
+                            <ButtonIcon
+                                viewType={'ghost'}
+                                name={'Close'}
+                                size={'small'}
+                                onClick={() => console.log('Close')}
+                            />
+                        }
+                    />
+                    <TabItem index={3} label={longText} />
+                    <TabItem index={4} startIcon={<Icon name={'Star'} color={'currentColor'} />} label={'Button 5'} />
+                </TabHeader>
+                <TabPanel index={0}>{text01}</TabPanel>
+                <TabPanel index={1}>
+                    <div>{text01}</div>
+                    <div>{text02}</div>
+                    <div>{text03}</div>
+                </TabPanel>
+                <TabPanel index={2}>{text01}</TabPanel>
+                <TabPanel index={3}>{text03}</TabPanel>
+                <TabPanel index={4}>
+                    <div>
+                        <Button viewType={'outlined'} onClick={() => setOpen(true)}>
+                            Show Modal
+                        </Button>
+                        <ModalSample open={open} onClose={() => setOpen(false)} footer={'This is footer'}>
+                            <TabContainer tabIndex={tabIndexInModal}>
+                                <TabHeader>
+                                    <TabItem onClick={() => setTabIndexInModal(0)} index={0} label={'Button'} />
+                                    <TabItem onClick={() => setTabIndexInModal(1)} index={1} label={'Button1'} />
+                                    <TabItem onClick={() => setTabIndexInModal(2)} index={2} label={'Button2'} />
+                                </TabHeader>
+                                <TabPanel index={0}>{text01}</TabPanel>
+                                <TabPanel index={1}>{text02}</TabPanel>
+                                <TabPanel index={2}>{text03}</TabPanel>
+                            </TabContainer>
+                        </ModalSample>
+                        {text01}
+                    </div>
+                </TabPanel>
+            </TabContainer>
+        </>
+    );
+};
+
+const Template1 = args => {
+    return (
+        <>
+            <ImportComp components={'TabContainer, TabHeader, TabItem, TabPanel'} />
+            <TabContainer {...args}>
+                <TabHeader scrollButtons>
+                    <TabItem index={0} label={'Button 1'} />
+                    <TabItem index={1} startIcon={'Star'} label={'Button 2'} />
+                    <TabItem
+                        index={2}
+                        label={'Button 4'}
+                        endIcon={<Icon name={'AddAttachment'} color={'currentColor'} />}
+                    />
+                    <TabItem index={3} label={longText} />
+                    <TabItem index={4} startIcon={<Icon name={'Star'} color={'currentColor'} />} label={'Button 5'} />
+                    {Array(9)
+                        .fill(0)
+                        .map((_, idx) => {
+                            return <TabItem key={idx + 5} index={idx + 5} label={`${longText} ${idx + 2}`} />;
+                        })}
+                </TabHeader>
+            </TabContainer>
+        </>
+    );
+};
+
+export const Basic = Template.bind({});
+export const ScrollButtons = Template1.bind({});
+export const Vertical = Template.bind({});
+Vertical.args = {
+    direction: 'vertical',
+};

package/src/components/tab/tab-container.js

@@ -0,0 +1,109 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { displayFlex, flexCol, flexRow, parseWidth, positionRelative, typographyTypes } from 'styles/general';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames } from 'utils';
+import TabContext from './context';
+
+const typographyByLevelMap = new Map([
+    ['level1', 'h3'],
+    ['level2', 'p1'],
+]);
+
+const TabContainer = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'TabContainer' });
+        const {
+            action = {},
+            children,
+            className,
+            direction,
+            level: levelProp,
+            onChange,
+            style,
+            tabIndex,
+            width,
+            ...other
+        } = props;
+
+        const ref = useRef(null);
+
+        const { value } = other;
+        const [tabIndexState, setTabIndexState] = useState(tabIndex || value);
+
+        const level = typographyByLevelMap.get(levelProp) || levelProp;
+
+        const _TabContainerCSS = TabContainerCSS(direction, width);
+
+        useEffect(() => {
+            if (typeof value === 'number') setTabIndexState(value);
+            else setTabIndexState(tabIndex);
+        }, [value, tabIndex]);
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        return (
+            <div
+                css={_TabContainerCSS}
+                ref={ref}
+                className={classNames('DGN-UI-Tab-Container', className)}
+                style={style}
+                {...other}
+            >
+                <TabContext.Provider value={{ tabIndexState, setTabIndexState, direction, onChange }}>
+                    {React.Children.map(children, child => child && React.cloneElement(child, { level }))}
+                </TabContext.Provider>
+            </div>
+        );
+    })
+);
+
+const TabContainerCSS = (direction, width) => css`
+    ${displayFlex};
+    ${direction === 'vertical' ? flexRow : flexCol};
+    ${positionRelative};
+    ${parseWidth(width)};
+`;
+
+// TabContainer.defaultProps = {
+//     className: '',
+//     direction: 'horizontal',
+//     level: 'level1',
+//     style: {},
+//     tabIndex: 0,
+//     width: '100%',
+// };
+
+TabContainer.propTypes = {
+    /** The content of the component. */
+    children: PropTypes.node,
+    /** CSS class for the component. */
+    className: PropTypes.string,
+    /** The direction that changes the position of the tabs. */
+    direction: PropTypes.oneOf(['vertical', 'horizontal']),
+    /** The level that changes the typography size of the tabs (typesTypography represents the available typography types, e.g., h1, h2, h3, p1, etc.). */
+    level: PropTypes.oneOfType([PropTypes.oneOf(['level1', 'level2', ...typographyTypes])]),
+    /** Inline style object for the component. */
+    style: PropTypes.object,
+    /** The value of the currently selected tab. */
+    tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /** Width of the component. */
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
+
+export default TabContainer;