@omniumretail/component-library 1.2.70 → 1.2.72

package/src/components/ExportTableData/index.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import * as XLSX from 'xlsx';
-import { FileExcelOutlined } from '@ant-design/icons';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
-
-interface TableExportButtonProps {
-    data: Record<string, any>[];
-    fileName: string;
-    customClass?: string;
-    columnTranslations: Record<string, string>;
-}
-
-export const TableExportButton = (props: TableExportButtonProps) => {
-    const exportToXLS = () => {
-        const wb = XLSX.utils.book_new();
-        const ws = XLSX.utils.json_to_sheet(props.data);
-
-        // Aplicar estilos às células do cabeçalho
-        const headerKeys = Object.keys(props.columnTranslations);
-        headerKeys.forEach((key, index) => {
-            const cellAddress = XLSX.utils.encode_cell({ c: index, r: 0 });
-            ws[cellAddress].v = props.columnTranslations[key]; // Substituir o valor pela tradução
-        });
-
-        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
-        XLSX.writeFile(wb, `${props.fileName}.xlsx`);
-    };
-
-    const linkClasses = classNames({ 
-        [`${props.customClass}`]: props.customClass,
-    }, [styles.iconStyle]);
-
-    return (
-        <FileExcelOutlined onClick={exportToXLS} className={linkClasses} />
-    );
-};

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

@@ -1,4 +0,0 @@
-
-.iconStyle {
-    font-size: 32px;
-}

package/src/components/Footer/Footer.stories.tsx

@@ -1,15 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react-webpack5";
-import { Footer, FooterProps } from '.';
-
-export default {
-    title: 'Footer',
-    component: Footer,
-} as Meta;
-
-const Template: StoryFn<FooterProps> = (args: any) => <Footer {...args}></Footer>;
-
-export const Primary = Template.bind({});
-Primary.args = {
-    storeName: 'Levis',
-    favIcon: true
-};

package/src/components/Footer/index.tsx

@@ -1,45 +0,0 @@
-import { useEffect, useState } from "react";
-import moment from 'moment';
-import styles from './styles.module.scss';
-import omniumLogo from '../../assets/images/omnium-retail-logo-white.png';
-import omniumIcon from '../../assets/images/omnium-retail_icon.png';
-
-export interface FooterProps {
-    storeName: string;
-    favIcon?: boolean;
-}
-
-export const Footer = (props: FooterProps) => {
-    const [date, setDate] = useState(moment());
-    const { storeName = 'Missing Store Name' } = props;
-
-    useEffect(() => {
-        const time = (function updateDate() {
-            const nextMinute = moment().add(1, 'minute');
-            return setTimeout(() => {
-                setDate(moment());
-                updateDate();
-            }, nextMinute.valueOf() - moment().valueOf());
-        }());
-
-        return () => clearTimeout(time);
-    });
-
-    return (
-        <div className={styles.footer}>
-            <div className={styles.content}>
-                <div className={styles.brand}>{storeName}</div>
-                <div className={styles.date}>{date.format('DD/MM/yyyy')}</div>
-                <div className={styles.time}>{date.format('HH:mm')}</div>
-            </div>
-
-            <div>
-                {props.favIcon && <img src={omniumIcon} className={styles.omniumLogoImg} alt="omnium icon" />}
-
-                <img src={omniumLogo} className={styles.omniumLogoImg} alt="omnium logo" />
-            </div>
-        </div>
-    );
-};
-
-

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

@@ -1,38 +0,0 @@
-.footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: nowrap;
-    gap: 0 16px;
-    background-color: var(--color-black);
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    padding: 12px 24px;
-    font-size: var(--font-size-body-1);
-    color: var(--color-grey-light);
-    height: 60px;
-    flex-direction: row;
-    text-align: left;
-    box-sizing: border-box;
-
-    .brand {
-        color: var(--grey2);
-        width: 100%;
-        margin-bottom: 4px;
-    }
-
-    .time {
-        margin-left: 8px;
-    }
-
-    .date,
-    .time {
-        display: inline-block;
-    }
-
-    .omniumLogoImg {
-        height: 25px;
-        align-self: flex-end;
-    }
-}

package/src/components/Footer2/Footer.stories.tsx

@@ -1,184 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react-webpack5";
-import { Footer2, Footer2Props, ActionType } from '.';
-import {
-    SettingOutlined,
-    FileTextOutlined,
-    TableOutlined,
-    FilePdfOutlined,
-    PrinterOutlined,
-    EyeOutlined,
-    UserOutlined,
-    FileOutlined,
-    BarChartOutlined,
-} from '@ant-design/icons';
-
-export default {
-    title: 'Footer2',
-    component: Footer2,
-} as Meta;
-
-const Template: StoryFn<Footer2Props> = (args: any) => <Footer2 {...args}></Footer2>;
-
-const notifications = [
-    {
-        "Id": "662C390B-A38F-45AB-B97C-2D00F0A8ACAD",
-        "Title": "Creation of an Evaluation Cycle",
-        "Description": "A new evaluation cycle was created. You must answer it.",
-        "RedirectURL": "https://www.google.pt",
-        "Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
-        "ExpirationDate": 1736899200,
-        "Criticality": {
-            "Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
-            "Name": "High",
-            "ColorHex": "#E05151"
-        },
-        "IsRead": true
-    },
-    {
-        "Id": "0AF18720-1C94-48CD-8DF3-D254077E8363",
-        "Title": "Creation of an Evaluation Cycle",
-        "Description": "A new evaluation cycle was created. You must answer it.",
-        "RedirectURL": "https://www.google.pt",
-        "Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
-        "ExpirationDate": 1736899200,
-        "Criticality": {
-            "Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
-            "Name": "High",
-            "ColorHex": "#E05151"
-        },
-        "IsRead": true
-    },
-];
-
-const customActions = [
-    {
-        key: 'definicoes',
-        label: 'Definições',
-        icon: <SettingOutlined />,
-        onClick: () => console.log('Definições'),
-        disabled: true
-    },
-    {
-        key: 'relatorios',
-        label: 'Relatórios Relatórios',
-        icon: <BarChartOutlined />,
-        subItems: [
-            {
-                key: 'relatorio-mensal',
-                label: 'Relatório Mensal',
-                icon: <FileTextOutlined />,
-                onClick: () => console.log('Relatório Mensal')
-            },
-            {
-                key: 'relatorio-anual',
-                label: 'Relatório Anual',
-                icon: <FileTextOutlined />,
-                onClick: () => console.log('Relatório Anual')
-            }
-        ]
-    }
-];
-
-// Ações padrão com submenus
-const handleCreate = () => console.log('Criar novo item');
-const handleEdit = () => console.log('Editar item');
-const handleDelete = () => console.log('Excluir item');
-const handleExport = () => console.log('Exportar item');
-
-const actions2 = [
-    { 
-        type: ActionType.CREATE, 
-        subItems: [
-            {
-                key: 'create-user',
-                label: 'Criar Usuário',
-                icon: <UserOutlined />,
-                onClick: () => console.log('Criar Usuário')
-            },
-            {
-                key: 'create-document',
-                label: 'Criar Documento',
-                icon: <FileOutlined />,
-                onClick: () => console.log('Criar Documento')
-            }
-        ]
-    },
-    { 
-        type: ActionType.EDIT, 
-        onClick: handleEdit, 
-        disabled: true 
-    },
-    { 
-        type: ActionType.DELETE, 
-        onClick: handleDelete 
-    },
-    { 
-        type: ActionType.EXPORT,
-        subItems: [
-            {
-                key: 'export-pdf',
-                label: 'Exportar PDF',
-                icon: <FilePdfOutlined />,
-                onClick: () => console.log('Exportar PDF')
-            },
-            {
-                key: 'export-excel',
-                label: 'Exportar Excel',
-                icon: <TableOutlined />,
-                onClick: () => console.log('Exportar Excel')
-            }
-        ]
-    },
-    {
-        type: ActionType.PRINT,
-        subItems: [
-            {
-                key: 'print-preview',
-                label: 'Visualizar',
-                icon: <EyeOutlined />,
-                onClick: () => console.log('Visualizar Impressão')
-            },
-            {
-                key: 'print-direct',
-                label: 'Imprimir',
-                icon: <PrinterOutlined />,
-                onClick: () => console.log('Imprimir Diretamente')
-            }
-        ]
-    }
-];
-
-export const Primary = Template.bind({});
-Primary.args = {
-    notifications: notifications,
-    customActions: customActions,
-    actions: actions2,
-    disableBackButton: true,
-    companyName: 'a2ai',
-    footerName: 'Minha Aplicação',
-    onBackClick: () => console.log('Voltar'),
-    onFilterChange: (filter: any) => console.log('Filtro:', filter),
-    onNotificationClick: (id: any, url: any) => console.log('Notificação:', id, url),
-    handleMarkAllAsRead: () => console.log('Marcar todas como lidas'),
-};
-
-export const WithoutSubmenus = Template.bind({});
-WithoutSubmenus.args = {
-    notifications: notifications,
-    customActions: [
-        {
-            key: 'definicoes',
-            label: 'Definições',
-            icon: <SettingOutlined />,
-            onClick: () => console.log('Definições')
-        }
-    ],
-    actions: [
-        { type: ActionType.CREATE, onClick: handleCreate },
-        { type: ActionType.EDIT, onClick: handleEdit },
-        { type: ActionType.DELETE, onClick: handleDelete }
-    ],
-    disableBackButton: false,
-    companyName: 'omnium',
-    footerName: 'Sem Submenus',
-};

package/src/components/Footer2/index.tsx

@@ -1,322 +0,0 @@
-import { BellNotifications } from '../BellNotifications';
-import styles from './styles.module.scss';
-import {
-    ArrowLeftOutlined,
-    PlusOutlined,
-    DeleteOutlined,
-    ReloadOutlined,
-    EditOutlined,
-    ExportOutlined,
-    PrinterOutlined,
-    RightOutlined,
-    LeftCircleOutlined
-} from '@ant-design/icons';
-import moment from 'moment';
-import React, { useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { getCompanyLogos } from '../../constants/logoCompanyHelper';
-
-interface SubAction {
-    key: string;
-    label: string;
-    icon: React.ReactNode;
-    onClick: () => void;
-    disabled?: boolean;
-}
-
-interface Action {
-    key: string;
-    label: string;
-    icon: React.ReactNode;
-    onClick?: () => void;
-    disabled?: boolean;
-    subItems?: SubAction[];
-}
-
-interface Criticality {
-    Id: string;
-    Name: string;
-    ColorHex: string;
-}
-
-interface BellNotification {
-    Id: string;
-    Title: string;
-    Description: string;
-    RedirectURL: string;
-    Icon: string;
-    ExpirationDate: number;
-    Criticality: Criticality;
-    IsRead: boolean;
-}
-
-// Definindo ações padrão disponíveis
-export enum ActionType {
-    DELETE = 'delete',
-    UPDATE = 'update',
-    CREATE = 'create',
-    EDIT = 'edit',
-    EXPORT = 'export',
-    PRINT = 'print'
-}
-
-export interface ActionConfig {
-    type: ActionType | string;
-    onClick?: () => void;
-    disabled?: boolean;
-    subItems?: SubAction[];
-}
-
-export interface Footer2Props {
-    onBackClick?: () => void;
-    notifications: BellNotification[];
-    onFilterChange: (filter: 'all' | 'unread') => void;
-    onNotificationClick: (id: string, url: string) => void;
-    handleMarkAllAsRead: () => void;
-    customActions?: Action[];
-    actions?: ActionConfig[];
-    footerName: string;
-    disableBackButton?: boolean;
-    disableNotifications?: boolean;
-    companyName?: string;
-}
-
-export const Footer2 = (props: Footer2Props) => {
-    const {
-        onBackClick,
-        notifications,
-        onFilterChange,
-        onNotificationClick,
-        handleMarkAllAsRead,
-        customActions = [],
-        actions = [],
-        footerName = '',
-        disableBackButton = false,
-        disableNotifications = false,
-        companyName = 'omnium',
-    } = props;
-
-    const [date, setDate] = useState(moment());
-    const [isMenuOpen, setIsMenuOpen] = useState(false);
-    const [currentSubmenu, setCurrentSubmenu] = useState<string | null>(null);
-    const menuRef = useRef<HTMLDivElement>(null);
-    const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
-    const { t } = useTranslation();
-    const companyLogos = getCompanyLogos(companyName);
-
-    // Mapeamento de tipos de ações para seus ícones e labels padrão
-    const defaultActionProps: Record<string, { icon: React.ReactNode; label: string }> = {
-        [ActionType.DELETE]: { icon: <DeleteOutlined />, label: t('navigation.delete') },
-        [ActionType.UPDATE]: { icon: <ReloadOutlined />, label: t('navigation.update') },
-        [ActionType.CREATE]: { icon: <PlusOutlined />, label: t('navigation.create') },
-        [ActionType.EDIT]: { icon: <EditOutlined />, label: t('navigation.edit') },
-        [ActionType.EXPORT]: { icon: <ExportOutlined />, label: t('navigation.export') },
-        [ActionType.PRINT]: { icon: <PrinterOutlined />, label: t('navigation.print') },
-    };
-
-    useEffect(() => {
-        const time = (function updateDate() {
-            const nextMinute = moment().add(1, 'minute');
-            return setTimeout(() => {
-                setDate(moment());
-                updateDate();
-            }, nextMinute.valueOf() - moment().valueOf());
-        }());
-
-        return () => clearTimeout(time);
-    });
-
-    useEffect(() => {
-        const handleResize = () => {
-            setIsMobile(window.innerWidth < 768);
-        };
-
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
-
-    const getAllActions = (): Action[] => {
-        // Converter ActionConfig para Action
-        const standardActions = actions.map(actionConfig => {
-            const actionType = actionConfig.type;
-            const defaultProps = defaultActionProps[actionType] || {
-                label: String(actionType),
-                icon: <PlusOutlined />
-            };
-
-            return {
-                key: actionType,
-                label: defaultProps.label,
-                icon: defaultProps.icon,
-                onClick: actionConfig.onClick,
-                disabled: actionConfig.disabled || false,
-                subItems: actionConfig.subItems
-            };
-        });
-
-        // Combinar com ações personalizadas
-        const combinedActions = [...standardActions, ...customActions];
-
-        // Ordenar por label
-        return combinedActions.sort((a, b) => a.label.localeCompare(b.label));
-    };
-
-    const allActions = getAllActions();
-
-    const toggleMenu = () => {
-        if (isMenuOpen) {
-            setCurrentSubmenu(null);
-        }
-        setIsMenuOpen(!isMenuOpen);
-    };
-
-    const handleActionClick = (action: Action) => {
-        if (action.subItems && action.subItems.length > 0) {
-            setCurrentSubmenu(action.key);
-        } else {
-            if (action.onClick && !action.disabled) {
-                action.onClick();
-                setIsMenuOpen(false);
-                setCurrentSubmenu(null);
-            }
-        }
-    };
-
-    const handleBackToMain = () => {
-        setCurrentSubmenu(null);
-    };
-
-    const handleSubActionClick = (subAction: SubAction) => {
-        if (subAction.onClick && !subAction.disabled) {
-            subAction.onClick();
-            setIsMenuOpen(false);
-            setCurrentSubmenu(null);
-        }
-    };
-
-    // Handle click outside to close menu
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (
-                isMenuOpen &&
-                menuRef.current &&
-                !menuRef.current.contains(event.target as Node) &&
-                !(event.target as Element).closest(`.${styles.addButton}`)
-            ) {
-                setIsMenuOpen(false);
-                setCurrentSubmenu(null);
-            }
-        };
-
-        document.addEventListener('mousedown', handleClickOutside);
-
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [isMenuOpen]);
-
-    const plusIconClass = isMenuOpen ? `${styles.addIcon} ${styles.rotateIcon}` : styles.addIcon;
-
-    const getCurrentActions = () => {
-        if (currentSubmenu) {
-            const parentAction = allActions.find(action => action.key === currentSubmenu);
-            return parentAction?.subItems || [];
-        }
-        return allActions;
-    };
-
-    const currentActions = getCurrentActions();
-
-    return (
-        <div className={`${styles.footer}`}>
-            {!isMobile &&
-                <div className={styles.content}>
-                    <div className={styles.brand}>{footerName}</div>
-                    <div className={styles.date}>{date.format('DD/MM/yyyy')}</div>
-                    <div className={styles.time}>{date.format('HH:mm')}</div>
-                </div>
-            }
-
-            <div className={styles.navigation}>
-                {onBackClick && (
-                    <div
-                        className={`${styles.navItem} ${disableBackButton ? styles.disabled : ''}`}
-                        onClick={disableBackButton ? undefined : onBackClick}
-                    >
-                        <ArrowLeftOutlined className={styles.navIcon} />
-                        <span className={styles.navText}>{t('navigation.back')}</span>
-                    </div>
-                )}
-
-                <div className={styles.addButtonContainer}>
-                    <div className={styles.addButton} onClick={toggleMenu}>
-                        <PlusOutlined className={plusIconClass} />
-                    </div>
-
-                    {isMenuOpen && (
-                        <div className={`${styles.circularMenu}`} ref={menuRef}>
-                            {currentSubmenu && (
-
-                                <div
-                                    className={styles.backButton}
-                                    onClick={handleBackToMain}
-                                >
-                                    <LeftCircleOutlined className={styles.backIcon} />
-                                </div>
-                            )}
-
-                            {currentActions.map((action, index) => (
-                                <div
-                                    key={action.key}
-                                    className={`${styles.circleMenuItem} ${action.disabled ? styles.disabled : ''}`}
-                                    onClick={() => {
-                                        if (currentSubmenu) {
-                                            handleSubActionClick(action as SubAction);
-                                        } else {
-                                            handleActionClick(action as Action);
-                                        }
-                                    }}
-                                >
-                                    <div className={styles.circleMenuIcon}>
-                                        {action.icon}
-                                    </div>
-
-                                    <div className={styles.circleMenuLabel}>
-                                        {action.label}
-                                    </div>
-
-                                    {!currentSubmenu && (action as Action).subItems && (action as Action).subItems!.length > 0 && (
-                                        <div className={styles.submenuIndicator}>
-                                            <RightOutlined />
-                                        </div>
-                                    )}
-                                </div>
-                            ))}
-                        </div>
-                    )}
-                </div>
-
-                {!disableNotifications && (
-                    <div className={styles.navItem}>
-                        <BellNotifications
-                            notifications={notifications}
-                            onFilterChange={onFilterChange}
-                            onNotificationClick={onNotificationClick}
-                            handleMarkAllAsRead={handleMarkAllAsRead}
-                        />
-
-                        <span className={styles.navText}>{t('navigation.notifications')}</span>
-                    </div>
-                )}
-            </div>
-
-            {!isMobile &&
-                <div>
-                    <img src={companyLogos.white} alt={companyLogos.alt} className={companyName === 'omnium' ? styles.omniumLogoImg : styles.a2aiLogoImg} />
-                </div>
-            }
-        </div>
-    );
-};