feat: story stat counter (#613)

Co-authored-by: Sorin Gitlan <[email protected]>
Co-authored-by: Guillaume Chau <[email protected]>

packages/histoire-app/src/app/components/HomeView.vue

@@ -2,16 +2,59 @@
 import { computed } from 'vue'
 import { histoireConfig, customLogos } from '../util/config'
 import HistoireLogo from '../assets/histoire.svg'
+import { useStoryStore } from '../stores/story'
+import HomeCounter from './app/HomeCounter.vue'
 
 const logoUrl = computed(() => histoireConfig.theme?.logo?.square ? customLogos.square : HistoireLogo)
+const storyStore = useStoryStore()
+
+const stats = computed(() => {
+  let storyCount = 0
+  let variantCount = 0
+  let docsCount = 0;
+
+  (storyStore.stories || []).forEach(story => {
+    if (story.docsOnly) {
+      docsCount++
+    } else {
+      storyCount++
+      if (story.variants) {
+        variantCount += story.variants.length
+      }
+    }
+  })
+
+  return {
+    storyCount,
+    variantCount,
+    docsCount,
+  }
+})
 </script>
 
 <template>
-  <div class="histoire-home-view htw-flex htw-items-center htw-justify-center htw-h-full">
+  <div class="histoire-home-view htw-flex md:htw-flex-col htw-gap-12 htw-items-center htw-justify-center htw-h-full">
     <img
       :src="logoUrl"
       alt="Logo"
-      class="htw-w-64 htw-h-64 htw-opacity-25"
+      class="htw-w-64 htw-h-64 htw-opacity-25 htw-mb-8 htw-hidden md:htw-block"
     >
+    <div class="htw-flex !md:htw-flex-col htw-flex-wrap htw-justify-evenly htw-gap-2 htw-px-4 htw-py-2 htw-bg-gray-100 dark:htw-bg-gray-750 htw-rounded htw-border htw-border-gray-500/30">
+      <HomeCounter
+        title="Stories"
+        icon="carbon:cube"
+        :count="stats.storyCount"
+      />
+      <HomeCounter
+        title="Variants"
+        icon="carbon:cube-view"
+        :count="stats.variantCount"
+      />
+      <HomeCounter
+        title="Documents"
+        icon="carbon:document-blank"
+        :count="stats.docsCount"
+      />
+    </div>
   </div>
 </template>

packages/histoire-app/src/app/components/app/HomeCounter.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref, toRefs } from 'vue'
+import { useTransition, syncRefs } from '@vueuse/core'
+import { Icon } from '@iconify/vue'
+
+const props = defineProps({
+  icon: {
+    type: String,
+    default: 'carbon:cube',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  count: {
+    type: Number,
+    default: 0,
+  },
+})
+
+const { count } = toRefs(props)
+const delayedCount = ref(0)
+
+const animatedCount = useTransition(delayedCount, { delay: 100, duration: 700 })
+
+syncRefs(count, delayedCount)
+</script>
+
+<template>
+  <div class="htw-p-2 htw-flex htw-items-center htw-gap-x-2">
+    <Icon
+      :icon="props.icon"
+      class="htw-text-2xl htw-text-gray-700 dark:htw-text-gray-300 htw-flex-none"
+    />
+    <div class="htw-flex htw-flex-col htw-leading-none">
+      <span
+        class="htw-text-primary-500 htw-min-w-[80px] htw-font-bold"
+      >
+        {{ animatedCount.toFixed() }}
+      </span>
+      <span
+        class="htw-text-sm htw-text-gray-900 dark:htw-text-gray-100"
+      >
+        {{ title }}
+      </span>
+    </div>
+  </div>
+</template>