relay-forms-nodeps 1.0.0

package/.babelrc.js

@@ -0,0 +1,5 @@
+const plugin = require('babel-preset-fbjs/plugins/dev-expression');
+
+module.exports = {
+    plugins: [plugin]
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Lorenzo Di Giacomo
+
+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.

package/README.md

@@ -0,0 +1,124 @@
+# relay-forms-nodeps ![](https://github.com/morrys/relay-forms/workflows/Build/badge.svg)
+Build forms in React with Relay
+
+## Installation
+
+Install relay-forms-nodeps using yarn or npm:
+
+```
+yarn add relay-forms-nodeps
+```
+
+## Contributing
+
+* **Give a star** to the repository and **share it**, you will **help** the **project** and the **people** who will find it useful
+
+* **Create issues**, your **questions** are a **valuable help**
+
+* **PRs are welcome**, but it is always **better to open the issue first** so as to **help** me and other people **evaluating it**
+
+* **Please sponsor me**
+
+## 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)}
+            />
+        </>
+    );
+};
+```

package/lib/RelayFormsTypes.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+export declare type FunctionOnSubmit<ValueType> = (values: ValueType) => Promise<void> | void;
+export declare type FormSubmitOptions<ValueType> = {
+    onSubmit: FunctionOnSubmit<ValueType>;
+};
+export declare type FormSubmitReturn = {
+    submit: (event?: React.BaseSyntheticEvent<any, any, any>) => void;
+    validate: () => void;
+    reset: () => void;
+};
+export declare type FormSetValueOptions<ValueType> = {
+    key: string;
+    initialValue?: ValueType;
+    validate?: (value: ValueType) => Promise<string | undefined> | string | undefined;
+    validateOnChange?: boolean;
+};
+export declare type FormSetValueStateReturn<ValueType> = {
+    error: undefined | null | Error;
+    value?: ValueType;
+};
+export declare type FormValueStateReturn<ValueType> = {
+    readonly id: string;
+    readonly value: ValueType | null;
+    readonly error: string | null;
+};
+export declare type FormSetValueFunctionReturn<ValueType> = (newValue: ValueType) => void;
+export declare type FormSetValueReturn<ValueType> = [FormSetValueStateReturn<ValueType>, FormSetValueFunctionReturn<ValueType>];
+export declare type FormStateReturn = {
+    errors: ReadonlyArray<{
+        readonly id: string;
+        readonly key: string;
+        readonly error: string | null;
+    } | null | undefined>;
+    isValidating: boolean;
+    isSubmitting: boolean;
+    isValid: boolean;
+};

package/lib/RelayFormsTypes.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/Utils.d.ts

@@ -0,0 +1,11 @@
+import { Store, Snapshot } from './relay/RelayTypes';
+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 const operationQueryForm: any;
+export declare const operationQueryErrorsForm: any;

package/lib/Utils.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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;
+}
+function getSnapshot(environment, fragment, key) {
+  var item = {
+    __id: getFieldId(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');
+    }
+    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');
+  });
+};
+exports.operationQueryForm = RelayModernSelector_1.createOperationDescriptor(queries_1.QueryFields);
+exports.operationQueryErrorsForm = RelayModernSelector_1.createOperationDescriptor(queries_1.QueryErrors);

package/lib/es/RelayFormsTypes.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+export declare type FunctionOnSubmit<ValueType> = (values: ValueType) => Promise<void> | void;
+export declare type FormSubmitOptions<ValueType> = {
+    onSubmit: FunctionOnSubmit<ValueType>;
+};
+export declare type FormSubmitReturn = {
+    submit: (event?: React.BaseSyntheticEvent<any, any, any>) => void;
+    validate: () => void;
+    reset: () => void;
+};
+export declare type FormSetValueOptions<ValueType> = {
+    key: string;
+    initialValue?: ValueType;
+    validate?: (value: ValueType) => Promise<string | undefined> | string | undefined;
+    validateOnChange?: boolean;
+};
+export declare type FormSetValueStateReturn<ValueType> = {
+    error: undefined | null | Error;
+    value?: ValueType;
+};
+export declare type FormValueStateReturn<ValueType> = {
+    readonly id: string;
+    readonly value: ValueType | null;
+    readonly error: string | null;
+};
+export declare type FormSetValueFunctionReturn<ValueType> = (newValue: ValueType) => void;
+export declare type FormSetValueReturn<ValueType> = [FormSetValueStateReturn<ValueType>, FormSetValueFunctionReturn<ValueType>];
+export declare type FormStateReturn = {
+    errors: ReadonlyArray<{
+        readonly id: string;
+        readonly key: string;
+        readonly error: string | null;
+    } | null | undefined>;
+    isValidating: boolean;
+    isSubmitting: boolean;
+    isValid: boolean;
+};

package/lib/es/Utils.d.ts

@@ -0,0 +1,11 @@
+import { Store, Snapshot } from './relay/RelayTypes';
+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 const operationQueryForm: any;
+export declare const operationQueryErrorsForm: any;

package/lib/es/Utils.js

@@ -0,0 +1,81 @@
+import { QueryErrors, QueryFields } from './relay/queries';
+import { getSingularSelector, createOperationDescriptor } 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) {
+  return PREFIX_LOCAL_FORM + '.' + key;
+}
+export function getSnapshot(environment, fragment, key) {
+  var item = {
+    __id: getFieldId(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');
+    }
+    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');
+  });
+};
+export var operationQueryForm = createOperationDescriptor(QueryFields);
+export var operationQueryErrorsForm = createOperationDescriptor(QueryErrors);

package/lib/es/index.d.ts

@@ -0,0 +1,9 @@
+export { useFormState } from './useFormState';
+export { useFormSubmit } from './useFormSubmit';
+export { useFormSetValue } from './useFormSetValue';
+export { useFormValue } from './useFormValue';
+export { StoreProvider } from './relay/RelayStoreProvider';
+export { RelayModernStore as Store, createStore } from './relay/RelayModernStore';
+export { RelayRecordSource as RecordSource } from './relay/RelayRecordSource';
+export * from './RelayFormsTypes';
+export * from './relay/RelayTypes';

package/lib/es/index.js

@@ -0,0 +1,7 @@
+export { useFormState } from './useFormState';
+export { useFormSubmit } from './useFormSubmit';
+export { useFormSetValue } from './useFormSetValue';
+export { useFormValue } from './useFormValue';
+export { StoreProvider } from './relay/RelayStoreProvider';
+export { RelayModernStore as Store, createStore } from './relay/RelayModernStore';
+export { RelayRecordSource as RecordSource } from './relay/RelayRecordSource';

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

@@ -0,0 +1,107 @@
+/**
+ * @public
+ *
+ * Low-level record manipulation methods.
+ *
+ * A note about perf: we use long-hand property access rather than computed
+ * properties in this file for speed ie.
+ *
+ *    const object = {};
+ *    object[KEY] = value;
+ *    record[storageKey] = object;
+ *
+ * instead of:
+ *
+ *    record[storageKey] = {
+ *      [KEY]: value,
+ *    };
+ *
+ * The latter gets transformed by Babel into something like:
+ *
+ *    function _defineProperty(obj, key, value) {
+ *      if (key in obj) {
+ *        Object.defineProperty(obj, key, {
+ *          value: value,
+ *          enumerable: true,
+ *          configurable: true,
+ *          writable: true,
+ *        });
+ *      } else {
+ *        obj[key] = value;
+ *      }
+ *      return obj;
+ *    }
+ *
+ *    record[storageKey] = _defineProperty({}, KEY, value);
+ *
+ * A quick benchmark shows that computed property access is an order of
+ * magnitude slower (times in seconds for 100,000 iterations):
+ *
+ *               best     avg     sd
+ *    computed 0.02175 0.02292 0.00113
+ *      manual 0.00110 0.00123 0.00008
+ */
+/**
+ * @public
+ *
+ * Create a new record.
+ */
+declare function create(dataID: any): {};
+/**
+ * @public
+ *
+ * Get a scalar (non-link) field value.
+ */
+declare function getValue(record: any, storageKey: any): any;
+/**
+ * @public
+ *
+ * Get the value of a field as a reference to another record. Throws if the
+ * field has a different type.
+ */
+declare function getLinkedRecordID(record: any, storageKey: any): any;
+/**
+ * @public
+ *
+ * Get the value of a field as a list of references to other records. Throws if
+ * the field has a different type.
+ */
+declare function getLinkedRecordIDs(record: any, storageKey: string): any;
+/**
+ * @public
+ *
+ * Compares the fields of a previous and new record, returning either the
+ * previous record if all fields are equal or a new record (with merged fields)
+ * if any fields have changed.
+ */
+declare function update(prevRecord: any, nextRecord: any): any;
+/**
+ * @public
+ *
+ * Set the value of a storageKey to a scalar.
+ * YES
+ */
+declare function setValue(record: any, storageKey: any, value: any): void;
+/**
+ * @public
+ *
+ * Set the value of a field to a reference to another record.
+ */
+declare function setLinkedRecordID(record: any, storageKey: string, linkedID: any): void;
+/**
+ * @public
+ *
+ * Set the value of a field to a list of references other records.
+ */
+declare function setLinkedRecordIDs(record: any, storageKey: string, linkedIDs: any): void;
+export declare const RelayModernRecord: {
+    create: typeof create;
+    getLinkedRecordID: typeof getLinkedRecordID;
+    getLinkedRecordIDs: typeof getLinkedRecordIDs;
+    getValue: typeof getValue;
+    setValue: typeof setValue;
+    setLinkedRecordID: typeof setLinkedRecordID;
+    setLinkedRecordIDs: typeof setLinkedRecordIDs;
+    update: typeof update;
+};
+export {};