@meeovi/layer-shared 1.0.0

package/app/composables/globals/useDirectusForm.ts

@@ -0,0 +1,70 @@
+import { ref, provide } from 'vue'
+import type { Ref } from 'vue'
+
+export function useDirectusForm(collectionName: string, fieldsRef: Ref<any[]>, opts?: { clearOnSuccess?: boolean, closeDialogRef?: Ref<boolean> }) {
+  const form = ref<Record<string, any>>({})
+  const formError = ref<string | null>(null)
+  const formSuccess = ref<string | null>(null)
+
+  // provide form context for DirectusFormElement children
+  provide('directusForm', {
+    form,
+    fields: fieldsRef,
+  })
+
+  const submitForm = async () => {
+    formError.value = null
+    formSuccess.value = null
+
+    // Validate form data against field validation rules
+    for (const field of fieldsRef.value) {
+      if (field.meta?.validation) {
+        try {
+          const validation = field.meta.validation
+          if (validation._and) {
+            for (const rule of validation._and) {
+              const fieldName = Object.keys(rule)[0]
+              if (!fieldName) continue
+              const ruleDef = (rule as any)[fieldName]
+              if (ruleDef && ruleDef._regex) {
+                const regex = new RegExp(ruleDef._regex)
+                const valueToTest = String(form.value[field.field] ?? '')
+                if (!regex.test(valueToTest)) {
+                  formError.value = field.meta.validation_message || field.meta.field + ' failed validation'
+                  console.error(
+                    `Validation failed for ${field.field}: ${field.meta.validation_message || 'Invalid format'}`)
+                  return // Stop submission if validation fails
+                }
+              }
+            }
+          }
+        } catch (err) {
+          console.error(`Error parsing validation for ${field.field}:`, err)
+        }
+      }
+    }
+
+    const { $directus, $createItem } = useNuxtApp() as any
+    const result = await $directus.request($createItem(collectionName, form.value))
+    if (result.error) {
+      formError.value = result.error.message
+      console.error(`Error creating ${collectionName}:`, result.error)
+      return // Stop submission if error occurs
+    }
+    formSuccess.value = `${collectionName} created successfully`
+
+    if (opts?.clearOnSuccess) {
+      form.value = {}
+    }
+    if (opts?.closeDialogRef) {
+      try { opts.closeDialogRef.value = false } catch (e) {}
+    }
+  }
+
+  return {
+    form,
+    formError,
+    formSuccess,
+    submitForm,
+  }
+}

package/app/composables/globals/useDirectusSchema.js

@@ -0,0 +1,9 @@
+export async function useDirectusSchema(collection) {
+    const config = useRuntimeConfig()
+
+    return await $fetch(`${config.public.directus.url}/fields/${collection}`, {
+        headers: {
+            Authorization: `Bearer ${config.public.directus.auth.token}`
+        }
+    })
+}

package/app/composables/globals/useFileManager.ts

@@ -0,0 +1,76 @@
+export interface FileManagerConfig {
+  maxSize?: number
+  allowedTypes?: string[]
+  onProgress?: (progress: number) => void
+  onSuccess?: (file: any) => void
+  onError?: (error: Error) => void
+}
+
+export function useFileManager(config: FileManagerConfig = {}) {
+  const uploading = ref(false)
+  const progress = ref(0)
+  const error = ref<string | null>(null)
+
+  const uploadToServer = async (file: File): Promise<any> => {
+    if (config.maxSize && file.size > config.maxSize) {
+      const errorMsg = `File size exceeds ${formatFileSize(config.maxSize)}`
+      error.value = errorMsg
+      config.onError?.(new Error(errorMsg))
+      throw new Error(errorMsg)
+    }
+
+    if (config.allowedTypes && !config.allowedTypes.includes(file.type)) {
+      const errorMsg = 'File type not allowed'
+      error.value = errorMsg
+      config.onError?.(new Error(errorMsg))
+      throw new Error(errorMsg)
+    }
+
+    const formData = new FormData()
+    formData.append('file', file)
+
+    uploading.value = true
+    progress.value = 0
+    error.value = null
+
+    try {
+      const response = await $fetch('/api/file/upload', {
+        method: 'POST',
+        body: formData
+      })
+      config.onSuccess?.(response.file)
+      return response.file
+    } catch (err: any) {
+      const errorMsg = err.data?.message || 'Upload failed'
+      error.value = errorMsg
+      config.onError?.(new Error(errorMsg))
+      throw err
+    } finally {
+      uploading.value = false
+    }
+  }
+
+  const uploadMultipleFiles = async (files: FileList | File[]): Promise<any[]> => {
+    const fileArray = Array.from(files)
+    const results = []
+
+    for (const file of fileArray) {
+      try {
+        const result = await uploadToServer(file)
+        results.push(result)
+      } catch (err: any) {
+        results.push({ error: err.message })
+      }
+    }
+
+    return results
+  }
+
+  return {
+    uploading: readonly(uploading),
+    progress: readonly(progress),
+    error: readonly(error),
+    uploadToServer,
+    uploadMultipleFiles
+  }
+}

package/app/composables/globals/useLivePreview.ts

@@ -0,0 +1,17 @@
+export function useLivePreview() {
+	return usePreviewMode({
+		// Enable preview mode when both preview and token params exist in URL
+		shouldEnable: () => {
+			const route = useRoute();
+			return !!route.query.preview && !!route.query.token;
+		},
+
+		// Store the token from the URL for use in API calls
+		getState: (currentState) => {
+			const route = useRoute();
+			return {
+				token: route.query.token || currentState.token,
+			};
+		},
+	});
+}

package/app/composables/globals/useLoading.ts

@@ -0,0 +1,23 @@
+// composables/useLoading.ts
+export const useLoading = () => {
+    const loading = ref(false)
+    const loadingText = ref('')
+  
+    const startLoading = (text = 'Loading...') => {
+      loading.value = true
+      loadingText.value = text
+    }
+  
+    const stopLoading = () => {
+      loading.value = false
+      loadingText.value = ''
+    }
+  
+    return {
+      loading,
+      loadingText,
+      startLoading,
+      stopLoading
+    }
+  }
+  

package/app/composables/globals/useNavigation.js

@@ -0,0 +1,19 @@
+import { useRuntimeConfig } from 'nuxt/config';
+
+export const getNavigation = async (id) => {
+  const config = useRuntimeConfig();
+  //const credentials = btoa(`${config.public.WP_API_EMAIL}:${config.public.WORDPRESS_TOKEN}`);
+  
+  try {
+    const navigation = await $fetch(`${config.public.wordpressUrl}/wp-json/wp/v2/navigations/${id}`, {
+      headers: {
+        'Authorization': `Basic ${config.public.wordpressToken}`,  // Basic Auth Header
+        'Content-Type': 'application/json'
+      }
+    });
+    return navigation;
+  } catch (error) {
+    console.error('Error fetching navigation:', error);
+    return [];
+  }
+};

package/app/composables/globals/useNotifications.ts

@@ -0,0 +1,153 @@
+import { ref, onMounted } from 'vue'
+import { useAsyncData, useNuxtApp } from '#imports'
+
+export interface Notification {
+  id: string
+  title: string
+  content: string
+  date: string
+  type: 'order' | 'account' | 'social' | 'system'
+  isRead: boolean
+  source: 'magento' | 'directus'
+  payload?: any
+}
+
+export function useNotifications() {
+  const notifications = ref<Notification[]>([])
+  const unreadCount = ref(0)
+  const { $directus, $readItems, $updateItem } = useNuxtApp() as any
+
+  // Fetch notifications from Directus
+  const fetchDirectusNotifications = async () => {
+    try {
+      const { data } = await useAsyncData<any[]>('directusNotifications', () => {
+        return $directus.request($readItems('notifications', {
+          filter: {
+            recipient: { _eq: 'current_user' }
+          },
+          sort: ['-date_created']
+        }))
+      })
+      
+      if (data.value) {
+        const formattedNotifications: Notification[] = data.value.map((notification: any) => ({
+          id: String(notification.id),
+          title: String(notification.subject),
+          content: String(notification.message),
+          date: String(notification.timestamp),
+          type: (['order', 'account', 'social', 'system'].includes(notification.collection) ? notification.collection : 'system') as Notification['type'],
+          isRead: notification.status === 'read',
+          source: 'directus',
+          payload: notification.item
+        }))
+        notifications.value = [...notifications.value, ...formattedNotifications]
+      }
+    } catch (error) {
+      console.error('Error fetching Directus notifications:', error)
+    }
+  }
+
+  // Fetch notifications from Magento
+  const fetchMagentoNotifications = async () => {
+    try {
+      // Replace with your Magento API endpoint
+      const response = await fetch('/api/magento/notifications')
+      if (!response.ok) {
+        const text = await response.text().catch(() => '')
+        console.error('Magento notifications fetch failed', { status: response.status, body: text })
+        return
+      }
+
+      const data = await response.json()
+
+      const formattedNotifications: Notification[] = data.map((notification: any) => ({
+        id: String(notification.id),
+        title: String(notification.title),
+        content: String(notification.message),
+        date: String(notification.created_at),
+        type: (['order', 'account', 'social', 'system'].includes(notification.type) ? notification.type : 'system') as Notification['type'],
+        isRead: Boolean(notification.is_read),
+        source: 'magento',
+        payload: notification.payload
+      }))
+      notifications.value = [...notifications.value, ...formattedNotifications]
+    } catch (error: any) {
+      console.error('Error fetching Magento notifications:', error?.message ?? String(error))
+    }
+  }
+
+  // Mark notification as read
+  const markAsRead = async (notificationId: string, source: 'magento' | 'directus') => {
+    try {
+      if (source === 'directus') {
+        await $directus.request($updateItem('notifications', notificationId, {
+          status: 'read'
+        }))
+      } else {
+        // Update Magento notification
+        await fetch(`/api/magento/notifications/${notificationId}/read`, {
+          method: 'POST'
+        })
+      }
+      
+      // Update local state
+      const notification = notifications.value.find(n => n.id === notificationId)
+      if (notification) {
+        notification.isRead = true
+        unreadCount.value = Math.max(0, unreadCount.value - 1)
+      }
+    } catch (error) {
+      console.error('Error marking notification as read:', error)
+    }
+  }
+
+  // Mark all notifications as read
+  const markAllAsRead = async () => {
+    try {
+      // Update Directus notifications
+      await $directus.request($updateItem('notifications', {
+        filter: {
+          recipient: { _eq: 'current_user' },
+          status: { _eq: 'inbox' }
+        },
+        data: {
+          status: 'read'
+        }
+      }))
+
+      // Update Magento notifications
+      await fetch('/api/magento/notifications/read-all', {
+        method: 'POST'
+      })
+
+      // Update local state
+      notifications.value.forEach(notification => {
+        notification.isRead = true
+      })
+      unreadCount.value = 0
+    } catch (error) {
+      console.error('Error marking all notifications as read:', error)
+    }
+  }
+
+  // Calculate unread count
+  const updateUnreadCount = () => {
+    unreadCount.value = notifications.value.filter(n => !n.isRead).length
+  }
+
+  onMounted(async () => {
+    await Promise.all([
+      fetchDirectusNotifications(),
+      fetchMagentoNotifications()
+    ])
+    updateUnreadCount()
+  })
+
+  return {
+    notifications,
+    unreadCount,
+    markAsRead,
+    markAllAsRead,
+    updateUnreadCount
+  }
+} 

package/app/composables/globals/usePages.js

@@ -0,0 +1,36 @@
+// composables/usePages.js
+import { ref } from 'vue';
+import { useRuntimeConfig } from 'nuxt/config';
+
+export function usePages() {
+  const config = useRuntimeConfig();
+  const pages = ref({});
+
+  const fetchPages = async (pageSlugsOrIds) => {
+    try {
+      const allPages = await $fetch(`${config.public.wordpressUrl}/wp-json/wp/v2/pages`, {
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${config.public.wordpressToken}`
+        }
+      });
+
+      pageSlugsOrIds.forEach(slugOrId => {
+        const specificPage = allPages.find(page => page.slug === slugOrId || page.id === slugOrId);
+
+        if (specificPage) {
+          pages.value[slugOrId] = specificPage;
+        } else {
+          console.warn(`Page "${slugOrId}" not found`);
+        }
+      });
+    } catch (error) {
+      console.error('Error fetching pages:', error);
+    }
+  };
+
+  return {
+    pages,
+    fetchPages,
+  };
+}

package/app/composables/globals/useRichText.ts

@@ -0,0 +1,33 @@
+import { RichText } from '@atproto/api'
+
+// creating richtext
+const rt = new RichText({
+  text: 'Hello @alice.com, check out this link: https://example.com',
+})
+await rt.detectFacets(agent) // automatically detects mentions and links
+const postRecord = {
+  $type: 'app.bsky.feed.post',
+  text: rt.text,
+  facets: rt.facets,
+  createdAt: new Date().toISOString(),
+}
+
+// rendering as markdown
+let markdown = ''
+for (const segment of rt.segments()) {
+  if (segment.isLink()) {
+    markdown += `[${segment.text}](${segment.link?.uri})`
+  } else if (segment.isMention()) {
+    markdown += `[${segment.text}](https://my-bsky-app.com/user/${segment.mention?.did})`
+  } else {
+    markdown += segment.text
+  }
+}
+
+// calculating string lengths
+const rt2 = new RichText({ text: 'Hello' })
+console.log(rt2.length) // => 5
+console.log(rt2.graphemeLength) // => 5
+const rt3 = new RichText({ text: '👨‍👩‍👧‍👧' })
+console.log(rt3.length) // => 25
+console.log(rt3.graphemeLength) // => 1

package/app/composables/globals/useServerRootMixin.ts

@@ -0,0 +1,19 @@
+import { createServerRootMixin } from 'vue-instantsearch/vue3/es'
+
+export default function useServerRootMixin (indexName: string) {
+  const nuxtApp = useNuxtApp()
+  const searchClient = useMeilisearch()
+
+  const serverRootMixin = ref(createServerRootMixin({
+    searchClient,
+    indexName
+  }))
+
+  // Install SSR mixin
+  nuxtApp.vueApp.mixin(serverRootMixin.value)
+  // TODO: ensure mixin is only installed once
+
+  return {
+    instantsearch: serverRootMixin.value.data().instantsearch
+  }
+}

package/app/composables/globals/useVisualEditing.ts

@@ -0,0 +1,38 @@
+import { apply as applyVisualEditing, setAttr } from '@directus/visual-editing';
+import type { PrimaryKey } from '@directus/types';
+
+interface ApplyOptions {
+	directusUrl: string;
+	elements?: HTMLElement[] | HTMLElement;
+	onSaved?: (data: { collection?: string; item?: PrimaryKey | null; payload?: Record<string, any> }) => void;
+	customClass?: string;
+}
+export default function useVisualEditing() {
+	// Use useState for state that persists across navigation
+	const isVisualEditingEnabled = useState('visual-editing-enabled', () => false);
+	const route = useRoute();
+	const {
+		public: { enableVisualEditing, directusUrl },
+	} = useRuntimeConfig();
+
+	// Check query param on composable initialization.
+	if (route.query['visual-editing'] === 'true' && enableVisualEditing) {
+		isVisualEditingEnabled.value = true;
+	} else if (route.query['visual-editing'] === 'false') {
+		isVisualEditingEnabled.value = false;
+	}
+
+	const apply = (options: Pick<ApplyOptions, 'elements' | 'onSaved' | 'customClass'>) => {
+		if (!isVisualEditingEnabled.value) return;
+		applyVisualEditing({
+			...options,
+			directusUrl,
+		});
+	};
+
+	return {
+		isVisualEditingEnabled,
+		apply,
+		setAttr,
+	};
+}

package/app/composables/media/useFile.ts

@@ -0,0 +1,6 @@
+import type { FilePlugin } from '../../types/index.d'
+
+export function useFile() {
+  const { $file } = useNuxtApp()
+  return $file as FilePlugin
+}