@stevederico/skateboard-ui 5.0.0 → 5.1.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+5.1.0
+
+  Add loadLegal option
+  Lazy legal TextView routes
+  has* legal footer flags
+
 # CHANGELOG
 
 5.0.0

package/dist/App.d.ts

@@ -1,5 +1,7 @@
 import type { ComponentType, ReactNode } from 'react';
-import type { SkateboardConstants } from './components/core/Utilities.js';
+import type { SkateboardConstants, LegalTexts } from './components/core/Utilities.js';
+/** Re-export for consumers that type `loadLegal`. */
+export type { LegalTexts } from './components/core/Utilities.js';
 /** A route rendered under /app (config.appRoutes). */
 export interface AppRoute {
     path: string;
@@ -26,6 +28,12 @@ export interface CreateSkateboardAppConfig {
         children?: ReactNode;
     }>;
     overrides?: AppOverrides;
+    /**
+     * Lazy-load legal document bodies so they stay out of the main JS chunk.
+     * When set, `/terms` `/privacy` `/eula` `/subs` call this on first visit.
+     * Eager `constants.termsOfService` etc. remain supported as a fallback.
+     */
+    loadLegal?: () => Promise<LegalTexts>;
 }
 /**
  * Bootstrap and render a skateboard-ui application.
@@ -49,6 +57,8 @@ export interface CreateSkateboardAppConfig {
  * @param {React.ComponentType} [config.overrides.notFound] - Replace NotFound
  * @param {React.ComponentType} [config.overrides.authOverlay] - Replace AuthOverlay
  *
+ * @param {() => Promise<LegalTexts>} [config.loadLegal] - Lazy-load legal document bodies
+ *
  * @example
  * import { createSkateboardApp } from '@stevederico/skateboard-ui/App';
  * import constants from './constants.json';
@@ -59,6 +69,14 @@ export interface CreateSkateboardAppConfig {
  * });
  *
  * @example
+ * // Keep legal text out of the main chunk
+ * createSkateboardApp({
+ *   constants,
+ *   appRoutes: [{ path: 'home', element: <HomeView /> }],
+ *   loadLegal: () => import('./legal.json'),
+ * });
+ *
+ * @example
  * // Override built-in views
  * createSkateboardApp({
  *   constants,
@@ -69,4 +87,4 @@ export interface CreateSkateboardAppConfig {
  *   }
  * });
  */
-export declare function createSkateboardApp({ constants, appRoutes, defaultRoute, landingPage, wrapper: Wrapper, overrides }: CreateSkateboardAppConfig): void;
+export declare function createSkateboardApp({ constants, appRoutes, defaultRoute, landingPage, wrapper: Wrapper, overrides, loadLegal }: CreateSkateboardAppConfig): void;

package/dist/App.js

@@ -6,7 +6,7 @@ import { getState } from './components/core/Context.js';
 import { ThemeProvider } from './components/core/ThemeProvider.js';
 import Layout from './components/layout/Layout.js';
 import LandingView from './components/views/LandingView.js';
-import TextView from './components/views/TextView.js';
+import LegalRoute from './components/views/LegalRoute.js';
 import SignUpView from './components/views/SignUpView.js';
 import SignInView from './components/views/SignInView.js';
 import SignOutView from './components/views/SignOutView.js';
@@ -39,7 +39,7 @@ function AuthRedirect() {
     }, [dispatch, navigate, location.state]);
     return null;
 }
-function App({ constants, appRoutes, defaultRoute, landingPage, overrides = {} }) {
+function App({ constants, appRoutes, defaultRoute, landingPage, overrides = {}, loadLegal }) {
     const location = useLocation();
     // document.title is set by useAppSetup (on navigation) — single source of truth.
     useAppSetup(location);
@@ -53,7 +53,7 @@ function App({ constants, appRoutes, defaultRoute, landingPage, overrides = {} }
     // An explicit override always wins, so consumers can supply custom auth pages.
     const SignInComponent = overrides.signIn || (isAuthOverlayEnabled() ? AuthRedirect : SignInView);
     const SignUpComponent = overrides.signUp || (isAuthOverlayEnabled() ? AuthRedirect : SignUpView);
-    return (_jsxs(Routes, { children: [_jsxs(Route, { element: _jsx(LayoutComponent, {}), children: [_jsx(Route, { path: "/console", element: _jsx(Navigate, { to: "/app", replace: true }) }), _jsxs(Route, { path: "/app", element: _jsx(ProtectedRoute, {}), children: [_jsx(Route, { index: true, element: _jsx(Navigate, { to: defaultRoute, replace: true }) }), appRoutes.map(({ path, element }) => (_jsx(Route, { path: path, element: element }, path))), _jsx(Route, { path: "settings", element: _jsx(SettingsComponent, {}) }), _jsx(Route, { path: "payment", element: _jsx(PaymentComponent, {}) })] })] }), _jsx(Route, { path: "/", element: landingPage || _jsx(LandingView, {}) }), _jsx(Route, { path: "/signin", element: _jsx(SignInComponent, {}) }), _jsx(Route, { path: "/signup", element: _jsx(SignUpComponent, {}) }), _jsx(Route, { path: "/signout", element: _jsx(SignOutComponent, {}) }), _jsx(Route, { path: "/terms", element: _jsx(TextView, { details: constants.termsOfService }) }), _jsx(Route, { path: "/privacy", element: _jsx(TextView, { details: constants.privacyPolicy }) }), _jsx(Route, { path: "/eula", element: _jsx(TextView, { details: constants.EULA }) }), _jsx(Route, { path: "/subs", element: _jsx(TextView, { details: constants.subscriptionDetails }) }), _jsx(Route, { path: "*", element: _jsx(NotFoundComponent, {}) })] }));
+    return (_jsxs(Routes, { children: [_jsxs(Route, { element: _jsx(LayoutComponent, {}), children: [_jsx(Route, { path: "/console", element: _jsx(Navigate, { to: "/app", replace: true }) }), _jsxs(Route, { path: "/app", element: _jsx(ProtectedRoute, {}), children: [_jsx(Route, { index: true, element: _jsx(Navigate, { to: defaultRoute, replace: true }) }), appRoutes.map(({ path, element }) => (_jsx(Route, { path: path, element: element }, path))), _jsx(Route, { path: "settings", element: _jsx(SettingsComponent, {}) }), _jsx(Route, { path: "payment", element: _jsx(PaymentComponent, {}) })] })] }), _jsx(Route, { path: "/", element: landingPage || _jsx(LandingView, {}) }), _jsx(Route, { path: "/signin", element: _jsx(SignInComponent, {}) }), _jsx(Route, { path: "/signup", element: _jsx(SignUpComponent, {}) }), _jsx(Route, { path: "/signout", element: _jsx(SignOutComponent, {}) }), _jsx(Route, { path: "/terms", element: _jsx(LegalRoute, { field: "termsOfService", fallback: constants.termsOfService, loadLegal: loadLegal }) }), _jsx(Route, { path: "/privacy", element: _jsx(LegalRoute, { field: "privacyPolicy", fallback: constants.privacyPolicy, loadLegal: loadLegal }) }), _jsx(Route, { path: "/eula", element: _jsx(LegalRoute, { field: "EULA", fallback: constants.EULA, loadLegal: loadLegal }) }), _jsx(Route, { path: "/subs", element: _jsx(LegalRoute, { field: "subscriptionDetails", fallback: constants.subscriptionDetails, loadLegal: loadLegal }) }), _jsx(Route, { path: "*", element: _jsx(NotFoundComponent, {}) })] }));
 }
 /**
  * Bootstrap and render a skateboard-ui application.
@@ -77,6 +77,8 @@ function App({ constants, appRoutes, defaultRoute, landingPage, overrides = {} }
  * @param {React.ComponentType} [config.overrides.notFound] - Replace NotFound
  * @param {React.ComponentType} [config.overrides.authOverlay] - Replace AuthOverlay
  *
+ * @param {() => Promise<LegalTexts>} [config.loadLegal] - Lazy-load legal document bodies
+ *
  * @example
  * import { createSkateboardApp } from '@stevederico/skateboard-ui/App';
  * import constants from './constants.json';
@@ -87,6 +89,14 @@ function App({ constants, appRoutes, defaultRoute, landingPage, overrides = {} }
  * });
  *
  * @example
+ * // Keep legal text out of the main chunk
+ * createSkateboardApp({
+ *   constants,
+ *   appRoutes: [{ path: 'home', element: <HomeView /> }],
+ *   loadLegal: () => import('./legal.json'),
+ * });
+ *
+ * @example
  * // Override built-in views
  * createSkateboardApp({
  *   constants,
@@ -97,7 +107,7 @@ function App({ constants, appRoutes, defaultRoute, landingPage, overrides = {} }
  *   }
  * });
  */
-export function createSkateboardApp({ constants, appRoutes, defaultRoute = appRoutes[0]?.path || 'home', landingPage, wrapper: Wrapper, overrides }) {
+export function createSkateboardApp({ constants, appRoutes, defaultRoute = appRoutes[0]?.path || 'home', landingPage, wrapper: Wrapper, overrides, loadLegal }) {
     // Validate constants before initialization
     validateConstants(constants);
     // Initialize utilities with constants
@@ -112,5 +122,5 @@ export function createSkateboardApp({ constants, appRoutes, defaultRoute = appRo
     const container = document.getElementById('root');
     const root = createRoot(container);
     const AuthOverlayComponent = overrides?.authOverlay || AuthOverlay;
-    root.render(_jsx(ErrorBoundary, { children: _jsx(ThemeProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, children: _jsx(ContextProvider, { constants: constants, children: Wrapper ? (_jsx(Wrapper, { children: _jsxs(Router, { children: [_jsx(AuthOverlayComponent, {}), _jsx(App, { constants: constants, appRoutes: appRoutes, defaultRoute: defaultRoute, landingPage: landingPage, overrides: overrides })] }) })) : (_jsxs(Router, { children: [_jsx(AuthOverlayComponent, {}), _jsx(App, { constants: constants, appRoutes: appRoutes, defaultRoute: defaultRoute, landingPage: landingPage, overrides: overrides })] })) }) }) }));
+    root.render(_jsx(ErrorBoundary, { children: _jsx(ThemeProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, children: _jsx(ContextProvider, { constants: constants, children: Wrapper ? (_jsx(Wrapper, { children: _jsxs(Router, { children: [_jsx(AuthOverlayComponent, {}), _jsx(App, { constants: constants, appRoutes: appRoutes, defaultRoute: defaultRoute, landingPage: landingPage, overrides: overrides, loadLegal: loadLegal })] }) })) : (_jsxs(Router, { children: [_jsx(AuthOverlayComponent, {}), _jsx(App, { constants: constants, appRoutes: appRoutes, defaultRoute: defaultRoute, landingPage: landingPage, overrides: overrides, loadLegal: loadLegal })] })) }) }) }));
 }

package/dist/components/core/Utilities.d.ts

@@ -28,6 +28,13 @@ export interface StripeProduct {
     features?: string[];
     [key: string]: unknown;
 }
+/** Legal document bodies that can be loaded lazily via `loadLegal`. */
+export interface LegalTexts {
+    termsOfService?: string;
+    privacyPolicy?: string;
+    EULA?: string;
+    subscriptionDetails?: string;
+}
 /**
  * App configuration object passed to createSkateboardApp / initializeUtilities.
  * Required fields are enforced at runtime by validateConstants(); everything
@@ -56,6 +63,14 @@ export interface SkateboardConstants {
     privacyPolicy?: string;
     EULA?: string;
     subscriptionDetails?: string;
+    /** Show Privacy footer link when the body is loaded via `loadLegal` instead of constants. */
+    hasPrivacyPolicy?: boolean;
+    /** Show Terms footer link when the body is loaded via `loadLegal` instead of constants. */
+    hasTermsOfService?: boolean;
+    /** Show EULA footer link when the body is loaded via `loadLegal` instead of constants. */
+    hasEULA?: boolean;
+    /** Show subscription-details link when the body is loaded via `loadLegal`. */
+    hasSubscriptionDetails?: boolean;
     navLinks?: ConstantsLink[];
     footerLinks?: ConstantsLink[];
     pricing?: {

package/dist/components/views/LandingView.js

@@ -54,9 +54,9 @@ export default function LandingView() {
         ...((constants.stripeProducts?.length ?? 0) > 0 ? [{ label: 'Pricing', href: '#pricing' }] : []),
     ];
     const footerLinks = constants.footerLinks || [
-        ...(constants.privacyPolicy ? [PRIVACY_LINK] : []),
-        ...(constants.termsOfService ? [TERMS_LINK] : []),
-        ...(constants.EULA ? [EULA_LINK] : []),
+        ...(constants.privacyPolicy || constants.hasPrivacyPolicy ? [PRIVACY_LINK] : []),
+        ...(constants.termsOfService || constants.hasTermsOfService ? [TERMS_LINK] : []),
+        ...(constants.EULA || constants.hasEULA ? [EULA_LINK] : []),
     ];
     const items = constants.features?.items || [];
     const sp = (constants.stripeProducts || [])[0];

package/dist/components/views/LegalRoute.d.ts

@@ -0,0 +1,22 @@
+import type { LegalTexts } from '../core/Utilities.js';
+/** Which legal blob a route should render. */
+export type LegalField = keyof LegalTexts;
+export interface LegalRouteProps {
+    /** Field to read from the loaded (or eager) legal texts. */
+    field: LegalField;
+    /** Eager text from constants — used when `loadLegal` is absent. */
+    fallback?: string;
+    /** Optional lazy loader; preferred over embedding legal text in the main chunk. */
+    loadLegal?: () => Promise<LegalTexts>;
+}
+/**
+ * Route element for `/terms`, `/privacy`, `/eula`, and `/subs`.
+ *
+ * When `loadLegal` is provided the body is fetched on first visit under a
+ * spinner; otherwise `fallback` (eager constants) is rendered immediately so
+ * skateboard-ui 5.0 apps keep working unchanged.
+ *
+ * @param props - Field name plus optional loader / eager fallback
+ * @returns TextView once the document is available
+ */
+export default function LegalRoute({ field, fallback, loadLegal }: LegalRouteProps): import("react").JSX.Element;

package/dist/components/views/LegalRoute.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import TextView from './TextView.js';
+import { Spinner } from '../../ui/spinner.js';
+/**
+ * Route element for `/terms`, `/privacy`, `/eula`, and `/subs`.
+ *
+ * When `loadLegal` is provided the body is fetched on first visit under a
+ * spinner; otherwise `fallback` (eager constants) is rendered immediately so
+ * skateboard-ui 5.0 apps keep working unchanged.
+ *
+ * @param props - Field name plus optional loader / eager fallback
+ * @returns TextView once the document is available
+ */
+export default function LegalRoute({ field, fallback, loadLegal }) {
+    const [details, setDetails] = useState(loadLegal ? null : (fallback ?? ''));
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (!loadLegal) {
+            setDetails(fallback ?? '');
+            return;
+        }
+        let cancelled = false;
+        loadLegal()
+            .then((legal) => {
+            if (cancelled)
+                return;
+            const value = legal[field];
+            setDetails(typeof value === 'string' ? value : '');
+        })
+            .catch((err) => {
+            if (cancelled)
+                return;
+            console.error('Failed to load legal text', err);
+            setError('Could not load this document. Try again.');
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [field, fallback, loadLegal]);
+    if (error) {
+        return (_jsx("div", { className: "flex flex-1 items-center justify-center p-8 text-sm text-muted-foreground", role: "alert", children: error }));
+    }
+    if (details === null) {
+        return (_jsx("div", { className: "flex flex-1 items-center justify-center p-8", role: "status", "aria-label": "Loading", children: _jsx(Spinner, {}) }));
+    }
+    return _jsx(TextView, { details: details });
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "5.0.0",
+  "version": "5.1.0",
   "type": "module",
   "exports": {
     ".": {