@astryxdesign/cli 0.1.4-canary.ff77e1c → 0.1.4

package/templates/blocks/components/CommandPaletteInput/CommandPaletteInputBasic.doc.mjs

@@ -1,15 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'CommandPaletteInput',
-  name: 'CommandPaletteInput — With End Content',
-  displayName: 'CommandPaletteInput — With End Content',
-  description:
-    'Custom placeholder and a keyboard shortcut badge in the trailing slot via endContent.',
-  isReady: true,
-  isShowcase: false,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['CommandPalette', 'CommandPaletteInput', 'Kbd'],
-};

package/templates/blocks/components/CommandPaletteInput/CommandPaletteInputBasic.tsx

@@ -1,39 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {useMemo} from 'react';
-import {
-  CommandPalette,
-  CommandPaletteInput,
-} from '@astryxdesign/core/CommandPalette';
-import {Kbd} from '@astryxdesign/core/Kbd';
-import {createStaticSource} from '@astryxdesign/core/Typeahead';
-
-export default function CommandPaletteInputBasic() {
-  const source = useMemo(
-    () =>
-      createStaticSource([
-        {id: 'home', label: 'Home'},
-        {id: 'settings', label: 'Settings'},
-        {id: 'profile', label: 'Profile'},
-        {id: 'help', label: 'Help'},
-      ]),
-    [],
-  );
-
-  return (
-    <CommandPalette
-      isOpen
-      isInline
-      onOpenChange={() => {}}
-      searchSource={source}
-      input={
-        <CommandPaletteInput
-          placeholder="Search commands, files, or actions..."
-          endContent={<Kbd keys="mod+k" />}
-        />
-      }
-    />
-  );
-}

package/templates/blocks/components/CommandPaletteInput/CommandPaletteInputShowcase.doc.mjs

@@ -1,15 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'CommandPaletteInput',
-  name: 'CommandPaletteInput',
-  displayName: 'Command Palette Input',
-  description:
-    'Command palette search input with a custom placeholder and a keyboard shortcut hint in the endContent slot.',
-  isReady: true,
-  isShowcase: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['CommandPalette', 'CommandPaletteInput', 'Kbd'],
-};

package/templates/blocks/components/CommandPaletteInput/CommandPaletteInputShowcase.tsx

@@ -1,39 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {useMemo} from 'react';
-import {
-  CommandPalette,
-  CommandPaletteInput,
-} from '@astryxdesign/core/CommandPalette';
-import {Kbd} from '@astryxdesign/core/Kbd';
-import {createStaticSource} from '@astryxdesign/core/Typeahead';
-
-export default function CommandPaletteInputShowcase() {
-  const source = useMemo(
-    () =>
-      createStaticSource([
-        {id: 'home', label: 'Home'},
-        {id: 'settings', label: 'Settings'},
-        {id: 'profile', label: 'Profile'},
-        {id: 'help', label: 'Help'},
-      ]),
-    [],
-  );
-
-  return (
-    <CommandPalette
-      isOpen
-      isInline
-      onOpenChange={() => {}}
-      searchSource={source}
-      input={
-        <CommandPaletteInput
-          placeholder="Search commands, files, or actions..."
-          endContent={<Kbd keys="mod+k" />}
-        />
-      }
-    />
-  );
-}

package/templates/blocks/components/CommandPaletteList/CommandPaletteListBasic.doc.mjs

@@ -1,15 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'CommandPaletteList',
-  name: 'CommandPaletteList — Item States',
-  displayName: 'CommandPaletteList — Item States',
-  description:
-    'Flat list showing the highlighted, selected, and disabled item states. Use CommandPaletteGroup to add section headings.',
-  isReady: true,
-  isShowcase: false,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['CommandPaletteList', 'CommandPaletteItem'],
-};

package/templates/blocks/components/CommandPaletteList/CommandPaletteListBasic.tsx

@@ -1,27 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {
-  CommandPaletteList,
-  CommandPaletteItem,
-} from '@astryxdesign/core/CommandPalette';
-
-export default function CommandPaletteListBasic() {
-  return (
-    <CommandPaletteList>
-      <CommandPaletteItem value="home" onSelect={() => {}}>
-        Go Home
-      </CommandPaletteItem>
-      <CommandPaletteItem value="settings" isHighlighted onSelect={() => {}}>
-        Open Settings
-      </CommandPaletteItem>
-      <CommandPaletteItem value="profile" isSelected onSelect={() => {}}>
-        View Profile
-      </CommandPaletteItem>
-      <CommandPaletteItem value="help" isDisabled onSelect={() => {}}>
-        Help (unavailable)
-      </CommandPaletteItem>
-    </CommandPaletteList>
-  );
-}

package/templates/blocks/components/CommandPaletteList/CommandPaletteListShowcase.doc.mjs

@@ -1,15 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'CommandPaletteList',
-  name: 'CommandPaletteList',
-  displayName: 'Command Palette List',
-  description:
-    'Scrollable command palette list with grouped items, including a highlighted item, composed without a full CommandPalette.',
-  isReady: true,
-  isShowcase: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['CommandPaletteList', 'CommandPaletteGroup', 'CommandPaletteItem'],
-};

package/templates/blocks/components/CommandPaletteList/CommandPaletteListShowcase.tsx

@@ -1,38 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {
-  CommandPaletteList,
-  CommandPaletteGroup,
-  CommandPaletteItem,
-} from '@astryxdesign/core/CommandPalette';
-
-export default function CommandPaletteListShowcase() {
-  return (
-    <CommandPaletteList>
-      <CommandPaletteGroup heading="Navigation">
-        <CommandPaletteItem value="home" onSelect={() => {}}>
-          Go Home
-        </CommandPaletteItem>
-        <CommandPaletteItem value="settings" onSelect={() => {}}>
-          Open Settings
-        </CommandPaletteItem>
-        <CommandPaletteItem value="profile" onSelect={() => {}}>
-          View Profile
-        </CommandPaletteItem>
-      </CommandPaletteGroup>
-      <CommandPaletteGroup heading="Actions">
-        <CommandPaletteItem value="new-file" onSelect={() => {}}>
-          New File
-        </CommandPaletteItem>
-        <CommandPaletteItem value="search" isHighlighted onSelect={() => {}}>
-          Search Files
-        </CommandPaletteItem>
-        <CommandPaletteItem value="save" onSelect={() => {}}>
-          Save All
-        </CommandPaletteItem>
-      </CommandPaletteGroup>
-    </CommandPaletteList>
-  );
-}

package/templates/blocks/components/ContextMenuItem/ContextMenuItemBasic.doc.mjs

@@ -1,14 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'ContextMenuItem',
-  name: 'ContextMenuItem — Basic',
-  displayName: 'ContextMenuItem — Basic',
-  description:
-    'Context menu items with labels and secondary descriptions. Use ContextMenuItem to render custom menu entries with consistent styling.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['ContextMenu', 'ContextMenuItem'],
-};

package/templates/blocks/components/ContextMenuItem/ContextMenuItemBasic.tsx

@@ -1,44 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {ContextMenu, ContextMenuItem} from '@astryxdesign/core/ContextMenu';
-
-export default function ContextMenuItemBasic() {
-  return (
-    <ContextMenu
-      menuContent={
-        <>
-          <ContextMenuItem
-            label="Edit"
-            description="Modify this item"
-            onClick={() => {}}
-          />
-          <ContextMenuItem
-            label="Duplicate"
-            description="Create a copy"
-            onClick={() => {}}
-          />
-          <ContextMenuItem
-            label="Delete"
-            description="This action cannot be undone"
-            onClick={() => {}}
-          />
-        </>
-      }>
-      <div
-        style={{
-          padding: '48px',
-          borderWidth: '2px',
-          borderStyle: 'dashed',
-          borderColor: 'var(--color-border)',
-          borderRadius: '8px',
-          textAlign: 'center',
-          color: 'var(--color-text-secondary)',
-          userSelect: 'none',
-        }}>
-        Right-click this area
-      </div>
-    </ContextMenu>
-  );
-}

package/templates/blocks/components/ContextMenuItem/ContextMenuItemShowcase.doc.mjs

@@ -1,15 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'ContextMenuItem',
-  name: 'ContextMenuItem',
-  displayName: 'Context Menu Item',
-  description:
-    'Context menu with custom-rendered items using ContextMenuItem for icons and descriptions.',
-  isReady: true,
-  isShowcase: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['ContextMenu', 'ContextMenuItem'],
-};

package/templates/blocks/components/ContextMenuItem/ContextMenuItemShowcase.tsx

@@ -1,107 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {ContextMenu, ContextMenuItem} from '@astryxdesign/core/ContextMenu';
-
-const PencilIcon = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    {...props}>
-    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-  </svg>
-);
-
-const CopyIcon = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    {...props}>
-    <rect x="9" y="9" width="13" height="13" rx="2" />
-    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-  </svg>
-);
-
-const ShareIcon = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    {...props}>
-    <circle cx="18" cy="5" r="3" />
-    <circle cx="6" cy="12" r="3" />
-    <circle cx="18" cy="19" r="3" />
-    <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
-    <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
-  </svg>
-);
-
-const TrashIcon = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    {...props}>
-    <polyline points="3 6 5 6 21 6" />
-    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-  </svg>
-);
-
-export default function ContextMenuItemShowcase() {
-  return (
-    <ContextMenu
-      menuContent={
-        <>
-          <ContextMenuItem
-            icon={PencilIcon}
-            label="Edit"
-            description="Modify this item"
-            onClick={() => {}}
-          />
-          <ContextMenuItem
-            icon={CopyIcon}
-            label="Duplicate"
-            description="Create a copy"
-            onClick={() => {}}
-          />
-          <ContextMenuItem icon={ShareIcon} label="Share" onClick={() => {}} />
-          <ContextMenuItem
-            icon={TrashIcon}
-            label="Delete"
-            description="This action cannot be undone"
-            onClick={() => {}}
-          />
-        </>
-      }>
-      <div
-        style={{
-          padding: '48px',
-          borderWidth: '2px',
-          borderStyle: 'dashed',
-          borderColor: 'var(--color-border)',
-          borderRadius: '8px',
-          textAlign: 'center',
-          color: 'var(--color-text-secondary)',
-          userSelect: 'none',
-        }}>
-        Right-click this area
-      </div>
-    </ContextMenu>
-  );
-}

package/templates/blocks/components/NavHeadingMenu/NavHeadingMenuShowcase.doc.mjs

@@ -1,15 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'NavHeadingMenu',
-  name: 'NavHeadingMenu',
-  displayName: 'Nav Heading Menu',
-  description:
-    'NavHeadingMenu passed as the menu prop of SideNavHeading, letting the heading act as a product switcher popover trigger.',
-  isReady: true,
-  isShowcase: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['SideNav', 'SideNavHeading', 'NavHeadingMenu', 'NavHeadingMenuItem'],
-};

package/templates/blocks/components/NavHeadingMenu/NavHeadingMenuShowcase.tsx

@@ -1,47 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {SideNav, SideNavHeading} from '@astryxdesign/core/SideNav';
-import {NavHeadingMenu, NavHeadingMenuItem} from '@astryxdesign/core/NavMenu';
-
-function AppIcon() {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5">
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z"
-      />
-    </svg>
-  );
-}
-
-export default function NavHeadingMenuShowcase() {
-  return (
-    <div style={{height: 100}}>
-      <SideNav
-        header={
-          <SideNavHeading
-            heading="Acme Platform"
-            icon={<AppIcon />}
-            menu={
-              <NavHeadingMenu size="lg">
-                <NavHeadingMenuItem label="Dashboard" href="/dashboard" />
-                <NavHeadingMenuItem label="Analytics" href="/analytics" />
-                <NavHeadingMenuItem label="Settings" href="/settings" />
-              </NavHeadingMenu>
-            }
-          />
-        }>
-        {null}
-      </SideNav>
-    </div>
-  );
-}