@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -28,8 +28,8 @@ export const Default: Story = {
       { label: 'Home', href: '/' },
       { label: 'Products', href: '/products' },
       { label: 'Category', href: '/products/category' },
-      { label: 'Product Name', active: true }
-    ]
+      { label: 'Product Name', active: true },
+    ],
   },
 };
 
@@ -37,27 +37,27 @@ export const Default: Story = {
 export const WithIcons: Story = {
   args: {
     items: [
-      { 
-        label: 'Home', 
-        href: '/', 
-        icon: <Icon name="House" size="sm" /> 
+      {
+        label: 'Home',
+        href: '/',
+        icon: <Icon name="House" size="sm" />,
+      },
+      {
+        label: 'Products',
+        href: '/products',
+        icon: <Icon name="Package" size="sm" />,
       },
-      { 
-        label: 'Products', 
-        href: '/products', 
-        icon: <Icon name="Package" size="sm" /> 
+      {
+        label: 'Category',
+        href: '/products/category',
+        icon: <Icon name="Folder" size="sm" />,
       },
-      { 
-        label: 'Category', 
-        href: '/products/category', 
-        icon: <Icon name="Folder" size="sm" /> 
+      {
+        label: 'Product Name',
+        active: true,
+        icon: <Icon name="Tag" size="sm" />,
       },
-      { 
-        label: 'Product Name', 
-        active: true, 
-        icon: <Icon name="Tag" size="sm" /> 
-      }
-    ]
+    ],
   },
 };
 
@@ -68,9 +68,9 @@ export const CustomDivider: Story = {
       { label: 'Home', href: '/' },
       { label: 'Products', href: '/products' },
       { label: 'Category', href: '/products/category' },
-      { label: 'Product Name', active: true }
+      { label: 'Product Name', active: true },
     ],
-    divider: '/'
+    divider: '/',
   },
 };
 
@@ -78,31 +78,31 @@ export const CustomDivider: Story = {
 export const WithClickHandlers: Story = {
   args: {
     items: [
-      { 
-        label: 'Home', 
-        href: '/', 
-        onClick: (e) => {
+      {
+        label: 'Home',
+        href: '/',
+        onClick: e => {
           e.preventDefault();
           alert('Home clicked');
-        }
+        },
       },
-      { 
-        label: 'Products', 
-        href: '/products', 
-        onClick: (e) => {
+      {
+        label: 'Products',
+        href: '/products',
+        onClick: e => {
           e.preventDefault();
           alert('Products clicked');
-        }
+        },
       },
-      { 
-        label: 'Category', 
-        href: '/products/category', 
-        onClick: (e) => {
+      {
+        label: 'Category',
+        href: '/products/category',
+        onClick: e => {
           e.preventDefault();
           alert('Category clicked');
-        }
+        },
       },
-      { label: 'Product Name', active: true }
-    ]
+      { label: 'Product Name', active: true },
+    ],
   },
-}; 
+};

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -6,22 +6,22 @@ export interface BreadcrumbItem {
    * Text to display
    */
   label: string;
-  
+
   /**
    * URL for the breadcrumb item
    */
   href?: string;
-  
+
   /**
    * Whether this item is active (current page)
    */
   active?: boolean;
-  
+
   /**
    * Optional icon to display before the label
    */
   icon?: ReactNode;
-  
+
   /**
    * Optional click handler
    */
@@ -33,17 +33,17 @@ export interface BreadcrumbProps {
    * Array of breadcrumb items
    */
   items: BreadcrumbItem[];
-  
+
   /**
    * Custom divider character or element
    */
   divider?: ReactNode;
-  
+
   /**
    * Additional className
    */
   className?: string;
-  
+
   /**
    * Aria label for the navigation
    */
@@ -53,13 +53,10 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
   items,
   divider,
   className = '',
-  ariaLabel = 'Breadcrumb'
+  ariaLabel = 'Breadcrumb',
 }) => {
-  const breadcrumbClasses = [
-    BREADCRUMB.CLASSES.BASE,
-    className
-  ].filter(Boolean).join(' ');
-  
+  const breadcrumbClasses = [BREADCRUMB.CLASSES.BASE, className].filter(Boolean).join(' ');
+
   return (
     <nav aria-label={ariaLabel}>
       <ol className={breadcrumbClasses}>
@@ -67,30 +64,26 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
           const isLast = index === items.length - 1;
           const itemClasses = [
             BREADCRUMB.CLASSES.ITEM,
-            item.active || isLast ? BREADCRUMB.CLASSES.ACTIVE : ''
-          ].filter(Boolean).join(' ');
-          
+            item.active || isLast ? BREADCRUMB.CLASSES.ACTIVE : '',
+          ]
+            .filter(Boolean)
+            .join(' ');
+
           const linkContent = (
             <>
               {item.icon && <span className="c-breadcrumb__icon">{item.icon}</span>}
               {item.label}
             </>
           );
-          
+
           return (
             <li key={index} className={itemClasses}>
               {item.href && !item.active ? (
-                <a
-                  href={item.href}
-                  className={BREADCRUMB.CLASSES.LINK}
-                  onClick={item.onClick}
-                >
+                <a href={item.href} className={BREADCRUMB.CLASSES.LINK} onClick={item.onClick}>
                   {linkContent}
                 </a>
               ) : (
-                <span className={BREADCRUMB.CLASSES.LINK}>
-                  {linkContent}
-                </span>
+                <span className={BREADCRUMB.CLASSES.LINK}>{linkContent}</span>
               )}
             </li>
           );
@@ -102,4 +95,4 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
 
 Breadcrumb.displayName = 'Breadcrumb';
 
-export default Breadcrumb;
+export default Breadcrumb;

package/src/components/Breadcrumb/index.ts

@@ -1,3 +1,3 @@
 export { Breadcrumb } from './Breadcrumb';
 export { default } from './Breadcrumb';
-export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb'; 
+export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb';

package/src/components/Breadcrumb/scripts/breadcrumb.ts

@@ -10,7 +10,7 @@ const DEFAULT_OPTIONS: BreadcrumbOptions = {
   items: [],
   divider: BREADCRUMB.DEFAULTS.DIVIDER,
   className: '',
-  ariaLabel: 'Breadcrumb'
+  ariaLabel: 'Breadcrumb',
 };
 
 /**
@@ -19,14 +19,14 @@ const DEFAULT_OPTIONS: BreadcrumbOptions = {
 export default class Breadcrumb implements BreadcrumbInstance {
   // DOM element
   private element: HTMLElement;
-  
+
   // Options
   private options: BreadcrumbOptions;
 
   // DOM references
   private navElement: HTMLElement = document.createElement('nav');
   private listElement: HTMLOListElement = document.createElement('ol');
-  
+
   // Composables
   private breadcrumbUtils = useBreadcrumb();
 
@@ -37,22 +37,21 @@ export default class Breadcrumb implements BreadcrumbInstance {
    */
   constructor(element: string | HTMLElement, options: Partial<BreadcrumbOptions> = {}) {
     // Get element reference
-    this.element = typeof element === 'string'
-      ? document.querySelector(element) as HTMLElement
-      : element;
-    
+    this.element =
+      typeof element === 'string' ? (document.querySelector(element) as HTMLElement) : element;
+
     if (!this.element) {
       throw new Error('Breadcrumb: element not found');
     }
-    
+
     // Merge default options with provided options
     this.options = { ...DEFAULT_OPTIONS, ...options };
-    
+
     // Ensure items is always an array
     if (!this.options.items) {
       this.options.items = [];
     }
-    
+
     // Initialize the component
     this._initialize();
   }
@@ -64,14 +63,14 @@ export default class Breadcrumb implements BreadcrumbInstance {
   private _initialize(): void {
     // Clear element
     this.element.innerHTML = '';
-    
+
     // Reset DOM elements
     this.navElement = document.createElement('nav');
     this.listElement = document.createElement('ol');
-    
+
     // Create structure
     this._createStructure();
-    
+
     // Append to DOM
     this.element.appendChild(this.navElement);
   }
@@ -85,52 +84,55 @@ export default class Breadcrumb implements BreadcrumbInstance {
     if (this.options.ariaLabel) {
       this.navElement.setAttribute('aria-label', this.options.ariaLabel);
     }
-    
+
     // Create list element
     this.listElement.className = this.breadcrumbUtils.generateBreadcrumbClass(this.options);
-    
+
     // Add items
     const items = this.options.items || [];
     if (items.length > 0) {
       items.forEach((item, index) => {
         const isLast = index === items.length - 1;
-        
+
         // Create list item
         const listItem = document.createElement('li');
         listItem.className = this.breadcrumbUtils.generateItemClass(item, isLast);
-        
+
         // Create link or span
         let linkElement: HTMLAnchorElement | HTMLSpanElement;
-        
+
         if (this.breadcrumbUtils.isItemLink(item, isLast)) {
           linkElement = document.createElement('a');
           (linkElement as HTMLAnchorElement).href = item.href || '#';
-          
+
           if (typeof item.onClick === 'function') {
-            (linkElement as HTMLAnchorElement).addEventListener('click', item.onClick as EventListener);
+            (linkElement as HTMLAnchorElement).addEventListener(
+              'click',
+              item.onClick as EventListener
+            );
           }
         } else {
           linkElement = document.createElement('span');
         }
-        
+
         linkElement.className = BREADCRUMB.CLASSES.LINK;
-        
+
         // Add icon if provided
         if (item.icon) {
           const iconElement = createIconElement(item.icon, 16, 'c-breadcrumb__icon');
           iconElement.style.marginRight = '4px';
           linkElement.appendChild(iconElement);
         }
-        
+
         // Add label text
         const labelText = document.createTextNode(item.label);
         linkElement.appendChild(labelText);
-        
+
         listItem.appendChild(linkElement);
         this.listElement.appendChild(listItem);
       });
     }
-    
+
     this.navElement.appendChild(this.listElement);
   }
 
@@ -141,12 +143,12 @@ export default class Breadcrumb implements BreadcrumbInstance {
   public update(options: Partial<BreadcrumbOptions>): void {
     // Update options
     this.options = { ...this.options, ...options };
-    
+
     // Ensure items is always an array
     if (!this.options.items) {
       this.options.items = [];
     }
-    
+
     // Re-initialize
     this._initialize();
   }
@@ -162,7 +164,7 @@ export default class Breadcrumb implements BreadcrumbInstance {
         // No need to remove event listeners as we're removing the elements
       });
     }
-    
+
     // Remove DOM elements
     this.element.innerHTML = '';
   }
@@ -177,19 +179,19 @@ export default class Breadcrumb implements BreadcrumbInstance {
     return Array.from(elements).map(element => {
       // Try to get options from data attributes
       const options: BreadcrumbOptions = {};
-      
+
       // Get aria label
       const ariaLabel = element.getAttribute('data-aria-label');
       if (ariaLabel) options.ariaLabel = ariaLabel;
-      
+
       // Get class name
       const className = element.getAttribute('data-class-name');
       if (className) options.className = className;
-      
+
       // Get divider
       const divider = element.getAttribute('data-divider');
       if (divider) options.divider = divider;
-      
+
       // Get items from data attribute
       const itemsAttr = element.getAttribute('data-items');
       if (itemsAttr) {
@@ -199,8 +201,8 @@ export default class Breadcrumb implements BreadcrumbInstance {
           console.error('Invalid JSON in data-items attribute', e);
         }
       }
-      
+
       return new Breadcrumb(element as HTMLElement, options);
     });
   }
-} 
+}

package/src/components/Breadcrumb/scripts/index.ts

@@ -2,4 +2,4 @@ import Breadcrumb from './breadcrumb';
 import type { BreadcrumbItem, BreadcrumbOptions, BreadcrumbInstance } from './types';
 
 export type { BreadcrumbItem, BreadcrumbOptions, BreadcrumbInstance };
-export default Breadcrumb; 
+export default Breadcrumb;

package/src/components/Breadcrumb/scripts/types.ts

@@ -6,22 +6,22 @@ export interface BreadcrumbItem {
    * Item label text
    */
   label: string;
-  
+
   /**
    * Optional URL for the breadcrumb item
    */
   href?: string;
-  
+
   /**
    * Whether this item is active/current
    */
   active?: boolean;
-  
+
   /**
    * Icon name from Phosphor Icons
    */
   icon?: string;
-  
+
   /**
    * Optional click handler
    */
@@ -36,17 +36,17 @@ export interface BreadcrumbOptions {
    * Array of breadcrumb items
    */
   items?: BreadcrumbItem[];
-  
+
   /**
    * Divider character or string between items
    */
   divider?: string;
-  
+
   /**
    * Additional CSS class names
    */
   className?: string;
-  
+
   /**
    * Accessible label for the breadcrumb navigation
    */
@@ -61,9 +61,9 @@ export interface BreadcrumbInstance {
    * Update the breadcrumb with new options
    */
   update: (options: Partial<BreadcrumbOptions>) => void;
-  
+
   /**
    * Destroy the breadcrumb component
    */
   destroy: () => void;
-} 
+}

package/src/components/Button/Button.stories.tsx

@@ -12,32 +12,46 @@ const meta = {
     variant: {
       control: { type: 'select' },
       options: [
-        'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark',
-        'outline-primary', 'outline-secondary', 'outline-success', 'outline-info', 
-        'outline-warning', 'outline-danger', 'outline-light', 'outline-dark', 'link'
+        'primary',
+        'secondary',
+        'success',
+        'info',
+        'warning',
+        'danger',
+        'light',
+        'dark',
+        'outline-primary',
+        'outline-secondary',
+        'outline-success',
+        'outline-info',
+        'outline-warning',
+        'outline-danger',
+        'outline-light',
+        'outline-dark',
+        'link',
       ],
-      description: 'The visual style of the button'
+      description: 'The visual style of the button',
     },
     size: {
       control: { type: 'select' },
       options: ['sm', 'md', 'lg'],
-      description: 'The size of the button'
+      description: 'The size of the button',
     },
     disabled: {
       control: 'boolean',
-      description: 'Whether the button is disabled'
+      description: 'Whether the button is disabled',
     },
     icon: {
       control: 'text',
-      description: 'Optional icon element to display in the button'
+      description: 'Optional icon element to display in the button',
     },
     iconOnly: {
       control: 'boolean',
-      description: 'Whether the button should only display an icon'
+      description: 'Whether the button should only display an icon',
     },
     rounded: {
       control: 'boolean',
-      description: 'Whether the button should have a fully rounded (pill) shape'
+      description: 'Whether the button should have a fully rounded (pill) shape',
     },
   },
 } satisfies Meta<typeof Button>;
@@ -47,7 +61,17 @@ type Story = StoryObj<typeof meta>;
 
 // Mock icon component for stories
 const Icon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
     <path d="M12 5v14M5 12h14" />
   </svg>
 );
@@ -186,7 +210,7 @@ export const IconOnly: Story = {
 export const AllVariants: Story = {
   args: {
     label: 'Button',
-    variant: "success",
+    variant: 'success',
   },
   render: () => (
     <div className="u-d-flex u-flex-wrap u-gap-2">
@@ -243,7 +267,7 @@ export const IconButtonVariants: Story = {
     label: 'Button',
     variant: 'primary',
     icon: <Icon />,
-    iconOnly: true
+    iconOnly: true,
   },
   render: () => (
     <div className="u-d-flex u-flex-wrap u-gap-2">

package/src/components/Button/Button.tsx

@@ -10,45 +10,58 @@ export type ButtonAsProp = {
   [key: string]: any;
 };
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps & ButtonAsProp>(({
-  label,
-  children,
-  onClick,
-  variant = 'primary',
-  size = 'md',
-  disabled = false,
-  icon,
-  iconOnly = false,
-  rounded = false,
-  className = '',
-  as: Component = 'button',
-  ...props
-}, ref) => {
-  const { generateButtonClass, handleClick } = useButton({ 
-    variant, size, disabled, rounded 
-  });
-  
-  const buttonClass = generateButtonClass({ 
-    variant, size, disabled, rounded, iconOnly, className 
-  });
-  
-  // Handle the case when the button is rendered as a link or another component
-  const buttonProps = {
-    ref,
-    className: buttonClass,
-    onClick: handleClick(onClick),
-    disabled,
-    'aria-disabled': disabled,
-    ...props,
-  };
-
-  return (
-    <Component {...buttonProps}>
-      {icon && <span className="button__icon">{icon}</span>}
-      {!iconOnly && <span className="button__label">{label || children}</span>}
-    </Component>
-  );
-});
+export const Button = forwardRef<HTMLButtonElement, ButtonProps & ButtonAsProp>(
+  (
+    {
+      label,
+      children,
+      onClick,
+      variant = 'primary',
+      size = 'md',
+      disabled = false,
+      icon,
+      iconOnly = false,
+      rounded = false,
+      className = '',
+      as: Component = 'button',
+      ...props
+    },
+    ref
+  ) => {
+    const { generateButtonClass, handleClick } = useButton({
+      variant,
+      size,
+      disabled,
+      rounded,
+    });
+
+    const buttonClass = generateButtonClass({
+      variant,
+      size,
+      disabled,
+      rounded,
+      iconOnly,
+      className,
+    });
+
+    // Handle the case when the button is rendered as a link or another component
+    const buttonProps = {
+      ref,
+      className: buttonClass,
+      onClick: handleClick(onClick),
+      disabled,
+      'aria-disabled': disabled,
+      ...props,
+    };
+
+    return (
+      <Component {...buttonProps}>
+        {icon && <span className="button__icon">{icon}</span>}
+        {!iconOnly && <span className="button__label">{label || children}</span>}
+      </Component>
+    );
+  }
+);
 
 Button.displayName = 'Button';