@shohojdhara/atomix 0.2.3 → 0.2.5

package/src/components/EdgePanel/EdgePanel.stories.tsx

@@ -1,13 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useEffect, useState } from 'react';
+import React from 'react';
 import { Button } from '../Button/Button';
 import { EdgePanel } from './EdgePanel';
+import { Card } from '../Card/Card';
 
 const meta = {
   title: 'Components/EdgePanel',
   component: EdgePanel,
   parameters: {
-    layout: 'centered',
+    layout: 'fullscreen',
     docs: {
       description: {
         component:
@@ -49,7 +51,20 @@ const meta = {
   },
   decorators: [
     Story => (
-      <div style={{ height: '400px', width: '100%', position: 'relative' }}>
+      <div
+        style={{
+          minHeight: '100vh',
+          width: '100%',
+          backgroundImage:
+            'url(https://images.unsplash.com/photo-1605440704530-cd6f40ecf5a9?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '2rem',
+        }}
+      >
         <Story />
       </div>
     ),
@@ -122,6 +137,7 @@ const EdgePanelController = ({
   closeOnBackdropClick,
   closeOnEscape,
   title,
+  glass,
 }: any) => {
   const [open, setOpen] = useState(false);
 
@@ -145,6 +161,7 @@ const EdgePanelController = ({
         isOpen={open}
         onOpenChange={isOpen => setOpen(isOpen)}
         title={title || `Edge Panel (${position})`}
+        glass={glass}
       >
         <DemoPanelContent
           position={position}
@@ -191,6 +208,7 @@ export const Top: Story = {
       backdrop={true}
       closeOnBackdropClick={true}
       closeOnEscape={true}
+      glass={true}
     />
   ),
 };
@@ -264,3 +282,456 @@ export const MobileNavigation: Story = {
     />
   ),
 };
+
+// Glass Variant Stories
+export const GlassStart: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Edge Panel with glass morphism effect from start position. The glass effect blurs and distorts the background content behind it.',
+      },
+    },
+  },
+  render: () => {
+    const [open, setOpen] = useState(false);
+
+    useEffect(() => {
+      return () => {
+        document.body.classList.remove('is-edgepanel-open');
+      };
+    }, []);
+
+    return (
+      <div>
+        <Button label="Open Glass Panel (Start)" variant="primary" onClick={() => setOpen(true)} />
+
+        <EdgePanel
+          position="start"
+          mode="slide"
+          backdrop={true}
+          closeOnBackdropClick={true}
+          closeOnEscape={true}
+          isOpen={open}
+          onOpenChange={setOpen}
+          title="Glass Panel"
+          glass={
+            {
+              mode: 'standard',
+              displacementScale: 50,
+              blurAmount: 2,
+              saturation: 150,
+            } as any
+          }
+        >
+          <DemoPanelContent
+            position="start"
+            mode="slide"
+            backdrop={true}
+            closeOnBackdropClick={true}
+            closeOnEscape={true}
+          />
+        </EdgePanel>
+      </div>
+    );
+  },
+};
+
+export const GlassEnd: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Edge Panel with glass morphism effect from end position. Notice how the background is visible through the glass.',
+      },
+    },
+  },
+  render: () => {
+    const [open, setOpen] = useState(false);
+
+    useEffect(() => {
+      return () => {
+        document.body.classList.remove('is-edgepanel-open');
+      };
+    }, []);
+
+    return (
+      <div>
+        <Button label="Open Glass Panel (End)" variant="secondary" onClick={() => setOpen(true)} />
+
+        <EdgePanel
+          position="end"
+          mode="slide"
+          backdrop={true}
+          closeOnBackdropClick={true}
+          closeOnEscape={true}
+          isOpen={open}
+          onOpenChange={setOpen}
+          title="Glass Panel"
+          glass={
+            {
+              mode: 'polar',
+              displacementScale: 60,
+              blurAmount: 1.5,
+              saturation: 170,
+            } as any
+          }
+        >
+          <DemoPanelContent
+            position="end"
+            mode="slide"
+            backdrop={true}
+            closeOnBackdropClick={true}
+            closeOnEscape={true}
+          />
+        </EdgePanel>
+      </div>
+    );
+  },
+};
+
+export const GlassCustom: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Edge Panel with custom glass effect configuration using shader mode.',
+      },
+    },
+  },
+  render: () => {
+    const [open, setOpen] = useState(false);
+
+    useEffect(() => {
+      return () => {
+        document.body.classList.remove('is-edgepanel-open');
+      };
+    }, []);
+
+    return (
+      <div>
+        <Button label="Open Custom Glass Panel" variant="primary" onClick={() => setOpen(true)} />
+
+        <EdgePanel
+          position="end"
+          mode="slide"
+          backdrop={true}
+          closeOnBackdropClick={true}
+          closeOnEscape={true}
+          isOpen={open}
+          onOpenChange={setOpen}
+          title="Custom Glass Panel"
+          glass={
+            {
+              mode: 'shader',
+              shaderVariant: 'liquidGlass',
+              displacementScale: 70,
+              blurAmount: 1.8,
+              saturation: 170,
+              cornerRadius: 0,
+            } as any
+          }
+        >
+          <div>
+            <p className="u-mb-4">
+              This panel features a custom glass effect with shader mode for premium visual quality.
+            </p>
+
+            <Card
+              title="Glass Effect Settings"
+              text="The glass morphism uses liquid glass shader variant with custom displacement and saturation."
+              className="u-mb-3"
+            />
+
+            <Card
+              title="Premium Visual Quality"
+              text="Shader-based glass effects provide the highest quality appearance with smooth transitions."
+              className="u-mb-3"
+            />
+
+            <Button label="Action" variant="primary" className="u-w-full" />
+          </div>
+        </EdgePanel>
+      </div>
+    );
+  },
+};
+
+export const GlassPremium: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Edge Panel with premium glass shader variant for high-end UI.',
+      },
+    },
+  },
+  render: () => {
+    const [open, setOpen] = useState(false);
+
+    useEffect(() => {
+      return () => {
+        document.body.classList.remove('is-edgepanel-open');
+      };
+    }, []);
+
+    return (
+      <div>
+        <Button label="Open Premium Glass Panel" variant="primary" onClick={() => setOpen(true)} />
+
+        <EdgePanel
+          position="start"
+          mode="slide"
+          backdrop={true}
+          closeOnBackdropClick={true}
+          closeOnEscape={true}
+          isOpen={open}
+          onOpenChange={setOpen}
+          title="Premium Glass"
+          glass={
+            {
+              mode: 'shader',
+              shaderVariant: 'premiumGlass',
+              displacementScale: 180,
+              blurAmount: 1,
+              saturation: 60,
+              cornerRadius: 0,
+            } as any
+          }
+        >
+          <div>
+            <h5 className="u-mb-3">Premium Features</h5>
+
+            <Card
+              title="Enhanced Visuals"
+              text="Premium glass shader provides the most refined appearance."
+              glass
+              className="u-mb-3"
+            />
+
+            <Card
+              title="Perfect for Modern Apps"
+              text="Ideal for applications requiring sophisticated UI design."
+              glass
+              className="u-mb-3"
+            />
+
+            <div className="u-mt-4">
+              <Button label="Get Started" variant="primary" className="u-w-full u-mb-2" />
+              <Button label="Learn More" variant="secondary" className="u-w-full" />
+            </div>
+          </div>
+        </EdgePanel>
+      </div>
+    );
+  },
+};
+
+export const GlassShowcase: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comprehensive showcase of all glass modes and variants for Edge Panel.',
+      },
+    },
+  },
+  render: () => {
+    const [openPanels, setOpenPanels] = useState({
+      standard: false,
+      polar: false,
+      prominent: false,
+      liquid: false,
+      premium: false,
+    });
+
+    useEffect(() => {
+      return () => {
+        document.body.classList.remove('is-edgepanel-open');
+      };
+    }, []);
+
+    const togglePanel = (panel: string) => {
+      setOpenPanels(prev => ({
+        ...prev,
+        [panel]: !prev[panel as keyof typeof prev],
+      }));
+    };
+
+    return (
+      <div>
+        <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
+          <Button
+            label="Standard Glass"
+            variant="primary"
+            onClick={() => togglePanel('standard')}
+          />
+          <Button label="Polar Glass" variant="secondary" onClick={() => togglePanel('polar')} />
+          <Button
+            label="Prominent Glass"
+            variant="tertiary"
+            onClick={() => togglePanel('prominent')}
+          />
+          <Button label="Liquid Glass" variant="info" onClick={() => togglePanel('liquid')} />
+          <Button label="Premium Glass" variant="success" onClick={() => togglePanel('premium')} />
+
+          {/* Standard Glass Mode */}
+          <EdgePanel
+            position="start"
+            mode="slide"
+            backdrop={true}
+            closeOnBackdropClick={true}
+            closeOnEscape={true}
+            isOpen={openPanels.standard}
+            onOpenChange={isOpen => setOpenPanels(prev => ({ ...prev, standard: isOpen }))}
+            title="Standard Glass Mode"
+            glass={
+              {
+                mode: 'standard',
+                displacementScale: 25,
+                blurAmount: 1.2,
+                saturation: 140,
+                cornerRadius: 0,
+              } as any
+            }
+          >
+            <div>
+              <h5 className="u-mb-3">Standard Glass Effect</h5>
+              <p className="u-mb-4">
+                Classic glass morphism with balanced displacement and blur for general use.
+              </p>
+              <Card title="Balanced Design" text="Perfect for everyday applications." glass />
+            </div>
+          </EdgePanel>
+
+          {/* Polar Glass Mode */}
+          <EdgePanel
+            position="end"
+            mode="slide"
+            backdrop={true}
+            closeOnBackdropClick={true}
+            closeOnEscape={true}
+            isOpen={openPanels.polar}
+            onOpenChange={isOpen => setOpenPanels(prev => ({ ...prev, polar: isOpen }))}
+            title="Polar Glass Mode"
+            glass={
+              {
+                mode: 'polar',
+                displacementScale: 35,
+                blurAmount: 1.5,
+                saturation: 160,
+                cornerRadius: 0,
+              } as any
+            }
+          >
+            <div>
+              <h5 className="u-mb-3">Polar Glass Effect</h5>
+              <p className="u-mb-4">
+                Enhanced polar distortion creates unique radial patterns from center.
+              </p>
+              <Card
+                title="Radial Distortion"
+                text="Creates circular displacement patterns."
+                glass
+              />
+            </div>
+          </EdgePanel>
+
+          {/* Prominent Glass Mode */}
+          <EdgePanel
+            position="start"
+            mode="slide"
+            backdrop={true}
+            closeOnBackdropClick={true}
+            closeOnEscape={true}
+            isOpen={openPanels.prominent}
+            onOpenChange={isOpen => setOpenPanels(prev => ({ ...prev, prominent: isOpen }))}
+            title="Prominent Glass Mode"
+            glass={
+              {
+                mode: 'prominent',
+                displacementScale: 50,
+                blurAmount: 2,
+                saturation: 180,
+                cornerRadius: 0,
+              } as any
+            }
+          >
+            <div>
+              <h5 className="u-mb-3">Prominent Glass Effect</h5>
+              <p className="u-mb-4">
+                Stronger displacement and blur for bold, eye-catching interfaces.
+              </p>
+              <Card title="Bold Appearance" text="Maximum visual impact and depth." glass />
+            </div>
+          </EdgePanel>
+
+          {/* Liquid Glass Shader */}
+          <EdgePanel
+            position="end"
+            mode="slide"
+            backdrop={true}
+            closeOnBackdropClick={true}
+            closeOnEscape={true}
+            isOpen={openPanels.liquid}
+            onOpenChange={isOpen => setOpenPanels(prev => ({ ...prev, liquid: isOpen }))}
+            title="Liquid Glass Shader"
+            glass={
+              {
+                mode: 'shader',
+                shaderVariant: 'liquidGlass',
+                displacementScale: 70,
+                blurAmount: 1.8,
+                saturation: 170,
+                cornerRadius: 0,
+              } as any
+            }
+          >
+            <div>
+              <h5 className="u-mb-3">Liquid Glass Shader</h5>
+              <p className="u-mb-4">
+                GPU-accelerated shader-based glass with fluid, organic distortion patterns.
+              </p>
+              <Card
+                title="Premium Quality"
+                text="Smooth, flowing distortions powered by WebGL shaders."
+                glass
+              />
+            </div>
+          </EdgePanel>
+
+          {/* Premium Glass Shader */}
+          <EdgePanel
+            position="start"
+            mode="slide"
+            backdrop={true}
+            closeOnBackdropClick={true}
+            closeOnEscape={true}
+            isOpen={openPanels.premium}
+            onOpenChange={isOpen => setOpenPanels(prev => ({ ...prev, premium: isOpen }))}
+            title="Premium Glass Shader"
+            glass={
+              {
+                mode: 'shader',
+                shaderVariant: 'premiumGlass',
+                displacementScale: 180,
+                blurAmount: 1,
+                saturation: 60,
+                cornerRadius: 0,
+              } as any
+            }
+          >
+            <div>
+              <h5 className="u-mb-3">Premium Glass Shader</h5>
+              <p className="u-mb-4">
+                Highest quality glass effect with refined, sophisticated appearance.
+              </p>
+              <Card
+                title="Elite Design"
+                text="The pinnacle of glass morphism for luxury applications."
+                glass
+              />
+            </div>
+          </EdgePanel>
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/EdgePanel/EdgePanel.tsx

@@ -1,9 +1,55 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import { EdgePanelProps } from '../../lib/types/components';
 import { useEdgePanel } from '../../lib/composables/useEdgePanel';
 import { EDGE_PANEL } from '../../lib/constants/components';
 import { Icon } from '../Icon/Icon';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
+/**
+ * EdgePanel - A sliding panel component that appears from any screen edge
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <EdgePanel
+ *   title="My Panel"
+ *   isOpen={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   position="start"
+ * >
+ *   <p>Panel content</p>
+ * </EdgePanel>
+ *
+ * // With glass effect
+ * <EdgePanel
+ *   title="Glass Panel"
+ *   isOpen={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   position="end"
+ *   glass={true}
+ * >
+ *   <p>Panel with glass morphism</p>
+ * </EdgePanel>
+ *
+ * // With custom glass configuration
+ * <EdgePanel
+ *   title="Custom Glass"
+ *   isOpen={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   position="start"
+ *   glass={{
+ *     mode: 'shader',
+ *     shaderVariant: 'liquidGlass',
+ *     displacementScale: 70,
+ *     blurAmount: 1.8,
+ *     saturation: 170,
+ *   }}
+ * >
+ *   <p>Panel with custom glass effect</p>
+ * </EdgePanel>
+ * ```
+ */
 export const EdgePanel: React.FC<EdgePanelProps> = ({
   title,
   children,
@@ -15,6 +61,8 @@ export const EdgePanel: React.FC<EdgePanelProps> = ({
   closeOnBackdropClick = true,
   closeOnEscape = true,
   className = '',
+  style,
+  glass,
 }) => {
   const {
     isOpen: isOpenState,
@@ -31,12 +79,16 @@ export const EdgePanel: React.FC<EdgePanelProps> = ({
     backdrop,
     closeOnBackdropClick,
     closeOnEscape,
+    glass,
   });
 
+  // Moved useRef outside of conditional rendering to fix hook order issue
+  const glassContentRef = useRef<HTMLDivElement>(null);
+
   const panelClass = generateEdgePanelClass({
     position,
     isOpen,
-    className,
+    className: glass ? `${className} c-edge-panel--glass` : className,
   });
 
   // If not open and not controlled by parent, don't render
@@ -44,23 +96,59 @@ export const EdgePanel: React.FC<EdgePanelProps> = ({
     return null;
   }
 
+  const defaultGlassProps = {
+    elasticity: 0,
+  };
+
+  const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+  const panelContent = (
+    <>
+      <div className="c-edge-panel__header">
+        <h4>{title}</h4>
+        <button
+          className="c-edge-panel__close c-btn c-btn--icon"
+          onClick={() => closePanel()}
+          aria-label="Close panel"
+        >
+          <Icon name="X" />
+        </button>
+      </div>
+      <div className="c-edge-panel__body">{children}</div>
+    </>
+  );
+
   return (
-    <div className={panelClass} data-position={position} data-mode={mode}>
+    <div className={panelClass} data-position={position} data-mode={mode} style={style}>
       {backdrop && (
         <div ref={backdropRef} className="c-edge-panel__backdrop" onClick={handleBackdropClick} />
       )}
       <div ref={containerRef} className="c-edge-panel__container">
-        <div className="c-edge-panel__header">
-          <h4>{title}</h4>
-          <button
-            className="c-edge-panel__close c-btn c-btn--icon"
-            onClick={closePanel}
-            aria-label="Close panel"
+        {glass ? (
+          <AtomixGlass
+            {...glassProps}
+            className="c-edge-panel__glass-wrapper"
+            style={{
+              position: 'fixed',
+              width: glassContentRef.current?.offsetWidth,
+              height: glassContentRef.current?.offsetHeight,
+              top: containerRef.current?.offsetTop,
+              left: containerRef.current?.offsetLeft,
+              bottom: containerRef.current?.style.bottom,
+              right: containerRef.current?.style.right,
+            }}
           >
-            <Icon name="X" />
-          </button>
-        </div>
-        <div className="c-edge-panel__body">{children}</div>
+            <div
+              ref={glassContentRef}
+              className="c-edge-panel__glass-content"
+              style={{ borderRadius: containerRef.current?.style.borderRadius }}
+            >
+              {panelContent}
+            </div>
+          </AtomixGlass>
+        ) : (
+          panelContent
+        )}
       </div>
     </div>
   );