@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/layouts/Grid/GridCol.tsx

@@ -0,0 +1,160 @@
+import React, { forwardRef, HTMLAttributes, ReactNode } from 'react';
+
+export interface GridColProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * The content to be rendered within the column
+   */
+  children: ReactNode;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Number of columns to span at extra small breakpoint (default)
+   */
+  xs?: number | 'auto';
+  /**
+   * Number of columns to span at small breakpoint
+   */
+  sm?: number | 'auto';
+  /**
+   * Number of columns to span at medium breakpoint
+   */
+  md?: number | 'auto';
+  /**
+   * Number of columns to span at large breakpoint
+   */
+  lg?: number | 'auto';
+  /**
+   * Number of columns to span at extra large breakpoint
+   */
+  xl?: number | 'auto';
+  /**
+   * Number of columns to span at extra extra large breakpoint
+   */
+  xxl?: number | 'auto';
+  /**
+   * Offset at extra small breakpoint
+   */
+  offsetXs?: number;
+  /**
+   * Offset at small breakpoint
+   */
+  offsetSm?: number;
+  /**
+   * Offset at medium breakpoint
+   */
+  offsetMd?: number;
+  /**
+   * Offset at large breakpoint
+   */
+  offsetLg?: number;
+  /**
+   * Offset at extra large breakpoint
+   */
+  offsetXl?: number;
+  /**
+   * Offset at extra extra large breakpoint
+   */
+  offsetXxl?: number;
+}
+
+/**
+ * GridCol component for creating columns within a Grid.
+ * Uses the CSS grid column classes defined in _objects.grid.scss.
+ */
+export const GridCol = forwardRef<HTMLDivElement, GridColProps>(
+  (
+    {
+      children,
+      className = '',
+      xs,
+      sm,
+      md,
+      lg,
+      xl,
+      xxl,
+      offsetXs,
+      offsetSm,
+      offsetMd,
+      offsetLg,
+      offsetXl,
+      offsetXxl,
+      ...props
+    },
+    ref
+  ) => {
+    // If no specific size is provided, use auto class
+    const isDefaultAuto = !xs && !sm && !md && !lg && !xl && !xxl;
+    const classes = isDefaultAuto ? ['o-grid__col', 'o-grid__col--auto'] : ['o-grid__col'];
+
+    // Add column size classes based on the exact SCSS pattern
+    // For xs (default breakpoint), the infix is empty
+    if (xs) {
+      if (xs === 'auto') {
+        classes.push('o-grid__col--auto');
+      } else {
+        classes.push(`o-grid__col--${xs}`);
+      }
+    }
+
+    // For other breakpoints, the infix includes the dash
+    if (sm) {
+      if (sm === 'auto') {
+        classes.push('o-grid__col--sm-auto');
+      } else {
+        classes.push(`o-grid__col--sm-${sm}`);
+      }
+    }
+
+    if (md) {
+      if (md === 'auto') {
+        classes.push('o-grid__col--md-auto');
+      } else {
+        classes.push(`o-grid__col--md-${md}`);
+      }
+    }
+
+    if (lg) {
+      if (lg === 'auto') {
+        classes.push('o-grid__col--lg-auto');
+      } else {
+        classes.push(`o-grid__col--lg-${lg}`);
+      }
+    }
+
+    if (xl) {
+      if (xl === 'auto') {
+        classes.push('o-grid__col--xl-auto');
+      } else {
+        classes.push(`o-grid__col--xl-${xl}`);
+      }
+    }
+
+    if (xxl) {
+      if (xxl === 'auto') {
+        classes.push('o-grid__col--xxl-auto');
+      } else {
+        classes.push(`o-grid__col--xxl-${xxl}`);
+      }
+    }
+
+    // Add offset classes based on the exact SCSS pattern
+    if (offsetXs) classes.push(`o-grid__offset--${offsetXs}`);
+    if (offsetSm) classes.push(`o-grid__offset--sm-${offsetSm}`);
+    if (offsetMd) classes.push(`o-grid__offset--md-${offsetMd}`);
+    if (offsetLg) classes.push(`o-grid__offset--lg-${offsetLg}`);
+    if (offsetXl) classes.push(`o-grid__offset--xl-${offsetXl}`);
+    if (offsetXxl) classes.push(`o-grid__offset--xxl-${offsetXxl}`);
+
+    if (className) classes.push(className);
+
+    return (
+      <div ref={ref} className={classes.join(' ')} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+GridCol.displayName = 'GridCol';

package/src/layouts/Grid/README.md

@@ -0,0 +1,108 @@
+# Grid System
+
+A responsive grid system for Atomix based on the CSS grid classes defined in `_objects.grid.scss` and `_objects.container.scss`.
+
+## Components
+
+### Grid
+
+The main container that creates a flex row layout. It can also be used with alignment options.
+
+```tsx
+import { Grid, GridCol } from '@/layouts/Grid';
+
+<Grid>
+  <GridCol xs={12} md={6} lg={4}>Column content</GridCol>
+  <GridCol xs={12} md={6} lg={4}>Column content</GridCol>
+  <GridCol xs={12} md={6} lg={4}>Column content</GridCol>
+</Grid>
+
+// With alignment options
+<Grid justifyContent="between" alignItems="center">
+  <GridCol xs={12} md={6}>Column content</GridCol>
+  <GridCol xs={12} md={6}>Column content</GridCol>
+</Grid>
+```
+
+#### Props
+
+- `justifyContent`: Control horizontal alignment ('start', 'end', 'center', 'between', 'around', 'evenly')
+  - Adds utility class `u-justify-content-[value]`
+- `alignItems`: Control vertical alignment ('start', 'end', 'center', 'baseline', 'stretch')
+  - Adds utility class `u-align-items-[value]`
+- `noGutters`: Remove gutters between columns
+  - Adds modifier class `o-grid--no-gutters`
+
+### GridCol
+
+Column component with responsive sizing options.
+
+#### Props
+
+- `xs`, `sm`, `md`, `lg`, `xl`, `xxl`: Number of columns to span at each breakpoint (1-12) or 'auto'
+  - Adds classes like `o-grid__col-[number]` (for xs) or `o-grid__col--sm-[number]` (for other breakpoints)
+- `offsetXs`, `offsetSm`, `offsetMd`, `offsetLg`, `offsetXl`, `offsetXxl`: Column offset at each breakpoint
+  - Adds classes like `o-grid__offset-[number]` (for xs) or `o-grid__offset--sm-[number]` (for other breakpoints)
+
+### Container
+
+Container component with various width options.
+
+```tsx
+import { Container } from '@/layouts/Grid';
+
+// Default responsive container
+<Container>Content</Container>
+
+// Full width container
+<Container type="fluid">Content</Container>
+
+// Container with max-width at specific breakpoint
+<Container type="md">Content</Container>
+```
+
+#### Props
+
+- `type`: Container type
+  - `undefined`: responsive container with max-width at each breakpoint (`o-container` class)
+  - `'fluid'`: full width container (`o-container-fluid` class)
+  - `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'`: responsive container with max-width at specified breakpoint (`o-container-[breakpoint]` class)
+
+### Row
+
+A specialized component for creating rows within a Container. It has the same alignment options as Grid.
+
+```tsx
+import { Container, Row, GridCol } from '@/layouts/Grid';
+
+<Container>
+  <Row justifyContent="between" alignItems="center">
+    <GridCol xs={12} md={6}>Column content</GridCol>
+    <GridCol xs={12} md={6}>Column content</GridCol>
+  </Row>
+</Container>
+```
+
+#### Props
+
+- `justifyContent`: Control horizontal alignment ('start', 'end', 'center', 'between', 'around', 'evenly')
+  - Adds utility class `u-justify-content-[value]`
+- `alignItems`: Control vertical alignment ('start', 'end', 'center', 'baseline', 'stretch')
+  - Adds utility class `u-align-items-[value]`
+- `noGutters`: Remove gutters between columns
+  - Adds modifier class `o-grid--no-gutters`
+
+## Breakpoints
+
+The grid system uses the following breakpoints:
+
+- `xs`: 0px and up
+- `sm`: 576px and up
+- `md`: 768px and up
+- `lg`: 992px and up
+- `xl`: 1200px and up
+- `xxl`: 1440px and up
+
+## Examples
+
+See `Grid.stories.tsx` for usage examples.

package/src/layouts/Grid/Row.tsx

@@ -0,0 +1,68 @@
+import React, { forwardRef, HTMLAttributes, ReactNode } from 'react';
+
+export interface RowProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * The content to be rendered within the row
+   */
+  children: ReactNode;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Control the horizontal alignment of items
+   */
+  justifyContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+  /**
+   * Control the vertical alignment of items
+   */
+  alignItems?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+  /**
+   * No gutters between columns
+   */
+  noGutters?: boolean;
+}
+
+/**
+ * Row component for creating rows within a Grid or Container.
+ * Uses the CSS row classes defined in _objects.grid.scss.
+ *
+ * @example
+ * ```tsx
+ * <Container>
+ *   <Row justifyContent="between" alignItems="center">
+ *     <GridCol md={6}>Column content</GridCol>
+ *     <GridCol md={6}>Column content</GridCol>
+ *   </Row>
+ * </Container>
+ * ```
+ */
+export const Row = forwardRef<HTMLDivElement, RowProps>(
+  ({ children, className = '', justifyContent, alignItems, noGutters, ...props }, ref) => {
+    const classes = ['o-grid'];
+
+    if (justifyContent) {
+      classes.push(`u-justify-content-${justifyContent}`);
+    }
+
+    if (alignItems) {
+      classes.push(`u-align-items-${alignItems}`);
+    }
+
+    if (noGutters) {
+      classes.push('o-grid--no-gutters');
+    }
+
+    if (className) {
+      classes.push(className);
+    }
+
+    return (
+      <div ref={ref} className={classes.join(' ')} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+Row.displayName = 'Row';

package/src/layouts/Grid/index.ts

@@ -0,0 +1,8 @@
+export { Grid } from './Grid';
+export type { GridProps } from './Grid';
+export { GridCol } from './GridCol';
+export type { GridColProps } from './GridCol';
+export { Container } from './Container';
+export type { ContainerProps } from './Container';
+export { Row } from './Row';
+export type { RowProps } from './Row';