@bluecateng/pelagos-forms 5.3.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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bluecateng/pelagos-forms",
-  "version": "5.3.0",
+  "version": "5.3.1",
   "description": "Form components",
   "license": "ISC",
   "sideEffects": false,
@@ -21,10 +21,16 @@
     "dist"
   ],
   "types": "./dist/index.d.ts",
-  "exports": "./dist/index.js",
+  "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": "971bd581aada6d75b44bf488b0a87a19bb938683"
+  "gitHead": "e95b4cd0a8a299353aa602e0feb0334e7ae5e513"
 }