@scm-manager/ui-core 3.0.0-20240024-101702

package/src/base/forms/checkbox/ControlledCheckboxField.tsx

@@ -0,0 +1,82 @@
+/*
+ * 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, { ComponentProps } from "react";
+import { Controller, ControllerRenderProps, Path, RegisterOptions } from "react-hook-form";
+import { useScmFormContext } from "../ScmFormContext";
+import CheckboxField from "./CheckboxField";
+import { useScmFormPathContext } from "../FormPathContext";
+import { prefixWithoutIndices } from "../helpers";
+import classNames from "classnames";
+
+type Props<T extends Record<string, unknown>> = Omit<
+  ComponentProps<typeof CheckboxField>,
+  "label" | "defaultValue" | "required" | keyof ControllerRenderProps
+> & {
+  name: Path<T>;
+  label?: string;
+  rules?: Pick<RegisterOptions, "deps">;
+};
+
+function ControlledInputField<T extends Record<string, unknown>>({
+  name,
+  label,
+  helpText,
+  rules,
+  testId,
+  defaultChecked,
+  readOnly,
+  className,
+  ...props
+}: Props<T>) {
+  const { control, t, readOnly: formReadonly, formId } = useScmFormContext();
+  const formPathPrefix = useScmFormPathContext();
+  const nameWithPrefix = formPathPrefix ? `${formPathPrefix}.${name}` : name;
+  const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
+  const labelTranslation = label || t(`${prefixedNameWithoutIndices}.label`) || "";
+  const helpTextTranslation = helpText || t(`${prefixedNameWithoutIndices}.helpText`);
+  return (
+    <Controller
+      control={control}
+      name={nameWithPrefix}
+      rules={rules}
+      defaultValue={defaultChecked as never}
+      render={({ field }) => (
+        <CheckboxField
+          form={formId}
+          readOnly={readOnly ?? formReadonly}
+          checked={field.value}
+          className={classNames("column", className)}
+          {...props}
+          {...field}
+          label={labelTranslation}
+          helpText={helpTextTranslation}
+          testId={testId ?? `checkbox-${nameWithPrefix}`}
+        />
+      )}
+    />
+  );
+}
+
+export default ControlledInputField;

package/src/base/forms/chip-input/ChipInputField.stories.tsx

@@ -0,0 +1,75 @@
+/*
+ * 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 { storiesOf } from "@storybook/react";
+import React, { useRef, useState } from "react";
+import ChipInputField from "./ChipInputField";
+import Combobox from "../combobox/Combobox";
+import { Option } from "@scm-manager/ui-types";
+import ChipInput from "../headless-chip-input/ChipInput";
+
+storiesOf("Chip Input Field", module)
+  .add("Default", () => {
+    const [value, setValue] = useState<Option<string>[]>([]);
+    const ref = useRef<HTMLInputElement>(null);
+    return (
+      <>
+        <ChipInputField
+          value={value}
+          onChange={setValue}
+          label="Test Chips"
+          placeholder="Type a new chip name and press enter to add"
+          aria-label="My personal chip list"
+          ref={ref}
+        />
+        <ChipInput.AddButton inputRef={ref}>Add</ChipInput.AddButton>
+      </>
+    );
+  })
+  .add("With Autocomplete", () => {
+    const people = ["Durward Reynolds", "Kenton Towne", "Therese Wunsch", "Benedict Kessler", "Katelyn Rohan"];
+
+    const [value, setValue] = useState<Option<string>[]>([]);
+
+    return (
+      <ChipInputField
+        value={value}
+        onChange={setValue}
+        label="Persons"
+        placeholder="Enter a new person"
+        aria-label="Enter a new person"
+      >
+        <Combobox
+          options={(query: string) =>
+            Promise.resolve(
+              people
+                .map<Option<string>>((p) => ({ label: p, value: p }))
+                .filter((t) => !value.some((val) => val.label === t.label) && t.label.startsWith(query))
+                .concat({ label: query, value: query, displayValue: `Use '${query}'` })
+            )
+          }
+        />
+      </ChipInputField>
+    );
+  });

package/src/base/forms/chip-input/ChipInputField.tsx

@@ -0,0 +1,169 @@
+/*
+ * 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, { KeyboardEventHandler, PropsWithRef, ReactElement, Ref, useCallback } from "react";
+import { createAttributesForTesting, useAriaId } from "../../helpers";
+import Field from "../base/Field";
+import Label from "../base/label/Label";
+import Help from "../base/help/Help";
+import FieldMessage from "../base/field-message/FieldMessage";
+import styled from "styled-components";
+import classNames from "classnames";
+import { createVariantClass } from "../variants";
+import ChipInput, { NewChipInput } from "../headless-chip-input/ChipInput";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { useTranslation } from "react-i18next";
+import { withForwardRef } from "../helpers";
+import { Option } from "@scm-manager/ui-types";
+
+const StyledChipInput: typeof ChipInput = styled(ChipInput)`
+  min-height: 40px;
+  height: min-content;
+  gap: 0.5rem;
+  &:focus-within {
+    border: 1px solid var(--scm-info-color);
+    box-shadow: rgba(51, 178, 232, 0.25) 0px 0px 0px 0.125em;
+  }
+`;
+
+const StyledInput = styled(NewChipInput)`
+  color: var(--scm-secondary-more-color);
+  font-size: 1rem;
+  height: initial;
+  padding: 0;
+  border-radius: 0;
+  &:focus {
+    outline: none;
+  }
+` as unknown as typeof NewChipInput;
+
+const StyledDelete = styled(ChipInput.Chip.Delete)`
+  &:focus {
+    outline-offset: 0;
+  }
+`;
+
+type InputFieldProps<T> = {
+  label: string;
+  createDeleteText?: (value: string) => string;
+  helpText?: string;
+  error?: string;
+  testId?: string;
+  id?: string;
+  children?: ReactElement;
+  placeholder?: string;
+  onChange?: (newValue: Option<T>[]) => void;
+  value?: Option<T>[] | null;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+  readOnly?: boolean;
+  disabled?: boolean;
+  className?: string;
+  isLoading?: boolean;
+  isNewItemDuplicate?: (existingItem: Option<T>, newItem: Option<T>) => boolean;
+  ref?: Ref<HTMLInputElement>;
+};
+
+/**
+ * @beta
+ * @since 2.44.0
+ */
+const ChipInputField = function ChipInputField<T>(
+  {
+    label,
+    helpText,
+    readOnly,
+    disabled,
+    error,
+    createDeleteText,
+    onChange,
+    placeholder,
+    value,
+    className,
+    testId,
+    id,
+    children,
+    isLoading,
+    isNewItemDuplicate,
+    ...props
+  }: PropsWithRef<InputFieldProps<T>>,
+  ref: React.ForwardedRef<HTMLInputElement>
+) {
+  const [t] = useTranslation("commons", { keyPrefix: "form.chipList" });
+  const deleteTextCallback = useCallback(
+    (item) => (createDeleteText ? createDeleteText(item) : t("delete", { item })),
+    [createDeleteText, t]
+  );
+  const inputId = useAriaId(id ?? testId);
+  const labelId = useAriaId();
+  const inputDescriptionId = useAriaId();
+  const variant = error ? "danger" : undefined;
+  return (
+    <Field className={className} aria-owns={inputId}>
+      <Label id={labelId}>
+        {label}
+        {helpText ? <Help className="ml-1" text={helpText} /> : null}
+      </Label>
+      <div className={classNames("control", { "is-loading": isLoading })}>
+        <StyledChipInput
+          value={value}
+          onChange={(e) => onChange && onChange(e ?? [])}
+          className="is-flex is-flex-wrap-wrap input"
+          aria-labelledby={labelId}
+          disabled={readOnly || disabled}
+          isNewItemDuplicate={isNewItemDuplicate}
+        >
+          {value?.map((option, index) => (
+            <ChipInput.Chip key={option.label} className="tag is-light is-overflow-hidden">
+              <span className="is-ellipsis-overflow">{option.label}</span>
+              <StyledDelete aria-label={deleteTextCallback(option.label)} index={index} className="delete is-small" />
+            </ChipInput.Chip>
+          ))}
+          <StyledInput
+            {...props}
+            className={classNames(
+              "is-borderless",
+              "has-background-transparent",
+              "is-shadowless",
+              "input",
+              "is-ellipsis-overflow",
+              createVariantClass(variant)
+            )}
+            placeholder={!readOnly && !disabled ? placeholder : ""}
+            id={inputId}
+            ref={ref}
+            aria-describedby={inputDescriptionId}
+            {...createAttributesForTesting(testId)}
+          >
+            {children ? children : null}
+          </StyledInput>
+        </StyledChipInput>
+      </div>
+      <VisuallyHidden aria-hidden id={inputDescriptionId}>
+        {t("input.description")}
+      </VisuallyHidden>
+      {error ? <FieldMessage variant={variant}>{error}</FieldMessage> : null}
+    </Field>
+  );
+};
+export default withForwardRef(ChipInputField);

package/src/base/forms/chip-input/ControlledChipInputField.tsx

@@ -0,0 +1,111 @@
+/*
+ * 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, { ComponentProps } from "react";
+import { Controller, ControllerRenderProps, Path } from "react-hook-form";
+import { useScmFormContext } from "../ScmFormContext";
+import { useScmFormPathContext } from "../FormPathContext";
+import { defaultOptionFactory, prefixWithoutIndices, withForwardRef } from "../helpers";
+import classNames from "classnames";
+import ChipInputField from "./ChipInputField";
+import { Option } from "@scm-manager/ui-types";
+
+type Props<T extends Record<string, unknown>> = Omit<
+  Parameters<typeof ChipInputField>[0],
+  "error" | "createDeleteText" | "label" | "defaultChecked" | "required" | keyof ControllerRenderProps
+> & {
+  rules?: ComponentProps<typeof Controller>["rules"];
+  name: Path<T>;
+  label?: string;
+  defaultValue?: string[];
+  createDeleteText?: (value: string) => string;
+  optionFactory?: (val: any) => Option<unknown>;
+  ref?: React.ForwardedRef<HTMLInputElement>;
+};
+
+/**
+ * @beta
+ * @since 2.44.0
+ */
+function ControlledChipInputField<T extends Record<string, unknown>>(
+  {
+    name,
+    label,
+    helpText,
+    rules,
+    testId,
+    defaultValue,
+    readOnly,
+    placeholder,
+    className,
+    createDeleteText,
+    children,
+    optionFactory = defaultOptionFactory,
+    ...props
+  }: Props<T>,
+  ref: React.ForwardedRef<HTMLInputElement>
+) {
+  const { control, t, readOnly: formReadonly } = useScmFormContext();
+  const formPathPrefix = useScmFormPathContext();
+
+  const nameWithPrefix = formPathPrefix ? `${formPathPrefix}.${name}` : name;
+  const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
+  const labelTranslation = label || t(`${prefixedNameWithoutIndices}.label`) || "";
+  const placeholderTranslation = placeholder || t(`${prefixedNameWithoutIndices}.placeholder`) || "";
+  const ariaLabelTranslation = t(`${prefixedNameWithoutIndices}.ariaLabel`);
+  const helpTextTranslation = helpText || t(`${prefixedNameWithoutIndices}.helpText`);
+  return (
+    <Controller
+      control={control}
+      name={nameWithPrefix}
+      rules={rules}
+      defaultValue={defaultValue}
+      render={({ field: { value, onChange, ...field }, fieldState }) => (
+        <ChipInputField
+          label={labelTranslation}
+          helpText={helpTextTranslation}
+          placeholder={placeholderTranslation}
+          aria-label={ariaLabelTranslation}
+          value={value ? value.map(optionFactory) : []}
+          onChange={(selectedOptions) => onChange(selectedOptions.map((item) => item.value))}
+          {...props}
+          {...field}
+          readOnly={readOnly ?? formReadonly}
+          className={classNames("column", className)}
+          error={
+            fieldState.error
+              ? fieldState.error.message || t(`${prefixedNameWithoutIndices}.error.${fieldState.error.type}`)
+              : undefined
+          }
+          testId={testId ?? `input-${nameWithPrefix}`}
+          ref={ref}
+        >
+          {children}
+        </ChipInputField>
+      )}
+    />
+  );
+}
+
+export default withForwardRef(ControlledChipInputField);

package/src/base/forms/combobox/Combobox.stories.tsx

@@ -0,0 +1,125 @@
+/*
+ * 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 { storiesOf } from "@storybook/react";
+import React, { Fragment, useState } from "react";
+import Combobox from "./Combobox";
+import { Combobox as HeadlessCombobox } from "@headlessui/react";
+import { Option } from "@scm-manager/ui-types";
+import { Link, BrowserRouter } from "react-router-dom";
+
+const waitFor = (ms: number) =>
+  function <T>(result: T) {
+    return new Promise<T>((resolve) => setTimeout(() => resolve(result), ms));
+  };
+
+const data = [
+  { label: "Trillian", value: "1" },
+  { label: "Arthur", value: "2" },
+  { label: "Zaphod", value: "3" },
+];
+
+const linkData = [{ label: "Link111111111111111111111111111111111111", value: "1" }];
+
+storiesOf("Combobox", module)
+  .add("Options array", () => {
+    const [value, setValue] = useState<Option<string>>();
+    return <Combobox options={data} value={value} onChange={setValue} />;
+  })
+  .add("Options function", () => {
+    const [value, setValue] = useState<Option<string>>();
+    return <Combobox options={() => data} value={value} onChange={setValue} />;
+  })
+  .add("Options function as promise", () => {
+    const [value, setValue] = useState<Option<string>>();
+    return (
+      <Combobox
+        value={value}
+        onChange={setValue}
+        options={(query) => Promise.resolve(data.filter((t) => t.label.startsWith(query))).then(waitFor(1000))}
+      />
+    );
+  })
+  .add("Children as Element", () => {
+    const [value, setValue] = useState<Option<string>>();
+    const [query, setQuery] = useState("");
+
+    return (
+      <Combobox value={value} onChange={setValue} onQueryChange={setQuery}>
+        {query ? (
+          <HeadlessCombobox.Option value={{ label: query, value: query }} key={query} as={Fragment}>
+            {({ active }) => <Combobox.Option isActive={active}>{`Create ${query}`}</Combobox.Option>}
+          </HeadlessCombobox.Option>
+        ) : null}
+        <HeadlessCombobox.Option value={{ label: "All", value: "All" }} key="all" as={Fragment}>
+          {({ active }) => <Combobox.Option isActive={active}>All</Combobox.Option>}
+        </HeadlessCombobox.Option>
+        <>
+          {data.map((o) => (
+            <HeadlessCombobox.Option value={o} key={o.value} as={Fragment}>
+              {({ active }) => <Combobox.Option isActive={active}>{o.label}</Combobox.Option>}
+            </HeadlessCombobox.Option>
+          ))}
+        </>
+      </Combobox>
+    );
+  })
+  .add("Children as render props", () => {
+    const [value, setValue] = useState<Option<string>>();
+    return (
+      <Combobox options={data} value={value} onChange={setValue}>
+        {(o) => (
+          <HeadlessCombobox.Option value={o} key={o.value} as={Fragment}>
+            {({ active }) => <Combobox.Option isActive={active}>{o.label}</Combobox.Option>}
+          </HeadlessCombobox.Option>
+        )}
+      </Combobox>
+    );
+  })
+  .add("Links as render props", () => {
+    const [value, setValue] = useState<Option<string>>();
+    const [query, setQuery] = useState("Hello");
+    return (
+      <BrowserRouter>
+        <Combobox
+          className="input is-small omni-search-bar"
+          placeholder={"Placeholder"}
+          value={value}
+          options={linkData}
+          onChange={setValue}
+          onQueryChange={setQuery}
+        >
+          {(o) => (
+            <HeadlessCombobox.Option value={{ label: o.label, value: query, displayValue: o.value }} key={o.value} as={Fragment}>
+              {({ active }) => (
+                <Combobox.Option isActive={active}>
+                  <Link to={o.label}>{o.label}</Link>
+                </Combobox.Option>
+              )}
+            </HeadlessCombobox.Option>
+          )}
+        </Combobox>
+      </BrowserRouter>
+    );
+  });