@shohojdhara/atomix 0.1.16 → 0.1.18

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

@@ -10,45 +10,46 @@ const meta = {
     layout: 'centered',
     docs: {
       description: {
-        component: 'EdgePanel is a versatile sliding panel that can appear from any edge of the screen. Commonly used for mobile navigation, filters, chat windows, or contextual actions.'
-      }
-    }
+        component:
+          'EdgePanel is a versatile sliding panel that can appear from any edge of the screen. Commonly used for mobile navigation, filters, chat windows, or contextual actions.',
+      },
+    },
   },
   tags: ['autodocs'],
   argTypes: {
     position: {
       control: { type: 'select' },
       options: ['start', 'end', 'top', 'bottom'],
-      description: 'Position of the edge panel'
+      description: 'Position of the edge panel',
     },
     mode: {
       control: { type: 'select' },
       options: ['slide', 'push', 'none'],
-      description: 'Animation mode of the panel'
+      description: 'Animation mode of the panel',
     },
     backdrop: {
       control: 'boolean',
-      description: 'Show backdrop behind the panel'
+      description: 'Show backdrop behind the panel',
     },
     closeOnBackdropClick: {
       control: 'boolean',
-      description: 'Close the panel when clicking on backdrop'
+      description: 'Close the panel when clicking on backdrop',
     },
     closeOnEscape: {
       control: 'boolean',
-      description: 'Close the panel when pressing Escape key'
+      description: 'Close the panel when pressing Escape key',
     },
     title: {
       control: 'text',
-      description: 'Panel title'
+      description: 'Panel title',
     },
     isOpen: {
       control: 'boolean',
-      description: 'Whether the panel is open (controlled component)'
+      description: 'Whether the panel is open (controlled component)',
     },
   },
   decorators: [
-    (Story) => (
+    Story => (
       <div style={{ height: '400px', width: '100%', position: 'relative' }}>
         <Story />
       </div>
@@ -60,39 +61,68 @@ export default meta;
 type Story = StoryObj<typeof EdgePanel>;
 
 // Placeholder for demonstration content
-const DemoPanelContent = ({ position, mode, backdrop, closeOnBackdropClick, closeOnEscape }: any) => (
+const DemoPanelContent = ({
+  position,
+  mode,
+  backdrop,
+  closeOnBackdropClick,
+  closeOnEscape,
+}: any) => (
   <>
-    <p className="u-mb-3">This is an Edge Panel that slides in from the <strong>{position}</strong> edge.</p>
-    
-    <div className="u-mb-3 u-p-3" style={{ background: 'var(--at-secondary-bg-subtle)', borderRadius: '8px' }}>
+    <p className="u-mb-3">
+      This is an Edge Panel that slides in from the <strong>{position}</strong> edge.
+    </p>
+
+    <div
+      className="u-mb-3 u-p-3"
+      style={{ background: 'var(--at-secondary-bg-subtle)', borderRadius: '8px' }}
+    >
       <h5 className="u-mb-2">Configuration</h5>
       <ul className="u-list-none u-pl-0 u-mb-0">
-        <li className="u-mb-1"><strong>Position:</strong> {position}</li>
-        <li className="u-mb-1"><strong>Mode:</strong> {mode}</li>
-        <li className="u-mb-1"><strong>Backdrop:</strong> {backdrop ? 'Visible' : 'Hidden'}</li>
-        <li className="u-mb-1"><strong>Close on backdrop:</strong> {closeOnBackdropClick ? 'Yes' : 'No'}</li>
-        <li><strong>Close on ESC key:</strong> {closeOnEscape ? 'Yes' : 'No'}</li>
+        <li className="u-mb-1">
+          <strong>Position:</strong> {position}
+        </li>
+        <li className="u-mb-1">
+          <strong>Mode:</strong> {mode}
+        </li>
+        <li className="u-mb-1">
+          <strong>Backdrop:</strong> {backdrop ? 'Visible' : 'Hidden'}
+        </li>
+        <li className="u-mb-1">
+          <strong>Close on backdrop:</strong> {closeOnBackdropClick ? 'Yes' : 'No'}
+        </li>
+        <li>
+          <strong>Close on ESC key:</strong> {closeOnEscape ? 'Yes' : 'No'}
+        </li>
       </ul>
     </div>
-    
+
     <p className="u-mb-3">Common uses include:</p>
     <ul>
-      <li><strong>Start:</strong> Navigation menu, filters</li>
-      <li><strong>End:</strong> Notifications, chat windows</li>
-      <li><strong>Top:</strong> Alerts, confirmation messages</li>
-      <li><strong>Bottom:</strong> Action sheets, mobile keyboards</li>
+      <li>
+        <strong>Start:</strong> Navigation menu, filters
+      </li>
+      <li>
+        <strong>End:</strong> Notifications, chat windows
+      </li>
+      <li>
+        <strong>Top:</strong> Alerts, confirmation messages
+      </li>
+      <li>
+        <strong>Bottom:</strong> Action sheets, mobile keyboards
+      </li>
     </ul>
   </>
 );
 
 // Controller component to demonstrate the EdgePanel
-const EdgePanelController = ({ 
-  position, 
+const EdgePanelController = ({
+  position,
   mode,
-  backdrop, 
-  closeOnBackdropClick, 
+  backdrop,
+  closeOnBackdropClick,
   closeOnEscape,
-  title
+  title,
 }: any) => {
   const [open, setOpen] = useState(false);
 
@@ -105,12 +135,8 @@ const EdgePanelController = ({
 
   return (
     <div>
-      <Button 
-        label={`Open ${position} panel`} 
-        variant="primary" 
-        onClick={() => setOpen(true)} 
-      />
-      
+      <Button label={`Open ${position} panel`} variant="primary" onClick={() => setOpen(true)} />
+
       <EdgePanel
         position={position}
         mode={mode}
@@ -118,15 +144,15 @@ const EdgePanelController = ({
         closeOnBackdropClick={closeOnBackdropClick}
         closeOnEscape={closeOnEscape}
         isOpen={open}
-        onOpenChange={(isOpen) => setOpen(isOpen)}
+        onOpenChange={isOpen => setOpen(isOpen)}
         title={title || `Edge Panel (${position})`}
       >
-        <DemoPanelContent 
-          position={position} 
-          mode={mode} 
-          backdrop={backdrop} 
-          closeOnBackdropClick={closeOnBackdropClick} 
-          closeOnEscape={closeOnEscape} 
+        <DemoPanelContent
+          position={position}
+          mode={mode}
+          backdrop={backdrop}
+          closeOnBackdropClick={closeOnBackdropClick}
+          closeOnEscape={closeOnEscape}
         />
       </EdgePanel>
     </div>
@@ -135,49 +161,107 @@ const EdgePanelController = ({
 
 // Position Variants
 export const Start: Story = {
-  render: () => <EdgePanelController position="start" mode="slide" backdrop={true} closeOnBackdropClick={true} closeOnEscape={true} />,
+  render: () => (
+    <EdgePanelController
+      position="start"
+      mode="slide"
+      backdrop={true}
+      closeOnBackdropClick={true}
+      closeOnEscape={true}
+    />
+  ),
 };
 
 export const End: Story = {
-  render: () => <EdgePanelController position="end" mode="slide" backdrop={true} closeOnBackdropClick={true} closeOnEscape={true} />,
+  render: () => (
+    <EdgePanelController
+      position="end"
+      mode="slide"
+      backdrop={true}
+      closeOnBackdropClick={true}
+      closeOnEscape={true}
+    />
+  ),
 };
 
 export const Top: Story = {
-  render: () => <EdgePanelController position="top" mode="slide" backdrop={true} closeOnBackdropClick={true} closeOnEscape={true} />,
+  render: () => (
+    <EdgePanelController
+      position="top"
+      mode="slide"
+      backdrop={true}
+      closeOnBackdropClick={true}
+      closeOnEscape={true}
+    />
+  ),
 };
 
 export const Bottom: Story = {
-  render: () => <EdgePanelController position="bottom" mode="slide" backdrop={true} closeOnBackdropClick={true} closeOnEscape={true} />,
+  render: () => (
+    <EdgePanelController
+      position="bottom"
+      mode="slide"
+      backdrop={true}
+      closeOnBackdropClick={true}
+      closeOnEscape={true}
+    />
+  ),
 };
 
 // Mode Variants
 export const PushMode: Story = {
-  parameters: { docs: { description: { story: 'Push mode moves page content when the panel opens.' } } },
-  render: () => <EdgePanelController position="start" mode="push" backdrop={true} closeOnBackdropClick={true} closeOnEscape={true} />,
+  parameters: {
+    docs: { description: { story: 'Push mode moves page content when the panel opens.' } },
+  },
+  render: () => (
+    <EdgePanelController
+      position="start"
+      mode="push"
+      backdrop={true}
+      closeOnBackdropClick={true}
+      closeOnEscape={true}
+    />
+  ),
 };
 
 export const NoneMode: Story = {
   parameters: { docs: { description: { story: 'None mode disables animation completely.' } } },
-  render: () => <EdgePanelController position="start" mode="none" backdrop={true} closeOnBackdropClick={true} closeOnEscape={true} />,
+  render: () => (
+    <EdgePanelController
+      position="start"
+      mode="none"
+      backdrop={true}
+      closeOnBackdropClick={true}
+      closeOnEscape={true}
+    />
+  ),
 };
 
 // Backdrop Variants
 export const NoBackdrop: Story = {
   parameters: { docs: { description: { story: 'Panel without backdrop overlay.' } } },
-  render: () => <EdgePanelController position="start" mode="slide" backdrop={false} closeOnBackdropClick={true} closeOnEscape={true} />,
+  render: () => (
+    <EdgePanelController
+      position="start"
+      mode="slide"
+      backdrop={false}
+      closeOnBackdropClick={true}
+      closeOnEscape={true}
+    />
+  ),
 };
 
 // Feature Examples
 export const MobileNavigation: Story = {
   parameters: { docs: { description: { story: 'Example of a mobile navigation menu.' } } },
   render: () => (
-    <EdgePanelController 
-      position="start" 
-      mode="slide" 
-      backdrop={true} 
-      closeOnBackdropClick={true} 
-      closeOnEscape={true} 
+    <EdgePanelController
+      position="start"
+      mode="slide"
+      backdrop={true}
+      closeOnBackdropClick={true}
+      closeOnEscape={true}
       title="Navigation"
     />
   ),
-}; 
+};

package/src/components/EdgePanel/EdgePanel.tsx

@@ -22,7 +22,7 @@ export const EdgePanel: React.FC<EdgePanelProps> = ({
     backdropRef,
     generateEdgePanelClass,
     closePanel,
-    handleBackdropClick
+    handleBackdropClick,
   } = useEdgePanel({
     position,
     mode,
@@ -47,33 +47,27 @@ export const EdgePanel: React.FC<EdgePanelProps> = ({
   return (
     <div className={panelClass} data-position={position} data-mode={mode}>
       {backdrop && (
-        <div 
-          ref={backdropRef}
-          className="c-edge-panel__backdrop"
-          onClick={handleBackdropClick}
-        />
+        <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" 
+          <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>
+        <div className="c-edge-panel__body">{children}</div>
       </div>
     </div>
   );
-}; 
+};
 
 export type { EdgePanelProps };
 
 EdgePanel.displayName = 'EdgePanel';
 
-export default EdgePanel;
+export default EdgePanel;

package/src/components/EdgePanel/index.ts

@@ -1 +1 @@
-export * from './EdgePanel'; 
+export * from './EdgePanel';

package/src/components/EdgePanel/scripts/bundle.ts

@@ -2,8 +2,8 @@
  * EdgePanel Component Bundle
  * This file bundles all EdgePanel exports for use in a global namespace
  */
-import EdgePanel, { 
-  initializeEdgePanels, 
+import EdgePanel, {
+  initializeEdgePanels,
   openEdgePanel,
   closeEdgePanel,
   closeAllEdgePanels,
@@ -11,7 +11,7 @@ import EdgePanel, {
   POSITIONS,
   MODES,
   SELECTORS,
-  CLASSES 
+  CLASSES,
 } from './index';
 
 // Export for bundling into global namespace
@@ -26,5 +26,5 @@ export {
   POSITIONS,
   MODES,
   SELECTORS,
-  CLASSES
-}; 
+  CLASSES,
+};

package/src/components/EdgePanel/scripts/edgePanelInteractions.ts

@@ -9,43 +9,43 @@ import { addClass, removeClass } from '../../../lib/utils/dom';
 export function applyCustomAnimations(panel: HTMLElement): void {
   const container = panel.querySelector(EDGE_PANEL.SELECTORS.CONTAINER) as HTMLElement;
   const backdrop = panel.querySelector(EDGE_PANEL.SELECTORS.BACKDROP) as HTMLElement;
-  
+
   if (!container) return;
-  
+
   // Custom panel opening animation
   panel.addEventListener('edgepanel:open', () => {
     // Force a reflow before adding animation classes
     container.offsetHeight;
-    
+
     addClass(container, 'is-animating');
-    
+
     if (backdrop) {
       addClass(backdrop, 'is-animating');
     }
-    
+
     setTimeout(() => {
       removeClass(container, 'is-animating');
-      
+
       if (backdrop) {
         removeClass(backdrop, 'is-animating');
       }
     }, EDGE_PANEL.ANIMATION_DURATION);
   });
-  
+
   // Custom panel closing animation
   panel.addEventListener('edgepanel:close', () => {
     // Force a reflow before adding animation classes
     container.offsetHeight;
-    
+
     addClass(container, 'is-animating-out');
-    
+
     if (backdrop) {
       addClass(backdrop, 'is-animating-out');
     }
-    
+
     setTimeout(() => {
       removeClass(container, 'is-animating-out');
-      
+
       if (backdrop) {
         removeClass(backdrop, 'is-animating-out');
       }
@@ -59,16 +59,16 @@ export function applyCustomAnimations(panel: HTMLElement): void {
  */
 export function initializeEdgePanelsWithCustomBehavior(): EdgePanel[] {
   const instances = initializeEdgePanels() as EdgePanel[];
-  
+
   // Get all panel elements
   const panels = document.querySelectorAll<HTMLElement>(EDGE_PANEL.SELECTORS.PANEL);
-  
+
   // Apply custom animations to each panel
   panels.forEach(panel => {
     applyCustomAnimations(panel);
     applyResponsiveHandling(panel);
   });
-  
+
   return instances;
 }
 
@@ -79,18 +79,18 @@ export function initializeEdgePanelsWithCustomBehavior(): EdgePanel[] {
 export function applyResponsiveHandling(panel: HTMLElement): void {
   // Check for responsive data attribute
   const responsiveBreakpoint = panel.dataset.responsiveBreakpoint;
-  
+
   if (!responsiveBreakpoint) return;
-  
+
   // Function to check if the breakpoint is triggered
   const checkBreakpoint = () => {
     // Get the panel instance
     const instance = (panel as any).edgePanelInstance as EdgePanel;
     if (!instance) return;
-    
+
     // Check appropriate breakpoint based on the value
     let breakpointTriggered = false;
-    
+
     switch (responsiveBreakpoint) {
       case 'sm':
         breakpointTriggered = window.innerWidth <= 576;
@@ -110,7 +110,7 @@ export function applyResponsiveHandling(panel: HTMLElement): void {
           breakpointTriggered = window.innerWidth <= Number(responsiveBreakpoint);
         }
     }
-    
+
     // Apply the appropriately class based on breakpoint
     if (breakpointTriggered) {
       panel.classList.add('is-responsive-active');
@@ -118,10 +118,10 @@ export function applyResponsiveHandling(panel: HTMLElement): void {
       panel.classList.remove('is-responsive-active');
     }
   };
-  
+
   // Initial check
   checkBreakpoint();
-  
+
   // Check on resize
   window.addEventListener('resize', checkBreakpoint);
 }
@@ -133,7 +133,7 @@ export function applyResponsiveHandling(panel: HTMLElement): void {
 export function openEdgePanel(selector: string): void {
   const isIdSelector = selector.startsWith('#');
   const panel = document.querySelector<HTMLElement>(isIdSelector ? selector : `#${selector}`);
-  
+
   if (panel) {
     const instance = (panel as any).edgePanelInstance as EdgePanel;
     if (instance) {
@@ -156,7 +156,7 @@ export function openEdgePanel(selector: string): void {
 export function closeEdgePanel(selector: string): void {
   const isIdSelector = selector.startsWith('#');
   const panel = document.querySelector<HTMLElement>(isIdSelector ? selector : `#${selector}`);
-  
+
   if (panel) {
     const instance = (panel as any).edgePanelInstance as EdgePanel;
     if (instance) {
@@ -170,7 +170,7 @@ export function closeEdgePanel(selector: string): void {
  */
 export function closeAllEdgePanels(): void {
   const panels = document.querySelectorAll<HTMLElement>(EDGE_PANEL.SELECTORS.PANEL);
-  
+
   panels.forEach(panel => {
     const instance = (panel as any).edgePanelInstance as EdgePanel;
     if (instance) {
@@ -186,7 +186,7 @@ export function closeAllEdgePanels(): void {
 export function toggleEdgePanel(selector: string): void {
   const isIdSelector = selector.startsWith('#');
   const panel = document.querySelector<HTMLElement>(isIdSelector ? selector : `#${selector}`);
-  
+
   if (panel) {
     const instance = (panel as any).edgePanelInstance as EdgePanel;
     if (instance) {
@@ -203,4 +203,4 @@ export function toggleEdgePanel(selector: string): void {
       newInstance.openPanel();
     }
   }
-} 
+}