CORE-THEME

CORE-THEME 1

Local setup and commit checks

After cloning the repo, run:

npm run setup

This installs dependencies with npm ci and configures Git to use the shared .githooks/pre-commit hook. The hook runs impacted component tests before each commit.

If dependencies are already installed, run:

npm run install:hooks

npm run dev, npm test, and npm run build also refresh the hook setup automatically. Git hooks are local machine settings, so CI and branch protection remain the final enforcement.

Auth handling for pages (built in)

When a page from this library (e.g. AdminPage, JobsListPage, …) is opened without a logged-in session, the data APIs reject with a 401 and the page would otherwise render empty ("no module") with no explanation.

This is handled inside the package — every exported page is already wrapped with an auth guard. A host app does nothing: just route to the page, and if it's opened without a session the user sees a clear "You haven't logged into this session. Please login to access the data." screen with a Login button.

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { AdminPage } from '@realtek/core-theme';
import '@realtek/core-theme/style.css';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* opened without login → shows the "not logged in" screen automatically */}
        <Route path="/admin" element={<AdminPage />} />
      </Routes>
    </BrowserRouter>
  );
}

Guarding your own pages (optional)

The same guard is exported for any custom page the host app builds:

import { AuthGuard, withAuthGuard } from '@realtek/core-theme';

// wrap inline…
<AuthGuard><MyPage /></AuthGuard>

// …or bake it into your own component, like the library does:
const MyGuardedPage = withAuthGuard(MyPage);

Customizing the screen (AuthGuard / withAuthGuard props, all optional)

| Prop | Default | Purpose | | ------------ | ------------------------------------------------------------------- | -------------------------------------------------- | | title | "You're not logged in" | Heading on the error screen. | | message | "You haven't logged into this session. Please login to access the data." | Sub-text. | | loginPath | "/login" | Where the Login button sends the user. | | loginLabel | "Go to Login" | Login button text. | | onLogin | — | Custom handler for the Login button (overrides loginPath). | | fallback | — | Render your own screen instead of the default one. |

The guard re-checks the session live on login, logout, tab focus and cross-tab storage changes, so it reveals/hides content without a reload.