@idealyst/mcp-server 1.0.84

package/src/data/components/Slider.ts

@@ -0,0 +1,150 @@
+export const Slider = {
+  category: "form",
+  description: "Input slider for selecting numeric values from a range",
+      props: `
+- \`value\`: number - The current value of the slider (controlled)
+- \`defaultValue\`: number - The default value for uncontrolled usage
+- \`min\`: number - The minimum value of the slider range
+- \`max\`: number - The maximum value of the slider range
+- \`step\`: number - The increment step when moving the slider
+- \`disabled\`: boolean - Whether the slider is disabled
+- \`showValue\`: boolean - Whether to display the current value
+- \`showMinMax\`: boolean - Whether to show min and max labels
+- \`marks\`: SliderMark[] - Array of marks to display on the slider track
+- \`intent\`: SliderIntentVariant - The intent/color scheme of the slider
+- \`size\`: SliderSizeVariant - The size variant of the slider
+- \`icon\`: IconName | React.ReactNode - Icon to display in the slider thumb
+- \`onValueChange\`: function - Called when the slider value changes during dragging
+- \`onValueCommit\`: function - Called when the user finishes changing the value (on release)
+`,
+  features: [
+    "Controlled and uncontrolled modes",
+    "Min/max value constraints",
+    "Step increment",
+    "Custom marks",
+    "Value display",
+    "Min/max labels",
+    "Three sizes",
+    "Five intent colors",
+    "Icon support in thumb",
+    "Change and commit callbacks",
+  ],
+  bestPractices: [
+    "Use for continuous numeric values",
+    "Show current value for user feedback",
+    "Use marks for important values",
+    "Set appropriate step size for precision",
+    "Use onValueCommit for expensive operations",
+    "Provide min/max labels for context",
+  ],
+  usage: `
+import { Slider } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [value, setValue] = useState(50);
+
+  return (
+    <Slider
+      value={value}
+      onValueChange={setValue}
+      min={0}
+      max={100}
+      step={5}
+      showValue
+      showMinMax
+    />
+  );
+}
+`,
+  examples: {
+    basic: `import { Slider } from '@idealyst/components';
+
+<Slider min={0} max={100} defaultValue={50} />`,
+
+    variants: `import { Slider, View } from '@idealyst/components';
+
+<View spacing="md">
+  <Slider size="sm" value={25} />
+  <Slider size="md" value={50} />
+  <Slider size="lg" value={75} />
+</View>`,
+
+    "with-icons": `import { Slider, View, Text, Icon } from '@idealyst/components';
+import { useState } from 'react';
+
+function VolumeControl() {
+  const [volume, setVolume] = useState(50);
+
+  return (
+    <View spacing="sm">
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+        <Icon name="volume-low" size="md" />
+        <Slider
+          value={volume}
+          onValueChange={setVolume}
+          min={0}
+          max={100}
+          icon="volume-medium"
+          style={{ flex: 1 }}
+        />
+        <Icon name="volume-high" size="md" />
+      </View>
+      <Text align="center">{volume}%</Text>
+    </View>
+  );
+}
+
+// Brightness control with icon in thumb
+function BrightnessControl() {
+  const [brightness, setBrightness] = useState(75);
+
+  return (
+    <View spacing="sm">
+      <Text>Brightness: {brightness}%</Text>
+      <Slider
+        value={brightness}
+        onValueChange={setBrightness}
+        min={0}
+        max={100}
+        icon="brightness-6"
+        intent="warning"
+        showMinMax
+      />
+    </View>
+  );
+}`,
+
+    interactive: `import { Slider, View, Text, Button } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [price, setPrice] = useState(50);
+
+  const marks = [
+    { value: 0, label: '$0' },
+    { value: 50, label: '$50' },
+    { value: 100, label: '$100' },
+  ];
+
+  return (
+    <View spacing="md">
+      <Text weight="bold">Price Range: \${price}</Text>
+      <Slider
+        value={price}
+        onValueChange={setPrice}
+        min={0}
+        max={100}
+        step={5}
+        marks={marks}
+        showValue
+        intent="primary"
+      />
+      <Button onPress={() => console.log('Filter:', price)}>
+        Apply Filter
+      </Button>
+    </View>
+  );
+}`,
+  },
+};

package/src/data/components/Switch.ts

@@ -0,0 +1,127 @@
+export const Switch = {
+  category: "form",
+  description: "Toggle switch for binary on/off states",
+      props: `
+- \`checked\`: boolean - Whether the switch is in the on/checked state
+- \`onCheckedChange\`: function - Called when the switch state changes
+- \`disabled\`: boolean - Whether the switch is disabled
+- \`label\`: string - Label text to display next to the switch
+- \`labelPosition\`: 'left' | 'right' - Position of the label relative to the switch
+- \`intent\`: SwitchIntentVariant - The intent/color scheme of the switch
+- \`size\`: SwitchSizeVariant - The size variant of the switch
+- \`enabledIcon\`: IconName | React.ReactNode - Icon to display when switch is on
+- \`disabledIcon\`: IconName | React.ReactNode - Icon to display when switch is off
+`,
+  features: [
+    "Binary on/off toggle",
+    "Label with configurable position",
+    "Three sizes",
+    "Five intent colors",
+    "Custom icons for states",
+    "Disabled state",
+    "Animated transition",
+  ],
+  bestPractices: [
+    "Use for binary settings (on/off, enabled/disabled)",
+    "Provide clear labels",
+    "Use intent colors to indicate state meaning",
+    "Place label on left for form layouts",
+    "Use icons sparingly for clarity",
+    "Immediate effect - no submit button needed",
+  ],
+  usage: `
+import { Switch } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [enabled, setEnabled] = useState(false);
+
+  return (
+    <Switch
+      checked={enabled}
+      onCheckedChange={setEnabled}
+      label="Enable notifications"
+      intent="primary"
+    />
+  );
+}
+`,
+  examples: {
+    basic: `import { Switch } from '@idealyst/components';
+
+<Switch label="Enable feature" />`,
+
+    variants: `import { Switch, View } from '@idealyst/components';
+
+<View spacing="md">
+  <Switch label="Small" size="sm" checked />
+  <Switch label="Medium" size="md" checked />
+  <Switch label="Large" size="lg" checked />
+</View>`,
+
+    "with-icons": `import { Switch, View } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [darkMode, setDarkMode] = useState(false);
+
+  return (
+    <Switch
+      checked={darkMode}
+      onCheckedChange={setDarkMode}
+      label="Dark Mode"
+      enabledIcon="weather-night"
+      disabledIcon="white-balance-sunny"
+      intent="primary"
+    />
+  );
+}`,
+
+    interactive: `import { Switch, View, Text, Card } from '@idealyst/components';
+import { useState } from 'react';
+
+function SettingsPanel() {
+  const [settings, setSettings] = useState({
+    notifications: true,
+    location: false,
+    analytics: true,
+  });
+
+  const toggle = (key: string) => {
+    setSettings({ ...settings, [key]: !settings[key] });
+  };
+
+  return (
+    <Card type="outlined" padding="md">
+      <View spacing="md">
+        <Text weight="bold">Privacy Settings</Text>
+
+        <Switch
+          checked={settings.notifications}
+          onCheckedChange={() => toggle('notifications')}
+          label="Push Notifications"
+          labelPosition="left"
+          intent="primary"
+        />
+
+        <Switch
+          checked={settings.location}
+          onCheckedChange={() => toggle('location')}
+          label="Location Services"
+          labelPosition="left"
+          intent="warning"
+        />
+
+        <Switch
+          checked={settings.analytics}
+          onCheckedChange={() => toggle('analytics')}
+          label="Analytics & Data"
+          labelPosition="left"
+          intent="neutral"
+        />
+      </View>
+    </Card>
+  );
+}`,
+  },
+};

package/src/data/components/TabBar.ts

@@ -0,0 +1,142 @@
+export const TabBar = {
+  category: "navigation",
+  description: "Tab bar navigation component for switching between views or sections",
+      props: `
+- \`items\`: TabBarItem[] - Array of tab items to display
+- \`value\`: string - The currently selected tab value (controlled)
+- \`defaultValue\`: string - The default selected tab for uncontrolled usage
+- \`onChange\`: function - Called when the selected tab changes
+- \`type\`: TabBarType - The visual style variant (default, underlined, pills)
+- \`size\`: TabBarSizeVariant - The size variant of the tabs
+- \`pillMode\`: TabBarPillMode - Mode for pills variant: 'light' for light backgrounds (dark pill), 'dark' for dark backgrounds (light pill)
+`,
+  features: [
+    "Three visual variants",
+    "Controlled and uncontrolled modes",
+    "Three sizes",
+    "Five intent colors",
+    "Disabled tabs",
+    "Simple configuration",
+  ],
+  bestPractices: [
+    "Use 'underline' variant for page-level navigation",
+    "Use 'pills' variant for contained sections",
+    "Keep tab labels short (1-2 words)",
+    "Use 3-5 tabs for optimal UX",
+    "Disable tabs when content is unavailable",
+    "Preload tab content for smooth transitions",
+  ],
+  usage: `
+import { TabBar } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [activeTab, setActiveTab] = useState('home');
+
+  const items = [
+    { value: 'home', label: 'Home' },
+    { value: 'profile', label: 'Profile' },
+    { value: 'settings', label: 'Settings' },
+  ];
+
+  return (
+    <TabBar
+      items={items}
+      value={activeTab}
+      onChange={setActiveTab}
+      type="underline"
+    />
+  );
+}
+`,
+  examples: {
+    basic: `import { TabBar } from '@idealyst/components';
+
+const items = [
+  { value: '1', label: 'Tab 1' },
+  { value: '2', label: 'Tab 2' },
+];
+
+<TabBar items={items} defaultValue="1" />`,
+
+    variants: `import { TabBar, View } from '@idealyst/components';
+
+const items = [
+  { value: 'a', label: 'First' },
+  { value: 'b', label: 'Second' },
+];
+
+<View spacing="md">
+  <TabBar items={items} type="default" />
+  <TabBar items={items} type="pills" />
+  <TabBar items={items} type="underline" />
+</View>`,
+
+    "with-icons": `import { TabBar, View, Text } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [tab, setTab] = useState('overview');
+
+  const items = [
+    { value: 'overview', label: 'Overview' },
+    { value: 'analytics', label: 'Analytics' },
+    { value: 'reports', label: 'Reports' },
+  ];
+
+  return (
+    <View spacing="md">
+      <TabBar
+        items={items}
+        value={tab}
+        onChange={setTab}
+        type="underline"
+        intent="primary"
+      />
+      <Text>{tab} content here</Text>
+    </View>
+  );
+}`,
+
+    interactive: `import { TabBar, View, Text, Card } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [activeTab, setActiveTab] = useState('personal');
+
+  const items = [
+    { value: 'personal', label: 'Personal Info' },
+    { value: 'security', label: 'Security' },
+    { value: 'notifications', label: 'Notifications' },
+    { value: 'billing', label: 'Billing', disabled: true },
+  ];
+
+  const renderContent = () => {
+    switch (activeTab) {
+      case 'personal':
+        return <Text>Personal information settings</Text>;
+      case 'security':
+        return <Text>Security and privacy settings</Text>;
+      case 'notifications':
+        return <Text>Notification preferences</Text>;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <View spacing="md">
+      <TabBar
+        items={items}
+        value={activeTab}
+        onChange={setActiveTab}
+        type="pills"
+      />
+      <Card type="outlined" padding="md">
+        {renderContent()}
+      </Card>
+    </View>
+  );
+}`,
+  },
+};

package/src/data/components/Table.ts

@@ -0,0 +1,153 @@
+export const Table = {
+  category: "data",
+  description: "Data table component for displaying structured tabular data",
+  props: `
+- \`columns\`: TableColumn<T>[] - Column definitions
+  - \`key\`: string - Unique column key
+  - \`title\`: string - Column header title
+  - \`dataIndex\`: string - Key in data object (optional)
+  - \`render\`: (value, row, index) => ReactNode - Custom cell renderer
+  - \`width\`: number | string - Column width
+  - \`align\`: 'left' | 'center' | 'right' - Text alignment
+- \`data\`: T[] - Array of data objects
+- \`variant\`: 'default' | 'bordered' | 'striped' - Visual style
+- \`size\`: 'sm' | 'md' | 'lg' - Cell padding/size
+- \`stickyHeader\`: boolean - Keep header fixed on scroll
+- \`onRowPress\`: (row: T, index: number) => void - Row click handler
+- \`style\`: ViewStyle - Additional styles
+- \`testID\`: string - Test identifier
+`,
+  features: [
+    "Column-based configuration",
+    "Custom cell renderers",
+    "Three visual variants",
+    "Three sizes",
+    "Sticky header support",
+    "Row click handling",
+    "Column alignment",
+    "Custom column widths",
+  ],
+  bestPractices: [
+    "Use render function for complex cell content",
+    "Enable stickyHeader for long tables",
+    "Use 'striped' variant for better readability",
+    "Set column widths for important columns",
+    "Keep column count reasonable for mobile",
+    "Use appropriate size for data density",
+  ],
+  usage: `
+import { Table } from '@idealyst/components';
+
+const columns = [
+  { key: 'name', title: 'Name', dataIndex: 'name' },
+  { key: 'email', title: 'Email', dataIndex: 'email' },
+  {
+    key: 'status',
+    title: 'Status',
+    render: (_, row) => <Badge>{row.status}</Badge>,
+  },
+];
+
+const data = [
+  { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Inactive' },
+];
+
+<Table columns={columns} data={data} variant="striped" />
+`,
+  examples: {
+    basic: `import { Table } from '@idealyst/components';
+
+const columns = [
+  { key: 'id', title: 'ID', dataIndex: 'id' },
+  { key: 'name', title: 'Name', dataIndex: 'name' },
+];
+
+const data = [
+  { id: 1, name: 'Item 1' },
+  { id: 2, name: 'Item 2' },
+];
+
+<Table columns={columns} data={data} />`,
+
+    variants: `import { Table, View } from '@idealyst/components';
+
+const columns = [{ key: 'name', title: 'Name', dataIndex: 'name' }];
+const data = [{ name: 'Test' }];
+
+<View spacing="md">
+  <Table columns={columns} data={data} variant="default" />
+  <Table columns={columns} data={data} variant="bordered" />
+  <Table columns={columns} data={data} variant="striped" />
+</View>`,
+
+    "with-icons": `import { Table, Badge, Icon, View, Text } from '@idealyst/components';
+
+const columns = [
+  {
+    key: 'user',
+    title: 'User',
+    render: (_, row) => (
+      <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+        <Icon name="account-circle" size="sm" />
+        <Text>{row.name}</Text>
+      </View>
+    ),
+  },
+  {
+    key: 'status',
+    title: 'Status',
+    render: (_, row) => (
+      <Badge color={row.active ? 'green' : 'gray'}>
+        {row.active ? 'Active' : 'Inactive'}
+      </Badge>
+    ),
+  },
+];
+
+<Table columns={columns} data={users} />`,
+
+    interactive: `import { Table, Button, View, Text } from '@idealyst/components';
+import { useState } from 'react';
+
+function Example() {
+  const [selected, setSelected] = useState(null);
+
+  const columns = [
+    { key: 'id', title: 'ID', dataIndex: 'id', width: 60 },
+    { key: 'product', title: 'Product', dataIndex: 'name' },
+    { key: 'price', title: 'Price', dataIndex: 'price', align: 'right' },
+    {
+      key: 'actions',
+      title: 'Actions',
+      render: (_, row) => (
+        <Button
+          size="sm"
+          variant="outlined"
+          onPress={() => setSelected(row)}
+        >
+          View
+        </Button>
+      ),
+    },
+  ];
+
+  const data = [
+    { id: 1, name: 'Product A', price: '$29.99' },
+    { id: 2, name: 'Product B', price: '$49.99' },
+  ];
+
+  return (
+    <View spacing="md">
+      <Table
+        columns={columns}
+        data={data}
+        variant="bordered"
+        onRowPress={(row) => setSelected(row)}
+      />
+      {selected && <Text>Selected: {selected.name}</Text>}
+    </View>
+  );
+}`,
+  },
+};