@eventvisor/catalog 0.0.2 → 0.21.0

package/src/blocks/page-events.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+
+import { TagIcon } from "@heroicons/react/20/solid";
+
+import { Content } from "./content";
+import { useEntitiesAsList } from "../hooks";
+import { LinkEvent } from "./links";
+import { Alert } from "./alert";
+import { LastModified } from "./last-modified";
+import { Tag } from "./tag";
+import { SearchInput } from "./search-input";
+import { useSearch } from "../hooks";
+import { getEventsByQuery } from "../utils";
+
+export const PageEvents: React.FC = () => {
+  const entities = useEntitiesAsList("events");
+  const { searchQuery } = useSearch();
+
+  const filteredEntities = getEventsByQuery(searchQuery, entities);
+
+  return (
+    <Content title="Events">
+      <SearchInput />
+
+      {filteredEntities.length === 0 && <Alert type="warning">No results found</Alert>}
+
+      {filteredEntities.length > 0 && (
+        <div>
+          <ul className="diving-gray-200 divide-y">
+            {filteredEntities.map((entity: any) => (
+              <li key={entity.name}>
+                <LinkEvent name={entity.name} className="block hover:bg-gray-50">
+                  <div className="px-6 py-4">
+                    <div className="flex items-center justify-between">
+                      <p className="text-md relative font-bold text-zinc-600">
+                        {entity.name}{" "}
+                        {entity.archived && (
+                          <span className="ml-1 rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-800">
+                            archived
+                          </span>
+                        )}
+                      </p>
+
+                      <div className="ml-2 flex flex-shrink-0 text-xs text-gray-500">
+                        <div>
+                          <TagIcon className="inline-block h-6 w-6 pr-1 text-xs text-gray-400" />
+                          {entity.tags.map((tag: string) => (
+                            <Tag tag={tag} key={tag} />
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="mt-2 flex justify-between">
+                      <div className="flex">
+                        <p className="line-clamp-3 max-w-md items-center text-sm text-gray-500">
+                          {entity.description && entity.description.trim().length > 0
+                            ? entity.description
+                            : "n/a"}
+                        </p>
+                      </div>
+
+                      <div className="items-top mt-2 flex text-xs text-gray-500 sm:mt-0">
+                        <LastModified lastModified={entity.lastModified} />
+                      </div>
+                    </div>
+                  </div>
+                </LinkEvent>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      <p className="mt-6 text-center text-sm text-gray-500">
+        A total of <span className="font-bold">{filteredEntities.length}</span> results found.
+      </p>
+    </Content>
+  );
+};

package/src/blocks/pretty-date.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+
+function getPrettyDate(props: any) {
+  const { showTime } = props;
+  const date = new Date(props.date);
+
+  const day = date.getDate();
+  const month = new Intl.DateTimeFormat("en-US", { month: "short" }).format(date);
+  const year = date.getFullYear();
+
+  const ordinalSuffix = (day: number) => {
+    switch (day % 10) {
+      case 1:
+        return "st";
+      case 2:
+        return "nd";
+      case 3:
+        return "rd";
+      default:
+        return "th";
+    }
+  };
+
+  const prettyDate = `${day}${ordinalSuffix(day)} ${month} ${year}`;
+
+  if (showTime) {
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    const ampm = hours >= 12 ? "PM" : "AM";
+    const hour12 = hours % 12 || 12;
+    const prettyTime = `${hour12}:${minutes.toString().padStart(2, "0")}${ampm}`;
+
+    return (
+      <>
+        <span className="font-normal text-gray-500">{prettyDate}</span>{" "}
+        <span className="font-normal text-gray-500">at</span>{" "}
+        <span className="font-normal text-gray-500">{prettyTime}</span>
+      </>
+    );
+  }
+
+  return prettyDate;
+}
+
+interface PrettyDateProps {
+  date: string;
+  showTime?: boolean;
+}
+
+export function PrettyDate(props: PrettyDateProps) {
+  return <>{getPrettyDate(props)}</>;
+}

package/src/blocks/properties.tsx

@@ -0,0 +1,170 @@
+import React from "react";
+
+type PropertyInfo = {
+  path: string;
+  type: string;
+  required: boolean;
+  description?: string;
+  default?: any;
+};
+
+function flattenSchemaProperties(schema: any, basePath: string = ""): PropertyInfo[] {
+  let results: PropertyInfo[] = [];
+  if (!schema || typeof schema !== "object") return results;
+
+  if (schema.type === "object" && schema.properties && typeof schema.properties === "object") {
+    const keys = Object.keys(schema.properties);
+    for (const key of keys) {
+      const propSchema = schema.properties[key];
+      // A property is required if it's listed in the current schema's required array
+      const isRequired = (schema.required || []).includes(key);
+      const fullPath = basePath ? `${basePath}.${key}` : key;
+
+      if (
+        propSchema.type === "object" &&
+        propSchema.properties &&
+        typeof propSchema.properties === "object"
+      ) {
+        // Add the intermediate object path if it has properties
+        results.push({
+          path: fullPath,
+          type: "object",
+          required: isRequired,
+          description: propSchema.description,
+          default: propSchema.default,
+        });
+
+        // Recursively flatten nested objects
+        results = results.concat(flattenSchemaProperties(propSchema, fullPath));
+      } else if (propSchema.type === "array" && propSchema.items) {
+        // Show the type as array of type if it's an array
+        let itemType = "";
+        if (propSchema.items.type) {
+          itemType = propSchema.items.type;
+        } else if (propSchema.items.$ref) {
+          itemType = propSchema.items.$ref;
+        } else if (propSchema.items) {
+          itemType = "object";
+        }
+        results.push({
+          path: fullPath,
+          type: `array of ${itemType}`,
+          required: isRequired,
+          description: propSchema.description,
+          default: propSchema.default,
+        });
+
+        // If array items are objects with properties, also flatten them:
+        if (propSchema.items && propSchema.items.type === "object" && propSchema.items.properties) {
+          results = results.concat(flattenSchemaProperties(propSchema.items, `${fullPath}[]`));
+        }
+      } else {
+        // Leaf property
+        results.push({
+          path: fullPath,
+          type: propSchema.type || "any",
+          required: isRequired,
+          description: propSchema.description,
+          default: propSchema.default,
+        });
+      }
+    }
+  }
+  return results;
+}
+
+export const PropertiesTable: React.FC<{ schema: any }> = ({ schema }) => {
+  const properties = flattenSchemaProperties(schema);
+
+  if (!schema || !schema.properties || Object.keys(schema.properties).length === 0) {
+    return (
+      <div className="flex items-center justify-center p-8 bg-gray-50 rounded-xl border-2 border-dashed border-gray-200">
+        <div className="text-center">
+          <div className="text-gray-400 text-4xl mb-2">📋</div>
+          <p className="text-gray-500 text-sm font-medium">No properties defined</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
+      {/* Table Header */}
+      <div className="bg-gray-50 px-4 py-2 border-b border-gray-200">
+        <h3 className="text-sm font-semibold text-gray-700">Properties</h3>
+      </div>
+
+      {/* Table */}
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead className="bg-gray-50 border-b border-gray-200">
+            <tr>
+              <th className="text-left px-4 py-3 text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                Path
+              </th>
+              <th className="text-left px-4 py-3 text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                Type
+              </th>
+              <th className="text-left px-4 py-3 text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                Required
+              </th>
+              <th className="text-left px-4 py-3 text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                Description
+              </th>
+              <th className="text-left px-4 py-3 text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                Default
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200">
+            {properties.map((prop) => {
+              return (
+                <tr key={prop.path} className="hover:bg-gray-50 transition-colors">
+                  <td className="px-4 py-2">
+                    <code className="text-xs font-mono text-gray-800">{prop.path}</code>
+                  </td>
+                  <td className="px-4 py-2">
+                    <span className="text-xs text-gray-700">{prop.type}</span>
+                  </td>
+                  <td className="px-4 py-2">
+                    {prop.required ? (
+                      <span className="text-xs text-green-700 font-medium">Yes</span>
+                    ) : (
+                      <span className="text-xs text-gray-400">No</span>
+                    )}
+                  </td>
+                  <td className="px-4 py-2">
+                    <div className="text-xs text-gray-600">
+                      {prop.description ? (
+                        <span>{prop.description}</span>
+                      ) : (
+                        <span className="text-gray-300 italic">n/a</span>
+                      )}
+                    </div>
+                  </td>
+                  <td className="px-4 py-2">
+                    <div className="text-xs text-gray-600">
+                      {prop.default !== undefined ? (
+                        <code className="bg-gray-100 px-1 py-0.5 rounded text-xs">
+                          {typeof prop.default === "string"
+                            ? `"${prop.default}"`
+                            : String(prop.default)}
+                        </code>
+                      ) : (
+                        <span className="text-gray-300 italic">n/a</span>
+                      )}
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export function Properties({ schema }: { schema: any }) {
+  return <PropertiesTable schema={schema} />;
+}

package/src/blocks/root.tsx

@@ -0,0 +1,116 @@
+import React from "react";
+import { HashRouter, Routes, Route, useNavigate } from "react-router";
+import { Catalog } from "@eventvisor/types";
+
+import { Navbar } from "./navbar";
+import { Content } from "./content";
+import { PageEvents } from "./page-events";
+import { PageEventsView, DisplayEventOverview } from "./page-events-view";
+import { PageAttributes } from "./page-attributes";
+import { PageAttributesView, DisplayAttributeOverview } from "./page-attributes-view";
+import { PageDestinations } from "./page-destinations";
+import { PageDestinationsView, DisplayDestinationOverview } from "./page-destinations-view";
+import { PageEffects } from "./page-effects";
+import { PageEffectsView, DisplayEffectOverview } from "./page-effects-view";
+import { CatalogContext } from "../contexts";
+
+import { Alert } from "./alert";
+
+const HomePage: React.FC = () => {
+  const navigate = useNavigate();
+
+  React.useEffect(() => {
+    navigate("/events");
+  }, []);
+
+  return (
+    <Content title="Home">
+      <div className="mt-6">
+        <Alert type="warning">Loading...</Alert>
+      </div>
+    </Content>
+  );
+};
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="max-w-3xl pb-4 mx-auto mt-10 bg-white min-h-60 rounded-md shadow">
+      {children}
+    </div>
+  );
+}
+
+export const Root: React.FC = () => {
+  const [catalog, setCatalog] = React.useState<Catalog | null>(null);
+
+  React.useEffect(() => {
+    fetch("/catalog.json")
+      .then((response) => response.json())
+      .then((data) => setCatalog(data as Catalog));
+  }, []);
+
+  if (!catalog) {
+    return (
+      <HashRouter>
+        <Navbar />
+
+        <Wrapper>
+          <Content title="Home">
+            <div className="mt-6">
+              <Alert type="warning">Loading...</Alert>
+            </div>
+          </Content>
+        </Wrapper>
+      </HashRouter>
+    );
+  }
+
+  return (
+    <HashRouter>
+      <Navbar />
+
+      <Wrapper>
+        <CatalogContext.Provider value={catalog}>
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+
+            <Route path="attributes">
+              <Route index element={<PageAttributes />} />
+              <Route path=":name" element={<PageAttributesView />}>
+                <Route index element={<DisplayAttributeOverview />} />
+              </Route>
+            </Route>
+
+            <Route path="events">
+              <Route index element={<PageEvents />} />
+              <Route path=":name" element={<PageEventsView />}>
+                <Route index element={<DisplayEventOverview />} />
+              </Route>
+            </Route>
+
+            <Route path="destinations">
+              <Route index element={<PageDestinations />} />
+              <Route path=":name" element={<PageDestinationsView />}>
+                <Route index element={<DisplayDestinationOverview />} />
+              </Route>
+            </Route>
+
+            <Route path="effects">
+              <Route index element={<PageEffects />} />
+              <Route path=":name" element={<PageEffectsView />}>
+                <Route index element={<DisplayEffectOverview />} />
+              </Route>
+            </Route>
+          </Routes>
+        </CatalogContext.Provider>
+      </Wrapper>
+
+      <div className="text-xs text-zinc-500 mt-10 text-center pb-10">
+        Built with{" "}
+        <a target="_blank" href="https://eventvisor.org">
+          Eventvisor
+        </a>
+      </div>
+    </HashRouter>
+  );
+};

package/src/blocks/search-input.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { useSearch } from "../hooks";
+
+export function SearchInput() {
+  const { searchQuery, setSearchQuery } = useSearch();
+
+  return (
+    <div className="relative px-4 pt-3.5">
+      <div className="pointer-events-none absolute">
+        <svg
+          className="absolute ml-3 mt-5 h-6 w-6 text-zinc-400"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fillRule="evenodd"
+            d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </div>
+      <input
+        type="text"
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+        placeholder="Type to search..."
+        autoComplete="off"
+        className="mb-4 mt-2 p-2 w-full rounded-full border border-zinc-300 indent-8 text-xl text-zinc-500 placeholder:text-zinc-400"
+      />
+    </div>
+  );
+}

package/src/blocks/tabs.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { NavLink } from "react-router";
+
+interface Tab {
+  title: string;
+  to: string;
+  end?: boolean;
+}
+
+interface TabsProps {
+  tabs: Tab[];
+}
+
+export function Tabs(props: TabsProps) {
+  const { tabs } = props;
+
+  return (
+    <div className="border-b border-gray-200">
+      <div className="flex">
+        {tabs.map((tab) => (
+          <NavLink
+            key={tab.title}
+            to={tab.to}
+            end={Boolean(tab.end)}
+            className={({ isActive }) =>
+              [
+                "w-1/4",
+                "border-b-2",
+                "pt-2",
+                "pb-4",
+                "px-1",
+                "text-center",
+                "text-sm",
+                "font-medium",
+                isActive
+                  ? "border-slate-500 text-slate-600"
+                  : "border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700",
+              ].join(" ")
+            }
+          >
+            {tab.title}
+          </NavLink>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/blocks/tag.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+interface TagProps {
+  tag: string;
+}
+
+export function Tag(props: TagProps) {
+  return (
+    <span className="mr-1 rounded-full border-zinc-400 bg-zinc-300 px-2 py-1 text-xs text-gray-600">
+      {props.tag}
+    </span>
+  );
+}

package/src/contexts/index.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Catalog } from "@eventvisor/types";
+
+export const CatalogContext = React.createContext<Catalog | undefined>(undefined);

package/src/hooks/index.ts

@@ -0,0 +1,98 @@
+import React from "react";
+import { useSearchParams } from "react-router";
+
+import { CatalogContext } from "../contexts";
+
+export function useCatalog() {
+  return React.useContext(CatalogContext);
+}
+
+export type EntitiesType = "attributes" | "events" | "destinations" | "effects";
+
+export function useEntities(type: EntitiesType) {
+  const catalog = useCatalog();
+
+  if (!catalog) {
+    return [];
+  }
+
+  return catalog.entities[type];
+}
+
+export function useEntityEditLink(entityType: string, entityName: string) {
+  const catalog = useCatalog();
+
+  if (!catalog) {
+    return;
+  }
+
+  const link = catalog.links?.[entityType as keyof typeof catalog.links];
+
+  if (!link) {
+    return;
+  }
+
+  return link.replace("{{name}}", entityName);
+}
+
+export function useEntitiesAsList(type: EntitiesType) {
+  const entities = useEntities(type);
+
+  const list = React.useMemo(() => {
+    const arr = [];
+
+    for (const [key, value] of Object.entries(entities)) {
+      arr.push({
+        name: key,
+        ...value,
+      });
+    }
+
+    return arr;
+  }, [entities]);
+
+  return list;
+}
+
+export function useEntityNames(type: EntitiesType) {
+  const catalog = useCatalog();
+
+  if (!catalog) {
+    return [];
+  }
+
+  return Object.keys(catalog.entities[type]);
+}
+
+export function useEntity(type: EntitiesType, name: string) {
+  const catalog = useCatalog();
+
+  if (!catalog) {
+    return undefined;
+  }
+
+  return catalog.entities[type][name];
+}
+
+export const SEARCH_QUERY_KEY = "q";
+
+export function useSearch() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const searchQuery = String(searchParams.get(SEARCH_QUERY_KEY) || "");
+
+  const setSearchQuery = React.useCallback((value: string) => {
+    const newSearchParams = new URLSearchParams(searchParams.toString());
+
+    if (value) {
+      newSearchParams.set(SEARCH_QUERY_KEY, String(value));
+    } else {
+      newSearchParams.delete(SEARCH_QUERY_KEY);
+    }
+    setSearchParams(newSearchParams);
+  }, []);
+
+  return {
+    searchQuery,
+    setSearchQuery,
+  } as const;
+}

package/src/main.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+
+import { Root } from "./blocks/root";
+
+import "./styles.css";
+
+const rootElement = document.getElementById("root");
+if (!rootElement) {
+  throw new Error("Root element not found");
+}
+
+createRoot(rootElement).render(<Root />);