@geejay/use-feature-flags 1.0.0

package/README.md

@@ -0,0 +1,52 @@
+# use-feature-flags
+
+A lightweight React hook for fetching feature flags from Supabase. It ships with sensible defaults so you can drop it in and start using feature flags immediately.
+
+## Installation
+
+```
+npm install use-feature-flags
+```
+
+or
+
+```
+yarn add use-feature-flags
+```
+
+## Usage
+
+```tsx
+import { useFeatureFlags } from 'use-feature-flags';
+
+export default function MyComponent() {
+  const { isActive, loading } = useFeatureFlags();
+
+  if (loading) return null;
+
+  return isActive('new-dashboard') ? <NewDashboard /> : <OldDashboard />;
+}
+```
+
+By default the hook connects to the Supabase instance defined in `DEFAULT_SUPABASE_URL`, `DEFAULT_SUPABASE_KEY` and `DEFAULT_TENANT_ID`. Update these constants in `useFeatureFlags.ts` if you need different defaults.
+
+## Building
+
+Run the following inside the package directory:
+
+```
+npm run build
+```
+
+This compiles the TypeScript sources to the `dist` folder.
+
+## Publishing
+
+After building, you can publish the package to npm:
+
+```
+npm publish --access public
+```
+
+Make sure you have configured your npm credentials before publishing.
+

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useFeatureFlags';
+export * from './store';

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from './useFeatureFlags';
+export * from './store';

package/dist/store.d.ts

@@ -0,0 +1,17 @@
+export type FeatureFlag = {
+    id: string;
+    key: string;
+    enabled: boolean;
+    environment: string;
+};
+export declare const featureFlagsAtom: import("jotai").PrimitiveAtom<{
+    flags: FeatureFlag[];
+    loading: boolean;
+}> & {
+    init: {
+        flags: FeatureFlag[];
+        loading: boolean;
+    };
+};
+export declare function setApiKey(key: string): void;
+export declare function getApiKey(): string | null;

package/dist/store.js

@@ -0,0 +1,13 @@
+import { atom } from 'jotai';
+export const featureFlagsAtom = atom({
+    flags: [],
+    loading: true,
+});
+// store.ts
+let apiKey = null;
+export function setApiKey(key) {
+    apiKey = key;
+}
+export function getApiKey() {
+    return apiKey;
+}

package/dist/useFeatureFlags.d.ts

@@ -0,0 +1,7 @@
+export declare const DEFAULT_SUPABASE_URL = "https://khppgsehvvlukzfdqbuo.supabase.co";
+export declare const DEFAULT_SUPABASE_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImtocHBnc2VodnZsdWt6ZmRxYnVvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTI2ODU1MzQsImV4cCI6MjA2ODI2MTUzNH0.8Z4VY4HFMm95UgO21c-DnDkbLPN_0mbDBZJPExaghDk";
+export declare function useFeatureFlags(passedKey?: string, environment?: string): {
+    isActive: (key: string) => boolean;
+    flags: import("./store").FeatureFlag[];
+    loading: boolean;
+};

package/dist/useFeatureFlags.js

@@ -0,0 +1,78 @@
+import { useEffect, useRef } from 'react';
+import { useAtom } from 'jotai';
+import { createClient } from '@supabase/supabase-js';
+import { featureFlagsAtom, getApiKey, setApiKey } from './store';
+// Default config
+export const DEFAULT_SUPABASE_URL = 'https://khppgsehvvlukzfdqbuo.supabase.co';
+export const DEFAULT_SUPABASE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImtocHBnc2VodnZsdWt6ZmRxYnVvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTI2ODU1MzQsImV4cCI6MjA2ODI2MTUzNH0.8Z4VY4HFMm95UgO21c-DnDkbLPN_0mbDBZJPExaghDk'; // Keep this secured
+let initialized = false;
+export function useFeatureFlags(passedKey, environment = typeof window !== 'undefined' ? window.location.hostname : 'localhost') {
+    const [state, setState] = useAtom(featureFlagsAtom);
+    const debounceTimeout = useRef(null);
+    if (passedKey && passedKey !== getApiKey()) {
+        setApiKey(passedKey);
+    }
+    const apiKey = getApiKey();
+    if (!apiKey) {
+        console.warn('API key is missing');
+        return {
+            isActive: () => false,
+            flags: [],
+            loading: false,
+        };
+    }
+    const supabase = createClient(DEFAULT_SUPABASE_URL, DEFAULT_SUPABASE_KEY);
+    const fetchFlags = async () => {
+        setState((prev) => ({ ...prev, loading: true }));
+        try {
+            const response = await fetch(`${DEFAULT_SUPABASE_URL}/functions/v1/get-feature-flags`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'api-key': apiKey,
+                },
+                body: JSON.stringify({ environment }),
+            });
+            const { flags } = await response.json();
+            if (!response.ok || !Array.isArray(flags)) {
+                console.warn('Invalid response from edge function');
+                setState({ flags: [], loading: false });
+                return;
+            }
+            setState({ flags, loading: false });
+        }
+        catch (err) {
+            console.error('Unexpected error fetching flags:', err.message);
+            setState({ flags: [], loading: false });
+        }
+    };
+    useEffect(() => {
+        if (!apiKey || initialized)
+            return;
+        initialized = true;
+        fetchFlags();
+        const channel = supabase
+            .channel(`flags-${environment}`)
+            .on('postgres_changes', {
+            event: '*',
+            schema: 'public',
+            table: 'feature_flags',
+        }, () => {
+            if (debounceTimeout.current)
+                clearTimeout(debounceTimeout.current);
+            debounceTimeout.current = setTimeout(fetchFlags, 300);
+        })
+            .subscribe();
+        return () => {
+            if (debounceTimeout.current)
+                clearTimeout(debounceTimeout.current);
+            supabase.removeChannel(channel);
+        };
+    }, [environment, apiKey]);
+    const isActive = (key) => state.flags.some((flag) => flag.key === key && flag.enabled);
+    return {
+        isActive,
+        flags: state.flags,
+        loading: state.loading,
+    };
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@geejay/use-feature-flags",
+  "version": "1.0.0",
+  "description": "React hook for feature flag management using Supabase",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist", "README.md"],
+  "scripts": {
+    "build": "tsc"
+  },
+  "keywords": ["feature flags", "supabase", "react", "hooks"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-org/use-feature-flags.git"
+  },
+  "author": "GeeJay",
+  "license": "MIT",
+  "dependencies": {
+    "@supabase/supabase-js": "^2.52.0",
+    "jotai": "^2.12.5"
+  },
+  "peerDependencies": {
+    "react": ">=16.8"
+  }
+}