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

package/src/SmallLoadingSpinner.stories.tsx

@@ -14,12 +14,32 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import { storiesOf } from "@storybook/react";
+// import { storiesOf } from "@storybook/react";
+// import React from "react";
+// import SmallLoadingSpinner from "./SmallLoadingSpinner";
+//
+// storiesOf("SmallLoading", module).add("Default", () => (
+//   <div>
+//     <SmallLoadingSpinner />
+//   </div>
+// ));
+
 import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
 import SmallLoadingSpinner from "./SmallLoadingSpinner";
 
-storiesOf("SmallLoading", module).add("Default", () => (
-  <div>
-    <SmallLoadingSpinner />
-  </div>
-));
+const meta: Meta<typeof SmallLoadingSpinner> = {
+  title: "Components/SmallLoadingSpinner",
+  component: SmallLoadingSpinner,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/SyntaxHighlighter.stories.tsx

@@ -14,56 +14,138 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { ReactNode } from "react";
-import { storiesOf } from "@storybook/react";
+// import React, { ReactNode } from "react";
+// import { storiesOf } from "@storybook/react";
+// import styled from "styled-components";
+// import SyntaxHighlighter from "./SyntaxHighlighter";
+//
+// import JavaHttpServer from "./__resources__/HttpServer.java";
+// import GoHttpServer from "./__resources__/HttpServer.go";
+// import JsHttpServer from "./__resources__/HttpServer.js";
+// import PyHttpServer from "./__resources__/HttpServer.py";
+// import Markdown from "./__resources__/test-page.md";
+// import { MemoryRouter } from "react-router-dom";
+//
+// const Spacing = styled.div`
+//   padding: 1em;
+// `;
+//
+// const RoutingDecorator = (story: () => ReactNode) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>;
+//
+// storiesOf("SyntaxHighlighter", module)
+//   .addDecorator(RoutingDecorator)
+//   // 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("Java", () => (
+//     <Spacing>
+//       <SyntaxHighlighter language="java" value={JavaHttpServer} />
+//     </Spacing>
+//   ))
+//   .add("Go", () => (
+//     <Spacing>
+//       <SyntaxHighlighter language="go" value={GoHttpServer} />
+//     </Spacing>
+//   ))
+//   .add("Javascript", () => (
+//     <Spacing>
+//       <SyntaxHighlighter language="javascript" value={JsHttpServer} />
+//     </Spacing>
+//   ))
+//   .add("Python", () => (
+//     <Spacing>
+//       <SyntaxHighlighter language="python" value={PyHttpServer} />
+//     </Spacing>
+//   ))
+//   .add("Markdown", () => (
+//     <Spacing>
+//       <SyntaxHighlighter language="markdown" value={Markdown} />
+//     </Spacing>
+//   ))
+//   .add("Without line numbers", () => (
+//     <Spacing>
+//       <SyntaxHighlighter language="java" value={JavaHttpServer} showLineNumbers={false} />
+//     </Spacing>
+//   ));
+
+import React from "react";
 import styled from "styled-components";
+import type { Meta, StoryObj } from "@storybook/react";
+
 import SyntaxHighlighter from "./SyntaxHighlighter";
 
 import JavaHttpServer from "./__resources__/HttpServer.java";
 import GoHttpServer from "./__resources__/HttpServer.go";
 import JsHttpServer from "./__resources__/HttpServer.js";
 import PyHttpServer from "./__resources__/HttpServer.py";
-import Markdown from "./__resources__/test-page.md";
 import { MemoryRouter } from "react-router-dom";
 
+// --- Helper Components & Styles ---
+
 const Spacing = styled.div`
   padding: 1em;
 `;
 
-const RoutingDecorator = (story: () => ReactNode) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>;
-
-storiesOf("SyntaxHighlighter", module)
-  .addDecorator(RoutingDecorator)
-  // 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("Java", () => (
-    <Spacing>
-      <SyntaxHighlighter language="java" value={JavaHttpServer} />
-    </Spacing>
-  ))
-  .add("Go", () => (
-    <Spacing>
-      <SyntaxHighlighter language="go" value={GoHttpServer} />
-    </Spacing>
-  ))
-  .add("Javascript", () => (
-    <Spacing>
-      <SyntaxHighlighter language="javascript" value={JsHttpServer} />
-    </Spacing>
-  ))
-  .add("Python", () => (
-    <Spacing>
-      <SyntaxHighlighter language="python" value={PyHttpServer} />
-    </Spacing>
-  ))
-  .add("Markdown", () => (
-    <Spacing>
-      <SyntaxHighlighter language="markdown" value={Markdown} />
-    </Spacing>
-  ))
-  .add("Without line numbers", () => (
-    <Spacing>
-      <SyntaxHighlighter language="java" value={JavaHttpServer} showLineNumbers={false} />
-    </Spacing>
-  ));
+// --- Storybook Metadata ---
+
+const meta: Meta<typeof SyntaxHighlighter> = {
+  title: "Components/SyntaxHighlighter",
+  component: SyntaxHighlighter,
+  // The Spacing component is now a decorator, applied to all stories
+  decorators: [
+    (Story) => <MemoryRouter initialEntries={["/"]}>{Story()}</MemoryRouter>,
+    (Story) => <Spacing>{Story()}</Spacing>],
+  tags: ["autodocs"], // Enables automatic documentation generation
+};
+
+export default meta;
+
+// --- Story Definitions ---
+
+type Story = StoryObj<typeof meta>;
+
+export const Java: Story = {
+  args: {
+    language: "java",
+    value: JavaHttpServer,
+  },
+};
+
+export const Go: Story = {
+  args: {
+    ...Java.args, // Reuses args from the Java story
+    language: "go",
+    value: GoHttpServer,
+  },
+};
+
+export const Javascript: Story = {
+  args: {
+    ...Java.args,
+    language: "javascript",
+    value: JsHttpServer,
+  },
+};
+
+export const Python: Story = {
+  args: {
+    ...Java.args,
+    language: "python",
+    value: PyHttpServer,
+  },
+};
+
+// export const Markdown: Story = {
+//   args: {
+//     ...Java.args,
+//     language: "markdown",
+//     value: Markdown,
+//   },
+// };
+
+export const WithoutLineNumbers: Story = {
+  args: {
+    ...Java.args,
+    showLineNumbers: false,
+  },
+};

package/src/SyntaxHighlighterRenderer.tsx

@@ -14,13 +14,13 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC, useEffect, useState } from "react";
+import React, { FC, ReactNode, useEffect, useState } from "react";
 import Icon from "./Icon";
 import Tooltip from "./Tooltip";
 import styled from "styled-components";
 import copyToClipboard from "./CopyToClipboard";
 import { useTranslation } from "react-i18next";
-import { useHistory, useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 
 const RowContainer = styled.div`
   span.linenumber + span > span.linenumber {
@@ -73,14 +73,14 @@ type ExternalProps = {
 };
 
 type BaseProps = {
-  children: React.ReactChild[];
+  children?: ReactNode;
 };
 
 type Props = ExternalProps & BaseProps;
 
 const SyntaxHighlighterRenderer: FC<Props> = ({ children: rows, createLinePermaLink, showLineNumbers = true }) => {
   const location = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
   const [focusedLine, setLineToFocus] = useState<number | undefined>(undefined);
   const [copying, setCopying] = useState(false);
   const [t] = useTranslation("repos");
@@ -94,14 +94,14 @@ const SyntaxHighlighterRenderer: FC<Props> = ({ children: rows, createLinePermaL
   }, [location.hash]);
 
   const lineNumberClick = (lineNumber: number) => {
-    history.push(location.pathname + "#line-" + lineNumber);
+    navigate(location.pathname + "#line-" + lineNumber);
     setCopying(true);
     copyToClipboard(createLinePermaLink(lineNumber)).finally(() => setCopying(false));
   };
 
   return (
     <>
-      {rows.map((line: React.ReactNode, i: number) => {
+      {React.Children.map(rows, (line: React.ReactNode, i: number) => {
         const lineNumber = i + 1;
         return (
           <RowContainer
@@ -123,7 +123,7 @@ const SyntaxHighlighterRenderer: FC<Props> = ({ children: rows, createLinePermaL
                   </Tooltip>
                 )}
                 <LineNumber
-                  onClick={() => history.push(location.pathname + "#line-" + lineNumber)}
+                  onClick={() => navigate(location.pathname + "#line-" + lineNumber)}
                   className="linenumber react-syntax-highlighter-line-number"
                   value={lineNumber}
                 />

package/src/Tag.stories.tsx

@@ -14,13 +14,69 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import styled from "styled-components";
-import { storiesOf } from "@storybook/react";
+// import styled from "styled-components";
+// import { storiesOf } from "@storybook/react";
+// import React, { ReactNode } from "react";
+// import Tag from "./Tag";
+// import { MemoryRouter } from "react-router-dom";
+// import { Color, colors, sizes } from "./styleConstants";
+//
+// const Wrapper = styled.div`
+//   margin: 2rem;
+//   max-width: 400px;
+// `;
+//
+// const Spacing = styled.div`
+//   padding: 0.5rem;
+// `;
+//
+// const RoutingDecorator = (story: () => ReactNode) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>;
+//
+// storiesOf("Tag", module)
+//   .addDecorator(RoutingDecorator)
+//   .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
+//   .add("Default", () => <Tag label="Default tag" />)
+//   .add("Rounded", () => <Tag label="Rounded tag" color="dark" rounded={true} />)
+//   .add("With Icon", () => <Tag label="System" icon="bolt" />)
+//   .add("Colors", () => (
+//     <div>
+//       {colors.map((color) => (
+//         <Spacing key={color}>
+//           <Tag color={color} label={color} />
+//         </Spacing>
+//       ))}
+//     </div>
+//   ))
+//   .add("Outlined", () => (
+//     <div>
+//       {(["success", "black", "danger"] as Color[]).map((color) => (
+//         <Spacing key={color}>
+//           <Tag color={color} label={color} outlined={true} />
+//         </Spacing>
+//       ))}
+//     </div>
+//   ))
+//   .add("With title", () => <Tag label="hover me" title="good job" />)
+//   .add("Clickable", () => <Tag label="Click here" onClick={() => alert("Not so fast")} />)
+//   .add("Sizes", () => (
+//     <div>
+//       {sizes.map((size) => (
+//         <Spacing key={size}>
+//           <Tag size={size} label={size} />
+//         </Spacing>
+//       ))}
+//     </div>
+//   ));
+
 import React, { ReactNode } from "react";
+import styled from "styled-components";
+import type { Meta, StoryObj } from "@storybook/react";
+
 import Tag from "./Tag";
-import { MemoryRouter } from "react-router-dom";
 import { Color, colors, sizes } from "./styleConstants";
 
+// --- Helper Components & Styles ---
+
 const Wrapper = styled.div`
   margin: 2rem;
   max-width: 400px;
@@ -28,17 +84,73 @@ const Wrapper = styled.div`
 
 const Spacing = styled.div`
   padding: 0.5rem;
+  display: inline-block; // Ensures spacing works for multiple tags in a row
 `;
 
-const RoutingDecorator = (story: () => ReactNode) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>;
+// --- Storybook Metadata ---
+
+const meta: Meta<typeof Tag> = {
+  title: "Components/Tag",
+  component: Tag,
+  decorators: [(Story) => <Wrapper>{Story()}</Wrapper>],
+  argTypes: {
+    onClick: { action: "clicked" },
+    color: {
+      control: "select",
+      options: colors,
+    },
+    size: {
+      control: "select",
+      options: sizes,
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+// --- Story Definitions ---
 
-storiesOf("Tag", module)
-  .addDecorator(RoutingDecorator)
-  .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
-  .add("Default", () => <Tag label="Default tag" />)
-  .add("Rounded", () => <Tag label="Rounded tag" color="dark" rounded={true} />)
-  .add("With Icon", () => <Tag label="System" icon="bolt" />)
-  .add("Colors", () => (
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "Default tag",
+  },
+};
+
+export const Rounded: Story = {
+  args: {
+    label: "Rounded tag",
+    color: "dark",
+    rounded: true,
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    label: "System",
+    icon: "bolt",
+  },
+};
+
+export const WithTitle: Story = {
+  args: {
+    label: "hover me",
+    title: "good job",
+  },
+};
+
+export const Clickable: Story = {
+  args: {
+    label: "Click here",
+    // The onClick prop is automatically handled by argTypes
+  },
+};
+
+// For stories that showcase multiple variations, we use a custom `render` function.
+export const Colors: Story = {
+  render: () => (
     <div>
       {colors.map((color) => (
         <Spacing key={color}>
@@ -46,8 +158,11 @@ storiesOf("Tag", module)
         </Spacing>
       ))}
     </div>
-  ))
-  .add("Outlined", () => (
+  ),
+};
+
+export const Outlined: Story = {
+  render: () => (
     <div>
       {(["success", "black", "danger"] as Color[]).map((color) => (
         <Spacing key={color}>
@@ -55,10 +170,11 @@ storiesOf("Tag", module)
         </Spacing>
       ))}
     </div>
-  ))
-  .add("With title", () => <Tag label="hover me" title="good job" />)
-  .add("Clickable", () => <Tag label="Click here" onClick={() => alert("Not so fast")} />)
-  .add("Sizes", () => (
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
     <div>
       {sizes.map((size) => (
         <Spacing key={size}>
@@ -66,4 +182,5 @@ storiesOf("Tag", module)
         </Spacing>
       ))}
     </div>
-  ));
+  ),
+};

package/src/Tag.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 classNames from "classnames";
 import { Color, Size } from "./styleConstants";
 import { useTranslation } from "react-i18next";
@@ -30,6 +30,7 @@ type Props = {
   size?: Size;
   onClick?: () => void;
   onRemove?: () => void;
+  children?: ReactNode;
 };
 
 const smallClassNames = classNames("p-1", "is-size-7", "has-text-weight-bold");