@idealyst/mcp-server 1.0.86 → 1.0.88

package/examples/components/Card.examples.tsx

@@ -0,0 +1,131 @@
+/**
+ * Card Component Examples
+ *
+ * These examples are type-checked against the actual CardProps interface
+ * to ensure accuracy and correctness.
+ */
+
+import React from 'react';
+import { Card, Text, View } from '@idealyst/components';
+
+// Example 1: Basic Card
+export function BasicCard() {
+  return (
+    <Card>
+      <Text>Simple card content</Text>
+    </Card>
+  );
+}
+
+// Example 2: Card Types
+export function CardTypes() {
+  return (
+    <>
+      <Card type="default">
+        <Text>Default Card</Text>
+      </Card>
+      <Card type="outlined">
+        <Text>Outlined Card</Text>
+      </Card>
+      <Card type="elevated">
+        <Text>Elevated Card</Text>
+      </Card>
+      <Card type="filled">
+        <Text>Filled Card</Text>
+      </Card>
+    </>
+  );
+}
+
+// Example 3: Card with Padding Variants
+export function CardPadding() {
+  return (
+    <>
+      <Card padding="none">
+        <Text>No Padding</Text>
+      </Card>
+      <Card padding="xs">
+        <Text>Extra Small Padding</Text>
+      </Card>
+      <Card padding="sm">
+        <Text>Small Padding</Text>
+      </Card>
+      <Card padding="md">
+        <Text>Medium Padding</Text>
+      </Card>
+      <Card padding="lg">
+        <Text>Large Padding</Text>
+      </Card>
+      <Card padding="xl">
+        <Text>Extra Large Padding</Text>
+      </Card>
+    </>
+  );
+}
+
+// Example 4: Card with Radius Variants
+export function CardRadius() {
+  return (
+    <>
+      <Card radius="none">
+        <Text>No Radius</Text>
+      </Card>
+      <Card radius="sm">
+        <Text>Small Radius</Text>
+      </Card>
+      <Card radius="md">
+        <Text>Medium Radius</Text>
+      </Card>
+      <Card radius="lg">
+        <Text>Large Radius</Text>
+      </Card>
+      <Card radius="xl">
+        <Text>Extra Large Radius</Text>
+      </Card>
+    </>
+  );
+}
+
+// Example 5: Card with Intent
+export function CardWithIntent() {
+  return (
+    <>
+      <Card intent="primary" type="filled">
+        <Text>Primary Card</Text>
+      </Card>
+      <Card intent="success" type="filled">
+        <Text>Success Card</Text>
+      </Card>
+      <Card intent="error" type="filled">
+        <Text>Error Card</Text>
+      </Card>
+    </>
+  );
+}
+
+// Example 6: Clickable Card
+export function ClickableCard() {
+  return (
+    <Card
+      clickable
+      onPress={() => console.log('Card clicked')}
+      type="outlined"
+      padding="md"
+    >
+      <Text>Click this card</Text>
+    </Card>
+  );
+}
+
+// Example 7: Complex Card
+export function ComplexCard() {
+  return (
+    <Card type="elevated" padding="lg" radius="md">
+      <View spacing="md">
+        <Text size="lg" weight="bold">Card Title</Text>
+        <Text size="md">This is some card content with multiple elements.</Text>
+        <Text size="sm" >Additional information</Text>
+      </View>
+    </Card>
+  );
+}

package/examples/components/Checkbox.examples.tsx

@@ -0,0 +1,195 @@
+/**
+ * Checkbox Component Examples
+ *
+ * These examples are type-checked against the actual CheckboxProps interface
+ * to ensure accuracy and correctness.
+ */
+
+import React from 'react';
+import { Checkbox, View, Text } from '@idealyst/components';
+
+// Example 1: Basic Checkbox
+export function BasicCheckbox() {
+  const [checked, setChecked] = React.useState(false);
+
+  return (
+    <Checkbox
+      checked={checked}
+      onCheckedChange={setChecked}
+      label="Accept terms and conditions"
+    />
+  );
+}
+
+// Example 2: Checkbox Sizes
+export function CheckboxSizes() {
+  const [checked, setChecked] = React.useState(true);
+
+  return (
+    <View spacing="md">
+      <Checkbox checked={checked} onCheckedChange={setChecked} label="Extra Small" size="xs" />
+      <Checkbox checked={checked} onCheckedChange={setChecked} label="Small" size="sm" />
+      <Checkbox checked={checked} onCheckedChange={setChecked} label="Medium" size="md" />
+      <Checkbox checked={checked} onCheckedChange={setChecked} label="Large" size="lg" />
+      <Checkbox checked={checked} onCheckedChange={setChecked} label="Extra Large" size="xl" />
+    </View>
+  );
+}
+
+// Example 3: Checkbox Intents
+export function CheckboxIntents() {
+  const [checked, setChecked] = React.useState(true);
+
+  return (
+    <View spacing="md">
+      <Checkbox checked={checked} onCheckedChange={setChecked} label="Primary" intent="primary" />
+      <Checkbox checked={checked} onCheckedChange={setChecked} label="Success" intent="success" />
+      <Checkbox checked={checked} onCheckedChange={setChecked} label="Error" intent="error" />
+      <Checkbox checked={checked} onCheckedChange={setChecked} label="Warning" intent="warning" />
+      <Checkbox checked={checked} onCheckedChange={setChecked} label="Neutral" intent="neutral" />
+      <Checkbox checked={checked} onCheckedChange={setChecked} label="Info" intent="info" />
+    </View>
+  );
+}
+
+// Example 4: Checkbox Variants
+export function CheckboxVariants() {
+  const [checked, setChecked] = React.useState(true);
+
+  return (
+    <View spacing="md">
+      <Checkbox
+        checked={checked}
+        onCheckedChange={setChecked}
+        label="Default variant"
+        variant="default"
+      />
+      <Checkbox
+        checked={checked}
+        onCheckedChange={setChecked}
+        label="Outlined variant"
+        variant="outlined"
+      />
+    </View>
+  );
+}
+
+// Example 5: Indeterminate State
+export function IndeterminateCheckbox() {
+  const [parentChecked, setParentChecked] = React.useState(false);
+  const [child1, setChild1] = React.useState(false);
+  const [child2, setChild2] = React.useState(false);
+
+  const indeterminate = child1 !== child2;
+  const allChecked = child1 && child2;
+
+  React.useEffect(() => {
+    setParentChecked(allChecked);
+  }, [child1, child2, allChecked]);
+
+  return (
+    <View spacing="sm">
+      <Checkbox
+        checked={parentChecked}
+        indeterminate={indeterminate}
+        onCheckedChange={(checked) => {
+          setParentChecked(checked);
+          setChild1(checked);
+          setChild2(checked);
+        }}
+        label="Select All"
+      />
+      <View spacing="sm" style={{ paddingLeft: 20 }}>
+        <Checkbox checked={child1} onCheckedChange={setChild1} label="Option 1" />
+        <Checkbox checked={child2} onCheckedChange={setChild2} label="Option 2" />
+      </View>
+    </View>
+  );
+}
+
+// Example 6: Disabled Checkbox
+export function DisabledCheckbox() {
+  return (
+    <View spacing="md">
+      <Checkbox checked={false} onCheckedChange={() => {}} label="Unchecked disabled" disabled />
+      <Checkbox checked={true} onCheckedChange={() => {}} label="Checked disabled" disabled />
+    </View>
+  );
+}
+
+// Example 7: Checkbox with Custom Children
+export function CheckboxWithCustomContent() {
+  const [checked, setChecked] = React.useState(false);
+
+  return (
+    <Checkbox checked={checked} onCheckedChange={setChecked}>
+      <View spacing="xs">
+        <Text weight="bold">Marketing emails</Text>
+        <Text size="sm" >
+          Receive updates about new features and special offers
+        </Text>
+      </View>
+    </Checkbox>
+  );
+}
+
+// Example 8: Checkbox with Helper Text and Error
+export function CheckboxWithHelperText() {
+  const [accepted, setAccepted] = React.useState(false);
+  const [submitted, setSubmitted] = React.useState(false);
+
+  const showError = submitted && !accepted;
+
+  return (
+    <View spacing="md">
+      <Checkbox
+        checked={accepted}
+        onCheckedChange={setAccepted}
+        label="I agree to the terms and conditions"
+        required
+        error={showError ? 'You must accept the terms to continue' : undefined}
+        helperText={!showError ? 'Required field' : undefined}
+      />
+    </View>
+  );
+}
+
+// Example 9: Checkbox Group
+export function CheckboxGroup() {
+  const [interests, setInterests] = React.useState({
+    tech: false,
+    design: false,
+    business: false,
+    marketing: false,
+  });
+
+  const toggleInterest = (key: keyof typeof interests) => {
+    setInterests(prev => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  return (
+    <View spacing="sm">
+      <Text weight="bold">Select your interests:</Text>
+      <Checkbox
+        checked={interests.tech}
+        onCheckedChange={() => toggleInterest('tech')}
+        label="Technology"
+      />
+      <Checkbox
+        checked={interests.design}
+        onCheckedChange={() => toggleInterest('design')}
+        label="Design"
+      />
+      <Checkbox
+        checked={interests.business}
+        onCheckedChange={() => toggleInterest('business')}
+        label="Business"
+      />
+      <Checkbox
+        checked={interests.marketing}
+        onCheckedChange={() => toggleInterest('marketing')}
+        label="Marketing"
+      />
+    </View>
+  );
+}

package/examples/components/Chip.examples.tsx

@@ -0,0 +1,87 @@
+/**
+ * Chip Component Examples
+ *
+ * These examples are type-checked against the actual ChipProps interface
+ * to ensure accuracy and correctness.
+ */
+
+import React from 'react';
+import { Chip } from '@idealyst/components';
+
+// Example 1: Basic Chip
+export function BasicChip() {
+  return <Chip label="React" />;
+}
+
+// Example 2: Chip Types
+export function ChipTypes() {
+  return (
+    <>
+      <Chip label="Filled" type="filled" />
+      <Chip label="Outlined" type="outlined" />
+      <Chip label="Soft" type="soft" />
+    </>
+  );
+}
+
+// Example 3: Chip Sizes
+export function ChipSizes() {
+  return (
+    <>
+      <Chip label="XS" size="xs" />
+      <Chip label="SM" size="sm" />
+      <Chip label="MD" size="md" />
+      <Chip label="LG" size="lg" />
+      <Chip label="XL" size="xl" />
+    </>
+  );
+}
+
+// Example 4: Chip Intents
+export function ChipIntents() {
+  return (
+    <>
+      <Chip label="Primary" intent="primary" />
+      <Chip label="Success" intent="success" />
+      <Chip label="Error" intent="error" />
+      <Chip label="Warning" intent="warning" />
+      <Chip label="Neutral" intent="neutral" />
+      <Chip label="Info" intent="info" />
+    </>
+  );
+}
+
+// Example 5: Chip with Icon
+export function ChipWithIcon() {
+  return (
+    <>
+      <Chip label="React" icon="react" />
+      <Chip label="TypeScript" icon="language-typescript" />
+    </>
+  );
+}
+
+// Example 6: Deletable Chip
+export function DeletableChip() {
+  const [visible, setVisible] = React.useState(true);
+
+  if (!visible) return null;
+
+  return (
+    <Chip
+      label="Deletable"
+      onDelete={() => setVisible(false)}
+    />
+  );
+}
+
+// Example 7: Clickable Chip
+export function ClickableChip() {
+  return (
+    <Chip
+      label="Clickable"
+      onPress={() => console.log('Chip clicked')}
+      type="outlined"
+    />
+  );
+}