@stackshift-ui/grid 6.0.2 → 6.0.4-beta.0

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@stackshift-ui/grid",
   "description": "",
-  "version": "6.0.2",
+  "version": "6.0.4-beta.0",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist/**"
+    "dist/**",
+    "src"
   ],
   "author": "WebriQ <info@webriq.com>",
   "devDependencies": {
@@ -28,16 +29,16 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/eslint-config": "6.0.2",
-    "@stackshift-ui/typescript-config": "6.0.2"
+    "@stackshift-ui/eslint-config": "6.0.3-beta.0",
+    "@stackshift-ui/typescript-config": "6.0.3-beta.0"
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "@stackshift-ui/scripts": "6.0.2",
-    "@stackshift-ui/system": "6.0.2"
+    "@stackshift-ui/scripts": "6.0.3-beta.0",
+    "@stackshift-ui/system": "6.0.4-beta.0"
   },
   "peerDependencies": {
-    "@stackshift-ui/system": ">=0.0.0",
+    "@stackshift-ui/system": ">=6.0.4-beta.0",
     "@types/react": "16.8 - 19",
     "next": "10 - 14",
     "react": "16.8 - 19",

package/src/grid.test.tsx

@@ -0,0 +1,13 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { Grid } from "./grid";
+
+describe.concurrent("grid", () => {
+  afterEach(cleanup);
+
+  test("Layout: Grid - test if renders without errors", ({ expect }) => {
+    const clx = "grid-class";
+    render(<Grid className={clx} />);
+    expect(screen.getByTestId("div").classList).toContain(clx);
+  });
+});

package/src/grid.tsx

@@ -0,0 +1,80 @@
+import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+import type { ElementType, HTMLProps, ReactNode } from "react";
+import cn from "classnames";
+
+export interface GridProps extends Omit<HTMLProps<HTMLElement>, "as"> {
+  columns?: Columns;
+  gap?: number;
+  align?: Align;
+  justify?: Justify;
+  children?: ReactNode;
+  className?: string;
+  as?: ElementType;
+}
+
+type Justify = "normal" | "start" | "end" | "center" | "between" | "around" | "evenly" | "stretch";
+type Columns = "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type Align = "start" | "end" | "baseline" | "stretch" | "center";
+
+const displayName = "Grid";
+
+export const Grid: React.FC<GridProps> = ({
+  columns = 1,
+  gap = 0,
+  align = "stretch",
+  justify = "start",
+  children,
+  className,
+  as,
+  ...props
+}) => {
+  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  const columnClass = {
+    none: "grid-cols-none",
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-4",
+    5: "grid-cols-5",
+    6: "grid-cols-6",
+    7: "grid-cols-7",
+    8: "grid-cols-8",
+    9: "grid-cols-9",
+    10: "grid-cols-10",
+    11: "grid-cols-1",
+    12: "grid-cols-12",
+  };
+
+  const alignVariants = {
+    start: "items-start",
+    end: "items-end",
+    baseline: "items-baseline",
+    stretch: "items-stretch",
+    center: "items-center",
+  };
+
+  const justifyVariants = {
+    normal: "justify-items-normal",
+    start: "justify-items-start",
+    end: "justify-items-end",
+    center: "justify-items-center",
+    between: " justify-items-between",
+    around: "justify-items-around",
+    evenly: "justify-items-evenly",
+    stretch: "justify-items-stretch",
+  };
+
+  const column = columnClass[columns] || "grid-cols-1";
+  const alignClass = alignVariants[align];
+  const justifyClass = justifyVariants[justify];
+  const classes = `grid w-full ${column} ${alignClass} ${justifyClass} gap-${gap ?? 0}`;
+
+  return (
+    <Component as={as} className={cn(classes, className)} {...props} data-testid={displayName}>
+      {children}
+    </Component>
+  );
+};
+
+Grid.displayName = displayName;

package/src/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+// component exports
+export * from "./grid";