[ docs] contributing file

Giuliano1993 · Giuliano1993 · commit 7ac2fcc3aed3 · 2023-11-21T08:32:21.000+01:00
[ docs ] readme update
wizard to ts
types fixing
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -0,0 +1,21 @@
+
+## Issues & Pull Requests (not for Profiles)
+
+### Creating an Issue
+
+Before **creating** an Issue please follow these steps:
+
+1. search existing Issues before creating a new issue (has someone raised this already)
+2. if it doesn't exist create a new issue giving as much context as possible
+3. if you wish to work on the Issue please check the relative checkbox
+
+### Working on an Issue (get it assigned to you)
+
+Before working on an existing Issue please follow these steps:
+
+1. comment asking for the issue to be assigned to you
+2. after the Issue is assigned to you, you can start working on it
+3. **only** start working on this Issue (and open a Pull Request) when it has been assigned to you.
+4. when forking the issue, create a branch for your edits
+5. reference the Issue in your Pull Request (for example `closes #123`)
+6. please do **not** force push to your PR branch, this makes it very difficult to re-review - commits will be squashed when merged
diff --git a/README.md b/README.md
@@ -3,77 +3,26 @@ This package is born from the idea to expand the previous [make-vue-component](h
 
 - [Make Js Component](#make-js-component)
   - [Basic Usage](#basic-usage)
-  - [Frameworks](#frameworks)
+  - [Available Frameworks](#available-frameworks)
   - [Vue](#vue)
-    - [Arguments \& Options](#arguments--options)
-      - [Component-name `REQUIRED`](#component-name-required)
-      - [-c](#-c)
-      - [-f --folder](#-f---folder)
   - [Angular](#angular)
-    - [Arguments \& Options](#arguments--options-1)
-      - [Component-name `REQUIRED`](#component-name-required-1)
-      - [-c](#-c-1)
   - [Contributing](#contributing)
-    - [Open issue](#open-issue)
-    - [Pull Request](#pull-request)
 
 
 ## Basic Usage
 
 ```bash
-npx make-js-component [framework name] <component-name> 
+npx make-js-component
 ```
 
-For example:
+This will run a short wizard so you can easily create your component in few steps
 
-```bash
-npx make-js-component vue my-great-component
-```
-
-## Frameworks
-Many frameworks are going to be implemented; for each you'll have some options to generate the component how it suits you best
+## Available Frameworks
 
 ## Vue
-Creates a vue component
-  
-### Arguments & Options
-
-    
-#### Component-name `REQUIRED`
-The name of the component you want to create
-
-
-#### -c 
-If creating a Vue Comonent, it will use the composition API, defaults on Option API
-
-#### -f --folder
-Select a custom nested folder inside src/components 
-
 
 ## Angular
-Creates a angular component
-  
-### Arguments & Options
-
-    
-#### Component-name `REQUIRED`
-The name of the component you want to create
-
-
-#### -c 
-If creating a Vue Comonent, it will use the composition API, defaults on Option API
-
 
 
 ## Contributing
-Every contribution is more than welcome
-
-### Open issue
-If you find any issue please open it and explain clearly what's the problem giving also some context indication; ideas for enhancements are also welcome.
-
-### Pull Request
-You can ask to have an issue assigned and work on it. I will merge the pull requests related to an issue, so first have it assigned and then work on the code
-
-When forking, work on a separate branch not on main
-
-
+Read the [Contributing guide](./CONTRIBUTING.md) for the contribution process
diff --git a/cmd/make-js-component.mjs b/cmd/make-js-component.mjs
@@ -5,4 +5,6 @@ import createComponent from "../src/utils/utils.mjs";
 wizard().then((answers) => {
     const { componentName, framework, template, folder } = answers;
     createComponent(componentName, framework, template, folder);
+}).catch((e) => {
+    console.error(e.message);
 });
diff --git a/cmd/make-js-component.mts b/cmd/make-js-component.mts
@@ -16,4 +16,6 @@ wizard().then((answers: Answers)=>{
     const {componentName, framework, template, folder} = answers;
     
     createComponent(componentName, framework, template, folder)
+}).catch((e:Error)=>{
+    console.error(e.message)
 })
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "make-js-component",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Easily create your js framework component in one command",
   "repository": "https://github.com/Giuliano1993/make-js-component",
   "bin": "./cmd/make-js-component.mjs",
@@ -21,6 +21,7 @@
   "author": "Giuliano Gostinfini (Ghostylab)",
   "license": "ISC",
   "devDependencies": {
+    "@types/inquirer": "^9.0.7",
     "@types/node": "^20.9.0",
     "typescript": "^5.2.2"
   },
diff --git a/utils/wizard.mjs b/utils/wizard.mjs
@@ -1,7 +1,5 @@
 import inquirer from 'inquirer';
-
-const wizard = async()=>{
-
+const wizard = async () => {
     return inquirer.prompt([
         {
             type: "input",
@@ -12,57 +10,53 @@ const wizard = async()=>{
             type: "list",
             name: "framework",
             message: "pick a framework to create the component for",
-            choices: ["vue","angular"]
+            choices: ["vue", "angular"]
         }
-    ]).then((answers)=>{
+    ]).then((answers) => {
         const componentName = answers.name;
         const framework = answers.framework;
-        if(framework === 'vue'){
+        if (framework === 'vue') {
             return inquirer.prompt([{
-                type: "list",
-                name: "api",
-                message: "choose wich api to use",
-                choices: ["Composition API", "Options API"]
-            },{
-                type: 'input',
-                name: 'folder',
-                message: "custom path under the component folder for saving your component",
-                default: ""
-            }]).then((answers)=>{
+                    type: "list",
+                    name: "api",
+                    message: "choose wich api to use",
+                    choices: ["Composition API", "Options API"]
+                }, {
+                    type: 'input',
+                    name: 'folder',
+                    message: "custom path under the component folder for saving your component",
+                    default: ""
+                }]).then((answers) => {
                 return {
                     componentName: componentName,
                     framework: framework,
                     template: answers.api === "Composition API" ? "component-composition.vue" : "component-options.vue",
                     folder: answers.folder
-                }
-            })
-        }else if(framework === 'angular'){
+                };
+            });
+        }
+        else if (framework === 'angular') {
             return inquirer.prompt([{
-                type: 'input',
-                name: 'folder',
-                message: "custom path under the component folder for saving your component",
-                default: ""
-            }]).then((answers)=>{
+                    type: 'input',
+                    name: 'folder',
+                    message: "custom path under the component folder for saving your component",
+                    default: ""
+                }]).then((answers) => {
                 return {
                     componentName: componentName,
                     framework: framework,
                     template: "component.component.js",
                     folder: answers.folder
-                }
-            })
+                };
+            });
         }
-        else{
-            return new Promise((resolve,reject)=>{
-                resolve({
-                    componentName: componentName,
-                    framework:framework
-                })
-            })
+        else {
+            throw new Error("a framework must be selected");
         }
-    
-    
-    }).then((values)=>{
-        return values
-    })
-}
-export default wizard;
+    }).then((values) => {
+        return values;
+    }).catch((e) => {
+        throw new Error(e.message);
+    });
+};
+export default wizard;
diff --git a/utils/wizard.mts b/utils/wizard.mts
@@ -0,0 +1,80 @@
+import inquirer from 'inquirer';
+
+
+type Answers = {
+    componentName: string,
+    framework: string,
+    template: string,
+    folder: string
+}
+const wizard = async()=>{
+
+    return inquirer.prompt([
+        {
+            type: "input",
+            name: "name",
+            message: "give a name to your component"
+        },
+        {
+            type: "list",
+            name: "framework",
+            message: "pick a framework to create the component for",
+            choices: ["vue","angular"]
+        }
+    ]).then((answers: {
+        name: string,
+        framework: string
+    })=>{
+        const componentName = answers.name;
+        const framework = answers.framework;
+        if(framework === 'vue'){
+            return inquirer.prompt([{
+                type: "list",
+                name: "api",
+                message: "choose wich api to use",
+                choices: ["Composition API", "Options API"]
+            },{
+                type: 'input',
+                name: 'folder',
+                message: "custom path under the component folder for saving your component",
+                default: ""
+            }]).then((answers: {
+                api: string,
+                folder: string
+            })=>{
+                return { 
+                    componentName: componentName,
+                    framework: framework,
+                    template: answers.api === "Composition API" ? "component-composition.vue" : "component-options.vue",
+                    folder: answers.folder
+                }
+            })
+        }else if(framework === 'angular'){
+            return inquirer.prompt([{
+                type: 'input',
+                name: 'folder',
+                message: "custom path under the component folder for saving your component",
+                default: ""
+            }]).then((answers: {
+                folder:string
+            })=>{
+                return {
+                    componentName: componentName,
+                    framework: framework,
+                    template: "component.component.js",
+                    folder: answers.folder
+                }
+            })
+        }else{
+            throw new Error("a framework must be selected");
+        }
+    
+    
+    }).then<Answers>((values : Answers|PromiseLike<Answers>)=>{
+        return values
+    }).catch((e:Error)=>{
+        throw new Error(e.message);
+    })
+    
+}
+export default wizard;
