@scm-manager/ui-layout 2.43.2-20230501-105257

package/.storybook/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@scm-manager/babel-preset"],
+  "plugins": ["@babel/plugin-syntax-dynamic-import"]
+}

package/.storybook/RemoveThemesPlugin.js

@@ -0,0 +1,57 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+class RemoveThemesPlugin {
+  apply (compiler) {
+    compiler.hooks.compilation.tap('RemoveThemesPlugin', (compilation) => {
+
+      HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync(
+        'RemoveThemesPlugin',
+        (data, cb) => {
+          
+          // remove generated style-loader bundles from the page
+          // there should be a better way, which does not generate the bundles at all
+          // but for now it works
+          if (data.assets.js) {
+            data.assets.js = data.assets.js.filter(bundle => !bundle.startsWith("ui-theme-"))
+                                           .filter(bundle => !bundle.startsWith("runtime~ui-theme-"))
+          }
+
+          // remove css links to avoid conflicts with the themes
+          // so we remove all and add our own via preview-head.html
+          if (data.assets.css) {
+            data.assets.css = data.assets.css.filter(css => !css.startsWith("ui-theme-"))
+          }
+
+          // Tell webpack to move on
+          cb(null, data)
+        }
+      )
+    })
+  }
+}
+
+module.exports = RemoveThemesPlugin

package/.storybook/main.js

@@ -0,0 +1,89 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const path = require("path");
+const fs = require("fs");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const RemoveThemesPlugin = require("./RemoveThemesPlugin");
+
+const root = path.resolve("..");
+
+const themedir = path.join(root, "ui-styles", "src");
+
+const themes = fs
+  .readdirSync(themedir)
+  .map((filename) => path.parse(filename))
+  .filter((p) => p.ext === ".scss")
+  .reduce((entries, current) => ({ ...entries, [`ui-theme-${current.name}`]: path.join(themedir, current.base) }), {});
+
+module.exports = {
+  typescript: { reactDocgen: false },
+  core: {
+    builder: "webpack5",
+  },
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
+  addons: [
+    "storybook-addon-i18next",
+    "storybook-addon-themes",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-a11y",
+    "storybook-addon-pseudo-states",
+    "storybook-addon-mock",
+  ],
+  framework: "@storybook/react",
+  webpackFinal: async (config) => {
+    // add our themes to webpack entry points
+    config.entry = {
+      main: config.entry,
+      ...themes,
+    };
+
+    // create separate css files for our themes
+    config.plugins.push(
+      new MiniCssExtractPlugin({
+        filename: "[name].css",
+        ignoreOrder: false,
+      })
+    );
+
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+    });
+
+    // the html-webpack-plugin adds the generated css and js files to the iframe,
+    // which overrides our manually loaded css files.
+    // So we use a custom plugin which uses a hook of html-webpack-plugin
+    // to filter our themes from the output.
+    config.plugins.push(new RemoveThemesPlugin());
+
+    // force cjs instead of esm
+    // https://github.com/tannerlinsley/react-query/issues/3513
+    config.resolve.alias["react-query/devtools"] = require.resolve("react-query/devtools");
+
+    return config;
+  },
+};

package/.storybook/preview-head.html

@@ -0,0 +1,26 @@
+<!--
+    MIT License
+
+    Copyright (c) 2020-present Cloudogu GmbH and Contributors
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE.
+-->
+
+<link id="ui-theme" data-theme="light" rel="stylesheet" type="text/css" href="/ui-theme-light.css">
+

package/.storybook/preview.js

@@ -0,0 +1,67 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { useEffect } from "react";
+import { initReactI18next } from "react-i18next";
+import i18n from "i18next";
+import { withThemes } from "storybook-addon-themes";
+
+i18n.use(initReactI18next).init({
+  whitelist: ["en", "de"],
+  lng: "en",
+  fallbackLng: "en",
+  interpolation: {
+    escapeValue: false,
+  },
+  react: {
+    useSuspense: false,
+  },
+});
+
+const Decorator = ({ children, themeName }) => {
+  useEffect(() => {
+    const link = document.querySelector("#ui-theme");
+    if (link && link["data-theme"] !== themeName) {
+      link.href = `ui-theme-${themeName}.css`;
+      link["data-theme"] = themeName;
+    }
+  }, [themeName]);
+  return <>{children}</>;
+};
+
+export const decorators = [withThemes];
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  themes: {
+    Decorator,
+    clearable: false,
+    default: "light",
+    list: [
+      { name: "light", color: "#fff" },
+      { name: "highcontrast", color: "#050514" },
+      { name: "dark", color: "#121212" },
+    ],
+  },
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,15 @@
+@scm-manager/ui-layout:build: cache hit, replaying output 353a44f40eb02689
+@scm-manager/ui-layout:build: $ tsup ./src/index.ts -d build --format esm,cjs --dts
+@scm-manager/ui-layout:build: CLI Building entry: ./src/index.ts
+@scm-manager/ui-layout:build: CLI Using tsconfig: tsconfig.json
+@scm-manager/ui-layout:build: CLI tsup v6.2.3
+@scm-manager/ui-layout:build: CLI Target: node14
+@scm-manager/ui-layout:build: ESM Build start
+@scm-manager/ui-layout:build: CJS Build start
+@scm-manager/ui-layout:build: ESM build/index.mjs 3.11 KB
+@scm-manager/ui-layout:build: ESM ⚡️ Build success in 59ms
+@scm-manager/ui-layout:build: CJS build/index.js 5.07 KB
+@scm-manager/ui-layout:build: CJS ⚡️ Build success in 41ms
+@scm-manager/ui-layout:build: DTS Build start
+@scm-manager/ui-layout:build: DTS ⚡️ Build success in 6352ms
+@scm-manager/ui-layout:build: DTS build/index.d.ts 1.31 KB

package/build/index.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+
+declare const CardList: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLUListElement> & react.RefAttributes<HTMLUListElement>> & {
+    Card: react.ForwardRefExoticComponent<react.LiHTMLAttributes<HTMLLIElement> & {
+        action?: react.ReactElement<any, string | react.JSXElementConstructor<any>> | undefined;
+    } & react.RefAttributes<HTMLLIElement>> & {
+        Row: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+        Title: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLHeadingElement> & react.RefAttributes<HTMLHeadingElement>>;
+    };
+};
+declare const CardListBox: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLUListElement> & react.RefAttributes<HTMLUListElement>> & {
+    Card: react.ForwardRefExoticComponent<react.LiHTMLAttributes<HTMLLIElement> & {
+        action?: react.ReactElement<any, string | react.JSXElementConstructor<any>> | undefined;
+    } & react.RefAttributes<HTMLLIElement>> & {
+        Row: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+        Title: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLHeadingElement> & react.RefAttributes<HTMLHeadingElement>>;
+    };
+};
+
+export { CardList, CardListBox };

package/build/index.js

@@ -0,0 +1,148 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  CardList: () => CardList2,
+  CardListBox: () => CardListBox2
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/card-list/CardList.tsx
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_styled_components = __toESM(require("styled-components"));
+var CardListElement = import_styled_components.default.ul`
+  > * + * {
+    border-top: var(--scm-border);
+    margin-top: 0.5rem;
+    padding-top: 1rem !important;
+
+    *:is(h1, h2, h3, h4, h5, h6) a::after {
+      top: 0.5rem !important;
+    }
+  }
+`;
+var CardList = import_react.default.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ import_react.default.createElement(CardListElement, {
+  ref,
+  ...props,
+  className: (0, import_classnames.default)(className, "is-flex", "is-flex-direction-column")
+}, children));
+var CardListBox = import_react.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ import_react.default.createElement(CardList, {
+  className: (0, import_classnames.default)(className, "p-2 box"),
+  ref,
+  ...props
+}, children));
+var CardList_default = CardList;
+
+// src/card-list/CardRow.tsx
+var import_react2 = __toESM(require("react"));
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_classnames2 = __toESM(require("classnames"));
+var CardRowElement = import_styled_components2.default.div`
+  grid-column: 1 / 2;
+`;
+var CardRow = import_react2.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ import_react2.default.createElement(CardRowElement, {
+  className: (0, import_classnames2.default)(className),
+  ref,
+  ...props
+}, children));
+var CardRow_default = CardRow;
+
+// src/card-list/Card.tsx
+var import_react3 = __toESM(require("react"));
+var import_styled_components3 = __toESM(require("styled-components"));
+var import_classnames3 = __toESM(require("classnames"));
+var CardElement = import_styled_components3.default.li`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) min-content;
+  grid-template-rows: auto;
+`;
+var CardActionContainer = import_styled_components3.default.span`
+  grid-column: -1;
+  grid-row: 1;
+  margin-top: -0.5rem;
+  margin-right: -0.5rem;
+`;
+var Card = import_react3.default.forwardRef(({ className, children, action, ...props }, ref) => /* @__PURE__ */ import_react3.default.createElement(CardElement, {
+  className: (0, import_classnames3.default)(className, "is-relative", "p-2"),
+  ref,
+  ...props
+}, children, action ? /* @__PURE__ */ import_react3.default.createElement(CardActionContainer, null, action) : null));
+var Card_default = Card;
+
+// src/card-list/CardTitle.tsx
+var import_react4 = __toESM(require("react"));
+var import_styled_components4 = __toESM(require("styled-components"));
+var import_classnames4 = __toESM(require("classnames"));
+var CardTitleElement = import_styled_components4.default.h3`
+  a {
+    color: var(--scm-secondary-text);
+
+    &:focus {
+      outline: none;
+      &::after {
+        outline: #af3ee7 3px solid;
+        outline-offset: 0px;
+      }
+    }
+
+    &:hover::after {
+      background-color: var(--scm-hover-color-blue);
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      border-radius: 4px;
+    }
+  }
+`;
+var CardTitle = import_react4.default.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ import_react4.default.createElement(CardTitleElement, {
+  className: (0, import_classnames4.default)(className, "is-ellipsis-overflow"),
+  ref,
+  ...props
+}, children));
+var CardTitle_default = CardTitle;
+
+// src/index.ts
+var CardListExport = {
+  Card: Object.assign(Card_default, {
+    Row: CardRow_default,
+    Title: CardTitle_default
+  })
+};
+var CardList2 = Object.assign(CardList_default, CardListExport);
+var CardListBox2 = Object.assign(CardListBox, CardListExport);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CardList,
+  CardListBox
+});

package/build/index.mjs

@@ -0,0 +1,114 @@
+// src/card-list/CardList.tsx
+import React from "react";
+import classNames from "classnames";
+import styled from "styled-components";
+var CardListElement = styled.ul`
+  > * + * {
+    border-top: var(--scm-border);
+    margin-top: 0.5rem;
+    padding-top: 1rem !important;
+
+    *:is(h1, h2, h3, h4, h5, h6) a::after {
+      top: 0.5rem !important;
+    }
+  }
+`;
+var CardList = React.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ React.createElement(CardListElement, {
+  ref,
+  ...props,
+  className: classNames(className, "is-flex", "is-flex-direction-column")
+}, children));
+var CardListBox = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React.createElement(CardList, {
+  className: classNames(className, "p-2 box"),
+  ref,
+  ...props
+}, children));
+var CardList_default = CardList;
+
+// src/card-list/CardRow.tsx
+import React2 from "react";
+import styled2 from "styled-components";
+import classNames2 from "classnames";
+var CardRowElement = styled2.div`
+  grid-column: 1 / 2;
+`;
+var CardRow = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React2.createElement(CardRowElement, {
+  className: classNames2(className),
+  ref,
+  ...props
+}, children));
+var CardRow_default = CardRow;
+
+// src/card-list/Card.tsx
+import React3 from "react";
+import styled3 from "styled-components";
+import classNames3 from "classnames";
+var CardElement = styled3.li`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) min-content;
+  grid-template-rows: auto;
+`;
+var CardActionContainer = styled3.span`
+  grid-column: -1;
+  grid-row: 1;
+  margin-top: -0.5rem;
+  margin-right: -0.5rem;
+`;
+var Card = React3.forwardRef(({ className, children, action, ...props }, ref) => /* @__PURE__ */ React3.createElement(CardElement, {
+  className: classNames3(className, "is-relative", "p-2"),
+  ref,
+  ...props
+}, children, action ? /* @__PURE__ */ React3.createElement(CardActionContainer, null, action) : null));
+var Card_default = Card;
+
+// src/card-list/CardTitle.tsx
+import React4 from "react";
+import styled4 from "styled-components";
+import classNames4 from "classnames";
+var CardTitleElement = styled4.h3`
+  a {
+    color: var(--scm-secondary-text);
+
+    &:focus {
+      outline: none;
+      &::after {
+        outline: #af3ee7 3px solid;
+        outline-offset: 0px;
+      }
+    }
+
+    &:hover::after {
+      background-color: var(--scm-hover-color-blue);
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      border-radius: 4px;
+    }
+  }
+`;
+var CardTitle = React4.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ React4.createElement(CardTitleElement, {
+  className: classNames4(className, "is-ellipsis-overflow"),
+  ref,
+  ...props
+}, children));
+var CardTitle_default = CardTitle;
+
+// src/index.ts
+var CardListExport = {
+  Card: Object.assign(Card_default, {
+    Row: CardRow_default,
+    Title: CardTitle_default
+  })
+};
+var CardList2 = Object.assign(CardList_default, CardListExport);
+var CardListBox2 = Object.assign(CardListBox, CardListExport);
+export {
+  CardList2 as CardList,
+  CardListBox2 as CardListBox
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@scm-manager/ui-layout",
+  "private": false,
+  "version": "2.43.2-20230501-105257",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "module": "build/index.mjs",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup ./src/index.ts -d build --format esm,cjs --dts",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.19.0",
+    "@scm-manager/eslint-config": "^2.16.0",
+    "@scm-manager/prettier-config": "^2.10.1",
+    "@scm-manager/tsconfig": "^2.13.0",
+    "@scm-manager/ui-styles": "2.43.2-20230501-105257",
+    "@scm-manager/ui-overlays": "2.43.2-20230501-105257",
+    "@scm-manager/ui-buttons": "2.43.2-20230501-105257",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-interactions": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/builder-webpack5": "^6.5.10",
+    "@storybook/manager-webpack5": "^6.5.10",
+    "@storybook/react": "^6.5.10",
+    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-docs": "^6.5.14",
+    "babel-loader": "^8.2.5",
+    "storybook-addon-mock": "^3.2.0",
+    "storybook-addon-themes": "^6.1.0",
+    "tsup": "^6.2.3"
+  },
+  "peerDependencies": {
+    "react": "17",
+    "react-dom": "17",
+    "classnames": "2",
+    "styled-components": "5"
+  },
+  "prettier": "@scm-manager/prettier-config",
+  "eslintConfig": {
+    "extends": "@scm-manager/eslint-config"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/card-list/Card.tsx

@@ -0,0 +1,57 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { LiHTMLAttributes } from "react";
+import styled from "styled-components";
+import classNames from "classnames";
+
+const CardElement = styled.li`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) min-content;
+  grid-template-rows: auto;
+`;
+
+const CardActionContainer = styled.span`
+  grid-column: -1;
+  grid-row: 1;
+  margin-top: -0.5rem;
+  margin-right: -0.5rem;
+`;
+
+type Props = LiHTMLAttributes<HTMLLIElement> & {
+  action?: React.ReactElement;
+};
+
+/**
+ * @beta
+ * @since 2.44.0
+ */
+const Card = React.forwardRef<HTMLLIElement, Props>(({ className, children, action, ...props }, ref) => (
+  <CardElement className={classNames(className, "is-relative", "p-2")} ref={ref} {...props}>
+    {children}
+    {action ? <CardActionContainer>{action}</CardActionContainer> : null}
+  </CardElement>
+));
+
+export default Card;

package/src/card-list/CardList.stories.tsx

@@ -0,0 +1,117 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import StoryRouter from "storybook-react-router";
+import { ComponentMeta, StoryFn } from "@storybook/react";
+import React, { ComponentProps } from "react";
+import { ExtractProps } from "@scm-manager/ui-extensions";
+import { Link } from "react-router-dom";
+import CardList, { CardListBox } from "./CardList";
+import Card from "./Card";
+import CardTitle from "./CardTitle";
+import { Menu } from "@scm-manager/ui-overlays";
+import { Icon } from "@scm-manager/ui-buttons";
+import CardRow from "./CardRow";
+
+export default {
+  title: "CardList",
+  component: CardList,
+  decorators: [StoryRouter()],
+} as ComponentMeta<typeof CardList>;
+
+const Template: StoryFn<ExtractProps<typeof CardListBox>> = (args) => <CardListBox {...args} />;
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Default.args = {
+  children: [
+    // eslint-disable-next-line no-console
+    <Card>
+      <CardRow>
+        <CardTitle>My favorite repository</CardTitle>
+      </CardRow>
+    </Card>,
+    <Card>
+      <CardRow>
+        <CardTitle>
+          <Link aria-label="Edit My least liked repo" to="/cards/1">
+            My least liked repo
+          </Link>
+        </CardTitle>
+      </CardRow>
+    </Card>,
+    <Card
+      action={
+        <Menu>
+          <Menu.Button>
+            <Icon>trash</Icon>
+            Delete
+          </Menu.Button>
+        </Menu>
+      }
+    >
+      <CardRow className="is-flex is-justify-content-space-between">
+        <CardTitle>
+          <Link aria-label="Edit My other favorite repository" to="/cards/1">
+            My other favorite repository
+          </Link>
+        </CardTitle>
+        (TAG)
+      </CardRow>
+      <CardRow className="is-size-6">
+        This is a card description in the second row. Highlighting how the layout flows if there are multiple rows in
+        one card while the card also has an action.
+      </CardRow>
+      <CardRow className="is-size-6 is-flex is-justify-content-space-between">
+        <span>This is a third row, lets see how this works out.</span>(MERGED)
+      </CardRow>
+    </Card>,
+    <Card>
+      <CardRow className="is-flex is-align-items-center">
+        <CardTitle>
+          <Link
+            aria-label="Edit Enhance descriptions to differentiate between dumps with and without metadata."
+            to="/cards/1"
+          >
+            Enhance descriptions to differentiate between dumps with and without metadata.
+          </Link>
+        </CardTitle>
+        <small>#13456</small>
+      </CardRow>
+      <CardRow className="is-size-6">
+        Another Name requested to merge <strong>feature/asdkjertg</strong> into <strong>develop</strong> about 3 months
+        ago.
+      </CardRow>
+      <CardRow className="is-size-6 is-flex is-justify-content-space-between">
+        <div>
+          <span>Tasks (3/3)</span>
+          <span>Reviewers (1)</span>
+          <span>Analyses (✓)</span>
+          <span>Workflow (✓)</span>
+        </div>
+        <span>(OPEN)</span>
+      </CardRow>
+    </Card>,
+  ],
+} as ComponentProps<typeof CardListBox>;

package/src/card-list/CardList.tsx

@@ -0,0 +1,67 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { HTMLAttributes } from "react";
+import classNames from "classnames";
+import styled from "styled-components";
+
+const CardListElement = styled.ul`
+  > * + * {
+    border-top: var(--scm-border);
+    margin-top: 0.5rem;
+    padding-top: 1rem !important;
+
+    *:is(h1, h2, h3, h4, h5, h6) a::after {
+      top: 0.5rem !important;
+    }
+  }
+`;
+
+type Props = HTMLAttributes<HTMLUListElement>;
+
+/**
+ * The {@link CardList.Card.Title} is currently represented as a `h3`, which means the list can only be used on the top level of the page without breaking accessibility.
+ *
+ * @beta
+ * @since 2.44.0
+ */
+const CardList = React.forwardRef<HTMLUListElement, Props>(({ children, className, ...props }, ref) => (
+  <CardListElement ref={ref} {...props} className={classNames(className, "is-flex", "is-flex-direction-column")}>
+    {children}
+  </CardListElement>
+));
+
+/**
+ * The {@link CardList.Card.Title} is currently represented as a `h3`, which means the list can only be used on the top level of the page without breaking accessibility.
+ *
+ * @beta
+ * @since 2.44.0
+ */
+export const CardListBox = React.forwardRef<HTMLUListElement, Props>(({ className, children, ...props }, ref) => (
+  <CardList className={classNames(className, "p-2 box")} ref={ref} {...props}>
+    {children}
+  </CardList>
+));
+
+export default CardList;

package/src/card-list/CardRow.tsx

@@ -0,0 +1,45 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { HTMLAttributes } from "react";
+import styled from "styled-components";
+import classNames from "classnames";
+
+const CardRowElement = styled.div`
+  grid-column: 1 / 2;
+`;
+
+type Props = HTMLAttributes<HTMLDivElement>;
+
+/**
+ * @beta
+ * @since 2.44.0
+ */
+const CardRow = React.forwardRef<HTMLDivElement, Props>(({ className, children, ...props }, ref) => (
+  <CardRowElement className={classNames(className)} ref={ref} {...props}>
+    {children}
+  </CardRowElement>
+));
+
+export default CardRow;

package/src/card-list/CardTitle.tsx

@@ -0,0 +1,79 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { HTMLAttributes } from "react";
+import styled from "styled-components";
+import classNames from "classnames";
+
+const CardTitleElement = styled.h3`
+  a {
+    color: var(--scm-secondary-text);
+
+    &:focus {
+      outline: none;
+      &::after {
+        outline: #af3ee7 3px solid;
+        outline-offset: 0px;
+      }
+    }
+
+    &:hover::after {
+      background-color: var(--scm-hover-color-blue);
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      border-radius: 4px;
+    }
+  }
+`;
+
+type Props = HTMLAttributes<HTMLHeadingElement>;
+
+/**
+ * A card title may contain a link as its only child which will be automatically stretched to cover the whole card area.
+ *
+ * If a card title has a link, individual card elements which should be interactive have to get the `is-relative` class.
+ *
+ * The card title (or enclosed link) content must be an accessible text and must not contain any other interactive elements.
+ *
+ * You can wrap the title in a {@link CardList.Card.Row} to introduce other elements next to the title.
+ *
+ * The title (or its enclosing row) must be the first element in a {@link CardList.Card}.
+ *
+ * @beta
+ * @since 2.44.0
+ */
+const CardTitle = React.forwardRef<HTMLHeadingElement, Props>(({ children, className, ...props }, ref) => (
+  <CardTitleElement className={classNames(className, "is-ellipsis-overflow")} ref={ref} {...props}>
+    {children}
+  </CardTitleElement>
+));
+
+export default CardTitle;

package/src/index.ts

@@ -0,0 +1,38 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import CardListComponent, { CardListBox as CardListBoxComponent } from "./card-list/CardList";
+import CardRow from "./card-list/CardRow";
+import Card from "./card-list/Card";
+import CardTitle from "./card-list/CardTitle";
+
+const CardListExport = {
+  Card: Object.assign(Card, {
+    Row: CardRow,
+    Title: CardTitle,
+  }),
+};
+
+export const CardList = Object.assign(CardListComponent, CardListExport);
+export const CardListBox = Object.assign(CardListBoxComponent, CardListExport);

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@scm-manager/tsconfig"
+}