@state-of-geneva/rapports-bdd 1.2.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@state-of-geneva/rapports-bdd",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "type": "module",
   "bin": {
     "rapports-bdd": "bin/rapports-bdd.js"
@@ -35,16 +35,12 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@cucumber/cucumber-json-converter": "^0.1.0",
     "@cucumber/gherkin": "^28.0.0",
-    "@primevue/themes": "^4.5.1",
     "@vitejs/plugin-vue": "^5.0.5",
-    "primeicons": "^7.0.0",
-    "primevue": "^4.5.1",
-    "quill": "^2.0.3",
     "vite": "^5.3.1",
     "vue": "^3.4.21",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "vuetify": "^3.13.7"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.8.0",

package/src/App.vue

@@ -1,38 +1,122 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { computed, ref } from 'vue'
+import { RouterView, useRoute } from 'vue-router'
+
+const route = useRoute()
+const drawer = ref(false)
+const isHome = computed(() => route.name === 'home')
+const isEditor = computed(() => route.name === 'editor')
 </script>
 
 <template>
-  <div id="app-container">
-    <header>
-      <h1>Rapports BDD</h1>
-    </header>
-    <main>
+  <v-app>
+    <v-app-bar class="app-bar" flat height="76">
+      <v-container class="app-bar__content d-flex align-center px-5 px-md-8">
+        <v-btn
+          class="brand-button px-0"
+          variant="text"
+          :to="{ name: 'home' }"
+          aria-label="Retour à l’accueil Rapports BDD"
+        >
+          <span class="brand-mark">BDD</span>
+          <span class="brand-copy">
+            <strong>Rapports BDD</strong>
+            <small>Observatoire des tests métier</small>
+          </span>
+        </v-btn>
+
+        <v-spacer />
+
+        <v-btn
+          class="desktop-home-button d-none d-sm-flex"
+          variant="text"
+          :to="{ name: 'home' }"
+          :active="isHome"
+        >
+          Catalogue
+        </v-btn>
+        <v-chip v-if="!isEditor" class="status-chip d-none d-md-flex ml-3" size="small" variant="tonal">
+          <span class="status-dot" /> Rapports à jour
+        </v-chip>
+        <v-app-bar-nav-icon class="d-flex d-sm-none ml-2" aria-label="Ouvrir le menu" @click="drawer = !drawer" />
+      </v-container>
+    </v-app-bar>
+
+    <v-navigation-drawer v-model="drawer" location="right" temporary width="280">
+      <v-list nav>
+        <v-list-item :to="{ name: 'home' }" title="Catalogue" />
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-main class="app-main">
       <RouterView />
-    </main>
-  </div>
+    </v-main>
+  </v-app>
 </template>
 
 <style scoped>
-#app-container {
+.app-bar {
+  border-bottom: 1px solid #e6ebe9;
+  background: rgba(255, 255, 255, 0.96);
+}
+
+.app-bar__content {
+  max-width: 1440px;
+  height: 100%;
+}
+
+.brand-button {
+  min-height: 54px;
+  text-align: left;
+}
+
+.brand-mark {
   display: grid;
-  grid-auto-rows: auto 1fr;
-  grid-template-areas:
-    'header'
-    'main';
-  min-height: 100vh;
+  width: 42px;
+  height: 42px;
+  margin-right: 12px;
+  place-items: center;
+  border-radius: 13px;
+  background: #125b50;
+  color: white;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+.brand-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  color: #172b27;
+  line-height: 1.2;
+}
+
+.brand-copy strong {
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.brand-copy small {
+  color: #73817d;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.status-chip {
+  color: #176b48;
+  font-weight: 600;
 }
 
-header {
-  grid-area: header;
-  color: var(--primary);
-  background-color: var(--accent);
-  text-align: center;
+.status-dot {
+  width: 7px;
+  height: 7px;
+  margin-right: 7px;
+  border-radius: 50%;
+  background: #25a56a;
 }
 
-main {
-  grid-area: main;
-  color: var(--secondary);
-  background-color: var(--primary);
+.app-main {
+  min-height: calc(100vh - 76px);
 }
 </style>

package/src/assets/main.css

@@ -1,18 +1,70 @@
 :root {
-  --primary: #eff0f0;
-  --secondary: #173647;
-  --accent: #1dbb68;
+  font-family: 'DM Sans', 'Segoe UI', sans-serif;
+  color: #172b27;
+  background: #f4f6f8;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-optical-sizing: auto;
 }
 
-#app,
+html,
 body,
-html {
-  min-height: 100vh;
+#app {
+  min-width: 320px;
+  min-height: 100%;
   margin: 0;
-  padding: 0;
-  font-family: Arial, sans-serif;
 }
 
-.p-tree-node-toggle-button {
-  align-self: start;
+body {
+  min-height: 100vh;
+}
+
+button,
+a,
+input {
+  font: inherit;
+}
+
+button:focus-visible,
+a:focus-visible,
+[role='button']:focus-visible {
+  outline: 3px solid rgba(18, 91, 80, 0.35);
+  outline-offset: 2px;
+}
+
+.text-icon {
+  display: inline-flex;
+  min-width: 1em;
+  align-items: center;
+  justify-content: center;
+  font-family: 'DM Sans', sans-serif;
+  font-size: 1.1em;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.v-application {
+  background: #f4f6f8 !important;
+  font-family: 'DM Sans', 'Segoe UI', sans-serif;
+}
+
+.v-btn {
+  font-weight: 600;
+}
+
+.v-field--variant-outlined .v-field__outline {
+  --v-field-border-opacity: 0.13;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }

package/src/components/CucumberExamples.vue

@@ -1,70 +1,39 @@
-<template>
-  <div class="example" v-for="example in examples" :key="example.id">
-
-    <div class="title">
-      <b>{{ example.keyword }}: </b> {{ example.name }}
-    </div>
-    <table>
-      <thead v-if="example.tableHeader">
-      <tr>
-        <th v-for="cell in example.tableHeader.cells" :key="cell.value">
-          {{cell.value}}
-        </th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr v-for="row in example.tableBody" :key="row.id">
-        <td v-for="cell in row.cells" :key="cell.value">
-          {{cell.value}}
-        </td>
-      </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import * as Messages from '@cucumber/messages'
+import type * as Messages from '@cucumber/messages'
+
 defineProps({
   examples: {
-    type: Object as PropType<Array<Messages.Examples>>,
-    required: true,
-  },
-});
+    type: Array as PropType<readonly Messages.Examples[]>,
+    required: true
+  }
+})
 </script>
-<style scoped>
-.title{
-  padding-bottom: 5px;
-}
-.example{
-  padding-top: 10px;
-}
-table {
-  display: table;
-  border-collapse: separate;
-  box-sizing: border-box;
-  text-indent: initial;
-  unicode-bidi: isolate;
-  border-spacing: 2px;
-  border-color: gray;
-}
 
-tr {
-  display: table-row;
-  vertical-align: inherit;
-  unicode-bidi: isolate;
-  border-color: inherit;
-}
-
-td, th {
-  padding: .4em .6em;
-  border-width: 0 2px 0 0;
-  border-style: solid;
-  border-color: #000080;
-  color: #297bde;
-}
+<template>
+  <section v-for="example in examples" :key="example.id" class="example">
+    <h4><strong>{{ example.keyword }} :</strong> {{ example.name }}</h4>
+    <div class="table-scroll">
+      <table class="examples-table">
+        <thead v-if="example.tableHeader"><tr>
+          <th v-for="(cell, index) in example.tableHeader.cells" :key="`${index}-${cell.value}`">{{ cell.value }}</th>
+        </tr></thead>
+        <tbody><tr v-for="row in example.tableBody" :key="row.id">
+          <td v-for="(cell, index) in row.cells" :key="`${row.id}-${index}`">{{ cell.value }}</td>
+        </tr></tbody>
+      </table>
+    </div>
+  </section>
+</template>
 
-td:first-child, th:first-child {
-  border-width: 0 2px;
-}
+<style scoped>
+.example { margin-top: 13px; }
+.example h4 { margin: 0 0 8px; color: #566862; font-size: 11px; font-weight: 500; }
+.example h4 strong { color: #176b58; font-weight: 700; }
+.table-scroll { max-width: 100%; overflow-x: auto; }
+.examples-table { width: max-content; min-width: 45%; border-collapse: separate; border-spacing: 0; border: 1px solid #dfe9e5; border-radius: 8px; color: #4c6059; font-size: 11px; overflow: hidden; }
+.examples-table th, .examples-table td { padding: 7px 11px; border-right: 1px solid #e3ebe7; border-bottom: 1px solid #e3ebe7; text-align: left; white-space: nowrap; }
+.examples-table th { background: #f2f7f4; color: #285d4f; font-weight: 600; }
+.examples-table tr:last-child td { border-bottom: 0; }
+.examples-table th:last-child, .examples-table td:last-child { border-right: 0; }
 </style>

package/src/components/CucumberSteps.vue

@@ -1,65 +1,39 @@
-<template>
-  <div class="step" v-for="step in steps" :key="step.id">
-
-    <div class="title">
-    <b>{{ step.keyword }}</b> {{ step.text }}
-    </div>
-    <pre v-if="step?.docString?.content">{{step?.docString?.content}}</pre>
-    <table v-if="step.dataTable">
-      <tbody>
-
-      <tr v-for="(row, rowIndex) in step.dataTable.rows" :key="row.id ?? rowIndex">
-        <td v-for="(cell, cellIndex) in row.cells" :key="cell.value ?? cellIndex">
-          {{cell.value}}
-        </td>
-      </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import * as Messages from '@cucumber/messages'
+import type * as Messages from '@cucumber/messages'
+
 defineProps({
   steps: {
-    type: Object as PropType<Array<Messages.Step>>,
-    required: true,
-  },
-});
+    type: Array as PropType<readonly Messages.Step[]>,
+    required: true
+  }
+})
 </script>
-<style scoped>
 
-.step {
-  padding-left: 20px;
-}
-
-table {
-  display: table;
-  border-collapse: separate;
-  box-sizing: border-box;
-  text-indent: initial;
-  unicode-bidi: isolate;
-  border-spacing: 2px;
-  border-color: gray;
-}
-
-tr {
-  display: table-row;
-  vertical-align: inherit;
-  unicode-bidi: isolate;
-  border-color: inherit;
-}
-
-td, th {
-  padding: .4em .6em;
-  border-width: 0 2px 0 0;
-  border-style: solid;
-  border-color: #000080;
-  color: #297bde;
-}
+<template>
+  <div class="steps">
+    <div v-for="step in steps" :key="step.id" class="step">
+      <div class="step__title"><strong>{{ step.keyword.trim() }}</strong><span>{{ step.text }}</span></div>
+      <pre v-if="step.docString?.content" class="doc-string">{{ step.docString.content }}</pre>
+      <div v-if="step.dataTable" class="table-scroll">
+        <table class="data-table"><tbody>
+          <tr v-for="(row, rowIndex) in step.dataTable.rows" :key="row.id || rowIndex">
+            <td v-for="(cell, cellIndex) in row.cells" :key="`${rowIndex}-${cellIndex}`">{{ cell.value }}</td>
+          </tr>
+        </tbody></table>
+      </div>
+    </div>
+  </div>
+</template>
 
-td:first-child, th:first-child {
-  border-width: 0 2px;
-}
+<style scoped>
+.steps { display: grid; gap: 7px; margin-top: 10px; }
+.step { position: relative; padding-left: 14px; border-left: 2px solid #e5efeb; }
+.step__title { display: flex; flex-wrap: wrap; gap: 5px; color: #53645f; font-size: 12px; line-height: 1.6; }
+.step__title strong { color: #176b58; font-weight: 600; }
+.doc-string { overflow-x: auto; margin: 7px 0 5px; padding: 10px 12px; border: 1px solid #e9eeec; border-radius: 8px; background: #f7f9f8; color: #435751; font-family: 'Consolas', 'Courier New', monospace; font-size: 11px; line-height: 1.6; }
+.table-scroll { max-width: 100%; overflow-x: auto; margin-top: 7px; }
+.data-table { border-collapse: collapse; color: #4c6059; font-size: 11px; }
+.data-table td { padding: 6px 10px; border: 1px solid #dfe9e5; white-space: nowrap; }
+.data-table tr:first-child td { background: #f4f8f6; color: #285d4f; font-weight: 600; }
 </style>

package/src/components/CucumberTags.vue

@@ -1,48 +1,24 @@
-<template>
-  <div class="tags" v-if="tags?.length > 0">
-    <Tag severity="info" :value="tag.name" rounded v-for="tag in tags" :key="tag.name"></Tag>
-    <br />
-  </div>
-</template>
-
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import * as Messages from '@cucumber/messages'
+import type * as Messages from '@cucumber/messages'
+
 defineProps({
   tags: {
-    type: Object as PropType<Array<Messages.Tag>>,
-    required: true,
-  },
-});
+    type: Array as PropType<readonly Messages.Tag[]>,
+    required: true
+  }
+})
 </script>
-<style scoped>
 
-.tags {
-  --p-tag-font-size: 12px;
-}
-
-table {
-  display: table;
-  border-collapse: separate;
-  box-sizing: border-box;
-  text-indent: initial;
-  unicode-bidi: isolate;
-  border-spacing: 2px;
-  border-color: gray;
-}
-
-tr {
-  display: table-row;
-  vertical-align: inherit;
-  unicode-bidi: isolate;
-  border-color: inherit;
-}
+<template>
+  <div v-if="tags.length" class="tags" aria-label="Étiquettes Gherkin">
+    <v-chip v-for="tag in tags" :key="tag.id" size="x-small" variant="tonal" color="primary" class="tag-chip">
+      {{ tag.name }}
+    </v-chip>
+  </div>
+</template>
 
-td, th {
-  padding: .4em .6em;
-  border-width: 0 2px;
-  border-style: solid;
-  border-color: #000080;
-  color: #297bde;
-}
+<style scoped>
+.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
+.tag-chip { height: 22px; font-family: 'Consolas', 'Courier New', monospace; font-size: 10px; font-weight: 500; }
 </style>

package/src/components/ProjectMenuItem.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { MenuEntry } from '@/models/menu-categorie'
+
+defineProps<{ item: MenuEntry }>()
+</script>
+
+<template>
+  <v-list-group v-if="item.items?.length" :value="item.label" class="project-menu-group">
+    <template #activator="{ props }">
+      <v-list-item v-bind="props" :title="item.label" />
+    </template>
+    <v-list class="nested-project-list" density="comfortable" nav>
+      <ProjectMenuItem v-for="child in item.items" :key="child.label" :item="child" />
+    </v-list>
+  </v-list-group>
+  <v-list-item
+    v-else
+    :to="item.url"
+    :title="item.label"
+    rounded="lg"
+    class="project-link"
+  >
+    <template #append><span class="list-arrow">→</span></template>
+  </v-list-item>
+</template>
+
+<style scoped>
+.project-link {
+  min-height: 43px;
+  color: #3984c6;
+  font-size: 13px;
+}
+
+.project-link :deep(.v-list-item-title) {
+  color: inherit;
+}
+
+.list-arrow {
+  color: #93a39e;
+  font-size: 15px;
+  transition: transform 0.18s ease;
+}
+
+.project-link:hover .list-arrow {
+  transform: translateX(3px);
+}
+
+.nested-project-list {
+  padding-inline-start: 12px;
+}
+</style>