[IMPL] types routes + [FIX] various

Author: nDriaDev

README.md

@@ -8,7 +8,7 @@
 	<br>
 </h1>
 
-<h3 align="center">A collection of Hooks, Components and Utilities for React
+<h3 align="center">A collection of Hooks, Components, Utilities and Types for React
 </h3>
 
 <div align="center">
@@ -196,6 +196,10 @@ Go to [Demo](https://ndriadev.github.io/react-tools) to see and try all implemen
 	- [_removeDuplicatedFromArrayObjects_](#removeDuplicatedFromArrayObjects)
 	- [_removePropertiesFromArrayObjects_](#removePropertiesFromArrayObjects)
 
+- [__TYPES__](#types)
+
+	- [__UTILITY TYPES__](#utility-types)
+
 ## HOOKS
 
 ## STATE
@@ -1141,6 +1145,111 @@ Function that, given an array of objects and a property or an array of propertie
 removePropertiesFromArrayObjects<T, E extends string | number | symbol = keyof T>(array: T[], property: E | E[]): Omit<T, E>[]
 ```
 
+## TYPES
+
+## Utility Types
+
+Typescript utility types for specified use cases.
+
+### NestedKeyOf
+
+Utility type that constructs a type by picking all properties and nested proprerties from __`T`__ in form _`property.nestedProprerty`_.
+```tsx
+type NestedKeyOf<T extends Record<string, unknown>>
+```
+
+### ErrorModel
+
+Utility type that constructs an object from __`T`__ and whose property values are _`boolean`_.
+```tsx
+type ErrorModel<T extends object>
+```
+
+### SelectivePartial
+
+Utility type that works like __Partial__ but allows to specify which properties set to optional.
+```tsx
+type SelectivePartial<T extends object, E extends keyof T>
+```
+
+### RecursivePartial
+
+Utility type that works like __Partial__ but set nested properties to optional also.
+```tsx
+type RecursivePartial<T extends object>
+```
+
+### Optional
+
+Utility type that constructs a type that is __`T`__ or __`E`__, if specified otherwise __`null`__.
+```tsx
+type Optional<T = unknown, E = null>
+```
+
+### DependencyListTyped
+
+Utility type that works like __DependencyList__ react type but it can be specified dependencies list element types.
+```tsx
+type DependencyListTyped<T = unknown>
+```
+
+### Union
+
+Utility type that given an array constructs union type from array elements type.
+```tsx
+type Union<T extends unknown[]>
+```
+
+### ExtractTail
+
+Utility type that given an array extracts a new array with all elements from array expect first.
+```tsx
+type ExtractTail<T extends unknown[]>
+```
+
+### ExtractMiddle
+
+Utility type that given an array extracts a new array with all elements from array expect first and last.
+```tsx
+type ExtractMiddle<T extends unknown[]>
+```
+
+### ExtractHead
+
+Utility type that given an array extracts a new array with all elements from array expect last.
+```tsx
+type ExtractHead<T extends unknown[]>
+```
+
+### PartialRecord
+
+Utility type that constructs a record with all properties set to optional.
+```tsx
+type PartialRecord<K extends keyof any, T>
+```
+
+### ArrayMinLength1
+
+Utility type that constructs an array of __`T`__ with one element at least.
+```tsx
+type ArrayMinLength1<T>
+```
+
+### LanguageBCP47Tags
+
+Utility type for Language BCP-47 tags.
+```tsx
+type LanguageBCP47Tags
+```
+
+### TypedArray
+
+Utility type for __`Typed Arrays`__.
+```tsx
+type TypedArray
+```
+
+
 ## ESLint configuration
 To validate dependencies of custom hooks like `useMemoCompare`, configure `exhaustive-deps` with the `additionalHooks` option:
 ```js

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

@@ -156,6 +156,7 @@ async function createLinkRouter(router) {
 	createLinkHooksRoutes(router, HOOKS_STATE_FILES, HOOKS_LIFECYCLE_FILES, HOOKS_PERFORMANCE_FILES, HOOKS_EVENTS_FILES, HOOKS_APIDOM_FILES);
 	createLinkRoutes(router, COMPONENTS_FILES, "components")
 	createLinkRoutes(router, UTILS_FILES, "utils")
+	createLinkRoutes(router, ["utilityTypes"], "types")
 }
 
 async function generateMainLayout() {

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

@@ -8,6 +8,7 @@ const __dirname = new URL('.', import.meta.url).pathname;
 
 const PATH_DEMO_SRC = path.join(__dirname, '..', 'src');
 const PATH_LIB_SRC = path.join(__dirname, "..", "..", "..", "packages", "react-tools-lib", "src");
+const PATH_UTILITY_MODEL_TYPES_FILE = path.join(__dirname, "..", "..", "..", "packages", "react-tools-lib", "src", "models", "utilityTypes.model.ts");
 const DEMO_COMPONENT_DIR_NAME = "pages";
 const MARKDOWWN_DIR_NAME = "markdown";
 const HOOKS_DIR_NAME = "hooks";
@@ -213,13 +214,15 @@ ${jsDoc.usage ? `\n## Usage\n\n${jsDoc.usage}\n`:""}
 ${jsDoc.type}
 \`\`\`
 
-> ### Params
+${jsDoc.params && jsDoc.params.length > 0 ?
+`> ### Params
 >
 ${jsDoc.params && jsDoc.params.length > 0
-	? jsDoc.params.map(el => `> - __${el.name}__: _${el.type}_${el.description ? '  \n'+el.description : ""}`).join("\n")
+	? jsDoc.params.map(el => `> - __${el.name}__: _${el.type}_${el.description ? '  \n' + el.description : ""}`).join("\n")
 	: ">"
 }
 >
+`:""}
 
 > ### Returns
 >
@@ -452,11 +455,72 @@ async function generateComponentsMarkDown() {
 	}
 }
 
+async function generateModelMarkDown() {
+	const utilityTypesFile = await fs.readFile(path.join(PATH_UTILITY_MODEL_TYPES_FILE), { encoding: "utf8" });
+	const stringBuffer = {
+		value: "",
+		/**
+		 *
+		 * @param {string} s
+		 * @returns {this}
+		 */
+		add(s) {
+			this.value += s + "\n";
+			return this;
+		},
+		/**
+		 *
+		 * @param {string[]} s
+		 * @returns {this}
+		 */
+		set(s) {
+			s.forEach(slice => { this.value += slice + "\n" });
+			return this;
+		}
+	}
+	const utilityTypesFileSplitted = utilityTypesFile.split("\n").slice(2).filter(el => !["/**", " */", ""].includes(el));
+	stringBuffer.set([
+		"# Utility Types",
+		"",
+		"Typescript utility types for specified use cases.",
+		""
+	]);
+	for (let i = 0, size = utilityTypesFileSplitted.length; i < size;) {
+		const description = utilityTypesFileSplitted[i].substring(3);
+		const type = utilityTypesFileSplitted[i + 1];
+		let title, generics;
+		if (type.indexOf("> =") !== -1) {
+			title = type.substring(12, type.indexOf("<"));
+			generics = type.substring(type.indexOf("<"), type.indexOf("> =") + 1);
+		} else {
+			title = type.substring(12, type.indexOf(" ="));
+		}
+		stringBuffer.set([
+			"## " + title,
+			"",
+			description,
+			"```tsx",
+			"type " + title + (generics ? generics : ""),
+			"```",
+			""
+		]);
+		i++;
+		while (!utilityTypesFileSplitted[i].startsWith(" * ")) {
+			i++;
+			if (i === size) {
+				break;
+			}
+		}
+	}
+	await fs.writeFile(path.join(PATH_DEMO_SRC, MARKDOWWN_DIR_NAME, "utilityTypes.md"), stringBuffer.value, { encoding: "utf8" });
+}
+
 async function generateMarkDown() {
 	try {
 		await deleteAllFiles(path.join(PATH_DEMO_SRC, MARKDOWWN_DIR_NAME));
 		await generateUtilsMarkDown();
 		await generateHooksMarkDown();
+		await generateModelMarkDown();
 		await generateComponentsMarkDown();
 		process.exit(0);
 	} catch (error) {

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

@@ -274,6 +274,24 @@ async function createRouter(router) {
 	router.add(`					children: [`);
 	createRoutes(router, UTILS_FILES, "utils")
 	router.add(`					]`);
+	router.add('				},');
+	router.add('				{');
+	router.add('					path: "types",');
+	router.add('					element: <Suspense fallback={<Spinner/>}>');
+	router.add('						<Outlet />');
+	router.add('					</Suspense>,');
+	router.add(`					children: [`);
+	router.add(`						{`);
+	router.add(`							index: true,`);
+	router.add(`							element: <Navigate to={"/types/utilityTypes"} replace/>,`);
+	router.add(`						},`);
+	router.add(`						{`);
+	router.add(`							path: "utilityTypes",`);
+	router.add(`							element: <Suspense fallback={<Spinner/>}>`);
+	router.add(`								<ComponentLayout markdown={utilityTypesMD} />`);
+	router.add(`							</Suspense>`);
+	router.add(`						}`);
+	router.add(`					]`);
 	router.add('				}');
 	router.add('			]');
 	router.add('		}');

apps/react-tools-demo/src/layout/MainLayout.tsx

@@ -1506,6 +1506,18 @@ export default function MainLayout() {
 						>
 							removePropertiesFromArrayObjects
 						</Link>
+						<p className="sub-type">Types</p>
+						<Link
+							className={pathname === "/types/utilityTypes" ? 'active' : ''}
+							ref={node => linksRef.current["utilityTypes"] = node}
+							to="/types/utilityTypes"
+							onClick={() => {
+								containerRef.current?.scrollTo(0, 0);
+								window.innerWidth < 1190 && closeNav();
+							}}
+						>
+							utilityTypes
+						</Link>
 					</nav>
 				</>
 			}

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

@@ -35,6 +35,7 @@ it is rendered when an error occurred. It can be an element, or a Component or a
 element to render.
 >
 
+
 > ### Returns
 >
 > __result__: element or fallback.

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

@@ -62,6 +62,7 @@ callback executed to map _of_ elements.
 callback executed to sort _of_ elements.
 >
 
+
 > ### Returns
 >
 > __result__: elements list, rendered from _of_ prop or _fallback_.

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

@@ -42,6 +42,7 @@ function that will be executed before loading component .
 function that will be executed after loading component .
 >
 
+
 > ### Returns
 >
 > __element__

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

@@ -36,6 +36,7 @@ optional element to render when _when_ prop is false.
 optional element to render when _when_ prop is true.
 >
 
+
 > ### Returns
 >
 > __element__: the element rendered or null.

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

@@ -48,6 +48,7 @@ optional element to render when _when_ prop is false.
 __Case__ components.
 >
 
+
 > ### Returns
 >
 > __element__:  _JSX.Element|null_