@uspk/components

React component library for USPK English — includes layout shells, navigation sidebars, and app-switching UI.

Installation

npm install @uspk/components

React 19 is required as a peer dependency:

npm install react react-dom

Usage

PageLayout

Full application shell with sidebar, header, theme toggle, and logout support.

import { PageLayout } from '@uspk/components'

function App() {
  return (
    <PageLayout
      routesTree={[
        { id: '1', label: 'Dashboard', href: '/dashboard', isActive: true },
        { id: '2', label: 'Settings', href: '/settings', isActive: false },
      ]}
      userData={{ name: 'Jane Doe', email: '[email protected]', avatar: '' }}
      onLogout={() => signOut()}
      theme="light"
      onThemeChange={(t) => setTheme(t)}
    >
      <main>Content goes here</main>
    </PageLayout>
  )
}

Props:

| Prop | Type | Description | |------|------|-------------| | children | ReactNode | Page content | | routesTree | NavLink[] | Navigation links | | userData | UserData | Logged-in user info | | onLogout | () => void or Promise<void> | Logout handler | | theme | string | Current theme value | | onThemeChange | (theme: string) => void | Theme change handler | | apps | AppItem[] | Optional list of apps for the app switcher | | defaultApp | AppItem | Optional currently selected app | | isAuthPage | boolean | Skip layout shell for auth/public pages | | LinkComponent | React.ComponentType | Custom link (Next.js Link, React Router Link, etc.) |

SmallSidebar

Compact sidebar for secondary navigation.

import { SmallSidebar } from '@uspk/components'

<SmallSidebar
  label="Section"
  routesTree={[
    { id: '1', label: 'Overview', href: '/overview', isActive: true },
  ]}
/>

NavLink type

interface NavLink {
  id: string
  label: string
  href: string
  isActive: boolean
  icon?: React.ReactNode
}

License

MIT