@shohojdhara/atomix 0.3.14 → 0.4.0

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

@@ -52,241 +52,141 @@ export interface BackgroundWrapperProps {
   'aria-hidden'?: 'true' | 'false' | boolean;
 }
 
-/**
- * Interactive Story Container
- *
- * A container that provides mouse tracking and interactive background effects
- * for enhanced storytelling and demonstration purposes.
- */
-export interface StoryContainerProps {
-  children: React.ReactNode;
-  style?: React.CSSProperties;
-  interactive?: boolean;
-}
-
-/**
- * Interactive Wrapper Component
- *
- * Provides mouse position tracking and offset calculations for interactive stories
- */
-export interface InteractiveWrapperProps {
-  children: (
-    mousePos: { x: number; y: number },
-    mouseOffset: { x: number; y: number },
-    containerRef: RefObject<HTMLDivElement>
-  ) => React.ReactNode;
-}
-
-/**
- * Collection of high-quality background images for different moods and scenarios
- *
- * This array provides a variety of background options that work well with the
- * AtomixGlass component, showcasing different visual styles and contexts.
- */
-export const backgroundImages = [
-  // 0: Modern office interior with natural lighting
-  'https://images.pexels.com/photos/5653101/pexels-photo-5653101.jpeg',
-  // 1: Beautiful natural landscape - mountains and lake
-  'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-  // 2: Urban cityscape with modern buildings
-  'https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-  // 3: Forest path with sunlight filtering through trees
-  'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-  // 4: Ocean waves and beach scene
-  'https://images.unsplash.com/photo-1505142468610-359e7d316be0?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-  // 5: Modern architecture with glass facades
-  'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-  // 6: Cozy café interior with warm lighting
-  'https://images.unsplash.com/photo-1554118811-1e0d58224f24?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-  // 7: Desert landscape with dramatic sky
-  'https://images.unsplash.com/photo-1509316785289-025f5b846b35?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-  // 8: Tropical paradise with palm trees and ocean
-  'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-  // 9: Modern library or workspace with natural light
-  'https://images.unsplash.com/photo-1521587760476-6c12a4b040da?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-];
-
-/**
- * BackgroundWrapper Component Implementation
- *
- * Renders a container with a background image and optional overlay,
- * providing a consistent environment for showcasing the AtomixGlass component.
- *
- * @param props - BackgroundWrapperProps
- * @returns JSX.Element
- */
-export const BackgroundWrapper = ({
+export const BackgroundWrapper: React.FC<BackgroundWrapperProps> = ({
   children,
   backgroundImage,
   backgroundIndex,
   overlay = false,
-  overlayColor = 'rgba(0,0,0,0)',
-  overlayOpacity = 0,
-  height = '97vh',
-  width = '97vw',
-  borderRadius = '12px',
+  overlayColor = 'rgba(0, 0, 0, 0.5)',
+  overlayOpacity = 0.5,
+  height = '100vh',
+  width = '100vw',
+  borderRadius = '0',
+  padding = '0',
   className = '',
   style = {},
-}: BackgroundWrapperProps) => {
-  // If backgroundIndex is provided, use it to select from the backgroundImages array
+  interactive = false,
+  'aria-hidden': ariaHidden,
+}) => {
+  // Use the background image if provided, otherwise use the indexed one from backgroundImages
   const bgImage =
-    backgroundIndex !== undefined ? backgroundImages[backgroundIndex] : backgroundImage;
-
-  // Apply default overlay settings if overlay flag is true using nullish coalescing
-  const finalOverlayColor = overlay ? 'rgba(0,0,0,0.5)' : (overlayColor ?? 'rgba(0,0,0,0)');
-  const finalOverlayOpacity = overlay ? 0.5 : (overlayOpacity ?? 0);
+    backgroundImage ||
+    (backgroundIndex !== undefined ? backgroundImages[backgroundIndex] : backgroundImages[0]);
+
+  const bgStyle = {
+    backgroundImage: bgImage ? `url(${bgImage})` : undefined,
+    height,
+    width,
+    borderRadius,
+    padding,
+    ...style,
+  };
 
   return (
     <div
-      className={`c-atomix-glass-background ${className}`}
-      style={{
-        position: 'relative',
-        height: height,
-        width: width,
-        backgroundColor: !bgImage ? '#1a1a2e' : undefined, // Fallback color if no image
-        background: bgImage ? `url(${bgImage})` : undefined,
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        backgroundAttachment: 'fixed',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: borderRadius,
-        overflow: 'auto',
-        ...style,
-      }}
+      className={`u-relative u-overflow-hidden ${className}`}
+      style={bgStyle}
+      aria-hidden={ariaHidden}
     >
-      {/* Overlay */}
-      {(finalOverlayOpacity > 0 || overlay) && (
+      {overlay && (
         <div
+          className="u-absolute u-inset-0"
           style={{
-            position: 'absolute',
-            inset: 0,
-            backgroundColor: finalOverlayColor,
-            opacity: finalOverlayOpacity,
-            borderRadius: borderRadius,
-            pointerEvents: 'none',
+            backgroundColor: overlayColor,
+            opacity: overlayOpacity,
           }}
         />
       )}
-      <div
-        style={{
-          position: 'relative',
-          width: '100%',
-          height: '100%',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          color: 'white',
-        }}
-      >
-        {children}
-      </div>
+      <div className="u-relative u-z-10">{children}</div>
     </div>
   );
 };
 
 /**
- * Interactive Story Container Component
+ * Interactive Story Container
  *
  * A container that provides mouse tracking and interactive background effects
  * for enhanced storytelling and demonstration purposes.
  */
-export const StoryContainer = ({
+export interface StoryContainerProps {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  parallax?: boolean;
+  parallaxStrength?: number;
+}
+
+export const StoryContainer: React.FC<StoryContainerProps> = ({
   children,
+  className = '',
   style = {},
-  interactive = false,
-}: StoryContainerProps) => {
+  parallax = false,
+  parallaxStrength = 20,
+}) => {
   const containerRef = useRef<HTMLDivElement>(null);
-  const [backgroundPosition, setBackgroundPosition] = useState({ x: 0, y: 0 });
+
+  const [position, setPosition] = useState({ x: 0, y: 0 });
 
   const handleMouseMove = useCallback(
     (e: MouseEvent) => {
-      if (containerRef.current && interactive) {
-        const rect = containerRef.current.getBoundingClientRect();
-        const centerX = rect.left + rect.width / 2;
-        const centerY = rect.top + rect.height / 2;
+      if (!containerRef.current || !parallax) return;
+
+      const rect = containerRef.current.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+
+      const centerX = rect.width / 2;
+      const centerY = rect.height / 2;
 
-        // Calculate offset as a percentage
-        const offsetX = ((e.clientX - centerX) / rect.width) * 100;
-        const offsetY = ((e.clientY - centerY) / rect.height) * 100;
+      const moveX = ((x - centerX) / centerX) * parallaxStrength;
+      const moveY = ((y - centerY) / centerY) * parallaxStrength;
 
-        setBackgroundPosition({ x: offsetX, y: offsetY });
-      }
+      setPosition({ x: -moveX, y: -moveY });
     },
-    [interactive]
+    [parallax, parallaxStrength]
   );
 
   useEffect(() => {
-    const currentRef = containerRef.current;
-    if (currentRef && interactive) {
-      currentRef.addEventListener('mousemove', handleMouseMove);
-      return () => {
-        currentRef.removeEventListener('mousemove', handleMouseMove);
-      };
-    }
-    return undefined;
-  }, [handleMouseMove, interactive]);
+    if (!parallax) return;
+
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.addEventListener('mousemove', handleMouseMove as any);
+    return () => {
+      container.removeEventListener('mousemove', handleMouseMove as any);
+    };
+  }, [handleMouseMove, parallax]);
 
   return (
     <div
       ref={containerRef}
-      style={{
-        width: '100vw',
-        height: '100vh',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundImage: interactive
-          ? 'url(https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)'
-          : undefined,
-        backgroundSize: interactive ? '160%' : 'cover',
-        backgroundPosition: interactive
-          ? `calc(50% + ${backgroundPosition.x}px) calc(50% + ${backgroundPosition.y}px)`
-          : 'center',
-        ...style,
-      }}
+      className={`u-relative u-overflow-hidden u-w-full u-h-screen ${className}`}
+      style={style}
     >
-      {children}
+      {parallax ? (
+        <div
+          className="u-absolute u-inset-0 u-transition-transform u-duration-100 u-ease-linear"
+          style={{
+            transform: `translate(${position.x}px, ${position.y}px)`,
+            zIndex: -1,
+          }}
+        >
+          {children}
+        </div>
+      ) : (
+        <>{children}</>
+      )}
     </div>
   );
 };
 
 /**
- * Interactive Wrapper Component
- *
- * Provides mouse position tracking and offset calculations for interactive stories
+ * Collection of high-quality background images for different moods and scenarios
  */
-export const InteractiveWrapper = ({ children }: InteractiveWrapperProps) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
-  const [mouseOffset, setMouseOffset] = useState({ x: 0, y: 0 });
-
-  const handleMouseMove = useCallback((e: MouseEvent) => {
-    if (containerRef.current) {
-      const rect = containerRef.current.getBoundingClientRect();
-      const centerX = rect.left + rect.width / 2;
-      const centerY = rect.top + rect.height / 2;
-
-      setMouseOffset({
-        x: ((e.clientX - centerX) / rect.width) * 100,
-        y: ((e.clientY - centerY) / rect.height) * 100,
-      });
-    }
-    setMousePos({ x: e.clientX, y: e.clientY });
-  }, []);
-
-  useEffect(() => {
-    const currentRef = containerRef.current;
-    currentRef?.addEventListener('mousemove', handleMouseMove);
-    return () => {
-      currentRef?.removeEventListener('mousemove', handleMouseMove);
-    };
-  }, [handleMouseMove]);
-
-  return (
-    <div ref={containerRef} style={{ width: '100%', height: '100%' }}>
-      {children(mousePos, mouseOffset, containerRef)}
-    </div>
-  );
-};
+export const backgroundImages = [
+  '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-1506905925346-21bda4d32df4?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670',
+  'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+];

package/src/components/Avatar/Avatar.stories.tsx

@@ -20,31 +20,77 @@ const meta = {
     src: {
       control: 'text',
       description: 'Avatar image source URL',
+      table: {
+        category: 'Main',
+      },
     },
     alt: {
       control: 'text',
       description: 'Alt text for the avatar image',
+      table: {
+        category: 'Main',
+      },
     },
     initials: {
       control: 'text',
       description: 'Initials to display when no image is available',
+      table: {
+        category: 'Main',
+      },
     },
     icon: {
       control: { disable: true },
       description: 'Icon to display when no image or initials are available',
+      table: {
+        category: 'Main',
+      },
     },
     size: {
       control: { type: 'select' },
       options: ['xs', 'sm', 'md', 'lg', 'xl'],
       description: 'Size variant for the avatar',
+      table: {
+        category: 'Style',
+        defaultValue: { summary: 'md' },
+      },
     },
     circle: {
       control: 'boolean',
       description: 'Whether to make the avatar circular',
+      table: {
+        category: 'Style',
+        defaultValue: { summary: 'false' },
+      },
     },
     disabled: {
       control: 'boolean',
       description: 'Whether the avatar is disabled',
+      table: {
+        category: 'State',
+        defaultValue: { summary: 'false' },
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+      table: {
+        category: 'Misc',
+      },
+    },
+    style: {
+      control: 'object',
+      description: 'Inline styles',
+      table: {
+        category: 'Misc',
+      },
+    },
+    glass: {
+      control: 'boolean',
+      description: 'Apply glassmorphism effect',
+      table: {
+        category: 'Style',
+        defaultValue: { summary: 'false' },
+      },
     },
   },
 } satisfies Meta<typeof Avatar>;
@@ -60,6 +106,141 @@ export const Basic: Story = {
     size: 'md',
     circle: false,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic avatar with an image source',
+      },
+    },
+  },
+};
+
+// Avatar with Initials
+export const WithInitials: Story = {
+  args: {
+    initials: 'JD',
+    size: 'md',
+    circle: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Avatar displaying user initials when no image is available',
+      },
+    },
+  },
+};
+
+// Avatar with Icon
+export const WithIcon: Story = {
+  args: {
+    icon: <Icon name="User" size="md" />,
+    size: 'md',
+    circle: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Avatar displaying an icon when no image or initials are available',
+      },
+    },
+  },
+};
+
+// Avatar Sizes
+export const Sizes: Story = {
+  render: () => {
+    const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+
+    return (
+      <div className="u-flex u-gap-4 u-flex-wrap u-items-center">
+        {sizes.map(size => (
+          <div key={size} className="u-flex u-flex-col u-items-center u-gap-2">
+            <Avatar
+              src={`https://i.pravatar.cc/150?img=${size === 'xs' ? 1 : size === 'sm' ? 2 : size === 'md' ? 3 : size === 'lg' ? 4 : 5}`}
+              size={size}
+              circle
+            />
+            <span className="u-text-xs u-capitalize">{size}</span>
+          </div>
+        ))}
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Different avatar sizes from extra-small to extra-large',
+      },
+    },
+  },
+};
+
+// Avatar Shapes
+export const Shapes: Story = {
+  render: () => {
+    return (
+      <div className="u-flex u-gap-6 u-items-center">
+        <div className="u-flex u-flex-col u-items-center u-gap-2">
+          <Avatar src="https://i.pravatar.cc/150?img=6" size="md" circle={false} />
+          <span className="u-text-xs">Square</span>
+        </div>
+        <div className="u-flex u-flex-col u-items-center u-gap-2">
+          <Avatar src="https://i.pravatar.cc/150?img=7" size="md" circle={true} />
+          <span className="u-text-xs">Circle</span>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Avatar shapes: square and circle',
+      },
+    },
+  },
+};
+
+// Avatar States
+export const States: Story = {
+  render: () => {
+    return (
+      <div className="u-flex u-gap-6 u-items-center">
+        <div className="u-flex u-flex-col u-items-center u-gap-2">
+          <Avatar src="https://i.pravatar.cc/150?img=8" size="md" circle />
+          <span className="u-text-xs">Default</span>
+        </div>
+        <div className="u-flex u-flex-col u-items-center u-gap-2">
+          <Avatar src="https://i.pravatar.cc/150?img=9" size="md" circle disabled />
+          <span className="u-text-xs">Disabled</span>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Avatar states: default and disabled',
+      },
+    },
+  },
+};
+
+// Avatar with Glass Effect
+export const WithGlassEffect: Story = {
+  args: {
+    src: 'https://i.pravatar.cc/150?img=10',
+    size: 'md',
+    circle: true,
+    glass: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Avatar with glassmorphism effect',
+      },
+    },
+  },
 };
 
 // Avatar Variants Showcase
@@ -156,6 +337,13 @@ export const VariantsShowcase: Story = {
       </div>
     );
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comprehensive showcase of avatar variants across all sizes',
+      },
+    },
+  },
 };
 
 // Avatar Group Showcase
@@ -261,4 +449,11 @@ export const AvatarGroupShowcase: Story = {
       </div>
     );
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Various configurations of AvatarGroup component',
+      },
+    },
+  },
 };