@reactables/react-forms 0.4.0-alpha.1

package/README.md

@@ -0,0 +1 @@
+Storybook at: [https://reactables.github.io/reactables/](https://reactables.github.io/reactables/).

package/dist/Components/ContactForm.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface ContactFormProps {
+    name?: string;
+}
+export declare const ContactForm: ({ name }: ContactFormProps) => React.JSX.Element;

package/dist/Components/Field.d.ts

@@ -0,0 +1,27 @@
+import React, { ChangeEvent, DragEvent, FocusEvent } from 'react';
+import { ControlModels } from '@reactables/forms';
+export type EventHandler<Event> = (event: Event, name?: string) => void;
+export interface CommonFieldInputProps {
+    name: string;
+    onDragStart?: EventHandler<DragEvent<unknown>>;
+    onDrop?: EventHandler<DragEvent<unknown>>;
+    onFocus?: EventHandler<FocusEvent<unknown>>;
+}
+export interface EventOrValueHandler<Event> extends EventHandler<Event> {
+    (value: unknown): void;
+}
+export interface WrappedFieldInputProps extends CommonFieldInputProps {
+    value: any;
+    onBlur: EventOrValueHandler<FocusEvent<unknown>>;
+    onChange: EventOrValueHandler<ChangeEvent<unknown>>;
+}
+export interface WrappedFieldProps {
+    input: WrappedFieldInputProps;
+    meta: ControlModels.FormControl<unknown>;
+}
+export interface FieldProps {
+    component: React.JSXElementConstructor<WrappedFieldProps>;
+    name?: string;
+    [key: string]: unknown;
+}
+export declare const Field: ({ component: Component, name, ...props }: FieldProps) => React.JSX.Element;

package/dist/Components/Form.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { AbstractControlConfig, ControlModels, RxFormActions } from '@reactables/forms';
+export declare const FormContext: React.Context<{
+    state: ControlModels.Form<unknown>;
+    actions: RxFormActions;
+}>;
+export interface FormChildrenProps {
+    state: ControlModels.Form<unknown>;
+    actions: RxFormActions;
+}
+interface FormProps {
+    formConfig: AbstractControlConfig;
+    children?: (props: FormChildrenProps) => React.ReactNode;
+}
+export declare const Form: ({ formConfig, children }: FormProps) => React.JSX.Element;
+export {};

package/dist/Components/Form.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Form } from './Form';
+declare const meta: Meta<typeof Form>;
+export default meta;
+type Story = StoryObj<typeof Form>;
+export declare const BasicControl: Story;
+export declare const Validation: Story;
+export declare const AsyncValidation: Story;
+export declare const FormArrays: Story;
+export declare const ResetForm: Story;

package/dist/Components/FormArray.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AbstractControlConfig, ControlRef, ControlModels } from '@reactables/forms';
+export interface FormArrayChildrenProps {
+    items: ControlModels.FormControl<unknown>[];
+    addControl: (config: AbstractControlConfig) => void;
+    removeControl: (controlRef: ControlRef) => void;
+}
+export interface FormArrayProps {
+    name?: string;
+    children?: (props: FormArrayChildrenProps) => React.ReactNode;
+}
+export declare const FormArray: ({ name, children }: FormArrayProps) => React.JSX.Element;

package/dist/Components/Input.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { WrappedFieldProps } from './Field';
+export interface InputProps extends WrappedFieldProps {
+    label?: string | React.ReactElement;
+}
+export declare const Input: ({ input, meta: { touched, errors, pending, valid }, label }: InputProps) => React.JSX.Element;

package/dist/Components/index.d.ts

@@ -0,0 +1,3 @@
+export { Form } from './Form';
+export { Field } from './Field';
+export { FormArray } from './FormArray';

package/dist/Testing/AsyncValidators/blacklistedEmail.d.ts

@@ -0,0 +1,2 @@
+import { ValidatorAsyncFn } from '@reactables/forms';
+export declare const blacklistedEmail: ValidatorAsyncFn;

package/dist/Testing/Models/Contact.d.ts

@@ -0,0 +1,5 @@
+export interface Contact {
+    firstName: string;
+    lastName: string;
+    email: string;
+}

package/dist/Testing/Validators/arrayLengthRequired.d.ts

@@ -0,0 +1,2 @@
+import { ValidatorFn } from '@reactables/forms';
+export declare const arrayLengthRequired: ValidatorFn;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Components';
+export * from '@reactables/forms';

package/dist/index.js

@@ -0,0 +1,114 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var forms = require('@reactables/forms');
+var reactHelpers = require('@reactables/react-helpers');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var FormContext = React__default["default"].createContext(null);
+var Form = function (_a) {
+    var formConfig = _a.formConfig, children = _a.children;
+    var _b = reactHelpers.useReactable(forms.RxForm.build(formConfig)), state = _b.state, actions = _b.actions;
+    var formChildrenProps = {
+        state: state,
+        actions: actions
+    };
+    return (React__default["default"].createElement(FormContext.Provider, { value: {
+            state: state,
+            actions: actions
+        } }, state !== undefined && children && children(formChildrenProps)));
+};
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var Field = function (_a) {
+    var Component = _a.component, _b = _a.name, name = _b === void 0 ? 'root' : _b, props = __rest(_a, ["component", "name"]);
+    var _c = React.useContext(FormContext), state = _c.state, _d = _c.actions, markControlAsTouched = _d.markControlAsTouched, updateValues = _d.updateValues;
+    var _e = state[name], controlRef = _e.controlRef, touched = _e.touched, value = _e.value;
+    var inputProps = {
+        name: name,
+        value: value,
+        onBlur: function () {
+            if (!touched)
+                markControlAsTouched({ controlRef: controlRef });
+        },
+        onChange: function (event) {
+            updateValues({
+                controlRef: controlRef,
+                value: event.currentTarget.value
+            });
+        }
+    };
+    return React__default["default"].createElement(Component, __assign({ input: inputProps, meta: state[name] }, props));
+};
+
+var FormArray = function (_a) {
+    var _b = _a.name, name = _b === void 0 ? 'root' : _b, children = _a.children;
+    var _c = React.useContext(FormContext), state = _c.state, _d = _c.actions, addControl = _d.addControl, removeControl = _d.removeControl;
+    var controlRef = state[name].controlRef;
+    var items = forms.getArrayItems(controlRef, state);
+    var formArrayChildrenProps = {
+        items: items,
+        addControl: function (config) {
+            addControl({ controlRef: controlRef, config: config });
+        },
+        removeControl: removeControl
+    };
+    return React__default["default"].createElement("div", null, children && children(formArrayChildrenProps));
+};
+
+exports.Field = Field;
+exports.Form = Form;
+exports.FormArray = FormArray;
+Object.keys(forms).forEach(function (k) {
+  if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return forms[k]; }
+  });
+});

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@reactables/react-forms",
+  "description": "React forms with reactables",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rimraf dist && rollup --config",
+    "lint": "eslint --max-warnings 0 \"src/**/*.ts*\" && prettier --check src/",
+    "fix": "eslint --fix \"src/**/*.ts*\" && prettier --write \"src/**/*.(ts*|scss)\"",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test-storybook": "test-storybook"
+  },
+  "author": "David Lai",
+  "license": "ISC",
+  "dependencies": {
+    "@reactables/core": "*",
+    "@reactables/forms": "^0.4.0-alpha.1",
+    "@reactables/react-helpers": "*"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "rxjs": "^6.0.0 || ^7.0.0"
+  },
+  "version": "0.4.0-alpha.1"
+}