@scm-manager/ui-forms 2.40.2-20230016-100333

package/build/index.mjs

@@ -0,0 +1,602 @@
+// src/Form.tsx
+import React18, { useCallback, useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { ErrorNotification, Level } from "@scm-manager/ui-components";
+
+// src/ScmFormContext.tsx
+import React, { useContext } from "react";
+var ScmFormContext = React.createContext(null);
+function ScmFormContextProvider({ children, ...props }) {
+  return /* @__PURE__ */ React.createElement(ScmFormContext.Provider, {
+    value: props
+  }, children);
+}
+function useScmFormContext() {
+  return useContext(ScmFormContext);
+}
+
+// src/Form.tsx
+import { useTranslation } from "react-i18next";
+import { Button } from "@scm-manager/ui-buttons";
+
+// src/FormRow.tsx
+import React2 from "react";
+import classNames from "classnames";
+var FormRow = React2.forwardRef(
+  ({ className, children, hidden, ...rest }, ref) => hidden ? null : /* @__PURE__ */ React2.createElement("div", {
+    ref,
+    className: classNames("columns", className),
+    ...rest
+  }, children)
+);
+var FormRow_default = FormRow;
+
+// src/input/ControlledInputField.tsx
+import React10 from "react";
+import { Controller } from "react-hook-form";
+import classNames8 from "classnames";
+
+// src/input/InputField.tsx
+import React9 from "react";
+
+// src/base/Field.tsx
+import React3 from "react";
+import classNames2 from "classnames";
+var Field = ({ className, children, ...rest }) => /* @__PURE__ */ React3.createElement("div", {
+  className: classNames2("field", className),
+  ...rest
+}, children);
+var Field_default = Field;
+
+// src/base/Control.tsx
+import React4 from "react";
+import classNames3 from "classnames";
+var Control = ({ className, children, ...rest }) => /* @__PURE__ */ React4.createElement("div", {
+  className: classNames3("control", className),
+  ...rest
+}, children);
+var Control_default = Control;
+
+// src/base/label/Label.tsx
+import React5 from "react";
+import classNames4 from "classnames";
+var Label = ({ className, children, ...rest }) => /* @__PURE__ */ React5.createElement("label", {
+  className: classNames4("label", className),
+  ...rest
+}, children);
+var Label_default = Label;
+
+// src/base/field-message/FieldMessage.tsx
+import React6 from "react";
+import classNames5 from "classnames";
+
+// src/variants.ts
+var createVariantClass = (variant) => variant ? `is-${variant}` : void 0;
+
+// src/base/field-message/FieldMessage.tsx
+var FieldMessage = ({ variant, className, children }) => /* @__PURE__ */ React6.createElement("p", {
+  className: classNames5("help", createVariantClass(variant), className)
+}, children);
+var FieldMessage_default = FieldMessage;
+
+// src/input/Input.tsx
+import React7 from "react";
+import classNames6 from "classnames";
+import { createAttributesForTesting } from "@scm-manager/ui-components";
+var Input = React7.forwardRef(({ variant, className, testId, ...props }, ref) => {
+  return /* @__PURE__ */ React7.createElement("input", {
+    ref,
+    className: classNames6("input", createVariantClass(variant), className),
+    ...props,
+    ...createAttributesForTesting(testId)
+  });
+});
+var Input_default = Input;
+
+// src/base/help/Help.tsx
+import React8 from "react";
+import classNames7 from "classnames";
+var Help = ({ text, className }) => /* @__PURE__ */ React8.createElement("span", {
+  className: classNames7("fas fa-fw fa-question-circle has-text-blue-light", className),
+  title: text
+});
+var Help_default = Help;
+
+// src/input/InputField.tsx
+var InputField = React9.forwardRef(
+  ({ label, helpText, error, className, ...props }, ref) => {
+    const variant = error ? "danger" : void 0;
+    return /* @__PURE__ */ React9.createElement(Field_default, {
+      className
+    }, /* @__PURE__ */ React9.createElement(Label_default, null, label, helpText ? /* @__PURE__ */ React9.createElement(Help_default, {
+      className: "ml-1",
+      text: helpText
+    }) : null), /* @__PURE__ */ React9.createElement(Control_default, null, /* @__PURE__ */ React9.createElement(Input_default, {
+      variant,
+      ref,
+      ...props
+    })), error ? /* @__PURE__ */ React9.createElement(FieldMessage_default, {
+      variant
+    }, error) : null);
+  }
+);
+var InputField_default = InputField;
+
+// src/input/ControlledInputField.tsx
+function ControlledInputField({
+  name,
+  label,
+  helpText,
+  rules,
+  className,
+  testId,
+  defaultValue,
+  readOnly,
+  ...props
+}) {
+  const { control, t, readOnly: formReadonly } = useScmFormContext();
+  const labelTranslation = label || t(`${name}.label`) || "";
+  const helpTextTranslation = helpText || t(`${name}.helpText`);
+  return /* @__PURE__ */ React10.createElement(Controller, {
+    control,
+    name,
+    rules,
+    defaultValue,
+    render: ({ field, fieldState }) => /* @__PURE__ */ React10.createElement(InputField_default, {
+      className: classNames8("column", className),
+      readOnly: readOnly ?? formReadonly,
+      required: rules == null ? void 0 : rules.required,
+      ...props,
+      ...field,
+      label: labelTranslation,
+      helpText: helpTextTranslation,
+      error: fieldState.error ? fieldState.error.message || t(`${name}.error.${fieldState.error.type}`) : void 0,
+      testId: testId ?? `input-${name}`
+    })
+  });
+}
+var ControlledInputField_default = ControlledInputField;
+
+// src/checkbox/ControlledCheckboxField.tsx
+import React13 from "react";
+import { Controller as Controller2 } from "react-hook-form";
+import classNames9 from "classnames";
+
+// src/checkbox/CheckboxField.tsx
+import React12 from "react";
+
+// src/checkbox/Checkbox.tsx
+import React11 from "react";
+import { createAttributesForTesting as createAttributesForTesting2 } from "@scm-manager/ui-components";
+var Checkbox = React11.forwardRef(
+  ({ readOnly, label, value, name, checked, defaultChecked, defaultValue, testId, helpText, ...props }, ref) => /* @__PURE__ */ React11.createElement("label", {
+    className: "checkbox",
+    disabled: readOnly || props.disabled
+  }, readOnly ? /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("input", {
+    type: "hidden",
+    name,
+    value,
+    defaultValue,
+    checked,
+    defaultChecked,
+    readOnly: true
+  }), /* @__PURE__ */ React11.createElement("input", {
+    type: "checkbox",
+    className: "mr-1",
+    ref,
+    value,
+    defaultValue,
+    checked,
+    defaultChecked,
+    ...props,
+    ...createAttributesForTesting2(testId),
+    disabled: true
+  })) : /* @__PURE__ */ React11.createElement("input", {
+    type: "checkbox",
+    className: "mr-1",
+    ref,
+    name,
+    value,
+    defaultValue,
+    checked,
+    defaultChecked,
+    ...props,
+    ...createAttributesForTesting2(testId)
+  }), label, helpText ? /* @__PURE__ */ React11.createElement(Help_default, {
+    className: "ml-1",
+    text: helpText
+  }) : null)
+);
+var Checkbox_default = Checkbox;
+
+// src/checkbox/CheckboxField.tsx
+var CheckboxField = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(Field_default, {
+  className
+}, /* @__PURE__ */ React12.createElement(Control_default, null, /* @__PURE__ */ React12.createElement(Checkbox_default, {
+  ref,
+  ...props
+}))));
+var CheckboxField_default = CheckboxField;
+
+// src/checkbox/ControlledCheckboxField.tsx
+function ControlledInputField2({
+  name,
+  label,
+  helpText,
+  rules,
+  className,
+  testId,
+  defaultChecked,
+  readOnly,
+  ...props
+}) {
+  const { control, t, readOnly: formReadonly } = useScmFormContext();
+  const labelTranslation = label || t(`${name}.label`) || "";
+  const helpTextTranslation = helpText || t(`${name}.helpText`);
+  return /* @__PURE__ */ React13.createElement(Controller2, {
+    control,
+    name,
+    rules,
+    defaultValue: defaultChecked,
+    render: ({ field }) => /* @__PURE__ */ React13.createElement(CheckboxField_default, {
+      className: classNames9("column", className),
+      readOnly: readOnly ?? formReadonly,
+      defaultChecked: field.value,
+      ...props,
+      ...field,
+      label: labelTranslation,
+      helpText: helpTextTranslation,
+      testId: testId ?? `checkbox-${name}`
+    })
+  });
+}
+var ControlledCheckboxField_default = ControlledInputField2;
+
+// src/input/ControlledSecretConfirmationField.tsx
+import React14 from "react";
+import { Controller as Controller3 } from "react-hook-form";
+import classNames10 from "classnames";
+function ControlledSecretConfirmationField({
+  name,
+  label,
+  confirmationLabel,
+  helpText,
+  confirmationHelpText,
+  rules,
+  confirmationErrorMessage,
+  className,
+  testId,
+  confirmationTestId,
+  defaultValue,
+  readOnly,
+  ...props
+}) {
+  const { control, watch, t, readOnly: formReadonly } = useScmFormContext();
+  const labelTranslation = label || t(`${name}.label`) || "";
+  const helpTextTranslation = helpText || t(`${name}.helpText`);
+  const confirmationLabelTranslation = confirmationLabel || t(`${name}.confirmation.label`) || "";
+  const confirmationHelpTextTranslation = confirmationHelpText || t(`${name}.confirmation.helpText`);
+  const confirmationErrorMessageTranslation = confirmationErrorMessage || t(`${name}.confirmation.errorMessage`);
+  const secretValue = watch(name);
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(Controller3, {
+    control,
+    name,
+    defaultValue,
+    rules: {
+      ...rules,
+      deps: [`${name}Confirmation`]
+    },
+    render: ({ field, fieldState }) => /* @__PURE__ */ React14.createElement(InputField_default, {
+      className: classNames10("column", className),
+      readOnly: readOnly ?? formReadonly,
+      ...props,
+      ...field,
+      required: rules == null ? void 0 : rules.required,
+      type: "password",
+      label: labelTranslation,
+      helpText: helpTextTranslation,
+      error: fieldState.error ? fieldState.error.message || t(`${name}.error.${fieldState.error.type}`) : void 0,
+      testId: testId ?? `input-${name}`
+    })
+  }), /* @__PURE__ */ React14.createElement(Controller3, {
+    control,
+    name: `${name}Confirmation`,
+    defaultValue,
+    render: ({ field, fieldState }) => /* @__PURE__ */ React14.createElement(InputField_default, {
+      className: classNames10("column", className),
+      type: "password",
+      readOnly: readOnly ?? formReadonly,
+      disabled: props.disabled,
+      ...field,
+      label: confirmationLabelTranslation,
+      helpText: confirmationHelpTextTranslation,
+      error: fieldState.error ? fieldState.error.message || t(`${name}.confirmation.error.${fieldState.error.type}`) : void 0,
+      testId: confirmationTestId ?? `input-${name}-confirmation`
+    }),
+    rules: {
+      validate: (value) => secretValue === value || confirmationErrorMessageTranslation
+    }
+  }));
+}
+
+// src/select/ControlledSelectField.tsx
+import React17 from "react";
+import { Controller as Controller4 } from "react-hook-form";
+import classNames12 from "classnames";
+
+// src/select/SelectField.tsx
+import React16 from "react";
+
+// src/select/Select.tsx
+import React15 from "react";
+import classNames11 from "classnames";
+import { createAttributesForTesting as createAttributesForTesting3 } from "@scm-manager/ui-components";
+var Select = React15.forwardRef(({ variant, children, className, testId, ...props }, ref) => /* @__PURE__ */ React15.createElement("div", {
+  className: classNames11("select", { "is-multiple": props.multiple }, createVariantClass(variant), className)
+}, /* @__PURE__ */ React15.createElement("select", {
+  ref,
+  ...props,
+  ...createAttributesForTesting3(testId)
+}, children)));
+var Select_default = Select;
+
+// src/select/SelectField.tsx
+var SelectField = React16.forwardRef(
+  ({ label, helpText, error, className, ...props }, ref) => {
+    const variant = error ? "danger" : void 0;
+    return /* @__PURE__ */ React16.createElement(Field_default, {
+      className
+    }, /* @__PURE__ */ React16.createElement(Label_default, null, label, helpText ? /* @__PURE__ */ React16.createElement(Help_default, {
+      className: "ml-1",
+      text: helpText
+    }) : null), /* @__PURE__ */ React16.createElement(Control_default, null, /* @__PURE__ */ React16.createElement(Select_default, {
+      variant,
+      ref,
+      ...props
+    })), error ? /* @__PURE__ */ React16.createElement(FieldMessage_default, {
+      variant
+    }, error) : null);
+  }
+);
+var SelectField_default = SelectField;
+
+// src/select/ControlledSelectField.tsx
+function ControlledSelectField({
+  name,
+  label,
+  helpText,
+  rules,
+  className,
+  testId,
+  defaultValue,
+  readOnly,
+  ...props
+}) {
+  const { control, t, readOnly: formReadonly } = useScmFormContext();
+  const labelTranslation = label || t(`${name}.label`) || "";
+  const helpTextTranslation = helpText || t(`${name}.helpText`);
+  return /* @__PURE__ */ React17.createElement(Controller4, {
+    control,
+    name,
+    rules,
+    defaultValue,
+    render: ({ field, fieldState }) => /* @__PURE__ */ React17.createElement(SelectField_default, {
+      className: classNames12("column", className),
+      readOnly: readOnly ?? formReadonly,
+      required: rules == null ? void 0 : rules.required,
+      ...props,
+      ...field,
+      label: labelTranslation,
+      helpText: helpTextTranslation,
+      error: fieldState.error ? fieldState.error.message || t(`${name}.error.${fieldState.error.type}`) : void 0,
+      testId: testId ?? `select-${name}`
+    })
+  });
+}
+var ControlledSelectField_default = ControlledSelectField;
+
+// src/Form.tsx
+var SuccessNotification = ({ label, hide }) => {
+  if (!label) {
+    return null;
+  }
+  return /* @__PURE__ */ React18.createElement("div", {
+    className: "notification is-success"
+  }, /* @__PURE__ */ React18.createElement("button", {
+    className: "delete",
+    onClick: hide
+  }), label);
+};
+function Form({
+  children,
+  onSubmit,
+  defaultValues,
+  translationPath,
+  readOnly,
+  submitButtonTestId
+}) {
+  const form = useForm({
+    mode: "onChange",
+    defaultValues
+  });
+  const { formState, handleSubmit, reset } = form;
+  const [ns, prefix] = translationPath;
+  const { t } = useTranslation(ns, { keyPrefix: prefix });
+  const { isDirty, isValid, isSubmitting, isSubmitSuccessful } = formState;
+  const [error, setError] = useState();
+  const [showSuccessNotification, setShowSuccessNotification] = useState(false);
+  useEffect(() => {
+    if (isSubmitSuccessful) {
+      setShowSuccessNotification(true);
+    }
+  }, [isSubmitSuccessful]);
+  useEffect(() => reset(defaultValues), [defaultValues, reset]);
+  useEffect(() => {
+    if (isDirty) {
+      setShowSuccessNotification(false);
+    }
+  }, [isDirty]);
+  const translateWithFallback = useCallback(
+    (key, ...args) => {
+      const translation = t(key, ...args);
+      if (translation === `${prefix}.${key}`) {
+        return "";
+      }
+      return translation;
+    },
+    [prefix, t]
+  );
+  const submit = useCallback(
+    async (data) => {
+      setError(null);
+      try {
+        return await onSubmit(data);
+      } catch (e) {
+        if (e instanceof Error) {
+          setError(e);
+        } else {
+          throw e;
+        }
+      }
+    },
+    [onSubmit]
+  );
+  return /* @__PURE__ */ React18.createElement(ScmFormContextProvider, {
+    ...form,
+    readOnly: isSubmitting || readOnly,
+    t: translateWithFallback
+  }, /* @__PURE__ */ React18.createElement("form", {
+    onSubmit: handleSubmit(submit)
+  }, showSuccessNotification ? /* @__PURE__ */ React18.createElement(SuccessNotification, {
+    label: translateWithFallback("submit-success-notification"),
+    hide: () => setShowSuccessNotification(false)
+  }) : null, typeof children === "function" ? children(form) : children, error ? /* @__PURE__ */ React18.createElement(ErrorNotification, {
+    error
+  }) : null, !readOnly ? /* @__PURE__ */ React18.createElement(Level, {
+    right: /* @__PURE__ */ React18.createElement(Button, {
+      type: "submit",
+      variant: "primary",
+      testId: submitButtonTestId ?? "submit-button",
+      disabled: !isDirty || !isValid,
+      isLoading: isSubmitting
+    }, t("submit"))
+  }) : null));
+}
+var Form_default = Object.assign(Form, {
+  Row: FormRow_default,
+  Input: ControlledInputField_default,
+  Checkbox: ControlledCheckboxField_default,
+  SecretConfirmation: ControlledSecretConfirmationField,
+  Select: ControlledSelectField_default
+});
+
+// src/ConfigurationForm.tsx
+import { useConfigLink } from "@scm-manager/ui-api";
+import { Loading } from "@scm-manager/ui-components";
+import React19 from "react";
+function ConfigurationForm({ link, translationPath, children }) {
+  const { initialConfiguration, isReadOnly, update, isLoading } = useConfigLink(link);
+  if (isLoading || !initialConfiguration) {
+    return /* @__PURE__ */ React19.createElement(Loading, null);
+  }
+  return /* @__PURE__ */ React19.createElement(Form_default, {
+    onSubmit: update,
+    translationPath,
+    defaultValues: initialConfiguration,
+    readOnly: isReadOnly
+  }, children);
+}
+var ConfigurationForm_default = ConfigurationForm;
+
+// src/resourceHooks.ts
+import { apiClient, requiredLink } from "@scm-manager/ui-api";
+import { useMutation, useQueryClient } from "react-query";
+var unwrapLink = (input, linkName) => {
+  if (Array.isArray(input)) {
+    return requiredLink(input[0], input[1]);
+  } else if (typeof input === "string") {
+    return input;
+  } else {
+    return input._links[linkName].href;
+  }
+};
+var createResource = (link, contentType) => {
+  return (payload) => {
+    return apiClient.post(link, payload, contentType).then((response) => {
+      const location = response.headers.get("Location");
+      if (!location) {
+        throw new Error("Server does not return required Location header");
+      }
+      return apiClient.get(location);
+    }).then((response) => response.json());
+  };
+};
+var useCreateResource = (link, [entityKey, collectionName], idFactory, { contentType = "application/json" } = {}) => {
+  const queryClient = useQueryClient();
+  const { mutateAsync, data, isLoading, error } = useMutation(createResource(link, contentType), {
+    onSuccess: (result) => {
+      queryClient.setQueryData([entityKey, idFactory(result)], result);
+      return queryClient.invalidateQueries(collectionName);
+    }
+  });
+  return {
+    submit: (payload) => mutateAsync(payload),
+    isLoading,
+    error,
+    submissionResult: data
+  };
+};
+var useUpdateResource = (link, idFactory, {
+  contentType = "application/json",
+  collectionName: [entityQueryKey, collectionName] = ["", ""]
+} = {}) => {
+  const queryClient = useQueryClient();
+  const { mutateAsync, isLoading, error, data } = useMutation(
+    (resource) => apiClient.put(unwrapLink(link, "update"), resource, contentType),
+    {
+      onSuccess: async (_, payload) => {
+        await queryClient.invalidateQueries(entityQueryKey ? [entityQueryKey, idFactory(payload)] : idFactory(payload));
+        if (collectionName) {
+          await queryClient.invalidateQueries(collectionName);
+        }
+      }
+    }
+  );
+  return {
+    submit: (resource) => mutateAsync(resource),
+    isLoading,
+    error,
+    submissionResult: data
+  };
+};
+var useDeleteResource = (idFactory, { collectionName: [entityQueryKey, collectionName] = ["", ""] } = {}) => {
+  const queryClient = useQueryClient();
+  const { mutateAsync, isLoading, error, data } = useMutation(
+    (resource) => {
+      const deleteUrl = resource._links.delete.href;
+      return apiClient.delete(deleteUrl);
+    },
+    {
+      onSuccess: async (_, resource) => {
+        const id = idFactory(resource);
+        await queryClient.removeQueries(entityQueryKey ? [entityQueryKey, id] : id);
+        if (collectionName) {
+          await queryClient.invalidateQueries(collectionName);
+        }
+      }
+    }
+  );
+  return {
+    submit: (resource) => mutateAsync(resource),
+    isLoading,
+    error,
+    submissionResult: data
+  };
+};
+export {
+  ConfigurationForm_default as ConfigurationForm,
+  Form_default as Form,
+  useCreateResource,
+  useDeleteResource,
+  useUpdateResource
+};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@scm-manager/ui-forms",
+  "private": false,
+  "version": "2.40.2-20230016-100333",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "module": "build/index.mjs",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup ./src/index.ts -d build --format esm,cjs --dts",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.19.0",
+    "@scm-manager/eslint-config": "^2.16.0",
+    "@scm-manager/prettier-config": "^2.10.1",
+    "@scm-manager/tsconfig": "^2.13.0",
+    "@scm-manager/ui-styles": "2.40.2-20230016-100333",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-interactions": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/builder-webpack5": "^6.5.10",
+    "@storybook/manager-webpack5": "^6.5.10",
+    "@storybook/react": "^6.5.10",
+    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-docs": "^6.5.14",
+    "babel-loader": "^8.2.5",
+    "storybook-addon-mock": "^3.2.0",
+    "storybook-addon-themes": "^6.1.0",
+    "tsup": "^6.2.3"
+  },
+  "peerDependencies": {
+    "@scm-manager/ui-components": "2.40.2-20230016-100333",
+    "classnames": "^2.3.1",
+    "react": "17",
+    "react-hook-form": "7",
+    "react-i18next": "11",
+    "react-query": "3"
+  },
+  "dependencies": {
+    "@scm-manager/ui-buttons": "2.40.2-20230016-100333",
+    "@scm-manager/ui-api": "2.40.2-20230016-100333"
+  },
+  "prettier": "@scm-manager/prettier-config",
+  "eslintConfig": {
+    "extends": "@scm-manager/eslint-config"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}