@realtek/core-theme-live 0.0.338

package/README.md

@@ -0,0 +1,80 @@
+# CORE-THEME
+CORE-THEME 1
+
+## Local setup and commit checks
+
+After cloning the repo, run:
+
+```bash
+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:
+
+```bash
+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.
+
+```jsx
+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:
+
+```jsx
+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.