code7-leia 0.2.37 → 1.0.0

package/src/components/EmptyState/styles.tsx

@@ -1,81 +0,0 @@
-import styled from 'styled-components';
-
-interface ContainerProps {
-  hasborder?: boolean;
-  backgroundcolor?: string;
-  backgroundicon?: string;
-}
-
-export const Container = styled.div<ContainerProps>`
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  padding: 24px 0;
-  height: 193px;
-  
-  p {
-    margin: 10px 0;
-  }
-
-  background: ${({ hasborder }) =>
-    hasborder &&
-    `linear-gradient(
-        to right,
-        #dadce3 50%,
-        rgba(255, 255, 255, 0) 0%
-      ),
-      linear-gradient(#dadce3 50%, rgba(255, 255, 255, 0) 0%),
-      linear-gradient(to right, #dadce3 50%, rgba(255, 255, 255, 0) 0%),
-      linear-gradient(#dadce3 50%, rgba(255, 255, 255, 0) 0%)`};
-  background-position: top, right, bottom, left;
-  background-repeat: repeat-x, repeat-y;
-  background-size: 40px 1px, 1px 40px;
-  background-color: ${({ backgroundcolor }) => backgroundcolor};
-
-  button {
-    background: #102693;
-    color: white;
-    width: fit-content;
-    padding: 10px 20px;
-    border-radius: 4px;
-  }
-
-  & .content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    & > .icon {
-      background-color: ${({ backgroundicon }) => backgroundicon};
-      border-radius: 16px;
-      width: 145px;
-      height: 145px;
-
-      display: flex;
-      justify-content: center;
-
-      & svg {
-        width: 100%;
-        height: 70%;
-        margin: 20px;
-      }
-    }
-
-    & .description {
-      max-width: 600px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      padding: 8px 0 8px 24px;
-
-      .button-add {
-        cursor: pointer;
-      }
-
-      .start-icon {
-        display: flex;
-        align-items: center;
-      }
-    }
-  }
-`;

package/src/components/FileArea/components/AreaUpload/index.tsx

@@ -1,137 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { getLanguage } from '../../../../utils/getLanguage'
-import { useDropzone, FileRejection } from 'react-dropzone';
-import PropTypes from 'prop-types';
-
-import { Container} from './styles';
-
-interface FileProperties {
-  id: number;
-  lastModified: number;
-  lastModifiedDate: Date;
-  name: string;
-  size: number;
-  type: string;
-}
-
-interface AreaUploadProps {
-  formatFile?: string;
-  multipleFile?: boolean;
-  initialFiles?: File[];
-  removeItem?: (file: FileProperties) => void;
-  setFile?: (file: { content: ArrayBuffer | string; properties: File }) => void;
-  file: string | undefined;
-  onChange?: (files: File[]) => void;
-  hasListFiles?: boolean;
-}
-
-const AreaUpload: React.FC<AreaUploadProps> = ({
-  formatFile = 'application/pdf',
-  multipleFile = false,
-  initialFiles = [],
-  setFile = () => {},
-  file = '',
-  onChange = () => {},
-}) => {
-  const [myFiles, setMyFiles] = useState<File[]>([]);
-  const t = getLanguage('pt-br')
-
-  useEffect(() => {
-    setMyFiles([...initialFiles, ...myFiles]);
-  }, []);
-
-  const onDrop = useCallback(
-    (acceptedFiles: File[], fileRejections: FileRejection[]) => {
-      if (fileRejections && fileRejections.length > 0) {
-        console.error('Arquivos rejeitados:', fileRejections);
-      }
-
-      onChange(acceptedFiles);
-
-      const files = [...myFiles, ...acceptedFiles];
-      const filesWithId = files.map((item, index) => ({
-        id: index + 1,
-        lastModified: item.lastModified,
-        name: item.name,
-        size: item.size,
-        type: item.type,
-      }));
-      setMyFiles(filesWithId as unknown as File[]);
-
-      acceptedFiles.forEach((file) => {
-        const reader = new FileReader();
-
-        reader.onload = () => {
-          const binaryStr = reader.result;
-          setFile({ content: binaryStr as ArrayBuffer, properties: file });
-        };
-        reader.readAsArrayBuffer(file);
-      });
-    },
-    [myFiles]
-  );
-
-  const {
-    getRootProps,
-    getInputProps,
-    open,
-    isDragActive,
-    isDragAccept,
-    isDragReject,
-  } = useDropzone({
-    accept: formatFile as any,
-    noClick: true,
-    noKeyboard: true,
-    multiple: multipleFile,
-    onDrop,
-  });
-
-  return (
-    <>
-      {(multipleFile || myFiles?.length === 0) || !file ? (
-        <Container
-          {...getRootProps({ isDragActive, isDragAccept, isDragReject })}
-        >
-          <input {...getInputProps()} />
-
-          <span>
-            <p>
-              {t.fileArea.modal.descriptionUpload}
-            </p>
-          </span>
-          <button type="button" onClick={open}>
-            {t.fileArea.modal.chooseFile}
-          </button>
-        </Container>
-      ) : (
-        <Container
-          {...getRootProps({ isDragActive, isDragAccept, isDragReject })}
-        >
-          <p>{file}</p>
-        </Container>
-      )}
-    </>
-  );
-};
-
-AreaUpload.propTypes = {
-  formatFile: PropTypes.string,
-  multipleFile: PropTypes.bool,
-  initialFiles: PropTypes.arrayOf(PropTypes.object as any),
-  removeItem: PropTypes.func,
-  setFile: PropTypes.func,
-  onChange: PropTypes.func,
-  hasListFiles: PropTypes.bool,
-};
-
-AreaUpload.defaultProps = {
-  formatFile: 'application/json',
-  multipleFile: false,
-  initialFiles: [],
-  removeItem: () => {},
-  setFile: () => {},
-  onChange: () => {},
-  hasListFiles: true,
-};
-
-export default AreaUpload;

package/src/components/FileArea/components/AreaUpload/styles.tsx

@@ -1,75 +0,0 @@
-import styled from 'styled-components';
-
-interface ContainerProps {
-  isDragAccept?: boolean;
-  isDragReject?: boolean;
-  isDragActive?: boolean;
-}
-
-const getColor = (props: ContainerProps) => {
-  if (props.isDragAccept) {
-    return '#6690ff';
-  }
-  if (props.isDragReject) {
-    return '#e18976';
-  }
-  if (props.isDragActive) {
-    return '#6690ff';
-  }
-  return '#979aa5';
-};
-
-export const Container = styled.div<ContainerProps>`
-  background-color: #f3f5f9;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  padding: 20px;
-  border-width: 2px;
-  border-radius: 4px;
-  border-color: var(${(props) => getColor(props)});
-  border-style: dashed;
-  color: #5a5d68;
-  outline: none;
-  transition: border 0.24s ease-in-out;
-
-  & > span {
-    margin: 8px 10px 0 0;
-    display: flex;
-  }
-
-  button {
-    padding: 8px 16px 8px 16px;
-    border-radius: 4px;
-    border: 2px #102693 solid;
-    margin-top: 10px;
-  }
-`;
-
-export const ListFiles = styled.div`
-  &.horizontal-itens {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-
-    & button {
-      margin: 4px;
-      white-space: nowrap;
-    }
-
-    .tag-file {
-      display: flex;
-      gap: 8px;
-      padding: 10px 24px !important;
-      color: #102693 !important;
-      font-size: 14px;
-      letter-spacing: 0px;
-    }
-
-    .tag-icon {
-      cursor: pointer;
-    }
-  }
-`;

package/src/components/FileArea/components/Modal/ModalButtonClose.tsx

@@ -1,23 +0,0 @@
-import React, { ReactNode } from 'react';
-import PropTypes from 'prop-types';
-import { MdClose } from 'react-icons/md';
-
-import { ModalButtonClose } from './styles';
-
-interface ModalButtonCloseComponentProps {
-  children?: ReactNode;
-}
-
-const ModalButtonCloseComponent: React.FC<ModalButtonCloseComponentProps> = ({ children, ...rest }) => {
-  return <ModalButtonClose {...rest}>{children}</ModalButtonClose>;
-};
-
-ModalButtonCloseComponent.propTypes = {
-  children: PropTypes.node,
-};
-
-ModalButtonCloseComponent.defaultProps = {
-  children: <MdClose color="#5A5D68" size={16} />,
-};
-
-export default ModalButtonCloseComponent;

package/src/components/FileArea/components/Modal/ModalContent.tsx

@@ -1,26 +0,0 @@
-import React, { ReactNode } from 'react';
-import PropTypes from 'prop-types';
-
-import { ModalContentWrapper } from './styles';
-
-interface ModalContentProps {
-  children: ReactNode;
-  maxheight?: string;
-  overflowy?: string;
-}
-
-const ModalContent: React.FC<ModalContentProps> = ({ children, maxheight = 'max-content', overflowy = 'initial', ...rest }) => {
-  return (
-    <ModalContentWrapper maxheight={maxheight} overflowy={overflowy} {...rest}>
-      {children}
-    </ModalContentWrapper>
-  );
-};
-
-ModalContent.propTypes = {
-  children: PropTypes.node.isRequired,
-  maxheight: PropTypes.string,
-  overflowy: PropTypes.string,
-};
-
-export default ModalContent;

package/src/components/FileArea/components/Modal/ModalFooter.tsx

@@ -1,18 +0,0 @@
-import React, { ReactNode } from 'react';
-import PropTypes from 'prop-types';
-
-import { ModalFooterWrapper } from './styles';
-
-interface ModalFooterProps {
-  children: ReactNode;
-}
-
-const ModalFooter: React.FC<ModalFooterProps> = ({ children, ...rest }) => {
-  return <ModalFooterWrapper {...rest}>{children}</ModalFooterWrapper>;
-};
-
-ModalFooter.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default ModalFooter;

package/src/components/FileArea/components/Modal/ModalHeader.tsx

@@ -1,18 +0,0 @@
-import React, { ReactNode } from 'react';
-import PropTypes from 'prop-types';
-
-import { ModalHeader } from './styles';
-
-interface ModalHeaderComponentProps {
-  children: ReactNode;
-}
-
-const ModalHeaderComponent: React.FC<ModalHeaderComponentProps> = ({ children, ...rest }) => {
-  return <ModalHeader {...rest}>{children}</ModalHeader>;
-};
-
-ModalHeaderComponent.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default ModalHeaderComponent;

package/src/components/FileArea/components/Modal/ModalTitle.tsx

@@ -1,18 +0,0 @@
-import React, { ReactNode } from 'react';
-import PropTypes from 'prop-types';
-
-import { ModalTitle } from './styles';
-
-interface ModalTitleComponentProps {
-  children: ReactNode;
-}
-
-const ModalTitleComponent: React.FC<ModalTitleComponentProps> = ({ children, ...rest }) => {
-  return <ModalTitle {...rest}>{children}</ModalTitle>;
-};
-
-ModalTitleComponent.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default ModalTitleComponent;

package/src/components/FileArea/components/Modal/index.tsx

@@ -1,131 +0,0 @@
-import React, { useEffect, useCallback, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { MdClose } from 'react-icons/md';
-
-import * as S from './styles';
-import ModalFooter from './ModalFooter';
-import ModalContent from './ModalContent';
-import ModalHeader from './ModalHeader';
-import ModalTitle from './ModalTitle';
-import ModalButtonClose from './ModalButtonClose';
-
-interface ModalProps {
-  isopen: boolean;
-  style?: React.CSSProperties;
-  maxwidth?: string;
-  maxheight?: string;
-  className?: string;
-  title?: string | React.ReactElement | React.ComponentType;
-  children: React.ReactNode;
-  onClose?: () => void;
-  contentStyle?: React.CSSProperties;
-  isfixed?: boolean;
-  zindex?: number;
-}
-
-const Modal: React.FC<ModalProps> = ({
-  isopen,
-  style,
-  maxwidth,
-  maxheight,
-  className,
-  title,
-  children,
-  onClose,
-  contentStyle,
-  isfixed,
-  zindex,
-}) => {
-  const modalRef = useRef<HTMLDivElement>(null);
-
-  const handleKeyUp = useCallback(
-    (e: KeyboardEvent) => {
-      const keys: { [key: number]: () => void } = {
-        // ESC Key
-        27: () => {
-          e.preventDefault();
-          if (!isfixed && onClose) {
-            onClose();
-          }
-          window.removeEventListener('keyup', handleKeyUp, false);
-        },
-      };
-
-      if (keys[e.keyCode] && isopen) {
-        keys[e.keyCode]();
-      }
-    },
-    [onClose, isopen, isfixed]
-  );
-
-  const handleOutsideClick = useCallback(
-    (e: MouseEvent) => {
-      if (modalRef.current && modalRef.current.parentNode === e.target) {
-        if (!isfixed && onClose) {
-          onClose();
-        }
-        document.removeEventListener('click', handleOutsideClick, false);
-      }
-    },
-    [onClose, isfixed]
-  );
-
-  useEffect(() => {
-    window.addEventListener('keyup', handleKeyUp, false);
-    document.addEventListener('click', handleOutsideClick, false);
-
-    return () => {
-      window.removeEventListener('keyup', handleKeyUp, false);
-      document.removeEventListener('click', handleOutsideClick, false);
-    };
-  }, [handleKeyUp, handleOutsideClick]);
-
-  return (
-    <S.FullScreen isfixed={isfixed ? 1 : 0} isopen={isopen ? 1 : 0} zindex={zindex ?? 0}>
-      <S.Modal ref={modalRef} style={style} maxwidth={maxwidth} className={className}>
-        <S.ModalContainer className="styleOverlay" maxheight={maxheight} style={contentStyle}>
-            <S.ModalHeader>
-              <S.ModalTitle>{String(title)}</S.ModalTitle>
-              <S.ModalButtonClose type="button" onClick={onClose}>
-                <MdClose color="#5A5D68" size={16} />
-              </S.ModalButtonClose>
-            </S.ModalHeader>
-          {children}
-        </S.ModalContainer>
-      </S.Modal>
-    </S.FullScreen>
-  );
-};
-
-Modal.propTypes = {
-  isopen: PropTypes.bool.isRequired,
-  title: PropTypes.oneOfType([
-    PropTypes.element,
-    PropTypes.string,
-    PropTypes.func,
-  ]),
-  children: PropTypes.node.isRequired,
-  onClose: PropTypes.func,
-  style: PropTypes.objectOf(PropTypes.any),
-  contentStyle: PropTypes.objectOf(PropTypes.any),
-  className: PropTypes.string,
-  maxwidth: PropTypes.string,
-  maxheight: PropTypes.string,
-  isfixed: PropTypes.bool,
-  zindex: PropTypes.number,
-};
-
-Modal.defaultProps = {
-  title: '',
-  style: {},
-  contentStyle: {},
-  className: '',
-  maxwidth: '360px',
-  maxheight: 'max-content',
-  isfixed: false,
-  onClose: () => {},
-  zindex: 9999,
-};
-
-export { ModalHeader, ModalTitle, ModalButtonClose, ModalContent, ModalFooter };
-export default Modal;

package/src/components/FileArea/components/Modal/styles.tsx

@@ -1,121 +0,0 @@
-import styled from 'styled-components';
-
-interface FullScreenProps {
-  isopen: number;
-  isfixed: number;
-  zindex: number;
-}
-
-export const FullScreen = styled.div<FullScreenProps>`
-  display: ${({ isopen }) => (isopen === 1 ? 'flex' : 'none')};
-  cursor: ${({ isfixed }) => (isfixed === 0 ? 'pointer' : 'default')};
-
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  justify-content: center;
-  align-items: center;
-  z-index: ${({ zindex }) => zindex};
-  animation: fadeIn 380ms ease-in-out 1;
-  background-color: #2f3845b8;
-  backdrop-filter: blur(2px);
-
-  @keyframes fadeIn {
-    from {
-      background-color: #2f384521;
-    }
-    to {
-      background-color: #2f3845b8;
-    }
-  }
-`;
-
-interface ModalProps {
-  maxwidth?: string;
-  maxheight?: string;
-}
-
-export const Modal = styled.div<ModalProps>`
-  background-color: #fff;
-  border-radius: 3px;
-  position: relative;
-  cursor: default;
-  width: 100%;
-  max-width: ${({ maxwidth }) => maxwidth};
-  animation: slideIn 350ms cubic-bezier(0.42, 0, 0.21, 1) 1;
-
-  @keyframes slideIn {
-    from {
-      transform: translateY(-120px);
-      opacity: 0;
-    }
-
-    20% {
-      opacity: 0;
-    }
-
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-`;
-
-interface ModalContainerProps {
-  maxheight?: string;
-}
-
-export const ModalContainer = styled.div<ModalContainerProps>`
-  width: 100%;
-  overflow-y: auto;
-  max-height: ${({ maxheight }) => maxheight};
-`;
-
-export const ModalHeader = styled.header`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #dadce3;
-  padding: var(--spacement-medium);
-`;
-
-export const ModalTitle = styled.div`
-  font-style: normal;
-  font-weight: normal;
-  font-size: 20px;
-  line-height: 150%;
-  letter-spacing: 0.0075em;
-  color: var(--neutral-4);
-`;
-
-export const ModalButtonClose = styled.button`
-  outline: none;
-  cursor: pointer;
-
-  :hover {
-    opacity: 0.7;
-  }
-`;
-
-interface ModalContentWrapperProps {
-  overflowy?: string;
-  maxheight?: string;
-}
-
-export const ModalContentWrapper = styled.div<ModalContentWrapperProps>`
-  width: 100%;
-  overflow-y: ${({ overflowy }) => overflowy};
-  max-height: ${({ maxheight }) => maxheight};
-  padding: var(--spacement-medium);
-`;
-
-export const ModalFooterWrapper = styled.div`
-  padding: var(--spacement-medium);
-  background: var(--neutral-0);
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--spacement-medium);
-`;

package/src/components/FileArea/components/Search/index.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import unorm from 'unorm';
-import { FaSearch } from 'react-icons/fa';
-import { InputContainer, Input, IconContainer } from './styles';
-import type { FileData } from '../../../../interface/FileData';
-
-interface SearchInputProps {
-  placeholder: string;
-  initialFiles: FileData[];
-  setFiles: React.Dispatch<React.SetStateAction<FileData[]>>;
-}
-
-const SearchInput: React.FC<SearchInputProps> = ({
-  placeholder,
-  setFiles,
-  initialFiles,
-}) => {
-  const searchName = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const searchTerm = e.target.value.trim();
-    const normalizedSearchTerm = unorm.nfkd(searchTerm).toLowerCase();
-
-    const newFiles = initialFiles.filter((file) => {
-      const normalizedFileName = unorm.nfkd(file.name).toLowerCase();
-      return normalizedFileName.includes(normalizedSearchTerm);
-    });
-
-    setFiles(searchTerm !== '' ? newFiles : initialFiles);
-  };
-
-  return (
-    <InputContainer>
-      <Input
-        type="text"
-        onChange={(e: any) => searchName(e)}
-        placeholder={placeholder}
-      />
-      <IconContainer>
-        <FaSearch />
-      </IconContainer>
-    </InputContainer>
-  );
-};
-
-export default SearchInput;