@delightui/components 0.1.105 → 0.1.107

package/docs/components/molecules/ModalHeader.md

@@ -0,0 +1,756 @@
+# ModalHeader
+
+## Description
+
+A specialized header component designed for modal dialogs that provides structured title display and optional icon button functionality. Offers consistent styling and layout for modal titles with support for action buttons like close controls, creating a cohesive modal experience.
+
+## Aliases
+
+- ModalHeader
+- DialogHeader
+- ModalTitle
+- DialogTitle
+- ModalTop
+
+## Props Breakdown
+
+**Extends:** Standalone interface (no HTML element inheritance)
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `title` | `string` | - | No | The title text displayed in the header |
+| `iconButton` | `ReactNode` | - | No | Optional icon button element (typically close button) |
+| `className` | `string` | - | No | Additional CSS class names |
+| `children` | `ReactNode` | - | No | Custom content overriding title prop |
+
+## Examples
+
+### Basic Modal Header
+```tsx
+import { Modal, ModalHeader, ModalFooter, Button, Text } from '@delightui/components';
+
+function BasicHeaderExample() {
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setShowModal(true)}>
+        Open Modal
+      </Button>
+      
+      <Modal show={showModal} onHide={() => setShowModal(false)}>
+        <ModalHeader title="Welcome to Our App" />
+        
+        <div className="modal-content">
+          <Text>This is a basic modal with a simple header title.</Text>
+        </div>
+        
+        <ModalFooter
+          type="1Button"
+          primaryButton={
+            <Button onClick={() => setShowModal(false)}>
+              Close
+            </Button>
+          }
+        />
+      </Modal>
+    </>
+  );
+}
+```
+
+### Header with Close Button
+```tsx
+function HeaderWithCloseExample() {
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setShowModal(true)}>
+        Open Modal with Close
+      </Button>
+      
+      <Modal show={showModal} onHide={() => setShowModal(false)}>
+        <ModalHeader 
+          title="Settings"
+          iconButton={
+            <IconButton 
+              onClick={() => setShowModal(false)}
+              aria-label="Close modal"
+            >
+              <Icon icon="Close" />
+            </IconButton>
+          }
+        />
+        
+        <div className="modal-content">
+          <Text>Modal content with a close button in the header.</Text>
+          
+          <FormField label="Username">
+            <Input placeholder="Enter username" />
+          </FormField>
+          
+          <FormField label="Email">
+            <Input type="email" placeholder="Enter email" />
+          </FormField>
+        </div>
+        
+        <ModalFooter
+          type="2Buttons"
+          secondaryButton={
+            <Button type="Outlined" onClick={() => setShowModal(false)}>
+              Cancel
+            </Button>
+          }
+          primaryButton={
+            <Button>Save Changes</Button>
+          }
+        />
+      </Modal>
+    </>
+  );
+}
+```
+
+### Custom Header Content
+```tsx
+function CustomHeaderExample() {
+  const [showModal, setShowModal] = useState(false);
+  const [step, setStep] = useState(1);
+
+  return (
+    <>
+      <Button onClick={() => setShowModal(true)}>
+        Open Multi-Step Modal
+      </Button>
+      
+      <Modal show={showModal} onHide={() => setShowModal(false)}>
+        <ModalHeader>
+          <div className="custom-header">
+            <div className="header-main">
+              <Text type="Heading4">Setup Wizard</Text>
+              <Text type="BodySmall">Step {step} of 3</Text>
+            </div>
+            
+            <div className="header-actions">
+              <IconButton 
+                size="Small"
+                onClick={() => setShowModal(false)}
+                aria-label="Close wizard"
+              >
+                <Icon icon="Close" />
+              </IconButton>
+            </div>
+          </div>
+        </ModalHeader>
+        
+        <div className="modal-content">
+          <div className="progress-indicator">
+            {[1, 2, 3].map(stepNumber => (
+              <div 
+                key={stepNumber}
+                className={`progress-step ${stepNumber <= step ? 'active' : ''}`}
+              >
+                {stepNumber}
+              </div>
+            ))}
+          </div>
+          
+          <Text>Content for step {step}</Text>
+        </div>
+        
+        <ModalFooter
+          type="2Buttons"
+          secondaryButton={
+            <Button 
+              type="Outlined" 
+              onClick={() => step > 1 ? setStep(step - 1) : setShowModal(false)}
+            >
+              {step > 1 ? 'Previous' : 'Cancel'}
+            </Button>
+          }
+          primaryButton={
+            <Button onClick={() => step < 3 ? setStep(step + 1) : setShowModal(false)}>
+              {step < 3 ? 'Next' : 'Finish'}
+            </Button>
+          }
+        />
+      </Modal>
+    </>
+  );
+}
+```
+
+### Header with Status Indicator
+```tsx
+function StatusHeaderExample() {
+  const [showModal, setShowModal] = useState(false);
+  const [status, setStatus] = useState('pending');
+
+  const getStatusConfig = (status) => {
+    switch (status) {
+      case 'success':
+        return { color: 'green', icon: 'CheckCircle', text: 'Success' };
+      case 'error':
+        return { color: 'red', icon: 'Error', text: 'Error' };
+      case 'warning':
+        return { color: 'orange', icon: 'Warning', text: 'Warning' };
+      default:
+        return { color: 'blue', icon: 'Info', text: 'Processing' };
+    }
+  };
+
+  const statusConfig = getStatusConfig(status);
+
+  return (
+    <>
+      <div className="status-controls">
+        <Button onClick={() => setShowModal(true)}>
+          Open Status Modal
+        </Button>
+        
+        <ButtonGroup>
+          <Button 
+            size="Small"
+            type={status === 'pending' ? 'Primary' : 'Outlined'}
+            onClick={() => setStatus('pending')}
+          >
+            Pending
+          </Button>
+          <Button 
+            size="Small"
+            type={status === 'success' ? 'Primary' : 'Outlined'}
+            onClick={() => setStatus('success')}
+          >
+            Success
+          </Button>
+          <Button 
+            size="Small"
+            type={status === 'error' ? 'Primary' : 'Outlined'}
+            onClick={() => setStatus('error')}
+          >
+            Error
+          </Button>
+          <Button 
+            size="Small"
+            type={status === 'warning' ? 'Primary' : 'Outlined'}
+            onClick={() => setStatus('warning')}
+          >
+            Warning
+          </Button>
+        </ButtonGroup>
+      </div>
+      
+      <Modal show={showModal} onHide={() => setShowModal(false)}>
+        <ModalHeader>
+          <div className="status-header">
+            <div className="status-info">
+              <Icon 
+                icon={statusConfig.icon} 
+                className={`status-icon ${statusConfig.color}`}
+              />
+              <div>
+                <Text type="Heading5">Operation Status</Text>
+                <Text type="BodySmall" className={`status-text ${statusConfig.color}`}>
+                  {statusConfig.text}
+                </Text>
+              </div>
+            </div>
+            
+            <IconButton onClick={() => setShowModal(false)}>
+              <Icon icon="Close" />
+            </IconButton>
+          </div>
+        </ModalHeader>
+        
+        <div className="modal-content">
+          <Text>Current operation status: {statusConfig.text}</Text>
+          <Text type="BodySmall">
+            This modal demonstrates different header states based on operation status.
+          </Text>
+        </div>
+        
+        <ModalFooter
+          type="1Button"
+          primaryButton={
+            <Button onClick={() => setShowModal(false)}>
+              Close
+            </Button>
+          }
+        />
+      </Modal>
+    </>
+  );
+}
+```
+
+### Header with Navigation
+```tsx
+function NavigationHeaderExample() {
+  const [showModal, setShowModal] = useState(false);
+  const [currentView, setCurrentView] = useState('profile');
+
+  const views = {
+    profile: { title: 'Profile Settings', icon: 'Person' },
+    security: { title: 'Security & Privacy', icon: 'Security' },
+    notifications: { title: 'Notifications', icon: 'Notifications' },
+    billing: { title: 'Billing & Plans', icon: 'CreditCard' }
+  };
+
+  return (
+    <>
+      <Button onClick={() => setShowModal(true)}>
+        Open Settings
+      </Button>
+      
+      <Modal show={showModal} onHide={() => setShowModal(false)} size="Large">
+        <ModalHeader>
+          <div className="navigation-header">
+            <div className="header-nav">
+              <Icon icon={views[currentView].icon} />
+              <Text type="Heading4">{views[currentView].title}</Text>
+            </div>
+            
+            <div className="header-actions">
+              <ButtonGroup size="Small">
+                {Object.entries(views).map(([key, view]) => (
+                  <Button
+                    key={key}
+                    type={currentView === key ? 'Primary' : 'Ghost'}
+                    size="Small"
+                    onClick={() => setCurrentView(key)}
+                  >
+                    <Icon icon={view.icon} />
+                  </Button>
+                ))}
+              </ButtonGroup>
+              
+              <IconButton onClick={() => setShowModal(false)}>
+                <Icon icon="Close" />
+              </IconButton>
+            </div>
+          </div>
+        </ModalHeader>
+        
+        <div className="modal-content">
+          <Text>Content for {views[currentView].title}</Text>
+          
+          {currentView === 'profile' && (
+            <div>
+              <FormField label="Display Name">
+                <Input placeholder="Your display name" />
+              </FormField>
+              <FormField label="Bio">
+                <TextArea placeholder="Tell us about yourself" />
+              </FormField>
+            </div>
+          )}
+          
+          {currentView === 'security' && (
+            <div>
+              <FormField label="Current Password">
+                <Password placeholder="Enter current password" />
+              </FormField>
+              <FormField label="New Password">
+                <Password placeholder="Enter new password" />
+              </FormField>
+            </div>
+          )}
+          
+          {currentView === 'notifications' && (
+            <div>
+              <FormField label="Email Notifications">
+                <Toggle />
+              </FormField>
+              <FormField label="Push Notifications">
+                <Toggle />
+              </FormField>
+            </div>
+          )}
+          
+          {currentView === 'billing' && (
+            <div>
+              <Text>Billing information and subscription details</Text>
+            </div>
+          )}
+        </div>
+        
+        <ModalFooter
+          type="2Buttons"
+          secondaryButton={
+            <Button type="Outlined" onClick={() => setShowModal(false)}>
+              Cancel
+            </Button>
+          }
+          primaryButton={
+            <Button>Save Changes</Button>
+          }
+        />
+      </Modal>
+    </>
+  );
+}
+```
+
+### Header with Search
+```tsx
+function SearchHeaderExample() {
+  const [showModal, setShowModal] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchMode, setSearchMode] = useState(false);
+
+  const items = [
+    'Apple iPhone 14',
+    'Samsung Galaxy S23',
+    'Google Pixel 7',
+    'iPad Pro',
+    'MacBook Air',
+    'Dell XPS 13'
+  ];
+
+  const filteredItems = items.filter(item =>
+    item.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <>
+      <Button onClick={() => setShowModal(true)}>
+        Open Product List
+      </Button>
+      
+      <Modal show={showModal} onHide={() => setShowModal(false)}>
+        <ModalHeader>
+          <div className="search-header">
+            {!searchMode ? (
+              <>
+                <Text type="Heading4">Product Catalog</Text>
+                <div className="header-actions">
+                  <IconButton 
+                    onClick={() => setSearchMode(true)}
+                    aria-label="Search products"
+                  >
+                    <Icon icon="Search" />
+                  </IconButton>
+                  <IconButton onClick={() => setShowModal(false)}>
+                    <Icon icon="Close" />
+                  </IconButton>
+                </div>
+              </>
+            ) : (
+              <>
+                <div className="search-input-container">
+                  <Input
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    placeholder="Search products..."
+                    autoFocus
+                    leadingIcon={<Icon icon="Search" />}
+                  />
+                </div>
+                <IconButton 
+                  onClick={() => {
+                    setSearchMode(false);
+                    setSearchQuery('');
+                  }}
+                  aria-label="Close search"
+                >
+                  <Icon icon="Close" />
+                </IconButton>
+              </>
+            )}
+          </div>
+        </ModalHeader>
+        
+        <div className="modal-content">
+          {searchMode && searchQuery && (
+            <Text type="BodySmall">
+              Found {filteredItems.length} result{filteredItems.length !== 1 ? 's' : ''} for "{searchQuery}"
+            </Text>
+          )}
+          
+          <List>
+            {(searchMode ? filteredItems : items).map((item, index) => (
+              <ListItem key={index}>
+                <Text>{item}</Text>
+              </ListItem>
+            ))}
+          </List>
+          
+          {searchMode && filteredItems.length === 0 && (
+            <div className="no-results">
+              <Text>No products found matching "{searchQuery}"</Text>
+            </div>
+          )}
+        </div>
+        
+        <ModalFooter
+          type="1Button"
+          primaryButton={
+            <Button onClick={() => setShowModal(false)}>
+              Close
+            </Button>
+          }
+        />
+      </Modal>
+    </>
+  );
+}
+```
+
+### Header with Breadcrumbs
+```tsx
+function BreadcrumbHeaderExample() {
+  const [showModal, setShowModal] = useState(false);
+  const [currentPath, setCurrentPath] = useState(['Home', 'Settings', 'Profile']);
+
+  const navigateToPath = (index) => {
+    setCurrentPath(prev => prev.slice(0, index + 1));
+  };
+
+  return (
+    <>
+      <Button onClick={() => setShowModal(true)}>
+        Open Navigation Modal
+      </Button>
+      
+      <Modal show={showModal} onHide={() => setShowModal(false)}>
+        <ModalHeader>
+          <div className="breadcrumb-header">
+            <div className="breadcrumb-nav">
+              <Breadcrumbs>
+                {currentPath.map((crumb, index) => (
+                  <Breadcrumb 
+                    key={index}
+                    onClick={() => navigateToPath(index)}
+                    isActive={index === currentPath.length - 1}
+                  >
+                    {crumb}
+                  </Breadcrumb>
+                ))}
+              </Breadcrumbs>
+            </div>
+            
+            <IconButton onClick={() => setShowModal(false)}>
+              <Icon icon="Close" />
+            </IconButton>
+          </div>
+        </ModalHeader>
+        
+        <div className="modal-content">
+          <Text type="Heading5">Current Location: {currentPath.join(' > ')}</Text>
+          
+          <div className="navigation-options">
+            <Button 
+              type="Outlined"
+              onClick={() => setCurrentPath([...currentPath, 'Security'])}
+              disabled={currentPath.includes('Security')}
+            >
+              Go to Security Settings
+            </Button>
+            
+            <Button 
+              type="Outlined"
+              onClick={() => setCurrentPath([...currentPath, 'Notifications'])}
+              disabled={currentPath.includes('Notifications')}
+            >
+              Go to Notifications
+            </Button>
+            
+            <Button 
+              type="Outlined"
+              onClick={() => setCurrentPath(['Home'])}
+              disabled={currentPath.length === 1}
+            >
+              Back to Home
+            </Button>
+          </div>
+        </div>
+        
+        <ModalFooter
+          type="1Button"
+          primaryButton={
+            <Button onClick={() => setShowModal(false)}>
+              Close
+            </Button>
+          }
+        />
+      </Modal>
+    </>
+  );
+}
+```
+
+### Header with Actions Menu
+```tsx
+function ActionsHeaderExample() {
+  const [showModal, setShowModal] = useState(false);
+  const [showActionsMenu, setShowActionsMenu] = useState(false);
+
+  const actions = [
+    { id: 'edit', label: 'Edit', icon: 'Edit' },
+    { id: 'duplicate', label: 'Duplicate', icon: 'Copy' },
+    { id: 'share', label: 'Share', icon: 'Share' },
+    { id: 'export', label: 'Export', icon: 'Download' },
+    { id: 'delete', label: 'Delete', icon: 'Delete', style: 'destructive' }
+  ];
+
+  const handleAction = (actionId) => {
+    console.log('Action:', actionId);
+    setShowActionsMenu(false);
+  };
+
+  return (
+    <>
+      <Button onClick={() => setShowModal(true)}>
+        Open Document
+      </Button>
+      
+      <Modal show={showModal} onHide={() => setShowModal(false)}>
+        <ModalHeader>
+          <div className="actions-header">
+            <div className="document-info">
+              <Icon icon="Document" />
+              <div>
+                <Text type="Heading5">Annual Report 2024</Text>
+                <Text type="BodySmall">Last modified: 2 hours ago</Text>
+              </div>
+            </div>
+            
+            <div className="header-actions">
+              <Popover
+                show={showActionsMenu}
+                onHide={() => setShowActionsMenu(false)}
+                trigger={
+                  <IconButton 
+                    onClick={() => setShowActionsMenu(!showActionsMenu)}
+                    aria-label="More actions"
+                  >
+                    <Icon icon="MoreVert" />
+                  </IconButton>
+                }
+              >
+                <List>
+                  {actions.map(action => (
+                    <ListItem 
+                      key={action.id}
+                      onClick={() => handleAction(action.id)}
+                      className={action.style === 'destructive' ? 'destructive' : ''}
+                    >
+                      <Icon icon={action.icon} />
+                      <Text>{action.label}</Text>
+                    </ListItem>
+                  ))}
+                </List>
+              </Popover>
+              
+              <IconButton onClick={() => setShowModal(false)}>
+                <Icon icon="Close" />
+              </IconButton>
+            </div>
+          </div>
+        </ModalHeader>
+        
+        <div className="modal-content">
+          <Text>Document content would be displayed here.</Text>
+          <Text type="BodySmall">
+            Use the actions menu in the header to perform operations on this document.
+          </Text>
+        </div>
+        
+        <ModalFooter
+          type="1Button"
+          primaryButton={
+            <Button onClick={() => setShowModal(false)}>
+              Close
+            </Button>
+          }
+        />
+      </Modal>
+    </>
+  );
+}
+```
+
+### Minimizable Header
+```tsx
+function MinimizableHeaderExample() {
+  const [showModal, setShowModal] = useState(false);
+  const [isMinimized, setIsMinimized] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setShowModal(true)}>
+        Open Minimizable Modal
+      </Button>
+      
+      <Modal 
+        show={showModal} 
+        onHide={() => setShowModal(false)}
+        className={isMinimized ? 'minimized-modal' : ''}
+      >
+        <ModalHeader>
+          <div className="minimizable-header">
+            <div className="header-title">
+              <Icon icon="Chat" />
+              <Text type="Heading5">Chat Support</Text>
+              {isMinimized && (
+                <Chip size="Small" className="notification-chip">
+                  3 new messages
+                </Chip>
+              )}
+            </div>
+            
+            <div className="window-controls">
+              <IconButton 
+                size="Small"
+                onClick={() => setIsMinimized(!isMinimized)}
+                aria-label={isMinimized ? 'Restore window' : 'Minimize window'}
+              >
+                <Icon icon={isMinimized ? 'Maximize' : 'Minimize'} />
+              </IconButton>
+              
+              <IconButton 
+                size="Small"
+                onClick={() => setShowModal(false)}
+                aria-label="Close window"
+              >
+                <Icon icon="Close" />
+              </IconButton>
+            </div>
+          </div>
+        </ModalHeader>
+        
+        {!isMinimized && (
+          <>
+            <div className="modal-content">
+              <div className="chat-messages">
+                <div className="message support">
+                  <Text type="BodySmall">Support Agent</Text>
+                  <Text>Hello! How can I help you today?</Text>
+                </div>
+                
+                <div className="message user">
+                  <Text type="BodySmall">You</Text>
+                  <Text>I need help with my account settings.</Text>
+                </div>
+                
+                <div className="message support">
+                  <Text type="BodySmall">Support Agent</Text>
+                  <Text>I'd be happy to help you with that. What specific setting would you like to change?</Text>
+                </div>
+              </div>
+              
+              <div className="chat-input">
+                <Input placeholder="Type your message..." />
+                <IconButton>
+                  <Icon icon="Send" />
+                </IconButton>
+              </div>
+            </div>
+          </>
+        )}
+      </Modal>
+    </>
+  );
+}
+```