@eventcatalog/core 0.0.11 → 0.0.12

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @eventcatalog/core
 
+## 0.0.12
+
+### Patch Changes
+
+- [`dd1b29f`](https://github.com/boyney123/eventcatalog/commit/dd1b29f81658a3c5bea9ed92c1cf54265c7feb0b) [#98](https://github.com/boyney123/eventcatalog/pull/98) Thanks [@boyney123](https://github.com/boyney123)! - feat: adding more mermaid support in mdx
+
 ## 0.0.11
 
 ### Patch Changes

package/components/Mermaid/index.tsx

@@ -30,17 +30,30 @@ interface MermaidProps {
   data: Event | Service;
   source: 'event' | 'service';
   rootNodeColor?: string;
+  charts?: string[];
 }
 
-function Mermaid({ data, source = 'event', rootNodeColor }: MermaidProps) {
+function Mermaid({ data, source = 'event', rootNodeColor, charts }: MermaidProps) {
+  useEffect(() => {
+    mermaid.contentLoaded();
+  }, []);
+
+  if (charts) {
+    return (
+      <>
+        {charts.map((content, index) => (
+          <div key={`chart-${index}`} className="mermaid">
+            {content}
+          </div>
+        ))}
+      </>
+    );
+  }
   const mermaidChart =
     source === 'event'
       ? buildMermaidFlowChartForEvent(data as Event, rootNodeColor)
       : buildMermaidFlowChartForService(data as Service, rootNodeColor);
 
-  useEffect(() => {
-    mermaid.contentLoaded();
-  }, []);
   return <div className="mermaid">{mermaidChart}</div>;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventcatalog/core",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "publishConfig": {
     "access": "public"
   },

package/pages/events/[name].tsx

@@ -56,10 +56,10 @@ export const getComponents = ({ event, schema, examples }: any) => ({
     );
     return null;
   },
-  Mermaid: ({ title }: { title: string }) => (
+  Mermaid: ({ title, charts }: { title: string; charts?: string[] }) => (
     <div className="mx-auto w-full py-10">
       {title && <h2 className="text-lg font-medium text-gray-900 underline">{title}</h2>}
-      <Mermaid source="event" data={event} rootNodeColor={getBackgroundColor(event.name)} />
+      <Mermaid source="event" data={event} rootNodeColor={getBackgroundColor(event.name)} charts={charts} />
     </div>
   ),
 });

package/pages/services/[name].tsx

@@ -20,18 +20,20 @@ interface ServicesPageProps {
   notFound?: boolean;
 }
 
-function MermaidComponent({ title, service }: { title: string; service: Service }) {
+function MermaidComponent({ title, service, charts }: { title: string; service: Service; charts?: string[] }) {
   return (
     <div className="mx-auto w-full py-10">
       {title && <h2 className="text-lg font-medium text-gray-900 underline">{title}</h2>}
-      <Mermaid source="service" data={service} rootNodeColor={getBackgroundColor(service.name)} />
+      <Mermaid source="service" data={service} rootNodeColor={getBackgroundColor(service.name)} charts={charts} />
     </div>
   );
 }
 
 const getComponents = (service) => ({
   Admonition,
-  Mermaid: ({ title }: { title: string }) => <MermaidComponent service={service} title={title} />,
+  Mermaid: ({ title, charts }: { title: string; charts?: string[] }) => (
+    <MermaidComponent service={service} title={title} charts={charts} />
+  ),
 });
 
 export default function Services(props: ServicesPageProps) {

package/.next/static/chunks/pages/events-bcad8442f21d6b67.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[695],{74461:function(e,t,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/events",function(){return r(68209)}])},90526:function(e,t,r){"use strict";var n=r(52322),s=(r(2784),r(39097)),a=r(17962),i=r(46892),c=r(4573);function l(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return t.filter(Boolean).join(" ")}t.Z=function(e){var t=e.events,r=void 0===t?[]:t,o=e.showMermaidDiagrams,d=void 0!==o&&o;return(0,n.jsx)("ul",{className:"mt-3 grid grid-cols-1 gap-5 md:grid-cols-2",children:r.map((function(e){var t=e.draft;return(0,n.jsx)("li",{className:"flex",children:(0,n.jsx)(s.default,{href:"/events/".concat(e.name),children:(0,n.jsxs)("a",{className:"flex shadow-sm rounded-md w-full",children:[(0,n.jsx)("div",{style:{background:(0,i.Z)(e.name)},className:l("bg-red-500","flex-shrink-0 flex items-center justify-center w-4 text-white text-sm font-medium rounded-l-md")}),(0,n.jsx)("div",{className:"w-full border-t border-r border-b border-gray-200 bg-white rounded-r-md ",children:(0,n.jsxs)("div",{className:"p-4 text-sm space-y-2 flex flex-col justify-between h-full",children:[(0,n.jsxs)("div",{className:"text-gray-900 font-bold hover:text-gray-600",children:[e.name,(0,n.jsxs)("span",{className:"ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800",children:["v",e.version]}),t&&(0,n.jsx)("span",{className:"ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-500 text-gray-100",children:"Draft"}),(0,n.jsx)("div",{className:"text-gray-500 text-xs font-normal mt-2 ",children:e.summary})]}),d&&(0,n.jsx)("div",{className:"h-full items-center flex",children:(0,n.jsx)(c.Z,{source:"event",data:e,rootNodeColor:(0,i.Z)(e.name)})}),(0,n.jsxs)("div",{className:"flex space-x-4 text-xs pt-2 relative bottom-0 left-0",children:[(0,n.jsxs)("div",{className:" font-medium text-gray-500",children:[(0,n.jsx)(a.FMB,{className:"h-4 w-4 text-green-400 inline-block mr-2","aria-hidden":"true"}),"Producers (",e.producers.length,")"]}),(0,n.jsxs)("div",{className:" font-medium text-gray-500",children:[(0,n.jsx)(a.FMB,{className:"h-4 w-4 text-indigo-400 inline-block mr-2","aria-hidden":"true"}),"Subscribers (",e.consumers.length,")"]})]})]})})]})})},e.name)}))})}},4573:function(e,t,r){"use strict";r.d(t,{Z:function(){return c}});var n=r(52322),s=r(2784),a=r(14689),i=function(e,t,r,n){var s=function(e){return e.map((function(e){return e.replace(/ /g,"_")}))},a=s(t),i=s(r),c=e.replace(/ /g,"_");return"flowchart LR\n".concat(a.map((function(e){return"".concat(e,":::producer--\x3e").concat(c,":::event\n")})).join(""),"\nclassDef event stroke:").concat(n,",stroke-width: 4px;\nclassDef producer stroke:#75d7b6,stroke-width: 2px;\nclassDef consumer stroke:#818cf8,stroke-width: 2px;\n").concat(i.map((function(e){return"".concat(c,":::event--\x3e").concat(e,":::consumer\n")})).join(""),"\n  ")};a.Z.initialize({startOnLoad:!0,theme:"forest",securityLevel:"loose",flowchart:{useMaxWidth:!1,width:"1000px"},themeCSS:"\n  .node {\n      filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .2))\n  }\n  .mermaid svg {\n      width: 10000px\n  }\n  .node rect {\n      fill: white\n  }\n    ",fontFamily:"Fira Code",width:"100%"});var c=function(e){var t=e.data,r=e.source,c=void 0===r?"event":r,l=e.rootNodeColor,o="event"===c?function(e,t){var r=e.name,n=e.producers,s=e.consumers;return i(r,n,s,void 0===t?"#2563eb":t)}(t,l):function(e,t){var r=e.publishes,n=e.subscribes,s=e.name,a=void 0===t?"#2563eb":t;return i(s,n.map((function(e){return e.name})),r.map((function(e){return e.name})),a)}(t,l);return(0,s.useEffect)((function(){a.Z.contentLoaded()}),[]),(0,n.jsx)("div",{className:"mermaid",children:o})}},68209:function(e,t,r){"use strict";r.r(t),r.d(t,{__N_SSP:function(){return h},default:function(){return v}});var n=r(52322),s=r(2784),a=r(97729),i=r(39097),c=r(51930),l=r(54643),o=r(61519),d=r(90526);function m(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function u(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"===typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){m(e,t,r[t])}))}return e}function x(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return t.filter(Boolean).join(" ")}var f=[{name:"Name",href:"#",current:!0},{name:"Version",href:"#",current:!1},{name:"Domains",href:"#",current:!1}],h=!0;function v(e){var t=e.events,r=[{id:"services",name:"Services",options:e.services.map((function(e){return{value:e,label:e,checked:!1}}))}],h=(0,s.useState)({services:[]}),v=h[0],g=h[1],p=(0,s.useState)(!1),y=p[0],j=p[1],b=t;return v.services.length>0&&(b=b.filter((function(e){var t=v.services,r=e.consumers.some((function(e){return t.indexOf(e)>-1})),n=e.producers.some((function(e){return t.indexOf(e)>-1}));return r||n}))),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a.default,{children:(0,n.jsx)("title",{children:"EventCatalog - All Events"})}),(0,n.jsxs)("main",{className:"max-w-7xl mx-auto min-h-screen px-4 md:px-0",children:[(0,n.jsxs)("div",{className:"relative z-10 flex items-baseline justify-between pt-8 pb-6 border-b border-gray-200",children:[(0,n.jsxs)("h1",{className:"text-2xl font-extrabold tracking-tight text-gray-900",children:["Events (",t.length,")"]}),(0,n.jsx)("div",{className:"flex items-center",children:(0,n.jsxs)(c.v,{as:"div",className:"hidden relative text-left",children:[(0,n.jsx)("div",{children:(0,n.jsxs)(c.v.Button,{className:"group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900",children:["Sort",(0,n.jsx)(o.v4q,{className:"flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-gray-400 group-hover:text-gray-500","aria-hidden":"true"})]})}),(0,n.jsx)(l.u,{as:s.Fragment,enter:"transition ease-out duration-100",enterFrom:"transform opacity-0 scale-95",enterTo:"transform opacity-100 scale-100",leave:"transition ease-in duration-75",leaveFrom:"transform opacity-100 scale-100",leaveTo:"transform opacity-0 scale-95",children:(0,n.jsx)(c.v.Items,{className:"origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none",children:(0,n.jsx)("div",{className:"py-1",children:f.map((function(e){return(0,n.jsx)(c.v.Item,{children:function(t){var r=t.active;return(0,n.jsx)("a",{href:e.href,className:x(e.current?"font-medium text-gray-900":"text-gray-500",r?"bg-gray-100":"","block px-4 py-2 text-sm"),children:e.name})}},e.name)}))})})})]})})]}),(0,n.jsx)("section",{className:"pt-6 pb-24",children:(0,n.jsxs)("div",{className:"grid grid-cols-4 gap-x-8 gap-y-10",children:[(0,n.jsxs)("form",{className:"hidden lg:block",children:[(0,n.jsx)("span",{className:"text-sm font-bold text-gray-900 mb-4 block",children:"Events"}),(0,n.jsx)("ul",{className:" text-sm text-gray-600 space-y-4 pb-6 border-b border-gray-200 items-stretch",children:t.map((function(e){return(0,n.jsx)("li",{children:(0,n.jsx)(i.default,{href:"/events/".concat(e.name),children:(0,n.jsx)("a",{children:e.name})})},e.name)}))}),r.map((function(e){return(0,n.jsxs)("div",{className:"border-b border-gray-200 py-6",children:[(0,n.jsx)("h3",{className:"-my-3 flow-root",children:(0,n.jsx)("div",{className:"py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400 hover:text-gray-500",children:(0,n.jsx)("span",{className:"font-medium text-gray-900",children:e.name})})}),(0,n.jsx)("div",{className:"pt-6",children:(0,n.jsx)("div",{className:"space-y-4",children:e.options.map((function(t,r){return(0,n.jsxs)("div",{className:"flex items-center",children:[(0,n.jsx)("input",{id:"filter-".concat(e.id,"-").concat(r),name:"".concat(e.id,"[]"),defaultValue:t.value,type:"checkbox",onChange:function(r){return function(e,t,r){if(r.target.checked){var n=v[t].concat([e.value]);g(u({},v,m({},t,n)))}else{var s=v[t].filter((function(t){return t!==e.value}));g(u({},v,m({},t,s)))}}(t,e.id,r)},defaultChecked:t.checked,className:"h-4 w-4 border-gray-300 rounded text-gray-600 focus:ring-gray-500"}),(0,n.jsx)("label",{htmlFor:"filter-".concat(e.id,"-").concat(r),className:"ml-3 text-sm text-gray-600",children:t.label})]},t.value)}))})})]},e.id)})),(0,n.jsxs)("div",{className:"border-b border-gray-200 py-6",children:[(0,n.jsx)("h3",{className:"-my-3 flow-root",children:(0,n.jsx)("div",{className:"py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400 hover:text-gray-500",children:(0,n.jsx)("span",{className:"font-medium text-gray-900",children:"Features"})})}),(0,n.jsx)("div",{className:"pt-6",children:(0,n.jsx)("div",{className:"space-y-4",children:(0,n.jsxs)("div",{className:"flex items-center",children:[(0,n.jsx)("input",{id:"show-mermaid",type:"checkbox",onChange:function(e){return j(e.target.checked)},defaultChecked:y,className:"h-4 w-4 border-gray-300 rounded text-gray-600 focus:ring-gray-500"}),(0,n.jsx)("label",{htmlFor:"show-mermaid",className:"ml-3 text-sm text-gray-600",children:"Show Mermaid Diagrams"})]})})})]})]}),(0,n.jsx)("div",{className:"col-span-4 lg:col-span-3",children:(0,n.jsxs)("div",{children:[(0,n.jsxs)("h2",{className:"text-gray-500 text-xs font-medium uppercase tracking-wide",children:["Events (",b.length,")"]}),(0,n.jsx)(d.Z,{events:b,showMermaidDiagrams:y})]})})]})})]})]})}},46892:function(e,t,r){"use strict";function n(e){for(var t=0,r=0;r<e.length;r++)t=e.charCodeAt(r)+((t<<5)-t);for(var n="#",s=0;s<3;s++){n+="00".concat((t>>8*s&255).toString(16)).substr(-2)}return n}r.d(t,{Z:function(){return n}})}},function(e){e.O(0,[812,519,962,274,774,888,179],(function(){return t=74461,e(e.s=t);var t}));var t=e.O();_N_E=t}]);