chore: combobox documentation

Author: cab-mikee

bun.lock

@@ -1,10 +1,9 @@
-# Combobox (wip)
-
 <Hero
   title="stacks/combobox"
   description="An opinionated combobox component for Stacks"
   link="https://github.com/stacksjs/stacks/tree/main/storage/framework/core/components/combobox"
 />
+<br>
 
 # Install
 
@@ -32,4 +31,41 @@ yarn add @stacksjs/combobox
 
 :::
 
+<br>
+
+# Usage
+
+`Comboboxes` are built using the `Combobox`, `ComboboxInput`, `ComboboxOptions`, `ComboboxOption` and `ComboboxLabel` components.
+
+The `ComboboxInput` will automatically open/close the `ComboboxOptions` when searching.
+
+You are completely in charge of how you filter the results, whether it be with a fuzzy search library client-side or by making server-side requests to an API. In this example we will keep the logic simple for demo purposes.
+
+```vue
+<script lang="ts" setup>
+ import { Combobox, ComboboxInput, ComboboxOptions, ComboboxOption } from '@stacksjs/combobox'
+</script>
+
+<template>
+  <Combobox v-model="selectedPerson">
+    <ComboboxInput @change="query = $event.target.value" />
+    <ComboboxOptions>
+      <ComboboxOption
+        v-for="person in filteredPeople"
+        :key="person"
+        :value="person"
+      >
+        {{ person }}
+      </ComboboxOption>
+    </ComboboxOptions>
+  </Combobox>
+</template>
+```
+
+<br>
+
+# Demo
+
 <ComboboxDemo />
+
+Still have questions relating this component's usage? Contact us and we will help you out. In the meantime, if you are curious about the [`<CommandPalette />`](./command-palette.md) component read more on the next page.

docs/guide/components/combobox.md

@@ -17,6 +17,7 @@
     "url": "https://github.com/stacksjs/stacks/issues"
   },
   "scripts": {
+    "build:reset": "rm -rf node_modules bun.lock && bun install && cd storage/framework && bun run build && cd ../../",
     "buddy": "bun ./storage/framework/core/buddy/src/cli.ts",
     "stacks": "./buddy",
     "setup": "./storage/framework/scripts/setup.sh",

package.json

@@ -9,8 +9,6 @@ import {
 
 import { TransitionRoot } from '@stacksjs/transition'
 import { computed, ref } from 'vue'
-import Hero from './Hero.vue'
-import Installation from './Installation.vue'
 
 interface Person {
   id: number
@@ -96,20 +94,10 @@ const usageDescription = `Comboboxes are built using the <code><b>Combobox</b></
 <template>
   <div class="demo-wrapper">
     <div class="flex flex-col  mx-auto max-w-full">
-      <header class="flex-center flex-col py-20">
-        <Hero
-          title="stacks/combobox"
-          description="An opinionated combobox component for Stacks"
-          link="https://github.com/stacksjs/stacks/tree/main/storage/framework/core/components/combobox"
-        />
-      </header>
       <main
           class="text-primary grid grid-cols-1 gap-8 pb-20 text-xs 2xl:text-sm"
         >
-          <Installation code="bun install @stacksjs/combobox" />
-          <Usage :code="usageCode" :description="usageDescription" />
           <div class="flex flex-col gap-2">
-            <h2 class="text-2xl font-bold text-gray-900">Demo</h2>
             <p class="text-gray-600 text-xl">Search and select a person from the list</p>
           </div>
           <div class="relative">

storage/framework/defaults/components/Docs/demo/ComboboxDemo.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
-
 defineProps({
   title: {
     type: String,
@@ -15,7 +13,6 @@ defineProps({
     required: true,
   },
 })
-
 </script>
 
 <template>
@@ -25,20 +22,20 @@ defineProps({
       <div class="toast" />
       <div class="toast" />
     </div>
-    <h1 class=" text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-blue-700 dark:to-blue-300 mb-3 text-5xl font-bold -mt-5">
+    <h1 class="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-blue-700 dark:to-blue-300 mb-3 text-5xl font-bold -mt-5">
       {{ title }}
     </h1>
     <p class="mb-3 mt-0 text-lg">
       {{ description }}
     </p>
 
-      <a
-        class="button btn-secondary"
-        :href="link"
-        target="_blank"
-      >
-        Github
-      </a>
+    <a
+      class="button btn-secondary"
+      :href="link"
+      target="_blank"
+    >
+      Github
+    </a>
   </div>
 </template>
 
@@ -47,6 +44,7 @@ defineProps({
   display: flex;
   flex-direction: column;
   margin: 0 auto;
+  width: 400px;
   height: 100px;
   width: 400px;
   position: relative;