Savvi Studio

UI Component Naming Convention

Purpose

Use a clear layer + domain naming strategy for UI code, aligned with the api-domain refactor.

Prefixes

Use prefixes at package/workspace boundaries:

  • ui-domain-*: domain-facing UI modules
  • ui-shared-*: reusable cross-domain UI modules
  • ui-app-*: app shell, providers, and composition roots

Do not force ui- in internal folder names where everything is already UI.

Internal Naming Rules

  • Folders: kebab-case
  • React components: PascalCase
  • File names: PascalCase for component files, index.ts for public barrels
  • Prefer named exports for components
  • One public entrypoint per module via index.ts
  • Avoid deep imports across modules; import from the module root

Domain Layout Template

Recommended layout inside each domain UI module:

  • components/
  • sections/
  • dialogs/
  • fields/
  • tables/
  • hooks/
  • model/
  • utils/
  • index.ts

Symbol Naming

Use domain-prefixed symbol names for exported components to avoid collisions.

Examples:

  • OrganizationListTable
  • OrganizationHeaderSection
  • OrganizationCreateDialog
  • TeamMembershipTable
  • AuthRotationHistoryPanel

Shared symbols should use Shared or Ui as the prefix when exported publicly.

Examples:

  • SharedDataTable
  • SharedTableActions
  • SharedInfiniteList

Migration Rules

  1. Migrate one domain at a time.
  2. Add/update the domain index.ts first.
  3. Switch call sites to root imports.
  4. Remove old deep imports after call sites are migrated.
  5. Keep temporary compatibility exports only during transition.

Initial Mapping

Suggested mapping for current src/components areas:

  • Domain modules:
    • organizations, auth, teams, products, tasks, maintenance, profile, workspace, environments, sponsors, audit, entities, graph, debug, session, permissions, webhooks
  • Shared modules:
    • common, data, tables, decorators
  • App modules:
    • layout, providers, container, dashboard

Implemented Core Entrypoints

The following prefixed entrypoints are now available:

  • src/components/ui-domain-auth/index.ts
  • src/components/ui-domain-audit/index.ts
  • src/components/ui-domain-debug/index.ts
  • src/components/ui-domain-graph/index.ts
  • src/components/ui-domain-entities/index.ts
  • src/components/ui-domain-permissions/index.ts
  • src/components/ui-domain-session/index.ts
  • src/components/ui-shared-common/index.ts
  • src/components/ui-core/index.ts

Use these as the preferred import sources for new code.

Example:

  • import { AuthQuickActions, SharedInfoField } from '@/components/ui-core';

Import Guidance

Preferred:

  • import from module root public barrel

Avoid:

  • deep imports into components/, dialogs/, fields/, etc.