@scm-manager/ui-core 3.6.1 → 3.7.0

package/.storybook/main.js

@@ -22,7 +22,6 @@ const ReactDOM = require("react-dom");
 
 const root = path.resolve("..");
 
-
 const themedir = path.join(root, "ui-styles", "src");
 
 ReactDOM.createPortal = (node) => node;
@@ -46,7 +45,7 @@ module.exports = {
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "@storybook/addon-a11y",
-    "storybook-addon-pseudo-states"
+    "storybook-addon-pseudo-states",
   ],
   framework: "@storybook/react",
   webpackFinal: async (config) => {
@@ -75,6 +74,9 @@ module.exports = {
     // to filter our themes from the output.
     config.plugins.push(new RemoveThemesPlugin());
 
+    // force node version of "decode-named-character-reference" instead of browser version which does not work in web worker
+    config.resolve.alias["decode-named-character-reference"] = require.resolve("decode-named-character-reference");
+
     // force cjs instead of esm
     // https://github.com/tannerlinsley/react-query/issues/3513
     config.resolve.alias["react-query/devtools"] = require.resolve("react-query/devtools");

package/.storybook/preview.js

@@ -17,9 +17,9 @@
 import i18next from "i18next";
 import { initReactI18next } from "react-i18next";
 import { withI18next } from "storybook-addon-i18next";
-import React, {useEffect} from "react";
+import React, { useEffect } from "react";
 import withApiProvider from "./withApiProvider";
-import { withThemes } from 'storybook-addon-themes/react';
+import { withThemes } from "storybook-addon-themes/react";
 
 let i18n = i18next;
 
@@ -27,7 +27,7 @@ let i18n = i18next;
 // and not for storyshots
 if (!process.env.JEST_WORKER_ID) {
   const Backend = require("i18next-fetch-backend");
-  i18n = i18n.use(Backend.default);
+  i18n = i18n.use(Backend);
 }
 
 i18n.use(initReactI18next).init({
@@ -58,18 +58,18 @@ export const decorators = [
     },
   }),
   withApiProvider,
-  withThemes
+  withThemes,
 ];
 
-const Decorator = ({children, themeName}) => {
+const Decorator = ({ children, themeName }) => {
   useEffect(() => {
     const link = document.querySelector("#ui-theme");
     if (link && link["data-theme"] !== themeName) {
-      link.href = `ui-theme-${themeName}.css`;
+      link.href = `/ui-theme-${themeName}.css`;
       link["data-theme"] = themeName;
     }
   }, [themeName]);
-  return <>{children}</>
+  return <>{children}</>;
 };
 
 export const parameters = {
@@ -83,5 +83,5 @@ export const parameters = {
       { name: "highcontrast", color: "#050514" },
       { name: "dark", color: "#121212" },
     ],
-  }
+  },
 };

package/.turbo/turbo-typecheck.log

@@ -1,2 +1,2 @@
-@scm-manager/ui-core:typecheck: cache hit, replaying output 408bc17fda972cfa
+@scm-manager/ui-core:typecheck: cache hit, replaying output c71948b9c8540fde
 @scm-manager/ui-core:typecheck: $ tsc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-core",
-  "version": "3.6.1",
+  "version": "3.7.0",
   "main": "./src/index.ts",
   "license": "AGPL-3.0-only",
   "scripts": {
@@ -20,7 +20,7 @@
     "styled-components": "5"
   },
   "dependencies": {
-    "@scm-manager/ui-api": "3.6.1",
+    "@scm-manager/ui-api": "3.7.0",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-slot": "^1.0.1",
     "@radix-ui/react-visually-hidden": "^1.0.3",
@@ -37,7 +37,7 @@
     "@scm-manager/eslint-config": "^2.17.0",
     "@scm-manager/tsconfig": "^2.12.0",
     "@scm-manager/babel-preset": "^2.13.1",
-    "@scm-manager/ui-types": "3.6.1",
+    "@scm-manager/ui-types": "3.7.0",
     "@types/mousetrap": "1.6.5",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/react": "12.1.5",

package/src/base/buttons/Button.tsx

@@ -29,6 +29,7 @@ export const ButtonVariants = {
   SECONDARY: "secondary",
   TERTIARY: "tertiary",
   SIGNAL: "signal",
+  INFO: "info",
 } as const;
 
 export const ButtonVariantList = Object.values(ButtonVariants);
@@ -41,6 +42,7 @@ const createButtonClasses = (variant?: ButtonVariant, isLoading?: boolean) =>
     "is-primary is-outlined": variant === "secondary",
     "is-primary is-inverted": variant === "tertiary",
     "is-warning": variant === "signal",
+    "is-info is-outlined": variant === "info",
     "is-loading": isLoading,
   });
 

package/src/base/buttons/index.ts

@@ -14,5 +14,5 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-export { Button, LinkButton, ExternalLinkButton, ExternalLink, ButtonVariants } from "./Button";
+export { Button, LinkButton, IconButton, ExternalLinkButton, ExternalLink, ButtonVariants } from "./Button";
 export { default as Icon } from "./Icon";

package/src/base/helpers/index.ts

@@ -15,4 +15,5 @@
  */
 
 export { default as useAriaId } from "./useAriaId";
+export { default as useDocumentTitle, useDocumentTitleForRepository } from "./useDocumentTitle";
 export { createAttributesForTesting, isDevBuild } from "./devbuild";

package/src/base/helpers/useDocumentTitle.test.ts

@@ -0,0 +1,48 @@
+/*
+ * 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 { renderHook } from "@testing-library/react-hooks";
+import { Repository } from "@scm-manager/ui-types";
+import { binder } from "@scm-manager/ui-extensions";
+import useDocumentTitle, { useDocumentTitleForRepository } from "./useDocumentTitle";
+
+describe("useDocumentTitle", () => {
+  it("should set document title", () => {
+    renderHook(() => useDocumentTitle("Part1", "Part2"));
+    expect(document.title).toBe("Part1 - Part2 - SCM-Manager");
+  });
+
+  it("should append title if extension is a string", () => {
+    binder.getExtension = () => ({ documentTitle: "myInstance" });
+    renderHook(() => useDocumentTitle("Part1", "Part2"));
+    expect(document.title).toBe("Part1 - Part2 - SCM-Manager (myInstance)");
+  });
+
+  it("should modify title if extension is a function", () => {
+    binder.getExtension = () => ({ documentTitle: (title: string) => `Modified: ${title}` });
+    renderHook(() => useDocumentTitle("Part1", "Part2"));
+    expect(document.title).toBe("Modified: Part1 - Part2 - SCM-Manager");
+  });
+});
+
+describe("useDocumentTitleForRepository", () => {
+  const repository: Repository = { namespace: "namespace", name: "name" } as Repository;
+
+  it("should set the document title for a repository", () => {
+    renderHook(() => useDocumentTitleForRepository(repository, "Part1", "Part2"));
+    expect(document.title).toBe("Part1 - Part2 - namespace/name - SCM-Manager");
+  });
+});

package/src/base/helpers/useDocumentTitle.ts

@@ -0,0 +1,51 @@
+/*
+ * 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 { useEffect } from "react";
+import { binder, extensionPoints } from "@scm-manager/ui-extensions";
+import { Repository } from "@scm-manager/ui-types";
+
+/**
+ * Hook to set the document title.
+ *
+ * @param titleParts - An array of title parts to be joined.
+ *                     Title parts should be sorted with the highest specificity first.
+ */
+export default function useDocumentTitle(...titleParts: string[]) {
+  useEffect(() => {
+    const extension = binder.getExtension<extensionPoints.DocumentTitleExtensionPoint>("document.title");
+    let title = `${titleParts.join(" - ")} - SCM-Manager`;
+    if (extension) {
+      if (typeof extension.documentTitle === "string") {
+        title += ` (${extension.documentTitle})`;
+      } else if (typeof extension.documentTitle === "function") {
+        title = extension.documentTitle(title);
+      }
+    }
+    document.title = title;
+  }, [titleParts]);
+}
+
+/**
+ * Hook to set the document title for a repository.
+ *
+ * @param repository - The repository for which the title should be set.
+ * @param titleParts - An array of title parts to be joined.
+ *                     Title parts should be sorted with the highest specificity first.
+ */
+export function useDocumentTitleForRepository(repository: Repository, ...titleParts: string[]) {
+  useDocumentTitle(...titleParts, repository.namespace + "/" + repository.name);
+}

package/src/base/misc/Title.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { HTMLAttributes, useEffect } from "react";
+import React, { HTMLAttributes } from "react";
 import classNames from "classnames";
 
 type Props = {
@@ -24,16 +24,6 @@ type Props = {
 };
 const Title = React.forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement> & Props>(
   ({ title, customPageTitle, preventRefreshingPageTitle, children, className, ...props }, ref) => {
-    useEffect(() => {
-      if (!preventRefreshingPageTitle) {
-        if (customPageTitle) {
-          document.title = customPageTitle;
-        } else if (title) {
-          document.title = title;
-        }
-      }
-    }, [title, preventRefreshingPageTitle, customPageTitle]);
-
     if (children || title) {
       return (
         <h1 className={classNames("title", className)} {...props} ref={ref}>