@rovula/ui 0.0.26 → 0.0.27

package/src/components/Toast/useToast.ts

@@ -0,0 +1,222 @@
+"use client";
+
+// Inspired by react-hot-toast library
+import * as React from "react";
+import { ToastActionElement, ToastProps } from "./Toast";
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 6000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+  contentMode?: "vertical" | "horizontal";
+};
+
+type ToasterPosition =
+  | "top-center"
+  | "top-left"
+  | "top-right"
+  | "bottom-center"
+  | "bottom-left"
+  | "bottom-right"
+  | undefined;
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+  ADD_POSITION: "ADD_POSITION",
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"];
+      toastId?: ToasterToast["id"];
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"];
+      toastId?: ToasterToast["id"];
+    }
+  | {
+      type: ActionType["ADD_POSITION"];
+      position?: ToasterPosition;
+    };
+
+interface State {
+  toasts: ToasterToast[];
+  position?: ToasterPosition;
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      };
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+    case "ADD_POSITION":
+      return {
+        ...state,
+        position: action.position,
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [], position: undefined };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, "id">;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+type ToastOptions = {
+  position?: State["position"];
+};
+
+function useToast(options?: ToastOptions) {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  React.useEffect(() => {
+    dispatch({
+      type: "ADD_POSITION",
+      position: options?.position,
+    });
+  }, [options?.position]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+
+export { useToast, toast };

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,152 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useArgs } from "@storybook/preview-api";
+import {
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./Tooltip";
+import Button from "../Button/Button";
+import { TooltipSimple } from "./TooltipSimple";
+
+const meta = {
+  title: "Components/Tooltip",
+  // component: TooltipProvider,
+  tags: ["react-docgen-typescript"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    delayDuration: 700,
+    skipDelayDuration: 300,
+    disableHoverableContent: false,
+  },
+  render: (args: any) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex flex-1 justify-center items-center space-x-2">
+          <TooltipProvider
+            delayDuration={props.delayDuration}
+            skipDelayDuration={props.skipDelayDuration}
+            disableHoverableContent={props.disableHoverableContent}
+          >
+            <Tooltip>
+              <TooltipTrigger>Hover</TooltipTrigger>
+              <TooltipContent>
+                <p>Add to library</p>
+                <TooltipArrow className="m-0" />
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const Position = {
+  argTypes: {
+    side: { control: "select", options: ["top", "right", "bottom", "left"] },
+    align: { control: "select", options: ["start", "center", "end"] },
+  },
+  args: {
+    side: "top",
+    align: "center",
+    sideOffset: 4,
+  },
+  render: function Render(args) {
+    return (
+      <div className="flex flex-row gap-4 h-full w-full">
+        <div className="flex flex-1 h-60 justify-center items-center space-x-2">
+          <TooltipProvider>
+            <Tooltip open>
+              <TooltipTrigger>Hover</TooltipTrigger>
+              <TooltipContent
+                side={args.side}
+                align={args.align}
+                sideOffset={args.sideOffset}
+              >
+                <p>Add to library</p>
+                <TooltipArrow className="m-0" />
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj<{
+  side: "top" | "right" | "bottom" | "left";
+  align: "start" | "center" | "end";
+  sideOffset: number;
+}>;
+
+export const Controlled = {
+  args: {
+    open: false,
+  },
+  render: function Render(args) {
+    const [{ open }, updateArgs] = useArgs();
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex flex-1 justify-center items-center space-x-2">
+          <TooltipProvider>
+            <Tooltip defaultOpen open={open}>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  onMouseOver={() => updateArgs({ open: true })}
+                  onMouseLeave={() => updateArgs({ open: false })}
+                >
+                  Hover
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Add to library</p>
+                <TooltipArrow className="m-0" />
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const Simple = {
+  args: {
+    open: false,
+  },
+  render: function Render(args) {
+    const [{ open }, updateArgs] = useArgs();
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex flex-1 justify-center items-center space-x-2">
+          <TooltipSimple content="Tooltip content">
+            <button>Tooltip trigger</button>
+          </TooltipSimple>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/utils/cn";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipArrow = TooltipPrimitive.Arrow;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md bg-common-black px-3 py-1.5 typography-buttonMS text-common-white shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  TooltipArrow,
+};

package/src/components/Tooltip/TooltipSimple.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import React, { ReactNode } from "react";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipArrow,
+  TooltipProvider,
+} from "./Tooltip";
+
+interface TooltipProps {
+  children: ReactNode;
+  content: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  className?: string;
+}
+
+export function TooltipSimple({
+  children,
+  content,
+  open,
+  defaultOpen,
+  onOpenChange,
+  ...props
+}: TooltipProps) {
+  return (
+    <TooltipProvider>
+      <Tooltip
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}
+      >
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent side="top" align="center" {...props}>
+          {content}
+          <TooltipArrow width={11} height={5} />
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

package/src/index.ts

@@ -33,6 +33,11 @@ export * from "./components/Search/Search";
 export * from "./components/Slider/Slider";
 export * from "./components/Switch/Switch";
 export * from "./components/DropdownMenu/DropdownMenu";
+export * from "./components/Tooltip/Tooltip";
+export * from "./components/Tooltip/TooltipSimple";
+export * from "./components/Toast/Toast";
+export * from "./components/Toast/Toaster";
+export * from "./components/Toast/useToast";
 
 // Export component types
 export type { ButtonProps } from "./components/Button/Button";