@stevederico/skateboard-ui 2.21.0 → 2.23.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # CHANGELOG
 
+2.23.0
+
+  Rename auth view functions
+  Harden PaymentView redirect check
+  Replace UNSAFE_NavigationContext usage
+  Consolidate app-key derivation
+  Export createSkateboardApp from root
+  Bump lucide-react to 1.x
+  Bump dependencies
+
+2.22.0
+
+  Fix Layout sidebar override
+
 2.21.0
 
   Reduce sidebar width to 12rem

package/core/Utilities.js

@@ -1,5 +1,5 @@
-import { useEffect, useState, useContext } from 'react';
-import { UNSAFE_NavigationContext } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { useInRouterContext, useNavigate } from 'react-router-dom';
 import { getDispatch } from './Context.jsx';
 
 // Constants will be initialized by the app shell
@@ -131,8 +131,7 @@ export function getCookie(name) {
     // For token cookies, use app-specific name
     let cookieName = name;
     if (name === 'token') {
-        const appName = getConstants().appName || 'skateboard';
-        cookieName = `${appName.toLowerCase().replace(/\s+/g, '-')}_token`;
+        cookieName = getAppKey('token');
     }
 
     const value = `; ${document.cookie}`;
@@ -162,9 +161,7 @@ export function getCSRFToken() {
     if (csrfCookie) return csrfCookie;
 
     // Fallback to localStorage (for backwards compatibility)
-    const appName = getConstants().appName || 'skateboard';
-    const csrfKey = `${appName.toLowerCase().replace(/\s+/g, '-')}_csrf`;
-    return safeGetItem(csrfKey);
+    return safeGetItem(getAppKey('csrf'));
 }
 
 /**
@@ -523,9 +520,7 @@ export async function trackUsage(action) {
  */
 export async function showUpgradeSheet(upgradeSheetRef) {
     // Check subscription from user data in localStorage instead of API call
-    const appName = getConstants().appName || 'skateboard';
-    const storageKey = `${appName.toLowerCase().replace(/\s+/g, '-')}_user`;
-    const storedUser = safeGetItem(storageKey);
+    const storedUser = safeGetItem(getAppKey('user'));
 
     let subscriber = false;
     if (storedUser && storedUser !== "undefined") {
@@ -1010,9 +1005,8 @@ export function setUIVisibility({ sidebar, tabBar }) {
 /**
  * Safe navigation hook that works with or without Router context.
  *
- * Uses UNSAFE_NavigationContext directly instead of useNavigate() to avoid
- * throwing when rendered outside Router (e.g., in Portals or module duplication).
- * Falls back to window.location.href if no Router context is available.
+ * Falls back to window.location.href if no Router context is available
+ * (e.g., rendered in Portals or via module duplication).
  *
  * @returns {function} Navigate function (path, options?) => void
  *
@@ -1022,17 +1016,16 @@ export function setUIVisibility({ sidebar, tabBar }) {
  * navigate('/app', { replace: true });
  */
 export function useSafeNavigate() {
-    const ctx = useContext(UNSAFE_NavigationContext);
+    const inRouter = useInRouterContext();
+    // Router presence is stable for a given component instance, so the
+    // conditional useNavigate call respects the rules of hooks at runtime.
+    const navigate = inRouter ? useNavigate() : null;
 
-    if (!ctx) {
+    if (!navigate) {
         return (path) => { window.location.href = path; };
     }
 
     return (path, options = {}) => {
-        if (options.replace) {
-            ctx.navigator.replace(path, options.state);
-        } else {
-            ctx.navigator.push(path, options.state);
-        }
+        navigate(path, { replace: !!options.replace, state: options.state });
     };
 }

package/index.js

@@ -1,2 +1,3 @@
 export { default as ProtectedRoute } from "./components/ProtectedRoute";
 export { isAuthenticated, getAppKey, getCSRFToken, getCurrentUser, useAppSetup } from "./core/Utilities";
+export { createSkateboardApp } from "./App.jsx";

package/layout/Layout.jsx

@@ -46,7 +46,7 @@ export default function Layout({ children }) {
       <SidebarProvider
         defaultOpen={!constants.sidebarCollapsed}
         style={{
-          '--sidebar-width': 'calc(var(--spacing) * 72)',
+          '--sidebar-width': '12rem',
           '--header-height': '3.5rem',
         }}>
         {showSidebar && <Sidebar variant="inset" />}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "2.21.0",
+  "version": "2.23.0",
   "type": "module",
   "exports": {
     "./Sidebar": {
@@ -122,19 +122,19 @@
     "url": "git+https://github.com/stevederico/skateboard-ui.git"
   },
   "dependencies": {
-    "@base-ui/react": "^1.1.0",
+    "@base-ui/react": "^1.4.1",
     "use-sync-external-store": "^1.6.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "embla-carousel-react": "^8.6.0",
-    "lucide-react": "^0.563.0",
+    "lucide-react": "^1.11.0",
     "next-themes": "^0.4.6",
-    "react-day-picker": "^9.13.0",
-    "react-resizable-panels": "^4.5.1",
-    "recharts": "^3.7.0",
+    "react-day-picker": "^9.14.0",
+    "react-resizable-panels": "^4.10.0",
+    "recharts": "^3.8.1",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.4.0",
+    "tailwind-merge": "^3.5.0",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^1.1.2"
   },

package/views/PaymentView.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { getState } from '../core/Context.jsx';
-import { getCurrentUser } from '../core/Utilities.js'
+import { getCurrentUser, getAppKey } from '../core/Utilities.js'
 import { Spinner } from '../shadcn/ui/spinner.jsx';
 
 // Whitelist of allowed redirect paths to prevent open redirect vulnerabilities
@@ -9,9 +9,14 @@ const ALLOWED_REDIRECT_PREFIXES = ['/app/', '/'];
 const DEFAULT_REDIRECT = '/app/home';
 
 function isAllowedRedirect(path) {
-  // Must start with allowed prefix and not contain protocol
-  if (path.includes('://') || path.includes('//')) return false;
-  return ALLOWED_REDIRECT_PREFIXES.some(prefix => path.startsWith(prefix));
+  try {
+    // Resolve relative to current origin; reject anything that escapes it.
+    const url = new URL(path, window.location.origin);
+    if (url.origin !== window.location.origin) return false;
+    return ALLOWED_REDIRECT_PREFIXES.some(prefix => url.pathname.startsWith(prefix));
+  } catch {
+    return false;
+  }
 }
 
 /**
@@ -28,8 +33,7 @@ function isAllowedRedirect(path) {
  * <Route path="payment" element={<PaymentView />} />
  */
 export default function PaymentView() {
-  const { state, dispatch } = getState();
-  const constants = state.constants;
+  const { dispatch } = getState();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
 
@@ -45,10 +49,6 @@ export default function PaymentView() {
   }, [dispatch]);
 
   useEffect(() => {
-    // Get app-specific localStorage keys
-    const appName = constants.appName || 'skateboard';
-    const getAppKey = (suffix) => `${appName.toLowerCase().replace(/\s+/g, '-')}_${suffix}`;
-
     // Get query parameters
     const success = searchParams.get('success') === 'true';
     const canceled = searchParams.get('canceled') === 'true';

package/views/SignInView.jsx

@@ -30,7 +30,7 @@ import { getBackendURL, useSafeNavigate } from '../core/Utilities'
  * // Embedded in dialog
  * <SignInView embedded onSuccess={handleSuccess} onSwitchMode={() => setMode('signup')} />
  */
-export default function LoginForm({
+export default function SignInView({
   className,
   embedded = false,
   onSuccess,

package/views/SignUpView.jsx

@@ -7,7 +7,7 @@ import { Card, CardContent, CardHeader } from "../shadcn/ui/card"
 import { Alert, AlertDescription } from "../shadcn/ui/alert"
 import DynamicIcon from '../core/DynamicIcon';
 import { getState } from "../core/Context.jsx";
-import { getBackendURL, useSafeNavigate } from '../core/Utilities'
+import { getBackendURL, useSafeNavigate, getAppKey } from '../core/Utilities'
 
 /**
  * Sign-up form component.
@@ -31,7 +31,7 @@ import { getBackendURL, useSafeNavigate } from '../core/Utilities'
  * // Embedded in dialog
  * <SignUpView embedded onSuccess={handleSuccess} onSwitchMode={() => setMode('signin')} />
  */
-export default function LoginForm({
+export default function SignUpView({
   className,
   embedded = false,
   onSuccess,
@@ -79,9 +79,7 @@ export default function LoginForm({
         const csrfCookie = document.cookie.split('; ').find(row => row.startsWith('csrf_token='));
         const csrfToken = csrfCookie ? csrfCookie.split('=')[1] : data.csrfToken;
         if (csrfToken) {
-          const appName = constants.appName || 'skateboard';
-          const csrfKey = `${appName.toLowerCase().replace(/\s+/g, '-')}_csrf`;
-          localStorage.setItem(csrfKey, csrfToken);
+          localStorage.setItem(getAppKey('csrf'), csrfToken);
         }
         dispatch({ type: 'SET_USER', payload: data });
         if (embedded && onSuccess) {