feat: add index css variable to column count

Author: abelflopes

packages/components/grid/src/Column.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./styles/column.module.scss";
 import classNames from "classnames";
 import { useGridContext } from "./hooks";
@@ -16,19 +16,22 @@ export const GridColumn = ({
   style,
   ...otherProps
 }: Readonly<GridColumnProps>): React.ReactElement => {
+  const [index, setIndex] = useState<number | undefined>(undefined);
   const { columnsCount, registerColumn } = useGridContext();
 
   useEffect(() => {
-    const deregisterColumn = registerColumn();
+    const { index, deregister } = registerColumn();
 
-    return deregisterColumn;
+    setIndex(index);
+
+    return deregister;
   }, [registerColumn]);
 
   return (
     <div
       style={{
         ...style,
-        ...{ "--size": size, "--columns": columnsCount },
+        ...{ "--size": size, "--columns": columnsCount, "--index": index },
       }}
       className={classNames(
         styles.root,

packages/components/grid/src/context.tsx

@@ -2,14 +2,15 @@ import React from "react";
 
 export interface GridContextProps {
   columnsCount: number;
-  registerColumn: () => () => void;
+  registerColumn: () => {
+    deregister: () => void;
+    index: number;
+  };
 }
 
 export const GridContext = React.createContext<GridContextProps>({
   columnsCount: 0,
   registerColumn() {
-    return (): ReturnType<GridContextProps["registerColumn"]> => () => {
-      throw new Error("Grid context not initialized");
-    };
+    throw new Error("Grid context not initialized");
   },
 });

packages/components/grid/src/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import styles from "./styles/container.module.scss";
 import classNames from "classnames";
 import { GridContext, type GridContextProps } from "./context";
@@ -23,13 +23,18 @@ const Grid = ({
   className,
   ...otherProps
 }: Readonly<GridProps>): React.ReactElement => {
+  const index = useRef(0);
   const [columnsCount, setColumnsCount] = useState(0);
 
   const registerColumn = useCallback<GridContextProps["registerColumn"]>(() => {
     setColumnsCount((v) => v + 1);
 
-    return () => {
-      setColumnsCount((v) => v - 1);
+    return {
+      index: (index.current += 1),
+      deregister: (): void => {
+        index.current -= 1;
+        setColumnsCount((v) => v - 1);
+      },
     };
   }, []);