[Docs] Design-system components in src/app/components/ui have no usage/prop docs or Storybook; the only showcase (ui-demo) is an undocumented public route covering 4 of 22 components

[grantfox-oss]

Telegram (ask questions / claim the issue here first): https://t.me/+DOylgFv1jyJlNzM0

Why this matters

frontend/src/app/components/ui/ has 22 components (Button, Input, Card, Modal, Skeleton, EmptyState, LoanStatusBadge, OperationProgress, etc.) with no prop/usage documentation and no Storybook (README even claims Component Tests: Storybook but none is configured). The de-facto gallery frontend/src/app/[locale]/ui-demo/page.tsx imports only Button, Input, Card and Modal, is not linked or documented anywhere, and ships as a public production route under every locale.

Acceptance criteria

• Either set up Storybook for src/app/components/ui or document each design-system component's props/variants/usage (markdown or JSDoc), starting with Button, Input, Card, Modal, Skeleton, EmptyState
• Extend or replace the ui-demo gallery so it covers the remaining ui/ components, and document/gate the route (not silently shipped to production)
• Link the component reference from frontend/README.md

Files to touch

• frontend/src/app/components/ui
• frontend/src/app/[locale]/ui-demo/page.tsx
• frontend/README.md

Out of scope

• Visual regression testing infrastructure
• Redesigning the components themselves

[Stella112]

Hi, I’d like to work on #1246. I can add focused usage/prop documentation for the existing design-system UI components, keep it aligned with the current component APIs, and submit a clean docs PR.

[Stella112]

Hi, I’d like to work on #1246. I can add focused usage/prop documentation for the existing design-system UI components, keep it aligned with the current component APIs, and submit a clean docs PR.

[Exploit34]

Hi maintainer, Leave it to me I'll take care of this issue.

[dhareymu]

@dhareymu has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Maintainer, abeg gimme this project 🙏🙏😭😭

ℹ️ Repo Maintainers: To accept this application, review their application or assign @dhareymu to this issue.

[Sulex45]

@Sulex45 has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi I’d love to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Sulex45 to this issue.

[iyanumajekodunmi756]

@iyanumajekodunmi756 has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I would love to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @iyanumajekodunmi756 to this issue.

[MethelyDev]

@MethelyDev has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi maintainer, i would like to work on this issue, kindly assign me

ℹ️ Repo Maintainers: To accept this application, review their application or assign @MethelyDev to this issue.

[grantfox-oss]

🦊 GrantFox — @MethelyDev has been assigned to this issue!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #1246)
2. Your PR will be reviewed by the LabsCrypt maintainers

Good luck! Track your progress on GrantFox.