@delightui/components 0.1.104 → 0.1.106

package/docs/components/molecules/AccordionGroup.md

@@ -0,0 +1,547 @@
+# AccordionGroup
+
+## Description
+
+A container component that manages multiple accordion components as a group. Provides coordinated behavior for multiple accordions, allowing for controlled expansion/collapse patterns, mutual exclusivity, and shared state management across accordion items.
+
+## Aliases
+
+- AccordionGroup
+- AccordionContainer
+- AccordionPanel
+- CollapsibleGroup
+- AccordionSet
+
+## Props Breakdown
+
+**Extends:** Standalone interface (no HTML element inheritance)
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `children` | `ReactNode` | - | Yes | Accordion components to be grouped together |
+| `className` | `string` | - | No | Additional CSS class names |
+| `name` | `string` | - | No | Unique identifier for the accordion group |
+
+## Examples
+
+### Basic Usage
+```tsx
+import { AccordionGroup, Accordion, AccordionSummary, AccordionDetails, Text } from '@delightui/components';
+
+function BasicExample() {
+  return (
+    <AccordionGroup>
+      <Accordion>
+        <AccordionSummary>
+          <Text type="Heading6">Section 1</Text>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Text type="BodyMedium">Content for the first section.</Text>
+        </AccordionDetails>
+      </Accordion>
+      
+      <Accordion>
+        <AccordionSummary>
+          <Text type="Heading6">Section 2</Text>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Text type="BodyMedium">Content for the second section.</Text>
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}
+```
+
+### FAQ Section
+```tsx
+function FAQExample() {
+  const faqs = [
+    {
+      question: "What is your return policy?",
+      answer: "We offer a 30-day return policy for all items in original condition."
+    },
+    {
+      question: "How long does shipping take?",
+      answer: "Standard shipping takes 3-5 business days, express shipping takes 1-2 business days."
+    },
+    {
+      question: "Do you offer international shipping?",
+      answer: "Yes, we ship to over 100 countries worldwide with varying delivery times."
+    },
+    {
+      question: "How can I track my order?",
+      answer: "You'll receive a tracking number via email once your order ships."
+    }
+  ];
+
+  return (
+    <AccordionGroup name="faq-section" className="faq-container">
+      {faqs.map((faq, index) => (
+        <Accordion key={index} name={`faq-${index}`}>
+          <AccordionSummary>
+            <Text type="Heading6">{faq.question}</Text>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Text type="BodyMedium">{faq.answer}</Text>
+          </AccordionDetails>
+        </Accordion>
+      ))}
+    </AccordionGroup>
+  );
+}
+```
+
+### Settings Panel
+```tsx
+function SettingsPanelExample() {
+  return (
+    <AccordionGroup name="settings-panel" className="settings-container">
+      <Accordion>
+        <AccordionSummary>
+          <div className="settings-header">
+            <Icon icon="Person" />
+            <Text type="Heading6">Account Settings</Text>
+          </div>
+        </AccordionSummary>
+        <AccordionDetails>
+          <FormField name="email" label="Email Address">
+            <Input placeholder="your@email.com" />
+          </FormField>
+          <FormField name="password" label="Password">
+            <Password placeholder="Enter new password" />
+          </FormField>
+          <Button size="Small">Update Account</Button>
+        </AccordionDetails>
+      </Accordion>
+      
+      <Accordion>
+        <AccordionSummary>
+          <div className="settings-header">
+            <Icon icon="Notifications" />
+            <Text type="Heading6">Notification Preferences</Text>
+          </div>
+        </AccordionSummary>
+        <AccordionDetails>
+          <FormField name="email-notifications">
+            <Checkbox>Email notifications</Checkbox>
+          </FormField>
+          <FormField name="push-notifications">
+            <Checkbox>Push notifications</Checkbox>
+          </FormField>
+          <FormField name="sms-notifications">
+            <Checkbox>SMS notifications</Checkbox>
+          </FormField>
+          <Button size="Small">Save Preferences</Button>
+        </AccordionDetails>
+      </Accordion>
+      
+      <Accordion>
+        <AccordionSummary>
+          <div className="settings-header">
+            <Icon icon="Security" />
+            <Text type="Heading6">Privacy & Security</Text>
+          </div>
+        </AccordionSummary>
+        <AccordionDetails>
+          <FormField name="two-factor">
+            <Checkbox>Enable two-factor authentication</Checkbox>
+          </FormField>
+          <FormField name="profile-visibility" label="Profile Visibility">
+            <Select>
+              <Option value="public">Public</Option>
+              <Option value="friends">Friends Only</Option>
+              <Option value="private">Private</Option>
+            </Select>
+          </FormField>
+          <Button size="Small">Update Security</Button>
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}
+```
+
+### Product Categories
+```tsx
+function ProductCategoriesExample() {
+  const categories = [
+    {
+      name: "Electronics",
+      items: ["Smartphones", "Laptops", "Tablets", "Accessories"]
+    },
+    {
+      name: "Clothing",
+      items: ["Shirts", "Pants", "Dresses", "Shoes"]
+    },
+    {
+      name: "Home & Garden",
+      items: ["Furniture", "Appliances", "Decor", "Tools"]
+    }
+  ];
+
+  return (
+    <AccordionGroup name="product-categories" className="category-browser">
+      {categories.map((category, index) => (
+        <Accordion key={index} name={`category-${index}`}>
+          <AccordionSummary>
+            <div className="category-header">
+              <Text type="Heading6">{category.name}</Text>
+              <Chip size="Small" style="B">{category.items.length} items</Chip>
+            </div>
+          </AccordionSummary>
+          <AccordionDetails>
+            <List 
+              data={category.items}
+              component={({ item }) => (
+                <ListItem>
+                  <Text type="BodyMedium">{item}</Text>
+                  <IconButton icon="ArrowForward" size="Small" />
+                </ListItem>
+              )}
+            />
+          </AccordionDetails>
+        </Accordion>
+      ))}
+    </AccordionGroup>
+  );
+}
+```
+
+### Help Documentation
+```tsx
+function HelpDocumentationExample() {
+  return (
+    <AccordionGroup name="help-docs" className="help-container">
+      <Accordion defaultExpanded>
+        <AccordionSummary>
+          <div className="help-header">
+            <Icon icon="Help" />
+            <Text type="Heading6">Getting Started</Text>
+            <Chip size="Small" style="A">New</Chip>
+          </div>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Text type="BodyMedium">
+            Welcome to our platform! Here's everything you need to know to get started.
+          </Text>
+          <List 
+            data={["Create your account", "Set up your profile", "Explore features", "Connect with others"]}
+            component={({ item, index }) => (
+              <ListItem>
+                <Text type="BodySmall">{index + 1}. {item}</Text>
+              </ListItem>
+            )}
+          />
+          <Button size="Small">Start Tutorial</Button>
+        </AccordionDetails>
+      </Accordion>
+      
+      <Accordion>
+        <AccordionSummary>
+          <div className="help-header">
+            <Icon icon="Settings" />
+            <Text type="Heading6">Advanced Features</Text>
+          </div>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Text type="BodyMedium">
+            Discover powerful features for advanced users.
+          </Text>
+          <ButtonGroup>
+            <Button size="Small" type="Outlined">API Documentation</Button>
+            <Button size="Small" type="Outlined">Integration Guide</Button>
+          </ButtonGroup>
+        </AccordionDetails>
+      </Accordion>
+      
+      <Accordion>
+        <AccordionSummary>
+          <div className="help-header">
+            <Icon icon="Error" />
+            <Text type="Heading6">Troubleshooting</Text>
+          </div>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Text type="BodyMedium">
+            Common issues and their solutions.
+          </Text>
+          <Accordion size="Small">
+            <AccordionSummary>
+              <Text type="BodyMedium">Login Issues</Text>
+            </AccordionSummary>
+            <AccordionDetails>
+              <Text type="BodySmall">
+                Try resetting your password or clearing browser cache.
+              </Text>
+            </AccordionDetails>
+          </Accordion>
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}
+```
+
+### Controlled Group State
+```tsx
+function ControlledGroupExample() {
+  const [openAccordion, setOpenAccordion] = useState('general');
+
+  const handleAccordionChange = (accordionName, isOpen) => {
+    setOpenAccordion(isOpen ? accordionName : null);
+  };
+
+  const sections = [
+    { name: 'general', title: 'General Settings', icon: 'Settings' },
+    { name: 'billing', title: 'Billing Information', icon: 'CreditCard' },
+    { name: 'notifications', title: 'Notifications', icon: 'Notifications' },
+    { name: 'security', title: 'Security', icon: 'Security' }
+  ];
+
+  return (
+    <AccordionGroup name="controlled-settings">
+      {sections.map(section => (
+        <Accordion
+          key={section.name}
+          name={section.name}
+          expanded={openAccordion === section.name}
+          onChange={(isOpen) => handleAccordionChange(section.name, isOpen)}
+        >
+          <AccordionSummary>
+            <div className="section-header">
+              <Icon icon={section.icon} />
+              <Text type="Heading6">{section.title}</Text>
+              {openAccordion === section.name && (
+                <Chip size="Small" style="A">Active</Chip>
+              )}
+            </div>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Text type="BodyMedium">
+              Settings for {section.title.toLowerCase()}.
+            </Text>
+            <Button size="Small">Configure</Button>
+          </AccordionDetails>
+        </Accordion>
+      ))}
+    </AccordionGroup>
+  );
+}
+```
+
+### Nested Accordion Groups
+```tsx
+function NestedGroupExample() {
+  return (
+    <AccordionGroup name="main-navigation" className="main-nav">
+      <Accordion>
+        <AccordionSummary>
+          <Text type="Heading5">Dashboard</Text>
+        </AccordionSummary>
+        <AccordionDetails>
+          <AccordionGroup name="dashboard-sub">
+            <Accordion size="Small">
+              <AccordionSummary>
+                <Text type="BodyMedium">Analytics</Text>
+              </AccordionSummary>
+              <AccordionDetails>
+                <List 
+                  data={["Overview", "Traffic", "Conversions", "Revenue"]}
+                  component={({ item }) => (
+                    <ListItem>
+                      <Text type="BodySmall">{item}</Text>
+                    </ListItem>
+                  )}
+                />
+              </AccordionDetails>
+            </Accordion>
+            
+            <Accordion size="Small">
+              <AccordionSummary>
+                <Text type="BodyMedium">Reports</Text>
+              </AccordionSummary>
+              <AccordionDetails>
+                <List 
+                  data={["Daily", "Weekly", "Monthly", "Custom"]}
+                  component={({ item }) => (
+                    <ListItem>
+                      <Text type="BodySmall">{item}</Text>
+                    </ListItem>
+                  )}
+                />
+              </AccordionDetails>
+            </Accordion>
+          </AccordionGroup>
+        </AccordionDetails>
+      </Accordion>
+      
+      <Accordion>
+        <AccordionSummary>
+          <Text type="Heading5">Settings</Text>
+        </AccordionSummary>
+        <AccordionDetails>
+          <AccordionGroup name="settings-sub">
+            <Accordion size="Small">
+              <AccordionSummary>
+                <Text type="BodyMedium">User Management</Text>
+              </AccordionSummary>
+              <AccordionDetails>
+                <ButtonGroup>
+                  <Button size="Small" type="Outlined">Add User</Button>
+                  <Button size="Small" type="Outlined">Manage Roles</Button>
+                </ButtonGroup>
+              </AccordionDetails>
+            </Accordion>
+          </AccordionGroup>
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}
+```
+
+### Interactive Filter Panel
+```tsx
+function FilterPanelExample() {
+  const [selectedFilters, setSelectedFilters] = useState({
+    category: [],
+    price: [],
+    rating: [],
+    features: []
+  });
+
+  const updateFilter = (filterType, value, checked) => {
+    setSelectedFilters(prev => ({
+      ...prev,
+      [filterType]: checked 
+        ? [...prev[filterType], value]
+        : prev[filterType].filter(item => item !== value)
+    }));
+  };
+
+  return (
+    <AccordionGroup name="filter-panel" className="filter-container">
+      <Accordion defaultExpanded>
+        <AccordionSummary>
+          <div className="filter-header">
+            <Text type="Heading6">Category</Text>
+            {selectedFilters.category.length > 0 && (
+              <Chip size="Small" style="A">
+                {selectedFilters.category.length} selected
+              </Chip>
+            )}
+          </div>
+        </AccordionSummary>
+        <AccordionDetails>
+          {['Electronics', 'Clothing', 'Home', 'Sports'].map(category => (
+            <FormField key={category} name={category}>
+              <Checkbox
+                checked={selectedFilters.category.includes(category)}
+                onValueChange={(checked) => updateFilter('category', category, checked)}
+              >
+                {category}
+              </Checkbox>
+            </FormField>
+          ))}
+        </AccordionDetails>
+      </Accordion>
+      
+      <Accordion>
+        <AccordionSummary>
+          <div className="filter-header">
+            <Text type="Heading6">Price Range</Text>
+            {selectedFilters.price.length > 0 && (
+              <Chip size="Small" style="A">
+                {selectedFilters.price.length} selected
+              </Chip>
+            )}
+          </div>
+        </AccordionSummary>
+        <AccordionDetails>
+          {['Under $25', '$25 - $50', '$50 - $100', 'Over $100'].map(price => (
+            <FormField key={price} name={price}>
+              <Checkbox
+                checked={selectedFilters.price.includes(price)}
+                onValueChange={(checked) => updateFilter('price', price, checked)}
+              >
+                {price}
+              </Checkbox>
+            </FormField>
+          ))}
+        </AccordionDetails>
+      </Accordion>
+      
+      <div className="filter-actions">
+        <Button size="Small">Apply Filters</Button>
+        <Button size="Small" type="Outlined" onClick={() => setSelectedFilters({
+          category: [], price: [], rating: [], features: []
+        })}>
+          Clear All
+        </Button>
+      </div>
+    </AccordionGroup>
+  );
+}
+```
+
+### Timeline Accordion Group
+```tsx
+function TimelineExample() {
+  const timelineEvents = [
+    {
+      date: "2024-01-15",
+      title: "Project Started",
+      description: "Initial project setup and planning phase completed."
+    },
+    {
+      date: "2024-02-01",
+      title: "Development Phase",
+      description: "Core development work began with team collaboration."
+    },
+    {
+      date: "2024-02-28",
+      title: "Testing & QA",
+      description: "Comprehensive testing and quality assurance procedures."
+    },
+    {
+      date: "2024-03-15",
+      title: "Launch Preparation",
+      description: "Final preparations and deployment configurations."
+    }
+  ];
+
+  return (
+    <AccordionGroup name="project-timeline" className="timeline-container">
+      {timelineEvents.map((event, index) => (
+        <Accordion key={index} name={`timeline-${index}`}>
+          <AccordionSummary>
+            <div className="timeline-header">
+              <div className="timeline-date">
+                <Text type="BodySmall">{event.date}</Text>
+              </div>
+              <div className="timeline-title">
+                <Text type="Heading6">{event.title}</Text>
+              </div>
+              <div className="timeline-status">
+                <Chip size="Small" style={index === 0 ? "A" : "B"}>
+                  {index === 0 ? "Current" : "Completed"}
+                </Chip>
+              </div>
+            </div>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Text type="BodyMedium">{event.description}</Text>
+            <div className="timeline-actions">
+              <Button size="Small" type="Outlined">View Details</Button>
+              <Button size="Small" type="Ghost">
+                <Icon icon="MoreHorizontal" />
+              </Button>
+            </div>
+          </AccordionDetails>
+        </Accordion>
+      ))}
+    </AccordionGroup>
+  );
+}
+```