@shohojdhara/atomix 0.1.27 → 0.1.28

package/src/components/Dropdown/Dropdown.tsx

@@ -1,352 +0,0 @@
-import React, { useRef, useState, useCallback, createContext, useContext, useEffect } from 'react';
-import { DROPDOWN } from '../../lib/constants/components';
-import type {
-  DropdownProps,
-  DropdownItemProps,
-  DropdownDividerProps,
-  DropdownHeaderProps,
-} from '../../lib/types/components';
-
-// Context type definition
-export type DropdownContextType = {
-  isOpen: boolean;
-  close: () => void;
-  id: string;
-  trigger: string;
-};
-
-// Create context for dropdown state management
-const DropdownContext = createContext<DropdownContextType>({
-  isOpen: false,
-  close: () => {},
-  id: '',
-  trigger: 'click',
-});
-
-/**
- * DropdownItem component for menu items
- */
-export const DropdownItem: React.FC<DropdownItemProps> = ({
-  children,
-  href,
-  active = false,
-  disabled = false,
-  icon,
-  onClick,
-  className = '',
-  LinkComponent,
-  ...props
-}) => {
-  const { close } = useContext(DropdownContext);
-
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
-    if (disabled) {
-      e.preventDefault();
-      return;
-    }
-
-    if (onClick) {
-      onClick(e);
-    }
-
-    // Always close the dropdown when an item is clicked
-    close();
-  };
-
-  const itemClasses = [
-    'c-dropdown__menu-item',
-    active ? 'is-active' : '',
-    disabled ? 'is-disabled' : '',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  const linkProps = {
-    href,
-    className: itemClasses,
-    onClick: handleClick,
-    role: 'menuitem',
-    tabIndex: 0,
-    ...props,
-  };
-
-  if (href && !disabled) {
-    return (
-      <li>
-        {LinkComponent ? (
-          <LinkComponent {...linkProps}>
-            {icon && <span className="c-dropdown__menu-item-icon">{icon}</span>}
-            {children}
-          </LinkComponent>
-        ) : (
-          <a {...linkProps}>
-            {icon && <span className="c-dropdown__menu-item-icon">{icon}</span>}
-            {children}
-          </a>
-        )}
-      </li>
-    );
-  }
-
-  return (
-    <li>
-      <button
-        type="button"
-        className={itemClasses}
-        onClick={handleClick}
-        disabled={disabled}
-        role="menuitem"
-        tabIndex={0}
-        {...props}
-      >
-        {icon && <span className="c-dropdown__menu-item-icon">{icon}</span>}
-        {children}
-      </button>
-    </li>
-  );
-};
-
-/**
- * DropdownDivider component for separating groups of items
- */
-export const DropdownDivider: React.FC<DropdownDividerProps> = ({ className = '' }) => {
-  return <li className={`c-dropdown__divider ${className}`} role="separator" />;
-};
-
-/**
- * DropdownHeader component for section headers
- */
-export const DropdownHeader: React.FC<DropdownHeaderProps> = ({ children, className = '' }) => {
-  return <li className={`c-dropdown__header ${className}`}>{children}</li>;
-};
-
-/**
- * Dropdown component for creating dropdown menus
- */
-export const Dropdown: React.FC<DropdownProps> = ({
-  children,
-  menu,
-  placement = 'bottom-start',
-  trigger = 'click',
-  offset = DROPDOWN.DEFAULTS.OFFSET,
-  isOpen: controlledIsOpen,
-  onOpenChange,
-  closeOnClickOutside = true,
-  closeOnEscape = true,
-  maxHeight,
-  minWidth = DROPDOWN.DEFAULTS.MIN_WIDTH,
-  variant,
-  className = '',
-  ...props
-}) => {
-  // Set up controlled vs uncontrolled state
-  const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(false);
-  const isControlled = controlledIsOpen !== undefined;
-  const isOpen = isControlled ? controlledIsOpen : uncontrolledIsOpen;
-
-  // Create refs
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const toggleRef = useRef<HTMLDivElement>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  // Generate unique ID
-  const dropdownId = useRef(`dropdown-${Math.random().toString(36).substring(2, 9)}`).current;
-
-  // State change handlers
-  const setIsOpen = useCallback(
-    (nextIsOpen: boolean) => {
-      if (!isControlled) {
-        setUncontrolledIsOpen(nextIsOpen);
-      }
-      if (onOpenChange) {
-        onOpenChange(nextIsOpen);
-      }
-    },
-    [isControlled, onOpenChange]
-  );
-
-  const toggle = useCallback(() => setIsOpen(!isOpen), [isOpen, setIsOpen]);
-
-  const close = useCallback(() => {
-    setIsOpen(false);
-    // Return focus to the toggle button after closing
-    setTimeout(() => {
-      toggleRef.current?.focus();
-    }, 0);
-  }, [setIsOpen]);
-
-  // Click outside handler
-  useEffect(() => {
-    if (!isOpen || !closeOnClickOutside) return undefined;
-
-    const handleClickOutside = (e: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
-        close();
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [isOpen, closeOnClickOutside, close]);
-
-  // Escape key handler
-  useEffect(() => {
-    if (!isOpen || !closeOnEscape) return undefined;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        close();
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [isOpen, closeOnEscape, close]);
-
-  // Keyboard navigation
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (!menuRef.current) return;
-
-    const focusableItems = menuRef.current.querySelectorAll<HTMLElement>(
-      '[role="menuitem"]:not([disabled])'
-    );
-    if (!focusableItems.length) return;
-
-    const currentIndex = Array.from(focusableItems).findIndex(
-      item => item === document.activeElement
-    );
-
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault();
-        if (currentIndex < focusableItems.length - 1) {
-          focusableItems[currentIndex + 1].focus();
-        } else {
-          focusableItems[0].focus();
-        }
-        break;
-
-      case 'ArrowUp':
-        e.preventDefault();
-        if (currentIndex > 0) {
-          focusableItems[currentIndex - 1].focus();
-        } else {
-          focusableItems[focusableItems.length - 1].focus();
-        }
-        break;
-
-      case 'Home':
-        e.preventDefault();
-        focusableItems[0].focus();
-        break;
-
-      case 'End':
-        e.preventDefault();
-        focusableItems[focusableItems.length - 1].focus();
-        break;
-    }
-  }, []);
-
-  // Event handlers
-  const handleToggleClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (trigger === 'click') {
-        e.preventDefault();
-        e.stopPropagation();
-        toggle();
-      }
-    },
-    [trigger, toggle]
-  );
-
-  const handleToggleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if ((e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') && !isOpen) {
-        e.preventDefault();
-        setIsOpen(true);
-
-        // Only focus the first menu item when using keyboard navigation
-        if (e.key === 'ArrowDown' && menuRef.current) {
-          setTimeout(() => {
-            const firstItem = menuRef.current?.querySelector<HTMLElement>('[role="menuitem"]');
-            firstItem?.focus();
-          }, 100);
-        }
-      } else if (e.key === 'Escape' && isOpen) {
-        e.preventDefault();
-        close();
-      }
-    },
-    [isOpen, setIsOpen, close]
-  );
-
-  // Hover handlers for trigger="hover"
-  const handleHoverOpen = useCallback(() => {
-    if (trigger === 'hover') {
-      setIsOpen(true);
-    }
-  }, [trigger, setIsOpen]);
-
-  // Build class names
-  const dropdownClasses = [
-    'c-dropdown',
-    trigger === 'click' ? 'c-dropdown--onclick' : '',
-    variant ? `c-dropdown--${variant}` : '',
-    isOpen ? 'is-open' : '',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  // Menu styles
-  const menuStyleProps: React.CSSProperties = {};
-  if (maxHeight) menuStyleProps.maxHeight = maxHeight;
-  if (minWidth !== undefined) {
-    menuStyleProps.minWidth = typeof minWidth === 'number' ? `${minWidth}px` : minWidth;
-  }
-
-  return (
-    <div
-      ref={dropdownRef}
-      className={dropdownClasses}
-      onMouseEnter={trigger === 'hover' ? handleHoverOpen : undefined}
-      {...props}
-    >
-      <div
-        ref={toggleRef}
-        className="c-dropdown__toggle"
-        onClick={handleToggleClick}
-        onKeyDown={handleToggleKeyDown}
-        aria-haspopup="menu"
-        aria-expanded={isOpen}
-        aria-controls={dropdownId}
-        tabIndex={0}
-      >
-        {children}
-      </div>
-
-      <div
-        ref={menuRef}
-        id={dropdownId}
-        className={`c-dropdown__menu-wrapper c-dropdown__menu-wrapper--${placement} ${isOpen ? 'is-open' : ''}`}
-        role="menu"
-        aria-orientation="vertical"
-        aria-hidden={!isOpen}
-        onKeyDown={handleKeyDown}
-      >
-        <div className="c-dropdown__menu-inner" style={menuStyleProps}>
-          <DropdownContext.Provider value={{ isOpen, close, id: dropdownId, trigger }}>
-            <ul className="c-dropdown__menu">{menu}</ul>
-          </DropdownContext.Provider>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export type { DropdownProps, DropdownItemProps, DropdownDividerProps, DropdownHeaderProps };
-
-Dropdown.displayName = 'Dropdown';
-
-export default Dropdown;

package/src/components/Dropdown/index.ts

@@ -1,14 +0,0 @@
-import { Dropdown, DropdownItem, DropdownDivider, DropdownHeader } from './Dropdown';
-import type {
-  DropdownProps,
-  DropdownItemProps,
-  DropdownDividerProps,
-  DropdownHeaderProps,
-} from '../../lib/types/components';
-
-// Export React components
-export { Dropdown, DropdownItem, DropdownDivider, DropdownHeader };
-export { default } from './Dropdown';
-
-// Export types for React components
-export type { DropdownProps, DropdownItemProps, DropdownDividerProps, DropdownHeaderProps };

package/src/components/Dropdown/readme.md

@@ -1,151 +0,0 @@
-# Dropdown Component
-
-The Dropdown component provides a toggleable menu that displays a list of actions or navigation options. It offers a space-efficient way to organize related actions and navigation links.
-
-## Features
-
-- Multiple trigger methods (click, hover)
-- Customizable positioning
-- Support for items with icons
-- Headers and dividers for organizing content
-- Keyboard navigation support
-- ARIA attributes for accessibility
-- Automatic positioning based on available space
-- Responsive design
-
-## Usage
-
-### React Component
-
-```jsx
-import { Dropdown, DropdownItem, DropdownDivider, DropdownHeader } from '@shohojdhara/atomix';
-
-function App() {
-  return (
-    <Dropdown
-      trigger="click"
-      placement="bottom-start"
-      children={
-        <button className="c-btn c-btn--primary">
-          Dropdown <i className="c-dropdown__toggle-icon icon-atomix-caret-down"></i>
-        </button>
-      }
-      menu={
-        <>
-          <DropdownHeader>Options</DropdownHeader>
-          <DropdownItem>Profile</DropdownItem>
-          <DropdownItem>Settings</DropdownItem>
-          <DropdownDivider />
-          <DropdownItem href="#logout">Logout</DropdownItem>
-        </>
-      }
-    />
-  );
-}
-```
-
-### Vanilla JS
-
-```html
-<div class="c-dropdown js-atomix-dropdown" data-dropdown-trigger="click" data-dropdown-placement="bottom-start">
-  <button class="c-dropdown__toggle c-btn c-btn--primary">
-    Dropdown <i class="c-dropdown__toggle-icon icon-atomix-caret-down"></i>
-  </button>
-  <div class="c-dropdown__menu-wrapper">
-    <div class="c-dropdown__menu-inner">
-      <ul class="c-dropdown__menu">
-        <li class="c-dropdown__header">Options</li>
-        <li class="c-dropdown__menu-item">
-          <button class="c-dropdown__menu-link">Profile</button>
-        </li>
-        <li class="c-dropdown__menu-item">
-          <button class="c-dropdown__menu-link">Settings</button>
-        </li>
-        <li class="c-dropdown__divider"></li>
-        <li class="c-dropdown__menu-item">
-          <a href="#logout" class="c-dropdown__menu-link">Logout</a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
-
-<script>
-  // Auto-initialization
-  Atomix.initDropdowns();
-  
-  // Manual initialization
-  const dropdown = new Atomix.Dropdown(document.querySelector('.c-dropdown'), {
-    placement: 'bottom-start',
-    trigger: 'click',
-    offset: 4,
-    closeOnClickOutside: true,
-    closeOnEscape: true,
-    minWidth: '10rem',
-    maxHeight: '20rem'
-  });
-  
-  // API usage
-  dropdown.open();
-  dropdown.close();
-  dropdown.toggle();
-  dropdown.destroy();
-</script>
-```
-
-## Props (React)
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | ReactNode | - | The trigger element that will toggle the dropdown |
-| `menu` | ReactNode | - | The content of the dropdown menu |
-| `trigger` | 'click' \| 'hover' | 'click' | How the dropdown is triggered |
-| `placement` | DropdownPlacement | 'bottom-start' | The position of the dropdown relative to the trigger |
-| `defaultOpen` | boolean | false | Whether the dropdown is initially open |
-| `isOpen` | boolean | - | Controlled state of the dropdown |
-| `onOpenChange` | (isOpen: boolean) => void | - | Callback when the dropdown open state changes |
-| `offset` | number | 4 | Offset from the trigger element (in pixels) |
-| `closeOnClickOutside` | boolean | true | Whether to close the dropdown when clicking outside |
-| `closeOnEscape` | boolean | true | Whether to close the dropdown when pressing escape key |
-| `maxHeight` | string | - | Max height for the dropdown menu |
-| `minWidth` | string | '10rem' | Min width for the dropdown menu |
-| `variant` | ThemeColor | - | Color variant for the dropdown trigger |
-| `id` | string | - | Optional ID for the dropdown |
-| `className` | string | - | Additional CSS class for the dropdown |
-| `disabled` | boolean | false | Whether the dropdown is disabled |
-
-## DropdownItem Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | ReactNode | - | Item content |
-| `href` | string | - | URL if item is a link |
-| `active` | boolean | false | Whether item is active |
-| `disabled` | boolean | false | Whether item is disabled |
-| `icon` | ReactNode | - | Icon to display before item text |
-| `onClick` | (event) => void | - | Click handler |
-| `className` | string | - | Additional CSS class for the item |
-
-## Accessibility
-
-The Dropdown component is built with accessibility in mind:
-
-- Uses ARIA attributes to indicate expanded/collapsed state
-- Supports keyboard navigation for menu items (Arrow Up/Down, Home, End, Enter, Space, Escape)
-- Maintains sufficient color contrast in all states
-- Properly associates trigger elements with their dropdown menus
-
-## Placement Options
-
-The `placement` prop supports the following values:
-
-- `'top-start'` - Above the trigger, aligned with left edge
-- `'top-end'` - Above the trigger, aligned with right edge
-- `'bottom-start'` - Below the trigger, aligned with left edge
-- `'bottom-end'` - Below the trigger, aligned with right edge
-- `'left-start'` - Left of the trigger, aligned with top edge
-- `'left-end'` - Left of the trigger, aligned with bottom edge
-- `'right-start'` - Right of the trigger, aligned with top edge
-- `'right-end'` - Right of the trigger, aligned with bottom edge
-
-The dropdown will automatically adjust its placement if there's not enough space in the specified direction.

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

@@ -1,24 +0,0 @@
-import { Dropdown, createDropdown, initializeDropdowns } from './index';
-import type { DropdownOptions, DropdownPosition, DropdownTrigger } from './componentInteractions';
-
-// Setup global namespace for Atomix components
-if (typeof window !== 'undefined') {
-  // Initialize Atomix namespace if it doesn't exist
-  window.Atomix = window.Atomix || {};
-
-  // Add Dropdown component to global Atomix namespace
-  window.Atomix.Dropdown = {
-    create: createDropdown,
-    initialize: initializeDropdowns,
-    Dropdown,
-  };
-}
-
-export {
-  Dropdown,
-  createDropdown,
-  initializeDropdowns,
-  DropdownOptions,
-  DropdownPosition,
-  DropdownTrigger,
-};

package/src/components/Dropdown/scripts/componentInteractions.ts

@@ -1,39 +0,0 @@
-import { DROPDOWN } from '../../../lib/constants/components';
-
-/**
- * Dropdown position types
- */
-export type DropdownPosition =
-  | 'bottom-start'
-  | 'bottom-end'
-  | 'top-start'
-  | 'top-end'
-  | 'left-start'
-  | 'left-end'
-  | 'right-start'
-  | 'right-end';
-
-/**
- * Dropdown trigger types
- */
-export type DropdownTrigger = 'click' | 'hover';
-
-/**
- * Dropdown options interface
- */
-export interface DropdownOptions {
-  placement?: DropdownPosition;
-  trigger?: DropdownTrigger;
-  offset?: number;
-  closeOnClickOutside?: boolean;
-  closeOnEscape?: boolean;
-  minWidth?: string | number;
-  maxHeight?: string;
-}
-
-/**
- * Timer reference interface for hover delay
- */
-export interface TimerRef {
-  current: number | null;
-}