@omniumretail/component-library 1.2.70 → 1.2.72

package/src/components/Link/index.tsx

@@ -1,21 +0,0 @@
-import { Button as AntButton, ButtonProps } from 'antd';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
-
-export interface CustomLinkProps extends ButtonProps {
-    iconAlignRight?: boolean;
-    linkSecondary?: boolean;
-    customClass?: string;
-}
-
-export const Link = ({customClass, iconAlignRight, linkSecondary, ...props}: CustomLinkProps) => {
-    const linkClasses = classNames({ 
-        [styles.iconAlignRight]: iconAlignRight,
-        [styles.linkSecondary]: linkSecondary,
-        [`${customClass}`]: customClass,
-    }, [styles.link]);
-
-    return (
-        <AntButton { ...props } className={ linkClasses } type={'link'} />
-    );
-};

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

@@ -1,24 +0,0 @@
-.link {
-    display: inline-flex;
-    text-decoration: none;
-    height: auto;
-
-    color: var(--color-black);
-    font-size: var(--font-size-body-3);
-    line-height: 100%;
-    font-weight: 300;
-    font-style: var(--font-style-italic);
-}
-
-.linkSecondary {
-    color: var(--color-orange);
-    font-style: var(--font-style-normal);
-} 
-
-.iconAlignRight {
-    span:nth-child(2) {
-        margin-inline-end: 8px;
-        margin-inline-start: 0;
-        order: -1;
-    }
-}

package/src/components/Menu/Menu.stories.tsx

@@ -1,178 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react-webpack5";
-import { Menu } from '.';
-import { MenuProps } from 'antd';
-import { getItem } from './helpers/codeMutation';
-
-export default {
-    title: 'Menu',
-    component: Menu,
-} as Meta;
-
-const Template: StoryFn<MenuProps> = (args: any) => {
-    const data = [
-        {
-            "Year": 2023,
-            "EvaluationCycles": [
-                {
-                    "Id": "D5A77A3B-1163-4590-9C98-2E6D62442F62",
-                    "Type": "Permanent",
-                    "Name": "EV1",
-                    "Year": 2023,
-                    "StartDate": "2023-03-01T00:00:00Z",
-                    "EndDate": "2023-05-31T23:00:00Z",
-                    "Users": [
-                        {
-                            "UserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
-                            "UserAnswer": null,
-                            "UserScore": null,
-                            "SupervisorId": null,
-                            "SupervisorAnswer": null,
-                            "SupervisorScore": null
-                        },
-                        {
-                            "UserId": "9D361E92-A748-4E4A-BC5E-0134CE62328E",
-                            "UserAnswer": "982FF376-56AD-4E3F-B0D0-5BD4282A7F78",
-                            "UserScore": 3.333,
-                            "SupervisorId": null,
-                            "SupervisorAnswer": null,
-                            "SupervisorScore": null
-                        },
-                        {
-                            "UserId": "594A4DD5-12B1-4ED0-B00C-EDF729B85C57",
-                            "UserAnswer": null,
-                            "UserScore": null,
-                            "SupervisorId": null,
-                            "SupervisorAnswer": null,
-                            "SupervisorScore": null
-                        }
-                    ],
-                    "QuestionnaireId": "4C15A0A0-7DDF-4952-810C-B46105807CB7",
-                    "State": "Started",
-                    "Notifications": [],
-                    "NotificationAgenda": null,
-                    "Status": "A",
-                    "IsOnlyForUsers": false,
-                    "CreateDate": "2023-02-27T10:50:41.737Z",
-                    "UpdateDate": "2023-02-27T10:52:50.661Z",
-                    "CreateUserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
-                    "UpdateUserId": null,
-                    "InitiatDate": "2023-02-27T10:51:00Z",
-                    "CancelDate": "0001-01-01T00:00:00Z"
-                },
-                {
-                    "Id": "42A6EFDD-6D74-4905-94AE-5B5588967BE6",
-                    "Type": "Permanent",
-                    "Name": "EV1",
-                    "Year": 2023,
-                    "StartDate": "2023-03-01T00:00:00Z",
-                    "EndDate": "2023-05-31T23:00:00Z",
-                    "Users": [],
-                    "QuestionnaireId": "4C15A0A0-7DDF-4952-810C-B46105807CB7",
-                    "State": "Draft",
-                    "Notifications": [],
-                    "NotificationAgenda": null,
-                    "Status": "A",
-                    "IsOnlyForUsers": false,
-                    "CreateDate": "2023-02-27T14:52:16.523Z",
-                    "UpdateDate": "2023-02-27T14:53:04.987Z",
-                    "CreateUserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
-                    "UpdateUserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
-                    "InitiatDate": "0001-01-01T00:00:00Z",
-                    "CancelDate": "0001-01-01T00:00:00Z"
-                }
-            ]
-        },
-        {
-            "Year": 2024,
-            "EvaluationCycles": [
-                {
-                    "Id": "D5A77A3B-1163-4590-9C98-2E6D62442F62",
-                    "Type": "Permanent",
-                    "Name": "EV2",
-                    "Year": 2024,
-                    "StartDate": "2023-03-01T00:00:00Z",
-                    "EndDate": "2023-05-31T23:00:00Z",
-                    "Users": [
-                        {
-                            "UserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
-                            "UserAnswer": null,
-                            "UserScore": null,
-                            "SupervisorId": null,
-                            "SupervisorAnswer": null,
-                            "SupervisorScore": null
-                        },
-                        {
-                            "UserId": "9D361E92-A748-4E4A-BC5E-0134CE62328E",
-                            "UserAnswer": "982FF376-56AD-4E3F-B0D0-5BD4282A7F78",
-                            "UserScore": 3.333,
-                            "SupervisorId": null,
-                            "SupervisorAnswer": null,
-                            "SupervisorScore": null
-                        },
-                        {
-                            "UserId": "594A4DD5-12B1-4ED0-B00C-EDF729B85C57",
-                            "UserAnswer": null,
-                            "UserScore": null,
-                            "SupervisorId": null,
-                            "SupervisorAnswer": null,
-                            "SupervisorScore": null
-                        }
-                    ],
-                    "QuestionnaireId": "4C15A0A0-7DDF-4952-810C-B46105807CB7",
-                    "State": "Started",
-                    "Notifications": [],
-                    "NotificationAgenda": null,
-                    "Status": "A",
-                    "IsOnlyForUsers": false,
-                    "CreateDate": "2023-02-27T10:50:41.737Z",
-                    "UpdateDate": "2023-02-27T10:52:50.661Z",
-                    "CreateUserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
-                    "UpdateUserId": null,
-                    "InitiatDate": "2023-02-27T10:51:00Z",
-                    "CancelDate": "0001-01-01T00:00:00Z"
-                },
-                {
-                    "Id": "42A6EFDD-6D74-4905-94AE-5B5588967BE6",
-                    "Type": "Permanent",
-                    "Name": "EV2",
-                    "Year": 2024,
-                    "StartDate": "2023-03-01T00:00:00Z",
-                    "EndDate": "2023-05-31T23:00:00Z",
-                    "Users": [],
-                    "QuestionnaireId": "4C15A0A0-7DDF-4952-810C-B46105807CB7",
-                    "State": "Draft",
-                    "Notifications": [],
-                    "NotificationAgenda": null,
-                    "Status": "A",
-                    "IsOnlyForUsers": false,
-                    "CreateDate": "2023-02-27T14:52:16.523Z",
-                    "UpdateDate": "2023-02-27T14:53:04.987Z",
-                    "CreateUserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
-                    "UpdateUserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
-                    "InitiatDate": "0001-01-01T00:00:00Z",
-                    "CancelDate": "0001-01-01T00:00:00Z"
-                }
-            ]
-        }
-    ];
-
-    const items = data.map((el: any, index: any) => {
-        return (
-            getItem(
-                el.Year, 
-                index, 
-                <></>,  
-                el.EvaluationCycles?.map((evCycle: any, subIndex: any) => {
-                    return getItem(evCycle.Name, `${index}-${subIndex}`);
-                })
-            )
-        )
-    });
-
-
-    return <Menu {...args} items={items}></Menu>;
-} 
-
-export const Primary = Template.bind({});
-Primary.args = {
-};

package/src/components/Menu/helpers/codeMutation.tsx

@@ -1,19 +0,0 @@
-import type { MenuProps } from 'antd';
-
-export type MenuItem = Required<MenuProps>['items'][number];
-
-export function getItem(
-    label: React.ReactNode,
-    key: React.Key,
-    icon?: React.ReactNode,
-    children?: MenuItem[],
-    type?: 'group',
-): MenuItem {
-    return {
-        key,
-        icon,
-        children,
-        label,
-        type,
-    } as MenuItem;
-}

package/src/components/Menu/index.tsx

@@ -1,24 +0,0 @@
-import styles from './styles.module.scss';
-import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
-import type { MenuProps } from 'antd';
-import { Menu as MenuAntd} from 'antd';
-
-export const Menu = (props: MenuProps) => {
-    const { 
-        items,
-        mode
-    } = props;
-
-    const onClick: MenuProps['onClick'] = (e) => {
-        // console.log('click ', e);
-    };
-
-    return (
-        <MenuAntd
-            onClick={onClick}
-            mode={mode || "inline"}
-            items={items}
-            expandIcon={({ isOpen }) => (isOpen ? <MinusOutlined /> : <PlusOutlined />)}
-        />
-    );
-};

package/src/components/MobileTable/MobileTable.stories.tsx

@@ -1,27 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react-webpack5";
-import { useEffect, useState } from "react";
-import { MobileTable, MobileTableProps } from '.';
-
-export default {
-    title: 'MobileTable',
-    component: MobileTable,
-} as Meta;
-
-const Template: StoryFn<MobileTableProps> = (args: any) => {
-    const [modalData, setModalData] = useState<any>({});
-    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-
-
-
-    
-    return (
-    <>
-        <MobileTable {...args}></MobileTable>
-    </>
-    )
-}
-
-export const Primary = Template.bind({});
-Primary.args = {
-
-};

package/src/components/MobileTable/index.tsx

@@ -1,102 +0,0 @@
-import styles from './styles.module.scss';
-import { Descriptions, Dropdown, Menu, Modal } from 'antd';
-import { useTranslation } from 'react-i18next';
-import {
-    LeftCircleOutlined,
-    RightCircleOutlined,
-} from "@ant-design/icons";
-import { Dispatch, SetStateAction } from 'react';
-import React from 'react';
-import { Button } from '../Button';
-
-interface Action {
-    key: string;
-    label: string;
-    onClick: () => void;
-}
-
-export interface MobileTableProps {
-    data: Record<string, any>;
-    translation: string;
-    modalVisible: boolean;
-    setModalVisible: Dispatch<SetStateAction<boolean>>;
-    title: string;
-    hasArrows?: boolean;
-    actions?: Action[];
-    handlePrev?: () => void;
-    handleNext?: () => void;
-    hiddenColumns?: string[];
-    modalTableData?: any;
-    currentIndex?: number;
-}
-
-export const MobileTable = (
-    {
-        data, title, translation, modalVisible, setModalVisible, actions = [], hiddenColumns = [], hasArrows = true, handleNext, handlePrev, modalTableData, currentIndex
-    }: MobileTableProps) => {
-
-    const { t } = useTranslation();
-
-    const menu = (
-        <Menu>
-            {actions?.map((action, index) => (
-                <React.Fragment key={action.key}>
-                    <Menu.Item key={action.key} onClick={action.onClick}>
-                        {action.label}
-                    </Menu.Item>
-
-                    {index < actions.length - 1 && <Menu.Divider />}
-                </React.Fragment>
-            )) || []}
-        </Menu>
-    );
-
-    return (
-        <Modal
-            title={title}
-            open={modalVisible}
-            onCancel={() => setModalVisible(false)}
-            className={styles.fullScreenModal}
-            wrapClassName={styles.wrapModal}
-            centered
-            footer={(
-                <div className={`${styles.footer} ${hasArrows ? styles.center : ""}`}>
-                    {hasArrows &&
-                        <LeftCircleOutlined
-                            className={`${styles.arrowIcons} ${currentIndex === 0 ? styles.disabledIcon : ""}`}
-                            onClick={handlePrev}
-                            disabled={currentIndex === 0}
-                        />
-                    }
-
-                    {actions?.length > 0 &&
-                        <Dropdown overlay={menu}>
-                            <Button>{t("tableHeadings.action")}</Button>
-                        </Dropdown>
-                    }
-
-
-                    {hasArrows &&
-                        <RightCircleOutlined
-                            className={`${styles.arrowIcons} ${currentIndex === modalTableData?.length! - 1 ? styles.disabledIcon : ""}`}
-                            onClick={handleNext}
-                            disabled={currentIndex === modalTableData?.length! - 1}
-                        />
-                    }
-                </div>
-            )}
-        >
-            <div className={styles.details}>
-                <Descriptions bordered column={{ xs: 1, sm: 1, md: 1 }}>
-                    {Object.entries(data)
-                        .filter(([key]) => !hiddenColumns.includes(key))
-                        .map(([key, value]) => (
-                            <Descriptions.Item key={key} label={t(`${translation}.${key}`, key)}>
-                                {Array.isArray(value) ? value.join(", ") : value ?? "-"}
-                            </Descriptions.Item>
-                        ))}
-                </Descriptions>
-            </div>
-        </Modal>
-    );
-};

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

@@ -1,75 +0,0 @@
-.details {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    margin: 16px 0;
-    box-sizing: border-box;
-
-    :global {
-        .ant-descriptions {
-            width: calc(100vw - 24px);
-        }
-
-        .ant-descriptions-item-label {
-            max-width: 140px !important;
-            padding: 8px 16px !important;
-            color: var(--color-blue) !important;
-            font-weight: 700 !important;
-            font-size: 12px !important;
-        }
-
-        .ant-descriptions-item-content {
-            padding: 8px 16px !important;
-            font-size: 12px !important;
-        }
-    }
-}
-
-.fullScreenModal {
-    width: 100vw !important;
-    max-width: 100vw !important;
-    padding: 0px 12px;
-}
-
-.wrapModal {
-    overflow: hidden !important;
-
-    :global {
-        .ant-modal .ant-modal-body {
-            overflow-y: auto;
-            overflow-x: hidden;
-            max-height: 80vh;
-        }
-
-        .ant-modal .ant-modal-content {
-            padding: 20px 12px !important;
-        }
-
-        .ant-modal-header {
-            text-align: center !important;
-        }
-
-        .ant-modal-close {
-            color: var(--button-default-background-hover-color);
-        }
-    }
-}
-
-.footer {
-    display: flex;
-    justify-content: center;
-
-    &.center {
-        justify-content: space-between;
-    }
-}
-
-.arrowIcons {
-    color: var(--button-default-background);
-    font-size: 26px;
-}
-
-.disabledIcon {
-    color: #c7cac9;
-    pointer-events: none;
-}

package/src/components/ModalConfirmation/ModalConfirmation.stories.tsx

@@ -1,40 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react-webpack5";
-import { useEffect, useState } from "react";
-import { ModalConfirmation, ModalConfirmationProps } from '.';
-import { ModalStatus } from './ModalStatusList';
-
-export default {
-    title: 'ModalConfirmation',
-    component: ModalConfirmation,
-} as Meta;
-
-const Template: StoryFn<ModalConfirmationProps> = (args: any) => {
-    const [modalData, setModalData] = useState<any>({});
-    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-
-    console.log(modalData);
-    
-    const onClickMe = () => {
-        setIsModalOpen(true);
-    }
-
-    useEffect(() => {
-        setIsModalOpen(modalData.status === ModalStatus.OPEN);
-    }, [modalData])
-
-    
-    return (
-    <>
-        <button onClick={() => onClickMe()}> Button </button>
-        <ModalConfirmation {...args} isOpen={isModalOpen} modalData={setModalData}></ModalConfirmation>
-    </>
-    )
-}
-
-export const Primary = Template.bind({});
-Primary.args = {
-    closeText: 'cancelar',
-    title: 'Tem a certeza que deseja alterar o tipo de ciclo?',
-    description: 'Ao alterar, todos os dados inseridos serão eliminados.',
-    buttonText: 'Alterar',
-};

package/src/components/ModalConfirmation/ModalStatusList.tsx

@@ -1,5 +0,0 @@
-export const ModalStatus = {
-    CANCELED: "CANCELED",
-    OPEN: "OPEN",
-    REQUESTED_CHANGES: "REQUESTED_CHANGES",
-}

package/src/components/ModalConfirmation/index.tsx

@@ -1,71 +0,0 @@
-import { Button } from '../Button';
-import { Modal } from 'antd';
-import { useEffect, useState } from 'react';
-import { CloseOutlined } from '@ant-design/icons';
-import styles from './styles.module.scss';
-import { ModalStatus } from './ModalStatusList';
-
-export interface ModalConfirmationProps {
-    closeText: string;
-    title: string;
-    description: string;
-    buttonText: string;
-    isOpen: boolean;
-    modalData?: any;
-}
-
-export const ModalConfirmation = (props: ModalConfirmationProps) => {
-    const {
-        closeText,
-        title,
-        description,
-        buttonText,
-        isOpen = false,
-        modalData,
-    } = props;
-    
-    const [status, setStatus] = useState<string>('');
-    
-    useEffect(()=> {
-        isOpen &&
-        setStatus(ModalStatus.OPEN);
-    }, [isOpen])
-
-
-    const closeAndChangeStatus = (status: string) => {
-        setStatus(status);
-    }
-
-    useEffect(() => {
-        modalData({
-            "status": status,
-        });
-    }, [status]);
-
-    return (
-        <>
-            <Modal
-                destroyOnClose={true}
-                closeIcon={
-                    <div className={styles.closeButton}>
-                        <p>{closeText}</p><CloseOutlined />
-                    </div>
-                } 
-                open={status === ModalStatus.OPEN}
-                onCancel={() => closeAndChangeStatus(ModalStatus.CANCELED)}
-                centered
-                width={'742px'}
-                footer={[
-                    <Button key="submit" onClick={() => closeAndChangeStatus(ModalStatus.REQUESTED_CHANGES)}>
-                        {buttonText}
-                    </Button>
-                ]}
-                className={styles.modal}
-                maskClosable={false}
-            >
-                <h2 className={styles.title}>{title}</h2>
-                <p className={styles.description}>{description}</p>
-            </Modal>
-        </>
-    )
-}

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

@@ -1,62 +0,0 @@
-.modal {
-    :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;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-            text-align: center;
-
-            @media(min-width: 742px) {
-                padding: 64px;
-            }
-        }
-    }
-
-    .ant-modal-close {
-        &:hover {
-            .closeButton {
-                color: red;
-            }
-        }
-    }
-
-    .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;
-    }
-
-    .title {
-        color: var(--color-blue);
-        font-weight: var(--font-weight-semibold);
-        font-size: var(--font-size-body-6);
-        line-height: 100%;
-    }
-
-    .description {
-        color: var(--color-black);
-        font-size: var(--font-size-body-4);
-        margin: 12px 0 24px 0;
-        padding: 0;
-    }
-}