@delightui/components 0.1.104 → 0.1.106

package/docs/components/molecules/ModalFooter.md

@@ -0,0 +1,702 @@
+# ModalFooter
+
+## Description
+
+A specialized footer component designed for modal dialogs that provides structured button layouts and styling options. Supports both single and dual button configurations with customizable styling variants including stroke options for visual separation from modal content.
+
+## Aliases
+
+- ModalFooter
+- DialogFooter
+- ModalActions
+- DialogActions
+- ModalButtons
+
+## Props Breakdown
+
+**Extends:** Omit<HTMLAttributes<HTMLDivElement>, 'style'> (inherits div properties except style)
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `type` | `'1Button' \| '2Buttons'` | `'1Button'` | No | Layout type - single or dual button configuration |
+| `style` | `'NoStroke' \| 'WithStroke'` | `'NoStroke'` | No | Visual style variant with optional top border |
+| `primaryButton` | `ReactNode` | - | No | Primary action button element |
+| `secondaryButton` | `ReactNode` | - | No | Secondary action button (only for 2Buttons type) |
+| `className` | `string` | - | No | Additional CSS class names |
+| `children` | `ReactNode` | - | No | Custom content overriding button props |
+
+## Examples
+
+### Basic Single Button Footer
+```tsx
+import { Modal, ModalFooter, Button, Text } from '@delightui/components';
+
+function SingleButtonExample() {
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setShowModal(true)}>
+        Show Info Modal
+      </Button>
+      
+      <Modal show={showModal} onHide={() => setShowModal(false)}>
+        <div className="modal-content">
+          <Text type="Heading4">Information</Text>
+          <Text>This is an informational modal with a single action button.</Text>
+        </div>
+        
+        <ModalFooter
+          type="1Button"
+          primaryButton={
+            <Button onClick={() => setShowModal(false)}>
+              Got it
+            </Button>
+          }
+        />
+      </Modal>
+    </>
+  );
+}
+```
+
+### Confirmation Modal with Two Buttons
+```tsx
+function ConfirmationExample() {
+  const [showModal, setShowModal] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleConfirm = async () => {
+    setLoading(true);
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    setLoading(false);
+    setShowModal(false);
+  };
+
+  return (
+    <>
+      <Button style="Destructive" onClick={() => setShowModal(true)}>
+        Delete Item
+      </Button>
+      
+      <Modal 
+        show={showModal} 
+        onHide={() => setShowModal(false)}
+        disableBackdropDismiss={loading}
+      >
+        <div className="modal-content">
+          <Text type="Heading4">Confirm Deletion</Text>
+          <Text>
+            Are you sure you want to delete this item? This action cannot be undone.
+          </Text>
+        </div>
+        
+        <ModalFooter
+          type="2Buttons"
+          style="WithStroke"
+          secondaryButton={
+            <Button 
+              type="Outlined" 
+              onClick={() => setShowModal(false)}
+              disabled={loading}
+            >
+              Cancel
+            </Button>
+          }
+          primaryButton={
+            <Button 
+              style="Destructive"
+              loading={loading}
+              onClick={handleConfirm}
+            >
+              Delete
+            </Button>
+          }
+        />
+      </Modal>
+    </>
+  );
+}
+```
+
+### Form Modal Footer
+```tsx
+function FormModalExample() {
+  const [showModal, setShowModal] = useState(false);
+  const [formData, setFormData] = useState({ name: '', email: '' });
+  const [saving, setSaving] = useState(false);
+
+  const handleSubmit = async () => {
+    setSaving(true);
+    // Simulate form submission
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    setSaving(false);
+    setShowModal(false);
+    setFormData({ name: '', email: '' });
+  };
+
+  const isFormValid = formData.name.trim() && formData.email.trim();
+
+  return (
+    <>
+      <Button onClick={() => setShowModal(true)}>
+        Add New User
+      </Button>
+      
+      <Modal show={showModal} onHide={() => setShowModal(false)} size="Medium">
+        <div className="modal-content">
+          <Text type="Heading4">Add New User</Text>
+          
+          <FormField label="Full Name" required>
+            <Input
+              value={formData.name}
+              onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
+              placeholder="Enter full name"
+            />
+          </FormField>
+          
+          <FormField label="Email Address" required>
+            <Input
+              type="email"
+              value={formData.email}
+              onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
+              placeholder="Enter email address"
+            />
+          </FormField>
+        </div>
+        
+        <ModalFooter
+          type="2Buttons"
+          style="WithStroke"
+          secondaryButton={
+            <Button 
+              type="Outlined" 
+              onClick={() => setShowModal(false)}
+              disabled={saving}
+            >
+              Cancel
+            </Button>
+          }
+          primaryButton={
+            <Button 
+              onClick={handleSubmit}
+              loading={saving}
+              disabled={!isFormValid}
+            >
+              Add User
+            </Button>
+          }
+        />
+      </Modal>
+    </>
+  );
+}
+```
+
+### Settings Modal Footer
+```tsx
+function SettingsModalExample() {
+  const [showModal, setShowModal] = useState(false);
+  const [settings, setSettings] = useState({
+    notifications: true,
+    darkMode: false,
+    autoSave: true
+  });
+  const [hasChanges, setHasChanges] = useState(false);
+
+  const handleSettingChange = (key, value) => {
+    setSettings(prev => ({ ...prev, [key]: value }));
+    setHasChanges(true);
+  };
+
+  const handleSave = () => {
+    console.log('Saving settings:', settings);
+    setHasChanges(false);
+    setShowModal(false);
+  };
+
+  const handleReset = () => {
+    setSettings({
+      notifications: true,
+      darkMode: false,
+      autoSave: true
+    });
+    setHasChanges(false);
+  };
+
+  return (
+    <>
+      <Button onClick={() => setShowModal(true)}>
+        Settings
+      </Button>
+      
+      <Modal show={showModal} onHide={() => setShowModal(false)}>
+        <div className="modal-content">
+          <Text type="Heading4">Application Settings</Text>
+          
+          <div className="settings-list">
+            <FormField label="Enable Notifications">
+              <Toggle
+                checked={settings.notifications}
+                onChange={(checked) => handleSettingChange('notifications', checked)}
+              />
+            </FormField>
+            
+            <FormField label="Dark Mode">
+              <Toggle
+                checked={settings.darkMode}
+                onChange={(checked) => handleSettingChange('darkMode', checked)}
+              />
+            </FormField>
+            
+            <FormField label="Auto Save">
+              <Toggle
+                checked={settings.autoSave}
+                onChange={(checked) => handleSettingChange('autoSave', checked)}
+              />
+            </FormField>
+          </div>
+        </div>
+        
+        <ModalFooter
+          type="2Buttons"
+          style="WithStroke"
+          secondaryButton={
+            <ButtonGroup>
+              <Button 
+                type="Text" 
+                onClick={handleReset}
+                disabled={!hasChanges}
+              >
+                Reset
+              </Button>
+              <Button 
+                type="Outlined" 
+                onClick={() => setShowModal(false)}
+              >
+                Cancel
+              </Button>
+            </ButtonGroup>
+          }
+          primaryButton={
+            <Button 
+              onClick={handleSave}
+              disabled={!hasChanges}
+            >
+              Save Changes
+            </Button>
+          }
+        />
+      </Modal>
+    </>
+  );
+}
+```
+
+### Custom Footer Content
+```tsx
+function CustomFooterExample() {
+  const [showModal, setShowModal] = useState(false);
+  const [step, setStep] = useState(1);
+  const totalSteps = 3;
+
+  const nextStep = () => setStep(prev => Math.min(prev + 1, totalSteps));
+  const prevStep = () => setStep(prev => Math.max(prev - 1, 1));
+
+  return (
+    <>
+      <Button onClick={() => setShowModal(true)}>
+        Start Wizard
+      </Button>
+      
+      <Modal show={showModal} onHide={() => setShowModal(false)}>
+        <div className="modal-content">
+          <Text type="Heading4">Setup Wizard - Step {step} of {totalSteps}</Text>
+          
+          {step === 1 && (
+            <div>
+              <Text>Welcome to the setup wizard. We'll help you get started.</Text>
+            </div>
+          )}
+          
+          {step === 2 && (
+            <div>
+              <Text>Please configure your preferences.</Text>
+              <FormField label="Your Name">
+                <Input placeholder="Enter your name" />
+              </FormField>
+            </div>
+          )}
+          
+          {step === 3 && (
+            <div>
+              <Text>Setup complete! You're ready to go.</Text>
+            </div>
+          )}
+        </div>
+        
+        <ModalFooter style="WithStroke">
+          <div className="wizard-footer">
+            <div className="step-indicator">
+              {Array.from({ length: totalSteps }, (_, i) => (
+                <div 
+                  key={i}
+                  className={`step-dot ${i + 1 <= step ? 'active' : ''}`}
+                />
+              ))}
+            </div>
+            
+            <div className="wizard-actions">
+              <Button 
+                type="Outlined"
+                onClick={step === 1 ? () => setShowModal(false) : prevStep}
+              >
+                {step === 1 ? 'Cancel' : 'Back'}
+              </Button>
+              
+              <Button 
+                onClick={step === totalSteps ? () => setShowModal(false) : nextStep}
+              >
+                {step === totalSteps ? 'Finish' : 'Next'}
+              </Button>
+            </div>
+          </div>
+        </ModalFooter>
+      </Modal>
+    </>
+  );
+}
+```
+
+### Save Draft Modal
+```tsx
+function SaveDraftExample() {
+  const [showModal, setShowModal] = useState(false);
+  const [content, setContent] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  const handleSaveDraft = async () => {
+    setSaving(true);
+    // Simulate saving draft
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    setSaving(false);
+    setShowModal(false);
+  };
+
+  const handlePublish = async () => {
+    setSaving(true);
+    // Simulate publishing
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    setSaving(false);
+    setShowModal(false);
+  };
+
+  return (
+    <>
+      <Button onClick={() => setShowModal(true)}>
+        Create Post
+      </Button>
+      
+      <Modal show={showModal} onHide={() => setShowModal(false)} size="Large">
+        <div className="modal-content">
+          <Text type="Heading4">Create New Post</Text>
+          
+          <FormField label="Post Content">
+            <TextArea
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              placeholder="Write your post content here..."
+              rows={6}
+            />
+          </FormField>
+        </div>
+        
+        <ModalFooter style="WithStroke">
+          <div className="post-footer">
+            <div className="post-info">
+              <Text type="BodySmall">
+                {content.length} characters
+              </Text>
+            </div>
+            
+            <div className="post-actions">
+              <Button 
+                type="Text" 
+                onClick={() => setShowModal(false)}
+                disabled={saving}
+              >
+                Discard
+              </Button>
+              
+              <Button 
+                type="Outlined"
+                onClick={handleSaveDraft}
+                loading={saving}
+                disabled={!content.trim()}
+              >
+                Save Draft
+              </Button>
+              
+              <Button 
+                onClick={handlePublish}
+                loading={saving}
+                disabled={!content.trim()}
+              >
+                Publish
+              </Button>
+            </div>
+          </div>
+        </ModalFooter>
+      </Modal>
+    </>
+  );
+}
+```
+
+### Error Modal Footer
+```tsx
+function ErrorModalExample() {
+  const [showModal, setShowModal] = useState(false);
+  const [error] = useState({
+    title: 'Connection Error',
+    message: 'Unable to connect to the server. Please check your internet connection and try again.',
+    details: 'Error code: 500 - Internal Server Error'
+  });
+
+  const handleRetry = () => {
+    // Simulate retry logic
+    console.log('Retrying...');
+    setShowModal(false);
+  };
+
+  return (
+    <>
+      <Button onClick={() => setShowModal(true)}>
+        Trigger Error
+      </Button>
+      
+      <Modal show={showModal} onHide={() => setShowModal(false)}>
+        <div className="modal-content error-modal">
+          <div className="error-icon">
+            <Icon icon="Error" size="Large" className="error-icon-style" />
+          </div>
+          
+          <Text type="Heading4">{error.title}</Text>
+          <Text type="Body">{error.message}</Text>
+          
+          <details className="error-details">
+            <summary>Technical Details</summary>
+            <Text type="BodySmall" className="error-details-text">
+              {error.details}
+            </Text>
+          </details>
+        </div>
+        
+        <ModalFooter
+          type="2Buttons"
+          style="WithStroke"
+          secondaryButton={
+            <Button 
+              type="Outlined" 
+              onClick={() => setShowModal(false)}
+            >
+              Close
+            </Button>
+          }
+          primaryButton={
+            <Button onClick={handleRetry}>
+              Retry
+            </Button>
+          }
+        />
+      </Modal>
+    </>
+  );
+}
+```
+
+### Terms and Conditions Modal
+```tsx
+function TermsModalExample() {
+  const [showModal, setShowModal] = useState(false);
+  const [accepted, setAccepted] = useState(false);
+  const [scrolledToBottom, setScrolledToBottom] = useState(false);
+
+  const handleScroll = (event) => {
+    const { scrollTop, scrollHeight, clientHeight } = event.target;
+    const isAtBottom = scrollTop + clientHeight >= scrollHeight - 10;
+    setScrolledToBottom(isAtBottom);
+  };
+
+  const handleAccept = () => {
+    setAccepted(true);
+    setShowModal(false);
+    console.log('Terms accepted');
+  };
+
+  return (
+    <>
+      <Button onClick={() => setShowModal(true)}>
+        View Terms & Conditions
+      </Button>
+      
+      <Modal show={showModal} onHide={() => setShowModal(false)} size="Large">
+        <div className="modal-content">
+          <Text type="Heading4">Terms and Conditions</Text>
+          
+          <div 
+            className="terms-content"
+            onScroll={handleScroll}
+            style={{ 
+              maxHeight: '400px', 
+              overflowY: 'auto',
+              border: '1px solid #ccc',
+              padding: '16px',
+              marginBottom: '16px'
+            }}
+          >
+            <Text type="Body">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod 
+              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
+              veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
+              commodo consequat...
+            </Text>
+            
+            <Text type="Body">
+              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
+              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
+              proident, sunt in culpa qui officia deserunt mollit anim id est laborum...
+            </Text>
+            
+            {/* Add more content to make it scrollable */}
+            {Array.from({ length: 20 }, (_, i) => (
+              <Text key={i} type="Body">
+                Section {i + 1}: Additional terms and conditions content that requires 
+                scrolling to read completely...
+              </Text>
+            ))}
+          </div>
+          
+          <FormField>
+            <Checkbox
+              checked={accepted}
+              onChange={setAccepted}
+              label="I have read and accept the terms and conditions"
+              disabled={!scrolledToBottom}
+            />
+          </FormField>
+        </div>
+        
+        <ModalFooter
+          type="2Buttons"
+          style="WithStroke"
+          secondaryButton={
+            <Button 
+              type="Outlined" 
+              onClick={() => setShowModal(false)}
+            >
+              Cancel
+            </Button>
+          }
+          primaryButton={
+            <Button 
+              onClick={handleAccept}
+              disabled={!accepted || !scrolledToBottom}
+            >
+              Accept & Continue
+            </Button>
+          }
+        />
+      </Modal>
+    </>
+  );
+}
+```
+
+### Loading Modal Footer
+```tsx
+function LoadingModalExample() {
+  const [showModal, setShowModal] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [isUploading, setIsUploading] = useState(false);
+
+  const simulateUpload = async () => {
+    setIsUploading(true);
+    setUploadProgress(0);
+    
+    // Simulate upload progress
+    for (let i = 0; i <= 100; i += 10) {
+      await new Promise(resolve => setTimeout(resolve, 200));
+      setUploadProgress(i);
+    }
+    
+    setIsUploading(false);
+  };
+
+  const startUpload = () => {
+    setShowModal(true);
+    simulateUpload();
+  };
+
+  return (
+    <>
+      <Button onClick={startUpload}>
+        Upload File
+      </Button>
+      
+      <Modal 
+        show={showModal} 
+        onHide={() => setShowModal(false)}
+        disableBackdropDismiss={isUploading}
+      >
+        <div className="modal-content">
+          <Text type="Heading4">File Upload</Text>
+          
+          <div className="upload-progress">
+            <Text type="Body">
+              {isUploading ? 'Uploading...' : 'Upload Complete!'}
+            </Text>
+            
+            <ProgressBar 
+              value={uploadProgress}
+              max={100}
+              className="upload-progress-bar"
+            />
+            
+            <Text type="BodySmall">
+              {uploadProgress}% complete
+            </Text>
+          </div>
+        </div>
+        
+        <ModalFooter
+          type={isUploading ? "1Button" : "2Buttons"}
+          style="WithStroke"
+          secondaryButton={
+            !isUploading ? (
+              <Button 
+                type="Outlined" 
+                onClick={() => setShowModal(false)}
+              >
+                Close
+              </Button>
+            ) : undefined
+          }
+          primaryButton={
+            isUploading ? (
+              <Button disabled loading>
+                Uploading...
+              </Button>
+            ) : (
+              <Button onClick={() => setShowModal(false)}>
+                Done
+              </Button>
+            )
+          }
+        />
+      </Modal>
+    </>
+  );
+}
+```