@shohojdhara/atomix 0.4.8 → 0.5.0

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

@@ -0,0 +1,247 @@
+/**
+ * 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

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