@oneclick.dev/cms-kit 0.0.2 → 0.0.3

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

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

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

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

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

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

package/components/ui/label/Label.vue

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

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

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

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

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

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

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

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

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

@@ -1,306 +0,0 @@
-<script setup lang="ts">
-import { inject, ref } from 'vue'
-import { Plus, Folder, ChevronLeft, Images } from 'lucide-vue-next'
-import Dropzone from './media-picker-dialog/Dropzone.vue'
-import Filters from './media-picker-dialog/Filters.vue'
-import FileItem from './media-picker-dialog/FileItem.vue'
-import { formatFileSize } from '../../../lib/utils'
-import { cn } from '../../../lib/utils'
-
-interface PENDING_FILE {
-  id: string
-  name: string
-  size: number
-  file: File,
-  contentType: string,
-  path: string,
-  url: string,
-  status: 'pending' | 'uploading' | 'error'
-  updated: Date
-}
-
-const route = useRoute()
-
-const emit = defineEmits(['submit'])
-
-const props = defineProps({
-  sources: {
-    type: Array,
-    required: true
-  },
-  maxFiles: {
-    type: Number
-  }
-})
-
-const dialogOpen = ref(false)
-
-const project = ref(route.params.slug as string)
-
-const { getMediaSource } = useMediaLibrary()
-const activeSourceId = ref('')
-const activeSource = ref({});
-
-const folders = ref<any[]>([])
-const files = ref<any[]>([])
-const fileCount = ref(0)
-const currentPath = ref('')
-const navigationHistory = ref<string[]>([])
-const effectiveBasePath = ref('')
-
-const search = ref('')
-const sort: 'name' | 'name-desc' | 'size' | 'size-desc' | 'date' | 'date-desc' = ref('name-asc')
-const selectedFiles = ref<string[]>([])
-provide('search', search)
-provide('sort', sort)
-
-const PENDING_FILES = ref<PENDING_FILE[]>([])
-provide('pendingFiles', PENDING_FILES)
-
-const filteredFolders = computed(() => {
-  let filtered = [...folders.value]
-  if (search.value) {
-    filtered = filtered.filter(folder => folder.name.toLowerCase().includes(search.value.toLowerCase()))
-  }
-  return filtered.sort((a, b) => {
-    if (sort.value === 'name') return a.name.localeCompare(b.name)
-    if (sort.value === 'name-desc') return b.name.localeCompare(a.name)
-    return 0
-  })
-})
-
-const filteredFiles = computed(() => {
-  function formatPath(path: string) {
-    if (path[0] === '/') path = path.substring(1)
-    if (path[path.length - 1] === '/') path = path.substring(0, path.length - 1)
-    return path
-  }
-  
-  const pendingFiles = PENDING_FILES.value.filter(file => formatPath(file.path) === formatPath(currentPath.value))
-
-  let filtered = [...files.value]
-  if (search.value) {
-    filtered = filtered.filter(file => file.name.toLowerCase().includes(search.value.toLowerCase()))
-  }
-
-  return [...filtered, ...pendingFiles].sort((a, b) => {
-    if (sort.value === 'name') return a.name.localeCompare(b.name)
-    if (sort.value === 'name-desc') return b.name.localeCompare(a.name)
-    if (sort.value === 'size') return a.size - b.size
-    if (sort.value === 'size-desc') return b.size - a.size
-    if (sort.value === 'date') return new Date(a.updated).getTime() - new Date(b.updated).getTime()
-    if (sort.value === 'date-desc') return new Date(b.updated).getTime() - new Date(a.updated).getTime()
-    return 0
-  })
-})
-
-watch(() => activeSourceId.value, async () => {
-  activeSource.value = await getMediaSource(project.value, activeSourceId.value)
-  setEffectiveBasePath()
-  currentPath.value = activeSource.value.path
-  navigationHistory.value = []
-  search.value = ''
-  loadContent(activeSource.value.path)
-})
-
-const addImage = (file) => {
-  emit('select-image', {
-    name: file.name.split('/').pop(),
-    url: file.url,
-    size: file.size,
-    contentType: file.contentType,
-    path: file.name
-  })
-}
-
-const loading = ref(false)
-const error = ref('')
-
-const reload = () => {
-  loadContent(currentPath.value, true)
-}
-provide('reload', reload)
-
-const loadContent = async (path?: string, softReload = false) => {
-  error.value = ''
-  if (!softReload) {
-    loading.value = true
-  }
-
-  if (path?.[0] === '/') {
-    path = path.substring(1)
-  }
-  
-  try {
-    const { getStorageContent } = useMediaLibrary()
-
-    if (effectiveBasePath.value && path !== undefined) {
-      const normalizedPath = path === '' ? '' : (path.endsWith('/') ? path : `${path}/`)
-      const normalizedBasePath = effectiveBasePath.value === '' ? '' : 
-        (effectiveBasePath.value.endsWith('/') ? effectiveBasePath.value : `${effectiveBasePath.value}/`)
-
-      if (path !== '' && !normalizedPath.startsWith(normalizedBasePath)) {
-        currentPath.value = effectiveBasePath.value
-      } else {
-        currentPath.value = path
-      }
-    } else if (path !== undefined) {
-      currentPath.value = path
-    }
-    
-    const res = await getStorageContent(activeSource.value.id, currentPath.value);
-
-    folders.value = (res.folders || []).filter(folder => {
-      const folderPath = folder.path
-      const parentPath = currentPath.value ? currentPath.value : ''
-      
-      const relativePath = folderPath.startsWith(parentPath) ? folderPath.substring(parentPath.length) : folderPath
-      const pathParts = relativePath.split('/').filter(Boolean)
-      
-      return pathParts.length === 1
-    })
-    
-    files.value = (res.files || []).filter(file => {
-      const filePath = file.name
-      const parentPath = currentPath.value ? currentPath.value : ''
-      
-      if (!filePath.startsWith(parentPath)) return false
-      
-      const relativePath = filePath.substring(parentPath.length)
-      const pathParts = relativePath.split('/').filter(Boolean)
-      
-      return pathParts.length === 1
-    })
-    
-    fileCount.value = files.value.length
-  } catch (err) {
-    error.value = 'Failed to load files. Please try again.'
-    folders.value = []
-    files.value = []
-    fileCount.value = 0
-  } finally {
-    loading.value = false
-  }
-}
-
-const navigateToFolder = (folderPath: string) => {
-  search.value = ''
-  navigationHistory.value.push(currentPath.value)
-  loadContent(folderPath)
-}
-
-const navigateBack = () => {
-  search.value = ''
-  if (navigationHistory.value.length > 0) {
-    const previousPath = navigationHistory.value.pop()
-    
-    if (previousPath && (previousPath.startsWith(effectiveBasePath.value) || previousPath === '')) {
-      loadContent(previousPath)
-    } else {
-      navigationHistory.value = []
-      loadContent(effectiveBasePath.value)
-    }
-  }
-}
-
-const toggleFile = (file: any) => {
-  if (selectedFiles.value.includes(file.url)) {
-    selectedFiles.value = selectedFiles.value.filter(url => url !== file.url)
-  } else {
-    if (props.maxFiles !== undefined && selectedFiles.value.length >= props.maxFiles && props.maxFiles === 1) {
-      selectedFiles.value = [file.url]
-    } else {
-      selectedFiles.value.push(file.url)
-    }
-  }
-}
-
-const onSubmit = () => {
-  emit('submit', props.maxFiles === 1 ? selectedFiles.value[0] : selectedFiles.value)
-  dialogOpen.value = false
-  selectedFiles.value = []
-  search.value = ''
-}
-
-const setEffectiveBasePath = () => {
-  effectiveBasePath.value = props.sources?.[0]?.path || ''
-  if (effectiveBasePath.value[0] === '/') {
-    effectiveBasePath.value = effectiveBasePath.value.substring(1)
-  }
-}
-
-onMounted(() => {
-  activeSourceId.value = props.sources?.[0] || ''
-  setEffectiveBasePath()
-})
-</script>
-
-<template>
-  <Dialog v-model:open="dialogOpen">
-    <DialogTrigger asChild>
-      <slot />
-    </DialogTrigger>
-    <DialogScrollContent class="w-[90%] md:w-[90%] sm:max-w-[1500px]">
-      <DialogHeader class="sticky -top-6 pt-10 pb-2 -mt-6 z-10 bg-background">
-        <div class="flex items-center gap-2">
-          <Button 
-            v-if="navigationHistory?.length > 0" 
-            variant="outline" 
-            size="icon" 
-            @click="navigateBack"
-          >
-            <ChevronLeft class="size-4" />
-          </Button>
-          <DialogTitle class="flex items-center gap-2">
-            <MediaSourceSelect :sources="sources" v-model="activeSourceId" />
-          </DialogTitle>
-        </div>
-        <DialogDescription>
-          {{ currentPath !== effectiveBasePath.value ? (currentPath === '' ? 'Root' : "/" + currentPath) : '' }}
-        </DialogDescription>
-      </DialogHeader>
-
-      <div>
-        <div v-if="loading" class="py-8 text-center">
-          <div class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"></div>
-          <p class="mt-2 text-gray-500">Loading files...</p>
-        </div>
-        
-        <div v-else-if="error" class="p-4 text-center">
-          <div class="text-red-500 mb-2">{{ error }}</div>
-          <Button @click="loadContent(currentPath)" variant="outline">Retry</Button>
-        </div>
-        
-        <div v-else>
-          <Dropzone :activeSourceId="activeSourceId" :path="currentPath" />
-
-          <template v-if="files.length > 0 || folders.length > 0">
-            <Filters :showNewFolder="activeSource.allowUserFolders" />
-  
-            <div class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 overflow-y-auto">
-              <div 
-                v-for="folder in filteredFolders"
-                :key="folder.path"
-                @click="navigateToFolder(folder.path)"
-                :class="cn('cursor-pointer border rounded-md p-2 hover:bg-muted dark:hover:bg-muted/30 transition-colors flex items-center gap-2',
-                           selectedFiles
-                )"
-              >
-                <Folder class="size-5 text-blue-600" />
-                <span class="truncate">{{ folder.name }}</span>
-              </div>
-              
-              <FileItem :file="file" v-for="file in filteredFiles" :key="file.url" :selected="selectedFiles.includes(file.url)" @toggle="toggleFile(file)" />
-            </div>
-          </template>
-        </div>
-      </div>
-
-      <DialogFooter class="sticky -bottom-6 pb-10 pt-2 -mb-6 z-10 bg-background">
-        <Button @click="onSubmit" :disabled="selectedFiles?.length === 0">
-          {{selectedFiles?.length > 0 ? `Add ${selectedFiles?.length} ${selectedFiles?.length === 1 ? 'file' : 'files'}` : '0 files selected' }}
-        </Button>
-      </DialogFooter>
-    </DialogScrollContent>
-  </Dialog>
-</template>