@shipfox/react-ui 0.15.0 → 0.17.0

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

@@ -1,117 +0,0 @@
-/**
- * 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

@@ -1,256 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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/components/tabs/index.ts

@@ -1 +0,0 @@
-export * from './tabs';

package/src/components/tabs/tabs.stories.tsx

@@ -1,100 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {useState} from 'react';
-import {Tabs, TabsContent, TabsContents, TabsList, TabsTrigger} from '.';
-
-const meta = {
-  title: 'Components/Tabs',
-  component: Tabs,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Tabs>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {defaultValue: 'analytics'} as never,
-  render: () => (
-    <div className="bg-background-neutral-background p-24 w-[80vw]">
-      <Tabs defaultValue="analytics">
-        <TabsList className="gap-12 border-b border-neutral-strong">
-          <TabsTrigger value="analytics">Analytics</TabsTrigger>
-          <TabsTrigger value="jobs">Jobs</TabsTrigger>
-        </TabsList>
-      </Tabs>
-    </div>
-  ),
-};
-
-export const Controlled: Story = {
-  args: {value: 'analytics', onValueChange: () => undefined} as never,
-  render: () => {
-    const [value, setValue] = useState('analytics');
-    return (
-      <div className="bg-background-neutral-background p-24 w-[80vw]">
-        <Tabs value={value} onValueChange={setValue}>
-          <TabsList className="gap-12 border-b border-neutral-strong">
-            <TabsTrigger value="analytics">Analytics</TabsTrigger>
-            <TabsTrigger value="jobs">Jobs</TabsTrigger>
-          </TabsList>
-          <TabsContents>
-            <TabsContent value="analytics">
-              <div className="py-16">
-                <p className="text-foreground-neutral-base">
-                  Analytics content - Current value: {value}
-                </p>
-              </div>
-            </TabsContent>
-            <TabsContent value="jobs">
-              <div className="py-16">
-                <p className="text-foreground-neutral-base">
-                  Jobs content - Current value: {value}
-                </p>
-              </div>
-            </TabsContent>
-          </TabsContents>
-        </Tabs>
-      </div>
-    );
-  },
-};
-
-export const MultipleTabs: Story = {
-  args: {defaultValue: 'tab1'} as never,
-  render: () => (
-    <div className="bg-background-neutral-background p-24 w-[80vw]">
-      <Tabs defaultValue="tab1">
-        <TabsList className="gap-12 border-b border-neutral-strong">
-          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
-          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
-          <TabsTrigger value="tab3">Tab 3</TabsTrigger>
-          <TabsTrigger value="tab4">Tab 4</TabsTrigger>
-        </TabsList>
-        <TabsContents>
-          <TabsContent value="tab1">
-            <div className="py-16">
-              <p className="text-foreground-neutral-base">Content for Tab 1</p>
-            </div>
-          </TabsContent>
-          <TabsContent value="tab2">
-            <div className="py-16">
-              <p className="text-foreground-neutral-base">Content for Tab 2</p>
-            </div>
-          </TabsContent>
-          <TabsContent value="tab3">
-            <div className="py-16">
-              <p className="text-foreground-neutral-base">Content for Tab 3</p>
-            </div>
-          </TabsContent>
-          <TabsContent value="tab4">
-            <div className="py-16">
-              <p className="text-foreground-neutral-base">Content for Tab 4</p>
-            </div>
-          </TabsContent>
-        </TabsContents>
-      </Tabs>
-    </div>
-  ),
-};