code7-leia 0.2.361 → 1.0.0

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;

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

@@ -1,171 +0,0 @@
-import styled from 'styled-components';
-
-type ContainerProps = {
-  marginBottom?: string;
-};
-
-export const Container = styled.div<ContainerProps>`
-  display: flex;
-  flex-flow: column;
-  margin-bottom: ${({ marginBottom }) => marginBottom};
-`;
-
-export const InputWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  position: relative;
-  margin-right: 5px;
-  width: 725px;
-
-  .icon {
-    position: absolute;
-    color: #5a5d68;
-
-    &.start-icon {
-      left: 12px;
-    }
-    &.end-icon {
-      right: 12px;
-    }
-  }
-
-  & .pass-view {
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    padding: 14px;
-    font-size: 1rem;
-    color: #5a5d68;
-  }
-`;
-
-export const LabelWrapper = styled.label`
-  margin-bottom: 8px;
-
-  .label {
-    display: block;
-    color: #5a5d68;
-
-    font-style: normal;
-    font-weight: 600;
-    font-size: 0.875rem;
-    line-height: 114%;
-    letter-spacing: -0.02em;
-  }
-
-  .description {
-    font-style: normal;
-    font-weight: 500;
-    font-size: 0.625rem;
-    line-height: 120%;
-    color: #5a5d68;
-    display: block;
-  }
-`;
-
-export const CustomTextArea = styled.textarea`
-  font-family: 'Monospace', -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 0.875rem;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 20px;
-  text-align: left;
-  letter-spacing: -0.02em;
-  resize: vertical;
-  padding: 8px 12px;
-
-  border-radius: 4px;
-  border: 1px solid #979aa5;
-  color: #5a5d68 !important;
-  width: 100%;
-
-  background: #ffffff;
-  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
-    border 0.2s ease-in-out;
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px #6690ff;
-  }
-
-  &:hover {
-    border: 1px solid #102693;
-  }
-  &:active {
-    border: 1px solid #102693;
-  }
-  &:disabled {
-    border: 1px solid #dadce3;
-    background: #f3f5f9;
-    color: #dadce3;
-  }
-
-  &.small {
-    height: 32px;
-  }
-
-  &.medium {
-    height: 120px;
-  }
-
-  &.large {
-    height: 48px;
-    font-size: 1rem;
-  }
-
-  &.success {
-    background: #e3f8cc;
-    border: 1px solid #19660a;
-    color: #19660a;
-  }
-
-  &.danger {
-    background: #fae0d2;
-    border: 1px solid #871821;
-    color: #871821;
-  }
-
-  &.error {
-    background: #fae0d2;
-    border: 1px solid #871821;
-    color: #871821;
-  }
-
-  &.has-start-icon {
-    padding-left: 40px;
-  }
-  &.has-end-icon {
-    padding-right: 40px;
-  }
-`;
-
-export const Helper = styled.div`
-  &.helper {
-    font-style: normal;
-    font-weight: 500;
-    font-size: 0.625rem;
-    line-height: 120%;
-    color: #5a5d68;
-    display: block;
-    margin-top: 4px;
-
-    &.success {
-      color: #19660a;
-    }
-
-    &.danger {
-      color: #871821;
-    }
-  }
-`;
-
-export const Error = styled.div`
-  font-style: normal;
-  font-weight: 500;
-  font-size: 0.625rem;
-  line-height: 120%;
-  display: block;
-  margin-top: 4px;
-  color: #871821;
-`;

package/src/components/TestArea/index.tsx

@@ -1,101 +0,0 @@
-import React, { useState } from 'react';
-import { getLanguage } from '../../utils/getLanguage'
-import * as S from './styles';
-import Select from '../Select'
-import InputTest from './components/InputTest'
-import TextArea from './components/TextArea'
-import { PiWaveformBold  } from 'react-icons/pi';
-import { FaList } from 'react-icons/fa';
-import EmptyState from '../EmptyState';
-import { SharedPropsProvider, useSharedProps } from '../../contexts/SharedPropsProvider';
-import { MdPerson2 } from "react-icons/md";
-import { useDispatch, useSelector } from 'react-redux';
-import { testAction } from '../../store/modules/actions';
-
-export const TestArea = () => {
-  const { id, language, personas, propTags, token, env, readonly } = useSharedProps();
-  const t = getLanguage(language)
-  const results = useSelector((state: any) => state.message);
-  const isloading = useSelector((state: any) => state.isloading);
-  const [search, setSearch] = useState('');
-  const [prompt, setPrompt] = useState('');
-  const [profile, setProfile] = useState('');
-  const [presset, setPresset] = useState('');
-  const dispatch = useDispatch();
-  const tags = propTags ? propTags.tags : [];
-
-
-  const optionsPersona = personas && personas.map(persona => {
-    return { label: persona.name, value: persona.name }
-  })
-
-  const optionsPresset = tags.map(tag => {
-    return { label: tag, value: tag }
-  })
-
-  const handleSelectPersona = (value: string) => {
-    setProfile(value);
-  };
-
-  const handleSelectPresset = (value: string) => {
-    setPresset(value);
-  };
-
-  const handleSearch = (value: string) => {
-    setSearch(value);
-  };
-
-  const handlePrompt = (value: string) => {
-    setPrompt(value);
-  };
-
-  const handleTest = () => {
-    dispatch(testAction(search, prompt, profile, presset, id, token, env))
-  };
-
-  const returnTest = () => {  
-    return (
-      <S.Container isloading={isloading}>
-        <div id='loading' />
-        <S.Header>
-          <div className='infos'>
-            <h2>{t.test}</h2>
-            <p>{t.testArea.description}</p>
-          </div>
-        </S.Header>
-        <S.Inputs>
-          <InputTest placeholder={t.testArea.typeSentence} onChange={handleSearch} />
-          <Select placeholder={t.testArea.selectPersona} options={optionsPersona} onSelect={handleSelectPersona} />
-          <Select placeholder={t.testArea.selectPresset} options={optionsPresset} onSelect={handleSelectPresset} />
-          <button onClick={handleTest}><PiWaveformBold /> {t.buttons.test}</button>
-        </S.Inputs>
-        <S.Inputs>
-          {profile === "Custom" && <TextArea className="textarea-message" placeholder={t.testArea.typePrompt} value={prompt} onChange={(e) => { handlePrompt(e.target.value); }} />}
-        </S.Inputs>
-        {
-          !results ? (
-            <EmptyState
-              icon={<FaList></FaList>}
-              title={t.testArea.emptyState.title}
-              description={t.testArea.emptyState.description}
-              activeButton={false}
-            />
-          ) : <S.Result>
-                <div className='icon'>
-                  <MdPerson2 />
-                </div>
-                <div className='text'>{results}</div>
-              </S.Result>
-        }
-      </S.Container>
-    )
-  }
-
-  return (
-    <SharedPropsProvider id={id} token={token} readonly={readonly} language={language} env={env} propTags={{ tags: [] }} personas={[{name: '', description: ''}]}>
-      <S.Container>
-        {returnTest()}
-      </S.Container>
-    </SharedPropsProvider>
-  );
-};