@stevederico/skateboard-ui 1.2.3 → 1.2.6

package/CHANGELOG.md

@@ -1,4 +1,25 @@
 # CHANGELOG
+1.2.5
+
+  Add sidebar visibility control
+  Add tabbar visibility control
+  Add hideTabBar constant support
+  Add programmatic UI functions
+  Fix broken Button export
+  Fix SignOutView import path
+  Add LandingViewSimple export
+  Consolidate DynamicIcon usage
+  Remove unused FREE_LIMITS
+  Fix ViteConfig duplicate import
+  Relax peer dependency versions
+  Update README documentation
+
+1.2.4
+
+  Fix react-router cookie import
+  Add force optimization
+  Add react-router-dom include
+
 1.2.3
 
   Fix cookie ESM import

package/Context.jsx

@@ -1,7 +1,14 @@
-import React, { createContext, useContext, useReducer } from 'react';
+import React, { createContext, useContext, useReducer, useEffect } from 'react';
 
 const context = createContext();
 
+// Store dispatch reference for programmatic access outside components
+let _dispatch = null;
+
+export function getDispatch() {
+  return _dispatch;
+}
+
 // Check if localStorage is available
 function isLocalStorageAvailable() {
   try {
@@ -69,7 +76,13 @@ export function ContextProvider({ children, constants }) {
     }
   };
 
-  const initialState = { user: getInitialUser() };
+  const initialState = {
+    user: getInitialUser(),
+    ui: {
+      sidebarVisible: true,
+      tabBarVisible: true
+    }
+  };
 
   function reducer(state, action) {
     const storageKey = getStorageKey();
@@ -91,6 +104,15 @@ export function ContextProvider({ children, constants }) {
         safeLSRemoveItem(storageKey);
         return { ...state, user: null };
       }
+      case 'SET_SIDEBAR_VISIBLE': {
+        return { ...state, ui: { ...state.ui, sidebarVisible: action.payload } };
+      }
+      case 'SET_TABBAR_VISIBLE': {
+        return { ...state, ui: { ...state.ui, tabBarVisible: action.payload } };
+      }
+      case 'SET_UI_VISIBILITY': {
+        return { ...state, ui: { ...state.ui, ...action.payload } };
+      }
       default:
         return state;
     }
@@ -98,6 +120,12 @@ export function ContextProvider({ children, constants }) {
 
   const [state, dispatch] = useReducer(reducer, initialState);
 
+  // Store dispatch reference for programmatic access
+  useEffect(() => {
+    _dispatch = dispatch;
+    return () => { _dispatch = null; };
+  }, [dispatch]);
+
   return (
     <context.Provider value={{ state, dispatch }}>
       {children}

package/LandingViewSimple.jsx

@@ -1,14 +1,6 @@
 import React from 'react';
 import constants from "@/constants.json";
-import * as LucideIcons from "lucide-react";
-
-// Dynamic Icon Component
-const DynamicIcon = ({ name, size = 24, color = 'currentColor', strokeWidth = 2, ...props }) => {
-  const toPascalCase = (str) => str.split(/[-_\s]/).map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join('');
-  const possibleNames = [name, toPascalCase(name), name.charAt(0).toUpperCase() + name.slice(1)];
-  const LucideIcon = possibleNames.find(n => LucideIcons[n]) ? LucideIcons[possibleNames.find(n => LucideIcons[n])] : null;
-  return LucideIcon ? React.createElement(LucideIcon, { size, color, strokeWidth, ...props }) : null;
-};
+import DynamicIcon from './DynamicIcon';
 
 export default function LandingView() {
   return (

package/Layout.jsx

@@ -4,8 +4,15 @@ import { SidebarProvider, SidebarTrigger } from "./shadcn/ui/sidebar"
 import AppSidebar from "./AppSidebar"
 import { useEffect } from 'react';
 import constants from "@/constants.json";
+import { getState } from './Context.jsx';
 
 export default function Layout({ children }) {
+  const { state } = getState();
+  const { sidebarVisible, tabBarVisible } = state.ui;
+
+  // Combine constants (static config) with context state (programmatic control)
+  const showSidebar = !constants.hideSidebar && sidebarVisible;
+  const showTabBar = !constants.hideTabBar && tabBarVisible;
 
   useEffect(() => {
     const root = document.documentElement;
@@ -41,14 +48,14 @@ export default function Layout({ children }) {
   }, []);
 
   return (
-    <div className="min-h-screen flex flex-col pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]">
+    <div className="min-h-screen flex flex-col pt-[env(safe-area-inset-top)] pb-[calc(5rem+env(safe-area-inset-bottom))] md:pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]">
       <SidebarProvider>
-        {!constants.hideSidebar && <AppSidebar />}
+        {showSidebar && <AppSidebar />}
         <main className="flex-1">
           <Outlet />
         </main>
       </SidebarProvider>
-      <TabBar className="md:hidden" />
+      {showTabBar && <TabBar className="md:hidden" />}
     </div>
   );
 }

package/README.md

@@ -22,12 +22,15 @@ npm install @stevederico/skateboard-ui
 
 ### View Components
 - **LandingView** - Landing page template
+- **LandingViewSimple** - Simplified landing page template
 - **SettingsView** - Settings page template
 - **SignInView** - Authentication sign-in page
 - **SignUpView** - Authentication sign-up page
-- **StripeView** - Stripe payment integration
+- **SignOutView** - Sign out handler
+- **PaymentView** - Stripe payment integration
 - **TextView** - Text display view
 - **NotFound** - 404 error page
+- **ErrorBoundary** - React error boundary wrapper
 
 ### shadcn/ui Components
 Full set of shadcn/ui primitives available at `@stevederico/skateboard-ui/shadcn/ui/*`
@@ -54,6 +57,36 @@ import { isAuthenticated, getAppKey, useAppSetup } from '@stevederico/skateboard
 import ProtectedRoute from '@stevederico/skateboard-ui/ProtectedRoute'
 ```
 
+## UI Visibility Control
+
+### Static Configuration (constants.json)
+```json
+{
+  "hideSidebar": true,
+  "hideTabBar": true
+}
+```
+
+### Programmatic Control
+```javascript
+import {
+  showSidebar,
+  hideSidebar,
+  showTabBar,
+  hideTabBar,
+  setUIVisibility
+} from '@stevederico/skateboard-ui/Utilities'
+
+// Individual controls
+hideSidebar()
+showSidebar()
+hideTabBar()
+showTabBar()
+
+// Batch control
+setUIVisibility({ sidebar: false, tabBar: false })
+```
+
 ## Dependencies
 
 Built on:

package/SettingsView.jsx

@@ -16,7 +16,7 @@ export default function SettingsView() {
   }
 
   return (
-    <div className="min-h-screen bg-background relative overflow-hidden">
+    <div className="min-h-screen bg-background relative">
       {/* Content */}
       <div className="relative z-10">
         {/* Header */}

package/SignInView.jsx

@@ -10,16 +10,7 @@ import {
 } from "./shadcn/ui/card"
 import { Input } from "./shadcn/ui/input"
 import { Label } from "./shadcn/ui/label"
-import * as LucideIcons from "lucide-react";
-
-// Dynamic Icon Component
-const DynamicIcon = ({ name, size = 24, color = 'currentColor', strokeWidth = 2, ...props }) => {
-  const toPascalCase = (str) => str.split(/[-_\s]/).map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join('');
-  const possibleNames = [name, toPascalCase(name), name.charAt(0).toUpperCase() + name.slice(1)];
-  const LucideIcon = possibleNames.find(n => LucideIcons[n]) ? LucideIcons[possibleNames.find(n => LucideIcons[n])] : null;
-  return LucideIcon ? React.createElement(LucideIcon, { size, color, strokeWidth, ...props }) : null;
-};
-
+import DynamicIcon from './DynamicIcon';
 import { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { getState } from './Context.jsx';

package/SignOutView.jsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { getBackendURL } from '@stevederico/skateboard-ui/Utilities';
+import { getBackendURL } from './Utilities';
 
 function SignOutView() {
   const navigate = useNavigate();

package/SignUpView.jsx

@@ -8,15 +8,7 @@ import {
 } from "./shadcn/ui/card"
 import { Input } from "./shadcn/ui/input"
 import { Label } from "./shadcn/ui/label"
-import * as LucideIcons from "lucide-react";
-
-// Dynamic Icon Component
-const DynamicIcon = ({ name, size = 24, color = 'currentColor', strokeWidth = 2, ...props }) => {
-  const toPascalCase = (str) => str.split(/[-_\s]/).map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join('');
-  const possibleNames = [name, toPascalCase(name), name.charAt(0).toUpperCase() + name.slice(1)];
-  const LucideIcon = possibleNames.find(n => LucideIcons[n]) ? LucideIcons[possibleNames.find(n => LucideIcons[n])] : null;
-  return LucideIcon ? React.createElement(LucideIcon, { size, color, strokeWidth, ...props }) : null;
-};
+import DynamicIcon from './DynamicIcon';
 import { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import constants from "@/constants.json";

package/TabBar.jsx

@@ -1,27 +1,16 @@
 import React from 'react';
 import constants from "@/constants.json";
 import { Link, useLocation } from 'react-router-dom';
-import * as LucideIcons from "lucide-react";
-
-// Dynamic Icon Component
-const DynamicIcon = ({ name, size = 24, color = 'currentColor', strokeWidth = 2, ...props }) => {
-  const toPascalCase = (str) => str.split(/[-_\s]/).map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join('');
-  const possibleNames = [name, toPascalCase(name), name.charAt(0).toUpperCase() + name.slice(1)];
-  const LucideIcon = possibleNames.find(n => LucideIcons[n]) ? LucideIcons[possibleNames.find(n => LucideIcons[n])] : null;
-  return LucideIcon ? React.createElement(LucideIcon, { size, color, strokeWidth, ...props }) : null;
-};
+import DynamicIcon from './DynamicIcon';
 
 export default function TabBar() {
   const location = useLocation();
 
   return (
-    <div style={{
-      overflow: "hidden",
-      overscrollBehavior: "none"
-    }} className="fixed flex md:hidden pt-2 pb-4 bottom-0 inset-x-0 justify-around text-center border-t shadow-lg bg-background">
+    <div className="fixed flex md:hidden pt-2 pb-4 bottom-0 inset-x-0 justify-around text-center border-t shadow-lg bg-background">
       {constants?.pages?.map((item) => (
         <span className="px-3" key={item.title}>
-          <Link to={`/app/${item.url.toLowerCase()}`} >
+          <Link to={`/app/${item.url.toLowerCase()}`} className="cursor-pointer">
             {
               location.pathname.includes(item.url.toLowerCase())
                 ? (
@@ -39,7 +28,7 @@ export default function TabBar() {
         </span>
       ))}
       <span className="px-3">
-        <Link to={`/app/settings`}>
+        <Link to={`/app/settings`} className="cursor-pointer">
           {
             location.pathname.includes('Settings'.toLowerCase())
               ? (

package/Utilities.js

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { getDispatch } from './Context.jsx';
 
 // Constants will be initialized by the app shell
 // Use window object to avoid module duplication issues with Vite
@@ -276,12 +277,6 @@ export async function showCheckout(email, productIndex = 0) {
     }
 }
 
-// Usage Limits Configuration
-const FREE_LIMITS = {
-    todos: 3,
-    messages: 10
-};
-
 export async function getRemainingUsage(action) {
     if (getConstants().noLogin === true) {
         return { remaining: -1, total: -1, isSubscriber: true };
@@ -663,4 +658,74 @@ export function useForm(initialValues, onSubmit) {
 }
 
 
+// ===== UI VISIBILITY CONTROLS =====
+
+/**
+ * Programmatically show/hide the sidebar
+ * @param {boolean} visible - Whether sidebar should be visible
+ */
+export function setSidebarVisible(visible) {
+    const dispatch = getDispatch();
+    if (dispatch) {
+        dispatch({ type: 'SET_SIDEBAR_VISIBLE', payload: visible });
+    } else {
+        console.warn('setSidebarVisible: Context not initialized');
+    }
+}
+
+/**
+ * Programmatically show/hide the tab bar
+ * @param {boolean} visible - Whether tab bar should be visible
+ */
+export function setTabBarVisible(visible) {
+    const dispatch = getDispatch();
+    if (dispatch) {
+        dispatch({ type: 'SET_TABBAR_VISIBLE', payload: visible });
+    } else {
+        console.warn('setTabBarVisible: Context not initialized');
+    }
+}
+
+/**
+ * Show the sidebar
+ */
+export function showSidebar() {
+    setSidebarVisible(true);
+}
+
+/**
+ * Hide the sidebar
+ */
+export function hideSidebar() {
+    setSidebarVisible(false);
+}
+
+/**
+ * Show the tab bar
+ */
+export function showTabBar() {
+    setTabBarVisible(true);
+}
 
+/**
+ * Hide the tab bar
+ */
+export function hideTabBar() {
+    setTabBarVisible(false);
+}
+
+/**
+ * Set visibility for both sidebar and tab bar at once
+ * @param {object} options - { sidebar: boolean, tabBar: boolean }
+ */
+export function setUIVisibility({ sidebar, tabBar }) {
+    const dispatch = getDispatch();
+    if (dispatch) {
+        const payload = {};
+        if (sidebar !== undefined) payload.sidebarVisible = sidebar;
+        if (tabBar !== undefined) payload.tabBarVisible = tabBar;
+        dispatch({ type: 'SET_UI_VISIBILITY', payload });
+    } else {
+        console.warn('setUIVisibility: Context not initialized');
+    }
+}

package/ViteConfig.js

@@ -199,12 +199,12 @@ export const dynamicManifestPlugin = () => {
  * Returns standard skateboard config with optional overrides
  */
 export async function getSkateboardViteConfig(customConfig = {}) {
-    const [react, tailwindcss, { resolve }, path] = await Promise.all([
+    const [react, tailwindcss, path] = await Promise.all([
         import('@vitejs/plugin-react-swc').then(m => m.default),
         import('@tailwindcss/vite').then(m => m.default),
-        import('node:path'),
         import('node:path')
     ]);
+    const { resolve } = path;
 
     return {
         plugins: [
@@ -235,10 +235,13 @@ export async function getSkateboardViteConfig(customConfig = {}) {
                 'react-dom',
                 'react-dom/client',
                 '@radix-ui/react-slot',
+                'react-router-dom',
+                'react-router',
                 'cookie',
                 'set-cookie-parser',
                 ...(customConfig.optimizeDeps?.include || [])
             ],
+            force: true,
             exclude: [
                 '@swc/core',
                 '@swc/core-darwin-arm64',

package/index.js

@@ -1,3 +1,2 @@
-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": "1.2.3",
+  "version": "1.2.6",
   "type": "module",
   "exports": {
     "./AppSidebar": {
@@ -24,6 +24,10 @@
       "import": "./LandingView.jsx",
       "default": "./LandingView.jsx"
     },
+    "./LandingViewSimple": {
+      "import": "./LandingViewSimple.jsx",
+      "default": "./LandingViewSimple.jsx"
+    },
     "./Layout": {
       "import": "./Layout.jsx",
       "default": "./Layout.jsx"
@@ -161,7 +165,7 @@
   "peerDependencies": {
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router-dom": "^7.6.1"
+    "react-router-dom": "^7.0.0"
   },
   "overrides": {
     "@radix-ui/react-slot": "^1.2.3"