@shohojdhara/atomix 0.5.0 → 0.5.2

package/src/layouts/CssGrid/CssGrid.tsx

@@ -0,0 +1,215 @@
+import React, { forwardRef, HTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+export interface CssGridProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * The content to be rendered within the CSS Grid
+   */
+  children: ReactNode;
+  
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  
+  /**
+   * Grid template columns definition
+   */
+  templateColumns?: string;
+  
+  /**
+   * Grid template rows definition
+   */
+  templateRows?: string;
+  
+  /**
+   * Grid template areas definition
+   */
+  templateAreas?: string;
+  
+  /**
+   * Auto-placement algorithm
+   */
+  autoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
+  
+  /**
+   * Gap between grid items
+   */
+  gap?: string | number;
+  
+  /**
+   * Column gap
+   */
+  columnGap?: string | number;
+  
+  /**
+   * Row gap
+   */
+  rowGap?: string | number;
+  
+  /**
+   * Justify items (align items along row axis)
+   */
+  justifyItems?: 'start' | 'end' | 'center' | 'stretch';
+  
+  /**
+   * Align items (align items along column axis)
+   */
+  alignItems?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+  
+  /**
+   * Justify content (grid container alignment along row axis)
+   */
+  justifyContent?: 'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly';
+  
+  /**
+   * Align content (grid container alignment along column axis)
+   */
+  alignContent?: 'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly';
+  
+  /**
+   * Responsive column count
+   */
+  columns?: number | ResponsiveColumns;
+  
+  /**
+   * Minimum column width with auto-fit/auto-fill
+   */
+  minColumnWidth?: string;
+}
+
+export interface ResponsiveColumns {
+  /**
+   * Extra small screen columns
+   */
+  xs?: number;
+  
+  /**
+   * Small screen columns
+   */
+  sm?: number;
+  
+  /**
+   * Medium screen columns
+   */
+  md?: number;
+  
+  /**
+   * Large screen columns
+   */
+  lg?: number;
+  
+  /**
+   * Extra large screen columns
+   */
+  xl?: number;
+  
+  /**
+   * Extra extra large screen columns
+   */
+  xxl?: number;
+}
+
+/**
+ * CssGrid component for modern CSS Grid layouts with advanced features
+ * Provides native CSS Grid support with template areas, auto-placement, and responsive design
+ *
+ * @example
+ * ```tsx
+ * // Basic grid
+ * <CssGrid columns={3} gap="1rem">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </CssGrid>
+ * 
+ * // Template areas
+ * <CssGrid 
+ *   templateAreas={`
+ *     "header header header"
+ *     "sidebar content content"
+ *     "footer footer footer"
+ *   `}
+ *   gap="1rem"
+ * >
+ *   <div style={{ gridArea: "header" }}>Header</div>
+ *   <div style={{ gridArea: "sidebar" }}>Sidebar</div>
+ *   <div style={{ gridArea: "content" }}>Content</div>
+ *   <div style={{ gridArea: "footer" }}>Footer</div>
+ * </CssGrid>
+ * ```
+ */
+export const CssGrid = forwardRef<HTMLDivElement, CssGridProps>(
+  ({
+    children,
+    className = '',
+    templateColumns,
+    templateRows,
+    templateAreas,
+    autoFlow,
+    gap,
+    columnGap,
+    rowGap,
+    justifyItems,
+    alignItems,
+    justifyContent,
+    alignContent,
+    columns,
+    minColumnWidth,
+    style,
+    ...props
+  }, ref) => {
+    const gridStyle: CSSProperties = {
+      display: 'grid',
+      ...style
+    };
+
+    // Set grid template columns based on columns prop
+    if (columns) {
+      if (typeof columns === 'number') {
+        gridStyle.gridTemplateColumns = `repeat(${columns}, 1fr)`;
+      } else {
+        // Handle responsive columns through CSS classes
+      }
+    }
+
+    // Apply grid template definitions
+    if (templateColumns) gridStyle.gridTemplateColumns = templateColumns;
+    if (templateRows) gridStyle.gridTemplateRows = templateRows;
+    if (templateAreas) gridStyle.gridTemplateAreas = templateAreas;
+    if (autoFlow) gridStyle.gridAutoFlow = autoFlow;
+
+    // Apply gaps
+    if (gap) gridStyle.gap = typeof gap === 'number' ? `${gap}px` : gap;
+    if (columnGap) gridStyle.columnGap = typeof columnGap === 'number' ? `${columnGap}px` : columnGap;
+    if (rowGap) gridStyle.rowGap = typeof rowGap === 'number' ? `${rowGap}px` : rowGap;
+
+    // Apply alignment properties
+    if (justifyItems) gridStyle.justifyItems = justifyItems;
+    if (alignItems) gridStyle.alignItems = alignItems;
+    if (justifyContent) gridStyle.justifyContent = justifyContent;
+    if (alignContent) gridStyle.alignContent = alignContent;
+
+    // Handle min column width with auto-fit/auto-fill
+    if (minColumnWidth && !templateColumns) {
+      gridStyle.gridTemplateColumns = `repeat(auto-fit, minmax(${minColumnWidth}, 1fr))`;
+    }
+
+    const classes = ['o-css-grid'];
+    if (className) classes.push(className);
+
+    return (
+      <div 
+        ref={ref} 
+        className={classes.join(' ')} 
+        style={gridStyle}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+CssGrid.displayName = 'CssGrid';
+
+export default CssGrid;

package/src/layouts/CssGrid/index.ts

@@ -0,0 +1,8 @@
+/**
+ * @file CssGrid Component Entry Point
+ * @description Export for both React and vanilla JavaScript CSS Grid implementations
+ */
+
+export { CssGrid, type CssGridProps, type ResponsiveColumns } from './CssGrid';
+
+export default CssGrid;

package/src/layouts/CssGrid/scripts/CssGrid.js

@@ -0,0 +1,284 @@
+/**
+ * @file CssGrid - Vanilla JavaScript implementation of the CssGrid component
+ * @description Provides DOM manipulation for modern CSS Grid layouts
+ * @requires ../CssGrid.css (auto-generated)
+ */
+
+/**
+ * CSS Grid component class for modern grid layouts
+ */
+export class CssGrid {
+  /**
+   * Create a new CssGrid instance
+   * @param {Object} options - CSS Grid configuration options
+   * @param {HTMLElement} options.element - The container element
+   * @param {string} [options.className=''] - Additional CSS classes
+   * @param {string} [options.templateColumns] - Grid template columns definition
+   * @param {string} [options.templateRows] - Grid template rows definition
+   * @param {string} [options.templateAreas] - Grid template areas definition
+   * @param {'row'|'column'|'dense'|'row dense'|'column dense'} [options.autoFlow] - Auto-placement algorithm
+   * @param {string|number} [options.gap] - Gap between grid items
+   * @param {string|number} [options.columnGap] - Column gap
+   * @param {string|number} [options.rowGap] - Row gap
+   * @param {'start'|'end'|'center'|'stretch'} [options.justifyItems] - Justify items
+   * @param {'start'|'end'|'center'|'stretch'|'baseline'} [options.alignItems] - Align items
+   * @param {'start'|'end'|'center'|'stretch'|'space-around'|'space-between'|'space-evenly'} [options.justifyContent] - Justify content
+   * @param {'start'|'end'|'center'|'stretch'|'space-around'|'space-between'|'space-evenly'} [options.alignContent] - Align content
+   * @param {number|Object} [options.columns] - Responsive column count
+   * @param {string} [options.minColumnWidth] - Minimum column width
+   */
+  constructor(options) {
+    this.element = options.element;
+    this.options = {
+      className: options.className || '',
+      templateColumns: options.templateColumns,
+      templateRows: options.templateRows,
+      templateAreas: options.templateAreas,
+      autoFlow: options.autoFlow,
+      gap: options.gap,
+      columnGap: options.columnGap,
+      rowGap: options.rowGap,
+      justifyItems: options.justifyItems,
+      alignItems: options.alignItems,
+      justifyContent: options.justifyContent,
+      alignContent: options.alignContent,
+      columns: options.columns,
+      minColumnWidth: options.minColumnWidth,
+      ...options
+    };
+
+    this.init();
+  }
+
+  /**
+   * Initialize the CSS Grid component
+   */
+  init() {
+    this.applyStyles();
+  }
+
+  /**
+   * Apply CSS Grid styles based on options
+   */
+  applyStyles() {
+    const style = this.element.style;
+    
+    // Reset base styles
+    style.display = 'grid';
+    
+    // Apply template definitions
+    if (this.options.templateColumns) {
+      style.gridTemplateColumns = this.options.templateColumns;
+    }
+    
+    if (this.options.templateRows) {
+      style.gridTemplateRows = this.options.templateRows;
+    }
+    
+    if (this.options.templateAreas) {
+      style.gridTemplateAreas = this.options.templateAreas;
+    }
+    
+    if (this.options.autoFlow) {
+      style.gridAutoFlow = this.options.autoFlow;
+    }
+    
+    // Apply gaps
+    if (this.options.gap !== undefined) {
+      style.gap = typeof this.options.gap === 'number' 
+        ? `${this.options.gap}px` 
+        : this.options.gap;
+    }
+    
+    if (this.options.columnGap !== undefined) {
+      style.columnGap = typeof this.options.columnGap === 'number'
+        ? `${this.options.columnGap}px`
+        : this.options.columnGap;
+    }
+    
+    if (this.options.rowGap !== undefined) {
+      style.rowGap = typeof this.options.rowGap === 'number'
+        ? `${this.options.rowGap}px`
+        : this.options.rowGap;
+    }
+    
+    // Apply alignment properties
+    if (this.options.justifyItems) {
+      style.justifyItems = this.options.justifyItems;
+    }
+    
+    if (this.options.alignItems) {
+      style.alignItems = this.options.alignItems;
+    }
+    
+    if (this.options.justifyContent) {
+      style.justifyContent = this.options.justifyContent;
+    }
+    
+    if (this.options.alignContent) {
+      style.alignContent = this.options.alignContent;
+    }
+    
+    // Handle column configuration
+    if (this.options.columns) {
+      if (typeof this.options.columns === 'number') {
+        style.gridTemplateColumns = `repeat(${this.options.columns}, 1fr)`;
+      }
+    }
+    
+    // Handle min column width with auto-fit/auto-fill
+    if (this.options.minColumnWidth && !this.options.templateColumns) {
+      style.gridTemplateColumns = `repeat(auto-fit, minmax(${this.options.minColumnWidth}, 1fr))`;
+    }
+    
+    // Add CSS classes
+    const classes = ['o-css-grid'];
+    if (this.options.className) {
+      classes.push(this.options.className);
+    }
+    
+    this.element.className = classes.join(' ');
+  }
+
+  /**
+   * Update grid options and refresh styling
+   * @param {Object} newOptions - New configuration options
+   */
+  update(newOptions) {
+    this.options = { ...this.options, ...newOptions };
+    this.applyStyles();
+  }
+
+  /**
+   * Set grid template columns
+   * @param {string} templateColumns - Template columns definition
+   */
+  setTemplateColumns(templateColumns) {
+    this.update({ templateColumns });
+  }
+
+  /**
+   * Set grid template rows
+   * @param {string} templateRows - Template rows definition
+   */
+  setTemplateRows(templateRows) {
+    this.update({ templateRows });
+  }
+
+  /**
+   * Set grid template areas
+   * @param {string} templateAreas - Template areas definition
+   */
+  setTemplateAreas(templateAreas) {
+    this.update({ templateAreas });
+  }
+
+  /**
+   * Set grid gap
+   * @param {string|number} gap - Gap value
+   */
+  setGap(gap) {
+    this.update({ gap });
+  }
+
+  /**
+   * Set number of columns
+   * @param {number} columns - Number of columns
+   */
+  setColumns(columns) {
+    this.update({ columns });
+  }
+
+  /**
+   * Add a child element to the grid
+   * @param {HTMLElement} child - Child element to add
+   * @param {Object} [options] - Grid item options
+   * @param {number} [options.column] - Column position
+   * @param {number} [options.row] - Row position
+   * @param {string} [options.area] - Grid area name
+   */
+  addChild(child, options = {}) {
+    if (options.column) {
+      child.style.gridColumn = String(options.column);
+    }
+    
+    if (options.row) {
+      child.style.gridRow = String(options.row);
+    }
+    
+    if (options.area) {
+      child.style.gridArea = options.area;
+    }
+    
+    this.element.appendChild(child);
+  }
+
+  /**
+   * Reset grid to default state
+   */
+  reset() {
+    this.options = {
+      className: '',
+      templateColumns: undefined,
+      templateRows: undefined,
+      templateAreas: undefined,
+      autoFlow: undefined,
+      gap: undefined,
+      columnGap: undefined,
+      rowGap: undefined,
+      justifyItems: undefined,
+      alignItems: undefined,
+      justifyContent: undefined,
+      alignContent: undefined,
+      columns: undefined,
+      minColumnWidth: undefined
+    };
+    
+    this.applyStyles();
+  }
+
+  /**
+   * Destroy the grid instance and clean up
+   */
+  destroy() {
+    this.element.style.cssText = '';
+    this.element.className = '';
+    this.element = null;
+  }
+}
+
+/**
+ * Create a CSS Grid instance for a DOM element
+ * @param {HTMLElement} element - The DOM element to initialize as CSS Grid
+ * @param {Object} options - CSS Grid configuration options
+ * @returns {CssGrid} CSS Grid instance
+ */
+export function createCssGrid(element, options = {}) {
+  return new CssGrid({ element, ...options });
+}
+
+/**
+ * Initialize CSS Grid components on page load
+ * @param {string} [selector='[data-css-grid]'] - CSS selector for CSS Grid elements
+ * @param {Object} [defaultOptions={}] - Default CSS Grid options
+ */
+export function initCssGrids(selector = '[data-css-grid]', defaultOptions = {}) {
+  const elements = document.querySelectorAll(selector);
+  const grids = [];
+
+  elements.forEach(element => {
+    const options = {
+      ...defaultOptions,
+      ...(element.dataset.cssGridOptions ? JSON.parse(element.dataset.cssGridOptions) : {})
+    };
+
+    grids.push(createCssGrid(element, options));
+  });
+
+  return grids;
+}
+
+// Auto-initialize on DOM ready
+document.addEventListener('DOMContentLoaded', () => {
+  initCssGrids();
+});

package/src/layouts/CssGrid/scripts/index.js

@@ -0,0 +1,43 @@
+/**
+ * @file CssGrid Scripts Index
+ * @description Entry point for vanilla JavaScript CSS Grid implementation
+ */
+
+export * from './CssGrid.js';
+
+/**
+ * Initialize CSS Grid components on page load
+ * @param {string} [selector='[data-css-grid]'] - CSS selector for CSS Grid elements
+ * @param {Object} [defaultOptions={}] - Default CSS Grid options
+ */
+export function initCssGrids(selector = '[data-css-grid]', defaultOptions = {}) {
+  const elements = document.querySelectorAll(selector);
+  const grids = [];
+
+  elements.forEach(element => {
+    const options = {
+      ...defaultOptions,
+      ...(element.dataset.cssGridOptions ? JSON.parse(element.dataset.cssGridOptions) : {})
+    };
+
+    grids.push(CssGrid({ element, ...options }));
+  });
+
+  return {
+    grids,
+    destroy: () => {
+      grids.forEach(instance => {
+        if (instance && typeof instance.destroy === 'function') {
+          instance.destroy();
+        }
+      });
+    }
+  };
+}
+
+// Auto-initialize when imported in browser environment
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  document.addEventListener('DOMContentLoaded', () => {
+    initCssGrids();
+  });
+}

package/src/layouts/Grid/scripts/Container.js

@@ -0,0 +1,139 @@
+/**
+ * @file Container - Vanilla JavaScript implementation of the Container component
+ * @description Provides DOM manipulation for responsive container layouts
+ * @requires ../Grid.css (auto-generated)
+ */
+
+/**
+ * Container component class for responsive content constraints
+ */
+export class Container {
+  /**
+   * Create a new Container instance
+   * @param {Object} options - Container configuration options
+   * @param {HTMLElement} options.element - The container element
+   * @param {string} [options.className=''] - Additional CSS classes
+   * @param {'fluid'|'sm'|'md'|'lg'|'xl'|'xxl'} [options.size] - Container size
+   * @param {boolean} [options.noPadding=false] - Remove container padding
+   */
+  constructor(options) {
+    this.element = options.element;
+    this.options = {
+      className: options.className || '',
+      size: options.size,
+      noPadding: options.noPadding || false,
+      ...options
+    };
+
+    this.init();
+  }
+
+  /**
+   * Initialize the container component
+   */
+  init() {
+    this.updateClasses();
+  }
+
+  /**
+   * Update CSS classes based on current options
+   */
+  updateClasses() {
+    const classes = ['o-container'];
+
+    if (this.options.size) {
+      classes.push(`o-container--${this.options.size}`);
+    }
+
+    if (this.options.noPadding) {
+      classes.push('o-container--no-padding');
+    }
+
+    if (this.options.className) {
+      classes.push(this.options.className);
+    }
+
+    this.element.className = classes.join(' ');
+  }
+
+  /**
+   * Update container options and refresh styling
+   * @param {Object} newOptions - New configuration options
+   */
+  update(newOptions) {
+    this.options = { ...this.options, ...newOptions };
+    this.updateClasses();
+  }
+
+  /**
+   * Set container size
+   * @param {'fluid'|'sm'|'md'|'lg'|'xl'|'xxl'} size - Container size
+   */
+  setSize(size) {
+    this.update({ size });
+  }
+
+  /**
+   * Toggle padding
+   * @param {boolean} noPadding - Whether to remove padding
+   */
+  setNoPadding(noPadding) {
+    this.update({ noPadding });
+  }
+
+  /**
+   * Reset container to default state
+   */
+  reset() {
+    this.options = {
+      className: '',
+      size: undefined,
+      noPadding: false
+    };
+    this.updateClasses();
+  }
+
+  /**
+   * Destroy the container instance and clean up
+   */
+  destroy() {
+    this.element.className = '';
+    this.element = null;
+  }
+}
+
+/**
+ * Create a container instance for a DOM element
+ * @param {HTMLElement} element - The DOM element to initialize as container
+ * @param {Object} options - Container configuration options
+ * @returns {Container} Container instance
+ */
+export function createContainer(element, options = {}) {
+  return new Container({ element, ...options });
+}
+
+/**
+ * Initialize container components on page load
+ * @param {string} [selector='[data-container]'] - CSS selector for container elements
+ * @param {Object} [defaultOptions={}] - Default container options
+ */
+export function initContainers(selector = '[data-container]', defaultOptions = {}) {
+  const elements = document.querySelectorAll(selector);
+  const containers = [];
+
+  elements.forEach(element => {
+    const options = {
+      ...defaultOptions,
+      ...(element.dataset.containerOptions ? JSON.parse(element.dataset.containerOptions) : {})
+    };
+
+    containers.push(createContainer(element, options));
+  });
+
+  return containers;
+}
+
+// Auto-initialize on DOM ready
+document.addEventListener('DOMContentLoaded', () => {
+  initContainers();
+});