[SDPSUP-669] Added example for using Ripple in Vue.js(Not Nuxt) (#535)

* [SDPSUP-669] Added example for using Vue.js(Not Nuxt)

.circleci/config.yml

@@ -7,7 +7,6 @@ jobs:
       - image: cypress/base:10
         environment:
           TERM: xterm
-          SEARCH_BE: LOCAL-CI
           CIRCLE_TEST_REPORTS: test-results
     working_directory: ~/app
     steps:
@@ -30,6 +29,7 @@ jobs:
             - packages/ripple-test-tools/node_modules
             - examples/vic-gov-au/node_modules
             - examples/basic-examples/node_modules
+            - examples/vue-example-app/node_modules
             - ~/.cache
       - run:
           name: build vic-gov-au nuxt app
@@ -43,7 +43,6 @@ jobs:
       - image: cypress/base:10
         environment:
           TERM: xterm
-          SEARCH_BE: LOCAL-CI
           CIRCLE_TEST_REPORTS: test-results
     working_directory: ~/app
     steps:
@@ -88,9 +87,8 @@ jobs:
       - image: cypress/base:10
         environment:
           TERM: xterm
-          SEARCH_BE: LOCAL-CI
     working_directory: ~/app
-    steps:    
+    steps:
       - attach_workspace:
           at: ~/app
       - restore_cache:
@@ -119,7 +117,6 @@ jobs:
       - image: cypress/base:10
         environment:
           TERM: xterm
-          SEARCH_BE: LOCAL-CI
     working_directory: ~/app
     steps:    
       - attach_workspace:
@@ -147,13 +144,41 @@ jobs:
       - store_artifacts:
           path: examples/vic-gov-au/test/e2e/screenshots
 
+  e2e-vue-example-app:
+    docker:
+      - image: cypress/base:10
+        environment:
+          TERM: xterm
+    working_directory: ~/app
+    steps:    
+      - attach_workspace:
+          at: ~/app
+      - restore_cache:
+          keys:
+            - v2-deps-{{ checksum "yarn.lock" }}
+            - v2-deps-{{ .Branch }}
+            - v2-deps
+      - run: 
+          name: run smoke test
+          command: cd examples/vue-example-app && yarn test:smoke
+      - run:
+          name: convert cucumber test output
+          command: node ./scripts/cucumberconvertor.js
+      - store_test_results:
+          path: test-results
+      - store_artifacts:
+          path: test-results
+      - store_artifacts:
+          path: examples/vue-example-app/test/e2e/videos
+      - store_artifacts:
+          path: examples/vue-example-app/test/e2e/screenshots
+
   prerelease:
     # NOT ENABLED YET - needs further testing
     docker:
       - image: cypress/base:10
         environment:
           TERM: xterm
-          SEARCH_BE: LOCAL-CI
     working_directory: ~/app
     steps:    
       - attach_workspace:
@@ -193,6 +218,13 @@ workflows:
             branches:
               only:
                 - release/*
+      - e2e-vue-example-app:
+          requires:
+            - build
+          filters:
+            branches:
+              only:
+                - release/*
       #  Release prerelease DEV tag to NPM on successful tests passing
       # - prerelease:
       #     requires:
@@ -225,3 +257,6 @@ workflows:
       - e2e-example:
           requires:
             - build
+      - e2e-vue-example-app:
+          requires:
+            - build

README.md

@@ -110,22 +110,11 @@ Add `@dpc-sdp/ripple-nuxt-ui` to modules key in `nuxt.config.js` eg:
 
 You can optionally pass options to `@dpc-sdp/ripple-nuxt-ui` by adding the `ripple` key to `nuxt-config.js` - See [@dpc-sdp/ripple-nuxt-ui](https://www.npmjs.com/package/@dpc-sdp/ripple-nuxt-ui) for details.
 
+### In a Vue.js project(Not Nuxt.js)
 
-### In a Vue project
-
-Ripple components are published individually as npm modules and can be imported in any Vue project. 
-
-*Installation*
-You need to ensure that `@dpc-sdp/ripple-global` is imported and has been configured globally in addition to the individual components you wish to use.
-
-`npm install @dpc-sdp/ripple-global @dpc-sdp/ripple-component-to-install` OR `yarn add @dpc-sdp/ripple-global @dpc-sdp/ripple-component-to-install`
-
-```
-import Vue from 'vue'
-import RplGlobal from '@dpc-sdp/ripple-global'
-Vue.use(RplGlobal, { hostname: 'www.yourdomain.com' }}
-```
+Ripple components are published individually as npm modules and can be imported in any Vue project.
 
+Check out our [Vue app example](https://github.com/dpc-sdp/ripple/tree/develop/examples/basic-examples).
 
 ## Contributing
 

examples/vue-example-app/.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/vue-example-app/README.md

@@ -0,0 +1,51 @@
+# Example for using ripple in Vue.js(Not Nuxt.js)
+
+This is a example for using Ripple in a Vue.js app. For using it in Nuxt.js, please check [ripple-nuxt-ui](https://github.com/dpc-sdp/ripple/blob/develop/packages/ripple-nuxt-ui/README.md)
+
+## Intro
+
+This example is created by Vue cli as a clean project.
+
+Two Ripple components installed just for demo how to install them.
+
+### Dependencies
+
+Install below dev dependencies in your Vue project to make icon work.
+
+```
+npm install sass-resources-loader svgo svgo-loader svg-sprite-loader --save-dev
+```
+
+### Webpack configs
+
+Some config required for making things like icon working.
+
+Check [/vue.config.js](/vue.config.js) for more details.
+
+### Using Ripple components
+
+Chceck [/src/App.vue](/src/App.vue) and [/src/components/HelloRipple.vue](/src/components/HelloRipple.vue) for more details.
+
+### Install Ripple plugin
+
+Optionally install [Ripple plugin]((https://github.com/dpc-sdp/ripple/tree/develop/packages/components/Atoms/Global#rploptions)) if you need to use some options.
+
+We added it in this [/src/main.js](/src/main.js).
+
+## Project setup
+```
+yarn install
+```
+or
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+or
+```
+npm run serve
+```

examples/vue-example-app/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

examples/vue-example-app/cypress.json

@@ -0,0 +1,10 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "fixturesFolder": "test/e2e/fixtures",
+  "integrationFolder": "test/e2e/integration",
+  "pluginsFile": "test/e2e/plugins/index.js",
+  "screenshotsFolder": "test/e2e/screenshots",
+  "supportFile": "test/e2e/support/index.js",
+  "videosFolder": "test/e2e/videos",
+  "ignoreTestFiles": "*.js"
+}