@react-foundry/form 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (C) 2019-2025 Crown Copyright
+Copyright (C) 2019-2026 Daniel A.C. Martin
+
+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,102 @@
+React Foundry - Form
+====================
+
+A component to collect information from the user.
+
+
+Using this package
+------------------
+
+First install the package into your project:
+
+```shell
+npm install -S @react-foundry/form
+```
+
+Then use it in your code as follows:
+
+```js
+import React, { createElement as h } from 'react';
+import Form from '@react-foundry/form';
+
+export const MyComponent = props => (
+  <Form action="/result" method="get">
+    <Form.TextInput
+      name="fullName"
+      label={<h2>What is your name?</h2>}
+      hint="Write your firstname followed by your surname"
+      validators={[
+        required()
+      ]}
+    />
+    <Form.Radios
+      name="sex"
+      label={<h2>Sex?</h2>}
+      options={[
+        { value: 'male', label: 'Male' },
+        { value: 'female', label: 'Female' },
+        { value: 'no', label: 'No thanks, we\'re British' }
+      ]}
+      validators={[
+        required('Provide your sex')
+      ]}
+    />
+    <Form.DateInput
+      name="dob"
+      prettyName="date of birth"
+      label={<h2>What is your date of birth?</h2>}
+      validators={[
+        required('Provide your date of birth'),
+        past(),
+        after('1900-01-01')()
+      ]}
+    />
+    <Form.Radios
+      name="married"
+      label={<h2>Are you married?</h2>}
+      options={[
+        { value: 'Y', label: 'Yes' },
+        { value: 'N', label: 'No' }
+      ]}
+      validators={[
+        required('Provide your marital status')
+      ]}
+    />
+    <Form.Submit value="Submit" />
+  </Form>
+);
+
+export default MyComponent;
+```
+
+
+Working on this package
+-----------------------
+
+Before working on this package you must install its dependencies using
+the following command:
+
+```shell
+pnpm install
+```
+
+
+### Testing
+
+```shell
+npm test
+```
+
+
+### Building
+
+```shell
+npm run build
+```
+
+
+### Clean-up
+
+```shell
+npm run clean
+```

package/dist/Form.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps, ComponentType, FC } from 'react';
+import WTForm from '@react-foundry/forms';
+import '../assets/Form.scss';
+export type FormProps = ComponentProps<typeof WTForm>;
+type TForm = ComponentType<FormProps> & {
+    Checkboxes: ComponentType<any>;
+    DateInput: ComponentType<any>;
+    Fork: ComponentType<any>;
+    Input: ComponentType<any>;
+    Page: ComponentType<any>;
+    Radios: ComponentType<any>;
+    Select: ComponentType<any>;
+    Submit: ComponentType<any>;
+    Textarea: ComponentType<any>;
+    TextInput: ComponentType<any>;
+};
+export declare const FormComponent: FC<FormProps>;
+export declare const Form: TForm;
+export default Form;
+export { after, before, date, email, exactLength, future, integer, maximum, maxLength, maxWords, minimum, minLength, minWords, numeric, past, range, required, url, validator, withControl, withForm, withField } from '@react-foundry/forms';
+export type { RawField } from '@react-foundry/forms';

package/dist/Form.js

@@ -0,0 +1,82 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withField = exports.withForm = exports.withControl = exports.validator = exports.url = exports.required = exports.range = exports.past = exports.numeric = exports.minWords = exports.minLength = exports.minimum = exports.maxWords = exports.maxLength = exports.maximum = exports.integer = exports.future = exports.exactLength = exports.email = exports.date = exports.before = exports.after = exports.Form = exports.FormComponent = void 0;
+const react_1 = require("react");
+const forms_1 = __importStar(require("@react-foundry/forms"));
+const controls_1 = require("./controls");
+const fields_1 = require("./fields");
+require("../assets/Form.scss");
+const FormComponent = ({ classBlock, ...props }) => (0, react_1.createElement)(forms_1.default, {
+    ...props,
+    classBlock: classBlock || 'react-foundry-form'
+});
+exports.FormComponent = FormComponent;
+exports.Form = Object.assign(exports.FormComponent, {
+    Checkboxes: fields_1.Checkboxes,
+    DateInput: fields_1.DateInput,
+    Fork: forms_1.Fork,
+    Input: fields_1.Input,
+    Page: forms_1.Page,
+    Radios: fields_1.Radios,
+    Select: fields_1.Select,
+    Submit: controls_1.Submit,
+    Textarea: fields_1.Textarea,
+    TextInput: fields_1.TextInput
+});
+exports.default = exports.Form;
+var forms_2 = require("@react-foundry/forms");
+Object.defineProperty(exports, "after", { enumerable: true, get: function () { return forms_2.after; } });
+Object.defineProperty(exports, "before", { enumerable: true, get: function () { return forms_2.before; } });
+Object.defineProperty(exports, "date", { enumerable: true, get: function () { return forms_2.date; } });
+Object.defineProperty(exports, "email", { enumerable: true, get: function () { return forms_2.email; } });
+Object.defineProperty(exports, "exactLength", { enumerable: true, get: function () { return forms_2.exactLength; } });
+Object.defineProperty(exports, "future", { enumerable: true, get: function () { return forms_2.future; } });
+Object.defineProperty(exports, "integer", { enumerable: true, get: function () { return forms_2.integer; } });
+Object.defineProperty(exports, "maximum", { enumerable: true, get: function () { return forms_2.maximum; } });
+Object.defineProperty(exports, "maxLength", { enumerable: true, get: function () { return forms_2.maxLength; } });
+Object.defineProperty(exports, "maxWords", { enumerable: true, get: function () { return forms_2.maxWords; } });
+Object.defineProperty(exports, "minimum", { enumerable: true, get: function () { return forms_2.minimum; } });
+Object.defineProperty(exports, "minLength", { enumerable: true, get: function () { return forms_2.minLength; } });
+Object.defineProperty(exports, "minWords", { enumerable: true, get: function () { return forms_2.minWords; } });
+Object.defineProperty(exports, "numeric", { enumerable: true, get: function () { return forms_2.numeric; } });
+Object.defineProperty(exports, "past", { enumerable: true, get: function () { return forms_2.past; } });
+Object.defineProperty(exports, "range", { enumerable: true, get: function () { return forms_2.range; } });
+Object.defineProperty(exports, "required", { enumerable: true, get: function () { return forms_2.required; } });
+Object.defineProperty(exports, "url", { enumerable: true, get: function () { return forms_2.url; } });
+Object.defineProperty(exports, "validator", { enumerable: true, get: function () { return forms_2.validator; } });
+Object.defineProperty(exports, "withControl", { enumerable: true, get: function () { return forms_2.withControl; } });
+Object.defineProperty(exports, "withForm", { enumerable: true, get: function () { return forms_2.withForm; } });
+Object.defineProperty(exports, "withField", { enumerable: true, get: function () { return forms_2.withField; } });

package/dist/Form.mjs

@@ -0,0 +1,23 @@
+import { createElement as h } from 'react';
+import WTForm, { Fork, Page } from '@react-foundry/forms';
+import { Submit } from './controls';
+import { Checkboxes, DateInput, Input, Radios, Select, Textarea, TextInput } from './fields';
+import '../assets/Form.scss';
+export const FormComponent = ({ classBlock, ...props }) => h(WTForm, {
+    ...props,
+    classBlock: classBlock || 'react-foundry-form'
+});
+export const Form = Object.assign(FormComponent, {
+    Checkboxes,
+    DateInput,
+    Fork,
+    Input,
+    Page,
+    Radios,
+    Select,
+    Submit,
+    Textarea,
+    TextInput
+});
+export default Form;
+export { after, before, date, email, exactLength, future, integer, maximum, maxLength, maxWords, minimum, minLength, minWords, numeric, past, range, required, url, validator, withControl, withForm, withField } from '@react-foundry/forms';

package/dist/controls.d.ts

@@ -0,0 +1,5 @@
+import type { ButtonHTMLAttributes, ComponentType } from 'react';
+import type { ControlProps } from '@react-foundry/forms';
+type SubmitButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const Submit: ComponentType<SubmitButtonProps & ControlProps>;
+export {};

package/dist/controls.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Submit = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const forms_1 = require("@react-foundry/forms");
+const SubmitButton = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)("button", { ...props, type: "submit", children: children }));
+SubmitButton.displayName = 'Submit';
+exports.Submit = (0, forms_1.withControl)(SubmitButton);

package/dist/controls.mjs

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { withControl } from '@react-foundry/forms';
+const SubmitButton = ({ children, ...props }) => (_jsx("button", { ...props, type: "submit", children: children }));
+SubmitButton.displayName = 'Submit';
+export const Submit = withControl(SubmitButton);

package/dist/fields.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentType, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import type { FieldProps } from '@react-foundry/forms';
+type InputProps = InputHTMLAttributes<HTMLInputElement>;
+type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
+    options: any[];
+};
+type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+export declare const Input: ComponentType<InputProps & FieldProps>;
+export declare const TextInput: ComponentType<InputProps & FieldProps>;
+export declare const DateInput: ComponentType<InputProps & FieldProps>;
+export declare const Select: ComponentType<SelectProps & FieldProps>;
+export declare const Textarea: ComponentType<TextareaProps & FieldProps>;
+export { Select as Checkboxes, Select as Radios };

package/dist/fields.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Radios = exports.Checkboxes = exports.Textarea = exports.Select = exports.DateInput = exports.TextInput = exports.Input = void 0;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const forms_1 = require("@react-foundry/forms");
+const _Input = ({ ...props }) => ((0, jsx_runtime_1.jsx)("input", { ...props }));
+const _TextInput = ({ ...props }) => ((0, jsx_runtime_1.jsx)("input", { type: "text", ...props }));
+const _DateInput = ({ ...props }) => ((0, jsx_runtime_1.jsx)("input", { type: "date", ...props }));
+const _Select = ({ options, ...props }) => ((0, jsx_runtime_1.jsx)("select", { ...props, children: options.map(({ label, selected, ...attrs }, i) => ((0, react_1.createElement)("option", { ...attrs, key: i }, label))) }));
+const _Textarea = ({ ...props }) => ((0, jsx_runtime_1.jsx)("textarea", { ...props }));
+_Input.displayName = 'Input';
+_TextInput.displayName = 'TextInput';
+_DateInput.displayName = 'DateInput';
+_Select.displayName = 'Select';
+_Textarea.displayName = 'Textarea';
+exports.Input = (0, forms_1.withForm)(_Input);
+exports.TextInput = (0, forms_1.withForm)(_TextInput);
+exports.DateInput = (0, forms_1.withForm)(_DateInput);
+exports.Select = (0, forms_1.withForm)(_Select);
+exports.Checkboxes = exports.Select;
+exports.Radios = exports.Select;
+exports.Textarea = (0, forms_1.withForm)(_Textarea);

package/dist/fields.mjs

@@ -0,0 +1,19 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { withForm } from '@react-foundry/forms';
+const _Input = ({ ...props }) => (_jsx("input", { ...props }));
+const _TextInput = ({ ...props }) => (_jsx("input", { type: "text", ...props }));
+const _DateInput = ({ ...props }) => (_jsx("input", { type: "date", ...props }));
+const _Select = ({ options, ...props }) => (_jsx("select", { ...props, children: options.map(({ label, selected, ...attrs }, i) => (_createElement("option", { ...attrs, key: i }, label))) }));
+const _Textarea = ({ ...props }) => (_jsx("textarea", { ...props }));
+_Input.displayName = 'Input';
+_TextInput.displayName = 'TextInput';
+_DateInput.displayName = 'DateInput';
+_Select.displayName = 'Select';
+_Textarea.displayName = 'Textarea';
+export const Input = withForm(_Input);
+export const TextInput = withForm(_TextInput);
+export const DateInput = withForm(_DateInput);
+export const Select = withForm(_Select);
+export const Textarea = withForm(_Textarea);
+export { Select as Checkboxes, Select as Radios };

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@react-foundry/form",
+  "version": "0.1.0",
+  "description": "A component to collect information from the user.",
+  "main": "dist/Form.js",
+  "sass": "assets/Form.scss",
+  "exports": {
+    ".": {
+      "sass": "./assets/Form.scss",
+      "types": "./dist/Form.d.ts",
+      "import": "./dist/Form.mjs",
+      "require": "./dist/Form.js",
+      "default": "./dist/Form.mjs"
+    }
+  },
+  "files": [
+    "/assets",
+    "/dist"
+  ],
+  "author": "Daniel A.C. Martin <npm@daniel-martin.co.uk> (http://daniel-martin.co.uk/)",
+  "license": "MIT",
+  "keywords": [
+    "react-components"
+  ],
+  "dependencies": {
+    "@react-foundry/forms": "^0.1.0"
+  },
+  "peerDependencies": {
+    "@react-foundry/docs-components": "^0.1.0",
+    "@storybook/addon-docs": "^9.1.17",
+    "react": "^19.2.3"
+  },
+  "peerDependenciesMeta": {
+    "@react-foundry/docs-components": {
+      "optional": true
+    },
+    "@storybook/addon-docs": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "19.2.9",
+    "jest": "30.2.0",
+    "jest-environment-jsdom": "30.2.0",
+    "ts-jest": "29.4.6",
+    "typescript": "5.9.3",
+    "@react-foundry/component-test-helpers": "0.1.0"
+  },
+  "scripts": {
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
+    "build": "npm run build:esm && npm run build:cjs",
+    "build:esm": "tsc -m es2022 && find dist -name '*.js' -exec sh -c 'mv \"$0\" \"${0%.js}.mjs\"' {} \\;",
+    "build:cjs": "tsc",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo"
+  },
+  "module": "dist/Form.mjs",
+  "typings": "dist/Form.d.ts"
+}