feat(openfeature-browser-provider): add fallback features and improve huddle feature example (#331)

Update example to demonstrate fallback features with the Bucket
OpenFeature provider, including:
- Add fallback configuration for the huddle feature
- Enhance HuddleFeature component to display provider and join URL
- Update browser SDK dependency to 3.0.0-alpha.4

Author: pavkam

packages/openfeature-browser-provider/example/app/featureManagement.ts

@@ -18,7 +18,17 @@ export async function initOpenFeature() {
     console.error("No publishable key set for Bucket");
     return;
   }
-  bucketProvider = new BucketBrowserSDKProvider({ publishableKey });
+  bucketProvider = new BucketBrowserSDKProvider({
+    publishableKey,
+    fallbackFeatures: {
+      huddle: {
+        key: "zoom",
+        payload: {
+          joinUrl: "https://zoom.us/join",
+        },
+      },
+    },
+  });
   return OpenFeature.setProviderAndWait(bucketProvider);
 }
 

packages/openfeature-browser-provider/example/components/HuddleFeature.tsx

@@ -1,19 +1,37 @@
 "use client";
 
 import React from "react";
-import { useBooleanFlagValue } from "@openfeature/react-sdk";
+import {
+  useBooleanFlagValue,
+  useObjectFlagDetails,
+} from "@openfeature/react-sdk";
 import { track } from "@/app/featureManagement";
 
 const featureKey = "huddle";
 
 export const HuddleFeature = () => {
   const isEnabled = useBooleanFlagValue(featureKey, false);
+  const { variant: provider, value: config } = useObjectFlagDetails(
+    featureKey,
+    {
+      joinUrl: "https://zoom.us/join",
+    },
+  );
+
   return (
     <div className="border border-gray-300 p-6 rounded-xl dark:border-neutral-800 dark:bg-zinc-800/30">
       <h3 className="text-xl mb-4">Huddle feature enabled:</h3>
       <pre>
         <code className="font-mono font-bold">{JSON.stringify(isEnabled)}</code>
       </pre>
+      <h3 className="text-xl mb-4">
+        Huddle using <strong>{provider}</strong>:
+      </h3>
+      <pre>
+        <code className="font-mono font-bold">
+          Join the huddle at <a href={config.joinUrl}>{config.joinUrl}</a>
+        </code>
+      </pre>
       <button
         className="border-solid m-auto max-w-60 border-2 border-indigo-600 rounded-lg p-2 mt-4 disabled:opacity-50"
         onClick={() => track(featureKey)}

packages/openfeature-browser-provider/package.json

@@ -35,7 +35,7 @@
     }
   },
   "dependencies": {
-    "@bucketco/browser-sdk": "3.0.0-alpha.2"
+    "@bucketco/browser-sdk": "3.0.0-alpha.4"
   },
   "devDependencies": {
     "@bucketco/eslint-config": "0.0.2",

yarn.lock

@@ -872,18 +872,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@bucketco/browser-sdk@npm:3.0.0-alpha.2":
-  version: 3.0.0-alpha.2
-  resolution: "@bucketco/browser-sdk@npm:3.0.0-alpha.2"
-  dependencies:
-    "@floating-ui/dom": "npm:^1.6.8"
-    canonical-json: "npm:^0.0.4"
-    js-cookie: "npm:^3.0.5"
-    preact: "npm:^10.22.1"
-  checksum: 10c0/ad96d13a8f969e0c21982c919b9ba0637358813009f8057c055352eb9851fb0b07d78411d8b407107baf0b81b8e315df39257666a90f875f3a79a6e3c70ff80d
-  languageName: node
-  linkType: hard
-
 "@bucketco/browser-sdk@npm:3.0.0-alpha.4, @bucketco/browser-sdk@workspace:packages/browser-sdk":
   version: 0.0.0-use.local
   resolution: "@bucketco/browser-sdk@workspace:packages/browser-sdk"
@@ -974,7 +962,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@bucketco/openfeature-browser-provider@workspace:packages/openfeature-browser-provider"
   dependencies:
-    "@bucketco/browser-sdk": "npm:3.0.0-alpha.2"
+    "@bucketco/browser-sdk": "npm:3.0.0-alpha.4"
     "@bucketco/eslint-config": "npm:0.0.2"
     "@bucketco/tsconfig": "npm:0.0.2"
     "@openfeature/core": "npm:1.5.0"