@astryxdesign/cli 0.6.3 → 0.6.4-canary.10dd683

package/assets/templates/blocks/components/Table/TableFloatingBulkActionsTable.doc.mjs

@@ -0,0 +1,19 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'useTableSelection',
+  name: 'Table: Floating Bulk Actions',
+  displayName: 'Table: Floating Bulk Actions',
+  description:
+    'The reusable TableSelectionToolbar inside a capped, self-contained scroll region for a long non-sticky table below metric cards. The caller-owned sticky placement keeps actions 16px from the example scrollport without moving the table when selection changes.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: [
+    'Table',
+    'TableSelectionToolbar',
+    'Button',
+    'ScrollableArea',
+  ],
+};

package/assets/templates/blocks/components/Table/TableFloatingBulkActionsTable.tsx

@@ -0,0 +1,139 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import * as stylex from '@stylexjs/stylex';
+import {Button} from '@astryxdesign/core/Button';
+import {ScrollableArea} from '@astryxdesign/core/ScrollableArea';
+import {
+  Table,
+  TableSelectionToolbar,
+  useTableSelection,
+  useTableSelectionState,
+  proportional,
+} from '@astryxdesign/core/Table';
+import type {TableColumn} from '@astryxdesign/core/Table';
+import {
+  colorVars,
+  radiusVars,
+  shadowVars,
+  sizeVars,
+  spacingVars,
+} from '@astryxdesign/core/theme/tokens.stylex';
+
+interface User extends Record<string, unknown> {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+}
+
+const baseUsers: Array<Pick<User, 'name' | 'email' | 'role'>> = [
+  {name: 'Alice', email: 'alice@example.com', role: 'Engineer'},
+  {name: 'Bob', email: 'bob@example.com', role: 'Designer'},
+  {name: 'Charlie', email: 'charlie@example.com', role: 'Manager'},
+  {name: 'Diana', email: 'diana@example.com', role: 'Engineer'},
+  {name: 'Eve', email: 'eve@example.com', role: 'Admin'},
+];
+
+const users: User[] = Array.from({length: 40}, (_, index) => {
+  const user = baseUsers[index % baseUsers.length];
+  return {...user, id: String(index + 1), name: `${user.name} ${index + 1}`};
+});
+
+const columns: TableColumn<User>[] = [
+  {key: 'name', header: 'Name', width: proportional(1)},
+  {key: 'email', header: 'Email', width: proportional(1)},
+  {key: 'role', header: 'Role', width: proportional(1)},
+];
+
+const styles = stylex.create({
+  page: {
+    maxBlockSize: 640,
+    isolation: 'isolate',
+    scrollbarGutter: 'stable',
+  },
+  metrics: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+    gap: spacingVars['--spacing-3'],
+    marginBlockEnd: spacingVars['--spacing-6'],
+  },
+  metricCard: {
+    padding: spacingVars['--spacing-4'],
+    borderRadius: radiusVars['--radius-container'],
+    backgroundColor: colorVars['--color-background-muted'],
+  },
+  metricLabel: {
+    display: 'block',
+    color: colorVars['--color-text-secondary'],
+  },
+  metricValue: {
+    display: 'block',
+    marginBlockStart: spacingVars['--spacing-1'],
+    color: colorVars['--color-text-primary'],
+  },
+  tableRegion: {
+    '--table-bulk-actions-space': `calc(${sizeVars['--size-element-sm']} + ${spacingVars['--spacing-2']} + ${spacingVars['--spacing-2']} + ${spacingVars['--spacing-4']})`,
+    position: 'relative',
+    paddingBlockStart: 'var(--table-bulk-actions-space)',
+  },
+  toolbar: {
+    position: 'sticky',
+    insetBlockStart: `calc(var(--table-bulk-actions-space) + ${spacingVars['--spacing-4']})`,
+    transform: 'translateY(calc(0px - var(--table-bulk-actions-space)))',
+    marginBlockEnd: `calc(${spacingVars['--spacing-4']} - var(--table-bulk-actions-space))`,
+    zIndex: 1,
+    borderRadius: radiusVars['--radius-element'],
+    boxShadow: shadowVars['--shadow-med'],
+  },
+});
+
+export default function TableFloatingBulkActionsTable() {
+  const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set());
+
+  const {selectionConfig, selectionState} = useTableSelectionState<User>({
+    data: users,
+    idKey: 'id',
+    selectedKeys,
+    setSelectedKeys,
+  });
+  const selectionPlugin = useTableSelection<User>(selectionConfig);
+
+  return (
+    <ScrollableArea
+      axis="block"
+      label="Bulk actions example"
+      overscroll="contain"
+      xstyle={styles.page}>
+      <div {...stylex.props(styles.metrics)}>
+        {[
+          ['Active users', '12,840'],
+          ['Selection rate', '18.4%'],
+          ['Pending reviews', '247'],
+        ].map(([label, value]) => (
+          <div key={label} {...stylex.props(styles.metricCard)}>
+            <span {...stylex.props(styles.metricLabel)}>{label}</span>
+            <strong {...stylex.props(styles.metricValue)}>{value}</strong>
+          </div>
+        ))}
+      </div>
+      <div {...stylex.props(styles.tableRegion)}>
+        <TableSelectionToolbar
+          selection={selectionState}
+          xstyle={styles.toolbar}
+          startContent={
+            <Button label="Approve" variant="ghost" onClick={() => {}} />
+          }
+        />
+        <Table
+          data={users}
+          columns={columns}
+          idKey="id"
+          plugins={{selection: selectionPlugin}}
+        />
+      </div>
+    </ScrollableArea>
+  );
+}

package/assets/templates/blocks/components/TimeInput/TimeInputConstrained.tsx

@@ -17,6 +17,7 @@ export default function TimeInputConstrained() {
         max={'22:00' as never}
         description="Evening seating: 5 PM – 10 PM"
         placeholder="Select reservation time"
+        presentation="adaptive-bottom-sheet"
         value={evening as never}
         onChange={setEvening as never}
         hasClear

package/assets/templates/blocks/components/Timer/TimerFormats.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Timer',
+  name: 'Timer — Formats',
+  displayName: 'Timer — Formats',
+  description:
+    'Elapsed compact units and stopwatch clock notation shown from the same start time.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Timer', 'Layout', 'Text'],
+};

package/assets/templates/blocks/components/Timer/TimerFormats.tsx

@@ -0,0 +1,34 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Timer} from '@astryxdesign/core/Timer';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function TimerFormats() {
+  const [startedAt] = useState(() => Date.now() - 3_753_000);
+
+  return (
+    <Stack direction="vertical" gap={3}>
+      <Stack direction="horizontal" gap={3} vAlign="center">
+        <Text type="supporting" color="secondary">
+          Elapsed
+        </Text>
+        <Timer startTime={startedAt} type="body" color="primary" />
+      </Stack>
+      <Stack direction="horizontal" gap={3} vAlign="center">
+        <Text type="supporting" color="secondary">
+          Clock
+        </Text>
+        <Timer
+          format="clock"
+          startTime={startedAt}
+          type="body"
+          color="primary"
+        />
+      </Stack>
+    </Stack>
+  );
+}

package/assets/templates/blocks/components/Timer/TimerInline.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Timer',
+  name: 'Timer — Inline',
+  displayName: 'Timer — Inline',
+  description:
+    'A Timer composed into status copy while inheriting the surrounding typography.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Timer', 'Text'],
+};

package/assets/templates/blocks/components/Timer/TimerInline.tsx

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Timer} from '@astryxdesign/core/Timer';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function TimerInline() {
+  return (
+    <Text type="body" color="primary">
+      Processing for <Timer type="inherit" color="inherit" />
+    </Text>
+  );
+}

package/assets/templates/blocks/components/Timer/TimerShowcase.doc.mjs

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

package/assets/templates/blocks/components/Timer/TimerShowcase.tsx

@@ -0,0 +1,47 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Timer} from '@astryxdesign/core/Timer';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function TimerShowcase() {
+  const [startedAt] = useState(() => Date.now() - 3_753_000);
+
+  return (
+    <Stack direction="vertical" gap={4}>
+      <Text type="large" color="primary" weight="semibold">
+        Processing
+      </Text>
+      <Stack direction="horizontal" gap={6} vAlign="center">
+        <Stack direction="vertical" gap={1}>
+          <Text type="supporting" color="secondary">
+            Elapsed
+          </Text>
+          <Timer
+            startTime={startedAt}
+            type="body"
+            size="xl"
+            color="primary"
+            weight="semibold"
+          />
+        </Stack>
+        <Stack direction="vertical" gap={1}>
+          <Text type="supporting" color="secondary">
+            Clock
+          </Text>
+          <Timer
+            format="clock"
+            startTime={startedAt}
+            type="body"
+            size="xl"
+            color="primary"
+            weight="semibold"
+          />
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+}

package/assets/templates/blocks/components/Timer/TimerTypography.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Timer',
+  name: 'Timer — Typography',
+  displayName: 'Timer — Typography',
+  description:
+    'Timer using its Timestamp-matched default typography and an emphasized override.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Timer', 'Layout', 'Text'],
+};

package/assets/templates/blocks/components/Timer/TimerTypography.tsx

@@ -0,0 +1,31 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Timer} from '@astryxdesign/core/Timer';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function TimerTypography() {
+  const [startedAt] = useState(() => Date.now() - 128_000);
+
+  return (
+    <Stack direction="vertical" gap={3}>
+      <Text type="supporting" color="secondary">
+        Default
+      </Text>
+      <Timer startTime={startedAt} />
+      <Text type="supporting" color="secondary">
+        Emphasized
+      </Text>
+      <Timer
+        startTime={startedAt}
+        type="body"
+        size="xl"
+        color="primary"
+        weight="semibold"
+      />
+    </Stack>
+  );
+}

package/assets/templates/blocks/components/Toolbar/ToolbarTableFilter.doc.mjs

@@ -4,11 +4,27 @@
 export const doc = {
   type: 'block',
   exampleFor: 'Toolbar',
+  alsoExampleFor: ['OverflowList'],
   name: 'Toolbar — Table Filter',
   displayName: 'Toolbar — Table Filter',
   description:
-    'A compact toolbar with a search input, Status and Priority filter selectors, and an overflow menu. Use above a data table to let users search, filter, and access view options.',
+    'Filter bar above a table: a search box leads the row, each field beside it is a closed trigger that doubles as its own filter chip — the bare field name unset, the whole clause once set — and the clauses fold from the end into a count as the row narrows, followed by a live result count, a clear all, and a column picker. Use to search, filter, and narrow flat rows of records such as jobs, orders, tickets, or users.',
   isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['Toolbar', 'Selector', 'TextInput', 'MoreMenu', 'Layout', 'Table'],
+  aspectRatio: 16 / 7,
+  componentsUsed: [
+    'Toolbar',
+    'Selector',
+    'TextInput',
+    'OverflowList',
+    'Popover',
+    'Button',
+    'Icon',
+    'Link',
+    'Text',
+    'CheckboxList',
+    'Layout',
+    'Section',
+    'Table',
+    'EmptyState',
+  ],
 };