Merge pull request #90 from internxt/feat/grid-generic-component

[PB-3527]: feat/add generic Grid component

Author: jaaaaavier

src/components/grid/Grid.tsx

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+
+export interface GridProps {
+  children?: ReactNode;
+  className?: string;
+  id?: string;
+  dataCy?: string;
+}
+
+/**
+ * Grid component
+ * 
+ * A responsive grid container that automatically adjusts columns from 2 (mobile) up to 6 (extra large screens).
+ *
+ * @param {GridProps} props - The properties of the component.
+ *
+ * @property {ReactNode} [children]
+ * - The child components or elements to be rendered inside the grid container.
+ *
+ * @property {string} [className]
+ * - Optional custom CSS classes for additional styling or layout adjustments overriding default tailwind classes.
+ *
+ * @property {string} [id]
+ * - Optional ID for the grid container element.
+ *
+ * @property {string} [dataCy]
+ * - Custom data attribute used for e2e Cypress test targeting.
+ *
+ * @returns {JSX.Element}
+ * - A JSX element containing the children formatted inside a grid.
+ */
+const Grid = ({ children, className = '', id, dataCy }: Readonly<GridProps>): JSX.Element => {
+  return (
+    <div
+      id={id}
+      data-cy={dataCy}
+      className={`grid min-w-full auto-rows-min grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 ${className}`}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Grid;

src/components/grid/__test__/Grid.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import '@testing-library/jest-dom';
+import { Grid } from '../';
+
+describe('Grid component', () => {
+  it('should match snapshot', () => {
+    const { container } = render(<Grid>Snapshot Test</Grid>);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render children correctly', () => {
+    const { getByText } = render(
+      <Grid>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Grid>
+    );
+
+    expect(getByText('Item 1')).toBeInTheDocument();
+    expect(getByText('Item 2')).toBeInTheDocument();
+  });
+
+  it('should apply the default grid classes', () => {
+    const { container } = render(<Grid>Test</Grid>);
+    const gridDiv = container.firstChild as HTMLElement;
+    
+    expect(gridDiv).toHaveClass('grid');
+    expect(gridDiv).toHaveClass('min-w-full');
+    expect(gridDiv).toHaveClass('auto-rows-min');
+    expect(gridDiv).toHaveClass('grid-cols-2');
+  });
+
+  it('should append custom className to the wrapper', () => {
+    const { container } = render(<Grid className="custom-class">Test</Grid>);
+    const gridDiv = container.firstChild as HTMLElement;
+    
+    expect(gridDiv).toHaveClass('custom-class');
+    expect(gridDiv).toHaveClass('grid');
+  });
+
+  it('should assign id and data-cy correctly', () => {
+    const { container } = render(<Grid id="grid-id" dataCy="grid-data-cy">Test</Grid>);
+    const gridDiv = container.firstChild as HTMLElement;
+    
+    expect(gridDiv).toHaveAttribute('id', 'grid-id');
+    expect(gridDiv).toHaveAttribute('data-cy', 'grid-data-cy');
+  });
+});

src/components/grid/__test__/__snapshots__/Grid.test.tsx.snap

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Grid component > should match snapshot 1`] = `
+<div>
+  <div
+    class="grid min-w-full auto-rows-min grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 "
+  >
+    Snapshot Test
+  </div>
+</div>
+`;

src/components/grid/index.ts

@@ -0,0 +1,2 @@
+export { default as Grid } from './Grid';
+export * from './Grid';

src/components/index.ts

@@ -29,3 +29,4 @@ export * from './textArea';
 export * from './tooltip';
 export * from './sidenav';
 export * from './mail';
+export * from './grid';

src/stories/components/grid/Grid.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Grid } from '@/components/grid';
+
+const meta: Meta<typeof Grid> = {
+  title: 'Components/Grid',
+  component: Grid,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Custom CSS classes for the Grid container',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Grid>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Grid {...args}>
+      {Array.from({ length: 12 }).map((_, index) => (
+        <div
+          key={index}
+          className="flex items-center justify-center rounded-lg bg-gray-10 p-6 text-sm font-medium text-gray-80 shadow-sm"
+        >
+          Grid Item {index + 1}
+        </div>
+      ))}
+    </Grid>
+  ),
+};