Bugfix/fix logout cache and navbar user

[saadmoumou]

Summary

• What does this PR change?

Why

• Why is this change needed?

Checklist

• Added/updated tests (if behavior changed)
• npm run lint passes
• npm run typecheck passes
• npm test passes
• npm run build passes
• Added a changeset (npx changeset) if this affects consumers

Notes

• Anything reviewers should pay attention to?

[Copilot]

Pull request overview

This PR expands the dashboard template/header API to support displaying authenticated user info in the navbar, adds new integration/E2E tests and CI workflows, and increments the package version.

Changes:

• Add a typed user config and headerActions slot to the Template/DashboardLayout/Header pipeline and update dropdown UI.
• Expand Vitest configuration to include integration tests and add a new integration test; add a new Playwright E2E spec and publishing/PR-validation workflows.
• Apply multiple accessibility/UI tweaks across widgets, tables, and forms; bump package version to 1.0.4.

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
vitest.config.ts	Expands test scope to include integration tests and adjusts testDir/include patterns.
tests/integration/formTableWorkflow.test.tsx	Adds a form-to-table workflow integration test.
tests/e2e/dashboardGrid.spec.ts	Adds a Playwright E2E test for DashboardGrid interactions.
src/main/layoutTypes.ts	Introduces TemplateUserConfig for navbar user display.
src/main/dashboard.tsx	Adds user and headerActions props to the Template component.
src/layout/DashboardLayout.tsx	Threads user and headerActions down into the Header and adjusts layout wrappers.
src/index.ts	Reorders exports and adds TemplateUserConfig to public type exports.
src/hooks/useRegister.ts	Updates error messaging and adds (placeholder) production logging hook.
src/hooks/usePasswordReset.tsx	Updates error messaging and adds (placeholder) production logging hook.
src/hooks/useLogin.tsx	Renames a local variable and updates error messaging/logging behavior.
src/exceptions/TableErrorBoundary.tsx	Adds optional production logging hook and a reset (“Retry”) UI.
src/components/Table/TableDataCustomBase.tsx	Adds ARIA roles/tabIndex changes to rows/cells and adjusts cell class handling.
src/components/Form/ZodDynamicForm.tsx	Improves submit typing, clears errors on submit, and adds an error summary region.
src/components/Dashboard/Widgets/WidgetContainer.tsx	Adds region semantics and an aria-labelledby label for widgets.
src/components/Dashboard/Widgets/DashboardGrid.tsx	Switches grid sizing/placement to Tailwind classes and tweaks progress rendering.
src/components/Dashboard/Header/index.tsx	Adds support for user and headerActions in the header.
src/components/Dashboard/Header/DropdownUser.tsx	Reworks the user dropdown UI and introduces DropdownUserConfig.
src/components/Dashboard/Header/DropdownNotification.tsx	Refreshes notification dropdown UI, adds kinds/unread count.
src/components/Dashboard/Header/DropdownMessage.tsx	Refreshes messages dropdown UI, adds unread count and avatars.
src/components/Dashboard/Header/DarkModeSwitcher.tsx	Minor styling/layout adjustments for the toggle.
package.json	Bumps version to 1.0.4 and adds exports["."].types.
package-lock.json	Updates lockfile version metadata for 1.0.4.
examples/App.tsx	Converts inline styles to utility classes in the examples app.
README.md	Updates feature list and adds sections describing new error handling/testing.
.github/workflows/release-check.yml	Removes the push trigger from the release-check workflow.
.github/workflows/publish.yml	Adds an NPM publish workflow.
.github/workflows/pr-validation.yml	Adds CI validation workflow for develop.
.github/copilot-instructions.md	Adds repository-specific Copilot contribution instructions.

Comments suppressed due to low confidence (1)

src/index.ts:45

• src/index.ts no longer re-exports the hook contract types (LoginCredentials/LoginResult/UseLoginOptions, RegisterPayload/UseRegisterOptions, PasswordResetInput/UsePasswordResetOptions, etc.). If these were part of the public API previously, this is a breaking change for consumers and shouldn’t be shipped as a patch bump. Consider restoring these type exports (or bumping major + documenting the breaking change).

// Types (component props)
export type { BreadcrumbProps } from './components/Breadcrumbs/Breadcrumb';
export type { ControlledZodDynamicFormProps } from './components/Form/ZodDynamicForm';
export type { PaginationProps, TableDataCustomProps } from './components/Table/TableDataCustomBase';
export type { DashboardProps } from './main/dashboard';

[Copilot]

New user-facing strings are hardcoded in English (e.g. "Mark all read", "View all notifications", and "{unreadCount} unread") even though the component is already wired to useT. For a shared UI library, these should be translated via t(...) keys so host apps can localize them.

[Copilot]

New user-facing strings are hardcoded in English (e.g. "Mark all read", "{unreadCount} unread", "View all messages"). Since the dropdown already uses useT, these labels should use translation keys so host apps can localize them consistently.

[Copilot]

There are duplicate hook modules (src/hooks/useLogin.ts + useLogin.tsx, and usePasswordReset.ts + usePasswordReset.tsx). The public export here uses ./hooks/useLogin / ./hooks/usePasswordReset, which will resolve to one of them (typically the .ts), so the behavior changed in the .tsx files may not actually be shipped. Consolidate to a single source file per hook and ensure src/index.ts exports the intended implementation.

[Copilot]

displayName falls back to a hardcoded personal name ('Thomas Anree') when user?.fullName is missing. In a reusable library, this will surface incorrect user info in host apps that haven’t wired the prop yet. Prefer a neutral placeholder (e.g. translated "User"), empty state, or require user.fullName when rendering non-loading content.

Suggested change

	const displayName = user?.fullName || 'Thomas Anree';
	const displayName = user?.fullName || t('common.user', { defaultValue: 'User' });

[Copilot]

Pull request overview

Copilot reviewed 22 out of 22 changed files in this pull request and generated 12 comments.

[Copilot]

aria-label="Notifications" is hardcoded. Consider using t(...) for this ARIA label so assistive text is localized along with the visible UI.

Suggested change

	aria-label="Notifications"
	aria-label={t('Notifications')}

[Copilot]

New user-facing strings here aren't localized ("Mark all read" and the "{unreadCount} unread" label). Since useT is already available in this component, these should use translation keys (with pluralization) for non-English locales.

[Copilot]

"View all messages" is hardcoded and should be localized via useT so the dropdown is fully translated.

Suggested change

	View all messages
	{t('dropdown.viewAllMessages')}

[Copilot]

aria-label="Messages" is hardcoded. Consider translating this ARIA label (via useT) so screen-reader text matches the selected locale.

Suggested change

	aria-label="Messages"
	aria-label={t('messages')}

[Copilot]

This new utility module has deterministic behavior that’s easy to unit test (e.g., getInitials for single/multi-word names and pickGradient stability). Adding a small unit test file would help prevent regressions and keep coverage stable as these helpers get reused.

[Copilot]

"View all notifications" is hardcoded and should be localized via useT (and consider whether to="#" should be a real route or a button to avoid pushing a useless hash into history).

[Copilot]

The code fences in this “Migration Guide Example” section are mismatched: the outer ````markdown block is closed immediately after the first ```tsx snippet, leaving the “After” snippet and the rest of the section inside an unintended fence. Adjust the backtick counts/placement so the entire migration example is a single valid markdown code block (or remove the nested fencing).

[Copilot]

DropdownUser supports user.isLoading to render skeleton placeholders, but TemplateUserConfig (the public Template prop type exported from layoutTypes) doesn't include isLoading. This makes the loading state impossible to use from consumers without a type error. Consider adding isLoading?: boolean to TemplateUserConfig (or reusing the same user config type end-to-end).

Suggested change

	role?: string;
	role?: string;
	/** Render loading placeholders for the user trigger/content */
	isLoading?: boolean;

[Copilot]

aria-label="User menu" is hardcoded. Since this library already uses useT, consider translating this label (and any other user-facing ARIA strings) so screen-reader text matches the selected locale.

[Copilot]

New user-facing strings here aren't localized (e.g. "Mark all read" and the "{unreadCount} unread" label). Since this component already uses useT, these should be moved to translation keys (ideally with pluralization support) so they render correctly in non-English locales.

[Copilot]

Pull request overview

Copilot reviewed 23 out of 25 changed files in this pull request and generated 10 comments.

[Copilot]

DashboardLayout now depends on a header subcomponent’s prop type (DropdownUserConfig). This couples layout to an internal component module and duplicates the exported TemplateUserConfig contract. Prefer typing this prop with TemplateUserConfig (or moving the shared user type to a neutral module) to avoid circular/unstable internal dependencies.

[Copilot]

The footer CTA text ("View all notifications") is hardcoded. If this component is expected to support i18n (it already uses useT), translate this string and consider making the link target configurable instead of to="#".

Suggested change

	to="#"
	className="flex items-center justify-center gap-1.5 border-t border-stroke py-3 text-xs font-medium text-primary transition-colors hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4"
	>
	View all notifications
	to={t('dropdown.viewAllNotificationsLink')}
	className="flex items-center justify-center gap-1.5 border-t border-stroke py-3 text-xs font-medium text-primary transition-colors hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4"
	>
	{t('dropdown.viewAllNotifications')}

[Copilot]

TemplateUserConfig is the public type exported from src/index.ts, but it can’t express the loading state that DropdownUser supports (isLoading). Either add isLoading?: boolean here (and keep the naming aligned), or remove the loading-only behavior from the internal user config so the public API matches what the UI can do.

[Copilot]

This menu item uses to="#" and doesn’t close the dropdown. That causes a no-op navigation (and possibly scroll-to-top) and leaves the menu open. If this is meant to be an action, use a <button> and call setDropdownOpen(false); if it’s a real route, use a real to and still close on click like the other items.

[Copilot]

The "Mark all read" handler only flips notifying and doesn’t update any notification item unread flags. As a result, the badge can disappear while the list still renders unread styling/dots, and unreadCount never changes because notifications is a constant. Consider storing notifications in state and updating unread (and deriving unreadCount) when marking all as read.

[Copilot]

The "Mark all read" handler only flips notifying and doesn’t update message unread flags. This makes the badge disappear while the list still renders unread styling/dots, and unreadCount never changes because messages is a constant. Consider managing messages in state and updating unread when marking all as read.

[Copilot]

The footer CTA text ("View all messages") is hardcoded. If this UI is meant to be localized like the rest of the header, route this string through useT (and consider making the target route configurable for host apps).

Suggested change

	View all messages
	{t('dropdown.viewAllMessages')}

[Copilot]

The dark-mode checkbox has no accessible name (the wrapping <label> contains only SVGs). Screen readers will announce it as an unlabeled checkbox. Add an aria-label on the <input> (and/or an sr-only text node inside the label) so the control is discoverable.

[Copilot]

This changeset summary describes ESLint/Prettier/tooling changes, but this PR also changes exported types (TemplateUserConfig) and the dashboard header/user UI behavior. Please update the changeset content to reflect the actual user-facing changes being released so the generated changelog is accurate for consumers.

Suggested change

	Added and standardized ESLint and Prettier configuration for consistent code formatting across the codebase
	## Changes
	- Updated package configuration and workflows
	- Enhanced code quality and automation tooling
	- Improved CI/CD integration and monitoring capabilities
	Updated the widget kit with user-facing improvements to exported configuration types and dashboard header/user UI behavior, alongside supporting tooling updates.
	## Changes
	- Updated the exported `TemplateUserConfig` types to reflect the latest configuration API
	- Improved dashboard header and user UI behavior
	- Added and standardized ESLint and Prettier configuration for more consistent code formatting and maintenance

[Copilot]

headerActions is rendered directly inside a <ul>, which will produce invalid list markup if the caller passes a non-<li> node (likely, given the prop type is ReactNode). Consider either wrapping headerActions in an <li> here, or changing the surrounding element to a non-list container (e.g. <div>), or documenting/enforcing that headerActions must be <li> elements.

[sonarqubecloud]

Quality Gate passed

Issues
5 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[Copilot]

Pull request overview

Copilot reviewed 29 out of 33 changed files in this pull request and generated 4 comments.

[Copilot]

DropdownShell will render a badge (and "{badgeCount} unread") whenever notifying is true, even if badgeCount is 0, which can result in a visible "0" badge. Consider gating these UI elements on badgeCount > 0 (or deriving notifying from badgeCount) so the badge/label only appears when there are unread items.

Suggested change

	}) => (
	<ClickOutside onClick={onClose} className="relative">
	<li className="relative">
	<button
	type="button"
	onClick={onTriggerClick}
	className={TRIGGER_BTN_CN}
	aria-label={ariaLabel}
	>
	{notifying && (
	<span className="absolute -top-0.5 ltr:-right-0.5 rtl:-left-0.5 z-10 flex h-4 w-4 items-center justify-center rounded-full bg-danger text-[9px] font-bold text-white">
	{badgeCount}
	</span>
	)}
	{icon}
	</button>
	{isOpen && (
	<div className={`${PANEL_CN} ${panelWidth}`}>
	{/* Header */}
	<div className="flex items-center justify-between border-b border-stroke px-4 py-3 dark:border-strokedark">
	<div>
	<h5 className="text-sm font-semibold text-black dark:text-white">{title}</h5>
	{notifying && (
	<p className="text-xs text-body dark:text-bodydark">{badgeCount} unread</p>
	)}
	</div>
	<button
	type="button"
	onClick={onMarkAllRead}
	className="text-xs font-medium text-primary hover:underline"
	>
	Mark all read
	</button>
	</div>
	{/* List */}
	<ul className="flex max-h-72 flex-col overflow-y-auto">{children}</ul>
	{/* Footer */}
	<Link
	to={footerTo}
	className="flex items-center justify-center gap-1.5 border-t border-stroke py-3 text-xs font-medium text-primary transition-colors hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4"
	>
	{footerLabel}
	<svg
	width="12"
	height="12"
	viewBox="0 0 24 24"
	fill="none"
	stroke="currentColor"
	strokeWidth="2.5"
	strokeLinecap="round"
	strokeLinejoin="round"
	>
	<polyline points="9 18 15 12 9 6" />
	</svg>
	</Link>
	</div>
	)}
	</li>
	</ClickOutside>
	);
	}) => {
	const showUnreadIndicator = notifying && badgeCount > 0;
	return (
	<ClickOutside onClick={onClose} className="relative">
	<li className="relative">
	<button
	type="button"
	onClick={onTriggerClick}
	className={TRIGGER_BTN_CN}
	aria-label={ariaLabel}
	>
	{showUnreadIndicator && (
	<span className="absolute -top-0.5 ltr:-right-0.5 rtl:-left-0.5 z-10 flex h-4 w-4 items-center justify-center rounded-full bg-danger text-[9px] font-bold text-white">
	{badgeCount}
	</span>
	)}
	{icon}
	</button>
	{isOpen && (
	<div className={`${PANEL_CN} ${panelWidth}`}>
	{/* Header */}
	<div className="flex items-center justify-between border-b border-stroke px-4 py-3 dark:border-strokedark">
	<div>
	<h5 className="text-sm font-semibold text-black dark:text-white">{title}</h5>
	{showUnreadIndicator && (
	<p className="text-xs text-body dark:text-bodydark">{badgeCount} unread</p>
	)}
	</div>
	<button
	type="button"
	onClick={onMarkAllRead}
	className="text-xs font-medium text-primary hover:underline"
	>
	Mark all read
	</button>
	</div>
	{/* List */}
	<ul className="flex max-h-72 flex-col overflow-y-auto">{children}</ul>
	{/* Footer */}
	<Link
	to={footerTo}
	className="flex items-center justify-center gap-1.5 border-t border-stroke py-3 text-xs font-medium text-primary transition-colors hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4"
	>
	{footerLabel}
	<svg
	width="12"
	height="12"
	viewBox="0 0 24 24"
	fill="none"
	stroke="currentColor"
	strokeWidth="2.5"
	strokeLinecap="round"
	strokeLinejoin="round"
	>
	<polyline points="9 18 15 12 9 6" />
	</svg>
	</Link>
	</div>
	)}
	</li>
	</ClickOutside>
	);
	};

[Copilot]

New user-facing strings in DropdownShell (e.g. "Mark all read" and the "unread" label) are hard-coded rather than going through @ciscode/ui-translate-core. Since the surrounding header UI is already localized, consider passing these labels in as props from the parent (where useT is available) or adding translation support directly in this component.

[Copilot]

testDir is not a recognized Vitest config option (Vitest uses dir to set the tests root). As written, this setting will be ignored (or may break typechecking depending on Vitest version), so the suite may not run from the intended directory. Consider replacing testDir with dir, or remove it since include already scopes test files.

[Copilot]

The lint / lint:fix scripts were updated to use eslint.config.mjs, but lint-staged in this same package.json still runs eslint -c eslint.config.js --fix. Since the repo no longer contains eslint.config.js, pre-commit linting will fail. Update the lint-staged command to use eslint.config.mjs (or reference the same config as the scripts).