@stevederico/skateboard-ui 1.2.15 → 1.2.16

package/README.md

@@ -1,6 +1,6 @@
 # skateboard-ui
 
-React component library built with TailwindCSS and shadcn/ui for rapid application development.
+React component library for rapid application development. Built with TailwindCSS v4 and shadcn/ui.
 
 ## Installation
 
@@ -8,58 +8,195 @@ React component library built with TailwindCSS and shadcn/ui for rapid applicati
 npm install @stevederico/skateboard-ui
 ```
 
+## Quick Start
+
+```javascript
+import './assets/styles.css';
+import { createSkateboardApp } from '@stevederico/skateboard-ui/App';
+import constants from './constants.json';
+import HomeView from './components/HomeView.jsx';
+
+const appRoutes = [
+  { path: 'home', element: <HomeView /> }
+];
+
+createSkateboardApp({ constants, appRoutes });
+```
+
+That's it! You get routing, auth, layout, landing page, settings, and payments.
+
 ## Components
 
 ### Core Components
-- **AppSidebar** - Application sidebar navigation
-- **DynamicIcon** - Dynamic icon rendering from lucide-react
-- **Header** - Application header component
-- **Layout** - Page layout wrapper
-- **TabBar** - Tab navigation bar
-- **ThemeToggle** - Dark/light mode toggle
-- **Sheet** - Slide-out panel component
-- **UpgradeSheet** - Premium upgrade UI
+
+| Component | Import | Description |
+|-----------|--------|-------------|
+| Header | `@stevederico/skateboard-ui/Header` | App header with title and action button |
+| Layout | `@stevederico/skateboard-ui/Layout` | Page layout with sidebar/tabbar |
+| AppSidebar | `@stevederico/skateboard-ui/AppSidebar` | Desktop navigation sidebar |
+| TabBar | `@stevederico/skateboard-ui/TabBar` | Mobile bottom navigation |
+| DynamicIcon | `@stevederico/skateboard-ui/DynamicIcon` | Lucide icon by name |
+| ThemeToggle | `@stevederico/skateboard-ui/ThemeToggle` | Dark/light mode switch |
+| Sheet | `@stevederico/skateboard-ui/Sheet` | Slide-out panel |
+| UpgradeSheet | `@stevederico/skateboard-ui/UpgradeSheet` | Premium upgrade UI |
+| ErrorBoundary | `@stevederico/skateboard-ui/ErrorBoundary` | Error boundary wrapper |
 
 ### 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
-- **SignOutView** - Sign out handler
-- **PaymentView** - Stripe payment integration
-- **TextView** - Text display view
-- **NotFound** - 404 error page
-- **ErrorBoundary** - React error boundary wrapper
+
+| Component | Import | Description |
+|-----------|--------|-------------|
+| LandingView | `@stevederico/skateboard-ui/LandingView` | Landing page |
+| SignInView | `@stevederico/skateboard-ui/SignInView` | Sign in form |
+| SignUpView | `@stevederico/skateboard-ui/SignUpView` | Sign up form |
+| SignOutView | `@stevederico/skateboard-ui/SignOutView` | Sign out handler |
+| SettingsView | `@stevederico/skateboard-ui/SettingsView` | User settings |
+| PaymentView | `@stevederico/skateboard-ui/PaymentView` | Stripe payment |
+| TextView | `@stevederico/skateboard-ui/TextView` | Legal pages |
+| NotFound | `@stevederico/skateboard-ui/NotFound` | 404 page |
 
 ### shadcn/ui Components
-Full set of shadcn/ui primitives available at `@stevederico/skateboard-ui/shadcn/ui/*`
 
-## Usage
+43 components available at `@stevederico/skateboard-ui/shadcn/ui/*`:
 
 ```javascript
 import { Button } from '@stevederico/skateboard-ui/shadcn/ui/button'
-import { Layout } from '@stevederico/skateboard-ui/Layout'
-import { ThemeToggle } from '@stevederico/skateboard-ui/ThemeToggle'
+import { Card } from '@stevederico/skateboard-ui/shadcn/ui/card'
+import { Input } from '@stevederico/skateboard-ui/shadcn/ui/input'
+import { Dialog } from '@stevederico/skateboard-ui/shadcn/ui/dialog'
+```
+
+## Usage Examples
+
+### Header
+
+```javascript
+import Header from '@stevederico/skateboard-ui/Header';
+
+<Header
+  title="Dashboard"
+  buttonTitle="Add"
+  onButtonTitleClick={() => console.log('clicked')}
+/>
+```
+
+### DynamicIcon
+
+```javascript
+import DynamicIcon from '@stevederico/skateboard-ui/DynamicIcon';
+
+<DynamicIcon name="home" size={24} />
+<DynamicIcon name="settings" size={20} className="text-muted" />
+```
+
+Icons from [lucide-react](https://lucide.dev/icons/).
+
+### UpgradeSheet
+
+```javascript
+import { useRef } from 'react';
+import UpgradeSheet from '@stevederico/skateboard-ui/UpgradeSheet';
+import { showUpgradeSheet } from '@stevederico/skateboard-ui/Utilities';
+
+function MyComponent() {
+  const upgradeRef = useRef();
+
+  return (
+    <>
+      <button onClick={() => showUpgradeSheet(upgradeRef)}>
+        Upgrade
+      </button>
+      <UpgradeSheet ref={upgradeRef} userEmail={user.email} />
+    </>
+  );
+}
+```
+
+### Context
+
+```javascript
+import { getState } from '@stevederico/skateboard-ui/Context';
+
+function MyComponent() {
+  const { state, dispatch } = getState();
+
+  // Access user
+  const user = state.user;
+
+  // Update user
+  dispatch({ type: 'SET_USER', payload: newUser });
+
+  // Sign out
+  dispatch({ type: 'CLEAR_USER' });
+}
 ```
 
 ## Utilities
 
+### API Requests
+
 ```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'
+import { apiRequest } from '@stevederico/skateboard-ui/Utilities';
+
+// GET
+const data = await apiRequest('/deals');
+
+// POST
+const newDeal = await apiRequest('/deals', {
+  method: 'POST',
+  body: JSON.stringify({ name: 'New Deal', amount: 5000 })
+});
+```
+
+Features:
+- Auto-includes credentials
+- Auto-adds CSRF token for mutations
+- Auto-redirects to /signout on 401
+
+### Data Fetching Hook
+
+```javascript
+import { useListData } from '@stevederico/skateboard-ui/Utilities';
+
+function DealsList() {
+  const { data, loading, error, refetch } = useListData('/deals');
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error}</div>;
+
+  return data.map(deal => <DealCard key={deal.id} {...deal} />);
+}
 ```
 
-## Routing
+### Usage Tracking
 
 ```javascript
-import ProtectedRoute from '@stevederico/skateboard-ui/ProtectedRoute'
+import { getRemainingUsage, trackUsage, showUpgradeSheet } from '@stevederico/skateboard-ui/Utilities';
+
+// Check remaining usage
+const usage = await getRemainingUsage('messages');
+// { remaining: 15, total: 20, isSubscriber: false }
+
+// Track usage (decrements remaining)
+const updated = await trackUsage('messages');
+
+// Show upgrade prompt
+showUpgradeSheet(upgradeSheetRef);
+```
+
+### Auth Utilities
+
+```javascript
+import { isAuthenticated, getCurrentUser } from '@stevederico/skateboard-ui/Utilities';
+
+if (isAuthenticated()) {
+  const user = getCurrentUser();
+}
 ```
 
 ## UI Visibility Control
 
-### Static Configuration (constants.json)
+### Static (constants.json)
+
 ```json
 {
   "hideSidebar": true,
@@ -67,36 +204,63 @@ import ProtectedRoute from '@stevederico/skateboard-ui/ProtectedRoute'
 }
 ```
 
-### Programmatic Control
+### Programmatic
+
 ```javascript
-import {
-  showSidebar,
-  hideSidebar,
-  showTabBar,
-  hideTabBar,
-  setUIVisibility
-} from '@stevederico/skateboard-ui/Utilities'
-
-// Individual controls
-hideSidebar()
-showSidebar()
-hideTabBar()
-showTabBar()
+import { showSidebar, hideSidebar, showTabBar, hideTabBar, setUIVisibility } from '@stevederico/skateboard-ui/Utilities';
+
+hideSidebar();
+showSidebar();
+hideTabBar();
+showTabBar();
 
 // Batch control
-setUIVisibility({ sidebar: false, tabBar: false })
+setUIVisibility({ sidebar: false, tabBar: false });
+```
+
+## Styling
+
+Import base theme and override as needed:
+
+```css
+/* styles.css */
+@import "@stevederico/skateboard-ui/styles.css";
+
+@source '../../node_modules/@stevederico/skateboard-ui';
+
+@theme {
+  --color-app: var(--color-purple-500);
+}
 ```
 
+### Theme Variables
+
+| Variable | Description |
+|----------|-------------|
+| `--color-app` | Primary brand color |
+| `--background` | Page background |
+| `--foreground` | Text color |
+| `--accent` | Secondary backgrounds |
+| `--radius` | Border radius |
+
+Dark mode is automatic via CSS custom properties.
+
+## Protected Routes
+
+```javascript
+import ProtectedRoute from '@stevederico/skateboard-ui/ProtectedRoute';
+```
+
+Used internally by createSkateboardApp. Redirects to /signin if not authenticated.
+
 ## Dependencies
 
-Built on:
 - React 19.1+
+- react-router-dom 7.0+
 - Radix UI primitives
-- TailwindCSS
-- lucide-react icons
-- class-variance-authority
+- TailwindCSS 4.0+
+- lucide-react
 
 ## Repository
 
 https://github.com/stevederico/skateboard-ui
-

package/SignInView.jsx

@@ -52,10 +52,10 @@ export default function LoginForm({
 
       if (response.ok) {
         const data = await response.json();
-        // Save CSRF token from cookie to localStorage for isAuthenticated() check
+        // Save CSRF token to localStorage for isAuthenticated() check
         const csrfCookie = document.cookie.split('; ').find(row => row.startsWith('csrf_token='));
-        if (csrfCookie) {
-          const csrfToken = csrfCookie.split('=')[1];
+        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);

package/SignUpView.jsx

@@ -55,10 +55,10 @@ export default function LoginForm({
 
       if (response.ok) {
         const data = await response.json();
-        // Save CSRF token from cookie to localStorage for isAuthenticated() check
+        // Save CSRF token to localStorage for isAuthenticated() check
         const csrfCookie = document.cookie.split('; ').find(row => row.startsWith('csrf_token='));
-        if (csrfCookie) {
-          const csrfToken = csrfCookie.split('=')[1];
+        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);

package/package.json

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