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',
+  },
+}

e2e/vite_example/src/App.tsx

@@ -150,6 +150,7 @@ function App() {
               },
               forms: {
                 GMI: RequiredFieldsForm,
+                GMIAllRequired: RequiredFieldsForm,
               },
               itemsColumn: {
                 Container: () => {

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")

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=False, widget="textarea")
+
 
     text_line_field = schema.TextLine(title="Text line field")
     index_field("number_field", type="int")

guillotina_example/guillotina_react_app/guillotina_react_app/gmi_required/__init__.py

@@ -0,0 +1,2 @@
+from . import content
+from . import interface

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

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

package.json

@@ -1,13 +1,13 @@
 {
-  "version": "0.27.0",
+  "version": "0.28.0",
   "repository": {
     "type": "git",
     "url": "[email protected]:guillotinaweb/guillotina_react.git"
   },
   "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,39 @@
     "@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",
-    "vitest": "^0.34.6"
+    "typescript": "^5.3.3",
+    "vitest": "^0.34.6",
+    "@types/react-beautiful-dnd": "13.1.8"
   },
   "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>