@oneclick.dev/cms-kit 0.0.1

package/components/ui/emoji-picker/EmojiPicker.vue

@@ -0,0 +1,71 @@
+<template>
+  <Popover>
+    <PopoverTrigger asChild>
+      <Button variant="outline" class="w-full aspect-square size-20 border-none">
+        <AppleEmoji :emoji="modelValue" v-if="modelValue" size="36" />
+        <span class="text-xs text-muted-foreground" v-else>Select icon</span>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-[371px]">
+      <Picker :data="emojiIndex" :showSkinTones="false" :showPreview="false" :native="false" set="apple" @select="showEmoji" class="transparent-emoji-picker" />
+    </PopoverContent>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import data from "emoji-mart-vue-fast/data/apple.json";
+import "emoji-mart-vue-fast/css/emoji-mart.css";
+import { Picker, EmojiIndex } from "emoji-mart-vue-fast/src";
+import { useVModel } from "@vueuse/core";
+
+const recentEmojis = ['house', 'gear', 'control_knobs', 'man-woman-boy', 'clock1', 'alarm_clock', 'hourglass', 'eyes', 'the_horns', 'clap', 'thumbsup', 
+                      'thumbsdown', 'speech_balloon', 'tada', 'first_place_medal', 'key', 'open_file_folder', 'gift', 'mag', 'heart', 'star', 'sparkles',
+                      'shopping_bags', 'truck', 'camera_with_flash', 'movie_camera', 'wastebasket', 'round_pushpin', 'label', 'moneybag', 'email', 'earth_africa']
+
+let emojiIndex = new EmojiIndex(data, {
+  recent: recentEmojis
+});
+
+const props = defineProps<{
+  modelValue?: string
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+
+const showEmoji = (emoji) => {
+  modelValue.value = emoji.id;
+}
+</script>
+
+<style lang="scss">
+.transparent-emoji-picker.emoji-mart {
+  border-width: 0;
+  background-color: transparent;
+
+  .emoji-mart-search input {
+    color: var(--muted-foreground);
+  }
+
+  .emoji-mart-scroll {
+    padding: 0;
+  }
+  
+  .emoji-mart-category-label h3 {
+    background-color: var(--accent);
+    color: var(--muted-foreground);
+    margin: .5rem 0;
+    border-radius: .5rem;
+  }
+
+  .emoji-mart-category .emoji-mart-emoji:hover:before, .emoji-mart-emoji-selected:before {
+    background-color: var(--muted);
+  }
+}
+</style>

package/components/ui/emoji-picker/index.ts

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

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue'
+import Builder from './components/Builder.vue'
+
+const props = defineProps<{
+  id: number
+  config: any
+  workflow: any
+}>()
+
+const { closeFlowBuilder } = useFlowBuilder()
+const flowBuilder = ref()
+
+watch(
+  () => props.workflow,
+  async () => {
+    await nextTick()
+    flowBuilder.value?.setState?.(props.workflow)
+  },
+  { immediate: true }
+)
+
+const saveForm = () => {
+  const data = flowBuilder.value?.getState?.()
+  closeFlowBuilder(props.id, data)
+}
+
+const cancel = () => {
+  closeFlowBuilder(props.id, false)
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Sheet :open="true" @update:open="cancel">
+      <SheetContent side="bottom" class="w-full h-full sm:w-full sm:max-w-full">
+        <div class="flex flex-col h-full bg-muted/80 dark:bg-muted/40">
+          <Builder ref="flowBuilder" />
+        </div>
+
+        <div class="flex justify-end gap-2 p-4">
+          <Button variant="outline" @click="cancel">Cancel</Button>
+          <Button @click="saveForm">Save</Button>
+        </div>
+      </SheetContent>
+    </Sheet>
+  </Teleport>
+</template>

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+const { openFlowBuilder } = useFlowBuilder()
+
+const props = defineProps({
+  modelValue: {
+    type: Object
+  }
+})
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: any[]): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true
+})
+
+const editFlow = async () => {
+  let config = await openFlowBuilder(modelValue.value)
+  if (config) {
+    emits('update:modelValue', config)
+  }
+}
+</script>
+
+<template>
+  <Button @click="editFlow">
+    <span v-if="!modelValue || Object.keys(modelValue).length === 0">Build flow</span>
+    <span v-else>Edit flow</span>
+  </Button>
+</template>

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

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

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

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

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