missing files

Author: roncohen

packages/vue-sdk/example/README.md

@@ -0,0 +1 @@
+# example

packages/vue-sdk/example/eslint.config.js

@@ -0,0 +1,8 @@
+const base = require("@bucketco/eslint-config/base");
+const pluginVue = require("eslint-plugin-vue");
+
+module.exports = [
+  ...base,
+  { ignores: ["dist/", "example/"] },
+  ...pluginVue.configs["flat/recommended"],
+];

packages/vue-sdk/example/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "slick-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@bucketco/vue-sdk": "^0.1.0",
+    "core-js": "^3.8.3",
+    "vue": "^3.2.13"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-typescript": "^9.1.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "typescript": "~4.5.5"
+  }
+}

packages/vue-sdk/example/src/App.vue

@@ -0,0 +1,34 @@
+<!-- App.vue -->
+<template>
+  <BucketProvider :loading-component="LoadingSpinner">
+    <div id="slick-app">
+      <header>
+        <h1>Welcome to Slick</h1>
+        <p>The next-gen team communication platform</p>
+      </header>
+      <main v-if="huddles">
+        <p>Welcome to the beta program!</p>
+      </main>
+    </div>
+  </BucketProvider>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { BucketProvider, useFeature } from "@bucketco/vue-sdk";
+
+export default defineComponent({
+  name: "App",
+  components: {
+    BucketProvider,
+  },
+  setup() {
+    const { isEnabled } = useFeature("huddles");
+
+    return {
+      huddles: isEnabled,
+      LoadingSpinner: () => import("./LoadingSpinner.vue"),
+    };
+  },
+});
+</script>

packages/vue-sdk/example/src/LoadingSpinner.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="loading-spinner">
+    <div class="spinner"></div>
+    <p>Loading Slick...</p>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "LoadingSpinner",
+});
+</script>
+
+<style scoped>
+.loading-spinner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+.spinner {
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

packages/vue-sdk/example/src/main.ts

@@ -0,0 +1,9 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import { BucketPlugin } from "@bucketco/vue-sdk";
+
+const app = createApp(App);
+
+app.use(BucketPlugin, { publishableKey: "pk_test_123" });
+
+app.mount("#app");

packages/vue-sdk/example/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": ["webpack-env"],
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": ["node_modules"]
+}