@shohojdhara/atomix 0.2.4 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Atomix Design System - A modern component library for web applications",
   "type": "module",
   "sideEffects": false,
@@ -73,14 +73,9 @@
       "default": "./src/styles/99-utilities/_index.scss"
     },
     "./themes/*": {
-      "import": "./dist/themes/*.css",
-      "require": "./dist/themes/*.css",
-      "default": "./dist/themes/*.css"
-    },
-    "./themes/*.min": {
-      "import": "./dist/themes/*.min.css", 
-      "require": "./dist/themes/*.min.css",
-      "default": "./dist/themes/*.min.css"
+      "import": "./dist/themes/*",
+      "require": "./dist/themes/*",
+      "default": "./dist/themes/*"
     },
     "./package.json": "./package.json"
   },
@@ -119,12 +114,11 @@
     "@storybook/test": "^8.6.14",
     "@storybook/theming": "^8.6.14",
     "@storybook/types": "^8.6.14",
+    "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^5.16.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.0.0",
-    "@testing-library/dom": "^8.0.0",
     "@types/classnames": "^2.3.0",
-    "@types/jest": "^29.5.14",
     "@types/node": "^20.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
@@ -132,7 +126,6 @@
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.0",
     "autoprefixer": "^10.4.21",
-    "babel-jest": "^29.0.0",
     "concurrently": "^8.0.0",
     "cssnano": "^6.0.0",
     "eslint": "^8.0.0",
@@ -141,8 +134,6 @@
     "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.0.0",
-    "jest-environment-jsdom": "^29.0.0",
     "jsdom": "^22.0.0",
     "postcss": "^8.4.31",
     "postcss-flexbugs-fixes": "^5.0.0",
@@ -159,8 +150,6 @@
     "sass": "^1.69.0",
     "storybook": "^8.6.14",
     "storybook-theme-switch-addon": "^1.0.2",
-    "terser": "^5.0.0",
-    "ts-jest": "^29.0.0",
     "ts-node": "^10.9.0",
     "tslib": "^2.6.0",
     "typescript": "^5.0.0",
@@ -231,7 +220,7 @@
     "react-dom": "^18.0.0"
   },
   "engines": {
-    "node": ">=16.0.0",
+    "node": ">=18.0.0",
     "npm": ">=8.0.0"
   },
   "publishConfig": {

package/src/components/Accordion/Accordion.stories.tsx

@@ -321,7 +321,6 @@ export const GlassCustom: Story = {
       displacementScale: 180,
       blurAmount: 3,
       saturation: 60,
-      cornerRadius: 4,
       mode: 'polar',
     } as AtomixGlassProps as any,
   },
@@ -377,7 +376,6 @@ export const GlassGroup: Story = {
       displacementScale: 180,
       blurAmount: 1,
       saturation: 60,
-      cornerRadius: 4,
       mode: 'shader',
       ShaderVariant: 'premiumGlass',
     } as any,
@@ -459,19 +457,13 @@ export const GlassModeStandard: Story = {
         <p>The standard mode provides a refined glass appearance perfect for elegant interfaces.</p>
       </div>
     ),
-    glass: {
-      mode: 'standard',
-      displacementScale: 60,
-      blurAmount: 2,
-      saturation: 160,
-      aberrationIntensity: 2,
-      cornerRadius: 4,
-    } as any,
+    glass: true,
   },
   render: args => (
     <div
       style={{
-        background: 'url(https://images.unsplash.com/photo-1689960159745-fbc6434d4434?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1335)',
+        background:
+          'url(https://images.unsplash.com/photo-1689960159745-fbc6434d4434?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1335)',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
         padding: '3rem',
@@ -513,7 +505,6 @@ export const GlassModePolar: Story = {
       blurAmount: 1.5,
       saturation: 180,
       aberrationIntensity: 3,
-      cornerRadius: 4,
     } as any,
   },
   render: args => (
@@ -559,7 +550,6 @@ export const GlassModeProminent: Story = {
       blurAmount: 2.5,
       saturation: 200,
       aberrationIntensity: 4,
-      cornerRadius: 4,
     } as any,
   },
   render: args => (
@@ -605,7 +595,6 @@ export const GlassModeShader: Story = {
       displacementScale: 70,
       blurAmount: 1.8,
       saturation: 170,
-      cornerRadius: 4,
     } as any,
   },
   render: args => (
@@ -685,18 +674,7 @@ export const AllGlassModesComparison: Story = {
             >
               Standard Mode
             </h3>
-            <Accordion
-              title="Standard Glass"
-              glass={
-                {
-                  mode: 'standard',
-                  displacementScale: 60,
-                  blurAmount: 2,
-                  saturation: 160,
-                  aberrationIntensity: 2,
-                } as any
-              }
-            >
+            <Accordion title="Standard Glass" glass={true}>
               <p>Classic blur and displacement effects for a refined glass appearance.</p>
             </Accordion>
           </div>

package/src/components/Accordion/Accordion.tsx

@@ -48,6 +48,11 @@ export interface AccordionProps extends BaseComponentProps {
    * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
    */
   glass?: AtomixGlassProps | boolean;
+
+  /**
+   * Custom style for the accordion
+   */
+  style?: React.CSSProperties;
 }
 
 export const Accordion: React.FC<AccordionProps> = ({
@@ -60,6 +65,7 @@ export const Accordion: React.FC<AccordionProps> = ({
   iconPosition = 'right',
   icon,
   className = '',
+  style,
   glass,
 }) => {
   // Generate unique IDs for accessibility
@@ -86,7 +92,7 @@ export const Accordion: React.FC<AccordionProps> = ({
 
   // Default icon
   const defaultIcon = (
-    <i className="c-accordion__icon">
+    <i className="c-accordion__icon" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="24"
@@ -97,6 +103,8 @@ export const Accordion: React.FC<AccordionProps> = ({
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
+        aria-hidden="true"
+        focusable="false"
       >
         <polyline points="6 9 12 15 18 9"></polyline>
       </svg>
@@ -104,13 +112,17 @@ export const Accordion: React.FC<AccordionProps> = ({
   );
 
   const accordionContent = (
-    <div className={generateClassNames(className) + (glass ? ' c-accordion--glass' : '')}>
+    <div
+      className={generateClassNames(className) + (glass ? ' c-accordion--glass' : '')}
+      style={style}
+    >
       <button
         id={buttonId}
         className={generateHeaderClassNames()}
         onClick={toggle}
         aria-expanded={state.isOpen}
         aria-controls={panelId}
+        aria-disabled={disabled}
         disabled={disabled}
         type="button"
       >
@@ -124,7 +136,10 @@ export const Accordion: React.FC<AccordionProps> = ({
         role="region"
         aria-labelledby={buttonId}
       >
-        <div className={ACCORDION.SELECTORS.BODY.replace('.', '')} ref={contentRef as React.RefObject<HTMLDivElement>}>
+        <div
+          className={ACCORDION.SELECTORS.BODY.replace('.', '')}
+          ref={contentRef as React.RefObject<HTMLDivElement>}
+        >
           {children}
         </div>
       </div>
@@ -134,19 +149,13 @@ export const Accordion: React.FC<AccordionProps> = ({
   if (glass) {
     // Default glass settings for accordions
     const defaultGlassProps = {
-      displacementScale: 60,
-      blurAmount: 1.5,
-      cornerRadius: 4,
-      mode: 'shader' as const,
+      displacementScale: 20,
+      elasticity: 0,
     };
 
     const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    return (
-      <AtomixGlass {...glassProps}>
-        {accordionContent}
-      </AtomixGlass>
-    );
+    return <AtomixGlass {...glassProps}>{accordionContent}</AtomixGlass>;
   }
 
   return accordionContent;

package/src/components/AtomixGlass/AtomixGlass.test.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
 import AtomixGlass from './AtomixGlass';
 
 // Mock the ShaderDisplacementGenerator since it uses browser APIs
-jest.mock('./shader-utils', () => ({
+vi.mock('./shader-utils', () => ({
   ShaderDisplacementGenerator: class MockShaderDisplacementGenerator {
     updateShader() {
       return 'data:image/png;base64,mockBase64String';
@@ -12,7 +13,7 @@ jest.mock('./shader-utils', () => ({
     destroy() {}
   },
   fragmentShaders: {
-    liquidGlass: jest.fn(),
+    liquidGlass: vi.fn(),
   },
 }));
 
@@ -23,7 +24,7 @@ describe('AtomixGlass Component', () => {
         <div data-testid="test-content">Test Content</div>
       </AtomixGlass>
     );
-    
+
     expect(screen.getByTestId('test-content')).toBeInTheDocument();
     expect(screen.getByText('Test Content')).toBeInTheDocument();
   });
@@ -34,40 +35,42 @@ describe('AtomixGlass Component', () => {
         <div>Content</div>
       </AtomixGlass>
     );
-    
-    expect(container.querySelector('.c-glass-container')).toHaveClass('custom-class');
+
+    expect(container.querySelector('.c-atomix-glass__container')).toHaveClass('custom-class');
   });
 
   test('renders with showHoverEffects enabled', () => {
     render(
-      <AtomixGlass >
+      <AtomixGlass>
         <div>Test Content</div>
       </AtomixGlass>
     );
-    
+
     // Check that hover effects are enabled
     expect(screen.getByTestId('atomix-glass')).toHaveAttribute('data-hover-effects', 'true');
   });
 
   test('applies clickable class when onClick is provided', () => {
-    const handleClick = jest.fn();
+    const handleClick = vi.fn();
     const { container } = render(
       <AtomixGlass onClick={handleClick}>
         <div>Content</div>
       </AtomixGlass>
     );
-    
-    expect(container.querySelector('.c-glass-container')).toHaveClass('c-glass-container--clickable');
+
+    expect(container.querySelector('.c-atomix-glass__container')).toHaveClass(
+      'c-atomix-glass__container--clickable'
+    );
   });
 
   test('calls onClick when clicked', async () => {
-    const handleClick = jest.fn();
+    const handleClick = vi.fn();
     render(
       <AtomixGlass onClick={handleClick}>
         <div>Content</div>
       </AtomixGlass>
     );
-    
+
     await userEvent.click(screen.getByText('Content'));
     expect(handleClick).toHaveBeenCalledTimes(1);
   });
@@ -78,8 +81,82 @@ describe('AtomixGlass Component', () => {
         <div>Content</div>
       </AtomixGlass>
     );
-    
-    expect(container.querySelector('.c-glass-container')).toHaveClass('c-glass-container--over-light');
+
+    expect(container.querySelector('.c-atomix-glass__container')).toHaveClass(
+      'c-atomix-glass__container--over-light'
+    );
+  });
+
+  test('does not apply overLight class when overLight prop is false', () => {
+    const { container } = render(
+      <AtomixGlass overLight={false}>
+        <div>Content</div>
+      </AtomixGlass>
+    );
+
+    expect(container.querySelector('.c-atomix-glass__container')).not.toHaveClass(
+      'c-atomix-glass__container--over-light'
+    );
+  });
+
+  test('handles overLight="auto" mode', () => {
+    // Mock window.getComputedStyle to simulate a light background
+    const originalGetComputedStyle = window.getComputedStyle;
+    window.getComputedStyle = vi.fn(() => ({
+      backgroundColor: 'rgb(255, 255, 255)',
+      backgroundImage: 'none',
+    })) as any;
+
+    const { container } = render(
+      <AtomixGlass overLight="auto">
+        <div>Content</div>
+      </AtomixGlass>
+    );
+
+    // Note: Auto-detection happens asynchronously, so we can't immediately test
+    // but we can verify the component renders without errors
+    expect(container.querySelector('.c-atomix-glass__container')).toBeInTheDocument();
+
+    // Restore original
+    window.getComputedStyle = originalGetComputedStyle;
+  });
+
+  test('handles overLight object config', () => {
+    const { container } = render(
+      <AtomixGlass
+        overLight={{
+          threshold: 0.8,
+          opacity: 0.5,
+          contrast: 1.5,
+          brightness: 1.1,
+          saturationBoost: 1.8,
+        }}
+      >
+        <div>Content</div>
+      </AtomixGlass>
+    );
+
+    // Verify component renders with object config
+    expect(container.querySelector('.c-atomix-glass__container')).toBeInTheDocument();
+  });
+
+  test('handles invalid overLight object config values gracefully', () => {
+    const { container } = render(
+      <AtomixGlass
+        overLight={{
+          threshold: NaN,
+          opacity: -1,
+          contrast: Infinity,
+          brightness: -100,
+          saturationBoost: 'invalid' as any,
+        }}
+      >
+        <div>Content</div>
+      </AtomixGlass>
+    );
+
+    // Should render without errors, using default/validated values
+    expect(container.querySelector('.c-atomix-glass__container')).toBeInTheDocument();
   });
 
   test('applies custom style', () => {
@@ -89,8 +166,8 @@ describe('AtomixGlass Component', () => {
         <div>Content</div>
       </AtomixGlass>
     );
-    
-    const glassContainer = container.querySelector('.c-glass-container');
+
+    const glassContainer = container.querySelector('.c-atomix-glass__container');
     expect(glassContainer).toHaveStyle('background-color: red');
   });
 
@@ -100,17 +177,17 @@ describe('AtomixGlass Component', () => {
         <div>Content</div>
       </AtomixGlass>
     );
-    
+
     // Check if the filter element exists
     expect(container.querySelector('svg')).toBeInTheDocument();
   });
 
   test('handles mouse events correctly', async () => {
-    const handleMouseEnter = jest.fn();
-    const handleMouseLeave = jest.fn();
-    const handleMouseDown = jest.fn();
-    const handleMouseUp = jest.fn();
-    
+    const handleMouseEnter = vi.fn();
+    const handleMouseLeave = vi.fn();
+    const handleMouseDown = vi.fn();
+    const handleMouseUp = vi.fn();
+
     render(
       <AtomixGlass
         onClick={() => {
@@ -123,25 +200,26 @@ describe('AtomixGlass Component', () => {
         <div>Content</div>
       </AtomixGlass>
     );
-    
+
     const glassContent = screen.getByText('Content').parentElement;
     if (!glassContent) throw new Error('Glass content not found');
-    
+
     await userEvent.hover(glassContent);
     expect(handleMouseEnter).toHaveBeenCalledTimes(1);
-    
+
     await userEvent.unhover(glassContent);
     expect(handleMouseLeave).toHaveBeenCalledTimes(1);
-    
+
     await userEvent.pointer([{ keys: '[MouseLeft>]', target: glassContent }]);
     expect(handleMouseDown).toHaveBeenCalledTimes(1);
-    
+
     await userEvent.pointer([{ keys: '[/MouseLeft]', target: glassContent }]);
     expect(handleMouseUp).toHaveBeenCalledTimes(1);
   });
 });
 
 // Visual regression tests
+// Keep only a single smoke snapshot to detect catastrophic DOM changes.
 describe('AtomixGlass Visual Regression', () => {
   test('matches snapshot with default props', () => {
     const { container } = render(
@@ -149,51 +227,7 @@ describe('AtomixGlass Visual Regression', () => {
         <div>Default Glass</div>
       </AtomixGlass>
     );
-    
-    expect(container).toMatchSnapshot();
-  });
 
-  test('matches snapshot with custom props', () => {
-    const { container } = render(
-      <AtomixGlass
-        displacementScale={30}
-        blurAmount={15}
-        saturation={200}
-        aberrationIntensity={3}
-        cornerRadius={15}
-        overLight={true}
-        mode="polar"
-      >
-        <div>Custom Glass</div>
-      </AtomixGlass>
-    );
-    
     expect(container).toMatchSnapshot();
   });
-
-  test('matches snapshot with shader mode', () => {
-    const { container } = render(
-      <AtomixGlass
-        mode="shader"
-        displacementScale={25}
-        blurAmount={12}
-        saturation={180}
-        aberrationIntensity={2}
-      >
-        <div>Shader Glass</div>
-      </AtomixGlass>
-    );
-    
-    expect(container).toMatchSnapshot();
-  });
-
-  test('matches snapshot with showHoverEffects', () => {
-      const { container } = render(
-        <AtomixGlass>
-          <div>Glass with Hover Effects</div>
-        </AtomixGlass>
-      );
-      
-      expect(container).toMatchSnapshot();
-    });
-});
+});