RFC: migrate from FuelUI to UI Primitives

[pedronauck]

This RFC proposes the adoption of the newly developed ui-primitives package, specifically designed for the explorer, across our main products: Wallet, Portal, and Bridge. This shift from the existing fuel-ui framework is motivated by the advanced features of the new UI package, which leverages RadixUI Themes and TailwindCSS. Unlike FuelUI, which is built on Stitches and RadixUI Primitives and predominantly employs CSS with style objects, the new ui-primitives package utilizes a class-based approach, as seen in TailwindCSS. This transition is expected to update our UI design and development process significantly.

---

📋 Breaking Changes

Below is a comprehensive list of the most significant changes we must address to migrate our products to the new UI framework successfully. This includes adaptations and modifications essential for the transition.

Biggest tasks

• Map all token changes between packages.
• Convert CSS-in-JS of Stitches to Tailwind
• Add missing components from FuelUI.
• Breaking change props between both React packages
• Change icons to use @tabler-icons/react directly as the new package
• Remove parts of the legacy code using mixins
• Find <GlobalStyle /> in the legacy code
• Change theme system (dark/mode) in legacy code.

Tokens that changed

• The tokens format changed from $snakeCase to kekab-case
• All accent color scale was removed. No more $accent9 or $accent8, now is just accent
• intents related props changed to color props as RadixUI
• Size-related tokens are now following TailwindCSS definitions instead of SystemUI
• Color tokens that change
  • crimson → red
  • bodyBg → background
  • bodyColor → color
  • bodyInverse → ❌
  • dialogBg → panel-solid
  • input<intents><scale> → ❌
  • intentsBase<scale> → gray-<scale>
  • intentsError<scale> → error
  • intentsInfo<scale> → info
  • intentsSuccess<scale> → success
  • intentsPrimary<scale> → accent
  • intentsSecondary<scale> → ❌
  • intentsWarning<scale> → warning
  • scales<color><scale> → <color>-<scale>
  • semantic<variant><intent>* → ❌
  • textColor → color
  • textHeading → heading
  • textActive → ❌
  • textIcon → icon
  • textInverse → ❌
  • textLink → link
  • textLinkActive → ❌
  • textLinkDisabled → ❌
  • textLinkHover → ❌
  • textLinkVisisted → ❌
  • textMuted → muted
  • textSubtext → secondary

Missing components

• ButtonLink (should be replaced by Button using as a prop)
• ContentLoader
• Form
• InputAmount
• Menu (changed in the new package to Dropdown)
• Pagination
• PasswordStrengh

Props/Components that changed

• css property for styling removed ❌
• Box.Centered removed ❌
• No more namespaced components for <Box.* />
• Grid.Item removed
• Box.Stack removed ❌
• <Icon /> now received a ReactComponent at icon prop instead of string

---

🎯 Planning

The optimal approach for executing this migration involves breaking down the major tasks and managing them on Linear, tracking the entire process as a milestone. Given the extensive nature of this project, taking incremental steps will promote a more effective and controlled transition.

A considerable portion of this migration centers on transforming the existing style object CSS into a TailwindCSS format using tailwind-variants, a methodology successfully implemented in the explorer. To facilitate this, certain automation scripts and tools can be employed. Notable among these are:

• CSS to TailwindCSS converter
• CSS-in-JS to CSS string converter

The script for this conversion process could follow these steps:

1. Transform style objects within components into tv() format.
2. Convert each cssObj() into TailwindCSS class declarations.
3. Perform clean-up operations and adjust token declarations accordingly.
4. Replace css={} properties with tailwind-variants.

By systematically following these steps, we can ensure a smooth and efficient transition to the new UI framework.

[matt-user]

Looks good. Don't we have a pagination component that we use on the explorer?