Skip to content

Replace the demo app's hand-rolled widgets with Ark UI and lucide-react #138

Description

@gabitoesmiapodo

User story / Problem statement

Currently the demo app hand-rolls its dropdowns, tooltip, dialog, toasts, segmented controls and progress bar. Readers who study the app to learn Canton have to reverse-engineer our inventions instead of reading a library's docs. The monorepo already picked Zag as its behavior engine for canton-dappbooster, and the app diverges from it.

Expected outcome

Every interactive control in the demo app comes from Ark UI, which wraps the same Zag machines the kit already uses. Generic icons come from lucide-react. A reader can look up any control in public docs.

Acceptance criteria

  • AccountMenu and RoleSelect use Ark Menu, and hooks/useDismissable.ts is deleted
  • Toasts use Ark Toast, and the store and timer map in utils/toast.ts are deleted
  • Modal uses Ark Dialog, and utils/topLayer.ts is deleted
  • InfoTip uses Ark Tooltip and opens on touch
  • Dashboard's filter pills and the create-grant curve toggle share one Ark component
  • The create-grant wizard uses Ark Steps instead of a step counter
  • ScheduleBar uses Ark Progress and reports its value to a screen reader
  • The milestone percent field uses Ark NumberInput instead of stripping characters by regex
  • Select uses Ark Select
  • Generic icons come from lucide-react, and only the brand and house marks stay hand-rolled

Alternatives considered

Radix Primitives. Better known, but it is a second behavior engine next to the kit's Zag, and its Toast still leaves the toast list to the caller, so utils/toast.ts would survive. Ark depends on @zag-js/* at the version the kit already resolves, so no duplicate copy lands in the lockfile.

Technical notes

Install @ark-ui/react and lucide-react in dapp/frontend only. canton-dappbooster stays on raw Zag, because its anatomy class strings are the contract canton-theme selects against. Ark Steps touches CreateGrant, so expect a conflict with the separate refactor issue unless one lands first.

Activity

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

Metadata

Metadata

Labels

Type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions