@omniumretail/component-library 1.2.70 → 1.2.72

package/src/components/ResponsiveTable/index.tsx

@@ -1,389 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Space, TableProps, Select, Dropdown } from 'antd';
-import { Table as AntdTable } from 'antd';
-import type { ColumnsType } from 'antd/es/table/interface';
-import styles from './styles.module.scss';
-import { useTranslation } from 'react-i18next';
-import { MoreOutlined } from '@ant-design/icons';
-import classnames from 'classnames';
-import { Button } from '../Button';
-
-export interface FilterTableOptions {
-    value: string;
-    label: string;
-    direction: string;
-}
-
-export interface TableActions {
-    key: string;
-    label: string;
-}
-
-export enum sortByOption {
-    asc = 'asc',
-    desc = 'desc',
-}
-
-export interface ResponsiveTableCustomProps extends TableProps<any> {
-    fieldsToSort?: any[],
-    selectPlaceholder?: string,
-    onSort?: (field: any, sortByOption: any) => void;
-    sortInfo?: any;
-    paginationInfo?: any;
-    headingTranslationsKey?: string;
-    actionsArray?: any;
-    rowSelectionInfo?: any;
-    rowKeyValue?: string;
-    hiddenColumns?: string[];
-    rowSelection?: any;
-    onSelectAllButtonClick?: () => void;
-    AllItemsShowing?: boolean;
-    selectAllStatus?: any;
-    isTableDataRefreshed?: any;
-    tableLoading?: any;
-    tableMaxHeight?: any;
-    columnsSortChange?: any;
-    sortByColumns?: boolean;
-    columnsToSort?: string[];
-    fixedColumns?: { dataIndex: string; side: 'left' | 'right' }[];
-    customColumnWidths?: { columnName: string; width: string }[];
-    buttonActionName?: string;
-    buttonActionLabel?: (record: any) => string | null;
-    buttonActionMethod?: () => void;
-    buttonActionStyle?: string | ((record: any) => any);
-    cleanRowSelection?: boolean;
-    getRowActions?: (record: any) => any;
-    customSelectAllButton?: string;
-    buttonActionIcon?: (record: any) => any | null;
-}
-
-export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
-    const { t } = useTranslation();
-
-    const {
-        dataSource = undefined,
-        fieldsToSort,
-        selectPlaceholder = 'Sort By',
-        onSort,
-        headingTranslationsKey,
-        actionsArray: items,
-        rowKeyValue,
-        hiddenColumns,
-        rowSelection,
-        onSelectAllButtonClick,
-        AllItemsShowing,
-        selectAllStatus,
-        isTableDataRefreshed,
-        tableLoading,
-        tableMaxHeight,
-        sortByColumns,
-        columnsToSort,
-        fixedColumns,
-        customColumnWidths,
-        buttonActionName,
-        buttonActionMethod,
-        buttonActionStyle,
-        buttonActionLabel,
-        cleanRowSelection,
-        getRowActions,
-        customSelectAllButton,
-        buttonActionIcon
-    } = props;
-
-    const [customFilters, setCustomFilters] = useState<any>([]);
-    const [customColumns, setCustomColumns] = useState<ColumnsType<any>>([]);
-    const [sortInfo, setSortInfo] = useState<any>([]);
-    const [selectedRowKeys, setselectedRowKeys] = useState<any>(rowSelection?.selectedRowKeys || []);
-    const [selectedAllRowKeys, setSelectedAllRowKeys] = useState(false);
-    const [deselectAll, setDeselectAll] = useState(false);
-
-    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
-        if (rowSelection.type === 'radio') {
-            setselectedRowKeys(newSelectedRowKeys);
-            return;
-        }
-
-        setselectedRowKeys((prevKeys: any) => {
-            const dataSourceIds = dataSource?.map((data) => data[rowKeyValue as any])
-
-            const oldKeys = prevKeys.filter((key: any) => {
-                return !dataSourceIds?.includes(key)
-            });
-
-            return [...oldKeys, ...newSelectedRowKeys];
-        });
-
-        setSelectedAllRowKeys(false);
-        setDeselectAll(false);
-    };
-
-    const handleChange: TableProps<any>['onChange'] = (pagination, filters, sorter: any, extra) => {
-        const getPagination = {
-            currentPage: pagination.current,
-        }
-
-        const getSortAndPaginationInfo = { ...sortInfo, ...getPagination }
-        props.paginationInfo(getSortAndPaginationInfo);
-
-        // SORT 
-        if (sortByColumns) {
-            const { field, order } = sorter;
-            let mappedOrder = null;
-            if (order === "ascend") {
-                mappedOrder = "asc";
-            } else if (order === "descend") {
-                mappedOrder = "desc";
-            }
-
-            if (field && mappedOrder) {
-                props.columnsSortChange({ field, order: mappedOrder });
-            }
-        }
-    };
-
-    const setSorter = (option: any) => {
-        onSort?.(option.value.split('-')[0], option.direction);
-        const sortData = {
-            sortDirection: option.direction,
-            sortValue: option.value.split('-')[0],
-        }
-
-        setSortInfo(sortData)
-    };
-
-    const selectAllRows = () => {
-        if (selectedAllRowKeys) {
-            setDeselectAll(true);
-        } else {
-            onSelectAllButtonClick?.(); // Call the onSelectAllButtonClick callback
-        }
-    };
-
-    useEffect(() => {
-        if (isTableDataRefreshed && !tableLoading || AllItemsShowing) {
-            if (selectAllStatus && AllItemsShowing) {
-                const allRowKeys = dataSource?.map((record) => record[rowKeyValue as any]);
-                setselectedRowKeys(allRowKeys);
-                setSelectedAllRowKeys(true);
-            }
-        }
-    }, [isTableDataRefreshed, tableLoading, selectAllStatus, AllItemsShowing]);
-
-    useEffect(() => {
-        if (deselectAll) {
-            setselectedRowKeys([]);
-            setDeselectAll(false);
-            setSelectedAllRowKeys(false);
-        }
-    }, [deselectAll]);
-
-    useEffect(() => {
-        props.rowSelectionInfo(selectedRowKeys);
-    }, [selectedRowKeys]);
-
-    useEffect(() => {
-        if (cleanRowSelection) {
-            setselectedRowKeys([]);
-        }
-    }, [cleanRowSelection]);
-
-    useEffect(() => {
-        if (dataSource && (dataSource as any)?.length > 0) {
-            // Columns
-            let columns = Object.keys(dataSource?.[0]).map(key => {
-                if (hiddenColumns?.includes(key)) {
-                    return;
-                }
-
-                const isColumnSortable = columnsToSort?.includes(key) ? sortByColumns : false;
-
-                const column = {
-                    title: headingTranslationsKey ? t(`${headingTranslationsKey}.${key}`) : key,
-                    dataIndex: key,
-                    key: key,
-                    ellipsis: false,
-                    sorter: isColumnSortable,
-                    // No fixed property here, we'll add it later based on the fixedColumns prop
-                };
-
-                return column;
-
-            }).filter(el => el !== undefined) as any;
-
-            const columnActions = {
-                key: 'action',
-                title: headingTranslationsKey ? t(`${headingTranslationsKey}.${'action'}`) : 'action',
-                dataIndex: 'action',
-                ellipsis: false,
-                align: 'right',
-                render: (_: any, record: any) => {
-                    const rowActions = getRowActions ? getRowActions(record) : null;
-
-                    if ((!items?.[0] && !rowActions)) return null;
-
-                    const actions = rowActions ? rowActions : items;
-
-                    const buttonLabel = buttonActionLabel ? buttonActionLabel(record) : null;
-
-                    const icon = buttonActionIcon ? buttonActionIcon(record) : null;
-
-                    const buttonClass = typeof buttonActionStyle === 'function'
-                        ? buttonActionStyle(record) // Se for uma função, chama com o `record`
-                        : buttonActionStyle || ''; // Se for string, usa diretamente
-
-                    const renderActionElement = () => {
-                        if (icon) {
-                            return (
-                                <span
-                                    className={buttonClass}
-                                    onClick={() => buttonActionMethod?.()}
-                                >
-                                    {icon}
-                                </span>
-                            );
-                        }
-
-                        // Senão, renderiza botão como antes
-                        if (buttonActionName || buttonLabel) {
-                            return (
-                                <Button
-                                    customClass={buttonClass}
-                                    onClick={() => buttonActionMethod?.()}
-                                >
-                                    {buttonActionName || buttonLabel}
-                                </Button>
-                            );
-                        }
-
-                        return null;
-                    };
-
-                    return (
-                        <Space size="middle">
-                            {renderActionElement()}
-
-                            <Dropdown menu={{ items: actions }}>
-                                <a>
-                                    <MoreOutlined style={{ color: 'var(--color-blue)', transform: 'scale(1.6)' }} />
-                                </a>
-                            </Dropdown>
-                        </Space>
-                    );
-                },
-            };
-
-            (items || getRowActions) && columns.push(columnActions as any);
-
-            if (fixedColumns) {
-                fixedColumns.forEach((column) => {
-                    const { dataIndex, side } = column;
-                    const foundColumn = columns.find((col: any) => col.dataIndex === dataIndex);
-                    if (foundColumn) {
-                        foundColumn.fixed = side;
-                    }
-                });
-            }
-
-            if (customColumnWidths) {
-                customColumnWidths.forEach((column) => {
-                    const { columnName, width } = column;
-                    const foundColumn = columns.find((col: any) => col.dataIndex === columnName);
-                    if (foundColumn) {
-                        foundColumn.width = width;
-                    }
-                });
-            }
-
-            setCustomColumns(columns);
-
-            // Filters
-            const dataKeysToFilter = Object.keys(dataSource?.[0]).filter((el) => fieldsToSort?.includes(el));
-
-            const filters = ([] as FilterTableOptions[]).concat(
-                ...dataKeysToFilter.map(key => ({
-                    value: `${key}-${sortByOption.desc}`,
-                    label: `${headingTranslationsKey ? t(`${headingTranslationsKey}.${key}`) : key} (${sortByOption.desc})`,
-                    direction: `${sortByOption.desc}`,
-                })),
-                ...dataKeysToFilter.map(key => ({
-                    value: `${key}-${sortByOption.asc}`,
-                    label: `${headingTranslationsKey ? t(`${headingTranslationsKey}.${key}`) : key} (${sortByOption.asc})`,
-                    direction: `${sortByOption.asc}`,
-                }))
-            );
-
-            setCustomFilters(filters);
-        }
-    }, [dataSource]);
-
-    const shouldRenderSortDropdown = customFilters.length > 0;
-
-    const tableWrapperClasses = classnames({
-        [styles.tableWrapperNoSelection]: !rowSelection
-    }, [styles.tableWrapper]);
-
-    return (
-        <div className={tableWrapperClasses}>
-            {shouldRenderSortDropdown &&
-                <Space style={{ marginBottom: 16 }}>
-                    <Select
-                        style={{ width: 'auto', minWidth: 200 }}
-                        placeholder={selectPlaceholder}
-                        onSelect={(_, option: any) => {
-                            setSorter(option);
-                        }}
-                        optionFilterProp="children"
-                        filterOption={(input, option) => (option?.label ?? '').includes(input)}
-                        filterSort={(optionA, optionB) =>
-                            (optionA?.label ?? '').toLowerCase().localeCompare((optionB?.label ?? '').toLowerCase())
-                        }
-                        options={customFilters}
-                    />
-                </Space>
-            }
-
-            <AntdTable
-                dataSource={dataSource}
-                onChange={handleChange}
-                {...props}
-                columns={customColumns}
-                {...props.rowSelection ? (
-                    {
-                        rowSelection: {
-                            selectedRowKeys: selectedRowKeys,
-                            onChange: onSelectChange,
-                            type: props.rowSelection?.type,
-                        }
-                    }
-                ) : null}
-                rowKey={rowKeyValue}
-                onRow={(record: any) => {
-                    const internalRow = {
-                        style: {
-                            opacity: (record.Status === "I" || record.Status === "Draft") ? 0.5 : 1,
-                            boxShadow: record.Status === "Draft" ? "inset 2px 0 0 #FF674C" : "none",
-                        },
-                    };
-
-                    const externalRow = props.onRow?.(record) ?? {};
-
-                    return {
-                        ...externalRow,
-                        ...internalRow,
-                        style: {
-                            ...internalRow.style,
-                            ...externalRow.style,
-                        },
-                    };
-                }}
-                {...(tableMaxHeight ? { scroll: { y: tableMaxHeight } } : {})}
-            />
-            {
-                onSelectAllButtonClick &&
-                <Button onClick={selectAllRows} customClass={customSelectAllButton}>
-                    {selectedAllRowKeys ? t('components.table.deselectAll') : t('components.table.selectAll')}
-                </Button>
-            }
-        </div>
-    );
-};

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

@@ -1,153 +0,0 @@
-.tableWrapper {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: column;
-
-    :global {
-        .ant-table-thead > tr > th {
-            background-color: transparent;
-            border: 0px;
-            color: var(--color-blue);
-
-            &:before {
-                display: none;
-            }
-        }
-
-        .ant-table-wrapper {
-            margin-bottom: 12px;
-        }
-    
-        .ant-table-cell {
-            word-break: break-word;
-        }
-
-        .ant-table-tbody {
-            > tr {
-                cursor: pointer;
-
-                &:last-child {
-                    > td {
-                        border-bottom: 1px solid var(--color-grey-light) !important;
-                    }
-                }
-
-                &:first-child {
-                    > td {
-                        border-top: 1px solid var(--color-blue) !important;
-                    }
-                }
-
-                &:hover {
-                    td {
-                        border-radius: 0 !important;
-                        border-bottom-color: var(--color-grey-light) !important;
-                    }
-                }
-            }
-        }
-
-        .ant-space {
-            align-self: flex-end;
-        }
-
-        .ant-select-selection-placeholder {
-            color: var(--color-black);
-        }
-
-        .ant-select-selector,
-        .ant-select-focused .ant-select-selection-search {
-            border: none !important;
-            box-shadow: none !important;
-
-            &:focus,
-            &:hover {
-                border: none !important;
-                box-shadow: none !important;
-            }
-        }
-
-        .ant-pagination {
-            max-width: calc(100% - 200px);
-            margin-left: auto !important;
-        }
-
-        button[type="button"].ant-pagination-item-link {
-            margin-top: 0 !important;
-        }
-    }
-
-    button[type="button"] {
-        margin-top: -50px;
-    }
-
-
-    @media screen and (max-width: 1024px) {
-        :global {
-            .ant-table-thead>tr>th {
-                font-size: 12px;
-            }
-    
-            .ant-table-tbody>tr>td {
-                font-size: 12px;
-            }
-
-            .ant-table-wrapper .ant-table-thead>tr>th {
-                padding: 8px;
-            }
-    
-            .ant-table-wrapper .ant-table-tbody>tr>td {
-                padding: 8px;
-            }
-        }
-    }
-    
-    @media screen and (max-width: 767px) {
-        :global {
-            .ant-table-thead>tr>th {
-                font-size: 10px;
-            }
-    
-            .ant-table-tbody>tr>td {
-                font-size: 10px;
-            }
-    
-            .ant-table-content table {
-                width: 100%;
-            }
-    
-            .ant-table-content {
-                width: 100%;
-            }
-    
-            .ant-table-wrapper .ant-table .ant-table-title, 
-            .ant-table-wrapper .ant-table .ant-table-header {
-                word-break: break-all;
-            }
-
-            .ant-table-wrapper .ant-table-thead>tr>th {
-                padding: 4px;
-            }
-    
-            .ant-table-wrapper .ant-table-tbody>tr>td {
-                padding: 4px;
-            }
-
-            .ant-table-wrapper .ant-table-column-sorter {
-                margin-inline-start: 0px;
-            }
-
-            .ant-table-wrapper .ant-table-column-sorter-up {
-                font-size: 8px;
-            }
-
-            .ant-table-wrapper .ant-table-column-sorter-down {
-                font-size: 8px;
-            }
-
-            .ant-pagination {
-                max-width: unset;
-            }
-        }
-    }
-}

package/src/components/Select/Select.stories.tsx

@@ -1,39 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react-webpack5";
-import { Select } from '.';
-import { SelectProps } from 'antd';
-
-export default {
-    title: 'Select',
-    component: Select,
-} as Meta;
-
-const Template: StoryFn<SelectProps> = (args: any) => <Select {...args}></Select>;
-
-export const Primary = Template.bind({});
-Primary.args = {
-    defaultValue: 'something',
-    options: [
-        {
-            value: 'lucy',
-            label: 'Lucy',
-        },
-        {
-            value: 'Yiminghe',
-            label: 'yiminghe',
-        },
-    ]
-};
-
-export const noArguments = Template.bind({});
-noArguments.args = {
-    options: [
-        {
-            value: 'lucy',
-            label: 'Lucy',
-        },
-        {
-            value: 'Yiminghe',
-            label: 'yiminghe',
-        },
-    ]
-};

package/src/components/Select/index.tsx

@@ -1,27 +0,0 @@
-import styles from './styles.module.scss';
-import { Select as AntdSelect, SelectProps as AntdSelectProps } from 'antd';
-import classNames from 'classnames';
-
-export interface SelectProps extends AntdSelectProps {
-    customClass?: string;
-}
-
-export const Select = ({customClass, ...props}: SelectProps) => {
-    const { defaultValue, options } = props;
-
-    const selectClasses = { 
-        [styles.select]: true,
-        [`${customClass}`]: customClass,
-    }
-
-    return (
-        (options || defaultValue) && 
-        <AntdSelect
-            className={ classNames(selectClasses) }
-            defaultValue={defaultValue}
-            style={{ minWidth: 180 }}
-            options={options}
-            {...props}
-        ></AntdSelect>
-    )
-};

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

@@ -1,19 +0,0 @@
-.select {
-    :global {
-        .ant-select-selector {
-            border-color: rgba(var(--color-black-rgb), .5) !important;
-            height: 50px !important;
-            display: flex;
-            align-items: center;
-        }
-        .ant-select-arrow {
-            color: var(--color-black);
-        }
-    }
-}
-
-:global {
-    .ant-select-single {
-        height: unset;
-    }
-}

package/src/components/Separator/Separator.stories.tsx

@@ -1,22 +0,0 @@
-import {Meta, StoryFn} from "@storybook/react-webpack5";
-import { Separator, SeparatorProps, Spaces } from '.';
-
-export default {
-    title: 'Separator',
-    component: Separator,
-} as Meta;
-
-const Template: StoryFn<SeparatorProps> = (args: any) => <Separator {...args}></Separator>;
-
-export const Primary = Template.bind({});
-Primary.args = {
-    hasOpacity: false,
-    colorIsBlue: false,
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-    hasOpacity: true,
-    colorIsBlue: true,
-    space: Spaces.l,
-};

package/src/components/Separator/index.tsx

@@ -1,27 +0,0 @@
-import styles from './styles.module.scss';
-import classNames from 'classnames';
-
-export enum Spaces {
-    s = 's',
-    m = 'm',
-    l = 'l',
-}
-
-export interface SeparatorProps {
-    hasOpacity?: boolean;
-    colorIsBlue?: boolean;
-    space: Spaces;
-}
-
-export const Separator = (props: SeparatorProps) => {
-    const { hasOpacity, colorIsBlue, space } = props;
-
-    const separatorClasses = classNames({
-        [styles.separator]: true,
-        [styles['separator--opacity-50']]: hasOpacity,
-        [styles['separator--blue-background']]: colorIsBlue,
-        [styles[`separator--space-${space}` || '']]: space && Spaces[space],
-    });
-    
-    return <hr className={separatorClasses} />
-};

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

@@ -1,25 +0,0 @@
-.separator {
-    background-color: var(--color-orange);
-    height: 1px;
-    border: none;
-
-    &--opacity-50 {
-        opacity: 50%;
-    }
-
-    &--blue-background {
-        background-color: var(--color-blue);
-    }
-
-    &--space-s {
-        margin: 8px 0;
-    }
-
-    &--space-m {
-        margin: 16px 0;
-    }
-
-    &--space-l {
-        margin: 24px 0;
-    }
-}