@leancodepl/feature-flags-react-client 8.4.0 → 8.5.1

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.js

@@ -3,7 +3,22 @@
 var reactSdk = require('@openfeature/react-sdk');
 var webSdk = require('@openfeature/web-sdk');
 
-function mkFeatureFlags(flags, provider) {
+/**
+ * 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),

package/index.esm.js

@@ -1,7 +1,22 @@
 import { OpenFeatureProvider, useFlag } from '@openfeature/react-sdk';
 import { OpenFeature } from '@openfeature/web-sdk';
 
-function mkFeatureFlags(flags, provider) {
+/**
+ * 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),

package/package.json

@@ -1,22 +1,52 @@
 {
   "name": "@leancodepl/feature-flags-react-client",
-  "version": "8.4.0",
+  "version": "8.5.1",
   "license": "Apache-2.0",
   "dependencies": {
     "@openfeature/core": "^1.3.0",
     "@openfeature/react-sdk": "^0.4.5",
     "@openfeature/web-sdk": "^1.2.3"
   },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/leancodepl/js_corelibrary.git",
+    "directory": "packages/feature-flags/feature-flags-react-client"
+  },
+  "homepage": "https://github.com/leancodepl/js_corelibrary",
+  "bugs": {
+    "url": "https://github.com/leancodepl/js_corelibrary/issues"
+  },
+  "description": "React client for feature flag management and evaluation",
+  "keywords": [
+    "feature-flags",
+    "openfeature",
+    "react",
+    "typescript",
+    "javascript",
+    "leancode"
+  ],
+  "author": {
+    "name": "LeanCode",
+    "url": "https://leancode.co"
+  },
+  "sideEffects": false,
   "exports": {
     "./package.json": "./package.json",
     ".": {
       "module": "./index.esm.js",
-      "types": "./index.esm.d.ts",
+      "types": "./index.d.ts",
       "import": "./index.cjs.mjs",
       "default": "./index.cjs.js"
     }
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",
-  "types": "./index.esm.d.ts"
+  "types": "./index.d.ts"
 }

package/src/lib/mkFeatureFlags.d.ts

@@ -4,6 +4,22 @@ 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;

package/index.esm.d.ts

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