@astryxdesign/cli 0.0.0-bootstrap.0 → 0.1.0-canary.08d4cf4

package/templates/blocks/components/Table/TableRichCellTable.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Table',
+  name: 'Table — Rich Cell Content',
+  displayName: 'Table — Rich Cell Content',
+  description:
+    'Table with rich cell content using Link for emails and Badge for role labels.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Table', 'Badge', 'Link'],
+};

package/templates/blocks/components/Table/TableRichCellTable.tsx

@@ -0,0 +1,87 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Table, proportional, pixel} from '@astryxdesign/core/Table';
+import type {TableColumn} from '@astryxdesign/core/Table';
+import {Badge} from '@astryxdesign/core/Badge';
+import {Link} from '@astryxdesign/core/Link';
+
+interface User extends Record<string, unknown> {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  age: number;
+}
+
+const users: User[] = [
+  {
+    id: '1',
+    name: 'Alice Johnson',
+    email: 'alice@example.com',
+    role: 'Engineer',
+    age: 30,
+  },
+  {
+    id: '2',
+    name: 'Bob Smith',
+    email: 'bob@example.com',
+    role: 'Designer',
+    age: 25,
+  },
+  {
+    id: '3',
+    name: 'Charlie Brown',
+    email: 'charlie@example.com',
+    role: 'PM',
+    age: 35,
+  },
+  {
+    id: '4',
+    name: 'Diana Prince',
+    email: 'diana@example.com',
+    role: 'Engineer',
+    age: 28,
+  },
+  {
+    id: '5',
+    name: 'Eve Davis',
+    email: 'eve@example.com',
+    role: 'Designer',
+    age: 32,
+  },
+];
+
+const roleVariant: Record<string, 'blue' | 'purple' | 'green'> = {
+  Engineer: 'blue',
+  Designer: 'purple',
+  PM: 'green',
+};
+
+const columns: TableColumn<User>[] = [
+  {key: 'name', header: 'Name'},
+  {
+    key: 'email',
+    header: 'Email',
+    width: proportional(2),
+    renderCell: item => (
+      <Link href={`mailto:${item.email}`}>{item.email}</Link>
+    ),
+  },
+  {
+    key: 'role',
+    header: 'Role',
+    renderCell: item => (
+      <Badge
+        label={item.role}
+        variant={roleVariant[item.role] ?? 'neutral'}
+      />
+    ),
+  },
+  {key: 'age', header: 'Age', width: pixel(80)},
+];
+
+export default function TableRichCellTable() {
+  return <Table data={users} columns={columns} idKey="id" hasHover />;
+}

package/templates/blocks/components/Table/TableSelectableTable.doc.mjs

@@ -0,0 +1,16 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Table',
+  alsoExampleFor: ['useTableSelection', 'useTableSelectionState'],
+  alsoShowcaseFor: ['useTableSelection', 'useTableSelectionState'],
+  name: 'Table — Row Selection',
+  displayName: 'Table — Row Selection',
+  description:
+    'Table with row selection checkboxes and a select-all header checkbox.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Table'],
+};

package/templates/blocks/components/Table/TableSelectableTable.tsx

@@ -0,0 +1,54 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {
+  Table,
+  useTableSelection,
+  useTableSelectionState,
+  proportional,
+} from '@astryxdesign/core/Table';
+import type {TableColumn} from '@astryxdesign/core/Table';
+
+interface User extends Record<string, unknown> {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+}
+
+const users: User[] = [
+  {id: '1', name: 'Alice', email: 'alice@example.com', role: 'Engineer'},
+  {id: '2', name: 'Bob', email: 'bob@example.com', role: 'Designer'},
+  {id: '3', name: 'Charlie', email: 'charlie@example.com', role: 'Manager'},
+  {id: '4', name: 'Diana', email: 'diana@example.com', role: 'Engineer'},
+  {id: '5', name: 'Eve', email: 'eve@example.com', role: 'Admin'},
+];
+
+const columns: TableColumn<User>[] = [
+  {key: 'name', header: 'Name', width: proportional(1)},
+  {key: 'email', header: 'Email', width: proportional(2)},
+  {key: 'role', header: 'Role', width: proportional(1)},
+];
+
+export default function TableSelectableTable() {
+  const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set());
+
+  const {selectionConfig} = useTableSelectionState<User>({
+    data: users,
+    idKey: 'id',
+    selectedKeys,
+    setSelectedKeys,
+  });
+  const selectionPlugin = useTableSelection<User>(selectionConfig);
+
+  return (
+    <Table
+      data={users}
+      columns={columns}
+      idKey="id"
+      plugins={{selection: selectionPlugin}}
+    />
+  );
+}

package/templates/blocks/components/Table/TableShowcase.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Table',
+  name: 'Table',
+  displayName: 'Table',
+  description:
+    'Data-driven table with proportional and pixel column widths and hover highlighting.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  isShowcase: true,
+  componentsUsed: ['Table', 'Card'],
+};

package/templates/blocks/components/Table/TableShowcase.tsx

@@ -0,0 +1,54 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Table, proportional, pixel} from '@astryxdesign/core/Table';
+import {Card} from '@astryxdesign/core/Card';
+import type {TableColumn} from '@astryxdesign/core/Table';
+
+interface User extends Record<string, unknown> {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  age: number;
+}
+
+const users: User[] = [
+  {
+    id: '1',
+    name: 'Alice Johnson',
+    email: 'alice@example.com',
+    role: 'Engineer',
+    age: 30,
+  },
+  {
+    id: '2',
+    name: 'Bob Smith',
+    email: 'bob@example.com',
+    role: 'Designer',
+    age: 25,
+  },
+  {
+    id: '3',
+    name: 'Charlie Brown',
+    email: 'charlie@example.com',
+    role: 'PM',
+    age: 35,
+  },
+];
+
+const columns: TableColumn<User>[] = [
+  {key: 'name', header: 'Name', width: proportional(1)},
+  {key: 'email', header: 'Email', width: proportional(2)},
+  {key: 'role', header: 'Role', width: proportional(1)},
+  {key: 'age', header: 'Age', width: pixel(80)},
+];
+
+export default function TableShowcase() {
+  return (
+    <Card width={600}>
+      <Table data={users} columns={columns} idKey="id" hasHover />
+    </Card>
+  );
+}

package/templates/blocks/components/Table/TableSortableTable.doc.mjs

@@ -0,0 +1,16 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Table',
+  alsoExampleFor: ['useTableSortable'],
+  alsoShowcaseFor: ['useTableSortable'],
+  name: 'Table — Sortable Columns',
+  displayName: 'Table — Sortable Columns',
+  description:
+    'Table with sortable columns, click headers to sort ascending or descending.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Table'],
+};

package/templates/blocks/components/Table/TableSortableTable.tsx

@@ -0,0 +1,71 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  Table,
+  useTableSortable,
+  useTableSortableState,
+  proportional,
+  pixel,
+} from '@astryxdesign/core/Table';
+import type {TableColumn} from '@astryxdesign/core/Table';
+
+interface Employee extends Record<string, unknown> {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  age: number;
+}
+
+const employees: Employee[] = [
+  {
+    id: '1',
+    name: 'Alice',
+    email: 'alice@example.com',
+    role: 'Engineer',
+    age: 32,
+  },
+  {id: '2', name: 'Bob', email: 'bob@example.com', role: 'Designer', age: 28},
+  {
+    id: '3',
+    name: 'Charlie',
+    email: 'charlie@example.com',
+    role: 'Manager',
+    age: 45,
+  },
+  {
+    id: '4',
+    name: 'Diana',
+    email: 'diana@example.com',
+    role: 'Engineer',
+    age: 37,
+  },
+  {id: '5', name: 'Eve', email: 'eve@example.com', role: 'Admin', age: 29},
+];
+
+const columns: TableColumn<Employee>[] = [
+  {key: 'name', header: 'Name', width: proportional(1), sortable: true},
+  {key: 'email', header: 'Email', width: proportional(2), sortable: true},
+  {key: 'role', header: 'Role', width: proportional(1), sortable: true},
+  {key: 'age', header: 'Age', width: pixel(80), sortable: true},
+];
+
+export default function TableSortableTable() {
+  const {sortedData, sortConfig} = useTableSortableState<Employee>({
+    data: employees,
+    defaultSort: [{sortKey: 'name', direction: 'ascending'}],
+  });
+
+  const sortablePlugin = useTableSortable<Employee>(sortConfig);
+
+  return (
+    <Table
+      data={sortedData}
+      columns={columns}
+      idKey="id"
+      plugins={{sortable: sortablePlugin}}
+    />
+  );
+}

package/templates/blocks/components/Table/TableStripedTable.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Table',
+  name: 'Table — Striped Rows',
+  displayName: 'Table — Striped Rows',
+  description:
+    'Table with alternating row colors and hover highlighting for easy scanning.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Table'],
+};

package/templates/blocks/components/Table/TableStripedTable.tsx

@@ -0,0 +1,63 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Table, proportional, pixel} from '@astryxdesign/core/Table';
+import type {TableColumn} from '@astryxdesign/core/Table';
+
+interface User extends Record<string, unknown> {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  age: number;
+}
+
+const users: User[] = [
+  {
+    id: '1',
+    name: 'Alice Johnson',
+    email: 'alice@example.com',
+    role: 'Engineer',
+    age: 30,
+  },
+  {
+    id: '2',
+    name: 'Bob Smith',
+    email: 'bob@example.com',
+    role: 'Designer',
+    age: 25,
+  },
+  {
+    id: '3',
+    name: 'Charlie Brown',
+    email: 'charlie@example.com',
+    role: 'PM',
+    age: 35,
+  },
+  {
+    id: '4',
+    name: 'Diana Prince',
+    email: 'diana@example.com',
+    role: 'Engineer',
+    age: 28,
+  },
+  {
+    id: '5',
+    name: 'Eve Davis',
+    email: 'eve@example.com',
+    role: 'Designer',
+    age: 32,
+  },
+];
+
+const columns: TableColumn<User>[] = [
+  {key: 'name', header: 'Name'},
+  {key: 'email', header: 'Email', width: proportional(2)},
+  {key: 'role', header: 'Role'},
+  {key: 'age', header: 'Age', width: pixel(80)},
+];
+
+export default function TableStripedTable() {
+  return (<Table data={users} columns={columns} idKey="id" isStriped hasHover />);
+}

package/templates/blocks/components/Text/TextColors.doc.mjs

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Text',
+  name: 'Text — Colors',
+  displayName: 'Text — Colors',
+  description: 'All text color options (primary, secondary, disabled, placeholder, active) applied to body text to show their intended use.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Text', 'Stack'],
+};

package/templates/blocks/components/Text/TextColors.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Text} from '@astryxdesign/core/Text';
+import {Stack} from '@astryxdesign/core/Stack';
+
+const COLORS = [
+  {color: 'primary' as const, description: 'Primary — Default for headings and body text'},
+  {color: 'secondary' as const, description: 'Secondary — Supporting details and metadata'},
+  {color: 'active' as const, description: 'Active — Links, success states, and emphasis'},
+  {color: 'disabled' as const, description: 'Disabled — Unavailable or inactive content'},
+  {color: 'placeholder' as const, description: 'Placeholder — Empty field hints'},
+];
+
+export default function TextColors() {
+  return (
+    <Stack direction="vertical" gap={3}>
+      {COLORS.map(({color, description}) => (
+        <Text key={color} type="body" color={color}>
+          {description}
+        </Text>
+      ))}
+    </Stack>
+  );
+}

package/templates/blocks/components/Text/TextHeadingLevels.doc.mjs

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Text',
+  name: 'Text — Heading Levels',
+  displayName: 'Text — Heading Levels',
+  description: 'All 6 heading levels (h1 through h6) rendered with Heading to show the full type scale.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Text', 'Stack'],
+};

package/templates/blocks/components/Text/TextHeadingLevels.tsx

@@ -0,0 +1,20 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Heading} from '@astryxdesign/core/Text';
+import {Stack} from '@astryxdesign/core/Stack';
+
+const LEVELS = [1, 2, 3, 4, 5, 6] as const;
+
+export default function TextHeadingLevels() {
+  return (
+    <Stack direction="vertical" gap={3}>
+      {LEVELS.map((level) => (
+        <Heading key={level} level={level}>
+          Heading {level}
+        </Heading>
+      ))}
+    </Stack>
+  );
+}

package/templates/blocks/components/Text/TextInline.doc.mjs

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Text',
+  name: 'Text — Inline',
+  displayName: 'Text — Inline',
+  description: 'Mixing body and code text inline within a single line using the default inline display mode.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Text'],
+};

package/templates/blocks/components/Text/TextInline.tsx

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Text} from '@astryxdesign/core/Text';
+
+export default function TextInline() {
+  return (
+    <Text type="body" display="block">Design tokens are{' '}
+      <Text type="code">themeable</Text>
+      {' '}and shared across every surface.
+          </Text>
+  );
+}

package/templates/blocks/components/Text/TextShowcase.doc.mjs

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Text',
+  name: 'Text',
+  displayName: 'Text',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  isShowcase: true,
+  componentsUsed: ['Stack', 'Text'],
+};

package/templates/blocks/components/Text/TextShowcase.tsx

@@ -0,0 +1,18 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Text} from '@astryxdesign/core/Text';
+import {Stack} from '@astryxdesign/core/Stack';
+
+export default function TextShowcase() {
+  return (
+    <Stack direction="vertical" gap={2}>
+      <Text type="body">Body: The bulk of content</Text>
+      <Text type="large">Large: Emphasized content</Text>
+      <Text type="label">Label: Form and chart labels</Text>
+      <Text type="supporting">Supporting: Helper text</Text>
+      <Text type="code">Code: const x = 42;</Text>
+    </Stack>
+  );
+}

package/templates/blocks/components/Text/TextTruncation.doc.mjs

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Text',
+  name: 'Text — Truncation',
+  displayName: 'Text — Truncation',
+  description: 'Single-line and multi-line text truncation with ellipsis using maxLines in a width-constrained container.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Text'],
+};

package/templates/blocks/components/Text/TextTruncation.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Text} from '@astryxdesign/core/Text';
+
+const LONG_TEXT =
+  'The design system provides a consistent set of typography tokens, spacing scales, and color palettes that ensure every surface in the product feels cohesive regardless of which team built it.';
+
+const LINES = [
+  {maxLines: 1, label: '1 line'},
+  {maxLines: 2, label: '2 lines'},
+  {maxLines: 3, label: '3 lines'},
+];
+
+export default function TextTruncation() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+        maxWidth: 300,
+      }}>
+      {LINES.map(({maxLines, label}) => (
+        <div key={maxLines}>
+          <Text type="supporting" color="secondary" display="block">
+            {label}
+          </Text>
+          <div style={{border: '1px solid #ccc', padding: 8}}>
+            <Text type="body" maxLines={maxLines}>
+              {LONG_TEXT}
+            </Text>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/templates/blocks/components/Text/TextTypes.doc.mjs

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Text',
+  name: 'Text — Types',
+  displayName: 'Text — Types',
+  description: 'All 5 semantic text types (body, large, label, supporting, code) with their default styling from the theme.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Text', 'Stack'],
+};

package/templates/blocks/components/Text/TextTypes.tsx

@@ -0,0 +1,37 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Text} from '@astryxdesign/core/Text';
+import {Stack} from '@astryxdesign/core/Stack';
+
+const TYPES = [
+  {type: 'body' as const, label: 'Body text', sample: 'Body text for paragraphs and general content'},
+  {type: 'large' as const, label: 'Large text', sample: 'Large text for introductions and callouts'},
+  {type: 'label' as const, label: 'Label text', sample: 'Label text for form fields and section titles'},
+  {type: 'supporting' as const, label: 'Supporting text', sample: 'Supporting text for captions and metadata'},
+  {type: 'code' as const, label: 'Code text', sample: 'const theme = defineTheme({})'},
+  {type: 'body' as const, label: 'Strikethrough', sample: 'Body text with strikethrough decoration', hasStrikethrough: true},
+  {type: 'body' as const, label: 'Tabular numbers', sample: '1,234.56  78.90  100,000.00', hasTabularNumbers: true},
+];
+
+export default function TextTypes() {
+  return (
+    <Stack direction="vertical" gap={3}>
+      {TYPES.map(({type, label, sample, hasStrikethrough, hasTabularNumbers}) => (
+        <Stack key={label} direction="vertical" gap={0}>
+          <Text type="supporting" color="secondary">
+            {label}
+          </Text>
+          <Text
+            type={type}
+            display="block"
+            hasStrikethrough={hasStrikethrough}
+            hasTabularNumbers={hasTabularNumbers}>
+            {sample}
+          </Text>
+        </Stack>
+      ))}
+    </Stack>
+  );
+}

package/templates/blocks/components/Text/TextWeight.doc.mjs

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Text',
+  name: 'Text — Weight',
+  displayName: 'Text — Weight',
+  description: 'The 4 font weight variants (normal, medium, semibold, bold) applied to body text.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Text', 'Stack'],
+};