@eventcatalog/core 2.15.0 → 2.16.1

package/eventcatalog/src/components/Tables/columns/ServiceTableColumns.tsx

@@ -1,10 +1,11 @@
 import { ServerIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/solid';
 import { createColumnHelper } from '@tanstack/react-table';
 import type { CollectionEntry } from 'astro:content';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { filterByName, filterCollectionByName } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
 import { getColorAndIconForMessageType } from './MessageTableColumns';
+import { createBadgesColumn } from './SharedColumns';
 
 const columnHelper = createColumnHelper<CollectionEntry<'services'>>();
 
@@ -40,14 +41,6 @@ export const columns = () => [
     },
     filterFn: filterByName,
   }),
-  // columnHelper.accessor('data.version', {
-  //   header: () => <span>Version</span>,
-  //   cell: (info) => {
-  //     const service = info.row.original;
-  //     return <div className="text-left">{`v${info.getValue()} ${service.data.latestVersion === service.data.version ? '(latest)': ''}`}</div>
-  //   },
-  //   footer: (info) => info.column.id,
-  // }),
   columnHelper.accessor('data.summary', {
     id: 'summary',
     header: () => 'Summary',
@@ -65,39 +58,59 @@ export const columns = () => [
       collectionFilterKey: 'receives',
     },
     cell: (info) => {
-      const receives = info.getValue();
+      const receives = info.getValue() || [];
+      const isExpandable = receives?.length > 10;
+      const isOpen = isExpandable ? receives?.length < 10 : true;
+      const [isExpanded, setIsExpanded] = useState(isOpen);
+
+      const receiversWithIcons = useMemo(
+        () =>
+          receives?.map((consumer: any) => {
+            const type = consumer.collection.slice(0, -1);
+            return {
+              ...consumer,
+              ...getColorAndIconForMessageType(type),
+            };
+          }) || [],
+        [receives]
+      );
+
       if (receives?.length === 0 || !receives)
         return <div className="text-sm text-gray-400/80 text-left italic">Service receives no messages.</div>;
 
       return (
-        <ul>
-          {receives.map((consumer: any, index: number) => {
-            const type = consumer.collection.slice(0, -1);
-            const { color, Icon } = useMemo(() => getColorAndIconForMessageType(type), [type]);
-            return (
-              <li key={`${consumer.data.id}-${index}`} className="py-1 group font-light ">
-                <a
-                  href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
-                  className="group-hover:text-primary flex space-x-1 items-center "
-                >
-                  <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
-                    <span className="flex items-center">
-                      <span className={`bg-${color}-500 h-full rounded-tl rounded-bl p-1`}>
-                        <Icon className="h-4 w-4 text-white" />
-                      </span>
-                      <span className="leading-none px-2 group-hover:underline ">
-                        {consumer.data.name} (v{consumer.data.version})
+        <div>
+          {isExpandable && (
+            <button onClick={() => setIsExpanded(!isExpanded)} className="mb-2 text-sm text-gray-600 hover:text-gray-900">
+              {isExpanded ? '▼' : '▶'} {receives.length} message{receives.length !== 1 ? 's' : ''}
+            </button>
+          )}
+          {isExpanded && (
+            <ul>
+              {receiversWithIcons.map((consumer: any, index: number) => (
+                <li key={`${consumer.data.id}-${index}`} className="py-1 group font-light ">
+                  <a
+                    href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
+                    className="group-hover:text-primary flex space-x-1 items-center "
+                  >
+                    <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
+                      <span className="flex items-center">
+                        <span className={`bg-${consumer.color}-500 h-full rounded-tl rounded-bl p-1`}>
+                          <consumer.Icon className="h-4 w-4 text-white" />
+                        </span>
+                        <span className="leading-none px-2 group-hover:underline ">
+                          {consumer.data.name} (v{consumer.data.version})
+                        </span>
                       </span>
-                    </span>
-                  </div>
-                </a>
-              </li>
-            );
-          })}
-        </ul>
+                    </div>
+                  </a>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
       );
     },
-    // footer: (info) => info.column.id,
     filterFn: filterCollectionByName('receives'),
   }),
   columnHelper.accessor('data.sends', {
@@ -107,42 +120,55 @@ export const columns = () => [
       collectionFilterKey: 'sends',
     },
     cell: (info) => {
-      const sends = info.getValue();
+      const sends = info.getValue() || [];
+      const isExpandable = sends?.length > 10;
+      const isOpen = isExpandable ? sends?.length < 10 : true;
+      const [isExpanded, setIsExpanded] = useState(isOpen);
+
       if (sends?.length === 0 || !sends)
         return <div className="text-sm text-gray-400/80 text-left italic">Service sends no messages.</div>;
 
       return (
-        <ul>
-          {sends.map((consumer: any, index: number) => {
-            const type = consumer.collection.slice(0, -1);
-            const color = type === 'event' ? 'orange' : 'blue';
-            const Icon = type === 'event' ? BoltIcon : ChatBubbleLeftIcon;
-            return (
-              <li key={`${consumer.data.id}-${index}`} className="py-1 group font-light">
-                <a
-                  href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
-                  className="group-hover:text-primary flex space-x-1 items-center "
-                >
-                  <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
-                    <span className="flex items-center">
-                      <span className={`bg-${color}-500 h-full rounded-tl rounded-bl p-1`}>
-                        <Icon className="h-4 w-4 text-white" />
-                      </span>
-                      <span className="leading-none px-2 group-hover:underline ">
-                        {consumer.data.name} (v{consumer.data.version})
-                      </span>
-                    </span>
-                  </div>
-                </a>
-              </li>
-            );
-          })}
-        </ul>
+        <div>
+          {isExpandable && (
+            <button onClick={() => setIsExpanded(!isExpanded)} className="mb-2 text-sm text-gray-600 hover:text-gray-900">
+              {isExpanded ? '▼' : '▶'} {sends.length} message{sends.length !== 1 ? 's' : ''}
+            </button>
+          )}
+          {isExpanded && (
+            <ul>
+              {sends.map((consumer: any, index: number) => {
+                const type = consumer.collection.slice(0, -1);
+                const color = type === 'event' ? 'orange' : 'blue';
+                const Icon = type === 'event' ? BoltIcon : ChatBubbleLeftIcon;
+                return (
+                  <li key={`${consumer.data.id}-${index}`} className="py-1 group font-light">
+                    <a
+                      href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
+                      className="group-hover:text-primary flex space-x-1 items-center "
+                    >
+                      <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
+                        <span className="flex items-center">
+                          <span className={`bg-${color}-500 h-full rounded-tl rounded-bl p-1`}>
+                            <Icon className="h-4 w-4 text-white" />
+                          </span>
+                          <span className="leading-none px-2 group-hover:underline ">
+                            {consumer.data.name} (v{consumer.data.version})
+                          </span>
+                        </span>
+                      </div>
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
       );
     },
-    // footer: (info) => info.column.id,
     filterFn: filterCollectionByName('sends'),
   }),
+  createBadgesColumn(columnHelper),
   columnHelper.accessor('data.name', {
     header: () => <span />,
     cell: (info) => {

package/eventcatalog/src/components/Tables/columns/SharedColumns.tsx

@@ -0,0 +1,44 @@
+import { createColumnHelper } from '@tanstack/react-table';
+import { Tag } from 'lucide-react';
+import { filterByBadge } from '../filters/custom-filters';
+export const createBadgesColumn = <T extends { data: { badges?: any[] } }>(
+  columnHelper: ReturnType<typeof createColumnHelper<T>>
+) => {
+  return columnHelper.accessor((row) => row.data.badges, {
+    id: 'badges',
+    header: () => <span>Badges</span>,
+    cell: (info) => {
+      const item = info.row.original;
+      const badges = item.data.badges || [];
+
+      if (badges?.length === 0 || !badges)
+        return <div className="font-light text-sm text-gray-400/60 text-left italic">No badges documented</div>;
+
+      return (
+        <ul>
+          {badges.map((badge: any, index: number) => {
+            return (
+              <li key={`${badge.id}-${index}`} className="py-1 group font-light ">
+                <div className="group-hover:text-primary flex space-x-1 items-center ">
+                  <div className="flex items-center border border-gray-300 shadow-sm rounded-md">
+                    <span className="flex items-center">
+                      <span className={`bg-${badge.backgroundColor}-500 h-full rounded-tl rounded-bl p-1`}>
+                        {badge.icon && <badge.icon className="h-4 w-4 text-white" />}
+                        {!badge.icon && <Tag className="h-4 w-4 text-white" />}
+                      </span>
+                      <span className="leading-none px-2 group-hover:underline ">{badge.content}</span>
+                    </span>
+                  </div>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      );
+    },
+    meta: {
+      filterVariant: 'badges',
+    },
+    filterFn: filterByBadge,
+  });
+};

package/eventcatalog/src/components/Tables/filters/custom-filters.ts

@@ -12,3 +12,8 @@ export const filterByName = (row: any, key: string, searchValue: string) => {
   const label = `${row?.original?.data.name} (v${row?.original?.data.version})` || '';
   return label.toLowerCase().includes(searchValue.toLowerCase());
 };
+
+export const filterByBadge = (row: any, key: string, searchValue: string) => {
+  const badges = row?.original?.data?.badges || [];
+  return badges.some((badge: any) => badge.content.toLowerCase().includes(searchValue.toLowerCase()));
+};

package/eventcatalog/src/content/config.ts

@@ -221,6 +221,23 @@ const domains = defineCollection({
     .merge(baseSchema),
 });
 
+const ubiquitousLanguages = defineCollection({
+  type: 'content',
+  schema: z.object({
+    dictionary: z
+      .array(
+        z.object({
+          id: z.string(),
+          name: z.string(),
+          summary: z.string().optional(),
+          description: z.string().optional(),
+          icon: z.string().optional(),
+        })
+      )
+      .optional(),
+  }),
+});
+
 const users = defineCollection({
   type: 'content',
   schema: z.object({
@@ -270,4 +287,5 @@ export const collections = {
   flows,
   pages,
   changelogs,
+  ubiquitousLanguages,
 };

package/eventcatalog/src/layouts/DiscoverLayout.astro

@@ -100,7 +100,7 @@ const tabs = [
     </div>
 
     <!-- Table -->
-    <div class="pb-20 ml-6">
+    <div class="pb-20 ml-6 md:pr-10">
       <div>
         <div class="sm:flex sm:items-center py-4 pb-4" id="discover-title">
           <div class="sm:flex-auto space-y-2">

package/eventcatalog/src/pages/docs/[type]/[id]/language.astro

@@ -0,0 +1,301 @@
+---
+import Footer from '@layouts/Footer.astro';
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import { getDomains, type Domain, getUbiquitousLanguage } from '@utils/collections/domains';
+import type { CollectionEntry } from 'astro:content';
+import { ViewTransitions } from 'astro:transitions';
+import * as LucideIcons from 'lucide-react';
+
+export async function getStaticPaths() {
+  const domains = await getDomains();
+
+  const buildPages = (collection: CollectionEntry<'domains'>[]) => {
+    return collection.map((item) => ({
+      params: {
+        type: item.collection,
+        id: item.data.id,
+      },
+      props: {
+        type: item.collection,
+        ...item,
+      },
+    }));
+  };
+
+  return [...buildPages(domains)];
+}
+
+const props = Astro.props;
+const pageTitle = `${props.collection} | ${props.data.name}`.replace(/^\w/, (c) => c.toUpperCase());
+const ubiquitousLanguages = await getUbiquitousLanguage(props);
+
+const ubiquitousLanguage = ubiquitousLanguages[0];
+---
+
+<VerticalSideBarLayout title={pageTitle} description={props.data.summary}>
+  <main class="flex sm:px-8 docs-layout h-full">
+    <div class="flex docs-layout w-full">
+      <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8 min-h-[50em]">
+        <nav class="flex mb-4" aria-label="Breadcrumb">
+          <ol class="inline-flex items-center space-x-1 md:space-x-3">
+            <li class="inline-flex items-center">
+              <a
+                href={`/docs/${props.type}/${props.data.id}/${props.data.latestVersion}`}
+                class="inline-flex items-center text-sm font-medium text-gray-500 hover:text-primary"
+              >
+                <svg
+                  class="w-3 h-3 mr-2.5"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path>
+                </svg>
+                Back to Documentation
+              </a>
+            </li>
+          </ol>
+        </nav>
+
+        <div class="border-b border-gray-200 flex justify-between items-start md:pb-2">
+          <div>
+            <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-black">Domain Language Explorer</h2>
+            <h2 class="text-2xl pt-2 text-gray-500 font-light">{props.data.name} domain</h2>
+          </div>
+        </div>
+
+        {
+          !ubiquitousLanguage && (
+            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 my-4">
+              <p class="text-yellow-700">
+                This domain does not have any defined ubiquitous language terms yet. Consider adding some terms to help establish
+                a common vocabulary for your domain.
+              </p>
+            </div>
+          )
+        }
+
+        <div class="py-4 w-full min-h-[calc(100vh-10em)]">
+          {
+            ubiquitousLanguage && (
+              <>
+                <div class="mb-6">
+                  <input
+                    type="text"
+                    id="searchInput"
+                    placeholder="Search terms..."
+                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  />
+                </div>
+
+                {!ubiquitousLanguage ? (
+                  <div class="text-center py-12 bg-gray-50 rounded-lg">
+                    <h3 class="text-lg font-medium text-gray-900">No domain language terms</h3>
+                    <p class="mt-2 text-sm text-gray-500">There are no language terms defined for this domain yet.</p>
+                  </div>
+                ) : (
+                  <div id="termsGrid" class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    {ubiquitousLanguage?.data?.dictionary?.map((term) => (
+                      <div class="term-card block bg-white border border-gray-200 rounded-lg p-6 transition-all duration-300 ease-in-out hover:shadow-md hover:border-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-primary focus:ring-white min-h-[12em] cursor-pointer">
+                        <div class="flex flex-col h-full space-y-8">
+                          {term.icon && (
+                            <>
+                              {(() => {
+                                const Icon = LucideIcons[term.icon as keyof typeof LucideIcons];
+                                //@ts-ignore
+                                return Icon ? <Icon className="w-6 h-6 text-primary" /> : null;
+                              })()}
+                            </>
+                          )}
+                          <div>
+                            <h3 class="text-gray-800 text-lg font-semibold transition-colors duration-300 ease-in-out group-hover:text-gray-300">
+                              {term.name}
+                            </h3>
+                            <div class="term-content">
+                              <p class="summary-text text-gray-600 transition-colors duration-300 ease-in-out group-hover:text-gray-200 m-0 font-light text-sm mb-4">
+                                {term.summary}
+                              </p>
+                              {term.description && (
+                                <>
+                                  <p class="description-text hidden text-gray-600 transition-colors duration-300 ease-in-out group-hover:text-gray-200 m-0 font-light text-sm whitespace-pre-line">
+                                    {term.description}
+                                  </p>
+                                  <span class="show-more-text text-sm text-primary font-medium">Show more</span>
+                                </>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                <div id="noSearchResults" class="hidden text-center py-12 bg-gray-50 rounded-lg">
+                  <h3 class="text-lg font-medium text-gray-900">No matching terms</h3>
+                  <p class="mt-2 text-sm text-gray-500">Try adjusting your search terms.</p>
+                </div>
+              </>
+            )
+          }
+        </div>
+
+        <Footer />
+      </div>
+    </div>
+    <ViewTransitions />
+  </main>
+
+  <script>
+    function initializeSearch() {
+      const searchInput = document.getElementById('searchInput');
+      const termCards = document.querySelectorAll('.term-card');
+      const noSearchResults = document.getElementById('noSearchResults');
+
+      searchInput?.addEventListener('input', (e) => {
+        const searchTerm = (e.target as HTMLInputElement).value.toLowerCase();
+        let visibleCount = 0;
+
+        termCards.forEach((card) => {
+          const title = card.querySelector('h3')?.textContent?.toLowerCase() || '';
+          const description = card.querySelector('p')?.textContent?.toLowerCase() || '';
+          const matches = title.includes(searchTerm) || description.includes(searchTerm);
+
+          card.classList.toggle('hidden', !matches);
+          if (matches) visibleCount++;
+        });
+
+        // Show/hide no results message
+        if (noSearchResults) {
+          noSearchResults.classList.toggle('hidden', visibleCount > 0);
+        }
+      });
+    }
+
+    function initializeShowMore() {
+      const cards = document.querySelectorAll('.term-card');
+
+      cards.forEach((card) => {
+        const newCard = card.cloneNode(true);
+        if (card.parentNode) {
+          card.parentNode.replaceChild(newCard, card);
+          // Initially show summary
+          const summary = (newCard as Element).querySelector('.summary-text');
+          summary?.classList.add('visible');
+        }
+        newCard.addEventListener('click', () => {
+          const description = (newCard as Element).querySelector('.description-text');
+          const summary = (newCard as Element).querySelector('.summary-text');
+          const showMoreText = (newCard as Element).querySelector('.show-more-text');
+
+          if (description && summary && showMoreText) {
+            (newCard as Element).classList.toggle('expanded');
+            description.classList.toggle('visible');
+            summary.classList.toggle('visible');
+            showMoreText.textContent = description.classList.contains('visible') ? 'Show less' : 'Show more';
+          }
+        });
+      });
+    }
+
+    function highlightMatchingTerm() {
+      const urlParams = new URLSearchParams(window.location.search);
+      const termId = urlParams.get('id');
+
+      if (termId) {
+        const cards = document.querySelectorAll('.term-card');
+        cards.forEach((card) => {
+          const termName = card.querySelector('h3')?.textContent?.trim();
+          if (termName?.toLowerCase() === termId.toLowerCase()) {
+            // Add highlight class
+            card.classList.add('highlighted');
+            (card as HTMLElement).click();
+
+            setTimeout(() => {
+              // Scroll into view
+              card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }, 300);
+          }
+        });
+      }
+    }
+
+    document.addEventListener('astro:page-load', () => {
+      initializeShowMore();
+      initializeSearch();
+      highlightMatchingTerm();
+    });
+
+    initializeShowMore();
+    initializeSearch();
+    highlightMatchingTerm();
+  </script>
+
+  <style is:global>
+    .term-card {
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      min-height: 12em;
+    }
+
+    .term-card.expanded {
+      min-height: 24em;
+      background-color: rgb(249 250 251);
+      z-index: 10;
+      box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+    }
+
+    .summary-text,
+    .description-text {
+      transition:
+        opacity 0.3s ease-in-out,
+        max-height 0.3s ease-in-out;
+      opacity: 0;
+      max-height: 0;
+      overflow: hidden;
+      display: none;
+    }
+
+    .summary-text.visible,
+    .description-text.visible {
+      opacity: 1;
+      max-height: 500px;
+      margin-bottom: 1rem;
+      display: block;
+    }
+
+    .description-text {
+      white-space: pre-line;
+      line-height: 1.5;
+    }
+
+    .show-more-text {
+      display: block;
+      margin-top: 0.5rem;
+    }
+
+    .term-card.expanded .show-more-text {
+      display: none;
+    }
+
+    .term-card.highlighted {
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 2px var(--color-primary);
+      animation: pulse 1s;
+    }
+
+    @keyframes pulse {
+      0%,
+      100% {
+        transform: scale(1);
+        box-shadow: 0 0 0 2px var(--color-primary);
+      }
+      50% {
+        transform: scale(1.01);
+        box-shadow: 0 0 0 4px var(--color-primary);
+      }
+    }
+  </style>
+</VerticalSideBarLayout>

package/eventcatalog/src/utils/collections/domains.ts

@@ -6,7 +6,7 @@ import path from 'path';
 const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
 
 export type Domain = CollectionEntry<'domains'>;
-
+export type UbiquitousLanguage = CollectionEntry<'ubiquitousLanguages'>;
 interface Props {
   getAllVersions?: boolean;
 }
@@ -28,7 +28,9 @@ export const getDomains = async ({ getAllVersions = true }: Props = {}): Promise
     const servicesInDomain = domain.data.services || [];
 
     const services = servicesInDomain
-      .map((_service) => getItemsFromCollectionByIdAndSemverOrLatest(servicesCollection, _service.id, _service.version))
+      .map((_service: { id: string; version: string | undefined }) =>
+        getItemsFromCollectionByIdAndSemverOrLatest(servicesCollection, _service.id, _service.version)
+      )
       .flat();
 
     return {
@@ -50,3 +52,13 @@ export const getDomains = async ({ getAllVersions = true }: Props = {}): Promise
     };
   });
 };
+
+export const getUbiquitousLanguage = async (domain: Domain): Promise<UbiquitousLanguage[]> => {
+  const { collection, data, slug } = domain;
+
+  const ubiquitousLanguages = await getCollection('ubiquitousLanguages', (ubiquitousLanguage) => {
+    return ubiquitousLanguage.id.includes(`${collection}/${data.name}`);
+  });
+
+  return ubiquitousLanguages;
+};

package/eventcatalog/src/utils/collections/icons.ts

@@ -10,6 +10,7 @@ import {
   ArrowsRightLeftIcon,
   VariableIcon,
 } from '@heroicons/react/24/outline';
+import { BookText } from 'lucide-react';
 
 export const getIconForCollection = (collection: string) => {
   switch (collection) {
@@ -33,6 +34,8 @@ export const getIconForCollection = (collection: string) => {
       return ArrowsRightLeftIcon;
     case 'channels-parameter':
       return VariableIcon;
+    case 'ubiquitousLanguages':
+      return BookText;
     default:
       return ServerIcon;
   }

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.15.0",
+  "version": "2.16.1",
   "publishConfig": {
     "access": "public"
   },
@@ -68,6 +68,7 @@
     "glob": "^10.4.1",
     "gray-matter": "^4.0.3",
     "html-to-image": "^1.11.11",
+    "js-yaml": "^4.1.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "4.6.2",
     "lucide-react": "^0.453.0",
@@ -91,6 +92,7 @@
     "@playwright/test": "^1.48.1",
     "@types/dagre": "^0.7.52",
     "@types/diff": "^5.2.2",
+    "@types/js-yaml": "^4.0.9",
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.merge": "4.6.9",
     "@types/node": "^20.14.2",