@scm-manager/ui-core 3.10.4-20250824-132529 → 4.0.0-REACT18-20250824-143504

package/src/base/buttons/Button.stories.tsx

@@ -14,24 +14,132 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { ComponentProps } from "react";
+// import React, { ComponentProps } from "react";
+//
+// import {
+//   Button as ButtonComponent,
+//   ButtonVariantList,
+//   ButtonVariants,
+//   ExternalLinkButton as ExternalLinkButtonComponent,
+//   LinkButton as LinkButtonComponent,
+//   IconButton as IconButtonComponent,
+// } from "./Button";
+// import Icon from "./Icon";
+// import StoryRouter from "storybook-react-router";
+// import { StoryFn } from "@storybook/react";
+//
+// // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+// export default {
+//   title: "Components",
+//   component: null,
+//   subcomponents: {
+//     Button: ButtonComponent,
+//     LinkButton: LinkButtonComponent,
+//     ExternalLinkButton: ExternalLinkButtonComponent,
+//     IconButton: IconButtonComponent,
+//   },
+//   argTypes: {
+//     variant: {
+//       options: ButtonVariantList,
+//       control: { type: "select" },
+//     },
+//   },
+//   decorators: [StoryRouter()],
+//   parameters: {
+//     storyshots: { disable: true },
+//   },
+// };
+//
+// // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+// const ButtonTemplate: StoryFn<ComponentProps<typeof ButtonComponent>> = (args) => <ButtonComponent {...args} />;
+// const LinkButtonTemplate: StoryFn<ComponentProps<typeof LinkButtonComponent>> = (args) => (
+//   <LinkButtonComponent {...args} />
+// );
+// const ExternalLinkButtonTemplate: StoryFn<ComponentProps<typeof ExternalLinkButtonComponent>> = (args) => (
+//   <ExternalLinkButtonComponent {...args} />
+// );
+//
+// const IconButtonTemplate: StoryFn<ComponentProps<typeof IconButtonComponent>> = (args) => (
+//   <IconButtonComponent {...args} />
+// );
+//
+// export const Button = ButtonTemplate.bind({});
+// // More on args: https://storybook.js.org/docs/react/writing-stories/args
+// Button.args = {
+//   children: "Button",
+//   variant: ButtonVariants.PRIMARY,
+//   disabled: false,
+// };
+//
+// export const LinkButton = LinkButtonTemplate.bind({});
+// // More on args: https://storybook.js.org/docs/react/writing-stories/args
+// LinkButton.args = {
+//   children: "Link Button",
+//   to: "/repos",
+//   variant: ButtonVariants.PRIMARY,
+// };
+//
+// export const ExternalLinkButton = ExternalLinkButtonTemplate.bind({});
+// // More on args: https://storybook.js.org/docs/react/writing-stories/args
+// ExternalLinkButton.args = {
+//   children: "External Link Button",
+//   href: "https://scm-manager.org",
+//   variant: ButtonVariants.PRIMARY,
+// };
+//
+// const smallIcon = <Icon className="is-small">trash</Icon>;
+// const mediumIcon = <Icon className="is-medium">trash</Icon>;
+//
+//   /*
+//
+//     Variant and size are defaulted to medium and colored and do not have to be explicitly added as parameters.
+//     However for the sake of documentation here they are still passed in
+//
+//    */
+// export const IconButtonBorder = IconButtonTemplate.bind({});
+// IconButtonBorder.args = {
+//   children: mediumIcon,
+//   variant: "colored",
+//   size: "medium",
+// };
+//
+//
+// export const IconButtonBorderDefault = IconButtonTemplate.bind({});
+// IconButtonBorderDefault.args = {
+//   children: mediumIcon,
+//   variant: "default",
+//   size: "medium",
+// };
+//
+// export const IconButtonBorderlessSmall = IconButtonTemplate.bind({});
+// IconButtonBorderlessSmall.args = {
+//   children: smallIcon,
+//   variant: "colored",
+//   size: "small",
+// };
+//
+// export const IconButtonBorderlessSmallDefault = IconButtonTemplate.bind({});
+// IconButtonBorderlessSmallDefault.args = {
+//   children: smallIcon,
+//   variant: "default",
+//   size: "small",
+// };
+
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import {
   Button as ButtonComponent,
   ButtonVariantList,
   ButtonVariants,
   ExternalLinkButton as ExternalLinkButtonComponent,
-  LinkButton as LinkButtonComponent,
   IconButton as IconButtonComponent,
+  LinkButton as LinkButtonComponent,
 } from "./Button";
 import Icon from "./Icon";
-import StoryRouter from "storybook-react-router";
-import { StoryFn } from "@storybook/react";
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: "Components",
-  component: null,
+const meta: Meta = {
+  title: "Buttons/Button",
   subcomponents: {
     Button: ButtonComponent,
     LinkButton: LinkButtonComponent,
@@ -44,83 +152,84 @@ export default {
       control: { type: "select" },
     },
   },
-  decorators: [StoryRouter()],
-  parameters: {
-    storyshots: { disable: true },
-  },
+  decorators: [
+    (Story) => (
+      <div style={{ margin: "2rem", display: "flex", gap: "1rem", alignItems: "center" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ["autodocs"],
 };
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const ButtonTemplate: StoryFn<ComponentProps<typeof ButtonComponent>> = (args) => <ButtonComponent {...args} />;
-const LinkButtonTemplate: StoryFn<ComponentProps<typeof LinkButtonComponent>> = (args) => (
-  <LinkButtonComponent {...args} />
-);
-const ExternalLinkButtonTemplate: StoryFn<ComponentProps<typeof ExternalLinkButtonComponent>> = (args) => (
-  <ExternalLinkButtonComponent {...args} />
-);
-
-const IconButtonTemplate: StoryFn<ComponentProps<typeof IconButtonComponent>> = (args) => (
-  <IconButtonComponent {...args} />
-);
+export default meta;
 
-export const Button = ButtonTemplate.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Button.args = {
-  children: "Button",
-  variant: ButtonVariants.PRIMARY,
-  disabled: false,
+export const Button: StoryObj<typeof ButtonComponent> = {
+  render: (args) => <ButtonComponent {...args} />,
+  args: {
+    children: "Button",
+    variant: "primary",
+    disabled: false,
+  },
 };
 
-export const LinkButton = LinkButtonTemplate.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-LinkButton.args = {
-  children: "Link Button",
-  to: "/repos",
-  variant: ButtonVariants.PRIMARY,
+export const LinkButton: StoryObj<typeof LinkButtonComponent> = {
+  render: (args) => <LinkButtonComponent {...args} />,
+  args: {
+    children: "Link Button",
+    to: "/repos",
+    variant: "primary",
+  },
 };
 
-export const ExternalLinkButton = ExternalLinkButtonTemplate.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-ExternalLinkButton.args = {
-  children: "External Link Button",
-  href: "https://scm-manager.org",
-  variant: ButtonVariants.PRIMARY,
+export const ExternalLinkButton: StoryObj<typeof ExternalLinkButtonComponent> = {
+  render: (args) => <ExternalLinkButtonComponent {...args} />,
+  args: {
+    children: "External Link Button",
+    href: "https://scm-manager.org",
+    variant: "primary",
+  },
 };
 
-const smallIcon = <Icon className="is-small">trash</Icon>;
 const mediumIcon = <Icon className="is-medium">trash</Icon>;
+const smallIcon = <Icon className="is-small">trash</Icon>;
 
-  /*
-
-    Variant and size are defaulted to medium and colored and do not have to be explicitly added as parameters.
-    However for the sake of documentation here they are still passed in
-
-   */
-export const IconButtonBorder = IconButtonTemplate.bind({});
-IconButtonBorder.args = {
-  children: mediumIcon,
-  variant: "colored",
-  size: "medium",
+export const BorderedIcon: StoryObj<typeof IconButtonComponent> = {
+  name: "Icon Button (Bordered)",
+  render: (args) => <IconButtonComponent {...args} />,
+  args: {
+    children: mediumIcon,
+    variant: "colored",
+    size: "medium",
+  },
 };
 
-
-export const IconButtonBorderDefault = IconButtonTemplate.bind({});
-IconButtonBorderDefault.args = {
-  children: mediumIcon,
-  variant: "default",
-  size: "medium",
+export const BorderedIconDefault: StoryObj<typeof IconButtonComponent> = {
+  name: "Icon Button (Bordered, Default)",
+  render: (args) => <IconButtonComponent {...args} />,
+  args: {
+    children: mediumIcon,
+    variant: "default",
+    size: "medium",
+  },
 };
 
-export const IconButtonBorderlessSmall = IconButtonTemplate.bind({});
-IconButtonBorderlessSmall.args = {
-  children: smallIcon,
-  variant: "colored",
-  size: "small",
+export const BorderlessIcon: StoryObj<typeof IconButtonComponent> = {
+  name: "Icon Button (Borderless, Small)",
+  render: (args) => <IconButtonComponent {...args} />,
+  args: {
+    children: smallIcon,
+    variant: "colored",
+    size: "small",
+  },
 };
 
-export const IconButtonBorderlessSmallDefault = IconButtonTemplate.bind({});
-IconButtonBorderlessSmallDefault.args = {
-  children: smallIcon,
-  variant: "default",
-  size: "small",
+export const BorderlessIconDefault: StoryObj<typeof IconButtonComponent> = {
+  name: "Icon Button (Borderless, Small, Default)",
+  render: (args) => <IconButtonComponent {...args} />,
+  args: {
+    children: smallIcon,
+    variant: "default",
+    size: "small",
+  },
 };

package/src/base/buttons/Button.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
-import { Link as ReactRouterLink, LinkProps as ReactRouterLinkProps } from "react-router-dom";
+import { Link as ReactRouterLink, LinkProps as ReactRouterLinkProps } from "react-router";
 import classNames from "classnames";
 import { createAttributesForTesting } from "../helpers";
 import styled from "styled-components";
@@ -35,7 +35,7 @@ export const ButtonVariants = {
 
 export const ButtonVariantList = Object.values(ButtonVariants);
 
-type ButtonVariant = typeof ButtonVariants[keyof typeof ButtonVariants];
+type ButtonVariant = (typeof ButtonVariants)[keyof typeof ButtonVariants];
 
 const createButtonClasses = (variant?: ButtonVariant, isLoading?: boolean) =>
   classNames("button", {
@@ -75,7 +75,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     >
       {children}
     </button>
-  )
+  ),
 );
 
 type LinkButtonProps = BaseButtonProps & ReactRouterLinkProps;
@@ -98,7 +98,7 @@ export const LinkButton = React.forwardRef<HTMLAnchorElement, LinkButtonProps>(
     >
       {children}
     </ReactRouterLink>
-  )
+  ),
 );
 
 /**
@@ -112,7 +112,7 @@ export const ExternalLink = React.forwardRef<HTMLAnchorElement, AnchorHTMLAttrib
     <a target="_blank" rel="noreferrer noopener" {...props} ref={ref}>
       {children}
     </a>
-  )
+  ),
 );
 
 type ExternalLinkButtonProps = BaseButtonProps & AnchorHTMLAttributes<HTMLAnchorElement>;
@@ -136,7 +136,7 @@ export const ExternalLinkButton = React.forwardRef<HTMLAnchorElement, ExternalLi
     >
       {children}
     </ExternalLink>
-  )
+  ),
 );
 
 const StyledIconButton = styled.button`
@@ -180,9 +180,9 @@ export const IconSizes = {
   MEDIUM: "medium",
 } as const;
 
-type IconButtonSize = typeof IconSizes[keyof typeof IconSizes];
+type IconButtonSize = (typeof IconSizes)[keyof typeof IconSizes];
 
-type IconButtonVariant = typeof IconButtonVariants[keyof typeof IconButtonVariants];
+type IconButtonVariant = (typeof IconButtonVariants)[keyof typeof IconButtonVariants];
 
 const createIconButtonClasses = (variant?: IconButtonVariant) =>
   classNames("button", {
@@ -218,5 +218,5 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
     ) : (
       <StyledIconButton {...elementAttributes}>{children}</StyledIconButton>
     );
-  }
+  },
 );

package/src/base/forms/AddListEntryForm.tsx

@@ -17,7 +17,7 @@
 import React, { useCallback, useEffect } from "react";
 import { ScmFormPathContextProvider, useScmFormPathContext } from "./FormPathContext";
 import { ScmFormContextProvider, useScmFormContext } from "./ScmFormContext";
-import { DeepPartial, UseFieldArrayReturn, useForm, UseFormReturn } from "react-hook-form";
+import { UseFieldArrayReturn, useForm, DefaultValues, UseFormReturn } from "react-hook-form";
 import { Button } from "../buttons";
 import { prefixWithoutIndices } from "./helpers";
 import { useScmFormListContext } from "./ScmFormListContext";
@@ -35,9 +35,9 @@ type RenderProps<T extends Record<string, unknown>> = Omit<
   "register" | "unregister" | "handleSubmit" | "control"
 >;
 
-type Props<FormType extends Record<string, unknown>, DefaultValues extends FormType> = {
+type Props<FormType extends Record<string, unknown>> = {
   children: ((renderProps: RenderProps<FormType>) => React.ReactNode | React.ReactNode[]) | React.ReactNode;
-  defaultValues: DefaultValues;
+  defaultValues: DefaultValues<FormType>;
   submit?: (data: FormType, append: UseFieldArrayReturn["append"]) => unknown;
   /**
    * @default true
@@ -49,20 +49,20 @@ type Props<FormType extends Record<string, unknown>, DefaultValues extends FormT
  * @beta
  * @since 2.43.0
  */
-function AddListEntryForm<FormType extends Record<string, unknown>, DefaultValues extends FormType>({
+function AddListEntryForm<FormType extends Record<string, unknown>>({
   children,
   defaultValues,
   submit,
   disableSubmitWhenDirty = true,
-}: Props<FormType, DefaultValues>) {
+}: Props<FormType>) {
   const [defaultTranslate] = useTranslation("commons", { keyPrefix: "form" });
   const { readOnly, t } = useScmFormContext();
   const nameWithPrefix = useScmFormPathContext();
   const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
   const { append, isNested } = useScmFormListContext();
-  const form = useForm<FormType, DefaultValues>({
+  const form = useForm<FormType>({
     mode: "onChange",
-    defaultValues: defaultValues as DeepPartial<FormType>,
+    defaultValues: defaultValues,
   });
 
   const {
@@ -75,7 +75,7 @@ function AddListEntryForm<FormType extends Record<string, unknown>, DefaultValue
     [prefixedNameWithoutIndices, t]
   );
 
-  const onSubmit = useCallback((data) => (submit ? submit(data, append) : append(data)), [append, submit]);
+  const onSubmit = useCallback((data: any) => (submit ? submit(data, append) : append(data)), [append, submit]);
 
   const submitButtonLabel = translateWithExtraPrefix("add", {
     defaultValue: defaultTranslate("list.add.label", { entity: translateWithExtraPrefix("entity") }),

package/src/base/forms/ConfigurationForm.tsx

@@ -20,11 +20,11 @@ import React, { ComponentProps } from "react";
 import { HalRepresentation } from "@scm-manager/ui-types";
 import Form from "./Form";
 import { useTranslation } from "react-i18next";
+import { DefaultValues, FieldValues } from "react-hook-form";
 
 type Props<T extends HalRepresentation> =
 // eslint-disable-next-line prettier/prettier
-  Omit<ComponentProps<typeof Form<T>>, "onSubmit" | "defaultValues" | "readOnly" | "successMessageFallback">
-  & {
+  Omit<ComponentProps<typeof Form<T>>, "onSubmit" | "defaultValues" | "readOnly" | "successMessageFallback"> & {
   link: string;
 };
 
@@ -32,7 +32,11 @@ type Props<T extends HalRepresentation> =
  * @beta
  * @since 2.41.0
  */
-export function ConfigurationForm<T extends HalRepresentation>({ link, children, ...formProps }: Props<T>) {
+export function ConfigurationForm<T extends HalRepresentation & FieldValues>({
+                                                                               link,
+                                                                               children,
+                                                                               ...formProps
+                                                                             }: Props<T>) {
   const { initialConfiguration, isReadOnly, update, isLoading } = useConfigLink<T>(link);
   const [t] = useTranslation("commons", { keyPrefix: "form" });
 
@@ -41,8 +45,13 @@ export function ConfigurationForm<T extends HalRepresentation>({ link, children,
   }
 
   return (
-    <Form onSubmit={update} defaultValues={initialConfiguration} readOnly={isReadOnly}
-          successMessageFallback={t("submit-success-notification")} {...formProps}>
+    <Form
+      onSubmit={update}
+      defaultValues={initialConfiguration as DefaultValues<T>}
+      readOnly={isReadOnly}
+      successMessageFallback={t("submit-success-notification")}
+      {...formProps}
+    >
       {children}
     </Form>
   );