feat(samples): add document-validation-subcomponents sample app

[nickgatej]

Summary

• Adds a React + TypeScript + Vite sample app (samples/document-validation-subcomponents-app) that builds a custom human-in-the-loop document review workspace by composing the individual subcomponents exported by @uipath/ui-widgets-validation-station — DocumentViewer, CompactDocTypeField, CompactFieldsForm, CompactTableEditor, and CompactBusinessRules — rather than the all-in-one ValidationStation component.
• Demonstrates OAuth 2.0 authorization code + PKCE login against UiPath Cloud via the @uipath/uipath-typescript SDK.
• Lists Document Validation tasks (Tasks.getAll with an OData filter) and hydrates one with its full validation payload (Tasks.getById with TaskType.DocumentValidation).
• Fetches document artifacts once with the useBucketArtifacts hook and shares them across subcomponents via a single instanceId.
• Supports complete (Task.complete), save-as-draft, and exception-report (OrchestratorDuModule.submitExceptionReport) flows.
• Complements the sibling document-validation-app sample, which uses the monolithic ValidationStation component.

Test plan

• npm install in samples/document-validation-subcomponents-app
• npm run build succeeds
• npm run lint passes
• npm run dev — OAuth login, task list loads, subcomponents render and stay linked via shared instanceId
• Complete, save-as-draft, and exception-report flows work against a live tenant

🤖 Generated with Claude Code

[claude]

Review findings

New issues posted this run:

1. package.json line 13 — @uipath/ui-widgets-validation-station is referenced as a local .tgz file that is not committed to the repo; npm install will fail. The sibling document-validation-app uses "1.0.0" (registry version specifier). Same fix needed here.

2. ReviewInbox.tsx line 175 — new OrchestratorDuModule(sdk) is constructed inline inside the handleReportException callback, allocating a new service object on every call. Should be memoized at component level the same way Tasks is (line 36).

3. ReviewInbox.tsx lines 18 and 62 — OData filter and orderby values use PascalCase field names. Per CLAUDE.md, these should use the camelCase names the SDK surfaces. OData is case-insensitive so this will not fail at runtime, but it is inconsistent with every other example in the codebase.

[claude]

✅ No issues found. Checked for bugs and CLAUDE.md compliance.

[claude]

Re-opened threads from prior review

Three previously-resolved threads were re-opened because the requested changes were not made:

1. ReviewInbox.tsx — OrchestratorDuModule inline construction: new OrchestratorDuModule(sdk) is still instantiated inside the handleReportException callback. Should be memoized at the component level like Tasks.

2. ReviewInbox.tsx — PascalCase filter fields: buildFilter() still uses Type, IsDeleted, Status (PascalCase). Per CLAUDE.md, filter values should use the camelCase names the SDK surfaces.

3. ReviewInbox.tsx — PascalCase orderby: orderby value still uses PascalCase (Priority, CreationTime). Should be priority, creationTime.

[claude]

Re-opened threads from prior review

Two previously-resolved threads were re-opened because the requested changes were not made:

1. ReviewInbox.tsx — PascalCase filter fields: buildFilter() still uses Type, IsDeleted, Status (PascalCase). Per CLAUDE.md, OData filter values should use the camelCase names the SDK surfaces: type, isDeleted, status.

2. ReviewInbox.tsx — PascalCase orderby: orderby value still uses Priority desc,CreationTime asc. Should be priority desc,creationTime asc.

The other two issues from the prior review (local .tgz package reference and inline OrchestratorDuModule construction) are now fixed.

[Raina451]

trying to understand, whats the difference between document-validation-subcomponents-app and existing one: https://github.com/UiPath/uipath-typescript/tree/main/samples/document-validation-app ?

Do we need 2 different samples?
CC: @maninder-uipath

[claude]

Re-opened threads from prior review

Two previously-resolved threads were re-opened because the requested changes were not made:

1. ReviewInbox.tsx line 18 — PascalCase filter fields: buildFilter() still uses Type, IsDeleted, Status (PascalCase). Per CLAUDE.md, OData filter values should use the camelCase names the SDK surfaces: type, isDeleted, status.

2. ReviewInbox.tsx line 63 — PascalCase orderby: orderby value still uses Priority desc,CreationTime asc. Should be priority desc,creationTime asc.

[nickgatej]

@Raina451 Yes, both are intentional. The newly added one uses the individual subcomponents so users can build a custom layout; the other uses the full component for the standard layout.

[Raina451]

minor comments. rest lgtm

[Raina451]

@nickgatej can you also add this app metadata in docs/samples/index.html , ref: https://github.com/UiPath/uipath-typescript/pull/602/changes#diff-f32a7d2e6a232a50369df8c8ba3ffd5fede6afe02df88ea5ece244ac4c0e6718

[claude]

Re-opened threads from prior review

Two previously-resolved threads were re-opened because the requested changes were not made:

1. ReviewInbox.tsx line 18 — PascalCase filter fields: buildFilter() still uses Type, IsDeleted, Status (PascalCase). Per CLAUDE.md, OData filter values should use the camelCase names the SDK surfaces: type, isDeleted, status.

2. ReviewInbox.tsx line 63 — PascalCase orderby: orderby value still uses Priority desc,CreationTime asc. Should be priority desc,creationTime asc.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud