@manta-eu/react 0.1.8 → 0.1.10

package/src/components/rdf-insights/SparqlResultsTable.tsx

@@ -0,0 +1,48 @@
+import { compactUri } from "@manta-eu/client/shared/rdf-namespaces";
+import type { SparqlJsonResults, SparqlValue } from "@manta-eu/client/shared/tools";
+import { isPresent } from "@manta-eu/lib/present";
+import { match } from "ts-pattern";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "#components/table/index";
+
+type SparqlResultsTableProps = {
+  results: SparqlJsonResults;
+};
+
+export function formatValue(binding: SparqlValue): string {
+  return match(binding)
+    .with({ type: "uri" }, ({ value }) => compactUri(value))
+    .with({ type: "bnode" }, ({ value }) => `_:${value}`)
+    .otherwise(({ value }) => value);
+}
+
+export function SparqlResultsTable(props: SparqlResultsTableProps) {
+  const { results } = props;
+  const vars = results.head.vars ?? [];
+  const bindings = results.results.bindings;
+
+  if (!isPresent(bindings) || !isPresent(vars)) {
+    return <div className="typography-small text-muted-foreground p-4">No results</div>;
+  }
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          {vars.map((v) => (
+            <TableHead key={v}>{v}</TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {bindings.map((row, i) => (
+          <TableRow key={i}>
+            {vars.map((v) => {
+              const binding = row[v];
+              return <TableCell key={v}>{binding ? formatValue(binding) : ""}</TableCell>;
+            })}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}

package/src/components/rdf-insights/extractEntityRelationTreeRoots.ts

@@ -0,0 +1,25 @@
+import { expandPrefix } from "@manta-eu/client/shared/rdf-namespaces";
+import type { JsonLdGraphDocument } from "@manta-eu/client/types/jsonld";
+import { getNodeId, getNodeTypes } from "@manta-eu/client/types/jsonld";
+import type { EntityRelationTreeRoot } from "./EntityRelationTreeInsight";
+import { getString } from "#lib/rdf/index";
+
+/**
+ * Candidate roots for the entity-relation tree insight. Membership is decided at render time
+ * against live `:ConnectedAccount schema:sameAs` IRIs (not a hardcoded type list).
+ */
+export function extractEntityRelationTreeRoots(jsonLd: JsonLdGraphDocument): EntityRelationTreeRoot[] {
+  const roots: EntityRelationTreeRoot[] = [];
+
+  for (const node of jsonLd["@graph"]) {
+    const iri = getNodeId(node);
+    if (!iri) continue;
+
+    const typeIri = getNodeTypes(node).map(expandPrefix)[0];
+    const label = getString(node, "schema:name") || getString(node, "rdfs:label") || iri;
+
+    roots.push({ iri: expandPrefix(iri), label, typeIri });
+  }
+
+  return roots;
+}

package/src/components/rdf-insights/useExtractedInsights.ts

@@ -0,0 +1,118 @@
+import { expandPrefix } from "@manta-eu/client/shared/rdf-namespaces";
+import type { JsonLdGraphDocument } from "@manta-eu/client/types/jsonld";
+import { getNodeTypes } from "@manta-eu/client/types/jsonld";
+import { m, meta } from "@manta-eu/rdf-lib/namespaces";
+import { flatten, uniq } from "ramda";
+import { useMemo } from "react";
+import { extractEntityRelationTreeRoots } from "./extractEntityRelationTreeRoots";
+import {
+  extractCampaignChannelMix,
+  extractCampaignGrid,
+  extractCampaignPerformanceSummary,
+  extractDailyPerformance,
+  extractKpiSnapshots,
+  extractMetaDailyInsights,
+  extractProduct,
+  extractProductProfitability,
+  extractProductSalesRanking,
+  extractProductVariants,
+  extractRoasBenchmark,
+} from "#lib/rdf/index";
+
+type ExtractorKey =
+  | "productProfitability"
+  | "productSalesRanking"
+  | "campaignPerformance"
+  | "roasBenchmark"
+  | "metaDailyInsights"
+  | "dailyPerformance"
+  | "campaignChannelMix"
+  | "productVariants"
+  | "campaignGrid"
+  | "product"
+  | "kpis";
+
+const typeToExtractors: Record<string, ExtractorKey[]> = {
+  [m.ProductProfitability]: ["productProfitability"],
+  [m.ProductSalesRanking]: ["productSalesRanking"],
+  [m.CampaignPerformanceSummary]: ["campaignPerformance"],
+  [m.CampaignChannelBenchmark]: ["roasBenchmark"],
+  [meta.CampaignDailyCumulativeInsights]: ["metaDailyInsights"],
+  [m.BlendedPerformanceDaily]: ["dailyPerformance"],
+  [meta.Campaign]: ["campaignChannelMix", "campaignGrid"],
+  [m.ProductVariant]: ["productVariants"],
+  [m.Product]: ["product"],
+  [m.KPISnapshot]: ["kpis"],
+};
+
+function collectTypes(jsonLd: JsonLdGraphDocument): Set<string> {
+  return new Set(flatten(jsonLd["@graph"].map((node) => getNodeTypes(node).map(expandPrefix))));
+}
+
+function getRequiredExtractors(types: Set<string>): Set<ExtractorKey> {
+  return new Set(
+    uniq(
+      flatten(
+        Object.entries(typeToExtractors)
+          .filter(([typeUri]) => types.has(typeUri))
+          .map(([, extractorKeys]) => extractorKeys),
+      ),
+    ),
+  );
+}
+
+export function useExtractedInsights(jsonLd: JsonLdGraphDocument) {
+  return useMemo(() => {
+    const presentTypes = collectTypes(jsonLd);
+    const requiredExtractors = getRequiredExtractors(presentTypes);
+
+    const productProfitability = requiredExtractors.has("productProfitability")
+      ? extractProductProfitability(jsonLd)
+      : null;
+    const productSalesRanking = requiredExtractors.has("productSalesRanking")
+      ? extractProductSalesRanking(jsonLd)
+      : null;
+    const campaignPerformance = requiredExtractors.has("campaignPerformance")
+      ? extractCampaignPerformanceSummary(jsonLd)
+      : null;
+    const roasBenchmark = requiredExtractors.has("roasBenchmark") ? extractRoasBenchmark(jsonLd) : null;
+    const metaDailyInsights = requiredExtractors.has("metaDailyInsights") ? extractMetaDailyInsights(jsonLd) : null;
+    const dailyPerformance = requiredExtractors.has("dailyPerformance") ? extractDailyPerformance(jsonLd) : null;
+    const campaignChannelMix = requiredExtractors.has("campaignChannelMix") ? extractCampaignChannelMix(jsonLd) : null;
+    const productVariants = requiredExtractors.has("productVariants") ? extractProductVariants(jsonLd) : null;
+    const campaignGrid = requiredExtractors.has("campaignGrid") ? extractCampaignGrid(jsonLd) : null;
+    const product = requiredExtractors.has("product") ? extractProduct(jsonLd) : null;
+    const kpis = requiredExtractors.has("kpis") ? extractKpiSnapshots(jsonLd) : null;
+    // Candidates only — EntityRelationTreeInsight filters against live connected-account IRIs.
+    const entityRelationTree = extractEntityRelationTreeRoots(jsonLd);
+
+    const hasExtractableInsights =
+      productProfitability ||
+      productSalesRanking ||
+      campaignPerformance ||
+      roasBenchmark ||
+      metaDailyInsights ||
+      dailyPerformance ||
+      campaignChannelMix ||
+      productVariants ||
+      campaignGrid ||
+      product ||
+      kpis;
+
+    return {
+      productProfitability,
+      productSalesRanking,
+      campaignPerformance,
+      roasBenchmark,
+      metaDailyInsights,
+      dailyPerformance,
+      campaignChannelMix,
+      productVariants,
+      campaignGrid,
+      product,
+      kpis,
+      entityRelationTree,
+      hasExtractableInsights: Boolean(hasExtractableInsights),
+    };
+  }, [jsonLd]);
+}

package/src/components/resizable/index.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { GripVerticalIcon } from "lucide-react";
+import type { ComponentProps, ForwardRefExoticComponent, RefAttributes } from "react";
+import { forwardRef } from "react";
+import type { ImperativePanelGroupHandle, ImperativePanelHandle } from "react-resizable-panels";
+import { PanelGroup, Panel, PanelResizeHandle } from "react-resizable-panels";
+import { cn } from "#style";
+
+export type { ImperativePanelGroupHandle, ImperativePanelHandle } from "react-resizable-panels";
+
+export type ResizablePanelGroupProps = ComponentProps<typeof PanelGroup>;
+
+export type ResizablePanelProps = ComponentProps<typeof Panel>;
+
+export const ResizablePanelGroup: ForwardRefExoticComponent<
+  ResizablePanelGroupProps & RefAttributes<ImperativePanelGroupHandle>
+> = forwardRef<ImperativePanelGroupHandle, ResizablePanelGroupProps>(function ResizablePanelGroup(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <PanelGroup
+      className={cn("flex h-full w-full touch-manipulation data-[panel-group-direction=vertical]:flex-col", className)}
+      data-slot="resizable-panel-group"
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+export const ResizablePanel: ForwardRefExoticComponent<ResizablePanelProps & RefAttributes<ImperativePanelHandle>> =
+  forwardRef<ImperativePanelHandle, ResizablePanelProps>(function ResizablePanel(props, ref) {
+    return <Panel data-slot="resizable-panel" ref={ref} {...props} />;
+  });
+
+export type ResizableHandleProps = ComponentProps<typeof PanelResizeHandle> & {
+  withHandle?: boolean;
+};
+
+export function ResizableHandle(props: ResizableHandleProps) {
+  const { withHandle, className, ...otherProps } = props;
+
+  return (
+    <PanelResizeHandle
+      aria-label={otherProps["aria-label"] ?? "Resize panel"}
+      // TODO: this is ridiculous, add a CSS class for this
+      className={cn(
+        "after:-translate-x-1/2 data-[panel-group-direction=vertical]:after:-translate-y-1/2",
+        "relative flex w-px touch-manipulation select-none items-center justify-center",
+        "bg-muted-border after:absolute after:inset-y-0 after:left-1/2 after:w-1",
+        "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-active-border",
+        "focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px",
+        "data-[panel-group-direction=vertical]:w-full",
+        "data-[panel-group-direction=horizontal]:cursor-col-resize",
+        "data-[panel-group-direction=vertical]:cursor-row-resize data-[panel-group-direction=vertical]:after:left-0",
+        "data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full",
+        "data-[panel-group-direction=vertical]:after:translate-x-0",
+        "[&[data-panel-group-direction=vertical]>div]:rotate-90",
+        className,
+      )}
+      data-slot="resizable-handle"
+      {...otherProps}
+    >
+      {withHandle && (
+        <div
+          className={cn(
+            "group z-10 flex h-4 w-3 items-center justify-center rounded-xs",
+            "border border-muted-border/20 bg-muted-border hover:border-muted-border/50",
+          )}
+        >
+          <GripVerticalIcon
+            aria-hidden="true"
+            className="size-2.5 text-default-foreground/50 group-hover:text-default-foreground"
+            strokeWidth={1}
+          />
+        </div>
+      )}
+    </PanelResizeHandle>
+  );
+}

package/src/components/resize-handle/index.tsx

@@ -0,0 +1,43 @@
+import { GripVerticalIcon } from "lucide-react";
+import type { MouseEvent } from "react";
+import { cn } from "#style";
+
+export type ResizeHandleProps = {
+  side: "left" | "right";
+  ariaLabel: string;
+  onResizeStart: (event: MouseEvent<HTMLDivElement>) => void;
+  onReset?: () => void;
+  className?: string;
+};
+
+export function ResizeHandle(props: ResizeHandleProps) {
+  const { side, ariaLabel, onResizeStart, onReset, className } = props;
+
+  return (
+    <div
+      tabIndex={0}
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={ariaLabel}
+      onMouseDown={onResizeStart}
+      onDoubleClick={onReset}
+      title={onReset ? "Drag to resize · double-click to reset" : "Drag to resize"}
+      className={cn(
+        "group absolute inset-y-0 flex w-4 cursor-col-resize touch-none select-none items-center justify-center",
+        side === "right" ? "-right-2" : "-left-2",
+        className,
+      )}
+    >
+      <span
+        aria-hidden="true"
+        className="absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-default-border transition-colors group-hover:bg-primary group-active:bg-primary"
+      />
+      <span
+        aria-hidden="true"
+        className="relative flex h-8 w-4 items-center justify-center rounded-full border border-default-border bg-accent text-default-foreground shadow-sm transition-all duration-150 group-hover:border-primary group-hover:text-primary group-active:border-primary group-active:text-primary"
+      >
+        <GripVerticalIcon aria-hidden="true" className="size-3.5" strokeWidth={1.75} />
+      </span>
+    </div>
+  );
+}

package/src/components/review-cta/index.tsx

@@ -0,0 +1,47 @@
+import { ArrowRight, ZapIcon } from "lucide-react";
+import { cn } from "#style";
+
+export type ReviewCtaProps = {
+  title: string;
+  subtitle: string;
+  onClick: () => void;
+  className?: string;
+  dataTestId?: string;
+  subtitleClassName?: string;
+  leadingContainerClassName?: string;
+  trailingContainerClassName?: string;
+};
+
+export function ReviewCta(props: ReviewCtaProps) {
+  const {
+    title,
+    subtitle,
+    onClick,
+    className,
+    dataTestId,
+    subtitleClassName,
+    leadingContainerClassName,
+    trailingContainerClassName,
+  } = props;
+
+  const leadingIcon = <ZapIcon className="size-5 text-accent-foreground shrink-0" />;
+  const trailingIcon = <ArrowRight className="size-5 text-accent-foreground shrink-0" />;
+
+  return (
+    <button
+      type="button"
+      data-testid={dataTestId}
+      onClick={onClick}
+      className={cn("flex items-center w-full text-left", className)}
+    >
+      {leadingContainerClassName ? <div className={leadingContainerClassName}>{leadingIcon}</div> : leadingIcon}
+
+      <div className="flex flex-col flex-1 min-w-0">
+        <span className="typography-caption text-accent-foreground truncate leading-5">{title}</span>
+        <span className={cn("typography-tiny text-muted-foreground leading-4", subtitleClassName)}>{subtitle}</span>
+      </div>
+
+      {trailingContainerClassName ? <div className={trailingContainerClassName}>{trailingIcon}</div> : trailingIcon}
+    </button>
+  );
+}

package/src/components/scope-tabs/index.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { isPresent } from "@manta-eu/lib/present";
+import { useEffect, useRef } from "react";
+import { TabCount, TabsList, TabsTrigger } from "../tabs";
+
+export type ScopeTab<T extends string = string> = {
+  value: T;
+  label: string;
+  count?: number;
+  secondaryCount?: number;
+};
+
+export type ScopeTabsProps<T extends string = string> = {
+  tabs: ScopeTab<T>[];
+  activeValue: T;
+  isLoading?: boolean;
+};
+
+function hasCount(count: number | undefined): count is number {
+  return isPresent(count) && count > 0;
+}
+
+export function ScopeTabs<T extends string>(props: ScopeTabsProps<T>) {
+  const { tabs, activeValue, isLoading = false } = props;
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const activeTrigger = scrollRef.current?.querySelector<HTMLElement>('[data-state="active"]');
+    activeTrigger?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, [activeValue]);
+
+  return (
+    <div
+      ref={scrollRef}
+      className="w-full min-w-0 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+    >
+      <TabsList className="w-max">
+        {tabs.map((tab) => (
+          <TabsTrigger key={tab.value} value={tab.value}>
+            {tab.label}
+            {!isLoading && hasCount(tab.count) && <TabCount count={tab.count} />}
+            {!isLoading && hasCount(tab.secondaryCount) && <TabCount count={tab.secondaryCount} />}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+    </div>
+  );
+}

package/src/components/scroll-area/index.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { Root, Viewport, Corner, ScrollAreaScrollbar, ScrollAreaThumb } from "@radix-ui/react-scroll-area";
+import type { ComponentProps, ComponentRef } from "react";
+import { forwardRef } from "react";
+import { cn } from "#style";
+
+export const ScrollArea = forwardRef<ComponentRef<typeof Root>, ComponentProps<typeof Root>>(
+  function ScrollArea(props, ref) {
+    const { className, children, ...otherProps } = props;
+
+    return (
+      <Root className={cn("relative touch-manipulation", className)} data-slot="scroll-area" ref={ref} {...otherProps}>
+        <Viewport
+          className="size-full touch-manipulation rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-active-border/50"
+          data-slot="scroll-area-viewport"
+        >
+          {children}
+        </Viewport>
+        <ScrollBar />
+        <Corner />
+      </Root>
+    );
+  },
+);
+
+export const ScrollBar = forwardRef<
+  ComponentRef<typeof ScrollAreaScrollbar>,
+  ComponentProps<typeof ScrollAreaScrollbar>
+>(function ScrollBar(props, ref) {
+  const { className, orientation = "vertical", ...otherProps } = props;
+
+  return (
+    <ScrollAreaScrollbar
+      aria-orientation={orientation}
+      className={cn(
+        "flex touch-none select-none p-px transition-colors",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+        className,
+      )}
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      ref={ref}
+      {...otherProps}
+    >
+      <ScrollAreaThumb
+        aria-hidden="true"
+        className="relative flex-1 rounded-full bg-muted-border"
+        data-slot="scroll-area-thumb"
+      />
+    </ScrollAreaScrollbar>
+  );
+});