[ADD] useMap and useState hooks

Author: nDriaDev

apps/react-tools-demo/scripts/generateMarkdown.js

@@ -1,6 +1,7 @@
 import path from "node:path";
 import fs from 'node:fs/promises';
 import {URL} from 'url';
+import process from "node:process";
 
 const __dirname = new URL('.', import.meta.url).pathname;
 
@@ -40,7 +41,7 @@ function splitType(string){
 	let newCode = [];
 	let last = "";
 	for (let part of string){
-		if (last.split("(").length == last.split(")").length && last.split("[").length == last.split("]").length && last.split("{").length == last.split("}").length){
+		if (last.split("<").length === last.split(">").length && last.split("(").length === last.split(")").length && last.split("[").length === last.split("]").length && last.split("{").length === last.split("}").length){
 			last = part;
 			newCode.push(part);
 		}
@@ -374,6 +375,7 @@ async function generateMarkDown() {
 		await deleteAllFiles(pathMarkdownDir);
 		await generateUtilsMarkDown();
 		await generateComponentsMarkDown();
+		process.exit(0);
 	} catch (error) {
 		console.error(error);
 	}

apps/react-tools-demo/src/components/hooks/useMap/UseMap.tsx

@@ -1,6 +1,16 @@
-import { useCallback, useRef } from "react";
+import { useCallback, useMemo, useRef } from "react";
 import { useMap } from "../../../../../../packages/react-tools/src";
 
+/**
+The component has:
+- A _useMap_ internal state.
+- An uncontrolled input with _inputRef_ ref used to execute buttons actions.
+- A button _Set_ that set the input value (format like __id__ _-_ __value__) into state by _set_ method of Map interface.
+- A button _Delete_ that remove item into state by _key_, written in input by _delete_ method of Map interface.
+- A button _Clear_ that clear state by _clear_ method of Map interface.
+- A button _IncrementAll_ that adds 1 to every value into map by _forEach_ method of Map interface.
+- A variable parsed create with useMemo that memoized a concatenated string of state key-value pairs, separated by comma.
+ */
 const UseMap = () => {
 	const map = useMap<string, number>();
 
@@ -23,14 +33,21 @@ const UseMap = () => {
 		map.forEach((value, key, map) => { map.set(key, value + 1) });
 	}, [map]);
 
+	const parsed = useMemo(() => {
+		const temp: string[] = [];
+		temp.map
+		map.forEach((value, key) => temp.push(key + " - " + value));
+		return temp.join(", ");
+	}, [map]);
+
 	return (<>
-		{map.map((value, key) => key + " - " + value).join(", ")}
+		{parsed}
 		<br/>
 		<input ref={inputRef} type="text" />
 		<br />
 		<div style={{ marginTop: 15, gridTemplateColumns: 'auto auto', justifyContent: 'center', display: 'grid', gap: '5px' }}>
-			<button onClick={del}>Delete</button>
 			<button onClick={set}>Set</button>
+			<button onClick={del}>Delete</button>
 			<button onClick={clear}>Clear</button>
 			<button onClick={incrementAll}>Increment all</button>
 		</div>

apps/react-tools-demo/src/components/hooks/useSet/UseSet.tsx

@@ -0,0 +1,52 @@
+import { useCallback, useMemo, useRef } from "react";
+import { useSet } from "../../../../../../packages/react-tools/src";
+
+/**
+The component has:
+- A _useSet_ internal state.
+- An uncontrolled input with _inputRef_ ref used to execute buttons actions.
+- A button _Add_ that adds the input value into state by _add_ method of Set interface.
+- A button _Delete_ that remove item into state by _key_, written in input by _delete_ method of Set interface.
+- A button _Clear_ that clear state by _clear_ method of Set interface.
+- A variable _parsed_ create with __useMemo__ that memoized a concatenated string of state values, separated by comma.
+ */
+const UseSet = () => {
+	const set = useSet<string | number>();
+
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	const del = useCallback(() => {
+		set.delete(inputRef.current!.value);
+	}, [set]);
+
+	const add = useCallback(() => {
+		const { value } = inputRef.current!;
+		set.add(value);
+	}, [set]);
+
+	const clear = useCallback(() => {
+		set.clear();
+	}, [set]);
+
+	const parsed = useMemo(() => {
+		const temp: (string|number)[] = [];
+		set.forEach((value) => temp.push(value));
+		return temp.join(", ");
+	}, [set]);
+
+	return (<>
+		{parsed}
+		<br/>
+		<input ref={inputRef} type="text" />
+		<br />
+		<div style={{ marginTop: 15, gridTemplateColumns: 'auto auto', justifyContent: 'center', display: 'grid', gap: '5px' }}>
+			<button onClick={add}>Add</button>
+			<button onClick={del}>Delete</button>
+			<button onClick={clear}>Clear</button>
+		</div>
+	</>);
+}
+
+UseSet.displayName = "UseSet";
+
+export {UseSet}

apps/react-tools-demo/src/constants/components.ts

@@ -10,6 +10,7 @@ export const COMPONENTS = [
 		"useLocalStorageState",
 		"useSessionStorageState",
 		"useMap",
+		"useSet",
 		"useMemoizedFunction",
 		"useMemoCompare",
 		"useMemoDeepCompare",

apps/react-tools-demo/src/markdown/useLocalStorageState.md

@@ -81,15 +81,12 @@ object with serializer and deserializer function to handle values in localStorag
 > - __Union of__:  
 >     - __Array__:  
 >         - _T_  
->         - _() => T_  
->         - _() => void_  
+>         - _() => T, () => void_  
 >     - __Array__:  
 >         - _Dispatch<SetStateAction<T>>_  
->         - _() => T_  
->         - _() => void_  
+>         - _() => T, () => void_  
 >     - __Array__:  
 >         - _T_  
 >         - _Dispatch<SetStateAction<T>>_  
->         - _() => T_  
->         - _() => void_  
+>         - _() => T, () => void_  
 >

apps/react-tools-demo/src/markdown/useMap.md

@@ -1,10 +1,9 @@
 # useMap
-Hooks to use _Map data structure_ to handle component state.
+Hooks to use _Map data structure_ to handle component state with all Map methods.
 
 ## Usage
 
 ```tsx
-
 const UseMap = () => {
 	const map = useMap<string, number>();
 
@@ -27,14 +26,21 @@ const UseMap = () => {
 		map.forEach((value, key, map) => { map.set(key, value + 1) });
 	}, [map]);
 
+	const parsed = useMemo(() => {
+		const temp: string[] = [];
+		temp.map
+		map.forEach((value, key) => temp.push(key + " - " + value));
+		return temp.join(", ");
+	}, [map]);
+
 	return (<>
-		{map.map((value, key) => key + " - " + value).join(", ")}
+		{parsed}
 		<br/>
 		<input ref={inputRef} type="text" />
 		<br />
 		<div style={{ marginTop: 15, gridTemplateColumns: 'auto auto', justifyContent: 'center', display: 'grid', gap: '5px' }}>
-			<button onClick={del}>Delete</button>
 			<button onClick={set}>Set</button>
+			<button onClick={del}>Delete</button>
 			<button onClick={clear}>Clear</button>
 			<button onClick={incrementAll}>Increment all</button>
 		</div>
@@ -46,7 +52,13 @@ UseMap.displayName = "UseMap";
 export {UseMap}
 ```
 
-
+> The component has:
+> - A _useMap_ internal state.
+> - An uncontrolled input with _inputRef_ ref used to execute buttons actions.
+> - A button _Set_ that set the input value (format like __id__ _-_ __value__) into state by _set_ method of Map interface.
+> - A button _Delete_ that remove item into state by _key_, written in input by _delete_ method of Map interface.
+> - A button _Clear_ that clear state by _clear_ method of Map interface.
+> - A button _IncrementAll_ that adds 1 to every value into map by _forEach_ method of Map interface.
 
 
 ## API
@@ -64,6 +76,5 @@ An Array or other iterable object whose elements are key-value pairs, or functio
 > ### Returns
 >
 > 
-> - _Map<K_  
-> - _V>_  
+> - _Map<K,V>_  
 >

apps/react-tools-demo/src/markdown/usePubSubModel.md

@@ -60,7 +60,6 @@ usePubSubModel <T>(topic: string): { publish: (value?: T) => Promise<void>, subs
 > __result__: contains the _publish_ and _subscribe_ functions. The result of invoking the _subscribe_ function in turn returns a function that can be used to _unsubscribe_ the topic
 > - __Union of__:  
 >     - __Object__:  
->         - __publish__ : _(value?: T) => Promise<void>_  
->         - __subscribe__ : _(listener: (value?: T) => Promise<void_  
+>         - __publish__ : _(value?: T) => Promise<void>, subscribe: (listener: (value?: T) => Promise<void_  
 >     - _void) => () => void }_  
 >

apps/react-tools-demo/src/markdown/useReducerGetReset.md

@@ -29,6 +29,5 @@ Function that should return the _initial state_. If it’s not specified, the in
 > - __Array__:  
 >     - _ReducerState<R>_  
 >     - _Dispatch<ReducerAction<R>>_  
->     - _()=>ReducerState<R>_  
->     - _()=>void_  
+>     - _()=>ReducerState<R>, ()=>void_  
 >

apps/react-tools-demo/src/markdown/useReducerHistory.md

@@ -34,11 +34,5 @@ history capacity (default 'no-limit').
 >     - __Object__:  
 >         - __history__ : _readonly ReducerState<R>[]_  
 >         - __presentPointer__ : _number_  
->         - __trackUpdate__ : _(enable:boolean) => void_  
->         - __canUndo__ : _boolean_  
->         - __canRedo__ : _boolean_  
->         - __undo__ : _() => void_  
->         - __redo__ : _() => void_  
->         - __go__ : _(index: number) => void_  
->         - __clear__ : _(value?: ReducerAction<R>) => void_  
+>         - __trackUpdate__ : _(enable:boolean) => void, canUndo: boolean, canRedo: boolean, undo: () => void, redo: () => void, go: (index: number) => void, clear: (value?: ReducerAction<R>) => void_  
 >

apps/react-tools-demo/src/markdown/useReducerHistoryGetter.md

@@ -31,15 +31,5 @@ history capacity (default 'no-limit').
 > - __Array__:  
 >     - _ReducerState<R>_  
 >     - _Dispatch<ReducerAction<R>>_  
->     - _()=>ReducerState<R>_  
->     - __Object__:  
->         - __history__ : _readonly ReducerState<R>[]_  
->         - __presentPointer__ : _number_  
->         - __trackUpdate__ : _(enable:boolean) => void_  
->         - __canUndo__ : _boolean_  
->         - __canRedo__ : _boolean_  
->         - __undo__ : _() => void_  
->         - __redo__ : _() => void_  
->         - __go__ : _(index: number) => void_  
->         - __clear__ : _(value?: ReducerAction<R>) => void_  
+>     - _()=>ReducerState<R>, {history: readonly ReducerState<R>[], presentPointer: number, trackUpdate: (enable:boolean) => void, canUndo: boolean, canRedo: boolean, undo: () => void, redo: () => void, go: (index: number) => void, clear: (value?: ReducerAction<R>) => void}_  
 >