diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index bf50c87b..547a187e 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -17,7 +17,7 @@ jobs: cache: "yarn" cache-dependency-path: "**/yarn.lock" registry-url: "https://registry.npmjs.org" - scope: "@bucketco" + scope: "@reflag" - name: Install dependencies run: yarn install --immutable - name: Build packages @@ -25,7 +25,7 @@ jobs: - name: npm login run: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc env: - NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + NPM_TOKEN: ${{ secrets.REFLAG_NPM_TOKEN }} - name: Publish run: yarn lerna publish from-package --no-private --yes - name: Build docs @@ -38,12 +38,12 @@ jobs: path: bucket-docs - name: Copy generated docs to docs repo run: | - rm -rf bucket-docs/sdk - cp -R dist/docs bucket-docs/sdk + rm -rf reflag-docs/sdk + cp -R dist/docs reflag-docs/sdk - name: Commit and push changes run: | - cd bucket-docs + cd reflag-docs git config user.name "github-actions[bot]" - git config user.email "github-actions[bot]@bucket.co" + git config user.email "github-actions[bot]@reflag.com" git add sdk git commit -m "Update documentation" && git push || echo "No docs changes to commit" diff --git a/.gitignore b/.gitignore index 9b388fbb..abc48840 100644 --- a/.gitignore +++ b/.gitignore @@ -41,4 +41,4 @@ junit.xml .next eslint-report.json -bucket.config.json +reflag.config.json diff --git a/.vscode/settings.json b/.vscode/settings.json index 28999edc..e8db783d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -43,6 +43,7 @@ "booleanish", "bucketco", "openfeature", - "PKCE" + "PKCE", + "Reflag" ] } diff --git a/README.md b/README.md index 79c23088..d6485d56 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# Bucket +# Reflag -Feature flags for SaaS that run on TypeScript. [Learn more and get started](https://bucket.co/) +Feature flags for SaaS that run on TypeScript. [Learn more and get started](https://reflag.com/) ## React SDK @@ -27,21 +27,21 @@ Use this for Cloudflare Workers as well. [Read the docs](packages/node-sdk/README.md) -## Bucket CLI +## Reflag CLI -CLI to interact with Bucket and generate types +CLI to interact with Reflag and generate types [Read the docs](packages/cli/README.md) ## OpenFeature Browser Provider -Use Bucket with OpenFeature in the browser through the Bucket OpenFeature Browser Provider +Use Reflag with OpenFeature in the browser through the Reflag OpenFeature Browser Provider [Read the docs](packages/openfeature-browser-provider/README.md) ## OpenFeature Node.js Provider -Use the Bucket with OpenFeature on the server in Node.js through the Bucket OpenFeature Node.js Provider +Use the Reflag with OpenFeature on the server in Node.js through the Reflag OpenFeature Node.js Provider [Read the docs](packages/openfeature-node-provider/README.md) diff --git a/docs.sh b/docs.sh index 9f1b15a9..9b57fa72 100755 --- a/docs.sh +++ b/docs.sh @@ -16,7 +16,7 @@ typedoc --treatWarningsAsErrors SEDCOMMAND='s/globals.md#(.*)-[0-9]+/globals.md#\1/g' # Find all markdown files including globals.md -FILES=$(find dist/docs/@bucketco -name "*.md") +FILES=$(find dist/docs/@reflag -name "*.md") echo "Processing markdown files..." for file in $FILES diff --git a/packages/browser-sdk/FEEDBACK.md b/packages/browser-sdk/FEEDBACK.md index 6dcdc80f..22070332 100644 --- a/packages/browser-sdk/FEEDBACK.md +++ b/packages/browser-sdk/FEEDBACK.md @@ -1,21 +1,21 @@ -# Bucket Feedback UI +# Reflag Feedback UI -The Bucket Browser SDK includes a UI you can use to collect feedback from user -about particular features. +The Reflag Browser SDK includes a UI you can use to collect feedback from user +about particular flags. -![image](https://github.com/bucketco/bucket-javascript-sdk/assets/34348/c387bac1-f2e2-4efd-9dda-5030d76f9532) +![image](https://github.com/reflagcom/javascript/assets/34348/c387bac1-f2e2-4efd-9dda-5030d76f9532) ## Global feedback configuration -The Bucket Browser SDK feedback UI is configured with reasonable defaults, +The Reflag Browser SDK feedback UI is configured with reasonable defaults, positioning itself as a [dialog](#dialog) in the lower right-hand corner of the viewport, displayed in English, and with a [light-mode theme](#custom-styling). -These settings can be overwritten when initializing the Bucket Browser SDK: +These settings can be overwritten when initializing the Reflag Browser SDK: ```typescript -const bucket = new BucketClient({ - publishableKey: "bucket-publishable-key", +const reflag = new ReflagClient({ + publishableKey: "reflag-publishable-key", user: { id: "42" }, feedback: { ui: { @@ -47,23 +47,23 @@ See also: Automated feedback surveys are enabled by default. -When automated feedback surveys are enabled, the Bucket Browser SDK -will open and maintain a connection to the Bucket service. When a user -triggers an event tracked by a feature and is eligible to be prompted -for feedback, the Bucket service will send a request to the SDK instance. -By default, this request will open up the Bucket feedback UI in the user's +When automated feedback surveys are enabled, the Reflag Browser SDK +will open and maintain a connection to the Reflag service. When a user +triggers an event tracked by a flag and is eligible to be prompted +for feedback, the Reflag service will send a request to the SDK instance. +By default, this request will open up the Reflag feedback UI in the user's browser, but you can intercept the request and override this behavior. The live connection for automated feedback is established when the -`BucketClient` is initialized. +`ReflagClient` is initialized. ### Disabling automated feedback surveys -You can disable automated collection in the `BucketClient` constructor: +You can disable automated collection in the `ReflagClient` constructor: ```typescript -const bucket = new BucketClient({ - publishableKey: "bucket-publishable-key", +const reflag = new ReflagClient({ + publishableKey: "reflag-publishable-key", user: { id: "42" }, feedback: { enableAutoFeedback: false, @@ -78,8 +78,8 @@ event arrives, you can can [override the global defaults](#global-feedback-confi or intercept and override settings at runtime like this: ```javascript -const bucket = new BucketClient({ - publishableKey: "bucket-publishable-key", +const reflag = new ReflagClient({ + publishableKey: "reflag-publishable-key", user: { id: "42" }, feedback: { autoFeedbackHandler: (promptMessage, handlers) => { @@ -114,23 +114,23 @@ See also: ## Manual feedback collection -To open up the feedback collection UI, call `bucketClient.requestFeedback(options)` +To open up the feedback collection UI, call `reflagClient.requestFeedback(options)` with the appropriate options. This approach is particularly beneficial if you wish to retain manual control over feedback collection from your users while leveraging -the convenience of the Bucket feedback UI to reduce the amount of code you need +the convenience of the Reflag feedback UI to reduce the amount of code you need to maintain. Examples of this could be if you want the click of a `give us feedback`-button or the end of a specific user flow, to trigger a pop-up displaying the feedback user interface. -### bucketClient.requestFeedback() options +### reflagClient.requestFeedback() options Minimal usage with defaults: ```javascript -bucketClient.requestFeedback({ - featureKey: "bucket-feature-key", +reflagClient.requestFeedback({ + flagKey: "reflag-flag-key", title: "How satisfied are you with file uploads?", }); ``` @@ -138,8 +138,8 @@ bucketClient.requestFeedback({ All options: ```javascript -bucketClient.requestFeedback({ - featureKey: "bucket-feature-key", // [Required] +reflagClient.requestFeedback({ + flagKey: "reflag-flag-key", // [Required] userId: "your-user-id", // [Optional] if user persistence is // enabled (default in browsers), companyId: "users-company-or-account-id", // [Optional] @@ -178,7 +178,7 @@ page. It can be dismissed with the keyboard shortcut `` or the dedicated close button in the top right corner. It is always centered on the page, capturing focus, and making it the primary interface the user needs to interact with. -![image](https://github.com/bucketco/bucket-tracking-sdk/assets/331790/6c6efbd3-cf7d-4d5b-b126-7ac978b2e512) +![image](https://github.com/reflagcom/javascript/assets/331790/6c6efbd3-cf7d-4d5b-b126-7ac978b2e512) Using a modal is the strongest possible push for feedback. You are interrupting the user's normal flow, which can cause annoyance. A good use-case for the modal is @@ -198,11 +198,11 @@ user's interaction with the rest of the page. It can be dismissed with the dedic close button, but will automatically disappear after a short time period if the user does not interact with it. -![image](https://github.com/bucketco/bucket-tracking-sdk/assets/331790/30413513-fd5f-4a2c-852a-9b074fa4666c) +![image](https://github.com/reflagcom/javascript/assets/331790/30413513-fd5f-4a2c-852a-9b074fa4666c) Using a dialog is a soft push for feedback. It lets the user continue their work with a minimal amount of intrusion. The user can opt-in to respond but is not -required to. A good use case for this behavior is when a user uses a feature where +required to. A good use case for this behavior is when a user uses a flag where the expected outcome is predictable, possibly because they have used it multiple times before. For example: Uploading a file, switching to a different view of a visualization, visiting a specific page, or manipulating some data. @@ -226,7 +226,7 @@ position: { A popover that is anchored relative to a DOM-element (typically a button). It can be dismissed by clicking outside the popover or by pressing the dedicated close button. -![image](https://github.com/bucketco/bucket-tracking-sdk/assets/331790/4c5c5597-9ed3-4d4d-90c0-950926d0d967) +![image](https://github.com/reflagcom/javascript/assets/331790/4c5c5597-9ed3-4d4d-90c0-950926d0d967) You can use the popover mode to implement your own button to collect feedback manually. @@ -244,8 +244,8 @@ Popover feedback button example: + + Reflag feedback collection + - - + ``` -If using Nuxt, wrap `` in ``. `` only renders client-side currently. +If using Nuxt, wrap `` in ``. `` only renders client-side currently. -### 2. Use `useFeature(key)` to get feature status +### 2. Use `useFlag get flag status ```vue ``` -See [useFeature()](#usefeature) for a full example +See [useFlag()](#useflag) for a full example ## Setting `user` and `company` -Bucket determines which features are active for a given `user`, `company`, or `otherContext`. -You pass these to the `BucketProvider` as props. +Reflag determines which flags are active for a given `user`, `company`, or `otherContext`. +You pass these to the `ReflagProvider` 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. +In addition to the `id`, you must also supply anything additional that you want to be able to evaluate flag targeting rules against. Attributes which are not properties of the `user` or `company` can be supplied using the `otherContext` prop. Attributes cannot be nested (multiple levels) and must be either strings, numbers or booleans. @@ -69,25 +95,25 @@ A number of special attributes exist: - `avatar` -- the URL for `user`/`company` avatar image. ```vue - - + ``` -To retrieve features along with their targeting information, use `useFeature(key: string)` hook (described in a section below). +To retrieve flags along with their targeting information, use `useFlag(key: string)` hook (described in a section below). -Note that accessing `isEnabled` on the object returned by `useFeature()` automatically +Note that accessing `isEnabled` on the object returned by `useFlag()` automatically generates a `check` event. ## Remote config -Remote config is a dynamic and flexible approach to configuring feature behavior outside of your app – without needing to re-deploy it. +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 feature accessed using the `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 +Similar to `isEnabled`, each flag accessed using the `useFlag()` hook, 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. ### Get started with Remote config @@ -96,75 +122,75 @@ binary `isEnabled` you can have multiple configuration values which are given to const { isEnabled, config: { key, payload }, -} = useFeature("huddles"); +} = useFlag("huddles"); // isEnabled: true, // key: "gpt-3.5", // payload: { maxTokens: 10000, model: "gpt-3.5-beta1" } ``` -`key` is mandatory for a config, but if a feature 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. +`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. -Note that, similar to `isEnabled`, accessing `config` on the object returned by `useFeature()` automatically +Note that, similar to `isEnabled`, accessing `config` on the object returned by `useFlag()` automatically generates a `check` event. -## `` component +## `` component -The `` initializes the Bucket SDK, fetches features and starts listening for automated feedback survey events. The component can be configured using a number of props: +The `` initializes the Reflag SDK, fetches flags and starts listening for automated feedback survey events. The component can be configured using a number of props: -- `publishableKey` is used to connect the provider to an _environment_ on Bucket. Find your `publishableKey` under [environment settings](https://app.bucket.co/env-current/settings/app-environments) in Bucket, -- `company`, `user` and `otherContext` make up the _context_ that is used to determine if a feature is enabled or not. `company` and `user` contexts are automatically transmitted to Bucket servers so the Bucket app can show you which companies have access to which features etc. +- `publishableKey` is used to connect the provider to an _environment_ on Reflag. Find your `publishableKey` under [environment settings](https://app.reflag.com/env-current/settings/app-environments) in Reflag, +- `company`, `user` and `otherContext` make up the _context_ that is used to determine if a flag is enabled or not. `company` and `user` contexts are automatically transmitted to Reflag servers so the Reflag app can show you which companies have access to which flags etc. > [!Note] - > If you specify `company` and/or `user` they must have at least the `id` property, otherwise they will be ignored in their entirety. You should also supply anything additional you want to be able to evaluate feature targeting against, + > If you specify `company` and/or `user` they must have at least the `id` property, otherwise they will be ignored in their entirety. You should also supply anything additional you want to be able to evaluate flag targeting against, -- `timeoutMs`: Timeout in milliseconds when fetching features from the server, -- `staleWhileRevalidate`: If set to `true`, stale features will be returned while refetching features in the background, -- `expireTimeMs`: If set, features will be cached between page loads for this duration (in milliseconds), -- `staleTimeMs`: Maximum time (in milliseconds) that stale features will be returned if `staleWhileRevalidate` is true and new features cannot be fetched. +- `timeoutMs`: Timeout in milliseconds when fetching flags from the server, +- `staleWhileRevalidate`: If set to `true`, stale flags will be returned while refetching flags in the background, +- `expireTimeMs`: If set, flags will be cached between page loads for this duration (in milliseconds), +- `staleTimeMs`: Maximum time (in milliseconds) that stale flags will be returned if `staleWhileRevalidate` is true and new flags cannot be fetched. -- `enableTracking`: Set to `false` to stop sending tracking events and user/company updates to Bucket. Useful when you're impersonating a user (defaults to `true`), -- `apiBaseUrl`: Optional base URL for the Bucket API. Use this to override the default API endpoint, -- `appBaseUrl`: Optional base URL for the Bucket application. Use this to override the default app URL, +- `enableTracking`: Set to `false` to stop sending tracking events and user/company updates to Reflag. Useful when you're impersonating a user (defaults to `true`), +- `apiBaseUrl`: Optional base URL for the Reflag API. Use this to override the default API endpoint, +- `appBaseUrl`: Optional base URL for the Reflag application. Use this to override the default app URL, - `sseBaseUrl`: Optional base URL for Server-Sent Events. Use this to override the default SSE endpoint, - `debug`: Set to `true` to enable debug logging to the console, -- `toolbar`: Optional [configuration](https://docs.bucket.co/supported-languages/browser-sdk/globals#toolbaroptions) for the Bucket toolbar, +- `toolbar`: Optional [configuration](https://docs.reflag.com/supported-languages/browser-sdk/globals#toolbaroptions) for the Reflag toolbar, - `feedback`: Optional configuration for feedback collection ### Loading states -BucketProvider lets you define a template to be shown while BucketProvider is inititalizing: +ReflagProvider lets you define a template to be shown while ReflagProvider is initializing: ```vue ``` -If you want more control over loading screens, `useIsLoading()` returns a Ref which you can use to customize the loading experience. +If you want more control over loading screens, `useIsLoading()` returns a `Ref` which you can use to customize the loading experience. ## Hooks -### `useFeature()` +### `useFlag()` -Returns the state of a given feature for the current context. The composable provides access to feature flags and their configurations. +Returns the state of a given flag for the current context. The composable provides access to flags and their configurations. -`useFeature()` returns an object with this shape: +`useFlag()` returns an object with this shape: ```ts { - isEnabled: boolean, // is the feature enabled - track: () => void, // send a track event when the feature is used + isEnabled: boolean, // is the flag enabled + track: () => void, // send a track event when the flag is used requestFeedback: (...) => void // open up a feedback dialog - config: {key: string, payload: any}, // remote configuration for this feature - isLoading: boolean // if you want to manage loading state at the feature level + config: {key: string, payload: any}, // remote configuration for this flag + isLoading: boolean // if you want to manage loading state at the flag level } ``` @@ -172,14 +198,14 @@ Example: ```vue ``` -See the [Feedback Documentation](https://github.com/bucketco/bucket-javascript-sdk/blob/main/packages/browser-sdk/FEEDBACK.md#manual-feedback-collection) for more information on `requestFeedback` options. +See the [Feedback Documentation](https://github.com/reflagcom/javascript/blob/main/packages/browser-sdk/FEEDBACK.md#manual-feedback-collection) for more information on `requestFeedback` options. ### `useSendFeedback()` -Returns a function that lets you send feedback to Bucket. This is useful if you've manually collected feedback through your own UI and want to send it to Bucket. +Returns a function that lets you send feedback to Reflag. This is useful if you've manually collected feedback through your own UI and want to send it to Reflag. ```vue @@ -369,11 +395,11 @@ onMounted(() => { ### `useIsLoading()` -Returns a `Ref` to indicate if Bucket has finished loading. +Returns a `Ref` to indicate if Reflag has finished loading. ## Content Security Policy (CSP) -See [CSP](https://github.com/bucketco/bucket-javascript-sdk/blob/main/packages/browser-sdk/README.md#content-security-policy-csp) for info on using Bucket React SDK with CSP +See [CSP](https://github.com/reflagcom/javascript/blob/main/packages/browser-sdk/README.md#content-security-policy-csp) for info on using Reflag React SDK with CSP ## License diff --git a/packages/vue-sdk/dev/plain/App.vue b/packages/vue-sdk/dev/plain/App.vue index e535c509..009d60d4 100644 --- a/packages/vue-sdk/dev/plain/App.vue +++ b/packages/vue-sdk/dev/plain/App.vue @@ -1,7 +1,7 @@ diff --git a/packages/vue-sdk/dev/plain/components/MissingKeyMessage.vue b/packages/vue-sdk/dev/plain/components/MissingKeyMessage.vue index 96e9b429..72a74283 100644 --- a/packages/vue-sdk/dev/plain/components/MissingKeyMessage.vue +++ b/packages/vue-sdk/dev/plain/components/MissingKeyMessage.vue @@ -12,7 +12,7 @@

Missing Publishable Key

The VITE_PUBLISHABLE_KEY environment variable is not set. - Please set this variable in your .env file to use the Bucket + Please set this variable in your .env file to use the Reflag SDK.

diff --git a/packages/vue-sdk/dev/plain/components/RequestFeedback.vue b/packages/vue-sdk/dev/plain/components/RequestFeedback.vue index 80b37c5b..a2bf5d21 100644 --- a/packages/vue-sdk/dev/plain/components/RequestFeedback.vue +++ b/packages/vue-sdk/dev/plain/components/RequestFeedback.vue @@ -13,7 +13,7 @@ const requestFeedback = useRequestFeedback(); @click=" (e) => requestFeedback({ - featureKey: 'demo-feature', + flagKey: 'demo-feature', title: 'How satisfied are you with this feature?', position: { type: 'POPOVER', @@ -28,7 +28,7 @@ const requestFeedback = useRequestFeedback();