From 35c91157a32c71812e348bffddd113b510064601 Mon Sep 17 00:00:00 2001 From: "caco.eth" <49823133+FrancoAguzzi@users.noreply.github.com> Date: Fri, 16 Aug 2024 06:23:55 -0300 Subject: [PATCH] feat: [SC-25563] Create Tooltip component and Stories (#348) * Begin transition of Tooltip from NameGuard React to NameKit React --------- Co-authored-by: lightwalker.eth <126201998+lightwalker-eth@users.noreply.github.com> --- .changeset/fluffy-pots-mix.md | 6 + .../stories/Namekit/Tooltip.stories.tsx | 77 ++++++++++++ .../src/components/Tooltip/Tooltip.tsx | 16 ++- packages/namekit-react/package.json | 2 + .../namekit-react/src/components/Tooltip.tsx | 72 +++++++++++ packages/namekit-react/src/index.ts | 1 + pnpm-lock.yaml | 112 +++++++++++++----- 7 files changed, 258 insertions(+), 28 deletions(-) create mode 100644 .changeset/fluffy-pots-mix.md create mode 100644 apps/storybook.namekit.io/stories/Namekit/Tooltip.stories.tsx create mode 100644 packages/namekit-react/src/components/Tooltip.tsx diff --git a/.changeset/fluffy-pots-mix.md b/.changeset/fluffy-pots-mix.md new file mode 100644 index 000000000..51301d922 --- /dev/null +++ b/.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 diff --git a/apps/storybook.namekit.io/stories/Namekit/Tooltip.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/Tooltip.stories.tsx new file mode 100644 index 000000000..bd7843c77 --- /dev/null +++ b/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 = { + 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; + +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! + + ), + }, +}; diff --git a/packages/nameguard-react/src/components/Tooltip/Tooltip.tsx b/packages/nameguard-react/src/components/Tooltip/Tooltip.tsx index ba51ed0d0..49dfb8331 100644 --- a/packages/nameguard-react/src/components/Tooltip/Tooltip.tsx +++ b/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 ( - + setOpen(true); + const handleClose = () => setOpen(false); + + return ( + + + + {trigger} + + + + +
+ {children} +
+ + + + ); +} diff --git a/packages/namekit-react/src/index.ts b/packages/namekit-react/src/index.ts index 1cd9e7db8..7b9a53b01 100644 --- a/packages/namekit-react/src/index.ts +++ b/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"; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 818a75145..f200c5881 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -142,7 +142,7 @@ importers: devDependencies: '@types/node': specifier: latest - version: 22.0.0 + version: 22.1.0 '@types/react': specifier: latest version: 18.3.3 @@ -151,7 +151,7 @@ importers: version: 18.3.0 autoprefixer: specifier: latest - version: 10.4.19(postcss@8.4.40) + version: 10.4.19(postcss@8.4.41) eslint: specifier: ^8.56.0 version: 8.56.0 @@ -160,7 +160,7 @@ importers: version: 14.2.3(eslint@8.56.0)(typescript@5.5.4) postcss: specifier: latest - version: 8.4.40 + version: 8.4.41 tailwind-scrollbar-hide: specifier: 1.1.7 version: 1.1.7 @@ -484,6 +484,12 @@ importers: packages/namekit-react: dependencies: + '@headlessui-float/react': + specifier: 0.11.4 + version: 0.11.4(@headlessui/react@1.7.17)(react-dom@18.3.1)(react@18.3.1) + '@headlessui/react': + specifier: 1.7.17 + version: 1.7.17(react-dom@18.3.1)(react@18.3.1) '@namehash/ens-webfont': specifier: workspace:* version: link:../ens-webfont @@ -2727,6 +2733,17 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /@floating-ui/react-dom@1.3.0(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + dependencies: + '@floating-ui/dom': 1.6.5 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: false + /@floating-ui/react@0.19.2(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-JyNk4A0Ezirq8FlXECvRtQOX/iBe5Ize0W/pLkrZjfHW9GUV7Xnq6zm6fyZuQzaHHqEnVizmvlA96e1/CkZv+w==} peerDependencies: @@ -2740,6 +2757,19 @@ packages: tabbable: 6.2.0 dev: false + /@floating-ui/react@0.19.2(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-JyNk4A0Ezirq8FlXECvRtQOX/iBe5Ize0W/pLkrZjfHW9GUV7Xnq6zm6fyZuQzaHHqEnVizmvlA96e1/CkZv+w==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + dependencies: + '@floating-ui/react-dom': 1.3.0(react-dom@18.3.1)(react@18.3.1) + aria-hidden: 1.2.4 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + tabbable: 6.2.0 + dev: false + /@floating-ui/utils@0.2.2: resolution: {integrity: sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==} dev: false @@ -2759,6 +2789,21 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /@headlessui-float/react@0.11.4(@headlessui/react@1.7.17)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-4I72p196YZuASAnXQSgiS7Rrby2rjPOe0b55mWo0Kq3RS2CPBmSK5yLlN3vfiF2XKqY5Ko3/AFStLirnrXSkTw==} + peerDependencies: + '@headlessui/react': ^1.0.0 + react: ^16 || ^17 || ^18 + react-dom: ^16 || ^17 || ^18 + dependencies: + '@floating-ui/core': 1.6.2 + '@floating-ui/dom': 1.6.5 + '@floating-ui/react': 0.19.2(react-dom@18.3.1)(react@18.3.1) + '@headlessui/react': 1.7.17(react-dom@18.3.1)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: false + /@headlessui/react@1.7.17(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==} engines: {node: '>=10'} @@ -2771,6 +2816,18 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /@headlessui/react@1.7.17(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==} + engines: {node: '>=10'} + peerDependencies: + react: ^16 || ^17 || ^18 + react-dom: ^16 || ^17 || ^18 + dependencies: + client-only: 0.0.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: false + /@heroicons/react@2.0.18(react@18.2.0): resolution: {integrity: sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==} peerDependencies: @@ -5222,10 +5279,10 @@ packages: undici-types: 5.26.5 dev: true - /@types/node@22.0.0: - resolution: {integrity: sha512-VT7KSYudcPOzP5Q0wfbowyNLaVR8QWUdw+088uFWwfvpY6uCWaXpqV6ieLAu9WBcnTa7H4Z5RLK8I5t2FuOcqw==} + /@types/node@22.1.0: + resolution: {integrity: sha512-AOmuRF0R2/5j1knA3c6G3HOk523Ga+l+ZXltX8SF1+5oqcXijjfTd8fY3XRZqSihEu9XhtQnKYLmkFaoxgsJHw==} dependencies: - undici-types: 6.11.1 + undici-types: 6.13.0 dev: true /@types/normalize-package-data@2.4.4: @@ -6001,7 +6058,7 @@ packages: postcss-value-parser: 4.2.0 dev: true - /autoprefixer@10.4.19(postcss@8.4.40): + /autoprefixer@10.4.19(postcss@8.4.41): resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==} engines: {node: ^10 || ^12 || >=14} hasBin: true @@ -6013,7 +6070,7 @@ packages: fraction.js: 4.3.7 normalize-range: 0.1.2 picocolors: 1.0.1 - postcss: 8.4.40 + postcss: 8.4.41 postcss-value-parser: 4.2.0 dev: true @@ -8256,6 +8313,7 @@ packages: /glob@7.2.3: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} + deprecated: Glob versions prior to v9 are no longer supported dependencies: fs.realpath: 1.0.0 inflight: 1.0.6 @@ -10077,13 +10135,13 @@ packages: resolve: 1.22.8 dev: true - /postcss-import@15.1.0(postcss@8.4.40): + /postcss-import@15.1.0(postcss@8.4.41): resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} engines: {node: '>=14.0.0'} peerDependencies: postcss: ^8.0.0 dependencies: - postcss: 8.4.40 + postcss: 8.4.41 postcss-value-parser: 4.2.0 read-cache: 1.0.0 resolve: 1.22.8 @@ -10098,14 +10156,14 @@ packages: postcss: 8.4.39 dev: true - /postcss-js@4.0.1(postcss@8.4.40): + /postcss-js@4.0.1(postcss@8.4.41): resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} engines: {node: ^12 || ^14 || >= 16} peerDependencies: postcss: ^8.4.21 dependencies: camelcase-css: 2.0.1 - postcss: 8.4.40 + postcss: 8.4.41 /postcss-load-config@4.0.2(postcss@8.4.38): resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==} @@ -10141,7 +10199,7 @@ packages: yaml: 2.4.2 dev: true - /postcss-load-config@4.0.2(postcss@8.4.40): + /postcss-load-config@4.0.2(postcss@8.4.41): resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==} engines: {node: '>= 14'} peerDependencies: @@ -10154,7 +10212,7 @@ packages: optional: true dependencies: lilconfig: 3.1.1 - postcss: 8.4.40 + postcss: 8.4.41 yaml: 2.4.2 /postcss-nested@6.0.1(postcss@8.4.39): @@ -10167,13 +10225,13 @@ packages: postcss-selector-parser: 6.0.16 dev: true - /postcss-nested@6.0.1(postcss@8.4.40): + /postcss-nested@6.0.1(postcss@8.4.41): resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==} engines: {node: '>=12.0'} peerDependencies: postcss: ^8.2.14 dependencies: - postcss: 8.4.40 + postcss: 8.4.41 postcss-selector-parser: 6.0.16 /postcss-selector-parser@6.0.16: @@ -10212,8 +10270,8 @@ packages: source-map-js: 1.2.0 dev: true - /postcss@8.4.40: - resolution: {integrity: sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==} + /postcss@8.4.41: + resolution: {integrity: sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==} engines: {node: ^10 || ^12 || >=14} dependencies: nanoid: 3.3.7 @@ -11468,11 +11526,11 @@ packages: normalize-path: 3.0.0 object-hash: 3.0.0 picocolors: 1.0.1 - postcss: 8.4.40 - postcss-import: 15.1.0(postcss@8.4.40) - postcss-js: 4.0.1(postcss@8.4.40) - postcss-load-config: 4.0.2(postcss@8.4.40) - postcss-nested: 6.0.1(postcss@8.4.40) + postcss: 8.4.41 + postcss-import: 15.1.0(postcss@8.4.41) + postcss-js: 4.0.1(postcss@8.4.41) + postcss-load-config: 4.0.2(postcss@8.4.41) + postcss-nested: 6.0.1(postcss@8.4.41) postcss-selector-parser: 6.0.16 resolve: 1.22.8 sucrase: 3.35.0 @@ -12055,8 +12113,8 @@ packages: resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==} dev: true - /undici-types@6.11.1: - resolution: {integrity: sha512-mIDEX2ek50x0OlRgxryxsenE5XaQD4on5U2inY7RApK3SOJpofyw7uW2AyfMKkhAxXIceo2DeWGVGwyvng1GNQ==} + /undici-types@6.13.0: + resolution: {integrity: sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg==} dev: true /unicode-canonical-property-names-ecmascript@2.0.0: @@ -12375,7 +12433,7 @@ packages: dependencies: '@types/node': 20.12.12 esbuild: 0.19.12 - postcss: 8.4.40 + postcss: 8.4.41 rollup: 4.17.2 optionalDependencies: fsevents: 2.3.3 @@ -12411,7 +12469,7 @@ packages: dependencies: '@types/node': 20.12.7 esbuild: 0.19.12 - postcss: 8.4.40 + postcss: 8.4.41 rollup: 4.17.2 optionalDependencies: fsevents: 2.3.3