@idealyst/mcp-server 1.0.84

package/src/data/components/Tabs.ts

@@ -0,0 +1,152 @@
+export const Tabs = {
+  category: "navigation",
+  description: "Tabs component with content panels for organizing information into tabbed sections",
+  props: `
+Tab Props:
+- \`value\`: string - Unique tab identifier
+- \`label\`: string - Tab label text
+- \`disabled\`: boolean - Whether tab is disabled
+- \`children\`: ReactNode - Tab panel content
+
+Tabs Props:
+- \`value\`: string - Currently active tab value
+- \`defaultValue\`: string - Default tab (uncontrolled)
+- \`onChange\`: (value: string) => void - Tab change handler
+- \`variant\`: 'default' | 'pills' | 'underline' - Visual style
+- \`size\`: 'sm' | 'md' | 'lg' - Tab size
+- \`intent\`: 'primary' | 'neutral' | 'success' | 'error' | 'warning' - Color scheme
+- \`style\`: ViewStyle - Additional styles
+- \`testID\`: string - Test identifier
+- \`children\`: ReactNode - Tab components
+`,
+  features: [
+    "Integrated tab navigation and content panels",
+    "Three visual variants",
+    "Controlled and uncontrolled modes",
+    "Three sizes",
+    "Five intent colors",
+    "Disabled tabs",
+    "Automatic content switching",
+  ],
+  bestPractices: [
+    "Use Tabs for content that belongs together",
+    "Use TabBar for navigation without content management",
+    "Keep 3-5 tabs for optimal UX",
+    "Lazy load tab content if heavy",
+    "Use descriptive tab labels",
+    "Consider vertical tabs for many options",
+  ],
+  usage: `
+import { Tabs, Tab, Text } from '@idealyst/components';
+
+<Tabs defaultValue="tab1" variant="underline">
+  <Tab value="tab1" label="Overview">
+    <Text>Overview content</Text>
+  </Tab>
+  <Tab value="tab2" label="Details">
+    <Text>Details content</Text>
+  </Tab>
+  <Tab value="tab3" label="Settings">
+    <Text>Settings content</Text>
+  </Tab>
+</Tabs>
+`,
+  examples: {
+    basic: `import { Tabs, Tab, Text } from '@idealyst/components';
+
+<Tabs defaultValue="1">
+  <Tab value="1" label="First">
+    <Text>First tab content</Text>
+  </Tab>
+  <Tab value="2" label="Second">
+    <Text>Second tab content</Text>
+  </Tab>
+</Tabs>`,
+
+    variants: `import { Tabs, Tab, View, Text } from '@idealyst/components';
+
+<View spacing="lg">
+  <Tabs defaultValue="a" variant="default">
+    <Tab value="a" label="Default"><Text>Content A</Text></Tab>
+    <Tab value="b" label="Style"><Text>Content B</Text></Tab>
+  </Tabs>
+
+  <Tabs defaultValue="a" variant="pills">
+    <Tab value="a" label="Pills"><Text>Content A</Text></Tab>
+    <Tab value="b" label="Style"><Text>Content B</Text></Tab>
+  </Tabs>
+
+  <Tabs defaultValue="a" variant="underline">
+    <Tab value="a" label="Underline"><Text>Content A</Text></Tab>
+    <Tab value="b" label="Style"><Text>Content B</Text></Tab>
+  </Tabs>
+</View>`,
+
+    "with-icons": `import { Tabs, Tab, View, Text, Card } from '@idealyst/components';
+
+<Tabs defaultValue="profile" variant="pills" intent="primary">
+  <Tab value="profile" label="Profile">
+    <Card padding="md">
+      <View spacing="md">
+        <Text weight="bold">Profile Settings</Text>
+        <Text>Update your profile information</Text>
+      </View>
+    </Card>
+  </Tab>
+  <Tab value="security" label="Security">
+    <Card padding="md">
+      <View spacing="md">
+        <Text weight="bold">Security Settings</Text>
+        <Text>Manage your security preferences</Text>
+      </View>
+    </Card>
+  </Tab>
+</Tabs>`,
+
+    interactive: `import { Tabs, Tab, View, Text, Input, Button } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [activeTab, setActiveTab] = useState('account');
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+
+  return (
+    <Tabs value={activeTab} onChange={setActiveTab} variant="underline">
+      <Tab value="account" label="Account">
+        <View spacing="md" style={{ padding: 16 }}>
+          <Text weight="bold">Account Information</Text>
+          <Input
+            label="Name"
+            value={name}
+            onChangeText={setName}
+            placeholder="Enter your name"
+          />
+          <Input
+            label="Email"
+            value={email}
+            onChangeText={setEmail}
+            placeholder="Enter your email"
+          />
+          <Button intent="primary">Save Changes</Button>
+        </View>
+      </Tab>
+
+      <Tab value="privacy" label="Privacy">
+        <View spacing="md" style={{ padding: 16 }}>
+          <Text weight="bold">Privacy Settings</Text>
+          <Text>Manage your privacy preferences here</Text>
+        </View>
+      </Tab>
+
+      <Tab value="notifications" label="Notifications">
+        <View spacing="md" style={{ padding: 16 }}>
+          <Text weight="bold">Notification Preferences</Text>
+          <Text>Configure how you receive notifications</Text>
+        </View>
+      </Tab>
+    </Tabs>
+  );
+}`,
+  },
+};

package/src/data/components/Text.ts

@@ -0,0 +1,85 @@
+export const Text = {
+  category: "typography",
+  description: "Styled text component with size, weight, and color variants",
+      props: `
+- \`children\`: React.ReactNode - The text content to display
+- \`size\`: TextSizeVariant - The size variant of the text
+- \`weight\`: TextWeightVariant - The weight of the text
+- \`color\`: TextColorVariant - The color of the text
+- \`align\`: TextAlignVariant - Text alignment
+`,
+  features: [
+    "Four size variants",
+    "Five weight options",
+    "Theme color variants",
+    "Three alignment options",
+    "Cross-platform support",
+    "Inherits parent text styles",
+  ],
+  bestPractices: [
+    "Use semantic sizes (xl for headings, sm for captions)",
+    "Use appropriate weights for hierarchy",
+    "Prefer theme colors over custom colors",
+    "Use 'left' alignment for body text",
+    "Use 'center' for short, important text",
+    "Nest Text components for mixed styles",
+  ],
+  usage: `
+import { Text } from '@idealyst/components';
+
+<Text size="xl" weight="bold" color="primary">
+  Heading Text
+</Text>
+
+<Text size="md" color="secondary">
+  Body text with normal weight
+</Text>
+`,
+  examples: {
+    basic: `import { Text } from '@idealyst/components';
+
+<Text>Simple text content</Text>`,
+
+    variants: `import { Text, View } from '@idealyst/components';
+
+<View spacing="md">
+  <Text size="sm">Small text</Text>
+  <Text size="md">Medium text</Text>
+  <Text size="lg">Large text</Text>
+  <Text size="xl">Extra large text</Text>
+</View>`,
+
+    "with-icons": `import { Text, View, Icon } from '@idealyst/components';
+
+<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+  <Icon name="check-circle" size="md" color="success" />
+  <Text color="success" weight="medium">
+    Verified Account
+  </Text>
+</View>`,
+
+    interactive: `import { Text, View, Button } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <View spacing="md">
+      <Text size="xl" weight="bold" align="center">
+        Counter: {count}
+      </Text>
+
+      <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'center' }}>
+        <Button onPress={() => setCount(count - 1)}>-</Button>
+        <Button onPress={() => setCount(count + 1)}>+</Button>
+      </View>
+
+      <Text size="sm" color="secondary" align="center">
+        Click buttons to change the count
+      </Text>
+    </View>
+  );
+}`,
+  },
+};

package/src/data/components/TextArea.ts

@@ -0,0 +1,155 @@
+export const TextArea = {
+  category: "form",
+  description: "Multi-line text input field for longer text content",
+      props: `
+- \`value\`: string - The current value of the textarea (controlled)
+- \`defaultValue\`: string - The default value for uncontrolled usage
+- \`onChange\`: function - Called when the text content changes
+- \`placeholder\`: string - Placeholder text shown when empty
+- \`disabled\`: boolean - Whether the textarea is disabled
+- \`rows\`: number - Initial number of visible text rows
+- \`minHeight\`: number - Minimum height in pixels
+- \`maxHeight\`: number - Maximum height in pixels
+- \`autoGrow\`: boolean - Whether to automatically grow height to fit content
+- \`maxLength\`: number - Maximum number of characters allowed
+- \`label\`: string - Label text displayed above the textarea
+- \`error\`: string - Error message to display
+- \`helperText\`: string - Helper text displayed below the textarea
+- \`resize\`: TextAreaResizeVariant - How the textarea can be resized (none, vertical, horizontal, both)
+- \`showCharacterCount\`: boolean - Whether to show the character count
+- \`intent\`: TextAreaIntentVariant - The intent/color scheme (for validation states)
+- \`size\`: TextAreaSizeVariant - The size variant of the textarea
+- \`textareaStyle\`: StyleProp<TextStyle> - Additional custom styles for the textarea element
+`,
+  features: [
+    "Multi-line text input",
+    "Auto-grow to fit content",
+    "Character count display",
+    "Min/max height constraints",
+    "Max length validation",
+    "Label and helper text",
+    "Error state",
+    "Resize control (web)",
+    "Three sizes",
+  ],
+  bestPractices: [
+    "Always provide a label",
+    "Use helperText to guide users",
+    "Set maxLength to prevent excessive input",
+    "Show character count for limited fields",
+    "Use autoGrow for dynamic content",
+    "Set minHeight for comfortable input area",
+    "Show inline error messages",
+  ],
+  usage: `
+import { TextArea } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [text, setText] = useState('');
+
+  return (
+    <TextArea
+      label="Description"
+      value={text}
+      onChange={setText}
+      placeholder="Enter a detailed description"
+      rows={4}
+      maxLength={500}
+      showCharacterCount
+      helperText="Provide as much detail as possible"
+    />
+  );
+}
+`,
+  examples: {
+    basic: `import { TextArea } from '@idealyst/components';
+
+<TextArea
+  label="Message"
+  placeholder="Enter your message"
+  rows={4}
+/>`,
+
+    variants: `import { TextArea, View } from '@idealyst/components';
+
+<View spacing="md">
+  <TextArea label="Small" size="sm" rows={3} />
+  <TextArea label="Medium" size="md" rows={4} />
+  <TextArea label="Large" size="lg" rows={5} />
+</View>`,
+
+    "with-icons": `import { TextArea, View, Text } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [feedback, setFeedback] = useState('');
+  const maxLength = 200;
+
+  return (
+    <View spacing="sm">
+      <TextArea
+        label="Feedback"
+        value={feedback}
+        onChange={setFeedback}
+        placeholder="Share your thoughts..."
+        maxLength={maxLength}
+        showCharacterCount
+        autoGrow
+        minHeight={100}
+        maxHeight={300}
+      />
+      <Text size="sm" color="secondary">
+        {feedback.length}/{maxLength} characters
+      </Text>
+    </View>
+  );
+}`,
+
+    interactive: `import { TextArea, View, Button, Text } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [message, setMessage] = useState('');
+  const [error, setError] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleSubmit = () => {
+    if (message.trim().length < 10) {
+      setError('Message must be at least 10 characters');
+      return;
+    }
+    setError('');
+    setSubmitted(true);
+    // Submit logic here
+  };
+
+  if (submitted) {
+    return <Text color="success">Message submitted successfully!</Text>;
+  }
+
+  return (
+    <View spacing="md">
+      <TextArea
+        label="Your Message"
+        value={message}
+        onChange={(val) => {
+          setMessage(val);
+          setError('');
+        }}
+        placeholder="Type your message here..."
+        rows={5}
+        maxLength={500}
+        showCharacterCount
+        error={error}
+        helperText={error || 'Minimum 10 characters required'}
+        autoGrow
+      />
+      <Button intent="primary" onPress={handleSubmit}>
+        Submit
+      </Button>
+    </View>
+  );
+}`,
+  },
+};

package/src/data/components/Tooltip.ts

@@ -0,0 +1,105 @@
+export const Tooltip = {
+  category: "overlay",
+  description: "Contextual tooltip that displays information on hover or focus",
+      props: `
+- \`content\`: string | React.ReactNode - The tooltip content to display
+- \`children\`: React.ReactNode - The element that triggers the tooltip on hover/focus
+- \`placement\`: TooltipPlacement - The placement of the tooltip relative to the trigger
+- \`delay\`: number - Delay in milliseconds before showing the tooltip
+- \`intent\`: TooltipIntentVariant - The intent/color scheme of the tooltip
+- \`size\`: TooltipSizeVariant - The size variant of the tooltip
+`,
+  features: [
+    "Hover and focus triggers",
+    "Four placement options",
+    "Configurable delay",
+    "Five intent colors",
+    "Three sizes",
+    "String or custom content",
+    "Auto-positioning on overflow",
+  ],
+  bestPractices: [
+    "Keep tooltip content concise",
+    "Use for supplementary information only",
+    "Don't hide critical information in tooltips",
+    "Ensure tooltips are keyboard accessible",
+    "Use appropriate placement to avoid obscuring content",
+    "Add small delay to prevent flashing",
+  ],
+  usage: `
+import { Tooltip, Button } from '@idealyst/components';
+
+<Tooltip content="Click to save your changes" placement="top">
+  <Button icon="content-save">Save</Button>
+</Tooltip>
+`,
+  examples: {
+    basic: `import { Tooltip, Button } from '@idealyst/components';
+
+<Tooltip content="This is a tooltip">
+  <Button>Hover me</Button>
+</Tooltip>`,
+
+    variants: `import { Tooltip, Button, View } from '@idealyst/components';
+
+<View spacing="md">
+  <Tooltip content="Top placement" placement="top">
+    <Button>Top</Button>
+  </Tooltip>
+  <Tooltip content="Bottom placement" placement="bottom">
+    <Button>Bottom</Button>
+  </Tooltip>
+  <Tooltip content="Left placement" placement="left">
+    <Button>Left</Button>
+  </Tooltip>
+  <Tooltip content="Right placement" placement="right">
+    <Button>Right</Button>
+  </Tooltip>
+</View>`,
+
+    "with-icons": `import { Tooltip, Icon, Text, View } from '@idealyst/components';
+
+<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+  <Text>Need help?</Text>
+  <Tooltip
+    content="Click here for assistance"
+    placement="right"
+    intent="primary"
+  >
+    <Icon name="help-circle" size="md" color="primary" />
+  </Tooltip>
+</View>`,
+
+    interactive: `import { Tooltip, Button, View, Text } from '@idealyst/components';
+
+function ActionButtons() {
+  return (
+    <View spacing="sm">
+      <View style={{ flexDirection: 'row', gap: 8 }}>
+        <Tooltip content="Save your work" placement="top" delay={500}>
+          <Button icon="content-save" type="contained" intent="primary">
+            Save
+          </Button>
+        </Tooltip>
+
+        <Tooltip content="Undo last action" placement="top" delay={500}>
+          <Button icon="undo" type="outlined">
+            Undo
+          </Button>
+        </Tooltip>
+
+        <Tooltip content="Delete selected items" placement="top" intent="error" delay={500}>
+          <Button icon="delete" type="outlined" intent="error">
+            Delete
+          </Button>
+        </Tooltip>
+      </View>
+
+      <Text size="sm" color="secondary">
+        Hover over buttons to see tooltips
+      </Text>
+    </View>
+  );
+}`,
+  },
+};

package/src/data/components/Video.ts

@@ -0,0 +1,168 @@
+export const Video = {
+  category: "media",
+  description: "Video player component with playback controls and event handlers",
+      props: `
+- \`source\`: VideoSource | string - The video source URL or source object with uri and type
+- \`poster\`: string - URL of the poster image to display before playback
+- \`width\`: number | string - The width of the video player
+- \`height\`: number | string - The height of the video player
+- \`aspectRatio\`: number - The aspect ratio of the video (e.g., 16/9, 4/3)
+- \`controls\`: boolean - Whether to show native playback controls
+- \`autoPlay\`: boolean - Whether to automatically start playing when loaded
+- \`loop\`: boolean - Whether to loop the video playback
+- \`muted\`: boolean - Whether to mute the audio
+- \`playsInline\`: boolean - Whether to play inline on mobile devices (prevents fullscreen)
+- \`preload\`: 'auto' | 'metadata' | 'none' - How much of the video to preload
+- \`onLoad\`: function - Called when the video has loaded
+- \`onError\`: function - Called when an error occurs during playback
+- \`onPlay\`: function - Called when the video starts playing
+- \`onPause\`: function - Called when the video is paused
+- \`onEnd\`: function - Called when the video playback ends
+- \`onProgress\`: function - Called periodically during playback with progress information
+- \`borderRadius\`: number - The border radius of the video player
+`,
+  features: [
+    "Remote and local video sources",
+    "Poster image support",
+    "Playback controls",
+    "Auto-play and loop",
+    "Multiple event callbacks",
+    "Progress tracking",
+    "Aspect ratio control",
+    "Border radius support",
+  ],
+  bestPractices: [
+    "Always provide a poster image",
+    "Use appropriate video formats for cross-platform",
+    "Enable controls for user control",
+    "Avoid autoPlay with audio (UX best practice)",
+    "Use playsInline for better mobile experience",
+    "Provide onError fallback",
+    "Set explicit dimensions or aspect ratio",
+    "Use preload: 'metadata' for better performance",
+  ],
+  usage: `
+import { Video } from '@idealyst/components';
+
+<Video
+  source={{ uri: 'https://example.com/video.mp4', type: 'video/mp4' }}
+  poster="https://example.com/poster.jpg"
+  width="100%"
+  aspectRatio={16/9}
+  controls
+  playsInline
+  onLoad={() => console.log('Video loaded')}
+  onError={(error) => console.error('Video error:', error)}
+/>
+`,
+  examples: {
+    basic: `import { Video } from '@idealyst/components';
+
+<Video
+  source="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+  width={640}
+  height={360}
+  controls
+/>`,
+
+    variants: `import { Video, View } from '@idealyst/components';
+
+<View spacing="md">
+  {/* With controls */}
+  <Video
+    source={{ uri: 'https://example.com/video.mp4' }}
+    width="100%"
+    aspectRatio={16/9}
+    controls
+  />
+
+  {/* Auto-play, looped, muted */}
+  <Video
+    source={{ uri: 'https://example.com/video.mp4' }}
+    width="100%"
+    aspectRatio={16/9}
+    autoPlay
+    loop
+    muted
+    controls={false}
+  />
+</View>`,
+
+    "with-icons": `import { Video, Card, View, Text } from '@idealyst/components';
+
+<Card type="elevated" padding="none">
+  <Video
+    source="https://example.com/video.mp4"
+    poster="https://example.com/poster.jpg"
+    width="100%"
+    aspectRatio={16/9}
+    controls
+    borderRadius={8}
+  />
+  <View spacing="sm" style={{ padding: 16 }}>
+    <Text weight="bold">Video Title</Text>
+    <Text size="sm">Video description and details</Text>
+  </View>
+</Card>`,
+
+    interactive: `import { Video, View, Text, Button } from '@idealyst/components';
+import { useState, useRef } from 'react';
+
+function Example() {
+  const [playing, setPlaying] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const videoRef = useRef(null);
+
+  const handleProgress = ({ currentTime, playableDuration }) => {
+    if (playableDuration > 0) {
+      setProgress((currentTime / playableDuration) * 100);
+    }
+  };
+
+  return (
+    <View spacing="md">
+      <Video
+        ref={videoRef}
+        source={{ uri: 'https://example.com/video.mp4' }}
+        poster="https://example.com/poster.jpg"
+        width="100%"
+        aspectRatio={16/9}
+        controls
+        playsInline
+        onPlay={() => setPlaying(true)}
+        onPause={() => setPlaying(false)}
+        onEnd={() => {
+          setPlaying(false);
+          setProgress(0);
+        }}
+        onProgress={handleProgress}
+        onError={(error) => console.error('Video error:', error)}
+      />
+
+      <View spacing="sm">
+        <Text>
+          Status: {playing ? 'Playing' : 'Paused'} | Progress: {progress.toFixed(1)}%
+        </Text>
+
+        <View style={{ flexDirection: 'row', gap: 8 }}>
+          <Button
+            size="sm"
+            type="outlined"
+            onPress={() => videoRef.current?.play()}
+          >
+            Play
+          </Button>
+          <Button
+            size="sm"
+            type="outlined"
+            onPress={() => videoRef.current?.pause()}
+          >
+            Pause
+          </Button>
+        </View>
+      </View>
+    </View>
+  );
+}`,
+  },
+};