feat(cli): add ui:create:vue command (#11)

https://coveord.atlassian.net/browse/CDX-45
coveo · Feb 1, 2021 · d48bc85 · d48bc85
1 parent fe95752
commit d48bc85
Show file tree

Hide file tree

Showing 18 changed files with 431 additions and 118 deletions.
diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -12,7 +12,7 @@
     "@openid/appauth": "^1.3.0",
     "axios": "^0.21.1",
     "exponential-backoff": "^3.1.0",
-    "vue-cli-plugin-coveo": "^0.0.0"
+    "vue-cli-plugin-coveo": "^0.0.0",
     "fs-extra": "^9.1.0",
     "keytar": "^7.3.0",
     "tslib": "^1"

diff --git a/packages/cli/src/commands/ui/create/vue.spec.ts b/packages/cli/src/commands/ui/create/vue.spec.ts
@@ -0,0 +1,15 @@
+import {expect, test} from '@oclif/test';
+
+describe('ui:create:vue', () => {
+  test
+    .command(['ui:create:vue'])
+    .catch((ctx) => {
+      expect(ctx.message).to.contain('Missing 1 required arg:');
+    })
+    .it('requires application name argument');
+
+  test
+    .command(['ui:create:vue', 'myapp', '--preset', 'invalidPreset'])
+    .catch('Unable to load preset')
+    .it('requires a valid preset flag');
+});
diff --git a/packages/cli/src/commands/ui/create/vue.ts b/packages/cli/src/commands/ui/create/vue.ts
@@ -5,8 +5,6 @@ import {spawnProcess} from '../../../lib/utils/process';
 export default class Vue extends Command {
   static description = 'Create a new project powered by vue-cli-service';
 
-  static hidden = true;
-
   static flags = {
     help: flags.help({char: 'h'}),
     preset: flags.string({
@@ -33,7 +31,13 @@ export default class Vue extends Command {
   async run() {
     const {args, flags} = this.parse(Vue);
 
-    await this.createProject(args.name, require(flags.preset));
+    let preset = '';
+    try {
+      preset = require(flags.preset);
+    } catch (error) {
+      this.error('Unable to load preset');
+    }
+    await this.createProject(args.name, preset);
     await this.installPlugin(args.name);
     await this.invokePlugin(args.name);
     this.startServer(args.name);

diff --git a/packages/cli/src/lib/utils/process.spec.ts b/packages/cli/src/lib/utils/process.spec.ts
@@ -0,0 +1,34 @@
+import {EventEmitter} from 'events';
+import {ChildProcess} from 'child_process';
+import {spawnProcess} from './process';
+
+jest.mock('child_process', () => ({
+  spawn: jest
+    .fn()
+    .mockImplementationOnce(() => {
+      const emitter = new EventEmitter();
+      process.nextTick(() => emitter.emit('close', 0));
+      return emitter as ChildProcess;
+    })
+    .mockImplementationOnce(() => {
+      const emitter = new EventEmitter();
+      process.nextTick(() => emitter.emit('close', 1));
+      return emitter as ChildProcess;
+    }),
+}));
+
+describe('spawnProcess', () => {
+  it('should resolves with a success exit code', () => {
+    const command = 'some valid command';
+    const args = ['-valid', 'option'];
+
+    return expect(spawnProcess(command, args)).resolves.toEqual(0);
+  });
+
+  it('should reject', () => {
+    const command = 'invalid commande';
+    const args = ['-foo', 'bar'];
+
+    return expect(spawnProcess(command, args)).rejects.toEqual(1);
+  });
+});
diff --git a/packages/vue-cli-plugin-coveo/generator/index.js b/packages/vue-cli-plugin-coveo/generator/index.js
@@ -4,7 +4,10 @@ module.exports = (api, options, rootOptions) => {
     dependencies: {
       '@coveo/headless': '^0.1.0',
       buefy: '^0.9.4',
-      'material-design-icons': '^3.0.1',
+    },
+    devDependencies: {
+      'node-sass': '^5.0.0',
+      'sass-loader': '^10.1.1',
     },
   });
 

diff --git a/packages/vue-cli-plugin-coveo/generator/template/src/App.vue b/packages/vue-cli-plugin-coveo/generator/template/src/App.vue
@@ -1,73 +1,32 @@
 <template>
-  <div id="app" class="has-text-left container">
-    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.3.45/css/materialdesignicons.min.css" />
-    <section class="box my-3">
-      <div class="columns">
-        <div class="column is-four-fifths">
-          <SearchBox />
-        </div>
-        <div class="column">
-          <Facets />
-        </div>
-      </div>
-      <Summary />
-    </section>
-
-    <section class="box my-3">
-      <div class="columns">
-        <div class="column">
-          <ResultList />
-        </div>
-      </div>
-    </section>
-    <section class="box my-3">
-      <div class="columns">
-        <div class="column">
-          <Pager />
-        </div>
-      </div>
-    </section>
+  <div id="app">
+    <div class="hero is-primary is-medium">
+    <Hero msg="Welcome to Your Coveo Vue.js Search Page" />
+    </div>
+    <SearchPage />
   </div>
 </template>
 
-<script>
-import Vue from 'vue';
-import Buefy from 'buefy';
-import 'buefy/dist/buefy.css';
-import 'material-design-icons';
-import ResultList from './components/ResultList.vue';
-import SearchBox from './components/SearchBox.vue';
-import Facets from './components/Facets.vue';
-import Summary from './components/Summary.vue';
-import Pager from './components/Pager.vue';
-import engine from './Engine';
-import { AnalyticsActions, SearchActions } from '@coveo/headless';
-Vue.use(Buefy);
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import Hero from './components/Hero.vue';
+import SearchPage from './components/SearchPage.vue';
 
-export default {
-  name: 'App',
+@Component({
   components: {
-    ResultList,
-    SearchBox,
-    Facets,
-    Summary,
-    Pager,
-  },
-  mounted: function() {
-    this.$nextTick(function() {
-      engine.dispatch(SearchActions.executeSearch(AnalyticsActions.logInterfaceLoad()));
-    });
+    Hero,
+    SearchPage,
   },
-};
+})
+export default class App extends Vue {}
 </script>
 
-<style>
+<style lang="scss">
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: $family-primary;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  color: $primary !important;
 }
 </style>
diff --git a/packages/vue-cli-plugin-coveo/generator/template/src/assets/logo.png b/packages/vue-cli-plugin-coveo/generator/template/src/assets/logo.png
diff --git a/packages/vue-cli-plugin-coveo/generator/template/src/components/Facet.vue b/packages/vue-cli-plugin-coveo/generator/template/src/components/Facet.vue
@@ -1,46 +1,50 @@
 <template>
-  <div class="card">
-    <div class="card-header">
-      <p class="card-header-title">{{ this.title }}</p>
-    </div>
-    <div class="card-content">
+  <div class="mb-5">
+    <p class="is-size-5 mb-4">{{ this.title }}</p>
+    <div class="content">
       <ul v-on:toggle="onToggle">
         <FacetValue
           @toggle="onToggle"
           v-for="v in state.values"
           v-bind:key="v.value"
-          v-bind:facetValue="v" />
+          v-bind:facetValue="v"
+        />
       </ul>
     </div>
-    <div class="card-footer"></div>
   </div>
 </template>
 <script>
-import { buildFacet } from '@coveo/headless';
+import {buildFacet} from '@coveo/headless';
 import FacetValue from './FacetValue';
 import engine from '../Engine';
 
 export default {
   name: 'Facet',
   props: ['field', 'title'],
-  components: { FacetValue },
-  data: function() {
+  components: {FacetValue},
+  data: function () {
     return {
       state: {},
     };
   },
   methods: {
-    onToggle: function(facetValue) {
+    onToggle: function (facetValue) {
       this.facet.toggleSelect(facetValue);
     },
   },
-  created: function() {
+  created: function () {
     this.facet = buildFacet(engine, {
-      options: { field: this.field, title: this.title },
+      options: {field: this.field, title: this.title},
     });
     this.facet.subscribe(() => {
-      this.state = { ...this.facet.state };
+      this.state = {...this.facet.state};
     });
   },
 };
 </script>
+<style scoped>
+.content ul {
+  list-style-type: none;
+  margin: 0;
+}
+</style>
diff --git a/packages/vue-cli-plugin-coveo/generator/template/src/components/FacetValue.vue b/packages/vue-cli-plugin-coveo/generator/template/src/components/FacetValue.vue
@@ -3,16 +3,17 @@
     <b-checkbox
       :native-value="facetValue.state === 'selected'"
       @change.native="onChange"
-    >{{facetValue.value}} ( {{facetValue.numberOfResults}} )</b-checkbox>
+      >{{ facetValue.value }} ({{ facetValue.numberOfResults }})</b-checkbox
+    >
   </li>
 </template>
 <script>
 export default {
-  name: "FacetValue",
-  props: ["facetValue"],
+  name: 'FacetValue',
+  props: ['facetValue'],
   methods: {
     onChange: function () {
-      this.$emit("toggle", this.facetValue);
+      this.$emit('toggle', this.facetValue);
     },
   },
 };
@@ -22,5 +23,6 @@ li {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
+  width: 100%;
 }
-</style> >
+</style>
diff --git a/packages/vue-cli-plugin-coveo/generator/template/src/components/Facets.vue b/packages/vue-cli-plugin-coveo/generator/template/src/components/Facets.vue
@@ -1,13 +1,12 @@
 <template>
   <section>
-    <b-button icon-left="filter-variant" @click="onClick">Filters</b-button>
-    <b-sidebar type="is-light" :right="true" v-model="open" :fullheight="true" :fullwidth="false" :overlay="true">
-      <div class="p-1 card">
-        <Facet field="objecttype" title="Object Type" />
-        <Facet field="filetype" title="File Type" />
-        <Facet field="author" title="Author" />
-      </div>
-    </b-sidebar>
+    <!-- <b-button icon-left="filter-variant" @click="onClick">Filters</b-button> -->
+    <h4 class="subtitle is-size-4 has-text-weight-bold">Refine By</h4>
+    <div class="p-1">
+      <Facet field="objecttype" title="Object Type" />
+      <Facet field="filetype" title="File Type" />
+      <Facet field="author" title="Author" />
+    </div>
   </section>
 </template>
 
@@ -16,14 +15,14 @@ import Facet from './Facet.vue';
 
 export default {
   name: 'Facets',
-  components: { Facet },
+  components: {Facet},
   data() {
     return {
       open: false,
     };
   },
   methods: {
-    onClick: function() {
+    onClick: function () {
       this.open = true;
     },
   },