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

package/src/table/Table.tsx

@@ -28,10 +28,7 @@ type Props = {
   className?: string;
 };
 
-/**
- * @deprecated
- */
-const Table: FC<Props> = ({ data, sortable, children, emptyMessage, className }) => {
+const Table: FC<Props> = ({ data, sortable = true, children, emptyMessage, className }) => {
   const [tableData, setTableData] = useState(data);
   useEffect(() => {
     setTableData(data);
@@ -41,12 +38,14 @@ const Table: FC<Props> = ({ data, sortable, children, emptyMessage, className })
   const [hoveredColumnIndex, setHoveredColumnIndex] = useState<number | undefined>();
 
   const isSortable = (child: ReactElement) => {
+    // @ts-ignore
     return sortable && child.props.createComparator;
   };
 
   const sortFunctions: Comparator | undefined[] = [];
   React.Children.forEach(children, (child, index) => {
     if (child && isSortable(child as ReactElement)) {
+      // @ts-ignore
       sortFunctions.push((child as ReactElement).props.createComparator((child as ReactElement).props, index));
     } else {
       sortFunctions.push(undefined);
@@ -57,6 +56,7 @@ const Table: FC<Props> = ({ data, sortable, children, emptyMessage, className })
     return (
       <tr key={rowIndex}>
         {React.Children.map(children, (child, columnIndex) => {
+          // @ts-ignore
           const { className: columnClassName, ...childProperties } = (child as ReactElement).props;
           return (
             <td className={columnClassName}>
@@ -116,6 +116,7 @@ const Table: FC<Props> = ({ data, sortable, children, emptyMessage, className })
               onMouseLeave={() => setHoveredColumnIndex(undefined)}
               key={index}
             >
+              {/* @ts-ignore */}
               {(child as ReactElement).props.header}
               {isSortable(child as ReactElement) &&
                 renderSortIcon(child as ReactElement, ascending, shouldShowIcon(index))}
@@ -128,12 +129,10 @@ const Table: FC<Props> = ({ data, sortable, children, emptyMessage, className })
   );
 };
 
-Table.defaultProps = {
-  sortable: true,
-};
-
 const renderSortIcon = (child: ReactElement, ascending: boolean, showIcon: boolean) => {
+  // @ts-ignore
   if (child.props.ascendingIcon && child.props.descendingIcon) {
+    // @ts-ignore
     return <SortIcon name={ascending ? child.props.ascendingIcon : child.props.descendingIcon} isVisible={showIcon} />;
   } else {
     return <SortIcon name={ascending ? "sort-amount-down-alt" : "sort-amount-down"} isVisible={showIcon} />;

package/src/table/TextColumn.tsx

@@ -16,7 +16,6 @@
 
 import React, { FC } from "react";
 import { ColumnProps } from "./types";
-import comparators from "../comparators";
 
 type Props = ColumnProps & {
   dataKey: string;
@@ -29,12 +28,4 @@ const TextColumn: FC<Props> = ({ row, dataKey }) => {
   return row[dataKey];
 };
 
-TextColumn.defaultProps = {
-  createComparator: (props: Props) => {
-    return comparators.byKey(props.dataKey);
-  },
-  ascendingIcon: "sort-alpha-down-alt",
-  descendingIcon: "sort-alpha-down",
-};
-
 export default TextColumn;

package/src/toast/Toast.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC } from "react";
+import React, { FC, ReactNode } from "react";
 import { createPortal } from "react-dom";
 import styled from "styled-components";
 import { getTheme, Themeable, ToastThemeContext, Type } from "./themes";
@@ -23,6 +23,7 @@ import usePortalRootElement from "../usePortalRootElement";
 type Props = {
   type: Type;
   title: string;
+  children?: ReactNode;
 };
 
 const Container = styled.div<Themeable>`

package/src/toast/ToastArea.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC } from "react";
+import React, { FC, ReactNode } from "react";
 import usePortalRootElement from "../usePortalRootElement";
 import { createPortal } from "react-dom";
 import styled from "styled-components";
@@ -37,7 +37,7 @@ const Container = styled.div`
   }
 `;
 
-const ToastArea: FC = ({ children }) => {
+const ToastArea: FC<{ children?: ReactNode }> = ({ children }) => {
   const rootElement = usePortalRootElement("toastRoot");
   if (!rootElement) {
     // portal not yet ready

package/src/toast/ToastButton.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC, useContext, MouseEvent } from "react";
+import React, { FC, useContext, MouseEvent, ReactNode } from "react";
 import { ToastThemeContext, Themeable } from "./themes";
 import classNames from "classnames";
 import styled from "styled-components";
@@ -22,6 +22,7 @@ import styled from "styled-components";
 type Props = {
   icon?: string;
   onClick?: () => void;
+  children?: ReactNode;
 };
 
 const ThemedButton = styled.button.attrs((props) => ({

package/src/toast/ToastButtons.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC } from "react";
+import React, { FC, ReactNode } from "react";
 import styled from "styled-components";
 
 const FullWidthDiv = styled.div`
@@ -29,6 +29,8 @@ const FullWidthDiv = styled.div`
   }
 `;
 
-const ToastButtons: FC = ({ children }) => <FullWidthDiv className="is-flex pt-2">{children}</FullWidthDiv>;
+const ToastButtons: FC<{ children?: ReactNode }> = ({ children }) => (
+  <FullWidthDiv className="is-flex pt-2">{children}</FullWidthDiv>
+);
 
 export default ToastButtons;

package/src/toast/ToastNotification.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC } from "react";
+import React, { FC, ReactNode } from "react";
 import classNames from "classnames";
 import styled from "styled-components";
 import { getTheme, Themeable, ToastThemeContext, Type } from "./themes";
@@ -23,6 +23,7 @@ type Props = {
   type: Type;
   title: string;
   close?: () => void;
+  children?: ReactNode;
 };
 
 const Container = styled.div<Themeable>`

package/src/toast/index.stories.tsx

@@ -14,8 +14,87 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
+// import React, { useState } from "react";
+// import { storiesOf } from "@storybook/react";
+// import Toast from "./Toast";
+// import ToastButtons from "./ToastButtons";
+// import ToastButton from "./ToastButton";
+// import { types } from "./themes";
+// import ToastArea from "./ToastArea";
+// import ToastNotification from "./ToastNotification";
+//
+// const toastStories = storiesOf("Toast", module);
+//
+// const AnimatedToast = () => (
+//   <Toast type="primary" title="Animated">
+//     Awesome animated Toast
+//   </Toast>
+// );
+//
+// const Animator = () => {
+//   const [display, setDisplay] = useState(false);
+//
+//   return (
+//     <div style={{ padding: "2rem" }}>
+//       {display && <AnimatedToast />}
+//       <button className="button is-primary" onClick={() => setDisplay(!display)}>
+//         {display ? "Close" : "Open"} Toast
+//       </button>
+//     </div>
+//   );
+// };
+//
+// const Closeable = () => {
+//   const [show, setShow] = useState(true);
+//
+//   const hide = () => {
+//     setShow(false);
+//   };
+//
+//   if (!show) {
+//     return null;
+//   }
+//
+//   return (
+//     <Toast type="success" title="Awesome feature">
+//       <p>Close the message with a click</p>
+//       <ToastButtons>
+//         <ToastButton icon="times" onClick={hide}>
+//           Click to close
+//         </ToastButton>
+//       </ToastButtons>
+//     </Toast>
+//   );
+// };
+//
+// toastStories.add("Open/Close", () => <Animator />);
+// toastStories.add("Click to close", () => <Closeable />);
+//
+// types.forEach((type) => {
+//   toastStories.add(type.charAt(0).toUpperCase() + type.slice(1), () => (
+//     <Toast type={type} title="New Changes">
+//       <p>The underlying Pull-Request has changed. Press reload to see the changes.</p>
+//       <p>Warning: Non saved modification will be lost.</p>
+//       <ToastButtons>
+//         <ToastButton icon="redo">Reload</ToastButton>
+//         <ToastButton icon="times">Ignore</ToastButton>
+//       </ToastButtons>
+//     </Toast>
+//   ));
+// });
+//
+// toastStories.add("Multiple", () => (
+//   <ToastArea>
+//     {types.map((type) => (
+//       <ToastNotification key={type} type={type} title="New notification">
+//         <p>The notification received.</p>
+//       </ToastNotification>
+//     ))}
+//   </ToastArea>
+// ));
+
 import React, { useState } from "react";
-import { storiesOf } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import Toast from "./Toast";
 import ToastButtons from "./ToastButtons";
 import ToastButton from "./ToastButton";
@@ -23,43 +102,34 @@ import { types } from "./themes";
 import ToastArea from "./ToastArea";
 import ToastNotification from "./ToastNotification";
 
-const toastStories = storiesOf("Toast", module);
-
-const AnimatedToast = () => (
-  <Toast type="primary" title="Animated">
-    Awesome animated Toast
-  </Toast>
-);
+// --- Helfer-Komponenten (aus der Original-Story übernommen) ---
 
-const Animator = () => {
+const OpenCloseExample = () => {
   const [display, setDisplay] = useState(false);
-
   return (
-    <div style={{ padding: "2rem" }}>
-      {display && <AnimatedToast />}
-      <button className="button is-primary" onClick={() => setDisplay(!display)}>
+    <div>
+      {display && (
+        <Toast type="primary" title="Animated">
+          Awesome animated Toast
+        </Toast>
+      )}
+      <button className="button is-primary mt-2" onClick={() => setDisplay(!display)}>
         {display ? "Close" : "Open"} Toast
       </button>
     </div>
   );
 };
 
-const Closeable = () => {
+const ClickToCloseExample = () => {
   const [show, setShow] = useState(true);
-
-  const hide = () => {
-    setShow(false);
-  };
-
   if (!show) {
-    return null;
+    return <p>Toast wurde geschlossen.</p>;
   }
-
   return (
     <Toast type="success" title="Awesome feature">
       <p>Close the message with a click</p>
       <ToastButtons>
-        <ToastButton icon="times" onClick={hide}>
+        <ToastButton icon="times" onClick={() => setShow(false)}>
           Click to close
         </ToastButton>
       </ToastButtons>
@@ -67,28 +137,63 @@ const Closeable = () => {
   );
 };
 
-toastStories.add("Open/Close", () => <Animator />);
-toastStories.add("Click to close", () => <Closeable />);
+// --- Storybook Metadaten ---
+
+const meta: Meta<typeof Toast> = {
+  title: "Components/Toast",
+  component: Toast,
+  decorators: [(Story) => <div style={{ padding: "2rem" }}>{Story()}</div>],
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+// --- Story-Definitionen ---
 
-types.forEach((type) => {
-  toastStories.add(type.charAt(0).toUpperCase() + type.slice(1), () => (
-    <Toast type={type} title="New Changes">
+type Story = StoryObj<typeof meta>;
+
+// Basis-Props für die verschiedenen Toast-Typen
+const baseArgs = {
+  title: "New Changes",
+  children: (
+    <>
       <p>The underlying Pull-Request has changed. Press reload to see the changes.</p>
       <p>Warning: Non saved modification will be lost.</p>
       <ToastButtons>
         <ToastButton icon="redo">Reload</ToastButton>
         <ToastButton icon="times">Ignore</ToastButton>
       </ToastButtons>
-    </Toast>
-  ));
-});
+    </>
+  ),
+};
 
-toastStories.add("Multiple", () => (
-  <ToastArea>
-    {types.map((type) => (
-      <ToastNotification key={type} type={type} title="New notification">
-        <p>The notification received.</p>
-      </ToastNotification>
-    ))}
-  </ToastArea>
-));
+// Anstatt einer Schleife erstellen wir explizite Stories für jeden Typ
+export const Primary: Story = { args: { ...baseArgs, type: "primary" } };
+export const Success: Story = { args: { ...baseArgs, type: "success" } };
+export const Info: Story = { args: { ...baseArgs, type: "info" } };
+export const Warning: Story = { args: { ...baseArgs, type: "warning" } };
+export const Danger: Story = { args: { ...baseArgs, type: "danger" } };
+
+// Stories mit eigener Logik verwenden eine `render`-Funktion
+export const OpenClose: Story = {
+  name: "Open and Close Animation",
+  render: () => <OpenCloseExample />,
+};
+
+export const ClickToClose: Story = {
+  name: "Click to Close",
+  render: () => <ClickToCloseExample />,
+};
+
+export const Multiple: Story = {
+  name: "Multiple Toasts in an Area",
+  render: () => (
+    <ToastArea>
+      {types.map((type) => (
+        <ToastNotification key={type} type={type} title="New notification">
+          <p>The notification received.</p>
+        </ToastNotification>
+      ))}
+    </ToastArea>
+  ),
+};

package/src/toast/index.ts

@@ -17,6 +17,6 @@
 export { default as Toast } from "./Toast";
 export { default as ToastArea } from "./ToastArea";
 export { default as ToastNotification } from "./ToastNotification";
-export { Type as ToastType } from "./themes";
+export { type Type as ToastType } from "./themes";
 export { default as ToastButton } from "./ToastButton";
 export { default as ToastButtons } from "./ToastButtons";

package/src/buttons/index.stories.tsx

@@ -1,85 +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, { ReactElement, ReactNode, useEffect, useState } from "react";
-import Button from "./Button";
-import { storiesOf } from "@storybook/react";
-import styled from "styled-components";
-import AddButton from "./AddButton";
-import CreateButton from "./CreateButton";
-import DeleteButton from "./DeleteButton";
-import DownloadButton from "./DownloadButton";
-import EditButton from "./EditButton";
-import SubmitButton from "./SubmitButton";
-import { MemoryRouter } from "react-router-dom";
-
-const colors = ["primary", "link", "info", "success", "warning", "danger", "white", "light", "dark", "black", "text"];
-
-const Spacing = styled.div`
-  padding: 1em;
-`;
-
-const SpacingDecorator = (story: () => ReactNode) => <Spacing>{story()}</Spacing>;
-const RoutingDecorator = (story: () => ReactNode) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>;
-
-storiesOf("Buttons/Button", module)
-  .addDecorator(RoutingDecorator)
-  .add("Colors", () => (
-    <div>
-      {colors.map((color) => (
-        <Spacing key={color}>
-          <Button color={color} label={color} />
-        </Spacing>
-      ))}
-    </div>
-  ))
-  .add("Loading", () => (
-    <Spacing>
-      <Button color={"primary"} loading={true}>
-        Loading Button
-      </Button>
-    </Spacing>
-  ))
-  .add("Disabled", () => (
-    <div>
-      {colors.map((color) => (
-        <Spacing key={color}>
-          <Button color={color} label={color} disabled={true} />
-        </Spacing>
-      ))}
-    </div>
-  ));
-
-const buttonStory = (name: string, storyFn: () => ReactElement) => {
-  return storiesOf("Buttons/" + name, module)
-    .addDecorator(RoutingDecorator)
-    .addDecorator(SpacingDecorator)
-    .add("Default", storyFn);
-};
-buttonStory("AddButton", () => <AddButton>Add</AddButton>);
-buttonStory("CreateButton", () => <CreateButton>Create</CreateButton>);
-buttonStory("DeleteButton", () => <DeleteButton>Delete</DeleteButton>);
-buttonStory("DownloadButton", () => <DownloadButton displayName="Download" disabled={false} url="" />).add(
-  "Disabled",
-  () => <DownloadButton displayName="Download" disabled={true} url="" />
-);
-buttonStory("EditButton", () => <EditButton>Edit</EditButton>);
-buttonStory("SubmitButton", () => <SubmitButton>Submit</SubmitButton>);
-buttonStory("Button Ref", () => {
-  const [ref, setRef] = useState<HTMLButtonElement | HTMLAnchorElement | null>();
-  useEffect(() => ref?.focus(), [ref]);
-  return <Button ref={setRef}>Focus me!</Button>;
-});