@shohojdhara/atomix 0.3.4 → 0.3.6

package/src/components/Form/Radio.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { RadioProps } from '../../lib/types/components';
 import { useRadio } from '../../lib/composables/useRadio';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
@@ -6,7 +6,7 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 /**
  * Radio - A component for radio button inputs
  */
-export const Radio: React.FC<RadioProps> = ({
+export const Radio: React.FC<RadioProps> = memo(({
   label,
   checked = false,
   onChange,
@@ -77,7 +77,7 @@ export const Radio: React.FC<RadioProps> = ({
   }
 
   return radioContent;
-};
+});
 
 export type { RadioProps };
 

package/src/components/Form/Select.stories.tsx

@@ -1,17 +1,25 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 import { Select } from './Select';
+import { SIZES } from '../../lib/constants/components';
 
 const meta = {
   title: 'Components/Form/Select',
   component: Select,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Select component provides a dropdown menu for selecting one or more options from a list. It supports single and multiple selection modes, validation states, and can be customized with different sizes. Select components are essential for forms requiring user choice from predefined options.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
+      options: SIZES,
       description: 'Size of the select',
     },
     disabled: {

package/src/components/Form/Select.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, memo } from 'react';
 import { SelectProps } from '../../lib/types/components';
 import { useSelect } from '../../lib/composables';
 import { SELECT } from '../../lib/constants/components';
@@ -7,7 +7,7 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 /**
  * Select - A component for dropdown selection
  */
-export const Select: React.FC<SelectProps> = ({
+export const Select: React.FC<SelectProps> = memo(({
   options = [],
   value,
   onChange,
@@ -204,7 +204,7 @@ export const Select: React.FC<SelectProps> = ({
   }
 
   return selectContent;
-};
+});
 
 export type { SelectProps };
 

package/src/components/Form/Textarea.stories.tsx

@@ -1,12 +1,20 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Textarea } from './Textarea';
+import { SIZES, THEME_COLORS } from '../../lib/constants/components';
 
 const meta = {
   title: 'Components/Form/Textarea',
   component: Textarea,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Textarea component provides a multi-line text input field for longer content. It supports various sizes, validation states, and can be customized with different variants. Textareas are ideal for comments, descriptions, or any content requiring multiple lines of input.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     value: {
       control: 'text',
@@ -26,12 +34,12 @@ const meta = {
     },
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
+      options: SIZES,
       description: 'Size of the textarea',
     },
     variant: {
       control: { type: 'select' },
-      options: ['primary', 'secondary', 'success', 'error', 'warning', 'info'],
+      options: THEME_COLORS,
       description: 'Color variant of the textarea',
     },
     disabled: {

package/src/components/Form/Textarea.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, memo } from 'react';
 import { TextareaProps } from '../../lib/types/components';
 import { useTextarea } from '../../lib/composables/useTextarea';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
@@ -6,7 +6,8 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 /**
  * Textarea - A component for multiline text input
  */
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+export const Textarea = memo(
+  forwardRef<HTMLTextAreaElement, TextareaProps>(
   (
     {
       value,
@@ -100,6 +101,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
 
     return textareaElement;
   }
+  )
 );
 
 Textarea.displayName = 'Textarea';

package/src/components/Hero/Hero.stories.tsx

@@ -27,7 +27,14 @@ const meta = {
   component: Hero,
   parameters: {
     layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'The Hero component creates prominent banner sections typically used at the top of pages. It provides a flexible layout for titles, subtitles, text content, call-to-action buttons, and images. Heroes are ideal for landing pages, marketing sections, or any area requiring prominent visual presentation.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     title: {
       control: 'text',

package/src/components/List/List.stories.tsx

@@ -8,7 +8,14 @@ const meta = {
   component: List,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The List component provides a flexible way to display ordered or unordered lists of items. It supports multiple style variants including default, dashed, numbered, and text styles. Lists can be used for navigation, content organization, or any scenario requiring structured item display.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     variant: {
       control: { type: 'select' },
@@ -44,8 +51,8 @@ const ListItems = ({ variant }: { variant: string }) => (
   </>
 );
 
-const createListSection = (title: string, variant: string) => (
-  <div style={sectionStyle}>
+const createListSection = (title: string, variant: string, key?: string) => (
+  <div key={key} style={sectionStyle}>
     <h3 style={titleStyle}>{title}</h3>
     <List variant={variant as any}>
       <ListItems variant={variant} />
@@ -67,7 +74,7 @@ export const VariantsShowcase: Story = {
       <div className="u-d-flex u-flex-column u-gap-8">
         {['Default', 'Dash', 'Number', 'Text'].map((title, index) => {
           const variant = index === 0 ? 'default' : title.toLowerCase();
-          return createListSection(`${title} List`, variant);
+          return createListSection(`${title} List`, variant, variant);
         })}
       </div>
     );

package/src/components/List/List.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { ListProps } from '../../lib/types/components';
 import { LIST } from '../../lib/constants/components';
 
-export const List: React.FC<ListProps> = ({
+export const List: React.FC<ListProps> = memo(({
   children,
   variant = 'default',
   className = '',
@@ -27,7 +27,7 @@ export const List: React.FC<ListProps> = ({
       })}
     </ListElement>
   );
-};
+});
 
 export type { ListProps };
 

package/src/components/List/ListGroup.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import { ListGroupProps } from '../../lib/types/components';
+import { ListGroupProps as ListGroupPropsType } from '../../lib/types/components';
 import { LIST_GROUP } from '../../lib/constants/components';
 import { List } from './List';
 
+export type ListGroupProps = ListGroupPropsType;
+
 export const ListGroup: React.FC<ListGroupProps> = ({
   children,
   className = '',

package/src/components/Messages/Messages.stories.tsx

@@ -1,9 +1,9 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 import { MessageItem } from '../../lib/types/components';
 import { Messages } from './Messages';
 
-const meta: Meta<typeof Messages> = {
+const meta = {
   title: 'Components/Messages',
   component: Messages,
   parameters: {
@@ -11,10 +11,11 @@ const meta: Meta<typeof Messages> = {
     docs: {
       description: {
         component:
-          'Messages component for displaying chat conversations with support for text messages, images, and file attachments.',
+          'The Messages component provides a complete chat interface for displaying conversations. It supports text messages, images, file attachments, timestamps, and user avatars. Messages are ideal for chat applications, support systems, or any scenario requiring real-time or historical message display.',
       },
     },
   },
+  tags: ['autodocs'],
   argTypes: {
     messages: { control: 'object' },
     width: { control: 'text' },
@@ -23,13 +24,13 @@ const meta: Meta<typeof Messages> = {
     otherName: { control: 'text' },
     otherAvatar: { control: 'text' },
     selfAvatar: { control: 'text' },
-    placeholder: { control: 'text' },
-    disabled: { control: 'boolean' },
+    placeholder: { control: 'text', description: 'Placeholder text for the input field' },
+    disabled: { control: 'boolean', description: 'Whether the messages component is disabled' },
   },
-};
+} satisfies Meta<typeof Messages>;
 
 export default meta;
-type Story = StoryObj<typeof Messages>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {

package/src/components/Modal/Modal.stories.tsx

@@ -1,16 +1,27 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
+import type { AtomixGlassProps } from '../../lib/types/components';
 import Modal from './Modal';
 
-const meta: Meta<typeof Modal> = {
+// Helper type for glass props in stories (without children requirement)
+type GlassProps = boolean | Omit<AtomixGlassProps, 'children'>;
+
+const meta = {
   title: 'Components/Modal',
   component: Modal,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Modal component displays content in a focused overlay dialog. It provides a way to present important information or actions that require user attention. Modals support various sizes, can include headers and footers, and support glass morphism effects.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     size: {
-      control: 'select',
+      control: { type: 'select' },
       options: ['sm', 'md', 'lg', 'xl'],
       description: 'Size of the modal',
       defaultValue: 'md',
@@ -35,10 +46,10 @@ const meta: Meta<typeof Modal> = {
       description: 'Enable glass morphism effect',
     },
   },
-};
+} satisfies Meta<typeof Modal>;
 
 export default meta;
-type Story = StoryObj<typeof Modal>;
+type Story = StoryObj<typeof meta>;
 
 /**
  * Basic modal example with a button to trigger opening.
@@ -377,7 +388,7 @@ export const GlassModalCustom: Story = {
               aberrationIntensity: 2,
               cornerRadius: 20,
               mode: 'polar',
-            } as any
+            } as GlassProps
           }
           footer={
             <>

package/src/components/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState, useCallback } from 'react';
+import React, { useEffect, useRef, useState, useCallback, memo } from 'react';
 import { ModalProps } from '../../lib/types/components';
 import { MODAL } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
@@ -76,7 +76,7 @@ function useModal({
 /**
  * Modal component for displaying overlay content
  */
-export const Modal: React.FC<ModalProps> = ({
+export const Modal: React.FC<ModalProps> = memo(({
   children,
   isOpen = false,
   onOpenChange,
@@ -213,7 +213,7 @@ export const Modal: React.FC<ModalProps> = ({
       </div>
     </div>
   );
-};
+});
 
 Modal.displayName = 'Modal';
 

package/src/components/Navigation/Menu/MegaMenu.tsx

@@ -7,7 +7,7 @@ import {
 import { Icon } from '../../Icon/Icon';
 import { mapIconName } from './Menu'; // Import the mapping function
 
-export const MegaMenu: React.FC<MegaMenuProps> = forwardRef<HTMLDivElement, MegaMenuProps>(
+export const MegaMenu = forwardRef<HTMLDivElement, MegaMenuProps>(
   ({ children, className = '', style, disabled = false }, ref) => {
     return (
       <div ref={ref} className={`c-menu c-menu--mega ${className}`} style={style}>
@@ -31,7 +31,9 @@ export const MegaMenu: React.FC<MegaMenuProps> = forwardRef<HTMLDivElement, Mega
   }
 );
 
-export const MegaMenuColumn: React.FC<MegaMenuColumnProps> = forwardRef<
+MegaMenu.displayName = 'MegaMenu';
+
+export const MegaMenuColumn = forwardRef<
   HTMLDivElement,
   MegaMenuColumnProps
 >(({ title, icon, children, width = 'auto', className = '', disabled = false }, ref) => {
@@ -80,7 +82,9 @@ export const MegaMenuColumn: React.FC<MegaMenuColumnProps> = forwardRef<
   );
 });
 
-export const MegaMenuLink: React.FC<MegaMenuLinkProps> = forwardRef<
+MegaMenuColumn.displayName = 'MegaMenuColumn';
+
+export const MegaMenuLink = forwardRef<
   HTMLAnchorElement,
   MegaMenuLinkProps
 >(({ href, children, className = '', disabled = false, onClick }, ref) => {
@@ -107,3 +111,5 @@ export const MegaMenuLink: React.FC<MegaMenuLinkProps> = forwardRef<
     </a>
   );
 });
+
+MegaMenuLink.displayName = 'MegaMenuLink';

package/src/components/Navigation/Menu/Menu.stories.tsx

@@ -6,7 +6,14 @@ const meta = {
   component: Menu,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Menu component provides a vertical list of menu items, typically used in dropdowns, sidebars, or context menus. It supports dividers, icons, and can be nested. Menus are ideal for organizing navigation options, actions, or any hierarchical list of choices.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     disabled: {
       control: 'boolean',

package/src/components/Navigation/Menu/Menu.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, ReactNode } from 'react';
 import { MenuProps, MenuItemProps } from '../../../lib/types/components';
 import { Icon } from '../../Icon/Icon';
 
-export const Menu: React.FC<MenuProps> = forwardRef<HTMLDivElement, MenuProps>(
+export const Menu = forwardRef<HTMLDivElement, MenuProps>(
   ({ children, className = '', style, disabled = false }, ref) => {
     return (
       <div ref={ref} className={`c-menu ${className}`} style={style}>
@@ -24,6 +24,8 @@ export const Menu: React.FC<MenuProps> = forwardRef<HTMLDivElement, MenuProps>(
   }
 );
 
+Menu.displayName = 'Menu';
+
 export type { MenuProps, MenuItemProps, MenuDividerProps };
 
 export default Menu;
@@ -35,7 +37,7 @@ interface MenuDividerProps {
   className?: string;
 }
 
-export const MenuItem: React.FC<MenuItemProps> = forwardRef<HTMLLIElement, MenuItemProps>(
+export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
   (
     { children, href = '#', icon, active = false, disabled = false, onClick, className = '' },
     ref
@@ -83,6 +85,8 @@ export const MenuItem: React.FC<MenuItemProps> = forwardRef<HTMLLIElement, MenuI
   }
 );
 
+MenuItem.displayName = 'MenuItem';
+
 // Map icon-lux names to Phosphor icon names
 export const mapIconName = (luxIconName: string): any => {
   const iconMap: Record<string, any> = {
@@ -104,8 +108,10 @@ export const mapIconName = (luxIconName: string): any => {
   return iconMap[luxIconName] || 'Circle'; // Default to Circle if no mapping found
 };
 
-export const MenuDivider: React.FC<MenuDividerProps> = forwardRef<HTMLLIElement, MenuDividerProps>(
+export const MenuDivider = forwardRef<HTMLLIElement, MenuDividerProps>(
   ({ className = '' }, ref) => {
     return <li ref={ref} className={`c-menu__divider ${className}`} role="separator"></li>;
   }
 );
+
+MenuDivider.displayName = 'MenuDivider';

package/src/components/Navigation/Nav/Nav.stories.tsx

@@ -9,7 +9,14 @@ const meta = {
   component: Nav,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Nav component provides a horizontal navigation bar for organizing links and menu items. It supports various alignment options, can include dropdowns, and provides a clean interface for site navigation. Nav components are essential for primary site navigation and work seamlessly with NavItem and NavDropdown components.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     alignment: {
       control: { type: 'select' },

package/src/components/Navigation/Navbar/Navbar.stories.tsx

@@ -71,6 +71,7 @@ The Navbar component provides a responsive navigation header with brand, navigat
       },
     },
   },
+  tags: ['autodocs'],
   argTypes: {
     position: {
       control: { type: 'select' },

package/src/components/Navigation/SideMenu/SideMenu.stories.tsx

@@ -138,7 +138,7 @@ The SideMenu component provides a collapsible navigation menu with title and men
 } satisfies Meta<typeof SideMenu>;
 
 export default meta;
-type Story = StoryObj<typeof SideMenu>;
+type Story = StoryObj<typeof meta>;
 
 // Default SideMenu
 export const Default: Story = {