@ask-ell/react 0.0.1

package/README.md

@@ -0,0 +1,7 @@
+# react
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build react` to build the library.

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@ask-ell/react",
+  "version": "0.0.1",
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.2"
+  }
+}

package/src/forms.ts

@@ -0,0 +1,92 @@
+import { Dispatch, FormEvent, SetStateAction, useState } from "react";
+
+export enum SubmitMode {
+    ON_TRIGGER,
+    AUTOMATIC
+}
+
+export type ErrorSetter<FormData> = (key: keyof FormData) => (errorMessage: string) => void;
+
+export type OnSubmitCallbackParams<FormData> = {
+    formData: FormData;
+    appendError: ErrorSetter<FormData>;
+};
+
+export type OnSubmitCallback<FormData> = (params: OnSubmitCallbackParams<FormData>) => void;
+
+export type UseFormParams<FormData> = {
+    defaultValue: FormData;
+    onSubmit: OnSubmitCallback<FormData>;
+    submitMode?: SubmitMode
+};
+
+type FormDataFieldUpdater<FormData> = <Key extends keyof FormData>(key: Key) => (value: FormData[Key]) => void;
+
+type SubmitTrigger = () => void;
+
+export interface ErrorsMap<FormData> extends Map<keyof FormData, string[]> { }
+
+export type FormController<FormData> = {
+    formData: FormData;
+    errors: ErrorsMap<FormData>;
+    setFormData: Dispatch<SetStateAction<FormData>>;
+    updateFormData: FormDataFieldUpdater<FormData>;
+    submit: SubmitTrigger;
+    reset: () => void;
+};
+
+export function useFormController<FormData>({ defaultValue, onSubmit, submitMode }: UseFormParams<FormData>): FormController<FormData> {
+    const [formData, setFormData] = useState<FormData>(defaultValue);
+    const [errors, setErrors] = useState<ErrorsMap<FormData>>(new Map());
+
+    const appendError: ErrorSetter<FormData> = (key: keyof FormData) => (message: string): void => {
+        const existingErrors: string[] = errors.get(key) ?? [];
+        existingErrors.push(message);
+        errors.set(key, existingErrors);
+        setErrors(new Map(errors));
+    }
+
+    const prepareOnSubmit = (callback: () => void) => {
+        errors.clear()
+        setErrors(new Map(errors));
+        callback();
+    }
+
+    const updateFormData: FormDataFieldUpdater<FormData> = <Key extends keyof FormData>(key: Key) => (value: FormData[Key]) => {
+        setTimeout((): void => {
+            const newFormData: FormData = {
+                ...formData,
+                [key]: value
+            }
+            setFormData(() => newFormData);
+            if (submitMode === SubmitMode.AUTOMATIC) {
+                prepareOnSubmit(
+                    (): void => onSubmit({ formData: newFormData, appendError })
+                );
+            }
+        });
+    };
+
+    const submit: SubmitTrigger = (): void => prepareOnSubmit(
+        (): void => onSubmit({ formData, appendError })
+    );
+
+    const reset = (): void => {
+        setFormData(defaultValue)
+        errors.clear();
+    }
+
+    return {
+        formData,
+        errors,
+        setFormData,
+        updateFormData,
+        submit,
+        reset
+    }
+}
+
+export const preventDefault = (callback: () => void) => (event: FormEvent): void => {
+    event.preventDefault();
+    callback();
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './forms.js'
+export * from './keyboard-events.js'
+export * from './select-events.js'

package/src/keyboard-events.ts

@@ -0,0 +1,19 @@
+import { ChangeEvent, KeyboardEvent } from 'react';
+
+
+export const handleEnterKeyDown =
+  (callback: () => void) => (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      callback();
+    }
+  };
+
+export const handleKeyboardEvent =
+  (callback: (fieldValue: string) => void) => <TargetType>(event: KeyboardEvent<TargetType>) => {
+    callback((event.target as any).value as string);
+  };
+
+export const handleChangeEvent =
+  (callback: (fieldValue: string) => void) => <TargetType>(event: ChangeEvent<TargetType>) => {
+    callback((event.target as any).value as string);
+  };

package/src/select-events.ts

@@ -0,0 +1,5 @@
+export const handleSelectChange =
+    (callback: (data: string) => void) =>
+        <T>(event: T): void => {
+            callback((event as any).target.value);
+    };

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "src",
+    "outDir": "dist",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
+    "emitDeclarationOnly": false,
+    "forceConsistentCasingInFileNames": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "references": []
+}