From b73dfae0fca1647d3d290b46c45e174e8f5ea9ef Mon Sep 17 00:00:00 2001
From: Alexandru Ciobanu <alex+git@ciobanu.org>
Date: Thu, 20 Feb 2025 16:29:59 +0700
Subject: [PATCH 1/2] feat(openfeature-browser-provider): add fallback features
 and improve huddle feature example

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
---
 .../example/app/featureManagement.ts          | 12 ++++++++++-
 .../example/components/HuddleFeature.tsx      | 20 ++++++++++++++++++-
 .../openfeature-browser-provider/package.json |  2 +-
 yarn.lock                                     | 14 +------------
 4 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/packages/openfeature-browser-provider/example/app/featureManagement.ts b/packages/openfeature-browser-provider/example/app/featureManagement.ts
index 2cb569a2..41f67acd 100644
--- a/packages/openfeature-browser-provider/example/app/featureManagement.ts
+++ b/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);
 }
 
diff --git a/packages/openfeature-browser-provider/example/components/HuddleFeature.tsx b/packages/openfeature-browser-provider/example/components/HuddleFeature.tsx
index bfcedae2..55d03c91 100644
--- a/packages/openfeature-browser-provider/example/components/HuddleFeature.tsx
+++ b/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)}
diff --git a/packages/openfeature-browser-provider/package.json b/packages/openfeature-browser-provider/package.json
index d080bfae..f22ab51b 100644
--- a/packages/openfeature-browser-provider/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index 9aa63b6d..f03474e3 100644
--- a/yarn.lock
+++ b/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"
@@ -983,7 +971,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"

From 89e72efd15f6181cf73f8f2a4a90152bb90842c0 Mon Sep 17 00:00:00 2001
From: Alexandru Ciobanu <alex+git@ciobanu.org>
Date: Thu, 20 Feb 2025 16:42:51 +0700
Subject: [PATCH 2/2] refactor(openfeature-browser-provider): improve huddle
 feature example naming and clarity

Update variable names in HuddleFeature component to enhance readability:
- Rename 'provider' to 'huddleMeetingProvider'
- Simplify useObjectFlagDetails configuration
---
 .../example/app/featureManagement.ts                   |  2 +-
 .../example/components/HuddleFeature.tsx               | 10 ++++------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/openfeature-browser-provider/example/app/featureManagement.ts b/packages/openfeature-browser-provider/example/app/featureManagement.ts
index 41f67acd..03255216 100644
--- a/packages/openfeature-browser-provider/example/app/featureManagement.ts
+++ b/packages/openfeature-browser-provider/example/app/featureManagement.ts
@@ -22,7 +22,7 @@ export async function initOpenFeature() {
     publishableKey,
     fallbackFeatures: {
       huddle: {
-        key: "zoom",
+        key: "zoom", // huddleMeetingProvider
         payload: {
           joinUrl: "https://zoom.us/join",
         },
diff --git a/packages/openfeature-browser-provider/example/components/HuddleFeature.tsx b/packages/openfeature-browser-provider/example/components/HuddleFeature.tsx
index 55d03c91..9452ab08 100644
--- a/packages/openfeature-browser-provider/example/components/HuddleFeature.tsx
+++ b/packages/openfeature-browser-provider/example/components/HuddleFeature.tsx
@@ -11,12 +11,10 @@ const featureKey = "huddle";
 
 export const HuddleFeature = () => {
   const isEnabled = useBooleanFlagValue(featureKey, false);
-  const { variant: provider, value: config } = useObjectFlagDetails(
-    featureKey,
-    {
+  const { variant: huddleMeetingProvider, 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">
@@ -25,7 +23,7 @@ export const HuddleFeature = () => {
         <code className="font-mono font-bold">{JSON.stringify(isEnabled)}</code>
       </pre>
       <h3 className="text-xl mb-4">
-        Huddle using <strong>{provider}</strong>:
+        Huddle using <strong>{huddleMeetingProvider}</strong>:
       </h3>
       <pre>
         <code className="font-mono font-bold">