@scm-manager/ui-components 4.0.0-REACT19-20250928-144148 → 4.0.0-REACT19-20251020-110745

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "4.0.0-REACT19-20250928-144148",
+  "version": "4.0.0-REACT19-20251020-110745",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -36,8 +36,8 @@
     "@scm-manager/eslint-config": "^2.18.2",
     "@scm-manager/prettier-config": "^2.12.0",
     "@scm-manager/tsconfig": "^2.13.0",
-    "@scm-manager/ui-syntaxhighlighting": "4.0.0-REACT19-20250928-144148",
-    "@scm-manager/ui-types": "4.0.0-REACT19-20250928-144148",
+    "@scm-manager/ui-syntaxhighlighting": "4.0.0-REACT19-20251020-110745",
+    "@scm-manager/ui-types": "4.0.0-REACT19-20251020-110745",
     "@storybook/addon-actions": "^9.0.8",
     "@storybook/addon-docs": "^9.1.5",
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
@@ -68,9 +68,9 @@
     "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@scm-manager/ui-api": "4.0.0-REACT19-20250928-144148",
-    "@scm-manager/ui-core": "4.0.0-REACT19-20250928-144148",
-    "@scm-manager/ui-extensions": "4.0.0-REACT19-20250928-144148",
+    "@scm-manager/ui-api": "4.0.0-REACT19-20251020-110745",
+    "@scm-manager/ui-core": "4.0.0-REACT19-20251020-110745",
+    "@scm-manager/ui-extensions": "4.0.0-REACT19-20251020-110745",
     "deepmerge": "^4.2.2",
     "hast-util-sanitize": "^3.0.2",
     "react-diff-view": "2.6.0",

package/src/CardColumn.stories.tsx

@@ -68,7 +68,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import CardColumn from "./CardColumn";
 import Icon from "./Icon";
-import { DateFromNow } from ".";
+import { DateFromNow } from "@scm-manager/ui-core";
 import repository from "./__resources__/repository";
 
 const Wrapper = styled.div`
@@ -122,7 +122,7 @@ export const WithHoverableDate: Story = {
     footerLeft: footerLeft,
     footerRight: (
       <small className="level-item">
-        <DateFromNow baseDate={baseDate} date={repository.creationDate} />
+        <DateFromNow date={repository.creationDate} />
       </small>
     ),
   },

package/src/Duration.stories.tsx

@@ -65,7 +65,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import DateShort from "./DateShort";
+import { DateShort } from "@scm-manager/ui-core";
 
 const baseProps = {
   timeZone: "Europe/Berlin",

package/src/__snapshots__/storyshots.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots BranchSelector Default 1`] = `
 <div

package/src/index.ts

@@ -34,9 +34,6 @@ import {
 
 export { validation, repositories };
 
-export { default as DateFromNow } from "./DateFromNow";
-export { default as DateShort } from "./DateShort";
-export { default as useDateFormatter } from "./useDateFormatter";
 export { default as Duration } from "./Duration";
 export { default as ErrorNotification } from "./ErrorNotification";
 export { default as ErrorPage } from "./ErrorPage";

package/src/repos/RepositoryEntry.stories.tsx

@@ -181,7 +181,7 @@ const bindBeforeTitle = (binder: Binder, extension: ReactNode) => {
 
 const withBinder = (binder: Binder, repo: Repository) => (
   <BinderContext.Provider value={binder}>
-    <RepositoryEntry repository={repo} baseDate={baseDate} />
+    <RepositoryEntry repository={repo} />
   </BinderContext.Provider>
 );
 
@@ -215,7 +215,8 @@ const meta: Meta<typeof RepositoryEntry> = {
   component: RepositoryEntry,
   decorators: [
     (Story) => <MemoryRouter initialEntries={["/"]}>{Story()}</MemoryRouter>,
-    (Story) => <Container>{Story()}</Container>],
+    (Story) => <Container>{Story()}</Container>,
+  ],
   tags: ["autodocs"],
 };
 
@@ -226,7 +227,6 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     repository: repository,
-    baseDate: baseDate,
   },
 };
 
@@ -234,7 +234,6 @@ export const WithLongTexts: Story = {
   name: "With Long Texts",
   args: {
     repository: longTextRepository,
-    baseDate: baseDate,
   },
 };
 

package/src/repos/RepositoryEntry.tsx

@@ -18,20 +18,14 @@ import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
-import { Card, Icon, Menu, useKeyboardIteratorTargetV2 } from "@scm-manager/ui-core";
+import { Card, Icon, Menu, useKeyboardIteratorTargetV2, DateFromNow } from "@scm-manager/ui-core";
 import { ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensions";
 import { Repository } from "@scm-manager/ui-types";
-import DateFromNow from "../DateFromNow";
 import RepositoryAvatar from "./RepositoryAvatar";
 import RepositoryFlags from "./RepositoryFlags";
 
-type DateProp = Date | string;
-
 type Props = {
   repository: Repository;
-  // @VisibleForTesting
-  // the baseDate is only to avoid failing snapshot tests
-  baseDate?: DateProp;
   expectedIndex?: number;
 };
 
@@ -57,7 +51,7 @@ const DetailsRow = styled(Card.Row)`
   gap: 0.5rem;
 `;
 
-const RepositoryEntry: FC<Props> = ({ repository, baseDate, expectedIndex }) => {
+const RepositoryEntry: FC<Props> = ({ repository, expectedIndex }) => {
   const [t] = useTranslation("repos");
   const ref = useKeyboardIteratorTargetV2({ expectedIndex: expectedIndex ?? 0 });
 
@@ -120,8 +114,7 @@ const RepositoryEntry: FC<Props> = ({ repository, baseDate, expectedIndex }) =>
       <DescriptionRow className="is-size-7">{repository.description}</DescriptionRow>
       <DetailsRow className="is-flex is-align-items-center is-justify-content-space-between is-flex-wrap-wrap">
         <span className="is-size-7 has-text-secondary is-relative">
-          {t("overview.lastModified")}{" "}
-          <DateFromNow baseDate={baseDate} date={repository.lastModified ?? repository.creationDate} />
+          {t("overview.lastModified")} <DateFromNow date={repository.lastModified ?? repository.creationDate} />
         </span>
         <RepositoryFlags repository={repository} />
       </DetailsRow>

package/src/repos/annotate/Annotate.stories.tsx

@@ -260,7 +260,6 @@ export const Default: Story = {
     // Die Props für die Komponente werden in das `args`-Objekt verschoben.
     source: source,
     repository: repository,
-    baseDate: new Date("2020-04-16T09:22:42Z"),
   },
 };
 
@@ -268,7 +267,6 @@ export const Markdown: Story = {
   args: {
     source: markdownSource,
     repository: repository,
-    baseDate: new Date("2020-04-15T09:47:42Z"),
   },
 };
 

package/src/repos/annotate/Annotate.tsx

@@ -16,7 +16,6 @@
 
 import React, { FC, useReducer } from "react";
 import { AnnotatedLine, AnnotatedSource, Repository } from "@scm-manager/ui-types";
-import { DateInput } from "../../useDateFormatter";
 import AnnotatePopover from "./AnnotatePopover";
 import AnnotateLine from "./AnnotateLine";
 import { Action } from "./actions";
@@ -26,7 +25,6 @@ import { SyntaxHighlighter } from "@scm-manager/ui-syntaxhighlighting";
 type Props = {
   source: AnnotatedSource;
   repository: Repository;
-  baseDate?: DateInput;
 };
 
 type State = {
@@ -83,7 +81,7 @@ const reducer = (state: State, action: Action): State => {
   }
 };
 
-const Annotate: FC<Props> = ({ source, repository, baseDate }) => {
+const Annotate: FC<Props> = ({ source, repository }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
   const defaultRenderer: FC = ({ children }: any) => {
@@ -122,7 +120,6 @@ const Annotate: FC<Props> = ({ source, repository, baseDate }) => {
         dispatch={dispatch}
         offsetTop={state.offset}
         repository={repository}
-        baseDate={baseDate}
       />
     );
   }

package/src/repos/annotate/AnnotateLine.tsx

@@ -17,7 +17,7 @@
 import React, { FC, Dispatch, useRef, ReactNode } from "react";
 import styled from "styled-components";
 import AuthorImage from "./AuthorImage";
-import DateShort from "../../DateShort";
+import { DateShort } from "@scm-manager/ui-core";
 import { Action } from "./actions";
 import { AnnotatedLine } from "@scm-manager/ui-types";
 

package/src/repos/annotate/AnnotatePopover.tsx

@@ -17,9 +17,8 @@
 import React, { FC, useState, useRef, useLayoutEffect, Dispatch } from "react";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
-import DateFromNow from "../../DateFromNow";
+import { AbsoluteDate } from "@scm-manager/ui-core";
 import { SingleContributor } from "../changesets";
-import { DateInput } from "../../useDateFormatter";
 import { Repository, AnnotatedLine } from "@scm-manager/ui-types";
 import AuthorImage from "./AuthorImage";
 import { Action } from "./actions";
@@ -73,11 +72,10 @@ type PopoverProps = {
   annotation: AnnotatedLine;
   offsetTop?: number;
   repository: Repository;
-  baseDate?: DateInput;
   dispatch: Dispatch<Action>;
 };
 
-const AnnotatePopover: FC<PopoverProps> = ({ annotation, offsetTop, repository, baseDate, dispatch }) => {
+const AnnotatePopover: FC<PopoverProps> = ({ annotation, offsetTop, repository, dispatch }) => {
   const [t] = useTranslation("repos");
   const [height, setHeight] = useState(125);
   const ref = useRef<HTMLDivElement>(null);
@@ -113,7 +111,7 @@ const AnnotatePopover: FC<PopoverProps> = ({ annotation, offsetTop, repository,
           <AuthorImage person={annotation.author} />
           <SingleContributor person={annotation.author} displayTextOnly={true} />
         </span>
-        <DateFromNow className="is-pulled-right" date={annotation.when} baseDate={baseDate} />
+        <AbsoluteDate className="is-pulled-right" date={annotation.when} />
       </PopoverHeading>
       <hr className="my-2" />
       <p>

package/src/repos/changesets/SingleChangeset.tsx

@@ -24,7 +24,7 @@ import ChangesetAuthor from "./ChangesetAuthor";
 import SignatureIcon from "./SignatureIcon";
 import ChangesetTags from "./ChangesetTags";
 import { parseDescription } from "./changesets";
-import DateFromNow from "../../DateFromNow";
+import { DateFromNow } from "@scm-manager/ui-core";
 import { Changeset, Repository } from "@scm-manager/ui-types";
 import styled from "styled-components";
 import ChangesetId from "./ChangesetId";

package/src/Date.stories.tsx

@@ -1,99 +0,0 @@
-/*
- * Copyright (c) 2020 - present Cloudogu GmbH
- *
- * This program is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
- * FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * 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 type { Meta, StoryObj } from "@storybook/react";
-
-import DateFromNow from "./DateFromNow";
-
-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 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>
-  ),
-};

package/src/DateElement.ts

@@ -1,24 +0,0 @@
-/*
- * Copyright (c) 2020 - present Cloudogu GmbH
- *
- * This program is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
- * FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see https://www.gnu.org/licenses/.
- */
-
-import styled from "styled-components";
-
-const DateElement = styled.time`
-  border-bottom: 1px dotted rgb(219, 219, 219);
-  cursor: help;
-`;
-
-export default DateElement;

package/src/DateFromNow.tsx

@@ -1,39 +0,0 @@
-/*
- * Copyright (c) 2020 - present Cloudogu GmbH
- *
- * This program is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
- * FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see https://www.gnu.org/licenses/.
- */
-
-import React, { FC } from "react";
-import useDateFormatter, { DateProps } from "./useDateFormatter";
-import DateElement from "./DateElement";
-
-type Props = DateProps & {
-  className?: string;
-};
-
-const DateFromNow: FC<Props> = ({ className, ...dateProps }) => {
-  const formatter = useDateFormatter(dateProps);
-  if (!formatter) {
-    return null;
-  }
-
-  const dateTime = formatter.formatFull();
-  return (
-    <DateElement className={className} dateTime={dateTime} title={dateTime}>
-      {formatter.formatDistance()}
-    </DateElement>
-  );
-};
-
-export default DateFromNow;

package/src/DateShort.tsx

@@ -1,39 +0,0 @@
-/*
- * Copyright (c) 2020 - present Cloudogu GmbH
- *
- * This program is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
- * FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see https://www.gnu.org/licenses/.
- */
-
-import React, { FC } from "react";
-import useDateFormatter, { DateProps } from "./useDateFormatter";
-import DateElement from "./DateElement";
-
-type Props = DateProps & {
-  className?: string;
-};
-
-const DateShort: FC<Props> = ({ className, ...dateProps }) => {
-  const formatter = useDateFormatter(dateProps);
-  if (!formatter) {
-    return null;
-  }
-
-  const dateTime = formatter.formatFull();
-  return (
-    <DateElement className={className} dateTime={dateTime} title={dateTime}>
-      {formatter.formatShort()}
-    </DateElement>
-  );
-};
-
-export default DateShort;

package/src/useDateFormatter.test.ts

@@ -1,39 +0,0 @@
-/*
- * Copyright (c) 2020 - present Cloudogu GmbH
- *
- * This program is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
- * FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see https://www.gnu.org/licenses/.
- */
-
-import { chooseLocale, supportedLocales } from "./useDateFormatter";
-
-describe("test choose locale", () => {
-  it("should choose de", () => {
-    const locale = chooseLocale("de_DE", ["de", "en"]);
-    expect(locale).toBe(supportedLocales.de);
-  });
-
-  it("should choose de, even without language array", () => {
-    const locale = chooseLocale("de", []);
-    expect(locale).toBe(supportedLocales.de);
-  });
-
-  it("should choose es", () => {
-    const locale = chooseLocale("de", ["af", "be", "es"]);
-    expect(locale).toBe(supportedLocales.es);
-  });
-
-  it("should fallback en", () => {
-    const locale = chooseLocale("af", ["af", "be"]);
-    expect(locale).toBe(supportedLocales.en);
-  });
-});

package/src/useDateFormatter.ts

@@ -1,118 +0,0 @@
-/*
- * Copyright (c) 2020 - present Cloudogu GmbH
- *
- * This program is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
- * FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see https://www.gnu.org/licenses/.
- */
-
-import { useTranslation } from "react-i18next";
-import { enUS, de, es } from "date-fns/locale";
-import { formatDistance, format, Locale, parseISO } from "date-fns";
-
-type LocaleMap = {
-  [key: string]: Locale;
-};
-
-export const supportedLocales: LocaleMap = {
-  enUS,
-  en: enUS,
-  de,
-  es,
-};
-
-type Options = {
-  addSuffix: boolean;
-  locale: Locale;
-  timeZone?: string;
-};
-
-export const chooseLocale = (language: string, languages?: readonly string[]) => {
-  for (const lng of languages || []) {
-    const locale = supportedLocales[lng];
-    if (locale) {
-      return locale;
-    }
-  }
-
-  const locale = supportedLocales[language];
-  if (locale) {
-    return locale;
-  }
-
-  return enUS;
-};
-
-export type DateInput = Date | string;
-
-export type DateProps = {
-  date?: DateInput;
-  timeZone?: string;
-
-  /**
-   * baseDate is the date from which the distance is calculated,
-   * default is the current time (new Date()). This property
-   * is required to keep snapshots tests green over the time on
-   * ci server.
-   */
-  baseDate?: DateInput;
-};
-
-const createOptions = (locale: Locale, timeZone?: string) => {
-  const options: Options = {
-    addSuffix: true,
-    locale,
-  };
-  if (timeZone) {
-    options.timeZone = timeZone;
-  }
-  return options;
-};
-
-const createBaseDate = (baseDate?: DateInput) => {
-  if (baseDate) {
-    return toDate(baseDate);
-  }
-  return new Date();
-};
-
-const toDate = (value: DateInput): Date => {
-  if (value instanceof Date) {
-    return value;
-  }
-  return parseISO(value);
-};
-
-const useDateFormatter = ({ date, baseDate, timeZone }: DateProps) => {
-  const { i18n } = useTranslation();
-  if (!date) {
-    return null;
-  }
-
-  const isoDate = toDate(date);
-  const base = createBaseDate(baseDate);
-
-  const locale = chooseLocale(i18n.language, i18n.languages);
-  const options = createOptions(locale, timeZone);
-  return {
-    formatShort() {
-      return format(isoDate, "yyyy-MM-dd", options);
-    },
-    formatFull() {
-      return format(isoDate, "yyyy-MM-dd HH:mm:ss", options);
-    },
-    formatDistance() {
-      return formatDistance(isoDate, base, options);
-    },
-  };
-};
-
-export default useDateFormatter;