@signalflare-ai/ui 0.5.0

package/dist/src/blocks/delete-resource/delete-resource.tsx

@@ -0,0 +1,214 @@
+import {
+  CheckIcon,
+  CopyIcon,
+  WarningCircleIcon,
+  XIcon,
+} from "@phosphor-icons/react";
+import { useState, useCallback, useEffect } from "react";
+
+import { Banner } from "../../components/banner";
+import { Button } from "../../components/button";
+import {
+  Dialog,
+  DialogRoot,
+  DialogTitle,
+  DialogClose,
+} from "../../components/dialog";
+import { Input } from "../../components/input";
+import { cn } from "../../utils/cn";
+
+export const SF_DELETE_RESOURCE_VARIANTS = {
+  size: {
+    sm: {
+      classes: "",
+      description: "Small dialog for simple delete confirmations",
+    },
+    base: {
+      classes: "",
+      description: "Default delete confirmation dialog size",
+    },
+  },
+} as const;
+
+export const SF_DELETE_RESOURCE_DEFAULT_VARIANTS = {
+  size: "base",
+} as const;
+
+export type SFDeleteResourceSize =
+  keyof typeof SF_DELETE_RESOURCE_VARIANTS.size;
+
+export interface SFDeleteResourceVariantsProps {
+  size?: SFDeleteResourceSize;
+}
+
+export interface DeleteResourceProps extends SFDeleteResourceVariantsProps {
+  /** Whether the dialog is open */
+  open: boolean;
+  /** Callback when open state changes */
+  onOpenChange: (open: boolean) => void;
+  /** The type of resource being deleted (e.g., "Zone", "Worker", "KV Namespace") */
+  resourceType: string;
+  /** The name of the specific resource being deleted */
+  resourceName: string;
+  /** Callback when delete is confirmed */
+  onDelete: () => void | Promise<void>;
+  /** Whether the delete action is in progress */
+  isDeleting?: boolean;
+  /** Whether the confirmation input should be case-sensitive (default: true) */
+  caseSensitive?: boolean;
+  /** Custom delete button text (defaults to "Delete {resourceType}") */
+  deleteButtonText?: string;
+  /** Additional className for the dialog */
+  className?: string;
+  /** Error message to display if the delete action fails */
+  errorMessage?: string;
+}
+
+export function DeleteResource({
+  open,
+  onOpenChange,
+  resourceType,
+  resourceName,
+  onDelete,
+  isDeleting = false,
+  caseSensitive = true,
+  deleteButtonText,
+  size = SF_DELETE_RESOURCE_DEFAULT_VARIANTS.size,
+  errorMessage,
+  className,
+}: DeleteResourceProps) {
+  const [confirmationInput, setConfirmationInput] = useState("");
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!open) {
+      setConfirmationInput("");
+      setCopied(false);
+    }
+  }, [open]);
+
+  const normalizeForComparison = useCallback(
+    (str: string) => (caseSensitive ? str : str.toLowerCase()),
+    [caseSensitive]
+  );
+
+  const isConfirmed =
+    normalizeForComparison(confirmationInput) ===
+    normalizeForComparison(resourceName);
+
+  const handleDelete = useCallback(async () => {
+    if (!isConfirmed || isDeleting) return;
+    await onDelete();
+  }, [isConfirmed, isDeleting, onDelete]);
+
+  const handleCopy = useCallback(async () => {
+    await navigator.clipboard.writeText(resourceName);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }, [resourceName]);
+
+  return (
+    <DialogRoot open={open} onOpenChange={onOpenChange}>
+      <Dialog size={size} className={cn("p-0", className)}>
+        <div className="flex items-center justify-between border-b border-sf-line px-6 py-4">
+          <DialogTitle className="text-lg font-semibold">
+            Delete {resourceName}
+          </DialogTitle>
+          <DialogClose
+            render={(props) => (
+              <Button
+                {...props}
+                variant="ghost"
+                shape="square"
+                size="sm"
+                aria-label="Close"
+                disabled={isDeleting}
+              >
+                <XIcon size={18} />
+              </Button>
+            )}
+          />
+        </div>
+
+        <div className="flex flex-col p-6 gap-4">
+          <div className="flex flex-col gap-2">
+            {errorMessage && (
+              <Banner icon={<WarningCircleIcon />} variant="error">
+                {errorMessage}
+              </Banner>
+            )}
+            <p className="text-base text-sf-subtle max-w-prose text-pretty">
+              This action cannot be undone. This will permanently delete the{" "}
+              <span className="font-medium text-sf-default">
+                {resourceName}
+              </span>{" "}
+              {resourceType.toLowerCase()}.
+            </p>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-1.5 text-base">
+              <span>
+                Type{" "}
+                <button
+                  className="font-mono text-sm inline font-semibold bg-sf-tint hover:bg-sf-fill rounded-md px-2 py-1 group hover:cursor-pointer"
+                  onClick={handleCopy}
+                  aria-label={`Copy ${resourceName} to clipboard`}
+                >
+                  {resourceName}
+
+                  {copied ? (
+                    <CheckIcon
+                      size={12}
+                      weight="bold"
+                      className="inline ml-1.5"
+                    />
+                  ) : (
+                    <CopyIcon
+                      size={12}
+                      weight="bold"
+                      className="inline text-sf-subtle group-hover:text-sf-default ml-1.5"
+                    />
+                  )}
+                </button>{" "}
+                to confirm:
+              </span>
+            </div>
+            <Input
+              placeholder={resourceName}
+              value={confirmationInput}
+              onChange={(e) => setConfirmationInput(e.target.value)}
+              disabled={isDeleting}
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck={false}
+              aria-label={`Type ${resourceName} to confirm deletion`}
+              className="w-full"
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-3 border-t border-sf-line px-6 py-4">
+          <DialogClose
+            render={(props) => (
+              <Button {...props} variant="secondary" disabled={isDeleting}>
+                Cancel
+              </Button>
+            )}
+          />
+          <Button
+            variant="destructive"
+            onClick={handleDelete}
+            disabled={!isConfirmed || isDeleting}
+            loading={isDeleting}
+          >
+            {deleteButtonText || `Delete ${resourceType}`}
+          </Button>
+        </div>
+      </Dialog>
+    </DialogRoot>
+  );
+}
+
+DeleteResource.displayName = "DeleteResource";

package/dist/src/blocks/delete-resource/index.d.ts

@@ -0,0 +1,2 @@
+export { DeleteResource, SF_DELETE_RESOURCE_VARIANTS, SF_DELETE_RESOURCE_DEFAULT_VARIANTS, type DeleteResourceProps, type SFDeleteResourceSize, type SFDeleteResourceVariantsProps, } from './delete-resource';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/blocks/delete-resource/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/blocks/delete-resource/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,2BAA2B,EAC3B,mCAAmC,EACnC,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,6BAA6B,GACnC,MAAM,mBAAmB,CAAC"}

package/dist/src/blocks/map-block/index.d.ts

@@ -0,0 +1,2 @@
+export { MapBlock as Map, type MapProps, type MapHandle, type MapMarker, type MapH3Cell, type MapLegendItem, } from './map-block';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/blocks/map-block/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/blocks/map-block/index.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,QAAQ,IAAI,GAAG,EACf,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,aAAa,GACnB,MAAM,aAAa,CAAC"}

package/dist/src/blocks/map-block/map-block.d.ts

@@ -0,0 +1,79 @@
+import { ReactNode } from 'react';
+export interface MapMarker {
+    /** Latitude */
+    lat: number;
+    /** Longitude */
+    lng: number;
+    /** Groups the marker for legend filtering and color assignment */
+    category?: string;
+    /** HTML string or plain text shown on hover */
+    tooltip?: string;
+    /** Override the auto-generated dot color */
+    color?: string;
+}
+export interface MapH3Cell {
+    /** H3 cell index (e.g. "8a2a1072b59ffff") */
+    index: string;
+    /** Groups the cell for color assignment — should match a marker category */
+    category?: string;
+    /** Override the auto-generated fill color */
+    color?: string;
+}
+export interface MapLegendItem {
+    /** Category key — must match `MapMarker.category` / `MapH3Cell.category` */
+    key: string;
+    /** Display label */
+    label: string;
+    /** Dot color override — auto-generated from key if omitted */
+    color?: string;
+    /** Count badge shown next to the label */
+    count?: number;
+    /** Tooltip content shown on hover */
+    description?: string;
+}
+export interface MapHandle {
+    /** The raw Leaflet map instance */
+    map: import('leaflet').Map;
+    /** Fit the viewport to all current markers */
+    fitToMarkers: () => void;
+    /** Clear all markers and H3 cells */
+    clearLayers: () => void;
+}
+export interface MapProps {
+    /** Initial map center [lat, lng]. @default [38.9, -77.03] (Washington DC) */
+    center?: [number, number];
+    /** Initial zoom level. @default 12 */
+    zoom?: number;
+    /** Leaflet tile URL template. @default CartoDB Dark Matter */
+    tileUrl?: string;
+    /** Extra options forwarded to Leaflet TileLayer */
+    tileOptions?: Record<string, unknown>;
+    /** Markers to plot on the map */
+    markers?: MapMarker[];
+    /** H3 hex cells to render as filled polygons */
+    h3Cells?: MapH3Cell[];
+    /** Legend items. Pass an array to show the legend panel; omit to hide it. */
+    legend?: MapLegendItem[];
+    /** Called whenever the user toggles a legend filter row */
+    onLegendFilter?: (activeKeys: Set<string>) => void;
+    /**
+     * Content rendered in the floating filter bar at the top-center of the map.
+     * Use this slot for search inputs, dropdowns, chip filters, etc.
+     */
+    filters?: ReactNode;
+    /** Called once after the Leaflet map is initialized */
+    onMapReady?: (handle: MapHandle) => void;
+    /** Called when the map viewport finishes moving (debounced 300ms) */
+    onMoveEnd?: (center: {
+        lat: number;
+        lng: number;
+    }, zoom: number) => void;
+    /** Called when the user clicks the map canvas */
+    onClick?: (lat: number, lng: number) => void;
+    /** Extra class names on the root wrapper div */
+    className?: string;
+    /** Height of the map container. @default "100%" */
+    height?: string | number;
+}
+export declare function MapBlock({ center, zoom, tileUrl, tileOptions, markers, h3Cells, legend, onLegendFilter, filters, onMapReady, onMoveEnd, onClick, className, height, }: MapProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=map-block.d.ts.map

package/dist/src/blocks/map-block/map-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-block.d.ts","sourceRoot":"","sources":["../../../../src/blocks/map-block/map-block.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvC,MAAM,WAAW,SAAS;IACxB,eAAe;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,gBAAgB;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,4EAA4E;IAC5E,GAAG,EAAE,MAAM,CAAC;IACZ,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,SAAS;IACxB,mCAAmC;IACnC,GAAG,EAAE,OAAO,SAAS,EAAE,GAAG,CAAC;IAC3B,8CAA8C;IAC9C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,qCAAqC;IACrC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,MAAM,WAAW,QAAQ;IACvB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,iCAAiC;IACjC,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,gDAAgD;IAChD,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,2DAA2D;IAC3D,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACnD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,qEAAqE;IACrE,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,iDAAiD;IACjD,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAyBD,wBAAgB,QAAQ,CAAC,EACvB,MAAuB,EACvB,IAAS,EACT,OAAyE,EACzE,WAAW,EACX,OAAY,EACZ,OAAY,EACZ,MAAM,EACN,cAAc,EACd,OAAO,EACP,UAAU,EACV,SAAS,EACT,OAAO,EACP,SAAS,EACT,MAAe,GAChB,EAAE,QAAQ,2CAwWV"}