React Sandbox

Install react-sandbox

// 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}/../`);