@shohojdhara/atomix 0.4.1 → 0.4.2

package/src/components/Chart/TreemapChart.tsx

@@ -98,21 +98,25 @@ interface TreemapChartProps extends Omit<ChartProps, 'type' | 'datasets'> {
   };
 }
 
+const DEFAULT_COLOR_CONFIG: NonNullable<TreemapChartProps['colorConfig']> = { scheme: 'category' };
+const DEFAULT_LABEL_CONFIG = {
+  showLabels: true,
+  minSize: 1000,
+  fontSize: 12,
+  textColor: 'white',
+};
+const DEFAULT_CONFIG = {};
+
 const TreemapChart = memo(
   forwardRef<HTMLDivElement, TreemapChartProps>(
     (
       {
         data = [],
         algorithm = 'squarified',
-        colorConfig = { scheme: 'category' },
-        labelConfig = {
-          showLabels: true,
-          minSize: 1000,
-          fontSize: 12,
-          textColor: 'white',
-        },
+        colorConfig = DEFAULT_COLOR_CONFIG,
+        labelConfig = DEFAULT_LABEL_CONFIG,
         onDataPointClick,
-        config = {},
+        config = DEFAULT_CONFIG,
         ...props
       },
       ref
@@ -122,9 +126,7 @@ const TreemapChart = memo(
       const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
 
       const treeData = useMemo(() => {
-        console.log('TreemapChart data:', data);
         if (!data.length) {
-          console.log('No data provided to TreemapChart');
           return null;
         }
 
@@ -357,16 +359,17 @@ const TreemapChart = memo(
         []
       );
 
-      const renderContent = ({
-        scales,
-        colors,
-        datasets: renderedDatasets,
-        handlers,
-        hoveredPoint,
-      }: ChartRenderContentParams) => {
-        if (!data.length) return null;
-
-        // Calculate available space with padding
+      const renderContent = useCallback(
+        ({
+          scales,
+          colors,
+          datasets: renderedDatasets,
+          handlers,
+          hoveredPoint,
+        }: ChartRenderContentParams) => {
+          if (!data.length) return null;
+
+          // Calculate available space with padding
         const padding = 20;
         const availableWidth = scales.width - padding * 2;
         const availableHeight = scales.height - padding * 2;
@@ -467,17 +470,22 @@ const TreemapChart = memo(
                 </g>
               );
             })}
-          </>
-        );
-      };
+            </>
+          );
+        },
+        [data, algorithm, generateColor, squarify, labelConfig, hoveredNode, selectedNode]
+      );
 
       // Convert data to datasets format for BaseChart
-      const datasets = [
-        {
-          label: 'Treemap Data',
-          data: data,
-        },
-      ];
+      const datasets = useMemo(
+        () => [
+          {
+            label: 'Treemap Data',
+            data: data,
+          },
+        ],
+        [data]
+      );
 
       return (
         <BaseChart

package/src/components/DatePicker/readme.md

@@ -152,7 +152,7 @@ const CustomGlassExample = () => {
           blurAmount: 0,
           saturation: 180,
           aberrationIntensity: 2,
-          cornerRadius: 16,
+          borderRadius: 16,
           overLight: false,
           mode: 'polar',
         }}
@@ -184,7 +184,7 @@ const GlassRangeExample = () => {
           blurAmount: 0,
           saturation: 160,
           aberrationIntensity: 1.5,
-          cornerRadius: 14,
+          borderRadius: 14,
           mode: 'prominent',
         }}
       />
@@ -203,7 +203,7 @@ When `glass` is an object, it accepts the same props as the `AtomixGlass` compon
 | `blurAmount` | `number` | `0` | Blur amount for the backdrop |
 | `saturation` | `number` | `160` | Saturation percentage for the backdrop |
 | `aberrationIntensity` | `number` | `1.5` | Chromatic aberration intensity |
-| `cornerRadius` | `number` | `12` | Corner radius in pixels |
+| `borderRadius` | `number` | `12` | Corner radius in pixels |
 | `overLight` | `boolean` | `false` | Whether the glass is over a light background |
 | `mode` | `'standard' \| 'polar' \| 'prominent' \| 'shader'` | `'standard'` | Glass effect mode |
 

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -505,7 +505,7 @@ export const GlassDropdownCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 1,
-      cornerRadius: 16,
+      borderRadius: 16,
       mode: 'polar',
     },
   },

package/src/components/EdgePanel/EdgePanel.stories.tsx

@@ -627,7 +627,7 @@ export const GlassCustom: Story = {
               displacementScale: 70,
               blurAmount: 1.8,
               saturation: 170,
-              cornerRadius: 0,
+              borderRadius: 0,
             } as any
           }
         >
@@ -693,7 +693,7 @@ export const GlassPremium: Story = {
               displacementScale: 180,
               blurAmount: 1,
               saturation: 60,
-              cornerRadius: 0,
+              borderRadius: 0,
             } as any
           }
         >
@@ -786,7 +786,7 @@ export const GlassShowcase: Story = {
                 displacementScale: 25,
                 blurAmount: 1.2,
                 saturation: 140,
-                cornerRadius: 0,
+                borderRadius: 0,
               } as any
             }
           >
@@ -815,7 +815,7 @@ export const GlassShowcase: Story = {
                 displacementScale: 35,
                 blurAmount: 1.5,
                 saturation: 160,
-                cornerRadius: 0,
+                borderRadius: 0,
               } as any
             }
           >
@@ -844,7 +844,7 @@ export const GlassShowcase: Story = {
                 displacementScale: 50,
                 blurAmount: 2,
                 saturation: 180,
-                cornerRadius: 0,
+                borderRadius: 0,
               } as any
             }
           >
@@ -874,7 +874,7 @@ export const GlassShowcase: Story = {
                 displacementScale: 70,
                 blurAmount: 1.8,
                 saturation: 170,
-                cornerRadius: 0,
+                borderRadius: 0,
               } as any
             }
           >
@@ -907,7 +907,7 @@ export const GlassShowcase: Story = {
                 displacementScale: 180,
                 blurAmount: 1,
                 saturation: 60,
-                cornerRadius: 0,
+                borderRadius: 0,
               } as any
             }
           >

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

@@ -252,7 +252,7 @@ export const GlassCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 0.8,
-      cornerRadius: 12,
+      borderRadius: 12,
     },
   },
   render: (args: any) => (

package/src/components/Form/Checkbox.tsx

@@ -117,7 +117,7 @@ export const Checkbox = React.memo(
           blurAmount: 1,
           saturation: 160,
           aberrationIntensity: 0.3,
-          cornerRadius: 6,
+          borderRadius: 6,
           mode: 'shader' as const,
         };
         const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };

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

@@ -432,7 +432,7 @@ export const GlassVariants: Story = {
             blurAmount: 2,
             saturation: 200,
             aberrationIntensity: 2,
-            cornerRadius: 12,
+            borderRadius: 12,
           }}
         />
       </div>

package/src/components/Form/Input.tsx

@@ -101,7 +101,7 @@ export const Input = memo(
           blurAmount: 1,
           saturation: 180,
           aberrationIntensity: 0.2,
-          cornerRadius: 12,
+          borderRadius: 12,
           mode: 'shader' as const,
         };
 

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

@@ -333,7 +333,7 @@ export const GlassCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 0.8,
-      cornerRadius: 12,
+      borderRadius: 12,
     } as any,
     onChange: () => {},
   },

package/src/components/Form/Radio.tsx

@@ -68,7 +68,7 @@ export const Radio: React.FC<RadioProps> = memo(
         blurAmount: 1,
         saturation: 160,
         aberrationIntensity: 0.3,
-        cornerRadius: 6,
+        borderRadius: 6,
         mode: 'shader' as const,
       };
 

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

@@ -353,7 +353,7 @@ export const GlassCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 0.8,
-      cornerRadius: 12,
+      borderRadius: 12,
     },
   },
   render: (args: any) => (

package/src/components/Form/Select.tsx

@@ -245,7 +245,7 @@ export const Select: SelectComponent = memo(
         blurAmount: 1,
         saturation: 180,
         aberrationIntensity: 0.2,
-        cornerRadius: 12,
+        borderRadius: 12,
         mode: 'shader' as const,
       };
 

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

@@ -343,7 +343,7 @@ export const GlassVariants: Story = {
             blurAmount: 2,
             saturation: 200,
             aberrationIntensity: 2,
-            cornerRadius: 12,
+            borderRadius: 12,
           }}
         />
       </div>

package/src/components/Form/Textarea.tsx

@@ -92,7 +92,7 @@ export const Textarea = memo(
           blurAmount: 1,
           saturation: 180,
           aberrationIntensity: 1,
-          cornerRadius: 8,
+          borderRadius: 8,
           mode: 'shader' as const,
         };
 

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

@@ -433,7 +433,7 @@ export const WithCustomGlassEffect: Story = {
       blurAmount: -0.1,
       saturation: 130,
       aberrationIntensity: 0,
-      cornerRadius: 45,
+      borderRadius: 45,
       mode: 'standard',
       elasticity: 0.2,
       onClick: () => {
@@ -911,7 +911,7 @@ export const PremiumShowcase: Story = {
       blurAmount: 2,
       saturation: 150,
       aberrationIntensity: 0.5,
-      cornerRadius: 20,
+      borderRadius: 20,
       overLight: true,
       mode: 'standard',
     },

package/src/components/Hero/Hero.tsx

@@ -55,7 +55,7 @@ const HeroContent = ({ children, className, style, glass, ...props }: HeroConten
       blurAmount: 3,
       saturation: 180,
       aberrationIntensity: 0,
-      cornerRadius: 8,
+      borderRadius: 8,
       overLight: false,
       mode: 'standard' as const,
     } : glass;
@@ -389,7 +389,7 @@ export const Hero: React.FC<HeroProps> & {
               blurAmount={3}
               saturation={180}
               aberrationIntensity={0}
-              cornerRadius={8}
+              borderRadius={8}
               overLight={false}
               mode="standard"
             >

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

@@ -192,7 +192,7 @@ export const GlassCustom: Story = {
     glass: {
       displacementScale: 30,
       blurAmount: 0,
-      cornerRadius: 16,
+      borderRadius: 16,
       elasticity: 0,
     },
   },

package/src/components/Messages/Messages.tsx

@@ -35,7 +35,7 @@ export const Messages: React.FC<MessagesProps> = ({
   // Default glass settings for messages
   const defaultGlassProps = {
     displacementScale: 150,
-    cornerRadius: 12,
+    borderRadius: 12,
     elasticity: 0,
     aberrationIntensity: 2,
   };
@@ -185,7 +185,7 @@ export const Messages: React.FC<MessagesProps> = ({
         <AtomixGlass {...glassProps}>
           <div
             className="c-messages__glass-content"
-            style={{ borderRadius: glassProps.cornerRadius }}
+            style={{ borderRadius: glassProps.borderRadius }}
           >
             {messagesContent}
           </div>

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

@@ -589,7 +589,7 @@ export const GlassModalCustom: Story = {
               blurAmount: 3,
               saturation: 200,
               aberrationIntensity: 2,
-              cornerRadius: 20,
+              borderRadius: 20,
               mode: 'polar',
             } as GlassProps
           }

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

@@ -645,7 +645,7 @@ export const GlassCustom: Story = {
         glass={{
           displacementScale: 80,
           blurAmount: 2.5,
-          cornerRadius: 20,
+          borderRadius: 20,
           mode: 'shader',
         }}
       >
@@ -799,7 +799,7 @@ export const GlassThemeShowcase: Story = {
           glass={{
             displacementScale: 60,
             blurAmount: 2,
-            cornerRadius: 16,
+            borderRadius: 16,
             mode: 'shader',
           }}
         >

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

@@ -51,7 +51,7 @@ export const Nav = forwardRef<HTMLUListElement, NavProps>(
       const defaultGlassProps = {
         displacementScale: 60,
         blurAmount: 1.5,
-        cornerRadius: 8,
+        borderRadius: 8,
         mode: 'shader' as const,
       };
       const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };

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

@@ -715,7 +715,7 @@ export const GlassCustom: Story = {
           glass={{
             displacementScale: 100,
             blurAmount: 2.5,
-            cornerRadius: 0,
+            borderRadius: 0,
             mode: 'shader',
           }}
         >
@@ -773,7 +773,7 @@ export const GlassCustom: Story = {
     docs: {
       description: {
         story:
-          'Customized glass effect with increased displacement and blur for a more pronounced visual impact. The sharp corners (cornerRadius: 0) create a modern, edge-to-edge aesthetic.',
+          'Customized glass effect with increased displacement and blur for a more pronounced visual impact. The sharp corners (borderRadius: 0) create a modern, edge-to-edge aesthetic.',
       },
     },
   },
@@ -942,7 +942,7 @@ export const GlassThemeShowcase: Story = {
             glass={{
               displacementScale: 60,
               blurAmount: 2,
-              cornerRadius: 0,
+              borderRadius: 0,
               mode: 'shader',
             }}
           >

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

@@ -146,7 +146,7 @@ export const Navbar = forwardRef<HTMLElement, NavbarProps>(
       const defaultGlassProps = {
         displacementScale: 30,
         blurAmount: 2,
-        cornerRadius: 0,
+        borderRadius: 0,
         elasticity: 0,
         mode: 'shader' as const,
         shaderVariant: 'premiumGlass' as const,

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

@@ -1140,7 +1140,7 @@ export const GlassCustom: Story = {
           glass={{
             displacementScale: 70,
             blurAmount: 2,
-            cornerRadius: 12,
+            borderRadius: 12,
             mode: 'shader',
           }}
         >
@@ -1293,7 +1293,7 @@ export const GlassThemeShowcase: Story = {
             glass={{
               displacementScale: 60,
               blurAmount: 1.8,
-              cornerRadius: 16,
+              borderRadius: 16,
               mode: 'shader',
             }}
           >

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

@@ -308,7 +308,7 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
       const defaultGlassProps = {
         displacementScale: 70,
         blurAmount: 2,
-        cornerRadius: 12,
+        borderRadius: 12,
         mode: 'shader' as const,
       };
       const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };

package/src/components/Pagination/Pagination.stories.tsx

@@ -285,7 +285,7 @@ export const GlassCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 0.8,
-      cornerRadius: 12,
+      borderRadius: 12,
     },
   },
   render: (args: any) => {

package/src/components/Pagination/Pagination.tsx

@@ -244,7 +244,7 @@ export const Pagination: React.FC<PaginationProps> = memo(
         blurAmount: 1,
         saturation: 160,
         aberrationIntensity: 0.5,
-        cornerRadius: 8,
+        borderRadius: 8,
         mode: 'shader' as const,
       };
 

package/src/components/Popover/Popover.stories.tsx

@@ -423,7 +423,7 @@ export const GlassPopoverCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 1,
-      cornerRadius: 16,
+      borderRadius: 16,
       mode: 'polar',
     } as any,
   },

package/src/components/Popover/Popover.tsx

@@ -86,7 +86,7 @@ export const Popover: React.FC<PopoverProps> = ({
                   blurAmount: 1,
                   saturation: 160,
                   aberrationIntensity: 0.5,
-                  cornerRadius: 8,
+                  borderRadius: 8,
                   mode: 'shader' as const,
                 };
 

package/src/components/Progress/Progress.tsx

@@ -46,7 +46,7 @@ export const Progress = memo(
         const defaultGlassProps = {
           displacementScale: 30,
           blurAmount: 0.5,
-          cornerRadius: 8,
+          borderRadius: 8,
           mode: 'shader' as const,
         };
         const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };

package/src/components/Rating/Rating.stories.tsx

@@ -212,7 +212,7 @@ export const GlassCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 0.8,
-      cornerRadius: 12,
+      borderRadius: 12,
     },
   },
   render: (args: any) => (

package/src/components/Rating/Rating.test.tsx

@@ -0,0 +1,73 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import Rating from './Rating';
+
+// Mock AtomixGlass since it's used in Rating
+vi.mock('../AtomixGlass/AtomixGlass', () => ({
+  AtomixGlass: ({ children }: any) => <div data-testid="glass-wrapper">{children}</div>,
+}));
+
+describe('Rating', () => {
+  it('renders correctly', () => {
+    render(<Rating value={3} />);
+    const stars = screen.getAllByRole('button');
+    expect(stars).toHaveLength(5);
+    // 3 full stars, 2 empty
+    expect(stars[0]).toHaveAttribute('aria-checked', 'true');
+    expect(stars[1]).toHaveAttribute('aria-checked', 'true');
+    expect(stars[2]).toHaveAttribute('aria-checked', 'true');
+    expect(stars[3]).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('calculates half star on hover when allowHalf is true', () => {
+    render(<Rating allowHalf />);
+    const stars = screen.getAllByRole('button');
+    const firstStar = stars[0];
+
+    // Mock getBoundingClientRect
+    vi.spyOn(firstStar, 'getBoundingClientRect').mockReturnValue({
+      left: 100,
+      width: 20,
+      top: 0,
+      bottom: 20,
+      right: 120,
+      height: 20,
+      x: 100,
+      y: 0,
+      toJSON: () => {},
+    } as DOMRect);
+
+    // Hover on left half (105 is < 100 + 10 = 110)
+    fireEvent.mouseEnter(firstStar, { clientX: 105 });
+    fireEvent.mouseMove(firstStar, { clientX: 105 });
+
+    // Check if the star has the half class
+    // RATING.CLASSES.HALF is 'c-rating__star--half'
+    expect(firstStar).toHaveClass('c-rating__star--half');
+  });
+
+  it('calculates full star on hover right half when allowHalf is true', () => {
+    render(<Rating allowHalf />);
+    const stars = screen.getAllByRole('button');
+    const firstStar = stars[0];
+
+    vi.spyOn(firstStar, 'getBoundingClientRect').mockReturnValue({
+      left: 100,
+      width: 20,
+      top: 0,
+      bottom: 20,
+      right: 120,
+      height: 20,
+      x: 100,
+      y: 0,
+      toJSON: () => {},
+    } as DOMRect);
+
+    // Hover on right half (115 is > 100 + 10 = 110)
+    fireEvent.mouseEnter(firstStar, { clientX: 115 });
+    fireEvent.mouseMove(firstStar, { clientX: 115 });
+
+    expect(firstStar).toHaveClass('c-rating__star--full');
+  });
+});