15 Commits

Author SHA1 Message Date
Émile Ré
4d8d26aad2 Split Link/Anchor from button navigators
Rename button-styled Link/Anchor to ButtonLink/
ButtonAnchor and add underlined text Link/Anchor
so names match look and element. Hero meta uses
plain Anchors for contact and custom links.

Signed-off-by: Émile Ré <emile@probo.com>
2026-07-31 10:59:20 +02:00
Émile Ré
311639ae98 Add z-index scale and overview redirect
Introduce a v2 z-1…z-6 stacking scale so portaled
menus sit above in-page media, and redirect the
legacy /overview trust-app URL to home.

Signed-off-by: Émile Ré <emile@probo.com>
2026-07-20 19:37:46 +02:00
Émile Ré
6bcb7461be Address compliance-portal review feedback
Fix the valid issues raised in the scaffold review.

UI kit: the Button loading state now replaces only the leading icon
instead of dropping the label, Button consumes the `active` variant so
it no longer leaks onto the DOM, and every v2 skeleton sets aria-hidden
after the prop spread so a consumer cannot override it.

@probo/relay: guard the caller-supplied onCompleted/onError callbacks so
a throwing callback still settles the awaitable mutation promise instead
of leaving it pending.

compliance-portal: normalize external website hrefs and read hostname
via URL.hostname, add a localized catch-all not-found route, and widen
the .gitattributes glob so colocated __generated__ artifacts at any depth
are marked generated.

Docs: correct the forms guide (Base UI passes plain values, Zod v3
flatten API), spread the child fragment in the permissions example, and
drop references to v2 components that do not exist in the ui guide.

Signed-off-by: Émile Ré <emile@probo.com>
2026-06-28 18:40:08 +02:00
Émile Ré
b374bc5211 Style v2 with tailwind-variants/lite
The numbered v2 token scales (text-1…9, rounded-1…6, shadow-1…6)
share a prefix with the color/utility namespaces, and tailwind-merge
(which tailwind-variants runs by default) cannot tell a numeric
text-3 from a color step, so it silently dropped the size whenever a
text-<color> was present. Switch the v2 kit to the merge-free
tailwind-variants/lite entrypoint (added in v3): upgrade
tailwind-variants to ^3.2.2, import tv/VariantProps from
tailwind-variants/lite in the typography primitives, and drop the
per-call twMerge:false.

The legacy v1 kit stays on tailwind-variants (merge intact). Document
the rationale in ui.md and add a packages/ui/src/v2 ESLint guard that
forbids tailwind-variants, tailwind-merge, and clsx.

Signed-off-by: Émile Ré <emile@probo.com>
2026-06-26 18:52:06 +02:00
Émile Ré
8f36e81fe8 Refine frontend contrib guides
Apply small follow-up edits to the frontend documentation: the
AGENTS index, the forms, react-components, and ui guides.

Signed-off-by: Émile Ré <emile@probo.com>
2026-06-26 18:52:06 +02:00
Émile Ré
91495947aa Document typography components over raw elements
The v2 token guide endorsed raw <h1>/<p> with hand-applied step
classes, which invites token drift across app code. Add a UI guide
section establishing that content text flows through kit typography
components (Text, Heading, Code) and that raw elements are reserved
for kit internals and structural, non-textual nodes. Cross-link it
from the typography token section so the two guides stay aligned.

Signed-off-by: Émile Ré <emile@probo.com>
2026-06-26 18:52:05 +02:00
Émile Ré
393c538de1 Fill frontend rule gaps and broaden v2 tokens
Add the frontend guides the v2 UI kit and compliance-portal need but
that the first rework left uncovered: forms, routing, client state, and
permission-gated UI.

forms.md documents a tiered approach on Base UI Field/Form -- native
constraints, then a validate function, then zod parsed in onSubmit, and
react-hook-form only for large or dynamic forms -- and drops the custom
useFormWithSchema wrapper. routing.md covers @probo/routes, navigation,
typed params, URL-as-state, redirects, auth/protected routes, and the
folded-in no-outlet-context rule. state-management.md gives a decision
order across Relay, URL, local state, context, and zustand.
permissions.md gates UI on the canUpdate/canDelete permission(action:)
fields without re-encoding authorization in the client.

Rename v2-colors.md to v2-tokens.md and add the typography, radius,
shadow, and native-spacing scales alongside color. Extend ui.md with
user feedback, empty-state, and accessibility sections; standardize
toasts on Base UI's Toast (Toast.useToastManager) and retire the legacy
useToast across ui.md, forms.md, error-handling.md, and relay.md. Add an
Intl formatting section to i18n.md and a non-Relay HTTP / file
upload-download section to ts-style.md. Update the AGENTS.md index and
the v2-color-scale cursor rule for the new and renamed guides.

Signed-off-by: Émile Ré <emile@probo.com>
2026-06-26 18:52:05 +02:00
Émile Ré
c158eb9be4 Rework frontend rules for the v2 UI kit
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>
2026-06-26 18:52:05 +02:00
Émile Ré
4aebf65b89 ui: stop importing phosphor icons with bare-name aliases
Add a rule to contrib/claude/ui.md requiring the Icon-suffixed exports
(e.g. EyeIcon) instead of aliased bare names (Eye as IconEye), and fix
TrackerResourceRow to follow it.

Signed-off-by: Émile Ré <emile@getprobo.com>
2026-05-11 14:56:34 +04:00
Émile Ré
619cdd0e6c Update contrib guides
Signed-off-by: Émile Ré <emile@getprobo.com>
2026-04-20 17:47:04 +04:00
Émile Ré
ebd3a27c70 Update ui rules
Signed-off-by: Émile Ré <emile@getprobo.com>
2026-04-07 11:38:58 +04:00
Émile Ré
7ea33ab68e Change naming rule
Signed-off-by: Émile Ré <emile@getprobo.com>
2026-04-07 11:38:58 +04:00
Émile Ré
be03883d80 Add rule for UI component props
Signed-off-by: Émile Ré <emile@getprobo.com>
2026-04-07 11:38:57 +04:00
Émile Ré
d58d838f04 Add general react components rules
Signed-off-by: Émile Ré <emile@getprobo.com>
2026-04-07 11:38:57 +04:00
Émile Ré
6e836d42f8 Add UI rules
Signed-off-by: Émile Ré <emile@getprobo.com>
2026-04-07 11:38:57 +04:00