@oneclick.dev/cms-kit 0.0.1

package/components/ui/flow-builder/composables/useProcessNodeLogic.js

@@ -0,0 +1,55 @@
+import { computed, toRef } from 'vue'
+import { useNodeConnections } from '@vue-flow/core'
+import { ProcessStatus } from './useRunProcess'
+
+export function useProcessNodeLogic(props) {
+  const sourceConnections = useNodeConnections({ handleType: 'target' })
+  const targetConnections = useNodeConnections({ handleType: 'source' })
+
+  const isStartNode = computed(() => sourceConnections.value.length === 0)
+  const isEndNode = computed(() => targetConnections.value.length === 0)
+
+  const status = toRef(() => props.data.status)
+
+  const bgColor = computed(() => {
+    if (isStartNode.value) return '#2563eb'
+
+    switch (status.value) {
+      case ProcessStatus.ERROR:
+        return '#f87171'
+      case ProcessStatus.FINISHED:
+        return '#42B983'
+      case ProcessStatus.CANCELLED:
+        return '#fbbf24'
+      default:
+        return '#4b5563'
+    }
+  })
+
+  const processLabel = computed(() => {
+    if (isStartNode.value) return '📦'
+
+    switch (status.value) {
+      case ProcessStatus.ERROR:
+        return '❌'
+      case ProcessStatus.SKIPPED:
+        return '🚧'
+      case ProcessStatus.CANCELLED:
+        return '🚫'
+      case ProcessStatus.FINISHED:
+        return '😎'
+      default:
+        return '🏠'
+    }
+  })
+
+  return {
+    sourceConnections,
+    targetConnections,
+    isStartNode,
+    isEndNode,
+    bgColor,
+    processLabel,
+    status
+  }
+}

package/components/ui/flow-builder/composables/useRunProcess.js

@@ -0,0 +1,267 @@
+import { ref, toRef, toValue } from 'vue'
+import { useVueFlow } from '@vue-flow/core'
+import taskHandlers from './taskHandlers'
+
+export const ProcessStatus = {
+  ERROR: 'error',
+  SKIPPED: 'skipped',
+  CANCELLED: 'cancelled',
+  FINISHED: 'finished',
+  RUNNING: 'running',
+}
+
+/**
+ * Composable to simulate running a process tree.
+ *
+ * It loops through each node, pretends to run an async process, and updates the node's data indicating whether the process has finished.
+ * When one node finishes, the next one starts.
+ *
+ * When a node has multiple descendants, it will run them in parallel.
+ *
+ * @param options
+ * @param options.graph The graph object containing the nodes and edges.
+ * @param options.cancelOnError Whether to cancel the process if an error occurs.
+ * @param options.nodes The nodes to run.
+ * @param options.edges The edges to run.
+ * @param options.variables The variables to run.
+ * @param options.computedVariables The computed variables to run.
+ * @param options.onFinish The function to call when the process finishes.
+ */
+export function useRunProcess({
+  graph: dagreGraph,
+  cancelOnError = true,
+  nodes = [],
+  edges = [],
+  variables = [],
+  computedVariables = [],
+  onFinish
+}) {
+  const { updateNodeData, getConnectedEdges, findNode } = useVueFlow()
+  const nodeOutputs = new Map()
+  
+  const nodeMap = new Map(nodes.map((node) => [node.id, node]))
+
+  const graph = toRef(() => toValue(dagreGraph))
+
+  const isRunning = ref(false)
+
+  /** Map of running tasks with the node ID as the key and the timeout as the value. */
+  const runningTasks = new Map()
+
+  /** Set of node ids of nodes that have been executed  */
+  const executedNodes = new Set()
+
+  /** Set of node ids yet to be executed */
+  const upcomingTasks = new Set()
+
+  /** Local copy of the variables, so we can modify them without affecting the original variables */
+  const localVariables = ref(variables ? JSON.parse(JSON.stringify(variables.map(v => ({ ...v, value: Object.keys(v).includes('defaultValue') ? v.defaultValue : v.value ?? null })))) : [])
+
+  /**
+   * Run the process on a node.
+   * It will mark the node as running, simulate an async process, and then mark the node as finished or errored.
+   *
+   * @param nodeId The ID of the node to run.
+   * @param isStart Whether this is a starting node.
+   */
+  async function runNode(nodeId, isStart = false) {
+    if (executedNodes.has(nodeId)) {
+      return
+    }
+
+    // save the upcoming task in case it gets cancelled before we even start it
+    upcomingTasks.add(nodeId)
+
+    // get all incoming edges to this node
+    const incomers = getConnectedEdges(nodeId).filter((connection) => connection.target === nodeId)
+
+    // wait for edge animations to finish before starting the process
+    await Promise.all(incomers.map((incomer) => until(() => !incomer.data?.isAnimating)))
+
+    // remove the upcoming task since we are about to start it
+    upcomingTasks.clear()
+
+    if (!isRunning.value) {
+      // The process was stopped
+      return
+    }
+
+    // mark the node as executed, so it doesn't run again
+    executedNodes.add(nodeId)
+
+    updateNodeStatus(nodeId, ProcessStatus.RUNNING)
+
+    // RUN THE TASK
+    try {
+      // Step 1: Gather input from predecessors
+      const predecessors = graph.value.predecessors(nodeId) || []
+      const inputFromPredecessors = Object.assign({}, ...predecessors.map((id) => nodeOutputs.get(id) ?? {}))
+      const input = {
+        ...inputFromPredecessors,
+        ...Object.fromEntries(localVariables.value.map(v => [v.name, v.value]))
+      }
+      
+      // Step 2: Find the node and its task handler
+      const node = nodeMap?.size > 0 ? nodeMap.get(nodeId) : findNode(nodeId)
+
+      const taskFn = taskHandlers[node.data.taskType ?? node.type]
+
+      console.log('Running task:', node.data.taskType, taskFn)
+
+      // Step 3: Execute the task
+      const result = taskFn ? await taskFn(input, { node, graph: graph.value, onFinish, localVariables }) : {}
+    
+      // Step 4: Save output for child nodes
+      nodeOutputs.set(nodeId, result)
+      updateNodeStatus(nodeId, ProcessStatus.FINISHED)
+    
+      // Step 5: Run children
+      const outgoingEdges = edges.filter(edge => edge.source === nodeId)
+
+      const hasBranching = outgoingEdges.some(edge => edge.sourceHandle)
+
+      for (const edge of outgoingEdges) {
+        const { source, sourceHandle } = edge
+        const nodeType = nodeMap.get(source).type
+
+        const shouldRun =
+          (nodeType === 'start') ||
+          (nodeType === 'confirm' && sourceHandle === 'success' && result.confirmed === true) ||
+          (nodeType === 'confirm' && sourceHandle === 'error' && result.confirmed === false) ||
+          (nodeType === 'integration-action' && sourceHandle === 'success' && result.result?.success === true) ||
+          (nodeType === 'integration-action' && sourceHandle === 'error' && result.result?.success === false) ||
+          (nodeType === 'api-request' && sourceHandle === 'success' && result.result?.success === true) ||
+          (nodeType === 'api-request' && sourceHandle === 'error' && result.result?.success === false) ||
+          (!['confirm', 'integration-action', 'api-request'].includes(nodeType) && sourceHandle === 'success')
+
+        console.log('should run', shouldRun, nodeType, sourceHandle, result, hasBranching)
+
+        if (shouldRun) {
+          await runNode(edge.target)
+        }
+      }
+    } catch (err) {
+      console.error(`Error in node ${nodeId}:`, err)
+      updateNodeStatus(nodeId, ProcessStatus.ERROR)
+    
+      if (toValue(cancelOnError)) {
+        await skipDescendants(nodeId)
+      }
+    }
+  }
+
+  /**
+   * Run a sequence of nodes.
+   * It will start with the nodes that have no predecessors and then run the process on each node in sequence.
+   * If a node has multiple descendants, it will run them in parallel.
+   * If an error occurs, it will stop the process and mark all descendants as skipped.
+   * If cancelOnError is true, it will stop the process if an error occurs.
+   * If the process is stopped, it will mark all running nodes as cancelled.
+   *
+   * @param nodes The nodes to run.
+   */
+  async function run(nodes) {
+    // if the process is already running, we don't want to start it again
+    if (isRunning.value) {
+      return
+    }
+
+    // reset all nodes to their initial state
+    reset(nodes)
+
+    isRunning.value = true
+
+    // get all starting nodes (nodes with no predecessors)
+    const startingNodes = nodes.filter((node) => graph.value.predecessors(node.id)?.length === 0)
+
+    // run the process on all starting nodes in parallel
+    await Promise.all(startingNodes.map((node) => runNode(node.id, true)))
+
+    clear()
+  }
+
+  /**
+   * Reset all nodes to their initial state.
+   *
+   * @param nodes The nodes to reset.
+   */
+  function reset(nodes) {
+    clear()
+
+    for (const node of nodes) {
+      updateNodeStatus(node.id, null)
+    }
+  }
+
+  /**
+   * Skip all descendants of a node.
+   *
+   * @param nodeId The ID of the node to skip descendants for.
+   */
+  async function skipDescendants(nodeId) {
+    const children = graph.value.successors(nodeId) || []
+
+    for (const child of children) {
+      updateNodeStatus(child, ProcessStatus.SKIPPED)
+      await skipDescendants(child)
+    }
+  }
+
+  /**
+   * Stop the process.
+   *
+   * It will mark all running nodes as cancelled and skip all upcoming tasks.
+   */
+  async function stop() {
+    isRunning.value = false
+
+    for (const nodeId of upcomingTasks) {
+      clearTimeout(runningTasks.get(nodeId))
+      runningTasks.delete(nodeId)
+      updateNodeStatus(nodeId, ProcessStatus.CANCELLED)
+      await skipDescendants(nodeId)
+    }
+
+    for (const [nodeId, task] of runningTasks) {
+      clearTimeout(task)
+      runningTasks.delete(nodeId)
+      updateNodeStatus(nodeId, ProcessStatus.CANCELLED)
+      await skipDescendants(nodeId)
+    }
+
+    executedNodes.clear()
+    upcomingTasks.clear()
+  }
+
+  /**
+   * Clear all running tasks and executed nodes.
+   */
+  function clear() {
+    isRunning.value = false
+    executedNodes.clear()
+    runningTasks.clear()
+  }
+
+  /**
+   * Update the status of a node.
+   *
+   * @param nodeId The ID of the node to update.
+   * @param status The new status of the node.
+   */
+  function updateNodeStatus(nodeId, status) {
+    updateNodeData(nodeId, { status })
+  }
+
+  return { run, stop, reset, isRunning }
+}
+
+async function until(condition) {
+  return new Promise((resolve) => {
+    const interval = setInterval(() => {
+      if (condition()) {
+        clearInterval(interval)
+        resolve(true)
+      }
+    }, 100)
+  })
+}

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

@@ -0,0 +1,5 @@
+export { default as FlowBuilder } from './FlowBuilder.vue'
+export { default as FlowBuilderSelect } from './FlowBuilderSelect.vue'
+
+export { useRunProcess } from './composables/useRunProcess'
+export { useLayout } from './composables/useLayout'

package/components/ui/flow-builder/types.ts

@@ -0,0 +1,7 @@
+export interface FlowVariable {
+    id: string;
+    type: string;
+    name: string;
+    defaultValue: any;
+    value: any;
+}

package/components/ui/form/FormControl.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { Slot } from 'reka-ui'
+import { useFormField } from './useFormField'
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+</script>
+
+<template>
+  <Slot
+    :id="formItemId"
+    data-slot="form-control"
+    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-invalid="!!error"
+  >
+    <slot />
+  </Slot>
+</template>

package/components/ui/form/FormDescription.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+import { useFormField } from './useFormField'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { formDescriptionId } = useFormField()
+</script>
+
+<template>
+  <p
+    :id="formDescriptionId"
+    data-slot="form-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </p>
+</template>

package/components/ui/form/FormItem.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { cn } from '../../../lib/utils'
+import { useId } from 'reka-ui'
+import { type HTMLAttributes, provide } from 'vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const id = useId()
+provide(FORM_ITEM_INJECTION_KEY, id)
+</script>
+
+<template>
+  <div
+    data-slot="form-item"
+    :class="cn('grid gap-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/components/ui/form/FormLabel.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { LabelProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+import { Label } from '../label'
+import { useFormField } from './useFormField'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const { error, formItemId } = useFormField()
+</script>
+
+<template>
+  <Label
+    data-slot="form-label"
+    :data-error="!!error"
+    :class="cn(
+      'data-[error=true]:text-destructive-foreground',
+      props.class,
+    )"
+    :for="formItemId"
+  >
+    <slot />
+  </Label>
+</template>

package/components/ui/form/FormMessage.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { cn } from '../../../lib/utils'
+import { ErrorMessage } from 'vee-validate'
+import { type HTMLAttributes, toValue } from 'vue'
+import { useFormField } from './useFormField'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { name, formMessageId } = useFormField()
+</script>
+
+<template>
+  <ErrorMessage
+    :id="formMessageId"
+    data-slot="form-message"
+    as="p"
+    :name="toValue(name)"
+    :class="cn('text-destructive-foreground text-sm', props.class)"
+  />
+</template>

package/components/ui/form/index.ts

@@ -0,0 +1,7 @@
+export { default as FormControl } from './FormControl.vue'
+export { default as FormDescription } from './FormDescription.vue'
+export { default as FormItem } from './FormItem.vue'
+export { default as FormLabel } from './FormLabel.vue'
+export { default as FormMessage } from './FormMessage.vue'
+export { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+export { Form, Field as FormField, FieldArray as FormFieldArray } from 'vee-validate'

package/components/ui/form/injectionKeys.ts

@@ -0,0 +1,4 @@
+import type { InjectionKey } from 'vue'
+
+export const FORM_ITEM_INJECTION_KEY
+  = Symbol() as InjectionKey<string>

package/components/ui/form/useFormField.ts

@@ -0,0 +1,30 @@
+import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'
+import { inject } from 'vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+
+export function useFormField() {
+  const fieldContext = inject(FieldContextKey)
+  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
+
+  if (!fieldContext)
+    throw new Error('useFormField should be used within <FormField>')
+
+  const { name } = fieldContext
+  const id = fieldItemContext
+
+  const fieldState = {
+    valid: useIsFieldValid(name),
+    isDirty: useIsFieldDirty(name),
+    isTouched: useIsFieldTouched(name),
+    error: useFieldError(name),
+  }
+
+  return {
+    id,
+    name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}

package/components/ui/form-builder/FormBuilder.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { nextTick, ref, watch } from 'vue'
+import FormBuilderWrapper from './components/FormBuilderWrapper.vue'
+
+const props = defineProps<{
+  id: number
+  config: any
+}>()
+
+const { closeFormBuilder } = useFormBuilder()
+const formBuilder = ref()
+
+watch(
+  () => props.config,
+  async () => {
+    await nextTick()
+    formBuilder.value?.setState(props.config)
+  },
+  { immediate: true }
+)
+
+const save = () => {
+  const data = formBuilder.value.getState()
+  console.log("Saving form builder", data)
+  closeFormBuilder(props.id, data)
+}
+
+const cancel = () => {
+  closeFormBuilder(props.id, false)
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Sheet :open="true" @update:open="cancel">
+      <SheetContent side="bottom" class="w-full h-full sm:max-w-full">
+        <FormBuilderWrapper ref="formBuilder" />
+        <div class="flex justify-end gap-2 p-4">
+          <Button variant="outline" @click="cancel">Cancel</Button>
+          <Button @click="save">Save</Button>
+        </div>
+      </SheetContent>
+    </Sheet>
+  </Teleport>
+</template>

package/components/ui/form-builder/FormBuilderSelect.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+const { openFormBuilder } = useFormBuilder()
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    required: true
+  },
+  buildText: {
+    type: String,
+    default: 'Build form'
+  },
+  editText: {
+    type: String,
+    default: 'Edit form'
+  }
+})
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: any[]): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true
+})
+
+const editForm = async () => {
+  let config = await openFormBuilder(modelValue.value)
+  if (config) {
+    emits('update:modelValue', config)
+  }
+}
+</script>
+
+<template>
+  <Button @click="editForm">
+    <span v-if="!modelValue || modelValue.length === 0">{{ buildText }}</span>
+    <span v-else>{{ editText }}</span>
+  </Button>
+</template>

package/components/ui/form-builder/FormDisplayer.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import FormBuilderWrapper from './components/FormBuilderWrapper.vue';
+import { ref, nextTick, onMounted } from 'vue'
+
+const props = defineProps({
+  settings: {
+    type: Object,
+    required: true
+  },
+  onFinish: {
+    type: Function,
+    default: () => {}
+  },
+  variables: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const form = ref()
+
+const loadForm = async () => {
+  await nextTick()
+  form.value.setState({
+    ...props.settings,
+    layoutRef: {},
+    itemRefs: {},
+  })
+  form.value.fillDefaultValues()
+}
+
+onMounted(() => {
+  loadForm()
+})
+</script>
+
+<template>
+  <FormBuilderWrapper ref="form" :isPresentationMode="true" :onFinish="onFinish" :providedVariables="variables" />
+</template>

package/components/ui/form-builder/components/AdminElementEditor.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import settingViews from './admin/element-setting-views';
+import Transformer from '../components/admin/Transformer.vue'
+
+const activeElement = inject('activeElement');
+const state = inject('state');
+
+const emit = defineEmits(['removeItem']);
+
+function removeItem() {
+    emit('removeItem', activeElement.value.i);
+    activeElement.value = null;
+}
+
+const newName = ref("");
+
+watch(activeElement, () => {
+    newName.value = activeElement.value.variableName || "";
+})
+
+function updateVariableName() {
+    let oldName = activeElement.value.variableName;
+    activeElement.value.variableName = newName.value;
+
+    if (state.elementValues[oldName]) {
+        state.elementValues[newName.value] = state.elementValues[oldName];
+        delete state.elementValues[oldName];
+    }
+}
+
+onMounted(() => {
+    newName.value = activeElement.value?.variableName || "";
+})
+</script>
+
+<template>
+    <div class="shrink-0 p-2 rounded-xl border bg-card w-[275px] @7xl/custom-dashboard:w-[325px]">
+        <Input type="text" placeholder="Variable Name" v-model="newName" @blur="updateVariableName" class="bg-gray-200/25 hover:bg-gray-200/35 dark:bg-muted/25 dark:hover:bg-muted/30 border-transparent hover:border-ring focus:border-ring dark:focus:border-ring shadow-none focus:shadow-xs mb-4" />
+
+        <component :is="settingViews[activeElement.component]" />
+
+        <p class="text-sm font-semibold mt-4 mb-2">Visible</p>
+        <Transformer v-model="activeElement.visibility" placeholder="true" />
+
+        <Button variant="destructive" @click="removeItem" class="mt-4">Remove Element</Button>
+    </div>
+</template>