Configure Renovate

.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+    extends: [
+        '@ph.fritsche/eslint-config',
+    ],
+}

.github/workflows/ci.yml

@@ -0,0 +1,30 @@
+name: CI
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: bahmutov/npm-install@v1
+    - run: yarn lint
+    - run: yarn test
+    - uses: codecov/codecov-action@v1
+      with:
+        file: ./coverage/lcov.info
+
+  release:
+    if: github.event_name == 'push'
+    needs: check
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: bahmutov/npm-install@v1
+    - run: yarn build
+    - uses: ph-fritsche/action-release@v1
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -1,4 +1,3 @@
-/.*/
 /node_modules
 /coverage
 /dist

docs/handler/validate.md

@@ -26,4 +26,13 @@ You can provide a translation function to change representation of errors per `a
 }/>
 ```
 
-
+You can add errors on top of the schema validation by injecting your own validator.
+```jsx
+const myValidator = (values, liformApi) => {
+    // inspect the values and return a flat error object
+    return {
+        'my.object.property': 'some error',
+    }
+}
+<Liform {...liformProps} validate={myValidator}/>
+```

jest.config.js

@@ -1,18 +1,24 @@
 module.exports = {
-    "verbose": true,
-    "collectCoverage": true,
-    "collectCoverageFrom": [
-        "src/**/*.{js,jsx}"
+    verbose: true,
+    collectCoverage: true,
+    collectCoverageFrom: [
+        'src/**/*.{js,jsx,ts,tsx}',
     ],
-    "coveragePathIgnorePatterns": [],
-    "testMatch": [
-        "<rootDir>/test/**/*.{js,jsx}",
+    coveragePathIgnorePatterns: [],
+    testMatch: [
+        '<rootDir>/test/**/*.{js,jsx,ts,tsx}',
     ],
-    "testPathIgnorePatterns": [
-        "/_.*(?<!.test.js)$",
+    testPathIgnorePatterns: [
+        '/_.*(?<!.test.js)$',
     ],
-    "transformIgnorePatterns": [],
-    "setupFilesAfterEnv": [
-        "<rootDir>/test/_setup.js",
+    transform: {
+        '\\.([tj]sx?)$': 'ts-jest',
+    },
+    transformIgnorePatterns: [
+        '/node_modules/',
     ],
+    setupFilesAfterEnv: [
+        '<rootDir>/test/_setup.js',
+    ],
+    testEnvironment: 'jsdom',
 }

package.json

@@ -2,12 +2,44 @@
   "name": "liform-react-final",
   "version": "0.0.0",
   "description": "Generate forms from json-schema to use with React and Final Form",
-  "main": "./dist/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
   "files": [
     "/dist"
   ],
+  "exports": {
+    ".": {
+      "node": "./dist/cjs/index.js",
+      "import": "./dist/esm/index.js",
+      "default": "./dist/cjs/index.js"
+    },
+    "./dist/*": "./dist/*.js",
+    "./*": {
+      "node": "./dist/cjs/*.js",
+      "import": "./dist/esm/*.js",
+      "default": "./dist/cjs/*.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "dist/types/*": [
+        "./dist/types/*"
+      ],
+      "dist/cjs/*": [
+        "./dist/types/*.d.ts"
+      ],
+      "dist/esm/*": [
+        "./dist/types/*.d.ts"
+      ],
+      "*": [
+        "./dist/types/*.d.ts"
+      ]
+    }
+  },
   "scripts": {
-    "build": "babel src --out-dir dist",
+    "build": "scripts ts-build",
+    "dev": "esbuild public/liform.jsx --servedir=public --outdir=public/build --bundle",
     "lint": "eslint src test",
     "test": "jest"
   },
@@ -28,32 +60,30 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.12.8",
-    "@babel/core": "^7.12.9",
-    "@babel/preset-env": "^7.12.7",
-    "@babel/preset-react": "^7.12.7",
-    "@symfony/webpack-encore": "^0.31.0",
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.2.2",
-    "@testing-library/user-event": "12.2.2",
-    "eslint": "^7.14.0",
-    "eslint-plugin-jest": "^24.1.3",
-    "eslint-plugin-jest-dom": "^3.3.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-testing-library": "^3.10.1",
-    "final-form": "^4.20.1",
+    "@ph.fritsche/eslint-config": "^0.1.1",
+    "@ph.fritsche/scripts-config": "^2.0.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "13.1.9",
+    "@types/react": "^17.0.11",
+    "esbuild": "^0.12.9",
+    "eslint": "^7.29.0",
+    "final-form": "^4.20.2",
     "final-form-arrays": "^3.0.2",
-    "jest": "^26.6.3",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-final-form": "^6.5.2",
+    "jest": "^27.0.5",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-final-form": "^6.5.3",
     "react-final-form-arrays": "^3.1.3",
-    "react-test-renderer": "^17.0.1"
+    "react-test-renderer": "^17.0.2",
+    "rfdc": "^1.3.0",
+    "shared-scripts": "^1.4.1",
+    "ts-jest": "^27.0.4",
+    "typescript": "^4.3.4"
   },
   "dependencies": {
-    "liform-util": "^0.2.1"
+    "json-schema": "^0.3.0",
+    "liform-util": "^1"
   },
   "peerDependencies": {
     "final-form": "^4.20",

liform.jsx → public/liform.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import Liform, { DefaultTheme } from './src'
+import Liform, { DefaultTheme } from '../src'
 
 Liform.theme = DefaultTheme
 

renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "local>ph-fritsche/renovate-config"
+  ]
+}

scripts.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    extends: [
+        '@ph.fritsche/scripts-config',
+    ],
+}

src/DefaultTheme/Array/ArrayWidget.js → src/DefaultTheme/Array/ArrayWidget.tsx

@@ -1,20 +1,19 @@
-import React from 'react';
-import PropTypes from 'prop-types'
+import React, { ComponentProps } from 'react'
 import { FieldArray as FinalFieldArray } from 'react-final-form-arrays'
 import { Lifield, finalizeName, liformizeName } from '../..'
-import { Errors } from '../shared';
-import { SchemaProp } from '../../schema';
-import { LiformContextProp } from '../../form';
+import { Errors } from '../shared'
+import { LifieldWidgetProps } from '../../types'
 
-export const ArrayWidget = props => {
-    const {
+export function ArrayWidget(
+    {
         liform,
         name,
-        schema = true,
+        schema: schemaProp = true,
         ...others
-    } = props
-
+    }: ComponentProps<typeof Lifield> & LifieldWidgetProps,
+): React.ReactElement {
     const finalName = finalizeName(name)
+    const schema = typeof schemaProp === 'object' ? schemaProp : {}
 
     return <FinalFieldArray name={finalName} render={({fields, meta}) => (
         <fieldset className="liform-field liform-array">
@@ -35,15 +34,9 @@ export const ArrayWidget = props => {
                     }
                 </div>
             )) }
-            { (schema.allowAdd || fields.length < (Array.isArray(meta.initial) ? meta.initial.length : 0))
-                && <button type="button" onClick={() => fields.push()}><span role="img" aria-label="add collection element">➕</span></button>
+            { (schema.allowAdd || (fields.length ?? 0) < (Array.isArray(meta.initial) ? meta.initial.length : 0))
+                && <button type="button" onClick={() => fields.push(undefined)}><span role="img" aria-label="add collection element">➕</span></button>
             }
         </fieldset>
     )}/>
 }
-
-ArrayWidget.propTypes = {
-    liform: LiformContextProp,
-    schema: SchemaProp,
-    name: PropTypes.string,
-}