build out the sample app

Author: roncohen

packages/vue-sdk/README.md

@@ -217,7 +217,7 @@ const huddle = useFeature("huddle");
 
 ### `useTrack()`
 
-`useTrack()` lets you send custom events to Bucket. Use this whenever a user _uses_ a feature. Create [features](https://docs.bucket.co/introduction/concepts/feature) in Bucket based off of these events to analyze feature usage.
+`useTrack()` lets you send custom events to Bucket. Use this whenever a user _uses_ a feature.
 
 ```vue
 <script setup lang="ts">

packages/vue-sdk/dev/plain/App.vue

@@ -4,11 +4,13 @@ import { ref } from "vue";
 import { BucketProvider } from "../../src";
 
 import MissingKeyMessage from "./components/MissingKeyMessage.vue";
+import RequestFeedback from "./components/RequestFeedback.vue";
+import Section from "./components/Section.vue";
 import StartHuddleButton from "./components/StartHuddleButton.vue";
-
-const publishableKey = import.meta.env.VITE_PUBLISHABLE_KEY || "";
+import Track from "./components/Track.vue";
 
 const user = ref({ id: "123", name: "John Doe" });
+const publishableKey = import.meta.env.VITE_PUBLISHABLE_KEY || "";
 </script>
 
 <template>
@@ -23,7 +25,11 @@ const user = ref({ id: "123", name: "John Doe" });
   >
     <template #loading>......loading......</template>
     <StartHuddleButton />
+    <Track />
+    <RequestFeedback />
+
+    <Section title="Set User ID">
+      <input v-model="user.id" />
+    </Section>
   </BucketProvider>
-  <input v-model="user.id" />
-  <span>{{ user.id }}</span>
 </template>

packages/vue-sdk/dev/plain/components/MissingKeyMessage.vue

@@ -21,6 +21,4 @@
   </div>
 </template>
 
-<script setup lang="ts">
-// No additional logic needed for this component
-</script>
+<script setup lang="ts"></script>

packages/vue-sdk/dev/plain/components/RequestFeedback.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { useRequestFeedback } from "../../../src";
+
+import Section from "./Section.vue";
+
+const requestFeedback = useRequestFeedback();
+</script>
+
+<template>
+  <Section title="Request Feedback">
+    <div style="display: flex; gap: 10px; flex-wrap: wrap">
+      <button
+        @click="
+          (e) =>
+            requestFeedback({
+              featureKey: 'demo-feature',
+              title: 'How satisfied are you with this feature?',
+              position: {
+                type: 'POPOVER',
+                anchor: e.currentTarget as HTMLElement,
+              },
+            })
+        "
+      >
+        Request Feedback (Popover)
+      </button>
+
+      <button
+        @click="
+          requestFeedback({
+            featureKey: 'demo-feature',
+            title: 'How was your experience?',
+            position: {
+              type: 'MODAL',
+            },
+          })
+        "
+      >
+        Request Feedback (Modal)
+      </button>
+
+      <button
+        @click="
+          requestFeedback({
+            featureKey: 'demo-feature',
+            title: 'What do you think about our product?',
+            position: {
+              type: 'MODAL',
+            },
+            openWithCommentVisible: true,
+          })
+        "
+      >
+        Request Feedback (Modal with Comment)
+      </button>
+    </div>
+  </Section>
+</template>

packages/vue-sdk/dev/plain/components/Section.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+}>();
+</script>
+<template>
+  <div
+    style="
+      padding: 20px;
+      margin: 10px;
+      border: 2px solid;
+      border-radius: 8px;
+
+      font-family: Arial, sans-serif;
+    "
+  >
+    <h3 style="margin: 0 0 10px 0">{{ title }}</h3>
+    <div style="margin: 10px 0 0 0">
+      <slot />
+    </div>
+  </div>
+</template>

packages/vue-sdk/dev/plain/components/StartHuddleButton.vue

@@ -1,22 +1,36 @@
 <script setup lang="ts">
 import { useFeature } from "../../../src";
 
+import Section from "./Section.vue";
+
 const huddle = useFeature("huddle");
 </script>
 <template>
-  <div>
-    Huddle: {{ huddle.isEnabled }}
-    <span v-if="huddle.isLoading">Loading...</span>
-    <span v-else-if="!huddle.isEnabled">Not enabled</span>
-    <span v-else>
-      <button @click="huddle.track()">
-        {{ huddle.config.payload?.buttonTitle ?? "Start Huddle" }}
-      </button>
-      <button
-        @click="huddle.requestFeedback({ title: 'Do you like huddles?' })"
-      >
-        Request Feedback
-      </button>
-    </span>
-  </div>
+  <Section title="Huddle">
+    <div style="display: flex; gap: 10px; flex-wrap: wrap">
+      <div>Huddle enabled: {{ huddle.isEnabled }}</div>
+      <div v-if="huddle.isLoading">Loading...</div>
+      <div v-else style="display: flex; gap: 10px; flex-wrap: wrap">
+        <div>
+          <button @click="huddle.track()">
+            {{
+              huddle.config.payload?.buttonTitle ?? "Start Huddle (track event)"
+            }}
+          </button>
+        </div>
+        <div>
+          <button
+            @click="
+              (e) =>
+                huddle.requestFeedback({
+                  title: 'Do you like huddles?',
+                })
+            "
+          >
+            Trigger survey
+          </button>
+        </div>
+      </div>
+    </div>
+  </Section>
 </template>

packages/vue-sdk/dev/plain/components/Track.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useTrack } from "../../../src";
+
+import Section from "./Section.vue";
+
+const track = useTrack();
+</script>
+
+<template>
+  <Section title="Custom track event">
+    <button @click="track('Huddle Started', { huddleType: 'voice' })">
+      Send custom track event
+    </button>
+  </Section>
+</template>