@omniumretail/component-library 1.2.70 → 1.2.72

package/src/components/ModalWithTable/ModalWithTable.stories.tsx

@@ -1,99 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react-webpack5";
-import { useEffect, useState } from "react";
-import { ModalWithTable, ModalWithTableProps } from '.';
-
-export default {
-    title: 'ModalWithTable',
-    component: ModalWithTable,
-} as Meta;
-
-const Template: StoryFn<ModalWithTableProps> = (args: any) => {
-    const [modalData, setModalData] = useState<any>({});
-    const [isFetching, setIsFetching] = useState<boolean>(false);
-    const [tagsData, setTagsData] = useState<any>({});
-    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-    const [selectedSupervisors, setSelectedSupervisors] = useState<any>(['232']);
-
-    const onClickMe = () => {
-        setIsModalOpen(true);
-    }
-    
-    let data = {
-        dataSource: [
-            {
-                key: `1`,
-                name: `John Brown`,
-                mecanographicNumber: "232",
-                store: `Levi's Sta Catarina`,
-                role: `Gerente`,
-                type: `Efetivo`
-            },
-            {
-                key: `2`,
-                name: `Mary Brown`,
-                mecanographicNumber: "32",
-                store: `Levi's Sta Catarina`,
-                role: `Comercial`,
-                type: `Efetivo`
-            },
-            {
-                key: `3`,
-                name: `Anna Astori`,
-                mecanographicNumber: "3212",
-                store: `Levi's Sta Catarina`,
-                role: `Funcionário`,
-                type: `Efetivo`
-            },
-            {
-                key: `4`,
-                name: `Yield Ona`,
-                mecanographicNumber: "21232",
-                store: `Adidas Restaurantes`,
-                role: `Gerente`,
-                type: `Efetivo`
-            },
-        ],
-        pagination: {
-            total: 4,
-            pageSize: 2
-        },
-        rowKeyValue: 'mecanographicNumber',
-        rowSelection: {
-            type: 'checkbox',
-            selectedRowKeys: selectedSupervisors?.length > 0 ? selectedSupervisors : []
-        },
-        customColumnWidths:[
-            { columnName: "name", width: "1%" },
-        ]
-    }
-
-    useEffect(() => {
-        if(modalData?.tagsInfo?.length > 0 && tagsData !== modalData?.tagsInfo) {
-            setTagsData(modalData.tagsInfo);
-            setIsFetching(true);
-
-            setTimeout(() => {
-                setIsFetching(false);
-            }, 1000);
-        }
-
-        if(modalData?.rowSelectionInfo?.length !== undefined) {
-            setSelectedSupervisors(modalData.rowSelectionInfo);
-        }
-
-        setIsModalOpen(modalData?.open!);
-    }, [modalData]);
-
-    return (
-        <>
-            <button onClick={() => onClickMe()}> Button </button>
-            <ModalWithTable {...args} modalData={setModalData} isLoading={isFetching} tableData={data} isOpen={isModalOpen} advancedTagsList={[{ display: "Oi", value: "State"}]}></ModalWithTable>
-        </>
-    );
-}
-
-export const Primary = Template.bind({});
-Primary.args = {
-    closeText: 'cancelar',
-    buttonText: 'Alterar',
-};

package/src/components/ModalWithTable/index.tsx

@@ -1,238 +0,0 @@
-import { Button } from '../Button';
-import { Modal } from 'antd';
-import { useEffect, useRef, useState } from 'react';
-import { CloseOutlined } from '@ant-design/icons';
-import styles from './styles.module.scss';
-import { TagField } from '../Tag';
-import { Table, TableCustomProps } from '../Table';
-import classnames from 'classnames';
-
-export interface ModalWithTableProps {
-    closeText: string;
-    buttonText: string;
-    isOpen: boolean;
-    tableData: TableCustomProps,
-    modalData?: any;
-    isLoading?: boolean;
-    confirmLoading?: boolean;
-    initialRowSelectedInfo?: any;
-    // Tags List for advanced search
-    advancedTagsList?: { display: string; value: string }[];
-}
-function objectsAreEqual(obj1: any, obj2: any) {
-    const keys1 = Object.keys(obj1);
-    const keys2 = Object.keys(obj2);
-
-    if (keys1.length !== keys2.length) {
-        return false;
-    }
-
-    for (const key of keys1) {
-        if (!keys2.includes(key) || obj1[key] !== obj2[key]) {
-            return false;
-        }
-    }
-
-    return true;
-}
-
-function arrayContainsObject(array: any, newObj: any) {
-    return array.some((existingObj: any) => objectsAreEqual(existingObj, newObj));
-}
-
-export const ModalWithTable = (props: ModalWithTableProps) => {
-    const {
-        closeText,
-        buttonText,
-        isOpen = false,
-        tableData,
-        modalData,
-        isLoading,
-        initialRowSelectedInfo,
-        advancedTagsList
-    } = props;
-
-    const prevIsOpenRef = useRef<boolean>();
-    useEffect(() => {
-        prevIsOpenRef.current = isOpen;
-    }, [isOpen]);
-    const prevIsOpen = prevIsOpenRef.current;
-
-    // Add a new state to store the initial values
-    const [initialValues, setInitialValues] = useState<any>({
-        pageInfo: {},
-        rowSelectionInfo: [],
-        tagsInfo: [],
-        advancedTagsInfo: [],
-        selectedData: [],
-    });
-    const pageBase = { currentPage: 1 };
-    const [open, setOpen] = useState((isOpen));
-    const [confirmLoading, setConfirmLoading] = useState(false);
-    const [pageInfo, setPageInfo] = useState<any>(pageBase);
-    const [rowSelectionInfo, setRowSelectionInfo] = useState<any>(undefined);
-    const [tagsInfo, setTagsInfo] = useState<any>([]);
-    const [advancedTagsInfo, setAdvancedTagsInfo] = useState<any>([]);
-    const [selectedData, setSelectedData] = useState<any>([]);
-
-    useEffect(() => {
-        setOpen(isOpen);
-
-        if (isOpen && !prevIsOpen) {
-            setInitialValues({
-                pageInfo: pageInfo,
-                rowSelectionInfo: rowSelectionInfo,
-                tagsInfo: tagsInfo,
-                advancedTagsInfo: advancedTagsInfo,
-                selectedData: selectedData,
-            });
-        }
-    }, [isOpen])
-
-    useEffect(() => {
-        initialRowSelectedInfo && setRowSelectionInfo(initialRowSelectedInfo);
-    }, [initialRowSelectedInfo])
-
-    const hideModal = () => {
-        setOpen(false);
-        setPageInfo(initialValues.pageInfo);
-        setRowSelectionInfo(initialValues.rowSelectionInfo);
-        setTagsInfo(initialValues.tagsInfo);
-        setAdvancedTagsInfo(initialValues.advancedTagsInfo)
-        setSelectedData(initialValues.selectedData);
-    };
-
-    const saveChanges = () => {
-        setOpen(false);
-        if (tableData?.rowSelection?.type === 'radio') {
-            setSelectedData([selectedData[selectedData.length - 1]]);
-        }
-    };
-
-    useEffect(() => {
-        if (!open) {
-            setPageInfo(pageBase);
-        }
-
-        const modalDataObj = {
-            pageInfo: pageInfo,
-            rowSelectionInfo: rowSelectionInfo,
-            tagsInfo: tagsInfo,
-            advancedTagsInfo: advancedTagsInfo,
-            open: open,
-            selectedData: selectedData,
-        };
-
-        modalData(modalDataObj);
-    }, [tagsInfo, advancedTagsInfo, open, rowSelectionInfo, selectedData]);
-
-    useEffect(() => {
-        const selectedRowKeys = rowSelectionInfo || tableData.rowSelection.selectedRowKeys;
-
-        if (tableData?.rowSelection?.type === 'radio') {
-            setSelectedData((prevData: any) => {
-                const newData = tableData?.dataSource?.filter((element) => {
-                    return selectedRowKeys.includes(element[tableData.rowKeyValue as any]);
-                }) || [];
-
-                if (newData.length < 1) {
-                    return selectedData;
-                }
-                if (arrayContainsObject(selectedData, newData[0])) {
-                    return selectedData;
-                }
-                const combinedData = [...selectedData, ...newData];
-                return combinedData;
-            });
-
-            return;
-        }
-
-        setSelectedData((prevData: any) => {
-            const newData = tableData?.dataSource?.filter((element) => {
-                return selectedRowKeys.includes(element[tableData.rowKeyValue as any]);
-            }) || [];
-
-            const oldData = prevData.filter((dataItem: any) => {
-                return !tableData?.dataSource?.some(
-                    (element) => element[tableData.rowKeyValue as any] === dataItem[tableData.rowKeyValue as any]
-                );
-            });
-
-            const combinedData = [...oldData, ...newData].filter((dataItem, index, self) => {
-                return (
-                    index ===
-                    self.findIndex(
-                        (item) => item[tableData.rowKeyValue as any] === dataItem[tableData.rowKeyValue as any]
-                    )
-                );
-            });
-
-            setInitialValues({ ...initialValues, selectedData: combinedData });
-            return combinedData;
-        });
-    }, [rowSelectionInfo])
-
-    useEffect(() => {
-        if (advancedTagsInfo.length > 0) {
-            setConfirmLoading(true);
-        }
-        setConfirmLoading(false);
-    }, [advancedTagsInfo]);
-
-    useEffect(() => {
-        if (tagsInfo.length > 0) {
-            setConfirmLoading(true);
-        }
-    }, [tagsInfo]);
-
-    useEffect(() => {
-        setConfirmLoading(isLoading!);
-    }, [isLoading]);
-
-    const modalClasses = classnames({
-        [styles.disabled]: confirmLoading,
-    }, styles.modal);
-
-    return (
-        <>
-            <Modal
-                destroyOnClose={true}
-                closeIcon={
-                    <div className={styles.closeButton}>
-                        <p>{closeText}</p><CloseOutlined />
-                    </div>
-                }
-                open={open}
-                onOk={hideModal}
-                onCancel={hideModal}
-                maskClosable={false}
-                centered
-                width={'100%'}
-                footer={[
-                    <Button key="submit" onClick={saveChanges}>
-                        {buttonText}
-                    </Button>
-                ]}
-                className={modalClasses}
-            >
-                <div className={styles.tagsWrapper}>
-                    <TagField tagsInfo={setTagsInfo} advancedTagsInfo={setAdvancedTagsInfo} advancedTags={advancedTagsList!} hideAdvancedFilters={advancedTagsList ? true : false} />
-                </div>
-
-                <div className={styles.tableWrapper}>
-                    {tableData &&
-                        <Table
-                            {...tableData}
-                            paginationInfo={setPageInfo}
-                            rowSelectionInfo={setRowSelectionInfo}
-                            headingTranslationsKey={tableData.headingTranslationsKey ? tableData.headingTranslationsKey : 'tableHeadings'}
-                        />
-                    }
-                </div>
-
-            </Modal>
-        </>
-    )
-}
-

package/src/components/ModalWithTable/styles.module.scss

@@ -1,77 +0,0 @@
-.modal {
-    &.disabled {
-        pointer-events: none;
-        position: relative;
-        
-        &:after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(var(--color-white-rgb), .6);
-            z-index: 9999999;
-        }
-    }
-
-    :global {
-        .ant-modal-close {
-            width: auto;
-            color: var(--button-default-background);
-            
-            &:hover {
-                background-color: transparent;
-                color: var(--button-default-background-hover-color);
-            }
-        }
-
-        .ant-modal-content {
-            padding: 36px 24px;
-            display: flex;
-            justify-content: center;
-            flex-direction: column;
-            text-align: center;
-
-            @media(min-width: 742px) {
-                padding: 32px;
-            }
-        }
-
-        .ant-modal-body {
-            width: 100%;
-            padding-top: 24px;
-        }
-
-        .ant-modal-footer {
-            button {
-                margin-left: auto;
-            }
-        }
-    }
-
-    .closeButton {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: row;
-        gap: 8px;
-        color: inherit;
-        font-size: var(--font-size-body-3);
-        line-height: 100%;
-        font-weight: var(--font-weight-light);
-        text-transform: capitalize;
-        letter-spacing: .6px;
-        justify-self: flex-end;
-
-        > p {
-            padding: 0;
-            margin: 0;
-        }
-    }
-
-    .tagsWrapper {
-        max-width: 640px;
-        text-align: left;
-    }
-}

package/src/components/Navigation/Navigation.stories.tsx

@@ -1,21 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react-webpack5";
-import { Navigation, NavigationProps } from '.';
-
-export default {
-    title: 'Navigation',
-    component: Navigation,
-} as Meta;
-
-const Template: StoryFn<NavigationProps> = (args: any) => <Navigation {...args}></Navigation>;
-
-export const Primary = Template.bind({});
-Primary.args = {
-    backLink: true,
-    homeLink: true,
-    title: 'Gestão de Aplicações',
-    loginLink: true,
-    options: [
-        { label: 'Option 1', action: () => alert('Option 1 clicked') },
-        { label: 'Option 2', action: () => alert('Option 2 clicked') },
-        { label: 'Option 3', action: () => alert('Option 3 clicked') },
-      ],};

package/src/components/Navigation/index.tsx

@@ -1,91 +0,0 @@
-import styles from './styles.module.scss';
-import { Link } from '../Link';
-import { DropdownButton } from '../DropdownButton';
-import { ArrowLeftOutlined, HomeOutlined, LogoutOutlined, UserOutlined } from '@ant-design/icons';
-import { useTranslation } from 'react-i18next';
-import { useEffect, useState } from 'react';
-
-export interface NavigationProps {
-    backLink?: boolean;
-    title: string;
-    homeLink?: boolean;
-    loginLink?: boolean;
-    userName?: string;
-    loginOnClickFunction?: () => void;
-    backLinkOnClickFunction?: () => void;
-    homeOnClickFunction?: () => void;
-    options?: { label: string, action: () => void }[];
-}
-
-const PHONE_MAX_WIDTH = 768;
-
-export const Navigation = (props: NavigationProps) => {
-    const { userName, backLink, title, homeLink, loginOnClickFunction, loginLink, backLinkOnClickFunction, homeOnClickFunction } = props;
-    const { t } = useTranslation();
-
-    const [isPhone, setIsPhone] = useState(false);
-    const [showDropdown, setShowDropdown] = useState(false);
-
-    const checkMediaQuery = () => {
-        const isPhoneWidth = window.innerWidth < PHONE_MAX_WIDTH;
-        setIsPhone(isPhoneWidth);
-    }
-
-    useEffect(() => {
-        checkMediaQuery();
-        window.addEventListener('resize', checkMediaQuery);
-        return () => window.removeEventListener('resize', checkMediaQuery);
-    }, [isPhone]);
-
-    const getInitials = (name: string) => {
-        const words = name.split(' ');
-        let initials = '';
-
-        if (isPhone) {
-            if (words.length === 1) {
-                initials = words[0].charAt(0);
-            } else if (words.length > 1) {
-                initials = `${words[0].charAt(0)}${words[words.length - 1].charAt(0)}`;
-            }
-        } else {
-            if (words.length === 1) {
-                initials = words[0];
-            } else if (words.length > 1) {
-                initials = `${words[0]} ${words[words.length - 1]}`;
-            }
-        }
-
-        return isPhone ? initials.toUpperCase() : initials;
-    };
-
-    return (
-        <div className={styles.navigation}>
-            <div className={styles.columnLeft}>
-                {backLink && <Link icon={<ArrowLeftOutlined />} linkSecondary onClick={backLinkOnClickFunction}> {!isPhone && t('navigation.back')} </Link>}
-            </div>
-            <div className={styles.columnCenter}>
-                <h1 className={`${styles.title} ${styles.titleMobile}`}>{title}</h1>
-            </div>
-            <div className={`${userName ? styles.columnRightWithUser : styles.columnRightWithNoUser}`}>
-                {userName && (
-                    <DropdownButton
-                        options={props.options!}
-                        buttonText={props.userName!}
-                        customButton={(
-                            <Link
-                                icon={<UserOutlined />}
-                                linkSecondary
-                                iconAlignRight
-                                onClick={() => setShowDropdown(!showDropdown)}
-                            >
-                                {getInitials(userName)}
-                            </Link>
-                        )}
-                    />
-                )}
-                {homeLink && <Link icon={<HomeOutlined />} linkSecondary iconAlignRight onClick={homeOnClickFunction}> {!isPhone && t('navigation.home')} </Link>}
-                {loginLink && <Link onClick={loginOnClickFunction} icon={<LogoutOutlined />} linkSecondary iconAlignRight>{!isPhone && t('navigation.logout')}</Link>}
-            </div>
-        </div>
-    )
-};

package/src/components/Navigation/styles.module.scss

@@ -1,91 +0,0 @@
-.navigation {
-    display: grid !important;
-    grid-template-columns: repeat(3, 1fr) !important;
-    justify-items: center !important;
-    align-items: center !important;
-    height: 45px !important;
-    gap: 0 24px !important;
-    position: relative !important;
-    padding: 0px !important;
-
-    @media (max-width: 767px) {
-        .navigation {
-            grid-template-columns: 1fr;
-        }
-
-        .columnLeft,
-        .columnRight {
-            justify-self: center;
-        }
-
-        .title {
-            text-align: center;
-        }
-
-        .titleMobile {
-            text-align: center;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-    }
-
-    .title {
-        font-size: var(--font-size-body-3);
-        font-weight: var(--font-weight-semibold);
-        text-transform: uppercase;
-
-        @media(min-width: 768px) {
-            font-size: var(--font-size-body-4);
-        }
-    }
-
-    .columnCenter {
-        align-self: center;
-
-        @media(max-width: 768px) {
-            position: unset !important;
-            top: unset !important;
-            margin: unset !important;
-            left: unset !important;
-            right: unset !important;
-            text-align: unset !important;
-        }
-    }
-
-    .columnLeft {
-        justify-self: start;
-    }
-
-    .columnRightWithUser {
-        justify-self: end;
-
-        @media(max-width: 460px) {
-            width: 80px;
-        }
-
-        :global {
-            @media(max-width: 460px) {
-                :where(.css-dev-only-do-not-override-fpg3f5).ant-btn.ant-btn-icon-only {
-                    padding-inline-start: 40px;
-                }
-            }
-        }
-    }
-
-    .columnRightWithNoUser {
-        justify-self: end;
-
-        @media(max-width: 460px) {
-            width: 60px;
-        }
-
-        :global {
-            @media(max-width: 460px) {
-                :where(.css-dev-only-do-not-override-fpg3f5).ant-btn.ant-btn-icon-only {
-                    padding-inline-start: 22px;
-                }
-            }
-        }
-    }
-}

package/src/components/Notification/Notification.stories.tsx

@@ -1,32 +0,0 @@
-import { StoryFn } from "@storybook/react-webpack5";
-import { Notification, ErrorNotificationProps } from '.';
-
-export default {
-    title: 'Notification',
-    component: Notification,
-} as any;
-
-const Template: StoryFn<ErrorNotificationProps> = (args: any) => {
-
-    const { openNotificationWithIcon } = Notification({
-        message: args.message,
-        description: args.description,
-        showProgress: true
-    });
-
-    return (
-        <>
-            {openNotificationWithIcon('error')}
-        </>
-    )
-};
-export const Primary = Template.bind({});
-Primary.args = {
-    message: "Sucesso",
-    description: "Parabéns, conseguiste!",
-    showProgress: true,
-    pauseOnHover: true
-};
-
-
-

package/src/components/Notification/index.tsx

@@ -1,28 +0,0 @@
-import { notification } from 'antd';
-import { ArgsProps } from 'antd/lib/notification';
-
-export interface ErrorNotificationProps extends ArgsProps {
-  message: string;
-  description: string;
-  duration?: number;
-  showProgress?: boolean;
-  pauseOnHover?: boolean;
-}
-
-type NotificationType = 'success' | 'info' | 'warning' | 'error';
-
-export const Notification = ({ message, description, duration, showProgress, pauseOnHover }: ErrorNotificationProps) => {
-  const openNotificationWithIcon = (type: NotificationType) => {
-    notification[type]({
-      message: message,
-      description: description,
-      duration: duration || 5,
-      showProgress: showProgress || false,
-      pauseOnHover: pauseOnHover || false
-    });
-  };
-
-  return {
-    openNotificationWithIcon,
-  };
-};