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

package/src/markdown/MarkdownView.stories.tsx

@@ -14,10 +14,136 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
+// import React, { FC } from "react";
+// import { storiesOf } from "@storybook/react";
+// import MarkdownView from "./MarkdownView";
+// import styled from "styled-components";
+//
+// import TestPage from "../__resources__/test-page.md";
+// import MarkdownWithoutLang from "../__resources__/markdown-without-lang.md";
+// import MarkdownXmlCodeBlock from "../__resources__/markdown-xml-codeblock.md";
+// import MarkdownUmlCodeBlock from "../__resources__/markdown-uml-codeblock.md";
+// import MarkdownInlineXml from "../__resources__/markdown-inline-xml.md";
+// import MarkdownLinks from "../__resources__/markdown-links.md";
+// import MarkdownImages from "../__resources__/markdown-images.md";
+// import MarkdownCommitLinks from "../__resources__/markdown-commit-link.md";
+// import MarkdownXss from "../__resources__/markdown-xss.md";
+// import MarkdownChangelog from "../__resources__/markdown-changelog.md";
+// import Title from "../layout/Title";
+// import { Subtitle } from "../layout";
+// import { MemoryRouter } from "react-router-dom";
+// import { Binder, BinderContext, extensionPoints } from "@scm-manager/ui-extensions";
+// import { ProtocolLinkRendererProps } from "./markdownExtensions";
+// import { RepositoryContextProvider, RepositoryRevisionContextProvider } from "@scm-manager/ui-api";
+//
+// const Spacing = styled.div`
+//   padding: 2em;
+// `;
+//
+// storiesOf("MarkdownView", module)
+//   .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+//   .addDecorator(story => <Spacing>{story()}</Spacing>)
+//   // Add async parameter, because the tests needs to render async before snapshot is taken so that
+//   // code fragments get highlighted properly
+//   .addParameters({ storyshots: { async: true } })
+//   .add("Default", () => <MarkdownView content={TestPage} skipHtml={false} />)
+//   .add("Skip Html", () => <MarkdownView content={TestPage} skipHtml={true} />)
+//   .add("Code without Lang", () => <MarkdownView content={MarkdownWithoutLang} skipHtml={false} />)
+//   .add("Xml Code Block", () => <MarkdownView content={MarkdownXmlCodeBlock} />)
+//   .add("Inline Xml", () => (
+//     <>
+//       <Title title="Inline Xml" />
+//       <Subtitle subtitle="Inline xml outside of a code block is not supported" />
+//       <MarkdownView content={MarkdownInlineXml} />
+//     </>
+//   ))
+//   .add("Links", () => {
+//     const binder = new Binder("custom protocol link renderer");
+//     binder.bind<extensionPoints.MarkdownLinkProtocolRenderer<"scw">>("markdown-renderer.link.protocol", {
+//       protocol: "scw",
+//       renderer: ProtocolLinkRenderer
+//     });
+//     return (
+//       <BinderContext.Provider value={binder}>
+//         <MarkdownView content={MarkdownLinks} basePath="/scm/" />
+//       </BinderContext.Provider>
+//     );
+//   })
+//   .add("Links without Base Path", () => {
+//     const binder = new Binder("custom protocol link renderer");
+//     binder.bind<extensionPoints.MarkdownLinkProtocolRenderer<"scw">>("markdown-renderer.link.protocol", {
+//       protocol: "scw",
+//       renderer: ProtocolLinkRenderer
+//     });
+//     return (
+//       <BinderContext.Provider value={binder}>
+//         <MarkdownView content={MarkdownLinks} />
+//       </BinderContext.Provider>
+//     );
+//   })
+//   .add("Header Anchor Links", () => (
+//     <MarkdownView
+//       content={MarkdownChangelog}
+//       basePath={"/"}
+//       permalink={"/?path=/story/markdownview--header-anchor-links"}
+//       enableAnchorHeadings={true}
+//     />
+//   ))
+//   .add("Commit Links", () => <MarkdownView content={MarkdownCommitLinks} />)
+//   .add("Custom code renderer", () => {
+//     const binder = new Binder("custom code renderer");
+//     const Container: FC<{ value: string }> = ({ value }) => {
+//       return (
+//         <div>
+//           <h4 style={{ border: "1px dashed lightgray", padding: "2px" }}>
+//             To render plantuml as images within markdown, please install the scm-markdown-plantuml-plugin
+//           </h4>
+//           <pre>{value}</pre>
+//         </div>
+//       );
+//     };
+//     binder.bind<extensionPoints.MarkdownCodeRenderer<"uml">>("markdown-renderer.code.uml", Container);
+//     return (
+//       <BinderContext.Provider value={binder}>
+//         <MarkdownView content={MarkdownUmlCodeBlock} />
+//       </BinderContext.Provider>
+//     );
+//   })
+//   .add("XSS Prevention", () => <MarkdownView content={MarkdownXss} skipHtml={false} />)
+//   .add("Images", () => (
+//     <RepositoryContextProvider
+//       // @ts-ignore We do not need a valid repository here, only one with a content link
+//       repository={{
+//         _links: { content: { href: "https://my.scm/scm/api/v2/some/repository/content/{revision}/{path}" } }
+//       }}
+//     >
+//       <RepositoryRevisionContextProvider revision={"42"}>
+//         <MarkdownView basePath={"/scm/"} content={MarkdownImages} />
+//       </RepositoryRevisionContextProvider>
+//     </RepositoryContextProvider>
+//   ));
+//
+// export const ProtocolLinkRenderer: FC<ProtocolLinkRendererProps<"scw">> = ({ protocol, href, children }) => {
+//   return (
+//     <div style={{ border: "1px dashed lightgray", padding: "2px" }}>
+//       <h4>
+//         Link: {href} [Protocol: {protocol}]
+//       </h4>
+//       <div>children: {children}</div>
+//     </div>
+//   );
+// };
+
 import React, { FC } from "react";
-import { storiesOf } from "@storybook/react";
-import MarkdownView from "./MarkdownView";
 import styled from "styled-components";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Binder, BinderContext, extensionPoints } from "@scm-manager/ui-extensions";
+import { RepositoryContextProvider, RepositoryRevisionContextProvider } from "@scm-manager/ui-api";
+
+import MarkdownView from "./MarkdownView";
+import Title from "../layout/Title";
+import { Subtitle } from "../layout";
+import { ProtocolLinkRendererProps } from "./markdownExtensions";
 
 import TestPage from "../__resources__/test-page.md";
 import MarkdownWithoutLang from "../__resources__/markdown-without-lang.md";
@@ -29,107 +155,133 @@ import MarkdownImages from "../__resources__/markdown-images.md";
 import MarkdownCommitLinks from "../__resources__/markdown-commit-link.md";
 import MarkdownXss from "../__resources__/markdown-xss.md";
 import MarkdownChangelog from "../__resources__/markdown-changelog.md";
-import Title from "../layout/Title";
-import { Subtitle } from "../layout";
 import { MemoryRouter } from "react-router-dom";
-import { Binder, BinderContext, extensionPoints } from "@scm-manager/ui-extensions";
-import { ProtocolLinkRendererProps } from "./markdownExtensions";
-import { RepositoryContextProvider, RepositoryRevisionContextProvider } from "@scm-manager/ui-api";
+
+// --- Helfer-Komponenten und Mock-Daten (aus der Original-Story übernommen) ---
 
 const Spacing = styled.div`
   padding: 2em;
 `;
 
-storiesOf("MarkdownView", module)
-  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
-  .addDecorator(story => <Spacing>{story()}</Spacing>)
-  // Add async parameter, because the tests needs to render async before snapshot is taken so that
-  // code fragments get highlighted properly
-  .addParameters({ storyshots: { async: true } })
-  .add("Default", () => <MarkdownView content={TestPage} skipHtml={false} />)
-  .add("Skip Html", () => <MarkdownView content={TestPage} skipHtml={true} />)
-  .add("Code without Lang", () => <MarkdownView content={MarkdownWithoutLang} skipHtml={false} />)
-  .add("Xml Code Block", () => <MarkdownView content={MarkdownXmlCodeBlock} />)
-  .add("Inline Xml", () => (
+const ProtocolLinkRenderer: FC<ProtocolLinkRendererProps<"scw">> = ({ protocol, href, children }) => (
+  <div style={{ border: "1px dashed lightgray", padding: "2px" }}>
+    <h4>
+      Link: {href} [Protocol: {protocol}]
+    </h4>
+    <div>children: {children}</div>
+  </div>
+);
+
+// --- Storybook Metadaten ---
+
+const meta: Meta<typeof MarkdownView> = {
+  title: "Global/MarkdownView",
+  component: MarkdownView,
+  decorators: [
+    (Story) => <MemoryRouter initialEntries={["/"]}>{Story()}</MemoryRouter>,
+    (Story) => <Spacing>{Story()}</Spacing>],
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+// --- Story-Definitionen ---
+
+type Story = StoryObj<typeof meta>;
+
+// Einfache Stories, die `args` verwenden
+export const Default: Story = {
+  args: { content: TestPage, skipHtml: false },
+};
+
+export const SkipHtml: Story = {
+  args: { content: TestPage, skipHtml: true },
+};
+
+export const CodeWithoutLanguage: Story = {
+  name: "Code Without Language",
+  args: { content: MarkdownWithoutLang, skipHtml: false },
+};
+
+export const XmlCodeBlock: Story = {
+  args: { content: MarkdownXmlCodeBlock },
+};
+
+export const CommitLinks: Story = {
+  args: { content: MarkdownCommitLinks },
+};
+
+export const HeaderAnchorLinks: Story = {
+  args: {
+    content: MarkdownChangelog,
+    basePath: "/",
+    permalink: "/?path=/story/markdownview--header-anchor-links",
+    enableAnchorHeadings: true,
+  },
+};
+
+export const XSSPrevention: Story = {
+  args: { content: MarkdownXss, skipHtml: false },
+};
+
+// Komplexe Stories, die eine `render`-Funktion benötigen
+export const InlineXml: Story = {
+  render: () => (
     <>
       <Title title="Inline Xml" />
       <Subtitle subtitle="Inline xml outside of a code block is not supported" />
       <MarkdownView content={MarkdownInlineXml} />
     </>
-  ))
-  .add("Links", () => {
+  ),
+};
+
+export const Links: Story = {
+  render: () => {
     const binder = new Binder("custom protocol link renderer");
     binder.bind<extensionPoints.MarkdownLinkProtocolRenderer<"scw">>("markdown-renderer.link.protocol", {
       protocol: "scw",
-      renderer: ProtocolLinkRenderer
+      renderer: ProtocolLinkRenderer,
     });
     return (
       <BinderContext.Provider value={binder}>
         <MarkdownView content={MarkdownLinks} basePath="/scm/" />
       </BinderContext.Provider>
     );
-  })
-  .add("Links without Base Path", () => {
-    const binder = new Binder("custom protocol link renderer");
-    binder.bind<extensionPoints.MarkdownLinkProtocolRenderer<"scw">>("markdown-renderer.link.protocol", {
-      protocol: "scw",
-      renderer: ProtocolLinkRenderer
-    });
-    return (
-      <BinderContext.Provider value={binder}>
-        <MarkdownView content={MarkdownLinks} />
-      </BinderContext.Provider>
-    );
-  })
-  .add("Header Anchor Links", () => (
-    <MarkdownView
-      content={MarkdownChangelog}
-      basePath={"/"}
-      permalink={"/?path=/story/markdownview--header-anchor-links"}
-      enableAnchorHeadings={true}
-    />
-  ))
-  .add("Commit Links", () => <MarkdownView content={MarkdownCommitLinks} />)
-  .add("Custom code renderer", () => {
+  },
+};
+
+export const CustomCodeRenderer: Story = {
+  name: "Custom Code Renderer (UML)",
+  render: () => {
     const binder = new Binder("custom code renderer");
-    const Container: FC<{ value: string }> = ({ value }) => {
-      return (
-        <div>
-          <h4 style={{ border: "1px dashed lightgray", padding: "2px" }}>
-            To render plantuml as images within markdown, please install the scm-markdown-plantuml-plugin
-          </h4>
-          <pre>{value}</pre>
-        </div>
-      );
-    };
+    const Container: FC<{ value: string }> = ({ value }) => (
+      <div>
+        <h4 style={{ border: "1px dashed lightgray", padding: "2px" }}>
+          To render plantuml as images within markdown, please install the scm-markdown-plantuml-plugin
+        </h4>
+        <pre>{value}</pre>
+      </div>
+    );
     binder.bind<extensionPoints.MarkdownCodeRenderer<"uml">>("markdown-renderer.code.uml", Container);
     return (
       <BinderContext.Provider value={binder}>
         <MarkdownView content={MarkdownUmlCodeBlock} />
       </BinderContext.Provider>
     );
-  })
-  .add("XSS Prevention", () => <MarkdownView content={MarkdownXss} skipHtml={false} />)
-  .add("Images", () => (
+  },
+};
+
+export const Images: Story = {
+  render: () => (
     <RepositoryContextProvider
-      // @ts-ignore We do not need a valid repository here, only one with a content link
+      // @ts-ignore We do not need a valid repository here
       repository={{
-        _links: { content: { href: "https://my.scm/scm/api/v2/some/repository/content/{revision}/{path}" } }
+        _links: { content: { href: "https://my.scm/scm/api/v2/some/repository/content/{revision}/{path}" } },
       }}
     >
-      <RepositoryRevisionContextProvider revision={"42"}>
-        <MarkdownView basePath={"/scm/"} content={MarkdownImages} />
+      <RepositoryRevisionContextProvider revision="42">
+        <MarkdownView basePath="/scm/" content={MarkdownImages} />
       </RepositoryRevisionContextProvider>
     </RepositoryContextProvider>
-  ));
-
-export const ProtocolLinkRenderer: FC<ProtocolLinkRendererProps<"scw">> = ({ protocol, href, children }) => {
-  return (
-    <div style={{ border: "1px dashed lightgray", padding: "2px" }}>
-      <h4>
-        Link: {href} [Protocol: {protocol}]
-      </h4>
-      <div>children: {children}</div>
-    </div>
-  );
+  ),
 };

package/src/markdown/markdownExtensions.ts

@@ -15,17 +15,19 @@
  */
 
 import { extensionPoints } from "@scm-manager/ui-extensions";
-import { ComponentProps } from "react";
+import { ComponentProps, FC, ReactNode } from "react";
+
+type WithChildren<T> = T extends FC<infer P> ? FC<P & { children?: ReactNode }> : never;
 
 export type ProtocolLinkRendererProps<Protocol extends string | undefined = undefined> = ComponentProps<
-  extensionPoints.MarkdownLinkProtocolRenderer<Protocol>["type"]["renderer"]
+  WithChildren<extensionPoints.MarkdownLinkProtocolRenderer<Protocol>["type"]["renderer"]>
 >;
 
 /**
  * @deprecated use {@link MarkdownLinkProtocolRenderer}`["type"]` instead
  */
-export type ProtocolLinkRendererExtension = extensionPoints.MarkdownLinkProtocolRenderer["type"];
+export type ProtocolLinkRendererExtension = WithChildren<extensionPoints.MarkdownLinkProtocolRenderer["type"]>;
 
 export type ProtocolLinkRendererExtensionMap = {
-  [protocol: string]: extensionPoints.MarkdownLinkProtocolRenderer["type"]["renderer"] | undefined;
+  [protocol: string]: WithChildren<extensionPoints.MarkdownLinkProtocolRenderer["type"]["renderer"]> | undefined;
 };

package/src/modals/ConfirmAlert.stories.tsx

@@ -14,64 +14,153 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import { storiesOf } from "@storybook/react";
-import { MemoryRouter } from "react-router-dom";
-import * as React from "react";
+// import { storiesOf } from "@storybook/react";
+// import { MemoryRouter } from "react-router-dom";
+// import * as React from "react";
+// import ConfirmAlert, { confirmAlert } from "./ConfirmAlert";
+// import ActiveModalCountContext from "./activeModalCountContext";
+//
+// const body =
+//   "Mind-paralyzing change needed improbability vortex machine sorts sought same theory upending job just allows\n " +
+//   "hostess’s really oblong Infinite Improbability thing into the starship against which behavior accordance with\n " +
+//   "Kakrafoon humanoid undergarment ship powered by GPP-guided bowl of petunias nothing was frequently away incredibly\n " +
+//   "ordinary mob.";
+//
+// const buttons = [
+//   {
+//     className: "is-outlined",
+//     label: "Cancel",
+//     onClick: () => null,
+//   },
+//   {
+//     label: "Submit",
+//   },
+// ];
+//
+// const buttonsWithAutofocus = [
+//   {
+//     label: "Cancel",
+//     onClick: () => null,
+//   },
+//   {
+//     className: "is-info",
+//     label: "I should be focused",
+//     autofocus: true,
+//   },
+// ];
+//
+// const doNothing = () => {
+//   // Do nothing
+// };
+//
+// storiesOf("Modal/ConfirmAlert", module)
+//   .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+//   .addDecorator((story) => (
+//     <ActiveModalCountContext.Provider value={{ value: 0, increment: doNothing, decrement: doNothing }}>
+//       {story()}
+//     </ActiveModalCountContext.Provider>
+//   ))
+//   .add("Default", () => <ConfirmAlert message={body} title={"Are you sure about that?"} buttons={buttons} />)
+//   .add("WithButton", () => {
+//     const buttonClick = () => {
+//       confirmAlert({ message: body, title: "Are you sure about that?", buttons });
+//     };
+//     return (
+//       <>
+//         <button onClick={buttonClick}>Open ConfirmAlert</button>
+//         <div id="modalRoot" />
+//       </>
+//     );
+//   })
+//   .add("Autofocus", () => (
+//     <ConfirmAlert message={body} title={"Are you sure about that?"} buttons={buttonsWithAutofocus} />
+//   ));
+
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 import ConfirmAlert, { confirmAlert } from "./ConfirmAlert";
 import ActiveModalCountContext from "./activeModalCountContext";
 
+// --- Helfer-Funktionen und Mock-Daten (aus der Original-Story übernommen) ---
+
 const body =
   "Mind-paralyzing change needed improbability vortex machine sorts sought same theory upending job just allows\n " +
   "hostess’s really oblong Infinite Improbability thing into the starship against which behavior accordance with\n " +
   "Kakrafoon humanoid undergarment ship powered by GPP-guided bowl of petunias nothing was frequently away incredibly\n " +
   "ordinary mob.";
 
-const buttons = [
-  {
-    className: "is-outlined",
-    label: "Cancel",
-    onClick: () => null,
-  },
-  {
-    label: "Submit",
-  },
-];
+const buttons = [{ className: "is-outlined", label: "Cancel", onClick: () => null }, { label: "Submit" }];
 
 const buttonsWithAutofocus = [
-  {
-    label: "Cancel",
-    onClick: () => null,
-  },
-  {
-    className: "is-info",
-    label: "I should be focused",
-    autofocus: true,
-  },
+  { label: "Cancel", onClick: () => null },
+  { className: "is-info", label: "I should be focused", autofocus: true },
 ];
 
 const doNothing = () => {
   // Do nothing
 };
 
-storiesOf("Modal/ConfirmAlert", module)
-  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
-  .addDecorator((story) => (
-    <ActiveModalCountContext.Provider value={{ value: 0, increment: doNothing, decrement: doNothing }}>
-      {story()}
-    </ActiveModalCountContext.Provider>
-  ))
-  .add("Default", () => <ConfirmAlert message={body} title={"Are you sure about that?"} buttons={buttons} />)
-  .add("WithButton", () => {
-    const buttonClick = () => {
-      confirmAlert({ message: body, title: "Are you sure about that?", buttons });
-    };
-    return (
-      <>
-        <button onClick={buttonClick}>Open ConfirmAlert</button>
-        <div id="modalRoot" />
-      </>
-    );
-  })
-  .add("Autofocus", () => (
-    <ConfirmAlert message={body} title={"Are you sure about that?"} buttons={buttonsWithAutofocus} />
-  ));
+// Helfer-Komponente für die Story, die den Alert per Klick auslöst
+const TriggerConfirmAlertExample = () => {
+  const handleClick = () => {
+    confirmAlert({ message: body, title: "Are you sure about that?", buttons });
+  };
+  return (
+    <>
+      <p>
+        Klicken Sie auf den Button, um den Bestätigungsdialog imperativ auszulösen. Der Dialog wird in{" "}
+        <code>#modalRoot</code> gerendert.
+      </p>
+      <button className="button" onClick={handleClick}>
+        Open ConfirmAlert
+      </button>
+      {/* Das ist notwendig, damit die `confirmAlert`-Funktion ein Einhängepunkt im DOM findet. */}
+      <div id="modalRoot" />
+    </>
+  );
+};
+
+// --- Storybook Metadaten ---
+
+const meta: Meta<typeof ConfirmAlert> = {
+  title: "Modal/ConfirmAlert",
+  component: ConfirmAlert,
+  // Der ActiveModalCountContext.Provider wird als Decorator für alle Stories beibehalten.
+  decorators: [
+    (Story) => (
+      <ActiveModalCountContext.Provider value={{ value: 0, increment: doNothing, decrement: doNothing }}>
+        <div style={{ margin: "2rem" }}>
+          <Story />
+        </div>
+      </ActiveModalCountContext.Provider>
+    ),
+  ],
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+// --- Story-Definitionen ---
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    message: body,
+    title: "Are you sure about that?",
+    buttons: buttons,
+  },
+};
+
+export const Autofocus: Story = {
+  args: {
+    ...Default.args,
+    buttons: buttonsWithAutofocus,
+  },
+};
+
+// Diese Story verwendet eine `render`-Funktion, um die imperative API zu demonstrieren.
+export const TriggeredByButton: Story = {
+  name: "Triggered by Button",
+  render: () => <TriggerConfirmAlertExample />,
+};

package/src/modals/ConfirmAlert.tsx

@@ -14,9 +14,9 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
+import { createRoot } from "react-dom/client";
 import * as React from "react";
-import { FC, useRef, useState } from "react";
-import ReactDOM from "react-dom";
+import { FC, ReactNode, useRef, useState } from "react";
 import Modal from "./Modal";
 import classNames from "classnames";
 
@@ -34,6 +34,7 @@ type Props = {
   message?: string;
   buttons: Button[];
   close?: () => void;
+  children?: ReactNode;
 };
 
 export const ConfirmAlert: FC<Props> = ({ title, message, buttons, close, children }) => {
@@ -102,11 +103,11 @@ export function confirmAlert(properties: Props) {
     const close = () => {
       const container = document.getElementById("modalRoot");
       if (container) {
-        ReactDOM.unmountComponentAtNode(container);
+        createRoot(container).unmount();
       }
     };
     const props = { ...properties, close };
-    ReactDOM.render(<ConfirmAlert {...props} />, root);
+    createRoot(root).render(<ConfirmAlert {...props} />);
   }
 }