Migrate to typescript

.eslintrc.js

@@ -0,0 +1,33 @@
+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: {
+    '@typescript-eslint/no-explicit-any': 'warn',
+    'no-extra-semi': 'warn',
+  },
+}

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",
@@ -31,32 +31,38 @@
     "@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",
+    "@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",
+    "typescript": "^5.3.3",
     "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",
     "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"

src/guillo-gmi/actions/add_item.js → 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

src/guillo-gmi/actions/change_pass.js → 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,20 +51,15 @@ export function ChangePassword(props) {
   }
 
   const setPass = (field) => (val) => {
-    let n = {}
+    const n = {}
     n[field] = val
     setState((state) => ({ ...state, ...n }))
     setPerror(undefined)
   }
 
   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>

src/guillo-gmi/actions/copy_item.js → 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>
   )
 }

src/guillo-gmi/actions/copy_items.js → 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>

src/guillo-gmi/actions/move_item.js → 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()

src/guillo-gmi/actions/move_items.js → 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
 

src/guillo-gmi/actions/remove_item.js → 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()

src/guillo-gmi/actions/remove_items.js → 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) => {

src/guillo-gmi/components/Link.js → 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}

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>
+  )
+}