@shohojdhara/atomix 0.3.14 → 0.4.0

package/src/components/AtomixGlass/shader-utils.ts

@@ -39,7 +39,7 @@ const smoothStep = (a: number, b: number, t: number): number => {
   if (typeof a !== 'number' || typeof b !== 'number' || typeof t !== 'number') {
     return 0;
   }
-  
+
   const clamped = Math.max(0, Math.min(1, (t - a) / (b - a)));
   return clamped * clamped * (3 - 2 * clamped);
 };
@@ -49,11 +49,11 @@ const calculateLength = (x: number, y: number): number => {
   if (typeof x !== 'number' || typeof y !== 'number' || isNaN(x) || isNaN(y)) {
     return 0;
   }
-  
+
   // Prevent potential overflow
   const maxX = Math.max(Math.abs(x), Math.abs(y));
   if (maxX === 0) return 0;
-  
+
   const scaledX = x / maxX;
   const scaledY = y / maxX;
   return maxX * Math.sqrt(scaledX * scaledX + scaledY * scaledY);
@@ -67,12 +67,16 @@ const roundedRectSDF = (
   radius: number
 ): number => {
   // Add input validation
-  if (typeof x !== 'number' || typeof y !== 'number' || 
-      typeof width !== 'number' || typeof height !== 'number' || 
-      typeof radius !== 'number') {
+  if (
+    typeof x !== 'number' ||
+    typeof y !== 'number' ||
+    typeof width !== 'number' ||
+    typeof height !== 'number' ||
+    typeof radius !== 'number'
+  ) {
     return 0;
   }
-  
+
   const qx = Math.abs(x) - width + radius;
   const qy = Math.abs(y) - height + radius;
   return Math.min(Math.max(qx, qy), 0) + calculateLength(Math.max(qx, 0), Math.max(qy, 0)) - radius;
@@ -97,11 +101,11 @@ const clampValue = (value: number, min: number, max: number): number => {
   if (typeof value !== 'number' || typeof min !== 'number' || typeof max !== 'number') {
     return min;
   }
-  
+
   if (isNaN(value)) return min;
   if (isNaN(min)) return 0;
   if (isNaN(max)) return 1;
-  
+
   return Math.max(min, Math.min(max, value));
 };
 
@@ -111,9 +115,11 @@ const easeInOutCubic = (t: number): number => {
   if (typeof t !== 'number' || isNaN(t)) {
     return 0;
   }
-  
+
   const clampedT = Math.max(0, Math.min(1, t));
-  return clampedT < 0.5 ? 4 * clampedT * clampedT * clampedT : 1 - Math.pow(-2 * clampedT + 2, 3) / 2;
+  return clampedT < 0.5
+    ? 4 * clampedT * clampedT * clampedT
+    : 1 - Math.pow(-2 * clampedT + 2, 3) / 2;
 };
 
 const easeOutQuart = (t: number): number => {
@@ -121,7 +127,7 @@ const easeOutQuart = (t: number): number => {
   if (typeof t !== 'number' || isNaN(t)) {
     return 0;
   }
-  
+
   const clampedT = Math.max(0, Math.min(1, t));
   return 1 - Math.pow(1 - clampedT, 4);
 };
@@ -132,7 +138,7 @@ const noise2D = (x: number, y: number): number => {
   if (typeof x !== 'number' || typeof y !== 'number' || isNaN(x) || isNaN(y)) {
     return 0;
   }
-  
+
   const X = Math.floor(x) & 255;
   const Y = Math.floor(y) & 255;
 
@@ -148,7 +154,7 @@ const noise2D = (x: number, y: number): number => {
     if (typeof i !== 'number' || typeof j !== 'number') {
       return 0;
     }
-    
+
     const n = i + j * 57;
     // Use a more stable hash function
     const hashed = Math.sin(n * 12.9898 + 78.233) * 43758.5453;
@@ -172,10 +178,10 @@ const fbm = (x: number, y: number, octaves: number = 4): number => {
   if (typeof x !== 'number' || typeof y !== 'number' || isNaN(x) || isNaN(y)) {
     return 0;
   }
-  
+
   // Clamp octaves to prevent performance issues
   const clampedOctaves = Math.max(1, Math.min(8, Math.floor(octaves)));
-  
+
   let value = 0;
   let amplitude = 0.5;
   let frequency = 1;
@@ -192,11 +198,17 @@ const fbm = (x: number, y: number, octaves: number = 4): number => {
 // Radial distortion for glass-like refraction
 const calculateRadialDistortion = (x: number, y: number, strength: number): Vec2 => {
   // Add input validation
-  if (typeof x !== 'number' || typeof y !== 'number' || typeof strength !== 'number' || 
-      isNaN(x) || isNaN(y) || isNaN(strength)) {
+  if (
+    typeof x !== 'number' ||
+    typeof y !== 'number' ||
+    typeof strength !== 'number' ||
+    isNaN(x) ||
+    isNaN(y) ||
+    isNaN(strength)
+  ) {
     return { x: 0, y: 0 };
   }
-  
+
   const distance = calculateLength(x, y);
   const distortion = Math.pow(Math.min(distance, 10), 2) * strength; // Limit distance to prevent extreme values
 
@@ -209,17 +221,23 @@ const calculateRadialDistortion = (x: number, y: number, strength: number): Vec2
 // Chromatic aberration calculation
 const calculateChromaticOffset = (x: number, y: number, intensity: number): Vec2 => {
   // Add input validation
-  if (typeof x !== 'number' || typeof y !== 'number' || typeof intensity !== 'number' || 
-      isNaN(x) || isNaN(y) || isNaN(intensity)) {
+  if (
+    typeof x !== 'number' ||
+    typeof y !== 'number' ||
+    typeof intensity !== 'number' ||
+    isNaN(x) ||
+    isNaN(y) ||
+    isNaN(intensity)
+  ) {
     return { x: 0, y: 0 };
   }
-  
+
   const distance = calculateLength(x, y);
   // Prevent division by zero and extreme values
   if (distance === 0) {
     return { x: 0, y: 0 };
   }
-  
+
   const angle = Math.atan2(y, x);
 
   return {
@@ -231,11 +249,19 @@ const calculateChromaticOffset = (x: number, y: number, intensity: number): Vec2
 // Advanced caustic pattern generator for glass refraction
 const calculateCaustics = (x: number, y: number, time: number, intensity: number = 1): number => {
   // Add input validation
-  if (typeof x !== 'number' || typeof y !== 'number' || typeof time !== 'number' || 
-      typeof intensity !== 'number' || isNaN(x) || isNaN(y) || isNaN(time) || isNaN(intensity)) {
+  if (
+    typeof x !== 'number' ||
+    typeof y !== 'number' ||
+    typeof time !== 'number' ||
+    typeof intensity !== 'number' ||
+    isNaN(x) ||
+    isNaN(y) ||
+    isNaN(time) ||
+    isNaN(intensity)
+  ) {
     return 0.5; // Return middle value on error
   }
-  
+
   const scale = 8;
   const speed = 2;
 
@@ -263,15 +289,23 @@ const calculateSpectralDispersion = (
   intensity: number
 ): { r: Vec2; g: Vec2; b: Vec2 } => {
   // Add input validation
-  if (typeof x !== 'number' || typeof y !== 'number' || typeof angle !== 'number' || 
-      typeof intensity !== 'number' || isNaN(x) || isNaN(y) || isNaN(angle) || isNaN(intensity)) {
+  if (
+    typeof x !== 'number' ||
+    typeof y !== 'number' ||
+    typeof angle !== 'number' ||
+    typeof intensity !== 'number' ||
+    isNaN(x) ||
+    isNaN(y) ||
+    isNaN(angle) ||
+    isNaN(intensity)
+  ) {
     return {
       r: { x: 0, y: 0 },
       g: { x: 0, y: 0 },
-      b: { x: 0, y: 0 }
+      b: { x: 0, y: 0 },
     };
   }
-  
+
   const distance = calculateLength(x, y);
   const dispersionStrength = Math.min(distance * intensity, 1); // Limit strength to prevent extreme values
 
@@ -305,12 +339,21 @@ const calculateParallaxOffset = (
   mouseY: number = 0
 ): Vec2 => {
   // Add input validation
-  if (typeof x !== 'number' || typeof y !== 'number' || typeof depth !== 'number' || 
-      typeof mouseX !== 'number' || typeof mouseY !== 'number' || 
-      isNaN(x) || isNaN(y) || isNaN(depth) || isNaN(mouseX) || isNaN(mouseY)) {
+  if (
+    typeof x !== 'number' ||
+    typeof y !== 'number' ||
+    typeof depth !== 'number' ||
+    typeof mouseX !== 'number' ||
+    typeof mouseY !== 'number' ||
+    isNaN(x) ||
+    isNaN(y) ||
+    isNaN(depth) ||
+    isNaN(mouseX) ||
+    isNaN(mouseY)
+  ) {
     return { x: 0, y: 0 };
   }
-  
+
   const parallaxStrength = Math.min(0.02 * depth, 0.1); // Limit strength to prevent extreme values
 
   // Calculate offset based on view angle (simulated by mouse position)
@@ -323,11 +366,19 @@ const calculateParallaxOffset = (
 // Volumetric density for depth perception and scattering
 const calculateVolumetricDensity = (x: number, y: number, depth: number, time: number): number => {
   // Add input validation
-  if (typeof x !== 'number' || typeof y !== 'number' || typeof depth !== 'number' || 
-      typeof time !== 'number' || isNaN(x) || isNaN(y) || isNaN(depth) || isNaN(time)) {
+  if (
+    typeof x !== 'number' ||
+    typeof y !== 'number' ||
+    typeof depth !== 'number' ||
+    typeof time !== 'number' ||
+    isNaN(x) ||
+    isNaN(y) ||
+    isNaN(depth) ||
+    isNaN(time)
+  ) {
     return 0.5; // Return middle value on error
   }
-  
+
   const noiseValue = fbm(x * 5 + time * 0.5, y * 5 - time * 0.5, 3);
   const depthFalloff = Math.exp(-Math.max(0, depth) * 2); // Ensure depth is not negative
 
@@ -337,14 +388,22 @@ const calculateVolumetricDensity = (x: number, y: number, depth: number, time: n
 // Advanced turbulence for organic glass distortion
 const calculateTurbulence = (x: number, y: number, time: number, octaves: number = 5): number => {
   // Add input validation
-  if (typeof x !== 'number' || typeof y !== 'number' || typeof time !== 'number' || 
-      typeof octaves !== 'number' || isNaN(x) || isNaN(y) || isNaN(time) || isNaN(octaves)) {
+  if (
+    typeof x !== 'number' ||
+    typeof y !== 'number' ||
+    typeof time !== 'number' ||
+    typeof octaves !== 'number' ||
+    isNaN(x) ||
+    isNaN(y) ||
+    isNaN(time) ||
+    isNaN(octaves)
+  ) {
     return 0;
   }
-  
+
   // Clamp octaves to prevent performance issues
   const clampedOctaves = Math.max(1, Math.min(8, Math.floor(octaves)));
-  
+
   let turbulence = 0;
   let amplitude = 1;
   let frequency = 1;
@@ -362,11 +421,17 @@ const calculateTurbulence = (x: number, y: number, time: number, octaves: number
 // Micro-surface detail for high-quality glass texture
 const calculateMicroSurface = (x: number, y: number, time: number): number => {
   // Add input validation
-  if (typeof x !== 'number' || typeof y !== 'number' || typeof time !== 'number' || 
-      isNaN(x) || isNaN(y) || isNaN(time)) {
+  if (
+    typeof x !== 'number' ||
+    typeof y !== 'number' ||
+    typeof time !== 'number' ||
+    isNaN(x) ||
+    isNaN(y) ||
+    isNaN(time)
+  ) {
     return 0.5; // Return middle value on error
   }
-  
+
   const highFreqNoise = fbm(x * 40 + time * 0.3, y * 40 - time * 0.3, 6);
   const microDetail = fbm(x * 80, y * 80, 4);
 
@@ -721,6 +786,11 @@ export const fragmentShaders = {
 
     return createTexture(clampValue(finalX + 0.5, 0, 1), clampValue(finalY + 0.5, 0, 1));
   },
+
+  // Aliases for compatibility
+  plasma: (uv: Vec2, mousePosition?: Vec2): Vec2 => fragmentShaders.premiumGlass(uv, mousePosition),
+  waves: (uv: Vec2, mousePosition?: Vec2): Vec2 => fragmentShaders.liquidMetal(uv, mousePosition),
+  noise: (uv: Vec2, mousePosition?: Vec2): Vec2 => fragmentShaders.appleFluid(uv, mousePosition),
 };
 
 export type FragmentShaderType = keyof typeof fragmentShaders;
@@ -737,12 +807,20 @@ export class ShaderDisplacementGenerator {
 
     this.canvas = document.createElement('canvas');
     // Enhanced validation for canvas dimensions
-    this.canvas.width = Math.max(MIN_CANVAS_DIMENSION, 
-                               Math.min(MAX_CANVAS_DIMENSION, 
-                                       Math.round(options.width * this.canvasDPI || DEFAULT_CANVAS_WIDTH)));
-    this.canvas.height = Math.max(MIN_CANVAS_DIMENSION, 
-                                 Math.min(MAX_CANVAS_DIMENSION, 
-                                         Math.round(options.height * this.canvasDPI || DEFAULT_CANVAS_HEIGHT)));
+    this.canvas.width = Math.max(
+      MIN_CANVAS_DIMENSION,
+      Math.min(
+        MAX_CANVAS_DIMENSION,
+        Math.round(options.width * this.canvasDPI || DEFAULT_CANVAS_WIDTH)
+      )
+    );
+    this.canvas.height = Math.max(
+      MIN_CANVAS_DIMENSION,
+      Math.min(
+        MAX_CANVAS_DIMENSION,
+        Math.round(options.height * this.canvasDPI || DEFAULT_CANVAS_HEIGHT)
+      )
+    );
     this.canvas.style.display = 'none';
 
     const context = this.canvas.getContext('2d');
@@ -844,7 +922,10 @@ export class ShaderDisplacementGenerator {
       return this.canvas.toDataURL();
     } catch (error) {
       // Graceful fallback on error
-      console.warn('ShaderDisplacementGenerator: Error generating shader map, using fallback', error);
+      console.warn(
+        'ShaderDisplacementGenerator: Error generating shader map, using fallback',
+        error
+      );
       return ''; // Return empty string as fallback
     }
   }
@@ -869,4 +950,4 @@ export class ShaderDisplacementGenerator {
   getScale(): number {
     return this.canvasDPI;
   }
-}
+}

package/src/components/AtomixGlass/stories/Customization.stories.tsx

@@ -0,0 +1,131 @@
+/**
+ * Customization.stories.tsx
+ *
+ * Stories showcasing customization options and integration with other components.
+ *
+ * @package Atomix
+ * @component AtomixGlass
+ */
+
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import AtomixGlass from '../AtomixGlass';
+import Button from '../../Button/Button';
+import Badge from '../../Badge/Badge';
+import { BackgroundWrapper, backgroundImages } from './shared-components';
+import { Icon } from '../../Icon/Icon'; // Assuming Icon is used or might be useful, added from Examples
+
+const meta: Meta<typeof AtomixGlass> = {
+  title: 'Components/AtomixGlass/Features/Customization',
+  component: AtomixGlass,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Examples of how to customize AtomixGlass with styles and integrate it with other Atomix components.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AtomixGlass>;
+
+export const WithCustomStyling: Story = {
+  args: {
+    children: (
+      <div className="u-text-center">
+        <h2 className="u-text-4 u-font-semibold u-mb-4 u-text-white">Custom Styled Glass</h2>
+        <p className="u-text-base u-mb-6 u-text-white">
+          This glass uses custom styling properties.
+        </p>
+        <Button
+          variant="primary"
+          className="u-rounded-lg u-py-3 u-px-6"
+          style={{ boxShadow: '0 5px 15px rgba(0,0,0,0.2)' }}
+        >
+          Premium Effect
+        </Button>
+      </div>
+    ),
+    displacementScale: 70,
+    blurAmount: 0.4,
+    saturation: 160,
+    aberrationIntensity: 1.8,
+    cornerRadius: 30,
+    padding: '40px',
+    style: {
+      width: '100%',
+      maxWidth: '400px',
+      margin: '0 auto',
+      boxShadow: '0 10px 30px rgba(0,0,0,0.3)',
+      transition: 'transform 0.3s ease-in-out',
+    },
+  },
+  render: args => (
+    <BackgroundWrapper backgroundImage={backgroundImages[2]}>
+      <div className="u-flex u-justify-center u-items-center u-w-full u-h-full">
+        <AtomixGlass {...args} />
+      </div>
+    </BackgroundWrapper>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Shows how to customize the AtomixGlass component with additional CSS styles and enhanced interactivity.',
+      },
+    },
+  },
+};
+
+export const WithOtherComponents: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Demonstrates how AtomixGlass integrates with other components in the design system.',
+      },
+    },
+  },
+  render: () => {
+    return (
+      <BackgroundWrapper backgroundImage={backgroundImages[0]}>
+        <div className="u-flex u-items-center u-justify-center u-w-full u-h-full">
+          <AtomixGlass
+            displacementScale={85}
+            blurAmount={0.6}
+            saturation={170}
+            aberrationIntensity={2.2}
+            elasticity={0.18}
+            cornerRadius={28}
+            padding="36px"
+            className="u-w-11/12 u-max-w-2xl"
+          >
+            <div className="u-mb-6">
+              <h2 className="u-m-0 u-text-white u-text-28 u-mb-2">Integrated UI</h2>
+              <p className="u-m-0 u-text-white u-opacity-90">
+                Glass effect with multiple components
+              </p>
+            </div>
+
+            <div className="u-flex u-flex-col u-gap-4 u-items-center">
+              <Button variant="primary" glass className="u-w-full">
+                Primary Action
+              </Button>
+              <Button variant="secondary" glass className="u-w-full">
+                Secondary Action
+              </Button>
+
+              <div className="u-flex u-gap-3 u-mt-4">
+                <Badge variant="success" label="Success" glass />
+                <Badge variant="warning" label="Warning" glass />
+              </div>
+            </div>
+          </AtomixGlass>
+        </div>
+      </BackgroundWrapper>
+    );
+  },
+};