[PF-2236] Unlock react-truncate react version support

[azebich]

PF-2236

Description

ShowMore was the last component blocking React 19 support on its package: it depended on react-truncate, which is unmaintained (last published 2018) and peer-locked to react <= 16, so any React 19 consumer hits an unresolvable peer conflict.

Changes:

• Replace react-truncate with @re-dev/react-truncate, a maintained fork of exactly react-truncate@2.4.0 (hooks + TypeScript rewrite, React 16–19 peers, zero runtime deps, ships its own types). The Truncate API (lines, onTruncate) is identical — the component change is the import line only.
• Pin the version exactly to 0.6.0 (no caret). The package has no npm provenance and a single maintainer, so the pin + lockfile integrity hash freeze the audited artifact. Security review done: OSV + npm advisories clean, no install scripts, no runtime deps, hand-audited dist (DOM/canvas measurement only — no network, storage, eval, or process access).
• Lift the React peer cap on @toptal/picasso-show-more (>=17.0.0 < 19.0.0 → >=17.0.0), same as Backdrop/Accordion did when their blockers were removed.
• Remove the unused react-truncate dependency from @toptal/picasso and the now-unneeded @types/react-truncate from the root.
• Update ShowMore jest snapshots.

Behavioral notes (verified):

• Real browser (Playwright + Chrome against the built package): collapsed renders the exact row count with ellipsis, toggle appears only when content actually truncates, multiline (\n → <br/>) content clamps correctly, expand/collapse round-trips to the exact full text.
• SSR (renderToString): full text in markup, same structure as before — no change.
• jsdom caveat: the fork renders collapsed content only after it can measure real layout, so in jsdom the collapsed text is empty (the old library showed the raw text there). The toggle still renders and works in jsdom. Called out in the changeset so consumers asserting on collapsed text know to assert on the expanded state or test in a real browser.

How to test

• Temploy
• Open the ShowMore story: collapsed content shows 4 rows ending with an ellipsis and a "Show more" link; clicking toggles the full text / "Show less"; content shorter than rows renders no toggle
• pnpm test:unit -- packages/base/ShowMore — 8 tests green
• Happo: no diffs expected on ShowMore (measurement moved from canvas to hidden-DOM, so sub-pixel ellipsis-placement diffs are possible — flag anything larger)

Screenshots

Before.	After.
No visual change — dependency swap only	No visual change — dependency swap only

Development checks

• Add changeset according to guidelines (if needed)
• Double check if picasso-tailwind-merge requires major update (check its README.md)
• Read CONTRIBUTING.md and Component API principles
• Make sure that additions and changes on the design follow Toptal's BASE design, and it's been already discussed with designers at #-base-core
• Annotate all props in component with documentation
• Create examples for component
• Ensure that deployed demo has expected results and good examples
• Ensure the changed/created components have not caused accessibility issues. How to use accessibility plugin in storybook.
• Self reviewed
• Covered with tests (visual tests included)

Breaking change

• codemod is created and showcased in the changeset
• test alpha package of Picasso in StaffPortal

All development checks should be done and set checked to pass the
GitHub Bot: TODOLess action

Alpha packages

Manually trigger the publish.yml workflow to publish alpha packages. Specify pull request number as a parameter (only digits, e.g. 123).

PR Review Guidelines

When to approve? ✅

You are OK with merging this PR and

1. You have no extra requests.
2. You have optional requests.
   1. Add nit: to your comment. (ex. nit: I'd rename this variable from makeCircle to getCircle)

When to request changes? ❌

You are not OK with merging this PR because

1. Something is broken after the changes.
2. Acceptance criteria is not reached.
3. Code is dirty.

When to comment (neither ✅ nor ❌)

You want your comments to be addressed before merging this PR in cases like:

1. There are leftovers like unnecessary logs, comments, etc.
2. You have an opinionated comment regarding the code that requires a discussion.
3. You have questions.

How to handle the comments?

1. An owner of a comment is the only one who can resolve it.
2. An owner of a comment must resolve it when it's addressed.
3. A PR owner must reply with ✅ when a comment is addressed.

[changeset-bot]

🦋 Changeset detected

Latest commit: d8919fc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@toptal/picasso-show-more	Patch
@toptal/picasso	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

📍 Preview URL: https://toptal.github.io/picasso/prs/5066/

This preview is updated automatically when you push changes to this PR.

[github-actions]

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

📍 Preview URL: https://toptal.github.io/picasso/prs/5066/

This preview is updated automatically when you push changes to this PR.