@scm-manager/ui-components 4.0.0-REACT18-20250701-125025 → 4.0.0-REACT19

package/src/avatar/Avatar.ts

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import { Person } from "@scm-manager/ui-types";
+import type { Person } from "@scm-manager/ui-types";
 import { extensionPoints } from "@scm-manager/ui-extensions";
 
 // re export type to avoid breaking changes,

package/src/avatar/AvatarImage.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { FC } from "react";
-import { Image } from "..";
+import Image from "../Image";
 import { EXTENSION_POINT, Person } from "./Avatar";
 import { useBinder } from "@scm-manager/ui-extensions";
 

package/src/avatar/AvatarWrapper.tsx

@@ -14,11 +14,11 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC } from "react";
+import React, { FC, ReactNode } from "react";
 import { extensionPoints, useBinder } from "@scm-manager/ui-extensions";
 import { EXTENSION_POINT } from "./Avatar";
 
-const AvatarWrapper: FC = ({ children }) => {
+const AvatarWrapper: FC<{ children: ReactNode }> = ({ children }) => {
   const binder = useBinder();
   if (binder.hasExtension<extensionPoints.AvatarFactory>(EXTENSION_POINT)) {
     return <>{children}</>;

package/src/buttons/Button.stories.tsx

@@ -0,0 +1,159 @@
+/*
+ * Copyright (c) 2020 - present Cloudogu GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/.
+ */
+
+// import React, {ReactElement, ReactNode, useEffect, useState} from "react";
+// import styled from "styled-components";
+// import {Meta, storiesOf, StoryObj} from "@storybook/react";
+// import Button from "./Button";
+// import {MemoryRouter} from "react-router-dom";
+// import AddButton from "./AddButton";
+// import CreateButton from "./CreateButton";
+// import DeleteButton from "./DeleteButton";
+// import DownloadButton from "./DownloadButton";
+// import EditButton from "./EditButton";
+// import SubmitButton from "./SubmitButton";
+
+// const colors = ["primary", "link", "info", "success", "warning", "danger", "white", "light", "dark", "black", "text"];
+//
+// const Spacing = styled.div`
+//   padding: 1em;
+// `;
+//
+// const SpacingDecorator = (story: () => ReactNode) => <Spacing>{story()}</Spacing>;
+// const RoutingDecorator = (story: () => ReactNode) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>;
+//
+// storiesOf("Buttons/Button", module)
+//   .addDecorator(RoutingDecorator)
+//   .add("Colors", () => (
+//     <div>
+//       {colors.map((color) => (
+//         <Spacing key={color}>
+//           <Button color={color} label={color} />
+//         </Spacing>
+//       ))}
+//     </div>
+//   ))
+//   .add("Loading", () => (
+//     <Spacing>
+//       <Button color={"primary"} loading={true}>
+//         Loading Button
+//       </Button>
+//     </Spacing>
+//   ))
+//   .add("Disabled", () => (
+//     <div>
+//       {colors.map((color) => (
+//         <Spacing key={color}>
+//           <Button color={color} label={color} disabled={true} />
+//         </Spacing>
+//       ))}
+//     </div>
+//   ));
+//
+// const buttonStory = (name: string, storyFn: () => ReactElement) => {
+//   return storiesOf("Buttons/" + name, module)
+//     .addDecorator(RoutingDecorator)
+//     .addDecorator(SpacingDecorator)
+//     .add("Default", storyFn);
+// };
+// buttonStory("AddButton", () => <AddButton>Add</AddButton>);
+// buttonStory("CreateButton", () => <CreateButton>Create</CreateButton>);
+// buttonStory("DeleteButton", () => <DeleteButton>Delete</DeleteButton>);
+// buttonStory("DownloadButton", () => <DownloadButton displayName="Download" disabled={false} url="" />).add(
+//   "Disabled",
+//   () => <DownloadButton displayName="Download" disabled={true} url="" />
+// );
+// buttonStory("EditButton", () => <EditButton>Edit</EditButton>);
+// buttonStory("SubmitButton", () => <SubmitButton>Submit</SubmitButton>);
+// buttonStory("Button Ref", () => {
+//   const [ref, setRef] = useState<HTMLButtonElement | HTMLAnchorElement | null>();
+//   useEffect(() => ref?.focus(), [ref]);
+//   return <Button ref={setRef}>Focus me!</Button>;
+// });
+
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import type { Meta, StoryObj } from "@storybook/react";
+import Button from "./Button";
+
+// --- Helfer-Komponenten und Mock-Daten ---
+
+const colors = ["primary", "link", "info", "success", "warning", "danger", "white", "light", "dark", "black", "text"];
+const Spacing = styled.div`
+  padding: 1em;
+  display: inline-block;
+`;
+
+const RefExample = () => {
+  const [ref, setRef] = useState<HTMLButtonElement | HTMLAnchorElement | null>(null);
+  useEffect(() => {
+    ref?.focus();
+  }, [ref]);
+  return <Button ref={setRef}>Focus me!</Button>;
+};
+
+// --- Storybook Metadaten ---
+
+const meta: Meta<typeof Button> = {
+  title: "Buttons/Button",
+  component: Button,
+  decorators: [(Story) => <Spacing>{Story()}</Spacing>],
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+// --- Story-Definitionen ---
+
+type Story = StoryObj<typeof meta>;
+
+export const Loading: Story = {
+  args: {
+    color: "primary",
+    loading: true,
+    children: "Loading Button",
+  },
+};
+
+// Stories mit komplexem Layout verwenden eine `render`-Funktion
+export const Colors: Story = {
+  render: () => (
+    <div>
+      {colors.map((color) => (
+        <Spacing key={color}>
+          <Button color={color} label={color} />
+        </Spacing>
+      ))}
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div>
+      {colors.map((color) => (
+        <Spacing key={color}>
+          <Button color={color} label={color} disabled={true} />
+        </Spacing>
+      ))}
+    </div>
+  ),
+};
+
+export const UsingRefs: Story = {
+  name: "Using Refs",
+  render: () => <RefExample />,
+};

package/src/buttons/Button.tsx

@@ -16,7 +16,7 @@
 
 import React, { KeyboardEvent, MouseEvent, ReactNode, useCallback } from "react";
 import classNames from "classnames";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import Icon from "../Icon";
 import { createAttributesForTesting } from "../devBuild";
 
@@ -61,7 +61,7 @@ const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, Props>(
       action,
       color = "default",
     },
-    ref
+    ref,
   ) => {
     const executeRef = useCallback(
       (el: HTMLButtonElement | HTMLAnchorElement | null) => {
@@ -71,7 +71,7 @@ const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, Props>(
           ref.current = el;
         }
       },
-      [ref]
+      [ref],
     );
     const renderIcon = () => {
       return (
@@ -89,7 +89,7 @@ const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, Props>(
       { "is-loading": loading },
       { "is-fullwidth": fullWidth },
       { "is-reduced-mobile": reducedMobile },
-      className
+      className,
     );
 
     const content = (
@@ -131,7 +131,7 @@ const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, Props>(
         {content}
       </button>
     );
-  }
+  },
 );
 
 export default Button;

package/src/config/ConfigurationBinder.tsx

@@ -33,7 +33,6 @@ type GlobalRouteProps = {
 };
 
 type NamespaceRouteProps = {
-  url: string;
   namespace: Namespace;
 };
 
@@ -53,13 +52,13 @@ class ConfigurationBinder {
     to: string,
     labelI18nKey: string,
     t: any,
-    options: Omit<ComponentProps<typeof NavLink>, "label" | "to"> = {}
+    options: Omit<ComponentProps<typeof NavLink>, "label" | "to"> = {},
   ) {
     return <NavLink to={to} label={t(labelI18nKey)} {...options} />;
   }
 
   route(path: string, Component: any) {
-    return <Route path={urls.escapeUrlForRoute(path)}>{Component}</Route>;
+    return <Route path={urls.escapeUrlForRoute(path)} element={Component} />;
   }
 
   bindGlobal(to: string, labelI18nKey: string, linkName: string, ConfigurationComponent: any, sortKey?: string) {
@@ -83,10 +82,10 @@ class ConfigurationBinder {
 
       if (link) {
         return this.route(
-          url + "/settings" + to,
+          "/settings" + to,
           <TitledGlobalSettingComponent i18nNamespace={this.i18nNamespace} label={labelI18nKey}>
             <ConfigurationComponent link={(link as Link).href} {...additionalProps} />
-          </TitledGlobalSettingComponent>
+          </TitledGlobalSettingComponent>,
         );
       }
     };
@@ -100,20 +99,20 @@ class ConfigurationBinder {
     labelI18nKey: string,
     icon: string,
     linkName: string,
-    Component: React.ComponentType<{ link: string }>
+    Component: React.ComponentType<{ link: string }>,
   ) {
     const predicate = ({ links }: extensionPoints.AdminRoute["props"]) => links[linkName];
 
     const AdminNavLink = withTranslation(this.i18nNamespace)(
-      ({ t, url }: WithTranslation & extensionPoints.AdminNavigation["props"]) =>
-        this.navLink(url + to, labelI18nKey, t, { icon })
+      ({ t }: WithTranslation & extensionPoints.AdminNavigation["props"]) =>
+        this.navLink(to, labelI18nKey, t, { icon }),
     );
+    binder.bind("admin.navigation", AdminNavLink, predicate);
 
-    const AdminRoute: extensionPoints.AdminRoute["type"] = ({ links, url }) =>
-      this.route(url + to, <Component link={(links[linkName] as Link).href} />);
+    const AdminRoute: extensionPoints.AdminRoute["type"] = ({ links }) =>
+      this.route(to, <Component link={(links[linkName] as Link).href} />);
 
     binder.bind<extensionPoints.AdminRoute>("admin.route", AdminRoute, predicate);
-    binder.bind<extensionPoints.AdminNavigation>("admin.navigation", AdminNavLink, predicate);
   }
 
   bindRepository(to: string, labelI18nKey: string, linkName: string, RepositoryComponent: any) {
@@ -131,18 +130,17 @@ class ConfigurationBinder {
     // bind navigation link to extension point
     binder.bind("repository.navigation", RepoNavLink, repoPredicate);
 
-    // route for global configuration, passes the current repository to component
-    const RepoRoute = ({ url, repository, ...additionalProps }: RepositoryRouteProps) => {
+    // // route for global configuration, passes the current repository to component
+    const RepoRoute = ({ repository, ...additionalProps }: RepositoryRouteProps) => {
       const link = repository._links[linkName];
       if (link) {
         return this.route(
-          url + to,
-          <RepositoryComponent repository={repository} link={(link as Link).href} {...additionalProps} />
+          to,
+          <RepositoryComponent repository={repository} link={(link as Link).href} {...additionalProps} />,
         );
       }
     };
-
-    // bind config route to extension point
+    // // bind config route to extension point
     binder.bind("repository.route", RepoRoute, repoPredicate);
   }
 
@@ -151,7 +149,7 @@ class ConfigurationBinder {
     labelI18nKey: string,
     linkName: string,
     RepositoryComponent: any,
-    sortKey?: string
+    sortKey?: string,
   ) {
     // create predicate based on the link name of the current repository route
     // if the linkname is not available, the navigation link and the route are not bound to the extension points
@@ -168,19 +166,19 @@ class ConfigurationBinder {
     binder.bind("repository.setting", RepoNavLink, repoPredicate, sortKey ?? linkName);
 
     // route for global configuration, passes the current repository to component
-    const RepoRoute = ({ url, repository, ...additionalProps }: RepositoryRouteProps) => {
+    const RepoRoute = ({ repository, ...additionalProps }: RepositoryRouteProps) => {
       const link = repository._links[linkName];
 
       if (link) {
         return this.route(
-          urls.unescapeUrlForRoute(url) + "/settings" + to,
+          "/settings" + to,
           <TitledRepositorySettingComponent
             i18nNamespace={this.i18nNamespace}
             label={labelI18nKey}
             repository={repository}
           >
             <RepositoryComponent repository={repository} link={(link as Link).href} {...additionalProps} />
-          </TitledRepositorySettingComponent>
+          </TitledRepositorySettingComponent>,
         );
       }
     };
@@ -193,37 +191,39 @@ class ConfigurationBinder {
     to: string,
     labelI18nKey: string,
     linkName: string,
-    ConfigurationComponent: ComponentType<{ link: string; namespace: Namespace }>
+    ConfigurationComponent: ComponentType<{ link: string; namespace: Namespace }>,
   ) {
     const namespacePredicate = (props: (extensionPoints.NamespaceSetting | extensionPoints.NamespaceRoute)["props"]) =>
       props.namespace && props.namespace._links && props.namespace._links[linkName];
 
-    const NamespaceNavLink: FC<extensionPoints.NamespaceRoute["props"]> = ({ url }) => {
+    const NamespaceNavLink: FC<extensionPoints.NamespaceRoute["props"]> = () => {
       const [t] = useTranslation(this.i18nNamespace);
-      return this.navLink(url + "/settings" + to, labelI18nKey, t, { activeOnlyWhenExact: false });
+      return this.navLink("/settings" + to, labelI18nKey, t, { activeOnlyWhenExact: false });
     };
 
     binder.bind<extensionPoints.NamespaceSetting>("namespace.setting", NamespaceNavLink, namespacePredicate);
 
-    const NamespaceRoute: FC<extensionPoints.NamespaceRoute["props"]> = ({ url, namespace, ...additionalProps }) => {
-      const link = namespace._links[linkName];
-
-      if (link) {
-        return this.route(
-          urls.unescapeUrlForRoute(url) + "/settings" + to,
-          <TitledNamespaceSettingComponent
-            i18nNamespace={this.i18nNamespace}
-            label={labelI18nKey}
-            namespace={namespace}
-          >
-            <ConfigurationComponent namespace={namespace} link={(link as Link).href} {...additionalProps} />
-          </TitledNamespaceSettingComponent>
-        );
+    const NamespaceRoute = ({ namespace, ...additionalProps }: NamespaceRouteProps) => {
+      if (namespace) {
+        const link = namespace._links[linkName];
+
+        if (link) {
+          return this.route(
+            "/settings" + to,
+            <TitledNamespaceSettingComponent
+              i18nNamespace={this.i18nNamespace}
+              label={labelI18nKey}
+              namespace={namespace}
+            >
+              <ConfigurationComponent namespace={namespace} link={(link as Link).href} {...additionalProps} />
+            </TitledNamespaceSettingComponent>,
+          );
+        }
       }
       return null;
     };
 
-    binder.bind<extensionPoints.NamespaceRoute>("namespace.route", NamespaceRoute, namespacePredicate);
+    binder.bind("namespace.route", NamespaceRoute, namespacePredicate);
   }
 }
 

package/src/config/ConfigurationForm.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC, FormEvent, useEffect, useState } from "react";
+import React, { FC, FormEvent, ReactNode, useEffect, useState } from "react";
 import { ErrorNotification, Level, SubmitButton } from "../index";
 import { useTranslation } from "react-i18next";
 import Loading from "../Loading";
@@ -27,6 +27,7 @@ type Props = {
   isValid: boolean;
   error?: Error | null;
   onSubmit: (e: FormEvent<HTMLFormElement>) => void;
+  children?: ReactNode;
 };
 
 const ConfigurationChangedNotification: FC<{ configChanged: boolean }> = ({ configChanged }) => {

package/src/config/TitledSettings.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC } from "react";
+import React, { FC, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { useDocumentTitle, useDocumentTitleForRepository } from "@scm-manager/ui-core";
 import { Namespace, Repository } from "@scm-manager/ui-types";
@@ -22,6 +22,7 @@ import { Namespace, Repository } from "@scm-manager/ui-types";
 type GlobalProps = {
   i18nNamespace: string;
   label: string;
+  children?: ReactNode;
 };
 
 export const TitledGlobalSettingComponent: FC<GlobalProps> = ({ children, i18nNamespace, label }) => {
@@ -35,6 +36,7 @@ type RepositoryProps = {
   i18nNamespace: string;
   label: string;
   repository: Repository;
+  children?: ReactNode;
 };
 
 export const TitledRepositorySettingComponent: FC<RepositoryProps> = ({
@@ -53,6 +55,7 @@ type NamespaceProps = {
   i18nNamespace: string;
   label: string;
   namespace: Namespace;
+  children?: ReactNode;
 };
 
 export const TitledNamespaceSettingComponent: FC<NamespaceProps> = ({ children, i18nNamespace, label, namespace }) => {

package/src/forms/AddKeyValueEntryToTableField.stories.tsx

@@ -14,31 +14,66 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
+// import React from "react";
+// import { MemoryRouter } from "react-router-dom";
+// import { storiesOf } from "@storybook/react";
+// import AddKeyValueEntryToTableField from "./AddKeyValueEntryToTableField";
+//
+// storiesOf("Forms/AddKeyValueEntryToTableField", module)
+//   .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+//   .add("Default", () => (
+//     <div className="m-6">
+//       <AddKeyValueEntryToTableField
+//         keyFieldLabel="Key"
+//         valueFieldLabel="Value"
+//         buttonLabel="Add to Table"
+//         addEntry={() => null}
+//       />
+//     </div>
+//   ))
+//   .add("Disabled", () => (
+//     <div className="m-6">
+//       <AddKeyValueEntryToTableField
+//         keyFieldLabel="Key"
+//         valueFieldLabel="Value"
+//         buttonLabel="Add to Table"
+//         addEntry={() => null}
+//         disabled={true}
+//       />
+//     </div>
+//   ));
+
 import React from "react";
-import { MemoryRouter } from "react-router-dom";
-import { storiesOf } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
+
 import AddKeyValueEntryToTableField from "./AddKeyValueEntryToTableField";
 
-storiesOf("Forms/AddKeyValueEntryToTableField", module)
-  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
-  .add("Default", () => (
-    <div className="m-6">
-      <AddKeyValueEntryToTableField
-        keyFieldLabel="Key"
-        valueFieldLabel="Value"
-        buttonLabel="Add to Table"
-        addEntry={() => null}
-      />
-    </div>
-  ))
-  .add("Disabled", () => (
-    <div className="m-6">
-      <AddKeyValueEntryToTableField
-        keyFieldLabel="Key"
-        valueFieldLabel="Value"
-        buttonLabel="Add to Table"
-        addEntry={() => null}
-        disabled={true}
-      />
-    </div>
-  ));
+const meta: Meta<typeof AddKeyValueEntryToTableField> = {
+  title: "Forms/AddKeyValueEntryToTableField",
+  component: AddKeyValueEntryToTableField,
+  decorators: [(Story) => Story(), (Story) => <div className="m-6">{Story()}</div>],
+  argTypes: {
+    addEntry: { action: "entryAdded" },
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    keyFieldLabel: "Key",
+    valueFieldLabel: "Value",
+    buttonLabel: "Add to Table",
+    disabled: false,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+};