Menu impl + build fixes (#4)

* make mount helper types more accurate; make shallow false by default

* Add layout and menu feature

* update postcss/tailwind configs

* move image to component utilizing it

* add more layout plugins to naive.ts

* initial layout for main page

* add media query for dark mode

* position fix the side layer

* separate test tsconfig from build; create separate vitest config; add babel types

package.json

@@ -21,6 +21,7 @@
     "vue-router": "^4.0.12"
   },
   "devDependencies": {
+    "@babel/types": "^7.17.0",
     "@pinia/testing": "^0.0.9",
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@tailwindcss/forms": "^0.4.0",
@@ -40,8 +41,9 @@
     "eslint-plugin-vue": "^8.5.0",
     "happy-dom": "^2.41.0",
     "naive-ui": "^2.27.0",
-    "postcss": "^8.4.6",
+    "postcss": "^8.4.12",
     "postcss-scss": "^4.0.3",
+    "postcss-import": "^14.1.0",
     "prettier": "^2.5.1",
     "sass": "^1.49.8",
     "stylelint": "^14.5.1",

postcss.config.js

@@ -1,6 +1,8 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {}
-  }
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss/nesting'),
+    require('tailwindcss'),
+    require('autoprefixer')
+  ]
 }

src/App.vue

@@ -1,20 +1,45 @@
 <script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-// another good resource: https://learnvue.co/2021/05/explaining-the-new-script-setup-type-in-vue-3-major-takeaways-from-the-rfc/
+import { darkTheme, lightTheme } from 'naive-ui'
+import { computed, ref } from 'vue'
+
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+
+const mode = ref<'dark' | 'light'>(prefersDark ? 'dark' : 'light')
+const theme = computed(() => (mode.value === 'dark' ? darkTheme : lightTheme))
+
+const collapsed = ref(true)
 </script>
 
 <template>
-  <div
-    class="bg-white dark:bg-gray-800 dark:text-white text-gray-800 text-center h-screen w-screen"
-  >
-    <img
-      class="pt-10 mx-auto mb-4"
-      alt="Chronos logo"
-      src="./assets/chronos.jpg"
-    />
-    <router-view />
-  </div>
+  <n-config-provider :theme="theme">
+    <n-layout position="absolute">
+      <n-layout-header style="height: 64px; padding: 24px" bordered>
+        Layout Header
+      </n-layout-header>
+      <n-layout
+        class="bg-white dark:bg-gray-800 dark:text-white text-gray-800 text-center h-screen w-screen"
+        has-sider
+        position="absolute"
+        style="top: 64px; bottom: 64px"
+      >
+        <n-layout-sider
+          class="fixed h-full"
+          collapse-mode="transform"
+          :width="240"
+          @mouseover="collapsed = false"
+          @mouseleave="collapsed = true"
+          :collapsed="collapsed"
+          :native-scrollbar="false"
+          bordered
+        >
+          <n-h2>Layout Sider</n-h2>
+        </n-layout-sider>
+        <n-layout-content :native-scrollbar="false">
+          <router-view />
+        </n-layout-content>
+      </n-layout>
+    </n-layout>
+  </n-config-provider>
 </template>
 
 <style lang="sass">

src/components/global/vendor/naive.ts

@@ -1,6 +1,40 @@
-import { create, NButton } from 'naive-ui'
-// import { Plugin } from 'vue'
+import {
+  create,
+  NButton,
+  NConfigProvider,
+  NH1,
+  NH2,
+  NH3,
+  NH4,
+  NH5,
+  NH6,
+  NHr,
+  NLayout,
+  NLayoutContent,
+  NLayoutFooter,
+  NLayoutHeader,
+  NLayoutSider,
+  NMenu,
+  NScrollbar
+} from 'naive-ui'
 
 export default create({
-  components: [NButton]
+  components: [
+    NButton,
+    NConfigProvider,
+    NH1,
+    NH2,
+    NH3,
+    NH4,
+    NH5,
+    NH6,
+    NHr,
+    NLayout,
+    NLayoutHeader,
+    NLayoutContent,
+    NLayoutFooter,
+    NLayoutSider,
+    NMenu,
+    NScrollbar
+  ]
 })

src/views/HelloWorld.vue

@@ -1,29 +1,9 @@
-<script setup lang="ts">
-import { useMainStore } from '@/store'
-import { computed } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const main = useMainStore()
-
-const { incrementCounter } = main
-
-const message = computed(() => {
-  if (main.count >= 60) return "It's broken!"
-  if (main.count > 50) return 'Uh-oh'
-  if (main.count > 30) return 'Slow Down..'
-  if (main.count > 10) return 'Great Job!'
-  return 'Click Me'
-})
-
-const variant = computed(() => {
-  if (main.count >= 60) return 'error'
-  if (main.count > 10) return 'success'
-  return 'default'
-})
-</script>
-
 <template>
+  <img
+    class="pt-10 mx-auto mb-4"
+    alt="Chronos logo"
+    src="@/assets/chronos.jpg"
+  />
   <h1>{{ msg }}</h1>
   <p>
     Recommended IDE setup:
@@ -74,6 +54,31 @@ const variant = computed(() => {
   </p>
 </template>
 
+<script setup lang="ts">
+import { useMainStore } from '@/store'
+import { computed } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const main = useMainStore()
+
+const { incrementCounter } = main
+
+const message = computed(() => {
+  if (main.count >= 60) return "It's broken!"
+  if (main.count > 50) return 'Uh-oh'
+  if (main.count > 30) return 'Slow Down..'
+  if (main.count > 10) return 'Great Job!'
+  return 'Click Me'
+})
+
+const variant = computed(() => {
+  if (main.count >= 60) return 'error'
+  if (main.count > 10) return 'success'
+  return 'default'
+})
+</script>
+
 <style lang="sass" scoped>
 a
   color: #42b983

tailwind.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   darkMode: 'media', // false, 'media' or 'class'
+  mode: 'jit',
   theme: {
     extend: {}
   },

test/unit/testhelper.ts

@@ -1,12 +1,12 @@
 import { mount, MountingOptions } from '@vue/test-utils'
 import { createTestingPinia } from '@pinia/testing'
-import { DefineComponent, Plugin } from 'vue'
+import { ComponentPublicInstance, Plugin } from 'vue'
 import { globalComponents } from '@/components'
 import { createPinia, setActivePinia } from 'pinia'
 
-export function mountComponent<T extends InstanceType<DefineComponent>>(
+export function mountComponent<T extends ComponentPublicInstance>(
   component: T,
-  options: MountingOptions<T> = { shallow: true },
+  options: MountingOptions<T> = { shallow: false },
   mockStore = false
 ) {
   const pinia = mockStore
@@ -25,5 +25,5 @@ export function mountComponent<T extends InstanceType<DefineComponent>>(
     }
   }
 
-  return mount(component, options)
+  return mount<T>(component, options)
 }

test/unit/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["vite/client", "vitest/globals", "naive-ui/volar", "node"],
+    "paths": {
+      "@/*": ["src/*"],
+      "@test/*": ["test/*"]
+    },
+    "baseUrl": "../.."
+  },
+  "include": [
+    "../../src/**/*.ts",
+    "../../src/**/*.d.ts",
+    "../../src/**/*.tsx",
+    "../../src/**/*.vue",
+    "**/*.ts",
+    "**/*.d.ts",
+    "**/*.tsx",
+    "**/*.vue"
+  ]
+}

test/unit/views/HelloWorld.spec.ts

@@ -2,13 +2,13 @@ import HelloWorld from '@/views/HelloWorld.vue'
 import { mountComponent } from '@test/unit/testhelper'
 import { VueWrapper } from '@vue/test-utils'
 import { NButton } from 'naive-ui'
+import { ComponentPublicInstance } from 'vue'
 
 describe('HelloWorld.vue', () => {
-  let wrapper: VueWrapper<InstanceType<typeof HelloWorld>>
+  let wrapper: VueWrapper<ComponentPublicInstance<typeof HelloWorld>>
   beforeEach(() => {
     wrapper = mountComponent<InstanceType<typeof HelloWorld>>(HelloWorld, {
-      props: { msg: 'foo bar' },
-      shallow: false
+      props: { msg: 'foo bar' }
     })
   })
 

tsconfig.json

@@ -17,21 +17,16 @@
     "sourceMap": true,
     "baseUrl": ".",
     "lib": ["esnext", "dom"],
-    "types": ["vite/client", "vitest/globals", "naive-ui/volar", "node"],
+    "types": ["vite/client", "naive-ui/volar", "node"],
     "paths": {
-      "@/*": ["src/*"],
-      "@test/*": ["test/*"]
+      "@/*": ["src/*"]
     }
   },
   "include": [
     "src/**/*.ts",
     "src/**/*.d.ts",
     "src/**/*.tsx",
-    "src/**/*.vue",
-    "test/unit/**/*.ts",
-    "test/unit/**/*.d.ts",
-    "test/unit/**/*.tsx",
-    "test/unit/**/*.vue"
+    "src/**/*.vue"
   ],
   "exclude": ["node_modules", "dist/**/*"]
 }

vite.config.ts

@@ -1,14 +1,10 @@
-import { defineConfig } from 'vitest/config'
+import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import tsconfigPaths from 'vite-tsconfig-paths'
 
 const plugins = [vue(), tsconfigPaths()]
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins,
-  test: {
-    environment: 'happy-dom',
-    globals: true
-  }
+  plugins
 })

vitest.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+const plugins = [vue(), tsconfigPaths({ root: 'test/unit' })]
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins,
+  test: {
+    environment: 'happy-dom',
+    globals: true
+  }
+})