@shohojdhara/atomix 0.3.5 → 0.3.6

package/src/components/Upload/Upload.stories.tsx

@@ -1,22 +1,25 @@
-import { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
 import { Upload } from './Upload';
+import { SIZES } from '../../lib/constants/components';
 
-export default {
+const meta = {
   title: 'Components/Upload',
   component: Upload,
   parameters: {
+    layout: 'centered',
     docs: {
       description: {
         component:
-          'A modern file upload component with drag & drop functionality, progress tracking, and multiple size variants.',
+          'The Upload component provides a modern file upload interface with drag & drop functionality, progress tracking, file preview, and validation. It supports single and multiple file uploads, custom file size limits, and provides visual feedback throughout the upload process. Ideal for forms requiring file attachments or media uploads.',
       },
     },
   },
+  tags: ['autodocs'],
   argTypes: {
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
+      options: SIZES,
       defaultValue: 'md',
       description: 'Size variant of the upload component',
     },
@@ -56,33 +59,37 @@ export default {
       description: 'Helper text displayed below the button',
     },
   },
-} as Meta<typeof Upload>;
+} satisfies Meta<typeof Upload>;
 
-const Template: StoryFn<typeof Upload> = args => (
-  <div style={{ padding: '30px', maxWidth: '600px' }}>
-    <Upload {...args} />
-  </div>
-);
+export default meta;
+type Story = StoryObj<typeof meta>;
 
 // Default upload component
-export const Default = Template.bind({});
-Default.args = {
-  size: 'md',
-  title: 'Drag and Drop files here',
-  supportedFilesText: 'Files supported: PDF, XSLS, JPEG, PNG, Scanner',
-  buttonText: 'Choose File',
-  helperText: 'Maximum size: 5MB',
-};
-Default.parameters = {
-  docs: {
-    description: {
-      story: 'The default upload component with medium size and standard styling.',
+export const Default: Story = {
+  render: args => (
+    <div style={{ padding: '30px', maxWidth: '600px' }}>
+      <Upload {...args} />
+    </div>
+  ),
+  args: {
+    size: 'md',
+    title: 'Drag and Drop files here',
+    supportedFilesText: 'Files supported: PDF, XSLS, JPEG, PNG, Scanner',
+    buttonText: 'Choose File',
+    helperText: 'Maximum size: 5MB',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'The default upload component with medium size and standard styling.',
+      },
     },
   },
 };
 
 // Size Variants
-export const SizeVariants: StoryFn<typeof Upload> = () => (
+export const SizeVariants: Story = {
+  render: () => (
   <div style={{ padding: '30px' }}>
     <div style={{ marginBottom: '40px' }}>
       <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Small Size</h3>
@@ -125,25 +132,36 @@ export const SizeVariants: StoryFn<typeof Upload> = () => (
       </div>
     </div>
   </div>
-);
-SizeVariants.parameters = {
-  docs: {
-    description: {
-      story: 'Upload component in different sizes: small (sm), medium (md), and large (lg).',
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Upload component in different sizes: small (sm), medium (md), and large (lg).',
+      },
     },
   },
 };
 
 // Disabled state
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...Default.args,
-  disabled: true,
-};
-Disabled.parameters = {
-  docs: {
-    description: {
-      story: 'Upload component in disabled state with reduced opacity and no interactions.',
+export const Disabled: Story = {
+  render: args => (
+    <div style={{ padding: '30px', maxWidth: '600px' }}>
+      <Upload {...args} />
+    </div>
+  ),
+  args: {
+    size: 'md',
+    title: 'Drag and Drop files here',
+    supportedFilesText: 'Files supported: PDF, XSLS, JPEG, PNG, Scanner',
+    buttonText: 'Choose File',
+    helperText: 'Maximum size: 5MB',
+    disabled: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Upload component in disabled state with reduced opacity and no interactions.',
+      },
     },
   },
 };
@@ -299,54 +317,71 @@ const WithStateControls: React.FC = () => {
   );
 };
 
-export const WithControls: StoryFn<typeof Upload> = () => <WithStateControls />;
-WithControls.parameters = {
-  docs: {
-    description: {
-      story:
-        'Interactive example showing different upload states: default, uploading with progress, success, and error states.',
+export const WithControls: Story = {
+  render: () => <WithStateControls />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Interactive example showing different upload states: default, uploading with progress, success, and error states.',
+      },
     },
   },
 };
 
 // Custom Icon
-export const CustomIcon = Template.bind({});
-CustomIcon.args = {
-  ...Default.args,
-  icon: <i className="icon-lux-upload-cloud"></i>,
-  title: 'Upload your documents',
-  supportedFilesText: 'Drag files here or click to browse',
-};
-CustomIcon.parameters = {
-  docs: {
-    description: {
-      story: 'Upload component with a custom icon and personalized text content.',
+export const CustomIcon: Story = {
+  render: args => (
+    <div style={{ padding: '30px', maxWidth: '600px' }}>
+      <Upload {...args} />
+    </div>
+  ),
+  args: {
+    size: 'md',
+    title: 'Upload your documents',
+    supportedFilesText: 'Drag files here or click to browse',
+    buttonText: 'Choose File',
+    helperText: 'Maximum size: 5MB',
+    icon: <i className="icon-lux-upload-cloud"></i>,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Upload component with a custom icon and personalized text content.',
+      },
     },
   },
 };
 
 // Multiple file upload
-export const MultipleFiles = Template.bind({});
-MultipleFiles.args = {
-  ...Default.args,
-  multiple: true,
-  buttonText: 'Choose Files',
-  title: 'Upload multiple files',
-  supportedFilesText: 'Select multiple files at once',
-  helperText: 'Maximum size: 5MB per file',
-};
-MultipleFiles.parameters = {
-  docs: {
-    description: {
-      story: 'Upload component configured to accept multiple files at once.',
+export const MultipleFiles: Story = {
+  render: args => (
+    <div style={{ padding: '30px', maxWidth: '600px' }}>
+      <Upload {...args} />
+    </div>
+  ),
+  args: {
+    size: 'md',
+    multiple: true,
+    buttonText: 'Choose Files',
+    title: 'Upload multiple files',
+    supportedFilesText: 'Select multiple files at once',
+    helperText: 'Maximum size: 5MB per file',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Upload component configured to accept multiple files at once.',
+      },
     },
   },
 };
 
 // Drag and Drop Demo
-export const DragDropDemo: StoryFn<typeof Upload> = () => {
-  const [dragState, setDragState] = useState<'idle' | 'dragging'>('idle');
-  const [uploadedFiles, setUploadedFiles] = useState<string[]>([]);
+export const DragDropDemo: Story = {
+  render: () => {
+    const [dragState, setDragState] = useState<'idle' | 'dragging'>('idle');
+    const [uploadedFiles, setUploadedFiles] = useState<string[]>([]);
 
   const handleFileSelect = (files: File[]) => {
     const fileNames = files.map(file => file.name);
@@ -415,20 +450,22 @@ export const DragDropDemo: StoryFn<typeof Upload> = () => {
         </div>
       )}
     </div>
-  );
-};
-DragDropDemo.parameters = {
-  docs: {
-    description: {
-      story:
-        'Interactive demonstration of drag & drop functionality with visual feedback and file tracking.',
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Interactive demonstration of drag & drop functionality with visual feedback and file tracking.',
+      },
     },
   },
 };
 
 // Different File Types
-export const FileTypeRestrictions: StoryFn<typeof Upload> = () => (
-  <div style={{ padding: '30px' }}>
+export const FileTypeRestrictions: Story = {
+  render: () => (
+    <div style={{ padding: '30px' }}>
     <div style={{ marginBottom: '40px' }}>
       <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Images Only</h3>
       <div style={{ maxWidth: '500px' }}>
@@ -462,11 +499,12 @@ export const FileTypeRestrictions: StoryFn<typeof Upload> = () => (
       </div>
     </div>
   </div>
-);
-FileTypeRestrictions.parameters = {
-  docs: {
-    description: {
-      story: 'Upload components configured for specific file types with appropriate messaging.',
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Upload components configured for specific file types with appropriate messaging.',
+      },
     },
   },
 };

package/src/components/VideoPlayer/VideoPlayer.stories.tsx

@@ -9,10 +9,10 @@
  * @component VideoPlayer
  */
 
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import React from 'react';
-import { fn } from '@storybook/test';
 import { VideoPlayerProps } from '../../lib/types/components';
 import { VideoPlayer } from './VideoPlayer';
 import type { RefObject } from 'react';
@@ -23,31 +23,15 @@ import type { RefObject } from 'react';
  * This defines the component's metadata, documentation, and controls
  * for the Storybook interface.
  */
-const meta: Meta<typeof VideoPlayer> = {
+const meta = {
   title: 'Components/VideoPlayer',
   component: VideoPlayer,
   parameters: {
     layout: 'centered',
     docs: {
       description: {
-        component: `
-# VideoPlayer Component
-
-An advanced, modern video player with comprehensive features, accessibility support, and optional glass morphism effects. Supports both regular video files and YouTube embeds with seamless integration.
-
-## Key Features
+        component: `The VideoPlayer component provides an advanced, modern video player with comprehensive features including custom controls, YouTube integration, glass morphism effects, and full accessibility support. It supports both regular video files and YouTube embeds with seamless auto-detection and provides a rich, interactive viewing experience.
 
-### 🎥 **Dual Video Support**
-- **Regular Videos**: Native HTML5 video with custom controls
-- **YouTube Integration**: Seamless YouTube embedding with auto-detection
-
-### ✨ **Glass Morphism Effects**
-- **Configurable Glass Overlay**: Optional frosted glass effects with AtomixGlass integration
-- **Custom Content Support**: Interactive overlays and call-to-action elements
-- **Multiple Glass Modes**: Standard, polar, prominent, and shader effects
-
-### 🎛️ **Advanced Controls**
-- **Custom UI**: Modern, responsive control interface
 - **Quality Selection**: Multiple video resolution options
 - **Playback Speed**: Adjustable speed controls (0.25x to 4x)
 - **Subtitle Support**: Multi-language subtitle tracks with WebVTT
@@ -69,8 +53,7 @@ An advanced, modern video player with comprehensive features, accessibility supp
 ### 📱 **Multi-Platform**
 - **Cross-Browser**: Works on all modern browsers
 - **Mobile Optimized**: Touch-friendly controls and responsive layout
-- **Performance**: Optimized for smooth playback and effects
-        `,
+- **Performance**: Optimized for smooth playback and effects`,
       },
     },
   },
@@ -164,10 +147,10 @@ An advanced, modern video player with comprehensive features, accessibility supp
       description: 'Additional CSS class names',
     },
   },
-};
+} satisfies Meta<typeof VideoPlayer>;
 
 export default meta;
-type Story = StoryObj<VideoPlayerProps>;
+type Story = StoryObj<typeof meta>;
 
 /**
  * Background Wrapper Component

package/src/components/index.ts

@@ -9,6 +9,7 @@ export { default as Badge, type BadgeProps } from './Badge/Badge';
 export { default as Block, type BlockProps } from './Block';
 export { default as Breadcrumb, type BreadcrumbProps } from './Breadcrumb/Breadcrumb';
 export { default as Button, type ButtonProps } from './Button/Button';
+export { default as ButtonGroup, type ButtonGroupProps } from './Button/ButtonGroup';
 export { default as Callout, type CalloutProps } from './Callout/Callout';
 export { default as Card, type CardProps } from './Card/Card';
 // Card sub-components

package/src/lib/composables/useAtomixGlass.ts

@@ -1037,10 +1037,9 @@ export function useAtomixGlass({
     [onClick]
   );
 
-  // No-op handler for backward compatibility (mouse tracking now handled by shared tracker)
+  // Mouse tracking is now handled by shared global tracker
   const handleMouseMove = useCallback((_e: MouseEvent) => {
-    // Mouse tracking is now handled by shared global tracker
-    // This handler is kept for backward compatibility with existing code
+    // Mouse tracking handled by shared global tracker
   }, []);
 
   return {

package/src/lib/composables/useNavbar.ts

@@ -269,20 +269,10 @@ export function useNavDropdown(initialProps?: Partial<NavDropdownProps>) {
     return isFixedBottom ? 'CaretUp' : 'CaretDown';
   };
 
-  // Keeping this for backward compatibility
-  const getIconClass = (isMegaMenu: boolean = false): string => {
-    console.warn(
-      'getIconClass is deprecated. Please use the Icon component directly with the getIconName function.'
-    );
-    const isFixedBottom = isInFixedBottomNavbar();
-    return `c-nav__icon ${isFixedBottom ? 'icon-lux-caret-up' : 'icon-lux-caret-down'}`;
-  };
-
   return {
     defaultProps,
     generateDropdownMenuClass,
     isInFixedBottomNavbar,
-    getIconClass,
     getIconName,
   };
 }

package/src/lib/config/loader.ts

@@ -19,9 +19,10 @@ import type { AtomixConfig } from './index';
  * @example
  * ```typescript
  * import { loadAtomixConfig } from '@shohojdhara/atomix/config';
+ * import { createTheme } from '@shohojdhara/atomix/theme';
  * 
  * const config = loadAtomixConfig();
- * const theme = createThemeFromConfig(config);
+ * const theme = createTheme(config.theme?.tokens || {});
  * ```
  */
 export function loadAtomixConfig(

package/src/lib/constants/components.ts

@@ -48,6 +48,16 @@ export const BUTTON = {
   },
 };
 
+/**
+ * ButtonGroup-specific constants
+ */
+export const BUTTON_GROUP = {
+  BASE_CLASS: 'c-btn-group',
+  CLASSES: {
+    BASE: 'c-btn-group',
+  },
+};
+
 /**
  * Callout-specific constants
  */

package/src/lib/hooks/useComponentCustomization.ts

@@ -9,7 +9,7 @@ import { useMemo } from 'react';
 import { useTheme } from '../theme/runtime/useTheme';
 import type { ComponentPartsMap } from '../types/partProps';
 import type { ComponentCSSVariables } from '../constants/cssVariables';
-import { mergeCSSVars } from '../theme/cssVariableMapper';
+import { mergeCSSVars } from '../theme/adapters/cssVariableMapper';
 import { mergePartStyles } from '../types/partProps';
 import { mergeClassNames } from '../utils/componentUtils';
 

package/src/lib/theme/README.md

@@ -0,0 +1,174 @@
+# Theme System File Organization
+
+## Directory Structure
+
+The theme system is organized following senior developer best practices with clear separation of concerns and logical grouping:
+
+```
+theme/
+├── index.ts                    # Main public API exports
+├── README.md                   # This file
+│
+├── core/                       # Core theme engine
+│   ├── index.ts
+│   ├── createTheme.ts          # Main createTheme function (unified)
+│   ├── createThemeObject.ts    # Theme object creation
+│   ├── composeTheme.ts          # Theme composition and merging
+│   └── ThemeRegistry.ts        # Theme registration and discovery
+│
+├── adapters/                   # Adapters and converters
+│   ├── index.ts
+│   ├── themeAdapter.ts         # Theme ↔ DesignTokens conversion
+│   └── cssVariableMapper.ts    # CSS variable mapping utilities
+│
+├── generators/                 # Code generation
+│   ├── index.ts
+│   ├── generateCSS.ts          # CSS variable generation (simple)
+│   ├── generateCSSVariables.ts # CSS variable generation (advanced)
+│   └── cssFile.ts             # File operations (save CSS to disk)
+│
+├── runtime/                    # React runtime components
+│   ├── index.ts
+│   ├── ThemeProvider.tsx       # Main theme provider component
+│   ├── ThemeApplicator.ts      # Theme application logic
+│   ├── ThemeErrorBoundary.tsx  # Error boundary for themes
+│   ├── ThemeContext.tsx        # React context for theme management
+│   └── useTheme.ts            # React hook for theme access
+│
+├── config/                     # Configuration
+│   ├── index.ts
+│   ├── loader.ts               # Config file loader
+│   ├── configLoader.ts         # Config loading from atomix.config.ts
+│   ├── types.ts                # Config type definitions
+│   └── validator.ts            # Config validation
+│
+├── utils/                      # Utilities
+│   ├── index.ts
+│   ├── themeHelpers.ts         # Type guards and DesignTokens utilities
+│   ├── themeUtils.ts           # Theme value manipulation (colors, spacing)
+│   ├── domUtils.ts             # DOM/browser utilities
+│   └── injectCSS.ts            # CSS injection utilities
+│
+├── tokens/                     # Design tokens
+│   ├── index.ts
+│   └── tokens.ts               # Design tokens definitions
+│
+├── constants/                  # Constants
+│   ├── index.ts
+│   └── constants.ts            # System constants and default values
+│
+├── errors/                     # Error handling
+│   ├── index.ts
+│   └── errors.ts               # Error classes and error handling
+│
+├── devtools/                   # Development tools
+│   ├── index.ts
+│   ├── CLI.ts                  # Command-line interface
+│   ├── Comparator.tsx          # Theme comparison
+│   ├── Inspector.tsx           # Theme inspector
+│   ├── LiveEditor.tsx          # Live theme editor
+│   ├── Preview.tsx             # Theme preview
+│   ├── ThemeValidator.tsx      # Theme validation component
+│   └── README.md               # DevTools documentation
+│
+├── i18n/                       # Internationalization
+│   ├── index.ts
+│   └── rtl.ts                  # Right-to-left language support
+│
+└── types.ts                    # TypeScript type definitions (root level)
+```
+
+## Naming Conventions
+
+### Files and Directories
+
+1. **React Components**: Always use PascalCase (e.g., `ThemeProvider.tsx`)
+2. **Feature Modules**: Use camelCase with descriptive names (e.g., `themeAdapter.ts`)
+3. **Base Utilities**: Use lowercase for foundational utilities (e.g., `domUtils.ts`, `types.ts`)
+4. **Directories**: Use lowercase, plural for collections (e.g., `utils/`, `adapters/`)
+5. **Index Files**: Each subdirectory has an `index.ts` for clean exports
+
+### Import Patterns
+
+```typescript
+// ✅ CORRECT - Import from organized directories
+import { createTheme } from './core';
+import { themeToDesignTokens } from './adapters';
+import { generateCSSVariables } from './generators';
+import { isDesignTokens } from './utils/themeHelpers';
+
+// ❌ INCORRECT - Direct imports from root (old structure)
+import { createTheme } from './core';
+import { themeToDesignTokens } from './themeAdapter';
+```
+
+## File Organization Principles
+
+1. **Separation of Concerns**: Each directory has a single, well-defined responsibility
+2. **Logical Grouping**: Related functionality is grouped together
+3. **Clear Entry Points**: Each directory has an `index.ts` for clean exports
+4. **Consistent Naming**: Follow established naming conventions throughout
+5. **Maintainability**: Structure makes it easy to find and modify code
+
+## Directory Responsibilities
+
+### `/core` - Core Theme Engine
+- Theme creation and composition
+- Theme registry and discovery
+- Core theme logic
+
+### `/adapters` - Adapters and Converters
+- Convert between Theme objects and DesignTokens
+- CSS variable mapping utilities
+- Format transformations
+
+### `/generators` - Code Generation
+- CSS variable generation
+- File operations (save CSS to disk)
+- Code generation utilities
+
+### `/runtime` - React Runtime
+- React components (ThemeProvider, ThemeErrorBoundary)
+- React hooks (useTheme)
+- Theme application logic
+- React context
+
+### `/config` - Configuration
+- Config file loading
+- Config validation
+- Configuration types
+
+### `/utils` - Utilities
+- Theme helpers and type guards
+- Theme value manipulation
+- DOM/browser utilities
+- CSS injection
+
+### `/tokens` - Design Tokens
+- Design token definitions
+- Token creation utilities
+
+### `/constants` - Constants
+- System constants
+- Default values
+
+### `/errors` - Error Handling
+- Error classes
+- Error handling utilities
+
+### `/devtools` - Development Tools
+- Development and debugging tools
+- Theme inspection and validation
+- Live editing capabilities
+
+### `/i18n` - Internationalization
+- RTL (Right-to-Left) support
+- Internationalization utilities
+
+## Best Practices
+
+1. **Always use index files**: Import from directory index files when possible
+2. **Group related functionality**: Keep related code together
+3. **Maintain clear boundaries**: Don't mix concerns between directories
+4. **Follow naming conventions**: Consistency is key
+5. **Document changes**: Update this README when structure changes

package/src/lib/theme/adapters/index.ts

@@ -0,0 +1,31 @@
+/**
+ * Theme Adapters
+ * 
+ * Adapters for converting between Theme objects and DesignTokens
+ */
+
+export {
+  themeToDesignTokens,
+  designTokensToCSSVars,
+  createDesignTokensFromTheme,
+  designTokensToTheme,
+} from './themeAdapter';
+
+export {
+  generateCSSVariableName,
+  generateComponentCSSVars,
+  mapSCSSTokensToCSSVars,
+  applyCSSVariables,
+  removeCSSVariables,
+  getCSSVariable,
+  cssVarsToStyle,
+  mergeCSSVars,
+  isValidCSSVariableName,
+  extractComponentName,
+} from './cssVariableMapper';
+
+export type {
+  CSSVariableConfig,
+  CSSVariableNamingOptions,
+} from './cssVariableMapper';
+