@featurevisor/site 0.55.0 → 0.56.0

package/lib/components/SearchInput.d.ts

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

package/lib/hooks/useSearch.d.ts

@@ -0,0 +1,16 @@
+export declare function useSearch(): {
+    readonly searchQuery: string;
+    readonly features: (import("@featurevisor/types").ParsedFeature & {
+        lastModified?: import("@featurevisor/types").LastModified;
+    })[];
+    readonly segments: (import("@featurevisor/types").Segment & {
+        lastModified?: import("@featurevisor/types").LastModified;
+        usedInFeatures: string[];
+    })[];
+    readonly attributes: (import("@featurevisor/types").Attribute & {
+        lastModified?: import("@featurevisor/types").LastModified;
+        usedInSegments: string[];
+        usedInFeatures: string[];
+    })[];
+    readonly setSearchQuery: (value: any) => void;
+};

package/lib/hooks/useSearchIndex.d.ts

@@ -0,0 +1,4 @@
+import { SearchIndex } from "@featurevisor/types";
+export declare function useSearchIndex(): {
+    data: SearchIndex;
+};

package/lib/index.d.ts

@@ -1 +1 @@
-export {};
+import "./index.css";

package/lib/utils/index.d.ts

@@ -6,7 +6,7 @@ export interface Query {
     archived?: boolean;
     capture?: boolean;
 }
-export declare function getQueryFromString(q: string): Query;
+export declare function parseSearchQuery(queryString: 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 & {

package/mock/search-index.json

@@ -0,0 +1,278 @@
+{
+  "entities": {
+    "attributes": [
+      {
+        "archived": false,
+        "description": "country code in lower case (two lettered)",
+        "type": "string",
+        "key": "country",
+        "usedInFeatures": [],
+        "usedInSegments": ["germany", "netherlands", "switzerland"]
+      },
+      {
+        "archived": false,
+        "description": "device type",
+        "type": "string",
+        "key": "device",
+        "usedInFeatures": [],
+        "usedInSegments": ["mobile"]
+      },
+      {
+        "archived": false,
+        "description": "is the user already logged in?",
+        "type": "boolean",
+        "key": "loggedIn",
+        "usedInFeatures": [],
+        "usedInSegments": []
+      },
+      {
+        "archived": false,
+        "description": "User ID",
+        "type": "string",
+        "capture": true,
+        "key": "userId",
+        "usedInFeatures": ["foo"],
+        "usedInSegments": []
+      }
+    ],
+    "segments": [
+      {
+        "archived": false,
+        "description": "users from Germany",
+        "conditions": { "and": [{ "attribute": "country", "operator": "equals", "value": "de" }] },
+        "key": "germany",
+        "usedInFeatures": ["bar", "foo", "sidebar"]
+      },
+      {
+        "archived": false,
+        "description": "mobile users",
+        "conditions": {
+          "and": [{ "attribute": "device", "operator": "equals", "value": "mobile" }]
+        },
+        "key": "mobile",
+        "usedInFeatures": ["foo"]
+      },
+      {
+        "archived": false,
+        "description": "The Netherlands",
+        "conditions": [{ "attribute": "country", "operator": "equals", "value": "nl" }],
+        "key": "netherlands",
+        "usedInFeatures": ["sidebar"]
+      },
+      {
+        "archived": false,
+        "description": "users from Switzerland",
+        "conditions": { "and": [{ "attribute": "country", "operator": "equals", "value": "ch" }] },
+        "key": "switzerland",
+        "usedInFeatures": ["bar", "foo"]
+      }
+    ],
+    "features": [
+      {
+        "tags": ["all"],
+        "bucketBy": "userId",
+        "defaultVariation": "control",
+        "variablesSchema": [
+          { "key": "color", "type": "string", "defaultValue": "red" },
+          {
+            "key": "hero",
+            "type": "object",
+            "defaultValue": {
+              "title": "Hero Title",
+              "subtitle": "Hero Subtitle",
+              "alignment": "center"
+            }
+          }
+        ],
+        "variations": [
+          { "type": "string", "value": "control", "weight": 33 },
+          {
+            "type": "string",
+            "value": "b",
+            "weight": 33,
+            "variables": [
+              {
+                "key": "hero",
+                "value": {
+                  "title": "Hero Title for B",
+                  "subtitle": "Hero Subtitle for B",
+                  "alignment": "center for B"
+                },
+                "overrides": [
+                  {
+                    "segments": { "or": ["germany", "switzerland"] },
+                    "value": {
+                      "title": "Hero Title for B in DE or CH",
+                      "subtitle": "Hero Subtitle for B in DE of CH",
+                      "alignment": "center for B in DE or CH"
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          { "type": "string", "value": "c", "weight": 34 }
+        ],
+        "environments": {
+          "staging": { "rules": [{ "key": "1", "segments": "*", "percentage": 100 }] },
+          "production": { "rules": [{ "key": "1", "segments": "*", "percentage": 100 }] }
+        },
+        "key": "bar"
+      },
+      {
+        "description": "Classic on/off switch",
+        "tags": ["all"],
+        "defaultVariation": false,
+        "bucketBy": "userId",
+        "variations": [
+          { "description": "Enabled for all", "type": "boolean", "value": true, "weight": 100 },
+          { "description": "Disabled for all", "type": "boolean", "value": false, "weight": 0 }
+        ],
+        "environments": {
+          "staging": { "rules": [{ "key": "1", "segments": "*", "percentage": 100 }] },
+          "production": { "rules": [{ "key": "1", "segments": "*", "percentage": 80 }] }
+        },
+        "key": "baz"
+      },
+      {
+        "archived": false,
+        "description": "blah",
+        "tags": ["all", "signIn", "signUp"],
+        "bucketBy": "userId",
+        "defaultVariation": false,
+        "variablesSchema": [
+          { "key": "bar", "type": "string", "defaultValue": "" },
+          { "key": "baz", "type": "string", "defaultValue": "" }
+        ],
+        "variations": [
+          { "type": "boolean", "value": false, "weight": 50 },
+          {
+            "type": "boolean",
+            "value": true,
+            "weight": 50,
+            "variables": [
+              {
+                "key": "bar",
+                "value": "bar_here",
+                "overrides": [
+                  { "segments": { "or": ["germany", "switzerland"] }, "value": "bar for DE or CH" }
+                ]
+              },
+              { "key": "baz", "value": "baz_here" }
+            ]
+          }
+        ],
+        "environments": {
+          "staging": {
+            "expose": true,
+            "rules": [{ "key": "1", "segments": "*", "percentage": 100 }]
+          },
+          "production": {
+            "expose": true,
+            "rules": [
+              {
+                "key": "1",
+                "segments": { "and": ["mobile", { "or": ["germany", "switzerland"] }] },
+                "percentage": 80
+              },
+              { "key": "2", "segments": "*", "percentage": 50 }
+            ],
+            "force": [
+              {
+                "conditions": {
+                  "and": [
+                    { "attribute": "userId", "operator": "equals", "value": "123" },
+                    { "attribute": "deviceId", "operator": "equals", "value": "234" }
+                  ]
+                },
+                "variation": true,
+                "variables": { "bar": "yoooooo" }
+              }
+            ]
+          }
+        },
+        "key": "foo"
+      },
+      {
+        "description": "Variations with weights having decimal places",
+        "tags": ["all"],
+        "defaultVariation": "control",
+        "bucketBy": "userId",
+        "variablesSchema": [
+          { "type": "json", "key": "fooConfig", "defaultValue": "{\"foo\": \"bar\"}" }
+        ],
+        "variations": [
+          { "type": "string", "value": "control", "weight": 33.34 },
+          {
+            "type": "string",
+            "value": "b",
+            "weight": 33.33,
+            "variables": [{ "key": "fooConfig", "value": "{\"foo\": \"bar b\"}" }]
+          },
+          { "type": "string", "value": "c", "weight": 33.33 }
+        ],
+        "environments": {
+          "staging": { "rules": [{ "key": "1", "segments": "*", "percentage": 100 }] },
+          "production": { "rules": [{ "key": "1", "segments": "*", "percentage": 100 }] }
+        },
+        "key": "qux"
+      },
+      {
+        "description": "Show sidebar or not",
+        "tags": ["all"],
+        "bucketBy": "userId",
+        "defaultVariation": false,
+        "variablesSchema": [
+          { "key": "position", "type": "string", "defaultValue": "left" },
+          { "key": "color", "type": "string", "defaultValue": "red" },
+          { "key": "sections", "type": "array", "defaultValue": [] },
+          { "key": "title", "type": "string", "defaultValue": "Sidebar Title" }
+        ],
+        "variations": [
+          { "type": "boolean", "value": false, "weight": 10 },
+          {
+            "type": "boolean",
+            "value": true,
+            "weight": 90,
+            "variables": [
+              { "key": "position", "value": "right" },
+              {
+                "key": "color",
+                "value": "red",
+                "overrides": [
+                  { "segments": "germany", "value": "yellow" },
+                  { "segments": "japan", "value": "white" }
+                ]
+              },
+              {
+                "key": "sections",
+                "value": ["home", "about", "contact"],
+                "overrides": [
+                  { "segments": "germany", "value": ["home", "about", "contact", "imprint"] },
+                  {
+                    "segments": "netherlands",
+                    "value": ["home", "about", "contact", "bitterballen"]
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        "environments": {
+          "staging": { "rules": [{ "key": "1", "segments": "*", "percentage": 100 }] },
+          "production": {
+            "rules": [
+              {
+                "key": "1",
+                "segments": "*",
+                "percentage": 100,
+                "variables": { "title": "Sidebar Title for production" }
+              }
+            ]
+          }
+        },
+        "key": "sidebar"
+      }
+    ]
+  }
+}

package/package.json

@@ -1,14 +1,12 @@
 {
   "name": "@featurevisor/site",
-  "version": "0.55.0",
+  "version": "0.56.0",
   "description": "Static site for Featurevisor",
   "main": "dist",
   "scripts": {
     "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",
+    "build": "webpack --mode production --config ./webpack.prod.js",
+    "dev": "webpack serve --mode development --config ./webpack.dev.js",
     "test": "echo 'Nothing to test in types package'",
     "format": "prettier . --check --cache --loglevel=warn",
     "lint": "eslint . --cache",
@@ -50,16 +48,22 @@
     "@tailwindcss/typography": "^0.5.9",
     "@types/react": "^18.0.29",
     "@types/react-dom": "^18.0.11",
+    "autoprefixer": "^10.4.16",
+    "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.3",
+    "html-webpack-plugin": "^5.5.3",
+    "postcss": "^8.4.31",
+    "postcss-loader": "^7.3.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"
+    "tailwindcss": "^3.3.3",
+    "webpack-merge": "^5.10.0"
   },
   "dependencies": {
-    "@featurevisor/types": "^0.55.0"
+    "@featurevisor/types": "^0.56.0"
   },
-  "gitHead": "b736fb93a9e8bdf76f84a71c482182ab42505b63"
+  "gitHead": "cf164942d23745dbf52e8b68abbe7b153891ba11"
 }

package/postcss.config.js

@@ -0,0 +1,6 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+
+module.exports = {
+  plugins: [tailwindcss("./tailwind.config.js"), autoprefixer],
+};

package/public/index.html

@@ -1,15 +1,12 @@
-<!doctype html>
+<!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/HistoryTimeline.tsx

@@ -4,7 +4,7 @@ import { UserCircleIcon } from "@heroicons/react/20/solid";
 
 import { Alert } from "./Alert";
 import { PrettyDate } from "./PrettyDate";
-import { useSearchIndex } from "../hooks/searchIndexHook";
+import { useSearchIndex } from "../hooks/useSearchIndex";
 
 const entriesPerPage = 50;
 const initialMaxEntitiesCount = 10;

package/src/components/ListAttributes.tsx

@@ -1,30 +1,22 @@
 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";
+import { useSearch } from "../hooks/useSearch";
 
 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);
+  const { attributes } = useSearch();
 
   return (
     <PageContent>
       <PageTitle>Attributes</PageTitle>
 
-      <SearchInput value={q} onChange={(e: any) => setQ(e.target.value)} />
+      <SearchInput />
 
       {attributes.length === 0 && <Alert type="warning">No results found</Alert>}
 

package/src/components/ListFeatures.tsx

@@ -3,9 +3,6 @@ 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";
@@ -13,21 +10,16 @@ import { SearchInput } from "./SearchInput";
 import { PageTitle } from "./PageTitle";
 import { PageContent } from "./PageContent";
 import { LastModified } from "./LastModified";
+import { useSearch } from "../hooks/useSearch";
 
 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);
+  const { features } = useSearch();
 
   return (
     <PageContent>
       <PageTitle>Features</PageTitle>
 
-      <SearchInput value={q} onChange={(e: any) => setQ(e.target.value)} />
+      <SearchInput />
 
       {features.length === 0 && <Alert type="warning">No results found</Alert>}
 

package/src/components/ListSegments.tsx

@@ -1,30 +1,22 @@
 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";
+import { useSearch } from "../hooks/useSearch";
 
 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);
+  const { segments } = useSearch();
 
   return (
     <PageContent>
       <PageTitle>Segments</PageTitle>
 
-      <SearchInput value={q} onChange={(e: any) => setQ(e.target.value)} />
+      <SearchInput />
 
       {segments.length === 0 && <Alert type="warning">No results found</Alert>}
 

package/src/components/SearchInput.tsx

@@ -1,11 +1,9 @@
 import * as React from "react";
+import { useSearch } from "../hooks/useSearch";
 
-interface SearchInputProps {
-  value: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
+export function SearchInput() {
+  const { searchQuery, setSearchQuery } = useSearch();
 
-export function SearchInput(props: SearchInputProps) {
   return (
     <div className="relative px-6 pt-3.5">
       <div className="pointer-events-none absolute">
@@ -23,11 +21,11 @@ export function SearchInput(props: SearchInputProps) {
       </div>
       <input
         type="text"
-        value={props.value}
-        onChange={(e) => props.onChange(e)}
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
         placeholder="Type to search..."
         autoComplete="off"
-        className="mb-4 mt-2 w-full rounded-full border-slate-300 indent-8 text-xl text-gray-700 placeholder:text-gray-400"
+        className="mb-4 mt-2 p-2 w-full rounded-full border border-slate-300 indent-8 text-xl text-gray-700 placeholder:text-gray-400"
       />
     </div>
   );

package/src/components/ShowAttribute.tsx

@@ -5,7 +5,7 @@ import { PageContent } from "./PageContent";
 import { PageTitle } from "./PageTitle";
 import { Tabs } from "./Tabs";
 import { EditLink } from "./EditLink";
-import { useSearchIndex } from "../hooks/searchIndexHook";
+import { useSearchIndex } from "../hooks/useSearchIndex";
 import { Markdown } from "./Markdown";
 import { HistoryTimeline } from "./HistoryTimeline";
 

package/src/components/ShowFeature.tsx

@@ -6,7 +6,7 @@ import { PageTitle } from "./PageTitle";
 import { Tabs } from "./Tabs";
 import { HistoryTimeline } from "./HistoryTimeline";
 import { Tag } from "./Tag";
-import { useSearchIndex } from "../hooks/searchIndexHook";
+import { useSearchIndex } from "../hooks/useSearchIndex";
 import { isEnabledInEnvironment } from "../utils";
 import { ExpandRuleSegments } from "./ExpandRuleSegments";
 import { ExpandConditions } from "./ExpandConditions";

package/src/components/ShowSegment.tsx

@@ -7,7 +7,7 @@ import { Tabs } from "./Tabs";
 import { HistoryTimeline } from "./HistoryTimeline";
 import { ExpandConditions } from "./ExpandConditions";
 import { EditLink } from "./EditLink";
-import { useSearchIndex } from "../hooks/searchIndexHook";
+import { useSearchIndex } from "../hooks/useSearchIndex";
 import { Markdown } from "./Markdown";
 
 export function DisplaySegmentOverview() {

package/src/hooks/useSearch.ts

@@ -0,0 +1,41 @@
+import { useCallback } from "react";
+import { useSearchParams } from "react-router-dom";
+
+import { useSearchIndex } from "./useSearchIndex";
+import {
+  parseSearchQuery,
+  getFeaturesByQuery,
+  getAttributesByQuery,
+  getSegmentsByQuery,
+} from "../utils";
+
+const SEARCH_QUERY_KEY = "q";
+
+export function useSearch() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const searchQuery = String(searchParams.get(SEARCH_QUERY_KEY) || "");
+
+  const { data: searchData } = useSearchIndex();
+  const parsedQuery = parseSearchQuery(searchQuery);
+  const features = getFeaturesByQuery(parsedQuery, searchData);
+  const segments = getSegmentsByQuery(parsedQuery, searchData);
+  const attributes = getAttributesByQuery(parsedQuery, searchData);
+
+  const setSearchQuery = useCallback((value) => {
+    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,
+    features,
+    segments,
+    attributes,
+    setSearchQuery,
+  } as const;
+}

package/src/hooks/useSearchIndex.ts

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { SearchIndex } from "@featurevisor/types";
+
+import { SearchIndexContext } from "../contexts/SearchIndexContext";
+
+export function useSearchIndex() {
+  const { data } = useContext(SearchIndexContext);
+
+  return {
+    data: data as SearchIndex,
+  };
+}

package/src/index.tsx

@@ -1,12 +1,14 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { HashRouter } from "react-router-dom";
+import "./index.css";
 
 import { App } from "./components/App";
 
-ReactDOM.render(
+const container = document.getElementById("root");
+const root = createRoot(container!);
+root.render(
   <HashRouter>
     <App />
   </HashRouter>,
-  document.getElementById("root"),
 );

package/src/utils/index.ts

@@ -8,7 +8,7 @@ export interface Query {
   capture?: boolean;
 }
 
-export function getQueryFromString(q: string) {
+export function parseSearchQuery(queryString: string) {
   const query: Query = {
     keyword: "",
     tags: [],
@@ -17,7 +17,7 @@ export function getQueryFromString(q: string) {
     capture: undefined,
   };
 
-  const parts = q.split(" ");
+  const parts = queryString.split(" ");
 
   for (const part of parts) {
     if (part.startsWith("tag:")) {