From 4fdbf058bb805ffa37ee132177f2790c958bc672 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roger=20Boixader=20G=C3=BCell?= <rboixaderg@gmail.com>
Date: Sun, 14 Jan 2024 18:20:08 +0100
Subject: [PATCH 01/20] feat: Add inputs search to editComponent

---
 CHANGELOG.md                                  |   4 +
 e2e/cypress/integration/gmi-type-content.js   |  46 +++
 .../guillotina_react_app/gmi/interface.py     |  19 +
 package.json                                  |   2 +-
 .../components/behaviors/iattachment.js       |  12 +-
 .../components/behaviors/idublincore.js       |  12 +-
 .../components/behaviors/iimageattachment.js  |   9 +-
 .../components/behaviors/imultiattachment.js  |   9 +-
 .../behaviors/imultiimageattachment.js        |   9 +-
 .../components/fields/editComponent.js        |  55 ++-
 .../components/fields/renderField.js          |  83 ++++-
 .../components/input/search_input.js          | 135 +++++--
 .../components/input/search_input_list.js     | 351 ++++++++++++++++++
 src/guillo-gmi/components/panel/properties.js |  10 +-
 src/guillo-gmi/views/groups.js                |   6 +-
 yarn.lock                                     |  13 +-
 16 files changed, 718 insertions(+), 57 deletions(-)
 create mode 100644 src/guillo-gmi/components/input/search_input_list.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b42291c..877bc7b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+0.25.0
+------
+- feat: Add inputs search to editComponent
+
 0.24.1
 ------
 - fix: Render vocabulary field
diff --git a/e2e/cypress/integration/gmi-type-content.js b/e2e/cypress/integration/gmi-type-content.js
index e2ab421..c99c423 100644
--- a/e2e/cypress/integration/gmi-type-content.js
+++ b/e2e/cypress/integration/gmi-type-content.js
@@ -57,6 +57,52 @@ LOGIN_TYPES.forEach((loginType) => {
         `[data-test='${TABS_PANEL_SELECTOS.prefixTabs}-properties']`
       ).click()
 
+      // Modify search item
+      cy.get(
+        `[data-test='${EDITABLE_FORM_SELECTORS.prefixEditableField}-brother_gmi']`
+      ).click()
+      cy.get(`[data-test='wrapperSearchInputTest']`).click()
+      cy.findByText('Test GMI item 9').click()
+      cy.findByText('Save').click()
+      cy.get(NOTIFICATION_SELECTOR).should(
+        'contain',
+        `Field brother_gmi, updated!`
+      )
+      cy.findByText('Test GMI item 9').click()
+      cy.get(
+        `[data-test='${EDITABLE_FORM_SELECTORS.prefixEditableField}-brother_gmi']`
+      ).click()
+      cy.get(`[data-test='wrapperSearchInputTest']`).click()
+      cy.findByText('Test GMI item 6').click()
+      cy.findByText('Save').click()
+      cy.get(NOTIFICATION_SELECTOR).should(
+        'contain',
+        `Field brother_gmi, updated!`
+      )
+
+      // Modify search item list
+      cy.get(
+        `[data-test='${EDITABLE_FORM_SELECTORS.prefixEditableField}-gmi_ids']`
+      ).click()
+      cy.get(`[data-test='wrapperSearchInputTest']`).click()
+      cy.findByText('Test GMI item 9').click()
+      cy.findByText('Test GMI item 7').click()
+      cy.get(`[data-test='wrapperSearchInputTest']`).click()
+      cy.findByText('Save').click()
+      cy.get(NOTIFICATION_SELECTOR).should('contain', `Field gmi_ids, updated!`)
+      cy.findByText('Test GMI item 9')
+      cy.findByText('Test GMI item 7')
+      cy.get(
+        `[data-test='${EDITABLE_FORM_SELECTORS.prefixEditableField}-gmi_ids']`
+      ).click()
+      cy.findAllByText('Test GMI item 9').within(() => {
+        cy.get('button').click()
+      })
+      cy.findByText('Save').click()
+      cy.get(NOTIFICATION_SELECTOR).should('contain', `Field gmi_ids, updated!`)
+      cy.findByText('Test GMI item 7')
+      cy.findByText('Test GMI item 9').should('not.exist')
+
       // Upload file
       cy.get(
         `[data-test='${EDITABLE_FORM_SELECTORS.prefixEditableField}-file']`
diff --git a/guillotina_example/guillotina_react_app/guillotina_react_app/gmi/interface.py b/guillotina_example/guillotina_react_app/guillotina_react_app/gmi/interface.py
index d7adbe2..d09872a 100644
--- a/guillotina_example/guillotina_react_app/guillotina_react_app/gmi/interface.py
+++ b/guillotina_example/guillotina_react_app/guillotina_react_app/gmi/interface.py
@@ -73,3 +73,22 @@ class IGMI(interfaces.IFolder):
         ), 
         missing_value=[]
     )
+
+    gmi_ids = schema.List(
+        title="GMI list",
+        value_type=schema.TextLine(),
+        default=[],
+        null=True,
+        blank=True,
+        widget="search_list",
+        labelProperty="title",
+        typeNameQuery="GMI",
+    )
+
+    brother_gmi = schema.Text(
+        title="Brother GMI", 
+        widget="search",
+        typeNameQuery="GMI",
+        labelProperty="title",
+        required=False
+    )
diff --git a/package.json b/package.json
index d3e223c..93d4125 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.24.1",
+  "version": "0.25.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:guillotinaweb/guillotina_react.git"
diff --git a/src/guillo-gmi/components/behaviors/iattachment.js b/src/guillo-gmi/components/behaviors/iattachment.js
index 64b15e4..e9d361c 100644
--- a/src/guillo-gmi/components/behaviors/iattachment.js
+++ b/src/guillo-gmi/components/behaviors/iattachment.js
@@ -2,19 +2,27 @@ import React from 'react'
 import { useTraversal } from '../../contexts'
 import { EditableField } from '../fields/editableField'
 import { Table } from '../ui'
+import { useIntl } from 'react-intl'
+import { genericMessages } from '../../locales/generic_messages'
 
 export function IAttachment({ properties, values }) {
+  const intl = useIntl()
   const Ctx = useTraversal()
   const modifyContent = Ctx.hasPerm('guillotina.ModifyContent')
 
   return (
     <Table
-      headers={['Field', 'Value']}
+      headers={[
+        intl.formatMessage(genericMessages.property),
+        intl.formatMessage(genericMessages.value),
+      ]}
       className="is-striped is-fullwidth is-size-7"
     >
       {Object.keys(properties).map((key) => (
         <tr key={'attachment_' + key}>
-          <td key={1}>{key}</td>
+          <td style={{ width: '150px' }} key={1}>
+            {key}
+          </td>
           <td key={2}>
             <EditableField
               field={key}
diff --git a/src/guillo-gmi/components/behaviors/idublincore.js b/src/guillo-gmi/components/behaviors/idublincore.js
index 3e916c5..7c38380 100644
--- a/src/guillo-gmi/components/behaviors/idublincore.js
+++ b/src/guillo-gmi/components/behaviors/idublincore.js
@@ -2,6 +2,8 @@ import React from 'react'
 import { useTraversal } from '../../contexts'
 import { EditableField } from '../fields/editableField'
 import { Table } from '../ui'
+import { useIntl } from 'react-intl'
+import { genericMessages } from '../../locales/generic_messages'
 
 const editableFields = [
   'title',
@@ -11,17 +13,23 @@ const editableFields = [
 ]
 
 export function IDublinCore({ properties, values }) {
+  const intl = useIntl()
   const Ctx = useTraversal()
   const modifyContent = Ctx.hasPerm('guillotina.ModifyContent')
 
   return (
     <Table
-      headers={['Field', 'Value']}
+      headers={[
+        intl.formatMessage(genericMessages.property),
+        intl.formatMessage(genericMessages.value),
+      ]}
       className="is-striped is-fullwidth is-size-7"
     >
       {Object.keys(properties).map((key) => (
         <tr key={'dublin_' + key}>
-          <td key={1}>{key}</td>
+          <td style={{ width: '150px' }} key={1}>
+            {key}
+          </td>
           <td key={2}>
             <EditableField
               field={key}
diff --git a/src/guillo-gmi/components/behaviors/iimageattachment.js b/src/guillo-gmi/components/behaviors/iimageattachment.js
index 76f9e07..3e37e85 100644
--- a/src/guillo-gmi/components/behaviors/iimageattachment.js
+++ b/src/guillo-gmi/components/behaviors/iimageattachment.js
@@ -82,7 +82,10 @@ export function IImageAttachment({ properties, values }) {
 
   return (
     <Table
-      headers={['Field', 'Value']}
+      headers={[
+        intl.formatMessage(genericMessages.property),
+        intl.formatMessage(genericMessages.value),
+      ]}
       className="is-striped is-fullwidth is-size-7"
     >
       {showConfirmToDelete && (
@@ -97,7 +100,9 @@ export function IImageAttachment({ properties, values }) {
       )}
       {values['image'] && (
         <tr>
-          <td key={1}>{intl.formatMessage(genericMessages.image)}</td>
+          <td key={1} style={{ width: '150px' }}>
+            {intl.formatMessage(genericMessages.image)}
+          </td>
           <td key={2}>
             <div className="is-flex is-align-items-center">
               <EditableField
diff --git a/src/guillo-gmi/components/behaviors/imultiattachment.js b/src/guillo-gmi/components/behaviors/imultiattachment.js
index 2fa9863..1c4aee6 100644
--- a/src/guillo-gmi/components/behaviors/imultiattachment.js
+++ b/src/guillo-gmi/components/behaviors/imultiattachment.js
@@ -65,7 +65,10 @@ export function IMultiAttachment({ properties, values }) {
 
   return (
     <Table
-      headers={['Field', 'Value']}
+      headers={[
+        intl.formatMessage(genericMessages.property),
+        intl.formatMessage(genericMessages.value),
+      ]}
       className="is-striped is-fullwidth is-size-7"
     >
       {fileKeyToDelete && (
@@ -84,7 +87,9 @@ export function IMultiAttachment({ properties, values }) {
 
       {Object.keys(values['files']).map((key) => (
         <tr key={'multiattachment_' + key}>
-          <td key={1}>{key}</td>
+          <td key={1} style={{ width: '150px' }}>
+            {key}
+          </td>
           <td key={2}>
             <div className="is-flex is-align-items-center">
               <EditableField
diff --git a/src/guillo-gmi/components/behaviors/imultiimageattachment.js b/src/guillo-gmi/components/behaviors/imultiimageattachment.js
index 2c466b8..eda2fb1 100644
--- a/src/guillo-gmi/components/behaviors/imultiimageattachment.js
+++ b/src/guillo-gmi/components/behaviors/imultiimageattachment.js
@@ -91,7 +91,10 @@ export function IMultiImageAttachment({ properties, values }) {
 
   return (
     <Table
-      headers={['Field', 'Value']}
+      headers={[
+        intl.formatMessage(genericMessages.property),
+        intl.formatMessage(genericMessages.value),
+      ]}
       className="is-striped is-fullwidth is-size-7"
     >
       {fileKeyToDelete && (
@@ -110,7 +113,9 @@ export function IMultiImageAttachment({ properties, values }) {
 
       {Object.keys(values['images']).map((key) => (
         <tr key={`multiimageattachment_${key}`}>
-          <td key={1}>{key}</td>
+          <td key={1} style={{ width: '150px' }}>
+            {key}
+          </td>
           <td key={2}>
             <div className="is-flex is-align-items-center">
               <EditableField
diff --git a/src/guillo-gmi/components/fields/editComponent.js b/src/guillo-gmi/components/fields/editComponent.js
index 0b44893..9013a43 100644
--- a/src/guillo-gmi/components/fields/editComponent.js
+++ b/src/guillo-gmi/components/fields/editComponent.js
@@ -7,10 +7,63 @@ import { Input } from '../input/input'
 import { InputList } from '../input/input_list'
 import { get } from '../../lib/utils'
 import { SelectVocabulary } from '../input/select_vocabulary'
+import { SearchInputList } from '../input/search_input_list'
+import { SearchInput } from '../input/search_input'
+import { useTraversal } from '../../contexts'
 
 export const EditComponent = React.forwardRef(
   ({ schema, val, setValue, dataTest, className, ...rest }, ref) => {
-    if (schema?.widget === 'textarea' || schema?.widget === 'richtext') {
+    const traversal = useTraversal()
+
+    if (schema?.widget === 'search_list') {
+      return (
+        <React.Fragment>
+          {rest.placeholder && (
+            <label className="label">{rest.placeholder}</label>
+          )}
+          <SearchInputList
+            value={val || []}
+            traversal={traversal}
+            className={className}
+            onChange={(ev) => setValue(ev)}
+            queryCondition={
+              schema?.queryCondition ? schema.queryCondition : 'title__in'
+            }
+            dataTest={dataTest}
+            path={schema.queryPath}
+            labelProperty={
+              schema?.labelProperty ? schema.labelProperty : 'title'
+            }
+            typeNameQuery={schema?.typeNameQuery ? schema.typeNameQuery : null}
+            {...rest}
+          />
+        </React.Fragment>
+      )
+    } else if (schema?.widget === 'search') {
+      return (
+        <React.Fragment>
+          {rest.placeholder && (
+            <label className="label">{rest.placeholder}</label>
+          )}
+          <SearchInput
+            value={val}
+            traversal={traversal}
+            className={className}
+            onChange={(ev) => setValue(ev)}
+            queryCondition={
+              schema?.queryCondition ? schema.queryCondition : 'title__in'
+            }
+            dataTest={dataTest}
+            path={schema.queryPath}
+            labelProperty={
+              schema?.labelProperty ? schema.labelProperty : 'title'
+            }
+            typeNameQuery={schema?.typeNameQuery ? schema.typeNameQuery : null}
+            {...rest}
+          />
+        </React.Fragment>
+      )
+    } else if (schema?.widget === 'textarea' || schema?.widget === 'richtext') {
       return (
         <Textarea
           value={val || ''}
diff --git a/src/guillo-gmi/components/fields/renderField.js b/src/guillo-gmi/components/fields/renderField.js
index 1d2e3c1..5f50380 100644
--- a/src/guillo-gmi/components/fields/renderField.js
+++ b/src/guillo-gmi/components/fields/renderField.js
@@ -1,8 +1,11 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { DownloadField } from './downloadField'
 import { useIntl } from 'react-intl'
 import { useVocabulary } from '../../hooks/useVocabulary'
 import { get } from '../../lib/utils'
+import { buildQs } from '../../lib/search'
+import { useTraversal } from '../../contexts'
+import { useConfig } from '../../hooks/useConfig'
 
 const plain = ['string', 'number', 'boolean']
 
@@ -49,6 +52,76 @@ const getDefaultValueEditableField = (intl) => {
   })
 }
 
+export const SearchRenderField = ({ schema, value, modifyContent }) => {
+  const [valuesLabels, setValuesLabels] = useState([])
+  const [isLoadingData, setIsLoadingData] = useState(false)
+  const traversal = useTraversal()
+  const { SearchEngine } = useConfig()
+
+  useEffect(() => {
+    const fetchData = async (valuesToSearch) => {
+      setIsLoadingData(true)
+      let searchTermQs = []
+
+      const searchTermParsed = ['__or', `id=${valuesToSearch.join('%26id=')}`]
+      const { get: getSearch } = traversal.registry
+      const fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine)
+      const qsParsed = traversal.client[fnName]({
+        path: traversal.path,
+        start: 0,
+        pageSize: 100,
+        withDepth: false,
+      })
+
+      if (searchTermParsed.length > 0 || qsParsed.length > 0) {
+        searchTermQs = buildQs([searchTermParsed, ...qsParsed])
+      }
+      const data = await traversal.client.search(
+        traversal.client.getContainerFromPath(traversal.path),
+        searchTermQs,
+        false,
+        false,
+        0,
+        100
+      )
+
+      const newValuesLabel = data.items.map((item) => {
+        return get(item, schema?.labelProperty ?? 'title', item.id)
+      })
+      setValuesLabels(newValuesLabel)
+      setIsLoadingData(false)
+    }
+
+    let valuesToSearch = value
+    if (typeof valuesToSearch === 'string') {
+      valuesToSearch = [valuesToSearch]
+    }
+
+    if (valuesToSearch !== undefined && valuesToSearch.length > 0) {
+      fetchData(valuesToSearch)
+    } else {
+      setValuesLabels([])
+    }
+  }, [value])
+
+  const getRenderValue = () => {
+    console.log('get render values', value, valuesLabels)
+    if (value === undefined) {
+      if (modifyContent) {
+        return DEFAULT_VALUE_EDITABLE_FIELD
+      }
+      return DEFAULT_VALUE_NO_EDITABLE_FIELD
+    }
+    if (isLoadingData) {
+      return 'Loading...'
+    }
+
+    return valuesLabels
+  }
+
+  return <RenderField value={getRenderValue()} />
+}
+
 export const VocabularyRenderField = ({ schema, value, modifyContent }) => {
   const intl = useIntl()
   const DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl)
@@ -109,8 +182,14 @@ export function RenderFieldComponent({ schema, field, val, modifyContent }) {
     } else if (schema?.items?.vocabularyName || schema?.vocabularyName) {
       renderProps['Widget'] = VocabularyRenderField
       renderProps['schema'] = schema
+    } else if (
+      schema?.widget === 'search' ||
+      schema?.widget === 'search_list'
+    ) {
+      renderProps['Widget'] = SearchRenderField
+      renderProps['value'] = val
+      renderProps['schema'] = schema
     }
-
     return renderProps
   }
 
diff --git a/src/guillo-gmi/components/input/search_input.js b/src/guillo-gmi/components/input/search_input.js
index 9beadac..d2487f4 100644
--- a/src/guillo-gmi/components/input/search_input.js
+++ b/src/guillo-gmi/components/input/search_input.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 
 import PropTypes from 'prop-types'
 import { buildQs } from '../../lib/search'
@@ -10,6 +10,8 @@ import { generateUID } from '../../lib/helpers'
 import { useConfig } from '../../hooks/useConfig'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
+import useClickAway from '../../hooks/useClickAway'
+import { get } from '../../lib/utils'
 function debounce(func, wait) {
   let timeout
   return function () {
@@ -45,6 +47,8 @@ export const SearchInput = ({
   dataTestSearchInput = 'searchInputTest',
   dataTestItem = 'searchInputItemTest',
   renderTextItemOption = null,
+  typeNameQuery = null,
+  labelProperty = 'id',
 }) => {
   const intl = useIntl()
   const [options, setOptions] = useSetState(initialState)
@@ -53,9 +57,14 @@ export const SearchInput = ({
   const inputRef = React.useRef(null)
   const wrapperRef = React.useRef(null)
   const { PageSize, SearchEngine } = useConfig()
-
+  const [valueLabel, setValueLabel] = useState(undefined)
+  const [isLoadingData, setIsLoadingData] = useState(false)
   const [uid] = useState(generateUID('search_input'))
 
+  useClickAway(wrapperRef, () => {
+    setIsOpen(false)
+  })
+
   const getHeight = () => {
     if (wrapperRef && wrapperRef.current) {
       return {
@@ -69,11 +78,56 @@ export const SearchInput = ({
     return { maxHeight: 'auto' }
   }
 
-  const delayedQuery = React.useCallback(
+  const delayedQuery = useCallback(
     debounce((value) => handleSearch(0, false, value), 500),
     []
   )
 
+  const inicializeLabels = async () => {
+    if (labelProperty !== 'id' && value) {
+      setIsLoadingData(true)
+      let searchTermQs = []
+      const searchTermParsed = [`id`, value]
+      const { get: getSearch } = traversal.registry
+      const fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine)
+      const qsParsed = traversal.client[fnName]({
+        path: traversal.path,
+        start: 0,
+        pageSize: PageSize,
+        withDepth: false,
+      })
+      let typeNameParsed = []
+      if (typeNameQuery) {
+        typeNameParsed = parser(`type_name__in=${typeNameQuery}`)
+      }
+      if (
+        qs.length > 0 ||
+        searchTermParsed.length > 0 ||
+        qsParsed.length > 0 ||
+        typeNameParsed.length > 0
+      ) {
+        searchTermQs = buildQs([
+          ...qs,
+          searchTermParsed,
+          ...qsParsed,
+          ...typeNameParsed,
+        ])
+      }
+      const data = await traversal.client.search(
+        path ? path : traversal.client.getContainerFromPath(traversal.path),
+        searchTermQs,
+        false,
+        false
+      )
+      const newValuesLabel = data.items.reduce((result, item) => {
+        result[item.id] = get(item, labelProperty, item.id)
+        return result
+      }, {})
+      setValueLabel(newValuesLabel)
+      setIsLoadingData(false)
+    }
+  }
+
   const handleSearch = async (page = 0, concat = false, value = '') => {
     setOptions({ loading: true })
     let searchTermQs = []
@@ -87,19 +141,34 @@ export const SearchInput = ({
       path: traversal.path,
       start: page * PageSize,
       pageSize: PageSize,
+      withDepth: false,
     })
+    let sortParsed = parser(`_sort_des=title`)
+    let typeNameParsed = []
+    if (typeNameQuery) {
+      typeNameParsed = parser(`type_name__in=${typeNameQuery}`)
+    }
 
-    if (qs.length > 0 || searchTermParsed.length > 0 || qsParsed.length > 0) {
-      searchTermQs = buildQs([...qs, ...searchTermParsed, ...qsParsed])
+    if (
+      qs.length > 0 ||
+      searchTermParsed.length > 0 ||
+      qsParsed.length > 0 ||
+      typeNameParsed.length > 0
+    ) {
+      searchTermQs = buildQs([
+        ...qs,
+        ...searchTermParsed,
+        ...qsParsed,
+        ...typeNameParsed,
+        ...sortParsed,
+      ])
     }
 
     const data = await traversal.client.search(
-      path,
+      path ? path : traversal.client.getContainerFromPath(traversal.path),
       searchTermQs,
       false,
-      false,
-      page * PageSize,
-      PageSize
+      false
     )
     const newItems =
       options.items && concat ? [...options.items, ...data.items] : data.items
@@ -119,27 +188,32 @@ export const SearchInput = ({
     return item.title || item['@name']
   }
 
-  React.useEffect(() => {
-    if (path && !options.loading && !options.items) {
-      ;(async () => {
-        handleSearch(options.page)
-      })()
+  useEffect(() => {
+    console.log('update labels')
+    if (value) {
+      inicializeLabels()
+    } else {
+      setValueLabel({})
     }
-  }, [path, options.loading, options.items])
+  }, [path, value])
+
+  if (valueLabel === undefined) {
+    return <div className="spinner" />
+  }
 
   return (
     <React.Fragment>
       <div
         data-test={dataTestWrapper}
         ref={wrapperRef}
-        className={`dropdown ${isOpen ? 'is-active' : ''}`}
+        className={`dropdown mb-2 ${isOpen ? 'is-active' : ''}`}
         onBlur={(ev) => {
           if (!ev.currentTarget.contains(ev.relatedTarget)) {
             if (searchTerm !== '') {
               setSearchTerm('')
               setOptions(initialState)
             }
-            setIsOpen(!isOpen)
+            setIsOpen(false)
           }
         }}
       >
@@ -147,13 +221,20 @@ export const SearchInput = ({
           <button
             className={`button ${btnClass}`}
             onClick={(ev) => {
-              ev.preventDefault()
+              ev.target.blur()
               setIsOpen(!isOpen)
+              if (!options.loading && !options.items) {
+                handleSearch(options.page)
+              }
             }}
             aria-haspopup="true"
             aria-controls="dropdown-menu"
           >
-            <span>{value && value.title ? value.title : 'Choose...'}</span>
+            <span>
+              {value
+                ? get(valueLabel, value, value)
+                : intl.formatMessage(genericMessages.choose)}
+            </span>
             <span className="icon">
               <i className="fas fa-angle-down" aria-hidden="true"></i>
             </span>
@@ -185,20 +266,22 @@ export const SearchInput = ({
             {options.items &&
               options.items.map((item) => {
                 return (
-                  <a
-                    href="#"
+                  <div
                     className={`dropdown-item editable ${
-                      value && value.id === item.id ? 'is-active' : ''
+                      value === item.id ? 'is-active' : ''
                     }`}
                     data-test={`${dataTestItem}-${item.id}`}
-                    onMouseDown={() => {
-                      onChange && onChange(item)
+                    onMouseDown={(ev) => {
+                      ev.preventDefault()
+                      if (onChange) {
+                        onChange(item.id)
+                      }
                       setIsOpen(false)
                     }}
                     key={item.path}
                   >
                     {renderTextItemOptionFn(item)}
-                  </a>
+                  </div>
                 )
               })}
 
@@ -237,7 +320,7 @@ export const SearchInput = ({
 
 SearchInput.propTypes = {
   onChange: PropTypes.func,
-  value: PropTypes.object,
+  value: PropTypes.string,
   client: PropTypes.object,
   path: PropTypes.string,
   PageSize: PropTypes.number,
diff --git a/src/guillo-gmi/components/input/search_input_list.js b/src/guillo-gmi/components/input/search_input_list.js
new file mode 100644
index 0000000..7e4abd7
--- /dev/null
+++ b/src/guillo-gmi/components/input/search_input_list.js
@@ -0,0 +1,351 @@
+import React, { useState, useEffect, useCallback } from 'react'
+
+import PropTypes from 'prop-types'
+import { buildQs } from '../../lib/search'
+import { parser } from '../../lib/search'
+import useSetState from '../../hooks/useSetState'
+import ErrorZone from '../error_zone'
+import { Loading } from '../ui'
+import { generateUID } from '../../lib/helpers'
+import { useConfig } from '../../hooks/useConfig'
+import { useIntl } from 'react-intl'
+import { genericMessages } from '../../locales/generic_messages'
+import useClickAway from '../../hooks/useClickAway'
+import { get } from '../../lib/utils'
+function debounce(func, wait) {
+  let timeout
+  return function () {
+    const context = this
+    const args = arguments
+    const later = function () {
+      timeout = null
+      func.apply(context, args)
+    }
+    clearTimeout(timeout)
+    timeout = setTimeout(later, wait)
+  }
+}
+
+const initialState = {
+  page: 0,
+  items: undefined,
+  loading: false,
+  items_total: 0,
+}
+
+export const SearchInputList = ({
+  onChange,
+  error,
+  errorZoneClassName,
+  traversal = null,
+  path = null,
+  qs = [],
+  queryCondition = 'id__in',
+  value,
+  btnClass = '',
+  dataTestWrapper = 'wrapperSearchInputTest',
+  dataTestSearchInput = 'searchInputTest',
+  dataTestItem = 'searchInputItemTest',
+  renderTextItemOption = null,
+  typeNameQuery = null,
+  labelProperty = 'id',
+}) => {
+  const intl = useIntl()
+  const [options, setOptions] = useSetState(initialState)
+  const [valuesLabel, setValuesLabels] = useState(undefined)
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [searchTerm, setSearchTerm] = React.useState('')
+  const inputRef = React.useRef(null)
+  const wrapperRef = React.useRef(null)
+  const { PageSize, SearchEngine } = useConfig()
+  const [isLoadingData, setIsLoadingData] = useState(false)
+
+  const [uid] = useState(generateUID('search_input'))
+
+  useClickAway(wrapperRef, () => {
+    setIsOpen(false)
+  })
+
+  const getHeight = () => {
+    if (wrapperRef && wrapperRef.current) {
+      return {
+        maxHeight: `${
+          window.innerHeight -
+          wrapperRef.current.getBoundingClientRect().top -
+          100
+        }px`,
+      }
+    }
+    return { maxHeight: 'auto' }
+  }
+
+  const delayedQuery = useCallback(
+    debounce((value) => handleSearch(0, false, value), 500),
+    []
+  )
+
+  const handleSearch = async (page = 0, concat = false, value = '') => {
+    setOptions({ loading: true })
+    let searchTermQs = []
+    let searchTermParsed = []
+    if (value !== '') {
+      searchTermParsed = parser(`${queryCondition}=${value}`)
+    }
+    const { get } = traversal.registry
+    const fnName = get('searchEngineQueryParamsFunction', SearchEngine)
+    let qsParsed = traversal.client[fnName]({
+      path: traversal.path,
+      start: page * PageSize,
+      pageSize: PageSize,
+      withDepth: false,
+    })
+    let sortParsed = parser(`_sort_des=title`)
+    let typeNameParsed = []
+    if (typeNameQuery) {
+      typeNameParsed = parser(`type_name__in=${typeNameQuery}`)
+    }
+
+    if (
+      qs.length > 0 ||
+      searchTermParsed.length > 0 ||
+      qsParsed.length > 0 ||
+      typeNameParsed.length > 0
+    ) {
+      searchTermQs = buildQs([
+        ...qs,
+        ...searchTermParsed,
+        ...qsParsed,
+        ...typeNameParsed,
+        ...sortParsed,
+      ])
+    }
+
+    const data = await traversal.client.search(
+      path ? path : traversal.client.getContainerFromPath(traversal.path),
+      searchTermQs,
+      false,
+      false
+    )
+    const newItems =
+      options.items && concat ? [...options.items, ...data.items] : data.items
+
+    setOptions({
+      items: newItems ?? [],
+      loading: false,
+      items_total: data.items_total ?? 0,
+      page: page,
+    })
+  }
+
+  const inicializeLabels = async () => {
+    if (labelProperty !== 'id' && value.length > 0) {
+      setIsLoadingData(true)
+      let searchTermQs = []
+      const searchTermParsed = ['__or', `id=${value.join('%26id=')}`]
+      const { get: getSearch } = traversal.registry
+      const fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine)
+      const qsParsed = traversal.client[fnName]({
+        path: traversal.path,
+        start: 0,
+        pageSize: 100,
+        withDepth: false,
+      })
+      let typeNameParsed = []
+      if (typeNameQuery) {
+        typeNameParsed = parser(`type_name__in=${typeNameQuery}`)
+      }
+      if (
+        qs.length > 0 ||
+        searchTermParsed.length > 0 ||
+        qsParsed.length > 0 ||
+        typeNameParsed.length > 0
+      ) {
+        searchTermQs = buildQs([
+          ...qs,
+          searchTermParsed,
+          ...qsParsed,
+          ...typeNameParsed,
+        ])
+      }
+      const data = await traversal.client.search(
+        path ? path : traversal.client.getContainerFromPath(traversal.path),
+        searchTermQs,
+        false,
+        false,
+        0,
+        100
+      )
+      const newValuesLabel = data.items.reduce((result, item) => {
+        result[item.id] = get(item, labelProperty, item.id)
+        return result
+      }, {})
+      setValuesLabels(newValuesLabel)
+      setIsLoadingData(false)
+    }
+  }
+
+  const renderTextItemOptionFn = (item) => {
+    if (renderTextItemOption) {
+      return renderTextItemOption(item)
+    }
+    return item.title || item['@name']
+  }
+
+  React.useEffect(() => {
+    if (!options.loading && !options.items && value.length > 0) {
+      inicializeLabels()
+    } else if (value.length === 0) {
+      setValuesLabels({})
+    }
+  }, [path, options.loading, options.items])
+
+  if (isLoadingData || valuesLabel === undefined) {
+    return <div className="spinner" />
+  }
+
+  return (
+    <React.Fragment>
+      <div className="tags mb-2">
+        {value.map((tag, index) => (
+          <div
+            key={`input_list_${tag}_${index}`}
+            className="tag is-info is-medium"
+          >
+            {get(valuesLabel, tag, tag)}
+            <button
+              className="delete is-small"
+              onClick={(ev) => {
+                ev.stopPropagation()
+                ev.preventDefault()
+                onChange([
+                  ...value.filter((tag) => value.indexOf(tag) !== index),
+                ])
+              }}
+            ></button>
+          </div>
+        ))}
+      </div>
+      <div
+        data-test={dataTestWrapper}
+        ref={wrapperRef}
+        className={`dropdown mb-2 ${isOpen ? 'is-active' : ''}`}
+        onBlur={(ev) => {
+          if (!ev.currentTarget.contains(ev.relatedTarget)) {
+            if (searchTerm !== '') {
+              setSearchTerm('')
+              setOptions(initialState)
+            }
+            setIsOpen(false)
+          }
+        }}
+      >
+        <div className="dropdown-trigger">
+          <button
+            className={`button ${btnClass}`}
+            onClick={(ev) => {
+              ev.preventDefault()
+              setIsOpen(!isOpen)
+              if (!options.loading && !options.items) {
+                handleSearch(options.page)
+              }
+            }}
+            aria-haspopup="true"
+            aria-controls="dropdown-menu"
+          >
+            <span>{intl.formatMessage(genericMessages.choose)}</span>
+
+            <span className="icon">
+              <i className="fas fa-angle-down" aria-hidden="true"></i>
+            </span>
+          </button>
+        </div>
+        <div
+          className="dropdown-menu"
+          id="dropdown-menu"
+          role="menu"
+          style={getHeight()}
+        >
+          <div className="dropdown-content">
+            <div className="dropdown-item">
+              <input
+                ref={inputRef}
+                data-test={dataTestSearchInput}
+                className="input"
+                type="text"
+                placeholder={intl.formatMessage(genericMessages.search)}
+                value={searchTerm}
+                onChange={(ev) => {
+                  delayedQuery(ev.target.value)
+                  setSearchTerm(ev.target.value)
+                }}
+              />
+            </div>
+            <hr className="dropdown-divider" />
+            {options.loading && <Loading />}
+            {options.items &&
+              options.items.map((item) => {
+                return (
+                  <div
+                    className={`dropdown-item editable ${
+                      value && value.id === item.id ? 'is-active' : ''
+                    }`}
+                    data-test={`${dataTestItem}-${item.id}`}
+                    onMouseDown={(ev) => {
+                      ev.stopPropagation()
+                      ev.preventDefault()
+                      if (onChange && !value.includes(item.id)) {
+                        setValuesLabels({
+                          ...valuesLabel,
+                          [item.id]: get(item, labelProperty, item.id),
+                        })
+                        onChange([...value, item.id])
+                      }
+                    }}
+                    key={item.path}
+                  >
+                    {renderTextItemOptionFn(item)}
+                  </div>
+                )
+              })}
+
+            {options.items && options.items.length === 0 && (
+              <div className="dropdown-item">
+                {intl.formatMessage(genericMessages.no_results)}
+              </div>
+            )}
+
+            {options.items && options.items_total > options.items.length && (
+              <React.Fragment>
+                <hr className="dropdown-divider" />
+                <div
+                  className="dropdown-item editable"
+                  onMouseDown={(ev) => {
+                    ev.stopPropagation()
+                    ev.preventDefault()
+                    handleSearch(options.page + 1, true)
+                  }}
+                >
+                  {intl.formatMessage(genericMessages.load_more)}
+                </div>
+              </React.Fragment>
+            )}
+          </div>
+        </div>
+      </div>
+      {error && (
+        <ErrorZone className={errorZoneClassName} id={uid}>
+          {error ? error : ''}
+        </ErrorZone>
+      )}
+    </React.Fragment>
+  )
+}
+
+SearchInputList.propTypes = {
+  onChange: PropTypes.func,
+  options: PropTypes.arrayOf(PropTypes.string),
+  client: PropTypes.object,
+  path: PropTypes.string,
+  PageSize: PropTypes.number,
+  btnClass: PropTypes.string,
+}
diff --git a/src/guillo-gmi/components/panel/properties.js b/src/guillo-gmi/components/panel/properties.js
index fc252a4..1079862 100644
--- a/src/guillo-gmi/components/panel/properties.js
+++ b/src/guillo-gmi/components/panel/properties.js
@@ -76,7 +76,7 @@ export function PanelProperties() {
       <div className="level">
         <div className="level-left">
           <h2 className="title is-size-4 is-primary">
-            <Icon icon={model.icon} align="is-left" className="has-text-grey" />{' '}
+            <Icon icon={model.icon} align="is-left" className="has-text-grey" />
             &nbsp;
             <span>{Ctx.context.title || Ctx.context['@name']}</span>
           </h2>
@@ -93,7 +93,7 @@ export function PanelProperties() {
             <table className="table is-striped is-fullwidth is-size-7">
               <thead>
                 <tr>
-                  <th className="is-2">
+                  <th style={{ width: '150px' }} className="is-2">
                     {intl.formatMessage(genericMessages.property)}
                   </th>
                   <th className="is-8">
@@ -104,7 +104,7 @@ export function PanelProperties() {
               <tbody>
                 {showProperties.map((prop) => (
                   <tr key={'prop' + prop}>
-                    <td>{prop}</td>
+                    <td style={{ width: '150px' }}>{prop}</td>
                     <td>
                       <EditableField
                         field={prop}
@@ -120,7 +120,7 @@ export function PanelProperties() {
               <table className="table is-striped is-fullwidth is-size-7">
                 <thead>
                   <tr>
-                    <th className="is-2">
+                    <th style={{ width: '150px' }} className="is-2">
                       {intl.formatMessage(genericMessages.property)}
                     </th>
                     <th className="is-8">
@@ -132,7 +132,7 @@ export function PanelProperties() {
                   {properties.map(({ key, value }) => {
                     return (
                       <tr key={'prop' + key}>
-                        <td>{value.title || key}</td>
+                        <td style={{ width: '150px' }}>{value.title || key}</td>
                         <td>
                           <EditableField
                             field={key}
diff --git a/src/guillo-gmi/views/groups.js b/src/guillo-gmi/views/groups.js
index ded24a5..fa5f3a4 100644
--- a/src/guillo-gmi/views/groups.js
+++ b/src/guillo-gmi/views/groups.js
@@ -165,12 +165,12 @@ export function GroupCtx() {
     )
   }
 
-  const addUser = async (newUser) => {
+  const addUser = async (newUserId) => {
     const data = {}
     Ctx.context.users.forEach((user) => {
       data[user] = true
     })
-    data[newUser.id] = true
+    data[newUserId] = true
     const {
       isError,
       errorMessage,
@@ -185,7 +185,7 @@ export function GroupCtx() {
           id: 'user_added_to_group',
           defaultMessage: 'User {user} added to group',
         },
-        { user: newUser.id }
+        { user: newUserId }
       ),
       errorMessage
     )
diff --git a/yarn.lock b/yarn.lock
index d95cdc2..051d560 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2244,15 +2244,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001219:
-  version "1.0.30001241"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001241.tgz"
-  integrity sha512-1uoSZ1Pq1VpH0WerIMqwptXHNNGfdl7d1cJUFs80CwQ/lVzdhTvsFZCeNFslze7AjsQnb4C85tzclPa1VShbeQ==
-
-caniuse-lite@^1.0.30001565:
-  version "1.0.30001572"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001572.tgz#1ccf7dc92d2ee2f92ed3a54e11b7b4a3041acfa0"
-  integrity sha512-1Pbh5FLmn5y4+QhNyJE9j3/7dK44dGB83/ZMjv/qJk86TvDbjk0LosiZo0i0WB0Vx607qMX9jYrn1VLHCkN4rw==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001565:
+  version "1.0.30001576"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001576.tgz"
+  integrity sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==
 
 chai@^4.3.10:
   version "4.3.10"

From 88066eb93b295b6cf9869054e419da9ac6e33156 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roger=20Boixader=20G=C3=BCell?= <rboixaderg@gmail.com>
Date: Sun, 14 Jan 2024 18:32:29 +0100
Subject: [PATCH 02/20] chore: proptypes

---
 src/guillo-gmi/components/input/search_input.js   | 14 +++++++++++---
 .../components/input/search_input_list.js         | 15 ++++++++++++---
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/guillo-gmi/components/input/search_input.js b/src/guillo-gmi/components/input/search_input.js
index d2487f4..1fd3ff1 100644
--- a/src/guillo-gmi/components/input/search_input.js
+++ b/src/guillo-gmi/components/input/search_input.js
@@ -189,7 +189,6 @@ export const SearchInput = ({
   }
 
   useEffect(() => {
-    console.log('update labels')
     if (value) {
       inicializeLabels()
     } else {
@@ -321,8 +320,17 @@ export const SearchInput = ({
 SearchInput.propTypes = {
   onChange: PropTypes.func,
   value: PropTypes.string,
-  client: PropTypes.object,
   path: PropTypes.string,
-  PageSize: PropTypes.number,
   btnClass: PropTypes.string,
+  error: PropTypes.string,
+  errorZoneClassName: PropTypes.string,
+  traversal: PropTypes.object,
+  qs: PropTypes.array,
+  queryCondition: PropTypes.string,
+  dataTestWrapper: PropTypes.string,
+  dataTestSearchInput: PropTypes.string,
+  dataTestItem: PropTypes.string,
+  renderTextItemOption: PropTypes.func,
+  typeNameQuery: PropTypes.string,
+  labelProperty: PropTypes.string,
 }
diff --git a/src/guillo-gmi/components/input/search_input_list.js b/src/guillo-gmi/components/input/search_input_list.js
index 7e4abd7..8d744dc 100644
--- a/src/guillo-gmi/components/input/search_input_list.js
+++ b/src/guillo-gmi/components/input/search_input_list.js
@@ -343,9 +343,18 @@ export const SearchInputList = ({
 
 SearchInputList.propTypes = {
   onChange: PropTypes.func,
-  options: PropTypes.arrayOf(PropTypes.string),
-  client: PropTypes.object,
   path: PropTypes.string,
-  PageSize: PropTypes.number,
   btnClass: PropTypes.string,
+  dataTestWrapper: PropTypes.string,
+  dataTestSearchInput: PropTypes.string,
+  dataTestItem: PropTypes.string,
+  renderTextItemOption: PropTypes.func,
+  typeNameQuery: PropTypes.string,
+  labelProperty: PropTypes.string,
+  error: PropTypes.string,
+  errorZoneClassName: PropTypes.string,
+  traversal: PropTypes.object,
+  path: PropTypes.string,
+  qs: PropTypes.array,
+  queryCondition: PropTypes.string,
 }

From 4758d7e787a79f97132e8c8879806c8be0e9489c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roger=20Boixader=20G=C3=BCell?= <rboixaderg@gmail.com>
Date: Wed, 17 Jan 2024 15:58:05 +0100
Subject: [PATCH 03/20] wip: some components to ts

---
 .eslintrc.js                                  | 30 ++++++++
 package.json                                  |  9 ++-
 .../actions/{add_item.js => add_item.tsx}     |  7 +-
 .../{change_pass.js => change_pass.tsx}       | 23 ++----
 .../actions/{copy_item.js => copy_item.tsx}   | 13 +++-
 .../actions/{copy_items.js => copy_items.tsx} | 13 +++-
 .../actions/{move_item.js => move_item.tsx}   |  8 +-
 .../actions/{move_items.js => move_items.tsx} |  7 +-
 .../{remove_item.js => remove_item.tsx}       |  8 +-
 .../{remove_items.js => remove_items.tsx}     | 12 ++-
 .../{iattachment.js => iattachment.tsx}       | 10 ++-
 .../{idublincore.js => idublincore.tsx}       |  9 ++-
 .../components/behaviors/iimageattachment.js  |  4 +-
 .../components/behaviors/imultiattachment.js  |  2 +-
 .../behaviors/imultiimageattachment.js        |  2 +-
 .../behaviors/imultiimageorderedattachment.js |  2 +-
 .../{editableField.js => editableField.tsx}   | 19 +++--
 .../input/{button.js => button.tsx}           | 17 +++--
 .../components/input/{form.js => form.tsx}    | 24 +++---
 .../components/{modal.js => modal.tsx}        | 76 ++++++++++++-------
 .../components/ui/{icon.js => icon.tsx}       |  9 ++-
 .../hooks/{useLocation.js => useLocation.tsx} | 31 +++++---
 tsconfig.json                                 |  3 +-
 23 files changed, 225 insertions(+), 113 deletions(-)
 create mode 100644 .eslintrc.js
 rename src/guillo-gmi/actions/{add_item.js => add_item.tsx} (93%)
 rename src/guillo-gmi/actions/{change_pass.js => change_pass.tsx} (80%)
 rename src/guillo-gmi/actions/{copy_item.js => copy_item.tsx} (86%)
 rename src/guillo-gmi/actions/{copy_items.js => copy_items.tsx} (87%)
 rename src/guillo-gmi/actions/{move_item.js => move_item.tsx} (89%)
 rename src/guillo-gmi/actions/{move_items.js => move_items.tsx} (88%)
 rename src/guillo-gmi/actions/{remove_item.js => remove_item.tsx} (89%)
 rename src/guillo-gmi/actions/{remove_items.js => remove_items.tsx} (86%)
 rename src/guillo-gmi/components/behaviors/{iattachment.js => iattachment.tsx} (83%)
 rename src/guillo-gmi/components/behaviors/{idublincore.js => idublincore.tsx} (85%)
 rename src/guillo-gmi/components/fields/{editableField.js => editableField.tsx} (95%)
 rename src/guillo-gmi/components/input/{button.js => button.tsx} (68%)
 rename src/guillo-gmi/components/input/{form.js => form.tsx} (73%)
 rename src/guillo-gmi/components/{modal.js => modal.tsx} (62%)
 rename src/guillo-gmi/components/ui/{icon.js => icon.tsx} (66%)
 rename src/guillo-gmi/hooks/{useLocation.js => useLocation.tsx} (79%)

diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..742569e
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,30 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+  ],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: ['.eslintrc.{js,cjs}'],
+      parserOptions: {
+        sourceType: 'script',
+      },
+    },
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['@typescript-eslint', 'react'],
+  rules: {},
+}
diff --git a/package.json b/package.json
index 93d4125..8ff3b0c 100644
--- a/package.json
+++ b/package.json
@@ -34,13 +34,18 @@
     "@testing-library/jest-dom": "5.11.6",
     "@testing-library/react": "11.2.2",
     "@testing-library/user-event": "12.6.0",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/parser": "^6.18.1",
     "babel-plugin-formatjs": "^10.5.10",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react": "^7.33.2",
     "husky": "4.3.6",
     "microbundle": "0.13.0",
     "prettier": "2.2.1",
     "sass": "1.69.5",
     "serialize-javascript": "5.0.1",
-    "vitest": "^0.34.6"
+    "vitest": "^0.34.6",
+    "typescript": "^5.3.3"
   },
   "scripts": {
     "format": "prettier --write \"src/**/*.js\"",
@@ -51,12 +56,12 @@
     "build:css": "rm -rf ./dist/css && mkdir ./dist/css && sass ./src/guillo-gmi/scss/styles.sass ./dist/css/style.css",
     "prepublish": "yarn build",
     "test": "vitest run",
+    "lint": "eslint src",
     "intl-extract": "formatjs extract 'src/**/*.js' --out-file src/guillo-gmi/locales/en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'",
     "intl-compile-en": "formatjs compile src/guillo-gmi/locales/en.json --ast --out-file src/guillo-gmi/locales/compiled/en.json",
     "intl-compile-ca": "formatjs compile src/guillo-gmi/locales/ca.json --ast --out-file src/guillo-gmi/locales/compiled/ca.json",
     "intl-compile-es": "formatjs compile src/guillo-gmi/locales/es.json --ast --out-file src/guillo-gmi/locales/compiled/es.json",
     "intl-compile": "npm run intl-compile-en && npm run intl-compile-es && npm run intl-compile-ca"
-
   },
   "eslintConfig": {
     "extends": "react-app"
diff --git a/src/guillo-gmi/actions/add_item.js b/src/guillo-gmi/actions/add_item.tsx
similarity index 93%
rename from src/guillo-gmi/actions/add_item.js
rename to src/guillo-gmi/actions/add_item.tsx
index 1da5b25..aeec658 100644
--- a/src/guillo-gmi/actions/add_item.js
+++ b/src/guillo-gmi/actions/add_item.tsx
@@ -1,9 +1,12 @@
-import React from 'react'
 import { useTraversal } from '../contexts'
 import { Modal } from '../components/modal'
 import { useCrudContext } from '../hooks/useCrudContext'
 
-export function AddItem(props) {
+interface Props {
+  type: string
+}
+
+export function AddItem(props: Props) {
   const Ctx = useTraversal()
   const { post, loading } = useCrudContext()
   const { type } = props
diff --git a/src/guillo-gmi/actions/change_pass.js b/src/guillo-gmi/actions/change_pass.tsx
similarity index 80%
rename from src/guillo-gmi/actions/change_pass.js
rename to src/guillo-gmi/actions/change_pass.tsx
index 6a50098..1dbb092 100644
--- a/src/guillo-gmi/actions/change_pass.js
+++ b/src/guillo-gmi/actions/change_pass.tsx
@@ -1,30 +1,28 @@
-import React from 'react'
 import { useTraversal } from '../contexts'
 import { Modal } from '../components/modal'
 import { useCrudContext } from '../hooks/useCrudContext'
 import { Input } from '../components/input/input'
 import { Button } from '../components/input/button'
 import { Form } from '../components/input/form'
+import { useState } from 'react'
 
 const initial = {
   pass1: '',
   pass2: '',
 }
 
-export function ChangePassword(props) {
-  const [state, setState] = React.useState(initial)
-  const [perror, setPerror] = React.useState(undefined)
+export function ChangePassword() {
+  const [state, setState] = useState(initial)
+  const [perror, setPerror] = useState(undefined)
 
   const Ctx = useTraversal()
   const { patch } = useCrudContext()
 
-  // const Form = getForm(type)
-
   const setActive = () => {
     Ctx.cancelAction()
   }
 
-  async function doSubmit(data) {
+  async function doSubmit() {
     if (state.pass1 === '') {
       setPerror('provide a password')
       return
@@ -37,7 +35,7 @@ export function ChangePassword(props) {
 
     setPerror(undefined)
 
-    let form = {
+    const form = {
       password: state.pass1,
     }
 
@@ -53,7 +51,7 @@ export function ChangePassword(props) {
   }
 
   const setPass = (field) => (val) => {
-    let n = {}
+    const n = {}
     n[field] = val
     setState((state) => ({ ...state, ...n }))
     setPerror(undefined)
@@ -61,12 +59,7 @@ export function ChangePassword(props) {
 
   return (
     <Modal isActive={true} setActive={setActive}>
-      <Form
-        onSubmit={doSubmit}
-        onError={(err) => console.log(err)}
-        actionName={'Change'}
-        title={'Change Password'}
-      >
+      <Form onSubmit={doSubmit} title="Change Password">
         {perror && (
           <div className="notification is-danger is-size-7">
             <button className="delete"></button>
diff --git a/src/guillo-gmi/actions/copy_item.js b/src/guillo-gmi/actions/copy_item.tsx
similarity index 86%
rename from src/guillo-gmi/actions/copy_item.js
rename to src/guillo-gmi/actions/copy_item.tsx
index db94007..38553e8 100644
--- a/src/guillo-gmi/actions/copy_item.js
+++ b/src/guillo-gmi/actions/copy_item.tsx
@@ -1,10 +1,15 @@
-import React from 'react'
+import { Fragment } from 'react'
 import { PathTree } from '../components/modal'
 import { useTraversal } from '../contexts'
 import { useCrudContext } from '../hooks/useCrudContext'
 import { getNewId } from '../lib/utils'
+import { ItemModel } from '../models'
 
-export function CopyItem(props) {
+interface Props {
+  item: ItemModel
+}
+
+export function CopyItem(props: Props) {
   const Ctx = useTraversal()
   const { post } = useCrudContext()
   const { item } = props
@@ -35,7 +40,7 @@ export function CopyItem(props) {
       onConfirm={copyItem}
       onCancel={() => Ctx.cancelAction()}
     >
-      <React.Fragment>
+      <Fragment>
         <small style={{ display: 'block', marginTop: 20 }}>
           {`New id for "${item['@name']}" copy`}
         </small>
@@ -45,7 +50,7 @@ export function CopyItem(props) {
           data-test={`inputCopyIdTest-${item['@name']}`}
           defaultValue={getNewId(item['@name'])}
         />
-      </React.Fragment>
+      </Fragment>
     </PathTree>
   )
 }
diff --git a/src/guillo-gmi/actions/copy_items.js b/src/guillo-gmi/actions/copy_items.tsx
similarity index 87%
rename from src/guillo-gmi/actions/copy_items.js
rename to src/guillo-gmi/actions/copy_items.tsx
index e983730..d32a702 100644
--- a/src/guillo-gmi/actions/copy_items.js
+++ b/src/guillo-gmi/actions/copy_items.tsx
@@ -1,10 +1,15 @@
-import React from 'react'
+import { Fragment } from 'react'
 import { PathTree } from '../components/modal'
 import { useTraversal } from '../contexts'
 import { getNewId } from '../lib/utils'
+import { ItemModel } from '../models'
 
 const withError = (res) => res.status >= 300
-export function CopyItems(props) {
+
+interface Props {
+  items: Array<ItemModel>
+}
+export function CopyItems(props: Props) {
   const Ctx = useTraversal()
   const { items = [] } = props
 
@@ -43,7 +48,7 @@ export function CopyItems(props) {
       onCancel={() => Ctx.cancelAction()}
     >
       {items.map((item) => (
-        <React.Fragment key={item.id}>
+        <Fragment key={item.id}>
           <small style={{ display: 'block', marginTop: 20 }}>
             {`New id for "${item.id}" copy`}
           </small>
@@ -53,7 +58,7 @@ export function CopyItems(props) {
             data-test={`inputCopyIdTest-${item['@name']}`}
             defaultValue={getNewId(item.id)}
           />
-        </React.Fragment>
+        </Fragment>
       ))}
       &nbsp;
     </PathTree>
diff --git a/src/guillo-gmi/actions/move_item.js b/src/guillo-gmi/actions/move_item.tsx
similarity index 89%
rename from src/guillo-gmi/actions/move_item.js
rename to src/guillo-gmi/actions/move_item.tsx
index dba7a55..78dbd43 100644
--- a/src/guillo-gmi/actions/move_item.js
+++ b/src/guillo-gmi/actions/move_item.tsx
@@ -1,10 +1,14 @@
-import React from 'react'
 import { PathTree } from '../components/modal'
 import { useGuillotinaClient, useTraversal } from '../contexts'
 import { useCrudContext } from '../hooks/useCrudContext'
 import { useLocation } from '../hooks/useLocation'
+import { ItemModel } from '../models'
 
-export function MoveItem(props) {
+interface Props {
+  item: ItemModel
+}
+
+export function MoveItem(props: Props) {
   const Ctx = useTraversal()
   const { post } = useCrudContext()
   const [, navigate] = useLocation()
diff --git a/src/guillo-gmi/actions/move_items.js b/src/guillo-gmi/actions/move_items.tsx
similarity index 88%
rename from src/guillo-gmi/actions/move_items.js
rename to src/guillo-gmi/actions/move_items.tsx
index ff66a1b..f9a2846 100644
--- a/src/guillo-gmi/actions/move_items.js
+++ b/src/guillo-gmi/actions/move_items.tsx
@@ -1,10 +1,13 @@
-import React from 'react'
 import { PathTree } from '../components/modal'
 import { useTraversal } from '../contexts'
+import { ItemModel } from '../models'
 
 const withError = (res) => res.status >= 300
 
-export function MoveItems(props) {
+interface Props {
+  items: ItemModel[]
+}
+export function MoveItems(props: Props) {
   const Ctx = useTraversal()
   const { items = [] } = props
 
diff --git a/src/guillo-gmi/actions/remove_item.js b/src/guillo-gmi/actions/remove_item.tsx
similarity index 89%
rename from src/guillo-gmi/actions/remove_item.js
rename to src/guillo-gmi/actions/remove_item.tsx
index 333a11c..30e2a60 100644
--- a/src/guillo-gmi/actions/remove_item.js
+++ b/src/guillo-gmi/actions/remove_item.tsx
@@ -1,10 +1,14 @@
-import React from 'react'
 import { Confirm } from '../components/modal'
 import { useGuillotinaClient, useTraversal } from '../contexts'
 import { useCrudContext } from '../hooks/useCrudContext'
 import { useLocation } from '../hooks/useLocation'
+import { ItemModel } from '../models'
 
-export function RemoveItem(props) {
+interface Props {
+  item: ItemModel
+}
+
+export function RemoveItem(props: Props) {
   const Ctx = useTraversal()
   const { del, loading } = useCrudContext()
   const [, navigate] = useLocation()
diff --git a/src/guillo-gmi/actions/remove_items.js b/src/guillo-gmi/actions/remove_items.tsx
similarity index 86%
rename from src/guillo-gmi/actions/remove_items.js
rename to src/guillo-gmi/actions/remove_items.tsx
index e97bdb8..2acf104 100644
--- a/src/guillo-gmi/actions/remove_items.js
+++ b/src/guillo-gmi/actions/remove_items.tsx
@@ -1,13 +1,17 @@
-import React from 'react'
 import { Confirm } from '../components/modal'
 import { useTraversal } from '../contexts'
 import { sleep } from '../lib/helpers'
 import { useConfig } from '../hooks/useConfig'
+import { ItemModel } from '../models'
+import { useState } from 'react'
 
-export function RemoveItems(props) {
+interface Props {
+  items: ItemModel[]
+}
+export function RemoveItems(props: Props) {
   const Ctx = useTraversal()
   const cfg = useConfig()
-  const [loading, setLoading] = React.useState(false)
+  const [loading, setLoading] = useState(false)
   const { items = [] } = props
   const last = items[items.length - 1]['@name']
   const itemsNames = items
@@ -16,7 +20,7 @@ export function RemoveItems(props) {
     .replace(`, ${last}`, ` and ${last}`)
 
   async function removeItems() {
-    let errors = []
+    const errors = []
     setLoading(true)
 
     const actions = items.map(async (item) => {
diff --git a/src/guillo-gmi/components/behaviors/iattachment.js b/src/guillo-gmi/components/behaviors/iattachment.tsx
similarity index 83%
rename from src/guillo-gmi/components/behaviors/iattachment.js
rename to src/guillo-gmi/components/behaviors/iattachment.tsx
index e9d361c..62d0316 100644
--- a/src/guillo-gmi/components/behaviors/iattachment.js
+++ b/src/guillo-gmi/components/behaviors/iattachment.tsx
@@ -1,11 +1,17 @@
-import React from 'react'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import { useTraversal } from '../../contexts'
 import { EditableField } from '../fields/editableField'
 import { Table } from '../ui'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
 
-export function IAttachment({ properties, values }) {
+interface Props {
+  properties: { [key: string]: any }
+  values: { [key: string]: any }
+}
+
+export function IAttachment({ properties, values }: Props) {
   const intl = useIntl()
   const Ctx = useTraversal()
   const modifyContent = Ctx.hasPerm('guillotina.ModifyContent')
diff --git a/src/guillo-gmi/components/behaviors/idublincore.js b/src/guillo-gmi/components/behaviors/idublincore.tsx
similarity index 85%
rename from src/guillo-gmi/components/behaviors/idublincore.js
rename to src/guillo-gmi/components/behaviors/idublincore.tsx
index 7c38380..79d90c6 100644
--- a/src/guillo-gmi/components/behaviors/idublincore.js
+++ b/src/guillo-gmi/components/behaviors/idublincore.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useTraversal } from '../../contexts'
 import { EditableField } from '../fields/editableField'
 import { Table } from '../ui'
@@ -12,7 +12,12 @@ const editableFields = [
   'expiration_date',
 ]
 
-export function IDublinCore({ properties, values }) {
+interface Props {
+  properties: { [key: string]: any }
+  values: { [key: string]: any }
+}
+
+export function IDublinCore({ properties, values }: Props) {
   const intl = useIntl()
   const Ctx = useTraversal()
   const modifyContent = Ctx.hasPerm('guillotina.ModifyContent')
diff --git a/src/guillo-gmi/components/behaviors/iimageattachment.js b/src/guillo-gmi/components/behaviors/iimageattachment.js
index 3e37e85..65d8d8f 100644
--- a/src/guillo-gmi/components/behaviors/iimageattachment.js
+++ b/src/guillo-gmi/components/behaviors/iimageattachment.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { useTraversal } from '../../contexts'
 import { EditableField } from '../fields/editableField'
 import { Table } from '../ui'
@@ -6,7 +6,7 @@ import { useConfig } from '../../hooks/useConfig'
 import { Delete } from '../ui'
 import { Button } from '../input/button'
 import { FileUpload } from '../input/upload'
-import { Confirm } from '../../components/modal'
+import { Confirm } from '../modal'
 import { useIntl } from 'react-intl'
 import {
   genericFileMessages,
diff --git a/src/guillo-gmi/components/behaviors/imultiattachment.js b/src/guillo-gmi/components/behaviors/imultiattachment.js
index 1c4aee6..7b68814 100644
--- a/src/guillo-gmi/components/behaviors/imultiattachment.js
+++ b/src/guillo-gmi/components/behaviors/imultiattachment.js
@@ -7,7 +7,7 @@ import { useCrudContext } from '../../hooks/useCrudContext'
 import ErrorZone from '../error_zone'
 import { EditableField } from '../fields/editableField'
 import { Delete } from '../ui'
-import { Confirm } from '../../components/modal'
+import { Confirm } from '../modal'
 import { Table } from '../ui'
 import { useIntl } from 'react-intl'
 import {
diff --git a/src/guillo-gmi/components/behaviors/imultiimageattachment.js b/src/guillo-gmi/components/behaviors/imultiimageattachment.js
index eda2fb1..ea0f00e 100644
--- a/src/guillo-gmi/components/behaviors/imultiimageattachment.js
+++ b/src/guillo-gmi/components/behaviors/imultiimageattachment.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 
 import { Button } from '../input/button'
-import { Confirm } from '../../components/modal'
+import { Confirm } from '../modal'
 import { Delete } from '../ui'
 import { FileUpload } from '../input/upload'
 import { useCrudContext } from '../../hooks/useCrudContext'
diff --git a/src/guillo-gmi/components/behaviors/imultiimageorderedattachment.js b/src/guillo-gmi/components/behaviors/imultiimageorderedattachment.js
index d4100c5..3648d3c 100644
--- a/src/guillo-gmi/components/behaviors/imultiimageorderedattachment.js
+++ b/src/guillo-gmi/components/behaviors/imultiimageorderedattachment.js
@@ -1,5 +1,5 @@
 import { Button } from '../input/button'
-import { Confirm } from '../../components/modal'
+import { Confirm } from '../modal'
 import { Delete } from '../ui'
 import { FileUpload } from '../input/upload'
 import { useCrudContext } from '../../hooks/useCrudContext'
diff --git a/src/guillo-gmi/components/fields/editableField.js b/src/guillo-gmi/components/fields/editableField.tsx
similarity index 95%
rename from src/guillo-gmi/components/fields/editableField.js
rename to src/guillo-gmi/components/fields/editableField.tsx
index 5e63b7b..fa6ae8a 100644
--- a/src/guillo-gmi/components/fields/editableField.js
+++ b/src/guillo-gmi/components/fields/editableField.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Button } from '../input/button'
 import { useCrudContext } from '../../hooks/useCrudContext'
 import { useConfig } from '../../hooks/useConfig'
@@ -13,6 +13,15 @@ import {
   genericMessages,
 } from '../../locales/generic_messages'
 
+interface Props {
+  field: string
+  value: any
+  ns?: string
+  schema?: any
+  modifyContent?: boolean
+  required?: boolean
+}
+
 export function EditableField({
   field,
   value,
@@ -20,9 +29,9 @@ export function EditableField({
   schema = undefined,
   modifyContent,
   required,
-}) {
+}: Props) {
   const intl = useIntl()
-  const ref = useRef()
+  const ref = useRef<HTMLElement>()
   const [isEdit, setEdit] = useState(false)
   const [val, setValue] = useState(value)
   const { patch, loading, Ctx } = useCrudContext()
@@ -134,7 +143,7 @@ export function EditableField({
   }
 
   return (
-    <React.Fragment>
+    <>
       {!isEdit && (
         <div
           className={canModified ? 'editable' : ''}
@@ -198,6 +207,6 @@ export function EditableField({
           </div>
         </div>
       )}
-    </React.Fragment>
+    </>
   )
 }
diff --git a/src/guillo-gmi/components/input/button.js b/src/guillo-gmi/components/input/button.tsx
similarity index 68%
rename from src/guillo-gmi/components/input/button.js
rename to src/guillo-gmi/components/input/button.tsx
index bc26423..666dc3d 100644
--- a/src/guillo-gmi/components/input/button.js
+++ b/src/guillo-gmi/components/input/button.tsx
@@ -1,8 +1,14 @@
-import React from 'react'
 import { classnames } from '../../lib/helpers'
 
-const noop = () => {}
-
+interface Props {
+  children: React.ReactNode
+  className?: string
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
+  type?: 'submit' | 'reset' | 'button'
+  loading?: boolean
+  disabled?: boolean
+  dataTest?: string
+}
 export const Button = ({
   children,
   className = 'is-primary',
@@ -11,11 +17,9 @@ export const Button = ({
   loading = false,
   disabled = false,
   dataTest,
-  ...rest
-}) => {
+}: Props) => {
   let css = [].concat('button', ...className.split(' '))
   if (loading) css = css.concat('is-loading')
-  if (disabled) onClick = noop
 
   return (
     <p className="control">
@@ -24,7 +28,6 @@ export const Button = ({
         className={classnames(css)}
         onClick={onClick}
         disabled={disabled}
-        {...rest}
         data-test={dataTest}
       >
         {children}
diff --git a/src/guillo-gmi/components/input/form.js b/src/guillo-gmi/components/input/form.tsx
similarity index 73%
rename from src/guillo-gmi/components/input/form.js
rename to src/guillo-gmi/components/input/form.tsx
index 738527e..c67a8ea 100644
--- a/src/guillo-gmi/components/input/form.js
+++ b/src/guillo-gmi/components/input/form.tsx
@@ -1,8 +1,16 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import { noop } from '../../lib/helpers'
 import { classnames } from '../../lib/helpers'
 
+interface Props {
+  children: React.ReactNode
+  className?: string
+  onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void
+  onReset?: (event: React.FormEvent<HTMLFormElement>) => void
+  autoComplete?: string
+  title?: string
+  error?: string
+  dataTest?: string
+}
 export const Form = ({
   children,
   className = '',
@@ -12,8 +20,7 @@ export const Form = ({
   title,
   error,
   dataTest,
-  ...rest
-}) => {
+}: Props) => {
   const handleSubmit = (event) => {
     event.preventDefault()
     onSubmit(event)
@@ -31,18 +38,9 @@ export const Form = ({
         onReset={onReset}
         autoComplete={autoComplete}
         className={classnames(['form', className])}
-        {...rest}
       >
         {children}
       </form>
     </div>
   )
 }
-
-Form.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  onSubmit: PropTypes.func,
-  onReset: PropTypes.func,
-  autoComplete: PropTypes.string,
-}
diff --git a/src/guillo-gmi/components/modal.js b/src/guillo-gmi/components/modal.tsx
similarity index 62%
rename from src/guillo-gmi/components/modal.js
rename to src/guillo-gmi/components/modal.tsx
index 3fb543e..f37aeab 100644
--- a/src/guillo-gmi/components/modal.js
+++ b/src/guillo-gmi/components/modal.tsx
@@ -1,10 +1,16 @@
-import React from 'react'
 import usePortal from 'react-useportal'
 import { Button } from './input/button'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../locales/generic_messages'
 
-export function Modal(props) {
+interface ModalProps {
+  isActive: boolean
+  setActive: (value: boolean) => void
+  children: React.ReactNode
+  className?: string
+}
+
+export function Modal(props: ModalProps) {
   const { isActive, setActive, children } = props
   const { Portal } = usePortal()
 
@@ -26,39 +32,55 @@ export function Modal(props) {
   )
 }
 
-export function Confirm({ message, onCancel, onConfirm, loading }) {
+interface ConfirmProps {
+  message?: string
+  onCancel: () => void
+  onConfirm: () => void
+  loading?: boolean
+}
+export function Confirm({
+  message,
+  onCancel,
+  onConfirm,
+  loading,
+}: ConfirmProps) {
   const intl = useIntl()
   const setActive = () => onCancel()
   return (
     <Modal isActive setActive={setActive} className="confirm">
-      <React.Fragment>
-        <h1 className="title is-size-5">{message || 'Are you Sure?'}</h1>
-        <div className="level" style={{ marginTop: 50 }}>
-          <div className="level-left"></div>
-          <div className="level-right">
-            <button
-              className="button is-danger"
-              onClick={() => onCancel()}
-              data-test="btnCancelModalTest"
-            >
-              {intl.formatMessage(genericMessages.cancel)}
-            </button>
-            &nbsp;&nbsp;
-            <Button
-              loading={loading}
-              className="is-success"
-              onClick={() => onConfirm()}
-              dataTest="btnConfirmModalTest"
-            >
-              {intl.formatMessage(genericMessages.confirm)}
-            </Button>
-          </div>
+      <h1 className="title is-size-5">{message || 'Are you Sure?'}</h1>
+      <div className="level" style={{ marginTop: 50 }}>
+        <div className="level-left"></div>
+        <div className="level-right">
+          <button
+            className="button is-danger"
+            onClick={() => onCancel()}
+            data-test="btnCancelModalTest"
+          >
+            {intl.formatMessage(genericMessages.cancel)}
+          </button>
+          &nbsp;&nbsp;
+          <Button
+            loading={loading}
+            className="is-success"
+            onClick={() => onConfirm()}
+            dataTest="btnConfirmModalTest"
+          >
+            {intl.formatMessage(genericMessages.confirm)}
+          </Button>
         </div>
-      </React.Fragment>
+      </div>
     </Modal>
   )
 }
 
+interface PathTreeProps {
+  title: string
+  defaultPath?: string
+  children?: React.ReactNode
+  onConfirm: (path: string, target: EventTarget) => void
+  onCancel: () => void
+}
 // @todo Improve it... Replacing the inputText to a tree
 export function PathTree({
   title,
@@ -66,7 +88,7 @@ export function PathTree({
   children,
   onConfirm,
   onCancel,
-}) {
+}: PathTreeProps) {
   const intl = useIntl()
   return (
     <Modal isActive setActive={onCancel}>
diff --git a/src/guillo-gmi/components/ui/icon.js b/src/guillo-gmi/components/ui/icon.tsx
similarity index 66%
rename from src/guillo-gmi/components/ui/icon.js
rename to src/guillo-gmi/components/ui/icon.tsx
index 18f9789..9983582 100644
--- a/src/guillo-gmi/components/ui/icon.js
+++ b/src/guillo-gmi/components/ui/icon.tsx
@@ -1,7 +1,12 @@
-import React from 'react'
 import { classnames } from '../../lib/helpers'
 
-export const Icon = ({ icon, className, align }) => {
+interface Props {
+  icon: string
+  className?: string
+  align?: string
+}
+
+export const Icon = ({ icon, className, align }: Props) => {
   const addClass = className ? className.split(' ') : [className]
 
   align = align || 'is-right'
diff --git a/src/guillo-gmi/hooks/useLocation.js b/src/guillo-gmi/hooks/useLocation.tsx
similarity index 79%
rename from src/guillo-gmi/hooks/useLocation.js
rename to src/guillo-gmi/hooks/useLocation.tsx
index 0d7fb17..306225d 100644
--- a/src/guillo-gmi/hooks/useLocation.js
+++ b/src/guillo-gmi/hooks/useLocation.tsx
@@ -3,12 +3,13 @@ import { useEffect, useRef, useState, useCallback } from 'react'
 // Mostly inspired from
 // https://github.com/molefrog/wouter
 
-const setURLParams = (p) =>
-  window.history['pushState'](
+const setURLParams = (p) => {
+  return window.history.pushState(
     0,
-    0,
-    (window.history.pathname || '') + '?' + p.toString().replace(/%2F/g, '/')
+    '0',
+    '' + '?' + p.toString().replace(/%2F/g, '/')
   )
+}
 
 const clean = (to) => {
   const current = new URLSearchParams()
@@ -16,7 +17,11 @@ const clean = (to) => {
   setURLParams(current)
 }
 
-export const useLocation = () => {
+export const useLocation = (): [
+  URLSearchParams,
+  (to: { [key: string]: string }, replace?: boolean) => void,
+  (param: string) => void
+] => {
   const [path, update] = useState(currentSearchParams())
   const prevPath = useRef(path)
 
@@ -40,8 +45,9 @@ export const useLocation = () => {
     // https://gist.github.com/bvaughn/e25397f70e8c65b0ae0d7c90b731b189
     checkForUpdates()
 
-    return () =>
+    return () => {
       events.map((e) => window.removeEventListener(e, checkForUpdates))
+    }
   }, [])
 
   // the 2nd argument of the `useLocation` return value is a function
@@ -55,7 +61,7 @@ export const useLocation = () => {
         clean(to)
         return
       }
-      let current = new URLSearchParams(path.toString())
+      const current = new URLSearchParams(path.toString())
       Object.keys(to).forEach((_key) => current.set(_key, to[_key]))
       setURLParams(current)
     },
@@ -64,7 +70,7 @@ export const useLocation = () => {
 
   const remove = useCallback(
     (param) => {
-      let current = new URLSearchParams(path.toString())
+      const current = new URLSearchParams(path.toString())
       current.delete(param)
       setURLParams(current)
     },
@@ -87,10 +93,11 @@ const patchHistoryEvents = () => {
   ;['pushState', 'replaceState'].map((type) => {
     const original = window.history[type]
 
-    window.history[type] = function () {
-      const result = original.apply(this, arguments)
-      const event = new Event(type)
-      event.arguments = arguments
+    window.history[type] = function (...args) {
+      const result = original.apply(this, args)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const event: any = new Event(type)
+      event.arguments = args
 
       dispatchEvent(event)
       return result
diff --git a/tsconfig.json b/tsconfig.json
index 4e4d417..cb04510 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,8 @@
   "compilerOptions": {
     "strict": false,
     "removeComments": true,
-    "allowJs": true
+    "allowJs": true,
+    "jsx": "react-jsx"
   },
   "include": [
     "./src/guillo-gmi"

From 779797f99305e1c786a75c0afedc24597ad998e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roger=20Boixader=20G=C3=BCell?= <rboixaderg@gmail.com>
Date: Fri, 19 Jan 2024 11:47:14 +0100
Subject: [PATCH 04/20] wip: more components

---
 src/guillo-gmi/components/input/index.js      |  6 +-
 .../components/input/{input.js => input.tsx}  | 72 ++++++++-----------
 src/guillo-gmi/components/input/input_list.js | 55 --------------
 .../components/input/input_list.tsx           | 59 +++++++++++++++
 src/guillo-gmi/components/input/password.js   |  6 --
 src/guillo-gmi/components/input/password.tsx  | 23 ++++++
 .../input/{upload.js => upload.tsx}           | 14 +++-
 .../panel/{actions.js => actions.tsx}         |  6 +-
 .../panel/{addons.js => addons.tsx}           | 44 +++++++-----
 .../panel/{behaviors.js => behaviors.tsx}     | 16 ++---
 .../components/ui/{table.js => table.tsx}     | 12 ++--
 src/guillo-gmi/hooks/useAsync.js              | 14 ----
 src/guillo-gmi/hooks/useAsyncFn.js            | 36 ----------
 .../{useClickAway.js => useClickAway.tsx}     |  0
 .../hooks/{useInput.js => useInput.tsx}       |  6 +-
 ...useMountedState.js => useMountedState.tsx} |  0
 .../{useRemoteField.js => useRemoteField.tsx} |  6 +-
 .../hooks/{useSetState.js => useSetState.tsx} |  0
 18 files changed, 178 insertions(+), 197 deletions(-)
 rename src/guillo-gmi/components/input/{input.js => input.tsx} (65%)
 delete mode 100644 src/guillo-gmi/components/input/input_list.js
 create mode 100644 src/guillo-gmi/components/input/input_list.tsx
 delete mode 100644 src/guillo-gmi/components/input/password.js
 create mode 100644 src/guillo-gmi/components/input/password.tsx
 rename src/guillo-gmi/components/input/{upload.js => upload.tsx} (77%)
 rename src/guillo-gmi/components/panel/{actions.js => actions.tsx} (93%)
 rename src/guillo-gmi/components/panel/{addons.js => addons.tsx} (79%)
 rename src/guillo-gmi/components/panel/{behaviors.js => behaviors.tsx} (92%)
 rename src/guillo-gmi/components/ui/{table.js => table.tsx} (56%)
 delete mode 100644 src/guillo-gmi/hooks/useAsync.js
 delete mode 100644 src/guillo-gmi/hooks/useAsyncFn.js
 rename src/guillo-gmi/hooks/{useClickAway.js => useClickAway.tsx} (100%)
 rename src/guillo-gmi/hooks/{useInput.js => useInput.tsx} (87%)
 rename src/guillo-gmi/hooks/{useMountedState.js => useMountedState.tsx} (100%)
 rename src/guillo-gmi/hooks/{useRemoteField.js => useRemoteField.tsx} (88%)
 rename src/guillo-gmi/hooks/{useSetState.js => useSetState.tsx} (100%)

diff --git a/src/guillo-gmi/components/input/index.js b/src/guillo-gmi/components/input/index.js
index 0037380..fa9f383 100644
--- a/src/guillo-gmi/components/input/index.js
+++ b/src/guillo-gmi/components/input/index.js
@@ -5,9 +5,9 @@ export { default as checkbox } from './checkbox.js'
 export { default as email } from './email.js'
 export { default as form } from './form.js'
 export { default as form_builder } from './form_builder.js'
-export { default as input } from './input.js'
-export { default as password } from './password.js'
+export { default as input } from './input.tsx'
+export { default as password } from './password.tsx'
 export { default as select } from './select.js'
 export { default as select_vocabulary } from './select_vocabulary.js'
 export { default as search_input } from './search_input.js'
-export { default as input_list } from './input_list.js'
+export { default as input_list } from './input_list.tsx'
diff --git a/src/guillo-gmi/components/input/input.js b/src/guillo-gmi/components/input/input.tsx
similarity index 65%
rename from src/guillo-gmi/components/input/input.js
rename to src/guillo-gmi/components/input/input.tsx
index 44e67fc..df378e5 100644
--- a/src/guillo-gmi/components/input/input.js
+++ b/src/guillo-gmi/components/input/input.tsx
@@ -1,5 +1,4 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
+import { InputHTMLAttributes, forwardRef, useRef, useState } from 'react'
 import { classnames, generateUID } from '../../lib/helpers'
 import ErrorZone from '../error_zone'
 import useInput from '../../hooks/useInput'
@@ -7,9 +6,27 @@ import { notEmpty } from '../../lib/validators'
 import { useEffect } from 'react'
 
 const noop = () => true
+interface Props {
+  icon?: JSX.Element
+  iconPosition?: 'has-icons-left' | 'has-icons-right'
+  error?: string
+  errorZoneClassName?: string
+  autoComplete?: string
+  className?: string
+  widget?: string
+  loading?: boolean
+  validator?: ((value: string) => boolean) | ((value: string) => boolean)[]
+  errorMessage?: string
+  dataTest?: string
+  autofocus?: boolean
+  onChange?: (value: string) => void
+}
 
 /** @type any */
-export const Input = React.forwardRef(
+export const Input = forwardRef<
+  HTMLInputElement,
+  Props & InputHTMLAttributes<HTMLInputElement>
+>(
   (
     {
       icon,
@@ -20,8 +37,6 @@ export const Input = React.forwardRef(
       className = '',
       widget = 'input',
       type = 'text',
-      onPressEnter,
-      isSubmitted,
       loading = false,
       required = false,
       id,
@@ -32,28 +47,30 @@ export const Input = React.forwardRef(
       validator = noop,
       errorMessage,
       dataTest = 'testInput',
-      ...rest
+      disabled,
+      onKeyUp,
     },
     ref
   ) => {
+    let validatorFn = null
     if (required) {
-      validator = Array.isArray(validator)
+      validatorFn = Array.isArray(validator)
         ? validator.push(notEmpty)
         : [validator, notEmpty]
     }
 
-    const { state, ...handlers } = useInput(onChange, value ?? '', validator)
+    const { state, ...handlers } = useInput(onChange, value ?? '', validatorFn)
     const [uid] = useState(generateUID('input'))
     const [mounted, setMounted] = useState(false)
     // eslint-disable-next-line
-    ref = ref || React.useRef()
+    ref = ref || useRef()
 
     useEffect(() => {
       setMounted(true)
     }, [])
 
     useEffect(() => {
-      if (autofocus && !error) {
+      if (autofocus && !error && ref != null && typeof ref !== 'function') {
         ref.current.focus()
       }
     }, [mounted, autofocus, ref, error])
@@ -73,7 +90,6 @@ export const Input = React.forwardRef(
         <div className={classnames(cssControl())}>
           <input
             className={classnames([widget, className, statusClasses])}
-            aria-invalid={theError}
             aria-describedby={uid}
             id={id}
             ref={ref}
@@ -81,11 +97,11 @@ export const Input = React.forwardRef(
             value={state.value}
             placeholder={placeholder}
             autoComplete={autoComplete}
-            disabled={loading || rest.disabled}
+            disabled={loading || disabled}
             required={required}
             data-test={dataTest}
+            onKeyUp={onKeyUp}
             {...handlers}
-            {...rest}
           />
           {icon && icon}
         </div>
@@ -96,33 +112,3 @@ export const Input = React.forwardRef(
     )
   }
 )
-
-Input.propTypes = {
-  icon: PropTypes.node,
-  iconPosition: PropTypes.arrayOf(
-    PropTypes.oneOf(['has-icons-left', 'has-icons-right', ''])
-  ),
-  error: PropTypes.string,
-  errorZoneClassName: PropTypes.string,
-  autoComplete: PropTypes.string,
-  autoFocus: PropTypes.bool,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  loading: PropTypes.bool,
-  isSubmitted: PropTypes.bool,
-  id: PropTypes.string,
-  name: PropTypes.string,
-  onChange: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onKeyUp: PropTypes.func,
-  onPressEnter: PropTypes.func,
-  placeholder: PropTypes.string,
-  readOnly: PropTypes.bool,
-  required: PropTypes.bool,
-  type: PropTypes.string,
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.bool,
-  ]),
-}
diff --git a/src/guillo-gmi/components/input/input_list.js b/src/guillo-gmi/components/input/input_list.js
deleted file mode 100644
index 9a2831a..0000000
--- a/src/guillo-gmi/components/input/input_list.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react'
-import { Input } from './input'
-import { useIntl } from 'react-intl'
-
-export const InputList = React.forwardRef(
-  ({ value, onChange, dataTest }, ref) => {
-    const intl = useIntl()
-    const [inputValue, setInputValue] = React.useState('')
-    const addTags = (event) => {
-      if (event.key === 'Enter' && event.target.value !== '') {
-        onChange([...value, event.target.value])
-        setInputValue('')
-      }
-    }
-
-    return (
-      <div className="control">
-        <div className="tags">
-          {value.map((tag, index) => (
-            <div
-              key={`input_list_${tag}_${index}`}
-              className="tag is-info is-medium"
-            >
-              {tag}
-              <button
-                className="delete is-small"
-                onClick={() =>
-                  onChange([
-                    ...value.filter((tag) => value.indexOf(tag) !== index),
-                  ])
-                }
-              ></button>
-            </div>
-          ))}
-        </div>
-        <Input
-          type="text"
-          placeholder={intl.formatMessage({
-            id: 'press_enter_to_add_value',
-            defaultMessage: 'Press enter to add value',
-          })}
-          onKeyUp={(event) => addTags(event)}
-          value={inputValue}
-          ref={ref}
-          dataTest={dataTest}
-          onChange={(value) => {
-            if (value !== '') {
-              setInputValue(value)
-            }
-          }}
-        />
-      </div>
-    )
-  }
-)
diff --git a/src/guillo-gmi/components/input/input_list.tsx b/src/guillo-gmi/components/input/input_list.tsx
new file mode 100644
index 0000000..0ed4ed4
--- /dev/null
+++ b/src/guillo-gmi/components/input/input_list.tsx
@@ -0,0 +1,59 @@
+import { InputHTMLAttributes, forwardRef, useState } from 'react'
+import { Input } from './input'
+import { useIntl } from 'react-intl'
+
+interface Props {
+  value: string[]
+  onChange: (value: string[]) => void
+  dataTest?: string
+}
+export const InputList = forwardRef<
+  HTMLInputElement,
+  InputHTMLAttributes<HTMLInputElement> & Props
+>(({ value, onChange, dataTest }, ref) => {
+  const intl = useIntl()
+  const [inputValue, setInputValue] = useState('')
+  const addTags = (event) => {
+    if (event.key === 'Enter' && event.target.value !== '') {
+      onChange([...value, event.target.value])
+      setInputValue('')
+    }
+  }
+
+  return (
+    <div className="control">
+      <div className="tags">
+        {value.map((tag, index) => (
+          <div
+            key={`input_list_${tag}_${index}`}
+            className="tag is-info is-medium"
+          >
+            {tag}
+            <button
+              className="delete is-small"
+              onClick={() =>
+                onChange([
+                  ...value.filter((tag) => value.indexOf(tag) !== index),
+                ])
+              }
+            ></button>
+          </div>
+        ))}
+      </div>
+      <Input
+        type="text"
+        placeholder={intl.formatMessage({
+          id: 'press_enter_to_add_value',
+          defaultMessage: 'Press enter to add value',
+        })}
+        onKeyUp={(event) => addTags(event)}
+        value={inputValue}
+        ref={ref}
+        dataTest={dataTest}
+        onChange={(value) => {
+          setInputValue(value)
+        }}
+      />
+    </div>
+  )
+})
diff --git a/src/guillo-gmi/components/input/password.js b/src/guillo-gmi/components/input/password.js
deleted file mode 100644
index 9214a5b..0000000
--- a/src/guillo-gmi/components/input/password.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-import { Input } from './input'
-
-export const PasswordInput = ({ value = '', ...rest }) => {
-  return <Input value={value} type="password" {...rest} />
-}
diff --git a/src/guillo-gmi/components/input/password.tsx b/src/guillo-gmi/components/input/password.tsx
new file mode 100644
index 0000000..80517d3
--- /dev/null
+++ b/src/guillo-gmi/components/input/password.tsx
@@ -0,0 +1,23 @@
+import { InputHTMLAttributes } from 'react'
+import { Input } from './input'
+
+interface Props {
+  value: string
+  dataTest: string
+  onChange: (value: string) => void
+}
+
+export const PasswordInput = ({
+  value,
+  dataTest,
+  onChange,
+}: Props & InputHTMLAttributes<HTMLInputElement>) => {
+  return (
+    <Input
+      value={value}
+      type="password"
+      dataTest={dataTest}
+      onChange={onChange}
+    />
+  )
+}
diff --git a/src/guillo-gmi/components/input/upload.js b/src/guillo-gmi/components/input/upload.tsx
similarity index 77%
rename from src/guillo-gmi/components/input/upload.js
rename to src/guillo-gmi/components/input/upload.tsx
index 8269656..18b6909 100644
--- a/src/guillo-gmi/components/input/upload.js
+++ b/src/guillo-gmi/components/input/upload.tsx
@@ -1,8 +1,16 @@
-import React from 'react'
+import { InputHTMLAttributes } from 'react'
 import { lightFileReader } from '../../lib/client'
 import { useIntl } from 'react-intl'
 
-export function FileUpload({ label, onChange, ...props }) {
+interface Props {
+  label?: string
+  dataTest?: string
+}
+export function FileUpload({
+  label,
+  onChange,
+  dataTest,
+}: Props & InputHTMLAttributes<HTMLInputElement>) {
   const intl = useIntl()
   const changed = async (event) => {
     const file = await lightFileReader(event.target.files[0])
@@ -14,10 +22,10 @@ export function FileUpload({ label, onChange, ...props }) {
       <label className="file-label">
         <input
           className="file-input"
-          {...props}
           type="file"
           name="file"
           onChange={changed}
+          data-test={dataTest}
         />
         <span className="file-cta">
           <span className="file-icon">
diff --git a/src/guillo-gmi/components/panel/actions.js b/src/guillo-gmi/components/panel/actions.tsx
similarity index 93%
rename from src/guillo-gmi/components/panel/actions.js
rename to src/guillo-gmi/components/panel/actions.tsx
index a825c3f..53524bd 100644
--- a/src/guillo-gmi/components/panel/actions.js
+++ b/src/guillo-gmi/components/panel/actions.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
 import { useTraversal } from '../../contexts'
 import { useIntl } from 'react-intl'
 import { getActionsObject } from '../../lib/helpers'
+import { Fragment } from 'react'
 
 export function PanelActions() {
   const traversal = useTraversal()
@@ -19,7 +19,7 @@ export function PanelActions() {
   }
 
   return (
-    <React.Fragment>
+    <Fragment>
       {Object.keys(ACTIONS_OBJECT).map((actionKey) => {
         if (hasPerm(ACTIONS_OBJECT[actionKey].perms)) {
           return (
@@ -35,6 +35,6 @@ export function PanelActions() {
           )
         }
       })}
-    </React.Fragment>
+    </Fragment>
   )
 }
diff --git a/src/guillo-gmi/components/panel/addons.js b/src/guillo-gmi/components/panel/addons.tsx
similarity index 79%
rename from src/guillo-gmi/components/panel/addons.js
rename to src/guillo-gmi/components/panel/addons.tsx
index 0029772..a9d1d61 100644
--- a/src/guillo-gmi/components/panel/addons.js
+++ b/src/guillo-gmi/components/panel/addons.tsx
@@ -1,8 +1,7 @@
-import React from 'react'
 import { useTraversal } from '../../contexts'
-import useAsync from '../../hooks/useAsync'
 import { useIntl, defineMessages } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
+import { Fragment, useEffect, useState } from 'react'
 
 const messages = defineMessages({
   available_addons: {
@@ -20,10 +19,29 @@ const messages = defineMessages({
 })
 
 // TODO: Refactor without useAsync... just crudContext
-export function PanelAddons(props) {
+export function PanelAddons() {
   const intl = useIntl()
   const Ctx = useTraversal()
-  let [action, setAction] = React.useState(false)
+  let [action, setAction] = useState(false)
+  const [state, setState] = useState({
+    data: undefined,
+    loading: false,
+    error: undefined,
+  })
+
+  useEffect(() => {
+    ;(async () => {
+      if (!state.loading && !state.data && !state.error) {
+        try {
+          const response = await Ctx.client.getAddons(Ctx.pathPrefix)
+          const data = await response.json()
+          setState({ ...state, loading: false, data: prepareData(data) })
+        } catch (err) {
+          setState({ ...state, loading: false, error: err })
+        }
+      }
+    })()
+  }, [action])
 
   const installAddon = async (Ctx, key) => {
     await Ctx.client.installAddon(Ctx.pathPrefix, key)
@@ -37,14 +55,8 @@ export function PanelAddons(props) {
     setAction(!action)
   }
 
-  const state = useAsync(async () => {
-    const response = await Ctx.client.getAddons(Ctx.pathPrefix)
-    const data = await response.json()
-    return prepareData(data)
-  }, [action])
-
   return (
-    <React.Fragment>
+    <Fragment>
       {state.loading ? (
         <div>{intl.formatMessage(genericMessages.loading)}</div>
       ) : state.error ? (
@@ -56,14 +68,14 @@ export function PanelAddons(props) {
               {intl.formatMessage(messages.available_addons)}
             </h2>
             <hr />
-            {state.value.available.length === 0 && (
+            {state.data.available.length === 0 && (
               <p>
                 {intl.formatMessage(messages.no_available_addons_container)}
               </p>
             )}
             <table className="table is-12">
               <tbody>
-                {state.value.available.map((addon) => (
+                {state.data.available.map((addon) => (
                   <tr>
                     <td>{addon.title}</td>
                     <td>
@@ -84,14 +96,14 @@ export function PanelAddons(props) {
               {intl.formatMessage(messages.installed_addons)}
             </h2>
             <hr />
-            {state.value.installed.length === 0 && (
+            {state.data.installed.length === 0 && (
               <p>
                 {intl.formatMessage(messages.no_available_addons_container)}
               </p>
             )}
             <table className="table is-12">
               <tbody>
-                {state.value.installed.map((addon) => (
+                {state.data.installed.map((addon) => (
                   <tr>
                     <td>{addon.title}</td>
                     <td>
@@ -109,7 +121,7 @@ export function PanelAddons(props) {
           </div>
         </div>
       )}
-    </React.Fragment>
+    </Fragment>
   )
 }
 
diff --git a/src/guillo-gmi/components/panel/behaviors.js b/src/guillo-gmi/components/panel/behaviors.tsx
similarity index 92%
rename from src/guillo-gmi/components/panel/behaviors.js
rename to src/guillo-gmi/components/panel/behaviors.tsx
index fc51305..4950ce4 100644
--- a/src/guillo-gmi/components/panel/behaviors.js
+++ b/src/guillo-gmi/components/panel/behaviors.tsx
@@ -1,16 +1,16 @@
-import React from 'react'
 import { useCrudContext } from '../../hooks/useCrudContext'
 import { Table } from '../ui/table'
 import { Button } from '../input/button'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
+import { Fragment, useEffect, useState } from 'react'
 
 export function PanelBehaviors() {
   const intl = useIntl()
   const { Ctx, get, result, loading, isError } = useCrudContext()
   const ops = useCrudContext()
 
-  const [state, setState] = React.useState(false)
+  const [state, setState] = useState(false)
 
   const enableBehavior = (behavior) => async () => {
     await ops.patch({ behavior }, '@behaviors')
@@ -24,7 +24,7 @@ export function PanelBehaviors() {
     Ctx.refresh()
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     get('@behaviors')
   }, [])
 
@@ -35,10 +35,10 @@ export function PanelBehaviors() {
           {intl.formatMessage(genericMessages.behaviors)}
         </h2>
         {!loading && !isError && result && (
-          <React.Fragment>
+          <Fragment>
             <Table>
               <tr>
-                <td colSpan="3">
+                <td colSpan={3}>
                   <h3 className="title is-size-6">
                     {intl.formatMessage(genericMessages.static)}
                   </h3>
@@ -58,7 +58,7 @@ export function PanelBehaviors() {
             </Table>
             <Table>
               <tr>
-                <td colSpan="3">
+                <td colSpan={3}>
                   <h3 className="title is-size-6">
                     {intl.formatMessage(genericMessages.enabled)}
                   </h3>
@@ -81,7 +81,7 @@ export function PanelBehaviors() {
             </Table>
             <Table>
               <tr>
-                <td colSpan="3">
+                <td colSpan={3}>
                   <h3 className="title is-size-6">
                     {intl.formatMessage(genericMessages.available)}
                   </h3>
@@ -102,7 +102,7 @@ export function PanelBehaviors() {
                 </tr>
               ))}
             </Table>
-          </React.Fragment>
+          </Fragment>
         )}
       </div>
       <div className="column is-4"></div>
diff --git a/src/guillo-gmi/components/ui/table.js b/src/guillo-gmi/components/ui/table.tsx
similarity index 56%
rename from src/guillo-gmi/components/ui/table.js
rename to src/guillo-gmi/components/ui/table.tsx
index d54cc09..af87ec4 100644
--- a/src/guillo-gmi/components/ui/table.js
+++ b/src/guillo-gmi/components/ui/table.tsx
@@ -1,12 +1,16 @@
-import React from 'react'
 import { classnames } from '../../lib/helpers'
 
-export function Table({ headers, children, className }) {
-  className = className
+interface Props {
+  headers?: string[]
+  className?: string
+  children: React.ReactNode
+}
+export function Table({ headers, children, className }: Props) {
+  const parsedClassName = className
     ? className.split(' ')
     : ' is-full is-fullwidth is-narrow'.split(' ')
   return (
-    <table className={classnames(['table', ...className])}>
+    <table className={classnames(['table', ...parsedClassName])}>
       <thead>
         <tr>
           {headers &&
diff --git a/src/guillo-gmi/hooks/useAsync.js b/src/guillo-gmi/hooks/useAsync.js
deleted file mode 100644
index ee5c9d4..0000000
--- a/src/guillo-gmi/hooks/useAsync.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useEffect } from 'react'
-import useAsyncFn from './useAsyncFn'
-
-export default function useAsync(fn, deps = []) {
-  const [state, callback] = useAsyncFn(fn, deps, {
-    loading: true,
-  })
-
-  useEffect(() => {
-    callback()
-  }, [callback])
-
-  return state
-}
diff --git a/src/guillo-gmi/hooks/useAsyncFn.js b/src/guillo-gmi/hooks/useAsyncFn.js
deleted file mode 100644
index ff4e05f..0000000
--- a/src/guillo-gmi/hooks/useAsyncFn.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useCallback, useState, useRef } from 'react'
-import useMountedState from './useMountedState'
-
-export default function useAsyncFn(
-  fn,
-  deps = [],
-  initialState = { loading: false }
-) {
-  const lastCallId = useRef(0)
-  const isMounted = useMountedState()
-  const [state, set] = useState(initialState)
-
-  const callback = useCallback((...args) => {
-    const callId = ++lastCallId.current
-    set((prevState) => ({ ...prevState, loading: true }))
-
-    return fn(...args).then(
-      (value) => {
-        isMounted() &&
-          callId === lastCallId.current &&
-          set({ value, loading: false })
-
-        return value
-      },
-      (error) => {
-        isMounted() &&
-          callId === lastCallId.current &&
-          set({ error, loading: false })
-
-        return error
-      }
-    )
-  }, deps)
-
-  return [state, callback]
-}
diff --git a/src/guillo-gmi/hooks/useClickAway.js b/src/guillo-gmi/hooks/useClickAway.tsx
similarity index 100%
rename from src/guillo-gmi/hooks/useClickAway.js
rename to src/guillo-gmi/hooks/useClickAway.tsx
diff --git a/src/guillo-gmi/hooks/useInput.js b/src/guillo-gmi/hooks/useInput.tsx
similarity index 87%
rename from src/guillo-gmi/hooks/useInput.js
rename to src/guillo-gmi/hooks/useInput.tsx
index 0fad2dd..454bd45 100644
--- a/src/guillo-gmi/hooks/useInput.js
+++ b/src/guillo-gmi/hooks/useInput.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { useEffect, useState } from 'react'
 
 const applyValidators = (value, validators) => {
   let validation = Array.isArray(validators) ? validators : [validators]
@@ -12,7 +12,7 @@ const applyValidators = (value, validators) => {
 }
 
 const useInput = (onChange, value, validator) => {
-  let [state, setState] = React.useState({ hasError: false, value: value })
+  let [state, setState] = useState({ hasError: false, value: value })
 
   const onUpdate = (ev) => {
     const value = ev && ev.target ? ev.target.value : ev ? ev : ''
@@ -31,7 +31,7 @@ const useInput = (onChange, value, validator) => {
     }
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     setState({ value, hasError: false })
   }, [value])
 
diff --git a/src/guillo-gmi/hooks/useMountedState.js b/src/guillo-gmi/hooks/useMountedState.tsx
similarity index 100%
rename from src/guillo-gmi/hooks/useMountedState.js
rename to src/guillo-gmi/hooks/useMountedState.tsx
diff --git a/src/guillo-gmi/hooks/useRemoteField.js b/src/guillo-gmi/hooks/useRemoteField.tsx
similarity index 88%
rename from src/guillo-gmi/hooks/useRemoteField.js
rename to src/guillo-gmi/hooks/useRemoteField.tsx
index 4fd635b..8c4c694 100644
--- a/src/guillo-gmi/hooks/useRemoteField.js
+++ b/src/guillo-gmi/hooks/useRemoteField.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 /*
   This hook allows to bind (remote) fields on the DOM
   to a form generated with Formbuilder.
@@ -17,8 +15,10 @@ import React from 'react'
 
 */
 
+import { useState } from 'react'
+
 export const useRemoteField = (initial) => {
-  const [remotes, setRemote] = React.useState(initial)
+  const [remotes, setRemote] = useState(initial)
 
   const updateRemote = (name) => (value) => {
     setRemote({
diff --git a/src/guillo-gmi/hooks/useSetState.js b/src/guillo-gmi/hooks/useSetState.tsx
similarity index 100%
rename from src/guillo-gmi/hooks/useSetState.js
rename to src/guillo-gmi/hooks/useSetState.tsx

From 20b7bf55607dacd4ec01d040abef72f4700cd5f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roger=20Boixader=20G=C3=BCell?= <rboixaderg@gmail.com>
Date: Thu, 25 Jan 2024 17:25:16 +0100
Subject: [PATCH 05/20] wip: move to typescript

---
 .eslintrc.js                                  |  5 +-
 package.json                                  |  5 +-
 src/guillo-gmi/actions/{index.js => index.ts} |  0
 .../components/{Link.js => Link.tsx}          | 12 ++-
 src/guillo-gmi/components/TdLink.js           | 18 -----
 src/guillo-gmi/components/TdLink.tsx          | 27 +++++++
 .../{behavior_view.js => behavior_view.tsx}   |  7 +-
 ...mageattachment.js => iimageattachment.tsx} |  2 +-
 ...ultiattachment.js => imultiattachment.tsx} | 16 ++--
 ...ttachment.js => imultiimageattachment.tsx} | 14 ++--
 ...nt.js => imultiimageorderedattachment.tsx} | 24 +++---
 .../behaviors/{iworkflow.js => iworkflow.tsx} | 12 +--
 ...context_toolbar.js => context_toolbar.tsx} | 29 +++----
 .../{error_boundary.js => error_boundary.tsx} | 15 +++-
 .../{error_zone.js => error_zone.tsx}         |  9 ++-
 .../{downloadField.js => downloadField.tsx}   |  1 -
 .../{editComponent.js => editComponent.tsx}   | 55 ++++++-------
 .../{renderField.js => renderField.tsx}       | 12 ++-
 .../components/{flash.js => flash.tsx}        |  1 -
 .../{guillotina.js => guillotina.tsx}         | 17 +++-
 .../input/{checkbox.js => checkbox.tsx}       | 31 +++++---
 .../input/{dropdown.js => dropdown.tsx}       | 18 +++--
 .../components/input/{email.js => email.tsx}  | 18 ++++-
 .../{form_builder.js => form_builder.tsx}     | 34 +++++---
 src/guillo-gmi/components/input/index.js      | 13 ---
 src/guillo-gmi/components/input/index.tsx     | 13 +++
 src/guillo-gmi/components/input/input.tsx     | 18 +++--
 .../{search_input.js => search_input.tsx}     | 68 ++++++++--------
 ...ch_input_list.js => search_input_list.tsx} | 71 +++++++++--------
 .../input/{select.js => select.tsx}           | 43 +++++-----
 ...ct_vocabulary.js => select_vocabulary.tsx} | 45 +++++++----
 .../input/{textarea.js => textarea.tsx}       | 18 ++++-
 src/guillo-gmi/components/input/upload.tsx    |  6 +-
 .../components/{item.js => item.tsx}          | 22 +++++-
 .../components/{layout.js => layout.tsx}      | 17 ++--
 .../components/{login.js => login.tsx}        | 19 ++++-
 .../{notallowed.js => notallowed.tsx}         |  1 -
 .../components/{notfound.js => notfound.tsx}  |  1 -
 .../{pagination.js => pagination.tsx}         | 14 ++--
 src/guillo-gmi/components/panel/addons.tsx    |  6 +-
 src/guillo-gmi/components/panel/index.js      |  8 --
 src/guillo-gmi/components/panel/index.ts      |  6 ++
 .../components/panel/{items.js => items.tsx}  | 35 ++++----
 .../panel/{permissions.js => permissions.tsx} | 33 ++++----
 ...s_prinperm.js => permissions_prinperm.tsx} |  2 -
 ...s_prinrole.js => permissions_prinrole.tsx} |  2 -
 ...s_roleperm.js => permissions_roleperm.tsx} |  2 -
 .../panel/{properties.js => properties.tsx}   |  2 +-
 .../components/{path.js => path.tsx}          | 11 +--
 ...properties_view.js => properties_view.tsx} |  0
 .../{search_labels.js => search_labels.tsx}   |  7 +-
 ...ns_labels.js => search_options_labels.tsx} |  9 ++-
 ...labels.js => search_vocabulary_labels.tsx} | 12 ++-
 ..._actions.js => selected_items_actions.tsx} | 46 ++++++++---
 .../components/{tabs.js => tabs.tsx}          | 20 +++--
 src/guillo-gmi/components/ui/delete.js        | 14 ----
 src/guillo-gmi/components/ui/delete.tsx       | 19 +++++
 .../components/ui/{index.js => index.ts}      |  0
 src/guillo-gmi/components/ui/loading.js       |  5 --
 src/guillo-gmi/components/ui/loading.tsx      |  8 ++
 .../ui/{notification.js => notification.tsx}  |  2 -
 .../components/ui/{tag.js => tag.tsx}         | 10 ++-
 .../components/widgets/{index.js => index.ts} |  0
 .../components/widgets/{tags.js => tags.tsx}  | 21 +++--
 .../contexts/{index.js => index.tsx}          | 50 +++++++++---
 src/guillo-gmi/forms/{base.js => base.tsx}    | 16 +++-
 ...required_fields.js => required_fields.tsx} | 22 +++++-
 src/guillo-gmi/forms/{users.js => users.tsx}  | 39 ++++++---
 .../hooks/{useConfig.js => useConfig.tsx}     | 29 ++++---
 .../{useCrudContext.js => useCrudContext.tsx} | 11 ++-
 src/guillo-gmi/hooks/useLocation.tsx          |  3 +-
 .../hooks/{useRegistry.js => useRegistry.tsx} | 51 +++++++++---
 src/guillo-gmi/hooks/useRemoteField.tsx       |  3 +-
 src/guillo-gmi/hooks/useSetState.tsx          |  6 +-
 src/guillo-gmi/lib/{auth.js => auth.ts}       | 23 ++++--
 src/guillo-gmi/lib/{client.js => client.tsx}  | 22 +++---
 .../reducers/{guillotina.js => guillotina.ts} | 34 +++++++-
 src/guillo-gmi/types/global.ts                |  7 ++
 src/guillo-gmi/types/guillotina.ts            | 79 +++++++++++++++++++
 .../views/{application.js => application.tsx} | 27 ++++---
 .../views/{container.js => container.tsx}     |  5 +-
 tsconfig.json                                 |  4 +-
 yarn.lock                                     | 45 +++++++++++
 83 files changed, 1006 insertions(+), 501 deletions(-)
 rename src/guillo-gmi/actions/{index.js => index.ts} (100%)
 rename src/guillo-gmi/components/{Link.js => Link.tsx} (68%)
 delete mode 100644 src/guillo-gmi/components/TdLink.js
 create mode 100644 src/guillo-gmi/components/TdLink.tsx
 rename src/guillo-gmi/components/{behavior_view.js => behavior_view.tsx} (88%)
 rename src/guillo-gmi/components/behaviors/{iimageattachment.js => iimageattachment.tsx} (98%)
 rename src/guillo-gmi/components/behaviors/{imultiattachment.js => imultiattachment.tsx} (93%)
 rename src/guillo-gmi/components/behaviors/{imultiimageattachment.js => imultiimageattachment.tsx} (95%)
 rename src/guillo-gmi/components/behaviors/{imultiimageorderedattachment.js => imultiimageorderedattachment.tsx} (94%)
 rename src/guillo-gmi/components/behaviors/{iworkflow.js => iworkflow.tsx} (93%)
 rename src/guillo-gmi/components/{context_toolbar.js => context_toolbar.tsx} (88%)
 rename src/guillo-gmi/components/{error_boundary.js => error_boundary.tsx} (72%)
 rename src/guillo-gmi/components/{error_zone.js => error_zone.tsx} (68%)
 rename src/guillo-gmi/components/fields/{downloadField.js => downloadField.tsx} (98%)
 rename src/guillo-gmi/components/fields/{editComponent.js => editComponent.tsx} (84%)
 rename src/guillo-gmi/components/fields/{renderField.js => renderField.tsx} (94%)
 rename src/guillo-gmi/components/{flash.js => flash.tsx} (93%)
 rename src/guillo-gmi/components/{guillotina.js => guillotina.tsx} (89%)
 rename src/guillo-gmi/components/input/{checkbox.js => checkbox.tsx} (62%)
 rename src/guillo-gmi/components/input/{dropdown.js => dropdown.tsx} (85%)
 rename src/guillo-gmi/components/input/{email.js => email.tsx} (63%)
 rename src/guillo-gmi/components/input/{form_builder.js => form_builder.tsx} (76%)
 delete mode 100644 src/guillo-gmi/components/input/index.js
 create mode 100644 src/guillo-gmi/components/input/index.tsx
 rename src/guillo-gmi/components/input/{search_input.js => search_input.tsx} (89%)
 rename src/guillo-gmi/components/input/{search_input_list.js => search_input_list.tsx} (89%)
 rename src/guillo-gmi/components/input/{select.js => select.tsx} (80%)
 rename src/guillo-gmi/components/input/{select_vocabulary.js => select_vocabulary.tsx} (64%)
 rename src/guillo-gmi/components/input/{textarea.js => textarea.tsx} (76%)
 rename src/guillo-gmi/components/{item.js => item.tsx} (77%)
 rename src/guillo-gmi/components/{layout.js => layout.tsx} (84%)
 rename src/guillo-gmi/components/{login.js => login.tsx} (89%)
 rename src/guillo-gmi/components/{notallowed.js => notallowed.tsx} (94%)
 rename src/guillo-gmi/components/{notfound.js => notfound.tsx} (94%)
 rename src/guillo-gmi/components/{pagination.js => pagination.tsx} (86%)
 delete mode 100644 src/guillo-gmi/components/panel/index.js
 create mode 100644 src/guillo-gmi/components/panel/index.ts
 rename src/guillo-gmi/components/panel/{items.js => items.tsx} (93%)
 rename src/guillo-gmi/components/panel/{permissions.js => permissions.tsx} (92%)
 rename src/guillo-gmi/components/panel/{permissions_prinperm.js => permissions_prinperm.tsx} (99%)
 rename src/guillo-gmi/components/panel/{permissions_prinrole.js => permissions_prinrole.tsx} (99%)
 rename src/guillo-gmi/components/panel/{permissions_roleperm.js => permissions_roleperm.tsx} (99%)
 rename src/guillo-gmi/components/panel/{properties.js => properties.tsx} (99%)
 rename src/guillo-gmi/components/{path.js => path.tsx} (85%)
 rename src/guillo-gmi/components/{properties_view.js => properties_view.tsx} (100%)
 rename src/guillo-gmi/components/{search_labels.js => search_labels.tsx} (84%)
 rename src/guillo-gmi/components/{search_options_labels.js => search_options_labels.tsx} (80%)
 rename src/guillo-gmi/components/{search_vocabulary_labels.js => search_vocabulary_labels.tsx} (81%)
 rename src/guillo-gmi/components/{selected_items_actions.js => selected_items_actions.tsx} (75%)
 rename src/guillo-gmi/components/{tabs.js => tabs.tsx} (81%)
 delete mode 100644 src/guillo-gmi/components/ui/delete.js
 create mode 100644 src/guillo-gmi/components/ui/delete.tsx
 rename src/guillo-gmi/components/ui/{index.js => index.ts} (100%)
 delete mode 100644 src/guillo-gmi/components/ui/loading.js
 create mode 100644 src/guillo-gmi/components/ui/loading.tsx
 rename src/guillo-gmi/components/ui/{notification.js => notification.tsx} (87%)
 rename src/guillo-gmi/components/ui/{tag.js => tag.tsx} (75%)
 rename src/guillo-gmi/components/widgets/{index.js => index.ts} (100%)
 rename src/guillo-gmi/components/widgets/{tags.js => tags.tsx} (80%)
 rename src/guillo-gmi/contexts/{index.js => index.tsx} (57%)
 rename src/guillo-gmi/forms/{base.js => base.tsx} (85%)
 rename src/guillo-gmi/forms/{required_fields.js => required_fields.tsx} (88%)
 rename src/guillo-gmi/forms/{users.js => users.tsx} (63%)
 rename src/guillo-gmi/hooks/{useConfig.js => useConfig.tsx} (71%)
 rename src/guillo-gmi/hooks/{useCrudContext.js => useCrudContext.tsx} (93%)
 rename src/guillo-gmi/hooks/{useRegistry.js => useRegistry.tsx} (83%)
 rename src/guillo-gmi/lib/{auth.js => auth.ts} (85%)
 rename src/guillo-gmi/lib/{client.js => client.tsx} (94%)
 rename src/guillo-gmi/reducers/{guillotina.js => guillotina.ts} (65%)
 create mode 100644 src/guillo-gmi/types/global.ts
 create mode 100644 src/guillo-gmi/types/guillotina.ts
 rename src/guillo-gmi/views/{application.js => application.tsx} (84%)
 rename src/guillo-gmi/views/{container.js => container.tsx} (91%)

diff --git a/.eslintrc.js b/.eslintrc.js
index 742569e..70e88db 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -26,5 +26,8 @@ module.exports = {
     sourceType: 'module',
   },
   plugins: ['@typescript-eslint', 'react'],
-  rules: {},
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'warn',
+    'no-extra-semi': 'warn',
+  },
 }
diff --git a/package.json b/package.json
index e90043b..4dc991c 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "@babel/cli": "7.12.10",
     "@babel/core": "7.12.10",
     "@formatjs/cli": "^6.2.4",
+    "@formatjs/ts-transformer": "^3.13.11",
     "@testing-library/jest-dom": "5.11.6",
     "@testing-library/react": "11.2.2",
     "@testing-library/user-event": "12.6.0",
@@ -44,8 +45,8 @@
     "prettier": "2.2.1",
     "sass": "1.69.5",
     "serialize-javascript": "5.0.1",
-    "vitest": "^0.34.6",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "vitest": "^0.34.6"
   },
   "scripts": {
     "format": "prettier --write \"src/**/*.js\"",
diff --git a/src/guillo-gmi/actions/index.js b/src/guillo-gmi/actions/index.ts
similarity index 100%
rename from src/guillo-gmi/actions/index.js
rename to src/guillo-gmi/actions/index.ts
diff --git a/src/guillo-gmi/components/Link.js b/src/guillo-gmi/components/Link.tsx
similarity index 68%
rename from src/guillo-gmi/components/Link.js
rename to src/guillo-gmi/components/Link.tsx
index 3a62f53..57f30e9 100644
--- a/src/guillo-gmi/components/Link.js
+++ b/src/guillo-gmi/components/Link.tsx
@@ -1,7 +1,14 @@
-import React from 'react'
 import { useLocation } from '../hooks/useLocation'
+import { ItemModel } from '../models'
 
-export function Link({ aRef, model, children, ...props }) {
+interface Props {
+  aRef?: React.Ref<HTMLAnchorElement>
+  model: ItemModel
+  children: React.ReactNode
+  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void
+}
+
+export function Link({ aRef, model, children, ...props }: Props) {
   const [path, navigate] = useLocation()
   const aStyle = { textDecoration: 'none', color: 'currentColor' }
 
@@ -15,7 +22,6 @@ export function Link({ aRef, model, children, ...props }) {
 
   return (
     <a
-      {...props}
       ref={aRef}
       href={`?${path}${model.id}/`}
       style={aStyle}
diff --git a/src/guillo-gmi/components/TdLink.js b/src/guillo-gmi/components/TdLink.js
deleted file mode 100644
index 331ece1..0000000
--- a/src/guillo-gmi/components/TdLink.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { useRef } from 'react'
-import { Link } from './Link'
-
-export function TdLink({ model, children, ...props }) {
-  const link = useRef()
-
-  function onClick() {
-    link.current.click()
-  }
-
-  return (
-    <td {...props} onClick={onClick}>
-      <Link model={model} aRef={link}>
-        {children}
-      </Link>
-    </td>
-  )
-}
diff --git a/src/guillo-gmi/components/TdLink.tsx b/src/guillo-gmi/components/TdLink.tsx
new file mode 100644
index 0000000..a64336b
--- /dev/null
+++ b/src/guillo-gmi/components/TdLink.tsx
@@ -0,0 +1,27 @@
+import { useRef } from 'react'
+import { Link } from './Link'
+import { ItemModel } from '../models'
+import { IndexSignature } from '../types/global'
+
+interface Props {
+  model: ItemModel
+  children: React.ReactNode
+  style?: IndexSignature
+}
+export function TdLink({ model, children, style = {} }: Props) {
+  const link = useRef<HTMLAnchorElement>()
+
+  function onClick() {
+    if (link && link.current) {
+      link.current.click()
+    }
+  }
+
+  return (
+    <td onClick={onClick} style={style}>
+      <Link model={model} aRef={link}>
+        {children}
+      </Link>
+    </td>
+  )
+}
diff --git a/src/guillo-gmi/components/behavior_view.js b/src/guillo-gmi/components/behavior_view.tsx
similarity index 88%
rename from src/guillo-gmi/components/behavior_view.js
rename to src/guillo-gmi/components/behavior_view.tsx
index 8a673d4..aa0e09a 100644
--- a/src/guillo-gmi/components/behavior_view.js
+++ b/src/guillo-gmi/components/behavior_view.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { useTraversal } from '../contexts'
 import { get } from '../lib/utils'
 import { useIntl } from 'react-intl'
@@ -23,7 +22,7 @@ export function BehaviorsView({ context, schema }) {
   }
 
   return (
-    <React.Fragment>
+    <>
       {behaviors.map((behavior) => (
         <div className="container" key={behavior}>
           <h3 className="title is-size-6 has-text-grey">{behavior}</h3>
@@ -31,7 +30,7 @@ export function BehaviorsView({ context, schema }) {
           <hr />
         </div>
       ))}
-    </React.Fragment>
+    </>
   )
 }
 
@@ -39,7 +38,7 @@ export function BehaviorNotImplemented() {
   const intl = useIntl()
   return (
     <tr>
-      <td colSpan="3">{intl.formatMessage(genericMessages.not_implemented)}</td>
+      <td colSpan={3}>{intl.formatMessage(genericMessages.not_implemented)}</td>
     </tr>
   )
 }
diff --git a/src/guillo-gmi/components/behaviors/iimageattachment.js b/src/guillo-gmi/components/behaviors/iimageattachment.tsx
similarity index 98%
rename from src/guillo-gmi/components/behaviors/iimageattachment.js
rename to src/guillo-gmi/components/behaviors/iimageattachment.tsx
index 65d8d8f..3d9c20e 100644
--- a/src/guillo-gmi/components/behaviors/iimageattachment.js
+++ b/src/guillo-gmi/components/behaviors/iimageattachment.tsx
@@ -20,7 +20,7 @@ export function IImageAttachment({ properties, values }) {
   const cfg = useConfig()
   const Ctx = useTraversal()
   const modifyContent = Ctx.hasPerm('guillotina.ModifyContent')
-  const sizesImages = cfg.size_images || _sizesImages
+  const sizesImages = cfg.SizeImages || _sizesImages
   const [file, setFile] = useState(null)
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState(undefined)
diff --git a/src/guillo-gmi/components/behaviors/imultiattachment.js b/src/guillo-gmi/components/behaviors/imultiattachment.tsx
similarity index 93%
rename from src/guillo-gmi/components/behaviors/imultiattachment.js
rename to src/guillo-gmi/components/behaviors/imultiattachment.tsx
index 7b68814..b7b2bff 100644
--- a/src/guillo-gmi/components/behaviors/imultiattachment.js
+++ b/src/guillo-gmi/components/behaviors/imultiattachment.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { Input } from '../input/input'
 import { FileUpload } from '../input/upload'
 import { Button } from '../input/button'
@@ -14,11 +13,12 @@ import {
   genericFileMessages,
   genericMessages,
 } from '../../locales/generic_messages'
+import { FileWithFileName } from '../../types/global'
 
 export function IMultiAttachment({ properties, values }) {
   const intl = useIntl()
   const [fileKey, setFileKey] = useState('')
-  const [file, setFile] = useState()
+  const [file, setFile] = useState<FileWithFileName | undefined>(undefined)
   const [fileKeyToDelete, setFileKeyToDelete] = useState(undefined)
 
   const [loading, setLoading] = useState(false)
@@ -75,13 +75,11 @@ export function IMultiAttachment({ properties, values }) {
         <Confirm
           loading={loading}
           onCancel={() => setFileKeyToDelete(undefined)}
-          onConfirm={() => deleteFile(fileKeyToDelete)}
-          message={
-            (intl.formatMessage(
-              genericFileMessages.confirm_message_delete_file
-            ),
-            { fileKeyToDelete })
-          }
+          onConfirm={() => deleteFile()}
+          message={intl.formatMessage(
+            genericFileMessages.confirm_message_delete_file,
+            { fileKeyToDelete }
+          )}
         />
       )}
 
diff --git a/src/guillo-gmi/components/behaviors/imultiimageattachment.js b/src/guillo-gmi/components/behaviors/imultiimageattachment.tsx
similarity index 95%
rename from src/guillo-gmi/components/behaviors/imultiimageattachment.js
rename to src/guillo-gmi/components/behaviors/imultiimageattachment.tsx
index ea0f00e..97710ce 100644
--- a/src/guillo-gmi/components/behaviors/imultiimageattachment.js
+++ b/src/guillo-gmi/components/behaviors/imultiimageattachment.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 import { Button } from '../input/button'
 import { Confirm } from '../modal'
@@ -28,7 +28,7 @@ export function IMultiImageAttachment({ properties, values }) {
   const [error, setError] = useState(undefined)
   const { Ctx } = useCrudContext()
   const modifyContent = Ctx.hasPerm('guillotina.ModifyContent')
-  const sizesImages = cfg.size_images || _sizesImages
+  const sizesImages = cfg.SizeImages || _sizesImages
 
   const uploadFile = async (ev) => {
     ev.preventDefault()
@@ -102,12 +102,10 @@ export function IMultiImageAttachment({ properties, values }) {
           loading={loading}
           onCancel={() => setFileKeyToDelete(undefined)}
           onConfirm={() => deleteFile()}
-          message={
-            (intl.formatMessage(
-              genericFileMessages.confirm_message_delete_file
-            ),
-            { fileKeyToDelete })
-          }
+          message={intl.formatMessage(
+            genericFileMessages.confirm_message_delete_file,
+            { fileKeyToDelete }
+          )}
         />
       )}
 
diff --git a/src/guillo-gmi/components/behaviors/imultiimageorderedattachment.js b/src/guillo-gmi/components/behaviors/imultiimageorderedattachment.tsx
similarity index 94%
rename from src/guillo-gmi/components/behaviors/imultiimageorderedattachment.js
rename to src/guillo-gmi/components/behaviors/imultiimageorderedattachment.tsx
index 3648d3c..7267a94 100644
--- a/src/guillo-gmi/components/behaviors/imultiimageorderedattachment.js
+++ b/src/guillo-gmi/components/behaviors/imultiimageorderedattachment.tsx
@@ -5,7 +5,7 @@ import { FileUpload } from '../input/upload'
 import { useCrudContext } from '../../hooks/useCrudContext'
 import { EditableField } from '../fields/editableField'
 import { useConfig } from '../../hooks/useConfig'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'
 import { v4 as uuidv4 } from 'uuid'
 import { defineMessages, useIntl } from 'react-intl'
@@ -30,7 +30,7 @@ const StrictModeDroppable = ({ children, ...props }) => {
 }
 
 const reorder = (list, startIndex, endIndex) => {
-  const result = Array.from(list)
+  const result: string[] = Array.from(list)
   const [removed] = result.splice(startIndex, 1)
   result.splice(endIndex, 0, removed)
 
@@ -51,7 +51,9 @@ const messages = defineMessages({
 export function IMultiImageOrderedAttachment({ properties, values }) {
   const intl = useIntl()
   const cfg = useConfig()
-  const [sortedList, setSortedList] = useState(Object.keys(values['images']))
+  const [sortedList, setSortedList] = useState<string[]>(
+    Object.keys(values['images'])
+  )
   const [file, setFile] = useState(null)
   const [fileKeyToDelete, setFileKeyToDelete] = useState(undefined)
 
@@ -60,7 +62,7 @@ export function IMultiImageOrderedAttachment({ properties, values }) {
   const { Ctx } = useCrudContext()
   const modifyContent = Ctx.hasPerm('guillotina.ModifyContent')
 
-  const sizesImages = cfg.size_images || _sizesImages
+  const sizesImages = cfg.SizeImages || _sizesImages
 
   async function onDragEnd(result) {
     if (!result.destination) {
@@ -152,18 +154,16 @@ export function IMultiImageOrderedAttachment({ properties, values }) {
   }
 
   return (
-    <React.Fragment>
+    <>
       {fileKeyToDelete && (
         <Confirm
           loading={loading}
           onCancel={() => setFileKeyToDelete(undefined)}
           onConfirm={() => deleteFile()}
-          message={
-            (intl.formatMessage(
-              genericFileMessages.confirm_message_delete_file
-            ),
-            { fileKeyToDelete })
-          }
+          message={intl.formatMessage(
+            genericFileMessages.confirm_message_delete_file,
+            { fileKeyToDelete }
+          )}
         />
       )}
       <section>
@@ -246,6 +246,6 @@ export function IMultiImageOrderedAttachment({ properties, values }) {
           {error && <p className="help is-danger">{error}</p>}
         </section>
       )}
-    </React.Fragment>
+    </>
   )
 }
diff --git a/src/guillo-gmi/components/behaviors/iworkflow.js b/src/guillo-gmi/components/behaviors/iworkflow.tsx
similarity index 93%
rename from src/guillo-gmi/components/behaviors/iworkflow.js
rename to src/guillo-gmi/components/behaviors/iworkflow.tsx
index aab7c61..f6de368 100644
--- a/src/guillo-gmi/components/behaviors/iworkflow.js
+++ b/src/guillo-gmi/components/behaviors/iworkflow.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
 import { useTraversal } from '../../contexts'
 import { Confirm } from '../modal'
 import { useCrudContext } from '../../hooks/useCrudContext'
 import { ItemModel } from '../../models'
 import { defineMessages, useIntl } from 'react-intl'
+import { useEffect, useState } from 'react'
 
 const messages = defineMessages({
   status_changed_ok: {
@@ -33,8 +33,8 @@ export function IWorkflow() {
   const Ctx = useTraversal()
   const { post, loading } = useCrudContext()
   const modifyContent = Ctx.hasPerm('guillotina.ModifyContent')
-  const [definition, setDefinition] = React.useState(undefined)
-  const [workflowAction, setWorkflowAction] = React.useState(null)
+  const [definition, setDefinition] = useState(undefined)
+  const [workflowAction, setWorkflowAction] = useState(null)
   const model = new ItemModel(Ctx.context)
   const currentState =
     model.item['guillotina.contrib.workflows.interfaces.IWorkflowBehavior'][
@@ -47,7 +47,7 @@ export function IWorkflow() {
     setDefinition(workflow)
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     loadDefinition()
   }, [Ctx.path])
 
@@ -75,7 +75,7 @@ export function IWorkflow() {
   if (definition === undefined) return null
 
   return (
-    <React.Fragment>
+    <>
       {workflowAction && (
         <Confirm
           loading={loading}
@@ -118,6 +118,6 @@ export function IWorkflow() {
           })}
         </div>
       )}
-    </React.Fragment>
+    </>
   )
 }
diff --git a/src/guillo-gmi/components/context_toolbar.js b/src/guillo-gmi/components/context_toolbar.tsx
similarity index 88%
rename from src/guillo-gmi/components/context_toolbar.js
rename to src/guillo-gmi/components/context_toolbar.tsx
index 562ef8d..6784697 100644
--- a/src/guillo-gmi/components/context_toolbar.js
+++ b/src/guillo-gmi/components/context_toolbar.tsx
@@ -1,5 +1,4 @@
-import React from 'react'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
 import Dropdown from './input/dropdown'
 import useSetState from '../hooks/useSetState'
@@ -12,12 +11,15 @@ import { Select } from './input/select'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../locales/generic_messages'
 
-/* eslint jsx-a11y/anchor-is-valid: "off" */
+interface State {
+  types?: string[]
+  isActive?: boolean
+}
 const initialState = { types: undefined }
 
 export function CreateButton() {
   const intl = useIntl()
-  const [state, setState] = useSetState(initialState)
+  const [state, setState] = useSetState<State>(initialState)
   const Ctx = useTraversal()
   const Config = useConfig()
   useEffect(() => {
@@ -65,14 +67,17 @@ export function CreateButton() {
   )
 }
 
-export function ContextToolbar({ AddButton, ...props }) {
+interface Props {
+  AddButton?: React.FC
+}
+export function ContextToolbar({ AddButton }: Props) {
   const intl = useIntl()
-  const [state, setState] = useSetState(initialState)
+  const [state, setState] = useSetState<State>(initialState)
   const [location, setLocation, del] = useLocation()
   const traversal = useTraversal()
   const Config = useConfig()
   const searchText = location.get('q')
-  const [searchValue, setSearchValue] = React.useState(searchText || '')
+  const [searchValue, setSearchValue] = useState(searchText || '')
 
   useEffect(() => {
     loadTypes()
@@ -104,7 +109,7 @@ export function ContextToolbar({ AddButton, ...props }) {
   }
 
   return (
-    <React.Fragment>
+    <>
       <div className="level-item">
         <form action="" className="form" onSubmit={onSearchQuery}>
           <div className="field has-addons">
@@ -144,13 +149,9 @@ export function ContextToolbar({ AddButton, ...props }) {
       </div>
       {traversal.hasPerm('guillotina.AddContent') && (
         <div className="level-item">
-          {AddButton !== undefined ? (
-            <AddButton />
-          ) : (
-            <CreateButton {...props} />
-          )}
+          {AddButton !== undefined ? <AddButton /> : <CreateButton />}
         </div>
       )}
-    </React.Fragment>
+    </>
   )
 }
diff --git a/src/guillo-gmi/components/error_boundary.js b/src/guillo-gmi/components/error_boundary.tsx
similarity index 72%
rename from src/guillo-gmi/components/error_boundary.js
rename to src/guillo-gmi/components/error_boundary.tsx
index dcfffe1..a59c1a6 100644
--- a/src/guillo-gmi/components/error_boundary.js
+++ b/src/guillo-gmi/components/error_boundary.tsx
@@ -1,10 +1,17 @@
-import React from 'react'
-import { injectIntl } from 'react-intl'
+import { Component } from 'react'
+import { IntlShape, injectIntl } from 'react-intl'
 
 const style = { color: '#F44336', fontSize: 20, paddingBottom: 20 }
 
-class ErrorBoundaryComponent extends React.Component {
-  state = {}
+class ErrorBoundaryComponent extends Component<
+  { intl: IntlShape; children: React.ReactNode },
+  { hasError: boolean; errorMsg: string; errorStack: string }
+> {
+  state = {
+    hasError: false,
+    errorMsg: '',
+    errorStack: '',
+  }
 
   componentDidCatch(error, errorInfo) {
     this.setState({
diff --git a/src/guillo-gmi/components/error_zone.js b/src/guillo-gmi/components/error_zone.tsx
similarity index 68%
rename from src/guillo-gmi/components/error_zone.js
rename to src/guillo-gmi/components/error_zone.tsx
index 6ca27b0..f647737 100644
--- a/src/guillo-gmi/components/error_zone.js
+++ b/src/guillo-gmi/components/error_zone.tsx
@@ -1,8 +1,13 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { classnames } from '../lib/helpers'
 
-const ErrorZone = ({ children, id, className }) => {
+interface Props {
+  children: React.ReactNode
+  id: string
+  className?: string
+}
+
+const ErrorZone = ({ children, id, className = '' }: Props) => {
   return (
     <p className={classnames(['help is-danger', className])} id={id}>
       {children}
diff --git a/src/guillo-gmi/components/fields/downloadField.js b/src/guillo-gmi/components/fields/downloadField.tsx
similarity index 98%
rename from src/guillo-gmi/components/fields/downloadField.js
rename to src/guillo-gmi/components/fields/downloadField.tsx
index faf44f8..6b036e6 100644
--- a/src/guillo-gmi/components/fields/downloadField.js
+++ b/src/guillo-gmi/components/fields/downloadField.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { useTraversal } from '../../contexts'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
diff --git a/src/guillo-gmi/components/fields/editComponent.js b/src/guillo-gmi/components/fields/editComponent.tsx
similarity index 84%
rename from src/guillo-gmi/components/fields/editComponent.js
rename to src/guillo-gmi/components/fields/editComponent.tsx
index 9013a43..1bd7f74 100644
--- a/src/guillo-gmi/components/fields/editComponent.js
+++ b/src/guillo-gmi/components/fields/editComponent.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { Textarea } from '../input/textarea'
 import { Checkbox } from '../input/checkbox'
 import { FileUpload } from '../input/upload'
@@ -10,58 +9,58 @@ import { SelectVocabulary } from '../input/select_vocabulary'
 import { SearchInputList } from '../input/search_input_list'
 import { SearchInput } from '../input/search_input'
 import { useTraversal } from '../../contexts'
+import { Ref, forwardRef } from 'react'
 
-export const EditComponent = React.forwardRef(
-  ({ schema, val, setValue, dataTest, className, ...rest }, ref) => {
+interface Props {
+  schema: any
+  val: any
+  setValue: (value: any) => void
+  dataTest?: string
+  className?: string
+  placeholder?: string
+}
+
+export const EditComponent = forwardRef(
+  ({ schema, val, setValue, dataTest, className, placeholder }: Props, ref) => {
     const traversal = useTraversal()
 
     if (schema?.widget === 'search_list') {
       return (
-        <React.Fragment>
-          {rest.placeholder && (
-            <label className="label">{rest.placeholder}</label>
-          )}
+        <>
+          {placeholder && <label className="label">{placeholder}</label>}
           <SearchInputList
             value={val || []}
             traversal={traversal}
-            className={className}
             onChange={(ev) => setValue(ev)}
             queryCondition={
               schema?.queryCondition ? schema.queryCondition : 'title__in'
             }
-            dataTest={dataTest}
             path={schema.queryPath}
             labelProperty={
               schema?.labelProperty ? schema.labelProperty : 'title'
             }
             typeNameQuery={schema?.typeNameQuery ? schema.typeNameQuery : null}
-            {...rest}
           />
-        </React.Fragment>
+        </>
       )
     } else if (schema?.widget === 'search') {
       return (
-        <React.Fragment>
-          {rest.placeholder && (
-            <label className="label">{rest.placeholder}</label>
-          )}
+        <>
+          {placeholder && <label className="label">{placeholder}</label>}
           <SearchInput
             value={val}
             traversal={traversal}
-            className={className}
             onChange={(ev) => setValue(ev)}
             queryCondition={
               schema?.queryCondition ? schema.queryCondition : 'title__in'
             }
-            dataTest={dataTest}
             path={schema.queryPath}
             labelProperty={
               schema?.labelProperty ? schema.labelProperty : 'title'
             }
             typeNameQuery={schema?.typeNameQuery ? schema.typeNameQuery : null}
-            {...rest}
           />
-        </React.Fragment>
+        </>
       )
     } else if (schema?.widget === 'textarea' || schema?.widget === 'richtext') {
       return (
@@ -69,20 +68,17 @@ export const EditComponent = React.forwardRef(
           value={val || ''}
           className={className}
           onChange={(ev) => setValue(ev)}
-          ref={ref}
+          ref={ref as Ref<HTMLTextAreaElement>}
           dataTest={dataTest}
-          {...rest}
         />
       )
     } else if (schema?.type === 'boolean') {
       return (
         <Checkbox
-          value={!!val}
+          checked={Boolean(val)}
           className={className}
           onChange={(ev) => setValue(ev)}
-          ref={ref}
           dataTest={dataTest}
-          {...rest}
         />
       )
     } else if (schema?.type === 'array') {
@@ -95,7 +91,6 @@ export const EditComponent = React.forwardRef(
               className={className}
               classWrap="is-fullwidth"
               dataTest={dataTest}
-              {...rest}
               onChange={setValue}
               multiple
             />
@@ -115,7 +110,6 @@ export const EditComponent = React.forwardRef(
               })}
               multiple
               onChange={setValue}
-              {...rest}
             />
           )
         }
@@ -125,9 +119,8 @@ export const EditComponent = React.forwardRef(
           value={val || []}
           className={className}
           onChange={(ev) => setValue(ev)}
-          ref={ref}
+          ref={ref as Ref<HTMLInputElement>}
           dataTest={dataTest}
-          {...rest}
         />
       )
     } else if (schema?.widget === 'file') {
@@ -136,7 +129,6 @@ export const EditComponent = React.forwardRef(
           onChange={(ev) => setValue(ev)}
           label={get(val, 'filename', null)}
           dataTest={dataTest}
-          {...rest}
         />
       )
     } else if (schema?.widget === 'select' && schema.type === 'string') {
@@ -150,7 +142,6 @@ export const EditComponent = React.forwardRef(
             dataTest={dataTest}
             onChange={setValue}
             vocabularyName={get(schema, 'vocabularyName', null)}
-            {...rest}
           />
         )
       }
@@ -169,7 +160,6 @@ export const EditComponent = React.forwardRef(
             }
           })}
           onChange={setValue}
-          {...rest}
         />
       )
     }
@@ -191,9 +181,8 @@ export const EditComponent = React.forwardRef(
         className={className}
         dataTest={dataTest}
         onChange={(ev) => setValue(ev)}
-        ref={ref}
+        ref={ref as Ref<HTMLInputElement>}
         type={getInputType()}
-        {...rest}
       />
     )
   }
diff --git a/src/guillo-gmi/components/fields/renderField.js b/src/guillo-gmi/components/fields/renderField.tsx
similarity index 94%
rename from src/guillo-gmi/components/fields/renderField.js
rename to src/guillo-gmi/components/fields/renderField.tsx
index 5f50380..048f598 100644
--- a/src/guillo-gmi/components/fields/renderField.js
+++ b/src/guillo-gmi/components/fields/renderField.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { DownloadField } from './downloadField'
 import { useIntl } from 'react-intl'
 import { useVocabulary } from '../../hooks/useVocabulary'
@@ -9,7 +9,13 @@ import { useConfig } from '../../hooks/useConfig'
 
 const plain = ['string', 'number', 'boolean']
 
-export function RenderField({ value, Widget, schema }) {
+interface RenderFieldProps {
+  value: any
+  Widget?: React.ComponentType<{ value: any; schema: any }>
+  schema?: any
+}
+
+export function RenderField({ value, Widget, schema }: RenderFieldProps) {
   if (value === null || value === undefined) return ''
 
   if (Widget) {
@@ -53,10 +59,12 @@ const getDefaultValueEditableField = (intl) => {
 }
 
 export const SearchRenderField = ({ schema, value, modifyContent }) => {
+  const intl = useIntl()
   const [valuesLabels, setValuesLabels] = useState([])
   const [isLoadingData, setIsLoadingData] = useState(false)
   const traversal = useTraversal()
   const { SearchEngine } = useConfig()
+  const DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl)
 
   useEffect(() => {
     const fetchData = async (valuesToSearch) => {
diff --git a/src/guillo-gmi/components/flash.js b/src/guillo-gmi/components/flash.tsx
similarity index 93%
rename from src/guillo-gmi/components/flash.js
rename to src/guillo-gmi/components/flash.tsx
index 5475f5e..b58d5a8 100644
--- a/src/guillo-gmi/components/flash.js
+++ b/src/guillo-gmi/components/flash.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { useTraversal } from '../contexts'
 import { Notification } from './ui/notification'
 import { Delete } from './ui/delete'
diff --git a/src/guillo-gmi/components/guillotina.js b/src/guillo-gmi/components/guillotina.tsx
similarity index 89%
rename from src/guillo-gmi/components/guillotina.js
rename to src/guillo-gmi/components/guillotina.tsx
index 9b0d59c..86e254a 100644
--- a/src/guillo-gmi/components/guillotina.js
+++ b/src/guillo-gmi/components/guillotina.tsx
@@ -4,7 +4,7 @@ import { useEffect } from 'react'
 import { Flash } from './flash'
 import { TraversalProvider, useGuillotinaClient } from '../contexts'
 import { useConfig } from '../hooks/useConfig'
-import { useRegistry } from '../hooks/useRegistry'
+import { IRegistry, useRegistry } from '../hooks/useRegistry'
 import { useLocation } from '../hooks/useLocation'
 import { guillotinaReducer } from '../reducers/guillotina'
 import { initialState } from '../reducers/guillotina'
@@ -13,6 +13,8 @@ import { IntlProvider } from 'react-intl'
 import langCA from '../locales/compiled/ca.json'
 import langES from '../locales/compiled/es.json'
 import langEN from '../locales/compiled/en.json'
+import { Auth } from '../lib/auth'
+import { IndexSignature } from '../types/global'
 
 function loadLocaleData(locale) {
   switch (locale) {
@@ -25,7 +27,14 @@ function loadLocaleData(locale) {
   }
 }
 
-export function Guillotina({ auth, locale, ...props }) {
+interface GuillotinaProps {
+  auth: Auth
+  locale: string
+  url: string
+  config: IndexSignature
+  registry: IRegistry
+}
+export function Guillotina({ auth, locale, ...props }: GuillotinaProps) {
   const messages = loadLocaleData(locale)
   const url = props.url || 'http://localhost:8080' // without trailing slash
   const config = props.config || {}
@@ -52,7 +61,7 @@ export function Guillotina({ auth, locale, ...props }) {
 
   useEffect(() => {
     ;(async () => {
-      let data = await client.getContext(path)
+      const data = await client.getContext(path)
       if (data.status === 401) {
         dispatch({ type: 'SET_ERROR', payload: 'notallowed' })
         return
@@ -60,7 +69,7 @@ export function Guillotina({ auth, locale, ...props }) {
         dispatch({ type: 'SET_ERROR', payload: 'notfound' })
         return
       }
-      let context = await data.json()
+      const context = await data.json()
       const pr = await client.canido(path, Permissions)
       const permissions = await pr.json()
       dispatch({ type: 'SET_CONTEXT', payload: { context, permissions } })
diff --git a/src/guillo-gmi/components/input/checkbox.js b/src/guillo-gmi/components/input/checkbox.tsx
similarity index 62%
rename from src/guillo-gmi/components/input/checkbox.js
rename to src/guillo-gmi/components/input/checkbox.tsx
index 62fb789..ce3abfb 100644
--- a/src/guillo-gmi/components/input/checkbox.js
+++ b/src/guillo-gmi/components/input/checkbox.tsx
@@ -1,6 +1,22 @@
-import React, { useEffect, useRef } from 'react'
+import { ChangeEvent, useEffect, useRef, useState } from 'react'
 import { classnames } from '../../lib/helpers'
 
+interface Props {
+  className?: string
+  classNameInput?: string
+  loading?: boolean
+  indeterminate?: boolean
+  backgroundColor?: string
+  borderColor?: string
+  dataTest?: string
+  onChange: (value: boolean) => void
+  id?: string
+  disabled?: boolean
+  checked?: boolean
+  children?: React.ReactNode
+  placeholder?: string
+}
+
 export const Checkbox = ({
   id,
   className,
@@ -8,18 +24,14 @@ export const Checkbox = ({
   loading,
   disabled,
   indeterminate = false,
-  value = false,
-  color,
-  backgroundColor,
-  borderColor,
+  checked,
   children,
   placeholder,
   onChange,
   dataTest,
-  ...rest
-}) => {
+}: Props) => {
   const inputRef = useRef(null)
-  const [state, setState] = React.useState(value)
+  const [state, setState] = useState<boolean>(checked)
 
   useEffect(() => {
     if (inputRef.current) {
@@ -27,7 +39,7 @@ export const Checkbox = ({
     }
   }, [indeterminate])
 
-  const updateState = (ev) => {
+  const updateState = (ev: ChangeEvent<HTMLInputElement>) => {
     setState(ev.target.checked)
     onChange(ev.target.checked)
   }
@@ -44,7 +56,6 @@ export const Checkbox = ({
           checked={state}
           onChange={updateState}
           data-test={dataTest}
-          {...rest}
         />
         {children || placeholder}
       </label>
diff --git a/src/guillo-gmi/components/input/dropdown.js b/src/guillo-gmi/components/input/dropdown.tsx
similarity index 85%
rename from src/guillo-gmi/components/input/dropdown.js
rename to src/guillo-gmi/components/input/dropdown.tsx
index c6e554c..5cd672d 100644
--- a/src/guillo-gmi/components/input/dropdown.js
+++ b/src/guillo-gmi/components/input/dropdown.tsx
@@ -1,6 +1,16 @@
-import React, { useState, useRef } from 'react'
+import { useState, useRef } from 'react'
 import useClickAway from '../../hooks/useClickAway'
 
+interface Props {
+  children: React.ReactNode
+  disabled?: boolean
+  id?: string
+  isRight?: boolean
+  onChange: (value: string) => void
+  optionDisabledWhen?: (option: any) => boolean
+  options: { text: string; value: string }[]
+}
+
 export default function Dropdown({
   children,
   disabled,
@@ -9,8 +19,7 @@ export default function Dropdown({
   onChange,
   optionDisabledWhen,
   options,
-  ...props
-}) {
+}: Props) {
   const ref = useRef(null)
   const [isActive, setIsActive] = useState(false)
   const position = isRight ? 'is-right' : ''
@@ -23,7 +32,7 @@ export default function Dropdown({
   })
 
   return (
-    <div ref={ref} className={status} {...props}>
+    <div ref={ref} className={status}>
       <div className="dropdown-trigger">
         <button
           className="button is-size-7"
@@ -44,7 +53,6 @@ export default function Dropdown({
                 : false
 
             return (
-              // eslint-disable-next-line jsx-a11y/anchor-is-valid
               <a
                 className={
                   disabled ? 'dropdown-item is-active' : 'dropdown-item'
diff --git a/src/guillo-gmi/components/input/email.js b/src/guillo-gmi/components/input/email.tsx
similarity index 63%
rename from src/guillo-gmi/components/input/email.js
rename to src/guillo-gmi/components/input/email.tsx
index 13803ca..57e1074 100644
--- a/src/guillo-gmi/components/input/email.js
+++ b/src/guillo-gmi/components/input/email.tsx
@@ -1,10 +1,21 @@
-import React from 'react'
 import { Input } from './input'
 import { isEmail } from '../../lib/validators'
 import { Icon } from '../ui/icon'
 import { useIntl } from 'react-intl'
 
-export const EmailInput = ({ value = '', dataTest, ...rest }) => {
+interface Props {
+  value?: string
+  dataTest?: string
+  onChange?: (value: string) => void
+  placeholder?: string
+  id?: string
+}
+export const EmailInput = ({
+  value = '',
+  dataTest,
+  placeholder,
+  id,
+}: Props) => {
   const intl = useIntl()
   return (
     <Input
@@ -17,7 +28,8 @@ export const EmailInput = ({ value = '', dataTest, ...rest }) => {
       value={value}
       data-test={dataTest}
       icon={<Icon icon="fas fa-envelope" />}
-      {...rest}
+      id={id}
+      placeholder={placeholder}
     />
   )
 }
diff --git a/src/guillo-gmi/components/input/form_builder.js b/src/guillo-gmi/components/input/form_builder.tsx
similarity index 76%
rename from src/guillo-gmi/components/input/form_builder.js
rename to src/guillo-gmi/components/input/form_builder.tsx
index f036d5a..91290d8 100644
--- a/src/guillo-gmi/components/input/form_builder.js
+++ b/src/guillo-gmi/components/input/form_builder.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { Form } from './form'
 import { Input } from './input'
 import { EmailInput } from './email'
@@ -6,6 +5,8 @@ import { PasswordInput } from './password'
 import { Button } from './button'
 import { Checkbox } from './checkbox'
 import { generateUID } from '../../lib/helpers'
+import { Children, cloneElement, useRef } from 'react'
+import { IndexSignature } from '../../types/global'
 
 const formComponents = {
   string: Input,
@@ -14,24 +15,33 @@ const formComponents = {
   email: EmailInput,
 }
 
+interface Props {
+  schema: any
+  formData?: any
+  onSubmit: (formData: any, initialData: any) => void
+  actionName: string
+  children?: any
+  exclude?: string[]
+  remotes?: IndexSignature
+  submitButton?: boolean
+}
+
 export function FormBuilder({
   schema,
   formData,
-  title,
   onSubmit,
   actionName,
   children,
   exclude = [],
-  remotes = [],
+  remotes = {},
   submitButton = true,
-  ...rest
-}) {
-  const ref = React.useRef()
+}: Props) {
+  const ref = useRef<unknown>()
   const { properties, required } = schema
   const values = Object.assign({}, formData || {})
 
   // build initial state
-  let initialState = {}
+  const initialState = {}
   const fields = Object.keys(properties).filter((x) => !exclude.includes(x))
 
   fields.forEach((element) => {
@@ -56,17 +66,17 @@ export function FormBuilder({
     ref.current[field] = ev.target ? ev.target.value : ev.value || ev
   }
 
-  const GetTag = ({ field }) => {
+  const GetTag = ({ field }: { field: string }) => {
     const Tag =
       formComponents[properties[field].widget || properties[field].type]
 
     const props = {
-      label: properties[field].title,
       value: initialState[field],
       onChange: onUpdate(field),
       placeholder: properties[field].title || '',
       id: generateUID(),
       dataTest: `${field}TestInput`,
+      required: false,
     }
 
     if (required.includes(field)) {
@@ -77,8 +87,8 @@ export function FormBuilder({
     return <Tag {...props} />
   }
 
-  const children_ = React.Children.map(children, (child) =>
-    React.cloneElement(child, { onChange: onUpdate })
+  const children_ = Children.map(children, (child) =>
+    cloneElement(child, { onChange: onUpdate })
   )
 
   const changes = () => {
@@ -86,7 +96,7 @@ export function FormBuilder({
   }
 
   return (
-    <Form onSubmit={changes} {...rest}>
+    <Form onSubmit={changes}>
       {fields.map((field) => (
         <GetTag field={field} key={field} />
       ))}
diff --git a/src/guillo-gmi/components/input/index.js b/src/guillo-gmi/components/input/index.js
deleted file mode 100644
index fa9f383..0000000
--- a/src/guillo-gmi/components/input/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-// @create-index
-
-export { default as button } from './button.js'
-export { default as checkbox } from './checkbox.js'
-export { default as email } from './email.js'
-export { default as form } from './form.js'
-export { default as form_builder } from './form_builder.js'
-export { default as input } from './input.tsx'
-export { default as password } from './password.tsx'
-export { default as select } from './select.js'
-export { default as select_vocabulary } from './select_vocabulary.js'
-export { default as search_input } from './search_input.js'
-export { default as input_list } from './input_list.tsx'
diff --git a/src/guillo-gmi/components/input/index.tsx b/src/guillo-gmi/components/input/index.tsx
new file mode 100644
index 0000000..18efd28
--- /dev/null
+++ b/src/guillo-gmi/components/input/index.tsx
@@ -0,0 +1,13 @@
+// @create-index
+
+export * from './button'
+export * from './checkbox'
+export * from './email'
+export * from './form'
+export * from './form_builder'
+export * from './input'
+export * from './password'
+export * from './select'
+export * from './select_vocabulary'
+export * from './search_input'
+export * from './input_list'
diff --git a/src/guillo-gmi/components/input/input.tsx b/src/guillo-gmi/components/input/input.tsx
index df378e5..2f0cd48 100644
--- a/src/guillo-gmi/components/input/input.tsx
+++ b/src/guillo-gmi/components/input/input.tsx
@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, forwardRef, useRef, useState } from 'react'
+import { forwardRef, useRef, useState } from 'react'
 import { classnames, generateUID } from '../../lib/helpers'
 import ErrorZone from '../error_zone'
 import useInput from '../../hooks/useInput'
@@ -20,13 +20,16 @@ interface Props {
   dataTest?: string
   autofocus?: boolean
   onChange?: (value: string) => void
+  type?: string
+  value?: string
+  required?: boolean
+  id?: string
+  placeholder?: string
+  disabled?: boolean
+  onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void
 }
 
-/** @type any */
-export const Input = forwardRef<
-  HTMLInputElement,
-  Props & InputHTMLAttributes<HTMLInputElement>
->(
+export const Input = forwardRef<HTMLInputElement, Props>(
   (
     {
       icon,
@@ -112,3 +115,6 @@ export const Input = forwardRef<
     )
   }
 )
+
+Input.displayName = 'Input'
+export default Input
diff --git a/src/guillo-gmi/components/input/search_input.js b/src/guillo-gmi/components/input/search_input.tsx
similarity index 89%
rename from src/guillo-gmi/components/input/search_input.js
rename to src/guillo-gmi/components/input/search_input.tsx
index 8528b60..5b77b72 100644
--- a/src/guillo-gmi/components/input/search_input.js
+++ b/src/guillo-gmi/components/input/search_input.tsx
@@ -1,6 +1,5 @@
-import React, { useState, useEffect, useCallback } from 'react'
-
-import PropTypes from 'prop-types'
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { MouseEvent } from 'react'
 import { buildQs } from '../../lib/search'
 import { parser } from '../../lib/search'
 import useSetState from '../../hooks/useSetState'
@@ -12,6 +11,8 @@ import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
 import useClickAway from '../../hooks/useClickAway'
 import { get } from '../../lib/utils'
+import { SearchItem } from '../../types/guillotina'
+
 function debounce(func, wait) {
   let timeout
   return function () {
@@ -33,6 +34,24 @@ const initialState = {
   items_total: 0,
 }
 
+interface Props {
+  onChange?: (value: SearchItem) => void
+  error?: string
+  errorZoneClassName?: string
+  traversal?: any
+  path?: string
+  qs?: string[][]
+  queryCondition?: string
+  value: SearchItem
+  btnClass?: string
+  dataTestWrapper?: string
+  dataTestSearchInput?: string
+  dataTestItem?: string
+  renderTextItemOption?: (item: any) => string
+  typeNameQuery?: string
+  labelProperty?: string
+}
+
 export const SearchInput = ({
   onChange,
   error,
@@ -49,13 +68,13 @@ export const SearchInput = ({
   renderTextItemOption = null,
   typeNameQuery = null,
   labelProperty = 'id',
-}) => {
+}: Props) => {
   const intl = useIntl()
   const [options, setOptions] = useSetState(initialState)
-  const [isOpen, setIsOpen] = React.useState(false)
-  const [searchTerm, setSearchTerm] = React.useState('')
-  const inputRef = React.useRef(null)
-  const wrapperRef = React.useRef(null)
+  const [isOpen, setIsOpen] = useState(false)
+  const [searchTerm, setSearchTerm] = useState('')
+  const inputRef = useRef(null)
+  const wrapperRef = useRef(null)
   const { PageSize, SearchEngine } = useConfig()
   const [valueLabel, setValueLabel] = useState(undefined)
   const [uid] = useState(generateUID('search_input'))
@@ -77,7 +96,7 @@ export const SearchInput = ({
     return { maxHeight: 'auto' }
   }
 
-  const delayedQuery = useCallback(
+  const delayedQuery = useCallback<(value: string) => void>(
     debounce((value) => handleSearch(0, false, value), 500),
     []
   )
@@ -198,7 +217,7 @@ export const SearchInput = ({
   }
 
   return (
-    <React.Fragment>
+    <>
       <div
         data-test={dataTestWrapper}
         ref={wrapperRef}
@@ -217,7 +236,10 @@ export const SearchInput = ({
           <button
             className={`button ${btnClass}`}
             onClick={(ev) => {
-              ev.target.blur()
+              if (ev.target instanceof HTMLElement) {
+                ev.target.blur()
+              }
+
               setIsOpen(!isOpen)
               if (!options.loading && !options.items) {
                 handleSearch(options.page)
@@ -288,7 +310,7 @@ export const SearchInput = ({
             )}
 
             {options.items && options.items_total > options.items.length && (
-              <React.Fragment>
+              <>
                 <hr className="dropdown-divider" />
                 <div
                   className="dropdown-item editable"
@@ -300,7 +322,7 @@ export const SearchInput = ({
                 >
                   {intl.formatMessage(genericMessages.load_more)}
                 </div>
-              </React.Fragment>
+              </>
             )}
           </div>
         </div>
@@ -310,24 +332,6 @@ export const SearchInput = ({
           {error ? error : ''}
         </ErrorZone>
       )}
-    </React.Fragment>
+    </>
   )
 }
-
-SearchInput.propTypes = {
-  onChange: PropTypes.func,
-  value: PropTypes.string,
-  path: PropTypes.string,
-  btnClass: PropTypes.string,
-  error: PropTypes.string,
-  errorZoneClassName: PropTypes.string,
-  traversal: PropTypes.object,
-  qs: PropTypes.array,
-  queryCondition: PropTypes.string,
-  dataTestWrapper: PropTypes.string,
-  dataTestSearchInput: PropTypes.string,
-  dataTestItem: PropTypes.string,
-  renderTextItemOption: PropTypes.func,
-  typeNameQuery: PropTypes.string,
-  labelProperty: PropTypes.string,
-}
diff --git a/src/guillo-gmi/components/input/search_input_list.js b/src/guillo-gmi/components/input/search_input_list.tsx
similarity index 89%
rename from src/guillo-gmi/components/input/search_input_list.js
rename to src/guillo-gmi/components/input/search_input_list.tsx
index 55de4c1..90df23a 100644
--- a/src/guillo-gmi/components/input/search_input_list.js
+++ b/src/guillo-gmi/components/input/search_input_list.tsx
@@ -1,6 +1,5 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import { useState, useCallback, useRef, useEffect } from 'react'
 
-import PropTypes from 'prop-types'
 import { buildQs } from '../../lib/search'
 import { parser } from '../../lib/search'
 import useSetState from '../../hooks/useSetState'
@@ -12,10 +11,14 @@ import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
 import useClickAway from '../../hooks/useClickAway'
 import { get } from '../../lib/utils'
+import { SearchItem } from '../../types/guillotina'
+
 function debounce(func, wait) {
   let timeout
   return function () {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const context = this
+    // eslint-disable-next-line prefer-rest-params
     const args = arguments
     const later = function () {
       timeout = null
@@ -33,6 +36,24 @@ const initialState = {
   items_total: 0,
 }
 
+interface Props {
+  onChange: (value: SearchItem[]) => void
+  error?: string
+  errorZoneClassName?: string
+  traversal?: any
+  path?: string
+  qs?: string[]
+  queryCondition?: string
+  value: SearchItem[]
+  btnClass?: string
+  dataTestWrapper?: string
+  dataTestSearchInput?: string
+  dataTestItem?: string
+  renderTextItemOption?: (item: any) => string
+  typeNameQuery?: string
+  labelProperty?: string
+}
+
 export const SearchInputList = ({
   onChange,
   error,
@@ -49,14 +70,14 @@ export const SearchInputList = ({
   renderTextItemOption = null,
   typeNameQuery = null,
   labelProperty = 'id',
-}) => {
+}: Props) => {
   const intl = useIntl()
   const [options, setOptions] = useSetState(initialState)
   const [valuesLabel, setValuesLabels] = useState(undefined)
-  const [isOpen, setIsOpen] = React.useState(false)
-  const [searchTerm, setSearchTerm] = React.useState('')
-  const inputRef = React.useRef(null)
-  const wrapperRef = React.useRef(null)
+  const [isOpen, setIsOpen] = useState(false)
+  const [searchTerm, setSearchTerm] = useState('')
+  const inputRef = useRef(null)
+  const wrapperRef = useRef(null)
   const { PageSize, SearchEngine } = useConfig()
   const [isLoadingData, setIsLoadingData] = useState(false)
 
@@ -79,7 +100,7 @@ export const SearchInputList = ({
     return { maxHeight: 'auto' }
   }
 
-  const delayedQuery = useCallback(
+  const delayedQuery = useCallback<(value: string) => void>(
     debounce((value) => handleSearch(0, false, value), 500),
     []
   )
@@ -93,13 +114,13 @@ export const SearchInputList = ({
     }
     const { get } = traversal.registry
     const fnName = get('searchEngineQueryParamsFunction', SearchEngine)
-    let qsParsed = traversal.client[fnName]({
+    const qsParsed = traversal.client[fnName]({
       path: traversal.path,
       start: page * PageSize,
       pageSize: PageSize,
       withDepth: false,
     })
-    let sortParsed = parser(`_sort_des=${labelProperty}`)
+    const sortParsed = parser(`_sort_des=${labelProperty}`)
     let typeNameParsed = []
     if (typeNameQuery) {
       typeNameParsed = parser(`type_name__in=${typeNameQuery}`)
@@ -191,7 +212,7 @@ export const SearchInputList = ({
     return get(item, labelProperty, item.title) || item['@name']
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!options.loading && !options.items && value.length > 0) {
       inicializeLabels()
     } else if (value.length === 0) {
@@ -204,7 +225,7 @@ export const SearchInputList = ({
   }
 
   return (
-    <React.Fragment>
+    <>
       <div className="tags mb-2">
         {value.map((tag, index) => (
           <div
@@ -287,7 +308,7 @@ export const SearchInputList = ({
                 return (
                   <div
                     className={`dropdown-item editable ${
-                      value && value.id === item.id ? 'is-active' : ''
+                      value.includes(item.id) ? 'is-active' : ''
                     }`}
                     data-test={`${dataTestItem}-${item.id}`}
                     onMouseDown={(ev) => {
@@ -315,7 +336,7 @@ export const SearchInputList = ({
             )}
 
             {options.items && options.items_total > options.items.length && (
-              <React.Fragment>
+              <>
                 <hr className="dropdown-divider" />
                 <div
                   className="dropdown-item editable"
@@ -327,7 +348,7 @@ export const SearchInputList = ({
                 >
                   {intl.formatMessage(genericMessages.load_more)}
                 </div>
-              </React.Fragment>
+              </>
             )}
           </div>
         </div>
@@ -337,24 +358,6 @@ export const SearchInputList = ({
           {error ? error : ''}
         </ErrorZone>
       )}
-    </React.Fragment>
+    </>
   )
 }
-
-SearchInputList.propTypes = {
-  onChange: PropTypes.func,
-  path: PropTypes.string,
-  btnClass: PropTypes.string,
-  dataTestWrapper: PropTypes.string,
-  dataTestSearchInput: PropTypes.string,
-  dataTestItem: PropTypes.string,
-  renderTextItemOption: PropTypes.func,
-  typeNameQuery: PropTypes.string,
-  labelProperty: PropTypes.string,
-  error: PropTypes.string,
-  errorZoneClassName: PropTypes.string,
-  traversal: PropTypes.object,
-  path: PropTypes.string,
-  qs: PropTypes.array,
-  queryCondition: PropTypes.string,
-}
diff --git a/src/guillo-gmi/components/input/select.js b/src/guillo-gmi/components/input/select.tsx
similarity index 80%
rename from src/guillo-gmi/components/input/select.js
rename to src/guillo-gmi/components/input/select.tsx
index 07a2890..4dc03f7 100644
--- a/src/guillo-gmi/components/input/select.js
+++ b/src/guillo-gmi/components/input/select.tsx
@@ -1,14 +1,31 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
 import ErrorZone from '../error_zone'
 import { classnames, generateUID } from '../../lib/helpers'
 import { get } from '../../lib/utils'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
+import { forwardRef, useState } from 'react'
 // @ TODO implement hasErrors
 
-/** @type any */
-export const Select = React.forwardRef(
+interface Props {
+  error?: string
+  errorZoneClassName?: string
+  size?: number
+  placeholder?: string
+  id?: string
+  className?: string
+  classWrap?: string
+  disabled?: boolean
+  multiple?: boolean
+  loading?: boolean
+  onChange?: (value: string | string[]) => void
+  options: { text: string; value: string }[]
+  appendDefault?: boolean
+  style?: any
+  dataTest?: string
+  value?: string | string[]
+}
+
+export const Select = forwardRef<HTMLSelectElement, Props>(
   (
     {
       options,
@@ -21,13 +38,12 @@ export const Select = React.forwardRef(
       classWrap = '',
       multiple = false,
       loading = false,
-      isSubmitted,
       onChange,
       appendDefault = false,
       style = {},
       dataTest,
       value,
-      ...rest
+      disabled,
     },
     ref
   ) => {
@@ -73,13 +89,12 @@ export const Select = React.forwardRef(
             className={classnames(['', className])}
             size={multiple ? 5 : size}
             multiple={multiple}
-            disabled={loading || rest.disabled}
+            disabled={loading || disabled}
             onChange={onUpdate}
             ref={ref}
             style={style}
             data-test={dataTest}
             value={value}
-            {...rest}
           >
             {options.map(({ text, ...rest }, index) => (
               <option key={index.toString()} {...rest}>
@@ -97,15 +112,3 @@ export const Select = React.forwardRef(
     )
   }
 )
-
-Select.propTypes = {
-  error: PropTypes.string,
-  disabled: PropTypes.bool,
-  loading: PropTypes.bool,
-  isSubmitted: PropTypes.bool,
-  size: PropTypes.number,
-  onChange: PropTypes.func,
-  options: PropTypes.arrayOf(PropTypes.object),
-  multiple: PropTypes.bool,
-  className: PropTypes.string,
-}
diff --git a/src/guillo-gmi/components/input/select_vocabulary.js b/src/guillo-gmi/components/input/select_vocabulary.tsx
similarity index 64%
rename from src/guillo-gmi/components/input/select_vocabulary.js
rename to src/guillo-gmi/components/input/select_vocabulary.tsx
index 38d53fb..5409fad 100644
--- a/src/guillo-gmi/components/input/select_vocabulary.js
+++ b/src/guillo-gmi/components/input/select_vocabulary.tsx
@@ -1,12 +1,33 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import { Select } from './select'
 import { get } from '../../lib/utils'
 import { useVocabulary } from '../../hooks/useVocabulary'
+import { forwardRef } from 'react'
 
-export const SelectVocabulary = React.forwardRef(
+interface Props {
+  vocabularyName: string
+  className?: string
+  classWrap?: string
+  val?: string
+  dataTest?: string
+  multiple?: boolean
+  onChange?: (value: string) => void
+  appendDefault?: boolean
+  id?: string
+  placeholder?: string
+}
+export const SelectVocabulary = forwardRef<HTMLSelectElement, Props>(
   (
-    { vocabularyName, className, classWrap, val, dataTest, multiple, ...rest },
+    {
+      vocabularyName,
+      className,
+      classWrap,
+      val,
+      dataTest,
+      multiple,
+      onChange,
+      id,
+      placeholder,
+    },
     ref
   ) => {
     const vocabulary = useVocabulary(vocabularyName)
@@ -54,20 +75,12 @@ export const SelectVocabulary = React.forwardRef(
         classWrap={classWrap || 'is-fullwidth'}
         dataTest={dataTest}
         ref={ref}
-        {...rest}
+        onChange={onChange}
+        id={id}
+        placeholder={placeholder}
       />
     )
   }
 )
 
-Select.propTypes = {
-  error: PropTypes.string,
-  disabled: PropTypes.bool,
-  loading: PropTypes.bool,
-  isSubmitted: PropTypes.bool,
-  size: PropTypes.number,
-  onChange: PropTypes.func,
-  multiple: PropTypes.bool,
-  className: PropTypes.string,
-  vocabularyName: PropTypes.string,
-}
+SelectVocabulary.displayName = 'SelectVocabulary'
diff --git a/src/guillo-gmi/components/input/textarea.js b/src/guillo-gmi/components/input/textarea.tsx
similarity index 76%
rename from src/guillo-gmi/components/input/textarea.js
rename to src/guillo-gmi/components/input/textarea.tsx
index d632aa6..1092fd8 100644
--- a/src/guillo-gmi/components/input/textarea.js
+++ b/src/guillo-gmi/components/input/textarea.tsx
@@ -1,8 +1,20 @@
-import React, { useState } from 'react'
 import ErrorZone from '../error_zone'
 import { classnames, generateUID } from '../../lib/helpers'
+import { forwardRef, useState } from 'react'
 
-export const Textarea = React.forwardRef(
+interface Props {
+  value: string
+  classWrap?: string
+  rows?: number
+  className?: string
+  onChange?: (value: string) => void
+  dataTest?: string
+  error?: string
+  errorZoneClassName?: string
+  placeholder?: string
+  id?: string
+}
+export const Textarea = forwardRef<HTMLTextAreaElement, Props>(
   (
     {
       value = '',
@@ -15,7 +27,6 @@ export const Textarea = React.forwardRef(
       errorZoneClassName,
       placeholder,
       id,
-      ...rest
     },
     ref
   ) => {
@@ -42,7 +53,6 @@ export const Textarea = React.forwardRef(
             onChange={onUpdate}
             value={value}
             data-test={dataTest}
-            {...rest}
             ref={ref}
           />
         </div>
diff --git a/src/guillo-gmi/components/input/upload.tsx b/src/guillo-gmi/components/input/upload.tsx
index 18b6909..26cf294 100644
--- a/src/guillo-gmi/components/input/upload.tsx
+++ b/src/guillo-gmi/components/input/upload.tsx
@@ -1,10 +1,12 @@
 import { InputHTMLAttributes } from 'react'
-import { lightFileReader } from '../../lib/client'
+import { lightFileReader } from '../../lib/client.js'
 import { useIntl } from 'react-intl'
+import { FileWithFileName } from '../../types/global'
 
 interface Props {
   label?: string
   dataTest?: string
+  onChange: (file: FileWithFileName) => void
 }
 export function FileUpload({
   label,
@@ -13,7 +15,7 @@ export function FileUpload({
 }: Props & InputHTMLAttributes<HTMLInputElement>) {
   const intl = useIntl()
   const changed = async (event) => {
-    const file = await lightFileReader(event.target.files[0])
+    const file: FileWithFileName = await lightFileReader(event.target.files[0])
     onChange(file)
   }
 
diff --git a/src/guillo-gmi/components/item.js b/src/guillo-gmi/components/item.tsx
similarity index 77%
rename from src/guillo-gmi/components/item.js
rename to src/guillo-gmi/components/item.tsx
index a53a952..e77a46d 100644
--- a/src/guillo-gmi/components/item.js
+++ b/src/guillo-gmi/components/item.tsx
@@ -6,8 +6,13 @@ import { useTraversal } from '../contexts'
 import { Icon } from './ui/icon'
 import { ItemCheckbox } from './selected_items_actions'
 import { Delete } from './ui'
+import { IColumn } from '../reducers/guillotina'
 
-export function Item({ item, icon }) {
+interface ItemProps {
+  item: ItemModel
+  icon?: string
+}
+export function Item({ item, icon }: ItemProps) {
   const [, navigate] = useLocation()
   const link = () => navigate({ path: item.path }, true)
   return (
@@ -24,14 +29,19 @@ const smallcss = {
   width: 25,
 }
 
-export function RItem({ item, search, columns }) {
+interface RItemProps {
+  item: ItemModel
+  search: string
+  columns: IColumn[]
+}
+export function RItem({ item, search, columns }: RItemProps) {
   const [, navigate] = useLocation()
   const traversal = useTraversal()
   const model = new ItemModel(item, traversal.url, traversal.path)
   const link = () => navigate({ path: model.path }, true)
 
   return (
-    <tr key={item} data-test={`itemTest-${item['@name']}`}>
+    <tr key={item.id} data-test={`itemTest-${item.id}`}>
       <td style={smallcss}>
         <ItemCheckbox item={item} dataTest="itemCheckboxRowTest" />
       </td>
@@ -53,7 +63,11 @@ export function RItem({ item, search, columns }) {
   )
 }
 
-export function ItemTitle({ title, actions }) {
+interface ItemTitleProps {
+  title: string
+  actions?: React.ReactNode
+}
+export function ItemTitle({ title, actions }: ItemTitleProps) {
   return (
     <nav className="level">
       <div className="level-left">
diff --git a/src/guillo-gmi/components/layout.js b/src/guillo-gmi/components/layout.tsx
similarity index 84%
rename from src/guillo-gmi/components/layout.js
rename to src/guillo-gmi/components/layout.tsx
index b1c38eb..ca1545b 100644
--- a/src/guillo-gmi/components/layout.js
+++ b/src/guillo-gmi/components/layout.tsx
@@ -1,14 +1,19 @@
-import React from 'react'
+import { Auth } from '../lib/auth'
 import { Icon } from './ui/icon'
 
-export function Layout({ children, onLogout, auth }) {
-  const doLogout = (ev) => {
+interface Props {
+  children: React.ReactNode
+  onLogout: () => void
+  auth: Auth
+}
+export function Layout({ children, onLogout, auth }: Props) {
+  const doLogout = () => {
     auth.logout()
     onLogout()
   }
 
   return (
-    <React.Fragment>
+    <>
       <header>
         <nav className="navbar" role="navigation" aria-label="main navigation">
           <div className="navbar-brand">
@@ -36,7 +41,7 @@ export function Layout({ children, onLogout, auth }) {
                 {auth.isLogged && (
                   <div className="buttons">
                     <button className="button is-size-7" onClick={doLogout}>
-                      <Icon icon="fas fa-sign-out-alt" size="is-size-7" />
+                      <Icon icon="fas fa-sign-out-alt" />
                       <span>Logout</span>
                     </button>
                   </div>
@@ -51,6 +56,6 @@ export function Layout({ children, onLogout, auth }) {
           <div className="column">{children}</div>
         </div>
       </section>
-    </React.Fragment>
+    </>
   )
 }
diff --git a/src/guillo-gmi/components/login.js b/src/guillo-gmi/components/login.tsx
similarity index 89%
rename from src/guillo-gmi/components/login.js
rename to src/guillo-gmi/components/login.tsx
index a92ef8e..53ddafe 100644
--- a/src/guillo-gmi/components/login.js
+++ b/src/guillo-gmi/components/login.tsx
@@ -1,24 +1,39 @@
 import React, { useRef, useEffect } from 'react'
 import useSetState from '../hooks/useSetState'
+import { Auth } from '../lib/auth'
 
 const ERRORS = {
   failed_to_fetch: 'Failed to fetch data: Backend not running?',
   invalid_credentials: 'Failed! Invalid credentials',
 }
+interface State {
+  username: string
+  password: string
+  loading: boolean
+  errors: string
+}
 const initialState = {
   username: '',
   password: '',
   loading: undefined,
   errors: undefined,
 }
+
+interface Props {
+  currentSchema: string
+  setCurrentSchema: (schema: string) => void
+  schemas: string[]
+  auth: Auth
+  onLogin?: () => void
+}
 export const Login = ({
   currentSchema,
   setCurrentSchema,
   schemas,
   auth,
   onLogin,
-}) => {
-  const [state, setState] = useSetState(initialState)
+}: Props) => {
+  const [state, setState] = useSetState<State>(initialState)
   const inputRef = useRef(null)
 
   useEffect(() => {
diff --git a/src/guillo-gmi/components/notallowed.js b/src/guillo-gmi/components/notallowed.tsx
similarity index 94%
rename from src/guillo-gmi/components/notallowed.js
rename to src/guillo-gmi/components/notallowed.tsx
index b32d4ba..d2bf3b3 100644
--- a/src/guillo-gmi/components/notallowed.js
+++ b/src/guillo-gmi/components/notallowed.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { Icon } from './ui/icon'
 import { useIntl } from 'react-intl'
 
diff --git a/src/guillo-gmi/components/notfound.js b/src/guillo-gmi/components/notfound.tsx
similarity index 94%
rename from src/guillo-gmi/components/notfound.js
rename to src/guillo-gmi/components/notfound.tsx
index 0526dd9..5be68f1 100644
--- a/src/guillo-gmi/components/notfound.js
+++ b/src/guillo-gmi/components/notfound.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { Icon } from './ui/icon'
 import { useIntl } from 'react-intl'
 
diff --git a/src/guillo-gmi/components/pagination.js b/src/guillo-gmi/components/pagination.tsx
similarity index 86%
rename from src/guillo-gmi/components/pagination.js
rename to src/guillo-gmi/components/pagination.tsx
index 8deeaba..49707f0 100644
--- a/src/guillo-gmi/components/pagination.js
+++ b/src/guillo-gmi/components/pagination.tsx
@@ -1,8 +1,12 @@
-import React from 'react'
 import { useIntl } from 'react-intl'
 
-/* eslint jsx-a11y/anchor-is-valid: "off" */
-export function Pagination({ current, total, doPaginate, pager }) {
+interface Props {
+  current: number
+  total: number
+  doPaginate: (page: number) => void
+  pager: number
+}
+export function Pagination({ current, total, doPaginate, pager }: Props) {
   const intl = useIntl()
   const maxPages = Math.ceil(total / pager)
   if (maxPages <= 1) {
@@ -34,7 +38,7 @@ export function Pagination({ current, total, doPaginate, pager }) {
       >
         <a
           className="pagination-previous is-small"
-          disabled={current === 0}
+          // disabled={current === 0}
           onClick={() => (current > 0 ? doPaginate(current - 1) : null)}
         >
           <span className="icon">
@@ -43,7 +47,7 @@ export function Pagination({ current, total, doPaginate, pager }) {
         </a>
         <a
           className="pagination-next is-small"
-          disabled={current >= maxPages - 1}
+          // disabled={current >= maxPages - 1}
           onClick={() => doPaginate(current + 1)}
         >
           <span className="icon">
diff --git a/src/guillo-gmi/components/panel/addons.tsx b/src/guillo-gmi/components/panel/addons.tsx
index a9d1d61..0275085 100644
--- a/src/guillo-gmi/components/panel/addons.tsx
+++ b/src/guillo-gmi/components/panel/addons.tsx
@@ -22,7 +22,7 @@ const messages = defineMessages({
 export function PanelAddons() {
   const intl = useIntl()
   const Ctx = useTraversal()
-  let [action, setAction] = useState(false)
+  const [action, setAction] = useState(false)
   const [state, setState] = useState({
     data: undefined,
     loading: false,
@@ -76,7 +76,7 @@ export function PanelAddons() {
             <table className="table is-12">
               <tbody>
                 {state.data.available.map((addon) => (
-                  <tr>
+                  <tr key={addon.id}>
                     <td>{addon.title}</td>
                     <td>
                       <button
@@ -104,7 +104,7 @@ export function PanelAddons() {
             <table className="table is-12">
               <tbody>
                 {state.data.installed.map((addon) => (
-                  <tr>
+                  <tr key={addon.id}>
                     <td>{addon.title}</td>
                     <td>
                       <button
diff --git a/src/guillo-gmi/components/panel/index.js b/src/guillo-gmi/components/panel/index.js
deleted file mode 100644
index 0fb8622..0000000
--- a/src/guillo-gmi/components/panel/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-// @create-index
-
-export { default as addons } from './addons.js'
-export { default as actions } from './actions.js'
-export { default as docs } from './docs.js'
-export { default as item } from './item.js'
-export { default as items } from './items.js'
-export { default as properties } from './properties.js'
diff --git a/src/guillo-gmi/components/panel/index.ts b/src/guillo-gmi/components/panel/index.ts
new file mode 100644
index 0000000..beb4565
--- /dev/null
+++ b/src/guillo-gmi/components/panel/index.ts
@@ -0,0 +1,6 @@
+// @create-index
+
+export * from './addons'
+export * from './actions'
+export * from './items'
+export * from './properties'
diff --git a/src/guillo-gmi/components/panel/items.js b/src/guillo-gmi/components/panel/items.tsx
similarity index 93%
rename from src/guillo-gmi/components/panel/items.js
rename to src/guillo-gmi/components/panel/items.tsx
index d6b9332..f400961 100644
--- a/src/guillo-gmi/components/panel/items.js
+++ b/src/guillo-gmi/components/panel/items.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import useSetState from '../../hooks/useSetState'
 import {
   ItemsActionsProvider,
@@ -22,7 +20,15 @@ import { Input } from '../input/input'
 import { SelectVocabulary } from '../input/select_vocabulary'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
-const initialState = {
+import { ItemModel } from '../../models'
+
+interface InitialState {
+  page: number
+  items: ItemModel[]
+  loading: boolean
+  total: number
+}
+const initialState: InitialState = {
   page: 0,
   items: [],
   loading: true,
@@ -35,7 +41,7 @@ export function PanelItems() {
   const intl = useIntl()
 
   const Ctx = useTraversal()
-  const [state, setState] = useSetState(initialState)
+  const [state, setState] = useSetState<InitialState>(initialState)
   const { items, loading, total } = state
 
   const filterSchema =
@@ -45,9 +51,9 @@ export function PanelItems() {
     Ctx.registry.getItemsColumn(Ctx.context['@type']) ||
     Ctx.client.getItemsColumn()
 
-  let search = location.get('q')
-  let type = location.get('type')
-  let sort = location.get('sort')
+  const search = location.get('q')
+  const type = location.get('type')
+  const sort = location.get('sort')
   const sortDirection = location.get('sort_direction')
   let page
 
@@ -94,7 +100,7 @@ export function PanelItems() {
   }
 
   let resultQueryParams = []
-  let resultDynamicLocation = []
+  const resultDynamicLocation = []
   filterSchema.forEach((filter) => {
     const itemParam = location.get(filter.attribute_key)
     resultDynamicLocation.push(itemParam)
@@ -108,12 +114,11 @@ export function PanelItems() {
     const controller = new AbortController()
     if (Ctx.state.loading) return
     ;(async () => {
-      let data
       setState({ loading: true, total: Ctx.context.length })
       const { get } = Ctx.registry
       const fnName = get('searchEngineQueryParamsFunction', SearchEngine)
 
-      let qsParsed = Ctx.client[fnName]({
+      const qsParsed = Ctx.client[fnName]({
         path: Ctx.path,
         start: page * PageSize,
         pageSize: PageSize,
@@ -132,7 +137,9 @@ export function PanelItems() {
       }
 
       const { signal } = controller
-      data = await Ctx.client.search(Ctx.path, qs, false, false, { signal })
+      const data = await Ctx.client.search(Ctx.path, qs, false, false, {
+        signal,
+      })
       setState({
         items: data.member,
         loading: false,
@@ -208,7 +215,7 @@ export function PanelItems() {
                   appendDefault
                   vocabularyName={filter.vocabulary}
                   classWrap="is-size-7 is-fullwidth"
-                  value={location.get(filter.attribute_key) || ''}
+                  val={location.get(filter.attribute_key) || ''}
                   dataTest={`filterInput${filter.attribute_key}`}
                   onChange={(value) => {
                     if (value && value !== '') {
@@ -267,7 +274,7 @@ export function PanelItems() {
                   <div key={filter.attribute_key}>
                     <SearchVocabularyLabels
                       query={filter.attribute_key}
-                      vocabulary={filter?.vocabulary}
+                      vocabularyName={filter?.vocabulary}
                     />
                   </div>
                 )
@@ -342,7 +349,7 @@ export function PanelItems() {
               ))}
             {items && items.length === 0 && (
               <tr>
-                <td colSpan="6" className="has-text-centered">
+                <td colSpan={6} className="has-text-centered">
                   {intl.formatMessage(genericMessages.no_results)}
                 </td>
               </tr>
diff --git a/src/guillo-gmi/components/panel/permissions.js b/src/guillo-gmi/components/panel/permissions.tsx
similarity index 92%
rename from src/guillo-gmi/components/panel/permissions.js
rename to src/guillo-gmi/components/panel/permissions.tsx
index 6668786..d49757e 100644
--- a/src/guillo-gmi/components/panel/permissions.js
+++ b/src/guillo-gmi/components/panel/permissions.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import useSetState from '../../hooks/useSetState'
 import { PermissionPrinperm } from './permissions_prinperm'
 import { PermissionPrinrole } from './permissions_prinrole'
@@ -11,6 +9,7 @@ import { useCrudContext } from '../../hooks/useCrudContext'
 import { useTraversal } from '../../contexts'
 import { defineMessages, useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
+import { Fragment, useEffect, useState } from 'react'
 
 const messages = defineMessages({
   role_permissions: {
@@ -68,9 +67,9 @@ export function PanelPermissions() {
   const { get, result, loading } = useCrudContext()
   const ctx = useTraversal()
 
-  const [reset, setReset] = React.useState(1)
+  const [reset, setReset] = useState(1)
 
-  React.useEffect(() => {
+  useEffect(() => {
     get('@sharing')
   }, [reset])
 
@@ -94,9 +93,9 @@ export function PanelPermissions() {
             ]}
           >
             {perms.roles.map((role, idx) => (
-              <React.Fragment key={'ff' + idx}>
+              <Fragment key={'ff' + idx}>
                 <tr>
-                  <td colSpan="3" className="has-text-link">
+                  <td colSpan={3} className="has-text-link">
                     {role}
                   </td>
                   {/* <td>
@@ -111,11 +110,11 @@ export function PanelPermissions() {
                     <td>{perms.getRole(role)[row]}</td>
                   </tr>
                 ))}
-              </React.Fragment>
+              </Fragment>
             ))}
             {perms.roles.length === 0 && (
               <tr>
-                <td colSpan="3">
+                <td colSpan={3}>
                   {intl.formatMessage(messages.no_role_permissions)}
                 </td>
               </tr>
@@ -132,9 +131,9 @@ export function PanelPermissions() {
             ]}
           >
             {perms.principals.map((role, idx) => (
-              <React.Fragment key={'f2' + idx}>
+              <Fragment key={'f2' + idx}>
                 <tr>
-                  <td colSpan="3" className="has-text-link">
+                  <td colSpan={3} className="has-text-link">
                     {role}
                   </td>
                 </tr>
@@ -145,11 +144,11 @@ export function PanelPermissions() {
                     <td>{perms.getPrincipals(role)[row]}</td>
                   </tr>
                 ))}
-              </React.Fragment>
+              </Fragment>
             ))}
             {perms.principals.length === 0 && (
               <tr>
-                <td colSpan="3">
+                <td colSpan={3}>
                   {intl.formatMessage(messages.no_principal_permissions)}
                 </td>
               </tr>
@@ -166,9 +165,9 @@ export function PanelPermissions() {
             ]}
           >
             {perms.prinrole.map((role, idx) => (
-              <React.Fragment key={role + idx}>
+              <Fragment key={role + idx}>
                 <tr>
-                  <td colSpan="3" className="has-text-link">
+                  <td colSpan={3} className="has-text-link">
                     {role}
                   </td>
                 </tr>
@@ -179,11 +178,11 @@ export function PanelPermissions() {
                     <td>{perms.getPrinroles(role)[row]}</td>
                   </tr>
                 ))}
-              </React.Fragment>
+              </Fragment>
             ))}
             {perms.prinrole.length === 0 && (
               <tr>
-                <td colSpan="3">
+                <td colSpan={3}>
                   {intl.formatMessage(messages.no_role_permissions)}
                 </td>
               </tr>
@@ -228,7 +227,7 @@ export function AddPermission({ refresh, reset }) {
     { text: intl.formatMessage(messages.principal_roles), value: 'prinrole' },
   ]
 
-  React.useEffect(() => {
+  useEffect(() => {
     async function init() {
       const permissions = (await Ctx.client.getAllPermissions(Ctx.path)).map(
         (perm) => ({
diff --git a/src/guillo-gmi/components/panel/permissions_prinperm.js b/src/guillo-gmi/components/panel/permissions_prinperm.tsx
similarity index 99%
rename from src/guillo-gmi/components/panel/permissions_prinperm.js
rename to src/guillo-gmi/components/panel/permissions_prinperm.tsx
index 015d956..b47438a 100644
--- a/src/guillo-gmi/components/panel/permissions_prinperm.js
+++ b/src/guillo-gmi/components/panel/permissions_prinperm.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import ErrorZone from '../error_zone'
 import useSetState from '../../hooks/useSetState'
 import { Button } from '../input/button'
diff --git a/src/guillo-gmi/components/panel/permissions_prinrole.js b/src/guillo-gmi/components/panel/permissions_prinrole.tsx
similarity index 99%
rename from src/guillo-gmi/components/panel/permissions_prinrole.js
rename to src/guillo-gmi/components/panel/permissions_prinrole.tsx
index 28d1062..d2a5654 100644
--- a/src/guillo-gmi/components/panel/permissions_prinrole.js
+++ b/src/guillo-gmi/components/panel/permissions_prinrole.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import ErrorZone from '../error_zone'
 import useSetState from '../../hooks/useSetState'
 import { Button } from '../input/button'
diff --git a/src/guillo-gmi/components/panel/permissions_roleperm.js b/src/guillo-gmi/components/panel/permissions_roleperm.tsx
similarity index 99%
rename from src/guillo-gmi/components/panel/permissions_roleperm.js
rename to src/guillo-gmi/components/panel/permissions_roleperm.tsx
index 99e1fc2..9285719 100644
--- a/src/guillo-gmi/components/panel/permissions_roleperm.js
+++ b/src/guillo-gmi/components/panel/permissions_roleperm.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import ErrorZone from '../error_zone'
 import useSetState from '../../hooks/useSetState'
 import { Button } from '../input/button'
diff --git a/src/guillo-gmi/components/panel/properties.js b/src/guillo-gmi/components/panel/properties.tsx
similarity index 99%
rename from src/guillo-gmi/components/panel/properties.js
rename to src/guillo-gmi/components/panel/properties.tsx
index 1079862..a2361f4 100644
--- a/src/guillo-gmi/components/panel/properties.js
+++ b/src/guillo-gmi/components/panel/properties.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import { ItemModel } from '../../models'
 import { BehaviorsView } from '../behavior_view'
 import { Icon } from '../ui/icon'
diff --git a/src/guillo-gmi/components/path.js b/src/guillo-gmi/components/path.tsx
similarity index 85%
rename from src/guillo-gmi/components/path.js
rename to src/guillo-gmi/components/path.tsx
index 9b6bbd4..a8f067a 100644
--- a/src/guillo-gmi/components/path.js
+++ b/src/guillo-gmi/components/path.tsx
@@ -1,15 +1,12 @@
-import React from 'react'
 import { useTraversal } from '../contexts'
 import { useLocation } from '../hooks/useLocation'
 
-/* eslint jsx-a11y/anchor-is-valid: "off" */
-
 export function Path() {
   const ctx = useTraversal()
   const [, navigate] = useLocation()
 
-  let segments = ctx.path.replace(/\/$/, '').split('/')
-  let links = buildPaths(segments)
+  const segments = ctx.path.replace(/\/$/, '').split('/')
+  const links = buildPaths(segments)
 
   if (segments.length === 1) {
     return false
@@ -21,7 +18,7 @@ export function Path() {
         {segments.map((item, indx) => {
           const path = links[indx]
           const onClick = (e) => {
-            if (window.event.ctrlKey || window.event.metaKey) return
+            if (e.ctrlKey || e.metaKey) return
             e.preventDefault()
             navigate({ path }, true)
           }
@@ -57,7 +54,7 @@ export function Path() {
 
 const buildPaths = (segments) => {
   let current = ''
-  let results = []
+  const results = []
   segments.map((item, indx) => {
     if (indx === 0) {
       current += '/'
diff --git a/src/guillo-gmi/components/properties_view.js b/src/guillo-gmi/components/properties_view.tsx
similarity index 100%
rename from src/guillo-gmi/components/properties_view.js
rename to src/guillo-gmi/components/properties_view.tsx
diff --git a/src/guillo-gmi/components/search_labels.js b/src/guillo-gmi/components/search_labels.tsx
similarity index 84%
rename from src/guillo-gmi/components/search_labels.js
rename to src/guillo-gmi/components/search_labels.tsx
index 05d0b18..f22e7a7 100644
--- a/src/guillo-gmi/components/search_labels.js
+++ b/src/guillo-gmi/components/search_labels.tsx
@@ -1,9 +1,10 @@
-import React from 'react'
 import { Tag } from './ui/tag'
 import { useLocation } from '../hooks/useLocation'
 
-export function SearchLabels(props) {
-  const { query } = props
+interface Props {
+  query?: string
+}
+export function SearchLabels({ query }: Props) {
   const [location, , del] = useLocation()
   const search = location.get(query ?? 'q')
 
diff --git a/src/guillo-gmi/components/search_options_labels.js b/src/guillo-gmi/components/search_options_labels.tsx
similarity index 80%
rename from src/guillo-gmi/components/search_options_labels.js
rename to src/guillo-gmi/components/search_options_labels.tsx
index ee5ad6c..fe84492 100644
--- a/src/guillo-gmi/components/search_options_labels.js
+++ b/src/guillo-gmi/components/search_options_labels.tsx
@@ -1,9 +1,12 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Tag } from './ui/tag'
 import { useLocation } from '../hooks/useLocation'
 
-export function SearchOptionsLabels(props) {
-  const { query = 'q', options } = props
+interface Props {
+  query?: string
+  options?: { value: string; text: string }[]
+}
+export function SearchOptionsLabels({ query = 'q', options }: Props) {
   const [location, , del] = useLocation()
   const [renderValue, setRenderValue] = useState(undefined)
   const defaultRenderValue = location.get(query)
diff --git a/src/guillo-gmi/components/search_vocabulary_labels.js b/src/guillo-gmi/components/search_vocabulary_labels.tsx
similarity index 81%
rename from src/guillo-gmi/components/search_vocabulary_labels.js
rename to src/guillo-gmi/components/search_vocabulary_labels.tsx
index 66d500a..41fb595 100644
--- a/src/guillo-gmi/components/search_vocabulary_labels.js
+++ b/src/guillo-gmi/components/search_vocabulary_labels.tsx
@@ -1,14 +1,18 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Tag } from './ui/tag'
 import { useLocation } from '../hooks/useLocation'
 import { useVocabulary } from '../hooks/useVocabulary'
 import { get } from '../lib/utils'
 
-export function SearchVocabularyLabels(props) {
-  const { query = 'q' } = props
+interface Props {
+  query?: string
+  vocabularyName?: string
+}
+
+export function SearchVocabularyLabels({ query = 'q', vocabularyName }: Props) {
   const [location, , del] = useLocation()
   const [renderValue, setRenderValue] = useState(undefined)
-  const vocabulary = useVocabulary(props?.vocabulary)
+  const vocabulary = useVocabulary(vocabularyName)
   const defaultRenderValue = location.get(query)
 
   useEffect(() => {
diff --git a/src/guillo-gmi/components/selected_items_actions.js b/src/guillo-gmi/components/selected_items_actions.tsx
similarity index 75%
rename from src/guillo-gmi/components/selected_items_actions.js
rename to src/guillo-gmi/components/selected_items_actions.tsx
index 148cec0..8d60c7e 100644
--- a/src/guillo-gmi/components/selected_items_actions.js
+++ b/src/guillo-gmi/components/selected_items_actions.tsx
@@ -1,21 +1,43 @@
-import React, { createContext, useState, useContext } from 'react'
+import { createContext, useState, useContext } from 'react'
 import Dropdown from './input/dropdown'
 import { Checkbox } from './input/checkbox'
 import { useTraversal } from '../contexts'
 import { useIntl } from 'react-intl'
 import { getActionsObject } from '../lib/helpers'
+import { ItemModel } from '../models'
 
-const ItemsActionsCtx = createContext({})
+const ItemsActionsCtx = createContext<{
+  selected?: {
+    all: boolean
+    [key: string]: boolean
+  }
+  onSelectOneItem?: (item: ItemModel) => void
+  onSelectAllItems?: (chedked: boolean) => void
+  onAction?: (action: string) => void
+}>({
+  selected: {
+    all: false,
+  },
+})
 
 /**
  * Actions to apply after select some items
  * Ex: Delete, Move, Copy...
  */
-export function ItemsActionsProvider({ items, children }) {
+interface PropsItemsActionsProvider {
+  items: ItemModel[]
+  children: React.ReactNode
+}
+export function ItemsActionsProvider({
+  items,
+  children,
+}: PropsItemsActionsProvider) {
   const intl = useIntl()
   const actions = getActionsObject(intl, true)
   const traversal = useTraversal()
-  const [selected, setSelected] = useState({})
+  const [selected, setSelected] = useState({
+    all: false,
+  })
   function onSelectAllItems(checked) {
     setSelected(
       items.reduce(
@@ -60,15 +82,13 @@ export function ItemsActionsProvider({ items, children }) {
  * Checkbox component without props that consume the ItemsActionsContext
  * and it select/unselect all items of the page.
  */
-export function AllItemsCheckbox({ dataTest }) {
+export function AllItemsCheckbox({ dataTest }: { dataTest?: string }) {
   const { onSelectAllItems, selected } = useContext(ItemsActionsCtx)
 
   return (
     <Checkbox
-      key={selected.all}
       onChange={onSelectAllItems}
-      style={{ marginLeft: 2 }}
-      value={selected.all}
+      checked={selected.all}
       dataTest={dataTest}
     />
   )
@@ -77,16 +97,19 @@ export function AllItemsCheckbox({ dataTest }) {
 /**
  * Checkbox component to select ONE item.
  */
-export function ItemCheckbox({ item, dataTest }) {
+interface PropsItemCheckbox {
+  item: ItemModel
+  dataTest?: string
+}
+export function ItemCheckbox({ item, dataTest }: PropsItemCheckbox) {
   const { selected, onSelectOneItem } = useContext(ItemsActionsCtx)
   const absId = `${item.path}/${item.id}`
   const value = selected[absId]
 
   return (
     <Checkbox
-      key={value}
       onChange={() => onSelectOneItem(item)}
-      value={value}
+      checked={value}
       dataTest={dataTest}
     />
   )
@@ -115,6 +138,7 @@ export function ItemsActionsDropdown() {
         ACTIONS_OBJECT[o.value].perms.some((perm) => !traversal.hasPerm(perm))
       }
       options={options}
+      isRight={false}
     >
       <div data-test="btnChooseActionTest">
         {intl.formatMessage({
diff --git a/src/guillo-gmi/components/tabs.js b/src/guillo-gmi/components/tabs.tsx
similarity index 81%
rename from src/guillo-gmi/components/tabs.js
rename to src/guillo-gmi/components/tabs.tsx
index d4b3b4d..a0b909d 100644
--- a/src/guillo-gmi/components/tabs.js
+++ b/src/guillo-gmi/components/tabs.tsx
@@ -1,9 +1,16 @@
-import React from 'react'
-import { useState } from 'react'
+import React, { useState } from 'react'
 import { useLocation } from '../hooks/useLocation'
+import { IndexSignature } from '../types/global'
 
-function FallbackTab({ title }) {
-  return <div>Tab '{title}' not found</div>
+function FallbackTab({ title }: { title: string }) {
+  return <div>Tab &apos;{title}&apos; not found</div>
+}
+
+interface Props {
+  tabs: IndexSignature
+  currentTab?: string
+  rightToolbar?: React.ReactNode
+  fallback?: React.ComponentType
 }
 
 export function TabsPanel({
@@ -11,8 +18,7 @@ export function TabsPanel({
   currentTab,
   rightToolbar,
   fallback = FallbackTab,
-  ...props
-}) {
+}: Props) {
   const [location, setLocation] = useLocation()
 
   if (location.get('tab')) {
@@ -67,7 +73,7 @@ export function TabsPanel({
         {rightToolbar && <div className="level-right">{rightToolbar}</div>}
       </div>
       <div className="container">
-        <CurrentComp title={current} {...props} />
+        <CurrentComp title={current} />
       </div>
     </div>
   )
diff --git a/src/guillo-gmi/components/ui/delete.js b/src/guillo-gmi/components/ui/delete.js
deleted file mode 100644
index ebfe6eb..0000000
--- a/src/guillo-gmi/components/ui/delete.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-
-export function Delete({ onClick, className, children }) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={`delete ${className}`}
-      data-test="btnDeleteTest"
-    >
-      {children}
-    </button>
-  )
-}
diff --git a/src/guillo-gmi/components/ui/delete.tsx b/src/guillo-gmi/components/ui/delete.tsx
new file mode 100644
index 0000000..6113f37
--- /dev/null
+++ b/src/guillo-gmi/components/ui/delete.tsx
@@ -0,0 +1,19 @@
+import { MouseEvent } from 'react'
+
+interface Props {
+  onClick: (event: MouseEvent<HTMLButtonElement>) => void
+  className?: string
+  children?: React.ReactNode
+}
+export function Delete({ onClick, className = '', children = null }: Props) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`delete ${className}`}
+      data-test="btnDeleteTest"
+    >
+      {children}
+    </button>
+  )
+}
diff --git a/src/guillo-gmi/components/ui/index.js b/src/guillo-gmi/components/ui/index.ts
similarity index 100%
rename from src/guillo-gmi/components/ui/index.js
rename to src/guillo-gmi/components/ui/index.ts
diff --git a/src/guillo-gmi/components/ui/loading.js b/src/guillo-gmi/components/ui/loading.js
deleted file mode 100644
index cacd48e..0000000
--- a/src/guillo-gmi/components/ui/loading.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react'
-
-export const Loading = ({ ...rest }) => (
-  <div className="progress-line" {...rest}></div>
-)
diff --git a/src/guillo-gmi/components/ui/loading.tsx b/src/guillo-gmi/components/ui/loading.tsx
new file mode 100644
index 0000000..7dd1af0
--- /dev/null
+++ b/src/guillo-gmi/components/ui/loading.tsx
@@ -0,0 +1,8 @@
+import { IndexSignature } from '../../types/global'
+
+interface Props {
+  style?: IndexSignature
+}
+export const Loading = ({ style = {} }: Props) => (
+  <div className="progress-line" style={style}></div>
+)
diff --git a/src/guillo-gmi/components/ui/notification.js b/src/guillo-gmi/components/ui/notification.tsx
similarity index 87%
rename from src/guillo-gmi/components/ui/notification.js
rename to src/guillo-gmi/components/ui/notification.tsx
index c4d93ce..8d1606c 100644
--- a/src/guillo-gmi/components/ui/notification.js
+++ b/src/guillo-gmi/components/ui/notification.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 export function Notification({ isColor = '', children }) {
   return (
     <div className={'notification is-' + isColor} data-test="notificationTest">
diff --git a/src/guillo-gmi/components/ui/tag.js b/src/guillo-gmi/components/ui/tag.tsx
similarity index 75%
rename from src/guillo-gmi/components/ui/tag.js
rename to src/guillo-gmi/components/ui/tag.tsx
index d5b8c3a..9b2760a 100644
--- a/src/guillo-gmi/components/ui/tag.js
+++ b/src/guillo-gmi/components/ui/tag.tsx
@@ -1,13 +1,19 @@
-import React from 'react'
 import { classnames } from '../../lib/helpers'
 
+interface Props {
+  name: string
+  id: string
+  onRemove?: () => void
+  size?: string
+  color?: string
+}
 export const Tag = ({
   name,
   id,
   onRemove,
   size = 'is-medium',
   color = 'is-warning',
-}) => (
+}: Props) => (
   <span className={classnames(['tag', color, size])} data-test={`tag-${id}`}>
     {name}
     {onRemove !== undefined && (
diff --git a/src/guillo-gmi/components/widgets/index.js b/src/guillo-gmi/components/widgets/index.ts
similarity index 100%
rename from src/guillo-gmi/components/widgets/index.js
rename to src/guillo-gmi/components/widgets/index.ts
diff --git a/src/guillo-gmi/components/widgets/tags.js b/src/guillo-gmi/components/widgets/tags.tsx
similarity index 80%
rename from src/guillo-gmi/components/widgets/tags.js
rename to src/guillo-gmi/components/widgets/tags.tsx
index 7b7ac74..615e9a2 100644
--- a/src/guillo-gmi/components/widgets/tags.js
+++ b/src/guillo-gmi/components/widgets/tags.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
 import { Select } from '../input/select'
 import { Tag } from '../ui/tag'
 import { Loading } from '../ui/loading'
+import { useRef, useState } from 'react'
 
 const prepareAvailable = (items, already, title) => {
   const def = { value: '', text: `Add ${title}` }
@@ -22,9 +22,9 @@ export function TagsWidget({
   onChange,
   loading,
 }) {
-  const selectRef = React.useRef()
+  const selectRef = useRef<HTMLSelectElement>()
 
-  const [result, setResult] = React.useState(items)
+  const [result, setResult] = useState(items)
   available = prepareAvailable(available || [], result, title)
 
   const remove = (value) => {
@@ -41,13 +41,18 @@ export function TagsWidget({
   }
 
   return (
-    <React.Fragment>
+    <>
       <h3 className="title is-size-6">{title}</h3>
       {loading ? <Loading style={{ marginBottom: '1.5rem' }} /> : <hr />}
       <ul>
         <div className="tags">
           {result.map((item) => (
-            <Tag name={item} onRemove={() => remove(item)} key={item} />
+            <Tag
+              id={item}
+              name={item}
+              onRemove={() => remove(item)}
+              key={item}
+            />
           ))}
         </div>
         {result.length === 0 && (
@@ -60,12 +65,14 @@ export function TagsWidget({
               ref={selectRef}
               onChange={(value) => {
                 addItem(value)
-                selectRef.current.value = ''
+                if (selectRef.current) {
+                  selectRef.current.value = ''
+                }
               }}
             />
           </li>
         )}
       </ul>
-    </React.Fragment>
+    </>
   )
 }
diff --git a/src/guillo-gmi/contexts/index.js b/src/guillo-gmi/contexts/index.tsx
similarity index 57%
rename from src/guillo-gmi/contexts/index.js
rename to src/guillo-gmi/contexts/index.tsx
index 8559682..d11d6c9 100644
--- a/src/guillo-gmi/contexts/index.js
+++ b/src/guillo-gmi/contexts/index.tsx
@@ -1,15 +1,39 @@
-import React from 'react'
+import { Dispatch, useContext } from 'react'
 import { createContext } from 'react'
+import { GuillotinaClient } from '../lib/client.js'
+import { Auth } from '../lib/auth.js'
+import { IndexSignature } from '../types/global'
+import { GuillotinaGlobalState } from '../reducers/guillotina'
 
 export const AuthContext = createContext({})
 
-export const ClientContext = createContext({})
+export const ClientContext = createContext<GuillotinaClient>(null)
 
-export const TraversalContext = createContext({})
+interface PropsTraversal {
+  url: string
+  client: GuillotinaClient
+  auth: Auth
+  state: GuillotinaGlobalState
+  dispatch: Dispatch<{ type: string; payload: IndexSignature }>
+  registry: IndexSignature
+  flash: (action: string, result: string) => void
+}
 
 class Traversal {
-  constructor({ flash, ...props }) {
-    Object.assign(this, props)
+  private dispatch
+  private state
+  public client
+  public registry
+  public auth
+  private url
+
+  constructor({ flash, ...props }: PropsTraversal) {
+    this.dispatch = props.dispatch
+    this.state = props.state
+    this.client = props.client
+    this.registry = props.registry
+    this.auth = props.auth
+    this.url = props.url
     if (typeof flash === 'function') this.flash = flash
   }
 
@@ -73,7 +97,11 @@ class Traversal {
   }
 }
 
-export function TraversalProvider({ children, ...props }) {
+export const TraversalContext = createContext<Traversal>(null)
+export function TraversalProvider({
+  children,
+  ...props
+}: PropsTraversal & { children: React.ReactNode }) {
   return (
     <TraversalContext.Provider value={new Traversal(props)}>
       {children}
@@ -82,15 +110,19 @@ export function TraversalProvider({ children, ...props }) {
 }
 
 export function useTraversal() {
-  return React.useContext(TraversalContext)
+  return useContext(TraversalContext)
 }
 
-export function ClientProvider({ children, client }) {
+interface PropsClient {
+  children: React.ReactNode
+  client: GuillotinaClient
+}
+export function ClientProvider({ children, client }: PropsClient) {
   return (
     <ClientContext.Provider value={client}>{children}</ClientContext.Provider>
   )
 }
 
 export function useGuillotinaClient() {
-  return React.useContext(ClientContext)
+  return useContext(ClientContext)
 }
diff --git a/src/guillo-gmi/forms/base.js b/src/guillo-gmi/forms/base.tsx
similarity index 85%
rename from src/guillo-gmi/forms/base.js
rename to src/guillo-gmi/forms/base.tsx
index 929ff2e..bc7b33e 100644
--- a/src/guillo-gmi/forms/base.js
+++ b/src/guillo-gmi/forms/base.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { useState } from 'react'
 import { Input } from '../components/input/input'
 import { Form } from '../components/input/form'
@@ -6,7 +5,20 @@ import { stringToSlug } from '../lib/helpers'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../locales/generic_messages'
 
-export function BaseForm({ onSubmit, actionName, title, dataTest, loading }) {
+interface Props {
+  onSubmit: (data: { title: string; id: string }) => void
+  actionName?: string
+  title?: string
+  dataTest?: string
+  loading?: boolean
+}
+export function BaseForm({
+  onSubmit,
+  actionName,
+  title,
+  dataTest,
+  loading,
+}: Props) {
   const intl = useIntl()
   const [name, setName] = useState('')
   const [id, setId] = useState('')
diff --git a/src/guillo-gmi/forms/required_fields.js b/src/guillo-gmi/forms/required_fields.tsx
similarity index 88%
rename from src/guillo-gmi/forms/required_fields.js
rename to src/guillo-gmi/forms/required_fields.tsx
index a7d0740..b58e83a 100644
--- a/src/guillo-gmi/forms/required_fields.js
+++ b/src/guillo-gmi/forms/required_fields.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { useState, useEffect } from 'react'
 import { Form } from '../components/input/form'
 import { stringToSlug } from '../lib/helpers'
@@ -6,10 +5,25 @@ import { useTraversal } from '../contexts'
 import useSetState from '../hooks/useSetState'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../locales/generic_messages'
+import { IndexSignature } from '../types/global'
 
 const ignoreFiels = []
 const extraFields = ['title']
 
+interface Props {
+  onSubmit: (data: { [key: string]: any }) => void
+  actionName?: string
+  title?: string
+  dataTest?: string
+  loading?: boolean
+  type: string
+}
+interface State {
+  data: any
+  loading: boolean
+  error: any
+  formFields: string[]
+}
 export function RequiredFieldsForm({
   loading,
   onSubmit,
@@ -17,16 +31,16 @@ export function RequiredFieldsForm({
   title,
   dataTest,
   type,
-}) {
+}: Props) {
   const intl = useIntl()
   const Ctx = useTraversal()
 
   const EditComponent = Ctx.registry.get('components', 'EditComponent')
 
-  const [formData, setFormData] = useState({})
+  const [formData, setFormData] = useState<IndexSignature>({})
   const [errors, setErrors] = useState({})
 
-  const [schema, setSchema] = useSetState({
+  const [schema, setSchema] = useSetState<State>({
     data: undefined,
     loading: false,
     error: undefined,
diff --git a/src/guillo-gmi/forms/users.js b/src/guillo-gmi/forms/users.tsx
similarity index 63%
rename from src/guillo-gmi/forms/users.js
rename to src/guillo-gmi/forms/users.tsx
index a446b14..c000ff9 100644
--- a/src/guillo-gmi/forms/users.js
+++ b/src/guillo-gmi/forms/users.tsx
@@ -1,15 +1,27 @@
-import React from 'react'
 import { FormBuilder } from '../components/input/form_builder'
 import { useIntl } from 'react-intl'
-import { genericMessages } from '../locales/generic_messages'
+import { IndexSignature } from '../types/global'
 
-export const UserForm = ({ isEdit = false, children, ...props }) => {
+interface Props {
+  children: React.ReactNode
+  onSubmit: (data: IndexSignature) => void
+  actionName?: string
+  formData?: IndexSignature
+  exclude?: string[]
+  remotes?: IndexSignature
+  submitButon?: boolean
+}
+export const UserForm = ({
+  children,
+  actionName,
+  onSubmit,
+  formData,
+  exclude,
+  remotes,
+  submitButon,
+}: Props) => {
   const intl = useIntl()
-  const attr = isEdit
-    ? {}
-    : {
-        title: intl.formatMessage(genericMessages.add_user),
-      }
+
   const schema = {
     type: 'object',
     required: ['username', 'password'],
@@ -50,8 +62,17 @@ export const UserForm = ({ isEdit = false, children, ...props }) => {
       },
     },
   }
+
   return (
-    <FormBuilder schema={schema} {...props} {...attr}>
+    <FormBuilder
+      schema={schema}
+      actionName={actionName}
+      onSubmit={onSubmit}
+      formData={formData}
+      exclude={exclude}
+      remotes={remotes}
+      submitButton={submitButon}
+    >
       {children}
     </FormBuilder>
   )
diff --git a/src/guillo-gmi/hooks/useConfig.js b/src/guillo-gmi/hooks/useConfig.tsx
similarity index 71%
rename from src/guillo-gmi/hooks/useConfig.js
rename to src/guillo-gmi/hooks/useConfig.tsx
index d773b9e..e491baa 100644
--- a/src/guillo-gmi/hooks/useConfig.js
+++ b/src/guillo-gmi/hooks/useConfig.tsx
@@ -1,6 +1,7 @@
-import React from 'react'
+import { useRef } from 'react'
+import { GuillotinaSchemaProperty } from '../types/guillotina'
 
-export const Permissions = [
+export const Permissions: string[] = [
   'guillotina.AddContent',
   'guillotina.ModifyContent',
   'guillotina.ViewContent',
@@ -17,7 +18,16 @@ export const Permissions = [
   'guillotina.swagger.View',
 ]
 
-export const Config = {
+interface IConfig {
+  DisabledTypes: string[]
+  PageSize: number
+  DelayActions: number
+  Permissions: string[]
+  SearchEngine: string
+  SizeImages?: string[]
+  fieldHaveDeleteButton: (schema: GuillotinaSchemaProperty) => boolean
+}
+export const Config: IConfig = {
   DisabledTypes: ['UserManager', 'GroupManager'],
   PageSize: 10,
   DelayActions: 200,
@@ -34,7 +44,7 @@ export const Config = {
 
 let calculated = Object.assign({}, Config)
 
-const addConfig = (additional, original) => {
+const addConfig = (additional: Partial<IConfig>, original: IConfig) => {
   const rest = Object.assign({}, original)
   Object.keys(additional).forEach((item) => {
     if (typeof Config[item] === 'object' && Array.isArray(Config[item])) {
@@ -48,18 +58,11 @@ const addConfig = (additional, original) => {
   return rest
 }
 
-export function useConfig(cfg) {
-  const ref = React.useRef()
+export function useConfig(cfg = {}) {
+  const ref = useRef<unknown>()
   if (cfg && !ref.current) {
-    console.log('cfg', cfg)
     calculated = addConfig(cfg, calculated)
     ref.current = calculated
   }
-
-  // if (cfg && !ref.current) {
-  //   ref.current = addConfig(cfg, ref.current);
-  //   calculated = ref.current
-  //   console.log("Current config", cfg)
-  // }
   return calculated
 }
diff --git a/src/guillo-gmi/hooks/useCrudContext.js b/src/guillo-gmi/hooks/useCrudContext.tsx
similarity index 93%
rename from src/guillo-gmi/hooks/useCrudContext.js
rename to src/guillo-gmi/hooks/useCrudContext.tsx
index be63ed9..83c532a 100644
--- a/src/guillo-gmi/hooks/useCrudContext.js
+++ b/src/guillo-gmi/hooks/useCrudContext.tsx
@@ -1,7 +1,14 @@
 import { useTraversal } from '../contexts'
 import useSetState from './useSetState'
 
-const initial = {
+interface State {
+  loading: boolean
+  isError: boolean
+  errorMessage: string
+  result: unknown
+  response: unknown
+}
+const initial: State = {
   loading: undefined,
   isError: false,
   errorMessage: undefined,
@@ -91,7 +98,7 @@ const get = (setState, Ctx) => async (endpoint) => {
 
 export function useCrudContext() {
   const Ctx = useTraversal()
-  const [state, setState] = useSetState(initial)
+  const [state, setState] = useSetState<State>(initial)
 
   return {
     ...state,
diff --git a/src/guillo-gmi/hooks/useLocation.tsx b/src/guillo-gmi/hooks/useLocation.tsx
index 306225d..d8cfb14 100644
--- a/src/guillo-gmi/hooks/useLocation.tsx
+++ b/src/guillo-gmi/hooks/useLocation.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState, useCallback } from 'react'
+import { IndexSignature } from '../types/global'
 
 // Mostly inspired from
 // https://github.com/molefrog/wouter
@@ -19,7 +20,7 @@ const clean = (to) => {
 
 export const useLocation = (): [
   URLSearchParams,
-  (to: { [key: string]: string }, replace?: boolean) => void,
+  (to: IndexSignature, replace?: boolean) => void,
   (param: string) => void
 ] => {
   const [path, update] = useState(currentSearchParams())
diff --git a/src/guillo-gmi/hooks/useRegistry.js b/src/guillo-gmi/hooks/useRegistry.tsx
similarity index 83%
rename from src/guillo-gmi/hooks/useRegistry.js
rename to src/guillo-gmi/hooks/useRegistry.tsx
index f5bf09b..dc35f24 100644
--- a/src/guillo-gmi/hooks/useRegistry.js
+++ b/src/guillo-gmi/hooks/useRegistry.tsx
@@ -32,7 +32,38 @@ import { Path } from '../components/path'
 import { EditComponent } from '../components/fields/editComponent'
 import { RenderFieldComponent } from '../components/fields/renderField'
 
-let registry = {
+export interface IRegistry {
+  paths: {
+    [key: string]: React.FC
+  }
+  views: {
+    [key: string]: React.FC
+  }
+  actions: {
+    [key: string]: React.FC
+  }
+  forms: {
+    [key: string]: React.FC
+  }
+  behaviors: {
+    [key: string]: React.FC
+  }
+  itemsColumn: any
+  schemas: any
+  properties: {
+    [key: string]: React.FC
+  }
+  components: {
+    [key: string]: React.FC
+  }
+  searchEngineQueryParamsFunction: {
+    [key: string]: string
+  }
+  fieldsToFilter: {
+    [key: string]: string[]
+  }
+}
+const registry: IRegistry = {
   paths: {},
   views: {
     ErrorBoundary: ErrorBoundary,
@@ -92,12 +123,12 @@ let registry = {
   },
 }
 
-const get = (key, param, fallback) => {
+const get = (key, param, fallback = undefined) => {
   if (registry[key]) return registry[key][param] || fallback
   return fallback
 }
 
-const getComponent = (context, path, fallback) => {
+const getComponent = (context, path, fallback = undefined) => {
   if (!context) return
   // console.log("Component for path", path)
   // lookup by path
@@ -122,23 +153,23 @@ const getItemsColumn = (type) => {
   return undefined
 }
 
-const getForm = (type, fallback = BaseForm) => {
+const getForm = (type: string, fallback: React.FC = BaseForm) => {
   return registry.forms[type] || fallback
 }
 
-const getAction = (type, fallback) => {
+const getAction = (type: string, fallback: React.FC = undefined) => {
   return registry.actions[type] || fallback
 }
 
-const getBehavior = (type, fallback) => {
+const getBehavior = (type: string, fallback: React.FC) => {
   return registry.behaviors[type] || fallback
 }
 
-const getProperties = (type) => {
+const getProperties = (type: string) => {
   return registry.properties[type] || {}
 }
 
-const getSchemas = (type) => {
+const getSchemas = (type: string) => {
   return registry.schemas[type] || {}
   /*
     filters: [
@@ -153,7 +184,7 @@ const getSchemas = (type) => {
   */
 }
 
-const getFieldsToFilter = (type, fallback) => {
+const getFieldsToFilter = (type: string, fallback) => {
   return registry.fieldsToFilter[type] || fallback
 }
 
@@ -163,7 +194,7 @@ export const defaultComponent = (context) => {
 
 export function useRegistry(data) {
   // if data is provided we need to merge it into actual registry
-  const ref = React.useRef()
+  const ref = React.useRef<unknown>()
   if (data && !ref.current) {
     ref.current = true
     Object.keys(data).map(
diff --git a/src/guillo-gmi/hooks/useRemoteField.tsx b/src/guillo-gmi/hooks/useRemoteField.tsx
index 8c4c694..fa9b695 100644
--- a/src/guillo-gmi/hooks/useRemoteField.tsx
+++ b/src/guillo-gmi/hooks/useRemoteField.tsx
@@ -16,8 +16,9 @@
 */
 
 import { useState } from 'react'
+import { IndexSignature } from '../types/global'
 
-export const useRemoteField = (initial) => {
+export const useRemoteField = (initial: IndexSignature) => {
   const [remotes, setRemote] = useState(initial)
 
   const updateRemote = (name) => (value) => {
diff --git a/src/guillo-gmi/hooks/useSetState.tsx b/src/guillo-gmi/hooks/useSetState.tsx
index 6e089cf..c86ed90 100644
--- a/src/guillo-gmi/hooks/useSetState.tsx
+++ b/src/guillo-gmi/hooks/useSetState.tsx
@@ -1,7 +1,9 @@
 import { useCallback, useState } from 'react'
 
-export default function useSetState(initialState) {
-  const [state, set] = useState(initialState)
+export default function useSetState<T>(
+  initialState
+): [T, (value: Partial<T>) => void] {
+  const [state, set] = useState<T>(initialState)
   const setState = useCallback(
     (patch) => {
       set((prevState) =>
diff --git a/src/guillo-gmi/lib/auth.js b/src/guillo-gmi/lib/auth.ts
similarity index 85%
rename from src/guillo-gmi/lib/auth.js
rename to src/guillo-gmi/lib/auth.ts
index 4edf8e5..d3ee416 100644
--- a/src/guillo-gmi/lib/auth.js
+++ b/src/guillo-gmi/lib/auth.ts
@@ -1,9 +1,13 @@
 import jwt_decode from 'jwt-decode'
+import { IndexSignature } from '../types/global'
 
 export class Auth {
   maxRetry = 1
   retryRefresh = 0
   events = {}
+  url: string
+  base_url: string
+  errors: string
 
   constructor(url) {
     this.url = url
@@ -31,7 +35,7 @@ export class Auth {
       })
       if (data.status === 200) {
         const credentials = await data.json()
-        this.storeAuth(credentials, username)
+        this.storeAuth(credentials)
         return true
       } else {
         this.errors = 'invalid_credentials'
@@ -64,14 +68,17 @@ export class Auth {
       return false
     }
     const [token] = this._getToken()
-    const data = jwt_decode(token)
+    const data: IndexSignature = jwt_decode(token)
     console.log(token)
     return data.id
   }
 
   storeAuth(data) {
     localStorage.setItem('auth', data.token)
-    localStorage.setItem('auth_expires', new Date(data.exp).getTime())
+    localStorage.setItem(
+      'auth_expires',
+      new Date(data.exp).getTime().toString()
+    )
   }
 
   cleanAuth() {
@@ -86,14 +93,14 @@ export class Auth {
   async refreshToken() {
     console.log('refresh!!!')
     this.retryRefresh++
-    let data = await fetch(this.getUrl('@login-renew'), {
+    const data = await fetch(this.getUrl('@login-renew'), {
       headers: this.getHeaders(),
       method: 'post',
     })
     if (data.status === 401) {
       // invalid token
       this.cleanAuth()
-      this.onLogout()
+      this.logout()
       return
     }
     const res = await data.json()
@@ -101,11 +108,11 @@ export class Auth {
     this.storeAuth(res)
     console.log('token refreshed')
     this.retryRefresh = 0
-    return data.token
+    return res.token
   }
 
   willExpire(expiration) {
-    let now = new Date().getTime()
+    const now = new Date().getTime()
     if (parseInt(expiration) * 1000 < now + 10 * 1000) {
       return true
     }
@@ -113,7 +120,7 @@ export class Auth {
   }
 
   isExpired(expiration) {
-    let now = new Date().getTime()
+    const now = new Date().getTime()
     if (parseInt(expiration) * 1000 > now) {
       return false
     }
diff --git a/src/guillo-gmi/lib/client.js b/src/guillo-gmi/lib/client.tsx
similarity index 94%
rename from src/guillo-gmi/lib/client.js
rename to src/guillo-gmi/lib/client.tsx
index 9cc947e..72bcd6e 100644
--- a/src/guillo-gmi/lib/client.js
+++ b/src/guillo-gmi/lib/client.tsx
@@ -4,13 +4,14 @@ import { Icon } from '../components/ui'
 import { toQueryString } from './helpers'
 import { RestClient } from './rest'
 import { parser } from './search'
-import { useLocation } from '../hooks/useLocation'
 
-let cacheTypes = {}
-let cacheSchemas = {}
+const cacheTypes = {}
+const cacheSchemas = {}
 
 export class GuillotinaClient {
-  constructor(rest, pathContainsContainer) {
+  rest: RestClient
+  pathContainsContainer: boolean
+  constructor(rest: RestClient, pathContainsContainer: boolean) {
     this.rest = rest
     this.pathContainsContainer = pathContainsContainer
   }
@@ -20,7 +21,7 @@ export class GuillotinaClient {
       if (path.startsWith('/')) {
         path = path.substring(1)
       }
-      let parts = path.split('/')
+      const parts = path.split('/')
       return `${parts[0]}/${parts[1]}/`
     }
     return ''
@@ -180,10 +181,10 @@ export class GuillotinaClient {
       path = this.getContainerFromPath(path)
     }
 
-    let query = prepare ? toQueryString(params) : params
+    const query = prepare ? toQueryString(params) : params
     const url = `${path}@search?${query}`
-    let res = await this.rest.get(url, fetchData)
-    let data = await res.json()
+    const res = await this.rest.get(url, fetchData)
+    const data = await res.json()
     return this.applyCompat(data)
   }
 
@@ -203,7 +204,7 @@ export class GuillotinaClient {
   }
 
   cleanPath(path) {
-    let url = path.split('/').slice(3)
+    const url = path.split('/').slice(3)
     return `${url.join('/')}`
   }
 
@@ -245,7 +246,7 @@ export class GuillotinaClient {
 
   async getTypeSchema(path, name) {
     if (!cacheSchemas[name]) {
-      let url = this.getContainerFromPath(path)
+      const url = this.getContainerFromPath(path)
       // todo: handle db case (only addable containers)
       const res = await this.rest.get(`${url}@types/${name}`)
       cacheSchemas[name] = await res.json()
@@ -344,6 +345,7 @@ export const lightFileReader = async (file) => {
 const extractPermissions = (data) => {
   let result = []
   if (typeof data !== 'object') {
+    // do nothing
   } else if (!Array.isArray(data) && data.permission) {
     result = result.concat([data.permission])
   } else if (!Array.isArray(data)) {
diff --git a/src/guillo-gmi/reducers/guillotina.js b/src/guillo-gmi/reducers/guillotina.ts
similarity index 65%
rename from src/guillo-gmi/reducers/guillotina.js
rename to src/guillo-gmi/reducers/guillotina.ts
index 32504cb..0a80118 100644
--- a/src/guillo-gmi/reducers/guillotina.js
+++ b/src/guillo-gmi/reducers/guillotina.ts
@@ -1,4 +1,25 @@
-export const initialState = {
+import { ItemModel } from '../models'
+import { IndexSignature } from '../types/global'
+import { GuillotinaCommonObject } from '../types/guillotina'
+
+export interface GuillotinaGlobalState {
+  path: string
+  loading: boolean
+  context: GuillotinaCommonObject
+  flash: {
+    message: string
+    type: string
+  }
+  action: {
+    action: string
+    params: IndexSignature
+  }
+  permissions: IndexSignature
+  errorStatus: number
+  registry: IndexSignature
+  refresh: number
+}
+export const initialState: GuillotinaGlobalState = {
   path: '',
   loading: false,
   context: undefined,
@@ -62,3 +83,14 @@ export function guillotinaReducer(state, action) {
       return state
   }
 }
+
+export interface IColumn {
+  key: string
+  label: string
+  isSortable: string
+  child: (
+    model: ItemModel,
+    link: () => void,
+    search: string
+  ) => React.ReactElement
+}
diff --git a/src/guillo-gmi/types/global.ts b/src/guillo-gmi/types/global.ts
new file mode 100644
index 0000000..1a35355
--- /dev/null
+++ b/src/guillo-gmi/types/global.ts
@@ -0,0 +1,7 @@
+export type FileWithFileName = {
+  filename: string
+} & File
+
+export interface IndexSignature {
+  [key: string]: any
+}
diff --git a/src/guillo-gmi/types/guillotina.ts b/src/guillo-gmi/types/guillotina.ts
new file mode 100644
index 0000000..98e9019
--- /dev/null
+++ b/src/guillo-gmi/types/guillotina.ts
@@ -0,0 +1,79 @@
+type ItemsPropertyObject = {
+  '@id': string
+  '@name': string
+  '@type': string
+  '@uid': string
+}
+
+export interface GuillotinaSchema {
+  title: string
+  $schema: string
+  type: string
+  required: string[]
+  definitions: Definitions
+  properties: GuillotinaSchemaProperties
+}
+
+export interface Definitions {
+  [key: string]: {
+    type: string
+    properties: GuillotinaSchemaProperties
+    required: string[]
+    title: string
+    description: string
+  }
+}
+
+export interface Items {
+  type: string
+  widget?: string
+  properties?: GuillotinaSchemaProperties
+  vocabulary?: string[]
+  vocabularyName?: string
+}
+export interface GuillotinaSchemaProperty {
+  type: string
+  title: string
+  widget?: string
+  readonly?: boolean
+  description?: string
+  vocabularyName?: string
+  vocabulary?: string[]
+  items?: Items
+  properties: GuillotinaSchemaProperties
+  additionalProperties: GuillotinaSchemaProperties
+  typeNameQuery?: string
+  labelProperty?: string
+}
+export interface GuillotinaSchemaProperties {
+  [key: string]: GuillotinaSchemaProperty | { $ref: string }[]
+}
+
+export type GuillotinaCommonObject = {
+  creation_date: Date
+  modification_date: string
+  title: string
+  type_name: string
+  uuid: string
+  'guillotina.behaviors.attachment.IMultiAttachment'?: {
+    files: {
+      [key: string]: GuillotinaFile
+    }
+  }
+} & ItemsPropertyObject
+
+export type GuillotinaFile = {
+  filename: string
+  content_type: string
+  extension: string
+  size: number
+  md5: string
+}
+
+export type SearchItem = {
+  id: string
+  parent_uuid: string
+  path: string
+  tid: string
+  uuid: string
+} & ItemsPropertyObject
diff --git a/src/guillo-gmi/views/application.js b/src/guillo-gmi/views/application.tsx
similarity index 84%
rename from src/guillo-gmi/views/application.js
rename to src/guillo-gmi/views/application.tsx
index 8e1a599..bb83fd2 100644
--- a/src/guillo-gmi/views/application.js
+++ b/src/guillo-gmi/views/application.tsx
@@ -10,10 +10,12 @@ import { Form } from '../components/input/form'
 import { Input } from '../components/input/input'
 import { defineMessages, useIntl } from 'react-intl'
 import { genericMessages } from '../locales/generic_messages'
+import { ItemModel } from '../models'
 
-export function ApplicationCtx(props) {
+export function ApplicationCtx() {
   const intl = useIntl()
-  const { databases } = props.state.context
+  const context = useTraversal()
+  const { databases } = context.state.context
   return (
     <React.Fragment>
       <h3>
@@ -26,7 +28,7 @@ export function ApplicationCtx(props) {
         <ItemTitle title="Objects" />
         {databases.map((db) => (
           <Item
-            item={{ id: db, path: `/${db}/` }}
+            item={new ItemModel({ id: db, path: `/${db}/` })}
             key={db}
             icon={'fas fa-database'}
           />
@@ -36,9 +38,10 @@ export function ApplicationCtx(props) {
   )
 }
 
-export function DatabaseCtx({ state }) {
-  const { containers } = state.context
-  const { path } = state
+export function DatabaseCtx() {
+  const context = useTraversal()
+  const { containers } = context.state.context
+  const { path } = context.state
   return (
     <React.Fragment>
       <div className="container">
@@ -47,7 +50,7 @@ export function DatabaseCtx({ state }) {
           <tbody>
             {containers.map((db) => (
               <Item
-                item={{ id: db, path: `${path}${db}/` }}
+                item={new ItemModel({ id: db, path: `${path}${db}/` })}
                 key={db}
                 icon={'fas fa-archive'}
               />
@@ -59,13 +62,13 @@ export function DatabaseCtx({ state }) {
   )
 }
 
-export function CreateContainer(props) {
+export function CreateContainer() {
   const intl = useIntl()
   const [isActive, setActive] = useState(false)
 
   return (
     <React.Fragment>
-      <ModalAddContainer isActive={isActive} setActive={setActive} {...props} />
+      <ModalAddContainer isActive={isActive} setActive={setActive} />
       <button
         className="button is-warning is-pulled-right"
         onClick={() => setActive(true)}
@@ -90,7 +93,11 @@ export const messages = defineMessages({
   },
 })
 
-function ModalAddContainer({ isActive, setActive }) {
+interface ModalAddContainerProps {
+  isActive: boolean
+  setActive: (value: boolean) => void
+}
+function ModalAddContainer({ isActive, setActive }: ModalAddContainerProps) {
   const intl = useIntl()
   const Ctx = useTraversal()
   const [isLoading, setLoading] = useState(false)
diff --git a/src/guillo-gmi/views/container.js b/src/guillo-gmi/views/container.tsx
similarity index 91%
rename from src/guillo-gmi/views/container.js
rename to src/guillo-gmi/views/container.tsx
index 29283af..5aeabe5 100644
--- a/src/guillo-gmi/views/container.js
+++ b/src/guillo-gmi/views/container.tsx
@@ -26,15 +26,14 @@ const tabsPermissions = {
   Permissions: 'guillotina.SeePermissions',
 }
 
-export function ContainerCtx(props) {
+export function ContainerCtx() {
   const ctx = useTraversal()
   const calculated = ctx.filterTabs(tabs, tabsPermissions)
   return (
     <TabsPanel
       tabs={calculated}
       currentTab="Items"
-      rightToolbar={<ContextToolbar {...props} />}
-      {...props}
+      rightToolbar={<ContextToolbar />}
     />
   )
 }
diff --git a/tsconfig.json b/tsconfig.json
index cb04510..e72bcbd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,9 @@
     "strict": false,
     "removeComments": true,
     "allowJs": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "allowSyntheticDefaultImports":true,
+    "resolveJsonModule":true
   },
   "include": [
     "./src/guillo-gmi"
diff --git a/yarn.lock b/yarn.lock
index ff30124..5479e26 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1326,6 +1326,14 @@
     "@formatjs/intl-localematcher" "0.5.2"
     tslib "^2.4.0"
 
+"@formatjs/ecma402-abstract@1.18.2":
+  version "1.18.2"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.18.2.tgz#bf103712a406874eb1e387858d5be2371ab3aa14"
+  integrity sha512-+QoPW4csYALsQIl8GbN14igZzDbuwzcpWrku9nyMXlaqAlwRBgl5V+p0vWMGFqHOw37czNXaP/lEk4wbLgcmtA==
+  dependencies:
+    "@formatjs/intl-localematcher" "0.5.4"
+    tslib "^2.4.0"
+
 "@formatjs/fast-memoize@2.2.0":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz#33bd616d2e486c3e8ef4e68c99648c196887802b"
@@ -1342,6 +1350,15 @@
     "@formatjs/icu-skeleton-parser" "1.7.0"
     tslib "^2.4.0"
 
+"@formatjs/icu-messageformat-parser@2.7.5":
+  version "2.7.5"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.5.tgz#6c12c08544eafef874df13b30729daf7b4dbd089"
+  integrity sha512-zCB53HdGDibh6/2ISEN3TGsFQruQ6gGKMFV94qHNyVrs0tNO6ncKhV0vq0n3Ydz8ipIQ2GaYAvfCoimNOVvKqA==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.18.2"
+    "@formatjs/icu-skeleton-parser" "1.7.2"
+    tslib "^2.4.0"
+
 "@formatjs/icu-skeleton-parser@1.7.0":
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.7.0.tgz#796938d6d0ba8fc75bb9edee038d1350bfee32cb"
@@ -1350,6 +1367,14 @@
     "@formatjs/ecma402-abstract" "1.18.0"
     tslib "^2.4.0"
 
+"@formatjs/icu-skeleton-parser@1.7.2":
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.7.2.tgz#ffbdd535c33249635ad0e54a34813194287a1567"
+  integrity sha512-nlIXVv280bjGW3ail5Np1+xgGKBnMhwQQIivgbk9xX0af8ESQO+y2VW9TOY7mCrs3WH786uVpZlLimXAlXH7SA==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.18.2"
+    tslib "^2.4.0"
+
 "@formatjs/intl-displaynames@6.6.4":
   version "6.6.4"
   resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-6.6.4.tgz#dd9ca9bb2d1f4b140cc8814667bc830802621674"
@@ -1375,6 +1400,13 @@
   dependencies:
     tslib "^2.4.0"
 
+"@formatjs/intl-localematcher@0.5.4":
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.5.4.tgz#caa71f2e40d93e37d58be35cfffe57865f2b366f"
+  integrity sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==
+  dependencies:
+    tslib "^2.4.0"
+
 "@formatjs/intl@2.9.9":
   version "2.9.9"
   resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-2.9.9.tgz#866629b565e20dd7490f9e77ee41a00748913e8f"
@@ -1401,6 +1433,19 @@
     tslib "^2.4.0"
     typescript "5"
 
+"@formatjs/ts-transformer@^3.13.11":
+  version "3.13.11"
+  resolved "https://registry.yarnpkg.com/@formatjs/ts-transformer/-/ts-transformer-3.13.11.tgz#c3603ff59c4b3e54535a26b8e204f6ccdacd5a91"
+  integrity sha512-qOAGGUQC7GSMMaAFy2MAlC8REM58lUNi8W+VlRb57cDUpge46x2hP33Mzu5N1xmm6OCqDQTRXws5jEOcRI3C8Q==
+  dependencies:
+    "@formatjs/icu-messageformat-parser" "2.7.5"
+    "@types/json-stable-stringify" "^1.0.32"
+    "@types/node" "14 || 16 || 17"
+    chalk "^4.0.0"
+    json-stable-stringify "^1.0.1"
+    tslib "^2.4.0"
+    typescript "5"
+
 "@humanwhocodes/config-array@^0.11.13":
   version "0.11.14"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"

From 072b764c65d198b748c541aa199ea217857e6f4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roger=20Boixader=20G=C3=BCell?= <rboixaderg@gmail.com>
Date: Sat, 27 Jan 2024 17:58:43 +0100
Subject: [PATCH 06/20] wip: more components

---
 .../components/{index.js => index.ts}         |  0
 .../components/input/search_input.tsx         | 23 ++++++++-----
 .../components/input/search_input_list.tsx    | 18 +++++++----
 .../components/panel/properties.tsx           | 19 +++++++++--
 src/guillo-gmi/components/widgets/tags.tsx    | 14 ++++++--
 src/guillo-gmi/contexts/index.tsx             |  9 ++----
 src/guillo-gmi/forms/users.tsx                |  6 ++--
 src/guillo-gmi/hooks/useConfig.tsx            |  3 ++
 src/guillo-gmi/hooks/useCrudContext.tsx       | 32 +++++++++++++------
 src/guillo-gmi/hooks/useRemoteField.tsx       |  6 ++--
 .../{useVocabulary.js => useVocabulary.tsx}   | 12 +++++--
 src/guillo-gmi/{index.js => index.ts}         |  0
 src/guillo-gmi/lib/client.tsx                 | 15 ++++-----
 src/guillo-gmi/lib/{helpers.js => helpers.ts} |  4 +--
 src/guillo-gmi/lib/{rest.js => rest.ts}       | 14 +++++---
 src/guillo-gmi/lib/{search.js => search.ts}   |  8 ++---
 src/guillo-gmi/lib/{utils.js => utils.ts}     | 11 +++++--
 .../lib/{validators.js => validators.ts}      |  0
 src/guillo-gmi/models/{index.js => index.ts}  |  7 ++--
 .../models/{sharing.js => sharing.ts}         | 14 ++++++--
 src/guillo-gmi/types/global.ts                |  4 +--
 src/guillo-gmi/types/guillotina.ts            | 31 ++++++++++++++++++
 src/guillo-gmi/views/{base.js => base.tsx}    |  6 ++--
 .../views/{folder.js => folder.tsx}           |  0
 .../views/{groups.js => groups.tsx}           | 13 ++++----
 src/guillo-gmi/views/{item.js => item.tsx}    |  0
 src/guillo-gmi/views/{users.js => users.tsx}  | 19 ++++++-----
 27 files changed, 199 insertions(+), 89 deletions(-)
 rename src/guillo-gmi/components/{index.js => index.ts} (100%)
 rename src/guillo-gmi/hooks/{useVocabulary.js => useVocabulary.tsx} (70%)
 rename src/guillo-gmi/{index.js => index.ts} (100%)
 rename src/guillo-gmi/lib/{helpers.js => helpers.ts} (96%)
 rename src/guillo-gmi/lib/{rest.js => rest.ts} (86%)
 rename src/guillo-gmi/lib/{search.js => search.ts} (82%)
 rename src/guillo-gmi/lib/{utils.js => utils.ts} (81%)
 rename src/guillo-gmi/lib/{validators.js => validators.ts} (100%)
 rename src/guillo-gmi/models/{index.js => index.ts} (94%)
 rename src/guillo-gmi/models/{sharing.js => sharing.ts} (70%)
 rename src/guillo-gmi/views/{base.js => base.tsx} (77%)
 rename src/guillo-gmi/views/{folder.js => folder.tsx} (100%)
 rename src/guillo-gmi/views/{groups.js => groups.tsx} (97%)
 rename src/guillo-gmi/views/{item.js => item.tsx} (100%)
 rename src/guillo-gmi/views/{users.js => users.tsx} (96%)

diff --git a/src/guillo-gmi/components/index.js b/src/guillo-gmi/components/index.ts
similarity index 100%
rename from src/guillo-gmi/components/index.js
rename to src/guillo-gmi/components/index.ts
diff --git a/src/guillo-gmi/components/input/search_input.tsx b/src/guillo-gmi/components/input/search_input.tsx
index 5b77b72..6aa2ad6 100644
--- a/src/guillo-gmi/components/input/search_input.tsx
+++ b/src/guillo-gmi/components/input/search_input.tsx
@@ -12,6 +12,7 @@ import { genericMessages } from '../../locales/generic_messages'
 import useClickAway from '../../hooks/useClickAway'
 import { get } from '../../lib/utils'
 import { SearchItem } from '../../types/guillotina'
+import { Traversal } from '../../contexts'
 
 function debounce(func, wait) {
   let timeout
@@ -27,7 +28,13 @@ function debounce(func, wait) {
   }
 }
 
-const initialState = {
+interface State {
+  page: number
+  items: SearchItem[]
+  loading: boolean
+  items_total: number
+}
+const initialState: State = {
   page: 0,
   items: undefined,
   loading: false,
@@ -35,14 +42,14 @@ const initialState = {
 }
 
 interface Props {
-  onChange?: (value: SearchItem) => void
+  onChange?: (value: string) => void
   error?: string
   errorZoneClassName?: string
-  traversal?: any
+  traversal?: Traversal
   path?: string
   qs?: string[][]
   queryCondition?: string
-  value: SearchItem
+  value?: string
   btnClass?: string
   dataTestWrapper?: string
   dataTestSearchInput?: string
@@ -70,13 +77,13 @@ export const SearchInput = ({
   labelProperty = 'id',
 }: Props) => {
   const intl = useIntl()
-  const [options, setOptions] = useSetState(initialState)
+  const [options, setOptions] = useSetState<State>(initialState)
   const [isOpen, setIsOpen] = useState(false)
   const [searchTerm, setSearchTerm] = useState('')
   const inputRef = useRef(null)
   const wrapperRef = useRef(null)
   const { PageSize, SearchEngine } = useConfig()
-  const [valueLabel, setValueLabel] = useState(undefined)
+  const [valueLabel, setValueLabel] = useState<Partial<SearchItem>>(undefined)
   const [uid] = useState(generateUID('search_input'))
 
   useClickAway(wrapperRef, () => {
@@ -103,7 +110,7 @@ export const SearchInput = ({
 
   const inicializeLabels = async () => {
     if (labelProperty !== 'id' && value) {
-      let searchTermQs = []
+      let searchTermQs = ''
       const searchTermParsed = [`id`, value]
       const { get: getSearch } = traversal.registry
       const fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine)
@@ -146,7 +153,7 @@ export const SearchInput = ({
 
   const handleSearch = async (page = 0, concat = false, value = '') => {
     setOptions({ loading: true })
-    let searchTermQs = []
+    let searchTermQs = ''
     let searchTermParsed = []
     if (value !== '') {
       searchTermParsed = parser(`${queryCondition}=${value}`)
diff --git a/src/guillo-gmi/components/input/search_input_list.tsx b/src/guillo-gmi/components/input/search_input_list.tsx
index 90df23a..efe5c5f 100644
--- a/src/guillo-gmi/components/input/search_input_list.tsx
+++ b/src/guillo-gmi/components/input/search_input_list.tsx
@@ -29,7 +29,13 @@ function debounce(func, wait) {
   }
 }
 
-const initialState = {
+interface State {
+  page: number
+  items: SearchItem[]
+  loading: boolean
+  items_total: number
+}
+const initialState: State = {
   page: 0,
   items: undefined,
   loading: false,
@@ -37,14 +43,14 @@ const initialState = {
 }
 
 interface Props {
-  onChange: (value: SearchItem[]) => void
+  onChange: (value: string[]) => void
   error?: string
   errorZoneClassName?: string
   traversal?: any
   path?: string
   qs?: string[]
   queryCondition?: string
-  value: SearchItem[]
+  value: string[]
   btnClass?: string
   dataTestWrapper?: string
   dataTestSearchInput?: string
@@ -72,7 +78,7 @@ export const SearchInputList = ({
   labelProperty = 'id',
 }: Props) => {
   const intl = useIntl()
-  const [options, setOptions] = useSetState(initialState)
+  const [options, setOptions] = useSetState<State>(initialState)
   const [valuesLabel, setValuesLabels] = useState(undefined)
   const [isOpen, setIsOpen] = useState(false)
   const [searchTerm, setSearchTerm] = useState('')
@@ -107,7 +113,7 @@ export const SearchInputList = ({
 
   const handleSearch = async (page = 0, concat = false, value = '') => {
     setOptions({ loading: true })
-    let searchTermQs = []
+    let searchTermQs = ''
     let searchTermParsed = []
     if (value !== '') {
       searchTermParsed = parser(`${queryCondition}=${value}`)
@@ -161,7 +167,7 @@ export const SearchInputList = ({
   const inicializeLabels = async () => {
     if (labelProperty !== 'id' && value.length > 0) {
       setIsLoadingData(true)
-      let searchTermQs = []
+      let searchTermQs = ''
       const searchTermParsed = ['__or', `id=${value.join('%26id=')}`]
       const { get: getSearch } = traversal.registry
       const fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine)
diff --git a/src/guillo-gmi/components/panel/properties.tsx b/src/guillo-gmi/components/panel/properties.tsx
index a2361f4..e218f0b 100644
--- a/src/guillo-gmi/components/panel/properties.tsx
+++ b/src/guillo-gmi/components/panel/properties.tsx
@@ -11,6 +11,10 @@ import { useTraversal } from '../../contexts'
 import { get } from '../../lib/utils'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
+import {
+  GuillotinaSchema,
+  GuillotinaSchemaProperty,
+} from '../../types/guillotina'
 
 const _showProperties = ['@id', '@name', '@uid']
 const _ignoreFields = [
@@ -29,13 +33,19 @@ const _ignoreFields = [
   'title',
 ]
 
+interface State {
+  data: GuillotinaSchema
+  loading: boolean
+  error: string
+}
+
 export function PanelProperties() {
   const intl = useIntl()
   const Ctx = useTraversal()
   const modifyContent = Ctx.hasPerm('guillotina.ModifyContent')
   const cfg = useConfig()
 
-  const [schema, setSchema] = useSetState({
+  const [schema, setSchema] = useSetState<State>({
     data: undefined,
     loading: false,
     error: undefined,
@@ -55,7 +65,10 @@ export function PanelProperties() {
 
   const properties = Object.keys(schema?.data?.properties || [])
     .filter((key) => !ignoreFields.includes(key))
-    .map((key) => ({ key, value: schema.data.properties[key] }))
+    .map((key) => ({
+      key,
+      value: schema.data.properties[key] as GuillotinaSchemaProperty,
+    }))
 
   useEffect(() => {
     ;(async () => {
@@ -139,7 +152,7 @@ export function PanelProperties() {
                             value={Ctx.context[key]}
                             schema={value}
                             modifyContent={modifyContent}
-                            required={get(schema.data, 'required', []).includes(
+                            required={(schema.data?.required ?? []).includes(
                               key
                             )}
                           />
diff --git a/src/guillo-gmi/components/widgets/tags.tsx b/src/guillo-gmi/components/widgets/tags.tsx
index 615e9a2..8cc78c3 100644
--- a/src/guillo-gmi/components/widgets/tags.tsx
+++ b/src/guillo-gmi/components/widgets/tags.tsx
@@ -14,6 +14,14 @@ const prepareAvailable = (items, already, title) => {
   return [def].concat(items).filter((item) => !already.includes(item.value))
 }
 
+interface Props {
+  items: string[]
+  available?: string[]
+  title: string
+  noData: string
+  onChange: (items: string[]) => void
+  loading?: boolean
+}
 export function TagsWidget({
   items,
   available,
@@ -21,11 +29,11 @@ export function TagsWidget({
   noData,
   onChange,
   loading,
-}) {
+}: Props) {
   const selectRef = useRef<HTMLSelectElement>()
 
   const [result, setResult] = useState(items)
-  available = prepareAvailable(available || [], result, title)
+  const availableData = prepareAvailable(available || [], result, title)
 
   const remove = (value) => {
     const items = result.filter((item) => item !== value)
@@ -61,7 +69,7 @@ export function TagsWidget({
         {available.length > 1 && (
           <li className="widget-list-add select is-small">
             <Select
-              options={available}
+              options={availableData}
               ref={selectRef}
               onChange={(value) => {
                 addItem(value)
diff --git a/src/guillo-gmi/contexts/index.tsx b/src/guillo-gmi/contexts/index.tsx
index d11d6c9..eed7cbd 100644
--- a/src/guillo-gmi/contexts/index.tsx
+++ b/src/guillo-gmi/contexts/index.tsx
@@ -10,7 +10,6 @@ export const AuthContext = createContext({})
 export const ClientContext = createContext<GuillotinaClient>(null)
 
 interface PropsTraversal {
-  url: string
   client: GuillotinaClient
   auth: Auth
   state: GuillotinaGlobalState
@@ -19,13 +18,12 @@ interface PropsTraversal {
   flash: (action: string, result: string) => void
 }
 
-class Traversal {
+export class Traversal {
   private dispatch
-  private state
+  public state
   public client
   public registry
   public auth
-  private url
 
   constructor({ flash, ...props }: PropsTraversal) {
     this.dispatch = props.dispatch
@@ -33,7 +31,6 @@ class Traversal {
     this.client = props.client
     this.registry = props.registry
     this.auth = props.auth
-    this.url = props.url
     if (typeof flash === 'function') this.flash = flash
   }
 
@@ -71,7 +68,7 @@ class Traversal {
     this.dispatch({ type: 'CLEAR_FLASH' })
   }
 
-  doAction(action, params) {
+  doAction(action, params = {}) {
     this.dispatch({ type: 'SET_ACTION', payload: { action, params } })
   }
 
diff --git a/src/guillo-gmi/forms/users.tsx b/src/guillo-gmi/forms/users.tsx
index c000ff9..78a3c3f 100644
--- a/src/guillo-gmi/forms/users.tsx
+++ b/src/guillo-gmi/forms/users.tsx
@@ -9,7 +9,7 @@ interface Props {
   formData?: IndexSignature
   exclude?: string[]
   remotes?: IndexSignature
-  submitButon?: boolean
+  submitButton?: boolean
 }
 export const UserForm = ({
   children,
@@ -18,7 +18,7 @@ export const UserForm = ({
   formData,
   exclude,
   remotes,
-  submitButon,
+  submitButton,
 }: Props) => {
   const intl = useIntl()
 
@@ -71,7 +71,7 @@ export const UserForm = ({
       formData={formData}
       exclude={exclude}
       remotes={remotes}
-      submitButton={submitButon}
+      submitButton={submitButton}
     >
       {children}
     </FormBuilder>
diff --git a/src/guillo-gmi/hooks/useConfig.tsx b/src/guillo-gmi/hooks/useConfig.tsx
index e491baa..61bd8bd 100644
--- a/src/guillo-gmi/hooks/useConfig.tsx
+++ b/src/guillo-gmi/hooks/useConfig.tsx
@@ -25,6 +25,9 @@ interface IConfig {
   Permissions: string[]
   SearchEngine: string
   SizeImages?: string[]
+  icons?: string[]
+  properties_default?: string[]
+  properties_ignore_fields?: string[]
   fieldHaveDeleteButton: (schema: GuillotinaSchemaProperty) => boolean
 }
 export const Config: IConfig = {
diff --git a/src/guillo-gmi/hooks/useCrudContext.tsx b/src/guillo-gmi/hooks/useCrudContext.tsx
index 83c532a..821dccb 100644
--- a/src/guillo-gmi/hooks/useCrudContext.tsx
+++ b/src/guillo-gmi/hooks/useCrudContext.tsx
@@ -2,11 +2,11 @@ import { useTraversal } from '../contexts'
 import useSetState from './useSetState'
 
 interface State {
-  loading: boolean
-  isError: boolean
-  errorMessage: string
-  result: unknown
-  response: unknown
+  loading?: boolean
+  isError?: boolean
+  errorMessage?: string
+  result?: unknown
+  response?: unknown
 }
 const initial: State = {
   loading: undefined,
@@ -42,9 +42,13 @@ const processResponse = async (res, ready_body = true) => {
     }
 }
 
-const patch = (setState, Ctx) => async (data, endpoint, body = false) => {
+const patch = (setState, Ctx) => async (
+  data,
+  endpoint = undefined,
+  body = false
+): Promise<State> => {
   setState({ loading: true })
-  let newState = {}
+  let newState: State = {}
   try {
     const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path
     const res = await Ctx.client.patch(path, data)
@@ -57,7 +61,11 @@ const patch = (setState, Ctx) => async (data, endpoint, body = false) => {
   return newState
 }
 
-const del = (setState, Ctx) => async (data, endpoint, body = false) => {
+const del = (setState, Ctx) => async (
+  data,
+  endpoint = undefined,
+  body = false
+) => {
   setState({ loading: true })
   let newState = {}
   try {
@@ -72,7 +80,11 @@ const del = (setState, Ctx) => async (data, endpoint, body = false) => {
   return newState
 }
 
-const post = (setState, Ctx) => async (data, endpoint, body = true) => {
+const post = (setState, Ctx) => async (
+  data,
+  endpoint = undefined,
+  body = true
+) => {
   setState({ loading: true })
   let newState = {}
   try {
@@ -87,7 +99,7 @@ const post = (setState, Ctx) => async (data, endpoint, body = true) => {
   return newState
 }
 
-const get = (setState, Ctx) => async (endpoint) => {
+const get = (setState, Ctx) => async (endpoint = undefined) => {
   setState({ loading: true })
   const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path
   const req = await Ctx.client.get(path)
diff --git a/src/guillo-gmi/hooks/useRemoteField.tsx b/src/guillo-gmi/hooks/useRemoteField.tsx
index fa9b695..12065e6 100644
--- a/src/guillo-gmi/hooks/useRemoteField.tsx
+++ b/src/guillo-gmi/hooks/useRemoteField.tsx
@@ -18,10 +18,12 @@
 import { useState } from 'react'
 import { IndexSignature } from '../types/global'
 
-export const useRemoteField = (initial: IndexSignature) => {
+export const useRemoteField = (
+  initial: IndexSignature<string[]>
+): [IndexSignature<string[]>, (name: string) => (value: string[]) => void] => {
   const [remotes, setRemote] = useState(initial)
 
-  const updateRemote = (name) => (value) => {
+  const updateRemote = (name: string) => (value: string[]) => {
     setRemote({
       ...remotes,
       [name]: value,
diff --git a/src/guillo-gmi/hooks/useVocabulary.js b/src/guillo-gmi/hooks/useVocabulary.tsx
similarity index 70%
rename from src/guillo-gmi/hooks/useVocabulary.js
rename to src/guillo-gmi/hooks/useVocabulary.tsx
index 576507d..968424c 100644
--- a/src/guillo-gmi/hooks/useVocabulary.js
+++ b/src/guillo-gmi/hooks/useVocabulary.tsx
@@ -1,11 +1,17 @@
 import { useTraversal } from '../contexts'
+import { GuillotinaVocabulary } from '../types/guillotina'
 import useSetState from './useSetState'
 import { useEffect } from 'react'
 
-export function useVocabulary(vocabularyName, path) {
+interface State {
+  data: GuillotinaVocabulary
+  loading: boolean
+  error: any
+}
+export function useVocabulary(vocabularyName: string, path: string) {
   const traversal = useTraversal()
 
-  const [vocabulary, setVocabulary] = useSetState({
+  const [vocabulary, setVocabulary] = useSetState<State>({
     data: undefined,
     loading: false,
     error: undefined,
@@ -29,7 +35,7 @@ export function useVocabulary(vocabularyName, path) {
           const dataJson = await data.json()
           setVocabulary({ loading: false, data: dataJson })
         } catch (err) {
-          setVocabulary({ loading: false, error: err, data: {} })
+          setVocabulary({ loading: false, error: err, data: undefined })
         }
       }
     })()
diff --git a/src/guillo-gmi/index.js b/src/guillo-gmi/index.ts
similarity index 100%
rename from src/guillo-gmi/index.js
rename to src/guillo-gmi/index.ts
diff --git a/src/guillo-gmi/lib/client.tsx b/src/guillo-gmi/lib/client.tsx
index 72bcd6e..7bd47b7 100644
--- a/src/guillo-gmi/lib/client.tsx
+++ b/src/guillo-gmi/lib/client.tsx
@@ -46,11 +46,11 @@ export class GuillotinaClient {
     }
   }
 
-  async get(path, fetchData) {
+  async get(path) {
     if (path.startsWith('/')) {
       path = path.slice(1)
     }
-    return await this.rest.get(path, fetchData)
+    return await this.rest.get(path)
   }
 
   getQueryParamsPostresql({ start = 0, pageSize = 10, withDepth = true }) {
@@ -167,11 +167,10 @@ export class GuillotinaClient {
   }
 
   async search(
-    path,
-    params,
+    path: string,
+    params: string | string[][],
     container = false,
-    prepare = true,
-    fetchData = {}
+    prepare = true
   ) {
     if (path.startsWith('/')) {
       path = path.slice(1)
@@ -181,9 +180,9 @@ export class GuillotinaClient {
       path = this.getContainerFromPath(path)
     }
 
-    const query = prepare ? toQueryString(params) : params
+    const query = prepare ? toQueryString(params as string[][]) : params
     const url = `${path}@search?${query}`
-    const res = await this.rest.get(url, fetchData)
+    const res = await this.rest.get(url)
     const data = await res.json()
     return this.applyCompat(data)
   }
diff --git a/src/guillo-gmi/lib/helpers.js b/src/guillo-gmi/lib/helpers.ts
similarity index 96%
rename from src/guillo-gmi/lib/helpers.js
rename to src/guillo-gmi/lib/helpers.ts
index 5209656..a587258 100644
--- a/src/guillo-gmi/lib/helpers.js
+++ b/src/guillo-gmi/lib/helpers.ts
@@ -10,7 +10,7 @@ let current = 0
 
 export const generateUID = (prefix) => `${prefix || 'id'}-${current++}`
 
-export const toQueryString = (params) => {
+export const toQueryString = (params: string[][]) => {
   return Object.keys(params)
     .map((key) => {
       return encodeURIComponent(key) + '=' + encodeURIComponent(params[key])
@@ -51,7 +51,7 @@ export function stringToSlug(str) {
 export function sleep(ms) {
   return new Promise((resolve) => {
     setTimeout(function () {
-      resolve()
+      resolve(null)
     }, ms)
   })
 }
diff --git a/src/guillo-gmi/lib/rest.js b/src/guillo-gmi/lib/rest.ts
similarity index 86%
rename from src/guillo-gmi/lib/rest.js
rename to src/guillo-gmi/lib/rest.ts
index f382059..c47fb67 100644
--- a/src/guillo-gmi/lib/rest.js
+++ b/src/guillo-gmi/lib/rest.ts
@@ -1,11 +1,17 @@
+import { Auth } from './auth'
+
 export class RestClient {
-  constructor(url, container, auth) {
+  url: string
+  container: string
+  auth: Auth
+
+  constructor(url: string, container: string, auth: Auth) {
     this.auth = auth
     this.url = url
     this.container = container
   }
 
-  async request(path, data, headers) {
+  async request(path, data = undefined, headers = {}) {
     if (path.indexOf(this.url) !== -1) {
       path = path.replace(this.url, '')
     }
@@ -39,8 +45,8 @@ export class RestClient {
     })
   }
 
-  async get(path, fetchData) {
-    return await this.request(path, fetchData)
+  async get(path) {
+    return await this.request(path)
   }
 
   async put(path, data) {
diff --git a/src/guillo-gmi/lib/search.js b/src/guillo-gmi/lib/search.ts
similarity index 82%
rename from src/guillo-gmi/lib/search.js
rename to src/guillo-gmi/lib/search.ts
index 2c20214..1cdf62b 100644
--- a/src/guillo-gmi/lib/search.js
+++ b/src/guillo-gmi/lib/search.ts
@@ -2,7 +2,7 @@ const SEP = '='
 const DEFAULT_FIELD = 'title__in'
 const CLEANER = '||'
 
-export function parser(qs, defaultField = DEFAULT_FIELD) {
+export function parser(qs: string, defaultField = DEFAULT_FIELD): string[][] {
   if (qs.includes(SEP) && Array.isArray(defaultField)) {
     throw new Error('This option is not supported')
   }
@@ -23,8 +23,8 @@ export function parser(qs, defaultField = DEFAULT_FIELD) {
     qs = qs.replace(/"(\w+) (\w+)"/, `$1${CLEANER}$2`)
   }
 
-  qs = qs.split(' ')
-  return qs.map((part) => {
+  const qsSplit = qs.split(' ')
+  return qsSplit.map((part) => {
     if (part.includes(CLEANER)) {
       part = part.replace('||', ' ')
     }
@@ -37,7 +37,7 @@ export function parser(qs, defaultField = DEFAULT_FIELD) {
   })
 }
 
-export function buildQs(parsedQuery) {
+export function buildQs(parsedQuery: string[][]): string {
   return parsedQuery
     .map(
       ([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`
diff --git a/src/guillo-gmi/lib/utils.js b/src/guillo-gmi/lib/utils.ts
similarity index 81%
rename from src/guillo-gmi/lib/utils.js
rename to src/guillo-gmi/lib/utils.ts
index 786b2fe..c018303 100644
--- a/src/guillo-gmi/lib/utils.js
+++ b/src/guillo-gmi/lib/utils.ts
@@ -1,6 +1,7 @@
+import { IndexSignature } from '../types/global'
 import { stringToSlug } from './helpers'
 
-export const formatDate = (str) => {
+export const formatDate = (str: string): string => {
   const d = new Date(str)
   const minutes = d.getMinutes() < 10 ? `0${d.getMinutes()}` : d.getMinutes()
   return `${d.getDate()}/${
@@ -8,7 +9,11 @@ export const formatDate = (str) => {
   }/${d.getFullYear()} ${d.getHours()}:${minutes}`
 }
 
-export const get = (obj, path, defValue) => {
+export const get = <T>(
+  obj: IndexSignature,
+  path: string | string[],
+  defValue
+): T => {
   // If path is not defined or it has false value
   if (!path) return undefined
   // Check if path is string or array. Regex : ensure that we do not have '.' and brackets.
@@ -16,7 +21,7 @@ export const get = (obj, path, defValue) => {
   const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g)
   // Find value if exist return otherwise return undefined value;
   return (
-    pathArray.reduce((prevObj, key) => prevObj && prevObj[key], obj) || defValue
+    pathArray.reduce((prevObj, key) => prevObj && prevObj[key], obj) ?? defValue
   )
 }
 
diff --git a/src/guillo-gmi/lib/validators.js b/src/guillo-gmi/lib/validators.ts
similarity index 100%
rename from src/guillo-gmi/lib/validators.js
rename to src/guillo-gmi/lib/validators.ts
diff --git a/src/guillo-gmi/models/index.js b/src/guillo-gmi/models/index.ts
similarity index 94%
rename from src/guillo-gmi/models/index.js
rename to src/guillo-gmi/models/index.ts
index 1b34f46..5c1d27f 100644
--- a/src/guillo-gmi/models/index.js
+++ b/src/guillo-gmi/models/index.ts
@@ -4,10 +4,11 @@ import { useConfig } from '../hooks/useConfig'
 export * from './sharing'
 
 export class ItemModel {
-  constructor(item, url, path) {
+  item: any
+  url: string
+  constructor(item, url = '') {
     this.item = item
     this.url = url
-    this._path = path
   }
 
   get path() {
@@ -54,7 +55,7 @@ export class ItemModel {
   }
 
   get fullPath() {
-    return this._url + this.item.id
+    return this.url + this.item.id
   }
 
   get id() {
diff --git a/src/guillo-gmi/models/sharing.js b/src/guillo-gmi/models/sharing.ts
similarity index 70%
rename from src/guillo-gmi/models/sharing.js
rename to src/guillo-gmi/models/sharing.ts
index 42a440e..4a4929a 100644
--- a/src/guillo-gmi/models/sharing.js
+++ b/src/guillo-gmi/models/sharing.ts
@@ -1,17 +1,25 @@
-const base = {
+import {
+  GuillotinaSharing,
+  GuillotinaSharingInheritItem,
+  GuillotinaSharingMap,
+} from '../types/guillotina'
+
+const base: GuillotinaSharing = {
   local: {
     roleperm: {},
     prinperm: {},
     prinrole: {},
   },
-  inherit: {},
+  inherit: [],
 }
 
 export class Sharing {
+  local: GuillotinaSharingMap
+  inherit: GuillotinaSharingInheritItem[]
+
   constructor(element) {
     Object.assign(this, element || base)
   }
-
   get roles() {
     return Object.keys(this.local.roleperm)
   }
diff --git a/src/guillo-gmi/types/global.ts b/src/guillo-gmi/types/global.ts
index 1a35355..0765bb0 100644
--- a/src/guillo-gmi/types/global.ts
+++ b/src/guillo-gmi/types/global.ts
@@ -2,6 +2,6 @@ export type FileWithFileName = {
   filename: string
 } & File
 
-export interface IndexSignature {
-  [key: string]: any
+export interface IndexSignature<T = any> {
+  [key: string]: T
 }
diff --git a/src/guillo-gmi/types/guillotina.ts b/src/guillo-gmi/types/guillotina.ts
index 98e9019..834d884 100644
--- a/src/guillo-gmi/types/guillotina.ts
+++ b/src/guillo-gmi/types/guillotina.ts
@@ -1,3 +1,5 @@
+import { IndexSignature } from './global'
+
 type ItemsPropertyObject = {
   '@id': string
   '@name': string
@@ -77,3 +79,32 @@ export type SearchItem = {
   tid: string
   uuid: string
 } & ItemsPropertyObject
+
+export interface GuillotinaVocabulary {
+  '@id': string
+  items: {
+    title: string
+    token: string
+  }[]
+  items_total: number
+}
+
+export interface GuillotinaSharing {
+  local: GuillotinaSharingMap
+  inherit: GuillotinaSharingInheritItem[]
+}
+
+export interface GuillotinaSharingInheritItem extends GuillotinaSharingMap {
+  '@id': string
+}
+export interface GuillotinaSharingMap {
+  roleperm: {
+    [key: string]: IndexSignature<string>
+  }
+  prinperm: {
+    [key: string]: IndexSignature<string>
+  }
+  prinrole: {
+    [key: string]: IndexSignature<string>
+  }
+}
diff --git a/src/guillo-gmi/views/base.js b/src/guillo-gmi/views/base.tsx
similarity index 77%
rename from src/guillo-gmi/views/base.js
rename to src/guillo-gmi/views/base.tsx
index 4651526..9fe0801 100644
--- a/src/guillo-gmi/views/base.js
+++ b/src/guillo-gmi/views/base.tsx
@@ -1,8 +1,10 @@
-import React from 'react'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../locales/generic_messages'
 
-export function PanelNotImplemented(props) {
+interface Props {
+  title: string
+}
+export function PanelNotImplemented(props: Props) {
   const intl = useIntl()
   return (
     <div className="container">
diff --git a/src/guillo-gmi/views/folder.js b/src/guillo-gmi/views/folder.tsx
similarity index 100%
rename from src/guillo-gmi/views/folder.js
rename to src/guillo-gmi/views/folder.tsx
diff --git a/src/guillo-gmi/views/groups.js b/src/guillo-gmi/views/groups.tsx
similarity index 97%
rename from src/guillo-gmi/views/groups.js
rename to src/guillo-gmi/views/groups.tsx
index fa5f3a4..7437ecf 100644
--- a/src/guillo-gmi/views/groups.js
+++ b/src/guillo-gmi/views/groups.tsx
@@ -1,10 +1,9 @@
-import React from 'react'
 import { TabsPanel } from '../components/tabs'
 import { PanelItems } from '../components/panel/items'
 import { useTraversal } from '../contexts'
 import { useCrudContext } from '../hooks/useCrudContext'
 import { Icon } from '../components/ui/icon'
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import { useState } from 'react'
 import { Select } from '../components/input/select'
 import { SearchInput } from '../components/input/search_input'
@@ -22,7 +21,7 @@ const tabs = {
 export function GroupToolbar() {
   const intl = useIntl()
   const Ctx = useTraversal()
-  const ref = React.useRef(null)
+  const ref = useRef(null)
   const [location, setLocation] = useLocation()
   const searchText = location.get('q')
 
@@ -33,14 +32,14 @@ export function GroupToolbar() {
   }
 
   // cleanup form on state.search change
-  React.useEffect(() => {
+  useEffect(() => {
     if (!searchText || searchText === '') {
       ref.current.value = ''
     }
   }, [searchText])
 
   return (
-    <React.Fragment>
+    <>
       <div className="level-item">
         <form action="" className="form" onSubmit={onSearchQuery}>
           <div className="field has-addons">
@@ -79,7 +78,7 @@ export function GroupToolbar() {
           })}
         </span>
       </button>
-    </React.Fragment>
+    </>
   )
 }
 
@@ -267,6 +266,7 @@ export function GroupCtx() {
                 name={urole}
                 onRemove={() => removeRole(urole)}
                 size="is-small"
+                id={`roles_${urole}`}
               />
             </p>
           ))}
@@ -293,6 +293,7 @@ export function GroupCtx() {
                 name={user}
                 onRemove={() => removeUser(user)}
                 size="is-small"
+                id={`user_${user}`}
               />
             </p>
           ))}
diff --git a/src/guillo-gmi/views/item.js b/src/guillo-gmi/views/item.tsx
similarity index 100%
rename from src/guillo-gmi/views/item.js
rename to src/guillo-gmi/views/item.tsx
diff --git a/src/guillo-gmi/views/users.js b/src/guillo-gmi/views/users.tsx
similarity index 96%
rename from src/guillo-gmi/views/users.js
rename to src/guillo-gmi/views/users.tsx
index 260441a..2974c68 100644
--- a/src/guillo-gmi/views/users.js
+++ b/src/guillo-gmi/views/users.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { TabsPanel } from '../components/tabs'
 import { PanelItems } from '../components/panel/items'
 import { useTraversal } from '../contexts'
@@ -12,6 +11,7 @@ import { useRemoteField } from '../hooks/useRemoteField'
 import { useLocation } from '../hooks/useLocation'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../locales/generic_messages'
+import { useEffect, useRef, useState } from 'react'
 
 const tabs = {
   Users: PanelItems,
@@ -20,7 +20,7 @@ const tabs = {
 export function UsersToolbar() {
   const intl = useIntl()
   const Ctx = useTraversal()
-  const ref = React.useRef(null)
+  const ref = useRef(null)
   const [location, setLocation] = useLocation()
   const searchText = location.get('q')
 
@@ -31,14 +31,14 @@ export function UsersToolbar() {
   }
 
   // cleanup form on state.search change
-  React.useEffect(() => {
+  useEffect(() => {
     if (!searchText || searchText === '') {
       ref.current.value = ''
     }
   }, [searchText])
 
   return (
-    <React.Fragment>
+    <>
       <div className="level-item">
         <form action="" className="form" onSubmit={onSearchQuery}>
           <div className="field has-addons">
@@ -72,7 +72,7 @@ export function UsersToolbar() {
         <Icon icon="fas fa-user" />
         <span>{intl.formatMessage(genericMessages.add_user)}</span>
       </button>
-    </React.Fragment>
+    </>
   )
 }
 
@@ -87,11 +87,15 @@ export function UsersCtx(props) {
   )
 }
 
+interface State {
+  roles: string[]
+  groups: string[]
+}
 export function UserCtx() {
   const intl = useIntl()
   const { Ctx, patch, loading } = useCrudContext()
 
-  const [state, setState] = React.useState({ roles: [], gorups: [] })
+  const [state, setState] = useState<State>({ roles: [], groups: [] })
 
   const fields = {
     user_groups: [],
@@ -100,7 +104,7 @@ export function UserCtx() {
 
   const [remotes, updateRemote] = useRemoteField(fields)
 
-  React.useEffect(() => {
+  useEffect(() => {
     ;(async () => {
       const [requestGetGroups, requestGetRoles] = await Promise.all([
         Ctx.client.search(Ctx.path, { type_name: 'Group' }, true),
@@ -209,7 +213,6 @@ export function UserCtx() {
           <UserForm
             actionName="Save"
             onSubmit={(ev) => updateObject(ev)}
-            isEdit={true}
             formData={Ctx.context}
             exclude={['password']}
             remotes={remotes}

From 749d00aa6c007a2d2dc0565482dad978517dde02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roger=20Boixader=20G=C3=BCell?= <rboixaderg@gmail.com>
Date: Sat, 27 Jan 2024 23:03:32 +0100
Subject: [PATCH 07/20] wip: components / build

---
 package.json                                  |  6 +-
 .../components/behaviors/imultiattachment.tsx | 10 ++-
 src/guillo-gmi/components/error_boundary.tsx  |  5 +-
 src/guillo-gmi/components/error_zone.tsx      |  2 +-
 .../components/fields/renderField.tsx         | 64 +++++++++++++++----
 .../components/input/form_builder.tsx         | 26 +++++---
 src/guillo-gmi/components/input/input.tsx     |  1 +
 src/guillo-gmi/components/input/select.tsx    |  7 +-
 .../components/input/select_vocabulary.tsx    |  5 +-
 src/guillo-gmi/components/input/upload.tsx    | 12 ++--
 src/guillo-gmi/components/item.tsx            |  5 +-
 src/guillo-gmi/components/panel/behaviors.tsx |  9 ++-
 src/guillo-gmi/components/panel/items.tsx     |  5 +-
 .../components/panel/permissions.tsx          | 24 +++++--
 .../components/panel/permissions_prinperm.tsx | 20 ++++--
 .../components/panel/permissions_prinrole.tsx | 25 ++++++--
 .../components/panel/permissions_roleperm.tsx | 20 ++++--
 .../components/search_vocabulary_labels.tsx   |  8 +--
 .../components/selected_items_actions.tsx     |  8 +--
 src/guillo-gmi/forms/users.tsx                |  3 +
 src/guillo-gmi/hooks/useCrudContext.tsx       | 33 ++++++----
 src/guillo-gmi/hooks/useRegistry.tsx          |  4 +-
 src/guillo-gmi/hooks/useVocabulary.tsx        |  2 +-
 src/guillo-gmi/lib/client.tsx                 |  5 +-
 src/guillo-gmi/lib/helpers.ts                 | 14 ++--
 src/guillo-gmi/models/index.ts                |  9 ++-
 src/guillo-gmi/types/global.ts                |  6 +-
 src/guillo-gmi/types/guillotina.ts            | 23 +++++--
 28 files changed, 253 insertions(+), 108 deletions(-)

diff --git a/package.json b/package.json
index 4b18707..c1de958 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
   "files": [
     "dist"
   ],
-  "source": "./src/guillo-gmi/index.js",
+  "source": "./src/guillo-gmi/index.ts",
   "main": "./dist/react-gmi.js",
   "exports": "./dist/react-gmi.modern.js",
   "types": "./dist/index.d.ts",
@@ -49,12 +49,12 @@
     "vitest": "^0.34.6"
   },
   "scripts": {
-    "format": "prettier --write \"src/**/*.js\"",
+    "format": "prettier --write \"src/**/*.{js,ts,tsx}\"",
     "format:tests": "prettier --write \"e2e/cypress/**/*.js\"",
     "format:check": "prettier --check \"src/**/*.js\"",
     "build": "yarn build:js && yarn build:css",
     "build:js": "rm -rf ./dist && microbundle --jsx React.createElement --no-compress --sourcemap",
-    "build:css": "rm -rf ./dist/css && mkdir ./dist/css && sass ./src/guillo-gmi/scss/styles.sass ./dist/css/style.css",
+    "build:css": "rm -rf ./dist/css && mkdir -p ./dist/css && sass ./src/guillo-gmi/scss/styles.sass ./dist/css/style.css",
     "prepublish": "yarn build",
     "test": "vitest run",
     "lint": "eslint src",
diff --git a/src/guillo-gmi/components/behaviors/imultiattachment.tsx b/src/guillo-gmi/components/behaviors/imultiattachment.tsx
index b7b2bff..54665ed 100644
--- a/src/guillo-gmi/components/behaviors/imultiattachment.tsx
+++ b/src/guillo-gmi/components/behaviors/imultiattachment.tsx
@@ -13,12 +13,16 @@ import {
   genericFileMessages,
   genericMessages,
 } from '../../locales/generic_messages'
-import { FileWithFileName } from '../../types/global'
+import { LightFile } from '../../types/global'
 
-export function IMultiAttachment({ properties, values }) {
+interface Props {
+  properties: any
+  values: any
+}
+export function IMultiAttachment({ properties, values }: Props) {
   const intl = useIntl()
   const [fileKey, setFileKey] = useState('')
-  const [file, setFile] = useState<FileWithFileName | undefined>(undefined)
+  const [file, setFile] = useState<LightFile | undefined>(undefined)
   const [fileKeyToDelete, setFileKeyToDelete] = useState(undefined)
 
   const [loading, setLoading] = useState(false)
diff --git a/src/guillo-gmi/components/error_boundary.tsx b/src/guillo-gmi/components/error_boundary.tsx
index a59c1a6..ebd71d8 100644
--- a/src/guillo-gmi/components/error_boundary.tsx
+++ b/src/guillo-gmi/components/error_boundary.tsx
@@ -47,4 +47,7 @@ class ErrorBoundaryComponent extends Component<
   }
 }
 
-export default injectIntl(ErrorBoundaryComponent)
+export const ErrorBoundary: React.ComponentType<{
+  intl: IntlShape
+  children: React.ReactNode
+}> = injectIntl(ErrorBoundaryComponent)
diff --git a/src/guillo-gmi/components/error_zone.tsx b/src/guillo-gmi/components/error_zone.tsx
index f647737..722c4bd 100644
--- a/src/guillo-gmi/components/error_zone.tsx
+++ b/src/guillo-gmi/components/error_zone.tsx
@@ -3,7 +3,7 @@ import { classnames } from '../lib/helpers'
 
 interface Props {
   children: React.ReactNode
-  id: string
+  id?: string
   className?: string
 }
 
diff --git a/src/guillo-gmi/components/fields/renderField.tsx b/src/guillo-gmi/components/fields/renderField.tsx
index fdf59f2..937da78 100644
--- a/src/guillo-gmi/components/fields/renderField.tsx
+++ b/src/guillo-gmi/components/fields/renderField.tsx
@@ -6,13 +6,17 @@ import { get } from '../../lib/utils'
 import { buildQs } from '../../lib/search'
 import { useTraversal } from '../../contexts'
 import { useConfig } from '../../hooks/useConfig'
+import {
+  GuillotinaSchemaProperty,
+  GuillotinaVocabularyItem,
+} from '../../types/guillotina'
 
 const plain = ['string', 'number', 'boolean']
 
 interface RenderFieldProps {
   value: any
-  Widget?: React.ComponentType<{ value: any; schema: any }>
-  schema?: any
+  Widget?: React.ComponentType<{ value: any; schema: GuillotinaSchemaProperty }>
+  schema?: GuillotinaSchemaProperty
 }
 
 export function RenderField({ value, Widget, schema }: RenderFieldProps) {
@@ -41,7 +45,11 @@ export function RenderField({ value, Widget, schema }: RenderFieldProps) {
   return <p>No render for {JSON.stringify(value)}</p>
 }
 
-const FieldValue = ({ field, value }) => (
+interface FieldValueProps {
+  field: string
+  value: unknown
+}
+const FieldValue = ({ field, value }: FieldValueProps) => (
   <div className="field">
     <div className="label">{field}</div>
     <div className="value">
@@ -58,7 +66,16 @@ const getDefaultValueEditableField = (intl) => {
   })
 }
 
-export const SearchRenderField = ({ schema, value, modifyContent }) => {
+interface SearchRenderFieldProps {
+  schema: GuillotinaSchemaProperty
+  value: string | string[]
+  modifyContent: boolean
+}
+export const SearchRenderField = ({
+  schema,
+  value,
+  modifyContent,
+}: SearchRenderFieldProps) => {
   const intl = useIntl()
   const [valuesLabels, setValuesLabels] = useState([])
   const [isLoadingData, setIsLoadingData] = useState(false)
@@ -69,7 +86,7 @@ export const SearchRenderField = ({ schema, value, modifyContent }) => {
   useEffect(() => {
     const fetchData = async (valuesToSearch) => {
       setIsLoadingData(true)
-      let searchTermQs = []
+      let searchTermQs = ''
 
       const searchTermParsed = ['__or', `id=${valuesToSearch.join('%26id=')}`]
       const { get: getSearch } = traversal.registry
@@ -129,7 +146,16 @@ export const SearchRenderField = ({ schema, value, modifyContent }) => {
   return <RenderField value={getRenderValue()} />
 }
 
-export const VocabularyRenderField = ({ schema, value, modifyContent }) => {
+interface VocabularyRenderFieldProps {
+  schema: GuillotinaSchemaProperty
+  value: string | string[]
+  modifyContent: boolean
+}
+export const VocabularyRenderField = ({
+  schema,
+  value,
+  modifyContent,
+}: VocabularyRenderFieldProps) => {
   const intl = useIntl()
   const DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl)
 
@@ -146,15 +172,18 @@ export const VocabularyRenderField = ({ schema, value, modifyContent }) => {
     }
 
     if (schema?.vocabularyName) {
-      const vocabularyValue = get(vocabulary, 'data.items', []).find(
-        (item) => item.token === value
-      )
+      const vocabularyValue = get<GuillotinaVocabularyItem[]>(
+        vocabulary,
+        'data.items',
+        []
+      ).find((item) => item.token === value)
       renderProps['value'] = vocabularyValue?.title ?? ''
     } else {
       renderProps['value'] = (renderProps['value'] ?? []).map((value) => {
         return (
-          get(vocabulary, 'data.items', []).find((item) => item.token === value)
-            ?.title ?? ''
+          get<GuillotinaVocabularyItem[]>(vocabulary, 'data.items', []).find(
+            (item) => item.token === value
+          )?.title ?? ''
         )
       })
     }
@@ -164,7 +193,18 @@ export const VocabularyRenderField = ({ schema, value, modifyContent }) => {
   return <RenderField {...getRenderProps()} />
 }
 
-export function RenderFieldComponent({ schema, field, val, modifyContent }) {
+interface RenderFieldComponentProps {
+  schema: GuillotinaSchemaProperty
+  field: string
+  val: any
+  modifyContent: boolean
+}
+export function RenderFieldComponent({
+  schema,
+  field,
+  val,
+  modifyContent,
+}: RenderFieldComponentProps) {
   const intl = useIntl()
   const DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl)
 
diff --git a/src/guillo-gmi/components/input/form_builder.tsx b/src/guillo-gmi/components/input/form_builder.tsx
index 91290d8..0caa2f5 100644
--- a/src/guillo-gmi/components/input/form_builder.tsx
+++ b/src/guillo-gmi/components/input/form_builder.tsx
@@ -5,8 +5,12 @@ import { PasswordInput } from './password'
 import { Button } from './button'
 import { Checkbox } from './checkbox'
 import { generateUID } from '../../lib/helpers'
-import { Children, cloneElement, useRef } from 'react'
+import { Children, cloneElement, isValidElement, useRef } from 'react'
 import { IndexSignature } from '../../types/global'
+import {
+  GuillotinaSchema,
+  GuillotinaSchemaProperty,
+} from '../../types/guillotina'
 
 const formComponents = {
   string: Input,
@@ -16,11 +20,11 @@ const formComponents = {
 }
 
 interface Props {
-  schema: any
+  schema: GuillotinaSchema
   formData?: any
   onSubmit: (formData: any, initialData: any) => void
   actionName: string
-  children?: any
+  children?: React.ReactNode
   exclude?: string[]
   remotes?: IndexSignature
   submitButton?: boolean
@@ -67,13 +71,13 @@ export function FormBuilder({
   }
 
   const GetTag = ({ field }: { field: string }) => {
-    const Tag =
-      formComponents[properties[field].widget || properties[field].type]
+    const property = properties[field] as GuillotinaSchemaProperty
+    const Tag = formComponents[property.widget || property.type]
 
     const props = {
       value: initialState[field],
       onChange: onUpdate(field),
-      placeholder: properties[field].title || '',
+      placeholder: property.title || '',
       id: generateUID(),
       dataTest: `${field}TestInput`,
       required: false,
@@ -87,9 +91,13 @@ export function FormBuilder({
     return <Tag {...props} />
   }
 
-  const children_ = Children.map(children, (child) =>
-    cloneElement(child, { onChange: onUpdate })
-  )
+  const children_ = Children.map(children, (child) => {
+    if (isValidElement(child)) {
+      const props = { onChange: onUpdate }
+      return cloneElement(child, props)
+    }
+    return child
+  })
 
   const changes = () => {
     onSubmit(ref.current, values)
diff --git a/src/guillo-gmi/components/input/input.tsx b/src/guillo-gmi/components/input/input.tsx
index 2f0cd48..e67729e 100644
--- a/src/guillo-gmi/components/input/input.tsx
+++ b/src/guillo-gmi/components/input/input.tsx
@@ -7,6 +7,7 @@ import { useEffect } from 'react'
 
 const noop = () => true
 interface Props {
+  name?: string
   icon?: JSX.Element
   iconPosition?: 'has-icons-left' | 'has-icons-right'
   error?: string
diff --git a/src/guillo-gmi/components/input/select.tsx b/src/guillo-gmi/components/input/select.tsx
index 4dc03f7..6d6cc15 100644
--- a/src/guillo-gmi/components/input/select.tsx
+++ b/src/guillo-gmi/components/input/select.tsx
@@ -1,6 +1,5 @@
 import ErrorZone from '../error_zone'
 import { classnames, generateUID } from '../../lib/helpers'
-import { get } from '../../lib/utils'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
 import { forwardRef, useState } from 'react'
@@ -58,8 +57,7 @@ export const Select = forwardRef<HTMLSelectElement, Props>(
         }
         onChange(selectValue)
       } else {
-        const selectValue = get(ev, 'target.value', undefined)
-        onChange(selectValue)
+        onChange(ev.target.value)
       }
     }
 
@@ -112,3 +110,6 @@ export const Select = forwardRef<HTMLSelectElement, Props>(
     )
   }
 )
+
+Select.displayName = 'Select'
+export default Select
diff --git a/src/guillo-gmi/components/input/select_vocabulary.tsx b/src/guillo-gmi/components/input/select_vocabulary.tsx
index 5409fad..85dd1de 100644
--- a/src/guillo-gmi/components/input/select_vocabulary.tsx
+++ b/src/guillo-gmi/components/input/select_vocabulary.tsx
@@ -2,6 +2,7 @@ import { Select } from './select'
 import { get } from '../../lib/utils'
 import { useVocabulary } from '../../hooks/useVocabulary'
 import { forwardRef } from 'react'
+import { GuillotinaVocabularyItem } from '../../types/guillotina'
 
 interface Props {
   vocabularyName: string
@@ -33,10 +34,10 @@ export const SelectVocabulary = forwardRef<HTMLSelectElement, Props>(
     const vocabulary = useVocabulary(vocabularyName)
 
     const getOptions = () => {
-      if (get(vocabulary, 'data.items', null)) {
+      if (get<GuillotinaVocabularyItem>(vocabulary, 'data.items', null)) {
         const vocData = vocabulary.data.items.map((item) => {
           return {
-            text: item.title.default ?? item.title,
+            text: item.title,
             value: item.token,
           }
         })
diff --git a/src/guillo-gmi/components/input/upload.tsx b/src/guillo-gmi/components/input/upload.tsx
index 26cf294..9ccd4be 100644
--- a/src/guillo-gmi/components/input/upload.tsx
+++ b/src/guillo-gmi/components/input/upload.tsx
@@ -1,12 +1,12 @@
-import { InputHTMLAttributes } from 'react'
+import { ChangeEvent, InputHTMLAttributes } from 'react'
 import { lightFileReader } from '../../lib/client.js'
 import { useIntl } from 'react-intl'
-import { FileWithFileName } from '../../types/global'
+import { LightFile } from '../../types/global'
 
 interface Props {
   label?: string
   dataTest?: string
-  onChange: (file: FileWithFileName) => void
+  onChange: (file: LightFile) => void
 }
 export function FileUpload({
   label,
@@ -14,9 +14,9 @@ export function FileUpload({
   dataTest,
 }: Props & InputHTMLAttributes<HTMLInputElement>) {
   const intl = useIntl()
-  const changed = async (event) => {
-    const file: FileWithFileName = await lightFileReader(event.target.files[0])
-    onChange(file)
+  const changed = async (event: ChangeEvent<HTMLInputElement>) => {
+    const fileToUpload = await lightFileReader(event.target.files[0])
+    onChange(fileToUpload)
   }
 
   return (
diff --git a/src/guillo-gmi/components/item.tsx b/src/guillo-gmi/components/item.tsx
index e77a46d..3ae293f 100644
--- a/src/guillo-gmi/components/item.tsx
+++ b/src/guillo-gmi/components/item.tsx
@@ -7,6 +7,7 @@ import { Icon } from './ui/icon'
 import { ItemCheckbox } from './selected_items_actions'
 import { Delete } from './ui'
 import { IColumn } from '../reducers/guillotina'
+import { SearchItem } from '../types/guillotina'
 
 interface ItemProps {
   item: ItemModel
@@ -30,14 +31,14 @@ const smallcss = {
 }
 
 interface RItemProps {
-  item: ItemModel
+  item: SearchItem
   search: string
   columns: IColumn[]
 }
 export function RItem({ item, search, columns }: RItemProps) {
   const [, navigate] = useLocation()
   const traversal = useTraversal()
-  const model = new ItemModel(item, traversal.url, traversal.path)
+  const model = new ItemModel(item)
   const link = () => navigate({ path: model.path }, true)
 
   return (
diff --git a/src/guillo-gmi/components/panel/behaviors.tsx b/src/guillo-gmi/components/panel/behaviors.tsx
index 4950ce4..1325eef 100644
--- a/src/guillo-gmi/components/panel/behaviors.tsx
+++ b/src/guillo-gmi/components/panel/behaviors.tsx
@@ -4,10 +4,17 @@ import { Button } from '../input/button'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
 import { Fragment, useEffect, useState } from 'react'
+import { GuillotinaBehaviors } from '../../types/guillotina'
 
 export function PanelBehaviors() {
   const intl = useIntl()
-  const { Ctx, get, result, loading, isError } = useCrudContext()
+  const {
+    Ctx,
+    get,
+    result,
+    loading,
+    isError,
+  } = useCrudContext<GuillotinaBehaviors>()
   const ops = useCrudContext()
 
   const [state, setState] = useState(false)
diff --git a/src/guillo-gmi/components/panel/items.tsx b/src/guillo-gmi/components/panel/items.tsx
index f400961..52bd7a3 100644
--- a/src/guillo-gmi/components/panel/items.tsx
+++ b/src/guillo-gmi/components/panel/items.tsx
@@ -20,11 +20,12 @@ import { Input } from '../input/input'
 import { SelectVocabulary } from '../input/select_vocabulary'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
-import { ItemModel } from '../../models'
+
+import { SearchItem } from '../../types/guillotina'
 
 interface InitialState {
   page: number
-  items: ItemModel[]
+  items: SearchItem[]
   loading: boolean
   total: number
 }
diff --git a/src/guillo-gmi/components/panel/permissions.tsx b/src/guillo-gmi/components/panel/permissions.tsx
index d49757e..cd6bab2 100644
--- a/src/guillo-gmi/components/panel/permissions.tsx
+++ b/src/guillo-gmi/components/panel/permissions.tsx
@@ -10,6 +10,7 @@ import { useTraversal } from '../../contexts'
 import { defineMessages, useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
 import { Fragment, useEffect, useState } from 'react'
+import { GuillotinaSharing } from '../../types/guillotina'
 
 const messages = defineMessages({
   role_permissions: {
@@ -64,7 +65,7 @@ const messages = defineMessages({
 
 export function PanelPermissions() {
   const intl = useIntl()
-  const { get, result, loading } = useCrudContext()
+  const { get, result, loading } = useCrudContext<GuillotinaSharing>()
   const ctx = useTraversal()
 
   const [reset, setReset] = useState(1)
@@ -197,17 +198,26 @@ export function PanelPermissions() {
   )
 }
 
-const initial = {
+interface State {
+  permissions: { text: string; value: string }[]
+  roles: { text: string; value: string }[]
+  principals: { text: string; value: string }[]
+  current: string
+}
+const initial: State = {
   permissions: undefined,
   roles: [],
   principals: undefined,
   current: '',
-  currentObj: undefined,
 }
 
-export function AddPermission({ refresh, reset }) {
+interface AddPermissionProps {
+  refresh: (state: number) => void
+  reset: number
+}
+export function AddPermission({ refresh, reset }: AddPermissionProps) {
   const Ctx = useTraversal()
-  const [state, setState] = useSetState(initial)
+  const [state, setState] = useSetState<State>(initial)
   const intl = useIntl()
 
   const operations = [
@@ -238,7 +248,7 @@ export function AddPermission({ refresh, reset }) {
       let principals = []
       let roles = []
 
-      let principalsData = await Ctx.client.getPrincipals(Ctx.path)
+      const principalsData = await Ctx.client.getPrincipals(Ctx.path)
       const groups = principalsData.groups.map((group) => ({
         text: group.id,
         value: group.id,
@@ -270,7 +280,7 @@ export function AddPermission({ refresh, reset }) {
       <p>{intl.formatMessage(messages.select_type)}</p>
       <Select
         options={defaultOptions}
-        onChange={(value) => setState({ current: value })}
+        onChange={(value: string) => setState({ current: value })}
         dataTest="selectPermissionTypeTest"
       />
       <hr />
diff --git a/src/guillo-gmi/components/panel/permissions_prinperm.tsx b/src/guillo-gmi/components/panel/permissions_prinperm.tsx
index b47438a..d6d9485 100644
--- a/src/guillo-gmi/components/panel/permissions_prinperm.tsx
+++ b/src/guillo-gmi/components/panel/permissions_prinperm.tsx
@@ -7,16 +7,28 @@ import { useTraversal } from '../../contexts'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
 
+interface State {
+  principal: string
+  permission: string[]
+  setting: string
+  error: string
+}
+interface Props {
+  principals: { text: string; value: string }[]
+  permissions: { text: string; value: string }[]
+  operations: { text: string; value: string }[]
+  refresh: (value: number) => void
+}
 export function PermissionPrinperm({
   principals,
   permissions,
   operations,
   refresh,
-}) {
+}: Props) {
   const Ctx = useTraversal()
   const intl = useIntl()
   const { post, loading } = useCrudContext()
-  const [state, setState] = useSetState({
+  const [state, setState] = useSetState<State>({
     principal: undefined,
     permission: [],
     setting: undefined,
@@ -64,7 +76,7 @@ export function PermissionPrinperm({
         <Select
           appendDefault
           options={principals}
-          onChange={(value) => setState({ principal: value })}
+          onChange={(value: string) => setState({ principal: value })}
           dataTest="selectPrincipalTest"
         />
       </div>
@@ -87,7 +99,7 @@ export function PermissionPrinperm({
         <Select
           appendDefault
           options={operations}
-          onChange={(value) => setState({ setting: value })}
+          onChange={(value: string) => setState({ setting: value })}
           dataTest="operationPermissionsTest"
         />
       </div>
diff --git a/src/guillo-gmi/components/panel/permissions_prinrole.tsx b/src/guillo-gmi/components/panel/permissions_prinrole.tsx
index d2a5654..08c1a25 100644
--- a/src/guillo-gmi/components/panel/permissions_prinrole.tsx
+++ b/src/guillo-gmi/components/panel/permissions_prinrole.tsx
@@ -7,11 +7,28 @@ import { useTraversal } from '../../contexts'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
 
-export function PermissionPrinrole({ principals, roles, operations, refresh }) {
+interface State {
+  principal: string
+  roles: string[]
+  setting: string
+  error: string
+}
+interface Props {
+  principals: { text: string; value: string }[]
+  roles: { text: string; value: string }[]
+  operations: { text: string; value: string }[]
+  refresh: (value: number) => void
+}
+export function PermissionPrinrole({
+  principals,
+  roles,
+  operations,
+  refresh,
+}: Props) {
   const intl = useIntl()
   const Ctx = useTraversal()
   const { post, loading } = useCrudContext()
-  const [state, setState] = useSetState({
+  const [state, setState] = useSetState<State>({
     principal: undefined,
     roles: [],
     setting: undefined,
@@ -59,7 +76,7 @@ export function PermissionPrinrole({ principals, roles, operations, refresh }) {
         <Select
           appendDefault
           options={principals}
-          onChange={(value) => setState({ principal: value })}
+          onChange={(value: string) => setState({ principal: value })}
           dataTest="selectPrincipalTest"
         />
       </div>
@@ -82,7 +99,7 @@ export function PermissionPrinrole({ principals, roles, operations, refresh }) {
         <Select
           appendDefault
           options={operations}
-          onChange={(value) => setState({ setting: value })}
+          onChange={(value: string) => setState({ setting: value })}
           dataTest="operationPermissionsTest"
         />
       </div>
diff --git a/src/guillo-gmi/components/panel/permissions_roleperm.tsx b/src/guillo-gmi/components/panel/permissions_roleperm.tsx
index 9285719..368b01a 100644
--- a/src/guillo-gmi/components/panel/permissions_roleperm.tsx
+++ b/src/guillo-gmi/components/panel/permissions_roleperm.tsx
@@ -7,16 +7,28 @@ import { useTraversal } from '../../contexts'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
 
+interface State {
+  role: string
+  permission: string[]
+  setting: string
+  error: string
+}
+interface Props {
+  roles: { text: string; value: string }[]
+  permissions: { text: string; value: string }[]
+  operations: { text: string; value: string }[]
+  refresh: (value: number) => void
+}
 export function PermissionRoleperm({
   roles,
   permissions,
   operations,
   refresh,
-}) {
+}: Props) {
   const intl = useIntl()
   const Ctx = useTraversal()
   const { post, loading } = useCrudContext()
-  const [state, setState] = useSetState({
+  const [state, setState] = useSetState<State>({
     role: undefined,
     permission: [],
     setting: undefined,
@@ -65,7 +77,7 @@ export function PermissionRoleperm({
         <Select
           appendDefault
           options={roles}
-          onChange={(value) => setState({ role: value })}
+          onChange={(value: string) => setState({ role: value })}
           dataTest="selectRoleTest"
         />
       </div>
@@ -88,7 +100,7 @@ export function PermissionRoleperm({
         <Select
           appendDefault
           options={operations}
-          onChange={(value) => setState({ setting: value })}
+          onChange={(value: string) => setState({ setting: value })}
           dataTest="operationPermissionsTest"
         />
       </div>
diff --git a/src/guillo-gmi/components/search_vocabulary_labels.tsx b/src/guillo-gmi/components/search_vocabulary_labels.tsx
index 41fb595..98a70eb 100644
--- a/src/guillo-gmi/components/search_vocabulary_labels.tsx
+++ b/src/guillo-gmi/components/search_vocabulary_labels.tsx
@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react'
 import { Tag } from './ui/tag'
 import { useLocation } from '../hooks/useLocation'
 import { useVocabulary } from '../hooks/useVocabulary'
-import { get } from '../lib/utils'
 
 interface Props {
   query?: string
@@ -16,9 +15,10 @@ export function SearchVocabularyLabels({ query = 'q', vocabularyName }: Props) {
   const defaultRenderValue = location.get(query)
 
   useEffect(() => {
-    let value = defaultRenderValue
-    if (get(vocabulary, 'data.items', []).length > 0) {
-      const vocabularyValue = get(vocabulary, 'data.items', []).find(
+    let value: string = defaultRenderValue
+
+    if ((vocabulary?.data?.items ?? []).length > 0) {
+      const vocabularyValue = vocabulary.data.items.find(
         (item) => item.token === value
       )
       if (vocabularyValue) {
diff --git a/src/guillo-gmi/components/selected_items_actions.tsx b/src/guillo-gmi/components/selected_items_actions.tsx
index 8d60c7e..6521092 100644
--- a/src/guillo-gmi/components/selected_items_actions.tsx
+++ b/src/guillo-gmi/components/selected_items_actions.tsx
@@ -4,14 +4,14 @@ import { Checkbox } from './input/checkbox'
 import { useTraversal } from '../contexts'
 import { useIntl } from 'react-intl'
 import { getActionsObject } from '../lib/helpers'
-import { ItemModel } from '../models'
+import { SearchItem } from '../types/guillotina'
 
 const ItemsActionsCtx = createContext<{
   selected?: {
     all: boolean
     [key: string]: boolean
   }
-  onSelectOneItem?: (item: ItemModel) => void
+  onSelectOneItem?: (item: SearchItem) => void
   onSelectAllItems?: (chedked: boolean) => void
   onAction?: (action: string) => void
 }>({
@@ -25,7 +25,7 @@ const ItemsActionsCtx = createContext<{
  * Ex: Delete, Move, Copy...
  */
 interface PropsItemsActionsProvider {
-  items: ItemModel[]
+  items: SearchItem[]
   children: React.ReactNode
 }
 export function ItemsActionsProvider({
@@ -98,7 +98,7 @@ export function AllItemsCheckbox({ dataTest }: { dataTest?: string }) {
  * Checkbox component to select ONE item.
  */
 interface PropsItemCheckbox {
-  item: ItemModel
+  item: SearchItem
   dataTest?: string
 }
 export function ItemCheckbox({ item, dataTest }: PropsItemCheckbox) {
diff --git a/src/guillo-gmi/forms/users.tsx b/src/guillo-gmi/forms/users.tsx
index 78a3c3f..640fb73 100644
--- a/src/guillo-gmi/forms/users.tsx
+++ b/src/guillo-gmi/forms/users.tsx
@@ -23,7 +23,10 @@ export const UserForm = ({
   const intl = useIntl()
 
   const schema = {
+    $schema: '',
+    title: '',
     type: 'object',
+    definitions: {},
     required: ['username', 'password'],
     properties: {
       username: {
diff --git a/src/guillo-gmi/hooks/useCrudContext.tsx b/src/guillo-gmi/hooks/useCrudContext.tsx
index 821dccb..9b84d20 100644
--- a/src/guillo-gmi/hooks/useCrudContext.tsx
+++ b/src/guillo-gmi/hooks/useCrudContext.tsx
@@ -1,11 +1,11 @@
 import { useTraversal } from '../contexts'
 import useSetState from './useSetState'
 
-interface State {
+interface State<T = unknown> {
   loading?: boolean
   isError?: boolean
   errorMessage?: string
-  result?: unknown
+  result?: T
   response?: unknown
 }
 const initial: State = {
@@ -62,10 +62,10 @@ const patch = (setState, Ctx) => async (
 }
 
 const del = (setState, Ctx) => async (
-  data,
+  data = {},
   endpoint = undefined,
   body = false
-) => {
+): Promise<State> => {
   setState({ loading: true })
   let newState = {}
   try {
@@ -84,7 +84,7 @@ const post = (setState, Ctx) => async (
   data,
   endpoint = undefined,
   body = true
-) => {
+): Promise<State> => {
   setState({ loading: true })
   let newState = {}
   try {
@@ -99,18 +99,25 @@ const post = (setState, Ctx) => async (
   return newState
 }
 
-const get = (setState, Ctx) => async (endpoint = undefined) => {
+const get = (setState, Ctx) => async (endpoint = undefined): Promise<State> => {
   setState({ loading: true })
-  const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path
-  const req = await Ctx.client.get(path)
-  const data = await req.json()
-  setState({ loading: false, result: data, response: req })
-  return data
+  let newState = {}
+  try {
+    const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path
+    const res = await Ctx.client.get(path)
+    newState = await processResponse(res, true)
+  } catch (e) {
+    console.error('Error', e)
+    newState = { isError: true, errorMessage: 'unhandled exception' }
+  }
+
+  setState(newState)
+  return newState
 }
 
-export function useCrudContext() {
+export function useCrudContext<T>() {
   const Ctx = useTraversal()
-  const [state, setState] = useSetState<State>(initial)
+  const [state, setState] = useSetState<State<T>>(initial)
 
   return {
     ...state,
diff --git a/src/guillo-gmi/hooks/useRegistry.tsx b/src/guillo-gmi/hooks/useRegistry.tsx
index dc35f24..a791ccc 100644
--- a/src/guillo-gmi/hooks/useRegistry.tsx
+++ b/src/guillo-gmi/hooks/useRegistry.tsx
@@ -24,7 +24,7 @@ import { IMultiImageOrderedAttachment } from '../components/behaviors/imultiimag
 import { IWorkflow } from '../components/behaviors/iworkflow'
 import { GroupsCtx } from '../views/groups'
 import { GroupCtx } from '../views/groups'
-import ErrorBoundary from '../components/error_boundary'
+import { ErrorBoundary } from '../components/error_boundary'
 import React from 'react'
 import { NotAllowed } from '../components/notallowed'
 import { NotFound } from '../components/notfound'
@@ -37,7 +37,7 @@ export interface IRegistry {
     [key: string]: React.FC
   }
   views: {
-    [key: string]: React.FC
+    [key: string]: React.FC | React.ComponentType
   }
   actions: {
     [key: string]: React.FC
diff --git a/src/guillo-gmi/hooks/useVocabulary.tsx b/src/guillo-gmi/hooks/useVocabulary.tsx
index 968424c..173d6ff 100644
--- a/src/guillo-gmi/hooks/useVocabulary.tsx
+++ b/src/guillo-gmi/hooks/useVocabulary.tsx
@@ -8,7 +8,7 @@ interface State {
   loading: boolean
   error: any
 }
-export function useVocabulary(vocabularyName: string, path: string) {
+export function useVocabulary(vocabularyName: string, path: string = null) {
   const traversal = useTraversal()
 
   const [vocabulary, setVocabulary] = useSetState<State>({
diff --git a/src/guillo-gmi/lib/client.tsx b/src/guillo-gmi/lib/client.tsx
index 7bd47b7..a12375e 100644
--- a/src/guillo-gmi/lib/client.tsx
+++ b/src/guillo-gmi/lib/client.tsx
@@ -4,6 +4,7 @@ import { Icon } from '../components/ui'
 import { toQueryString } from './helpers'
 import { RestClient } from './rest'
 import { parser } from './search'
+import { LightFile } from '../types/global'
 
 const cacheTypes = {}
 const cacheSchemas = {}
@@ -326,8 +327,8 @@ export function getClient(url, container, auth) {
   )
 }
 
-export const lightFileReader = async (file) => {
-  return new Promise((resolve) => {
+export const lightFileReader = (file) => {
+  return new Promise<LightFile>((resolve) => {
     const reader = new FileReader()
     reader.readAsArrayBuffer(file)
     reader.onloadend = (e) => {
diff --git a/src/guillo-gmi/lib/helpers.ts b/src/guillo-gmi/lib/helpers.ts
index a587258..053925f 100644
--- a/src/guillo-gmi/lib/helpers.ts
+++ b/src/guillo-gmi/lib/helpers.ts
@@ -8,7 +8,7 @@ export const noop = () => {}
 
 let current = 0
 
-export const generateUID = (prefix) => `${prefix || 'id'}-${current++}`
+export const generateUID = (prefix = '') => `${prefix || 'id'}-${current++}`
 
 export const toQueryString = (params: string[][]) => {
   return Object.keys(params)
@@ -22,8 +22,8 @@ export function base64ToArrayBuffer(base64) {
   const binaryString = window.atob(base64)
   const binaryLen = binaryString.length
   const bytes = new Uint8Array(binaryLen)
-  for (var i = 0; i < binaryLen; i++) {
-    var ascii = binaryString.charCodeAt(i)
+  for (let i = 0; i < binaryLen; i++) {
+    const ascii = binaryString.charCodeAt(i)
     bytes[i] = ascii
   }
   return bytes
@@ -34,9 +34,9 @@ export function stringToSlug(str) {
   str = str.toLowerCase()
 
   // remove accents, swap ñ for n, etc
-  var from = 'àáäâèéëêìíïîòóöôùúüûñç·/_,:;'
-  var to = 'aaaaeeeeiiiioooouuuunc------'
-  for (var i = 0, l = from.length; i < l; i++) {
+  const from = 'àáäâèéëêìíïîòóöôùúüûñç·/_,:;'
+  const to = 'aaaaeeeeiiiioooouuuunc------'
+  for (let i = 0, l = from.length; i < l; i++) {
     str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i))
   }
 
@@ -48,7 +48,7 @@ export function stringToSlug(str) {
   return str
 }
 
-export function sleep(ms) {
+export function sleep(ms): Promise<void> {
   return new Promise((resolve) => {
     setTimeout(function () {
       resolve(null)
diff --git a/src/guillo-gmi/models/index.ts b/src/guillo-gmi/models/index.ts
index 5c1d27f..5f96bed 100644
--- a/src/guillo-gmi/models/index.ts
+++ b/src/guillo-gmi/models/index.ts
@@ -1,10 +1,11 @@
 import { formatDate } from '../lib/utils'
 import { useConfig } from '../hooks/useConfig'
+import { SearchItem } from '../types/guillotina'
 
 export * from './sharing'
 
 export class ItemModel {
-  item: any
+  item: SearchItem
   url: string
   constructor(item, url = '') {
     this.item = item
@@ -13,7 +14,9 @@ export class ItemModel {
 
   get path() {
     // Compat
-    let item = this.item['@id'] ? this.item['@id'] : this.item['@absolute_url']
+    const item = this.item['@id']
+      ? this.item['@id']
+      : this.item['@absolute_url']
     let path = item.split('//')[1].split('/').splice(1).join('/')
     path = `/${path}/`
     if (this.url.length > 0) {
@@ -62,7 +65,7 @@ export class ItemModel {
     if (this.item.id) {
       return this.item.id
     }
-    let id = this.item['@id'].split('&')[0].split('/')
+    const id = this.item['@id'].split('&')[0].split('/')
     return id[id.length - 1]
   }
 
diff --git a/src/guillo-gmi/types/global.ts b/src/guillo-gmi/types/global.ts
index 0765bb0..699a315 100644
--- a/src/guillo-gmi/types/global.ts
+++ b/src/guillo-gmi/types/global.ts
@@ -1,6 +1,8 @@
-export type FileWithFileName = {
+export interface LightFile {
   filename: string
-} & File
+  data: ArrayBuffer | string
+  'content-type': string
+}
 
 export interface IndexSignature<T = any> {
   [key: string]: T
diff --git a/src/guillo-gmi/types/guillotina.ts b/src/guillo-gmi/types/guillotina.ts
index 834d884..cf1e3c7 100644
--- a/src/guillo-gmi/types/guillotina.ts
+++ b/src/guillo-gmi/types/guillotina.ts
@@ -42,8 +42,8 @@ export interface GuillotinaSchemaProperty {
   vocabularyName?: string
   vocabulary?: string[]
   items?: Items
-  properties: GuillotinaSchemaProperties
-  additionalProperties: GuillotinaSchemaProperties
+  properties?: GuillotinaSchemaProperties
+  additionalProperties?: GuillotinaSchemaProperties
   typeNameQuery?: string
   labelProperty?: string
 }
@@ -78,17 +78,22 @@ export type SearchItem = {
   path: string
   tid: string
   uuid: string
+  title: string
+  type_name: string
+  creation_date: string
+  modification_date: string
 } & ItemsPropertyObject
 
 export interface GuillotinaVocabulary {
   '@id': string
-  items: {
-    title: string
-    token: string
-  }[]
+  items: GuillotinaVocabularyItem[]
   items_total: number
 }
 
+export interface GuillotinaVocabularyItem {
+  title: string
+  token: string
+}
 export interface GuillotinaSharing {
   local: GuillotinaSharingMap
   inherit: GuillotinaSharingInheritItem[]
@@ -108,3 +113,9 @@ export interface GuillotinaSharingMap {
     [key: string]: IndexSignature<string>
   }
 }
+
+export interface GuillotinaBehaviors {
+  static: string[]
+  dynamic: string[]
+  available: string[]
+}

From c201b9744a562eed9e213b38a310c07605e7925b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roger=20Boixader=20G=C3=BCell?= <rboixaderg@gmail.com>
Date: Sat, 27 Jan 2024 23:03:46 +0100
Subject: [PATCH 08/20] chore: tsconfig

---
 tsconfig.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tsconfig.json b/tsconfig.json
index e72bcbd..2e9ea1d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,7 +5,8 @@
     "allowJs": true,
     "jsx": "react-jsx",
     "allowSyntheticDefaultImports":true,
-    "resolveJsonModule":true
+    "resolveJsonModule":true,
+    "declaration": true
   },
   "include": [
     "./src/guillo-gmi"

From 073934c4922d6269a75544724d0f18ea3f6eee89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roger=20Boixader=20G=C3=BCell?= <rboixaderg@gmail.com>
Date: Wed, 31 Jan 2024 22:07:05 +0100
Subject: [PATCH 09/20] wip: typescript

---
 src/guillo-gmi/components/guillotina.tsx |  3 +++
 src/guillo-gmi/components/item.tsx       |  2 +-
 src/guillo-gmi/hooks/useInput.tsx        |  6 +++---
 src/guillo-gmi/lib/rest.ts               |  2 +-
 src/guillo-gmi/views/application.tsx     | 19 ++++++++-----------
 5 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/guillo-gmi/components/guillotina.tsx b/src/guillo-gmi/components/guillotina.tsx
index 86e254a..2b6e7e5 100644
--- a/src/guillo-gmi/components/guillotina.tsx
+++ b/src/guillo-gmi/components/guillotina.tsx
@@ -59,9 +59,12 @@ export function Guillotina({ auth, locale, ...props }: GuillotinaProps) {
     dispatch({ type: 'SET_PATH', payload: searchPath })
   }, [searchPath])
 
+  console.log('Guillotina component')
   useEffect(() => {
     ;(async () => {
+      console.log('Get context data', path)
       const data = await client.getContext(path)
+      console.log('Get context data', data)
       if (data.status === 401) {
         dispatch({ type: 'SET_ERROR', payload: 'notallowed' })
         return
diff --git a/src/guillo-gmi/components/item.tsx b/src/guillo-gmi/components/item.tsx
index 3ae293f..752a2c8 100644
--- a/src/guillo-gmi/components/item.tsx
+++ b/src/guillo-gmi/components/item.tsx
@@ -10,7 +10,7 @@ import { IColumn } from '../reducers/guillotina'
 import { SearchItem } from '../types/guillotina'
 
 interface ItemProps {
-  item: ItemModel
+  item: { id: string; path: string }
   icon?: string
 }
 export function Item({ item, icon }: ItemProps) {
diff --git a/src/guillo-gmi/hooks/useInput.tsx b/src/guillo-gmi/hooks/useInput.tsx
index 454bd45..50c1e3a 100644
--- a/src/guillo-gmi/hooks/useInput.tsx
+++ b/src/guillo-gmi/hooks/useInput.tsx
@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react'
 
 const applyValidators = (value, validators) => {
-  let validation = Array.isArray(validators) ? validators : [validators]
+  const validation = Array.isArray(validators) ? validators : [validators]
   let result = true
   validation.forEach((func) => {
-    if (func(value) === false) {
+    if (func && func(value) === false) {
       result = false
     }
   })
@@ -12,7 +12,7 @@ const applyValidators = (value, validators) => {
 }
 
 const useInput = (onChange, value, validator) => {
-  let [state, setState] = useState({ hasError: false, value: value })
+  const [state, setState] = useState({ hasError: false, value: value })
 
   const onUpdate = (ev) => {
     const value = ev && ev.target ? ev.target.value : ev ? ev : ''
diff --git a/src/guillo-gmi/lib/rest.ts b/src/guillo-gmi/lib/rest.ts
index c47fb67..6168339 100644
--- a/src/guillo-gmi/lib/rest.ts
+++ b/src/guillo-gmi/lib/rest.ts
@@ -11,7 +11,7 @@ export class RestClient {
     this.container = container
   }
 
-  async request(path, data = undefined, headers = {}) {
+  async request(path, data = undefined, headers = undefined) {
     if (path.indexOf(this.url) !== -1) {
       path = path.replace(this.url, '')
     }
diff --git a/src/guillo-gmi/views/application.tsx b/src/guillo-gmi/views/application.tsx
index bb83fd2..db07d58 100644
--- a/src/guillo-gmi/views/application.tsx
+++ b/src/guillo-gmi/views/application.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Item } from '../components/item'
 import { ItemTitle } from '../components/item'
 import { Button } from '../components/input/button'
@@ -10,14 +8,13 @@ import { Form } from '../components/input/form'
 import { Input } from '../components/input/input'
 import { defineMessages, useIntl } from 'react-intl'
 import { genericMessages } from '../locales/generic_messages'
-import { ItemModel } from '../models'
 
 export function ApplicationCtx() {
   const intl = useIntl()
   const context = useTraversal()
   const { databases } = context.state.context
   return (
-    <React.Fragment>
+    <>
       <h3>
         {intl.formatMessage({
           id: 'databases',
@@ -28,13 +25,13 @@ export function ApplicationCtx() {
         <ItemTitle title="Objects" />
         {databases.map((db) => (
           <Item
-            item={new ItemModel({ id: db, path: `/${db}/` })}
+            item={{ id: db, path: `/${db}/` }}
             key={db}
             icon={'fas fa-database'}
           />
         ))}
       </div>
-    </React.Fragment>
+    </>
   )
 }
 
@@ -43,14 +40,14 @@ export function DatabaseCtx() {
   const { containers } = context.state.context
   const { path } = context.state
   return (
-    <React.Fragment>
+    <>
       <div className="container">
         <ItemTitle title="Containers" actions={<CreateContainer />} />
         <table className="table is-fullwidth is-hoverable">
           <tbody>
             {containers.map((db) => (
               <Item
-                item={new ItemModel({ id: db, path: `${path}${db}/` })}
+                item={{ id: db, path: `${path}${db}/` }}
                 key={db}
                 icon={'fas fa-archive'}
               />
@@ -58,7 +55,7 @@ export function DatabaseCtx() {
           </tbody>
         </table>
       </div>
-    </React.Fragment>
+    </>
   )
 }
 
@@ -67,7 +64,7 @@ export function CreateContainer() {
   const [isActive, setActive] = useState(false)
 
   return (
-    <React.Fragment>
+    <>
       <ModalAddContainer isActive={isActive} setActive={setActive} />
       <button
         className="button is-warning is-pulled-right"
@@ -78,7 +75,7 @@ export function CreateContainer() {
         </span>
         <span>{intl.formatMessage(genericMessages.create)}</span>
       </button>
-    </React.Fragment>
+    </>
   )
 }
 

From 4f0596d7ea3fcab9da0cbf5ee71f9f6746d77b1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roger=20Boixader=20G=C3=BCell?= <rboixaderg@gmail.com>
Date: Wed, 31 Jan 2024 22:55:08 +0100
Subject: [PATCH 10/20] fix: typescript

---
 src/guillo-gmi/components/input/email.tsx        | 2 +-
 src/guillo-gmi/components/input/form_builder.tsx | 2 +-
 src/guillo-gmi/components/item.tsx               | 2 +-
 src/guillo-gmi/components/panel/addons.tsx       | 8 ++++----
 src/guillo-gmi/contexts/index.tsx                | 3 +++
 5 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/guillo-gmi/components/input/email.tsx b/src/guillo-gmi/components/input/email.tsx
index 57e1074..9ad4d61 100644
--- a/src/guillo-gmi/components/input/email.tsx
+++ b/src/guillo-gmi/components/input/email.tsx
@@ -26,7 +26,7 @@ export const EmailInput = ({
         defaultMessage: 'Invalid email',
       })}
       value={value}
-      data-test={dataTest}
+      dataTest={dataTest}
       icon={<Icon icon="fas fa-envelope" />}
       id={id}
       placeholder={placeholder}
diff --git a/src/guillo-gmi/components/input/form_builder.tsx b/src/guillo-gmi/components/input/form_builder.tsx
index 0caa2f5..4fcd2ab 100644
--- a/src/guillo-gmi/components/input/form_builder.tsx
+++ b/src/guillo-gmi/components/input/form_builder.tsx
@@ -104,7 +104,7 @@ export function FormBuilder({
   }
 
   return (
-    <Form onSubmit={changes}>
+    <Form onSubmit={changes} dataTest={`formAddUserTest`}>
       {fields.map((field) => (
         <GetTag field={field} key={field} />
       ))}
diff --git a/src/guillo-gmi/components/item.tsx b/src/guillo-gmi/components/item.tsx
index 752a2c8..b200257 100644
--- a/src/guillo-gmi/components/item.tsx
+++ b/src/guillo-gmi/components/item.tsx
@@ -38,7 +38,7 @@ interface RItemProps {
 export function RItem({ item, search, columns }: RItemProps) {
   const [, navigate] = useLocation()
   const traversal = useTraversal()
-  const model = new ItemModel(item)
+  const model = new ItemModel(item, traversal.url)
   const link = () => navigate({ path: model.path }, true)
 
   return (
diff --git a/src/guillo-gmi/components/panel/addons.tsx b/src/guillo-gmi/components/panel/addons.tsx
index 0275085..239893b 100644
--- a/src/guillo-gmi/components/panel/addons.tsx
+++ b/src/guillo-gmi/components/panel/addons.tsx
@@ -68,14 +68,14 @@ export function PanelAddons() {
               {intl.formatMessage(messages.available_addons)}
             </h2>
             <hr />
-            {state.data.available.length === 0 && (
+            {(state.data?.available ?? []).length === 0 && (
               <p>
                 {intl.formatMessage(messages.no_available_addons_container)}
               </p>
             )}
             <table className="table is-12">
               <tbody>
-                {state.data.available.map((addon) => (
+                {(state.data?.available ?? []).map((addon) => (
                   <tr key={addon.id}>
                     <td>{addon.title}</td>
                     <td>
@@ -96,14 +96,14 @@ export function PanelAddons() {
               {intl.formatMessage(messages.installed_addons)}
             </h2>
             <hr />
-            {state.data.installed.length === 0 && (
+            {(state.data?.installed ?? []).length === 0 && (
               <p>
                 {intl.formatMessage(messages.no_available_addons_container)}
               </p>
             )}
             <table className="table is-12">
               <tbody>
-                {state.data.installed.map((addon) => (
+                {(state.data?.installed ?? []).map((addon) => (
                   <tr key={addon.id}>
                     <td>{addon.title}</td>
                     <td>
diff --git a/src/guillo-gmi/contexts/index.tsx b/src/guillo-gmi/contexts/index.tsx
index eed7cbd..da76855 100644
--- a/src/guillo-gmi/contexts/index.tsx
+++ b/src/guillo-gmi/contexts/index.tsx
@@ -16,6 +16,7 @@ interface PropsTraversal {
   dispatch: Dispatch<{ type: string; payload: IndexSignature }>
   registry: IndexSignature
   flash: (action: string, result: string) => void
+  url: string
 }
 
 export class Traversal {
@@ -23,6 +24,7 @@ export class Traversal {
   public state
   public client
   public registry
+  public url
   public auth
 
   constructor({ flash, ...props }: PropsTraversal) {
@@ -31,6 +33,7 @@ export class Traversal {
     this.client = props.client
     this.registry = props.registry
     this.auth = props.auth
+    this.url = props.url
     if (typeof flash === 'function') this.flash = flash
   }
 

From 2cdc4f21e86cedfbe0e09e4efe061a678e2455c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roger=20Boixader=20G=C3=BCell?= <rboixaderg@gmail.com>
Date: Wed, 7 Feb 2024 13:43:21 +0100
Subject: [PATCH 11/20] feat: lint

---
 package.json                                  |  3 +-
 src/guillo-gmi/components/behavior_view.tsx   |  7 +++-
 .../components/behaviors/iattachment.tsx      | 10 ++++--
 .../components/behaviors/iimageattachment.tsx | 12 ++++++-
 .../components/behaviors/imultiattachment.tsx | 12 +++++--
 .../behaviors/imultiimageattachment.tsx       | 14 +++++++-
 .../imultiimageorderedattachment.tsx          | 35 ++++++++++++++++---
 src/guillo-gmi/components/context_toolbar.tsx |  5 +--
 .../components/fields/downloadField.tsx       | 11 +++++-
 .../components/fields/editComponent.tsx       |  3 +-
 src/guillo-gmi/components/guillotina.tsx      |  7 ++--
 .../components/input/input_list.tsx           |  3 ++
 .../components/input/search_input.tsx         |  9 ++---
 src/guillo-gmi/components/input/textarea.tsx  |  3 ++
 src/guillo-gmi/components/panel/addons.tsx    |  5 +--
 .../components/panel/properties.tsx           |  6 ++--
 src/guillo-gmi/components/ui/notification.tsx |  6 +++-
 src/guillo-gmi/forms/required_fields.tsx      |  5 +--
 src/guillo-gmi/hooks/useVocabulary.tsx        |  5 +--
 src/guillo-gmi/types/global.ts                |  1 +
 src/guillo-gmi/types/guillotina.ts            | 11 ++++--
 src/guillo-gmi/views/container.tsx            |  1 -
 src/guillo-gmi/views/folder.tsx               |  1 -
 src/guillo-gmi/views/groups.tsx               |  9 ++---
 src/guillo-gmi/views/item.tsx                 |  1 -
 src/guillo-gmi/views/users.tsx                |  7 ++--
 yarn.lock                                     |  7 ++++
 27 files changed, 153 insertions(+), 46 deletions(-)

diff --git a/package.json b/package.json
index c1de958..ecaa922 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,8 @@
     "sass": "1.69.5",
     "serialize-javascript": "5.0.1",
     "typescript": "^5.3.3",
-    "vitest": "^0.34.6"
+    "vitest": "^0.34.6",
+    "@types/react-beautiful-dnd": "13.1.8"
   },
   "scripts": {
     "format": "prettier --write \"src/**/*.{js,ts,tsx}\"",
diff --git a/src/guillo-gmi/components/behavior_view.tsx b/src/guillo-gmi/components/behavior_view.tsx
index aa0e09a..02c48b0 100644
--- a/src/guillo-gmi/components/behavior_view.tsx
+++ b/src/guillo-gmi/components/behavior_view.tsx
@@ -2,8 +2,13 @@ import { useTraversal } from '../contexts'
 import { get } from '../lib/utils'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../locales/generic_messages'
+import { GuillotinaCommonObject, GuillotinaSchema } from '../types/guillotina'
 
-export function BehaviorsView({ context, schema }) {
+interface Props {
+  context: GuillotinaCommonObject
+  schema: GuillotinaSchema
+}
+export function BehaviorsView({ context, schema }: Props) {
   const Ctx = useTraversal()
   const { getBehavior } = Ctx.registry
 
diff --git a/src/guillo-gmi/components/behaviors/iattachment.tsx b/src/guillo-gmi/components/behaviors/iattachment.tsx
index 62d0316..72e326f 100644
--- a/src/guillo-gmi/components/behaviors/iattachment.tsx
+++ b/src/guillo-gmi/components/behaviors/iattachment.tsx
@@ -5,10 +5,16 @@ import { EditableField } from '../fields/editableField'
 import { Table } from '../ui'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
+import {
+  GuillotinaFile,
+  GuillotinaSchemaProperties,
+} from '../../types/guillotina'
 
 interface Props {
-  properties: { [key: string]: any }
-  values: { [key: string]: any }
+  properties: GuillotinaSchemaProperties
+  values: {
+    file: GuillotinaFile
+  }
 }
 
 export function IAttachment({ properties, values }: Props) {
diff --git a/src/guillo-gmi/components/behaviors/iimageattachment.tsx b/src/guillo-gmi/components/behaviors/iimageattachment.tsx
index 3d9c20e..64e5e49 100644
--- a/src/guillo-gmi/components/behaviors/iimageattachment.tsx
+++ b/src/guillo-gmi/components/behaviors/iimageattachment.tsx
@@ -12,10 +12,20 @@ import {
   genericFileMessages,
   genericMessages,
 } from '../../locales/generic_messages'
+import {
+  GuillotinaFile,
+  GuillotinaSchemaProperties,
+} from '../../types/guillotina'
 
 const _sizesImages = ['large', 'preview', 'mini', 'thumb']
 
-export function IImageAttachment({ properties, values }) {
+interface Props {
+  properties: GuillotinaSchemaProperties
+  values: {
+    image: GuillotinaFile
+  }
+}
+export function IImageAttachment({ properties, values }: Props) {
   const intl = useIntl()
   const cfg = useConfig()
   const Ctx = useTraversal()
diff --git a/src/guillo-gmi/components/behaviors/imultiattachment.tsx b/src/guillo-gmi/components/behaviors/imultiattachment.tsx
index 54665ed..e8c33be 100644
--- a/src/guillo-gmi/components/behaviors/imultiattachment.tsx
+++ b/src/guillo-gmi/components/behaviors/imultiattachment.tsx
@@ -14,10 +14,18 @@ import {
   genericMessages,
 } from '../../locales/generic_messages'
 import { LightFile } from '../../types/global'
+import {
+  GuillotinaFile,
+  GuillotinaSchemaProperties,
+} from '../../types/guillotina'
 
 interface Props {
-  properties: any
-  values: any
+  properties: GuillotinaSchemaProperties
+  values: {
+    files: {
+      [key: string]: GuillotinaFile
+    }
+  }
 }
 export function IMultiAttachment({ properties, values }: Props) {
   const intl = useIntl()
diff --git a/src/guillo-gmi/components/behaviors/imultiimageattachment.tsx b/src/guillo-gmi/components/behaviors/imultiimageattachment.tsx
index 97710ce..dff68d9 100644
--- a/src/guillo-gmi/components/behaviors/imultiimageattachment.tsx
+++ b/src/guillo-gmi/components/behaviors/imultiimageattachment.tsx
@@ -14,10 +14,22 @@ import {
   genericFileMessages,
   genericMessages,
 } from '../../locales/generic_messages'
+import {
+  GuillotinaFile,
+  GuillotinaSchemaProperties,
+} from '../../types/guillotina'
 
 const _sizesImages = ['large', 'preview', 'mini', 'thumb']
 
-export function IMultiImageAttachment({ properties, values }) {
+interface Props {
+  properties: GuillotinaSchemaProperties
+  values: {
+    images: {
+      [key: string]: GuillotinaFile
+    }
+  }
+}
+export function IMultiImageAttachment({ properties, values }: Props) {
   const intl = useIntl()
   const cfg = useConfig()
   const [fileKey, setFileKey] = useState('')
diff --git a/src/guillo-gmi/components/behaviors/imultiimageorderedattachment.tsx b/src/guillo-gmi/components/behaviors/imultiimageorderedattachment.tsx
index 7267a94..24ebfab 100644
--- a/src/guillo-gmi/components/behaviors/imultiimageorderedattachment.tsx
+++ b/src/guillo-gmi/components/behaviors/imultiimageorderedattachment.tsx
@@ -6,15 +6,35 @@ import { useCrudContext } from '../../hooks/useCrudContext'
 import { EditableField } from '../fields/editableField'
 import { useConfig } from '../../hooks/useConfig'
 import { useEffect, useState } from 'react'
-import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'
+import {
+  DragDropContext,
+  Draggable,
+  Droppable,
+  DroppableProvided,
+  DroppableStateSnapshot,
+} from 'react-beautiful-dnd'
 import { v4 as uuidv4 } from 'uuid'
 import { defineMessages, useIntl } from 'react-intl'
 import {
   genericFileMessages,
   genericMessages,
 } from '../../locales/generic_messages'
+import {
+  GuillotinaFile,
+  GuillotinaSchemaProperties,
+} from '../../types/guillotina'
 
-const StrictModeDroppable = ({ children, ...props }) => {
+interface StrictModeDroppableProps {
+  children(
+    provided: DroppableProvided,
+    snapshot: DroppableStateSnapshot
+  ): React.ReactElement<HTMLElement>
+  droppableId: string
+}
+const StrictModeDroppable = ({
+  children,
+  droppableId,
+}: StrictModeDroppableProps) => {
   const [enabled, setEnabled] = useState(false)
   useEffect(() => {
     const animation = requestAnimationFrame(() => setEnabled(true))
@@ -26,7 +46,7 @@ const StrictModeDroppable = ({ children, ...props }) => {
   if (!enabled) {
     return null
   }
-  return <Droppable {...props}>{children}</Droppable>
+  return <Droppable droppableId={droppableId}>{children}</Droppable>
 }
 
 const reorder = (list, startIndex, endIndex) => {
@@ -48,7 +68,14 @@ const messages = defineMessages({
     defaultMessage: 'Images sorted',
   },
 })
-export function IMultiImageOrderedAttachment({ properties, values }) {
+
+interface Props {
+  properties: GuillotinaSchemaProperties
+  values: {
+    images: GuillotinaFile[]
+  }
+}
+export function IMultiImageOrderedAttachment({ properties, values }: Props) {
   const intl = useIntl()
   const cfg = useConfig()
   const [sortedList, setSortedList] = useState<string[]>(
diff --git a/src/guillo-gmi/components/context_toolbar.tsx b/src/guillo-gmi/components/context_toolbar.tsx
index 6784697..60d115b 100644
--- a/src/guillo-gmi/components/context_toolbar.tsx
+++ b/src/guillo-gmi/components/context_toolbar.tsx
@@ -23,12 +23,13 @@ export function CreateButton() {
   const Ctx = useTraversal()
   const Config = useConfig()
   useEffect(() => {
-    ;(async function anyNameFunction() {
+    async function anyNameFunction() {
       const types = await Ctx.client.getTypes(Ctx.path)
       setState({
         types: types.filter((item) => !Config.DisabledTypes.includes(item)),
       })
-    })()
+    }
+    anyNameFunction()
   }, [Ctx.path])
 
   const doAction = (item) => {
diff --git a/src/guillo-gmi/components/fields/downloadField.tsx b/src/guillo-gmi/components/fields/downloadField.tsx
index 6b036e6..b742956 100644
--- a/src/guillo-gmi/components/fields/downloadField.tsx
+++ b/src/guillo-gmi/components/fields/downloadField.tsx
@@ -2,7 +2,16 @@ import { useTraversal } from '../../contexts'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
 
-export const DownloadField = ({ value }) => {
+interface DownloadFieldProps {
+  value: {
+    data: {
+      filename: string
+      content_type: string
+    }
+    field: string
+  }
+}
+export const DownloadField = ({ value }: DownloadFieldProps) => {
   const intl = useIntl()
   const Ctx = useTraversal()
   const { data, field } = value
diff --git a/src/guillo-gmi/components/fields/editComponent.tsx b/src/guillo-gmi/components/fields/editComponent.tsx
index 1bd7f74..54faa75 100644
--- a/src/guillo-gmi/components/fields/editComponent.tsx
+++ b/src/guillo-gmi/components/fields/editComponent.tsx
@@ -10,9 +10,10 @@ import { SearchInputList } from '../input/search_input_list'
 import { SearchInput } from '../input/search_input'
 import { useTraversal } from '../../contexts'
 import { Ref, forwardRef } from 'react'
+import { GuillotinaItemsProperty } from '../../types/guillotina'
 
 interface Props {
-  schema: any
+  schema: GuillotinaItemsProperty
   val: any
   setValue: (value: any) => void
   dataTest?: string
diff --git a/src/guillo-gmi/components/guillotina.tsx b/src/guillo-gmi/components/guillotina.tsx
index 2b6e7e5..2f79314 100644
--- a/src/guillo-gmi/components/guillotina.tsx
+++ b/src/guillo-gmi/components/guillotina.tsx
@@ -61,10 +61,8 @@ export function Guillotina({ auth, locale, ...props }: GuillotinaProps) {
 
   console.log('Guillotina component')
   useEffect(() => {
-    ;(async () => {
-      console.log('Get context data', path)
+    const initContext = async () => {
       const data = await client.getContext(path)
-      console.log('Get context data', data)
       if (data.status === 401) {
         dispatch({ type: 'SET_ERROR', payload: 'notallowed' })
         return
@@ -76,7 +74,8 @@ export function Guillotina({ auth, locale, ...props }: GuillotinaProps) {
       const pr = await client.canido(path, Permissions)
       const permissions = await pr.json()
       dispatch({ type: 'SET_CONTEXT', payload: { context, permissions } })
-    })()
+    }
+    initContext()
   }, [path, refresh, client])
 
   const ErrorBoundary = registry.get('views', 'ErrorBoundary')
diff --git a/src/guillo-gmi/components/input/input_list.tsx b/src/guillo-gmi/components/input/input_list.tsx
index 0ed4ed4..ecc5f7e 100644
--- a/src/guillo-gmi/components/input/input_list.tsx
+++ b/src/guillo-gmi/components/input/input_list.tsx
@@ -57,3 +57,6 @@ export const InputList = forwardRef<
     </div>
   )
 })
+
+InputList.displayName = 'InputList'
+export default InputList
diff --git a/src/guillo-gmi/components/input/search_input.tsx b/src/guillo-gmi/components/input/search_input.tsx
index 6aa2ad6..bc89245 100644
--- a/src/guillo-gmi/components/input/search_input.tsx
+++ b/src/guillo-gmi/components/input/search_input.tsx
@@ -1,5 +1,4 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
-import { MouseEvent } from 'react'
 import { buildQs } from '../../lib/search'
 import { parser } from '../../lib/search'
 import useSetState from '../../hooks/useSetState'
@@ -17,7 +16,9 @@ import { Traversal } from '../../contexts'
 function debounce(func, wait) {
   let timeout
   return function () {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const context = this
+    // eslint-disable-next-line prefer-rest-params
     const args = arguments
     const later = function () {
       timeout = null
@@ -54,7 +55,7 @@ interface Props {
   dataTestWrapper?: string
   dataTestSearchInput?: string
   dataTestItem?: string
-  renderTextItemOption?: (item: any) => string
+  renderTextItemOption?: (item: SearchItem) => string
   typeNameQuery?: string
   labelProperty?: string
 }
@@ -160,13 +161,13 @@ export const SearchInput = ({
     }
     const { get } = traversal.registry
     const fnName = get('searchEngineQueryParamsFunction', SearchEngine)
-    let qsParsed = traversal.client[fnName]({
+    const qsParsed = traversal.client[fnName]({
       path: traversal.path,
       start: page * PageSize,
       pageSize: PageSize,
       withDepth: false,
     })
-    let sortParsed = parser(`_sort_des=${labelProperty}`)
+    const sortParsed = parser(`_sort_des=${labelProperty}`)
     let typeNameParsed = []
     if (typeNameQuery) {
       typeNameParsed = parser(`type_name__in=${typeNameQuery}`)
diff --git a/src/guillo-gmi/components/input/textarea.tsx b/src/guillo-gmi/components/input/textarea.tsx
index 1092fd8..6f3c0c4 100644
--- a/src/guillo-gmi/components/input/textarea.tsx
+++ b/src/guillo-gmi/components/input/textarea.tsx
@@ -63,3 +63,6 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props>(
     )
   }
 )
+
+Textarea.displayName = 'Textarea'
+export default Textarea
diff --git a/src/guillo-gmi/components/panel/addons.tsx b/src/guillo-gmi/components/panel/addons.tsx
index 239893b..8aee7fc 100644
--- a/src/guillo-gmi/components/panel/addons.tsx
+++ b/src/guillo-gmi/components/panel/addons.tsx
@@ -30,7 +30,7 @@ export function PanelAddons() {
   })
 
   useEffect(() => {
-    ;(async () => {
+    const getAddons = async () => {
       if (!state.loading && !state.data && !state.error) {
         try {
           const response = await Ctx.client.getAddons(Ctx.pathPrefix)
@@ -40,7 +40,8 @@ export function PanelAddons() {
           setState({ ...state, loading: false, error: err })
         }
       }
-    })()
+    }
+    getAddons()
   }, [action])
 
   const installAddon = async (Ctx, key) => {
diff --git a/src/guillo-gmi/components/panel/properties.tsx b/src/guillo-gmi/components/panel/properties.tsx
index e218f0b..ce20803 100644
--- a/src/guillo-gmi/components/panel/properties.tsx
+++ b/src/guillo-gmi/components/panel/properties.tsx
@@ -8,7 +8,6 @@ import { PropertiesView } from '../properties_view'
 import { useConfig } from '../../hooks/useConfig'
 import useSetState from '../../hooks/useSetState'
 import { useTraversal } from '../../contexts'
-import { get } from '../../lib/utils'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
 import {
@@ -71,7 +70,7 @@ export function PanelProperties() {
     }))
 
   useEffect(() => {
-    ;(async () => {
+    async function getSchema() {
       if (!schema.loading && !schema.data && !schema.error) {
         try {
           setSchema({ loading: true })
@@ -81,7 +80,8 @@ export function PanelProperties() {
           setSchema({ loading: false, error: err })
         }
       }
-    })()
+    }
+    getSchema()
   }, [schema])
 
   return (
diff --git a/src/guillo-gmi/components/ui/notification.tsx b/src/guillo-gmi/components/ui/notification.tsx
index 8d1606c..4910966 100644
--- a/src/guillo-gmi/components/ui/notification.tsx
+++ b/src/guillo-gmi/components/ui/notification.tsx
@@ -1,4 +1,8 @@
-export function Notification({ isColor = '', children }) {
+interface Props {
+  isColor?: string
+  children: React.ReactNode
+}
+export function Notification({ isColor = '', children }: Props) {
   return (
     <div className={'notification is-' + isColor} data-test="notificationTest">
       {children}
diff --git a/src/guillo-gmi/forms/required_fields.tsx b/src/guillo-gmi/forms/required_fields.tsx
index b58e83a..c58108f 100644
--- a/src/guillo-gmi/forms/required_fields.tsx
+++ b/src/guillo-gmi/forms/required_fields.tsx
@@ -48,7 +48,7 @@ export function RequiredFieldsForm({
   })
 
   useEffect(() => {
-    ;(async () => {
+    const getSchema = async () => {
       if (!schema.loading && !schema.data && !schema.error) {
         try {
           setSchema({ loading: true })
@@ -62,7 +62,8 @@ export function RequiredFieldsForm({
           setSchema({ loading: false, error: err })
         }
       }
-    })()
+    }
+    getSchema()
   }, [schema])
 
   const submit = () => {
diff --git a/src/guillo-gmi/hooks/useVocabulary.tsx b/src/guillo-gmi/hooks/useVocabulary.tsx
index 173d6ff..c376295 100644
--- a/src/guillo-gmi/hooks/useVocabulary.tsx
+++ b/src/guillo-gmi/hooks/useVocabulary.tsx
@@ -23,7 +23,7 @@ export function useVocabulary(vocabularyName: string, path: string = null) {
   }
 
   useEffect(() => {
-    ;(async () => {
+    const getVocabulary = async () => {
       if (
         vocabularyName &&
         vocabulary.data === undefined &&
@@ -38,7 +38,8 @@ export function useVocabulary(vocabularyName: string, path: string = null) {
           setVocabulary({ loading: false, error: err, data: undefined })
         }
       }
-    })()
+    }
+    getVocabulary()
   }, [vocabularyName, vocabulary, path])
 
   return vocabulary
diff --git a/src/guillo-gmi/types/global.ts b/src/guillo-gmi/types/global.ts
index 699a315..8141057 100644
--- a/src/guillo-gmi/types/global.ts
+++ b/src/guillo-gmi/types/global.ts
@@ -4,6 +4,7 @@ export interface LightFile {
   'content-type': string
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface IndexSignature<T = any> {
   [key: string]: T
 }
diff --git a/src/guillo-gmi/types/guillotina.ts b/src/guillo-gmi/types/guillotina.ts
index cf1e3c7..677af98 100644
--- a/src/guillo-gmi/types/guillotina.ts
+++ b/src/guillo-gmi/types/guillotina.ts
@@ -5,6 +5,8 @@ type ItemsPropertyObject = {
   '@name': string
   '@type': string
   '@uid': string
+  __behaviors__: string[]
+  '@static_behaviors': string[]
 }
 
 export interface GuillotinaSchema {
@@ -26,12 +28,17 @@ export interface Definitions {
   }
 }
 
-export interface Items {
+export interface GuillotinaItemsProperty {
   type: string
   widget?: string
   properties?: GuillotinaSchemaProperties
   vocabulary?: string[]
   vocabularyName?: string
+  queryCondition?: string
+  queryPath?: string
+  labelProperty?: string
+  typeNameQuery?: string
+  items: GuillotinaItemsProperty
 }
 export interface GuillotinaSchemaProperty {
   type: string
@@ -41,7 +48,7 @@ export interface GuillotinaSchemaProperty {
   description?: string
   vocabularyName?: string
   vocabulary?: string[]
-  items?: Items
+  items?: GuillotinaItemsProperty
   properties?: GuillotinaSchemaProperties
   additionalProperties?: GuillotinaSchemaProperties
   typeNameQuery?: string
diff --git a/src/guillo-gmi/views/container.tsx b/src/guillo-gmi/views/container.tsx
index 5aeabe5..626eb68 100644
--- a/src/guillo-gmi/views/container.tsx
+++ b/src/guillo-gmi/views/container.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { TabsPanel } from '../components/tabs'
 import { ContextToolbar } from '../components/context_toolbar'
 import { PanelItems } from '../components/panel/items'
diff --git a/src/guillo-gmi/views/folder.tsx b/src/guillo-gmi/views/folder.tsx
index 284733f..822a0a3 100644
--- a/src/guillo-gmi/views/folder.tsx
+++ b/src/guillo-gmi/views/folder.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { TabsPanel } from '../components/tabs'
 import { ContextToolbar } from '../components/context_toolbar'
 import { PanelItems } from '../components/panel/items'
diff --git a/src/guillo-gmi/views/groups.tsx b/src/guillo-gmi/views/groups.tsx
index 7437ecf..4185eb3 100644
--- a/src/guillo-gmi/views/groups.tsx
+++ b/src/guillo-gmi/views/groups.tsx
@@ -93,8 +93,8 @@ export function GroupsCtx(props) {
   )
 }
 
-let sortParsed = parser(`_sort_asc=id`)
-let searchParsed = parser('type_name=User')
+const sortParsed = parser(`_sort_asc=id`)
+const searchParsed = parser('type_name=User')
 
 export function GroupCtx() {
   const intl = useIntl()
@@ -102,7 +102,7 @@ export function GroupCtx() {
   const [roles, setRoles] = useState([])
 
   useEffect(() => {
-    ;(async () => {
+    async function getRoles() {
       const requestGetRoles = await Ctx.client.getRoles(Ctx.path)
       let roles = []
 
@@ -113,7 +113,8 @@ export function GroupCtx() {
         }))
       }
       setRoles(roles)
-    })()
+    }
+    getRoles()
   }, [])
 
   const handleResponse = async (isError, message, errorMessage) => {
diff --git a/src/guillo-gmi/views/item.tsx b/src/guillo-gmi/views/item.tsx
index 6597fc5..69a83cb 100644
--- a/src/guillo-gmi/views/item.tsx
+++ b/src/guillo-gmi/views/item.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { TabsPanel } from '../components/tabs'
 import { useTraversal } from '../contexts'
 import { PanelPermissions } from '../components/panel/permissions'
diff --git a/src/guillo-gmi/views/users.tsx b/src/guillo-gmi/views/users.tsx
index 2974c68..6772caf 100644
--- a/src/guillo-gmi/views/users.tsx
+++ b/src/guillo-gmi/views/users.tsx
@@ -105,13 +105,13 @@ export function UserCtx() {
   const [remotes, updateRemote] = useRemoteField(fields)
 
   useEffect(() => {
-    ;(async () => {
+    async function getRolesAndGroups() {
       const [requestGetGroups, requestGetRoles] = await Promise.all([
         Ctx.client.search(Ctx.path, { type_name: 'Group' }, true),
         Ctx.client.getRoles(Ctx.path),
       ])
 
-      let groups = requestGetGroups
+      const groups = requestGetGroups
       let roles = []
 
       if (requestGetRoles.ok) {
@@ -125,7 +125,8 @@ export function UserCtx() {
           text: item['@name'],
         })),
       })
-    })()
+    }
+    getRolesAndGroups()
   }, [])
 
   const updateObject = async (data) => {
diff --git a/yarn.lock b/yarn.lock
index 5479e26..40e751d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1886,6 +1886,13 @@
   resolved "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
+"@types/react-beautiful-dnd@13.1.8":
+  version "13.1.8"
+  resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.8.tgz#f52d3ea07e1e19159d6c3c4a48c8da3d855e60b4"
+  integrity sha512-E3TyFsro9pQuK4r8S/OL6G99eq7p8v29sX0PM7oT8Z+PJfZvSQTx4zTQbUJ+QZXioAF0e7TGBEcA1XhYhCweyQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-redux@^7.1.20":
   version "7.1.31"
   resolved "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.31.tgz"

From dc7e03de2ac05a0c1147ae0f9e3140aa7ef166b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roger=20Boixader=20G=C3=BCell?= <rboixaderg@gmail.com>
Date: Wed, 7 Feb 2024 13:46:24 +0100
Subject: [PATCH 12/20] chore: types

---
 src/guillo-gmi/components/fields/editableField.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/guillo-gmi/components/fields/editableField.tsx b/src/guillo-gmi/components/fields/editableField.tsx
index fa6ae8a..c2f50ca 100644
--- a/src/guillo-gmi/components/fields/editableField.tsx
+++ b/src/guillo-gmi/components/fields/editableField.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Button } from '../input/button'
 import { useCrudContext } from '../../hooks/useCrudContext'
 import { useConfig } from '../../hooks/useConfig'

From f65a8a53616c8d9fe6be09272b16cb30726a1063 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roger=20Boixader=20G=C3=BCell?= <rboixaderg@gmail.com>
Date: Sat, 24 Feb 2024 12:44:23 +0100
Subject: [PATCH 13/20] chore: format

---
 .../components/input/input_list.tsx           | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/guillo-gmi/components/input/input_list.tsx b/src/guillo-gmi/components/input/input_list.tsx
index 61cf517..f9acdad 100644
--- a/src/guillo-gmi/components/input/input_list.tsx
+++ b/src/guillo-gmi/components/input/input_list.tsx
@@ -22,27 +22,27 @@ export const InputList = forwardRef<
 
   return (
     <div className="control">
-       {(value ?? []).length > 0 && (
+      {(value ?? []).length > 0 && (
         <div className="tags">
-        {value.map((tag, index) => (
-          <div
-            key={`input_list_${tag}_${index}`}
-            className="tag is-info is-medium"
-          >
-            {tag}
-            <button
-              className="delete is-small"
-              onClick={() =>
-                onChange([
-                  ...value.filter((tag) => value.indexOf(tag) !== index),
-                ])
-              }
-            ></button>
-          </div>
-        ))}
-      </div>
-       )}
-      
+          {value.map((tag, index) => (
+            <div
+              key={`input_list_${tag}_${index}`}
+              className="tag is-info is-medium"
+            >
+              {tag}
+              <button
+                className="delete is-small"
+                onClick={() =>
+                  onChange([
+                    ...value.filter((tag) => value.indexOf(tag) !== index),
+                  ])
+                }
+              ></button>
+            </div>
+          ))}
+        </div>
+      )}
+
       <Input
         type="text"
         placeholder={intl.formatMessage({

From 08a9ce8f98ef2b6226490b6849017407d35c0f7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roger=20Boixader=20G=C3=BCell?= <rboixaderg@gmail.com>
Date: Sat, 24 Feb 2024 12:46:52 +0100
Subject: [PATCH 14/20] fix: build

---
 src/guillo-gmi/components/fields/editComponent.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/guillo-gmi/components/fields/editComponent.tsx b/src/guillo-gmi/components/fields/editComponent.tsx
index 96e03c0..ab45011 100644
--- a/src/guillo-gmi/components/fields/editComponent.tsx
+++ b/src/guillo-gmi/components/fields/editComponent.tsx
@@ -116,10 +116,8 @@ export const EditComponent = forwardRef(
         }
       }
       return (
-        <React.Fragment>
-          {rest.placeholder && (
-            <label className="label">{rest.placeholder}</label>
-          )}
+        <>
+          {placeholder && <label className="label">{placeholder}</label>}
           <InputList
             value={val || []}
             className={className}
@@ -127,7 +125,7 @@ export const EditComponent = forwardRef(
             ref={ref as Ref<HTMLInputElement>}
             dataTest={dataTest}
           />
-        </React.Fragment>
+        </>
       )
     } else if (schema?.widget === 'file') {
       return (

From 1006a3addbec16b6f5b41b411642d9885f4f2a97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roger=20Boixader=20G=C3=BCell?= <rboixaderg@gmail.com>
Date: Sat, 2 Mar 2024 17:01:26 +0100
Subject: [PATCH 15/20] feat: add new fields and update render field and edit
 component, also improve move and delete item action

---
 .../guillotina_react_app/gmi/interface.py     | 24 +++++++-
 src/guillo-gmi/actions/move_item.tsx          |  1 -
 src/guillo-gmi/actions/remove_item.tsx        |  1 -
 .../components/fields/editComponent.tsx       | 57 ++++++++++++++++++-
 .../components/fields/renderField.tsx         | 17 ++++--
 src/guillo-gmi/components/input/select.tsx    |  3 +-
 src/guillo-gmi/components/layout.tsx          |  1 -
 src/guillo-gmi/hooks/useRegistry.tsx          | 14 ++++-
 src/guillo-gmi/lib/auth.ts                    |  1 +
 src/guillo-gmi/lib/client.tsx                 |  2 +-
 src/guillo-gmi/types/guillotina.ts            |  1 +
 11 files changed, 106 insertions(+), 16 deletions(-)

diff --git a/guillotina_example/guillotina_react_app/guillotina_react_app/gmi/interface.py b/guillotina_example/guillotina_react_app/guillotina_react_app/gmi/interface.py
index d09872a..7733582 100644
--- a/guillotina_example/guillotina_react_app/guillotina_react_app/gmi/interface.py
+++ b/guillotina_example/guillotina_react_app/guillotina_react_app/gmi/interface.py
@@ -10,8 +10,23 @@
         "type": "object", 
         "properties": {
             "items": {
-                "type": "array"
-            }
+                "type": "array",
+                "title": "Array in json"
+            },
+            "text": {
+                "type": "string", 
+                "title": "Text in json"
+            },
+            "second_level": {
+                "type": "object",
+                "title": "Two levels",
+                "properties": {
+                    "first_item_second_level": {
+                        "type": "string",
+                        "title": "Item second level text",
+                    },
+                },
+            },
         }
     }
 )
@@ -25,6 +40,9 @@ class IGMI(interfaces.IFolder):
     index_field("text_field", type="searchabletext")
     text_field = schema.Text(title="Text field", required=False)
 
+    index_field("textarea_field", type="searchabletext")
+    textarea_field = schema.Text(title="Text area field", required=True, widget="textarea")
+
 
     text_line_field = schema.TextLine(title="Text line field")
     index_field("number_field", type="int")
@@ -44,6 +62,7 @@ class IGMI(interfaces.IFolder):
     choice_field_vocabulary = schema.Choice(
         title="Choice field vocabulary",
         vocabulary="gmi_vocabulary",
+        required=True,
     )
 
     index_field("choice_field", type="keyword")
@@ -83,6 +102,7 @@ class IGMI(interfaces.IFolder):
         widget="search_list",
         labelProperty="title",
         typeNameQuery="GMI",
+        required=True
     )
 
     brother_gmi = schema.Text(
diff --git a/src/guillo-gmi/actions/move_item.tsx b/src/guillo-gmi/actions/move_item.tsx
index 78dbd43..c6b02cb 100644
--- a/src/guillo-gmi/actions/move_item.tsx
+++ b/src/guillo-gmi/actions/move_item.tsx
@@ -34,7 +34,6 @@ export function MoveItem(props: Props) {
       Ctx.flash(`Failed to move item!: ${errorMessage}`, 'danger')
     }
 
-    Ctx.refresh()
     Ctx.cancelAction()
   }
 
diff --git a/src/guillo-gmi/actions/remove_item.tsx b/src/guillo-gmi/actions/remove_item.tsx
index 30e2a60..c0c8637 100644
--- a/src/guillo-gmi/actions/remove_item.tsx
+++ b/src/guillo-gmi/actions/remove_item.tsx
@@ -28,7 +28,6 @@ export function RemoveItem(props: Props) {
       Ctx.flash(`Failed to delete item!: ${errorMessage}`, 'danger')
     }
 
-    Ctx.refresh()
     Ctx.cancelAction()
   }
 
diff --git a/src/guillo-gmi/components/fields/editComponent.tsx b/src/guillo-gmi/components/fields/editComponent.tsx
index ab45011..be219cd 100644
--- a/src/guillo-gmi/components/fields/editComponent.tsx
+++ b/src/guillo-gmi/components/fields/editComponent.tsx
@@ -11,6 +11,7 @@ import { SearchInput } from '../input/search_input'
 import { useTraversal } from '../../contexts'
 import { Ref, forwardRef } from 'react'
 import { GuillotinaItemsProperty } from '../../types/guillotina'
+import { IndexSignature } from '../../types/global'
 
 interface Props {
   schema: GuillotinaItemsProperty
@@ -19,10 +20,24 @@ interface Props {
   dataTest?: string
   className?: string
   placeholder?: string
+  id?: string
+  required?: boolean
 }
 
 export const EditComponent = forwardRef(
-  ({ schema, val, setValue, dataTest, className, placeholder }: Props, ref) => {
+  (
+    {
+      schema,
+      val,
+      setValue,
+      dataTest,
+      className,
+      placeholder,
+      id,
+      required,
+    }: Props,
+    ref
+  ) => {
     const traversal = useTraversal()
 
     if (schema?.widget === 'search_list') {
@@ -71,6 +86,8 @@ export const EditComponent = forwardRef(
           onChange={(ev) => setValue(ev)}
           ref={ref as Ref<HTMLTextAreaElement>}
           dataTest={dataTest}
+          placeholder={placeholder}
+          id={id}
         />
       )
     } else if (schema?.type === 'boolean') {
@@ -94,6 +111,8 @@ export const EditComponent = forwardRef(
               dataTest={dataTest}
               onChange={setValue}
               multiple
+              placeholder={placeholder}
+              id={id}
             />
           )
         } else if (schema?.items?.vocabulary) {
@@ -111,6 +130,8 @@ export const EditComponent = forwardRef(
               })}
               multiple
               onChange={setValue}
+              placeholder={placeholder}
+              id={id}
             />
           )
         }
@@ -146,6 +167,8 @@ export const EditComponent = forwardRef(
             dataTest={dataTest}
             onChange={setValue}
             vocabularyName={get(schema, 'vocabularyName', null)}
+            placeholder={placeholder}
+            id={id}
           />
         )
       }
@@ -164,8 +187,35 @@ export const EditComponent = forwardRef(
             }
           })}
           onChange={setValue}
+          placeholder={placeholder}
+          id={id}
         />
       )
+    } else if (schema?.type === 'object' && schema.widget !== 'file') {
+      const value = val as IndexSignature
+      return (
+        <>
+          {schema.title && <h4 className="subtitle mt-2">{schema.title}</h4>}
+          {Object.keys(get(schema, 'properties', {})).map((key) => {
+            const subSchema = get(schema, 'properties', {})[key]
+            const requiredFields: string[] = get(schema, 'required', [])
+            return (
+              <EditComponent
+                key={`${id}[${key}]`}
+                id={`${id}[${key}]`}
+                schema={subSchema}
+                val={value && key in value ? value[key] : ''}
+                placeholder={subSchema?.title ?? ''}
+                required={requiredFields.includes(key)}
+                setValue={(ev) => {
+                  setValue({ ...value, [key]: ev })
+                }}
+                dataTest={`${key}TestInput`}
+              />
+            )
+          })}
+        </>
+      )
     }
     const getInputType = () => {
       switch (schema?.type) {
@@ -175,6 +225,8 @@ export const EditComponent = forwardRef(
           return 'date'
         case 'datetime':
           return 'datetime-local'
+        case 'time':
+          return 'time'
         default:
           return 'text'
       }
@@ -187,6 +239,9 @@ export const EditComponent = forwardRef(
         onChange={(ev) => setValue(ev)}
         ref={ref as Ref<HTMLInputElement>}
         type={getInputType()}
+        required={required}
+        placeholder={placeholder}
+        id={id}
       />
     )
   }
diff --git a/src/guillo-gmi/components/fields/renderField.tsx b/src/guillo-gmi/components/fields/renderField.tsx
index 937da78..42f0e55 100644
--- a/src/guillo-gmi/components/fields/renderField.tsx
+++ b/src/guillo-gmi/components/fields/renderField.tsx
@@ -39,7 +39,12 @@ export function RenderField({ value, Widget, schema }: RenderFieldProps) {
       ))
     }
     return Object.keys(value).map((key) => (
-      <FieldValue field={key} value={value[key]} key={key} />
+      <FieldValue
+        field={get(schema, `properties.${key}.title`, key)}
+        schema={get(schema, `properties.${key}`, {})}
+        value={value[key]}
+        key={key}
+      />
     ))
   }
   return <p>No render for {JSON.stringify(value)}</p>
@@ -48,12 +53,13 @@ export function RenderField({ value, Widget, schema }: RenderFieldProps) {
 interface FieldValueProps {
   field: string
   value: unknown
+  schema: GuillotinaSchemaProperty
 }
-const FieldValue = ({ field, value }: FieldValueProps) => (
+const FieldValue = ({ field, value, schema }: FieldValueProps) => (
   <div className="field">
     <div className="label">{field}</div>
     <div className="value">
-      <RenderField value={value} />
+      <RenderFieldComponent val={value} schema={schema} field={field} />
     </div>
   </div>
 )
@@ -197,7 +203,7 @@ interface RenderFieldComponentProps {
   schema: GuillotinaSchemaProperty
   field: string
   val: any
-  modifyContent: boolean
+  modifyContent?: boolean
 }
 export function RenderFieldComponent({
   schema,
@@ -215,6 +221,7 @@ export function RenderFieldComponent({
         (modifyContent
           ? DEFAULT_VALUE_EDITABLE_FIELD
           : DEFAULT_VALUE_NO_EDITABLE_FIELD),
+      schema: schema,
     }
     if (val && schema?.widget === 'file') {
       renderProps['value'] = {
@@ -228,14 +235,12 @@ export function RenderFieldComponent({
       renderProps['value'] = new Date(val).toLocaleString()
     } else if (schema?.items?.vocabularyName || schema?.vocabularyName) {
       renderProps['Widget'] = VocabularyRenderField
-      renderProps['schema'] = schema
     } else if (
       schema?.widget === 'search' ||
       schema?.widget === 'search_list'
     ) {
       renderProps['Widget'] = SearchRenderField
       renderProps['value'] = val
-      renderProps['schema'] = schema
     }
     return renderProps
   }
diff --git a/src/guillo-gmi/components/input/select.tsx b/src/guillo-gmi/components/input/select.tsx
index 6d6cc15..c585d00 100644
--- a/src/guillo-gmi/components/input/select.tsx
+++ b/src/guillo-gmi/components/input/select.tsx
@@ -3,6 +3,7 @@ import { classnames, generateUID } from '../../lib/helpers'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
 import { forwardRef, useState } from 'react'
+import { IndexSignature } from '../../types/global'
 // @ TODO implement hasErrors
 
 interface Props {
@@ -19,7 +20,7 @@ interface Props {
   onChange?: (value: string | string[]) => void
   options: { text: string; value: string }[]
   appendDefault?: boolean
-  style?: any
+  style?: IndexSignature
   dataTest?: string
   value?: string | string[]
 }
diff --git a/src/guillo-gmi/components/layout.tsx b/src/guillo-gmi/components/layout.tsx
index ca1545b..f1f2157 100644
--- a/src/guillo-gmi/components/layout.tsx
+++ b/src/guillo-gmi/components/layout.tsx
@@ -22,7 +22,6 @@ export function Layout({ children, onLogout, auth }: Props) {
             </a>
             <a
               id="burger"
-              href="/"
               role="button"
               className="navbar-burger burger"
               aria-label="menu"
diff --git a/src/guillo-gmi/hooks/useRegistry.tsx b/src/guillo-gmi/hooks/useRegistry.tsx
index a791ccc..1a0b305 100644
--- a/src/guillo-gmi/hooks/useRegistry.tsx
+++ b/src/guillo-gmi/hooks/useRegistry.tsx
@@ -31,6 +31,7 @@ import { NotFound } from '../components/notfound'
 import { Path } from '../components/path'
 import { EditComponent } from '../components/fields/editComponent'
 import { RenderFieldComponent } from '../components/fields/renderField'
+import { GuillotinaSchema } from '../types/guillotina'
 
 export interface IRegistry {
   paths: {
@@ -48,8 +49,17 @@ export interface IRegistry {
   behaviors: {
     [key: string]: React.FC
   }
-  itemsColumn: any
-  schemas: any
+  itemsColumn: {
+    [key: string]: () => {
+      label: string
+      key: string
+      isSortable?: boolean
+      child: React.ReactNode
+    }[]
+  }
+  schemas: {
+    [key: string]: GuillotinaSchema
+  }
   properties: {
     [key: string]: React.FC
   }
diff --git a/src/guillo-gmi/lib/auth.ts b/src/guillo-gmi/lib/auth.ts
index d3ee416..23688b6 100644
--- a/src/guillo-gmi/lib/auth.ts
+++ b/src/guillo-gmi/lib/auth.ts
@@ -141,6 +141,7 @@ export class Auth {
     if (!authToken) return {}
 
     if (this.willExpire(expires) && this.retryRefresh < this.maxRetry) {
+      // eslint-disable-next-line no-extra-semi
       ;(async () => await this.refreshToken())()
     }
 
diff --git a/src/guillo-gmi/lib/client.tsx b/src/guillo-gmi/lib/client.tsx
index a12375e..580284b 100644
--- a/src/guillo-gmi/lib/client.tsx
+++ b/src/guillo-gmi/lib/client.tsx
@@ -87,7 +87,7 @@ export class GuillotinaClient {
     result = [
       ...parser(start.toString(), '_from'),
       ...parser(pageSize.toString(), 'size'),
-      ...parser('*', '_metadata=*'),
+      ...parser('*', '_metadata'),
     ]
 
     if (withDepth) {
diff --git a/src/guillo-gmi/types/guillotina.ts b/src/guillo-gmi/types/guillotina.ts
index 677af98..a20d4fe 100644
--- a/src/guillo-gmi/types/guillotina.ts
+++ b/src/guillo-gmi/types/guillotina.ts
@@ -39,6 +39,7 @@ export interface GuillotinaItemsProperty {
   labelProperty?: string
   typeNameQuery?: string
   items: GuillotinaItemsProperty
+  title: string
 }
 export interface GuillotinaSchemaProperty {
   type: string

From 942e67b490ad752660dcc2048f3e52a7c88a5df2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roger=20Boixader=20G=C3=BCell?= <rboixaderg@gmail.com>
Date: Sun, 3 Mar 2024 09:58:01 +0100
Subject: [PATCH 16/20] chore: interface guillotina

---
 .../guillotina_react_app/gmi/interface.py                     | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/guillotina_example/guillotina_react_app/guillotina_react_app/gmi/interface.py b/guillotina_example/guillotina_react_app/guillotina_react_app/gmi/interface.py
index 7733582..a9bc195 100644
--- a/guillotina_example/guillotina_react_app/guillotina_react_app/gmi/interface.py
+++ b/guillotina_example/guillotina_react_app/guillotina_react_app/gmi/interface.py
@@ -41,7 +41,7 @@ class IGMI(interfaces.IFolder):
     text_field = schema.Text(title="Text field", required=False)
 
     index_field("textarea_field", type="searchabletext")
-    textarea_field = schema.Text(title="Text area field", required=True, widget="textarea")
+    textarea_field = schema.Text(title="Text area field", required=False, widget="textarea")
 
 
     text_line_field = schema.TextLine(title="Text line field")
@@ -62,7 +62,6 @@ class IGMI(interfaces.IFolder):
     choice_field_vocabulary = schema.Choice(
         title="Choice field vocabulary",
         vocabulary="gmi_vocabulary",
-        required=True,
     )
 
     index_field("choice_field", type="keyword")
@@ -102,7 +101,6 @@ class IGMI(interfaces.IFolder):
         widget="search_list",
         labelProperty="title",
         typeNameQuery="GMI",
-        required=True
     )
 
     brother_gmi = schema.Text(

From 49ee97cbbe89654164999bb9a0fda916de6cf45a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roger=20Boixader=20G=C3=BCell?= <rboixaderg@gmail.com>
Date: Sun, 3 Mar 2024 16:24:33 +0100
Subject: [PATCH 17/20] feat: new interface, required all fields

---
 .../guillotina_react_app/__init__.py          |   1 +
 .../gmi_required/__init__.py                  |   2 +
 .../gmi_required/content.py                   |  18 +++
 .../gmi_required/interface.py                 | 119 ++++++++++++++++++
 4 files changed, 140 insertions(+)
 create mode 100644 guillotina_example/guillotina_react_app/guillotina_react_app/gmi_required/__init__.py
 create mode 100644 guillotina_example/guillotina_react_app/guillotina_react_app/gmi_required/content.py
 create mode 100644 guillotina_example/guillotina_react_app/guillotina_react_app/gmi_required/interface.py

diff --git a/guillotina_example/guillotina_react_app/guillotina_react_app/__init__.py b/guillotina_example/guillotina_react_app/guillotina_react_app/__init__.py
index 22b8cfb..e05493c 100644
--- a/guillotina_example/guillotina_react_app/guillotina_react_app/__init__.py
+++ b/guillotina_example/guillotina_react_app/guillotina_react_app/__init__.py
@@ -22,4 +22,5 @@ def includeme(root):
     configure.scan("guillotina_react_app.vocabularies")
     configure.scan("guillotina_react_app.gmi")
     configure.scan("guillotina_react_app.gmi_behaviors")
+    configure.scan("guillotina_react_app.gmi_required")
     configure.scan("guillotina_react_app.workflow")
diff --git a/guillotina_example/guillotina_react_app/guillotina_react_app/gmi_required/__init__.py b/guillotina_example/guillotina_react_app/guillotina_react_app/gmi_required/__init__.py
new file mode 100644
index 0000000..556bc24
--- /dev/null
+++ b/guillotina_example/guillotina_react_app/guillotina_react_app/gmi_required/__init__.py
@@ -0,0 +1,2 @@
+from . import content
+from . import interface
\ No newline at end of file
diff --git a/guillotina_example/guillotina_react_app/guillotina_react_app/gmi_required/content.py b/guillotina_example/guillotina_react_app/guillotina_react_app/gmi_required/content.py
new file mode 100644
index 0000000..fc6f5ce
--- /dev/null
+++ b/guillotina_example/guillotina_react_app/guillotina_react_app/gmi_required/content.py
@@ -0,0 +1,18 @@
+from guillotina import configure
+from guillotina import content
+from guillotina_react_app.gmi_required.interface import IGMIAllRequired
+
+@configure.contenttype(
+    type_name="GMIAllRequired",
+    schema=IGMIAllRequired,
+    behaviors=[
+        "guillotina.behaviors.dublincore.IDublinCore",
+        "guillotina.behaviors.attachment.IAttachment",
+        "guillotina.contrib.image.behaviors.IImageAttachment",
+        "guillotina.contrib.workflows.interfaces.IWorkflowBehavior",
+        "guillotina.contrib.image.behaviors.IMultiImageOrderedAttachment",
+    ],
+    add_permission="guillotina.AddContent"
+)
+class GMIAllRequired(content.Folder):
+    pass
\ No newline at end of file
diff --git a/guillotina_example/guillotina_react_app/guillotina_react_app/gmi_required/interface.py b/guillotina_example/guillotina_react_app/guillotina_react_app/gmi_required/interface.py
new file mode 100644
index 0000000..a121cd8
--- /dev/null
+++ b/guillotina_example/guillotina_react_app/guillotina_react_app/gmi_required/interface.py
@@ -0,0 +1,119 @@
+import json
+from guillotina import interfaces
+from guillotina import schema
+from guillotina.directives import index_field
+from guillotina.fields import CloudFileField
+
+JSON_EXAMPLE_SCHEMA = json.dumps(
+    {
+        "title": "My Json Field",
+        "type": "object", 
+        "properties": {
+            "items": {
+                "type": "array",
+                "title": "Array in json"
+            },
+            "text": {
+                "type": "string", 
+                "title": "Text in json"
+            },
+            "second_level": {
+                "type": "object",
+                "title": "Two levels",
+                "properties": {
+                    "first_item_second_level": {
+                        "type": "string",
+                        "title": "Item second level text",
+                    },
+                },
+            },
+        }
+    }
+)
+class IGMIAllRequired(interfaces.IFolder):
+
+    json_example = schema.JSONField(schema=JSON_EXAMPLE_SCHEMA, required=False)
+
+    index_field("text_richtext_field", type="searchabletext")
+    text_richtext_field = schema.Text(title="Text richtext field", required=True, widget="richtext")
+
+    index_field("text_field", type="searchabletext")
+    text_field = schema.Text(title="Text field", required=True)
+
+    index_field("textarea_field", type="searchabletext")
+    textarea_field = schema.Text(title="Text area field", required=True, widget="textarea")
+
+
+    text_line_field = schema.TextLine(title="Text line field", required=True)
+    index_field("number_field", type="int")
+    number_field = schema.Int(title="Number field", required=True)
+    index_field("boolean_field", type="boolean")
+    boolean_field = schema.Bool(title="Boolean field")
+    cloud_file_field = CloudFileField(title="Cloud file field")
+    list_field = schema.List(title="List field", value_type=schema.TextLine(), missing_value=[], required=True)
+    
+    index_field("datetime_field", type="date")
+    datetime_field = schema.Datetime(title="Datetime field", required=True)
+
+    index_field("time_field", type="text")
+    time_field = schema.Time(title="Time field", required=True)
+
+    index_field("date_field", type="date")
+    date_field = schema.Date(title="Date field", required=True)
+
+    index_field("choice_field_vocabulary", type="keyword")
+    choice_field_vocabulary = schema.Choice(
+        title="Choice field vocabulary",
+        vocabulary="gmi_vocabulary",
+        required=True
+    )
+
+    index_field("choice_field", type="keyword")
+    choice_field = schema.Choice(
+        title="Choice field",
+        values=["date", "integer", "text", "float", "keyword", "boolean"],
+        required=True,
+    )
+
+    index_field("multiple_choice_field", type="keyword")
+    multiple_choice_field = schema.List(
+        title="Multiple choice field", 
+        value_type=schema.Choice(
+            title="Choice field",
+            values=["date", "integer", "text", "float", "keyword", "boolean"],
+        ), 
+        missing_value=[],
+        required=True
+    )
+
+    index_field("multiple_choice_field_vocabulary", type="keyword")
+    multiple_choice_field_vocabulary = schema.List(
+        title="Multiple choice field vocabulary", 
+        value_type=schema.Choice(
+            title="Choice field vocabulary",
+            vocabulary="gmi_vocabulary",
+            required=True,
+        ), 
+        missing_value=[],
+        required=True
+    )
+
+    gmi_ids = schema.List(
+        title="GMI list",
+        value_type=schema.TextLine(),
+        default=[],
+        null=True,
+        blank=True,
+        widget="search_list",
+        labelProperty="title",
+        typeNameQuery="GMI",
+        required=True
+    )
+
+    brother_gmi = schema.Text(
+        title="Brother GMI", 
+        widget="search",
+        typeNameQuery="GMI",
+        labelProperty="title",
+        required=True
+    )

From b9fde502551fcfae99ecc7422d9f47ff65983354 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roger=20Boixader=20G=C3=BCell?= <rboixaderg@gmail.com>
Date: Sun, 3 Mar 2024 16:25:03 +0100
Subject: [PATCH 18/20] feat: prevent default some components

---
 src/guillo-gmi/components/guillotina.tsx              |  1 -
 src/guillo-gmi/components/input/input_list.tsx        |  7 +++++--
 src/guillo-gmi/components/input/search_input.tsx      |  2 ++
 src/guillo-gmi/components/input/search_input_list.tsx | 11 +++++++----
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/guillo-gmi/components/guillotina.tsx b/src/guillo-gmi/components/guillotina.tsx
index 2f79314..4146109 100644
--- a/src/guillo-gmi/components/guillotina.tsx
+++ b/src/guillo-gmi/components/guillotina.tsx
@@ -59,7 +59,6 @@ export function Guillotina({ auth, locale, ...props }: GuillotinaProps) {
     dispatch({ type: 'SET_PATH', payload: searchPath })
   }, [searchPath])
 
-  console.log('Guillotina component')
   useEffect(() => {
     const initContext = async () => {
       const data = await client.getContext(path)
diff --git a/src/guillo-gmi/components/input/input_list.tsx b/src/guillo-gmi/components/input/input_list.tsx
index f9acdad..f20d68f 100644
--- a/src/guillo-gmi/components/input/input_list.tsx
+++ b/src/guillo-gmi/components/input/input_list.tsx
@@ -6,11 +6,12 @@ interface Props {
   value: string[]
   onChange: (value: string[]) => void
   dataTest?: string
+  id?: string
 }
 export const InputList = forwardRef<
   HTMLInputElement,
   InputHTMLAttributes<HTMLInputElement> & Props
->(({ value, onChange, dataTest }, ref) => {
+>(({ value, onChange, dataTest, id }, ref) => {
   const intl = useIntl()
   const [inputValue, setInputValue] = useState('')
   const addTags = (event) => {
@@ -32,12 +33,13 @@ export const InputList = forwardRef<
               {tag}
               <button
                 className="delete is-small"
+                type="button"
                 onClick={() =>
                   onChange([
                     ...value.filter((tag) => value.indexOf(tag) !== index),
                   ])
                 }
-              ></button>
+              />
             </div>
           ))}
         </div>
@@ -45,6 +47,7 @@ export const InputList = forwardRef<
 
       <Input
         type="text"
+        id={id}
         placeholder={intl.formatMessage({
           id: 'press_enter_to_add_value',
           defaultMessage: 'Press enter to add value',
diff --git a/src/guillo-gmi/components/input/search_input.tsx b/src/guillo-gmi/components/input/search_input.tsx
index bc89245..7d01d2d 100644
--- a/src/guillo-gmi/components/input/search_input.tsx
+++ b/src/guillo-gmi/components/input/search_input.tsx
@@ -244,6 +244,7 @@ export const SearchInput = ({
           <button
             className={`button ${btnClass}`}
             onClick={(ev) => {
+              ev.preventDefault()
               if (ev.target instanceof HTMLElement) {
                 ev.target.blur()
               }
@@ -298,6 +299,7 @@ export const SearchInput = ({
                     }`}
                     data-test={`${dataTestItem}-${item.id}`}
                     onMouseDown={(ev) => {
+                      ev.stopPropagation()
                       ev.preventDefault()
                       if (onChange) {
                         onChange(item.id)
diff --git a/src/guillo-gmi/components/input/search_input_list.tsx b/src/guillo-gmi/components/input/search_input_list.tsx
index efe5c5f..0175c29 100644
--- a/src/guillo-gmi/components/input/search_input_list.tsx
+++ b/src/guillo-gmi/components/input/search_input_list.tsx
@@ -12,6 +12,7 @@ import { genericMessages } from '../../locales/generic_messages'
 import useClickAway from '../../hooks/useClickAway'
 import { get } from '../../lib/utils'
 import { SearchItem } from '../../types/guillotina'
+import { Traversal } from '../../contexts'
 
 function debounce(func, wait) {
   let timeout
@@ -46,7 +47,7 @@ interface Props {
   onChange: (value: string[]) => void
   error?: string
   errorZoneClassName?: string
-  traversal?: any
+  traversal?: Traversal
   path?: string
   qs?: string[]
   queryCondition?: string
@@ -55,7 +56,7 @@ interface Props {
   dataTestWrapper?: string
   dataTestSearchInput?: string
   dataTestItem?: string
-  renderTextItemOption?: (item: any) => string
+  renderTextItemOption?: (item: SearchItem) => string
   typeNameQuery?: string
   labelProperty?: string
 }
@@ -211,11 +212,13 @@ export const SearchInputList = ({
     }
   }
 
-  const renderTextItemOptionFn = (item) => {
+  const renderTextItemOptionFn = (
+    item: SearchItem
+  ): string | React.ReactNode => {
     if (renderTextItemOption) {
       return renderTextItemOption(item)
     }
-    return get(item, labelProperty, item.title) || item['@name']
+    return get<string>(item, labelProperty, item.title) || item['@name']
   }
 
   useEffect(() => {

From a4d5da90c801420b008fd0c052d49605c8664f8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roger=20Boixader=20G=C3=BCell?= <rboixaderg@gmail.com>
Date: Sun, 3 Mar 2024 16:25:17 +0100
Subject: [PATCH 19/20] feat: add form in example

---
 e2e/vite_example/src/App.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/e2e/vite_example/src/App.tsx b/e2e/vite_example/src/App.tsx
index e910708..0c29c08 100644
--- a/e2e/vite_example/src/App.tsx
+++ b/e2e/vite_example/src/App.tsx
@@ -150,6 +150,7 @@ function App() {
               },
               forms: {
                 GMI: RequiredFieldsForm,
+                GMIAllRequired: RequiredFieldsForm,
               },
               itemsColumn: {
                 Container: () => {

From 233967a7ae0a097b5add1760f53e167a3b058146 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roger=20Boixader=20G=C3=BCell?= <rboixaderg@gmail.com>
Date: Sun, 3 Mar 2024 16:42:08 +0100
Subject: [PATCH 20/20] chore: version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 63ba21c..cf24a29 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.27.0",
+  "version": "0.28.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:guillotinaweb/guillotina_react.git"