@featurevisor/site 0.8.0

package/src/components/Footer.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+
+export function Footer() {
+  return (
+    <footer>
+      <p className="pb-5 text-center text-xs leading-5 text-gray-500">
+        Site built using{" "}
+        <a target="_blank" href="https://featurevisor.com">
+          Featurevisor
+        </a>
+      </p>
+    </footer>
+  );
+}

package/src/components/Header.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { Link, NavLink } from "react-router-dom";
+
+export function Header() {
+  const navItems = [
+    {
+      title: "Features",
+      to: "features",
+      active: true,
+    },
+    {
+      title: "Segments",
+      to: "segments",
+    },
+    {
+      title: "Attributes",
+      to: "attributes",
+    },
+    {
+      title: "History",
+      to: "history",
+    },
+  ];
+
+  return (
+    <div className="bg-gray-800">
+      <nav className="mx-auto flex max-w-4xl items-center justify-between px-8 pb-4 pt-3">
+        <Link to="/" className="text-gray-50">
+          <img
+            alt="Featurevisor"
+            src="/favicon-128.png"
+            className="absolute top-4 -ml-2 w-[36px]"
+          />
+        </Link>
+
+        <div className="relative flex gap-x-4">
+          {navItems.map((item) => (
+            <NavLink
+              key={item.title}
+              to={item.to}
+              className={({ isActive }) => {
+                return [
+                  "relative",
+                  "rounded-lg",
+                  isActive ? "bg-gray-700" : "",
+                  "px-3",
+                  "py-2",
+                  "text-sm",
+                  "font-semibold",
+                  "leading-6",
+                  "text-gray-50",
+                ].join(" ");
+              }}
+            >
+              {item.title}
+            </NavLink>
+          ))}
+        </div>
+      </nav>
+    </div>
+  );
+}

package/src/components/HistoryTimeline.tsx

@@ -0,0 +1,179 @@
+import * as React from "react";
+
+import { UserCircleIcon } from "@heroicons/react/20/solid";
+
+import { Alert } from "./Alert";
+import { PrettyDate } from "./PrettyDate";
+import { useSearchIndex } from "../hooks/searchIndexHook";
+
+const entriesPerPage = 50;
+const initialMaxEntitiesCount = 10;
+
+function Activity(props) {
+  const { entry, links } = props;
+  const [showAll, setShowAll] = React.useState(false);
+
+  const entitiesToRender = showAll
+    ? entry.entities
+    : entry.entities.slice(0, initialMaxEntitiesCount);
+
+  return (
+    <>
+      <span className="font-semibold text-gray-600">{entry.author}</span>{" "}
+      updated{" "}
+      {entry.entities.length === 1 ? (
+        <>
+          {entry.entities[0].type}{" "}
+          <a href="#" className="font-semibold text-gray-600">
+            {entry.entities[0].key}
+          </a>
+        </>
+      ) : (
+        ""
+      )}{" "}
+      on{" "}
+      <a
+        href={
+          links
+            ? links.commit.replace("{{hash}}", entry.commit)
+            : `#${entry.commit}`
+        }
+        target="_blank"
+        className="font-semibold text-gray-600"
+      >
+        <PrettyDate date={entry.timestamp} showTime={props.showTime} />
+      </a>
+      {entry.entities.length > 1 && (
+        <>
+          <span>:</span>
+          <ul className="list-disc pl-3.5 pt-2 text-gray-400 marker:text-gray-400">
+            {entitiesToRender.map((entity, index) => {
+              return (
+                <li key={index}>
+                  <span className="text-gray-400">{entity.type}</span>{" "}
+                  <a href="#" className="font-semibold text-gray-500">
+                    {entity.key}
+                  </a>
+                </li>
+              );
+            })}
+
+            {!showAll && entry.entities.length > initialMaxEntitiesCount && (
+              <li key="show-all">
+                <a
+                  href="#"
+                  className="font-bold underline"
+                  onClick={() => setShowAll(true)}
+                >
+                  Show all
+                </a>
+              </li>
+            )}
+          </ul>
+        </>
+      )}
+    </>
+  );
+}
+
+interface HistoryTimelineProps {
+  className?: string;
+  filter?: (entry: any) => boolean;
+  entityType?: string;
+  entityKey?: string;
+  showTime?: boolean;
+}
+
+export function HistoryTimeline(props: HistoryTimelineProps) {
+  const { data } = useSearchIndex();
+  const links = data?.links;
+  const [historyEntries, setHistoryEntries] = React.useState([]);
+
+  const [page, setPage] = React.useState(1);
+
+  React.useEffect(() => {
+    fetch("/history-full.json")
+      .then((res) => res.json())
+      .then((data) => {
+        const filteredHistoryEntries = data.filter((entry: any) => {
+          if (props.filter) {
+            return props.filter(entry);
+          }
+
+          if (props.entityType && props.entityKey) {
+            return entry.entities.some(
+              (entity: any) =>
+                entity.type === props.entityType &&
+                entity.key === props.entityKey
+            );
+          }
+
+          return true;
+        });
+
+        setHistoryEntries(filteredHistoryEntries);
+      });
+  }, []);
+
+  const entriesToRender = historyEntries.slice(0, page * entriesPerPage);
+
+  return (
+    <div className={props.className || ""}>
+      {entriesToRender.length === 0 && (
+        <Alert type="warning">No history found.</Alert>
+      )}
+
+      {entriesToRender.length > 0 && (
+        <div>
+          <ul className="mt-8">
+            <li>
+              {entriesToRender
+                .slice(0, page * entriesPerPage)
+                .map((entry: any, index) => {
+                  const isNotLast = entriesToRender.length !== index + 1;
+
+                  return (
+                    <div className="relative pb-8">
+                      {isNotLast ? (
+                        <span className="absolute left-4 top-5 -ml-px h-full w-0.5 bg-gray-200" />
+                      ) : (
+                        ""
+                      )}
+                      <div className="relative flex space-x-3">
+                        <div>
+                          <div className="relative">
+                            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 ring-4 ring-white">
+                              <UserCircleIcon className="h-5 w-5 text-gray-500" />
+                            </div>
+                          </div>
+                        </div>
+                        <div className="min-w-0 flex-1 py-1.5">
+                          <div className="text-sm text-gray-500">
+                            <Activity
+                              entry={entry}
+                              showTime={props.showTime}
+                              links={links}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+            </li>
+          </ul>
+
+          {historyEntries.length > entriesToRender.length && (
+            <a
+              href="#"
+              className="text-md block rounded-md border border-gray-300 bg-gray-50 py-2 pl-6 text-center font-bold text-gray-500 shadow-sm hover:bg-gray-100"
+              onClick={() => setPage(page + 1)}
+            >
+              Load more
+            </a>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/LastModified.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+import { PrettyDate } from "./PrettyDate";
+
+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/components/ListAttributes.tsx

@@ -0,0 +1,87 @@
+import * as React from "react";
+import { Link } from "react-router-dom";
+
+import { SearchIndex } from "@featurevisor/types";
+import { useSearchIndex } from "../hooks/searchIndexHook";
+import { getQueryFromString, getAttributesByQuery } from "../utils";
+import { Tag } from "./Tag";
+import { Alert } from "./Alert";
+import { SearchInput } from "./SearchInput";
+import { PageTitle } from "./PageTitle";
+import { PageContent } from "./PageContent";
+import { LastModified } from "./LastModified";
+
+export function ListAttributes() {
+  const [q, setQ] = React.useState("");
+
+  const contextValue = useSearchIndex();
+  const data = contextValue.data as SearchIndex;
+
+  const query = getQueryFromString(q);
+  const attributes = getAttributesByQuery(query, data);
+
+  return (
+    <PageContent>
+      <PageTitle>Attributes</PageTitle>
+
+      <SearchInput value={q} onChange={(e: any) => setQ(e.target.value)} />
+
+      {attributes.length === 0 && <Alert type="warning">No results found</Alert>}
+
+      {attributes.length > 0 && (
+        <div>
+          <ul className="diving-gray-200 divide-y">
+            {attributes.map((attribute: any) => (
+              <li key={attribute.key}>
+                <Link to={`/attributes/${attribute.key}`} 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-slate-600">
+                        {attribute.key}{" "}
+                        {attribute.capture && (
+                          <span className="ml-1 rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-800">
+                            capture
+                          </span>
+                        )}
+                        {attribute.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>
+                          Used in: <Tag tag={`${attribute.usedInSegments.length} segments`} />{" "}
+                          <Tag tag={`${attribute.usedInFeatures.length} features`} />
+                        </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">
+                          {attribute.description && attribute.description.trim().length > 0
+                            ? attribute.description
+                            : "n/a"}
+                        </p>
+                      </div>
+
+                      <div className="items-top mt-2 flex text-xs text-gray-500 sm:mt-0">
+                        <LastModified lastModified={attribute.lastModified} />
+                      </div>
+                    </div>
+                  </div>
+                </Link>
+              </li>
+            ))}
+          </ul>
+
+          <p className="mt-6 text-center text-sm text-gray-500">
+            A total of <span className="font-bold">{attributes.length}</span> results found.
+          </p>
+        </div>
+      )}
+    </PageContent>
+  );
+}

package/src/components/ListFeatures.tsx

@@ -0,0 +1,95 @@
+import * as React from "react";
+import { Link } from "react-router-dom";
+
+import { TagIcon } from "@heroicons/react/20/solid";
+
+import { SearchIndex } from "@featurevisor/types";
+import { useSearchIndex } from "../hooks/searchIndexHook";
+import { getQueryFromString, getFeaturesByQuery } from "../utils";
+import { EnvironmentDot } from "./EnvironmentDot";
+import { Tag } from "./Tag";
+import { Alert } from "./Alert";
+import { SearchInput } from "./SearchInput";
+import { PageTitle } from "./PageTitle";
+import { PageContent } from "./PageContent";
+import { LastModified } from "./LastModified";
+
+export function ListFeatures() {
+  const [q, setQ] = React.useState("");
+
+  const contextValue = useSearchIndex();
+  const data = contextValue.data as SearchIndex;
+
+  const query = getQueryFromString(q);
+  const features = getFeaturesByQuery(query, data);
+
+  return (
+    <PageContent>
+      <PageTitle>Features</PageTitle>
+
+      <SearchInput value={q} onChange={(e: any) => setQ(e.target.value)} />
+
+      {features.length === 0 && <Alert type="warning">No results found</Alert>}
+
+      {features.length > 0 && (
+        <div>
+          <ul className="diving-gray-200 divide-y">
+            {features.map((feature: any) => (
+              <li key={feature.key}>
+                <Link to={`/features/${feature.key}`}>
+                  <div 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-slate-600">
+                          <EnvironmentDot
+                            feature={feature}
+                            className="relative top-[0.5px] inline-block pr-2"
+                          />{" "}
+                          <a href="#" className="font-bold">
+                            {feature.key}
+                          </a>{" "}
+                          {feature.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">
+                          <div>
+                            <TagIcon className="inline-block h-6 w-6 pr-1 text-xs text-gray-400" />
+                            {feature.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 pl-6 text-sm text-gray-500">
+                            {feature.description && feature.description.trim().length > 0
+                              ? feature.description
+                              : "n/a"}
+                          </p>
+                        </div>
+
+                        <div className="items-top mt-2 flex text-xs text-gray-500 sm:mt-0">
+                          <LastModified lastModified={feature.lastModified} />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </Link>
+              </li>
+            ))}
+          </ul>
+
+          <p className="mt-6 text-center text-sm text-gray-500">
+            A total of <span className="font-bold">{features.length}</span> results found.
+          </p>
+        </div>
+      )}
+    </PageContent>
+  );
+}

package/src/components/ListHistory.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+import { PageContent } from "./PageContent";
+import { PageTitle } from "./PageTitle";
+import { HistoryTimeline } from "./HistoryTimeline";
+
+export function ListHistory() {
+  return (
+    <PageContent>
+      <PageTitle>History</PageTitle>
+
+      <div className="px-8">
+        <HistoryTimeline showTime />
+      </div>
+    </PageContent>
+  );
+}

package/src/components/ListSegments.tsx

@@ -0,0 +1,81 @@
+import * as React from "react";
+import { Link } from "react-router-dom";
+
+import { SearchIndex } from "@featurevisor/types";
+import { useSearchIndex } from "../hooks/searchIndexHook";
+import { getQueryFromString, getSegmentsByQuery } from "../utils";
+import { Tag } from "./Tag";
+import { Alert } from "./Alert";
+import { SearchInput } from "./SearchInput";
+import { PageTitle } from "./PageTitle";
+import { PageContent } from "./PageContent";
+import { LastModified } from "./LastModified";
+
+export function ListSegments() {
+  const [q, setQ] = React.useState("");
+
+  const contextValue = useSearchIndex();
+  const data = contextValue.data as SearchIndex;
+
+  const query = getQueryFromString(q);
+  const segments = getSegmentsByQuery(query, data);
+
+  return (
+    <PageContent>
+      <PageTitle>Segments</PageTitle>
+
+      <SearchInput value={q} onChange={(e: any) => setQ(e.target.value)} />
+
+      {segments.length === 0 && <Alert type="warning">No results found</Alert>}
+
+      {segments.length > 0 && (
+        <div>
+          <ul className="diving-gray-200 divide-y">
+            {segments.map((segment: any) => (
+              <li key={segment.key}>
+                <Link to={`/segments/${segment.key}`} 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-slate-600">
+                        {segment.key}{" "}
+                        {segment.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>
+                          Used in: <Tag tag={`${segment.usedInFeatures.length} features`} />
+                        </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">
+                          {segment.description && segment.description.trim().length > 0
+                            ? segment.description
+                            : "n/a"}
+                        </p>
+                      </div>
+
+                      <div className="items-top mt-2 flex text-xs text-gray-500 sm:mt-0">
+                        <LastModified lastModified={segment.lastModified} />
+                      </div>
+                    </div>
+                  </div>
+                </Link>
+              </li>
+            ))}
+          </ul>
+
+          <p className="mt-6 text-center text-sm text-gray-500">
+            A total of <span className="font-bold">{segments.length}</span> results found.
+          </p>
+        </div>
+      )}
+    </PageContent>
+  );
+}

package/src/components/Markdown.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+import ReactMarkdown from "react-markdown";
+
+export function Markdown(props) {
+  return (
+    <ReactMarkdown
+      className={`prose prose-sm text-gray-700 ${props.className || ""}`}
+      children={props.children}
+    />
+  );
+}

package/src/components/PageContent.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+
+export function PageContent(props: { children: React.ReactNode }) {
+  return (
+    <div className="m-8 mx-auto max-w-4xl rounded-lg bg-white px-0 py-0 pb-8 shadow">
+      {props.children}
+    </div>
+  );
+}

package/src/components/PageTitle.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+export function PageTitle(props: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <h1
+      className={[
+        "mx-6",
+        "border-b",
+        "pb-4",
+        "pt-8",
+        "text-3xl",
+        "font-black",
+        "text-gray-700",
+        props.className ? props.className : "",
+      ].join(" ")}
+    >
+      {props.children}
+    </h1>
+  );
+}

package/src/components/PrettyDate.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+
+function getPrettyDate(props) {
+  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)}</>;
+}