@idealyst/components 1.0.82 → 1.0.84

package/src/examples/SelectExamples.tsx

@@ -0,0 +1,423 @@
+import React, { useState } from 'react';
+import { Screen, View, Text, Select, Card, Button, Icon, Divider } from '../index';
+
+// Mock data for examples
+const fruitOptions = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'orange', label: 'Orange' },
+  { value: 'grape', label: 'Grape' },
+  { value: 'strawberry', label: 'Strawberry' },
+  { value: 'pineapple', label: 'Pineapple' },
+  { value: 'mango', label: 'Mango' },
+  { value: 'kiwi', label: 'Kiwi' },
+];
+
+const countryOptions = [
+  { value: 'us', label: 'United States', icon: <Text>🇺🇸</Text> },
+  { value: 'ca', label: 'Canada', icon: <Text>🇨🇦</Text> },
+  { value: 'uk', label: 'United Kingdom', icon: <Text>🇬🇧</Text> },
+  { value: 'de', label: 'Germany', icon: <Text>🇩🇪</Text> },
+  { value: 'fr', label: 'France', icon: <Text>🇫🇷</Text> },
+  { value: 'jp', label: 'Japan', icon: <Text>🇯🇵</Text> },
+  { value: 'au', label: 'Australia', icon: <Text>🇦🇺</Text> },
+  { value: 'in', label: 'India', icon: <Text>🇮🇳</Text> },
+];
+
+const priorityOptions = [
+  {
+    value: 'low',
+    label: 'Low Priority',
+    icon: <Text style={{ color: '#22c55e' }}>●</Text>
+  },
+  {
+    value: 'medium',
+    label: 'Medium Priority',
+    icon: <Text style={{ color: '#f59e0b' }}>●</Text>
+  },
+  {
+    value: 'high',
+    label: 'High Priority',
+    icon: <Text style={{ color: '#ef4444' }}>●</Text>
+  },
+  {
+    value: 'urgent',
+    label: 'Urgent',
+    icon: <Text style={{ color: '#dc2626' }}>🔥</Text>
+  },
+];
+
+const statusOptions = [
+  { value: 'draft', label: 'Draft', disabled: false },
+  { value: 'pending', label: 'Pending Review' },
+  { value: 'approved', label: 'Approved' },
+  { value: 'archived', label: 'Archived (Disabled)', disabled: true },
+  { value: 'deleted', label: 'Deleted (Disabled)', disabled: true },
+];
+
+export const SelectExamples = () => {
+  // State for all select examples
+  const [basicSelect, setBasicSelect] = useState('');
+  const [fruitSelect, setFruitSelect] = useState('apple');
+  const [countrySelect, setCountrySelect] = useState('');
+  const [prioritySelect, setPrioritySelect] = useState('medium');
+  const [statusSelect, setStatusSelect] = useState('draft');
+  const [searchableSelect, setSearchableSelect] = useState('');
+  const [formSelect, setFormSelect] = useState('');
+  const [sizeSmall, setSizeSmall] = useState('');
+  const [sizeMedium, setSizeMedium] = useState('');
+  const [sizeLarge, setSizeLarge] = useState('');
+  const [outlinedSelect, setOutlinedSelect] = useState('');
+  const [filledSelect, setFilledSelect] = useState('');
+  const [primarySelect, setPrimarySelect] = useState('');
+  const [successSelect, setSuccessSelect] = useState('');
+  const [errorSelect, setErrorSelect] = useState('');
+  const [warningSelect, setWarningSelect] = useState('');
+
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+
+  const validateForm = () => {
+    const errors: Record<string, string> = {};
+    if (!formSelect) {
+      errors.formSelect = 'Please select a country';
+    }
+    setFormErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const handleFormSubmit = () => {
+    if (validateForm()) {
+      console.log('Form submitted successfully!', { country: formSelect });
+    } else {
+      console.log('Form has validation errors');
+    }
+  };
+
+  const resetAllSelections = () => {
+    setBasicSelect('');
+    setFruitSelect('');
+    setCountrySelect('');
+    setPrioritySelect('');
+    setStatusSelect('');
+    setSearchableSelect('');
+    setFormSelect('');
+    setSizeSmall('');
+    setSizeMedium('');
+    setSizeLarge('');
+    setOutlinedSelect('');
+    setFilledSelect('');
+    setPrimarySelect('');
+    setSuccessSelect('');
+    setErrorSelect('');
+    setWarningSelect('');
+    setFormErrors({});
+  };
+
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="lg">
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Text size="lg" weight="bold">
+            Select Component Examples
+          </Text>
+          <Button
+            type="outlined"
+            intent="neutral"
+            size="sm"
+            onPress={resetAllSelections}
+          >
+            Reset All
+          </Button>
+        </View>
+
+        {/* Basic Usage */}
+        <Card type="outlined" padding="md">
+          <View spacing="md">
+            <Text size="md" weight="semibold">Basic Usage</Text>
+            <Select
+              options={fruitOptions}
+              value={basicSelect}
+              onValueChange={setBasicSelect}
+              placeholder="Choose a fruit"
+            />
+            <Text size="sm" color="secondary">
+              Selected: {basicSelect || 'None'}
+            </Text>
+          </View>
+        </Card>
+
+        {/* With Icons */}
+        <Card type="outlined" padding="md">
+          <View spacing="md">
+            <Text size="md" weight="semibold">With Icons</Text>
+            <Select
+              options={countryOptions}
+              value={countrySelect}
+              onValueChange={setCountrySelect}
+              placeholder="Select a country"
+              label="Country"
+            />
+            <Text size="sm" color="secondary">
+              Selected: {countrySelect || 'None'}
+            </Text>
+          </View>
+        </Card>
+
+        {/* Custom Icons */}
+        <Card type="outlined" padding="md">
+          <View spacing="md">
+            <Text size="md" weight="semibold">Custom Icon Components</Text>
+            <Select
+              options={priorityOptions}
+              value={prioritySelect}
+              onValueChange={setPrioritySelect}
+              placeholder="Select priority"
+              label="Task Priority"
+            />
+            <Text size="sm" color="secondary">
+              Selected: {prioritySelect || 'None'}
+            </Text>
+          </View>
+        </Card>
+
+        {/* Disabled Options */}
+        <Card type="outlined" padding="md">
+          <View spacing="md">
+            <Text size="md" weight="semibold">Disabled Options</Text>
+            <Select
+              options={statusOptions}
+              value={statusSelect}
+              onValueChange={setStatusSelect}
+              placeholder="Select status"
+              label="Document Status"
+              helperText="Some options are disabled"
+            />
+            <Text size="sm" color="secondary">
+              Selected: {statusSelect || 'None'}
+            </Text>
+          </View>
+        </Card>
+
+        {/* Searchable */}
+        <Card type="outlined" padding="md">
+          <View spacing="md">
+            <Text size="md" weight="semibold">Searchable Select</Text>
+            <Select
+              options={fruitOptions}
+              value={searchableSelect}
+              onValueChange={setSearchableSelect}
+              placeholder="Search for fruits..."
+              label="Fruit Search"
+              searchable
+              helperText="Type to filter options"
+            />
+            <Text size="sm" color="secondary">
+              Selected: {searchableSelect || 'None'}
+            </Text>
+          </View>
+        </Card>
+
+        {/* Sizes */}
+        <Card type="outlined" padding="md">
+          <View spacing="md">
+            <Text size="md" weight="semibold">Sizes</Text>
+            <View spacing="sm">
+              <View>
+                <Text size="sm" weight="medium">Small</Text>
+                <Select
+                  options={fruitOptions.slice(0, 3)}
+                  value={sizeSmall}
+                  onValueChange={setSizeSmall}
+                  placeholder="Small select"
+                  size="sm"
+                />
+              </View>
+              <View>
+                <Text size="sm" weight="medium">Medium (Default)</Text>
+                <Select
+                  options={fruitOptions.slice(0, 3)}
+                  value={sizeMedium}
+                  onValueChange={setSizeMedium}
+                  placeholder="Medium select"
+                  size="md"
+                />
+              </View>
+              <View>
+                <Text size="sm" weight="medium">Large</Text>
+                <Select
+                  options={fruitOptions.slice(0, 3)}
+                  value={sizeLarge}
+                  onValueChange={setSizeLarge}
+                  placeholder="Large select"
+                  size="lg"
+                />
+              </View>
+            </View>
+          </View>
+        </Card>
+
+        {/* Variants */}
+        <Card type="outlined" padding="md">
+          <View spacing="md">
+            <Text size="md" weight="semibold">Variants</Text>
+            <View spacing="sm">
+              <View>
+                <Text size="sm" weight="medium">Outlined (Default)</Text>
+                <Select
+                  options={fruitOptions.slice(0, 4)}
+                  value={outlinedSelect}
+                  onValueChange={setOutlinedSelect}
+                  placeholder="Outlined variant"
+                  type="outlined"
+                />
+              </View>
+              <View>
+                <Text size="sm" weight="medium">Filled</Text>
+                <Select
+                  options={fruitOptions.slice(0, 4)}
+                  value={filledSelect}
+                  onValueChange={setFilledSelect}
+                  placeholder="Filled variant"
+                  type="filled"
+                />
+              </View>
+            </View>
+          </View>
+        </Card>
+
+        {/* Intents */}
+        <Card type="outlined" padding="md">
+          <View spacing="md">
+            <Text size="md" weight="semibold">Intent Colors</Text>
+            <View spacing="sm">
+              <View>
+                <Text size="sm" weight="medium">Primary</Text>
+                <Select
+                  options={fruitOptions.slice(0, 3)}
+                  value={primarySelect}
+                  onValueChange={setPrimarySelect}
+                  placeholder="Primary intent"
+                  intent="primary"
+                  type="outlined"
+                />
+              </View>
+              <View>
+                <Text size="sm" weight="medium">Success</Text>
+                <Select
+                  options={fruitOptions.slice(0, 3)}
+                  value={successSelect}
+                  onValueChange={setSuccessSelect}
+                  placeholder="Success intent"
+                  intent="success"
+                  type="outlined"
+                />
+              </View>
+              <View>
+                <Text size="sm" weight="medium">Warning</Text>
+                <Select
+                  options={fruitOptions.slice(0, 3)}
+                  value={warningSelect}
+                  onValueChange={setWarningSelect}
+                  placeholder="Warning intent"
+                  intent="warning"
+                  type="outlined"
+                />
+              </View>
+              <View>
+                <Text size="sm" weight="medium">Error</Text>
+                <Select
+                  options={fruitOptions.slice(0, 3)}
+                  value={errorSelect}
+                  onValueChange={setErrorSelect}
+                  placeholder="Error intent"
+                  intent="error"
+                  type="outlined"
+                />
+              </View>
+            </View>
+          </View>
+        </Card>
+
+        {/* Form Example */}
+        <Card type="outlined" padding="md">
+          <View spacing="md">
+            <Text size="md" weight="semibold">Form Integration</Text>
+            <Select
+              options={countryOptions}
+              value={formSelect}
+              onValueChange={(value) => {
+                setFormSelect(value);
+                if (formErrors.formSelect) {
+                  setFormErrors(prev => ({ ...prev, formSelect: '' }));
+                }
+              }}
+              placeholder="Select your country"
+              label="Country *"
+              error={!!formErrors.formSelect}
+              helperText={formErrors.formSelect || "Required field"}
+              type="outlined"
+              intent="primary"
+            />
+            <Button
+              type="contained"
+              intent="primary"
+              onPress={handleFormSubmit}
+            >
+              Submit Form
+            </Button>
+          </View>
+        </Card>
+
+        {/* Disabled State */}
+        <Card type="outlined" padding="md">
+          <View spacing="md">
+            <Text size="md" weight="semibold">Disabled State</Text>
+            <Select
+              options={fruitOptions}
+              value="apple"
+              onValueChange={() => {}}
+              placeholder="This select is disabled"
+              label="Disabled Select"
+              disabled
+              helperText="This select cannot be interacted with"
+            />
+          </View>
+        </Card>
+
+        {/* Platform-specific Features */}
+        <Card type="outlined" padding="md">
+          <View spacing="md">
+            <Text size="md" weight="semibold">Platform Features</Text>
+            <Text size="sm" color="secondary">
+              On iOS: Try the ActionSheet presentation mode for native feel
+            </Text>
+            <Select
+              options={priorityOptions}
+              value={prioritySelect}
+              onValueChange={setPrioritySelect}
+              placeholder="Select priority"
+              label="iOS ActionSheet Mode"
+              presentationMode="actionSheet" // iOS only
+              helperText="Uses native ActionSheet on iOS"
+            />
+          </View>
+        </Card>
+
+        <Divider spacing="lg" />
+
+        {/* Summary */}
+        <Card type="filled" padding="md">
+          <View spacing="sm">
+            <Text size="md" weight="semibold">Current Selections Summary</Text>
+            <Text size="sm">Basic: {basicSelect || 'None'}</Text>
+            <Text size="sm">Country: {countrySelect || 'None'}</Text>
+            <Text size="sm">Priority: {prioritySelect || 'None'}</Text>
+            <Text size="sm">Status: {statusSelect || 'None'}</Text>
+            <Text size="sm">Searchable: {searchableSelect || 'None'}</Text>
+            <Text size="sm">Form: {formSelect || 'None'}</Text>
+          </View>
+        </Card>
+      </View>
+    </Screen>
+  );
+};

package/src/examples/SkeletonExamples.tsx

@@ -0,0 +1,206 @@
+import React from 'react';
+import { Screen, View, Text, Skeleton, SkeletonGroup, Divider, Card } from '../index';
+
+export const SkeletonExamples = () => {
+  return (
+    <Screen background="primary" safeArea>
+      <View spacing="lg" style={{ maxWidth: 800, width: '100%', paddingHorizontal: 16, marginHorizontal: 'auto' }}>
+        <Text size="xl" weight="bold">Skeleton Examples</Text>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Basic Shapes</Text>
+
+        <Text size="md" weight="semibold">Rectangle (Default)</Text>
+        <Skeleton width="100%" height={40} shape="rectangle" />
+
+        <Text size="md" weight="semibold">Rounded</Text>
+        <Skeleton width="100%" height={40} shape="rounded" />
+
+        <Text size="md" weight="semibold">Circle</Text>
+        <Skeleton width={64} height={64} shape="circle" />
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Custom Border Radius</Text>
+
+        <Skeleton width="100%" height={40} shape="rounded" borderRadius={4} />
+        <Skeleton width="100%" height={40} shape="rounded" borderRadius={16} />
+        <Skeleton width="100%" height={40} shape="rounded" borderRadius={24} />
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Animation Types</Text>
+
+        <Text size="md" weight="semibold">Pulse (Default)</Text>
+        <Skeleton width="100%" height={40} animation="pulse" />
+
+        <Text size="md" weight="semibold">Wave</Text>
+        <Skeleton width="100%" height={40} animation="wave" />
+
+        <Text size="md" weight="semibold">None</Text>
+        <Skeleton width="100%" height={40} animation="none" />
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Skeleton Groups</Text>
+
+        <Text size="md" weight="semibold">Default Group (3 items)</Text>
+        <SkeletonGroup />
+
+        <Text size="md" weight="semibold">Custom Count (5 items)</Text>
+        <SkeletonGroup count={5} />
+
+        <Text size="md" weight="semibold">Custom Spacing</Text>
+        <SkeletonGroup count={3} spacing={20} />
+
+        <Text size="md" weight="semibold">Custom Skeleton Props</Text>
+        <SkeletonGroup
+          count={4}
+          spacing={16}
+          skeletonProps={{
+            height: 60,
+            shape: 'rounded',
+            animation: 'wave',
+          }}
+        />
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Profile Card Loading</Text>
+
+        <Card type="outlined">
+          <View spacing="md">
+            <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+              <Skeleton width={64} height={64} shape="circle" />
+              <View style={{ flex: 1, gap: 8 }}>
+                <Skeleton width="60%" height={24} shape="rounded" />
+                <Skeleton width="40%" height={16} shape="rounded" />
+              </View>
+            </View>
+            <SkeletonGroup count={3} skeletonProps={{ height: 16, shape: 'rounded' }} />
+          </View>
+        </Card>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Article Card Loading</Text>
+
+        <Card type="outlined">
+          <View spacing="md">
+            <Skeleton width="100%" height={200} shape="rounded" />
+            <Skeleton width="80%" height={28} shape="rounded" />
+            <SkeletonGroup
+              count={3}
+              spacing={8}
+              skeletonProps={{ height: 16, shape: 'rounded' }}
+            />
+            <View style={{ flexDirection: 'row', gap: 12, marginTop: 8 }}>
+              <Skeleton width={32} height={32} shape="circle" />
+              <Skeleton width={120} height={16} shape="rounded" />
+            </View>
+          </View>
+        </Card>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">List Item Loading</Text>
+
+        <Card type="outlined">
+          <View spacing="md">
+            {[1, 2, 3].map((item) => (
+              <View key={item} style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+                <Skeleton width={48} height={48} shape="rounded" />
+                <View style={{ flex: 1, gap: 8 }}>
+                  <Skeleton width="70%" height={18} shape="rounded" />
+                  <Skeleton width="50%" height={14} shape="rounded" />
+                </View>
+              </View>
+            ))}
+          </View>
+        </Card>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Table Loading</Text>
+
+        <Card type="outlined">
+          <View spacing="sm">
+            {/* Header */}
+            <View style={{ flexDirection: 'row', gap: 12 }}>
+              <Skeleton width={40} height={20} shape="rounded" />
+              <Skeleton width="25%" height={20} shape="rounded" />
+              <Skeleton width="25%" height={20} shape="rounded" />
+              <Skeleton width="25%" height={20} shape="rounded" />
+            </View>
+            <Divider spacing="sm" />
+            {/* Rows */}
+            {[1, 2, 3, 4, 5].map((row) => (
+              <View key={row} style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+                <Skeleton width={40} height={16} shape="rounded" />
+                <Skeleton width="25%" height={16} shape="rounded" />
+                <Skeleton width="25%" height={16} shape="rounded" />
+                <Skeleton width="25%" height={16} shape="rounded" />
+              </View>
+            ))}
+          </View>
+        </Card>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Dashboard Card Loading</Text>
+
+        <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap' }}>
+          {[1, 2, 3, 4].map((card) => (
+            <Card key={card} type="outlined" style={{ flex: 1, minWidth: 180 }}>
+              <View spacing="sm">
+                <Skeleton width="60%" height={16} shape="rounded" />
+                <Skeleton width="80%" height={32} shape="rounded" />
+                <Skeleton width="40%" height={12} shape="rounded" />
+              </View>
+            </Card>
+          ))}
+        </View>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Comment Thread Loading</Text>
+
+        <Card type="outlined">
+          <View spacing="md">
+            {[1, 2, 3].map((comment) => (
+              <View key={comment} style={{ paddingLeft: comment > 1 ? 32 : 0 }}>
+                <View style={{ flexDirection: 'row', gap: 12 }}>
+                  <Skeleton width={40} height={40} shape="circle" />
+                  <View style={{ flex: 1, gap: 8 }}>
+                    <Skeleton width="30%" height={16} shape="rounded" />
+                    <SkeletonGroup
+                      count={2}
+                      spacing={6}
+                      skeletonProps={{ height: 14, shape: 'rounded' }}
+                    />
+                  </View>
+                </View>
+              </View>
+            ))}
+          </View>
+        </Card>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Mixed Shapes and Sizes</Text>
+
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+          <Skeleton width={80} height={80} shape="circle" />
+          <Skeleton width={80} height={80} shape="rounded" borderRadius={16} />
+          <Skeleton width={80} height={80} shape="rectangle" />
+        </View>
+
+        <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+          <Skeleton width={24} height={24} shape="circle" />
+          <Skeleton width={32} height={32} shape="circle" />
+          <Skeleton width={48} height={48} shape="circle" />
+          <Skeleton width={64} height={64} shape="circle" />
+        </View>
+
+        <Divider spacing="md" />
+        <Text size="lg" weight="semibold">Custom Widths</Text>
+
+        <Skeleton width={100} height={20} shape="rounded" />
+        <Skeleton width="25%" height={20} shape="rounded" />
+        <Skeleton width="50%" height={20} shape="rounded" />
+        <Skeleton width="75%" height={20} shape="rounded" />
+        <Skeleton width="100%" height={20} shape="rounded" />
+      </View>
+    </Screen>
+  );
+};