Merge pull request #551 from wwayne/refactoring

Refactoring

Author: roggervalf

.gitignore

@@ -10,5 +10,5 @@
 
 # files
 node_modules/
-example/dist/
 dist/
+build/

.travis.yml

@@ -19,10 +19,21 @@ script:
   - git config --global user.email "[email protected]"
   - export GIT_PUBLISH_URL=https://${GH_TOKEN}@github.com/wwayne/react-tooltip.git
   - if [ "$TRAVIS_BRANCH" == "master" ] && [ "$TRAVIS_PULL_REQUEST" = "false" ]; then yarn gh-pages -- --repo ${GIT_PUBLISH_URL}; fi
+  - cd example
+  - yarn
+  - yarn build
 
+#deploy:
+#  provider: pages
+#  skip_cleanup: true
+#  token: $GH_TOKEN
+#  keep_history: true
+#  on:
+#    branch: refactoring
+  
 after_success:
   - yarn semantic-release
-
+  
 branches:
   except:
     - "/^v\\d+\\.\\d+\\.\\d+$/"

contributing.md

@@ -4,24 +4,31 @@ This doc needs help! Please submit your PR...
 
 ## Commit messages
 
-We are using semantic-release to automate the release process, and this depends on a specific format for commit messages. Please run `npm run commit` to use `commitizen` to properly format your commit messages so they can be automatically processed and included in release notes.
+We are using semantic-release to automate the release process, and this depends on a specific format for commit messages. Please run `yarn commit` to use `commitizen` to properly format your commit messages so they can be automatically processed and included in release notes.
 
 ## Pull request testing
 
 Some notes on testing and releasing.
 * For a PR, follow Github's command-line instructions for retrieving the branch with the changes.
-* `make dev` starts a development server, open `http://localhost:8888` to see the example website.
+* To start a development server:
+
+```sh
+yarn build
+cd example
+yarn
+yarn start
+```
+
 * Provide feedback on the PR about your results.
 
 ## Doing a release
 
 We are using semantic-release instead of this:
 
-* `make deploy` updates the files in the `standalone` directory
 * update the version number in `package.json`
-    - Fixes update the patch number, features update the minor number.
-    - Major version update is reserved for API breaking changes, not just additions. 
-* `npm run github-changes -- -n 3.X.Y` to update the changelog
+  - Fixes update the patch number, features update the minor number.
+  - Major version update is reserved for API breaking changes, not just additions.
+* `yarn github-changes -- -n 3.X.Y` to update the changelog
 * `git add`, `git commit` and `git push` to get the version to master.
 * `git tag -a 3.X.Y -m 3.X.Y` `git push --tags`
 * `npm publish`

example/package.json

@@ -15,7 +15,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
-    "predeploy": "npm run build",
+    "predeploy": "yarn build",
     "deploy": "gh-pages -d build"
   }
 }

example/src/App.js

@@ -126,7 +126,7 @@ export default class App extends Component {
                   className={effect === "float" ? "active" : ""}
                   onClick={this.changeEffect.bind(this, "float")}
                 >
-                  Float<span className="mark">(default)</span>
+                  Float<span className="mark">{'(default)'}</span>
                 </a>
                 <a
                   className={effect === "solid" ? "active" : ""}
@@ -172,7 +172,7 @@ export default class App extends Component {
                 style={{ transform: "translate3d(5px, 5px, 5px)" }}
               >
                 <a data-tip data-for="happyFace">
-                  d(`･∀･)b
+                {'d(`･∀･)b'}
                 </a>
                 <ReactTooltip id="happyFace" type="error">
                   <span>Show happy face</span>
@@ -209,15 +209,15 @@ export default class App extends Component {
             <div className="example-jsx">
               <div className="side">
                 <a data-tip data-for="global">
-                  σ`∀´)σ
+                {'σ`∀´)σ'}
                 </a>
               </div>
               <div className="side">
                 <a data-tip data-for="global">
-                  (〃∀〃)
+                {'(〃∀〃)'}
                 </a>
               </div>
-              <ReactTooltip id="global" aria-haspopup="true" role="example">
+              <ReactTooltip id="global" aria-haspopup="true">
                 <p>This is a global react component tooltip</p>
                 <p>You can put every thing here</p>
                 <ul>
@@ -232,7 +232,7 @@ export default class App extends Component {
                 <p>
                   {"<a data-tip data-for='global'> σ`∀´)σ </a>\n" +
                     "<a data-tip data-for='global'> (〃∀〃) </a>\n" +
-                    "<ReactTooltip id='global' aria-haspopup='true' role='example'>\n" +
+                    "<ReactTooltip id='global' aria-haspopup='true' >\n" +
                     " <p>This is a global react component tooltip</p>\n" +
                     " <p>You can put every thing here</p>\n" +
                     " <ul>\n" +
@@ -263,7 +263,7 @@ export default class App extends Component {
                   data-tip="custom show"
                   data-event="click focus"
                 >
-                  ( •̀д•́)
+                  {'( •̀д•́)'}
                 </a>
                 <ReactTooltip id="custom-event" globalEventOff="click" />
               </div>
@@ -275,7 +275,7 @@ export default class App extends Component {
                   data-event="click"
                   data-event-off="dblclick"
                 >
-                  ( •̀д•́)
+                  {'( •̀д•́)'}
                 </a>
                 <ReactTooltip id="custom-off-event" />
               </div>
@@ -305,7 +305,7 @@ export default class App extends Component {
                   data-for="custom-class"
                   data-tip="hover on me will keep the tooltip"
                 >
-                  (･ω´･ )
+                  {'(･ω´･ )'}
                 </a>
                 <ReactTooltip
                   id="custom-class"
@@ -316,7 +316,7 @@ export default class App extends Component {
               </div>
               <div className="side">
                 <a data-for="custom-theme" data-tip="custom theme">
-                  (･ω´･ )
+                {'(･ω´･ )'}
                 </a>
                 <ReactTooltip id="custom-theme" className="customeTheme" />
               </div>
@@ -362,7 +362,7 @@ export default class App extends Component {
             <div className="example-jsx">
               <div className="side">
                 <a data-for="getContent" data-tip>
-                  =( •̀д•́)
+                {'=( •̀д•́)'}
                 </a>
                 <ReactTooltip
                   id="getContent"
@@ -371,7 +371,7 @@ export default class App extends Component {
               </div>
               <div className="side">
                 <a data-for="overTime" data-tip>
-                  =( •̀д•́)
+                {'=( •̀д•́)'}
                 </a>
                 <ReactTooltip
                   id="overTime"
@@ -411,12 +411,12 @@ export default class App extends Component {
             <div className="example-jsx">
               <div className="side">
                 <a data-for="enrich" data-tip="sooooo cute">
-                  (❂‿❂)
+                {'(❂‿❂)'}
                 </a>
               </div>
               <div className="side">
                 <a data-for="enrich" data-tip="really high">
-                  (❂‿❂)
+                {'(❂‿❂)'}
                 </a>
               </div>
               <ReactTooltip
@@ -430,7 +430,7 @@ export default class App extends Component {
                 <p>
                   {"<a data-for='enrich' data-tip='sooooo cute'>(❂‿❂)</a>\n" +
                     "<a data-for='enrich' data-tip='really high'>(❂‿❂)</a>\n" +
-                    "<ReactTooltip id='enrich' getContent={(dataTip) => `This little buddy is ${dataTip}`}/>"}
+                    `<ReactTooltip id='enrich' getContent={(dataTip) => \`This little buddy is \${dataTip}\`}/>`}
                 </p>
               </div>
             </pre>
@@ -588,42 +588,42 @@ export default class App extends Component {
             <div className="example-jsx">
               <div className="block">
                 <a data-for="soclose" data-tip="1">
-                  1 (❂‿❂)
+                {'1 (❂‿❂)'}
                 </a>
               </div>
               <div className="block">
                 <a data-for="soclose" data-tip="2">
-                  2 (❂‿❂)
+                {'2 (❂‿❂)'}
                 </a>
               </div>
               <div className="block">
                 <a data-for="soclose" data-tip="3">
-                  3 (❂‿❂)
+                {'3 (❂‿❂)'}
                 </a>
               </div>
               <div className="block">
                 <a data-for="soclose" data-tip="4">
-                  4 (❂‿❂)
+                {'4 (❂‿❂)'}
                 </a>
               </div>
               <div className="block">
                 <a data-for="soclose" data-tip="5">
-                  5 (❂‿❂)
+                {'5 (❂‿❂)'}
                 </a>
               </div>
               <div className="block">
                 <a data-for="soclose" data-tip="6">
-                  6 (❂‿❂)
+                {'6 (❂‿❂)'}
                 </a>
               </div>
               <div className="block">
                 <a data-for="soclose" data-tip="7">
-                  7 (❂‿❂)
+                {'7 (❂‿❂)'}
                 </a>
               </div>
               <div className="block">
                 <a data-for="soclose" data-tip="8">
-                  8 (❂‿❂)
+                {'8 (❂‿❂)'}
                 </a>
               </div>
 
@@ -666,14 +666,13 @@ export default class App extends Component {
             </pre>
 
             <p>
-              When <em>clickable</em> property is set to <em>true</em>", tooltip
-              can respond to mouse (or touch) events."
+              When <em>clickable</em> property is set to <em>true</em>{', tooltip can respond to mouse (or touch) events.'}
             </p>
             <p className="sub-title" />
             <div className="example-jsx">
               <div className="block">
                 <a data-tip data-for="clickme" data-event="click">
-                  (❂‿❂)
+                {'(❂‿❂)'}
                 </a>
               </div>
 
@@ -715,7 +714,7 @@ export default class App extends Component {
             <div className="example-jsx">
               <div className="side" style={{ display: "flex", width: "100%" }}>
                 <a data-tip data-for="overridePosition">
-                  ( •̀д•́) override
+                {'( •̀д•́) override'}
                 </a>
                 <ReactTooltip
                   id="overridePosition"
@@ -739,18 +738,18 @@ export default class App extends Component {
                   <div>header</div>
                   <img
                     src="http://lorempixel.com/100/1500"
-                    alt="lorem image 100x1500"
+                    alt="lorem 100x1500"
                   />
                   <div>footer</div>
                 </ReactTooltip>
                 <a data-tip data-for="noOverridePosition">
-                  ( •̀д•́) noOverride
+                {'( •̀д•́) noOverride'}
                 </a>
                 <ReactTooltip id="noOverridePosition">
                   <div>header</div>
                   <img
                     src="http://lorempixel.com/100/1500"
-                    alt="lorem image 100x1500"
+                    alt="lorem 100x1500"
                   />
                   <div>footer</div>
                 </ReactTooltip>

package.json

@@ -58,8 +58,8 @@
     "react-dom": "global:ReactDOM"
   },
   "peerDependencies": {
-    "react": ">=^16.0.0",
-    "react-dom": ">=^16.0.0"
+    "react": ">=16.0.0",
+    "react-dom": ">=16.0.0"
   },
   "dependencies": {
     "prop-types": "^15.6.0"