index.js

#!/usr/bin/env node
import chalk from "chalk";
import inquirer from "inquirer";
import { createSpinner } from "nanospinner";
import fs from "fs";

let projectName;
let projectType;

const sleep = (ms = 2000) => new Promise((r) => setTimeout(r, ms));


await askName();
await whatLang();

if (projectType === "Vanilla") {
  await createProjectVanilla();
} else if (projectType === "React") {
  createReactProject();
} else if (projectType === "Vue") {
  createVueProject();
} else if (projectType === "Svelte") {
  createSvelteProject();
}


sleep();

async function askName() {
  const answers = await inquirer.prompt({
    name: "project_name",
    type: "input",
    message: "The name of the project: ",
    default() {
      return "slx-project";
    },
  });

  projectName = answers.project_name;
}

async function whatLang() {
  const answers = inquirer.prompt({
    name: "question_1",
    type: "list",
    message: "Project language:",
    choices: [
      "React",
      "Vue",
      "Svelte",
      "Vanilla"
    ]
  });

  projectType = (await answers).question_1;
}

async function createProjectVanilla() {
  const spinner = createSpinner("Setting Up Data...").start();
  await sleep();

  try {
    // Create Folder
    fs.mkdirSync(projectName);
    fs.mkdirSync(`${projectName}/src`)

    // Create files
    fs.writeFileSync(`${projectName}/package.json`, String.raw`
    {
    "name": "${projectName}",
    "productName": "${projectName}",
    "version": "1.0.0",
    "description": "My Electron application description",
    "main": "src/index.js",
    "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "echo \"No linting configured\""
    },
    "keywords": [],
    "license": "MIT",
    "config": {
    "forge": {
    "packagerConfig": {},
    "makers": [
        {
        "name": "@electron-forge/maker-squirrel",
        "config": {
            "name": "xqclol"
        }
    },
    {
        "name": "@electron-forge/maker-zip",
        "platforms": [
            "darwin"
        ]
        },
        {
            "name": "@electron-forge/maker-deb",
            "config": {}
            },
            {
            "name": "@electron-forge/maker-rpm",
            "config": {}
            }
        ]
        }
    },
    "dependencies": {
        "electron-squirrel-startup": "^1.0.0"
    },
    "devDependencies": {
        "@electron-forge/cli": "^6.0.0-beta.65",
        "@electron-forge/maker-deb": "^6.0.0-beta.65",
        "@electron-forge/maker-rpm": "^6.0.0-beta.65",
        "@electron-forge/maker-squirrel": "^6.0.0-beta.65",
        "@electron-forge/maker-zip": "^6.0.0-beta.65",
        "electron": "20.0.3"
    }
    }`);

    fs.writeFileSync(`${projectName}/.gitignore`, String.raw`# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock
.DS_Store

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (https://parceljs.org/)
.cache

# next.js build output
.next

# nuxt.js build output
.nuxt

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# Webpack
.webpack/

# Electron-Forge
out/

              `)

    fs.writeFileSync(`${projectName}/src/index.html`, `<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Observers™ X Electron</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <nav class="drag">
      <div class="nav-links">
        <span class="no-drag" id="minimize">&minus;</span>
        <span class="no-drag" id="close">&#10006;</span>
      </div>
    </nav>

    <div class="app">
      <div class="images">
        <div class="image">
          <img src="https://media.discordapp.net/attachments/920261916704784414/1010709504788275271/observers.webp" alt="Observers Team Logo" />
        </div>
        <div class="image">
          <img src="https://media.discordapp.net/attachments/920261916704784414/1010709504456937523/electron.png?width=676&height=676" alt="ElectronJs Logo" />
        </div>
      </div>

      <h1>A very cool cli command made this ;)</h1>

      <div class="btn-counter">
        <button id="plus">0</button>
      </div>
    </div>

    <script>
      let count = 0;
      document.querySelector("#plus").addEventListener("click", () => {
        document.querySelector("#plus").innerHTML = count++;
      });

      const close = document.querySelector("#close");
      const minimize = document.querySelector("#minimize");

      close.addEventListener("click", api.exit);
      minimize.addEventListener("click", api.minimize);
    </script>
  </body>
</html>

        `);

    fs.writeFileSync(`${projectName}/src/index.css`, `body {
    background-color: #36393f;
    /* background-image: url("https://cdn.discordapp.com/splashes/755843597085179934/f23600962cd9cc6f18f1052e8784d694.jpg?size=2048"); */
    }
    
    nav {
    background-color: #202225;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    user-select: none;
    }
    
    nav span {
    color: #fff;
    font-size: 2rem;
    margin-right: 2rem;
    cursor: pointer;
    }
    
    .drag {
    -webkit-app-region: drag;
    }
    
    .no-drag {
    -webkit-app-region: no-drag;
    }
    
    .images {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 5rem;
    }
    
    .image img[alt="Observers Team Logo"] {
    width: 10rem;
    border-radius: 100%;
    animation: rotate 3s linear infinite;
    margin-right: 1rem;
    }
    
    .image img[alt="ElectronJs Logo"] {
    width: 10rem;
    border-radius: 100%;
    animation: rotate 3s linear infinite;
    }
    
    .app h1 {
    color: #fff;
    text-align: center;
    margin-top: 2rem;
    }
    
    .btn-counter {
    display: grid;
    place-items: center;
    }
    
    .btn-counter button {
    width: 5rem;
    height: 2rem;
    border: none;
    background-color: #2f3136;
    border-radius: 0.3rem;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease-out;
    }
    
    .btn-counter button:hover {
    background-color: #292b2f;
    }
    
    .btn-counter button:active {
    transform: translateY(0.9rem);
    }
    
    @keyframes rotate {
    0% {
        transform: rotate(-180deg);
    }
    100% {
        transform: rotate(180deg);
    }
    }
          `)
    fs.writeFileSync(`${projectName}/src/index.js`, `
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
// eslint-disable-next-line global-require
if (require('electron-squirrel-startup')) {
  app.quit();
}

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });

  // and load the index.html of the app.
  mainWindow.loadFile(path.join(__dirname, 'index.html'));

  // Open the DevTools.
  ipcMain.on("app/exit", () => { app.quit(); console.log("first") });
  ipcMain.on("app/minimize", () => { mainWindow.minimize(); console.log("second") });

};

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and import them here.
`)
    fs.writeFileSync(`${projectName}/src/preload.js`, `
// See the Electron documentation for details on how to use preload scripts:
// https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts
const { contextBridge, ipcRenderer } = require("electron");

const API = {
    minimize: () => ipcRenderer.send("app/minimize"),
    exit: () => ipcRenderer.send("app/exit"),
}

contextBridge.exposeInMainWorld("api", API);`)


    spinner.success("Created Files");
    console.log(chalk.bgGreen(`to go in the app folder type: cd ${projectName}`))
    console.log(chalk.bgYellow(`to install the packages type: npm install`))
  } catch (err) {
    spinner.error(`An Error Occurred: ${err}`);
  }
}

async function createVueProject() {
  const spinner = createSpinner("Setting Up Data...").start();
  await sleep();

  try {
    // Create Folder
    fs.mkdirSync(projectName);
    fs.mkdirSync(`${projectName}/public`);
    fs.mkdirSync(`${projectName}/src`);

    // Create files
    fs.writeFileSync(`${projectName}/.gitignore`, `
.DS_Store
node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

#Electron-builder output
/dist_electron
    `);
    fs.writeFileSync(`${projectName}/babel.config.js`, `
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}`)
    fs.writeFileSync(`${projectName}/jsconfig.js`, `
{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}`)
    fs.writeFileSync(`${projectName}/package.json`, `
  {
    "name": "vue-cli",
    "version": "0.1.0",
    "private": true,
    "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint",
      "electron:build": "vue-cli-service electron:build",
      "electron:serve": "vue-cli-service electron:serve",
      "postinstall": "electron-builder install-app-deps",
      "postuninstall": "electron-builder install-app-deps"
    },
    "main": "background.js",
    "dependencies": {
      "@electron/remote": "^2.0.8",
      "core-js": "^3.8.3",
      "vue": "^3.2.13"
    },
    "devDependencies": {
      "@babel/core": "^7.12.16",
      "@babel/eslint-parser": "^7.12.16",
      "@vue/cli-plugin-babel": "~5.0.0",
      "@vue/cli-plugin-eslint": "~5.0.0",
      "@vue/cli-service": "~5.0.0",
      "electron": "^20.0.3",
      "electron-devtools-installer": "^3.1.0",
      "eslint": "^7.32.0",
      "eslint-plugin-vue": "^8.0.3",
      "vue-cli-plugin-electron-builder": "~2.1.1"
    },
    "eslintConfig": {
      "root": true,
      "env": {
        "node": true
      },
      "extends": [
        "plugin:vue/vue3-essential",
        "eslint:recommended"
      ],
      "parserOptions": {
        "parser": "@babel/eslint-parser"
      },
      "rules": {}
    },
    "browserslist": [
      "> 1%",
      "last 2 versions",
      "not dead",
      "not ie 11"
    ]
  }`)
    fs.writeFileSync(`${projectName}/vue.config.js`, `
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})`)
    fs.writeFileSync(`${projectName}/src/App.vue`, `
    <template>
    <div class="images">
      <img
        src="https://media.discordapp.net/attachments/1006279919430545438/1011023078899331154/unknown.png?width=507&height=439"
        alt="Vue Icon"
      />
      <img
        src="https://media.discordapp.net/attachments/920261916704784414/1010709504788275271/observers.webp"
        alt="ObserversTeam Icon"
      />
    </div>
  
    <div class="content">
      <h1>Vuejs X Electron X ObserversTeam Template</h1>
  
      <div class="button-count">
        <button @click="func()">{{ count }}</button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "App",
    data() {
      return {
        count: 0,
      };
    },
    methods: {
      func() {
        this.count++;
      },
    },
  };
  </script>
  
  <style scoped>
  body {
    padding: 0;
    margin: 0;
  }
  
  .images {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    margin-top: 5rem;
  }
  
  .images img {
    widows: 10rem;
    height: 10rem;
    margin-right: 1rem;
    animation: rotate 3s linear infinite;
  }
  
  .images img:last-child {
    border-radius: 100%;
    margin-left: 1rem;
  }
  
  .content h1 {
    text-align: center;
    font-size: 2rem;
    margin-top: 3rem;
  }
  
  @keyframes rotate {
    0% {
      transform: rotate(-180deg);
    }
    100% {
      transform: rotate(180deg);
    }
  }
  
  .button-count {
    display: flex;
    justify-content: center;
    align-content: center;
  }
  
  .button-count button {
    width: 10rem;
    height: 2rem;
    border: none;
    background-color: #41b883;
    color: #11457d;
    border-radius: 0.3rem;
    cursor: pointer;
  }
  </style>`)
    fs.writeFileSync(`${projectName}/src/background.js`, `
  'use strict'

import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'

require("@electron/remote/main").initialize();

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    resizable: false,
    webPreferences: {
      enableRemoteModule: true,
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
  }
}

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS3_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}`)
    fs.writeFileSync(`${projectName}/src/main.js`, `
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')`)
    fs.writeFileSync(`${projectName}/public/index.html`, `
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
  `)
    fs.writeFileSync(`${projectName}/public/index.html`, `
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
  `)
    spinner.success("Created Files");
    console.log(chalk.bgGreen(`to go in the app folder type: cd ${projectName}`))
    console.log(chalk.bgYellow(`to install the packages type: npm install`))
  } catch (err) {
    spinner.error(`An Error Occurred: ${err}`);
  }
}

async function createSvelteProject() {
  const spinner = createSpinner("Setting Up Data...").start();
  await sleep();

  try {
    // Create Folder
    fs.mkdirSync(projectName);
    fs.mkdirSync(`${projectName}/src`);
    fs.mkdirSync(`${projectName}/public`);
    fs.mkdirSync(`${projectName}/electron`);

    // Create files
    fs.writeFileSync(`${projectName}/rollup.config.js`, `
    import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import css from 'rollup-plugin-css-only';

const production = !process.env.ROLLUP_WATCH;

function serve() {
	let server;

	function toExit() {
		if (server) server.kill(0);
	}

	return {
		writeBundle() {
			if (server) return;
			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
				stdio: ['ignore', 'inherit', 'inherit'],
				shell: true
			});

			process.on('SIGTERM', toExit);
			process.on('exit', toExit);
		}
	};
}

export default {
	input: 'src/main.js',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/build/bundle.js'
	},
	plugins: [
		svelte({
			compilerOptions: {
				// enable run-time checks when not in production
				dev: !production
			}
		}),
		// we'll extract any component CSS out into
		// a separate file - better for performance
		css({ output: 'bundle.css' }),

		// If you have external dependencies installed from
		// npm, you'll most likely need these plugins. In
		// some cases you'll need additional configuration -
		// consult the documentation for details:
		// https://github.com/rollup/plugins/tree/master/packages/commonjs
		resolve({
			browser: true,
			dedupe: ['svelte']
		}),
		commonjs(),
		production && terser()
	],
	watch: {
		clearScreen: false
	}
};
    `);

    fs.writeFileSync(`${projectName}/package.json`, `{
  "name": "svelte-app",
  "version": "1.0.0",
  "private": true,
  "main": "./electron/index.js",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "npm run build && electron ."
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "electron": "^20.0.3",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "sirv-cli": "^2.0.0"
  }
}`);

    fs.writeFileSync(`${projectName}/.gitignore`, `/node_modules/
/public/build/

.DS_Store`)

    fs.writeFileSync(`${projectName}/.gitignore`, `/node_modules/
/public/build/

.DS_Store`);

    fs.writeFileSync(`${projectName}/src/App.svelte`, `
<script>
  export let count = 0;

  const update_count = () => {
    count++;
  };
</script>

<main>
  <div class="images">
    <div class="image">
      <img
        src="https://media.discordapp.net/attachments/920261916704784414/1010709504788275271/observers.webp"
        alt="Observers Team Logo"
      />
    </div>
    <div class="image">
      <img
        src="https://media.discordapp.net/attachments/920261916704784414/1010709504456937523/electron.png?width=676&height=676"
        alt="ElectronJs Logo"
      />
    </div>
  </div>

  <div class="content">
    <h1>ElectronJs X SvelteJs X Observers™</h1>

    <button on:click={update_count}>Count: {count}</button>
  </div>
</main>

<style>
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }

  .images {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    margin-top: 5rem;
  }

  .images img {
    widows: 10rem;
    height: 10rem;
    margin-right: 1rem;
    animation: rotate 3s linear infinite;
  }

  .images img:last-child {
    border-radius: 100%;
    margin-left: 1rem;
  }

  .content h1 {
    text-align: center;
    font-size: 2rem;
    margin-top: 3rem;
    color: #000;
  }

  .content button {
    width: 10rem;
    height: 2rem;
    border: none;
    background-color: #f73c00;
    color: #fff;
    border-radius: 0.3rem;
    cursor: pointer;
  }

  @keyframes rotate {
    0% {
      transform: rotate(-180deg);
    }
    100% {
      transform: rotate(180deg);
    }
  }
</style>
`);

    fs.writeFileSync(`${projectName}/src/main.js`, `
import App from './App.svelte';

const app = new App({
	target: document.body,
	props: {
		name: 'world'
	}
});

export default app;`)

    fs.writeFileSync(`${projectName}/public/index.html`, `
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <title>Svelte app</title>

    <link rel="stylesheet" href="global.css" />
    <link rel="stylesheet" href="build/bundle.css" />

    <script defer src="build/bundle.js"></script>
  </head>

  <body bgcolor="#fff"></body>
</html>
`);

    fs.writeFileSync(`${projectName}/public/global.css`, `
html, body {
	position: relative;
	width: 100%;
	height: 100%;
}

body {
	color: #333;
	margin: 0;
	padding: 8px;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

a {
	color: rgb(0,100,200);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: rgb(0,80,160);
}

label {
	display: block;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	-webkit-padding: 0.4em 0;
	padding: 0.4em;
	margin: 0 0 0.5em 0;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 2px;
}

input:disabled {
	color: #ccc;
}

button {
	color: #333;
	background-color: #f4f4f4;
	outline: none;
}

button:disabled {
	color: #999;
}

button:not(:disabled):active {
	background-color: #ddd;
}

button:focus {
	border-color: #666;
}`);

    fs.writeFileSync(`${projectName}/electron/index.js`, `
const { app, BrowserWindow, ipcMain } = require("electron");
const { join } = require("path");

const isDev = !app.isPackaged;

app.whenReady().then(main);

function main() {
  const window = new BrowserWindow({
      width: 800,
      height: 600,
      show: false,
      autoHideMenuBar: true,
      webPreferences: {
          preload: join(__dirname, "./preload.js")
      }
  });

  window.loadFile(join(__dirname, "../public/index.html"));
  window.on("ready-to-show", window.show);

  if (isDev) window.webContents.openDevTools();
}`)

    fs.writeFileSync(`${projectName}/electron/preload.js`, `
  const { ipcRenderer, contextBridge } = require("electron")

  const API = {
      close: () => ipcRenderer.send("app/close"),
      minimize: () => ipcRenderer.send("app/minimize"),
  };
  
  contextBridge.exposeInMainWorld("api", API);
}`)

    spinner.success("Created Files");
    console.log(chalk.bgGreen(`to go in the app folder type: cd ${projectName}`))
    console.log(chalk.bgYellow(`to install the packages type: npm install`))
  } catch (err) {
    spinner.error(`An Error Occurred: ${err}`);
  }
}

async function createReactProject() {
  const spinner = createSpinner("Setting Up Data...").start();
  await sleep();

  try {
    // Create Folder
    fs.mkdirSync(projectName);
    fs.mkdirSync(`${projectName}/src`);
    fs.mkdirSync(`${projectName}/public`);

    // Create files
    fs.writeFileSync(`${projectName}/.gitignore`, `
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*`)

    fs.writeFileSync(`${projectName}/package.json`, `{
  "name": "react-cli",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",
  "main": "./public/main.js",
  "dependencies": {
    "@electron/remote": "^2.0.8",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "concurrently": "^7.3.0",
    "cross-env": "^7.0.3",
    "electron": "^20.0.3",
    "electron-is-dev": "^2.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "wait-on": "^6.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron:serve": "concurrently -k \\"cross-env BROWSER=none yarn start\\" \\"yarn electron:start\\"",
    "electron:build": "yarn build && electron-builder -c.extraMetadata.main=build/main.js",
    "electron:start": "wait-on tcp:3000 && electron ."
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}`);

    fs.writeFileSync(`${projectName}/public/index.html`, `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta
    name="description"
    content="Web site created using create-react-app"
  />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <title>React App</title>
</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>
</html>`);

    fs.writeFileSync(`${projectName}/public/main.js`, `
const { app, BrowserWindow, ipcMain } = require('electron')

const path = require('path')
const isDev = require('electron-is-dev')

require('@electron/remote/main').initialize()

function createWindow() {
    // Create the browser window.
    const win = new BrowserWindow({
        width: 420,
        height: 540,
        resizable: false,
        frame: false,
        webPreferences: {
            nodeIntegration: true,
            enableRemoteModule: true,
            preload: path.join(__dirname, "preload.js")
        }
    })

    win.loadURL(
        isDev
            ? 'http://localhost:3000'
            : 'file://' + path.join(__dirname, '../build/index.html')
    );

    ipcMain.on("app/close", () => app.quit());
    ipcMain.on("app/minimize", () => win.minimize());

}

app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', function () {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
`)

    fs.writeFileSync(`${projectName}/public/manifest.json`, `{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}`);

    fs.writeFileSync(`${projectName}/public/preload.js`, `const { contextBridge, ipcRenderer } = require("electron");

const API = {
  close: () => ipcRenderer.send("app/close"),
  minimize: () => ipcRenderer.send("app/minimize"),
}

contextBridge.exposeInMainWorld("api", API);`);

    fs.writeFileSync(`${projectName}/public/robots.txt`, `
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:`)

    fs.writeFileSync(`${projectName}/src/App.css`, `.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

button {
  width: 10rem;
  height: 2rem;
  color: #282c34;
  background-color: #61dafb;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.3s ease-in;
}

button:hover {
  background-color: #37abcb;
  color: #000;
}

nav {
  background-color: #202225;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  user-select: none;
}

nav span {
  color: #fff;
  font-size: 2rem;
  margin-right: 2rem;
  cursor: pointer;
  padding: 15px;
}

nav span:hover {
  background-color: #149db9;
  padding: 15px 15px 1px 15px;
}
nav span:last-child:hover {
  background-color: #c32b10;
  padding: 15px 15px 1px 15px;
}

.drag {
  -webkit-app-region: drag;
}

.no-drag {
  -webkit-app-region: no-drag;
}`);

    fs.writeFileSync(`${projectName}/src/App.jsx`, `import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <nav class="drag">
        <div class="nav-links">
          <span
            class="no-drag"
            id="minimize"
            onClick={() => window.api.minimize()}
          >
            &minus;
          </span>
          <span class="no-drag" id="close" onClick={() => window.api.close()}>
            &#10006;
          </span>
        </div>
      </nav>

      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <img
          src="https://cdn.discordapp.com/icons/755843597085179934/a_7622e204f3b1012a765de030240e2915.webp?size=96"
          className="App-logo"
          alt="logo"
          style={{ width: "10rem", height: "10rem", borderRadius: "100%" }}
        />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <button onClick={() => setCount(count + 1)}>{count}</button>
      </header>
    </div>
  );
}

export default App;`);

    fs.writeFileSync(`${projectName}/src/App.test.js`, `import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});`);

    fs.writeFileSync(`${projectName}/src/index.css`, `body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}`);

    fs.writeFileSync(`${projectName}/src/index.js`, `import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();`);

    fs.writeFileSync(`${projectName}/src/logo.svg`, `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>`);
    fs.writeFileSync(`${projectName}/src/reportWebVitals.js`, `const reportWebVitals = onPerfEntry => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;`);

    fs.writeFileSync(`${projectName}/src/setupTests.js`, `// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';`);


    spinner.success("Created Files");
    console.log(chalk.bgGreen(`to go in the app folder type: cd ${projectName}`))
    console.log(chalk.bgYellow(`to install the packages type: npm install`))
  } catch (err) {
    spinner.error(`An Error Occurred: ${err}`);
  }
}