@turtleclub/ui 0.7.0-beta.33 → 0.7.0-beta.35

package/src/components/features/data-table/sort-dropdown.tsx

@@ -1,118 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { ArrowDown, ArrowUp, ArrowUpDown, X } from "lucide-react";
-import { flexRender, Header } from "@tanstack/react-table";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "../../ui/dropdown";
-
-interface SortDropdownProps<TData> {
-  headers: Header<TData, unknown>[];
-  currentSort?: { id: string; desc: boolean } | null;
-  onSortChange: (columnId: string, desc: boolean) => void;
-  onClearSort?: () => void;
-}
-
-export function SortDropdown<TData>({
-  headers,
-  currentSort,
-  onSortChange,
-  onClearSort,
-}: SortDropdownProps<TData>) {
-  // Filter only sortable columns
-  const sortableHeaders = headers.filter(
-    (header) => header.column.getCanSort() && !header.isPlaceholder
-  );
-
-  const getCurrentSortLabel = () => {
-    if (!currentSort) return "Sort";
-
-    const header = sortableHeaders.find((h) => h.column.id === currentSort.id);
-    if (!header) return "Sort";
-
-    return (
-      <span className="flex items-center gap-2">
-        {currentSort.desc ? (
-          <ArrowDown className="text-primary size-3" />
-        ) : (
-          <ArrowUp className="text-primary size-3" />
-        )}
-        <span className="truncate">
-          {flexRender(header.column.columnDef.header, header.getContext())}
-        </span>
-      </span>
-    );
-  };
-
-  const handleColumnClick = (columnId: string) => {
-    // If this column is already sorted, toggle the direction
-    if (currentSort?.id === columnId) {
-      // If descending, switch to ascending; if ascending, switch to descending
-      onSortChange(columnId, !currentSort.desc);
-    } else {
-      // New column, start with ascending
-      onSortChange(columnId, false);
-    }
-  };
-
-  if (sortableHeaders.length === 0) return null;
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger size="sm" className="bg-neutral-alpha-2">
-        {currentSort ? (
-          getCurrentSortLabel()
-        ) : (
-          <div className="text-muted-foreground flex items-center gap-2">
-            <ArrowUpDown className="size-3" />
-            <span>Sort by</span>
-          </div>
-        )}
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-[200px] space-y-1">
-        <DropdownMenuLabel>Sort by</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        {sortableHeaders.map((header) => {
-          const isCurrentAsc = currentSort?.id === header.column.id && !currentSort.desc;
-          const isCurrentDesc = currentSort?.id === header.column.id && currentSort.desc;
-          const isActive = currentSort?.id === header.column.id;
-
-          return (
-            <DropdownMenuItem
-              key={header.column.id}
-              onClick={() => handleColumnClick(header.column.id)}
-              className={
-                isActive ? "bg-secondary flex items-center gap-2" : "flex items-center gap-2"
-              }
-            >
-              <span className="w-fit truncate">
-                {flexRender(header.column.columnDef.header, header.getContext())}
-              </span>
-              {isActive &&
-                (isCurrentDesc ? (
-                  <ArrowDown className="text-primary size-4" />
-                ) : (
-                  <ArrowUp className="text-primary size-4" />
-                ))}
-            </DropdownMenuItem>
-          );
-        })}
-        {currentSort && onClearSort && (
-          <>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={onClearSort}>
-              <X className="size-4" />
-              Clear sorting
-            </DropdownMenuItem>
-          </>
-        )}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

package/src/components/features/data-table/sortable-header.tsx

@@ -1,37 +0,0 @@
-"use client";
-
-import { flexRender, type Header } from "@tanstack/react-table";
-import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
-import { useMemo } from "react";
-
-export default function SortableHeader({
-  header,
-}: {
-  header: Header<any, unknown>;
-}) {
-  const getSortIcon = useMemo(() => {
-    if (header.column.getIsSorted() === "asc")
-      return <ArrowUp className="text-primary size-3.5" />;
-    if (header.column.getIsSorted() === "desc")
-      return <ArrowDown className="text-primary size-3.5" />;
-    return (
-      header.column.getCanSort() && (
-        <ArrowUpDown className="text-secondary group-hover:text-muted-foreground size-3" />
-      )
-    );
-  }, [header.column.getIsSorted(), header.column.getCanSort()]);
-
-  return header.isPlaceholder ? null : (
-    <div
-      className={
-        header.column.getCanSort()
-          ? "group flex cursor-pointer items-center gap-1 select-none"
-          : ""
-      }
-      onClick={header.column.getToggleSortingHandler()}
-    >
-      {flexRender(header.column.columnDef.header, header.getContext())}
-      {getSortIcon}
-    </div>
-  );
-}

package/src/components/features/index.ts

@@ -1,6 +0,0 @@
-export * from "./data-table";
-export * from "./search-bar";
-export * from "./sidebar-layout";
-export * from "./page-heading";
-export * from "./turtle-tooltip";
-export * from "./api-status";

package/src/components/features/page-heading.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { HeadingH3, HeadingH6 } from "../ui";
-
-type PageHeadingProps = {
-  icon?: React.ReactNode;
-  title: string;
-  description: string;
-  action?: React.ReactNode;
-};
-
-export function PageHeading({
-  icon,
-  title,
-  description,
-  action,
-}: PageHeadingProps) {
-  return (
-    <div className="flex items-center gap-3">
-      <div>{icon}</div>
-      <div className="grow">
-        <HeadingH3>{title}</HeadingH3>
-        <HeadingH6>{description}</HeadingH6>
-      </div>
-      {action}
-    </div>
-  );
-}

package/src/components/features/search-bar.tsx

@@ -1,55 +0,0 @@
-import * as React from "react";
-import { Input, InputProps } from "../ui";
-import { Search } from "lucide-react";
-import { cn } from "@/lib/utils";
-
-type Props = {
-  value: string;
-  onChange: (value: string) => void;
-  debounce?: number;
-  size?: "default" | "sm";
-} & Omit<InputProps, "onChange">;
-
-export const SearchBar: React.FC<Props> = ({
-  value: initialValue,
-  onChange,
-  debounce = 300,
-  size = "default",
-  ...props
-}) => {
-  const [value, setValue] = React.useState<string>(initialValue);
-
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) =>
-    setValue(event.target.value);
-
-  React.useEffect(() => {
-    setValue(initialValue);
-  }, [initialValue]);
-
-  React.useEffect(() => {
-    const timeout = setTimeout(() => {
-      onChange(value);
-    }, debounce);
-
-    return () => clearTimeout(timeout);
-  }, [value]);
-
-  const inputClasses = size === "sm" ? "text-sm" : "";
-
-  return (
-    <div className="border-border relative w-full max-w-md rounded-full border">
-      <Input
-        value={value}
-        onChange={handleInputChange}
-        className={cn("-my-px h-9", inputClasses)}
-        {...props}
-      />
-      <button
-        type="button"
-        className="bg-border border-border absolute inset-y-0 right-0 flex aspect-square h-full items-center justify-center rounded rounded-full"
-      >
-        <Search className="text-primary size-3" />
-      </button>
-    </div>
-  );
-};

package/src/components/features/segmented-navigation.tsx

@@ -1,18 +0,0 @@
-import * as React from "react";
-import { SegmentControl, SegmentControlProps } from "../ui";
-
-type SegmentedNavigationProps<T extends string> = SegmentControlProps<T> & {
-  shouldMobileSelect: boolean;
-};
-
-export function SegmentedNavigation<T extends string>({
-  value,
-  onChange,
-  items,
-}: SegmentedNavigationProps<T>) {
-  return (
-    <div className="">
-      <SegmentControl value={value} onChange={onChange} items={items} />
-    </div>
-  );
-}

package/src/components/features/sidebar-layout.tsx

@@ -1,279 +0,0 @@
-import React from "react";
-import { ChevronRight, Lock } from "lucide-react";
-import {
-  Sidebar,
-  SidebarProvider,
-  SidebarHeader,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarMenu,
-  SidebarMenuItem,
-  SidebarMenuButton,
-  SidebarMenuSub,
-  SidebarMenuSubItem,
-  SidebarMenuSubButton,
-  Collapsible,
-  CollapsibleTrigger,
-  CollapsibleContent,
-  SidebarFooter,
-  useSidebar,
-  SidebarTrigger,
-} from "../ui";
-import { cn } from "@/lib/utils";
-import { DotIcon, TurtleIcon } from "../icons";
-import { TurtleTooltip } from "./turtle-tooltip";
-
-type SidebarItemBase = {
-  title: string;
-  icon?: any;
-};
-
-// Item with a URL (no children)
-type SidebarLink = SidebarItemBase & {
-  url: string;
-  isActive: boolean;
-  isEnabled?: boolean;
-  children?: never;
-};
-
-// Item with children (no URL)
-type SidebarGroupBase = SidebarItemBase & {
-  children: SidebarItem[];
-  url?: never;
-  isActive?: never;
-  isEnabled?: boolean;
-};
-
-export type SidebarItem = SidebarLink | SidebarGroupBase;
-
-const LOCKED_TOOLTIP_CONTENT = "Contact the Turtle team to unlock.";
-
-export function TurtleSidebarLayout({
-  children,
-  sidebarSlot,
-  sidebarFooter,
-  topSlot,
-  items,
-  linkComponent,
-}: {
-  children: React.ReactNode;
-  sidebarSlot?: React.ReactNode;
-  sidebarFooter?: React.ReactNode;
-  topSlot?: React.ReactNode;
-  items: SidebarItem[];
-  linkComponent: any;
-}) {
-  return (
-    <SidebarProvider>
-      <TurtleSidebar
-        items={items}
-        sidebarFooter={sidebarFooter}
-        sidebarSlot={sidebarSlot}
-        linkComponent={linkComponent}
-      />
-      <TurtleContainer topSlot={topSlot} children={children} />
-    </SidebarProvider>
-  );
-}
-
-export function TurtleSidebar({
-  items,
-  sidebarSlot,
-  sidebarFooter,
-  linkComponent: Comp = "a",
-}: {
-  items: SidebarItem[];
-  sidebarSlot?: React.ReactNode;
-  sidebarFooter?: React.ReactNode;
-  linkComponent: any;
-}) {
-  return (
-    <Sidebar>
-      <SidebarHeader>
-        <div className="border-gradient-white border-opacity-20 relative h-[72px] w-full rounded-full shadow">
-          <TurtleIcon className="absolute -top-2 -left-2 aspect-square h-[86px]" />
-
-          <div className="text-primary mt-2 -space-y-1.5 pl-20">
-            <div className="text-3xl leading-tight font-bold">Turtle</div>
-            <div className="pl-1 text-sm font-medium">Partner Portal</div>
-          </div>
-        </div>
-      </SidebarHeader>
-      <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              {items.map((item) => {
-                if (item?.children?.length) {
-                  const isEnabled = item.isEnabled !== false;
-
-                  return (
-                    <Collapsible
-                      key={item.title}
-                      className="group/collapsible"
-                      open={isEnabled ? undefined : false}
-                    >
-                      <SidebarMenuItem>
-                        {isEnabled ? (
-                          <CollapsibleTrigger asChild>
-                            <SidebarMenuButton>
-                              {item.icon && <item.icon />}
-                              <span className="grow">{item.title}</span>
-                              <ChevronRight className="transition-all group-data-[state=open]/collapsible:rotate-90" />
-                            </SidebarMenuButton>
-                          </CollapsibleTrigger>
-                        ) : (
-                          <TurtleTooltip
-                            asChild
-                            className="w-full"
-                            content={LOCKED_TOOLTIP_CONTENT}
-                            trigger={
-                              <div className="w-full">
-                                <SidebarMenuButton
-                                  disabled
-                                  className="opacity-70"
-                                >
-                                  {item.icon && <item.icon />}
-                                  <span className="grow">{item.title}</span>
-                                  <Lock className="text-muted-foreground size-4 shrink-0" />
-                                </SidebarMenuButton>
-                              </div>
-                            }
-                          />
-                        )}
-
-                        {isEnabled && (
-                          <CollapsibleContent>
-                            <SidebarMenuSub>
-                              {item.children.map((child) => {
-                                const isChildEnabled =
-                                  child.isEnabled !== false;
-
-                                return (
-                                  <SidebarMenuSubItem key={child.title}>
-                                    {isChildEnabled ? (
-                                      <SidebarMenuSubButton
-                                        asChild
-                                        isActive={child.isActive}
-                                      >
-                                        <Comp href={child.url}>
-                                          {child.icon && <child.icon />}
-                                          <span className="grow">
-                                            {child.title}
-                                          </span>
-
-                                          <div className="relative size-[18px] shrink-0 group-data-[active=false]/menu-sub-button:hidden">
-                                            <DotIcon className="text-primary absolute top-[-15px] left-[-15px] size-12" />
-                                          </div>
-                                        </Comp>
-                                      </SidebarMenuSubButton>
-                                    ) : (
-                                      <TurtleTooltip
-                                        asChild
-                                        className="w-full"
-                                        content={LOCKED_TOOLTIP_CONTENT}
-                                        trigger={
-                                          <div className="w-full">
-                                            <SidebarMenuSubButton
-                                              className="opacity-70"
-                                              aria-disabled="true"
-                                            >
-                                              {child.icon && <child.icon />}
-                                              <span className="grow">
-                                                {child.title}
-                                              </span>
-                                              <Lock className="text-muted-foreground size-4 shrink-0" />
-                                            </SidebarMenuSubButton>
-                                          </div>
-                                        }
-                                      />
-                                    )}
-                                  </SidebarMenuSubItem>
-                                );
-                              })}
-                            </SidebarMenuSub>
-                          </CollapsibleContent>
-                        )}
-                      </SidebarMenuItem>
-                    </Collapsible>
-                  );
-                }
-
-                const isEnabled = item.isEnabled !== false;
-
-                return (
-                  <SidebarMenuItem key={item.title}>
-                    {isEnabled ? (
-                      <SidebarMenuButton asChild isActive={item.isActive}>
-                        <Comp href={item.url}>
-                          {item.icon && <item.icon />}
-                          <span className="grow">{item.title}</span>
-                          <div className="relative size-[18px] shrink-0 group-data-[active=false]/menu-button:hidden">
-                            <DotIcon className="text-primary absolute top-[-15px] left-[-15px] size-12" />
-                          </div>
-                        </Comp>
-                      </SidebarMenuButton>
-                    ) : (
-                      <TurtleTooltip
-                        asChild
-                        className="w-full"
-                        content={LOCKED_TOOLTIP_CONTENT}
-                        trigger={
-                          <div className="w-full">
-                            <SidebarMenuButton
-                              aria-disabled="true"
-                              className="opacity-70"
-                            >
-                              {item.icon && <item.icon />}
-                              <span className="grow">{item.title}</span>
-                              <Lock className="text-muted-foreground size-4 shrink-0" />
-                            </SidebarMenuButton>
-                          </div>
-                        }
-                      />
-                    )}
-                  </SidebarMenuItem>
-                );
-              })}
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-        <span className="grow" />
-        <SidebarGroup>{sidebarSlot}</SidebarGroup>
-      </SidebarContent>
-      <SidebarFooter>{sidebarFooter}</SidebarFooter>
-    </Sidebar>
-  );
-}
-
-export function TurtleContainer({
-  children,
-  topSlot,
-}: {
-  children: React.ReactNode;
-  topSlot?: React.ReactNode;
-}) {
-  const { state, isMobile } = useSidebar();
-  return (
-    <div
-      className={cn(
-        "fixed inset-0 flex h-svh flex-col items-stretch gap-1 py-2 pr-2",
-        state === "collapsed" || isMobile ? "pl-2" : "left-64",
-      )}
-    >
-      <div className="flex gap-1">
-        <SidebarTrigger />
-        {topSlot}
-      </div>
-
-      <main
-        className={cn(
-          "bg-background border-border max-h-[94svh] grow overflow-y-auto rounded-lg border p-6",
-        )}
-      >
-        {children}
-      </main>
-    </div>
-  );
-}

package/src/components/features/turtle-tooltip.tsx

@@ -1,67 +0,0 @@
-import type { MouseEvent, ReactNode } from "react";
-import { useIsMobile } from "@/hooks/useIsMobile";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { TooltipPortal } from "@radix-ui/react-tooltip";
-
-interface TooltipProps {
-  trigger: ReactNode;
-  content: ReactNode;
-  className?: string;
-  contentClassName?: string;
-  maxWidth?: string;
-  href?: string;
-  side?: "top" | "bottom" | "left" | "right";
-  asChild?: boolean;
-}
-
-export function TurtleTooltip({
-  trigger,
-  content,
-  className,
-  side,
-  asChild,
-}: TooltipProps) {
-  const { isMobile } = useIsMobile();
-
-  const handleClick = (e: MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
-    e.preventDefault();
-  };
-
-  return (
-    <div className={className} onClick={handleClick}>
-      {isMobile ? (
-        <Popover>
-          <PopoverTrigger
-            className="flex items-center justify-center"
-            asChild={asChild}
-          >
-            {trigger}
-          </PopoverTrigger>
-          <PopoverContent side={side}>{content}</PopoverContent>
-        </Popover>
-      ) : (
-        <Tooltip>
-          <TooltipTrigger
-            className="flex items-center justify-center"
-            asChild={asChild}
-          >
-            {trigger}
-          </TooltipTrigger>
-          <TooltipPortal>
-            <TooltipContent side={side}>{content}</TooltipContent>
-          </TooltipPortal>
-        </Tooltip>
-      )}
-    </div>
-  );
-}

package/src/components/icons/arrow.tsx

@@ -1,23 +0,0 @@
-export const ArrowIcon = ({ className }: { className?: string }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="13"
-    height="14"
-    viewBox="0 0 13 14"
-    fill="none"
-    className={className}
-  >
-    <path
-      d="M3.65174 10.4506L3.05176 9.85059L9.05161 3.85073L9.6516 4.45072L3.65174 10.4506Z"
-      fill="currentColor"
-    />
-    <path
-      d="M9.68168 4.66626L3.31787 4.66626V3.81775L9.68168 3.81775V4.66626Z"
-      fill="currentColor"
-    />
-    <path
-      d="M9.68249 10.1821H8.83398L8.83398 3.81832H9.68249L9.68249 10.1821Z"
-      fill="currentColor"
-    />
-  </svg>
-);