|
| 1 | +<!-- version-type: major --> |
| 2 | +# frontend |
| 3 | + |
| 4 | +<!-- |
| 5 | +FORMATTING GUIDE: |
| 6 | +
|
| 7 | +### Detailed Entry (appears first when merging) |
| 8 | +
|
| 9 | +Use h3 (###) and below for detailed entries with paragraphs, code examples, and lists. |
| 10 | +
|
| 11 | +### Simple List Items |
| 12 | +
|
| 13 | +- Simple changes can be added as list items |
| 14 | +- They are collected together at the bottom of each section |
| 15 | +
|
| 16 | +TIP: When multiple changelog drafts are merged, heading-based entries |
| 17 | +appear before simple list items within each section. |
| 18 | +--> |
| 19 | + |
| 20 | +## 💥 Breaking Changes |
| 21 | + |
| 22 | +### Migrated from `shadowDomName` to `customElementName` |
| 23 | + |
| 24 | +All Shade components now use `customElementName` instead of `shadowDomName`, following the Shades v13 API change. |
| 25 | + |
| 26 | +**Examples:** |
| 27 | + |
| 28 | +```typescript |
| 29 | +// ❌ Before |
| 30 | +export const MyComponent = Shade({ |
| 31 | + shadowDomName: 'my-component', |
| 32 | + render: () => { /* ... */ }, |
| 33 | +}) |
| 34 | + |
| 35 | +// ✅ After |
| 36 | +export const MyComponent = Shade({ |
| 37 | + customElementName: 'my-component', |
| 38 | + render: () => { /* ... */ }, |
| 39 | +}) |
| 40 | +``` |
| 41 | + |
| 42 | +**Impact:** All custom Shade components must be updated to use the new property name. |
| 43 | + |
| 44 | +### Replaced cookie-based session auth with JWT token-based auth |
| 45 | + |
| 46 | +`BoilerplateApiClient` no longer uses cookie-based session authentication. It now uses JWT tokens via `@furystack/auth-jwt/client` with automatic token refresh. The `call` method now wraps `AuthorizedApi` instead of `BoilerplateApi`, and login/logout are handled through the token store. |
| 47 | + |
| 48 | +**Examples:** |
| 49 | + |
| 50 | +```typescript |
| 51 | +// ❌ Before |
| 52 | +const apiClient = injector.getInstance(BoilerplateApiClient) |
| 53 | +await apiClient.call({ method: 'POST', action: '/login', body: { username, password } }) |
| 54 | +await apiClient.call({ method: 'POST', action: '/logout' }) |
| 55 | + |
| 56 | +// ✅ After |
| 57 | +const apiClient = injector.getInstance(BoilerplateApiClient) |
| 58 | +await apiClient.login({ username, password }) |
| 59 | +await apiClient.logout() |
| 60 | +// API calls automatically include JWT authorization headers |
| 61 | +await apiClient.call({ method: 'GET', action: '/currentUser' }) |
| 62 | +``` |
| 63 | + |
| 64 | +**Impact:** All code using `BoilerplateApiClient` for authentication must switch to the new `login()`/`logout()` methods. |
| 65 | + |
| 66 | +## ✨ Features |
| 67 | + |
| 68 | +### Sidebar navigation with collapsible drawer |
| 69 | + |
| 70 | +Added a `Sidebar` component with a vertical `Menu` for page navigation. The layout now uses `PageLayout` with a collapsible left drawer that auto-collapses on medium breakpoints, and `NestedRouter` for client-side routing. |
| 71 | + |
| 72 | +### Redesigned UI pages |
| 73 | + |
| 74 | +- **Login page** - Redesigned with `Card`, `CardContent`, `Alert`, and `Typography` components for a polished sign-in experience |
| 75 | +- **Offline page** - Redesigned with `Alert` components for error/info states and a reload `Button` |
| 76 | +- **Init page** - Redesigned with CSS variable theming via `cssVariableTheme` |
| 77 | +- **Buttons demo** - Redesigned with `PageContainer` and `PageHeader` for consistent page layout |
| 78 | +- **Hello world** - Added an authorized endpoint test section to verify JWT token refresh behavior |
| 79 | + |
| 80 | +### `SessionService` implements `Disposable` |
| 81 | + |
| 82 | +`SessionService` now properly disposes all `ObservableValue` instances via the `Disposable` interface, preventing memory leaks. |
| 83 | + |
| 84 | +## ♻️ Refactoring |
| 85 | + |
| 86 | +- Removed `Body` component; session-state routing logic moved into `Layout` |
| 87 | +- Simplified `Header` by removing configurable props (`title`, `links`) in favor of a fixed layout with `DrawerToggleButton` |
| 88 | +- Replaced `RouteLink` with `NestedRouteLink` and `Router` with `NestedRouter` |
| 89 | +- Used standalone `getTextColor()` function instead of `ThemeProviderService.getTextColor()` method |
| 90 | + |
| 91 | +## ⬆️ Dependencies |
| 92 | + |
| 93 | +- Added `@furystack/auth-jwt` `^2.1.2` - JWT authentication client for token-based auth |
| 94 | +- Updated `@furystack/shades` from `^11.0.33` to `^13.0.0` - Introduces `customElementName` API |
| 95 | +- Updated `@furystack/shades-common-components` from `^10.0.33` to `^14.0.0` - New `PageLayout`, `PageContainer`, `PageHeader`, `Card`, `Alert`, `Menu`, `Typography`, and `DrawerToggleButton` components |
| 96 | +- Updated `@furystack/core` from `^15.0.32` to `^15.2.5` |
| 97 | +- Updated `@furystack/inject` from `^12.0.26` to `^12.0.32` |
| 98 | +- Updated `@furystack/logging` from `^8.0.26` to `^8.1.1` |
| 99 | +- Updated `@furystack/rest-client-fetch` from `^8.0.32` to `^8.1.2` |
| 100 | +- Updated `@furystack/utils` from `^8.1.8` to `^8.2.1` |
| 101 | +- Updated `@types/node` from `^25.0.10` to `^25.3.5` |
0 commit comments