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

package/src/base/text/SplitAndReplace.stories.tsx

@@ -14,62 +14,140 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
+// import React from "react";
+// import { ComponentMeta, ComponentStory } from "@storybook/react";
+// import SplitAndReplace from "./SplitAndReplace";
+//
+// export default {
+//   title: "SplitAndReplace",
+//   component: SplitAndReplace,
+// } as ComponentMeta<typeof SplitAndReplace>;
+//
+// const textOne = "'So this is it,` said Arthur, 'We are going to die.`";
+// const textTwo = "'Yes,` said Ford, 'except... no! Wait a minute!`";
+//
+// export const ReplaceOnce: ComponentStory<typeof SplitAndReplace> = () => {
+//   const replacements = [
+//     {
+//       textToReplace: "'",
+//       replacement: <span>!</span>,
+//       replaceAll: false,
+//     },
+//   ];
+//   return (
+//     <div>
+//       <h3>Replace ' with ! once</h3>
+//       <label>Original text:</label>
+//       <p>{textOne}</p>
+//       <label>Text with replacements:</label>
+//       <p>
+//         <SplitAndReplace text={textOne} replacements={replacements} />
+//       </p>
+//     </div>
+//   );
+// };
+//
+// export const ReplaceAll: ComponentStory<typeof SplitAndReplace> = () => {
+//   const replacements = [
+//     {
+//       textToReplace: "'",
+//       replacement: <span>!</span>,
+//       replaceAll: true,
+//     },
+//     {
+//       textToReplace: "`",
+//       replacement: <span>?</span>,
+//       replaceAll: true,
+//     },
+//   ];
+//   return (
+//     <div>
+//       <h3>Replace all ` with ? and ' with !</h3>
+//       <label>Original text:</label>
+//       <p>{textTwo}</p>
+//
+//       <label> Text with replacements: </label>
+//       <p>
+//         <SplitAndReplace text={textTwo} replacements={replacements} />
+//       </p>
+//     </div>
+//   );
+// };
+
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
+
 import SplitAndReplace from "./SplitAndReplace";
 
-export default {
-  title: "SplitAndReplace",
+const textOne = "'So this is it,' said Arthur, 'We are going to die.'";
+const textTwo = "'Yes,' said Ford, 'except... no! Wait a minute!'";
+
+const meta: Meta<typeof SplitAndReplace> = {
+  title: "Utilities/SplitAndReplace",
   component: SplitAndReplace,
-} as ComponentMeta<typeof SplitAndReplace>;
+  decorators: [
+    (Story) => (
+      <div style={{ margin: "2rem" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ["autodocs"],
+};
 
-const textOne = "'So this is it,` said Arthur, 'We are going to die.`";
-const textTwo = "'Yes,` said Ford, 'except... no! Wait a minute!`";
+export default meta;
 
-export const ReplaceOnce: ComponentStory<typeof SplitAndReplace> = () => {
-  const replacements = [
-    {
-      textToReplace: "'",
-      replacement: <span>!</span>,
-      replaceAll: false,
-    },
-  ];
-  return (
-    <div>
-      <h3>Replace ' with ! once</h3>
-      <label>Original text:</label>
-      <p>{textOne}</p>
-      <label>Text with replacements:</label>
-      <p>
-        <SplitAndReplace text={textOne} replacements={replacements} />
-      </p>
-    </div>
-  );
-};
+type Story = StoryObj<typeof meta>;
 
-export const ReplaceAll: ComponentStory<typeof SplitAndReplace> = () => {
-  const replacements = [
-    {
-      textToReplace: "'",
-      replacement: <span>!</span>,
-      replaceAll: true,
-    },
-    {
-      textToReplace: "`",
-      replacement: <span>?</span>,
-      replaceAll: true,
-    },
-  ];
-  return (
-    <div>
-      <h3>Replace all ` with ? and ' with !</h3>
-      <label>Original text:</label>
-      <p>{textTwo}</p>
+export const ReplaceOnce: Story = {
+  name: "Replace Once",
+  render: () => {
+    const replacements = [
+      {
+        textToReplace: "'",
+        replacement: <span style={{ color: "red", fontWeight: "bold" }}>!</span>,
+        replaceAll: false,
+      },
+    ];
+    return (
+      <div>
+        <h3>Replace first instance of ' with !</h3>
+        <label>Original text:</label>
+        <p>{textOne}</p>
+        <label>Text with replacement:</label>
+        <p>
+          <SplitAndReplace text={textOne} replacements={replacements} />
+        </p>
+      </div>
+    );
+  },
+};
 
-      <label> Text with replacements: </label>
-      <p>
-        <SplitAndReplace text={textTwo} replacements={replacements} />
-      </p>
-    </div>
-  );
+export const ReplaceAll: Story = {
+  name: "Replace All",
+  render: () => {
+    const replacements = [
+      {
+        textToReplace: "'",
+        replacement: <span style={{ color: "red", fontWeight: "bold" }}>!</span>,
+        replaceAll: true,
+      },
+      {
+        textToReplace: "`",
+        replacement: <span style={{ color: "blue", fontWeight: "bold" }}>?</span>,
+        replaceAll: true,
+      },
+    ];
+    return (
+      <div>
+        <h3>Replace all ` with ? and ' with !</h3>
+        <label>Original text:</label>
+        <p>{textTwo}</p>
+        <label>Text with replacements:</label>
+        <p>
+          <SplitAndReplace text={textTwo} replacements={replacements} />
+        </p>
+      </div>
+    );
+  },
 };

package/src/base/text/index.ts

@@ -14,4 +14,4 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-export { default as SplitAndReplace, Replacement } from "./SplitAndReplace";
+export { default as SplitAndReplace, type Replacement } from "./SplitAndReplace";

package/.storybook/RemoveThemesPlugin.js

@@ -1,49 +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/.
- */
-
-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

@@ -1,86 +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/.
- */
-
-const path = require("path");
-const fs = require("fs");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const RemoveThemesPlugin = require("./RemoveThemesPlugin");
-const ReactDOM = require("react-dom");
-
-const root = path.resolve("..");
-
-const themedir = path.join(root, "ui-styles", "src");
-
-ReactDOM.createPortal = (node) => node;
-
-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: ["../docs/**/*.stories.mdx", "../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "storybook-addon-i18next",
-    "storybook-addon-themes",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@storybook/addon-a11y",
-    "storybook-addon-pseudo-states",
-  ],
-  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 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");
-
-    return config;
-  },
-};

package/.storybook/preview.js

@@ -1,87 +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 i18next from "i18next";
-import { initReactI18next } from "react-i18next";
-import { withI18next } from "storybook-addon-i18next";
-import React, { useEffect } from "react";
-import withApiProvider from "./withApiProvider";
-import { withThemes } from "storybook-addon-themes/react";
-
-let i18n = i18next;
-
-// only use fetch backend for storybook
-// and not for storyshots
-if (!process.env.JEST_WORKER_ID) {
-  const Backend = require("i18next-fetch-backend");
-  i18n = i18n.use(Backend);
-}
-
-i18n.use(initReactI18next).init({
-  whitelist: ["en", "de", "es"],
-  lng: "en",
-  fallbackLng: "en",
-  interpolation: {
-    escapeValue: false,
-  },
-  react: {
-    useSuspense: false,
-  },
-  backend: {
-    loadPath: "/locales/{{lng}}/{{ns}}.json",
-    init: {
-      credentials: "same-origin",
-    },
-  },
-});
-
-export const decorators = [
-  withI18next({
-    i18n,
-    languages: {
-      en: "English",
-      de: "Deutsch",
-      es: "Spanisch",
-    },
-  }),
-  withApiProvider,
-  withThemes,
-];
-
-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 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/src/base/buttons/image-snapshot.test.ts

@@ -1,26 +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 path from "path";
-import initStoryshots from "@storybook/addon-storyshots";
-import { imageSnapshot } from "@storybook/addon-storyshots-puppeteer";
-
-initStoryshots({
-  suite: "Image snapshots",
-  test: imageSnapshot({
-    storybookUrl: `file://${path.resolve(__dirname, "../storybook-static")}`,
-  })
-});