refactor: update README and code to reflect flag terminology changes

- Replaced instances of `getFeature` with `getFlag` in the README and example files to align with the new flag-based approach.
- Updated the `Feedback` component to reference `ExampleFlag` instead of `ExampleFeature`.
- Adjusted the `ReflagClient` class to ensure consistent usage of `flagKey` in feedback requests and related methods.
- Enhanced documentation to clarify the transition from features to flags, including migration instructions for users moving from the Bucket SDK to the Reflag SDK.

Author: pavkam

packages/browser-sdk/README.md

@@ -29,28 +29,40 @@ const reflagClient = new ReflagClient({ publishableKey, user, company });
 
 await reflagClient.initialize();
 
-const {
-  isEnabled,
-  config: { payload: question },
-  track,
-  requestFeedback,
-} = reflagClient.getFeature("huddle");
-
-if (isEnabled) {
-  // Show feature. When retrieving `isEnabled` the client automatically
+const huddleFlag = reflagClient.getFlag("huddle");
+
+if (typeof huddleFlag === "boolean") {
+  // Simple toggle flag
+  if (huddleFlag) {
+    // Show flag. When retrieving the flag value the client automatically
+    // sends a "check" event for the "huddle" flag which is shown in the
+    // Reflag UI.
+
+    // On usage, call `track` to let Reflag know that a user interacted with the flag
+    reflagClient.track("huddle");
+
+    // Use `requestFeedback` to create "Send feedback" buttons easily for specific
+    // flags. This is not related to `track` and you can call them individually.
+    reflagClient.requestFeedback({ flagKey: "huddle" });
+  }
+} else {
+  // Multi-variate flag with config
+  const { key, payload } = huddleFlag;
+
+  // Show flag. When retrieving the flag value the client automatically
   // sends a "check" event for the "huddle" flag which is shown in the
   // Reflag UI.
 
   // On usage, call `track` to let Reflag know that a user interacted with the flag
-  track();
+  reflagClient.track("huddle");
 
   // The `payload` is a user-supplied JSON in Reflag that is dynamically picked
   // out depending on the user/company.
   const question = payload?.question ?? "Tell us what you think of Huddles";
 
   // Use `requestFeedback` to create "Send feedback" buttons easily for specific
   // flags. This is not related to `track` and you can call them individually.
-  requestFeedback({ title: question });
+  reflagClient.requestFeedback({ flagKey: "huddle", title: question });
 }
 
 // `track` just calls `reflagClient.track(<flagKey>)` to send an event using the same flag key
@@ -102,7 +114,7 @@ type Configuration = {
   sseBaseUrl?: "https://livemessaging.bucket.co";
   feedback?: undefined; // See FEEDBACK.md
   enableTracking?: true; // set to `false` to stop sending track events and user/company updates to Reflag servers. Useful when you're impersonating a user
-  fallbackFeatures?:
+  fallbackFlags?:
     | string[]
     | Record<string, { key: string; payload: any } | true>; // Enable these flags if unable to contact reflag.com. Can be a list of flag keys or a record with configuration values
   timeoutMs?: number; // Timeout for fetching flags (default: 5000ms)
@@ -113,7 +125,7 @@ type Configuration = {
 };
 ```
 
-## Feature toggles
+## Flag targeting
 
 Reflag determines which flags are active for a given user/company. The user/company is given in the `ReflagClient` constructor.
 
@@ -144,64 +156,28 @@ const reflagClient = new ReflagClient({
 });
 ```
 
-To retrieve flags along with their targeting information, use `getFeature(flagKey: string)`:
+To retrieve the value of a flag use `getFlag(flagKey: string)`:
 
 ```ts
-const huddle = reflagClient.getFeature("huddle");
-// {
-//   isEnabled: true,
-//   config: { key: "zoom", payload: { ... } },
-//   track: () => Promise<Response>
-//   requestFeedback: (options: RequestFeedbackData) => void
-// }
+const huddle = reflagClient.getFlag("huddle");
+// Returns either:
+// - boolean (for simple toggle flags)
+// - { key: string, payload: any } (for multi-variate flags)
 ```
 
-You can use `getFeatures()` to retrieve all enabled flags currently.
+You can use `getFlags()` to retrieve all flags:
 
 ```ts
-const flags = reflagClient.getFeatures();
+const flags = reflagClient.getFlags();
 // {
 //   huddle: {
-//     isEnabled: true,
-//     targetingVersion: 42,
-//     config: ...
+//    - boolean (for simple toggle flags)
+//    - { key: string, payload: any } (for multi-variate flags)
 //   }
+//   ...
 // }
 ```
 
-`getFeatures()` is meant to be more low-level than `getFeature()` and it typically used
-by down-stream clients, like the React SDK.
-
-Note that accessing `isEnabled` on the object returned by `getFeatures` does not automatically
-generate a `check` event, contrary to the `isEnabled` property on the object returned by `getFeature`.
-
-## Remote config
-
-Remote config is a dynamic and flexible approach to configuring flag behavior outside of your app – without needing to re-deploy it.
-
-Similar to `isEnabled`, each flag has a `config` property. This configuration is managed from within Reflag.
-It is managed similar to the way access to flags is managed, but instead of the binary `isEnabled` you can have
-multiple configuration values which are given to different user/companies.
-
-```ts
-const flags = reflagClient.getFeatures();
-// {
-//   huddle: {
-//     isEnabled: true,
-//     targetingVersion: 42,
-//     config: {
-//       key: "gpt-3.5",
-//       payload: { maxTokens: 10000, model: "gpt-3.5-beta1" }
-//     }
-//   }
-// }
-```
-
-`key` is mandatory for a config, but if a flag has no config or no config value was matched against the context, the `key` will be `undefined`. Make sure to check against this case when trying to use the configuration in your application. `payload` is an optional JSON value for arbitrary configuration needs.
-
-Just as `isEnabled`, accessing `config` on the object returned by `getFeatures` does not automatically
-generate a `check` event, contrary to the `config` property on the object returned by `getFeature`.
-
 ## Updating user/company/other context
 
 Attributes given for the user/company/other context in the `ReflagClient` constructor can be updated for use in flag targeting evaluation with the `updateUser()`, `updateCompany()` and `updateOtherContext()` methods.
@@ -211,7 +187,8 @@ The following shows how to let users self-opt-in for a new flag. The flag must h
 
 ```ts
 // toggle opt-in for the voiceHuddle flag:
-const { isEnabled } = reflagClient.getFeature("voiceHuddle");
+const isEnabled = reflagClient.getFlag("voiceHuddle");
+
 // this toggles the flag on/off. The promise returns once flag targeting has been
 // re-evaluated.
 await reflagClient.updateUser({ voiceHuddleOptIn: (!isEnabled).toString() });
@@ -310,15 +287,15 @@ reflagClient.track("huddle", { voiceHuddle: true });
 Event listeners allow for capturing various events occurring in the `ReflagClient`. This is useful to build integrations with other system or for various debugging purposes. There are 5 kinds of events:
 
 - `check`: Your code used `isEnabled` or `config` for a flag
-- `flagsUpdated`: Features were updated. Either because they were loaded as part of initialization or because the user/company updated
+- `flagsUpdated`: Flags were updated. Either because they were loaded as part of initialization or because the user/company updated
 - `user`: User information updated (similar to the `identify` call used in tracking terminology)
 - `company`: Company information updated (sometimes to the `group` call used in tracking terminology)
 - `track`: Track event occurred.
 
 Use the `on()` method to add an event listener to respond to certain events. See the API reference for details on each hook.
 
 ```ts
-import { ReflagClient, CheckEvent, RawFeatures } from "@reflag/browser-sdk";
+import { ReflagClient, CheckEvent, RawFlags } from "@reflag/browser-sdk";
 
 const client = new ReflagClient({
   // options
@@ -355,13 +332,6 @@ The two cookies are:
 - `reflag-prompt-${userId}`: store the last automated feedback prompt message ID received to avoid repeating surveys
 - `reflag-token-${userId}`: caching a token used to connect to Reflag's live messaging infrastructure that is used to deliver automated feedback surveys in real time.
 
-## Upgrading to 3.0 from 2.x
-
-Breaking changes:
-
-- `client.onFeaturesUpdated()` is now replaced by [event listeners](#event-listeners)
-- Arguments to the `ReflagClient` constructor which were previously under `flagOptions` are now supplied directly in the root.
-
 ## TypeScript
 
 Types are bundled together with the library and exposed automatically when importing through a package manager.
@@ -382,6 +352,59 @@ If you are including the Reflag tracking SDK with a `<script>`-tag from `jsdeliv
 | --------------- | ---------------------------------------------------- | ------------------------------- |
 | script-src-elem | [https://cdn.jsdelivr.net](https://cdn.jsdelivr.net) | Loads the Reflag SDK from a CDN |
 
+## Migration from Bucket SDK to Reflag SDK
+
+If you're migrating from the legacy Bucket SDK to the new Reflag SDK, here are the key changes you need to make:
+
+### General
+
+- **`BucketClient`** → **`ReflagClient`**
+- **`BucketContext`** → **`ReflagContext`**
+- **`featureKey`** → **`flagKey`**
+- **`featureId`** was dropped
+
+### Feature to Flag conversion
+
+- **`getFeature()`** → **`getFlag()`** (`ReflagClient`)
+- **`getFeatures()`** → **`getFlags()`** (`ReflagClient`)
+
+**Important**: The new methods return the flag values directly (boolean or object), not an object with methods.
+The methods that were previously returned by `getFeature()` or `getFeatures()` are now available as separate methods:
+
+- **`Feature.isEnabled`** → **`getFlag()`** (returns boolean for "toggle" flags)
+- **`Feature.config`** → **`getFlag()`** (returns object for "multi-variate" flags)
+- **`Feature.track`** → **`track()`** (separate method)
+- **`Feature.requestFeedback`** → **`requestFeedback()`** (separate method)
+- **`Feature.isEnabledOverride`** → **`getFlagOverride()`** (separate method)
+- **`Feature.setIsEnabledOverride`** → **`setFlagOverride()`** (separate method)
+
+### Configuration changes
+
+- **`fallbackFeatures`** → **`fallbackFlags`**
+
+  ```typescript
+  // Old
+  const client = new ReflagClient({
+    publishableKey,
+    fallbackFeatures: ["flag1", "flag2"],
+  });
+
+  // New
+  const client = new ReflagClient({
+    publishableKey,
+    fallbackFlags={{
+      "flag1": true,
+      "flag2": { key: "variant-a", payload: { limit: 100 } }
+    }}
+  });
+  ```
+
+### Event hook changes
+
+- **`featuresUpdated`** → **`flagsUpdated`**
+- **`enabledCheck`** → **`check`** (use the unified `check` event instead)
+- **`configCheck`** → **`check`** (use the unified `check` event instead)
+
 ## License
 
 > MIT License

packages/browser-sdk/example/feedback/Feedback.jsx

@@ -32,7 +32,7 @@ export const FeedbackForm = () => {
 
   return (
     <form action="#" onSubmit={handleSubmit}>
-      <h2>How satisfied are you with our ExampleFeature?</h2>
+      <h2>How satisfied are you with our ExampleFlag?</h2>
 
       <fieldset>
         <legend>Satisfaction</legend>