torch-glare 2.1.1 → 2.1.3

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

@@ -0,0 +1,495 @@
+"use client";
+
+import { useEffect, useMemo, useState, 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: any) => string;
+  selectedItemId?: any;
+  renderDetail?: (item: DynamicRecord | null) => ReactNode;
+};
+
+type InboxFilter = "all" | "starred" | "priority";
+
+function getId(
+  item: DynamicRecord,
+  fallbackPath: string | undefined,
+  idx: number,
+): any {
+  if (item?.id != null) return item.id;
+  if (fallbackPath) {
+    const v = getByPath(item, fallbackPath);
+    if (v != null) return v;
+  }
+  return idx;
+}
+
+function getInitials(name: any): 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,
+  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: any) => {
+    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}
+                item={item}
+                rowFields={displayFields}
+                selected={selected}
+                onSelect={() => handleSelectItem(item)}
+                href={itemHref?.(item, itemId)}
+              />
+            );
+          })}
+        </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

@@ -0,0 +1,136 @@
+"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";