@oneclick.dev/cms-kit 0.0.1

package/components/ui/integration-action-builder/IntegrationActionBuilder.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import integrationSettingViews from './integrations'
+
+interface IntegrationAction {
+  integration: string
+  integrationType: string
+  serviceType: string
+  actionType: string
+  actionTypeConfig: any
+}
+
+const { builderState, onConfirm, onCancel } = useIntegrationActionBuilder()
+
+const route = useRoute()
+
+const { getProjectIntegrations } = useIntegrations()
+
+const integrations = ref([])
+const serviceTypes = ref([])
+const actionTypes = ref([])
+
+const projectId = computed(() => route.params.slug as string)
+
+const integrationAction = ref<IntegrationAction>({
+  integration: "",
+  integrationType: "",
+  serviceType: "",
+  actionType: "",
+  actionTypeConfig: {}
+})
+
+watch(() => projectId.value, async () => {
+  projectId.value ? loadIntegrations() : integrations.value = []
+  serviceTypes.value = []
+  actionTypes.value = []
+  resetForm()
+})
+
+const initForm = () => {
+  loadIntegrations()
+  loadServiceTypes(integrationAction.value?.integration)
+  loadActionTypes(integrationAction.value?.serviceType)
+}
+
+watch(() => builderState.value.show, async (val) => {
+  if (val) {
+    let action = builderState.value.action ? JSON.parse(JSON.stringify(builderState.value.action)) : null
+    await resetForm()
+    if (action) {
+      Object.assign(integrationAction.value, action)
+    } else {
+      Object.assign(integrationAction.value, {
+        integration: "",
+        integrationType: "",
+        serviceType: "",
+        actionType: "",
+        actionTypeConfig: {}
+      })
+    }
+    initForm()
+  }
+})
+
+watch(() => integrationAction.value.integration, (val) => {
+  loadServiceTypes(val)
+  integrationAction.value.integrationType = integrations.value?.find(i => i.id === val)?.type
+  // integrationAction.value.actionTypeConfig = {}
+})
+
+watch(() => integrationAction.value.serviceType, (val) => {
+  loadActionTypes(val)
+  // integrationAction.value.actionTypeConfig = {}
+})
+
+watch(() => integrationAction.value.actionTypeConfig, (val) => {
+  console.log("actionTypeConfig", val)
+})
+
+const loadIntegrations = async () => {
+  if (!projectId.value) return integrations.value = [];
+  integrations.value = await getProjectIntegrations(projectId.value)
+}
+
+const loadServiceTypes = (integrationId: string) => {
+  if (!integrationId) return serviceTypes.value = [];
+  serviceTypes.value = integrationSettingViews?.[integrations.value?.find(i => i.id === integrationId)?.type]?.serviceTypes ? Object.entries(integrationSettingViews?.[integrations.value?.find(i => i.id === integrationId)?.type]?.serviceTypes)?.map(([key, value]) => ({ text: value.name, value: key, actionTypes: value.actionTypes })) : []
+}
+
+const loadActionTypes = (serviceTypeId: string) => {
+  if (!serviceTypeId) return actionTypes.value = [];
+  actionTypes.value = serviceTypes.value?.find(st => st.value === serviceTypeId)?.actionTypes ? Object.entries(serviceTypes.value?.find(st => st.value === serviceTypeId)?.actionTypes)?.map(([key, value]) => ({ text: value.name, value: key, component: value.component })) : []
+}
+
+const resetForm = async () => {
+  Object.assign(integrationAction.value, {
+    integration: "",
+    integrationType: "",
+    serviceType: "",
+    actionType: "",
+    actionTypeConfig: {}
+  })
+
+  serviceTypes.value = []
+  actionTypes.value = []
+
+  await nextTick()
+}
+
+const cancel = () => {
+  resetForm()
+  onCancel()
+}
+
+const createIntegrationAction = () => {
+  onConfirm(integrationAction.value)
+}
+
+onMounted(async () => {
+  initForm()
+})
+</script>
+
+<template>
+  <Teleport to="body" v-if="builderState.show">
+    <Sheet v-model:open="builderState.show">
+      <SheetContent side="left" class="w-full sm:w-3/4 xl:w-1/2 sm:max-w-3xl">
+        <SheetHeader>
+          <SheetTitle>New integration action</SheetTitle>
+          <SheetDescription>
+            Make external calls to your integrations or APIs.
+          </SheetDescription>
+        </SheetHeader>
+  
+        <div class="flex flex-col gap-4 p-4">
+          <div class="flex flex-wrap gap-4">
+            <div class="flex flex-col gap-2">
+              <p class="text-sm font-semibold">Integration</p>
+              <ResourceSelect v-model="integrationAction.integration" />
+            </div>
+            <div class="flex flex-col gap-2">
+              <p class="text-sm font-semibold">Service type</p>
+              <Select v-model="integrationAction.serviceType" :disabled="!integrationAction.integration">
+                <SelectTrigger class="w-[190px]">
+                  <SelectValue placeholder="Select a service type" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem v-for="serviceType in serviceTypes" :key="serviceType.value" :value="serviceType.value">
+                      {{ serviceType.text }}
+                    </SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+            <div class="flex flex-col gap-2">
+              <p class="text-sm font-semibold">Action type</p>
+              <Select v-model="integrationAction.actionType" :disabled="!integrationAction.serviceType">
+                <SelectTrigger class="w-[190px]">
+                  <SelectValue placeholder="Select an action type" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem v-for="actionType in actionTypes" :key="actionType.value" :value="actionType.value">
+                      {{ actionType.text }}
+                    </SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+  
+          <Separator class="my-4" />
+  
+          <div v-if="!integrationAction.actionType">
+            <p>Choose an action type to get started.</p>
+          </div>
+  
+          <div v-else>
+            <component :is="actionTypes.find(at => at.value === integrationAction.actionType)?.component" v-model="integrationAction.actionTypeConfig" />
+          </div>
+        </div>
+  
+        <SheetFooter>
+          <div class="flex justify-end gap-2">
+            <Button variant="ghost" @click="cancel">Cancel</Button>
+            <Button @click="createIntegrationAction">Create</Button>
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  </Teleport>
+</template>
+

package/components/ui/integration-action-builder/InterpolationField.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const { builderState } = useIntegrationActionBuilder()
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        required: true
+    },
+    placeholder: {
+        type: String,
+        default: ''
+    }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const mutableValue = computed({
+    get() {
+        return props.modelValue
+    },
+    set(value) {
+        emit('update:modelValue', value)
+    }
+})
+</script>
+
+<template>
+    <Sandbox v-model="mutableValue" :variables="builderState.variableContext" style="max-height: 200px" :placeholder="placeholder" />
+</template>

package/components/ui/integration-action-builder/index.ts

@@ -0,0 +1 @@
+export { default as IntegrationActionBuilder } from './IntegrationActionBuilder.vue'

package/components/ui/integration-action-builder/integrations/firebase/AddDocument.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import InterpolationField from '../../InterpolationField.vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const form = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+</script>
+
+<template>
+  <div>
+    <h2 class="text-lg font-semibold mb-2">Add document</h2>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex flex-col gap-1">
+        <p class="text-sm font-semibold">Collection</p>
+        <InterpolationField v-model="form.collection" />
+      </div>
+      <div class="flex flex-col gap-1">
+        <p class="text-sm font-semibold">Document ID</p>
+        <InterpolationField v-model="form.documentId" />
+        <p class="text-xs text-muted-foreground">Leave blank to let Firestore generate a random ID</p>
+      </div>
+      <div class="flex flex-col gap-1">
+        <p class="text-sm font-semibold">Data</p>
+        <InterpolationField v-model="form.data" />
+      </div>
+    </div>
+  </div>
+</template>

package/components/ui/integration-action-builder/integrations/firebase/DeleteDocument.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div></div>
+</template>

package/components/ui/integration-action-builder/integrations/firebase/GetCollections.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div></div>
+</template>

package/components/ui/integration-action-builder/integrations/firebase/GetDocumentById.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div></div>
+</template>

package/components/ui/integration-action-builder/integrations/firebase/QueryCollectionGroup.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div></div>
+</template>

package/components/ui/integration-action-builder/integrations/firebase/QueryFirestore.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { ChevronsUpDown } from 'lucide-vue-next'
+import InterpolationField from '../../InterpolationField.vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const form = computed({
+  get() {
+    return props.modelValue || {
+      resource: '',
+      filters: [],
+      sorts: [],
+      limit: null,
+      startAt: null,
+      endAt: null
+    }
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+
+const showAdvanced = ref(false);
+
+// Filters
+const operatorOptions = [
+  { label: '=', value: '==' },
+  { label: '≠', value: '!=' },
+  { label: '<', value: '<' },
+  { label: '≤', value: '<=' },
+  { label: '≥', value: '>=' },
+  { label: '>', value: '>' },
+  { label: 'IN', value: 'in' },
+  { label: 'NOT IN', value: 'not-in' },
+  { label: 'CONTAINS', value: 'array-contains' },
+  { label: 'CONTAINS ANY', value: 'array-contains-any' }
+]
+
+async function addFilter() {
+  if (!form.value.filters) {
+    form.value.filters = []
+  }
+  
+  form.value.filters.push({ field: '', operator: '==', value: '' });
+  await nextTick()
+  const filterFields = document.querySelectorAll('#integration_action_builder_dialog_filters .filter-field')
+  if (filterFields.length) {
+    (filterFields[filterFields.length - 1] as HTMLInputElement).focus()
+  }
+}
+
+function removeFilter(idx: number) {
+  form.value.filters.splice(idx, 1);
+}
+
+// Sorts
+function addSort() {
+  if (!form.value.sorts) {
+    form.value.sorts = []
+  }
+  
+  form.value.sorts.push({ field: '', direction: 'asc' });
+}
+function removeSort(idx: number) {
+  form.value.sorts.splice(idx, 1);
+}
+</script>
+
+<template>
+  <h2 class="text-lg font-semibold mb-2">Query Firestore</h2>
+
+  <div class="flex flex-col gap-2">
+    <div class="flex flex-col gap-1">
+      <p class="text-sm font-semibold">Resource</p>
+      <InterpolationField v-model="form.resource" />
+    </div>
+
+    <div id="integration_action_builder_dialog_filters">
+      <Label class="block text-sm font-medium text-muted-foreground mb-2">Filters</Label>
+      <div class="space-y-2">
+        <div v-for="(filter, idx) in form.filters" :key="idx" class="flex items-center gap-2">
+          <InterpolationField v-model="filter.field" placeholder="Field" class="w-32 filter-field" />
+          <Select v-model="filter.operator">
+            <SelectTrigger class="w-[170px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectItem v-for="op in operatorOptions" :key="op.value" :value="op.value">{{ op.label }}</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+          <InterpolationField v-model="filter.value" placeholder="Value" class="w-32" />
+          <Button variant="ghost" @click="removeFilter(idx)" title="Remove filter">✕</Button>
+        </div>
+        <Button variant="outline" @click="addFilter">+ Add Filter</Button>
+      </div>
+    </div>
+
+    <!-- Sort Section -->
+    <div>
+      <Label class="block text-sm font-medium text-muted-foreground mb-2">Sort</Label>
+      <div class="space-y-2">
+        <div v-for="(sort, idx) in form.sorts" :key="idx" class="flex items-center gap-2">
+          <InterpolationField v-model="sort.field" placeholder="Sort By" class="w-32" />
+          <Select v-model="sort.direction">
+            <SelectTrigger class="w-[180px]">
+              <SelectValue placeholder="Sort by" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectItem value="asc">ASC</SelectItem>
+                <SelectItem value="desc">DESC</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+          <Button variant="ghost" @click="removeSort(idx)" title="Remove sort">✕</Button>
+        </div>
+        <Button variant="outline" @click="addSort">+ Add Sort</Button>
+      </div>
+    </div>
+
+    <!-- Advanced Options -->
+    <Collapsible v-model="showAdvanced">
+      <div class="flex items-center justify-between space-x-4 px-4">
+        <h4 class="text-sm font-semibold">
+          Advanced Options
+        </h4>
+        <CollapsibleTrigger as-child>
+          <Button variant="ghost" size="sm" class="w-9 p-0">
+            <ChevronsUpDown class="size-4" />
+            <span class="sr-only">Toggle</span>
+          </Button>
+        </CollapsibleTrigger>
+      </div>
+      <CollapsibleContent>
+        <div class="grid grid-cols-2 gap-4 mt-2">
+          <div>
+            <Label for="limit">Limit</Label>
+            <InterpolationField v-model="form.limit" placeholder="Limit" />
+          </div>
+          <div>
+            <Label for="offset">Offset</Label>
+            <InterpolationField v-model="form.offset" placeholder="Offset" />
+          </div>
+          <div>
+            <Label for="startAt">StartAt</Label>
+            <InterpolationField v-model="form.startAt" placeholder="StartAt" />
+          </div>
+          <div>
+            <Label for="endAt">EndAt</Label>
+            <InterpolationField v-model="form.endAt" placeholder="EndAt" />
+          </div>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  </div>
+</template>

package/components/ui/integration-action-builder/integrations/firebase/UpdateDocument.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div></div>
+</template>

package/components/ui/integration-action-builder/integrations/firebase/index.ts

@@ -0,0 +1,204 @@
+import AddDocument from "./AddDocument.vue"
+import DeleteDocument from "./DeleteDocument.vue"
+import GetDocumentById from "./GetDocumentById.vue"
+import GetCollections from "./GetCollections.vue"
+import QueryCollectionGroup from "./QueryCollectionGroup.vue"
+import QueryFirestore from "./QueryFirestore.vue"
+import UpdateDocument from "./UpdateDocument.vue"
+
+export default {
+  name: "Firebase",
+  serviceTypes: {
+    firestore: {
+      name: "Firestore",
+      actionTypes: {
+        addDocument: {
+          name: "Add document",
+          component: AddDocument,
+          outputs: {
+            success: [
+              {
+                name: "result",
+                type: {
+                  success: "boolean",
+                  documentId: "string",
+                  message: "string?",
+                },
+              },
+            ],
+            error: [
+              {
+                name: "result",
+                type: {
+                  success: "false",
+                  error: "string | { message: string; code?: string }",
+                  statusCode: "number?",
+                },
+              },
+            ],
+          },
+        },
+
+        deleteDocument: {
+          name: "Delete document",
+          component: DeleteDocument,
+          outputs: {
+            success: [
+              {
+                name: "result",
+                type: {
+                  success: "boolean",
+                  message: "string?",
+                },
+              },
+            ],
+            error: [
+              {
+                name: "result",
+                type: {
+                  success: "false",
+                  error: "string",
+                  statusCode: "number?",
+                },
+              },
+            ],
+          },
+        },
+
+        getDocumentById: {
+          name: "Get document by id",
+          component: GetDocumentById,
+          outputs: {
+            success: [
+              {
+                name: "result",
+                type: {
+                  success: "boolean",
+                  document: "DocumentData",
+                  message: "string?",
+                },
+              },
+            ],
+            error: [
+              {
+                name: "result",
+                type: {
+                  success: "false",
+                  error: "string",
+                  statusCode: "number?",
+                },
+              },
+            ],
+          },
+        },
+
+        getCollections: {
+          name: "Get collections",
+          component: GetCollections,
+          outputs: {
+            success: [
+              {
+                name: "result",
+                type: {
+                  success: "boolean",
+                  collections: "string[]",
+                  message: "string?",
+                },
+              },
+            ],
+            error: [
+              {
+                name: "result",
+                type: {
+                  success: "false",
+                  error: "string",
+                  statusCode: "number?",
+                },
+              },
+            ],
+          },
+        },
+
+        queryCollectionGroup: {
+          name: "Query collection group",
+          component: QueryCollectionGroup,
+          outputs: {
+            success: [
+              {
+                name: "result",
+                type: {
+                  success: "boolean",
+                  data: "DocumentData[]",
+                  message: "string?",
+                },
+              },
+            ],
+            error: [
+              {
+                name: "result",
+                type: {
+                  success: "false",
+                  error: "string",
+                  statusCode: "number?",
+                },
+              },
+            ],
+          },
+        },
+
+        queryFirestore: {
+          name: "Query firestore",
+          component: QueryFirestore,
+          outputs: {
+            success: [
+              {
+                name: "result",
+                type: {
+                  success: "boolean",
+                  documents: "DocumentData[]",
+                  message: "string?",
+                },
+              },
+            ],
+            error: [
+              {
+                name: "result",
+                type: {
+                  success: "false",
+                  error: "string",
+                  statusCode: "number?",
+                },
+              },
+            ],
+          },
+        },
+
+        updateDocument: {
+          name: "Update document",
+          component: UpdateDocument,
+          outputs: {
+            success: [
+              {
+                name: "result",
+                type: {
+                  success: "boolean",
+                  message: "string?",
+                },
+              },
+            ],
+            error: [
+              {
+                name: "result",
+                type: {
+                  success: "false",
+                  error: "string",
+                  statusCode: "number?",
+                },
+              },
+            ],
+          },
+        },
+      },
+    },
+  },
+}

package/components/ui/integration-action-builder/integrations/index.ts

@@ -0,0 +1,9 @@
+import firebase from "./firebase"
+import openai from "./openai"
+import twilio from "./twilio"
+
+export default {
+    FIREBASE: firebase,
+    OPENAI: openai,
+    TWILIO: twilio
+}