@ultraviolet/form 1.0.0

package/dist/index.js

@@ -0,0 +1,20 @@
+export { FieldArray, useFieldArray } from 'react-final-form-arrays';
+export { FORM_ERROR } from 'final-form';
+export { Field, FormSpy, useField, useForm, useFormState } from 'react-final-form';
+export { ErrorProvider, useErrors } from './providers/ErrorContext/index.js';
+export { CheckboxField } from './components/CheckboxField/index.js';
+export { DateField } from './components/DateField/index.js';
+export { Form } from './components/Form/index.js';
+export { RadioField } from './components/RadioField/index.js';
+export { SelectableCardField } from './components/SelectableCardField/index.js';
+export { SelectInputField } from './components/SelectInputField/index.js';
+export { NumberInputField } from './components/NumberInputField/index.js';
+export { Submit } from './components/Submit/index.js';
+export { SubmitErrorAlert } from './components/SubmitErrorAlert/index.js';
+export { TagInputField } from './components/TagInputField/index.js';
+export { TextInputField } from './components/TextInputField/index.js';
+export { TimeField } from './components/TimeField/index.js';
+export { ToggleField } from './components/ToggleField/index.js';
+export { useValidation } from './hooks/useValidation.js';
+export { useOnFieldChange } from './hooks/useOnFieldChange.js';
+export { pickValidators } from './helpers/pickValidators.js';

package/dist/providers/ErrorContext/index.js

@@ -0,0 +1,74 @@
+import { useCallback, useMemo, useContext, createContext } from 'react';
+import { useFormState } from 'react-final-form';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const ErrorContext = /*#__PURE__*/createContext(undefined);
+const ErrorProvider = _ref => {
+  let {
+    children,
+    errors
+  } = _ref;
+  const {
+    values
+  } = useFormState();
+  const getFirstError = useCallback(_ref2 => {
+    let {
+      label,
+      name,
+      value,
+      meta,
+      ...additionalParams
+    } = _ref2;
+    if (meta?.error && Array.isArray(meta.error)) {
+      return meta.error.map(untypedKey => {
+        const key = untypedKey;
+        if (typeof errors[key] === 'function') {
+          return errors[key]({
+            label,
+            meta,
+            name,
+            value,
+            values,
+            ...additionalParams
+          });
+        }
+        return errors[key];
+      }).filter(errorString => !!errorString)[0] ?? '';
+    }
+    // With a custom validate function the user may return a string directly
+    if (meta?.error && typeof meta?.error === 'string') return meta?.error;
+    return '';
+  }, [errors, values]);
+  const getError = useCallback(_ref3 => {
+    let {
+      meta,
+      errorProp,
+      value,
+      ...props
+    } = _ref3;
+    if (errorProp) return errorProp;
+    const hasInitialValueAndNotTouched = value !== undefined && value !== null && value !== '' && value !== false && meta?.dirty === false;
+    return meta?.error && (hasInitialValueAndNotTouched || meta.touched) ? getFirstError({
+      meta,
+      value,
+      ...props
+    }) : undefined;
+  }, [getFirstError]);
+  const value = useMemo(() => ({
+    errors,
+    getError
+  }), [errors, getError]);
+  return jsx(ErrorContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+const useErrors = () => {
+  const context = useContext(ErrorContext);
+  if (context === undefined) {
+    throw new Error('useErrors must be used within an ErrorProvider ');
+  }
+  return context;
+};
+
+export { ErrorProvider, useErrors };

package/dist/validators/index.js

@@ -0,0 +1,21 @@
+import { maxValidator } from './max.js';
+import { maxDateValidator } from './maxDate.js';
+import { maxLengthValidator } from './maxLength.js';
+import { minValidator } from './min.js';
+import { minDateValidator } from './minDate.js';
+import { minLengthValidator } from './minLength.js';
+import { regexValidator } from './regex.js';
+import { requiredValidator } from './required.js';
+
+var validators = {
+  max: maxValidator,
+  maxDate: maxDateValidator,
+  maxLength: maxLengthValidator,
+  min: minValidator,
+  minDate: minDateValidator,
+  minLength: minLengthValidator,
+  regex: regexValidator,
+  required: requiredValidator
+};
+
+export { validators as default };

package/dist/validators/max.js

@@ -0,0 +1,6 @@
+const maxValidator = max => ({
+  error: 'TOO_HIGH',
+  validate: value => value === undefined || Number(value) <= max
+});
+
+export { maxValidator };

package/dist/validators/maxDate.js

@@ -0,0 +1,6 @@
+const maxDateValidator = maxDate => ({
+  error: 'MAX_DATE',
+  validate: value => value === undefined || value <= maxDate
+});
+
+export { maxDateValidator };

package/dist/validators/maxLength.js

@@ -0,0 +1,6 @@
+const maxLengthValidator = maxLength => ({
+  error: 'MAX_LENGTH',
+  validate: value => value === undefined || value.length <= maxLength
+});
+
+export { maxLengthValidator };

package/dist/validators/min.js

@@ -0,0 +1,6 @@
+const minValidator = min => ({
+  error: 'TOO_LOW',
+  validate: value => value === undefined || Number(value) >= min
+});
+
+export { minValidator };

package/dist/validators/minDate.js

@@ -0,0 +1,6 @@
+const minDateValidator = minDate => ({
+  error: 'MIN_DATE',
+  validate: value => value === undefined || value >= minDate
+});
+
+export { minDateValidator };

package/dist/validators/minLength.js

@@ -0,0 +1,6 @@
+const minLengthValidator = minLength => ({
+  error: 'MIN_LENGTH',
+  validate: value => value === undefined || value.length >= minLength
+});
+
+export { minLengthValidator };

package/dist/validators/regex.js

@@ -0,0 +1,6 @@
+const regexValidator = regexes => ({
+  error: 'REGEX',
+  validate: value => regexes.every(regex => value === undefined || value === '' || (Array.isArray(regex) ? regex.some(regexOr => regexOr.test(value)) : regex.test(value)))
+});
+
+export { regexValidator };

package/dist/validators/required.js

@@ -0,0 +1,6 @@
+const requiredValidator = required => ({
+  error: 'REQUIRED',
+  validate: value => required ? !!value : true
+});
+
+export { requiredValidator };

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@ultraviolet/form",
+  "version": "1.0.0",
+  "description": "Ultraviolet Form",
+  "homepage": "https://github.com/scaleway/ultraviolet#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scaleway/ultraviolet",
+    "directory": "packages/form"
+  },
+  "keywords": [
+    "react",
+    "reactjs",
+    "ui"
+  ],
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18.x",
+    "pnpm": ">=8.0.0"
+  },
+  "os": [
+    "darwin",
+    "linux"
+  ],
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "jsnext:main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "peerDependencies": {
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
+    "react": "18.x",
+    "react-dom": "18.x"
+  },
+  "devDependencies": {
+    "@babel/core": "7.22.5",
+    "@types/final-form-focus": "1.1.3",
+    "@types/react": "18.2.8",
+    "@types/react-dom": "18.2.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "dependencies": {
+    "@babel/runtime": "7.22.5",
+    "@emotion/babel-plugin": "11.11.0",
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
+    "final-form": "4.20.9",
+    "final-form-arrays": "3.0.2",
+    "final-form-focus": "1.1.2",
+    "react-final-form": "6.5.9",
+    "react-final-form-arrays": "3.1.4",
+    "react-select": "5.7.3",
+    "@ultraviolet/ui": "1.0.0"
+  }
+}