diginet-core-ui 1.4.39 → 1.4.40

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

@@ -0,0 +1,78 @@
+import { Rating } from 'components';
+import { ImportComp } from 'components/others/import/index.stories';
+import React from 'react';
+
+export default {
+    title: 'Components/Rating',
+    component: Rating,
+    parameters: {
+        componentSubtitle:
+            'Ratings provide insight regarding others opinions and experiences, and can allow the user to submit a rating of their own.',
+    },
+};
+
+const Template = args => (
+    <>
+        <ImportComp components={'Rating'} />
+        <Rating {...args} />
+    </>
+);
+
+const Template2 = () => (
+    <>
+        <ImportComp components={'Rating'} />
+        <div>
+            <Rating half value={1} quantity={5} color={'primary'} />
+        </div>
+        <div>
+            <Rating half value={2} quantity={5} color={'info'} />
+        </div>
+        <div>
+            <Rating half value={3} quantity={5} color={'success'} />
+        </div>
+        <div>
+            <Rating half value={4} quantity={5} color={'warning'} />
+        </div>
+        <div>
+            <Rating half value={5} quantity={5} color={'danger'} />
+        </div>
+    </>
+);
+
+export const Full = Template.bind({});
+Full.args = {
+    value: 3,
+    quantity: 5,
+};
+
+export const Half = Template.bind({});
+Half.args = {
+    value: 2.5,
+    quantity: 5,
+    half: true,
+};
+
+export const Color = Template2.bind({});
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+    ...Full.args,
+    disabled: true,
+};
+
+export const ReadOnly = Template.bind({});
+ReadOnly.args = {
+    ...Full.args,
+    readOnly: true,
+};
+
+export const Custom = Template.bind({});
+Custom.args = {
+    half: true,
+    disabled: false,
+    selector: false,
+    color: 'success',
+    value: 0,
+    quantity: 5,
+    onRating: ({ value }) => console.log(value),
+};

package/src/components/skeleton/index.js

@@ -0,0 +1,79 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import OptionWrapper from 'components/others/option-wrapper';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useRef } from 'react';
+import { parseWidthHeight } from 'styles/general';
+import { useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, getProp } from 'utils';
+
+const Skeleton = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+        // const { spacing } = theme;
+
+        const props = useThemeProps({ props: inProps, name: 'Skeleton' });
+        const { action = {}, className, height, id, style, width } = 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;
+        });
+        const skeletonRootStyle = css`
+            ${parseWidthHeight(width, height)};
+            background: linear-gradient(
+                -90deg,
+                ${getProp(theme.colors, 'fill/headerUI')} 0%,
+                ${getProp(theme.colors, 'fill/background')} 50%,
+                ${getProp(theme.colors, 'fill/headerUI')} 100%
+            );
+            background-size: 400% 400%;
+            animation: pulse 1.2s ease-in-out infinite;
+            @keyframes pulse {
+                0% {
+                    background-position: 0% 0%;
+                }
+                100% {
+                    background-position: -135% 0%;
+                }
+            }
+        `;
+        return (
+            <div
+                css={skeletonRootStyle}
+                ref={ref}
+                id={id}
+                style={style}
+                className={classNames('DGN-UI-Skeleton', className)}
+            />
+        );
+    })
+);
+
+Skeleton.propTypes = {
+    /** Class for component. */
+    className: PropTypes.string,
+    /** The color of the component. */
+    colors: PropTypes.string,
+    /** Height oof the component. */
+    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Style inline of component. */
+    style: PropTypes.object,
+    /** Width of the component. */
+    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+export { Skeleton };
+export default OptionWrapper(Skeleton);

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

@@ -0,0 +1,29 @@
+import { ImportComp } from 'components/others/import/index.stories';
+import React from 'react';
+import { useTheme } from 'theme';
+import { Skeleton } from '.';
+
+const theme = useTheme();
+Skeleton.defaultProps = theme?.components?.Skeleton?.defaultProps || {};
+
+export default {
+    title: 'Components/Skeleton',
+    component: Skeleton,
+    parameters: {
+        componentSubtitle:
+            'The Skeleton library provides default components and templates to swiftly and effortlessly create interfaces, aiding developers in establishing the fundamental structure of an application or website without having to start from scratch.',
+    },
+};
+
+const Template = args => {
+    return (
+        <>
+            <ImportComp components={'Skeleton'} />
+            <div style={{ width: 800, height: 300 }}>
+                <Skeleton {...args} />
+            </div>
+        </>
+    );
+};
+
+export const Basic = Template.bind({});

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

@@ -0,0 +1,50 @@
+import { Slider } from 'components';
+import { ImportComp } from 'components/others/import/index.stories';
+import React from 'react';
+
+export default {
+    title: 'Components/Slider',
+    component: Slider,
+};
+const source = [
+    {
+        name: 'First',
+        url:
+            'https://img.fcbayern.com/image/upload/t_cms-16x9/f_auto/w_1366,h_768,c_fill/v1606341335/cms/public/images/fcbayern-com/homepage/saison-20-21/galerien/spiele/FCB-Salzburg/FCBFCS_20_don_251120.jpg',
+    },
+    {
+        name: 'Second',
+        url:
+            'https://img.fcbayern.com/image/upload/t_cms-16x9/f_auto/w_1366,h_768,c_fill/v1606341335/cms/public/images/fcbayern-com/homepage/saison-20-21/galerien/spiele/FCB-Salzburg/FCBFCS_30_don_251120.jpg',
+    },
+    {
+        name: 'Third',
+        url:
+            'https://img.fcbayern.com/image/upload/t_cms-16x9/f_auto/w_1366,h_768,c_fill/v1606341335/cms/public/images/fcbayern-com/homepage/saison-20-21/galerien/spiele/FCB-Salzburg/FCBFCS_13_don_251120.jpg',
+    },
+    {
+        name: 'Fourth',
+        url:
+            'https://img.fcbayern.com/image/upload/t_cms-16x9/f_auto/w_1366,h_768,c_fill/v1606341335/cms/public/images/fcbayern-com/homepage/saison-20-21/galerien/spiele/FCB-Salzburg/FCBFCS_25_get_251120.jpg',
+    },
+    {
+        name: 'file-gi-do-2',
+        url: 'https://drive.google.com/file/d/1CBJhWiP9hevo440YSK-UIhu_RFz7TXwl/view?usp=sharing',
+    },
+];
+
+const Template = args => (
+    <>
+        <ImportComp components={'Slider'} />
+        <Slider {...args} />
+    </>
+);
+
+export const Basic = Template.bind({});
+Basic.args = {
+    active: 2,
+    animation: true,
+    autoChangeTime: 0,
+    data: source,
+    onShowNavigation: true,
+};

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

@@ -0,0 +1,415 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon } from 'components';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import {
+    bgColor,
+    borderRadius,
+    boxBorder,
+    cursorPointer,
+    displayNone,
+    flexCol,
+    flexRow,
+    itemsCenter,
+    justifyCenter,
+    left,
+    overflowHidden,
+    parseHeight,
+    parseWidthHeight,
+    positionAbsolute,
+    positionRelative,
+    right,
+    top,
+    userSelectNone,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import { classNames, getProp, randomString } from 'utils';
+import SliderItem from './slider-item';
+
+const styles = {
+    iconLeft: {
+        left: 0,
+        position: 'absolute',
+        top: '50%',
+        transform: 'translate(0, -50%)',
+    },
+    iconRight: {
+        right: 0,
+        position: 'absolute',
+        top: '50%',
+        transform: 'translate(0, -50%)',
+    },
+};
+
+const SliderContainer = memo(
+    forwardRef(
+        ({ animation, active, autoChangeTime, children, className, data, onShowNavigation, style }, reference) => {
+            let autoChange;
+            let currentItemIndex = 0;
+            const Id = randomString(7, { allowSymbol: false, allowNumber: false });
+            const IDs = {
+                container: 'DGN-UI-Slider-container-' + Id,
+                icon: 'DGN-UI-Slider-icon',
+                iconLeft: 'DGN-UI-Slider-icon-left',
+                iconRight: 'DGN-UI-Slider-icon-right',
+                navigation: 'DGN-UI-Slider-navigation-' + Id,
+                navigationList: 'DGN-UI-Slider-navigation-list-' + Id,
+                navigationItem: 'DGN-UI-Slider-navigation-item',
+                slideContainer: 'DGN-UI-Slider-slide-container',
+            };
+
+            const ref = useRef(null);
+            const slideContainerRef = useRef(null);
+            const navigationRef = useRef(null);
+            const navigationListRef = useRef(null);
+            const iconLeftRef = useRef(null);
+            const iconRightRef = useRef(null);
+
+            const theme = useTheme();
+
+            const _containerCSS = ContainerCSS(IDs, theme);
+            const _navigationListCSS = NavigationListCSS(IDs, theme);
+            const _navigationCSS = NavigationCSS(theme);
+
+            const removeClass = (className, selector) => {
+                const array = document.querySelectorAll(`.${selector}`) || document.querySelectorAll(selector);
+                array.forEach(a => {
+                    a.classList.remove(className);
+                });
+            };
+
+            const onChangeActiveItem = (childNodeList, e, i) => {
+                removeClass('item-focused', IDs.navigationItem);
+                e.classList.add('item-focused');
+                childNodeList.forEach(node => {
+                    node.style.display = 'none';
+                });
+                childNodeList[i].style.display = 'block';
+                currentItemIndex = i;
+            };
+
+            const onNextItem = childNodeList => {
+                if (childNodeList.length > 1 && autoChangeTime && autoChangeTime > 0) {
+                    clearInterval(autoChange);
+                    autoChange = setInterval(() => onNextItem(childNodeList), autoChangeTime * 1000);
+                }
+                childNodeList[currentItemIndex].style.display = 'none';
+                if (currentItemIndex === childNodeList.length - 1) {
+                    currentItemIndex = 0;
+                } else {
+                    currentItemIndex += 1;
+                }
+                childNodeList[currentItemIndex].style.display = 'block';
+                onChangeActiveItem(
+                    childNodeList,
+                    navigationListRef.current.childNodes[currentItemIndex],
+                    currentItemIndex
+                );
+            };
+
+            const onPrevItem = childNodeList => {
+                if (childNodeList.length > 1 && autoChangeTime && autoChangeTime > 0) {
+                    clearInterval(autoChange);
+                    autoChange = setInterval(() => onNextItem(childNodeList), autoChangeTime * 1000);
+                }
+                childNodeList[currentItemIndex].style.display = 'none';
+                if (currentItemIndex === 0) {
+                    currentItemIndex = childNodeList.length - 1;
+                } else {
+                    currentItemIndex -= 1;
+                }
+                childNodeList[currentItemIndex].style.display = 'block';
+                onChangeActiveItem(
+                    childNodeList,
+                    navigationListRef.current.childNodes[currentItemIndex],
+                    currentItemIndex
+                );
+            };
+
+            const findActiveItem = childNodeList => {
+                for (let i = 0; i < childNodeList.length; i++) {
+                    if (childNodeList[i].classList.contains('active')) {
+                        childNodeList[i].style.display = 'block';
+                        currentItemIndex = i;
+                        return i;
+                    }
+                }
+                childNodeList[0].style.display = 'block';
+                currentItemIndex = 0;
+                return 0;
+            };
+
+            const renderNavigationItem = childNodeList => {
+                const list = navigationListRef.current;
+                const activeItem = findActiveItem(childNodeList);
+                let items = '';
+                for (let i = 0; i < childNodeList.length; i++) {
+                    items += `<span class='${
+                        i === activeItem ? IDs.navigationItem + ' ' + 'item-focused' : IDs.navigationItem
+                    }' id='${IDs.navigationItem}-${i}'></span>`;
+                }
+                list.innerHTML = items;
+                navigationListRef.current.querySelectorAll(`.${IDs.navigationItem}`).forEach((item, i) => {
+                    item.addEventListener('click', e => {
+                        onChangeActiveItem(childNodeList, e.target, i);
+                    });
+                });
+            };
+
+            useEffect(() => {
+                if (
+                    !slideContainerRef.current ||
+                    !navigationRef.current ||
+                    !iconLeftRef.current ||
+                    !iconRightRef.current
+                )
+                    return;
+                const childNodeList = slideContainerRef.current.childNodes,
+                    navigation = navigationRef.current,
+                    iconLeft = iconLeftRef.current,
+                    iconRight = iconRightRef.current;
+
+                renderNavigationItem(childNodeList);
+                if (childNodeList.length > 1) {
+                    navigation.style.display = onShowNavigation ? 'block' : 'none';
+                    iconLeft.style.display = 'block';
+                    iconRight.style.display = 'block';
+                    iconRight.addEventListener('click', () => onNextItem(childNodeList));
+                    iconLeft.addEventListener('click', () => onPrevItem(childNodeList));
+                } else {
+                    navigation.style.display = 'none';
+                    iconLeft.style.display = 'none';
+                    iconRight.style.display = 'none';
+                }
+                return () => {
+                    childNodeList.forEach(node => {
+                        node.style.display = 'none';
+                    });
+                    if (childNodeList.length > 1) {
+                        iconRight.removeEventListener('click', () => onNextItem(childNodeList));
+                        iconLeft.removeEventListener('click', () => onPrevItem(childNodeList));
+                    }
+                };
+            });
+
+            useEffect(() => {
+                if (!slideContainerRef.current) return;
+                const childNodeList = slideContainerRef.current.childNodes;
+                if (childNodeList.length > 1 && autoChangeTime && autoChangeTime > 0) {
+                    autoChange = setInterval(() => onNextItem(childNodeList), autoChangeTime * 1000);
+                }
+                return () => {
+                    if (childNodeList.length > 1 && autoChangeTime && autoChangeTime > 0) {
+                        clearInterval(autoChange);
+                    }
+                };
+            }, [autoChangeTime, children, data]);
+
+            useImperativeHandle(reference, () => {
+                const currentRef = ref.current || {};
+                const _instance = {}; // methods
+                _instance.__proto__ = {}; // hidden methods
+                currentRef.instance = _instance;
+                return currentRef;
+            });
+
+            const Slider = useMemo(
+                () => (
+                    <div className={IDs.slideContainer} ref={slideContainerRef}>
+                        {children ||
+                            (data &&
+                                data.map((i, index) => {
+                                    return (
+                                        <SliderItem
+                                            animation={animation}
+                                            key={index}
+                                            fileName={i.name}
+                                            active={index === active}
+                                            id={index}
+                                            url={i.url}
+                                        />
+                                    );
+                                }))}
+                    </div>
+                ),
+                [animation, autoChangeTime, children, data, theme]
+            );
+            const IconLeft = useMemo(
+                () => (
+                    <span className={classNames(IDs.icon, IDs.iconLeft)} ref={iconLeftRef}>
+                        <ButtonIcon
+                            circular
+                            viewType={'filled'}
+                            color={'system/standard'}
+                            name={'ArrowLeft'}
+                            style={styles.iconLeft}
+                            viewBox={false}
+                        />
+                    </span>
+                ),
+                [children, data, theme]
+            );
+            const IconRight = useMemo(
+                () => (
+                    <span className={classNames(IDs.icon, IDs.iconRight)} ref={iconRightRef}>
+                        <ButtonIcon
+                            circular
+                            viewType={'filled'}
+                            color={'system/standard'}
+                            name={'ArrowRight'}
+                            style={styles.iconRight}
+                            viewBox={false}
+                        />
+                    </span>
+                ),
+                [children, data, theme]
+            );
+            const Navigation = useMemo(
+                () => (
+                    <div
+                        className={classNames(IDs.navigation, onShowNavigation && 'navigation-hidden')}
+                        css={_navigationCSS}
+                        id={IDs.navigation}
+                        ref={navigationRef}
+                    >
+                        <div
+                            css={_navigationListCSS}
+                            className={IDs.navigationList}
+                            id={IDs.navigationList}
+                            ref={navigationListRef}
+                        />
+                    </div>
+                ),
+                [animation, autoChangeTime, children, data, onShowNavigation, theme]
+            );
+
+            return (
+                <div
+                    css={_containerCSS}
+                    className={classNames(IDs.container, className)}
+                    id={IDs.container}
+                    style={style}
+                    ref={ref}
+                >
+                    {Slider}
+                    {IconLeft}
+                    {IconRight}
+                    {Navigation}
+                </div>
+            );
+        }
+    )
+);
+
+const ContainerCSS = (IDs, { spacing }) => css`
+    * {
+        ${boxBorder};
+        margin: ${spacing([0])};
+        padding: ${spacing([0])};
+    }
+    ${flexCol};
+    ${itemsCenter};
+    ${justifyCenter};
+    ${positionRelative};
+    ${bgColor('transparent')};
+    ${parseHeight('100%')};
+    resize: both;
+    .${IDs.icon} {
+        opacity: 0;
+        &.${IDs.iconLeft} {
+            ${displayNone};
+            ${cursorPointer};
+            ${userSelectNone};
+            ${positionAbsolute};
+            ${parseWidthHeight('15%', '100%')};
+            ${left(0)};
+            margin-left: ${spacing([4])};
+        }
+        &.${IDs.iconRight} {
+            ${displayNone};
+            ${cursorPointer};
+            ${userSelectNone};
+            ${positionAbsolute};
+            ${parseWidthHeight('15%', '100%')};
+            ${right(0)};
+            margin-right: ${spacing([4])};
+        }
+    }
+    .${IDs.slideContainer} {
+        ${overflowHidden};
+        ${positionRelative};
+        ${bgColor('transparent')};
+        ${parseWidthHeight('100%', '95%')};
+        margin: 0 auto;
+    }
+    &:hover {
+        .${IDs.icon} {
+            opacity: 1;
+        }
+    }
+`;
+
+const NavigationCSS = theme => css`
+    ${displayNone};
+    ${positionRelative};
+    ${bgColor(getProp(theme.colors, 'system/standard'))};
+    ${parseWidthHeight('100%', '5%')};
+    &.navigation-hidden {
+        ${displayNone};
+    }
+`;
+
+const NavigationListCSS = (IDs, { colors, spacing }) => css`
+    ${flexRow};
+    ${positionAbsolute};
+    ${left('50%')};
+    ${top('50%')};
+    transform: translate(-50%, 14px);
+    .${IDs.navigationItem} {
+        ${cursorPointer};
+        ${positionRelative};
+        ${bgColor(getProp(colors, 'system/rest'))};
+        ${borderRadius('50%')};
+        ${parseWidthHeight(12)};
+        margin: ${spacing([0, 1.5])};
+        :hover:not(.item-focused) {
+            ${bgColor(getProp(colors, 'fill/pressed'))};
+        }
+        &.item-focused {
+            ${bgColor(getProp(colors, 'system/active'))};
+        }
+    }
+`;
+
+SliderContainer.defaultProps = {
+    animation: true,
+    autoChangeTime: 0,
+    children: null,
+    data: [],
+    onShowNavigation: true,
+    className: '',
+    style: {},
+};
+
+SliderContainer.propTypes = {
+    /** Index of the active item. */
+    active: PropTypes.number,
+    /** Enable/disable the animation when change active item. */
+    animation: PropTypes.bool,
+    /** Time to slider auto change (s). */
+    autoChangeTime: PropTypes.number,
+    /** Element or node to display on slider without data.  */
+    children: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
+    /** Class for component. */
+    className: PropTypes.string,
+    /** Data to display on slider. */
+    data: PropTypes.array,
+    /** Show/hide the navigation bar. */
+    onShowNavigation: PropTypes.bool,
+    /** Style inline of component. */
+    style: PropTypes.object,
+};
+
+export default SliderContainer;