@dust-tt/sparkle 0.2.183 → 0.2.184

package/src/components/Notification.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+
+import {
+  CheckCircleIcon,
+  IconButton,
+  XCircleIcon,
+  XMarkIcon,
+} from "@sparkle/index";
+import { classNames } from "@sparkle/lib/utils";
+
+import { Icon } from "./Icon";
+
+export interface NotificationProps {
+  className?: string;
+  description?: string;
+  title?: string;
+  variant: "success" | "error";
+  onClick?: () => void;
+}
+
+export function Notification({
+  description,
+  title,
+  variant,
+  onClick,
+  className = "",
+}: NotificationProps) {
+  return (
+    <div
+      className={classNames(
+        "s-pointer-events-auto s-flex s-max-w-[400px] s-flex-row s-items-center s-gap-2 s-rounded-xl s-border s-border-structure-100 s-bg-structure-0 s-p-4 s-shadow-xl",
+        className
+      )}
+    >
+      {variant === "success" ? (
+        <Icon
+          size="lg"
+          visual={CheckCircleIcon}
+          className="s-pt-0.5 s-text-success-500"
+        />
+      ) : (
+        <Icon
+          size="lg"
+          visual={XCircleIcon}
+          className="s-pt-0.5 s-text-warning-500"
+        />
+      )}
+
+      <div className="s-flex s-flex-col">
+        <div className="s-flex s-grow s-flex-row s-gap-6">
+          <div
+            className={classNames(
+              "s-text-md s-line-clamp-1 s-grow s-font-semibold",
+              variant === "success"
+                ? "s-text-success-500"
+                : "s-text-warning-500"
+            )}
+          >
+            {title || variant}
+          </div>
+          <IconButton
+            icon={XMarkIcon}
+            size="sm"
+            variant="tertiary"
+            onClick={onClick}
+          />
+        </div>
+        {description && (
+          <div className="s-line-clamp-3 s-pr-2 s-text-sm s-font-normal s-text-element-700">
+            {description}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/Page.tsx

@@ -0,0 +1,272 @@
+import React, { ComponentType } from "react";
+
+import { classNames } from "@sparkle/lib/utils";
+
+import { Button, ButtonProps } from "./Button";
+import { Icon } from "./Icon";
+
+interface PageProps {
+  children: React.ReactNode;
+  variant?: "modal" | "normal";
+}
+
+export function Page({ children, variant = "normal" }: PageProps) {
+  const mainVariantClasses =
+    variant === "normal" ? "s-h-full s-py-16" : "s-h-full s-py-4 s-px-2";
+  const divVariantClassNames =
+    variant === "normal" ? "s-gap-6 s-px-6" : "s-gap-4";
+
+  return (
+    <main className={mainVariantClasses}>
+      <div
+        className={classNames(
+          "s-mx-auto s-flex s-h-full s-max-w-4xl s-flex-col s-text-sm s-font-normal s-text-element-900",
+          divVariantClassNames
+        )}
+      >
+        {children}
+      </div>
+    </main>
+  );
+}
+
+interface PageHeaderProps {
+  title: React.ReactNode;
+  description?: string;
+  icon?: ComponentType<{ className?: string }>;
+}
+
+Page.Header = function ({ title, description, icon }: PageHeaderProps) {
+  const iconClasses = "s-text-brand";
+  return (
+    <Page.Vertical gap="xs">
+      <Icon visual={icon} className={iconClasses} size="lg" />
+      <Page.H variant="h3">{title}</Page.H>
+      {description && <Page.P variant="secondary">{description}</Page.P>}
+    </Page.Vertical>
+  );
+};
+
+interface PageSectionHeaderProps {
+  title: string;
+  description?: string;
+  action?: ButtonProps;
+}
+
+Page.SectionHeader = function ({
+  title,
+  description,
+  action,
+}: PageSectionHeaderProps) {
+  return (
+    <Page.Horizontal gap="md">
+      <Page.Vertical gap="xs" sizing="grow">
+        <Page.H variant="h5">{title}</Page.H>
+        <Page.P variant="secondary">{description}</Page.P>
+      </Page.Vertical>
+      {action && (
+        <div>
+          <Button {...action} />
+        </div>
+      )}
+    </Page.Horizontal>
+  );
+};
+
+Page.Separator = function () {
+  return (
+    <div className="s-w-full s-py-2">
+      <div className="s-h-px s-w-full s-bg-structure-200" />
+    </div>
+  );
+};
+
+interface PagePProps {
+  children: React.ReactNode;
+  size?: "sm" | "md" | "lg";
+  variant?: "primary" | "secondary";
+}
+
+const PsizeClasses = {
+  xs: "s-text-xs",
+  sm: "s-text-sm",
+  md: "s-text-base",
+  lg: "s-text-lg",
+};
+
+Page.P = function ({ children, variant, size = "sm" }: PagePProps) {
+  return (
+    <p
+      className={classNames(
+        PsizeClasses[size],
+        variant === "secondary"
+          ? "s-text-element-700 dark:s-text-element-600-dark"
+          : "s-text-element-900 dark:s-text-element-900-dark"
+      )}
+    >
+      {children}
+    </p>
+  );
+};
+
+interface PageHProps {
+  variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+  children: React.ReactNode;
+}
+
+Page.H = function ({ children, variant = "h3" }: PageHProps) {
+  const Component = variant;
+
+  const hSizes = {
+    h1: "s-text-4xl s-font-bold",
+    h2: "s-text-3xl s-font-bold",
+    h3: "s-text-2xl s-font-bold",
+    h4: "s-text-xl s-font-semibold",
+    h5: "s-text-lg s-font-semibold",
+    h6: "s-text-base s-font-semibold",
+  };
+
+  return (
+    <Component
+      className={classNames(
+        "s-text-element-900 dark:s-text-element-900-dark",
+        hSizes[variant]
+      )}
+    >
+      {children}
+    </Component>
+  );
+};
+
+interface PageLayoutProps {
+  children: React.ReactNode;
+  direction?: "horizontal" | "vertical" | "fluid";
+  sizing?: "shrink" | "grow";
+  align?: "stretch" | "left" | "center" | "right";
+  gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none";
+}
+
+const gapSizes = {
+  xs: "s-gap-1",
+  sm: "s-gap-2",
+  md: "s-gap-3",
+  lg: "s-gap-5",
+  xl: "s-gap-8",
+  none: "",
+};
+
+Page.Layout = function ({
+  children,
+  direction = "vertical",
+  sizing,
+  align = "stretch",
+  gap = "lg",
+}: PageLayoutProps) {
+  switch (direction) {
+    case "horizontal":
+      return (
+        <Page.Horizontal
+          children={children}
+          sizing={sizing}
+          align={align}
+          gap={gap}
+        />
+      );
+    case "vertical":
+      return (
+        <Page.Vertical
+          children={children}
+          sizing={sizing}
+          align={align}
+          gap={gap}
+        />
+      );
+    case "fluid":
+      return (
+        <Page.Fluid
+          children={children}
+          sizing={sizing}
+          align={align}
+          gap={gap}
+        />
+      );
+    default:
+      return null;
+  }
+};
+
+interface PageDivProps {
+  children: React.ReactNode;
+  sizing?: "shrink" | "grow";
+  align?: "stretch" | "left" | "center" | "right";
+  gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none";
+}
+Page.Horizontal = function ({
+  children,
+  sizing,
+  align = "left",
+  gap = "lg",
+}: PageDivProps) {
+  return (
+    <div
+      className={classNames(
+        "s-flex s-flex-col sm:s-flex-row",
+        sizing === "grow" ? "s-grow s-basis-0" : "",
+        sizing === "shrink" ? "s-shrink" : "",
+        gapSizes[gap],
+        align === "left" ? "s-justify-start" : "",
+        align === "center" ? "s-justify-center" : "",
+        align === "right" ? "s-justify-end" : "",
+        align === "stretch" ? "s-justify-stretch" : ""
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+Page.Vertical = function ({
+  children,
+  sizing,
+  align = "left",
+  gap = "md",
+}: PageDivProps) {
+  return (
+    <div
+      className={classNames(
+        "s-flex s-flex-col",
+        sizing === "grow" ? "s-grow s-basis-0" : "",
+        sizing === "shrink" ? "s-shrink" : "",
+        gapSizes[gap],
+        align === "left" ? "s-items-start" : "",
+        align === "center" ? "s-items-center" : "",
+        align === "right" ? "s-items-end" : ""
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+Page.Fluid = function ({
+  children,
+  sizing,
+  align = "stretch",
+  gap = "xs",
+}: PageDivProps) {
+  return (
+    <div
+      className={classNames(
+        "s-flex s-flex-wrap",
+        sizing === "grow" ? "s-grow" : "",
+        sizing === "shrink" ? "s-shrink" : "",
+        gapSizes[gap],
+        align === "left" ? "s-items-start" : "",
+        align === "center" ? "s-items-center" : "",
+        align === "right" ? "s-items-end" : ""
+      )}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/PaginatedCitationsGrid.tsx

@@ -0,0 +1,79 @@
+import { useState } from "react";
+import React from "react";
+
+import { CitationType } from "@sparkle/components/Citation";
+import { Pagination } from "@sparkle/components/Pagination";
+import { Citation } from "@sparkle/index";
+import { classNames } from "@sparkle/lib/utils";
+
+interface CitationItem {
+  description?: string;
+  title: string;
+  type: CitationType;
+  href: string;
+}
+
+interface PaginatedCitationsGridProps {
+  items: CitationItem[];
+  maxItemsPerPage?: 6 | 9 | 12 | 15;
+}
+
+export function PaginatedCitationsGrid({
+  items,
+  maxItemsPerPage = 9,
+}: PaginatedCitationsGridProps) {
+  const [currentPage, setCurrentPage] = useState(1);
+  const cols = 3;
+  const rows = Math.ceil(Math.min(maxItemsPerPage, items.length) / cols);
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  // Calculate start index.
+  const startIndex = (currentPage - 1) * maxItemsPerPage;
+  // Slice items for current page.
+  const paginatedItems = items.slice(startIndex, startIndex + maxItemsPerPage);
+
+  return (
+    <div className="s-flex s-w-full s-flex-col">
+      <div
+        className={classNames(
+          "s-grid s-w-full s-gap-2 s-overflow-x-hidden s-py-1",
+          `s-grid-cols-${cols}`,
+          `s-grid-rows-${rows}`
+        )}
+      >
+        {paginatedItems.map((d, idx) => {
+          return (
+            <Citation
+              size="xs"
+              sizing="fluid"
+              key={idx}
+              description={d.description}
+              href={d.href}
+              title={d.title}
+              type={d.type}
+            />
+          );
+        })}
+      </div>
+
+      <div
+        className={classNames(
+          "s-pt-3",
+          items.length > maxItemsPerPage ? "s-visible" : "s-collapse"
+        )}
+      >
+        <Pagination
+          itemsCount={items.length}
+          maxItemsPerPage={maxItemsPerPage}
+          size="xs"
+          showDetails={false}
+          showPageButtons={false}
+          onButtonClick={(pageNb) => setCurrentPage(pageNb)}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/Pagination.tsx

@@ -0,0 +1,212 @@
+import React, { useCallback } from "react";
+import { useState } from "react";
+
+import { ChevronLeftIcon, ChevronRightIcon } from "@sparkle/icons/solid";
+import { classNames } from "@sparkle/lib/utils";
+
+import { Button } from "./Button";
+
+type Size = "sm" | "xs";
+
+const pagesShownInControls = 7;
+
+interface PaginationProps {
+  itemsCount: number;
+  maxItemsPerPage: number;
+  onButtonClick: (pageNumber: number) => void;
+  size?: Size;
+  showDetails?: boolean;
+  showPageButtons?: boolean;
+}
+
+export function Pagination({
+  itemsCount,
+  maxItemsPerPage,
+  onButtonClick,
+  size = "sm",
+  showDetails = true,
+  showPageButtons = true,
+}: PaginationProps) {
+  const numPages = Math.ceil(itemsCount / maxItemsPerPage);
+  const controlsAreHidden = Boolean(numPages <= 1);
+  const [currentPage, setCurrentPage] = useState(1);
+  const firstFileOnPageIndex =
+    currentPage * maxItemsPerPage - maxItemsPerPage + 1;
+  const lastFileOnPageIndex =
+    itemsCount > currentPage * maxItemsPerPage
+      ? currentPage * maxItemsPerPage
+      : itemsCount;
+
+  const onPaginationButtonClick = useCallback(
+    (pageNb: number) => {
+      setCurrentPage(pageNb);
+      onButtonClick(pageNb);
+    },
+    [onButtonClick, setCurrentPage]
+  );
+
+  const pageButtons: React.ReactNode[] = getPageButtons(
+    currentPage,
+    numPages,
+    pagesShownInControls,
+    onPaginationButtonClick,
+    size
+  );
+
+  return (
+    <div
+      className={classNames(
+        "s-flex s-w-full s-items-center",
+        controlsAreHidden ? "s-justify-end" : "s-justify-between"
+      )}
+    >
+      <div
+        className={classNames(
+          "s-flex",
+          controlsAreHidden ? "s-invisible" : "s-visible",
+          showPageButtons ? "s-gap-0" : "s-gap-2"
+        )}
+      >
+        <Button
+          variant="tertiary"
+          size={size === "xs" ? "xs" : "sm"}
+          label="previous"
+          labelVisible={false}
+          disabledTooltip={true}
+          disabled={currentPage === 1 ? true : false}
+          icon={ChevronLeftIcon}
+          onClick={() => {
+            onPaginationButtonClick(currentPage - 1);
+          }}
+        />
+
+        <div
+          className={classNames(
+            "s-items-center",
+            size === "xs" ? "s-gap-3 s-px-3" : "s-gap-4 s-px-4",
+            showPageButtons ? "s-flex" : "s-hidden"
+          )}
+        >
+          {pageButtons}
+        </div>
+
+        <Button
+          variant="tertiary"
+          size={size === "xs" ? "xs" : "sm"}
+          label="next"
+          labelVisible={false}
+          disabledTooltip={true}
+          disabled={currentPage === numPages ? true : false}
+          icon={ChevronRightIcon}
+          onClick={() => {
+            onPaginationButtonClick(currentPage + 1);
+          }}
+        />
+      </div>
+
+      <span
+        className={classNames(
+          "s-text-slate-400",
+          size === "xs" ? "s-text-xs" : "s-text-sm",
+          showDetails ? "s-visible" : "s-collapse"
+        )}
+      >
+        {controlsAreHidden
+          ? `${itemsCount} items`
+          : `Showing ${firstFileOnPageIndex}-${lastFileOnPageIndex} of ${itemsCount} items`}
+      </span>
+    </div>
+  );
+}
+
+function renderPageNumber(
+  pageNumber: number,
+  currentPage: number,
+  onPageClick: (currentPage: number) => void,
+  size: Size
+) {
+  return (
+    <button
+      key={pageNumber}
+      className={classNames(
+        "s-font-semibold s-transition-colors s-duration-100",
+        currentPage === pageNumber ? "s-text-action-500" : "s-text-slate-400",
+        size === "xs" ? "s-text-xs" : "s-text-sm"
+      )}
+      onClick={() => onPageClick(pageNumber)}
+    >
+      {pageNumber}
+    </button>
+  );
+}
+
+function renderEllipses(size: "sm" | "xs") {
+  return (
+    <span
+      className={classNames(
+        "s-text-sm s-font-semibold s-text-slate-400",
+        size === "xs" ? "s-text-xs" : "s-text-sm"
+      )}
+    >
+      ...
+    </span>
+  );
+}
+
+function getPageButtons(
+  currentPage: number,
+  totalPages: number,
+  slots: number,
+  onPageClick: (currentPage: number) => void,
+  size: Size
+) {
+  const pagination: React.ReactNode[] = [];
+
+  // If total pages are less than or equal to slots, show all pages
+  if (totalPages <= slots) {
+    for (let i = 1; i <= totalPages; i++) {
+      pagination.push(renderPageNumber(i, currentPage, onPageClick, size));
+    }
+    return pagination;
+  }
+
+  const remainingSlots = slots - 2; // slots excluding first and last page
+  const halfSlots = Math.floor(remainingSlots / 2);
+
+  // Ensure current page is within bounds
+  currentPage = Math.max(1, Math.min(currentPage, totalPages));
+
+  pagination.push(renderPageNumber(1, currentPage, onPageClick, size)); // Always show the first page
+
+  // Determine the range of pages to display
+  let start, end;
+  if (currentPage <= halfSlots + 2) {
+    start = 2;
+    end = remainingSlots;
+  } else if (currentPage >= totalPages - halfSlots - 1) {
+    start = totalPages - remainingSlots + 1;
+    end = totalPages - 1;
+  } else {
+    start = currentPage - halfSlots + 1;
+    end = currentPage + halfSlots - 1;
+  }
+
+  // Add ellipsis if there is a gap between the first page and the start of the range
+  if (start > 2) {
+    pagination.push(renderEllipses(size));
+  }
+
+  // Add the range of pages
+  for (let i = start; i <= end; i++) {
+    pagination.push(renderPageNumber(i, currentPage, onPageClick, size));
+  }
+
+  // Add ellipsis if there is a gap between the end of the range and the last page
+  if (end < totalPages - 1) {
+    pagination.push(renderEllipses(size));
+  }
+
+  pagination.push(renderPageNumber(totalPages, currentPage, onPageClick, size)); // Always show the last page
+
+  return pagination;
+}

package/src/components/Popup.tsx

@@ -0,0 +1,74 @@
+import { Transition } from "@headlessui/react";
+import React from "react";
+
+import { XMarkIcon } from "@sparkle/icons/solid";
+import { classNames } from "@sparkle/lib/utils";
+
+import { IconButton } from "..";
+import { Button } from "./Button";
+import { Chip } from "./Chip";
+
+type PopupProps = {
+  show: boolean;
+  chipLabel: string;
+  description: string;
+  buttonLabel: string;
+  buttonClick: () => void;
+  className?: string;
+  onClose?: () => void;
+};
+
+export function Popup({
+  show,
+  chipLabel,
+  description,
+  buttonLabel,
+  buttonClick,
+  className,
+  onClose,
+}: PopupProps) {
+  return (
+    <Transition
+      show={show}
+      enter="s-transition-opacity s-duration-300"
+      appear={true}
+      enterFrom="s-opacity-0"
+      enterTo="s-opacity-100"
+      leave="s-transition-opacity s-duration-300"
+      leaveFrom="s-opacity-100"
+      leaveTo="s-opacity-0"
+    >
+      <div
+        className={classNames(
+          "s-z-30 s-flex s-w-64 s-flex-col s-gap-3 s-rounded-xl s-border s-border-pink-100 s-bg-pink-50 s-p-4 s-shadow-xl",
+          className || ""
+        )}
+      >
+        <div className="s-flex">
+          <Chip color="pink">{chipLabel}</Chip>
+          {onClose && (
+            <div className="-s-mr-1 -s-mt-1 s-flex s-grow s-items-start s-justify-end">
+              <IconButton
+                icon={XMarkIcon}
+                onClick={onClose}
+                variant="secondary"
+                size="sm"
+              />
+            </div>
+          )}
+        </div>
+        <div className="s-text-sm s-font-normal s-text-element-900">
+          {description}
+        </div>
+        <div className="s-self-center">
+          <Button
+            variant="primary"
+            size="sm"
+            label={buttonLabel}
+            onClick={buttonClick}
+          />
+        </div>
+      </div>
+    </Transition>
+  );
+}