more validation fixes

Author: officialMECH

.eslintrc

@@ -1,7 +1,7 @@
 {
 	"root": true,
 	"env": { "browser": true, "es2020": true, "node": true },
-	"extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/recommended-requiring-type-checking", "plugin:react-hooks/recommended"],
+	"extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended"],
 	"ignorePatterns": ["dist", "package.json", "yarn.lock", "src/styles", "src/router.ts"],
 	"parser": "@typescript-eslint/parser",
 	"parserOptions": {
@@ -13,5 +13,6 @@
 		"@typescript-eslint/no-non-null-assertion": "off",
 		"@typescript-eslint/ban-ts-comment": "off",
 		"@typescript-eslint/no-unused-vars": "warn",
+		"@typescript-eslint/no-explicit-any": "warn",
 	},
 }

package.json

@@ -29,7 +29,7 @@
 		"react-dom": "^18.2.0",
 		"react-router-dom": "^6.21.3",
 		"slugify": "^1.6.6",
-		"valibot": "^0.27.1"
+		"valibot": "^0.30.0"
 	},
 	"devDependencies": {
 		"@pandacss/dev": "^0.17.5",

src/components/context/storage.tsx

@@ -40,7 +40,6 @@ const reducer: Reducer<State, Actions> = (state, action) => {
 };
 
 const storage = Object.entries(localStorage).reduce((record: State, [key, value]: [string, string]) => {
-	if (!is(schemas.dataset, value)) return record;
 	return { ...record, [key]: JSON.parse(value) as T };
 }, {});
 
@@ -51,6 +50,7 @@ function StorageProvider({ children }: PropsWithChildren) {
 	useEffect(() => {
 		Object.entries(datasets).forEach(([key, contents]) => {
 			const name = key.split("/")[key.split("/").length - 1].split(".")[0];
+			if (!is(schemas.dataset, contents.default)) return;
 			dispatch({ type: "UPDATE", payload: { id: name, dataset: contents.default, overwrite: false } });
 		});
 	}, []);

src/hooks/context.hooks.tsx

@@ -1,9 +1,15 @@
 import { StorageContext } from "$/components/context/storage";
-import { useContext } from "react";
+import { schemas } from "$/types";
+import { useContext, useMemo } from "react";
+import { is } from "valibot";
 
 export function useDatasets() {
 	const { state, dispatch } = useContext(StorageContext);
-	return { state, dispatch };
+	const valid = useMemo(() => {
+		const filtered = Object.entries(state).filter(([_, contents]) => is(schemas.dataset, contents));
+		return filtered.reduce((acc, [key, contents]) => ({ ...acc, [key]: contents }), {});
+	}, [state]);
+	return { state: valid, dispatch };
 }
 export function useDataset(key: string) {
 	const { state, dispatch } = useContext(StorageContext);

src/templates/form/level.tsx

@@ -1,17 +1,19 @@
 import { css, cva } from "$/styles/css";
 import { vstack } from "$/styles/patterns";
-import { Fragment, PropsWithChildren } from "react";
+import { FormHTMLAttributes, Fragment, PropsWithChildren } from "react";
 
 interface Props {
 	title?: string;
 }
 
-function Template({ title, children }: PropsWithChildren<Props>) {
+function Template({ title, children, ...rest }: PropsWithChildren<Props> & FormHTMLAttributes<HTMLElement>) {
 	return (
 		<Fragment>
 			<h2 className={styles.title}>{title}</h2>
 			<hr />
-			<div className={styles.contents}>{children}</div>
+			<form className={styles.contents} {...rest}>
+				{children}
+			</form>
 		</Fragment>
 	);
 }

src/templates/form/template.tsx

@@ -1,4 +1,5 @@
 import { ElementType } from "react";
+
 import { default as beatmap } from "./beatmap";
 import { default as data } from "./dataset";
 import { default as artificial } from "./input";
@@ -8,8 +9,10 @@ export * from "./beatmap";
 export * from "./dataset";
 export * from "./shared";
 
-export type AsChildProps<T extends ElementType> = React.ComponentPropsWithoutRef<T> & { asChild?: boolean };
+export type Predicate<T, Result> = (value: T, index: number, array: T[]) => Result;
 export type Entry<T> = { name: string; contents: T };
+
+export type AsChildProps<T extends ElementType> = React.ComponentPropsWithoutRef<T> & { asChild?: boolean };
 export type PayloadAction<T, K = string> = { type: K; payload: T };
 
 export const schemas = { artificial, ...beatmap, ...data, ...shared };

src/types/index.ts

@@ -1,14 +1,5 @@
+import { Predicate } from "$/types";
+
 export const predicates = {
 	unique: <T>(value: T, index: number, array: T[]) => array.indexOf(value) === index,
-};
-
-export function pick<T extends object, K extends keyof T>(obj: T, ...keys: K[]): Pick<T, K> {
-	const draft = { ...obj };
-	keys.forEach((key) => (draft[key] = obj[key]));
-	return draft;
-}
-export function omit<T extends object, K extends keyof T>(obj: T, ...keys: K[]): Omit<T, K> {
-	const draft = { ...obj };
-	keys.forEach((key) => delete draft[key]);
-	return draft;
-}
+} satisfies Record<string, Predicate<unknown, unknown>>;

src/utils/array.utils.ts

@@ -1,3 +1,14 @@
+export function pick<T extends object, K extends keyof T>(obj: T, ...keys: K[]): Pick<T, K> {
+	const draft = { ...obj };
+	keys.forEach((key) => (draft[key] = obj[key]));
+	return draft;
+}
+export function omit<T extends object, K extends keyof T>(obj: T, ...keys: K[]): Omit<T, K> {
+	const draft = { ...obj };
+	keys.forEach((key) => delete draft[key]);
+	return draft;
+}
+
 export function common<T extends Record<string, unknown>>(a: T, b: T): T {
 	const result = Object.keys(a).reduce((result: T, key: keyof typeof a) => {
 		const value = a[key];

src/utils/object.utils.ts

@@ -3527,7 +3527,7 @@ __metadata:
     react-router-dom: "npm:^6.21.3"
     slugify: "npm:^1.6.6"
     typescript: "npm:^5.3.3"
-    valibot: "npm:^0.27.1"
+    valibot: "npm:^0.30.0"
     vite: "npm:^5.0.12"
     vitest: "npm:^1.2.2"
   languageName: unknown
@@ -8782,10 +8782,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"valibot@npm:^0.27.1":
-  version: 0.27.1
-  resolution: "valibot@npm:0.27.1"
-  checksum: 9def52a9069c691eb74d48db91c2ce8d5e8094483fd1dd396753584be6e0e7d1148de3d2cd94ef0b2267e28bb49752704e1bcdafb345557294766d0c211918b5
+"valibot@npm:^0.30.0":
+  version: 0.30.0
+  resolution: "valibot@npm:0.30.0"
+  checksum: 59a1d4201459dfc7b173a8e2cc1490d03115cf8f2140e9aa176fb1945131e1b37c499acab5e2d6c60684f78995792e24dd5adb87b8e7946bfec3a0c90529f091
   languageName: node
   linkType: hard