Merge pull request #1 from jepser/semantic-release

Semantic release
jepser · Jun 9, 2018 · b9faa43 · b9faa43
2 parents 46f0f13 + de2e363
commit b9faa43
Show file tree

Hide file tree

Showing 9 changed files with 4,003 additions and 120 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
 node_modules
+dist
+.cache
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,18 @@
+language: node_js
+node_js:
+- '8'
+
+cache:
+  directories:
+    - "node_modules"
+
+script:
+- yarn test
+- yarn build
+
+after_success:
+  - yarn semantic-release
+
+
+notifications:
+  email: false
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] }
diff --git a/demo/demo.js b/demo/demo.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Cui from '../src/ReactCui'
+
+const App = ({}) => {
+  return <div>
+    <p>Let's add avatar and theme</p>
+    <Cui uid="Sb1WbK" theme="red" avatar="http://i.imgur.com/6jr3M0j.png" height="400" />
+  </div>
+}
+
+
+ReactDOM.render(<App />, document.getElementById('app'))
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Demo CUI</title>
+  <style>
+    html {
+      box-sizing: border-box;
+      font-family: sans-serif;
+      font-size: 16px;
+    }
+
+    *,
+    *:before,
+    *:after {
+      box-sizing: inherit;
+    }
+
+    body {
+      margin: 0;
+      font-family: sans-serif;
+      font-size: 18px;
+      line-height: 24px;
+      color: #333;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    h1,
+    h4 {
+      font-weight: normal;
+      font-family: sans-serif;
+      font-weight: 600;
+      line-height: 1.2;
+    }
+
+    p,
+    h1,
+    h4 {
+      margin: 0 0 20px;
+      padding: 0;
+    }
+
+    ol,
+    ul {
+      list-style: none;
+    }
+
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+  </style>
+</head>
+
+<body>
+
+  <main style='margin: 128px auto; max-width: 640px;'>
+    <div id="app"></div>
+    <script src="./demo.js"></script>
+  </main>
+
+
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -6,25 +6,43 @@
   "repository": "https://github.com/jepser/react-cui.git",
   "author": "Jepser Bernardino <jepsersk8@gmail.com>",
   "license": "MIT",
-  "peerDependencies": {
-    "react": "^16.4.0"
-  },
+  "peerDependencies": {},
   "devDependencies": {
+    "@commitlint/cli": "^7.0.0",
+    "@commitlint/config-conventional": "^7.0.1",
     "babel-core": "^6.26.3",
     "babel-jest": "^23.0.1",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
+    "husky": "^0.14.3",
     "jest": "^23.1.0",
-    "regenerator-runtime": "^0.11.1"
+    "lint-staged": "^7.1.3",
+    "parcel-bundler": "^1.8.1",
+    "prettier-standard": "^8.0.1",
+    "prop-types": "^15.6.1",
+    "react": "^16.4.0",
+    "react-dom": "^16.4.0",
+    "regenerator-runtime": "^0.11.1",
+    "semantic-release": "^15.5.1"
   },
   "scripts": {
-    "test": "jest"
+    "test": "jest",
+    "precommit": "lint-staged",
+    "commitmsg": "commitlint -E GIT_PARAMS",
+    "format": "prettier-standard 'src/**/*.js'",
+    "build": "parcel build src/index.js",
+    "demo": "parcel demo/index.html",
+    "semantic-release": "semantic-release"
   },
-  "dependencies": {
-    "prop-types": "^15.6.1",
-    "react": "^16.4.0",
-    "react-dom": "^16.4.0"
-  }
+  "lint-staged": {
+    "linters": {
+      "src/**/*.js": [
+        "prettier-standard",
+        "git add"
+      ]
+    }
+  },
+  "dependencies": {}
 }
diff --git a/src/ReactCui.js b/src/ReactCui.js
@@ -1,26 +1,30 @@
 import React, { Component, Fragment } from 'react'
 import PropTypes from 'prop-types'
 
-export const EMBED_URL = 'https://typeform-labs.s3.amazonaws.com/cui/cui-embed.js'
+export const EMBED_URL =
+  'https://typeform-labs.s3.amazonaws.com/cui/cui-embed.js'
 
 class Cui extends Component {
-  componentDidMount() {
-    if (document && !scriptTagExists({document})) {
+  componentDidMount () {
+    if (!scriptTagExists({ document })) {
       const embedJs = document.createElement('script')
       embedJs.type = 'text/javascript'
+      embedJs.id = 'cui-embed-script'
       embedJs.src = EMBED_URL
       embedJs.async = true
       document.getElementsByTagName('head')[0].appendChild(embedJs)
     }
   }
 
-  render() {
-    const {
-      uid,
-      height,
-      avatar,
-      theme
-    } = this.props
+  componentWillUnmount () {
+    if (scriptTagExists({ document })) {
+      const scripts = getScriptTags({ document })
+      scripts.forEach(script => script.remove())
+    }
+  }
+
+  render () {
+    const { uid, height, avatar, theme } = this.props
     return (
       <Fragment>
         {uid ? (
@@ -47,10 +51,16 @@ Cui.propTypes = {
 
 export default Cui
 
-const scriptTagExists = ({document}) => {
+const getScriptTags = ({ document }) => {
   const scriptTags = document.getElementsByTagName('head')[0].childNodes
-  const cuiEmbedScriptTags = [].filter.call(scriptTags, (script) => {
+  const cuiEmbedScriptTags = [].filter.call(scriptTags, script => {
     return script.src === EMBED_URL
   })
-  return !!cuiEmbedScriptTags.length
+  return cuiEmbedScriptTags
+}
+
+const scriptTagExists = ({ document }) => {
+  const scriptTags = getScriptTags({ document })
+
+  return !!scriptTags.length
 }
diff --git a/src/ReactCui.test.js b/src/ReactCui.test.js
@@ -1,11 +1,22 @@
 import React from 'react'
-import { shallow, mount, configure }  from 'enzyme'
+import { shallow, mount, configure } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 import Cui, { EMBED_URL } from './ReactCui'
 
 configure({ adapter: new Adapter() })
-describe('<Cui />', () => {
 
+const getEmbedScriptTag = ({ document }) => {
+  let embedScriptTags = []
+  const scriptTags = document.getElementsByTagName('head')[0].childNodes
+
+  scriptTags.forEach(script => {
+    if (script.src === EMBED_URL) embedScriptTags.push(scriptTags)
+  })
+
+  return embedScriptTags
+}
+
+describe('<Cui />', () => {
   test('Component have required UID parameter passed to render', () => {
     const uid = 'abc123'
     const Component = mount(<Cui uid={uid} />)
@@ -17,7 +28,9 @@ describe('<Cui />', () => {
     const height = 500
     const avatar = 'https://avatar.com/profile.jpg'
     const theme = '#333'
-    const Component = mount(<Cui uid={uid} height={height} avatar={avatar} theme={theme} />)
+    const Component = mount(
+      <Cui uid={uid} height={height} avatar={avatar} theme={theme} />
+    )
     const ComponentDOM = Component.render()
 
     expect(ComponentDOM.attr('data-cui-height')).toBe(height.toString())
@@ -33,16 +46,19 @@ describe('<Cui />', () => {
   })
 
   test('Component should inject ONLY ONE script tag with the embed url', () => {
-
     const Component = mount(<Cui uid={'123'} />)
-    const scriptTags = document.getElementsByTagName('head')[0].childNodes
-    let embedScriptTags = 0
-    scriptTags.forEach(script => {
-      if (script.src === EMBED_URL) embedScriptTags++
-    })
 
-    expect(embedScriptTags).toBe(1)
+    const scriptTags = getEmbedScriptTag({ document })
 
+    expect(scriptTags.length).toBe(1)
   })
 
+  test('Unmount the component will remove the script tag created', () => {
+    const Component = mount(<Cui uid={'123'} />)
+    Component.unmount()
+
+    const scriptTags = getEmbedScriptTag({ document })
+
+    expect(scriptTags.length).toBe(0)
+  })
 })
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		module.exports = { extends: ['@commitlint/config-conventional'] }