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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "4.0.0-REACT18-20250701-125025",
+  "version": "4.0.0-REACT19",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -13,75 +13,70 @@
   "scripts": {
     "test": "jest",
     "typecheck": "tsc",
-    "build-storybook": "build-storybook",
-    "storybook": "start-storybook -s ../ui-webapp/public",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "storyshots": "jest --testPathPattern=\"storyshots.test.ts\" --collectCoverage=false",
     "update-storyshots": "jest --testPathPattern=\"storyshots.test.ts\" --collectCoverage=false -u",
     "depcheck": "depcheck"
   },
   "peerDependencies": {
-    "@headlessui/react": "^1.7.17",
+    "@headlessui/react": "^2.2.7",
     "classnames": "^2.3.1",
     "date-fns": "^2.4.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-i18next": "11",
-    "react-router-dom": "^5.3.3",
-    "styled-components": "^5.3.5",
     "i18next": "21",
-    "react-query": "^3.39.2"
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-i18next": "11",
+    "react-query": "^3.39.2",
+    "react-router-dom": "^7.9.1",
+    "styled-components": "^6.1.19"
   },
   "devDependencies": {
-    "@scm-manager/ui-tests": "4.0.0-REACT18-20250701-125025",
-    "@scm-manager/ui-types": "4.0.0-REACT18-20250701-125025",
+    "@scm-manager/babel-preset": "^2.13.1",
+    "@scm-manager/eslint-config": "^2.17.0",
+    "@scm-manager/jest-preset": "^2.15.0-alpha1",
+    "@scm-manager/prettier-config": "^2.12.0",
+    "@scm-manager/tsconfig": "^2.13.0",
+    "@scm-manager/ui-shortcuts": "4.0.0-REACT19",
+    "@scm-manager/ui-syntaxhighlighting": "4.0.0-REACT19",
+    "@scm-manager/ui-text": "4.0.0-REACT19",
+    "@scm-manager/ui-types": "4.0.0-REACT19",
+    "@storybook/addon-actions": "^9.0.8",
+    "@storybook/addon-docs": "^9.1.5",
+    "@storybook/addon-essentials": "^9.0.0-alpha.12",
+    "@storybook/addon-interactions": "^9.0.0-alpha.10",
+    "@storybook/addon-links": "^9.1.5",
+    "@storybook/react": "^9.1.5",
+    "@storybook/react-vite": "^9.1.5",
+    "@tanstack/react-query": "4.40.1",
+    "@tanstack/react-query-devtools": "4.40.1",
+    "@testing-library/react": "16.3.0",
+    "@types/classnames": "^2.3.1",
     "@types/fetch-mock": "^7.3.1",
+    "@types/react": "^19.1.1",
     "@types/react-select": "^2.0.19",
     "@types/unist": "^2.0.3",
-    "gitdiff-parser": "^0.2.2",
-    "i18next-fetch-backend": "4",
-    "webpack": "^5.76.0",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-interactions": "^6.5.10",
-    "@storybook/addon-storyshots": "^6.5.10",
-    "@storybook/builder-webpack5": "^6.5.10",
-    "@storybook/manager-webpack5": "^6.5.10",
-    "@storybook/react": "^6.5.10",
-    "@testing-library/react": "^12.1.5",
-    "storybook-addon-i18next": "^1.3.0",
-    "storybook-addon-themes": "^6.1.0",
-    "@types/classnames": "^2.3.1",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^17.0.1",
-    "@types/react-router-dom": "^5.3.3",
-    "@types/styled-components": "^5.1.25",
-    "@testing-library/react-hooks": "8.0.1",
+    "decode-named-character-reference": "^1.0.1",
     "fetch-mock": "^7.5.1",
-    "html-webpack-plugin": "^5.5.0",
-    "mini-css-extract-plugin": "^2.4.3",
-    "react-test-renderer": "^18.2.0",
+    "gitdiff-parser": "^0.2.2",
+    "minimatch": "^10.0.3",
+    "react-test-renderer": "^19.1.1",
+    "react-router-dom": "^7.9.1",
     "sass-loader": "^12.3.0",
-    "@types/react-test-renderer": "^18.2.0",
-    "decode-named-character-reference": "^1.0.1",
-    "@scm-manager/babel-preset": "^2.13.1",
-    "@scm-manager/eslint-config": "^2.17.0",
-    "@scm-manager/jest-preset": "^2.14.1",
-    "@scm-manager/prettier-config": "^2.12.0",
-    "@scm-manager/tsconfig": "^2.13.0",
-    "@scm-manager/ui-syntaxhighlighting": "4.0.0-REACT18-20250701-125025",
-    "@scm-manager/ui-shortcuts": "4.0.0-REACT18-20250701-125025",
-    "@scm-manager/ui-text": "4.0.0-REACT18-20250701-125025"
+    "storybook-addon-i18next": "^1.3.0",
+    "storybook-addon-themes": "^6.1.0"
   },
   "dependencies": {
-    "@scm-manager/ui-core": "4.0.0-REACT18-20250701-125025",
-    "@scm-manager/ui-overlays": "4.0.0-REACT18-20250701-125025",
-    "@scm-manager/ui-layout": "4.0.0-REACT18-20250701-125025",
-    "@scm-manager/ui-buttons": "4.0.0-REACT18-20250701-125025",
-    "@scm-manager/ui-api": "4.0.0-REACT18-20250701-125025",
-    "@scm-manager/ui-extensions": "4.0.0-REACT18-20250701-125025",
+    "@scm-manager/ui-api": "4.0.0-REACT19",
+    "@scm-manager/ui-buttons": "4.0.0-REACT19",
+    "@scm-manager/ui-core": "4.0.0-REACT19",
+    "@scm-manager/ui-extensions": "4.0.0-REACT19",
+    "@scm-manager/ui-layout": "4.0.0-REACT19",
+    "@scm-manager/ui-overlays": "4.0.0-REACT19",
     "deepmerge": "^4.2.2",
     "hast-util-sanitize": "^3.0.2",
     "react-diff-view": "^2.4.10",
+    "react-error-boundary": "^6.0.0",
     "react-hook-form": "^7.33.1",
     "react-select": "^2.1.2",
     "rehype-raw": "^5.1.0",
@@ -109,4 +104,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/BranchSelector.stories.tsx

@@ -14,24 +14,73 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import { storiesOf } from "@storybook/react";
+// import { storiesOf } from "@storybook/react";
+// import { BranchSelector } from "./index";
+// import { Branch } from "@scm-manager/ui-types";
+// import * as React from "react";
+// import styled from "styled-components";
+//
+// const master = { name: "master", revision: "1", defaultBranch: true, _links: {} };
+// const develop = { name: "develop", revision: "2", defaultBranch: false, _links: {} };
+//
+// const branchSelected = (branch?: Branch) => null;
+//
+// const branches = [master, develop];
+//
+// const Wrapper = styled.div`
+//   margin: 2rem;
+//   max-width: 400px;
+// `;
+//
+// storiesOf("BranchSelector", module)
+//   .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
+//   .add("Default", () => <BranchSelector branches={branches} onSelectBranch={branchSelected} label="Select Branch" />);
+
 import { BranchSelector } from "./index";
 import { Branch } from "@scm-manager/ui-types";
 import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 import styled from "styled-components";
 
-const master = { name: "master", revision: "1", defaultBranch: true, _links: {} };
-const develop = { name: "develop", revision: "2", defaultBranch: false, _links: {} };
-
-const branchSelected = (branch?: Branch) => null;
-
-const branches = [master, develop];
-
 const Wrapper = styled.div`
   margin: 2rem;
   max-width: 400px;
 `;
 
-storiesOf("BranchSelector", module)
-  .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
-  .add("Default", () => <BranchSelector branches={branches} onSelectBranch={branchSelected} label="Select Branch" />);
+// This is the metadata for your component, replacing `storiesOf("BranchSelector", module)`
+const meta: Meta<typeof BranchSelector> = {
+  title: "Components/BranchSelector",
+  component: BranchSelector,
+  decorators: [
+    // The decorator is now an array in the meta object
+    (Story) => (
+      <Wrapper>
+        <Story />
+      </Wrapper>
+    ),
+  ],
+  argTypes: {
+    // This tells Storybook to automatically create an "action" for the onSelectBranch prop
+    // so you can see when it's called in the Actions panel.
+    onSelectBranch: { action: "branchSelected" },
+  },
+  tags: ["autodocs"], // This enables the automatic documentation page
+};
+
+export default meta;
+
+// Define the story type for better TypeScript support
+type Story = StoryObj<typeof meta>;
+
+// Mock data for the story
+const master: Branch = { name: "master", revision: "1", defaultBranch: true, _links: {} };
+const develop: Branch = { name: "develop", revision: "2", defaultBranch: false, _links: {} };
+
+// This is your "Default" story, replacing `.add("Default", ...)`
+export const Default: Story = {
+  args: {
+    // Props for the component go into the `args` object
+    branches: [master, develop],
+    label: "Select Branch",
+  },
+};

package/src/Breadcrumb.stories.tsx

@@ -14,15 +14,97 @@
  * 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 Breadcrumb from "./Breadcrumb";
+// import repository from "./__resources__/repository";
+// // @ts-ignore ignore unknown png
+// import Git from "./__resources__/git-logo.png";
+// import { MemoryRouter } from "react-router-dom";
+// import Icon from "./Icon";
+//
+// const Wrapper = styled.div`
+//   margin: 2rem;
+//   max-width: 800px;
+// `;
+//
+// const master = { name: "master", revision: "1", defaultBranch: true, _links: {} };
+// const path = "src/main/java/com/cloudogu";
+// const longPath =
+//   "dream-path/src/main/scm-plugins/javaUtilityHomeHousingLinkReferrer/sonia/scm/repositoryUndergroundSupportManager/spi/SvnRepositoryServiceResolver.java";
+// const baseUrl = "scm-manager.org/scm/repo/hitchhiker/heartOfGold/sources";
+// const sources = Git;
+// const prefix = (
+//   <a href="#link">
+//     <Icon name="heart" color="danger" alt="heart icon" />
+//   </a>
+// );
+//
+// storiesOf("BreadCrumb", module)
+//   .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+//   .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
+//   .add("Default", () => (
+//     <Breadcrumb
+//       repository={repository}
+//       defaultBranch={master}
+//       branch={master}
+//       path={path}
+//       baseUrl={baseUrl}
+//       sources={sources}
+//       revision={"1"}
+//       permalink={"/" + path}
+//     />
+//   ))
+//   .add("Long path", () => (
+//     <Breadcrumb
+//       repository={repository}
+//       defaultBranch={master}
+//       branch={master}
+//       path={longPath}
+//       baseUrl={baseUrl}
+//       sources={sources}
+//       revision={"1"}
+//       permalink={"/" + longPath}
+//     />
+//   ))
+//   .add("With prefix button", () => (
+//     <Breadcrumb
+//       repository={repository}
+//       defaultBranch={master}
+//       branch={master}
+//       path={path}
+//       baseUrl={baseUrl}
+//       sources={sources}
+//       revision={"1"}
+//       permalink={"/" + path}
+//       preButtons={prefix}
+//     />
+//   ))
+//   .add("Not clickable", () => (
+//     <Breadcrumb
+//       repository={repository}
+//       defaultBranch={master}
+//       branch={master}
+//       path={path}
+//       baseUrl={baseUrl}
+//       sources={sources}
+//       revision={"1"}
+//       permalink={"/" + path}
+//       clickable={false}
+//     />
+//   ));
+
+import React from "react";
 import styled from "styled-components";
+import { MemoryRouter } from "react-router-dom";
+import type { Meta, StoryObj } from "@storybook/react";
+
 import Breadcrumb from "./Breadcrumb";
+import Icon from "./Icon";
 import repository from "./__resources__/repository";
 // @ts-ignore ignore unknown png
 import Git from "./__resources__/git-logo.png";
-import { MemoryRouter } from "react-router-dom";
-import Icon from "./Icon";
 
 const Wrapper = styled.div`
   margin: 2rem;
@@ -41,56 +123,48 @@ const prefix = (
   </a>
 );
 
-storiesOf("BreadCrumb", module)
-  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
-  .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
-  .add("Default", () => (
-    <Breadcrumb
-      repository={repository}
-      defaultBranch={master}
-      branch={master}
-      path={path}
-      baseUrl={baseUrl}
-      sources={sources}
-      revision={"1"}
-      permalink={"/" + path}
-    />
-  ))
-  .add("Long path", () => (
-    <Breadcrumb
-      repository={repository}
-      defaultBranch={master}
-      branch={master}
-      path={longPath}
-      baseUrl={baseUrl}
-      sources={sources}
-      revision={"1"}
-      permalink={"/" + longPath}
-    />
-  ))
-  .add("With prefix button", () => (
-    <Breadcrumb
-      repository={repository}
-      defaultBranch={master}
-      branch={master}
-      path={path}
-      baseUrl={baseUrl}
-      sources={sources}
-      revision={"1"}
-      permalink={"/" + path}
-      preButtons={prefix}
-    />
-  ))
-  .add("Not clickable", () => (
-    <Breadcrumb
-      repository={repository}
-      defaultBranch={master}
-      branch={master}
-      path={path}
-      baseUrl={baseUrl}
-      sources={sources}
-      revision={"1"}
-      permalink={"/" + path}
-      clickable={false}
-    />
-  ));
+const meta: Meta<typeof Breadcrumb> = {
+  title: "Components/Breadcrumb",
+  component: Breadcrumb,
+  decorators: [(Story) => <MemoryRouter><Story /></MemoryRouter>, (Story) => <Wrapper>{Story()}</Wrapper>],
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    repository: repository,
+    defaultBranch: master,
+    branch: master,
+    path: path,
+    baseUrl: baseUrl,
+    sources: sources,
+    revision: "1",
+    permalink: "/" + path,
+  },
+};
+
+export const LongPath: Story = {
+  args: {
+    ...Default.args,
+    path: longPath,
+    permalink: "/" + longPath,
+  },
+};
+
+export const WithPrefixButton: Story = {
+  args: {
+    ...Default.args,
+    preButtons: prefix,
+  },
+};
+
+export const NotClickable: Story = {
+  args: {
+    ...Default.args,
+    clickable: false,
+  },
+};

package/src/Breadcrumb.tsx

@@ -16,7 +16,7 @@
 
 import React, { FC, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useHistory, useLocation } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import classNames from "classnames";
 import styled from "styled-components";
 import { urls } from "@scm-manager/ui-api";
@@ -139,7 +139,7 @@ const Breadcrumb: FC<Props> = ({
   clickable = true,
 }) => {
   const location = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
   const [copying, setCopying] = useState(false);
   const [t] = useTranslation("commons");
 
@@ -177,7 +177,7 @@ const Breadcrumb: FC<Props> = ({
   };
 
   const copySource = () => {
-    history.push(location.pathname);
+    navigate(location.pathname);
     setCopying(true);
     copyToClipboard(
       window.location.protocol + "//" + window.location.host + urls.withContextPath(permalink || location.pathname)

package/src/CardColumn.stories.tsx

@@ -14,12 +14,60 @@
  * 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 CardColumn from "./CardColumn";
+// import Icon from "./Icon";
+// import styled from "styled-components";
+// import { DateFromNow } from ".";
+// import repository from "./__resources__/repository";
+//
+// 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 title = <strong>title</strong>;
+// const footerLeft = <small>left footer</small>;
+// const footerRight = <small>right footer</small>;
+// const baseDate = "2020-03-26T12:13:42+02:00";
+//
+// storiesOf("CardColumn", module)
+//   .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+//   .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
+//   .add("Default", () => (
+//     <CardColumn
+//       link={link}
+//       avatar={avatar}
+//       title={title}
+//       description="A description can be added here."
+//       footerLeft={footerLeft}
+//       footerRight={footerRight}
+//     />
+//   ))
+//   .add("Minimal", () => <CardColumn title={title} footerLeft={footerLeft} footerRight={footerRight} />)
+//   .add("With hoverable date", () => (
+//     <CardColumn
+//       title={title}
+//       footerLeft={footerLeft}
+//       footerRight={
+//         <small className="level-item">
+//           <DateFromNow baseDate={baseDate} date={repository.creationDate} />
+//         </small>
+//       }
+//     />
+//   ));
+
 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 CardColumn from "./CardColumn";
 import Icon from "./Icon";
-import styled from "styled-components";
 import { DateFromNow } from ".";
 import repository from "./__resources__/repository";
 
@@ -35,28 +83,47 @@ const footerLeft = <small>left footer</small>;
 const footerRight = <small>right footer</small>;
 const baseDate = "2020-03-26T12:13:42+02:00";
 
-storiesOf("CardColumn", module)
-  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
-  .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
-  .add("Default", () => (
-    <CardColumn
-      link={link}
-      avatar={avatar}
-      title={title}
-      description="A description can be added here."
-      footerLeft={footerLeft}
-      footerRight={footerRight}
-    />
-  ))
-  .add("Minimal", () => <CardColumn title={title} footerLeft={footerLeft} footerRight={footerRight} />)
-  .add("With hoverable date", () => (
-    <CardColumn
-      title={title}
-      footerLeft={footerLeft}
-      footerRight={
-        <small className="level-item">
-          <DateFromNow baseDate={baseDate} date={repository.creationDate} />
-        </small>
-      }
-    />
-  ));
+const meta: Meta<typeof CardColumn> = {
+  title: "Components/CardColumn",
+  component: CardColumn,
+  decorators: [
+    (Story) => <MemoryRouter initialEntries={["/"]}>{Story()}</MemoryRouter>,
+    (Story) => <Wrapper>{Story()}</Wrapper>,
+  ],
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    link: link,
+    avatar: avatar,
+    title: title,
+    description: "A description can be added here.",
+    footerLeft: footerLeft,
+    footerRight: footerRight,
+  },
+};
+
+export const Minimal: Story = {
+  args: {
+    title: title,
+    footerLeft: footerLeft,
+    footerRight: footerRight,
+  },
+};
+
+export const WithHoverableDate: Story = {
+  args: {
+    title: title,
+    footerLeft: footerLeft,
+    footerRight: (
+      <small className="level-item">
+        <DateFromNow baseDate={baseDate} date={repository.creationDate} />
+      </small>
+    ),
+  },
+};