Al 2646 (dev)

package.json

@@ -22,6 +22,7 @@
     "@mui/styles": "^5.11.9",
     "@mui/x-date-pickers": "^5.0.18",
     "@mui/x-tree-view": "^7.6.2",
+    "@tanstack/react-form": "^0.34.0",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autosuggest-highlight": "^3.3.4",
@@ -107,6 +108,7 @@
     "@testing-library/user-event": "^14.5.1",
     "@types/autosuggest-highlight": "^3.2.3",
     "@types/dompurify": "^3.0.5",
+    "@types/flowjs__flow.js": "^2.13.3",
     "@types/lodash": "^4.14.195",
     "@types/md5": "^2.3.5",
     "@types/node": "^20.3.1",
@@ -141,7 +143,7 @@
     "prettier-plugin-organize-imports": "^3.2.2",
     "setimmediate": "^1.0.5",
     "ts-node": "^10.9.1",
-    "typescript": "^5.4.5",
+    "typescript": "^5.6.3",
     "vitest-fetch-mock": "^0.2.2"
   },
   "jest": {

src/components/core/form/createFormContext.tsx

@@ -0,0 +1,46 @@
+import type { FormApi, FormOptions, ReactFormApi, Validator } from '@tanstack/react-form';
+import { useForm as useTanStackForm } from '@tanstack/react-form';
+import React, { createContext, useCallback, useContext } from 'react';
+
+export function createFormContext<
+  TFormData,
+  TFormValidator extends Validator<TFormData, string> = Validator<TFormData, string>
+>(options: FormOptions<TFormData, TFormValidator>) {
+  type FormContextProps = (FormApi<TFormData, TFormValidator> & ReactFormApi<TFormData, TFormValidator>) | null;
+
+  const FormContext = createContext<FormContextProps>(null);
+
+  type FormProviderProps = {
+    children: React.ReactNode;
+    onSubmit?: FormOptions<TFormData, TFormValidator>['onSubmit'];
+  };
+
+  const FormProvider = ({ children, onSubmit = () => null }: FormProviderProps) => {
+    const form = useTanStackForm({
+      ...options,
+      onSubmit: props => {
+        'onSubmit' in options ? options.onSubmit(props) : null;
+        onSubmit(props);
+      }
+    });
+    return <FormContext.Provider value={form}>{children}</FormContext.Provider>;
+  };
+
+  const useForm = () => {
+    const form = useContext(FormContext);
+    if (!form) {
+      throw new Error('Store not found');
+    }
+
+    const setStore = useCallback(
+      (updater: (data: TFormData) => TFormData) => {
+        form.store.setState(s => ({ ...s, values: updater(s.values) }));
+      },
+      [form.store]
+    );
+
+    return { ...form, setStore };
+  };
+
+  return { FormProvider, useForm };
+}

src/components/core/form/models.ts

@@ -0,0 +1,95 @@
+export type Length<T> = T extends { length: infer L } ? L : never;
+type Join<T extends unknown[], D extends string> = T extends string[]
+  ? PopFront<T> extends string
+    ? Length<T> extends 1
+      ? `${PopFront<T>}`
+      : `${PopFront<T>}${D}${Join<Shift<T>, D>}`
+    : never
+  : never;
+type Pop<T extends unknown[]> = T extends [...infer R, infer U] ? U : never;
+type PopFront<T extends unknown[]> = T extends [infer U, ...infer R] ? U : never;
+type Shift<T extends unknown[]> = T extends [infer U, ...infer R] ? R : never;
+
+type Filter<T extends unknown[], U> = T extends []
+  ? []
+  : T extends [infer F, ...infer R]
+  ? F extends U
+    ? Filter<R, T>
+    : [F, ...Filter<R, U>]
+  : never;
+type TupleIncludes<T extends unknown[], U> = Length<Filter<T, U>> extends Length<T> ? false : true;
+type StringIncludes<S extends string, D extends string> = S extends `${infer T}${D}${infer U}` ? true : false;
+type Includes<T extends unknown[] | string, U> = T extends unknown[]
+  ? TupleIncludes<T, U>
+  : T extends string
+  ? U extends string
+    ? StringIncludes<T, U>
+    : never
+  : never;
+
+export type Split<S extends string, D extends string> = string extends S
+  ? string[]
+  : S extends ''
+  ? []
+  : S extends `${infer T}${D}${infer U}`
+  ? [T, ...Split<U, D>]
+  : [S];
+
+export type ValidPaths<T> = keyof T extends never
+  ? never
+  : {
+      [K in keyof T]: T[K] extends never
+        ? never
+        : T[K] extends Record<string | number | symbol, unknown>
+        ? K extends string
+          ? `${K}.${ValidPaths<T[K]>}` | K
+          : never
+        : K;
+    }[keyof T] &
+      string;
+
+export type ValidPathTuples<T> = keyof T extends never
+  ? never
+  : {
+      [K in keyof T]: T[K] extends never
+        ? never
+        : T[K] extends Record<string | number | symbol, unknown>
+        ? [K, ...ValidPathTuples<T[K]>] | [K]
+        : [K];
+    }[keyof T];
+
+// string version
+export type NestedType<T, P extends string> = Includes<P, '.'> extends true
+  ? PopFront<Split<P, '.'>> extends keyof T
+    ? NestedType<T[PopFront<Split<P, '.'>>], Join<Shift<Split<P, '.'>>, '.'>>
+    : never
+  : P extends keyof T
+  ? T[P]
+  : never;
+
+// tuple version
+export type NestedTypeByTuple<T, P extends string[]> = Length<P> extends 1
+  ? Pop<P> extends keyof T
+    ? T[Pop<P>]
+    : never
+  : PopFront<P> extends keyof T
+  ? Shift<P> extends string[]
+    ? NestedTypeByTuple<T[PopFront<P>], Shift<P>>
+    : never
+  : never;
+
+// String version internally using tuples
+// Bonus: Also errors now
+export type NestedTypeUsingTuplesAgain<T, P extends ValidPaths<T>> = NestedTypeByTuple<T, Split<P, '.'>>;
+
+export type NestedTypeUsingTuplesAgain2<T, P extends ValidPathTuples<T>> = NestedType<T, Join<P, '.'>>;
+
+export type NestedKeyOf<T extends object> = ValidPathTuples<T>;
+
+export type NestedKeyOf2<T extends object, P extends unknown[] = []> = {
+  [K in keyof T]: T[K] extends object ? [...P, K] | NestedKeyOf2<T[K], [...P, K]> : [...P, K];
+}[keyof T];
+
+export type ExtractNestedValue<P extends unknown[] = []> = P extends [infer First, ...infer _Rest] ? [First] : never;
+
+export type DeepPartial<T> = T extends object ? { [P in keyof T]?: DeepPartial<T[P]> } : T;

src/components/core/form/utils.test.ts

@@ -0,0 +1,43 @@
+import { expect } from 'vitest';
+import type { NestedType } from './models';
+import { isObject } from './utils';
+
+// Demo
+const dictionary = {
+  someProp: 123,
+  nested: {
+    moreProps: 333,
+    deeper: {
+      evenDeeper: {
+        deepest: 'string'
+      }
+    },
+    alsoDeeper: {
+      randomProp: {
+        anotherProp: 'another'
+      }
+    }
+  }
+} as const;
+
+type MyDict = typeof dictionary;
+
+type Test = NestedType<MyDict, 'nested.alsoDeeper.randomProp.anotherProp'>; // = yay
+
+const Fn = <T, P extends string>(dict: T, path: P): NestedType<T, P> => {
+  // skip impl.
+  return undefined as any;
+};
+
+const testFromFn = Fn(dictionary, 'nested.moreProps'); // = 333
+
+describe('Test `Form Utilities`', () => {
+  it('testing the `isObject()`', () => {
+    expect(isObject(undefined)).toBe(false);
+    expect(isObject(null)).toBe(false);
+    expect(isObject({}, true)).toBe(true);
+    expect(isObject({}, false)).toBe(false);
+    expect(isObject([])).toBe(false);
+    expect(isObject({ test: 'test' })).toBe(true);
+  });
+});

src/components/core/form/utils.ts

@@ -0,0 +1,56 @@
+import type { NestedTypeUsingTuplesAgain2, ValidPathTuples } from './models';
+
+export type FieldPath<Data> = Data extends any[]
+  ? { [K in keyof Data]: FieldPath<Data[K]> }
+  : Data extends object
+  ? { [K in keyof Data]: FieldPath<Data[K]> } & { toPath: () => string }
+  : { toPath: () => string };
+
+export function isObject(data: unknown, empty: boolean = true): data is object {
+  if (typeof data !== 'object') return false;
+  else if ([null, undefined].includes(data)) return false;
+  else if (Object.is({}, data)) return empty;
+  else if (Array.isArray(data)) return false;
+  else if (Object.keys(data).length === 0) return empty;
+  else return true;
+}
+
+export function buildPath<Data>(data: Data, path: string = '$'): FieldPath<Data> {
+  if (isObject(data)) {
+    return {
+      ...Object.fromEntries(Object.keys(data).map(k => [k, buildPath(data[k], `${path}.${k}`)])),
+      toPath: () => path
+    } as any;
+  } else if (Array.isArray(data)) {
+    return data.map((v, i) => buildPath(v, `${path}.${i}`)) as any;
+  } else return { toPath: () => path } as any;
+}
+
+export function getValueFromPath<Data extends object>(data: Data, path: string): unknown {
+  let current = data;
+  if (data === undefined || data === null) return null;
+
+  let paths = path.split('.');
+  if (paths[0] === '$') paths = paths.slice(1);
+
+  for (let i = 0; i < paths.length; ++i) {
+    if (current[paths[i]] === undefined) return undefined;
+    current = current[paths[i]];
+  }
+  return current;
+}
+
+export const setValue = <T extends object, P extends string[], V>(obj: T, path: P, value: V) => {
+  if (!path?.length) return value;
+  else return { ...obj, [path[0]]: setValue(obj[path[0]], path.slice(1), value) };
+};
+
+export const setValueFromPath = <
+  T extends object,
+  P extends ValidPathTuples<T>,
+  V extends NestedTypeUsingTuplesAgain2<T, P>
+>(
+  store: T,
+  path: P,
+  value: V
+): T => setValue(store, path as string[], value) as T;