Merge branch 'main' into dependabot/npm_and_yarn/packages/openfeature-browser-provider/example/next-14.2.25

Author: pavkam

.github/workflows/publish.yml

@@ -4,7 +4,6 @@ on:
   push:
     branches:
       - main
-      - v*
 
 jobs:
   release:

README.md

@@ -1,15 +1,19 @@
 # Bucket
 
-Bucket is B2B feature flagging with a built-in feedback loop that lets you roll out features based on customer satisfaction.
-
-[Learn more and get started](https://bucket.co/)
+Feature flags for SaaS that run on TypeScript. [Learn more and get started](https://bucket.co/)
 
 ## React SDK
 
 Client side React SDK
 
 [Read the docs](packages/react-sdk/README.md)
 
+## Vue SDK (beta)
+
+Client side Vue SDK
+
+[Read the docs](packages/vue-sdk/README.md)
+
 ## Browser SDK
 
 Browser SDK for use in non-React web applications

packages/browser-sdk/README.md

@@ -174,7 +174,7 @@ 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 (beta)
+## Remote config
 
 Remote config is a dynamic and flexible approach to configuring feature behavior outside of your app – without needing to re-deploy it.
 
@@ -201,16 +201,6 @@ const features = bucketClient.getFeatures();
 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`.
 
-## Tracking feature usage
-
-The `track` function lets you send events to Bucket to denote feature usage.
-By default Bucket expects event names to align with the feature keys, but
-you can customize it as you wish.
-
-```ts
-bucketClient.track("huddle", { voiceHuddle: true });
-```
-
 ## Updating user/company/other context
 
 Attributes given for the user/company/other context in the BucketClient constructor can be updated for use in feature targeting evaluation with the `updateUser()`, `updateCompany()` and `updateOtherContext()` methods.
@@ -228,7 +218,43 @@ await bucketClient.updateUser({ voiceHuddleOptIn: (!isEnabled).toString() });
 
 > [!NOTE] > `user`/`company` attributes are also stored remotely on the Bucket servers and will automatically be used to evaluate feature targeting if the page is refreshed.
 
-## Qualitative feedback
+## Toolbar
+
+The Bucket Toolbar is great for toggling features on/off for yourself to ensure that everything works both when a feature is on and when it's off.
+
+<img width="352" alt="Toolbar screenshot" src="https://github.com/user-attachments/assets/c223df5a-4bd8-49a1-8b4a-ad7001357693" />
+
+The toolbar will automatically appear on `localhost`. However, it can also be incredibly useful in production.
+You have full control over when it appears through the `toolbar` configuration option passed to the `BucketClient`.
+
+You can pass a simple boolean to force the toolbar to appear/disappear:
+
+```typescript
+const client = new BucketClient({
+  // show the toolbar even in production if the user is an internal/admin user
+  toolbar: user?.isInternal,
+  ...
+});
+```
+
+You can also configure the position of the toolbar on the screen:
+
+```typescript
+const client = new BucketClient({
+  toolbar: {
+    show: true;
+    position: {
+      placement: "bottom-left",
+      offset: {x: "1rem", y: "1rem"}
+    }
+  }
+  ...
+})
+```
+
+See [the reference](https://docs.bucket.co/supported-languages/browser-sdk/globals#toolbaroptions) for details.
+
+## Qualitative feedback on beta features
 
 Bucket can collect qualitative feedback from your users in the form of a [Customer Satisfaction Score](https://en.wikipedia.org/wiki/Customer_satisfaction) and a comment.
 
@@ -248,8 +274,6 @@ You can find all the options to make changes to the default behavior in the [Buc
 
 Bucket can assist you with collecting your user's feedback by offering a pre-built UI, allowing you to get started with minimal code and effort.
 
-![image](https://github.com/bucketco/bucket-javascript-sdk/assets/34348/c387bac1-f2e2-4efd-9dda-5030d76f9532)
-
 [Read the Bucket feedback UI documentation](./FEEDBACK.md)
 
 ### Bucket feedback SDK
@@ -270,42 +294,16 @@ If you are not using the Bucket Browser SDK, you can still submit feedback using
 
 See details in [Feedback HTTP API](https://docs.bucket.co/reference/http-tracking-api#feedback)
 
-## Toolbar
-
-The Bucket Toolbar is great for toggling features on/off for yourself to ensure that everything works both when a feature is on and when it's off.
-
-<img width="352" alt="Toolbar screenshot" src="https://github.com/user-attachments/assets/c223df5a-4bd8-49a1-8b4a-ad7001357693" />
-
-The toolbar will automatically appear on `localhost`. However, it can also be incredibly useful in production.
-You have full control over when it appears through the `toolbar` configuration option passed to the `BucketClient`.
-
-You can pass a simple boolean to force the toolbar to appear/disappear:
-
-```typescript
-const client = new BucketClient({
-  // show the toolbar even in production if the user is an internal/admin user
-  toolbar: user?.isInternal,
-  ...
-});
-```
+## Tracking feature usage
 
-You can also configure the position of the toolbar on the screen:
+The `track` function lets you send events to Bucket to denote feature usage.
+By default Bucket expects event names to align with the feature keys, but
+you can customize it as you wish.
 
-```typescript
-const client = new BucketClient({
-  toolbar: {
-    show: true;
-    position: {
-      placement: "bottom-left",
-      offset: {x: "1rem", y: "1rem"}
-    }
-  }
-  ...
-})
+```ts
+bucketClient.track("huddle", { voiceHuddle: true });
 ```
 
-See [the reference](https://docs.bucket.co/supported-languages/browser-sdk/globals#toolbaroptions) for details.
-
 ## Event listeners
 
 Event listeners allow for capturing various events occurring in the `BucketClient`. This is useful to build integrations with other system or for various debugging purposes. There are 5 kinds of events:

packages/browser-sdk/eslint.config.js

@@ -1,10 +1,16 @@
 const base = require("@bucketco/eslint-config");
+const preactConfig = require("eslint-config-preact");
+
+const compatPlugin = require("eslint-plugin-compat");
+const reactPlugin = require("eslint-plugin-react");
+const reactHooksPlugin = require("eslint-plugin-react-hooks");
 
 module.exports = [
   ...base,
   {
     // Preact projects
-    files: ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"],
+    files: ["**/*.tsx"],
+
     settings: {
       react: {
         // We only care about marking h() as being a used variable.
@@ -13,10 +19,18 @@ module.exports = [
         version: "16.0",
       },
     },
+    plugins: {
+      compat: compatPlugin,
+      react: reactPlugin,
+      "react-hooks": reactHooksPlugin,
+    },
     rules: {
+      ...preactConfig.rules,
       // Ignore React attributes that are not valid in Preact.
       // Alternatively, we could use the preact/compat alias or turn off the rule.
       "react/no-unknown-property": ["off"],
+      "no-unused-vars": ["off"],
+      "react/no-danger": ["off"],
     },
   },
   { ignores: ["dist/", "example/"] },

packages/browser-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bucketco/browser-sdk",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "packageManager": "yarn@4.1.1",
   "license": "MIT",
   "repository": {
@@ -50,6 +50,7 @@
     "@vitest/coverage-v8": "^2.0.4",
     "c8": "~10.1.3",
     "eslint": "^9.21.0",
+    "eslint-config-preact": "^1.5.0",
     "http-server": "^14.1.1",
     "jsdom": "^24.1.0",
     "msw": "^2.3.4",

packages/browser-sdk/src/client.ts

@@ -319,6 +319,7 @@ export type FeatureRemoteConfig =
 export interface Feature {
   /**
    * Result of feature flag evaluation.
+   * Note: Does not take local overrides into account.
    */
   isEnabled: boolean;
 
@@ -338,6 +339,17 @@ export interface Feature {
   requestFeedback: (
     options: Omit<RequestFeedbackData, "featureKey" | "featureId">,
   ) => void;
+
+  /**
+   * The current override status of isEnabled for the feature.
+   */
+  isEnabledOverride: boolean | null;
+
+  /**
+   * Set the override status for isEnabled for the feature.
+   * Set to `null` to remove the override.
+   */
+  setIsEnabledOverride(isEnabled: boolean | null): void;
 }
 
 function shouldShowToolbar(opts: InitOptions) {
@@ -778,23 +790,13 @@ export class BucketClient {
           ...options,
         });
       },
+      isEnabledOverride: this.featuresClient.getFeatureOverride(key),
+      setIsEnabledOverride(isEnabled: boolean | null) {
+        self.featuresClient.setFeatureOverride(key, isEnabled);
+      },
     };
   }
 
-  /**
-   * @internal
-   */
-  setFeatureOverride(key: string, isEnabled: boolean | null) {
-    this.featuresClient.setFeatureOverride(key, isEnabled);
-  }
-
-  /**
-   * @internal
-   */
-  getFeatureOverride(key: string): boolean | null {
-    return this.featuresClient.getFeatureOverride(key);
-  }
-
   private sendCheckEvent(checkEvent: CheckEvent) {
     return this.featuresClient.sendCheckEvent(checkEvent, () => {
       this.hooks.trigger(

packages/browser-sdk/src/feedback/ui/FeedbackForm.tsx

@@ -90,8 +90,7 @@ export const FeedbackForm: FunctionComponent<FeedbackFormProps> = ({
     if (headerRef.current === null) return;
     if (expandedContentRef.current === null) return;
 
-    containerRef.current.style.maxHeight =
-      headerRef.current.clientHeight + "px";
+    containerRef.current.style.maxHeight = `${headerRef.current.clientHeight}px`;
 
     expandedContentRef.current.style.position = "absolute";
     expandedContentRef.current.style.opacity = "0";
@@ -103,11 +102,11 @@ export const FeedbackForm: FunctionComponent<FeedbackFormProps> = ({
     if (headerRef.current === null) return;
     if (expandedContentRef.current === null) return;
 
-    containerRef.current.style.maxHeight =
+    containerRef.current.style.maxHeight = `${
       headerRef.current.clientHeight + // Header height
       expandedContentRef.current.clientHeight + // Comment + Button Height
-      10 + // Gap height
-      "px";
+      10 // Gap height
+    }px`;
 
     expandedContentRef.current.style.position = "relative";
     expandedContentRef.current.style.opacity = "1";
@@ -121,8 +120,7 @@ export const FeedbackForm: FunctionComponent<FeedbackFormProps> = ({
 
     formRef.current.style.opacity = "0";
     formRef.current.style.pointerEvents = "none";
-    containerRef.current.style.maxHeight =
-      submittedRef.current.clientHeight + "px";
+    containerRef.current.style.maxHeight = `${submittedRef.current.clientHeight}px`;
 
     // Fade in "submitted" step once container has resized
     setTimeout(() => {

packages/browser-sdk/src/feedback/ui/StarRating.tsx

@@ -52,7 +52,7 @@ const scores = [
   },
 ] as const;
 
-type Score = (typeof scores)[number];
+type ScoreNumber = (typeof scores)[number];
 
 export type StarRatingProps = {
   name: string;
@@ -118,7 +118,7 @@ const Score = ({
   isSelected: boolean;
   name: string;
   onChange?: h.JSX.GenericEventHandler<HTMLInputElement>;
-  score: Score;
+  score: ScoreNumber;
   t: FeedbackTranslations;
 }) => {
   const arrowRef = useRef<HTMLDivElement>(null);

packages/browser-sdk/src/toolbar/Features.css

@@ -97,8 +97,7 @@
 }
 
 .reset {
-  color: var(--brand300);
-
+  color: var(--gray500);
   text-decoration: none;
 
   &:hover,