code7-leia 0.2.37 → 1.0.0

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;
-`;

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

@@ -1,97 +0,0 @@
-import React, { forwardRef, ReactNode } from 'react';
-import cc from 'classcat';
-
-import {
-  Container,
-  LabelWrapper,
-  CustomTextArea,
-  InputWrapper,
-  Helper,
-  Error,
-} from './styles';
-
-type TextAreaProps = {
-  id?: string;
-  label?: string;
-  placeholder?: string;
-  className?: string;
-  description?: string;
-  helper?: string;
-  error?: string;
-  color?: '' | 'danger' | 'success';
-  size?: 'small' | 'medium' | 'large';
-  startIcon?: string | ReactNode;
-  endIcon?: string | ReactNode;
-  disabled?: boolean;
-  marginBottom?: string;
-  rows?: number;
-} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
-
-const TextArea: React.FC<TextAreaProps> = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  (
-    {
-      id,
-      label,
-      description,
-      helper,
-      error,
-      placeholder,
-      className,
-      size = 'medium',
-      color = '',
-      disabled = false,
-      startIcon,
-      endIcon,
-      marginBottom = '3px',
-      rows = 4,
-      ...props
-    },
-    ref
-  ) => {
-    const selfId = id || `input__${Math.random().toString(36).substr(2, 9)}`;
-
-    return (
-      <Container className={className} marginBottom={marginBottom}>
-        {label && (
-          <LabelWrapper htmlFor={selfId}>
-            <span className="label">{label}</span>
-            {description && <span className="description">{description}</span>}
-          </LabelWrapper>
-        )}
-
-        <InputWrapper className={cc({ hasLabel: Boolean(label) })}>
-          <CustomTextArea
-            className={cc([
-              'input',
-              size,
-              color,
-              {
-                error: Boolean(error),
-                'has-start-icon': Boolean(startIcon),
-                'has-end-icon': Boolean(endIcon),
-              },
-            ])}
-            id={selfId}
-            placeholder={placeholder}
-            disabled={disabled}
-            rows={rows}
-            ref={ref}
-            {...props}
-          />
-          {startIcon && (
-            <span className={cc(['icon', 'start-icon'])}>{startIcon}</span>
-          )}
-          {endIcon && (
-            <span className={cc(['icon', 'end-icon'])}>{endIcon}</span>
-          )}
-        </InputWrapper>
-
-        {helper && <Helper className={cc(['helper', color])}>{helper}</Helper>}
-
-        {error && <Error className={cc(['error'])}>{error}</Error>}
-      </Container>
-    );
-  }
-);
-
-export default TextArea;