Improve typing (#224)

* chore: improve typing registry

* feat: breaking change - component column props move to object

* fix: api useRegistry and columns

* chore: Improve typing

* fix: search

* chore: vite example

* chore: github actions

* chore: package json types

* chore: yarn lock

* feat: improve types

* fix: checkbox, default value

* refactor: parseSearchQueryParamFunction name

* chore: changelog

.github/workflows/e2e_tests.yml

@@ -33,8 +33,16 @@ jobs:
       - name: Install base modules and build dist
         run: yarn
 
-      - name: Start Server
-        run: npm install && npm run build && npm run preview &
+      - name: Install deps vite example
+        run: npm install
+        working-directory: e2e/vite_example
+
+      - name: Build app vite example
+        run: npm run build
+        working-directory: e2e/vite_example
+
+      - name: Start app vite example
+        run: npm run preview &
         working-directory: e2e/vite_example
 
       - name: Cypress run

CHANGELOG.md

@@ -1,3 +1,25 @@
+0.31.0
+------
+- chore: Improve typing in registry
+- refactor: Add getPathComponent function in registry, to separate from generic getComponent function
+- feat: add parseSearchQueryParamFunction in registry
+- feat: Modify getItemsColumns function in client
+- fix: Default value checkbox
+
+Breaking changes:
+
+In items columns properties, updated the child prop. 
+
+Before:
+
+(m: ItemModel, _navigate: () => void, search: boolean) => React.ReactNode
+
+After:
+
+({ model, search, link }: ItemColumnChild) => React.ReactNode
+
+
+
 0.30.1
 ------
 - fix: size param in elasticsearch function

e2e/vite_example/src/App.tsx

@@ -9,6 +9,9 @@ import {
   RequiredFieldsForm,
   Icon,
   TdLink,
+  ItemColumnChild,
+  GuillotinaClient,
+  SearchItem,
 } from 'react-gmi'
 import { Fragment, useState, useEffect } from 'react'
 import '../node_modules/react-gmi/dist/css/style.css'
@@ -107,7 +110,9 @@ const filtersConfig = [
 ]
 function App() {
   const [currentSchema, setCurrentSchema] = useState('/')
-  const [clientInstance, setClientInstance] = useState(undefined)
+  const [clientInstance, setClientInstance] = useState<
+    GuillotinaClient | undefined
+  >(undefined)
   const [isLogged, setLogged] = useState(auth.isLogged)
 
   useEffect(() => {
@@ -122,8 +127,7 @@ function App() {
     setLogged(false)
   }
 
-  auth.onLogout = onLogout
-  if (clientInstance == undefined) {
+  if (clientInstance === undefined) {
     return null
   }
 
@@ -160,40 +164,34 @@ function App() {
                   return [
                     {
                       label: '',
+                      key: '',
                       isSortable: false,
-                      child: (m: any) => (
-                        <td style={smallcss}>{<Icon icon={m.icon} />}</td>
+                      child: ({ model }: ItemColumnChild) => (
+                        <td style={smallcss}>{<Icon icon={model.icon} />}</td>
                       ),
                     },
                     {
                       label: 'type',
                       key: 'type_name',
                       isSortable: false,
-                      child: (m: any) => (
-                        <TdLink style={smallcss} model={m}>
-                          <span className="tag">{m.type}</span>
+                      child: ({ model }: ItemColumnChild) => (
+                        <TdLink style={smallcss} model={model}>
+                          <span className="tag">{model.type}</span>
                         </TdLink>
                       ),
                     },
                     {
                       label: 'id/name',
                       key: 'title',
                       isSortable: true,
-                      child: (
-                        m: {
-                          name: any
-                          path: string
-                        },
-                        _navigate: any,
-                        search: any
-                      ) => (
-                        <TdLink model={m}>
-                          {m.name}
+                      child: ({ model, search }: ItemColumnChild) => (
+                        <TdLink model={model}>
+                          {model.name}
                           {search && (
                             <Fragment>
                               <br />
                               <span className="is-size-7 tag is-light">
-                                {m.path}
+                                {model.path}
                               </span>
                             </Fragment>
                           )}
@@ -204,13 +202,13 @@ function App() {
                       label: 'created',
                       key: 'creation_date',
                       isSortable: true,
-                      child: (m: { created: string }) => {
+                      child: ({ model }: ItemColumnChild) => {
                         return (
                           <td
                             style={mediumcss}
                             className="is-size-7 is-vcentered"
                           >
-                            {m.created}
+                            {model.created}
                           </td>
                         )
                       },
@@ -219,29 +217,25 @@ function App() {
                       label: 'depth',
                       key: 'depth',
                       isSortable: false,
-                      child: (m: {
-                        item: {
-                          depth: number
-                        }
-                      }) => (
+                      child: ({ model }: ItemColumnChild) => (
                         <td
                           style={mediumcss}
                           className="is-size-7 is-vcentered"
                         >
-                          {m.item.depth}
+                          {(model.item as SearchItem).depth}
                         </td>
                       ),
                     },
                     {
                       label: 'modified',
                       key: 'modification_date',
                       isSortable: true,
-                      child: (m: { updated: string }) => (
+                      child: ({ model }: ItemColumnChild) => (
                         <td
                           style={mediumcss}
                           className="is-size-7 is-vcentered"
                         >
-                          {m.updated}
+                          {model.updated}
                         </td>
                       ),
                     },

e2e/vite_example/src/vite-env.d.ts

@@ -1,3 +1 @@
 /// <reference types="vite/client" />
-
-declare module 'react-gmi'

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.30.1",
+  "version": "0.31.0",
   "repository": {
     "type": "git",
     "url": "[email protected]:guillotinaweb/guillotina_react.git"
@@ -9,9 +9,16 @@
   ],
   "source": "./src/guillo-gmi/index.ts",
   "main": "./dist/react-gmi.js",
-  "exports": "./dist/react-gmi.modern.js",
+  "module": "./dist/react-gmi.modern.js",
   "types": "./dist/index.d.ts",
   "unpkg": "./dist/react-gmi.umd.js",
+  "exports": {
+    ".": {
+      "import": "./dist/react-gmi.modern.js",
+      "require": "./dist/react-gmi.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "name": "@guillotinaweb/react-gmi",
   "dependencies": {
     "brace": "0.11.1",
@@ -46,7 +53,7 @@
     "prettier": "2.2.1",
     "sass": "1.69.5",
     "serialize-javascript": "5.0.1",
-    "typescript": "5.4.2",
+    "typescript": "5.4.5",
     "vitest": "^0.34.6",
     "@types/react-beautiful-dnd": "13.1.8"
   },

src/guillo-gmi/actions/add_item.tsx

@@ -13,7 +13,7 @@ export function AddItem(props: Props) {
   const { type } = props
   const { getForm } = Ctx.registry
 
-  const Form = getForm(type)
+  const Form = getForm(type, undefined)
 
   const setActive = () => {
     Ctx.cancelAction()

src/guillo-gmi/components/fields/editableField.tsx

@@ -38,11 +38,8 @@ export function EditableField({
   const { patch, loading, Ctx } = useCrudContext()
   const { fieldHaveDeleteButton } = useConfig()
 
-  const EditComponent = Ctx.registry.get('components', 'EditComponent')
-  const RenderFieldComponent = Ctx.registry.get(
-    'components',
-    'RenderFieldComponent'
-  )
+  const EditComponent = Ctx.registry.getComponent('EditComponent')
+  const RenderFieldComponent = Ctx.registry.getComponent('RenderFieldComponent')
 
   useEffect(() => {
     if (isEdit && ref.current) {

src/guillo-gmi/components/fields/renderField.tsx

@@ -91,7 +91,6 @@ export const SearchRenderField = ({
   value,
   modifyContent,
 }: SearchRenderFieldProps) => {
-  console.log('search render fields')
   const intl = useIntl()
   const [valuesLabels, setValuesLabels] = useState<string[]>([])
   const [isLoadingData, setIsLoadingData] = useState(false)
@@ -105,11 +104,8 @@ export const SearchRenderField = ({
       let searchTermQs = ''
 
       const searchTermParsed = ['__or', `id=${valuesToSearch.join('%26id=')}`]
-      const { get: getSearch } = traversal.registry
-      const fnName: string = getSearch(
-        'searchEngineQueryParamsFunction',
-        SearchEngine
-      )
+      const { getSearchEngineQueryParamsFunction } = traversal.registry
+      const fnName = getSearchEngineQueryParamsFunction(SearchEngine)
       const qsParsed = traversal.client.getQueryParamsSearchFunction(fnName)({
         path: traversal.path,
         start: 0,

src/guillo-gmi/components/guillotina.tsx

@@ -3,7 +3,7 @@ import { useReducer } from 'react'
 import { useEffect } from 'react'
 import { Flash } from './flash'
 import { TraversalProvider, useGuillotinaClient } from '../contexts'
-import { useConfig } from '../hooks/useConfig'
+import { IConfig, useConfig } from '../hooks/useConfig'
 import { IRegistry, useRegistry } from '../hooks/useRegistry'
 import { useLocation } from '../hooks/useLocation'
 import {
@@ -18,7 +18,6 @@ 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: string) {
   switch (locale) {
@@ -35,8 +34,8 @@ interface GuillotinaProps {
   auth: Auth
   locale: string
   url: string
-  config: IndexSignature
-  registry: IRegistry
+  config?: Partial<IConfig>
+  registry: Partial<IRegistry>
 }
 export function Guillotina({ auth, locale, ...props }: GuillotinaProps) {
   const messages = loadLocaleData(locale)
@@ -104,7 +103,7 @@ export function Guillotina({ auth, locale, ...props }: GuillotinaProps) {
   }> = registry.getView('ErrorBoundary')
   const NotAllowed = registry.getView('NotAllowed')
   const NotFound = registry.getView('NotFound')
-  const Path = registry.get('components', 'Path') as React.ComponentType
+  const Path = registry.getComponent('Path')
 
   const contextData = {
     url,
@@ -117,7 +116,7 @@ export function Guillotina({ auth, locale, ...props }: GuillotinaProps) {
   }
 
   const { action, errorStatus, permissions } = state
-  const Main = registry.getComponent(state.context, path) as React.FC<{
+  const Main = registry.getPathComponent(state.context, path) as React.FC<{
     state: GuillotinaGlobalState
   }>
   const Action = action.action

src/guillo-gmi/components/input/checkbox.tsx

@@ -33,6 +33,12 @@ export const Checkbox = ({
   const inputRef = useRef<HTMLInputElement>(null)
   const [state, setState] = useState<boolean>(!!checked)
 
+  useEffect(() => {
+    if (state !== checked) {
+      setState(!!checked)
+    }
+  }, [checked])
+
   useEffect(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = indeterminate