stevebarakat

stevebarakat

Barebones React Starter

// Menu: React Sandbox
// Description: Barebones React Starter
// Author: S.Barakat
//Log: false
// Prevent Scriptkit from closing until script finishes
setIgnoreBlur(true);
// Find and replace
let replaceInFile = async (filePath, regex, string) => {
let content = await readFile(filePath, "utf-8")
let updatedContent = content.replace(
new RegExp(regex),
string
)
await writeFile(filePath, updatedContent)
}
// $`` is using the "zx" tool which wraps around "exec"
// "sed" is a very powerful search/replace tool. We can use it for removing lines:
let removeLine = async (searchArgs, file) => {
for (let n = 0; n < searchArgs.length; n++) {
await $`sed -i .bak /${searchArgs[n]}/d ${file}`;
}
}
/**************
START SCRIPT
**************/
let reset = false;
// Prompt to reset settings
let resetSettings = await arg("Reset settings?", ["no", "yes"]);
if (resetSettings === "yes") {
reset = true;
}
// Prompt for the project name
let projectName = await arg("Project name");
// Remove any spaces or uppercase letters from project name.
projectName = await projectName.toLowerCase().replace(/\s/g, '');
// Prompt for the project directory
let projectDir = await env("PROJECT_DIR", {
placeholder: "Project directory ~/yourDir",
reset: reset
});
// Prompt for the package manager
// let packageManager = await arg("Choose package manager:", ["npm", "yarn"]);
let packageManager = await env("PACKAGE_MANAGER", {
placeholder: "Select a package manager:",
choices: ["npm", "yarn"],
reset: reset
});
if (!which(await packageManager)) {
await terminal(`~/.kit/bin/kit sync-path`);
await div(md("Your PATH had to be set. Please re-run command."));
await exit();
}
// "home" is a helper to create paths in your home dir
cd(home());
mkdir(projectDir);
cd(projectDir);
// Create new app with CRA
await $`npx create-react-app ${projectName.toLowerCase()}`;
cd(path.resolve(projectName, "src"));
// Note: "rm" is actually mapped to "trash" so files get moved to your trash bin instead of permenantly deleted
rm([
`App.test.js`,
`index.css`,
`setUpTests.js`,
`reportWebVitals.js`,
`logo.svg`,
]);
// remove web-vitals and testing-library
await $`${packageManager} remove web-vitals @testing-library/jest-dom @testing-library/react @testing-library/user-event`
let filePath = path.resolve();
await removeLine(["logo"], "App.js");
await removeLine(["WebVitals", "vitals", "performance"], "index.js");
// Download to current dir
await download("https://meyerweb.com/eric/tools/css/reset/reset.css", ".");
await replaceInFile(
filePath + "/App.js",
`<header className="App-header">
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>`,
`App`
)
await replaceInFile(
filePath + "/index.js",
`import './index.css'`,
`import './reset.css'`
);
await replaceInFile(
filePath + "/App.css",
/^(?=[\S\s]{10,8000})[\S\s]*$/im,
`
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
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;
}`
);
rm([
`index.js.bak`,
`App.js.bak`
]);
setIgnoreBlur(false);
edit(`${filePath}/../`);

Gets Computer info

// Menu: Computer Info
// Description: Gets Computer info
// Author: S.Barakat
import os from "os";
const homeDirectory = os.homedir();
const osPlatform = os.platform();
const cpu = os.cpus();
const coreCount = cpu.length;
const cpuModel = cpu[0].model;
const cpuSpeed = cpu[0].speed;
let info = `
* OS: ${osPlatform}
* Home: ${homeDirectory}
* CPU: ${cpuModel}
* Speed: ${cpuSpeed} MHz
* Cores: ${coreCount}
`
await say(
`
Your home directory is: ${homeDirectory}.
The OS platform is: ${osPlatform}.
The processor speed is ${cpuSpeed} megahertz.
Your ${cpuModel} has ${coreCount} cores.
`
);
await div(md(info), `p-4`)