@shipfox/client-triggers 17.0.0 → 22.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-triggers",
   "license": "MIT",
-  "version": "17.0.0",
+  "version": "22.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -28,11 +28,11 @@
     "@swc/helpers": "^0.5.17",
     "@shipfox/api-triggers-dto": "9.0.2",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-projects": "17.0.0",
-    "@shipfox/client-shell": "17.0.0",
-    "@shipfox/client-ui": "17.0.0",
-    "@shipfox/integration-icons": "0.3.3",
-    "@shipfox/react-ui": "1.2.0"
+    "@shipfox/client-projects": "22.0.0",
+    "@shipfox/client-shell": "22.0.0",
+    "@shipfox/client-ui": "22.0.0",
+    "@shipfox/integration-icons": "0.3.5",
+    "@shipfox/react-ui": "2.1.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/events-filter-bar.tsx

@@ -2,6 +2,7 @@ import {Button} from '@shipfox/react-ui/button';
 import {Collapsible, CollapsibleContent, CollapsibleTrigger} from '@shipfox/react-ui/collapsible';
 import {Combobox, type ComboboxOption} from '@shipfox/react-ui/combobox';
 import {type DateRange, DateRangePicker} from '@shipfox/react-ui/date-range-picker';
+import {PanelHeader} from '@shipfox/react-ui/panel';
 import {Text} from '@shipfox/react-ui/typography';
 import {cn} from '@shipfox/react-ui/utils';
 import {type ReactNode, useState} from 'react';
@@ -95,84 +96,86 @@ export function EventsFilterBar({
   }
 
   return (
-    <Collapsible open={open} onOpenChange={setOpen}>
-      <div className="flex items-center justify-between gap-inline border-b border-border-neutral-base px-row py-row">
-        <CollapsibleTrigger asChild>
-          <Button
-            type="button"
-            variant="secondary"
-            size="sm"
-            iconLeft="filter3Line"
-            iconRight={open ? 'arrowUpSLine' : 'arrowDownSLine'}
-          >
-            {activeCount > 0 ? `Filters (${activeCount})` : 'Filters'}
-          </Button>
-        </CollapsibleTrigger>
-        {hasActiveFilters ? (
-          <Button type="button" size="2xs" variant="transparentMuted" onClick={onClear}>
-            Clear filters
-          </Button>
-        ) : null}
-      </div>
-      <CollapsibleContent>
-        <div className="grid grid-cols-1 gap-x-cluster gap-y-inline border-b border-border-neutral-base px-row py-row min-[520px]:grid-cols-2">
-          <FilterField label="Date" className="col-span-full">
-            <DateRangePicker
-              size="small"
-              className="w-full"
-              {...(dateRange ? {dateRange} : {})}
-              onDateRangeSelect={handleDateRange}
-              onClear={() => onFiltersChange({from: undefined, to: undefined})}
-              placeholder="Any date"
-            />
-          </FilterField>
-          <FilterField label="Result">
-            <Combobox
-              multiple
-              size="small"
-              aria-label="Filter by result"
-              options={RESULT_OPTIONS}
-              value={resultValue}
-              onValueChange={handleResultValue}
-              placeholder="All results"
-              emptyState="No results"
-              className="w-full"
-              maxVisibleChips={2}
-            />
-          </FilterField>
-          <FilterField label="Source">
-            <Combobox
-              multiple
-              size="small"
-              options={toOptions(sources)}
-              value={filters.source ?? []}
-              onValueChange={(value) =>
-                onFiltersChange({source: value.length > 0 ? value : undefined})
-              }
-              placeholder="All sources"
-              emptyState="No sources yet"
-              className="w-full"
-              maxVisibleChips={2}
-            />
-          </FilterField>
-          <FilterField label="Event">
-            <Combobox
-              multiple
-              size="small"
-              options={toOptions(events)}
-              value={filters.event ?? []}
-              onValueChange={(value) =>
-                onFiltersChange({event: value.length > 0 ? value : undefined})
-              }
-              placeholder="All events"
-              emptyState="No events yet"
-              className="w-full"
-              maxVisibleChips={2}
-            />
-          </FilterField>
+    <PanelHeader className="min-h-48 flex-col items-stretch gap-0 p-0">
+      <Collapsible open={open} onOpenChange={setOpen}>
+        <div className="flex items-center justify-between gap-inline px-row py-row">
+          <CollapsibleTrigger asChild>
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
+              iconLeft="filter3Line"
+              iconRight={open ? 'arrowUpSLine' : 'arrowDownSLine'}
+            >
+              {activeCount > 0 ? `Filters (${activeCount})` : 'Filters'}
+            </Button>
+          </CollapsibleTrigger>
+          {hasActiveFilters ? (
+            <Button type="button" size="2xs" variant="transparentMuted" onClick={onClear}>
+              Clear filters
+            </Button>
+          ) : null}
         </div>
-      </CollapsibleContent>
-    </Collapsible>
+        <CollapsibleContent>
+          <div className="grid grid-cols-1 gap-x-cluster gap-y-inline px-row py-row min-[520px]:grid-cols-2">
+            <FilterField label="Date" className="col-span-full">
+              <DateRangePicker
+                size="small"
+                className="w-full"
+                {...(dateRange ? {dateRange} : {})}
+                onDateRangeSelect={handleDateRange}
+                onClear={() => onFiltersChange({from: undefined, to: undefined})}
+                placeholder="Any date"
+              />
+            </FilterField>
+            <FilterField label="Result">
+              <Combobox
+                multiple
+                size="small"
+                aria-label="Filter by result"
+                options={RESULT_OPTIONS}
+                value={resultValue}
+                onValueChange={handleResultValue}
+                placeholder="All results"
+                emptyState="No results"
+                className="w-full"
+                maxVisibleChips={2}
+              />
+            </FilterField>
+            <FilterField label="Source">
+              <Combobox
+                multiple
+                size="small"
+                options={toOptions(sources)}
+                value={filters.source ?? []}
+                onValueChange={(value) =>
+                  onFiltersChange({source: value.length > 0 ? value : undefined})
+                }
+                placeholder="All sources"
+                emptyState="No sources yet"
+                className="w-full"
+                maxVisibleChips={2}
+              />
+            </FilterField>
+            <FilterField label="Event">
+              <Combobox
+                multiple
+                size="small"
+                options={toOptions(events)}
+                value={filters.event ?? []}
+                onValueChange={(value) =>
+                  onFiltersChange({event: value.length > 0 ? value : undefined})
+                }
+                placeholder="All events"
+                emptyState="No events yet"
+                className="w-full"
+                maxVisibleChips={2}
+              />
+            </FilterField>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </PanelHeader>
   );
 }
 

package/src/components/events-list-states.tsx

@@ -8,12 +8,16 @@ import {Link} from '@tanstack/react-router';
 
 export function EventsListSkeleton() {
   return (
-    <div className="flex flex-col gap-inline p-tight" role="status" aria-label="Loading events">
+    <div
+      className="flex flex-col divide-y divide-border-neutral-base"
+      role="status"
+      aria-label="Loading events"
+    >
       {Array.from({length: 8}).map((_, index) => (
         <div
           // biome-ignore lint/suspicious/noArrayIndexKey: skeleton row, stable position
           key={index}
-          className="flex h-20 items-center gap-cluster"
+          className="flex min-h-44 items-center gap-cluster px-row py-row"
         >
           <Skeleton className="size-6 shrink-0 rounded-full" />
           <Skeleton className="h-12 w-1/4" />
@@ -27,39 +31,37 @@ export function EventsListSkeleton() {
 
 export function EventsListEmpty({workspaceSlug}: {workspaceSlug?: string | undefined}) {
   return (
-    <div className="p-panel-compact">
-      <EmptyState
-        icon="pulseLine"
-        title="No events yet"
-        description="Events appear here once a connected integration delivers one or you fire a trigger."
-        action={
-          workspaceSlug ? (
-            <Button asChild size="sm" variant="secondary">
-              <Link to="/w/$workspaceSlug/settings/integrations" params={{workspaceSlug}}>
-                Configure integrations
-              </Link>
-            </Button>
-          ) : undefined
-        }
-      />
-    </div>
+    <EmptyState
+      icon="pulseLine"
+      title="No events yet"
+      description="Events appear here once a connected integration delivers one or you fire a trigger."
+      action={
+        workspaceSlug ? (
+          <Button asChild size="sm" variant="secondary">
+            <Link to="/w/$workspaceSlug/settings/integrations" params={{workspaceSlug}}>
+              Configure integrations
+            </Link>
+          </Button>
+        ) : undefined
+      }
+      variant="panel"
+    />
   );
 }
 
 export function EventsListNoMatches({onClear}: {onClear: () => void}) {
   return (
-    <div className="p-panel-compact">
-      <EmptyState
-        icon="filterOffLine"
-        title="No matching events"
-        description="No events match your current filters."
-        action={
-          <Button type="button" size="sm" variant="secondary" onClick={onClear}>
-            Clear filters
-          </Button>
-        }
-      />
-    </div>
+    <EmptyState
+      icon="filterOffLine"
+      title="No matching events"
+      description="No events match your current filters."
+      action={
+        <Button type="button" size="sm" variant="secondary" onClick={onClear}>
+          Clear filters
+        </Button>
+      }
+      variant="panel"
+    />
   );
 }
 

package/src/components/events-list.test.tsx

@@ -72,6 +72,15 @@ async function selectResult(label: string) {
 }
 
 describe('EventsList', () => {
+  test('renders the event list as a panel with a header strip', () => {
+    renderList(makeProps());
+
+    const panel = document.querySelector('[data-slot="panel"]');
+
+    expect(panel).toBeInTheDocument();
+    expect(panel?.querySelector('[data-slot="panel-header"]')).toBeInTheDocument();
+  });
+
   test('renders a row per event with its match summary', () => {
     renderList(makeProps());
 

package/src/components/events-list.tsx

@@ -1,5 +1,6 @@
 import {QueryLoadError} from '@shipfox/client-ui';
 import {Button} from '@shipfox/react-ui/button';
+import {Panel} from '@shipfox/react-ui/panel';
 import {Table, TableBody, TableHead, TableHeader, TableRow} from '@shipfox/react-ui/table';
 import {hasTriggerEventFilters} from '#core/trigger-event.js';
 import {EventsFilterBar} from './events-filter-bar.js';
@@ -40,7 +41,7 @@ export function EventsList({
   }
 
   return (
-    <div className="flex min-h-0 flex-col overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base">
+    <Panel className="min-h-0 overflow-hidden p-0">
       <EventsFilterBar
         filters={filters}
         onFiltersChange={onFiltersChange}
@@ -51,7 +52,9 @@ export function EventsList({
       />
 
       {query.isPending ? <EventsListSkeleton /> : null}
-      {!query.isPending ? <QueryLoadError query={query} subject="events" icon="pulseLine" /> : null}
+      {!query.isPending ? (
+        <QueryLoadError query={query} subject="events" icon="pulseLine" variant="panel" />
+      ) : null}
       {!query.isPending && refreshFailed ? <EventsListStaleError query={query} /> : null}
       {showEmptyState && !activeFilters ? <EventsListEmpty workspaceSlug={workspaceSlug} /> : null}
       {showEmptyState && activeFilters ? <EventsListNoMatches onClear={clearFilters} /> : null}
@@ -92,6 +95,6 @@ export function EventsList({
           ) : null}
         </>
       ) : null}
-    </div>
+    </Panel>
   );
 }

package/src/components/trigger-event-detail.test.tsx

@@ -103,6 +103,9 @@ describe('TriggerEventDetailView', () => {
     renderDetailView(makeEvent());
 
     expect(await screen.findByText('Triggered 1 workflow')).toBeInTheDocument();
+    expect(screen.getByRole('heading', {name: 'Matched workflows'})).toBeInTheDocument();
+    expect(screen.getByRole('heading', {name: 'Payload'})).toBeInTheDocument();
+    expect(document.querySelectorAll('[data-slot="panel"]')).toHaveLength(2);
     expect(screen.getByText('Deploy production')).toBeInTheDocument();
     expect(screen.getByRole('link', {name: DEPLOY_RUN_LINK_NAME})).toHaveAttribute(
       'href',