@idealyst/mcp-server 1.0.86 → 1.0.88

package/examples/components/Skeleton.examples.tsx

@@ -0,0 +1,278 @@
+/**
+ * Skeleton Component Examples
+ *
+ * These examples are type-checked against the actual SkeletonProps interface
+ * to ensure accuracy and correctness.
+ */
+
+import React from 'react';
+import { Skeleton, View, Text, Button } from '@idealyst/components';
+
+// Example 1: Basic Skeleton
+export function BasicSkeleton() {
+  return (
+    <View spacing="md">
+      <Skeleton width="100%" height={20} />
+      <Skeleton width="80%" height={20} />
+      <Skeleton width="60%" height={20} />
+    </View>
+  );
+}
+
+// Example 2: Skeleton Shapes
+export function SkeletonShapes() {
+  return (
+    <View spacing="md">
+      <View spacing="sm">
+        <Text weight="semibold">Rectangle</Text>
+        <Skeleton width={200} height={40} shape="rectangle" />
+      </View>
+      <View spacing="sm">
+        <Text weight="semibold">Rounded</Text>
+        <Skeleton width={200} height={40} shape="rounded" />
+      </View>
+      <View spacing="sm">
+        <Text weight="semibold">Circle</Text>
+        <Skeleton width={60} height={60} shape="circle" />
+      </View>
+    </View>
+  );
+}
+
+// Example 3: Skeleton with Custom Border Radius
+export function SkeletonWithBorderRadius() {
+  return (
+    <View spacing="md">
+      <Skeleton width={200} height={40} shape="rounded" borderRadius={4} />
+      <Skeleton width={200} height={40} shape="rounded" borderRadius={8} />
+      <Skeleton width={200} height={40} shape="rounded" borderRadius={16} />
+      <Skeleton width={200} height={40} shape="rounded" borderRadius={24} />
+    </View>
+  );
+}
+
+// Example 4: Skeleton Animation Types
+export function SkeletonAnimationTypes() {
+  return (
+    <View spacing="md">
+      <View spacing="sm">
+        <Text weight="semibold">Pulse Animation</Text>
+        <Skeleton width="100%" height={40} animation="pulse" />
+      </View>
+      <View spacing="sm">
+        <Text weight="semibold">Wave Animation</Text>
+        <Skeleton width="100%" height={40} animation="wave" />
+      </View>
+      <View spacing="sm">
+        <Text weight="semibold">No Animation</Text>
+        <Skeleton width="100%" height={40} animation="none" />
+      </View>
+    </View>
+  );
+}
+
+// Example 5: Text Skeleton
+export function TextSkeleton() {
+  return (
+    <View spacing="md">
+      <View spacing="sm">
+        <Skeleton width="100%" height={24} shape="rounded" />
+        <Skeleton width="95%" height={16} shape="rounded" />
+        <Skeleton width="90%" height={16} shape="rounded" />
+        <Skeleton width="85%" height={16} shape="rounded" />
+      </View>
+    </View>
+  );
+}
+
+// Example 6: Avatar Skeleton
+export function AvatarSkeleton() {
+  return (
+    <View spacing="md">
+      <View spacing="sm">
+        <Skeleton width={40} height={40} shape="circle" />
+        <View spacing="xs">
+          <Skeleton width={120} height={16} shape="rounded" />
+          <Skeleton width={80} height={12} shape="rounded" />
+        </View>
+      </View>
+    </View>
+  );
+}
+
+// Example 7: Card Skeleton
+export function CardSkeleton() {
+  return (
+    <View background="primary" spacing="md" radius="lg">
+      <Skeleton width="100%" height={200} shape="rounded" />
+      <View spacing="sm">
+        <Skeleton width="80%" height={24} shape="rounded" />
+        <Skeleton width="100%" height={16} shape="rounded" />
+        <Skeleton width="100%" height={16} shape="rounded" />
+        <Skeleton width="60%" height={16} shape="rounded" />
+      </View>
+      <Skeleton width={120} height={40} shape="rounded" />
+    </View>
+  );
+}
+
+// Example 8: List Skeleton
+export function ListSkeleton() {
+  return (
+    <View spacing="md">
+      {Array.from({ length: 5 }, (_, index) => (
+        <View key={index} spacing="sm" background="primary" radius="md">
+          <View spacing="sm">
+            <Skeleton width={50} height={50} shape="circle" />
+            <View spacing="xs">
+              <Skeleton width={150} height={16} shape="rounded" />
+              <Skeleton width={100} height={12} shape="rounded" />
+            </View>
+          </View>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+// Example 9: Profile Skeleton
+export function ProfileSkeleton() {
+  return (
+    <View spacing="lg">
+      <View spacing="md">
+        <Skeleton width={100} height={100} shape="circle" />
+        <View spacing="sm">
+          <Skeleton width={200} height={24} shape="rounded" />
+          <Skeleton width={150} height={16} shape="rounded" />
+        </View>
+      </View>
+      <View spacing="sm">
+        <Skeleton width="100%" height={16} shape="rounded" />
+        <Skeleton width="100%" height={16} shape="rounded" />
+        <Skeleton width="80%" height={16} shape="rounded" />
+      </View>
+      <View spacing="sm">
+        <Skeleton width={120} height={40} shape="rounded" />
+        <Skeleton width={100} height={40} shape="rounded" />
+      </View>
+    </View>
+  );
+}
+
+// Example 10: Table Skeleton
+export function TableSkeleton() {
+  return (
+    <View spacing="md">
+      <View spacing="sm">
+        <Skeleton width="100%" height={40} shape="rectangle" />
+      </View>
+      {Array.from({ length: 5 }, (_, index) => (
+        <View key={index} spacing="sm">
+          <Skeleton width="100%" height={60} shape="rectangle" />
+        </View>
+      ))}
+    </View>
+  );
+}
+
+// Example 11: Loading State Toggle
+export function LoadingStateToggle() {
+  const [loading, setLoading] = React.useState(true);
+
+  return (
+    <View spacing="lg">
+      <Button onPress={() => setLoading(!loading)}>
+        {loading ? 'Show Content' : 'Show Loading'}
+      </Button>
+      <View background="primary" spacing="md" radius="lg">
+        {loading ? (
+          <View spacing="md">
+            <Skeleton width={60} height={60} shape="circle" />
+            <View spacing="sm">
+              <Skeleton width="100%" height={20} shape="rounded" />
+              <Skeleton width="80%" height={16} shape="rounded" />
+              <Skeleton width="60%" height={16} shape="rounded" />
+            </View>
+          </View>
+        ) : (
+          <View spacing="md">
+            <Text size="lg" weight="bold">
+              Content Loaded
+            </Text>
+            <Text>
+              This is the actual content that appears after loading is complete.
+            </Text>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}
+
+// Example 12: Article Skeleton
+export function ArticleSkeleton() {
+  return (
+    <View spacing="lg">
+      <View spacing="md">
+        <Skeleton width="100%" height={200} shape="rounded" />
+      </View>
+      <View spacing="sm">
+        <Skeleton width="90%" height={32} shape="rounded" />
+        <Skeleton width="60%" height={16} shape="rounded" />
+      </View>
+      <View spacing="sm">
+        <View spacing="xs">
+          <Skeleton width={40} height={40} shape="circle" />
+          <View spacing="xs">
+            <Skeleton width={120} height={14} shape="rounded" />
+            <Skeleton width={80} height={12} shape="rounded" />
+          </View>
+        </View>
+      </View>
+      <View spacing="xs">
+        <Skeleton width="100%" height={16} shape="rounded" />
+        <Skeleton width="100%" height={16} shape="rounded" />
+        <Skeleton width="100%" height={16} shape="rounded" />
+        <Skeleton width="100%" height={16} shape="rounded" />
+        <Skeleton width="70%" height={16} shape="rounded" />
+      </View>
+    </View>
+  );
+}
+
+// Example 13: Dashboard Skeleton
+export function DashboardSkeleton() {
+  return (
+    <View spacing="lg">
+      <View spacing="md">
+        <Skeleton width={200} height={32} shape="rounded" />
+      </View>
+      <View spacing="md">
+        <View spacing="md">
+          <View background="primary" spacing="md" radius="lg">
+            <Skeleton width={100} height={20} shape="rounded" />
+            <Skeleton width={150} height={48} shape="rounded" />
+          </View>
+          <View background="primary" spacing="md" radius="lg">
+            <Skeleton width={100} height={20} shape="rounded" />
+            <Skeleton width={150} height={48} shape="rounded" />
+          </View>
+        </View>
+        <View spacing="md">
+          <View background="primary" spacing="md" radius="lg">
+            <Skeleton width={100} height={20} shape="rounded" />
+            <Skeleton width={150} height={48} shape="rounded" />
+          </View>
+          <View background="primary" spacing="md" radius="lg">
+            <Skeleton width={100} height={20} shape="rounded" />
+            <Skeleton width={150} height={48} shape="rounded" />
+          </View>
+        </View>
+      </View>
+      <View background="primary" spacing="md" radius="lg">
+        <Skeleton width={150} height={24} shape="rounded" />
+        <Skeleton width="100%" height={200} shape="rounded" />
+      </View>
+    </View>
+  );
+}

package/examples/components/Slider.examples.tsx

@@ -0,0 +1,249 @@
+/**
+ * Slider Component Examples
+ *
+ * These examples are type-checked against the actual SliderProps interface
+ * to ensure accuracy and correctness.
+ */
+
+import React from 'react';
+import { Slider, View, Text } from '@idealyst/components';
+
+// Example 1: Basic Slider
+export function BasicSlider() {
+  const [value, setValue] = React.useState(50);
+
+  return (
+    <Slider
+      value={value}
+      onValueChange={setValue}
+      min={0}
+      max={100}
+    />
+  );
+}
+
+// Example 2: Slider with Value Display
+export function SliderWithValue() {
+  const [value, setValue] = React.useState(25);
+
+  return (
+    <Slider
+      value={value}
+      onValueChange={setValue}
+      min={0}
+      max={100}
+      showValue
+    />
+  );
+}
+
+// Example 3: Slider with Min/Max Labels
+export function SliderWithMinMax() {
+  const [value, setValue] = React.useState(50);
+
+  return (
+    <Slider
+      value={value}
+      onValueChange={setValue}
+      min={0}
+      max={100}
+      showMinMax
+      showValue
+    />
+  );
+}
+
+// Example 4: Slider with Steps
+export function SliderWithSteps() {
+  const [value, setValue] = React.useState(50);
+
+  return (
+    <View spacing="md">
+      <Text>Value: {value}</Text>
+      <Slider
+        value={value}
+        onValueChange={setValue}
+        min={0}
+        max={100}
+        step={10}
+        showValue
+        showMinMax
+      />
+    </View>
+  );
+}
+
+// Example 5: Slider Sizes
+export function SliderSizes() {
+  const [value, setValue] = React.useState(50);
+
+  return (
+    <View spacing="lg">
+      <Slider size="xs" value={value} onValueChange={setValue} min={0} max={100} showValue />
+      <Slider size="sm" value={value} onValueChange={setValue} min={0} max={100} showValue />
+      <Slider size="md" value={value} onValueChange={setValue} min={0} max={100} showValue />
+      <Slider size="lg" value={value} onValueChange={setValue} min={0} max={100} showValue />
+      <Slider size="xl" value={value} onValueChange={setValue} min={0} max={100} showValue />
+    </View>
+  );
+}
+
+// Example 6: Slider Intents
+export function SliderIntents() {
+  const [value, setValue] = React.useState(50);
+
+  return (
+    <View spacing="md">
+      <Slider intent="primary" value={value} onValueChange={setValue} min={0} max={100} showValue />
+      <Slider intent="success" value={value} onValueChange={setValue} min={0} max={100} showValue />
+      <Slider intent="error" value={value} onValueChange={setValue} min={0} max={100} showValue />
+      <Slider intent="warning" value={value} onValueChange={setValue} min={0} max={100} showValue />
+      <Slider intent="info" value={value} onValueChange={setValue} min={0} max={100} showValue />
+    </View>
+  );
+}
+
+// Example 7: Slider with Icon
+export function SliderWithIcon() {
+  const [volume, setVolume] = React.useState(50);
+
+  return (
+    <View spacing="sm">
+      <Text>Volume: {volume}%</Text>
+      <Slider
+        icon="volume-high"
+        value={volume}
+        onValueChange={setVolume}
+        min={0}
+        max={100}
+        showValue
+      />
+    </View>
+  );
+}
+
+// Example 8: Slider with Marks
+export function SliderWithMarks() {
+  const [value, setValue] = React.useState(50);
+
+  const marks = [
+    { value: 0, label: '0°C' },
+    { value: 25, label: '25°C' },
+    { value: 50, label: '50°C' },
+    { value: 75, label: '75°C' },
+    { value: 100, label: '100°C' },
+  ];
+
+  return (
+    <Slider
+      value={value}
+      onValueChange={setValue}
+      min={0}
+      max={100}
+      marks={marks}
+      showValue
+    />
+  );
+}
+
+// Example 9: Disabled Slider
+export function DisabledSlider() {
+  return (
+    <Slider
+      value={60}
+      onValueChange={() => {}}
+      min={0}
+      max={100}
+      disabled
+      showValue
+      showMinMax
+    />
+  );
+}
+
+// Example 10: Price Range Slider
+export function PriceRangeSlider() {
+  const [price, setPrice] = React.useState(500);
+
+  return (
+    <View spacing="sm">
+      <Text weight="bold">Maximum Price: ${price}</Text>
+      <Slider
+        icon="currency-usd"
+        value={price}
+        onValueChange={setPrice}
+        min={0}
+        max={1000}
+        step={50}
+        showValue
+        showMinMax
+        intent="success"
+      />
+    </View>
+  );
+}
+
+// Example 11: Brightness Control
+export function BrightnessControl() {
+  const [brightness, setBrightness] = React.useState(75);
+
+  return (
+    <View spacing="sm">
+      <Text>Brightness: {brightness}%</Text>
+      <Slider
+        icon="brightness-6"
+        value={brightness}
+        onValueChange={setBrightness}
+        min={0}
+        max={100}
+        step={5}
+        intent="warning"
+      />
+    </View>
+  );
+}
+
+// Example 12: Multiple Sliders with onValueCommit
+export function MultipleSliders() {
+  const [red, setRed] = React.useState(128);
+  const [green, setGreen] = React.useState(128);
+  const [blue, setBlue] = React.useState(128);
+
+  return (
+    <View spacing="md">
+      <View
+        style={{
+          height: 100,
+          backgroundColor: `rgb(${red}, ${green}, ${blue})`,
+          borderRadius: 8,
+        }}
+      />
+      <View spacing="md">
+        <Slider
+          value={red}
+          onValueChange={setRed}
+          min={0}
+          max={255}
+          showValue
+          intent="error"
+        />
+        <Slider
+          value={green}
+          onValueChange={setGreen}
+          min={0}
+          max={255}
+          showValue
+          intent="success"
+        />
+        <Slider
+          value={blue}
+          onValueChange={setBlue}
+          min={0}
+          max={255}
+          showValue
+          intent="info"
+        />
+      </View>
+    </View>
+  );
+}

package/examples/components/Switch.examples.tsx

@@ -0,0 +1,94 @@
+/**
+ * Switch Component Examples
+ *
+ * These examples are type-checked against the actual SwitchProps interface
+ * to ensure accuracy and correctness.
+ */
+
+import React from 'react';
+import { Switch, View, Text } from '@idealyst/components';
+
+// Example 1: Basic Switch
+export function BasicSwitch() {
+  const [checked, setChecked] = React.useState(false);
+
+  return (
+    <Switch checked={checked} onCheckedChange={setChecked} />
+  );
+}
+
+// Example 2: Switch Sizes
+export function SwitchSizes() {
+  const [checked, setChecked] = React.useState(false);
+
+  return (
+    <>
+      <Switch checked={checked} onCheckedChange={setChecked} size="xs" />
+      <Switch checked={checked} onCheckedChange={setChecked} size="sm" />
+      <Switch checked={checked} onCheckedChange={setChecked} size="md" />
+      <Switch checked={checked} onCheckedChange={setChecked} size="lg" />
+      <Switch checked={checked} onCheckedChange={setChecked} size="xl" />
+    </>
+  );
+}
+
+// Example 3: Switch Intents
+export function SwitchIntents() {
+  const [checked, setChecked] = React.useState(true);
+
+  return (
+    <>
+      <Switch checked={checked} onCheckedChange={setChecked} intent="primary" />
+      <Switch checked={checked} onCheckedChange={setChecked} intent="success" />
+      <Switch checked={checked} onCheckedChange={setChecked} intent="error" />
+      <Switch checked={checked} onCheckedChange={setChecked} intent="warning" />
+      <Switch checked={checked} onCheckedChange={setChecked} intent="info" />
+    </>
+  );
+}
+
+// Example 4: Disabled Switch
+export function DisabledSwitch() {
+  return (
+    <>
+      <Switch checked={false} onCheckedChange={() => {}} disabled />
+      <Switch checked={true} onCheckedChange={() => {}} disabled />
+    </>
+  );
+}
+
+// Example 5: Switch with Label
+export function SwitchWithLabel() {
+  const [checked, setChecked] = React.useState(false);
+
+  return (
+    <View spacing="sm" style={{ flexDirection: 'row', alignItems: 'center' }}>
+      <Switch checked={checked} onCheckedChange={setChecked} />
+      <Text>Enable notifications</Text>
+    </View>
+  );
+}
+
+// Example 6: Form with Switches
+export function FormWithSwitches() {
+  const [notifications, setNotifications] = React.useState(true);
+  const [emailUpdates, setEmailUpdates] = React.useState(false);
+  const [darkMode, setDarkMode] = React.useState(false);
+
+  return (
+    <View spacing="md">
+      <View spacing="sm" style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+        <Text>Push Notifications</Text>
+        <Switch checked={notifications} onCheckedChange={setNotifications} />
+      </View>
+      <View spacing="sm" style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+        <Text>Email Updates</Text>
+        <Switch checked={emailUpdates} onCheckedChange={setEmailUpdates} />
+      </View>
+      <View spacing="sm" style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+        <Text>Dark Mode</Text>
+        <Switch checked={darkMode} onCheckedChange={setDarkMode} />
+      </View>
+    </View>
+  );
+}