@shohojdhara/atomix 0.1.17 → 0.1.18

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

@@ -0,0 +1,415 @@
+import { EDGE_PANEL } from '../../../lib/constants/components';
+
+/**
+ * Interface for EdgePanel instance
+ */
+interface EdgePanelInstance {
+  openPanel: () => void;
+  closePanel: () => void;
+  destroy: () => void;
+}
+
+/**
+ * Get transform value for a given position
+ * @param position - Panel position
+ * @returns CSS transform value
+ */
+function getTransformValue(position: string): string {
+  const validPositions = ['start', 'end', 'top', 'bottom'] as const;
+  type Position = (typeof validPositions)[number];
+
+  // Type guard to check if position is valid
+  const isValidPosition = (pos: string): pos is Position =>
+    validPositions.includes(pos as Position);
+
+  if (isValidPosition(position)) {
+    return EDGE_PANEL.TRANSFORM_VALUES[position];
+  }
+
+  // Default to start if position is invalid
+  return EDGE_PANEL.TRANSFORM_VALUES.start;
+}
+
+/**
+ * Class representing an EdgePanel component
+ */
+class EdgePanel implements EdgePanelInstance {
+  private $panel: HTMLElement;
+  private $container: HTMLElement | null = null;
+  private $backdrop: HTMLElement | null = null;
+  private $closeButton: HTMLElement | null = null;
+  private $trigger: HTMLElement | null = null;
+  private isOpen: boolean = false;
+  private position: string;
+  private mode: string;
+  private closeOnBackdropClick: boolean;
+  private closeOnEscape: boolean;
+  private hasBackdrop: boolean;
+  private animationDuration: number = EDGE_PANEL.ANIMATION_DURATION;
+  private resizeHandler: (() => void) | null = null;
+
+  /**
+   * Creates an instance of EdgePanel
+   * @param element - The panel container element
+   */
+  constructor(element: HTMLElement | string) {
+    this.$panel =
+      typeof element === 'string' ? (document.querySelector(element) as HTMLElement) : element;
+
+    if (!this.$panel) {
+      throw new Error('EdgePanel: Panel element not found');
+    }
+
+    this.position = this.$panel.dataset.position || 'start';
+    this.mode = this.$panel.dataset.mode || 'slide';
+    this.closeOnBackdropClick = this.$panel.dataset.closeOnBackdropClick !== 'false';
+    this.closeOnEscape = this.$panel.dataset.closeOnEscape !== 'false';
+    this.hasBackdrop = this.$panel.dataset.backdrop !== 'false';
+
+    this._initialize();
+  }
+
+  /**
+   * Initialize the edge panel component
+   */
+  private _initialize(): void {
+    this._initializeElements();
+    if (!this._validateElements()) return;
+    this._setInitialStyles();
+    this._bindEvents();
+  }
+
+  /**
+   * Initialize DOM elements
+   */
+  private _initializeElements(): void {
+    this.$container = this.$panel.querySelector(EDGE_PANEL.SELECTORS.CONTAINER);
+    this.$backdrop = this.$panel.querySelector(EDGE_PANEL.SELECTORS.BACKDROP);
+    this.$closeButton = this.$panel.querySelector(EDGE_PANEL.SELECTORS.CLOSE);
+
+    // Find potential external trigger button(s)
+    const panelId = this.$panel.id;
+    if (panelId) {
+      this.$trigger = document.querySelector(`[data-target="#${panelId}"]`);
+    }
+  }
+
+  /**
+   * Validate required elements exist
+   * @returns Whether all required elements exist
+   */
+  private _validateElements(): boolean {
+    if (!this.$container) {
+      console.warn('EdgePanel: Container element not found', this.$panel);
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * Set initial styles for the panel
+   */
+  private _setInitialStyles(): void {
+    if (!this.$container) return;
+
+    this.$panel.style.display = 'none';
+
+    if (this.mode === 'slide' || this.mode === 'push') {
+      const transform = getTransformValue(this.position);
+      this.$container.style.transform = transform;
+    }
+
+    if (!this.hasBackdrop && this.$backdrop) {
+      this.$backdrop.style.display = 'none';
+    }
+  }
+
+  /**
+   * Bind event listeners
+   */
+  private _bindEvents(): void {
+    if (this.$trigger) {
+      this.$trigger.addEventListener('click', this._handleTriggerClick.bind(this));
+    }
+
+    if (this.$closeButton) {
+      this.$closeButton.addEventListener('click', this._handleCloseClick.bind(this));
+    }
+
+    if (this.$backdrop && this.closeOnBackdropClick) {
+      this.$backdrop.addEventListener('click', this._handleBackdropClick.bind(this));
+    }
+
+    if (this.closeOnEscape) {
+      document.addEventListener('keydown', this._handleEscapeKey.bind(this));
+    }
+
+    if (this.mode === 'push') {
+      this.resizeHandler = this._handleResize.bind(this);
+      window.addEventListener('resize', this.resizeHandler);
+    }
+  }
+
+  /**
+   * Handle trigger button click
+   */
+  private _handleTriggerClick(event: Event): void {
+    event.preventDefault();
+    this.openPanel();
+  }
+
+  /**
+   * Handle close button click
+   */
+  private _handleCloseClick(event: Event): void {
+    event.preventDefault();
+    this.closePanel();
+  }
+
+  /**
+   * Handle backdrop click
+   */
+  private _handleBackdropClick(event: Event): void {
+    if (event.target === this.$backdrop) {
+      this.closePanel();
+    }
+  }
+
+  /**
+   * Handle escape key press
+   */
+  private _handleEscapeKey(event: KeyboardEvent): void {
+    if (event.key === 'Escape' && this.isOpen) {
+      this.closePanel();
+    }
+  }
+
+  /**
+   * Handle window resize
+   */
+  private _handleResize(): void {
+    if (this.isOpen && this.mode === 'push') {
+      this._adjustBodyPadding();
+    }
+  }
+
+  /**
+   * Adjust body padding when using push mode
+   */
+  private _adjustBodyPadding(): void {
+    if (!this.$container) return;
+
+    const size =
+      this.position === 'top' || this.position === 'bottom'
+        ? this.$container.clientHeight
+        : this.$container.clientWidth;
+
+    // Map position to CSS padding property
+    let paddingProperty: string;
+    switch (this.position) {
+      case 'start':
+        paddingProperty = 'paddingLeft';
+        break;
+      case 'end':
+        paddingProperty = 'paddingRight';
+        break;
+      default:
+        // For top/bottom, capitalize first letter
+        paddingProperty = `padding${this.position.charAt(0).toUpperCase() + this.position.slice(1)}`;
+    }
+
+    document.body.style[paddingProperty as any] = `${size}px`;
+    document.body.classList.add('is-pushed');
+  }
+
+  /**
+   * Reset body padding
+   */
+  private _resetBodyPadding(): void {
+    // Map position to CSS padding property
+    let paddingProperty: string;
+    switch (this.position) {
+      case 'start':
+        paddingProperty = 'paddingLeft';
+        break;
+      case 'end':
+        paddingProperty = 'paddingRight';
+        break;
+      default:
+        // For top/bottom, capitalize first letter
+        paddingProperty = `padding${this.position.charAt(0).toUpperCase() + this.position.slice(1)}`;
+    }
+
+    document.body.style[paddingProperty as any] = '';
+    document.body.classList.remove('is-pushed');
+  }
+
+  /**
+   * Open the panel
+   */
+  public openPanel(): void {
+    if (this.isOpen) return;
+
+    // First display the panel
+    this.$panel.style.display = 'block';
+
+    // Force a reflow before animations (skip for 'none' mode)
+    if (this.mode !== 'none') {
+      void this.$panel.offsetHeight;
+    }
+
+    // Add the open class to the panel
+    this.$panel.classList.add(EDGE_PANEL.CLASSES.IS_OPEN);
+    document.body.classList.add('is-edgepanel-open');
+
+    // Add animation class to container
+    if (this.$container) {
+      // Only add animation if not in 'none' mode
+      if (this.mode !== 'none') {
+        // Add animation class first
+        this.$container.classList.add('is-animating');
+
+        // Remove animation class after animation completes
+        const container = this.$container; // Capture for use in setTimeout
+        setTimeout(() => {
+          if (container) {
+            container.classList.remove('is-animating');
+          }
+        }, this.animationDuration);
+      }
+
+      // Set transform immediately
+      this.$container.style.transform = 'translate(0)';
+    }
+
+    if (this.mode === 'push') {
+      this._adjustBodyPadding();
+    }
+
+    this.isOpen = true;
+
+    // Fire a custom event
+    this.$panel.dispatchEvent(new CustomEvent('edgepanel:open', { bubbles: true }));
+  }
+
+  /**
+   * Close the panel
+   */
+  public closePanel(): void {
+    if (!this.isOpen) return;
+
+    if (this.$container) {
+      // Only add animation class if not in 'none' mode
+      if (this.mode !== 'none' && (this.mode === 'slide' || this.mode === 'push')) {
+        // Add the animation out class first
+        this.$container.classList.add('is-animating-out');
+
+        // Remove animation class after animation completes
+        const container = this.$container;
+        setTimeout(() => {
+          if (container) {
+            container.classList.remove('is-animating-out');
+          }
+        }, this.animationDuration);
+      }
+
+      // Set transform
+      this.$container.style.transform = getTransformValue(this.position);
+    }
+
+    this.$panel.classList.remove(EDGE_PANEL.CLASSES.IS_OPEN);
+
+    if (this.mode === 'push') {
+      this._resetBodyPadding();
+    }
+
+    // Fire a custom event
+    this.$panel.dispatchEvent(new CustomEvent('edgepanel:close', { bubbles: true }));
+
+    // Wait for animation to complete before hiding
+    const hideDelay = this.mode === 'none' ? 0 : this.animationDuration;
+
+    setTimeout(() => {
+      document.body.classList.remove('is-edgepanel-open');
+      this.$panel.style.display = 'none';
+      this.isOpen = false;
+    }, hideDelay);
+  }
+
+  /**
+   * Clean up event listeners
+   */
+  public destroy(): void {
+    if (this.$trigger) {
+      this.$trigger.removeEventListener('click', this._handleTriggerClick.bind(this));
+    }
+
+    if (this.$closeButton) {
+      this.$closeButton.removeEventListener('click', this._handleCloseClick.bind(this));
+    }
+
+    if (this.$backdrop && this.closeOnBackdropClick) {
+      this.$backdrop.removeEventListener('click', this._handleBackdropClick.bind(this));
+    }
+
+    document.removeEventListener('keydown', this._handleEscapeKey.bind(this));
+
+    if (this.resizeHandler) {
+      window.removeEventListener('resize', this.resizeHandler);
+    }
+
+    if (this.isOpen) {
+      document.body.classList.remove('is-edgepanel-open');
+      if (this.mode === 'push') {
+        this._resetBodyPadding();
+      }
+    }
+  }
+}
+
+/**
+ * Initialize all edge panels in the document
+ * @returns Array of edge panel instances
+ */
+export function initializeEdgePanels(): EdgePanelInstance[] {
+  const panelInstances: EdgePanelInstance[] = [];
+  const $panels = document.querySelectorAll<HTMLElement>(EDGE_PANEL.SELECTORS.PANEL);
+
+  if (!$panels.length) return panelInstances;
+
+  $panels.forEach($panel => {
+    try {
+      // Skip if already initialized
+      if (($panel as any).edgePanelInstance) return;
+
+      const instance = new EdgePanel($panel);
+      // Store instance on DOM element for reference
+      ($panel as any).edgePanelInstance = instance;
+      panelInstances.push(instance);
+    } catch (error) {
+      console.error('Error initializing edge panel:', error);
+    }
+  });
+
+  return panelInstances;
+}
+
+// Export constants for use in HTML
+export const SELECTORS = EDGE_PANEL.SELECTORS;
+export const CLASSES = EDGE_PANEL.CLASSES;
+export const POSITIONS = {
+  START: 'start',
+  END: 'end',
+  TOP: 'top',
+  BOTTOM: 'bottom',
+};
+export const MODES = {
+  SLIDE: 'slide',
+  PUSH: 'push',
+  NONE: 'none',
+};
+
+// Export component interactions
+export * from './edgePanelInteractions';
+
+export default EdgePanel;

package/src/components/Form/Checkbox.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Checkbox } from './Checkbox';
+
+const meta = {
+  title: 'Components/Form/Checkbox',
+  component: Checkbox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Checkbox label text',
+    },
+    checked: {
+      control: 'boolean',
+      description: 'Whether the checkbox is checked',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the checkbox is disabled',
+    },
+    invalid: {
+      control: 'boolean',
+      description: 'Whether the checkbox is invalid',
+    },
+    valid: {
+      control: 'boolean',
+      description: 'Whether the checkbox is valid',
+    },
+    indeterminate: {
+      control: 'boolean',
+      description: 'Whether the checkbox is in indeterminate state',
+    },
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Basic checkbox
+export const Basic: Story = {
+  args: {
+    label: 'Accept terms and conditions',
+  },
+};
+
+// Checked state
+export const Checked: Story = {
+  args: {
+    label: 'Accept terms and conditions',
+    checked: true,
+  },
+};
+
+// Checkbox states
+export const States: Story = {
+  render: args => (
+    <div className="u-d-flex u-flex-column u-gap-3">
+      <Checkbox label="Default checkbox" />
+      <Checkbox label="Checked checkbox" checked />
+      <Checkbox label="Disabled checkbox" disabled />
+      <Checkbox label="Disabled and checked checkbox" disabled checked />
+      <Checkbox label="Valid checkbox" valid checked />
+      <Checkbox label="Invalid checkbox" invalid />
+      <Checkbox label="Indeterminate checkbox" indeterminate />
+    </div>
+  ),
+};
+
+// Without label
+export const WithoutLabel: Story = {
+  args: {
+    ariaLabel: 'Checkbox without visible label',
+  },
+};

package/src/components/Form/Checkbox.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { CheckboxProps } from '../../lib/types/components';
+import { useCheckbox } from '../../lib/composables/useCheckbox';
+
+/**
+ * Checkbox - A component for checkbox inputs
+ */
+export const Checkbox: React.FC<CheckboxProps> = ({
+  label,
+  checked = false,
+  onChange,
+  className = '',
+  disabled = false,
+  required = false,
+  id,
+  name,
+  value,
+  invalid = false,
+  valid = false,
+  indeterminate = false,
+  ariaLabel,
+  ariaDescribedBy,
+}) => {
+  const { generateCheckboxClass, checkboxRef } = useCheckbox({
+    indeterminate,
+    disabled,
+    invalid,
+    valid,
+  });
+
+  const checkboxClass = generateCheckboxClass({
+    className,
+    disabled,
+    invalid,
+    valid,
+    indeterminate,
+  });
+
+  return (
+    <div className={checkboxClass}>
+      <input
+        ref={checkboxRef}
+        type="checkbox"
+        className="c-checkbox__input"
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        required={required}
+        id={id}
+        name={name}
+        value={value}
+        aria-label={!label ? ariaLabel : undefined}
+        aria-describedby={ariaDescribedBy}
+        aria-invalid={invalid}
+      />
+      {label && (
+        <label className="c-checkbox__label" htmlFor={id}>
+          {label}
+        </label>
+      )}
+    </div>
+  );
+};
+
+export type { CheckboxProps };
+
+Checkbox.displayName = 'Checkbox';
+
+export default Checkbox;