@bucketco/react-sdk - npm Package Compare versions

Comparing version 3.0.0-alpha.0 to 3.0.0-alpha.1

dist/src/index.d.ts

@@ -6,7 +6,9 @@ import { default as React, ReactNode } from 'react';
 }
-export type FeatureKey = keyof (keyof Features extends never ? Record<string, boolean> : Features);
+type MaterializedFeatures = keyof Features extends never ? Record<string, any> : Features;
+export type FeatureKey = keyof MaterializedFeatures;
+export type FeatureConfig<TKey extends FeatureKey> = MaterializedFeatures[TKey] extends boolean ? never : MaterializedFeatures[TKey];
 export type BucketProps = BucketContext & {
     publishableKey: string;
     featureOptions?: Omit<FeaturesOptions, "fallbackFeatures"> & {
-        fallbackFeatures?: FeatureKey[];
+        fallbackFeatures?: FeatureKey[] | Record<FeatureKey, any>;
     };
@@ -36,2 +38,16 @@ children?: ReactNode;
 export declare function BucketProvider({ children, user, company, otherContext, publishableKey, featureOptions, loadingComponent, featureList, newBucketClient, ...config }: BucketProps): React.JSX.Element;
+type RequestFeedbackOptions = Omit<RequestFeedbackData, "featureKey" | "featureId">;
+type Feature<TKey extends FeatureKey> = {
+    isEnabled: boolean;
+    isLoading: boolean;
+    config: {
+        key: string;
+        payload: FeatureConfig<TKey>;
+    } | {
+        key: undefined;
+        payload: undefined;
+    };
+    track: () => void;
+    requestFeedback: (opts: RequestFeedbackOptions) => void;
+};
 /**
@@ -42,20 +58,9 @@ * Returns the state of a given feature for the current context, e.g.
  * function HuddleButton() {
- *   const {isEnabled, track} = useFeature("huddle");
+ *   const {isEnabled, config: { payload }, track} = useFeature("huddle");
  *   if (isEnabled) {
- *    return <button onClick={() => track()}>Start Huddle</button>;
- *   }
+ *    return <button onClick={() => track()}>{payload?.buttonTitle ?? "Start Huddle"}</button>;
  * }
  * ```
  */
-export declare function useFeature(key: FeatureKey): {
-    isLoading: true;
-    isEnabled: boolean;
-    track: () => Promise<Response | undefined> | undefined;
-    requestFeedback: (opts: Omit<RequestFeedbackData, "featureKey" | "featureId">) => void | undefined;
-} | {
-    isLoading: false;
-    track: () => Promise<Response | undefined> | undefined;
-    requestFeedback: (opts: Omit<RequestFeedbackData, "featureKey" | "featureId">) => void | undefined;
-    readonly isEnabled: boolean;
-};
+export declare function useFeature<TKey extends FeatureKey>(key: TKey): Feature<TKey>;
 /**
@@ -152,2 +157,3 @@ * Returns a function to send an event when a user performs an action
 }) => Promise<void> | undefined;
+export {};
 //# sourceMappingURL=index.d.ts.map

package.json

 {
   "name": "@bucketco/react-sdk",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.1",
   "license": "MIT",
@@ -37,4 +37,5 @@ "repository": {
   "dependencies": {
-    "@bucketco/browser-sdk": "3.0.0-alpha.0",
-    "canonical-json": "^0.0.4"
+    "@bucketco/browser-sdk": "3.0.0-alpha.1",
+    "canonical-json": "^0.0.4",
+    "rollup": "^4.2.0"
   },
@@ -50,3 +51,3 @@ "peerDependencies": {
     "@types/jsdom": "^21.1.6",
-    "@types/node": "^20.14.0",
+    "@types/node": "^22.12.0",
     "@types/react": "^18.3.2",
@@ -63,3 +64,3 @@ "@types/react-dom": "^18.3.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.5",
+    "typescript": "^5.7.3",
     "vite": "^5.0.13",
@@ -71,3 +72,3 @@ "vite-plugin-dts": "^4.0.0-beta.1",
   },
-  "gitHead": "a4a7bfd8839346cf057d7f06ecb52c0fe35f100f"
+  "gitHead": "78ba5739acaf63cc20f54f462b81635cd7057b5c"
 }

README.md

@@ -32,2 +32,6 @@ # Bucket React SDK
     recordVideo: boolean;
+    questionnaire?: {
+      showAll: boolean;
+      time: 600000;
+    };
   }
@@ -68,3 +72,3 @@ }
   function LoadingBucket({ children }) {
-    const {isLoading} = useFeature("myFeature")
+    const { isLoading } = useFeature("myFeature")
     if (isLoading) {
@@ -87,2 +91,58 @@ return <Spinner />
 
+## Feature toggles
+
+Bucket determines which features are active for a given `user`/`company`. The `user`/`company` are given in the `BucketProvider` as props.
+
+If you supply `user` or `company` objects, they must include at least the `id` property otherwise they will be ignored in their entirety.
+In addition to the `id`, you must also supply anything additional that you want to be able to evaluate feature targeting rules against.
+The additional attributes are supplied using the `otherContext` prop.
+
+Attributes cannot be nested (multiple levels) and must be either strings, integers or booleans.
+
+- `name` is a special attribute and is used to display name for user/company
+- for `user`, `email` is also special and will be highlighted in the Bucket UI if available
+
+```tsx
+ <BucketProvider
+    publishableKey={YOUR_PUBLISHABLE_KEY}
+    user={{ id: "user_123", name: "John Doe", email: "[e-mail]" }}
+    company={{ id: "company_123", name: "Acme, Inc" }}
+    otherContext={{ completedSteps: [1, 4, 7] }}
+  >
+    <LoadingBucket>
+    {/* children here are shown when loading finishes */}
+    </LoadingBucket>
+  <BucketProvider>
+```
+
+To retrieve features along with their targeting information, use `useFeature(key: string)` hook (described in a section below).
+
+Note that accessing `isEnabled` on the object returned by `useFeature()` automatically
+generates a `check` event.
+
+## Remote config
+
+Similar to `isEnabled`, each feature accessed using `useFeature()` hook, has a `config` property. This configuration
+is managed from within Bucket. It is managed similar to the way access to features is managed, but instead of the
+binary `isEnabled` you can have multiple configuration values which are given to different user/companies.
+
+```ts
+const {
+  isEnabled,
+  config: { key, payload },
+} = useFeature("huddles");
+
+// isEnabled: true,
+// key: "gpt-3.5",
+// payload: { maxTokens: 10000, model: "gpt-3.5-beta1" }
+```
+
+The `key` is always present while the `payload` is a optional JSON value for arbitrary configuration needs.
+If feature has no configuration or, no configuration value was matched against the context, the `config` object
+will be empty, thus, `key` will be `undefined`. Make sure to check against this case when trying to use the
+configuration in your application.
+
+Note that, similar to `isEnabled`, accessing `config` on the object returned by `useFeature()` automatically
+generates a `check` event.
+
 ## Hooks
@@ -98,3 +158,9 @@
 function StartHuddleButton() {
-  const { isLoading, isEnabled, track, requestFeedback } = useFeature("huddle");
+  const {
+    isLoading,
+    isEnabled,
+    config: { key, payload },
+    track,
+    requestFeedback,
+  } = useFeature("huddle");
 
@@ -115,3 +181,3 @@ if (isLoading) {
           requestFeedback({
-            title: "How do you like Huddles?",
+            title: payload?.question ?? "How do you like Huddles?",
             position: {
@@ -194,3 +260,3 @@ type: "POPOVER",
   score: 5,
-  comment: "Best thing I"ve ever tried!",
+  comment: "Best thing I've ever tried!",
 });
@@ -230,2 +296,2 @@ ```
 
-Copyright (c) 2024 Bucket ApS
+Copyright (c) 2025 Bucket ApS

No alert changes

Improved metrics

Total package byte prevSize

869116

increased by1.64%

Lines of code

4875

increased by0.89%

Number of lines in readme file

291

increased by29.33%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedrollup@^4.2.0

• + Added@bucketco/browser-sdk@3.0.0-alpha.1(transitive)

• + Added@rollup/rollup-android-arm-eabi@4.34.6(transitive)

• + Added@rollup/rollup-android-arm64@4.34.6(transitive)

• + Added@rollup/rollup-darwin-arm64@4.34.6(transitive)

• + Added@rollup/rollup-darwin-x64@4.34.6(transitive)

• + Added@rollup/rollup-freebsd-arm64@4.34.6(transitive)

• + Added@rollup/rollup-freebsd-x64@4.34.6(transitive)

• + Added@rollup/rollup-linux-arm-gnueabihf@4.34.6(transitive)

• + Added@rollup/rollup-linux-arm-musleabihf@4.34.6(transitive)

• + Added@rollup/rollup-linux-arm64-gnu@4.34.6(transitive)

• + Added@rollup/rollup-linux-arm64-musl@4.34.6(transitive)

• + Added@rollup/rollup-linux-loongarch64-gnu@4.34.6(transitive)

• + Added@rollup/rollup-linux-powerpc64le-gnu@4.34.6(transitive)

• + Added@rollup/rollup-linux-riscv64-gnu@4.34.6(transitive)

• + Added@rollup/rollup-linux-s390x-gnu@4.34.6(transitive)

• + Added@rollup/rollup-linux-x64-gnu@4.34.6(transitive)

• + Added@rollup/rollup-linux-x64-musl@4.34.6(transitive)

• + Added@rollup/rollup-win32-arm64-msvc@4.34.6(transitive)

• + Added@rollup/rollup-win32-ia32-msvc@4.34.6(transitive)

• + Added@rollup/rollup-win32-x64-msvc@4.34.6(transitive)

• + Added@types/estree@1.0.6(transitive)

• + Addedfsevents@2.3.3(transitive)

• + Addedrollup@4.34.6(transitive)

• - Removed@bucketco/browser-sdk@3.0.0-alpha.0(transitive)

• Updated@bucketco/browser-sdk@3.0.0-alpha.1