@leancodepl/feature-flags-react-client 8.5.0 → 8.6.0

package/README.md

@@ -0,0 +1,82 @@
+# @leancodepl/feature-flags-react-client
+
+React hooks for type-safe feature flag management using OpenFeature.
+
+## Installation
+
+```bash
+npm install @leancodepl/feature-flags-react-client
+# or
+yarn add @leancodepl/feature-flags-react-client
+```
+
+## API
+
+### `mkFeatureFlags(flags, provider)`
+
+Creates React hooks for type-safe feature flag management using OpenFeature.
+
+**Parameters:**
+
+- `flags: TFlags` - Feature flags configuration object with default values
+- `provider: Provider` - OpenFeature provider instance
+
+**Returns:** Object containing `useFeatureFlag` hook and `FeatureFlagsProvider` component
+
+## Usage Examples
+
+### Basic Setup
+
+```typescript
+//featureFlags.ts
+import { mkFeatureFlags } from "@leancodepl/feature-flags-react-client"
+import { ConfigCatWebProvider } from "@openfeature/config-cat-web-provider"
+
+const flags = {
+    enableNewFeature: { defaultValue: false },
+    maxRetries: { defaultValue: 3 },
+}
+
+const provider = ConfigCatWebProvider.create("sdk-key")
+export const { FeatureFlagsProvider, useFeatureFlag } = mkFeatureFlags(flags, provider)
+```
+
+### Component Usage
+
+```typescript
+import React from 'react';
+import { FeatureFlagsProvider, useFeatureFlag } from './featureFlags';
+
+function App() {
+  return (
+    <FeatureFlagsProvider>
+      <Dashboard />
+    </FeatureFlagsProvider>
+  );
+}
+
+function Dashboard() {
+  const { value: isEnabled } = useFeatureFlag('enableNewFeature');
+  const { value: retries } = useFeatureFlag('maxRetries');
+
+  return (
+    <div>
+      {isEnabled ? <NewDashboard /> : <LegacyDashboard />}
+      <div>Max retries: {retries}</div>
+    </div>
+  );
+}
+```
+
+### With Default Override
+
+```typescript
+import React from 'react';
+import { useFeatureFlag } from './featureFlags';
+
+function Settings() {
+  const { value: retries } = useFeatureFlag('maxRetries', 5);
+
+  return <div>Retries: {retries}</div>;
+}
+```

package/index.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./index.cjs.js').default;

package/index.cjs.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var reactSdk = require('@openfeature/react-sdk');
+var webSdk = require('@openfeature/web-sdk');
+
+/**
+ * Creates React hooks for type-safe feature flag management using OpenFeature.
+ * 
+ * Sets up OpenFeature provider and returns typed hooks for feature flag evaluation.
+ * Provides React context provider and hook for accessing feature flags in components.
+ * 
+ * @param flags - Feature flags configuration object with default values
+ * @param provider - OpenFeature provider instance
+ * @returns Object containing `useFeatureFlag` hook and `FeatureFlagsProvider` component
+ * @example
+ * ```typescript
+ * const flags = { enableFeature: { defaultValue: false } };
+ * const provider = new ConfigCatWebProvider('sdk-key');
+ * const { useFeatureFlag, FeatureFlagsProvider } = mkFeatureFlags(flags, provider);
+ * ```
+ */ function mkFeatureFlags(flags, provider) {
+    webSdk.OpenFeature.setProvider(provider);
+    return {
+        useFeatureFlag: (key, defaultValue)=>reactSdk.useFlag(key.toString(), defaultValue != null ? defaultValue : flags[key].defaultValue),
+        FeatureFlagsProvider: reactSdk.OpenFeatureProvider
+    };
+}
+
+exports.mkFeatureFlags = mkFeatureFlags;

package/index.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './index.cjs.js';
+export { _default as default } from './index.cjs.default.js';

package/index.d.ts

@@ -0,0 +1 @@
+export * from "./src/index";

package/index.esm.js

@@ -0,0 +1,27 @@
+import { OpenFeatureProvider, useFlag } from '@openfeature/react-sdk';
+import { OpenFeature } from '@openfeature/web-sdk';
+
+/**
+ * Creates React hooks for type-safe feature flag management using OpenFeature.
+ * 
+ * Sets up OpenFeature provider and returns typed hooks for feature flag evaluation.
+ * Provides React context provider and hook for accessing feature flags in components.
+ * 
+ * @param flags - Feature flags configuration object with default values
+ * @param provider - OpenFeature provider instance
+ * @returns Object containing `useFeatureFlag` hook and `FeatureFlagsProvider` component
+ * @example
+ * ```typescript
+ * const flags = { enableFeature: { defaultValue: false } };
+ * const provider = new ConfigCatWebProvider('sdk-key');
+ * const { useFeatureFlag, FeatureFlagsProvider } = mkFeatureFlags(flags, provider);
+ * ```
+ */ function mkFeatureFlags(flags, provider) {
+    OpenFeature.setProvider(provider);
+    return {
+        useFeatureFlag: (key, defaultValue)=>useFlag(key.toString(), defaultValue != null ? defaultValue : flags[key].defaultValue),
+        FeatureFlagsProvider: OpenFeatureProvider
+    };
+}
+
+export { mkFeatureFlags };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leancodepl/feature-flags-react-client",
-  "version": "8.5.0",
+  "version": "8.6.0",
   "license": "Apache-2.0",
   "dependencies": {
     "@openfeature/core": "^1.3.0",
@@ -36,11 +36,6 @@
     "name": "LeanCode",
     "url": "https://leancode.co"
   },
-  "files": [
-    "dist",
-    "README.md",
-    "CHANGELOG.md"
-  ],
   "sideEffects": false,
   "exports": {
     "./package.json": "./package.json",

package/src/index.d.ts

@@ -0,0 +1 @@
+export * from "./lib/mkFeatureFlags";

package/src/lib/mkFeatureFlags.d.ts

@@ -0,0 +1,26 @@
+import { OpenFeatureProvider } from "@openfeature/react-sdk";
+import { Provider } from "@openfeature/web-sdk";
+export type FeatureFlagConfig = {
+    defaultValue: any;
+};
+export type Flags<TKeys extends string = string, TFlag extends FeatureFlagConfig = FeatureFlagConfig> = Record<TKeys, TFlag>;
+/**
+ * Creates React hooks for type-safe feature flag management using OpenFeature.
+ *
+ * Sets up OpenFeature provider and returns typed hooks for feature flag evaluation.
+ * Provides React context provider and hook for accessing feature flags in components.
+ *
+ * @param flags - Feature flags configuration object with default values
+ * @param provider - OpenFeature provider instance
+ * @returns Object containing `useFeatureFlag` hook and `FeatureFlagsProvider` component
+ * @example
+ * ```typescript
+ * const flags = { enableFeature: { defaultValue: false } };
+ * const provider = new ConfigCatWebProvider('sdk-key');
+ * const { useFeatureFlag, FeatureFlagsProvider } = mkFeatureFlags(flags, provider);
+ * ```
+ */
+export declare function mkFeatureFlags<TFlags extends Flags>(flags: TFlags, provider: Provider): {
+    useFeatureFlag: <TKey extends keyof TFlags>(key: TKey, defaultValue?: TFlags[TKey]["defaultValue"]) => import("@openfeature/react-sdk").FlagQuery<TFlags[TKey]["defaultValue"] extends infer T ? T extends TFlags[TKey]["defaultValue"] ? T extends boolean ? boolean : T extends number ? number : T extends string ? string : T extends import("@openfeature/core").JsonValue ? T : import("@openfeature/core").JsonValue : never : never>;
+    FeatureFlagsProvider: typeof OpenFeatureProvider;
+};