@idealyst/mcp-server 1.0.86 → 1.0.88

package/examples/components/Badge.examples.tsx

@@ -0,0 +1,242 @@
+/**
+ * Badge Component Examples
+ *
+ * These examples are type-checked against the actual BadgeProps interface
+ * to ensure accuracy and correctness.
+ */
+
+import React from 'react';
+import { Badge, View, Text, Icon } from '@idealyst/components';
+
+// Example 1: Basic Badge
+export function BasicBadge() {
+  return <Badge>New</Badge>;
+}
+
+// Example 2: Badge Sizes
+export function BadgeSizes() {
+  return (
+    <View spacing="md">
+      <Badge size="xs">Extra Small</Badge>
+      <Badge size="sm">Small</Badge>
+      <Badge size="md">Medium</Badge>
+      <Badge size="lg">Large</Badge>
+      <Badge size="xl">Extra Large</Badge>
+    </View>
+  );
+}
+
+// Example 3: Badge Types
+export function BadgeTypes() {
+  return (
+    <View spacing="md">
+      <Badge type="filled">Filled</Badge>
+      <Badge type="outlined">Outlined</Badge>
+      <Badge type="dot">Dot</Badge>
+    </View>
+  );
+}
+
+// Example 4: Badge Colors
+export function BadgeColors() {
+  return (
+    <View spacing="md">
+      <Badge >Blue</Badge>
+      <Badge >Green</Badge>
+      <Badge >Red</Badge>
+      <Badge >Yellow</Badge>
+      <Badge >Purple</Badge>
+      <Badge >Gray</Badge>
+    </View>
+  );
+}
+
+// Example 5: Badge with Icons (Icon Name)
+export function BadgeWithIconName() {
+  return (
+    <View spacing="md">
+      <Badge icon="check">Verified</Badge>
+      <Badge icon="star">Premium</Badge>
+      <Badge icon="fire">Hot</Badge>
+      <Badge icon="new-box">New</Badge>
+      <Badge icon="alert">Alert</Badge>
+    </View>
+  );
+}
+
+// Example 6: Badge with Icons (ReactNode)
+export function BadgeWithIconComponent() {
+  return (
+    <View spacing="md">
+      <Badge icon={<Icon name="check" size="xs" />}>Verified</Badge>
+      <Badge icon={<Icon name="star" size="xs" />} >
+        Premium
+      </Badge>
+      <Badge icon={<Icon name="fire" size="xs" />} >
+        Hot
+      </Badge>
+    </View>
+  );
+}
+
+// Example 7: Status Badges
+export function StatusBadges() {
+  return (
+    <View spacing="md">
+      <Badge type="filled"  icon="check-circle">
+        Active
+      </Badge>
+      <Badge type="filled"  icon="pause-circle">
+        Paused
+      </Badge>
+      <Badge type="filled"  icon="close-circle">
+        Inactive
+      </Badge>
+      <Badge type="filled"  icon="clock">
+        Pending
+      </Badge>
+    </View>
+  );
+}
+
+// Example 8: Outlined Badges
+export function OutlinedBadges() {
+  return (
+    <View spacing="md">
+      <Badge type="outlined" >
+        Info
+      </Badge>
+      <Badge type="outlined" >
+        Success
+      </Badge>
+      <Badge type="outlined" >
+        Error
+      </Badge>
+      <Badge type="outlined" >
+        Warning
+      </Badge>
+    </View>
+  );
+}
+
+// Example 9: Dot Badges
+export function DotBadges() {
+  return (
+    <View spacing="md">
+      <View spacing="sm">
+        <Badge type="dot"  />
+        <Text>Online</Text>
+      </View>
+      <View spacing="sm">
+        <Badge type="dot"  />
+        <Text>Offline</Text>
+      </View>
+      <View spacing="sm">
+        <Badge type="dot"  />
+        <Text>Away</Text>
+      </View>
+      <View spacing="sm">
+        <Badge type="dot"  />
+        <Text>Busy</Text>
+      </View>
+    </View>
+  );
+}
+
+// Example 10: Notification Badges
+export function NotificationBadges() {
+  return (
+    <View spacing="md">
+      <View spacing="sm">
+        <Icon name="bell" size="lg" />
+        <Badge type="filled"  size="xs">
+          5
+        </Badge>
+      </View>
+      <View spacing="sm">
+        <Icon name="email" size="lg" />
+        <Badge type="filled"  size="xs">
+          12
+        </Badge>
+      </View>
+      <View spacing="sm">
+        <Icon name="message" size="lg" />
+        <Badge type="filled"  size="xs">
+          3
+        </Badge>
+      </View>
+    </View>
+  );
+}
+
+// Example 11: Product Badges
+export function ProductBadges() {
+  return (
+    <View spacing="md">
+      <Badge type="filled"  icon="fire">
+        Sale
+      </Badge>
+      <Badge type="filled"  icon="new-box">
+        New Arrival
+      </Badge>
+      <Badge type="filled"  icon="star">
+        Best Seller
+      </Badge>
+      <Badge type="filled"  icon="crown">
+        Premium
+      </Badge>
+      <Badge type="outlined"  icon="percent">
+        20% Off
+      </Badge>
+    </View>
+  );
+}
+
+// Example 12: Category Badges
+export function CategoryBadges() {
+  return (
+    <View spacing="md">
+      <Badge type="outlined" size="sm" >
+        Technology
+      </Badge>
+      <Badge type="outlined" size="sm" >
+        Design
+      </Badge>
+      <Badge type="outlined" size="sm" >
+        Business
+      </Badge>
+      <Badge type="outlined" size="sm" >
+        Marketing
+      </Badge>
+      <Badge type="outlined" size="sm" >
+        Finance
+      </Badge>
+    </View>
+  );
+}
+
+// Example 13: User Role Badges
+export function UserRoleBadges() {
+  return (
+    <View spacing="md">
+      <View spacing="sm">
+        <Text weight="semibold">John Doe</Text>
+        <Badge type="filled"  size="sm" icon="crown">
+          Admin
+        </Badge>
+      </View>
+      <View spacing="sm">
+        <Text weight="semibold">Jane Smith</Text>
+        <Badge type="filled"  size="sm" icon="shield">
+          Moderator
+        </Badge>
+      </View>
+      <View spacing="sm">
+        <Text weight="semibold">Bob Johnson</Text>
+        <Badge type="outlined"  size="sm" icon="account">
+          Member
+        </Badge>
+      </View>
+    </View>
+  );
+}

package/examples/components/Breadcrumb.examples.tsx

@@ -0,0 +1,303 @@
+/**
+ * Breadcrumb Component Examples
+ *
+ * These examples are type-checked against the actual BreadcrumbProps interface
+ * to ensure accuracy and correctness.
+ */
+
+import React from 'react';
+import { Breadcrumb, View, Text, Icon } from '@idealyst/components';
+import type { BreadcrumbItem } from '@idealyst/components';
+
+// Example 1: Basic Breadcrumb
+export function BasicBreadcrumb() {
+  const items: BreadcrumbItem[] = [
+    { label: 'Home', onPress: () => console.log('Home') },
+    { label: 'Products', onPress: () => console.log('Products') },
+    { label: 'Electronics', onPress: () => console.log('Electronics') },
+    { label: 'Laptops' },
+  ];
+
+  return <Breadcrumb items={items} />;
+}
+
+// Example 2: Breadcrumb with Icons
+export function BreadcrumbWithIcons() {
+  const items: BreadcrumbItem[] = [
+    { label: 'Home', icon: 'home', onPress: () => console.log('Home') },
+    { label: 'Documents', icon: 'folder', onPress: () => console.log('Documents') },
+    { label: 'Projects', icon: 'folder-open', onPress: () => console.log('Projects') },
+    { label: 'Report.pdf', icon: 'file-document' },
+  ];
+
+  return <Breadcrumb items={items} />;
+}
+
+// Example 3: Breadcrumb with Custom Icons
+export function BreadcrumbWithCustomIcons() {
+  const items: BreadcrumbItem[] = [
+    {
+      label: 'Dashboard',
+      icon: <Icon name="view-dashboard" size="sm" />,
+      onPress: () => console.log('Dashboard'),
+    },
+    {
+      label: 'Analytics',
+      icon: <Icon name="chart-line" size="sm" />,
+      onPress: () => console.log('Analytics'),
+    },
+    {
+      label: 'Reports',
+      icon: <Icon name="file-chart" size="sm" />,
+    },
+  ];
+
+  return <Breadcrumb items={items} />;
+}
+
+// Example 4: Breadcrumb Sizes
+export function BreadcrumbSizes() {
+  const items: BreadcrumbItem[] = [
+    { label: 'Home', onPress: () => {} },
+    { label: 'Category', onPress: () => {} },
+    { label: 'Subcategory' },
+  ];
+
+  return (
+    <View spacing="lg">
+      <View spacing="sm">
+        <Text weight="semibold">Extra Small</Text>
+        <Breadcrumb items={items} size="xs" />
+      </View>
+      <View spacing="sm">
+        <Text weight="semibold">Small</Text>
+        <Breadcrumb items={items} size="sm" />
+      </View>
+      <View spacing="sm">
+        <Text weight="semibold">Medium</Text>
+        <Breadcrumb items={items} size="md" />
+      </View>
+      <View spacing="sm">
+        <Text weight="semibold">Large</Text>
+        <Breadcrumb items={items} size="lg" />
+      </View>
+      <View spacing="sm">
+        <Text weight="semibold">Extra Large</Text>
+        <Breadcrumb items={items} size="xl" />
+      </View>
+    </View>
+  );
+}
+
+// Example 5: Breadcrumb with Custom Separator
+export function BreadcrumbWithCustomSeparator() {
+  const items: BreadcrumbItem[] = [
+    { label: 'Home', onPress: () => {} },
+    { label: 'Products', onPress: () => {} },
+    { label: 'Item' },
+  ];
+
+  return (
+    <View spacing="md">
+      <Breadcrumb items={items} separator=">" />
+      <Breadcrumb items={items} separator="-" />
+      <Breadcrumb items={items} separator="•" />
+      <Breadcrumb items={items} separator={<Icon name="chevron-right" size="sm" />} />
+    </View>
+  );
+}
+
+// Example 6: Breadcrumb with Intent Colors
+export function BreadcrumbWithIntent() {
+  const items: BreadcrumbItem[] = [
+    { label: 'Home', onPress: () => {} },
+    { label: 'Settings', onPress: () => {} },
+    { label: 'Profile' },
+  ];
+
+  return (
+    <View spacing="md">
+      <View spacing="sm">
+        <Text weight="semibold">Primary Intent</Text>
+        <Breadcrumb items={items} intent="primary" />
+      </View>
+      <View spacing="sm">
+        <Text weight="semibold">Neutral Intent</Text>
+        <Breadcrumb items={items} intent="neutral" />
+      </View>
+    </View>
+  );
+}
+
+// Example 7: Breadcrumb with Max Items
+export function BreadcrumbWithMaxItems() {
+  const items: BreadcrumbItem[] = [
+    { label: 'Home', onPress: () => {} },
+    { label: 'Level 1', onPress: () => {} },
+    { label: 'Level 2', onPress: () => {} },
+    { label: 'Level 3', onPress: () => {} },
+    { label: 'Level 4', onPress: () => {} },
+    { label: 'Current Page' },
+  ];
+
+  return (
+    <View spacing="md">
+      <View spacing="sm">
+        <Text weight="semibold">All Items (6 total)</Text>
+        <Breadcrumb items={items} />
+      </View>
+      <View spacing="sm">
+        <Text weight="semibold">Max 4 Items</Text>
+        <Breadcrumb items={items} maxItems={4} />
+      </View>
+      <View spacing="sm">
+        <Text weight="semibold">Max 3 Items</Text>
+        <Breadcrumb items={items} maxItems={3} />
+      </View>
+    </View>
+  );
+}
+
+// Example 8: Breadcrumb with Disabled Items
+export function BreadcrumbWithDisabledItems() {
+  const items: BreadcrumbItem[] = [
+    { label: 'Home', onPress: () => console.log('Home') },
+    { label: 'Restricted', disabled: true },
+    { label: 'Current Page' },
+  ];
+
+  return (
+    <View spacing="md">
+      <Breadcrumb items={items} />
+      <Text size="sm" >
+        The "Restricted" item is disabled
+      </Text>
+    </View>
+  );
+}
+
+// Example 9: Responsive Breadcrumb
+export function ResponsiveBreadcrumb() {
+  const items: BreadcrumbItem[] = [
+    { label: 'Home', icon: 'home', onPress: () => {} },
+    { label: 'Products', onPress: () => {} },
+    { label: 'Electronics', onPress: () => {} },
+    { label: 'Laptops', onPress: () => {} },
+    { label: 'Gaming Laptops' },
+  ];
+
+  return (
+    <View spacing="md">
+      <View spacing="sm">
+        <Text weight="semibold">Responsive (collapses on narrow screens)</Text>
+        <Breadcrumb items={items} responsive minVisibleItems={3} />
+      </View>
+      <Text size="sm" >
+        Try resizing the window to see the breadcrumb collapse
+      </Text>
+    </View>
+  );
+}
+
+// Example 10: File System Navigation
+export function FileSystemBreadcrumb() {
+  const [path, setPath] = React.useState(['Users', 'john', 'Documents', 'Projects']);
+
+  const items: BreadcrumbItem[] = [
+    {
+      label: 'Root',
+      icon: 'harddisk',
+      onPress: () => setPath([]),
+    },
+    ...path.map((folder, index) => ({
+      label: folder,
+      icon: index === path.length - 1 ? 'folder-open' : 'folder',
+      onPress:
+        index < path.length - 1
+          ? () => setPath(path.slice(0, index + 1))
+          : undefined,
+    })),
+  ];
+
+  return (
+    <View spacing="md">
+      <Breadcrumb items={items} separator="/" />
+      <Text size="sm" >
+        Current path: /{path.join('/')}
+      </Text>
+    </View>
+  );
+}
+
+// Example 11: E-commerce Breadcrumb
+export function EcommerceBreadcrumb() {
+  const items: BreadcrumbItem[] = [
+    { label: 'Home', icon: 'home', onPress: () => console.log('Navigate to home') },
+    { label: 'Electronics', onPress: () => console.log('Navigate to electronics') },
+    { label: 'Computers', onPress: () => console.log('Navigate to computers') },
+    { label: 'Laptops', onPress: () => console.log('Navigate to laptops') },
+    { label: 'Gaming Laptops' },
+  ];
+
+  return (
+    <View spacing="lg">
+      <Breadcrumb items={items} intent="primary" />
+      <View spacing="md">
+        <Text size="xl" weight="bold">
+          Gaming Laptops
+        </Text>
+        <Text>Browse our selection of high-performance gaming laptops.</Text>
+      </View>
+    </View>
+  );
+}
+
+// Example 12: Documentation Breadcrumb
+export function DocumentationBreadcrumb() {
+  const items: BreadcrumbItem[] = [
+    { label: 'Docs', icon: 'book-open', onPress: () => {} },
+    { label: 'Components', icon: 'puzzle', onPress: () => {} },
+    { label: 'Navigation', icon: 'navigation', onPress: () => {} },
+    { label: 'Breadcrumb', icon: 'file-document' },
+  ];
+
+  return (
+    <View spacing="lg">
+      <Breadcrumb
+        items={items}
+        size="md"
+        separator={<Icon name="chevron-right" size="xs" />}
+      />
+      <View spacing="md">
+        <Text size="xl" weight="bold">
+          Breadcrumb Component
+        </Text>
+        <Text>
+          Learn how to use the Breadcrumb component to create hierarchical navigation in your
+          application.
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+// Example 13: Settings Navigation Breadcrumb
+export function SettingsBreadcrumb() {
+  const items: BreadcrumbItem[] = [
+    { label: 'Settings', icon: 'cog', onPress: () => {} },
+    { label: 'Account', icon: 'account', onPress: () => {} },
+    { label: 'Privacy', icon: 'shield-lock' },
+  ];
+
+  return (
+    <View spacing="lg">
+      <Breadcrumb items={items} intent="neutral" size="md" />
+      <View spacing="md">
+        <Text size="lg" weight="bold">
+          Privacy Settings
+        </Text>
+        <Text>Manage your privacy preferences and data sharing options.</Text>
+      </View>
+    </View>
+  );
+}

package/examples/components/Button.examples.tsx

@@ -0,0 +1,113 @@
+/**
+ * Button Component Examples
+ *
+ * These examples are type-checked against the actual ButtonProps interface
+ * to ensure accuracy and correctness.
+ */
+
+import React from 'react';
+import { Button } from '@idealyst/components';
+
+// Example 1: Basic Button
+export function BasicButton() {
+  return (
+    <Button onPress={() => console.log('Clicked')}>
+      Click Me
+    </Button>
+  );
+}
+
+// Example 2: Button Variants (types)
+export function ButtonTypes() {
+  return (
+    <>
+      <Button type="contained" intent="primary">Contained</Button>
+      <Button type="outlined" intent="primary">Outlined</Button>
+      <Button type="text" intent="primary">Text</Button>
+    </>
+  );
+}
+
+// Example 3: Button Sizes
+export function ButtonSizes() {
+  return (
+    <>
+      <Button size="xs">Extra Small</Button>
+      <Button size="sm">Small</Button>
+      <Button size="md">Medium</Button>
+      <Button size="lg">Large</Button>
+      <Button size="xl">Extra Large</Button>
+    </>
+  );
+}
+
+// Example 4: Button Intents
+export function ButtonIntents() {
+  return (
+    <>
+      <Button intent="primary">Primary</Button>
+      <Button intent="success">Success</Button>
+      <Button intent="error">Error</Button>
+      <Button intent="warning">Warning</Button>
+      <Button intent="neutral">Neutral</Button>
+      <Button intent="info">Info</Button>
+    </>
+  );
+}
+
+// Example 5: Button with Icons
+export function ButtonWithIcons() {
+  return (
+    <>
+      <Button leftIcon="check" onPress={() => {}}>
+        Save
+      </Button>
+      <Button rightIcon="arrow-right" onPress={() => {}}>
+        Next
+      </Button>
+      <Button leftIcon="plus" rightIcon="arrow-down" onPress={() => {}}>
+        Add Item
+      </Button>
+    </>
+  );
+}
+
+// Example 6: Disabled Button
+export function DisabledButton() {
+  return (
+    <Button disabled onPress={() => {}}>
+      Disabled
+    </Button>
+  );
+}
+
+// Example 7: Button with Custom Style
+export function ButtonWithCustomStyle() {
+  return (
+    <Button type="contained" intent="primary" style={{ width: '100%' }}>
+      Full Width Button (via style)
+    </Button>
+  );
+}
+
+// Example 8: Interactive Example with State
+export function InteractiveButton() {
+  const [loading, setLoading] = React.useState(false);
+
+  const handlePress = async () => {
+    setLoading(true);
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    setLoading(false);
+  };
+
+  return (
+    <Button
+      disabled={loading}
+      onPress={handlePress}
+      type="contained"
+      intent="primary"
+    >
+      {loading ? 'Saving...' : 'Save'}
+    </Button>
+  );
+}