@shohojdhara/atomix 0.1.27 → 0.1.28

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

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