rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rework frontend rules for the v2 UI kit

Browse Source 
Make contrib/claude the single source of truth for v2 frontend work
on the compliance-portal app and packages/ui/src/v2, treating console
and the legacy @probo/ui tree as non-compliant code to migrate rather
than precedent.

Rewrite ui.md around the v2 kit: flat folders, Base UI as the headless
layer styled thinly (controlled open/onOpenChange, no imperative ref or
cloneElement plumbing), tailwind-variants only, separate components over
structure-changing variants, and bundle-safe skeletons that never drag
Base UI into the loading path.

Add a naming/suffix taxonomy to react-components.md, replacing the
Table/Row and connection-item Card suffixes with List/ListItem, and add
an error/fallback props convention. Document _lib and _locales special
folders plus routes.ts placement in app-arborescence.md, with at most
one _locales per routes.ts.

Add error-handling.md (reusable ErrorBoundary usable at any level plus
async try/catch) and i18n.md (i18next key-based catalogs). Update the
relay file-organization and fragment examples, the connection-item
cursor rule, and the AGENTS.md index to match.

Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
Émile Ré
2026-06-23 18:27:47 +02:00
parent 023fb70a58
commit c158eb9be4
8 changed files with 678 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
contrib/claude/relay.md
View File

@@ -191,7 +191,7 @@ Fragments colocate data requirements with the component that reads them:
```tsx
const contactFragment = graphql`
fragment ContactRow_contactFragment on ThirdPartyContact {
fragment ContactListItem_contactFragment on ThirdPartyContact {
id
fullName
email
@@ -204,7 +204,7 @@ const contactFragment = graphql`
}
`;
function ContactRow(props: { contactKey: ContactRow_contactFragment$key }) {
function ContactListItem(props: { contactKey: ContactListItem_contactFragment$key }) {
const contact = useFragment(contactFragment, props.contactKey);
// ...
}
@@ -539,9 +539,10 @@ pages/organizations/third-parties/
_components/
CreateContactDialog.tsx # create mutation
EditContactDialog.tsx # update mutation
tabs/
ThirdPartyContactsTab.tsx # refetchable fragment + item fragment
ThirdPartyComplianceTab.tsx
ThirdPartyContactListItem.tsx # connection-item fragment
contacts/
ThirdPartyContactsPage.tsx # refetchable fragment + list section
ThirdPartyContactsSection.tsx # section fragment
```
Component-specific operations (queries, fragments, mutations) are defined inline in the component file that uses them. Shared sub-components live in `_components/` next to the page (scoped to the nearest common ancestor).