@idealyst/mcp-server 1.0.87 → 1.0.88

package/examples/components/Dialog.examples.tsx

@@ -0,0 +1,344 @@
+/**
+ * Dialog Component Examples
+ *
+ * These examples are type-checked against the actual DialogProps interface
+ * to ensure accuracy and correctness.
+ */
+
+import React from 'react';
+import { Dialog, View, Text, Button } from '@idealyst/components';
+
+// Example 1: Basic Dialog
+export function BasicDialog() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <View spacing="md">
+      <Button onPress={() => setOpen(true)}>Open Dialog</Button>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <View spacing="md">
+          <Text size="lg" weight="bold">
+            Welcome!
+          </Text>
+          <Text>This is a basic dialog with some content.</Text>
+          <Button onPress={() => setOpen(false)}>Close</Button>
+        </View>
+      </Dialog>
+    </View>
+  );
+}
+
+// Example 2: Dialog with Title
+export function DialogWithTitle() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <View spacing="md">
+      <Button onPress={() => setOpen(true)}>Open Dialog</Button>
+      <Dialog open={open} onOpenChange={setOpen} title="Dialog Title">
+        <View spacing="md">
+          <Text>This dialog has a title in the header.</Text>
+          <Button onPress={() => setOpen(false)}>Close</Button>
+        </View>
+      </Dialog>
+    </View>
+  );
+}
+
+// Example 3: Dialog Sizes
+export function DialogSizes() {
+  const [size, setSize] = React.useState<'sm' | 'md' | 'lg' | 'fullscreen'>('md');
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <View spacing="md">
+      <View spacing="sm">
+        <Button size="sm" onPress={() => { setSize('sm'); setOpen(true); }}>
+          Small Dialog
+        </Button>
+        <Button size="sm" onPress={() => { setSize('md'); setOpen(true); }}>
+          Medium Dialog
+        </Button>
+        <Button size="sm" onPress={() => { setSize('lg'); setOpen(true); }}>
+          Large Dialog
+        </Button>
+        <Button size="sm" onPress={() => { setSize('fullscreen'); setOpen(true); }}>
+          Fullscreen Dialog
+        </Button>
+      </View>
+      <Dialog open={open} onOpenChange={setOpen} title={`${size.toUpperCase()} Dialog`} size={size}>
+        <View spacing="md">
+          <Text>This is a {size} dialog.</Text>
+          <Button onPress={() => setOpen(false)}>Close</Button>
+        </View>
+      </Dialog>
+    </View>
+  );
+}
+
+// Example 4: Dialog Types
+export function DialogTypes() {
+  const [type, setType] = React.useState<'standard' | 'alert' | 'confirmation'>('standard');
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <View spacing="md">
+      <View spacing="sm">
+        <Button onPress={() => { setType('standard'); setOpen(true); }}>
+          Standard Dialog
+        </Button>
+        <Button onPress={() => { setType('alert'); setOpen(true); }}>
+          Alert Dialog
+        </Button>
+        <Button onPress={() => { setType('confirmation'); setOpen(true); }}>
+          Confirmation Dialog
+        </Button>
+      </View>
+      <Dialog open={open} onOpenChange={setOpen} title="Dialog" type={type}>
+        <View spacing="md">
+          <Text>This is a {type} dialog type.</Text>
+          <Button onPress={() => setOpen(false)}>Close</Button>
+        </View>
+      </Dialog>
+    </View>
+  );
+}
+
+// Example 5: Dialog with Close Button
+export function DialogWithCloseButton() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <View spacing="md">
+      <Button onPress={() => setOpen(true)}>Open Dialog</Button>
+      <Dialog
+        open={open}
+        onOpenChange={setOpen}
+        title="Dialog with Close Button"
+        showCloseButton
+      >
+        <View spacing="md">
+          <Text>This dialog has a close button in the header.</Text>
+        </View>
+      </Dialog>
+    </View>
+  );
+}
+
+// Example 6: Dialog with Backdrop Click Disabled
+export function DialogWithBackdropDisabled() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <View spacing="md">
+      <Button onPress={() => setOpen(true)}>Open Dialog</Button>
+      <Dialog
+        open={open}
+        onOpenChange={setOpen}
+        title="Modal Dialog"
+        closeOnBackdropClick={false}
+      >
+        <View spacing="md">
+          <Text>
+            You cannot close this dialog by clicking outside. Use the close button instead.
+          </Text>
+          <Button onPress={() => setOpen(false)}>Close</Button>
+        </View>
+      </Dialog>
+    </View>
+  );
+}
+
+// Example 7: Confirmation Dialog
+export function ConfirmationDialog() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleConfirm = () => {
+    console.log('Confirmed!');
+    setOpen(false);
+  };
+
+  const handleCancel = () => {
+    console.log('Cancelled');
+    setOpen(false);
+  };
+
+  return (
+    <View spacing="md">
+      <Button intent="error" onPress={() => setOpen(true)}>
+        Delete Item
+      </Button>
+      <Dialog
+        open={open}
+        onOpenChange={setOpen}
+        title="Confirm Deletion"
+        type="confirmation"
+        size="sm"
+      >
+        <View spacing="lg">
+          <Text>Are you sure you want to delete this item? This action cannot be undone.</Text>
+          <View spacing="sm">
+            <Button intent="error" onPress={handleConfirm}>
+              Delete
+            </Button>
+            <Button type="outlined" onPress={handleCancel}>
+              Cancel
+            </Button>
+          </View>
+        </View>
+      </Dialog>
+    </View>
+  );
+}
+
+// Example 8: Form Dialog
+export function FormDialog() {
+  const [open, setOpen] = React.useState(false);
+  const [name, setName] = React.useState('');
+  const [email, setEmail] = React.useState('');
+
+  const handleSubmit = () => {
+    console.log('Submitted:', { name, email });
+    setOpen(false);
+    setName('');
+    setEmail('');
+  };
+
+  return (
+    <View spacing="md">
+      <Button onPress={() => setOpen(true)}>Add User</Button>
+      <Dialog
+        open={open}
+        onOpenChange={setOpen}
+        title="Add New User"
+        size="md"
+        showCloseButton
+      >
+        <View spacing="lg">
+          <View spacing="sm">
+            <Text size="sm" weight="semibold">
+              Name
+            </Text>
+            <Text size="sm" >
+              Placeholder for input
+            </Text>
+          </View>
+          <View spacing="sm">
+            <Text size="sm" weight="semibold">
+              Email
+            </Text>
+            <Text size="sm" >
+              Placeholder for input
+            </Text>
+          </View>
+          <View spacing="sm">
+            <Button intent="primary" onPress={handleSubmit}>
+              Add User
+            </Button>
+            <Button type="outlined" onPress={() => setOpen(false)}>
+              Cancel
+            </Button>
+          </View>
+        </View>
+      </Dialog>
+    </View>
+  );
+}
+
+// Example 9: Alert Dialog
+export function AlertDialog() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <View spacing="md">
+      <Button intent="warning" onPress={() => setOpen(true)}>
+        Show Alert
+      </Button>
+      <Dialog
+        open={open}
+        onOpenChange={setOpen}
+        title="Important Notice"
+        type="alert"
+        size="sm"
+        showCloseButton
+      >
+        <View spacing="lg">
+          <Text>
+            Your session will expire in 5 minutes. Please save your work to avoid losing any
+            changes.
+          </Text>
+          <Button onPress={() => setOpen(false)}>OK</Button>
+        </View>
+      </Dialog>
+    </View>
+  );
+}
+
+// Example 10: Dialog with Animation Types (Native)
+export function DialogWithAnimations() {
+  const [animationType, setAnimationType] = React.useState<'slide' | 'fade' | 'none'>('fade');
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <View spacing="md">
+      <View spacing="sm">
+        <Button size="sm" onPress={() => { setAnimationType('slide'); setOpen(true); }}>
+          Slide Animation
+        </Button>
+        <Button size="sm" onPress={() => { setAnimationType('fade'); setOpen(true); }}>
+          Fade Animation
+        </Button>
+        <Button size="sm" onPress={() => { setAnimationType('none'); setOpen(true); }}>
+          No Animation
+        </Button>
+      </View>
+      <Dialog
+        open={open}
+        onOpenChange={setOpen}
+        title="Animated Dialog"
+        animationType={animationType}
+      >
+        <View spacing="md">
+          <Text>This dialog uses {animationType} animation (Native only).</Text>
+          <Button onPress={() => setOpen(false)}>Close</Button>
+        </View>
+      </Dialog>
+    </View>
+  );
+}
+
+// Example 11: Settings Dialog
+export function SettingsDialog() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <View spacing="md">
+      <Button onPress={() => setOpen(true)}>Open Settings</Button>
+      <Dialog
+        open={open}
+        onOpenChange={setOpen}
+        title="Settings"
+        size="md"
+        showCloseButton
+      >
+        <View spacing="lg">
+          <View spacing="md">
+            <Text weight="semibold">Notifications</Text>
+            <View spacing="sm">
+              <Text size="sm">• Email notifications: On</Text>
+              <Text size="sm">• Push notifications: Off</Text>
+            </View>
+          </View>
+          <View spacing="md">
+            <Text weight="semibold">Privacy</Text>
+            <View spacing="sm">
+              <Text size="sm">• Profile visibility: Public</Text>
+              <Text size="sm">• Activity status: Visible</Text>
+            </View>
+          </View>
+          <Button onPress={() => setOpen(false)}>Save Changes</Button>
+        </View>
+      </Dialog>
+    </View>
+  );
+}

package/examples/components/Divider.examples.tsx

@@ -0,0 +1,258 @@
+/**
+ * Divider Component Examples
+ *
+ * These examples are type-checked against the actual DividerProps interface
+ * to ensure accuracy and correctness.
+ */
+
+import React from 'react';
+import { Divider, View, Text } from '@idealyst/components';
+
+// Example 1: Basic Divider
+export function BasicDivider() {
+  return (
+    <View spacing="md">
+      <Text>Content above</Text>
+      <Divider />
+      <Text>Content below</Text>
+    </View>
+  );
+}
+
+// Example 2: Divider Orientations
+export function DividerOrientations() {
+  return (
+    <View spacing="md">
+      <View spacing="sm">
+        <Text weight="semibold">Horizontal Divider</Text>
+        <Divider orientation="horizontal" />
+      </View>
+      <View spacing="sm">
+        <Text weight="semibold">Vertical Divider</Text>
+        <View spacing="sm">
+          <Text>Left</Text>
+          <Divider orientation="vertical" />
+          <Text>Right</Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+// Example 3: Divider Types
+export function DividerTypes() {
+  return (
+    <View spacing="md">
+      <Text>Solid divider</Text>
+      <Divider type="solid" />
+      <Text>Dashed divider</Text>
+      <Divider type="dashed" />
+      <Text>Dotted divider</Text>
+      <Divider type="dotted" />
+    </View>
+  );
+}
+
+// Example 4: Divider Thickness
+export function DividerThickness() {
+  return (
+    <View spacing="md">
+      <Text>Thin divider</Text>
+      <Divider thickness="thin" />
+      <Text>Medium divider</Text>
+      <Divider thickness="md" />
+      <Text>Thick divider</Text>
+      <Divider thickness="thick" />
+    </View>
+  );
+}
+
+// Example 5: Divider with Intent Colors
+export function DividerWithIntent() {
+  return (
+    <View spacing="md">
+      <Text>Primary intent</Text>
+      <Divider intent="primary" />
+      <Text>Success intent</Text>
+      <Divider intent="success" />
+      <Text>Error intent</Text>
+      <Divider intent="error" />
+      <Text>Warning intent</Text>
+      <Divider intent="warning" />
+      <Text>Info intent</Text>
+      <Divider intent="info" />
+      <Text>Neutral intent</Text>
+      <Divider intent="neutral" />
+    </View>
+  );
+}
+
+// Example 6: Divider with Text
+export function DividerWithText() {
+  return (
+    <View spacing="md">
+      <Text>Section 1 content</Text>
+      <Divider>OR</Divider>
+      <Text>Section 2 content</Text>
+      <Divider>
+        <Text size="sm" >
+          Continue Reading
+        </Text>
+      </Divider>
+      <Text>More content here</Text>
+    </View>
+  );
+}
+
+// Example 7: Divider Spacing
+export function DividerSpacing() {
+  return (
+    <View spacing="md">
+      <Text>No spacing</Text>
+      <Divider spacing="none" />
+      <Text>Small spacing</Text>
+      <Divider spacing="sm" />
+      <Text>Medium spacing</Text>
+      <Divider spacing="md" />
+      <Text>Large spacing</Text>
+      <Divider spacing="lg" />
+      <Text>Extra large spacing</Text>
+      <Divider spacing="xl" />
+      <Text>After content</Text>
+    </View>
+  );
+}
+
+// Example 8: Divider Length Variants
+export function DividerLength() {
+  return (
+    <View spacing="md">
+      <Text>Full length divider</Text>
+      <Divider length="full" />
+      <Text>Auto length divider</Text>
+      <Divider length="auto" />
+      <Text>Custom length divider (80%)</Text>
+      <Divider length={80} />
+    </View>
+  );
+}
+
+// Example 9: Section Dividers
+export function SectionDividers() {
+  return (
+    <View spacing="lg">
+      <View spacing="md">
+        <Text size="lg" weight="bold">
+          Section 1
+        </Text>
+        <Text>
+          This is the first section of content with some important information.
+        </Text>
+      </View>
+
+      <Divider spacing="lg" thickness="md" />
+
+      <View spacing="md">
+        <Text size="lg" weight="bold">
+          Section 2
+        </Text>
+        <Text>
+          This is the second section with more content to display.
+        </Text>
+      </View>
+
+      <Divider spacing="lg" thickness="md" />
+
+      <View spacing="md">
+        <Text size="lg" weight="bold">
+          Section 3
+        </Text>
+        <Text>
+          This is the third and final section.
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+// Example 10: Styled Dividers
+export function StyledDividers() {
+  return (
+    <View spacing="md">
+      <Text weight="bold">Thick Primary Divider</Text>
+      <Divider thickness="thick" intent="primary" spacing="md" />
+
+      <Text weight="bold">Dashed Success Divider</Text>
+      <Divider type="dashed" intent="success" spacing="md" />
+
+      <Text weight="bold">Dotted Warning Divider</Text>
+      <Divider type="dotted" intent="warning" thickness="md" spacing="md" />
+
+      <Text weight="bold">Thick Error Divider</Text>
+      <Divider thickness="thick" intent="error" spacing="md" />
+    </View>
+  );
+}
+
+// Example 11: Form Section Dividers
+export function FormSectionDividers() {
+  return (
+    <View spacing="lg">
+      <View spacing="md">
+        <Text size="lg" weight="bold">
+          Personal Information
+        </Text>
+        <View spacing="sm">
+          <Text size="sm">Name: John Doe</Text>
+          <Text size="sm">Email: john@example.com</Text>
+        </View>
+      </View>
+
+      <Divider spacing="lg">
+        <Text size="sm" weight="semibold" >
+          CONTACT DETAILS
+        </Text>
+      </Divider>
+
+      <View spacing="md">
+        <View spacing="sm">
+          <Text size="sm">Phone: (555) 123-4567</Text>
+          <Text size="sm">Address: 123 Main St</Text>
+        </View>
+      </View>
+
+      <Divider spacing="lg">
+        <Text size="sm" weight="semibold" >
+          PREFERENCES
+        </Text>
+      </Divider>
+
+      <View spacing="md">
+        <View spacing="sm">
+          <Text size="sm">Theme: Dark</Text>
+          <Text size="sm">Notifications: Enabled</Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+// Example 12: List Item Dividers
+export function ListItemDividers() {
+  const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
+
+  return (
+    <View spacing="none">
+      {items.map((item, index) => (
+        <React.Fragment key={item}>
+          <View spacing="md">
+            <Text>{item}</Text>
+          </View>
+          {index < items.length - 1 && (
+            <Divider spacing="none" thickness="thin" />
+          )}
+        </React.Fragment>
+      ))}
+    </View>
+  );
+}