@eventvisor/catalog 0.0.2 → 0.21.0

package/src/blocks/page-attributes.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 { LinkAttribute } 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 { getAttributesByQuery } from "../utils";
+
+export const PageAttributes: React.FC = () => {
+  const entities = useEntitiesAsList("attributes");
+  const { searchQuery } = useSearch();
+
+  const filteredEntities = getAttributesByQuery(searchQuery, entities);
+
+  return (
+    <Content title="Attributes">
+      <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}>
+                <LinkAttribute 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>
+                </LinkAttribute>
+              </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/page-destinations-view.tsx

@@ -0,0 +1,134 @@
+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 { Tag } from "./tag";
+
+export function DisplayDestinationOverview() {
+  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>
+          <dt className="text-sm font-medium text-gray-500">Transport</dt>
+          <dd className="mt-1 text-sm text-gray-900">{entity.transport}</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>
+
+        {entity.conditions && (
+          <div className="col-span-2">
+            <dt className="text-sm font-medium text-gray-500">Conditions</dt>
+            <dd className="mt-1 text-sm text-gray-900">
+              <pre>
+                <code>{JSON.stringify(entity.conditions, null, 2)}</code>
+              </pre>
+            </dd>
+          </div>
+        )}
+
+        {entity.sample && (
+          <div className="col-span-2">
+            <dt className="text-sm font-medium text-gray-500">Sample</dt>
+            <dd className="mt-1 text-sm text-gray-900">
+              <pre>
+                <code>{JSON.stringify(entity.sample, null, 2)}</code>
+              </pre>
+            </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>
+        )}
+      </dl>
+    </div>
+  );
+}
+
+export const PageDestinationsView: React.FC = () => {
+  const { name = "" } = useParams();
+
+  const entity = useEntity("destinations", name);
+
+  const tabs = [
+    {
+      title: "Overview",
+      to: `/destinations/${encodeURIComponent(name)}`,
+    },
+    // {
+    //   title: "History",
+    //   to: `/destinations/${encodeURIComponent(name)}/history`,
+    // },
+  ];
+
+  return (
+    <Content
+      title={`Destination: ${name}`}
+      border={false}
+      entityType="destination"
+      entityName={name}
+    >
+      {!entity && <Alert type="warning">Destination not found</Alert>}
+
+      {entity && (
+        <>
+          <Tabs tabs={tabs} />
+
+          <div className="p-8">
+            <Outlet context={{ entity: entity, name: name }} />
+          </div>
+        </>
+      )}
+    </Content>
+  );
+};

package/src/blocks/page-destinations.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 { LinkDestination } 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 { getDestinationsByQuery } from "../utils";
+
+export const PageDestinations: React.FC = () => {
+  const entities = useEntitiesAsList("destinations");
+  const { searchQuery } = useSearch();
+
+  const filteredEntities = getDestinationsByQuery(searchQuery, entities);
+
+  return (
+    <Content title="Destinations">
+      <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}>
+                <LinkDestination 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>
+                </LinkDestination>
+              </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/page-effects-view.tsx

@@ -0,0 +1,139 @@
+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 { Tag } from "./tag";
+
+export function DisplayEffectOverview() {
+  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 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>
+
+        {entity.on && (
+          <div className="col-span-2">
+            <dt className="text-sm font-medium text-gray-500">On</dt>
+            <dd className="mt-1 text-sm text-gray-900">
+              <pre>
+                <code>{JSON.stringify(entity.on, null, 2)}</code>
+              </pre>
+            </dd>
+          </div>
+        )}
+
+        {entity.state && (
+          <div className="col-span-2">
+            <dt className="text-sm font-medium text-gray-500">State</dt>
+            <dd className="mt-1 text-sm text-gray-900">
+              <pre>
+                <code>{JSON.stringify(entity.state, null, 2)}</code>
+              </pre>
+            </dd>
+          </div>
+        )}
+
+        {entity.conditions && (
+          <div className="col-span-2">
+            <dt className="text-sm font-medium text-gray-500">Conditions</dt>
+            <dd className="mt-1 text-sm text-gray-900">
+              <pre>
+                <code>{JSON.stringify(entity.conditions, null, 2)}</code>
+              </pre>
+            </dd>
+          </div>
+        )}
+
+        {entity.steps && (
+          <div className="col-span-2">
+            <dt className="text-sm font-medium text-gray-500">Steps</dt>
+            <dd className="mt-1 text-sm text-gray-900">
+              <pre>
+                <code>{JSON.stringify(entity.steps, 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 PageEffectsView: React.FC = () => {
+  const { name = "" } = useParams();
+
+  const entity = useEntity("effects", name);
+
+  const tabs = [
+    {
+      title: "Overview",
+      to: `/effects/${encodeURIComponent(name)}`,
+    },
+    // {
+    //   title: "History",
+    //   to: `/effects/${encodeURIComponent(name)}/history`,
+    // },
+  ];
+
+  return (
+    <Content title={`Effect: ${name}`} border={false} entityType="effect" entityName={name}>
+      {!entity && <Alert type="warning">Effect not found</Alert>}
+
+      {entity && (
+        <>
+          <Tabs tabs={tabs} />
+
+          <div className="p-8">
+            <Outlet context={{ entity: entity, name: name }} />
+          </div>
+        </>
+      )}
+    </Content>
+  );
+};

package/src/blocks/page-effects.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 { LinkEffect } 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 { getEffectsByQuery } from "../utils";
+
+export const PageEffects: React.FC = () => {
+  const entities = useEntitiesAsList("effects");
+  const { searchQuery } = useSearch();
+
+  const filteredEntities = getEffectsByQuery(searchQuery, entities);
+
+  return (
+    <Content title="Effects">
+      <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}>
+                <LinkEffect 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>
+                </LinkEffect>
+              </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/page-events-view.tsx

@@ -0,0 +1,147 @@
+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 DisplayEventOverview() {
+  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>
+
+        <div className="col-span-2">
+          <dd className="mt-1 text-sm text-gray-900">
+            <Properties schema={entity} />
+          </dd>
+        </div>
+
+        {entity.conditions && (
+          <div className="col-span-2">
+            <dt className="text-sm font-medium text-gray-500">Conditions</dt>
+            <dd className="mt-1 text-sm text-gray-900">
+              <pre>
+                <code>{JSON.stringify(entity.conditions, null, 2)}</code>
+              </pre>
+            </dd>
+          </div>
+        )}
+
+        {entity.sample && (
+          <div className="col-span-2">
+            <dt className="text-sm font-medium text-gray-500">Sample</dt>
+            <dd className="mt-1 text-sm text-gray-900">
+              <pre>
+                <code>{JSON.stringify(entity.sample, null, 2)}</code>
+              </pre>
+            </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.destinations && (
+          <div className="col-span-2">
+            <dt className="text-sm font-medium text-gray-500">Destination overrides</dt>
+            <dd className="mt-1 text-sm text-gray-900">
+              <pre>
+                <code>{JSON.stringify(entity.destinations, null, 2)}</code>
+              </pre>
+            </dd>
+          </div>
+        )}
+      </dl>
+    </div>
+  );
+}
+
+export const PageEventsView: React.FC = () => {
+  const { name = "" } = useParams();
+
+  const entity = useEntity("events", name);
+
+  const tabs = [
+    {
+      title: "Overview",
+      to: `/events/${encodeURIComponent(name)}`,
+    },
+    // {
+    //   title: "History",
+    //   to: `/events/${encodeURIComponent(name)}/history`,
+    // },
+  ];
+
+  return (
+    <Content title={`Event: ${name}`} border={false} entityType="event" entityName={name}>
+      {!entity && <Alert type="warning">Event not found</Alert>}
+
+      {entity && (
+        <>
+          <Tabs tabs={tabs} />
+
+          <div className="p-8">
+            <Outlet context={{ entity: entity, name: name }} />
+          </div>
+        </>
+      )}
+    </Content>
+  );
+};