@tcn/ui 0.7.0 → 0.8.1

package/src/layouts/rail/side/side.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
+
+import styles from './side.module.css';
+
+// UtilityBar
+export interface SideProps extends Omit<VStackProps, 'as'> {}
+
+export const Side = React.forwardRef<HTMLElement, SideProps>(function UtilityStrip(
+  { children, className, width = 'auto', ...props }: SideProps,
+  ref
+) {
+  return (
+    <VStack
+      ref={ref}
+      className={clsx(styles['side'], 'tcn-side', className)}
+      as="section"
+      width={width}
+      {...props}
+    >
+      {children}
+    </VStack>
+  );
+});

package/src/layouts/rail/utility_strip/utility_strip.module.css

@@ -0,0 +1,6 @@
+@layer tcn-system {
+  :where(.utility-strip) {
+    height: 100%;
+    min-width: 0;
+  }
+}

package/src/layouts/rail/utility_strip/utility_strip.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import type { Hierarchy, Size } from '../../../utils/index.js';
+import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
+
+import styles from './utility_strip.module.css';
+
+// UtilityBar
+export interface UtilityStripProps extends Omit<VStackProps, 'as'> {
+  hierarchy?: Hierarchy;
+  size?: Size;
+}
+
+export const UtilityStrip = React.forwardRef<HTMLElement, UtilityStripProps>(
+  function UtilityStrip(
+    {
+      children,
+      className,
+      width = 'auto',
+      hierarchy = 'secondary',
+      size = 'md',
+      ...props
+    }: UtilityStripProps,
+    ref
+  ) {
+    return (
+      <VStack
+        ref={ref}
+        as="header"
+        className={clsx(styles['utility-strip'], 'tcn-utility-strip', className)}
+        data-hierarchy={hierarchy}
+        data-size={size}
+        width={width}
+        {...props}
+      >
+        {children}
+      </VStack>
+    );
+  }
+);

package/src/layouts/scaffold/__stories__/scaffold.stories.tsx

@@ -0,0 +1,53 @@
+import { Scaffold } from '../scaffold.js';
+import { Header } from '../../header/header.js';
+import { UtilityBar } from '../../utility_bar/utility_bar.js';
+import { VBody } from '../../body/v_body.js';
+import { Footer } from '../../footer/footer.js';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { HStack } from '../../../stacks/h_stack.js';
+
+import styles from './scaffold_stories.module.css';
+
+const meta: Meta<typeof Scaffold> = {
+  title: 'Layouts/Scaffold',
+  component: Scaffold,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A scaffold component that lays out content in a vertical hierarchy.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Scaffold>;
+
+const Content = () => {
+  return <HStack className={styles.content} />;
+};
+
+export const Baseline: Story = {
+  args: {
+    height: '100vh',
+  },
+  render: () => (
+    <Scaffold height="100vh">
+      <Header className={styles.header}>Header</Header>
+      <UtilityBar className={styles.utilityBar}>Utility Bar</UtilityBar>
+      <VBody className={styles.body}>
+        <p>(V)Body</p>
+        <p>Fills available space</p>
+        <p>Scrolls vertically</p>
+        <Content />
+        <Content />
+        <Content />
+        <Content />
+        <Content />
+      </VBody>
+      <Footer className={styles.footer}>Footer</Footer>
+    </Scaffold>
+  ),
+};

package/src/layouts/scaffold/__stories__/scaffold_stories.module.css

@@ -0,0 +1,31 @@
+.header {
+  height: 56px;
+  background-color: #3b82f6;
+  color: white;
+}
+
+.utilityBar {
+  height: 40px;
+  background-color: #8b5cf6;
+  color: white;
+}
+
+.body {
+  background-color: #f1f5f9;
+}
+
+.footer {
+  height: 48px;
+  background-color: #10b981;
+  color: white;
+}
+
+.level {
+  background-color: #0ab4d2;
+  color: white;
+}
+
+.content {
+  background-color: #e5e7eb;
+  height: 100px;
+}

package/src/layouts/scaffold/scaffold.module.css

@@ -3,5 +3,9 @@
     width: 100%;
     height: 100%;
     overflow: auto;
+    :where(.tcn-main) {
+      height: auto;
+      background: black !important;
+    }
   }
 }

package/src/layouts/table/__stories__/mock_data.ts

@@ -0,0 +1,420 @@
+export enum SBTableDataStatus {
+  COMPLETED = 'completed',
+  IN_PROGRESS = 'in_progress',
+  NOT_STARTED = 'not_started',
+  FAILED = 'failed',
+}
+
+export const sb_tableStatusLabels: Record<SBTableDataStatus, string> = {
+  [SBTableDataStatus.NOT_STARTED]: 'Not Started',
+  [SBTableDataStatus.IN_PROGRESS]: 'In Progress',
+  [SBTableDataStatus.COMPLETED]: 'Completed',
+  [SBTableDataStatus.FAILED]: 'Failed',
+};
+
+export const sb_tableStatusColors: Record<SBTableDataStatus, string> = {
+  [SBTableDataStatus.COMPLETED]: 'var(--async-color-success)',
+  [SBTableDataStatus.IN_PROGRESS]: 'var(--async-color-pending)',
+  [SBTableDataStatus.NOT_STARTED]: 'var(--async-color-initial)',
+  [SBTableDataStatus.FAILED]: 'var(--async-color-failed)',
+};
+
+export interface SBTableData {
+  name: string;
+  description: string;
+  age: number;
+  date: Date;
+  status: SBTableDataStatus;
+  selected?: boolean;
+}
+
+export const sb_tableMockData: SBTableData[] = [
+  {
+    name: 'Project 1',
+    description: 'Description 1',
+    age: 10,
+    date: new Date('2021-01-01'),
+    status: SBTableDataStatus.COMPLETED,
+  },
+  {
+    name: 'Project 2',
+    description: 'Description 2',
+    age: 22,
+    date: new Date('2021-02-15'),
+    status: SBTableDataStatus.IN_PROGRESS,
+  },
+  {
+    name: 'Project 3',
+    description: 'Description 3',
+    age: 34,
+    date: new Date('2021-03-20'),
+    status: SBTableDataStatus.FAILED,
+  },
+  {
+    name: 'Project 4',
+    description: 'Description 4',
+    age: 18,
+    date: new Date('2021-04-10'),
+    status: SBTableDataStatus.COMPLETED,
+    selected: true,
+  },
+  {
+    name: 'Project 5',
+    description: 'Description 5',
+    age: 45,
+    date: new Date('2021-05-05'),
+    status: SBTableDataStatus.IN_PROGRESS,
+  },
+  {
+    name: 'Project 6',
+    description: 'Description 6',
+    age: 29,
+    date: new Date('2021-06-22'),
+    status: SBTableDataStatus.NOT_STARTED,
+  },
+  {
+    name: 'Project 7',
+    description: 'Description 7',
+    age: 31,
+    date: new Date('2021-07-14'),
+    status: SBTableDataStatus.IN_PROGRESS,
+  },
+  {
+    name: 'Project 8',
+    description: 'Description 8',
+    age: 27,
+    date: new Date('2021-08-30'),
+    status: SBTableDataStatus.FAILED,
+  },
+  {
+    name: 'Project 9',
+    description: 'Description 9',
+    age: 52,
+    date: new Date('2021-09-01'),
+    status: SBTableDataStatus.NOT_STARTED,
+  },
+  {
+    name: 'Project 10',
+    description: 'Description 10',
+    age: 19,
+    date: new Date('2021-10-12'),
+    status: SBTableDataStatus.IN_PROGRESS,
+  },
+  {
+    name: 'Project 11',
+    description: 'Description 11',
+    age: 38,
+    date: new Date('2021-11-08'),
+    status: SBTableDataStatus.IN_PROGRESS,
+  },
+  {
+    name: 'Project 12',
+    description: 'Description 12',
+    age: 41,
+    date: new Date('2021-12-25'),
+    status: SBTableDataStatus.NOT_STARTED,
+  },
+  {
+    name: 'Project 13',
+    description: 'Description 13',
+    age: 24,
+    date: new Date('2022-01-03'),
+    status: SBTableDataStatus.IN_PROGRESS,
+  },
+  {
+    name: 'Project 14',
+    description: 'Description 14',
+    age: 33,
+    date: new Date('2022-02-18'),
+    status: SBTableDataStatus.FAILED,
+  },
+  {
+    name: 'Project 15',
+    description: 'Description 15',
+    age: 56,
+    date: new Date('2022-03-09'),
+    status: SBTableDataStatus.NOT_STARTED,
+  },
+  {
+    name: 'Project 16',
+    description: 'Description 16',
+    age: 21,
+    date: new Date('2022-04-27'),
+    status: SBTableDataStatus.COMPLETED,
+  },
+  {
+    name: 'Project 17',
+    description: 'Description 17',
+    age: 47,
+    date: new Date('2022-05-11'),
+    status: SBTableDataStatus.IN_PROGRESS,
+  },
+  {
+    name: 'Project 18',
+    description: 'Description 18',
+    age: 30,
+    date: new Date('2022-06-06'),
+    status: SBTableDataStatus.NOT_STARTED,
+  },
+  {
+    name: 'Project 19',
+    description: 'Description 19',
+    age: 25,
+    date: new Date('2022-07-19'),
+    status: SBTableDataStatus.COMPLETED,
+  },
+  {
+    name: 'Project 20',
+    description: 'Description 20',
+    age: 39,
+    date: new Date('2022-08-02'),
+    status: SBTableDataStatus.IN_PROGRESS,
+  },
+  {
+    name: 'Project 21',
+    description: 'Description 21',
+    age: 43,
+    date: new Date('2022-09-14'),
+    status: SBTableDataStatus.FAILED,
+  },
+  {
+    name: 'Project 22',
+    description: 'Description 22',
+    age: 28,
+    date: new Date('2022-10-31'),
+    status: SBTableDataStatus.COMPLETED,
+  },
+  {
+    name: 'Project 23',
+    description: 'Description 23',
+    age: 35,
+    date: new Date('2022-11-20'),
+    status: SBTableDataStatus.IN_PROGRESS,
+  },
+  {
+    name: 'Project 24',
+    description: 'Description 24',
+    age: 50,
+    date: new Date('2022-12-01'),
+    status: SBTableDataStatus.NOT_STARTED,
+  },
+  {
+    name: 'Project 25',
+    description: 'Description 25',
+    age: 26,
+    date: new Date('2023-01-17'),
+    status: SBTableDataStatus.COMPLETED,
+  },
+  {
+    name: 'Project 26',
+    description: 'Description 26',
+    age: 44,
+    date: new Date('2023-02-28'),
+    status: SBTableDataStatus.IN_PROGRESS,
+  },
+  {
+    name: 'Project 27',
+    description: 'Description 27',
+    age: 37,
+    date: new Date('2023-03-12'),
+    status: SBTableDataStatus.FAILED,
+  },
+  {
+    name: 'Project 28',
+    description: 'Description 28',
+    age: 23,
+    date: new Date('2023-04-05'),
+    status: SBTableDataStatus.COMPLETED,
+  },
+  {
+    name: 'Project 29',
+    description: 'Description 29',
+    age: 48,
+    date: new Date('2023-05-22'),
+    status: SBTableDataStatus.IN_PROGRESS,
+  },
+  {
+    name: 'Project 30',
+    description: 'Description 30',
+    age: 32,
+    date: new Date('2023-06-15'),
+    status: SBTableDataStatus.NOT_STARTED,
+  },
+];
+
+/** Row shape for tables with grouped headers (e.g. Personal Info, Employment, Performance + Actions) */
+export interface SBTableGroupedRow {
+  firstName: string;
+  lastName: string;
+  department: string;
+  branch: string;
+  role: string;
+  q1: number;
+  q2: number;
+  q3: number;
+  q4: number;
+  score: number;
+  lastReview: string;
+}
+
+export const sb_tableGroupedMockData: SBTableGroupedRow[] = [
+  {
+    firstName: 'Jordan',
+    lastName: 'Lee',
+    branch: 'San Francisco',
+    department: 'Engineering',
+    role: 'Software Engineer',
+    q1: 92,
+    q2: 88,
+    q3: 95,
+    q4: 85,
+    score: (92 + 88 + 95 + 85) / 4,
+    lastReview: '2024-01-15',
+  },
+  {
+    firstName: 'Sam',
+    lastName: 'Kim',
+    branch: 'Seattle',
+    department: 'Product',
+    role: 'Product Manager',
+    q1: 88,
+    q2: 92,
+    q3: 85,
+    q4: 90,
+    score: (88 + 92 + 85 + 90) / 4,
+    lastReview: '2024-02-01',
+  },
+  {
+    firstName: 'Alex',
+    lastName: 'Chen',
+    branch: 'San Francisco',
+    department: 'Engineering',
+    role: 'Staff Engineer',
+    q1: 95,
+    q2: 90,
+    q3: 88,
+    q4: 92,
+    score: (95 + 90 + 88 + 92) / 4,
+    lastReview: '2024-01-20',
+  },
+  {
+    firstName: 'Morgan',
+    lastName: 'Taylor',
+    branch: 'Seattle',
+    department: 'Design',
+    role: 'UX Designer',
+    q1: 85,
+    q2: 90,
+    q3: 88,
+    q4: 92,
+    score: (85 + 90 + 88 + 92) / 4,
+    lastReview: '2023-12-10',
+  },
+  {
+    firstName: 'Riley',
+    lastName: 'Brown',
+    branch: 'San Francisco',
+    department: 'Engineering',
+    role: 'QA Engineer',
+    q1: 79,
+    q2: 82,
+    q3: 85,
+    q4: 88,
+    score: (79 + 82 + 85 + 88) / 4,
+    lastReview: '2024-02-15',
+  },
+  {
+    firstName: 'Casey',
+    lastName: 'Davis',
+    branch: 'Seattle',
+    department: 'Product',
+    role: 'Analyst',
+    q1: 82,
+    q2: 85,
+    q3: 88,
+    q4: 90,
+    score: (82 + 85 + 88 + 90) / 4,
+    lastReview: '2024-01-05',
+  },
+  {
+    firstName: 'Jamie',
+    lastName: 'Wilson',
+    branch: 'San Francisco',
+    department: 'Design',
+    role: 'Design Lead',
+    q1: 90,
+    q2: 92,
+    q3: 88,
+    q4: 90,
+    score: (90 + 92 + 88 + 90) / 4,
+    lastReview: '2024-02-20',
+  },
+  {
+    firstName: 'Quinn',
+    lastName: 'Martinez',
+    branch: 'Seattle',
+    department: 'Engineering',
+    role: 'DevOps',
+    q1: 87,
+    q2: 88,
+    q3: 89,
+    q4: 90,
+    score: (87 + 88 + 89 + 90) / 4,
+    lastReview: '2024-01-28',
+  },
+  {
+    firstName: 'Reese',
+    lastName: 'Anderson',
+    branch: 'San Francisco',
+    department: 'Product',
+    role: 'Intern',
+    q1: 76,
+    q2: 80,
+    q3: 84,
+    q4: 88,
+    score: (76 + 80 + 84 + 88) / 4,
+    lastReview: '2024-02-01',
+  },
+  {
+    firstName: 'Skyler',
+    lastName: 'Thomas',
+    branch: 'Seattle',
+    department: 'Design',
+    role: 'Researcher',
+    q1: 84,
+    q2: 88,
+    q3: 86,
+    q4: 89,
+    score: (84 + 88 + 86 + 89) / 4,
+    lastReview: '2023-11-30',
+  },
+];
+
+function buildStats(data: SBTableGroupedRow[]) {
+  const totals = data.reduce(
+    (acc, curr) => {
+      return {
+        q1: acc.q1 + curr.q1,
+        q2: acc.q2 + curr.q2,
+        q3: acc.q3 + curr.q3,
+        q4: acc.q4 + curr.q4,
+      };
+    },
+    { q1: 0, q2: 0, q3: 0, q4: 0 }
+  );
+
+  const averages = {
+    q1: totals.q1 / data.length,
+    q2: totals.q2 / data.length,
+    q3: totals.q3 / data.length,
+    q4: totals.q4 / data.length,
+  };
+
+  const year = averages.q1 + averages.q2 + averages.q3 + averages.q4;
+
+  const mean = year / 4;
+
+  return { totals, averages, year, mean };
+}
+
+export const sb_tableGroupedStats = buildStats(sb_tableGroupedMockData);