@eventcatalog/core 2.14.3 → 2.16.0

package/dist/map-catalog-to-astro.cjs

@@ -0,0 +1,131 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/map-catalog-to-astro.js
+var map_catalog_to_astro_exports = {};
+__export(map_catalog_to_astro_exports, {
+  mapCatalogToAstro: () => mapCatalogToAstro
+});
+module.exports = __toCommonJS(map_catalog_to_astro_exports);
+var import_node_path = __toESM(require("path"), 1);
+var COLLECTION_KEYS = [
+  "events",
+  "commands",
+  "services",
+  "users",
+  "teams",
+  "domains",
+  "flows",
+  "pages",
+  "changelogs",
+  "queries",
+  "channels",
+  "ubiquitousLanguages"
+];
+function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
+  const relativeFilePath = removeBasePath(filePath, projectDir);
+  if (!isCatalogRelated(relativeFilePath)) {
+    return [];
+  }
+  const baseTargetPaths = getBaseTargetPaths(relativeFilePath);
+  const relativeTargetPath = getRelativeTargetPath(relativeFilePath);
+  return baseTargetPaths.map(
+    (base) => import_node_path.default.join(
+      astroDir,
+      base,
+      relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx").replace("ubiquitous-language.md", "ubiquitous-language.mdx")
+    )
+  );
+}
+function removeBasePath(fullPath, basePath) {
+  const relativePath = import_node_path.default.relative(basePath, fullPath);
+  return relativePath.startsWith("..") ? fullPath : relativePath;
+}
+function isCollectionKey(key) {
+  return COLLECTION_KEYS.includes(key);
+}
+function isCatalogRelated(filePath) {
+  const filePathArr = filePath.split(import_node_path.default.sep).filter(Boolean);
+  if ([
+    "eventcatalog.config.js",
+    // config file at root
+    "eventcatalog.styles.css",
+    // custom styles file at root
+    "components",
+    // custom components
+    "public",
+    // public assets
+    ...COLLECTION_KEYS
+  ].includes(filePathArr[0])) {
+    return true;
+  }
+  return false;
+}
+function getBaseTargetPaths(filePath) {
+  const filePathArr = filePath.split(import_node_path.default.sep).filter(Boolean);
+  if (isCollectionKey(filePathArr[0])) {
+    if (filePathArr[filePathArr.length - 1] == "changelog.md") {
+      return [import_node_path.default.join("src", "content", "changelogs")];
+    }
+    if (filePathArr[filePathArr.length - 1] == "ubiquitous-language.md") {
+      return [import_node_path.default.join("src", "content", "ubiquitousLanguages")];
+    }
+    if (filePathArr[filePathArr.length - 1].match(/\.md$/)) {
+      return [import_node_path.default.join("src", "content")];
+    }
+    const hasExtension = (str) => /\.[a-zA-Z0-9]{2,}$/.test(str);
+    if (hasExtension(filePath)) {
+      return [import_node_path.default.join("public", "generated"), import_node_path.default.join("src", "catalog-files")];
+    }
+    return [import_node_path.default.join("public", "generated"), import_node_path.default.join("src", "catalog-files"), import_node_path.default.join("src", "content")];
+  }
+  if (filePathArr[0] == "components") {
+    return [import_node_path.default.join("src", "custom-defined-components")];
+  }
+  if (filePathArr[0] == "public") {
+    return [import_node_path.default.join("public")];
+  }
+  return [import_node_path.default.join("/")];
+}
+function getRelativeTargetPath(filePath) {
+  const filePathArr = filePath.split(import_node_path.default.sep).filter(Boolean);
+  if (filePathArr[0] == "public" || filePathArr[0] == "components") {
+    filePathArr.shift();
+  }
+  const relativePath = [];
+  for (let i = filePathArr.length - 1; i >= 0; i--) {
+    relativePath.unshift(filePathArr[i]);
+    if (isCollectionKey(filePathArr[i])) break;
+  }
+  return import_node_path.default.join(...relativePath);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  mapCatalogToAstro
+});

package/dist/map-catalog-to-astro.d.cts

@@ -0,0 +1,28 @@
+/**
+ * @typedef {Object} MapCatalogToAstroParams
+ * @prop {string} filePath The catalog file path
+ * @prop {string} astroDir The astro directory
+ * @prop {string} projectDir The user's project directory
+ */
+/**
+ *
+ * @param {MapCatalogToAstroParams} params
+ * @returns {string[]} The astro file paths
+ */
+declare function mapCatalogToAstro({ filePath, astroDir, projectDir }: MapCatalogToAstroParams): string[];
+type MapCatalogToAstroParams = {
+    /**
+     * The catalog file path
+     */
+    filePath: string;
+    /**
+     * The astro directory
+     */
+    astroDir: string;
+    /**
+     * The user's project directory
+     */
+    projectDir: string;
+};
+
+export { type MapCatalogToAstroParams, mapCatalogToAstro };

package/dist/map-catalog-to-astro.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @typedef {Object} MapCatalogToAstroParams
+ * @prop {string} filePath The catalog file path
+ * @prop {string} astroDir The astro directory
+ * @prop {string} projectDir The user's project directory
+ */
+/**
+ *
+ * @param {MapCatalogToAstroParams} params
+ * @returns {string[]} The astro file paths
+ */
+declare function mapCatalogToAstro({ filePath, astroDir, projectDir }: MapCatalogToAstroParams): string[];
+type MapCatalogToAstroParams = {
+    /**
+     * The catalog file path
+     */
+    filePath: string;
+    /**
+     * The astro directory
+     */
+    astroDir: string;
+    /**
+     * The user's project directory
+     */
+    projectDir: string;
+};
+
+export { type MapCatalogToAstroParams, mapCatalogToAstro };

package/dist/map-catalog-to-astro.js

@@ -0,0 +1,6 @@
+import {
+  mapCatalogToAstro
+} from "./chunk-5RNDOKYT.js";
+export {
+  mapCatalogToAstro
+};

package/dist/watcher.cjs

@@ -0,0 +1,231 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/watcher.js
+var watcher_exports = {};
+__export(watcher_exports, {
+  watch: () => watch
+});
+module.exports = __toCommonJS(watcher_exports);
+var import_watcher = __toESM(require("@parcel/watcher"), 1);
+var import_node_fs2 = __toESM(require("fs"), 1);
+
+// src/map-catalog-to-astro.js
+var import_node_path = __toESM(require("path"), 1);
+var COLLECTION_KEYS = [
+  "events",
+  "commands",
+  "services",
+  "users",
+  "teams",
+  "domains",
+  "flows",
+  "pages",
+  "changelogs",
+  "queries",
+  "channels",
+  "ubiquitousLanguages"
+];
+function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
+  const relativeFilePath = removeBasePath(filePath, projectDir);
+  if (!isCatalogRelated(relativeFilePath)) {
+    return [];
+  }
+  const baseTargetPaths = getBaseTargetPaths(relativeFilePath);
+  const relativeTargetPath = getRelativeTargetPath(relativeFilePath);
+  return baseTargetPaths.map(
+    (base) => import_node_path.default.join(
+      astroDir,
+      base,
+      relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx").replace("ubiquitous-language.md", "ubiquitous-language.mdx")
+    )
+  );
+}
+function removeBasePath(fullPath, basePath) {
+  const relativePath = import_node_path.default.relative(basePath, fullPath);
+  return relativePath.startsWith("..") ? fullPath : relativePath;
+}
+function isCollectionKey(key) {
+  return COLLECTION_KEYS.includes(key);
+}
+function isCatalogRelated(filePath) {
+  const filePathArr = filePath.split(import_node_path.default.sep).filter(Boolean);
+  if ([
+    "eventcatalog.config.js",
+    // config file at root
+    "eventcatalog.styles.css",
+    // custom styles file at root
+    "components",
+    // custom components
+    "public",
+    // public assets
+    ...COLLECTION_KEYS
+  ].includes(filePathArr[0])) {
+    return true;
+  }
+  return false;
+}
+function getBaseTargetPaths(filePath) {
+  const filePathArr = filePath.split(import_node_path.default.sep).filter(Boolean);
+  if (isCollectionKey(filePathArr[0])) {
+    if (filePathArr[filePathArr.length - 1] == "changelog.md") {
+      return [import_node_path.default.join("src", "content", "changelogs")];
+    }
+    if (filePathArr[filePathArr.length - 1] == "ubiquitous-language.md") {
+      return [import_node_path.default.join("src", "content", "ubiquitousLanguages")];
+    }
+    if (filePathArr[filePathArr.length - 1].match(/\.md$/)) {
+      return [import_node_path.default.join("src", "content")];
+    }
+    const hasExtension = (str) => /\.[a-zA-Z0-9]{2,}$/.test(str);
+    if (hasExtension(filePath)) {
+      return [import_node_path.default.join("public", "generated"), import_node_path.default.join("src", "catalog-files")];
+    }
+    return [import_node_path.default.join("public", "generated"), import_node_path.default.join("src", "catalog-files"), import_node_path.default.join("src", "content")];
+  }
+  if (filePathArr[0] == "components") {
+    return [import_node_path.default.join("src", "custom-defined-components")];
+  }
+  if (filePathArr[0] == "public") {
+    return [import_node_path.default.join("public")];
+  }
+  return [import_node_path.default.join("/")];
+}
+function getRelativeTargetPath(filePath) {
+  const filePathArr = filePath.split(import_node_path.default.sep).filter(Boolean);
+  if (filePathArr[0] == "public" || filePathArr[0] == "components") {
+    filePathArr.shift();
+  }
+  const relativePath = [];
+  for (let i = filePathArr.length - 1; i >= 0; i--) {
+    relativePath.unshift(filePathArr[i]);
+    if (isCollectionKey(filePathArr[i])) break;
+  }
+  return import_node_path.default.join(...relativePath);
+}
+
+// src/watcher.js
+var import_rimraf = require("rimraf");
+
+// src/eventcatalog-config-file-utils.js
+var import_promises = require("fs/promises");
+var import_node_fs = require("fs");
+var import_promises2 = require("fs/promises");
+var import_node_path2 = __toESM(require("path"), 1);
+var import_uuid = require("uuid");
+var import_gray_matter = __toESM(require("gray-matter"), 1);
+function addPropertyToFrontMatter(input, newProperty, newValue) {
+  const file = (0, import_gray_matter.default)(input);
+  return import_gray_matter.default.stringify(file.content, { ...file.data, [newProperty]: newValue });
+}
+
+// src/watcher.js
+async function watch(projectDirectory, catalogDirectory, callback = void 0) {
+  const subscription = await import_watcher.default.subscribe(
+    projectDirectory,
+    compose(
+      /**
+       * @param {Error|null} err
+       * @param {Event[]} events
+       * @returns {unknown}
+       */
+      (err, events) => {
+        if (err) {
+          return;
+        }
+        for (let event of events) {
+          const { path: filePath, type } = event;
+          const astroPaths = mapCatalogToAstro({
+            filePath,
+            astroDir: catalogDirectory,
+            projectDir: projectDirectory
+          });
+          for (const astroPath of astroPaths) {
+            switch (type) {
+              case "create":
+              case "update":
+                try {
+                  if (astroPath.endsWith(".mdx")) {
+                    const content = import_node_fs2.default.readFileSync(astroPath, "utf-8");
+                    const frontmatter = addPropertyToFrontMatter(content, "pathToFile", filePath);
+                    import_node_fs2.default.writeFileSync(astroPath, frontmatter);
+                  }
+                } catch (error) {
+                }
+                if (import_node_fs2.default.statSync(filePath).isDirectory()) import_node_fs2.default.mkdirSync(astroPath, { recursive: true });
+                else retryEPERM(import_node_fs2.default.cpSync)(filePath, astroPath);
+                break;
+              case "delete":
+                retryEPERM(import_rimraf.rimrafSync)(astroPath);
+                break;
+            }
+          }
+        }
+      },
+      callback
+    ),
+    {
+      ignore: [`**/${catalogDirectory}/!(${projectDirectory})**`]
+    }
+  );
+  return () => subscription.unsubscribe();
+}
+function compose(...fns) {
+  return function(err, events) {
+    fns.filter(Boolean).forEach((fn, i) => {
+      try {
+        fn(err, events);
+      } catch (error) {
+        console.error({ error });
+        throw error;
+      }
+    });
+  };
+}
+var MAX_RETRIES = 5;
+var DELAY_MS = 100;
+function retryEPERM(fn) {
+  return (...args) => {
+    let retries = 0;
+    while (retries < MAX_RETRIES) {
+      try {
+        return fn(...args);
+      } catch (err) {
+        if (err.code !== "EPERM") throw err;
+        setTimeout(() => {
+        }, DELAY_MS);
+        retries += 1;
+      }
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  watch
+});

package/dist/watcher.d.cts

@@ -0,0 +1,21 @@
+/**
+ * @typedef {Object} Event
+ * @property {string} path
+ * @property {"create"|"update"|"delete"} type
+ *
+ * @typedef {(err: Error | null, events: Event[]) => unknown} SubscribeCallback
+ */
+/**
+ *
+ * @param {string} projectDirectory
+ * @param {string} catalogDirectory
+ * @param {SubscribeCallback|undefined} callback
+ */
+declare function watch(projectDirectory: string, catalogDirectory: string, callback?: SubscribeCallback | undefined): Promise<() => Promise<void>>;
+type Event = {
+    path: string;
+    type: "create" | "update" | "delete";
+};
+type SubscribeCallback = (err: Error | null, events: Event[]) => unknown;
+
+export { type Event, type SubscribeCallback, watch };

package/dist/watcher.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @typedef {Object} Event
+ * @property {string} path
+ * @property {"create"|"update"|"delete"} type
+ *
+ * @typedef {(err: Error | null, events: Event[]) => unknown} SubscribeCallback
+ */
+/**
+ *
+ * @param {string} projectDirectory
+ * @param {string} catalogDirectory
+ * @param {SubscribeCallback|undefined} callback
+ */
+declare function watch(projectDirectory: string, catalogDirectory: string, callback?: SubscribeCallback | undefined): Promise<() => Promise<void>>;
+type Event = {
+    path: string;
+    type: "create" | "update" | "delete";
+};
+type SubscribeCallback = (err: Error | null, events: Event[]) => unknown;
+
+export { type Event, type SubscribeCallback, watch };

package/dist/watcher.js

@@ -0,0 +1,8 @@
+import {
+  watch
+} from "./chunk-NTCYOR4N.js";
+import "./chunk-E7TXTI7G.js";
+import "./chunk-5RNDOKYT.js";
+export {
+  watch
+};

package/{src → eventcatalog/src}/components/MDX/NodeGraph/Edges/AnimatedMessageEdge.tsx

@@ -10,7 +10,7 @@ const AnimatedMessageEdge = ({
   sourcePosition,
   targetPosition,
   data,
-  label,
+  label = '',
   markerEnd,
 }: any) => {
   const [edgePath, labelX, labelY] = getBezierPath({

package/{src → eventcatalog/src}/components/MDX/NodeGraph/NodeGraph.tsx

@@ -11,9 +11,6 @@ import ReactFlow, {
   type Edge,
   type Node,
   useReactFlow,
-  getBezierPath,
-  BaseEdge,
-  SmoothStepEdge,
 } from 'reactflow';
 import 'reactflow/dist/style.css';
 
@@ -34,7 +31,7 @@ import DownloadButton from './DownloadButton';
 import { buildUrl } from '@utils/url-builder';
 import ChannelNode from './Nodes/Channel';
 import { CogIcon } from '@heroicons/react/20/solid';
-
+import { useEventCatalogVisualiser } from 'src/hooks/eventcatalog-visualizer';
 interface Props {
   nodes: any;
   edges: any;
@@ -85,7 +82,7 @@ const NodeGraphBuilder = ({
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [isAnimated, setIsAnimated] = useState(false);
   const [animateMessages, setAnimateMessages] = useState(false);
-
+  const { hideChannels, toggleChannelsVisibility } = useEventCatalogVisualiser({ nodes, edges, setNodes, setEdges });
   const { fitView } = useReactFlow();
 
   const resetNodesAndEdges = useCallback(() => {
@@ -162,16 +159,6 @@ const NodeGraphBuilder = ({
     [nodes, edges, setNodes, setEdges, resetNodesAndEdges, fitView]
   );
 
-  const toggleAnimation = () => {
-    setIsAnimated(!isAnimated);
-    setEdges((eds) =>
-      eds.map((edge) => ({
-        ...edge,
-        animated: !isAnimated,
-      }))
-    );
-  };
-
   const toggleAnimateMessages = () => {
     setAnimateMessages(!animateMessages);
     localStorage.setItem('EventCatalog:animateMessages', JSON.stringify(!animateMessages));
@@ -196,6 +183,10 @@ const NodeGraphBuilder = ({
     );
   }, [animateMessages]);
 
+  useEffect(() => {
+    fitView({ duration: 800 });
+  }, [nodes, edges]);
+
   const handlePaneClick = useCallback(() => {
     setIsSettingsOpen(false);
     resetNodesAndEdges();
@@ -261,6 +252,7 @@ const NodeGraphBuilder = ({
     <ReactFlow
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
+      minZoom={0.07}
       nodes={nodes}
       edges={edges}
       fitView
@@ -319,6 +311,27 @@ const NodeGraphBuilder = ({
               </div>
               <p className="text-[10px] text-gray-500">Animate events, queries and commands.</p>
             </div>
+            <div>
+              <div className="flex items-center justify-between">
+                <label htmlFor="message-animation-toggle" className="text-sm font-medium text-gray-700">
+                  Hide Channels
+                </label>
+                <button
+                  id="message-animation-toggle"
+                  onClick={toggleChannelsVisibility}
+                  className={`${
+                    hideChannels ? 'bg-purple-600' : 'bg-gray-200'
+                  } relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2`}
+                >
+                  <span
+                    className={`${
+                      hideChannels ? 'translate-x-6' : 'translate-x-1'
+                    } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
+                  />
+                </button>
+              </div>
+              <p className="text-[10px] text-gray-500">Show or hide channels in the visualizer.</p>
+            </div>
           </div>
         </div>
       )}
@@ -341,29 +354,6 @@ const NodeGraphBuilder = ({
                 </li>
               ))}
             </ul>
-            {/* <span className="font-bold">Key</span> */}
-            {/* <ul className="m-0 p-0">
-              <li className="flex space-x-2 items-center text-[10px]">
-                <span className="w-2 h-2 bg-orange-500 block" />
-                <span className="block">Events</span>
-              </li>
-              <li className="flex space-x-2 items-center text-[10px]">
-                <span className="w-2 h-2 bg-pink-500 block" />
-                <span className="block">Service</span>
-              </li>
-              <li className="flex space-x-2 items-center text-[10px]">
-                <span className="w-2 h-2 bg-blue-500 block" />
-                <span className="block">Command</span>
-              </li>
-              <li className="flex space-x-2 items-center text-[10px]">
-                <span className="w-2 h-2 bg-green-500 block" />
-                <span className="block">Query</span>
-              </li>
-              <li className="flex space-x-2 items-center text-[10px]">
-                <span className="w-2 h-2 bg-gray-500 block" />
-                <span className="block">Channel</span>
-              </li>
-            </ul> */}
           </div>
         </Panel>
       )}

package/{src → eventcatalog/src}/components/MDX/SchemaViewer/SchemaViewer.astro

@@ -2,6 +2,7 @@
 const { catalog, id } = Astro.props;
 import fs from 'node:fs/promises';
 import { existsSync } from 'fs';
+import yaml from 'js-yaml';
 import path from 'path';
 import SchemaViewerClient from './SchemaViewer';
 import Admonition from '../Admonition';
@@ -48,7 +49,11 @@ try {
     if (exists) {
       // Load the schema for the component
       schema = await fs.readFile(schemaPath, 'utf-8');
-      schema = JSON.parse(schema);
+      if (schemaPath.endsWith('.yml') || schemaPath.endsWith('.yaml')) {
+        schema = yaml.load(schema);
+      } else {
+        schema = JSON.parse(schema);
+      }
     }
 
     return {

package/{src → eventcatalog/src}/components/SideBars/CatalogResourcesSideBar/index.tsx

@@ -4,12 +4,28 @@ import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
 import './styles.css';
 import { getIconForCollection as getIconForCollectionOriginal } from '@utils/collections/icons';
 
+const STORAGE_KEY = 'EventCatalog:catalogSidebarCollapsedGroups';
+
 const CatalogResourcesSideBar = ({ resources, currentPath }: any) => {
   const [data, setData] = useState(resources);
   const [searchQuery, setSearchQuery] = useState('');
-  const [collapsedGroups, setCollapsedGroups] = useState<{ [key: string]: boolean }>({});
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [collapsedGroups, setCollapsedGroups] = useState<{ [key: string]: boolean }>(() => {
+    if (typeof window !== 'undefined') {
+      const saved = window.localStorage.getItem(STORAGE_KEY);
+      setIsInitialized(true);
+      return saved ? JSON.parse(saved) : {};
+    }
+    return {};
+  });
   const decodedCurrentPath = decodeURIComponent(currentPath);
 
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(collapsedGroups));
+    }
+  }, [collapsedGroups]);
+
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(e.target.value);
   };
@@ -47,6 +63,8 @@ const CatalogResourcesSideBar = ({ resources, currentPath }: any) => {
 
   const getIconForCollection = useMemo(() => getIconForCollectionOriginal, []);
 
+  if (!isInitialized) return null;
+
   return (
     <nav className="space-y-6 text-black ">
       <div className="space-y-2">