feat(ui): Preset tab

Author: Guillaume Chau

packages/@vue/cli-ui/src/components/ProjectPresetItem.vue

@@ -0,0 +1,77 @@
+<template>
+  <div
+    class="project-preset-item"
+    :class="{
+      selected
+    }"
+  >
+    <div class="content">
+      <div
+        class="radio-icon"
+      >
+        <VueIcon
+          :icon="selected ? 'radio_button_checked' : 'radio_button_unchecked'"
+          class="medium"
+        />
+      </div>
+      <div class="name">{{ preset.name }}</div>
+      <div class="description">{{ preset.description }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    preset: {
+      type: Object,
+      required: true
+    },
+
+    selected: {
+      type: Boolean,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.project-preset-item
+  padding 12px
+  padding-left 0
+  user-select none
+  cursor pointer
+
+  .content
+    display grid
+    grid-template-columns 64px auto
+    grid-template-rows 24px 24px
+    grid-template-areas "icon name" "icon description"
+
+  .radio-icon
+    h-box()
+    box-center()
+    grid-area icon
+
+  .name
+    grid-area name
+
+  .description
+    grid-area description
+    color lighten($vue-color-dark, 40%)
+
+  &.selected
+    background rgba($vue-color-primary, .05)
+    .radio-icon
+      >>> svg
+        fill $vue-color-primary
+    .name
+      color $vue-color-primary
+
+  &:hover
+    background rgba($vue-color-primary, .1)
+
+</style>

packages/@vue/cli-ui/src/components/StatusBar.vue

@@ -35,7 +35,7 @@
       @click="$emit('console')"
     >
       <VueIcon icon="subtitles"/>
-      <span>{{ consoleLog }}</span>
+      <span v-if="consoleLog">{{ consoleLog }}</span>
     </div>
   </div>
 </template>

packages/@vue/cli-ui/src/graphql-api/connectors/projects.js

@@ -1,4 +1,11 @@
+const Creator = require('@vue/cli/lib/Creator')
+const { getPromptModules } = require('@vue/cli/lib/util/createTools')
+const { getFeatures } = require('@vue/cli/lib/util/features')
+const { toShortPluginId } = require('@vue/cli-shared-utils')
+const cwd = require('./cwd')
+
 let currentProject = null
+let creator = null
 
 function list (context) {
   return context.db.get('projects').value()
@@ -8,7 +15,55 @@ function getCurrent (context) {
   return currentProject
 }
 
+function generatePresetDescription (preset) {
+  let description = `Features: ${preset.features.join(', ')}`
+
+  if (preset.raw.useConfigFiles) {
+    description += ` (Use config files)`
+  }
+
+  return description
+}
+
+function generateProjectCreation (creator) {
+  const presets = creator.getPresets()
+  return {
+    presets: [
+      ...Object.keys(presets).map(
+        key => {
+          const preset = presets[key]
+          const features = getFeatures(preset).map(
+            f => toShortPluginId(f)
+          )
+          const info = {
+            id: key,
+            name: key === 'default' ? 'Default preset' : key,
+            features,
+            raw: preset
+          }
+          info.description = generatePresetDescription(info)
+          return info
+        }
+      ),
+      {
+        id: 'manual',
+        name: 'No preset',
+        description: 'No included features',
+        features: []
+      }
+    ]
+  }
+}
+
+function getCreation (context) {
+  if (!creator) {
+    creator = new Creator('', cwd.get(), getPromptModules())
+  }
+  return generateProjectCreation(creator)
+}
+
 module.exports = {
   list,
-  getCurrent
+  getCurrent,
+  getCreation
 }

packages/@vue/cli-ui/src/graphql-api/resolvers.js

@@ -15,7 +15,8 @@ module.exports = {
     folderCurrent: (root, args, context) => folders.getCurrent(args, context),
     foldersFavorite: (root, args, context) => folders.listFavorite(context),
     projects: (root, args, context) => projects.list(context),
-    projectCurrent: (root, args, context) => projects.getCurrent(context)
+    projectCurrent: (root, args, context) => projects.getCurrent(context),
+    projectCreation: (root, args, context) => projects.getCreation(context)
   },
 
   Mutation: {

packages/@vue/cli-ui/src/graphql-api/type-defs.js

@@ -119,12 +119,24 @@ input PromptInput {
   value: String!
 }
 
+type Preset {
+  id: ID!
+  name: String
+  description: String
+  features: [String]
+}
+
+type ProjectCreation {
+  presets: [Preset]
+}
+
 type Query {
   cwd: String!
   folderCurrent: Folder
   foldersFavorite: [Folder]
   projects: [Project]
   projectCurrent: Project
+  projectCreation: ProjectCreation
   pluginSearch (input: PluginSearchInput!): [Plugin]
 }
 

packages/@vue/cli-ui/src/graphql/presetFragment.gql

@@ -0,0 +1,6 @@
+fragment preset on Preset {
+  id
+  name
+  description
+  features
+}

packages/@vue/cli-ui/src/graphql/projectCreation.gql

@@ -0,0 +1,7 @@
+#import "./projectCreationFragment.gql"
+
+query projectCreation {
+  projectCreation {
+    ...projectCreation
+  }
+}

packages/@vue/cli-ui/src/graphql/projectCreationFragment.gql

@@ -0,0 +1,7 @@
+#import "./presetFragment.gql"
+
+fragment projectCreation on ProjectCreation {
+  presets {
+    ...preset
+  }
+}

packages/@vue/cli-ui/src/graphql/projectInitCreate.gql

@@ -0,0 +1,7 @@
+#import "./projectCreationFragment.gql"
+
+mutation projectInitCreate {
+  projectInitCreate {
+    ...projecCreation
+  }
+}

packages/@vue/cli-ui/src/style/main.styl

@@ -20,3 +20,8 @@ body,
 
   > *
     space-between-x(12px)
+
+.cta-text
+  margin 12px
+  color lighten($vue-color-dark, 40%)
+  font-size 18px