@stevederico/skateboard-ui 0.9.6 → 0.9.8

package/CHANGELOG.md

@@ -1,4 +1,16 @@
 # CHANGELOG
+0.9.8
+
+  Add ProtectedRoute component
+  Add useAppSetup hook
+  Export isAuthenticated utility
+  Add react-router-dom peer dependency
+
+0.9.7
+
+  Export getCSRFToken utility
+  Export getAppKey utility
+
 0.9.6
 
   Add SignOutView component

package/ProtectedRoute.jsx

@@ -0,0 +1,8 @@
+import { Navigate, Outlet } from 'react-router-dom';
+import { isAuthenticated } from './Utilities';
+
+const ProtectedRoute = () => {
+    return isAuthenticated() ? <Outlet /> : <Navigate to="/signin" replace />;
+};
+
+export default ProtectedRoute;

package/README.md

@@ -45,6 +45,13 @@ import { ThemeToggle } from '@stevederico/skateboard-ui/ThemeToggle'
 ```javascript
 import { cn } from '@stevederico/skateboard-ui/shadcn/lib/utils'
 import { useMobile } from '@stevederico/skateboard-ui/shadcn/hooks/use-mobile'
+import { isAuthenticated, getAppKey, useAppSetup } from '@stevederico/skateboard-ui/Utilities'
+```
+
+## Routing
+
+```javascript
+import ProtectedRoute from '@stevederico/skateboard-ui/ProtectedRoute'
 ```
 
 ## Dependencies

package/Utilities.js

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import constants from "@/constants.json";
 
 export function getCookie(name) {
@@ -14,17 +15,25 @@ export function getCookie(name) {
     return null;
 }
 
-function getCSRFToken() {
+export function getCSRFToken() {
     const appName = constants.appName || 'skateboard';
     const csrfKey = `${appName.toLowerCase().replace(/\s+/g, '-')}_csrf`;
     return localStorage.getItem(csrfKey);
 }
 
-function getAppKey(suffix) {
+export function getAppKey(suffix) {
     const appName = constants.appName || 'skateboard';
     return `${appName.toLowerCase().replace(/\s+/g, '-')}_${suffix}`;
 }
 
+export function isAuthenticated() {
+    if (constants.noLogin === true) {
+        return true;
+    }
+    const csrfKey = getAppKey('csrf');
+    return Boolean(localStorage.getItem(csrfKey));
+}
+
 export function getBackendURL() {
     let result = import.meta.env.DEV ? constants.devBackendURL : constants.backendURL;
     return result
@@ -373,4 +382,13 @@ export function timestampToString(input, format = "DOB") {
     }
 }
 
+export function useAppSetup(location) {
+    useEffect(() => {
+        document.title = constants.appName;
+        if (!location.pathname.toLowerCase().includes('app')) {
+            document.documentElement.classList.remove('dark');
+            document.body.classList.remove('dark');
+        }
+    }, [location.pathname]);
+}
 

package/index.js

@@ -1 +1,3 @@
-export { Button } from "./components/ui/Button";
+export { Button } from "./components/ui/Button";
+export { default as ProtectedRoute } from "./ProtectedRoute";
+export { isAuthenticated, getAppKey, getCSRFToken, getCurrentUser, useAppSetup } from "./Utilities";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "0.9.6",
+  "version": "0.9.8",
   "type": "module",
   "exports": {
     "./AppSidebar": {
@@ -72,6 +72,10 @@
       "import": "./Utilities.js",
       "default": "./Utilities.js"
     },
+    "./ProtectedRoute": {
+      "import": "./ProtectedRoute.jsx",
+      "default": "./ProtectedRoute.jsx"
+    },
     "./shadcn/ui/*": "./shadcn/ui/*.jsx",
     "./shadcn/lib/utils": {
       "import": "./shadcn/lib/utils.js",
@@ -136,7 +140,8 @@
   },
   "peerDependencies": {
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^6.0.0"
   },
   "overrides": {
     "@radix-ui/react-slot": "^1.2.3"