@oneclick.dev/cms-kit 0.0.1

package/components/ui/integration-action-builder/integrations/openai/AddDocument.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import InterpolationField from '../../InterpolationField.vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const form = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+</script>
+
+<template>
+  <div>
+    <h2 class="text-lg font-semibold mb-2">Add document</h2>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex flex-col gap-1">
+        <p class="text-sm font-semibold">Collection</p>
+        <InterpolationField v-model="form.collection" />
+      </div>
+      <div class="flex flex-col gap-1">
+        <p class="text-sm font-semibold">Document ID</p>
+        <InterpolationField v-model="form.documentId" />
+        <p class="text-xs text-muted-foreground">Leave blank to let Firestore generate a random ID</p>
+      </div>
+      <div class="flex flex-col gap-1">
+        <p class="text-sm font-semibold">Data</p>
+        <InterpolationField v-model="form.data" />
+      </div>
+    </div>
+  </div>
+</template>

package/components/ui/integration-action-builder/integrations/openai/GenerateText.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import InterpolationField from '../../InterpolationField.vue'
+import { computed } from 'vue'
+import ModelSelector from './components/ModelSelector.vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const form = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+</script>
+
+<template>
+  <div>
+    <h2 class="text-lg font-semibold mb-2">Generate text</h2>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex flex-col gap-1">
+        <p class="text-sm font-semibold">Model</p>
+        <ModelSelector v-model="form.model" />
+      </div>
+      <div class="flex flex-col gap-1">
+        <p class="text-sm font-semibold">Prompt</p>
+        <InterpolationField v-model="form.prompt" />
+      </div>
+    </div>
+  </div>
+</template>

package/components/ui/integration-action-builder/integrations/openai/components/ModelSelector.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const mutableValue = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+</script>
+
+<template>
+  <Select v-model="mutableValue">
+    <SelectTrigger class="w-[180px]">
+      <SelectValue placeholder="Select a model" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectGroup>
+        <SelectLabel>Reasoning models</SelectLabel>
+        <SelectItem value="o4-mini">
+          o4-mini
+        </SelectItem>
+        <SelectItem value="o3">
+          o3
+        </SelectItem>
+        <SelectItem value="o3-pro">
+          o3-pro
+        </SelectItem>
+        <SelectItem value="o3-mini">
+          o3-mini
+        </SelectItem>
+        <SelectItem value="o1">
+          o1
+        </SelectItem>
+        <SelectItem value="o1-pro">
+          o1-pro
+        </SelectItem>
+        <SelectLabel>Flagship chat models</SelectLabel>
+        <SelectItem value="gpt-4.1">
+          GPT-4.1
+        </SelectItem>
+        <SelectItem value="gpt-4o">
+          GPT-4o
+        </SelectItem>
+        <SelectLabel>Cost-optimized models</SelectLabel>
+        <SelectItem value="o4-mini">
+          o4-mini
+        </SelectItem>
+        <SelectItem value="gpt-4.1-mini">
+          GPT-4.1 mini
+        </SelectItem>
+        <SelectItem value="gpt-4.1-nano">
+          GPT-4.1 nano
+        </SelectItem>
+        <SelectItem value="o3-mini">
+          o3-mini
+        </SelectItem>
+        <SelectItem value="gpt-4o-mini">
+          GPT-4o mini
+        </SelectItem>
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+</template>

package/components/ui/integration-action-builder/integrations/openai/index.ts

@@ -0,0 +1,116 @@
+import GenerateText from "./GenerateText.vue"
+import AddDocument from "./AddDocument.vue"
+
+export default {
+  name: "OpenAI",
+  serviceTypes: {
+    text: {
+      name: "Text",
+      actionTypes: {
+        generateText: {
+          name: "Generate text",
+          component: GenerateText,
+          outputs: {
+            success: [
+              {
+                name: "result",
+                type: {
+                  success: "true",
+                  response: "string",
+                },
+              },
+            ],
+            error: [
+              {
+                name: "result",
+                type: {
+                  success: "false",
+                  error: "string | { message: string; code?: string }",
+                  statusCode: "number?",
+                },
+              },
+            ],
+          },
+        },
+        chatWithMemory: {
+          name: "Chat with memory",
+          component: AddDocument,
+          outputs: {
+            success: [
+              {
+                name: "result",
+                type: {
+                  success: "boolean",
+                  documentId: "string",
+                  message: "string?",
+                },
+              },
+            ],
+            error: [
+              {
+                name: "result",
+                type: {
+                  success: "false",
+                  error: "string | { message: string; code?: string }",
+                  statusCode: "number?",
+                },
+              },
+            ],
+          },
+        },
+        moderation: {
+          name: "Moderation",
+          component: AddDocument,
+          outputs: {
+            success: [
+              {
+                name: "result",
+                type: {
+                  success: "true",
+                  approved: "boolean",
+                  feedback: "string?"
+                },
+              },
+            ],
+            error: [
+              {
+                name: "result",
+                type: {
+                  success: "false",
+                  error: "string | { message: string; code?: string }",
+                  statusCode: "number?",
+                },
+              },
+            ],
+          },
+        },
+        imageGeneration: {
+          name: "Image generation",
+          component: AddDocument,
+          outputs: {
+            success: [
+              {
+                name: "result",
+                type: {
+                  success: "boolean",
+                  documentId: "string",
+                  message: "string?",
+                },
+              },
+            ],
+            error: [
+              {
+                name: "result",
+                type: {
+                  success: "false",
+                  error: "string | { message: string; code?: string }",
+                  statusCode: "number?",
+                },
+              },
+            ],
+          },
+        },
+      },
+    },
+  },
+}

package/components/ui/integration-action-builder/integrations/twilio/MakeCall.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import InterpolationField from '../../InterpolationField.vue'
+import { computed } from 'vue'
+import ModelSelector from './components/ModelSelector.vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const form = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+</script>
+
+<template>
+  <div>
+    <h2 class="text-lg font-semibold mb-2">Generate text</h2>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex flex-col gap-1">
+        <p class="text-sm font-semibold">Model</p>
+        <ModelSelector v-model="form.model" />
+      </div>
+      <div class="flex flex-col gap-1">
+        <p class="text-sm font-semibold">Prompt</p>
+        <InterpolationField v-model="form.prompt" />
+      </div>
+    </div>
+  </div>
+</template>

package/components/ui/integration-action-builder/integrations/twilio/SendSMS.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import InterpolationField from '../../InterpolationField.vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const form = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+</script>
+
+<template>
+  <div>
+    <h2 class="text-lg font-semibold mb-2">Send SMS</h2>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex flex-col gap-1">
+        <p class="text-sm font-semibold">To</p>
+        <InterpolationField v-model="form.to" placeholder="+123456789" />
+      </div>
+      <div class="flex flex-col gap-1">
+        <p class="text-sm font-semibold">Body</p>
+        <InterpolationField v-model="form.body" placeholder="Hello, this is a test message" />
+      </div>
+    </div>
+  </div>
+</template>

package/components/ui/integration-action-builder/integrations/twilio/components/ModelSelector.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const mutableValue = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+</script>
+
+<template>
+  <Select v-model="mutableValue">
+    <SelectTrigger class="w-[180px]">
+      <SelectValue placeholder="Select a model" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectGroup>
+        <SelectLabel>Reasoning models</SelectLabel>
+        <SelectItem value="o4-mini">
+          o4-mini
+        </SelectItem>
+        <SelectItem value="o3">
+          o3
+        </SelectItem>
+        <SelectItem value="o3-pro">
+          o3-pro
+        </SelectItem>
+        <SelectItem value="o3-mini">
+          o3-mini
+        </SelectItem>
+        <SelectItem value="o1">
+          o1
+        </SelectItem>
+        <SelectItem value="o1-pro">
+          o1-pro
+        </SelectItem>
+        <SelectLabel>Flagship chat models</SelectLabel>
+        <SelectItem value="gpt-4.1">
+          GPT-4.1
+        </SelectItem>
+        <SelectItem value="gpt-4o">
+          GPT-4o
+        </SelectItem>
+        <SelectLabel>Cost-optimized models</SelectLabel>
+        <SelectItem value="o4-mini">
+          o4-mini
+        </SelectItem>
+        <SelectItem value="gpt-4.1-mini">
+          GPT-4.1 mini
+        </SelectItem>
+        <SelectItem value="gpt-4.1-nano">
+          GPT-4.1 nano
+        </SelectItem>
+        <SelectItem value="o3-mini">
+          o3-mini
+        </SelectItem>
+        <SelectItem value="gpt-4o-mini">
+          GPT-4o mini
+        </SelectItem>
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+</template>

package/components/ui/integration-action-builder/integrations/twilio/index.ts

@@ -0,0 +1,68 @@
+import SendSMS from "./SendSMS.vue"
+import MakeCall from "./MakeCall.vue"
+
+export default {
+  name: "Twilio",
+  serviceTypes: {
+    messaging: {
+      name: "Messaging",
+      actionTypes: {
+        sendSms: {
+          name: "Send SMS",
+          component: SendSMS,
+          outputs: {
+            success: [
+              {
+                name: "result",
+                type: {
+                  success: "true",
+                  response: "string",
+                },
+              },
+            ],
+            error: [
+              {
+                name: "result",
+                type: {
+                  success: "false",
+                  error: "string | { message: string; code?: string }",
+                  statusCode: "number?",
+                },
+              },
+            ],
+          },
+        },
+      },
+    },
+    // voice: {
+    //   name: "Voice",
+    //   actionTypes: {
+    //     makeCall: {
+    //       name: "Make call",
+    //       component: MakeCall,
+    //       outputs: {
+    //         success: [
+    //           {
+    //             name: "result",
+    //             type: {
+    //               success: "true",
+    //               response: "string",
+    //             },
+    //           },
+    //         ],
+    //         error: [
+    //           {
+    //             name: "result",
+    //             type: {
+    //               success: "false",
+    //               error: "string | { message: string; code?: string }",
+    //               statusCode: "number?",
+    //             },
+    //           },
+    //         ],
+    //       },
+    //     },
+    //   },
+    // },
+  },
+}

package/components/ui/integration-icon/IntegrationIcon.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineProps({
+    type: {
+        type: String,
+        required: true
+    }
+})
+</script>
+
+<template>
+    <img src="@/assets/icons/firebase.webp" v-if="type === 'FIREBASE'" />
+    <img src="@/assets/icons/postgresql.webp" v-else-if="type === 'POSTGRESQL'" />
+    <img src="@/assets/icons/mysql.webp" v-else-if="type === 'MYSQL'" />
+    <img src="@/assets/icons/SFTP.webp" v-else-if="type === 'SFTP'" />
+    <img src="@/assets/icons/cloudflare.webp" v-else-if="type === 'CLOUDFLARE_R2'" />
+    <img src="@/assets/icons/openai.webp" v-else-if="type === 'OPENAI'" />
+    <img src="@/assets/icons/twilio.webp" v-else-if="type === 'TWILIO'" />
+</template>

package/components/ui/integration-icon/index.ts

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

package/components/ui/label/Label.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { cn } from '../../../lib/utils'
+import { Label, type LabelProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Label
+    data-slot="label"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>

package/components/ui/label/index.ts

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

package/components/ui/lucide-icon-selector/LucideIconPicker.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useVModel } from "@vueuse/core";
+import LucideIconSelector from "./LucideIconSelector.vue";
+import { icons } from "lucide-vue-next";
+
+const props = defineProps<{
+  modelValue?: string
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+})
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger asChild>
+      <Button variant="outline" class="w-full">
+        <div v-if="modelValue" class="flex items-center gap-2 overflow-hidden px-2">
+          <component :is="icons[modelValue]" />
+          <span class="truncate text-xs text-muted-foreground">{{ modelValue }}</span>
+        </div>
+        <span class="text-xs text-muted-foreground" v-else>Select icon</span>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="flex flex-col h-full w-[420px] max-h-[420px] overflow-hidden">
+      <LucideIconSelector v-model="modelValue" />
+    </PopoverContent>
+  </Popover>
+</template>

package/components/ui/lucide-icon-selector/LucideIconSelector.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { icons } from "lucide-vue-next";
+import { useVModel } from "@vueuse/core";
+import { ref, computed } from "vue";
+
+const props = defineProps<{
+  modelValue?: string
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+})
+
+const search = ref('')
+
+const filteredIcons = computed(() => {
+  const searchTerm = search.value.toLowerCase();
+  let filtered = Object.entries(icons).reduce((acc, [iconName, IconComponent]) => {
+    if (iconName.toLowerCase().includes(searchTerm)) {
+      acc[iconName] = IconComponent;
+    }
+    return acc;
+  }, {});
+  return filtered
+})
+</script>
+
+<template>
+  <div class="flex flex-col w-[calc(100%+1rem)] h-full max-w-[800px] mx-auto overflow-hidden p-1 -ml-2 -mt-2">
+    <Input 
+      v-model="search" 
+      placeholder="Search icon..."
+      class="mb-4 shrink-0"
+    />
+
+    <div class="grid gap-4 grid-cols-[repeat(auto-fill,_minmax(50px,_1fr))] overflow-y-auto">
+      <div 
+        v-for="(IconComponent, iconName) in filteredIcons" 
+        :key="iconName" 
+        class="flex flex-col items-center text-center cursor-pointer p-2 rounded-xl"
+        :class="{
+          'bg-primary text-primary-foreground': modelValue === iconName,
+        }"
+        @click="modelValue = iconName"
+      >
+        <!-- Render the icon dynamically -->
+        <component :is="IconComponent" class="size-6" />
+      </div>
+    </div>
+  </div>
+</template>

package/components/ui/lucide-icon-selector/index.ts

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

package/components/ui/media-picker/MediaPicker.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { provide, ref, watch } from 'vue'
+import MediaPickerItems from './MediaPickerItems.vue'
+
+interface MediaItem {
+  url: string
+  name?: string
+  [key: string]: any
+}
+
+type MediaItemType = string | MediaItem
+
+const props = defineProps<{
+  modelValue: MediaItemType[],
+  sources: any[]
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: MediaItemType[]]
+}>()
+
+const updateItems = (newItems: MediaItemType[]) => {
+  emit('update:modelValue', newItems)
+}
+
+const items = ref<MediaItemType[]>([...(props.modelValue || [])])
+
+watch(() => props.modelValue, (newVal) => {
+  items.value = [...(newVal || [])]
+}, { deep: true })
+
+const mediaSources = computed(() => props.sources)
+provide('media-items', items)
+provide('update-media-items', updateItems)
+provide('sources', mediaSources)
+</script>
+
+<template>
+  <MediaPickerItems />
+</template>