@astryxdesign/cli 0.0.0-bootstrap.0 → 0.0.15

package/templates/blocks/components/TopNavMenu/TopNavMenuShowcase.tsx

@@ -0,0 +1,63 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  TopNav,
+  TopNavHeading,
+  TopNavItem,
+  TopNavMenu,
+} from '@astryxdesign/core/TopNav';
+import {Button} from '@astryxdesign/core/Button';
+import {
+  ChartBarIcon,
+  Cog6ToothIcon,
+  MagnifyingGlassIcon,
+  UsersIcon,
+} from '@heroicons/react/24/outline';
+
+export default function TopNavMenuShowcase() {
+  return (
+    <TopNav
+      style={{width: 600}}
+      label="Menu demo"
+      heading={<TopNavHeading heading="Platform" />}
+      startContent={
+        <>
+          <TopNavItem label="Home" href="#" isSelected />
+          <TopNavMenu
+            label="Tools"
+            items={[
+              {
+                title: 'Analytics',
+                description: 'View traffic and engagement metrics',
+                icon: <ChartBarIcon />,
+                href: '#analytics',
+              },
+              {
+                title: 'Team Members',
+                description: 'Manage your team and permissions',
+                icon: <UsersIcon />,
+                href: '#team',
+              },
+              {
+                title: 'Settings',
+                description: 'Configure your workspace',
+                icon: <Cog6ToothIcon />,
+                href: '#settings',
+              },
+            ]}
+          />
+        </>
+      }
+      endContent={
+        <Button
+          label="Search"
+          variant="ghost"
+          icon={<MagnifyingGlassIcon />}
+          isIconOnly
+        />
+      }
+    />
+  );
+}

package/templates/blocks/components/TreeList/TreeListFileTreeWithIcons.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: 'TreeList',
+  name: 'TreeList — File Tree With Icons',
+  displayName: 'TreeList — File Tree With Icons',
+  description:
+    'File browser tree with folder and document icons distinguishing directories from files.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['TreeList', 'Icon'],
+};

package/templates/blocks/components/TreeList/TreeListFileTreeWithIcons.tsx

@@ -0,0 +1,42 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TreeList} from '@astryxdesign/core/TreeList';
+import {Icon} from '@astryxdesign/core/Icon';
+import {FolderIcon, DocumentIcon} from '@heroicons/react/24/outline';
+
+export default function TreeListFileTreeWithIcons() {
+  return (
+    <TreeList
+      items={[
+        {
+          id: 'src',
+          label: 'src',
+          isExpanded: true,
+          startContent: <Icon icon={FolderIcon} size="sm" />,
+          children: [
+            {
+              id: 'app',
+              label: 'App.tsx',
+              onClick: () => {},
+              startContent: <Icon icon={DocumentIcon} size="sm" />,
+            },
+            {
+              id: 'index',
+              label: 'index.tsx',
+              onClick: () => {},
+              startContent: <Icon icon={DocumentIcon} size="sm" />,
+            },
+          ],
+        },
+        {
+          id: 'pkg',
+          label: 'package.json',
+          onClick: () => {},
+          startContent: <Icon icon={DocumentIcon} size="sm" />,
+        },
+      ]}
+    />
+  );
+}

package/templates/blocks/components/TreeList/TreeListInteractiveSettings.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: 'TreeList',
+  name: 'TreeList — Interactive Settings',
+  displayName: 'TreeList — Interactive Settings',
+  description:
+    'Settings tree with clickable items and a documentation link.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['TreeList', 'Icon'],
+};

package/templates/blocks/components/TreeList/TreeListInteractiveSettings.tsx

@@ -0,0 +1,40 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TreeList} from '@astryxdesign/core/TreeList';
+import {Icon} from '@astryxdesign/core/Icon';
+import {Cog6ToothIcon, ChevronRightIcon} from '@heroicons/react/24/outline';
+
+export default function TreeListInteractiveSettings() {
+  return (
+    <TreeList
+      items={[
+        {
+          id: 'settings',
+          label: 'Settings',
+          isExpanded: true,
+          startContent: <Icon icon={Cog6ToothIcon} size="sm" />,
+          children: [
+            {
+              id: 'general',
+              label: 'General',
+              onClick: () => {},
+            },
+            {
+              id: 'advanced',
+              label: 'Advanced',
+              onClick: () => {},
+            },
+          ],
+        },
+        {
+          id: 'docs',
+          label: 'Documentation',
+          href: '#',
+          endContent: <Icon icon={ChevronRightIcon} size="sm" />,
+        },
+      ]}
+    />
+  );
+}

package/templates/blocks/components/TreeList/TreeListMailboxTree.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: 'TreeList',
+  name: 'TreeList — Mailbox Tree',
+  displayName: 'TreeList — Mailbox Tree',
+  description:
+    'Email folder tree with unread badge counts.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['TreeList', 'Badge'],
+};

package/templates/blocks/components/TreeList/TreeListMailboxTree.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TreeList} from '@astryxdesign/core/TreeList';
+import {Badge} from '@astryxdesign/core/Badge';
+
+const noop = () => {};
+
+export default function TreeListMailboxTree() {
+  return (
+    <TreeList
+      items={[
+        {
+          id: 'inbox',
+          label: 'Inbox',
+          isExpanded: true,
+          endContent: <Badge label="3" />,
+          children: [
+            {
+              id: 'unread',
+              label: 'Unread',
+              onClick: noop,
+              endContent: <Badge label="3" />,
+            },
+            {id: 'starred', label: 'Starred', onClick: noop},
+          ],
+        },
+        {id: 'sent', label: 'Sent', onClick: noop},
+        {
+          id: 'drafts',
+          label: 'Drafts',
+          onClick: noop,
+          endContent: <Badge label="1" />,
+        },
+      ]}
+    />
+  );
+}

package/templates/blocks/components/TreeList/TreeListNavigationTree.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: 'TreeList',
+  name: 'TreeList — Navigation Tree',
+  displayName: 'TreeList — Navigation Tree',
+  description:
+    'Navigation tree with a selected item for the current page.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['TreeList'],
+};

package/templates/blocks/components/TreeList/TreeListNavigationTree.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TreeList} from '@astryxdesign/core/TreeList';
+
+const noop = () => {};
+
+export default function TreeListNavigationTree() {
+  return (
+    <TreeList
+      items={[
+        {
+          id: 'nav',
+          label: 'Navigation',
+          isExpanded: true,
+          children: [
+            {id: 'home', label: 'Home', onClick: noop},
+            {id: 'about', label: 'About', onClick: noop, isSelected: true},
+            {id: 'contact', label: 'Contact', onClick: noop},
+          ],
+        },
+      ]}
+    />
+  );
+}

package/templates/blocks/components/TreeList/TreeListShowcase.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: 'TreeList',
+  name: 'TreeList',
+  displayName: 'Tree List',
+  isReady: true,
+  aspectRatio: 1,
+  isShowcase: true,
+  componentsUsed: ['TreeList'],
+};

package/templates/blocks/components/TreeList/TreeListShowcase.tsx

@@ -0,0 +1,44 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TreeList} from '@astryxdesign/core/TreeList';
+
+const noop = () => {};
+
+export default function TreeListShowcase() {
+  return (
+    <TreeList
+      items={[
+        {
+          id: 'src',
+          label: 'src',
+          isExpanded: true,
+          children: [
+            {
+              id: 'components',
+              label: 'components',
+              children: [
+                {id: 'button', label: 'Button.tsx', onClick: noop},
+                {id: 'card', label: 'Card.tsx', onClick: noop},
+                {id: 'list', label: 'List.tsx', onClick: noop},
+              ],
+            },
+            {id: 'app', label: 'App.tsx', onClick: noop},
+            {id: 'index', label: 'index.tsx', onClick: noop},
+          ],
+        },
+        {
+          id: 'public',
+          label: 'public',
+          children: [
+            {id: 'favicon', label: 'favicon.ico', onClick: noop},
+            {id: 'index-html', label: 'index.html', onClick: noop},
+          ],
+        },
+        {id: 'pkg', label: 'package.json', onClick: noop},
+        {id: 'readme', label: 'README.md', onClick: noop},
+      ]}
+    />
+  );
+}

package/templates/blocks/components/TreeListBranches/TreeListBranchesShowcase.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: 'TreeListBranches',
+  name: 'TreeListBranches',
+  displayName: 'Tree List Branches',
+  description: 'Tree with expandable branches at multiple nesting levels.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['TreeList'],
+};

package/templates/blocks/components/TreeListBranches/TreeListBranchesShowcase.tsx

@@ -0,0 +1,64 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TreeList} from '@astryxdesign/core/TreeList';
+
+const noop = () => {};
+
+export default function TreeListBranchesShowcase() {
+  return (
+    <TreeList
+      items={[
+        {
+          id: 'design-system',
+          label: 'Design System',
+          isExpanded: true,
+          children: [
+            {
+              id: 'components',
+              label: 'Components',
+              isExpanded: true,
+              children: [
+                {
+                  id: 'inputs',
+                  label: 'Inputs',
+                  children: [
+                    {id: 'text-input', label: 'TextInput', onClick: noop},
+                    {id: 'checkbox', label: 'Checkbox', onClick: noop},
+                    {id: 'selector', label: 'Selector', onClick: noop},
+                  ],
+                },
+                {
+                  id: 'layout',
+                  label: 'Layout',
+                  children: [
+                    {id: 'stack', label: 'Stack', onClick: noop},
+                    {id: 'grid', label: 'Grid', onClick: noop},
+                  ],
+                },
+              ],
+            },
+            {
+              id: 'tokens',
+              label: 'Tokens',
+              children: [
+                {id: 'colors', label: 'Colors', onClick: noop},
+                {id: 'spacing', label: 'Spacing', onClick: noop},
+                {id: 'typography', label: 'Typography', onClick: noop},
+              ],
+            },
+          ],
+        },
+        {
+          id: 'utilities',
+          label: 'Utilities',
+          children: [
+            {id: 'hooks', label: 'Hooks', onClick: noop},
+            {id: 'helpers', label: 'Helpers', onClick: noop},
+          ],
+        },
+      ]}
+    />
+  );
+}

package/templates/blocks/components/TreeListItem/TreeListItemShowcase.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: 'TreeListItem',
+  name: 'TreeListItem',
+  displayName: 'Tree List Item',
+  description: 'Tree items with descriptions, icons, badges, selection, disabled state, and nested expand/collapse. TreeList is data-driven: no composed children API.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['TreeList', 'Badge', 'Icon', 'Layout', 'Text'],
+};

package/templates/blocks/components/TreeListItem/TreeListItemShowcase.tsx

@@ -0,0 +1,60 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TreeList} from '@astryxdesign/core/TreeList';
+import {Badge} from '@astryxdesign/core/Badge';
+import {Icon} from '@astryxdesign/core/Icon';
+
+const noop = () => {};
+
+export default function TreeListItemShowcase() {
+  return (
+    <TreeList
+      style={{width: 400}}
+      items={[
+        {
+          id: 'inbox',
+          label: 'Inbox',
+          description: '12 unread messages',
+          isExpanded: true,
+          startContent: <Icon icon="info" size="sm" />,
+          endContent: <Badge label="12" variant="info" />,
+          children: [
+            {
+              id: 'primary',
+              label: 'Primary',
+              isSelected: true,
+              startContent: <Icon icon="check" size="sm" />,
+              onClick: noop,
+            },
+            {
+              id: 'updates',
+              label: 'Updates',
+              endContent: <Badge label="4" variant="info" />,
+              onClick: noop,
+            },
+          ],
+        },
+        {
+          id: 'drafts',
+          label: 'Drafts',
+          description: '3 draft messages',
+          startContent: <Icon icon="clock" size="sm" />,
+          onClick: noop,
+        },
+        {
+          id: 'archive',
+          label: 'Archive',
+          onClick: noop,
+        },
+        {
+          id: 'spam',
+          label: 'Spam',
+          isDisabled: true,
+          startContent: <Icon icon="warning" size="sm" />,
+        },
+      ]}
+    />
+  );
+}

package/templates/blocks/components/Typeahead/TypeaheadLimitedResults.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: 'Typeahead',
+  name: 'Typeahead — Limited Results',
+  displayName: 'Typeahead — Limited Results',
+  description:
+    'Typeahead with a capped dropdown showing at most three results.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Typeahead', 'Center'],
+};

package/templates/blocks/components/Typeahead/TypeaheadLimitedResults.tsx

@@ -0,0 +1,42 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Typeahead} from '@astryxdesign/core/Typeahead';
+import type {SearchableItem, SearchSource} from '@astryxdesign/core/Typeahead';
+import {Center} from '@astryxdesign/core/Center';
+
+const items: SearchableItem[] = [
+  {id: '1', label: 'United States'},
+  {id: '2', label: 'United Kingdom'},
+  {id: '3', label: 'Canada'},
+  {id: '4', label: 'Australia'},
+  {id: '5', label: 'Germany'},
+  {id: '6', label: 'France'},
+  {id: '7', label: 'Japan'},
+  {id: '8', label: 'Brazil'},
+];
+
+const searchSource: SearchSource = {
+  search: (query: string) =>
+    items.filter(i => i.label.toLowerCase().includes(query.toLowerCase())),
+  bootstrap: () => items.slice(0, 5),
+};
+
+export default function TypeaheadLimitedResults() {
+  const [value, setValue] = useState<SearchableItem | null>(null);
+  return (
+    <Center width={320}>
+      <Typeahead
+        label="Country"
+        placeholder="Search countries..."
+        searchSource={searchSource}
+        value={value}
+        onChange={setValue}
+        hasEntriesOnFocus
+        maxMenuItems={3}
+      />
+    </Center>
+  );
+}

package/templates/blocks/components/Typeahead/TypeaheadSearchField.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: 'Typeahead',
+  name: 'Typeahead — Search Field',
+  displayName: 'Typeahead — Search Field',
+  description:
+    'Search input with icon and suggestions on focus.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Typeahead', 'Center'],
+};

package/templates/blocks/components/Typeahead/TypeaheadSearchField.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Typeahead} from '@astryxdesign/core/Typeahead';
+import type {SearchableItem, SearchSource} from '@astryxdesign/core/Typeahead';
+import {Center} from '@astryxdesign/core/Center';
+import {MagnifyingGlassIcon} from '@heroicons/react/24/outline';
+
+const items: SearchableItem[] = [
+  {id: '1', label: 'Olivia Martin'},
+  {id: '2', label: 'Jackson Lee'},
+  {id: '3', label: 'Isabella Nguyen'},
+  {id: '4', label: 'William Kim'},
+  {id: '5', label: 'Sofia Davis'},
+  {id: '6', label: 'Lucas Brown'},
+  {id: '7', label: 'Mia Wilson'},
+  {id: '8', label: 'Ethan Jones'},
+];
+
+const searchSource: SearchSource = {
+  search: (query: string) =>
+    items.filter(i => i.label.toLowerCase().includes(query.toLowerCase())),
+  bootstrap: () => items.slice(0, 5),
+};
+
+export default function TypeaheadSearchField() {
+  const [value, setValue] = useState<SearchableItem | null>(null);
+  return (
+    <Center width={320}>
+      <Typeahead
+        label="Team member"
+        placeholder="Search people..."
+        searchSource={searchSource}
+        value={value}
+        onChange={setValue}
+        startIcon={MagnifyingGlassIcon}
+        hasEntriesOnFocus
+      />
+    </Center>
+  );
+}

package/templates/blocks/components/Typeahead/TypeaheadShowcase.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: 'Typeahead',
+  name: 'Typeahead',
+  displayName: 'Typeahead',
+  isReady: true,
+  aspectRatio: 1,
+  isShowcase: true,
+  componentsUsed: ['Typeahead'],
+};

package/templates/blocks/components/Typeahead/TypeaheadShowcase.tsx

@@ -0,0 +1,35 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {Typeahead} from '@astryxdesign/core/Typeahead';
+import type {SearchableItem, SearchSource} from '@astryxdesign/core/Typeahead';
+
+const fruits: SearchableItem[] = [
+  {id: '1', label: 'Apple'},
+  {id: '2', label: 'Banana'},
+  {id: '3', label: 'Cherry'},
+  {id: '4', label: 'Date'},
+  {id: '5', label: 'Elderberry'},
+  {id: '6', label: 'Fig'},
+  {id: '7', label: 'Grape'},
+  {id: '8', label: 'Honeydew'},
+];
+
+const fruitSource: SearchSource = {
+  search: (query: string) =>
+    fruits.filter(f => f.label.toLowerCase().includes(query.toLowerCase())),
+  bootstrap: () => fruits.slice(0, 5),
+};
+
+export default function TypeaheadShowcase() {
+  return (
+    <div style={{width: 320}}>
+      <Typeahead
+        label="Fruit"
+        placeholder="Search fruits..."
+        searchSource={fruitSource}
+        value={null}
+        onChange={() => {}}
+      />
+    </div>
+  );
+}

package/templates/blocks/components/Typeahead/TypeaheadWithHelperText.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: 'Typeahead',
+  name: 'Typeahead — With Helper Text',
+  displayName: 'Typeahead — With Helper Text',
+  description:
+    'Typeahead with a description below the label.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Typeahead', 'Center'],
+};