feat(webapp): restructure component directories by taxonomy by macko911 · Pull Request #6274 · NangoHQ/nango

macko911 · 2026-05-28T11:32:27Z

Problem

The webapp component directories didn't reflect the newly established taxonomy classification — patterns, reusable components, and layout shells were mixed together at the top level with no structural signal about what belonged where.

Solution

Physical reorganization encoding the taxonomy in the directory structure. All moves, renames, and import updates in one PR (splitting would only create rebase choreography).

New structure:

src/
  layout/           AppHeader, AppSidebar (app shell, alongside DashboardLayout)
  app/              DevToolPanel (dev overlay, collocated with App.tsx)
  features/         Playground/ (self-contained feature with own store/hooks)
  components-v2/
    ui/             47 elements + components — PascalCase filenames
    patterns/       8 app-specific reusable patterns
  components/       (v1, retiring in Phase 2A)
    ui/             existing + 6 moved from top-level
    patterns/       12 v1 patterns

What moved:

AppHeader, AppSidebar → src/layout/
DevToolPanel → src/features/
Playground/ → src/features/
8 v2 patterns (Breadcrumbs, ChartCard, ConfirmDialog, CriticalErrorAlert, IntegrationLogo, KeyValueInput, PermissionGate, ScopesInput) → components-v2/patterns/
22 top-level v2 elements/components → components-v2/ui/
25 v2 ui/ files renamed from kebab-case → PascalCase (button.tsx → Button.tsx, etc.)
12 v1 patterns → components/patterns/
6 v1 generic files → components/ui/

Review approach: check build + smoke test rather than reading every line — the diff is large but entirely mechanical (moves + import path updates).

Fixes NAN-5747

Testing

tsc --noEmit passes with 0 import errors
Sidebar, header, playground, and connection pages manually verified to render correctly

Encodes the element/component/pattern classification in the directory structure. Mechanical moves + renames + import updates. Moves: - AppHeader, AppSidebar → src/layout/ (app shell, alongside DashboardLayout) - DevToolPanel → src/app/ (dev overlay, collocated with App.tsx) - Playground/ → src/features/ (self-contained feature with own store/hooks) - v2 patterns (Breadcrumbs, ChartCard, ConfirmDialog, CriticalErrorAlert, IntegrationLogo, KeyValueInput, PermissionGate, ScopesInput) → components-v2/patterns/ - v2 top-level elements/components (Avatar, Tabs, Toast, MultiSelect, +18) → components-v2/ui/ - v1 patterns (AvatarCustom, ConfirmModal, DebugMode, EmptyState, ErrorBoundary, ErrorComponent, Info, InfoBloc, LinkWithIcon, Logo, PermissionRoute, PrivateRoute) → components/patterns/ - v1 generic (CopyText, ErrorCircle, HttpLabel, MultiSelect, PeriodSelector, SimpleTooltip) → components/ui/ Renames: - All components-v2/ui/ files: kebab-case → PascalCase (25 files) After this commit components-v2/ root contains only ui/ and patterns/, and components/ root contains only icons/, ui/, and patterns/.

All import sites updated to reflect the new directory structure from the previous commit: kebab-case → PascalCase for ui/, and moved paths for layout/, app/, features/, patterns/ destinations.

linear · 2026-05-28T11:32:31Z

NAN-5747

github-actions · 2026-05-28T11:32:42Z

Preview Deploy

Status	URL	Deploy Logs	Last Updated
✅ Ready	Preview URL	Deploy Logs	28 May 2026, 21:25 UTC

cubic-dev-ai

No issues found across 196 files

Confidence score: 5/5

Automated review surfaced no issues in the provided summaries.
No files require special attention.

_{Note: This PR contains a large number of files. cubic only reviews up to 100 files per PR, so some files may not have been reviewed. cubic prioritizes the most important files to review.

On a pro plan you can use ultrareview for larger PRs.

Re-trigger cubic}

…ganize-webapp-components-into-ui-patterns-subdirs

cubic-dev-ai

1 issue found across 3 files (changes from recent commits).

_{Tip: Review your code locally with the cubic CLI to iterate faster.

Fix all with cubic | Re-trigger cubic}

Three categories of fixes: 1. Restore ! non-null assertions removed by eslint in CreateLegacy.tsx and ApiKeys.tsx — these were correct assertions inside guarded blocks. 2. Restore as Extract<...> type assertion in OAuth2CCSettings.tsx that eslint stripped, causing a downstream .data tsc error. 3. Add as Extract<typeof x.authMode, 'SPECIFIC_MODE'> casts to all integration form and settings components (AppAuthCreateForm, CustomAuthCreateForm, InstallPluginAuthCreateForm, McpGenericCreateForm, McpOAuthCreateForm, OAuthCreateForm, AppAuthSettings, McpOAuthSettings, OAuthSettings). These files pass a broad AuthModeType to a discriminated union that requires a narrow extract — the type errors were pre-existing but only surfaced when our import renames caused TypeScript to re-check the files from scratch.

DevToolPanel has its own Zustand store (store/feature-flags.ts), making it inconsistent with Playground — both belong in features/ by the same rule. Move it and update the three import sites. AGENTS.md rewrite: - Consistent directory paths (no src/ prefix in table) - Remove all phase-specific wording (Phase 2A etc.) - "app chrome" -> "app shell" - Extend PascalCase convention to all React component files, not just ui/ - Remove migration context section - Clarify app/ as bootstrap-only (no independent state)

…tableInput, SecretInput Redefines the ui/ vs patterns/ boundary: - ui/ = design-system lift candidates (Storybook required) - patterns/ = stays in webapp (Nango-specific OR generic helpers that don't belong in a published component library) Moves ConditionalTooltip (conditional wrapper with no publishable visual story), EditableInput and SecretInput (both depend on PermissionGate, a Nango-specific pattern) from ui/ to patterns/. Updates all import sites and AGENTS.md. Notion taxonomy updated to match.

…us Checkbox import

cubic-dev-ai · 2026-05-28T21:23:02Z

You're iterating quickly on this pull request. To help protect your rate limits, cubic has paused automatic reviews on new pushes for now—when you're ready for another review, comment @cubic-dev-ai review.

Two breakdown files predate master's component directory restructure (components-v2 -> components, #6274) and still imported from the old @/components-v2 path, which rebasing onto the renamed tree left dangling. Point them at the renamed @/components path.

macko911 added 2 commits May 28, 2026 13:28

feat(webapp): update import paths after component restructure

e150bbf

All import sites updated to reflect the new directory structure from the previous commit: kebab-case → PascalCase for ui/, and moved paths for layout/, app/, features/, patterns/ destinations.

macko911 had a problem deploying to development May 28, 2026 11:32 — with GitHub Actions Failure

cubic-dev-ai Bot reviewed May 28, 2026

View reviewed changes

macko911 changed the title ~~feat(webapp): restructure component directories by taxonomy (NAN-5747)~~ feat(webapp): restructure component directories by taxonomy May 28, 2026

macko911 added 2 commits May 28, 2026 14:10

Merge remote-tracking branch 'origin/master' into matej/nan-5747-reor…

8b1e664

…ganize-webapp-components-into-ui-patterns-subdirs

fix(webapp): restore type assertion removed by eslint autofix

e8cd8d8

macko911 had a problem deploying to development May 28, 2026 12:15 — with GitHub Actions Failure

docs: document webapp component taxonomy and eslint scope warning

025cf00

macko911 had a problem deploying to development May 28, 2026 12:19 — with GitHub Actions Failure

cubic-dev-ai Bot reviewed May 28, 2026

View reviewed changes

Comment thread packages/webapp/src/pages/Team/Billing/components/PaymentMethodDialog.tsx

macko911 temporarily deployed to development May 28, 2026 12:31 — with GitHub Actions Inactive

macko911 temporarily deployed to development May 28, 2026 14:15 — with GitHub Actions Inactive

docs: add ts-build prerequisite and update eslint note in AGENTS.md

fb66bb7

macko911 temporarily deployed to development May 28, 2026 14:37 — with GitHub Actions Inactive

Update agents.md

292edee

macko911 temporarily deployed to development May 28, 2026 14:52 — with GitHub Actions Inactive

Autofix eslint errors

0947455

macko911 temporarily deployed to development May 28, 2026 15:01 — with GitHub Actions Inactive

macko911 had a problem deploying to development May 28, 2026 18:35 — with GitHub Actions Failure

refactor(webapp): move DestructiveActionModal to patterns/

c405da8

macko911 had a problem deploying to development May 28, 2026 19:50 — with GitHub Actions Failure

fix(webapp): fix typecheck errors surfaced by import path changes

5125f1d

macko911 temporarily deployed to development May 28, 2026 21:14 — with GitHub Actions Inactive

fix(webapp): fix import ordering after patterns/ moves, remove spurio…

ca09ed6

…us Checkbox import

macko911 temporarily deployed to development May 28, 2026 21:23 — with GitHub Actions Inactive

macko911 marked this pull request as ready for review May 29, 2026 08:25

marcindobry approved these changes May 29, 2026

View reviewed changes

macko911 added this pull request to the merge queue May 29, 2026

Merged via the queue into master with commit 0489181 May 29, 2026
29 checks passed

macko911 deleted the matej/nan-5747-reorganize-webapp-components-into-ui-patterns-subdirs branch May 29, 2026 08:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(webapp): restructure component directories by taxonomy#6274

feat(webapp): restructure component directories by taxonomy#6274
macko911 merged 14 commits into
masterfrom
matej/nan-5747-reorganize-webapp-components-into-ui-patterns-subdirs

macko911 commented May 28, 2026 •

edited

Loading

Uh oh!

linear Bot commented May 28, 2026

Uh oh!

github-actions Bot commented May 28, 2026 •

edited

Loading

Uh oh!

cubic-dev-ai Bot left a comment

Uh oh!

cubic-dev-ai Bot left a comment •

edited

Loading

Uh oh!

Uh oh!

cubic-dev-ai Bot commented May 28, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

macko911 commented May 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Solution

Testing

Uh oh!

linear Bot commented May 28, 2026

Uh oh!

github-actions Bot commented May 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Preview Deploy

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cubic-dev-ai Bot commented May 28, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

macko911 commented May 28, 2026 •

edited

Loading

github-actions Bot commented May 28, 2026 •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading