@nside/wefa 0.3.0 → 0.4.1

package/src/containers/LayoutContainer/SideNavigationComponent/BottomComponent/BottomComponent.spec.ts

@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import BottomComponent from './BottomComponent.vue'
+
+const UserMenuTriggerStub = defineComponent({
+  name: 'UserMenuTriggerComponent',
+  props: {
+    username: {
+      type: String,
+      required: true,
+    },
+    email: {
+      type: String,
+      default: '',
+    },
+    mode: {
+      type: String,
+      default: 'detailed',
+    },
+  },
+  template: '<div data-test="user-menu">{{ username }}|{{ email }}|{{ mode }}</div>',
+})
+
+describe('BottomComponent', () => {
+  it('renders UserMenuTriggerComponent with expected static props', () => {
+    const wrapper = mount(BottomComponent, {
+      global: {
+        stubs: {
+          UserMenuTriggerComponent: UserMenuTriggerStub,
+        },
+      },
+    })
+
+    expect(wrapper.get('[data-test="user-menu"]').text()).toContain('John Doe')
+    expect(wrapper.get('[data-test="user-menu"]').text()).toContain('jdo@example.com')
+    expect(wrapper.get('[data-test="user-menu"]').text()).toContain('detailed')
+  })
+})

package/src/containers/LayoutContainer/SideNavigationComponent/BottomComponent/BottomComponent.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="flex flex-col border-t p-4 border-zinc-950/5">
+    <UserMenuTriggerComponent username="John Doe" email="jdo@example.com" mode="detailed" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import UserMenuTriggerComponent from '@/containers/LayoutContainer/UserMenuTriggerComponent/UserMenuTriggerComponent.vue'
+</script>

package/src/containers/LayoutContainer/SideNavigationComponent/MainComponent/MainComponent.spec.ts

@@ -0,0 +1,175 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createRouter, createMemoryHistory, type RouteRecordRaw } from 'vue-router'
+import { defineComponent } from 'vue'
+import MainComponent from './MainComponent.vue'
+
+const StubView = defineComponent({
+  template: '<div></div>',
+})
+
+const NavigationLinkStub = defineComponent({
+  name: 'NavigationLinkComponent',
+  props: {
+    route: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+  },
+  emits: ['navigation-item-click'],
+  template:
+    '<button class="nav-link" :data-route="route" :data-icon="icon" @click="$emit(\'navigation-item-click\')">{{ label }}</button>',
+})
+
+function createTestRouter() {
+  const routes: RouteRecordRaw[] = [
+    {
+      path: '/home',
+      name: 'home',
+      component: StubView,
+      meta: {
+        wefa: {
+          title: 'Home',
+          icon: 'pi pi-home',
+          showInNavigation: true,
+        },
+      },
+    },
+    {
+      path: '/reports/',
+      name: 'reports',
+      component: StubView,
+      meta: {
+        wefa: {
+          title: 'Reports',
+          icon: 'pi pi-chart-line',
+          showInNavigation: true,
+        },
+      },
+    },
+    {
+      path: '/settings',
+      name: 'settings',
+      component: StubView,
+      meta: {
+        wefa: {
+          title: 'Settings',
+          icon: 'pi pi-cog',
+          showInNavigation: true,
+          section: 'Administration',
+        },
+      },
+      children: [
+        {
+          path: 'users/',
+          name: 'users',
+          component: StubView,
+          meta: {
+            wefa: {
+              title: 'Users',
+              icon: 'pi pi-users',
+              showInNavigation: true,
+              section: 'Administration',
+            },
+          },
+        },
+      ],
+    },
+    {
+      path: '/hidden',
+      name: 'hidden',
+      component: StubView,
+      meta: {
+        wefa: {
+          title: 'Hidden',
+        },
+      },
+    },
+  ]
+
+  return createRouter({
+    history: createMemoryHistory(),
+    routes,
+  })
+}
+
+describe('MainComponent', () => {
+  let router: ReturnType<typeof createTestRouter>
+
+  beforeEach(async () => {
+    router = createTestRouter()
+    await router.push('/home')
+    await router.isReady()
+  })
+
+  it('renders only routes configured for navigation', () => {
+    const wrapper = mount(MainComponent, {
+      global: {
+        plugins: [router],
+        stubs: {
+          NavigationLinkComponent: NavigationLinkStub,
+        },
+      },
+    })
+
+    expect(wrapper.text()).toContain('Home')
+    expect(wrapper.text()).toContain('Reports')
+    expect(wrapper.text()).toContain('Settings')
+    expect(wrapper.text()).toContain('Users')
+    expect(wrapper.text()).not.toContain('Hidden')
+  })
+
+  it('groups section-based routes and renders section headers', () => {
+    const wrapper = mount(MainComponent, {
+      global: {
+        plugins: [router],
+        stubs: {
+          NavigationLinkComponent: NavigationLinkStub,
+        },
+      },
+    })
+
+    expect(wrapper.text()).toContain('Administration')
+  })
+
+  it('normalizes route paths for navigation entries', () => {
+    const wrapper = mount(MainComponent, {
+      global: {
+        plugins: [router],
+        stubs: {
+          NavigationLinkComponent: NavigationLinkStub,
+        },
+      },
+    })
+
+    const renderedPaths = wrapper
+      .findAll('.nav-link')
+      .map((element) => element.attributes('data-route'))
+
+    expect(renderedPaths).toContain('/reports')
+    expect(renderedPaths).toContain('/settings/users')
+  })
+
+  it('forwards child navigation-item-click events', async () => {
+    const wrapper = mount(MainComponent, {
+      global: {
+        plugins: [router],
+        stubs: {
+          NavigationLinkComponent: NavigationLinkStub,
+        },
+      },
+    })
+
+    await wrapper.get('.nav-link').trigger('click')
+
+    expect(wrapper.emitted('navigation-item-click')).toBeTruthy()
+  })
+})

package/src/containers/LayoutContainer/SideNavigationComponent/MainComponent/MainComponent.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="flex flex-col grow p-4 gap-4">
+    <section v-if="topLevelEntries.length > 0">
+      <NavigationLinkComponent
+        v-for="entry in topLevelEntries"
+        :key="entry.path"
+        :route="entry.path"
+        :icon="entry.icon"
+        :label="entry.label"
+        @navigation-item-click="emitNavigationItemClick"
+      />
+    </section>
+
+    <section v-for="section in sectionEntries" :key="section.label" class="flex flex-col gap-2">
+      <h3 class="mb-1 px-2 text-sm font-medium text-zinc-500">{{ section.label }}</h3>
+      <div>
+        <NavigationLinkComponent
+          v-for="entry in section.entries"
+          :key="entry.path"
+          :route="entry.path"
+          :icon="entry.icon"
+          :label="entry.label"
+          @navigation-item-click="emitNavigationItemClick"
+        />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type RouteRecordRaw, useRouter } from 'vue-router'
+import type { WeFaRouteMeta } from '@/router'
+import NavigationLinkComponent from '@/containers/LayoutContainer/SideNavigationComponent/MainComponent/NavigationLinkComponent.vue'
+
+interface NavigationEntry {
+  path: string
+  label: string
+  icon?: string
+  section?: string
+}
+
+interface SectionNavigationEntries {
+  label: string
+  entries: NavigationEntry[]
+}
+
+const router = useRouter()
+const emit = defineEmits<{
+  (event: 'navigation-item-click'): void
+}>()
+
+/**
+ * Normalizes route paths to avoid duplicate slashes and trailing slash noise.
+ * @param path Raw route path
+ * @returns Normalized absolute path
+ */
+function normalizePath(path: string): string {
+  if (!path) {
+    return '/'
+  }
+
+  const normalizedPath = path.replace(/\/{2,}/g, '/')
+  if (normalizedPath === '/') {
+    return normalizedPath
+  }
+
+  return normalizedPath.replace(/\/$/, '')
+}
+
+/**
+ * Resolves a route path against its parent route path.
+ * @param parentPath Parent route path
+ * @param routePath Child route path
+ * @returns Resolved absolute path
+ */
+function resolvePath(parentPath: string, routePath: string): string {
+  if (routePath.startsWith('/')) {
+    return normalizePath(routePath)
+  }
+
+  if (!routePath) {
+    return normalizePath(parentPath)
+  }
+
+  if (parentPath === '/') {
+    return normalizePath(`/${routePath}`)
+  }
+
+  return normalizePath(`${parentPath}/${routePath}`)
+}
+
+/**
+ * Extracts navigation entries from the router tree based on showInNavigation metadata.
+ * @param routes Router records to inspect
+ * @param parentPath Parent path used to resolve relative child paths
+ * @returns Flattened navigation entries in declaration order
+ */
+function routeNavigationEntries(
+  routes: RouteRecordRaw[],
+  parentPath: string = '/'
+): NavigationEntry[] {
+  const entries: NavigationEntry[] = []
+
+  for (const route of routes) {
+    const fullPath = resolvePath(parentPath, route.path)
+    const routeMeta = route.meta?.wefa as WeFaRouteMeta | undefined
+    const showInNavigation = routeMeta?.showInNavigation ?? false
+    const section = routeMeta?.section
+
+    if (showInNavigation === true) {
+      entries.push({
+        path: fullPath,
+        label: routeMeta?.title ?? String(route.name ?? fullPath),
+        icon: routeMeta?.icon,
+        section: section?.trim() || undefined,
+      })
+    }
+
+    if (route.children?.length) {
+      entries.push(...routeNavigationEntries(route.children, fullPath))
+    }
+  }
+
+  return entries
+}
+
+const navigationEntries = computed(() => {
+  return routeNavigationEntries(router.options.routes as RouteRecordRaw[])
+})
+
+const topLevelEntries = computed(() => {
+  return navigationEntries.value.filter((entry) => !entry.section)
+})
+
+const sectionEntries = computed<SectionNavigationEntries[]>(() => {
+  const groupedEntries = new Map<string, NavigationEntry[]>()
+
+  for (const entry of navigationEntries.value) {
+    if (!entry.section) {
+      continue
+    }
+
+    if (!groupedEntries.has(entry.section)) {
+      groupedEntries.set(entry.section, [])
+    }
+
+    groupedEntries.get(entry.section)?.push(entry)
+  }
+
+  return Array.from(groupedEntries.entries()).map(([label, entries]) => ({
+    label,
+    entries,
+  }))
+})
+
+/**
+ * Forwards click events from individual navigation links.
+ */
+function emitNavigationItemClick() {
+  emit('navigation-item-click')
+}
+</script>

package/src/containers/LayoutContainer/SideNavigationComponent/MainComponent/NavigationLinkComponent.spec.ts

@@ -0,0 +1,105 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent, h } from 'vue'
+import NavigationLinkComponent from './NavigationLinkComponent.vue'
+
+function createRouterLinkStub(isActive: boolean, isExactActive: boolean) {
+  return defineComponent({
+    name: 'RouterLink',
+    props: {
+      to: {
+        type: [String, Object],
+        required: true,
+      },
+    },
+    emits: ['click'],
+    setup(props, { emit, slots }) {
+      return () =>
+        h(
+          'a',
+          {
+            'data-test': 'router-link',
+            href: typeof props.to === 'string' ? props.to : '#',
+            onClick: (event: MouseEvent) => emit('click', event),
+          },
+          slots.default?.({
+            isActive,
+            isExactActive,
+          })
+        )
+    },
+  })
+}
+
+describe('NavigationLinkComponent', () => {
+  it('renders label and icon', () => {
+    const wrapper = mount(NavigationLinkComponent, {
+      props: {
+        route: '/products',
+        icon: 'pi pi-box',
+        label: 'Products',
+      },
+      global: {
+        stubs: {
+          RouterLink: createRouterLinkStub(false, false),
+        },
+      },
+    })
+
+    expect(wrapper.text()).toContain('Products')
+    expect(wrapper.find('i.pi-box').exists()).toBe(true)
+  })
+
+  it('shows active indicator for active links', () => {
+    const wrapper = mount(NavigationLinkComponent, {
+      props: {
+        route: '/products',
+        icon: 'pi pi-box',
+        label: 'Products',
+      },
+      global: {
+        stubs: {
+          RouterLink: createRouterLinkStub(true, false),
+        },
+      },
+    })
+
+    expect(wrapper.find('.absolute.inset-y-2.-left-4').exists()).toBe(true)
+  })
+
+  it('does not show active indicator for inactive links', () => {
+    const wrapper = mount(NavigationLinkComponent, {
+      props: {
+        route: '/products',
+        icon: 'pi pi-box',
+        label: 'Products',
+      },
+      global: {
+        stubs: {
+          RouterLink: createRouterLinkStub(false, false),
+        },
+      },
+    })
+
+    expect(wrapper.find('.absolute.inset-y-2.-left-4').exists()).toBe(false)
+  })
+
+  it('emits navigation-item-click when clicked', async () => {
+    const wrapper = mount(NavigationLinkComponent, {
+      props: {
+        route: '/products',
+        icon: 'pi pi-box',
+        label: 'Products',
+      },
+      global: {
+        stubs: {
+          RouterLink: createRouterLinkStub(false, false),
+        },
+      },
+    })
+
+    await wrapper.get('[data-test="router-link"]').trigger('click')
+
+    expect((wrapper.emitted('navigation-item-click') ?? []).length).toBeGreaterThan(0)
+  })
+})

package/src/containers/LayoutContainer/SideNavigationComponent/MainComponent/NavigationLinkComponent.vue

@@ -0,0 +1,45 @@
+<template>
+  <router-link v-slot="{ isActive, isExactActive }" :to="route" @click="emitNavigationClick">
+    <div class="relative" @click="emitNavigationClick">
+      <Transition
+        enter-active-class="transition opacity-0 scale-y-75 duration-200 ease-out"
+        enter-to-class="opacity-100 scale-y-100"
+        leave-active-class="transition opacity-100 scale-y-100 duration-200 ease-in"
+        leave-to-class="opacity-0 scale-y-75"
+      >
+        <span
+          v-if="isActive || isExactActive"
+          class="absolute inset-y-2 -left-4 rounded-full bg-zinc-950 w-1"
+        ></span>
+      </Transition>
+      <div
+        :class="[isExactActive ? 'bg-zinc-500/5' : '']"
+        class="flex w-full items-center rounded-lg cursor-pointer text-base px-2 py-2 gap-3 hover:bg-zinc-950/5"
+        @click="emitNavigationClick"
+      >
+        <i v-if="icon" class="pi" :class="icon" style="font-size: 1.5rem"></i>
+        <span class="block truncate text-zinc-950">{{ label }}</span>
+      </div>
+    </div>
+  </router-link>
+</template>
+
+<script setup lang="ts">
+export interface NavigationLinkComponentProps {
+  route: string
+  icon?: string
+  label: string
+}
+
+const { route, icon, label } = defineProps<NavigationLinkComponentProps>()
+const emit = defineEmits<{
+  (event: 'navigation-item-click'): void
+}>()
+
+/**
+ * Emits a navigation click event so parents can react (e.g. close a mobile drawer).
+ */
+function emitNavigationClick() {
+  emit('navigation-item-click')
+}
+</script>

package/src/containers/LayoutContainer/SideNavigationComponent/SideNavigationComponent.spec.ts

@@ -0,0 +1,78 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import SideNavigationComponent from './SideNavigationComponent.vue'
+
+const TopComponentStub = defineComponent({
+  name: 'TopComponent',
+  props: {
+    projectTitle: {
+      type: String,
+      required: true,
+    },
+    projectLogo: {
+      type: String,
+      default: undefined,
+    },
+  },
+  template: '<div data-test="top">{{ projectTitle }}|{{ projectLogo }}</div>',
+})
+
+const MainComponentStub = defineComponent({
+  name: 'MainComponent',
+  template: '<div data-test="main">Main Navigation</div>',
+})
+
+describe('SideNavigationComponent', () => {
+  it('renders top and main sections', () => {
+    const wrapper = mount(SideNavigationComponent, {
+      props: {
+        projectTitle: 'WeFa',
+      },
+      global: {
+        stubs: {
+          TopComponent: TopComponentStub,
+          MainComponent: MainComponentStub,
+        },
+      },
+    })
+
+    expect(wrapper.find('[data-test="top"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="main"]').exists()).toBe(true)
+  })
+
+  it('passes project title to TopComponent', () => {
+    const wrapper = mount(SideNavigationComponent, {
+      props: {
+        projectTitle: 'Energy Forecast',
+      },
+      global: {
+        stubs: {
+          TopComponent: TopComponentStub,
+          MainComponent: MainComponentStub,
+        },
+      },
+    })
+
+    expect(wrapper.get('[data-test="top"]').text()).toBe('Energy Forecast|')
+  })
+
+  it('passes custom logo to TopComponent', () => {
+    const wrapper = mount(SideNavigationComponent, {
+      props: {
+        projectTitle: 'Energy Forecast',
+        projectLogo: 'https://example.test/logo.svg',
+      },
+      global: {
+        stubs: {
+          TopComponent: TopComponentStub,
+          MainComponent: MainComponentStub,
+        },
+      },
+    })
+
+    expect(wrapper.get('[data-test="top"]').text()).toBe(
+      'Energy Forecast|https://example.test/logo.svg'
+    )
+  })
+})

package/src/containers/LayoutContainer/SideNavigationComponent/SideNavigationComponent.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="fixed inset-y-0 left-0 w-64 max-lg:hidden">
+    <nav class="flex h-full min-h-0 flex-col">
+      <TopComponent
+        :project-title="projectTitle"
+        :project-logo="projectLogo"
+        :project-logo-alt="projectLogoAlt"
+      />
+      <MainComponent />
+    </nav>
+  </div>
+</template>
+
+<script setup lang="ts">
+import TopComponent from '@/containers/LayoutContainer/SideNavigationComponent/TopComponent/TopComponent.vue'
+import MainComponent from '@/containers/LayoutContainer/SideNavigationComponent/MainComponent/MainComponent.vue'
+
+export interface SideNavigationComponentProps {
+  projectTitle: string
+  projectLogo?: string
+  projectLogoAlt?: string
+}
+
+const {
+  projectTitle,
+  projectLogo = undefined,
+  projectLogoAlt = undefined,
+} = defineProps<SideNavigationComponentProps>()
+</script>