feat: draft workflow elements

Author: cwandev

apps/www/content/2.components/workflow.md

@@ -0,0 +1,8 @@
+---
+title: Workflow
+description:
+icon: lucide:workflow
+---
+
+:::ComponentLoader{label="Workflow" componentName="Workflow"}
+:::

apps/www/nuxt.config.ts

@@ -48,6 +48,19 @@ export default defineNuxtConfig({
       sourcemap: false,
       chunkSizeWarningLimit: 1500,
     },
+    optimizeDeps: {
+      include: [
+        'dayjs',
+        '@braintree/sanitize-url',
+        'mermaid',
+      ],
+      esbuildOptions: {
+        target: 'esnext',
+      },
+    },
+    resolve: {
+      dedupe: ['dayjs'],
+    },
   },
 
   nitro: {

apps/www/plugins/ai-elements.ts

@@ -28,6 +28,7 @@ import {
   Suggestion,
   SuggestionAiInput,
   Task,
+  Workflow,
 } from '@repo/examples'
 
 import ComponentLoader from '@/components/ComponentLoader.vue'
@@ -68,4 +69,5 @@ export default defineNuxtPlugin((nuxtApp) => {
   vueApp.component('InlineCitation', InlineCitation)
   vueApp.component('CodeBlock', CodeBlock)
   vueApp.component('CodeBlockDark', CodeBlockDark)
+  vueApp.component('Workflow', Workflow)
 })

packages/elements/package.json

@@ -8,6 +8,9 @@
   },
   "dependencies": {
     "@repo/shadcn-vue": "workspace:*",
+    "@vue-flow/background": "^1.3.2",
+    "@vue-flow/controls": "^1.1.3",
+    "@vue-flow/core": "^1.47.0",
     "@vueuse/core": "^13.9.0",
     "ai": "^5.0.60",
     "lucide-vue-next": "^0.544.0",

packages/elements/src/canvas/Canvas.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { FlowEmits, FlowProps } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
+import { VueFlow } from '@vue-flow/core'
+import { useForwardPropsEmits } from 'reka-ui'
+import { Controls } from '../controls'
+import '@vue-flow/core/dist/style.css'
+import '@vue-flow/core/dist/theme-default.css'
+
+const props = withDefaults(defineProps<FlowProps>(), {
+  deleteKeyCode: () => ['Backspace', 'Delete'],
+  fitViewOnInit: true,
+  panOnDrag: false,
+  panOnScroll: true,
+  selectNodesOnDrag: true,
+  zoomOnDoubleClick: false,
+})
+
+const emits = defineEmits<FlowEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <VueFlow data-slot="canvas" v-bind="forwarded">
+    <Background />
+    <Controls />
+    <slot />
+  </VueFlow>
+</template>

packages/elements/src/canvas/index.ts

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

packages/elements/src/controls/Controls.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { Controls as ControlsPrimitive } from '@vue-flow/controls'
+import { reactiveOmit } from '@vueuse/core'
+import '@vue-flow/controls/dist/style.css'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <ControlsPrimitive
+    data-slot="controls"
+    v-bind="delegatedProps"
+    :class="cn('gap-px overflow-hidden rounded-md border bg-card p-1 shadow-none! [&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent! [&>button]:hover:bg-secondary!', props.class)"
+  />
+</template>

packages/elements/src/controls/index.ts

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

packages/examples/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@repo/elements": "workspace:*",
+    "@vue-flow/core": "^1.47.0",
     "ai": "^5.0.60",
     "lucide-vue-next": "^0.544.0",
     "nanoid": "^5.1.6",

packages/examples/src/index.ts

@@ -27,3 +27,4 @@ export { default as Sources } from './sources.vue'
 export { default as SuggestionAiInput } from './suggestion-ai-input.vue'
 export { default as Suggestion } from './suggestion.vue'
 export { default as Task } from './task.vue'
+export { default as Workflow } from './workflow.vue'