Merge pull request #70 from vinaysharma14/development

Development

Author: vinaysharma14

ROADMAP.md

@@ -1,18 +1,38 @@
 # Road Map :construction:
 
-It's great to see you interested in what **Rapid React** holds for the future! You are always welcome for your inputs on the road map. Below is the curated list of upcoming changes lined up:
+It's great to see you interested in what **Rapid React** holds for the future! You are always welcome to pitch in your ideas on the road map. Below is the curated list of upcoming changes lined up:
 
-### New Features
+## New Features
 
-- There would be a dedicated prompt to choose from and scaffold commonly used design libraries:
+- A dedicated setup to choose from and setup popular design libraries:
 
   - [Reactstrap](https://reactstrap.github.io/)
   - [React Bootstrap](https://react-bootstrap.github.io/)
   - [Ant Design](https://ant.design/)
+  - [Styled Components](https://styled-components.com/)
   - [Material UI](https://material-ui.com/)
   - [Tailwind CSS](https://tailwindcss.com/)
   - [Chakra UI](https://chakra-ui.com/)
 
-### Minor changes:
+- Support for Internationalization with
 
-- Invalid names would be logged if entered for any of these: `Route`, `Folder`, `Reducer`, `MobX Store`, `Dependency`, `Dev Dependency`, etc.
+  - [React Intl](https://formatjs.io/docs/react-intl/)
+  - [React i8n Next](https://react.i18next.com/)
+
+- Setting up [Husky Git Hooks](https://typicode.github.io/husky/#/) with [Lint Staged](https://www.npmjs.com/package/lint-staged).
+
+- Setting up [ESLint](https://eslint.org/) with commonly used configs and plugins such as:
+
+  - [eslint-config-airbnb-typescript](https://www.npmjs.com/package/eslint-config-airbnb-typescript)
+  - [eslint-plugin-import](https://www.npmjs.com/package/eslint-plugin-import)
+  - [eslint-plugin-jsx-a11y](https://www.npmjs.com/package/eslint-plugin-jsx-a11y)
+  - [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react)
+  - [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks)
+
+- Setting up [code splitting](https://reactjs.org/docs/code-splitting.html) with Lazy Loading and suspense.
+
+- Support for [dockerizing](https://www.docker.com/) the app.
+
+### Minor changes
+
+- Logging invalid names entered for any of these: `Route`, `Folder`, `Reducer`, `MobX Store`, `Dependency`, `Dev Dependency`, etc.

docs/images/greetings.png

@@ -1,12 +1,12 @@
 {
   "name": "rapid-react",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A light weight interactive CLI Automation Tool 🛠️ for rapid scaffolding of React apps with Create React App under the hood. ⚛️",
   "main": "lib/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "npx eslint --fix 'src/**/*.ts'",
-    "start": "npx nodemon --no-stdin --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts",
+    "start": "npx nodemon --no-stdin --watch 'src/**/*.ts' --exec npx ts-node src/index.ts",
     "prebuild": "rm -rf lib",
     "build": "tsc -p . && npx ts-node src/scripts/minify.ts && npx ncp src/assets lib/assets && npm pack --dry-run"
   },

docs/images/intro.gif

@@ -15,25 +15,28 @@ import {
   generateScaffoldConfig,
 } from './scripts';
 
+const { version } = require('../package.json');
+
 const init = async () => {
   const {
+    thanks,
     welcome,
-    walkThrough,
     complete,
-    thanks,
     raiseIssue,
+    walkThrough,
   } = messages;
 
   const asciiArt = figlet.textSync(name, { font: 'ANSI Shadow' });
 
   // greetings
   console.log(`\n${chalk.cyan(asciiArt)}`);
+  console.log(chalk.green(`(v${version})\n`));
 
   await checkUpdate();
 
   console.log(`${welcome}\n`);
-  features.forEach((value, index) => console.log(`${chalk.green('✔')} ${value} ${index === features.length - 1 ? '\n' : ''}`));
-  console.log(`${chalk.cyan(walkThrough)}\n`);
+  features.forEach(value => console.log(`${chalk.green('✔')} ${value}`));
+  console.log(`\n${chalk.cyan(walkThrough)}\n`);
 
   try {
     // ask user for app information via an interactive setup
@@ -105,7 +108,7 @@ const init = async () => {
     console.log(`\n${complete} ${chalk.green(directory)}\n`);
     console.log(thanks);
     console.log(`${raiseIssue}\n`);
-    notify();
+    await notify();
   } catch (error) {
     console.error(error.message);
   }

package-lock.json

@@ -24,8 +24,7 @@ const flattenScaffoldConfig = (
       if (isFile && typeof children === 'string') {
         // maintain all files in an array with path & data
         files.push({ path, data: children });
-      }
-      else {
+      } else {
         // maintain all directories with path
         directories.push({ path });
       }

package.json

@@ -1,7 +1,28 @@
+import os from 'os';
+import { exec } from 'child_process';
+
 const player = require('play-sound')();
+const asyncExec = require('util').promisify(exec);
+
+export const notify = async() => {
+  const assetPath = __dirname.replace('scripts', 'assets/notification.mp3');
+
+  if (os.platform() === 'win32') {
+    // handle audio playback on windows machine explicitly
+    // code reference has been taken from https://github.com/nomadhoc/sound-play
+
+    const command = 'powershell -c';
+    const playAudio = '$player.Play();';
+    const setVolume = '$player.Volume = 1;';
+    const loadAudioFile = `$player.open('${assetPath}');`;
+    const addPresentationCore = 'Add-Type -AssemblyName presentationCore;';
+    const createMediaPlayer = '$player = New-Object system.windows.media.mediaplayer;';
+    const stopAudio = 'Start-Sleep 1; Start-Sleep -s $player.NaturalDuration.TimeSpan.TotalSeconds;Exit;';
 
-export const notify = () => {
-  player.play(`${__dirname.replace('scripts', 'assets/notification.mp3')}`, function(error: string) {
-    error && console.error(error);
-  });
+    await asyncExec( `${command} ${addPresentationCore} ${createMediaPlayer} ${loadAudioFile} ${setVolume} ${playAudio} ${stopAudio}`);
+  } else {
+    player.play(assetPath, function(error: string) {
+      error && console.error(error);
+    });
+  }
 };