@shohojdhara/atomix 0.4.7 → 0.4.9

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

@@ -224,7 +224,111 @@ This component is performance-intensive. Use sparingly and consider performance
       description: 'Padding for the glass component',
       table: {
         category: 'Style',
-        defaultValue: { summary: '24px' },
+        defaultValue: { summary: '0' },
+      },
+    },
+    height: {
+      control: { type: 'text' },
+      description: 'Height of the glass component',
+      table: {
+        category: 'Style',
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    width: {
+      control: { type: 'text' },
+      description: 'Width of the glass component',
+      table: {
+        category: 'Style',
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    devicePreset: {
+      control: { type: 'inline-radio', options: ['performance', 'balanced', 'quality'] },
+      description: 'Device preset for responsive optimization (default: "balanced")',
+      table: {
+        category: 'Performance',
+        defaultValue: { summary: '"balanced"' },
+      },
+    },
+    disableResponsiveBreakpoints: {
+      control: 'boolean',
+      description: 'Disable responsive breakpoint system (default: false)',
+      table: {
+        category: 'Performance',
+        defaultValue: { summary: 'false' },
+      },
+    },
+    withTimeAnimation: {
+      control: 'boolean',
+      description: 'Enable time-based animation (Phase 1, default: true)',
+      table: {
+        category: 'Animation',
+        defaultValue: { summary: 'true' },
+      },
+    },
+    animationSpeed: {
+      control: { type: 'range', min: 0, max: 3, step: 0.1 },
+      description: 'Animation speed multiplier (Phase 1, default: 1.0)',
+      table: {
+        category: 'Animation',
+        defaultValue: { summary: '1.0' },
+      },
+    },
+    withMultiLayerDistortion: {
+      control: 'boolean',
+      description: 'Enable multi-layer distortion using FBM (Phase 1, default: false)',
+      table: {
+        category: 'Animation',
+        defaultValue: { summary: 'false' },
+      },
+    },
+    distortionOctaves: {
+      control: { type: 'range', min: 1, max: 8, step: 1 },
+      description: 'Number of octaves for FBM distortion (Phase 1, default: 5)',
+      table: {
+        category: 'Animation',
+        defaultValue: { summary: '5' },
+      },
+    },
+    distortionLacunarity: {
+      control: { type: 'range', min: 1, max: 4, step: 0.1 },
+      description: 'Lacunarity for FBM distortion (Phase 1, default: 2.0)',
+      table: {
+        category: 'Animation',
+        defaultValue: { summary: '2.0' },
+      },
+    },
+    distortionGain: {
+      control: { type: 'range', min: 0.1, max: 1, step: 0.1 },
+      description: 'Gain for FBM distortion (Phase 1, default: 0.5)',
+      table: {
+        category: 'Animation',
+        defaultValue: { summary: '0.5' },
+      },
+    },
+    distortionQuality: {
+      control: { type: 'select', options: ['low', 'medium', 'high', 'ultra'] },
+      description: 'Quality preset for FBM distortion (Phase 1, default: "high")',
+      table: {
+        category: 'Animation',
+        defaultValue: { summary: '"high"' },
+      },
+    },
+    debugPerformance: {
+      control: 'boolean',
+      description: 'Enable performance monitoring dashboard (development only)',
+      table: {
+        category: 'Debug',
+        defaultValue: { summary: 'false' },
+      },
+    },
+    debugBorderRadius: {
+      control: 'boolean',
+      description: 'Debug mode for corner radius extraction',
+      table: {
+        category: 'Debug',
+        defaultValue: { summary: 'false' },
       },
     },
     className: {
@@ -273,8 +377,8 @@ export const BasicUsage: Story = {
   args: {
     children: (
       <div className="u-text-center u-flex u-flex-column u-items-center u-justify-center">
-        <h2 className="u-mb-4 u-mt-0 u-text-white u-fs-2xl u-font-bold">Basic Glass Effect</h2>
-        <p className="u-mb-6 u-mt-0 u-text-white u-opacity-90 u-fs-base">
+        <h2 className="u-mb-4 u-mt-0 u-text-white u-text-2xl u-font-bold">Basic Glass Effect</h2>
+        <p className="u-mb-6 u-mt-0 u-text-white u-opacity-90 u-text-base">
           This is a basic AtomixGlass component with default settings.
         </p>
         <Button variant="primary" glass>
@@ -304,9 +408,9 @@ export const WithAllProps: Story = {
   args: {
     children: (
       <div className="u-text-center">
-        <h2 className="u-mb-4 u-mt-0 u-text-white u-fs-2xl u-font-bold">Fully Configured Glass</h2>
-        <p className="u-mb-6 u-mt-0 u-text-white u-opacity-90 u-fs-base">
-          This glass component uses all configurable properties.
+        <h2 className="u-mb-4 u-mt-0 u-text-white u-text-2xl u-font-bold">Fully Configured Glass</h2>
+        <p className="u-mb-6 u-mt-0 u-text-white u-opacity-90 u-text-base">
+          This glass component uses all configurable props.
         </p>
         <div className="u-flex u-gap-4 u-justify-center">
           <Button variant="primary" glass>
@@ -327,6 +431,14 @@ export const WithAllProps: Story = {
     mode: 'standard',
     overLight: true,
     padding: '32px', // Increased padding for better visual appearance
+    devicePreset: 'balanced',
+    withTimeAnimation: true,
+    animationSpeed: 1.0,
+    withMultiLayerDistortion: false,
+    distortionOctaves: 5,
+    distortionLacunarity: 2.0,
+    distortionGain: 0.5,
+    distortionQuality: 'high',
     onClick: mockHandlers.onClick,
   },
   decorators: [
@@ -344,3 +456,42 @@ export const WithAllProps: Story = {
     },
   },
 };
+
+export const PerformanceOptimized: Story = {
+  args: {
+    children: (
+      <div className="u-text-center u-flex u-flex-column u-items-center u-justify-center">
+        <h2 className="u-mb-4 u-mt-0 u-text-white u-text-2xl u-font-bold">Performance Mode</h2>
+        <p className="u-mb-6 u-mt-0 u-text-white u-opacity-90 u-text-base">
+          Optimized for mobile devices with reduced quality presets.
+        </p>
+        <Button variant="primary" glass>
+          Mobile Optimized
+        </Button>
+      </div>
+    ),
+    devicePreset: 'performance',
+    disableResponsiveBreakpoints: false,
+    distortionQuality: 'low',
+    distortionOctaves: 2,
+    displacementScale: 50,
+    blurAmount: 0,
+    saturation: 120,
+    aberrationIntensity: 1.5,
+    padding: '32px',
+  },
+  decorators: [
+    Story => (
+      <BackgroundWrapper backgroundImage={backgroundImages[2]} overlay overlayOpacity={0.2}>
+        <Story />
+      </BackgroundWrapper>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows AtomixGlass optimized for performance on mobile devices using devicePreset="performance" and reduced distortion quality.',
+      },
+    },
+  },
+};