feat: create lib folder

template/src/app/App.tsx

@@ -1,36 +1,36 @@
-import { useEffect, useState, Suspense } from 'react'
-import { CurrentPage } from './CurrentPage'
-import { Loading } from 'components/Loading'
-import { WINDOW_NAMES } from './constants'
-import { getCurrentWindow } from 'utils'
-import './App.css'
+import { useEffect, useState, Suspense } from "react";
+import { CurrentPage } from "./CurrentPage";
+import { Loading } from "components/Loading";
+import { WINDOW_NAMES } from "./constants";
+import { getCurrentWindow } from "lib";
+import "./App.css";
 
 //This is the main component of the app, it is the root of the app
 //each Page component is rendered in a different window
 //if NODE_ENV is set to development, the app will render in a window named 'dev'
 export const App = () => {
-  const [page, setPage] = useState<string>('')
+  const [page, setPage] = useState<string>("");
 
   useEffect(() => {
     async function preLoad() {
-      if (process.env.NODE_ENV === 'development') {
+      if (process.env.NODE_ENV === "development") {
         //you can set the current window to dev if you want to see the dev page <Normal Browser>
-        setPage(WINDOW_NAMES.DESKTOP)
+        setPage(WINDOW_NAMES.DESKTOP);
       } else {
-        const currentWindow = await getCurrentWindow()
-        setPage(currentWindow)
+        const currentWindow = await getCurrentWindow();
+        setPage(currentWindow);
         console.info(
-          '[🐺 overwolf-modern-react-boilerplate][🧰 src/app/App.tsx][🔧 useEffect - preLoad]',
-          JSON.stringify({ currentWindow }, null, 2),
-        )
+          "[🐺 overwolf-modern-react-boilerplate][🧰 src/app/App.tsx][🔧 useEffect - preLoad]",
+          JSON.stringify({ currentWindow }, null, 2)
+        );
       }
     }
-    preLoad()
-  }, [])
+    preLoad();
+  }, []);
   //this is fallback for the loading current screen
   return (
     <Suspense fallback={<Loading />}>
       <CurrentPage page={page} />
     </Suspense>
-  )
-}
+  );
+};

template/src/lib/auth.ts

@@ -0,0 +1,26 @@
+const enum ThirdPartyProvider {
+  Google = "google",
+  Spotify = "spotify",
+  Twitch = "twitch",
+}
+
+function createUrl(provider: ThirdPartyProvider): string {
+  switch (provider) {
+    case ThirdPartyProvider.Google:
+      return `dev_url_to_mount`;
+    // ...
+    default:
+      return "";
+  }
+}
+
+function loginWithThirdParty(provider: ThirdPartyProvider) {
+  const url = createUrl(provider);
+  if (process.env.NODE_ENV === "development") {
+    console.log(`Redirecting to ${url}`);
+    window.open(url, "_blank");
+  }
+  overwolf.utils.openUrlInDefaultBrowser(url);
+}
+
+export { loginWithThirdParty, ThirdPartyProvider };

template/src/lib/index.ts

@@ -0,0 +1,3 @@
+export * from "./utils";
+export * from "./overwolf-essentials";
+export * from "./auth";

template/src/lib/io.ts

@@ -0,0 +1,78 @@
+export const getExtensionRootPath = (uuid: string) =>
+  `\\overwolf\\extensions\\${uuid}\\data`;
+
+/**
+ * Retrieves the path of the Overwolf extension.
+ * @returns A promise that resolves to the path of the extension.
+ */
+const getExtensionPath = () =>
+  new Promise<string>((resolve) => {
+    overwolf.extensions.current.getManifest(({ UID }) => {
+      const localPath = overwolf.io.paths.localAppData;
+      const path = `${localPath}${getExtensionRootPath(UID)}`;
+      resolve(path);
+    });
+  });
+
+/**
+ * Retrieves the local app data path with the specified timestamp.
+ * @param now The timestamp to be appended to the path.
+ * @returns The local app data path with the appended file name.
+ */
+const getLocalAppData = (fileName: number | string) =>
+  new Promise<string>((resolve) => {
+    overwolf.extensions.current.getManifest(({ UID }) => {
+      const path = `${overwolf.io.paths.localAppData}${getExtensionRootPath(
+        UID
+      )}\\${fileName}.json`;
+      resolve(path);
+    });
+  });
+
+/**
+ * Retrieves the available file paths in a specified directory.
+ * @param path The path of the directory.
+ * @returns A promise that resolves to an array of file paths.
+ */
+const readFilesPathAvailable = <T>(path: string) =>
+  new Promise<Array<T>>((resolve) => {
+    overwolf.io.dir(path, ({ success, data }) => {
+      if (!success && !data?.length) resolve([] as Array<T>);
+      const files = data?.filter(({ type }) => type === "file");
+      resolve(files as Array<T>);
+    });
+  });
+
+const getFileSize = (data: string): string => {
+  const blob = new Blob([data]);
+  return `${Math.floor(blob.size / 1024)}kb`;
+};
+
+/**
+ * Writes the contents of a file at the specified path using Overwolf's IO API.
+ * @param path The path of the file to write.
+ * @param data The data to write to the file.
+ * @returns A promise that resolves to a message indicating the status of the write operation.
+ */
+const overwolfWriteFileContents = <T>(path: string, data: T): Promise<string> =>
+  new Promise((resolve) => {
+    overwolf.io.writeFileContents(
+      path,
+      JSON.stringify(data),
+      "UTF8" as overwolf.io.enums.eEncoding.UTF8,
+      false,
+      (status) => {
+        const message = `Saved in ${path} with status ${status}, data size: ${getFileSize(
+          JSON.stringify(data)
+        )}`;
+        resolve(message);
+      }
+    );
+  });
+
+export {
+  getExtensionPath,
+  readFilesPathAvailable,
+  getLocalAppData,
+  overwolfWriteFileContents,
+};

template/src/lib/overwolf-essentials.ts

@@ -0,0 +1,22 @@
+async function obtainDeclaredWindow(
+  windowName: string
+): Promise<overwolf.windows.WindowInfo> {
+  return new Promise((resolve, reject) => {
+    overwolf.windows.obtainDeclaredWindow(windowName, (result) => {
+      if (result.success) {
+        resolve(result.window);
+      } else {
+        reject(result.error);
+      }
+    });
+  });
+}
+function getMonitorsList(): Promise<overwolf.utils.Display[]> {
+  return new Promise<overwolf.utils.Display[]>((resolve) => {
+    overwolf.utils.getMonitorsList((result) => {
+      resolve(result.displays);
+    });
+  });
+}
+
+export { obtainDeclaredWindow, getMonitorsList };

template/src/lib/utils.ts

@@ -0,0 +1,105 @@
+/**
+ * Pauses the execution for the specified number of milliseconds.
+ * @param ms The number of milliseconds to sleep.
+ * @example await sleep(1000);
+ * @returns A promise that resolves after the specified delay.
+ */
+const sleep = (ms: number): Promise<void> =>
+  new Promise((resolve) => setTimeout(resolve, ms));
+
+/**
+ * Combines multiple class names into a single string.
+ * @param classes The class names to combine.
+ * @example const className = classNames('foo', 'bar');
+ * @returns A string containing the combined class names.
+ */
+const classNames = (...classes: (string | undefined)[]) =>
+  classes.filter(Boolean).join(" ");
+
+/**
+ * Formats a date input into a string representation.
+ * @param input The date input to format. It can be a string or a number.
+ * @example const formattedDate = formatDate(new Date());
+ * @returns A formatted string representation of the date.
+ */
+function formatDate(input: string | number): string {
+  const date = new Date(input);
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+/**
+ * Generates a random number between the specified minimum and maximum values (inclusive).
+ * @param min The minimum value of the range.
+ * @param max The maximum value of the range.
+ * @example const randomNumber = random(1, 10);
+ * @returns A random number between the minimum and maximum values.
+ */
+const random = (min: number, max: number) =>
+  Math.floor(Math.random() * (max - min + 1)) + min;
+
+/**
+ * Creates a throttled version of the provided function that limits the rate at which it can be called.
+ * @param func The function to throttle.
+ * @param delay The minimum delay (in milliseconds) between function invocations.
+ * @example const throttled = throttle(() => console.log('Hello World!'), 1000);
+ * @returns A throttled version of the function.
+ */
+function throttle<T extends (...args: unknown[]) => void>(
+  func: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let lastCall = 0;
+  return function (...args: Parameters<T>) {
+    const now = Date.now();
+    if (now - lastCall >= delay) {
+      func(...args);
+      lastCall = now;
+    }
+  };
+}
+
+/**
+ * Normalizes a name by encoding and decoding it using URI components.
+ * @param name The name to normalize.
+ * @example const name = normalizeName('Hello%20World!');
+ * @returns The normalized name.
+ */
+const normalizeName = (name: string) => {
+  try {
+    const nameNormalize = decodeURIComponent(encodeURIComponent(name));
+    return nameNormalize;
+  } catch (error) {
+    // console.info("no formatting required [UTF8 or ISO]");
+    return name;
+  }
+};
+
+/**
+ * Safely parses a JSON string into a JavaScript object.
+ * @param data The JSON string to parse.
+ * @example const parsedJSON = parseSafeJSON<MyInterface>('{"foo":"bar"}');
+ * @returns The parsed JavaScript object, or null if parsing fails.
+ */
+const parseSafeJSON = <T>(data: string = ""): T | null => {
+  try {
+    if (data === "") return null; // Return null for empty data
+    return JSON.parse(data) as T;
+  } catch (error) {
+    console.error("Failed to parse JSON:", JSON.stringify(error));
+    return null;
+  }
+};
+
+export {
+  classNames,
+  formatDate,
+  random,
+  throttle,
+  normalizeName,
+  parseSafeJSON,
+  sleep,
+};