@caseparts-org/casecore 0.0.3 → 0.0.5

package/README.md

@@ -1,60 +1,60 @@
-# CaseCore React Component & Logic Library
-
-This project is a reusable logic and component library for React and Next.js applications, designed to house all core business logic for our front-end apps, decoupled from any specific UI. While it currently focuses on authentication, claims, and session management, it is intended to grow into a central place for all shared business logic, utilities, and core functionality needed across our projects.
-
-## Project Structure
-
-- **/lib/**
-  - Contains all code intended for export as part of the library.
-  - Includes authentication context/provider, hooks, utility functions, and type definitions.
-  - The main entry point for consumers is `lib/index.ts`.
-- **/src/App.tsx**
-  - Local demo/test app for development, not included in the library build.
-  - Useful for running and testing components locally with `npm run dev`.
-- **/public/**
-  - Static assets for local development/demo.
-- **/index.html**
-  - Entry point for local development with Vite.
-
-## Key Features
-
-- **Authentication Context (`AuthProvider`)**
-  - Provides authentication state, login/logout/impersonate methods, and claims to your app via React context.
-  - Handles JWT parsing, localStorage/sessionStorage, and API integration.
-- **Claims & Session Utilities**
-  - `buildClaimsFromPayload`: Normalizes JWT payloads into a consistent claims object.
-  - `getSessionId`: Manages session IDs in sessionStorage.
-  - `useLocalStorage`: React hook for persistent state with automatic key prefixing.
-- **TypeScript-first**
-  - All types and interfaces are defined in `lib/authentication/AuthTypes.ts` for strong typing and IDE support.
-- **Testing**
-  - Tests are colocated with their modules (e.g., `AuthContext.test.tsx`).
-  - Mocks for fetch and JWT decoding are used to simulate authentication flows.
-
-## Usage
-
-- **As a library:**
-  - Import from `lib/index.ts` in your consuming app:
-    ```ts
-    import { AuthProvider, useAuthContext } from 'casecore/lib';
-    ```
-- **For local development:**
-  - Run `npm run dev` to start the Vite dev server and use the demo app in `src/App.tsx`.
-- **To run tests locally:**
-  - Run `npm test` or `npx vitest run` to execute all tests.
-  - For watch mode (auto-re-run on file changes), use:
-    ```sh
-    npx vitest
-    ```
-  - Test files are colocated with their modules (e.g., `AuthContext.test.tsx`).
-
-## Contributing
-
-- Add new core logic, hooks, or components to `/lib`.
-- Add or update exports in `lib/index.ts`.
-- Use `/src` and `/public` for local-only demo/testing code.
-- Write and run tests for all exported logic.
-
-## License
-
-MIT
+# CaseCore React Component & Logic Library
+
+This project is a reusable logic and component library for React and Next.js applications, designed to house all core business logic for our front-end apps, decoupled from any specific UI. While it currently focuses on authentication, claims, and session management, it is intended to grow into a central place for all shared business logic, utilities, and core functionality needed across our projects.
+
+## Project Structure
+
+- **/lib/**
+  - Contains all code intended for export as part of the library.
+  - Includes authentication context/provider, hooks, utility functions, and type definitions.
+  - The main entry point for consumers is `lib/index.ts`.
+- **/src/App.tsx**
+  - Local demo/test app for development, not included in the library build.
+  - Useful for running and testing components locally with `npm run dev`.
+- **/public/**
+  - Static assets for local development/demo.
+- **/index.html**
+  - Entry point for local development with Vite.
+
+## Key Features
+
+- **Authentication Context (`AuthProvider`)**
+  - Provides authentication state, login/logout/impersonate methods, and claims to your app via React context.
+  - Handles JWT parsing, localStorage/sessionStorage, and API integration.
+- **Claims & Session Utilities**
+  - `buildClaimsFromPayload`: Normalizes JWT payloads into a consistent claims object.
+  - `getSessionId`: Manages session IDs in sessionStorage.
+  - `useLocalStorage`: React hook for persistent state with automatic key prefixing.
+- **TypeScript-first**
+  - All types and interfaces are defined in `lib/authentication/AuthTypes.ts` for strong typing and IDE support.
+- **Testing**
+  - Tests are colocated with their modules (e.g., `AuthContext.test.tsx`).
+  - Mocks for fetch and JWT decoding are used to simulate authentication flows.
+
+## Usage
+
+- **As a library:**
+  - Import from `lib/index.ts` in your consuming app:
+    ```ts
+    import { AuthProvider, useAuthContext } from 'casecore/lib';
+    ```
+- **For local development:**
+  - Run `npm run dev` to start the Vite dev server and use the demo app in `src/App.tsx`.
+- **To run tests locally:**
+  - Run `npm test` or `npx vitest run` to execute all tests.
+  - For watch mode (auto-re-run on file changes), use:
+    ```sh
+    npx vitest
+    ```
+  - Test files are colocated with their modules (e.g., `AuthContext.test.tsx`).
+
+## Contributing
+
+- Add new core logic, hooks, or components to `/lib`.
+- Add or update exports in `lib/index.ts`.
+- Use `/src` and `/public` for local-only demo/testing code.
+- Write and run tests for all exported logic.
+
+## License
+
+MIT

package/dist/environment.d.ts

@@ -0,0 +1,3 @@
+declare const environment: Environment;
+export type Environment = "Dev" | "Prod" | "local";
+export default environment;

package/dist/environment.js

@@ -0,0 +1,2 @@
+const environment = "Dev";
+export default environment;

package/dist/src/App.d.ts

@@ -0,0 +1,3 @@
+import './App.css';
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/src/App.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './App.css';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import AuthProvider from './lib/authentication/AuthContext';
+import Login from './local/login/Login';
+import Impersonate from './local/impersonate/Impersonate';
+import AppSettings from './local/util/AppSettings';
+import Layout from './local/layout/Layout';
+import MicroFlex from './local/microflex/MicroFlex';
+function App() {
+    // You can define your AuthProvider props here or import them
+    const urls = {
+        Login: AppSettings.Authentication.Login,
+        Logout: AppSettings.Authentication.Logout,
+        Impersonate: (email) => AppSettings.Authentication.Impersonate(email),
+    };
+    const apiKey = import.meta.env.VITE_APIKEY;
+    const sessionClientId = 'casecore';
+    return (_jsx(AuthProvider, { urls: urls, apiKey: apiKey, sessionClientId: sessionClientId, children: _jsx(BrowserRouter, { children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Home, {}) }), _jsx(Route, { path: "/login", element: _jsx(Login, {}) }), _jsx(Route, { path: "/impersonate", element: _jsx(Impersonate, {}) }), _jsx(Route, { path: "/microflex", element: _jsx(MicroFlex, {}) })] }) }) }));
+}
+function Home() {
+    return (_jsx(Layout, { children: _jsx("h1", { children: "Home" }) }));
+}
+// const urls = {
+//   Login: '/api/login',
+//   Logout: '/api/logout',
+//   Impersonate: (email: string) => `/api/impersonate/${email}`,
+// };
+// const apiKey = 'test-api-key';
+// const sessionClientId = 'test-session-id';
+// function TestConsumer() {
+//   const ctx = useAuthContext();
+//   if (!ctx) return <div>no context</div>;
+//   return (
+//     <div>
+//       <div data-testid="initialized">{ctx.initialized}</div>
+//       <div data-testid="email">{ctx.email}</div>
+//       <div data-testid="userType">{ctx.userType}</div>
+//       <div data-testid="claims">{JSON.stringify(ctx.claims)}</div>
+//       <button onClick={() => ctx.login('test@example.com', 'pw')}>Login</button>
+//       <button onClick={() => ctx.logout()}>Logout</button>
+//       <button onClick={() => ctx.impersonate('imp@example.com')}>Impersonate</button>
+//     </div>
+//   );
+// }
+export default App;

package/dist/src/lib/authentication/AuthContext.d.ts

@@ -0,0 +1,34 @@
+import React, { ReactNode } from "react";
+import { Claims } from "./AuthTypes";
+export type AuthUrls = {
+    Login: string;
+    Logout: string;
+    Impersonate: (_email: string | null) => string;
+};
+export type AuthProviderProps = {
+    children: ReactNode;
+    urls: AuthUrls;
+    apiKey: string;
+    sessionClientId: string;
+};
+export type AuthContextType = {
+    initialized: string;
+    claims: Claims | null;
+    email: string;
+    discountLevel: string;
+    userType: string;
+    login: (_email?: string, _password?: string) => Promise<unknown>;
+    logout: () => Promise<boolean>;
+    impersonate: (_email: string | null) => Promise<string | null>;
+    fetch: (_url: string, _options?: RequestInit) => Promise<Response | null>;
+    hasRight: (_right: string) => boolean;
+    token: string | null;
+    sessionId: string;
+};
+export type Credentials = {
+    email: string;
+    password: string;
+};
+export declare const AuthContext: React.Context<AuthContextType | undefined>;
+export declare const useAuthContext: () => AuthContextType | undefined;
+export default function AuthProvider({ children, urls, apiKey, sessionClientId }: AuthProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/lib/authentication/AuthContext.js

@@ -0,0 +1,252 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useContext, useState, useEffect, createContext } from "react";
+import { jwtDecode } from "jwt-decode";
+import useLocalStorage from "../hooks/useLocalStorage";
+import { getSessionId } from '../utils/SessionUtils';
+import { buildClaimsFromPayload } from "../utils/ClaimsUtils";
+export const AuthContext = createContext(undefined);
+export const useAuthContext = () => {
+    return useContext(AuthContext);
+};
+export default function AuthProvider({ children, urls, apiKey, sessionClientId }) {
+    const [token, setToken] = useState(null);
+    const [initialized, setInitialized] = useState("");
+    const [claims, setClaims] = useState(null);
+    const [localToken, setLocalToken] = useLocalStorage("token", "");
+    const credentialsRef = React.useRef(null);
+    const sessionId = getSessionId(sessionClientId);
+    useEffect(() => {
+        if (token)
+            return;
+        // Logs in using local storage token if present or cookies. If neither exist, API will return a Guest token.
+        login()
+            .catch(e => setInitialized(e.message));
+        // eslint-disable-next-line
+    }, [token]); // Triggers login when setting token in `logout` to obtain a Guest token.
+    //#region Fetch extensions
+    class FetchError extends Error {
+        statusCode;
+        constructor(statusCode, message) {
+            super(message);
+            this.name = "FetchError";
+            this.statusCode = statusCode;
+        }
+    }
+    function defaultErrorMessage(status, url) {
+        switch (status) {
+            case 401: return "You are not authenticated";
+            case 403: return "You do not have permission to access this page";
+            case 404: return "Page does not exist: " + url;
+            default: return "Unexpected Error";
+        }
+    }
+    /**
+   * Performs a fetch request and throws a FetchError for HTTP errors (except 500).
+   *
+   * - Returns the response for successful requests (status < 400) and for status 500.
+   * - For other error statuses, reads the response text and throws a FetchError with a normalized message.
+   * - Handles network or parsing errors by rethrowing them.
+   *
+   * @param url - The URL to fetch.
+   * @param options - Optional fetch options (method, headers, body, etc).
+   * @returns {Promise<Response>} The fetch response if successful.
+   * @throws {FetchError} If the response status is an error (except 500).
+   */
+    const fancyFetch = (url, options) => {
+        return fetch(url, options)
+            .then(async (res) => {
+            if (res.status < 400) {
+                return res;
+            }
+            else if (res.status === 500) {
+                return res;
+            }
+            else {
+                const text = await res.text();
+                const message = text ? String(text).replace(/['"]+/g, '')
+                    : res.statusText ? res.statusText
+                        : defaultErrorMessage(res.status, url);
+                throw new FetchError(res.status, message);
+            }
+        })
+            .catch(e => { throw e; });
+    };
+    /**
+   * Performs a fetch request with authentication and automatic retry on 401 errors.
+   *
+   * - Adds Authorization and X-Session-ID headers if available.
+   * - On a 401 response, attempts to re-authenticate by calling login(), updates the Authorization header, and retries the request once.
+   * - Throws for other errors or if re-authentication fails.
+   *
+   * @param url - The URL to fetch.
+   * @param options - Optional fetch options (method, headers, body, etc).
+   * @returns {Promise<Response>} The fetch response if successful.
+   * @throws {FetchError} If the request fails or re-authentication fails.
+   */
+    const fancyFetchWithRetry = (url, options) => {
+        const opts = { ...options };
+        opts.method = opts.method || 'GET';
+        opts.headers = { ...(opts.headers || {}) };
+        if (token)
+            opts.headers.Authorization = "Bearer " + token;
+        opts.headers['X-Session-ID'] = sessionId;
+        opts.credentials = 'include';
+        return fancyFetch(url, opts)
+            .catch(e => {
+            if (e.statusCode === 401) {
+                return login()
+                    .then(fetchTokenResult => {
+                    opts.headers.Authorization = "Bearer " + fetchTokenResult.token;
+                })
+                    .then(() => fancyFetch(url, opts))
+                    .catch(loginError => { throw loginError; });
+            }
+            else {
+                throw e;
+            }
+        });
+    };
+    //#endregion
+    //#region Login/Logout with related helpers
+    /**
+   * Authenticates the user and returns a token/claims object.
+   *
+   * The login logic attempts authentication in the following order:
+   * 1. If running locally and no email is provided, but credentials are stored in memory, it uses those credentials to fetch a token.
+   * 2. If running locally and a JWT exists in local storage (and no email is provided), it uses that token and parses claims from it.
+   * 3. Otherwise, it calls fetchToken with the provided email and password (or undefined for guest login).
+   *
+   * This function is used both for explicit user login and for automatic login (e.g., after logout or on mount) to obtain a guest or user token as needed.
+   *
+   * @param email - Optional email/username for login. If omitted, attempts to use stored credentials or local storage.
+   * @param password - Optional password for login.
+   * @returns {Promise<FetchTokenResult>} A promise resolving to the token and claims.
+   */
+    const login = (email, password) => {
+        // const localTokenJson = window.localStorage.getItem("CPC.token")
+        // const localToken = localTokenJson ? JSON.parse(localTokenJson) : null
+        if (isLocal() && !email && credentialsRef.current) { // Has logged in using credentials and stored in state
+            return fetchToken(credentialsRef.current.email, credentialsRef.current.password);
+        }
+        if (isLocal() && localToken && !email) { // Local storage jwt exists on localhost
+            const claims = assignToken(localToken);
+            return Promise.resolve({ token: localToken, claims });
+        }
+        return fetchToken(email, password);
+    };
+    /**
+     * Logs out the current user and resets authentication state.
+     *
+     * - Calls the logout API endpoint to invalidate the session on the server.
+     * - Clears any stored credentials in memory.
+     * - Sets the token to null, which triggers a re-authentication as a guest via useEffect.
+     * - Clears claims state.
+     *
+     * @returns {Promise<boolean>} Resolves to true when logout is complete.
+     */
+    const logout = () => {
+        if (isLocal())
+            setLocalToken();
+        return fancyFetch(urls.Logout, { method: 'POST', credentials: 'include' })
+            .then(() => {
+            credentialsRef.current = null;
+            setToken(null); // Setting token null triggers useEffect to reauthenticate as an anonymous user
+            setClaims(null);
+            return true;
+        });
+    };
+    /**
+     * Impersonates another user by email, updating authentication state with the new user's claims.
+     *
+     * - Calls the impersonate API endpoint with the provided email.
+     * - Parses and assigns the returned JWT as the current authentication token and claims.
+     * - If running locally, stores the new JWT in local storage.
+     *
+     * @param email - The email address of the user to impersonate.
+     * @returns {Promise<string | null>} Resolves to the new JWT string if successful, or null otherwise.
+     */
+    const impersonate = (email) => {
+        return fancyFetchWithRetry(urls.Impersonate(email))
+            .then(res => res ? res.text() : null)
+            .then(jwt => jwt ? jwt.replace(/['"]+/g, '') : null)
+            .then(jwt => {
+            assignToken(jwt);
+            if (isLocal() && jwt)
+                setLocalToken(jwt);
+            return jwt;
+        });
+    };
+    function isLocal() {
+        const hostname = window.location.hostname;
+        return hostname === "localhost" || hostname === "127.0.0.1";
+    }
+    const assignToken = (jwt) => {
+        if (!jwt) {
+            throw Error("Cannot parse null");
+        }
+        const decoded = jwtDecode(jwt);
+        const claims = buildClaimsFromPayload(decoded);
+        setInitialized("OK");
+        setToken(jwt);
+        setClaims(claims);
+        return claims;
+    };
+    async function fetchToken(email, password) {
+        const options = {
+            method: 'POST',
+            credentials: 'include',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+                'ApiKey': apiKey
+            }
+        };
+        if (email) {
+            options.body = JSON.stringify({
+                UserName: email,
+                Password: password,
+                RememberMe: false
+            });
+        }
+        return fancyFetch(urls.Login, options)
+            .then(res => res ? res.text() : null)
+            .then(jwt => jwt ? jwt.replace(/['"]+/g, '') : null)
+            .then(jwt => {
+            const decoded = assignToken(jwt);
+            if (isLocal() && email && password) {
+                credentialsRef.current = { email, password };
+            }
+            if (isLocal() && decoded.UserType !== "Guest" && jwt) {
+                setLocalToken(jwt); // Store token in Local Storage
+            }
+            return { token: jwt, claims: decoded };
+        });
+    }
+    //#endregion
+    const hasRight = (right) => {
+        const claimsType = claims;
+        if (claimsType.UserType === "Guest")
+            return false;
+        if (claimsType.Customer && claimsType.Customer.Rights) {
+            return claimsType.Customer.Rights.includes(right);
+        }
+        if (claimsType.Employee && claimsType.Employee.Rights) {
+            return claimsType.Employee.Rights.includes(right);
+        }
+        return false;
+    };
+    return (_jsx(AuthContext.Provider, { value: {
+            initialized,
+            claims,
+            email: claims?.Customer?.UserName || claims?.Employee?.UserName || "",
+            discountLevel: claims?.Customer?.CustClass || "EndUser",
+            userType: claims?.UserType || "",
+            login,
+            logout,
+            impersonate,
+            fetch: fancyFetchWithRetry,
+            hasRight,
+            token,
+            sessionId
+        }, children: children }));
+}