refactor(ts): common components to ts (#2114)

* feat: add prettier and volar pug plugin

* refactor(ts): common components to ts

* fix: remove import

* fix: run yarn

* fix(prettier): prettier configuration for pug

.eslintrc.js

@@ -1,7 +1,8 @@
 module.exports = {
   root: true,
+  parser: 'vue-eslint-parser',
   parserOptions: {
-    parser: 'babel-eslint',
+    parser: '@typescript-eslint/parser',
     sourceType: 'module'
   },
   env: {
@@ -20,6 +21,8 @@ module.exports = {
   },
   // add your custom rules here
   rules: {
+    'space-before-function-paren': 'off',
+    semi: ['error', 'never'],
     // allow async-await
     'generator-star-spacing': 'off',
     // allow paren-less arrow functions

.prettierrc.cjs

@@ -0,0 +1,30 @@
+
+// @ts-check
+/// <reference types="@prettier/plugin-pug/src/prettier" />
+
+/**
+ * @type {import('prettier').Options}
+ */
+
+module.exports = {
+  plugins: [require.resolve('@prettier/plugin-pug')],  
+  pugBracketSameLine: false,
+  pugSingleQuote: false,
+  pugWrapAttributesThreshold: 1,
+  pugUseTabs: false,
+  "spaceBeforeFunctionParen": false,
+  "arrowParens": "always",
+  "pugBracketSpacing": false,
+  "pugIndentOffset": -2,
+  "pugIndentStart": false,
+  "semi": false,
+  "pugPrintWidth": 80,
+  "pugSingleFileComponentIndentation": true,
+  "pugAttributeSeparator": "none",
+  "pugSortAttributes": "asc",
+  "pugClosingBracketPosition": "new-line",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "printWidth": 80,
+  }

package.json

@@ -60,6 +60,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
+    "@prettier/plugin-pug": "^2.4.2",
     "@quasar/app": "^2.2.4",
     "@quasar/quasar-app-extension-apollo": "^1.0.0-beta.8",
     "@quasar/quasar-app-extension-qmarkdown": "^1.4.1",
@@ -69,7 +70,9 @@
     "@storybook/vue": "^6.5.12",
     "@typescript-eslint/eslint-plugin": "^5.57.0",
     "@typescript-eslint/parser": "^5.57.0",
+    "@volar/vue-language-plugin-pug": "^1.2.0",
     "@vue/eslint-config-standard": "6.0.0",
+    "@vue/runtime-dom": "^3.2.47",
     "babel-eslint": "10.1.0",
     "babel-loader": "^8.2.2",
     "chromatic": "^5.8.2",
@@ -86,11 +89,12 @@
     "eslint-plugin-storybook": "^0.6.4",
     "eslint-plugin-vue": "7.9.0",
     "husky": "^8.0.1",
+    "prettier": "^2.8.7",
     "pug": "3.0.2",
     "pug-plain-loader": "1.1.0",
     "raw-loader": "^4.0.2",
     "style-loader": "^2.0.0",
-    "vue-loader": "^15.9.6"
+    "vue-loader": "15.9.6"
   },
   "husky": {
     "hooks": {

src/components.d.ts

@@ -0,0 +1,10 @@
+import { ComponentConstructor } from 'quasar';
+
+type Quasar = typeof import('quasar');
+type QuasarComponentNames = keyof { [K in keyof Quasar as (Quasar)[K] extends ComponentConstructor<infer _> ? K : never]: any };
+type QuasarComponents = Pick<Quasar, QuasarComponentNames>;
+type QuasarFuncationalComponents = { [K in keyof QuasarComponents]: Quasar[K] extends ComponentConstructor<infer C> ? (props: Partial<C>) => void : never };
+
+declare module '@vue/runtime-dom' {  // Vue <= 2.6.14
+	export interface GlobalComponents extends QuasarFuncationalComponents { }
+}

src/components/common/base-banner.vue

@@ -1,23 +1,31 @@
-<script>
+<script lang="ts">
 import { colors } from 'quasar'
-const { getPaletteColor } = colors
+import { defineComponent } from 'vue'
 import helpers from '~/mixins/helpers'
+const { getPaletteColor } = colors
+
 /**
  * Shows a info card with the provided title, subtitle, and style
  */
-export default {
+export default defineComponent({
   name: 'base-banner',
   mixins: [helpers],
 
   props: {
     /**
      * Title text for the banner
      */
-    title: String,
+    title: {
+      type: String,
+      required: true
+    },
     /**
      * Subtitle text for the banner
      */
-    description: String,
+    description: {
+      type: String,
+      required: true
+    },
     /**
      * Color (background) for the banner
      */
@@ -61,16 +69,29 @@ export default {
   methods: {
     getPaletteColor
   }
-}
+})
 </script>
 
 <template lang="pug">
-.base-banner.full-width.rounded-full.relative-position.overflow-hidden(:style="{'background': color}" :class="{'compact-banner' : compact}")
-  #banner-pattern.absolute(:style="{'background': `url('${pattern}') repeat`, 'background-size': '200px' }" v-if="pattern")
-  #banner-image.absolute(:style="{'background': `url('${background}') no-repeat`, 'background-size': 'cover' }" v-if="background")
+.base-banner.full-width.rounded-full.relative-position.overflow-hidden(
+  :class="{'compact-banner': compact}"
+  :style="{background: color}"
+)
+  #banner-pattern.absolute(
+    :style="{background: `url('${pattern}') repeat`, 'background-size': '200px'}"
+    v-if="pattern"
+  )
+  #banner-image.absolute(
+    :style="{background: `url('${background}') no-repeat`, 'background-size': 'cover'}"
+    v-if="background"
+  )
   #linear-gradient.absolute.z-40(v-if="gradient")
-  .content.relative-position.z-50.full-height.q-pa-xl(:class="{'q-pa-xxxl': $q.screen.gt.sm }")
-    .absolute-top-right.z-50.q-pa-sm(v-if="hasListener('onClose') || hasSlot('top-right')")
+  .content.relative-position.z-50.full-height.q-pa-xl(
+    :class="{'q-pa-xxxl': $q.screen.gt.sm}"
+  )
+    .absolute-top-right.z-50.q-pa-sm(
+      v-if="hasListener('onClose') || hasSlot('top-right')"
+    )
       slot(name="top-right")
       q-btn.absolute-top-right.q-pa-sm.close-btn(
         @click="$emit('onClose')"
@@ -84,7 +105,10 @@ export default {
 
     slot(name="header")
     section.row
-      div(v-if="!compact" :class="{'col-6': split || hasSlot('right'), 'full-width': contentFullWidth}")
+      div(
+        :class="{'col-6': split || hasSlot('right'), 'full-width': contentFullWidth}"
+        v-if="!compact"
+      )
         h3.q-pa-none.q-ma-none.h-h2.text-white.text-weight-700 {{title}}
         p.h-b1.text-white.q-my-lg.text-weight-500.leading-loose {{description}}
         nav.q-mt-xl
@@ -111,5 +135,4 @@ export default {
   background-repeat: no-repeat
   background-size: cover
   background-position-x right
-
 </style>

src/components/common/button-card.vue

@@ -1,11 +1,8 @@
-<script>
+<script lang="ts">
 import { dateToStringShort } from '~/utils/TimeUtils'
-
-export default {
+import { defineComponent } from 'vue'
+export default defineComponent({
   name: 'button-card',
-  components: {
-    Chips: () => import('./chips.vue')
-  },
 
   props: {
     color: {
@@ -50,42 +47,70 @@ export default {
     }
   },
   methods: {
-    formatDate (date) {
+    formatDate(date) {
       return `${dateToStringShort(date)}`
     }
   }
-}
+})
 </script>
 
 <template lang="pug">
 q-btn.button(
-  :class="{ 'no-pointer-events': !clickable }"
-  :style="{ 'border-radius': round ? '24px' : '4px' }"
+  :class="{'no-pointer-events': !clickable}"
   :color="color"
-  :text-color="text"
-  :outline="outline"
   :disable="disable"
   :flat="iconOnly"
-  unelevated
-  no-caps
-  padding="4px"
+  :outline="outline"
   :ripple="false"
+  :style="{'border-radius': round ? '24px' : '4px'}"
+  :text-color="text"
   @click="$emit('click')"
+  no-caps
+  padding="4px"
+  unelevated
 )
-  .row(:style="{ width: `${width}px`, height: `${height}px` }")
-    .row.items-left.justify-between.full-width(:class="{ 'q-mt-xs': !iconOnly }")
-      q-avatar.q-ml-xs(:color="outline ? 'primary' : 'white'" size="35px")
-        q-icon(v-if="!hideIcon" :name="icon" size="14px" :color="!outline ? 'primary' : 'white'")
+  .row(:style="{width: `${width}px`, height: `${height}px`}")
+    .row.items-left.justify-between.full-width(
+      :class="{'q-mt-xs': !iconOnly}"
+    )
+      q-avatar.q-ml-xs(
+        :color="outline ? 'primary' : 'white'"
+        size="35px"
+      )
+        q-icon(
+          :color="!outline ? 'primary' : 'white'"
+          :name="icon"
+          size="14px"
+          v-if="!hideIcon"
+        )
     //- .div.q-pa-none.chip-container.q-px-xs
-    //-   chips.nudge-right(v-if="chip && chip.label" :tags="[ chip ]")
+    //- chips.nudge-right(v-if="chip && chip.label" :tags="[ chip ]")
     .row.q-mx-sm.q-my-xxs.text-left(v-if="from || end")
       //- .h-h7-regular(:class="outline ? 'text-primary' : 'text-white'" :style="{ width: `${width - 16}px`}") From
-      .h-h6.q-mb-xxs(v-if="from" :class="outline ? 'text-primary' : 'text-white'" :style="{ width: `${width - 16}px`}") {{ formatDate(from) }}
-      .h-h7-regular(v-if="from || end" :class="outline ? 'text-primary' : 'text-white'" :style="{ width: `${width - 16}px`}") Until
-      .h-h6.q-py-xxs(v-if="end" :class="outline ? 'text-primary' : 'text-white'" :style="{ width: `${width - 16}px`}") {{ formatDate(end) }}
+      .h-h6.q-mb-xxs(
+        :class="outline ? 'text-primary' : 'text-white'"
+        :style="{width: `${width - 16}px`}"
+        v-if="from"
+      ) {{formatDate(from)}}
+      .h-h7-regular(
+        :class="outline ? 'text-primary' : 'text-white'"
+        :style="{width: `${width - 16}px`}"
+        v-if="from || end"
+      ) Until
+      .h-h6.q-py-xxs(
+        :class="outline ? 'text-primary' : 'text-white'"
+        :style="{width: `${width - 16}px`}"
+        v-if="end"
+      ) {{formatDate(end)}}
     .row.q-mx-sm.q-my-xxs.text-left(v-else-if="title || subtitle")
-      .h-h5-regular.q-mb-xxs(:class="outline ? 'text-primary' : 'text-white'" :style="{ width: `${width - 16}px`}") {{ title }}
-      .h-h5.q-py-xxs(:class="outline ? 'text-primary' : 'text-white'" :style="{ width: `${width - 16}px`}") {{ subtitle }}
+      .h-h5-regular.q-mb-xxs(
+        :class="outline ? 'text-primary' : 'text-white'"
+        :style="{width: `${width - 16}px`}"
+      ) {{title}}
+      .h-h5.q-py-xxs(
+        :class="outline ? 'text-primary' : 'text-white'"
+        :style="{width: `${width - 16}px`}"
+      ) {{subtitle}}
   slot
 </template>