@stevederico/skateboard-ui 2.0.0 → 2.2.0

package/.claude/settings.local.json

@@ -0,0 +1,10 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(ls:*)",
+      "Bash(git mv:*)",
+      "Bash(git rm:*)",
+      "Bash(python3:*)"
+    ]
+  }
+}

package/App.jsx

@@ -8,23 +8,23 @@ import {
 } from 'react-router-dom';
 import { useEffect } from 'react';
 import { ThemeProvider } from 'next-themes';
-import Layout from './Layout.jsx';
-import LandingView from './LandingView.jsx';
-import TextView from './TextView.jsx';
-import SignUpView from './SignUpView.jsx';
-import SignInView from './SignInView.jsx';
-import SignOutView from './SignOutView.jsx';
-import PaymentView from './PaymentView.jsx';
-import SettingsView from './SettingsView.jsx';
-import NotFound from './NotFound.jsx';
-import ProtectedRoute from './ProtectedRoute.jsx';
-import ErrorBoundary from './ErrorBoundary.jsx';
-import { useAppSetup, initializeUtilities, validateConstants } from './Utilities.js';
-import { ContextProvider } from './Context.jsx';
-import Toast from './Toast.jsx';
-import AuthOverlay from './AuthOverlay.jsx';
+import Layout from './layout/Layout.jsx';
+import LandingView from './views/LandingView.jsx';
+import TextView from './views/TextView.jsx';
+import SignUpView from './views/SignUpView.jsx';
+import SignInView from './views/SignInView.jsx';
+import SignOutView from './views/SignOutView.jsx';
+import PaymentView from './views/PaymentView.jsx';
+import SettingsView from './views/SettingsView.jsx';
+import NotFound from './views/NotFound.jsx';
+import ProtectedRoute from './components/ProtectedRoute.jsx';
+import ErrorBoundary from './components/ErrorBoundary.jsx';
+import { useAppSetup, initializeUtilities, validateConstants } from './core/Utilities.js';
+import { ContextProvider } from './core/Context.jsx';
+import { Toaster } from './shadcn/ui/sonner.jsx';
+import AuthOverlay from './components/AuthOverlay.jsx';
 
-function App({ constants, appRoutes, defaultRoute, landingPage }) {
+function App({ constants, appRoutes, defaultRoute, landingPage, overrides = {} }) {
   const location = useLocation();
 
   useEffect(() => {
@@ -33,28 +33,36 @@ function App({ constants, appRoutes, defaultRoute, landingPage }) {
 
   useAppSetup(location);
 
+  const LayoutComponent = overrides.layout || Layout;
+  const SettingsComponent = overrides.settings || SettingsView;
+  const PaymentComponent = overrides.payment || PaymentView;
+  const SignInComponent = overrides.signIn || SignInView;
+  const SignUpComponent = overrides.signUp || SignUpView;
+  const SignOutComponent = overrides.signOut || SignOutView;
+  const NotFoundComponent = overrides.notFound || NotFound;
+
   return (
     <Routes>
-      <Route element={<Layout />}>
+      <Route element={<LayoutComponent />}>
         <Route path="/console" element={<Navigate to="/app" replace />} />
         <Route path="/app" element={<ProtectedRoute />}>
           <Route index element={<Navigate to={defaultRoute} replace />} />
           {appRoutes.map(({ path, element }) => (
             <Route key={path} path={path} element={element} />
           ))}
-          <Route path="settings" element={<SettingsView />} />
-          <Route path="payment" element={<PaymentView />} />
+          <Route path="settings" element={<SettingsComponent />} />
+          <Route path="payment" element={<PaymentComponent />} />
         </Route>
       </Route>
       <Route path="/" element={landingPage || <LandingView />} />
-      <Route path="/signin" element={<SignInView />} />
-      <Route path="/signup" element={<SignUpView />} />
-      <Route path="/signout" element={<SignOutView />} />
+      <Route path="/signin" element={<SignInComponent />} />
+      <Route path="/signup" element={<SignUpComponent />} />
+      <Route path="/signout" element={<SignOutComponent />} />
       <Route path="/terms" element={<TextView details={constants.termsOfService} />} />
       <Route path="/privacy" element={<TextView details={constants.privacyPolicy} />} />
       <Route path="/eula" element={<TextView details={constants.EULA} />} />
       <Route path="/subs" element={<TextView details={constants.subscriptionDetails} />} />
-      <Route path="*" element={<NotFound />} />
+      <Route path="*" element={<NotFoundComponent />} />
     </Routes>
   );
 }
@@ -71,6 +79,14 @@ function App({ constants, appRoutes, defaultRoute, landingPage }) {
  * @param {string} [config.defaultRoute] - Default route path under /app (defaults to first route)
  * @param {JSX.Element} [config.landingPage] - Custom landing page for "/". Defaults to LandingView.
  * @param {React.ComponentType} [config.wrapper] - Optional wrapper component around the router
+ * @param {Object} [config.overrides] - Override built-in view components
+ * @param {React.ComponentType} [config.overrides.layout] - Replace Layout
+ * @param {React.ComponentType} [config.overrides.settings] - Replace SettingsView
+ * @param {React.ComponentType} [config.overrides.payment] - Replace PaymentView
+ * @param {React.ComponentType} [config.overrides.signIn] - Replace SignInView
+ * @param {React.ComponentType} [config.overrides.signUp] - Replace SignUpView
+ * @param {React.ComponentType} [config.overrides.signOut] - Replace SignOutView
+ * @param {React.ComponentType} [config.overrides.notFound] - Replace NotFound
  *
  * @example
  * import { createSkateboardApp } from '@stevederico/skateboard-ui/App';
@@ -80,8 +96,19 @@ function App({ constants, appRoutes, defaultRoute, landingPage }) {
  *   constants,
  *   appRoutes: [{ path: 'home', element: <HomeView /> }]
  * });
+ *
+ * @example
+ * // Override built-in views
+ * createSkateboardApp({
+ *   constants,
+ *   appRoutes: [{ path: 'home', element: <HomeView /> }],
+ *   overrides: {
+ *     settings: MySettingsView,
+ *     signIn: MySignInView,
+ *   }
+ * });
  */
-export function createSkateboardApp({ constants, appRoutes, defaultRoute = appRoutes[0]?.path || 'home', landingPage, wrapper: Wrapper }) {
+export function createSkateboardApp({ constants, appRoutes, defaultRoute = appRoutes[0]?.path || 'home', landingPage, wrapper: Wrapper, overrides }) {
   // Validate constants before initialization
   validateConstants(constants);
 
@@ -94,18 +121,18 @@ export function createSkateboardApp({ constants, appRoutes, defaultRoute = appRo
   root.render(
     <ErrorBoundary>
       <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-        <Toast />
+        <Toaster position="top-right" richColors closeButton />
         <ContextProvider constants={constants}>
           <AuthOverlay />
           {Wrapper ? (
             <Wrapper>
               <Router>
-                <App constants={constants} appRoutes={appRoutes} defaultRoute={defaultRoute} landingPage={landingPage} />
+                <App constants={constants} appRoutes={appRoutes} defaultRoute={defaultRoute} landingPage={landingPage} overrides={overrides} />
               </Router>
             </Wrapper>
           ) : (
             <Router>
-              <App constants={constants} appRoutes={appRoutes} defaultRoute={defaultRoute} landingPage={landingPage} />
+              <App constants={constants} appRoutes={appRoutes} defaultRoute={defaultRoute} landingPage={landingPage} overrides={overrides} />
             </Router>
           )}
         </ContextProvider>

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # CHANGELOG
 
+2.2.0
+
+  Reorganize into folders
+  Add migration guide
+  Remove AppSidebar dead code
+  Remove LandingViewSimple export
+  Add view overrides
+
+2.1.0
+
+  Rename AppSidebar to Sidebar
+  Simplify LandingView layout
+  Add form Labels to views
+  Add AuthOverlay dialog header
+  Update SettingsView card layout
+  Add DynamicIcon className support
+  Remove Layout theme logic
+  Add sidebar Settings button
+  Consolidate docs into README
+  Remove USAGE.md
+  Remove AUTHENTICATION.md
+
+2.0.1
+
+  Add shadcn sidebar primitives
+  Add NavUser dropdown footer
+  Add SidebarInset layout
+  Fix ProtectedRoute loading state
+  Update sidebar width CSS var
+
 2.0.0
 
   Add gradient Button variant

package/MIGRATION.md

@@ -0,0 +1,230 @@
+# Migration Guide
+
+## Upgrading from 1.4.x to 2.0.x
+
+### Breaking Changes
+
+#### 1. `noProtectedRoutes` renamed to `authOverlay`
+
+```diff
+ const constants = {
+-  noProtectedRoutes: true,
++  authOverlay: true,
+ };
+```
+
+If you were using `noProtectedRoutes` to allow unauthenticated access to `/app` routes, rename it to `authOverlay`.
+
+#### 2. `Toast` replaced by Sonner `Toaster`
+
+If you imported `Toast` directly:
+
+```diff
+- import Toast from '@stevederico/skateboard-ui/Toast';
+```
+
+Remove it. `createSkateboardApp` now renders `<Toaster />` from [sonner](https://sonner.emilkowal.dev/) automatically. Use `toast()` from sonner directly:
+
+```javascript
+import { toast } from 'sonner';
+
+toast.success('Saved!');
+toast.error('Something went wrong');
+```
+
+#### 3. `SkeletonLoader` removed
+
+```diff
+- import SkeletonLoader from '@stevederico/skateboard-ui/SkeletonLoader';
+```
+
+Use the shadcn `Skeleton` component instead:
+
+```javascript
+import { Skeleton } from '@stevederico/skateboard-ui/shadcn/ui/skeleton';
+
+<Skeleton className="h-4 w-[200px]" />
+```
+
+#### 4. `AppSidebar` renamed to `Sidebar`
+
+```diff
+- import AppSidebar from '@stevederico/skateboard-ui/AppSidebar';
++ import Sidebar from '@stevederico/skateboard-ui/Sidebar';
+```
+
+Most apps don't import this directly (Layout handles it), but update if you do.
+
+#### 5. `LandingViewSimple` removed
+
+```diff
+- import LandingViewSimple from '@stevederico/skateboard-ui/LandingViewSimple';
+```
+
+Use the `landingPage` parameter on `createSkateboardApp` to provide a custom landing page instead:
+
+```javascript
+createSkateboardApp({
+  constants,
+  appRoutes,
+  landingPage: <MyCustomLanding />,
+});
+```
+
+### New Features
+
+#### AuthOverlay and useAuthGate (1.5.0+)
+
+Gate actions behind authentication without redirecting:
+
+```javascript
+import { useAuthGate } from '@stevederico/skateboard-ui/useAuthGate';
+
+function SaveButton() {
+  const requireAuth = useAuthGate();
+
+  return (
+    <button onClick={() => requireAuth(() => saveThing())}>
+      Save
+    </button>
+  );
+}
+```
+
+Enable by setting `authOverlay: true` in constants. The overlay renders automatically.
+
+#### Custom Landing Page (1.4.1+)
+
+```javascript
+createSkateboardApp({
+  constants,
+  appRoutes,
+  landingPage: <MyLandingPage />,
+});
+```
+
+#### Sidebar Visibility Control (1.2.5+)
+
+```javascript
+import { hideSidebar, showSidebar, hideTabBar, showTabBar } from '@stevederico/skateboard-ui/Utilities';
+
+hideSidebar();
+showTabBar();
+```
+
+Or via constants:
+
+```javascript
+const constants = {
+  hideSidebar: true,
+  hideTabBar: true,
+};
+```
+
+### Full Upgrade Steps
+
+1. Update the package:
+   ```bash
+   deno install npm:@stevederico/skateboard-ui@latest
+   ```
+
+2. Search your codebase for removed imports:
+   ```
+   Toast, SkeletonLoader, AppSidebar, LandingViewSimple, noProtectedRoutes
+   ```
+
+3. Replace any direct `Toast` usage with `sonner`:
+   ```javascript
+   import { toast } from 'sonner';
+   ```
+
+4. Replace `SkeletonLoader` with shadcn `Skeleton`.
+
+5. Rename `noProtectedRoutes` to `authOverlay` in your constants.
+
+6. Run the app and verify routing, auth, sidebar, and toasts.
+
+---
+
+## Upgrading from 2.0.x to 2.1.x+
+
+### No Breaking Changes
+
+All consumer import paths are unchanged. This release reorganized the internal file structure but the `exports` map in `package.json` keeps every public import stable:
+
+```javascript
+// These all still work exactly the same
+import { createSkateboardApp } from '@stevederico/skateboard-ui/App';
+import { getState } from '@stevederico/skateboard-ui/Context';
+import { apiRequest } from '@stevederico/skateboard-ui/Utilities';
+import Layout from '@stevederico/skateboard-ui/Layout';
+import Sidebar from '@stevederico/skateboard-ui/Sidebar';
+import { Button } from '@stevederico/skateboard-ui/shadcn/ui/button';
+```
+
+### What Changed Internally
+
+Files were reorganized into folders:
+
+| Before (2.0.x) | After (2.1.x+) |
+|-----------------|-----------------|
+| `Context.jsx` | `core/Context.jsx` |
+| `Utilities.js` | `core/Utilities.js` |
+| `DynamicIcon.jsx` | `core/DynamicIcon.jsx` |
+| `Layout.jsx` | `layout/Layout.jsx` |
+| `Sidebar.jsx` | `layout/Sidebar.jsx` |
+| `TabBar.jsx` | `layout/TabBar.jsx` |
+| `Header.jsx` | `layout/Header.jsx` |
+| `LandingView.jsx` | `views/LandingView.jsx` |
+| `SignInView.jsx` | `views/SignInView.jsx` |
+| `SignUpView.jsx` | `views/SignUpView.jsx` |
+| `SignOutView.jsx` | `views/SignOutView.jsx` |
+| `SettingsView.jsx` | `views/SettingsView.jsx` |
+| `PaymentView.jsx` | `views/PaymentView.jsx` |
+| `TextView.jsx` | `views/TextView.jsx` |
+| `NotFound.jsx` | `views/NotFound.jsx` |
+| `ThemeToggle.jsx` | `components/ThemeToggle.jsx` |
+| `Sheet.jsx` | `components/Sheet.jsx` |
+| `UpgradeSheet.jsx` | `components/UpgradeSheet.jsx` |
+| `ErrorBoundary.jsx` | `components/ErrorBoundary.jsx` |
+| `AuthOverlay.jsx` | `components/AuthOverlay.jsx` |
+| `ProtectedRoute.jsx` | `components/ProtectedRoute.jsx` |
+| `useAuthGate.js` | `hooks/useAuthGate.js` |
+
+### Cleanup
+
+- `AppSidebar.jsx` deleted (was dead code since 2.1.0)
+- `LandingViewSimple` export removed (file never existed on disk)
+
+### New: View Overrides (2.1.x+)
+
+Override built-in views without forking:
+
+```javascript
+createSkateboardApp({
+  constants,
+  appRoutes,
+  overrides: {
+    settings: MySettingsView,
+    signIn: MySignInView,
+    signUp: MySignUpView,
+    signOut: MySignOutView,
+    payment: MyPaymentView,
+    notFound: MyNotFoundView,
+    layout: MyLayout,
+  },
+});
+```
+
+### Upgrade Steps
+
+1. Update the package:
+   ```bash
+   deno install npm:@stevederico/skateboard-ui@latest
+   ```
+
+2. No code changes required. All imports resolve the same way.
+
+3. If you were importing `LandingViewSimple`, it was already broken (file didn't exist). Remove the import.
+
+4. Run the app and confirm everything works.