spine-framework 0.2.1 → 1.0.0

package/.framework/src/components/app-sidebar.tsx

@@ -1,228 +0,0 @@
-import * as React from "react"
-
-import { SearchForm } from "./search-form"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "./ui/collapsible"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarRail,
-} from "./ui/sidebar"
-import { GalleryVerticalEndIcon, PlusIcon, MinusIcon } from "lucide-react"
-
-// This is sample data.
-const data = {
-  navMain: [
-    {
-      title: "Getting Started",
-      url: "#",
-      items: [
-        {
-          title: "Installation",
-          url: "#",
-        },
-        {
-          title: "Project Structure",
-          url: "#",
-        },
-      ],
-    },
-    {
-      title: "Build Your Application",
-      url: "#",
-      items: [
-        {
-          title: "Routing",
-          url: "#",
-        },
-        {
-          title: "Data Fetching",
-          url: "#",
-          isActive: true,
-        },
-        {
-          title: "Rendering",
-          url: "#",
-        },
-        {
-          title: "Caching",
-          url: "#",
-        },
-        {
-          title: "Styling",
-          url: "#",
-        },
-        {
-          title: "Optimizing",
-          url: "#",
-        },
-        {
-          title: "Configuring",
-          url: "#",
-        },
-        {
-          title: "Testing",
-          url: "#",
-        },
-        {
-          title: "Authentication",
-          url: "#",
-        },
-        {
-          title: "Deploying",
-          url: "#",
-        },
-        {
-          title: "Upgrading",
-          url: "#",
-        },
-        {
-          title: "Examples",
-          url: "#",
-        },
-      ],
-    },
-    {
-      title: "API Reference",
-      url: "#",
-      items: [
-        {
-          title: "Components",
-          url: "#",
-        },
-        {
-          title: "File Conventions",
-          url: "#",
-        },
-        {
-          title: "Functions",
-          url: "#",
-        },
-        {
-          title: "next.config.js Options",
-          url: "#",
-        },
-        {
-          title: "CLI",
-          url: "#",
-        },
-        {
-          title: "Edge Runtime",
-          url: "#",
-        },
-      ],
-    },
-    {
-      title: "Architecture",
-      url: "#",
-      items: [
-        {
-          title: "Accessibility",
-          url: "#",
-        },
-        {
-          title: "Fast Refresh",
-          url: "#",
-        },
-        {
-          title: "Next.js Compiler",
-          url: "#",
-        },
-        {
-          title: "Supported Browsers",
-          url: "#",
-        },
-        {
-          title: "Turbopack",
-          url: "#",
-        },
-      ],
-    },
-    {
-      title: "Community",
-      url: "#",
-      items: [
-        {
-          title: "Contribution Guide",
-          url: "#",
-        },
-      ],
-    },
-  ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-  return (
-    <Sidebar {...props}>
-      <SidebarHeader>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton size="lg" asChild>
-              <a href="#">
-                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-                  <GalleryVerticalEndIcon className="size-4" />
-                </div>
-                <div className="flex flex-col gap-0.5 leading-none">
-                  <span className="font-medium">Documentation</span>
-                  <span className="">v1.0.0</span>
-                </div>
-              </a>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-        <SearchForm />
-      </SidebarHeader>
-      <SidebarContent>
-        <SidebarGroup>
-          <SidebarMenu>
-            {data.navMain.map((item, index) => (
-              <Collapsible
-                key={item.title}
-                defaultOpen={index === 1}
-                className="group/collapsible"
-              >
-                <SidebarMenuItem>
-                  <CollapsibleTrigger asChild>
-                    <SidebarMenuButton>
-                      {item.title}{" "}
-                      <PlusIcon className="ml-auto group-data-[state=open]/collapsible:hidden" />
-                      <MinusIcon className="ml-auto group-data-[state=closed]/collapsible:hidden" />
-                    </SidebarMenuButton>
-                  </CollapsibleTrigger>
-                  {item.items?.length ? (
-                    <CollapsibleContent>
-                      <SidebarMenuSub>
-                        {item.items.map((item) => (
-                          <SidebarMenuSubItem key={item.title}>
-                            <SidebarMenuSubButton
-                              asChild
-                              isActive={item.isActive}
-                            >
-                              <a href={item.url}>{item.title}</a>
-                            </SidebarMenuSubButton>
-                          </SidebarMenuSubItem>
-                        ))}
-                      </SidebarMenuSub>
-                    </CollapsibleContent>
-                  ) : null}
-                </SidebarMenuItem>
-              </Collapsible>
-            ))}
-          </SidebarMenu>
-        </SidebarGroup>
-      </SidebarContent>
-      <SidebarRail />
-    </Sidebar>
-  )
-}

package/.framework/src/components/auth/ProtectedRoute.tsx

@@ -1,88 +0,0 @@
-/**
- * @module src/components/auth/ProtectedRoute
- * @audience installer
- * @layer frontend-component
- * @stability stable
- *
- * React Router route guard that enforces authentication and optional
- * system-admin role checks. Wrap any `<Route>` element that requires
- * a logged-in user.
- *
- * **Auth check:** If `AuthContext.user` is null (not yet logged in or
- * session expired), redirects to `/login` using `<Navigate replace>`.
- *
- * **System-admin check:** When `requireSystemAdmin=true`, verifies that
- * `user.roles` includes `'system_admin'`. On failure it renders an
- * access-denied screen rather than redirecting, to avoid redirect loops.
- *
- * @example
- * ```tsx
- * <Route path="/admin" element={
- *   <ProtectedRoute requireSystemAdmin>
- *     <AdminLayout />
- *   </ProtectedRoute>
- * } />
- * ```
- *
- * @seeAlso src/contexts/AuthContext.tsx
- */
-
-import React from 'react'
-import { Navigate } from 'react-router-dom'
-import { useAuth } from '../../contexts/AuthContext'
-
-/**
- * Props for `ProtectedRoute`.
- *
- * @prop children - The protected route content
- * @prop requireSystemAdmin - If true, also requires the `system_admin` role
- */
-interface ProtectedRouteProps {
-  children: React.ReactNode
-  requireSystemAdmin?: boolean
-}
-
-/**
- * Route guard component.
- *
- * @param props - `ProtectedRouteProps`
- * @returns `children` when authorised, a redirect to `/login` when
- *   unauthenticated, or an access-denied screen when role check fails
- * @sideEffects none (navigation is declarative via `<Navigate>`)
- */
-export function ProtectedRoute({ children, requireSystemAdmin = false }: ProtectedRouteProps) {
-  const { user } = useAuth()
-
-  if (!user) {
-    return <Navigate to="/login" replace />
-  }
-
-  if (requireSystemAdmin && !user.roles?.includes('system_admin')) {
-    // Show access denied message instead of redirect to avoid loops
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-slate-50">
-        <div className="text-center p-8">
-          <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
-            <svg className="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
-            </svg>
-          </div>
-          <h1 className="text-2xl font-bold text-slate-900 mb-2">Access Denied</h1>
-          <p className="text-slate-600 mb-6">You need system administrator privileges to access this page.</p>
-          <div className="bg-slate-100 rounded-lg p-4 text-left">
-            <p className="text-sm text-slate-600 mb-2"><strong>Your roles:</strong> {user.roles?.join(', ') || 'None'}</p>
-            <p className="text-sm text-slate-600"><strong>Required:</strong> system_admin</p>
-          </div>
-          <button
-            onClick={() => window.location.href = '/dashboard'}
-            className="mt-6 px-4 py-2 bg-navy text-white rounded-lg hover:bg-navy/90 transition-colors"
-          >
-            Go to Dashboard
-          </button>
-        </div>
-      </div>
-    )
-  }
-
-  return <>{children}</>
-}

package/.framework/src/components/layout/AppShell.tsx

@@ -1,91 +0,0 @@
-/**
- * @module src/components/layout/AppShell
- * @audience installer
- * @layer frontend-component
- * @stability stable
- *
- * Application shell with Sidebar-05 layout for professional SaaS look.
- * Wraps page content with collapsible sidebar navigation.
- */
-
-import * as React from "react"
-import { Link } from 'react-router-dom'
-import { SidebarProvider, SidebarInset, SidebarTrigger } from "../ui/sidebar"
-import { Separator } from "../ui/separator"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "../ui/breadcrumb"
-
-interface AppShellProps {
-  sidebar: React.ReactNode
-  children: React.ReactNode
-  breadcrumbs?: { title: string; url?: string }[]
-  headerActions?: React.ReactNode
-}
-
-export function AppShell({
-  sidebar,
-  children,
-  breadcrumbs,
-  headerActions,
-}: AppShellProps) {
-  return (
-    <SidebarProvider>
-      {sidebar}
-      <SidebarInset>
-        {/* Header */}
-        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-          <div className="flex items-center gap-2 px-4">
-            <SidebarTrigger className="-ml-1" />
-            <Separator orientation="vertical" className="mr-2 h-4" />
-            {breadcrumbs && (
-              <Breadcrumb>
-                <BreadcrumbList>
-                  {breadcrumbs.map((crumb, index) => (
-                    <React.Fragment key={crumb.title}>
-                      <BreadcrumbItem
-                        className={
-                          index === breadcrumbs.length - 1
-                            ? "hidden md:block"
-                            : ""
-                        }
-                      >
-                        {index === breadcrumbs.length - 1 ? (
-                          <BreadcrumbPage>{crumb.title}</BreadcrumbPage>
-                        ) : (
-                          <BreadcrumbLink asChild>
-                            <Link to={crumb.url || "#"}>
-                              {crumb.title}
-                            </Link>
-                          </BreadcrumbLink>
-                        )}
-                      </BreadcrumbItem>
-                      {index < breadcrumbs.length - 1 && (
-                        <BreadcrumbSeparator className="hidden md:block" />
-                      )}
-                    </React.Fragment>
-                  ))}
-                </BreadcrumbList>
-              </Breadcrumb>
-            )}
-          </div>
-          {headerActions && (
-            <div className="ml-auto flex items-center gap-2 px-4">
-              {headerActions}
-            </div>
-          )}
-        </header>
-
-        {/* Main Content */}
-        <main className="flex-1 overflow-auto p-4 md:p-6 lg:p-8">
-          {children}
-        </main>
-      </SidebarInset>
-    </SidebarProvider>
-  )
-}

package/.framework/src/components/layout/Header.tsx

@@ -1,88 +0,0 @@
-/**
- * @module src/components/layout/Header
- * @audience installer
- * @layer frontend-component
- * @stability stable
- *
- * Sticky top bar rendered inside the main content area. Contains:
- * - **Mobile hamburger** (`Bars3Icon`) — visible below `lg` breakpoint;
- *   calls `onMenuClick` to open the slide-over sidebar
- * - **Search input** — hidden on small screens (placeholder only; not wired)
- * - **Notification bell** — placeholder; not yet wired to a backend
- * - **User avatar + name** — derived from `user.full_name` / `user.email`
- *
- * @seeAlso src/components/layout/Layout.tsx (mounts this component)
- * @seeAlso src/types/auth.ts (User)
- */
-
-import { Menu, Bell, Search, User } from 'lucide-react';
-import { User } from '../../types/auth'
-
-/**
- * Props for `Header`.
- *
- * @prop onMenuClick - Callback to open the mobile sidebar
- * @prop user - Currently logged-in user (null while loading)
- */
-interface HeaderProps {
-  onMenuClick: () => void
-  user: User | null
-}
-
-/**
- * Sticky top bar.
- *
- * @param props - `HeaderProps`
- * @returns Header element with menu toggle, search, notifications, and avatar
- * @sideEffects none (delegates menu open to `onMenuClick`)
- */
-export function Header({ onMenuClick, user }: HeaderProps) {
-  return (
-    <header className="sticky top-0 z-20 flex h-14 shrink-0 items-center gap-4 border-b border-slate-200 bg-white/80 backdrop-blur-md px-4 sm:px-6 lg:pl-72 lg:pr-8">
-      {/* Logo + Mobile hamburger — only visible below lg */}
-      <div className="flex items-center gap-3">
-        <button
-          onClick={onMenuClick}
-          className="rounded-md p-1.5 text-slate-500 hover:bg-slate-100 hover:text-slate-700 transition-colors lg:hidden"
-          aria-label="Open menu"
-        >
-          <Menu className="h-5 w-5" />
-        </button>
-              </div>
-
-      {/* Spacer */}
-      <div className="flex-1" />
-
-      {/* Right actions */}
-      <div className="flex items-center gap-3">
-        {/* Search */}
-        <div className="relative hidden sm:block">
-          <MagnifyingGlassIcon className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
-          <input
-            type="text"
-            placeholder="Search..."
-            className="h-9 w-48 rounded-lg border border-slate-200 bg-slate-50 pl-9 pr-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-accent-blue focus:bg-white focus:outline-none focus:ring-1 focus:ring-accent-blue transition-colors"
-          />
-        </div>
-
-        {/* Notifications */}
-        <button
-          className="relative rounded-lg p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-colors"
-          aria-label="Notifications"
-        >
-          <Bell className="h-5 w-5" />
-        </button>
-
-        {/* User avatar */}
-        <div className="flex items-center gap-2 pl-2 border-l border-slate-200">
-          <div className="flex h-7 w-7 items-center justify-center rounded-full bg-navy text-xs font-medium text-white">
-            {user?.full_name?.charAt(0) || user?.email?.charAt(0) || '?'}
-          </div>
-          <span className="hidden sm:block text-sm font-medium text-slate-700">
-            {user?.full_name}
-          </span>
-        </div>
-      </div>
-    </header>
-  )
-}

package/.framework/src/components/layout/Layout.tsx

@@ -1,95 +0,0 @@
-/**
- * @module src/components/layout/Layout
- * @audience installer
- * @layer frontend-component
- * @stability stable
- *
- * Root app shell providing the two-pane admin layout:
- * - **Desktop (`lg+`):** fixed 60-wide `<Sidebar>` on the left, scrollable
- *   main content area padded with `lg:pl-60`.
- * - **Mobile (`< lg`):** top bar with hamburger button that opens a
- *   slide-over `<Sidebar>` with a backdrop overlay.
- *
- * `isActive` is computed from the current `location.pathname` and passed
- * to `SidebarContent` for active-link highlighting.
- *
- * @seeAlso src/components/layout/Sidebar.tsx
- * @seeAlso src/contexts/AuthContext.tsx (provides `user` and `logout`)
- */
-
-import React, { useState } from 'react'
-import { Sidebar, SidebarContent } from './Sidebar'
-import { useAuth } from '../../contexts/AuthContext'
-import { useLocation } from 'react-router-dom'
-
-/** Props for `Layout`. */
-interface LayoutProps {
-  children: React.ReactNode
-}
-
-/**
- * Root two-pane admin shell.
- *
- * @param props - `LayoutProps`
- * @returns Full-page layout with sidebar + main content area
- * @sideEffects none (sidebar open state is local)
- */
-export function Layout({ children }: LayoutProps) {
-  const [sidebarOpen, setSidebarOpen] = useState(false)
-  const { user, logout } = useAuth()
-  const location = useLocation()
-
-  const isActive = (href: string) =>
-    location.pathname === href || location.pathname.startsWith(href + '/')
-
-  return (
-    <div className="min-h-screen bg-[#F2F3F8] flex lg:top-0">
-      {/* Mobile overlay */}
-      {sidebarOpen && (
-        <>
-          <div
-            className="fixed inset-0 z-40 bg-slate-900/30 backdrop-blur-sm lg:hidden"
-            onClick={() => setSidebarOpen(false)}
-          />
-          <Sidebar open={sidebarOpen} onClose={() => setSidebarOpen(false)} />
-        </>
-      )}
-
-      {/* Desktop sidebar — visible at lg+ */}
-      <aside className="hidden lg:flex lg:fixed lg:inset-y-0 lg:left-0 lg:z-30 lg:w-60 lg:flex-col lg:shrink-0 bg-white border-r border-slate-200 lg:top-0">
-        <SidebarContent
-          isActive={isActive}
-          user={user}
-          logout={logout}
-          onClose={() => {}}
-        />
-      </aside>
-
-      {/* Mobile sidebar with menu button */}
-      <div className="lg:hidden flex items-center justify-between p-4 bg-white border-b border-slate-200">
-        <button
-          onClick={() => setSidebarOpen(true)}
-          className="rounded-md p-2 text-slate-500 hover:bg-slate-100 hover:text-slate-700"
-          aria-label="Open menu"
-        >
-          <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-          </svg>
-        </button>
-        <div className="flex items-center gap-3">
-          <img src="/spine-logo.jpg" alt="Spine Framework" className="h-8 w-auto" />
-          <span className="text-lg font-semibold tracking-tight text-slate-900">Spine Framework</span>
-        </div>
-      </div>
-
-      {/* Main content area */}
-      <div className="flex-1 flex flex-col min-w-0 lg:pl-60">
-        <main className="flex-1 py-6 px-4 sm:px-6 lg:px-8 xl:px-12">
-          <div className="max-w-6xl mx-auto">
-            {children}
-          </div>
-        </main>
-      </div>
-    </div>
-  )
-}