fixed typos

Author: bennobuilder

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

@@ -15,6 +15,9 @@ import {
 import { globalBind } from '@agile-ts/core';
 import * as Yup from 'yup';
 import { generateColor, generateId, isLight } from './utils';
+import { assignSharedLogger, createLogger, Logger } from '@agile-ts/logger';
+
+assignSharedLogger(createLogger({ level: Logger.level.DEBUG }));
 
 export const isValidNameValidator = agileResolver(
   isRequired,
@@ -32,8 +35,8 @@ export const signUpEditor = createMultieditor((editor) => ({
     gender: undefined,
     userName: '',
     email: '',
-    aboutYou: '',
     age: undefined,
+    aboutYou: '',
     image: {
       id: generateId(),
       color: generateColor(),
@@ -49,24 +52,27 @@ export const signUpEditor = createMultieditor((editor) => ({
     // Validation with Yup
     lastName: yupResolver(
       Yup.string()
+        .required()
         .min(2)
         .max(10)
         .matches(/^([^0-9]*)$/, 'No Numbers allowed!')
     ),
 
     // Outsourced Validator with additional validation method
-    userName: isValidNameValidator.addValidationMethod(
-      async (key, value, editor) => {
+    userName: isValidNameValidator
+      .copy()
+      .addValidationMethod(async (key, value, editor) => {
         const isValid = value === 'Jeff';
         if (!isValid)
           editor.setStatus(key, 'error', 'Sry only the name Jeff is allowed!');
         return isValid;
-      }
-    ),
+      }),
 
     // Validation with Agile
     email: agileResolver(isRequired, isString, isEmail),
 
+    age: agileResolver(isRequired, isNumber, minNumber(18), maxNumber(100)),
+
     // Validation with Yup and Agile
     aboutYou: agileResolver(isRequired)
       .append(yupResolver(Yup.string().min(10)))
@@ -76,7 +82,6 @@ export const signUpEditor = createMultieditor((editor) => ({
           editor.setStatus(key, 'error', 'The word fuck is not allowed!');
         return isValid;
       }),
-    age: agileResolver(isRequired, isNumber, minNumber(18), maxNumber(100)),
 
     gender: agileResolver(isRequired),
 

packages/core/src/computed/computed.tracker.ts

@@ -14,7 +14,7 @@ export class ComputedTracker {
   }
 
   /**
-   * Activates Computed Tracker to globally track used Observers.
+   * Activates the Computed Tracker to globally track used Observers.
    *
    * @internal
    */
@@ -24,7 +24,7 @@ export class ComputedTracker {
 
   /**
    * Tracks the specified Observer and caches it
-   * when the Computed Tracker is actively tracking.
+   * if the Computed Tracker is actively tracking.
    *
    * @internal
    * @param observer - Observer

packages/multieditor/README.md

@@ -14,67 +14,75 @@
   <img src="https://img.shields.io/bundlephobia/min/@agile-ts/multieditor.svg" alt="npm minified size"/></a>
 
 
-## ⏰ Short Example
+## 👀 Example
 ```ts
-// Let's create our MultiEditor
-const multiEditor = new MultiEditor(editor => ({
+// Create Multieditior 
+const multiEditor = createMultieditor(editor => ({
   data: {
-    id: "myId", // Inital Id
+    id: "myId", // Initial Id
     email: undefined, // Inital Email
-    key: undefined, // Inital Name
+    name: undefined, // Inital Name
   },
   onSubmit: async (data) => {
-    console.log("Submitted ", data);  // <-------------------------------------------    
-  },                                                                  //            |
-  fixedProperties: ["id"], // Properties that always get passed as data into the onSubmit function
+    console.log("Submitted ", data);  // <---------------------------------------------    
+  }, //                                                                               |
+  fixedProperties: ["id"], // Properties that are always passed to the 'onSubmit()' method
   validateMethods: {
-    email: editor.Validator().string().email().required(), // Email is requiered, a string and follows the Email regex
-    key: editor.Validator().string().max(10).min(2).required(), // Name is required, a string, has to be shorter than 10 and longer than 2 chars
+    email: agileResolver(isString, isEmail, isRequired), // Validation with tree shakable validation methods
+    name: yupResolver(Yup.string().max(10).min(2).required()), // Validation with external validatiors like Yup
   },
-  editableProperties: ["email", "key"], // Properties that can be edited
+  editableProperties: ["email", "name"], // Properties that can be edited
 }));
 
-// Lets update the requiered properties to validate the Editor
+// Update Multieditor values in the UI-Form
 multiEditor.setValue("email", "test@test.com");
-multiEditor.setValue("key", "Jeff");
+multiEditor.setValue("name", "Jeff");
 
-// Now we can submit the Editor and see what the onSubmit will log
+// Submit Multieditor and see what the 'onSubmit()' method will log
 multiEditor.submit();
 // Submited {
 //   id: "myId",
-//   key: "Jeff",
+//   name: "Jeff",
 //   email: "test@test.com"
 // }
 ```
-_Do you want to see it in action? Click [here](https://codesandbox.io/s/multieditor-yxt4x)._
 
+### ⛳️ Sandbox
+Test the Multieditor yourself in a [codesandbox](https://codesandbox.io/s/multieditor-yxt4x).
+It's only one click away. Just select your preferred Framework below.
 
-## ❓ Why Agile MultiEditor
+- [React](https://codesandbox.io/s/multieditor-yxt4x)
 
-#### 🚅 Straightforward
-Write minimalistic, boilerplate free code that captures your intent. <br />
-**For instance**
-- Simple Validation
-  ```ts
-  // Email is requiered, a string and follows the Email regex
-  EDITOR.Validator().string().email().required()
-  ```
-- Compute Value
-  ```ts
-  // Force Name to be lowercase
-  key: (value) => {
-        return value.toLowerCase();
-      }
-  ```
+More examples can be found in the [Example section](https://agile-ts.org/docs/examples).
 
 
-#### 🎯 Easy to Use
-Learn the powerful and simple tools of Agile MultiEditor in a short amount of time.
+## ❓ Why Multieditor
 
+#### 🚅 Straightforward
+Write minimalistic, boilerplate-free code that captures your intent.
+```ts
+// Simple and tree shakable inbuilt validation
+agileResolver(isRequired, isString('custom error message'), isEmail);
+
+// Easy integration with external validation libraries like Yup
+yupResolver(Yup.string().email());
+
+// Easy value compution
+computeMethods: {
+  name: (value) => {
+    return value.toLowerCase();
+  }
+}
+```
 
-#### 🍃 Lightweight
-Agile Api has an unpacked size of [14.1kB](https://bundlephobia.com/result?p=@agile-ts/multieditor@0.0.6)
-and [0 external dependencies](https://www.npmjs.com/package/@agile-ts/multieditor).
+### 🤸‍ Flexible
+- Works in nearly any UI-Framework (currently supported are [React](https://reactjs.org/), [React-Native](https://reactnative.dev/) and [Vue](https://vuejs.org/)).
+- Surly behaves with the workflow that suits you best.
+- Has **0** external dependencies.
+
+### ⚡️ Fast
+Minimizes the number of re-renders
+and validate computation.
 
 
 ## ⬇️ Installation
@@ -88,10 +96,33 @@ Therefore, we have created a table which shows which versions fit together witho
 
 | @agile-ts/multieditor | @agile-ts/core          | NPM Version              |
 | ----------------------| ----------------------- | ------------------------ |
-| v0.0.7+               | v0.0.7+                 | v6+                      |
-| v0.0.6                | v0.0.3 - v0.0.6         | v6+                      |
+| v0.0.22+              | v0.2.5+                 | v6+                      |
+
 _Other Versions aren't supported anymore_
 
 
 ## 📄 Documentation
-The Agile MultiEditor Docs are located [here](https://agile-ts.org/docs/)
+Does the Multieditor sound interesting to you?
+Take a look at our **[documentation](https://agile-ts.org/docs/introduction)**,
+to learn more about its functionalities and capabilities.
+If you have any further questions,
+feel free to join our [Community Discord](https://discord.gg/T9GzreAwPH).
+We will be happy to help you.
+
+
+## 👨‍💻 Contribute
+Get a part of AgileTs and start contributing. We welcome any meaningful contribution. 😀
+To find out more about contributing, check out the [CONTRIBUTING.md](https://github.com/agile-ts/agile/blob/master/CONTRIBUTING.md).
+
+<a href="https://codeclimate.com/github/agile-ts/agile/coverage.svg">
+   <img src="https://codeclimate.com/github/agile-ts/agile/badges/gpa.svg" alt="Maintainability"/>
+</a>
+
+### ♥️ Contributors
+
+<a href="https://github.com/agile-ts/agile/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=agile-ts/agile" />
+</a>
+
+[Become a contributor](https://github.com/agile-ts/agile/blob/master/CONTRIBUTING.md)
+

packages/multieditor/src/item.ts

@@ -1,25 +1,21 @@
-import {
-  StateRuntimeJobConfigInterface,
-  defineConfig,
-  State,
-  LogCodeManager,
-} from '@agile-ts/core';
+import { StateRuntimeJobConfigInterface, State } from '@agile-ts/core';
+import { isFunction, defineConfig } from '@agile-ts/utils';
 import { ItemKey, Multieditor } from './multieditor';
 import { Status } from './status';
 import { Validator } from './validator';
-import { isFunction } from '@agile-ts/utils';
+import { LogCodeManager } from './logCodeManager';
 
 export class Item<ValueType = any> extends State<ValueType> {
   // Multieditor the Item belongs to
   public editor: () => Multieditor<ValueType>;
 
   public config: ItemConfigInterface;
 
-  // Whether the Item is valid.
+  // Whether the Item value is valid
   public isValid = false;
   // Handles the validation of the Item
   public validator: Validator<ValueType>;
-  // Validation Status of the Item
+  // Handles and represents the validation Status of the Item
   public status: Status;
 
   // Method for dynamically computing the Item value
@@ -30,7 +26,7 @@ export class Item<ValueType = any> extends State<ValueType> {
    *
    * @public
    * @param editor - Multieditor to which the Item belongs.
-   * @param initialValue - Data that the Item holds
+   * @param initialValue - Initial value of the Item.
    * @param config - Configuration object
    */
   constructor(
@@ -56,13 +52,16 @@ export class Item<ValueType = any> extends State<ValueType> {
 
       if (this.editor().canAssignStatusToItemOnChange(this))
         this.status.display = true;
-      this.editor().validate();
+
+      // Recompute Multieditor states
+      this.editor().recomputeValidatedState({ validate: false });
       this.editor().recomputeModifiedState();
     });
   }
 
   /**
-   * Revalidates the Item.
+   * Revalidates the Item via the Validator
+   * and updates the 'isValid' state.
    *
    * @public
    */
@@ -75,7 +74,6 @@ export class Item<ValueType = any> extends State<ValueType> {
   /**
    * Resets the Item value to its initial value.
    *
-   *
    * @public
    * @param config - Configuration object
    */
@@ -112,17 +110,17 @@ export class Item<ValueType = any> extends State<ValueType> {
 
 export interface ItemConfigInterface {
   /**
-   * Key/Name identifier of the State.
+   * Key/Name identifier of the Item.
    */
   key: ItemKey;
   /**
    * Whether the Item value can be edited
-   * and thus is passes into the 'preparedData' object when submitting.
+   * and thus should be represented in the 'preparedData' object when submitting.
    * @default true
    */
   canBeEdited?: boolean;
   /**
-   * Validator to handle the validation of the Item.
+   * Validator to handle validating the Item.
    * @default newly create Validator
    */
   validator?: Validator;

packages/multieditor/src/logCodeManager.ts

@@ -0,0 +1,25 @@
+import {
+  LogCodeManager as CoreLogCodeManager,
+  assignAdditionalLogs,
+} from '@agile-ts/core';
+
+const additionalLogs = {
+  // Validator
+  '41:03:00': "A validation method needs to be of the type 'function'!",
+  '41:03:01': "Appending a Validator to itself isn't allowed!",
+};
+
+/**
+ * The Log Code Manager keeps track
+ * and manages all important Logs for the '@agile-ts/multieditor' package.
+ *
+ * @internal
+ */
+export const LogCodeManager =
+  process.env.NODE_ENV !== 'production'
+    ? assignAdditionalLogs<
+        typeof CoreLogCodeManager.logCodeMessages & typeof additionalLogs
+      >(additionalLogs, CoreLogCodeManager)
+    : assignAdditionalLogs<
+        typeof CoreLogCodeManager.logCodeMessages & typeof additionalLogs
+      >({}, CoreLogCodeManager);

packages/multieditor/src/multieditor/index.ts

@@ -3,6 +3,15 @@ import { EditorConfig, Multieditor } from './multieditor';
 
 export * from './multieditor';
 
+/**
+ * Returns a newly created Multieditor.
+ *
+ * A Multieditor is a simple Form Handler.
+ *
+ * @public
+ * @param config - Configuration object
+ * @param agileInstance - Instance of Agile the Multieditor belongs to.
+ */
 export function createMultieditor<
   DataType = any,
   SubmitReturnType = void,