@archbase/feature-flags 3.0.0

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useArchbaseFeatureFlag } from './useArchbaseFeatureFlag';
+export { useArchbaseVariant } from './useArchbaseVariant';

package/dist/hooks/useArchbaseFeatureFlag.d.ts

@@ -0,0 +1,2 @@
+import { UseFeatureFlagResult } from '../types';
+export declare function useArchbaseFeatureFlag(featureName: string): UseFeatureFlagResult;

package/dist/hooks/useArchbaseVariant.d.ts

@@ -0,0 +1,2 @@
+import { UseVariantResult } from '../types';
+export declare function useArchbaseVariant<T = any>(featureName: string): UseVariantResult<T>;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { ArchbaseFeatureFlagsProvider } from './providers';
+export { useArchbaseFeatureFlag, useArchbaseVariant } from './hooks';
+export type { ArchbaseFeatureFlagsProviderProps, UnleashConfig, UseFeatureFlagResult, UseVariantResult, } from './types';

package/dist/index.js

@@ -0,0 +1,344 @@
+import te, { useState as g, useMemo as ne, useEffect as j } from "react";
+import { FlagProvider as ae, useFlag as oe, useVariant as se } from "@unleash/proxy-client-react";
+import { useArchbaseTranslation as ue } from "@archbase/core";
+var k = { exports: {} }, _ = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var M;
+function le() {
+  if (M)
+    return _;
+  M = 1;
+  var s = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
+  function u(i, l, c) {
+    var d = null;
+    if (c !== void 0 && (d = "" + c), l.key !== void 0 && (d = "" + l.key), "key" in l) {
+      c = {};
+      for (var f in l)
+        f !== "key" && (c[f] = l[f]);
+    } else
+      c = l;
+    return l = c.ref, {
+      $$typeof: s,
+      type: i,
+      key: d,
+      ref: l !== void 0 ? l : null,
+      props: c
+    };
+  }
+  return _.Fragment = t, _.jsx = u, _.jsxs = u, _;
+}
+var b = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var W;
+function ce() {
+  return W || (W = 1, process.env.NODE_ENV !== "production" && function() {
+    function s(e) {
+      if (e == null)
+        return null;
+      if (typeof e == "function")
+        return e.$$typeof === K ? null : e.displayName || e.name || null;
+      if (typeof e == "string")
+        return e;
+      switch (e) {
+        case h:
+          return "Fragment";
+        case J:
+          return "Profiler";
+        case q:
+          return "StrictMode";
+        case B:
+          return "Suspense";
+        case H:
+          return "SuspenseList";
+        case Q:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case V:
+            return "Portal";
+          case G:
+            return e.displayName || "Context";
+          case z:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case X:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case Z:
+            return r = e.displayName || null, r !== null ? r : s(e.type) || "Memo";
+          case x:
+            r = e._payload, e = e._init;
+            try {
+              return s(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function t(e) {
+      return "" + e;
+    }
+    function u(e) {
+      try {
+        t(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var n = r.error, a = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return n.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          a
+        ), t(e);
+      }
+    }
+    function i(e) {
+      if (e === h)
+        return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === x)
+        return "<...>";
+      try {
+        var r = s(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function l() {
+      var e = y.A;
+      return e === null ? null : e.getOwner();
+    }
+    function c() {
+      return Error("react-stack-top-frame");
+    }
+    function d(e) {
+      if (F.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning)
+          return !1;
+      }
+      return e.key !== void 0;
+    }
+    function f(e, r) {
+      function n() {
+        Y || (Y = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      n.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: n,
+        configurable: !0
+      });
+    }
+    function A() {
+      var e = s(this.type);
+      return I[e] || (I[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function w(e, r, n, a, T, S) {
+      var o = n.ref;
+      return e = {
+        $$typeof: C,
+        type: e,
+        key: r,
+        props: n,
+        _owner: a
+      }, (o !== void 0 ? o : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: A
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: T
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: S
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function v(e, r, n, a, T, S) {
+      var o = r.children;
+      if (o !== void 0)
+        if (a)
+          if (ee(o)) {
+            for (a = 0; a < o.length; a++)
+              p(o[a]);
+            Object.freeze && Object.freeze(o);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else
+          p(o);
+      if (F.call(r, "key")) {
+        o = s(e);
+        var E = Object.keys(r).filter(function(re) {
+          return re !== "key";
+        });
+        a = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}", D[o + a] || (E = 0 < E.length ? "{" + E.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          a,
+          o,
+          E,
+          o
+        ), D[o + a] = !0);
+      }
+      if (o = null, n !== void 0 && (u(n), o = "" + n), d(r) && (u(r.key), o = "" + r.key), "key" in r) {
+        n = {};
+        for (var P in r)
+          P !== "key" && (n[P] = r[P]);
+      } else
+        n = r;
+      return o && f(
+        n,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), w(
+        e,
+        o,
+        n,
+        l(),
+        T,
+        S
+      );
+    }
+    function p(e) {
+      N(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === x && (e._payload.status === "fulfilled" ? N(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function N(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === C;
+    }
+    var R = te, C = Symbol.for("react.transitional.element"), V = Symbol.for("react.portal"), h = Symbol.for("react.fragment"), q = Symbol.for("react.strict_mode"), J = Symbol.for("react.profiler"), z = Symbol.for("react.consumer"), G = Symbol.for("react.context"), X = Symbol.for("react.forward_ref"), B = Symbol.for("react.suspense"), H = Symbol.for("react.suspense_list"), Z = Symbol.for("react.memo"), x = Symbol.for("react.lazy"), Q = Symbol.for("react.activity"), K = Symbol.for("react.client.reference"), y = R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, F = Object.prototype.hasOwnProperty, ee = Array.isArray, O = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    R = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var Y, I = {}, $ = R.react_stack_bottom_frame.bind(
+      R,
+      c
+    )(), L = O(i(c)), D = {};
+    b.Fragment = h, b.jsx = function(e, r, n) {
+      var a = 1e4 > y.recentlyCreatedOwnerStacks++;
+      return v(
+        e,
+        r,
+        n,
+        !1,
+        a ? Error("react-stack-top-frame") : $,
+        a ? O(i(e)) : L
+      );
+    }, b.jsxs = function(e, r, n) {
+      var a = 1e4 > y.recentlyCreatedOwnerStacks++;
+      return v(
+        e,
+        r,
+        n,
+        !0,
+        a ? Error("react-stack-top-frame") : $,
+        a ? O(i(e)) : L
+      );
+    };
+  }()), b;
+}
+var U;
+function ie() {
+  return U || (U = 1, process.env.NODE_ENV === "production" ? k.exports = le() : k.exports = ce()), k.exports;
+}
+var m = ie();
+function Ee({
+  children: s,
+  config: t,
+  startClient: u = !0,
+  errorComponent: i,
+  loadingComponent: l
+}) {
+  const { t: c } = ue(), [d, f] = g(!1), [A, w] = g(null), v = ne(() => ({
+    url: t.url,
+    clientKey: t.clientKey,
+    appName: t.appName,
+    environment: t.environment || "production",
+    refreshInterval: t.refreshInterval || 3e4,
+    context: t.context
+  }), [t]);
+  return j(() => {
+    if (!u) {
+      f(!0);
+      return;
+    }
+    const p = setTimeout(() => f(!0), 100);
+    return () => clearTimeout(p);
+  }, [u]), A ? /* @__PURE__ */ m.jsx(m.Fragment, { children: i || /* @__PURE__ */ m.jsx("div", { children: String(c("Error loading feature flags")) }) }) : d ? /* @__PURE__ */ m.jsx(
+    ae,
+    {
+      config: v,
+      startClient: u,
+      children: s
+    }
+  ) : /* @__PURE__ */ m.jsx(m.Fragment, { children: l || /* @__PURE__ */ m.jsx("div", { children: String(c("Loading feature flags...")) }) });
+}
+function _e(s) {
+  const t = oe(s), [u, i] = g(!0);
+  return j(() => {
+    i(!1);
+  }, [s]), { enabled: t, loading: u };
+}
+function be(s) {
+  const t = se(s), [u, i] = g(!0);
+  return j(() => {
+    i(!1);
+  }, [s]), {
+    variant: t != null && t.name && (t != null && t.enabled) ? {
+      name: t.name,
+      enabled: t.enabled,
+      payload: t.payload
+    } : void 0,
+    loading: u
+  };
+}
+export {
+  Ee as ArchbaseFeatureFlagsProvider,
+  _e as useArchbaseFeatureFlag,
+  be as useArchbaseVariant
+};

package/dist/providers/ArchbaseFeatureFlagsProvider.d.ts

@@ -0,0 +1,2 @@
+import { ArchbaseFeatureFlagsProviderProps } from '../types';
+export declare function ArchbaseFeatureFlagsProvider({ children, config, startClient, errorComponent, loadingComponent, }: ArchbaseFeatureFlagsProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/providers/index.d.ts

@@ -0,0 +1 @@
+export { ArchbaseFeatureFlagsProvider } from './ArchbaseFeatureFlagsProvider';

package/dist/types/feature-flags.types.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+export interface UnleashConfig {
+    url: string;
+    clientKey: string;
+    appName: string;
+    environment?: 'development' | 'production' | 'staging';
+    refreshInterval?: number;
+    context?: {
+        userId?: string;
+        sessionId?: string;
+        properties?: Record<string, string>;
+    };
+}
+export interface ArchbaseFeatureFlagsProviderProps {
+    children: ReactNode;
+    config: UnleashConfig;
+    startClient?: boolean;
+    errorComponent?: ReactNode;
+    loadingComponent?: ReactNode;
+}
+export interface UseFeatureFlagResult {
+    enabled: boolean;
+    loading: boolean;
+    error?: Error;
+}
+export interface UseVariantResult<T = any> {
+    variant: {
+        name: string;
+        enabled: boolean;
+        payload: {
+            type: string;
+            value: string;
+        };
+    } | undefined;
+    loading: boolean;
+    error?: Error;
+}
+export interface UseFeatureFlagsResult {
+    flags: Record<string, boolean>;
+    loading: boolean;
+    error?: Error;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+export interface UnleashConfig {
+    url: string;
+    clientKey: string;
+    appName: string;
+    environment?: 'development' | 'production' | 'staging';
+    refreshInterval?: number;
+    context?: {
+        userId?: string;
+        sessionId?: string;
+        properties?: Record<string, string>;
+    };
+}
+export interface ArchbaseFeatureFlagsProviderProps {
+    children: ReactNode;
+    config: UnleashConfig;
+    startClient?: boolean;
+    errorComponent?: ReactNode;
+    loadingComponent?: ReactNode;
+}
+export interface UseFeatureFlagResult {
+    enabled: boolean;
+    loading: boolean;
+    error?: Error;
+}
+export interface UseVariantResult<T = any> {
+    variant: {
+        name: string;
+        enabled: boolean;
+        payload?: {
+            type: string;
+            value: string;
+        };
+    } | undefined;
+    loading: boolean;
+    error?: Error;
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@archbase/feature-flags",
+  "version": "3.0.0",
+  "description": "Feature flags integration for Archbase React v3 using Unleash",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "peerDependencies": {
+    "@mantine/core": "8.3.12",
+    "react": "^18.3.0 || ^19.0.0",
+    "react-dom": "^18.3.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@unleash/proxy-client-react": "^3.6.0",
+    "@archbase/core": "3.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.6",
+    "@types/react-dom": "^19.0.2",
+    "typescript": "^5.8.0",
+    "vite": "^6.4.1",
+    "vite-plugin-dts": "^4.5.0"
+  },
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly || true",
+    "dev": "vite build --watch",
+    "lint": "eslint src",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useArchbaseFeatureFlag } from './useArchbaseFeatureFlag';
+export { useArchbaseVariant } from './useArchbaseVariant';

package/src/hooks/useArchbaseFeatureFlag.ts

@@ -0,0 +1,14 @@
+import { useFlag } from '@unleash/proxy-client-react';
+import { useState, useEffect } from 'react';
+import type { UseFeatureFlagResult } from '../types';
+
+export function useArchbaseFeatureFlag(featureName: string): UseFeatureFlagResult {
+  const enabled = useFlag(featureName);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(false);
+  }, [featureName]);
+
+  return { enabled, loading };
+}

package/src/hooks/useArchbaseVariant.ts

@@ -0,0 +1,21 @@
+import { useVariant } from '@unleash/proxy-client-react';
+import { useState, useEffect } from 'react';
+import type { UseVariantResult } from '../types';
+
+export function useArchbaseVariant<T = any>(featureName: string): UseVariantResult<T> {
+  const variant = useVariant(featureName);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(false);
+  }, [featureName]);
+
+  return {
+    variant: variant?.name && variant?.enabled ? {
+      name: variant.name,
+      enabled: variant.enabled,
+      payload: variant.payload as { type: string; value: string },
+    } : undefined,
+    loading,
+  };
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+// Providers
+export { ArchbaseFeatureFlagsProvider } from './providers';
+
+// Hooks
+export { useArchbaseFeatureFlag, useArchbaseVariant } from './hooks';
+
+// Types
+export type {
+  ArchbaseFeatureFlagsProviderProps,
+  UnleashConfig,
+  UseFeatureFlagResult,
+  UseVariantResult,
+} from './types';

package/src/providers/ArchbaseFeatureFlagsProvider.tsx

@@ -0,0 +1,54 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { FlagProvider } from '@unleash/proxy-client-react';
+import { useArchbaseTranslation } from '@archbase/core';
+import type {
+  ArchbaseFeatureFlagsProviderProps,
+} from '../types';
+
+export function ArchbaseFeatureFlagsProvider({
+  children,
+  config,
+  startClient = true,
+  errorComponent,
+  loadingComponent,
+}: ArchbaseFeatureFlagsProviderProps) {
+  const { t } = useArchbaseTranslation();
+  const [isReady, setIsReady] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const unleashConfig = useMemo(() => ({
+    url: config.url,
+    clientKey: config.clientKey,
+    appName: config.appName,
+    environment: config.environment || 'production',
+    refreshInterval: config.refreshInterval || 30000,
+    context: config.context,
+  }), [config]);
+
+  useEffect(() => {
+    if (!startClient) {
+      setIsReady(true);
+      return;
+    }
+
+    const timer = setTimeout(() => setIsReady(true), 100);
+    return () => clearTimeout(timer);
+  }, [startClient]);
+
+  if (error) {
+    return <>{errorComponent || <div>{String(t('Error loading feature flags'))}</div>}</>;
+  }
+
+  if (!isReady) {
+    return <>{loadingComponent || <div>{String(t('Loading feature flags...'))}</div>}</>;
+  }
+
+  return (
+    <FlagProvider
+      config={unleashConfig}
+      startClient={startClient}
+    >
+      {children}
+    </FlagProvider>
+  );
+}

package/src/providers/index.ts

@@ -0,0 +1 @@
+export { ArchbaseFeatureFlagsProvider } from './ArchbaseFeatureFlagsProvider';

package/src/types/feature-flags.types.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+
+export interface UnleashConfig {
+  url: string;
+  clientKey: string;
+  appName: string;
+  environment?: 'development' | 'production' | 'staging';
+  refreshInterval?: number;
+  context?: {
+    userId?: string;
+    sessionId?: string;
+    properties?: Record<string, string>;
+  };
+}
+
+export interface ArchbaseFeatureFlagsProviderProps {
+  children: ReactNode;
+  config: UnleashConfig;
+  startClient?: boolean;
+  errorComponent?: ReactNode;
+  loadingComponent?: ReactNode;
+}
+
+export interface UseFeatureFlagResult {
+  enabled: boolean;
+  loading: boolean;
+  error?: Error;
+}
+
+export interface UseVariantResult<T = any> {
+  variant: {
+    name: string;
+    enabled: boolean;
+    payload: { type: string; value: string };
+  } | undefined;
+  loading: boolean;
+  error?: Error;
+}
+
+export interface UseFeatureFlagsResult {
+  flags: Record<string, boolean>;
+  loading: boolean;
+  error?: Error;
+}

package/src/types/index.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+
+export interface UnleashConfig {
+  url: string;
+  clientKey: string;
+  appName: string;
+  environment?: 'development' | 'production' | 'staging';
+  refreshInterval?: number;
+  context?: {
+    userId?: string;
+    sessionId?: string;
+    properties?: Record<string, string>;
+  };
+}
+
+export interface ArchbaseFeatureFlagsProviderProps {
+  children: ReactNode;
+  config: UnleashConfig;
+  startClient?: boolean;
+  errorComponent?: ReactNode;
+  loadingComponent?: ReactNode;
+}
+
+export interface UseFeatureFlagResult {
+  enabled: boolean;
+  loading: boolean;
+  error?: Error;
+}
+
+export interface UseVariantResult<T = any> {
+  variant: {
+    name: string;
+    enabled: boolean;
+    payload?: { type: string; value: string };
+  } | undefined;
+  loading: boolean;
+  error?: Error;
+}