@shipfox/react-ui 0.13.0 → 0.15.0

package/src/components/table/table.stories.data.ts

@@ -0,0 +1,117 @@
+/**
+ * Data types, generation functions, and sample data for Table stories
+ */
+
+export type JobData = {
+  id: string;
+  name: string;
+  total: number;
+  success: number;
+  failed: number;
+  neutral: number;
+  flaked: number;
+  failureRate: string;
+  flakeRate: string;
+  repository?: string;
+  branch?: string;
+};
+
+export type SearchJobData = {
+  id: string;
+  name: string;
+  total: number;
+  success: number;
+  failed: number;
+  status: 'active' | 'completed' | 'failed';
+  repository: string;
+  branch: string;
+};
+
+export type User = {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  status: 'active' | 'inactive';
+};
+
+/**
+ * Generate mock job data
+ */
+export const generateJobData = (count: number): JobData[] => {
+  return Array.from({length: count}, (_, i) => {
+    const total = 40 + (i % 20); // keeps totals in a reasonable range
+    const failed = i % 7;
+    const flaked = i % 5;
+    const neutral = i % 3;
+    const success = total - failed - flaked - neutral;
+    const failureRate = `${Math.round((failed / total) * 100)}%`;
+    const flakeRate = `${Math.round((flaked / total) * 100)}%`;
+    return {
+      id: `job-${i + 1}`,
+      name: 'Dependabot updates',
+      total,
+      success,
+      failed,
+      neutral,
+      flaked,
+      failureRate,
+      flakeRate,
+      repository: 'shipfox/tooling',
+      branch: 'main',
+    };
+  });
+};
+
+/**
+ * Generate mock search job data with varied properties
+ */
+export const generateSearchJobData = (count: number): SearchJobData[] => {
+  const jobNames = [
+    'Build & Deploy',
+    'Run Tests',
+    'Code Quality Check',
+    'Security Scan',
+    'Integration Tests',
+    'Performance Tests',
+    'Deploy to Staging',
+    'Deploy to Production',
+    'Database Migration',
+    'Cache Warm-up',
+  ];
+  const repositories = ['shipfox/tooling', 'shipfox/web', 'shipfox/api', 'shipfox/mobile'];
+  const branches = ['main', 'develop', 'staging', 'feat/new-feature'];
+  const statuses: Array<'active' | 'completed' | 'failed'> = ['active', 'completed', 'failed'];
+
+  return Array.from({length: count}, (_, i) => ({
+    id: `job-${i + 1}`,
+    name: jobNames[i % jobNames.length],
+    total: Math.floor(Math.random() * 100) + 20,
+    success: Math.floor(Math.random() * 80) + 10,
+    failed: Math.floor(Math.random() * 20),
+    status: statuses[i % statuses.length],
+    repository: repositories[i % repositories.length],
+    branch: branches[i % branches.length],
+  }));
+};
+
+/**
+ * Sample job data
+ */
+export const jobsData = generateJobData(100);
+
+/**
+ * Sample search job data
+ */
+export const searchJobsData = generateSearchJobData(50);
+
+/**
+ * Sample user data
+ */
+export const users: User[] = [
+  {id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'active'},
+  {id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'active'},
+  {id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'inactive'},
+  {id: '4', name: 'Alice Williams', email: 'alice@example.com', role: 'Editor', status: 'active'},
+  {id: '5', name: 'Charlie Brown', email: 'charlie@example.com', role: 'User', status: 'active'},
+];

package/src/components/table/table.stories.tsx

@@ -0,0 +1,256 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import type {ColumnDef} from '@tanstack/react-table';
+import {Search, SearchContent, SearchTrigger} from 'components/search';
+import {Header, Text} from 'components/typography';
+import {useMemo, useState} from 'react';
+import {Button} from '../button';
+import {Icon} from '../icon';
+import {SearchInline} from '../search/search-inline';
+import {DataTable} from './data-table';
+import {jobColumns, searchJobColumns, userColumns} from './table.stories.columns';
+import {JobsEmptyState, SearchModalContent} from './table.stories.components';
+import {type JobData, jobsData, searchJobsData, users} from './table.stories.data';
+
+const meta = {
+  title: 'Components/Table',
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Simple: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'extraLarge',
+    },
+  },
+  render: () => (
+    <div className="w-full min-h-screen bg-background-neutral-background p-24">
+      <DataTable columns={jobColumns.slice(0, 4)} data={jobsData.slice(0, 5)} pagination={false} />
+    </div>
+  ),
+};
+
+export const WithPagination: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'extraLarge',
+    },
+  },
+  render: () => (
+    <div className="w-full min-h-screen bg-background-neutral-background p-24">
+      <DataTable
+        columns={jobColumns}
+        data={jobsData}
+        pagination={true}
+        pageSize={10}
+        pageSizeOptions={[5, 10, 20, 50]}
+      />
+    </div>
+  ),
+};
+
+export const EmptyState: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'extraLarge',
+    },
+  },
+  render: () => (
+    <div className="w-full min-h-screen bg-background-neutral-background p-24">
+      <DataTable columns={jobColumns} data={[]} pagination={true} emptyState={<JobsEmptyState />} />
+    </div>
+  ),
+};
+
+export const UserTable: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'extraLarge',
+    },
+  },
+  render: () => (
+    <div className="w-full min-h-screen bg-background-neutral-background p-24">
+      <DataTable columns={userColumns} data={users} pagination={false} />
+    </div>
+  ),
+};
+
+export const CompactTable: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'extraLarge',
+    },
+  },
+  render: () => {
+    const compactColumns: ColumnDef<JobData>[] = [
+      jobColumns[0], // name
+      jobColumns[1], // total
+      jobColumns[6], // failureRate
+    ];
+
+    return (
+      <div className="w-full min-h-screen bg-background-neutral-background p-24">
+        <DataTable columns={compactColumns} data={jobsData.slice(0, 5)} pagination={false} />
+      </div>
+    );
+  },
+};
+
+export const JobsOverview: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'extraLarge',
+    },
+  },
+  render: () => {
+    const [searchQuery, setSearchQuery] = useState('');
+
+    const filteredData = useMemo(
+      () => jobsData.filter((job) => job.name.toLowerCase().includes(searchQuery.toLowerCase())),
+      [searchQuery],
+    );
+
+    return (
+      <div className="w-full min-h-screen bg-background-neutral-background p-24">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-12 sm:gap-0 p-12 border-t border-x border-border-neutral-base rounded-t-8 rounded-b-none bg-background-neutral-base">
+          <Header variant="h3" className="text-foreground-neutral-base">
+            Jobs overview
+          </Header>
+
+          <div className="flex items-center gap-12 sm:gap-16 w-full sm:w-auto">
+            <SearchInline
+              placeholder="Search..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onClear={() => setSearchQuery('')}
+              className="flex-1 sm:w-240"
+            />
+            <Button variant="secondary" aria-label="Insert column left" className="shrink-0">
+              <Icon name="insertColumnLeft" className="size-16 text-foreground-neutral-subtle" />
+            </Button>
+          </div>
+        </div>
+
+        <DataTable
+          columns={jobColumns}
+          data={filteredData}
+          pagination={true}
+          pageSize={10}
+          pageSizeOptions={[10, 20, 50, 100]}
+          className="rounded-t-none"
+        />
+      </div>
+    );
+  },
+};
+
+export const WithSearchModal: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'extraLarge',
+    },
+  },
+  render: () => {
+    function SearchModalDemo() {
+      const [open, setOpen] = useState(false);
+      const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
+
+      const filteredData = useMemo(
+        () =>
+          selectedJobId ? searchJobsData.filter((job) => job.id === selectedJobId) : searchJobsData,
+        [selectedJobId],
+      );
+
+      const selectedJob = useMemo(
+        () => (selectedJobId ? searchJobsData.find((job) => job.id === selectedJobId) : null),
+        [selectedJobId],
+      );
+
+      const handleSelectJob = (jobId: string) => {
+        setSelectedJobId(jobId);
+        setOpen(false);
+      };
+
+      const handleClearSelection = () => {
+        setSelectedJobId(null);
+      };
+
+      return (
+        <div className="w-full min-h-screen bg-background-neutral-background p-24">
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-12 sm:gap-0 p-12 border-t border-x border-border-neutral-base rounded-t-8 rounded-b-none bg-background-neutral-base">
+            <Header variant="h3" className="text-foreground-neutral-base">
+              Jobs Breakdown
+            </Header>
+
+            <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-12 sm:gap-16 w-full sm:w-auto">
+              {selectedJob && (
+                <Button
+                  variant="transparentMuted"
+                  size="sm"
+                  onClick={handleClearSelection}
+                  className="text-foreground-neutral-muted gap-4 w-full sm:w-auto justify-center sm:justify-start"
+                  iconRight="closeLine"
+                >
+                  Clear filter
+                </Button>
+              )}
+              <Search open={open} onOpenChange={setOpen} shortcutKey="meta+k" shouldFilter={false}>
+                <SearchTrigger placeholder="Filter jobs..." className="w-full sm:w-280" />
+                <SearchContent aria-describedby={undefined}>
+                  <SearchModalContent onSelectJob={handleSelectJob} />
+                </SearchContent>
+              </Search>
+            </div>
+          </div>
+
+          <DataTable
+            columns={searchJobColumns}
+            data={filteredData}
+            pagination={true}
+            pageSize={10}
+            pageSizeOptions={[10, 25, 50]}
+            className="rounded-t-none"
+          />
+        </div>
+      );
+    }
+
+    return <SearchModalDemo />;
+  },
+};
+
+export const WithRowSelection: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'extraLarge',
+    },
+  },
+  render: () => (
+    <div className="w-full min-h-screen bg-background-neutral-background p-24">
+      <div className="space-y-16">
+        <div>
+          <Header variant="h3" className="text-foreground-neutral-base mb-8">
+            Selectable Rows
+          </Header>
+          <Text size="sm" className="text-foreground-neutral-muted">
+            Use the checkboxes to select rows. The pagination footer shows the count of selected
+            rows.
+          </Text>
+        </div>
+        <DataTable
+          columns={jobColumns}
+          data={jobsData}
+          pagination={true}
+          pageSize={10}
+          pageSizeOptions={[5, 10, 20, 50]}
+          showSelectedCount={true}
+        />
+      </div>
+    </div>
+  ),
+};

package/src/components/table/table.tsx

@@ -0,0 +1,95 @@
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+
+function Table({className, ...props}: ComponentProps<'table'>) {
+  return (
+    <div className="relative w-full overflow-auto scrollbar">
+      <table
+        data-slot="table"
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({className, ...props}: ComponentProps<'thead'>) {
+  return <thead data-slot="table-header" className={cn(className)} {...props} />;
+}
+
+function TableBody({className, ...props}: ComponentProps<'tbody'>) {
+  return <tbody data-slot="table-body" className={cn(className)} {...props} />;
+}
+
+function TableFooter({className, ...props}: ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        'border-t border-border-neutral-base bg-background-neutral-base font-medium',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({className, ...props}: ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        'group/row border-b border-border-neutral-base transition-colors',
+        'last:border-b-0',
+        'hover:bg-background-neutral-hover',
+        'data-[selected=true]:bg-background-neutral-pressed data-[selected=true]:hover:bg-background-neutral-pressed',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({className, ...props}: ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        'h-40 px-16 text-left align-middle text-xs font-medium leading-20 text-foreground-neutral-subtle',
+        'bg-background-subtle-base',
+        '[&:has([role=checkbox])]:pr-0 [&:has([role=checkbox])]:px-12 [&:has([role=checkbox])]:w-0 [&:has([role=checkbox])]:pt-6',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({className, ...props}: ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        'px-12 py-10 align-middle text-sm leading-20 text-foreground-neutral-base',
+        'bg-background-neutral-base',
+        'group-hover/row:bg-background-neutral-hover',
+        'group-data-[selected=true]/row:bg-background-neutral-pressed!',
+        '[&:has([role=checkbox])]:pr-0 [&:has([role=checkbox])]:pt-14',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({className, ...props}: ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn('mt-16 text-sm text-foreground-neutral-muted', className)}
+      {...props}
+    />
+  );
+}
+
+export {Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption};

package/src/index.ts

@@ -1,3 +1,4 @@
+export {ShipfoxLoader} from 'shipfox-loader-react';
 export * from './components';
 export * from './hooks';
 export * from './utils';