@shohojdhara/atomix 0.5.0 → 0.5.2

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

@@ -1,247 +0,0 @@
-/**
- * InteractivePlayground.stories.tsx
- *
- * Simplified interactive playground for AtomixGlass with essential controls.
- * Provides real-time adjustment of key parameters without the complexity
- * of the full-featured playground.
- *
- * @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 { advancedArgTypes } from './argTypes';
-
-import { Button } from '../../Button/Button';
-
-const meta: Meta<typeof AtomixGlass> = {
-  title: 'Components/AtomixGlass/Interactive Playground',
-  component: AtomixGlass,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Interactive playground for experimenting with AtomixGlass parameters in real-time. Adjust displacement, blur, saturation, and other effects to find the perfect glass aesthetic.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: advancedArgTypes,
-};
-
-export default meta;
-type Story = StoryObj<typeof AtomixGlass>;
-
-/**
- * Main Interactive Playground
- *
- * Full-featured playground with live controls for all major parameters.
- */
-export const Interactive: Story = {
-  render: () => {
-    const [displacementScale, setDisplacementScale] = useState(70);
-    const [blurAmount, setBlurAmount] = useState(0.5);
-    const [saturation, setSaturation] = useState(140);
-    const [aberrationIntensity, setAberrationIntensity] = useState(2);
-    const [borderRadius, setBorderRadius] = useState(20);
-    const [mode, setMode] = useState<'standard' | 'polar' | 'prominent' | 'shader'>('standard');
-
-    return (
-      <StoryErrorBoundary>
-        <BackgroundWrapper backgroundImage={backgroundImages[0]} overlay overlayOpacity={0.3}>
-          <div style={{ display: 'flex', gap: '32px', padding: '40px', flexWrap: 'wrap' }}>
-            {/* Controls Panel */}
-            <div
-              style={{
-                width: '320px',
-                flexShrink: 0,
-              }}
-            >
-              <AtomixGlass
-                displacementScale={50}
-                blurAmount={0.4}
-                saturation={130}
-                borderRadius={16}
-                mode="standard"
-                padding="24px"
-              >
-                <div className="u-text-white">
-                  <h3 className="u-mt-0 u-text-lg u-font-bold u-mb-4">Live Controls</h3>
-                  
-                  {/* Displacement Control */}
-                  <div className="u-mb-4">
-                    <label className="u-block u-text-sm u-font-semibold u-mb-2">
-                      Displacement: {displacementScale}
-                    </label>
-                    <input
-                      type="range"
-                      min="0"
-                      max="100"
-                      value={displacementScale}
-                      onChange={(e) => setDisplacementScale(Number(e.target.value))}
-                      style={{ width: '100%', accentColor: '#667eea' }}
-                    />
-                  </div>
-                  
-                  {/* Blur Control */}
-                  <div className="u-mb-4">
-                    <label className="u-block u-text-sm u-font-semibold u-mb-2">
-                      Blur: {blurAmount}
-                    </label>
-                    <input
-                      type="range"
-                      min="0"
-                      max="10"
-                      step="0.5"
-                      value={blurAmount}
-                      onChange={(e) => setBlurAmount(Number(e.target.value))}
-                      style={{ width: '100%', accentColor: '#667eea' }}
-                    />
-                  </div>
-                  
-                  {/* Saturation Control */}
-                  <div className="u-mb-4">
-                    <label className="u-block u-text-sm u-font-semibold u-mb-2">
-                      Saturation: {saturation}%
-                    </label>
-                    <input
-                      type="range"
-                      min="100"
-                      max="300"
-                      value={saturation}
-                      onChange={(e) => setSaturation(Number(e.target.value))}
-                      style={{ width: '100%', accentColor: '#667eea' }}
-                    />
-                  </div>
-                  
-                  {/* Aberration Control */}
-                  <div className="u-mb-4">
-                    <label className="u-block u-text-sm u-font-semibold u-mb-2">
-                      Aberration: {aberrationIntensity}
-                    </label>
-                    <input
-                      type="range"
-                      min="0"
-                      max="10"
-                      step="0.1"
-                      value={aberrationIntensity}
-                      onChange={(e) => setAberrationIntensity(Number(e.target.value))}
-                      style={{ width: '100%', accentColor: '#667eea' }}
-                    />
-                  </div>
-                  
-                  {/* Border Radius Control */}
-                  <div className="u-mb-4">
-                    <label className="u-block u-text-sm u-font-semibold u-mb-2">
-                      Border Radius: {borderRadius}px
-                    </label>
-                    <input
-                      type="range"
-                      min="0"
-                      max="50"
-                      value={borderRadius}
-                      onChange={(e) => setBorderRadius(Number(e.target.value))}
-                      style={{ width: '100%', accentColor: '#667eea' }}
-                    />
-                  </div>
-                  
-                  {/* Mode Selection */}
-                  <div className="u-mb-4">
-                    <label className="u-block u-text-sm u-font-semibold u-mb-2">Mode</label>
-                    <select
-                      value={mode}
-                      onChange={(e) => setMode(e.target.value as any)}
-                      style={{
-                        width: '100%',
-                        padding: '8px',
-                        borderRadius: '8px',
-                        border: '1px solid rgba(255,255,255,0.2)',
-                        background: 'rgba(255,255,255,0.1)',
-                        color: 'white',
-                        fontSize: '14px',
-                      }}
-                    >
-                      <option value="standard">Standard</option>
-                      <option value="polar">Polar</option>
-                      <option value="prominent">Prominent</option>
-                      <option value="shader">Shader</option>
-                    </select>
-                  </div>
-                  
-                  {/* Reset Button */}
-                  <Button
-                    variant="outline-light"
-                    glass={{ elasticity: 0 }}
-                    onClick={() => {
-                      setDisplacementScale(70);
-                      setBlurAmount(0.5);
-                      setSaturation(140);
-                      setAberrationIntensity(2);
-                      setBorderRadius(20);
-                      setMode('standard');
-                    }}
-                    size="sm"
-                    className="u-w-full"
-                  >
-                    Reset to Defaults
-                  </Button>
-                </div>
-              </AtomixGlass>
-            </div>
-            
-            {/* Preview Area */}
-            <div style={{ flex: 1, minWidth: '400px' }}>
-              <AtomixGlass
-                displacementScale={displacementScale}
-                blurAmount={blurAmount}
-                saturation={saturation}
-                aberrationIntensity={aberrationIntensity}
-                borderRadius={borderRadius}
-                mode={mode}
-                padding="40px"
-                style={{ minHeight: '400px' }}
-              >
-                <div className="u-text-center u-text-white">
-                  <h2 className="u-mt-0 u-text-3xl u-font-bold u-mb-3">
-                    Live Preview
-                  </h2>
-                  <p className="u-text-lg u-opacity-90 u-mb-4">
-                    Adjust the controls to see real-time changes
-                  </p>
-                  <div
-                    style={{
-                      fontSize: '64px',
-                      margin: '24px 0',
-                      filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.3))',
-                    }}
-                    aria-hidden="true"
-                  >
-                    🎨
-                  </div>
-                  <p className="u-text-sm u-opacity-80">
-                    Current settings:{' '}
-                    <code style={{ background: 'rgba(255,255,255,0.2)', padding: '4px 8px', borderRadius: '4px' }}>
-                      {mode} mode
-                    </code>
-                  </p>
-                </div>
-              </AtomixGlass>
-            </div>
-          </div>
-        </BackgroundWrapper>
-      </StoryErrorBoundary>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Interactive playground with live controls for displacement, blur, saturation, aberration, border radius, and rendering mode.',
-      },
-    },
-  },
-};

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

@@ -1,418 +0,0 @@
-/**
- * MobileUIExamples.stories.tsx
- *
- * Mobile-specific UI examples for AtomixGlass including phone frames,
- * mobile navigation, and responsive layouts.
- *
- * @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';
-
-const meta: Meta<typeof AtomixGlass> = {
-  title: 'Components/AtomixGlass/Examples/Mobile UI Examples',
-  component: AtomixGlass,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Mobile-specific UI examples demonstrating AtomixGlass for smartphone interfaces, mobile navigation, and responsive designs.',
-      },
-    },
-  },
-  tags: ['!autodocs'],
-  argTypes: {
-    ...baseArgTypes,
-    children: { control: false },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof AtomixGlass>;
-
-/**
- * Mobile App Interface
- *
- * Complete mobile app interface with phone frame, header, content, and tab bar.
- */
-export const MobileAppInterface: Story = {
-  render: () => {
-    const [activeTab, setActiveTab] = useState('home');
-
-    return (
-      <StoryErrorBoundary>
-        <BackgroundWrapper backgroundImage={backgroundImages[5]} overlay overlayOpacity={0.3}>
-          {/* Phone Frame */}
-          <div
-            style={{
-              width: '375px',
-              height: '812px',
-              borderRadius: '40px',
-              padding: '12px',
-              background: 'linear-gradient(135deg, #1f2937 0%, #111827 100%)',
-              boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)',
-              position: 'relative',
-            }}
-            role="img"
-            aria-label="Mobile phone frame"
-          >
-            {/* Phone Notch */}
-            <div
-              style={{
-                position: 'absolute',
-                top: '12px',
-                left: '50%',
-                transform: 'translateX(-50%)',
-                width: '150px',
-                height: '30px',
-                borderBottomLeftRadius: '16px',
-                borderBottomRightRadius: '16px',
-                background: '#000',
-                zIndex: 100,
-              }}
-              aria-hidden="true"
-            />
-
-            {/* Screen */}
-            <div
-              style={{
-                width: '100%',
-                height: '100%',
-                borderRadius: '32px',
-                overflow: 'hidden',
-                position: 'relative',
-              }}
-            >
-              <AtomixGlass
-                displacementScale={60}
-                blurAmount={0}
-                borderRadius={32}
-                mode="standard"
-                style={{ height: '100%' }}
-              >
-                <div className="u-text-white" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-                  {/* Status Bar */}
-                  <div
-                    style={{
-                      padding: '44px 20px 12px',
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      alignItems: 'center',
-                      fontSize: '12px',
-                      fontWeight: 600,
-                    }}
-                  >
-                    <span>9:41</span>
-                    <div className="u-flex u-items-center u-gap-1">
-                      <span>📶</span>
-                      <span>🔋</span>
-                    </div>
-                  </div>
-
-                  {/* Header */}
-                  <div
-                    style={{
-                      padding: '16px 20px',
-                      borderBottom: '1px solid rgba(255,255,255,0.1)',
-                    }}
-                  >
-                    <h1 className="u-m-0 u-text-2xl u-font-bold">Home</h1>
-                    <p className="u-m-0 u-text-sm u-opacity-70">Welcome back!</p>
-                  </div>
-
-                  {/* Content */}
-                  <div style={{ flex: 1, padding: '20px', overflowY: 'auto' }}>
-                    {activeTab === 'home' && (
-                      <>
-                        {/* Profile Card */}
-                        <AtomixGlass
-                          displacementScale={50}
-                          blurAmount={0.5}
-                          borderRadius={20}
-                          mode="standard"
-                          padding="20px"
-                          className="u-mb-3"
-                        >
-                          <div className="u-flex u-items-center u-gap-3">
-                            <div
-                              style={{
-                                width: '50px',
-                                height: '50px',
-                                borderRadius: '50%',
-                                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                fontSize: '24px',
-                              }}
-                              aria-hidden="true"
-                            >
-                              👤
-                            </div>
-                            <div className="u-flex-1">
-                              <p className="u-m-0 u-font-semibold">John Doe</p>
-                              <p className="u-m-0 u-text-xs u-opacity-70">Premium Member</p>
-                            </div>
-                            <Badge variant="primary">Pro</Badge>
-                          </div>
-                        </AtomixGlass>
-
-                        {/* Stats Grid */}
-                        <div
-                          style={{
-                            display: 'grid',
-                            gridTemplateColumns: 'repeat(2, 1fr)',
-                            gap: '12px',
-                            marginBottom: '16px',
-                          }}
-                        >
-                          {[
-                            { label: 'Balance', value: '$2,450', icon: '💰' },
-                            { label: 'Points', value: '1,200', icon: '⭐' },
-                          ].map((stat, index) => (
-                            <AtomixGlass
-                              key={index}
-                              displacementScale={40}
-                              blurAmount={0.4}
-                              borderRadius={16}
-                              mode="standard"
-                              padding="16px"
-                            >
-                              <div className="u-text-center">
-                                <div style={{ fontSize: '24px', marginBottom: '8px' }}>{stat.icon}</div>
-                                <p className="u-m-0 u-text-lg u-font-bold">{stat.value}</p>
-                                <p className="u-m-0 u-text-xs u-opacity-70">{stat.label}</p>
-                              </div>
-                            </AtomixGlass>
-                          ))}
-                        </div>
-
-                        {/* Recent Activity */}
-                        <AtomixGlass
-                          displacementScale={45}
-                          blurAmount={0.5}
-                          borderRadius={20}
-                          mode="standard"
-                          padding="20px"
-                        >
-                          <h3 className="u-mt-0 u-text-base u-font-bold u-mb-3">Recent Activity</h3>
-                          {[1, 2, 3].map((item) => (
-                            <div
-                              key={item}
-                              className="u-flex u-items-center u-gap-3 u-py-2"
-                              style={{ borderBottom: item < 3 ? '1px solid rgba(255,255,255,0.1)' : 'none' }}
-                            >
-                              <div
-                                style={{
-                                  width: '36px',
-                                  height: '36px',
-                                  borderRadius: '10px',
-                                  background: 'rgba(255,255,255,0.1)',
-                                  display: 'flex',
-                                  alignItems: 'center',
-                                  justifyContent: 'center',
-                                  fontSize: '18px',
-                                }}
-                                aria-hidden="true"
-                              >
-                                {item === 1 ? '📄' : item === 2 ? '🔔' : '💬'}
-                              </div>
-                              <div className="u-flex-1">
-                                <p className="u-m-0 u-text-sm">
-                                  {item === 1 ? 'Document created' : item === 2 ? 'New notification' : 'Message received'}
-                                </p>
-                                <p className="u-m-0 u-text-xs u-opacity-60">
-                                  {item === 1 ? '5 min ago' : item === 2 ? '1 hour ago' : '3 hours ago'}
-                                </p>
-                              </div>
-                            </div>
-                          ))}
-                        </AtomixGlass>
-                      </>
-                    )}
-
-                    {activeTab === 'search' && (
-                      <div>
-                        <AtomixGlass
-                          displacementScale={50}
-                          blurAmount={0.5}
-                          borderRadius={16}
-                          mode="standard"
-                          padding="12px"
-                          className="u-mb-3"
-                        >
-                          <div className="u-flex u-items-center u-gap-2">
-                            <span style={{ fontSize: '20px' }}>🔍</span>
-                            <input
-                              type="text"
-                              placeholder="Search..."
-                              style={{
-                                background: 'transparent',
-                                border: 'none',
-                                outline: 'none',
-                                color: 'white',
-                                width: '100%',
-                                fontSize: '14px',
-                              }}
-                            />
-                          </div>
-                        </AtomixGlass>
-
-                        <div className="u-text-center u-opacity-70 u-mt-5">
-                          <p>Start typing to search</p>
-                        </div>
-                      </div>
-                    )}
-
-                    {activeTab === 'profile' && (
-                      <div className="u-text-center">
-                        <div
-                          style={{
-                            width: '80px',
-                            height: '80px',
-                            borderRadius: '50%',
-                            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            fontSize: '40px',
-                            margin: '0 auto 16px',
-                          }}
-                          aria-label="Profile picture"
-                        >
-                          👤
-                        </div>
-                        <h2 className="u-m-0 u-text-xl u-font-bold">John Doe</h2>
-                        <p className="u-m-0 u-text-sm u-opacity-70 u-mb-4">john@example.com</p>
-                        <Button glass variant="primary" size="sm">Edit Profile</Button>
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Tab Bar */}
-                  <div
-                    style={{
-                      padding: '16px',
-                      borderTop: '1px solid rgba(255,255,255,0.1)',
-                      display: 'flex',
-                      justifyContent: 'space-around',
-                    }}
-                  >
-                    {[
-                      { id: 'home', icon: '🏠', label: 'Home' },
-                      { id: 'search', icon: '🔍', label: 'Search' },
-                      { id: 'profile', icon: '👤', label: 'Profile' },
-                    ].map((tab) => (
-                      <button
-                        key={tab.id}
-                        onClick={() => setActiveTab(tab.id)}
-                        style={{
-                          background: 'transparent',
-                          border: 'none',
-                          color: activeTab === tab.id ? '#667eea' : 'rgba(255,255,255,0.5)',
-                          cursor: 'pointer',
-                          display: 'flex',
-                          flexDirection: 'column',
-                          alignItems: 'center',
-                          gap: '4px',
-                          padding: '8px',
-                          fontSize: '20px',
-                        }}
-                        aria-label={tab.label}
-                        aria-pressed={activeTab === tab.id}
-                      >
-                        <span>{tab.icon}</span>
-                        <span style={{ fontSize: '10px' }}>{tab.label}</span>
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              </AtomixGlass>
-            </div>
-          </div>
-        </BackgroundWrapper>
-      </StoryErrorBoundary>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Complete mobile app interface with realistic phone frame, status bar, header, scrollable content, and bottom tab navigation.',
-      },
-    },
-  },
-};
-
-/**
- * Mobile Notification Card
- *
- * Push notification style card optimized for mobile displays.
- */
-export const MobileNotification: Story = {
-  render: () => (
-    <StoryErrorBoundary>
-      <BackgroundWrapper backgroundImage={backgroundImages[4]} overlay overlayOpacity={0.4}>
-        <div style={{ maxWidth: '340px' }}>
-          <AtomixGlass
-            displacementScale={50}
-            blurAmount={0.75}
-            saturation={130}
-            borderRadius={20}
-            mode="standard"
-            padding="20px"
-          >
-            <div className="u-flex u-items-start u-gap-3 u-text-white">
-              <div
-                style={{
-                  width: '40px',
-                  height: '40px',
-                  borderRadius: '12px',
-                  background: 'rgba(99, 102, 241, 0.2)',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  fontSize: '20px',
-                  flexShrink: 0,
-                }}
-                aria-hidden="true"
-              >
-                💬
-              </div>
-              <div className="u-flex-1">
-                <div className="u-flex u-items-center u-justify-between u-mb-1">
-                  <h3 className="u-m-0 u-text-sm u-font-semibold">New Message</h3>
-                  <span className="u-text-xs u-opacity-60">2m ago</span>
-                </div>
-                <p className="u-m-0 u-text-sm u-opacity-90 u-mb-2">
-                  Sarah sent you a message: "Hey! Are you free for a quick call?"
-                </p>
-                <div className="u-flex u-gap-2">
-                  <Button glass size="sm" variant="primary">Reply</Button>
-                  <Button glass size="sm" variant="outline-light">Dismiss</Button>
-                </div>
-              </div>
-            </div>
-          </AtomixGlass>
-        </div>
-      </BackgroundWrapper>
-    </StoryErrorBoundary>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Mobile push notification card with icon, title, message preview, timestamp, and action buttons.',
-      },
-    },
-  },
-};