chore(playground): feat auto import playground component (#391)

* feat: auto generate playground

* chore: add scripts

* fix: auto import

* fix: nuxt

CONTRIBUTING.md

@@ -66,6 +66,7 @@ pnpm test testfilename # Run a specific test file name
 pnpm play # Run the playground
 pnpm play:vue # Run the playground with Vue
 pnpm play:nuxt # Run the playground with Nuxt
+pnpm play:gencomponents # Run the playground with GenComponents
 
 pnpm clean: all # Clean all node_modules
 pnpm clean:dist # Clean dist folder in all packages

package.json

@@ -25,6 +25,7 @@
     "play:vue": "pnpm clean:dts && pnpm --filter=vue3 p:dev",
     "play:nuxt": "pnpm clean:dts && pnpm --filter=nuxt3 p:dev",
     "play": "pnpm clean:dts && pnpm --filter='./playground/**' p:dev",
+    "play:gencomponents": "pnpm jiti ./scripts/playground-generator.ts",
     "postinstall": "simple-git-hooks",
     "test": "vitest run",
     "test:watch": "vitest --watch",

playground/nuxt3/app.vue

@@ -1,5 +1,19 @@
 <template>
-  <div class="w-full h-full p-4">
+  <div class="home">
     <NuxtPage />
   </div>
 </template>
+
+<style>
+html, body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  width: 100%;
+  height: 100%;
+}
+
+.home {
+  padding: 20px;
+}
+</style>

playground/nuxt3/components.json

@@ -0,0 +1,126 @@
+[
+  {
+    "name": "AccordionDemo",
+    "path": "/accordion"
+  },
+  {
+    "name": "AlertDialogDemo",
+    "path": "/alert-dialog"
+  },
+  {
+    "name": "AspectRatioDemo",
+    "path": "/aspect-ratio"
+  },
+  {
+    "name": "AvatarDemo",
+    "path": "/avatar"
+  },
+  {
+    "name": "CheckboxDemo",
+    "path": "/checkbox"
+  },
+  {
+    "name": "CollapsibleDemo",
+    "path": "/collapsible"
+  },
+  {
+    "name": "DialogDemo",
+    "path": "/dialog"
+  },
+  {
+    "name": "HoverCardDemo",
+    "path": "/hover-card"
+  },
+  {
+    "name": "LabelDemo",
+    "path": "/label"
+  },
+  {
+    "name": "PopoverDemo",
+    "path": "/popover"
+  },
+  {
+    "name": "ProgressDemo",
+    "path": "/progress"
+  },
+  {
+    "name": "RadioGroupDemo",
+    "path": "/radio-group"
+  },
+  {
+    "name": "SeparatorDemo",
+    "path": "/separator"
+  },
+  {
+    "name": "SliderDemo",
+    "path": "/slider"
+  },
+  {
+    "name": "SwitchDemo",
+    "path": "/switch"
+  },
+  {
+    "name": "TabsDemo",
+    "path": "/tabs"
+  },
+  {
+    "name": "ToastDemo",
+    "path": "/toast"
+  },
+  {
+    "name": "ToggleDemo",
+    "path": "/toggle"
+  },
+  {
+    "name": "ToggleGroupDemo",
+    "path": "/toggle-group"
+  },
+  {
+    "name": "ToolbarDemo",
+    "path": "/toolbar"
+  },
+  {
+    "name": "TooltipDemo",
+    "path": "/tooltip"
+  },
+  {
+    "name": "ArrowDemo",
+    "path": "/arrow"
+  },
+  {
+    "name": "CollectionDemo",
+    "path": "/collection"
+  },
+  {
+    "name": "DismissableLayerDemo",
+    "path": "/dismissable-layer"
+  },
+  {
+    "name": "FocusScopeDemo",
+    "path": "/focus-scope"
+  },
+  {
+    "name": "PopperDemo",
+    "path": "/popper"
+  },
+  {
+    "name": "PortalDemo",
+    "path": "/portal"
+  },
+  {
+    "name": "PresenceDemo",
+    "path": "/presence"
+  },
+  {
+    "name": "RovingFocusDemo",
+    "path": "/roving-focus"
+  },
+  {
+    "name": "SlotDemo",
+    "path": "/slot"
+  },
+  {
+    "name": "VisuallyHiddenDemo",
+    "path": "/visually-hidden"
+  }
+]

playground/nuxt3/nuxt.config.ts

@@ -5,13 +5,27 @@ import { resolve } from 'pathe'
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   modules: [
-    '@nuxtjs/tailwindcss',
     async () => {
-      const components = globbySync('../../packages/components/**/src/stories/*.@(vue)')
+      const components = globbySync('../../packages/components/**/src/stories/*Demo.vue', {
+        ignore: ['**/node_modules/**', '**/dist/**', '**/node_modules/@oku-ui/**'],
+        deep: 4,
+      })
       if (components.length > 0) {
         components.forEach((component) => {
           // LabelDemo.vue -> LabelDemo
-          addComponent({ filePath: resolve(component), name: component.split('/').pop()!.replace('.vue', '') })
+          addComponent({ filePath: resolve(component), name: component.split('/').pop()!.replace('.vue', ''), priority: 1 })
+        })
+      }
+
+      const core = globbySync('../../packages/core/**/src/stories/*Demo.vue', {
+        ignore: ['**/node_modules/**', '**/dist/**', '**/node_modules/@oku-ui/**'],
+        deep: 4,
+      })
+
+      if (core.length > 0) {
+        core.forEach((component) => {
+          // LabelDemo.vue -> LabelDemo
+          addComponent({ filePath: resolve(component), name: component.split('/').pop()!.replace('.vue', ''), priority: 2 })
         })
       }
     },

playground/nuxt3/package.json

@@ -1,5 +1,6 @@
 {
   "name": "nuxt3-playground",
+  "type": "module",
   "private": true,
   "scripts": {
     "p:build": "nuxt build",
@@ -11,14 +12,26 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
+    "@oku-ui/accordion": "workspace:^",
+    "@oku-ui/alert-dialog": "workspace:^",
+    "@oku-ui/arrow": "workspace:^",
     "@oku-ui/aspect-ratio": "workspace:^",
     "@oku-ui/avatar": "workspace:^",
     "@oku-ui/checkbox": "workspace:^",
     "@oku-ui/collapsible": "workspace:^",
     "@oku-ui/collection": "workspace:^",
+    "@oku-ui/dialog": "workspace:^",
+    "@oku-ui/dismissable-layer": "workspace:^",
+    "@oku-ui/focus-scope": "workspace:^",
+    "@oku-ui/hover-card": "workspace:^",
     "@oku-ui/label": "workspace:^",
+    "@oku-ui/popover": "workspace:^",
+    "@oku-ui/popper": "workspace:^",
+    "@oku-ui/portal": "workspace:^",
+    "@oku-ui/presence": "workspace:^",
     "@oku-ui/primitives": "workspace:^",
     "@oku-ui/progress": "workspace:^",
+    "@oku-ui/radio-group": "workspace:^",
     "@oku-ui/roving-focus": "workspace:^",
     "@oku-ui/scroll-area": "workspace:^",
     "@oku-ui/separator": "workspace:^",
@@ -27,11 +40,14 @@
     "@oku-ui/switch": "workspace:^",
     "@oku-ui/tabs": "workspace:^",
     "@oku-ui/toast": "workspace:^",
+    "@oku-ui/toggle": "workspace:^",
+    "@oku-ui/toggle-group": "workspace:^",
+    "@oku-ui/toolbar": "workspace:^",
+    "@oku-ui/tooltip": "workspace:^",
     "@oku-ui/visually-hidden": "workspace:^"
   },
   "devDependencies": {
-    "@nuxtjs/tailwindcss": "^6.8.0",
-    "@types/node": "^18.17.17",
-    "nuxt": "^3.7.3"
+    "@types/node": "^20.7.0",
+    "nuxt": "^3.7.4"
   }
 }

playground/nuxt3/pages/accordion.vue

@@ -0,0 +1,3 @@
+<template>
+  <div><AccordionDemo allshow /></div>
+</template>

playground/nuxt3/pages/alert-dialog.vue

@@ -0,0 +1,3 @@
+<template>
+  <div><AlertDialogDemo allshow /></div>
+</template>

playground/nuxt3/pages/arrow.vue

@@ -1,8 +1,3 @@
-<script setup lang="ts">
-</script>
-
 <template>
-  <div>
-    <ArrowDemo :allshow="true" />
-  </div>
+  <div><ArrowDemo allshow /></div>
 </template>

playground/nuxt3/pages/aspect-ratio.vue

@@ -1,8 +1,3 @@
-<script setup lang="ts">
-</script>
-
 <template>
-  <div>
-    <AspectRatioDemo :allshow="true" />
-  </div>
+  <div><AspectRatioDemo allshow /></div>
 </template>

playground/nuxt3/pages/avatar.vue

@@ -1,8 +1,3 @@
-<script setup lang="ts">
-</script>
-
 <template>
-  <div class="mt-4">
-    <AvatarDemo :allshow="true" />
-  </div>
+  <div><AvatarDemo allshow /></div>
 </template>

playground/nuxt3/pages/checkbox.vue

@@ -1,7 +1,3 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
-  <CheckboxDemo allshow />
+  <div><CheckboxDemo allshow /></div>
 </template>

playground/nuxt3/pages/collapsible.vue

@@ -1,5 +1,3 @@
 <template>
-  <div>
-    <CollapsibleDemo allshow />
-  </div>
+  <div><CollapsibleDemo allshow /></div>
 </template>

playground/nuxt3/pages/collection.vue

@@ -1,5 +1,3 @@
 <template>
-  <div>
-    <CollectionDemo allshow />
-  </div>
+  <div><CollectionDemo allshow /></div>
 </template>

playground/nuxt3/pages/dialog.vue

@@ -1,9 +1,3 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
-  <div>
-    <DialogDemo :allshow="true" />
-  </div>
+  <div><DialogDemo allshow /></div>
 </template>

playground/nuxt3/pages/dismissable-layer.vue

@@ -1,9 +1,3 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
-  <div>
-    <DismissableLayerDemo :allshow="true" />
-  </div>
+  <div><DismissableLayerDemo allshow /></div>
 </template>

playground/nuxt3/pages/focus-scope.vue

@@ -1,9 +1,3 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
-  <div>
-    <FocusScopeDemo :allshow="true" />
-  </div>
+  <div><FocusScopeDemo allshow /></div>
 </template>

playground/nuxt3/pages/hover-card.vue

@@ -1,9 +1,3 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
-  <div>
-    <HoverCardDemo :allshow="true" />
-  </div>
+  <div><HoverCardDemo allshow /></div>
 </template>