@astryxdesign/cli 0.1.2-canary.deb5aa0 → 0.1.2-canary.df46db7

package/templates/blocks/components/TopNavHeading/TopNavHeadingBasic.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: 'TopNavHeading',
+  name: 'TopNavHeading — Basic',
+  displayName: 'TopNavHeading — Basic',
+  description:
+    'A product heading with a logo inside a TopNav, linked to the home page. Use as the leading brand element of a top navigation bar.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['TopNav', 'TopNavHeading', 'NavIcon', 'Icon'],
+};

package/templates/blocks/components/TopNavHeading/TopNavHeadingBasic.tsx

@@ -0,0 +1,22 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TopNav, TopNavHeading} from '@astryxdesign/core/TopNav';
+import {NavIcon} from '@astryxdesign/core/NavIcon';
+import {Icon} from '@astryxdesign/core/Icon';
+
+export default function TopNavHeadingBasic() {
+  return (
+    <TopNav
+      label="Product navigation"
+      heading={
+        <TopNavHeading
+          heading="Acme Platform"
+          logo={<NavIcon icon={<Icon icon="viewColumns" />} />}
+          headingHref="/"
+        />
+      }
+    />
+  );
+}

package/templates/blocks/components/TopNavItem/TopNavItemBasic.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: 'TopNavItem',
+  name: 'TopNavItem — Basic',
+  displayName: 'TopNavItem — Basic',
+  description:
+    'Navigation links inside a TopNav with one item marked as selected. Use for top-level pages of an application.',
+  isReady: true,
+  aspectRatio: 3,
+  componentsUsed: ['TopNav', 'TopNavHeading', 'TopNavItem'],
+};

package/templates/blocks/components/TopNavItem/TopNavItemBasic.tsx

@@ -0,0 +1,21 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TopNav, TopNavHeading, TopNavItem} from '@astryxdesign/core/TopNav';
+
+export default function TopNavItemBasic() {
+  return (
+    <TopNav
+      label="Main navigation"
+      heading={<TopNavHeading heading="App" />}
+      startContent={
+        <>
+          <TopNavItem label="Dashboard" href="#" isSelected />
+          <TopNavItem label="Projects" href="#" />
+          <TopNavItem label="Reports" href="#" />
+        </>
+      }
+    />
+  );
+}

package/templates/blocks/components/TopNavMegaMenu/TopNavMegaMenuBasic.doc.mjs

@@ -0,0 +1,20 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'TopNavMegaMenu',
+  name: 'TopNavMegaMenu — Basic',
+  displayName: 'TopNavMegaMenu — Basic',
+  description:
+    'A mega menu trigger inside a TopNav that opens a panel of rich link items. Use when a navigation section has multiple destinations worth describing.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: [
+    'TopNav',
+    'TopNavHeading',
+    'TopNavItem',
+    'TopNavMegaMenu',
+    'TopNavMegaMenuItem',
+  ],
+};

package/templates/blocks/components/TopNavMegaMenu/TopNavMegaMenuBasic.tsx

@@ -0,0 +1,46 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  TopNav,
+  TopNavHeading,
+  TopNavItem,
+  TopNavMegaMenu,
+  TopNavMegaMenuItem,
+} from '@astryxdesign/core/TopNav';
+import {RocketLaunchIcon, BookOpenIcon} from '@heroicons/react/24/outline';
+
+export default function TopNavMegaMenuBasic() {
+  return (
+    <TopNav
+      style={{width: 600}}
+      label="Main navigation"
+      heading={<TopNavHeading heading="DevTools" />}
+      startContent={
+        <>
+          <TopNavItem label="Overview" href="#" isSelected />
+          <TopNavMegaMenu
+            label="Products"
+            items={
+              <>
+                <TopNavMegaMenuItem
+                  title="Deploy"
+                  description="Ship to production in seconds"
+                  icon={<RocketLaunchIcon width={20} height={20} />}
+                  href="#deploy"
+                />
+                <TopNavMegaMenuItem
+                  title="Documentation"
+                  description="Guides, references, and tutorials"
+                  icon={<BookOpenIcon width={20} height={20} />}
+                  href="#docs"
+                />
+              </>
+            }
+          />
+        </>
+      }
+    />
+  );
+}

package/templates/blocks/components/TopNavMegaMenuFeaturedCard/TopNavMegaMenuFeaturedCardBasic.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: 'TopNavMegaMenuFeaturedCard',
+  name: 'TopNavMegaMenuFeaturedCard — Basic',
+  displayName: 'TopNavMegaMenuFeaturedCard — Basic',
+  description:
+    'A promotional card with a title, description, and call-to-action link. Pass it to the featured slot of a TopNavMegaMenu to highlight announcements.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['TopNavMegaMenuFeaturedCard'],
+};

package/templates/blocks/components/TopNavMegaMenuFeaturedCard/TopNavMegaMenuFeaturedCardBasic.tsx

@@ -0,0 +1,16 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TopNavMegaMenuFeaturedCard} from '@astryxdesign/core/TopNav';
+
+export default function TopNavMegaMenuFeaturedCardBasic() {
+  return (
+    <TopNavMegaMenuFeaturedCard
+      title="What's New"
+      description="Check out the latest features and improvements in the Q2 release."
+      linkLabel="Read the changelog"
+      linkHref="#changelog"
+    />
+  );
+}

package/templates/blocks/components/TopNavMegaMenuItem/TopNavMegaMenuItemBasic.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: 'TopNavMegaMenuItem',
+  name: 'TopNavMegaMenuItem — Basic',
+  displayName: 'TopNavMegaMenuItem — Basic',
+  description:
+    'Rich link items with an icon, title, and description. Use inside the items slot of a TopNavMegaMenu to describe each destination.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['TopNavMegaMenuItem', 'Grid'],
+};

package/templates/blocks/components/TopNavMegaMenuItem/TopNavMegaMenuItemBasic.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TopNavMegaMenuItem} from '@astryxdesign/core/TopNav';
+import {Grid} from '@astryxdesign/core/Grid';
+import {BoltIcon, CircleStackIcon} from '@heroicons/react/24/outline';
+
+export default function TopNavMegaMenuItemBasic() {
+  return (
+    <Grid columns={2} gap={2}>
+      <TopNavMegaMenuItem
+        title="Edge Functions"
+        description="Run serverless code at the network edge"
+        icon={<BoltIcon width={20} height={20} />}
+        href="#edge"
+      />
+      <TopNavMegaMenuItem
+        title="Storage"
+        description="Object and file storage for your application"
+        icon={<CircleStackIcon width={20} height={20} />}
+        href="#storage"
+      />
+    </Grid>
+  );
+}

package/templates/blocks/components/TopNavMenu/TopNavMenuBasic.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: 'TopNavMenu',
+  name: 'TopNavMenu — Basic',
+  displayName: 'TopNavMenu — Basic',
+  description:
+    'A dropdown menu inside a TopNav built from an items array with icons and descriptions. Use to group related destinations under a single trigger.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['TopNav', 'TopNavHeading', 'TopNavItem', 'TopNavMenu'],
+};

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

@@ -0,0 +1,43 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  TopNav,
+  TopNavHeading,
+  TopNavItem,
+  TopNavMenu,
+} from '@astryxdesign/core/TopNav';
+import {ChartBarIcon, Cog6ToothIcon} from '@heroicons/react/24/outline';
+
+export default function TopNavMenuBasic() {
+  return (
+    <TopNav
+      style={{width: 600}}
+      label="Main navigation"
+      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: 'Settings',
+                description: 'Configure your workspace',
+                icon: <Cog6ToothIcon />,
+                href: '#settings',
+              },
+            ]}
+          />
+        </>
+      }
+    />
+  );
+}

package/templates/blocks/components/TypeaheadItem/TypeaheadItemBasic.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: 'TypeaheadItem',
+  name: 'TypeaheadItem — Basic',
+  displayName: 'TypeaheadItem — Basic',
+  description:
+    'A typeahead whose results are rendered with TypeaheadItem, adding a secondary description below each label. Use inside renderItem to keep custom results visually consistent.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Typeahead', 'TypeaheadItem', 'Center'],
+};

package/templates/blocks/components/TypeaheadItem/TypeaheadItemBasic.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Typeahead, TypeaheadItem} from '@astryxdesign/core/Typeahead';
+import type {SearchableItem, SearchSource} from '@astryxdesign/core/Typeahead';
+import {Center} from '@astryxdesign/core/Center';
+
+interface PersonItem extends SearchableItem {
+  auxiliaryData: {role: string};
+}
+
+const people: PersonItem[] = [
+  {id: '1', label: 'Alice Johnson', auxiliaryData: {role: 'Engineer'}},
+  {id: '2', label: 'Bob Smith', auxiliaryData: {role: 'Designer'}},
+  {id: '3', label: 'Charlie Brown', auxiliaryData: {role: 'Product Manager'}},
+];
+
+const peopleSource: SearchSource<PersonItem> = {
+  search: (query: string) =>
+    people.filter(p => p.label.toLowerCase().includes(query.toLowerCase())),
+  bootstrap: () => people,
+};
+
+export default function TypeaheadItemBasic() {
+  const [value, setValue] = useState<PersonItem | null>(null);
+
+  return (
+    <Center width={320}>
+      <Typeahead
+        label="Assignee"
+        placeholder="Search people..."
+        searchSource={peopleSource}
+        value={value}
+        onChange={setValue}
+        renderItem={(item: PersonItem) => (
+          <TypeaheadItem item={item} description={item.auxiliaryData.role} />
+        )}
+      />
+    </Center>
+  );
+}

package/templates/blocks/components/VStack/VStackBasic.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: 'VStack',
+  name: 'VStack — Basic',
+  displayName: 'VStack — Basic',
+  description:
+    'A heading and paragraphs stacked vertically with a consistent gap. Use VStack whenever siblings should flow top to bottom with even spacing.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['VStack', 'Text', 'Heading'],
+};

package/templates/blocks/components/VStack/VStackBasic.tsx

@@ -0,0 +1,20 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {VStack} from '@astryxdesign/core/Layout';
+import {Text, Heading} from '@astryxdesign/core/Text';
+
+export default function VStackBasic() {
+  return (
+    <VStack gap={3}>
+      <Heading level={5}>Weekly Report</Heading>
+      <Text type="body" color="secondary">
+        VStack arranges its children in a vertical column.
+      </Text>
+      <Text type="body" color="secondary">
+        The gap prop controls the spacing between each item.
+      </Text>
+    </VStack>
+  );
+}