@shohojdhara/atomix 0.5.0 → 0.5.1

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

@@ -1,402 +0,0 @@
-/**
- * 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.',
-      },
-    },
-  },
-};