@eventvisor/catalog 0.0.2 → 0.21.1

package/public/catalog.json

@@ -0,0 +1,297 @@
+{
+  "links": {
+    "attribute": "https://github.com/eventvisor/eventvisor/blob/catalog-attributes/projects/project-1/attributes/{{name}}.yml",
+    "event": "https://github.com/eventvisor/eventvisor/blob/catalog-attributes/projects/project-1/events/{{name}}.yml",
+    "destination": "https://github.com/eventvisor/eventvisor/blob/catalog-attributes/projects/project-1/destinations/{{name}}.yml",
+    "effect": "https://github.com/eventvisor/eventvisor/blob/catalog-attributes/projects/project-1/effects/{{name}}.yml",
+    "commit": "https://github.com/eventvisor/eventvisor/commit/{{hash}}"
+  },
+  "projectConfig": { "tags": ["web", "mobile"] },
+  "entities": {
+    "attributes": {
+      "country": {
+        "description": "Country attribute",
+        "tags": ["web"],
+        "type": "string",
+        "lastModified": {
+          "commit": "2e90890",
+          "timestamp": "2025-09-29T23:00:33+02:00",
+          "author": "Fahad Heylaal"
+        }
+      },
+      "testDefaultValue": {
+        "description": "User attribute",
+        "tags": ["web"],
+        "type": "object",
+        "properties": {
+          "id": { "type": "string", "description": "The user's ID" },
+          "country": {
+            "type": "string",
+            "description": "The user's country in ISO 3166-1 alpha-2 format, like \"NL\" or \"DE\""
+          },
+          "isHuman": { "type": "boolean", "default": true },
+          "consentToMarketing": { "type": "boolean", "default": false },
+          "isSubscribed": { "type": "boolean", "default": false }
+        },
+        "required": ["id", "country"],
+        "lastModified": {
+          "commit": "2e90890",
+          "timestamp": "2025-09-29T23:00:33+02:00",
+          "author": "Fahad Heylaal"
+        }
+      },
+      "testNested": {
+        "description": "Test nested attribute",
+        "tags": ["web"],
+        "type": "object",
+        "properties": {
+          "foo": { "type": "string" },
+          "user": {
+            "type": "object",
+            "properties": {
+              "id": { "type": "string", "description": "The user's ID" },
+              "name": { "type": "string", "description": "User's name" },
+              "address": {
+                "type": "object",
+                "properties": {
+                  "street": { "type": "string", "description": "User's street" },
+                  "city": { "type": "string", "description": "User's city" },
+                  "zip": { "type": "string", "description": "User's zip" },
+                  "country": { "type": "string", "description": "User's country" }
+                },
+                "required": ["street", "city", "country"]
+              }
+            }
+          }
+        },
+        "required": ["user"],
+        "lastModified": {
+          "commit": "b97d430",
+          "timestamp": "2025-10-28T22:40:20+01:00",
+          "author": "Fahad Heylaal"
+        }
+      },
+      "testRequired": {
+        "description": "Test required attribute",
+        "tags": ["web"],
+        "type": "object",
+        "properties": {
+          "id": { "type": "string", "description": "The user's ID" },
+          "country": {
+            "type": "string",
+            "description": "The user's country in ISO 3166-1 alpha-2 format, like \"NL\" or \"DE\""
+          }
+        },
+        "required": ["id", "country"],
+        "lastModified": {
+          "commit": "2e90890",
+          "timestamp": "2025-09-29T23:00:33+02:00",
+          "author": "Fahad Heylaal"
+        }
+      },
+      "testTransformConcat": {
+        "description": "Test transformed attribute",
+        "tags": ["web"],
+        "type": "object",
+        "properties": {
+          "id": { "type": "string", "description": "The user's ID" },
+          "firstName": { "type": "string" },
+          "lastName": { "type": "string" }
+        },
+        "required": ["id", "firstName", "lastName"],
+        "transforms": [
+          {
+            "payload": ["firstName", "lastName"],
+            "type": "concat",
+            "separator": " ",
+            "target": "fullName"
+          },
+          { "type": "remove", "target": "firstName" },
+          { "type": "remove", "target": "lastName" }
+        ],
+        "lastModified": {
+          "commit": "2e90890",
+          "timestamp": "2025-09-29T23:00:33+02:00",
+          "author": "Fahad Heylaal"
+        }
+      },
+      "testTransformRename": {
+        "description": "Test transformed attribute",
+        "tags": ["web"],
+        "type": "object",
+        "properties": {
+          "id": { "type": "string", "description": "The user's ID" },
+          "name": { "type": "string" }
+        },
+        "required": ["id", "name"],
+        "transforms": [{ "type": "rename", "targetMap": { "name": "fullName" } }],
+        "lastModified": {
+          "commit": "2e90890",
+          "timestamp": "2025-09-29T23:00:33+02:00",
+          "author": "Fahad Heylaal"
+        }
+      },
+      "testTransformTo": {
+        "description": "Test transformed attribute",
+        "tags": ["web"],
+        "type": "object",
+        "properties": {
+          "id": { "type": "string", "description": "The user's ID" },
+          "firstName": { "type": "string" },
+          "lastName": { "type": "string" },
+          "age": { "type": "string" },
+          "isHuman": { "type": "string" },
+          "balance": { "type": "string" },
+          "itemsCount": { "type": "number" }
+        },
+        "required": ["id", "firstName", "lastName"],
+        "transforms": [
+          { "type": "toInteger", "target": "age" },
+          { "type": "toBoolean", "target": "isHuman" },
+          { "type": "toDouble", "target": "balance" },
+          { "type": "toString", "target": "itemsCount" }
+        ],
+        "lastModified": {
+          "commit": "2e90890",
+          "timestamp": "2025-09-29T23:00:33+02:00",
+          "author": "Fahad Heylaal"
+        }
+      },
+      "testTransformTrim": {
+        "description": "Test transformed attribute",
+        "tags": ["web"],
+        "type": "object",
+        "properties": {
+          "id": { "type": "string", "description": "The user's ID" },
+          "firstName": { "type": "string" },
+          "lastName": { "type": "string" }
+        },
+        "required": ["id", "firstName", "lastName"],
+        "transforms": [
+          { "type": "trim", "target": "firstName" },
+          { "payload": "lastName", "type": "trim", "target": "lastName" }
+        ],
+        "lastModified": {
+          "commit": "2e90890",
+          "timestamp": "2025-09-29T23:00:33+02:00",
+          "author": "Fahad Heylaal"
+        }
+      },
+      "userId": {
+        "description": "User ID attribute",
+        "tags": ["web"],
+        "type": "string",
+        "lastModified": {
+          "commit": "2e90890",
+          "timestamp": "2025-09-29T23:00:33+02:00",
+          "author": "Fahad Heylaal"
+        }
+      }
+    },
+    "events": {
+      "banner_click": {
+        "description": "Banner click description here",
+        "tags": ["web"],
+        "type": "object",
+        "properties": {
+          "bannerId": { "type": "string", "description": "The ID of the banner that was clicked" },
+          "screenWidth": { "type": "number", "description": "The width of the screen" }
+        },
+        "required": ["bannerId"],
+        "transforms": [
+          {
+            "lookup": "browser.screen.width",
+            "type": "set",
+            "target": "screenWidth",
+            "conditions": [{ "payload": "screenWidth", "operator": "notExists" }]
+          }
+        ],
+        "lastModified": {
+          "commit": "30690e7",
+          "timestamp": "2025-10-19T23:42:22+02:00",
+          "author": "Fahad Heylaal"
+        }
+      },
+      "button_click": {
+        "description": "Button click",
+        "tags": ["web"],
+        "type": "object",
+        "properties": {
+          "buttonId": { "type": "string", "description": "The ID of the button that was clicked" },
+          "buttonType": { "type": "string", "description": "The type of button that was clicked" },
+          "buttonText": {
+            "type": "string",
+            "description": "The text of the button that was clicked"
+          }
+        },
+        "required": ["buttonId"],
+        "lastModified": {
+          "commit": "2e90890",
+          "timestamp": "2025-09-29T23:00:33+02:00",
+          "author": "Fahad Heylaal"
+        }
+      },
+      "page_view": {
+        "description": "Page view",
+        "tags": ["web"],
+        "type": "object",
+        "properties": {
+          "url": { "type": "string", "description": "The URL of the page that was viewed" },
+          "referrer": {
+            "type": "string",
+            "description": "The URL of the page that referred the user to the current page"
+          }
+        },
+        "required": ["url"],
+        "lastModified": {
+          "commit": "2e90890",
+          "timestamp": "2025-09-29T23:00:33+02:00",
+          "author": "Fahad Heylaal"
+        }
+      }
+    },
+    "destinations": {
+      "consoleSimple": {
+        "description": "Console destination",
+        "tags": ["web"],
+        "transport": "console",
+        "transforms": [
+          { "type": "set", "value": {} },
+          { "source": "attributes", "type": "set", "target": "attributes" },
+          { "source": "payload", "type": "set", "target": "payload" },
+          { "source": "eventName", "type": "set", "target": "payload.eventName" }
+        ],
+        "lastModified": {
+          "commit": "2e90890",
+          "timestamp": "2025-09-29T23:00:33+02:00",
+          "author": "Fahad Heylaal"
+        }
+      }
+    },
+    "effects": {
+      "inject_cookie_banner": {
+        "description": "Inject cookie banner",
+        "tags": ["web"],
+        "on": { "event_tracked": ["page_view"] },
+        "state": { "injected": false },
+        "conditions": [{ "state": "injected", "operator": "equals", "value": false }],
+        "steps": [
+          {
+            "handler": "pixel",
+            "params": {
+              "snippet": "<div>\n  <h1>Cookie Banner</h1>\n  <p>This is a cookie banner</p>\n</div>\n",
+              "selector": "body"
+            }
+          },
+          { "transforms": [{ "type": "set", "target": "injected", "value": true }] }
+        ],
+        "persist": "localstorage",
+        "lastModified": {
+          "commit": "2e90890",
+          "timestamp": "2025-09-29T23:00:33+02:00",
+          "author": "Fahad Heylaal"
+        }
+      }
+    }
+  }
+}

package/src/blocks/alert.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+
+interface AlertProps {
+  type: "success" | "warning" | "info";
+  children: React.ReactNode;
+}
+
+export function Alert(props: AlertProps) {
+  if (props.type === "success") {
+    return (
+      <p className="mx-6 block rounded border-2 border-green-300 bg-green-200 p-3 text-sm text-gray-600">
+        {props.children}
+      </p>
+    );
+  }
+
+  if (props.type === "info") {
+    return (
+      <p className="mx-6 block rounded border-2 border-blue-300 bg-blue-200 p-3 text-sm text-gray-600">
+        {props.children}
+      </p>
+    );
+  }
+
+  return (
+    <p className="mx-6 block rounded border-2 border-orange-300 bg-orange-200 p-3 text-sm text-gray-600">
+      {props.children}
+    </p>
+  );
+}

package/src/blocks/content.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import clsx from "clsx";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/20/solid";
+
+import { useEntityEditLink } from "../hooks";
+
+export const Content: React.FC<{
+  children: React.ReactNode;
+  title: string;
+  border?: boolean;
+  entityType?: string;
+  entityName?: string;
+}> = ({ children, border = true, title, entityType, entityName }) => {
+  const editLink = useEntityEditLink(entityType ?? "", entityName ?? "");
+
+  return (
+    <div className="max-w-3xl">
+      <div>
+        <h1
+          className={clsx(
+            "mb-0 m-4 pt-4 text-3xl font-black text-zinc-700 pb-4 relative",
+            border && "border-b border-zinc-200",
+          )}
+        >
+          {title}
+
+          {editLink && (
+            <a
+              href={editLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-zinc-500 hover:text-zinc-700 hover:bg-zinc-300 font-medium inline-block absolute right-0 top-4 bg-zinc-200 py-2 px-3 rounded-md"
+            >
+              <ArrowTopRightOnSquareIcon className="w-4 h-4 inline-block" /> Edit
+            </a>
+          )}
+        </h1>
+      </div>
+
+      {children}
+    </div>
+  );
+};

package/src/blocks/last-modified.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import { PrettyDate } from "./pretty-date";
+
+export function LastModified(props: any) {
+  const { lastModified } = props;
+
+  if (!lastModified) {
+    return (
+      <p className="inline-flex rounded-full px-2 text-xs leading-5 text-gray-500">
+        Last modified
+        <span className="pl-1 font-semibold text-gray-600">n/a</span>
+      </p>
+    );
+  }
+
+  return (
+    <p className="inline-flex rounded-full px-2 text-xs leading-5 text-gray-500">
+      Last modified by
+      <span className="pl-1 pr-1 font-semibold text-gray-600">{lastModified.author}</span> on
+      <span className="pl-1 font-semibold text-gray-600">
+        <PrettyDate date={lastModified.timestamp} />
+      </span>
+    </p>
+  );
+}

package/src/blocks/links.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Link } from "react-router";
+
+export function LinkEvent(props: any) {
+  const { name, className, children } = props;
+
+  return (
+    <Link to={`/events/${name}`} className={className}>
+      {children}
+    </Link>
+  );
+}
+
+export function LinkAttribute(props: any) {
+  const { name, className, children } = props;
+
+  return (
+    <Link to={`/attributes/${name}`} className={className}>
+      {children}
+    </Link>
+  );
+}
+
+export function LinkDestination(props: any) {
+  const { name, className, children } = props;
+
+  return (
+    <Link to={`/destinations/${name}`} className={className}>
+      {children}
+    </Link>
+  );
+}
+
+export function LinkEffect(props: any) {
+  const { name, className, children } = props;
+
+  return (
+    <Link to={`/effects/${name}`} className={className}>
+      {children}
+    </Link>
+  );
+}

package/src/blocks/markdown.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+
+export const Markdown: React.FC<{ children: React.ReactNode; className?: string }> = (props) => {
+  return (
+    <div className={`prose prose-sm text-gray-700 ${props.className || ""}`}>
+      <ReactMarkdown>{props.children as string}</ReactMarkdown>
+    </div>
+  );
+};

package/src/blocks/navbar.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Link, useLocation } from "react-router";
+
+export const Navbar: React.FC = () => {
+  const location = useLocation();
+
+  const links = [
+    // { title: "Home", to: "/" },
+    { title: "Events", to: "/events" },
+    { title: "Attributes", to: "/attributes" },
+    { title: "Destinations", to: "/destinations" },
+    { title: "Effects", to: "/effects" },
+  ];
+
+  return (
+    <div className="bg-zinc-900 p-4.5">
+      <div className="max-w-3xl mx-auto">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center justify-start pl-4">
+            <a href="/">
+              <img src="/img/logo.png" className="w-8 inline-block" alt="" />
+              <img src="/img/logo-text.png" className="h-4 pl-3 inline-block opacity-95" alt="" />
+            </a>
+          </div>
+
+          <ul className="flex gap-0 text-white text-sm justify-end pr-4">
+            {links.map((link) => (
+              <li key={link.title}>
+                <Link
+                  to={link.to}
+                  className={`${
+                    location.pathname.startsWith(link.to)
+                      ? "text-white bg-zinc-800 px-3 py-3 rounded-md"
+                      : "text-zinc-400 px-3 py-2 rounded-md hover:text-white"
+                  }`}
+                >
+                  {link.title}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/blocks/page-attributes-view.tsx

@@ -0,0 +1,127 @@
+import React from "react";
+import { Outlet, useParams, useOutletContext } from "react-router";
+
+import { Content } from "./content";
+import { useEntity } from "../hooks";
+import { Alert } from "./alert";
+import { Tabs } from "./tabs";
+import { Markdown } from "./markdown";
+import { Properties } from "./properties";
+import { Tag } from "./tag";
+
+export function DisplayAttributeOverview() {
+  const { entity, name } = useOutletContext() as any;
+
+  return (
+    <div className="border-gray-200 py-6">
+      <dl className="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
+        <div>
+          <dt className="text-sm font-medium text-gray-500">Name</dt>
+          <dd className="mt-1 text-sm text-gray-900">{name}</dd>
+        </div>
+
+        <div>
+          <dt className="text-sm font-medium text-gray-500">Tags</dt>
+          <dd className="mt-1 text-sm text-gray-900">
+            {entity.tags.map((tag: string) => (
+              <Tag tag={tag} key={tag} />
+            ))}
+          </dd>
+        </div>
+
+        <div>
+          <dt className="text-sm font-medium text-gray-500">Archived</dt>
+          <dd className="mt-1 text-sm text-gray-900">
+            {entity.archived === true ? <span>Yes</span> : <span>No</span>}
+          </dd>
+        </div>
+
+        <div>
+          <dt className="text-sm font-medium text-gray-500">Deprecated</dt>
+          <dd className="mt-1 text-sm text-gray-900">
+            {entity.deprecated === true ? <span>Yes</span> : <span>No</span>}
+          </dd>
+        </div>
+
+        <div className="col-span-2">
+          <dt className="text-sm font-medium text-gray-500">Description</dt>
+          <dd className="mt-1 text-sm text-gray-900">
+            {entity.description.trim().length > 0 ? (
+              <Markdown children={entity.description} />
+            ) : (
+              "n/a"
+            )}
+          </dd>
+        </div>
+
+        <div>
+          <dt className="text-sm font-medium text-gray-500">Type</dt>
+          <dd className="mt-1 text-sm text-gray-900">{entity.type}</dd>
+        </div>
+
+        {entity.properties && (
+          <div className="col-span-2">
+            <dd className="mt-1 text-sm text-gray-900">
+              <Properties schema={entity} />
+            </dd>
+          </div>
+        )}
+
+        {entity.transforms && (
+          <div className="col-span-2">
+            <dt className="text-sm font-medium text-gray-500">Transforms</dt>
+            <dd className="mt-1 text-sm text-gray-900">
+              <pre>
+                <code>{JSON.stringify(entity.transforms, null, 2)}</code>
+              </pre>
+            </dd>
+          </div>
+        )}
+
+        {entity.persist && (
+          <div className="col-span-2">
+            <dt className="text-sm font-medium text-gray-500">Persist</dt>
+            <dd className="mt-1 text-sm text-gray-900">
+              <pre>
+                <code>{JSON.stringify(entity.persist, null, 2)}</code>
+              </pre>
+            </dd>
+          </div>
+        )}
+      </dl>
+    </div>
+  );
+}
+
+export const PageAttributesView: React.FC = () => {
+  const { name = "" } = useParams();
+
+  const entity = useEntity("attributes", name);
+
+  const tabs = [
+    {
+      title: "Overview",
+      to: `/attributes/${encodeURIComponent(name)}`,
+    },
+    // {
+    //   title: "History",
+    //   to: `/attributes/${encodeURIComponent(name)}/history`,
+    // },
+  ];
+
+  return (
+    <Content title={`Attribute: ${name}`} border={false} entityType="attribute" entityName={name}>
+      {!entity && <Alert type="warning">Attribute not found</Alert>}
+
+      {entity && (
+        <>
+          <Tabs tabs={tabs} />
+
+          <div className="p-8">
+            <Outlet context={{ entity: entity, name: name }} />
+          </div>
+        </>
+      )}
+    </Content>
+  );
+};