feat: [SC-25563] Create Tooltip component and Stories (#348)

* Begin transition of Tooltip from NameGuard React to NameKit React

---------

Co-authored-by: lightwalker.eth <[email protected]>

.changeset/fluffy-pots-mix.md

@@ -0,0 +1,6 @@
+---
+"@namehash/nameguard-react": minor
+"@namehash/namekit-react": minor
+---
+
+Start Tooltip component migration from nameguard-react to namekit-react

apps/storybook.namekit.io/stories/Namekit/Tooltip.stories.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import { Tooltip } from "@namehash/namekit-react";
+
+const meta: Meta<typeof Tooltip> = {
+  title: "UI/Tooltip",
+  component: Tooltip,
+  argTypes: {
+    placement: {
+      options: ["top", "right", "bottom", "left"],
+      control: { type: "select" },
+    },
+    children: {
+      control: { type: "text" },
+    },
+    trigger: {
+      control: { type: "text" },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tooltip>;
+
+export const BottomPlacement: Story = {
+  args: {
+    placement: "bottom",
+    trigger: <>Tooltip Trigger</>,
+    children: <>Tooltip content</>,
+  },
+};
+
+export const RightPlacement: Story = {
+  args: {
+    placement: "right",
+    trigger: <>Tooltip Trigger</>,
+    children: <>Tooltip content</>,
+  },
+};
+
+export const LeftPlacement: Story = {
+  args: {
+    placement: "left",
+    trigger: <>Tooltip Trigger</>,
+    children: <>Tooltip content</>,
+  },
+};
+
+export const DefaultMaxTooltipWidth: Story = {
+  args: {
+    placement: "bottom",
+    trigger: <>Tooltip Trigger</>,
+    children: (
+      <>
+        The default max tooltip width is positive infinity so
+        it is up to you to set an explicit max width limit,
+        See the "Custom Max Tooltip Width" story for an example of setting a max width.
+      </>
+    ),
+  },
+};
+
+export const CustomMaxTooltipWidth: Story = {
+  args: {
+    placement: "bottom",
+    maxTooltipWidth: 400,
+    trigger: <>Tooltip Trigger for tooltip with 400px max width</>,
+    children: (
+      <>
+        See it! The tooltip content is limited to 400px width. You can set the
+        maxTooltipWidth to the desired value to limit the text content display
+        width!
+      </>
+    ),
+  },
+};

packages/nameguard-react/src/components/Tooltip/Tooltip.tsx

@@ -1,3 +1,17 @@
+/*
+  This Tooltip component is a duplicate of @namehash/namekit-react
+  Tooltip component. This duplicate will, in the near future, be 
+  replaced by @namehash/namekit-react Tooltip component. The duplicate is
+  necessary for the moment so any imports of @namehash/nameguard-react Tooltip
+  component do not break once the migration is done! Once this duplicate
+  is in main, NameHash Labs will remove this Tooltip component from
+  @namehash/nameguard-react and update the imports to use only the
+  new component instead, the @namehash/namekit-react Tooltip.
+
+  A ShortCut story was created to track this migration:
+  https://app.shortcut.com/ps-web3/story/25607/remove-namehash-nameguard-react-tooltip-component
+*/
+
 import React, { useState } from "react";
 import { Float, type FloatProps } from "@headlessui-float/react";
 import { Popover } from "@headlessui/react";
@@ -25,7 +39,7 @@ export function Tooltip({
   const handleClose = () => setOpen(false);
 
   return (
-    <Popover className="flex items-center justify-center">
+    <Popover className="flex items-center">
       <Float
         show={open}
         placement={placement}

packages/namekit-react/package.json

@@ -36,6 +36,8 @@
     }
   },
   "dependencies": {
+    "@headlessui-float/react": "0.11.4",
+    "@headlessui/react": "1.7.17",
     "@namehash/ens-webfont": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

packages/namekit-react/src/components/Tooltip.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { Float, type FloatProps } from "@headlessui-float/react";
+import { Popover } from "@headlessui/react";
+
+type Props = {
+  maxTooltipWidth?: number;
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  placement?: FloatProps["placement"];
+};
+
+const DEFAULT_MAX_TOOLTIP_WIDTH = Number.POSITIVE_INFINITY;
+
+export function Tooltip({
+  trigger,
+  children,
+  placement = "top",
+  maxTooltipWidth = DEFAULT_MAX_TOOLTIP_WIDTH,
+
+  /*
+    Props are applied to the Float component, 
+    which is a wrapper for the tooltip "children".
+  */
+  ...props
+}: Props) {
+  const [open, setOpen] = useState(false);
+
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <Popover className="nk-flex nk-items-center nk-justify-center">
+      <Float
+        show={open}
+        placement={placement}
+        offset={15}
+        shift={6}
+        flip={10}
+        arrow
+        portal
+        enter="nk-transition nk-duration-200 nk-ease-out"
+        enterFrom="nk-opacity-0 nk--translate-y-1"
+        enterTo="nk-opacity-100 nk-translate-y-0"
+        leave="nk-transition nk-duration-150 nk-ease-in"
+        leaveFrom="nk-opacity-100 nk-translate-y-0"
+        leaveTo="nk-opacity-0 nk--translate-y-1"
+        {...props}
+      >
+        <Popover.Group
+          onClick={handleOpen}
+          onMouseEnter={handleOpen}
+          onMouseLeave={handleClose}
+          className="nk-cursor-auto"
+        >
+          {trigger}
+        </Popover.Group>
+
+        <Popover.Panel
+          onMouseEnter={handleOpen}
+          onMouseLeave={handleClose}
+          style={{ maxWidth: maxTooltipWidth }}
+          className="nk-rounded-md nk-bg-black focus:nk-outline-none"
+        >
+          <Float.Arrow className="nk-absolute nk-h-5 nk-w-5 nk-rotate-45 nk-bg-black nk-rounded-b" />
+          <div className="nk-relative nk-h-full nk-rounded-md nk-text-sm nk-font-medium nk-text-white nk-py-2 nk-px-4">
+            {children}
+          </div>
+        </Popover.Panel>
+      </Float>
+    </Popover>
+  );
+}

packages/namekit-react/src/index.ts

@@ -13,3 +13,4 @@ export * from "./components/ENSTextArea";
 export * from "./components/Input";
 export * from "./components/ENSInput";
 export * from "./components/Link";
+export * from "./components/Tooltip";