@shohojdhara/atomix 0.3.15 → 0.4.0

package/src/components/Badge/Badge.stories.tsx

@@ -254,7 +254,8 @@ export const UsageExamples: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Practical examples demonstrating how badges can be used in real-world scenarios such as navigation menus, product cards, and task lists.',
+        story:
+          'Practical examples demonstrating how badges can be used in real-world scenarios such as navigation menus, product cards, and task lists.',
       },
     },
   },
@@ -325,7 +326,8 @@ export const AccessibilityFeatures: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Examples of accessible badge implementations with proper ARIA labels and keyboard navigation support.',
+        story:
+          'Examples of accessible badge implementations with proper ARIA labels and keyboard navigation support.',
       },
     },
   },
@@ -338,14 +340,11 @@ export const AccessibilityFeatures: Story = {
           <Badge label="Alert" variant="error" aria-label="Critical notification" />
         </div>
       </div>
-      
+
       <div>
         <h3 className="u-mt-0 u-mb-2">Interactive Badges</h3>
         <div className="u-flex u-gap-2">
-          <Badge 
-            label="Closable Tag" 
-            variant="info" 
-          />
+          <Badge label="Closable Tag" variant="info" />
         </div>
       </div>
     </div>
@@ -361,7 +360,13 @@ export const WithGlassEffect: Story = {
     variant: 'primary',
   },
   render: () => (
-    <div className="u-bg-cover u-bg-center u-rounded-xl u-p-24" style={{backgroundImage: 'url(https://cdn.pixabay.com/photo/2023/07/07/20/42/grasshopper-8113345_1280.jpg)'}}>
+    <div
+      className="u-bg-cover u-bg-center u-rounded-xl u-p-24"
+      style={{
+        backgroundImage:
+          'url(https://cdn.pixabay.com/photo/2023/07/07/20/42/grasshopper-8113345_1280.jpg)',
+      }}
+    >
       <div className="u-flex u-flex-wrap u-gap-2">
         {THEME_COLORS.map(color => (
           <Badge key={color} label={color} variant={color} glass={true} />
@@ -390,7 +395,13 @@ export const WithCustomGlassSettings: Story = {
   },
   decorators: [
     Story => (
-      <div className="u-bg-cover u-bg-center u-rounded-xl u-p-24" style={{backgroundImage: 'url(https://cdn.pixabay.com/photo/2021/06/14/22/46/milky-way-6337038_1280.jpg)'}}>
+      <div
+        className="u-bg-cover u-bg-center u-rounded-xl u-p-24"
+        style={{
+          backgroundImage:
+            'url(https://cdn.pixabay.com/photo/2021/06/14/22/46/milky-way-6337038_1280.jpg)',
+        }}
+      >
         <Story />
       </div>
     ),

package/src/components/Badge/Badge.test.tsx

@@ -4,48 +4,48 @@ import { Badge } from './Badge';
 
 // Mock AtomixGlass component
 vi.mock('../AtomixGlass/AtomixGlass', () => ({
-    AtomixGlass: ({ children, ...props }: any) => (
-        <div data-testid="atomix-glass" data-glass-props={JSON.stringify(props)}>
-            {children}
-        </div>
-    ),
+  AtomixGlass: ({ children, ...props }: any) => (
+    <div data-testid="atomix-glass" data-glass-props={JSON.stringify(props)}>
+      {children}
+    </div>
+  ),
 }));
 
 describe('Badge Component', () => {
-    it('renders correctly', () => {
-        render(<Badge label="Test Badge" />);
-        expect(screen.getByText('Test Badge')).toBeInTheDocument();
-    });
-
-    it('renders with aria-label', () => {
-        render(<Badge label="Badge" aria-label="Accessible Badge" />);
-        expect(screen.getByLabelText('Accessible Badge')).toBeInTheDocument();
-    });
-
-    it('renders close button when onRemove is provided', () => {
-        const handleRemove = vi.fn();
-        render(<Badge label="Removable" onRemove={handleRemove} />);
-
-        const closeButton = screen.getByRole('button', { name: 'Remove badge' });
-        expect(closeButton).toBeInTheDocument();
-
-        fireEvent.click(closeButton);
-        expect(handleRemove).toHaveBeenCalledTimes(1);
-    });
-
-    it('does not render close button when onRemove is not provided', () => {
-        render(<Badge label="Static" />);
-        expect(screen.queryByRole('button')).not.toBeInTheDocument();
-    });
-
-    it('disables close button when badge is disabled', () => {
-        const handleRemove = vi.fn();
-        render(<Badge label="Disabled" onRemove={handleRemove} disabled />);
-
-        const closeButton = screen.getByRole('button', { name: 'Remove badge' });
-        expect(closeButton).toBeDisabled();
-
-        fireEvent.click(closeButton);
-        expect(handleRemove).not.toHaveBeenCalled();
-    });
+  it('renders correctly', () => {
+    render(<Badge label="Test Badge" />);
+    expect(screen.getByText('Test Badge')).toBeInTheDocument();
+  });
+
+  it('renders with aria-label', () => {
+    render(<Badge label="Badge" aria-label="Accessible Badge" />);
+    expect(screen.getByLabelText('Accessible Badge')).toBeInTheDocument();
+  });
+
+  it('renders close button when onRemove is provided', () => {
+    const handleRemove = vi.fn();
+    render(<Badge label="Removable" onRemove={handleRemove} />);
+
+    const closeButton = screen.getByRole('button', { name: 'Remove badge' });
+    expect(closeButton).toBeInTheDocument();
+
+    fireEvent.click(closeButton);
+    expect(handleRemove).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not render close button when onRemove is not provided', () => {
+    render(<Badge label="Static" />);
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('disables close button when badge is disabled', () => {
+    const handleRemove = vi.fn();
+    render(<Badge label="Disabled" onRemove={handleRemove} disabled />);
+
+    const closeButton = screen.getByRole('button', { name: 'Remove badge' });
+    expect(closeButton).toBeDisabled();
+
+    fireEvent.click(closeButton);
+    expect(handleRemove).not.toHaveBeenCalled();
+  });
 });

package/src/components/Badge/Badge.tsx

@@ -4,75 +4,77 @@ import { BADGE } from '../../lib/constants/components';
 import { BadgeProps } from '../../lib/types/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
-export const Badge: React.FC<BadgeProps> = memo(({
-  label,
-  variant = 'primary',
-  size = 'md',
-  disabled = false,
-  icon,
-  onRemove,
-  'aria-label': ariaLabel,
-  className = '',
-  glass,
-  style,
-}) => {
-  const { generateBadgeClass } = useBadge({
-    variant,
-    size,
-    disabled,
-  });
+export const Badge: React.FC<BadgeProps> = memo(
+  ({
+    label,
+    variant = 'primary',
+    size = 'md',
+    disabled = false,
+    icon,
+    onRemove,
+    'aria-label': ariaLabel,
+    className = '',
+    glass,
+    style,
+  }) => {
+    const { generateBadgeClass } = useBadge({
+      variant,
+      size,
+      disabled,
+    });
 
-  const ref = useRef<HTMLSpanElement>(null);
+    const ref = useRef<HTMLSpanElement>(null);
 
-  const badgeClass = generateBadgeClass({
-    variant,
-    size,
-    disabled,
-    className: `${className} ${glass ? 'c-badge--glass' : ''}`.trim(),
-  });
+    const badgeClass = generateBadgeClass({
+      variant,
+      size,
+      disabled,
+      className: `${className} ${glass ? 'c-badge--glass' : ''}`.trim(),
+    });
 
-  const badgeElement = (
-    <span
-      className={badgeClass}
-      aria-disabled={disabled}
-      aria-label={ariaLabel}
-      ref={ref}
-      style={style}
-    >
-      {icon && <span className={BADGE.ICON_CLASS}>{icon}</span>}
-      <span>{label}</span>
-      {onRemove && (
-        <button
-          type="button"
-          className="c-badge__close"
-          onClick={onRemove}
-          aria-label="Remove badge"
-          disabled={disabled}
-        >
-          ×
-        </button>
-      )}
-    </span>
-  );
+    const badgeElement = (
+      <span
+        className={badgeClass}
+        aria-disabled={disabled}
+        aria-label={ariaLabel}
+        ref={ref}
+        style={style}
+      >
+        {icon && <span className={BADGE.ICON_CLASS}>{icon}</span>}
+        <span>{label}</span>
+        {onRemove && (
+          <button
+            type="button"
+            className="c-badge__close"
+            onClick={onRemove}
+            aria-label="Remove badge"
+            disabled={disabled}
+          >
+            ×
+          </button>
+        )}
+      </span>
+    );
 
-  if (glass) {
-    // Default glass settings for badges
-    const defaultGlassProps = {
-      displacementScale: 20,
-      cornerRadius: ref.current?.getBoundingClientRect().width
-        ? ref.current?.getBoundingClientRect().width / 2
-        : 16,
-      className: 'c-badge--glass',
-      elasticity: 0,
-    };
+    if (glass) {
+      // Default glass settings for badges
+      const defaultGlassProps = {
+        displacementScale: 20,
+        cornerRadius: ref.current?.getBoundingClientRect().width
+          ? ref.current?.getBoundingClientRect().width / 2
+          : 16,
+        className: 'c-badge--glass',
+        elasticity: 0,
+      };
 
-    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    return <AtomixGlass {...glassProps}>{badgeElement}</AtomixGlass>;
-  }
+      return <AtomixGlass {...glassProps}>{badgeElement}</AtomixGlass>;
+    }
 
-  return badgeElement;
-});
+    return badgeElement;
+  }
+);
 
 Badge.displayName = 'Badge';
 

package/src/components/Block/Block.stories.tsx

@@ -178,7 +178,9 @@ export const ArticleLayout: Story = {
       <Block spacing="md" container={{ type: 'sm' }} background="secondary">
         <h3>Ready to get started?</h3>
         <p>Join thousands of developers building with our design system.</p>
-        <Button variant="primary" onClick={fn()}>Start Building</Button>
+        <Button variant="primary" onClick={fn()}>
+          Start Building
+        </Button>
       </Block>
     </div>
   ),
@@ -334,14 +336,22 @@ export const ContentPreview: Story = {
             <Card
               title="Cards"
               text="Flexible content containers with multiple options"
-              actions={<Button variant="primary" onClick={fn()}>View Details</Button>}
+              actions={
+                <Button variant="primary" onClick={fn()}>
+                  View Details
+                </Button>
+              }
             />
           </GridCol>
           <GridCol xs={12} md={6} lg={4}>
             <Card
               title="Blocks"
               text="Layout containers with consistent spacing and backgrounds"
-              actions={<Button variant="primary" onClick={fn()}>Learn More</Button>}
+              actions={
+                <Button variant="primary" onClick={fn()}>
+                  Learn More
+                </Button>
+              }
             />
           </GridCol>
         </Grid>
@@ -398,4 +408,4 @@ export const ContentPreview: Story = {
       </Block>
     </div>
   ),
-};
+};

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

@@ -181,18 +181,18 @@ export const WithMixedInteractions: Story = {
   args: {
     items: [
       { label: 'Home', href: '/' },
-      { 
-        label: 'Products', 
+      {
+        label: 'Products',
         onClick: fn(),
         // Simulating client-side navigation
       },
-      { 
-        label: 'Category', 
+      {
+        label: 'Category',
         href: '/products/category',
         icon: <Icon name="Folder" size="sm" />,
       },
-      { 
-        label: 'Product Name', 
+      {
+        label: 'Product Name',
         active: true,
         icon: <Icon name="Tag" size="sm" />,
       },
@@ -202,7 +202,8 @@ export const WithMixedInteractions: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Breadcrumb combining both traditional link navigation and client-side interactions.',
+        story:
+          'Breadcrumb combining both traditional link navigation and client-side interactions.',
       },
     },
   },
@@ -228,4 +229,4 @@ export const LongBreadcrumbPath: Story = {
       },
     },
   },
-};
+};

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -69,67 +69,69 @@ export interface BreadcrumbProps {
    */
   style?: React.CSSProperties;
 }
-export const Breadcrumb: React.FC<BreadcrumbProps> = memo(({
-  items,
-  divider,
-  className = '',
-  'aria-label': ariaLabel = 'Breadcrumb',
-  LinkComponent,
-  style,
-}) => {
-  const breadcrumbClasses = [BREADCRUMB.CLASSES.BASE, className].filter(Boolean).join(' ');
-
-  return (
-    <nav aria-label={ariaLabel} style={style}>
-      <ol className={breadcrumbClasses}>
-        {items.map((item, index) => {
-          const isLast = index === items.length - 1;
-          const itemClasses = [
-            BREADCRUMB.CLASSES.ITEM,
-            item.active || isLast ? BREADCRUMB.CLASSES.ACTIVE : '',
-          ]
-            .filter(Boolean)
-            .join(' ');
-
-          const linkContent = (
-            <>
-              {item.icon && <span className="c-breadcrumb__icon">{item.icon}</span>}
-              {item.label}
-            </>
-          );
-
-          const linkProps = {
-            href: item.href,
-            className: BREADCRUMB.CLASSES.LINK,
-            onClick: item.onClick,
-            style: item.style,
-          };
-
-          return (
-            <li key={index} className={itemClasses} style={item.style}>
-              {item.href && !item.active ? (
-                LinkComponent ? (
-                  (() => {
-                    const Component = LinkComponent as React.ComponentType<any>;
-                    return (
-                      <Component {...(linkProps as React.ComponentProps<React.ElementType>)}>
-                        {linkContent}
-                      </Component>
-                    );
-                  })()
+export const Breadcrumb: React.FC<BreadcrumbProps> = memo(
+  ({
+    items,
+    divider,
+    className = '',
+    'aria-label': ariaLabel = 'Breadcrumb',
+    LinkComponent,
+    style,
+  }) => {
+    const breadcrumbClasses = [BREADCRUMB.CLASSES.BASE, className].filter(Boolean).join(' ');
+
+    return (
+      <nav aria-label={ariaLabel} style={style}>
+        <ol className={breadcrumbClasses}>
+          {items.map((item, index) => {
+            const isLast = index === items.length - 1;
+            const itemClasses = [
+              BREADCRUMB.CLASSES.ITEM,
+              item.active || isLast ? BREADCRUMB.CLASSES.ACTIVE : '',
+            ]
+              .filter(Boolean)
+              .join(' ');
+
+            const linkContent = (
+              <>
+                {item.icon && <span className="c-breadcrumb__icon">{item.icon}</span>}
+                {item.label}
+              </>
+            );
+
+            const linkProps = {
+              href: item.href,
+              className: BREADCRUMB.CLASSES.LINK,
+              onClick: item.onClick,
+              style: item.style,
+            };
+
+            return (
+              <li key={index} className={itemClasses} style={item.style}>
+                {item.href && !item.active ? (
+                  LinkComponent ? (
+                    (() => {
+                      const Component = LinkComponent as React.ComponentType<any>;
+                      return (
+                        <Component {...(linkProps as React.ComponentProps<React.ElementType>)}>
+                          {linkContent}
+                        </Component>
+                      );
+                    })()
+                  ) : (
+                    <a {...(linkProps as React.ComponentProps<'a'>)}>{linkContent}</a>
+                  )
                 ) : (
-                  <a {...(linkProps as React.ComponentProps<'a'>)}>{linkContent}</a>
-                )
-              ) : (
-                <span className={BREADCRUMB.CLASSES.LINK}>{linkContent}</span>
-              )}
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-});
+                  <span className={BREADCRUMB.CLASSES.LINK}>{linkContent}</span>
+                )}
+              </li>
+            );
+          })}
+        </ol>
+      </nav>
+    );
+  }
+);
 
 Breadcrumb.displayName = 'Breadcrumb';
 

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

@@ -41,7 +41,6 @@ const sampleData = {
   longText: 'Lorem ipsum dolor sit amet...'.repeat(20),
 };
 
-
 // ============================================================================
 // META CONFIGURATION
 // ============================================================================
@@ -508,13 +507,13 @@ export const CustomStyling: Story = {
     variant: 'primary',
     size: 'md',
   },
-  render: (args) => (
-    <Button 
-      {...args} 
-      style={{ 
-        background: 'linear-gradient(45deg, #667eea, #764ba2)', 
+  render: args => (
+    <Button
+      {...args}
+      style={{
+        background: 'linear-gradient(45deg, #667eea, #764ba2)',
         border: 'none',
-        boxShadow: '0 4px 15px rgba(0, 0, 0, 0.2)'
+        boxShadow: '0 4px 15px rgba(0, 0, 0, 0.2)',
       }}
     />
   ),
@@ -579,21 +578,16 @@ export const NoIconFallback: Story = {
 export const WithAsyncAction: Story = {
   render: () => {
     const [isLoading, setIsLoading] = useState(false);
-    
+
     const handleClick = useCallback(async () => {
       setIsLoading(true);
       // Simulate async operation
       await new Promise(resolve => setTimeout(resolve, 2000));
       setIsLoading(false);
     }, []);
-    
+
     return (
-      <Button 
-        label="Async Action" 
-        variant="primary" 
-        loading={isLoading}
-        onClick={handleClick}
-      />
+      <Button label="Async Action" variant="primary" loading={isLoading} onClick={handleClick} />
     );
   },
 };
@@ -695,11 +689,7 @@ export const WithKeyboardNavigation: Story = {
 export const WithScreenReader: Story = {
   render: () => (
     <div className="u-flex u-gap-2">
-      <Button 
-        label="Announcement" 
-        variant="primary" 
-        aria-describedby="announcement-description"
-      />
+      <Button label="Announcement" variant="primary" aria-describedby="announcement-description" />
       <div id="announcement-description" className="u-sr-only">
         This button triggers an announcement
       </div>
@@ -758,7 +748,8 @@ export const WithGlassEffect: Story = {
     <div
       className="u-bg-cover u-bg-center u-p-10 u-rounded-xl"
       style={{
-        backgroundImage: 'url(https://cdn.pixabay.com/photo/2022/10/02/17/23/mushroom-7494046_1280.jpg)',
+        backgroundImage:
+          'url(https://cdn.pixabay.com/photo/2022/10/02/17/23/mushroom-7494046_1280.jpg)',
       }}
     >
       <div className="u-flex u-flex-wrap u-gap-2">
@@ -788,6 +779,6 @@ export const WithCustomGlassSettings: Story = {
     },
   },
   decorators: [
-    withBackground('https://cdn.pixabay.com/photo/2021/06/14/22/46/milky-way-6337038_1280.jpg')
+    withBackground('https://cdn.pixabay.com/photo/2021/06/14/22/46/milky-way-6337038_1280.jpg'),
   ],
 };