@shohojdhara/atomix 0.1.17 → 0.1.18

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

@@ -0,0 +1,267 @@
+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

@@ -0,0 +1,73 @@
+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

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

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

@@ -0,0 +1,30 @@
+/**
+ * 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

@@ -0,0 +1,206 @@
+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();
+    }
+  }
+}