fix: typescript errors in contexts

src/context/Canvas.tsx

@@ -1,20 +1,22 @@
 import React, { createContext, ReactNode, useMemo, useState } from "react";
 
+interface Context {
+	stageSize: Dimension;
+	canvasSize: Dimension;
+	blocks: Block[];
+	coords: Position;
+	scale: number;
+	setStageSize: React.Dispatch<React.SetStateAction<Dimension>>;
+	setBlocks: React.Dispatch<React.SetStateAction<Block[]>>;
+	setCoords: React.Dispatch<React.SetStateAction<Position>>;
+	setScale: React.Dispatch<React.SetStateAction<number>>;
+}
+
 interface Props {
 	children: ReactNode;
 }
 
-export const CanvasContext = createContext({
+export const CanvasContext = createContext<Context>({} as Context);
-	stageSize: { width: 0, height: 0 } as Dimension,
-	canvasSize: { minX: 0, minY: 0, maxX: 0, maxY: 0 },
-	blocks: [] as Block[],
-	coords: { x: 0, y: 0 } as Position,
-	scale: 0,
-	setStageSize: ((size: Dimension) => {}) as React.Dispatch<React.SetStateAction<Dimension>>,
-	setBlocks: ((blocks: Block[]) => {}) as React.Dispatch<React.SetStateAction<Block[]>>,
-	setCoords: ((coords: Position) => {}) as React.Dispatch<React.SetStateAction<Position>>,
-	setScale: ((value: number) => {}) as React.Dispatch<React.SetStateAction<number>>,
-});
 
 export const CanvasProvider = ({ children }: Props) => {
 	const [stageSize, setStageSize] = useState({ width: 0, height: 0 } as Dimension);

src/context/Dialog.tsx

@@ -1,11 +1,13 @@
 import { Dialog } from "@/components/ui/dialog";
 import { createContext, lazy, ReactNode, Suspense, useState } from "react";
 
+type Context = (id: string) => void;
+
 interface Props {
 	children: ReactNode;
 }
 
-export const DialogContext = createContext((id: string) => {});
+export const DialogContext = createContext<Context>({} as Context);
 
 export const DialogProvider = ({ children }: Props) => {
 	const [open, setOpen] = useState(false);

src/context/Image.tsx

@@ -1,15 +1,17 @@
 import { createContext, ReactNode, useState } from "react";
 
+interface Context {
+	image: HTMLImageElement | undefined;
+	imageDimensions: Dimension;
+	setImage: React.Dispatch<React.SetStateAction<HTMLImageElement | undefined>>;
+	setImageDimensions: React.Dispatch<React.SetStateAction<Dimension>>;
+}
+
 interface Props {
 	children: ReactNode;
 }
 
-export const ImageContext = createContext({
+export const ImageContext = createContext<Context>({} as Context);
-	image: new Image() as HTMLImageElement | undefined,
-	imageDimensions: { width: 0, height: 0 } as Dimension,
-	setImage: (image: HTMLImageElement) => {},
-	setImageDimensions: (dimension: Dimension) => {},
-});
 
 export const ImageProvider = ({ children }: Props) => {
 	const [image, setImage] = useState<HTMLImageElement>();

src/context/Loading.tsx

@@ -1,14 +1,16 @@
 import { createContext, ReactNode, useState } from "react";
 import LoadingIndicator from "@/assets/loading.svg?react";
 
+interface Context {
+	loading: boolean;
+	setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
 interface Props {
 	children: ReactNode;
 }
 
-export const LoadingContext = createContext({
+export const LoadingContext = createContext<Context>({} as Context);
-	loading: false,
-	setLoading: ((value: boolean) => {}) as React.Dispatch<React.SetStateAction<boolean>>,
-});
 
 export const LoadingProvider = ({ children }: Props) => {
 	const [loading, setLoading] = useState(true);

src/context/Settings.tsx

@@ -1,5 +1,10 @@
 import { createContext, ReactNode, useState } from "react";
 
+interface Context {
+	settings: Settings;
+	setSetting: <K extends keyof Settings>(key: K, value: Settings[K]) => void;
+}
+
 interface Props {
 	children: ReactNode;
 }
@@ -12,10 +17,7 @@ const defaultSettings: Settings = {
 	blockSelector: true,
 };
 
-export const SettingsContext = createContext({
+export const SettingsContext = createContext<Context>({} as Context);
-	settings: defaultSettings,
-	setSetting: <K extends keyof Settings>(key: K, value: Settings[K]) => {},
-});
 
 export const SettingsProvider = ({ children }: Props) => {
 	const [settings, setSettings] = useState<Settings>(defaultSettings);

src/context/Textures.tsx

@@ -7,15 +7,17 @@ import spritesheet from "@/data/blocks/programmer-art/spritesheet.json";
 import _blockData from "@/data/blocks/programmer-art/data.json";
 const blockData: BlockData = _blockData;
 
+interface Context {
+	missingTexture: PIXI.Texture | undefined;
+	textures: Record<string, PIXI.Texture>;
+	solidTextures: Record<string, PIXI.Texture>;
+}
+
 interface Props {
 	children: ReactNode;
 }
 
-export const TexturesContext = createContext({
+export const TexturesContext = createContext<Context>({} as Context);
-	missingTexture: {} as PIXI.Texture | undefined,
-	textures: {} as Record<string, PIXI.Texture>,
-	solidTextures: {} as Record<string, PIXI.Texture>,
-});
 
 export const TexturesProvider = ({ children }: Props) => {
 	const { setLoading } = useContext(LoadingContext);

src/context/Tool.tsx

@@ -1,19 +1,21 @@
 import { createContext, ReactNode, useEffect, useState } from "react";
 
+interface Context {
+	tool: Tool;
+	radius: number;
+	selectedBlock: string;
+	cssCursor: string;
+	setTool: React.Dispatch<React.SetStateAction<Tool>>;
+	setRadius: React.Dispatch<React.SetStateAction<number>>;
+	setSelectedBlock: React.Dispatch<React.SetStateAction<string>>;
+	setCssCursor: React.Dispatch<React.SetStateAction<string>>;
+}
+
 interface Props {
 	children: ReactNode;
 }
 
-export const ToolContext = createContext({
+export const ToolContext = createContext<Context>({} as Context);
-	tool: "hand" as Tool,
-	radius: 1,
-	selectedBlock: "stone",
-	cssCursor: "pointer",
-	setTool: ((tool: Tool) => {}) as React.Dispatch<React.SetStateAction<Tool>>,
-	setRadius: ((value: number) => {}) as React.Dispatch<React.SetStateAction<number>>,
-	setSelectedBlock: ((block: string) => {}) as React.Dispatch<React.SetStateAction<string>>,
-	setCssCursor: ((cursor: string) => {}) as React.Dispatch<React.SetStateAction<string>>,
-});
 
 export const ToolProvider = ({ children }: Props) => {
 	const [tool, setTool] = useState<Tool>("hand");