From 889b8917f8127ebcdb64276f82999785ac935eae Mon Sep 17 00:00:00 2001
From: Alejandro Lembke Barrientos <aleleba@hotmail.com>
Date: Mon, 30 May 2022 19:11:03 +0000
Subject: [PATCH] PR-188649: Adding Readme file and npx command.

---
 README.md    | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 bin/cli.js   | 29 ++++++++++++++++++++++++++
 package.json |  2 ++
 3 files changed, 89 insertions(+)
 create mode 100644 README.md
 create mode 100644 bin/cli.js

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..ce18d53
--- /dev/null
+++ b/README.md
@@ -0,0 +1,58 @@
+# Create React Component Library
+
+This project aims to have a starter kit for creating a new React Library with storybook.
+
+## Setup
+To create a new project run in the terminal:
+```
+npx @aleleba/create-react-component-library react-library
+```
+Then run:
+```
+cd react-library
+```
+You will need to create a new .env file at the root of the project for global config.
+This is an exaple of config.
+```
+#Library Name (Default: ui-library)
+LIBRARY_NAME=ui-library
+#External CSS (Default: false)
+EXTERNAL_CSS=true
+#External CSS NAME (Default: index.css)
+EXTERNAL_CSS_NAME=other_name.css
+```
+
+### For Development
+In the terminal run:
+```
+npm run start
+```
+You will find the components on:
+```
+scr/components
+```
+You will find stories of storybook on:
+```
+scr/stories
+```
+
+This will start the app-library in development mode, also it have Hot Reloading!
+Enjoy coding!
+
+### For Production
+In the terminal run:
+```
+npm run build
+```
+It will create a dist folder and run:
+```
+npm publish
+```
+This will publish on npm your package. (Remember to delete on package.json)
+```
+"bin": "./bin/cli.js",
+```
+and delete bin folder or modify node bash to use npx.
+
+## Cheers
+Hope you enjoy this proyect! Sincerely Alejandro Lembke Barrientos.
\ No newline at end of file
diff --git a/bin/cli.js b/bin/cli.js
new file mode 100644
index 0000000..79d976c
--- /dev/null
+++ b/bin/cli.js
@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+const { execSync } = require('child_process');
+
+const runCommand = command => {
+    try{
+        execSync(`${command}`, {stdio: 'inherit'});
+    } catch (e) {
+        console.error(`Failed to execute ${command}`, e);
+        return false;
+    }
+    return true;
+}
+
+const repoName = process.argv[2];
+const gitCheckoutCommand = `git clone --depth 1 https://github.com/aleleba/create-react-component-library ${repoName}`;
+const installDepsCommand = `cd ${repoName} && npm install`;
+
+console.log(`Cloning the repository with name ${repoName}`);
+const checkedOut = runCommand(gitCheckoutCommand);
+if(!checkedOut) process.exit(-1);
+
+console.log(`Installing dependencies for ${repoName}`);
+const installedDeps = runCommand(installDepsCommand);
+if(!installedDeps) process.exit(-1);
+
+console.log("Congratulations! You are ready. Follow the following commands to start");
+console.log(`cd ${repoName}`);
+console.log('Create a .env file with LIBRARY_NAME=your_library_name(default: ui-library), External_CSS (optional)(Default: false), EXTERNAL_CSS_NAME=(optional)(Default: index.css)');
+console.log(`Then you can run: npm start`);
\ No newline at end of file
diff --git a/package.json b/package.json
index 9c5c3b6..ce7197d 100644
--- a/package.json
+++ b/package.json
@@ -2,8 +2,10 @@
   "name": "@aleleba/create-react-component-library",
   "version": "1.0.0",
   "description": "A starter kit for create a React component Library with storybook",
+  "bin": "./bin/cli.js",
   "main": "dist/index.js",
   "scripts": {
+    "start": "npm run storybook",
     "build": "webpack",
     "lint": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx",
     "lint:fix": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx --fix",