@shohojdhara/atomix 0.1.16 → 0.1.17

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

@@ -1,183 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState, useEffect } from 'react';
-import { EdgePanel } from './EdgePanel';
-import { Button } from '../Button/Button';
-
-const meta = {
-  title: 'Components/EdgePanel',
-  component: EdgePanel,
-  parameters: {
-    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.'
-      }
-    }
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    position: {
-      control: { type: 'select' },
-      options: ['start', 'end', 'top', 'bottom'],
-      description: 'Position of the edge panel'
-    },
-    mode: {
-      control: { type: 'select' },
-      options: ['slide', 'push', 'none'],
-      description: 'Animation mode of the panel'
-    },
-    backdrop: {
-      control: 'boolean',
-      description: 'Show backdrop behind the panel'
-    },
-    closeOnBackdropClick: {
-      control: 'boolean',
-      description: 'Close the panel when clicking on backdrop'
-    },
-    closeOnEscape: {
-      control: 'boolean',
-      description: 'Close the panel when pressing Escape key'
-    },
-    title: {
-      control: 'text',
-      description: 'Panel title'
-    },
-    isOpen: {
-      control: 'boolean',
-      description: 'Whether the panel is open (controlled component)'
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ height: '400px', width: '100%', position: 'relative' }}>
-        <Story />
-      </div>
-    ),
-  ],
-} satisfies Meta<typeof EdgePanel>;
-
-export default meta;
-type Story = StoryObj<typeof EdgePanel>;
-
-// Placeholder for demonstration content
-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' }}>
-      <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>
-      </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>
-    </ul>
-  </>
-);
-
-// Controller component to demonstrate the EdgePanel
-const EdgePanelController = ({ 
-  position, 
-  mode,
-  backdrop, 
-  closeOnBackdropClick, 
-  closeOnEscape,
-  title
-}: any) => {
-  const [open, setOpen] = useState(false);
-
-  // Clean up on unmount
-  useEffect(() => {
-    return () => {
-      document.body.classList.remove('is-edgepanel-open');
-    };
-  }, []);
-
-  return (
-    <div>
-      <Button 
-        label={`Open ${position} panel`} 
-        variant="primary" 
-        onClick={() => setOpen(true)} 
-      />
-      
-      <EdgePanel
-        position={position}
-        mode={mode}
-        backdrop={backdrop}
-        closeOnBackdropClick={closeOnBackdropClick}
-        closeOnEscape={closeOnEscape}
-        isOpen={open}
-        onOpenChange={(isOpen) => setOpen(isOpen)}
-        title={title || `Edge Panel (${position})`}
-      >
-        <DemoPanelContent 
-          position={position} 
-          mode={mode} 
-          backdrop={backdrop} 
-          closeOnBackdropClick={closeOnBackdropClick} 
-          closeOnEscape={closeOnEscape} 
-        />
-      </EdgePanel>
-    </div>
-  );
-};
-
-// Position Variants
-export const Start: Story = {
-  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} />,
-};
-
-export const Top: Story = {
-  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} />,
-};
-
-// 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} />,
-};
-
-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} />,
-};
-
-// 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} />,
-};
-
-// 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} 
-      title="Navigation"
-    />
-  ),
-}; 

package/src/components/EdgePanel/EdgePanel.tsx

@@ -1,79 +0,0 @@
-import React 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';
-
-export const EdgePanel: React.FC<EdgePanelProps> = ({
-  title,
-  children,
-  position = 'start',
-  mode = 'slide',
-  isOpen = false,
-  onOpenChange,
-  backdrop = true,
-  closeOnBackdropClick = true,
-  closeOnEscape = true,
-  className = '',
-}) => {
-  const {
-    isOpen: isOpenState,
-    containerRef,
-    backdropRef,
-    generateEdgePanelClass,
-    closePanel,
-    handleBackdropClick
-  } = useEdgePanel({
-    position,
-    mode,
-    isOpen,
-    onOpenChange,
-    backdrop,
-    closeOnBackdropClick,
-    closeOnEscape,
-  });
-
-  const panelClass = generateEdgePanelClass({
-    position,
-    isOpen,
-    className,
-  });
-
-  // If not open and not controlled by parent, don't render
-  if (!isOpenState && isOpen === false) {
-    return null;
-  }
-
-  return (
-    <div className={panelClass} data-position={position} data-mode={mode}>
-      {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"
-          >
-            <Icon name="X" />
-          </button>
-        </div>
-        <div className="c-edge-panel__body">
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-}; 
-
-export type { EdgePanelProps };
-
-EdgePanel.displayName = 'EdgePanel';
-
-export default EdgePanel;

package/src/components/EdgePanel/index.ts

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

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

@@ -1,30 +0,0 @@
-/**
- * EdgePanel Component Bundle
- * This file bundles all EdgePanel exports for use in a global namespace
- */
-import EdgePanel, { 
-  initializeEdgePanels, 
-  openEdgePanel,
-  closeEdgePanel,
-  closeAllEdgePanels,
-  toggleEdgePanel,
-  POSITIONS,
-  MODES,
-  SELECTORS,
-  CLASSES 
-} from './index';
-
-// Export for bundling into global namespace
-// The global namespace is defined in the webpack config
-export {
-  EdgePanel,
-  initializeEdgePanels,
-  openEdgePanel,
-  closeEdgePanel,
-  closeAllEdgePanels,
-  toggleEdgePanel,
-  POSITIONS,
-  MODES,
-  SELECTORS,
-  CLASSES
-}; 

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

@@ -1,206 +0,0 @@
-import EdgePanel, { initializeEdgePanels } from './index';
-import { EDGE_PANEL } from '../../../lib/constants/components';
-import { addClass, removeClass } from '../../../lib/utils/dom';
-
-/**
- * Apply custom animation effects for EdgePanel
- * @param panel - Edge panel element
- */
-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');
-      }
-    }, EDGE_PANEL.ANIMATION_DURATION);
-  });
-}
-
-/**
- * Initialize edge panels with custom behavior
- * @returns Array of edge panel instances
- */
-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;
-}
-
-/**
- * Apply responsive behavior based on breakpoints
- * @param panel - Edge panel element
- */
-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;
-        break;
-      case 'md':
-        breakpointTriggered = window.innerWidth <= 768;
-        break;
-      case 'lg':
-        breakpointTriggered = window.innerWidth <= 992;
-        break;
-      case 'xl':
-        breakpointTriggered = window.innerWidth <= 1200;
-        break;
-      default:
-        // If it's a number
-        if (!isNaN(Number(responsiveBreakpoint))) {
-          breakpointTriggered = window.innerWidth <= Number(responsiveBreakpoint);
-        }
-    }
-    
-    // Apply the appropriately class based on breakpoint
-    if (breakpointTriggered) {
-      panel.classList.add('is-responsive-active');
-    } else {
-      panel.classList.remove('is-responsive-active');
-    }
-  };
-  
-  // Initial check
-  checkBreakpoint();
-  
-  // Check on resize
-  window.addEventListener('resize', checkBreakpoint);
-}
-
-/**
- * Open a specific edge panel by selector or ID
- * @param selector - CSS selector or ID of the panel to open
- */
-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) {
-      instance.openPanel();
-    } else {
-      // Try to initialize if not already
-      const newInstance = new EdgePanel(panel);
-      (panel as any).edgePanelInstance = newInstance;
-      newInstance.openPanel();
-    }
-  } else {
-    console.warn(`EdgePanel: No panel found with selector ${selector}`);
-  }
-}
-
-/**
- * Close a specific edge panel by selector or ID
- * @param selector - CSS selector or ID of the panel to close
- */
-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) {
-      instance.closePanel();
-    }
-  }
-}
-
-/**
- * Close all edge panels on the page
- */
-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) {
-      instance.closePanel();
-    }
-  });
-}
-
-/**
- * Toggle a specific edge panel by selector or ID
- * @param selector - CSS selector or ID of the panel to toggle
- */
-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) {
-      // Check if it's open
-      if (panel.classList.contains(EDGE_PANEL.CLASSES.IS_OPEN)) {
-        instance.closePanel();
-      } else {
-        instance.openPanel();
-      }
-    } else {
-      // Initialize and open if not already initialized
-      const newInstance = new EdgePanel(panel);
-      (panel as any).edgePanelInstance = newInstance;
-      newInstance.openPanel();
-    }
-  }
-}