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

package/src/CardColumnSmall.stories.tsx

@@ -14,12 +14,57 @@
  * 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 CardColumnSmall from "./CardColumnSmall";
+// import Icon from "./Icon";
+// import styled from "styled-components";
+//
+// const Wrapper = styled.div`
+//   margin: 2rem;
+//   max-width: 400px;
+// `;
+//
+// const link = "/foo/bar";
+// const avatar = <Icon name="icons fa-2x fa-fw" alt="avatar" />;
+// const contentLeft = <strong className="m-0">main content</strong>;
+// const contentRight = <small>more text</small>;
+//
+// storiesOf("CardColumnSmall", module)
+//   .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+//   .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
+//   .add("Default", () => (
+//     <CardColumnSmall link={link} avatar={avatar} contentLeft={contentLeft} contentRight={contentRight} />
+//   ))
+//   .add("Minimal", () => <CardColumnSmall link={link} contentLeft={contentLeft} contentRight={contentRight} />)
+//   .add("Task", () => (
+//     <CardColumnSmall
+//       link={link}
+//       avatar={<Icon name="exchange-alt" className="fa-fw fa-lg" color="inherit" alt="avatar" />}
+//       contentLeft={<strong>Repository created</strong>}
+//       contentRight={<small>over 42 years ago</small>}
+//       footer="New: scmadmin/spaceship"
+//     />
+//   ))
+//   .add("Linkless", () => (
+//     <CardColumnSmall
+//       avatar={<Icon name="eraser" className="fa-fw fa-lg" color="inherit" alt="avatar" />}
+//       contentLeft={<strong>Repository deleted</strong>}
+//       contentRight={<small>over 1337 minutes ago</small>}
+//       footer="Deleted: scmadmin/spaceship"
+//     />
+//   ));
+
 import React from "react";
-import { MemoryRouter } from "react-router-dom";
-import { storiesOf } from "@storybook/react";
+import styled from "styled-components";
+import type { Meta, StoryObj } from "@storybook/react";
+
 import CardColumnSmall from "./CardColumnSmall";
 import Icon from "./Icon";
-import styled from "styled-components";
+import { MemoryRouter } from "react-router-dom";
+
+// --- Mock Data and Helpers (preserved from your original story) ---
 
 const Wrapper = styled.div`
   margin: 2rem;
@@ -31,27 +76,57 @@ const avatar = <Icon name="icons fa-2x fa-fw" alt="avatar" />;
 const contentLeft = <strong className="m-0">main content</strong>;
 const contentRight = <small>more text</small>;
 
-storiesOf("CardColumnSmall", module)
-  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
-  .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
-  .add("Default", () => (
-    <CardColumnSmall link={link} avatar={avatar} contentLeft={contentLeft} contentRight={contentRight} />
-  ))
-  .add("Minimal", () => <CardColumnSmall link={link} contentLeft={contentLeft} contentRight={contentRight} />)
-  .add("Task", () => (
-    <CardColumnSmall
-      link={link}
-      avatar={<Icon name="exchange-alt" className="fa-fw fa-lg" color="inherit" alt="avatar" />}
-      contentLeft={<strong>Repository created</strong>}
-      contentRight={<small>over 42 years ago</small>}
-      footer="New: scmadmin/spaceship"
-    />
-  ))
-  .add("Linkless", () => (
-    <CardColumnSmall
-      avatar={<Icon name="eraser" className="fa-fw fa-lg" color="inherit" alt="avatar" />}
-      contentLeft={<strong>Repository deleted</strong>}
-      contentRight={<small>over 1337 minutes ago</small>}
-      footer="Deleted: scmadmin/spaceship"
-    />
-  ));
+// --- Storybook Metadata ---
+
+const meta: Meta<typeof CardColumnSmall> = {
+  title: "Components/CardColumnSmall",
+  component: CardColumnSmall,
+  // The Wrapper is now a decorator in the meta object
+  decorators: [
+    (Story) => <MemoryRouter initialEntries={["/"]}>{Story()}</MemoryRouter>,
+    (Story) => <Wrapper>{Story()}</Wrapper>],
+  tags: ["autodocs"], // Enables automatic documentation generation
+};
+
+export default meta;
+
+// --- Story Definitions ---
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    // Props for the component go into the `args` object
+    link: link,
+    avatar: avatar,
+    contentLeft: contentLeft,
+    contentRight: contentRight,
+  },
+};
+
+export const Minimal: Story = {
+  args: {
+    link: link,
+    contentLeft: contentLeft,
+    contentRight: contentRight,
+  },
+};
+
+export const Task: Story = {
+  args: {
+    link: link,
+    avatar: <Icon name="exchange-alt" className="fa-fw fa-lg" color="inherit" alt="avatar" />,
+    contentLeft: <strong>Repository created</strong>,
+    contentRight: <small>over 42 years ago</small>,
+    footer: "New: scmadmin/spaceship",
+  },
+};
+
+export const Linkless: Story = {
+  args: {
+    avatar: <Icon name="eraser" className="fa-fw fa-lg" color="inherit" alt="avatar" />,
+    contentLeft: <strong>Repository deleted</strong>,
+    contentRight: <small>over 1337 minutes ago</small>,
+    footer: "Deleted: scmadmin/spaceship",
+  },
+};

package/src/CommaSeparatedList.tsx

@@ -14,10 +14,10 @@
  * 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";
 
-const CommaSeparatedList: FC = ({ children }) => {
+const CommaSeparatedList: FC<{ children: ReactNode }> = ({ children }) => {
   const [t] = useTranslation("commons");
   const childArray = React.Children.toArray(children);
   return (

package/src/Date.stories.tsx

@@ -14,10 +14,47 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
+// import React from "react";
+// import { storiesOf } from "@storybook/react";
+// import DateFromNow from "./DateFromNow";
+// import DateShort from "./DateShort";
+//
+// const baseProps = {
+//   timeZone: "Europe/Berlin",
+//   baseDate: "2019-10-12T13:56:42+02:00",
+// };
+//
+// const dates = [
+//   "2009-06-30T18:30:00+02:00",
+//   "2019-06-30T18:30:00+02:00",
+//   "2019-10-12T13:56:40+02:00",
+//   "2019-10-11T13:56:40+02:00",
+// ];
+//
+// storiesOf("Date", module)
+//   .add("Date from now", () => (
+//     <div className="p-5">
+//       {dates.map((d) => (
+//         <p>
+//           <DateFromNow date={d} {...baseProps} />
+//         </p>
+//       ))}
+//     </div>
+//   ))
+//   .add("Short", () => (
+//     <div className="p-5">
+//       {dates.map((d) => (
+//         <p>
+//           <DateShort date={d} {...baseProps} />
+//         </p>
+//       ))}
+//     </div>
+//   ));
+
 import React from "react";
-import { storiesOf } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
+
 import DateFromNow from "./DateFromNow";
-import DateShort from "./DateShort";
 
 const baseProps = {
   timeZone: "Europe/Berlin",
@@ -31,22 +68,32 @@ const dates = [
   "2019-10-11T13:56:40+02:00",
 ];
 
-storiesOf("Date", module)
-  .add("Date from now", () => (
-    <div className="p-5">
-      {dates.map((d) => (
-        <p>
+const meta: Meta<typeof DateFromNow> = {
+  title: "Components/DateFromNow",
+  component: DateFromNow,
+  decorators: [(Story) => <div className="p-5">{Story()}</div>],
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    date: dates[3],
+    ...baseProps,
+  },
+};
+
+export const AllExamples: Story = {
+  render: () => (
+    <div>
+      {dates.map((d, i) => (
+        <p key={i}>
           <DateFromNow date={d} {...baseProps} />
         </p>
       ))}
     </div>
-  ))
-  .add("Short", () => (
-    <div className="p-5">
-      {dates.map((d) => (
-        <p>
-          <DateShort date={d} {...baseProps} />
-        </p>
-      ))}
-    </div>
-  ));
+  ),
+};

package/src/Duration.stories.tsx

@@ -14,50 +14,97 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import { storiesOf } from "@storybook/react";
-import Duration from "./Duration";
+// import { storiesOf } from "@storybook/react";
+// import Duration from "./Duration";
+// import React from "react";
+//
+// storiesOf("Duration", module).add("Duration", () => (
+//   <div className="m-5 p-5">
+//     <p>
+//       <Duration duration={1} />
+//     </p>
+//     <p>
+//       <Duration duration={500} />
+//     </p>
+//     <p>
+//       <Duration duration={1000 + 1} />
+//     </p>
+//     <p>
+//       <Duration duration={2000} />
+//     </p>
+//     <p>
+//       <Duration duration={1000 * 60 + 1} />
+//     </p>
+//     <p>
+//       <Duration duration={42 * 1000 * 60} />
+//     </p>
+//     <p>
+//       <Duration duration={1000 * 60 * 60 + 1} />
+//     </p>
+//     <p>
+//       <Duration duration={21 * 1000 * 60 * 60} />
+//     </p>
+//     <p>
+//       <Duration duration={1000 * 60 * 60 * 24 + 1} />
+//     </p>
+//     <p>
+//       <Duration duration={5 * 1000 * 60 * 60 * 24} />
+//     </p>
+//     <p>
+//       <Duration duration={1000 * 60 * 60 * 24 * 7 + 1} />
+//     </p>
+//     <p>
+//       <Duration duration={3 * 1000 * 60 * 60 * 24 * 7} />
+//     </p>
+//     <p>
+//       <Duration duration={12 * 1000 * 60 * 60 * 24} />
+//     </p>
+//   </div>
+// ));
+
 import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import DateShort from "./DateShort";
+
+const baseProps = {
+  timeZone: "Europe/Berlin",
+  baseDate: "2019-10-12T13:56:42+02:00",
+};
+
+const dates = [
+  "2009-06-30T18:30:00+02:00",
+  "2019-06-30T18:30:00+02:00",
+  "2019-10-12T13:56:40+02:00",
+  "2019-10-11T13:56:40+02:00",
+];
+
+const meta: Meta<typeof DateShort> = {
+  title: "Components/DateShort",
+  component: DateShort,
+  decorators: [(Story) => <div className="p-5">{Story()}</div>],
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    date: dates[3],
+    ...baseProps,
+  },
+};
 
-storiesOf("Duration", module).add("Duration", () => (
-  <div className="m-5 p-5">
-    <p>
-      <Duration duration={1} />
-    </p>
-    <p>
-      <Duration duration={500} />
-    </p>
-    <p>
-      <Duration duration={1000 + 1} />
-    </p>
-    <p>
-      <Duration duration={2000} />
-    </p>
-    <p>
-      <Duration duration={1000 * 60 + 1} />
-    </p>
-    <p>
-      <Duration duration={42 * 1000 * 60} />
-    </p>
-    <p>
-      <Duration duration={1000 * 60 * 60 + 1} />
-    </p>
-    <p>
-      <Duration duration={21 * 1000 * 60 * 60} />
-    </p>
-    <p>
-      <Duration duration={1000 * 60 * 60 * 24 + 1} />
-    </p>
-    <p>
-      <Duration duration={5 * 1000 * 60 * 60 * 24} />
-    </p>
-    <p>
-      <Duration duration={1000 * 60 * 60 * 24 * 7 + 1} />
-    </p>
-    <p>
-      <Duration duration={3 * 1000 * 60 * 60 * 24 * 7} />
-    </p>
-    <p>
-      <Duration duration={12 * 1000 * 60 * 60 * 24} />
-    </p>
-  </div>
-));
+export const AllExamples: Story = {
+  render: () => (
+    <div>
+      {dates.map((d, i) => (
+        <p key={i}>
+          <DateShort date={d} {...baseProps} />
+        </p>
+      ))}
+    </div>
+  ),
+};

package/src/ErrorBoundary.tsx

@@ -14,8 +14,9 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC, ReactNode, useEffect } from "react";
-import { RouteComponentProps, useLocation, withRouter } from "react-router-dom";
+import React, { ErrorInfo, FC, ReactNode, useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { ErrorBoundary as ReactErrorBoundary, FallbackProps } from "react-error-boundary";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
@@ -26,37 +27,31 @@ import ErrorPage from "./ErrorPage";
 import { Subtitle, Title } from "./layout";
 import Icon from "./Icon";
 
-type State = {
-  error?: Error;
-  errorInfo?: ErrorInfo;
+type ErrorState = {
+  error: Error;
 };
 
 type ExportedProps = {
-  fallback?: React.ComponentType<State>;
+  fallback?: React.ComponentType<ErrorState>;
   children: ReactNode;
 };
 
-type Props = RouteComponentProps & ExportedProps;
-
-type ErrorInfo = {
-  componentStack: string;
-};
-
 type ErrorDisplayProps = {
-  fallback?: React.ComponentType<State>;
   error: Error;
-  errorInfo: ErrorInfo;
+  // react-error-boundary does not pass errorInfo to the fallback component by default
+  // for performance reasons, but it can be logged via the `onError` prop.
+  // We keep it in the signature for compatibility with the custom fallback prop.
+  errorInfo?: { componentStack: string };
+  fallback?: React.ComponentType<ErrorState>;
 };
 
 const RedirectIconContainer = styled.div`
   min-height: 256px;
 `;
 
-const RedirectPage = () => {
+const RedirectPage: FC = () => {
   const [t] = useTranslation("commons");
   useDocumentTitle(t("errorNotification.prefix"));
-  // we use an icon instead of loading spinner,
-  // because a redirect is synchron and a spinner does not spin on a synchron action
   return (
     <section className="section">
       <div className="container">
@@ -82,6 +77,7 @@ const ErrorDisplay: FC<ErrorDisplayProps> = ({ error, errorInfo, fallback: Fallb
   const [t] = useTranslation("commons");
   const location = useLocation();
   const isMissingLink = error instanceof MissingLinkError;
+
   useEffect(() => {
     if (isMissingLink && loginLink) {
       window.location.assign(urls.withContextPath("/login?from=" + location.pathname));
@@ -90,20 +86,11 @@ const ErrorDisplay: FC<ErrorDisplayProps> = ({ error, errorInfo, fallback: Fallb
 
   if (isMissingLink) {
     if (loginLink) {
-      // we can render a loading screen,
-      // because the effect hook above should redirect
       return <RedirectPage />;
-    } else {
-      // missing link error without login link means we have no permissions
-      // and we should render an error
-      return (
-        <ErrorPage error={error} title={t("errorNotification.prefix")} subtitle={t("errorNotification.forbidden")} />
-      );
     }
-  }
-
-  if (!FallbackComponent) {
-    return <ErrorNotification error={error} />;
+    return (
+      <ErrorPage error={error} title={t("errorNotification.prefix")} subtitle={t("errorNotification.forbidden")} />
+    );
   }
 
   const fallbackProps = {
@@ -111,37 +98,30 @@ const ErrorDisplay: FC<ErrorDisplayProps> = ({ error, errorInfo, fallback: Fallb
     errorInfo,
   };
 
-  return <FallbackComponent {...fallbackProps} />;
-};
-
-class ErrorBoundary extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {};
+  if (FallbackComponent) {
+    return <FallbackComponent {...fallbackProps} />;
   }
+  return <ErrorNotification error={error} />;
+};
 
-  componentDidUpdate(prevProps: Readonly<Props>) {
-    // we must reset the error if the url has changed
-    if (this.state.error && prevProps.location !== this.props.location) {
-      this.setState({ error: undefined, errorInfo: undefined });
-    }
-  }
+const ErrorBoundary: FC<ExportedProps> = ({ children, fallback }) => {
+  const location = useLocation();
 
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    this.setState({
-      error,
-      errorInfo,
-    });
-  }
+  const ErrorBoundaryFallback = ({ error }: FallbackProps) => (
+    <ErrorDisplay
+      error={error}
+      // For compatibility with potential custom fallbacks that expect errorInfo.
+      // The actual component stack is available in the `onError` callback below.
+      errorInfo={{ componentStack: "" }}
+      fallback={fallback}
+    />
+  );
 
-  render() {
-    const { fallback } = this.props;
-    const { error, errorInfo } = this.state;
-    if (error && errorInfo) {
-      return <ErrorDisplay error={error} errorInfo={errorInfo} fallback={fallback} />;
-    }
-    return this.props.children;
-  }
-}
+  return (
+    <ReactErrorBoundary resetKeys={[location.pathname]} FallbackComponent={ErrorBoundaryFallback}>
+      {children}
+    </ReactErrorBoundary>
+  );
+};
 
-export default withRouter(ErrorBoundary);
+export default ErrorBoundary;

package/src/ErrorNotification.tsx

@@ -19,7 +19,7 @@ import { useTranslation } from "react-i18next";
 import { BackendError, ForbiddenError, UnauthorizedError, urls } from "@scm-manager/ui-api";
 import Notification from "./Notification";
 import BackendErrorNotification from "./BackendErrorNotification";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 
 type Props = ComponentProps<typeof BasicErrorMessage> & {
   error?: Error | null;

package/src/Help.stories.tsx

@@ -14,8 +14,35 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import * as React from "react";
-import { storiesOf } from "@storybook/react";
+// import * as React from "react";
+// import { storiesOf } from "@storybook/react";
+// import Help from "./Help";
+//
+// const longContent =
+//   "Cleverness nuclear genuine static irresponsibility invited President Zaphod\n" +
+//   "Beeblebrox hyperspace ship. Another custard through computer-generated universe\n" +
+//   "shapes field strong disaster parties Russell’s ancestors infinite colour\n" +
+//   "imaginative generator sweep.";
+//
+// storiesOf("Help", module)
+//   .addDecorator((storyFn) => <div className="m-6">{storyFn()}</div>)
+//   .add("Default", () => <Help message="This is a help message" />)
+//   .add("Multiline", () => (
+//     <>
+//       <div className="mt-4">
+//         <label>With multiline (default):</label>
+//         <Help message={longContent} />
+//       </div>
+//       <div className="mt-4">
+//         <label>Without multiline:</label>
+//         <Help message={longContent} multiline={false} />
+//       </div>
+//     </>
+//   ));
+
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
 import Help from "./Help";
 
 const longContent =
@@ -24,18 +51,35 @@ const longContent =
   "shapes field strong disaster parties Russell’s ancestors infinite colour\n" +
   "imaginative generator sweep.";
 
-storiesOf("Help", module)
-  .addDecorator((storyFn) => <div className="m-6">{storyFn()}</div>)
-  .add("Default", () => <Help message="This is a help message" />)
-  .add("Multiline", () => (
-    <>
-      <div className="mt-4">
-        <label>With multiline (default):</label>
-        <Help message={longContent} />
-      </div>
-      <div className="mt-4">
-        <label>Without multiline:</label>
-        <Help message={longContent} multiline={false} />
-      </div>
-    </>
-  ));
+const meta: Meta<typeof Help> = {
+  title: "Components/Help",
+  component: Help,
+  decorators: [(Story) => <div className="m-6">{Story()}</div>],
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    message: "This is a help message",
+  },
+};
+
+export const Multiline: Story = {
+  args: {
+    message: longContent,
+  },
+};
+
+export const SingleLine: Story = {
+  args: {
+    message: longContent,
+    multiline: false,
+  },
+};

package/src/Help.tsx

@@ -26,19 +26,13 @@ type Props = {
   id?: string;
 };
 
-const Help: FC<Props> = ({ message, multiline, className, id }) => (
-  <Tooltip
-    className={classNames("is-inline-block", "pl-1", className)}
-    message={message}
-    id={id}
-    multiline={multiline}
-  >
+/**
+ * @deprecated Please import the identical module from "@scm-manager/ui-core"
+ */
+const Help: FC<Props> = ({ message, multiline = true, className, id }) => (
+  <Tooltip className={classNames("is-inline-block", "pl-1", className)} message={message} id={id} multiline={multiline}>
     <HelpIcon />
   </Tooltip>
 );
 
-Help.defaultProps = {
-  multiline: true
-};
-
 export default Help;