Skip to content

Add EnterpriseAppShell-ShadcnUI sample - #452

Open
Marcus Castro (MarcusCastroMSFT) wants to merge 1 commit into
microsoft:mainfrom
MarcusCastroMSFT:sample/enterprise-app-shell-shadcnui
Open

Add EnterpriseAppShell-ShadcnUI sample#452
Marcus Castro (MarcusCastroMSFT) wants to merge 1 commit into
microsoft:mainfrom
MarcusCastroMSFT:sample/enterprise-app-shell-shadcnui

Conversation

@MarcusCastroMSFT

@MarcusCastroMSFT Marcus Castro (MarcusCastroMSFT) commented Sep 3, 2026

Copy link
Copy Markdown

Summary

Adds a new sample, samples/EnterpriseAppShell-ShadcnUI — a production-shaped starter for building enterprise applications on Power Apps Code Apps.

The gap it fills: templates/starter gives you a correctly configured, minimal code app and leaves the application design to you. This sample takes the opposite bet — the shell is already built, and fourteen worked example apps show how a page is put together, so the first thing you do is delete rather than assemble.

What's in it

  • A real shell, not a mockup. Collapsible sidebar with nested highlighting, hash routing, breadcrumbs derived from the route registry, light/dark plus colour themes, suspense skeletons, error boundary.
  • Fourteen example apps — dashboards, kanban, card grids, master–detail, data tables, charts, forms in side sheets, a map. Each one is a worked example of the house patterns.
  • A single module registry. Every app is one folder under src/app/ plus one line in src/app/modules.ts. Routes, sidebar entry and breadcrumbs are all derived from it, so removing an app is two actions and adding one is three. That constraint is what the whole structure is built around.
  • In-app documentation covering the folder contract, the CLI commands and the conventions.
  • Agent-friendly by design — the README includes house rules you can drop into .github/copilot-instructions.md, CLAUDE.md or AGENTS.md.

Stack

React 19 · TypeScript 5.9 (strict, verbatimModuleSyntax) · Vite 7 · Tailwind CSS v4 · shadcn/ui · react-router 8 (HashRouter) · @tanstack/react-table · recharts · dnd kit (@dnd-kit) · maplibre-gl · sonner · zod · @microsoft/power-apps

Verification

Run from samples/EnterpriseAppShell-ShadcnUI after this branch was assembled:

Command Result
npm ci exit 0
npx tsc -b --noEmit --force exit 0, no output
npm run lint 8 pre-existing errors, 0 warnings (documented in the sample README as the baseline)
npm run build exit 0, dist/ produced

The 8 lint errors are react-refresh/only-export-components in shadcn vendor files plus two react-hooks/set-state-in-effect inherited from the shadcn dashboard block. They are called out explicitly in the sample README so contributors don't "fix" vendor code.

Notes

  • power.config.json is not committed — it holds a tenant-specific environment GUID, and pa app init writes it. This matches the direction of Modernize Power Apps code app samples #448 / ergonza/removePowerConfigFromSample.
  • All data is mock data in session state, so npm run dev works with no Power Platform connection at all. The README documents the Dataverse and SharePoint paths for swapping it out.
  • The map renders keyless CARTO basemap tiles by default; VITE_MAPBOX_TOKEN in .env.example is optional.
  • package-lock.json is included, matching tanstack-app.
  • Root README.md gains one row in the /samples table.

A Fluent UI sibling of this sample is planned, so the two can be compared side by side.

Checklist

  • Sample lives under samples/ in its own folder
  • Has its own README.md with screenshots, setup, and pa CLI steps
  • Builds clean from a fresh npm ci
  • No environment-specific or secret values committed
  • Added to the root README samples table

A production-shaped starter for enterprise apps on Power Apps Code Apps: React 19, TypeScript, Vite 7, Tailwind CSS v4 and shadcn/ui, with 14 example apps wired into a real application shell (sidebar, hash routing, derived breadcrumbs, theming, suspense skeletons, error boundary).

Apps are registered in a single module registry, so removing one is deleting a folder and one line. Also adds the sample to the root README table.
@MarcusCastroMSFT

Copy link
Copy Markdown
Author

@microsoft-github-policy-service agree company="Microsoft"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant