storybook documentation added

.gitignore

@@ -8,6 +8,7 @@
 package-lock.json
 /lib
 .eslintcache
+storybook-static
 
 # testing
 /coverage

.npmignore

@@ -1,5 +1,7 @@
+.idea
+.storybook
 build
 public
-.idea
+src/stories
+storybook-static
 .eslintcache
-src/example

.storybook/main.js

@@ -0,0 +1,10 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ]
+}

.storybook/preview.js

@@ -0,0 +1,8 @@
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  options: {
+    storySort: {
+      order: ['Examples', ['Simple', 'Colors', 'Area', 'Responsive Map', 'Dynamic All Properties']],
+    },
+  },
+};

README.md

@@ -4,12 +4,12 @@
 > This repository is based on react-image-mapper but with some enhancements 
 
 ```        
-1. Decreased size of bundled        
-2. Added image highlight area stay feature        
-3. Added Natural Dimensions options      
-4. Added rerenderProps options      
-5. Added Image Reference in Width, Height and onLoad function to access image properties  
-6. Added responsive image mapper      
+1. Decreased size of bundled
+2. Awesome Documentation        
+3. Stay selected area highlighted area feature        
+4. New Properties: Natural Dimensions, RerenderProps       
+5. Image Reference in Width, Height and onLoad function to access image properties  
+6. Responsive image mapper      
 7. Promise to be maintained this repository        
 ```        
         

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-img-mapper",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "React Component to highlight interactive zones in images",
   "keywords": [
     "react",
@@ -23,11 +23,13 @@
   "author": "Nisharg Shah",
   "main": "lib/ImageMapper.js",
   "scripts": {
-    "build": "react-scripts build",
+    "build": "build-storybook",
+    "compile": "babel src/lib/** -d lib",
     "predeploy": "npm run build",
-    "deploy": "gh-pages -d build",
-    "start": "react-scripts start",
-    "compile": "babel src/lib/** -d lib"
+    "deploy": "gh-pages -d storybook-static",
+    "lint": "eslint . --ext .js",
+    "lint-fix": "eslint . --ext .js --fix",
+    "start": "start-storybook -p 6006"
   },
   "browserslist": {
     "production": [
@@ -49,6 +51,10 @@
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
+    "@storybook/addon-actions": "^6.1.15",
+    "@storybook/addon-essentials": "^6.1.15",
+    "@storybook/addon-links": "^6.1.15",
+    "@storybook/react": "^6.1.15",
     "babel-loader": "^8.1.0",
     "eslint": "^7.17.0",
     "eslint-config-airbnb": "^18.2.1",
@@ -61,12 +67,10 @@
     "gh-pages": "^3.1.0",
     "prettier": "^2.2.1",
     "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "react-scripts": "4.0.1"
+    "react-dom": "17.0.1"
   },
   "peerDependencies": {
     "react": "16.x || 17.x",
-    "react-dom": "16.x || 17.x",
-    "react-scripts": "3.x || 4.x"
+    "react-dom": "16.x || 17.x"
   }
 }