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

package/src/popover/Popover.stories.tsx

@@ -14,54 +14,124 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import { storiesOf } from "@storybook/react";
+// import { storiesOf } from "@storybook/react";
+// import React from "react";
+// import styled from "styled-components";
+// import usePopover from "./usePopover";
+// import Popover from "./Popover";
+//
+// const Wrapper = styled.div`
+//   width: 100%;
+//   margin: 20rem;
+// `;
+//
+// storiesOf("Popover", module)
+//   .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
+//   .add("Default", () =>
+//     React.createElement(() => {
+//       const { triggerProps, popoverProps } = usePopover();
+//
+//       return (
+//         <div>
+//           <Popover title={<strong>Spaceship Heart of Gold</strong>} width={512} {...popoverProps}>
+//             <p>
+//               The Heart of Gold is the sleekest, most advanced, coolest spaceship in the galaxy. Its stunning good looks
+//               mirror its awesome speed and power. It is powered by the revolutionary new Infinite Improbability Drive,
+//               which lets the ship pass through every point in every universe simultaneously.
+//             </p>
+//           </Popover>
+//           <button className="button" {...triggerProps}>
+//             Trigger
+//           </button>
+//         </div>
+//       );
+//     })
+//   )
+//   .add("Link", () =>
+//     React.createElement(() => {
+//       const { triggerProps, popoverProps } = usePopover();
+//
+//       return (
+//         <div>
+//           <Popover title={<strong>Spaceship Heart of Gold</strong>} width={512} {...popoverProps}>
+//             <p>
+//               The Heart of Gold is the sleekest, most advanced, coolest spaceship in the galaxy. Its stunning good looks
+//               mirror its awesome speed and power. It is powered by the revolutionary new Infinite Improbability Drive,
+//               which lets the ship pass through every point in every universe simultaneously.
+//             </p>
+//           </Popover>
+//           <button {...triggerProps}>Trigger</button>
+//         </div>
+//       );
+//     })
+//   );
+
 import React from "react";
 import styled from "styled-components";
-import usePopover from "./usePopover";
+import type { Meta, StoryObj } from "@storybook/react";
+
 import Popover from "./Popover";
+import usePopover from "./usePopover";
 
 const Wrapper = styled.div`
-  width: 100%;
+  /* A large margin is used to ensure the popover has space to render in all directions */
   margin: 20rem;
+  width: 100%;
 `;
 
-storiesOf("Popover", module)
-  .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
-  .add("Default", () =>
-    React.createElement(() => {
-      const { triggerProps, popoverProps } = usePopover();
+const popoverContent = (
+  <p>
+    The Heart of Gold is the sleekest, most advanced, coolest spaceship in the galaxy. Its stunning good looks mirror
+    its awesome speed and power. It is powered by the revolutionary new Infinite Improbability Drive, which lets the
+    ship pass through every point in every universe simultaneously.
+  </p>
+);
+
+const meta: Meta<typeof Popover> = {
+  title: "Components/Popover",
+  component: Popover,
+  decorators: [(Story) => <Wrapper>{Story()}</Wrapper>],
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { triggerProps, popoverProps } = usePopover();
 
-      return (
-        <div>
-          <Popover title={<strong>Spaceship Heart of Gold</strong>} width={512} {...popoverProps}>
-            <p>
-              The Heart of Gold is the sleekest, most advanced, coolest spaceship in the galaxy. Its stunning good looks
-              mirror its awesome speed and power. It is powered by the revolutionary new Infinite Improbability Drive,
-              which lets the ship pass through every point in every universe simultaneously.
-            </p>
-          </Popover>
-          <button className="button" {...triggerProps}>
-            Trigger
-          </button>
-        </div>
-      );
-    })
-  )
-  .add("Link", () =>
-    React.createElement(() => {
-      const { triggerProps, popoverProps } = usePopover();
+    return (
+      <div>
+        <Popover title={<strong>Spaceship Heart of Gold</strong>} width={512} {...popoverProps}>
+          {popoverContent}
+        </Popover>
+        {/* @ts-ignore */}
+        <button className="button" {...triggerProps}>
+          Trigger
+        </button>
+      </div>
+    );
+  },
+};
 
-      return (
-        <div>
-          <Popover title={<strong>Spaceship Heart of Gold</strong>} width={512} {...popoverProps}>
-            <p>
-              The Heart of Gold is the sleekest, most advanced, coolest spaceship in the galaxy. Its stunning good looks
-              mirror its awesome speed and power. It is powered by the revolutionary new Infinite Improbability Drive,
-              which lets the ship pass through every point in every universe simultaneously.
-            </p>
-          </Popover>
-          <button {...triggerProps}>Trigger</button>
-        </div>
-      );
-    })
-  );
+export const WithLinkTrigger: Story = {
+  name: "With Link as Trigger",
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { triggerProps, popoverProps } = usePopover();
+    return (
+      <div>
+        <Popover title={<strong>Spaceship Heart of Gold</strong>} width={512} {...popoverProps}>
+          {popoverContent}
+        </Popover>
+        {/* @ts-ignore */}
+        <a href="#" {...triggerProps}>
+          Trigger
+        </a>
+      </div>
+    );
+  },
+};

package/src/popover/Popover.tsx

@@ -26,6 +26,7 @@ type Props = {
   offsetLeft?: number;
   show: boolean;
   dispatch: Dispatch<Action>;
+  children?: ReactNode;
 };
 
 type ContainerProps = {
@@ -73,7 +74,7 @@ const Popover: FC<Props> = (props) => {
   return <InnerPopover {...props} />;
 };
 
-const InnerPopover: FC<Props> = ({ title, show, width, offsetTop, offsetLeft, dispatch, children }) => {
+const InnerPopover: FC<Props> = ({ title, show, width = 120, offsetTop, offsetLeft, dispatch, children }) => {
   const [height, setHeight] = useState(125);
   const ref = useRef<HTMLDivElement>(null);
   useLayoutEffect(() => {
@@ -112,8 +113,4 @@ const InnerPopover: FC<Props> = ({ title, show, width, offsetTop, offsetLeft, di
   );
 };
 
-Popover.defaultProps = {
-  width: 120,
-};
-
 export default Popover;