@oneclick.dev/cms-kit 0.0.2 → 0.0.4

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

@@ -1,287 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, provide, nextTick, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
-
-import { VueFlow, Position, ConnectionMode, useVueFlow } from '@vue-flow/core'
-import { MiniMap } from '@vue-flow/minimap'
-
-import StartNode from './nodes/StartNode.vue'
-import EmptyNode from './nodes/EmptyNode.vue'
-
-import ApiRequestNode from './nodes/ApiRequestNode.vue'
-import IntegrationActionNode from './nodes/IntegrationActionNode.vue'
-import ShowToastNode from './nodes/ShowToastNode.vue'
-import ConfirmNode from './nodes/ConfirmNode.vue'
-import ConfettiNode from './nodes/ConfettiNode.vue'
-import TransformDataNode from './nodes/TransformDataNode.vue'
-import SetVariableNode from './nodes/SetVariableNode.vue'
-import VisitUrlNode from './nodes/VisitUrlNode.vue'
-import ShowDialogNode from './nodes/ShowDialogNode.vue'
-import FinishFlowNode from './nodes/FinishFlowNode.vue'
-import ShowModuleNode from './nodes/ShowModuleNode.vue'
-
-import DataEdge from './edges/DataEdge.vue'
-
-import DropzoneBackground from './DropzoneBackground.vue'
-
-import Menu from './Menu.vue'
-import NodeEditor from './NodeEditor.vue'
-import EdgeEditor from './EdgeEditor.vue'
-
-const props = defineProps({
-  workflow: {
-    type: Object,
-    default: null
-  }
-});
-
-const confirmation = useConfirmation()
-
-const { nodes, edges, fitView, onEdgesChange, applyEdgeChanges, onNodesChange, applyNodeChanges, findNode, findEdge, addNodes, removeNodes, addEdges, removeEdges, setNodes, setEdges, toObject } = useVueFlow()
-
-const overlayStack = useOverlayStack()
-
-const randomId = crypto.randomUUID()
-
-const activeNodeId = ref(null);
-const activeEdgeId = ref(null);
-
-const variables = ref([]);
-const computedVariables = ref([]);
-provide('variables', variables);
-provide('computedVariables', computedVariables);
-
-const activeNode = computed(() => {
-  return findNode(activeNodeId.value);
-})
-
-const activeEdge = computed(() => {
-  return findEdge(activeEdgeId.value);
-})
-
-const hideAllToolbars = () => {
-  for (const node of nodes.value) {
-    node.data.toolbarVisible = false;
-  }
-  activeNodeId.value = null;
-  activeEdgeId.value = null;
-}
-
-const setNodeActive = (node: any) => {
-  hideAllToolbars()
-  node.data.toolbarVisible = true;
-  activeNodeId.value = node.id;
-}
-
-const onNodeClick = (args: any) => {
-  setNodeActive(args.node);
-}
-
-const onNodeDrag = (args: any) => {
-  setNodeActive(args.node);
-}
-
-const onEdgeClick = (args: any) => {
-  hideAllToolbars();
-  activeEdgeId.value = args.edge.id;
-}
-
-const onPaneClick = () => {
-  hideAllToolbars();
-}
-
-onNodesChange(async (changes) => {
-  const removeChanges = changes.filter(change => change.type === 'remove' && change.id !== 'START')
-  const otherChanges = changes.filter(change => change.type !== 'remove')
-
-  let confirmed = true
-
-  if (removeChanges.length > 0) {
-    confirmed = await confirmation.confirm(
-      `Are you sure you want to delete ${removeChanges.length} node(s)?`
-    )
-  }
-
-  if (confirmed) {
-    applyNodeChanges([...otherChanges, ...removeChanges])
-  } else {
-    applyNodeChanges(otherChanges)
-  }
-})
-
-onEdgesChange(async (changes) => {
-  const removeChanges = changes.filter(c => c.type === 'remove')
-  const otherChanges = changes.filter(c => c.type !== 'remove')
-
-  let confirmed = true
-
-  if (removeChanges.length > 0) {
-    confirmed = await confirmation.confirm(
-      `Are you sure you want to delete ${removeChanges.length} connection(s)?`
-    )
-  }
-
-  if (confirmed) {
-    applyEdgeChanges([...otherChanges, ...removeChanges])
-
-    const removedIds = new Set(removeChanges.map(c => c.id))
-    edges.value = edges.value.filter(edge => !removedIds.has(edge.id))
-  } else {
-    applyEdgeChanges(otherChanges)
-  }
-})
-
-const removeActiveNode = () => {
-  const node = findNode(activeNodeId.value)!;
-  removeNodes([node], true, false);
-  activeNodeId.value = null;
-}
-
-const connect = (args: any) => {
-  const sourceNode = findNode(args.source)!
-  const targetNode = findNode(args.target)!
-
-  const edgeId = `e${sourceNode.id}->${targetNode.id}`
-
-  const existingEdge = findEdge(edgeId)
-  if (existingEdge) return
-
-  const newEdge = {
-    id: edgeId,
-    source: sourceNode.id,
-    target: targetNode.id,
-    sourceHandle: args.sourceHandle || "success",
-    targetHandle: args.targetHandle,
-    type: 'data',
-    data: {
-      sourceHandle: args.sourceHandle || "success",
-    },
-  }
-
-  addEdges([newEdge])
-}
-
-const createNewNode = (args: any) => {
-  // add new node, set it as active, and connect it to the parent
-  const parent = findNode(args.parentId)!;
-  console.log(parent, parent.position, parent.dimensions)
-  const newNode = {
-    id: crypto.randomUUID(),
-    type: args.type,
-    position: { x: parent.position.x + parent.dimensions.width + 200, y: parent.position.y },
-    data: {
-      // toolbarPosition: Position.Right,
-    }
-  }
-
-  addNodes([newNode]);
-
-  connect({ source: args.parentId, target: newNode.id, sourceHandle: args.sourceHandle ?? undefined });
-}
-
-provide('createNewNode', createNewNode);
-
-const getState = () => {
-  let state = toObject();
-
-  return {
-    ...state,
-    variables: JSON.parse(JSON.stringify(variables.value)),
-    computedVariables: JSON.parse(JSON.stringify(computedVariables.value))
-  };
-}
-
-const setState = (state: any) => {
-  console.log("Set state", state)
-  setNodes(state?.nodes ?? [
-    { 
-      id: 'START',
-      type: 'start', 
-      position: { x: 0, y: 0 },
-      data: {}
-    }
-  ])
-  setEdges(state?.edges ?? [])
-  variables.value = state?.variables ?? []
-  computedVariables.value = state?.computedVariables ?? []
-}
-
-onMounted(() => {
-  overlayStack.push(randomId)
-  setState(props.workflow)
-})
-
-onUnmounted(() => {
-  overlayStack.pop(randomId)
-})
-
-defineExpose({
-  getState,
-  setState
-})
-
-const nodeComponents = {
-  'empty': EmptyNode,
-  'start': StartNode,
-  'api-request': ApiRequestNode,
-  'integration-action': IntegrationActionNode,
-  'show-toast': ShowToastNode,
-  'confirm': ConfirmNode,
-  'show-dialog': ShowDialogNode,
-  'confetti': ConfettiNode,
-  'transform-data': TransformDataNode,
-  'set-variable': SetVariableNode,
-  'visit-url': VisitUrlNode,
-  'finish-flow': FinishFlowNode,
-  'show-module': ShowModuleNode,
-}
-
-const edgeComponents = {
-  'data': DataEdge,
-}
-</script>
-
-<template>
-  <div class="relative flex-1 w-full h-full">
-    <VueFlow
-      :nodes="nodes"
-      :edges="edges"
-      :apply-default="false"
-      :connection-mode="ConnectionMode.Strict"
-      :default-edge-options="{ type: 'animation', animated: true }"
-      @node-click="onNodeClick"
-      @node-drag="onNodeDrag"
-      @edge-click="onEdgeClick"
-      @pane-click="onPaneClick"
-      @connect="connect"
-    >
-      <template
-        v-for="(Component, type) in nodeComponents"
-        :key="type"
-        v-slot:[`node-${type}`]="nodeProps"
-      >
-        <component :is="Component" v-bind="nodeProps" />
-      </template>
-
-      <template
-        v-for="(Component, type) in edgeComponents"
-        :key="type"
-        v-slot:[`edge-${type}`]="edgeProps"
-      >
-        <component :is="Component" v-bind="edgeProps" @select="activeEdgeId = edgeProps.id" />
-      </template>
-  
-      <DropzoneBackground />
-    </VueFlow>
-
-    <Menu :nodes="nodes" />
-
-    <MiniMap pannable />
-    
-    <Transition name="slide-fade">
-      <NodeEditor v-if="activeNode" v-model="activeNode" @close="activeNodeId = null" @remove="removeActiveNode" />
-    </Transition>
-    <Transition name="slide-fade">
-      <EdgeEditor v-if="activeEdge" v-model="activeEdge" @close="activeEdgeId = null" />
-    </Transition>
-  </div>
-</template>

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

@@ -1,13 +0,0 @@
-<script lang="ts" setup>
-import { Background } from '@vue-flow/background'
-</script>
-
-<template>
-  <div class="dropzone-background">
-    <Background :size="2" :gap="20" pattern-color="#ffffff20" />
-
-    <div class="overlay">
-      <slot />
-    </div>
-  </div>
-</template>

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

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { X } from 'lucide-vue-next'
-import DataEdgeEditor from './edge-editor/DataEdgeEditor.vue';
-
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true,
-  }
-});
-
-const emit = defineEmits(['update:modelValue', 'close']);
-
-const edge = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value);
-  },
-})
-</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]">
-    <div class="flex items-center justify-between gap-2 mb-2">
-      <span class="font-bold text-xl">Connection</span>
-      <Button size="icon" variant="ghost" @click="emit('close')">
-        <X class="size-4" />
-      </Button>
-    </div>
-
-    <hr class="my-4">
-
-    <DataEdgeEditor v-if="edge.type === 'data'" v-model="edge" />
-  </div>
-</template>

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

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import { ZoomIn, ZoomOut, Fullscreen, Plus, Square, Play } from 'lucide-vue-next'
-import { useVueFlow } from '@vue-flow/core'
-import { Controls, ControlButton } from '@vue-flow/controls'
-import { useRunProcess } from '../composables/useRunProcess'
-import { useLayout } from '../composables/useLayout'
-import VariablesWidget from './variables/Widget.vue'
-
-const { graph, layout } = useLayout()
-
-const { run, stop, reset, isRunning } = useRunProcess({ graph, cancelOnError: true })
-
-const { addNodes, toObject, fitView, zoomTo, updateNodeInternals } = useVueFlow()
-
-const addNode = () => {
-  addNodes({
-    id: crypto.randomUUID(),
-    position: { x: 200, y: 200 },
-    data: { label: 'NEW NODE' },
-  })
-  updateNodeInternals()
-}
-
-const startWorkflow = () => {
-  const flow = toObject()
-  layout(flow.nodes, flow.edges, 'LR')
-  run(flow.nodes)
-  fitView()
-  zoomTo(1.5)
-}
-
-onMounted(() => {
-  fitView()
-  zoomTo(1.5)
-})
-</script>
-
-<template>
-  <div class="control-menu absolute top-4 left-4 rounded-lg overflow-hidden ring-1 ring-gray-200">
-    <TooltipProvider>
-      <Controls :showInteractive="false">
-        <template #icon-zoom-in>
-          <ZoomIn class="text-gray-500 size-5" />
-        </template>
-        <template #icon-zoom-out>
-          <ZoomOut class="text-gray-500 size-5" />
-        </template>
-        <template #icon-fit-view>
-          <Fullscreen class="text-gray-500 size-5" />
-        </template>
-
-        <div class="flex">
-          <Tooltip>
-            <TooltipTrigger as-child>
-              <ControlButton @click="addNode">
-                <Plus class="text-gray-500 size-5" />
-              </ControlButton>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>Add node</p>
-            </TooltipContent>
-          </Tooltip>
-          <VariablesWidget />
-        </div>
-
-        <!-- <div class="flex">
-          <ControlButton v-if="isRunning" class="stop-btn" title="stop" @click="stop">
-            <Square class="text-gray-500 size-5" />
-            <span class="spinner" />
-          </ControlButton>
-          <ControlButton v-else title="start" @click="startWorkflow">
-            <Play class="text-gray-500 size-5" />
-          </ControlButton>
-        </div> -->
-      </Controls>
-    </TooltipProvider>
-  </div>
-</template>

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

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

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