@astryxdesign/cli 0.0.0-bootstrap.0 → 0.1.0-canary.08d4cf4

package/templates/blocks/components/Text/TextWeight.tsx

@@ -0,0 +1,25 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Text} from '@astryxdesign/core/Text';
+import {Stack} from '@astryxdesign/core/Stack';
+
+const WEIGHTS = [
+  {weight: 'normal' as const, label: 'Normal'},
+  {weight: 'medium' as const, label: 'Medium'},
+  {weight: 'semibold' as const, label: 'Semibold'},
+  {weight: 'bold' as const, label: 'Bold'},
+];
+
+export default function TextWeight() {
+  return (
+    <Stack direction="vertical" gap={3}>
+      {WEIGHTS.map(({weight, label}) => (
+        <Text key={weight} type="body" weight={weight} display="block">
+          {label}
+        </Text>
+      ))}
+    </Stack>
+  );
+}

package/templates/blocks/components/Text/TextWordBreak.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: 'Text',
+  name: 'Text — Word Break',
+  displayName: 'Text — Word Break',
+  description: 'Compares break-word and break-all word break modes on a long unbreakable string.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Text'],
+};

package/templates/blocks/components/Text/TextWordBreak.tsx

@@ -0,0 +1,38 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Text} from '@astryxdesign/core/Text';
+
+export default function TextWordBreak() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+        maxWidth: 400,
+      }}>
+      <div>
+        <Text type="label" display="block">
+          Break-word (default for multi-line)
+        </Text>
+        <div style={{width: 200, border: '1px solid #ccc', padding: 8}}>
+          <Text type="body" maxLines={2} wordBreak="break-word">
+            This is a verylongunbreakableword for a break-word example
+          </Text>
+        </div>
+      </div>
+      <div>
+        <Text type="label" display="block">
+          Break-all (default for single-line)
+        </Text>
+        <div style={{width: 200, border: '1px solid #ccc', padding: 8}}>
+          <Text type="body" maxLines={2} wordBreak="break-all">
+            Breaks anywhere: abcdefghijklmnopqrstuvwxyz0123456789
+          </Text>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/blocks/components/Text/TextWrap.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: 'Text',
+  name: 'Text — Wrap',
+  displayName: 'Text — Wrap',
+  description: 'The 4 text-wrap modes (wrap, nowrap, balance, pretty) shown in width-constrained containers.',
+  isReady: true,
+  aspectRatio: 1 / 1,
+  componentsUsed: ['Text'],
+};

package/templates/blocks/components/Text/TextWrap.tsx

@@ -0,0 +1,66 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Text} from '@astryxdesign/core/Text';
+
+export default function TextWrap() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+        maxWidth: 400,
+      }}>
+      <div>
+        <Text type="label" display="block">
+          Wrap (default)
+        </Text>
+        <div style={{border: '1px solid #ccc', padding: 8, width: 200}}>
+          <Text type="body" textWrap="wrap">
+            This text wraps normally at word boundaries when it reaches the
+            edge.
+          </Text>
+        </div>
+      </div>
+      <div>
+        <Text type="label" display="block">
+          Nowrap
+        </Text>
+        <div
+          style={{
+            border: '1px solid #ccc',
+            padding: 8,
+            width: 200,
+            overflow: 'hidden',
+          }}>
+          <Text type="body" textWrap="nowrap">
+            This text does not wrap and will overflow its container.
+          </Text>
+        </div>
+      </div>
+      <div>
+        <Text type="label" display="block">
+          Balance
+        </Text>
+        <div style={{border: '1px solid #ccc', padding: 8, width: 200}}>
+          <Text type="body" textWrap="balance">
+            This text is balanced for better visual appearance across lines.
+          </Text>
+        </div>
+      </div>
+      <div>
+        <Text type="label" display="block">
+          Pretty
+        </Text>
+        <div style={{border: '1px solid #ccc', padding: 8, width: 200}}>
+          <Text type="body" textWrap="pretty">
+            This text uses pretty wrap to avoid orphans at the end of
+            paragraphs.
+          </Text>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/blocks/components/TextArea/TextAreaCharacterCount.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: 'TextArea',
+  name: 'TextArea — Character Count',
+  displayName: 'TextArea — Character Count',
+  description: 'Textareas with maxLength and a live character counter. The counter turns red when the limit is exceeded.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['TextArea'],
+};

package/templates/blocks/components/TextArea/TextAreaCharacterCount.tsx

@@ -0,0 +1,25 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {TextArea} from '@astryxdesign/core/TextArea';
+
+export default function TextAreaCharacterCount() {
+  const [value, setValue] = useState(
+    'Excited to announce that our team just shipped the new dashboard! Check it out and let us know what you think.',
+  );
+
+  return (
+    <div style={{width: 400}}>
+      <TextArea
+        label="Status update"
+        value={value}
+        onChange={setValue}
+        placeholder="What's on your mind?"
+        maxLength={280}
+        rows={3}
+      />
+    </div>
+  );
+}

package/templates/blocks/components/TextArea/TextAreaShowcase.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'TextArea',
+  name: 'TextArea',
+  displayName: 'Text Area',
+  isReady: true,
+  aspectRatio: 1,
+  isShowcase: true,
+  description:
+    'A text area with placeholder text.',
+  componentsUsed: ['TextArea'],
+};

package/templates/blocks/components/TextArea/TextAreaShowcase.tsx

@@ -0,0 +1,18 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TextArea} from '@astryxdesign/core/TextArea';
+
+export default function TextAreaShowcase() {
+  return (
+    <div style={{width: 400}}>
+      <TextArea
+        label="Description"
+        value=""
+        onChange={() => {}}
+        placeholder="Enter a description..."
+      />
+    </div>
+  );
+}

package/templates/blocks/components/TextArea/TextAreaStates.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: 'TextArea',
+  name: 'TextArea — States',
+  displayName: 'TextArea — States',
+  description: 'Required, disabled, and loading textareas side by side. Shows the interactive states the component supports.',
+  isReady: true,
+  aspectRatio: 1,
+  componentsUsed: ['TextArea', 'Layout'],
+};

package/templates/blocks/components/TextArea/TextAreaStates.tsx

@@ -0,0 +1,36 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {TextArea} from '@astryxdesign/core/TextArea';
+import {Stack} from '@astryxdesign/core/Layout';
+
+export default function TextAreaStates() {
+  const [requiredValue, setRequiredValue] = useState('');
+
+  return (
+    <Stack direction="vertical" gap={4} style={{width: 400}}>
+      <TextArea
+        label="Required field"
+        value={requiredValue}
+        onChange={setRequiredValue}
+        placeholder="Describe the issue..."
+        isRequired
+      />
+      <TextArea
+        label="Disabled field"
+        value="This field is read-only and cannot be edited."
+        onChange={() => {}}
+        isDisabled
+      />
+      <TextArea
+        label="Loading field"
+        value=""
+        onChange={() => {}}
+        placeholder="Generating summary..."
+        isLoading
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/TextArea/TextAreaValidation.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: 'TextArea',
+  name: 'TextArea — Validation',
+  displayName: 'TextArea — Validation',
+  description: 'All three status variants (error, warning, and success) with status messages, plus error without a message. Use to show inline validation feedback as the user types.',
+  isReady: true,
+  aspectRatio: 3 / 4,
+  componentsUsed: ['TextArea', 'Layout'],
+};

package/templates/blocks/components/TextArea/TextAreaValidation.tsx

@@ -0,0 +1,54 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {TextArea} from '@astryxdesign/core/TextArea';
+import {Stack} from '@astryxdesign/core/Layout';
+
+export default function TextAreaValidation() {
+  const [errorValue, setErrorValue] = useState('Fix the');
+  const [warningValue, setWarningValue] = useState('Summarize the Q2 results');
+  const [successValue, setSuccessValue] = useState(
+    'Redesign the onboarding flow to reduce drop-off by 15% in Q3. Focus on simplifying the account creation step and adding a progress indicator.',
+  );
+  const [errorNoMsgValue, setErrorNoMsgValue] = useState('Invalid content');
+
+  return (
+    <Stack direction="vertical" gap={4} style={{width: 400}}>
+      <TextArea
+        label="Error message"
+        value={errorValue}
+        onChange={setErrorValue}
+        status={{
+          type: 'error',
+          message: 'Description must be at least 20 characters.',
+        }}
+      />
+      <TextArea
+        label="Warning message"
+        value={warningValue}
+        onChange={setWarningValue}
+        status={{
+          type: 'warning',
+          message: 'Consider adding more detail for clarity.',
+        }}
+      />
+      <TextArea
+        label="Success message"
+        value={successValue}
+        onChange={setSuccessValue}
+        status={{
+          type: 'success',
+          message: 'Looks good — clear and actionable.',
+        }}
+      />
+      <TextArea
+        label="Error without message"
+        value={errorNoMsgValue}
+        onChange={setErrorNoMsgValue}
+        status={{type: 'error'}}
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/TextArea/TextAreaWithIcon.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: 'TextArea',
+  name: 'TextArea — Icon',
+  displayName: 'TextArea — Icon',
+  description: 'Textareas with a leading icon that hints at the expected content, like a chat bubble for messages or a pencil for notes.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['TextArea'],
+};

package/templates/blocks/components/TextArea/TextAreaWithIcon.tsx

@@ -0,0 +1,24 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {TextArea} from '@astryxdesign/core/TextArea';
+import {PencilSquareIcon} from '@heroicons/react/24/outline';
+
+export default function TextAreaWithIcon() {
+  const [value, setValue] = useState('');
+
+  return (
+    <div style={{width: 400}}>
+      <TextArea
+        label="Meeting notes"
+        description="Capture key decisions and action items."
+        value={value}
+        onChange={setValue}
+        placeholder="What was discussed?"
+        startIcon={PencilSquareIcon}
+      />
+    </div>
+  );
+}

package/templates/blocks/components/TextInput/TextInputIcon.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: 'TextInput',
+  name: 'TextInput — Icon',
+  displayName: 'TextInput — Icon',
+  description: 'Inputs with a leading icon that hints at the expected content. Use when the icon helps users identify the field faster, like a lock for passwords or an envelope for email.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['TextInput', 'Layout'],
+};

package/templates/blocks/components/TextInput/TextInputIcon.tsx

@@ -0,0 +1,48 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {Stack} from '@astryxdesign/core/Layout';
+import {
+  EnvelopeIcon,
+  LockClosedIcon,
+  UserIcon,
+} from '@heroicons/react/24/outline';
+
+export default function TextInputIcon() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  return (
+    <div style={{width: 300}}>
+      <Stack direction="vertical" gap={3}>
+        <TextInput
+          label="Full name"
+          value={name}
+          onChange={setName}
+          placeholder="Sarah Chen"
+          startIcon={UserIcon}
+        />
+        <TextInput
+          type="email"
+          label="Email"
+          value={email}
+          onChange={setEmail}
+          placeholder="sarah@company.com"
+          startIcon={EnvelopeIcon}
+        />
+        <TextInput
+          type="password"
+          label="Password"
+          value={password}
+          onChange={setPassword}
+          placeholder="Enter your password"
+          startIcon={LockClosedIcon}
+        />
+      </Stack>
+    </div>
+  );
+}

package/templates/blocks/components/TextInput/TextInputSearch.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: 'TextInput',
+  name: 'TextInput — Search',
+  displayName: 'TextInput — Search',
+  description: 'Search input with a hidden label, start icon, and clear button. Use for toolbar and header search bars where the icon provides sufficient context.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['TextInput', 'Layout'],
+};

package/templates/blocks/components/TextInput/TextInputSearch.tsx

@@ -0,0 +1,36 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {Stack} from '@astryxdesign/core/Layout';
+import {MagnifyingGlassIcon} from '@heroicons/react/24/outline';
+
+export default function TextInputSearch() {
+  const [query, setQuery] = useState('');
+  const [filter, setFilter] = useState('design systems');
+
+  return (
+    <div style={{width: 300}}>
+      <Stack direction="vertical" gap={3}>
+        <TextInput
+          label="Search field"
+          value={query}
+          onChange={setQuery}
+          placeholder="Search projects…"
+          startIcon={MagnifyingGlassIcon}
+          hasClear
+        />
+        <TextInput
+          label="Search field with value"
+          value={filter}
+          onChange={setFilter}
+          placeholder="Filter…"
+          startIcon={MagnifyingGlassIcon}
+          hasClear
+        />
+      </Stack>
+    </div>
+  );
+}

package/templates/blocks/components/TextInput/TextInputShowcase.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: 'TextInput',
+  name: 'TextInput',
+  displayName: 'Text Input',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  isShowcase: true,
+  componentsUsed: ['TextInput'],
+};

package/templates/blocks/components/TextInput/TextInputShowcase.tsx

@@ -0,0 +1,18 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TextInput} from '@astryxdesign/core/TextInput';
+
+export default function TextInputShowcase() {
+  return (
+    <div style={{width: 300}}>
+      <TextInput
+        label="Name"
+        value=""
+        onChange={() => {}}
+        placeholder="Enter your name"
+      />
+    </div>
+  );
+}

package/templates/blocks/components/TextInput/TextInputSizes.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: 'TextInput',
+  name: 'TextInput — Sizes',
+  displayName: 'TextInput — Sizes',
+  description: 'Small, medium, and large inputs side by side. Use small in dense UIs like table filters, medium for most forms, and large for prominent single-field pages.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['TextInput', 'Layout'],
+};

package/templates/blocks/components/TextInput/TextInputSizes.tsx

@@ -0,0 +1,41 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {Stack} from '@astryxdesign/core/Layout';
+
+export default function TextInputSizes() {
+  const [sm, setSm] = useState('');
+  const [md, setMd] = useState('');
+  const [lg, setLg] = useState('');
+
+  return (
+    <div style={{width: 300}}>
+      <Stack direction="vertical" gap={3}>
+        <TextInput
+          label="Small"
+          value={sm}
+          onChange={setSm}
+          placeholder="Enter a value"
+          size="sm"
+        />
+        <TextInput
+          label="Medium"
+          value={md}
+          onChange={setMd}
+          placeholder="Enter a value"
+          size="md"
+        />
+        <TextInput
+          label="Large"
+          value={lg}
+          onChange={setLg}
+          placeholder="Enter a value"
+          size="lg"
+        />
+      </Stack>
+    </div>
+  );
+}

package/templates/blocks/components/TextInput/TextInputStates.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: 'TextInput',
+  name: 'TextInput — States',
+  displayName: 'TextInput — States',
+  description: 'Error, warning, and success validation states with status messages. Use to show users what went wrong and how to fix it.',
+  isReady: true,
+  aspectRatio: 0.85,
+  componentsUsed: ['TextInput', 'Layout'],
+};