@delightui/components 0.1.104 → 0.1.106

package/docs/components/atoms/ResponsiveComponent.md

@@ -0,0 +1,612 @@
+# ResponsiveComponent
+
+A utility component that renders different components based on screen width breakpoints. It provides a declarative way to handle responsive design by allowing you to specify different component configurations for different screen sizes, making it easy to create adaptive user interfaces.
+
+## Aliases
+
+- ResponsiveComponent
+- ResponsiveRenderer
+- BreakpointComponent
+
+## Props Breakdown
+
+**Extends:** This component does not extend standard HTML elements as it's a utility component that renders different components based on breakpoints.
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `className` | `string` | `undefined` | No | CSS class name for the wrapper element |
+| `component` | `React.FC<T>` | `undefined` | Yes | The component to render at different breakpoints |
+| `children` | `React.ReactElement<BreakpointProps<T>>[]` | `undefined` | Yes | Array of breakpoint configurations |
+
+### BreakpointProps
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `width` | `number` | `undefined` | Yes | Minimum width in pixels for this breakpoint |
+| `children` | `React.ReactElement<T>` | `undefined` | Yes | Component configuration for this breakpoint |
+
+This component does not add standard HTML attributes as it dynamically renders other components.
+
+## Examples
+
+### Basic Responsive Button
+
+```tsx
+import { ResponsiveComponent, Button } from '@delightui/components';
+
+function ResponsiveButtonExample() {
+  return (
+    <ResponsiveComponent component={Button}>
+      <div width={0}>
+        <Button size="Small" type="Outlined">
+          Mobile Button
+        </Button>
+      </div>
+      
+      <div width={768}>
+        <Button size="Medium" type="Filled">
+          Tablet Button
+        </Button>
+      </div>
+      
+      <div width={1024}>
+        <Button size="Large" type="Filled" leadingIcon={<Icon name="AddFilled" />}>
+          Desktop Button
+        </Button>
+      </div>
+    </ResponsiveComponent>
+  );
+}
+```
+
+### Responsive Text Sizing
+
+```tsx
+import { ResponsiveComponent, Text } from '@delightui/components';
+
+function ResponsiveTextExample() {
+  return (
+    <ResponsiveComponent component={Text}>
+      <div width={0}>
+        <Text size="medium" weight="normal">
+          Mobile Text
+        </Text>
+      </div>
+      
+      <div width={768}>
+        <Text size="large" weight="medium">
+          Tablet Text
+        </Text>
+      </div>
+      
+      <div width={1024}>
+        <Text size="xlarge" weight="bold">
+          Desktop Text
+        </Text>
+      </div>
+    </ResponsiveComponent>
+  );
+}
+```
+
+### Responsive Navigation
+
+```tsx
+import { ResponsiveComponent, Button, IconButton, Icon } from '@delightui/components';
+
+function ResponsiveNavigationExample() {
+  const handleNavigation = (page: string) => {
+    console.log(`Navigate to: ${page}`);
+  };
+
+  return (
+    <nav style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+      <ResponsiveComponent component={Button}>
+        <div width={0}>
+          <IconButton
+            icon={<Icon name="AddFilled" />}
+            onClick={() => handleNavigation('home')}
+            title="Home"
+          />
+        </div>
+        
+        <div width={768}>
+          <Button
+            size="Small"
+            type="Ghost"
+            onClick={() => handleNavigation('home')}
+          >
+            Home
+          </Button>
+        </div>
+        
+        <div width={1024}>
+          <Button
+            size="Medium"
+            type="Ghost"
+            leadingIcon={<Icon name="AddFilled" />}
+            onClick={() => handleNavigation('home')}
+          >
+            Home
+          </Button>
+        </div>
+      </ResponsiveComponent>
+
+      <ResponsiveComponent component={Button}>
+        <div width={0}>
+          <IconButton
+            icon={<Icon name="SearchFilled" />}
+            onClick={() => handleNavigation('about')}
+            title="About"
+          />
+        </div>
+        
+        <div width={768}>
+          <Button
+            size="Small"
+            type="Ghost"
+            onClick={() => handleNavigation('about')}
+          >
+            About
+          </Button>
+        </div>
+        
+        <div width={1024}>
+          <Button
+            size="Medium"
+            type="Ghost"
+            leadingIcon={<Icon name="SearchFilled" />}
+            onClick={() => handleNavigation('about')}
+          >
+            About Us
+          </Button>
+        </div>
+      </ResponsiveComponent>
+    </nav>
+  );
+}
+```
+
+### Responsive Card Layout
+
+```tsx
+import { ResponsiveComponent, Button, Text } from '@delightui/components';
+
+function ResponsiveCardExample() {
+  return (
+    <div style={{ 
+      border: '1px solid #ccc', 
+      borderRadius: '8px', 
+      padding: '16px',
+      maxWidth: '400px'
+    }}>
+      <Text weight="bold" style={{ marginBottom: '12px' }}>
+        Product Card
+      </Text>
+      
+      <Text size="small" color="secondary" style={{ marginBottom: '16px' }}>
+        This is a responsive product card that adapts its button based on screen size.
+      </Text>
+      
+      <ResponsiveComponent component={Button}>
+        <div width={0}>
+          <Button size="Small" style={{ width: '100%' }}>
+            Buy
+          </Button>
+        </div>
+        
+        <div width={480}>
+          <Button size="Medium" style={{ width: '100%' }}>
+            Add to Cart
+          </Button>
+        </div>
+        
+        <div width={768}>
+          <Button 
+            size="Large" 
+            leadingIcon={<Icon name="AddFilled" />}
+            style={{ width: '100%' }}
+          >
+            Add to Cart
+          </Button>
+        </div>
+      </ResponsiveComponent>
+    </div>
+  );
+}
+```
+
+### Responsive Form Input
+
+```tsx
+import { ResponsiveComponent, Input, Button } from '@delightui/components';
+
+function ResponsiveFormExample() {
+  return (
+    <form style={{ display: 'flex', gap: '8px', alignItems: 'flex-end' }}>
+      <div style={{ flex: 1 }}>
+        <ResponsiveComponent component={Input}>
+          <div width={0}>
+            <Input
+              placeholder="Search..."
+              inputType="Text"
+            />
+          </div>
+          
+          <div width={768}>
+            <Input
+              placeholder="Enter your search query..."
+              inputType="Text"
+              leadingIcon={<Icon name="SearchFilled" />}
+            />
+          </div>
+        </ResponsiveComponent>
+      </div>
+      
+      <ResponsiveComponent component={Button}>
+        <div width={0}>
+          <IconButton
+            icon={<Icon name="SearchFilled" />}
+            type="submit"
+          />
+        </div>
+        
+        <div width={768}>
+          <Button type="submit">
+            Search
+          </Button>
+        </div>
+      </ResponsiveComponent>
+    </form>
+  );
+}
+```
+
+### Responsive Data Display
+
+```tsx
+import { ResponsiveComponent, Text, Chip } from '@delightui/components';
+
+function ResponsiveDataDisplayExample() {
+  const data = {
+    title: 'Project Alpha',
+    status: 'In Progress',
+    priority: 'High',
+    assignee: 'John Doe'
+  };
+
+  return (
+    <div style={{ 
+      border: '1px solid #ccc', 
+      borderRadius: '8px', 
+      padding: '16px',
+      marginBottom: '16px'
+    }}>
+      <ResponsiveComponent component={Text}>
+        <div width={0}>
+          <Text weight="bold" size="medium">
+            {data.title}
+          </Text>
+        </div>
+        
+        <div width={768}>
+          <Text weight="bold" size="large">
+            {data.title}
+          </Text>
+        </div>
+      </ResponsiveComponent>
+      
+      <div style={{ marginTop: '8px', display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+        <ResponsiveComponent component={Chip}>
+          <div width={0}>
+            <Chip size="Small" variant="outlined">
+              {data.status}
+            </Chip>
+          </div>
+          
+          <div width={768}>
+            <Chip size="Medium" variant="filled">
+              Status: {data.status}
+            </Chip>
+          </div>
+        </ResponsiveComponent>
+        
+        <ResponsiveComponent component={Chip}>
+          <div width={0}>
+            <Chip size="Small" variant="outlined" color="error">
+              {data.priority}
+            </Chip>
+          </div>
+          
+          <div width={768}>
+            <Chip size="Medium" variant="filled" color="error">
+              Priority: {data.priority}
+            </Chip>
+          </div>
+        </ResponsiveComponent>
+      </div>
+      
+      <ResponsiveComponent component={Text}>
+        <div width={0}>
+          <Text size="small" color="secondary" style={{ marginTop: '8px' }}>
+            {data.assignee}
+          </Text>
+        </div>
+        
+        <div width={768}>
+          <Text size="small" color="secondary" style={{ marginTop: '8px' }}>
+            Assigned to: {data.assignee}
+          </Text>
+        </div>
+      </ResponsiveComponent>
+    </div>
+  );
+}
+```
+
+### Responsive Modal Actions
+
+```tsx
+import { ResponsiveComponent, Button, Modal, ModalHeader, ModalFooter } from '@delightui/components';
+
+function ResponsiveModalExample() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleConfirm = () => {
+    console.log('Confirmed');
+    setIsOpen(false);
+  };
+
+  const handleCancel = () => {
+    console.log('Cancelled');
+    setIsOpen(false);
+  };
+
+  return (
+    <div>
+      <Button onClick={() => setIsOpen(true)}>
+        Open Responsive Modal
+      </Button>
+      
+      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+        <ModalHeader>
+          Confirm Action
+        </ModalHeader>
+        
+        <div style={{ padding: '16px' }}>
+          <Text>Are you sure you want to proceed with this action?</Text>
+        </div>
+        
+        <ModalFooter>
+          <ResponsiveComponent component={Button}>
+            <div width={0}>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', width: '100%' }}>
+                <Button
+                  onClick={handleConfirm}
+                  style={{ width: '100%' }}
+                >
+                  Confirm
+                </Button>
+                <Button
+                  type="Outlined"
+                  onClick={handleCancel}
+                  style={{ width: '100%' }}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </div>
+            
+            <div width={768}>
+              <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
+                <Button
+                  type="Outlined"
+                  onClick={handleCancel}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  onClick={handleConfirm}
+                >
+                  Confirm
+                </Button>
+              </div>
+            </div>
+          </ResponsiveComponent>
+        </ModalFooter>
+      </Modal>
+    </div>
+  );
+}
+```
+
+### Responsive Icon Display
+
+```tsx
+import { ResponsiveComponent, IconButton, Button, Icon } from '@delightui/components';
+
+function ResponsiveIconExample() {
+  const actions = [
+    { id: 'save', icon: 'CheckFilled', label: 'Save' },
+    { id: 'edit', icon: 'InfoFilled', label: 'Edit' },
+    { id: 'delete', icon: 'CloseDeleteOutlined', label: 'Delete' }
+  ];
+
+  return (
+    <div style={{ display: 'flex', gap: '8px' }}>
+      {actions.map((action) => (
+        <ResponsiveComponent key={action.id} component={Button}>
+          <div width={0}>
+            <IconButton
+              icon={<Icon name={action.icon} />}
+              onClick={() => console.log(`${action.label} clicked`)}
+              title={action.label}
+            />
+          </div>
+          
+          <div width={768}>
+            <Button
+              size="Small"
+              type="Outlined"
+              leadingIcon={<Icon name={action.icon} />}
+              onClick={() => console.log(`${action.label} clicked`)}
+            >
+              {action.label}
+            </Button>
+          </div>
+        </ResponsiveComponent>
+      ))}
+    </div>
+  );
+}
+```
+
+### Complex Responsive Layout
+
+```tsx
+import { ResponsiveComponent, Button, Text, Input, IconButton, Icon } from '@delightui/components';
+
+function ComplexResponsiveExample() {
+  const [searchTerm, setSearchTerm] = useState('');
+
+  return (
+    <div style={{ 
+      border: '1px solid #ccc', 
+      borderRadius: '8px', 
+      padding: '16px'
+    }}>
+      <ResponsiveComponent component={Text}>
+        <div width={0}>
+          <Text weight="bold" size="large" style={{ marginBottom: '16px' }}>
+            Search
+          </Text>
+        </div>
+        
+        <div width={768}>
+          <Text weight="bold" size="xlarge" style={{ marginBottom: '20px' }}>
+            Advanced Search
+          </Text>
+        </div>
+      </ResponsiveComponent>
+      
+      <div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
+        <ResponsiveComponent component={Input}>
+          <div width={0}>
+            <Input
+              value={searchTerm}
+              onValueChange={setSearchTerm}
+              placeholder="Search..."
+              style={{ flex: 1 }}
+            />
+          </div>
+          
+          <div width={768}>
+            <Input
+              value={searchTerm}
+              onValueChange={setSearchTerm}
+              placeholder="Enter your search query..."
+              leadingIcon={<Icon name="SearchFilled" />}
+              style={{ flex: 1 }}
+            />
+          </div>
+        </ResponsiveComponent>
+        
+        <ResponsiveComponent component={Button}>
+          <div width={0}>
+            <IconButton
+              icon={<Icon name="SearchFilled" />}
+              onClick={() => console.log('Search:', searchTerm)}
+            />
+          </div>
+          
+          <div width={768}>
+            <Button
+              onClick={() => console.log('Search:', searchTerm)}
+              leadingIcon={<Icon name="SearchFilled" />}
+            >
+              Search
+            </Button>
+          </div>
+        </ResponsiveComponent>
+      </div>
+      
+      <ResponsiveComponent component={Button}>
+        <div width={0}>
+          <Button
+            size="Small"
+            type="Ghost"
+            style={{ width: '100%' }}
+            onClick={() => console.log('Advanced options')}
+          >
+            More Options
+          </Button>
+        </div>
+        
+        <div width={768}>
+          <div style={{ display: 'flex', gap: '8px' }}>
+            <Button
+              type="Ghost"
+              onClick={() => console.log('Advanced filters')}
+            >
+              Advanced Filters
+            </Button>
+            <Button
+              type="Ghost"
+              onClick={() => console.log('Saved searches')}
+            >
+              Saved Searches
+            </Button>
+          </div>
+        </div>
+      </ResponsiveComponent>
+    </div>
+  );
+}
+```
+
+### Custom Breakpoints
+
+```tsx
+import { ResponsiveComponent, Button } from '@delightui/components';
+
+function CustomBreakpointsExample() {
+  return (
+    <ResponsiveComponent component={Button}>
+      {/* Extra small devices (phones) */}
+      <div width={0}>
+        <Button size="Small" type="Filled" style={{ width: '100%' }}>
+          XS
+        </Button>
+      </div>
+      
+      {/* Small devices (landscape phones) */}
+      <div width={576}>
+        <Button size="Medium" type="Filled" style={{ width: '100%' }}>
+          SM
+        </Button>
+      </div>
+      
+      {/* Medium devices (tablets) */}
+      <div width={768}>
+        <Button size="Medium" type="Outlined">
+          MD
+        </Button>
+      </div>
+      
+      {/* Large devices (desktops) */}
+      <div width={992}>
+        <Button size="Large" type="Outlined">
+          LG
+        </Button>
+      </div>
+      
+      {/* Extra large devices (large desktops) */}
+      <div width={1200}>
+        <Button size="Large" type="Ghost">
+          XL
+        </Button>
+      </div>
+    </ResponsiveComponent>
+  );
+}
+```