feat: 🍞 implemented vjsf form styling

Hardocs · Mar 4, 2021 · d039023 · d039023
1 parent b49f112
commit d039023
Show file tree

Hide file tree

Showing 12 changed files with 211 additions and 106 deletions.
diff --git a/.gitignore b/.gitignore
@@ -30,3 +30,5 @@ pnpm-debug.log*
 #Samples
 /samples/
 delete-this
+
+bin/
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "@ckeditor/ckeditor5-vue": "^1.0.3",
     "@formschema/native": "^2.0.0-alpha.2",
     "@hardocs-project/habitat-client": "^0.5.17",
+    "@koumoul/vjsf": "^1.22.0",
     "@vue/test-utils": "^1.1.3",
     "add": "^2.0.6",
     "ajv": "^6.12.6",
@@ -50,6 +51,7 @@
     "vue-json-edit": "^1.4.3",
     "vue-router": "^3.2.0",
     "vue-shortkey": "^3.1.7",
+    "vuetify": "^2.4.5",
     "vuex": "^3.4.0"
   },
   "devDependencies": {

diff --git a/public/index.html b/public/index.html
@@ -5,10 +5,22 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+
+    <!-- TODO: Replace this with the actual materialize css -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
+    />
+
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
 
   <body style="background-color: white;">
     <div id="app"></div>
+    <!-- TODO: Replace this with the actual materialize js -->
+    <script
+      defer
+      src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"
+    ></script>
   </body>
 </html>
diff --git a/src/components/CreateProject.vue b/src/components/CreateProject.vue
@@ -1,29 +1,37 @@
 <template>
-  <div class="create-project">
-    <div style="cursor:pointer" class="float-right px-4" @click="cancel()">
-      ❌
-    </div>
-    <FormSchema
-      class="create-project pb-6 create-project"
-      ref="formSchema"
-      v-model="model"
-      @submit.prevent
-    >
-      <div class="buttons">
-        <button type="button" class="primary-button" @click="onSubmit()">
-          Create projecte
-        </button>
+  <v-app>
+    <v-main>
+      <div style="cursor:pointer" class="float-right px-4" @click="cancel()">
+        ❌
       </div>
-    </FormSchema>
-    <pre class="model">{{ model }}</pre>
-  </div>
+      <v-form v-model="valid" class="p-6">
+        <v-jsf
+          v-model="model"
+          :schema="schema"
+          @submit.prevent
+          ref="formSchema"
+        >
+        </v-jsf>
+        <v-btn class="primary">Create project</v-btn>
+      </v-form>
+      <pre class="model">{{ model }}</pre>
+    </v-main>
+  </v-app>
 </template>
 
 <script>
-import FormSchema from '@formschema/native';
+// import FormSchema from '@formschema/native';
+
+/** Vjsf */
+import VJsf from '@koumoul/vjsf';
+import '@koumoul/vjsf/lib/VJsf.css';
+import '@koumoul/vjsf/lib/deps/third-party.js';
 
 export default {
-  components: { FormSchema },
+  components: {
+    //  FormSchema,
+    VJsf
+  },
   props: {
     selectedAction: {
       type: String,
@@ -42,8 +50,69 @@ export default {
   },
   data: () => ({
     created: false,
-    schema: Promise.resolve(require('@/schemas/project.schema.json')),
+    // schema: Promise.resolve(
+    //   JSON.parse(require('@/schemas/project.schema.json'))
+    // ),
+    schema: {
+      type: 'object',
+      title: 'Project',
+      description: '',
+      default: {},
+      examples: [
+        {
+          name: 'A project ',
+          shortTitle: 'This is a project title',
+          description: 'Describe project',
+          docsDir: 'docs',
+          entryFile: 'Index.html'
+        }
+      ],
+      required: ['name', 'docsDir', 'entryFile'],
+      properties: {
+        path: {
+          $id: '#/properties/path',
+          type: 'string',
+          title: 'Project path',
+          description: 'Provide a root project path ',
+          default: '',
+          examples: ['A project ']
+        },
+        name: {
+          $id: '#/properties/name',
+          type: 'string',
+          title: 'Project Name',
+          description: '',
+          default: '',
+          examples: ['A project ']
+        },
+        shortTitle: {
+          $id: '#/properties/shortTitle',
+          type: 'string',
+          title: 'Short Title',
+          description: '',
+          default: '',
+          examples: ['This is a project title']
+        },
+        docsDir: {
+          $id: '#/properties/docsDir',
+          type: 'string',
+          title: 'Docs directory',
+          description: '',
+          default: '',
+          examples: ['docs']
+        },
+        entryFile: {
+          $id: '#/properties/entryFile',
+          type: 'string',
+          title: 'Entry file',
+          description: 'Provide a reference file inside your docs root folder',
+          default: '',
+          examples: ['Index.html']
+        }
+      }
+    },
     model: {},
+    valid: false,
     modelExample: {
       path: 'D:\\my-projects\\COVID-19\\DESTROY',
       name: 'EK Evaluation kit',
@@ -57,6 +126,7 @@ export default {
   },
   created() {
     this.schema.then((schema) => {
+      console.log(this.schema);
       return this.$refs.formSchema.load(schema);
     });
     this.model.path = this.cwd;
@@ -80,73 +150,3 @@ export default {
   }
 };
 </script>
-
-<style>
-.container {
-  @apply bg-gray-15 py-4;
-  text-align: left;
-  max-width: 1024px;
-  /* margin: auto; */
-  display: flex;
-}
-.create-project .form,
-.model {
-  padding: 20px;
-  margin: 0 auto;
-}
-
-.create-project .form {
-  background-color: #c5cdd6;
-}
-
-.create-project .model {
-  margin: 0;
-  background-color: #eff0f1;
-  @apply bg-gray-100 text-white;
-}
-
-.create-project > h1 {
-  font-size: 1.7em;
-  /* text-align: center; */
-  @apply px-4 py-2;
-  margin-top: 0;
-  margin-bottom: 0.2em;
-}
-
-.create-project > h1 + p {
-  @apply px-4 py-0;
-  display: block;
-  /* text-align: center; */
-  margin-bottom: 1.2em;
-}
-
-.create-project > small {
-  line-height: 20px;
-  display: block;
-}
-
-.create-project [data-fs-field] {
-  display: flex;
-  margin-bottom: 5px;
-  @apply py-2 px-1;
-}
-
-.create-project label {
-  display: block;
-  width: 120px;
-  text-align: right;
-  margin-right: 10px;
-}
-
-.create-project [data-fs-field-input] {
-  @apply w-1/2;
-}
-
-.buttons {
-  padding-left: 130px;
-}
-
-.create-project input {
-  @apply w-full py-1 px-2 bg-gray-15 !important;
-}
-</style>
diff --git a/src/components/DocsContents.vue b/src/components/DocsContents.vue
@@ -11,32 +11,34 @@
     </div>
     <ul>
       <li>
-        <button
-          class="primary-button w-full"
+        <v-btn
+          elevation="0"
+          block
           @click="addDoc"
-          v-shortkey="['ctrl', 'shift', 'a']"
+          v-shortkey="['ctrl', 'shift', 'n']"
           @shortkey="addDoc"
+          class="mb-6"
         >
           + add doc
-        </button>
+        </v-btn>
       </li>
       <div v-for="doc in docs" :key="doc.id">
         <li
           class="py-2 docs-contents focus:font-bold border-b border-gray-25 flex justify-between align-center content-center hover:bg-gray-15"
         >
           <a
             style="cursor:pointer;"
-            class="w-full"
             @click="setCurrentDoc(doc.id)"
             :class="{ 'font-bold': doc.id == currentDocId }"
+            class="pl-3"
           >
             {{ doc.title }}
           </a>
           <p
             v-if="doc.fileName !== entryFile"
             href="javascript:"
             style="cursor:pointer"
-            class="opacity-0 hover:opacity-50"
+            class="opacity-0 hover:opacity-50 mr-3"
             @click="confirmDelete(doc.id)"
           >
             ❌

diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue
@@ -14,12 +14,13 @@
       class="border-solid border-b border-gray-25 py-4 w-full flex border-b-1"
     >
       <div v-for="item in actions" :key="item.actionType" class="px-4">
-        <p
+        <v-btn
+          elevation="0"
           style="cursor: pointer"
           @click="openHardocsPath(item.actionType, item.initOn)"
         >
           {{ item.label }}
-        </p>
+        </v-btn>
       </div>
       <!-- <StandardSelector></StandardSelector> -->
       <div class="w-1/2">

diff --git a/src/main.js b/src/main.js
@@ -6,6 +6,7 @@ import CKEditor from '@ckeditor/ckeditor5-vue';
 import './assets/styles/index.css';
 import JsonEditor from 'vue-json-edit';
 import vueShortkey from 'vue-shortkey';
+import vuetify from '@/plugins/vuetify';
 
 Vue.config.productionTip = false;
 
@@ -17,8 +18,8 @@ Vue.use(vueShortkey);
 Vue.config.productionTip = false;
 
 new Vue({
+  vuetify,
   router,
   store,
-  // apolloProvider,
   render: (h) => h(App)
 }).$mount('#app');
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify';
+import 'vuetify/dist/vuetify.min.css';
+
+Vue.use(Vuetify);
+
+export default new Vuetify({
+  theme: {
+    themes: {
+      light: {
+        primary: '#3f51b5',
+        secondary: '#b0bec5',
+        accent: '#8c9eff',
+        error: '#b71c1c'
+      },
+      dark: {
+        primary: '#b71c1c'
+      }
+    }
+  }
+});
diff --git a/src/views/Index.vue b/src/views/Index.vue
@@ -8,10 +8,6 @@
         </h1>
       </div>
     </div>
-    <!-- <div>
-
-
-  </div> -->
   </div>
 </template>
 <script>

diff --git a/vue.config.js b/vue.config.js
@@ -7,6 +7,7 @@ const packageJson = fs.readFileSync('./package.json');
 const version = JSON.parse(packageJson).version || 0;
 
 module.exports = {
+  transpileDependencies: ['vuetify', '@koumoul/vjsf'],
   configureWebpack: {
     plugins: [
       new webpack.DefinePlugin({

diff --git a/webpack.config.js b/webpack.config.js
@@ -14,5 +14,6 @@ module.exports = {
         ]
       }
     ]
-  }
+  },
+  transpile: ['vuetify', /@koumoul/]
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,5 +14,6 @@ module.exports = { @@
             ]
           }
         ]
-      }
+      },
+      transpile: ['vuetify', /@koumoul/]
     };