@omniumretail/component-library 1.2.71 → 1.2.72

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

@@ -1,365 +0,0 @@
-.categoryResponse {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    height: 100%;
-
-    @media(min-width: 600px) {
-        display: grid;
-        grid-template-columns: 220px auto;
-    }
-
-    @media(min-width: 768px) {
-        grid-template-columns: 300px auto;
-    }
-}
-
-.sidebarWrapper {
-    background: #EBECED;
-    overflow: auto;
-    padding: 20px;
-
-    @media(max-width: 599px) {
-        padding: 20px 20px 0 20px;
-        max-height: 80px;
-    }
-}
-
-.contentWrapper {
-    background: var(--color-white);
-    overflow: auto;
-    padding: 20px;
-
-    @media(max-width: 599px) {
-        height: 100%;
-    }
-}
-
-.title {
-    font-size: var(--font-size-body-2);
-    color: var(--color-blue);
-    margin-bottom: 12px;
-    font-weight: var(--font-weight-semibold);
-    text-transform: uppercase;
-
-    @media(min-width: 768px) {
-        font-size: var(--font-size-body-4);
-        margin-bottom: 36px;
-    }
-}
-
-.label {
-    padding-bottom: 15px;
-    font-weight: var(--font-weight-bold);
-    font-size: var(--font-size-body-4);
-
-    @media(max-width: 767px) {
-        font-size: var(--font-size-body-3);
-    }
-}
-
-.cursorPointer {
-    cursor: pointer;
-}
-
-.subCategory {
-    padding-left: 16px;
-
-    .label {
-        font-weight: var(--font-weight-semibold);
-    }
-
-    .labelWrapper {
-        .subCategory {
-            .label {
-                font-weight: var(--font-weight-light);
-            }
-        }
-    }
-}
-
-.labelWrapper {
-    display: block;
-}
-
-.active {
-    color: var(--color-orange);
-}
-
-.details {
-    margin-bottom: 16px;
-
-    @media(min-width: 768px) {
-        margin-bottom: 24px;
-    }
-}
-
-.categoryName {
-    font-size: var(--font-size-body-3);
-    color: var(--color-blue);
-    font-weight: var(--font-weight-semibold);
-    margin-bottom: 8px;
-
-    @media(min-width: 768px) {
-        font-size: var(--font-size-body-4);
-    }
-}
-
-.categoryDescription {
-    font-size: var(--font-size-body-2);
-    font-weight: var(--font-weight-light);
-    color: var(--color-black);
-
-    @media(min-width: 768px) {
-        font-size: var(--font-size-body-3);
-    }
-}
-
-// Questions
-.questionWrapper {
-    display: flex;
-    flex-direction: row;
-    gap: 12px;
-    margin-bottom: 24px;
-
-    @media(min-width: 768px) {
-        margin-bottom: 36px;
-    }
-}
-
-.questionWrapperOpenAnswer {
-    flex-direction: column;
-    border-bottom: 1px solid rgba(var(--color-blue-rgb), .2);
-    margin-bottom: 24px;
-
-    .question {
-        width: 100%;
-        border-bottom: none;
-    }
-
-    .answer {
-        width: 100%;
-        height: auto;
-
-        :global {
-            .ant-input {
-                min-height: 140px;
-            }
-            
-            .ant-form-item {
-                margin-bottom: 16px;
-            }
-        }
-    }
-}
-
-.question {
-    width: 100%;
-    border-bottom: 1px solid rgba(var(--color-blue-rgb), .2);
-}
-
-.answer {
-    width: 100px;
-    height: 50px;
-    align-self: flex-end;
-}
-
-.subject {
-    font-size: var(--font-size-body-4);
-    font-weight: var(--font-weight-medium);
-    
-    @media(max-width: 767px) {
-        font-size: var(--font-size-body-3);
-    }
-}
-
-.description {
-    font-weight: var(--font-weight-light);
-    font-size: var(--font-size-body-3);
-    margin-bottom: 4px;
-
-    @media(max-width: 767px) {
-        font-size: var(--font-size-body-2);
-    }
-}
-
-.noteContainer {
-    font-weight: var(--font-weight-light);
-    margin-top: 20px;
-    display: flex;
-    gap: 4px;
-}
-
-.noteText {
-    word-wrap: break-word;
-    white-space: pre-wrap;
-    max-height: 100px;
-    overflow: auto;
-    font-size: var(--font-size-body-3);
-
-    @media(max-width: 767px) {
-        font-size: var(--font-size-body-2);
-    }
-}
-
-.note {
-    font-weight: var(--font-weight-semibold);
-    font-size: var(--font-size-body-3);
-
-    @media(max-width: 767px) {
-        font-size: var(--font-size-body-2);
-    }
-}
-
-.form {
-    margin-bottom: unset;
-    width: 100%;
-}
-
-.actionContainer {
-    font-weight: var(--font-weight-light);
-    margin-bottom: 4px;
-    margin-top: 16px;
-    display: flex;
-    gap: 4px;
-}
-
-.action {
-    display: flex;
-    flex-direction: column;
-}
-
-.actionsButtonsContainer {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    gap: 20px;
-    margin-top: 12px;
-    margin-bottom: 12px;
-    width: 100%;
-}
-
-.buttonContainer {
-    cursor: pointer;
-}
-
-.actionsButtons {
-    color: var(--color-black);
-    background-color: var(--color-white);
-    border: 1px var(--color-black) solid;
-    min-width: 100px;
-    height: 20px;
-    font-size: 10px;
-    padding: unset;
-
-    &:hover {
-        background-color: var(--color-grey-light);
-        color: var(--color-black) !important;
-        border: 1px var(--color-black) solid !important;
-    }
-}
-
-.uploadContainer {
-    text-align: center;
-}
-
-.uploadIconContainer {
-    cursor: pointer;
-
-    @media(min-width: 768px) {
-        font-size: 4px;
-    }
-}
-
-.iconStyle {
-    font-size: 12px;
-    margin-right: 4px;
-
-    @media(min-width: 1350px) {
-        margin-top: 4px;
-        font-size: 16px !important;
-    }
-
-    @media(min-width: 768px) {
-        font-size: 14px;
-    }
-}
-
-.buttonLabel {
-    font-weight: 400 !important;
-    font-size: 12px;
-    text-transform: capitalize;
-
-    @media(min-width: 1350px) {
-        font-size: 16px !important;
-        margin-bottom: 0px;
-    }
-
-    @media(min-width: 768px) {
-        font-size: 14px;
-        margin-bottom: 0px;
-    }
-}
-
-.loadFile {
-    color: var(--color-black);
-    background-color: var(--color-white);
-    border: 1px var(--color-black) solid;
-    min-width: 100px;
-    height: 20px;
-    font-size: 10px;
-    padding: unset;
-
-    &:hover {
-        background-color: var(--color-grey-light);
-        color: var(--color-black) !important;
-        border: 1px var(--color-black) solid !important;
-    }
-}
-
-.selectAnswerStyle {
-    min-width: 100% !important;
-}
-
-.datePickerStyle {
-    width: 25%;
-    height: 40px;
-
-    @media(max-width: 767px) {
-        width: 50%;
-    }
-}
-
-.inputNumberStyle {
-    width: 25%;
-    height: 40px;
-
-    @media(max-width: 767px) {
-        width: 50%;
-    }
-}
-
-.textArea {
-    padding: unset;
-    color: unset !important;
-}
-
-:global {
-    .ant-upload-wrapper {
-        line-height: 12px;
-    }
-
-    .ant-upload-wrapper .ant-upload-list .ant-upload-list-item {
-        max-width: calc(100vw/5) !important;
-        font-size: 12px !important;
-
-        @media(max-width: 767px) {
-            font-size: 10px !important;
-            max-width: calc(100vw/2) !important;
-        }
-    }
-
-    :where(.css-dev-only-do-not-override-f7vrd6).ant-input-number .ant-input-number-input {
-        height: 35px;
-    }
-}

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,16 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react-vite";
-import { CustomDatePicker, CustomDatePickerProps } from '.';
-
-export default {
-    title: 'DatePicker',
-    component: CustomDatePicker,
-} as Meta;
-
-const Template: StoryFn<CustomDatePickerProps> = (args: any) => <CustomDatePicker {...args}></CustomDatePicker>;
-
-export const Primary = Template.bind({});
-Primary.args = {
-    onChange: (x: any, y: any) => {
-        console.log(x, y);
-    },
-};

package/src/components/DatePicker/index.tsx

@@ -1,38 +0,0 @@
-import styles from './styles.module.scss';
-import { DatePicker, DatePickerProps  } from 'antd';
-
-export type CustomDatePickerProps = DatePickerProps & {
-    isRangePicker?: boolean;
-    onChange?: (a: any, b: any) => void;
-    disabled?: boolean;
-    defaultValue?: any;
-}
-
-const { RangePicker } = DatePicker;
-
-export const CustomDatePicker = ({
-    className, onChange, value, isRangePicker, disabled, defaultValue, ...rest
-}: CustomDatePickerProps) => {
-    
-    return (
-        <>
-            { isRangePicker
-            ?
-                <RangePicker
-                    onChange={ onChange }
-                    className={ `${styles.sitooDatePicker} ${className}` }
-                    disabled={disabled}
-                    defaultValue={defaultValue}
-                />
-            :
-                <DatePicker
-                { ...rest }
-                value={ value }
-                onChange={ onChange }
-                defaultValue={defaultValue}
-                className={ `${styles.sitooDatePicker} ${className}` }
-                />
-            }
-        </>
-    );
-}

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

@@ -1,3 +0,0 @@
-.sitooDatePicker {
-    border-color: rgba(var(--color-black-rgb), .5);
-}

package/src/components/DatePickerTag/DatePickerTag.stories.tsx

@@ -1,19 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react-vite";
-import { DatePickerTag } from '.';
-import { TagProps } from 'antd';
-import { useState } from "react";
-
-export default {
-    title: 'DatePickerTag',
-    component: DatePickerTag,
-} as Meta;
-
-const Template: StoryFn<TagProps> = (args: any) => {
-    const [tagsInfo, setTagsInfo] = useState<any>({});
-    
-    return <DatePickerTag {...args} tagsInfo={setTagsInfo}></DatePickerTag>;
-}
-
-export const Primary = Template.bind({});
-Primary.args = {
-};

package/src/components/DatePickerTag/index.tsx

@@ -1,91 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import type { Dayjs } from 'dayjs';
-import { DatePicker, Tag, TagProps } from 'antd';
-import { TweenOneGroup } from 'rc-tween-one';
-import styles from './styles.module.scss';
-import { t } from 'i18next';
-import dayjs from "dayjs";
-import locale from 'antd/es/date-picker/locale/pt_BR';
-
-export interface DatePickerTagProps extends TagProps {
-    customTags?: any,
-    tagsInfo?: any;
-}
-
-type DateValue = Dayjs | null;
-
-export const DatePickerTag = (props: DatePickerTagProps) => {
-    const { customTags = [] } = props;
-
-    const [tags, setTags] = useState<any>(customTags);
-    const [dateValue, setDateValue] = useState<DateValue>(null);
-
-    const handleClose = (removedTag: any) => {
-        const newTags = tags.filter((tag: any) => tag !== removedTag);
-        setTags(newTags);
-    };
-
-    const handleChange = (date: DateValue, dateString: string) => {
-        const formattedDate = date?.format('DD/MM/YYYY');
-        setTags([...tags, formattedDate]);
-        setDateValue(null);
-    };
-
-    useEffect(() => {
-        props?.tagsInfo(tags);
-    }, [tags]);
-
-    const forMap = (tag: any) => {
-        const tagElem = (
-            <Tag
-                closable
-                onClose={(e) => {
-                    e.preventDefault();
-                    handleClose(tag);
-                }}
-            >
-                {tag}
-            </Tag>
-        );
-        return (
-            <span key={tag} className={styles.new} style={{ display: 'inline-block' }}>
-                {tagElem}
-            </span>
-        );
-    };
-
-    const tagChild = tags.map(forMap);
-
-    return (
-        <div className={styles.tagfield}>
-            <DatePicker
-                disabledDate={(current) => current && current < dayjs().endOf("day")}
-                value={dateValue}
-                onChange={handleChange as any}
-                className={styles.picker}
-                placeholder={t('components.datePickerTag.placeholder')!}
-                locale={locale}
-            />
-
-            <div style={{ marginTop: 16 }}>
-                <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/DatePickerTag/styles.module.scss

@@ -1,32 +0,0 @@
-.tagfield {
-    contain: inline-size;
-
-    .picker {
-        height: 50px;
-        width: 300px;
-
-        @media(min-width: 1024px) {
-            width: 450px;
-        }
-    }
-
-    .new {
-        :global {
-            .ant-tag {
-                background-color: var(--color-orange);
-                color: var(--color-white);
-                padding: 6px 16px;
-                max-width: 240px;
-            }
-
-            .anticon-close {
-                color: var(--color-white);
-                font-size: 12px;
-
-                &:hover {
-                    color: var(--color-black);
-                }
-            }
-        }
-    }
-}

package/src/components/DropdownButton/DropdownButton.stories.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from "@storybook/react-vite";
-import { DropdownButton, DropdownButtonProps } from '.';
-
-export default {
-  title: 'DropdownButton',
-  component: DropdownButton,
-} as Meta;
-
-const onLeft = () => {
-  console.log(9);
-};
-
-const Template: StoryFn<DropdownButtonProps> = (args: any) => <DropdownButton {...args} />;
-
-export const BasicDropdown = Template.bind({});
-BasicDropdown.args = {
-  buttonText: 'Dropdown',
-  options: [
-    { label: 'Option 1', action: () => onLeft() },
-    { label: 'Option 2', action: () => alert('Option 2 clicked') },
-    { label: 'Option 3', action: () => alert('Option 3 clicked') },
-  ],
-};

package/src/components/DropdownButton/index.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { Menu, Dropdown, DropdownProps } from 'antd';
-import classNames from 'classnames';
-import { Button } from '../Button';
-import styles from './styles.module.scss';
-
-export interface DropdownButtonProps extends DropdownProps {
-  options?: { label: string, action: () => void }[];
-  buttonText: string;
-  buttonClass?: string;
-  customButton?: React.ReactNode;
-}
-
-export const DropdownButton = ({ options, buttonText, buttonClass, customButton, ...props }: DropdownButtonProps) => {
-  const menu = (
-    <Menu>
-      {options && options.map((option, index) => (
-        <Menu.Item key={index} onClick={option.action}>{option.label}</Menu.Item>
-      ))}
-    </Menu>
-  );
-
-  const linkClasses = classNames({
-    [`${buttonClass}`]: buttonClass,
-  }, [styles.dropdown]);
-
-  return (
-    <Dropdown overlay={menu} trigger={['click']}>
-      {customButton ? (
-        customButton
-      ) : (
-        <Button className={linkClasses}>{buttonText}</Button>
-      )}
-    </Dropdown>
-  );
-};

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

@@ -1,9 +0,0 @@
-.dropdown {
-    color: var(--color-black);
-}
-
-:global {
-    .ant-dropdown-menu-title-content {
-        color: var(--color-black);
-    }
-}

package/src/components/ExportTableData/ExportTableData.stories.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from "@storybook/react-vite";
-import { TableExportButton } from './index';
-
-export default {
-  title: 'TableExportButton',
-  component: TableExportButton,
-} as Meta;
-
-const columnTranslations = {
-  id: 'ID',
-  name: 'Nome',
-  age: 'Idade',
-  occupation: 'Ocupação'
-};
-
-const Template: StoryFn<any> = (args: any) => <TableExportButton {...args} />;
-
-export const ExportButton = Template.bind({});
-ExportButton.args = {
-  data: [
-    {
-      id: 1,
-      name: 'John Doe',
-      age: 30,
-      occupation: 'Software Developer'
-    },
-    {
-      id: 2,
-      name: 'Jane Smith',
-      age: 28,
-      occupation: 'Data Scientist'
-    },
-    {
-      id: 3,
-      name: 'Michael Johnson',
-      age: 35,
-      occupation: 'Project Manager'
-    },
-  ],
-  fileName: 'table_data',
-  columnTranslations: columnTranslations
-};