@idealyst/mcp-server 1.0.87 → 1.0.88

package/examples/components/Screen.examples.tsx

@@ -0,0 +1,347 @@
+/**
+ * Screen Component Examples
+ *
+ * These examples are type-checked against the actual ScreenProps interface
+ * to ensure accuracy and correctness.
+ */
+
+import React from 'react';
+import { Screen, View, Text, Button } from '@idealyst/components';
+
+// Example 1: Basic Screen
+export function BasicScreen() {
+  return (
+    <Screen>
+      <Text>This is a basic screen</Text>
+    </Screen>
+  );
+}
+
+// Example 2: Screen with Backgrounds
+export function ScreenWithBackgrounds() {
+  return (
+    <Screen background="primary">
+      <View spacing="md">
+        <Text size="lg" weight="bold">
+          Primary Surface Screen
+        </Text>
+        <Text>This screen has a primary surface background</Text>
+      </View>
+    </Screen>
+  );
+}
+
+// Example 3: Screen with Padding Variants
+export function ScreenWithPadding() {
+  return (
+    <Screen padding="md">
+      <View spacing="md">
+        <Text size="lg" weight="bold">
+          Padded Screen
+        </Text>
+        <Text>This screen has medium padding around all edges</Text>
+      </View>
+    </Screen>
+  );
+}
+
+// Example 4: Screen with Safe Area
+export function ScreenWithSafeArea() {
+  return (
+    <Screen safeArea padding="md">
+      <View spacing="md">
+        <Text size="lg" weight="bold">
+          Safe Area Screen
+        </Text>
+        <Text>
+          This screen respects device safe areas (notches, status bars, etc.)
+        </Text>
+      </View>
+    </Screen>
+  );
+}
+
+// Example 5: Scrollable Screen
+export function ScrollableScreen() {
+  return (
+    <Screen scrollable padding="md">
+      <View spacing="md">
+        <Text size="xl" weight="bold">
+          Scrollable Content
+        </Text>
+        {Array.from({ length: 20 }, (_, i) => (
+          <View
+            key={i}
+            background="primary"
+            spacing="md"
+            radius="md"
+          >
+            <Text weight="semibold">Item {i + 1}</Text>
+            <Text size="sm" >
+              This is a scrollable item. Add enough items to see scrolling behavior.
+            </Text>
+          </View>
+        ))}
+      </View>
+    </Screen>
+  );
+}
+
+// Example 6: Screen with Content Inset
+export function ScreenWithContentInset() {
+  return (
+    <Screen
+      scrollable
+      contentInset={{ top: 20, bottom: 20, left: 16, right: 16 }}
+    >
+      <View spacing="md">
+        <Text size="lg" weight="bold">
+          Screen with Content Inset
+        </Text>
+        <Text>
+          This screen has custom content insets for top, bottom, left, and right.
+        </Text>
+        {Array.from({ length: 10 }, (_, i) => (
+          <View
+            key={i}
+            background="primary"
+            spacing="md"
+            radius="md"
+          >
+            <Text>Content Item {i + 1}</Text>
+          </View>
+        ))}
+      </View>
+    </Screen>
+  );
+}
+
+// Example 7: Profile Screen
+export function ProfileScreen() {
+  return (
+    <Screen background="secondary" padding="md" safeArea>
+      <View spacing="lg">
+        <View spacing="md">
+          <Text size="xl" weight="bold">
+            John Doe
+          </Text>
+          <Text size="md" >
+            john.doe@example.com
+          </Text>
+        </View>
+
+        <View
+          background="primary"
+          spacing="md"
+          radius="lg"
+        >
+          <Text weight="semibold">Account Information</Text>
+          <View spacing="sm">
+            <Text size="sm" >
+              Member since: January 2024
+            </Text>
+            <Text size="sm" >
+              Status: Active
+            </Text>
+          </View>
+        </View>
+
+        <View
+          background="primary"
+          spacing="md"
+          radius="lg"
+        >
+          <Text weight="semibold">Settings</Text>
+          <View spacing="sm">
+            <Text size="sm">Notifications</Text>
+            <Text size="sm">Privacy</Text>
+            <Text size="sm">Security</Text>
+          </View>
+        </View>
+      </View>
+    </Screen>
+  );
+}
+
+// Example 8: Dashboard Screen
+export function DashboardScreen() {
+  return (
+    <Screen background="secondary" padding="lg" safeArea scrollable>
+      <View spacing="lg">
+        <Text size="xl" weight="bold">
+          Dashboard
+        </Text>
+
+        <View spacing="md">
+          <View
+            background="primary"
+            spacing="lg"
+            radius="lg"
+          >
+            <Text weight="semibold" size="lg">
+              Stats Overview
+            </Text>
+            <View spacing="md">
+              <View spacing="xs">
+                <Text size="sm" >
+                  Total Users
+                </Text>
+                <Text size="xl" weight="bold">
+                  1,234
+                </Text>
+              </View>
+              <View spacing="xs">
+                <Text size="sm" >
+                  Revenue
+                </Text>
+                <Text size="xl" weight="bold">
+                  $45,678
+                </Text>
+              </View>
+            </View>
+          </View>
+
+          <View
+            background="primary"
+            spacing="lg"
+            radius="lg"
+          >
+            <Text weight="semibold" size="lg">
+              Recent Activity
+            </Text>
+            <View spacing="sm">
+              <Text size="sm">New user registered</Text>
+              <Text size="sm">Payment received</Text>
+              <Text size="sm">Order completed</Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </Screen>
+  );
+}
+
+// Example 9: Form Screen
+export function FormScreen() {
+  return (
+    <Screen background="secondary" padding="md" safeArea scrollable>
+      <View spacing="lg">
+        <View spacing="sm">
+          <Text size="xl" weight="bold">
+            Create Account
+          </Text>
+          <Text size="md" >
+            Fill in your information below
+          </Text>
+        </View>
+
+        <View spacing="md">
+          <View spacing="xs">
+            <Text size="sm" weight="semibold">
+              Full Name
+            </Text>
+            <View
+              background="primary"
+              spacing="md"
+              radius="md"
+              border="thin"
+            >
+              <Text size="sm" >
+                Enter your full name
+              </Text>
+            </View>
+          </View>
+
+          <View spacing="xs">
+            <Text size="sm" weight="semibold">
+              Email
+            </Text>
+            <View
+              background="primary"
+              spacing="md"
+              radius="md"
+              border="thin"
+            >
+              <Text size="sm" >
+                Enter your email
+              </Text>
+            </View>
+          </View>
+
+          <View spacing="xs">
+            <Text size="sm" weight="semibold">
+              Password
+            </Text>
+            <View
+              background="primary"
+              spacing="md"
+              radius="md"
+              border="thin"
+            >
+              <Text size="sm" >
+                Enter your password
+              </Text>
+            </View>
+          </View>
+        </View>
+
+        <Button>Create Account</Button>
+      </View>
+    </Screen>
+  );
+}
+
+// Example 10: Settings Screen
+export function SettingsScreen() {
+  return (
+    <Screen background="secondary" padding="none" safeArea scrollable>
+      <View spacing="lg" marginVariant="md">
+        <Text size="xl" weight="bold">
+          Settings
+        </Text>
+
+        <View spacing="xs">
+          <Text size="sm" weight="semibold" >
+            ACCOUNT
+          </Text>
+          <View
+            background="primary"
+            spacing="none"
+            radius="md"
+          >
+            <View spacing="md" border="thin" borderColor="gray.200">
+              <Text>Profile</Text>
+            </View>
+            <View spacing="md" border="thin" borderColor="gray.200">
+              <Text>Email & Password</Text>
+            </View>
+            <View spacing="md">
+              <Text>Subscription</Text>
+            </View>
+          </View>
+        </View>
+
+        <View spacing="xs">
+          <Text size="sm" weight="semibold" >
+            PREFERENCES
+          </Text>
+          <View
+            background="primary"
+            spacing="none"
+            radius="md"
+          >
+            <View spacing="md" border="thin" borderColor="gray.200">
+              <Text>Notifications</Text>
+            </View>
+            <View spacing="md" border="thin" borderColor="gray.200">
+              <Text>Privacy</Text>
+            </View>
+            <View spacing="md">
+              <Text>Appearance</Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </Screen>
+  );
+}

package/examples/components/Select.examples.tsx

@@ -0,0 +1,279 @@
+/**
+ * Select Component Examples
+ *
+ * These examples are type-checked against the actual SelectProps interface
+ * to ensure accuracy and correctness.
+ */
+
+import React from 'react';
+import { Select, View } from '@idealyst/components';
+import type { SelectOption } from '@idealyst/components';
+
+const countryOptions: SelectOption[] = [
+  { value: 'us', label: 'United States' },
+  { value: 'ca', label: 'Canada' },
+  { value: 'uk', label: 'United Kingdom' },
+  { value: 'au', label: 'Australia' },
+  { value: 'de', label: 'Germany' },
+];
+
+const fruitOptions: SelectOption[] = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'orange', label: 'Orange' },
+  { value: 'grape', label: 'Grape' },
+  { value: 'mango', label: 'Mango' },
+];
+
+// Example 1: Basic Select
+export function BasicSelect() {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <Select
+      options={fruitOptions}
+      value={value}
+      onValueChange={setValue}
+      placeholder="Select a fruit"
+    />
+  );
+}
+
+// Example 2: Select Types
+export function SelectTypes() {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <View spacing="md">
+      <Select
+        type="outlined"
+        options={fruitOptions}
+        value={value}
+        onValueChange={setValue}
+        placeholder="Outlined"
+      />
+      <Select
+        type="filled"
+        options={fruitOptions}
+        value={value}
+        onValueChange={setValue}
+        placeholder="Filled"
+      />
+    </View>
+  );
+}
+
+// Example 3: Select Sizes
+export function SelectSizes() {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <View spacing="md">
+      <Select
+        size="xs"
+        options={fruitOptions}
+        value={value}
+        onValueChange={setValue}
+        placeholder="Extra Small"
+      />
+      <Select
+        size="sm"
+        options={fruitOptions}
+        value={value}
+        onValueChange={setValue}
+        placeholder="Small"
+      />
+      <Select
+        size="md"
+        options={fruitOptions}
+        value={value}
+        onValueChange={setValue}
+        placeholder="Medium"
+      />
+      <Select
+        size="lg"
+        options={fruitOptions}
+        value={value}
+        onValueChange={setValue}
+        placeholder="Large"
+      />
+      <Select
+        size="xl"
+        options={fruitOptions}
+        value={value}
+        onValueChange={setValue}
+        placeholder="Extra Large"
+      />
+    </View>
+  );
+}
+
+// Example 4: Select with Label
+export function SelectWithLabel() {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <Select
+      label="Country"
+      options={countryOptions}
+      value={value}
+      onValueChange={setValue}
+      placeholder="Select your country"
+    />
+  );
+}
+
+// Example 5: Select with Helper Text
+export function SelectWithHelperText() {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <Select
+      label="Shipping Country"
+      options={countryOptions}
+      value={value}
+      onValueChange={setValue}
+      placeholder="Select country"
+      helperText="Choose where you want your order shipped"
+    />
+  );
+}
+
+// Example 6: Select with Error State
+export function SelectWithError() {
+  const [value, setValue] = React.useState('');
+  const [submitted, setSubmitted] = React.useState(false);
+
+  const hasError = submitted && !value;
+
+  return (
+    <View spacing="md">
+      <Select
+        label="Country *"
+        options={countryOptions}
+        value={value}
+        onValueChange={setValue}
+        placeholder="Select country"
+        error={hasError}
+        helperText={hasError ? 'Please select a country' : 'Required field'}
+      />
+    </View>
+  );
+}
+
+// Example 7: Disabled Select
+export function DisabledSelect() {
+  return (
+    <Select
+      options={fruitOptions}
+      value="apple"
+      onValueChange={() => {}}
+      placeholder="Select a fruit"
+      disabled
+    />
+  );
+}
+
+// Example 8: Searchable Select (Web only)
+export function SearchableSelect() {
+  const [value, setValue] = React.useState('');
+
+  const largeOptions: SelectOption[] = [
+    { value: 'af', label: 'Afghanistan' },
+    { value: 'al', label: 'Albania' },
+    { value: 'dz', label: 'Algeria' },
+    { value: 'ar', label: 'Argentina' },
+    { value: 'au', label: 'Australia' },
+    { value: 'at', label: 'Austria' },
+    { value: 'br', label: 'Brazil' },
+    { value: 'ca', label: 'Canada' },
+    { value: 'cn', label: 'China' },
+    { value: 'fr', label: 'France' },
+    { value: 'de', label: 'Germany' },
+    { value: 'in', label: 'India' },
+    { value: 'it', label: 'Italy' },
+    { value: 'jp', label: 'Japan' },
+    { value: 'mx', label: 'Mexico' },
+    { value: 'ru', label: 'Russia' },
+    { value: 'es', label: 'Spain' },
+    { value: 'uk', label: 'United Kingdom' },
+    { value: 'us', label: 'United States' },
+  ];
+
+  return (
+    <Select
+      label="Country"
+      options={largeOptions}
+      value={value}
+      onValueChange={setValue}
+      placeholder="Search for a country..."
+      searchable
+      maxHeight={300}
+    />
+  );
+}
+
+// Example 9: Select with Disabled Options
+export function SelectWithDisabledOptions() {
+  const [value, setValue] = React.useState('');
+
+  const optionsWithDisabled: SelectOption[] = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana', disabled: true },
+    { value: 'orange', label: 'Orange' },
+    { value: 'grape', label: 'Grape', disabled: true },
+    { value: 'mango', label: 'Mango' },
+  ];
+
+  return (
+    <Select
+      label="Select a fruit"
+      options={optionsWithDisabled}
+      value={value}
+      onValueChange={setValue}
+      placeholder="Some options are disabled"
+      helperText="Banana and Grape are out of stock"
+    />
+  );
+}
+
+// Example 10: Form with Multiple Selects
+export function FormWithSelects() {
+  const [country, setCountry] = React.useState('');
+  const [fruit, setFruit] = React.useState('');
+  const [size, setSize] = React.useState('');
+
+  const sizeOptions: SelectOption[] = [
+    { value: 'xs', label: 'Extra Small' },
+    { value: 's', label: 'Small' },
+    { value: 'm', label: 'Medium' },
+    { value: 'l', label: 'Large' },
+    { value: 'xl', label: 'Extra Large' },
+  ];
+
+  return (
+    <View spacing="md">
+      <Select
+        label="Country"
+        options={countryOptions}
+        value={country}
+        onValueChange={setCountry}
+        placeholder="Select country"
+      />
+      <Select
+        label="Favorite Fruit"
+        options={fruitOptions}
+        value={fruit}
+        onValueChange={setFruit}
+        placeholder="Select fruit"
+      />
+      <Select
+        label="Size"
+        options={sizeOptions}
+        value={size}
+        onValueChange={setSize}
+        placeholder="Select size"
+      />
+    </View>
+  );
+}