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

package/src/Icon.stories.tsx

@@ -14,9 +14,66 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
+// import React from "react";
+// import { storiesOf } from "@storybook/react";
+// import styled from "styled-components";
+// import Icon from "./Icon";
+//
+// const Wrapper = styled.div`
+//   * {
+//     margin: 0.5rem;
+//   }
+// `;
+//
+// const colors = ["primary", "link", "info", "success", "warning", "danger", "white", "light", "dark", "black", "text"];
+// const sizing = ["xs", "sm", "lg", "2x", "3x", "5x", "7x", "10x"];
+//
+// storiesOf("Icon", module)
+//   .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
+//   .add("Default", () => (
+//     <>
+//       <Icon name="cat" />
+//       <Icon title="Download" name="download" color="info" />
+//       <Icon title="Pull Request" name="code-branch fa-rotate-180" color="warning" />
+//       <Icon title="Star" iconStyle="far" name="star" color="inherit" />
+//     </>
+//   ))
+//   .add("Colors", () => (
+//     <>
+//       <Icon title="default color" name="cat" />
+//       {colors.map((color) => (
+//         <Icon key={color} title={color} name="cat" color={color} />
+//       ))}
+//     </>
+//   ))
+//   .add("Sizing", () => (
+//     <>
+//       <Icon title="default size" name="cat" />
+//       {sizing.map((size) => (
+//         <Icon key={size} title={"fa-" + size} name={"cat fa-" + size} />
+//       ))}
+//     </>
+//   ))
+//   .add("Icon styles", () => (
+//     <>
+//       <Icon title="solid style" name="star" color="inherit" />
+//       <Icon title="regular style" iconStyle="far" name="star" color="inherit" />
+//       <Icon title="brand style" iconStyle="fab" name="react" color="inherit" />
+//     </>
+//   ))
+//   .add("More options", () => (
+//     <>
+//       <Icon title="rotate-270" name="snowboarding fa-rotate-270" />
+//       <Icon title="spin" name="spinner fa-spin" />
+//       <Icon title="custom sizing" name="cat" className="is-size-4" />
+//       <Icon title="custom background" name="hand-sparkles" className="has-background-primary-25" />
+//     </>
+//   ));
+
 import React from "react";
-import { storiesOf } from "@storybook/react";
 import styled from "styled-components";
+import type { Meta, StoryObj } from "@storybook/react";
+
 import Icon from "./Icon";
 
 const Wrapper = styled.div`
@@ -28,44 +85,67 @@ const Wrapper = styled.div`
 const colors = ["primary", "link", "info", "success", "warning", "danger", "white", "light", "dark", "black", "text"];
 const sizing = ["xs", "sm", "lg", "2x", "3x", "5x", "7x", "10x"];
 
-storiesOf("Icon", module)
-  .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
-  .add("Default", () => (
+const meta: Meta<typeof Icon> = {
+  title: "Components/Icon",
+  component: Icon,
+  decorators: [(Story) => <Wrapper>{Story()}</Wrapper>],
+  tags: ["autodocs"], // Enables automatic documentation generation
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
     <>
       <Icon name="cat" />
       <Icon title="Download" name="download" color="info" />
       <Icon title="Pull Request" name="code-branch fa-rotate-180" color="warning" />
       <Icon title="Star" iconStyle="far" name="star" color="inherit" />
     </>
-  ))
-  .add("Colors", () => (
+  ),
+};
+
+export const Colors: Story = {
+  render: () => (
     <>
       <Icon title="default color" name="cat" />
       {colors.map((color) => (
         <Icon key={color} title={color} name="cat" color={color} />
       ))}
     </>
-  ))
-  .add("Sizing", () => (
+  ),
+};
+
+export const Sizing: Story = {
+  render: () => (
     <>
       <Icon title="default size" name="cat" />
       {sizing.map((size) => (
         <Icon key={size} title={"fa-" + size} name={"cat fa-" + size} />
       ))}
     </>
-  ))
-  .add("Icon styles", () => (
+  ),
+};
+
+export const IconStyles: Story = {
+  render: () => (
     <>
       <Icon title="solid style" name="star" color="inherit" />
       <Icon title="regular style" iconStyle="far" name="star" color="inherit" />
       <Icon title="brand style" iconStyle="fab" name="react" color="inherit" />
     </>
-  ))
-  .add("More options", () => (
+  ),
+};
+
+export const MoreOptions: Story = {
+  render: () => (
     <>
       <Icon title="rotate-270" name="snowboarding fa-rotate-270" />
       <Icon title="spin" name="spinner fa-spin" />
       <Icon title="custom sizing" name="cat" className="is-size-4" />
       <Icon title="custom background" name="hand-sparkles" className="has-background-primary-25" />
     </>
-  ));
+  ),
+};

package/src/LinkPaginator.tsx

@@ -23,11 +23,14 @@ type Props = {
   collection: PagedCollection;
   page: number;
   filter?: string;
+  baseUrl: string;
 };
 
-const LinkPaginator: FC<Props> = ({ collection, page, filter }) => {
+const LinkPaginator: FC<Props> = ({ collection, page, filter, baseUrl }) => {
   const [t] = useTranslation("commons");
-  const addFilterToLink = (link: string) => {
+
+  const createLink = (pageNumber: string | number) => {
+    const link = `/${baseUrl}/${pageNumber}`;
     if (filter) {
       return `${link}?q=${filter}`;
     }
@@ -35,7 +38,7 @@ const LinkPaginator: FC<Props> = ({ collection, page, filter }) => {
   };
 
   const renderFirstButton = () => {
-    return <Button className="pagination-link" label={"1"} disabled={false} link={addFilterToLink("1")} />;
+    return <Button className="pagination-link" label={"1"} disabled={false} link={createLink("1")} />;
   };
 
   const renderPreviousButton = (className: string, label?: string) => {
@@ -46,7 +49,7 @@ const LinkPaginator: FC<Props> = ({ collection, page, filter }) => {
         className={className}
         label={label ? label : previousPage.toString()}
         disabled={!hasLink("prev")}
-        link={addFilterToLink(`${previousPage}`)}
+        link={createLink(`${previousPage}`)}
       />
     );
   };
@@ -62,7 +65,7 @@ const LinkPaginator: FC<Props> = ({ collection, page, filter }) => {
         className={className}
         label={label ? label : nextPage.toString()}
         disabled={!hasLink("next")}
-        link={addFilterToLink(`${nextPage}`)}
+        link={createLink(`${nextPage}`)}
       />
     );
   };
@@ -73,7 +76,7 @@ const LinkPaginator: FC<Props> = ({ collection, page, filter }) => {
         className="pagination-link"
         label={`${collection.pageTotal}`}
         disabled={false}
-        link={addFilterToLink(`${collection.pageTotal}`)}
+        link={createLink(`${collection.pageTotal}`)}
       />
     );
   };

package/src/Loading.stories.tsx

@@ -14,12 +14,32 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
+// import React from "react";
+// import { storiesOf } from "@storybook/react";
+// import Loading from "./Loading";
+//
+// storiesOf("Loading", module).add("Default", () => (
+//   <div>
+//     <Loading />
+//   </div>
+// ));
+
 import React from "react";
-import { storiesOf } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
+
 import Loading from "./Loading";
 
-storiesOf("Loading", module).add("Default", () => (
-  <div>
-    <Loading />
-  </div>
-));
+const meta: Meta<typeof Loading> = {
+  title: "Components/Loading",
+  component: Loading,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/Logo.stories.tsx

@@ -14,25 +14,56 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
+// import React from "react";
+// import { storiesOf } from "@storybook/react";
+// import styled from "styled-components";
+// import Logo from "./Logo";
+//
+// const Wrapper = styled.div`
+//   padding: 2em;
+//   background-color: black;
+//   height: 100%;
+// `;
+//
+// storiesOf("Logo", module)
+//   .add("Default", () => (
+//     <Wrapper>
+//       <Logo />
+//     </Wrapper>
+//   ))
+//   .add("WithoutText", () => (
+//     <Wrapper>
+//       <Logo withText={false} />
+//     </Wrapper>
+//   ));
+
 import React from "react";
-import { storiesOf } from "@storybook/react";
 import styled from "styled-components";
+import type { Meta, StoryObj } from "@storybook/react";
+
 import Logo from "./Logo";
 
 const Wrapper = styled.div`
   padding: 2em;
   background-color: black;
-  height: 100%;
+  height: 100vh;
 `;
 
-storiesOf("Logo", module)
-  .add("Default", () => (
-    <Wrapper>
-      <Logo />
-    </Wrapper>
-  ))
-  .add("WithoutText", () => (
-    <Wrapper>
-      <Logo withText={false} />
-    </Wrapper>
-  ));
+const meta: Meta<typeof Logo> = {
+  title: "Components/Logo",
+  component: Logo,
+  decorators: [(Story) => <Wrapper>{Story()}</Wrapper>],
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithoutText: Story = {
+  args: {
+    withText: false,
+  },
+};

package/src/Notification.stories.tsx

@@ -14,11 +14,58 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
+// import styled from "styled-components";
+// import * as React from "react";
+// import { ReactNode, useState } from "react";
+// import { MemoryRouter } from "react-router-dom";
+// import { storiesOf } from "@storybook/react";
+// import Notification from "./Notification";
+//
+// const Wrapper = styled.div`
+//   margin: 2rem;
+//   max-width: 400px;
+// `;
+//
+// const content =
+//   "Cleverness nuclear genuine static irresponsibility invited President Zaphod\n" +
+//   "Beeblebrox hyperspace ship. Another custard through computer-generated universe\n" +
+//   "shapes field strong disaster parties Russell’s ancestors infinite colour\n" +
+//   "imaginative generator sweep.";
+//
+// const RoutingDecorator = (story: () => ReactNode) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>;
+//
+// storiesOf("Notification", module)
+//   .addDecorator(RoutingDecorator)
+//   .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
+//   .add("Primary", () => <Notification type="primary">{content}</Notification>)
+//   .add("Success", () => <Notification type="success">{content}</Notification>)
+//   .add("Info", () => <Notification type="info">{content}</Notification>)
+//   .add("Warning", () => <Notification type="warning">{content}</Notification>)
+//   .add("Danger", () => <Notification type="danger">{content}</Notification>)
+//   .add("Closeable", () => <Closeable />);
+//
+// const Closeable = () => {
+//   const [show, setShow] = useState(true);
+//
+//   const hide = () => {
+//     setShow(false);
+//   };
+//
+//   if (!show) {
+//     return null;
+//   }
+//
+//   return (
+//     <Notification type="warning" onClose={() => hide()}>
+//       {content}
+//     </Notification>
+//   );
+// };
+
+import React, { ReactNode, useState } from "react";
 import styled from "styled-components";
-import * as React from "react";
-import { ReactNode, useState } from "react";
-import { MemoryRouter } from "react-router-dom";
-import { storiesOf } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
+
 import Notification from "./Notification";
 
 const Wrapper = styled.div`
@@ -32,32 +79,73 @@ const content =
   "shapes field strong disaster parties Russell’s ancestors infinite colour\n" +
   "imaginative generator sweep.";
 
-const RoutingDecorator = (story: () => ReactNode) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>;
-
-storiesOf("Notification", module)
-  .addDecorator(RoutingDecorator)
-  .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
-  .add("Primary", () => <Notification type="primary">{content}</Notification>)
-  .add("Success", () => <Notification type="success">{content}</Notification>)
-  .add("Info", () => <Notification type="info">{content}</Notification>)
-  .add("Warning", () => <Notification type="warning">{content}</Notification>)
-  .add("Danger", () => <Notification type="danger">{content}</Notification>)
-  .add("Closeable", () => <Closeable />);
-
-const Closeable = () => {
+const CloseableExample = () => {
   const [show, setShow] = useState(true);
 
-  const hide = () => {
-    setShow(false);
-  };
-
   if (!show) {
-    return null;
+    return <p>Notification has been closed.</p>;
   }
 
   return (
-    <Notification type="warning" onClose={() => hide()}>
+    <Notification type="warning" onClose={() => setShow(false)}>
       {content}
     </Notification>
   );
 };
+
+const meta: Meta<typeof Notification> = {
+  title: "Components/Notification",
+  component: Notification,
+  decorators: [(Story) => <Wrapper>{Story()}</Wrapper>],
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["primary", "success", "info", "warning", "danger"],
+    },
+    onClose: { action: "closed" },
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    type: "primary",
+    children: content,
+  },
+};
+
+export const Success: Story = {
+  args: {
+    ...Primary.args, // Reuses args from Primary
+    type: "success",
+  },
+};
+
+export const Info: Story = {
+  args: {
+    ...Primary.args,
+    type: "info",
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    ...Primary.args,
+    type: "warning",
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    ...Primary.args,
+    type: "danger",
+  },
+};
+
+export const Closeable: Story = {
+  render: () => <CloseableExample />,
+};

package/src/OverviewPageActions.tsx

@@ -15,18 +15,18 @@
  */
 
 import React, { FC, useState } from "react";
-import { useHistory, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import classNames from "classnames";
 import { Button, urls } from "./index";
 import { FilterInput, Select } from "./forms";
 
 type Props = {
   showCreateButton: boolean;
-  currentGroup: string;
+  currentGroup?: string;
   groups?: string[];
   link: string;
   createLink?: string;
-  groupSelected: (namespace: string) => void;
+  groupSelected?: (namespace: string) => void;
   label?: string;
   testId?: string;
   searchPlaceholder?: string;
@@ -49,7 +49,7 @@ const OverviewPageActions: FC<Props> = ({
   searchPlaceholder,
   groupAriaLabelledby,
 }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
   const [filterValue, setFilterValue] = useState(urls.getQueryStringFromLocation(location) || "");
   const link = createAbsoluteLink(inputLink);
@@ -80,7 +80,7 @@ const OverviewPageActions: FC<Props> = ({
   const filter = (q: string) => {
     if (q !== filterValue) {
       setFilterValue(q);
-      history.push(`${link}?q=${q}`);
+      navigate(`${link}?q=${q}`);
     }
   };