@scm-manager/ui-components 3.10.4-20250824-132529 → 4.0.0-REACT18-20250824-143504

package/src/table/Table.stories.tsx

@@ -14,12 +14,99 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
+// import React from "react";
+// import { storiesOf } from "@storybook/react";
+// import Table from "./Table";
+// import Column from "./Column";
+// import TextColumn from "./TextColumn";
+// import styled from "styled-components";
+//
+// const StyledTable = styled(Table)`
+//   width: 400px;
+//   border: 1px dashed black;
+//   padding: 4px;
+//   margin: 4px;
+//   td {
+//     word-break: break-word;
+//   }
+// `;
+//
+// storiesOf("Table", module)
+//   .add("Default", () => (
+//     <Table
+//       data={[
+//         { firstname: "Tricia", lastname: "McMillan", email: "tricia@hitchhiker.com" },
+//         { firstname: "Arthur", lastname: "Dent", email: "arthur@hitchhiker.com" },
+//       ]}
+//     >
+//       <Column header={"First Name"}>{(row: any) => <h4>{row.firstname}</h4>}</Column>
+//       <Column
+//         className="has-background-success"
+//         header={"Last Name"}
+//         createComparator={() => {
+//           return (a: any, b: any) => {
+//             if (a.lastname > b.lastname) {
+//               return -1;
+//             } else if (a.lastname < b.lastname) {
+//               return 1;
+//             } else {
+//               return 0;
+//             }
+//           };
+//         }}
+//       >
+//         {(row: any) => <b className="has-text-danger">{row.lastname}</b>}
+//       </Column>
+//       <Column header={"E-Mail"}>{(row: any) => <span>{row.email}</span>}</Column>
+//     </Table>
+//   ))
+//   .add("TextColumn", () => (
+//     <Table
+//       data={[
+//         { id: "21", title: "Pommes", desc: "Fried potato sticks" },
+//         { id: "42", title: "Quarter-Pounder", desc: "Big burger" },
+//         { id: "-84", title: "Icecream", desc: "Cold dessert" },
+//       ]}
+//     >
+//       <TextColumn header="Id" dataKey="id" />
+//       <TextColumn header="Name" dataKey="title" />
+//       <TextColumn header="Description" dataKey="desc" />
+//     </Table>
+//   ))
+//   .add("Empty", () => (
+//     <Table data={[]} emptyMessage="No data found.">
+//       <TextColumn header="Id" dataKey="id" />
+//       <TextColumn header="Name" dataKey="name" />
+//     </Table>
+//   ))
+//   .add("Table with Word-Break", () => (
+//     <StyledTable
+//       data={[
+//         {
+//           id: "42",
+//           name: "herp_derp_schlerp_ferp_gerp_nerp_terp_ierp_perp_lerp_merp_oerp_zerp_serp_verp_herp",
+//         },
+//         {
+//           id: "17",
+//           name: "herp_derp_schlerp_ferp_gerp_nerp_terp_ierp_perp_lerp_merp_oerp_zerp_serp_verp",
+//         },
+//       ]}
+//       emptyMessage="No data found."
+//     >
+//       <TextColumn header="Id" dataKey="id" />
+//       <TextColumn header="Name" dataKey="name" />
+//     </StyledTable>
+//   ));
+
 import React from "react";
-import { storiesOf } from "@storybook/react";
+import styled from "styled-components";
+import type { Meta, StoryObj } from "@storybook/react";
+
 import Table from "./Table";
 import Column from "./Column";
 import TextColumn from "./TextColumn";
-import styled from "styled-components";
+
+// --- Helper Components & Mock Data (preserved from your original story) ---
 
 const StyledTable = styled(Table)`
   width: 400px;
@@ -31,69 +118,80 @@ const StyledTable = styled(Table)`
   }
 `;
 
-storiesOf("Table", module)
-  .add("Default", () => (
-    <Table
-      data={[
-        { firstname: "Tricia", lastname: "McMillan", email: "tricia@hitchhiker.com" },
-        { firstname: "Arthur", lastname: "Dent", email: "arthur@hitchhiker.com" },
-      ]}
-    >
+const tableData = [
+  { firstname: "Tricia", lastname: "McMillan", email: "tricia@hitchhiker.com" },
+  { firstname: "Arthur", lastname: "Dent", email: "arthur@hitchhiker.com" },
+];
+
+const textColumnData = [
+  { id: "21", title: "Pommes", desc: "Fried potato sticks" },
+  { id: "42", title: "Quarter-Pounder", desc: "Big burger" },
+  { id: "-84", title: "Icecream", desc: "Cold dessert" },
+];
+
+const wordBreakData = [
+  { id: "42", name: "herp_derp_schlerp_ferp_gerp_nerp_terp_ierp_perp_lerp_merp_oerp_zerp_serp_verp_herp" },
+  { id: "17", name: "herp_derp_schlerp_ferp_gerp_nerp_terp_ierp_perp_lerp_merp_oerp_zerp_serp_verp" },
+];
+
+// --- Storybook Metadata ---
+
+const meta: Meta<typeof Table> = {
+  title: "Components/Table",
+  component: Table,
+  decorators: [(Story) => <div style={{ margin: "2rem" }}>{Story()}</div>],
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+// --- Story Definitions ---
+
+type Story = StoryObj<typeof meta>;
+
+// For stories with complex children or custom components, we use a `render` function.
+export const Default: Story = {
+  render: () => (
+    <Table data={tableData}>
       <Column header={"First Name"}>{(row: any) => <h4>{row.firstname}</h4>}</Column>
       <Column
         className="has-background-success"
         header={"Last Name"}
-        createComparator={() => {
-          return (a: any, b: any) => {
-            if (a.lastname > b.lastname) {
-              return -1;
-            } else if (a.lastname < b.lastname) {
-              return 1;
-            } else {
-              return 0;
-            }
-          };
-        }}
+        createComparator={() => (a: any, b: any) => b.lastname.localeCompare(a.lastname)}
       >
         {(row: any) => <b className="has-text-danger">{row.lastname}</b>}
       </Column>
       <Column header={"E-Mail"}>{(row: any) => <span>{row.email}</span>}</Column>
     </Table>
-  ))
-  .add("TextColumn", () => (
-    <Table
-      data={[
-        { id: "21", title: "Pommes", desc: "Fried potato sticks" },
-        { id: "42", title: "Quarter-Pounder", desc: "Big burger" },
-        { id: "-84", title: "Icecream", desc: "Cold dessert" },
-      ]}
-    >
+  ),
+};
+
+export const WithTextColumn: Story = {
+  name: "With TextColumn",
+  render: () => (
+    <Table data={textColumnData}>
       <TextColumn header="Id" dataKey="id" />
       <TextColumn header="Name" dataKey="title" />
       <TextColumn header="Description" dataKey="desc" />
     </Table>
-  ))
-  .add("Empty", () => (
+  ),
+};
+
+export const Empty: Story = {
+  render: () => (
     <Table data={[]} emptyMessage="No data found.">
       <TextColumn header="Id" dataKey="id" />
       <TextColumn header="Name" dataKey="name" />
     </Table>
-  ))
-  .add("Table with Word-Break", () => (
-    <StyledTable
-      data={[
-        {
-          id: "42",
-          name: "herp_derp_schlerp_ferp_gerp_nerp_terp_ierp_perp_lerp_merp_oerp_zerp_serp_verp_herp",
-        },
-        {
-          id: "17",
-          name: "herp_derp_schlerp_ferp_gerp_nerp_terp_ierp_perp_lerp_merp_oerp_zerp_serp_verp",
-        },
-      ]}
-      emptyMessage="No data found."
-    >
+  ),
+};
+
+export const WithWordBreak: Story = {
+  name: "With Word-Break",
+  render: () => (
+    <StyledTable data={wordBreakData} emptyMessage="No data found.">
       <TextColumn header="Id" dataKey="id" />
       <TextColumn header="Name" dataKey="name" />
     </StyledTable>
-  ));
+  ),
+};

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";