@mounaji_npm/module-gates

Declarative React gates for permissions, features, plans, and module availability.

Install

npm install @mounaji_npm/module-gates @mounaji_npm/module-registry-core

Quick Start

import { CapabilitiesProvider } from '@mounaji_npm/module-registry-core';
import { PermissionGate, FeatureGate, PlanGate, ModuleGate, AccessDeniedPanel } from '@mounaji_npm/module-gates';

const adapter = {
  async getCapabilitiesSnapshot() {
    return {
      plan: 'pro',
      permissions: ['members.view'],
      features: ['analytics'],
      modules: {
        dashboard: { installed: true, enabled: true },
      },
    };
  },
};

export default function Page() {
  return (
    <CapabilitiesProvider adapter={adapter} params={{ organizationId: 'org_1', userId: 'usr_1' }}>
      <PermissionGate permissions={['members.view']} fallback={<AccessDeniedPanel />}>
        <FeatureGate features={['analytics']}>
          <PlanGate allowedPlans={['pro', 'enterprise']}>
            <ModuleGate moduleId="dashboard">
              <Dashboard />
            </ModuleGate>
          </PlanGate>
        </FeatureGate>
      </PermissionGate>
    </CapabilitiesProvider>
  );
}

Exports

• PermissionGate — renders children only when all required permissions are present.
• FeatureGate — renders children only when required features are available.
• PlanGate — renders children only for allowed plans.
• ModuleGate — checks module install/enable state.
• AccessDeniedPanel — default UI fallback for denied access.