@oneclick.dev/cms-kit 0.0.2 → 0.0.3

package/components/ui/form-builder/components/elements/scanner/Scanner.vue

@@ -1,173 +0,0 @@
-<script setup lang="ts">
-import { inject, ref, onMounted, onUnmounted } from 'vue'
-import { BrowserMultiFormatReader } from '@zxing/browser'
-import { useRunProcess } from '../../../../flow-builder/composables/useRunProcess'
-import { useLayout } from '../../../../flow-builder/composables/useLayout'
-
-const props = defineProps({
-  variableName: {
-    type: String,
-    required: true
-  },
-  timeBetweenScans: {
-    type: Number,
-    default: 800
-  },
-  onScanFlow: {
-    type: Object,
-    default: () => ({
-      nodes: [],
-      edges: [],
-      variables: [],
-      computedVariables: []
-    })
-  }
-})
-
-const emit = defineEmits(['scanned'])
-const allAvailableVariables = inject('allAvailableVariables', ref([]))
-const state = inject('state');
-
-const scanning = ref(false)
-const error = ref<string | null>(null)
-const videoRef = ref<HTMLVideoElement | null>(null)
-let codeReader: BrowserMultiFormatReader | null = null
-let lastScanTime = 0
-
-const devices = ref<MediaDeviceInfo[]>([])
-const uniqueDevices = ref<{ deviceId: string, label: string }[]>([])
-const selectedDeviceId = ref<string | undefined>(undefined)
-
-const getCameras = async () => {
-  try {
-    const mediaDevices = await navigator.mediaDevices.enumerateDevices()
-    const videoInputs = mediaDevices.filter(device => device.kind === 'videoinput')
-    // Deduplicate by label or deviceId
-    const seen = new Set<string>()
-    let camCount = 1
-    uniqueDevices.value = videoInputs.reduce((arr, device) => {
-      const key = device.label || device.deviceId
-      if (!seen.has(key)) {
-        seen.add(key)
-        arr.push({
-          deviceId: device.deviceId,
-          label: device.label || `Camera ${camCount++}`
-        })
-      }
-      return arr
-    }, [] as { deviceId: string, label: string }[])
-    devices.value = videoInputs
-    if (!selectedDeviceId.value && uniqueDevices.value.length > 0) {
-      selectedDeviceId.value = uniqueDevices.value[0].deviceId
-    }
-  } catch (e) {
-    error.value = 'Could not list cameras'
-  }
-}
-
-import { nextTick } from 'vue';
-
-let lastScannedCode: string | null = null;
-let lastScannedTime: number = 0;
-
-const startScanner = async () => {
-  error.value = null;
-  console.log(state)
-  state.elementValues[props.variableName] = null;
-  scanning.value = true;
-  await nextTick(); // Ensure videoRef is set
-
-  if (!codeReader) {
-    codeReader = new BrowserMultiFormatReader();
-  }
-  try {
-    await codeReader.decodeFromVideoDevice(
-      selectedDeviceId.value,
-      videoRef.value!,
-      (result: any, err) => {
-        if (result) {
-          const code = result.getText();
-          const now = Date.now();
-          if (code === lastScannedCode) {
-            if (now - lastScannedTime >= 5000) {
-              lastScannedTime = now;
-              state.elementValues[props.variableName] = code;
-              emit('scanned', code);
-              handleScan();
-            }
-            // else: ignore scan, still in cooldown
-          } else {
-            lastScannedCode = code;
-            lastScannedTime = now;
-            state.elementValues[props.variableName] = code;
-            emit('scanned', code);
-            handleScan();
-          }
-        }
-        // Ignore 'No MultiFormat Readers...' error
-        if (err && err.message !== 'No MultiFormat Readers were able to detect the code.') {
-          error.value = err.message || 'Scan error';
-        } else {
-          error.value = null;
-        }
-      }
-    );
-  } catch (e: any) {
-    error.value = e.message || 'Could not access camera';
-    scanning.value = false;
-  }
-};
-
-const stopScanner = () => {
-  scanning.value = false;
-  if (codeReader) {
-    if (typeof codeReader.stopContinuousDecode === 'function') {
-      codeReader.stopContinuousDecode();
-    } else if (typeof codeReader.reset === 'function') {
-      codeReader.reset();
-    }
-    codeReader = null;
-  }
-};
-
-onUnmounted(() => {
-  stopScanner()
-})
-
-onMounted(() => {
-  getCameras()
-  startScanner()
-})
-
-const handleScan = () => {
-  const { graph, layout } = useLayout()
-  const { run } = useRunProcess({
-    graph,
-    cancelOnError: true,
-    nodes: props.onScanFlow.nodes,
-    edges: props.onScanFlow.edges,
-    variables: [...allAvailableVariables.value, ...props.onScanFlow.variables],
-    computedVariables: props.onScanFlow.computedVariables
-  })
-  const laidOutNodes = layout(props.onScanFlow.nodes, props.onScanFlow.edges, 'LR')
-  run(laidOutNodes)
-}
-</script>
-
-<template>
-  <div class="flex flex-col items-center gap-4">
-    <div class="w-full flex flex-col items-center">
-      <label v-if="uniqueDevices.length > 1" class="mb-2 text-sm">
-        Camera:
-        <select v-model="selectedDeviceId" class="border rounded px-2 py-1 ml-2">
-          <option v-for="(device, idx) in uniqueDevices" :key="device.deviceId" :value="device.deviceId">
-            {{ device.label }}
-          </option>
-        </select>
-      </label>
-    </div>
-    <div>
-      <video ref="videoRef" autoplay playsinline class="rounded border w-72 h-72 bg-black"></video>
-    </div>
-  </div>
-</template>

package/components/ui/form-builder/components/elements/scanner/index.ts

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

package/components/ui/form-builder/components/elements/select/Select.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-const randomId = crypto.randomUUID()
-
-interface Option {
-  value: string;
-  label: string;
-}
-
-const props = defineProps({
-  variableName: {
-    type: String,
-    required: true
-  },
-  label: {
-    type: String,
-    default: ""
-  },
-  placeholder: {
-    type: String,
-    default: ""
-  },
-  options: {
-    type: Array as PropType<Option[]>,
-    required: true
-  }
-})
-
-const state = inject('state');
-
-</script>
-
-<template>
-  <div class="grid w-full items-center gap-1.5">
-    <Label :for="randomId" v-if="label">{{ label }}</Label>
-
-    <Select v-model="state.elementValues[variableName]">
-      <SelectTrigger class="w-[180px] border-ring">
-        <SelectValue :placeholder="placeholder" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectGroup>
-          <SelectItem v-for="option in options" :key="option.value" :value="option.value">
-            {{ option.label }}
-          </SelectItem>
-        </SelectGroup>
-      </SelectContent>
-    </Select>
-  </div>
-</template>

package/components/ui/form-builder/components/elements/select/index.ts

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

package/components/ui/form-builder/components/elements/text/Text.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { interpolateTemplateFromVariableContext } from '@/lib/interpolation'
-
-const props = defineProps({
-  text: {
-    type: String,
-    default: ''
-  }
-})
-
-const allAvailableVariables = inject('allAvailableVariables')
-
-const output = computed(() => {
-  return interpolateTemplateFromVariableContext(props.text, allAvailableVariables?.value)
-})
-</script>
-
-<template>
-  <p class="whitespace-pre-wrap">{{ output }}</p>
-</template>

package/components/ui/form-builder/components/elements/text/index.ts

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

package/components/ui/form-builder/components/elements/textarea/Textarea.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { inject } from 'vue'
-
-const randomId = crypto.randomUUID()
-
-const props = defineProps({
-  variableName: {
-    type: String,
-    required: true
-  },
-  label: {
-    type: String,
-    default: ""
-  },
-  placeholder: {
-    type: String,
-    default: ""
-  }
-})
-
-const state = inject('state');
-
-</script>
-
-<template>
-  <div class="flex flex-col w-full h-full items-start gap-1.5">
-    <Label :for="randomId" v-if="label">{{ label }}</Label>
-    <Textarea :id="randomId" v-model="state.elementValues[variableName]" :placeholder="placeholder" class="border-ring h-full resize-none"></Textarea>
-  </div>
-</template>

package/components/ui/form-builder/components/elements/textarea/index.ts

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

package/components/ui/form-builder/components/elements/textfield/Textfield.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { inject } from 'vue'
-
-const randomId = crypto.randomUUID()
-
-const props = defineProps({
-  variableName: {
-    type: String,
-    required: true
-  },
-  label: {
-    type: String,
-    default: ""
-  },
-  placeholder: {
-    type: String,
-    default: ""
-  }
-})
-
-const state = inject('state');
-
-</script>
-
-<template>
-  <div class="grid w-full items-center gap-1.5">
-    <Label :for="randomId" v-if="label">{{ label }}</Label>
-    <Input :id="randomId" v-model="state.elementValues[variableName]" type="text" :placeholder="placeholder" class="border-ring" />
-  </div>
-</template>

package/components/ui/form-builder/components/elements/textfield/index.ts

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

package/components/ui/form-builder/index.ts

@@ -1,3 +0,0 @@
-export { default as FormBuilder } from './FormBuilder.vue'
-export { default as FormBuilderSelect } from './FormBuilderSelect.vue'
-export { default as FormDisplayer } from './FormDisplayer.vue'

package/components/ui/input/Input.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { useVModel } from '@vueuse/core'
-
-const props = defineProps<{
-  defaultValue?: string | number
-  modelValue?: string | number
-  class?: HTMLAttributes['class']
-}>()
-
-const emits = defineEmits<{
-  (e: 'update:modelValue', payload: string | number): void
-}>()
-
-const modelValue = useVModel(props, 'modelValue', emits, {
-  passive: true,
-  defaultValue: props.defaultValue,
-})
-</script>
-
-<template>
-  <input
-    v-model="modelValue"
-    data-slot="input"
-    :class="cn(
-      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-background px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-      props.class,
-    )"
-  >
-</template>

package/components/ui/input/index.ts

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

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

@@ -1,193 +0,0 @@
-<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

@@ -1,29 +0,0 @@
-<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

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

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

@@ -1,43 +0,0 @@
-<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

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

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

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

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

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

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

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