@astryxdesign/cli 0.4.2 → 0.4.3-canary.00bed29

package/assets/templates/blocks/components/BottomSheet/BottomSheetSwitcherShowcase.tsx

@@ -0,0 +1,221 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {BottomSheet, BottomSheetSwitcher} from '@astryxdesign/core/BottomSheet';
+import {Button} from '@astryxdesign/core/Button';
+import {CheckboxInput} from '@astryxdesign/core/CheckboxInput';
+import {Divider} from '@astryxdesign/core/Divider';
+import {Heading} from '@astryxdesign/core/Heading';
+import {Section} from '@astryxdesign/core/Section';
+import {HStack, VStack} from '@astryxdesign/core/Stack';
+import {Text} from '@astryxdesign/core/Text';
+import {RadioList, RadioListItem} from '@astryxdesign/core/RadioList';
+
+type NotificationSheetHeight = 'hug' | 'capped';
+
+interface NotificationOverviewSheetProps {
+  height: NotificationSheetHeight;
+  onCancel: () => void;
+  onContinue: () => void;
+}
+
+function NotificationOverviewSheet({
+  height,
+  onCancel,
+  onContinue,
+}: NotificationOverviewSheetProps) {
+  return (
+    <BottomSheet
+      sheetId="overview"
+      label="Set up notifications"
+      height={height}>
+      <Section padding={4}>
+        <VStack gap={4}>
+          <VStack gap={1}>
+            <Heading level={3}>Set up notifications</Heading>
+            <Text type="supporting" color="secondary">
+              Step 1 of 3
+            </Text>
+          </VStack>
+          <Divider />
+          <Text type="supporting" color="secondary">
+            Stay informed about activity that matters without checking back
+            throughout the day.
+          </Text>
+          <VStack gap={3}>
+            <VStack gap={1}>
+              <Text type="label">Important activity</Text>
+              <Text type="supporting" color="secondary">
+                Know when someone mentions you or needs your attention.
+              </Text>
+            </VStack>
+            <VStack gap={1}>
+              <Text type="label">Timely reminders</Text>
+              <Text type="supporting" color="secondary">
+                Get a reminder before work reaches its due date.
+              </Text>
+            </VStack>
+            <VStack gap={1}>
+              <Text type="label">Useful summaries</Text>
+              <Text type="supporting" color="secondary">
+                Catch up on anything you may have missed.
+              </Text>
+            </VStack>
+          </VStack>
+          <HStack gap={2} hAlign="end">
+            <Button label="Cancel" variant="secondary" onClick={onCancel} />
+            <Button label="Continue" onClick={onContinue} />
+          </HStack>
+        </VStack>
+      </Section>
+    </BottomSheet>
+  );
+}
+
+interface NotificationFrequencySheetProps {
+  height: NotificationSheetHeight;
+  onBack: () => void;
+  onContinue: () => void;
+}
+
+function NotificationFrequencySheet({
+  height,
+  onBack,
+  onContinue,
+}: NotificationFrequencySheetProps) {
+  const [frequency, setFrequency] = useState('daily');
+
+  return (
+    <BottomSheet
+      sheetId="frequency"
+      label="Notification frequency"
+      height={height}>
+      <Section padding={4}>
+        <VStack gap={4}>
+          <VStack gap={1}>
+            <Heading level={3}>How often?</Heading>
+            <Text type="supporting" color="secondary">
+              Step 2 of 3
+            </Text>
+          </VStack>
+          <Divider />
+          <RadioList
+            label="Notification frequency"
+            isLabelHidden
+            value={frequency}
+            onChange={setFrequency}>
+            <RadioListItem label="Immediately" value="immediately" />
+            <RadioListItem label="Daily" value="daily" />
+            <RadioListItem label="Weekly" value="weekly" />
+          </RadioList>
+          <HStack gap={2} hAlign="end">
+            <Button label="Back" variant="secondary" onClick={onBack} />
+            <Button label="Continue" onClick={onContinue} />
+          </HStack>
+        </VStack>
+      </Section>
+    </BottomSheet>
+  );
+}
+
+interface NotificationChannelsSheetProps {
+  height: NotificationSheetHeight;
+  onBack: () => void;
+  onFinish: () => void;
+}
+
+function NotificationChannelsSheet({
+  height,
+  onBack,
+  onFinish,
+}: NotificationChannelsSheetProps) {
+  const [email, setEmail] = useState(true);
+  const [pushNotifications, setPushNotifications] = useState(true);
+  const [textMessages, setTextMessages] = useState(false);
+
+  return (
+    <BottomSheet
+      sheetId="channels"
+      label="Notification channels"
+      height={height}>
+      <Section padding={4}>
+        <VStack gap={4}>
+          <VStack gap={1}>
+            <Heading level={3}>Where should we notify you?</Heading>
+            <Text type="supporting" color="secondary">
+              Step 3 of 3
+            </Text>
+          </VStack>
+          <Divider />
+          <Text type="supporting" color="secondary">
+            Choose any combination. You can change these preferences later.
+          </Text>
+          <VStack gap={2}>
+            <CheckboxInput label="Email" value={email} onChange={setEmail} />
+            <CheckboxInput
+              label="Push notifications"
+              value={pushNotifications}
+              onChange={setPushNotifications}
+            />
+            <CheckboxInput
+              label="Text messages"
+              value={textMessages}
+              onChange={setTextMessages}
+            />
+          </VStack>
+          <HStack gap={2} hAlign="end">
+            <Button label="Back" variant="secondary" onClick={onBack} />
+            <Button label="Finish" onClick={onFinish} />
+          </HStack>
+        </VStack>
+      </Section>
+    </BottomSheet>
+  );
+}
+
+interface MultiStepSwitcherExampleProps {
+  height: NotificationSheetHeight;
+  hasScrim?: boolean;
+}
+
+function MultiStepSwitcherExample({
+  height,
+  hasScrim = true,
+}: MultiStepSwitcherExampleProps) {
+  const [activeSheet, setActiveSheet] = useState<string | null>(null);
+
+  return (
+    <>
+      <Button
+        label="Set up notifications"
+        onClick={() => setActiveSheet('overview')}
+      />
+      <BottomSheetSwitcher
+        activeSheet={activeSheet}
+        onActiveSheetChange={setActiveSheet}
+        hasScrim={hasScrim}>
+        <NotificationOverviewSheet
+          height={height}
+          onCancel={() => setActiveSheet(null)}
+          onContinue={() => setActiveSheet('frequency')}
+        />
+        <NotificationFrequencySheet
+          height={height}
+          onBack={() => setActiveSheet('overview')}
+          onContinue={() => setActiveSheet('channels')}
+        />
+        <NotificationChannelsSheet
+          height={height}
+          onBack={() => setActiveSheet('frequency')}
+          onFinish={() => setActiveSheet(null)}
+        />
+      </BottomSheetSwitcher>
+    </>
+  );
+}
+
+export default function BottomSheetSwitcherShowcase() {
+  return <MultiStepSwitcherExample height="hug" />;
+}

package/assets/templates/blocks/components/ComplexSelector/ComplexSelectorDeadlinePicker.doc.mjs

@@ -0,0 +1,20 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ComplexSelector',
+  name: 'ComplexSelector — Deadline Picker',
+  displayName: 'Complex Selector — Deadline Picker',
+  description:
+    'A multi-step deadline field: pick a preset like Today or Next week, or switch to a custom date and time before applying. The popup stays open until the user commits, so the content owns the Apply action.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: [
+    'ComplexSelector',
+    'RadioList',
+    'DateInput',
+    'TimeInput',
+    'Button',
+  ],
+};

package/assets/templates/blocks/components/ComplexSelector/ComplexSelectorDeadlinePicker.tsx

@@ -0,0 +1,87 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {ComplexSelector} from '@astryxdesign/core/ComplexSelector';
+import {RadioList, RadioListItem} from '@astryxdesign/core/RadioList';
+import {DateInput} from '@astryxdesign/core/DateInput';
+import {TimeInput} from '@astryxdesign/core/TimeInput';
+import {Button} from '@astryxdesign/core/Button';
+import {VStack} from '@astryxdesign/core/Layout';
+
+type ISODate =
+  `${number}${number}${number}${number}-${number}${number}-${number}${number}`;
+type ISOTime = string & {readonly __brand: 'ISOTimeString'};
+
+interface Deadline {
+  preset: 'today' | 'next-week' | 'custom';
+  date: ISODate;
+  time: ISOTime;
+}
+
+const presetLabels: Record<Deadline['preset'], string> = {
+  today: 'Today',
+  'next-week': 'Next week',
+  custom: 'Custom date',
+};
+
+function formatDeadline(value: Deadline) {
+  if (value.preset === 'custom') {
+    return `${value.date} at ${value.time}`;
+  }
+  return presetLabels[value.preset];
+}
+
+export default function ComplexSelectorDeadlinePicker() {
+  const [value, setValue] = useState<Deadline>({
+    preset: 'today',
+    date: '2026-04-06' as ISODate,
+    time: '17:00' as ISOTime,
+  });
+
+  return (
+    <ComplexSelector<Deadline>
+      label="Deadline"
+      description="Choose a preset or set a custom date and time."
+      value={value}
+      onChange={setValue}
+      triggerLabel={formatDeadline(value)}
+      style={{width: 320}}>
+      {(selectedValue, onChange, close) => {
+        const set = (patch: Partial<Deadline>) =>
+          onChange({...selectedValue, ...patch});
+
+        return (
+          <VStack gap={4} style={{width: 320}}>
+            <RadioList
+              label="When is it due?"
+              value={selectedValue.preset}
+              onChange={preset => set({preset: preset as Deadline['preset']})}>
+              <RadioListItem label="Today" value="today" />
+              <RadioListItem label="Next week" value="next-week" />
+              <RadioListItem label="Custom date" value="custom" />
+            </RadioList>
+
+            {selectedValue.preset === 'custom' && (
+              <VStack gap={3}>
+                <DateInput
+                  label="Date"
+                  value={selectedValue.date}
+                  onChange={date => date && set({date})}
+                />
+                <TimeInput
+                  label="Time"
+                  value={selectedValue.time}
+                  onChange={time => time && set({time})}
+                />
+              </VStack>
+            )}
+
+            <Button label="Apply" variant="primary" onClick={close} />
+          </VStack>
+        );
+      }}
+    </ComplexSelector>
+  );
+}

package/assets/templates/blocks/components/ComplexSelector/ComplexSelectorShowcase.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ComplexSelector',
+  name: 'ComplexSelector',
+  displayName: 'Complex Selector',
+  description:
+    'A two-axis picker: choose a fruit and a ripeness level from one control. ComplexSelector owns the trigger, popover, and focus restore while the custom grid owns its keyboard semantics.',
+  isReady: true,
+  aspectRatio: 1,
+  isShowcase: true,
+  componentsUsed: ['ComplexSelector', 'Text'],
+};

package/assets/templates/blocks/components/ComplexSelector/ComplexSelectorShowcase.tsx

@@ -0,0 +1,199 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useEffect, useState} from 'react';
+import * as stylex from '@stylexjs/stylex';
+import {ComplexSelector} from '@astryxdesign/core/ComplexSelector';
+import {Text} from '@astryxdesign/core/Text';
+import {useGridFocus} from '@astryxdesign/core/hooks';
+import {
+  borderVars,
+  colorVars,
+  radiusVars,
+  spacingVars,
+} from '@astryxdesign/core/theme/tokens.stylex';
+
+type Fruit = 'Apple' | 'Pear' | 'Peach' | 'Plum';
+type Ripeness = 'Crisp' | 'Tender' | 'Juicy' | 'Peak';
+
+interface FruitValue {
+  fruit: Fruit;
+  ripeness: Ripeness;
+}
+
+const fruits: Array<{id: Fruit; emoji: string; description: string}> = [
+  {id: 'Apple', emoji: '🍎', description: 'Bright and balanced'},
+  {id: 'Pear', emoji: '🍐', description: 'Soft floral sweetness'},
+  {id: 'Peach', emoji: '🍑', description: 'Round summer flavor'},
+  {id: 'Plum', emoji: '🟣', description: 'Jammy and tart'},
+];
+
+const ripenessLevels: Array<{
+  id: Ripeness;
+  shortLabel: string;
+  description: string;
+}> = [
+  {id: 'Crisp', shortLabel: 'C', description: 'Snappy bite'},
+  {id: 'Tender', shortLabel: 'T', description: 'Easy bite'},
+  {id: 'Juicy', shortLabel: 'J', description: 'Full juice'},
+  {id: 'Peak', shortLabel: 'P', description: 'Most intense'},
+];
+
+const GRID_CELL_SELECTOR = '[role="gridcell"]';
+
+const styles = stylex.create({
+  grid: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: spacingVars['--spacing-1'],
+    minWidth: 280,
+  },
+  row: {
+    display: 'grid',
+    gridTemplateColumns: 'minmax(150px, 1fr) repeat(4, 44px)',
+    alignItems: 'center',
+    columnGap: spacingVars['--spacing-1'],
+  },
+  rowHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacingVars['--spacing-2'],
+    textAlign: 'start',
+    minWidth: 0,
+  },
+  emoji: {
+    fontSize: 18,
+    flexShrink: 0,
+  },
+  fruitText: {
+    display: 'flex',
+    flexDirection: 'column',
+    minWidth: 0,
+  },
+  cell: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 36,
+    borderWidth: borderVars['--border-width'],
+    borderStyle: 'solid',
+    borderColor: colorVars['--color-border'],
+    borderRadius: radiusVars['--radius-container'],
+    backgroundColor: colorVars['--color-background-card'],
+    color: colorVars['--color-text-secondary'],
+    fontFamily: 'inherit',
+    cursor: 'pointer',
+    ':hover': {
+      '@media (hover: hover)': {
+        borderColor: colorVars['--color-border-emphasized'],
+        color: colorVars['--color-text-primary'],
+      },
+    },
+  },
+  cellSelected: {
+    borderColor: colorVars['--color-accent'],
+    backgroundColor: colorVars['--color-accent'],
+    color: colorVars['--color-on-accent'],
+  },
+});
+
+function FruitRipenessGrid({
+  value,
+  onChange,
+}: {
+  value: FruitValue;
+  onChange: (value: FruitValue) => void;
+}) {
+  const {gridRef, handleKeyDown, handleFocus, focusCell} =
+    useGridFocus<HTMLDivElement>({
+      columns: ripenessLevels.length,
+      cellSelector: GRID_CELL_SELECTOR,
+      hasRovingTabIndex: true,
+    });
+
+  useEffect(() => {
+    const rowIndex = fruits.findIndex(f => f.id === value.fruit);
+    const columnIndex = ripenessLevels.findIndex(l => l.id === value.ripeness);
+    requestAnimationFrame(() => {
+      focusCell(
+        rowIndex >= 0 && columnIndex >= 0
+          ? rowIndex * ripenessLevels.length + columnIndex
+          : 0,
+      );
+    });
+  }, [focusCell, value]);
+
+  return (
+    <div
+      ref={gridRef}
+      role="grid"
+      aria-label="Fruit ripeness choices"
+      onKeyDown={handleKeyDown}
+      onFocus={handleFocus}
+      {...stylex.props(styles.grid)}>
+      {fruits.map(fruit => (
+        <div key={fruit.id} role="row" {...stylex.props(styles.row)}>
+          <div role="rowheader" {...stylex.props(styles.rowHeader)}>
+            <span aria-hidden="true" {...stylex.props(styles.emoji)}>
+              {fruit.emoji}
+            </span>
+            <span {...stylex.props(styles.fruitText)}>
+              <Text type="body">{fruit.id}</Text>
+              <Text type="supporting" color="secondary">
+                {fruit.description}
+              </Text>
+            </span>
+          </div>
+          {ripenessLevels.map(level => {
+            const isSelected =
+              value.fruit === fruit.id && value.ripeness === level.id;
+            return (
+              <button
+                key={`${fruit.id}-${level.id}`}
+                type="button"
+                role="gridcell"
+                aria-label={`${fruit.id}, ${level.id}: ${level.description}`}
+                aria-selected={isSelected || undefined}
+                tabIndex={isSelected ? 0 : -1}
+                onClick={() => onChange({fruit: fruit.id, ripeness: level.id})}
+                {...stylex.props(
+                  styles.cell,
+                  isSelected && styles.cellSelected,
+                )}>
+                {level.shortLabel}
+              </button>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default function ComplexSelectorShowcase() {
+  const [value, setValue] = useState<FruitValue>({
+    fruit: 'Apple',
+    ripeness: 'Juicy',
+  });
+
+  return (
+    <ComplexSelector<FruitValue>
+      label="Fruit blend"
+      description="Choose a fruit and ripeness in one control. Arrow keys move across the grid."
+      value={value}
+      onChange={setValue}
+      triggerLabel={`${value.fruit} · ${value.ripeness}`}
+      style={{width: 280}}>
+      {(selectedValue, onChange, close) => (
+        <FruitRipenessGrid
+          value={selectedValue}
+          onChange={nextValue => {
+            onChange(nextValue);
+            close();
+          }}
+        />
+      )}
+    </ComplexSelector>
+  );
+}

package/assets/templates/blocks/components/ComplexSelector/ComplexSelectorTreeSearch.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: 'ComplexSelector',
+  name: 'ComplexSelector — Tree Search',
+  displayName: 'Complex Selector — Tree Search',
+  description:
+    'A destination picker that combines a search field with a TreeList hierarchy. TreeList owns tree keyboard navigation; ComplexSelector owns the trigger, popover, and focus restore. Selecting a folder closes the popup.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['ComplexSelector', 'TextInput', 'TreeList'],
+};