@featurevisor/site 0.8.0

package/src/components/ShowSegment.tsx

@@ -0,0 +1,125 @@
+import * as React from "react";
+import { useParams, useOutletContext, Outlet, Link } from "react-router-dom";
+
+import { PageContent } from "./PageContent";
+import { PageTitle } from "./PageTitle";
+import { Tabs } from "./Tabs";
+import { HistoryTimeline } from "./HistoryTimeline";
+import { ExpandConditions } from "./ExpandConditions";
+import { EditLink } from "./EditLink";
+import { useSearchIndex } from "../hooks/searchIndexHook";
+import { Markdown } from "./Markdown";
+
+export function DisplaySegmentOverview() {
+  const { segment } = useOutletContext() as any;
+
+  return (
+    <div className="border-gray-200">
+      <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">Key</dt>
+          <dd className="mt-1 text-sm text-gray-900">{segment.key}</dd>
+        </div>
+        <div>
+          <dt className="text-sm font-medium text-gray-500">Archived</dt>
+          <dd className="mt-1 text-sm text-gray-900">
+            {segment.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">
+            {segment.description.trim().length > 0 ? (
+              <Markdown children={segment.description} />
+            ) : (
+              "n/a"
+            )}
+          </dd>
+        </div>
+        <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">
+            <ExpandConditions conditions={segment.conditions} />
+          </dd>
+        </div>
+      </dl>
+    </div>
+  );
+}
+
+export function DisplaySegmentUsage() {
+  const { segment } = useOutletContext() as any;
+
+  return (
+    <div className="border-gray-200">
+      <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">Features</dt>
+          <dd className="mt-1 text-sm text-gray-900">
+            {segment.usedInFeatures.length === 0 && "none"}
+
+            {segment.usedInFeatures.length > 0 && (
+              <ul className="list-inside list-disc">
+                {segment.usedInFeatures.map((feature) => {
+                  return (
+                    <li key={feature}>
+                      <Link to={`/features/${feature}`}>{feature}</Link>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </dd>
+        </div>
+      </dl>
+    </div>
+  );
+}
+
+export function DisplaySegmentHistory() {
+  const { segment } = useOutletContext() as any;
+
+  return <HistoryTimeline entityType="segment" entityKey={segment.key} />;
+}
+
+export function ShowSegment(props) {
+  const { segmentKey } = useParams();
+  const { data } = useSearchIndex();
+  const links = data?.links;
+  const segment = data?.entities.segments.find((s) => s.key === segmentKey);
+
+  if (!segment) {
+    return <div>Segment not found</div>;
+  }
+
+  const tabs = [
+    {
+      title: "Overview",
+      to: `/segments/${segmentKey}`,
+    },
+    {
+      title: "Usage",
+      to: `/segments/${segmentKey}/usage`,
+    },
+    {
+      title: "History",
+      to: `/segments/${segmentKey}/history`,
+    },
+  ];
+
+  return (
+    <PageContent>
+      <PageTitle className="border-none">
+        Segment: {segmentKey}{" "}
+        {links && <EditLink url={links.segment.replace("{{key}}", segment.key)} />}
+      </PageTitle>
+
+      <Tabs tabs={tabs} />
+
+      <div className="p-8">
+        <Outlet context={{ segment }} />
+      </div>
+    </PageContent>
+  );
+}

package/src/components/Tabs.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { NavLink } from "react-router-dom";
+
+interface Tab {
+  title: string;
+  to: string;
+}
+
+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
+            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/components/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-slate-400 bg-slate-300 px-2 py-1 text-xs text-gray-600">
+      {props.tag}
+    </span>
+  );
+}

package/src/contexts/SearchIndexContext.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { SearchIndex } from "@featurevisor/types";
+
+export interface SearchIndexProps {
+  isLoaded: boolean;
+  data?: SearchIndex;
+}
+
+export const SearchIndexContext = React.createContext<SearchIndexProps>({
+  isLoaded: false,
+  data: undefined,
+});

package/src/hooks/searchIndexHook.ts

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+
+import { SearchIndexContext } from "../contexts/SearchIndexContext";
+
+export function useSearchIndex() {
+  const value = useContext(SearchIndexContext);
+
+  return value;
+}

package/src/index.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+  background: theme("colors.gray.200");
+}

package/src/index.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { HashRouter } from "react-router-dom";
+
+import { App } from "./components/App";
+
+ReactDOM.render(
+  <HashRouter>
+    <App />
+  </HashRouter>,
+  document.getElementById("root"),
+);

package/src/utils/index.ts

@@ -0,0 +1,203 @@
+import { SearchIndex } from "@featurevisor/types";
+
+export interface Query {
+  keyword: string;
+  tags: string[];
+  environments: string[];
+  archived?: boolean;
+  capture?: boolean;
+}
+
+export function getQueryFromString(q: string) {
+  const query: Query = {
+    keyword: "",
+    tags: [],
+    environments: [],
+    archived: undefined,
+    capture: undefined,
+  };
+
+  const parts = q.split(" ");
+
+  for (const part of parts) {
+    if (part.startsWith("tag:")) {
+      const tag = part.replace("tag:", "");
+
+      if (tag.length > 0) {
+        query.tags.push(tag);
+      }
+    } else if (part.startsWith("in:")) {
+      const environment = part.replace("in:", "");
+
+      if (environment.length > 0) {
+        query.environments.push(environment);
+      }
+    } else if (part.startsWith("archived:")) {
+      const archived = part.replace("archived:", "");
+
+      if (archived === "true") {
+        query.archived = true;
+      } else if (archived === "false") {
+        query.archived = false;
+      }
+    } else if (part.startsWith("capture:")) {
+      const capture = part.replace("capture:", "");
+
+      if (capture === "true") {
+        query.capture = true;
+      } else if (capture === "false") {
+        query.capture = false;
+      }
+    } else {
+      if (part.length > 0) {
+        query.keyword = part;
+      }
+    }
+  }
+
+  return query;
+}
+
+export function isEnabledInEnvironment(feature: any, environment: string) {
+  if (feature.archived === true) {
+    return false;
+  }
+
+  if (!feature.environments[environment]) {
+    return false;
+  }
+
+  if (feature.environments[environment].exposed === false) {
+    return false;
+  }
+
+  if (feature.environments[environment].rules.some((rule: any) => rule.percentage > 0)) {
+    return true;
+  }
+
+  return false;
+}
+
+export function isEnabledInAnyEnvironment(feature: any) {
+  const environments = Object.keys(feature.environments);
+
+  for (const environment of environments) {
+    const isEnabled = isEnabledInEnvironment(feature, environment);
+
+    if (isEnabled) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export function getFeaturesByQuery(query: Query, data: SearchIndex) {
+  const features = data.entities.features
+    .filter((feature) => {
+      let matched = true;
+
+      if (query.keyword.length > 0 && feature.key.indexOf(query.keyword.toLowerCase()) === -1) {
+        matched = false;
+      }
+
+      if (query.tags.length > 0) {
+        for (const tag of query.tags) {
+          if (feature.tags.every((t: string) => t.toLowerCase() !== tag.toLowerCase())) {
+            matched = false;
+          }
+        }
+      }
+
+      if (query.environments.length > 0 && feature.archived !== false) {
+        for (const environment of query.environments) {
+          if (isEnabledInEnvironment(feature, environment) === false) {
+            matched = false;
+          }
+        }
+      }
+
+      if (typeof query.archived === "boolean") {
+        if (query.archived && feature.archived !== query.archived) {
+          matched = false;
+        }
+
+        if (!query.archived && feature.archived === true) {
+          matched = false;
+        }
+      }
+
+      return matched;
+    })
+    .sort((a, b) => a.key.localeCompare(b.key));
+
+  return features;
+}
+
+export function getAttributesByQuery(query: Query, data: SearchIndex) {
+  const attributes = data.entities.attributes
+    .filter((a) => {
+      let matched = true;
+
+      if (
+        query.keyword.length > 0 &&
+        a.key.toLowerCase().indexOf(query.keyword.toLowerCase()) === -1
+      ) {
+        matched = false;
+      }
+
+      if (typeof query.archived === "boolean") {
+        if (query.archived && a.archived !== query.archived) {
+          matched = false;
+        }
+
+        if (!query.archived && a.archived === true) {
+          matched = false;
+        }
+      }
+
+      if (typeof query.capture === "boolean") {
+        if (query.capture && a.capture !== query.capture) {
+          matched = false;
+        }
+
+        if (!query.capture && a.capture === true) {
+          matched = false;
+        }
+      }
+
+      return matched;
+    })
+    .sort((a, b) => a.key.localeCompare(b.key));
+
+  return attributes;
+}
+
+export function getSegmentsByQuery(query: Query, data: SearchIndex) {
+  const segments = data.entities.segments
+    .filter((a) => {
+      let matched = true;
+
+      if (
+        query.keyword.length > 0 &&
+        a.key.toLowerCase().indexOf(query.keyword.toLowerCase()) === -1
+      ) {
+        matched = false;
+      }
+
+      if (typeof query.archived === "boolean") {
+        if (query.archived && a.archived !== query.archived) {
+          matched = false;
+        }
+
+        if (!query.archived && a.archived === true) {
+          matched = false;
+        }
+      }
+
+      return matched;
+    })
+    .sort((a, b) => a.key.localeCompare(b.key));
+
+  return segments;
+}

package/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.html", "./src/**/*.tsx"],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
+};

package/tsconfig.cjs.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.cjs.json",
+  "compilerOptions": {
+    "outDir": "./lib"
+  },
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
+}

package/webpack.config.js

@@ -0,0 +1,14 @@
+const path = require("path");
+
+const getWebpackConfig = require("../../tools/getWebpackConfig");
+
+const wepbackConfig = getWebpackConfig({
+  entryFilePath: path.join(__dirname, "src", "index.tsx"),
+  entryKey: "index",
+  outputDirectoryPath: path.join(__dirname, "dist"),
+  outputLibrary: "FeaturevisorSite",
+  tsConfigFilePath: path.join(__dirname, "tsconfig.cjs.json"),
+  enableCssModules: true,
+});
+
+module.exports = wepbackConfig;