@the-portland-company/shell 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,86 @@
 # Changelog
 
+## 0.3.0 — 2026-05-13
+
+Visual-parity rebuild. Ports the legacy production sidebar + header chrome
+from `react/app/src/layouts/AuthenticatedLayout.tsx` (lines 1292–4192)
+into the shell so any consuming SPA gets the full Politogy chrome
+without rebuilding from a skeleton.
+
+### Added
+
+- `<Sidebar />` — full port of legacy `SidebarContent` (3289–4192). Renders
+  brand logo, large org logo (when present), `<OrgPill />`,
+  `<ModePill />`, the navItems list, and a footer with Privacy / Terms /
+  Subscriptions links + commit/version display.
+- `<Header />` — full port of legacy `MobileNav` (2545–2924). Renders
+  hamburger (mobile), small brand logo (mobile), page title + breadcrumbs,
+  headerActions slot, headerIconsSlot (FuelPopover, alerts, etc.), the
+  DevNotesMenu slot, and `<UserMenu />`.
+- `<NavItem />` — full port of legacy `NavItem` (1292–1730). Supports
+  top-level rows, accordion children, active-state highlight, mode-aware
+  hover gradient, brand icons, regular react-icons, badges, and sub-labels.
+- `<OrgPill />` — port of the sidebar org switcher (3795–3957). New
+  primary export; the v0.2.x `<OrgSelector />` export still works as an
+  alias.
+- `<ModePill />` — port of the mode selector (3959–4006).
+- `<UserMenu />` (rewrite) — matches the legacy avatar menu (2680–2898).
+  Sections: avatar trigger + name/email VStack + chevron; My Profile /
+  Continue Onboarding (gated) / Organization Settings; ROLES &
+  ORGANIZATIONS (current-org role Badge OR active-role Badge); ACCOUNTS
+  (current account indicator + linkedAccounts list with inline remove +
+  Add Account); Sign out.
+- `<BrandLogo />` — non-draggable `<img>` that the app supplies the `src`
+  for (mode-aware logo asset stays in the app's `public/` directory).
+- `<BrandIcon name={...} />` — `<img>` keyed off `/brand/icons/<name>.svg`
+  (with a configurable `basePath`).
+- New chrome contexts and hooks:
+  - `useShellMode()` → `{ currentMode, modes, switchMode, getModeConfig }`
+  - `useShellNavItems()` → `{ items }`
+  - `useShellNavigationPreference()` → `{ showSubMenu }`
+  - `useShellRole()` → `{ activeRoleConfig, isSuperAdmin }`
+  - `useShellFooter()` → `{ links, version, commit, releaseName, … }`
+- Helpers (public exports): `normalizeHexColor`, `lightenHexColor`,
+  `hexToRgba`, `getOrganizationBrandColor`,
+  `getOrganizationBadgeLetters`, `getUserDisplayName`.
+- `<ShellChrome>` gained props: `mode`, `navItems`, `navigationPreference`,
+  `role`, `footer`, `brandLogoSrc`, `headerIconsSlot`,
+  `organizationSettingsHref`, `showContinueOnboarding`,
+  `onContinueOnboarding`, `pageTitle`, `breadcrumbs`, `headerActions`.
+- New CSS subpath export: `@the-portland-company/shell/chrome.css` — the
+  `:root` design-token CSS variables from `react/app/src/index.css`
+  (`--app-color-brand-*`, `--app-btn-*`, `--app-tab-*`, `--mode-*`,
+  `--form-control-*`).
+
+### Changed
+
+- **Breaking:** `<AppLayout>` no longer accepts `headerExtrasSlot`. The
+  replacement is the new `headerIconsSlot` field on `<ShellChrome>` (passed
+  through context so the `<Header>` can render it in the right place
+  inside the icon row). `modalsSlot`, `notificationsSlot`, and
+  `overlaySlot` are unchanged. `sidebarFooterSlot` is removed (footer is
+  now data-driven via `useShellFooter()`).
+- **Breaking:** `<UserMenu>` was rewritten. The v0.2.x version showed a
+  generic Switch-account section; v0.3.0 matches the legacy production
+  menu shape. Apps that depended on the old menu strings (`'Switch
+  account'`, `'Add account'`) should update to the new strings
+  (`'ACCOUNTS'`, `'Add Account'`).
+- `<Sidebar>` no longer takes `entries` / `currentApp` / `footerSlot`
+  props — it reads everything from shell contexts.
+- `<Header>` no longer takes `extrasSlot` — it reads
+  `headerActions` + `headerIconsSlot` from chrome context.
+
+### Compat
+
+- `<OrgSelector>` is still exported (now aliased to `<OrgPill>`).
+- All v0.2.x ShellProvider props (`organization`, `linkedAccounts`,
+  `support`, `devNotesMenu`, `myProfileHref`) still work.
+
+### Peer dependency
+
+- Adds `react-icons` `^4 || ^5` (used by `<NavItem>`, `<Header>`,
+  `<UserMenu>` for the chevron / hamburger / X icons).
+
 ## 0.2.1 — 2026-05-13
 
 ### Added

package/dist/chrome.css

@@ -0,0 +1,102 @@
+/*
+ * Politogy chrome global CSS variables. Ported verbatim from
+ * react/app/src/index.css :root block (2026-05-13). Apps that adopt the
+ * shell import this once (typically alongside the view-transitions CSS)
+ * so form controls / buttons / tabs / mode colors stay consistent across
+ * SPAs.
+ */
+
+:root {
+  /* Politogy brand palette — design spec 2026-05-02 */
+  --color-race-red: #E63946;
+  --color-race-blue: #007BFF;
+  --color-tread-yellow: #F2C94C;
+  --color-green-flag: #00A651;
+  --color-layer-1: #F0F4F7; /* G1 — page background */
+  --color-layer-2: #ECEEEF; /* G2 — recessed surfaces */
+  --color-layer-3: #FFFFFF; /* White — elevated cards */
+  --color-graphite: #2F3136; /* Font 2 — primary body text */
+  --color-g4: #929599; /* Font — secondary / muted text */
+  --color-g3: #D7DADF; /* Small print + subtle accent borders */
+
+  /* Form-control sizing + colors */
+  --app-field-bg: #ffffff;
+  --app-field-border: #e2e8f0;
+  --app-field-border-hover: #a0aec0;
+  --app-field-focus: #e86a3a;
+  --app-floating-label-bg: #ffffff;
+  --app-floating-label-top: -9px;
+  --app-floating-label-left: 10px;
+  --app-floating-label-font-size: 12px;
+  --app-floating-label-line-height: 16px;
+  --app-floating-label-padding-x: 6px;
+  --app-field-radius: 10px;
+  --form-control-height: 44px;
+  --form-control-radius: 5px;
+  --form-control-padding: 12px;
+  --form-control-font-size: 14px;
+  --form-placeholder-font-size: 14px;
+  --form-placeholder-color: #9ca3af;
+  --form-value-color: #000000;
+  --form-control-border: #cbd5e1;
+  --form-control-border-hover: #94a3b8;
+  --form-control-focus: #64748b;
+  --form-select-icon: #64748b;
+  --form-label-left: 10px;
+  --form-label-top: 0px;
+  --form-label-font-size: 12px;
+
+  /* Buttons */
+  --app-btn-size: var(--form-control-height);
+  --app-btn-radius: 10px;
+  --app-btn-font-size: 14px;
+  --app-btn-primary-bg: #e86a3a;
+  --app-btn-primary-bg-hover: #d95f30;
+  --app-btn-primary-fg: #ffffff;
+  --app-btn-secondary-bg: #ffffff;
+  --app-btn-secondary-bg-hover: #f8fafc;
+  --app-btn-secondary-fg: #334155;
+  --app-btn-secondary-border: #cbd5e1;
+  --app-btn-tooltip-bg: #0f172a;
+  --app-btn-tooltip-fg: #ffffff;
+
+  /* Tabs */
+  --app-tab-header-bg: #888888;
+  --app-tab-row-bg: #f0f4f8;
+  --app-tab-content-bg: #f8fafc;
+  --app-tab-height: var(--form-control-height);
+  --app-tab-icon-size: 18px;
+  --app-tab-strip-padding-y: 14px;
+  --app-tab-gap: 8px;
+  --app-tab-radius: 12px;
+
+  /* Brand color ramps */
+  --app-color-brand-50: #fff5f0;
+  --app-color-brand-100: #ffe8dc;
+  --app-color-brand-200: #ffd0b8;
+  --app-color-brand-300: #ffb088;
+  --app-color-brand-400: #ff8c5a;
+  --app-color-brand-500: #e86a3a;
+  --app-color-brand-600: #cc5429;
+  --app-color-brand-700: #a6421f;
+  --app-color-brand-800: #803317;
+  --app-color-brand-900: #5c2410;
+
+  /* Gray ramps (for components referencing --app-color-gray-N) */
+  --app-color-gray-50: #f7fafc;
+  --app-color-gray-100: #edf2f7;
+  --app-color-gray-200: #e2e8f0;
+  --app-color-gray-300: #cbd5e0;
+  --app-color-gray-400: #a0aec0;
+  --app-color-gray-500: #718096;
+  --app-color-gray-600: #4a5568;
+  --app-color-gray-700: #2d3748;
+  --app-color-gray-800: #1a202c;
+  --app-color-gray-900: #171923;
+
+  /* Mode-active colors (overwritten by app at mode-switch time) */
+  --mode-primary-color: var(--app-color-brand-500);
+  --mode-input-border-color: var(--app-color-brand-500);
+  --mode-input-hover-border-color: var(--app-color-brand-600);
+  --mode-input-focus-shadow-color: var(--app-color-brand-500);
+}