@kelpie/ui 0.3.0 → 0.4.0

package/src/pages/account/AccountLayout.tsx

@@ -1,17 +1,26 @@
 import { NavLink, Outlet } from 'react-router'
 
+import type { NavItem } from '../../registry/contributions.ts'
+import { useNavItems } from '../../registry/context.ts'
+import { useVisibleNavItems } from '../../registry/visibleNav.ts'
+
 /**
  * Tabs across the account's own settings, from the mockup's `AccountNav`.
  *
- * Three of its five tabs are here. Personal API keys and integrations arrive
- * with the features behind them, the same rule the shell's sidebar follows.
+ * Three of its five tabs are core's. The rest come from `nav.account`, which is
+ * where a module's own account page announces itself: a module route mounts as
+ * a sibling of `/account` rather than a child of it, so without this the page
+ * would render with no tab strip and nothing anywhere pointing at it.
+ *
+ * Core numbers itself in hundreds, the same convention the shell's sidebar
+ * uses, so a module can land between two core tabs without core renumbering.
  */
 
-const TABS = [
-  { to: '/account/profile', label: 'Profile' },
-  { to: '/account/security', label: 'Security' },
-  { to: '/account/preferences', label: 'Preferences' },
-] as const
+const CORE_TABS: readonly NavItem[] = [
+  { id: 'profile', to: '/account/profile', label: 'Profile', order: 100 },
+  { id: 'security', to: '/account/security', label: 'Security', order: 200 },
+  { id: 'preferences', to: '/account/preferences', label: 'Preferences', order: 300 },
+]
 
 function tabClass({ isActive }: { isActive: boolean }): string {
   return [
@@ -23,11 +32,13 @@ function tabClass({ isActive }: { isActive: boolean }): string {
 }
 
 export function AccountLayout(): React.JSX.Element {
+  const tabs = useVisibleNavItems(CORE_TABS, useNavItems('account'))
+
   return (
     <div className="animate-fade-in mx-auto max-w-4xl">
       <nav className="mb-6 flex flex-wrap gap-1 border-b border-border pb-3">
-        {TABS.map((tab) => (
-          <NavLink key={tab.to} to={tab.to} className={tabClass}>
+        {tabs.map((tab) => (
+          <NavLink key={tab.id} to={tab.to} className={tabClass}>
             {tab.label}
           </NavLink>
         ))}

package/src/registry/context.ts

@@ -4,7 +4,6 @@ import type { ComponentType } from 'react'
 import type {
   DashboardCard,
   ExtensibleRecordType,
-  IntegrationProvider,
   NavItem,
   NavSlot,
   RecordSidebarCard,
@@ -54,10 +53,6 @@ export function useDashboardCards(): readonly DashboardCard[] {
   return useUiExtensions().dashboardCards()
 }
 
-export function useIntegrationProviders(): readonly IntegrationProvider[] {
-  return useUiExtensions().integrationProviders()
-}
-
 /**
  * The component to render for an overridable: a module's replacement, or core's
  * own. Core calls this instead of rendering its component directly.

package/src/registry/contributions.ts

@@ -1,5 +1,5 @@
 import type { ExtensibleRecordType } from '@kelpie/schemas'
-import type { ComponentType, ReactNode } from 'react'
+import type { ReactNode } from 'react'
 
 /**
  * What a UI module may add to the shell, per the slot table in `modules.md`.
@@ -68,22 +68,3 @@ export interface DashboardCard {
   readonly render: () => ReactNode
 }
 
-export const INTEGRATION_CATEGORIES = [
-  'messaging',
-  'identity',
-  'enrichment',
-  'email',
-  'calendar',
-] as const
-
-export type IntegrationCategory = (typeof INTEGRATION_CATEGORIES)[number]
-
-/** A catalog entry on the admin integrations page. Core owns the page and the connection lifecycle. */
-export interface IntegrationProvider {
-  readonly id: string
-  readonly name: string
-  readonly category: IntegrationCategory
-  readonly description: string
-  /** Rendered on the provider's own settings panel once connected. */
-  readonly settings?: ComponentType<Record<string, never>>
-}

package/src/registry/registry.ts

@@ -3,7 +3,6 @@ import type { ComponentType } from 'react'
 import type {
   DashboardCard,
   ExtensibleRecordType,
-  IntegrationProvider,
   NavItem,
   NavSlot,
   RecordSidebarCard,
@@ -32,7 +31,6 @@ export interface UiModuleContext {
   recordTab(objectType: ExtensibleRecordType, tab: RecordTab): void
   recordSidebarCard(objectType: ExtensibleRecordType, card: RecordSidebarCard): void
   dashboardCard(card: DashboardCard): void
-  integrationProvider(provider: IntegrationProvider): void
   /** Replaces a core component. Prefer a slot; see `modules.md`. */
   override<Props>(token: Overridable<Props>, component: ComponentType<Props>): void
 }
@@ -49,7 +47,6 @@ export interface UiExtensions {
   recordTabs(objectType: ExtensibleRecordType): readonly RecordTab[]
   recordSidebarCards(objectType: ExtensibleRecordType): readonly RecordSidebarCard[]
   dashboardCards(): readonly DashboardCard[]
-  integrationProviders(): readonly IntegrationProvider[]
   componentFor<Props>(token: Overridable<Props>): ComponentType<Props>
 }
 
@@ -73,7 +70,6 @@ interface Accumulator {
   readonly recordTabs: Map<ExtensibleRecordType, RecordTab[]>
   readonly recordSidebarCards: Map<ExtensibleRecordType, RecordSidebarCard[]>
   readonly dashboardCards: DashboardCard[]
-  readonly integrationProviders: IntegrationProvider[]
   readonly overrides: OverrideStore
 }
 
@@ -138,11 +134,6 @@ function createModuleContext(
       accumulator.dashboardCards.push(card)
     },
 
-    integrationProvider(provider) {
-      claim(taken, module.id, 'admin.integrations.catalog', provider.id)
-      accumulator.integrationProviders.push(provider)
-    },
-
     override(token, component) {
       if (accumulator.overrides.has(token.key)) {
         throw new UiModuleError(
@@ -167,7 +158,6 @@ export function registerUiModules(modules: readonly UiModule[]): UiExtensions {
     recordTabs: new Map(),
     recordSidebarCards: new Map(),
     dashboardCards: [],
-    integrationProviders: [],
     overrides: createOverrideStore(),
   }
   const taken = new Set<string>()
@@ -189,7 +179,6 @@ export function registerUiModules(modules: readonly UiModule[]): UiExtensions {
     recordSidebarCards: (objectType) =>
       inSlotOrder(accumulator.recordSidebarCards.get(objectType) ?? []),
     dashboardCards: () => inSlotOrder(accumulator.dashboardCards),
-    integrationProviders: () => accumulator.integrationProviders,
     componentFor: (token) => accumulator.overrides.get(token),
   }
 }

package/src/registry/visibleNav.ts

@@ -0,0 +1,38 @@
+import { useModuleSettings } from '../api/resources/moduleSettings.ts'
+import type { NavItem } from './contributions.ts'
+import { inSlotOrder } from './registry.ts'
+
+/**
+ * Core's nav items merged with a slot's module contributions, ordered, with the
+ * entries belonging to a disabled module removed.
+ *
+ * One hook rather than the rule written out at each nav surface. The shell's
+ * sidebar and the account tab strip both render a slot, and a workspace that
+ * switched a module off should stop seeing it in both. Two copies of this
+ * filter is exactly the sort of pair that drifts, and the symptom is a tab that
+ * survives its module being disabled and leads to a page answering 403.
+ */
+
+/**
+ * A nav item whose id does not match its module id. Everything else looks itself
+ * up directly, which is what keeps a toggleable module's own nav entry working
+ * with no change here when one is added later.
+ */
+const NAV_ID_TO_MODULE_ID: Readonly<Record<string, string>> = {
+  fundraising: 'raises',
+  data: 'import-export',
+}
+
+export function useVisibleNavItems(
+  coreItems: readonly NavItem[],
+  moduleItems: readonly NavItem[],
+): readonly NavItem[] {
+  const { settings } = useModuleSettings()
+  const disabledModuleIds = new Set(
+    settings.filter((setting) => !setting.enabled).map((setting) => setting.moduleId),
+  )
+
+  return inSlotOrder([...coreItems, ...moduleItems]).filter(
+    (item) => !disabledModuleIds.has(NAV_ID_TO_MODULE_ID[item.id] ?? item.id),
+  )
+}