[ADD] useSessionStorageState app

Author: nDriaDev

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

@@ -58,7 +58,14 @@ function splitType(string){
 function parseType(string, tab=0) {
 	const typeArray= [];
 	let currTab = tab;
-	if(string.startsWith("[")) {
+	if(string.includes(" | ")) {
+		typeArray.push(Array(currTab*4).fill(true).map(() => " ").join("")+ "- __Union of__:  ");
+		currTab++;
+		string.split(" | ").forEach(split => {
+			typeArray.push(...parseType(split, currTab, true))
+		});
+	}
+	else if(string.startsWith("[")) {
 		typeArray.push(Array(currTab*4).fill(true).map(() => " ").join("")+ "- __Array__:  ");
 		currTab++;
 		string = string.substring(1, string.length-1);
@@ -244,14 +251,27 @@ function buildHooksUtilsMarkdownObject(file) {
 		}
 	});
 	let codeLines = fileSplitted.slice(fileSplitted.findIndex(line => line === lines.at(-1))+2);
-	let typeLine = codeLines[codeLines.findIndex(line => !line.startsWith("//") && !line.startsWith(" */") && !line.startsWith("*/") && !line.startsWith(("/*")))];
+	let typeLineIndex = codeLines.findIndex(line => !line.startsWith("//") && !line.startsWith(" */") && !line.startsWith("*/") && !line.startsWith(("/*")));
+	let typeLine = codeLines[typeLineIndex];
 	if(typeLine.startsWith("export")) {
 		typeLine = typeLine.substring("export ".length);
 	}
 	if(typeLine.startsWith("default")) {
 		typeLine = typeLine.substring("default ".length);
 	}
 	if(typeLine.startsWith("function")) {
+		if(codeLines[typeLineIndex+1].startsWith("function")) {
+			//is a overloaded function
+			let index = typeLineIndex+1,
+			line = codeLines[index].substring("function ".length).split("").reverse().join("");
+			while(!line.startsWith("{")) {
+				line = codeLines[index+1].split("").reverse().join("");
+				index++;
+			}
+			line = codeLines[index].substring("function ".length, codeLines[index].length-1);
+			obj.type = line;
+			return obj;
+		}
 		typeLine = typeLine.substring("function ".length);
 	}
 	if(typeLine.startsWith("const")) {

apps/react-tools-demo/src/components/hooks/useLocalStorage/UseLocalStorage.tsx

@@ -0,0 +1,55 @@
+import { BaseSyntheticEvent, useCallback, useEffect, useRef } from "react";
+import { useLocalStorageState } from "../../../../../../packages/react-tools/src/hooks";
+
+/**
+The component has:
+- An internal _useLocalStorage_ state with __key__ _demo_ and __initialState__ _prova_ from which gets __remove__ function.
+- A Child component 1 that uses _useLocalStorage_ with _read_ __mode__ and __key__ _demo_ to read from localStorage.
+- A Child component 2 that uses _useLocalStorage_ with _write_ __mode__ and __key__  _demo_ to write to LocalStorage with an onSubmit form event with a input text value.
+- An useEffect that invokes __remove__ function and delete item with key _demo_ from localStorage when the component unmounts.
+
+When component is mounted, the Child1 state is _prova_. It can be changed by Child2. If you change state and open the page into another tab, after mounting, the Child1 display the new value of state and every changes made is reflected in both tabs.
+ */
+const Child = () => {
+	const [state] = useLocalStorageState<string>({key:"demo", opts: {mode: "read"}});
+	return (<>
+		<h3>Child component 1</h3>
+		<p>State is {state}</p>
+	</>)
+}
+
+const Child2 = () => {
+	const [setState] = useLocalStorageState<string>({key:"demo", opts: {mode: "write"}});
+	return (<>
+		<h3>Child component 2</h3>
+		<form onSubmit={(e: BaseSyntheticEvent) => {
+			setState(e.target[0].value);
+			e.preventDefault();
+		}}>
+			<input type="text" />
+		</form>
+	</>)
+}
+
+const UseLocalStorageState = () => {
+	const [, , , remove] = useLocalStorageState({ key: "demo", initialState: "prova" });
+	const render = useRef(0);
+	const clear = useCallback(() => remove(), [remove]);
+
+	useEffect(() => {
+		render.current++;
+		return () => {
+			render.current === 2 && clear();
+		}
+	}, [clear]);
+
+	return (<>
+		<Child />
+		<br />
+		<Child2/>
+	</>);
+}
+
+UseLocalStorageState.displayName = "UseLocalStorageState";
+
+export { UseLocalStorageState };

apps/react-tools-demo/src/components/hooks/useLocalStorageState/UseLocalStorageState.tsx

@@ -0,0 +1,54 @@
+import { BaseSyntheticEvent, useCallback, useEffect } from "react";
+import { useSessionStorageState } from "../../../../../../packages/react-tools/src/hooks";
+
+/**
+The component has:
+- An internal _useSessionStorage_ state with __key__ _demo_ and __initialState__ _prova_ from which gets __remove__ function.
+- A Child component 1 that uses _useSessionStorage_ with _read_ __mode__ and __key__ _demo_ to read from sessionStorage.
+- A Child component 2 that uses _useSessionStorage_ with _write_ __mode__ and __key__  _demo_ to write to sessionStorage with an onSubmit form event with a input text value.
+- An useEffect that invokes __remove__ function and delete item with key _demo_ from sessionStorage when the component unmounts.
+
+When component is mounted, the Child1 state is _prova_. It can be changed by Child2. If you open the page into another tab, changes aren't reflected in both tabs.
+ */
+const Child = () => {
+	const [state] = useSessionStorageState<string>({key:"demo", opts: {mode: "read"}});
+	return (<>
+		<h3>Child component 1</h3>
+		<p>State is {state}</p>
+	</>)
+}
+
+const Child2 = () => {
+	const [setState] = useSessionStorageState<string>({key:"demo", opts: {mode: "write"}});
+	return (<>
+		<h3>Child component 2</h3>
+		<form onSubmit={(e: BaseSyntheticEvent) => {
+			setState(e.target[0].value);
+			e.preventDefault();
+		}}>
+			<input type="text" />
+		</form>
+	</>)
+}
+
+const UseSessionStorageState = () => {
+	const [, , , remove] = useSessionStorageState({ key: "demo", initialState: "prova" });
+
+	const clear = useCallback(() => remove(), [remove]);
+
+	useEffect(() => {
+		return () => {
+			clear();
+		}
+	}, [clear]);
+
+	return (<>
+		<Child />
+		<br />
+		<Child2/>
+	</>);
+}
+
+UseSessionStorageState.displayName = "UseSessionStorageState";
+
+export { UseSessionStorageState };

apps/react-tools-demo/src/components/hooks/useSessionStorageState/UseSessionStorageState.tsx

@@ -7,7 +7,8 @@ export const COMPONENTS = [
 		"useReducerGetReset",
 		"useReducerHistory",
 		"useReducerHistoryGetter",
-		"useLocalStorage",
+		"useLocalStorageState",
+		"useSessionStorageState",
 		"useMemoizedFunction",
 		"useMemoCompare",
 		"useMemoDeepCompare",

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

@@ -56,5 +56,7 @@ target on which dispatch event
 > ### Returns
 >
 > __dispatch__: function that dispatch the event on target
-> - _(evt: Event | CustomEvent) => void_  
+> - __Union of__:  
+>     - _(evt: Event_  
+>     - _CustomEvent) => void_  
 >