@uipath/apollo-vertex 1.2.0 → 1.4.0

package/dist/registry/shell/shell.d.ts

@@ -1,6 +1,6 @@
 import type { LucideIcon } from "lucide-react";
 import type { FC, PropsWithChildren } from "react";
-import type { TranslationKey } from "./shell-translation-key";
+import type { ShellNavLabel } from "./shell-translation-key";
 export interface CompanyLogo {
     url: string;
     darkUrl?: string;
@@ -9,11 +9,13 @@ export interface CompanyLogo {
 }
 export interface ShellSubNavItem {
     path: string;
-    label: TranslationKey;
+    to?: string;
+    label: ShellNavLabel;
 }
 export interface ShellNavItem {
     path: string;
-    label: TranslationKey;
+    to?: string;
+    label: ShellNavLabel;
     icon: LucideIcon;
     subItems?: ShellSubNavItem[];
 }
@@ -24,5 +26,6 @@ export interface ApolloShellProps extends PropsWithChildren {
     companyLogo?: CompanyLogo;
     navItems: ShellNavItem[];
     loginDescription?: string;
+    configureI18n?: () => Promise<void>;
 }
 export declare const ApolloShell: FC<ApolloShellProps>;

package/dist/registry/shell/shell.js

@@ -7,9 +7,23 @@ import { ShellLayout } from "./shell-layout.js";
 import { LocaleProvider } from "./shell-locale-provider.js";
 import { ShellLogin } from "./shell-login.js";
 import { ShellUserProvider } from "./shell-user-provider.js";
+function ShellLoadingSkeleton() {
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex h-screen gap-4 p-4 bg-background dark:bg-sidebar",
+        children: [
+            /*#__PURE__*/ jsx(Skeleton, {
+                className: "h-full w-[280px]"
+            }),
+            /*#__PURE__*/ jsx(Skeleton, {
+                className: "h-full flex-1 rounded-lg"
+            })
+        ]
+    });
+}
 const ApolloShellContent = ({ children, companyName, productName, companyLogo, variant, navItems, loginDescription })=>{
     const authContext = useContext(AuthContext);
-    const { accessToken } = useAuth();
+    const { accessToken, isLoading } = useAuth();
+    if (authContext && isLoading) return /*#__PURE__*/ jsx(ShellLoadingSkeleton, {});
     if (authContext && !accessToken) return /*#__PURE__*/ jsx(ShellLogin, {
         title: productName,
         description: loginDescription
@@ -25,18 +39,9 @@ const ApolloShellContent = ({ children, companyName, productName, companyLogo, v
         })
     });
 };
-const ApolloShell = ({ children, companyName, productName, companyLogo, variant, navItems, loginDescription })=>/*#__PURE__*/ jsx(LocaleProvider, {
-        loadingElement: /*#__PURE__*/ jsxs("div", {
-            className: "flex h-screen gap-4 p-4 bg-background dark:bg-sidebar",
-            children: [
-                /*#__PURE__*/ jsx(Skeleton, {
-                    className: "h-full w-[280px]"
-                }),
-                /*#__PURE__*/ jsx(Skeleton, {
-                    className: "h-full flex-1 rounded-lg"
-                })
-            ]
-        }),
+const ApolloShell = ({ children, companyName, productName, companyLogo, variant, navItems, loginDescription, configureI18n })=>/*#__PURE__*/ jsx(LocaleProvider, {
+        configureI18n: configureI18n,
+        loadingElement: /*#__PURE__*/ jsx(ShellLoadingSkeleton, {}),
         children: /*#__PURE__*/ jsx(ApolloShellContent, {
             companyName: companyName,
             productName: productName,

package/dist/registry/solution-tests/config.d.ts

@@ -1,5 +1,5 @@
-import type { ColumnDef, Table as TanstackTable } from "@tanstack/react-table";
 import type { ReactNode } from "react";
+import type { DataTableColumnDef, DataTableInstance } from "../../lib/table-features";
 import type { EvaluatorRenderers } from "./evaluators/registry";
 import type { ProcessOutputRenderers } from "./outputs/registry";
 import type { SolutionTest, SolutionTestRun } from "./types";
@@ -71,9 +71,9 @@ export type TrackSolutionTestEvent = UnionToIntersection<{
 /** Per-vertical presentation config; everything else is hard-coded in `constants`. */
 export interface SolutionTestsConfig {
     /** Columns inserted between the Test Name and Version columns. */
-    subjectColumns?: ColumnDef<SolutionTest>[];
+    subjectColumns?: DataTableColumnDef<SolutionTest>[];
     /** Custom content (e.g. faceted filters) rendered in the test-cases table toolbar. */
-    subjectToolbarContent?: (table: TanstackTable<SolutionTest>) => ReactNode;
+    subjectToolbarContent?: (table: DataTableInstance<SolutionTest>) => ReactNode;
     /** When set, the test name links to its subject. */
     getSubjectHref?: (test: SolutionTest) => string | undefined;
     /** Opens a run's details. The host owns the route + navigation; the view
@@ -98,8 +98,8 @@ export interface SolutionTestsConfig {
 }
 /** Config with defaults applied — what components read from context. */
 export interface ResolvedSolutionTestsConfig {
-    subjectColumns: ColumnDef<SolutionTest>[];
-    subjectToolbarContent?: (table: TanstackTable<SolutionTest>) => ReactNode;
+    subjectColumns: DataTableColumnDef<SolutionTest>[];
+    subjectToolbarContent?: (table: DataTableInstance<SolutionTest>) => ReactNode;
     getSubjectHref?: (test: SolutionTest) => string | undefined;
     onOpenRun?: (run: SolutionTestRun) => void;
     subjectNoun?: {

package/dist/registry/solution-tests/solution-tests-view.js

@@ -3,7 +3,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Link } from "@tanstack/react-router";
 import { ChevronRightIcon, Play, PlayCircle, Square, Trash2 } from "lucide-react";
 import { useState } from "react";
-import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { Alert, AlertDescription } from "../alert/alert.js";
 import { Badge } from "../badge/badge.js";
 import { Button } from "../button/button.js";
@@ -15,6 +14,7 @@ import { Switch } from "../switch/switch.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs/tabs.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
 import { renderValueOrEmptyState } from "../../lib/renderValueOrEmptyState.js";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { defaultRunStatusLabels, defaultTestStatusLabels } from "./constants.js";
 import { useSolutionTestsConfig } from "./context.js";
 import { DeleteConfirmDialog } from "./delete-confirm-dialog.js";

package/dist/registry/table-chart/table-chart-view.js

@@ -1,9 +1,13 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { columnVisibilityFeature, flexRender, rowSortingFeature, tableFeatures, useTable } from "@tanstack/react-table";
 import { useMemo, useState } from "react";
-import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/table.js";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
+const tableChartFeatures = tableFeatures({
+    rowSortingFeature: rowSortingFeature,
+    columnVisibilityFeature: columnVisibilityFeature
+});
 function TableChart({ columns, rows, sort, onSortChange }) {
     const { t } = useVertexTranslation();
     const [sorting, setSorting] = useState(()=>sort ? [
@@ -43,7 +47,7 @@ function TableChart({ columns, rows, sort, onSortChange }) {
                 cell: ({ getValue })=>{
                     const value = getValue();
                     return /*#__PURE__*/ jsx("div", {
-                        className: "right" === column.align ? "text-right" : "text-left",
+                        className: "right" === column.align ? "text-right tabular-nums" : "text-left",
                         children: column.format(value)
                     });
                 }
@@ -51,10 +55,10 @@ function TableChart({ columns, rows, sort, onSortChange }) {
         columns,
         t
     ]);
-    const table = useReactTable({
+    const table = useTable({
+        features: tableChartFeatures,
         data: rows,
         columns: columnDefs,
-        getCoreRowModel: getCoreRowModel(),
         manualSorting: true,
         onSortingChange: (updater)=>{
             const newSorting = "function" == typeof updater ? updater(sorting) : updater;

package/dist/registry/timeline/timeline-marker.js

@@ -26,8 +26,8 @@ function TimelineMarker({ variant, initials, compact = false }) {
         case "user":
             return /*#__PURE__*/ jsx(MarkerCircle, {
                 compact: compact,
-                className: cn("bg-muted font-medium text-muted-foreground shadow-sm", compact ? "text-[9px]" : "text-xs"),
-                children: initials ?? "?"
+                className: "bg-muted text-xs font-medium text-muted-foreground shadow-sm",
+                children: (compact ? initials?.[0] : initials) ?? "?"
             });
         case "ai-upcoming":
         case "ai-suspended":

package/dist/registry/use-data-table/types.d.ts

@@ -1,6 +1,7 @@
-import type { ColumnDef } from "@tanstack/react-table";
+import type { RowData } from "@tanstack/react-table";
+import type { DataTableColumnDef } from "../../lib/table-features";
 export type EntityRecord = Record<string, unknown>;
-export type ColumnDefWithAccessorKey<T> = ColumnDef<T> & {
+export type ColumnDefWithAccessorKey<T extends RowData> = DataTableColumnDef<T> & {
     accessorKey: string;
 };
 export interface Column {

package/dist/registry/use-data-table/useColumnVisibility.d.ts

@@ -1,10 +1,10 @@
-import type { OnChangeFn, VisibilityState } from "@tanstack/react-table";
+import type { ColumnVisibilityState, OnChangeFn } from "@tanstack/react-table";
 export interface UseColumnVisibilityOptions {
     storageKey: string;
     allColumnKeys: string[];
     defaultVisibleColumns: string[];
 }
 export declare function useColumnVisibility({ storageKey, allColumnKeys, defaultVisibleColumns, }: UseColumnVisibilityOptions): {
-    columnVisibility: VisibilityState;
-    onColumnVisibilityChange: OnChangeFn<VisibilityState>;
+    columnVisibility: ColumnVisibilityState;
+    onColumnVisibilityChange: OnChangeFn<ColumnVisibilityState>;
 };

package/dist/registry/use-data-table/useDataTable.d.ts

@@ -1,20 +1,21 @@
-import type { ColumnDef, ColumnFiltersState, RowSelectionState } from "@tanstack/react-table";
-export interface UseDataTableOptions<TData> {
+import type { ColumnFiltersState, RowData, RowSelectionState } from "@tanstack/react-table";
+import type { DataTableColumnDef } from "../../lib/table-features";
+export interface UseDataTableOptions<TData extends RowData> {
     data: TData[];
-    columns: ColumnDef<TData>[];
+    columns: DataTableColumnDef<TData>[];
     isLoading?: boolean;
     storageKey: string;
     defaultColumnOrder?: string[];
     defaultVisibleColumns?: string[];
 }
-export declare function useDataTable<TData>({ data, columns, isLoading, storageKey, defaultColumnOrder: defaultColumnOrderProp, defaultVisibleColumns: defaultVisibleColumnsProp, }: UseDataTableOptions<TData>): {
+export declare function useDataTable<TData extends RowData>({ data, columns, isLoading, storageKey, defaultColumnOrder: defaultColumnOrderProp, defaultVisibleColumns: defaultVisibleColumnsProp, }: UseDataTableOptions<TData>): {
     data: TData[];
     isLoading: boolean;
-    columns: ColumnDef<TData>[];
+    columns: DataTableColumnDef<TData>[];
     sorting: import("@tanstack/react-table").SortingState;
     onSortingChange: import("@tanstack/react-table").OnChangeFn<import("@tanstack/react-table").SortingState>;
-    columnVisibility: import("@tanstack/react-table").VisibilityState;
-    onColumnVisibilityChange: import("@tanstack/react-table").OnChangeFn<import("@tanstack/react-table").VisibilityState>;
+    columnVisibility: import("@tanstack/react-table").ColumnVisibilityState;
+    onColumnVisibilityChange: import("@tanstack/react-table").OnChangeFn<import("@tanstack/react-table").ColumnVisibilityState>;
     columnOrder: string[];
     onColumnOrderChange: import("@tanstack/react-table").OnChangeFn<string[]>;
     columnFilters: ColumnFiltersState;

package/dist/registry/use-data-table/useEntityColumns.d.ts

@@ -1,4 +1,4 @@
-import type { ColumnDef } from "@tanstack/react-table";
+import type { DataTableColumnDef } from "../../lib/table-features";
 import type { Column, ColumnDefWithAccessorKey, EntityRecord, ExtraColumn, VssEntity } from "./types";
 export interface UseEntityColumnsOptions<TRecord extends EntityRecord = EntityRecord> {
     entity: VssEntity;
@@ -10,5 +10,5 @@ export interface UseEntityColumnsOptions<TRecord extends EntityRecord = EntityRe
 export declare function useEntityColumns<TRecord extends EntityRecord = EntityRecord>({ entity, systemFields, columnOrder: columnOrderProp, extraColumns, columnOverrides, }: UseEntityColumnsOptions<TRecord>): {
     allColumns: Column[];
     allColumnKeys: string[];
-    columns: ColumnDef<TRecord>[];
+    columns: DataTableColumnDef<TRecord>[];
 };

package/dist/registry/use-data-table/useEntityDataTable.d.ts

@@ -12,11 +12,11 @@ export interface UseEntityDataTableOptions<TRecord extends EntityRecord = Entity
 export declare function useEntityDataTable<TRecord extends EntityRecord = EntityRecord>({ entity, storageKey: storageKeyProp, initialVisibleColumnCount, systemFields, columnOrder: columnOrderProp, extraColumns, columnOverrides, }: UseEntityDataTableOptions<TRecord>): {
     data: Record<string, unknown>[];
     isLoading: boolean;
-    columns: import("@tanstack/react-table").ColumnDef<TRecord>[];
+    columns: import("../data-table").ColumnDef<TRecord>[];
     sorting: import("@tanstack/react-table").SortingState;
     onSortingChange: import("@tanstack/react-table").OnChangeFn<import("@tanstack/react-table").SortingState>;
-    columnVisibility: import("@tanstack/react-table").VisibilityState;
-    onColumnVisibilityChange: import("@tanstack/react-table").OnChangeFn<import("@tanstack/react-table").VisibilityState>;
+    columnVisibility: import("@tanstack/react-table").ColumnVisibilityState;
+    onColumnVisibilityChange: import("@tanstack/react-table").OnChangeFn<import("@tanstack/react-table").ColumnVisibilityState>;
     columnOrder: string[];
     onColumnOrderChange: import("@tanstack/react-table").OnChangeFn<string[]>;
     columnFilters: ColumnFiltersState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-vertex",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "UiPath Apollo Vertex design system components",
   "license": "MIT",
   "keywords": [
@@ -58,7 +58,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-form": "^1.33.5",
     "@tanstack/react-store": "^0.11.0",
-    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-table": "^9.2.3",
     "@types/luxon": "^3.7.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package/skills/setup/SKILL.md

@@ -0,0 +1,123 @@
+---
+name: setup
+description: >
+  Use when adding @uipath/apollo-vertex to a React app, or when an app that
+  already depends on it is missing the Vertex stylesheet or the agent skill
+  setup. Covers peer dependencies, importing the Vertex CSS, setting up
+  TanStack Intent so agents load the Vertex skills, and adding a rule to the
+  project's agent instructions. Not for building UI: load
+  use-vertex-components for that.
+metadata:
+  purpose: >
+    Set up a React app to use Apollo Vertex and make its coding agents follow
+    the Vertex skills when they change UI.
+  type: lifecycle
+  library: '@uipath/apollo-vertex'
+sources:
+  - 'UiPath/apollo-ui:packages/apollo-vertex/package.json'
+  - 'UiPath/apollo-ui:packages/apollo-vertex/styles/tailwind.css'
+  - 'UiPath/apollo-ui:apps/apollo-vertex/content/docs/getting-started.mdx'
+---
+
+# Set up Apollo Vertex
+
+Work from the project root and use the project's package manager (npm, pnpm,
+yarn or bun) for every install. Do each step, then run the completion check.
+
+## 1. Install the package and its peers
+
+Install `@uipath/apollo-vertex` if the project doesn't have it yet.
+
+Then read `peerDependencies` in
+`node_modules/@uipath/apollo-vertex/package.json` and make sure the app has
+every package listed there, in a version that matches the range. Also install
+every package listed in `peerDependenciesMeta`, even the ones marked optional
+or missing from `peerDependencies`: the package entry imports them, so the
+app's bundler fails to resolve the entry without them.
+
+- If the app already has a peer in a version outside the range, tell the user
+  about the conflict instead of upgrading it on your own.
+- Some `@uipath` peers are not on the public npm registry. If installing one
+  fails with a 404 or an authentication error, stop and ask the user for access
+  to UiPath's package registry. Do not install look-alike packages from npm.
+- If the app doesn't use Tailwind yet, set it up for the app's bundler with
+  Tailwind's own install guide: install the integration, such as
+  `@tailwindcss/vite`, and register it in the bundler config. Installing it is
+  not enough.
+
+## 2. Import the stylesheet
+
+Add these lines once to the app's main CSS file, the one that sets up Tailwind,
+and remove its own `@import "tailwindcss";` line. If the app has no CSS file
+yet, create one and import it from the app's entry point:
+
+```css
+@import "@uipath/apollo-vertex/tailwind.css";
+@source "./";
+```
+
+`tailwind.css` includes Tailwind, the Vertex theme and the classes the Vertex
+components use. Keep `@source "./";` and adjust the path if the CSS file is not
+next to the app's sources. Without it, Tailwind drops the classes used in the
+app's own files.
+
+## 3. Set up TanStack Intent
+
+[TanStack Intent](https://tanstack.com/intent) finds the skills that ship in
+`node_modules` and tells agents to load them.
+
+1. Add `@tanstack/intent` as a dev dependency.
+2. Add this to the project's `package.json`. If an `intent.skills` list already
+   exists, add `@uipath/apollo-vertex` to it instead of replacing it:
+
+   ```json
+   {
+     "intent": {
+       "skills": ["@uipath/apollo-vertex"]
+     }
+   }
+   ```
+
+3. Run `intent install` through the package manager, for example
+   `npx intent install` or `pnpm exec intent install`. It writes a skill
+   loading block into `AGENTS.md`, or into another agent instructions file that
+   already has one.
+4. Tell the user that you allowed agents to load the `@uipath/apollo-vertex`
+   skills, and that they can change this with `intent install --review` in a
+   terminal.
+
+Without the `intent.skills` entry, `intent install` stops and asks for
+permissions in an interactive terminal, which an agent can't answer.
+
+## 4. Add the Vertex rule to the agent instructions
+
+`intent install` printed which file it wrote the skill loading block to. The
+block starts with `<!-- intent-skills:start -->`. Add this section to that same
+file, right after the block:
+
+```markdown
+## UI
+
+This app uses Apollo Vertex (`@uipath/apollo-vertex`) for all UI. Before
+building or changing UI, run `intent list` and load the matching
+`@uipath/apollo-vertex` skills, then follow them.
+```
+
+Write the `intent` command the way the skill loading block does, for example
+`npm exec --no -- intent list`.
+
+If that file is `AGENTS.md`, make sure Claude Code reads it too: if the
+project has a `CLAUDE.md`, it must import `AGENTS.md` with an `@AGENTS.md` line,
+and if there is no `CLAUDE.md`, create one that contains only `@AGENTS.md`.
+
+## Completion
+
+- `intent list` shows `@uipath/apollo-vertex` with the `use-vertex-components`
+  skill.
+- One agent instructions file has both the skill loading block and the UI
+  section.
+- The app builds, and a Vertex component such as `Button` renders with Vertex
+  styling.
+
+Then tell the user what you changed, and load `use-vertex-components` before
+building any UI.

package/dist/registry/use-data-table/useReactTableCompat.d.ts

@@ -1,13 +0,0 @@
-import { type Table, useReactTable } from "@tanstack/react-table";
-/**
- * React Compiler compatibility wrapper for useReactTable.
- *
- * useReactTable returns a mutable object with a stable reference. The React
- * Compiler caches values by reference, so child components that receive the
- * table instance never see a "change" and skip re-renders. Spreading into a
- * new object on every render gives children a fresh reference while keeping
- * all methods intact (they are closures, not prototype methods).
- *
- * @see https://github.com/facebook/react/pull/31820
- */
-export declare function useReactTableCompat<TData>(options: Parameters<typeof useReactTable<TData>>[0]): Table<TData>;

package/dist/registry/use-data-table/useReactTableCompat.js

@@ -1,9 +0,0 @@
-"use client";
-import { useReactTable } from "@tanstack/react-table";
-function useReactTableCompat(options) {
-    "use no memo";
-    return {
-        ...useReactTable(options)
-    };
-}
-export { useReactTableCompat };