torch-glare 2.1.1 → 2.1.3

package/apps/lib/components/DataViews/tree/TreeDrawer.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import { Drawer } from "vaul"
+import { Menu, X } from "lucide-react"
+import type { ReactNode } from "react"
+
+type Props = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  children: ReactNode
+}
+
+export function TreeDrawer({ open, onOpenChange, children }: Props) {
+  return (
+    <Drawer.Root open={open} onOpenChange={onOpenChange} direction="left">
+      <Drawer.Portal>
+        <Drawer.Overlay className="fixed inset-0 bg-black/40 z-40" />
+        <Drawer.Content
+          className="fixed inset-y-0 left-0 z-50 w-72 bg-background-presentation-body-overlay-primary border-r border-border-presentation-global-primary outline-none flex flex-col"
+        >
+          <div className="flex items-center justify-between p-3 border-b border-border-presentation-global-primary">
+            <Drawer.Title className="text-sm font-semibold text-content-presentation-global-primary">
+              Tree
+            </Drawer.Title>
+            <button
+              type="button"
+              onClick={() => onOpenChange(false)}
+              aria-label="Close tree"
+              className="p-1 rounded text-content-presentation-global-tertiary hover:text-content-presentation-global-primary"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+          <div className="flex-1 overflow-y-auto p-2">
+            {children}
+          </div>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  )
+}
+
+export function TreeDrawerTrigger({ onClick }: { onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label="Open tree"
+      className="inline-flex items-center justify-center h-8 w-8 rounded-md border border-border-presentation-global-primary text-content-presentation-global-secondary hover:text-content-presentation-global-primary"
+    >
+      <Menu className="w-4 h-4" />
+    </button>
+  )
+}

package/apps/lib/components/DataViews/tree/TreeSidebar.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import { useMemo } from "react"
+import type { FieldConfig } from "../types"
+import type { TreeNode } from "../../../utils/dataViews/treeUtils"
+import { getByPath } from "../../../utils/dataViews/pathUtils"
+import { TreeFolder } from "../../TreeFolder"
+import type {
+  TreeFolderMoveArgs,
+  TreeFolderNode,
+} from "../../TreeFolder"
+
+type Props = {
+  roots: TreeNode[]
+  expanded: Set<string>
+  selectedId: string | null
+  labelField: FieldConfig
+  dndEnabled: boolean
+  onToggle: (id: string) => void
+  onSelect: (id: string) => void
+  onMove?: (args: TreeFolderMoveArgs) => void
+}
+
+function toFolderNode(node: TreeNode, labelField: FieldConfig): TreeFolderNode {
+  const labelValue = getByPath(node.record, labelField.path)
+  const name = labelValue == null ? node.id : String(labelValue)
+  const children = node.children.length
+    ? node.children.map((c) => toFolderNode(c, labelField))
+    : undefined
+  return {
+    id: node.id,
+    name,
+    type: children ? "folder" : "file",
+    data: node.record,
+    children,
+  }
+}
+
+export function TreeSidebar({
+  roots,
+  expanded,
+  selectedId,
+  labelField,
+  dndEnabled,
+  onToggle,
+  onSelect,
+  onMove,
+}: Props) {
+  const folderData = useMemo(
+    () => roots.map((r) => toFolderNode(r, labelField)),
+    [roots, labelField],
+  )
+
+  const expandedIds = useMemo(() => Array.from(expanded), [expanded])
+
+  return (
+    <TreeFolder
+      data={folderData}
+      selectedId={selectedId}
+      onSelectionChange={(id) => {
+        if (id) onSelect(id)
+      }}
+      expandedIds={expandedIds}
+      onExpandedChange={(next) => {
+        const before = new Set(expandedIds)
+        const after = new Set(next)
+        for (const id of after) if (!before.has(id)) onToggle(id)
+        for (const id of before) if (!after.has(id)) onToggle(id)
+      }}
+      dndEnabled={dndEnabled}
+      onMove={onMove}
+      showHeader={false}
+      showBreadcrumb={true}
+      highlightAncestors={true}
+    />
+  )
+}

package/apps/lib/components/DataViews/types.ts

@@ -0,0 +1,206 @@
+import type React from "react"
+
+export type ViewType = "table" | "kanban" | "inbox" | "tree"
+
+export type TreeConfig = {
+  childrenField?: string
+  parentField?: string
+  idField?: string
+  orderField?: string
+  nodeLabel?: string
+  defaultExpanded?: "all" | "roots" | "none"
+  /** Right-pane mode for the selected tree node. `"details"` is accepted as a
+   *  deprecated alias of `"card"` for backward compatibility. */
+  defaultRightPane?: "table" | "card" | "details"
+  dndEnabled?: boolean
+}
+
+export type ViewVisibility = {
+  table?: boolean
+  kanban?: boolean
+  inbox?: boolean
+  tree?: boolean
+}
+
+export type DynamicRecord = Record<string, any>
+
+export type DynamicColumnConfig = {
+  id: string
+  label: string
+  visible: boolean
+  order: number
+  type?: "text" | "number" | "date" | "badge" | "array" | "boolean"
+  render?: (value: any, row: DynamicRecord) => React.ReactNode
+}
+
+export type DynamicFilterConfig = {
+  id: string
+  label?: string
+  enabled?: boolean
+  order?: number
+  options?: string[] | { label: string; value: string }[]
+  render?: (value: string, isSelected: boolean) => React.ReactNode
+  onChange?: (selectedValues: string[]) => void
+}
+
+export type NumericRangeFilter = { kind: "number"; min?: number; max?: number }
+export type DateRangeFilter = { kind: "date"; from?: string; to?: string }
+export type RangeFilter = NumericRangeFilter | DateRangeFilter
+export type FilterValue = string[] | RangeFilter
+export type FilterState = Record<string, FilterValue>
+
+export type FieldPreset =
+  | { label: string; min?: number; max?: number }
+  | { label: string; from?: string; to?: string }
+
+// Palette keys for the Kanban column header pill. Kept in lockstep with
+// `COLUMN_PALETTE` in KanbanView.tsx so consumers can pick a color per status
+// via `FieldConfig.kanbanVariants`.
+export type KanbanColumnColor =
+  | "gray"
+  | "purple"
+  | "orange"
+  | "blue"
+  | "green"
+  | "red"
+
+export type BadgeVariant =
+  | "green"
+  | "greenLight"
+  | "cocktailGreen"
+  | "yellow"
+  | "redOrange"
+  | "redLight"
+  | "rose"
+  | "purple"
+  | "bluePurple"
+  | "blue"
+  | "navy"
+  | "gray"
+  | "highlight"
+
+export type FieldType =
+  | "text"
+  | "number"
+  | "date"
+  | "boolean"
+  | "hidden"
+  | "enum-badge"
+  | "badge-array"
+  | "currency"
+  | "number-format"
+  | "progress-bar"
+  | "star-rating"
+  | "icon-text"
+  | "two-line"
+  | "avatar"
+  | "link"
+  | "image"
+  | "date-format"
+
+export type CurrencyOptions = {
+  symbol?: string
+  locale?: string
+  decimals?: number
+  code?: string
+}
+
+export type FieldConfig = {
+  path: string
+  label?: string
+  type?: FieldType
+  visible?: boolean
+  order?: number
+
+  variants?: Record<string, BadgeVariant>
+  defaultVariant?: BadgeVariant
+
+  // Per-status overrides for the Kanban board view. Keys must match
+  // `variants` keys (or any value present in the data). Lets consumers set a
+  // human-friendly column title and pick a column pill color without affecting
+  // the badge color used elsewhere.
+  kanbanVariants?: Record<
+    string,
+    { label?: string; color?: KanbanColumnColor }
+  >
+
+
+  variant?: BadgeVariant
+  limit?: number
+
+  currency?: string | CurrencyOptions
+  format?: Intl.NumberFormatOptions
+
+  thresholds?: [number, number]
+
+  max?: number
+
+  icon?: string
+  iconPosition?: "before" | "after"
+
+  secondaryPath?: string
+
+  linkType?: "mailto" | "tel" | "url"
+
+  fallbackPath?: string
+
+  dateFormat?: string | Intl.DateTimeFormatOptions
+
+  trueLabel?: string
+  falseLabel?: string
+  trueVariant?: BadgeVariant
+  falseVariant?: BadgeVariant
+
+  filterable?: boolean
+  filterLabel?: string
+  filterOptions?: string[] | { label: string; value: string }[]
+  /**
+   * Categorical filter selection mode.
+   * - "multi" (default): checkboxes, multi-select. FilterValue is the array of picked options.
+   * - "single": radios, single-select. FilterValue is a 1-element array.
+   */
+  filterMode?: "single" | "multi"
+  presets?: FieldPreset[]
+  rangeMin?: number
+  rangeMax?: number
+  rangeStep?: number
+  onFilterChange?: (value: FilterValue) => void
+
+  render?: (value: any, row: DynamicRecord) => React.ReactNode
+}
+
+export type InboxConfig = {
+  starredField?: string | null
+  readField?: string | null
+  attachmentField?: string | null
+  priorityField?: string | null
+  titlePath?: string
+  previewPath?: string
+}
+
+export type ColumnConfig = {
+  id: string
+  label: string
+  visible: boolean
+  order: number
+}
+
+export type ViewConfig = {
+  defaultView: ViewType
+  tableColumns: ColumnConfig[]
+  kanbanGroupBy: string
+  showFilters: boolean
+  showPreviewPane: boolean
+  sortBy: string
+  sortOrder: "asc" | "desc"
+}
+
+export const defaultConfig: ViewConfig = {
+  defaultView: "table",
+  tableColumns: [],
+  kanbanGroupBy: "",
+  showFilters: true,
+  showPreviewPane: true,
+  sortBy: "",
+  sortOrder: "desc",
+}

package/apps/lib/components/Radio.tsx

@@ -1,9 +1,8 @@
-'use client'
+"use client";
 import { cn } from "../utils/cn";
 import { cva } from "class-variance-authority";
-import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
@@ -11,37 +10,35 @@ const RadioGroup = React.forwardRef<
 >(({ className, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
+      className={cn("grid gap-0.5", className)}
       {...props}
       ref={ref}
     />
-  )
-})
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
 const Radio = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & { size?: "S" | "M" }
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
+    size?: "S" | "M";
+  }
 >(({ className, size = "S", ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Item
       ref={ref}
-      className={cn(
-        glareRadioStyles({ size }),
-        className
-      )}
+      className={cn(glareRadioStyles({ size }), className)}
       {...props}
     >
       <RadioGroupPrimitive.Indicator className="bg-white rounded-full flex items-center justify-center shrink-0">
         <i className="ri-record-circle-fill text-background-presentation-state-information-primary leading-none shrink-0"></i>
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
-  )
-})
-Radio.displayName = "Radio"
-
-export { RadioGroup, Radio }
+  );
+});
+Radio.displayName = "Radio";
 
+export { RadioGroup, Radio };
 
 const glareRadioStyles = cva(
   [
@@ -61,6 +58,6 @@ const glareRadioStyles = cva(
         S: ["w-[12px]", "h-[12px] [&_i]:text-[10px] [&_i]:scale-[1.5]"],
         M: ["w-[24px]", "h-[24px] [&_i]:text-[20px] [&_i]:scale-[1.47]"],
       },
-    }
-  }
-);
+    },
+  },
+);

package/apps/lib/components/Switch.tsx

@@ -17,7 +17,9 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block w-[24px] h-[24px] rounded-full bg-background-presentation-switcher-knob shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-[21px] data-[state=unchecked]:translate-x-0"
+        "pointer-events-none block w-[24px] h-[24px] rounded-full bg-background-presentation-switcher-knob shadow-lg ring-0 transition-transform",
+        "data-[state=checked]:translate-x-[21px] data-[state=unchecked]:translate-x-0",
+        "rtl:data-[state=checked]:-translate-x-[21px] rtl:data-[state=unchecked]:translate-x-0"
       )}
     />
   </SwitchPrimitives.Root>

package/apps/lib/components/Table.tsx

@@ -128,7 +128,7 @@ const TableHead = React.forwardRef<
       <th
         ref={headRef}
         className={cn(
-          "relative py-[2px] px-[2px] border-b-[2px]  border-border-presentation-table-header",
+          "relative py-[6px] px-[4px] border-b-[2px]  border-border-presentation-table-header",
         )}
       >
         <div