chore: housekeeping

synopsisapp · Aug 28, 2024 · 2d37081 · 2d37081
1 parent ec1aab6
commit 2d37081
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 42 deletions.
diff --git a/examples/storybook/src/stories/Tooltip.stories.tsx b/examples/storybook/src/stories/Tooltip.stories.tsx
@@ -6,20 +6,20 @@ const meta: Meta<typeof Tooltip.Root> = {
   title: "Components/Tooltip",
   component: Tooltip.Root,
   tags: ["autodocs"],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Tooltip.Root>;
-
-export const Uncontrolled: Story = {
   decorators: [
     (Story) => (
       <div className="flex flex-col gap-4 items-start">
         <Story />
       </div>
     ),
   ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tooltip.Root>;
+
+export const Uncontrolled: Story = {
   render: (args: TooltipProps["Root"]) => (
     <Tooltip.Root {...args}>
       <Tooltip.Trigger>
@@ -65,13 +65,6 @@ export const Uncontrolled: Story = {
 };
 
 export const Controlled: Story = {
-  decorators: [
-    (Story) => (
-      <div className="flex flex-col gap-4 items-start">
-        <Story />
-      </div>
-    ),
-  ],
   render: (args) => {
     const [open, setOpen] = React.useState(false);
     return (
@@ -87,18 +80,18 @@ export const Controlled: Story = {
     docs: {
       source: {
         code: `
-        const ControlledTooltip = () => {
-          const [open, setOpen] = React.useState(false);
+const ControlledTooltip = () => {
+  const [open, setOpen] = React.useState(false);
 
-          return (
-              <Tooltip.Root  open={open} onOpenChange={setOpen}>
-                <Tooltip.Trigger>
-                  <span>Hover me</span>
-                </Tooltip.Trigger>
-                <Tooltip.Content label="Controlled Tooltip" />
-              </Tooltip.Root>
-          );
-        };
+  return (
+      <Tooltip.Root  open={open} onOpenChange={setOpen}>
+        <Tooltip.Trigger>
+          <span>Hover me</span>
+        </Tooltip.Trigger>
+        <Tooltip.Content label="Controlled Tooltip" />
+      </Tooltip.Root>
+  );
+};
         `,
         language: "jsx",
         type: "code",
@@ -108,13 +101,6 @@ export const Controlled: Story = {
 };
 
 export const CustomContent: Story = {
-  decorators: [
-    (Story) => (
-      <div className="flex flex-col gap-4 items-start">
-        <Story />
-      </div>
-    ),
-  ],
   render: (args: TooltipProps["Root"]) => (
     <Tooltip.Root {...args}>
       <Tooltip.Trigger>

diff --git a/packages/ui/src/components/Tooltip/index.tsx b/packages/ui/src/components/Tooltip/index.tsx
@@ -6,6 +6,7 @@ import type {
   TooltipContentProps,
   TooltipTriggerProps,
 } from "./types";
+import { sharedTooltipStyles } from "./styles";
 
 export const TooltipRoot = ({
   children,
@@ -29,15 +30,6 @@ export const TooltipRoot = ({
 
 TooltipRoot.displayName = "Tooltip.Root";
 
-const classnames = cn(
-  "py-2 px-3 rounded-md bg-gray-700 text-white max-w-[200px]",
-  "will-change-[transform,opacity]",
-  "data-[state=delayed-open]:data-[side=top]:animate-slide-up-and-fade",
-  "data-[state=delayed-open]:data-[side=right]:animate-slide-right-and-fade",
-  "data-[state=delayed-open]:data-[side=left]:animate-slide-left-and-fade",
-  "data-[state=delayed-open]:data-[side=bottom]:animate-slide-down-and-fade"
-);
-
 export const TooltipContent = ({
   children,
   label,
@@ -48,7 +40,7 @@ export const TooltipContent = ({
       <TooltipPrimitive.Content
         sideOffset={5}
         forceMount
-        className={cn(classnames, className)}
+        className={cn(sharedTooltipStyles, className)}
       >
         {label ? (
           <Text variant="body-small-200" noTranslations className="m-0 p-0">

diff --git a/packages/ui/src/components/Tooltip/styles.ts b/packages/ui/src/components/Tooltip/styles.ts
@@ -0,0 +1,10 @@
+import { cn } from "../../utils/cn";
+
+export const sharedTooltipStyles = cn(
+	"py-2 px-3 rounded-md bg-gray-700 text-white max-w-[200px]",
+	"will-change-[transform,opacity]",
+	"data-[state=delayed-open]:data-[side=top]:animate-slide-up-and-fade",
+	"data-[state=delayed-open]:data-[side=right]:animate-slide-right-and-fade",
+	"data-[state=delayed-open]:data-[side=left]:animate-slide-left-and-fade",
+	"data-[state=delayed-open]:data-[side=bottom]:animate-slide-down-and-fade",
+);