@bluecateng/pelagos-forms 5.2.0 → 5.3.1

package/README.md

@@ -2,8 +2,50 @@
 
 Form components.
 
+The components are [@bluecateng/pelagos](https://www.npmjs.com/package/@bluecateng/pelagos) fields connected to a [@bluecateng/auto-forms](https://www.npmjs.com/package/@bluecateng/auto-forms) `Form`. Each one takes a `name` prop with the name of the form field, plus the props of the component it wraps, except the ones which are provided by the form.
+
 ## Installation
 
 ```bash
 npm i -S @bluecateng/pelagos-forms
 ```
+
+## Usage
+
+```javascript
+import {Form, validateNotEmpty} from '@bluecateng/auto-forms';
+import {FormSubmit, FormTextInput} from '@bluecateng/pelagos-forms';
+
+const initialValues = {name: ''};
+const rules = {name: validateNotEmpty('The name is required.')};
+
+const Example = ({onSave}) => (
+	<Form initialValues={initialValues} rules={rules} onSubmit={onSave}>
+		<FormTextInput id="name" name="name" label="Name" />
+		<FormSubmit text="Save" />
+	</Form>
+);
+```
+
+## Components
+
+| Component          | Wraps              | Provided by the form                                             |
+| ------------------ | ------------------ | ---------------------------------------------------------------- |
+| `FormCheckBox`     | `CheckBox`         | `checked`, `onChange`                                            |
+| `FormDateInput`    | `DateInputField`   | `value`, `error`, `onChange`                                     |
+| `FormDropDown`     | `DropDownField`    | `value`, `error`, `onChange`                                     |
+| `FormFileUploader` | `FileUploader`     | `files`, `error`, `onChange`                                     |
+| `FormListInput`    | `ListInput`        | `list`, `error`, `onListChange`, `onTextChange`, `onErrorChange` |
+| `FormRadioGroup`   | `RadioGroup`       | `value`, `onChange`                                              |
+| `FormTagComboBox`  | `TagComboBoxField` | `tags`, `error`, `onChange`, `onError`                           |
+| `FormTagInput`     | `TagInputField`    | `tags`, `error`, `onChange`, `onError`                           |
+| `FormTextArea`     | `TextAreaField`    | `value`, `error`, `onChange`                                     |
+| `FormTextInput`    | `TextInputField`   | `value`, `error`, `onChange`                                     |
+| `FormToggle`       | `ToggleField`      | `value`, `onChange`                                              |
+| `FormSubmit`       | `Button`           | `type`                                                           |
+
+`FormCheckBox`, `FormRadioGroup` and `FormToggle` do not receive the field error, so a validation rule on those fields is not displayed by the component. Show the error with `useFormField` if one is needed.
+
+`FormListInput` stores in the form extras whether the input has text which was not added to the list, use it in `extraValidation` to reject the form in that case.
+
+`FormSubmit` is a `Button` which is displayed as primary when the form values are different from the initial values, and as tertiary otherwise.

package/dist/components/FormCheckBox.d.ts

@@ -0,0 +1,13 @@
+import type {ComponentType} from 'react';
+import type {CheckBoxProps} from '@bluecateng/pelagos';
+
+export interface FormCheckBoxProps extends Omit<CheckBoxProps, 'checked' | 'onChange'> {
+	/** The form field name used by auto-forms connect HOC */
+	name: string;
+}
+
+/**
+ * A form-connected CheckBox whose checked state is managed by auto-forms.
+ */
+declare const FormCheckBox: ComponentType<FormCheckBoxProps>;
+export default FormCheckBox;

package/dist/components/FormDateInput.d.ts

@@ -0,0 +1,13 @@
+import type {ComponentType} from 'react';
+import type {DateInputFieldProps} from '@bluecateng/pelagos';
+
+export interface FormDateInputProps extends Omit<DateInputFieldProps, 'value' | 'error' | 'onChange'> {
+	/** The form field name used by auto-forms connect HOC */
+	name: string;
+}
+
+/**
+ * A form-connected DateInputField whose value is managed by auto-forms.
+ */
+declare const FormDateInput: ComponentType<FormDateInputProps>;
+export default FormDateInput;

package/dist/components/FormDropDown.d.ts

@@ -0,0 +1,13 @@
+import type {ReactElement} from 'react';
+import type {DropDownFieldProps} from '@bluecateng/pelagos';
+
+export interface FormDropDownProps<T> extends Omit<DropDownFieldProps<T>, 'value' | 'error' | 'onChange'> {
+	/** The form field name used by auto-forms connect HOC */
+	name: string;
+}
+
+/**
+ * A form-connected DropDownField whose value is managed by auto-forms.
+ */
+declare const FormDropDown: <T>(props: FormDropDownProps<T>) => ReactElement;
+export default FormDropDown;

package/dist/components/FormFileUploader.d.ts

@@ -0,0 +1,13 @@
+import type {ComponentType} from 'react';
+import type {FileUploaderProps} from '@bluecateng/pelagos';
+
+export interface FormFileUploaderProps extends Omit<FileUploaderProps, 'files' | 'error' | 'onChange'> {
+	/** The form field name used by auto-forms connect HOC */
+	name: string;
+}
+
+/**
+ * A form-connected FileUploader whose value is managed by auto-forms.
+ */
+declare const FormFileUploader: ComponentType<FormFileUploaderProps>;
+export default FormFileUploader;

package/dist/components/FormListInput.d.ts

@@ -0,0 +1,14 @@
+import type {ReactElement} from 'react';
+import type {ListInputProps} from '@bluecateng/pelagos';
+
+export interface FormListInputProps<T>
+	extends Omit<ListInputProps<T>, 'list' | 'error' | 'onListChange' | 'onTextChange' | 'onErrorChange'> {
+	/** The form field name used by auto-forms connect HOC */
+	name: string;
+}
+
+/**
+ * A form-connected ListInput whose value is managed by auto-forms.
+ */
+declare const FormListInput: <T>(props: FormListInputProps<T>) => ReactElement;
+export default FormListInput;

package/dist/components/FormRadioGroup.d.ts

@@ -0,0 +1,13 @@
+import type {ComponentType} from 'react';
+import type {RadioGroupProps} from '@bluecateng/pelagos';
+
+export interface FormRadioGroupProps extends Omit<RadioGroupProps, 'value' | 'onChange'> {
+	/** The form field name used by auto-forms connect HOC */
+	name: string;
+}
+
+/**
+ * A form-connected RadioGroup whose value is managed by auto-forms.
+ */
+declare const FormRadioGroup: ComponentType<FormRadioGroupProps>;
+export default FormRadioGroup;

package/dist/components/FormSubmit.d.ts

@@ -0,0 +1,9 @@
+import type {ComponentType} from 'react';
+import type {ButtonProps} from '@bluecateng/pelagos';
+
+/**
+ * A submit button that adapts its visual `type` based on form dirty state.
+ * The underlying Button's `type` prop is controlled internally.
+ */
+declare const FormSubmit: ComponentType<Omit<ButtonProps, 'type'>>;
+export default FormSubmit;

package/dist/components/FormSubmit.js

@@ -2,9 +2,7 @@ import PropTypes from 'prop-types';
 import { Button } from '@bluecateng/pelagos';
 import { useFormState } from '@bluecateng/auto-forms';
 import { jsx as _jsx } from "react/jsx-runtime";
-const FormSubmit = ({
-  ...props
-}) => {
+const FormSubmit = props => {
   const {
     isChanged
   } = useFormState();
@@ -20,6 +18,8 @@ FormSubmit.propTypes = {
   className: PropTypes.string,
   tooltipText: PropTypes.string,
   size: PropTypes.oneOf(['small', 'medium', 'large']),
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func
 };

package/dist/components/FormTagComboBox.d.ts

@@ -0,0 +1,14 @@
+import type {ReactElement} from 'react';
+import type {TagComboBoxFieldProps} from '@bluecateng/pelagos';
+
+export interface FormTagComboBoxProps<T>
+	extends Omit<TagComboBoxFieldProps<T>, 'tags' | 'error' | 'onChange' | 'onError'> {
+	/** The form field name used by auto-forms connect HOC */
+	name: string;
+}
+
+/**
+ * A form-connected TagComboBoxField whose value is managed by auto-forms.
+ */
+declare const FormTagComboBox: <T>(props: FormTagComboBoxProps<T>) => ReactElement;
+export default FormTagComboBox;

package/dist/components/FormTagInput.d.ts

@@ -0,0 +1,13 @@
+import type {ComponentType} from 'react';
+import type {TagInputFieldProps} from '@bluecateng/pelagos';
+
+export interface FormTagInputProps extends Omit<TagInputFieldProps, 'tags' | 'error' | 'onChange' | 'onError'> {
+	/** The form field name used by auto-forms connect HOC */
+	name: string;
+}
+
+/**
+ * A form-connected TagInputField whose value is managed by auto-forms.
+ */
+declare const FormTagInput: ComponentType<FormTagInputProps>;
+export default FormTagInput;

package/dist/components/FormTextArea.d.ts

@@ -0,0 +1,13 @@
+import type {ComponentType} from 'react';
+import type {TextAreaFieldProps} from '@bluecateng/pelagos';
+
+export interface FormTextAreaProps extends Omit<TextAreaFieldProps, 'value' | 'error' | 'onChange'> {
+	/** The form field name used by auto-forms connect HOC */
+	name: string;
+}
+
+/**
+ * A form-connected TextAreaField whose value is managed by auto-forms.
+ */
+declare const FormTextArea: ComponentType<FormTextAreaProps>;
+export default FormTextArea;

package/dist/components/FormTextInput.d.ts

@@ -0,0 +1,13 @@
+import type {ComponentType} from 'react';
+import type {TextInputFieldProps} from '@bluecateng/pelagos';
+
+export interface FormTextInputProps extends Omit<TextInputFieldProps, 'value' | 'error' | 'onChange'> {
+	/** The form field name used by auto-forms connect HOC */
+	name: string;
+}
+
+/**
+ * A form-connected TextInputField whose value is managed by auto-forms.
+ */
+declare const FormTextInput: ComponentType<FormTextInputProps>;
+export default FormTextInput;

package/dist/components/FormToggle.d.ts

@@ -0,0 +1,13 @@
+import type {ComponentType} from 'react';
+import type {ToggleFieldProps} from '@bluecateng/pelagos';
+
+export interface FormToggleProps extends Omit<ToggleFieldProps, 'value' | 'onChange'> {
+	/** The form field name used by auto-forms connect HOC */
+	name: string;
+}
+
+/**
+ * A form-connected ToggleField whose value is managed by auto-forms.
+ */
+declare const FormToggle: ComponentType<FormToggleProps>;
+export default FormToggle;

package/dist/index.d.ts

@@ -0,0 +1,98 @@
+import { ButtonProps, CheckBoxProps, DateInputFieldProps, DropDownFieldProps, FileUploaderProps, ListInputProps, RadioGroupProps, TagComboBoxFieldProps, TagInputFieldProps, TextAreaFieldProps, TextInputFieldProps, ToggleFieldProps } from '@bluecateng/pelagos';
+import { ComponentType, ReactElement } from 'react';
+
+export interface FormCheckBoxProps extends Omit<CheckBoxProps, "checked" | "onChange"> {
+	/** The form field name used by auto-forms connect HOC */
+	name: string;
+}
+/**
+ * A form-connected CheckBox whose checked state is managed by auto-forms.
+ */
+export declare const FormCheckBox: ComponentType<FormCheckBoxProps>;
+export interface FormDateInputProps extends Omit<DateInputFieldProps, "value" | "error" | "onChange"> {
+	/** The form field name used by auto-forms connect HOC */
+	name: string;
+}
+/**
+ * A form-connected DateInputField whose value is managed by auto-forms.
+ */
+export declare const FormDateInput: ComponentType<FormDateInputProps>;
+export interface FormDropDownProps<T> extends Omit<DropDownFieldProps<T>, "value" | "error" | "onChange"> {
+	/** The form field name used by auto-forms connect HOC */
+	name: string;
+}
+/**
+ * A form-connected DropDownField whose value is managed by auto-forms.
+ */
+export declare const FormDropDown: <T>(props: FormDropDownProps<T>) => ReactElement;
+export interface FormFileUploaderProps extends Omit<FileUploaderProps, "files" | "error" | "onChange"> {
+	/** The form field name used by auto-forms connect HOC */
+	name: string;
+}
+/**
+ * A form-connected FileUploader whose value is managed by auto-forms.
+ */
+export declare const FormFileUploader: ComponentType<FormFileUploaderProps>;
+export interface FormTagComboBoxProps<T> extends Omit<TagComboBoxFieldProps<T>, "tags" | "error" | "onChange" | "onError"> {
+	/** The form field name used by auto-forms connect HOC */
+	name: string;
+}
+/**
+ * A form-connected TagComboBoxField whose value is managed by auto-forms.
+ */
+export declare const FormTagComboBox: <T>(props: FormTagComboBoxProps<T>) => ReactElement;
+export interface FormTagInputProps extends Omit<TagInputFieldProps, "tags" | "error" | "onChange" | "onError"> {
+	/** The form field name used by auto-forms connect HOC */
+	name: string;
+}
+/**
+ * A form-connected TagInputField whose value is managed by auto-forms.
+ */
+export declare const FormTagInput: ComponentType<FormTagInputProps>;
+export interface FormTextAreaProps extends Omit<TextAreaFieldProps, "value" | "error" | "onChange"> {
+	/** The form field name used by auto-forms connect HOC */
+	name: string;
+}
+/**
+ * A form-connected TextAreaField whose value is managed by auto-forms.
+ */
+export declare const FormTextArea: ComponentType<FormTextAreaProps>;
+export interface FormTextInputProps extends Omit<TextInputFieldProps, "value" | "error" | "onChange"> {
+	/** The form field name used by auto-forms connect HOC */
+	name: string;
+}
+/**
+ * A form-connected TextInputField whose value is managed by auto-forms.
+ */
+export declare const FormTextInput: ComponentType<FormTextInputProps>;
+export interface FormToggleProps extends Omit<ToggleFieldProps, "value" | "onChange"> {
+	/** The form field name used by auto-forms connect HOC */
+	name: string;
+}
+/**
+ * A form-connected ToggleField whose value is managed by auto-forms.
+ */
+export declare const FormToggle: ComponentType<FormToggleProps>;
+export interface FormListInputProps<T> extends Omit<ListInputProps<T>, "list" | "error" | "onListChange" | "onTextChange" | "onErrorChange"> {
+	/** The form field name used by auto-forms connect HOC */
+	name: string;
+}
+/**
+ * A form-connected ListInput whose value is managed by auto-forms.
+ */
+export declare const FormListInput: <T>(props: FormListInputProps<T>) => ReactElement;
+export interface FormRadioGroupProps extends Omit<RadioGroupProps, "value" | "onChange"> {
+	/** The form field name used by auto-forms connect HOC */
+	name: string;
+}
+/**
+ * A form-connected RadioGroup whose value is managed by auto-forms.
+ */
+export declare const FormRadioGroup: ComponentType<FormRadioGroupProps>;
+/**
+ * A submit button that adapts its visual `type` based on form dirty state.
+ * The underlying Button's `type` prop is controlled internally.
+ */
+export declare const FormSubmit: ComponentType<Omit<ButtonProps, "type">>;
+
+export {};

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@bluecateng/pelagos-forms",
-  "version": "5.2.0",
+  "version": "5.3.1",
   "description": "Form components",
   "license": "ISC",
   "sideEffects": false,
   "scripts": {
-    "build": "rm -rf dist && babel -D -d dist --env-name production --root-mode upward src",
+    "build": "rm -rf dist && babel -D -d dist --env-name production --root-mode upward src && npm run bundle-dts",
+    "bundle-dts": "dts-bundle-generator -o dist/index.d.ts --no-banner --silent --disable-symlinks-following src/index.d.ts",
     "prepack": "npm run build"
   },
   "repository": {
@@ -19,10 +20,17 @@
   "files": [
     "dist"
   ],
-  "exports": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "default": "./dist/index.js"
+  },
+  "dependencies": {
+    "prop-types": "^15.8.1"
+  },
   "peerDependencies": {
-    "@bluecateng/auto-forms": ">= 0",
-    "@bluecateng/pelagos": ">= 10"
+    "@bluecateng/auto-forms": ">= 1",
+    "@bluecateng/pelagos": ">= 12.23"
   },
-  "gitHead": "cff525ace2ed6a38c32a313bda210ccbdc9edd4e"
+  "gitHead": "e95b4cd0a8a299353aa602e0feb0334e7ae5e513"
 }