✨ KClipboardProvider 📋 (#58)

* ✨ (KClipboardProvider) add copy to clipboard provider component

* 📦 (vue-test-utils) bump version to fix scopedSlots trim bug
  - From vuejs/vue-test-utils#706

* 📦 (dep) bump dependencies
  - storybook wasn't working, new storybook works now
  - have parity with Vue version of kong-admin

* 📚 (KClipboardProvider) correct version and add jsdoc
* 📚 (storybook) use action instead of window.alert

package.json

@@ -8,7 +8,7 @@
   "repository": "[email protected]:Kong/kongponents.git",
   "private": true,
   "bin": {
-    "kpm": "./cli/index.js" 
+    "kpm": "./cli/index.js"
   },
   "workspaces": [
     "packages/*"
@@ -26,14 +26,14 @@
     "cli": "./cli/kongponent-cli"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "3.4.10",
-    "@storybook/addon-knobs": "3.4.10",
-    "@storybook/addon-links": "3.4.10",
-    "@storybook/addon-notes": "3.4.10",
-    "@storybook/vue": "3.4.10",
-    "@vue/test-utils": "1.0.0-beta.20",
+    "@storybook/addon-actions": "4.1.11",
+    "@storybook/addon-knobs": "4.1.11",
+    "@storybook/addon-links": "4.1.11",
+    "@storybook/addon-notes": "4.1.11",
+    "@storybook/vue": "4.1.11",
+    "@vue/test-utils": "1.0.0-beta.28",
     "babel-core": "6.26.3",
-    "babel-jest": "^23.6.0",
+    "babel-jest": "^24.0.0",
     "babel-loader": "7.1.4",
     "babel-preset-env": "1.7.0",
     "babel-preset-react": "6.24.1",
@@ -56,15 +56,15 @@
     "jest-serializer-vue": "2.0.2",
     "lerna": "2.10.2",
     "raw-loader": "0.5.1",
-    "storybook-addon-vue-info": "0.6.1",
-    "vue-jest": "2.6.0",
-    "vue-loader": "14.2.1",
+    "storybook-addon-vue-info": "0.7.1",
+    "vue-jest": "3.0.2",
+    "vue-loader": "15.6.2",
     "vue-styleguidist": "1.7.5",
-    "vue-template-compiler": "2.5.17",
+    "vue-template-compiler": "2.5.22",
     "vuex": "3.0.1"
   },
   "dependencies": {
-    "vue": "2.5.17"
+    "vue": "2.5.22"
   },
   "jest": {
     "moduleFileExtensions": [

packages/KClipboardProvider/KClipboardProvider.js

@@ -0,0 +1,53 @@
+export default {
+  name: 'KClipboardProvider',
+  methods: {
+    /**
+     * Copy any text string to the clipboard
+     * @param {string} text - pass in the text to copy to the clipboard
+     * @returns {boolean} success/failure
+     */
+    copyTextToClipboard (text) {
+      let isSuccess = true
+
+      // Solution from:
+      // https://stackoverflow.com/a/30810322
+      const textArea = document.createElement('textarea')
+
+      // Styles for ensuring browser support
+      textArea.style.position = 'fixed'
+      textArea.style.top = 0
+      textArea.style.left = 0
+      textArea.style.width = '2em'
+      textArea.style.height = '2em'
+      textArea.style.padding = 0
+      textArea.style.border = 'none'
+      textArea.style.outline = 'none'
+      textArea.style.boxShadow = 'none'
+      textArea.style.background = 'transparent'
+
+      textArea.value = text
+
+      document.body.appendChild(textArea)
+      textArea.focus()
+      textArea.select()
+
+      try {
+        document.execCommand('copy')
+      } catch (e) {
+        isSuccess = false
+      } finally {
+        document.body.removeChild(textArea)
+      }
+
+      return isSuccess
+    }
+  },
+  /**
+   * @returns {VNode}
+   */
+  render () {
+    return this.$scopedSlots.default({
+      copyToClipboard: this.copyTextToClipboard
+    })
+  }
+}

packages/KClipboardProvider/KClipboardProvider.spec.js

@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils'
+import KClipboardProvider from '@/KClipboardProvider/KClipboardProvider'
+
+describe('KClipboardProvider', () => {
+  it('copies to clipboard', () => {
+    const wrapper = mount(KClipboardProvider, {
+      attachToDocument: true,
+      scopedSlots: {
+        default: function (props) {
+          return this.$createElement('button', {
+            props: props,
+            on: {
+              click: function () {
+                props.copyToClipboard('hello')
+              }
+            }
+          }, 'click me')
+        }
+      }
+    })
+
+    const mockExec = jest.fn()
+
+    Object.defineProperty(document, 'execCommand', {
+      value: (cmd) => {
+        mockExec(cmd)
+      }
+    })
+
+    const button = wrapper.find('button')
+
+    button.trigger('click')
+
+    expect(mockExec).toBeCalledTimes(1)
+    expect(mockExec).toBeCalledWith('copy')
+  })
+})

packages/KClipboardProvider/KClipboardProvider.stories.js

@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import { storiesOf } from '@storybook/vue'
+import { action } from '@storybook/addon-actions'
+import VueInfoAddon from 'storybook-addon-vue-info'
+
+import KClipboardProvider from './KClipboardProvider'
+
+storiesOf('KClipboardProvider', module)
+  .addDecorator(VueInfoAddon)
+  .add('Copy to Clipboard', () => ({
+    components: { KClipboardProvider },
+    template: `
+    <div>
+      <input v-model="dataToCopy" type="text" />
+      <KClipboardProvider>
+        <KButton
+          slot-scope="{ copyToClipboard }"
+          @click="() => { if(copyToClipboard(dataToCopy)){ alert(dataToCopy) } }">
+          copy to clipboard
+        </KButton>
+      </KClipboardProvider>
+    </div>`,
+    data: function () {
+      return {
+        dataToCopy: 'copy this to clipboard'
+      }
+    },
+    methods: {
+      alert () {
+        action('copy-to-clipboard')(`This has been copied to clipboard: "${this.dataToCopy}"`)
+      }
+    }
+  }))

packages/KClipboardProvider/README.md

@@ -0,0 +1,13 @@
+```js
+const attributes = {
+  textToCopy: 'Provide clipboard copy capabilities to any component',
+}
+
+<KClipboardProvider>
+  <button
+    slot-scope="{ copyToClipboard }"
+    v-on:click="() => copyToClipboard(attributes.textToCopy)">
+    copy to clipboard
+  </button>
+</KClipboardProvider>
+```

packages/KClipboardProvider/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@kongponents/kclipboardprovider",
+  "version": "0.0.1-beta.1",
+  "description": "Provide clipboard copy capabilities to any component",
+  "main": "KClipboardProvider.js",
+  "scripts": {
+    "test": "jest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Kong/kongponents.git"
+  },
+  "author": "Kong Inc",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Kong/kongponents/issues"
+  },
+  "homepage": "https://github.com/Kong/kongponents#readme"
+}