feat(stage-ui): added Progress component

apps/stage-tamagotchi/src/components/Widgets/ResourceStatusIsland/LoadingProgress.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ProgressInfo } from '../../../stores/resources'
 
+import { Progress } from '@proj-airi/stage-ui'
 import { computed } from 'vue'
 
 import WindowRouterLink from '../../Tauri/WindowRouterLink.vue'
@@ -67,23 +68,10 @@ const totalProgress = computed(() => {
           </div>
           <div>{{ file.value.progress.toFixed(2) }}%</div>
         </div>
-        <div relative overflow-hidden rounded-md>
-          <div
-            bg="primary-300 dark:primary-300/50"
-            absolute h-4 min-w-2 rounded-md will-change-width
-            :style="{ width: `${file.value.progress}%` }"
-            transition="width duration-500 ease-in-out"
-          >
-            <div
-              v-if="file.value.progress < 100"
-              absolute inset-0 origin-left rounded-md bg-white
-              class="progress-shine-animation"
-            />
-          </div>
-          <div
-            bg="neutral-100 dark:neutral-900" h-4 w-full rounded-md
-          />
-        </div>
+        <Progress
+          :progress="file.value.progress"
+          bar-class="bg-primary-300 dark:bg-primary-300/50"
+        />
       </div>
     </div>
   </div>

packages/stage-ui/src/components/Misc/Progress.story.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import Progress from './Progress.vue'
+</script>
+
+<template>
+  <Story
+    title="Progress"
+    group="misc"
+    :layout="{ type: 'grid', width: '100%' }"
+  >
+    <Variant
+      id="basic"
+      title="Basic Progress"
+    >
+      <Progress :progress="50" />
+    </Variant>
+
+    <Variant
+      id="all-progresses"
+      title="All Progresses"
+    >
+      <div flex flex-col gap-2>
+        <Progress :progress="0" />
+        <Progress :progress="10" />
+        <Progress :progress="20" />
+        <Progress :progress="30" />
+        <Progress :progress="40" />
+        <Progress :progress="50" />
+        <Progress :progress="60" />
+        <Progress :progress="70" />
+        <Progress :progress="80" />
+        <Progress :progress="90" />
+        <Progress :progress="100" />
+      </div>
+    </Variant>
+  </Story>
+</template>

packages/stage-ui/src/components/Misc/Progress.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+defineProps<{
+  progress: number
+  barClass?: string
+}>()
+</script>
+
+<template>
+  <div relative overflow-hidden rounded-md>
+    <div
+      :class="[barClass ? barClass : 'bg-primary-300 dark:bg-primary-300/50']"
+      absolute h-4 min-w-2 rounded-md will-change-width
+      :style="{ width: `${progress}%` }"
+      transition="width duration-500 ease-in-out"
+    >
+      <div
+        v-if="progress < 100"
+        absolute inset-0 origin-left rounded-md bg-white
+        class="progress-shine-animation"
+      />
+    </div>
+    <div
+      bg="neutral-100 dark:neutral-900" h-4 w-full rounded-md
+    />
+  </div>
+</template>
+
+<style scoped>
+.progress-shine-animation {
+  animation: progress-shine 2s cubic-bezier(0.35, 0.08, 0.04, 0.99) infinite;
+  will-change: transform, opacity;
+}
+
+@keyframes progress-shine {
+  0% {
+    opacity: 0.4;
+    transform: scale(0, 1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+}
+</style>

packages/stage-ui/src/components/Misc/index.ts

@@ -1,4 +1,5 @@
 export { default as BidirectionalTransition } from './BidirectionalTransition.vue'
 export { default as Collapsable } from './Collapsable.vue'
+export { default as Progress } from './Progress.vue'
 export { default as Skeleton } from './Skeleton.vue'
 export * from './Steppers'