@omniumretail/component-library 1.2.70 → 1.2.72

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

@@ -1,97 +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-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;
-    }
-}
-
-:global {
-    .ant-spin-dot-item {
-        background-color: var(--color-blue) !important;
-        opacity: 1 !important;
-    }
-
-    .ant-spin-dot-item:nth-child(2) {
-        background-color: var(--color-orange) !important;
-        opacity: 1;
-    }
-
-    .ant-spin-dot-item:nth-child(3) {
-        background-color: var(--color-blue) !important;
-        opacity: 1;
-    }
-
-    .ant-spin-dot-item:nth-child(4) {
-        background-color: var(--color-orange) !important;
-        opacity: 1;
-    }
-}

package/src/components/Tag/Tag.stories.tsx

@@ -1,32 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react-webpack5";
-import { TagField } from '.';
-import { TagProps } from 'antd';
-import { useState } from "react";
-import { t } from "i18next";
-
-export default {
-    title: 'TagField',
-    component: TagField,
-} as Meta;
-
-const Template: StoryFn<TagProps> = (args: any) => {
-    const [tagsInfo, setTagsInfo] = useState<any>({});
-    const [advancedTagsInfo, setAdvancedTagsInfo] = useState<any>({});
-    const advancedsFilters = [{ display: t('components.tag.State'), value: "State" }, { display: t('components.tag.1'), value: "Olaaaaaa" }];
-    const [switchTest, setSwitchTest] = useState<boolean>(false);
-
-    return <TagField
-        disable={false}
-        {...args}
-        setInactiveUsersSwitch={setSwitchTest}
-        advancedTags={advancedsFilters}
-        tagsInfo={setTagsInfo}
-        advancedTagsInfo={setAdvancedTagsInfo}
-        inputPlacehold="ola"
-        >
-    </TagField>;
-}
-
-export const Primary = Template.bind({});
-Primary.args = {
-};

package/src/components/Tag/index.tsx

@@ -1,295 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { DownOutlined, SearchOutlined, UpOutlined } from '@ant-design/icons';
-import type { InputRef } from 'antd';
-import { Input, Tag, TagProps } from 'antd';
-import { TweenOneGroup } from 'rc-tween-one';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
-import { t } from 'i18next';
-import { Switch } from '../Switch';
-
-export interface customTagProps extends TagProps {
-    customTags?: string[];
-    tagsInfo?: (tags: string[]) => void;
-    advancedTagsInfo?: (tags: string[]) => void;
-    advancedTags?: { display: string; value: string }[];
-    addExtraTags?: string;
-    disable?: boolean;
-    addSwitch?: boolean;
-    setInactiveUsersSwitch?: React.Dispatch<React.SetStateAction<boolean>>;
-    hideAdvancedFilters?: boolean;
-    defaultAdvancedFilters?: { display: string; value: string }[];
-    inputPlacehold?: string;
-    inputDefaultAdvancedFilter?: string;
-    autoFocus?: boolean;
-}
-
-export const TagField = (props: customTagProps) => {
-    const {
-        customTags = [],
-        advancedTags,
-        disable,
-        defaultAdvancedFilters = [],
-        hideAdvancedFilters = true,
-        inputPlacehold,
-        inputDefaultAdvancedFilter = "",
-        autoFocus = false
-    } = props;
-
-    const [tags, setTags] = useState<string[]>(customTags.filter(tag => !tag.includes('=')));
-    const [inputVisible, setInputVisible] = useState<boolean>(
-        inputDefaultAdvancedFilter !== "" || autoFocus
-    );
-    const [inputValue, setInputValue] = useState(
-        inputDefaultAdvancedFilter !== "" ? inputDefaultAdvancedFilter + '=' : ''
-    );
-    const inputRef = useRef<InputRef>(null);
-    const [advancedTagList, setAdvancedTagList] = useState<Array<{ display: string; value: string }>>(
-        defaultAdvancedFilters
-    );
-    const [allTags, setAllTags] = useState<string[]>([
-        ...customTags.filter(tag => !tag.includes('=')),
-        ...defaultAdvancedFilters.map((filter) => `${filter.display}`),
-    ]);
-    const [showAdvancedFilters, setShowAdvancedFilters] = useState<boolean>(hideAdvancedFilters ? false : true);
-
-    useEffect(() => {
-        if (defaultAdvancedFilters?.length > 0) {
-            setAdvancedTagList(defaultAdvancedFilters);
-            setAllTags(defaultAdvancedFilters.map((filter) => `${filter.display}`));
-        }
-    }, [defaultAdvancedFilters]);
-
-    useEffect(() => {
-        if (inputVisible) {
-            inputRef.current?.focus();
-        }
-    }, [inputVisible]);
-
-    const handleClose = (removedTag: string) => {
-        const newAllTags = allTags.filter((tag) => tag !== removedTag);
-        setAllTags(newAllTags);
-
-        const newTags = tags.filter((tag) => tag !== removedTag);
-        setTags(newTags);
-
-        if (advancedTags && advancedTagList.some(tag => tag.display === removedTag)) {
-            const newAdvancedTags = advancedTagList.filter((tag) => tag.display !== removedTag);
-            setAdvancedTagList(newAdvancedTags);
-        }
-    };
-
-    const showInput = () => {
-        setInputVisible(true);
-    };
-
-    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setInputValue(e.target.value);
-    };
-
-    const handleInputConfirm = () => {
-        if (inputValue && allTags.indexOf(inputValue) === -1) {
-            const [, value] = inputValue.split('=');
-
-            if (props.addSwitch) {
-                const newTags = props.addSwitch ? [inputValue] : [...tags, inputValue];
-                setTags(newTags);
-                setAllTags([inputValue]);
-            } else {
-                setAllTags([...allTags, inputValue]);
-            }
-
-            const matchedFilter = advancedTags && advancedTags.find(filter => filter.display === inputValue.split('=')[0]);
-
-            if (matchedFilter && !advancedTagList.some(tag => tag.display === inputValue)) {
-                const newTag = {
-                    display: inputValue,
-                    value: `${matchedFilter.value}=${value}`
-                };
-
-                setAdvancedTagList([...advancedTagList, newTag]);
-
-            } else if (props.addSwitch) {
-                setTags([inputValue]);
-
-            } else {
-                setTags([...tags, inputValue]);
-            }
-        }
-
-        setInputVisible(false);
-        setInputValue('');
-
-        const basicTags = tags.filter(tag => !advancedTagList.some(tagObj => tagObj.display === tag));
-        props.tagsInfo?.(basicTags);
-        props.advancedTagsInfo?.(advancedTagList.map(tagObj => tagObj.value));
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        const cursorPosition: any = e.currentTarget.selectionStart;
-        const advancedFilterMatch = advancedTags && advancedTags.find((filter: any) => inputValue.startsWith(`${filter}=`));
-        if (advancedFilterMatch) {
-            const filterLength = advancedFilterMatch.display.length;
-            if (cursorPosition <= filterLength && ![8, 46].includes(e.keyCode)) {
-                e.preventDefault();
-            }
-        }
-
-        // Prevent the input of '=' manually
-        if (e.key === "=") {
-            e.preventDefault();
-        }
-    };
-
-    const doSomething = (e: any) => {
-        const tag = e.target.innerText;
-        if (!advancedTagList.map(tagObj => tagObj.display).includes(tag)) {
-            setInputValue(`${tag}=`);
-            setInputVisible(true);
-        }
-    };
-
-    useEffect(() => {
-        props.tagsInfo?.(tags);
-        props.advancedTagsInfo?.(advancedTagList.map(tag => tag.value));
-    }, [tags, advancedTagList]);
-
-    useEffect(() => {
-        // Adiciona a nova tag ao allTags usando a prop addExtraTags
-        if (props.addExtraTags && typeof props.addExtraTags === "string") {
-            const newTags = props.addSwitch ? [props.addExtraTags] : [...tags, props.addExtraTags];
-
-            if (props.addSwitch) {
-                setTags([props.addExtraTags]);
-                setAllTags([props.addExtraTags]);
-            } else {
-                setTags([...tags, props.addExtraTags]);
-                setAllTags([...allTags, props.addExtraTags]);
-            }
-        }
-    }, [props.addExtraTags, props.addSwitch]);
-
-    const forMap = (tag: string) => {
-        const tagElem = (
-            <Tag
-                closable
-                onClose={(e) => {
-                    e.preventDefault();
-                    handleClose(tag);
-                }}
-            >
-                {tag}
-            </Tag>
-        );
-        return (
-            <span key={tag} className={styles['tagfield__new']} style={{ display: 'inline-block' }}>
-                {tagElem}
-            </span>
-        );
-    };
-
-    const advancedTagsMap = (tag: { display: string; value: string; }) => {
-        const disabled = advancedTagList.map(tag => tag.display.split('=')[0]).includes(tag.display);
-        return (
-            <div onClick={!disabled ? doSomething : undefined} key={tag.display} style={{ color: disabled ? 'gray' : undefined }}>
-                {tag.display}
-            </div>
-        );
-    };
-
-    const tagChild = allTags.map(forMap);
-    const advancedTagsChild = advancedTags && advancedTags.map(advancedTagsMap);
-
-    return (
-        <div className={styles.tagfield}>
-            <div className={styles.switchInputContainer}>
-                {inputVisible && (
-                    <Input
-                        ref={inputRef}
-                        type="search"
-                        enterKeyHint='done'
-                        size="small"
-                        value={inputValue}
-                        onChange={handleInputChange}
-                        onKeyDown={handleKeyDown}
-                        onPressEnter={handleInputConfirm}
-                        className={styles['tagfield__input']}
-                        disabled={disable}
-                        suffix={
-                            hideAdvancedFilters ? (
-                                showAdvancedFilters ? (
-                                    <UpOutlined onClick={() => setShowAdvancedFilters(false)} />
-                                ) : (
-                                    <DownOutlined onClick={() => setShowAdvancedFilters(true)} />
-                                )
-                            ) : null
-                        }
-                    />
-                )}
-
-                {!inputVisible && (
-                    <Tag onClick={showInput} className={classNames(styles['tagfield__creator'], 'site-tag-plus')}>
-                        {inputPlacehold ? inputPlacehold : (
-                            <>
-                                <SearchOutlined /> {t('components.tag.search')}
-                            </>
-                        )}
-
-                        {hideAdvancedFilters && (
-                            showAdvancedFilters ? (
-                                <UpOutlined className={styles.tagIcon} onClick={() => setShowAdvancedFilters(false)} />
-                            ) : (
-                                <DownOutlined className={styles.tagIcon} onClick={() => setShowAdvancedFilters(true)} />
-                            )
-                        )}
-                    </Tag>
-                )}
-            </div>
-
-            {showAdvancedFilters && advancedTags && (
-                <div style={{ marginTop: 16, marginBottom: 16 }} className={styles.advancedTagsWrapper}>
-                    <div className={styles.label}>
-                        {t('components.tag.advancedFields')}:
-                    </div>
-                    <div className={styles.advancedTags}>
-                        {advancedTagsChild}
-                    </div>
-                </div>
-            )}
-
-            {props.setInactiveUsersSwitch &&
-                <div className={styles.switchContainer}>
-                    <div className={styles.inactiveLabel}>
-                        {t('components.tag.inactiveSwitch')}:
-                    </div>
-
-                    <Switch
-                        size={"small"}
-                        customClass={styles.inactiveSwitchStyle}
-                        onChange={(checked) => props?.setInactiveUsersSwitch!(checked)}
-                    />
-                </div>
-            }
-
-            <div className={`${styles.tagsContainer} ${disable ? styles.disabled : ''}`}>
-                <TweenOneGroup
-                    enter={{
-                        scale: 0.8,
-                        opacity: 0,
-                        type: 'from',
-                        duration: 100,
-                    }}
-                    onEnd={(e: any) => {
-                        if (e.type === 'appear' || e.type === 'enter') {
-                            (e.target as any).style = 'display: inline-block';
-                        }
-                    }}
-                    leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
-                    appear={false}
-                >
-                    {tagChild}
-                </TweenOneGroup>
-            </div>
-        </div>
-    );
-};

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

@@ -1,104 +0,0 @@
-.tagfield {
-    contain: inline-size;
-
-    .tagsContainer {
-        margin-top: 16px;
-
-        &.disabled {
-            pointer-events: none;
-        }
-    }
-
-    &__creator {
-        height: 50px;
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        padding: 16px;
-        margin-inline-end: 0;
-        width: 100%;
-
-        :global {
-            .ant-input {
-                height: 50px;
-                padding-left: 40px;
-            }
-        }
-    }
-
-    &__input {
-        height: 50px;
-    }
-
-    &__new {
-        :global {
-            .ant-tag {
-                background-color: var(--color-orange);
-                color: var(--color-white);
-                padding: 6px 16px;
-                max-width: 240px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                position: relative;
-                padding-right: 24px;
-                min-height: 34px;
-            }
-
-            .anticon-close {
-                color: var(--color-white);
-                font-size: 12px;
-                position: absolute;
-                right: 4px;
-                top: 10px;
-
-                &:hover {
-                    color: var(--color-black);
-                }
-            }
-        }
-    }
-
-    .switchInputContainer {
-        display: flex;
-        align-items: center;
-        gap: 32px;
-        width: calc(100% - 40px);
-
-        @media (max-width: 768px) {
-            gap: 12px;
-            width: calc(100% - 20px);
-        }
-    }
-
-    .advancedTagsWrapper {
-        display: flex;
-        gap: 12px;
-    }
-
-    .advancedTags {
-        display: flex;
-        flex-direction: row;
-        gap: 12px;
-        text-decoration: underline;
-        font-weight: 700;
-
-        div {
-            cursor: pointer;
-        }
-    }
-
-    .switchContainer {
-        display: flex;
-        gap: 20px;
-    }
-
-    .inactiveSwitchStyle {
-        margin-top: 2px;
-    }
-
-    .tagIcon {
-        width: 100%;
-        justify-content: flex-end;
-    }
-}

package/src/components/Upload/Upload.stories.tsx

@@ -1,45 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react-webpack5";
-import { Form, UploadFile } from "antd";
-import { Button } from "components/Button";
-import { Upload } from '.';
-
-export default {
-    title: 'Upload',
-    component: Upload,
-} as Meta;
-
-const Template: StoryFn<any> = (args: any) => {
-    const [form] = Form.useForm();
-    
-    const handleSubmit = (values: any) => {
-        console.log('Form values:', values);
-    };
-
-    const handleImageChange = (file: UploadFile | null) => {
-        form.setFieldsValue({ image: file?.originFileObj });
-    };
-    
-    const initialValue = {
-        uid: '-1',
-        name: 'image.png',
-        status: 'done',
-        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-    }
-    return (
-        <Form form={form} onFinish={handleSubmit}>
-            <Form.Item name="image" valuePropName="file" initialValue={initialValue}>
-                <Upload {...args} onImageChange={handleImageChange} initialFileList={[initialValue]} disable={true}></Upload>
-            </Form.Item>
-            <Form.Item>
-                <Button type="primary" htmlType="submit">
-                    Submit
-                </Button>
-            </Form.Item>
-        </Form>
-    )
-}
-
-
-export const Primary = Template.bind({});
-Primary.args = {
-};

package/src/components/Upload/index.tsx

@@ -1,112 +0,0 @@
-import styles from './styles.module.scss';
-import { Upload as UploadAntd } from 'antd';
-import ImgCrop from 'antd-img-crop';
-import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
-import { Button } from '../Button';
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-interface UploadPropsExtended extends UploadProps {
-    onImageChange?: (file: UploadFile | null) => void;
-    initialFileList?: UploadFile[];
-    initialImageUrl?: string;
-    disable?: boolean;
-    file?: boolean;
-    setFiles?: Dispatch<SetStateAction<UploadFile<any>[]>> | any;
-}
-
-function generateRandomString() {
-    return Math.random().toString(36).substring(2, 14);
-}
-
-export const Upload = (props: UploadPropsExtended) => {
-    const {
-        onImageChange,
-        initialFileList,
-        initialImageUrl,
-        disable,
-        setFiles
-    } = props;
-
-    const { t } = useTranslation();
-    const [fileList, setFileList] = useState<UploadFile[]>(initialFileList || []);
-
-    // when component mounts or initialImageUrl changes, update fileList
-    useEffect(() => {
-        if (initialImageUrl) {
-            const newFile: UploadFile = {
-                uid: generateRandomString(), // use any unique string
-                name: initialImageUrl, // use the URL as the name
-                status: 'done',
-                url: initialImageUrl, // this is used for preview
-            };
-            setFileList((prevFileList) => [...prevFileList, newFile]);
-        }
-    }, [initialImageUrl]);
-
-    useEffect(() => {
-        if (setFiles) {
-            setFiles(fileList);
-        }
-    }, [fileList, setFiles]);
-
-    const beforeUpload: UploadProps['beforeUpload'] = async (file: RcFile) => {
-        const newFile: UploadFile = {
-            uid: file.uid,
-            name: file.name,
-            type: file.type,
-            size: file.size,
-            originFileObj: file,
-            status: 'done',
-        };
-
-        setFileList((prevFileList) => [...prevFileList, newFile]);
-        if (onImageChange) {
-            onImageChange(newFile);
-        }
-        return false;
-    };
-
-    const onChange: UploadProps['onChange'] = ({ file, fileList: newFileList }) => {
-        if (file.status === 'removed') {
-            setFileList(newFileList);
-            if (onImageChange) {
-                onImageChange(newFileList[0] || null);
-            }
-        }
-    };
-
-    const onPreview = async (file: UploadFile) => {
-        let src = file.url as string;
-        if (!src) {
-            src = await new Promise((resolve) => {
-                const reader = new FileReader();
-                reader.readAsDataURL(file.originFileObj as RcFile);
-                reader.onload = () => resolve(reader.result as string);
-            });
-        }
-        const image = new Image();
-        image.src = src;
-        const imgWindow = window.open(src);
-        imgWindow?.document.write(image.outerHTML);
-    };
-
-    return (
-        <ImgCrop rotationSlider>
-            <UploadAntd
-                listType={props.file ? "text" : "picture-card"}
-                fileList={fileList}
-                beforeUpload={beforeUpload}
-                onChange={onChange}
-                onPreview={onPreview}
-                disabled={disable}
-            >
-                {props.file
-                    ? <Button customClass={styles.loadFile}>{t('components.upload.loadFile')}</Button>
-
-                    : fileList.length < 1 && '+ Upload'
-                }
-            </UploadAntd>
-        </ImgCrop>
-    );
-};