feat(react-formio): move all related redux actions to @tsed/react-for…

…mio-stores

BREAKING-CHANGE: use `@tsed/react-formio-stores` to import redux actions

.github/workflows/build.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2
@@ -33,7 +33,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node-version: [14.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2
@@ -53,7 +53,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2

package.json

@@ -40,9 +40,9 @@
     "@types/react-router": "^5.1.11",
     "@types/react-router-dom": "^5.1.7",
     "@types/react-table": "^7.0.28",
-    "choices.js": "^10.1.0",
+    "@formio/choices.js": "^10.2.0",
     "connected-react-router": "6.9.1",
-    "formiojs": "^4.14.8",
+    "formiojs": "^4.14.13",
     "history": "5.3.0",
     "lerna": "5.1.8",
     "lodash": "4.17.20",

packages/config/jest/jest.web.config.js

@@ -1,8 +1,8 @@
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
   roots: ["<rootDir>/src"],
-  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}", "!src/**/*.d.ts", "!src/mocks/**", "!src/__mock__/**"],
-  coveragePathIgnorePatterns: [],
+  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}", "!src/**/*.d.ts"],
+  coveragePathIgnorePatterns: [".stories.tsx", "__mock__/", "mocks/"],
   testEnvironment: "jsdom",
   setupFilesAfterEnv: [require.resolve("./setupTest.js")],
   transform: {

packages/react-formio-container/package.json

@@ -17,11 +17,12 @@
   "peerDependencies": {
     "@tsed/react-formio": "^1.4.0",
     "@tsed/redux-utils": "^1.4.0",
-    "choices.js": "^10.1.0",
+    "@tsed/react-formio-stores": "^1.4.0",
+    "@formio/choices.js": "^10.2.0",
     "classnames": "^2.3.1",
     "connected-react-router": "^6.9.1",
     "file-saver": "^2.0.5",
-    "formiojs": "^4.14.8",
+    "formiojs": "^4.14.13",
     "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
@@ -36,6 +37,7 @@
   },
   "devDependencies": {
     "@tsed/react-formio": "1.14.1",
+    "@tsed/react-formio-stores": "1.14.1",
     "@types/file-saver": "^2.0.1",
     "file-saver": "^2.0.5"
   },
@@ -90,4 +92,4 @@
     }
   },
   "dependencies": {}
-}
+}

packages/react-formio-container/readme.md

@@ -42,7 +42,7 @@ npm-compatible packaging system such as [Browserify](http://browserify.org/) or
 [webpack](http://webpack.github.io/).
 
 ```bash
-npm install --save @tsed/react-formio-container file-saver
+npm install --save @tsed/react-formio-stores @tsed/react-formio @tsed/react-formio-container file-saver
 npm install --save-dev @types/file-saver
 ```
 

packages/react-formio-container/src/hooks/useAction.hook.tsx

@@ -13,7 +13,7 @@ import {
   selectForm,
   Submission,
   Utils
-} from "@tsed/react-formio";
+} from "@tsed/react-formio-stores";
 import { push } from "connected-react-router";
 import noop from "lodash/noop";
 import { useCallback, useEffect } from "react";

packages/react-formio-container/src/hooks/useActions.hook.ts

@@ -7,7 +7,7 @@ import {
   selectAvailableActions,
   selectError,
   selectForm
-} from "@tsed/react-formio";
+} from "@tsed/react-formio-stores";
 import { push } from "connected-react-router";
 import { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";

packages/react-formio-container/src/hooks/useForm.hook.ts

@@ -13,7 +13,7 @@ import {
   selectError,
   selectForm,
   selectRoot
-} from "@tsed/react-formio";
+} from "@tsed/react-formio-stores";
 import { push } from "connected-react-router";
 import noop from "lodash/noop";
 import { useEffect, useState } from "react";

packages/react-formio-container/src/hooks/useFormExport.tsx

@@ -1,4 +1,4 @@
-import { AuthState, selectAuth, selectForm } from "@tsed/react-formio";
+import { AuthState, selectAuth, selectForm } from "@tsed/react-formio-stores";
 import noop from "lodash/noop";
 import { useSelector } from "react-redux";
 

packages/react-formio-container/src/hooks/useForms.hook.ts

@@ -1,4 +1,4 @@
-import { FormSchema, FormsState, getForms, Operation, selectRoot } from "@tsed/react-formio";
+import { FormSchema, FormsState, getForms, Operation, selectRoot } from "@tsed/react-formio-stores";
 import { push } from "connected-react-router";
 import { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";

packages/react-formio-container/src/hooks/useSubmission.hook.tsx

@@ -13,7 +13,7 @@ import {
   selectRoot,
   selectSubmission,
   Submission
-} from "@tsed/react-formio";
+} from "@tsed/react-formio-stores";
 import { push } from "connected-react-router";
 import noop from "lodash/noop";
 import { useEffect, useRef } from "react";

packages/react-formio-container/src/hooks/useSubmissions.hook.tsx

@@ -1,4 +1,4 @@
-import { getSubmissions, Operation, selectAuth, selectForm, selectRoot, Submission, SubmissionsState } from "@tsed/react-formio";
+import { getSubmissions, Operation, selectAuth, selectForm, selectRoot, Submission, SubmissionsState } from "@tsed/react-formio-stores";
 import { push } from "connected-react-router";
 import { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";

packages/react-formio-container/src/views/form.routes.tsx

@@ -1,5 +1,5 @@
-import { AuthState, checkRoleFormAccess, FormSchema } from "@tsed/react-formio";
-import { TabsItemProps } from "@tsed/react-formio/src/components/tabs/tabs.component";
+import type { TabsItemProps } from "@tsed/react-formio";
+import { AuthState, checkRoleFormAccess, FormSchema } from "@tsed/react-formio-stores";
 import React from "react";
 
 import { FormAccessView } from "./formAccess.view";

packages/react-formio-stores/.env

@@ -0,0 +1,2 @@
+DISABLE_NEW_JSX_TRANSFORM=true
+SKIP_PREFLIGHT_CHECK=true

packages/react-formio-stores/.eslintignore

@@ -0,0 +1,13 @@
+**/node_modules
+docs
+docs-references
+**/lib
+**/build
+**/dist
+**/coverage
+**/.nyc_output
+**/node_modules
+*-lock.json
+*.lock
+benchmarks.*
+**/generated

packages/react-formio-stores/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: [require.resolve("@tsed/config/eslint/web")],
+  rules: {
+    "import/no-anonymous-default-export": 0,
+    "jsx-a11y/no-autofocus": 1
+  }
+};

packages/react-formio-stores/coverage.json

@@ -0,0 +1,6 @@
+{
+  "statements": 69.09,
+  "branches": 49.84,
+  "functions": 62.46,
+  "lines": 67.89
+}

packages/react-formio-stores/jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  ...require("@tsed/config/jest/jest.web.config.js"),
+  coverageThreshold: {
+    global: require("./coverage.json")
+  }
+};

packages/react-formio-stores/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@tsed/react-formio-stores",
+  "version": "1.14.1",
+  "description": "Provide redux stores and action around formio.js API. Written in TypeScript.",
+  "main": "dist/index.js",
+  "module": "dist/index.modern.js",
+  "source": "src/index.ts",
+  "license": "MIT",
+  "scripts": {
+    "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
+    "lint:fix": "yarn lint --fix",
+    "test": "cross-env NODE_ENV=test jest --coverage",
+    "test:coverage:update": "write-coverage",
+    "build": "microbundle --no-compress --format modern,cjs --jsx React.createElement --jsxFragment React.Fragment --globals react/jsx-runtime=jsx",
+    "watch": "microbundle watch --no-compress --format modern,cjs --jsx React.createElement --jsxFragment React.Fragment --globals react/jsx-runtime=jsx"
+  },
+  "dependencies": {
+    "@tsed/redux-utils": "1.14.1",
+    "@tsed/react-formio": "1.14.1",
+    "eventemitter2": "^6.4.3",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "@formio/choices.js": ">=9.0.1",
+    "formiojs": ">=4.0.0",
+    "lodash": ">=4.17.20",
+    "prop-types": ">=15.7.2",
+    "react": ">=16.14.0",
+    "react-dom": ">=16.14.0",
+    "react-table": ">=7.6.3",
+    "tooltip.js": ">=1.3.3"
+  },
+  "devDependencies": {
+    "@tsed/tailwind": "1.14.1",
+    "@tsed/tailwind-formio": "1.14.1"
+  }
+}

packages/react-formio-stores/readme.md

@@ -0,0 +1,138 @@
+<p style="text-align: center" align="center">
+ <a href="https://tsed.io" target="_blank"><img src="https://tsed.io/tsed-og.png" width="200" alt="Ts.ED logo"/></a>
+</p>
+
+<div align="center">
+
+   <h1>Ts.ED - React Formio stores</h1>
+
+[![Build & Release](https://github.com/tsedio/tsed-formio/actions/workflows/build.yml/badge.svg)](https://github.com/tsedio/tsed-formio/actions/workflows/build.yml)
+[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![backers](https://opencollective.com/tsed/tiers/badge.svg)](https://opencollective.com/tsed)
+
+</div>
+
+<div align="center">
+  <a href="https://tsed.io/">Website</a>
+  <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+  <a href="https://tsed.io/tutorials/prisma.html">Tutorial</a>
+  <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+  <a href="https://api.tsed.io/rest/slack/tsedio/tsed">Slack</a>
+  <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+  <a href="https://twitter.com/TsED_io">Twitter</a>
+</div>
+
+<hr />
+
+A [React](http://facebook.github.io/react/) library for rendering out forms based on the [Form.io](https://www.form.io)
+platform.
+
+This module is based on the original [react-formio](https://github.com/formio/react-formio) and add extra features
+listed above.
+
+See our [storybook](https://formio.tsed.io/) to see all available components.
+
+## Install
+
+`@tsed/react-formio-stores` can be used on the server, or bundled for the client using an
+npm-compatible packaging system such as [Browserify](http://browserify.org/) or
+[webpack](http://webpack.github.io/).
+
+```bash
+npm install @tsed/react-formio @tsed/react-formio-stores react-table --save
+npm install formiojs @formio/choices.js --save // Install formiojs since it is a peerDependency
+```
+
+## Usage
+
+`@tsed/react-formio-stores` contain Redux actions, reducers and selectors to simplify the API requests made for `form.io` forms.
+reducers, actions and selectors.
+The following reducers have names:
+
+- formsReducers: manage the forms,
+- formReducers: manage the current form,
+- submissionsReducers: manage the submissions of a form.
+- submissionReducers: manage the current submission of a form
+
+This provides namespaces so the same actions and reducers can be re-used within the same redux state.
+
+In addition, the package provides the follwing reducers
+
+- actionsReducers: Manage actions of a form.
+- actionReducers: Manage the current action of a form.
+- actionInfoReducers: Manage the available actions for all forms and resources.
+- authReducers: Manage formio authentication.
+
+By default, `@tsed/react-formio-stores` provides defaults combined reducers as following:
+
+```typescript
+export const defaultFormioReducer = combine(
+  authReducer,
+  actionsReducer,
+  actionReducer,
+  actionInfoReducer,
+  formReducer("form"),
+  formsReducer("forms", { query: { type: "form" } }),
+  formReducer("resource"),
+  formsReducer("resources", { query: { type: "resource" } }),
+  submissionReducer("submission"),
+  submissionsReducer("submissions")
+);
+```
+
+This `defaultFormioReducer` can be added and configured in your rootReducer as following :
+
+```typescript
+import { combine } from "@tsed/redux-utils";
+import { defaultFormioReducer, formsReducer } from "@tsed/react-formio-stores";
+import { connectRouter } from "connected-react-router";
+import { combineReducers } from "redux";
+
+export const rootReducers = (history: any) =>
+  combineReducers({
+    router: connectRouter(history),
+    ...defaultFormioReducer,
+    // override defaultFormioReducer can done as following
+    ...combine(
+      formsReducer("forms", { query: { type: "form", tags: ["common"] } }), // return only forms with the common tags
+      formsReducer("resources", { query: { type: "resource", tags: ["common"] } }) // return only resources with the common tags
+    )
+  });
+```
+
+## Contributors
+
+Please read [contributing guidelines here](./CONTRIBUTING.md).
+
+<a href="https://github.com/TypedProject/tsed/graphs/contributors"><img src="https://opencollective.com/tsed/contributors.svg?width=890" /></a>
+
+## Backers
+
+Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/tsed#backer)]
+
+<a href="https://opencollective.com/tsed#backers" target="_blank"><img src="https://opencollective.com/tsed/tiers/backer.svg?width=890"></a>
+
+## Sponsors
+
+Support this project by becoming a sponsor. Your logo will show up here with a link to your
+website. [[Become a sponsor](https://opencollective.com/tsed#sponsor)]
+
+## License
+
+The MIT License (MIT)
+
+Copyright (c) 2016 - 2021 Romain Lenzotti
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
+Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/react-formio-stores/src/index.ts

@@ -0,0 +1,4 @@
+export * from "./stores";
+export * from "./utils/clean";
+export * from "./utils/url";
+export * from "@tsed/react-formio";

packages/react-formio/src/stores/action-info/action-info.reducers.ts → packages/react-formio-stores/src/stores/action-info/action-info.reducers.ts

@@ -1,6 +1,6 @@
+import type { ActionSchema } from "@tsed/react-formio";
 import { createReducer, InitialStateCreator } from "@tsed/redux-utils";
 
-import { ActionSchema } from "../../interfaces";
 import { failActionInfo, receiveActionInfo, requestActionInfo, resetActionInfo } from "./action-info.actions";
 import { ACTION_INFO } from "./action-info.constant";
 

packages/react-formio/src/stores/action-info/action-info.selectors.ts → packages/react-formio-stores/src/stores/action-info/action-info.selectors.ts

@@ -1,4 +1,5 @@
-import { ActionSchema } from "../../interfaces";
+import type { ActionSchema } from "@tsed/react-formio";
+
 import { selectRoot } from "../root";
 import { ACTION_INFO } from "./action-info.constant";
 import { ActionInfoState } from "./action-info.reducers";

packages/react-formio/src/stores/action/action.reducers.ts → packages/react-formio-stores/src/stores/action/action.reducers.ts

@@ -1,6 +1,6 @@
+import type { ActionSchema } from "@tsed/react-formio";
 import { createReducer, InitialStateCreator } from "@tsed/redux-utils";
 
-import { ActionSchema } from "../../interfaces";
 import { clearActionError, failAction, receiveAction, requestAction, resetAction, sendAction } from "./action.actions";
 import { ACTION } from "./action.constant";