diginet-core-ui 1.4.39 → 1.4.40

package/src/components/accordion/group.js

@@ -0,0 +1,140 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { Children, cloneElement, forwardRef, memo, useImperativeHandle, useRef } from 'react';
+import { borderRadius, borderRadius4px } from 'styles/general';
+import { useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames } from 'utils';
+
+const AccordionGroup = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'AccordionGroup' });
+        const { action = {}, children, className, collapseOther, style } = props;
+
+        const ref = useRef(null);
+
+        const _AccordionGroupRootCSS = AccordionGroupRootCSS(theme);
+
+        const onCollapseOther = (e, onExpand) => {
+            if (collapseOther) {
+                const accordions = ref.current.querySelectorAll('.DGN-UI-Accordion');
+                accordions.forEach(accordion => {
+                    if (!accordion.contains(e.target)) {
+                        const summary = accordion.querySelector('.DGN-UI-Accordion-Summary.expanding');
+                        !!summary && summary.click();
+                    }
+                });
+                !!onExpand && onExpand(e);
+            }
+        };
+
+        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={_AccordionGroupRootCSS}
+                ref={ref}
+                style={style}
+                className={classNames('DGN-UI-Accordion-Group', className)}
+            >
+                {Children.map(
+                    children,
+                    child => child && cloneElement(child, { onExpand: e => onCollapseOther(e, child.props.onExpand) })
+                )}
+            </div>
+        );
+    })
+);
+
+const AccordionGroupRootCSS = ({ spacing }) => css`
+    ${borderRadius4px};
+    .DGN-UI-Accordion {
+        &:first-of-type {
+            &,
+            .DGN-UI-Accordion-Summary {
+                border-radius: 4px 4px 0px 0px;
+            }
+            &.expanding {
+                ${borderRadius4px};
+                margin: ${spacing([0, 0, 4, 0])};
+                .DGN-UI-Divider {
+                    display: none !important;
+                }
+            }
+        }
+        &:last-child {
+            &,
+            .DGN-UI-Accordion-Summary {
+                border-radius: 0px 0px 4px 4px;
+            }
+            &.expanding {
+                ${borderRadius4px};
+                margin: ${spacing([4, 0, 0, 0])};
+                .DGN-UI-Accordion-Summary {
+                    border-radius: 4px 4px 0px 0px;
+                }
+                .DGN-UI-Divider {
+                    display: none !important;
+                }
+            }
+        }
+        &:not(:first-of-type):not(:last-child) {
+            &,
+            .DGN-UI-Accordion-Summary {
+                ${borderRadius(0)};
+            }
+            &.expanding {
+                ${borderRadius4px};
+                margin: ${spacing([4, 0])};
+                .DGN-UI-Accordion-Summary {
+                    border-radius: 4px 4px 0px 0px;
+                }
+                .DGN-UI-Divider {
+                    display: none !important;
+                }
+            }
+        }
+        &:not(:last-child) {
+            .DGN-UI-Divider {
+                display: block !important;
+            }
+            box-shadow: -2px 0px 2px -2px rgba(0, 0, 0, 0.25), 2px 0px 2px -2px rgba(0, 0, 0, 0.25);
+            &.expanding,
+            &.previousExpanding {
+                ${borderRadius4px};
+                box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+            }
+        }
+    }
+`;
+
+//Check defaultProps at src/theme/setting.js
+
+AccordionGroup.propTypes = {
+    /** The content of the component. */
+    children: PropTypes.node,
+    /** CSS class for the component. */
+    className: PropTypes.string,
+    /** If `true`, collapses others when one is expanded. */
+    collapseOther: PropTypes.bool,
+    /** Inline style object for the component. */
+    style: PropTypes.object,
+};
+
+export default AccordionGroup;

package/src/components/accordion/index.js

@@ -0,0 +1,207 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Divider } from 'components';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import {
+    bgColor,
+    borderRadius4px,
+    cursorNotAllowed,
+    displayBlock,
+    parseHeight,
+    parseWidth,
+    positionRelative,
+    shadowNone,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, getProp } from 'utils';
+import AccordionContext from './context';
+
+/**
+ * Handles the transition of an element's height with a smooth animation.
+ *
+ * @param {Object} timer - A timer object used to manage the timeout for setting the final height.
+ * @param {HTMLElement} el - The target element on which the transition effect will be applied.
+ * @param {number} beginHeight - The initial height of the element in pixels.
+ * @param {number|null} [endHeight=null] - The final height of the element in pixels. If not provided, the element's height will remain unchanged.
+ */
+const handleTransition = (timer, el, beginHeight, endHeight = null) => {
+    /**
+     * Calculates the duration for the transition based on the initial height.
+     *
+     * @param {number} height - The initial height of the element in pixels.
+     * @returns {number} - The rounded duration in milliseconds.
+     */
+    const getAutoHeightDuration = height => {
+        if (!height) {
+            return 0;
+        }
+
+        const constant = height / 36;
+        // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
+        // Formula: (4 + 15 * (x / 36) ** 0.25 + (x / 36) / 5) * 10
+        const constantPart = 4 + 15 * Math.pow(constant, 0.25) + constant / 5;
+
+        return Math.round(constantPart * 10);
+    };
+
+    const duration = getAutoHeightDuration(beginHeight);
+    el.style.transitionDuration = `${duration}ms`;
+    el.style.height = `${beginHeight}px`;
+    if (timer.current) {
+        clearTimeout(timer.current);
+    }
+    timer.current = setTimeout(() => {
+        el.style.height = endHeight;
+    }, duration);
+};
+
+const Accordion = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'Accordion' });
+        const {
+            action = {},
+            boxShadow,
+            children,
+            className,
+            disabled,
+            expand,
+            expanded,
+            fullHeight,
+            id,
+            onClick,
+            onCollapse,
+            onExpand,
+            style,
+        } = props;
+
+        const ref = useRef(null);
+
+        const timer = useRef(null);
+
+        const [expandState, setExpandState] = useState(expanded || expand);
+
+        const _AccordionRootCSS = AccordionRootCSS(fullHeight, expandState, theme);
+
+        useEffect(() => {
+            if (ref.current) {
+                if (fullHeight) {
+                    handleTransition(timer, ref.current, ref.current.clientHeight, expandState ? '100%' : null);
+                }
+                // Handle margin top bot when in group
+                const previous = ref.current.previousElementSibling;
+                if (previous) {
+                    expandState
+                        ? previous.classList.add('previousExpanding')
+                        : previous.classList.remove('previousExpanding');
+                }
+            }
+        }, [expandState]);
+
+        useEffect(() => {
+            expanded !== undefined ? setExpandState(expanded) : setExpandState(expand);
+        }, [expand, expanded]);
+
+        const onClickAccordion = () => {
+            !!onClick && onClick({ target: ref.current });
+        };
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {
+                expandState: expandState,
+                setExpandState: setExpandState,
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        return (
+            <div
+                id={id}
+                css={[_AccordionRootCSS, boxShadow && AccordionRootBoxShadowCSS, disabled && AccordionRootDisabledCSS]}
+                ref={ref}
+                style={style}
+                className={classNames(
+                    'DGN-UI-Accordion',
+                    disabled && 'disabled',
+                    expandState && 'expanding',
+                    className
+                )}
+            >
+                <AccordionContext.Provider
+                    value={{
+                        expanded,
+                        expandState,
+                        disabled,
+                        onClickAccordion: onClick ? onClickAccordion : null,
+                        onExpand,
+                        onCollapse,
+                        setExpandState,
+                        handleTransition,
+                        fullHeight: fullHeight ? ref.current?.clientHeight || 0 : 0,
+                    }}
+                >
+                    {children}
+                    <Divider color={'line/category'} style={{ margin: 0, display: 'none' }} />
+                </AccordionContext.Provider>
+            </div>
+        );
+    })
+);
+
+const AccordionRootCSS = (fullHeight, expandState, { colors }) => css`
+    ${displayBlock};
+    ${positionRelative};
+    ${borderRadius4px};
+    ${parseWidth('100%')};
+    ${fullHeight && expandState && parseHeight('100%')};
+    ${bgColor(getProp(colors, 'system/standard'))};
+    transition: margin 300ms ease, height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+`;
+
+const AccordionRootBoxShadowCSS = css`
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+`;
+
+const AccordionRootDisabledCSS = css`
+    ${cursorNotAllowed};
+    ${shadowNone};
+`;
+
+//Check defaultProps at src/theme/setting.js
+
+Accordion.propTypes = {
+    /** The box-shadow of the component. */
+    boxShadow: PropTypes.bool,
+    /** The content of the component (consists of <AccordionSummary /> and <AccordionDetails />). */
+    children: PropTypes.node,
+    /** CSS class for the component. */
+    className: PropTypes.string,
+    /** If `true`, the component is disabled. */
+    disabled: PropTypes.bool,
+    /** If `true`, expands immediately after render (without state management) (shouldn't use this). */
+    expand: PropTypes.bool,
+    /** The expanded state of the accordion (with state management) (should use this). */
+    expanded: PropTypes.bool,
+    /** If `true`, the Accordion will have a height of 100% of its parent. */
+    fullHeight: PropTypes.bool,
+    /** Callback function fired when the Accordion is collapsed. */
+    onCollapse: PropTypes.func,
+    /** Callback function fired when the Accordion is expanded. */
+    onExpand: PropTypes.func,
+    /** Inline style object for the component. */
+    style: PropTypes.object,
+};
+
+export default Accordion;

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

@@ -0,0 +1,278 @@
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionGroup,
+    AccordionSummary,
+    Button,
+    ButtonIcon,
+    Typography,
+} from 'components';
+import { ImportComp } from 'components/others/import/index.stories';
+import React from 'react';
+import { useTheme } from 'theme';
+
+const theme = useTheme();
+Accordion.defaultProps = theme?.components?.Accordion?.defaultProps || {};
+AccordionDetails.defaultProps = theme?.components?.AccordionDetails?.defaultProps || {};
+AccordionGroup.defaultProps = theme?.components?.AccordionGroup?.defaultProps || {};
+AccordionSummary.defaultProps = theme?.components?.AccordionSummary?.defaultProps || {};
+
+export default {
+    title: 'Components/Accordion',
+    component: Accordion,
+    subcomponents: { AccordionGroup, Accordion, AccordionSummary, AccordionDetails },
+    parameters: {
+        componentSubtitle:
+            'The accordion component allows the user to show and hide sections of related content on a page.',
+    },
+};
+
+const styles = {
+    mgl: { marginLeft: 8 },
+};
+
+const loremText =
+    'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt utlaoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tationullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriuredolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nullafacilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzrildelenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, cons ectetueradipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam eratvolutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortisnisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enimad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex eacommodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestieconsequat.';
+
+const Template = ({ disabled, expandIcon, expandIconAt, collapseIcon, background, boxShadow, onClick, expanded }) => {
+    return (
+        <div>
+            <ImportComp components={'Accordion, AccordionSummary, AccordionDetails, AccordionGroup'} />
+            <Accordion disabled={disabled} expanded={expanded} boxShadow={boxShadow}>
+                <AccordionSummary
+                    expandIcon={expandIcon}
+                    collapseIcon={collapseIcon}
+                    expandIconAt={expandIconAt}
+                    onClick={onClick}
+                    background={background}
+                >
+                    Label
+                </AccordionSummary>
+                <AccordionDetails>{loremText}</AccordionDetails>
+            </Accordion>
+            <Accordion disabled={disabled} expanded={expanded} boxShadow={boxShadow}>
+                <AccordionSummary
+                    expandIcon={expandIcon}
+                    collapseIcon={collapseIcon}
+                    expandIconAt={expandIconAt}
+                    onClick={onClick}
+                    background={background}
+                >
+                    Core-UI Team
+                </AccordionSummary>
+                <AccordionDetails>
+                    <Typography>1. First content</Typography>
+                    <Typography>2. Second content</Typography>
+                    <Typography>3. Third content</Typography>
+                </AccordionDetails>
+            </Accordion>
+            <Accordion disabled={disabled} expanded={expanded} boxShadow={boxShadow}>
+                <AccordionSummary
+                    expandIcon={expandIcon}
+                    collapseIcon={collapseIcon}
+                    expandIconAt={expandIconAt}
+                    onClick={onClick}
+                    background={background}
+                    title={'Lorem ipsum dolor sit amet, consectetuer'}
+                >
+                    <Button viewType={'filled'} size={'tiny'} startIcon={'Star'} label={'Button'} onClick={() => {}} />
+                    <ButtonIcon style={styles.mgl} viewType={'filled'} size={'tiny'} name={'Star'} onClick={() => {}} />
+                    <ButtonIcon
+                        style={styles.mgl}
+                        viewType={'filled'}
+                        size={'small'}
+                        name={'Star'}
+                        onClick={() => {}}
+                    />
+                    <ButtonIcon
+                        style={styles.mgl}
+                        viewType={'ghost'}
+                        size={'medium'}
+                        name={'Star'}
+                        onClick={() => {}}
+                    />
+                    <ButtonIcon style={styles.mgl} viewType={'ghost'} size={'large'} name={'Star'} onClick={() => {}} />
+                </AccordionSummary>
+                <AccordionDetails>{loremText}</AccordionDetails>
+            </Accordion>
+            <Accordion disabled={disabled} expanded={expanded} boxShadow={boxShadow}>
+                <AccordionSummary
+                    expandIcon={expandIcon}
+                    collapseIcon={collapseIcon}
+                    expandIconAt={expandIconAt}
+                    onClick={onClick}
+                    background={background}
+                    title={loremText}
+                >
+                    <Button viewType={'filled'} size={'tiny'} startIcon={'Star'} label={'Button'} onClick={() => {}} />
+                    <ButtonIcon style={styles.mgl} viewType={'filled'} size={'tiny'} name={'Star'} onClick={() => {}} />
+                    <ButtonIcon
+                        style={styles.mgl}
+                        viewType={'filled'}
+                        size={'small'}
+                        name={'Star'}
+                        onClick={() => {}}
+                    />
+                    <ButtonIcon
+                        style={styles.mgl}
+                        viewType={'ghost'}
+                        size={'medium'}
+                        name={'Star'}
+                        onClick={() => {}}
+                    />
+                    <ButtonIcon style={styles.mgl} viewType={'ghost'} size={'large'} name={'Star'} onClick={() => {}} />
+                </AccordionSummary>
+                <AccordionDetails>{loremText}</AccordionDetails>
+            </Accordion>
+        </div>
+    );
+};
+
+const Template2 = ({
+    disabled,
+    expandIcon,
+    expandIconAt,
+    collapseIcon,
+    background,
+    boxShadow,
+    onClick,
+    onExpand,
+    expanded,
+    collapseOther,
+}) => (
+    <div>
+        <ImportComp components={'Accordion, AccordionSummary, AccordionDetails'} />
+        <AccordionGroup collapseOther={collapseOther}>
+            <Accordion disabled={disabled} expanded={expanded} boxShadow={boxShadow} onExpand={onExpand}>
+                <AccordionSummary
+                    expandIcon={expandIcon}
+                    collapseIcon={collapseIcon}
+                    expandIconAt={expandIconAt}
+                    onClick={onClick}
+                    background={background}
+                >
+                    Core-UI Team
+                </AccordionSummary>
+                <AccordionDetails>
+                    <Typography>1. First content</Typography>
+                    <Typography>2. Second content</Typography>
+                    <Typography>3. Third content</Typography>
+                </AccordionDetails>
+            </Accordion>
+            <Accordion disabled={disabled} expanded={expanded} boxShadow={boxShadow} onExpand={onExpand}>
+                <AccordionSummary
+                    expandIcon={expandIcon}
+                    collapseIcon={collapseIcon}
+                    expandIconAt={expandIconAt}
+                    onClick={onClick}
+                    background={background}
+                >
+                    API Team
+                </AccordionSummary>
+                <AccordionDetails>
+                    <Typography>1.</Typography>
+                    <Typography>2.</Typography>
+                    <Typography>3.</Typography>
+                </AccordionDetails>
+            </Accordion>
+            <Accordion disabled={disabled} expanded={expanded} boxShadow={boxShadow}>
+                <AccordionSummary
+                    expandIcon={expandIcon}
+                    collapseIcon={collapseIcon}
+                    expandIconAt={expandIconAt}
+                    onClick={onClick}
+                    background={background}
+                    title={'Lorem ipsum dolor sit amet, consectetuer'}
+                >
+                    <Button viewType={'filled'} size={'tiny'} startIcon={'Star'} label={'Button'} onClick={() => {}} />
+                    <ButtonIcon style={styles.mgl} viewType={'filled'} size={'tiny'} name={'Star'} onClick={() => {}} />
+                    <ButtonIcon
+                        style={styles.mgl}
+                        viewType={'filled'}
+                        size={'small'}
+                        name={'Star'}
+                        onClick={() => {}}
+                    />
+                    <ButtonIcon
+                        style={styles.mgl}
+                        viewType={'ghost'}
+                        size={'medium'}
+                        name={'Star'}
+                        onClick={() => {}}
+                    />
+                    <ButtonIcon style={styles.mgl} viewType={'ghost'} size={'large'} name={'Star'} onClick={() => {}} />
+                </AccordionSummary>
+                <AccordionDetails>{loremText}</AccordionDetails>
+            </Accordion>
+            <Accordion disabled={disabled} expanded={expanded} boxShadow={boxShadow}>
+                <AccordionSummary
+                    expandIcon={expandIcon}
+                    collapseIcon={collapseIcon}
+                    expandIconAt={expandIconAt}
+                    onClick={onClick}
+                    background={background}
+                    title={loremText}
+                >
+                    <Button viewType={'filled'} size={'tiny'} startIcon={'Star'} label={'Button'} onClick={() => {}} />
+                    <ButtonIcon style={styles.mgl} viewType={'filled'} size={'tiny'} name={'Star'} onClick={() => {}} />
+                    <ButtonIcon
+                        style={styles.mgl}
+                        viewType={'filled'}
+                        size={'small'}
+                        name={'Star'}
+                        onClick={() => {}}
+                    />
+                    <ButtonIcon
+                        style={styles.mgl}
+                        viewType={'ghost'}
+                        size={'medium'}
+                        name={'Star'}
+                        onClick={() => {}}
+                    />
+                    <ButtonIcon style={styles.mgl} viewType={'ghost'} size={'large'} name={'Star'} onClick={() => {}} />
+                </AccordionSummary>
+                <AccordionDetails>{loremText}</AccordionDetails>
+            </Accordion>
+        </AccordionGroup>
+    </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    boxShadow: false,
+    disabled: false,
+    expand: false,
+    expanded: false,
+    fullHeight: false,
+};
+export const IconAtEnd = Template.bind({});
+IconAtEnd.args = {
+    expandIconAt: 'end',
+};
+
+export const DifferentIcon = Template.bind({});
+DifferentIcon.args = {
+    expandIcon: 'Add',
+    collapseIcon: 'Minus',
+    expandIconAt: 'end',
+};
+
+export const Expanding = Template.bind({});
+Expanding.args = {
+    expandIcon: 'AddFilled',
+    collapseIcon: 'MinusFilled',
+    expandIconAt: 'start',
+    expanded: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+    disabled: true,
+};
+
+export const DefaultGroup = Template2.bind({});
+
+export const GroupNotCollapseOther = Template2.bind({});
+GroupNotCollapseOther.args = {
+    collapseOther: false,
+};