@shohojdhara/atomix 0.3.14 → 0.4.0

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

@@ -15,7 +15,7 @@ import React, { useState } from 'react';
 import { Grid, GridCol, Container } from '../../../layouts/Grid';
 
 const meta: Meta<typeof AtomixGlass> = {
-  title: 'Components/AtomixGlass/Modes',
+  title: 'Components/AtomixGlass/Features/Modes',
   component: AtomixGlass,
   parameters: {
     layout: 'fullscreen',

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

@@ -0,0 +1,348 @@
+/**
+ * Overview.stories.tsx
+ *
+ * Overview and basic usage for AtomixGlass
+ *
+ * @package Atomix
+ * @component AtomixGlass
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import React from 'react';
+import AtomixGlass from '../AtomixGlass';
+import Button from '../../Button/Button';
+import { BackgroundWrapper, backgroundImages } from './shared-components';
+
+// ============================================================================
+// TYPE DEFINITIONS
+// ============================================================================
+
+/**
+ * Type helper for story props without children requirement
+ */
+type AtomixGlassStoryProps = Omit<React.ComponentProps<typeof AtomixGlass>, 'children'> & {
+  children?: React.ReactNode;
+};
+
+// ============================================================================
+// EVENT HANDLERS
+// ============================================================================
+
+/**
+ * Event handlers for documentation
+ */
+const mockHandlers = {
+  onClick: fn(),
+  onAction: fn(),
+  onChange: fn(),
+};
+
+// ============================================================================
+// META CONFIGURATION
+// ============================================================================
+
+const meta: Meta<typeof AtomixGlass> = {
+  title: 'Components/AtomixGlass',
+  component: AtomixGlass,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+# AtomixGlass
+
+## Overview
+
+AtomixGlass is a premium glass morphism component with realistic light refraction, chromatic aberration, and interactive effects. Perfect for cards, modals, and premium UI elements that need visual depth and elegance.
+
+## Features
+
+- Realistic glass effect with displacement and blur
+- Chromatic aberration for depth perception
+- Interactive hover effects with mouse tracking
+- Multiple rendering modes (standard, polar, prominent, shader)
+- Highly customizable parameters
+- Performance optimized for smooth animations
+
+## Accessibility
+
+- Keyboard support: Full keyboard navigation compatibility
+- Screen reader: Proper ARIA labels and descriptions
+- ARIA support: All standard ARIA attributes supported
+- Focus management: Proper focus handling within the component
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`typescript
+<AtomixGlass>
+  <div>Your content here</div>
+</AtomixGlass>
+\`\`\`
+
+### With Custom Configuration
+
+\`\`\`typescript
+<AtomixGlass 
+  displacementScale={80}
+  blurAmount={0.5}
+  saturation={140}
+  aberrationIntensity={2}
+>
+  <div>Your premium content here</div>
+</AtomixGlass>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop     | Type           | Default   | Description             |
+| -------- | -------------- | --------- | ----------------------- |
+| children | ReactNode      | undefined | Content to display inside the glass effect |
+| displacementScale | number | 70 | Displacement scale for the glass effect |
+| blurAmount | number | 0.0625 | Blur amount for the backdrop |
+| saturation | number | 140 | Saturation percentage for the backdrop |
+| aberrationIntensity | number | 2 | Chromatic aberration intensity |
+| elasticity | number | 0.15 | Elasticity factor for mouse interactions |
+| cornerRadius | number | 20 | Corner radius in pixels |
+| overLight | boolean/object | "auto" | OverLight configuration mode |
+| mode | "standard/polar/prominent/shader" | "standard" | Glass effect mode |
+| onClick | function | undefined | Click event handler |
+
+## Design Tokens
+
+Used design tokens:
+
+- \`--atomix-glass-displacement-scale\`: Displacement scale value
+- \`--atomix-glass-blur-amount\`: Blur amount value
+- \`--atomix-glass-saturation\`: Saturation value
+- \`--atomix-glass-aberration-intensity\`: Aberration intensity value
+
+## Notes
+
+This component is performance-intensive. Use sparingly and consider performance implications on mobile devices.
+`,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    children: {
+      control: 'text',
+      description: 'Content to display inside the glass effect',
+      table: {
+        category: 'Content',
+        defaultValue: { summary: '-' },
+      },
+    },
+    displacementScale: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+      description: 'Displacement scale for the glass effect (default: 70)',
+      table: {
+        category: 'Visual',
+        defaultValue: { summary: '70' },
+      },
+    },
+    blurAmount: {
+      control: { type: 'range', min: 0, max: 10, step: 0.5 },
+      description: 'Blur amount for the backdrop (default: 0.0625)',
+      table: {
+        category: 'Visual',
+        defaultValue: { summary: '0.0625' },
+      },
+    },
+    saturation: {
+      control: { type: 'range', min: 100, max: 300, step: 5 },
+      description: 'Saturation percentage for the backdrop (default: 140)',
+      table: {
+        category: 'Visual',
+        defaultValue: { summary: '140' },
+      },
+    },
+    aberrationIntensity: {
+      control: { type: 'range', min: 0, max: 10, step: 0.1 },
+      description: 'Chromatic aberration intensity (default: 2)',
+      table: {
+        category: 'Visual',
+        defaultValue: { summary: '2' },
+      },
+    },
+    elasticity: {
+      control: { type: 'range', min: 0, max: 1, step: 0.01 },
+      description: 'Elasticity factor for mouse interactions (default: 0.15)',
+      table: {
+        category: 'Interaction',
+        defaultValue: { summary: '0.15' },
+      },
+    },
+    cornerRadius: {
+      control: { type: 'range', min: 0, max: 50, step: 1 },
+      description: 'Corner radius in pixels (default: 20)',
+      table: {
+        category: 'Visual',
+        defaultValue: { summary: '20' },
+      },
+    },
+    overLight: {
+      control: {
+        type: 'select',
+        labels: {
+          false: 'false (Dark Background)',
+          true: 'true (Light Background)',
+          auto: 'auto (Auto-detect)',
+        },
+      },
+      options: [false, true, 'auto'],
+      description: 'OverLight configuration mode',
+      table: {
+        category: 'Visual',
+        defaultValue: { summary: '"auto"' },
+        type: { summary: 'boolean | "auto"' },
+      },
+    },
+    mode: {
+      control: { type: 'inline-radio', options: ['standard', 'polar', 'prominent', 'shader'] },
+      description: 'Glass effect mode (default: "standard")',
+      table: {
+        category: 'Visual',
+        defaultValue: { summary: '"standard"' },
+      },
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Click event handler',
+      table: {
+        category: 'Events',
+        defaultValue: { summary: '-' },
+      },
+    },
+    padding: {
+      control: { type: 'text' },
+      description: 'Padding for the glass component',
+      table: {
+        category: 'Style',
+        defaultValue: { summary: '24px' },
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS class names',
+      table: {
+        category: 'Style',
+        defaultValue: { summary: '-' },
+      },
+    },
+    style: {
+      control: 'object',
+      description: 'CSS style object',
+      table: {
+        category: 'Style',
+        defaultValue: { summary: '{}' },
+      },
+    },
+    'aria-label': {
+      control: 'text',
+      description: 'ARIA label for accessibility',
+      table: {
+        category: 'Accessibility',
+        defaultValue: { summary: '-' },
+      },
+    },
+    reducedMotion: {
+      control: 'boolean',
+      description: 'Override for reduced motion preference (default: false)',
+      table: {
+        category: 'Accessibility',
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+} satisfies Meta<typeof AtomixGlass>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// BASIC USAGE STORIES
+// ============================================================================
+
+export const BasicUsage: Story = {
+  args: {
+    children: (
+      <div className="u-text-center">
+        <h2 className="u-mb-4 u-mt-0 u-text-white u-text-28">Basic Glass Effect</h2>
+        <p className="u-mb-6 u-mt-0 u-text-white u-opacity-90">
+          This is a basic AtomixGlass component with default settings.
+        </p>
+        <Button variant="primary" glass>
+          Click Me
+        </Button>
+      </div>
+    ),
+    padding: '32px', // Increased padding for better visual appearance
+  },
+  render: args => (
+    <div className="u-bg-gradient-to-br u-from-indigo-500 u-via-purple-500 u-to-blue-500 u-min-h-screen u-w-full u-flex u-items-center u-justify-center">
+      <div className="u-w-full u-h-full">
+        <div className="u-flex u-justify-center u-items-center u-h-full">
+          <AtomixGlass {...args} />
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'The basic usage of the AtomixGlass component with default configuration.',
+      },
+    },
+  },
+};
+
+export const WithAllProps: Story = {
+  args: {
+    children: (
+      <div className="u-text-center">
+        <h2 className="u-mb-4 u-mt-0 u-text-white u-text-24">Fully Configured Glass</h2>
+        <p className="u-mb-6 u-mt-0 u-text-white u-opacity-90 u-text-16">
+          This glass component uses all configurable properties.
+        </p>
+        <div className="u-flex u-gap-4 u-justify-center">
+          <Button variant="primary" glass>
+            Primary
+          </Button>
+          <Button variant="outline-primary" glass>
+            Outline
+          </Button>
+        </div>
+      </div>
+    ),
+    displacementScale: 80,
+    blurAmount: 0.5,
+    saturation: 150,
+    aberrationIntensity: 2.5,
+    elasticity: 0.2,
+    cornerRadius: 24,
+    mode: 'standard',
+    overLight: true,
+    padding: '32px', // Increased padding for better visual appearance
+    onClick: mockHandlers.onClick,
+  },
+  render: args => (
+    <BackgroundWrapper backgroundImage={backgroundImages[0]}>
+      <div className="u-flex u-justify-center u-items-center u-h-full">
+        <AtomixGlass {...args} />
+      </div>
+    </BackgroundWrapper>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates AtomixGlass with all configurable props set to custom values.',
+      },
+    },
+  },
+};

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

@@ -0,0 +1,103 @@
+/**
+ * Performance.stories.tsx
+ *
+ * Stories focusing on performance optimization and stress testing.
+ *
+ * @package Atomix
+ * @component AtomixGlass
+ */
+
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import AtomixGlass from '../AtomixGlass';
+import { BackgroundWrapper, backgroundImages } from './shared-components';
+
+const meta: Meta<typeof AtomixGlass> = {
+  title: 'Components/AtomixGlass/Features/Performance',
+  component: AtomixGlass,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Performance-focused examples including mobile optimization and stress testing with multiple instances.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AtomixGlass>;
+
+export const OptimizedForMobile: Story = {
+  args: {
+    children: (
+      <div className="u-text-center">
+        <h3 className="u-m-0 u-text-white u-text-20 u-mb-3">Mobile Optimized</h3>
+        <p className="u-m-0 u-text-white u-opacity-90 u-text-14">
+          Lower intensity settings for better mobile performance
+        </p>
+      </div>
+    ),
+    displacementScale: 30, // Lower for performance
+    blurAmount: 0.2,
+    saturation: 120,
+    aberrationIntensity: 1.0,
+    elasticity: 0.1,
+    cornerRadius: 16,
+    padding: '28px',
+  },
+  render: args => (
+    <div className="u-bg-gradient-to-br u-from-indigo-500 u-via-purple-500 u-to-blue-500 u-min-h-screen u-w-full u-flex u-items-center u-justify-center">
+      <div className="u-w-full u-h-full">
+        <div className="u-flex u-justify-center u-items-center u-h-full">
+          <AtomixGlass {...args} />
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Optimized configuration for mobile devices with reduced performance impact.',
+      },
+    },
+  },
+};
+
+export const WithManyInstances: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Shows multiple instances of AtomixGlass in a single view - useful for performance testing.',
+      },
+    },
+  },
+  render: () => {
+    return (
+      <BackgroundWrapper backgroundImage={backgroundImages[3]}>
+        <div className="u-flex u-flex-wrap u-gap-6 u-w-full u-py-60 u-max-w-7xl u-mx-auto u-p-4 u-justify-center">
+          {[1, 2, 3, 4].map(index => (
+            <AtomixGlass
+              key={index}
+              displacementScale={40}
+              blurAmount={0.25}
+              saturation={130}
+              aberrationIntensity={1.2}
+              elasticity={0.1}
+              cornerRadius={16}
+              padding="28px"
+              className="u-text-center"
+            >
+              <h4 className="u-m-0 u-text-white u-text-18 u-mb-2">Glass #{index}</h4>
+              <p className="u-m-0 u-text-white u-opacity-80 u-text-14">
+                Instance #{index} of AtomixGlass
+              </p>
+            </AtomixGlass>
+          ))}
+        </div>
+      </BackgroundWrapper>
+    );
+  },
+};

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

@@ -316,7 +316,7 @@ export const Playground: Story = {
     );
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [selectedShader, setSelectedShader] = useState<
-      'liquidGlass' | 'plasma' | 'waves' | 'noise'
+      'liquidGlass' | 'plasma' | 'waves' | 'noise' | 'appleFluid' | 'liquidMetal'
     >('liquidGlass');
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [showCode, setShowCode] = useState(false);
@@ -436,6 +436,19 @@ export const Playground: Story = {
 </AtomixGlass>`;
     };
 
+    // ... rest of the component
+
+    const options = [
+      { value: 'liquidGlass', label: 'Liquid Glass (Standard)' },
+      { value: 'premiumGlass', label: 'Premium Glass' },
+      { value: 'appleFluid', label: 'Apple Fluid' },
+      { value: 'liquidMetal', label: 'Liquid Metal' },
+      { value: 'basiBasi', label: 'Expert (BasiBasi)' },
+      { value: 'plasma', label: 'Plasma (Legacy)' },
+      { value: 'waves', label: 'Waves (Legacy)' },
+      { value: 'noise', label: 'Noise (Legacy)' },
+    ];
+
     const copyCode = () => {
       navigator.clipboard.writeText(generateCode());
       setCopiedCode(true);
@@ -460,10 +473,10 @@ export const Playground: Story = {
       Math.min(
         100,
         100 -
-        settings.displacementScale * 0.15 -
-        Math.abs(settings.blurAmount) * 2 -
-        settings.aberrationIntensity * 3 -
-        settings.elasticity * 20
+          settings.displacementScale * 0.15 -
+          Math.abs(settings.blurAmount) * 2 -
+          settings.aberrationIntensity * 3 -
+          settings.elasticity * 20
       )
     );
 
@@ -481,7 +494,7 @@ export const Playground: Story = {
     };
 
     const backgrounds = [
-      'https://images.unsplash.com/photo-1651483554034-8defec113cf2?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2074',
+      'https://images.unsplash.com/photo-1579546929518-9e396f3cc809',
       'https://images.unsplash.com/photo-1734760858517-ff3e30c4a420?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=987',
       'https://images.unsplash.com/photo-1590634875052-89c137f8df21?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2072',
       'https://images.unsplash.com/photo-1592880476174-2932b3061c30?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2070',
@@ -548,7 +561,8 @@ export const Playground: Story = {
                           className="u-m-0 u-text-white u-font-bold"
                           style={{
                             fontSize: '1.75rem',
-                            background: 'linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%)',
+                            background:
+                              'linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%)',
                             WebkitBackgroundClip: 'text',
                             WebkitTextFillColor: 'transparent',
                             backgroundClip: 'text',
@@ -690,12 +704,12 @@ export const Playground: Story = {
                               : 'Off'
                             : typeof value === 'number'
                               ? value.toFixed(
-                                key.includes('Amount') ||
-                                  key.includes('elasticity') ||
-                                  key.includes('aberration')
-                                  ? 2
-                                  : 0
-                              )
+                                  key.includes('Amount') ||
+                                    key.includes('elasticity') ||
+                                    key.includes('aberration')
+                                    ? 2
+                                    : 0
+                                )
                               : value}
                         </span>
                       </div>
@@ -723,8 +737,8 @@ export const Playground: Story = {
                           }
                           step={
                             key === 'aberrationIntensity' ||
-                              key === 'elasticity' ||
-                              key === 'blurAmount'
+                            key === 'elasticity' ||
+                            key === 'blurAmount'
                               ? 0.01
                               : 1
                           }
@@ -790,18 +804,15 @@ export const Playground: Story = {
                           fontSize: '1rem',
                         }}
                       >
-                        <option value="liquidGlass" style={{ background: '#1a1a1a' }}>
-                          Liquid Glass
-                        </option>
-                        <option value="plasma" style={{ background: '#1a1a1a' }}>
-                          Plasma
-                        </option>
-                        <option value="waves" style={{ background: '#1a1a1a' }}>
-                          Waves
-                        </option>
-                        <option value="noise" style={{ background: '#1a1a1a' }}>
-                          Noise
-                        </option>
+                        {options.map(opt => (
+                          <option
+                            key={opt.value}
+                            value={opt.value}
+                            style={{ background: '#1a1a1a' }}
+                          >
+                            {opt.label}
+                          </option>
+                        ))}
                       </select>
                     </div>
                   )}
@@ -908,7 +919,8 @@ export const Playground: Story = {
                               className="u-m-0 u-font-bold"
                               style={{
                                 fontSize: '1.75rem',
-                                background: 'linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%)',
+                                background:
+                                  'linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%)',
                                 WebkitBackgroundClip: 'text',
                                 WebkitTextFillColor: 'transparent',
                                 backgroundClip: 'text',
@@ -987,7 +999,8 @@ export const Playground: Story = {
                           gap: '8px',
                           padding: '10px 24px',
                           borderRadius: '28px',
-                          background: 'linear-gradient(135deg, rgba(122, 255, 215, 0.25) 0%, rgba(102, 126, 234, 0.25) 100%)',
+                          background:
+                            'linear-gradient(135deg, rgba(122, 255, 215, 0.25) 0%, rgba(102, 126, 234, 0.25) 100%)',
                           border: '1px solid rgba(122, 255, 215, 0.3)',
                           color: '#7AFFD7',
                           fontSize: '0.875rem',
@@ -1020,7 +1033,8 @@ export const Playground: Story = {
                         className="u-mb-4 u-font-bold"
                         style={{
                           fontSize: '2.75rem',
-                          background: 'linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%)',
+                          background:
+                            'linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%)',
                           WebkitBackgroundClip: 'text',
                           WebkitTextFillColor: 'transparent',
                           backgroundClip: 'text',
@@ -1043,10 +1057,7 @@ export const Playground: Story = {
                         affects the visual appearance and performance characteristics of the glass
                         effect.
                       </p>
-                      <div
-                        className="u-flex u-justify-center u-flex-wrap"
-                        style={{ gap: '1rem' }}
-                      >
+                      <div className="u-flex u-justify-center u-flex-wrap" style={{ gap: '1rem' }}>
                         <Button variant="primary" size="lg">
                           Primary Action
                         </Button>
@@ -1107,11 +1118,15 @@ export const Playground: Story = {
                             </div>
                             <div>
                               <div className="u-text-xs u-opacity-70">Blur</div>
-                              <div className="u-font-semibold">{settings.blurAmount.toFixed(2)}</div>
+                              <div className="u-font-semibold">
+                                {settings.blurAmount.toFixed(2)}
+                              </div>
                             </div>
                             <div>
                               <div className="u-text-xs u-opacity-70">Elasticity</div>
-                              <div className="u-font-semibold">{settings.elasticity.toFixed(2)}</div>
+                              <div className="u-font-semibold">
+                                {settings.elasticity.toFixed(2)}
+                              </div>
                             </div>
                           </div>
                         </div>

package/src/components/AtomixGlass/stories/{ShaderVariants.stories.tsx → Shaders.stories.tsx}

@@ -14,7 +14,7 @@ import AtomixGlass from '../AtomixGlass';
 import { BackgroundWrapper } from './shared-components';
 
 const meta: Meta<typeof AtomixGlass> = {
-  title: 'Components/AtomixGlass/Shader Variants',
+  title: 'Components/AtomixGlass/Features/Shaders',
   component: AtomixGlass,
   parameters: {
     layout: 'fullscreen',
@@ -73,7 +73,7 @@ export const LiquidGlass: Story = {
             margin: '0 0 16px 0',
             fontSize: '38px',
             fontWeight: 700,
-            background: 'linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%)',
+            background: 'url(https://images.unsplash.com/photo-1579546929518-9e396f3cc809)',
             WebkitBackgroundClip: 'text',
             WebkitTextFillColor: 'transparent',
             backgroundClip: 'text',