@astryxdesign/cli 0.1.2-canary.ff01f6d → 0.1.3-canary.6d57c8d

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>
+  );
+}