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

package/src/repos/changesets/Changesets.stories.tsx

@@ -14,29 +14,304 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import { storiesOf } from "@storybook/react";
-import * as React from "react";
+// import { storiesOf } from "@storybook/react";
+// import * as React from "react";
+// import styled from "styled-components";
+// import { MemoryRouter } from "react-router-dom";
+// import repository from "../../__resources__/repository";
+// import ChangesetRow from "./ChangesetRow";
+// import { five, four, one, three, two } from "../../__resources__/changesets";
+// import { Binder, BinderContext } from "@scm-manager/ui-extensions";
+// // @ts-ignore
+// import hitchhiker from "../../__resources__/hitchhiker.png";
+// import { Person } from "../../avatar/Avatar";
+// import { Changeset } from "@scm-manager/ui-types";
+// import { Replacement } from "@scm-manager/ui-text";
+// import ChangesetList from "./ChangesetList";
+// import { ShortcutDocsContextProvider } from "@scm-manager/ui-shortcuts";
+//
+// const Wrapper = styled.div`
+//   margin: 25rem 4rem;
+// `;
+//
+// const robohash = (person: Person) => {
+//   return `https://robohash.org/${person.mail}`;
+// };
+//
+// const withAvatarFactory = (factory: (person: Person) => string, changeset: Changeset) => {
+//   const binder = new Binder("changeset stories");
+//   binder.bind("avatar.factory", factory);
+//   return (
+//     <BinderContext.Provider value={binder}>
+//       <ChangesetRow repository={repository} changeset={changeset} />
+//     </BinderContext.Provider>
+//   );
+// };
+//
+// const withReplacements = (
+//   replacements: ((changeset: Changeset, value: string) => Replacement[])[],
+//   changeset: Changeset
+// ) => {
+//   const binder = new Binder("changeset stories");
+//   replacements.forEach((replacement) => binder.bind("changeset.description.tokens", replacement));
+//   return (
+//     <BinderContext.Provider value={binder}>
+//       <ChangesetRow repository={repository} changeset={changeset} />
+//     </BinderContext.Provider>
+//   );
+// };
+//
+// function copy<T>(input: T): T {
+//   return JSON.parse(JSON.stringify(input));
+// }
+//
+// storiesOf("Repositories/Changesets", module)
+//   .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+//   .addDecorator((storyFn) => <Wrapper className="box box-link-shadow">{storyFn()}</Wrapper>)
+//   .add("Default", () => <ChangesetRow repository={repository} changeset={three} />)
+//   .add("With Committer", () => <ChangesetRow repository={repository} changeset={two} />)
+//   .add("With Committer and Co-Author", () => <ChangesetRow repository={repository} changeset={one} />)
+//   .add("With multiple Co-Authors", () => <ChangesetRow repository={repository} changeset={four} />)
+//   .add("With avatar", () => {
+//     return withAvatarFactory(() => hitchhiker, three);
+//   })
+//   .add("Commiter and Co-Authors with avatar", () => {
+//     return withAvatarFactory(robohash, one);
+//   })
+//   .add("Co-Authors with avatar", () => {
+//     return withAvatarFactory(robohash, four);
+//   })
+//   .add("Replacements", () => {
+//     const link = <a href={"http://example.com/hog"}>HOG-42</a>;
+//     const mail = <a href={"mailto:hog@example.com"}>Arthur</a>;
+//     return withReplacements(
+//       [
+//         () => [{ textToReplace: "HOG-42", replacement: link }],
+//         () => [{ textToReplace: "arthur@guide.galaxy", replacement: mail }],
+//       ],
+//       five
+//     );
+//   })
+//   .add("With unknown signature", () => {
+//     const changeset = copy(three);
+//     changeset.signatures = [
+//       {
+//         keyId: "0x247E908C6FD35473",
+//         type: "gpg",
+//         status: "NOT_FOUND",
+//       },
+//     ];
+//     return <ChangesetRow repository={repository} changeset={changeset} />;
+//   })
+//   .add("With valid signature", () => {
+//     const changeset = copy(three);
+//     changeset.signatures = [
+//       {
+//         keyId: "0x247E908C6FD35473",
+//         type: "gpg",
+//         status: "VERIFIED",
+//         owner: "trillian",
+//         contacts: [
+//           {
+//             name: "Tricia Marie McMilla",
+//             mail: "trillian@hitchhiker.com",
+//           },
+//         ],
+//       },
+//     ];
+//     return <ChangesetRow repository={repository} changeset={changeset} />;
+//   })
+//   .add("With unowned signature", () => {
+//     const changeset = copy(three);
+//     changeset.signatures = [
+//       {
+//         keyId: "0x247E908C6FD35473",
+//         type: "gpg",
+//         status: "VERIFIED",
+//         contacts: [
+//           {
+//             name: "Tricia Marie McMilla",
+//             mail: "trillian@hitchhiker.com",
+//           },
+//         ],
+//       },
+//     ];
+//     return <ChangesetRow repository={repository} changeset={changeset} />;
+//   })
+//   .add("With contactless signature", () => {
+//     const changeset = copy(three);
+//     changeset.signatures = [
+//       {
+//         keyId: "0x247E908C6FD35473",
+//         type: "gpg",
+//         status: "VERIFIED",
+//         owner: "trillian",
+//       },
+//     ];
+//     return <ChangesetRow repository={repository} changeset={changeset} />;
+//   })
+//   .add("With invalid signature", () => {
+//     const changeset = copy(three);
+//     changeset.signatures = [
+//       {
+//         keyId: "0x247E908C6FD35473",
+//         type: "gpg",
+//         status: "INVALID",
+//         owner: "trillian",
+//         contacts: [
+//           {
+//             name: "Tricia Marie McMilla",
+//             mail: "trillian@hitchhiker.com",
+//           },
+//         ],
+//       },
+//     ];
+//     return <ChangesetRow repository={repository} changeset={changeset} />;
+//   })
+//   .add("With multiple signatures and invalid status", () => {
+//     const changeset = copy(three);
+//     changeset.signatures = [
+//       {
+//         keyId: "0x912389FJIQW8W223",
+//         type: "gpg",
+//         status: "INVALID",
+//         owner: "trillian",
+//         contacts: [
+//           {
+//             name: "Tricia Marie McMilla",
+//             mail: "trillian@hitchhiker.com",
+//           },
+//         ],
+//       },
+//       {
+//         keyId: "0x247E908C6FD35473",
+//         type: "gpg",
+//         status: "VERIFIED",
+//         owner: "trillian",
+//         contacts: [
+//           {
+//             name: "Tricia Marie McMilla",
+//             mail: "trillian@hitchhiker.com",
+//           },
+//         ],
+//       },
+//       {
+//         keyId: "0x9123891239VFIA33",
+//         type: "gpg",
+//         status: "NOT_FOUND",
+//         owner: "trillian",
+//         contacts: [
+//           {
+//             name: "Tricia Marie McMilla",
+//             mail: "trillian@hitchhiker.com",
+//           },
+//         ],
+//       },
+//     ];
+//     return <ChangesetRow repository={repository} changeset={changeset} />;
+//   })
+//   .add("With multiple signatures and valid status", () => {
+//     const changeset = copy(three);
+//     changeset.signatures = [
+//       {
+//         keyId: "0x912389FJIQW8W223",
+//         type: "gpg",
+//         status: "NOT_FOUND",
+//         owner: "trillian",
+//         contacts: [
+//           {
+//             name: "Tricia Marie McMilla",
+//             mail: "trillian@hitchhiker.com",
+//           },
+//         ],
+//       },
+//       {
+//         keyId: "0x247E908C6FD35473",
+//         type: "gpg",
+//         status: "VERIFIED",
+//         owner: "trillian",
+//         contacts: [
+//           {
+//             name: "Tricia Marie McMilla",
+//             mail: "trillian@hitchhiker.com",
+//           },
+//         ],
+//       },
+//       {
+//         keyId: "0x9123891239VFIA33",
+//         type: "gpg",
+//         status: "NOT_FOUND",
+//         owner: "trillian",
+//         contacts: [
+//           {
+//             name: "Tricia Marie McMilla",
+//             mail: "trillian@hitchhiker.com",
+//           },
+//         ],
+//       },
+//     ];
+//     return <ChangesetRow repository={repository} changeset={changeset} />;
+//   })
+//   .add("With multiple signatures and not found status", () => {
+//     const changeset = copy(three);
+//     changeset.signatures = [
+//       {
+//         keyId: "0x912389FJIQW8W223",
+//         type: "gpg",
+//         status: "NOT_FOUND",
+//         owner: "trillian",
+//         contacts: [
+//           {
+//             name: "Tricia Marie McMilla",
+//             mail: "trillian@hitchhiker.com",
+//           },
+//         ],
+//       },
+//       {
+//         keyId: "0x9123891239VFIA33",
+//         type: "gpg",
+//         status: "NOT_FOUND",
+//         owner: "trillian",
+//         contacts: [
+//           {
+//             name: "Tricia Marie McMilla",
+//             mail: "trillian@hitchhiker.com",
+//           },
+//         ],
+//       },
+//     ];
+//     return <ChangesetRow repository={repository} changeset={changeset} />;
+//   })
+//   .add("List with navigation", () => (
+//     <ShortcutDocsContextProvider>
+//       <ChangesetList repository={repository} changesets={[copy(one), copy(two), copy(three)]} />
+//     </ShortcutDocsContextProvider>
+//   ));
+
+import React from "react";
 import styled from "styled-components";
-import { MemoryRouter } from "react-router-dom";
-import repository from "../../__resources__/repository";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Binder, BinderContext } from "@scm-manager/ui-extensions";
+import { ShortcutDocsContextProvider } from "@scm-manager/ui-shortcuts";
+import { Changeset } from "@scm-manager/ui-types";
+import { Replacement } from "@scm-manager/ui-text";
+
 import ChangesetRow from "./ChangesetRow";
+import ChangesetList from "./ChangesetList";
+import repository from "../../__resources__/repository";
 import { five, four, one, three, two } from "../../__resources__/changesets";
-import { Binder, BinderContext } from "@scm-manager/ui-extensions";
 // @ts-ignore
 import hitchhiker from "../../__resources__/hitchhiker.png";
 import { Person } from "../../avatar/Avatar";
-import { Changeset } from "@scm-manager/ui-types";
-import { Replacement } from "@scm-manager/ui-text";
-import ChangesetList from "./ChangesetList";
-import { ShortcutDocsContextProvider } from "@scm-manager/ui-shortcuts";
+import { MemoryRouter } from "react-router-dom";
+
+// --- Helfer-Funktionen und Mock-Daten (aus der Original-Story übernommen) ---
 
 const Wrapper = styled.div`
-  margin: 25rem 4rem;
+  margin: 2rem 4rem;
 `;
 
-const robohash = (person: Person) => {
-  return `https://robohash.org/${person.mail}`;
-};
+const robohash = (person: Person) => `https://robohash.org/${person.mail}`;
 
 const withAvatarFactory = (factory: (person: Person) => string, changeset: Changeset) => {
   const binder = new Binder("changeset stories");
@@ -50,7 +325,7 @@ const withAvatarFactory = (factory: (person: Person) => string, changeset: Chang
 
 const withReplacements = (
   replacements: ((changeset: Changeset, value: string) => Replacement[])[],
-  changeset: Changeset
+  changeset: Changeset,
 ) => {
   const binder = new Binder("changeset stories");
   replacements.forEach((replacement) => binder.bind("changeset.description.tokens", replacement));
@@ -65,80 +340,79 @@ function copy<T>(input: T): T {
   return JSON.parse(JSON.stringify(input));
 }
 
-storiesOf("Repositories/Changesets", module)
-  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
-  .addDecorator((storyFn) => <Wrapper className="box box-link-shadow">{storyFn()}</Wrapper>)
-  .add("Default", () => <ChangesetRow repository={repository} changeset={three} />)
-  .add("With Committer", () => <ChangesetRow repository={repository} changeset={two} />)
-  .add("With Committer and Co-Author", () => <ChangesetRow repository={repository} changeset={one} />)
-  .add("With multiple Co-Authors", () => <ChangesetRow repository={repository} changeset={four} />)
-  .add("With avatar", () => {
-    return withAvatarFactory(() => hitchhiker, three);
-  })
-  .add("Commiter and Co-Authors with avatar", () => {
-    return withAvatarFactory(robohash, one);
-  })
-  .add("Co-Authors with avatar", () => {
-    return withAvatarFactory(robohash, four);
-  })
-  .add("Replacements", () => {
-    const link = <a href={"http://example.com/hog"}>HOG-42</a>;
-    const mail = <a href={"mailto:hog@example.com"}>Arthur</a>;
+// --- Storybook Metadaten ---
+
+const meta: Meta<typeof ChangesetRow> = {
+  title: "Repositories/Changesets",
+  component: ChangesetRow,
+  decorators: [
+    (Story) => <MemoryRouter initialEntries={["/"]}>{Story()}</MemoryRouter>,
+    (Story) => <Wrapper className="box box-link-shadow">{Story()}</Wrapper>,
+  ],
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+// --- Story-Definitionen ---
+
+type Story = StoryObj<typeof meta>;
+
+// Einfache Stories mit `args`
+export const Default: Story = {
+  args: { repository, changeset: three },
+};
+
+export const WithCommitter: Story = {
+  args: { repository, changeset: two },
+};
+
+export const WithCommitterAndCoAuthor: Story = {
+  args: { repository, changeset: one },
+};
+
+export const WithMultipleCoAuthors: Story = {
+  args: { repository, changeset: four },
+};
+
+// Komplexe Stories mit `render`
+export const WithAvatar: Story = {
+  render: () => withAvatarFactory(() => hitchhiker, three),
+};
+
+export const CommitterAndCoAuthorsWithAvatar: Story = {
+  render: () => withAvatarFactory(robohash, one),
+};
+
+export const CoAuthorsWithAvatar: Story = {
+  render: () => withAvatarFactory(robohash, four),
+};
+
+export const Replacements: Story = {
+  render: () => {
+    const link = <a href="http://example.com/hog">HOG-42</a>;
+    const mail = <a href="mailto:hog@example.com">Arthur</a>;
     return withReplacements(
       [
         () => [{ textToReplace: "HOG-42", replacement: link }],
         () => [{ textToReplace: "arthur@guide.galaxy", replacement: mail }],
       ],
-      five
+      five,
     );
-  })
-  .add("With unknown signature", () => {
-    const changeset = copy(three);
-    changeset.signatures = [
-      {
-        keyId: "0x247E908C6FD35473",
-        type: "gpg",
-        status: "NOT_FOUND",
-      },
-    ];
-    return <ChangesetRow repository={repository} changeset={changeset} />;
-  })
-  .add("With valid signature", () => {
+  },
+};
+
+// Stories für Signaturen
+export const WithUnknownSignature: Story = {
+  render: () => {
     const changeset = copy(three);
-    changeset.signatures = [
-      {
-        keyId: "0x247E908C6FD35473",
-        type: "gpg",
-        status: "VERIFIED",
-        owner: "trillian",
-        contacts: [
-          {
-            name: "Tricia Marie McMilla",
-            mail: "trillian@hitchhiker.com",
-          },
-        ],
-      },
-    ];
+    changeset.signatures = [{ keyId: "0x247E908C6FD35473", type: "gpg", status: "NOT_FOUND" }];
     return <ChangesetRow repository={repository} changeset={changeset} />;
-  })
-  .add("With unowned signature", () => {
-    const changeset = copy(three);
-    changeset.signatures = [
-      {
-        keyId: "0x247E908C6FD35473",
-        type: "gpg",
-        status: "VERIFIED",
-        contacts: [
-          {
-            name: "Tricia Marie McMilla",
-            mail: "trillian@hitchhiker.com",
-          },
-        ],
-      },
-    ];
-    return <ChangesetRow repository={repository} changeset={changeset} />;
-  })
-  .add("With contactless signature", () => {
+  },
+};
+
+export const WithValidSignature: Story = {
+  render: () => {
     const changeset = copy(three);
     changeset.signatures = [
       {
@@ -146,11 +420,15 @@ storiesOf("Repositories/Changesets", module)
         type: "gpg",
         status: "VERIFIED",
         owner: "trillian",
+        contacts: [{ name: "Tricia Marie McMilla", mail: "trillian@hitchhiker.com" }],
       },
     ];
     return <ChangesetRow repository={repository} changeset={changeset} />;
-  })
-  .add("With invalid signature", () => {
+  },
+};
+
+export const WithInvalidSignature: Story = {
+  render: () => {
     const changeset = copy(three);
     changeset.signatures = [
       {
@@ -158,132 +436,45 @@ storiesOf("Repositories/Changesets", module)
         type: "gpg",
         status: "INVALID",
         owner: "trillian",
-        contacts: [
-          {
-            name: "Tricia Marie McMilla",
-            mail: "trillian@hitchhiker.com",
-          },
-        ],
-      },
-    ];
-    return <ChangesetRow repository={repository} changeset={changeset} />;
-  })
-  .add("With multiple signatures and invalid status", () => {
-    const changeset = copy(three);
-    changeset.signatures = [
-      {
-        keyId: "0x912389FJIQW8W223",
-        type: "gpg",
-        status: "INVALID",
-        owner: "trillian",
-        contacts: [
-          {
-            name: "Tricia Marie McMilla",
-            mail: "trillian@hitchhiker.com",
-          },
-        ],
-      },
-      {
-        keyId: "0x247E908C6FD35473",
-        type: "gpg",
-        status: "VERIFIED",
-        owner: "trillian",
-        contacts: [
-          {
-            name: "Tricia Marie McMilla",
-            mail: "trillian@hitchhiker.com",
-          },
-        ],
-      },
-      {
-        keyId: "0x9123891239VFIA33",
-        type: "gpg",
-        status: "NOT_FOUND",
-        owner: "trillian",
-        contacts: [
-          {
-            name: "Tricia Marie McMilla",
-            mail: "trillian@hitchhiker.com",
-          },
-        ],
+        contacts: [{ name: "Tricia Marie McMilla", mail: "trillian@hitchhiker.com" }],
       },
     ];
     return <ChangesetRow repository={repository} changeset={changeset} />;
-  })
-  .add("With multiple signatures and valid status", () => {
+  },
+};
+
+export const WithMultipleSignaturesInvalid: Story = {
+  name: "With Multiple Signatures (Invalid Status)",
+  render: () => {
     const changeset = copy(three);
     changeset.signatures = [
-      {
-        keyId: "0x912389FJIQW8W223",
-        type: "gpg",
-        status: "NOT_FOUND",
-        owner: "trillian",
-        contacts: [
-          {
-            name: "Tricia Marie McMilla",
-            mail: "trillian@hitchhiker.com",
-          },
-        ],
-      },
-      {
-        keyId: "0x247E908C6FD35473",
-        type: "gpg",
-        status: "VERIFIED",
-        owner: "trillian",
-        contacts: [
-          {
-            name: "Tricia Marie McMilla",
-            mail: "trillian@hitchhiker.com",
-          },
-        ],
-      },
-      {
-        keyId: "0x9123891239VFIA33",
-        type: "gpg",
-        status: "NOT_FOUND",
-        owner: "trillian",
-        contacts: [
-          {
-            name: "Tricia Marie McMilla",
-            mail: "trillian@hitchhiker.com",
-          },
-        ],
-      },
+      { keyId: "0x912389FJIQW8W223", type: "gpg", status: "INVALID", owner: "trillian" },
+      { keyId: "0x247E908C6FD35473", type: "gpg", status: "VERIFIED", owner: "trillian" },
+      { keyId: "0x9123891239VFIA33", type: "gpg", status: "NOT_FOUND", owner: "trillian" },
     ];
     return <ChangesetRow repository={repository} changeset={changeset} />;
-  })
-  .add("With multiple signatures and not found status", () => {
+  },
+};
+
+export const WithMultipleSignaturesValid: Story = {
+  name: "With Multiple Signatures (Valid Status)",
+  render: () => {
     const changeset = copy(three);
     changeset.signatures = [
-      {
-        keyId: "0x912389FJIQW8W223",
-        type: "gpg",
-        status: "NOT_FOUND",
-        owner: "trillian",
-        contacts: [
-          {
-            name: "Tricia Marie McMilla",
-            mail: "trillian@hitchhiker.com",
-          },
-        ],
-      },
-      {
-        keyId: "0x9123891239VFIA33",
-        type: "gpg",
-        status: "NOT_FOUND",
-        owner: "trillian",
-        contacts: [
-          {
-            name: "Tricia Marie McMilla",
-            mail: "trillian@hitchhiker.com",
-          },
-        ],
-      },
+      { keyId: "0x912389FJIQW8W223", type: "gpg", status: "NOT_FOUND", owner: "trillian" },
+      { keyId: "0x247E908C6FD35473", type: "gpg", status: "VERIFIED", owner: "trillian" },
+      { keyId: "0x9123891239VFIA33", type: "gpg", status: "NOT_FOUND", owner: "trillian" },
     ];
     return <ChangesetRow repository={repository} changeset={changeset} />;
-  })
-  .add("List with navigation", () => (
+  },
+};
+
+// Story für die ChangesetList
+export const ListWithNavigation: Story = {
+  name: "List With Navigation",
+  render: () => (
     <ShortcutDocsContextProvider>
       <ChangesetList repository={repository} changesets={[copy(one), copy(two), copy(three)]} />
     </ShortcutDocsContextProvider>
-  ));
+  ),
+};

package/src/repos/changesets/ContributorRow.tsx

@@ -14,14 +14,14 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC } from "react";
+import React, { FC, ReactNode } from "react";
 import styled from "styled-components";
 
 const SizedTd = styled.td`
   width: 10rem;
 `;
 
-const ContributorRow: FC<{ label: string }> = ({ label, children }) => {
+const ContributorRow: FC<{ label: string; children?: ReactNode }> = ({ label, children }) => {
   return (
     <tr key={label}>
       <SizedTd>{label}:</SizedTd>

package/src/repos/changesets/SignatureIcon.tsx

@@ -125,6 +125,7 @@ const SignatureIcon: FC<Props> = ({ signatures, className }) => {
       >
         <StyledDiv>{signatureElements}</StyledDiv>
       </Popover>
+      {/* @ts-ignore */}
       <div {...triggerProps}>
         <StyledIcon name="key" className={className} color={getColor(signatures)} />
       </div>

package/src/repos/diff/DiffFileTree.tsx

@@ -149,7 +149,7 @@ const TreeFile: FC<FileProps> = ({ changeType, path, parentPath, currentFile, se
             "is-relative",
             isCurrentFile() ? "has-text-secondary-least" : `has-text-${getColor(changeType)}`
           )}
-          isSmaller={getIcon(changeType) === "circle"}
+          issmaller={getIcon(changeType) === "circle" ? "true" : "false"}
           key={changeType}
           alt={t(`diff.changes.${changeType}`)}
         >