@astryxdesign/lab 0.7.4-canary.3f6ea7d → 0.7.4-canary.88ec018

package/blocks/ListInputBudgetAllocation.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export default {
+  type: 'block',
+  name: 'Budget allocation',
+  displayName: 'Budget allocation',
+  description:
+    'Mixed control types in one record: a team Selector in a proportional column beside a percentage NumberInput in a fixed 132px column. Each team can appear once (a record error), the rows must total 100% (a list error), and Add stops at four teams.',
+  exampleFor: 'ListInput',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['ListInput', 'Selector', 'NumberInput', 'VStack'],
+};

package/blocks/ListInputBudgetAllocation.tsx

@@ -0,0 +1,132 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @input Controlled team allocation records
+ * @output A ListInput pairing a team Selector with a fixed-width percentage
+ *   NumberInput, checking that teams are unique and the total is 100%
+ * @position Copyable Lab ListInput example
+ */
+
+import {useState} from 'react';
+import {VStack} from '@astryxdesign/core/Layout';
+import {NumberInput} from '@astryxdesign/core/NumberInput';
+import {Selector} from '@astryxdesign/core/Selector';
+import {pixel, proportional} from '@astryxdesign/core/Table';
+import {ListInput, type ListInputColumn} from '@astryxdesign/lab';
+
+type Allocation = {id: string; team: string; percent: number | null};
+
+const TEAM_OPTIONS = [
+  {value: 'design', label: 'Design'},
+  {value: 'engineering', label: 'Engineering'},
+  {value: 'marketing', label: 'Marketing'},
+  {value: 'operations', label: 'Operations'},
+];
+
+const COLUMNS: ListInputColumn<Allocation>[] = [
+  {
+    key: 'team',
+    header: 'Team',
+    width: proportional(2, {minWidth: 180}),
+    renderInput: ({
+      item,
+      label,
+      isLabelHidden,
+      status,
+      statusVariant,
+      isDisabled,
+      isLoading,
+      updateItem,
+    }) => (
+      <Selector
+        label={label}
+        isLabelHidden={isLabelHidden}
+        options={TEAM_OPTIONS}
+        value={item.team}
+        placeholder="Choose a team"
+        onChange={team => updateItem({...item, team}, 'team')}
+        status={status}
+        statusVariant={statusVariant}
+        isDisabled={isDisabled || isLoading}
+      />
+    ),
+  },
+  {
+    key: 'percent',
+    header: 'Allocation',
+    width: pixel(132),
+    renderInput: ({
+      item,
+      label,
+      isLabelHidden,
+      status,
+      statusVariant,
+      isDisabled,
+      isLoading,
+      updateItem,
+    }) => (
+      <NumberInput
+        label={label}
+        isLabelHidden={isLabelHidden}
+        value={item.percent}
+        onChange={percent => updateItem({...item, percent}, 'percent')}
+        status={status}
+        statusVariant={statusVariant}
+        isDisabled={isDisabled || isLoading}
+        min={0}
+        max={100}
+        units="%"
+        isIntegerOnly
+      />
+    ),
+  },
+];
+
+export default function ListInputBudgetAllocation() {
+  const [allocations, setAllocations] = useState<Allocation[]>([
+    {id: 'design', team: 'design', percent: 35},
+    {id: 'engineering', team: 'engineering', percent: 40},
+    {id: 'marketing', team: 'marketing', percent: 15},
+  ]);
+  const total = allocations.reduce(
+    (sum, allocation) => sum + (allocation.percent ?? 0),
+    0,
+  );
+
+  return (
+    <VStack width={680} maxWidth="100%">
+      <ListInput<Allocation>
+        label="Quarterly budget allocation"
+        description="Assign each team once. The percentages must total 100%."
+        value={allocations}
+        onChange={setAllocations}
+        getItemKey={allocation => allocation.id}
+        createItem={() => ({id: crypto.randomUUID(), team: '', percent: null})}
+        columns={COLUMNS}
+        itemName="allocation"
+        isRequired
+        maxItems={4}
+        status={
+          total === 100
+            ? undefined
+            : {
+                type: 'error',
+                message: `Allocations must total 100%. Current total: ${total}%.`,
+              }
+        }
+        getItemStatus={allocation =>
+          allocation.team !== '' &&
+          allocations.some(
+            candidate =>
+              candidate.id !== allocation.id &&
+              candidate.team === allocation.team,
+          )
+            ? {type: 'error', message: 'Each team can only appear once.'}
+            : undefined
+        }
+      />
+    </VStack>
+  );
+}

package/blocks/ListInputFamilyMembers.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export default {
+  type: 'block',
+  name: 'Family member declaration',
+  displayName: 'Family member declaration',
+  description:
+    'Three simple fields per record, the recommended ceiling: a full legal name, a relationship Selector, and a DateInput in a fixed 176px column. Order is immaterial, so the list is not reorderable. At 640px or narrower each record stacks its fields with repeated labels.',
+  exampleFor: 'ListInput',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['ListInput', 'TextInput', 'Selector', 'DateInput', 'VStack'],
+};

package/blocks/ListInputFamilyMembers.tsx

@@ -0,0 +1,164 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @input Controlled family member records
+ * @output A three-field ListInput (name, relationship, date of birth) whose
+ *   records stack their fields when the list is narrow
+ * @position Copyable Lab ListInput example
+ */
+
+import {useState} from 'react';
+import type {ISODateString} from '@astryxdesign/core/Calendar';
+import {DateInput} from '@astryxdesign/core/DateInput';
+import {VStack} from '@astryxdesign/core/Layout';
+import {Selector} from '@astryxdesign/core/Selector';
+import {pixel, proportional} from '@astryxdesign/core/Table';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {ListInput, type ListInputColumn} from '@astryxdesign/lab';
+
+type FamilyMember = {
+  id: string;
+  fullName: string;
+  relationship: string;
+  dateOfBirth: ISODateString | undefined;
+};
+
+const RELATIONSHIP_OPTIONS = [
+  {value: 'spouse-or-partner', label: 'Spouse or partner'},
+  {value: 'child', label: 'Child'},
+  {value: 'parent', label: 'Parent'},
+  {value: 'sibling', label: 'Sibling'},
+  {value: 'other-dependent', label: 'Other dependent'},
+];
+
+const COLUMNS: ListInputColumn<FamilyMember>[] = [
+  {
+    key: 'fullName',
+    header: 'Full legal name',
+    width: proportional(2, {minWidth: 200}),
+    renderInput: ({
+      item,
+      label,
+      isLabelHidden,
+      status,
+      statusVariant,
+      isDisabled,
+      isLoading,
+      updateItem,
+    }) => (
+      <TextInput
+        label={label}
+        isLabelHidden={isLabelHidden}
+        value={item.fullName}
+        onChange={fullName => updateItem({...item, fullName}, 'fullName')}
+        status={status}
+        statusVariant={statusVariant}
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+      />
+    ),
+  },
+  {
+    key: 'relationship',
+    header: 'Relationship',
+    width: proportional(1.25, {minWidth: 160}),
+    renderInput: ({
+      item,
+      label,
+      isLabelHidden,
+      status,
+      statusVariant,
+      isDisabled,
+      isLoading,
+      updateItem,
+    }) => (
+      <Selector
+        label={label}
+        isLabelHidden={isLabelHidden}
+        options={RELATIONSHIP_OPTIONS}
+        value={item.relationship}
+        placeholder="Choose relationship"
+        onChange={relationship =>
+          updateItem({...item, relationship}, 'relationship')
+        }
+        status={status}
+        statusVariant={statusVariant}
+        isDisabled={isDisabled || isLoading}
+      />
+    ),
+  },
+  {
+    key: 'dateOfBirth',
+    header: 'Date of birth',
+    width: pixel(176),
+    renderInput: ({
+      item,
+      label,
+      isLabelHidden,
+      status,
+      statusVariant,
+      isDisabled,
+      isLoading,
+      updateItem,
+    }) => (
+      <DateInput
+        label={label}
+        isLabelHidden={isLabelHidden}
+        value={item.dateOfBirth}
+        onChange={dateOfBirth =>
+          updateItem({...item, dateOfBirth}, 'dateOfBirth')
+        }
+        status={status}
+        statusVariant={statusVariant}
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+      />
+    ),
+  },
+];
+
+export default function ListInputFamilyMembers() {
+  const [members, setMembers] = useState<FamilyMember[]>([
+    {
+      id: 'jordan',
+      fullName: 'Jordan Lee',
+      relationship: 'spouse-or-partner',
+      dateOfBirth: '1988-11-02',
+    },
+    {
+      id: 'alexandria',
+      fullName: 'Alexandria María de la Cruz',
+      relationship: 'child',
+      dateOfBirth: '2012-06-24',
+    },
+    {
+      id: 'grace',
+      fullName: 'Grace Lee',
+      relationship: 'parent',
+      dateOfBirth: '1958-04-17',
+    },
+  ]);
+
+  return (
+    <VStack width={680} maxWidth="100%">
+      <ListInput<FamilyMember>
+        label="Family member declaration"
+        description="Declare each immediate family member, their relationship to you, and their date of birth."
+        value={members}
+        onChange={setMembers}
+        getItemKey={member => member.id}
+        createItem={() => ({
+          id: crypto.randomUUID(),
+          fullName: '',
+          relationship: '',
+          dateOfBirth: undefined,
+        })}
+        columns={COLUMNS}
+        itemName="family member"
+        isRequired
+      />
+    </VStack>
+  );
+}

package/blocks/ListInputMailingList.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export default {
+  type: 'block',
+  name: 'Mailing list',
+  displayName: 'Mailing list',
+  description:
+    'A one-column list that starts empty, shows the empty state with Add still available, and stops adding at six addresses. A repeated address is a record error, a malformed address is a field error after blur, and removing the last address shows the required-list error.',
+  exampleFor: 'ListInput',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['ListInput', 'TextInput', 'VStack'],
+};

package/blocks/ListInputMailingList.tsx

@@ -0,0 +1,115 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @input Controlled subscriber records, starting empty
+ * @output A one-column ListInput of email addresses with a six-record limit,
+ *   duplicate detection, and blur validation
+ * @position Copyable Lab ListInput example
+ */
+
+import {useMemo, useState} from 'react';
+import {VStack} from '@astryxdesign/core/Layout';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {ListInput, type ListInputColumn} from '@astryxdesign/lab';
+
+type Subscriber = {id: string; email: string};
+
+function isValidEmail(email: string): boolean {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
+}
+
+export default function ListInputMailingList() {
+  const [subscribers, setSubscribers] = useState<Subscriber[]>([]);
+  const [hasChanged, setHasChanged] = useState(false);
+  // Field errors wait until the field has been left once.
+  const [touched, setTouched] = useState<ReadonlySet<string>>(() => new Set());
+
+  const columns = useMemo<ListInputColumn<Subscriber>[]>(
+    () => [
+      {
+        key: 'email',
+        header: 'Email address',
+        renderInput: ({
+          item,
+          label,
+          isLabelHidden,
+          status,
+          statusVariant,
+          isDisabled,
+          isLoading,
+          updateItem,
+        }) => (
+          <TextInput
+            type="email"
+            label={label}
+            isLabelHidden={isLabelHidden}
+            value={item.email}
+            placeholder="name@example.com"
+            onChange={email => updateItem({...item, email}, 'email')}
+            onBlur={() =>
+              setTouched(current =>
+                current.has(item.id) ? current : new Set(current).add(item.id),
+              )
+            }
+            status={status}
+            statusVariant={statusVariant}
+            isDisabled={isDisabled}
+            isLoading={isLoading}
+          />
+        ),
+      },
+    ],
+    [],
+  );
+
+  return (
+    <VStack width={680} maxWidth="100%">
+      <ListInput<Subscriber>
+        label="Mailing list"
+        description="Add up to six addresses."
+        value={subscribers}
+        onChange={nextSubscribers => {
+          setSubscribers(nextSubscribers);
+          setHasChanged(true);
+        }}
+        getItemKey={subscriber => subscriber.id}
+        createItem={() => ({id: crypto.randomUUID(), email: ''})}
+        columns={columns}
+        itemName="subscriber"
+        isRequired
+        maxItems={6}
+        status={
+          hasChanged && subscribers.length === 0
+            ? {type: 'error', message: 'Add at least one subscriber.'}
+            : undefined
+        }
+        getItemStatus={subscriber => {
+          const email = subscriber.email.trim().toLowerCase();
+          const isDuplicate =
+            email !== '' &&
+            subscribers.some(
+              candidate =>
+                candidate.id !== subscriber.id &&
+                candidate.email.trim().toLowerCase() === email,
+            );
+          return isDuplicate
+            ? {type: 'error', message: 'This address is already in the list.'}
+            : undefined;
+        }}
+        getFieldStatus={subscriber => {
+          if (!touched.has(subscriber.id)) {
+            return undefined;
+          }
+          if (subscriber.email.trim() === '') {
+            return {type: 'error', message: 'Enter an email address.'};
+          }
+          return isValidEmail(subscriber.email)
+            ? undefined
+            : {type: 'error', message: 'Enter a valid email address.'};
+        }}
+      />
+    </VStack>
+  );
+}

package/blocks/ListInputShowcase.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export default {
+  type: 'block',
+  name: 'Tag options',
+  displayName: 'Tag options',
+  description:
+    'A reorderable tag editor. Each record pairs a color Selector with a label TextInput; drag a grip or use the keyboard to reorder. Validation sits at the narrowest useful level: an empty label after blur is a field error, a disallowed color and label pair is a record error, and fewer than five tags is a list error.',
+  exampleFor: 'ListInput',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['ListInput', 'Selector', 'TextInput', 'VStack'],
+};

package/blocks/ListInputShowcase.tsx

@@ -0,0 +1,139 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @input Controlled tag records and blur-tracked fields
+ * @output A reorderable ListInput of tag options with field, record, and list
+ *   validation
+ * @position Lab ListInput's docsite showcase and copyable CLI block
+ */
+
+import {useMemo, useState} from 'react';
+import {VStack} from '@astryxdesign/core/Layout';
+import {Selector} from '@astryxdesign/core/Selector';
+import {proportional} from '@astryxdesign/core/Table';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {ListInput, type ListInputColumn} from '@astryxdesign/lab';
+
+type TagOption = {id: string; color: string; label: string};
+
+const COLOR_OPTIONS = [
+  {value: 'blue', label: 'Blue'},
+  {value: 'green', label: 'Green'},
+  {value: 'amber', label: 'Amber'},
+  {value: 'red', label: 'Red'},
+  {value: 'purple', label: 'Purple'},
+];
+
+const INITIAL_TAGS: TagOption[] = [
+  {id: 'tag-new', color: 'blue', label: 'New'},
+  {id: 'tag-blocked', color: 'green', label: 'Blocked'},
+  {id: 'tag-draft', color: 'amber', label: ''},
+  {id: 'tag-review', color: 'purple', label: 'In review'},
+];
+
+export default function ListInputShowcase() {
+  const [tags, setTags] = useState(INITIAL_TAGS);
+  // Field errors wait until the field has been left once.
+  const [touchedLabels, setTouchedLabels] = useState<ReadonlySet<string>>(
+    () => new Set(),
+  );
+
+  const columns = useMemo<ListInputColumn<TagOption>[]>(
+    () => [
+      {
+        key: 'color',
+        header: 'Color',
+        width: proportional(1, {minWidth: 120}),
+        renderInput: ({
+          item,
+          label,
+          isLabelHidden,
+          status,
+          statusVariant,
+          isDisabled,
+          updateItem,
+        }) => (
+          <Selector
+            label={label}
+            isLabelHidden={isLabelHidden}
+            options={COLOR_OPTIONS}
+            value={item.color}
+            onChange={color => updateItem({...item, color}, 'color')}
+            status={status}
+            statusVariant={statusVariant}
+            isDisabled={isDisabled}
+          />
+        ),
+      },
+      {
+        key: 'label',
+        header: 'Label',
+        width: proportional(2, {minWidth: 200}),
+        renderInput: ({
+          item,
+          label,
+          isLabelHidden,
+          status,
+          statusVariant,
+          isDisabled,
+          isLoading,
+          updateItem,
+        }) => (
+          <TextInput
+            label={label}
+            isLabelHidden={isLabelHidden}
+            value={item.label}
+            onChange={nextLabel =>
+              updateItem({...item, label: nextLabel}, 'label')
+            }
+            onBlur={() =>
+              setTouchedLabels(current =>
+                current.has(item.id) ? current : new Set(current).add(item.id),
+              )
+            }
+            status={status}
+            statusVariant={statusVariant}
+            isDisabled={isDisabled}
+            isLoading={isLoading}
+          />
+        ),
+      },
+    ],
+    [],
+  );
+
+  return (
+    <VStack width={680} maxWidth="100%">
+      <ListInput<TagOption>
+        label="Tag options"
+        description="Add at least five tags and drag rows to set their order."
+        value={tags}
+        onChange={setTags}
+        getItemKey={tag => tag.id}
+        createItem={() => ({id: crypto.randomUUID(), color: 'blue', label: ''})}
+        columns={columns}
+        itemName="tag"
+        isReorderable
+        status={
+          tags.length < 5
+            ? {type: 'error', message: 'Add at least five tag options.'}
+            : undefined
+        }
+        getItemStatus={tag =>
+          tag.color === 'green' && tag.label.trim().toLowerCase() === 'blocked'
+            ? {type: 'error', message: `“${tag.label}” cannot use green.`}
+            : undefined
+        }
+        getFieldStatus={(tag, columnKey) =>
+          columnKey === 'label' &&
+          touchedLabels.has(tag.id) &&
+          tag.label.trim() === ''
+            ? {type: 'error', message: 'Enter a label.'}
+            : undefined
+        }
+      />
+    </VStack>
+  );
+}

package/dist/ListInput/ListInput.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file ListInput.tsx
- * @input React, StyleX, Astryx field/list/button/icon/layer/empty-state primitives, compact size context, browser scroll geometry, programmatic theme tokens, and shared Lab reorder styles
+ * @input React, StyleX, Astryx field/list/button/icon/layer/empty-state primitives, the container-reveal hook, compact size context, browser scroll geometry, programmatic theme tokens, and shared Lab reorder styles
  * @output Exports ListInput and its controlled data, column, renderer, and change types
  * @position Lab experiment (RFC facebook/astryx#4531) for editing compact repeated records
  *

package/dist/ListInput/ListInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListInput.d.ts","sourceRoot":"","sources":["../../src/ListInput/ListInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ListInput.d.ts","sourceRoot":"","sources":["../../src/ListInput/ListInput.tsx"],"names":[],"mappings":"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"}