From e2fb25309f13068c7a49de1b507f258013c72e11 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 12 Mar 2024 18:22:55 +0100
Subject: [PATCH] feat(Skeleton): new component

---
 playground/app.vue                            |  2 +-
 playground/pages/skeleton.vue                 | 10 ++++++++
 src/runtime/components/Skeleton.vue           | 25 +++++++++++++++++++
 src/theme/index.ts                            |  1 +
 src/theme/skeleton.ts                         |  3 +++
 test/components/Skeleton.spec.ts              | 13 ++++++++++
 .../__snapshots__/Skeleton.spec.ts.snap       |  5 ++++
 7 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 playground/pages/skeleton.vue
 create mode 100644 src/runtime/components/Skeleton.vue
 create mode 100644 src/theme/skeleton.ts
 create mode 100644 test/components/Skeleton.spec.ts
 create mode 100644 test/components/__snapshots__/Skeleton.spec.ts.snap

diff --git a/playground/app.vue b/playground/app.vue
index 98dc4a69..c7eae9ed 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -5,7 +5,7 @@ useHead({
   }
 })
 
-const components = ['avatar', 'badge', 'button', 'collapsible', 'kbd', 'popover', 'tooltip']
+const components = ['avatar', 'badge', 'button', 'collapsible', 'kbd', 'popover', 'skeleton', 'tooltip']
 </script>
 
 <template>
diff --git a/playground/pages/skeleton.vue b/playground/pages/skeleton.vue
new file mode 100644
index 00000000..6def9f72
--- /dev/null
+++ b/playground/pages/skeleton.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="flex items-center gap-4">
+    <USkeleton class="h-12 w-12 rounded-full" />
+
+    <div class="space-y-2">
+      <USkeleton class="h-4 w-[250px]" />
+      <USkeleton class="h-4 w-[200px]" />
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/runtime/components/Skeleton.vue b/src/runtime/components/Skeleton.vue
new file mode 100644
index 00000000..0129bf57
--- /dev/null
+++ b/src/runtime/components/Skeleton.vue
@@ -0,0 +1,25 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/skeleton'
+
+const appConfig = _appConfig as AppConfig & { ui: { skeleton: Partial<typeof theme> } }
+
+const skeleton = tv({ extend: tv(theme), ...(appConfig.ui?.skeleton || {}) })
+
+export interface SkeletonProps {
+  as?: string
+  class?: any
+}
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<SkeletonProps>(), { as: 'div' })
+</script>
+
+<template>
+  <component :is="as" :class="skeleton({ class: props.class })">
+    <slot />
+  </component>
+</template>
\ No newline at end of file
diff --git a/src/theme/index.ts b/src/theme/index.ts
index aaf01a38..06228640 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -7,4 +7,5 @@ export { default as container } from './container'
 export { default as icons } from './icons'
 export { default as kbd } from './kbd'
 export { default as popover } from './popover'
+export { default as skeleton } from './skeleton'
 export { default as tooltip } from './tooltip'
\ No newline at end of file
diff --git a/src/theme/skeleton.ts b/src/theme/skeleton.ts
new file mode 100644
index 00000000..ee0e1c21
--- /dev/null
+++ b/src/theme/skeleton.ts
@@ -0,0 +1,3 @@
+export default {
+  base: 'animate-pulse rounded-md bg-gray-50 dark:bg-gray-800'
+}
\ No newline at end of file
diff --git a/test/components/Skeleton.spec.ts b/test/components/Skeleton.spec.ts
new file mode 100644
index 00000000..91adcf45
--- /dev/null
+++ b/test/components/Skeleton.spec.ts
@@ -0,0 +1,13 @@
+import { describe, it, expect } from 'vitest'
+import Skeleton, { type SkeletonProps } from '../../src/runtime/components/Skeleton.vue'
+import ComponentRender from '../component-render'
+
+describe('Skeleton', () => {
+  it.each([
+    ['basic case', {}],
+    ['with class', { props: { class: 'rounded-full size-12' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: SkeletonProps, slots?: any }) => {
+    const html = await ComponentRender(nameOrHtml, options, Skeleton)
+    expect(html).toMatchSnapshot()
+  })
+})
\ No newline at end of file
diff --git a/test/components/__snapshots__/Skeleton.spec.ts.snap b/test/components/__snapshots__/Skeleton.spec.ts.snap
new file mode 100644
index 00000000..2014e5b8
--- /dev/null
+++ b/test/components/__snapshots__/Skeleton.spec.ts.snap
@@ -0,0 +1,5 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Skeleton > renders basic case correctly 1`] = `"<div class="animate-pulse rounded-md bg-gray-50 dark:bg-gray-800"></div>"`;
+
+exports[`Skeleton > renders with class correctly 1`] = `"<div class="animate-pulse bg-gray-50 dark:bg-gray-800 rounded-full size-12"></div>"`;