Merge pull request #209 from agile-ts/outsource-react-hooks

Outsource react hooks

Author: bennobuilder

examples/react/develop/functional-component-ts/src/App.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import './App.css';
-import { useAgile, useWatcher, useProxy, useSelector } from '@agile-ts/react';
+import { useAgile, useWatcher, useSelector } from '@agile-ts/react';
+import { useProxy, useEvent } from '@agile-ts/react';
 import {
   COUNTUP,
   externalCreatedItem,
@@ -14,7 +15,6 @@ import {
 } from './core';
 import { generateId } from '@agile-ts/utils';
 import { globalBind } from '@agile-ts/core';
-import { useEvent } from '@agile-ts/event';
 
 let rerenderCount = 0;
 let rerenderCountInCountupView = 0;

examples/react/develop/functional-component-ts/yarn.lock

@@ -3,41 +3,36 @@
 
 
 "@agile-ts/api@file:.yalc/@agile-ts/api":
-  version "0.0.21"
+  version "0.0.23"
   dependencies:
-    "@agile-ts/utils" "^0.0.7"
+    "@agile-ts/utils" "^0.0.9"
 
 "@agile-ts/core@file:.yalc/@agile-ts/core":
-  version "0.2.0"
+  version "0.2.5"
   dependencies:
-    "@agile-ts/utils" "^0.0.8"
+    "@agile-ts/utils" "^0.0.9"
 
 "@agile-ts/event@file:.yalc/@agile-ts/event":
-  version "0.0.10"
+  version "0.0.12"
 
 "@agile-ts/logger@file:.yalc/@agile-ts/logger":
-  version "0.0.7"
+  version "0.0.9"
   dependencies:
-    "@agile-ts/utils" "^0.0.7"
+    "@agile-ts/utils" "^0.0.9"
 
 "@agile-ts/multieditor@file:.yalc/@agile-ts/multieditor":
-  version "0.0.20"
+  version "0.0.22"
 
 "@agile-ts/proxytree@file:.yalc/@agile-ts/proxytree":
-  version "0.0.5"
+  version "0.0.7"
 
 "@agile-ts/react@file:.yalc/@agile-ts/react":
-  version "0.2.0"
+  version "0.2.1"
 
-"@agile-ts/utils@^0.0.7":
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/@agile-ts/utils/-/utils-0.0.7.tgz#3dd1add6b9f63d0a5bf35e71f54ac46448ae047f"
-  integrity sha512-OviTDC+ZbfyiUx8Gy8veS6YymC/tT6UeP23nT8V0EQV4F2MmuWqZ2yiKk+AYxZx8h74Ey8BVEUX6/ntpxhSNPw==
-
-"@agile-ts/utils@^0.0.8":
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/@agile-ts/utils/-/utils-0.0.8.tgz#ab9e1eeaddf282340936bddeb74421a2f77de804"
-  integrity sha512-ex19gPIS5imgV+rzs5HE2CNAIkQ162hPWH5u3HKNZnHiVU6FX62sikH5tG2oQocbDb7FkeB16D7v9ihQeuKYug==
+"@agile-ts/utils@^0.0.9":
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/@agile-ts/utils/-/utils-0.0.9.tgz#b20d03cc450d1a916bb7d8836c3451cb06cc882c"
+  integrity sha512-M9/QQjX+I5r11MwztfK371/kfInmJS7kLlAKmG8ZkgqG/x8LdCxD7tOTwqMa9Dc1p1ZJqSvNzL/Y8l7boi/3IQ==
 
 "@babel/code-frame@7.8.3":
   version "7.8.3"
@@ -1221,6 +1216,11 @@
   dependencies:
     "@hapi/hoek" "^8.3.0"
 
+"@hookform/resolvers@^2.8.1":
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-2.8.1.tgz#0d4fdd25bdeb4b98bf4e177c63fc4efa173454dd"
+  integrity sha512-U5lgaCkvD+0e5X8iQmCHiF+jOqjTX6OHUA7zPdeIHI6xdAOoi3rH9MKNuwMwv5Hly2LL6XtDgDkS/k+YG9hOew==
+
 "@jest/console@^24.7.1", "@jest/console@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"

examples/react/develop/multieditor-ts/package.json

@@ -7,20 +7,20 @@
     "@agile-ts/multieditor": "file:.yalc/@agile-ts/multieditor",
     "@agile-ts/react": "file:.yalc/@agile-ts/react",
     "material-ui": "^0.20.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
-    "typescript": "^3.9.7",
+    "typescript": "^4.4.3",
     "yup": "^0.32.9"
   },
   "devDependencies": {
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-router-dom": "^5.1.5",
+    "@types/node": "^16.10.1",
+    "@types/react": "^17.0.24",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-router-dom": "^5.3.0",
     "source-map-explorer": "^2.5.2"
   },
   "scripts": {

examples/react/develop/multieditor-ts/src/App.css

@@ -1,5 +1,5 @@
 body {
-  background: #0e101c;
+  background: #202026;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
   "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
   sans-serif;
@@ -22,12 +22,6 @@ p {
   color: white;
 }
 
-.form {
-  background: #0e101c;
-  max-width: 400px;
-  margin: 0 auto;
-}
-
 .error {
   color: #bf1650;
 }
@@ -60,16 +54,13 @@ label {
   font-weight: 200;
 }
 
-.App {
-  max-width: 600px;
-  margin: 0 auto;
-}
-
+input[type="submit"],
 button {
+  background: #8481af;
   display: block;
   appearance: none;
   margin-top: 40px;
-  border: 1px solid #333;
+  border: 1px solid #4a4872;
   margin-bottom: 20px;
   text-transform: uppercase;
   padding: 10px 20px;

examples/react/develop/multieditor-ts/src/App.tsx

@@ -1,38 +1,31 @@
 import React from 'react';
 import './App.css';
 import ErrorMessage from './components/ErrorMessage';
-import { useAgile } from '@agile-ts/react';
+import { useMultieditor } from '@agile-ts/react';
 import { signUpEditor } from './core/signUpEditor';
 import { generateColor, generateId } from './core/utils';
 
 let renderCount = 0;
 
 const App = () => {
-  useAgile(signUpEditor.deps);
+  const { submit, status, insertItem } = useMultieditor(signUpEditor);
 
   renderCount++;
 
   return (
-    <form>
+    <form
+      onSubmit={(event) => {
+        event.preventDefault();
+        submit();
+      }}>
       <h1>Sign Up</h1>
       <label>First Name:</label>
-      <input
-        onChange={(e) => signUpEditor.setValue('firstName', e.target.value)}
-        defaultValue={signUpEditor.getItemInitialValue('firstName')}
-      />
-      <ErrorMessage error={signUpEditor.getStatus('firstName')?.message} />
+      <input {...insertItem('firstName')} />
+      <ErrorMessage error={status('firstName')?.message} />
 
       <label>Last Name:</label>
-      <input
-        onChange={(e) =>
-          signUpEditor.setValue('lastName', e.target.value, {
-            background: false,
-          })
-        }
-        defaultValue={signUpEditor.getItemInitialValue('lastName')}
-        value={signUpEditor.getItemValue('lastName')}
-      />
-      <ErrorMessage error={signUpEditor.getStatus('lastName')?.message} />
+      <input {...insertItem('lastName')} />
+      <ErrorMessage error={status('lastName')?.message} />
 
       <label>Image</label>
       <div
@@ -48,6 +41,7 @@ const App = () => {
         <button
           style={{ marginLeft: 50 }}
           onClick={(event) => {
+            event.preventDefault();
             signUpEditor.setValue(
               'image',
               {
@@ -56,63 +50,38 @@ const App = () => {
               },
               { background: false }
             );
-            event.preventDefault();
           }}>
           Reset Image
         </button>
       </div>
-      <ErrorMessage error={signUpEditor.getStatus('image')?.message} />
+      <ErrorMessage error={status('image')?.message} />
 
       <label>Gender</label>
-      <select
-        defaultValue={''}
-        onChange={(e) => signUpEditor.setValue('gender', e.target.value)}>
+      <select {...insertItem('gender')}>
         <option value={''}>Select...</option>
         <option value="male">Male</option>
         <option value="female">Female</option>
       </select>
-      <ErrorMessage error={signUpEditor.getStatus('gender')?.message} />
+      <ErrorMessage error={status('gender')?.message} />
 
       <label>Username</label>
-      <input
-        onChange={(e) => signUpEditor.setValue('userName', e.target.value)}
-        defaultValue={signUpEditor.getItemInitialValue('userName')}
-      />
-      <ErrorMessage error={signUpEditor.getStatus('userName')?.message} />
+      <input {...insertItem('userName')} />
+      <ErrorMessage error={status('userName')?.message} />
 
       <label>Email</label>
-      <input
-        onChange={(e) => signUpEditor.setValue('email', e.target.value)}
-        defaultValue={signUpEditor.getItemInitialValue('email')}
-      />
-      <ErrorMessage error={signUpEditor.getStatus('email')?.message} />
+      <input {...insertItem('email')} />
+      <ErrorMessage error={status('email')?.message} />
 
       <label>Age</label>
-      <input
-        onChange={(e) =>
-          signUpEditor.setValue('age', e.target.value, { background: false })
-        }
-        defaultValue={signUpEditor.getItemInitialValue('age')}
-        value={signUpEditor.getItemValue('age')}
-      />
-      <ErrorMessage error={signUpEditor.getStatus('age')?.message} />
+      <input {...insertItem('age')} />
+      <ErrorMessage error={status('age')?.message} />
 
       <label>About you</label>
-      <textarea
-        onChange={(e) => signUpEditor.setValue('aboutYou', e.target.value)}
-        defaultValue={signUpEditor.getItemInitialValue('aboutYou')}
-      />
-      <ErrorMessage error={signUpEditor.getStatus('aboutYou')?.message} />
+      <textarea {...insertItem('aboutYou')} />
+      <ErrorMessage error={status('aboutYou')?.message} />
+
+      <input type="submit" />
 
-      <button
-        style={{ marginLeft: 50 }}
-        onClick={async (event) => {
-          event.preventDefault();
-          console.log(signUpEditor);
-          await signUpEditor.submit();
-        }}>
-        Submit
-      </button>
       <p>Is Modified: {signUpEditor.isModified.toString()}</p>
       <p>Is Valid: {signUpEditor.isValid.toString()}</p>
       <p>Render Count: {renderCount}</p>

examples/react/develop/multieditor-ts/src/core/signUpEditor.ts

@@ -27,7 +27,22 @@ export const isValidNameValidator = agileResolver(
   matchesRegex(/^([^0-9]*)$/, 'No Numbers allowed!')
 );
 
-export const signUpEditor = createMultieditor((editor) => ({
+export interface InitialDataInterface {
+  id: string;
+  firstName: string;
+  lastName: string;
+  gender: string | undefined;
+  userName: string;
+  email: string;
+  age: number | undefined;
+  aboutYou: string;
+  image: {
+    id: string;
+    color: string;
+  };
+}
+
+export const signUpEditor = createMultieditor<InitialDataInterface>({
   initialData: {
     id: 'myCoolId',
     firstName: 'Jeff',
@@ -103,7 +118,7 @@ export const signUpEditor = createMultieditor((editor) => ({
   },
   fixedProperties: ['id'],
   reValidateMode: 'onChange',
-}));
+});
 
 // For better debugging
 globalBind('__core__', { signUpEditor });