@shohojdhara/atomix 0.5.0 → 0.5.2

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

@@ -0,0 +1,184 @@
+/**
+ * @file Grid - Vanilla JavaScript implementation of the Grid component
+ * @description Provides DOM manipulation for grid layouts with responsive alignment controls
+ * @requires ../Grid.css (auto-generated)
+ */
+
+/**
+ * Grid component class for responsive layout management
+ */
+export class Grid {
+  /**
+   * Create a new Grid instance
+   * @param {Object} options - Grid configuration options
+   * @param {HTMLElement} options.element - The container element
+   * @param {string} [options.className=''] - Additional CSS classes
+   * @param {'start'|'end'|'center'|'between'|'around'|'evenly'} [options.justifyContent] - Horizontal alignment
+   * @param {'start'|'end'|'center'|'baseline'|'stretch'} [options.alignItems] - Vertical alignment
+   * @param {boolean} [options.noGutters=false] - Remove gutters between columns
+   * @param {'row'|'column'|'row-reverse'|'column-reverse'} [options.direction] - Flex direction
+   * @param {'nowrap'|'wrap'|'wrap-reverse'} [options.wrap] - Flex wrap behavior
+   */
+  constructor(options) {
+    this.element = options.element;
+    this.options = {
+      className: options.className || '',
+      justifyContent: options.justifyContent,
+      alignItems: options.alignItems,
+      noGutters: options.noGutters || false,
+      direction: options.direction,
+      wrap: options.wrap,
+      ...options
+    };
+
+    this.init();
+  }
+
+  /**
+   * Initialize the grid component
+   */
+  init() {
+    this.updateClasses();
+  }
+
+  /**
+   * Update CSS classes based on current options
+   */
+  updateClasses() {
+    const classes = ['o-grid'];
+
+    if (this.options.justifyContent) {
+      classes.push(`u-justify-content-${this.options.justifyContent}`);
+    }
+
+    if (this.options.alignItems) {
+      classes.push(`u-align-items-${this.options.alignItems}`);
+    }
+
+    if (this.options.noGutters) {
+      classes.push('o-grid--no-gutters');
+    }
+
+    if (this.options.direction) {
+      classes.push(`u-flex-direction-${this.options.direction}`);
+    }
+
+    if (this.options.wrap) {
+      classes.push(`u-flex-wrap-${this.options.wrap}`);
+    }
+
+    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.updateClasses();
+  }
+
+  /**
+   * Set horizontal alignment
+   * @param {'start'|'end'|'center'|'between'|'around'|'evenly'} alignment - Horizontal alignment
+   */
+  setJustifyContent(alignment) {
+    this.update({ justifyContent: alignment });
+  }
+
+  /**
+   * Set vertical alignment
+   * @param {'start'|'end'|'center'|'baseline'|'stretch'} alignment - Vertical alignment
+   */
+  setAlignItems(alignment) {
+    this.update({ alignItems: alignment });
+  }
+
+  /**
+   * Toggle gutters
+   * @param {boolean} noGutters - Whether to remove gutters
+   */
+  setNoGutters(noGutters) {
+    this.update({ noGutters });
+  }
+
+  /**
+   * Set flex direction
+   * @param {'row'|'column'|'row-reverse'|'column-reverse'} direction - Flex direction
+   */
+  setDirection(direction) {
+    this.update({ direction });
+  }
+
+  /**
+   * Set flex wrap behavior
+   * @param {'nowrap'|'wrap'|'wrap-reverse'} wrap - Wrap behavior
+   */
+  setWrap(wrap) {
+    this.update({ wrap });
+  }
+
+  /**
+   * Reset grid to default state
+   */
+  reset() {
+    this.options = {
+      className: '',
+      justifyContent: undefined,
+      alignItems: undefined,
+      noGutters: false,
+      direction: undefined,
+      wrap: undefined
+    };
+    this.updateClasses();
+  }
+
+  /**
+   * Destroy the grid instance and clean up
+   */
+  destroy() {
+    this.element.className = '';
+    this.element = null;
+  }
+}
+
+/**
+ * Create a grid instance for a DOM element
+ * @param {HTMLElement} element - The DOM element to initialize as grid
+ * @param {Object} options - Grid configuration options
+ * @returns {Grid} Grid instance
+ */
+export function createGrid(element, options = {}) {
+  return new Grid({ element, ...options });
+}
+
+/**
+ * Initialize grid components on page load
+ * @param {string} [selector='[data-grid]'] - CSS selector for grid elements
+ * @param {Object} [defaultOptions={}] - Default grid options
+ */
+export function initGrids(selector = '[data-grid]', defaultOptions = {}) {
+  const elements = document.querySelectorAll(selector);
+  const grids = [];
+
+  elements.forEach(element => {
+    const options = {
+      ...defaultOptions,
+      ...(element.dataset.gridOptions ? JSON.parse(element.dataset.gridOptions) : {})
+    };
+
+    grids.push(createGrid(element, options));
+  });
+
+  return grids;
+}
+
+// Auto-initialize on DOM ready
+document.addEventListener('DOMContentLoaded', () => {
+  initGrids();
+});

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

@@ -0,0 +1,273 @@
+/**
+ * @file GridCol - Vanilla JavaScript implementation of the GridCol component
+ * @description Provides DOM manipulation for grid columns with responsive sizing and offset controls
+ * @requires ../Grid.css (auto-generated)
+ */
+
+/**
+ * Grid column component class for responsive column management
+ */
+export class GridCol {
+  /**
+   * Create a new GridCol instance
+   * @param {Object} options - Grid column configuration options
+   * @param {HTMLElement} options.element - The column element
+   * @param {string} [options.className=''] - Additional CSS classes
+   * @param {number|'auto'|boolean} [options.xs] - Extra small breakpoint size
+   * @param {number|'auto'|boolean} [options.sm] - Small breakpoint size
+   * @param {number|'auto'|boolean} [options.md] - Medium breakpoint size
+   * @param {number|'auto'|boolean} [options.lg] - Large breakpoint size
+   * @param {number|'auto'|boolean} [options.xl] - Extra large breakpoint size
+   * @param {number|'auto'|boolean} [options.xxl] - Extra extra large breakpoint size
+   * @param {number} [options.offsetXs] - Extra small offset
+   * @param {number} [options.offsetSm] - Small offset
+   * @param {number} [options.offsetMd] - Medium offset
+   * @param {number} [options.offsetLg] - Large offset
+   * @param {number} [options.offsetXl] - Extra large offset
+   * @param {number} [options.offsetXxl] - Extra extra large offset
+   * @param {boolean} [options.grow] - Flex grow property
+   * @param {boolean} [options.shrink] - Flex shrink property
+   * @param {string} [options.basis] - Flex basis property
+   * @param {'start'|'end'|'center'|'baseline'|'stretch'} [options.align] - Column alignment
+   */
+  constructor(options) {
+    this.element = options.element;
+    this.options = {
+      className: options.className || '',
+      xs: options.xs,
+      sm: options.sm,
+      md: options.md,
+      lg: options.lg,
+      xl: options.xl,
+      xxl: options.xxl,
+      offsetXs: options.offsetXs,
+      offsetSm: options.offsetSm,
+      offsetMd: options.offsetMd,
+      offsetLg: options.offsetLg,
+      offsetXl: options.offsetXl,
+      offsetXxl: options.offsetXxl,
+      grow: options.grow,
+      shrink: options.shrink,
+      basis: options.basis,
+      align: options.align,
+      ...options
+    };
+
+    this.init();
+  }
+
+  /**
+   * Initialize the grid column component
+   */
+  init() {
+    this.updateClasses();
+  }
+
+  /**
+   * Process responsive column sizing prop
+   * @param {number|'auto'|boolean} value - The prop value
+   * @param {string} breakpoint - The breakpoint name
+   * @returns {string|null} CSS class or null
+   */
+  processResponsiveProp(value, breakpoint) {
+    if (value === undefined || value === false) {
+      return null;
+    }
+
+    // Handle boolean values
+    if (value === true) {
+      return breakpoint === 'xs' ? 'o-grid__col--auto' : `o-grid__col--${breakpoint}-auto`;
+    }
+
+    // Handle string/number values
+    if (breakpoint === 'xs') {
+      return value === 'auto' ? 'o-grid__col--auto' : `o-grid__col--${value}`;
+    } else {
+      return value === 'auto' ? `o-grid__col--${breakpoint}-auto` : `o-grid__col--${breakpoint}-${value}`;
+    }
+  }
+
+  /**
+   * Update CSS classes based on current options
+   */
+  updateClasses() {
+    const isDefaultAuto = !this.options.xs && !this.options.sm && !this.options.md && 
+                         !this.options.lg && !this.options.xl && !this.options.xxl;
+    
+    const classes = isDefaultAuto ? ['o-grid__col', 'o-grid__col--auto'] : ['o-grid__col'];
+
+    // Add column size classes
+    const sizeClasses = [
+      this.processResponsiveProp(this.options.xs, 'xs'),
+      this.processResponsiveProp(this.options.sm, 'sm'),
+      this.processResponsiveProp(this.options.md, 'md'),
+      this.processResponsiveProp(this.options.lg, 'lg'),
+      this.processResponsiveProp(this.options.xl, 'xl'),
+      this.processResponsiveProp(this.options.xxl, 'xxl')
+    ];
+
+    sizeClasses.forEach(cls => {
+      if (cls) classes.push(cls);
+    });
+
+    // Add offset classes
+    if (this.options.offsetXs) classes.push(`o-grid__offset--${this.options.offsetXs}`);
+    if (this.options.offsetSm) classes.push(`o-grid__offset--sm-${this.options.offsetSm}`);
+    if (this.options.offsetMd) classes.push(`o-grid__offset--md-${this.options.offsetMd}`);
+    if (this.options.offsetLg) classes.push(`o-grid__offset--lg-${this.options.offsetLg}`);
+    if (this.options.offsetXl) classes.push(`o-grid__offset--xl-${this.options.offsetXl}`);
+    if (this.options.offsetXxl) classes.push(`o-grid__offset--xxl-${this.options.offsetXxl}`);
+
+    // Add flex properties
+    if (this.options.grow !== undefined) {
+      classes.push(this.options.grow ? 'u-flex-grow-1' : 'u-flex-grow-0');
+    }
+
+    if (this.options.shrink !== undefined) {
+      classes.push(this.options.shrink ? 'u-flex-shrink-1' : 'u-flex-shrink-0');
+    }
+
+    if (this.options.basis) {
+      classes.push(`u-flex-basis-${this.options.basis}`);
+    }
+
+    if (this.options.align) {
+      classes.push(`u-align-self-${this.options.align}`);
+    }
+
+    if (this.options.className) {
+      classes.push(this.options.className);
+    }
+
+    this.element.className = classes.join(' ');
+  }
+
+  /**
+   * Update column options and refresh styling
+   * @param {Object} newOptions - New configuration options
+   */
+  update(newOptions) {
+    this.options = { ...this.options, ...newOptions };
+    this.updateClasses();
+  }
+
+  /**
+   * Set column size for a specific breakpoint
+   * @param {string} breakpoint - Breakpoint name (xs, sm, md, lg, xl, xxl)
+   * @param {number|'auto'|boolean} size - Column size
+   */
+  setSize(breakpoint, size) {
+    this.update({ [breakpoint]: size });
+  }
+
+  /**
+   * Set column offset for a specific breakpoint
+   * @param {string} breakpoint - Breakpoint name (xs, sm, md, lg, xl, xxl)
+   * @param {number} offset - Offset value
+   */
+  setOffset(breakpoint, offset) {
+    this.update({ [`offset${breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)}`]: offset });
+  }
+
+  /**
+   * Set flex grow property
+   * @param {boolean} grow - Whether to grow
+   */
+  setGrow(grow) {
+    this.update({ grow });
+  }
+
+  /**
+   * Set flex shrink property
+   * @param {boolean} shrink - Whether to shrink
+   */
+  setShrink(shrink) {
+    this.update({ shrink });
+  }
+
+  /**
+   * Set flex basis property
+   * @param {string} basis - Flex basis value
+   */
+  setBasis(basis) {
+    this.update({ basis });
+  }
+
+  /**
+   * Set column alignment
+   * @param {'start'|'end'|'center'|'baseline'|'stretch'} align - Alignment value
+   */
+  setAlign(align) {
+    this.update({ align });
+  }
+
+  /**
+   * Reset column to default state
+   */
+  reset() {
+    this.options = {
+      className: '',
+      xs: undefined,
+      sm: undefined,
+      md: undefined,
+      lg: undefined,
+      xl: undefined,
+      xxl: undefined,
+      offsetXs: undefined,
+      offsetSm: undefined,
+      offsetMd: undefined,
+      offsetLg: undefined,
+      offsetXl: undefined,
+      offsetXxl: undefined,
+      grow: undefined,
+      shrink: undefined,
+      basis: undefined,
+      align: undefined
+    };
+    this.updateClasses();
+  }
+
+  /**
+   * Destroy the column instance and clean up
+   */
+  destroy() {
+    this.element.className = '';
+    this.element = null;
+  }
+}
+
+/**
+ * Create a grid column instance for a DOM element
+ * @param {HTMLElement} element - The DOM element to initialize as grid column
+ * @param {Object} options - Grid column configuration options
+ * @returns {GridCol} Grid column instance
+ */
+export function createGridCol(element, options = {}) {
+  return new GridCol({ element, ...options });
+}
+
+/**
+ * Initialize grid columns on page load
+ * @param {string} [selector='[data-grid-col]'] - CSS selector for grid column elements
+ * @param {Object} [defaultOptions={}] - Default grid column options
+ */
+export function initGridCols(selector = '[data-grid-col]', defaultOptions = {}) {
+  const elements = document.querySelectorAll(selector);
+  const columns = [];
+
+  elements.forEach(element => {
+    const options = {
+      ...defaultOptions,
+      ...(element.dataset.gridColOptions ? JSON.parse(element.dataset.gridColOptions) : {})
+    };
+
+    columns.push(createGridCol(element, options));
+  });
+
+  return columns;
+}
+
+// Auto-initialize on DOM ready
+document.addEventListener('DOMContentLoaded', () => {
+  initGridCols();
+});

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

@@ -0,0 +1,154 @@
+/**
+ * @file Row - Vanilla JavaScript implementation of the Row component
+ * @description Provides DOM manipulation for grid rows with alignment controls
+ * @requires ../Grid.css (auto-generated)
+ */
+
+/**
+ * Row component class for responsive row management
+ */
+export class Row {
+  /**
+   * Create a new Row instance
+   * @param {Object} options - Row configuration options
+   * @param {HTMLElement} options.element - The row element
+   * @param {string} [options.className=''] - Additional CSS classes
+   * @param {'start'|'end'|'center'|'between'|'around'|'evenly'} [options.justifyContent] - Horizontal alignment
+   * @param {'start'|'end'|'center'|'baseline'|'stretch'} [options.alignItems] - Vertical alignment
+   * @param {boolean} [options.noGutters=false] - Remove gutters between columns
+   */
+  constructor(options) {
+    this.element = options.element;
+    this.options = {
+      className: options.className || '',
+      justifyContent: options.justifyContent,
+      alignItems: options.alignItems,
+      noGutters: options.noGutters || false,
+      ...options
+    };
+
+    this.init();
+  }
+
+  /**
+   * Initialize the row component
+   */
+  init() {
+    this.updateClasses();
+  }
+
+  /**
+   * Update CSS classes based on current options
+   */
+  updateClasses() {
+    const classes = ['o-grid'];
+
+    if (this.options.justifyContent) {
+      classes.push(`u-justify-content-${this.options.justifyContent}`);
+    }
+
+    if (this.options.alignItems) {
+      classes.push(`u-align-items-${this.options.alignItems}`);
+    }
+
+    if (this.options.noGutters) {
+      classes.push('o-grid--no-gutters');
+    }
+
+    if (this.options.className) {
+      classes.push(this.options.className);
+    }
+
+    this.element.className = classes.join(' ');
+  }
+
+  /**
+   * Update row options and refresh styling
+   * @param {Object} newOptions - New configuration options
+   */
+  update(newOptions) {
+    this.options = { ...this.options, ...newOptions };
+    this.updateClasses();
+  }
+
+  /**
+   * Set horizontal alignment
+   * @param {'start'|'end'|'center'|'between'|'around'|'evenly'} alignment - Horizontal alignment
+   */
+  setJustifyContent(alignment) {
+    this.update({ justifyContent: alignment });
+  }
+
+  /**
+   * Set vertical alignment
+   * @param {'start'|'end'|'center'|'baseline'|'stretch'} alignment - Vertical alignment
+   */
+  setAlignItems(alignment) {
+    this.update({ alignItems: alignment });
+  }
+
+  /**
+   * Toggle gutters
+   * @param {boolean} noGutters - Whether to remove gutters
+   */
+  setNoGutters(noGutters) {
+    this.update({ noGutters });
+  }
+
+  /**
+   * Reset row to default state
+   */
+  reset() {
+    this.options = {
+      className: '',
+      justifyContent: undefined,
+      alignItems: undefined,
+      noGutters: false
+    };
+    this.updateClasses();
+  }
+
+  /**
+   * Destroy the row instance and clean up
+   */
+  destroy() {
+    this.element.className = '';
+    this.element = null;
+  }
+}
+
+/**
+ * Create a row instance for a DOM element
+ * @param {HTMLElement} element - The DOM element to initialize as row
+ * @param {Object} options - Row configuration options
+ * @returns {Row} Row instance
+ */
+export function createRow(element, options = {}) {
+  return new Row({ element, ...options });
+}
+
+/**
+ * Initialize row components on page load
+ * @param {string} [selector='[data-row]'] - CSS selector for row elements
+ * @param {Object} [defaultOptions={}] - Default row options
+ */
+export function initRows(selector = '[data-row]', defaultOptions = {}) {
+  const elements = document.querySelectorAll(selector);
+  const rows = [];
+
+  elements.forEach(element => {
+    const options = {
+      ...defaultOptions,
+      ...(element.dataset.rowOptions ? JSON.parse(element.dataset.rowOptions) : {})
+    };
+
+    rows.push(createRow(element, options));
+  });
+
+  return rows;
+}
+
+// Auto-initialize on DOM ready
+document.addEventListener('DOMContentLoaded', () => {
+  initRows();
+});

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

@@ -0,0 +1,48 @@
+/**
+ * @file Grid Scripts Index
+ * @description Entry point for vanilla JavaScript grid implementations
+ */
+
+export * from './Grid.js';
+export * from './GridCol.js';
+export * from './Row.js';
+
+/**
+ * Combine grid components for easy initialization
+ * @param {Object} options - Global initialization options
+ * @param {string} [options.gridSelector='[data-grid]'] - Grid element selector
+ * @param {string} [options.colSelector='[data-grid-col]'] - Grid column selector
+ * @param {string} [options.rowSelector='[data-row]'] - Row element selector
+ * @returns {Object} Grid instances by type
+ */
+export function initGridComponents(options = {}) {
+  const { 
+    gridSelector = '[data-grid]', 
+    colSelector = '[data-grid-col]', 
+    rowSelector = '[data-row]' 
+  } = options;
+
+  const grids = typeof initGrids === 'function' ? initGrids(gridSelector) : [];
+  const columns = typeof initGridCols === 'function' ? initGridCols(colSelector) : [];
+  const rows = typeof initRows === 'function' ? initRows(rowSelector) : [];
+
+  return {
+    grids,
+    columns,
+    rows,
+    destroy: () => {
+      [...grids, ...columns, ...rows].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', () => {
+    initGridComponents();
+  });
+}