95 provide a first page template

apps/vue-app/src/assets/main.css

@@ -3,7 +3,6 @@
 #app {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
   font-weight: normal;
 }
 
@@ -26,10 +25,4 @@ a,
     display: flex;
     place-items: center;
   }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
 }

apps/vue-app/src/components/pages/DashboardPage.vue

@@ -1,11 +1,11 @@
 <script setup>
 import { onMounted, reactive } from 'vue';
 
-import { AbcdeScore } from '@creedengo/vue-ui'
 import SonarAPI from '@creedengo/sonar-services'
 import core from '@creedengo/core-services';
+import { DashboardPageTemplate } from '@creedengo/vue-ui';
 
-const { api, calculateProjectScore } = core;
+const { api, calculateProjectScore, getScoreTexts } = core;
 
 api.init(SonarAPI)
 const props = defineProps({
@@ -23,7 +23,9 @@ const state = reactive({ score: '', error: null });
 
 onMounted(async () => {
   try {
-    state.score = await calculateProjectScore({ ...props });
+    const value = await calculateProjectScore({ ...props });
+    const { label, description, tips } = getScoreTexts(value);
+    state.score = { value, label, description, tips };
   } catch (error) {
     state.score = 'N/A';
     globalThis.console.error('Error fetching score:', error);
@@ -45,7 +47,7 @@ onMounted(async () => {
         <i class="fa fa-exclamation-triangle" /> Score not available - {{ state.error }}
       </span>
       <span v-else>
-        <AbcdeScore :value="state.score" />
+        <DashboardPageTemplate :score="state.score" />
       </span>
     </div>
   </main>

shared/core-services/src/score.service.js

@@ -5,6 +5,34 @@
 
 import api from './adapter.js';
 
+const scoreTexts = {
+    A: { 
+        label: "Your app is fully optimized, congratulations!",
+        description: "Don't forget to check it again if you update your app.",
+        tips: "100 % optimized, congrats!"
+    },
+    B: { 
+        label: "Your app is nearly optimized.",
+        description: "Well done! You can continue by fixing the recommended rule on the right side. This is the one that currently has the highest impact on your app.",
+        tips: "You have between 1 and 9 minor severities."
+    },
+    C: { 
+        label: "Your app is not fully optimized.",
+        description: "Keep going! You can continue by fixing the recommended rule on the right side. This is the one that currently has the highest impact on your app.", 
+        tips: "You have between 10 and 19 minor severities or you have 1 or many major severity."
+    },
+    D: { 
+        label: "Many elements of your application can be optimized.",
+        description: "Don't worry! You can start by fixing the recommended rule on the right side. This is the one that currently has the highest impact on your app.", 
+        tips: "You have more than 20 minor severities or more than 10 major severities or 1 or many critical severities."
+    },
+    E: {
+        label: "Several elements of your application can be optimized.",
+        description: "Don't worry! You can start by fixing the recommended rule on the right side. This is the one that currently has the highest impact on your app.", 
+        tips: "You have 1 or more than 1 blocker severities."
+    }
+};
+
 /**
  * Calculate an ABCDE score from the sustainability issues related to the project size.
  * @param {Object} config
@@ -35,3 +63,12 @@ export async function calculateProjectScore(config) {
     }
     return 'A';
 }
+
+/**
+ * Returns the texts corresponding to the score.
+ * @param {string} score the value of the project's score.
+ * @returns {Object} texts corresponding to the project score.
+ */
+export function getScoreTexts(score) {
+  return scoreTexts[score]
+}

shared/vue-ui/src/index.js

@@ -19,6 +19,8 @@ import SettingsForm from './molecules/SettingsForm/SettingsForm.vue'
 // Organisms
 import ScoreBlock from './organisms/ScoreBlock/ScoreBlock.vue'
 import TagCard from './organisms/TagCard/TagCard.vue'
+// Page Templates
+import DashboardPageTemplate from './page-templates/DashboardPageTemplate.vue'
 
 // Design Tokens
 export { IconArrowRight, IconBug, IconCpu, IconDisk, IconMaintenance, IconNetwork, IconRam }
@@ -28,3 +30,5 @@ export { ImpactTag }
 export { AbcdeScore, BulletCriticities, PieChart, RuleIconTag, RuleCriticities, SettingsForm, TooltipBox }
 // Organisms
 export { ScoreBlock, TagCard }
+// Page Templates
+export { DashboardPageTemplate }

shared/vue-ui/src/organisms/ScoreBlock/ScoreBlock.vue

@@ -62,11 +62,15 @@ const projectLink = computed(() => {
 </template>
 
 <style scoped>
+h2 {
+  margin-top: 30px;
+}
 .rate-description {
   padding-top: 20px;
 }
 .tooltip-calc {
   margin-top: 20px;
+  margin-bottom: 1.25rem;
   text-decoration: underline;
   display: inline-block;
 }

shared/vue-ui/src/page-templates/DashboardPageTemplate.stories.js

@@ -0,0 +1,155 @@
+import DashboardPageTemplate from "./DashboardPageTemplate.vue";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+export default {
+ title: 'Page Templates/DashboardPageTemplate',
+ component: DashboardPageTemplate,
+ tags: ['autodocs'],
+ argTypes: {
+   score: {
+     control: {
+       type: 'object'
+     },
+     required: true
+   },
+   rule: {
+     control: {
+       type: 'object'
+     },
+     required: true
+   },
+   metricTags: {
+     control: {
+       type: 'array'
+     },
+     required: true
+   }
+  }
+};
+
+const score = {
+  value: "C",
+      label: "Your app is not fully optimized.",
+      description: "Keep going! You can continue by fixing the recommended rule on the right side. This is the one that currently has the highest impact on your app.", 
+      tips: "You have between 10 and 19 minor severities or you have 1 or many major severity.",
+      projectKey: 'FOO',
+      branch: 'main',
+      minorSeverities: 15,
+      majorSeverities: 3,
+      criticalSeverities: 0
+}
+
+const priorityRule = {
+  percentage: 25,
+  ruleKey: "typescript:S1774",
+  ruleName: "Avoid Using Ternary Operator",
+  ruleHtmlDesc: `
+      Ternary expressions, while concise, can often lead to code that is difficult 
+      to read and understand, especially when they are nested or complex. 
+      Prioritizing readability fosters maintainability and reduces the likelihood of bugs.
+      Therefore, they should be removed in favor of more explicit control structures,
+      such as if/else statements, to improve the clarity and readability of the code.
+  `,
+  ruleImpact: "High",
+  ruleMetricTags: ["Maintenance"]
+}
+
+const cpuTag = {
+  name: "CPU",
+  nbRules: 19,
+  optimizedRules: 12, 
+  minorIssues: 40,
+  majorIssues: 19,
+  criticalIssues: 0,
+  projectKey: 'foo',
+  branch: 'main'
+}
+
+const ramTag = {
+  name: "RAM",
+  nbRules: 17,
+  optimizedRules: 11, 
+  minorIssues: 40,
+  majorIssues: 17,
+  criticalIssues: 0,
+  projectKey: 'foo',
+  branch: 'main'
+}
+
+const networkTag = {
+  name: "Network",
+  nbRules: 1,
+  optimizedRules: 1,
+  minorIssues: 0,
+  majorIssues: 0,
+  criticalIssues: 0,
+  projectKey: 'foo',
+  branch: 'main'
+}
+
+const diskTag = {
+  name: "Disk",
+  nbRules: 1,
+  optimizedRules: 1, 
+  minorIssues: 0,
+  majorIssues: 0,
+  criticalIssues: 0,
+  projectKey: 'foo',
+  branch: 'main'
+}
+
+export const CompleteDashboard = {
+  args: {
+    score,
+    priorityRule,
+    metricTags: [
+      cpuTag,
+      ramTag,
+      networkTag,
+      diskTag
+    ]
+  }
+};
+
+export const WithoutNetworkAndDiskTags = {
+  args: {
+    score,
+    priorityRule,
+    metricTags: [
+      cpuTag,
+      ramTag
+    ]
+  }
+};
+
+export const WithoutScore = {
+  args: {
+    priorityRule,
+    metricTags: [
+      cpuTag,
+      ramTag,
+      networkTag,
+      diskTag
+    ]
+  }
+};
+
+export const WithoutPriorityRule = {
+  args: {
+    score,
+    metricTags: [
+      cpuTag,
+      ramTag,
+      networkTag,
+      diskTag
+    ]
+  }
+};
+
+export const WithoutMetricTags = {
+  args: {
+    score,
+    priorityRule,
+    metricTags: []
+  }
+};