@oppulence/design-system 1.0.3 → 1.0.5

package/src/components/organisms/reasoning.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { BrainIcon, ChevronDownIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+import { createContext, memo, useContext, useEffect, useState } from "react";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../molecules/collapsible";
+import { Response } from "./response";
+
+type ReasoningContextValue = {
+  isStreaming: boolean;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  duration: number;
+};
+
+const ReasoningContext = createContext<ReasoningContextValue | null>(null);
+
+const useReasoning = () => {
+  const context = useContext(ReasoningContext);
+  if (!context) {
+    throw new Error("Reasoning components must be used within Reasoning");
+  }
+  return context;
+};
+
+export type ReasoningProps = Omit<
+  ComponentProps<typeof Collapsible>,
+  "className"
+> & {
+  isStreaming?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  duration?: number;
+};
+
+const AUTO_CLOSE_DELAY = 1000;
+const MS_IN_S = 1000;
+
+export const Reasoning = memo(
+  ({
+    isStreaming = false,
+    open,
+    defaultOpen = true,
+    onOpenChange,
+    duration: durationProp,
+    children,
+    ...props
+  }: ReasoningProps) => {
+    const [isOpen, setIsOpen] = useControllableState({
+      prop: open,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+    });
+    const [duration, setDuration] = useControllableState({
+      prop: durationProp,
+      defaultProp: 0,
+    });
+
+    const [hasAutoClosedRef, setHasAutoClosedRef] = useState(false);
+    const [startTime, setStartTime] = useState<number | null>(null);
+
+    useEffect(() => {
+      if (isStreaming) {
+        if (startTime === null) {
+          setStartTime(Date.now());
+        }
+      } else if (startTime !== null) {
+        setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S));
+        setStartTime(null);
+      }
+    }, [isStreaming, startTime, setDuration]);
+
+    useEffect(() => {
+      if (defaultOpen && !isStreaming && isOpen && !hasAutoClosedRef) {
+        const timer = setTimeout(() => {
+          setIsOpen(false);
+          setHasAutoClosedRef(true);
+        }, AUTO_CLOSE_DELAY);
+
+        return () => clearTimeout(timer);
+      }
+    }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosedRef]);
+
+    const handleOpenChange = (newOpen: boolean) => {
+      setIsOpen(newOpen);
+    };
+
+    return (
+      <ReasoningContext.Provider
+        value={{ isStreaming, isOpen, setIsOpen, duration }}
+      >
+        <Collapsible
+          className="not-prose mb-4"
+          onOpenChange={handleOpenChange}
+          open={isOpen}
+          {...props}
+        >
+          {children}
+        </Collapsible>
+      </ReasoningContext.Provider>
+    );
+  },
+);
+
+export type ReasoningTriggerProps = Omit<
+  ComponentProps<typeof CollapsibleTrigger>,
+  "className"
+>;
+
+export const ReasoningTrigger = memo(
+  ({ children, ...props }: ReasoningTriggerProps) => {
+    const { isStreaming, isOpen, duration } = useReasoning();
+
+    return (
+      <CollapsibleTrigger
+        className="flex items-center gap-2 text-muted-foreground text-sm"
+        {...props}
+      >
+        {children ?? (
+          <>
+            <BrainIcon className="size-4" />
+            {isStreaming || duration === 0 ? (
+              <p>Thinking...</p>
+            ) : (
+              <p>
+                Thought for {duration} {duration === 1 ? "second" : "seconds"}
+              </p>
+            )}
+            <ChevronDownIcon
+              className={
+                isOpen
+                  ? "size-4 text-muted-foreground transition-transform rotate-180"
+                  : "size-4 text-muted-foreground transition-transform"
+              }
+            />
+          </>
+        )}
+      </CollapsibleTrigger>
+    );
+  },
+);
+
+export type ReasoningContentProps = Omit<
+  ComponentProps<typeof CollapsibleContent>,
+  "className"
+> & {
+  children: string;
+};
+
+export const ReasoningContent = memo(
+  ({ children, ...props }: ReasoningContentProps) => (
+    <CollapsibleContent
+      className="mt-4 text-sm data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in"
+      {...props}
+    >
+      <Response>{children}</Response>
+    </CollapsibleContent>
+  ),
+);
+
+Reasoning.displayName = "Reasoning";
+ReasoningTrigger.displayName = "ReasoningTrigger";
+ReasoningContent.displayName = "ReasoningContent";

package/src/components/organisms/response.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { type ComponentProps, memo, type ReactNode } from "react";
+import { Streamdown } from "streamdown";
+
+import { Table } from "../molecules/table";
+
+type ResponseProps = Omit<ComponentProps<typeof Streamdown>, "className">;
+
+const CustomUnorderedList = ({
+  children,
+  ...props
+}: {
+  node?: unknown;
+  children?: ReactNode;
+}) => (
+  <ul className="list-none m-0 p-0 leading-relaxed" {...props}>
+    {children}
+  </ul>
+);
+
+const CustomOrderedList = ({
+  children,
+  ...props
+}: {
+  node?: unknown;
+  children?: ReactNode;
+}) => (
+  <ol
+    className="list-none m-0 p-0 leading-relaxed"
+    {...props}
+    data-streamdown="unordered-list"
+  >
+    {children}
+  </ol>
+);
+
+const CustomListItem = ({
+  children,
+  ...props
+}: {
+  node?: unknown;
+  children?: ReactNode;
+}) => (
+  <li
+    className="py-0 my-0 leading-relaxed"
+    {...props}
+    data-streamdown="list-item"
+  >
+    {children}
+  </li>
+);
+
+const isExternalUrl = (href?: string) => {
+  if (!href) return false;
+  return /^https?:\/\//i.test(href);
+};
+
+export const Response = memo(
+  ({ ...props }: ResponseProps) => (
+    <Streamdown
+      className="size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 space-y-4 [&>h3+ul]:!mt-2 [&>h3+ol]:!mt-2 [&>h4+ul]:!mt-2 [&>h4+ol]:!mt-2 [&>ul]:!my-0 [&>ul]:!-mt-4 [&>*+ul]:!mt-2 [&>ol]:!my-0 [&>ol]:!-mt-4 [&>*+ol]:!mt-2"
+      components={{
+        ul: (componentProps) => <CustomUnorderedList {...componentProps} />,
+        ol: (componentProps) => <CustomOrderedList {...componentProps} />,
+        li: (componentProps) => <CustomListItem {...componentProps} />,
+        h2: ({ children, ...componentProps }) => (
+          <h3
+            className="font-medium text-sm text-primary tracking-wide"
+            {...componentProps}
+          >
+            {children}
+          </h3>
+        ),
+        h3: ({ children, ...componentProps }) => (
+          <h3
+            className="font-medium text-sm text-primary tracking-wide"
+            {...componentProps}
+          >
+            {children}
+          </h3>
+        ),
+        h4: ({ children, ...componentProps }) => (
+          <h4
+            className="font-medium text-sm text-primary tracking-wide"
+            {...componentProps}
+          >
+            {children}
+          </h4>
+        ),
+        p: ({ children, ...componentProps }) => (
+          <p className="leading-relaxed" {...componentProps}>
+            {children}
+          </p>
+        ),
+        table: (componentProps) => (
+          <div className="relative overflow-x-auto">
+            <Table variant="bordered" {...componentProps} />
+          </div>
+        ),
+        a: (componentProps) => {
+          if (isExternalUrl(componentProps.href)) {
+            return (
+              <a
+                {...componentProps}
+                rel="noreferrer"
+                target="_blank"
+              />
+            );
+          }
+
+          return <a {...componentProps} />;
+        },
+      }}
+      {...props}
+    />
+  ),
+  (prevProps, nextProps) => prevProps.children === nextProps.children,
+);
+
+Response.displayName = "Response";

package/src/components/organisms/toast-toaster.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { Icons } from "../atoms/icons";
+import { Progress } from "../atoms/progress";
+import { Spinner } from "../atoms/spinner";
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "./toast";
+import { useToast } from "./use-toast";
+
+export function ToastToaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(
+        ({
+          id,
+          title,
+          description,
+          progress = 0,
+          action,
+          footer,
+          ...props
+        }) => {
+          return (
+            <Toast key={id} {...props}>
+              <div className="flex flex-col">
+                <div className="flex w-full">
+                  <div className="space-y-2 w-full justify-center">
+                    <div className="flex space-x-2 justify-between">
+                      <div className="flex space-x-2 items-center">
+                        {props?.variant && (
+                          <div className="w-[20px] h-[20px] flex items-center">
+                            {props.variant === "ai" && (
+                              <Icons.AI size={16} color="#0064D9" />
+                            )}
+                            {props?.variant === "success" && (
+                              <Icons.Check size={16} />
+                            )}
+                            {props?.variant === "error" && (
+                              <Icons.Error size={16} color="#FF3638" />
+                            )}
+                            {props?.variant === "progress" && <Spinner />}
+                            {props?.variant === "spinner" && <Spinner />}
+                          </div>
+                        )}
+                        <div>{title && <ToastTitle>{title}</ToastTitle>}</div>
+                      </div>
+
+                      <div>
+                        {props?.variant === "progress" && (
+                          <span className="text-sm text-[#878787]">
+                            {progress}%
+                          </span>
+                        )}
+                      </div>
+                    </div>
+
+                    {props.variant === "progress" && <Progress value={progress} />}
+
+                    {description && (
+                      <ToastDescription>{description}</ToastDescription>
+                    )}
+                  </div>
+                  {action}
+                  <ToastClose />
+                </div>
+
+                <div className="w-full flex justify-end">{footer}</div>
+              </div>
+            </Toast>
+          );
+        },
+      )}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}

package/src/components/organisms/toast.tsx

@@ -0,0 +1,124 @@
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { type VariantProps, cva } from "class-variance-authority";
+import { X } from "lucide-react";
+import * as React from "react";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>, "className">
+>((props, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className="fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:left-0 sm:top-auto sm:flex-col md:max-w-[420px]"
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  "dark:bg-secondary text-foreground border bg-[#F6F6F3] group pointer-events-auto relative flex w-full items-center overflow-hidden border p-5 pr-5 transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-left-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "",
+        error: "",
+        success: "",
+        progress: "",
+        spinner: "",
+        ai: "",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root>, "className"> &
+    VariantProps<typeof toastVariants>
+>(({ variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={toastVariants({ variant })}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>, "className">
+>((props, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className="inline-flex h-8 shrink-0 items-center justify-center border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive"
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>, "className">
+>((props, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className="absolute right-2 top-2 p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50"
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>, "className">
+>((props, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className="text-sm"
+    {...props}
+  />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  Omit<
+    React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>,
+    "className"
+  >
+>((props, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className="text-xs text-[#878787]"
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};

package/src/components/organisms/use-toast.tsx

@@ -0,0 +1,206 @@
+// Inspired by react-hot-toast library
+import * as React from "react";
+import type { ToastActionElement, ToastProps } from "./toast";
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = Omit<ToastProps, "title"> & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+  progress?: number;
+  footer?: React.ReactNode;
+};
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_VALUE;
+  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"];
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+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": {
+      const existingIndex = state.toasts.findIndex(
+        (t) => t.id === action.toast.id,
+      );
+      if (existingIndex !== -1) {
+        return {
+          ...state,
+          toasts: state.toasts.map((t) =>
+            t.id === action.toast.id
+              ? { ...t, ...action.toast, open: true }
+              : t,
+          ),
+        };
+      }
+      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;
+
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        for (const toast of state.toasts) {
+          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),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  for (const listener of listeners) {
+    listener(memoryState);
+  }
+}
+
+type Toast = Omit<ToasterToast, "id"> & { id?: string };
+
+function toast({ id: providedId, ...props }: Toast) {
+  const id = providedId ?? 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,
+  };
+}
+
+function useToast() {
+  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]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+    update: (toastId: string, props: ToasterToast) =>
+      dispatch({ type: "UPDATE_TOAST", toast: { ...props, id: toastId } }),
+  };
+}
+
+export { useToast, toast };