@featurevisor/react 0.14.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.14.0](https://github.com/fahad19/featurevisor/compare/v0.13.1...v0.14.0) (2023-04-21)
+
+
+### Features
+
+* React integration package ([#56](https://github.com/fahad19/featurevisor/issues/56)) ([d0f6ad8](https://github.com/fahad19/featurevisor/commit/d0f6ad8a7e40fa06a741706a5322c08486e84ea9))

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Fahad Heylaal (https://fahad19.com)
+
+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,84 @@
+# @featurevisor/react
+
+React components and hooks for Featurevisor.
+
+Visit [https://featurevisor.com](https://featurevisor.com) for more information.
+
+## Installation
+
+```
+$ npm install --save @featurevisor/react
+```
+
+## API
+
+### FeaturevisorProvider
+
+React Provider component for setting SDK instance:
+
+```js
+import React from "react";
+import { createInstance } from "@featurevisor/sdk";
+import { FeaturevisorProvider } from "@featurevisor/react";
+
+const sdk = createInstance({
+  // ...
+});
+
+function Root() {
+  return (
+    <FeaturevisorProvider sdk={sdk}>
+      <App />
+    </FeaturevisorProvider>
+  );
+}
+```
+
+### activateFeature
+
+> activateFeature(featureName, attributes = {}): VariationValue | undefined
+
+Hook for activate feature.
+
+### useSdk
+
+> useSdk(): FeaturevisorInstance
+
+Hook for getting Featurevisor SDK instance.
+
+### useStatus
+
+> useStatus(): { isReady: boolean }
+
+Hook for checking if Featurevisor SDK is ready.
+
+```js
+import React from "react";
+import { useStatus } from "@featurevisor/react";
+
+function App() {
+  const { isReady } = useStatus();
+
+  if (!isReady) {
+    return <div>Loading...</div>;
+  }
+
+  return <div>Ready!</div>;
+}
+```
+
+### useVariation
+
+> useVariation(featureKey, attributes = {}): VariationValue | undefined
+
+Hook for getting variation value.
+
+### useVariable
+
+> useVariable(featureKey, variableKey, attributes = {}): VariableValue | undefined
+
+Hook for getting variable value.
+
+## License
+
+MIT © [Fahad Heylaal](https://fahad19.com)

package/dist/index.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.FeaturevisorReact=t(require("react")):e.FeaturevisorReact=t(e.React)}(this,(e=>(()=>{"use strict";var t={67:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.FeaturevisorContext=void 0;var o=r(359);t.FeaturevisorContext=o.createContext(void 0)},673:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.FeaturevisorProvider=void 0;var o=r(359),i=r(67);t.FeaturevisorProvider=function(e){return o.createElement(i.FeaturevisorContext.Provider,{value:e.sdk},e.children)}},289:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.activateFeature=void 0;var o=r(901);t.activateFeature=function(e,t){return void 0===t&&(t={}),(0,o.useSdk)().activate(e,t)}},97:function(e,t,r){var o=this&&this.__createBinding||(Object.create?function(e,t,r,o){void 0===o&&(o=r);var i=Object.getOwnPropertyDescriptor(t,r);i&&!("get"in i?!t.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,o,i)}:function(e,t,r,o){void 0===o&&(o=r),e[o]=t[r]}),i=this&&this.__exportStar||function(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||o(t,e,r)};Object.defineProperty(t,"__esModule",{value:!0}),i(r(67),t),i(r(673),t),i(r(289),t),i(r(901),t),i(r(9),t),i(r(26),t),i(r(613),t)},901:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useSdk=void 0;var o=r(359),i=r(67);t.useSdk=function(){return o.useContext(i.FeaturevisorContext)}},9:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useStatus=void 0;var o=r(359),i=r(901);t.useStatus=function(){var e=(0,i.useSdk)(),t=e.isReady(),r=o.useState(t),u=r[0],a=r[1];return u||o.useEffect((function(){function t(){a(!0)}return e.on("ready",t),function(){e.off("ready",t)}}),[]),{isReady:u}}},26:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useVariable=void 0;var o=r(901);t.useVariable=function(e,t,r){return void 0===r&&(r={}),(0,o.useSdk)().getVariable(e,t,r)}},613:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useVariation=void 0;var o=r(901);t.useVariation=function(e,t){return void 0===t&&(t={}),(0,o.useSdk)().getVariation(e,t)}},359:t=>{t.exports=e}},r={};return function e(o){var i=r[o];if(void 0!==i)return i.exports;var u=r[o]={exports:{}};return t[o].call(u.exports,u,u.exports,e),u.exports}(97)})()));
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,EAAQG,QAAQ,UACR,mBAAXC,QAAyBA,OAAOC,IAC9CD,OAAO,CAAC,SAAUJ,GACQ,iBAAZC,QACdA,QAA2B,kBAAID,EAAQG,QAAQ,UAE/CJ,EAAwB,kBAAIC,EAAQD,EAAY,MACjD,CATD,CASGO,MAAOC,G,qHCTV,aAGa,EAAAC,oBAAsBC,EAAMC,mBAAgDC,E,+FCHzF,aAGA,QAOA,gCAAqCC,GACnC,OACE,gBAAC,EAAAJ,oBAAoBK,SAAQ,CAACC,MAAOF,EAAMG,KAAMH,EAAMI,SAE3D,C,0FCZA,aAEA,2BACEC,EACAC,GAIA,YAJA,IAAAA,IAAAA,EAAA,KAEY,IAAAC,UAEDC,SAASH,EAAYC,EAClC,C,0fCVA,WAGA,YAGA,YACA,YACA,UACA,WACA,W,iFCXA,aAGA,QAEA,oBAGE,OAFYT,EAAMY,WAAW,EAAAb,oBAG/B,C,kFCTA,aAEA,SAMA,uBACE,IAAMO,GAAM,IAAAI,UACNG,EAAgBP,EAAIQ,UAEpB,EAAwBd,EAAMe,SAASF,GAAtCC,EAAO,KAAEE,EAAU,KAE1B,OAAIF,GAIJd,EAAMiB,WAAU,WACd,SAASC,IACPF,GAAW,EACb,CAIA,OAFAV,EAAIa,GAAG,QAASD,GAET,WACLZ,EAAIc,IAAI,QAASF,EACnB,CACF,GAAG,IAbM,CAAEJ,QAAO,EAgBpB,C,qFC7BA,aAEA,uBACEN,EACAa,EACAZ,GAIA,YAJA,IAAAA,IAAAA,EAAA,KAEY,IAAAC,UAEDY,YAAYd,EAAYa,EAAaZ,EAClD,C,uFCVA,aAEA,wBACED,EACAC,GAIA,YAJA,IAAAA,IAAAA,EAAA,KAEY,IAAAC,UAEDa,aAAaf,EAAYC,EACtC,C,UCXAhB,EAAOD,QAAUM,C,GCCb0B,EAA2B,CAAC,E,OAGhC,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBxB,IAAjByB,EACH,OAAOA,EAAanC,QAGrB,IAAIC,EAAS+B,EAAyBE,GAAY,CAGjDlC,QAAS,CAAC,GAOX,OAHAoC,EAAoBF,GAAUG,KAAKpC,EAAOD,QAASC,EAAQA,EAAOD,QAASiC,GAGpEhC,EAAOD,OACf,CCnB0BiC,CAAoB,G","sources":["webpack://FeaturevisorReact/webpack/universalModuleDefinition","webpack://FeaturevisorReact/./src/FeaturevisorContext.ts","webpack://FeaturevisorReact/./src/FeaturevisorProvider.tsx","webpack://FeaturevisorReact/./src/activateFeature.ts","webpack://FeaturevisorReact/./src/index.ts","webpack://FeaturevisorReact/./src/useSdk.ts","webpack://FeaturevisorReact/./src/useStatus.ts","webpack://FeaturevisorReact/./src/useVariable.ts","webpack://FeaturevisorReact/./src/useVariation.ts","webpack://FeaturevisorReact/external umd {\"commonjs\":\"react\",\"commonjs2\":\"react\",\"amd\":\"react\",\"root\":\"React\"}","webpack://FeaturevisorReact/webpack/bootstrap","webpack://FeaturevisorReact/webpack/startup"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"FeaturevisorReact\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"FeaturevisorReact\"] = factory(root[\"React\"]);\n})(this, (__WEBPACK_EXTERNAL_MODULE__359__) => {\nreturn ","import * as React from \"react\";\nimport { FeaturevisorInstance } from \"@featurevisor/sdk\";\n\nexport const FeaturevisorContext = React.createContext<FeaturevisorInstance | undefined>(undefined);\n","import * as React from \"react\";\nimport { FeaturevisorInstance } from \"@featurevisor/sdk\";\n\nimport { FeaturevisorContext } from \"./FeaturevisorContext\";\n\nexport interface FeaturevisorProviderProps {\n  sdk: FeaturevisorInstance;\n  children: React.ReactNode;\n}\n\nexport function FeaturevisorProvider(props: FeaturevisorProviderProps) {\n  return (\n    <FeaturevisorContext.Provider value={props.sdk}>{props.children}</FeaturevisorContext.Provider>\n  );\n}\n","import { Attributes, FeatureKey, VariationValue } from \"@featurevisor/types\";\n\nimport { useSdk } from \"./useSdk\";\n\nexport function activateFeature(\n  featureKey: FeatureKey,\n  attributes: Attributes = {},\n): VariationValue | undefined {\n  const sdk = useSdk();\n\n  return sdk.activate(featureKey, attributes);\n}\n","// contexts\nexport * from \"./FeaturevisorContext\";\n\n// components\nexport * from \"./FeaturevisorProvider\";\n\n// hooks\nexport * from \"./activateFeature\";\nexport * from \"./useSdk\";\nexport * from \"./useStatus\";\nexport * from \"./useVariable\";\nexport * from \"./useVariation\";\n","import * as React from \"react\";\nimport { FeaturevisorInstance } from \"@featurevisor/sdk\";\n\nimport { FeaturevisorContext } from \"./FeaturevisorContext\";\n\nexport function useSdk(): FeaturevisorInstance {\n  const sdk = React.useContext(FeaturevisorContext);\n\n  return sdk as FeaturevisorInstance;\n}\n","import * as React from \"react\";\n\nimport { useSdk } from \"./useSdk\";\n\nexport interface Status {\n  isReady: boolean;\n}\n\nexport function useStatus(): Status {\n  const sdk = useSdk();\n  const initialStatus = sdk.isReady();\n\n  const [isReady, setIsReady] = React.useState(initialStatus);\n\n  if (isReady) {\n    return { isReady };\n  }\n\n  React.useEffect(function () {\n    function handleReady() {\n      setIsReady(true);\n    }\n\n    sdk.on(\"ready\", handleReady);\n\n    return function () {\n      sdk.off(\"ready\", handleReady);\n    };\n  }, []);\n\n  return { isReady };\n}\n","import { Attributes, FeatureKey, VariableKey, VariableValue } from \"@featurevisor/types\";\n\nimport { useSdk } from \"./useSdk\";\n\nexport function useVariable(\n  featureKey: FeatureKey,\n  variableKey: VariableKey,\n  attributes: Attributes = {},\n): VariableValue | undefined {\n  const sdk = useSdk();\n\n  return sdk.getVariable(featureKey, variableKey, attributes);\n}\n","import { Attributes, FeatureKey, VariationValue } from \"@featurevisor/types\";\n\nimport { useSdk } from \"./useSdk\";\n\nexport function useVariation(\n  featureKey: FeatureKey,\n  attributes: Attributes = {},\n): VariationValue | undefined {\n  const sdk = useSdk();\n\n  return sdk.getVariation(featureKey, attributes);\n}\n","module.exports = __WEBPACK_EXTERNAL_MODULE__359__;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// startup\n// Load entry module and return exports\n// This entry module is referenced by other modules so it can't be inlined\nvar __webpack_exports__ = __webpack_require__(97);\n"],"names":["root","factory","exports","module","require","define","amd","this","__WEBPACK_EXTERNAL_MODULE__359__","FeaturevisorContext","React","createContext","undefined","props","Provider","value","sdk","children","featureKey","attributes","useSdk","activate","useContext","initialStatus","isReady","useState","setIsReady","useEffect","handleReady","on","off","variableKey","getVariable","getVariation","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","__webpack_modules__","call"],"sourceRoot":""}

package/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  preset: "ts-jest",
+  bail: true,
+
+  // for react testing library
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect", "./jest.setup.js"],
+};

package/jest.setup.js

@@ -0,0 +1,4 @@
+const { TextEncoder, TextDecoder } = require("util");
+
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;

package/lib/FeaturevisorContext.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { FeaturevisorInstance } from "@featurevisor/sdk";
+export declare const FeaturevisorContext: React.Context<FeaturevisorInstance>;

package/lib/FeaturevisorContext.js

@@ -0,0 +1,3 @@
+import * as React from "react";
+export var FeaturevisorContext = React.createContext(undefined);
+//# sourceMappingURL=FeaturevisorContext.js.map

package/lib/FeaturevisorContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeaturevisorContext.js","sourceRoot":"","sources":["../src/FeaturevisorContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,CAAC,IAAM,mBAAmB,GAAG,KAAK,CAAC,aAAa,CAAmC,SAAS,CAAC,CAAC"}

package/lib/FeaturevisorProvider.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { FeaturevisorInstance } from "@featurevisor/sdk";
+export interface FeaturevisorProviderProps {
+    sdk: FeaturevisorInstance;
+    children: React.ReactNode;
+}
+export declare function FeaturevisorProvider(props: FeaturevisorProviderProps): JSX.Element;

package/lib/FeaturevisorProvider.js

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { FeaturevisorContext } from "./FeaturevisorContext";
+export function FeaturevisorProvider(props) {
+    return (React.createElement(FeaturevisorContext.Provider, { value: props.sdk }, props.children));
+}
+//# sourceMappingURL=FeaturevisorProvider.js.map

package/lib/FeaturevisorProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeaturevisorProvider.js","sourceRoot":"","sources":["../src/FeaturevisorProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAO5D,MAAM,UAAU,oBAAoB,CAAC,KAAgC;IACnE,OAAO,CACL,oBAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,GAAG,IAAG,KAAK,CAAC,QAAQ,CAAgC,CAChG,CAAC;AACJ,CAAC"}

package/lib/activateFeature.d.ts

@@ -0,0 +1,2 @@
+import { Attributes, FeatureKey, VariationValue } from "@featurevisor/types";
+export declare function activateFeature(featureKey: FeatureKey, attributes?: Attributes): VariationValue | undefined;

package/lib/activateFeature.js

@@ -0,0 +1,7 @@
+import { useSdk } from "./useSdk";
+export function activateFeature(featureKey, attributes) {
+    if (attributes === void 0) { attributes = {}; }
+    var sdk = useSdk();
+    return sdk.activate(featureKey, attributes);
+}
+//# sourceMappingURL=activateFeature.js.map

package/lib/activateFeature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"activateFeature.js","sourceRoot":"","sources":["../src/activateFeature.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,UAAU,eAAe,CAC7B,UAAsB,EACtB,UAA2B;IAA3B,2BAAA,EAAA,eAA2B;IAE3B,IAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IAErB,OAAO,GAAG,CAAC,QAAQ,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;AAC9C,CAAC"}

package/lib/activateFeature.spec.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/lib/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./FeaturevisorContext";
+export * from "./FeaturevisorProvider";
+export * from "./activateFeature";
+export * from "./useSdk";
+export * from "./useStatus";
+export * from "./useVariable";
+export * from "./useVariation";

package/lib/index.js

@@ -0,0 +1,11 @@
+// contexts
+export * from "./FeaturevisorContext";
+// components
+export * from "./FeaturevisorProvider";
+// hooks
+export * from "./activateFeature";
+export * from "./useSdk";
+export * from "./useStatus";
+export * from "./useVariable";
+export * from "./useVariation";
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,WAAW;AACX,cAAc,uBAAuB,CAAC;AAEtC,aAAa;AACb,cAAc,wBAAwB,CAAC;AAEvC,QAAQ;AACR,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}

package/lib/useSdk.d.ts

@@ -0,0 +1,2 @@
+import { FeaturevisorInstance } from "@featurevisor/sdk";
+export declare function useSdk(): FeaturevisorInstance;

package/lib/useSdk.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { FeaturevisorContext } from "./FeaturevisorContext";
+export function useSdk() {
+    var sdk = React.useContext(FeaturevisorContext);
+    return sdk;
+}
+//# sourceMappingURL=useSdk.js.map

package/lib/useSdk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSdk.js","sourceRoot":"","sources":["../src/useSdk.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,UAAU,MAAM;IACpB,IAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAElD,OAAO,GAA2B,CAAC;AACrC,CAAC"}

package/lib/useSdk.spec.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/lib/useStatus.d.ts

@@ -0,0 +1,4 @@
+export interface Status {
+    isReady: boolean;
+}
+export declare function useStatus(): Status;

package/lib/useStatus.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { useSdk } from "./useSdk";
+export function useStatus() {
+    var sdk = useSdk();
+    var initialStatus = sdk.isReady();
+    var _a = React.useState(initialStatus), isReady = _a[0], setIsReady = _a[1];
+    if (isReady) {
+        return { isReady: isReady };
+    }
+    React.useEffect(function () {
+        function handleReady() {
+            setIsReady(true);
+        }
+        sdk.on("ready", handleReady);
+        return function () {
+            sdk.off("ready", handleReady);
+        };
+    }, []);
+    return { isReady: isReady };
+}
+//# sourceMappingURL=useStatus.js.map

package/lib/useStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStatus.js","sourceRoot":"","sources":["../src/useStatus.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAMlC,MAAM,UAAU,SAAS;IACvB,IAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,IAAM,aAAa,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAE9B,IAAA,KAAwB,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAApD,OAAO,QAAA,EAAE,UAAU,QAAiC,CAAC;IAE5D,IAAI,OAAO,EAAE;QACX,OAAO,EAAE,OAAO,SAAA,EAAE,CAAC;KACpB;IAED,KAAK,CAAC,SAAS,CAAC;QACd,SAAS,WAAW;YAClB,UAAU,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC;QAED,GAAG,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAE7B,OAAO;YACL,GAAG,CAAC,GAAG,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAChC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,OAAO,SAAA,EAAE,CAAC;AACrB,CAAC"}

package/lib/useStatus.spec.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/lib/useVariable.d.ts

@@ -0,0 +1,2 @@
+import { Attributes, FeatureKey, VariableKey, VariableValue } from "@featurevisor/types";
+export declare function useVariable(featureKey: FeatureKey, variableKey: VariableKey, attributes?: Attributes): VariableValue | undefined;

package/lib/useVariable.js

@@ -0,0 +1,7 @@
+import { useSdk } from "./useSdk";
+export function useVariable(featureKey, variableKey, attributes) {
+    if (attributes === void 0) { attributes = {}; }
+    var sdk = useSdk();
+    return sdk.getVariable(featureKey, variableKey, attributes);
+}
+//# sourceMappingURL=useVariable.js.map

package/lib/useVariable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVariable.js","sourceRoot":"","sources":["../src/useVariable.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,UAAU,WAAW,CACzB,UAAsB,EACtB,WAAwB,EACxB,UAA2B;IAA3B,2BAAA,EAAA,eAA2B;IAE3B,IAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IAErB,OAAO,GAAG,CAAC,WAAW,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC;AAC9D,CAAC"}

package/lib/useVariable.spec.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/lib/useVariation.d.ts

@@ -0,0 +1,2 @@
+import { Attributes, FeatureKey, VariationValue } from "@featurevisor/types";
+export declare function useVariation(featureKey: FeatureKey, attributes?: Attributes): VariationValue | undefined;

package/lib/useVariation.js

@@ -0,0 +1,7 @@
+import { useSdk } from "./useSdk";
+export function useVariation(featureKey, attributes) {
+    if (attributes === void 0) { attributes = {}; }
+    var sdk = useSdk();
+    return sdk.getVariation(featureKey, attributes);
+}
+//# sourceMappingURL=useVariation.js.map

package/lib/useVariation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVariation.js","sourceRoot":"","sources":["../src/useVariation.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,UAAU,YAAY,CAC1B,UAAsB,EACtB,UAA2B;IAA3B,2BAAA,EAAA,eAA2B;IAE3B,IAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IAErB,OAAO,GAAG,CAAC,YAAY,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;AAClD,CAAC"}

package/lib/useVariation.spec.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@featurevisor/react",
+  "version": "0.14.0",
+  "description": "React package for Featurevisor",
+  "main": "dist/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "lint": "echo 'not linting in this package yet'",
+    "transpile": "rimraf lib && tsc --project tsconfig.esm.json",
+    "dist": "webpack --config ./webpack.config.js",
+    "build": "npm run transpile && npm run dist",
+    "test": "jest --config jest.config.js --verbose"
+  },
+  "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",
+    "react"
+  ],
+  "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"
+  },
+  "dependencies": {
+    "@featurevisor/sdk": "^0.14.0",
+    "@featurevisor/types": "^0.14.0"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "jest-environment-jsdom": "^29.5.0"
+  },
+  "gitHead": "eb0599df92747f40e6ece174e4de37ac4c098c4c"
+}

package/src/FeaturevisorContext.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { FeaturevisorInstance } from "@featurevisor/sdk";
+
+export const FeaturevisorContext = React.createContext<FeaturevisorInstance | undefined>(undefined);

package/src/FeaturevisorProvider.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { FeaturevisorInstance } from "@featurevisor/sdk";
+
+import { FeaturevisorContext } from "./FeaturevisorContext";
+
+export interface FeaturevisorProviderProps {
+  sdk: FeaturevisorInstance;
+  children: React.ReactNode;
+}
+
+export function FeaturevisorProvider(props: FeaturevisorProviderProps) {
+  return (
+    <FeaturevisorContext.Provider value={props.sdk}>{props.children}</FeaturevisorContext.Provider>
+  );
+}

package/src/activateFeature.spec.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { FeaturevisorProvider } from "./FeaturevisorProvider";
+import { activateFeature } from "./activateFeature";
+import { createInstance } from "@featurevisor/sdk";
+
+function getNewInstance() {
+  const sdk = createInstance({
+    datafile: {
+      schemaVersion: "1",
+      revision: "1.0",
+      features: [
+        {
+          key: "test",
+          defaultVariation: false,
+          bucketBy: "userId",
+          variations: [
+            { type: "boolean", value: true },
+            { type: "boolean", value: false },
+          ],
+          traffic: [
+            {
+              key: "1",
+              segments: "*",
+              percentage: 100000,
+              allocation: [
+                { variation: true, percentage: 100000 },
+                { variation: false, percentage: 0 },
+              ],
+            },
+          ],
+        },
+      ],
+      attributes: [],
+      segments: [],
+    },
+  });
+
+  return sdk;
+}
+
+describe("react: activateFeature", function() {
+  test("should be a function", function() {
+    expect(activateFeature).toBeInstanceOf(Function);
+  });
+
+  test("should return the variation", function() {
+    function TestComponent() {
+      const variation = activateFeature("test", { userId: "1" });
+
+      return variation === true ? <p>True</p> : <p>False</p>;
+    }
+
+    render(
+      <FeaturevisorProvider sdk={getNewInstance()}>
+        <TestComponent />
+      </FeaturevisorProvider>,
+    );
+
+    expect(screen.getByText("True")).toBeInTheDocument();
+  });
+});

package/src/activateFeature.ts

@@ -0,0 +1,12 @@
+import { Attributes, FeatureKey, VariationValue } from "@featurevisor/types";
+
+import { useSdk } from "./useSdk";
+
+export function activateFeature(
+  featureKey: FeatureKey,
+  attributes: Attributes = {},
+): VariationValue | undefined {
+  const sdk = useSdk();
+
+  return sdk.activate(featureKey, attributes);
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+// contexts
+export * from "./FeaturevisorContext";
+
+// components
+export * from "./FeaturevisorProvider";
+
+// hooks
+export * from "./activateFeature";
+export * from "./useSdk";
+export * from "./useStatus";
+export * from "./useVariable";
+export * from "./useVariation";

package/src/useSdk.spec.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { FeaturevisorProvider } from "./FeaturevisorProvider";
+import { useSdk } from "./useSdk";
+import { createInstance } from "@featurevisor/sdk";
+
+function getNewInstance() {
+  const sdk = createInstance({
+    datafile: {
+      schemaVersion: "1",
+      revision: "1.0",
+      features: [
+        {
+          key: "test",
+          defaultVariation: false,
+          bucketBy: "userId",
+          variations: [
+            { type: "boolean", value: true },
+            { type: "boolean", value: false },
+          ],
+          traffic: [
+            {
+              key: "1",
+              segments: "*",
+              percentage: 100000,
+              allocation: [
+                { variation: true, percentage: 100000 },
+                { variation: false, percentage: 0 },
+              ],
+            },
+          ],
+        },
+      ],
+      attributes: [],
+      segments: [],
+    },
+  });
+
+  return sdk;
+}
+
+describe("react: useSdk", function () {
+  test("should be a function", function () {
+    expect(useSdk).toBeInstanceOf(Function);
+  });
+
+  test("should return the sdk", function () {
+    function TestComponent() {
+      const sdk = useSdk();
+
+      expect(typeof sdk.isReady).toEqual("function");
+
+      return <p>Test</p>;
+    }
+
+    render(
+      <FeaturevisorProvider sdk={getNewInstance()}>
+        <TestComponent />
+      </FeaturevisorProvider>,
+    );
+
+    expect(screen.getByText("Test")).toBeInTheDocument();
+  });
+});

package/src/useSdk.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { FeaturevisorInstance } from "@featurevisor/sdk";
+
+import { FeaturevisorContext } from "./FeaturevisorContext";
+
+export function useSdk(): FeaturevisorInstance {
+  const sdk = React.useContext(FeaturevisorContext);
+
+  return sdk as FeaturevisorInstance;
+}

package/src/useStatus.spec.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { FeaturevisorProvider } from "./FeaturevisorProvider";
+import { useStatus } from "./useStatus";
+import { createInstance } from "@featurevisor/sdk";
+
+function getNewInstance() {
+  const sdk = createInstance({
+    datafile: {
+      schemaVersion: "1",
+      revision: "1.0",
+      features: [
+        {
+          key: "test",
+          defaultVariation: false,
+          bucketBy: "userId",
+          variations: [
+            { type: "boolean", value: true },
+            { type: "boolean", value: false },
+          ],
+          traffic: [
+            {
+              key: "1",
+              segments: "*",
+              percentage: 100000,
+              allocation: [
+                { variation: true, percentage: 100000 },
+                { variation: false, percentage: 0 },
+              ],
+            },
+          ],
+        },
+      ],
+      attributes: [],
+      segments: [],
+    },
+  });
+
+  return sdk;
+}
+
+describe("react: useStatus", function () {
+  test("should be a function", function () {
+    expect(useStatus).toBeInstanceOf(Function);
+  });
+
+  test("should return the variation", function () {
+    function TestComponent() {
+      const { isReady } = useStatus();
+
+      return isReady ? <p>Ready</p> : <p>Loading...</p>;
+    }
+
+    render(
+      <FeaturevisorProvider sdk={getNewInstance()}>
+        <TestComponent />
+      </FeaturevisorProvider>,
+    );
+
+    expect(screen.getByText("Ready")).toBeInTheDocument();
+  });
+});

package/src/useStatus.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+
+import { useSdk } from "./useSdk";
+
+export interface Status {
+  isReady: boolean;
+}
+
+export function useStatus(): Status {
+  const sdk = useSdk();
+  const initialStatus = sdk.isReady();
+
+  const [isReady, setIsReady] = React.useState(initialStatus);
+
+  if (isReady) {
+    return { isReady };
+  }
+
+  React.useEffect(function () {
+    function handleReady() {
+      setIsReady(true);
+    }
+
+    sdk.on("ready", handleReady);
+
+    return function () {
+      sdk.off("ready", handleReady);
+    };
+  }, []);
+
+  return { isReady };
+}

package/src/useVariable.spec.tsx

@@ -0,0 +1,81 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { FeaturevisorProvider } from "./FeaturevisorProvider";
+import { useVariable } from "./useVariable";
+import { createInstance } from "@featurevisor/sdk";
+
+function getNewInstance() {
+  const sdk = createInstance({
+    datafile: {
+      schemaVersion: "1",
+      revision: "1.0",
+      features: [
+        {
+          key: "test",
+          defaultVariation: "control",
+          bucketBy: "userId",
+          variations: [
+            { type: "string", value: "control" },
+            {
+              type: "string",
+              value: "b",
+            },
+            { type: "string", value: "c" },
+          ],
+          traffic: [
+            {
+              key: "1",
+              segments: "*",
+              percentage: 100000,
+              allocation: [
+                { variation: "control", percentage: 33000 },
+                { variation: "b", percentage: 33000 },
+                { variation: "c", percentage: 34000 },
+              ],
+            },
+          ],
+          variablesSchema: [
+            { key: "color", type: "string", defaultValue: "red" },
+            {
+              key: "hero",
+              type: "object",
+              defaultValue: {
+                title: "Hero Title",
+                subtitle: "Hero Subtitle",
+                alignment: "center",
+              },
+            },
+          ],
+        },
+      ],
+      attributes: [],
+      segments: [],
+    },
+  });
+
+  return sdk;
+}
+
+describe("react: useVariable", function () {
+  test("should be a function", function () {
+    expect(useVariable).toBeInstanceOf(Function);
+  });
+
+  test("should return the variable", function () {
+    function TestComponent() {
+      const variable = useVariable("test", "color", { userId: "1" });
+
+      return variable === "red" ? <p>Red</p> : <p>Transparent</p>;
+    }
+
+    render(
+      <FeaturevisorProvider sdk={getNewInstance()}>
+        <TestComponent />
+      </FeaturevisorProvider>,
+    );
+
+    expect(screen.getByText("Red")).toBeInTheDocument();
+  });
+});

package/src/useVariable.ts

@@ -0,0 +1,13 @@
+import { Attributes, FeatureKey, VariableKey, VariableValue } from "@featurevisor/types";
+
+import { useSdk } from "./useSdk";
+
+export function useVariable(
+  featureKey: FeatureKey,
+  variableKey: VariableKey,
+  attributes: Attributes = {},
+): VariableValue | undefined {
+  const sdk = useSdk();
+
+  return sdk.getVariable(featureKey, variableKey, attributes);
+}

package/src/useVariation.spec.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { FeaturevisorProvider } from "./FeaturevisorProvider";
+import { useVariation } from "./useVariation";
+import { createInstance } from "@featurevisor/sdk";
+
+function getNewInstance() {
+  const sdk = createInstance({
+    datafile: {
+      schemaVersion: "1",
+      revision: "1.0",
+      features: [
+        {
+          key: "test",
+          defaultVariation: false,
+          bucketBy: "userId",
+          variations: [
+            { type: "boolean", value: true },
+            { type: "boolean", value: false },
+          ],
+          traffic: [
+            {
+              key: "1",
+              segments: "*",
+              percentage: 100000,
+              allocation: [
+                { variation: true, percentage: 100000 },
+                { variation: false, percentage: 0 },
+              ],
+            },
+          ],
+        },
+      ],
+      attributes: [],
+      segments: [],
+    },
+  });
+
+  return sdk;
+}
+
+describe("react: useVariation", function () {
+  test("should be a function", function () {
+    expect(useVariation).toBeInstanceOf(Function);
+  });
+
+  test("should return the variation", function () {
+    function TestComponent() {
+      const variation = useVariation("test", { userId: "1" });
+
+      return variation === true ? <p>True</p> : <p>False</p>;
+    }
+
+    render(
+      <FeaturevisorProvider sdk={getNewInstance()}>
+        <TestComponent />
+      </FeaturevisorProvider>,
+    );
+
+    expect(screen.getByText("True")).toBeInTheDocument();
+  });
+});

package/src/useVariation.ts

@@ -0,0 +1,12 @@
+import { Attributes, FeatureKey, VariationValue } from "@featurevisor/types";
+
+import { useSdk } from "./useSdk";
+
+export function useVariation(
+  featureKey: FeatureKey,
+  attributes: Attributes = {},
+): VariationValue | undefined {
+  const sdk = useSdk();
+
+  return sdk.getVariation(featureKey, attributes);
+}

package/tsconfig.cjs.json

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

package/tsconfig.esm.json

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

package/tsconfig.json

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

package/webpack.config.js

@@ -0,0 +1,21 @@
+const path = require("path");
+
+const getWebpackConfig = require("../../tools/getWebpackConfig");
+
+const wepbackConfig = getWebpackConfig({
+  entryFilePath: path.join(__dirname, "src", "index.ts"),
+  entryKey: "index",
+  outputDirectoryPath: path.join(__dirname, "dist"),
+  outputLibrary: "FeaturevisorReact",
+  tsConfigFilePath: path.join(__dirname, "tsconfig.cjs.json"),
+  externals: {
+    react: {
+      commonjs: "react",
+      commonjs2: "react",
+      amd: "react",
+      root: "React",
+    },
+  },
+});
+
+module.exports = wepbackConfig;