@checkstack/ui 0.0.2

package/src/components/Table.tsx

@@ -0,0 +1,119 @@
+import * as React from "react";
+import { cn } from "../utils";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [button&]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

package/src/components/Tabs.tsx

@@ -0,0 +1,141 @@
+import React, { useRef } from "react";
+
+export interface TabItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+}
+
+export interface TabsProps {
+  items: TabItem[];
+  activeTab: string;
+  onTabChange: (tabId: string) => void;
+  className?: string;
+}
+
+export const Tabs: React.FC<TabsProps> = ({
+  items,
+  activeTab,
+  onTabChange,
+  className = "",
+}) => {
+  const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
+
+  const handleKeyDown = (event: React.KeyboardEvent, currentIndex: number) => {
+    let newIndex = currentIndex;
+
+    switch (event.key) {
+      case "ArrowLeft": {
+        newIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+        event.preventDefault();
+        break;
+      }
+      case "ArrowRight": {
+        newIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+        event.preventDefault();
+        break;
+      }
+      case "Home": {
+        newIndex = 0;
+        event.preventDefault();
+        break;
+      }
+      case "End": {
+        newIndex = items.length - 1;
+        event.preventDefault();
+        break;
+      }
+      default: {
+        // No action needed for other keys
+        break;
+      }
+    }
+
+    if (newIndex !== currentIndex) {
+      onTabChange(items[newIndex].id);
+      tabRefs.current.get(items[newIndex].id)?.focus();
+    }
+  };
+
+  return (
+    <div className={`relative ${className}`}>
+      <div
+        className="flex flex-col md:flex-row gap-1 p-1 bg-muted/30 rounded-lg"
+        role="tablist"
+        aria-label="Tabs"
+      >
+        {items.map((item, index) => {
+          const isActive = activeTab === item.id;
+          return (
+            <button
+              key={item.id}
+              ref={(el) => {
+                if (el) {
+                  tabRefs.current.set(item.id, el);
+                } else {
+                  tabRefs.current.delete(item.id);
+                }
+              }}
+              onClick={() => onTabChange(item.id)}
+              onKeyDown={(e) => handleKeyDown(e, index)}
+              className={`
+                relative px-4 py-2.5 flex items-center justify-center md:justify-start gap-2 rounded-md
+                text-sm font-medium transition-all duration-200
+                focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-0
+                ${
+                  isActive
+                    ? "bg-primary text-primary-foreground shadow-md shadow-primary/30"
+                    : "text-muted-foreground hover:text-foreground hover:bg-background/50"
+                }
+              `}
+              role="tab"
+              aria-selected={isActive}
+              aria-controls={`tabpanel-${item.id}`}
+              tabIndex={isActive ? 0 : -1}
+            >
+              {item.icon && (
+                <span
+                  className={`transition-all duration-200 ${
+                    isActive ? "scale-110" : ""
+                  }`}
+                >
+                  {item.icon}
+                </span>
+              )}
+              <span>{item.label}</span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export interface TabPanelProps {
+  id: string;
+  activeTab: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const TabPanel: React.FC<TabPanelProps> = ({
+  id,
+  activeTab,
+  children,
+  className = "",
+}) => {
+  const isActive = activeTab === id;
+
+  return isActive ? (
+    <div
+      id={`tabpanel-${id}`}
+      role="tabpanel"
+      aria-labelledby={`tab-${id}`}
+      className={`animate-in fade-in-0 duration-200 ${className}`}
+    >
+      {children}
+    </div>
+  ) : (
+    <></>
+  );
+};

package/src/components/TemplateEditor.test.ts

@@ -0,0 +1,156 @@
+import { describe, expect, it } from "bun:test";
+import { detectTemplateContext } from "./TemplateEditor";
+
+describe("detectTemplateContext", () => {
+  describe("mustache syntax ({{}})", () => {
+    it("should detect context when cursor is immediately after {{", () => {
+      const result = detectTemplateContext("Hello {{", 8, "mustache");
+      expect(result).toEqual({
+        isInTemplate: true,
+        query: "",
+        startPos: 6,
+      });
+    });
+
+    it("should detect context with partial query", () => {
+      const result = detectTemplateContext("Hello {{pay", 11, "mustache");
+      expect(result).toEqual({
+        isInTemplate: true,
+        query: "pay",
+        startPos: 6,
+      });
+    });
+
+    it("should detect context with full path being typed", () => {
+      const result = detectTemplateContext(
+        "Hello {{payload.title",
+        21,
+        "mustache"
+      );
+      expect(result).toEqual({
+        isInTemplate: true,
+        query: "payload.title",
+        startPos: 6,
+      });
+    });
+
+    it("should not detect context when template is closed", () => {
+      const result = detectTemplateContext(
+        "Hello {{name}} world",
+        20,
+        "mustache"
+      );
+      expect(result).toEqual({
+        isInTemplate: false,
+        query: "",
+        startPos: -1,
+      });
+    });
+
+    it("should not detect context when cursor is before {{", () => {
+      const result = detectTemplateContext("Hello {{name}}", 3, "mustache");
+      expect(result).toEqual({
+        isInTemplate: false,
+        query: "",
+        startPos: -1,
+      });
+    });
+
+    it("should detect context in second template when first is closed", () => {
+      const result = detectTemplateContext(
+        "{{first}} and {{second",
+        22,
+        "mustache"
+      );
+      expect(result).toEqual({
+        isInTemplate: true,
+        query: "second",
+        startPos: 14,
+      });
+    });
+
+    it("should not detect context when query contains newline", () => {
+      const result = detectTemplateContext("Hello {{\nworld", 14, "mustache");
+      expect(result).toEqual({
+        isInTemplate: false,
+        query: "",
+        startPos: -1,
+      });
+    });
+
+    it("should handle empty string", () => {
+      const result = detectTemplateContext("", 0, "mustache");
+      expect(result).toEqual({
+        isInTemplate: false,
+        query: "",
+        startPos: -1,
+      });
+    });
+
+    it("should handle text without any templates", () => {
+      const result = detectTemplateContext("Hello world", 11, "mustache");
+      expect(result).toEqual({
+        isInTemplate: false,
+        query: "",
+        startPos: -1,
+      });
+    });
+  });
+
+  describe("dollar syntax (${})", () => {
+    it("should detect context when cursor is immediately after ${", () => {
+      const result = detectTemplateContext("Hello ${", 8, "dollar");
+      expect(result).toEqual({
+        isInTemplate: true,
+        query: "",
+        startPos: 6,
+      });
+    });
+
+    it("should detect context with partial query", () => {
+      const result = detectTemplateContext("Hello ${user", 12, "dollar");
+      expect(result).toEqual({
+        isInTemplate: true,
+        query: "user",
+        startPos: 6,
+      });
+    });
+
+    it("should not detect context when template is closed", () => {
+      const result = detectTemplateContext("Hello ${name} world", 19, "dollar");
+      expect(result).toEqual({
+        isInTemplate: false,
+        query: "",
+        startPos: -1,
+      });
+    });
+  });
+
+  describe("edge cases", () => {
+    it("should handle nested braces correctly", () => {
+      const result = detectTemplateContext("{{outer.{{inner", 15, "mustache");
+      // Should find the last {{ which is at position 8
+      expect(result.isInTemplate).toBe(true);
+      expect(result.startPos).toBe(8);
+      expect(result.query).toBe("inner");
+    });
+
+    it("should handle cursor at start of template", () => {
+      const result = detectTemplateContext("{{", 2, "mustache");
+      expect(result).toEqual({
+        isInTemplate: true,
+        query: "",
+        startPos: 0,
+      });
+    });
+
+    it("should detect context after multiple closed templates", () => {
+      const result = detectTemplateContext("{{a}} {{b}} {{c", 15, "mustache");
+      expect(result).toEqual({
+        isInTemplate: true,
+        query: "c",
+        startPos: 12,
+      });
+    });
+  });
+});