DX-1128: docs — localise design system off @ably/ui (combined view for review/demo)#3417
Draft
jamiehenson wants to merge 14 commits into
Draft
DX-1128: docs — localise design system off @ably/ui (combined view for review/demo)#3417jamiehenson wants to merge 14 commits into
jamiehenson wants to merge 14 commits into
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
jamiehenson
force-pushed
the
dx-1128/docs-ably-ui-localisation
branch
from
17d25cb to
2da466a
Compare
jamiehenson
force-pushed
the
dx-1128/docs-ably-ui-localisation
branch
from
2da466a to
6dff760
Compare
…S locally Retire the @ably/ui styling dependency for docs (DXDR-005 / DX-1128) by vendoring the base Tailwind theme (config/tailwind-ably-ui.js) and the reset, core and component stylesheets (src/styles/ably-ui/). tailwind.config.js and global.css now source these locally instead of from the published package. Behaviour is unchanged: the vendored files are byte-for-byte copies and the CSS-variable design tokens (--color-*, --fs-*, ui-text-*) resolve identically. The @ably/ui JS imports (Icon, cn, insights, scripts) are untouched and removed in later DX-1128 PRs; node_modules/@ably/ui is still scanned by Tailwind content globs until then. highlight.js (pulled in by the vendored syntax-highlighter CSS) is still transitive and should be promoted to a direct dependency before @ably/ui is removed. Refs: DX-1128
Vendored components reference text-gui-disabled-light/dark (18.1.0 token name); docs' vendored tokens only defined gui-unavailable, so disabled-state text rendered colourless. Adds the disabled aliases. Refs: DX-1128
jamiehenson
force-pushed
the
dx-1128/docs-ably-ui-localisation
branch
from
6dff760 to
c1b3585
Compare
…> ui Inline @ably/ui's base Tailwind theme into tailwind.config.js (delete the separate config/tailwind-ably-ui.js) and rename the vendored CSS dir to src/styles/ui/. Full vendored CSS + the @ably/ui content glob are RETAINED so each stacked PR stays self-sufficient/deployable; the prune + glob removal land in the final PR once all components are local. Refs: DX-1128
Add local src/utilities/cn.ts (clsx + tailwind-merge) and src/utilities/heights.ts, and repoint the 33 cn + 4 heights import sites off @ably/ui/core/utils/* (DX-1128). clsx and tailwind-merge were only present transitively via @ably/ui; they are now direct dependencies so cn keeps resolving once @ably/ui is removed. cn mirrors the upstream implementation (twMerge(clsx(inputs))) so class-merging behaviour is unchanged. Refs: DX-1128
docs-native Icon (DX-1128), removing the @ably/ui/core/Icon dependency: - icon-gui-* names resolve to @heroicons/react (exactly what @ably/ui did internally, so the glyphs are identical) — added as a direct dependency. - The remaining 46 icons docs actually uses (custom gui, product, social and tech/SDK-language logos) are vendored from @ably/ui as self-contained SVG components under src/components/Icon/glyphs/ with a generated registry. - Unknown names render nothing, matching @ably/ui's behaviour for an unrecognised icon (covers cpp/dart/etc. that have no upstream glyph). - Codemod: 26 import sites moved off @ably/ui/core/Icon + /Icon/types. Coverage verified: every icon docs renders (static names + the dynamic icon-tech-${lang} set from languageInfo) resolves via Heroicons or the registry. Vendored glyphs are excluded from eslint/prettier. Colour is applied via currentColor + additionalCSS; brand logos keep their own colours (design sign-off covers any visual nuance). Refs: DX-1128
…id rewriting
- Vendor icon-product-{chat,ai-transport,liveobjects,livesync,spaces}(+mono),
icon-product-pubsub-mono and icon-tech-{web,postgres} — rendered by the
ProductTile grid and code-snippet language pickers, previously blank.
- Restore @ably/ui's setUniqueIds (useId-keyed) so a gradient/mask-bearing glyph
rendered multiple times doesn't collide on duplicate DOM ids.
Refs: DX-1128
Vendor Badge, Button, LinkButton, FeaturedLink and Status into src/components/ui/, owned locally and adapted to the local cn / Icon (DX-1128). Adds: - src/components/ui/colors.ts — local copy of @ably/ui's colour types + data (ColorClass / ColorThemeSet / ColorClassColorGroups), shared by these components (and the rest of the lift). - IconSize to the local Icon types. - src/images/ably-logo.svg (used as a URL by the header). - swr as a direct dependency (Status fetches system status; was transitive). All @ably/ui imports in the vendored components are repointed to local paths; ~12 consumer import sites codemodded off @ably/ui/core/*. eslint clean. Refs: DX-1128
Vendor SegmentedControl and TabMenu into src/components/ui/, adapted to the local cn / Icon / colors (DX-1128). es-toolkit promoted to a direct dependency (TabMenu's throttle; was transitive); @radix-ui/react-tabs is already a docs dep. 2 consumer import sites codemodded. eslint clean. Refs: DX-1128
Vendor ProductTile (and ProductIcon/ProductLabel/ProductDescription) plus its data.ts — the ProductName taxonomy + products — into src/components/ui/ProductTile/ (DX-1128). Treated as leaf per the 2026-06-17 decision: docs owns its product data locally. Uses the local LinkButton / Icon / cn / colors. 5 consumer import sites codemodded (ProductName + the component). eslint clean. Refs: DX-1128
Vendored ProductTile data came from 18.1.0, which had reworded the AI Transport description. Revert to docs' current (17.14.0) wording to keep the migration behaviour-preserving; adopting the newer copy is a separate marketing call. Refs: DX-1128
Vendor syntax-highlighter.js (highlight + line-highlight helpers) and syntax-highlighter-registry.js (the highlight.js language set) into src/utilities/ (DX-1128). Promote highlight.js + highlightjs-curl to direct deps (were transitive). Repoint CodeBlock + tests + setupTests off @ably/ui/core/utils/syntax-highlighter*. Base of the code-rendering chain (PR E / Code + CodeSnippet builds on this). Also firms up the highlight.js dependency that PR1's vendored syntax-highlighter.css relies on. eslint clean. Refs: DX-1128
Vendor the Code and CodeSnippet subsystem (ApiKeySelector, CopyButton, LanguageSelector, PlainCodeView, TooltipButton, languages) plus the transitive Tooltip into src/components/ui/ (DX-1128). Wired to the local Icon / cn / colors, the local syntax-highlighter (PR D), and the local SegmentedControl / Badge / Code from earlier stack PRs. CodeSnippet receives apiKeys as a prop from MDXWrapper, so the SessionData API-key seam stays in MDXWrapper (the kept infra) — no scripts/SessionData import lands in the vendored component. Codemod: CodeSnippet + CodeSnippet/ languages consumers repointed; Code is internal to CodeSnippet (no direct consumer). eslint clean. Completes the docs visual-surface lift: after this, @ably/ui is imported only for insights + core/scripts (SessionData) infra. Refs: DX-1128
… setupTests mocks - Drop the vitest import from CodeSnippet/languages.test.ts (describe/it/expect are Jest globals); it was failing module resolution. - Repoint the three jest.mock() calls in setupTests.js off @ably/ui/core/* to local src/utilities/syntax-highlighter* + src/components/ui/Code. Refs: DX-1128
Every visual component is now local, so apply the end-state optimizations the earlier stack PRs deliberately deferred to stay self-sufficient/deployable: - drop the ./node_modules/@ably/ui content glob (no @ably/ui visual components remain to scan; the residual @ably/ui imports are infra with no Tailwind classes) - delete 5 dead vendored CSS files (legacy-buttons, dropdowns, layout, Slider, Flash component CSS) - zero references - prune shadows.css to the 2 used tokens (sm-soft, lg-medium) and forms.css to the checkbox block (the only forms classes docs consumes) Compiled global.css 8457 -> 6755 lines. Refs: DX-1128
jamiehenson
force-pushed
the
dx-1128/docs-ably-ui-localisation
branch
from
c1b3585 to
0dd3b59
Compare
This was referenced Jun 18, 2026
Draft
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Part of DX-1128. Combined view of the whole stack (#3409–#3416) on top of
main— for reviewing/demoing the localisation as one diff. Not for merge; the individual stacked PRs land it.What it does
Removes
@ably/uias docs' design-system source: vendors the Tailwind theme + CSS, a localIcon,cn/heights, and the full visual component set (Badge/Button/LinkButton/FeaturedLink/Status,SegmentedControl/TabMenu,ProductTile,Code/CodeSnippet), plus the syntax-highlighter util. (~169 files.)End state
Entire visual surface local; compiled
global.css6.7k lines. Remaining@ably/uiimports =insights+scripts(SessionData) +Flashreducer — parked infra. Gates still open: full build, design sign-off, and working review apps (review-app asset-prefix issue tracked separately).Stack (DX-1128)
@ably/uitokens + reset/core CSScn+heightsutilsIconcomponent@ably/uiTailwind scanmain)#3409–#3416 are a linear stack (each builds on the previous); #3417 is the combined view. ▶ = this PR.
Testing
🤖 Generated with Claude Code