update story for stat-board

src/entities/profiler/ui/call-stat-board/call-stat-board.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { defineProps } from 'vue'
-import { StatBoard } from '@/shared/ui'
+import { StatBoard, StatBoardSize } from '@/shared/ui'
 import type { ProfilerEdge } from '../../types'
 
 type Props = {
@@ -16,7 +16,7 @@ defineProps<Props>()
       {{ edge.callee }}
     </h4>
 
-    <StatBoard class="call-stat-board__body" :cost="edge.cost" size="sm" />
+    <StatBoard class="call-stat-board__body" :cost="edge.cost" :size="StatBoardSize.Small" />
   </div>
 </template>
 

src/shared/ui/stat-board/index.ts

@@ -1,4 +1,5 @@
 import StatBoard from "./stat-board.vue";
+export * from "./types";
 
 export {
   StatBoard

src/shared/ui/stat-board/stat-board.stories.ts

@@ -1,9 +1,16 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type {Meta, StoryObj} from "@storybook/vue3";
 import StatBoard from "./stat-board.vue";
+import {StatBoardSize} from "./types";
 
 export default {
   title: "Shared/StatBoard",
   component: StatBoard,
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: StatBoardSize,
+    },
+  },
 } as Meta<typeof StatBoard>;
 
 
@@ -31,3 +38,16 @@ export const LargePeaks: StoryObj<typeof StatBoard> = {
     },
   }
 };
+
+export const SmallSize: StoryObj<typeof StatBoard> = {
+  args: {
+    cost: {
+      ct: 1,
+      wt: 206270,
+      cpu: 44750,
+      mu: 3112176,
+      pmu: 3001416
+    },
+    size: StatBoardSize.Small
+  }
+};

src/shared/ui/stat-board/stat-board.vue

@@ -1,17 +1,17 @@
 <script lang="ts" setup>
 import { computed, defineProps } from 'vue'
-import type { ProfilerCost } from '@/entities/profiler/types'
 import { useFormats } from '../../lib/formats'
+import { StatBoardSize, type StatBoardCost } from './types'
 
 const { formatDuration, formatFileSize } = useFormats()
 
 type Props = {
-  cost: Partial<ProfilerCost>
-  size?: 'sm' | 'md' | 'lg'
+  cost: StatBoardCost
+  size?: StatBoardSize
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  size: 'md'
+  size: StatBoardSize.Medium
 })
 
 const statItems = computed(() => [
@@ -44,7 +44,12 @@ const statItems = computed(() => [
 </script>
 
 <template>
-  <section class="stat-board" :class="[`size-${size}`]">
+  <section
+    class="stat-board"
+    :class="{
+      'stat-board--small': size === StatBoardSize.Small
+    }"
+  >
     <div v-for="item in statItems" :key="item.title" class="stat-board__item">
       <h4 class="stat-board__item-name">
         {{ item.title }}
@@ -68,59 +73,45 @@ const statItems = computed(() => [
   @apply flex flex-col sm:flex-row justify-between items-start;
   @apply divide-y sm:divide-y-0 sm:divide-x divide-gray-300 dark:divide-gray-500;
   @apply bg-gray-200 dark:bg-gray-800;
+  @apply p-0 sm:p-4 lg:p-6;
+}
+
+.stat-board--small {
+  @apply p-0 border-t border-t-gray-300 dark:border-t-gray-500;
 }
 
 .stat-board__item {
   @apply flex flex-row justify-between sm:flex-col sm:justify-start flex-auto;
   @apply w-full sm:w-auto;
-}
-
-.stat-board__item-name {
-  @apply text-gray-600 dark:text-gray-300 font-bold uppercase truncate;
-}
-
-.stat-board__item-name-detail,
-.stat-board__item-value {
-  @apply truncate;
-}
-
-.stat-board.size-md {
-  @apply p-0 sm:p-4 lg:p-6;
-
-  .stat-board__item-name-detail {
-    @apply text-2xs ml-1;
-  }
+  @apply py-2 px-2 sm:py-5 sm:px-5;
 
-  .stat-board__item {
-    @apply py-2 px-2 sm:py-5 sm:px-5;
+  .stat-board--small & {
+    @apply px-4 py-2 sm:py-2 sm:px-2;
   }
+}
 
-  .stat-board__item-name {
-    @apply mb-0 sm:mb-1 text-2xs;
-  }
+.stat-board__item-name {
+  @apply text-2xs text-gray-600 dark:text-gray-300 font-bold uppercase truncate mb-0 sm:mb-1;
 
-  .stat-board__item-value {
-    @apply text-2xs sm:text-xs md:text-base;
+  .stat-board--small & {
+    @apply sm:mb-0;
   }
 }
 
-.stat-board.size-sm {
-  @apply p-0 border-t border-t-gray-300 dark:border-t-gray-500;
+.stat-board__item-name-detail {
+  @apply truncate ml-1 text-2xs;
 
-  .stat-board__item-name-detail {
-    @apply text-2xs;
-  }
-
-  .stat-board__item {
-    @apply px-4 py-2;
+  .stat-board--small & {
+    @apply ml-0;
   }
+}
 
-  .stat-board__item-name {
-    @apply text-2xs;
-  }
+.stat-board__item-value {
+  @apply truncate;
+  @apply text-2xs sm:text-xs md:text-base;
 
-  .stat-board__item-value {
-    @apply text-xs;
+  .stat-board--small & {
+    @apply md:text-xs;
   }
 }
 </style>

src/shared/ui/stat-board/types.ts

@@ -0,0 +1,16 @@
+export type StatBoardCost = {
+  ct: number;
+  cpu: number;
+  p_cpu?: number;
+  wt: number;
+  p_wt?: number;
+  mu: number;
+  p_mu?: number;
+  pmu: number;
+  p_pmu?: number;
+}
+
+export enum StatBoardSize {
+  Small= 'sm',
+  Medium = 'md',
+}