@fiscozen/navbar 0.1.0

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@fiscozen/navbar",
+  "version": "0.1.0",
+  "description": "Design System Navbar Component",
+  "main": "src/index.ts",
+  "type": "module",
+  "keywords": [],
+  "author": "Riccardo Agnoletto",
+  "peerDependencies": {
+    "tailwindcss": "^3.4.1",
+    "vue": "^3.4.13",
+    "@fiscozen/button": "^0.1.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.3.3",
+    "@types/jsdom": "^21.1.6",
+    "@types/node": "^18.19.3",
+    "@vitejs/plugin-vue": "^4.5.2",
+    "@vitest/coverage-v8": "^1.2.1",
+    "@vue/test-utils": "^2.4.3",
+    "@vue/tsconfig": "^0.5.0",
+    "vite-plugin-dts": "^3.8.3",
+    "eslint": "^8.49.0",
+    "jsdom": "^23.0.1",
+    "prettier": "^3.0.3",
+    "typescript": "~5.3.0",
+    "vite": "^5.0.10",
+    "vitest": "^1.2.0",
+    "vue-tsc": "^1.8.25",
+    "@fiscozen/eslint-config": "^0.1.0",
+    "@fiscozen/prettier-config": "^0.1.0",
+    "@fiscozen/tsconfig": "^0.1.0"
+  },
+  "license": "ISC",
+  "scripts": {
+    "coverage": "vitest run --coverage",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts",
+    "format": "prettier --write src/",
+    "test:unit": "vitest run",
+    "build": "vue-tsc && vite build"
+  }
+}

package/src/FzNavbar.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { ref, onBeforeMount, onMounted, onUnmounted, computed } from 'vue'
+import { FzIconButton } from '@fiscozen/button'
+import { FzNavbarProps } from './types'
+
+const props = withDefaults(defineProps<FzNavbarProps>(), {
+  variant: 'horizontal'
+})
+
+const width = ref(0)
+
+const onResize = () => {
+  width.value = window.innerWidth
+}
+onBeforeMount(() => {
+  onResize()
+})
+
+onMounted(() => {
+  window.addEventListener('resize', onResize)
+})
+onUnmounted(() => {
+  window.removeEventListener('resize', onResize)
+})
+
+const isMobile = computed(() => Boolean(width.value <= 1024))
+const isVertical = computed(() => Boolean(props.variant === 'vertical'))
+const isHorizontal = computed(() => Boolean(props.variant === 'horizontal'))
+</script>
+
+<template>
+  <header
+    class="flex p-12 shadow"
+    :class="{
+      'justify-between': isMobile,
+      'h-full w-56 flex-col': isVertical && !isMobile,
+      'h-56 w-full': isHorizontal || isMobile
+    }"
+  >
+    <template v-if="!isMobile">
+      <div :class="{ 'mr-32': isHorizontal, 'mb-32': isVertical }">
+        <slot name="brand-logo" :isMobile :isHorizontal :isVertical></slot>
+      </div>
+      <div class="flex gap-4" :class="{ 'flex-row': isHorizontal, 'flex-col': isVertical }">
+        <slot name="navigation" :isVertical :isHorizontal :isMobile></slot>
+      </div>
+      <div
+        class="flex gap-16"
+        :class="{ 'ml-auto flex-row': isHorizontal, 'mt-auto flex-col': isVertical }"
+      >
+        <slot name="notifications" :isHorizontal :isVertical :isMobile></slot>
+        <slot name="user-menu" :isHorizontal :isMobile :isVertical></slot>
+      </div>
+    </template>
+    <template v-else>
+      <FzIconButton iconName="bars" variant="secondary" tooltip="menu" :disabled="false" />
+      <div>
+        <slot name="brand-logo" :isMobile :isHorizontal :isVertical></slot>
+      </div>
+      <div>
+        <slot :name="isHorizontal ? 'notifications' : 'user-menu'" :isHorizontal :isVertical :isMobile></slot>
+      </div>
+    </template>
+  </header>
+</template>
+
+<style></style>

package/src/__tests__/FzNavbar.spec.ts

@@ -0,0 +1,85 @@
+import { describe, it, expect } from 'vitest'
+
+import { mount } from '@vue/test-utils'
+import FzNavbar from '../FzNavbar.vue'
+
+const navigation = `
+  <div class="link">one</div>
+  <div class="link">two</div>
+  <div class="link">three</div>
+`
+
+const logo = `
+<template #brand-logo="scope">
+  <div id="brandlogo" :class="{'mobile': scope.isMobile, 'desktop': !scope.isMobile}"></div>
+</template>
+`
+const avatar = '<div id="avatar"></div>'
+const notifications = '<div id="notification"></div>'
+
+describe('FzNavbar', () => {
+  it('should match snapshot in horizontal layout large screen', () => {
+    window.innerWidth = 1280
+    const wrapper = mount(FzNavbar, {
+      props: {
+        variant: 'horizontal'
+      },
+      slots: {
+        navigation,
+        notifications,
+        'user-menu': avatar,
+        'brand-logo': logo
+      }
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+  it('should match snapshot in horizontal layout small screen', () => {
+    window.innerWidth = 1024
+    const wrapper = mount(FzNavbar, {
+      props: {
+        variant: 'horizontal'
+      },
+      slots: {
+        navigation,
+        notifications,
+        'user-menu': avatar,
+        'brand-logo': logo
+      }
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+  it('should match snapshot in vertical layout large screen', () => {
+    window.innerWidth = 1280
+    const wrapper = mount(FzNavbar, {
+      props: {
+        variant: 'vertical'
+      },
+      slots: {
+        navigation,
+        notifications,
+        'user-menu': avatar,
+        'brand-logo': logo
+      }
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+  it('should match snapshot in vertical layout small screen', () => {
+    window.innerWidth = 1024
+    const wrapper = mount(FzNavbar, {
+      props: {
+        variant: 'vertical'
+      },
+      slots: {
+        navigation,
+        notifications,
+        'user-menu': avatar,
+        'brand-logo': logo
+      }
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

package/src/__tests__/__snapshots__/FzNavbar.spec.ts.snap

@@ -0,0 +1,65 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`FzNavbar > should match snapshot in horizontal layout large screen 1`] = `
+"<header class="flex px-12 py-12 shadow h-56 w-full">
+  <div class="mr-32">
+    <div id="brandlogo" class="desktop"></div>
+  </div>
+  <div class="flex gap-4 flex-row">
+    <div class="link">one</div>
+    <div class="link">two</div>
+    <div class="link">three</div>
+  </div>
+  <div class="flex gap-16 ml-auto flex-row">
+    <div id="notification"></div>
+    <div id="avatar"></div>
+  </div>
+</header>"
+`;
+
+exports[`FzNavbar > should match snapshot in horizontal layout small screen 1`] = `
+"<header class="flex px-12 py-12 shadow justify-between h-56 w-full"><button type="button" class="relative relative rounded flex flex-shrink items-center justify-center w-32 h-32 focus:border-blue-600 focus:border-solid focus:border-1 text-grey-500 bg-core-white border-1 border-grey-200 hover:bg-grey-100 disabled:text-grey-100"><svg class="svg-inline--fa fa-bars fa-lg" aria-hidden="true" focusable="false" data-prefix="fasl" data-icon="bars" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+      <path class="" fill="currentColor" d="M0 64H448V96H0V64zM0 224H448v32H0V224zM448 384v32H0V384H448z"></path>
+    </svg>
+    <!--v-if--><span class="hidden h-0 w-0">menu</span>
+  </button>
+  <div>
+    <div id="brandlogo" class="mobile"></div>
+  </div>
+  <div>
+    <div id="notification"></div>
+  </div>
+</header>"
+`;
+
+exports[`FzNavbar > should match snapshot in vertical layout large screen 1`] = `
+"<header class="flex px-12 py-12 shadow h-full w-56 flex-col">
+  <div class="mb-32">
+    <div id="brandlogo" class="desktop"></div>
+  </div>
+  <div class="flex gap-4 flex-col">
+    <div class="link">one</div>
+    <div class="link">two</div>
+    <div class="link">three</div>
+  </div>
+  <div class="flex gap-16 mt-auto flex-col">
+    <div id="notification"></div>
+    <div id="avatar"></div>
+  </div>
+</header>"
+`;
+
+exports[`FzNavbar > should match snapshot in vertical layout small screen 1`] = `
+"<header class="flex px-12 py-12 shadow justify-between h-56 w-full"><button type="button" class="relative relative rounded flex flex-shrink items-center justify-center w-32 h-32 focus:border-blue-600 focus:border-solid focus:border-1 text-grey-500 bg-core-white border-1 border-grey-200 hover:bg-grey-100 disabled:text-grey-100"><svg class="svg-inline--fa fa-bars fa-lg" aria-hidden="true" focusable="false" data-prefix="fasl" data-icon="bars" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+      <path class="" fill="currentColor" d="M0 64H448V96H0V64zM0 224H448v32H0V224zM448 384v32H0V384H448z"></path>
+    </svg>
+    <!--v-if--><span class="hidden h-0 w-0">menu</span>
+  </button>
+  <div>
+    <div id="brandlogo" class="mobile"></div>
+  </div>
+  <div>
+    <div id="avatar"></div>
+  </div>
+</header>"
+`;

package/src/index.ts

@@ -0,0 +1,3 @@
+export { default as FzNavbar } from './FzNavbar.vue'
+
+export * from './types'

package/src/types.ts

@@ -0,0 +1,8 @@
+export type FzNavbarVariant = 'horizontal' | 'vertical'
+
+export interface FzNavbarProps {
+  /**
+   * The main direction of the navbar
+   */
+  variant: FzNavbarVariant
+}

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@fiscozen/tsconfig",
+  "exclude": ["src/__tests__", "vite.config.ts", "vitest.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,35 @@
+import { fileURLToPath, URL } from 'node:url'
+import { resolve } from 'node:path';
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import dts from 'vite-plugin-dts'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    dts({
+      insertTypesEntry: true,
+    })
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, './src/index.ts'),
+      name: 'FzNavbar',
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    }
+  }
+})

package/vitest.config.ts

@@ -0,0 +1,19 @@
+import { fileURLToPath } from 'node:url'
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/*'],
+      root: fileURLToPath(new URL('./', import.meta.url)),
+      coverage: {
+        provider: 'v8',
+        include: ['**/src/**'],
+        exclude: ['**/index.ts']
+      }
+    }
+  })
+)