From 7a417fbae18073855d94ecc9ba44c96b2a541207 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Tue, 18 Mar 2025 12:57:56 +0800
Subject: [PATCH] feat(stage-ui): skeleton component

---
 packages/stage-ui/histoire.config.ts          |   4 +
 .../src/components/Misc/Skeleton.story.vue    | 135 ++++++++++++++++++
 .../stage-ui/src/components/Misc/Skeleton.vue |  72 ++++++++++
 .../stage-ui/src/components/Misc/index.ts     |   1 +
 packages/stage-ui/src/components/index.ts     |   1 +
 5 files changed, 213 insertions(+)
 create mode 100644 packages/stage-ui/src/components/Misc/Skeleton.story.vue
 create mode 100644 packages/stage-ui/src/components/Misc/Skeleton.vue
 create mode 100644 packages/stage-ui/src/components/Misc/index.ts

diff --git a/packages/stage-ui/histoire.config.ts b/packages/stage-ui/histoire.config.ts
index 30e38e523..6fded612a 100644
--- a/packages/stage-ui/histoire.config.ts
+++ b/packages/stage-ui/histoire.config.ts
@@ -38,6 +38,10 @@ export default defineConfig({
         id: 'providers',
         title: 'Providers',
       },
+      {
+        id: 'misc',
+        title: 'Misc',
+      },
       {
         id: 'physics',
         title: 'Physics',
diff --git a/packages/stage-ui/src/components/Misc/Skeleton.story.vue b/packages/stage-ui/src/components/Misc/Skeleton.story.vue
new file mode 100644
index 000000000..f07f2809d
--- /dev/null
+++ b/packages/stage-ui/src/components/Misc/Skeleton.story.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import Skeleton from './Skeleton.vue'
+</script>
+
+<template>
+  <Story
+    title="Skeleton"
+    group="misc"
+    :layout="{ type: 'grid', width: 600 }"
+  >
+    <template #controls>
+      <ThemeColorsHueControl />
+    </template>
+
+    <Variant
+      id="basic"
+      title="Basic Skeleton"
+    >
+      <div class="space-y-4">
+        <Skeleton class="h-6 w-full rounded-lg" />
+        <Skeleton class="h-6 w-3/4 rounded-lg" />
+        <Skeleton class="h-6 w-1/2 rounded-lg" />
+      </div>
+    </Variant>
+
+    <Variant
+      id="pulse-animation"
+      title="Pulse Animation"
+    >
+      <div class="space-y-4">
+        <Skeleton animation="pulse" class="h-6 w-full rounded-lg" />
+        <Skeleton animation="pulse" class="h-6 w-3/4 rounded-lg" />
+        <Skeleton animation="pulse" class="h-6 w-1/2 rounded-lg" />
+      </div>
+    </Variant>
+
+    <Variant
+      id="wave-animation"
+      title="Wave Animation"
+    >
+      <div class="space-y-4">
+        <Skeleton animation="wave" class="h-6 w-full rounded-lg" />
+        <Skeleton animation="wave" class="h-6 w-3/4 rounded-lg" />
+        <Skeleton animation="wave" class="h-6 w-1/2 rounded-lg" />
+      </div>
+    </Variant>
+
+    <Variant
+      id="no-animation"
+      title="No Animation"
+    >
+      <div class="space-y-4">
+        <Skeleton animation="none" class="h-6 w-full rounded-lg" />
+        <Skeleton animation="none" class="h-6 w-3/4 rounded-lg" />
+        <Skeleton animation="none" class="h-6 w-1/2 rounded-lg" />
+      </div>
+    </Variant>
+
+    <Variant
+      id="card-loading"
+      title="Card Loading State"
+    >
+      <div class="border border-neutral-200 rounded-xl p-4 space-y-4 dark:border-neutral-800">
+        <Skeleton class="h-40 w-full rounded-lg" />
+        <Skeleton class="h-5 w-3/4 rounded-md" />
+        <Skeleton class="h-16 w-full rounded-md" />
+        <div class="flex gap-2">
+          <Skeleton class="h-8 w-16 rounded-md" />
+          <Skeleton class="h-8 w-16 rounded-md" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant
+      id="profile-loading"
+      title="Profile Loading State"
+    >
+      <div class="flex items-center gap-4">
+        <Skeleton class="h-16 w-16 rounded-full" />
+        <div class="flex-1 space-y-2">
+          <Skeleton class="h-5 w-1/3 rounded-md" />
+          <Skeleton class="h-4 w-2/3 rounded-md" />
+          <Skeleton class="h-4 w-1/4 rounded-md" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant
+      id="form-loading"
+      title="Form Loading State"
+    >
+      <div class="space-y-6">
+        <div class="space-y-1">
+          <Skeleton class="h-5 w-24 rounded-md" />
+          <Skeleton class="h-4 w-32 rounded-md" />
+          <Skeleton class="mt-2 h-10 w-full rounded-lg" />
+        </div>
+
+        <div class="space-y-1">
+          <Skeleton class="h-5 w-32 rounded-md" />
+          <Skeleton class="h-4 w-40 rounded-md" />
+          <Skeleton class="mt-2 h-10 w-full rounded-lg" />
+        </div>
+
+        <div class="space-y-1">
+          <Skeleton class="h-5 w-36 rounded-md" />
+          <Skeleton class="h-4 w-28 rounded-md" />
+          <Skeleton class="mt-2 h-24 w-full rounded-lg" />
+        </div>
+
+        <Skeleton class="h-10 w-24 rounded-md" />
+      </div>
+    </Variant>
+
+    <Variant
+      id="table-loading"
+      title="Table Loading State"
+    >
+      <div class="overflow-hidden border border-neutral-200 rounded-lg dark:border-neutral-800">
+        <div class="flex border-b border-neutral-200 bg-neutral-100 p-4 dark:border-neutral-800 dark:bg-neutral-900">
+          <Skeleton class="h-6 w-1/4 rounded-md" />
+          <Skeleton class="ml-4 h-6 w-1/4 rounded-md" />
+          <Skeleton class="ml-4 h-6 w-1/4 rounded-md" />
+          <Skeleton class="ml-4 h-6 w-1/4 rounded-md" />
+        </div>
+        <div v-for="i in 5" :key="i" class="flex border-b border-neutral-200 p-4 dark:border-neutral-800">
+          <Skeleton class="h-6 w-1/4 rounded-md" />
+          <Skeleton class="ml-4 h-6 w-1/4 rounded-md" />
+          <Skeleton class="ml-4 h-6 w-1/4 rounded-md" />
+          <Skeleton class="ml-4 h-6 w-1/4 rounded-md" />
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/stage-ui/src/components/Misc/Skeleton.vue b/packages/stage-ui/src/components/Misc/Skeleton.vue
new file mode 100644
index 000000000..1cd95e63f
--- /dev/null
+++ b/packages/stage-ui/src/components/Misc/Skeleton.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  animation?: 'pulse' | 'wave' | 'none'
+}>(), {
+  animation: 'pulse',
+})
+</script>
+
+<template>
+  <div
+    class="skeleton"
+    :class="props.animation !== 'none' ? `skeleton-${props.animation}` : ''"
+    bg="neutral-200 dark:neutral-800"
+    overflow="hidden"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.skeleton {
+  position: relative;
+  transition: all 0.2s ease-in-out;
+}
+
+/* Pulse animation */
+.skeleton-pulse {
+  animation: skeleton-pulse 1.5s ease-in-out 0.5s infinite;
+}
+
+@keyframes skeleton-pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/* Wave animation */
+.skeleton-wave::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  animation: skeleton-wave 1.5s infinite;
+  border-radius: inherit;
+}
+
+.dark .skeleton-wave::after {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+}
+
+@keyframes skeleton-wave {
+  0% {
+    transform: translateX(-100%);
+  }
+  60% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+</style>
diff --git a/packages/stage-ui/src/components/Misc/index.ts b/packages/stage-ui/src/components/Misc/index.ts
new file mode 100644
index 000000000..be21fad38
--- /dev/null
+++ b/packages/stage-ui/src/components/Misc/index.ts
@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton.vue'
diff --git a/packages/stage-ui/src/components/index.ts b/packages/stage-ui/src/components/index.ts
index eea69ef77..432a864eb 100644
--- a/packages/stage-ui/src/components/index.ts
+++ b/packages/stage-ui/src/components/index.ts
@@ -6,6 +6,7 @@ export * from './Graphics'
 export { default as Live2DCanvas } from './Live2D/Canvas.vue'
 export { default as Live2DModel } from './Live2D/Model.vue'
 export * from './Menu'
+export * from './Misc'
 export * from './Physics'
 export * from './Providers'
 export { default as SceneLive2D } from './Scenes/Live2D.vue'