starting new refatoring

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["istanbul"]
+}

.gitignore

@@ -46,3 +46,9 @@ yarn-error.log*
 
 # Ignore storybook static build
 /storybook-static
+
+
+# Ignore coverage cypress
+.nyc_output
+coverage/clover.xml
+coverage/coverage-final.json

cypress/plugins/index.js

@@ -1,4 +1,6 @@
 /// <reference types="cypress" />
+const browserify = require('@cypress/browserify-preprocessor');
+
 // ***********************************************************
 // This example plugins/index.js can be used to load plugins
 //
@@ -11,12 +13,20 @@
 
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
-
 /**
  * @type {Cypress.PluginConfig}
  */
 // eslint-disable-next-line no-unused-vars
-module.exports = () => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
+
+module.exports = (on, config) => {
+  require('@cypress/code-coverage/task')(on, config);
+  on('file:preprocessor', require('@cypress/code-coverage/use-browserify-istanbul'));
+
+  on(
+    'file:preprocessor',
+    browserify({
+      typescript: require.resolve('typescript'),
+    }),
+  );
+  return config;
 };

cypress/support/index.js

@@ -16,5 +16,6 @@
 // Import commands.js using ES2015 syntax:
 import './commands';
 import 'cypress-file-upload';
+import '@cypress/code-coverage/support';
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

package.json

@@ -24,7 +24,10 @@
     "deploy-storybook-gh-pages": "yarn run build-storybook && yarn run deploy-storybook"
   },
   "dependencies": {
+    "@headlessui/react": "^1.5.0",
+    "@heroicons/react": "^1.0.5",
     "axios": "^0.26.0",
+    "cypress": "^9.4.1",
     "identity-obj-proxy": "^3.0.0",
     "next": "^12.0.10",
     "react": "^17.0.2",
@@ -35,6 +38,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",
+    "@cypress/browserify-preprocessor": "^3.0.2",
+    "@cypress/code-coverage": "^3.9.12",
     "@react-mock/localstorage": "^0.1.2",
     "@storybook/addon-actions": "^6.4.19",
     "@storybook/addon-essentials": "^6.4.19",
@@ -57,7 +62,7 @@
     "@typescript-eslint/eslint-plugin": "^5.10.2",
     "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.3",
-    "cypress": "^9.4.1",
+    "babel-plugin-istanbul": "^6.1.1",
     "cypress-file-upload": "^5.0.8",
     "eslint": "8.9.0",
     "eslint-config-airbnb": "^19.0.4",

src/components/base/errorMsg.tsx

@@ -1,8 +1,8 @@
-interface propsInterface {
+interface PropsInterface {
   msg: string;
 }
 
-const ErrorMsg = ({ msg }: propsInterface) => (
+const ErrorMsg = ({ msg }: PropsInterface) => (
   <p className="p-0 m-0 w-full text-center text-skin-secondary-regular">{msg}</p>
 );
 

src/components/base/input.tsx

@@ -3,7 +3,7 @@ import GroupInput from './groupInput';
 import LabelComponent from './label';
 
 type setValueType = (a: string) => void;
-export interface propsInterfaceInput {
+export interface PropsInterfaceInput {
   text: string;
   value: string;
   type: 'text' | 'password' | 'email' | 'number';
@@ -12,7 +12,7 @@ export interface propsInterfaceInput {
   name: string;
 }
 
-const Input = ({ disabled, type, value, text, setValue, name }: propsInterfaceInput) => {
+const Input = ({ disabled, type, value, text, setValue, name }: PropsInterfaceInput) => {
   const handleInput = (event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.currentTarget.value);
   };

src/components/base/selected.tsx

@@ -2,15 +2,15 @@ import { ChangeEvent } from 'react';
 import GroupInput from './groupInput';
 import LabelComponent from './label';
 
-export interface propsInterfaceSelectedBase {
+export interface PropsInterfaceSelectedBase {
   text: string;
   value: string;
   setValue: (value: string) => void;
   name: string;
   render: { id: string; name: string }[];
 }
 
-const Selected = ({ render, text, setValue, value, name }: propsInterfaceSelectedBase) => {
+const Selected = ({ render, text, setValue, value, name }: PropsInterfaceSelectedBase) => {
   function renderItems() {
     return render.map((item) => (
       <option value={item.name} key={item.id}>

src/components/base/textArea.tsx

@@ -1,14 +1,14 @@
 import GroupInput from '@/base/groupInput';
 import LabelComponent from '@/base/label';
 
-export interface propsInterfaceTextArea {
+export interface PropsInterfaceTextArea {
   name: string;
   title: string;
   value: string;
   setValue: (value: string) => void;
 }
 
-const TextArea = ({ title, setValue, value, name }: propsInterfaceTextArea) => (
+const TextArea = ({ title, setValue, value, name }: PropsInterfaceTextArea) => (
   <GroupInput>
     <LabelComponent name={name} text={title} aria-label="Escolha uma descrição" />
 

src/components/widgets/breadcrumb.tsx

@@ -1,11 +1,11 @@
 import Link from 'next/link';
 
-interface propsInterface {
+interface PropsInterface {
   breadcrumbs: { url: string; text: string }[];
   admin: boolean;
 }
 
-const BreadcrumbComponent = ({ breadcrumbs, admin }: propsInterface) => {
+const BreadcrumbComponent = ({ breadcrumbs, admin }: PropsInterface) => {
   function renderBreadCrumb() {
     const lastItem = breadcrumbs.length - 1;
 

src/components/widgets/buttonLike.tsx

@@ -1,13 +1,13 @@
 import Button from '@/base/button';
 
-export interface propsInterfaceButtonLike {
+export interface PropsInterfaceButtonLike {
   active: boolean;
   title: string;
   styleBtn: 'testBtn' | 'likeBtn' | 'suggestionBtn';
   onClick: () => {};
 }
 
-const ButtonLike = ({ styleBtn, title, onClick, active }: propsInterfaceButtonLike) => (
+const ButtonLike = ({ styleBtn, title, onClick, active }: PropsInterfaceButtonLike) => (
   <Button className={`${styleBtn} ${active ? 'active' : ''}`} onClick={onClick}>
     {title}
   </Button>

src/components/widgets/managmentPost.tsx

@@ -13,11 +13,11 @@ import BreadcrumbComponent from '@/widgets/breadcrumb';
 import Title from '@/base/title';
 import Button from '@/base/button';
 import {
-  agentInterface,
-  difficultInterface,
-  mapInterface,
-  momentInterface,
-  sideInterface,
+  AgentInterface,
+  DifficultInterface,
+  MapInterface,
+  MomentInterface,
+  SideInterface,
 } from '@/interfaces/posts';
 import { FaTimes } from 'react-icons/fa';
 import { BsChevronUp, BsChevronDown } from 'react-icons/bs';
@@ -160,35 +160,35 @@ const CreatePostManagement = ({ breadcrumbs, mode }: modeManagment) => {
     setImgAdded(copyImgAdded);
   }
 
-  function renderAgent(): agentInterface[] {
+  function renderAgent(): AgentInterface[] {
     return agents();
   }
 
-  function renderSide(): sideInterface[] {
+  function renderSide(): SideInterface[] {
     return side();
   }
 
-  function renderMaps(): mapInterface[] {
+  function renderMaps(): MapInterface[] {
     return maps();
   }
 
-  function renderDifficult(): difficultInterface[] {
+  function renderDifficult(): DifficultInterface[] {
     return difficult();
   }
 
-  function renderMoment(): momentInterface[] {
+  function renderMoment(): MomentInterface[] {
     return moment();
   }
 
-  function renderHabilits() {
-    const filterAbilities: agentInterface = agents().filter(
+  function renderAbilities() {
+    const filterAbilities: AgentInterface = agents().filter(
       (agent) => agent.name === formTagAgent,
     )?.[0];
-    return filterAbilities?.habilits ?? [];
+    return filterAbilities?.abilities ?? [];
   }
 
   function renderPositionsMap() {
-    const filterMapPositions: mapInterface = maps().filter((map) => map.name === formTagMap)?.[0];
+    const filterMapPositions: MapInterface = maps().filter((map) => map.name === formTagMap)?.[0];
     return filterMapPositions?.mapPosition ?? [];
   }
 
@@ -349,7 +349,7 @@ const CreatePostManagement = ({ breadcrumbs, mode }: modeManagment) => {
               text="Habilidade"
               value={formTagAbility}
               setValue={setFormTagAbility}
-              render={renderHabilits()}
+              render={renderAbilities()}
             />
           </GroupInputMultiple>
 

src/components/widgets/pagination.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import PaginationButtons, { PaginationDotItems } from '@/base/paginationButtons';
 
-export interface propsInterfacePaginationComponent {
+export interface PropsInterfacePaginationComponent {
   initial: number;
   finish: number;
   selected: number;
@@ -18,7 +18,7 @@ const PaginationComponent = ({
   map,
   agent,
   urlBase,
-}: propsInterfacePaginationComponent) => {
+}: PropsInterfacePaginationComponent) => {
   const [pagination, setPagination] = useState<{ id: number }[]>([]);
 
   useEffect(() => {

src/components/widgets/postCard.tsx

@@ -5,15 +5,15 @@ import formatImage from '@/services/formatEnvironment';
 import { addNewPost, removePost, getPostsTested, getPostsSave } from '@/services/handlePosts';
 import Button from '@/base/button';
 import { MdArrowBackIosNew, MdArrowForwardIos } from 'react-icons/md';
-import { postsProps } from '@/interfaces/posts';
+import { PostsPropsInterface } from '@/interfaces/posts';
 import Image from 'next/image';
 import { isAuthenticated } from '../../core/services/auth';
 import PostButton from '../base/likeButton';
 
 type typeType = 'next' | 'prev';
 
 interface PropsPostInterface {
-  post: postsProps;
+  post: PostsPropsInterface;
   viewAdmin: boolean;
 }
 

src/components/widgets/postsItem.tsx

@@ -1,8 +1,8 @@
-import { postsProps } from '@/interfaces/posts';
+import { PostsPropsInterface } from '@/interfaces/posts';
 import PostCard from './postCard';
 
 interface postPropsInterface {
-  posts: postsProps[];
+  posts: PostsPropsInterface[];
 }
 
 const Posts = ({ posts }: postPropsInterface) => {

src/components/widgets/tagsFixFilters.tsx

@@ -1,11 +1,11 @@
 import Button from '@/base/button';
-import { filterUrlInterface } from '@/hooks/usePosts';
+import { FilterUrlInterface } from '@/hooks/usePosts';
 
-interface propsInterface {
-  queryUrl: filterUrlInterface;
+interface PropsInterface {
+  queryUrl: FilterUrlInterface;
 }
 
-const TagsFixFilters = ({ queryUrl }: propsInterface) => (
+const TagsFixFilters = ({ queryUrl }: PropsInterface) => (
   <div className="flex justify-center">
     <div>
       {queryUrl.agent ? (

src/core/contexts/filters.ts

@@ -1,7 +1,7 @@
 import { createContext, useContext } from 'react';
-import { contextTagsInterface } from '@/interfaces/posts';
+import { ContextTagsInterface } from '@/interfaces/posts';
 
-export const ContextFilters = createContext<contextTagsInterface>({
+export const ContextFilters = createContext<ContextTagsInterface>({
   tags: [],
   filters: [],
   setFilters: (filters) => new Error(`do you need use context Filters ${filters}`),