@fuf-stack/uniform 0.3.2 → 0.5.0

package/dist/chunk-I22ICCUC.cjs

@@ -0,0 +1,205 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkHT3LKDHXcjs = require('./chunk-HT3LKDHX.cjs');
+
+
+var _chunkQTL5FREEcjs = require('./chunk-QTL5FREE.cjs');
+
+
+var _chunkWQRM7G4Ccjs = require('./chunk-WQRM7G4C.cjs');
+
+
+var _chunkBBB4FEY6cjs = require('./chunk-BBB4FEY6.cjs');
+
+// src/RadioGroup/RadioGroup.tsx
+var _reacthookform = require('react-hook-form');
+var _button = require('@nextui-org/button');
+var _radio = require('@nextui-org/radio');
+var _pixelutils = require('@fuf-stack/pixel-utils');
+
+// src/RadioGroup/Variants/RadioBox.tsx
+
+var _visuallyhidden = require('@react-aria/visually-hidden');
+
+var _jsxruntime = require('react/jsx-runtime');
+var RadioBox = ({ icon = void 0, ...props }) => {
+  const {
+    children,
+    Component,
+    description,
+    getBaseProps,
+    getControlProps,
+    getInputProps,
+    getLabelProps,
+    getLabelWrapperProps,
+    getWrapperProps,
+    isDisabled
+  } = _radio.useRadio.call(void 0, props);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    Component,
+    {
+      ...getBaseProps(),
+      className: _pixelutils.cn.call(void 0, 
+        "group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-primary",
+        {
+          // disabled styles
+          "pointer-events-none opacity-disabled": isDisabled
+        }
+      ),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _visuallyhidden.VisuallyHidden, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { ...getInputProps() }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { ...getWrapperProps(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { ...getControlProps() }) }),
+        icon,
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "div",
+          {
+            ...getLabelWrapperProps(),
+            className: _pixelutils.cn.call(void 0, getLabelWrapperProps().className, "grow"),
+            children: [
+              children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { ...getLabelProps(), children }),
+              description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-small text-foreground opacity-70", children: description })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/RadioGroup/Variants/RadioButton.tsx
+
+var _pixels = require('@fuf-stack/pixels');
+
+var RadioButton = ({
+  className = void 0,
+  value,
+  isDisabled = false,
+  onChange,
+  children
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _pixels.Button,
+    {
+      className: _pixelutils.cn.call(void 0, className),
+      disabled: isDisabled,
+      onClick: () => {
+        return onChange(value);
+      },
+      children
+    },
+    `index_${value}`
+  );
+};
+
+// src/RadioGroup/RadioGroup.tsx
+
+var RadioGroup = ({
+  className = void 0,
+  disabled = false,
+  inline = false,
+  label = void 0,
+  name,
+  options,
+  testId: _testId = void 0,
+  variant = "default"
+}) => {
+  const { control, getFieldState, getValues } = _chunkWQRM7G4Ccjs.useFormContext.call(void 0, );
+  const { error, invalid, required, testId } = getFieldState(name, _testId);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reacthookform.Controller,
+    {
+      control,
+      disabled,
+      name,
+      render: ({ field: { onChange, disabled: isDisabled, onBlur, ref } }) => {
+        let RadioComponents;
+        switch (variant) {
+          case "radioBox":
+            RadioComponents = options.map((option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              RadioBox,
+              {
+                "data-testid": _chunkBBB4FEY6cjs.slugify.call(void 0, 
+                  `${testId}_option_${option.testId || option.value}`
+                ),
+                isDisabled: isDisabled || option.disabled,
+                value: option.value,
+                onChange,
+                description: option.description,
+                icon: option.icon,
+                children: option.label ? option.label : option.value
+              },
+              option.value
+            ));
+            break;
+          case "radioButton":
+            RadioComponents = options.map((option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              RadioButton,
+              {
+                "data-testid": _chunkBBB4FEY6cjs.slugify.call(void 0, 
+                  `${testId}_option_${option.testId || option.value}`
+                ),
+                isDisabled: isDisabled || option.disabled,
+                value: option.value,
+                onChange,
+                className: _pixelutils.cn.call(void 0, 
+                  `${getValues()[name] !== option.value ? "bg-opacity-50" : ""}`
+                ),
+                children: option.label ? option.label : option.value
+              },
+              option.value
+            ));
+            break;
+          default:
+            RadioComponents = options.map((option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _radio.Radio,
+              {
+                "data-testid": _chunkBBB4FEY6cjs.slugify.call(void 0, 
+                  `${testId}_option_${option.testId || option.value}`
+                ),
+                isDisabled: isDisabled || option.disabled,
+                value: option.value,
+                onChange,
+                children: option.label ? option.label : option.value
+              },
+              option.value
+            ));
+        }
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _radio.RadioGroup,
+          {
+            className,
+            "data-testid": testId,
+            errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQTL5FREEcjs.FieldValidationError_default, { error }),
+            isDisabled,
+            isInvalid: invalid,
+            isRequired: required,
+            label: label && // eslint-disable-next-line jsx-a11y/label-has-associated-control
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: `${invalid ? "text-danger" : ""}`, children: [
+              label,
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHT3LKDHXcjs.FieldCopyTestIdButton_default, { testId })
+            ] }),
+            orientation: inline ? "horizontal" : "vertical",
+            onBlur,
+            onChange,
+            name,
+            ref,
+            children: variant === "radioButton" ? (
+              // TODO: NextButtonGroup uses ref to modify Button style, but we wrap it, so it does not work at the moment.
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _button.ButtonGroup, { children: RadioComponents })
+            ) : RadioComponents
+          }
+        );
+      }
+    }
+  );
+};
+var RadioGroup_default = RadioGroup;
+
+// src/RadioGroup/index.ts
+var RadioGroup_default2 = RadioGroup_default;
+
+
+
+
+exports.RadioGroup_default = RadioGroup_default; exports.RadioGroup_default2 = RadioGroup_default2;
+//# sourceMappingURL=chunk-I22ICCUC.cjs.map

package/dist/chunk-I22ICCUC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/RadioGroup/RadioGroup.tsx","../src/RadioGroup/Variants/RadioBox.tsx","../src/RadioGroup/Variants/RadioButton.tsx","../src/RadioGroup/index.ts"],"names":["cn","jsx","jsxs","RadioGroup_default"],"mappings":"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","sourcesContent":["import type { ReactElement, ReactNode } from 'react';\n\nimport { Controller } from 'react-hook-form';\n\nimport { ButtonGroup as NextButtonGroup } from '@nextui-org/button';\nimport { RadioGroup as NextRadioGroup, Radio } from '@nextui-org/radio';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport { RadioBox } from './Variants/RadioBox';\nimport { RadioButton } from './Variants/RadioButton';\n\nexport interface RadioGroupOption {\n  /** Description of the value. Works with variant radioBox. */\n  description?: React.ReactNode;\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: React.ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string;\n}\n\nexport interface RadioGroupProps {\n  /** CSS class name */\n  className?: string;\n  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** determines orientation of the Buttons. */\n  inline?: boolean;\n  /** Label displayed next to the RadioButton. */\n  label?: ReactNode;\n  /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** Radio button configuration. */\n  options: RadioGroupOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n  /** How the RadioGroup should look like. */\n  variant?: 'default' | 'radioBox' | 'radioButton';\n}\n\n/**\n * RadioGroup component based on [NextUI RadioGroup](https://nextui.org/docs/components/radio-group)\n */\nconst RadioGroup = ({\n  className = undefined,\n  disabled = false,\n  inline = false,\n  label = undefined,\n  name,\n  options,\n  testId: _testId = undefined,\n  variant = 'default',\n}: RadioGroupProps): ReactElement => {\n  const { control, getFieldState, getValues } = useFormContext();\n\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  return (\n    <Controller\n      control={control}\n      disabled={disabled}\n      name={name}\n      render={({ field: { onChange, disabled: isDisabled, onBlur, ref } }) => {\n        let RadioComponents: ReactNode;\n        switch (variant) {\n          case 'radioBox':\n            RadioComponents = options.map((option) => (\n              <RadioBox\n                key={option.value}\n                data-testid={slugify(\n                  `${testId}_option_${option.testId || option.value}`,\n                )}\n                isDisabled={isDisabled || option.disabled}\n                value={option.value}\n                onChange={onChange}\n                description={option.description}\n                icon={option.icon}\n              >\n                {option.label ? option.label : option.value}\n              </RadioBox>\n            ));\n            break;\n          case 'radioButton':\n            RadioComponents = options.map((option) => (\n              <RadioButton\n                key={option.value}\n                data-testid={slugify(\n                  `${testId}_option_${option.testId || option.value}`,\n                )}\n                isDisabled={isDisabled || option.disabled}\n                value={option.value}\n                onChange={onChange}\n                // TODO: how to do the classNames properly (make selected option darker with same color)\n                className={cn(\n                  `${getValues()[name] !== option.value ? 'bg-opacity-50' : ''}`,\n                )}\n              >\n                {option.label ? option.label : option.value}\n              </RadioButton>\n            ));\n            break;\n          default:\n            RadioComponents = options.map((option) => (\n              <Radio\n                key={option.value}\n                data-testid={slugify(\n                  `${testId}_option_${option.testId || option.value}`,\n                )}\n                isDisabled={isDisabled || option.disabled}\n                value={option.value}\n                onChange={onChange}\n              >\n                {option.label ? option.label : option.value}\n              </Radio>\n            ));\n        }\n\n        return (\n          <NextRadioGroup\n            className={className}\n            data-testid={testId}\n            errorMessage={error && <FieldValidationError error={error} />}\n            isDisabled={isDisabled}\n            isInvalid={invalid}\n            isRequired={required}\n            label={\n              label && (\n                // eslint-disable-next-line jsx-a11y/label-has-associated-control\n                <label className={`${invalid ? 'text-danger' : ''}`}>\n                  {label}\n                  <FieldCopyTestIdButton testId={testId} />\n                </label>\n              )\n            }\n            orientation={inline ? 'horizontal' : 'vertical'}\n            onBlur={onBlur}\n            onChange={onChange}\n            name={name}\n            ref={ref}\n          >\n            {variant === 'radioButton' ? (\n              // TODO: NextButtonGroup uses ref to modify Button style, but we wrap it, so it does not work at the moment.\n              <NextButtonGroup>{RadioComponents}</NextButtonGroup>\n            ) : (\n              RadioComponents\n            )}\n          </NextRadioGroup>\n        );\n      }}\n    />\n  );\n};\n\nexport default RadioGroup;\n","import type { RadioProps as NextRadioProps } from '@nextui-org/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@nextui-org/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface RadioProps extends NextRadioProps {\n  /** icon for the option */\n  icon?: ReactNode;\n}\n\nexport const RadioBox = ({ icon = undefined, ...props }: RadioProps) => {\n  const {\n    children,\n    Component,\n    description,\n    getBaseProps,\n    getControlProps,\n    getInputProps,\n    getLabelProps,\n    getLabelWrapperProps,\n    getWrapperProps,\n    isDisabled,\n  } = useRadio(props);\n\n  return (\n    <Component\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...getBaseProps()}\n      className={cn(\n        'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-primary',\n        {\n          // disabled styles\n          'pointer-events-none opacity-disabled': isDisabled,\n        },\n      )}\n    >\n      <VisuallyHidden>\n        {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n        <input {...getInputProps()} />\n      </VisuallyHidden>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n      <span {...getWrapperProps()}>\n        {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n        <span {...getControlProps()} />\n      </span>\n      {icon}\n      <div\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...getLabelWrapperProps()}\n        className={cn(getLabelWrapperProps().className, 'grow')}\n      >\n        {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n        {children && <span {...getLabelProps()}>{children}</span>}\n        {description && (\n          <span className=\"text-small text-foreground opacity-70\">\n            {description}\n          </span>\n        )}\n      </div>\n    </Component>\n  );\n};\n\nexport default RadioBox;\n","import { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface RadioButtonProps {\n  /** label of the value. */\n  children: React.ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** disables the option */\n  isDisabled?: boolean;\n  /** Callback function. Executed if the option is clicked. */\n  onChange: (...event: unknown[]) => void;\n  /** value of the option. */\n  value: string;\n}\n\nexport const RadioButton = ({\n  className = undefined,\n  value,\n  isDisabled = false,\n  onChange,\n  children,\n}: RadioButtonProps) => {\n  return (\n    <Button\n      key={`index_${value}`}\n      className={cn(className)}\n      disabled={isDisabled}\n      onClick={() => {\n        return onChange(value);\n      }}\n    >\n      {children}\n    </Button>\n  );\n};\n\nexport default RadioButton;\n","import RadioGroup from './RadioGroup';\n\nexport type { RadioGroupProps } from './RadioGroup';\n\nexport { RadioGroup };\n\nexport default RadioGroup;\n"]}

package/dist/chunk-I26DVRVR.js

@@ -0,0 +1,287 @@
+import {
+  FieldCopyTestIdButton_default
+} from "./chunk-OV5RMSYD.js";
+import {
+  FieldValidationError_default
+} from "./chunk-DBLODROX.js";
+import {
+  useFormContext
+} from "./chunk-BCMPSLSG.js";
+import {
+  slugify
+} from "./chunk-V46BHM2U.js";
+
+// src/FieldArray/FieldArray.tsx
+import { useEffect as useEffect2 } from "react";
+import { useFieldArray } from "react-hook-form";
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  restrictToVerticalAxis,
+  restrictToWindowEdges
+} from "@dnd-kit/modifiers";
+import {
+  SortableContext,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { useInput as useInput2 } from "@nextui-org/input";
+import { Button as Button2 } from "@fuf-stack/pixels";
+
+// src/FieldArray/FieldArrayField.tsx
+import { useEffect } from "react";
+import { FaAngleDown, FaAngleUp, FaGripLines } from "react-icons/fa";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { useInput } from "@nextui-org/input";
+import { Button } from "@fuf-stack/pixels";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var FieldArrayField = ({
+  children,
+  className = void 0,
+  field,
+  fields,
+  hideButtons = [],
+  id,
+  index,
+  insert,
+  lastNotDeletable = true,
+  move,
+  moveField,
+  name,
+  remove,
+  testId = void 0
+}) => {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition
+  };
+  const { getFieldState, register, watch, trigger } = useFormContext();
+  const { error, invalid } = getFieldState(`${name}`, void 0);
+  const { getHelperWrapperProps, getErrorMessageProps } = useInput({
+    isInvalid: invalid,
+    errorMessage: JSON.stringify(error),
+    labelPlacement: "inside",
+    placeholder: " ",
+    classNames: { helperWrapper: "block" }
+  });
+  register(`${name}.${index}._errors`);
+  const formValues = watch();
+  useEffect(() => {
+    trigger(`${name}.${index}._errors`);
+  }, [JSON.stringify(formValues)]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("li", { ref: setNodeRef, style, className, children: [
+      !hideButtons.includes("move") && !hideButtons.includes("all") && /* @__PURE__ */ jsxs("div", { className: "mr-6 flex flex-row items-center", children: [
+        moveField.includes("drag-drop") && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "mr-2 text-base text-xl",
+            "data-testid": slugify(`${name}_${index}_movebutton`),
+            ...attributes,
+            ...listeners,
+            children: /* @__PURE__ */ jsx(FaGripLines, {})
+          }
+        ),
+        moveField.includes("button") && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              testId: `${name}.${index}.up`,
+              disabled: index === 0,
+              onClick: () => move(index, index - 1),
+              className: "flex rounded-b-none rounded-t-md border border-gray-300 px-2 py-2 shadow-sm",
+              children: /* @__PURE__ */ jsx(FaAngleUp, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              testId: `${name}.${index}.down`,
+              disabled: index === fields.length - 1,
+              onClick: () => move(index, index + 1),
+              className: "flex rounded-b-md rounded-t-none border border-gray-300 px-2 py-2 shadow-sm",
+              children: /* @__PURE__ */ jsx(FaAngleDown, {})
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-grow", "data-testid": testId, children }),
+          !hideButtons.includes("remove") && !hideButtons.includes("all") && (lastNotDeletable && fields.length === 1 ? null : /* @__PURE__ */ jsx(Button, { onClick: () => remove(index), className: "ml-1", children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "h-4 w-4",
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 20 20",
+              fill: "currentColor",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          ) }))
+        ] }),
+        !hideButtons.includes("insert") && !hideButtons.includes("all") && index !== fields.length - 1 ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "text-xs font-medium",
+            testId: `add-harbor-button-${index}`,
+            onClick: () => {
+              insert(index + 1, {});
+            },
+            children: "insert"
+          }
+        ) : null
+      ] }, `rest-${field.id}`)
+    ] }),
+    error && typeof error[index] !== "undefined" && // @ts-expect-error rhf incompatibility
+    error[Number(index)]?._errors && // TODO: was String(). Check if Number is correct. (same below in FieldValidationError)
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    /* @__PURE__ */ jsx("div", { ...getHelperWrapperProps(), children: /* @__PURE__ */ jsx("div", { ...getErrorMessageProps(), children: /* @__PURE__ */ jsx(FieldValidationError_default, { error: error[Number(index)]?._errors }) }) })
+  ] });
+};
+var FieldArrayField_default = FieldArrayField;
+
+// src/FieldArray/FieldArray.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var FieldArray = ({
+  children,
+  hideButtons = [],
+  label: _label = void 0,
+  lastNotDeletable = true,
+  name,
+  testId: _testId = void 0,
+  moveField = ["button"]
+}) => {
+  const { control, getValues, getFieldState, register, trigger, watch } = useFormContext();
+  const { fields, append, remove, insert, move } = useFieldArray({
+    control,
+    name
+  });
+  const { error, testId, invalid, required } = getFieldState(name, _testId);
+  register(`${name}._errors`);
+  const formValues = watch();
+  useEffect2(() => {
+    trigger(`${name}._errors`);
+  }, [JSON.stringify(formValues)]);
+  const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } = useInput2({
+    isInvalid: invalid,
+    isRequired: required,
+    errorMessage: JSON.stringify(error),
+    label: _label,
+    labelPlacement: "inside",
+    placeholder: " ",
+    classNames: { helperWrapper: "block" }
+  });
+  if (lastNotDeletable && fields.length === 0) {
+    append({});
+  }
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor)
+  );
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (active.id !== over?.id) {
+      const oldIndex = fields.findIndex((field) => field.id === active.id);
+      const newIndex = fields.findIndex((field) => field.id === over?.id);
+      move(oldIndex, newIndex);
+    }
+  };
+  return /* @__PURE__ */ jsx2(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCenter,
+      onDragEnd: handleDragEnd,
+      modifiers: [restrictToVerticalAxis, restrictToWindowEdges],
+      children: /* @__PURE__ */ jsx2(
+        SortableContext,
+        {
+          items: fields.map((field) => field.id),
+          strategy: verticalListSortingStrategy,
+          children: /* @__PURE__ */ jsxs2("ul", { "data-testid": testId, children: [
+            label && // eslint-disable-next-line jsx-a11y/label-has-associated-control
+            /* @__PURE__ */ jsx2(
+              "label",
+              {
+                ...getLabelProps(),
+                className: `${getLabelProps().className} !pointer-events-auto !static !z-0 -mb-1 ml-1 !inline-block`,
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsx2(FieldCopyTestIdButton_default, { testId }),
+            fields.map((field, index) => {
+              const duplicate = (i) => {
+                const values = getValues(name);
+                insert(i + 1, { ...values[i], id: null });
+              };
+              return /* @__PURE__ */ jsx2(
+                FieldArrayField_default,
+                {
+                  id: field.id,
+                  testId: `${testId}_${index}`,
+                  className: "mb-3 mt-5 flex flex-row items-center",
+                  field,
+                  fields,
+                  hideButtons,
+                  index,
+                  insert,
+                  lastNotDeletable,
+                  move,
+                  moveField,
+                  name,
+                  remove,
+                  children: children(
+                    `${name}[${index}]`,
+                    index,
+                    fields.length,
+                    move,
+                    insert,
+                    remove,
+                    duplicate
+                  )
+                },
+                field.id
+              );
+            }),
+            !hideButtons.includes("add") && !hideButtons.includes("all") && /* @__PURE__ */ jsx2(
+              Button2,
+              {
+                testId: `${testId}_append`,
+                size: "sm",
+                onClick: () => append({}),
+                children: "Add"
+              }
+            ),
+            error?._errors && // eslint-disable-next-line react/jsx-props-no-spreading
+            /* @__PURE__ */ jsx2("div", { ...getHelperWrapperProps(), children: /* @__PURE__ */ jsx2("div", { ...getErrorMessageProps(), children: /* @__PURE__ */ jsx2(FieldValidationError_default, { error: error?._errors }) }) })
+          ] })
+        }
+      )
+    }
+  );
+};
+var FieldArray_default = FieldArray;
+
+// src/FieldArray/index.ts
+var FieldArray_default2 = FieldArray_default;
+
+export {
+  FieldArray_default,
+  FieldArray_default2
+};
+//# sourceMappingURL=chunk-I26DVRVR.js.map

package/dist/chunk-I26DVRVR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FieldArray/FieldArray.tsx","../src/FieldArray/FieldArrayField.tsx","../src/FieldArray/index.ts"],"sourcesContent":["import type { DragEndEvent } from '@dnd-kit/core';\nimport type {\n  FieldValues,\n  UseFieldArrayInsert,\n  UseFieldArrayMove,\n  UseFieldArrayRemove,\n} from 'react-hook-form';\n\nimport { useEffect } from 'react';\nimport { useFieldArray } from 'react-hook-form';\n\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport {\n  restrictToVerticalAxis,\n  restrictToWindowEdges,\n} from '@dnd-kit/modifiers';\nimport {\n  SortableContext,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { useInput } from '@nextui-org/input';\n\nimport { Button } from '@fuf-stack/pixels';\n\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport FieldArrayField from './FieldArrayField';\n\nexport type FieldArrayHideOption = 'add' | 'remove' | 'move' | 'insert' | 'all';\nexport type FieldArrayFieldChildren = (\n  name: string,\n  index: number,\n  length: number,\n  move: UseFieldArrayMove,\n  insert: UseFieldArrayInsert<FieldValues, string>,\n  remove: UseFieldArrayRemove,\n  duplicate: (i: number) => void,\n) => JSX.Element;\n\nexport type MoveField = 'drag-drop' | 'button';\n\nexport interface FieldArrayProps {\n  /** function that renders the children with provided Properties. */\n  children: FieldArrayFieldChildren;\n  /** Hide a set of buttons. */\n  hideButtons?: FieldArrayHideOption[];\n  /** label of the FieldArray. */\n  label?: React.ReactNode;\n  /** stops user from deleting all items. */\n  lastNotDeletable?: boolean;\n  /** name the FieldArray is registered in RHF */\n  name: string;\n  /** ID for test purposes. */\n  testId?: string;\n  /* how the fields can be moved */\n  moveField: MoveField[];\n}\n\n/**\n * FieldArray component using react-hook-form\n */\nconst FieldArray = ({\n  children,\n  hideButtons = [],\n  label: _label = undefined,\n  lastNotDeletable = true,\n  name,\n  testId: _testId = undefined,\n  moveField = ['button'],\n}: FieldArrayProps) => {\n  const { control, getValues, getFieldState, register, trigger, watch } =\n    useFormContext();\n\n  const { fields, append, remove, insert, move } = useFieldArray({\n    control,\n    name,\n  });\n\n  const { error, testId, invalid, required } = getFieldState(name, _testId);\n\n  register(`${name}._errors`);\n\n  const formValues = watch();\n\n  useEffect(() => {\n    trigger(`${name}._errors`);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [JSON.stringify(formValues)]);\n\n  // TODO: what about input props?\n  const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } =\n    useInput({\n      isInvalid: invalid,\n      isRequired: required,\n      errorMessage: JSON.stringify(error),\n      label: _label,\n      labelPlacement: 'inside',\n      placeholder: ' ',\n      classNames: { helperWrapper: 'block' },\n    });\n\n  if (lastNotDeletable && fields.length === 0) {\n    append({});\n  }\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor),\n  );\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n\n    if (active.id !== over?.id) {\n      const oldIndex = fields.findIndex((field) => field.id === active.id);\n      const newIndex = fields.findIndex((field) => field.id === over?.id);\n      move(oldIndex, newIndex);\n    }\n  };\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n      modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n    >\n      <SortableContext\n        items={fields.map((field) => field.id)}\n        strategy={verticalListSortingStrategy}\n      >\n        <ul data-testid={testId}>\n          {label && (\n            // eslint-disable-next-line jsx-a11y/label-has-associated-control\n            <label\n              // eslint-disable-next-line react/jsx-props-no-spreading\n              {...getLabelProps()}\n              className={`${getLabelProps().className} !pointer-events-auto !static !z-0 -mb-1 ml-1 !inline-block`}\n            >\n              {label}\n            </label>\n          )}\n          <FieldCopyTestIdButton testId={testId} />\n\n          {fields.map((field, index) => {\n            const duplicate = (i: number) => {\n              const values = getValues(name);\n              insert(i + 1, { ...values[i], id: null });\n            };\n\n            return (\n              <FieldArrayField\n                id={field.id}\n                key={field.id}\n                testId={`${testId}_${index}`}\n                className=\"mb-3 mt-5 flex flex-row items-center\"\n                field={field}\n                fields={fields}\n                hideButtons={hideButtons}\n                index={index}\n                insert={insert}\n                lastNotDeletable={lastNotDeletable}\n                move={move}\n                moveField={moveField}\n                name={name}\n                remove={remove}\n              >\n                {children(\n                  `${name}[${index}]`,\n                  index,\n                  fields.length,\n                  move,\n                  insert,\n                  remove,\n                  duplicate,\n                )}\n              </FieldArrayField>\n            );\n          })}\n\n          {!hideButtons.includes('add') && !hideButtons.includes('all') && (\n            <Button\n              testId={`${testId}_append`}\n              size=\"sm\"\n              onClick={() => append({})}\n            >\n              Add\n            </Button>\n          )}\n          {/* @ts-expect-error rhf incompatibility */}\n          {error?._errors && (\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            <div {...getHelperWrapperProps()}>\n              {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n              <div {...getErrorMessageProps()}>\n                {/* @ts-expect-error rhf incompatibility */}\n                <FieldValidationError error={error?._errors} />\n              </div>\n            </div>\n          )}\n        </ul>\n      </SortableContext>\n    </DndContext>\n  );\n};\n\nexport default FieldArray;\n","import type {\n  FieldValues,\n  UseFieldArrayInsert,\n  UseFieldArrayMove,\n  UseFieldArrayRemove,\n} from 'react-hook-form';\nimport type { FieldArrayHideOption, MoveField } from './FieldArray';\n\nimport { useEffect } from 'react';\nimport { FaAngleDown, FaAngleUp, FaGripLines } from 'react-icons/fa';\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { useInput } from '@nextui-org/input';\n\nimport { Button } from '@fuf-stack/pixels';\n\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\ninterface FieldArrayFieldProps {\n  children: React.ReactNode;\n  className?: string;\n  field: Record<'id', string>;\n  fields: Record<'id', string>[];\n  hideButtons?: FieldArrayHideOption[];\n  id: string | number;\n  index: number;\n  insert: UseFieldArrayInsert<FieldValues, string>;\n  lastNotDeletable?: boolean;\n  move: UseFieldArrayMove;\n  moveField: MoveField[];\n  testId?: string;\n  name: string;\n  remove: UseFieldArrayRemove;\n}\n\n/**\n * FieldArrayField component using react-hook-form\n */\nconst FieldArrayField = ({\n  children,\n  className = undefined,\n  field,\n  fields,\n  hideButtons = [],\n  id,\n  index,\n  insert,\n  lastNotDeletable = true,\n  move,\n  moveField,\n  name,\n  remove,\n  testId = undefined,\n}: FieldArrayFieldProps) => {\n  const { attributes, listeners, setNodeRef, transform, transition } =\n    useSortable({ id });\n\n  const style = {\n    transform: CSS.Translate.toString(transform),\n    transition,\n  };\n\n  const { getFieldState, register, watch, trigger } = useFormContext();\n  const { error, invalid } = getFieldState(`${name}`, undefined);\n\n  // TODO: what about input props? and label props? Do we need a label?\n  const { getHelperWrapperProps, getErrorMessageProps } = useInput({\n    isInvalid: invalid,\n    errorMessage: JSON.stringify(error),\n    labelPlacement: 'inside',\n    placeholder: ' ',\n    classNames: { helperWrapper: 'block' },\n  });\n\n  // TODO: Check if this is a current issue: _error gets kicked out of the formValidation if no other errors exist. validationError exists, but the structure changes.\n  register(`${name}.${index}._errors`);\n\n  const formValues = watch();\n  useEffect(() => {\n    trigger(`${name}.${index}._errors`);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [JSON.stringify(formValues)]);\n\n  return (\n    <>\n      <li ref={setNodeRef} style={style} className={className}>\n        {/** Start Button up/down */}\n        {!hideButtons.includes('move') && !hideButtons.includes('all') && (\n          <div className=\"mr-6 flex flex-row items-center\">\n            {moveField.includes('drag-drop') && (\n              <div\n                className=\"mr-2 text-base text-xl\"\n                data-testid={slugify(`${name}_${index}_movebutton`)}\n                // eslint-disable-next-line react/jsx-props-no-spreading\n                {...attributes}\n                // eslint-disable-next-line react/jsx-props-no-spreading\n                {...listeners}\n              >\n                <FaGripLines />\n              </div>\n            )}\n            {moveField.includes('button') && (\n              <div className=\"flex flex-col\">\n                <Button\n                  testId={`${name}.${index}.up`}\n                  disabled={index === 0}\n                  onClick={() => move(index, index - 1)}\n                  className=\"flex rounded-b-none rounded-t-md border border-gray-300 px-2 py-2 shadow-sm\"\n                >\n                  <FaAngleUp />\n                </Button>\n                <Button\n                  testId={`${name}.${index}.down`}\n                  disabled={index === fields.length - 1}\n                  onClick={() => move(index, index + 1)}\n                  className=\"flex rounded-b-md rounded-t-none border border-gray-300 px-2 py-2 shadow-sm\"\n                >\n                  <FaAngleDown />\n                </Button>\n              </div>\n            )}\n          </div>\n        )}\n        {/** End Button up/down */}\n        <div key={`rest-${field.id}`} className=\"w-full\">\n          <div className=\"mb-2 flex items-center\">\n            {/** RENDER CHILDREN */}\n            <div className=\"flex-grow\" data-testid={testId}>\n              {children}\n            </div>\n            {!hideButtons.includes('remove') &&\n              !hideButtons.includes('all') &&\n              (lastNotDeletable && fields.length === 1 ? null : (\n                <Button onClick={() => remove(index)} className=\"ml-1\">\n                  <svg\n                    className=\"h-4 w-4\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                    aria-hidden=\"true\"\n                  >\n                    <path\n                      fillRule=\"evenodd\"\n                      d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                      clipRule=\"evenodd\"\n                    />\n                  </svg>\n                </Button>\n              ))}\n          </div>\n\n          {!hideButtons.includes('insert') &&\n          !hideButtons.includes('all') &&\n          index !== fields.length - 1 ? (\n            <Button\n              className=\"text-xs font-medium\"\n              testId={`add-harbor-button-${index}`}\n              onClick={() => {\n                insert(index + 1, {});\n              }}\n            >\n              insert\n            </Button>\n          ) : null}\n        </div>\n      </li>\n      {error &&\n        typeof error[index] !== 'undefined' &&\n        // @ts-expect-error rhf incompatibility\n        error[Number(index)]?._errors && ( // TODO: was String(). Check if Number is correct. (same below in FieldValidationError)\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          <div {...getHelperWrapperProps()}>\n            {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n            <div {...getErrorMessageProps()}>\n              {/* @ts-expect-error rhf incompatibility */}\n              <FieldValidationError error={error[Number(index)]?._errors} />\n            </div>\n          </div>\n        )}\n    </>\n  );\n};\nexport default FieldArrayField;\n","import FieldArray from './FieldArray';\n\nexport type {\n  FieldArrayProps,\n  FieldArrayHideOption,\n  FieldArrayFieldChildren,\n} from './FieldArray';\n\nexport { FieldArray };\n\nexport default FieldArray;\n"],"mappings":"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","names":["useEffect","useInput","Button","jsx","jsxs","useEffect","useInput","Button","FieldArray_default"]}

package/dist/{chunk-6XKDXQ4A.js → chunk-KFRKKWZT.js}

@@ -9,13 +9,13 @@ import {
 // src/Form/Form.tsx
 import { useEffect as useEffect2 } from "react";
 import { useForm } from "react-hook-form";
-import cn2 from "classnames";
+import { cn as cn2 } from "@fuf-stack/pixel-utils";
 
 // src/Form/subcomponents/FormDebugViewer.tsx
 import { useEffect, useState } from "react";
 import { FaTimes } from "react-icons/fa";
 import { FaBug } from "react-icons/fa6";
-import cn from "classnames";
+import { cn } from "@fuf-stack/pixel-utils";
 import { Button, Card, Json, useLocalStorage } from "@fuf-stack/pixels";
 import { jsx, jsxs } from "react/jsx-runtime";
 var LOCALSTORAGE_DEBUG_KEY = "uniform:form-debug-enabled";
@@ -156,4 +156,4 @@ export {
   Form_default,
   Form_default2
 };
-//# sourceMappingURL=chunk-6XKDXQ4A.js.map
+//# sourceMappingURL=chunk-KFRKKWZT.js.map

package/dist/chunk-KFRKKWZT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Form/Form.tsx","../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/index.ts"],"sourcesContent":["import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\n\nimport { useEffect } from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { slugify } from '../helpers';\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\n/**\n * recursively removes all fields that are null or undefined before\n * the form data is passed to the veto validation function\n */\nexport const removeNullishFields = (obj: Record<string, unknown>) => {\n  return JSON.parse(\n    JSON.stringify(obj, (_key, value) => {\n      return value === null ? undefined : value;\n    }),\n  );\n};\n\nexport interface FormProps {\n  /** form children */\n  children: ReactNode | ReactNode[];\n  /** CSS class name */\n  className?: string | string[];\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** name of the form */\n  name?: string;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** veto validation schema */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger?:\n    | 'onChange'\n    | 'onBlur'\n    | 'onSubmit'\n    | 'onTouched'\n    | 'all'\n    | 'all-instant';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n  children,\n  className = undefined,\n  initialValues = undefined,\n  name = undefined,\n  onSubmit,\n  testId = undefined,\n  validation = undefined,\n  validationTrigger = 'all',\n}: FormProps) => {\n  const methods = useForm(\n    validation\n      ? {\n          defaultValues: initialValues,\n          resolver: async (values) => {\n            const { data, errors, ...rest } = await validation.validateAsync(\n              removeNullishFields(values),\n            );\n            // https://github.com/react-hook-form/resolvers/blob/master/zod/src/zod.ts\n            return { values: data || {}, errors: errors || {}, ...rest };\n          },\n          // set rhf mode\n          // see: https://react-hook-form.com/docs/useform#mode\n          mode: validationTrigger === 'all-instant' ? 'all' : validationTrigger,\n        }\n      : {\n          defaultValues: initialValues,\n        },\n  );\n\n  useEffect(\n    () => {\n      if (validationTrigger === 'all-instant') {\n        methods.trigger();\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [validationTrigger],\n  );\n\n  return (\n    // eslint-disable-next-line react/jsx-props-no-spreading\n    <FormProvider {...methods} validation={validation}>\n      <div className=\"flex w-full flex-row justify-between gap-6\">\n        <form\n          className={cn('flex-grow', className)}\n          data-testid={slugify(testId || name || '')}\n          name={name}\n          onSubmit={methods.handleSubmit(onSubmit)}\n        >\n          {children}\n        </form>\n        <FormDebugViewer className=\"w-96 flex-shrink\" />\n      </div>\n    </FormProvider>\n  );\n};\n\nexport default Form;\n","import type { VetoError } from '@fuf-stack/veto';\n\nimport { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button, Card, Json, useLocalStorage } from '@fuf-stack/pixels';\n\nimport { useFormContext } from '../../hooks';\n\ninterface FormDebugViewerProps {\n  /** CSS class name */\n  className?: string;\n}\n\nconst LOCALSTORAGE_DEBUG_KEY = 'uniform:form-debug-enabled';\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n  const {\n    watch,\n    formState: { dirtyFields, isValid, isSubmitting },\n    validation,\n  } = useFormContext();\n\n  const [debug, setDebug] = useLocalStorage(LOCALSTORAGE_DEBUG_KEY, false);\n\n  const [validationErrors, setValidationErrors] = useState<\n    VetoError['errors'] | null\n  >(null);\n\n  const formValues = watch();\n\n  useEffect(\n    () => {\n      const updateValidationErrors = async () => {\n        if (validation) {\n          const validateResult = await validation?.validateAsync(formValues);\n          setValidationErrors(validateResult?.errors);\n        }\n      };\n      updateValidationErrors();\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [JSON.stringify(formValues)],\n  );\n\n  if (!debug) {\n    return (\n      <Button\n        ariaLabel=\"Enable form debug mode\"\n        onClick={() => setDebug(!debug)}\n        className=\"absolute bottom-2.5 right-2.5 w-5 text-default-400\"\n        variant=\"light\"\n        icon={<FaBug />}\n      />\n    );\n  }\n\n  return (\n    <Card\n      className={cn(className)}\n      header={\n        <div className=\"flex w-full flex-row justify-between\">\n          <span className=\"text-lg\">Debug Mode</span>\n          <Button\n            icon={<FaTimes className=\"text-danger\" />}\n            onClick={() => setDebug(false)}\n            size=\"sm\"\n            variant=\"flat\"\n          />\n        </div>\n      }\n    >\n      <Json\n        value={{\n          values: formValues,\n          errors: validationErrors,\n          dirtyFields,\n          isValid,\n          isSubmitting,\n        }}\n      />\n    </Card>\n  );\n};\nexport default FormDebugViewer;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"],"mappings":"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","names":["useEffect","cn","jsx","jsxs","useEffect","cn","Form_default"]}