@shohojdhara/atomix 0.3.14 → 0.4.0

package/src/components/VideoPlayer/VideoPlayer.tsx

@@ -171,7 +171,12 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
         const video = videoRef.current;
         if (video) {
           const tracks = video.textTracks;
-          console.log('Setting subtitle:', subtitleLang ? 'enabled' : 'disabled', 'Available tracks:', tracks.length);
+          console.log(
+            'Setting subtitle:',
+            subtitleLang ? 'enabled' : 'disabled',
+            'Available tracks:',
+            tracks.length
+          );
 
           // Hide all tracks first
           for (let i = 0; i < tracks.length; i++) {

package/src/components/index.ts

@@ -110,9 +110,20 @@ export {
   type SideMenuListProps,
 } from './Navigation/SideMenu/SideMenuList';
 // Menu components
-export { Menu, MenuItem, MenuDivider, type MenuProps, type MenuItemProps, type MenuDividerProps } from './Navigation/Menu/Menu';
+export {
+  Menu,
+  MenuItem,
+  MenuDivider,
+  type MenuProps,
+  type MenuItemProps,
+  type MenuDividerProps,
+} from './Navigation/Menu/Menu';
 export { MegaMenu, MegaMenuColumn, MegaMenuLink } from './Navigation/Menu/MegaMenu';
-export type { MegaMenuProps, MegaMenuColumnProps, MegaMenuLinkProps } from '../lib/types/components';
+export type {
+  MegaMenuProps,
+  MegaMenuColumnProps,
+  MegaMenuLinkProps,
+} from '../lib/types/components';
 // Navigation sub-components
 export { NavDropdown, type NavDropdownProps } from './Navigation/Nav/NavDropdown';
 export { default as Pagination, type PaginationProps } from './Pagination/Pagination';

package/src/layouts/Grid/Grid.stories.tsx

@@ -549,7 +549,9 @@ export const AlignmentAndSpacing: Story = {
         </p>
 
         <div className="u-mb-6">
-          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">justify-content="start"</h3>
+          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">
+            justify-content="start"
+          </h3>
           <Row justifyContent="start" className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
             <GridCol xs={3}>
               <DemoCard variant="secondary">Col 1</DemoCard>
@@ -561,7 +563,9 @@ export const AlignmentAndSpacing: Story = {
         </div>
 
         <div className="u-mb-6">
-          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">justify-content="center"</h3>
+          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">
+            justify-content="center"
+          </h3>
           <Row justifyContent="center" className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
             <GridCol xs={3}>
               <DemoCard variant="secondary">Col 1</DemoCard>
@@ -587,7 +591,9 @@ export const AlignmentAndSpacing: Story = {
         </div>
 
         <div className="u-mb-6">
-          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">justify-content="around"</h3>
+          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">
+            justify-content="around"
+          </h3>
           <Row justifyContent="around" className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
             <GridCol xs={3}>
               <DemoCard variant="secondary">Col 1</DemoCard>

package/src/layouts/MasonryGrid/MasonryGrid.tsx

@@ -374,7 +374,11 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
           const position = positions[index];
           if (!position) {
             return (
-              <div key={item.id} ref={item.ref as React.LegacyRef<HTMLDivElement>} style={{ opacity: 0, position: 'absolute' }}>
+              <div
+                key={item.id}
+                ref={item.ref as React.LegacyRef<HTMLDivElement>}
+                style={{ opacity: 0, position: 'absolute' }}
+              >
                 {item.element}
               </div>
             );

package/src/lib/README.md

@@ -42,10 +42,10 @@ src/
 Composables are reusable pieces of component logic that can be shared across components.
 
 ```typescript
-import { useButton } from '../lib/composables/useButton';
+import { useAccordion } from '../lib/composables/useAccordion';
 
 // In your component
-const { generateButtonClass, handleClick } = useButton();
+const { generateAccordionClass, handleToggle } = useAccordion();
 ```
 
 ### Component Interactions

package/src/lib/__tests__/theme-tools.test.ts

@@ -0,0 +1,219 @@
+import { describe, it, expect } from 'vitest';
+import {
+  importTheme,
+  exportTheme,
+  quickTheme,
+  createDarkVariant,
+  validateTheme,
+  themeToCSS,
+  getThemeMetadata,
+  supportsDarkMode,
+} from '../theme-tools';
+import { Theme } from '../theme/types';
+
+describe('theme-tools', () => {
+  const mockTheme: Theme = {
+    name: 'Test Theme',
+    palette: {
+      primary: { main: '#7AFFD7' },
+      secondary: { main: '#FF5733' },
+      error: { main: '#FF0000' },
+      warning: { main: '#FFA500' },
+      info: { main: '#0000FF' },
+      success: { main: '#00FF00' },
+      background: {
+        default: '#ffffff',
+        paper: '#f5f5f5',
+        subtle: '#fafafa',
+      },
+      text: {
+        primary: '#000000',
+        secondary: '#666666',
+        disabled: '#999999',
+      },
+    },
+    typography: {
+      fontFamily: 'Arial',
+      fontSize: 16,
+      fontWeightLight: 300,
+      fontWeightRegular: 400,
+      fontWeightMedium: 500,
+      fontWeightSemiBold: 600,
+      fontWeightBold: 700,
+      h1: { fontSize: '2rem', fontWeight: 700, lineHeight: 1.2, letterSpacing: '0' },
+      h2: { fontSize: '1.5rem', fontWeight: 700, lineHeight: 1.2, letterSpacing: '0' },
+      h3: { fontSize: '1.25rem', fontWeight: 700, lineHeight: 1.2, letterSpacing: '0' },
+      h4: { fontSize: '1.1rem', fontWeight: 700, lineHeight: 1.2, letterSpacing: '0' },
+      h5: { fontSize: '1rem', fontWeight: 700, lineHeight: 1.2, letterSpacing: '0' },
+      h6: { fontSize: '0.9rem', fontWeight: 700, lineHeight: 1.2, letterSpacing: '0' },
+      body1: { fontSize: '1rem', fontWeight: 400, lineHeight: 1.5 },
+      body2: { fontSize: '0.875rem', fontWeight: 400, lineHeight: 1.5 },
+    },
+    spacing: (v: number) => `${v * 8}px`,
+    breakpoints: {
+      values: { xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920 },
+      unit: 'px',
+      up: (k: any) => `@media (min-width: ${k}px)`,
+      down: (k: any) => `@media (max-width: ${k}px)`,
+      between: (s: any, e: any) => `@media (min-width: ${s}px) and (max-width: ${e}px)`,
+    },
+    shadows: { xs: 'none', sm: 'none', md: 'none', lg: 'none', xl: 'none' },
+    transitions: {
+      duration: {
+        shortest: 150,
+        shorter: 200,
+        short: 250,
+        standard: 300,
+        complex: 375,
+        enteringScreen: 225,
+        leavingScreen: 195,
+      },
+      easing: { easeInOut: 'ease', easeOut: 'ease', easeIn: 'ease', sharp: 'ease' },
+    },
+    zIndex: {
+      mobileStepper: 1000,
+      speedDial: 1050,
+      appBar: 1100,
+      drawer: 1200,
+      modal: 1300,
+      snackbar: 1400,
+      tooltip: 1500,
+    },
+    borderRadius: {
+      base: 4,
+      sm: 2,
+      md: 4,
+      lg: 8,
+      xl: 12,
+      xxl: 16,
+      '3xl': 24,
+      '4xl': 32,
+      pill: 9999,
+    },
+    custom: {},
+    __isJSTheme: true,
+  };
+
+  describe('quickTheme', () => {
+    it('should create a theme with primary color', () => {
+      const theme = quickTheme('My Theme', '#ff0000');
+      expect(theme.name).toBe('My Theme');
+      expect(theme.palette.primary.main).toBe('#ff0000');
+    });
+
+    it('should create a theme with primary and secondary color', () => {
+      const theme = quickTheme('My Theme', '#ff0000', '#00ff00');
+      expect(theme.palette.secondary.main).toBe('#00ff00');
+    });
+  });
+
+  describe('createDarkVariant', () => {
+    it('should create a dark variant of a theme', () => {
+      const darkTheme = createDarkVariant(mockTheme);
+      expect(darkTheme.name).toBe('Test Theme Dark');
+      expect(darkTheme.palette.mode).toBe('dark');
+      expect(darkTheme.palette.background.default).toBe('#121212');
+      expect(darkTheme.palette.text.primary).toBe('#ffffff');
+    });
+  });
+
+  describe('validateTheme', () => {
+    it('should return valid for a correct theme', () => {
+      const result = validateTheme(mockTheme);
+      expect(result.valid).toBe(true);
+      expect(result.errors).toHaveLength(0);
+    });
+
+    it('should return errors for a theme missing name', () => {
+      const invalidTheme = { ...mockTheme, name: '' };
+      const result = validateTheme(invalidTheme as any);
+      expect(result.valid).toBe(false);
+      expect(result.errors).toContain('Theme must have a name');
+    });
+
+    it('should return errors for a theme missing palette', () => {
+      const invalidTheme = { ...mockTheme, palette: undefined };
+      const result = validateTheme(invalidTheme as any);
+      expect(result.valid).toBe(false);
+      expect(result.errors).toContain('Theme must have a palette');
+    });
+
+    it('should return errors for a theme missing primary color', () => {
+      const invalidTheme = { ...mockTheme, palette: { ...mockTheme.palette, primary: undefined } };
+      const result = validateTheme(invalidTheme as any);
+      expect(result.valid).toBe(false);
+      expect(result.errors).toContain('Theme palette must have a primary color');
+    });
+  });
+
+  describe('themeToCSS', () => {
+    it('should generate CSS variables', () => {
+      const css = themeToCSS(mockTheme);
+      expect(css).toContain(':root');
+      expect(css).toContain('--atomix-');
+    });
+
+    it('should use custom selector', () => {
+      const css = themeToCSS(mockTheme, '.custom-theme');
+      expect(css).toContain('.custom-theme');
+    });
+  });
+
+  describe('getThemeMetadata', () => {
+    it('should extract metadata correctly', () => {
+      const metadata = getThemeMetadata(mockTheme);
+      expect(metadata.name).toBe('Test Theme');
+      expect(metadata.color).toBe('#7AFFD7');
+      expect(metadata.supportsDarkMode).toBe(false);
+    });
+
+    it('should identify dark mode support from palette mode', () => {
+      const darkTheme = { ...mockTheme, palette: { ...mockTheme.palette, mode: 'dark' } };
+      const metadata = getThemeMetadata(darkTheme as any);
+      expect(metadata.supportsDarkMode).toBe(true);
+    });
+  });
+
+  describe('supportsDarkMode', () => {
+    it('should return true if palette mode is dark', () => {
+      const theme = { ...mockTheme, palette: { ...mockTheme.palette, mode: 'dark' } };
+      expect(supportsDarkMode(theme as any)).toBe(true);
+    });
+
+    it('should return true if supportsDarkMode property is true', () => {
+      const theme = { ...mockTheme, supportsDarkMode: true };
+      expect(supportsDarkMode(theme as any)).toBe(true);
+    });
+
+    it('should return true if a11y modes includes dark', () => {
+      const theme = { ...mockTheme, a11y: { modes: ['dark'] } };
+      expect(supportsDarkMode(theme as any)).toBe(true);
+    });
+
+    it('should return false otherwise', () => {
+      expect(supportsDarkMode(mockTheme)).toBe(false);
+    });
+  });
+
+  describe('exportTheme', () => {
+    it('should export theme to JSON string', () => {
+      const json = exportTheme(mockTheme);
+      const parsed = JSON.parse(json);
+      expect(parsed.name).toBe('Test Theme');
+    });
+  });
+
+  describe('importTheme', () => {
+    it('should import a valid theme JSON', () => {
+      const theme = { name: 'Imported Theme' };
+      const json = JSON.stringify(theme);
+      const result = importTheme(json);
+      expect(result.name).toBe('Imported Theme');
+    });
+
+    it('should throw an error for invalid JSON', () => {
+      const invalidJson = '{ invalid: json }';
+      expect(() => importTheme(invalidJson)).toThrow('Invalid theme JSON');
+    });
+  });
+});

package/src/lib/composables/index.ts

@@ -1,5 +1,5 @@
 // Button composables
-export * from './useButton';
+// export * from './useButton';
 
 // Accordion composables
 export * from './useAccordion';
@@ -29,7 +29,7 @@ export * from './useEdgePanel';
 export * from './useTodo';
 
 // Form composables
-export * from './useCheckbox';
+// export * from './useCheckbox';
 export * from './useForm';
 export * from './useFormGroup';
 

package/src/lib/composables/shared-mouse-tracker.ts

@@ -19,15 +19,15 @@ class GlobalMouseTracker {
    */
   subscribe(callback: (pos: MousePosition) => void): () => void {
     this.listeners.add(callback);
-    
+
     // Start tracking if this is the first subscriber
     if (this.listeners.size === 1) {
       this.startTracking();
     }
-    
+
     // Immediately notify with current position
     callback(this.position);
-    
+
     // Return unsubscribe function
     return () => {
       this.unsubscribe(callback);
@@ -39,7 +39,7 @@ class GlobalMouseTracker {
    */
   private unsubscribe(callback: (pos: MousePosition) => void): void {
     this.listeners.delete(callback);
-    
+
     // Stop tracking if no more subscribers
     if (this.listeners.size === 0) {
       this.stopTracking();
@@ -53,9 +53,9 @@ class GlobalMouseTracker {
     if (this.isTracking) {
       return;
     }
-    
+
     this.isTracking = true;
-    
+
     // Use document-level listener for global tracking
     document.addEventListener('mousemove', this.handleMouseMove, { passive: true });
   }
@@ -67,16 +67,16 @@ class GlobalMouseTracker {
     if (!this.isTracking) {
       return;
     }
-    
+
     this.isTracking = false;
     document.removeEventListener('mousemove', this.handleMouseMove);
-    
+
     // Cancel any pending RAF
     if (this.rafId !== null) {
       cancelAnimationFrame(this.rafId);
       this.rafId = null;
     }
-    
+
     this.lastEvent = null;
   }
 
@@ -85,7 +85,7 @@ class GlobalMouseTracker {
    */
   private handleMouseMove = (e: MouseEvent): void => {
     this.lastEvent = e;
-    
+
     // Use requestAnimationFrame to throttle updates
     if (this.rafId === null) {
       this.rafId = requestAnimationFrame(() => {
@@ -94,9 +94,9 @@ class GlobalMouseTracker {
             x: this.lastEvent.clientX,
             y: this.lastEvent.clientY,
           };
-          
+
           // Notify all subscribers
-          this.listeners.forEach((callback) => {
+          this.listeners.forEach(callback => {
             try {
               callback(this.position);
             } catch (error) {
@@ -104,7 +104,7 @@ class GlobalMouseTracker {
             }
           });
         }
-        
+
         this.rafId = null;
       });
     }
@@ -130,4 +130,3 @@ const globalMouseTracker = new GlobalMouseTracker();
 
 export { globalMouseTracker };
 export type { GlobalMouseTracker };
-