code7-leia 1.0.13 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "code7-leia",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "author": "code7-xlab",
   "license": "MIT",
   "main": "dist/index.es.js",
@@ -18,7 +18,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "deploy": "npm run build && npm version patch && npm publish"
+    "deploy": "npm run build && npm version patch && npm publish",
+    "deploy-gio": "npm run build && npm publish"
   },
   "dependencies": {
     "axios": "^1.6.7",

package/src/components/EmptyState/styles.tsx

@@ -79,3 +79,7 @@ export const Container = styled.div<ContainerProps>`
     }
   }
 `;
+
+const Table = styled.table`
+  margin-top: 12px;
+`

package/src/components/PersonasArea/index.tsx

@@ -10,6 +10,7 @@ import LengthCounter from '../LengthCounter';
 import { useLeia } from '../../contexts/LeiaProvider';
 
 import * as S from './styles';
+import Table from '../FileArea/components/Table';
 
 interface Persona {
   id: number;
@@ -105,7 +106,7 @@ export const PersonasArea = () => {
   return (
     <S.Container>
       <S.Header>
-        <div>
+        <div className='infos'>
           <h2>{t.personas?.title}</h2>
           <p>{t.personas?.description}</p>
         </div>
@@ -113,19 +114,22 @@ export const PersonasArea = () => {
           <FaPlus /> {t.personas?.add}
         </button>
       </S.Header>
-      <Search placeholder={t.search} setFiles={setPersonas} initialFiles={personas}  />
-      <S.List>
-        {filteredPersonas?.map((persona: any) => (
-          <S.Row key={persona.id}>
-            <div className="info">
-              <strong>{persona.name}</strong>
-              <span>{persona.description}</span>
-            </div>
-            {/**
-             * Se tiver o created_at, significa que é uma persona criada pelo usuário
-             * e pode ser editada ou clonada. Caso contrário, é uma persona padrão e não pode ser editada.
-             */}
-            {persona.created_at && (
+      <S.Search>
+        <Search placeholder={t.search} setFiles={setPersonas} initialFiles={personas}  />
+      </S.Search>
+      <S.TableContainer>
+        <tbody>
+          {filteredPersonas?.map((persona: any) => (
+
+            <tr className = "tr-Row" key = {persona.id}>
+              <td>
+                <div className="info">
+                  <p><strong>{persona.name}</strong></p>
+                  <span>{persona.description}</span>
+                </div>
+              </td>
+              <td className='td-actions'>
+                {persona.created_at && (
               <div className="actions">
                 <button onClick={() => openEdit(persona)}>
                   <FaEdit /> {t.edit}
@@ -133,15 +137,19 @@ export const PersonasArea = () => {
                 <button onClick={() => openClone(persona)}>
                   <FaCopy /> {t.clone}
                 </button>
-                <button onClick={() => openDelete(persona)}>
+                <button className="button-delete" onClick={() => openDelete(persona)}>
                   <FaTrash /> {t.delete}
                 </button>
               </div>
             )}
+              </td>
+            </tr>
+
             
-          </S.Row>
-        ))}
-      </S.List>
+          ))}
+        </tbody>
+      </S.TableContainer>
+
 
       {isOpen && (
         <Modal onClose={() => setIsOpen(false)} title={t.personas?.modalTitle}>
@@ -150,11 +158,13 @@ export const PersonasArea = () => {
               value={form.name}
               placeholder={t.personas?.fields.name}
               onChange={(value: any) => setForm({ ...form, name: value })}
+              maxLength={50}
             />
             <Input
               value={form.description}
               placeholder={t.personas?.fields.description}
               onChange={(value: any) => setForm({ ...form, description: value })}
+              maxLength={200}
             />
           </S.InputWrapper>
           <TextArea

package/src/components/PersonasArea/styles.ts

@@ -18,7 +18,6 @@ export const Header = styled.div`
 
     h2 {
       font-size: 20px;
-      margin: 0;
     }
 
     p {
@@ -48,7 +47,7 @@ export const Header = styled.div`
 
 export const Search = styled.div`
   width: 320px;
-  margin-bottom: 15px;
+  margin-bottom: 12px;
 `;
 
 export const List = styled.div`
@@ -87,7 +86,7 @@ export const Row = styled.div`
     gap: 8px;
 
     button {
-      background: white;
+      background: red;
       border: 1px solid #dcdfe6;
       padding: 6px 10px;
       border-radius: 4px;
@@ -135,3 +134,72 @@ export const InputWrapper = styled.div`
   margin-bottom: 12px;
   max-width: 100%;
 `;
+
+export const TableContainer = styled.table`
+
+.tr-Row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  background: white;
+  padding: 14px;
+  border-radius: 5px;
+  border: 1px solid #dcdfe6;
+  margin-bottom: 2px;
+
+  .info {
+    display: flex;
+    flex-direction: column;
+
+    strong {
+      font-size: 14px;
+    }
+
+    span {
+      font-size: 13px;
+      color: #5a5d68;
+      margin-top: 2px;
+    }
+  }
+
+.actions {
+  display: flex;
+  gap: 8px;
+
+  button {
+    background: #f3f5f9;
+    cursor: pointer;
+    border: 1px solid #dcdfe6;
+    padding: 8px 12px;
+    border-radius: 4px;
+    color: rgb(16, 38, 147);
+
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    font-size: 12px;
+
+    svg {
+      width: 12px;
+      height: 12px;
+    }
+
+    &:hover {
+      background: #dadce3;
+    }
+  }
+
+  .button-delete {
+    background: #fae0d2;
+    border: 1px solid #f5c2c2;
+    color: #5b0a1f;
+
+    &:hover {
+      background: #f5bba7;
+    }
+  }
+}
+}
+`;

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

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

package/src/service/ApiDev.ts

@@ -2,7 +2,7 @@ import axios from 'axios';
 
 export const API_TOKEN = 'API_TOKEN';
 
-const url = 'http://localhost:5000';
+const url = 'https://api-hml.leia.digitalcontact.cloud'
 
 axios.defaults.baseURL = `${url}`;
 

package/src/utils/languages/en.ts

@@ -8,6 +8,7 @@ export const enTranslation: Language = {
   edit: 'Edit',
   clone: 'Clone',
   save: 'Save',
+  delete: 'Delete',
   copyPrefix: 'Copy',
 
   personas: {

package/src/utils/languages/es.ts

@@ -7,6 +7,7 @@ export const esTranslation: Language = {
   search: 'Buscar',
   edit: 'Editar',
   clone: 'Clonar',
+  delete: 'Borrar',
   save: 'Guardar',
   copyPrefix: 'Copia',
 

package/src/utils/languages/pt-br.ts

@@ -7,6 +7,7 @@ export const ptTranslation: Language = {
   search: 'Pesquisar',
   edit: 'Editar',
   clone: 'Clonar',
+  delete: 'Excluir',
   save: 'Salvar',
   copyPrefix: 'Cópia',