@oneclick.dev/cms-kit 0.0.1

package/components/ui/flow-builder/components/NodeEditor.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { X, ChevronsLeftRightEllipsis, MessageSquare, MessageSquareWarning, PartyPopper, Braces, Variable, MessageSquareCode, Globe, Goal, Package } from 'lucide-vue-next'
+import IntegrationActionEditor from './node-editor/IntegrationActionEditor.vue';
+import ShowToastEditor from './node-editor/ShowToastEditor.vue';
+import TransformDataEditor from './node-editor/TransformDataEditor.vue';
+import VisitUrlEditor from './node-editor/VisitUrlEditor.vue';
+import SetVariableEditor from './node-editor/SetVariableEditor.vue';
+import ShowDialogEditor from './node-editor/ShowDialogEditor.vue';
+import ConfirmEditor from './node-editor/ConfirmEditor.vue';
+import FinishFlowEditor from './node-editor/FinishFlowEditor.vue';
+import ShowModuleEditor from './node-editor/ShowModuleEditor.vue';
+import ApiRequestEditor from './node-editor/ApiRequestEditor.vue';
+import { useVueFlow } from '@vue-flow/core'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true,
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'close', 'remove']);
+
+const { setNodes, getNodes } = useVueFlow()
+
+const node = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value)
+
+    // setNodes(getNodes().map((n: any) =>
+    //   n.id === value.id
+    //     ? { ...n, ...value, data: { ...n.data, ...value.data } }
+    //     : n
+    // ))
+  },
+})
+
+const NODE_TYPES = [
+  {
+    label: 'API request',
+    value: 'api-request',
+    icon: ChevronsLeftRightEllipsis,
+    buttonClass: 'bg-gray-100 dark:bg-gray-500/50 dark:text-gray-200'
+  },
+  {
+    label: 'Integration action',
+    value: 'integration-action',
+    icon: ChevronsLeftRightEllipsis,
+    buttonClass: 'bg-gray-100 dark:bg-gray-500/50 dark:text-gray-200'
+  },
+  {
+    label: 'Ask confirmation',
+    value: 'confirm',
+    icon: MessageSquareWarning,
+    buttonClass: 'bg-red-500 text-white'
+  },
+  {
+    label: 'Show dialog',
+    value: 'show-dialog',
+    icon: MessageSquareCode,
+    buttonClass: 'bg-green-500 text-white'
+  },
+  {
+    label: 'Show toast',
+    value: 'show-toast',
+    icon: MessageSquare,
+    buttonClass: 'bg-orange-500 text-white'
+  },
+  {
+    label: 'Show module',
+    value: 'show-module',
+    icon: Package,
+    buttonClass: 'bg-purple-500 text-white'
+  },
+  {
+    label: 'Set variable',
+    value: 'set-variable',
+    icon: Variable,
+    buttonClass: 'bg-blue-500 text-white'
+  },
+  {
+    label: 'Transform data',
+    value: 'transform-data',
+    icon: Braces,
+    buttonClass: 'bg-yellow-500 text-white'
+  },
+  {
+    label: 'Visit URL',
+    value: 'visit-url',
+    icon: Globe,
+    buttonClass: 'bg-blue-500 text-white'
+  },
+  {
+    label: 'Confetti',
+    value: 'confetti',
+    icon: PartyPopper,
+    buttonClass: 'bg-pink-500 text-white'
+  },
+  {
+    label: 'Finish flow / return data',
+    value: 'finish-flow',
+    icon: Goal,
+    buttonClass: 'bg-gray-800 text-white'
+  },
+]
+
+const nodeType = computed(() => NODE_TYPES?.find(type => type.value === node.value.type))
+</script>
+
+<template>
+  <div class="flex flex-col absolute top-4 right-4 w-[320px] h-[calc(100%-2em)] bg-background shadow-sm p-4 rounded-lg overflow-y-auto border z-[10]">
+    <template v-if="node.type !== 'start'">
+      <div class="flex items-center justify-between gap-2 mb-2">
+        <span class="font-bold text-xl">Edit node</span>
+        <Button size="icon" variant="ghost" @click="emit('close')">
+          <X class="size-4" />
+        </Button>
+      </div>
+
+      <Select v-model="node.type">
+        <SelectTrigger class="w-full">
+          <div class="flex items-center gap-2">
+            <div class="size-6 rounded-lg flex items-center justify-center" v-if="nodeType" :class="nodeType.buttonClass">
+              <img :src="nodeType.icon" class="size-5" v-if="typeof nodeType.icon === 'string' && nodeType.icon.includes('.webp')" />
+              <component :is="nodeType.icon" class="size-4 text-inherit" v-else />
+            </div>
+            <SelectValue placeholder="Select an action" />
+          </div>
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem v-for="type in NODE_TYPES" :key="type.value" :value="type.value">
+              <div class="flex items-center gap-4 px-1 py-0.5" @click="node.type = type.value" v-if="type !== '-'">
+                <div class="size-8 rounded-xl flex items-center justify-center" v-if="type.icon" :class="type.buttonClass">
+                  <img :src="type.icon" class="size-5" v-if="typeof type.icon === 'string' && type.icon.includes('.webp')" />
+                  <component :is="type.icon" class="size-5 text-inherit" v-else />
+                </div>
+                <span class="text-sm text-muted-foreground">
+                  {{ type.label }}
+                </span>
+              </div>
+            </SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+
+      <hr class="my-4">
+
+      <ApiRequestEditor v-if="node.type === 'api-request'" v-model="node" />
+      <IntegrationActionEditor v-else-if="node.type === 'integration-action'" v-model="node" />
+      <ShowToastEditor v-else-if="node.type === 'show-toast'" v-model="node" />
+      <ShowDialogEditor v-else-if="node.type === 'show-dialog'" v-model="node" />
+      <ShowModuleEditor v-else-if="node.type === 'show-module'" v-model="node" />
+      <ConfirmEditor v-else-if="node.type === 'confirm'" v-model="node" />
+      <TransformDataEditor v-else-if="node.type === 'transform-data'" v-model="node" />
+      <VisitUrlEditor v-else-if="node.type === 'visit-url'" v-model="node" />
+      <SetVariableEditor v-else-if="node.type === 'set-variable'" v-model="node" />
+      <FinishFlowEditor v-else-if="node.type === 'finish-flow'" v-model="node" />
+
+      <div class="mt-auto"></div>
+      <hr class="my-4">
+
+      <Button class="w-full" variant="destructive" @click="emit('remove')">Delete node</Button>
+    </template>
+
+    <template v-else>
+      <div class="flex items-center justify-between gap-2 mb-2">
+        <span class="font-bold text-xl">Start node</span>
+        <Button size="icon" variant="ghost" @click="emit('close')">
+          <X class="size-4" />
+        </Button>
+      </div>
+      
+      <p class="text-gray-400 text-sm">
+        The workflow will start from here. You can link as many nodes as you want to this node.
+      </p>
+    </template>
+  </div>
+</template>

package/components/ui/flow-builder/components/edge-editor/DataEdgeEditor.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useVueFlow } from '@vue-flow/core'
+import { getOutputsForNode } from '../../composables/outputRegistry'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true,
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { findNode } = useVueFlow()
+
+const edge = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value);
+  },
+})
+
+const prettify = (type: string) => {
+  if (!type?.startsWith('{') || !type.endsWith('}')) return type
+
+  const inner = type.slice(1, -1).trim()
+  const lines = inner.split(';').filter(Boolean).map(line => `  ${line.trim()};`)
+  return ['{', ...lines, '}'].join('\n')
+}
+
+const outputs = computed(() => {
+  let sourceNode = findNode(edge.value.source)
+  return getOutputsForNode(sourceNode, edge.value.data.sourceHandle) || []
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="text-xs text-gray-500 mt-1 mb-4">
+      <p v-if="edge.sourceHandle === 'error'">
+        If the integration action fails, it will follow this connection.
+      </p>
+      <p v-if="edge.sourceHandle === 'success'">
+        If the integration action succeeds, it will follow this connection.
+      </p>
+    </div>
+
+    <div class="space-y-2">
+      <div
+        v-for="output in outputs"
+        :key="output.name"
+        class="rounded-md border border-gray-200 dark:border-gray-700 p-3 bg-gray-50 dark:bg-gray-900"
+      >
+        <div class="text-sm font-semibold text-gray-800 dark:text-white">
+          {{ output.name }}
+          <span class="ml-2 text-xs text-gray-500">({{ output.shortType }})</span>
+        </div>
+        <pre class="mt-1 text-xs text-gray-600 dark:text-gray-400 whitespace-pre-wrap break-words">
+{{ prettify(output.type) }}</pre>
+      </div>
+    </div>
+  </div>
+</template>

package/components/ui/flow-builder/components/edges/DataEdge.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { useVueFlow, BaseEdge, EdgeLabelRenderer, getBezierPath } from '@vue-flow/core'
+import { computed } from 'vue'
+import { getOutputsForNode } from '../../composables/outputRegistry'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  source: {
+    type: String,
+    required: true,
+  },
+  sourceHandle: {
+    type: String,
+    required: true,
+  },
+  sourceX: {
+    type: Number,
+    required: true,
+  },
+  sourceY: {
+    type: Number,
+    required: true,
+  },
+  targetX: {
+    type: Number,
+    required: true,
+  },
+  targetY: {
+    type: Number,
+    required: true,
+  },
+  sourcePosition: {
+    type: String,
+    required: true,
+  },
+  targetPosition: {
+    type: String,
+    required: true,
+  },
+  data: {
+    type: Object,
+    required: true,
+  }
+})
+
+const emit = defineEmits(['select'])
+
+const { findNode } = useVueFlow()
+
+const path = computed(() => getBezierPath(props))
+
+const label = computed(() => {
+  let sourceNode = findNode(props.source)
+  let outputs = getOutputsForNode(sourceNode, props.data.sourceHandle) || []
+  return outputs.map(o => `${o.name}: ${o.shortType ?? o.type}`).join(', ')
+})
+</script>
+
+<template>
+  <!-- You can use the `BaseEdge` component to create your own custom edge more easily -->
+  <BaseEdge :path="path[0]" />
+
+  <!-- Use the `EdgeLabelRenderer` to escape the SVG world of edges and render your own custom label in a `<div>` ctx -->
+  <EdgeLabelRenderer>
+    <div
+      :style="{
+        pointerEvents: 'all',
+        position: 'absolute',
+        transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
+        background: 'rgb(255 255 255 / 20%)',
+        border: '2px solid rgb(255 255 255 / 32%)',
+        padding: '0.5em 1em',
+        borderRadius: '0.5em',
+        maxWidth: '200px',
+        textShadow: '0 1px 5px black',
+        backdropFilter: 'blur(2px)',
+        fontSize: '10px',
+      }"
+      class="nodrag nopan truncate text-xs cursor-pointer"
+      @click="$emit('select')"
+      v-if="label"
+    >
+      {{ label }}
+    </div>
+  </EdgeLabelRenderer>
+</template>

package/components/ui/flow-builder/components/node-editor/ApiRequestEditor.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Plus } from 'lucide-vue-next'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true,
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const node = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value);
+  },
+})
+
+const addKeyValuePair = (type: string) => {
+  if (!node.value.data[type]) {
+    node.value.data[type] = [];
+  }
+  node.value.data[type].push({ key: '', value: '' });
+}
+
+const removeKeyValuePair = (type: string, idx: number) => {
+  node.value.data[type].splice(idx, 1);
+}
+</script>
+
+<template>
+  <div class="w-full grid gap-2">
+    <div class="grid gap-2">
+      <p class="text-sm font-semibold">URL</p>
+      <Sandbox v-model="node.data.url" :variables="[]" placeholder="https://example.com" />
+    </div>
+
+    <div class="grid gap-2">
+      <p class="text-sm font-semibold">Method</p>
+      <Select v-model="node.data.method">
+        <SelectTrigger class="w-full">
+          <SelectValue placeholder="Select a method" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem value="GET">GET</SelectItem>
+            <SelectItem value="POST">POST</SelectItem>
+            <SelectItem value="PUT">PUT</SelectItem>
+            <SelectItem value="PATCH">PATCH</SelectItem>
+            <SelectItem value="DELETE">DELETE</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </div>
+
+    <div class="grid gap-2">
+      <Label class="text-sm font-semibold mb-2">URL parameters</Label>
+      <div class="col-span-2">
+        <div v-for="(pair, idx) in node.data.urlParameters" :key="idx" class="flex items-center gap-2 mb-2">
+          <Sandbox v-model="pair.key" :variables="[]" placeholder="Key" class="w-full max-h-[200px]" />
+          <Sandbox v-model="pair.value" :variables="[]" placeholder="Value" class="w-full max-h-[200px]" />
+  
+          <button
+            type="button"
+            class="text-red-500 hover:text-red-700 ml-2"
+            @click="removeKeyValuePair('urlParameters', idx)"
+            title="Delete"
+          >
+            &times;
+          </button>
+        </div>
+        <Button @click="addKeyValuePair('urlParameters')" variant="outline">
+          <Plus class="size-4" />
+          Add Key-Value Pair
+        </Button>
+      </div>
+    </div>
+
+    <div class="grid gap-2">
+      <Label class="text-sm font-semibold mb-2">Headers</Label>
+      <div class="col-span-2">
+        <div v-for="(pair, idx) in node.data.headers" :key="idx" class="flex items-center gap-2 mb-2">
+          <Sandbox v-model="pair.key" :variables="[]" placeholder="Key" class="w-full max-h-[200px]" />
+          <Sandbox v-model="pair.value" :variables="[]" placeholder="Value" class="w-full max-h-[200px]" />
+  
+          <button
+            type="button"
+            class="text-red-500 hover:text-red-700 ml-2"
+            @click="removeKeyValuePair('headers', idx)"
+            title="Delete"
+          >
+            &times;
+          </button>
+        </div>
+        <Button @click="addKeyValuePair('headers')" variant="outline">
+          <Plus class="size-4" />
+          Add Key-Value Pair
+        </Button>
+      </div>
+    </div>
+
+    <div class="grid gap-2" v-if="['POST', 'PUT', 'PATCH'].includes(node.data.method)">
+      <Label class="text-sm font-semibold mb-2">Body</Label>
+      <div class="col-span-2">
+        <div v-for="(pair, idx) in node.data.body" :key="idx" class="flex items-center gap-2 mb-2">
+          <Sandbox v-model="pair.key" :variables="[]" placeholder="Key" class="w-full max-h-[200px]" />
+          <Sandbox v-model="pair.value" :variables="[]" placeholder="Value" class="w-full max-h-[200px]" />
+  
+          <button
+            type="button"
+            class="text-red-500 hover:text-red-700 ml-2"
+            @click="removeKeyValuePair('body', idx)"
+            title="Delete"
+          >
+            &times;
+          </button>
+        </div>
+        <Button @click="addKeyValuePair('body')" variant="outline">
+          <Plus class="size-4" />
+          Add Key-Value Pair
+        </Button>
+      </div>
+    </div>
+
+    <div class="grid gap-2">
+      <Label class="text-sm font-semibold mb-2">Cookies</Label>
+      <div class="col-span-2">
+        <div v-for="(pair, idx) in node.data.cookies" :key="idx" class="flex items-center gap-2 mb-2">
+          <Sandbox v-model="pair.key" :variables="[]" placeholder="Key" class="w-full max-h-[200px]" />
+          <Sandbox v-model="pair.value" :variables="[]" placeholder="Value" class="w-full max-h-[200px]" />
+  
+          <button
+            type="button"
+            class="text-red-500 hover:text-red-700 ml-2"
+            @click="removeKeyValuePair('cookies', idx)"
+            title="Delete"
+          >
+            &times;
+          </button>
+        </div>
+        <Button @click="addKeyValuePair('cookies')" variant="outline">
+          <Plus class="size-4" />
+          Add Key-Value Pair
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>

package/components/ui/flow-builder/components/node-editor/ConfettiEditor.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true,
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const node = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value);
+  },
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <p>Pops some confetti on the whole screen</p>
+  </div>
+</template>

package/components/ui/flow-builder/components/node-editor/ConfirmEditor.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true,
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const node = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value);
+  },
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <p class="text-sm font-semibold mb-2">Title</p>
+    <Sandbox v-model="node.data.title" :variables="[]" placeholder="Confirmation" class="mb-4" />
+    <p class="text-sm font-semibold mb-2">Message</p>
+    <Sandbox v-model="node.data.message" :variables="[]" placeholder="Are you sure you want to proceed?" class="mb-4" />
+    <p class="text-sm font-semibold mb-2">Confirm text</p>
+    <Sandbox v-model="node.data.confirmText" :variables="[]" placeholder="Confirm" />
+  </div>
+</template>

package/components/ui/flow-builder/components/node-editor/FinishFlowEditor.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true,
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const node = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value);
+  },
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <p class="text-sm text-muted-foreground mb-4">Finishes the flow, closing any open dialogs returning data if needed</p>
+
+    <div class="flex items-center justify-between gap-2">
+      <label class="text-sm font-semibold select-none" for="return-data">Return data</label>
+      <Switch v-model="node.data.returnData" id="return-data" />
+    </div>
+
+    <div v-if="node.data.returnData" class="mt-4">
+      <CodeEditor v-model="node.data.transform" :variables="[]" placeholder="return ..." class="mb-1" />
+      <p class="text-xs text-stone-500">Just make sure you <b>return</b> a value</p>
+    </div>
+  </div>
+</template>

package/components/ui/flow-builder/components/node-editor/IntegrationActionEditor.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed, toRaw } from 'vue';
+import integrationSettingViews from '../../../integration-action-builder/integrations'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true,
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { showBuilder } = useIntegrationActionBuilder()
+
+const node = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value);
+  },
+})
+
+const editBuilder = async () => {
+  let action = node.value.data.action ? structuredClone(toRaw(node.value.data.action)) : null
+  let newAction = await showBuilder([], action);
+  if (newAction) {
+    node.value.data.action = newAction
+    // node.value.data.action = JSON.parse(JSON.stringify(newAction))
+  }
+}
+
+const outputValues = computed(() => {
+  if (!node.value.data.action?.integrationType || !node.value.data.action?.serviceType || !node.value.data.action?.actionType) return {}
+  return integrationSettingViews?.[node.value.data.action?.integrationType]?.serviceTypes?.[node.value.data.action?.serviceType]?.actionTypes?.[node.value.data.action?.actionType]?.outputs
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <p class="text-sm font-semibold mb-2">Integration action</p>
+    <Button @click="editBuilder">
+      <span v-if="node.data.action">{{ node.data.action.serviceType }} - {{ node.data.action.actionType }}</span>
+      <span v-else>Add integration action</span>
+    </Button>
+
+    <div v-if="outputValues">
+      {{ outputValues }}
+    </div>
+  </div>
+</template>