code7-leia 1.0.11 → 1.0.13

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "code7-leia",
-  "version": "1.0.11",
-  "author": "Yan Guilherme",
+  "version": "1.0.13",
+  "author": "code7-xlab",
   "license": "MIT",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/index.es.js",
+  "module": "dist/index.cjs.js",
+  "types": "src/types/image.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
@@ -13,7 +13,7 @@
     }
   },
   "files": [
-    "dist"
+    "src"
   ],
   "scripts": {
     "dev": "vite",

package/src/components/CustomToast/index.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { toast as reactToast } from 'react-toastify';
+
+import { CustomContainerToast } from './styles';
+
+interface CustomToastContentProps {
+  title: String;
+  description?: String;
+}
+
+const CustomToastContent: React.FC<CustomToastContentProps> = ({
+  title,
+  description
+}) => {
+  return (
+    <>
+      <div className="custom-toastify-content">
+        <strong className="custom-toastify-title">{title}</strong>
+        {description && (
+          <p className="custom-toastify-description">{description}</p>
+        )}
+      </div>
+    </>
+  );
+};
+
+const toast = {
+  default: ({ title, description }: CustomToastContentProps) =>
+    reactToast(
+      <CustomToastContent
+        title={title}
+        description={description}
+      />
+    ),
+  success: ({ title, description }: CustomToastContentProps) =>
+    reactToast.success(
+      <CustomToastContent
+        title={title}
+        description={description}
+      />
+    ),
+  error: ({ title, description }: CustomToastContentProps) =>
+    reactToast.error(
+      <CustomToastContent
+        title={title}
+        description={description}
+      />
+    ),
+  warn: ({ title, description }: CustomToastContentProps) =>
+    reactToast.warn(
+      <CustomToastContent
+        title={title}
+        description={description}
+      />
+    ),
+};
+
+const ContainerToast: React.FC = () => {
+  return <CustomContainerToast autoClose={4000} />;
+};
+
+export { ContainerToast, toast };

package/src/components/CustomToast/styles.tsx

@@ -0,0 +1,74 @@
+import styled from 'styled-components';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+interface CustomContainerToastProps {
+}
+
+export const CustomContainerToast = styled(ToastContainer)<CustomContainerToastProps>`
+  .Toastify__toast {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+      'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+      'Helvetica Neue', sans-serif;
+    padding: 6px 12px;
+    border-radius: 5px;
+    top: 66px;
+
+    .custom-toastify-content {
+      display: flex;
+      flex-direction: column;
+    }
+    .custom-toastify-icon {
+      margin-right: 10px;
+    }
+    .custom-toastify-title {
+      color: #3d4859;
+      font-size: 0.875rem;
+      margin-bottom: 2px;
+    }
+    .custom-toastify-description {
+      color: #5a5d68;
+      font-size: 0.813rem;
+      margin-bottom: 2px;
+    }
+    .custom-toastify-action {
+      margin-top: 14px;
+    }
+  }
+
+  .Toastify__toast--default {
+    background: #fff;
+    border-left: 5px solid #3366FF;
+  }
+
+  .Toastify__toast--success {
+    background: #fff;
+    border-left: 5px solid #3366FF;
+  }
+
+  .Toastify__toast--error {
+    background: #fff;
+    border-left: 5px solid #f9675b;
+  }
+
+  .Toastify__toast--warning {
+    border-left: 5px solid #f9a75b;
+    background: #fff;
+  }
+
+  .Toastify__close-button {
+    color: #858f9e;
+  }
+
+  .Toastify__toast-body {
+    margin: auto 0px;
+    font-size: 1rem;
+    flex: 1 1 0%;
+    display: flex;
+    align-items: center;
+  }
+
+  .Toastify__progress-bar {
+    background: #3d48593d;
+  }
+`;

package/src/components/EmptyState/index.tsx

@@ -0,0 +1,88 @@
+import React, { FC, ReactElement } from 'react';
+import PropTypes from 'prop-types';
+import * as S from './styles';
+
+interface EmptyStateProps {
+  icon?: string | ReactElement;
+  title?: string;
+  description?: string;
+  activeButton?: boolean;
+  iconButton?: ReactElement;
+  descriptionButton?: string;
+  widthButton?: string;
+  button?: ReactElement;
+  backgroundIcon?: string;
+  backgroundColor?: string;
+  hasborder?: boolean;
+}
+
+const EmptyState: FC<EmptyStateProps> = ({
+  icon,
+  title,
+  description,
+  activeButton,
+  iconButton,
+  descriptionButton,
+  widthButton,
+  button,
+  backgroundIcon,
+  backgroundColor,
+  hasborder,
+  ...rest
+}) => {
+  return (
+    <S.Container
+      backgroundicon={backgroundIcon}
+      backgroundcolor={backgroundColor}
+      hasborder={hasborder}
+      {...rest}
+    >
+      <div className="content">
+        <div className="icon">
+          {icon}
+        </div>
+        <div className="description">
+          <h5> {title}</h5>
+
+          <p>{description}</p>
+
+          {activeButton ? (
+            <button>
+              {iconButton} {descriptionButton}
+            </button>
+          ) : null}
+
+          {button}
+        </div>
+      </div>
+    </S.Container>
+  );
+};
+
+EmptyState.propTypes = {
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  title: PropTypes.string,
+  description: PropTypes.string,
+  activeButton: PropTypes.bool,
+  iconButton: PropTypes.element,
+  descriptionButton: PropTypes.string,
+  widthButton: PropTypes.string,
+  button: PropTypes.element,
+  backgroundIcon: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  hasborder: PropTypes.bool,
+};
+
+EmptyState.defaultProps = {
+  icon: '',
+  title: '',
+  description: '',
+  activeButton: false,
+  descriptionButton: '',
+  widthButton: '140px',
+  backgroundIcon: 'var(--neutral-0)',
+  backgroundColor: 'var(--absolute-white)',
+  hasborder: true,
+};
+
+export default EmptyState;

package/src/components/EmptyState/styles.tsx

@@ -0,0 +1,81 @@
+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

@@ -0,0 +1,137 @@
+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

@@ -0,0 +1,86 @@
+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;
+  }
+
+  & > p {
+    flex-shrink: 1;
+    min-width: 0;
+    max-width: 90%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+    text-align: center;
+  }
+`;
+
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,18 @@
+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;