@shohojdhara/atomix 0.5.0 → 0.5.2

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

@@ -253,7 +253,7 @@ const BackgroundWrapper = ({
         <div
           key={bg.url}
           style={{
-            position: 'absolute',
+            position: 'fixed',
             inset: 0,
             backgroundImage: `url(${bg.url})`,
             backgroundSize: 'cover',
@@ -360,7 +360,9 @@ export const Playground: Story = {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [copiedCode, setCopiedCode] = useState(false);
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [controlTab, setControlTab] = useState<'optics' | 'animation' | 'responsive' | 'flags'>('optics');
+    const [controlTab, setControlTab] = useState<'optics' | 'animation' | 'responsive' | 'flags'>(
+      'optics'
+    );
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const backgroundsArrayRef = useRef<typeof backgrounds | null>(null);
 
@@ -1157,7 +1159,12 @@ export const Playground: Story = {
                           {/* Time Animation Toggle */}
                           <div className="u-mb-3">
                             <button
-                              onClick={() => setSettings(prev => ({ ...prev, withTimeAnimation: !prev.withTimeAnimation }))}
+                              onClick={() =>
+                                setSettings(prev => ({
+                                  ...prev,
+                                  withTimeAnimation: !prev.withTimeAnimation,
+                                }))
+                              }
                               className="u-flex u-items-center u-gap-2 u-px-3 u-py-2 u-rounded u-text-start u-w-100"
                               style={{
                                 background: settings.withTimeAnimation
@@ -1175,16 +1182,22 @@ export const Playground: Story = {
                                   width: '10px',
                                   height: '10px',
                                   borderRadius: '50%',
-                                  background: settings.withTimeAnimation ? '#f472b6' : 'rgba(255,255,255,0.2)',
+                                  background: settings.withTimeAnimation
+                                    ? '#f472b6'
+                                    : 'rgba(255,255,255,0.2)',
                                   flexShrink: 0,
-                                  boxShadow: settings.withTimeAnimation ? '0 0 8px rgba(244,114,182,0.6)' : 'none',
+                                  boxShadow: settings.withTimeAnimation
+                                    ? '0 0 8px rgba(244,114,182,0.6)'
+                                    : 'none',
                                 }}
                               />
                               <span
                                 className="u-text-xs u-font-medium"
-                                style={{ 
-                                  color: settings.withTimeAnimation ? '#f472b6' : 'rgba(255,255,255,0.6)',
-                                  flex: 1 
+                                style={{
+                                  color: settings.withTimeAnimation
+                                    ? '#f472b6'
+                                    : 'rgba(255,255,255,0.6)',
+                                  flex: 1,
                                 }}
                               >
                                 Time Animation
@@ -1228,7 +1241,7 @@ export const Playground: Story = {
                                   className="premium-slider u-absolute u-w-100 u-m-0"
                                   style={{
                                     height: '2px',
-                                    background: `linear-gradient(to right, #f472b6 ${((settings.animationSpeed / 3) * 100)}%, rgba(255,255,255,0.15) ${((settings.animationSpeed / 3) * 100)}%)`,
+                                    background: `linear-gradient(to right, #f472b6 ${(settings.animationSpeed / 3) * 100}%, rgba(255,255,255,0.15) ${(settings.animationSpeed / 3) * 100}%)`,
                                     borderRadius: '2px',
                                     outline: 'none',
                                     appearance: 'none',
@@ -1244,7 +1257,12 @@ export const Playground: Story = {
                           {/* Multi-Layer Distortion Toggle */}
                           <div className="u-mb-3">
                             <button
-                              onClick={() => setSettings(prev => ({ ...prev, withMultiLayerDistortion: !prev.withMultiLayerDistortion }))}
+                              onClick={() =>
+                                setSettings(prev => ({
+                                  ...prev,
+                                  withMultiLayerDistortion: !prev.withMultiLayerDistortion,
+                                }))
+                              }
                               className="u-flex u-items-center u-gap-2 u-px-3 u-py-2 u-rounded u-text-start u-w-100"
                               style={{
                                 background: settings.withMultiLayerDistortion
@@ -1262,16 +1280,22 @@ export const Playground: Story = {
                                   width: '10px',
                                   height: '10px',
                                   borderRadius: '50%',
-                                  background: settings.withMultiLayerDistortion ? '#a78bfa' : 'rgba(255,255,255,0.2)',
+                                  background: settings.withMultiLayerDistortion
+                                    ? '#a78bfa'
+                                    : 'rgba(255,255,255,0.2)',
                                   flexShrink: 0,
-                                  boxShadow: settings.withMultiLayerDistortion ? '0 0 8px rgba(167,139,250,0.6)' : 'none',
+                                  boxShadow: settings.withMultiLayerDistortion
+                                    ? '0 0 8px rgba(167,139,250,0.6)'
+                                    : 'none',
                                 }}
                               />
                               <span
                                 className="u-text-xs u-font-medium"
-                                style={{ 
-                                  color: settings.withMultiLayerDistortion ? '#a78bfa' : 'rgba(255,255,255,0.6)',
-                                  flex: 1 
+                                style={{
+                                  color: settings.withMultiLayerDistortion
+                                    ? '#a78bfa'
+                                    : 'rgba(255,255,255,0.6)',
+                                  flex: 1,
                                 }}
                               >
                                 Multi-Layer Distortion
@@ -1427,7 +1451,7 @@ export const Playground: Story = {
                         </div>
                       </>
                     )}
-                    
+
                     {/* === CONTROLS: RESPONSIVE & PERFORMANCE === */}
                     {controlTab === 'responsive' && (
                       <div className="u-mb-4 u-animation-fade-in">
@@ -1448,7 +1472,7 @@ export const Playground: Story = {
                             Responsive & Performance
                           </span>
                         </div>
-                    
+
                         {/* Device Preset Selector */}
                         <div className="u-mb-4">
                           <label className="u-block u-mb-2 u-text-white u-font-semibold u-text-xs">
@@ -1461,7 +1485,9 @@ export const Playground: Story = {
                             {(['performance', 'balanced', 'quality'] as const).map(preset => (
                               <button
                                 key={preset}
-                                onClick={() => setSettings(prev => ({ ...prev, devicePreset: preset }))}
+                                onClick={() =>
+                                  setSettings(prev => ({ ...prev, devicePreset: preset }))
+                                }
                                 className="u-py-2 u-rounded u-text-center u-text-xs u-font-bold"
                                 style={{
                                   background:
@@ -1472,13 +1498,18 @@ export const Playground: Story = {
                                     settings.devicePreset === preset
                                       ? '1px solid rgba(16,185,129,0.5)'
                                       : '1px solid rgba(255,255,255,0.1)',
-                                  color: settings.devicePreset === preset ? '#10b981' : 'rgba(255,255,255,0.55)',
+                                  color:
+                                    settings.devicePreset === preset
+                                      ? '#10b981'
+                                      : 'rgba(255,255,255,0.55)',
                                   cursor: 'pointer',
                                   transition: 'all 0.2s',
                                   outline: 'none',
                                   textTransform: 'capitalize',
                                   boxShadow:
-                                    settings.devicePreset === preset ? '0 2px 12px rgba(16,185,129,0.15)' : 'none',
+                                    settings.devicePreset === preset
+                                      ? '0 2px 12px rgba(16,185,129,0.15)'
+                                      : 'none',
                                 }}
                               >
                                 {preset}
@@ -1486,16 +1517,24 @@ export const Playground: Story = {
                             ))}
                           </div>
                           <p className="u-mt-2 u-text-xs u-opacity-60">
-                            {settings.devicePreset === 'performance' && '⚡ Optimized for low-end devices with reduced quality'}
-                            {settings.devicePreset === 'balanced' && '⚖️ Balanced quality and performance (recommended)'}
-                            {settings.devicePreset === 'quality' && '💎 Maximum visual quality for high-end devices'}
+                            {settings.devicePreset === 'performance' &&
+                              '⚡ Optimized for low-end devices with reduced quality'}
+                            {settings.devicePreset === 'balanced' &&
+                              '⚖️ Balanced quality and performance (recommended)'}
+                            {settings.devicePreset === 'quality' &&
+                              '💎 Maximum visual quality for high-end devices'}
                           </p>
                         </div>
-                    
+
                         {/* Disable Responsive Breakpoints Toggle */}
                         <div className="u-mb-4">
                           <button
-                            onClick={() => setSettings(prev => ({ ...prev, disableResponsiveBreakpoints: !prev.disableResponsiveBreakpoints }))}
+                            onClick={() =>
+                              setSettings(prev => ({
+                                ...prev,
+                                disableResponsiveBreakpoints: !prev.disableResponsiveBreakpoints,
+                              }))
+                            }
                             className="u-flex u-items-center u-gap-2 u-px-3 u-py-2 u-rounded u-text-start u-w-100"
                             style={{
                               background: settings.disableResponsiveBreakpoints
@@ -1513,38 +1552,43 @@ export const Playground: Story = {
                                 width: '10px',
                                 height: '10px',
                                 borderRadius: '50%',
-                                background: settings.disableResponsiveBreakpoints ? '#ef4444' : 'rgba(255,255,255,0.2)',
+                                background: settings.disableResponsiveBreakpoints
+                                  ? '#ef4444'
+                                  : 'rgba(255,255,255,0.2)',
                                 flexShrink: 0,
-                                boxShadow: settings.disableResponsiveBreakpoints ? '0 0 8px rgba(239,68,68,0.6)' : 'none',
+                                boxShadow: settings.disableResponsiveBreakpoints
+                                  ? '0 0 8px rgba(239,68,68,0.6)'
+                                  : 'none',
                               }}
                             />
                             <span
                               className="u-text-xs u-font-medium"
-                              style={{ 
-                                color: settings.disableResponsiveBreakpoints ? '#ef4444' : 'rgba(255,255,255,0.6)',
-                                flex: 1 
+                              style={{
+                                color: settings.disableResponsiveBreakpoints
+                                  ? '#ef4444'
+                                  : 'rgba(255,255,255,0.6)',
+                                flex: 1,
                               }}
                             >
                               Disable Responsive Breakpoints
                             </span>
                           </button>
                           <p className="u-mt-1 u-text-xs u-opacity-50">
-                            When enabled, prevents automatic parameter adjustment based on viewport size
+                            When enabled, prevents automatic parameter adjustment based on viewport
+                            size
                           </p>
                         </div>
-                    
+
                         {/* Debug Options */}
                         <div className="u-mb-3">
                           <label className="u-block u-mb-2 u-text-white u-font-semibold u-text-xs">
                             🔍 Debug Options
                           </label>
-                          <div className="u-grid u-gap-3" style={{ gridTemplateColumns: '1fr 1fr' }}>
-                            {(
-                              [
-                                'debugPerformance',
-                                'debugOverLight',
-                              ] as const
-                            ).map(key => {
+                          <div
+                            className="u-grid u-gap-3"
+                            style={{ gridTemplateColumns: '1fr 1fr' }}
+                          >
+                            {(['debugPerformance', 'debugOverLight'] as const).map(key => {
                               const isOn = settings[key] as boolean;
                               const label = key
                                 .replace(/([A-Z])/g, ' $1')
@@ -1589,7 +1633,7 @@ export const Playground: Story = {
                         </div>
                       </div>
                     )}
-                    
+
                     {/* === CONTROLS: ACCESSIBILITY FLAGS === */}
                     {controlTab === 'flags' && (
                       <div className="u-mb-4 u-animation-fade-in">
@@ -2008,7 +2052,10 @@ export const Playground: Story = {
                         {backgrounds[backgroundIndex]?.tag}
                       </span>
                     </div>
-                    <div className="u-mt-1 u-text-xs u-opacity-35" style={{ letterSpacing: '0.3px' }}>
+                    <div
+                      className="u-mt-1 u-text-xs u-opacity-35"
+                      style={{ letterSpacing: '0.3px' }}
+                    >
                       Use ← → arrow keys to navigate
                     </div>
                   </div>

package/src/components/AtomixGlass/stories/argTypes.ts

@@ -16,7 +16,7 @@ import type { ArgTypeDefinition, ArgTypeCategory } from './types';
 export const baseArgTypes = {
   // Content category
   children: {
-    control: 'text',
+    control: { type: 'text' },
     description: 'Content to display inside the glass effect',
     table: {
       category: 'Content' as ArgTypeCategory,
@@ -125,7 +125,7 @@ export const baseArgTypes = {
     },
   },
   className: {
-    control: 'text',
+    control: { type: 'text' },
     description: 'Additional CSS class names',
     table: {
       category: 'Style' as ArgTypeCategory,
@@ -133,7 +133,7 @@ export const baseArgTypes = {
     },
   },
   style: {
-    control: 'object',
+    control: { type: 'object' },
     description: 'CSS style object',
     table: {
       category: 'Style' as ArgTypeCategory,
@@ -161,7 +161,7 @@ export const baseArgTypes = {
     },
   },
   disableResponsiveBreakpoints: {
-    control: 'boolean',
+    control: { type: 'boolean' },
     description: 'Disable responsive breakpoint system (default: false)',
     table: {
       category: 'Performance' as ArgTypeCategory,
@@ -171,7 +171,7 @@ export const baseArgTypes = {
 
   // Animation category (Phase 1)
   withTimeAnimation: {
-    control: 'boolean',
+    control: { type: 'boolean' },
     description: 'Enable time-based animation (Phase 1, default: true)',
     table: {
       category: 'Animation' as ArgTypeCategory,
@@ -187,7 +187,7 @@ export const baseArgTypes = {
     },
   },
   withMultiLayerDistortion: {
-    control: 'boolean',
+    control: { type: 'boolean' },
     description: 'Enable multi-layer distortion using FBM (Phase 1, default: false)',
     table: {
       category: 'Animation' as ArgTypeCategory,
@@ -229,7 +229,7 @@ export const baseArgTypes = {
 
   // Debug category
   debugPerformance: {
-    control: 'boolean',
+    control: { type: 'boolean' },
     description: 'Enable performance monitoring dashboard (development only)',
     table: {
       category: 'Debug' as ArgTypeCategory,
@@ -237,7 +237,7 @@ export const baseArgTypes = {
     },
   },
   debugBorderRadius: {
-    control: 'boolean',
+    control: { type: 'boolean' },
     description: 'Debug mode for corner radius extraction',
     table: {
       category: 'Debug' as ArgTypeCategory,
@@ -247,7 +247,7 @@ export const baseArgTypes = {
 
   // Accessibility category
   'aria-label': {
-    control: 'text',
+    control: { type: 'text' },
     description: 'ARIA label for accessibility',
     table: {
       category: 'Accessibility' as ArgTypeCategory,
@@ -255,7 +255,7 @@ export const baseArgTypes = {
     },
   },
   'aria-describedby': {
-    control: 'text',
+    control: { type: 'text' },
     description: 'ARIA describedby attribute for additional description',
     table: {
       category: 'Accessibility' as ArgTypeCategory,
@@ -263,7 +263,7 @@ export const baseArgTypes = {
     },
   },
   role: {
-    control: 'text',
+    control: { type: 'text' },
     description: 'ARIA role attribute',
     table: {
       category: 'Accessibility' as ArgTypeCategory,
@@ -271,7 +271,7 @@ export const baseArgTypes = {
     },
   },
   tabIndex: {
-    control: 'number',
+    control: { type: 'number' },
     description: 'Tab index for keyboard navigation',
     table: {
       category: 'Accessibility' as ArgTypeCategory,
@@ -279,7 +279,7 @@ export const baseArgTypes = {
     },
   },
   reducedMotion: {
-    control: 'boolean',
+    control: { type: 'boolean' },
     description: 'Override for reduced motion preference (default: false)',
     table: {
       category: 'Accessibility' as ArgTypeCategory,
@@ -287,7 +287,7 @@ export const baseArgTypes = {
     },
   },
   highContrast: {
-    control: 'boolean',
+    control: { type: 'boolean' },
     description: 'Override for high contrast preference (default: false)',
     table: {
       category: 'Accessibility' as ArgTypeCategory,
@@ -295,7 +295,7 @@ export const baseArgTypes = {
     },
   },
   withoutEffects: {
-    control: 'boolean',
+    control: { type: 'boolean' },
     description: 'Disable all visual effects (default: false)',
     table: {
       category: 'Accessibility' as ArgTypeCategory,
@@ -326,7 +326,7 @@ export const minimalArgTypes = {
 export const advancedArgTypes = {
   ...baseArgTypes,
   globalMousePosition: {
-    control: 'object',
+    control: { type: 'object' },
     description: 'External global mouse position { x: number; y: number }',
     table: {
       category: 'Interaction' as ArgTypeCategory,
@@ -334,7 +334,7 @@ export const advancedArgTypes = {
     },
   },
   mouseOffset: {
-    control: 'object',
+    control: { type: 'object' },
     description: 'External mouse offset { x: number; y: number }',
     table: {
       category: 'Interaction' as ArgTypeCategory,
@@ -361,7 +361,7 @@ export function pickArgTypeCategories<T extends Record<string, ArgTypeDefinition
   const result: Partial<T> = {};
   Object.entries(argTypes).forEach(([key, value]) => {
     if (value.table?.category && categories.includes(value.table.category)) {
-      result[key as keyof T] = value;
+      result[key as keyof T] = value as any;
     }
   });
   return result;
@@ -377,7 +377,7 @@ export function excludeArgTypeCategories<T extends Record<string, ArgTypeDefinit
   const result: Partial<T> = {};
   Object.entries(argTypes).forEach(([key, value]) => {
     if (value.table?.category && !categories.includes(value.table.category)) {
-      result[key as keyof T] = value;
+      result[key as keyof T] = value as any;
     }
   });
   return result;

package/src/components/AtomixGlass/stories/shared-components.tsx

@@ -79,6 +79,7 @@ export const BackgroundWrapper: React.FC<BackgroundWrapperProps> = ({
     backgroundSize: 'cover',
     backgroundPosition: 'center',
     backgroundRepeat: 'no-repeat',
+    backgroundAttachment: 'fixed',
     height,
     width,
     borderRadius,
@@ -100,7 +101,7 @@ export const BackgroundWrapper: React.FC<BackgroundWrapperProps> = ({
             padding,
             objectPosition: 'center',
             objectFit: 'cover',
-            backgroundPosition: 'fixed'
+            backgroundPosition: 'fixed',
           }}
         />
       )}
@@ -197,7 +198,6 @@ export const StoryContainer: React.FC<StoryContainerProps> = ({
  * Collection of high-quality background images for different moods and scenarios
  */
 export const backgroundImages = [
-  'https://images.unsplash.com/photo-1773609108583-4f0040c75e7f?q=80&w=2532&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
   'https://images.unsplash.com/photo-1593433073755-4233a78ee359?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
   'https://images.unsplash.com/photo-1637825891028-564f672aa42c?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670',
   'https://images.unsplash.com/photo-1773062278803-0643c4782445?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
@@ -225,14 +225,12 @@ export class StoryErrorBoundary extends React.Component<
     return { hasError: true, error };
   }
 
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    console.error('Story rendering error:', error, errorInfo);
-    if (this.props.onError) {
-      this.props.onError(error, errorInfo);
-    }
+  override componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('Story Error:', error, errorInfo);
+    this.setState({ hasError: true, error });
   }
 
-  render() {
+  override render() {
     if (this.state.hasError) {
       if (this.props.fallback) {
         return this.props.fallback;
@@ -249,10 +247,7 @@ export class StoryErrorBoundary extends React.Component<
           }}
         >
           <div className="u-text-center">
-            <h3
-              className="u-mb-2 u-text-xl u-font-bold"
-              style={{ color: '#dc2626' }}
-            >
+            <h3 className="u-mb-2 u-text-xl u-font-bold" style={{ color: '#dc2626' }}>
               Story Rendering Error
             </h3>
             <p className="u-mb-4 u-text-sm" style={{ color: '#7f1d1d' }}>

package/src/components/AtomixGlass/stories/types.ts

@@ -56,14 +56,14 @@ export type ArgTypeCategory =
  * Enhanced argType definition with category support
  */
 export interface ArgTypeDefinition {
-  control: Record<string, unknown>;
-  description: string;
+  control?: { type: 'text' | 'boolean' | 'object' | 'range' | 'number' | 'color' | 'select' | 'radio' | 'inline-radio' | 'check' | 'inline-check' | 'multi-select' | 'date' | 'file'; [key: string]: unknown } | boolean;
+  description?: string;
   table: {
     category?: ArgTypeCategory;
     defaultValue?: { summary: string };
     type?: { summary: string };
   };
-  options?: string[];
+  options?: unknown[];
   action?: string;
 }