@featurevisor/site 0.55.0 → 0.55.1

package/lib/index.d.ts

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

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.55.1",
   "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"
   },
-  "gitHead": "b736fb93a9e8bdf76f84a71c482182ab42505b63"
+  "gitHead": "8d1f0d66978e079b695537e5575a2f2773614d60"
 }

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/SearchInput.tsx

@@ -27,7 +27,7 @@ export function SearchInput(props: SearchInputProps) {
         onChange={(e) => props.onChange(e)}
         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/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/tailwind.config.js

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

package/tsconfig.cjs.json

@@ -3,5 +3,5 @@
   "compilerOptions": {
     "outDir": "./lib"
   },
-  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
+  "include": ["./src/**/*.ts", "./src/**/*.tsx", "./types"]
 }

package/types/assets.d.ts

@@ -0,0 +1,27 @@
+declare module "*.png" {
+  const value: any;
+  export = value;
+}
+declare module "*.svg" {
+  import type { FunctionComponent, SVGProps } from "react";
+
+  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  const src: string;
+  export default src;
+}
+declare module "*.jpg" {
+  const value: any;
+  export = value;
+}
+declare module "*.jpeg" {
+  const value: any;
+  export = value;
+}
+declare module "*.gif" {
+  const value: any;
+  export = value;
+}
+declare module "*.bmp" {
+  const value: any;
+  export = value;
+}

package/types/styles.d.ts

@@ -0,0 +1,4 @@
+declare module "*.css" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

package/{webpack.config.js → webpack.common.js}

@@ -1,14 +1,22 @@
 const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 const getWebpackConfig = require("../../tools/getWebpackConfig");
 
-const wepbackConfig = getWebpackConfig({
+const webpackConfig = 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,
+  enableTailwind: true,
+  enableAssets: true,
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, "public", "index.html"),
+    }),
+  ],
 });
 
-module.exports = wepbackConfig;
+module.exports = webpackConfig;

package/webpack.dev.js

@@ -0,0 +1,27 @@
+const path = require("path");
+const { merge } = require("webpack-merge");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+const webpackCommon = require("./webpack.common");
+
+const webpackConfig = merge(webpackCommon, {
+  devtool: "eval-source-map",
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, "public", "index.html"),
+    }),
+  ],
+  devServer: {
+    static: [
+      {
+        directory: path.join(__dirname, "public"),
+      },
+      {
+        directory: path.join(__dirname, "mock"),
+      },
+    ],
+    hot: true,
+  },
+});
+
+module.exports = webpackConfig;

package/webpack.prod.js

@@ -0,0 +1,20 @@
+const { merge } = require("webpack-merge");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const webpackCommon = require("./webpack.common");
+
+const webpackConfig = merge(webpackCommon, {
+  plugins: [
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: "public",
+          globOptions: {
+            ignore: ["**/index.html"],
+          },
+        },
+      ],
+    }),
+  ],
+});
+
+module.exports = webpackConfig;