From 350787ce745e1f96d5c2fd34f2d0b78be4e72efc Mon Sep 17 00:00:00 2001 From: zeakd Date: Mon, 10 May 2021 00:14:52 +0900 Subject: [PATCH] :tada: prepare brand-new base --- .eslintignore | 4 +- .eslintrc.js | 80 +- .gitignore | 3 +- .husky/.gitignore | 1 + .travis.yml | 23 - LICENSE | 21 - README.md | 32 +- babel.config.js | 15 - docs/examples/1-map-simple.md | 24 - docs/examples/2-map-options.md | 171 - docs/examples/3-map-types.md | 77 - docs/examples/4-map-bounds.md | 95 - docs/examples/basic.mdx | 3 + docs/examples/example-intro.md | 51 - docs/examples/map-option.mdx | 5 + docs/examples/map-type.mdx | 5 + docs/getting-started.md | 113 - docs/how-to-access-instance.md | 67 - docs/intro.md | 2 + docs/introduction.md | 103 - docs/naver-map.mdx | 12 + docs/overlays/circle.mdx | 72 + docs/overlays/ellipse.mdx | 6 + docs/overlays/ground-overlay.mdx | 6 + docs/overlays/info-window.mdx | 6 + docs/overlays/marker.mdx | 45 + docs/overlays/polygon.mdx | 6 + docs/overlays/polyline.mdx | 6 + docs/overlays/rectangle.mdx | 6 + docs/using-class-methods.md | 36 - doczrc.js | 20 + examples/script-tag/.env.example | 1 - examples/script-tag/.gitignore | 2 - examples/script-tag/babel.config.js | 5 - examples/script-tag/package.json | 23 - examples/script-tag/public/template.html | 16 - examples/script-tag/readme.md | 13 - examples/script-tag/src/App.js | 20 - examples/script-tag/src/index.js | 6 - examples/script-tag/webpack.config.js | 30 - examples/script-tag/yarn.lock | 3789 -- hocs/package.json | 6 - package-lock.json | 53904 +++++++++++++++++++++ package.json | 114 +- rollup.config.js | 96 +- src/MapContext.js | 8 - src/RenderAfterNavermapsLoaded.js | 70 - src/components/NaverMap.js | 600 - src/components/Overlay.js | 53 - src/components/overlays/Circle.js | 90 - src/components/overlays/Circle.md | 39 - src/components/overlays/Ellipse.js | 86 - src/components/overlays/Ellipse.md | 50 - src/components/overlays/GroundOverlay.js | 77 - src/components/overlays/GroundOverlay.md | 41 - src/components/overlays/Marker.js | 81 - src/components/overlays/Marker.md | 38 - src/components/overlays/Polygon.js | 85 - src/components/overlays/Polygon.md | 49 - src/components/overlays/Polyline.js | 87 - src/components/overlays/Polyline.md | 44 - src/components/overlays/Rectangle.js | 86 - src/components/overlays/Rectangle.md | 50 - src/contexts/map-context.tsx | 4 + src/hocs/autoResize.js | 75 - src/hocs/bridgeEventHandlers.js | 196 - src/hocs/index.js | 6 - src/hocs/injectNaverRef.js | 25 - src/hocs/namedWrapper.js | 11 - src/hocs/withMap.js | 23 - src/hocs/withNavermaps.js | 42 - src/index.js | 15 - src/index.ts | 11 + src/load-navermaps.tsx | 26 + src/loadNavermapsScript.js | 52 - src/naver-map.tsx | 199 + src/overlays/circle.tsx | 113 + src/overlays/ellipse.tsx | 112 + src/overlays/ground-overlay.tsx | 85 + src/overlays/info-window.tsx | 114 + src/overlays/marker.tsx | 119 + src/overlays/overlay-view.tsx | 54 + src/overlays/polygon.tsx | 105 + src/overlays/polyline.tsx | 109 + src/overlays/rectangle.tsx | 112 + src/utils/event.ts | 41 + src/utils/get-navermaps.ts | 10 + src/utils/load-script.ts | 21 + src/utils/pick.js | 11 - src/utils/types.ts | 3 + styleguide.config.js | 102 - styleguide/setup.js | 51 - tsconfig.json | 74 + yarn.lock | 7528 --- 94 files changed, 55586 insertions(+), 14638 deletions(-) create mode 100644 .husky/.gitignore delete mode 100644 .travis.yml delete mode 100644 LICENSE delete mode 100644 babel.config.js delete mode 100644 docs/examples/1-map-simple.md delete mode 100644 docs/examples/2-map-options.md delete mode 100644 docs/examples/3-map-types.md delete mode 100644 docs/examples/4-map-bounds.md create mode 100644 docs/examples/basic.mdx delete mode 100644 docs/examples/example-intro.md create mode 100644 docs/examples/map-option.mdx create mode 100644 docs/examples/map-type.mdx delete mode 100644 docs/getting-started.md delete mode 100644 docs/how-to-access-instance.md create mode 100644 docs/intro.md delete mode 100644 docs/introduction.md create mode 100644 docs/naver-map.mdx create mode 100644 docs/overlays/circle.mdx create mode 100644 docs/overlays/ellipse.mdx create mode 100644 docs/overlays/ground-overlay.mdx create mode 100644 docs/overlays/info-window.mdx create mode 100644 docs/overlays/marker.mdx create mode 100644 docs/overlays/polygon.mdx create mode 100644 docs/overlays/polyline.mdx create mode 100644 docs/overlays/rectangle.mdx delete mode 100644 docs/using-class-methods.md create mode 100644 doczrc.js delete mode 100644 examples/script-tag/.env.example delete mode 100644 examples/script-tag/.gitignore delete mode 100644 examples/script-tag/babel.config.js delete mode 100644 examples/script-tag/package.json delete mode 100644 examples/script-tag/public/template.html delete mode 100644 examples/script-tag/readme.md delete mode 100644 examples/script-tag/src/App.js delete mode 100644 examples/script-tag/src/index.js delete mode 100644 examples/script-tag/webpack.config.js delete mode 100644 examples/script-tag/yarn.lock delete mode 100644 hocs/package.json create mode 100644 package-lock.json delete mode 100644 src/MapContext.js delete mode 100644 src/RenderAfterNavermapsLoaded.js delete mode 100644 src/components/NaverMap.js delete mode 100644 src/components/Overlay.js delete mode 100644 src/components/overlays/Circle.js delete mode 100644 src/components/overlays/Circle.md delete mode 100644 src/components/overlays/Ellipse.js delete mode 100644 src/components/overlays/Ellipse.md delete mode 100644 src/components/overlays/GroundOverlay.js delete mode 100644 src/components/overlays/GroundOverlay.md delete mode 100644 src/components/overlays/Marker.js delete mode 100644 src/components/overlays/Marker.md delete mode 100644 src/components/overlays/Polygon.js delete mode 100644 src/components/overlays/Polygon.md delete mode 100644 src/components/overlays/Polyline.js delete mode 100644 src/components/overlays/Polyline.md delete mode 100644 src/components/overlays/Rectangle.js delete mode 100644 src/components/overlays/Rectangle.md create mode 100644 src/contexts/map-context.tsx delete mode 100644 src/hocs/autoResize.js delete mode 100644 src/hocs/bridgeEventHandlers.js delete mode 100644 src/hocs/index.js delete mode 100644 src/hocs/injectNaverRef.js delete mode 100644 src/hocs/namedWrapper.js delete mode 100644 src/hocs/withMap.js delete mode 100644 src/hocs/withNavermaps.js delete mode 100644 src/index.js create mode 100644 src/index.ts create mode 100644 src/load-navermaps.tsx delete mode 100644 src/loadNavermapsScript.js create mode 100644 src/naver-map.tsx create mode 100644 src/overlays/circle.tsx create mode 100644 src/overlays/ellipse.tsx create mode 100644 src/overlays/ground-overlay.tsx create mode 100644 src/overlays/info-window.tsx create mode 100644 src/overlays/marker.tsx create mode 100644 src/overlays/overlay-view.tsx create mode 100644 src/overlays/polygon.tsx create mode 100644 src/overlays/polyline.tsx create mode 100644 src/overlays/rectangle.tsx create mode 100644 src/utils/event.ts create mode 100644 src/utils/get-navermaps.ts create mode 100644 src/utils/load-script.ts delete mode 100644 src/utils/pick.js create mode 100644 src/utils/types.ts delete mode 100644 styleguide.config.js delete mode 100644 styleguide/setup.js create mode 100644 tsconfig.json delete mode 100644 yarn.lock diff --git a/.eslintignore b/.eslintignore index 1c3cfca..b4a4e49 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1,2 @@ -dist/**/* -node_modules/**/* +**/dist/** +**/node_modules/** \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js index a7870bb..1663975 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,34 +1,50 @@ module.exports = { - "extends": [ - "eslint:recommended", - "plugin:react/recommended", - "plugin:prettier/recommended", - "prettier/react" + parser: '@typescript-eslint/parser', + extends: [ + 'eslint:recommended', + 'plugin:react/recommended', + 'plugin:@typescript-eslint/recommended', + ], + parserOptions: { + ecmaVersion: 2020, + sourceType: 'module', + ecmaFeatures: { jsx: true }, + }, + env: { + es6: true, + node: true, + }, + rules: { + 'quotes': ['error', 'single'], + 'comma-dangle': ['error', 'always-multiline'], + 'eol-last': ['error', 'always'], + 'prefer-template': 'error', + 'object-curly-spacing': ['error', 'always'], + 'comma-spacing': ['error'], + 'no-multi-spaces': ['error'], + 'no-unexpected-multiline': ['error'], + 'object-curly-newline': ['error', { multiline: true }], + 'array-bracket-newline': ['error', { multiline: true }], + 'function-paren-newline': ['error', 'multiline'], + 'no-trailing-spaces': 'error', + 'react/prop-types': ['off'], + 'react/function-component-definition': [ + 'error', { + 'namedComponents': 'arrow-function', + 'unnamedComponents': 'arrow-function', + }, ], - "plugins": ["react", "prettier"], - "settings": { - "react": { - "version": "15.0", - } - }, - "env": { - "browser": true, - "es6": true - }, - "parserOptions": { - "ecmaFeatures": { - "jsx": true - }, - "ecmaVersion": 2018, - "sourceType": "module" - }, - "rules": { - "prettier/prettier": ["error", { - singleQuote: true, - trailingComma: 'all', - // "bracketSpacing": false, - // "jsxBracketSameLine": true, - }], - "no-unused-vars": "warn", - } -}; \ No newline at end of file + '@typescript-eslint/explicit-function-return-type': 'off', + '@typescript-eslint/member-delimiter-style': ['error'], + '@typescript-eslint/type-annotation-spacing': ['error'], + + 'indent': 'off', + '@typescript-eslint/indent': ['error', 2], + 'semi': 'off', + '@typescript-eslint/semi': ['error'], + 'no-empty-function': 'off', + '@typescript-eslint/no-empty-function': ['off'], + '@typescript-eslint/no-explicit-any': ['off'], + }, + settings: { react: { 'version': 'latest' } }, +}; diff --git a/.gitignore b/.gitignore index 6d5e48c..59ef37a 100644 --- a/.gitignore +++ b/.gitignore @@ -65,4 +65,5 @@ styleguide/build/ styleguide/index.html # editor -.vscode \ No newline at end of file +.vscode +.docz \ No newline at end of file diff --git a/.husky/.gitignore b/.husky/.gitignore new file mode 100644 index 0000000..31354ec --- /dev/null +++ b/.husky/.gitignore @@ -0,0 +1 @@ +_ diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 3453ad4..0000000 --- a/.travis.yml +++ /dev/null @@ -1,23 +0,0 @@ -language: node_js -node_js: - - "stable" - -cache: - directories: - - node_modules - -branches: - only: - - master - -before_deploy: - - npm run website - -deploy: - provider: pages - skip_cleanup: true - github_token: $github_token - local_dir: styleguide - keep-history: true - on: - branch: master \ No newline at end of file diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 23909e3..0000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2018 Deokseong Kim - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/README.md b/README.md index 4314825..09d6500 100644 --- a/README.md +++ b/README.md @@ -1,31 +1 @@ -> 이 라이브러리는 지속적으로 작업이 진행중입니다. 0.1.0 을 올리기 전까지 api는 변경될 수 있습니다. -> 홈페이지가 개편 되었습니다. Naver Maps를 라이브로 테스트 해 볼 수 있습니다. - - -# react-naver-maps -Controlled React Component for Naver Maps to handle zoom, center, etc. - -## Install - -``` bash -npm install react-naver-maps -# or -yarn add react-naver-maps -``` - -## Documentation - -- [Introduction](https://zeakd.github.io/react-naver-maps/#/React%20Naver%20Maps?id=introduction) -- [Getting Started](https://zeakd.github.io/react-naver-maps/#/React%20Naver%20Maps?id=getting-started) -- [API Docs](https://zeakd.github.io/react-naver-maps) - -## [Example Projects](./examples) - -## Contribute - -이 슈 환 영 - -피 알 환 영 - - - +# React Naver Maps \ No newline at end of file diff --git a/babel.config.js b/babel.config.js deleted file mode 100644 index aab9558..0000000 --- a/babel.config.js +++ /dev/null @@ -1,15 +0,0 @@ -module.exports = { - presets: [ - [ - '@babel/preset-env', - { - exclude: ['transform-regenerator'], - // useBuiltIns: 'usage', - }, - ], - '@babel/preset-react', - ], - plugins: [ - // '@babel/plugin-external-helpers' - ], -}; diff --git a/docs/examples/1-map-simple.md b/docs/examples/1-map-simple.md deleted file mode 100644 index 8a8ef8e..0000000 --- a/docs/examples/1-map-simple.md +++ /dev/null @@ -1,24 +0,0 @@ - -``` js - -import { RenderAfterNavermapsLoaded, NaverMap } from 'react-naver-maps' - -function App() { - return ( - - ) -} - -// render - - - -``` \ No newline at end of file diff --git a/docs/examples/2-map-options.md b/docs/examples/2-map-options.md deleted file mode 100644 index 4efb9cc..0000000 --- a/docs/examples/2-map-options.md +++ /dev/null @@ -1,171 +0,0 @@ - -``` js - -import { RenderAfterNavermapsLoaded, NaverMap } from 'react-naver-maps' - -class App extends React.Component { - constructor (props) { - super(props) - - const navermaps = window.naver.maps; - - this.state = { - // defaults - zoomControl: true, //줌 컨트롤의 표시 여부 - zoomControlOptions: { //줌 컨트롤의 옵션 - position: navermaps.Position.TOP_RIGHT - }, - - // min max zoom - minZoom: 1, - maxZoom: 14, - - // interaction - draggable: true, - pinchZoom: true, - scrollWheel: true, - keyboardShortcuts: true, - disableDoubleTapZoom: false, - disableDoubleClickZoom: false, - disableTwoFingerTapZoom: false, - - // kinetic - disableKineticPan: true, - - // tile transition - tileTransition: true, - - // controls - scaleControl: true, - logoControl: true, - mapDataControl: true, - zoomControl: true, - mapTypeControl: true, - } - - this.toggleInteraction = this.toggleInteraction.bind(this) - this.toggleKinetic = this.toggleKinetic.bind(this) - this.toggleTileTransition = this.toggleTileTransition.bind(this) - this.toggleControl = this.toggleControl.bind(this) - this.toggleMinMaxZoom = this.toggleMinMaxZoom.bind(this) - } - - toggleInteraction() { - if (this.state.draggable) { - this.setState({ - draggable: false, - pinchZoom: false, - scrollWheel: false, - keyboardShortcuts: false, - disableDoubleTapZoom: true, - disableDoubleClickZoom: true, - disableTwoFingerTapZoom: true, - }) - } else { - this.setState({ - draggable: true, - pinchZoom: true, - scrollWheel: true, - keyboardShortcuts: true, - disableDoubleTapZoom: false, - disableDoubleClickZoom: false, - disableTwoFingerTapZoom: false, - }) - } - } - - toggleKinetic() { - this.setState({ - disableKineticPan: !this.state.disableKineticPan, - }) - } - - toggleTileTransition() { - this.setState({ - tileTransition: !this.state.tileTransition, - }) - } - - toggleControl() { - if (this.state.scaleControl) { - this.setState({ - scaleControl: false, - logoControl: false, - mapDataControl: false, - zoomControl: false, - mapTypeControl: false - }) - } else { - this.setState({ - scaleControl: true, - logoControl: true, - mapDataControl: true, - zoomControl: true, - mapTypeControl: true - }) - } - } - - toggleMinMaxZoom() { - if (this.state.minZoom === 10) { - this.setState({ - minZoom: 1, - maxZoom: 14, - }) - } else { - this.setState({ - minZoom: 10, - maxZoom: 12, - }) - } - } - - render () { - const navermaps = window.naver.maps; - - return ( - - - 지도 인터렉션 - 관성 드래깅 - 타일 fadeIn 효과 - 모든 지도 컨트롤 - - {'최소/최대 줌 레벨' + (this.state.minZoom === 10 ? ': 10 ~ 12' : ': 1 ~ 14')} - - - - ) - } -} - -// render - - - -``` \ No newline at end of file diff --git a/docs/examples/3-map-types.md b/docs/examples/3-map-types.md deleted file mode 100644 index 9c984da..0000000 --- a/docs/examples/3-map-types.md +++ /dev/null @@ -1,77 +0,0 @@ - -https://navermaps.github.io/maps.js/docs/tutorial-3-map-types.example.html - -``` js - -import { RenderAfterNavermapsLoaded, NaverMap } from 'react-naver-maps' -import { withNavermaps } from 'react-naver-maps/hocs' - -class App extends React.Component { - constructor(props) { - super(props) - - const { navermaps }= this.props; - - this.state = { - mapTypeId: navermaps.MapTypeId['NORMAL'], - } - - this.changeMapType = this.changeMapType.bind(this) - } - - changeMapType(mapTypeId) { - const { navermaps } = this.props; - - return () => { - this.setState({ - mapTypeId: navermaps.MapTypeId[mapTypeId], - }) - } - } - - render () { - const { navermaps } = this.props; - - return ( - - - 일반지도 - 지형도 - 위성지도 - 겹쳐보기 - - - ) - } -} - -const EnhancedApp = withNavermaps(App); - - - - - -``` \ No newline at end of file diff --git a/docs/examples/4-map-bounds.md b/docs/examples/4-map-bounds.md deleted file mode 100644 index 4520686..0000000 --- a/docs/examples/4-map-bounds.md +++ /dev/null @@ -1,95 +0,0 @@ - -https://navermaps.github.io/maps.js/docs/tutorial-4-map-bounds.example.html - -아래 예시는 좌표경계가 변경될 때마다 딜레이 후 좌표경계만큼 사각형을 그리는 예시입니다. -**props.bounds**와 **onBoundsChanged**를 이용해 구현 할 수 있지만 NaverMap이 Mount될 때에는 **bounds_changed** event가 발생하지 않기 때문에 최초 사각형를 초기화 하기 위해서는 NaverMap이 생성되었을 때의 좌표경계를 알아낼 필요가 있습니다. 이 경우에 ref를 활용하여 **NaverMap**의 class method인 getBounds를 사용합니다. - -``` js - -import { RenderAfterNavermapsLoaded, NaverMap, Rectangle } from 'react-naver-maps' -import { withNavermaps } from 'react-naver-maps/hocs' - -const Rect = (props) => ( - -) - -class App extends React.Component { - constructor (props) { - super(props); - const { navermaps } = props; - - this.state = { - rect: null, - } - this.handleBoundsChanged = this.handleBoundsChanged.bind(this); - this.goToDokdo = this.goToDokdo.bind(this); - - this.dokdo = new navermaps.LatLngBounds( - new navermaps.LatLng(37.2380651, 131.8562652), - new navermaps.LatLng(37.2444436, 131.8786475) - ); - } - - changeBounds(bounds) { - this.setState({ bounds }) - - if (this.rectTimeout) clearTimeout(this.rectTimeout) - this.rectTimeout = setTimeout(() => { - this.setState({ rect: }) - }, 500) - } - - goToDokdo() { - this.setState({ bounds: this.dokdo }); - } - - handleBoundsChanged(bounds) { - this.changeBounds(bounds); - } - - render () { - const { navermaps } = this.props; - - return ( - { this.mapRef = ref }} - id='maps-examples-map-bounds' - style={{ - width: '100%', - height: '600px', - }} - - defaultCenter={new navermaps.LatLng(37.5666805, 126.9784147)} - defaultZoom={5} - bounds={this.state.bounds} - onBoundsChanged={this.handleBoundsChanged} - - > - - 독도로 이동하기 - - {this.state.rect} - - ) - } - - componentDidMount() { - // map이 생성될 때의 bounds를 알기 위해 method를 이용합니다. - this.changeBounds(this.mapRef.getBounds()) - } -} - -const EnhancedApp = withNavermaps(App); - - - - -``` \ No newline at end of file diff --git a/docs/examples/basic.mdx b/docs/examples/basic.mdx new file mode 100644 index 0000000..f16ed6b --- /dev/null +++ b/docs/examples/basic.mdx @@ -0,0 +1,3 @@ +--- +name: 기본 예제 +--- \ No newline at end of file diff --git a/docs/examples/example-intro.md b/docs/examples/example-intro.md deleted file mode 100644 index 62048d9..0000000 --- a/docs/examples/example-intro.md +++ /dev/null @@ -1,51 +0,0 @@ -``` jsx static -/** - * ControlBtn - * 예시에서는 생략되어있다. .control-btn에 해당한다. - */ -function ControlBtn({ - controlOn = false, - ...restProps -}) { - let style = { - margin: 0, - color: '#555', - padding: '2px 6px', - background: '#fff', - border: 'solid 1px #333', - cursor: 'pointer', - borderRadius: '5px', - outline: '0 none', - boxShadow: '2px 2px 1px 1px rgba(0, 0, 0, 0.5)', - fontSize: '14px', - margin: '0 5px 5px 0', - } - - if (controlOn) { - style = { - ...style, - background: '#2780E3', - color: '#FFF', - } - } - - return