relay-forms-nodeps 1.0.0 → 1.1.1

package/README.md

@@ -1,13 +1,12 @@
-# relay-forms-nodeps ![](https://github.com/morrys/relay-forms/workflows/Build/badge.svg)
-Build forms in React with Relay
+## Build forms in React with Relay
 
-## Installation
+This repository manages the three libraries to manage forms by exploiting the potential and stability of the relay store.
 
-Install relay-forms-nodeps using yarn or npm:
+* [react-relay-forms](./docs/ReactRelayForms-Introduction.md): it has the official [react-relay](https://github.com/facebook/relay) dependency [![npm](https://img.shields.io/npm/v/react-relay-forms.svg)](https://www.npmjs.com/package/react-relay-forms) [![npm downloads](https://img.shields.io/npm/dm/react-relay-forms.svg)](https://www.npmjs.com/package/react-relay-forms) ![npm bundle size](https://shields.api-test.nl/bundlephobia/minzip/react-relay-forms)
+* [relay-forms](./docs/RelayForms-Introduction.md): depends on [relay-hooks](https://github.com/relay-tools/relay-hooks), my OSS version of relay hooks [![npm](https://img.shields.io/npm/v/relay-forms.svg)](https://www.npmjs.com/package/relay-forms) [![npm downloads](https://img.shields.io/npm/dm/relay-forms.svg)](https://www.npmjs.com/package/relay-forms) ![npm bundle size](https://shields.api-test.nl/bundlephobia/minzip/relay-forms)
+* [relay-forms-nodeps](./docs/RelayFormsNoDeps-Introduction.md): it has no dependencies, I only brought the relay functions needed to manage the store into the library, doing a careful cleaning to optimize the bundle size [![npm](https://img.shields.io/npm/v/relay-forms-nodeps.svg)](https://www.npmjs.com/package/relay-forms-nodeps) [![npm downloads](https://img.shields.io/npm/dm/relay-forms-nodeps.svg)](https://www.npmjs.com/package/relay-forms-nodeps) ![npm bundle size](https://shields.api-test.nl/bundlephobia/minzip/relay-forms-nodeps)
 
-```
-yarn add relay-forms-nodeps
-```
+[See full documentation here](https://morrys.github.io/relay-forms/docs/relay-forms.html)
 
 ## Contributing
 
@@ -21,104 +20,20 @@ yarn add relay-forms-nodeps
 
 ## Simple Example
 
-```ts
-import * as React from 'react';
-import { useCallback } from 'react';
-import { Store, createStore, useFormSubmit, useFormState, useFormSetValue, StoreProvider } from 'relay-forms-nodeps';
-
-export const store: Store = createStore();
-
-export const Form: React.FC = () => {
-    const [state, setState] = React.useState(undefined);
-    return (
-        <StoreProvider store={store}>
-            <FormInternal
-                onSubmit={setState}
-            />
-            {state && <div data-testid={'submit-done'}>SUBMIT :)</div>}
-        </StoreProvider>
-    );
-};
-
-export const HAVE_ERRORS = 'have errors';
-
-export const Errors: React.FC<any> = () => {
-    const { errors, isSubmitting, isValidating } = useFormState();
-    return (
-        <>
-            <div>{errors ? HAVE_ERRORS : ''}</div>;
-            <div>{'' + isSubmitting}</div>;
-            <div>{'' + isValidating}</div>;
-        </>
-    );
-};
-
-const validateField = (value: any, name: string) => {
-    if (value && value.length < 5) {
-        return getFieldError(name, value);
-    }
-    return undefined;
-});
-
-export const FormInternal: React.FC<any> = ({ onSubmit }) => {
-    const data = useFormSubmit({ onSubmit });
-
-    return (
-        <form onSubmit={data.submit} action="#">
-            <div>
-                <Field fieldKey="firstName" placeholder="first name" validate={validateField} />
-            </div>
-            <div>
-                <Field fieldKey="lastName" placeholder="last name" />
-            </div>
-            <div>
-                <Field fieldKey="email" placeholder="email" validate={validateField} />
-            </div>
-            <Errors />
-            <button type="button" data-testid={'button-validate'} onClick={data.validate}>
-                only validate
-            </button>
-            <button data-testid={'button-submit'} type="submit">
-                submit
-            </button>
-        </form>
-    );
-};
-
-export const getFieldError = (name, value) =>
-    name + ' wrong length, minimum 5 current ' + value.length;
-
-export const Field: React.FC<any> = ({ placeholder, fieldKey, validate }) => {
-    const validateCallback = useCallback(
-        (value: any) => {
-            return validate(value, fieldKey);
-        },
-        [fieldKey, validate],
-    );
-
-    const [{ error }, setValue] = useFormSetValue({
-        key: fieldKey,
-        validate: validate ? validateCallback : undefined,
-        initialValue: "try",
-    });
-
-    const setValueCallback = useCallback(
-        (event) => {
-            const value = event.target.value;
-            setValue(value);
-        },
-        [setValue],
-    );
-    return (
-        <>
-            {error && <div>{error}</div>}
-            <input
-                type="text"
-                value="try"
-                placeholder={placeholder}
-                onChange={(value) => setValueCallback(value)}
-            />
-        </>
-    );
-};
-```
+[See SimpleExample.md](./docs/RelaySimpleExample.md)
+
+## useFormSetValue
+
+[See useFormSetValue.md](./docs/useFormSetValue.md)
+
+## useFormSubmit
+
+[See useFormSubmit.md](./docs/useFormSubmit.md)
+
+## useFormState
+
+[See useFormState.md](./docs/useFormState.md)
+
+## useFormValue
+
+[See useFormValue.md](./docs/useFormValue.md)

package/lib/RelayFormsTypes.d.ts

@@ -13,6 +13,7 @@ export declare type FormSetValueOptions<ValueType> = {
     initialValue?: ValueType;
     validate?: (value: ValueType) => Promise<string | undefined> | string | undefined;
     validateOnChange?: boolean;
+    label?: string;
 };
 export declare type FormSetValueStateReturn<ValueType> = {
     error: undefined | null | Error;

package/lib/Utils.d.ts

@@ -1,11 +1,8 @@
-import { Store, Snapshot } from './relay/RelayTypes';
+import { RecordProxy, RecordSourceProxy, Snapshot, Store } from './relay/RelayTypes';
+declare type FormStoreUpdater = (store: RecordSourceProxy, form: RecordProxy) => void;
+export declare function getFieldId(key: any): string;
 export declare function getSnapshot(environment: Store, fragment: any, key: string): Snapshot;
-export declare const commitResetIntoRelay: (entries: any, environment: any) => void;
-export declare const commitValidateIntoRelay: (entries: any, isSubmitting: any, environment: any) => void;
-export declare const commitSubmitEndRelay: (environment: any) => void;
-export declare const commitValidateEndRelay: (environment: any) => void;
-export declare const commitResetField: (environment: any, key: any) => void;
-export declare const commitValue: (key: any, value: any, check: any, environment: any) => void;
-export declare const commitErrorIntoRelay: (key: any, error: any, environment: any) => void;
+export declare function commit(environment: Store, updater: FormStoreUpdater): void;
 export declare const operationQueryForm: any;
 export declare const operationQueryErrorsForm: any;
+export {};

package/lib/Utils.js

@@ -6,19 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 var queries_1 = require("./relay/queries");
 var RelayModernSelector_1 = require("./relay/RelayModernSelector");
 var PREFIX_LOCAL_FORM = 'local:form';
-var internalCommitLocalUpdate = function (environment, updater) {
-  environment.commitUpdate(function (store) {
-    var localForm = store.get(PREFIX_LOCAL_FORM);
-    if (!localForm) {
-      localForm = store.create(PREFIX_LOCAL_FORM).setLinkedRecords([], 'entries');
-      store.getRoot().setLinkedRecord(localForm, 'form');
-    }
-    updater(store, localForm);
-  });
-};
 function getFieldId(key) {
   return PREFIX_LOCAL_FORM + '.' + key;
 }
+exports.getFieldId = getFieldId;
 function getSnapshot(environment, fragment, key) {
   var item = {
     __id: getFieldId(key)
@@ -26,62 +17,16 @@ function getSnapshot(environment, fragment, key) {
   return environment.lookup(RelayModernSelector_1.getSingularSelector(fragment, item));
 }
 exports.getSnapshot = getSnapshot;
-exports.commitResetIntoRelay = function (entries, environment) {
-  internalCommitLocalUpdate(environment, function (store, form) {
-    form.setValue(false, 'isSubmitting');
-    form.setValue(false, 'isValidating');
-    entries.forEach(function (entry) {
-      return store.get(getFieldId(entry.key)).setValue('RESET', 'check');
-    });
-  });
-};
-exports.commitValidateIntoRelay = function (entries, isSubmitting, environment) {
-  internalCommitLocalUpdate(environment, function (store, form) {
-    form.setValue(isSubmitting, 'isSubmitting');
-    form.setValue(true, 'isValidating');
-    entries.forEach(function (entry) {
-      return store.get(getFieldId(entry.key)).setValue('START', 'check');
-    });
-  });
-};
-exports.commitSubmitEndRelay = function (environment) {
-  internalCommitLocalUpdate(environment, function (_, form) {
-    form.setValue(false, 'isSubmitting');
-  });
-};
-exports.commitValidateEndRelay = function (environment) {
-  internalCommitLocalUpdate(environment, function (_, form) {
-    form.setValue(false, 'isValidating');
-  });
-};
-exports.commitResetField = function (environment, key) {
-  var id = getFieldId(key);
-  internalCommitLocalUpdate(environment, function (store, form) {
-    var entriesArray = form.getLinkedRecords('entries');
-    var newEntries = entriesArray.filter(function (value) {
-      return value.getDataID() != id;
-    });
-    form.setLinkedRecords(newEntries, 'entries');
-    store.delete(id);
-  });
-};
-exports.commitValue = function (key, value, check, environment) {
-  var id = getFieldId(key);
-  internalCommitLocalUpdate(environment, function (store, form) {
-    var field = store.get(id);
-    if (!field) {
-      field = store.create(id);
-      var entriesArray = form.getLinkedRecords('entries');
-      entriesArray.push(field);
-      form.setLinkedRecords(entriesArray, 'entries');
+function commit(environment, updater) {
+  environment.commitUpdate(function (store) {
+    var localForm = store.get(PREFIX_LOCAL_FORM);
+    if (!localForm) {
+      localForm = store.create(PREFIX_LOCAL_FORM).setLinkedRecords([], 'entries').setLinkedRecords([], 'errors');
+      store.getRoot().setLinkedRecord(localForm, 'form');
     }
-    field.setValue(id, 'id').setValue(key, 'key').setValue(check, 'check').setValue(value, 'value');
-  });
-};
-exports.commitErrorIntoRelay = function (key, error, environment) {
-  internalCommitLocalUpdate(environment, function (store) {
-    store.get(getFieldId(key)).setValue(error, 'error').setValue('DONE', 'check');
+    updater(store, localForm);
   });
-};
+}
+exports.commit = commit;
 exports.operationQueryForm = RelayModernSelector_1.createOperationDescriptor(queries_1.QueryFields);
 exports.operationQueryErrorsForm = RelayModernSelector_1.createOperationDescriptor(queries_1.QueryErrors);

package/lib/es/RelayFormsTypes.d.ts

@@ -13,6 +13,7 @@ export declare type FormSetValueOptions<ValueType> = {
     initialValue?: ValueType;
     validate?: (value: ValueType) => Promise<string | undefined> | string | undefined;
     validateOnChange?: boolean;
+    label?: string;
 };
 export declare type FormSetValueStateReturn<ValueType> = {
     error: undefined | null | Error;

package/lib/es/Utils.d.ts

@@ -1,11 +1,8 @@
-import { Store, Snapshot } from './relay/RelayTypes';
+import { RecordProxy, RecordSourceProxy, Snapshot, Store } from './relay/RelayTypes';
+declare type FormStoreUpdater = (store: RecordSourceProxy, form: RecordProxy) => void;
+export declare function getFieldId(key: any): string;
 export declare function getSnapshot(environment: Store, fragment: any, key: string): Snapshot;
-export declare const commitResetIntoRelay: (entries: any, environment: any) => void;
-export declare const commitValidateIntoRelay: (entries: any, isSubmitting: any, environment: any) => void;
-export declare const commitSubmitEndRelay: (environment: any) => void;
-export declare const commitValidateEndRelay: (environment: any) => void;
-export declare const commitResetField: (environment: any, key: any) => void;
-export declare const commitValue: (key: any, value: any, check: any, environment: any) => void;
-export declare const commitErrorIntoRelay: (key: any, error: any, environment: any) => void;
+export declare function commit(environment: Store, updater: FormStoreUpdater): void;
 export declare const operationQueryForm: any;
 export declare const operationQueryErrorsForm: any;
+export {};

package/lib/es/Utils.js

@@ -1,17 +1,7 @@
 import { QueryErrors, QueryFields } from './relay/queries';
-import { getSingularSelector, createOperationDescriptor } from './relay/RelayModernSelector';
+import { createOperationDescriptor, getSingularSelector } from './relay/RelayModernSelector';
 var PREFIX_LOCAL_FORM = 'local:form';
-var internalCommitLocalUpdate = function (environment, updater) {
-  environment.commitUpdate(function (store) {
-    var localForm = store.get(PREFIX_LOCAL_FORM);
-    if (!localForm) {
-      localForm = store.create(PREFIX_LOCAL_FORM).setLinkedRecords([], 'entries');
-      store.getRoot().setLinkedRecord(localForm, 'form');
-    }
-    updater(store, localForm);
-  });
-};
-function getFieldId(key) {
+export function getFieldId(key) {
   return PREFIX_LOCAL_FORM + '.' + key;
 }
 export function getSnapshot(environment, fragment, key) {
@@ -20,62 +10,15 @@ export function getSnapshot(environment, fragment, key) {
   };
   return environment.lookup(getSingularSelector(fragment, item));
 }
-export var commitResetIntoRelay = function (entries, environment) {
-  internalCommitLocalUpdate(environment, function (store, form) {
-    form.setValue(false, 'isSubmitting');
-    form.setValue(false, 'isValidating');
-    entries.forEach(function (entry) {
-      return store.get(getFieldId(entry.key)).setValue('RESET', 'check');
-    });
-  });
-};
-export var commitValidateIntoRelay = function (entries, isSubmitting, environment) {
-  internalCommitLocalUpdate(environment, function (store, form) {
-    form.setValue(isSubmitting, 'isSubmitting');
-    form.setValue(true, 'isValidating');
-    entries.forEach(function (entry) {
-      return store.get(getFieldId(entry.key)).setValue('START', 'check');
-    });
-  });
-};
-export var commitSubmitEndRelay = function (environment) {
-  internalCommitLocalUpdate(environment, function (_, form) {
-    form.setValue(false, 'isSubmitting');
-  });
-};
-export var commitValidateEndRelay = function (environment) {
-  internalCommitLocalUpdate(environment, function (_, form) {
-    form.setValue(false, 'isValidating');
-  });
-};
-export var commitResetField = function (environment, key) {
-  var id = getFieldId(key);
-  internalCommitLocalUpdate(environment, function (store, form) {
-    var entriesArray = form.getLinkedRecords('entries');
-    var newEntries = entriesArray.filter(function (value) {
-      return value.getDataID() != id;
-    });
-    form.setLinkedRecords(newEntries, 'entries');
-    store.delete(id);
-  });
-};
-export var commitValue = function (key, value, check, environment) {
-  var id = getFieldId(key);
-  internalCommitLocalUpdate(environment, function (store, form) {
-    var field = store.get(id);
-    if (!field) {
-      field = store.create(id);
-      var entriesArray = form.getLinkedRecords('entries');
-      entriesArray.push(field);
-      form.setLinkedRecords(entriesArray, 'entries');
+export function commit(environment, updater) {
+  environment.commitUpdate(function (store) {
+    var localForm = store.get(PREFIX_LOCAL_FORM);
+    if (!localForm) {
+      localForm = store.create(PREFIX_LOCAL_FORM).setLinkedRecords([], 'entries').setLinkedRecords([], 'errors');
+      store.getRoot().setLinkedRecord(localForm, 'form');
     }
-    field.setValue(id, 'id').setValue(key, 'key').setValue(check, 'check').setValue(value, 'value');
-  });
-};
-export var commitErrorIntoRelay = function (key, error, environment) {
-  internalCommitLocalUpdate(environment, function (store) {
-    store.get(getFieldId(key)).setValue(error, 'error').setValue('DONE', 'check');
+    updater(store, localForm);
   });
-};
+}
 export var operationQueryForm = createOperationDescriptor(QueryFields);
 export var operationQueryErrorsForm = createOperationDescriptor(QueryErrors);

package/lib/es/relay/RelayRecordProxy.d.ts

@@ -22,6 +22,7 @@ export declare class RelayRecordProxy implements RecordProxy {
     constructor(source: any, mutator: any, dataID: any);
     getDataID(): string;
     setValue(value: any, name: string): this;
+    getValue(name: any): any;
     setLinkedRecord(record: RecordProxy, name: string): this;
     getLinkedRecords(name: string): Array<RecordProxy | null | undefined> | null | undefined;
     setLinkedRecords(records: any, name: string): RecordProxy;

package/lib/es/relay/RelayRecordProxy.js

@@ -30,6 +30,9 @@ var RelayRecordProxy = /** @class */function () {
     this._mutator.setValue(this._dataID, name, value);
     return this;
   };
+  RelayRecordProxy.prototype.getValue = function (name) {
+    return this._mutator.getValue(this._dataID, name);
+  };
   RelayRecordProxy.prototype.setLinkedRecord = function (record, name) {
     var linkedID = record.getDataID();
     this._mutator.setLinkedRecordID(this._dataID, name, linkedID);

package/lib/es/relay/RelayRecordSourceMutator.d.ts

@@ -29,6 +29,7 @@ export declare class RelayRecordSourceMutator {
     create(dataID: any): void;
     delete(dataID: any): void;
     getStatus(dataID: any): "EXISTENT" | "NONEXISTENT" | "UNKNOWN";
+    getValue(dataID: any, storageKey: string): any;
     setValue(dataID: any, storageKey: string, value: any): void;
     setLinkedRecordID(dataID: any, storageKey: any, linkedID: any): void;
     getLinkedRecordIDs(dataID: any, storageKey: string): any;

package/lib/es/relay/RelayRecordSourceMutator.js

@@ -45,6 +45,19 @@ var RelayRecordSourceMutator = /** @class */function () {
   RelayRecordSourceMutator.prototype.getStatus = function (dataID) {
     return this._sink.has(dataID) ? this._sink.getStatus(dataID) : this._base.getStatus(dataID);
   };
+  RelayRecordSourceMutator.prototype.getValue = function (dataID, storageKey) {
+    for (var ii = 0; ii < this.__sources.length; ii++) {
+      var record = this.__sources[ii].get(dataID);
+      if (record) {
+        var value = RelayModernRecord.getValue(record, storageKey);
+        if (value !== undefined) {
+          return value;
+        }
+      } else if (record === null) {
+        return null;
+      }
+    }
+  };
   RelayRecordSourceMutator.prototype.setValue = function (dataID, storageKey, value) {
     var sinkRecord = this._getSinkRecord(dataID);
     RelayModernRecord.setValue(sinkRecord, storageKey, value);

package/lib/es/relay/RelayTypes.d.ts

@@ -4,6 +4,7 @@ export declare type Disposable = {
 };
 export interface RecordProxy {
     getDataID(): string;
+    getValue(name: string): any;
     getLinkedRecords(name: string): Array<RecordProxy | null | undefined> | null | undefined;
     setLinkedRecord(record: RecordProxy, name: string): RecordProxy;
     setLinkedRecords(records: Array<RecordProxy>, name: string): RecordProxy;

package/lib/es/relay/queries.d.ts

@@ -1,12 +1,14 @@
 export declare type QueryErrorsData = {
     readonly form: {
-        readonly entries: ReadonlyArray<{
-            readonly check: string | null;
+        readonly errors: ReadonlyArray<{
+            readonly check: number | null;
             readonly error: string | null;
             readonly id: string;
             readonly key: string;
+            readonly label: string | null;
         } | null> | null;
         readonly isSubmitting: boolean | null;
+        readonly isValid: boolean | null;
         readonly isValidating: boolean | null;
     } | null;
 };
@@ -38,7 +40,7 @@ export declare const QueryErrors: {
 export declare type QueryFieldsData = {
     readonly form: {
         readonly entries: ReadonlyArray<{
-            readonly check: string | null;
+            readonly check: number | null;
             readonly error: string | null;
             readonly id: string;
             readonly key: string;
@@ -67,7 +69,7 @@ export declare const QueryFields: {
     };
 };
 export declare type FragmentSetData = {
-    readonly check: string | null;
+    readonly check: number | null;
     readonly id: string;
 };
 export declare const FragmentSet: {

package/lib/es/relay/queries.js

@@ -14,6 +14,9 @@ var error = {
 var value = {
   name: 'value'
 };
+var label = {
+  name: 'label'
+};
 var kindFragment = 'Fragment';
 export var QueryErrors = {
   id: '1',
@@ -30,9 +33,9 @@ export var QueryErrors = {
         name: 'isValidating'
       }, {
         kind: LINKED_FIELD,
-        name: 'entries',
+        name: 'errors',
         plural: true,
-        selections: [id, key, error, check]
+        selections: [id, key, error, check, label]
       }]
     }] /*: any*/
   }
@@ -64,5 +67,5 @@ export var FragmentSet = {
 export var FragmentValue = {
   kind: kindFragment,
   name: 'fragmentValue',
-  selections: [id, value, error]
+  selections: [id, value, error, label]
 };

package/lib/es/useFormSetValue.d.ts

@@ -1,2 +1,6 @@
 import { FormSetValueOptions, FormSetValueReturn } from './RelayFormsTypes';
-export declare function useFormSetValue<ValueType>({ key, initialValue, validate, validateOnChange, }: FormSetValueOptions<ValueType>): FormSetValueReturn<ValueType>;
+export declare const TOBEVALIDATE = 1;
+export declare const VALIDATING = 2;
+export declare const RESET = 5;
+export declare function isDone(check: any): boolean;
+export declare function useFormSetValue<ValueType>({ key, initialValue, validate, validateOnChange, label, }: FormSetValueOptions<ValueType>): FormSetValueReturn<ValueType>;