@shohojdhara/atomix 0.3.5 → 0.3.6

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { BADGE, SIZES, THEME_COLORS } from '../../lib/constants/components';
@@ -11,17 +12,26 @@ const meta = {
   component: Badge,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Badge component displays small pieces of information, status indicators, or labels. It supports multiple variants, sizes, and can include icons. Badges are ideal for highlighting important information or showing status.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     variant: {
       control: { type: 'select' },
       options: THEME_COLORS,
       description: 'The visual style of the badge',
+      defaultValue: 'primary',
     },
     size: {
       control: { type: 'select' },
       options: SIZES,
       description: 'The size of the badge',
+      defaultValue: 'md',
     },
     disabled: {
       control: 'boolean',
@@ -60,7 +70,9 @@ const Icon = () => (
   </svg>
 );
 
-// Basic Badges
+/**
+ * Primary badge variant - the main badge style.
+ */
 export const Primary: Story = {
   args: {
     label: 'Primary',
@@ -69,6 +81,9 @@ export const Primary: Story = {
   },
 };
 
+/**
+ * Secondary badge variant - used for secondary information.
+ */
 export const Secondary: Story = {
   args: {
     label: 'Secondary',
@@ -77,6 +92,9 @@ export const Secondary: Story = {
   },
 };
 
+/**
+ * Success badge variant - indicates successful or positive status.
+ */
 export const Success: Story = {
   args: {
     label: 'Success',
@@ -85,6 +103,9 @@ export const Success: Story = {
   },
 };
 
+/**
+ * Info badge variant - used for informational status.
+ */
 export const Info: Story = {
   args: {
     label: 'Info',
@@ -93,6 +114,9 @@ export const Info: Story = {
   },
 };
 
+/**
+ * Warning badge variant - indicates caution or warning status.
+ */
 export const Warning: Story = {
   args: {
     label: 'Warning',
@@ -101,7 +125,10 @@ export const Warning: Story = {
   },
 };
 
-export const error: Story = {
+/**
+ * Error badge variant - indicates error or critical status.
+ */
+export const Error: Story = {
   args: {
     label: 'Error',
     variant: 'error',
@@ -109,6 +136,9 @@ export const error: Story = {
   },
 };
 
+/**
+ * Light badge variant - light color scheme.
+ */
 export const Light: Story = {
   args: {
     label: 'Light',
@@ -117,6 +147,9 @@ export const Light: Story = {
   },
 };
 
+/**
+ * Dark badge variant - dark color scheme.
+ */
 export const Dark: Story = {
   args: {
     label: 'Dark',
@@ -125,7 +158,9 @@ export const Dark: Story = {
   },
 };
 
-// Badge Sizes
+/**
+ * Small size badge variant.
+ */
 export const Small: Story = {
   args: {
     label: 'Small',
@@ -134,6 +169,9 @@ export const Small: Story = {
   },
 };
 
+/**
+ * Medium size badge variant (default).
+ */
 export const Medium: Story = {
   args: {
     label: 'Medium',
@@ -142,6 +180,9 @@ export const Medium: Story = {
   },
 };
 
+/**
+ * Large size badge variant.
+ */
 export const Large: Story = {
   args: {
     label: 'Large',
@@ -150,7 +191,9 @@ export const Large: Story = {
   },
 };
 
-// States
+/**
+ * Disabled badge state - non-interactive badge.
+ */
 export const Disabled: Story = {
   args: {
     label: 'Disabled',
@@ -160,7 +203,9 @@ export const Disabled: Story = {
   },
 };
 
-// With Icon
+/**
+ * Badge with icon - displays an icon alongside the label.
+ */
 export const WithIcon: Story = {
   args: {
     label: 'With Icon',
@@ -170,12 +215,21 @@ export const WithIcon: Story = {
   },
 };
 
-// Group of Badge Variants
+/**
+ * Showcase of all badge color variants in a single view.
+ */
 export const AllVariants: Story = {
   args: {
     label: 'Badge',
     variant: 'primary',
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Displays all available badge color variants for easy comparison and selection.',
+      },
+    },
+  },
   render: () => (
     <div className="u-d-flex u-flex-wrap u-gap-2">
       {THEME_COLORS.map(color => (
@@ -185,12 +239,21 @@ export const AllVariants: Story = {
   ),
 };
 
-// Group of Badge Sizes
+/**
+ * Showcase of all badge sizes (small, medium, large) in a single view.
+ */
 export const AllSizes: Story = {
   args: {
     label: 'Badge',
     variant: 'primary',
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Compares all available badge sizes to help choose the appropriate size for your use case.',
+      },
+    },
+  },
   render: () => (
     <div className="u-d-flex u-align-items-center u-gap-2">
       <Badge label="Small" variant="primary" size="sm" />
@@ -200,7 +263,9 @@ export const AllSizes: Story = {
   ),
 };
 
-// With different content
+/**
+ * Badge examples with different content types (numeric, status, with icons).
+ */
 export const WithDifferentContent: Story = {
   args: {
     label: 'Badge with different content',
@@ -241,11 +306,20 @@ export const WithDifferentContent: Story = {
   ),
 };
 
-// Usage examples
+/**
+ * Real-world usage examples showing badges in navigation, cards, and lists.
+ */
 export const UsageExamples: Story = {
   args: {
     label: 'Usage examples',
   },
+  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.',
+      },
+    },
+  },
   render: () => (
     <div className="u-d-flex u-flex-column u-gap-6 u-max-width-80">
       <div>
@@ -308,7 +382,9 @@ export const UsageExamples: Story = {
   ),
 };
 
-// Theme-aware demo showing badges in both light and dark mode side by side
+/**
+ * Theme-aware badges demonstrating how they adapt to different theme modes.
+ */
 export const ThemeAwareBadges: Story = {
   args: {
     label: 'Badge',
@@ -359,7 +435,7 @@ export const ThemeAwareBadges: Story = {
           </div>
           <div className="u-d-flex u-align-items-center u-gap-2">
             <span className="u-d-inline-block" style={{ width: '120px' }}>
-              error:
+              Error:
             </span>
             <Badge label="Failed" variant="error" />
           </div>
@@ -375,7 +451,9 @@ export const ThemeAwareBadges: Story = {
   ),
 };
 
-// Glass Variants
+/**
+ * Badge with glass morphism effect - primary variant.
+ */
 export const GlassPrimary: Story = {
   args: {
     label: 'Glass Primary',
@@ -540,7 +618,7 @@ export const GlassCustomSettings: Story = {
       aberrationIntensity: 1,
       cornerRadius: 16,
       mode: 'polar',
-    },
+    } as any,
   },
   decorators: [
     Story => (

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

@@ -5,43 +5,27 @@ import { Button } from '../Button/Button';
 import { Card } from '../Card/Card';
 import { Block } from './Block';
 
-const meta: Meta<typeof Block> = {
+const meta = {
   title: 'Components/Block',
   component: Block,
   parameters: {
     layout: 'fullscreen',
     docs: {
       description: {
-        component: `
-The Block component is a flexible layout container designed for creating consistent section layouts.
-It provides standardized spacing, background variants, and container behavior for organizing content
-into distinct sections or blocks.
-
-## Key Features
-- **Flexible spacing**: Multiple spacing sizes (xs, sm, md, lg, xl, none)
-- **Background variants**: Transparent, subtle, muted, primary, secondary, accent
-- **Container integration**: Built-in Container support for responsive layouts
-- **Semantic HTML**: Configurable as section, div, article, aside, or main
-- **Full-width support**: Option for edge-to-edge content
-
-## Usage Guidelines
-Use Block components to:
-- Create consistent section spacing across pages
-- Group related content with appropriate backgrounds
-- Build hero sections, content areas, and feature blocks
-- Maintain visual hierarchy and rhythm in layouts
-        `,
+        component:
+          'The Block component is a flexible layout container designed for creating consistent section layouts. It provides standardized spacing, background variants, and container behavior for organizing content into distinct sections or blocks. Blocks are ideal for hero sections, content areas, feature blocks, and maintaining visual hierarchy.',
       },
     },
   },
+  tags: ['autodocs'],
   argTypes: {
     as: {
-      control: 'select',
+      control: { type: 'select' },
       options: ['section', 'div', 'article', 'aside', 'main'],
       description: 'The HTML element to render as',
     },
     spacing: {
-      control: 'select',
+      control: { type: 'select' },
       options: ['xs', 'sm', 'md', 'lg', 'xl', 'none'],
       description: 'Vertical padding size',
     },
@@ -54,7 +38,7 @@ Use Block components to:
       description: 'Content to render within the block',
     },
   },
-};
+} satisfies Meta<typeof Block>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;

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

@@ -7,7 +7,14 @@ const meta = {
   component: Breadcrumb,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Breadcrumb component provides navigation context by showing the current page location within a site hierarchy. It helps users understand where they are and provides quick navigation to parent pages. Breadcrumbs support custom dividers, icons, and are fully accessible.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     items: { control: 'object' },
     divider: { control: 'text' },