@shohojdhara/atomix 0.4.8 → 0.5.0

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

@@ -0,0 +1,402 @@
+/**
+ * ModalExamples.stories.tsx
+ *
+ * Modal, dialog, and overlay examples for AtomixGlass.
+ * Perfect for notifications, confirmations, and interactive dialogs.
+ *
+ * @package Atomix
+ * @component AtomixGlass
+ */
+import React from 'react';
+import { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import AtomixGlass from '../AtomixGlass';
+import { BackgroundWrapper, backgroundImages, StoryErrorBoundary } from './shared-components';
+import { baseArgTypes } from './argTypes';
+
+import { Button } from '../../Button';
+import { Badge } from '../../Badge';
+import { Icon } from '../../Icon/Icon';
+
+const meta: Meta<typeof AtomixGlass> = {
+  title: 'Components/AtomixGlass/Examples/Modal Examples',
+  component: AtomixGlass,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Modal and dialog examples demonstrating AtomixGlass for overlays, notifications, and interactive dialogs.',
+      },
+    },
+  },
+  tags: ['!autodocs'],
+  argTypes: {
+    ...baseArgTypes,
+    children: { control: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AtomixGlass>;
+
+/**
+ * Confirmation Dialog
+ *
+ * Modal dialog for confirming important actions like deletions.
+ */
+export const ConfirmationDialog: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(true);
+
+    if (!isOpen) {
+      return (
+        <StoryErrorBoundary>
+          <BackgroundWrapper backgroundImage={backgroundImages[0]} overlay overlayOpacity={0.5}>
+            <div className="u-text-center u-text-white">
+              <Button variant="primary" size="lg" onClick={() => setIsOpen(true)}>
+                Open Confirmation Dialog
+              </Button>
+            </div>
+          </BackgroundWrapper>
+        </StoryErrorBoundary>
+      );
+    }
+
+    return (
+      <StoryErrorBoundary>
+        <BackgroundWrapper backgroundImage={backgroundImages[0]} overlay overlayOpacity={0.5}>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              minHeight: '100vh',
+              padding: '20px',
+            }}
+          >
+            <AtomixGlass
+              displacementScale={70}
+              blurAmount={1}
+              saturation={140}
+              borderRadius={24}
+              mode="standard"
+              style={{ maxWidth: '440px', width: '100%' }}
+              padding="40px"
+            >
+              <div className="u-text-center u-text-white">
+                <div
+                  style={{
+                    width: '80px',
+                    height: '80px',
+                    borderRadius: '50%',
+                    background: 'rgba(239, 68, 68, 0.2)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '40px',
+                    margin: '0 auto 24px',
+                  }}
+                  aria-hidden="true"
+                >
+                  ⚠️
+                </div>
+                
+                <h2 className="u-mt-0 u-text-2xl u-font-bold u-mb-2">
+                  Delete Account?
+                </h2>
+                <p className="u-text-sm u-opacity-90 u-mb-5" style={{ lineHeight: 1.6 }}>
+                  Are you sure you want to delete your account? This action cannot be undone 
+                  and all your data will be permanently removed.
+                </p>
+                
+                <div className="u-flex u-gap-3 u-justify-center" style={{ gap: '12px' }}>
+                  <Button
+                    variant="outline-light"
+                    glass={{ elasticity: 0 }}
+                    onClick={() => setIsOpen(false)}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    variant="danger"
+                    glass={{ elasticity: 0 }}
+                    onClick={() => {
+                      setIsOpen(false);
+                      alert('Account deleted');
+                    }}
+                  >
+                    Delete Account
+                  </Button>
+                </div>
+              </div>
+            </AtomixGlass>
+          </div>
+        </BackgroundWrapper>
+      </StoryErrorBoundary>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Confirmation dialog modal for critical actions with cancel and confirm buttons.',
+      },
+    },
+  },
+};
+
+/**
+ * Success Notification
+ *
+ * Toast-style notification for success messages.
+ */
+export const SuccessNotification: Story = {
+  render: () => {
+    const [isVisible, setIsVisible] = useState(true);
+
+    if (!isVisible) {
+      return (
+        <StoryErrorBoundary>
+          <BackgroundWrapper backgroundImage={backgroundImages[2]}>
+            <div className="u-text-center">
+              <Button variant="primary" size="lg" onClick={() => setIsVisible(true)}>
+                Show Success Notification
+              </Button>
+            </div>
+          </BackgroundWrapper>
+        </StoryErrorBoundary>
+      );
+    }
+
+    return (
+      <StoryErrorBoundary>
+        <BackgroundWrapper backgroundImage={backgroundImages[2]}>
+          <div
+            style={{
+              position: 'fixed',
+              top: '24px',
+              right: '24px',
+              zIndex: 1000,
+            }}
+          >
+            <AtomixGlass
+              displacementScale={50}
+              blurAmount={0.5}
+              saturation={130}
+              borderRadius={16}
+              mode="standard"
+              style={{ minWidth: '320px' }}
+              padding="20px"
+            >
+              <div className="u-flex u-items-center u-gap-3 u-text-white">
+                <div
+                  style={{
+                    width: '40px',
+                    height: '40px',
+                    borderRadius: '50%',
+                    background: 'rgba(34, 197, 94, 0.2)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '20px',
+                    flexShrink: 0,
+                  }}
+                  aria-hidden="true"
+                >
+                  ✓
+                </div>
+                
+                <div className="u-flex-1">
+                  <p className="u-m-0 u-font-semibold u-text-sm">Payment Successful!</p>
+                  <p className="u-m-0 u-text-xs u-opacity-80">
+                    Your transaction has been completed.
+                  </p>
+                </div>
+                
+                <button
+                  onClick={() => setIsVisible(false)}
+                  style={{
+                    background: 'transparent',
+                    border: 'none',
+                    color: 'rgba(255,255,255,0.6)',
+                    cursor: 'pointer',
+                    padding: '4px',
+                    fontSize: '20px',
+                    lineHeight: 1,
+                  }}
+                  aria-label="Close notification"
+                >
+                  ×
+                </button>
+              </div>
+            </AtomixGlass>
+          </div>
+        </BackgroundWrapper>
+      </StoryErrorBoundary>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Success notification toast with auto-dismiss capability and close button.',
+      },
+    },
+  },
+};
+
+/**
+ * Settings Modal
+ *
+ * Modal dialog for displaying settings and preferences.
+ */
+export const SettingsModal: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(true);
+    const [notifications, setNotifications] = useState(true);
+    const [darkMode, setDarkMode] = useState(false);
+    const [autoSave, setAutoSave] = useState(true);
+
+    if (!isOpen) {
+      return (
+        <StoryErrorBoundary>
+          <BackgroundWrapper backgroundImage={backgroundImages[4]}>
+            <div className="u-text-center u-text-white">
+              <Button variant="primary" size="lg" onClick={() => setIsOpen(true)}>
+                Open Settings
+              </Button>
+            </div>
+          </BackgroundWrapper>
+        </StoryErrorBoundary>
+      );
+    }
+
+    return (
+      <StoryErrorBoundary>
+        <BackgroundWrapper backgroundImage={backgroundImages[4]} overlay overlayOpacity={0.5}>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              minHeight: '100vh',
+              padding: '20px',
+            }}
+          >
+            <AtomixGlass
+              displacementScale={65}
+              blurAmount={0.75}
+              saturation={135}
+              borderRadius={24}
+              mode="standard"
+              style={{ maxWidth: '500px', width: '100%' }}
+            >
+              <div className="u-text-white" style={{ padding: '32px' }}>
+                <div className="u-flex u-items-center u-justify-between u-mb-4">
+                  <h2 className="u-m-0 u-text-2xl u-font-bold">Settings</h2>
+                  <button
+                    onClick={() => setIsOpen(false)}
+                    style={{
+                      background: 'transparent',
+                      border: 'none',
+                      color: 'rgba(255,255,255,0.6)',
+                      cursor: 'pointer',
+                      padding: '8px',
+                      fontSize: '24px',
+                      lineHeight: 1,
+                    }}
+                    aria-label="Close settings"
+                  >
+                    ×
+                  </button>
+                </div>
+                
+                <div className="u-divide-y" style={{ borderColor: 'rgba(255,255,255,0.1)' }}>
+                  {/* Notifications Setting */}
+                  <div className="u-py-3 u-flex u-items-center u-justify-between">
+                    <div>
+                      <p className="u-m-0 u-font-medium u-text-base">Push Notifications</p>
+                      <p className="u-m-0 u-text-xs u-opacity-70 u-mt-1">
+                        Receive updates and alerts
+                      </p>
+                    </div>
+                    <label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
+                      <input
+                        type="checkbox"
+                        checked={notifications}
+                        onChange={(e) => setNotifications(e.target.checked)}
+                        style={{ accentColor: '#667eea', width: '20px', height: '20px' }}
+                      />
+                    </label>
+                  </div>
+                  
+                  {/* Dark Mode Setting */}
+                  <div className="u-py-3 u-flex u-items-center u-justify-between">
+                    <div>
+                      <p className="u-m-0 u-font-medium u-text-base">Dark Mode</p>
+                      <p className="u-m-0 u-text-xs u-opacity-70 u-mt-1">
+                        Use dark theme across the app
+                      </p>
+                    </div>
+                    <label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
+                      <input
+                        type="checkbox"
+                        checked={darkMode}
+                        onChange={(e) => setDarkMode(e.target.checked)}
+                        style={{ accentColor: '#667eea', width: '20px', height: '20px' }}
+                      />
+                    </label>
+                  </div>
+                  
+                  {/* Auto Save Setting */}
+                  <div className="u-py-3 u-flex u-items-center u-justify-between">
+                    <div>
+                      <p className="u-m-0 u-font-medium u-text-base">Auto-Save</p>
+                      <p className="u-m-0 u-text-xs u-opacity-70 u-mt-1">
+                        Automatically save your work
+                      </p>
+                    </div>
+                    <label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
+                      <input
+                        type="checkbox"
+                        checked={autoSave}
+                        onChange={(e) => setAutoSave(e.target.checked)}
+                        style={{ accentColor: '#667eea', width: '20px', height: '20px' }}
+                      />
+                    </label>
+                  </div>
+                </div>
+                
+                <div className="u-flex u-gap-3 u-justify-end u-mt-5" style={{ gap: '12px' }}>
+                  <Button
+                    variant="outline-light"
+                    glass={{ elasticity: 0 }}
+                    onClick={() => setIsOpen(false)}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    variant="primary"
+                    glass={{ elasticity: 0 }}
+                    onClick={() => setIsOpen(false)}
+                  >
+                    Save Changes
+                  </Button>
+                </div>
+              </div>
+            </AtomixGlass>
+          </div>
+        </BackgroundWrapper>
+      </StoryErrorBoundary>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Settings modal with toggle switches for user preferences and configuration options.',
+      },
+    },
+  },
+};

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.',
+      },
+    },
+  },
+};