Added token preview to edit token modal and refactored Grid from Map Grid

src/components/Grid.js

@@ -0,0 +1,72 @@
+import React from "react";
+import { Line, Group } from "react-konva";
+
+import { getStrokeWidth } from "../helpers/drawing";
+
+function Grid({ gridX, gridY, gridInset, strokeWidth, width, height, stroke }) {
+  if (!gridX || !gridY) {
+    return null;
+  }
+
+  const gridSizeNormalized = {
+    x: (gridInset.bottomRight.x - gridInset.topLeft.x) / gridX,
+    y: (gridInset.bottomRight.y - gridInset.topLeft.y) / gridY,
+  };
+
+  const insetWidth = (gridInset.bottomRight.x - gridInset.topLeft.x) * width;
+  const insetHeight = (gridInset.bottomRight.y - gridInset.topLeft.y) * height;
+
+  const lineSpacingX = insetWidth / gridX;
+  const lineSpacingY = insetHeight / gridY;
+
+  const offsetX = gridInset.topLeft.x * width * -1;
+  const offsetY = gridInset.topLeft.y * height * -1;
+
+  const lines = [];
+  for (let x = 1; x < gridX; x++) {
+    lines.push(
+      <Line
+        key={`grid_x_${x}`}
+        points={[x * lineSpacingX, 0, x * lineSpacingX, insetHeight]}
+        stroke={stroke}
+        strokeWidth={getStrokeWidth(
+          strokeWidth,
+          gridSizeNormalized,
+          width,
+          height
+        )}
+        opacity={0.5}
+        offsetX={offsetX}
+        offsetY={offsetY}
+      />
+    );
+  }
+  for (let y = 1; y < gridY; y++) {
+    lines.push(
+      <Line
+        key={`grid_y_${y}`}
+        points={[0, y * lineSpacingY, insetWidth, y * lineSpacingY]}
+        stroke={stroke}
+        strokeWidth={getStrokeWidth(
+          strokeWidth,
+          gridSizeNormalized,
+          width,
+          height
+        )}
+        opacity={0.5}
+        offsetX={offsetX}
+        offsetY={offsetY}
+      />
+    );
+  }
+
+  return <Group>{lines}</Group>;
+}
+
+Grid.defaultProps = {
+  strokeWidth: 0.1,
+  gridInset: { topLeft: { x: 0, y: 0 }, bottomRight: { x: 1, y: 1 } },
+  stroke: "white",
+};
+
+export default Grid;