From d953e7d5799674821d77ed67a35b652f0821709e Mon Sep 17 00:00:00 2001 From: NishargShah Date: Fri, 12 Feb 2021 23:08:51 +0530 Subject: [PATCH] removed documentation --- .npmignore | 8 +-- .storybook/main.js | 10 --- .storybook/preview.js | 8 --- README.md | 10 +-- package.json | 25 ++------ src/stories/Area.stories.js | 85 ------------------------- src/stories/Colors.stories.js | 82 ------------------------ src/stories/Dynamic.stories.js | 21 ------ src/stories/Map.stories.js | 78 ----------------------- src/stories/Simple.stories.js | 14 ---- src/stories/components/DynamicMapper.js | 52 --------------- src/stories/components/Mapper.js | 49 -------------- 12 files changed, 11 insertions(+), 431 deletions(-) delete mode 100644 .storybook/main.js delete mode 100644 .storybook/preview.js delete mode 100644 src/stories/Area.stories.js delete mode 100644 src/stories/Colors.stories.js delete mode 100644 src/stories/Dynamic.stories.js delete mode 100644 src/stories/Map.stories.js delete mode 100644 src/stories/Simple.stories.js delete mode 100644 src/stories/components/DynamicMapper.js delete mode 100644 src/stories/components/Mapper.js diff --git a/.npmignore b/.npmignore index 77f6b58..c5708b6 100644 --- a/.npmignore +++ b/.npmignore @@ -1,11 +1,9 @@ +.github .idea -.storybook -build public src -storybook-static -.eslintrc +.babelrc .eslintcache .eslintignore +.eslintrc .prettierrc -.babelrc diff --git a/.storybook/main.js b/.storybook/main.js deleted file mode 100644 index 26dfeaf..0000000 --- a/.storybook/main.js +++ /dev/null @@ -1,10 +0,0 @@ -module.exports = { - "stories": [ - "../src/**/*.stories.mdx", - "../src/**/*.stories.@(js|jsx|ts|tsx)" - ], - "addons": [ - "@storybook/addon-links", - "@storybook/addon-essentials" - ] -} \ No newline at end of file diff --git a/.storybook/preview.js b/.storybook/preview.js deleted file mode 100644 index 65b4fa6..0000000 --- a/.storybook/preview.js +++ /dev/null @@ -1,8 +0,0 @@ -export const parameters = { - actions: { argTypesRegex: '^on[A-Z].*' }, - options: { - storySort: { - order: ['Examples', ['Simple', 'Colors', 'Area', 'Responsive Map', 'Dynamic All Properties']], - }, - }, -}; diff --git a/README.md b/README.md index 15e5972..f3b3be6 100644 --- a/README.md +++ b/README.md @@ -20,12 +20,12 @@ npm install react-img-mapper --save ``` ## Demo & Examples - Live demo: [demo](https://nishargshah.github.io/react-img-mapper) + Live demo: [demo](https://react-img-mapper.github.io/react-img-mapper) To run the example locally ``` -git clone https://github.com/NishargShah/react-img-mapper.git +git clone https://github.com/react-img-mapper/docs.git npm install npm start ``` @@ -36,11 +36,7 @@ If you want to change something and want to make a compiled file, you just need ## Usage Import the component as you normally do, and add it wherever you like in your JSX views as below: -```javascript -// ES5 require -var ImageMapper = require('react-img-mapper'); - -// ES6 import +```javascript import ImageMapper from 'react-img-mapper'; diff --git a/package.json b/package.json index 32c67a0..51d5576 100644 --- a/package.json +++ b/package.json @@ -11,26 +11,22 @@ "img mapper", "image mapper" ], - "homepage": "https://nishargshah.github.io/react-img-mapper", + "homepage": "https://react-img-mapper.github.io/react-img-mapper", "bugs": { - "url": "https://github.com/NishargShah/react-img-mapper/issues" + "url": "https://github.com/react-img-mapper/react-img-mapper/issues" }, "repository": { "type": "git", - "url": "https://github.com/NishargShah/react-img-mapper.git" + "url": "https://github.com/react-img-mapper/react-img-mapper.git" }, "license": "MIT", "author": "Nisharg Shah", "main": "lib/ImageMapper.js", "scripts": { - "build": "build-storybook", "compile": "babel src/lib/** -d lib", - "predeploy": "npm run build", - "deploy": "gh-pages -d storybook-static", "lint": "eslint . --ext .js", "lint-fix": "eslint . --ext .js --fix", - "prepublishOnly": "npm run compile", - "start": "start-storybook -p 3000" + "prepublishOnly": "npm run compile" }, "browserslist": { "production": [ @@ -52,15 +48,8 @@ "@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/addon-storysource": "^6.1.15", - "@storybook/preset-scss": "^1.0.3", - "@storybook/react": "^6.1.15", "babel-eslint": "^10.1.0", "babel-loader": "^8.1.0", - "css-loader": "^5.0.1", "eslint": "^7.17.0", "eslint-config-airbnb": "^18.2.1", "eslint-config-prettier": "^7.1.0", @@ -71,13 +60,9 @@ "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-react": "^7.22.0", "eslint-plugin-react-hooks": "^4.2.0", - "gh-pages": "^3.1.0", "prettier": "^2.2.1", "react": "17.0.1", - "react-dom": "17.0.1", - "sass": "^1.32.5", - "sass-loader": "^10.1.1", - "style-loader": "^2.0.0" + "react-dom": "17.0.1" }, "peerDependencies": { "react": "16.x || 17.x", diff --git a/src/stories/Area.stories.js b/src/stories/Area.stories.js deleted file mode 100644 index 7504151..0000000 --- a/src/stories/Area.stories.js +++ /dev/null @@ -1,85 +0,0 @@ -import React, { Fragment, useRef } from 'react'; -import Mapper from './components/Mapper'; - -const Area = { - title: 'Examples/Area', - component: Mapper, - parameters: { - controls: { hideNoControlsWarning: true }, - }, -}; - -export const ShowHighlightedArea = args => ; - -ShowHighlightedArea.args = { - active: true, -}; - -ShowHighlightedArea.argTypes = { - active: { control: 'boolean' }, -}; - -export const StaySelectedHighlightedArea = args => ( - -); - -StaySelectedHighlightedArea.args = { - stayHighlighted: true, -}; - -StaySelectedHighlightedArea.argTypes = { - stayHighlighted: { control: 'boolean' }, -}; - -export const StayMultipleSelectedHighlightedArea = args => { - const myRef = useRef(null); - - const callingMe = () => { - myRef.current.clearHighlightedArea(); - }; - - return ( - ( - -

For Clear Multiple Selected Highlight

- - - )} - /> - ); -}; - -StayMultipleSelectedHighlightedArea.args = { - stayMultiHighlighted: true, -}; - -StayMultipleSelectedHighlightedArea.argTypes = { - stayMultiHighlighted: { control: 'boolean' }, -}; - -export const ToggleStayHighlightedArea = args => ( - -); - -ToggleStayHighlightedArea.args = { - stayHighlighted: true, - stayMultiHighlighted: false, - toggleHighlighted: true, -}; - -ToggleStayHighlightedArea.argTypes = { - stayHighlighted: { control: 'boolean' }, - stayMultiHighlighted: { control: 'boolean' }, - toggleHighlighted: { control: 'boolean' }, -}; - -export default Area; diff --git a/src/stories/Colors.stories.js b/src/stories/Colors.stories.js deleted file mode 100644 index 97d98cc..0000000 --- a/src/stories/Colors.stories.js +++ /dev/null @@ -1,82 +0,0 @@ -import React from 'react'; -import Mapper from './components/Mapper'; - -const Colors = { - title: 'Examples/Colors', - component: Mapper, - parameters: { - controls: { hideNoControlsWarning: true }, - }, -}; - -export const FillColor = () => ; - -export const InArrayFillColor = () => ; - -export const DynamicFillColor = args => ( - -); - -DynamicFillColor.args = { - fillColor: 'rgba(255, 255, 255, 0.5)', -}; - -DynamicFillColor.argTypes = { - fillColor: { control: 'color' }, -}; - -export const DynamicMixArrayFillColor = args => ( - -); - -DynamicMixArrayFillColor.args = { - fillColor: 'rgba(255, 255, 255, 0.5)', -}; - -DynamicMixArrayFillColor.argTypes = { - fillColor: { control: 'color' }, -}; - -export const StrokeColor = () => ; - -export const InArrayStrokeColor = () => ; - -export const DynamicStrokeColor = args => ( - -); - -DynamicStrokeColor.args = { - strokeColor: 'rgba(0, 0, 0, 0.5)', - lineWidth: 1, -}; - -DynamicStrokeColor.argTypes = { - strokeColor: { control: 'color' }, - lineWidth: { control: 'number' }, -}; - -export const DynamicMixArrayStrokeColor = args => ( - -); - -DynamicMixArrayStrokeColor.args = { - strokeColor: 'rgba(0, 0, 0, 0.5)', - lineWidth: 1, -}; - -DynamicMixArrayStrokeColor.argTypes = { - strokeColor: { control: 'color' }, - lineWidth: { control: 'number' }, -}; - -export default Colors; diff --git a/src/stories/Dynamic.stories.js b/src/stories/Dynamic.stories.js deleted file mode 100644 index 38d5625..0000000 --- a/src/stories/Dynamic.stories.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import DynamicMapper from './components/DynamicMapper'; - -const Dynamic = { - title: 'Examples/Dynamic All Properties', - component: DynamicMapper, - parameters: { - controls: { hideNoControlsWarning: true }, - }, - argTypes: { - width: { control: 'number' }, - height: { control: 'number' }, - fillColor: { control: 'color' }, - strokeColor: { control: 'color' }, - lineWidth: { control: 'number' }, - }, -}; - -export const DynamicAllProperties = args => ; - -export default Dynamic; diff --git a/src/stories/Map.stories.js b/src/stories/Map.stories.js deleted file mode 100644 index b351ac7..0000000 --- a/src/stories/Map.stories.js +++ /dev/null @@ -1,78 +0,0 @@ -import React from 'react'; -import Mapper from './components/Mapper'; - -const Map = { - title: 'Examples/Responsive Map', - component: Mapper, - parameters: { - controls: { hideNoControlsWarning: true }, - }, -}; - -export const NonResponsiveDimensions = args => ( - -); - -NonResponsiveDimensions.args = { - width: 640, - height: 480, - imageWidth: 0, - natural: false, -}; - -NonResponsiveDimensions.argTypes = { - width: { control: 'number' }, - height: { control: 'number' }, - imageWidth: { control: 'number' }, - natural: { control: 'boolean' }, -}; - -export const ResponsiveDimensions = args => ( - -); - -ResponsiveDimensions.args = { - responsive: false, - parentWidth: 640, -}; - -ResponsiveDimensions.argTypes = { - responsive: { control: 'boolean' }, - parentWidth: { control: 'number' }, -}; - -export const AllDimensions = args => ( - -); - -AllDimensions.args = { - width: 640, - height: 480, - imageWidth: 0, - natural: false, - responsive: false, - parentWidth: 640, -}; - -AllDimensions.argTypes = { - width: { control: 'number' }, - height: { control: 'number' }, - imageWidth: { control: 'number' }, - natural: { control: 'boolean' }, - responsive: { control: 'boolean' }, - parentWidth: { control: 'number' }, -}; - -export default Map; diff --git a/src/stories/Simple.stories.js b/src/stories/Simple.stories.js deleted file mode 100644 index cb22467..0000000 --- a/src/stories/Simple.stories.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import Mapper from './components/Mapper'; - -const SimpleApp = { - title: 'Examples/Simple', - component: Mapper, - parameters: { - controls: { hideNoControlsWarning: true }, - }, -}; - -export const Simple = () => ; - -export default SimpleApp; diff --git a/src/stories/components/DynamicMapper.js b/src/stories/components/DynamicMapper.js deleted file mode 100644 index 36addb4..0000000 --- a/src/stories/components/DynamicMapper.js +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import ImageMapper from '../../lib/ImageMapper'; -import URL from '../../assets/example.jpg'; -import areasJSON from '../../assets/example.json'; - -const DynamicMapper = props => { - const MAP = { - name: 'my-map', - areas: areasJSON.map(cur => { - const temp = { ...cur }; - if (['Front Wall', 'Window'].includes(cur.title)) { - delete temp.fillColor; - delete temp.strokeColor; - return temp; - } - return temp; - }), - }; - - return ; -}; - -DynamicMapper.defaultProps = { - width: 640, - height: 480, - lineWidth: 1, - active: true, - fillColor: 'rgba(255, 255, 255, 0.5)', - strokeColor: 'rgba(0, 0, 0, 0.5)', - natural: false, - imgWidth: 0, - stayHighlighted: false, - parentWidth: 640, - responsive: false, -}; - -DynamicMapper.propTypes = { - width: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), - height: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), - lineWidth: PropTypes.number, - active: PropTypes.bool, - fillColor: PropTypes.string, - imgWidth: PropTypes.number, - strokeColor: PropTypes.string, - natural: PropTypes.bool, - stayHighlighted: PropTypes.bool, - parentWidth: PropTypes.number, - responsive: PropTypes.bool, -}; - -export default DynamicMapper; diff --git a/src/stories/components/Mapper.js b/src/stories/components/Mapper.js deleted file mode 100644 index b2141d2..0000000 --- a/src/stories/components/Mapper.js +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import ImageMapper from '../../lib/ImageMapper'; -import URL from '../../assets/example.jpg'; -import areasJSON from '../../assets/example.json'; - -const Mapper = props => { - const { customJSON, customType } = props; - - const getJSON = () => { - if (customJSON === 0) { - return areasJSON.map(cur => { - const temp = { ...cur }; - if (customType === 'fill') { - delete temp.fillColor; - } - if (customType === 'stroke') { - delete temp.fillColor; - delete temp.strokeColor; - } - return temp; - }); - } - if (customJSON === 1) { - return areasJSON.map(cur => { - const temp = { ...cur }; - if (['Front Wall', 'Window'].includes(cur.title)) { - if (customType === 'fill') { - delete temp.fillColor; - } - if (customType === 'stroke') { - delete temp.strokeColor; - } - return temp; - } - return temp; - }); - } - return areasJSON; - }; - - const MAP = { - name: 'my-map', - areas: getJSON(), - }; - - return ; -}; - -export default Mapper;