code7-leia 1.0.10 → 1.0.13

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

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

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { FaSearch } from 'react-icons/fa';
+import { InputContainer, Input, IconContainer } from './styles';
+import type { FileData } from '../../../../interface/FileData';
+
+import { stringNormalize } from '../../../../utils/stringNormalize'
+
+interface SearchInputProps {
+  placeholder: string;
+  initialFiles: any[];
+  setFiles: React.Dispatch<React.SetStateAction<any[]>>;
+}
+
+const SearchInput: React.FC<SearchInputProps> = ({
+  placeholder,
+  setFiles,
+  initialFiles,
+}) => {
+  const searchName = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const searchTerm = e.target.value.trim();
+    const normalizedSearchTerm = stringNormalize(searchTerm);
+
+    const newFiles = initialFiles.filter((file) => {
+      const normalizedFileName = stringNormalize(file.name);
+      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;

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

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+export const InputContainer = styled.div`
+  position: relative;
+  width: 300px;
+`;
+
+export const Input = styled.input`
+  padding-left: 40px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  height: 45px;
+  width: 100%;
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px #6690ff;
+  }
+`;
+
+export const IconContainer = styled.div`
+  position: absolute;
+  top: 14px;
+  left: 10px;
+  pointer-events: none;
+`;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import cc from 'classcat';
+
+import * as S from './styles';
+
+import { SpinnerProps } from '../../../../interface/Table'
+
+const Spinner: React.FC<SpinnerProps> = ({ color = 'neutral-3', size = 'md', className }) => {
+  return (
+    <S.SpinnerWrapper
+      color={color}
+      className={cc([`spinner--${size}`, className])}
+    >
+      <span />
+      <span />
+      <span />
+      <span />
+    </S.SpinnerWrapper>
+  );
+};
+
+export default Spinner;

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

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+
+export const SpinnerWrapper = styled.span`
+  display: inline-block;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.spinner--sm {
+    width: 24px;
+    height: 24px;
+  }
+
+  &.spinner--md {
+    width: 32px;
+    height: 32px;
+  }
+
+  &.spinner--lg {
+    width: 60px;
+    height: 60px;
+  }
+
+  span {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    margin: 8px;
+    border: 4px solid #fff;
+    border-radius: 50%;
+    animation: rotateSpinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: ${(props) => `var(--${props.color})`} transparent transparent
+      transparent;
+  }
+
+  & span:nth-child(1) {
+    animation-delay: -0.45s;
+  }
+
+  & span:nth-child(2) {
+    animation-delay: -0.3s;
+  }
+
+  & span:nth-child(3) {
+    animation-delay: -0.15s;
+  }
+
+  @keyframes rotateSpinner {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;

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

@@ -0,0 +1,34 @@
+import React, { forwardRef, Ref } from 'react';
+import PropTypes from 'prop-types';
+import cc from 'classcat';
+
+import * as S from './styles';
+import Spinner from '../Spinner';
+
+import { TableProps } from '../../../../interface/Table'
+
+const Table = forwardRef(
+  ({ size = 'medium', children, isloading = false, className = '', ...props }: TableProps, ref: Ref<HTMLTableElement>) => {
+    return (
+      <S.TableWrapper className={className}>
+        {isloading ? (
+          <S.TableLoadingWrapper>
+            <Spinner />
+          </S.TableLoadingWrapper>
+        ) : null}
+        <S.Table className={cc([size])} ref={ref} {...props}>
+          {children}
+        </S.Table>
+      </S.TableWrapper>
+    );
+  }
+);
+
+Table.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  isloading: PropTypes.bool,
+};
+
+export default Table;

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

@@ -0,0 +1,60 @@
+import styled from 'styled-components';
+
+export const TableWrapper = styled.div`
+  width: 100%;
+  height: max-content;
+  min-height: 50px;
+  position: relative;
+`;
+
+export const Table = styled.table`
+  font-size: 14px;
+  line-height: 143%;
+  color: black;
+  width: 100%;
+  border-collapse: collapse;
+  border-radius: 4px;
+
+  th {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 143%;
+    letter-spacing: 0.018em;
+    color: #5A5D68;
+    text-align: left;
+    padding: 8px;
+    border: 1px #dadce3 solid;
+  }
+
+  thead tr {
+    background: #dadce3;
+  }
+
+  tbody tr {
+    border: 1px solid #dadce3;
+  }
+
+  &.small td {
+    padding: 4px;
+  }
+
+  &.medium td {
+    padding: 8px;
+  }
+
+  &.large td {
+    padding: 16px;
+  }
+`;
+
+export const TableLoadingWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #f3f5f961;
+`;