@delightui/components 0.1.105 → 0.1.107

package/docs/components/molecules/Breadcrumb.md

@@ -0,0 +1,403 @@
+# Breadcrumb
+
+## Description
+
+An individual breadcrumb item component that represents a single step in a navigation path. Works as a building block for breadcrumb trails, providing clickable navigation links with support for different states including active, disabled, and various visual styles.
+
+## Aliases
+
+- Breadcrumb
+- BreadcrumbItem
+- PathItem
+- NavigationItem
+- RouteItem
+
+## Props Breakdown
+
+**Extends:** `Omit<NavLinkProps, 'type'>`
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `selected` | `boolean` | `false` | No | Flag that defines the breadcrumb state as selected/active |
+| `navLinkType` | `ButtonTypeEnum` | - | No | Defines the button type used for the breadcrumb link |
+| `to` | `string \| -1` | - | No | Destination URL or path for navigation |
+| `children` | `ReactNode` | - | Yes | Content of the breadcrumb item |
+| `className` | `string` | - | No | Additional CSS class names |
+| `disabled` | `boolean` | `false` | No | Whether the breadcrumb link is disabled |
+
+## Examples
+
+### Basic Usage
+```tsx
+import { Breadcrumb, Text } from '@delightui/components';
+
+function BasicExample() {
+  return (
+    <Breadcrumb to="/dashboard">
+      <Text type="BodyMedium">Dashboard</Text>
+    </Breadcrumb>
+  );
+}
+```
+
+### Selected State
+```tsx
+function SelectedExample() {
+  return (
+    <div className="breadcrumb-trail">
+      <Breadcrumb to="/home">
+        <Text type="BodyMedium">Home</Text>
+      </Breadcrumb>
+      <span className="breadcrumb-separator">/</span>
+      <Breadcrumb to="/products">
+        <Text type="BodyMedium">Products</Text>
+      </Breadcrumb>
+      <span className="breadcrumb-separator">/</span>
+      <Breadcrumb selected>
+        <Text type="BodyMedium">Product Details</Text>
+      </Breadcrumb>
+    </div>
+  );
+}
+```
+
+### Different Button Types
+```tsx
+function ButtonTypesExample() {
+  return (
+    <div className="breadcrumb-types">
+      <Breadcrumb to="/home" navLinkType="Filled">
+        <Text type="BodyMedium">Filled</Text>
+      </Breadcrumb>
+      <span className="breadcrumb-separator">/</span>
+      
+      <Breadcrumb to="/products" navLinkType="Outlined">
+        <Text type="BodyMedium">Outlined</Text>
+      </Breadcrumb>
+      <span className="breadcrumb-separator">/</span>
+      
+      <Breadcrumb to="/details" navLinkType="Ghost">
+        <Text type="BodyMedium">Ghost</Text>
+      </Breadcrumb>
+      <span className="breadcrumb-separator">/</span>
+      
+      <Breadcrumb selected navLinkType="Text">
+        <Text type="BodyMedium">Text</Text>
+      </Breadcrumb>
+    </div>
+  );
+}
+```
+
+### With Icons
+```tsx
+function WithIconsExample() {
+  return (
+    <div className="breadcrumb-with-icons">
+      <Breadcrumb to="/home">
+        <Icon icon="Home" size="Small" />
+        <Text type="BodyMedium">Home</Text>
+      </Breadcrumb>
+      <span className="breadcrumb-separator">/</span>
+      
+      <Breadcrumb to="/users">
+        <Icon icon="Users" size="Small" />
+        <Text type="BodyMedium">Users</Text>
+      </Breadcrumb>
+      <span className="breadcrumb-separator">/</span>
+      
+      <Breadcrumb to="/profile">
+        <Icon icon="Person" size="Small" />
+        <Text type="BodyMedium">Profile</Text>
+      </Breadcrumb>
+      <span className="breadcrumb-separator">/</span>
+      
+      <Breadcrumb selected>
+        <Icon icon="Settings" size="Small" />
+        <Text type="BodyMedium">Settings</Text>
+      </Breadcrumb>
+    </div>
+  );
+}
+```
+
+### Disabled State
+```tsx
+function DisabledExample() {
+  return (
+    <div className="breadcrumb-disabled">
+      <Breadcrumb to="/home">
+        <Text type="BodyMedium">Home</Text>
+      </Breadcrumb>
+      <span className="breadcrumb-separator">/</span>
+      
+      <Breadcrumb to="/category" disabled>
+        <Text type="BodyMedium">Restricted Category</Text>
+      </Breadcrumb>
+      <span className="breadcrumb-separator">/</span>
+      
+      <Breadcrumb selected>
+        <Text type="BodyMedium">Current Page</Text>
+      </Breadcrumb>
+    </div>
+  );
+}
+```
+
+### E-commerce Navigation
+```tsx
+function EcommerceExample() {
+  const breadcrumbPath = [
+    { label: 'Home', path: '/', icon: 'Home' },
+    { label: 'Electronics', path: '/electronics', icon: 'Devices' },
+    { label: 'Smartphones', path: '/electronics/smartphones', icon: 'Phone' },
+    { label: 'iPhone 15 Pro', path: '/electronics/smartphones/iphone-15-pro', selected: true }
+  ];
+
+  return (
+    <div className="ecommerce-breadcrumbs">
+      {breadcrumbPath.map((item, index) => (
+        <div key={index} className="breadcrumb-item">
+          {index > 0 && <span className="breadcrumb-separator">›</span>}
+          <Breadcrumb 
+            to={item.path} 
+            selected={item.selected}
+            className="ecommerce-breadcrumb"
+          >
+            {item.icon && <Icon icon={item.icon} size="Small" />}
+            <Text type="BodyMedium">{item.label}</Text>
+          </Breadcrumb>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+### Admin Dashboard Navigation
+```tsx
+function AdminDashboardExample() {
+  const currentPath = '/admin/users/manage/permissions';
+  const pathSegments = [
+    { label: 'Dashboard', path: '/admin', icon: 'Dashboard' },
+    { label: 'Users', path: '/admin/users', icon: 'Users' },
+    { label: 'Manage', path: '/admin/users/manage', icon: 'Settings' },
+    { label: 'Permissions', path: '/admin/users/manage/permissions', selected: true, icon: 'Security' }
+  ];
+
+  return (
+    <div className="admin-breadcrumbs">
+      {pathSegments.map((segment, index) => (
+        <div key={index} className="admin-breadcrumb-item">
+          {index > 0 && <span className="admin-separator">→</span>}
+          <Breadcrumb 
+            to={segment.path}
+            selected={segment.selected}
+            navLinkType={segment.selected ? "Filled" : "Ghost"}
+            className="admin-breadcrumb"
+          >
+            <Icon icon={segment.icon} size="Small" />
+            <Text type="BodyMedium">{segment.label}</Text>
+            {segment.selected && <Chip size="Small" style="A">Current</Chip>}
+          </Breadcrumb>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+### File System Navigation
+```tsx
+function FileSystemExample() {
+  const filePath = '/documents/projects/website/assets/images/logo.png';
+  const pathParts = filePath.split('/').filter(Boolean);
+  
+  return (
+    <div className="file-system-breadcrumbs">
+      <Breadcrumb to="/">
+        <Icon icon="Folder" size="Small" />
+        <Text type="BodyMedium">Root</Text>
+      </Breadcrumb>
+      
+      {pathParts.map((part, index) => {
+        const isLast = index === pathParts.length - 1;
+        const fullPath = '/' + pathParts.slice(0, index + 1).join('/');
+        const isFile = isLast && part.includes('.');
+        
+        return (
+          <div key={index} className="file-breadcrumb-item">
+            <span className="file-separator">/</span>
+            <Breadcrumb 
+              to={fullPath}
+              selected={isLast}
+              className="file-breadcrumb"
+            >
+              <Icon 
+                icon={isFile ? "InsertDriveFile" : "Folder"} 
+                size="Small" 
+              />
+              <Text type="BodyMedium">{part}</Text>
+              {isFile && <Chip size="Small" style="B">PNG</Chip>}
+            </Breadcrumb>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+```
+
+### Multi-level Categories
+```tsx
+function MultiLevelExample() {
+  const categories = [
+    { id: 1, name: 'Technology', path: '/tech', level: 0 },
+    { id: 2, name: 'Web Development', path: '/tech/web-dev', level: 1 },
+    { id: 3, name: 'Frontend', path: '/tech/web-dev/frontend', level: 2 },
+    { id: 4, name: 'React', path: '/tech/web-dev/frontend/react', level: 3, selected: true }
+  ];
+
+  return (
+    <div className="multi-level-breadcrumbs">
+      {categories.map((category, index) => (
+        <div key={category.id} className="category-breadcrumb-item">
+          {index > 0 && <span className="category-separator">•</span>}
+          <Breadcrumb 
+            to={category.path}
+            selected={category.selected}
+            navLinkType={category.level === 0 ? "Filled" : "Ghost"}
+            className={`category-breadcrumb level-${category.level}`}
+          >
+            <Text 
+              type={category.level === 0 ? "Heading6" : "BodyMedium"}
+              className={`category-text level-${category.level}`}
+            >
+              {category.name}
+            </Text>
+            {category.selected && (
+              <Icon icon="CheckCircle" size="Small" />
+            )}
+          </Breadcrumb>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+### Interactive Breadcrumb with Dropdown
+```tsx
+function InteractiveExample() {
+  const [showOptions, setShowOptions] = useState(false);
+  const siblingPages = [
+    { name: 'Overview', path: '/project/overview' },
+    { name: 'Timeline', path: '/project/timeline' },
+    { name: 'Team', path: '/project/team' },
+    { name: 'Files', path: '/project/files' }
+  ];
+
+  return (
+    <div className="interactive-breadcrumbs">
+      <Breadcrumb to="/home">
+        <Icon icon="Home" size="Small" />
+        <Text type="BodyMedium">Home</Text>
+      </Breadcrumb>
+      <span className="breadcrumb-separator">/</span>
+      
+      <Breadcrumb to="/projects">
+        <Text type="BodyMedium">Projects</Text>
+      </Breadcrumb>
+      <span className="breadcrumb-separator">/</span>
+      
+      <div className="breadcrumb-dropdown">
+        <Breadcrumb 
+          selected
+          onClick={() => setShowOptions(!showOptions)}
+          className="dropdown-breadcrumb"
+        >
+          <Text type="BodyMedium">Website Redesign</Text>
+          <Icon icon="ExpandMore" size="Small" />
+        </Breadcrumb>
+        
+        {showOptions && (
+          <div className="breadcrumb-options">
+            {siblingPages.map((page, index) => (
+              <Breadcrumb 
+                key={index}
+                to={page.path}
+                className="dropdown-option"
+              >
+                <Text type="BodySmall">{page.name}</Text>
+              </Breadcrumb>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+```
+
+### Responsive Breadcrumbs
+```tsx
+function ResponsiveExample() {
+  const [showAll, setShowAll] = useState(false);
+  const breadcrumbItems = [
+    { label: 'Home', path: '/' },
+    { label: 'Products', path: '/products' },
+    { label: 'Electronics', path: '/products/electronics' },
+    { label: 'Computers', path: '/products/electronics/computers' },
+    { label: 'Laptops', path: '/products/electronics/computers/laptops' },
+    { label: 'Gaming Laptops', path: '/products/electronics/computers/laptops/gaming', selected: true }
+  ];
+
+  const visibleItems = showAll ? breadcrumbItems : [
+    breadcrumbItems[0],
+    ...breadcrumbItems.slice(-2)
+  ];
+
+  return (
+    <div className="responsive-breadcrumbs">
+      {!showAll && breadcrumbItems.length > 3 && (
+        <>
+          <Breadcrumb to={breadcrumbItems[0].path}>
+            <Text type="BodyMedium">{breadcrumbItems[0].label}</Text>
+          </Breadcrumb>
+          <span className="breadcrumb-separator">/</span>
+          <Breadcrumb 
+            onClick={() => setShowAll(true)}
+            className="breadcrumb-ellipsis"
+          >
+            <Text type="BodyMedium">...</Text>
+          </Breadcrumb>
+          <span className="breadcrumb-separator">/</span>
+        </>
+      )}
+      
+      {(showAll ? breadcrumbItems : breadcrumbItems.slice(-2)).map((item, index, array) => (
+        <div key={index} className="responsive-breadcrumb-item">
+          {index > 0 && <span className="breadcrumb-separator">/</span>}
+          <Breadcrumb 
+            to={item.path}
+            selected={item.selected}
+          >
+            <Text type="BodyMedium">{item.label}</Text>
+          </Breadcrumb>
+        </div>
+      ))}
+      
+      {showAll && (
+        <Button 
+          size="Small" 
+          type="Ghost" 
+          onClick={() => setShowAll(false)}
+          className="collapse-breadcrumbs"
+        >
+          <Icon icon="ExpandLess" size="Small" />
+        </Button>
+      )}
+    </div>
+  );
+}
+```