@featurevisor/site 0.8.0

package/lib/components/Alert.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+interface AlertProps {
+    type: "success" | "warning";
+    children: React.ReactNode;
+}
+export declare function Alert(props: AlertProps): JSX.Element;
+export {};

package/lib/components/App.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function App(): JSX.Element;

package/lib/components/EditLink.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function EditLink(props: any): JSX.Element;

package/lib/components/EnvironmentDot.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface EnvironmentDotProps {
+    feature: any;
+    className?: string;
+    animate?: boolean;
+}
+export declare function EnvironmentDot(props: EnvironmentDotProps): JSX.Element;
+export {};

package/lib/components/ExpandConditions.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface ExpandConditionsProps {
+    conditions: any;
+}
+export declare function ExpandConditions(props: ExpandConditionsProps): JSX.Element;
+export {};

package/lib/components/ExpandRuleSegments.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface ExpandRuleSegmentsProps {
+    segments: any;
+}
+export declare function ExpandRuleSegments(props: ExpandRuleSegmentsProps): JSX.Element;
+export {};

package/lib/components/Footer.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function Footer(): JSX.Element;

package/lib/components/Header.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function Header(): JSX.Element;

package/lib/components/HistoryTimeline.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface HistoryTimelineProps {
+    className?: string;
+    filter?: (entry: any) => boolean;
+    entityType?: string;
+    entityKey?: string;
+    showTime?: boolean;
+}
+export declare function HistoryTimeline(props: HistoryTimelineProps): JSX.Element;
+export {};

package/lib/components/LastModified.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function LastModified(props: any): JSX.Element;

package/lib/components/ListAttributes.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function ListAttributes(): JSX.Element;

package/lib/components/ListFeatures.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function ListFeatures(): JSX.Element;

package/lib/components/ListHistory.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function ListHistory(): JSX.Element;

package/lib/components/ListSegments.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function ListSegments(): JSX.Element;

package/lib/components/Markdown.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function Markdown(props: any): JSX.Element;

package/lib/components/PageContent.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+export declare function PageContent(props: {
+    children: React.ReactNode;
+}): JSX.Element;

package/lib/components/PageTitle.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export declare function PageTitle(props: {
+    children: React.ReactNode;
+    className?: string;
+}): JSX.Element;

package/lib/components/PrettyDate.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface PrettyDateProps {
+    date: string;
+    showTime?: boolean;
+}
+export declare function PrettyDate(props: PrettyDateProps): JSX.Element;
+export {};

package/lib/components/SearchInput.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+interface SearchInputProps {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare function SearchInput(props: SearchInputProps): JSX.Element;
+export {};

package/lib/components/ShowAttribute.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function DisplayAttributeOverview(): JSX.Element;
+export declare function DisplayAttributeUsage(): JSX.Element;
+export declare function DisplayAttributeHistory(): JSX.Element;
+export declare function ShowAttribute(props: any): JSX.Element;

package/lib/components/ShowFeature.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare function DisplayFeatureOverview(): JSX.Element;
+export declare function DisplayFeatureForceTable(): JSX.Element;
+export declare function DisplayFeatureForce(): JSX.Element;
+export declare function DisplayFeatureRulesTable(): JSX.Element;
+export declare function DisplayFeatureRules(): JSX.Element;
+export declare function DisplayFeatureVariations(): JSX.Element;
+export declare function DisplayFeatureVariablesSchema(): JSX.Element;
+export declare function DisplayFeatureHistory(): JSX.Element;
+export declare function ShowFeature(props: any): JSX.Element;

package/lib/components/ShowSegment.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function DisplaySegmentOverview(): JSX.Element;
+export declare function DisplaySegmentUsage(): JSX.Element;
+export declare function DisplaySegmentHistory(): JSX.Element;
+export declare function ShowSegment(props: any): JSX.Element;

package/lib/components/Tabs.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface Tab {
+    title: string;
+    to: string;
+}
+interface TabsProps {
+    tabs: Tab[];
+}
+export declare function Tabs(props: TabsProps): JSX.Element;
+export {};

package/lib/components/Tag.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface TagProps {
+    tag: string;
+}
+export declare function Tag(props: TagProps): JSX.Element;
+export {};

package/lib/contexts/SearchIndexContext.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { SearchIndex } from "@featurevisor/types";
+export interface SearchIndexProps {
+    isLoaded: boolean;
+    data?: SearchIndex;
+}
+export declare const SearchIndexContext: React.Context<SearchIndexProps>;

package/lib/hooks/searchIndexHook.d.ts

@@ -0,0 +1 @@
+export declare function useSearchIndex(): import("../contexts/SearchIndexContext").SearchIndexProps;

package/lib/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/utils/index.d.ts

@@ -0,0 +1,23 @@
+import { SearchIndex } from "@featurevisor/types";
+export interface Query {
+    keyword: string;
+    tags: string[];
+    environments: string[];
+    archived?: boolean;
+    capture?: boolean;
+}
+export declare function getQueryFromString(q: string): Query;
+export declare function isEnabledInEnvironment(feature: any, environment: string): boolean;
+export declare function isEnabledInAnyEnvironment(feature: any): boolean;
+export declare function getFeaturesByQuery(query: Query, data: SearchIndex): (import("@featurevisor/types").ParsedFeature & {
+    lastModified?: import("@featurevisor/types").LastModified;
+})[];
+export declare function getAttributesByQuery(query: Query, data: SearchIndex): (import("@featurevisor/types").Attribute & {
+    lastModified?: import("@featurevisor/types").LastModified;
+    usedInSegments: string[];
+    usedInFeatures: string[];
+})[];
+export declare function getSegmentsByQuery(query: Query, data: SearchIndex): (import("@featurevisor/types").Segment & {
+    lastModified?: import("@featurevisor/types").LastModified;
+    usedInFeatures: string[];
+})[];

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@featurevisor/site",
+  "version": "0.8.0",
+  "description": "Static site for Featurevisor",
+  "main": "dist",
+  "scripts": {
+    "lint": "echo 'not linting in this package yet'",
+    "transpile": "echo 'Nothing to transpile in this package'",
+    "dist:js": "webpack --config ./webpack.config.js",
+    "dist:css": "tailwindcss -i ./src/index.css -o ./dist/index.css",
+    "dist": "npm run dist:js && npm run dist:css",
+    "build": "npm run dist",
+    "test": "echo 'Nothing to test in types package'"
+  },
+  "author": {
+    "name": "Fahad Heylaal",
+    "url": "https://fahad19.com"
+  },
+  "homepage": "https://featurevisor.com",
+  "keywords": [
+    "featurevisor",
+    "feature",
+    "features",
+    "flags",
+    "feature flags",
+    "feature toggles",
+    "feature management",
+    "experimentation",
+    "experiment",
+    "experiments"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fahad19/featurevisor.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "bugs": {
+    "url": "https://github.com/fahad19/featurevisor/issues"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@heroicons/react": "^2.0.17",
+    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/typography": "^0.5.9",
+    "@types/react": "^18.0.29",
+    "@types/react-dom": "^18.0.11",
+    "css-loader": "^6.7.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-markdown": "^8.0.6",
+    "react-router-dom": "^6.10.0",
+    "style-loader": "^3.3.2",
+    "tailwindcss": "^3.3.0"
+  },
+  "dependencies": {
+    "@featurevisor/types": "^0.8.0"
+  },
+  "gitHead": "fe803f91b34ee7aa98a384769ba1fc181fb9c64e"
+}

package/public/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Featurevisor Status</title>
+    <link rel="stylesheet" href="./index.css" />
+    <link rel="icon" type="image/png" href="./favicon-128.png" />
+  </head>
+
+  <body>
+    <div id="root"></div>
+
+    <script src="./index.js"></script>
+  </body>
+</html>

package/src/components/Alert.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+interface AlertProps {
+  type: "success" | "warning";
+  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>
+    );
+  }
+
+  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/components/App.tsx

@@ -0,0 +1,129 @@
+import * as React from "react";
+
+import { Routes, Route, redirect } from "react-router-dom";
+
+import { Header } from "./Header";
+import { Footer } from "./Footer";
+import { Alert } from "./Alert";
+
+import { ListFeatures } from "./ListFeatures";
+import { ListSegments } from "./ListSegments";
+import { ListAttributes } from "./ListAttributes";
+import { ListHistory } from "./ListHistory";
+
+import {
+  DisplayAttributeOverview,
+  DisplayAttributeUsage,
+  DisplayAttributeHistory,
+  ShowAttribute,
+} from "./ShowAttribute";
+import {
+  DisplaySegmentOverview,
+  DisplaySegmentUsage,
+  DisplaySegmentHistory,
+  ShowSegment,
+} from "./ShowSegment";
+import {
+  DisplayFeatureOverview,
+  DisplayFeatureVariations,
+  DisplayFeatureVariablesSchema,
+  DisplayFeatureRules,
+  DisplayFeatureRulesTable,
+  DisplayFeatureForce,
+  DisplayFeatureForceTable,
+  DisplayFeatureHistory,
+  ShowFeature,
+} from "./ShowFeature";
+
+import { SearchIndexContext } from "../contexts/SearchIndexContext";
+import { SearchIndex } from "@featurevisor/types";
+
+export function App() {
+  const [fetchedSearchIndex, setSearchIndex] = React.useState(undefined);
+
+  React.useEffect(() => {
+    fetch("/search-index.json")
+      .then((response) => response.json())
+      .then((data) => {
+        setSearchIndex(data);
+      });
+  }, []);
+
+  const environmentKeys = fetchedSearchIndex
+    ? Object.keys((fetchedSearchIndex as SearchIndex).entities.features[0].environments).sort()
+    : [];
+
+  return (
+    <div>
+      <Header />
+
+      <main>
+        {!fetchedSearchIndex && <Alert type="warning">Loading...</Alert>}
+
+        {fetchedSearchIndex && (
+          <SearchIndexContext.Provider value={{ isLoaded: true, data: fetchedSearchIndex }}>
+            <Routes>
+              {/* @TODO: try redirecting to /features */}
+              <Route path="/" element={<ListFeatures />} />
+
+              <Route path="features">
+                <Route index element={<ListFeatures />} />
+
+                <Route path=":featureKey" element={<ShowFeature />}>
+                  <Route index element={<DisplayFeatureOverview />} />
+                  <Route path="variations" element={<DisplayFeatureVariations />} />
+                  <Route path="variables" element={<DisplayFeatureVariablesSchema />} />
+                  <Route path="rules" element={<DisplayFeatureRules />}>
+                    <Route path=":environmentKey" element={<DisplayFeatureRulesTable />} />
+                    <Route
+                      path="*"
+                      loader={({ params }) =>
+                        /* @TODO: fix redirection */
+                        redirect(`/features/${params.featureKey}/rules/${environmentKeys[0]}`)
+                      }
+                    />
+                  </Route>
+                  <Route path="force" element={<DisplayFeatureForce />}>
+                    <Route path=":environmentKey" element={<DisplayFeatureForceTable />} />
+                    <Route
+                      path="*"
+                      loader={({ params }) =>
+                        /* @TODO: fix redirection */
+                        redirect(`/features/${params.featureKey}/force/${environmentKeys[0]}`)
+                      }
+                    />
+                  </Route>
+                  <Route path="history" element={<DisplayFeatureHistory />} />
+                </Route>
+              </Route>
+
+              <Route path="segments">
+                <Route index element={<ListSegments />} />
+
+                <Route path=":segmentKey" element={<ShowSegment />}>
+                  <Route index element={<DisplaySegmentOverview />} />
+                  <Route path="usage" element={<DisplaySegmentUsage />} />
+                  <Route path="history" element={<DisplaySegmentHistory />} />
+                </Route>
+              </Route>
+
+              <Route path="attributes">
+                <Route index element={<ListAttributes />} />
+
+                <Route path=":attributeKey" element={<ShowAttribute />}>
+                  <Route index element={<DisplayAttributeOverview />} />
+                  <Route path="usage" element={<DisplayAttributeUsage />} />
+                  <Route path="history" element={<DisplayAttributeHistory />} />
+                </Route>
+              </Route>
+
+              <Route path="history" element={<ListHistory />} />
+            </Routes>
+          </SearchIndexContext.Provider>
+        )}
+      </main>
+
+      <Footer />
+    </div>
+  );
+}

package/src/components/EditLink.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/20/solid";
+
+export function EditLink(props: any) {
+  const { path } = props;
+
+  return (
+    <a
+      href={props.url}
+      target="_blank"
+      className="w-18 h-18 relative top-0.5 float-right inline-block rounded-md bg-slate-100 px-2 py-1 text-lg text-gray-500 hover:bg-slate-200"
+    >
+      <span className="pr-1 text-sm font-normal">Edit</span>{" "}
+      <ArrowTopRightOnSquareIcon className="inline-block h-5 w-5 text-sm text-gray-400" />
+    </a>
+  );
+}

package/src/components/EnvironmentDot.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+
+import { isEnabledInAnyEnvironment, isEnabledInEnvironment } from "../utils";
+
+interface EnvironmentDotProps {
+  feature: any;
+  className?: string;
+  animate?: boolean;
+}
+
+export function EnvironmentDot(props: EnvironmentDotProps) {
+  const enabledInProduction = isEnabledInEnvironment(
+    props.feature,
+    "production"
+  );
+
+  if (enabledInProduction) {
+    return (
+      <div className={props.className || ""}>
+        <span className="relative flex h-3 w-3">
+          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
+
+          <span className="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>
+        </span>
+      </div>
+    );
+  }
+
+  const enabledInOtherEnvironments = isEnabledInAnyEnvironment(props.feature);
+
+  if (enabledInOtherEnvironments) {
+    return (
+      <div className={props.className || ""}>
+        <span className="relative flex h-3 w-3">
+          <span className="relative inline-flex h-3 w-3 rounded-full bg-amber-500"></span>
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={props.className || ""}>
+      <span className="relative flex h-3 w-3">
+        <span className="relative inline-flex h-3 w-3 rounded-full bg-slate-300"></span>
+      </span>
+    </div>
+  );
+}

package/src/components/ExpandConditions.tsx

@@ -0,0 +1,84 @@
+import * as React from "react";
+
+interface ConditionValueProps {
+  value: any;
+}
+
+function ConditionValue(props: ConditionValueProps) {
+  const { value } = props;
+
+  if (typeof value === "string") {
+    return <span className="text-sm">{value}</span>;
+  }
+
+  if (typeof value === "number" || typeof value === "boolean") {
+    return (
+      <code className="rounded bg-gray-100 px-2 py-1 text-sm text-red-400">
+        {JSON.stringify(value)}
+      </code>
+    );
+  }
+
+  return (
+    <pre className="rounded bg-gray-100 px-2 py-1 text-sm text-red-400">
+      <code>{JSON.stringify(value, null, 2)}</code>
+    </pre>
+  );
+}
+
+interface ExpandConditionsProps {
+  conditions: any;
+}
+
+export function ExpandConditions(props: ExpandConditionsProps) {
+  const { conditions } = props;
+
+  if (Array.isArray(conditions)) {
+    return (
+      <ul className="relative list-inside list-disc pl-5">
+        {conditions.map((condition: any, index: number) => {
+          return (
+            <li key={index} className="py-1">
+              {typeof condition.attribute !== "undefined" ? (
+                <>
+                  <a href="#" className="text-sm">
+                    {condition.attribute}
+                  </a>{" "}
+                  <span className="text-sm font-semibold">
+                    {condition.operator}
+                  </span>{" "}
+                  <ConditionValue value={condition.value} />
+                </>
+              ) : (
+                <ExpandConditions conditions={condition} />
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    );
+  }
+
+  if (typeof conditions === "object") {
+    const type = Object.keys(conditions)[0];
+
+    let classes = "bg-green-300 text-green-700";
+
+    if (type === "or") {
+      classes = "bg-yellow-300 text-yellow-700";
+    } else if (type === "not") {
+      classes = "bg-red-300 text-red-700";
+    }
+
+    return (
+      <>
+        <span className={`rounded-full px-2 py-1 text-sm font-bold ${classes}`}>
+          {type}:
+        </span>
+        <ExpandConditions conditions={conditions[type]} />
+      </>
+    );
+  }
+
+  return <span>n/a</span>; // should never happen
+}

package/src/components/ExpandRuleSegments.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+
+interface ExpandRuleSegmentsProps {
+  segments: any;
+}
+
+export function ExpandRuleSegments(props: ExpandRuleSegmentsProps) {
+  const { segments } = props;
+
+  if (segments === "*") {
+    return (
+      <pre>
+        <code className="rounded bg-gray-100 px-2 py-1 text-red-400">*</code>{" "}
+        (everyone)
+      </pre>
+    );
+  }
+
+  if (Array.isArray(segments)) {
+    return (
+      <ul className="relative list-inside list-disc pl-5">
+        {segments.map((segment: any, index: number) => {
+          return (
+            <li key={index} className="py-1">
+              {typeof segment === "string" ? (
+                segment
+              ) : (
+                <ExpandRuleSegments segments={segment} />
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    );
+  }
+
+  if (typeof segments === "object") {
+    const type = Object.keys(segments)[0];
+
+    let classes = "bg-green-300 text-green-700";
+
+    if (type === "or") {
+      classes = "bg-yellow-300 text-yellow-700";
+    } else if (type === "not") {
+      classes = "bg-red-300 text-red-700";
+    }
+
+    return (
+      <>
+        <span className={`rounded-full px-2 py-1 text-sm font-bold ${classes}`}>
+          {type}:
+        </span>
+        <ExpandRuleSegments segments={segments[type]} />
+      </>
+    );
+  }
+
+  return <span>n/a</span>; // should never happen
+}