move folders etc, need to solve app import issue

src/component/charts/custom-grid.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import { G, Line } from "react-native-svg";
+import { colors } from "../../styles";
+import { ScaleBandType, ScaleLinearType } from "./graph-types";
+
+interface CustomGridProps {
+	x: ScaleBandType;
+	y: ScaleLinearType;
+	ticks: Array<number>;
+	includeVertical?: boolean;
+	xTicks?: Array<number | string>;
+}
+/**
+ * CustomGrid Component
+ *
+ * This component is used within a react-native-svg-chart component to render grid lines.
+ *
+ * @param {ScaleBandType} x - X-axis scale function, received from the parent chart component.
+ * @param {ScaleLinearType} y - Y-axis scale function, received from the parent chart component.
+ * @param {Array<number>} ticks - Y-axis tick values for horizontal lines, received from the parent.
+ * @param {boolean} [includeVertical=false] - Enables experimental vertical grid lines.
+ * @param {Array<number|string>} [xTicks] - X-axis tick values for vertical lines, necessary if `includeVertical` is true.
+ *
+ * Behavior:
+ *  - Renders horizontal grid lines based on the `ticks` & scale functions provided by the parent chart component.
+ *  - Vertical grid lines are experimental and can be enabled with `includeVertical` set to true.
+ *    However, their scaling and positioning may not be accurate relative to XAxis component (if used).
+ *
+ * Usage:
+ *  <Chart ... >
+ *    <CustomGrid />
+ *  </Chart>
+ *
+ * Note: Use `includeVertical` cautiously; vertical lines are not fully developed.
+ */
+export const CustomGrid: React.FC<Partial<CustomGridProps>> = ({
+	x,
+	y,
+	ticks,
+	xTicks,
+	includeVertical = false,
+}) => {
+	const [firstTick, ...remainingTicks] = ticks;
+	const dashArray = [1, 3];
+	const strokeSolidWidth = 0.2;
+	const strokeSolidColor = colors.bgBlack;
+	const strokeDashWidth = 1;
+	const strokeDashColor = colors.lightGrey;
+
+	const renderHorizontalLine = (
+		tick: number,
+		stroke: string,
+		strokeWidth: number,
+		dashArray?: number[],
+	) => (
+		<Line
+			key={`line-${tick}`}
+			x1="0%"
+			x2="100%"
+			y1={y(tick)}
+			y2={y(tick)}
+			stroke={stroke}
+			strokeWidth={strokeWidth}
+			strokeDasharray={dashArray}
+		/>
+	);
+
+	const topY = y(Math.max(...ticks));
+	const bottomY = y(Math.min(...ticks));
+	const renderVerticalLine = (
+		tick: number,
+		stroke: string,
+		strokeWidth: number,
+		dashArray?: number[],
+	) => {
+		return (
+			<Line
+				key={`vertical-line-${tick}`}
+				x1={x(tick)}
+				x2={x(tick)}
+				y1={topY}
+				y2={bottomY}
+				stroke={stroke}
+				strokeWidth={strokeWidth}
+				strokeDasharray={dashArray}
+			/>
+		);
+	};
+
+	return (
+		<G>
+			{renderHorizontalLine(firstTick, strokeSolidColor, strokeSolidWidth)}
+			{remainingTicks.map((tick) =>
+				renderHorizontalLine(tick, strokeDashColor, strokeDashWidth, dashArray),
+			)}
+			{includeVertical &&
+				xTicks.map((_, index) =>
+					renderVerticalLine(
+						index,
+						strokeDashColor,
+						strokeDashWidth,
+						dashArray,
+					),
+				)}
+		</G>
+	);
+};