@scm-manager/ui-forms 2.40.2-SNAPSHOT-1

package/src/Form.stories.mdx

@@ -0,0 +1,160 @@
+import { Meta, Story } from "@storybook/addon-docs";
+import Form from "./Form";
+import FormRow from "./FormRow";
+import ControlledInputField from "./input/ControlledInputField";
+import ControlledSecretConfirmationField from "./input/ControlledSecretConfirmationField";
+import ControlledCheckboxField from "./checkbox/ControlledCheckboxField";
+
+<Meta title="Form" />
+
+<Story name="Creation">
+  <Form
+    onSubmit={console.log}
+    translationPath={["sample", "form"]}
+    defaultValues={{
+      name: "",
+      password: "",
+      active: true,
+    }}
+  >
+    <FormRow>
+      <ControlledInputField name="name" />
+    </FormRow>
+    <FormRow>
+      <ControlledSecretConfirmationField name="password" />
+    </FormRow>
+    <FormRow>
+      <ControlledCheckboxField name="active" />
+    </FormRow>
+  </Form>
+</Story>
+
+<Story name="Editing">
+  <Form
+    onSubmit={console.log}
+    translationPath={["sample", "form"]}
+    defaultValues={{
+      name: "trillian",
+      password: "secret",
+      active: true,
+    }}
+  >
+    <FormRow>
+      <ControlledInputField name="name" />
+    </FormRow>
+    <FormRow>
+      <ControlledSecretConfirmationField name="password" />
+    </FormRow>
+    <FormRow>
+      <ControlledCheckboxField name="active" />
+    </FormRow>
+  </Form>
+</Story>
+
+<Story name="GlobalConfiguration">
+  <Form
+    onSubmit={console.log}
+    translationPath={["sample", "form"]}
+    defaultValues={{
+      url: "",
+      filter: "",
+      username: "",
+      password: "",
+      roleLevel: "",
+      updateIssues: false,
+      disableRepoConfig: false,
+    }}
+  >
+    {({ watch }) => (
+      <>
+        <FormRow>
+          <ControlledInputField name="url" label="URL" helpText="URL of Jira installation (with context path)." />
+        </FormRow>
+        <FormRow>
+          <ControlledInputField name="filter" label="Project Filter" helpText="Filters for jira project key." />
+        </FormRow>
+        <FormRow>
+          <ControlledCheckboxField
+            name="updateIssues"
+            label="Update Jira Issues"
+            helpText="Enable the automatic update function."
+          />
+        </FormRow>
+        <FormRow hide={watch("filter")}>
+          <ControlledInputField
+            name="username"
+            label="Username"
+            helpText="Jira username for connection."
+            className="is-half"
+          />
+          <ControlledInputField
+            name="password"
+            label="Password"
+            helpText="Jira password for connection."
+            type="password"
+            className="is-half"
+          />
+        </FormRow>
+        <FormRow hide={watch("filter")}>
+          <ControlledInputField
+            name="roleLevel"
+            label="Role Visibility"
+            helpText="Defines for which Project Role the comments are visible."
+          />
+        </FormRow>
+        <FormRow>
+          <ControlledCheckboxField
+            name="disableRepoConfig"
+            label="Do not allow repository configuration"
+            helpText="Do not allow repository owners to configure jira instances."
+          />
+        </FormRow>
+      </>
+    )}
+  </Form>
+</Story>
+
+<Story name="RepoConfiguration">
+  <Form
+    onSubmit={console.log}
+    translationPath={["sample", "form"]}
+    defaultValues={{
+      url: "",
+      option: "",
+      anotherOption: "",
+      disableA: false,
+      disableB: false,
+      disableC: true,
+    }}
+  >
+    <ControlledInputField name="url" />
+    <ControlledInputField name="option" />
+    <ControlledInputField name="anotherOption" />
+    <ControlledCheckboxField name="disableA" />
+    <ControlledCheckboxField name="disableB" />
+    <ControlledCheckboxField name="disableC" />
+  </Form>
+</Story>
+
+<Story name="ReadOnly">
+  <Form
+    onSubmit={console.log}
+    translationPath={["sample", "form"]}
+    defaultValues={{
+      name: "trillian",
+      password: "secret",
+      active: true,
+    }}
+    readOnly
+  >
+    <FormRow>
+      <ControlledInputField name="name" />
+    </FormRow>
+    <FormRow>
+      <ControlledSecretConfirmationField name="password" />
+    </FormRow>
+    <FormRow>
+      <ControlledCheckboxField name="active" />
+    </FormRow>
+  </Form>
+</Story>

package/src/Form.tsx

@@ -0,0 +1,164 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { FC, useCallback, useEffect, useState } from "react";
+import { DeepPartial, SubmitHandler, useForm, UseFormReturn } from "react-hook-form";
+import { ErrorNotification, Level } from "@scm-manager/ui-components";
+import { ScmFormContextProvider } from "./ScmFormContext";
+import { useTranslation } from "react-i18next";
+import { Button } from "@scm-manager/ui-buttons";
+import FormRow from "./FormRow";
+import ControlledInputField from "./input/ControlledInputField";
+import ControlledCheckboxField from "./checkbox/ControlledCheckboxField";
+import ControlledSecretConfirmationField from "./input/ControlledSecretConfirmationField";
+import { HalRepresentation } from "@scm-manager/ui-types";
+import ControlledSelectField from "./select/ControlledSelectField";
+
+type RenderProps<T extends Record<string, unknown>> = Omit<
+  UseFormReturn<T>,
+  "register" | "unregister" | "handleSubmit" | "control"
+>;
+
+const SuccessNotification: FC<{ label?: string; hide: () => void }> = ({ label, hide }) => {
+  if (!label) {
+    return null;
+  }
+
+  return (
+    <div className="notification is-success">
+      <button className="delete" onClick={hide} />
+      {label}
+    </div>
+  );
+};
+
+type Props<FormType extends Record<string, unknown>, DefaultValues extends FormType> = {
+  children: ((renderProps: RenderProps<FormType>) => React.ReactNode | React.ReactNode[]) | React.ReactNode;
+  translationPath: [namespace: string, prefix: string];
+  onSubmit: SubmitHandler<FormType>;
+  defaultValues: Omit<DefaultValues, keyof HalRepresentation>;
+  readOnly?: boolean;
+  submitButtonTestId?: string;
+};
+
+/** @Beta */
+function Form<FormType extends Record<string, unknown>, DefaultValues extends FormType>({
+  children,
+  onSubmit,
+  defaultValues,
+  translationPath,
+  readOnly,
+  submitButtonTestId,
+}: Props<FormType, DefaultValues>) {
+  const form = useForm<FormType>({
+    mode: "onChange",
+    defaultValues: defaultValues as DeepPartial<FormType>,
+  });
+  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<Error | null | undefined>();
+  const [showSuccessNotification, setShowSuccessNotification] = useState(false);
+
+  // See https://react-hook-form.com/api/useform/reset/
+  useEffect(() => {
+    if (isSubmitSuccessful) {
+      setShowSuccessNotification(true);
+    }
+  }, [isSubmitSuccessful]);
+
+  useEffect(() => reset(defaultValues as never), [defaultValues, reset]);
+
+  useEffect(() => {
+    if (isDirty) {
+      setShowSuccessNotification(false);
+    }
+  }, [isDirty]);
+
+  const translateWithFallback = useCallback<typeof t>(
+    (key, ...args) => {
+      const translation = t(key, ...(args as any));
+      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 (
+    <ScmFormContextProvider {...form} readOnly={isSubmitting || readOnly} t={translateWithFallback}>
+      <form onSubmit={handleSubmit(submit)}>
+        {showSuccessNotification ? (
+          <SuccessNotification
+            label={translateWithFallback("submit-success-notification")}
+            hide={() => setShowSuccessNotification(false)}
+          />
+        ) : null}
+        {typeof children === "function" ? children(form) : children}
+        {error ? <ErrorNotification error={error} /> : null}
+        {!readOnly ? (
+          <Level
+            right={
+              <Button
+                type="submit"
+                variant="primary"
+                testId={submitButtonTestId ?? "submit-button"}
+                disabled={!isDirty || !isValid}
+                isLoading={isSubmitting}
+              >
+                {t("submit")}
+              </Button>
+            }
+          />
+        ) : null}
+      </form>
+    </ScmFormContextProvider>
+  );
+}
+
+export default Object.assign(Form, {
+  Row: FormRow,
+  Input: ControlledInputField,
+  Checkbox: ControlledCheckboxField,
+  SecretConfirmation: ControlledSecretConfirmationField,
+  Select: ControlledSelectField,
+});

package/src/FormRow.tsx

@@ -0,0 +1,37 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { HTMLProps } from "react";
+import classNames from "classnames";
+
+const FormRow = React.forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(
+  ({ className, children, hidden, ...rest }, ref) =>
+    hidden ? null : (
+      <div ref={ref} className={classNames("columns", className)} {...rest}>
+        {children}
+      </div>
+    )
+);
+
+export default FormRow;

package/src/ScmFormContext.tsx

@@ -0,0 +1,42 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { PropsWithChildren, useContext } from "react";
+import { UseFormReturn } from "react-hook-form";
+import type { TFunction } from "i18next";
+
+type ContextType<T = any> = UseFormReturn<T> & {
+  t: TFunction;
+  readOnly?: boolean;
+};
+
+const ScmFormContext = React.createContext<ContextType>(null as unknown as ContextType);
+
+export function ScmFormContextProvider<T>({ children, ...props }: PropsWithChildren<ContextType<T>>) {
+  return <ScmFormContext.Provider value={props}>{children}</ScmFormContext.Provider>;
+}
+
+export function useScmFormContext() {
+  return useContext(ScmFormContext);
+}

package/src/base/Control.tsx

@@ -0,0 +1,34 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { FC, HTMLProps } from "react";
+import classNames from "classnames";
+
+const Control: FC<HTMLProps<HTMLDivElement>> = ({ className, children, ...rest }) => (
+  <div className={classNames("control", className)} {...rest}>
+    {children}
+  </div>
+);
+
+export default Control;

package/src/base/Field.tsx

@@ -0,0 +1,33 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { FC, HTMLProps } from "react";
+import classNames from "classnames";
+
+const Field: FC<HTMLProps<HTMLDivElement>> = ({ className, children, ...rest }) => (
+  <div className={classNames("field", className)} {...rest}>
+    {children}
+  </div>
+);
+export default Field;

package/src/base/field-message/FieldMessage.tsx

@@ -0,0 +1,34 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { ReactNode } from "react";
+import classNames from "classnames";
+import { createVariantClass, Variant } from "../../variants";
+
+type Props = { variant?: Variant; className?: string; children?: ReactNode };
+
+const FieldMessage = ({ variant, className, children }: Props) => (
+  <p className={classNames("help", createVariantClass(variant), className)}>{children}</p>
+);
+export default FieldMessage;

package/src/base/help/Help.tsx

@@ -0,0 +1,36 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from "react";
+import classNames from "classnames";
+
+type Props = { text?: string; className?: string };
+
+/**
+ * TODO: Implement tooltip
+ */
+const Help = ({ text, className }: Props) => (
+  <span className={classNames("fas fa-fw fa-question-circle has-text-blue-light", className)} title={text} />
+);
+export default Help;

package/src/base/label/Label.tsx

@@ -0,0 +1,33 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { FC, HTMLProps } from "react";
+import classNames from "classnames";
+
+const Label: FC<HTMLProps<HTMLLabelElement>> = ({ className, children, ...rest }) => (
+  <label className={classNames("label", className)} {...rest}>
+    {children}
+  </label>
+);
+export default Label;

package/src/checkbox/Checkbox.stories.mdx

@@ -0,0 +1,26 @@
+import {Meta, Story} from "@storybook/addon-docs";
+import Checkbox from "./Checkbox";
+
+<Meta
+  title="Checkbox"
+/>
+
+<Story name="Default">
+  <Checkbox name="name"/>
+</Story>
+
+<Story name="WithHardcodedText">
+  <Checkbox name="name" label="Name" helpText="A help text"/>
+</Story>
+
+<Story name="WithStyling">
+  <Checkbox name="name" className="has-background-blue-light"/>
+</Story>
+
+<Story name="WithInitialFocus">
+  <Checkbox name="name" autoFocus/>
+</Story>
+
+<Story name="Readonly">
+  <Checkbox name="name" checked readOnly/>
+</Story>