torch-glare 2.4.5 → 2.5.0

package/apps/lib/components/DataViews/InboxView.tsx

@@ -1,463 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState, type ElementType, type ReactNode } from "react";
-import { Badge } from "../Badge";
-import { FilterPanel } from "./FilterPanel";
-import {
-  Star,
-  Archive,
-  Trash2,
-  MoreHorizontal,
-  Reply,
-  Forward,
-  Paperclip,
-  InboxIcon,
-  AlertCircle,
-} from "lucide-react";
-import { cn } from "../../utils/cn";
-import type {
-  DynamicRecord,
-  ViewConfig,
-  DynamicColumnConfig,
-  DynamicFilterConfig,
-  FilterState,
-  FilterValue,
-  FieldConfig,
-  InboxConfig,
-} from "./types";
-import TabFormItem from "../TabFormItem";
-import { Button } from "../Button";
-import { Avatar, AvatarFallback } from "../Avatar";
-import { Card } from "../Card";
-import { Divider } from "../Divider";
-import { renderDetailView } from "../../utils/dataViews/nestedDataUtils";
-import { getByPath, setByPath, matchesFilterValues } from "../../utils/dataViews/pathUtils";
-import { renderField } from "./fieldRenderers";
-import { resolveInboxConfig, visibleFields } from "../../utils/dataViews/fieldUtils";
-import { useIsMobile } from "../../hooks/useIsMobile";
-import { resolveBadgeVariant } from "./badgeAdapter";
-import { InboxViewCard } from "./InboxViewCard";
-
-export type InboxViewProps = {
-  data: DynamicRecord[];
-  columns?: DynamicColumnConfig[];
-  fields: FieldConfig[];
-  inboxConfig?: InboxConfig;
-  config: ViewConfig;
-  onDataUpdate?: (data: DynamicRecord[]) => void;
-  filters?: DynamicFilterConfig[];
-  filterState?: FilterState;
-  onFilterChange?: (filters: FilterState) => void;
-  showFilters?: boolean;
-  itemHref?: (item: DynamicRecord, id: unknown) => string;
-  /**
-   * Component used to render each item's link when `itemHref` is set. Defaults
-   * to a plain `<a>` (full-page navigation). Pass your router's link
-   * (e.g. Next.js `Link`, React Router `Link`) for client-side navigation.
-   */
-  linkComponent?: ElementType;
-  selectedItemId?: unknown;
-  renderDetail?: (item: DynamicRecord | null) => ReactNode;
-};
-
-type InboxFilter = "all" | "starred" | "priority";
-
-function getId(item: DynamicRecord, fallbackPath: string | undefined, idx: number): unknown {
-  if (item?.id != null) return item.id;
-  if (fallbackPath) {
-    const v = getByPath(item, fallbackPath);
-    if (v != null) return v;
-  }
-  return idx;
-}
-
-function getInitials(name: unknown): string {
-  const s = String(name ?? "?").trim();
-  if (!s) return "?";
-  return (
-    s
-      .split(/\s+/)
-      .slice(0, 2)
-      .map((p) => p[0]?.toUpperCase() ?? "")
-      .join("") || "?"
-  );
-}
-
-export function InboxView({
-  data,
-  columns,
-  fields,
-  inboxConfig: userInboxConfig,
-  config,
-  onDataUpdate,
-  filters: filterConfig,
-  filterState: externalFilterState,
-  onFilterChange,
-  showFilters = true,
-  itemHref,
-  linkComponent,
-  selectedItemId,
-  renderDetail,
-}: InboxViewProps) {
-  const isMobile = useIsMobile();
-  const [selectedItem, setSelectedItem] = useState<DynamicRecord | null>(data[0] || null);
-  const [inboxFilter, setInboxFilter] = useState<InboxFilter>("all");
-  const [internalFilters, setInternalFilters] = useState<FilterState>({});
-
-  const activeFilters = externalFilterState ?? internalFilters;
-
-  const displayFields = useMemo(
-    () => visibleFields(fields).sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
-    [fields],
-  );
-
-  const inboxCfg = useMemo(
-    () => resolveInboxConfig(data, userInboxConfig),
-    [data, userInboxConfig],
-  );
-  const idPath = displayFields[0]?.path;
-
-  useEffect(() => {
-    if (selectedItemId == null) return;
-    const match = data.find((item, idx) => {
-      const cur = getId(item, idPath, idx);
-      return String(cur) === String(selectedItemId);
-    });
-    if (match) setSelectedItem(match);
-  }, [selectedItemId, data, idPath]);
-
-  const titleField = useMemo(() => {
-    const path = inboxCfg.titlePath;
-    if (path)
-      return (
-        fields.find((f) => f.path === path) ?? {
-          path,
-          label: path,
-          type: "text" as const,
-        }
-      );
-    return displayFields[0];
-  }, [inboxCfg.titlePath, displayFields, fields]);
-
-  const previewField = useMemo(() => {
-    const path = inboxCfg.previewPath;
-    if (path)
-      return (
-        fields.find((f) => f.path === path) ?? {
-          path,
-          label: path,
-          type: "text" as const,
-        }
-      );
-    return displayFields[1];
-  }, [inboxCfg.previewPath, displayFields, fields]);
-
-  const isStarred = (item: DynamicRecord) =>
-    inboxCfg.starredField ? !!getByPath(item, inboxCfg.starredField) : false;
-  const hasAttachment = (item: DynamicRecord) => {
-    if (!inboxCfg.attachmentField) return false;
-    const v = getByPath(item, inboxCfg.attachmentField);
-    if (typeof v === "boolean") return v;
-    if (Array.isArray(v)) return v.length > 0;
-    return v != null;
-  };
-  const isHighPriority = (item: DynamicRecord) => {
-    if (!inboxCfg.priorityField) return false;
-    const v = getByPath(item, inboxCfg.priorityField);
-    return String(v).toLowerCase() === "high";
-  };
-
-  const toggleStar = (itemId: unknown) => {
-    if (!inboxCfg.starredField) return;
-    const updatedData = data.map((item, idx) => {
-      const cur = getId(item, idPath, idx);
-      if (cur === itemId) {
-        const next = !getByPath(item, inboxCfg.starredField!);
-        return setByPath(item, inboxCfg.starredField!, next);
-      }
-      return item;
-    });
-    onDataUpdate?.(updatedData);
-
-    if (selectedItem && getId(selectedItem, idPath, -1) === itemId) {
-      setSelectedItem((prev) =>
-        prev && inboxCfg.starredField
-          ? setByPath(prev, inboxCfg.starredField, !getByPath(prev, inboxCfg.starredField))
-          : prev,
-      );
-    }
-  };
-
-  const handleSelectItem = (item: DynamicRecord) => {
-    setSelectedItem(item);
-  };
-
-  const handleFilterChange = (path: string, value: FilterValue) => {
-    const newFilters: FilterState = { ...activeFilters, [path]: value };
-    if (onFilterChange) onFilterChange(newFilters);
-    else setInternalFilters(newFilters);
-  };
-
-  const clearAllFilters = () => {
-    if (onFilterChange) onFilterChange({});
-    else setInternalFilters({});
-  };
-
-  const filteredData = useMemo(() => {
-    return data.filter((item) => {
-      const matchesInboxFilter =
-        inboxFilter === "all" ||
-        (inboxFilter === "starred" && isStarred(item)) ||
-        (inboxFilter === "priority" && isHighPriority(item));
-
-      const matchesFilters = Object.entries(activeFilters).every(([path, filterValues]) =>
-        matchesFilterValues(item, path, filterValues),
-      );
-
-      return matchesInboxFilter && matchesFilters;
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data, inboxFilter, activeFilters, inboxCfg]);
-
-  const starredCount = inboxCfg.starredField ? data.filter((i) => isStarred(i)).length : 0;
-  const priorityCount = inboxCfg.priorityField ? data.filter((i) => isHighPriority(i)).length : 0;
-
-  const filtersEnabled = showFilters && config.showFilters !== false;
-  const countBadge = resolveBadgeVariant("gray");
-  const fallbackColumns: DynamicColumnConfig[] =
-    columns ??
-    displayFields.map((f, i) => ({
-      id: f.path,
-      label: f.label ?? f.path,
-      visible: true,
-      order: i,
-    }));
-
-  return (
-    <div className="flex h-full flex-col  md:flex-row gap-2">
-      {filtersEnabled && !isMobile && (
-        <div className="w-64 border-r border-border-presentation-global-primary bg-background-presentation-body-overlay-primary flex flex-col">
-          <div className="p-4 space-y-1">
-            <TabFormItem
-              componentType="side"
-              onClick={() => setInboxFilter("all")}
-              className="w-full justify-start gap-2"
-            >
-              <InboxIcon className="h-4 w-4" />
-              All Items
-              <Badge {...countBadge} label={String(data.length)} className="ml-auto" size="XS" />
-            </TabFormItem>
-            {inboxCfg.starredField && (
-              <TabFormItem
-                componentType="side"
-                className="w-full justify-start gap-2"
-                onClick={() => setInboxFilter("starred")}
-              >
-                <Star className="h-4 w-4" />
-                Starred
-                {starredCount > 0 && (
-                  <Badge
-                    {...countBadge}
-                    label={String(starredCount)}
-                    className="ml-auto"
-                    size="XS"
-                  />
-                )}
-              </TabFormItem>
-            )}
-            {inboxCfg.priorityField && (
-              <TabFormItem
-                componentType="side"
-                className="w-full justify-start gap-2"
-                onClick={() => setInboxFilter("priority")}
-              >
-                <AlertCircle className="h-4 w-4" />
-                Priority
-                {priorityCount > 0 && (
-                  <Badge
-                    {...countBadge}
-                    label={String(priorityCount)}
-                    className="ml-auto"
-                    size="XS"
-                  />
-                )}
-              </TabFormItem>
-            )}
-          </div>
-
-          <Divider />
-
-          <div className="flex-1  overflow-y-auto">
-            <FilterPanel
-              data={data}
-              fields={fields}
-              filters={activeFilters}
-              onFilterChange={handleFilterChange}
-              onClearAll={clearAllFilters}
-              filterConfig={filterConfig}
-            />
-          </div>
-        </div>
-      )}
-
-      <div
-        className={cn(
-          "border rounded-[16px]  border-border-presentation-global-primary flex flex-col  bg-background-presentation-form-base overflow-hidden",
-          isMobile ? "flex-1" : "w-full md:w-96",
-        )}
-      >
-        <div className="px-3 py-2  border-b border-border-presentation-global-primary">
-          <span
-            style={{ fontFeatureSettings: "'cv05' on" }}
-            className="typography-display-medium-medium  uppercase text-content-presentation-global-primary"
-          >
-            inbox
-          </span>
-        </div>
-        <div className="flex-1 flex flex-col overflow-y-auto gap-1 py-1 bg-background-presentation-button-disabled">
-          {filteredData.map((item, idx) => {
-            const itemId = getId(item, idPath, idx);
-            const selected =
-              (selectedItemId != null && String(selectedItemId) === String(itemId)) ||
-              (selectedItem != null && getId(selectedItem, idPath, -1) === itemId);
-
-            return (
-              <InboxViewCard
-                key={itemId as string | number}
-                item={item}
-                rowFields={displayFields}
-                selected={selected}
-                onSelect={() => handleSelectItem(item)}
-                href={itemHref?.(item, itemId)}
-                linkComponent={linkComponent}
-              />
-            );
-          })}
-        </div>
-      </div>
-
-      {renderDetail && !isMobile ? (
-        <div className="flex-1 flex flex-col bg-background-presentation-form-base overflow-hidden rounded-[16px]">
-          {renderDetail(selectedItem)}
-        </div>
-      ) : config.showPreviewPane && !isMobile && selectedItem ? (
-        <div className="flex-1 flex flex-col bg-background-presentation-form-base overflow-hidden rounded-[16px] border border-border-presentation-global-primary">
-          <div className="flex items-center justify-between gap-4 p-4 border-b border-border-presentation-global-primary bg-background-presentation-form-base">
-            <div className="flex items-center gap-2">
-              <Button variant="BorderStyle" buttonType="icon">
-                <Archive className="h-4 w-4" />
-              </Button>
-              <Button variant="BorderStyle" buttonType="icon">
-                <Trash2 className="h-4 w-4" />
-              </Button>
-              <Divider orientation="vertical" className="h-6" />
-              <Button variant="BorderStyle" buttonType="icon">
-                <MoreHorizontal className="h-4 w-4" />
-              </Button>
-            </div>
-          </div>
-
-          <div className="flex-1 overflow-y-auto p-6">
-            <Card>
-              <div className="flex items-start gap-4 mb-6">
-                <Avatar className="h-12 w-12">
-                  <AvatarFallback className="bg-background-presentation-action-primary text-content-presentation-action-primary">
-                    {getInitials(previewField ? getByPath(selectedItem, previewField.path) : "")}
-                  </AvatarFallback>
-                </Avatar>
-                <div className="flex-1">
-                  <div className="flex items-start justify-between gap-4 mb-2">
-                    <div>
-                      <h2 className="text-xl font-semibold text-content-presentation-global-primary mb-1">
-                        {String(titleField ? getByPath(selectedItem, titleField.path) : "")}
-                      </h2>
-                      {previewField && (
-                        <p className="text-sm text-content-presentation-global-tertiary">
-                          {previewField.label}:{" "}
-                          <span className="text-content-presentation-global-primary">
-                            {String(getByPath(selectedItem, previewField.path))}
-                          </span>
-                        </p>
-                      )}
-                    </div>
-                    {inboxCfg.starredField && (
-                      <button
-                        onClick={() => toggleStar(getId(selectedItem, idPath, -1))}
-                        className="hover:text-content-presentation-badge-yellow transition-colors"
-                        aria-label="Toggle star"
-                      >
-                        <Star
-                          className={cn(
-                            "h-5 w-5",
-                            isStarred(selectedItem)
-                              ? "fill-content-presentation-badge-yellow text-content-presentation-badge-yellow"
-                              : "text-content-presentation-global-tertiary",
-                          )}
-                        />
-                      </button>
-                    )}
-                  </div>
-                  <div className="flex items-center gap-2 flex-wrap">
-                    {displayFields.slice(3).map((field) => {
-                      const value = getByPath(selectedItem, field.path);
-                      if (value == null) return null;
-                      return (
-                        <span key={field.path}>{renderField(value, field, selectedItem)}</span>
-                      );
-                    })}
-                  </div>
-                </div>
-              </div>
-
-              <Divider className="my-6" />
-
-              {renderDetailView(
-                selectedItem,
-                fallbackColumns.filter((c) => c.visible),
-                (value, column, row) => {
-                  const f = fields.find((field) => field.path === column.id);
-                  if (f) return renderField(value, f, row);
-                  return <span>{String(value ?? "")}</span>;
-                },
-              )}
-
-              {hasAttachment(selectedItem) && (
-                <>
-                  <Divider className="my-6" />
-                  <div className="flex items-center gap-2 p-3 rounded-lg bg-background-presentation-form-field-primary">
-                    <Paperclip className="h-4 w-4 text-content-presentation-global-tertiary" />
-                    <span className="text-sm text-content-presentation-global-primary">
-                      attachment.pdf
-                    </span>
-                    <span className="text-xs text-content-presentation-global-tertiary">
-                      (2.4 MB)
-                    </span>
-                  </div>
-                </>
-              )}
-            </Card>
-          </div>
-
-          <div className="flex items-center gap-2 p-4 border-t border-border-presentation-global-primary bg-background-presentation-form-base">
-            <Button className="gap-2">
-              <Reply className="h-4 w-4" />
-              Reply
-            </Button>
-            <Button variant="BorderStyle" className="gap-2 bg-transparent">
-              <Forward className="h-4 w-4" />
-              Forward
-            </Button>
-          </div>
-        </div>
-      ) : (
-        !isMobile && (
-          <div className="flex-1 flex items-center justify-center bg-background-presentation-form-base overflow-hidden rounded-[16px] border border-border-presentation-global-primary">
-            <p className="text-content-presentation-global-tertiary">
-              Select an item to view details
-            </p>
-          </div>
-        )
-      )}
-    </div>
-  );
-}

package/apps/lib/components/DataViews/InboxViewCard.tsx

@@ -1,127 +0,0 @@
-"use client";
-
-import { forwardRef, type ElementType, type ReactNode } from "react";
-import { cn } from "../../utils/cn";
-import { Divider } from "../Divider";
-import { getByPath } from "../../utils/dataViews/pathUtils";
-import { renderField } from "./fieldRenderers";
-import type { DynamicRecord, FieldConfig } from "./types";
-
-export interface InboxViewCardProps {
-  item: DynamicRecord;
-  rowFields?: FieldConfig[];
-  titleField?: FieldConfig;
-  previewField?: FieldConfig;
-  detailField?: FieldConfig;
-  metaFields?: FieldConfig[];
-  dateField?: FieldConfig;
-  dateLabel?: string;
-  selected?: boolean;
-  onSelect?: () => void;
-  href?: string;
-  /**
-   * Component used to render the link when `href` is set. Defaults to a plain
-   * `<a>` so the component stays framework-agnostic. Pass your router's link
-   * (e.g. Next.js `Link`, React Router `Link`) for client-side navigation.
-   */
-  linkComponent?: ElementType;
-  className?: string;
-}
-
-function pickRowFields(props: InboxViewCardProps): FieldConfig[] {
-  if (props.rowFields && props.rowFields.length) return props.rowFields;
-  const collected: FieldConfig[] = [];
-  if (props.previewField) collected.push(props.previewField);
-  if (props.titleField && props.titleField.path !== props.previewField?.path) {
-    collected.push(props.titleField);
-  }
-  if (props.detailField) collected.push(props.detailField);
-  if (props.metaFields?.length) collected.push(...props.metaFields);
-  return collected;
-}
-
-function pickDateField(rowFields: FieldConfig[], explicit?: FieldConfig): FieldConfig | undefined {
-  if (explicit) return explicit;
-  return rowFields.find((f) => f.type === "date");
-}
-
-export const InboxViewCard = forwardRef<HTMLDivElement, InboxViewCardProps>((props, ref) => {
-  const { item, selected = false, onSelect, href, linkComponent, className } = props;
-  const allRowFields = pickRowFields(props);
-  const dateField = pickDateField(allRowFields, props.dateField);
-  const rowFields = dateField
-    ? allRowFields.filter((f) => f.path !== dateField.path)
-    : allRowFields;
-  const dateLabel = props.dateLabel ?? "Created at:";
-
-  const cardClass = cn(
-    "flex flex-col gap-2 p-3 cursor-pointer transition-colors",
-    "bg-background-presentation-form-base",
-    "border-y-2 border-transparent",
-    !selected &&
-      "hover:bg-[image:linear-gradient(0deg,rgba(151,72,255,0.05)_0%,rgba(151,72,255,0.05)_100%)] hover:border-y-[#AE71FF]",
-    selected &&
-      "bg-[image:linear-gradient(0deg,rgba(0,117,255,0.05)_0%,rgba(0,117,255,0.05)_100%)] border-y-border-presentation-state-focus",
-    className,
-  );
-
-  const content: ReactNode = (
-    <>
-      <div className="flex flex-col gap-1 w-full">
-        {rowFields.map((field, idx) => {
-          const value = getByPath(item, field.path);
-          return (
-            <div key={field.path ?? idx} className="flex flex-col">
-              <div className="flex items-center gap-2">
-                <span className="w-[100px] shrink-0 typography-body-large-semibold text-content-presentation-global-secondary">
-                  {field.label ?? field.path}:
-                </span>
-                <span className="h-full py-0.5 flex items-center">
-                  <span className="block h-full w-px bg-black-alpha-15" />
-                </span>
-                <span className="flex-1 min-w-0 truncate typography-body-large-medium text-content-presentation-global-primary">
-                  {renderField(value, field, item)}
-                </span>
-              </div>
-              {idx < rowFields.length - 1 && <Divider className="mt-1" />}
-            </div>
-          );
-        })}
-      </div>
-
-      {dateField && (
-        <div className="flex items-center justify-end">
-          <div className="inline-flex items-center gap-0.5 p-0.5 rounded-md bg-black-alpha-10">
-            <div className="px-1 rounded-sm">
-              <span className="typography-labels-medium-semibold text-content-presentation-global-primary">
-                {dateLabel}
-              </span>
-            </div>
-            <div className="px-1 rounded-sm bg-black-alpha-075">
-              <span className="typography-labels-medium-semibold text-content-presentation-global-primary">
-                {renderField(getByPath(item, dateField.path), dateField, item)}
-              </span>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-
-  if (href) {
-    const LinkTag = (linkComponent ?? "a") as ElementType;
-    return (
-      <LinkTag href={href} className={cn(cardClass, "no-underline text-inherit")}>
-        {content}
-      </LinkTag>
-    );
-  }
-
-  return (
-    <div ref={ref} onClick={onSelect} className={cardClass}>
-      {content}
-    </div>
-  );
-});
-
-InboxViewCard.displayName = "InboxViewCard";