@ultraviolet/form 2.2.0 → 2.3.1

package/dist/components/KeyValueField/index.js

@@ -0,0 +1,83 @@
+import { Stack, Row, Button } from '@ultraviolet/ui';
+import { useFieldArray } from 'react-hook-form';
+import { TextInputField } from '../TextInputField/index.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+
+/**
+ * A React component that allows users to manage key-value pairs
+ */
+const KeyValueField = ({
+  name,
+  inputKey,
+  inputValue,
+  addButton,
+  maxSize = 100,
+  readonly = false,
+  control
+}) => {
+  const {
+    fields,
+    append,
+    remove
+  } = useFieldArray({
+    name,
+    control
+  });
+  const canAdd = fields.length !== undefined && fields.length < maxSize;
+  const maxSizeReachedTooltip = addButton.maxSizeReachedTooltip ?? `Cannot add more than ${maxSize} elements`;
+  return jsxs(Stack, {
+    gap: 3,
+    children: [fields.length ? jsx(Stack, {
+      gap: 2,
+      children: fields.map((field, index) => jsxs(Row, {
+        templateColumns: "1fr 1fr auto",
+        gap: 2,
+        children: [jsx(TextInputField, {
+          readOnly: readonly,
+          required: inputKey.required,
+          name: `${name}.${index}.key`,
+          label: inputKey.label,
+          regex: inputKey.regex
+        }), jsx(TextInputField, {
+          readOnly: readonly,
+          required: inputValue.required,
+          name: `${name}.${index}.value`,
+          label: inputValue.label,
+          placeholder: inputValue.placeholder,
+          type: inputValue.type,
+          autoComplete: "off",
+          regex: inputValue.regex
+        }), jsx(Button, {
+          disabled: readonly,
+          "data-testid": `remove-button-${index}`,
+          icon: "delete",
+          variant: "outlined",
+          sentiment: "danger",
+          size: "large",
+          onClick: () => remove(index)
+        })]
+      }, field.id))
+    }) : null, jsx(Stack, {
+      direction: "row",
+      justifyContent: "flex-start",
+      children: jsx(Button, {
+        "data-testid": "add-button",
+        icon: "plus",
+        variant: "filled",
+        sentiment: "neutral",
+        fullWidth: addButton.fullWidth,
+        disabled: !canAdd || readonly,
+        tooltip: !canAdd ? maxSizeReachedTooltip : addButton.tooltip
+        // @ts-expect-error can't infer properly
+        ,
+        onClick: () => append({
+          key: '',
+          value: ''
+        }),
+        children: addButton.name
+      })
+    })]
+  });
+};
+
+export { KeyValueField };

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { Checkbox, CheckboxGroup, DateInput, Radio, SelectInput, SelectableCard,
 import * as react from 'react';
 import { ComponentProps, ReactNode, FocusEvent, ForwardedRef, FocusEventHandler, Ref, JSX } from 'react';
 import * as react_hook_form from 'react-hook-form';
-import { FieldValues, FieldPath, Validate, PathValue, Path, UseControllerProps, FieldError, UseFormReturn, DefaultValues, FieldErrors, FieldPathValue, DeepPartial, ArrayPath, FieldArray } from 'react-hook-form';
+import { FieldValues, FieldPath, Validate, PathValue, Path, UseControllerProps, FieldError, UseFormReturn, DefaultValues, FieldErrors, FieldArrayPath, Control, FieldPathValue, DeepPartial, ArrayPath, FieldArray } from 'react-hook-form';
 export { ArrayPath, Control, ControllerRenderProps, DeepPartial, FieldArray, FieldArrayPath, FieldArrayPathValue, FieldErrors, FieldPath, FieldPathByValue, FieldPathValue, FieldPathValues, FieldValues, Path, PathValue, UseFieldArrayMove, UseFieldArrayRemove, UseFormReturn, UseFormSetValue, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
 import { CSSObject, Theme, css } from '@emotion/react';
 import Select, { OptionProps, GroupBase, Props, CommonProps } from 'react-select';
@@ -323,6 +323,35 @@ declare const RadioGroupField: {
     }) => _emotion_react_jsx_runtime.JSX.Element;
 };
 
+type InputKeyProps = {
+    label: ComponentProps<typeof TextInputField>['label'];
+    required?: ComponentProps<typeof TextInputField>['required'];
+    regex?: ComponentProps<typeof TextInputField>['regex'];
+};
+type InputValueProps = {
+    type?: ComponentProps<typeof TextInputField>['type'];
+    placeholder?: ComponentProps<typeof TextInputField>['placeholder'];
+} & InputKeyProps;
+type AddButtonProps = {
+    name: ComponentProps<typeof Button>['children'];
+    fullWidth?: ComponentProps<typeof Button>['fullWidth'];
+    tooltip?: string;
+    maxSizeReachedTooltip?: string;
+};
+type KeyValueFieldProps<TFieldValues extends FieldValues, TFieldArrayName extends FieldArrayPath<TFieldValues>> = {
+    name: TFieldArrayName;
+    inputKey: InputKeyProps;
+    inputValue: InputValueProps;
+    addButton: AddButtonProps;
+    maxSize?: number;
+    readonly?: boolean;
+    control?: Control<TFieldValues>;
+};
+/**
+ * A React component that allows users to manage key-value pairs
+ */
+declare const KeyValueField: <TFieldValues extends FieldValues = FieldValues, TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>>({ name, inputKey, inputValue, addButton, maxSize, readonly, control, }: KeyValueFieldProps<TFieldValues, TFieldArrayName>) => _emotion_react_jsx_runtime.JSX.Element;
+
 type ErrorContextValue = {
     errors: RequiredErrors;
     getError: (meta: MetaField, error?: FieldError) => string | undefined;
@@ -449,4 +478,4 @@ declare const useFieldArrayDeprecated: <T, TFieldValues extends FieldValues = Fi
     };
 };
 
-export { type BaseFieldProps, CheckboxField, CheckboxGroupField, DateField, ErrorProvider, FORM_ERROR, Form, type FormErrors, type FormProps, NumberInputField, RadioField, RadioGroupField, SelectInputField, SelectableCardField, Submit, SubmitErrorAlert, TagInputField, TextInputField, TimeField, ToggleField, useErrors, useFieldArrayDeprecated, useFieldDeprecated, useFormDeprecated, useFormStateDeprecated, useOnFieldChange };
+export { type BaseFieldProps, CheckboxField, CheckboxGroupField, DateField, ErrorProvider, FORM_ERROR, Form, type FormErrors, type FormProps, KeyValueField, NumberInputField, RadioField, RadioGroupField, SelectInputField, SelectableCardField, Submit, SubmitErrorAlert, TagInputField, TextInputField, TimeField, ToggleField, useErrors, useFieldArrayDeprecated, useFieldDeprecated, useFormDeprecated, useFormStateDeprecated, useOnFieldChange };

package/dist/index.js

@@ -5,6 +5,7 @@ export { CheckboxField } from './components/CheckboxField/index.js';
 export { CheckboxGroupField } from './components/CheckboxGroupField/index.js';
 export { DateField } from './components/DateField/index.js';
 export { Form } from './components/Form/index.js';
+export { KeyValueField } from './components/KeyValueField/index.js';
 export { RadioField } from './components/RadioField/index.js';
 export { SelectableCardField } from './components/SelectableCardField/index.js';
 export { SelectInputField } from './components/SelectInputField/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -53,7 +53,7 @@
     "@emotion/styled": "11.11.0",
     "react-select": "5.8.0",
     "react-hook-form": "7.49.3",
-    "@ultraviolet/ui": "1.31.0"
+    "@ultraviolet/ui": "1.31.1"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",