feat: update custom playground

playground-custom/components/CustomButton.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { tv } from 'tailwind-variants'
+
+const tvButton = tv({
+  slots: {
+    base: 'rounded-lg border cursor-pointer transition-colors duration-100',
+    text: 'font-medium tracking-tight',
+  },
+  variants: {
+    color: {
+      primary: 'bg-blue-100 text-blue-600 border-blue-200 hover:bg-blue-200 hover:text-blue-700',
+      secondary: 'bg-gray-100 text-gray-600 border-gray-200 hover:bg-gray-200 hover:text-gray-700',
+      success: 'bg-green-100 text-green-600 border-green-200 hover:bg-green-200 hover:text-green-700',
+    },
+    size: {
+      xs: 'py-0.5 px-1 text-xs',
+      sm: 'py-1 px-2 text-sm',
+      md: 'py-1.5 px-4 text-md',
+      lg: 'py-2 px-6 text-lg',
+    },
+  },
+  defaultVariants: {
+    color: 'primary',
+    size: 'md',
+  },
+})
+
+const props = defineProps<{
+  color?: 'primary' | 'secondary' | 'success'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+  slots?: {
+    base?: string
+    text?: string
+  }
+}>()
+
+const { base, text } = tvButton({ color: props.color, size: props.size })
+</script>
+
+<template>
+  <button :class="base({ class: props.slots?.base })">
+    <span :class="text({ class: props.slots?.text })">
+      Click me
+    </span>
+  </button>
+</template>

playground-custom/components/ReallyLongStory.story.vue

@@ -0,0 +1,76 @@
+<template>
+  <Story title="Really Long Story">
+    <Variant title="primary / xs">
+      <CustomButton
+        color="primary"
+        size="xs"
+      />
+    </Variant>
+    <Variant title="primary / sm">
+      <CustomButton
+        color="primary"
+        size="sm"
+      />
+    </Variant>
+    <Variant title="primary / md">
+      <CustomButton
+        color="primary"
+        size="md"
+      />
+    </Variant>
+    <Variant title="primary / lg">
+      <CustomButton
+        color="primary"
+        size="lg"
+      />
+    </Variant>
+    <Variant title="secondary / xs">
+      <CustomButton
+        color="secondary"
+        size="xs"
+      />
+    </Variant>
+    <Variant title="secondary / sm">
+      <CustomButton
+        color="secondary"
+        size="sm"
+      />
+    </Variant>
+    <Variant title="secondary / md">
+      <CustomButton
+        color="secondary"
+        size="md"
+      />
+    </Variant>
+    <Variant title="secondary / lg">
+      <CustomButton
+        color="secondary"
+        size="lg"
+      />
+    </Variant>
+    <Variant title="success / xs">
+      <CustomButton
+        color="success"
+        size="xs"
+      />
+    </Variant>
+    <Variant title="success / sm">
+      <CustomButton
+        color="success"
+        size="sm"
+      />
+    </Variant>
+    <Variant title="success / md">
+      <CustomButton
+        color="success"
+        size="md"
+      />
+    </Variant>
+    <Variant title="success / lg">
+      <CustomButton
+        color="success"
+        size="lg"
+      />
+    </Variant>
+  </Story>
+</template>

playground-custom/layouts/CustomViewer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-const { stories: storyList } = useStory()
-
-const stories = Object.values(storyList)
+const bedtime = useStory()
+const stories = Object.values(bedtime.stories)
+const route = useRoute()
 
 const searchMenuItem = {
   label: 'Search',
@@ -11,21 +11,16 @@ const searchMenuItem = {
   },
 }
 
-const navigationMenuItems = [searchMenuItem, ...stories
-  .map(s => ({
-    label: s.pascalName,
-    icon: 'i-lucide-file-text',
-    to: `/custom/${s.kebabName}`,
-    // children: s.variants
-    //   ? Object.keys(s.variants).map(variant => ({
-    //       label: variant,
-    //       onSelect: () => {
-
-    //       },
-    //     }))
-    //   : [],
-  })),
-]
+const navigationMenuItems = ref([
+  searchMenuItem,
+  ...bedtime
+    .getStoryMenuItems()
+    .map(story => ({
+      label: story.title,
+      icon: 'i-lucide-file-text',
+      to: `/custom/${story.slug}`,
+    })),
+])
 
 const commandPaletteItems = stories
   .map(s => ({
@@ -50,24 +45,63 @@ const groups = ref([
 defineShortcuts({
   meta_k: () => commandPaletteOpen.value = true,
 })
+
+const currentStory = computed(() => {
+  return stories.find(s => s.kebabName === route.path.split('/').pop())
+})
+
+const currentStoryVariants = computed(() => {
+  return Object.values(currentStory.value?.variants || {})
+})
+
+// Handle hash changes for smooth scrolling to variants
+watch(() => route.hash, (newHash) => {
+  if (!newHash) return
+
+  nextTick(() => {
+    const el = document.querySelector(newHash)
+    if (el) {
+      el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }
+  })
+}, { immediate: true })
 </script>
 
 <template>
-  <div class="flex">
-    <div class="p-2">
-      <UNavigationMenu
-        orientation="vertical"
-        :items="navigationMenuItems"
-        class="data-[orientation=vertical]:w-48"
-      />
+  <div class="flex h-screen overflow-hidden">
+    <div class="w-48 h-full border-r border-gray-200 bg-gray-50 dark:bg-gray-900">
+      <div class="p-2 h-full overflow-y-auto">
+        <UNavigationMenu
+          orientation="vertical"
+          :items="navigationMenuItems"
+          class="data-[orientation=vertical]:w-full"
+        />
+      </div>
     </div>
 
     <div
-      class="p-2 flex-grow"
+      class="flex-1 h-full overflow-y-auto scroll-smooth"
       data-bedtime-theme="false"
     >
-      <NuxtPage />
+      <div class="p-4">
+        <NuxtPage />
+      </div>
     </div>
+
+    <div class="w-48 h-full border-l border-gray-200 bg-gray-50 dark:bg-gray-900">
+      <div class="p-2 h-full overflow-y-auto">
+        <UNavigationMenu
+          v-if="currentStoryVariants.length"
+          :items="currentStoryVariants.map(variant => ({
+            label: variant.title,
+            to: `#variant-${variant.slug}`,
+          }))"
+          orientation="vertical"
+          class="data-[orientation=vertical]:w-full"
+        />
+      </div>
+    </div>
+
     <UModal
       v-model:open="commandPaletteOpen"
     >
@@ -80,3 +114,13 @@ defineShortcuts({
     </UModal>
   </div>
 </template>
+
+<style>
+:root {
+  --template-view-border: 0;
+  --template-view-border-radius: 0.375rem;
+  --template-view-margin: 1rem 0 0 0;
+  --template-view-padding: 1rem;
+  --template-view-font-size: 14px;
+}
+</style>

playground-custom/nuxt.config.ts

@@ -15,15 +15,15 @@ export default defineNuxtConfig({
     classes: {
       story: {
         actions: 'flex items-center gap-2',
-        container: 'space-y-2',
+        container: 'space-y-4',
         content: 'space-y-4',
         header: 'flex items-center gap-2',
         title: 'text-lg font-medium tracking-tight',
       },
       variant: {
         actions: 'flex items-center gap-2',
-        container: 'space-y-2',
-        content: 'p-4 border border-gray-200 rounded-md',
+        container: 'space-y-2 group',
+        content: 'p-4 border border-gray-200 rounded-md group-data-[active="true"]:border-gray-400',
         header: 'flex items-center gap-2',
         title: 'text-md font-medium tracking-tight',
       },
@@ -33,4 +33,9 @@ export default defineNuxtConfig({
       theme: false,
     },
   },
+
+  shiki: {
+    defaultTheme: 'catppuccin-latte',
+    defaultLang: 'vue',
+  },
 })

playground-custom/package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "bedtime-playground",
+  "name": "bedtime-playground-custom",
   "type": "module",
   "scripts": {
     "dev": "nuxi dev",