create-nizam-app 1.0.0

package/dist/__main__.js

@@ -0,0 +1,3196 @@
+#!/usr/bin/env node
+import chalk from 'chalk';
+import ora from 'ora';
+import blessed from 'blessed';
+import dns from 'dns/promises';
+import { exec, execSync } from 'child_process';
+import util from 'util';
+import { input, confirm, rawlist, checkbox, Separator, select } from '@inquirer/prompts';
+import stripAnsi from 'strip-ansi';
+import { execa } from 'execa';
+import fs from 'fs-extra';
+import path from 'path';
+import checkboxPlus from 'inquirer-checkbox-plus-plus';
+import { fileURLToPath } from 'url';
+import stripJsonComments from 'strip-json-comments';
+
+let runtimeContext = null;
+let reset_data = null;
+function startProject(ctx) {
+    runtimeContext = ctx;
+    reset_data = structuredClone(ctx);
+}
+function useContext() {
+    if (!runtimeContext) {
+        throw new Error("Runtime Context not initialized. Call startProject() first.");
+    }
+    return runtimeContext;
+}
+async function resetContext() {
+    if (!reset_data)
+        return;
+    runtimeContext.user_options = reset_data.user_options;
+}
+
+async function operations(opration_fun, opration_name, opration_dis) {
+    const { operation_state } = useContext();
+    const spinner = ora(chalk.yellowBright(`${opration_dis}....`)).start();
+    await opration_fun();
+    const is_ok = operation_state[opration_name].status;
+    const error_message = operation_state[opration_name].error_message;
+    if (is_ok === "success")
+        spinner.stopAndPersist({
+            symbol: `${chalk.yellowBright("[")}${chalk.green("✔")}${chalk.yellowBright("]")}`,
+            text: `${chalk.greenBright(`${opration_dis} is done.`)}`,
+        });
+    else {
+        spinner.stopAndPersist({
+            symbol: `${chalk.yellowBright("[")}${chalk.red("X")}${chalk.yellowBright("]")}`,
+            text: `${chalk.redBright(`${opration_dis} is fail.`)}`,
+        });
+        console.log(`${chalk.bold.red("[x]==>")} ${chalk.redBright(error_message)}`);
+    }
+}
+
+async function say(message) {
+    // Create the screen
+    const screen = blessed.screen({
+        smartCSR: true,
+        title: "Welcome CLI",
+    });
+    // Static top and bottom lines
+    const topLine = blessed.box({
+        top: 0,
+        left: "left",
+        width: "100%",
+        height: 1,
+        content: "nizam say:",
+        style: { fg: "yellow", bold: true },
+    });
+    // Box for the dynamic message
+    const messageBox = blessed.box({
+        top: 0,
+        left: 11,
+        width: "80%",
+        height: "shrink",
+        content: "",
+        style: { fg: "green" },
+        wrap: true,
+        scrollable: true,
+    });
+    screen.append(topLine);
+    screen.append(messageBox);
+    screen.render();
+    // Function for typing effect for just the message
+    const typeEffect = async (text, delay = 80) => {
+        messageBox.setContent("");
+        screen.render();
+        for (let i = 0; i < text.length; i++) {
+            messageBox.setContent(text.slice(0, i + 1));
+            screen.render();
+            await new Promise((r) => setTimeout(r, delay));
+        }
+    };
+    // Run the effect
+    await typeEffect(message);
+}
+
+function sectionBox(section_name) {
+    const padding = 2;
+    const totalLength = Math.max(section_name.length + padding * 2, 20);
+    const sideHashes = "=".repeat(totalLength);
+    // calculate spaces to center the text
+    const spaceEachSide = Math.floor((totalLength - section_name.length) / 2);
+    const line = " ".repeat(spaceEachSide) +
+        section_name +
+        " ".repeat(totalLength - section_name.length - spaceEachSide - 2);
+    // const empty_line =
+    //   " ".repeat(spaceEachSide) + " ".repeat(totalLength - spaceEachSide - 1);
+    console.log(chalk.yellowBright(`✦ `) + chalk.bold.green(`${sideHashes}╮`));
+    // console.log(chalk.green(`¦ ${empty_line} ¦`));
+    console.log(`${chalk.green(`¦ `)}${chalk.yellowBright.bold(line)}${chalk.green(`  ¦`)}`);
+    // console.log(chalk.green(`¦ ${empty_line} ¦`));
+    console.log(chalk.bold.green(`╰${sideHashes}`) + chalk.yellowBright(` ✦`));
+    console.log(chalk.yellowBright.bold(`↓`));
+}
+
+async function getPkgInfo(pkg_name) {
+    const res = await fetch(`https://registry.npmjs.org/${encodeURIComponent(pkg_name)}/latest`, {
+        signal: AbortSignal.timeout(60000),
+    });
+    if (!res.ok) {
+        throw `Failed to fetch version for ${pkg_name}`;
+    }
+    const npm_json = await res.json();
+    return [npm_json.name, npm_json.version];
+}
+
+var app_info = {
+	version: "1.0.0"
+};
+var core_documentation = {
+	aliases: {
+		des: "geeksforgeeks - aliases",
+		link: "https://www.geeksforgeeks.org/reactjs/how-to-setup-path-aliases-in-vite-react/"
+	},
+	app_structure: {
+		react: {
+			des: "github - React-Project-Structure",
+			link: "https://github.com/ahmed-abd-alalim/React-Project-Structure"
+		}
+	}
+};
+var appData = {
+	app_info: app_info,
+	core_documentation: core_documentation
+};
+
+const execAsync = util.promisify(exec);
+async function intro() {
+    const { pkg_is_installed } = useContext();
+    const cols = process.stdout.columns;
+    const pkg_list = ["npm", "bun", "pnpm", "yarn"];
+    const [, get_nizam_new_v] = await getPkgInfo("create-nizam-app");
+    const get_nizam_current_v = appData.app_info.version;
+    const is_new_v = String(get_nizam_new_v) !== String(get_nizam_current_v);
+    const lg_logo = chalk.yellowBright(`
+            ░▒▒▒                                         
+            ▒▓▓▓  ${chalk.redBright.bold("ahmed abd alalim - 3A")}
+             ░░░                                         
+▓▓▓▒▒▓▓▓▓▓  ▒▓▓▓ ▒▓▓▓▓▓▓▓▓▒  ░▓▓▓▓▓▓▓▓▓▒ ▒▓▓▓▒▓▓▓▓▓░▓▓▓▓▒
+▓▓▓▒   ▒▓▓▒ ▒▓▓▓     ░▓▓▓▒       ▒░░▓▓▓▓ ▒▓▓▓  ▒▓▓▓  ▒▓▓▓
+▓▓▓▒   ▒▓▓▒ ▒▓▓▓    ░▓▓▓▒     ▓▓▒   ▓▓▓▓ ▒▓▓▓  ▒▓▓▓  ▒▓▓▓
+▓▓▓▒   ▒▓▓▒ ▒▓▓▓   ░▓▓▓░     ▓▓▓░   ▓▓▓▓ ▒▓▓▓  ▒▓▓▓  ▒▓▓▓
+▓▓▓▒   ▒▓▓▒ ▒▓▓▓  ▒▓▓▓▓▓▓▓▓▓ ▒▓▓▓▓▓▓▓▓▓▓ ▒▓▓▓  ▒▓▓▓  ▒▓▓▓
+▒▒▒░   ▒▒▒▒ ░▒▒▒ ░▒▒▒▒▒▒▒▒▒▒   ░▒   ▒▒▒▒ ░▒▒▒  ░▒▒▒  ░▒▒▒  ${chalk.redBright.bold(`v${appData.app_info.version}`)}
+                                                         
+${is_new_v ? chalk.red("[!] There is a new version with more features. used (npm install -g create-nizam-app) for make update.") : " "}
+`);
+    const md_logo = chalk.yellowBright(`
+
+            ░░  ${chalk.redBright.bold("ahmed abd alalim - 3A")}
+           ░▓▓▒                                    
+ ░░░  ░░   ░░░░ ░░░░░░░░░  ░░░░░░░   ░░░  ░░   ░░  
+░▓▓▓▒▒▓▓▓▒ ░▓▓▒░▓▓▓▓▓▓▓▒  ░▓▓▓▓▓▓▓▓░ ▒▓▓▒▒▓▓▓▒▒▓▓▓░
+░▓▓▓  ░▓▓▒ ░▓▓▒    ▒▓▓▒     ░▒  ▒▓▓▒ ▒▓▓  ▒▓▓░ ▒▓▓░
+░▓▓▓  ░▓▓▒ ░▓▓▒   ▒▓▓▒    ▒▓▓   ▒▓▓▒ ▒▓▓  ▒▓▓░ ▒▓▓░
+░▓▓▓  ░▓▓▒ ░▓▓▒  ▒▓▓▓▓▓▓▓ ▒▓▓▒ ▒▓▓▓▒ ▒▓▓  ▒▓▓░ ▒▓▓░
+░▒▒▒  ░▒▒▒ ░▒▒▒ ▒▒▒▒▒▒▒▒▒  ▒▒▒▒ ▒▒▒░ ▒▒▒  ▒▒▒░ ▒▒▒░  ${chalk.redBright.bold(`v${appData.app_info.version}`)}
+                                                   
+${is_new_v ? chalk.red("[!] There is a new version with more features. used (npm install -g create-nizam-app) for make update.") : " "}
+`);
+    const sm_logo = chalk.yellowBright(`
+         ░▒▒  ${chalk.redBright.bold("ahmed abd alalim - 3A")}
+         ░▓▓░                              
+▓▓▓ ▓▓▓▒ ░▓▓░▓▓▓▓▓▓▓▓ ▒▓▓▓▓▓▓▒ ▓▓▓░▓▓▓ ▒▓▓▒
+▓▓▓  ▒▓▓░░▓▓░   ▒▓▓▒     ▒░▓▓▓░▓▓▓ ░▓▓▒ ▓▓▓
+▓▓▓  ▒▓▓░░▓▓░  ▒▓▓░   ▒▓▒  ▓▓▓░▓▓▓ ░▓▓▒ ▓▓▓
+▓▓▓  ▒▓▓░░▓▓░ ▒▓▓▓▓▓▓ ▓▓▓▒▒▓▓▓░▓▓▓ ░▓▓▒ ▓▓▓
+▒▒▒  ░▒▒░░▒▒ ▒▒▒▒▒▒▒▒  ░▒  ▒▒▒ ▒▒▒ ░▒▒░ ▒▒▒  ${chalk.redBright.bold(`v${appData.app_info.version}`)}
+                                           
+${is_new_v ? chalk.red("[!] There is a new version with more features. used (npm install -g create-nizam-app) for make update.") : " "}
+`);
+    console.clear();
+    try {
+        await dns.lookup("google.com");
+    }
+    catch {
+        console.error(chalk.redBright("\n❌ No internet connection"));
+        process.exit(1);
+    }
+    const view = cols && cols < 50 ? sm_logo : cols < 80 ? md_logo : lg_logo;
+    console.log(view);
+    // eslint-disable-next-line no-async-promise-executor
+    await new Promise(async (resolve) => {
+        const spinner = ora({
+            text: `${chalk.yellowBright("Loading")}`,
+            spinner: "dots",
+        }).start();
+        let i = 0;
+        const load = async () => {
+            spinner.text = `${chalk.yellowBright("Loading █")}${chalk
+                .yellowBright("█")
+                .repeat(i / 5)}${"░".repeat(20 - i / 5)} ${chalk.redBright(i)} ${chalk.yellowBright("%")}`;
+            if (i >= 100) {
+                await new Promise((r) => setTimeout(r, 500));
+                spinner.stop();
+                resolve();
+                return;
+            }
+        };
+        for (const pkg of pkg_list) {
+            try {
+                await execAsync(`${pkg} -v`);
+                pkg_is_installed.push(pkg);
+            }
+            catch {
+                /* empty */
+            }
+            i += Number((100 / pkg_list.length).toFixed(1));
+            load();
+            if (is_new_v) {
+                await new Promise((resolve) => setTimeout(resolve, 1500));
+            }
+            await new Promise((resolve) => setTimeout(resolve, 500));
+        }
+    });
+    if (pkg_is_installed.length === 0) {
+        console.error(chalk.redBright("\n❌ Can't find any package manager for use it. install any one and try again."));
+        process.exit(1);
+    }
+}
+
+async function printMenu() {
+    const title = "YOUR SELECTED OPTIONS";
+    const ctx = useContext();
+    const rows = Object.entries(ctx.user_options)
+        .filter(([, value]) => value !== null &&
+        value !== undefined &&
+        value !== "" &&
+        value.length !== 0)
+        .map(([key, value]) => {
+        let normalizedValue;
+        if (value === true)
+            normalizedValue = "yes";
+        else if (value === false)
+            normalizedValue = "no";
+        else
+            normalizedValue = String(value);
+        const cleanKey = key
+            .replace(/_/g, " ")
+            .split(" ")
+            .map((word) => {
+            if (word.length < 4) {
+                return word.toUpperCase();
+            }
+            else {
+                return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+            }
+        })
+            .join(" ");
+        return {
+            raw: ` ${cleanKey} : ${normalizedValue}`,
+            colored: ` ${chalk.redBright(cleanKey)} : ${chalk.greenBright(normalizedValue)}`,
+        };
+    });
+    const allLines = [title, ...rows.map((r) => r.raw)];
+    const width = Math.max(...allLines.map((l) => l.length + (rows.length > 9 ? 9 : 8)));
+    const line = "═".repeat(width);
+    const line2 = "-".repeat(width);
+    console.log(chalk.yellowBright(`╔${line}╗`));
+    console.log(`${chalk.yellowBright("║")}${chalk.redBright(title.padStart((width + title.length) / 2).padEnd(width))}${chalk.yellowBright("║")}`);
+    console.log(chalk.yellowBright(`╠${line}╣`));
+    rows.forEach((row, i) => {
+        const padding = width - stripAnsi(row.raw).length;
+        console.log(`${chalk.yellowBright("║")}${chalk.yellowBright("[")}${chalk.redBright(i + 1)}${chalk.yellowBright("]")} ${row.colored + " ".repeat(padding - (i + 1 > 9 ? 5 : 4))}${chalk.yellowBright("║")}`);
+        if (rows.length - 1 === i)
+            return;
+        console.log(chalk.yellowBright(`╠${line2}╣`));
+    });
+    console.log(chalk.yellowBright(`╚${line}╝`));
+    await input({
+        message: `${chalk.yellowBright("\n[!] Press the Enter key to continue or (")}${chalk.redBright("q + Enter")}${chalk.yellowBright(") to go back to home.")}`,
+        theme: {
+            prefix: {
+                idle: ``,
+                done: ``,
+            },
+        },
+        validate: (inbut) => {
+            if (inbut.toLowerCase() === "q") {
+                ctx.reset_menu = true;
+            }
+            return true;
+        },
+    });
+}
+
+function extractMainMessage(error) {
+    if (!error)
+        return "Unknown error";
+    if (typeof error.shortMessage === "string") {
+        return error.shortMessage;
+    }
+    if (typeof error.stderr === "string") {
+        return error.stderr.split("\n")[0];
+    }
+    if (error instanceof Error) {
+        return error.message.split("\n")[0];
+    }
+    if (typeof error === "string") {
+        return error;
+    }
+    return "Unexpected error occurred";
+}
+
+async function install() {
+    const { full_project_path, user_options, operation_state } = useContext();
+    try {
+        await execa(user_options.pkg_manager, ["install"], {
+            cwd: full_project_path,
+            timeout: 600000,
+        });
+        operation_state.install_all_packages.status = "success";
+    }
+    catch (e) {
+        if (e.timedOut) {
+            operation_state.install_all_packages.status = "fatal";
+            operation_state.install_all_packages.error_message = `⏱ Timeout, Check your internet connection and Take a look at the NIZAM_DOC.md file to learn how to continue the download.`;
+        }
+        else {
+            operation_state.install_all_packages.status = "fatal";
+            operation_state.install_all_packages.error_message =
+                extractMainMessage(e);
+        }
+    }
+}
+
+async function customInstall(npx_params, pkg_command_params) {
+    const { full_project_path } = useContext();
+    const pkj_installer = ["giget", "degit", "tiged"];
+    let success = false;
+    for (const pkj_ins of pkj_installer) {
+        try {
+            await execa(npx_params, [
+                "--yes",
+                pkj_ins,
+                pkj_ins === "giget" ? `gh:${pkg_command_params}` : pkg_command_params,
+                pkj_ins === "giget" ? `.` : "",
+            ], {
+                cwd: full_project_path,
+                timeout: 600000,
+            });
+            success = true;
+            break;
+        }
+        catch (e) {
+            if (e.timedOut) {
+                throw "⏱ Timeout, Check your internet connection and try again";
+            }
+            if (e.exitCode === 1)
+                continue;
+            throw e;
+        }
+    }
+    if (!success) {
+        throw "❌ All installers failed";
+    }
+}
+
+const rename = fs.rename;
+const mkdir = fs.mkdir;
+const lstat = fs.lstat;
+const readdir = fs.readdir;
+const ensureDir = fs.ensureDir;
+const ensureFile = fs.ensureFile;
+const readFile = fs.readFile;
+const writeFile = fs.writeFile;
+const appendFile = fs.appendFile;
+const pathExists = fs.pathExists;
+const remove = fs.remove;
+const emptyDir = fs.emptyDir;
+const readJson = fs.readJson;
+const writeJson = fs.writeJson;
+const outputJson = fs.outputJson;
+
+function pathBox() {
+    const { full_project_path, nizam_templates_path, user_options } = useContext();
+    const js_or_ts = user_options.js_framework.includes("js") ? "js" : "ts";
+    return {
+        // nizam-app
+        src_path: path.resolve(full_project_path, "src"),
+        tsconfig_app_path: path.resolve(full_project_path, "tsconfig.app.json"),
+        jsconfig_app_path: path.resolve(full_project_path, "jsconfig.json"),
+        vite_config_path: path.resolve(full_project_path, `vite.config.${js_or_ts}`),
+        vsc_path: path.resolve(full_project_path, ".vscode"),
+        vsc_setting_path: path.resolve(full_project_path, ".vscode", "settings.json"),
+        index_css_path: path.resolve(full_project_path, "src", "index.css"),
+        main_react_path: path.resolve(full_project_path, "src", `main.${js_or_ts}x`),
+        old_gitignore_path: path.resolve(full_project_path, "_gitignore"),
+        new_gitignore_path: path.resolve(full_project_path, ".gitignore"),
+        nizam_Instructions_path: path.resolve(full_project_path, "NIZAM_DOC.md"),
+        README_path: path.resolve(full_project_path, "README.md"),
+        index_html_path: path.resolve(full_project_path, "index.html"),
+        public_path: path.resolve(full_project_path, "public"),
+        app_css_path: path.resolve(full_project_path, "src", "app.css"),
+        assets_folder_path: path.resolve(full_project_path, "src", "assets"),
+        app_react_path: path.resolve(full_project_path, "src", `App.${js_or_ts}x`),
+        package_json_path: path.resolve(full_project_path, "package.json"),
+        layout_path: path.resolve(full_project_path, "src", `layout.${js_or_ts}x`),
+        reactrouter_router_path: path.resolve(full_project_path, "src", `router.${js_or_ts}x`),
+        tanstackrouter_router_path: path.resolve(full_project_path, "src", `router.${js_or_ts}`),
+        context_path: path.resolve(full_project_path, "src", `context`),
+        context_theme_path: path.resolve(full_project_path, "src", `context`, "theme"),
+        theme_context_file_path: path.resolve(full_project_path, "src", `context`, "theme", `ThemeContext.${js_or_ts}`),
+        theme_provider_file_path: path.resolve(full_project_path, "src", `context`, "theme", `ThemeProvider.${js_or_ts}x`),
+        use_theme_file_path: path.resolve(full_project_path, "src", `context`, "theme", `useTheme.${js_or_ts}`),
+        store_path: path.resolve(full_project_path, "src", `store`),
+        store_file_path: path.resolve(full_project_path, "src", `store`, `store.${js_or_ts}`),
+        store_slices_path: path.resolve(full_project_path, "src", `store`, "slices"),
+        slices_index_file_path: path.resolve(full_project_path, "src", `store`, "slices", `index.${js_or_ts}`),
+        slices_counter_file_path: path.resolve(full_project_path, "src", `store`, "slices", `counterSlice.${js_or_ts}`),
+        zustand_use_counter_file_path: path.resolve(full_project_path, "src", `store`, `useCounterStore.${js_or_ts}`),
+        zustand_index_file_path: path.resolve(full_project_path, "src", `store`, `index.${js_or_ts}`),
+        env_path: path.resolve(full_project_path, ".env"),
+        api_path: path.resolve(full_project_path, "src", `api`),
+        api_http_file_path: path.resolve(full_project_path, "src", `api`, `http.${js_or_ts}`),
+        api_fetcher_file_path: path.resolve(full_project_path, "src", `api`, `fetcher.${js_or_ts}`),
+        api_axios_fle_path: path.resolve(full_project_path, "src", `api`, `axios.${js_or_ts}`),
+        // nizam-main
+        jsconfig_app_template: path.resolve(nizam_templates_path, "react", js_or_ts, "jsconfig.template"),
+        vsc_settings_templates: path.resolve(nizam_templates_path, "vscode", "settings.template"),
+        bootstrap_templates: path.resolve(nizam_templates_path, "react", "css", "bootstrap.template"),
+        tailwind_templates: path.resolve(nizam_templates_path, "react", "css", "tailwind.template"),
+        nizam_Instructions_templates: path.resolve(nizam_templates_path, "NIZAM_DOC.template"),
+        index_css_templates: path.resolve(nizam_templates_path, "react", "css", "index.template"),
+        app_react_templates: path.resolve(nizam_templates_path, "react", js_or_ts, "app.template"),
+        vite_config_templates: path.resolve(nizam_templates_path, "react", js_or_ts, "vite.config.template"),
+        main_react_templates: path.resolve(nizam_templates_path, "react", js_or_ts, "main.template"),
+        layout_templates: path.resolve(nizam_templates_path, "react", js_or_ts, "layout.template"),
+        reactrouter_router_templates: path.resolve(nizam_templates_path, "react", js_or_ts, "react_router-router.template"),
+        tanstackrouter_router_templates: path.resolve(nizam_templates_path, "react", js_or_ts, "tanstack_router-router.template"),
+        theme_context_file_template: path.resolve(nizam_templates_path, "react", js_or_ts, "state_management", "context", "theme_context.template"),
+        theme_provider_file_template: path.resolve(nizam_templates_path, "react", js_or_ts, "state_management", "context", "theme_provider.template"),
+        use_theme_file_template: path.resolve(nizam_templates_path, "react", js_or_ts, "state_management", "context", "use_theme.template"),
+        store_file_template: path.resolve(nizam_templates_path, "react", js_or_ts, "state_management", "store", "store.template"),
+        slices_index_file_template: path.resolve(nizam_templates_path, "react", js_or_ts, "state_management", "store", "index.template"),
+        slices_counter_file_template: path.resolve(nizam_templates_path, "react", js_or_ts, "state_management", "store", "counter_slice.template"),
+        zustand_use_counter_file_template: path.resolve(nizam_templates_path, "react", js_or_ts, "state_management", "zustand", `use_counter_store.template`),
+        zustand_index_file_template: path.resolve(nizam_templates_path, "react", js_or_ts, "state_management", "zustand", `index.template`),
+        env_template: path.resolve(nizam_templates_path, "env.template"),
+        api_http_file_template: path.resolve(nizam_templates_path, "react", js_or_ts, "data_fetching", `http.template`),
+        api_fetcher_file_template: path.resolve(nizam_templates_path, "react", js_or_ts, "data_fetching", `fetcher.template`),
+        api_axios_file_template: path.resolve(nizam_templates_path, "react", js_or_ts, "data_fetching", `axios.template`),
+    };
+}
+
+async function appendInPkgFile(pkg_name, pkg_v) {
+    const path_box = pathBox();
+    const package_json = await readJson(path_box.package_json_path, "utf8");
+    package_json.dependencies ??= {};
+    package_json.dependencies[pkg_name] = `^${pkg_v}`;
+    await writeJson(path_box.package_json_path, package_json, { spaces: 2 });
+}
+
+async function installDependencies({ user_option_library, lib_list, }) {
+    const package_identification = async (pkg_name) => {
+        const pkg_info = await getPkgInfo(pkg_name);
+        await appendInPkgFile(pkg_info[0], pkg_info[1]);
+    };
+    if (typeof user_option_library === "string") {
+        const lib_info = lib_list.find((i) => i.name.includes(user_option_library.toLowerCase()));
+        const fil_dependencies = lib_info?.dependencies.filter((x) => Boolean(x));
+        if (fil_dependencies?.length !== 0) {
+            for (const dependencie_name of fil_dependencies) {
+                await package_identification(dependencie_name);
+            }
+        }
+        const lib_fun = lib_info?.fun;
+        await lib_fun();
+    }
+    else if (Array.isArray(user_option_library)) {
+        for (const lib_name of user_option_library) {
+            const lib_info = lib_list.find((i) => i.name.includes(lib_name.toLowerCase()));
+            const fil_dependencies = lib_info?.dependencies.filter((x) => Boolean(x));
+            if (fil_dependencies?.length !== 0) {
+                for (const dependencie_name of fil_dependencies) {
+                    await package_identification(dependencie_name);
+                }
+            }
+            const lib_fun = lib_info?.fun;
+            await lib_fun();
+        }
+    }
+}
+
+async function askAboutInstall() {
+    const { user_options, operation_state } = useContext();
+    const path_box = pathBox();
+    const question_theme = {
+        prefix: {
+            idle: `${chalk.yellowBright("[")}${chalk.blueBright("?")}${chalk.yellowBright("]")}`,
+            done: `${chalk.yellowBright("[")}${chalk.greenBright("✔")}${chalk.yellowBright("]")}`,
+        },
+        style: {
+            message: (text) => chalk.blueBright(text),
+            answer: (text) => chalk.greenBright(text),
+        },
+    };
+    const install_instructions = `
+### install all package
+
+#### Here’s the way, to install all packages
+
+Run (Development mode)
+\`\`\`bash
+${user_options.pkg_manager} install
+\`\`\`
+  ---
+`;
+    if (user_options.pkg_manager.length !== 0) {
+        const is_ok = await confirm({
+            message: `Do you want install all packages now?`,
+            default: false,
+            theme: question_theme,
+        });
+        if (is_ok) {
+            process.stdout.write("\x1b[1A\x1b[2K");
+            await operations(install, "install_all_packages", "Install all packages");
+        }
+        else {
+            const content = await readFile(path_box.nizam_Instructions_path, "utf8");
+            const lines = content.split("\n");
+            lines.splice(11, 0, install_instructions);
+            await writeFile(path_box.nizam_Instructions_path, lines.join("\n"), "utf8");
+        }
+    }
+    if (operation_state.install_all_packages.status === "fatal")
+        return;
+    await new Promise((r) => setTimeout(r, 1500));
+    await say(`Don't forget to take a look at the attached file ${chalk.bold("NIZAM_DOC.md")} within the new project to learn how to work with the downloaded packages.`);
+    await new Promise((r) => setTimeout(r, 4000));
+}
+
+const question_theme = {
+    prefix: {
+        idle: `${chalk.yellowBright("[")}${chalk.blueBright("?")}${chalk.yellowBright("]")}`,
+        done: `${chalk.yellowBright("[")}${chalk.greenBright("✔")}${chalk.yellowBright("]")}`,
+    },
+    style: {
+        message: (text) => chalk.blue(text),
+        answer: (text) => chalk.greenBright(text),
+    },
+};
+const checkbox_theme = {
+    icon: {
+        checked: ` ${chalk.greenBright("✔")} `,
+        unchecked: ` ${chalk.redBright("✖")} `,
+        cursor: `${chalk.yellowBright("➤")} `,
+    },
+    style: {
+        message: (text) => chalk.blue(text),
+        answer: (text) => chalk.greenBright(text),
+        description: (text) => chalk.yellowBright(`[!] ${text}`),
+        highlight: (text) => chalk.cyanBright(text),
+    },
+    prefix: {
+        idle: `${chalk.yellowBright("[")}${chalk.blueBright("?")}${chalk.yellowBright("]")}`,
+        done: `${chalk.yellowBright("[")}${chalk.greenBright("✔")}${chalk.yellowBright("]")}`,
+    },
+};
+async function fun_input(message, default_inbut, validate) {
+    return await input({
+        message: message,
+        default: default_inbut,
+        validate: validate,
+        theme: question_theme,
+    });
+}
+async function rawlist_fun(message, choices) {
+    return await rawlist({
+        message: message,
+        choices: choices,
+        theme: question_theme,
+    });
+}
+async function confirm_fun(message, default_value) {
+    return await confirm({
+        message: message,
+        default: default_value,
+        theme: question_theme,
+    });
+}
+async function checkbox_fun(message, choices, validate) {
+    return await checkbox({
+        message,
+        choices: choices,
+        validate: (value) => validate(value) ?? (() => true),
+        theme: checkbox_theme,
+    });
+}
+async function check_is_Ok(qu_title) {
+    return await confirm_fun(`Do you want use ${chalk.blueBright(qu_title)}?`, false);
+}
+
+async function Core() {
+    const ctx = useContext();
+    const user_options = [];
+    const nizam_choices = {
+        pkg_manager: [
+            new Separator(chalk.gray("--- Available to you ---")),
+            ...ctx.pkg_is_installed,
+        ],
+        structure_method: [
+            new Separator(chalk.gray("--- Available methods ---")),
+            "nizam method",
+            "custom method",
+        ],
+        // if i add hear nams for (file or folder) should add it in structure_react.ts file
+        folders: [
+            new Separator(chalk.gray("--- Select the folders you need ---")),
+            { name: "pages", value: "pages", description: "app screens & routes" },
+            {
+                name: "layouts",
+                value: "layouts",
+                description: "page structure wrappers (header, footer, sidebar)",
+            },
+            {
+                name: "components",
+                value: "components",
+                description: "reusable UI elements",
+            },
+            {
+                name: "utils",
+                value: "utils",
+                description: "helper functions used everywhere",
+            },
+            {
+                name: "storage",
+                value: "storage",
+                description: "saves & manages app data",
+            },
+            {
+                name: "sections",
+                value: "sections",
+                description: "contains reusable page sections",
+            },
+        ],
+        files: [
+            new Separator(chalk.gray("--- Select the files you need ---")),
+            {
+                name: "config.json",
+                value: "config.json",
+                description: "global app settings & constants.",
+            },
+            {
+                name: "api.json",
+                value: "api.json",
+                description: "API endpoints & base URLs.",
+            },
+            {
+                name: "routing.json",
+                value: "routing.json",
+                description: "routes definitions & paths.",
+            },
+            {
+                name: "icons.j/ts",
+                value: "icons.j/ts",
+                description: "centralized icons exports for easy reuse.",
+            },
+        ],
+    };
+    const core_options = async () => {
+        user_options.push([
+            "project_path",
+            await fun_input("Project path (full path or . for current folder):", ".", async (value) => {
+                if (!(await pathExists(value)))
+                    return "Can't see your input path";
+                return true;
+            }),
+        ]);
+        user_options.push([
+            "project_name",
+            await fun_input("Enter your project name:", "nizam-app", async (value) => {
+                const regex = /^[a-z_-]+$/;
+                if (!regex.test(value))
+                    return "Only lowercase letters, _ and - are allowed!";
+                if (await pathExists(`${ctx.full_project_path}${value}`))
+                    return "This name has been used before in the same path that was previously chosen.";
+                return true;
+            }),
+        ]);
+        if (ctx.pkg_is_installed.length > 1) {
+            user_options.push([
+                "pkg_manager",
+                await rawlist_fun("Choose a package manager:", nizam_choices.pkg_manager),
+            ]);
+        }
+        else
+            ctx.user_options.pkg_manager = ctx.pkg_is_installed[0];
+        user_options.push([
+            "add_aliase",
+            await confirm_fun("Do you want add @ aliase?", false),
+        ]);
+        if (await check_is_Ok("Ready made app structure")) {
+            user_options.push([
+                "app_structure",
+                await rawlist_fun("Choose app structure method:", nizam_choices.structure_method),
+            ]);
+            if (user_options.find((n) => n[1] === "custom method")) {
+                user_options.push([
+                    "folder_structure_names",
+                    await checkbox_fun("Select folders:", nizam_choices.folders, async (value) => {
+                        if (value.length === 0)
+                            return "At least one should be chosen";
+                        return true;
+                    }),
+                ]);
+                user_options.push([
+                    "files_structure_names",
+                    await checkbox_fun("Select files:", nizam_choices.files, async (value) => {
+                        if (value.length === 0)
+                            return "At least one should be chosen";
+                        return true;
+                    }),
+                ]);
+            }
+        }
+    };
+    await core_options();
+    const user_options_conv = Object.fromEntries(user_options);
+    ctx.user_options = { ...ctx.user_options, ...user_options_conv };
+}
+
+var js_framework = {
+	name: "JS Framework",
+	type: "fixed",
+	options: [
+		{
+			name: "React + vite + js",
+			value: "React + vite + js"
+		},
+		{
+			name: "React + vite + ts",
+			value: "React + vite + ts"
+		}
+	],
+	documentation: {
+		react: {
+			des: "react - learn",
+			link: "https://react.dev/learn"
+		}
+	},
+	terminal_command: {
+		react: {
+			js: "vitejs/vite/packages/create-vite/template-react",
+			ts: "vitejs/vite/packages/create-vite/template-react-ts"
+		}
+	},
+	description: "This section is for selecting the JavaScript framework and build setup for the project."
+};
+var css_framework = {
+	name: "CSS Framework",
+	type: "single",
+	options: [
+		{
+			name: "Bootstrap",
+			value: "Bootstrap"
+		},
+		{
+			name: "Tailwindcss",
+			value: "Tailwindcss"
+		},
+		{
+			name: "Bulma",
+			value: "Bulma"
+		},
+		{
+			name: "Foundation",
+			value: "Foundation"
+		},
+		{
+			name: "Materialize",
+			value: "Materialize"
+		}
+	],
+	documentation: {
+		bootstrap: {
+			des: "bootstrap - docs",
+			link: "https://getbootstrap.com/docs"
+		},
+		tailwindcss: {
+			des: "tailwindcss - docs",
+			link: "https://tailwindcss.com/docs"
+		},
+		bulma: {
+			des: "bulma - docs",
+			link: "https://bulma.io/documentation"
+		},
+		foundation: {
+			des: "foundation - docs",
+			link: "https://get.foundation/sites/docs"
+		},
+		materialize: {
+			des: "materialize - docs",
+			link: "https://materializecss.com/getting-started.html"
+		}
+	},
+	description: "This section is for selecting the CSS framework or styling library to use in the project."
+};
+var ui_library = {
+	name: "UI Component Library",
+	type: "multi",
+	options: [
+		{
+			name: "Material UI",
+			value: "Material UI",
+			description: "A popular React UI library based on Google’s Material Design, with ready made components and strong theming support."
+		},
+		{
+			name: "Ant Design",
+			value: "Ant Design",
+			description: "A powerful enterprise focused React UI framework with rich components and clean, professional design."
+		},
+		{
+			name: "Headless UI",
+			value: "Headless UI",
+			description: "Headless UI has no CSS at all. you must style it yourself (usually with Tailwind CSS)"
+		}
+	],
+	documentation: {
+		mui: {
+			des: "material ui - docs",
+			link: "https://mui.com/material-ui/getting-started"
+		},
+		ant: {
+			des: "ant design - docs",
+			link: "https://5x.ant.design/docs/react/introduce"
+		},
+		headless: {
+			des: "headless ui - docs",
+			link: "https://headlessui.com/react/disclosure"
+		}
+	},
+	description: "This section is for choosing a library of prebuilt UI components to speed up interface development."
+};
+var routing_library = {
+	name: "Routing Library",
+	type: "single",
+	options: [
+		{
+			name: "React Router",
+			value: "React Router"
+		},
+		{
+			name: "TanStack Router",
+			value: "TanStack Router"
+		},
+		{
+			name: "Wouter",
+			value: "Wouter"
+		}
+	],
+	documentation: {
+		react_router: {
+			des: "react router - docs",
+			link: "https://reactrouter.com/home"
+		},
+		tanStack_router: {
+			des: "tanStack router - docs",
+			link: "https://tanstack.com/router/latest"
+		},
+		wouter: {
+			des: "github-wouter - docs",
+			link: "https://github.com/molefrog/wouter"
+		}
+	},
+	description: "This section is for selecting the library that manages navigation and page routing in the project."
+};
+var react_router_rout = {
+	name: "React Router Rout Ways",
+	type: "single",
+	depended_on: "React Router",
+	options: [
+		{
+			name: "Classic Router",
+			value: "Classic Router"
+		},
+		{
+			name: "Data Router",
+			value: "Data Router"
+		}
+	],
+	description: "This section is for choosing the routing approach in React Router: Classic Router for traditional route setup, or Data Router for route-based data loading."
+};
+var state_management = {
+	name: "State Management",
+	type: "single",
+	options: [
+		{
+			name: "React Context API",
+			value: "React Context API"
+		},
+		{
+			name: "Redux Toolkit",
+			value: "Redux Toolkit"
+		},
+		{
+			name: "Zustand",
+			value: "Zustand"
+		}
+	],
+	documentation: {
+		react_context_api: {
+			des: "react - docs",
+			link: "https://react.dev/reference/react/createContext"
+		},
+		redux_toolkit: {
+			des: "redux toolkit - docs",
+			link: "https://redux-toolkit.js.org/introduction/getting-started"
+		},
+		zustand: {
+			des: "zustand - docs",
+			link: "https://zustand.docs.pmnd.rs/getting-started/introduction"
+		}
+	},
+	description: "This section is for selecting the method or library to manage and share application state across components."
+};
+var icon_library = {
+	name: "Icons Library",
+	type: "multi",
+	options: [
+		{
+			name: "React Icons",
+			value: "React Icons",
+			description: "A popular library that provides thousands of icons from multiple icon packs (like FontAwesome, Material, and more) as easy-to-use React components."
+		},
+		{
+			name: "Lucide React",
+			value: "Lucide React",
+			description: "A modern, lightweight icon library that offers clean and customizable SVG icons as React components."
+		},
+		{
+			name: "Lord Icon",
+			value: "Lord Icon",
+			description: "Animated SVG icons with a React wrapper."
+		},
+		{
+			name: "Material Icons",
+			value: "Material Icons",
+			description: "Google's official icon set for Material Design Provides a wide range of icons with consistent style, mainly used in Material-UI projects."
+		}
+	],
+	documentation: {
+		react_icons: {
+			des: "react icons - docs",
+			link: "https://react-icons.github.io/react-icons"
+		},
+		lucide_react: {
+			des: "lucide react - guide",
+			link: "https://lucide.dev/guide"
+		},
+		material_icons: {
+			des: "material icons - docs",
+			link: "https://mui.com/material-ui/material-icons/"
+		},
+		lord_icon: {
+			des: "lord icon - docs",
+			link: "https://lordicon.com/docs"
+		}
+	},
+	description: "This section is for choosing a library of icons to use throughout the project’s UI."
+};
+var head_management = {
+	name: "SEO / Meta Tag Management Libraries",
+	type: "single",
+	options: [
+		{
+			name: "React Helmet Async",
+			value: "React Helmet Async"
+		},
+		{
+			name: "Dr. Pogodin React Helmet",
+			value: "Dr. Pogodin React Helmet"
+		},
+		{
+			name: "Unhead",
+			value: "Unhead"
+		}
+	],
+	documentation: {
+		react_helmet_async: {
+			des: "react-helmet-async - docs",
+			link: "https://www.npmjs.com/package/react-helmet-async"
+		},
+		"@dr.pogodin/react-helmet": {
+			des: "@dr.pogodin/react-helmet - docs",
+			link: "https://www.npmjs.com/package/@dr.pogodin/react-helmet"
+		},
+		unhead: {
+			des: "unhead - docs",
+			link: "https://unhead.unjs.io/docs/react/head/guides/get-started/installation"
+		}
+	},
+	description: "This section is for selecting libraries that help manage SEO and meta tags in the project."
+};
+var data_fetching = {
+	name: "Data Fetching Libraries",
+	type: "single",
+	options: [
+		{
+			name: "Axios",
+			value: "Axios"
+		},
+		{
+			name: "TanStack Query",
+			value: "TanStack Query"
+		},
+		{
+			name: "SWR",
+			value: "SWR"
+		}
+	],
+	documentation: {
+		axios: {
+			des: "axios - docs",
+			link: "https://axios-http.com/docs/intro"
+		},
+		tanstack_query: {
+			des: "tanstack query - docs",
+			link: "https://tanstack.com/query/latest/docs/framework/react/overview"
+		},
+		swr: {
+			des: "swr - docs",
+			link: "https://swr.vercel.app/docs/getting-started"
+		}
+	},
+	description: "This section is for choosing libraries to handle API calls and data fetching in the project."
+};
+var resources_json = {
+	js_framework: js_framework,
+	css_framework: css_framework,
+	ui_library: ui_library,
+	routing_library: routing_library,
+	react_router_rout: react_router_rout,
+	state_management: state_management,
+	icon_library: icon_library,
+	head_management: head_management,
+	data_fetching: data_fetching
+};
+
+async function Custom() {
+    const app_data = resources_json;
+    const ctx = useContext();
+    const user_options = [];
+    const is_react_app = () => {
+        return user_options.some((item) => item[1]?.startsWith("React + vite"));
+    };
+    const append_hint_fun = (name_, hint_message) => {
+        for (const group of Object.values(app_data)) {
+            group.options.forEach((i) => {
+                if (i.name === name_) {
+                    i.name += chalk.gray(`\t(${hint_message.toLocaleLowerCase()})`);
+                }
+            });
+        }
+    };
+    const custom_options = async () => {
+        append_hint_fun("Classic Router", "old way");
+        append_hint_fun("Data Router", "new way");
+        append_hint_fun("React Icons", "most used");
+        append_hint_fun("Lord Icon", "animated icons");
+        append_hint_fun("React Helmet Async", "react 18");
+        append_hint_fun("Dr. Pogodin React Helmet", "fork for react 19+");
+        append_hint_fun("Unhead", "powerful, SSR/SEO friendly");
+        user_options.push([
+            "js_framework",
+            await rawlist_fun("Select a js framework:", [
+                new Separator(chalk.gray("--- Popular Options ---")),
+                ...app_data.js_framework.options,
+            ]),
+        ]);
+        if (await check_is_Ok("CSS Framework")) {
+            user_options.push([
+                "css_framework",
+                await rawlist_fun("Select a CSS framework:", [
+                    new Separator(chalk.gray("--- Popular Options ---")),
+                    ...app_data.css_framework.options,
+                ]),
+            ]);
+        }
+        if (await check_is_Ok("UI Component Library")) {
+            user_options.push([
+                "ui_library",
+                await checkbox_fun("Select Library:", [
+                    new Separator(chalk.gray("--- Popular Options ---")),
+                    ...app_data.ui_library.options,
+                ], (value) => {
+                    if (value.length === 0)
+                        return "At least one should be chosen";
+                    return true;
+                }),
+            ]);
+        }
+        if (is_react_app())
+            if (await check_is_Ok("Routing Library")) {
+                user_options.push([
+                    "routing_library",
+                    await rawlist_fun("Select Library:", [
+                        new Separator(chalk.gray("--- Popular Options ---")),
+                        ...app_data.routing_library.options,
+                    ]),
+                ]);
+                if (user_options.find((n) => n[1] === "React Router")) {
+                    user_options.push([
+                        "react_router_rout",
+                        await rawlist_fun("Select way:", [
+                            new Separator(chalk.gray("--- Popular Options ---")),
+                            ...app_data.react_router_rout.options,
+                        ]),
+                    ]);
+                }
+            }
+        if (await check_is_Ok("State Management way")) {
+            user_options.push([
+                "state_management",
+                await rawlist_fun("Select way:", [
+                    new Separator(chalk.gray("--- Popular Options ---")),
+                    ...app_data.state_management.options,
+                ]),
+            ]);
+        }
+        if (await check_is_Ok("Icons Library")) {
+            const found = user_options.find((i) => Array.isArray(i[1]) && i[1].includes("Material UI"));
+            if (found) {
+                append_hint_fun("Material Icons", "strong candidate because you use Material UI");
+            }
+            user_options.push([
+                "icon_library",
+                await checkbox_fun("Select Library:", [
+                    new Separator(chalk.gray("--- Popular Options ---")),
+                    ...app_data.icon_library.options,
+                ], (value) => {
+                    if (value.length === 0)
+                        return "At least one should be chosen";
+                    return true;
+                }),
+            ]);
+        }
+        if (await check_is_Ok("SEO / Meta Tag Management Libraries")) {
+            user_options.push([
+                "head_management",
+                await rawlist_fun("Select Library:", [
+                    new Separator(chalk.gray("--- Popular Options ---")),
+                    ...app_data.head_management.options,
+                ]),
+            ]);
+        }
+        if (await check_is_Ok("Data Fetching Libraries")) {
+            user_options.push([
+                "data_fetching",
+                await rawlist_fun("Select Library:", [
+                    new Separator(chalk.gray("--- Popular Options ---")),
+                    ...app_data.data_fetching.options,
+                ]),
+            ]);
+        }
+    };
+    await custom_options();
+    const user_options_conv = Object.fromEntries(user_options);
+    ctx.user_options = { ...ctx.user_options, ...user_options_conv };
+}
+
+async function help() {
+    const resource = resources_json;
+    const app_data_value = Object.values(resource);
+    let back = false;
+    console.log(`${chalk.yellowBright("[")}${chalk.redBright("#")}${chalk.yellowBright("]== Explanation of all questions and their options in OneShot Mode:")}`);
+    console.log(chalk.yellowBright("|"));
+    for (const [i, section] of app_data_value.entries()) {
+        console.log(chalk.yellowBright(`[${chalk.redBright(i)}]==========[ ${chalk.redBright(section.name)} ]==========`));
+        console.log(chalk.yellowBright("|"));
+        console.log(`${chalk.yellowBright(`|=(${chalk.gray("options")})=>`)} ${chalk.greenBright(section.options
+            .map((opt, i) => `${opt.name}${i + 1 === section.options.length ? "" : chalk.yellowBright(",")}`)
+            .join(" "))}`);
+        console.log(chalk.yellowBright("|"));
+        console.log(`${chalk.yellowBright(`|=(${chalk.gray("description")})=>`)} ${chalk.yellowBright(section.description)}\n`);
+    }
+    while (!back) {
+        await input({
+            message: `\n[${chalk.redBright("!")}] Press the ${chalk.bgRedBright("Enter key")} to return to the home menu.`,
+            theme: {
+                prefix: {
+                    idle: ``,
+                    done: ``,
+                },
+            },
+        });
+        back = true;
+    }
+}
+
+async function HomeMenu() {
+    const ctx = useContext();
+    const question_theme = {
+        icon: {
+            cursor: `${chalk.yellowBright("➤")} `,
+        },
+        prefix: {
+            idle: "",
+            done: "",
+        },
+        style: {
+            message: (text) => chalk.blueBright(text),
+            answer: () => "",
+            description: (text) => chalk.yellowBright(`[!] ${text}`),
+        },
+    };
+    const run = await select({
+        message: "",
+        loop: false,
+        choices: [
+            {
+                name: `${chalk.green(`[🔍]`)} ${chalk.yellow(`Browse Mode`)}`,
+                value: "Browse Mode",
+                description: "Multiple options with the ability to search or browse through comprehensive lists. Useful if you know which tools you'll be using.",
+            },
+            {
+                name: `${chalk.green(`[❓]`)} ${chalk.yellow(`OneShot Mode`)}`,
+                value: "OneShot Mode",
+                description: `A series of questions that suggest suitable options when you are unsure which tools to use. ${chalk.redBright("If this is your first time, we recommend checking out the")} ${chalk.redBright.bold("Help menu")} ${chalk.redBright("to understand the questions and suggestions contained therein.")}`,
+            },
+            {
+                name: `${chalk.green(`[🚨]`)} ${chalk.yellowBright(`Help`)}`,
+                value: "Help",
+                description: "It provides you with support and guidance, with an explanation of each question and the options that will be displayed, to make it easier to understand and use the tool.",
+            },
+            {
+                name: `${chalk.green(`[📤]`)} ${chalk.redBright(`Exit`)}`,
+                value: "Exit",
+                description: "",
+            },
+        ],
+        theme: question_theme,
+    });
+    ctx.start_menu_options = run;
+}
+
+async function Search() {
+    const ctx = useContext();
+    const resources = resources_json;
+    const groupedChoices = [];
+    const resources_refruns_data = [];
+    const fixed_options = [];
+    const single_options = [];
+    const multi_options = [];
+    const depended_on_options = [];
+    Object.values(resources).forEach((section) => {
+        if (section.type === "fixed") {
+            fixed_options.push([
+                section.name,
+                section.options.map((i) => i.name),
+            ]);
+        }
+    });
+    Object.values(resources).forEach((section) => {
+        if (section.type === "single") {
+            single_options.push([
+                section.name,
+                section.options.map((i) => i.name),
+            ]);
+        }
+    });
+    Object.values(resources).forEach((section) => {
+        if (section.type === "multi") {
+            multi_options.push(Object.keys(resources).find((k) => resources[k] === section));
+        }
+    });
+    Object.values(resources).forEach((section) => {
+        if (section.depended_on) {
+            depended_on_options.push([
+                section.depended_on,
+                section.name,
+                section.options.map((n) => n.name),
+            ]);
+        }
+    });
+    Object.values(resources).forEach((section) => {
+        if (section.options) {
+            resources_refruns_data.push({
+                name: section.name,
+                key: Object.keys(resources).find((k) => resources[k] === section),
+                options: section.options,
+            });
+        }
+    });
+    resources_refruns_data.forEach((section) => {
+        if (section.options) {
+            groupedChoices.push({
+                name: ``,
+                value: "citrus-header",
+                disabled: true,
+            });
+            groupedChoices.push({
+                name: `=== ${section.name} ===`,
+                value: "citrus-header",
+                disabled: true,
+            });
+            section.options.forEach((el) => {
+                groupedChoices.push(el);
+            });
+        }
+    });
+    const answers = await checkboxPlus({
+        message: chalk.blueBright(" Enter in the search and select:"),
+        pageSize: 10,
+        highlight: true,
+        searchable: true,
+        loop: false,
+        validate: function (answer) {
+            // not empty
+            if (answer.length === 0) {
+                return "You must choose at least one.";
+            }
+            // search about fixed options
+            const unselect_fixed_value = fixed_options.find(([, values]) => !values.some((v) => answer.includes(v)))?.[0];
+            if (unselect_fixed_value) {
+                return `just select at least one from ${unselect_fixed_value}`;
+            }
+            // search about single options
+            const more_one_single_value = [...single_options, ...fixed_options].find(([, h]) => {
+                const selectedCount = h.filter((v) => answer.includes(v)).length;
+                return selectedCount > 1;
+            })?.[0];
+            if (more_one_single_value) {
+                return `just select only one from ${more_one_single_value}`;
+            }
+            //search about options depends on anouther
+            const depended_on_value = depended_on_options.find(([n, , o]) => {
+                return answer.includes(n) && !o.some((v) => answer.includes(v));
+            });
+            if (depended_on_value) {
+                return `one of the (${depended_on_value?.[1].toLowerCase()}) options must be used because ${depended_on_value?.[0].toLowerCase()} depends on it`;
+            }
+            return true;
+        },
+        source: (_answersSoFar, input = "") => {
+            return Promise.resolve(groupedChoices.filter((choice) => {
+                if (input === "")
+                    return true;
+                return (!choice.disabled &&
+                    choice.name.toLowerCase().includes(input.toLowerCase()));
+            }));
+        },
+        theme: {
+            icon: {
+                checked: ` ${chalk.greenBright("✔")} `,
+                unchecked: ` ${chalk.redBright("✖")} `,
+                cursor: `${chalk.yellowBright("➤")} `,
+                disabled: "",
+            },
+            style: {
+                disabledChoice: (text) => chalk.gray(text.replace("(disabled)", "")),
+                description: (text) => chalk.yellowBright(`[!] ${text}`),
+                highlight: (text) => chalk.cyanBright(text),
+                searching: (text) => chalk.cyanBright(text),
+                noResults: (text) => chalk.red(text),
+                error: (text) => chalk.bgRed.white(text),
+                searchHint: (text) => chalk.dim.italic(text),
+                renderSelectedChoices: (selected) => chalk.greenBright(selected.map((c) => c.name).join(", ")),
+            },
+        },
+    });
+    const result = Object.entries(answers.reduce((acc, answer) => {
+        const resource = resources_refruns_data.find((r) => r.options.some((o) => o.name === answer));
+        if (!resource)
+            return acc;
+        acc[resource.key] ??= [];
+        acc[resource.key].push(answer);
+        return acc;
+    }, {}));
+    const result_filter = result.map((s) => {
+        if (!multi_options.includes(s[0])) {
+            return [s[0], s[1].toString()];
+        }
+        else {
+            return s;
+        }
+    });
+    const user_options_conv = Object.fromEntries(result_filter);
+    ctx.user_options = { ...ctx.user_options, ...user_options_conv };
+}
+
+function CorePaths() {
+    const ctx = useContext();
+    // get full project path
+    const project_Path = path.resolve(process.cwd(), ctx.user_options.project_path);
+    ctx.full_project_path = path.resolve(project_Path, ctx.user_options.project_name);
+    // get templates dir
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = path.dirname(__filename);
+    const TEMPLATES_DIR = path.resolve(__dirname, "templates");
+    ctx.nizam_templates_path = TEMPLATES_DIR;
+}
+
+async function CreatFolder() {
+    const { operation_state, full_project_path } = useContext();
+    try {
+        await ensureDir(full_project_path);
+        operation_state.creat_project_folder.status = "success";
+    }
+    catch (err) {
+        operation_state.creat_project_folder.status = "fatal";
+        operation_state.creat_project_folder.error_message =
+            extractMainMessage(err);
+    }
+}
+
+async function CreatVSCFolder() {
+    const { user_options, operation_state } = useContext();
+    const path_box = pathBox();
+    try {
+        await ensureDir(path_box.vsc_path);
+        let vsc_settings_json = await readJson(path_box.vsc_settings_templates);
+        if (user_options.js_framework.includes("ts")) {
+            vsc_settings_json = {
+                ...vsc_settings_json,
+                "[typescript]": {
+                    "editor.defaultFormatter": "esbenp.prettier-vscode",
+                },
+            };
+        }
+        if (user_options.css_framework === "Tailwind") {
+            vsc_settings_json = {
+                ...vsc_settings_json,
+                "files.associations": {
+                    "*.css": "tailwindcss",
+                },
+            };
+        }
+        await outputJson(path_box.vsc_setting_path, vsc_settings_json, {
+            spaces: 2,
+        });
+        operation_state.creat_vsc_folder.status = "success";
+    }
+    catch (err) {
+        operation_state.creat_vsc_folder.status = "fatal";
+        operation_state.creat_vsc_folder.error_message = extractMainMessage(err);
+    }
+}
+
+async function nizamDocEditor(nizam_doc_contant) {
+    const path_box = pathBox();
+    const new_instructions = `
+${!nizam_doc_contant.title_params ? "" : `## ${nizam_doc_contant.title_params}`}
+
+${!nizam_doc_contant.dec_params ? "" : `### ${nizam_doc_contant.dec_params}`}
+
+${!nizam_doc_contant.expla_params ? "" : nizam_doc_contant.expla_params}
+
+  ---
+  `;
+    await appendFile(path_box.nizam_Instructions_path, new_instructions);
+}
+
+async function UsingMark(file_path, data_array) {
+    let file_content = await readFile(file_path, "utf8");
+    data_array.forEach((_) => {
+        file_content = file_content.replace(`##-nizam@mark-##:${_.tage_name}`, _.content);
+    });
+    await writeFile(file_path, file_content, "utf8");
+}
+
+async function AliaseReact() {
+    const { user_options } = useContext();
+    const path_box = pathBox();
+    const vite_config_file_data = [
+        {
+            tage_name: "import_fileURLToPath",
+            content: `import { fileURLToPath } from "url";`,
+        },
+        {
+            tage_name: "import_dirname_resolve",
+            content: `import { dirname, resolve } from "path";`,
+        },
+        {
+            tage_name: "make__filename",
+            content: `const __filename = fileURLToPath(import.meta.url);`,
+        },
+        {
+            tage_name: "make__dirname",
+            content: `const __dirname = dirname(__filename);`,
+        },
+        {
+            tage_name: "add_resolve",
+            content: `resolve: {
+      alias: {
+        "@": resolve(__dirname, "src"),
+      },
+    },`,
+        },
+    ];
+    await UsingMark(path_box.vite_config_path, vite_config_file_data);
+    if (user_options.js_framework.includes("js")) {
+        // make jsconfig file
+        const jsconfig_app_contant = await readJson(path_box.jsconfig_app_template, "utf8");
+        await outputJson(path_box.jsconfig_app_path, jsconfig_app_contant, {
+            spaces: 2,
+        });
+    }
+    else {
+        // edit tsconfig.app.json for @ alise apped to json
+        const tsconfig_app_cotant = await readFile(path_box.tsconfig_app_path, "utf8");
+        const tsconfig_app_cotant_parse = JSON.parse(stripJsonComments(tsconfig_app_cotant));
+        const new_tsconfig_app_cotant = {
+            ...tsconfig_app_cotant_parse,
+            compilerOptions: {
+                ...tsconfig_app_cotant_parse.compilerOptions,
+                baseUrl: "src",
+                paths: {
+                    "@/*": ["*"],
+                },
+            },
+        };
+        await outputJson(path_box.tsconfig_app_path, new_tsconfig_app_cotant, {
+            spaces: 2,
+        });
+    }
+    await nizamDocEditor({
+        title_params: "aliase (@)",
+        dec_params: "you can use it inside code to move between folder fast",
+        expla_params: `
+\`\`\`bash 
+import {  } from '@/'; 
+\`\`\`
+
+> [!TIP]
+> Aliase Documentation: [${appData.core_documentation.aliases.des}](${appData.core_documentation.aliases.link})`,
+    });
+}
+
+async function Aliase() {
+    const { user_options, operation_state } = useContext();
+    try {
+        if (user_options.js_framework.includes("React")) {
+            await AliaseReact();
+        }
+        operation_state.add_aliase.status = "success";
+    }
+    catch (err) {
+        operation_state.add_aliase.status = "fatal";
+        operation_state.add_aliase.error_message = extractMainMessage(err);
+    }
+}
+
+async function structureReact() {
+    const { user_options } = useContext();
+    const path_box = pathBox();
+    const app_structure = user_options.app_structure;
+    const folder_structure_array = user_options.folder_structure_names;
+    const files_structure_array = user_options.files_structure_names;
+    const files_structure_array_with_some_from_user_options = [
+        ...files_structure_array,
+        user_options.js_framework.includes("ts") ? "type.ts" : null,
+    ];
+    const all_folder_structure_names = [
+        "pages",
+        "layouts",
+        "components",
+        "utils",
+        "storage",
+        "sections",
+    ];
+    const all_file_structure_names = [
+        user_options.js_framework.includes("ts") ? "type.ts" : null,
+        "config.json",
+        "api.json",
+        !user_options.routing_library ? null : "routing.json",
+        !user_options.icon_library.length ? null : "icons.j/ts",
+    ];
+    const creat_folder_fun = async (folder_name) => {
+        const new_folder_path = path.resolve(path_box.src_path, folder_name);
+        const index_file_Path = path.join(new_folder_path, `index.${user_options.js_framework.includes("js") ? "js" : "ts"}`);
+        await mkdir(new_folder_path, { recursive: true });
+        await writeFile(index_file_Path, "", "utf8");
+    };
+    const creat_file_fun = async ({ file_name, index_folder = "assets", }) => {
+        const index_folder_path = path.resolve(path_box.src_path, index_folder);
+        const [f_name, f_type] = file_name.split(".");
+        const file_Path = path.join(index_folder_path, `${f_name}.${f_type.includes("j/ts")
+            ? user_options.js_framework.includes("js")
+                ? "js"
+                : "ts"
+            : f_type}`);
+        await writeFile(file_Path, `${f_type.includes("json") ? JSON.stringify({}) : ""}`, "utf8");
+    };
+    if (app_structure.includes("nizam method")) {
+        // make folders
+        for (let folder_name of all_folder_structure_names.filter(Boolean)) {
+            await creat_folder_fun(folder_name);
+        }
+        // make files
+        for (let file_name of all_file_structure_names.filter(Boolean)) {
+            await creat_file_fun({ file_name });
+        }
+    }
+    else if (app_structure.includes("custom method")) {
+        // make folders
+        for (let folder_name of folder_structure_array.filter(Boolean)) {
+            await creat_folder_fun(folder_name);
+        }
+        // make files
+        for (let file_name of files_structure_array_with_some_from_user_options.filter(Boolean)) {
+            await creat_file_fun({ file_name });
+        }
+    }
+    await nizamDocEditor({
+        title_params: "React App Structure",
+        dec_params: `Creating a barrel file \`index.${user_options.js_framework.includes("js") ? "js" : "ts"}\` inside a folder allows you to re-export everything in that folder, and then when importing out, you only need to import from the same folder.`,
+        expla_params: `
+Example of a folder structure
+\`\`\`
+components/
+├─ Button.${user_options.js_framework.includes("js") ? "js" : "ts"}x
+├─ Card.${user_options.js_framework.includes("js") ? "js" : "ts"}x
+├─ Modal.${user_options.js_framework.includes("js") ? "js" : "ts"}x
+└─ index.${user_options.js_framework.includes("js") ? "js" : "ts"}
+\`\`\`
+
+Inside the \`index.${user_options.js_framework.includes("js") ? "js" : "ts"}\`
+\`\`\`
+// re-export all components
+export { default as Button } from "./Button";
+export { default as Card } from "./Card";
+export { default as Modal } from "./Modal";
+\`\`\`
+
+When use it
+\`\`\`
+import { Button, Card, Modal } from "./components";
+
+Button(); // use Button
+Card();   // use Card
+Modal();  // use Modal
+\`\`\`
+\`from "./components"\` We only write the folder name.
+
+> [!TIP]
+> React App Structure Documentation: [${appData.core_documentation.app_structure.react.des}](${appData.core_documentation.app_structure.react.link})`,
+    });
+}
+
+async function Structure() {
+    const { user_options, operation_state } = useContext();
+    try {
+        if (user_options.js_framework.includes("React")) {
+            await structureReact();
+        }
+        operation_state.app_structure.status = "success";
+    }
+    catch (err) {
+        operation_state.app_structure.status = "fatal";
+        operation_state.app_structure.error_message = extractMainMessage(err);
+    }
+}
+
+async function ReactFiles() {
+    const { user_options } = useContext();
+    const { js_framework } = resources_json;
+    const path_box = pathBox();
+    const index_title = `<title>nizam - add your website name (${user_options.project_name}) here</title>`;
+    // add app name in package json file
+    const package_json = await readJson(path_box.package_json_path, "utf8");
+    package_json.name ??= "";
+    package_json.name = user_options.project_name;
+    await writeJson(path_box.package_json_path, package_json, { spaces: 2 });
+    // fixed _gitignore file name
+    if (await pathExists(path_box.old_gitignore_path))
+        await rename(path_box.old_gitignore_path, path_box.new_gitignore_path);
+    // make nizam Instructions file
+    const nizam_Instructions_text = await readFile(path_box.nizam_Instructions_templates, "utf8");
+    await ensureFile(path_box.nizam_Instructions_path);
+    await writeFile(path_box.nizam_Instructions_path, nizam_Instructions_text, "utf8");
+    // clean README.md file
+    await ensureFile(path_box.README_path);
+    await writeFile(path_box.README_path, `# ${user_options.project_name}`, "utf8");
+    // clean index.css
+    const index_css_text = await readFile(path_box.index_css_templates, "utf8");
+    await ensureFile(path_box.index_css_path);
+    await writeFile(path_box.index_css_path, index_css_text, "utf8");
+    // clean public folder
+    await ensureDir(path_box.public_path);
+    await emptyDir(path_box.public_path);
+    // edit title in index.html
+    const html = await readFile(path_box.index_html_path, "utf8");
+    const updatedHtml = html.replace(/<title>(.*?)<\/title>/i, index_title);
+    await writeFile(path_box.index_html_path, updatedHtml, "utf8");
+    // remove app.css
+    await remove(path_box.app_css_path);
+    // remove src/assets folder
+    await ensureDir(path_box.assets_folder_path);
+    await emptyDir(path_box.assets_folder_path);
+    if ((user_options.routing_library.includes("React Router") &&
+        user_options.react_router_rout.includes("Data Router")) ||
+        user_options.routing_library.includes("TanStack Router")) {
+        // remove app.jsx file for data routing and add layout file
+        await remove(path_box.app_react_path);
+        const main_react_text = await readFile(path_box.layout_templates, "utf8");
+        await ensureFile(path_box.layout_path);
+        await writeFile(path_box.layout_path, main_react_text, "utf8");
+    }
+    else {
+        // new app file
+        const app_react_text = await readFile(path_box.app_react_templates, "utf8");
+        await ensureFile(path_box.app_react_path);
+        await writeFile(path_box.app_react_path, app_react_text, "utf8");
+    }
+    // new vite.config
+    const vite_config_text = await readFile(path_box.vite_config_templates, "utf8");
+    await ensureFile(path_box.vite_config_path);
+    await writeFile(path_box.vite_config_path, vite_config_text, "utf8");
+    // make .env file
+    const env_text = await readFile(path_box.env_template, "utf8");
+    await ensureFile(path_box.env_path);
+    await writeFile(path_box.env_path, env_text, "utf8");
+    // new main
+    const main_react_text = await readFile(path_box.main_react_templates, "utf8");
+    await ensureFile(path_box.main_react_path);
+    await writeFile(path_box.main_react_path, main_react_text, "utf8");
+    await nizamDocEditor({
+        title_params: user_options.js_framework,
+        dec_params: "Here’s the clear, correct way to run & build a React app using Vite",
+        expla_params: `
+Run (Development mode)
+\`\`\`bash 
+npm run dev
+\`\`\`
+
+You’ll see something like:
+\`\`\`bash 
+Local: http://localhost:5173/
+\`\`\`
+
+Build (Production)
+\`\`\`bash 
+npm run build
+\`\`\`
+
+> [!TIP]
+> React Documentation: [${js_framework.documentation.react.des}](${js_framework.documentation.react.link})`,
+    });
+}
+
+async function React() {
+    const { user_options } = useContext();
+    const { js_framework } = resources_json;
+    let pkg = "npx";
+    if (user_options.js_framework.includes("js")) {
+        await customInstall(pkg, js_framework.terminal_command.react.js);
+    }
+    else if (user_options.js_framework.includes("ts")) {
+        await customInstall(pkg, js_framework.terminal_command.react.ts);
+    }
+    await ReactFiles();
+}
+
+async function JSFramework() {
+    const { user_options, operation_state } = useContext();
+    try {
+        if (user_options.js_framework.includes("React")) {
+            await React();
+        }
+        operation_state.js_framework.status = "success";
+    }
+    catch (err) {
+        operation_state.js_framework.status = "fatal";
+        operation_state.js_framework.error_message = extractMainMessage(err);
+    }
+}
+
+async function Bootstrap() {
+    const { user_options } = useContext();
+    const path_box = pathBox();
+    const { css_framework } = resources_json;
+    const main_file_data = [
+        {
+            tage_name: "bootstrap_min",
+            content: `import 'bootstrap/dist/css/bootstrap.min.css';`,
+        },
+        {
+            tage_name: "bootstrap_bundle",
+            content: `import 'bootstrap/dist/js/bootstrap.bundle.min.js';`,
+        },
+    ];
+    await UsingMark(path_box.main_react_path, main_file_data);
+    // edit index.css
+    const bootstrap_text = await readFile(path_box.bootstrap_templates, "utf8");
+    await appendFile(path_box.index_css_path, bootstrap_text);
+    await nizamDocEditor({
+        title_params: user_options.css_framework,
+        expla_params: `
+We have created a clear and ready made structure that you can use. you will find it inside \`index.css\` file.
+
+> [!TIP]
+> Bootstrap Documentation: [${css_framework.documentation.bootstrap.des}](${css_framework.documentation.bootstrap.link})`,
+    });
+}
+
+async function Tailwind() {
+    const { user_options } = useContext();
+    const path_box = pathBox();
+    const { css_framework } = resources_json;
+    const vite_config_data = [
+        {
+            tage_name: "import_tailwindcss",
+            content: `import tailwindcss from '@tailwindcss/vite'`,
+        },
+        {
+            tage_name: "append_tailwindcss_plugins",
+            content: `tailwindcss(),`,
+        },
+    ];
+    const index_css_data = [
+        {
+            tage_name: "import_tailwindcss",
+            content: `@import "tailwindcss";`,
+        },
+    ];
+    await UsingMark(path_box.vite_config_path, vite_config_data);
+    await UsingMark(path_box.index_css_path, index_css_data);
+    // edit index.css
+    const tailwind_text = await readFile(path_box.tailwind_templates, "utf8");
+    await appendFile(path_box.index_css_path, tailwind_text);
+    await nizamDocEditor({
+        title_params: user_options.css_framework,
+        expla_params: `
+We have created a clear and ready made structure that you can use. you will find it inside \`index.css\` file.
+
+> [!TIP]
+> Tailwindcss Documentation: [${css_framework.documentation.tailwindcss.des}](${css_framework.documentation.tailwindcss.link})`,
+    });
+}
+
+async function Bulma() {
+    const { user_options } = useContext();
+    const path_box = pathBox();
+    const { css_framework } = resources_json;
+    const main_file_data = [
+        {
+            tage_name: "bulma_min",
+            content: `import 'bulma/css/bulma.min.css';`,
+        },
+    ];
+    await UsingMark(path_box.main_react_path, main_file_data);
+    // edit index.css
+    const css_text = await readFile(path_box.bootstrap_templates, "utf8");
+    await appendFile(path_box.index_css_path, css_text);
+    await nizamDocEditor({
+        title_params: user_options.css_framework,
+        expla_params: `
+We have created a clear and ready made structure that you can use. you will find it inside \`index.css\` file.
+
+> [!TIP]
+> Bulma Documentation: [${css_framework.documentation.bulma.des}](${css_framework.documentation.bulma.link})`,
+    });
+}
+
+async function Foundation() {
+    const { user_options } = useContext();
+    const path_box = pathBox();
+    const { css_framework } = resources_json;
+    const main_file_data = [
+        {
+            tage_name: "foundation_min",
+            content: `import 'foundation-sites/dist/css/foundation.min.css';`,
+        },
+    ];
+    await UsingMark(path_box.main_react_path, main_file_data);
+    // edit index.css
+    const css_text = await readFile(path_box.bootstrap_templates, "utf8");
+    await appendFile(path_box.index_css_path, css_text);
+    await nizamDocEditor({
+        title_params: user_options.css_framework,
+        expla_params: `
+We have created a clear and ready made structure that you can use. you will find it inside \`index.css\` file.
+
+> [!TIP]
+> Foundation Documentation: [${css_framework.documentation.foundation.des}](${css_framework.documentation.foundation.link})`,
+    });
+}
+
+async function Materialize() {
+    const { user_options } = useContext();
+    const path_box = pathBox();
+    const { css_framework } = resources_json;
+    const main_file_data = [
+        {
+            tage_name: "materialize_min",
+            content: `import 'materialize-css/dist/css/materialize.min.css';`,
+        },
+    ];
+    await UsingMark(path_box.main_react_path, main_file_data);
+    // edit index.css
+    const css_text = await readFile(path_box.bootstrap_templates, "utf8");
+    await appendFile(path_box.index_css_path, css_text);
+    await nizamDocEditor({
+        title_params: user_options.css_framework,
+        expla_params: `
+We have created a clear and ready made structure that you can use. you will find it inside \`index.css\` file.
+
+> [!TIP]
+> Materialize Documentation: [${css_framework.documentation.materialize.des}](${css_framework.documentation.materialize.link})`,
+    });
+}
+
+async function CSSFrameworkReact() {
+    const { user_options } = useContext();
+    const lib_list = [
+        {
+            name: "bootstrap",
+            fun: Bootstrap,
+            dependencies: ["bootstrap"],
+        },
+        {
+            name: "tailwindcss",
+            fun: Tailwind,
+            dependencies: ["tailwindcss", "@tailwindcss/vite"],
+        },
+        {
+            name: "bulma",
+            fun: Bulma,
+            dependencies: ["bulma"],
+        },
+        {
+            name: "foundation",
+            fun: Foundation,
+            dependencies: ["foundation-sites"],
+        },
+        {
+            name: "materialize",
+            fun: Materialize,
+            dependencies: ["materialize-css"],
+        },
+    ];
+    await installDependencies({
+        lib_list: lib_list,
+        user_option_library: user_options.css_framework,
+    });
+}
+
+async function CSSFramework() {
+    const { user_options, operation_state } = useContext();
+    try {
+        if (user_options.js_framework.includes("React")) {
+            await CSSFrameworkReact();
+        }
+        operation_state.css_framework.status = "success";
+    }
+    catch (err) {
+        operation_state.css_framework.status = "fatal";
+        operation_state.css_framework.error_message = extractMainMessage(err);
+    }
+}
+
+async function MUI() {
+    const { ui_library } = resources_json;
+    await nizamDocEditor({
+        title_params: "Material UI",
+        expla_params: `
+> [!TIP]
+> MUI Documentation: [${ui_library.documentation.mui.des}](${ui_library.documentation.mui.link})`,
+    });
+}
+
+async function Ant() {
+    const path_box = pathBox();
+    const { ui_library } = resources_json;
+    const main_data = [
+        {
+            tage_name: "ant_reset_css",
+            content: `import 'antd/dist/reset.css';`,
+        },
+    ];
+    await UsingMark(path_box.main_react_path, main_data);
+    await nizamDocEditor({
+        title_params: "Ant Design",
+        expla_params: `
+> [!TIP]
+> Ant Design Documentation: [${ui_library.documentation.ant.des}](${ui_library.documentation.ant.link})`,
+    });
+}
+
+async function Headless() {
+    const { ui_library } = resources_json;
+    await nizamDocEditor({
+        title_params: "Headless UI",
+        expla_params: `
+> [!TIP]
+> Headless UI Documentation: [${ui_library.documentation.headless.des}](${ui_library.documentation.headless.link})`,
+    });
+}
+
+async function UILibraryReact() {
+    const { user_options } = useContext();
+    const lib_list = [
+        {
+            name: "material ui",
+            fun: MUI,
+            dependencies: ["@mui/material", "@emotion/react", "@emotion/styled"],
+        },
+        {
+            name: "ant design",
+            fun: Ant,
+            dependencies: ["antd"],
+        },
+        {
+            name: "headless ui",
+            fun: Headless,
+            dependencies: ["@headlessui/react"],
+        },
+    ];
+    await installDependencies({
+        lib_list: lib_list,
+        user_option_library: user_options.ui_library,
+    });
+}
+
+async function UILibrary() {
+    const { user_options, operation_state } = useContext();
+    try {
+        if (user_options.js_framework.includes("React")) {
+            await UILibraryReact();
+        }
+        operation_state.ui_library.status = "success";
+    }
+    catch (err) {
+        operation_state.ui_library.status = "fatal";
+        operation_state.ui_library.error_message = extractMainMessage(err);
+    }
+}
+
+async function ReactIcons() {
+    const { user_options } = useContext();
+    const { icon_library } = resources_json;
+    await nizamDocEditor({
+        title_params: "React Icons",
+        dec_params: `React Icons is a library that gives you icons as React components.`,
+        expla_params: `
+You don’t use images or SVG files manually you just import the icon and use it like a component.
+
+#### Explanation of some of the shortcuts found within the library:
+| Prefix | Library |
+|------|---------|
+| \`fa\` | Font Awesome |
+| \`md\` | Material Design |
+| \`ai\` | Ant Design |
+| \`bs\` | Bootstrap Icons |
+| \`hi\` | Heroicons |
+
+${user_options.files_structure_names.includes("icons") ||
+            user_options.icon_library.length !== 0
+            ? `
+> [!NOTE]  
+> Import all icons from one file (clean way).
+> We have created a \`icon.${user_options.js_framework.includes("js") ? "js" : "ts"}\` file to use it which you will find in \`src/assets/icon.${user_options.js_framework.includes("js") ? "js" : "ts"}\``
+            : ""}
+
+> [!TIP]
+> React Icons Documentation: [${icon_library.documentation.react_icons.des}](${icon_library.documentation.react_icons.link})`,
+    });
+}
+
+async function LucideReact() {
+    const { user_options } = useContext();
+    const { icon_library } = resources_json;
+    await nizamDocEditor({
+        title_params: "Lucide React",
+        dec_params: `Lucide React is based on SVG and does not require any additional CSS files.`,
+        expla_params: `
+${user_options.files_structure_names.includes("icons") ||
+            user_options.icon_library.length !== 0
+            ? `
+> [!NOTE]  
+> Import all icons from one file (clean way).
+> We have created a \`icon.${user_options.js_framework.includes("js") ? "js" : "ts"}\` file to use it which you will find in \`src/assets/icon.${user_options.js_framework.includes("js") ? "js" : "ts"}\``
+            : ""}
+
+> [!TIP]
+> Lucide React Documentation: [${icon_library.documentation.lucide_react.des}](${icon_library.documentation.lucide_react.link})`,
+    });
+}
+
+async function MaterialIcons() {
+    const { icon_library } = resources_json;
+    await nizamDocEditor({
+        title_params: "Material Icons",
+        expla_params: `
+> [!TIP]
+> Material Icons Documentation: [${icon_library.documentation.material_icons.des}](${icon_library.documentation.material_icons.link})`,
+    });
+}
+
+async function LordIcon() {
+    const { user_options } = useContext();
+    const { icon_library } = resources_json;
+    await nizamDocEditor({
+        title_params: "Lord Icon",
+        dec_params: `Lord Icon is animated SVG icons with a React wrapper.`,
+        expla_params: `
+${user_options.files_structure_names.includes("icons") ||
+            user_options.icon_library.length !== 0
+            ? `
+> [!NOTE]  
+> Import all icons from one file (clean way).
+> We have created a \`icon.${user_options.js_framework.includes("js") ? "js" : "ts"}\` file to use it which you will find in \`src/assets/icon.${user_options.js_framework.includes("js") ? "js" : "ts"}\``
+            : ""}
+
+> [!TIP]
+> Lord Icon Documentation: [${icon_library.documentation.lord_icon.des}](${icon_library.documentation.lord_icon.link})`,
+    });
+}
+
+async function IconLibraryReact() {
+    const { user_options } = useContext();
+    const check_mui_pkg = user_options.ui_library.find((i) => i.includes("Material UI"));
+    const lib_list = [
+        {
+            name: "react icons",
+            fun: ReactIcons,
+            dependencies: ["react-icons"],
+        },
+        {
+            name: "lucide react",
+            fun: LucideReact,
+            dependencies: ["lucide-react"],
+        },
+        {
+            name: "material icons",
+            fun: MaterialIcons,
+            dependencies: [
+                "@mui/icons-material",
+                !check_mui_pkg ? "@mui/material" : null,
+                !check_mui_pkg ? "@emotion/react" : null,
+                !check_mui_pkg ? "@emotion/styled" : null,
+            ],
+        },
+        {
+            name: "lord icon",
+            fun: LordIcon,
+            dependencies: ["@lordicon/react"],
+        },
+    ];
+    await installDependencies({
+        lib_list: lib_list,
+        user_option_library: user_options.icon_library,
+    });
+}
+
+async function IconLibrary() {
+    const { user_options, operation_state } = useContext();
+    try {
+        if (user_options.js_framework.includes("React")) {
+            await IconLibraryReact();
+        }
+        operation_state.icon_library.status = "success";
+    }
+    catch (err) {
+        operation_state.icon_library.status = "fatal";
+        operation_state.icon_library.error_message = extractMainMessage(err);
+    }
+}
+
+async function ReactRouter() {
+    const { user_options } = useContext();
+    const path_box = pathBox();
+    const { routing_library } = resources_json;
+    const read_wride_maker = async (template_file, write_file) => {
+        const main_react_text = await readFile(template_file, "utf8");
+        await ensureFile(write_file);
+        await writeFile(write_file, main_react_text, "utf8");
+    };
+    const app_file_data = [
+        {
+            tage_name: "rr_class_import",
+            content: `import {BrowserRouter as Router, Route, Routes, Navigate} from "react-router-dom";`,
+        },
+        {
+            tage_name: "rr_class_start_rout",
+            content: `
+<Router>
+  <Routes>
+    <Route path="/" element={<Navigate to="/home" replace />} />
+    <Route path="/home" element={"#name of component#"} />
+
+    <Route path="*" element={<Navigate to="/" replace />} />
+  </Routes>
+</Router>`,
+        },
+    ];
+    const main_file_data = [
+        {
+            tage_name: "rr_data_import",
+            content: `import { RouterProvider } from "react-router-dom";`,
+        },
+    ];
+    const layout_file_data = [
+        {
+            tage_name: "rr_Outlet_import",
+            content: `import { Outlet } from "react-router-dom";`,
+        },
+    ];
+    if (user_options.react_router_rout.includes("Classic Router")) {
+        await UsingMark(path_box.app_react_path, app_file_data);
+    }
+    else if (user_options.react_router_rout.includes("Data Router")) {
+        let file_content = await readFile(path_box.main_react_path, "utf8");
+        file_content = file_content.replace(`import App from './App.${user_options.js_framework.includes("js") ? "js" : "ts"}x'`, `import router from "./router";`);
+        file_content = file_content.replace(`<App />`, `<RouterProvider router={router} />`);
+        await writeFile(path_box.main_react_path, file_content, "utf8");
+        await UsingMark(path_box.main_react_path, main_file_data);
+        await UsingMark(path_box.layout_path, layout_file_data);
+        await read_wride_maker(path_box.reactrouter_router_templates, path_box.reactrouter_router_path);
+    }
+    await nizamDocEditor({
+        title_params: "React Router",
+        dec_params: `React Router is the most popular routing library for React.`,
+        expla_params: `
+  It lets you handle client-side routing in single-page applications (SPAs) with dynamic URLs, nested routes, and more.
+
+${user_options.files_structure_names.includes("routing.json") ||
+            !user_options.routing_library
+            ? ""
+            : `
+> [!NOTE]
+> add all routing paths from one file (clean way).
+> We have created a \`routing.json\` file to use it which you will find in \`src/assets/routing.json\`
+`}
+
+> [!TIP]
+> React Icons Documentation: [${routing_library.documentation.react_router.des}](${routing_library.documentation.react_router.link})`,
+    });
+}
+
+async function TanStackRouter() {
+    const { user_options } = useContext();
+    const path_box = pathBox();
+    const { routing_library } = resources_json;
+    const main_file_data = [
+        {
+            tage_name: "tr_data_import",
+            content: `import { RouterProvider } from '@tanstack/react-router';`,
+        },
+    ];
+    const layout_file_data = [
+        {
+            tage_name: "tr_Outlet_import",
+            content: `import { Outlet } from '@tanstack/react-router';`,
+        },
+    ];
+    const read_wride_maker = async (template_file, write_file) => {
+        const main_react_text = await readFile(template_file, "utf8");
+        await ensureFile(write_file);
+        await writeFile(write_file, main_react_text, "utf8");
+    };
+    let file_content = await readFile(path_box.main_react_path, "utf8");
+    file_content = file_content.replace(`import App from './App.${user_options.js_framework.includes("js") ? "js" : "ts"}x'`, `import { router } from './router';`);
+    file_content = file_content.replace(`<App />`, `<RouterProvider router={router} />`);
+    await writeFile(path_box.main_react_path, file_content, "utf8");
+    await UsingMark(path_box.main_react_path, main_file_data);
+    await UsingMark(path_box.layout_path, layout_file_data);
+    await read_wride_maker(path_box.tanstackrouter_router_templates, path_box.tanstackrouter_router_path);
+    await nizamDocEditor({
+        title_params: "TanStack Route",
+        dec_params: `TanStack Router is a modern, flexible, fully-featured routing library for React.`,
+        expla_params: `
+It’s designed to handle complex routing needs in large-scale applications, while still offering strong developer ergonomics.
+
+> [!TIP]
+> React Icons Documentation: [${routing_library.documentation.tanStack_router.des}](${routing_library.documentation.tanStack_router.link})`,
+    });
+}
+
+async function Wouter() {
+    const path_box = pathBox();
+    const { routing_library } = resources_json;
+    const app_file_data = [
+        {
+            tage_name: "wouter_import",
+            content: `import { Route } from "wouter";`,
+        },
+        {
+            tage_name: "wouter_example",
+            content: `{/*<Route path="/" component={ex:Home} />*/}`,
+        },
+    ];
+    UsingMark(path_box.app_react_path, app_file_data);
+    await nizamDocEditor({
+        title_params: "Wouter",
+        dec_params: `Wouter is a minimalistic React router \`(~1KB gzipped!)\`.`,
+        expla_params: `
+It provides the essential routing features: <Router>, \`<Route>\`, \`useLocation()\`, and \`useRoute()\`.
+It does not include nested routes, transitions, or complicated features—just simple client side routing.
+
+> [!TIP]
+> React Icons Documentation: [${routing_library.documentation.wouter.des}](${routing_library.documentation.wouter.link})`,
+    });
+}
+
+async function RoutingLibrary() {
+    const { user_options, operation_state } = useContext();
+    const lib_list = [
+        {
+            name: "react router",
+            fun: ReactRouter,
+            dependencies: ["react-router-dom"],
+        },
+        {
+            name: "tanstack router",
+            fun: TanStackRouter,
+            dependencies: ["@tanstack/react-router"],
+        },
+        {
+            name: "wouter",
+            fun: Wouter,
+            dependencies: ["wouter"],
+        },
+    ];
+    try {
+        await installDependencies({
+            lib_list: lib_list,
+            user_option_library: user_options.routing_library,
+        });
+        operation_state.routing_library.status = "success";
+    }
+    catch (err) {
+        operation_state.routing_library.status = "fatal";
+        operation_state.routing_library.error_message = extractMainMessage(err);
+    }
+}
+
+async function ReactContextAPI() {
+    const { user_options } = useContext();
+    const { state_management } = resources_json;
+    const path_box = pathBox();
+    const main_file_data = [
+        {
+            tage_name: "context_import_theme_provider",
+            content: `import { ThemeProvider } from "${user_options.add_aliase ? "@" : "."}/context/theme/ThemeProvider";`,
+        },
+        {
+            tage_name: "open_tage_theme_provider",
+            content: `<ThemeProvider>`,
+        },
+        {
+            tage_name: "close_tage_theme_provider",
+            content: `</ThemeProvider>`,
+        },
+    ];
+    const ensure_read_write = async (file_path, temp_path) => {
+        const file_contant = await readFile(temp_path);
+        await ensureFile(file_path);
+        await writeFile(file_path, file_contant, "utf8");
+    };
+    await mkdir(path_box.context_path, { recursive: true });
+    await mkdir(path_box.context_theme_path, { recursive: true });
+    await ensure_read_write(path_box.theme_context_file_path, path_box.theme_context_file_template);
+    await ensure_read_write(path_box.theme_provider_file_path, path_box.theme_provider_file_template);
+    await ensure_read_write(path_box.use_theme_file_path, path_box.use_theme_file_template);
+    await UsingMark(path_box.main_react_path, main_file_data);
+    await nizamDocEditor({
+        title_params: user_options.state_management,
+        expla_params: `
+#### We've created a template that you can use or modify. You'll find it inside. \`src/context/theme\`.
+
+Its structure:
+\`\`\`
+src/
+├─ context/
+│  ├─ theme/
+│  │  ├─ ThemeContext.${user_options.js_framework.includes("js") ? "js" : "ts"}
+│  │  ├─ ThemeProvider.${user_options.js_framework.includes("js") ? "js" : "ts"}x
+│  │  └─ useTheme.${user_options.js_framework.includes("js") ? "js" : "ts"}
+\`\`\`
+
+> [!TIP]
+> React Context API Documentation: [${state_management.documentation.react_context_api.des}](${state_management.documentation.react_context_api.link})`,
+    });
+}
+
+async function ReduxToolkit() {
+    const { user_options } = useContext();
+    const { state_management } = resources_json;
+    const path_box = pathBox();
+    const main_file_data = [
+        {
+            tage_name: "import_react_toolkit_provider",
+            content: `import { Provider } from "react-redux";`,
+        },
+        {
+            tage_name: "import_react_toolkit_store",
+            content: `import { store } from "${user_options.add_aliase ? "@" : "."}/store/store";`,
+        },
+        {
+            tage_name: "open_tage_react_toolkit_provider",
+            content: `<Provider store={store}>`,
+        },
+        {
+            tage_name: "close_tage_react_toolkit_provider",
+            content: `</Provider>`,
+        },
+    ];
+    const ensure_read_write = async (file_path, temp_path) => {
+        const file_contant = await readFile(temp_path);
+        await ensureFile(file_path);
+        await writeFile(file_path, file_contant, "utf8");
+    };
+    await mkdir(path_box.store_path, { recursive: true });
+    await mkdir(path_box.store_slices_path, { recursive: true });
+    await ensure_read_write(path_box.store_file_path, path_box.store_file_template);
+    await ensure_read_write(path_box.slices_counter_file_path, path_box.slices_counter_file_template);
+    await ensure_read_write(path_box.slices_index_file_path, path_box.slices_index_file_template);
+    await UsingMark(path_box.main_react_path, main_file_data);
+    await nizamDocEditor({
+        title_params: user_options.state_management,
+        expla_params: `
+#### We've created a template that you can use or modify. You'll find it inside. \`src/store\`.
+
+Its structure:
+\`\`\`
+src/
+├─ store/
+│  ├─ slices/
+│  │  ├─ index.${user_options.js_framework.includes("js") ? "js" : "ts"}
+│  │  └─ counterSlice.${user_options.js_framework.includes("js") ? "js" : "ts"}
+│  └─ store.${user_options.js_framework.includes("js") ? "js" : "ts"}
+  \`\`\`
+  
+> [!TIP]
+> Redux Toolkit Documentation: [${state_management.documentation.redux_toolkit.des}](${state_management.documentation.redux_toolkit.link})`,
+    });
+}
+
+async function Zustand() {
+    const { user_options } = useContext();
+    const { state_management } = resources_json;
+    const path_box = pathBox();
+    const ensure_read_write = async (file_path, temp_path) => {
+        const file_contant = await readFile(temp_path);
+        await ensureFile(file_path);
+        await writeFile(file_path, file_contant, "utf8");
+    };
+    await mkdir(path_box.store_path, { recursive: true });
+    await ensure_read_write(path_box.zustand_use_counter_file_path, path_box.zustand_use_counter_file_template);
+    await ensure_read_write(path_box.zustand_index_file_path, path_box.zustand_index_file_template);
+    await nizamDocEditor({
+        title_params: user_options.state_management,
+        expla_params: `
+#### We've created a template that you can use or modify. You'll find it inside. \`src/store\`.
+
+Its structure:
+\`\`\`
+src/
+├─ store/
+│  ├─ useCounterStore.${user_options.js_framework.includes("js") ? "js" : "ts"} 
+│  │
+\`\`\`
+
+> [!TIP]
+> Zustand Documentation: [${state_management.documentation.zustand.des}](${state_management.documentation.zustand.link})`,
+    });
+}
+
+async function StateManagementReact() {
+    const { user_options } = useContext();
+    const lib_list = [
+        {
+            name: "react context api",
+            fun: ReactContextAPI,
+            dependencies: [],
+        },
+        {
+            name: "redux toolkit",
+            fun: ReduxToolkit,
+            dependencies: ["@reduxjs/toolkit", "react-redux"],
+        },
+        {
+            name: "zustand",
+            fun: Zustand,
+            dependencies: ["zustand"],
+        },
+    ];
+    await installDependencies({
+        lib_list: lib_list,
+        user_option_library: user_options.state_management,
+    });
+}
+
+async function StateManagement() {
+    const { user_options, operation_state } = useContext();
+    try {
+        if (user_options.js_framework.includes("React")) {
+            await StateManagementReact();
+        }
+        operation_state.state_management.status = "success";
+    }
+    catch (err) {
+        operation_state.state_management.status = "fatal";
+        operation_state.state_management.error_message = extractMainMessage(err);
+    }
+}
+
+async function ReactHelmetAsync() {
+    const { user_options } = useContext();
+    const path_box = pathBox();
+    const { head_management } = resources_json;
+    const main_file_data = [
+        {
+            tage_name: "import_react_helmet_async_provider",
+            content: `import { HelmetProvider } from 'react-helmet-async';`,
+        },
+        {
+            tage_name: "open_react_helmet_async_provider_tage",
+            content: `<HelmetProvider>`,
+        },
+        {
+            tage_name: "close_react_helmet_async_provider_tage",
+            content: `</HelmetProvider>`,
+        },
+    ];
+    await UsingMark(path_box.main_react_path, main_file_data);
+    await nizamDocEditor({
+        title_params: user_options.head_management,
+        expla_params: `
+example on how to use:
+\`\`\`
+import { Helmet } from 'react-helmet-async';
+
+const home = (
+    <>
+      <Helmet>
+        <title></title>
+        <meta name="description" content="" />
+        <meta name="keywords" content="" />
+
+        {/* Open Graph / Facebook / LinkedIn / WhatsApp */}
+        <meta property="og:url" content="" />
+        <meta property="og:title" content="" />
+        <meta property="og:description" content="" />
+        <meta property="og:image" content="" />
+
+        {/* Twitter  */}
+        <meta name="twitter:url" content="" />
+        <meta name="twitter:title" content="" />
+        <meta name="twitter:description" content="" />
+        <meta name="twitter:image" content="" />
+      </Helmet>
+      <h1>Hello World</h1>
+    </>
+);
+\`\`\`
+
+> [!TIP]
+> React Helmet Async Documentation: [${head_management.documentation.react_helmet_async.des}](${head_management.documentation.react_helmet_async.link})`,
+    });
+}
+
+async function Drpogodin() {
+    const { user_options } = useContext();
+    const path_box = pathBox();
+    const { head_management } = resources_json;
+    const main_file_data = [
+        {
+            tage_name: "import_dr_pogodin_react_helmet_async_provider",
+            content: `import { HelmetProvider } from '@dr.pogodin/react-helmet';`,
+        },
+        {
+            tage_name: "open_dr_pogodin_react_helmet_async_provider_tage",
+            content: `<HelmetProvider>`,
+        },
+        {
+            tage_name: "close_dr_pogodin_react_helmet_async_provider_tage",
+            content: `</HelmetProvider>`,
+        },
+    ];
+    await UsingMark(path_box.main_react_path, main_file_data);
+    await nizamDocEditor({
+        title_params: user_options.head_management,
+        expla_params: `
+example on how to use:
+\`\`\`
+import { Helmet } from '@dr.pogodin/react-helmet';
+
+const home = (
+ <>
+   <Helmet>
+      <title></title>
+      <meta name="description" content="" />
+      <meta name="keywords" content="" />
+
+      {/* Open Graph / Facebook / LinkedIn / WhatsApp */}
+      <meta property="og:url" content="" />
+      <meta property="og:title" content="" />
+      <meta property="og:description" content="" />
+      <meta property="og:image" content="" />
+
+      {/* Twitter  */}
+      <meta name="twitter:url" content="" />
+      <meta name="twitter:title" content="" />
+      <meta name="twitter:description" content="" />
+      <meta name="twitter:image" content="" />
+    </Helmet>
+    <h1>Hello World</h1>
+ </>
+);
+\`\`\`
+
+> [!TIP]
+> Dr. Pogodin React Helmet Documentation: [${head_management.documentation["@dr.pogodin/react-helmet"].des}](${head_management.documentation["@dr.pogodin/react-helmet"].link})`,
+    });
+}
+
+async function Unhead() {
+    const { user_options } = useContext();
+    const path_box = pathBox();
+    const { head_management } = resources_json;
+    const main_file_data = [
+        {
+            tage_name: "import_unhead_provider",
+            content: `import { createHead, UnheadProvider } from '@unhead/react';`,
+        },
+        {
+            tage_name: "import_unhead_createhead",
+            content: `const head = createHead();`,
+        },
+        {
+            tage_name: "open_unhead_provider_tage",
+            content: `<UnheadProvider head={head}>`,
+        },
+        {
+            tage_name: "close_unhead_provider_tage",
+            content: `</UnheadProvider>`,
+        },
+    ];
+    await UsingMark(path_box.main_react_path, main_file_data);
+    await nizamDocEditor({
+        title_params: user_options.head_management,
+        expla_params: `
+example on how to use:
+\`\`\`
+import { useHead } from '@unhead/react';
+
+useHead({
+    title: "Home",
+    meta: [
+      { name: "description", content: "" },
+      { name: "keywords", content: "" }
+    ],
+    link: [
+      { rel: "", href: "https://example.com/" }
+    ]
+});
+\`\`\`
+
+> [!TIP]
+> Unhead Documentation: [${head_management.documentation.unhead.des}](${head_management.documentation.unhead.link})`,
+    });
+}
+
+async function HeadManagement() {
+    const { user_options, operation_state } = useContext();
+    const lib_list = [
+        {
+            name: "react helmet async",
+            fun: ReactHelmetAsync,
+            dependencies: ["react-helmet-async"],
+        },
+        {
+            name: "dr. pogodin react helmet",
+            fun: Drpogodin,
+            dependencies: ["@dr.pogodin/react-helmet"],
+        },
+        {
+            name: "unhead",
+            fun: Unhead,
+            dependencies: ["@unhead/react"],
+        },
+    ];
+    try {
+        await installDependencies({
+            lib_list: lib_list,
+            user_option_library: user_options.head_management,
+        });
+        operation_state.head_management.status = "success";
+    }
+    catch (err) {
+        operation_state.head_management.status = "fatal";
+        operation_state.head_management.error_message = extractMainMessage(err);
+    }
+}
+
+async function Axios() {
+    const { user_options } = useContext();
+    const path_box = pathBox();
+    const { data_fetching } = resources_json;
+    const env_file_data = [
+        {
+            tage_name: "VITE_API_URL",
+            content: `VITE_API_URL=https://example.com`,
+        },
+    ];
+    await mkdir(path_box.api_path, { recursive: true });
+    const file_contant = await readFile(path_box.api_axios_file_template);
+    await ensureFile(path_box.api_axios_fle_path);
+    await writeFile(path_box.api_axios_fle_path, file_contant, "utf8");
+    UsingMark(path_box.env_path, env_file_data);
+    await nizamDocEditor({
+        title_params: user_options.data_fetching,
+        expla_params: `
+example on how to use:
+
+\`\`\`
+import api from "${user_options.add_aliase ? "@" : "."}/api/axios";
+
+function Home() {
+  useEffect(() => {
+    api.get<Post[]>("/posts").then(res => setPosts(res.data));
+  }, []);
+
+  return (
+    <div>
+      {posts.map(post => <p key={post.id}>{post.title}</p>)}
+    </div>
+  );
+}
+
+export default Home;
+\`\`\`
+
+> [!TIP]
+> Axios Documentation: [${data_fetching.documentation.axios.des}](${data_fetching.documentation.axios.link})`,
+    });
+}
+
+async function TanStackQuery() {
+    const { user_options } = useContext();
+    const path_box = pathBox();
+    const { data_fetching } = resources_json;
+    const main_file_data = [
+        {
+            tage_name: "import_query_client_provider",
+            content: `import { QueryClient, QueryClientProvider } from "@tanstack/react-query";`,
+        },
+        {
+            tage_name: "using_query_client",
+            content: `const queryClient = new QueryClient();`,
+        },
+        {
+            tage_name: "open_tage_query_client_provider",
+            content: `<QueryClientProvider client={queryClient}>`,
+        },
+        {
+            tage_name: "close_tage_query_client_provider",
+            content: `</QueryClientProvider>`,
+        },
+    ];
+    const env_file_data = [
+        {
+            tage_name: "VITE_API_URL",
+            content: `VITE_API_URL=https://example.com`,
+        },
+    ];
+    await mkdir(path_box.api_path, { recursive: true });
+    const file_contant = await readFile(path_box.api_http_file_template);
+    await ensureFile(path_box.api_http_file_path);
+    await writeFile(path_box.api_http_file_path, file_contant, "utf8");
+    UsingMark(path_box.env_path, env_file_data);
+    UsingMark(path_box.main_react_path, main_file_data);
+    await nizamDocEditor({
+        title_params: user_options.data_fetching,
+        expla_params: `
+example on how to use:
+
+\`\`\`
+import { useQuery } from "@tanstack/react-query";
+import { http, Post } from "${user_options.add_aliase ? "@" : "."}/api/http";
+
+function Home() {
+ const { data, isLoading, error } = useQuery({
+    queryKey: ["posts"],
+    queryFn: () => http("/posts"),
+  });
+
+  if (isLoading) return <p>Loading...</p>;
+  if (error instanceof Error) return <p>Error: {error.message}</p>;
+
+  return <div>{data?.map(post => <p key={post.id}>{post.title}</p>)}</div>;
+}
+
+export default Home;
+\`\`\`
+
+> [!TIP]
+> TanStack Query Documentation: [${data_fetching.documentation.tanstack_query.des}](${data_fetching.documentation.tanstack_query.link})`,
+    });
+}
+
+async function SWR() {
+    const { user_options } = useContext();
+    const path_box = pathBox();
+    const { data_fetching } = resources_json;
+    const env_file_data = [
+        {
+            tage_name: "VITE_API_URL",
+            content: `VITE_API_URL=https://example.com`,
+        },
+    ];
+    await mkdir(path_box.api_path, { recursive: true });
+    const file_contant = await readFile(path_box.api_fetcher_file_template);
+    await ensureFile(path_box.api_fetcher_file_path);
+    await writeFile(path_box.api_fetcher_file_path, file_contant, "utf8");
+    UsingMark(path_box.env_path, env_file_data);
+    await nizamDocEditor({
+        title_params: user_options.data_fetching,
+        expla_params: `
+example on how to use:
+
+\`\`\`
+import useSWR from "swr";
+import { fetcher } from "${user_options.add_aliase ? "@" : "."}/api/fetcher";
+
+function Home() {
+  const { data, error } = useSWR("/posts", fetcher);
+
+  if (error) return <p>Error: {error.message}</p>;
+  if (!data) return <p>Loading...</p>;
+
+  return <div>{data.map(post => <p key={post.id}>{post.title}</p>)}</div>;
+}
+
+export default Home;
+\`\`\`
+
+> [!TIP]
+> SWR Documentation: [${data_fetching.documentation.swr.des}](${data_fetching.documentation.swr.link})`,
+    });
+}
+
+async function DataFetchingReact() {
+    const { user_options } = useContext();
+    const lib_list = [
+        {
+            name: "axios",
+            fun: Axios,
+            dependencies: ["axios"],
+        },
+        {
+            name: "tanstack query",
+            fun: TanStackQuery,
+            dependencies: ["@tanstack/react-query"],
+        },
+        {
+            name: "swr",
+            fun: SWR,
+            dependencies: ["swr"],
+        },
+    ];
+    await installDependencies({
+        lib_list: lib_list,
+        user_option_library: user_options.data_fetching,
+    });
+}
+
+async function DataFetching() {
+    const { user_options, operation_state } = useContext();
+    try {
+        if (user_options.js_framework.includes("React")) {
+            await DataFetchingReact();
+        }
+        operation_state.data_fetching.status = "success";
+    }
+    catch (err) {
+        operation_state.data_fetching.status = "fatal";
+        operation_state.data_fetching.error_message = extractMainMessage(err);
+    }
+}
+
+async function cleanFolder() {
+    const { full_project_path, operation_state } = useContext();
+    const MARK = "##-nizam@mark-##:";
+    const remove_mark = async (dir) => {
+        const items = await readdir(dir);
+        const IGNORE_FILES = new Set([
+            "NIZAM_DOC.md",
+            "package.json",
+            ".gitignore",
+            "README.md",
+            "tsconfig.app.json",
+            "tsconfig.json",
+            "tsconfig.node.json",
+            "index.html",
+            "eslint.config.js",
+            "public",
+        ]);
+        for (const item of items) {
+            if (IGNORE_FILES.has(item))
+                continue;
+            const fullPath = path.join(dir, item);
+            const stat = await lstat(fullPath);
+            if (stat.isDirectory()) {
+                await remove_mark(fullPath);
+            }
+            else if (stat.isFile()) {
+                let content = await readFile(fullPath, "utf8");
+                const lines = content.split(/\r?\n/);
+                const cleanedLines = lines
+                    .map((line) => {
+                    if (line.includes(MARK)) {
+                        const newLine = line.replace(new RegExp(`${MARK}\\S+`, "g"), "");
+                        return newLine.trim() === "" ? null : newLine;
+                    }
+                    return line;
+                })
+                    .filter(Boolean);
+                const cleanedContent = cleanedLines.join("\n");
+                await writeFile(fullPath, cleanedContent, "utf8");
+            }
+        }
+    };
+    try {
+        await remove_mark(full_project_path);
+        operation_state.clean_folder_mark.status = "success";
+    }
+    catch (err) {
+        operation_state.clean_folder_mark.status = "fatal";
+        operation_state.clean_folder_mark.error_message = extractMainMessage(err);
+    }
+}
+
+async function Setup() {
+    const { operation_state, user_options } = useContext();
+    const operation_data = [
+        {
+            operation_name: "creat_project_folder",
+            operation_fun: CreatFolder,
+            operation_des: "creat project folder",
+            operation_is_need: true,
+            operation_targit: true,
+        },
+        {
+            operation_name: "js_framework",
+            operation_fun: JSFramework,
+            operation_des: `install ${user_options.js_framework}`,
+            operation_is_need: true,
+            operation_targit: user_options.js_framework,
+        },
+        {
+            operation_name: "creat_vsc_folder",
+            operation_fun: CreatVSCFolder,
+            operation_des: "creat (.vscode) folder",
+            operation_is_need: false,
+            operation_targit: true,
+        },
+        {
+            operation_name: "add_aliase",
+            operation_fun: Aliase,
+            operation_des: "make path alias (@) configuration",
+            operation_is_need: false,
+            operation_targit: user_options.add_aliase,
+        },
+        {
+            operation_name: "app_structure",
+            operation_fun: Structure,
+            operation_des: "build app structure",
+            operation_is_need: false,
+            operation_targit: user_options.app_structure,
+        },
+        {
+            operation_name: "css_framework",
+            operation_fun: CSSFramework,
+            operation_des: `install and integrate ${user_options.css_framework}`,
+            operation_is_need: false,
+            operation_targit: user_options.css_framework,
+        },
+        {
+            operation_name: "ui_library",
+            operation_fun: UILibrary,
+            operation_des: `install and integrate UI component library`,
+            operation_is_need: false,
+            operation_targit: user_options.ui_library,
+        },
+        {
+            operation_name: "routing_library",
+            operation_fun: RoutingLibrary,
+            operation_des: `install and integrate ${user_options.routing_library}`,
+            operation_is_need: false,
+            operation_targit: user_options.routing_library,
+        },
+        {
+            operation_name: "state_management",
+            operation_fun: StateManagement,
+            operation_des: `install and integrate ${user_options.state_management}`,
+            operation_is_need: false,
+            operation_targit: user_options.state_management,
+        },
+        {
+            operation_name: "icon_library",
+            operation_fun: IconLibrary,
+            operation_des: `install icons Library`,
+            operation_is_need: false,
+            operation_targit: user_options.icon_library,
+        },
+        {
+            operation_name: "head_management",
+            operation_fun: HeadManagement,
+            operation_des: `install and integrate ${user_options.head_management}`,
+            operation_is_need: false,
+            operation_targit: user_options.head_management,
+        },
+        {
+            operation_name: "data_fetching",
+            operation_fun: DataFetching,
+            operation_des: `install and integrate ${user_options.data_fetching}`,
+            operation_is_need: false,
+            operation_targit: user_options.data_fetching,
+        },
+        {
+            operation_name: "clean_folder_mark",
+            operation_fun: cleanFolder,
+            operation_des: `preparing the file for use`,
+            operation_is_need: true,
+            operation_targit: true,
+        },
+    ];
+    // get all path that's i will use
+    CorePaths();
+    for (const _ of operation_data) {
+        if (!_.operation_targit ||
+            (Array.isArray(_.operation_targit) && _.operation_targit.length === 0))
+            continue;
+        await operations(_.operation_fun, _.operation_name, _.operation_des);
+        if (!_.operation_is_need)
+            continue;
+        if (operation_state[_.operation_name].status ===
+            "fatal") {
+            process.exit(0);
+        }
+    }
+}
+
+function createContext() {
+    const one_operation_state = { status: "", error_message: "" };
+    return {
+        internet_conection: false,
+        start_menu_options: "",
+        full_project_path: "",
+        nizam_templates_path: "",
+        pkg_is_installed: [],
+        reset_menu: false,
+        user_options: {
+            project_path: "",
+            project_name: "",
+            pkg_manager: "",
+            js_framework: "",
+            add_aliase: false,
+            css_framework: "",
+            app_structure: "",
+            folder_structure_names: [],
+            files_structure_names: [],
+            ui_library: [],
+            icon_library: [],
+            routing_library: "",
+            react_router_rout: "",
+            state_management: "",
+            head_management: "",
+            data_fetching: "",
+        },
+        operation_state: {
+            creat_project_folder: one_operation_state,
+            js_framework: one_operation_state,
+            creat_vsc_folder: one_operation_state,
+            add_aliase: one_operation_state,
+            css_framework: one_operation_state,
+            app_structure: one_operation_state,
+            ui_library: one_operation_state,
+            routing_library: one_operation_state,
+            icon_library: one_operation_state,
+            state_management: one_operation_state,
+            head_management: one_operation_state,
+            data_fetching: one_operation_state,
+            install_all_packages: one_operation_state,
+            clean_folder_mark: one_operation_state,
+        },
+    };
+}
+
+async function main() {
+    const ctx = createContext();
+    startProject(ctx);
+    const clearConsole = () => {
+        if (process.platform === "win32") {
+            execSync("cls", { stdio: "inherit" });
+        }
+        else {
+            execSync("clear", { stdio: "inherit" });
+        }
+    };
+    const search_mode_colle = async () => {
+        clearConsole();
+        sectionBox("Browse Mode".toUpperCase());
+        await Search();
+        await Core();
+        clearConsole();
+        await printMenu();
+        if (ctx.reset_menu) {
+            await resetContext();
+            ctx.reset_menu = false;
+            return;
+        }
+        clearConsole();
+        sectionBox("Installation".toUpperCase());
+        await Setup();
+        await askAboutInstall();
+        clearConsole();
+        process.exit(0);
+    };
+    const custom_mode_colle = async () => {
+        clearConsole();
+        sectionBox("OneShot Mode".toUpperCase());
+        await Core();
+        await Custom();
+        clearConsole();
+        await printMenu();
+        if (ctx.reset_menu) {
+            await resetContext();
+            ctx.reset_menu = false;
+            return;
+        }
+        clearConsole();
+        sectionBox("Installation".toUpperCase());
+        await Setup();
+        await askAboutInstall();
+        clearConsole();
+        process.exit(0);
+    };
+    const help_colle = async () => {
+        clearConsole();
+        sectionBox("Help".toUpperCase());
+        await help();
+    };
+    const exit_colle = async () => {
+        clearConsole();
+        await say(`See you soon... `);
+        await new Promise((r) => setTimeout(r, 1500));
+    };
+    try {
+        await intro();
+        while (true) {
+            clearConsole();
+            sectionBox("Home".toUpperCase());
+            await HomeMenu();
+            switch (ctx.start_menu_options) {
+                case "Browse Mode":
+                    await search_mode_colle();
+                    break;
+                case "OneShot Mode":
+                    await custom_mode_colle();
+                    break;
+                case "Help":
+                    await help_colle();
+                    break;
+                case "Exit":
+                    await exit_colle();
+                    return;
+            }
+        }
+    }
+    catch (err) {
+        if (err.name === "ExitPromptError") {
+            await say(`Good Bay...`);
+            await new Promise((r) => setTimeout(r, 1500));
+            process.exit(0);
+        }
+        console.error(chalk.red(err));
+        process.exit(1);
+    }
+}
+main();