@idealyst/mcp-server 1.0.84

package/src/data/components/View.ts

@@ -0,0 +1,126 @@
+export const View = {
+  category: "layout",
+  description: "Container component with spacing, padding, and background variants",
+      props: `
+- \`children\`: React.ReactNode - The content to display inside the view
+- \`spacing\`: ViewSpacingVariant - Padding/spacing variant
+- \`marginVariant\`: ViewSpacingVariant - Margin variant
+- \`background\`: ViewBackgroundVariant - Background variant
+- \`radius\`: ViewRadiusVariant - Border radius variant
+- \`border\`: ViewBorderVariant - Border variant
+- \`backgroundColor\`: string - Custom background color (overrides background variant)
+- \`padding\`: number - Custom padding (overrides spacing variant)
+- \`margin\`: number - Custom margin (overrides marginVariant)
+- \`borderRadius\`: number - Custom border radius (overrides radius variant)
+- \`borderWidth\`: number - Custom border width (overrides border variant)
+- \`borderColor\`: string - Custom border color
+`,
+  features: [
+    "Automatic gap spacing between children",
+    "Six spacing/margin variants",
+    "Four background variants",
+    "Six border radius variants",
+    "Border support",
+    "Custom overrides for all variants",
+    "Flexbox-based layout",
+  ],
+  bestPractices: [
+    "Use View for all layout containers",
+    "Use spacing prop for consistent gaps",
+    "Prefer variants over custom values",
+    "Use 'md' spacing for standard layouts",
+    "Combine with Screen for full-screen layouts",
+    "Use background variants for semantic colors",
+  ],
+  usage: `
+import { View, Text, Button } from '@idealyst/components';
+
+<View spacing="md" background="surface" radius="md" style={{ padding: 16 }}>
+  <Text size="lg" weight="bold">Card Title</Text>
+  <Text>Card content with consistent spacing</Text>
+  <Button>Action</Button>
+</View>
+`,
+  examples: {
+    basic: `import { View, Text } from '@idealyst/components';
+
+<View spacing="md">
+  <Text>Item 1</Text>
+  <Text>Item 2</Text>
+  <Text>Item 3</Text>
+</View>`,
+
+    variants: `import { View, Text } from '@idealyst/components';
+
+<View spacing="lg">
+  <View spacing="xs" background="surface" radius="sm" style={{ padding: 12 }}>
+    <Text>Extra small spacing</Text>
+    <Text>Second item</Text>
+  </View>
+
+  <View spacing="md" background="surface" radius="md" style={{ padding: 16 }}>
+    <Text>Medium spacing</Text>
+    <Text>Second item</Text>
+  </View>
+
+  <View spacing="xl" background="surface" radius="lg" style={{ padding: 20 }}>
+    <Text>Extra large spacing</Text>
+    <Text>Second item</Text>
+  </View>
+</View>`,
+
+    "with-icons": `import { View, Icon, Text } from '@idealyst/components';
+
+<View
+  spacing="sm"
+  background="surface"
+  radius="md"
+  border="thin"
+  style={{ padding: 16 }}
+>
+  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+    <Icon name="information-outline" size="lg" color="primary" />
+    <View spacing="xs" style={{ flex: 1 }}>
+      <Text weight="bold">Important Information</Text>
+      <Text size="sm">This is an informational message</Text>
+    </View>
+  </View>
+</View>`,
+
+    interactive: `import { View, Text, Button, Card } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [items, setItems] = useState(['Item 1', 'Item 2']);
+
+  const addItem = () => {
+    setItems([...items, \`Item \${items.length + 1}\`]);
+  };
+
+  return (
+    <View spacing="lg" style={{ padding: 16 }}>
+      <Card type="outlined" padding="md">
+        <View spacing="md">
+          <Text weight="bold">Dynamic List</Text>
+          <View spacing="sm">
+            {items.map((item, index) => (
+              <View
+                key={index}
+                background="surface"
+                radius="sm"
+                style={{ padding: 12 }}
+              >
+                <Text>{item}</Text>
+              </View>
+            ))}
+          </View>
+          <Button onPress={addItem} type="outlined">
+            Add Item
+          </Button>
+        </View>
+      </Card>
+    </View>
+  );
+}`,
+  },
+};

package/src/data/components/index.ts

@@ -0,0 +1,109 @@
+// Component documentation exports
+export { Accordion } from './Accordion.js';
+export { ActivityIndicator } from './ActivityIndicator.js';
+export { Alert } from './Alert.js';
+export { Avatar } from './Avatar.js';
+export { Badge } from './Badge.js';
+export { Breadcrumb } from './Breadcrumb.js';
+export { Button } from './Button.js';
+export { Card } from './Card.js';
+export { Checkbox } from './Checkbox.js';
+export { Chip } from './Chip.js';
+export { Dialog } from './Dialog.js';
+export { Divider } from './Divider.js';
+export { Icon } from './Icon.js';
+export { Image } from './Image.js';
+export { Input } from './Input.js';
+export { List } from './List.js';
+export { Menu } from './Menu.js';
+export { Popover } from './Popover.js';
+export { Pressable } from './Pressable.js';
+export { Progress } from './Progress.js';
+export { RadioButton } from './RadioButton.js';
+export { Screen } from './Screen.js';
+export { Select } from './Select.js';
+export { Skeleton } from './Skeleton.js';
+export { Slider } from './Slider.js';
+export { SVGImage } from './SVGImage.js';
+export { Switch } from './Switch.js';
+export { TabBar } from './TabBar.js';
+export { Table } from './Table.js';
+export { Text } from './Text.js';
+export { TextArea } from './TextArea.js';
+export { Tooltip } from './Tooltip.js';
+export { Video } from './Video.js';
+export { View } from './View.js';
+
+// Collect all components into a single object
+import { Accordion } from './Accordion.js';
+import { ActivityIndicator } from './ActivityIndicator.js';
+import { Alert } from './Alert.js';
+import { Avatar } from './Avatar.js';
+import { Badge } from './Badge.js';
+import { Breadcrumb } from './Breadcrumb.js';
+import { Button } from './Button.js';
+import { Card } from './Card.js';
+import { Checkbox } from './Checkbox.js';
+import { Chip } from './Chip.js';
+import { Dialog } from './Dialog.js';
+import { Divider } from './Divider.js';
+import { Icon } from './Icon.js';
+import { Image } from './Image.js';
+import { Input } from './Input.js';
+import { List } from './List.js';
+import { Menu } from './Menu.js';
+import { Popover } from './Popover.js';
+import { Pressable } from './Pressable.js';
+import { Progress } from './Progress.js';
+import { RadioButton } from './RadioButton.js';
+import { Screen } from './Screen.js';
+import { Select } from './Select.js';
+import { Skeleton } from './Skeleton.js';
+import { Slider } from './Slider.js';
+import { SVGImage } from './SVGImage.js';
+import { Switch } from './Switch.js';
+import { TabBar } from './TabBar.js';
+import { Table } from './Table.js';
+import { Text } from './Text.js';
+import { TextArea } from './TextArea.js';
+import { Tooltip } from './Tooltip.js';
+import { Video } from './Video.js';
+import { View } from './View.js';
+
+export const components: Record<string, any> = {
+  Accordion,
+  ActivityIndicator,
+  Alert,
+  Avatar,
+  Badge,
+  Breadcrumb,
+  Button,
+  Card,
+  Checkbox,
+  Chip,
+  Dialog,
+  Divider,
+  Icon,
+  Image,
+  Input,
+  List,
+  Menu,
+  Popover,
+  Pressable,
+  Progress,
+  RadioButton,
+  Screen,
+  Select,
+  Skeleton,
+  Slider,
+  SVGImage,
+  Switch,
+  TabBar,
+  Table,
+  Tabs,
+  Text,
+  TextArea,
+  Tooltip,
+  Video,
+  View,
+};