Merge pull request #24 from raralabs/dev

Dev

CONTRIBUTING.md

@@ -0,0 +1,50 @@
+<h1 align="center" style="border: 0;"> Web Feedback </h1>
+
+# Table Of Contents
+
+- [Prerequisites](#prerequisites)
+- [Contributing](#Contributing)
+  - [Contributing Guide](#Contributing-Guide)
+- [License](#license)
+
+# Prerequisites
+
+- Fundamental knowledge of [Typescript](https://www.typescriptlang.org/docs/).
+
+# Contributing
+
+Want to contribute? Please check the guidelines below:
+
+## Contributing Guide
+
+Please use `dev` branch rather than `main` for the latest development changes.
+
+- Fork the repository
+- Create a feature/patch branch from `dev` branch
+- Commit your changes
+- push to the branch & open a pull request
+
+If you want to add new feature to the project, please raise an issue .
+
+## Development Setup
+
+```sh
+
+#setup project
+git clone https://github.com/raralabs/web-feedback.git
+cd web-feedback
+
+#install dependencies
+yarn
+
+#watch package
+yarn run watch
+
+#build package
+yarn run build-lib
+
+```
+
+## License
+
+The MIT License [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

README.md

@@ -1,72 +1,59 @@
+<h1 align="center"> Web Feedback 
+<div>
+<img src="https://img.shields.io/badge/License-MIT-red.svg"/>
+<img src="https://img.shields.io/badge/--3178C6?logo=typescript&logoColor=ffffff"/>
+<img src="https://img.shields.io/badge/--F7DF1E?logo=javascript&logoColor=000"/>
+<img src="https://img.shields.io/npm/v/@raralabs/web-feedback"/>
+<img src="https://img.shields.io/badge/Contribution%20is%20welcome-%E2%9D%A4%EF%B8%8F-green.svg"/>
+</div>
+</h1>
+
+Helps in better and quicker user feedback for native web components, with ability to capture a screenshot with a single click and submitting feedback component for javascript projects.
+
+<div align="center">
+<img src="https://i.imgur.com/sCiRyBn.gif" />
+</div>
+
 ### Instillation
 
 ```sh
-
-#clone project
-
-git clone https://github.com/raralabs/web-feedback.git
-cd web-feedback
-
-#install dependencies
-
-yarn
-
-#build lib -> /dist folder
-
-yarn run build-lib
-
+npm i @raralabs/web-feedback
 ```
 
-### Features
-
-- Capture screenshot of your current viewport window
-
-- Available annotate tools
-
-  - Mark
-  - Censor
-  - Text Annotate
-
-- Undo Annotates
-
 ### Usages
 
 ```js
-/** Development mode **/
-import { Snipping } from '$libDir/lib/dist';
+import { Snipping } from '@raralabs/web-feedback';
+import '@raralabs/web-feedback/dist/css/style.css'; // stylesheet
 
-let anything = new Snipping({
+let snap = new Snipping({
   buttonLabel: 'Send Feedback',
   initialMarkMode: 'mark',
-  fileName: 'feedbackScreenshot'
+  fileName: 'feedbackScreenshot.png'
   /** other configs **/
 });
 
 /*
  * initialize on app start
- * it also return callback with submit data
+ * it also return callback with screenshot data as
+ * image : image as file type
+ * base64Image: image as base64
  */
-anything.init((data) => {
+snap.init((data) => {
   const { image, base64Image } = data;
-  /**
-   * image : image as file type
-   * base64Image: image as base64
-   *
-   * /
 });
+```
 
-/*
- * or you can initialize using calling anything.init() func on any events.
- *eg: onClick:()=> anything.init()
- */
+### Configs
 
-/**
- * All config
- *
- *  button?: boolean; // enables floating button
-    buttonLabel?: string; // text for floating button
-    initialMarkMode?: IMarkMode; // mark or censored
-    buttonPosition?: 'left' | 'bottom'; // position of form
-    fileName?: string; // name of file
-*/
-```
+Common config you may want to specify include:
+
+- `button` : boolean - enable or disable floating snapper button
+- `buttonLabel`: string - text label for floating snapper button
+- `initialMarkMode`: enum[ 'mark' | 'censored' | 'text' ] - Initial mark mode for the snipper
+- `buttonPostion`: enum[ 'left' | 'right' ] - Position of floating snapper button
+- `fileName`: string - file name for the screenshot
+
+# Contributing
+
+Want to contribute? Please check the guidelines [Contributing.md](https://github.com/raralabs/web-feedback/tree/features/snipping). All PRs and issues are welcome.

package.json

@@ -1,11 +1,14 @@
 {
-  "name": "web-feedback",
-  "version": "1.0.0",
+  "name": "@raralabs/web-feedback",
+  "version": "1.0.1",
   "description": "",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.esm",
+  "typings": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "package.json",
+    "dist/css/style.css"
   ],
   "scripts": {
     "build-lib": "rollup -c",
@@ -34,13 +37,13 @@
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.31.2",
-    "typescript": "^4.5.5"
-  },
-  "dependencies": {
-    "html2canvas": "^1.4.1",
+    "typescript": "^4.5.5",
     "rollup-plugin-scss": "^3.0.0",
     "sass": "^1.49.9"
   },
+  "dependencies": {
+    "html2canvas": "^1.4.1"
+  },
   "keywords": [
     "feedback-system",
     "npm-package",

rollup.config.js

@@ -1,12 +1,10 @@
-//uses peer dependency
+// uses peer dependency
 import external from 'rollup-plugin-peer-deps-external';
-//pairs rollup with typescript
+// pairs rollup with typescript
 import typescript from 'rollup-plugin-typescript2';
 // resolves third party modules and add in the source
 import resolve from '@rollup/plugin-node-resolve';
 import scss from 'rollup-plugin-scss';
-//uglifying and minizing the budle
-// import { terser } from "rollup-plugin-terser";
 // babel
 import babel from 'rollup-plugin-babel';
 
@@ -36,7 +34,6 @@ export default [
         failOnError: true,
         runtime: require('sass')
       })
-      // terser(),
     ]
   }
 ];

src/modes/canvas/index.ts

@@ -17,8 +17,8 @@ class Snipping {
   textAnnotateCount: number;
   fileName: string;
 
-  constructor(config: ICanvasMode.IConfig) {
-    const { buttonLabel, initialMarkMode, buttonPosition, fileName } = config;
+  constructor(config?: ICanvasMode.IConfig) {
+    const { buttonLabel, initialMarkMode, buttonPosition, fileName } = config || {};
     this.buttonLabel = buttonLabel || 'Report Bug/Feedback';
     this.markMode = initialMarkMode || 'mark';
     this.buttonPosition = buttonPosition || 'bottom';

src/styles/partials/_head.scss

@@ -0,0 +1,5 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}