Component Library

@nike/whisker-component-library (WCL) ships the composed, retail-specific React layer that sits above Podium (Nike’s primitives + tokens). It is the only WhiskerPlatform package already published to Nike Artifactory — any external team can install it today without local linking.

Scope

Need	Library
Buttons, inputs, selects, layout primitives, design tokens	Podium (`@nike/podium`)
Data tables, date range pickers, slide-outs, file uploads, multi-component recipes	WCL (this package)

Podium and WCL are peer libraries — WCL composes Podium, it does not replace it. If a primitive exists in Podium, modules should use Podium directly.

What’s in it

30+ components, every interactive element carrying a stable data-testid for Playwright targeting: AccentCard, AutoComplete, BadgeBar, Billboard, ClassificationTags, ClickToCopy, CreateIncidentDrawer, DataTable, DateRangePicker, DevToolsPanel, FileUpload, IncidentsWidget, InventorySearchTab, LanguageSelect, PicklistCart, ProductSlideOut, PushAsideWithDrawer, ScreenCaptureUpload, SegmentedQuantity, SimpleHorizontalBarChart, StatusBadge, StoreCountrySelector, Tag/TagGroup, WidgetShell, XRayTab, and more.

Hooks: useInventoryWithBurstLoading, useModuleAnalytics, useNikeTheme, useReactiveProductLookup, useSlideOut, useTranslation, useDevTools, useNikeFonts. useModuleAnalytics(moduleName) is the one most module developers touch — a pre-scoped trackEvent / trackError that stamps the module name onto every event automatically.

Providers

Provider	Mounted by	Role
`PlatformAnalyticsProvider`	host root, once	Initializes the analytics backend via a swappable `AnalyticsAdapter`
`ModuleAnalyticsProvider`	individual modules (optional)	Scopes events to a moduleName when used outside `useModuleAnalytics`
`NikeStoreProvider`	host	Singleton store context: `info` (24h-cached, public), `config` + `athletes` (auth-gated). One fetch shared across all modules.
`SlideOutProvider`	host	Singleton — only one slide-out open at a time
`InventoryProvider`	host	Burst-loaded inventory cache, gated on `loggedIn`
`ConditionalProvider`	wrapper	Mounts a child provider only if a condition is true
`TranslationProvider`	host or module	i18n context
`DevToolsProvider`	host (dev/staging only)	Inline DevTools panel, tree-shaken out of prod

Theme

nikeTheme / nikeDarkTheme, createNikeTheme(), nikeColors, loadNikeFonts, loadPodiumLocaleCSS. Modules wrap content in MUI ThemeProvider with nikeTheme rather than configuring MUI themselves — there is exactly one Nike visual language across the platform.

Analytics adapter pattern

import { PlatformAnalyticsProvider, NewRelicAdapter } from '@nike/whisker-component-library';

<PlatformAnalyticsProvider adapter={new NewRelicAdapter(nrConfig)}>...</PlatformAnalyticsProvider>;

AnalyticsAdapter is an interface; the package ships NewRelicAdapter for production and ConsoleAdapter for development. Swapping vendors platform-wide means changing one prop — no consuming code changes. See Analytics architecture for the full system.

Tree-shaking-aware exports

Heavy providers are tree-shaken when not imported: InventoryProvider adds React Query (~80 KB gzipped), ModuleAnalyticsProvider adds the New Relic browser agent (~71 KB gzipped), etc. A module that only needs a DataTable doesn’t pay for any of it.

Provider stack in whisker-host

<PlatformAnalyticsProvider adapter={new NewRelicAdapter(nrConfig)}>
  <NikeStoreProvider accessToken={token} loggedIn={isLoggedIn} isProd={isProd}>
    <SlideOutProvider>
      <ConditionalProvider condition={hasInventoryAccess}>
        <InventoryProvider accessToken={token} loggedIn={isLoggedIn} isProd={isProd}>
          {children}
        </InventoryProvider>
      </ConditionalProvider>
    </SlideOutProvider>
  </NikeStoreProvider>
</PlatformAnalyticsProvider>

Mounted once — every federation module inherits the context. Iframe consumers own their own React tree, but analytics + auth tokens still flow to them via postMessage.

Why this matters for the platform contract

WCL is the third stable contract WhiskerPlatform exposes, alongside the manifest schema and remoteSafeSelectors.ts:

Contract	Owned by	Versioned via
`ModuleManifestSchema`	`@nike/whisker-module-kit`	semver on the kit
`remoteSafeSelectors.ts` exports	`whisker-host`	`pinnedHostContractVersion` in `whisker.config.json`
WCL component + hook API	`@nike/whisker-component-library`	semver on the package

Without WCL there is no shared visual language. With it, a store athlete moving between modules built by different squads has a consistent experience.

AI-agent documentation

WCL ships an AGENTS.md hierarchy for AI agents: a router at the repo root, a consumer surface under docs/AGENTS.md, a contributor surface under .github/AGENTS.md (never bundled for consumers), and recipe docs under docs/recipes/AGENTS.md. This is the same audience-routed pattern Thundercats expects from any Tier 1 specialist source — see AI-first tooling. The hierarchy is largely built; remaining polish is tracked in Risks & improvements.

Live Storybook: co-located on this same docs origin under /storybook/* (see Consumer Integration Guide and whisker-docs/README.md’s “Deployment” section) — not the legacy standalone retail-components.simweb-prod.nikecloud.com bucket, which is being retired.