@equinor/cpl-feature-flag-react 0.0.1

package/LICENCE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Equinor ASA
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,9 @@
+[<-- Go back](../../README.md)
+
+# @equinor/cpl-feature-flag-react
+
+## Installation
+
+```sh
+yarn add @equinor/cpl-feature-flag-react
+```

package/dist/index.d.mts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { PropsWithChildren } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type BaseConfig<Key extends string, Env extends string> = Record<Key, Record<Env, boolean>>;
+type inferFeatureFlagKey<T extends BaseConfig<string, string>> = keyof T;
+
+interface Props<Key extends string, Env extends string> {
+    config: BaseConfig<Key, Env>;
+    /**
+     * Where to store feature flag override state. E.g. `localStorage` or `sessionStorage`.
+     *
+     * @default
+     * sessionStorage // implemented in a SSR safe way
+     */
+    storage?: Storage;
+    storageKey: string;
+    environments: Env[];
+    useCurrentEnvironment: () => string | undefined;
+}
+declare function buildFeatureFlagModule<Env extends string, Key extends string>({ config, storage, storageKey, environments, useCurrentEnvironment, }: Props<Key, Env>): {
+    FeatureFlagProvider: ({ children }: PropsWithChildren) => react_jsx_runtime.JSX.Element;
+    useFeatureFlagValue: (featureFlagKey: Key) => boolean;
+    useSetFeatureFlag: (featureFlagKey: Key) => (newValue: boolean) => void;
+    DevPanel: () => react_jsx_runtime.JSX.Element;
+    FeatureFlag: ({ featureFlagKey, showWhen, children, }: PropsWithChildren<{
+        showWhen: "enabled" | "disabled";
+        featureFlagKey: Key;
+    }>) => react.ReactNode;
+};
+
+export { buildFeatureFlagModule, type inferFeatureFlagKey };

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { PropsWithChildren } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type BaseConfig<Key extends string, Env extends string> = Record<Key, Record<Env, boolean>>;
+type inferFeatureFlagKey<T extends BaseConfig<string, string>> = keyof T;
+
+interface Props<Key extends string, Env extends string> {
+    config: BaseConfig<Key, Env>;
+    /**
+     * Where to store feature flag override state. E.g. `localStorage` or `sessionStorage`.
+     *
+     * @default
+     * sessionStorage // implemented in a SSR safe way
+     */
+    storage?: Storage;
+    storageKey: string;
+    environments: Env[];
+    useCurrentEnvironment: () => string | undefined;
+}
+declare function buildFeatureFlagModule<Env extends string, Key extends string>({ config, storage, storageKey, environments, useCurrentEnvironment, }: Props<Key, Env>): {
+    FeatureFlagProvider: ({ children }: PropsWithChildren) => react_jsx_runtime.JSX.Element;
+    useFeatureFlagValue: (featureFlagKey: Key) => boolean;
+    useSetFeatureFlag: (featureFlagKey: Key) => (newValue: boolean) => void;
+    DevPanel: () => react_jsx_runtime.JSX.Element;
+    FeatureFlag: ({ featureFlagKey, showWhen, children, }: PropsWithChildren<{
+        showWhen: "enabled" | "disabled";
+        featureFlagKey: Key;
+    }>) => react.ReactNode;
+};
+
+export { buildFeatureFlagModule, type inferFeatureFlagKey };

package/dist/index.js

@@ -0,0 +1,336 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  buildFeatureFlagModule: () => buildFeatureFlagModule
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/buildFeatureFlagContext.tsx
+var import_react = require("react");
+
+// src/storageUtils.ts
+function getClientStorage(storageType) {
+  if (typeof window === "undefined" || !(window[storageType] instanceof Storage)) {
+    return {
+      clear: () => void 0,
+      getItem: () => null,
+      key: () => null,
+      length: -1,
+      removeItem: () => void 0,
+      setItem: () => void 0
+    };
+  }
+  return window[storageType];
+}
+function removeStorageItemSafe(storage, storageKey) {
+  try {
+    storage.removeItem(storageKey);
+  } catch (error) {
+    console.error(error);
+  }
+}
+function getFeatureFlagConfigFromSessionStorage(storage, storageKey) {
+  const item = storage.getItem(storageKey);
+  if (!item) {
+    return void 0;
+  }
+  try {
+    const parsed = JSON.parse(item);
+    if (!parsed || typeof parsed !== "object") {
+      removeStorageItemSafe(storage, storageKey);
+      throw new Error(`Storage value is not of type object. Got '${parsed}'`);
+    }
+    const result = {};
+    for (const [featureFlagKey, value] of Object.entries(parsed)) {
+      if (typeof featureFlagKey !== "string") {
+        throw new Error(`featureFlagKey must be of type 'string'. Got '${featureFlagKey}'`);
+      }
+      if (typeof value !== "boolean") {
+        throw new Error(`Feature flag value must be a boolean. Got '${value}'`);
+      }
+      result[featureFlagKey] = value;
+    }
+    return result;
+  } catch (e) {
+    removeStorageItemSafe(storage, storageKey);
+    return void 0;
+  }
+}
+function setFeatureFlagValueInSessionStorage(storage, storageKey, featureFlagKey, value) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  const featueFlagConfig = getFeatureFlagConfigFromSessionStorage(storage, storageKey);
+  storage.setItem(storageKey, JSON.stringify(__spreadProps(__spreadValues({}, featueFlagConfig), { [featureFlagKey]: value })));
+}
+
+// src/buildFeatureFlagContext.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function buildFeatureFlagContext(storage, sessionStorageKey, config) {
+  const FeatureFlagContext = (0, import_react.createContext)(config);
+  const useFeatureFlagConfig = () => (0, import_react.useContext)(FeatureFlagContext);
+  const FeatureFlagDispatchContext = (0, import_react.createContext)(() => {
+  });
+  const useFeatureFlagDispatch = () => (0, import_react.useContext)(FeatureFlagDispatchContext);
+  const reducer = buildReducer(storage, sessionStorageKey);
+  const FeatureFlagProvider = ({ children }) => {
+    const [state, dispatch] = (0, import_react.useReducer)(reducer, config);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FeatureFlagContext.Provider, { value: state, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FeatureFlagDispatchContext.Provider, { value: dispatch, children }) });
+  };
+  return {
+    useFeatureFlagConfig,
+    useFeatureFlagDispatch,
+    FeatureFlagProvider
+  };
+}
+function buildReducer(storage, storageKey) {
+  return function reducer(state, action) {
+    switch (action.type) {
+      case "update_feature_flag" /* UPDATE_FEATURE_FLAG */: {
+        setFeatureFlagValueInSessionStorage(
+          storage,
+          storageKey,
+          action.featureFlagKey,
+          action.value
+        );
+        return __spreadProps(__spreadValues({}, state), {
+          [action.featureFlagKey]: __spreadProps(__spreadValues({}, state[action.featureFlagKey]), {
+            [action.env]: action.value
+          })
+        });
+      }
+      default: {
+        return state;
+      }
+    }
+  };
+}
+
+// src/components/buildDevPanel.tsx
+var import_eds_core_react2 = require("@equinor/eds-core-react");
+var import_react3 = require("react");
+var import_styled_components2 = __toESM(require("styled-components"));
+
+// src/components/FeatureFlagItem.tsx
+var import_eds_core_react = require("@equinor/eds-core-react");
+var import_react2 = require("react");
+var import_styled_components = __toESM(require("styled-components"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function FeatureFlagItem({
+  featureFlagKey,
+  useFeatureFlagValue,
+  useSetFeatureFlag
+}) {
+  const value = useFeatureFlagValue(featureFlagKey);
+  const setValue = useSetFeatureFlag(featureFlagKey);
+  const handleChange = (0, import_react2.useCallback)(
+    (e) => {
+      setValue(e.target.checked);
+    },
+    [setValue]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyledSwitch, { size: "small", checked: value, onChange: handleChange, label: featureFlagKey });
+}
+var StyledSwitch = (0, import_styled_components.default)(import_eds_core_react.Switch)`
+  gap: 4px;
+`;
+
+// src/components/buildDevPanel.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function DevPanelPure({
+  useFeatureFlagConfig,
+  useCurrentEnvironment,
+  useFeatureFlagValue,
+  useSetFeatureFlag
+}) {
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const handleToggle = (0, import_react3.useCallback)(() => {
+    setIsOpen((old) => !old);
+  }, []);
+  const handleClose = (0, import_react3.useCallback)(() => {
+    setIsOpen(false);
+  }, []);
+  const buttonRef = (0, import_react3.useRef)(null);
+  const featureFlagConfig = useFeatureFlagConfig();
+  const featureFlagKeys = (0, import_react3.useMemo)(() => {
+    return Object.keys(featureFlagConfig);
+  }, [featureFlagConfig]);
+  const currentEnvironment = useCurrentEnvironment();
+  if (!currentEnvironment || currentEnvironment !== "dev") {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_eds_core_react2.EdsProvider, { density: "compact", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FixedWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_eds_core_react2.Button,
+      {
+        "aria-haspopup": true,
+        color: "secondary",
+        "aria-expanded": isOpen,
+        ref: buttonRef,
+        onClick: handleToggle,
+        children: "DEV PANEL"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_eds_core_react2.Popover, { open: isOpen, anchorEl: buttonRef.current, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(StyledPopoverContent, { children: [
+      featureFlagKeys.map((featureFlagKey) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        FeatureFlagItem,
+        {
+          featureFlagKey,
+          useFeatureFlagValue,
+          useSetFeatureFlag
+        },
+        `feature-flag-item-${featureFlagKey}`
+      )),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_eds_core_react2.Button,
+        {
+          variant: "ghost",
+          color: "danger",
+          onClick: () => {
+            localStorage.clear();
+            sessionStorage.clear();
+            window.location.reload();
+          },
+          children: "Delete cache and reload"
+        }
+      )
+    ] }) })
+  ] }) });
+}
+var StyledPopoverContent = (0, import_styled_components2.default)(import_eds_core_react2.Popover.Content)`
+  display: flex;
+  flex-direction: column;
+`;
+var FixedWrapper = import_styled_components2.default.div`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  padding: 8px;
+  width: 100%;
+  z-index: 1;
+
+  display: flex;
+  justify-content: center;
+`;
+
+// src/utils.ts
+function isValidEnvironment(validEnvironments, environmentToValidate) {
+  return typeof environmentToValidate === "string" && validEnvironments.includes(environmentToValidate);
+}
+
+// src/buildFeatureFlagModule.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function buildFeatureFlagModule({
+  config,
+  storage = getClientStorage("sessionStorage"),
+  storageKey,
+  environments,
+  useCurrentEnvironment
+}) {
+  const { FeatureFlagProvider, useFeatureFlagConfig, useFeatureFlagDispatch } = buildFeatureFlagContext(storage, storageKey, config);
+  const useFeatureFlagValue = (featureFlagKey) => {
+    const currentEnvironment = useCurrentEnvironment();
+    const featureFlagConfig = useFeatureFlagConfig();
+    if (!isValidEnvironment(environments, currentEnvironment)) {
+      return false;
+    }
+    return Boolean(featureFlagConfig[featureFlagKey][currentEnvironment]);
+  };
+  function FeatureFlag({
+    featureFlagKey,
+    showWhen,
+    children
+  }) {
+    const enabled = useFeatureFlagValue(featureFlagKey);
+    if (showWhen === "enabled" && !enabled) {
+      return null;
+    }
+    if (showWhen === "disabled" && enabled) {
+      return null;
+    }
+    return children;
+  }
+  const useSetFeatureFlag = (featureFlagKey) => {
+    const currentEnvironment = useCurrentEnvironment();
+    const featureFlagDispatch = useFeatureFlagDispatch();
+    return (newValue) => {
+      if (!isValidEnvironment(environments, currentEnvironment)) {
+        return;
+      }
+      featureFlagDispatch({
+        type: "update_feature_flag" /* UPDATE_FEATURE_FLAG */,
+        env: currentEnvironment,
+        featureFlagKey,
+        value: newValue
+      });
+    };
+  };
+  const DevPanel = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      DevPanelPure,
+      {
+        useCurrentEnvironment,
+        useFeatureFlagConfig,
+        useFeatureFlagValue,
+        useSetFeatureFlag
+      }
+    );
+  };
+  return {
+    FeatureFlagProvider,
+    useFeatureFlagValue,
+    useSetFeatureFlag,
+    DevPanel,
+    FeatureFlag
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  buildFeatureFlagModule
+});

package/dist/index.mjs

@@ -0,0 +1,302 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/buildFeatureFlagContext.tsx
+import { createContext, useContext, useReducer } from "react";
+
+// src/storageUtils.ts
+function getClientStorage(storageType) {
+  if (typeof window === "undefined" || !(window[storageType] instanceof Storage)) {
+    return {
+      clear: () => void 0,
+      getItem: () => null,
+      key: () => null,
+      length: -1,
+      removeItem: () => void 0,
+      setItem: () => void 0
+    };
+  }
+  return window[storageType];
+}
+function removeStorageItemSafe(storage, storageKey) {
+  try {
+    storage.removeItem(storageKey);
+  } catch (error) {
+    console.error(error);
+  }
+}
+function getFeatureFlagConfigFromSessionStorage(storage, storageKey) {
+  const item = storage.getItem(storageKey);
+  if (!item) {
+    return void 0;
+  }
+  try {
+    const parsed = JSON.parse(item);
+    if (!parsed || typeof parsed !== "object") {
+      removeStorageItemSafe(storage, storageKey);
+      throw new Error(`Storage value is not of type object. Got '${parsed}'`);
+    }
+    const result = {};
+    for (const [featureFlagKey, value] of Object.entries(parsed)) {
+      if (typeof featureFlagKey !== "string") {
+        throw new Error(`featureFlagKey must be of type 'string'. Got '${featureFlagKey}'`);
+      }
+      if (typeof value !== "boolean") {
+        throw new Error(`Feature flag value must be a boolean. Got '${value}'`);
+      }
+      result[featureFlagKey] = value;
+    }
+    return result;
+  } catch (e) {
+    removeStorageItemSafe(storage, storageKey);
+    return void 0;
+  }
+}
+function setFeatureFlagValueInSessionStorage(storage, storageKey, featureFlagKey, value) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  const featueFlagConfig = getFeatureFlagConfigFromSessionStorage(storage, storageKey);
+  storage.setItem(storageKey, JSON.stringify(__spreadProps(__spreadValues({}, featueFlagConfig), { [featureFlagKey]: value })));
+}
+
+// src/buildFeatureFlagContext.tsx
+import { jsx } from "react/jsx-runtime";
+function buildFeatureFlagContext(storage, sessionStorageKey, config) {
+  const FeatureFlagContext = createContext(config);
+  const useFeatureFlagConfig = () => useContext(FeatureFlagContext);
+  const FeatureFlagDispatchContext = createContext(() => {
+  });
+  const useFeatureFlagDispatch = () => useContext(FeatureFlagDispatchContext);
+  const reducer = buildReducer(storage, sessionStorageKey);
+  const FeatureFlagProvider = ({ children }) => {
+    const [state, dispatch] = useReducer(reducer, config);
+    return /* @__PURE__ */ jsx(FeatureFlagContext.Provider, { value: state, children: /* @__PURE__ */ jsx(FeatureFlagDispatchContext.Provider, { value: dispatch, children }) });
+  };
+  return {
+    useFeatureFlagConfig,
+    useFeatureFlagDispatch,
+    FeatureFlagProvider
+  };
+}
+function buildReducer(storage, storageKey) {
+  return function reducer(state, action) {
+    switch (action.type) {
+      case "update_feature_flag" /* UPDATE_FEATURE_FLAG */: {
+        setFeatureFlagValueInSessionStorage(
+          storage,
+          storageKey,
+          action.featureFlagKey,
+          action.value
+        );
+        return __spreadProps(__spreadValues({}, state), {
+          [action.featureFlagKey]: __spreadProps(__spreadValues({}, state[action.featureFlagKey]), {
+            [action.env]: action.value
+          })
+        });
+      }
+      default: {
+        return state;
+      }
+    }
+  };
+}
+
+// src/components/buildDevPanel.tsx
+import { Button, EdsProvider, Popover } from "@equinor/eds-core-react";
+import { useCallback as useCallback2, useMemo, useRef, useState } from "react";
+import styled2 from "styled-components";
+
+// src/components/FeatureFlagItem.tsx
+import { Switch } from "@equinor/eds-core-react";
+import { useCallback } from "react";
+import styled from "styled-components";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function FeatureFlagItem({
+  featureFlagKey,
+  useFeatureFlagValue,
+  useSetFeatureFlag
+}) {
+  const value = useFeatureFlagValue(featureFlagKey);
+  const setValue = useSetFeatureFlag(featureFlagKey);
+  const handleChange = useCallback(
+    (e) => {
+      setValue(e.target.checked);
+    },
+    [setValue]
+  );
+  return /* @__PURE__ */ jsx2(StyledSwitch, { size: "small", checked: value, onChange: handleChange, label: featureFlagKey });
+}
+var StyledSwitch = styled(Switch)`
+  gap: 4px;
+`;
+
+// src/components/buildDevPanel.tsx
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+function DevPanelPure({
+  useFeatureFlagConfig,
+  useCurrentEnvironment,
+  useFeatureFlagValue,
+  useSetFeatureFlag
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const handleToggle = useCallback2(() => {
+    setIsOpen((old) => !old);
+  }, []);
+  const handleClose = useCallback2(() => {
+    setIsOpen(false);
+  }, []);
+  const buttonRef = useRef(null);
+  const featureFlagConfig = useFeatureFlagConfig();
+  const featureFlagKeys = useMemo(() => {
+    return Object.keys(featureFlagConfig);
+  }, [featureFlagConfig]);
+  const currentEnvironment = useCurrentEnvironment();
+  if (!currentEnvironment || currentEnvironment !== "dev") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsxs(EdsProvider, { density: "compact", children: [
+    /* @__PURE__ */ jsx3(FixedWrapper, { children: /* @__PURE__ */ jsx3(
+      Button,
+      {
+        "aria-haspopup": true,
+        color: "secondary",
+        "aria-expanded": isOpen,
+        ref: buttonRef,
+        onClick: handleToggle,
+        children: "DEV PANEL"
+      }
+    ) }),
+    /* @__PURE__ */ jsx3(Popover, { open: isOpen, anchorEl: buttonRef.current, onClose: handleClose, children: /* @__PURE__ */ jsxs(StyledPopoverContent, { children: [
+      featureFlagKeys.map((featureFlagKey) => /* @__PURE__ */ jsx3(
+        FeatureFlagItem,
+        {
+          featureFlagKey,
+          useFeatureFlagValue,
+          useSetFeatureFlag
+        },
+        `feature-flag-item-${featureFlagKey}`
+      )),
+      /* @__PURE__ */ jsx3(
+        Button,
+        {
+          variant: "ghost",
+          color: "danger",
+          onClick: () => {
+            localStorage.clear();
+            sessionStorage.clear();
+            window.location.reload();
+          },
+          children: "Delete cache and reload"
+        }
+      )
+    ] }) })
+  ] }) });
+}
+var StyledPopoverContent = styled2(Popover.Content)`
+  display: flex;
+  flex-direction: column;
+`;
+var FixedWrapper = styled2.div`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  padding: 8px;
+  width: 100%;
+  z-index: 1;
+
+  display: flex;
+  justify-content: center;
+`;
+
+// src/utils.ts
+function isValidEnvironment(validEnvironments, environmentToValidate) {
+  return typeof environmentToValidate === "string" && validEnvironments.includes(environmentToValidate);
+}
+
+// src/buildFeatureFlagModule.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function buildFeatureFlagModule({
+  config,
+  storage = getClientStorage("sessionStorage"),
+  storageKey,
+  environments,
+  useCurrentEnvironment
+}) {
+  const { FeatureFlagProvider, useFeatureFlagConfig, useFeatureFlagDispatch } = buildFeatureFlagContext(storage, storageKey, config);
+  const useFeatureFlagValue = (featureFlagKey) => {
+    const currentEnvironment = useCurrentEnvironment();
+    const featureFlagConfig = useFeatureFlagConfig();
+    if (!isValidEnvironment(environments, currentEnvironment)) {
+      return false;
+    }
+    return Boolean(featureFlagConfig[featureFlagKey][currentEnvironment]);
+  };
+  function FeatureFlag({
+    featureFlagKey,
+    showWhen,
+    children
+  }) {
+    const enabled = useFeatureFlagValue(featureFlagKey);
+    if (showWhen === "enabled" && !enabled) {
+      return null;
+    }
+    if (showWhen === "disabled" && enabled) {
+      return null;
+    }
+    return children;
+  }
+  const useSetFeatureFlag = (featureFlagKey) => {
+    const currentEnvironment = useCurrentEnvironment();
+    const featureFlagDispatch = useFeatureFlagDispatch();
+    return (newValue) => {
+      if (!isValidEnvironment(environments, currentEnvironment)) {
+        return;
+      }
+      featureFlagDispatch({
+        type: "update_feature_flag" /* UPDATE_FEATURE_FLAG */,
+        env: currentEnvironment,
+        featureFlagKey,
+        value: newValue
+      });
+    };
+  };
+  const DevPanel = () => {
+    return /* @__PURE__ */ jsx4(
+      DevPanelPure,
+      {
+        useCurrentEnvironment,
+        useFeatureFlagConfig,
+        useFeatureFlagValue,
+        useSetFeatureFlag
+      }
+    );
+  };
+  return {
+    FeatureFlagProvider,
+    useFeatureFlagValue,
+    useSetFeatureFlag,
+    DevPanel,
+    FeatureFlag
+  };
+}
+export {
+  buildFeatureFlagModule
+};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@equinor/cpl-feature-flag-react",
+  "version": "0.0.1",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "dependencies": {},
+  "devDependencies": {
+    "@equinor/eds-core-react": "^0.42.5",
+    "@storybook/react": "^8.6.14",
+    "@storybook/test": "^8.6.14",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@types/styled-components": "^5.1.34",
+    "eslint": "^9.21.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.14",
+    "tsup": "^8.3.6",
+    "@equinor/cpl-eslint-config": "0.0.8",
+    "@equinor/cpl-typescript-config": "0.0.2"
+  },
+  "peerDependencies": {
+    "@equinor/eds-core-react": ">=0.42.1",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "styled-components": ">=5.3.11"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts --external react",
+    "lint": "TIMING=1 eslint . --fix",
+    "typecheck": "tsc --noEmit"
+  }
+}