Skip to content

feat(phase-11): example consumer app — dashboard, data table, auth guards, settings#44

Merged
jonmatum merged 2 commits intomainfrom
claude/phase-11-example-app
Apr 17, 2026
Merged

feat(phase-11): example consumer app — dashboard, data table, auth guards, settings#44
jonmatum merged 2 commits intomainfrom
claude/phase-11-example-app

Conversation

@jonmatum
Copy link
Copy Markdown
Owner

@jonmatum jonmatum commented Apr 17, 2026

Closes #12 · Refs #13

Summary

Adds apps/example — a Next.js 15 App Router app that exercises every major @jonmatum/next-shell feature as a living reference implementation.

What's in the box

apps/example/
├── app/
│   ├── layout.tsx              — AppProviders + AuthProvider (mock adapter, admin role)
│   ├── page.tsx                — redirect → /dashboard
│   └── (shell)/
│       ├── layout.tsx          — AppShell + SidebarNav + TopBar (Breadcrumbs, ThemeToggleDropdown) + footer + CommandBar
│       ├── dashboard/page.tsx  — stat cards, LoadingState + EmptyState, toast demos
│       ├── data/page.tsx       — paginated + filtered table (50 rows, 10/page)
│       ├── admin/page.tsx      — SignedIn + RoleGate guard demo; ErrorState fallback
│       └── settings/page.tsx   — react-hook-form profile form + ThemeToggleDropdown

Feature coverage:

  • AppShell / Sidebar / TopBar / Footer / CommandBar
  • SidebarNav with permission-filtered items (admin route gated)
  • Breadcrumbs derived from nav config + current pathname
  • SignedIn / SignedOut / RoleGate components
  • useUser hook
  • createMockAuthAdapter pre-seeded with admin user
  • AppProviders + AuthProvider composition
  • toast.success / toast.error / toast.promise
  • LoadingState / EmptyState / ErrorState
  • ThemeToggleDropdown (live dark mode switch in settings)
  • react-hook-form form with save feedback
  • Table with client pagination + text filter

What is intentionally NOT in this PR

  • Vercel deployment / live demo URL (can be wired up separately with a Vercel project)
  • Recharts / chart widget (data is mocked; adding a chart page is a follow-up)
  • Server-side data fetching (all data is in-memory; demonstrates the UI patterns)

Verification

pnpm format      ✅
pnpm lint        ✅ (0 errors, 0 warnings)
pnpm typecheck   ✅ (all 4 workspaces pass)
pnpm test        ✅ 508 tests / 21 files
pnpm build       ✅ library DTS clean

Checklist

  • No raw color literals
  • next-env.d.ts gitignored in apps/example/
  • **/next-env.d.ts in ESLint ignores (avoids triple-slash-reference warning)
  • Both READMEs updated (Phases 0–10 ✅, Phase 11 🚧 PR open)
  • All commits GPG-signed

@jonmatum @claude
feat(phase-11): example consumer app — dashboard, data table, auth gu…
62028d9 
…ards, settings

Adds apps/example — a Next.js 15 App Router app that exercises every major
next-shell feature as a living reference implementation.

Pages:
- /dashboard — stat cards, LoadingState + EmptyState, toast demos (success /
  error / promise), SignedIn guard
- /data — client-side paginated + filtered table (50 rows, 10/page)
- /admin — SignedIn + RoleGate guard demo; ErrorState when role missing
- /settings — react-hook-form profile form with toast-promise submit,
  ThemeToggleDropdown live demo

Shell layout (route group `(shell)`):
- AppShell + SidebarNav (permission-filtered nav, admin item gated)
- TopBar with Breadcrumbs + ThemeToggleDropdown + user display
- Custom footer
- CommandBar enabled

Auth: createMockAuthAdapter with admin user pre-seeded
Providers: AppProviders + AuthProvider wired in root layout

eslint.config.js: added **/next-env.d.ts to ignores (triple-slash refs
in Next.js generated file triggered @typescript-eslint/triple-slash-reference)

Closes #12 · Refs #13

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
jonmatumdev
jonmatumdev previously approved these changes Apr 17, 2026
View reviewed changes
Copy link
Copy Markdown
Collaborator

@jonmatumdev jonmatumdev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All checks passed. AI review found no issues. Auto-approved.

@jonmatum @claude
fix(ci): build library before typecheck so app subpath imports resolve
6b868bd 
apps/example imports @jonmatum/next-shell subpaths (e.g. /layout, /auth,
/primitives) which resolve from dist/ via package.json exports. Without a
prior build step dist/ doesn't exist and tsc cannot find the types.

Moving `pnpm build` before `pnpm typecheck` ensures the compiled library
is present when the example app's typecheck runs.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
jonmatumdev
jonmatumdev approved these changes Apr 17, 2026
View reviewed changes
Copy link
Copy Markdown
Collaborator

@jonmatumdev jonmatumdev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All checks passed. AI review found no issues. Auto-approved.

jonmatumdev
jonmatumdev approved these changes Apr 17, 2026
View reviewed changes
Copy link
Copy Markdown
Collaborator

@jonmatumdev jonmatumdev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All checks passed. AI review found no issues. Auto-approved.

@jonmatum jonmatum marked this pull request as ready for review April 17, 2026 01:02
@jonmatum jonmatum merged commit 00543ba into main Apr 17, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jonmatumdev jonmatumdev jonmatumdev approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Phase 11 — Example consumer app

2 participants

@jonmatum @jonmatumdev