@eventcatalog/core 2.55.3 → 2.55.4

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.55.3";
+var version = "2.55.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-T5TRFXGX.js";
-import "../chunk-WYTPPCGQ.js";
+} from "../chunk-DJEUHHVO.js";
+import "../chunk-HCICJ77X.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.55.3";
+var version = "2.55.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-6MWKM7BG.js";
-import "../chunk-T5TRFXGX.js";
-import "../chunk-WYTPPCGQ.js";
+} from "../chunk-RMB2KQZ5.js";
+import "../chunk-DJEUHHVO.js";
+import "../chunk-HCICJ77X.js";
 import "../chunk-UPONRQSN.js";
 export {
   log_build_default as default

package/dist/{chunk-T5TRFXGX.js → chunk-DJEUHHVO.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-WYTPPCGQ.js";
+} from "./chunk-HCICJ77X.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/{chunk-WYTPPCGQ.js → chunk-HCICJ77X.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "2.55.3";
+var version = "2.55.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-6MWKM7BG.js → chunk-RMB2KQZ5.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-T5TRFXGX.js";
+} from "./chunk-DJEUHHVO.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "2.55.3";
+var version = "2.55.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-WYTPPCGQ.js";
+} from "./chunk-HCICJ77X.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -157,7 +157,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.55.3";
+var version = "2.55.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-PLNJC7NZ.js";
 import {
   log_build_default
-} from "./chunk-6MWKM7BG.js";
-import "./chunk-T5TRFXGX.js";
+} from "./chunk-RMB2KQZ5.js";
+import "./chunk-DJEUHHVO.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
@@ -15,7 +15,7 @@ import {
 import "./chunk-55D645EH.js";
 import {
   VERSION
-} from "./chunk-WYTPPCGQ.js";
+} from "./chunk-HCICJ77X.js";
 import {
   getProjectOutDir,
   isAuthEnabled,

package/eventcatalog/src/components/Grids/DomainGrid.tsx

@@ -1,5 +1,5 @@
-import { useState, useMemo } from 'react';
-import { ServerIcon, EnvelopeIcon, RectangleGroupIcon } from '@heroicons/react/24/outline';
+import { useState, useMemo, useEffect } from 'react';
+import { ServerIcon, EnvelopeIcon, RectangleGroupIcon, Squares2X2Icon, QueueListIcon } from '@heroicons/react/24/outline';
 import { buildUrlWithParams } from '@utils/url-builder';
 import type { CollectionEntry } from 'astro:content';
 import { type CollectionMessageTypes } from '@types';
@@ -21,6 +21,24 @@ interface DomainGridProps {
 
 export default function DomainGrid({ domains, embeded }: DomainGridProps) {
   const [searchQuery, setSearchQuery] = useState('');
+  const [isMultiColumn, setIsMultiColumn] = useState(false);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const saved = localStorage.getItem('EventCatalog:ArchitectureColumnLayout');
+      if (saved !== null) {
+        setIsMultiColumn(saved === 'multi');
+      }
+    }
+  }, []);
+
+  const toggleColumnLayout = () => {
+    const newValue = !isMultiColumn;
+    setIsMultiColumn(newValue);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('EventCatalog:ArchitectureColumnLayout', newValue ? 'multi' : 'single');
+    }
+  };
 
   const filteredDomains = useMemo(() => {
     let result = [...domains];
@@ -63,7 +81,7 @@ export default function DomainGrid({ domains, embeded }: DomainGridProps) {
             <p className="mt-2 text-sm text-gray-500">Browse and manage domains in your event-driven architecture</p>
           </div>
 
-          <div className="mt-6 md:mt-0 md:ml-4 flex-shrink-0">
+          <div className="mt-6 md:mt-0 md:ml-4 flex-shrink-0 flex items-center gap-3">
             <SearchBar
               searchQuery={searchQuery}
               onSearchChange={setSearchQuery}
@@ -71,11 +89,22 @@ export default function DomainGrid({ domains, embeded }: DomainGridProps) {
               totalResults={filteredDomains.length}
               totalItems={domains.length}
             />
+            <button
+              onClick={toggleColumnLayout}
+              className="flex items-center justify-center p-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors duration-200"
+              title={isMultiColumn ? 'Switch to single column' : 'Switch to multi column'}
+            >
+              {isMultiColumn ? (
+                <QueueListIcon className="h-5 w-5 text-gray-600" />
+              ) : (
+                <Squares2X2Icon className="h-5 w-5 text-gray-600" />
+              )}
+            </button>
           </div>
         </div>
       </div>
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 gap-6">
+      <div className={`grid gap-6 ${isMultiColumn ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2' : 'grid-cols-1'}`}>
         {filteredDomains.map((domain) => (
           <a
             key={domain.data.id}

package/eventcatalog/src/components/Grids/ServiceGrid.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useEffect, memo } from 'react';
-import { ServerIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { ServerIcon, ChevronRightIcon, Squares2X2Icon, QueueListIcon } from '@heroicons/react/24/outline';
 import { RectangleGroupIcon } from '@heroicons/react/24/outline';
 import { buildUrl, buildUrlWithParams } from '@utils/url-builder';
 import type { CollectionEntry } from 'astro:content';
@@ -117,7 +117,19 @@ const ServiceCard = memo(({ service, urlParams, selectedTypes }: { service: any;
 
 // Domain Section component
 const DomainSection = memo(
-  ({ domain, services, urlParams, selectedTypes }: { domain: any; services: any[]; urlParams: any; selectedTypes: string[] }) => {
+  ({
+    domain,
+    services,
+    urlParams,
+    selectedTypes,
+    isMultiColumn,
+  }: {
+    domain: any;
+    services: any[];
+    urlParams: any;
+    selectedTypes: string[];
+    isMultiColumn: boolean;
+  }) => {
     const subdomains = domain.data.domains || [];
     const allSubDomainServices = subdomains.map((subdomain: any) => subdomain.data.services || []).flat();
 
@@ -128,7 +140,9 @@ const DomainSection = memo(
     return (
       <div className="space-y-6">
         {servicesWithoutSubdomains.length > 0 && (
-          <div className="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 xl:grid-cols-1 gap-6">
+          <div
+            className={`grid gap-6 ${isMultiColumn ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2' : 'grid-cols-1'}`}
+          >
             {servicesWithoutSubdomains.map((service) => (
               <ServiceCard key={service.data.id} service={service} urlParams={urlParams} selectedTypes={selectedTypes} />
             ))}
@@ -186,7 +200,9 @@ const DomainSection = memo(
                 </div>
               )}
 
-              <div className="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 xl:grid-cols-1 gap-6">
+              <div
+                className={`grid gap-6 ${isMultiColumn ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2' : 'grid-cols-1'}`}
+              >
                 {subdomainServices.map((service) => (
                   <ServiceCard
                     key={service.data.id}
@@ -219,6 +235,7 @@ export default function ServiceGrid({ services, domains, embeded }: ServiceGridP
   const [searchQuery, setSearchQuery] = useState('');
   const [currentPage, setCurrentPage] = useState(1);
   const [selectedTypes, setSelectedTypes] = useState<CollectionMessageTypes[]>([]);
+  const [isMultiColumn, setIsMultiColumn] = useState(false);
   const ITEMS_PER_PAGE = 16;
   const [urlParams, setUrlParams] = useState<{
     serviceIds?: string[];
@@ -237,6 +254,23 @@ export default function ServiceGrid({ services, domains, embeded }: ServiceGridP
     });
   }, []);
 
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const saved = localStorage.getItem('EventCatalog:ServiceColumnLayout');
+      if (saved !== null) {
+        setIsMultiColumn(saved === 'multi');
+      }
+    }
+  }, []);
+
+  const toggleColumnLayout = () => {
+    const newValue = !isMultiColumn;
+    setIsMultiColumn(newValue);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('EventCatalog:ServiceColumnLayout', newValue ? 'multi' : 'single');
+    }
+  };
+
   const filteredAndSortedServices = useMemo(() => {
     if (urlParams === null) return [];
 
@@ -325,7 +359,7 @@ export default function ServiceGrid({ services, domains, embeded }: ServiceGridP
             </p>
           </div>
 
-          <div className="mt-6 md:mt-0 md:ml-4 flex-shrink-0">
+          <div className="mt-6 md:mt-0 md:ml-4 flex-shrink-0 flex items-center gap-3">
             <SearchBar
               searchQuery={searchQuery}
               onSearchChange={setSearchQuery}
@@ -333,6 +367,17 @@ export default function ServiceGrid({ services, domains, embeded }: ServiceGridP
               totalResults={filteredAndSortedServices.length}
               totalItems={services.length}
             />
+            <button
+              onClick={toggleColumnLayout}
+              className="flex items-center justify-center p-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors duration-200"
+              title={isMultiColumn ? 'Switch to single column' : 'Switch to multi column'}
+            >
+              {isMultiColumn ? (
+                <QueueListIcon className="h-5 w-5 text-gray-600" />
+              ) : (
+                <Squares2X2Icon className="h-5 w-5 text-gray-600" />
+              )}
+            </button>
           </div>
         </div>
       </div>
@@ -383,10 +428,13 @@ export default function ServiceGrid({ services, domains, embeded }: ServiceGridP
                   services={paginatedServices}
                   urlParams={urlParams}
                   selectedTypes={selectedTypes}
+                  isMultiColumn={isMultiColumn}
                 />
               ))
           ) : (
-            <div className={`grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 xl:grid-cols-1 gap-6`}>
+            <div
+              className={`grid gap-6 ${isMultiColumn ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2' : 'grid-cols-1'}`}
+            >
               {paginatedServices.map((service) => (
                 <ServiceCard key={service.data.id} service={service} urlParams={urlParams} selectedTypes={selectedTypes} />
               ))}

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.55.3",
+  "version": "2.55.4",
   "publishConfig": {
     "access": "public"
   },