@flamingo-stack/openframe-frontend-core 0.0.486-snapshot.20260727163255 → 0.0.486

package/src/stories/SearchableSelect.stories.tsx

@@ -1,139 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { useState } from 'react';
-import { SearchableSelect, type SearchableSelectProps } from '../components/ui/searchable-select';
-import { SquareAvatar } from '../components/ui/square-avatar';
-import { MonitorIcon, UserPlusIcon } from '../components/icons-v2-generated';
-
-const meta = {
-  title: 'UI/SearchableSelect',
-  component: SearchableSelect,
-  argTypes: {
-    align: {
-      control: 'select',
-      options: ['start', 'center', 'end'],
-    },
-    isLoading: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Select-style dropdown whose first item is a search field filtering the option list - ' +
-          'the ticket assignee "Search users..." pattern generalized for any entity. The default ' +
-          'trigger matches SelectTrigger; pass a custom trigger for icon-button use cases ' +
-          '(AssigneeDropdown compact is built on this component).',
-      },
-    },
-  },
-} satisfies Meta<typeof SearchableSelect>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const DEVICES = [
-  { value: '1', label: "John's MacBook Pro" },
-  { value: '2', label: 'Design-Studio-iMac' },
-  { value: '3', label: 'Front-Desk-PC' },
-  { value: '4', label: 'QA-Windows-11' },
-  { value: '5', label: 'Server-Room-Linux' },
-  { value: '6', label: "Olivia's ThinkPad" },
-  { value: '7', label: 'Warehouse-Scanner-01' },
-  { value: '8', label: 'Reception-Tablet' },
-];
-
-function ControlledSelect(props: Partial<SearchableSelectProps>) {
-  const [value, setValue] = useState<string | null>(props.value ?? null);
-  return (
-    <SearchableSelect
-      options={DEVICES}
-      placeholder="Select Device"
-      searchPlaceholder="Search for Device"
-      emptyText="No devices found"
-      {...props}
-      value={value}
-      onValueChange={setValue}
-    />
-  );
-}
-
-/** Default select-like trigger; the search input is the first dropdown item. */
-export const DeviceSelect: Story = {
-  args: {
-    options: DEVICES,
-    onValueChange: () => {},
-    placeholder: 'Select Device',
-    searchPlaceholder: 'Search for Device',
-    emptyText: 'No devices found',
-  },
-  render: args => (
-    <div className="w-[320px] bg-ods-bg p-[var(--spacing-system-mf)]">
-      <ControlledSelect {...args} />
-    </div>
-  ),
-};
-
-/** Options can carry a leading icon/avatar node. */
-export const WithOptionIcons: Story = {
-  args: {
-    options: DEVICES.map(d => ({
-      ...d,
-      icon: <MonitorIcon className="size-5 shrink-0 text-ods-text-secondary" />,
-    })),
-    onValueChange: () => {},
-    placeholder: 'Select Device',
-    searchPlaceholder: 'Search for Device',
-    emptyText: 'No devices found',
-  },
-  render: args => (
-    <div className="w-[320px] bg-ods-bg p-[var(--spacing-system-mf)]">
-      <ControlledSelect {...args} />
-    </div>
-  ),
-};
-
-/** Custom icon-button trigger - the AssigneeDropdown compact use case. */
-export const CustomTrigger: Story = {
-  args: {
-    options: ['Roman Smith', 'Mike Johnson', 'Olivia Chen', 'Ava Martinez'].map((name, i) => ({
-      value: String(i + 1),
-      label: name,
-      icon: <SquareAvatar alt={name} fallback={name} size="sm" variant="round" className="h-6 w-6 shrink-0" />,
-    })),
-    onValueChange: () => {},
-    searchPlaceholder: 'Search users...',
-    emptyText: 'No users found',
-    align: 'end',
-    contentClassName: 'w-72',
-    trigger: (
-      <button
-        type="button"
-        aria-label="Assign user"
-        className="size-8 rounded-full border border-ods-border flex items-center justify-center shrink-0 text-ods-text-secondary hover:text-ods-accent hover:border-ods-accent transition-colors"
-      >
-        <UserPlusIcon className="size-4" />
-      </button>
-    ),
-  },
-  render: args => (
-    <div className="flex w-[320px] justify-end bg-ods-bg p-[var(--spacing-system-mf)]">
-      <ControlledSelect {...args} />
-    </div>
-  ),
-};
-
-/** Loading state shown inside the dropdown. */
-export const Loading: Story = {
-  args: {
-    options: [],
-    onValueChange: () => {},
-    placeholder: 'Select Device',
-    searchPlaceholder: 'Search for Device',
-    isLoading: true,
-  },
-  render: args => (
-    <div className="w-[320px] bg-ods-bg p-[var(--spacing-system-mf)]">
-      <ControlledSelect {...args} />
-    </div>
-  ),
-};

package/src/stories/TestRun.stories.tsx

@@ -1,118 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { TestResultsSkeleton, TestRunResults, TimingStat } from '../components/ui/test-run';
-
-const meta = {
-  title: 'UI/TestRun',
-  component: TestRunResults,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Building blocks for live test-run panels ("run a query somewhere, stream tabular results back"): ' +
-          'timing stats, a one-row column skeleton, and a results table with always-visible headers and ' +
-          'horizontal scroll fades. Pair with useTestRunState, which wraps an app-owned campaign ' +
-          '(e.g. a Fleet live query hook) with the run/stop/reset state machine.',
-      },
-    },
-  },
-} satisfies Meta<typeof TestRunResults>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const RESULT_ROWS = [
-  {
-    'host display name': 'workstation-01',
-    pid: '1234',
-    name: 'chrome',
-    path: '/Applications/Google Chrome.app',
-    state: 'R',
-    uid: '501',
-    'resident size': '245760000',
-    threads: '42',
-  },
-  {
-    'host display name': 'workstation-01',
-    pid: '5678',
-    name: 'node',
-    path: '/usr/local/bin/node',
-    state: 'S',
-    uid: '501',
-    'resident size': '98304000',
-    threads: '12',
-  },
-];
-
-/** Finished run with rows: DataTable styling, headers on all breakpoints. */
-export const WithResults: Story = {
-  args: {
-    isActive: false,
-    displayRows: RESULT_ROWS,
-    firstError: null,
-  },
-  render: args => (
-    <div className="max-w-[720px] bg-ods-bg p-[var(--spacing-system-mf)]">
-      <TestRunResults {...args} />
-    </div>
-  ),
-};
-
-/** Running: one-row skeleton with fixed 160px columns. */
-export const Running: Story = {
-  args: {
-    isActive: true,
-    displayRows: [],
-    firstError: null,
-  },
-  render: args => (
-    <div className="max-w-[720px] bg-ods-bg p-[var(--spacing-system-mf)]">
-      <TestRunResults {...args} />
-    </div>
-  ),
-};
-
-/** Finished with zero rows: fixed-height empty state (no layout jump). */
-export const EmptyResult: Story = {
-  args: {
-    isActive: false,
-    displayRows: [],
-    firstError: null,
-  },
-  render: args => (
-    <div className="max-w-[720px] bg-ods-bg p-[var(--spacing-system-mf)]">
-      <TestRunResults {...args} />
-    </div>
-  ),
-};
-
-/** Finished with an error: the alert line replaces the empty state. */
-export const WithError: Story = {
-  args: {
-    isActive: false,
-    displayRows: [],
-    firstError: 'no such table: procesess (near "procesess": syntax error)',
-  },
-  render: args => (
-    <div className="max-w-[720px] bg-ods-bg p-[var(--spacing-system-mf)]">
-      <TestRunResults {...args} />
-    </div>
-  ),
-};
-
-/** Timing cells + standalone skeleton, as composed by app test panels. */
-export const TimingAndSkeleton: Story = {
-  args: {
-    isActive: true,
-    displayRows: [],
-    firstError: null,
-  },
-  render: () => (
-    <div className="flex max-w-[720px] flex-col gap-[var(--spacing-system-m)] bg-ods-bg p-[var(--spacing-system-mf)]">
-      <div className="flex items-center gap-[var(--spacing-system-m)]">
-        <TimingStat value="02:15 PM" label="Started" className="flex-1" />
-        <TimingStat value="00:00:05" label="Duration" className="flex-1" />
-      </div>
-      <TestResultsSkeleton />
-    </div>
-  ),
-};