@eventcatalogtest/studio/stores/template-store.ts

A drag and drop UI for distributed systems that keeps your diagrams where they belong – in your repo

import { create } from 'zustand'
import { ReactFlowJsonObject } from '@xyflow/react'
import { useEventCatalogResourcesStore } from '@/stores/eventcatalog-resources-store'

interface Template {
    title: string
    description: string
    type: string
    data: ReactFlowJsonObject
    usecase: string
    mermaid?: string
    tags: string[]
}

interface TemplateStore {
    showTemplateSelector: boolean
    setShowTemplateSelector: (show: boolean) => void
    getTemplates: () => Template[]
    hasTemplates: () => boolean
}

export const useTemplateStore = create<TemplateStore>((set, get) => ({
    showTemplateSelector: false,
    setShowTemplateSelector: (show: boolean) => {
        const hasTemplates = get().hasTemplates();

        
        
        // Only show the modal if there are templates available
        if (hasTemplates) {
            set({ showTemplateSelector: show });
        }
    },
    getTemplates: () => {
        const resourcesStore = useEventCatalogResourcesStore.getState();
        return resourcesStore.templates || [];
    },
    hasTemplates: () => {
        const templates = useEventCatalogResourcesStore.getState().templates || [];
        return templates.length > 0;
    }
}))