code7-leia 0.2.361 → 1.0.1

package/src/components/FileArea/styles.tsx

@@ -1,183 +0,0 @@
-import styled, { css } from 'styled-components';
-
-interface ContainerProps {
-  isloading?: boolean;
-}
-
-export const Container = styled.div<ContainerProps>`
-  ${(props) =>
-    props.isloading &&
-    css`
-      #loading {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgb(151,154,165, 0.7);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        z-index: 9999;
-      }
-
-      #loading::after {
-        content: "";
-        border: 4px solid #f3f3f3; /* Cor do símbolo de carregamento */
-        border-top: 4px solid #5a5d68; /* Cor do símbolo de carregamento */
-        border-radius: 50%;
-        width: 13px;
-        height: 13px;
-        animation: spin 1s linear infinite;
-      }
-
-      @keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-      }
-    `}
-
-
-  .tag {
-    padding: 4px 8px 4px 8px;
-    background: #C7F9ED;
-    border-radius: 4px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .tags {
-    display: flex;
-    justify-content: left;
-    gap: 4px;
-  }
-
-  .divDelete {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 4px;
-  }
-
-  .buttonDelete {
-    color: #5b0a1f;
-    background: #fae0d2;
-    padding: 12px 20px;
-    border-radius: 4px;
-
-    &:disabled {
-        cursor: not-allowed;
-        opacity: 0.7;
-      }
-  }
-
-  .buttonDelete:hover {
-      background: #f5bba7;
-  }
-
-  .buttonTraining {
-    color: #023906;
-    background: #e3f8cc;
-    padding: 12px 20px;
-    border-radius: 4px;
-    margin-right: 10px;
-
-    &:disabled {
-        cursor: not-allowed;
-        opacity: 0.7;
-      }
-  }
-
-  .buttonTraining:hover {
-      background: #90d665;
-  }
-
-  .button {
-    padding: 8px 16px 8px 16px;
-    border-radius: 4px;
-    gap: 10px;
-  }
-
-  .cancel {
-    background: #F3F5F9;
-    color: #5A5D68;
-  }
-
-  .send {
-    background: #102693;
-    color: white;
-  }
-
-  .delete {
-    background: #871821;
-    color: white;
-  }
-
-  .presset {
-    padding-top: 10px;
-    display: flex;
-    flex-direction: column;
-
-    p {
-      font-size: 14px;
-      font-weight: 600;
-      padding: 4px 0;
-    }
-  }
-
-  #warning {
-    padding: 10px;
-    background: #FAE0D2;
-    color: #871821;
-  }
-
-  #info {
-    padding: 10px;
-    background: #c7f9ed;
-    color: #00344e;
-  }
-
-`;
-
-export const Header = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  #button-upload {
-    margin-right: 10px;
-  }
-
-  .infos {
-    display: flex;
-    flex-direction: column;
-    padding: 14px 0;
-
-    h2 {
-      font-size: 20px
-    }
-
-    p {
-      font-size: 14px
-    }
-  }
-
-  .actions {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 14px;
-
-    button {
-      background: #102693;
-      padding: 10px 20px;
-      color: white;
-      border-radius: 4px;
-
-      &:disabled {
-        cursor: not-allowed;
-        opacity: 0.7;
-      }
-    }
-  }
-
-`

package/src/components/MultiSelect/index.tsx

@@ -1,102 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import * as S from './styles';
-import { getLanguage } from '../../utils/getLanguage'
-import { Language } from '../../interface/Language';
-
-interface Option {
-  label: string;
-  value: string;
-}
-
-interface MultiSelectProps {
-  options: Option[];
-  presset: string[];
-  setPresset: React.Dispatch<React.SetStateAction<string[]>>;
-  setOptions: React.Dispatch<React.SetStateAction<Option[]>>;
-  modal: boolean;
-  hasAddNewOptions: boolean;
-  language: keyof Record<'en' | 'pt-br' | 'es', Language>;
-}
-
-const MultiSelect: React.FC<MultiSelectProps> = ({ options, presset, setPresset, setOptions, modal, language, hasAddNewOptions }) => {
-  const [expanded, setExpanded] = useState(false);
-  const [newOption, setNewOption] = useState('');
-  const t = getLanguage(language)
-
-  useEffect(() => {
-    setExpanded(false)
-  }, [modal])
-
-  const handleCheckboxChange = (value: string) => {
-    setPresset(prevPresset => {
-      if (prevPresset.includes(value)) {
-        return prevPresset.filter(val => val !== value);
-      } else {
-        return [...prevPresset, value];
-      }
-    });
-  }
-
-  const showCheckboxes = () => {
-    setExpanded(!expanded);
-  }
-
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setNewOption(event.target.value);
-  }
-
-  const handleInputKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter' && hasAddNewOptions) {
-      event.preventDefault();
-      const trimmedOption = newOption.trim();
-      if (trimmedOption !== '' && !options.some(option => option.value === trimmedOption)) {
-        setOptions(prevOptions => [...prevOptions, { label: trimmedOption, value: trimmedOption }]);
-        setPresset(prevPresset => [...prevPresset, trimmedOption]);
-      }
-      setNewOption('');
-    }
-  }
-
-  return (
-    <form>
-      <S.MultiSelectWrapper>
-        <S.SelectBox onClick={showCheckboxes}>
-          <select>
-            {options.map((option, index) => (
-              <option key={index} value={option.value}>{option.label}</option>
-            ))}
-          </select>
-          <S.OverSelect>
-            <S.SelectedValues>
-              {presset.map((value, index) => (
-                <S.SelectedValue key={index}>{value}</S.SelectedValue>
-              ))}
-            </S.SelectedValues>
-            <input
-              type="text"
-              placeholder={hasAddNewOptions ? t.buttons.addNewPresset : t.buttons.addPresset}
-              value={newOption}
-              onChange={handleInputChange}
-              onKeyPress={handleInputKeyPress}
-            />
-          </S.OverSelect>
-        </S.SelectBox>
-        <S.Checkboxes style={{ display: expanded ? 'block' : 'none' }}>
-          {options.map((option, index) => (
-            <S.CheckboxLabel key={index} htmlFor={option.value}>
-              <input
-                type="checkbox"
-                id={option.value}
-                checked={presset.includes(option.value)}
-                onChange={() => handleCheckboxChange(option.value)}
-              />
-              {option.label}
-            </S.CheckboxLabel>
-          ))}
-        </S.Checkboxes>
-      </S.MultiSelectWrapper>
-    </form>
-  );
-}
-
-export default MultiSelect;

package/src/components/MultiSelect/styles.tsx

@@ -1,77 +0,0 @@
-import styled from 'styled-components';
-
-export const MultiSelectWrapper = styled.div`
-  width: 100%;
-  height: 45px;
-`;
-
-export const SelectBox = styled.div`
-  position: relative;
-
-  select {
-    width: 100%;
-    font-weight: bold;
-    height: 45px;
-    border-radius: 4px;
-  }
-`;
-
-export const OverSelect = styled.div`
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  display: flex;
-
-  input {
-    height: 43px;
-    width: calc(100% - 30px);
-    border: none;
-    margin: 1px;
-
-    &:focus {
-      outline: none;
-      box-shadow: 0 0 0 3px #6690ff;
-    }
-  }
-`;
-
-export const Checkboxes = styled.div`
-  display: none;
-  background: white;
-  position: absolute;
-  width: 95%;
-  z-index: 10;
-
-  label {
-    padding: 10px 5px;
-  }
-`;
-
-export const CheckboxLabel = styled.label`
-  display: block;
-
-  &:hover {
-    background-color: #6690ff;
-  }
-`;
-
-export const SelectedValues = styled.div`
-  position: absolute;
-  top: 9px;
-  display: flex;
-  flex-wrap: wrap;
-  margin-left: 5px;
-  right: 30px;
-`;
-
-export const SelectedValue = styled.div`
-  background-color: #254EDB;
-  color: white;
-  border-radius: 15px;
-  padding: 5px 10px;
-  margin-right: 5px;
-  margin-bottom: 5px;
-  white-space: nowrap;
-`;

package/src/components/Select/index.tsx

@@ -1,53 +0,0 @@
-import React, { useState } from 'react';
-import * as S from './styles';
-
-interface SelectOption {
-  value: string | number;
-  label: string;
-}
-
-interface SelectProps {
-  options: SelectOption[];
-  onSelect: (value: string) => void;
-  placeholder?: string;
-}
-
-const CustomSelect: React.FC<SelectProps> = ({ options, onSelect, placeholder }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedValue, setSelectedValue] = useState<string | number>('');
-
-  const handleSelectOption = (value: string | number) => {
-    const selected = String(value);
-    setSelectedValue(selected);
-    onSelect(selected);
-    setIsOpen(false);
-  };
-
-  return (
-    <S.Container>
-      <div className="custom-select" onClick={() => setIsOpen(!isOpen)}>
-        <div className="selected-option">
-          {selectedValue || placeholder}
-          <span className="arrow">&#9660;</span>
-        </div>
-        {isOpen && (
-          <div className="options">
-            {options.map(option => (
-              <div
-                key={option.value}
-                style={{ background: option.value === selectedValue ? '#a0b7f5' : undefined,
-                         color: option.value === selectedValue ? 'white' : undefined }}
-                className="option"
-                onClick={() => handleSelectOption(option.value)}
-              >
-                {option.label}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </S.Container>
-  );
-};
-
-export default CustomSelect;

package/src/components/Select/styles.tsx

@@ -1,49 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  position: relative;
-  width: 50%;
-  margin-right: 5px;
-
-  .custom-select {
-    position: relative;
-    width: 100%;
-    cursor: pointer;
-
-    .selected-option {
-      padding: 12px;
-      border-radius: 4px;
-      border: 1px solid #979AA5;
-      height: 45px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 14px;
-    }
-
-    .options {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      width: 100%;
-      border: 1px solid #979AA5;
-      border-top: none;
-      border-radius: 0 0 4px 4px;
-      background-color: #fff;
-      z-index: 9;
-
-      .option {
-        padding: 12px;
-        cursor: pointer;
-        transition: background-color 0.1s;
-        letter-spacing: 0.5px;
-        font-size: 14px;
-
-        &:hover {
-          background-color: #6690ff;
-          color: white;
-        }
-      }
-    }
-  }
-`;

package/src/components/Tabs/index.tsx

@@ -1,71 +0,0 @@
-import React, { ReactNode } from 'react';
-import PropTypes from 'prop-types';
-import cc from 'classcat';
-
-import * as S from './styles';
-
-interface TabProps {
-  children: ReactNode;
-  active?: boolean;
-}
-
-interface ITabsProps {
-  children: ReactNode;
-  value: string | number;
-  onChange: (e: any) => void;
-  active?: boolean;
-}
-
-export const Tab = ({ active, children, ...rest }: TabProps) => {
-  return (
-    <S.Tab className={cc({ active })} {...rest}>
-      {children}
-    </S.Tab>
-  );
-};
-
-Tab.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.element,
-    PropTypes.node,
-  ]).isRequired,
-  onChange: PropTypes.func,
-  value: PropTypes.string,
-  active: PropTypes.bool,
-};
-
-Tab.defaultProps = {
-  onChange: () => {},
-  value: '',
-  active: false,
-};
-
-export const Tabs = ({ children: childrenProp, value, onChange, ...rest }: ITabsProps) => {
-  const children = React.Children.map(childrenProp, (child) => {
-    if (!React.isValidElement(child)) {
-      return null;
-    }
-
-    if (Array.isArray(child.props?.children)) {
-      return React.cloneElement(child as React.ReactElement<any>, {
-        active: child.props?.value === value,
-        value,
-        onChange,
-      });
-    }
-
-    return React.cloneElement(child as React.ReactElement<any>, {
-      active: child.props?.value === value,
-      onClick: () => onChange(child.props?.value),
-    });
-  });
-
-  return <S.TabsPane {...rest}>{children}</S.TabsPane>;
-};
-
-Tabs.propTypes = {
-  children: PropTypes.node.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  onChange: PropTypes.func.isRequired,
-};

package/src/components/Tabs/styles.tsx

@@ -1,87 +0,0 @@
-import styled from 'styled-components';
-import { ReactNode } from 'react';
-
-interface TabProps {
-  children: ReactNode;
-}
-
-interface OptionProps {
-  children: ReactNode;
-  onClick: () => void;
-}
-
-export const TabsPane = styled.ul`
-  width: max-content;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--neutral-1);
-`;
-
-export const Tab = styled.li<TabProps>`
-  padding: 12px;
-  color: var(--neutral-3);
-  font-size: 0.875rem;
-  font-weight: normal;
-  position: relative;
-  cursor: pointer;
-
-  svg {
-    fill: var(--neutral-3) !important;
-    margin-left: 8px;
-  }
-
-  &.active {
-    color: var(--primary-700-light);
-
-    svg {
-      fill: var(--primary-700-light) !important;
-    }
-
-    ::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 2px;
-      background-color: var(--primary-700-light);
-    }
-  }
-
-  &:not(:last-child) {
-    margin-right: 8px;
-  }
-`;
-
-export const DropdownContainer = styled.div`
-  position: absolute;
-  left: 0px;
-  top: 40px;
-  display: flex;
-  flex-direction: column;
-
-  background: #ffffff;
-
-  border: 1px solid #979aa5;
-  box-sizing: border-box;
-  box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12),
-    0px 8px 24px -4px rgba(24, 39, 75, 0.08);
-  border-radius: 4px;
-  padding: 8px;
-  z-index: 2;
-`;
-
-export const Option = styled.div<OptionProps>`
-  padding: 8px;
-  font-size: 14px;
-  border-radius: 4px;
-  cursor: pointer;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  &:hover {
-    background-color: var(--primary-800-light);
-    color: white;
-  }
-`;

package/src/components/TestArea/components/InputTest/index.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import * as S from './styles';
-
-interface InputTestProps {
-  placeholder: string;
-  onChange: (value: string) => void;
-}
-
-const InputTest: React.FC<InputTestProps> = ({ placeholder, onChange }) => {
-  return (
-    <S.Container>
-      <S.StyledInput
-        type="text"
-        onChange={(e: any) => onChange(e.target.value)}
-        placeholder={placeholder}
-      />
-    </S.Container>
-  );
-};
-
-export default InputTest;

package/src/components/TestArea/components/InputTest/styles.tsx

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