diginet-core-ui 1.4.39 → 1.4.40

package/src/components/button/more.js

@@ -0,0 +1,249 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon, Icon, Popover, Tooltip, Typography } from 'components';
+import OptionWrapper from 'components/others/option-wrapper';
+import PropTypes from 'prop-types';
+import React, { forwardRef, isValidElement, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import {
+    bgColor,
+    borderNone,
+    cursorPointer,
+    displayFlex,
+    flexCol,
+    flexRow,
+    itemsCenter,
+    outlineNone,
+    parseHeight,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, getProp } from 'utils';
+
+const ButtonMore = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'ButtonMore' });
+        const {
+            action = {},
+            anchor: anchorProp,
+            buttonProps,
+            className,
+            disabled,
+            id,
+            labelProp,
+            options,
+            optionType,
+            popoverProp,
+            style,
+        } = props;
+
+        const isOptionFull = optionType === 'full';
+        let anchor = anchorProp;
+
+        const ref = useRef(null);
+
+        const [openState, setOpenState] = useState(false);
+        const [iconState, setIconState] = useState(false);
+
+        const _OptionFullCSS = OptionFullCSS(theme);
+        const _PopoverCSS = PopoverCSS(isOptionFull, theme);
+
+        const openPopover = () => {
+            setOpenState(true);
+        };
+
+        const closePopover = () => {
+            setOpenState(false);
+        };
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        const renderOptions = () => {
+            return options.map((item, idx) => {
+                if (item?.hidden) return null;
+                else if (isValidElement(item)) return item;
+                else {
+                    const icon = item?.icon;
+                    const label = item?.label;
+                    const action = () => {
+                        closePopover();
+                        if (typeof item?.action === 'function') item?.action();
+                    };
+                    if (icon && !iconState) setIconState(true);
+                    return isOptionFull ? (
+                        <button key={idx} css={_OptionFullCSS} className={'DGN-UI-ButtonMore-Option'} onClick={action}>
+                            {icon ? (
+                                <Icon
+                                    className={'DGN-UI-ButtonMore-Option-Icon'}
+                                    name={icon}
+                                    width={20}
+                                    height={20}
+                                    color={'system/on-standard'}
+                                />
+                            ) : null}
+                            <Typography
+                                css={!icon && iconState && ExtraPaddingCSS(theme)}
+                                className={'DGN-UI-ButtonMore-Label'}
+                                {...labelProp}
+                            >
+                                {label}
+                            </Typography>
+                        </button>
+                    ) : (
+                        <Tooltip key={idx} className={'DGN-UI-ButtonMore-Option'} title={label}>
+                            <ButtonIcon circular name={icon} onClick={action} viewType={'text'} />
+                        </Tooltip>
+                    );
+                }
+            });
+        };
+
+        const renderAnchor = () => {
+            if (!anchor?.type) return null;
+            const AnchorTag = React.cloneElement(anchor, {
+                ref: ref => {
+                    anchor = ref;
+                },
+                onClick: openPopover,
+                id: id,
+                style: { ...style, ...(anchor?.props?.style || {}) },
+                className: classNames('DGN-UI-ButtonMore', className),
+            });
+            return AnchorTag;
+        };
+
+        return useMemo(() => {
+            return (
+                <Popover
+                    css={_PopoverCSS}
+                    open={openState}
+                    onClose={closePopover}
+                    anchorOrigin={{
+                        vertical: 'bottom',
+                        horizontal: 'left',
+                    }}
+                    transformOrigin={{
+                        vertical: 'top',
+                        horizontal: 'left',
+                    }}
+                    anchor={
+                        anchor ? (
+                            renderAnchor()
+                        ) : (
+                            <ButtonIcon
+                                ref={ref}
+                                circular
+                                name={'more'}
+                                viewType={'text'}
+                                id={id}
+                                style={style}
+                                className={classNames('DGN-UI-ButtonMore', className)}
+                                disabled={disabled}
+                                onClick={openPopover}
+                                {...buttonProps}
+                            />
+                        )
+                    }
+                    {...popoverProp}
+                >
+                    {renderOptions()}
+                </Popover>
+            );
+        }, [
+            buttonProps,
+            className,
+            disabled,
+            id,
+            options,
+            optionType,
+            popoverProp,
+            style,
+            iconState,
+            openState,
+            theme,
+        ]);
+    })
+);
+
+const PopoverCSS = (isOptionFull, { spacing }) => css`
+    ${displayFlex};
+    ${isOptionFull ? flexCol : flexRow};
+    padding: ${spacing(isOptionFull ? [1, 0] : [0, 2])};
+`;
+
+const OptionFullCSS = ({ colors, spacing }) => css`
+    ${displayFlex};
+    ${flexRow};
+    ${itemsCenter};
+    ${cursorPointer};
+    ${outlineNone};
+    ${borderNone}
+    ${parseHeight(28)};
+    padding: ${spacing([0, 4])};
+    gap: ${spacing([0, 1])};
+    ${bgColor(getProp(colors, 'system/standard'))};
+    transition: all 0.5s ease;
+    &:hover,
+    &:focus {
+        ${bgColor(getProp(colors, 'fill/hover'))};
+    }
+    &:active {
+        ${bgColor(getProp(colors, 'fill/pressed'))};
+    }
+`;
+
+const ExtraPaddingCSS = ({ spacing }) => css`
+    padding-left: ${spacing([6])};
+`;
+
+// ButtonMore.defaultProps = {
+//     buttonProps: {},
+//     className: '',
+//     disabled: false,
+//     options: [],
+//     optionType: 'full',
+//     style: {},
+// };
+
+ButtonMore.propTypes = {
+    /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-buttonicon) applied to the main `ButtonIcon`. */
+    buttonProps: PropTypes.object,
+    /** Class for component. */
+    className: PropTypes.string,
+    /** If `true`, the component is disabled. */
+    disabled: PropTypes.bool,
+    /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-typography) applied to the `Typography` label. */
+    labelProp: PropTypes.object,
+    /** Option(s) in popover. */
+    option: PropTypes.arrayOf(
+        PropTypes.shape({
+            label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+            icon: PropTypes.string,
+            action: PropTypes.func,
+            hidden: PropTypes.bool,
+        })
+    ),
+    /** The variant of option's type. */
+    optionType: PropTypes.oneOf(['full', 'icon']),
+    /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-popover) applied to the main `Popover`. */
+    popoverProp: PropTypes.object,
+    /** Style inline of component. */
+    style: PropTypes.object,
+};
+
+export { ButtonMore };
+export default OptionWrapper(ButtonMore);

package/src/components/button/ripple-effect.js

@@ -0,0 +1,95 @@
+/* eslint-disable react/prop-types */
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx, keyframes } from '@emotion/core';
+import { forwardRef, memo, useImperativeHandle, useLayoutEffect, useState } from 'react';
+import { bgColor, borderRadius, inset, overflowHidden, positionAbsolute } from 'styles/general';
+
+const useDebouncedRippleCleanUp = (rippleCount, duration, cleanUpFunction) => {
+    useLayoutEffect(() => {
+        if (rippleCount > 0) {
+            const bounce = setTimeout(() => cleanUpFunction(), duration);
+            return () => clearTimeout(bounce);
+        }
+        return undefined;
+    }, [rippleCount, duration, cleanUpFunction]);
+};
+
+const Ripple = memo(
+    forwardRef(({ duration = 850, color = 'system/standard', circular = false, ...props }, ref) => {
+        const [rippleArray, setRippleArray] = useState([]);
+
+        useDebouncedRippleCleanUp(rippleArray.length, duration, () => {
+            setRippleArray([]);
+        });
+
+        const _RippleChildCSS = RippleChildCSS(circular, color, duration);
+
+        const addRipple = event => {
+            const rippleContainer = event.currentTarget.getBoundingClientRect();
+            const size =
+                rippleContainer.width > rippleContainer.height ? rippleContainer.width : rippleContainer.height;
+
+            const x = event.pageX - rippleContainer.x - rippleContainer.width / 2;
+            const y = event.pageY - rippleContainer.y - rippleContainer.width / 2;
+            const newRippleArray = {
+                x,
+                y,
+                size,
+            };
+
+            setRippleArray(prevState => [...prevState, newRippleArray]);
+        };
+
+        useImperativeHandle(ref, () => ({
+            start: addRipple,
+        }));
+
+        return (
+            <span css={RippleContainerCSS} className={'DGN-UI-Ripple'} {...props}>
+                {rippleArray.length > 0 &&
+                    rippleArray.map((ripple, index) => {
+                        return (
+                            <span
+                                key={'ripple_' + index}
+                                css={_RippleChildCSS}
+                                className={'DGN-UI-Ripple-Child'}
+                                style={{
+                                    top: ripple.y,
+                                    left: ripple.x,
+                                    width: ripple.size,
+                                    height: ripple.size,
+                                }}
+                            />
+                        );
+                    })}
+            </span>
+        );
+    })
+);
+
+const rippleKeyframes = keyframes`
+	to {
+		opacity: 0;
+		transform: scale(2);
+	}
+`;
+
+const RippleContainerCSS = css`
+    ${overflowHidden};
+    ${positionAbsolute};
+    z-index: 0;
+    ${inset(0)};
+    border-radius: inherit;
+`;
+
+const RippleChildCSS = (circular, color, duration) => css`
+    ${positionAbsolute};
+    ${borderRadius(circular ? '50%' : '100%')};
+    opacity: 0.75;
+    transform: scale(0);
+    ${bgColor(color)};
+    animation: ${rippleKeyframes} ${duration}ms;
+`;
+
+export default Ripple;

package/src/components/button/sample.stories.js

@@ -0,0 +1,194 @@
+import { Button, ButtonIcon, Typography } from 'components';
+import { ImportComp } from 'components/others/import/index.stories';
+import React from 'react';
+
+export default {
+    title: 'Sample/Button',
+};
+
+const styles = {
+    flexRow: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'flex-end',
+        gap: 24,
+    },
+    flexCol: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 24,
+    },
+};
+
+const sizeArr = ['tiny', 'small', 'medium', 'large', 'giant'];
+const colorArr = ['default', 'primary', 'info', 'success', 'warning', 'danger'];
+const specialIcon = ['Close', 'Approval', 'Delete', 'Edit', 'View'];
+
+const Template = args => (
+    <>
+        <ImportComp components={'Button'} />
+        <div style={styles.flexCol}>
+            <div style={styles.flexCol}>
+                <Typography type={'title1'} color={'primary'}>
+                    Text & Size
+                </Typography>
+                <div style={styles.flexRow}>
+                    {sizeArr.map((size, idx) => (
+                        <Button key={idx} viewType={'text'} label={size} size={size} {...args} />
+                    ))}
+                </div>
+            </div>
+            <div style={styles.flexCol}>
+                <Typography type={'title1'} color={'primary'}>
+                    Text & Color
+                </Typography>
+                <div style={styles.flexRow}>
+                    {colorArr.map((color, idx) => (
+                        <Button key={idx} viewType={'text'} label={color} color={color} {...args} />
+                    ))}
+                </div>
+            </div>
+        </div>
+    </>
+);
+
+const Template2 = args => (
+    <>
+        <ImportComp components={'Button'} />
+        <div style={styles.flexCol}>
+            <div style={styles.flexCol}>
+                <Typography type={'title1'} color={'primary'}>
+                    Filled & Size
+                </Typography>
+                <div style={styles.flexRow}>
+                    {sizeArr.map((size, idx) => (
+                        <Button key={idx} viewType={'filled'} label={size} size={size} {...args} />
+                    ))}
+                </div>
+            </div>
+            <div style={styles.flexCol}>
+                <Typography type={'title1'} color={'primary'}>
+                    Filled & Color
+                </Typography>
+                <div style={styles.flexRow}>
+                    {colorArr.map((color, idx) => (
+                        <Button key={idx} viewType={'filled'} label={color} color={color} {...args} />
+                    ))}
+                </div>
+            </div>
+        </div>
+    </>
+);
+
+const Template3 = args => (
+    <>
+        <ImportComp components={'Button'} />
+        <div style={styles.flexCol}>
+            <div style={styles.flexCol}>
+                <Typography type={'title1'} color={'primary'}>
+                    Outlined & Size
+                </Typography>
+                <div style={styles.flexRow}>
+                    {sizeArr.map((size, idx) => (
+                        <Button key={idx} viewType={'outlined'} label={size} size={size} {...args} />
+                    ))}
+                </div>
+            </div>
+            <div style={styles.flexCol}>
+                <Typography type={'title1'} color={'primary'}>
+                    Outlined & Color
+                </Typography>
+                <div style={styles.flexRow}>
+                    {colorArr.map((color, idx) => (
+                        <Button key={idx} viewType={'outlined'} label={color} color={color} {...args} />
+                    ))}
+                </div>
+            </div>
+        </div>
+    </>
+);
+
+const Template4 = args => (
+    <>
+        <ImportComp components={'ButtonIcon'} />
+        <div style={styles.flexCol}>
+            <div style={styles.flexCol}>
+                <Typography type={'title1'} color={'primary'}>
+                    Size
+                </Typography>
+                <div style={styles.flexRow}>
+                    {sizeArr.map((size, idx) => {
+                        return <ButtonIcon key={idx} size={size} viewType={'text'} {...args} />;
+                    })}
+                </div>
+                <div style={styles.flexRow}>
+                    {sizeArr.map((size, idx) => {
+                        return <ButtonIcon key={idx} size={size} viewType={'filled'} {...args} />;
+                    })}
+                </div>
+                <div style={styles.flexRow}>
+                    {sizeArr.map((size, idx) => {
+                        return <ButtonIcon key={idx} viewType={'outlined'} size={size} {...args} />;
+                    })}
+                </div>
+                <div style={styles.flexRow}>
+                    {sizeArr.map((size, idx) => {
+                        return <ButtonIcon key={idx} viewType={'ghost'} size={size} {...args} />;
+                    })}
+                </div>
+            </div>
+            <div style={styles.flexCol}>
+                <Typography type={'title1'} color={'primary'}>
+                    Color
+                </Typography>
+                <div style={styles.flexRow}>
+                    {colorArr.map((color, idx) => {
+                        return <ButtonIcon key={idx} viewType={'text'} color={color} {...args} />;
+                    })}
+                </div>
+                <div style={styles.flexRow}>
+                    {colorArr.map((color, idx) => {
+                        return <ButtonIcon key={idx} viewType={'filled'} color={color} {...args} />;
+                    })}
+                </div>
+                <div style={styles.flexRow}>
+                    {colorArr.map((color, idx) => {
+                        return <ButtonIcon key={idx} viewType={'outlined'} color={color} {...args} />;
+                    })}
+                </div>
+                <div style={styles.flexRow}>
+                    {colorArr.map((color, idx) => {
+                        return <ButtonIcon key={idx} viewType={'ghost'} color={color} {...args} />;
+                    })}
+                </div>
+            </div>
+            <div style={styles.flexCol}>
+                <Typography type={'h1'} color={'primary'}>
+                    *Special ghost
+                </Typography>
+                <div style={styles.flexRow}>
+                    {specialIcon.map((name, idx) => {
+                        return <ButtonIcon key={idx} {...args} viewType={'ghost'} name={name} />;
+                    })}
+                </div>
+            </div>
+        </div>
+    </>
+);
+
+export const Text = Template.bind({});
+Text.parameters = { controls: { include: ['disabled', 'loading'] } };
+
+export const Filled = Template2.bind({});
+Filled.parameters = { controls: { include: ['disabled', 'loading'] } };
+
+export const Outline = Template3.bind({});
+Outline.parameters = { controls: { include: ['disabled', 'loading'] } };
+
+export const Icon = Template4.bind({});
+Icon.parameters = { controls: { include: ['circular', 'disabled', 'loading', 'name'] } };
+Icon.args = {
+    name: 'Star',
+    circular: false,
+};

package/src/components/card/body.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 CardBody = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'CardBody' });
+        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-Body`, className)}>
+                    {children}
+                </div>
+            );
+        }, [children, className, id, style]);
+    })
+);
+
+// CardBody.defaultProps = {
+//     className: '',
+//     style: {},
+// };
+
+CardBody.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 { CardBody };
+export default OptionWrapper(CardBody);

package/src/components/card/extra.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 CardExtra = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'CardExtra' });
+        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-Extra`, className)}>
+                    {children}
+                </div>
+            );
+        }, [children, className, id, style]);
+    })
+);
+
+// CardExtra.defaultProps = {
+//     className: '',
+//     style: {},
+// };
+
+CardExtra.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 { CardExtra };
+export default OptionWrapper(CardExtra);