Repository navigation
docs: add React Widgets section sourced from uipath-ui-widgets - #770
maninder-uipath wants to merge 1 commit into
Conversation
|
Review summaryTwo pages instantiate
Everything else looks good: correct subpath imports, production-only URLs, proper cross-links, |
|
✅ No issues found. Checked for bugs and CLAUDE.md compliance. |
1 similar comment
|
✅ No issues found. Checked for bugs and CLAUDE.md compliance. |
There was a problem hiding this comment.
can we add gif / image of each widget ? this would help users better visualize how each widget looks and works.
we didn't have visuals for the sample apps earlier either, but we received requests to add them for better user understanding.
|
✅ No issues found. Checked for bugs and CLAUDE.md compliance. |
1 similar comment
|
✅ No issues found. Checked for bugs and CLAUDE.md compliance. |
Raina451
left a comment
There was a problem hiding this comment.
check this: #770 (comment) , rest lgtm
| console.warn("Submit failed:", result?.error); | ||
| return; | ||
| } | ||
| await task.complete({ action: "Completed", type: "DocumentValidation" }); |
There was a problem hiding this comment.
isn't the type DocumentValidationTask? Better to use TaskType.DocumentValidation
| ``` | ||
|
|
||
| !!! tip "Finding the bucket and folder IDs" | ||
| List the buckets you can reach with the Buckets service — the cross-folder `getAll()` response carries the bucket `id` alongside its `folderId`. See the [Bucket service reference](../api/interfaces/BucketServiceModel.md): |
There was a problem hiding this comment.
buckets don't return folderId though
https://uipath.github.io/uipath-typescript/api/interfaces/BucketGetResponse/
| | `inputSchema` | `InputSchema` | No | Agent input schema. Takes precedence over the schema derived from the resolved agent; use when the caller has the schema but the agent can't be resolved (e.g. an in-progress draft) | | ||
| | `isDebugMode` | `boolean` | No | Debug flow: opens an empty conversation up front so inputs are collected in the widget, and submits update the existing conversation instead of creating a new one | |
| !!! warning "The published 1.0.0 pins an older SDK" | ||
| `@uipath/[email protected]` — currently the only published version — declares an exact peer of `@uipath/[email protected]`, which the range above does not satisfy, so npm reports an unmet peer dependency. The `^1.4.1` above is what the widget is built against today and what the next release will carry. |
There was a problem hiding this comment.
I think npm install itself would fail?
| const [sdk, setSdk] = useState<UiPath | null>(null); | ||
|
|
||
| useEffect(() => { | ||
| const init = async () => { | ||
| const uipath = new UiPath({ | ||
| baseUrl: "https://api.uipath.com", | ||
| orgName: "your-org", | ||
| tenantName: "your-tenant", | ||
| clientId: "your-client-id", | ||
| redirectUri: "http://localhost:3000/callback", | ||
| scope: "<scopes the widgets you use need>", | ||
| }); | ||
| await uipath.initialize(); | ||
| setSdk(uipath); |
There was a problem hiding this comment.
won't this break under strictmode? other samples initialize it outside in useState and guard the effect with a useRef
https://github.com/UiPath/uipath-typescript/blob/main/samples/document-validation-app/src/hooks/AuthProvider.tsx
| | `sdk` | `UiPath` | Yes | — | UiPath SDK instance | | ||
| | `entityId` | `string` | Yes | — | The UUID of the Data Fabric entity to display | | ||
| | `pageSize` | `number` | No | `50` | Number of rows per page | | ||
| | `showIdColumn` | `boolean` | No | — | Whether to show the Id column in the grid | |
There was a problem hiding this comment.
| // Bucket sources need `OR.Buckets`; entity sources need | ||
| // `DataFabric.Data.Read`. URL and byte sources need no scope. |
There was a problem hiding this comment.
widget only reads right? shound't OR.Buckets.Read be enough?
| | `onSaveAsDraft` | **Save as draft** | `(request, result?) => void` | With `sdk` + `data`: uploads `validatedData` straight to the bucket (no `processExtractedData`). Without: emits the request only | Same as above; the host-side equivalent is `saveValidatedDataAsDraft` | | ||
| | `onReportException` | **Report as exception** | `(request) => void` | Nothing — the widget never persists exceptions, in either mode. The reason is at `request.exceptionReport.Reason` | Required if you want the report persisted — call `OrchestratorDuModule.submitExceptionReport(...)` yourself | | ||
|
|
||
| Submit and draft hand you a `SaveValidatedDataResult` (`{ success, error? }`) — the host owns all UI feedback (toast, retry, etc.); the widget does not surface failures itself. The exception callback hands you `documentId` and `reason` strings ready to forward to the SDK. |
There was a problem hiding this comment.
in the above line it says reason comes from request.exceptionReport.Reason
These READMEs and the React Widgets pages on the SDK docs site were two near-complete copies of the same text, and had drifted: the multi-file-upload and pdf-viewer examples here still build the SDK inside the component body, which UiPath/uipath-typescript#770 fixed on its side. UiPath/uipath-typescript now fetches packages/<widget>/README.md at docs build time and renders it as docs/react-widgets/<widget>.md, the same way it already sources its JS Functions section from UiPath/coded-functions-js. So this brings the READMEs up to the reviewed content and adopts the conventions that build expects: - Fixed examples: the SDK is created once in a useEffect with await initialize(), and baseUrl is api.uipath.com, matching every SDK sample. - MkDocs-only syntax is written portably, since a README also has to render on npm and GitHub: `> **Note:** …` for admonitions, `<!-- tabs -->` and `<!-- details type: Title -->` for tabs and collapsibles. The fetch script translates them; npm renders a blockquote and drops the comments. - Cross-page links are absolute uipath.github.io URLs, so they resolve from an npm page too. - Development and License sit inside `<!-- docs:ignore -->`, which the fetch script strips -- contributor content stays in the README without reaching the docs site. - Validation Station gains the Vite hosting section (staging the web component into public/du-vs-wc, and why no vite.config.ts change is needed) and links to the four sample apps. docs-dispatch.yml tells the SDK repo to rebuild when a README lands on develop. It needs an SDK_DOCS_DISPATCH_TOKEN secret with contents:write on UiPath/uipath-typescript; without it the step warns and the site picks the change up on its next build. Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
) * docs: make each package README the single source for its docs page These READMEs and the React Widgets pages on the SDK docs site were two near-complete copies of the same text, and had drifted: the multi-file-upload and pdf-viewer examples here still build the SDK inside the component body, which UiPath/uipath-typescript#770 fixed on its side. UiPath/uipath-typescript now fetches packages/<widget>/README.md at docs build time and renders it as docs/react-widgets/<widget>.md, the same way it already sources its JS Functions section from UiPath/coded-functions-js. So this brings the READMEs up to the reviewed content and adopts the conventions that build expects: - Fixed examples: the SDK is created once in a useEffect with await initialize(), and baseUrl is api.uipath.com, matching every SDK sample. - MkDocs-only syntax is written portably, since a README also has to render on npm and GitHub: `> **Note:** …` for admonitions, `<!-- tabs -->` and `<!-- details type: Title -->` for tabs and collapsibles. The fetch script translates them; npm renders a blockquote and drops the comments. - Cross-page links are absolute uipath.github.io URLs, so they resolve from an npm page too. - Development and License sit inside `<!-- docs:ignore -->`, which the fetch script strips -- contributor content stays in the README without reaching the docs site. - Validation Station gains the Vite hosting section (staging the web component into public/du-vs-wc, and why no vite.config.ts change is needed) and links to the four sample apps. docs-dispatch.yml tells the SDK repo to rebuild when a README lands on develop. It needs an SDK_DOCS_DISPATCH_TOKEN secret with contents:write on UiPath/uipath-typescript; without it the step warns and the site picks the change up on its next build. Co-Authored-By: Claude Opus 5 (1M context) <[email protected]> * docs: format package READMEs and fix docs details Run Prettier over the datatable and pdf-viewer READMEs, and along the way: - document `showIdColumn`'s actual default (`true`) - point the pdf-viewer SDK-init link at the authentication page - run the docs dispatch workflow on `uipath-ubuntu-latest` Co-Authored-By: Claude Opus 5 (1M context) <[email protected]> * ci: declare empty permissions for the docs dispatch workflow zizmor's excessive-permissions audit failed the PR check: docs-dispatch.yml was the only workflow without a `permissions:` block, so it inherited the repository default for GITHUB_TOKEN. The job never uses GITHUB_TOKEN -- the cross-repo dispatch authenticates with SDK_DOCS_DISPATCH_TOKEN -- so it needs no scopes at all. Co-Authored-By: Claude Opus 5 (1M context) <[email protected]> --------- Co-authored-by: Claude Opus 5 (1M context) <[email protected]>
Adds a React Widgets section to the docs site for the @uipath/ui-widgets packages. The section overview (docs/react-widgets/index.md) is authored here; every per-widget page is fetched at docs-build time from each package's README in UiPath/uipath-ui-widgets, so the widget repo stays the single source of truth and a docs refresh needs no SDK release. - scripts/fetch-widget-docs.mjs materializes docs/react-widgets/*.md from the widget repo, translating the portable README syntax (admonitions, tabs, collapsibles, absolute cross-page links) into MkDocs markup - fetched pages are gitignored and rebuilt on every docs build - docs.yml accepts a repository_dispatch from uipath-ui-widgets - agent_docs/rules.md records that the fetched pages are never hand-edited - unit tests cover the fetch and translation behaviour Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
772a458 to
1c06a4c
Compare
| return lines.map((line) => | ||
| line.replace(absolute, (whole, path, anchor = '') => { | ||
| const clean = path.replace(/^\/+|\/+$/g, ''); | ||
| // The bare site root is the docs home page; anything else has to match a | ||
| // real file, or the link keeps its absolute form. | ||
| const candidate = | ||
| clean === '' | ||
| ? 'index.md' | ||
| : [`${clean}.md`, `${clean}/index.md`].find((rel) => existsSync(join(DOCS_DIR, rel))); | ||
| if (!candidate) { | ||
| warn(`"${SITE_URL}${path}" matches no page under docs/ -- left as an absolute link`); | ||
| return whole; | ||
| } | ||
| return `](../${candidate}${anchor})`; | ||
| }), | ||
| ); |
There was a problem hiding this comment.
Every other transform function (convertAdmonitions, convertTabs, convertDetails, checkLinks, stripIgnored) guards with fenceMask before touching a line. localizeSiteLinks skips that guard, so a markdown link containing an absolute site URL inside a fenced code block would get rewritten — turning [Docs](https://uipath.github.io/uipath-typescript/authentication/) inside a ```ts example into a broken relative path.
| return lines.map((line) => | |
| line.replace(absolute, (whole, path, anchor = '') => { | |
| const clean = path.replace(/^\/+|\/+$/g, ''); | |
| // The bare site root is the docs home page; anything else has to match a | |
| // real file, or the link keeps its absolute form. | |
| const candidate = | |
| clean === '' | |
| ? 'index.md' | |
| : [`${clean}.md`, `${clean}/index.md`].find((rel) => existsSync(join(DOCS_DIR, rel))); | |
| if (!candidate) { | |
| warn(`"${SITE_URL}${path}" matches no page under docs/ -- left as an absolute link`); | |
| return whole; | |
| } | |
| return `](../${candidate}${anchor})`; | |
| }), | |
| ); | |
| const fenced = fenceMask(lines); | |
| return lines.map((line, i) => { | |
| if (fenced[i]) return line; | |
| return line.replace(absolute, (whole, path, anchor = '') => { | |
| const clean = path.replace(/^\/+|\/+$/g, ''); | |
| // The bare site root is the docs home page; anything else has to match a | |
| // real file, or the link keeps its absolute form. | |
| const candidate = | |
| clean === '' | |
| ? 'index.md' | |
| : [`${clean}.md`, `${clean}/index.md`].find((rel) => existsSync(join(DOCS_DIR, rel))); | |
| if (!candidate) { | |
| warn(`"${SITE_URL}${path}" matches no page under docs/ -- left as an absolute link`); | |
| return whole; | |
| } | |
| return `](../${candidate}${anchor})`; | |
| }); | |
| }); |
| }); | ||
| }); |
There was a problem hiding this comment.
convertDetails has the same unclosed-block guard as convertTabs and stripIgnored (each calls fail(...) when no closing marker is found), but only convertTabs and stripIgnored have a "fails on unclosed" test here. The convertDetails error path goes unexercised.
| }); | |
| }); | |
| }); | |
| it('fails on an unclosed details block rather than swallowing the rest of the page', () => { | |
| expect(() => | |
| render('# @uipath/ui-widgets-pdf-viewer\n\n\nbody\n\n## Later section\n'), | |
| ).toThrow(/unclosed <!-- details:/); | |
| }); | |
| }); |
Review summaryTwo issues in the new fetch script and its tests:
|




What
Adds a React Widgets section to the docs site covering the six React widget packages published from UiPath/uipath-ui-widgets.
Only the section overview (
docs/react-widgets/index.md) is authored here. Every per-widget page is fetched at docs-build time from the corresponding package README, so the widget repo stays the single source of truth and a docs refresh needs no SDK release — the same arrangementdocs/js-functions/already has withUiPath/coded-functions-js.Docs-only — no SDK source, no endpoints, nothing to whitelist in Cloudflare.
Why single-source it
The widget pages would otherwise be maintained twice: here, and as each package README upstream. They had already drifted — the upstream
multi-file-uploadandpdf-viewerexamples still build the SDK inside the component body, a bug this work fixed on the docs side only.How the fetch works
scripts/fetch-widget-docs.mjsresolves the source repo to one commit SHA, fetchespackages/<widget>/README.mdfor every widgetmkdocs.ymlreferences, and writesdocs/react-widgets/<widget>.md. The output is gitignored and rebuilt on every docs build.A README also has to render on npm and GitHub, so MkDocs-only syntax is written portably upstream and translated on the way in:
> **Note:** …/> **Warning: A title**!!! note/!!! warning "A title"<!-- tabs -->+<!-- tab: Title -->=== "Title"<!-- details warning: Title -->??? warning "Title"<!-- docs:ignore -->Absolute
uipath.github.iolinks (which a README needs so they work from npm) are resolved back to the source page, so a PR preview links within itself.The script fails the build when a referenced README is gone, and warns when upstream adds a package nothing references, when a link cannot resolve here, or when a README drifts from the contract.
docs.ymlaccepts arepository_dispatchfromuipath-ui-widgets, so merging a README change there refreshes this site immediately.agent_docs/rules.mdrecords that the fetched pages are generated and must never be hand-edited.Pages
^19.2.0, thesdkprop, thelight/darkbody class, stylesheet imports, exported prop types@uipath/ui-widgets-datatable@uipath/ui-widgets-multi-file-upload@uipath/ui-widgets-pdf-viewersourceshapes, props, worker configuration, v1 CJK limitation@uipath/ui-widgets-conversational-agent-chatConversationalAgentChat+ConversationalAgentPickerChat, streaming / tool-call / session behavior@uipath/ui-widgets-validation-station@uipath/ui-widgets-external-authContent corrections (now carried upstream)
The READMEs are developer-facing repo docs and had drifted from the packages they describe. Review of the first draft found four factual errors:
sdk.entities.getAll(),sdk.buckets.getAll()UiPathfrom/coreexposes no service properties (onlyinitialize,isAuthenticated,getToken,destroy,logout,updateToken). Both tips now construct the service:new Entities(sdk).getAll()^1.3.10on three pages,>= 1.4.2on another^1.5.5, validation-station^1.5.1, the rest^1.4.1. Re-diffed against the manifests atf605a7a; all six matchnpm installshown as if it works@uipath/ui-widgets-pdf-viewerand@uipath/ui-widgets-external-authare1.0.0-beta.1and return 404 on the public registry. Both pages and the overview now say sosecret: "your-secret"in five React examples!!! dangernote against shipping a tenant secret to the browserAlso corrected: the overview claimed every widget ships a stylesheet (Validation Station ships none — its styles arrive with the web-component bundle);
@uipath/apollo-windwas listed as a user requirement though it installs with the widgets; Validation Station's mandatoryconfigureValidationStationWc()step was missing from the shared setup; and a dangling reference to "compact subcomponents" described a concept the page never introduces.A second pass caught two more problems:
initialize()at module scope. Harmless under secret-based auth, but under OAuth it navigates the browser at module-evaluation time. It now sits in an effect behind a loading gate like every other page, with a note thatredirectUrimust be a route the app serves and must match a registered URI exactly.// SDK configurationplaceholder. Both now name what they need.Since the per-widget pages are fetched, these corrections live in uipath-ui-widgets#169 rather than in this diff.
Two things that need a maintainer decision
@uipath/ui-widgets-pdf-viewerhas since shipped (1.0.0on the public registry), so that half resolved itself and Bump sdk version to 1.0.0-beta.18 #169 dropped both beta warnings. But@uipath/ui-widgets-external-authstill returns 404, and its page now tells the reader to runnpm install @uipath/ui-widgets-external-authwith no caveat. That instruction fails today. Three ways out — publish the package, restore a note to its README upstream, or drop the page from the nav until it ships. The page is fetched, so whichever you pick is a change inuipath-ui-widgets, not here.@uipath/[email protected]declares an exact peer of@uipath/[email protected]. The page documents^1.4.1— what the widget is actually built against — so following it produces an unmet peer dependency against the published version. Documenting1.1.1instead would be worse: an exact pin on a peer dependency looks like a manifest bug, and 1.1.1 is several minors stale. For now the page states the discrepancy; the real fix is a multi-file-upload release carrying the corrected peer range.Editorial decisions
<!-- docs:ignore -->— each README's Development and License sections are for people working on the widgets repo, not for SDK consumers reading the docs site.???details blocks. It is real consumer guidance, but it should not dominate the page for someone starting fresh.Nav placement
Top-level
React Widgetssection, between Coded Action Apps and JS Functions — the widgets are what you render inside a coded app or coded action app. A matchingReact Widgetsblock was added to thellms-full-content.txtmanifest so the pages land in the LLM-facing bundle alongside Getting Started and the API Reference.Files
docs/react-widgets/index.md(the only tracked page; the rest are fetched)scripts/fetch-widget-docs.mjs,package.json,.gitignore.github/workflows/docs.yml,.github/workflows/docs-pr-preview.ymlmkdocs.yml(nav section +llms-full-content.txtmanifest entries)tests/unit/scripts/fetch-widget-docs.test.tsagent_docs/rules.mdVerification
Site build — built and served the full site locally with the pinned
docs/requirements.txttoolchain:mkdocs build— all seven pages build with zero warnings; every cross-link and in-page anchor resolves, includingoauth-scopes.md#conversational-agent.mkdocs serve— all seven routes return200; tabs, admonitions and collapsible???blocks render, including code blocks nested inside admonitions.package.json; all six match. npm registry checked per package to confirm which are actually installable.api/pages, the duplicate-llmstxt-plugin notice, and thejs-functionsplaceholder pages that appear whenCODED_FUNCTIONS_DOCS_TOKENis unset locally.Fetch pipeline —
Package:line moves under the title,!!! successbecomes!!! check(the type this site's config actually declares), and the pages regain a## TypeScriptsection and two Validation Station subcomponent links that existed upstream but not here.api/interfaces/entity/index.mddirectory-index case.tests/unit/scripts/fetch-widget-docs.test.ts, following thecheck-samples.mjsprecedent.npm run lint,npm run typecheck,npm run test:unit(2903 tests) all pass.Outstanding
Neither blocks this PR; both live outside its diff.
Done — the secret is in place and verified. A manualSDK_DOCS_DISPATCH_TOKENis not set onuipath-ui-widgets.workflow_dispatchofdocs-dispatch.yml(run 37470249390) reached the realgh api .../dispatchescall and exited 0, with none of the::warning::SDK_DOCS_DISPATCH_TOKEN is not setannotation the Bump sdk version to 1.0.0-beta.18 #169 merge run produced — so the token carriescontents: writehere, not merely a non-empty value. The dispatch is a no-op until this merges:repository_dispatchis only honoured for workflows on the default branch, so the trigger this PR adds todocs.ymlgoes live on merge, and upstream README merges refresh the site from then on.🤖 Generated with Claude Code