feat: init git

README.md

@@ -2,8 +2,8 @@
 
 # ALRIGHT REACT APP
 
-Professional React app generator. Shipped with an exposed, unopinionated, highly-performant config.
-Jest-SWC, Storybook, SWC, Typescript 5, Webpack 5.
+Professional React app generator. Comes with an exposed, unopinionated, high performance configuration.
+Jest SWC, Storybook, SWC, Typescript 5, Webpack 5.
 
 <img width="467" alt="Screenshot 2023-04-20 at 16 09 51" src="https://user-images.githubusercontent.com/43271780/233392542-6346ac1d-0f94-4a07-87f3-cf836bf97c22.png">
 
@@ -15,8 +15,8 @@ In your terminal, type:
 npx alright-react-app
 ```
 
-The `npx` command is available if `npm` is globally installed on your computer.
-**Alright React App** will ask you to enter an app name. Then, you only have to press `enter`.
+The `npx` command is available if `npm` is installed globally on your computer.
+**Alright React App** will ask you to enter an application name. Then you just have to press `enter`.
 
 The following folder will be created at the root of your current working directory:
 
@@ -60,7 +60,7 @@ my-app
 
 ```
 
-Once the app is created, type `cd my-app`
+Once the application is created, type `cd my-app'.
 
 # COMMANDS
 
@@ -72,13 +72,17 @@ Once the app is created, type `cd my-app`
 
 **TEST**: `yarn|npm run test`
 
+# STORYBOOK
+
+You must install Storybook globally: `npm i -g @storybook/cli` to use it.
+
 ## CREDITS
 
 DoneDeal0
 
 ## SUPPORT
 
-If you or your company use Alright React App, please show your support by buying me a coffee:
+If you or your company is using the Alright React App, please show your support by buying me a coffee:
 https://www.buymeacoffee.com/donedeal0
 
 <br/>

index.js

@@ -2,8 +2,8 @@
 "use strict";
 import { createProject } from "./tasks/create-project.js";
 import { dirname } from "path";
-import { displayIntroMessage } from "./tasks/intro-message.js";
+import { introMessage } from "./tasks/output.js";
 import { fileURLToPath } from "url";
 
-displayIntroMessage();
+introMessage();
 createProject(process.cwd(), dirname(fileURLToPath(import.meta.url)));

tasks/create-project.js

@@ -6,9 +6,8 @@ import inquirer from "inquirer";
 import path from "path";
 import which from "which";
 import { createDirectoryContent } from "./create-directory-content.js";
-import { installDependencies } from "./installation.js";
-import { postInstall } from "./post-install.js";
-import { preInstall } from "./pre-install.js";
+import { installDependencies, instantiateGit } from "./installation.js";
+import { preInstallMessage, postInstallMessage } from "./output.js";
 import { question } from "./question.js";
 
 export async function createProject(directory, __dirname) {
@@ -27,10 +26,11 @@ export async function createProject(directory, __dirname) {
     process.chdir(projectPath);
     const hasYarn = await which("yarn", { nothrow: true });
     const command = hasYarn ? "yarn" : "npm";
-    preInstall(projectName, command);
+    preInstallMessage(projectName, command);
+    await instantiateGit(projectPath);
     await installDependencies(command, projectPath);
     const _command = hasYarn ? "yarn" : "npm run";
-    postInstall(projectName, _command);
+    postInstallMessage(projectName, _command);
   } catch (err) {
     console.error(chalk.red.bold("The following error occurred:", err));
   }

tasks/installation.js

@@ -1,11 +1,14 @@
 import ora from "ora";
 import { spawn } from "child_process";
+import which from "which";
+import { promisify } from "util";
+import { gitMessage } from "./output.js";
 
 export async function installDependencies(command, projectPath) {
   return new Promise((resolve, reject) => {
     const installationProcess = spawn(command, ["install"], {
       cwd: projectPath,
-      stdio: "pipe",
+      stdio: "ignore",
     });
     const spinner = ora("Installing dependencies...").start();
     spinner.color = "yellow";
@@ -20,3 +23,22 @@ export async function installDependencies(command, projectPath) {
     });
   });
 }
+
+export async function instantiateGit(projectPath) {
+  const hasGit = await which("git", { nothrow: true });
+  if (hasGit) {
+    const gitConfig = spawn("git", [
+      "config",
+      "--global",
+      "init.defaultBranch",
+      "main",
+    ]);
+    await promisify(gitConfig.on.bind(gitConfig))("close");
+    const gitInit = spawn("git", ["init"], {
+      cwd: projectPath,
+      stdio: "ignore",
+    });
+    await promisify(gitInit.on.bind(gitInit))("close");
+    gitMessage();
+  }
+}

tasks/output.js

@@ -0,0 +1,57 @@
+import chalk from "chalk";
+
+export function introMessage() {
+  console.log("", "\n", chalk.yellow.bold("ALRIGHT REACT APP"));
+  console.log(
+    "",
+    "\n",
+    "Alright, alright, alright! Let's create a new React app!",
+    "\n"
+  );
+}
+
+export function preInstallMessage(projectName, command) {
+  console.log(
+    "\n",
+    `${chalk.yellow.bold("✓")}`,
+    `${chalk.yellow.bold(projectName)}'s files and folders have been created`,
+    "\n",
+    `${chalk.green.bold("✓")}`,
+    `${chalk.green.bold(command)} detected`,
+    "\n"
+  );
+}
+
+export function gitMessage() {
+  console.log("\n", `${chalk.yellow.bold("✓")}`, `git Instantiated`);
+}
+
+const runLine = (name) =>
+  `now run ${chalk.bgYellow.black.bold(`cd ${name}`)} to have fun!`;
+
+export function postInstallMessage(projectName, command) {
+  console.log(
+    "",
+    "\n",
+    "Project",
+    chalk.yellow.bold(projectName),
+    "was successfully created!",
+    "\n",
+    "\n",
+    runLine(projectName),
+    "\n",
+    "\n",
+    chalk.yellow.bold("DEV"),
+    `: ${command} dev`,
+    "\n",
+    chalk.yellow.bold("BUILD"),
+    `: ${command} build`,
+    "\n",
+    chalk.yellow.bold("STORYBOOK"),
+    `: ${command} storybook`,
+    "\n",
+    chalk.yellow.bold("TEST"),
+    `: ${command} test`,
+    "\n"
+  );
+}

template/package.json

@@ -10,7 +10,7 @@
     "dev": "webpack serve --progress",
     "lint": "eslint . --ext .js,.ts,.tsx",
     "start": "yarn build/index.js",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "start-storybook -p 6006",
     "test": "jest --maxWorkers=50%",
     "tsc": "tsc --noEmit --skipLibCheck --incremental"
   },
@@ -20,11 +20,10 @@
     "react-router": "^6.10.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/builder-webpack5": "^6.5.10",
-    "@storybook/manager-webpack5": "^6.5.10",
-    "@storybook/cli": "^6.5.10",
-    "@storybook/react": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/react": "^6.5.16",
     "@svgr/webpack": "^7.0.0",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.51",