@alquimia-ai/ui 1.2.1 → 1.2.4

package/src/components/molecules/documents/document-selector.tsx

@@ -1,79 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Select,
-  SelectTrigger,
-  SelectContent,
-  SelectItem,
-  SelectLabel,
-  SelectGroup,
-  SelectValue,
-} from "../../atoms";
-import { AlquimiaDocument, ActionResponse } from '../../../types/type';
-import { ExternalLink } from "lucide-react";
-import { DocumentViewer } from './document-viewer';
-
-type DocumentSelectorProps = {
-  documents: AlquimiaDocument[];
-  getDocument: (id: string) => Promise<ActionResponse<Blob>>
-  logInfoMessage: (info: string, data: any) => void
-}
-export const DocumentSelector = ({ documents, getDocument, logInfoMessage }: DocumentSelectorProps) =>{
-  const [selectedDocName, setSelectedDocName] = useState<string | undefined>(undefined);
-  const [selectedDoc, setSelectedDoc] = useState<string | null>(null);
-  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-
-
-  const handleDocumentClick = (doc: any, event: React.MouseEvent) => {
-    event.stopPropagation();
-    setSelectedDoc(doc);
-    logInfoMessage("Selected document", {
-      documentId: doc.id,
-      documentName: doc.name,
-    });
-    setIsModalOpen(true);
-  };
-
-  const handleDrawerClose = () => {
-    setIsModalOpen(false)
-  }
-
-  return (
-    <div className="w-full md:w-4/6 alq--document-selector">
-      <Select value={selectedDocName} onValueChange={setSelectedDocName}>
-        <SelectTrigger aria-label="Documentos">
-          <SelectValue placeholder="Documentos" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Documents</SelectLabel>
-            {documents.map((doc) => (
-              <div key={doc.id} className="w-full flex relative">
-                <SelectItem className="w-full" key={doc.id} value={doc.id}>
-                  <div className="flex justify-between w-full">
-                    <p className="h-4 truncate mr-5">{doc.name}</p>
-                  </div>
-                </SelectItem>
-                  <div
-                    onClick={(event) => handleDocumentClick(doc, event)}
-                    className="bflex items-center text-gray-400 hover:text-gray-500 absolute right-0 mt-2"
-                    aria-label={`Open ${doc.name}`}
-                  >
-                    <ExternalLink className="h-4 w-4 mx-2" />
-                  </div>
-                </div>
-            ))}
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-      {selectedDoc && (
-        <DocumentViewer
-          doc={selectedDoc}
-          docName={selectedDocName || ''}
-          isOpen={isModalOpen}
-          onClose={handleDrawerClose}
-          getDocument={getDocument}
-        />
-      )}
-    </div>
-  );
-}

package/src/components/molecules/documents/document-viewer.tsx

@@ -1,85 +0,0 @@
-'use client'
-
-import React, { useEffect } from 'react'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  Loader
-} from "../../atoms";
-import { useDocumentReader } from '../../hooks/use-document';
-import dynamic from 'next/dynamic';
-import { ActionResponse } from '../../../types/type';
-const PdfViewer = dynamic(() => import("../viewers/pdf-viewer"), { ssr: false });
-const PlainTextViewer = dynamic(() => import("../viewers/plain-text-viewer"), { ssr: false });
-
-type DocumentViewerProps = {
-  docId?: string;
-  doc: any;
-  docName: string;
-  isOpen: boolean;
-  onClose: () => void;
-  getDocument: (id: string) => Promise<ActionResponse<Blob>>;
-};
-
-export const DocumentViewer = ({
-  docId,
-  doc,
-  isOpen,
-  onClose,
-  getDocument,
-}: DocumentViewerProps) => {
-  const { document, loading, fetchDocument, resetDocument, error } =
-    useDocumentReader(doc.id, getDocument);
-
-  useEffect(() => {
-    resetDocument();
-
-    if (isOpen) {
-      fetchDocument();
-    }
-  }, [isOpen]);
-
-  const documentRender = document && !error ? (
-    <DocumentFactory document={document} docId={doc.id} />
-  ) : (
-    <div className="flex flex-col items-center justify-center h-full w-full text-center p-4">
-      <div className="text-primary font-medium">{error}</div>
-    </div>
-  );
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent
-        aria-describedby={document ? "document-description" : undefined}
-        className="h-[90%] max-w-[90%] gap-0 flex flex-col focus:outline-none"
-      >
-        <DialogHeader className="border-b border-border pb-2">
-          <DialogTitle>{doc.name}</DialogTitle>
-        </DialogHeader>
-        {!document && loading ? (
-          <Loader size="xl" colorVariant="destructive" />
-        ) : (
-          documentRender
-        )}
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-type DocViewerFactoryProps = {
-  document: Blob | null;
-  docId: string;
-};
-
-const DocumentFactory: React.FC<DocViewerFactoryProps> = ({ document, docId }) => {
-  switch (document && document.type) {
-    case 'application/pdf':
-      return <PdfViewer doc={document} docId={docId} />;
-    case 'text/plain':
-      return <PlainTextViewer doc={document} docId={docId} />;
-    default:
-      return <div>Unsupported file type</div>;
-  }
-};

package/src/components/molecules/documents/index.ts

@@ -1,2 +0,0 @@
-export * from "./document-selector";
-export * from "./document-viewer";

package/src/components/molecules/index.ts

@@ -1,11 +0,0 @@
-export { PageContainer } from "./page-container";
-export * from "./alert-dialog";
-export * from "./assistant-button";
-export * from "./carousel";
-export * from "./navigation-menu";
-export * from "./sidebar";
-export * from "./sonner";
-export * from "./rating-stars";
-export * from "./rating-thumbs";
-export * from "./rating-comment";
-export * from "./call-out";

package/src/components/molecules/navigation-menu.tsx

@@ -1,128 +0,0 @@
-import * as React from "react";
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import { cva } from "class-variance-authority";
-import { ChevronDown } from "lucide-react";
-
-import { cn } from "../../lib/utils";
-
-const NavigationMenu = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative z-10 flex max-w-max flex-1 items-center justify-center",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <NavigationMenuViewport />
-  </NavigationMenuPrimitive.Root>
-));
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
-
-const NavigationMenuList = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.List
-    ref={ref}
-    className={cn(
-      "group flex flex-1 list-none items-center justify-center space-x-1",
-      className
-    )}
-    {...props}
-  />
-));
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
-
-const NavigationMenuItem = NavigationMenuPrimitive.Item;
-
-const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
-);
-
-const NavigationMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Trigger
-    ref={ref}
-    className={cn(navigationMenuTriggerStyle(), "group", className)}
-    {...props}
-  >
-    {children}{" "}
-    <ChevronDown
-      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
-      aria-hidden="true"
-    />
-  </NavigationMenuPrimitive.Trigger>
-));
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
-
-const NavigationMenuContent = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Content
-    ref={ref}
-    className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
-      className
-    )}
-    {...props}
-  />
-));
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
-
-const NavigationMenuLink = NavigationMenuPrimitive.Link;
-
-const NavigationMenuViewport = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
->(({ className, ...props }, ref) => (
-  <div className={cn("absolute left-0 top-full flex justify-center")}>
-    <NavigationMenuPrimitive.Viewport
-      className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  </div>
-));
-NavigationMenuViewport.displayName =
-  NavigationMenuPrimitive.Viewport.displayName;
-
-const NavigationMenuIndicator = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Indicator
-    ref={ref}
-    className={cn(
-      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
-      className
-    )}
-    {...props}
-  >
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
-  </NavigationMenuPrimitive.Indicator>
-));
-NavigationMenuIndicator.displayName =
-  NavigationMenuPrimitive.Indicator.displayName;
-
-export {
-  navigationMenuTriggerStyle,
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
-};

package/src/components/molecules/page-container.tsx

@@ -1,17 +0,0 @@
-import { forwardRef } from "react";
-import { cn } from "../../lib/utils";
-
-interface PageContainerProps extends React.HTMLAttributes<HTMLDivElement> {}
-const PageContainer = forwardRef<HTMLDivElement, PageContainerProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn(className, "alq--page-container")}
-        {...props}
-      />
-    );
-  }
-);
-PageContainer.displayName = "PageContainer";
-export { PageContainer };

package/src/components/molecules/rating-comment.tsx

@@ -1,93 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Book } from "lucide-react"
-import { cn } from "../../lib/utils"
-import { Button } from "../atoms"
-import {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogOverlay,
-  DialogTitle,
-} from "../atoms/ui/dialog";
-
-interface RatingCommentProps {
-  currentRating: string
-  onRate: (comment: string) => void
-  className?: string
-  isLoading?: boolean
-}
-
-export const RatingComment = React.forwardRef<HTMLButtonElement, RatingCommentProps>(
-  ({ currentRating, onRate, className, isLoading }, ref) => {
-    const [open, setOpen] = React.useState(false)
-    const [comment, setComment] = React.useState("")
-    const [animate, setAnimate] = React.useState(false);
-
-    const handleRate = () => {
-      onRate(comment)
-      setOpen(false)
-    }
-
-    React.useEffect(() => {
-      if (currentRating) {
-        setAnimate(true);
-        const timer = setTimeout(() => setAnimate(false), 150);
-        return () => clearTimeout(timer);
-      }
-    }, [currentRating]);
-
-    React.useEffect(() => {
-      setComment("")
-    }, [open])
-
-    return (
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogTrigger asChild>
-          <Button
-            ref={ref}
-            variant="link"
-            size={"lg"}
-            className={cn(
-              "inline-flex p-2 items-center justify-center rounded-md text-sm font-medium transition-colors [&_svg]:size-5  focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring bg-transparent hover:none disabled:pointer-events-none disabled:opacity-50",
-              className
-            )}
-            disabled={isLoading}
-          >
-            <Book
-              className={cn(
-                "w-5 h-5 transition-all duration-500",
-                animate && "animate-ping",
-                isLoading && "animate-pulse",
-                `${comment ? "alq-rating-comment" : "stroke-gray-400"}`
-              )}
-            />
-          </Button>
-        </DialogTrigger>
-        <DialogOverlay className="fixed inset-0 bg-black bg-opacity-50" />
-        <DialogContent aria-describedby={undefined}>
-          <DialogTitle className="text-lg font-medium">
-            Deja un comentario
-          </DialogTitle>
-          <textarea
-            className="mt-4 w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
-            rows={4}
-            value={comment}
-            onChange={(e) => setComment(e.target.value)}
-          />
-          <div className="mt-4 flex justify-end">
-            <Button
-              onClick={handleRate}
-              disabled={!comment}
-            >
-              Enviar
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-)
-
-RatingComment.displayName = "RatingComment"

package/src/components/molecules/rating-stars.tsx

@@ -1,136 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-import { Star } from "lucide-react"
-import { cn } from "../../lib/utils";
-import { Button } from "../atoms";
-
-const TooltipProvider = TooltipPrimitive.Provider
-const Tooltip = TooltipPrimitive.Root
-const TooltipTrigger = TooltipPrimitive.Trigger
-
-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-primary px-3 py-1.5 text-xs text-primary-foreground shadow-lg 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
-
-interface StarColors {
-  fill: string
-  stroke: string
-}
-
-interface RatingStarsProps {
-  currentRating: number
-  isLoading: boolean
-  onRate: (rating: number) => void
-  className?: string
-}
-
-const StarRating = React.forwardRef<
-  HTMLDivElement,
-  { rating: number; onRate: (r: number) => void }
->(({ rating, onRate }, ref) => (
-  <div ref={ref} className="flex">
-    {[1, 2, 3, 4, 5].map((star) => (
-      <Button
-        key={star}
-        onClick={() => onRate(star)}
-        variant="link"
-        className="p-1 transition-colors [&_svg]:size-5 h-5"
-        aria-label={`Rate ${star} star${star !== 1 ? "s" : ""}`}
-      >
-        <Star
-          className={cn(
-            "w-5 h-5",
-            star <= rating ? "alq-rating-star-active fill-current stroke-current" : "alq-rating-star-inactive",
-          )}
-        />
-      </Button>
-    ))}
-  </div>
-));
-StarRating.displayName = "StarRating"
-
-export const RatingStars = React.forwardRef<
-  HTMLButtonElement,
-  RatingStarsProps
->(({
-  currentRating = 0,
-  onRate,
-  className,
-  isLoading
-}, ref) => {
-  const [open, setOpen] = React.useState(false)
-  const [animate, setAnimate] = React.useState(false)
-
-  const handleRate = (rating: number) => {
-    onRate(rating)
-    setOpen(false)
-  }
-
-  React.useEffect(() => {
-    if (currentRating > 0) {
-      setAnimate(true)
-      const timer = setTimeout(() => setAnimate(false), 150)
-      return () => clearTimeout(timer)
-    }
-  }, [currentRating])
-
-  const hasRated = currentRating > 0
-
-  return (
-    <TooltipProvider>
-      <Tooltip open={open} onOpenChange={setOpen}>
-        <TooltipTrigger asChild>
-          <Button
-            ref={ref}
-            variant="link"
-            className={cn(
-              "inline-flex items-center justify-center rounded-md text-sm font-medium [&_svg]:size-5  transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-              className
-            )}
-            disabled={isLoading}
-            onClick={() => setOpen(!open)}
-          >
-            <Star 
-              className={cn(
-                "w-5 h-5 transition-all duration-500",
-                animate && "animate-ping",
-                isLoading && "animate-pulse",
-                hasRated ? "alq-rating-star-active fill-current stroke-current" : "alq-rating-star-inactive",
-              )}
-            />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent side="top" align="center" className="p-0">
-          <div className="p-2 bg-background">
-            <StarRating 
-              rating={currentRating} 
-              onRate={handleRate}
-            />
-          </div>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  )
-})
-RatingStars.displayName = "RatingStars"
-
-export {
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
-  TooltipProvider,
-}

package/src/components/molecules/rating-thumbs.tsx

@@ -1,90 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ThumbsUp, ThumbsDown } from "lucide-react"
-import { Button } from "../atoms";
-import { cn } from "../../lib/utils";
-
-interface RatingThumbsProps {
-  currentRating: string
-  isLoading: boolean
-  onRate: (rating: "thumbsUp" | "thumbsDown" | "") => void
-  direction?: "row" | "column"
-  className?: string
-}
-
-export const RatingThumbs = React.forwardRef<HTMLDivElement, RatingThumbsProps>(
-  (
-    {
-      currentRating,
-      onRate,
-      direction = "row",
-      className,
-      isLoading
-    },
-    ref
-  ) => {
-    const [animate, setAnimate] = React.useState(false);
-
-    React.useEffect(() => {
-      if (currentRating) {
-        setAnimate(true);
-        const timer = setTimeout(() => setAnimate(false), 150);
-        return () => clearTimeout(timer);
-      }
-    }, [currentRating]);
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "inline-flex",
-          direction === "column" ? "flex-col" : "flex-row",
-          "space-x-1 gap-4",
-          className
-        )}
-      >
-        <Button
-          variant="link"
-          onClick={() => onRate(currentRating === "thumbsUp" ? "" : "thumbsUp")}
-          className={cn(
-            "p-1 transition-colors disabled:opacity-50 [&_svg]:size-5",
-            `hover:alq-rating-thumbsup/10`
-          )}
-          aria-label="Thumbs up"
-          disabled={isLoading}
-        >
-          <ThumbsUp
-            className={cn(
-              "w-5 h-5 transition-all duration-500",
-              animate && currentRating === "thumbsUp" && "animate-ping",
-              isLoading && "animate-pulse",
-              currentRating === "thumbsUp" ? "alq-rating-thumbsup fill-current stroke-current" : "alq-rating-thumbs-inactive fill-transparent"
-            )}
-          />
-        </Button>
-        <Button
-          variant="link"
-          onClick={() => onRate(currentRating === "thumbsDown" ? "" : "thumbsDown")}
-          className={cn(
-            "p-1 transition-colors disabled:opacity-50 mt-0.5 [&_svg]:size-5",
-            `hover:bg-alq-rating-thumbsdown/10`
-          )}
-          aria-label="Thumbs down"
-          disabled={isLoading}
-        >
-          <ThumbsDown
-            className={cn(
-              "w-5 h-5 transition-all duration-500",
-              animate && currentRating === "thumbsDown" && "animate-ping",
-              isLoading && "animate-pulse",
-              currentRating === "thumbsDown" ? "alq-rating-thumbsdown fill-current stroke-current" : "alq-rating-thumbs-inactive fill-transparent"
-            )}
-          />
-        </Button>
-      </div>
-    );
-  }
-);
-
-RatingThumbs.displayName = "RatingThumbs"