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

package/src/repos/Diff.tsx

@@ -19,7 +19,7 @@ import DiffFile from "./DiffFile";
 import { DiffObjectProps, FileControlFactory } from "./DiffTypes";
 import { FileDiff } from "@scm-manager/ui-types";
 import { getAnchorSelector, getFileNameFromHash } from "./diffs";
-import Notification from "../Notification";
+import { Notification } from "@scm-manager/ui-core";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import { useScrollToElementWithCallback } from "../useScrollToElement";
@@ -119,8 +119,4 @@ const Diff: FC<Props> = ({
   );
 };
 
-Diff.defaultProps = {
-  sideBySide: false,
-};
-
 export default Diff;

package/src/repos/HunkExpandDivider.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";
 // @ts-ignore
 import { Decoration } from "react-diff-view";
 import styled from "styled-components";
@@ -26,7 +26,7 @@ const HunkDivider = styled.div`
   } ;
 `;
 
-const HunkExpandDivider: FC = ({ children }) => {
+const HunkExpandDivider: FC<{ children: ReactNode }> = ({ children }) => {
   return (
     <Decoration>
       <HunkDivider className="is-size-7 pl-5">{children}</HunkDivider>

package/src/repos/LoadingDiff.tsx

@@ -47,6 +47,9 @@ type NotificationProps = {
   isFetchingNextPage: boolean;
 };
 
+const DEFAULT_LIMIT = 25;
+const DEFAULT_REFETCH_ON_WINDOW_FOCUS = true;
+
 const PartialNotification: FC<NotificationProps> = ({ fetchNextPage, isFetchingNextPage }) => {
   const [t] = useTranslation("repos");
 
@@ -61,6 +64,13 @@ const PartialNotification: FC<NotificationProps> = ({ fetchNextPage, isFetchingN
 };
 
 const LoadingDiff: FC<Props> = ({ url, limit, refetchOnWindowFocus, ...props }) => {
+  if (limit == undefined) {
+    limit = DEFAULT_LIMIT;
+  }
+  if (refetchOnWindowFocus == undefined) {
+    refetchOnWindowFocus = DEFAULT_REFETCH_ON_WINDOW_FOCUS;
+  }
+
   const [ignoreWhitespace, setIgnoreWhitespace] = useState<WhitespaceMode>("NONE");
   const [layout, setLayout] = useLayoutState();
   const [collapsed, setCollapsed] = useState(false);
@@ -150,12 +160,7 @@ const LoadingDiff: FC<Props> = ({ url, limit, refetchOnWindowFocus, ...props })
       </>
     );
   }
-};
+}
 
-LoadingDiff.defaultProps = {
-  limit: 25,
-  sideBySide: false,
-  refetchOnWindowFocus: true,
-};
 
 export default LoadingDiff;

package/src/repos/RepositoryEntry.stories.tsx

@@ -14,19 +14,146 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import { storiesOf } from "@storybook/react";
+// import { storiesOf } from "@storybook/react";
+// import React, { FC, ReactNode } from "react";
+// import styled from "styled-components";
+// import repository from "../__resources__/repository";
+// // @ts-ignore ignore unknown png
+// import Git from "../__resources__/git-logo.png";
+// import RepositoryEntry from "./RepositoryEntry";
+// import { Binder, BinderContext } from "@scm-manager/ui-extensions";
+// import { Repository } from "@scm-manager/ui-types";
+// import Image from "../Image";
+// import { MemoryRouter } from "react-router-dom";
+// import { Color } from "../styleConstants";
+// import RepositoryFlag from "./RepositoryFlag";
+//
+// const baseDate = "2020-03-26T12:13:42+02:00";
+//
+// const Spacing = styled.div`
+//   margin: 2rem;
+// `;
+//
+// const Container: FC<{ children: ReactNode }> = ({ children }) => <Spacing>{children}</Spacing>;
+//
+// const bindAvatar = (binder: Binder, avatar: string) => {
+//   binder.bind("repos.repository-avatar", () => {
+//     return <Image src={avatar} alt="Logo" />;
+//   });
+// };
+//
+// const bindFlag = (binder: Binder, color: Color, label: string) => {
+//   binder.bind("repository.card.flags", () => (
+//     <RepositoryFlag title={label} color={color} tooltipLocation="right">
+//       {label}
+//     </RepositoryFlag>
+//   ));
+// };
+//
+// const bindBeforeTitle = (binder: Binder, extension: ReactNode) => {
+//   binder.bind("repository.card.beforeTitle", () => {
+//     return extension;
+//   });
+// };
+//
+// const withBinder = (binder: Binder, repo: Repository) => {
+//   return (
+//     <BinderContext.Provider value={binder}>
+//       <RepositoryEntry repository={repo} baseDate={baseDate} />
+//     </BinderContext.Provider>
+//   );
+// };
+//
+// const archivedRepository = { ...repository, archived: true };
+// const exportingRepository = { ...repository, exporting: true };
+// const longTextRepository = {
+//   ...repository,
+//   name: "veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery-loooooooooooooooooooooooooooooooooooooooooooooooooooong-repooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo-naaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaame",
+//   description:
+//     "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
+// };
+// const healthCheckFailedRepository = {
+//   ...repository,
+//   healthCheckFailures: [
+//     {
+//       id: "4211",
+//       summary: "Something failed",
+//       description: "Something realy bad happend",
+//       url: "https://something-realy-bad.happend",
+//     },
+//   ],
+// };
+// const archivedExportingRepository = {
+//   ...repository,
+//   archived: true,
+//   exporting: true,
+//   description:
+//     "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
+// };
+//
+// storiesOf("Repositories/RepositoryEntry", module)
+//   .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+//   .addDecorator((storyFn) => <Container>{storyFn()}</Container>)
+//   .add("Default", () => {
+//     return <RepositoryEntry repository={repository} baseDate={baseDate} />;
+//   })
+//   .add("Avatar EP", () => {
+//     const binder = new Binder("avatar");
+//     bindAvatar(binder, Git);
+//     return withBinder(binder, repository);
+//   })
+//   .add("Before Title EP", () => {
+//     const binder = new Binder("title");
+//     bindBeforeTitle(binder, <i className="far fa-star" />);
+//     return withBinder(binder, repository);
+//   })
+//   .add("Archived", () => {
+//     const binder = new Binder("title");
+//     bindAvatar(binder, Git);
+//     return withBinder(binder, archivedRepository);
+//   })
+//   .add("Exporting", () => {
+//     const binder = new Binder("title");
+//     bindAvatar(binder, Git);
+//     return withBinder(binder, exportingRepository);
+//   })
+//   .add("HealthCheck Failure", () => {
+//     const binder = new Binder("title");
+//     bindAvatar(binder, Git);
+//     return withBinder(binder, healthCheckFailedRepository);
+//   })
+//   .add("RepositoryFlag EP", () => {
+//     const binder = new Binder("title");
+//     bindAvatar(binder, Git);
+//     bindFlag(binder, "success", "awesome");
+//     bindFlag(binder, "warning", "ouhhh...");
+//     return withBinder(binder, healthCheckFailedRepository);
+//   })
+//   .add("MultiRepositoryTags", () => {
+//     const binder = new Binder("title");
+//     bindAvatar(binder, Git);
+//     return withBinder(binder, archivedExportingRepository);
+//   })
+//   .add("With long texts", () => {
+//     return <RepositoryEntry repository={longTextRepository} baseDate={baseDate} />;
+//   });
+
 import React, { FC, ReactNode } from "react";
 import styled from "styled-components";
-import repository from "../__resources__/repository";
-// @ts-ignore ignore unknown png
-import Git from "../__resources__/git-logo.png";
-import RepositoryEntry from "./RepositoryEntry";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Binder, BinderContext } from "@scm-manager/ui-extensions";
 import { Repository } from "@scm-manager/ui-types";
+
+import RepositoryEntry from "./RepositoryEntry";
+import RepositoryFlag from "./RepositoryFlag";
 import Image from "../Image";
-import { MemoryRouter } from "react-router-dom";
 import { Color } from "../styleConstants";
-import RepositoryFlag from "./RepositoryFlag";
+import repository from "../__resources__/repository";
+// @ts-ignore ignore unknown png
+import Git from "../__resources__/git-logo.png";
+import { MemoryRouter } from "react-router-dom";
+
+// --- Helfer-Funktionen und Mock-Daten (aus der Original-Story übernommen) ---
 
 const baseDate = "2020-03-26T12:13:42+02:00";
 
@@ -34,12 +161,10 @@ const Spacing = styled.div`
   margin: 2rem;
 `;
 
-const Container: FC = ({ children }) => <Spacing>{children}</Spacing>;
+const Container: FC<{ children: ReactNode }> = ({ children }) => <Spacing>{children}</Spacing>;
 
 const bindAvatar = (binder: Binder, avatar: string) => {
-  binder.bind("repos.repository-avatar", () => {
-    return <Image src={avatar} alt="Logo" />;
-  });
+  binder.bind("repos.repository-avatar", () => <Image src={avatar} alt="Logo" />);
 };
 
 const bindFlag = (binder: Binder, color: Color, label: string) => {
@@ -51,26 +176,21 @@ const bindFlag = (binder: Binder, color: Color, label: string) => {
 };
 
 const bindBeforeTitle = (binder: Binder, extension: ReactNode) => {
-  binder.bind("repository.card.beforeTitle", () => {
-    return extension;
-  });
+  binder.bind("repository.card.beforeTitle", () => extension);
 };
 
-const withBinder = (binder: Binder, repo: Repository) => {
-  return (
-    <BinderContext.Provider value={binder}>
-      <RepositoryEntry repository={repo} baseDate={baseDate} />
-    </BinderContext.Provider>
-  );
-};
+const withBinder = (binder: Binder, repo: Repository) => (
+  <BinderContext.Provider value={binder}>
+    <RepositoryEntry repository={repo} baseDate={baseDate} />
+  </BinderContext.Provider>
+);
 
 const archivedRepository = { ...repository, archived: true };
 const exportingRepository = { ...repository, exporting: true };
 const longTextRepository = {
   ...repository,
   name: "veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery-loooooooooooooooooooooooooooooooooooooooooooooooooooong-repooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo-naaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaame",
-  description:
-    "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
+  description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt...",
 };
 const healthCheckFailedRepository = {
   ...repository,
@@ -87,53 +207,97 @@ const archivedExportingRepository = {
   ...repository,
   archived: true,
   exporting: true,
-  description:
-    "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
+  description: "Lorem ipsum dolor sit amet...",
+};
+
+const meta: Meta<typeof RepositoryEntry> = {
+  title: "Repositories/RepositoryEntry",
+  component: RepositoryEntry,
+  decorators: [
+    (Story) => <MemoryRouter initialEntries={["/"]}>{Story()}</MemoryRouter>,
+    (Story) => <Container>{Story()}</Container>],
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    repository: repository,
+    baseDate: baseDate,
+  },
+};
+
+export const WithLongTexts: Story = {
+  name: "With Long Texts",
+  args: {
+    repository: longTextRepository,
+    baseDate: baseDate,
+  },
 };
 
-storiesOf("Repositories/RepositoryEntry", module)
-  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
-  .addDecorator((storyFn) => <Container>{storyFn()}</Container>)
-  .add("Default", () => {
-    return <RepositoryEntry repository={repository} baseDate={baseDate} />;
-  })
-  .add("Avatar EP", () => {
+// Stories, die den BinderContext verwenden, nutzen eine `render`-Funktion
+export const WithAvatarExtension: Story = {
+  name: "With Avatar Extension",
+  render: () => {
     const binder = new Binder("avatar");
     bindAvatar(binder, Git);
     return withBinder(binder, repository);
-  })
-  .add("Before Title EP", () => {
+  },
+};
+
+export const WithBeforeTitleExtension: Story = {
+  name: "With Before Title Extension",
+  render: () => {
     const binder = new Binder("title");
     bindBeforeTitle(binder, <i className="far fa-star" />);
     return withBinder(binder, repository);
-  })
-  .add("Archived", () => {
-    const binder = new Binder("title");
+  },
+};
+
+export const Archived: Story = {
+  render: () => {
+    const binder = new Binder("archived");
     bindAvatar(binder, Git);
     return withBinder(binder, archivedRepository);
-  })
-  .add("Exporting", () => {
-    const binder = new Binder("title");
+  },
+};
+
+export const Exporting: Story = {
+  render: () => {
+    const binder = new Binder("exporting");
     bindAvatar(binder, Git);
     return withBinder(binder, exportingRepository);
-  })
-  .add("HealthCheck Failure", () => {
-    const binder = new Binder("title");
+  },
+};
+
+export const WithHealthCheckFailure: Story = {
+  name: "With Health Check Failure",
+  render: () => {
+    const binder = new Binder("healthCheck");
     bindAvatar(binder, Git);
     return withBinder(binder, healthCheckFailedRepository);
-  })
-  .add("RepositoryFlag EP", () => {
-    const binder = new Binder("title");
+  },
+};
+
+export const WithRepositoryFlagExtension: Story = {
+  name: "With Repository Flag Extension",
+  render: () => {
+    const binder = new Binder("flags");
     bindAvatar(binder, Git);
     bindFlag(binder, "success", "awesome");
     bindFlag(binder, "warning", "ouhhh...");
     return withBinder(binder, healthCheckFailedRepository);
-  })
-  .add("MultiRepositoryTags", () => {
-    const binder = new Binder("title");
+  },
+};
+
+export const WithMultipleRepositoryTags: Story = {
+  name: "With Multiple Repository Tags",
+  render: () => {
+    const binder = new Binder("multiTags");
     bindAvatar(binder, Git);
     return withBinder(binder, archivedExportingRepository);
-  })
-  .add("With long texts", () => {
-    return <RepositoryEntry repository={longTextRepository} baseDate={baseDate} />;
-  });
+  },
+};

package/src/repos/RepositoryFlag.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 { Color, Size } from "../styleConstants";
 import { Card } from "@scm-manager/ui-layout";
 import { CardVariant } from "@scm-manager/ui-core";
@@ -28,6 +28,7 @@ type Props = {
   size?: Size;
   tooltipLocation: TooltipLocation;
   variant?: CardVariant;
+  children?: ReactNode;
 };
 
 const RepositoryFlag: FC<Props> = ({

package/src/repos/TokenizedDiffView.tsx

@@ -14,11 +14,12 @@
  * 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";
 // @ts-ignore we have no typings for react-diff-view
 import { Diff, useTokenizeWorker } from "react-diff-view";
-import { FileDiff } from "@scm-manager/ui-types";
+import { FileDiff, Hunk as HunkType } from "@scm-manager/ui-types";
+
 import { determineLanguage } from "../languages";
 import { useSyntaxHighlightingWorker } from "@scm-manager/ui-syntaxhighlighting";
 
@@ -67,6 +68,7 @@ type Props = {
   viewType: "split" | "unified";
   className?: string;
   whitespace: boolean;
+  children?: ReactNode | ((hunks: HunkType[]) => ReactNode);
 };
 
 const findSyntaxHighlightingLanguage = (file: FileDiff) => {