Skip to content

feat(fuselage): PoC Tamagui #1914

Open
ggazzo wants to merge 84 commits intomainfrom
feat/fuselage-tamagui-v3
Open

feat(fuselage): PoC Tamagui #1914
ggazzo wants to merge 84 commits intomainfrom
feat/fuselage-tamagui-v3

Conversation

@ggazzo
Copy link
Copy Markdown
Member

@ggazzo ggazzo commented Mar 26, 2026

…imitives, provider)

Fresh start with all learnings from v1 attempt. Includes:

  • tamagui.config.ts with 72 colors, space/size/radius/zIndex tokens,
    fonts (15 scales), and 12 media queries
  • 3 themes (light, dark, high-contrast) with ~140 semantic tokens each
  • Base primitives (RcxView, RcxText, RcxInteractive, RcxInteractiveText)
  • FuselageProvider wrapping TamaguiProvider
  • Box.scss with real CSS classes for rcx-box resets
  • Storybook preview with FuselageProvider + process polyfill
  • Webpack transpileOnly + tsconfig skipLibCheck

Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com

Proposed changes (including videos or screenshots)

Issue(s)

Further comments

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Mar 26, 2026

⚠️ No Changeset found

Latest commit: f134556

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

@ggazzo ggazzo force-pushed the feat/fuselage-tamagui-v3 branch 2 times, most recently from 417e6d6 to 16fe37d Compare March 26, 2026 22:48
});

// Info wrapper (order: 1 in original)
const LabelInfo = styled(RcxText, {

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused variable LabelInfo.

Copilot Autofix

AI 5 days ago

In general, unused variables, functions, or components should be removed to improve readability and avoid confusion. If they are intended for future use, they can be reintroduced when actually needed or exported explicitly and then referenced.

Here, the best fix is to remove the unused LabelInfo styled component definition (lines 44–50) while leaving the rest of the file unchanged. This does not alter any runtime behavior, because LabelInfo is never referenced. No new imports or other code changes are required: we simply delete the block that defines LabelInfo.

Suggested changeset 1
packages/fuselage/src/components/Label/Label.tsx

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/packages/fuselage/src/components/Label/Label.tsx b/packages/fuselage/src/components/Label/Label.tsx
--- a/packages/fuselage/src/components/Label/Label.tsx
+++ b/packages/fuselage/src/components/Label/Label.tsx
@@ -42,13 +42,7 @@
 });
 
 // Info wrapper (order: 1 in original)
-const LabelInfo = styled(RcxText, {
-  name: 'LabelInfo',
 
-  display: 'flex',
-  alignItems: 'center',
-});
-
 export type LabelProps = {
   disabled?: boolean;
   required?: boolean;
EOF
@@ -42,13 +42,7 @@
});

// Info wrapper (order: 1 in original)
const LabelInfo = styled(RcxText, {
name: 'LabelInfo',

display: 'flex',
alignItems: 'center',
});

export type LabelProps = {
disabled?: boolean;
required?: boolean;
Copilot is powered by AI and may make mistakes. Always verify output.
import type { AllHTMLAttributes, ReactNode } from 'react';
import { styled } from 'tamagui';

import { RcxInteractive, RcxText, RcxView } from '../../primitives';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import RcxInteractive.

Copilot Autofix

AI 5 days ago

In general, to fix unused imports, remove the specific unused named bindings from the import statement (or the entire import if nothing from it is used). This reduces noise and avoids lint or build warnings without changing runtime behavior.

For this case, the best fix is to edit packages/fuselage/src/components/Sidebar/Item.tsx and remove RcxInteractive from the destructured import from ../../primitives, leaving RcxText and RcxView untouched. No other changes are needed, and no functionality will be affected because RcxInteractive is not referenced anywhere in the provided code.

Concretely:

  • In Item.tsx, locate the line import { RcxInteractive, RcxText, RcxView } from '../../primitives';.
  • Change it to import { RcxText, RcxView } from '../../primitives';.
    No additional methods, imports, or definitions are required.
Suggested changeset 1
packages/fuselage/src/components/Sidebar/Item.tsx

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/packages/fuselage/src/components/Sidebar/Item.tsx b/packages/fuselage/src/components/Sidebar/Item.tsx
--- a/packages/fuselage/src/components/Sidebar/Item.tsx
+++ b/packages/fuselage/src/components/Sidebar/Item.tsx
@@ -1,7 +1,7 @@
 import type { AllHTMLAttributes, ReactNode } from 'react';
 import { styled } from '@tamagui/core';
 
-import { RcxInteractive, RcxText, RcxView } from '../../primitives';
+import { RcxText, RcxView } from '../../primitives';
 import type { BoxProps } from '../Box';
 import type { IconProps } from '../Icon';
 import { Icon as FuselageIcon } from '../Icon';
EOF
@@ -1,7 +1,7 @@
import type { AllHTMLAttributes, ReactNode } from 'react';
import { styled } from '@tamagui/core';

import { RcxInteractive, RcxText, RcxView } from '../../primitives';
import { RcxText, RcxView } from '../../primitives';
import type { BoxProps } from '../Box';
import type { IconProps } from '../Icon';
import { Icon as FuselageIcon } from '../Icon';
Copilot is powered by AI and may make mistakes. Always verify output.
import type { AriaAttributes, HTMLAttributes, ReactNode } from 'react';
import { styled } from 'tamagui';

import { RcxInteractive, RcxText, RcxView } from '../../primitives';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import RcxView.

Copilot Autofix

AI 5 days ago

In general, unused imports should be removed so that only actually used symbols remain. This reduces visual clutter and avoids misleading future maintainers into thinking a symbol is relevant in this file.

The best fix here is to update the import on line 4 so that it only includes RcxInteractive and RcxText, leaving the rest of the file unchanged. No additional methods, imports, or definitions are required, and no runtime behavior will change because RcxView was never referenced. Concretely, in packages/fuselage/src/components/SidebarV2/SidebarGroupTitle.tsx, change the destructuring import from ../../primitives to drop RcxView.

Suggested changeset 1
packages/fuselage/src/components/SidebarV2/SidebarGroupTitle.tsx

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/packages/fuselage/src/components/SidebarV2/SidebarGroupTitle.tsx b/packages/fuselage/src/components/SidebarV2/SidebarGroupTitle.tsx
--- a/packages/fuselage/src/components/SidebarV2/SidebarGroupTitle.tsx
+++ b/packages/fuselage/src/components/SidebarV2/SidebarGroupTitle.tsx
@@ -1,7 +1,7 @@
 import type { AriaAttributes, HTMLAttributes, ReactNode } from 'react';
 import { styled } from '@tamagui/core';
 
-import { RcxInteractive, RcxText, RcxView } from '../../primitives';
+import { RcxInteractive, RcxText } from '../../primitives';
 import { Chevron } from '../Chevron';
 
 type SidebarGroupTitleProps = {
EOF
@@ -1,7 +1,7 @@
import type { AriaAttributes, HTMLAttributes, ReactNode } from 'react';
import { styled } from '@tamagui/core';

import { RcxInteractive, RcxText, RcxView } from '../../primitives';
import { RcxInteractive, RcxText } from '../../primitives';
import { Chevron } from '../Chevron';

type SidebarGroupTitleProps = {
Copilot is powered by AI and may make mistakes. Always verify output.
@ggazzo ggazzo force-pushed the feat/fuselage-tamagui-v3 branch from 3b27ab0 to 20c31ab Compare March 27, 2026 13:12
ggazzo and others added 25 commits March 31, 2026 20:51
…imitives, provider)

Fresh start with all learnings from v1 attempt. Includes:
- tamagui.config.ts with 72 colors, space/size/radius/zIndex tokens,
  fonts (15 scales), and 12 media queries
- 3 themes (light, dark, high-contrast) with ~140 semantic tokens each
- Base primitives (RcxView, RcxText, RcxInteractive, RcxInteractiveText)
- FuselageProvider wrapping TamaguiProvider
- Box.scss with real CSS classes for rcx-box resets
- Storybook preview with FuselageProvider + process polyfill
- Webpack transpileOnly + tsconfig skipLibCheck

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Uses styled(RcxText) with micro font scale, 5 color variants,
small and disabled states. Public API preserved.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Uses styled(RcxView) with danger and vertical variants.
Divider with children uses DividerBar + DividerWrapper composition.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Uses styled(RcxView/RcxText) with 8 color variants, size variants
using font tokens ($micro, $c2, $p2b), disabled and clickable states.
Expanded theme tokens for all tag color variants.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
ChipBase (RcxView): layout + button secondary bg/hover/press/focus.
ChipText (raw Text): p2 font scale via tokens, color $fontSecondaryInfo.
borderWidth: 0 (original has border-width: 0, not 1 like Tag).
disabledStyle uses $buttonSecondaryDisabledBg + $fontDisabled.
Gap $x4 replaces Margins wrapper.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
CalloutBase (RcxView): layout + border color by type variant.
CalloutTitle (RcxText): p2b font tokens.
CalloutContent (RcxText): p2 font tokens.
CalloutIcon: color variant matching border color per type.
All colors from status-font tokens verified against SCSS.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
FramedIconBase (RcxText): p2m font tokens, $fontSecondaryInfo default
color, $surfaceTint bg, $x4 padding/borderRadius.
Boolean props mapped to single variant (info/success/warning/danger).
Colors from $statusFontOn* tokens verified against SCSS.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
LabelBase (RcxText): p2m font tokens, $fontDefault color, display flex.
Disabled variant: pointerEvents none, $fontSecondaryInfo color.
LabelRequired (raw Text): $fontDanger color, marginInlineStart $x4.
LabelContext preserved for nested label detection.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
SkeletonBase (RcxView): display block, opacity 0.1, borderRadius $x4.
Variants: text (height auto + scale transform via style prop),
rect (base only), circle (borderRadius $full).
Shimmer animation via @rocket.chat/css-in-js keyframes + className.
Background gradient uses $strokeExtraDark CSS var.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
TileBase (RcxText): p2 font tokens, $fontDefault, $surfaceLight bg.
Elevation variants: 0 (no shadow), 1 (12px shadow + border),
2 (2px + 12px shadow + border). Shadow uses CSS vars for theme tokens.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…i v3

CodeSnippetBase (RcxView): flex row, $surfaceNeutral bg, $x4 radius.
CodeSnippetCodebox (raw Text): $mono font, $fontDefault color.
whiteSpace/wordBreak via style prop (not supported in styled).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
ChevronFrame (RcxView): inline-flex, alignSelf center.
Direction rotation via style prop (transform not supported in styled).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…i v3

ProgressBarTrack (RcxView):  bg,  radius, 8px height.
ProgressBarFill (RcxView): dynamic width/color via style prop.
Shine animation via css-in-js keyframes + className.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
6 styled components: BannerFrame (RcxText), BannerIcon, BannerContent,
BannerTitle, BannerCloseButton, BannerLink. Variant colors from
statusFontOn* tokens. Inline variant for compact mode.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
BubbleFrame (RcxView), BubbleButtonFrame (RcxInteractive) with
primary/secondary variants, BubbleItemFrame (RcxText).
Font tokens c2/micro. Group radius handling for dismiss mode.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
9 sub-components: States, StatesIcon (variant colors), StatesTitle (),
StatesSubtitle (), StatesSuggestion (), StatesSuggestionList,
StatesSuggestionListItem, StatesSuggestionText, StatesLink (native <a>).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
7 sub-components: Field, FieldDescription (), FieldError ( danger),
FieldHint (), FieldLabel (wraps Label), FieldLink (native <a> + useTheme),
FieldRow. FieldContext preserved.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
FieldGroupFrame (RcxView) with role=group. Children wrapped in
FieldGroupItem with marginBlockStart  for spacing.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ui v3

SVG icons use css-in-js for styles. Size 0.75rem default, 0.625rem small.
Colors via CSS custom properties.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
ThrobberFrame (RcxView) + ThrobberCircle. Bounce animation via
css-in-js keyframes. Colors /.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
TooltipBase (RcxText) with dark/light variation,  font tokens.
Arrow pseudo-elements via css-in-js. Direction/position via className.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
GridWrapper/GridInner (RcxView) with GridContext for breakpoint/gutter.
GridItem computes flexBasis/maxWidth from column count.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
DropdownContent (RcxView) replacing Box in Desktop/Mobile variants.
Original SCSS only had CSSTransition classes (unused).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Full rewrite: PaginationNav, PaginationLabel (), PaginationLink
(RcxInteractiveText), PaginationNavButton. Responsive via useMediaQuery.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
CardFrame/CardClickableFrame with createStyledContext for horizontal.
CardBody (), CardTitle (// variants), CardCol, CardRow,
CardHeader, CardControls. Clickable gets hover/focus states.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
ggazzo and others added 17 commits March 31, 2026 20:52
Add @tamagui/vite-plugin to demo app for build-time style extraction.
Add @tamagui/static to fuselage for webpack builds.
Static styled() definitions get extracted to atomic CSS at build time
instead of generating styles at runtime.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Refactor tsconfig.json to include @rocket.chat/fuselage-box for improved component accessibility.
- Rearrange imports in vite.config.ts for better readability and added dynamic evaluation support in Tamagui plugin.
- Remove obsolete dist files including index.html and associated assets to streamline the build process.
- Enhance App.tsx with improved formatting and structure for better readability and maintainability.
- Update Badge component to utilize TypeScript's Ref for better type safety.

This commit enhances the demo app's structure and configuration, ensuring better integration with Tamagui and improved code quality.
The @types/react-native-web package dragged in full react-native type
definitions that conflict with lib.dom.d.ts, breaking builds of other
monorepo packages (e.g. @rocket.chat/memo). Keeping react-native-web
for runtime (Tamagui peer dep) but without the types package.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ports

The base tsconfig uses NodeNext which requires .js extensions on relative
imports. fuselage-box was extracted from fuselage (webpack-based) and uses
extensionless imports throughout. Override to esnext/bundler resolution.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add lint-all, eslint, and prettier as devDependencies so the lint
script works. Auto-fix prettier formatting issues in source files.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
ts-loader with transpileOnly:true skips declaration file generation,
which breaks downstream packages (fuselage-forms) that depend on
@rocket.chat/fuselage type declarations.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ations)

- webpack with transpileOnly: avoids @tamagui/element source type errors
- tsc --emitDeclarationOnly --noCheck: generates .d.ts without blocking
  on type errors from migrated components
- react-native-shim.d.ts: stub types for react-native imports in tamagui
- tsconfig.build.json: use bundler moduleResolution for extensionless imports
- Fix index signature access in buttonSubThemes.ts (TS4111)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Downstream packages (fuselage-forms, layout, onboarding-ui, toastbar)
import '@rocket.chat/fuselage/dist/fuselage.css' in their Storybook
configs. The commented-out SCSS import meant webpack produced no CSS
file, breaking their builds.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Tamagui's @tamagui/element package points "types" to its .ts source
files, which use extensionless imports incompatible with nodenext
resolution. All packages that transitively depend on tamagui (through
@rocket.chat/fuselage) need bundler moduleResolution to avoid TS2835.

Affected: fuselage-forms, fuselage-toastbar, layout, onboarding-ui

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Tamagui's @tamagui/element points "types" to .ts source files that
import react-native. Without the actual react-native types installed,
any package that transitively depends on tamagui fails to build.

Added a root-level react-native-shim.d.ts with stub types and a paths
mapping in tsconfig.base.json so all packages resolve it automatically.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Tamagui styled components require TamaguiProvider at runtime.
FuselageProvider wraps TamaguiProvider with the fuselage config.
Without it, components throw "Can't find Tamagui configuration".

Affected: onboarding-ui, layout, fuselage-toastbar, fuselage-forms

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Migrated Tamagui styled() components lost Box shorthand props (mie, mis,
mi, mb, w, h, etc.) that downstream packages rely on. This adds:

- extractBoxProps(): extracts Box aliases and maps to CSS style object
- withBoxProps(): HOC for wrapping any styled() component
- BoxCompatProps type for extending component prop types

Applied to high-impact components: Icon, CheckBox, Chip.
Usage: <Icon mie={4} />, <CheckBox mie={8} />, <Chip height="x20" />

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Ensure @rocket.chat/storybook-dark-mode is built before running
storybook dev/build in fuselage, fuselage-forms, fuselage-toastbar,
layout, and onboarding-ui. Also add prepare script to storybook-dark-mode
and add dist to root .gitignore.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@ggazzo ggazzo force-pushed the feat/fuselage-tamagui-v3 branch from 9516aa2 to 7b7b62a Compare March 31, 2026 23:55
ggazzo and others added 5 commits March 31, 2026 21:10
1. Jest: Add transformIgnorePatterns to allow transforming ESM modules
   from @rocket.chat/fuselage-box, tamagui, and @tamagui/* packages.

2. build-storybook: Revert to original scripts without inline
   storybook-dark-mode build. Turbo's ^build dependency handles this
   automatically via the dependency graph.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
All packages that depend on @rocket.chat/fuselage need to transform
ESM modules from fuselage-box, tamagui, and @tamagui/* in Jest tests.

Affected: fuselage-forms, fuselage-toastbar, layout, onboarding-ui

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Meteor/Rocket.Chat can't resolve tamagui or fuselage-box as external
modules. Exclude them from webpack externals so they're bundled into
the UMD output. Also add fullySpecified:false rule for ESM modules
with extensionless imports (fuselage-box "type":"module").

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Skeleton renders '\u00a0' (non-breaking space) when variant is 'text'.
View-based components cannot have text children in Tamagui, causing
"Unexpected text node" warning. Switch from RcxView to RcxText.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Switch from the full tamagui package to @tamagui/core only.
All imports (styled, View, Text, TamaguiProvider, createTamagui,
createTokens, createFont, createStyledContext, useTheme, GetProps)
are available in @tamagui/core. Removes tamagui and @tamagui/web
from dependencies, reducing bundle size.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
import { forwardRef, useMemo } from 'react';

import { Box, type BoxProps } from '../Box';
import { styled, createStyledContext, Text } from '@tamagui/core';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import Text.

Copilot Autofix

AI 5 days ago

In general, unused imports should be removed from the import list to keep the module clean and avoid confusion. Here, we should update the import from @tamagui/core so that it only brings in the symbols that are actually used: styled and createStyledContext.

The best fix is to edit packages/fuselage/src/components/Button/Button.tsx at the top of the file, on the line importing from @tamagui/core, and remove Text from the destructuring import. No other code changes are necessary, and we should not add any new imports or functionality, since the rest of the snippet does not use Text.

Suggested changeset 1
packages/fuselage/src/components/Button/Button.tsx

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/packages/fuselage/src/components/Button/Button.tsx b/packages/fuselage/src/components/Button/Button.tsx
--- a/packages/fuselage/src/components/Button/Button.tsx
+++ b/packages/fuselage/src/components/Button/Button.tsx
@@ -1,7 +1,7 @@
 import type { AllHTMLAttributes } from 'react';
 import { forwardRef, useMemo } from 'react';
 
-import { styled, createStyledContext, Text } from '@tamagui/core';
+import { styled, createStyledContext } from '@tamagui/core';
 
 import { RcxInteractive, RcxText } from '../../primitives';
 import type { BoxProps } from '../Box';
EOF
@@ -1,7 +1,7 @@
import type { AllHTMLAttributes } from 'react';
import { forwardRef, useMemo } from 'react';

import { styled, createStyledContext, Text } from '@tamagui/core';
import { styled, createStyledContext } from '@tamagui/core';

import { RcxInteractive, RcxText } from '../../primitives';
import type { BoxProps } from '../Box';
Copilot is powered by AI and may make mistakes. Always verify output.
import type { HTMLAttributes } from 'react';
import { forwardRef } from 'react';
import type { ReactNode } from 'react';
import { Children, forwardRef } from 'react';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import Children.

Copilot Autofix

AI 5 days ago

In general, the fix for an unused import is to remove the unused symbol from the import statement, or delete the entire import line if all imported symbols are unused. Here, forwardRef is used, so we must keep that import but drop Children. The change is localized to the import statement on line 2 of packages/fuselage/src/components/ButtonGroup/ButtonGroup.tsx. No additional methods, imports, or definitions are required; we only adjust the named imports from React.

Suggested changeset 1
packages/fuselage/src/components/ButtonGroup/ButtonGroup.tsx

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/packages/fuselage/src/components/ButtonGroup/ButtonGroup.tsx b/packages/fuselage/src/components/ButtonGroup/ButtonGroup.tsx
--- a/packages/fuselage/src/components/ButtonGroup/ButtonGroup.tsx
+++ b/packages/fuselage/src/components/ButtonGroup/ButtonGroup.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { Children, forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { styled, createStyledContext, type GetProps } from '@tamagui/core';
 
 import { RcxView } from '../../primitives';
EOF
@@ -1,5 +1,5 @@
import type { ReactNode } from 'react';
import { Children, forwardRef } from 'react';
import { forwardRef } from 'react';
import { styled, createStyledContext, type GetProps } from '@tamagui/core';

import { RcxView } from '../../primitives';
Copilot is powered by AI and may make mistakes. Always verify output.
@@ -1,15 +1,129 @@
import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
import type { ReactElement, ReactNode } from 'react';
import { styled, Text } from '@tamagui/core';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import Text.

Copilot Autofix

AI 5 days ago

In general, unused imports should be removed from the import statement to keep the code clean and avoid confusion. This does not change runtime behavior because an unused import is never referenced.

The best fix here is to edit packages/fuselage/src/components/Callout/Callout.tsx and remove Text from the destructuring import from @tamagui/core, leaving only styled. No other changes are required because there is no usage of Text in the shown snippet. The necessary step is to adjust that single import line.

Suggested changeset 1
packages/fuselage/src/components/Callout/Callout.tsx

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/packages/fuselage/src/components/Callout/Callout.tsx b/packages/fuselage/src/components/Callout/Callout.tsx
--- a/packages/fuselage/src/components/Callout/Callout.tsx
+++ b/packages/fuselage/src/components/Callout/Callout.tsx
@@ -1,6 +1,6 @@
 import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
 import type { ReactElement, ReactNode } from 'react';
-import { styled, Text } from '@tamagui/core';
+import { styled } from '@tamagui/core';
 
 import { RcxView, RcxText } from '../../primitives';
 import { Icon, type IconProps } from '../Icon';
EOF
@@ -1,6 +1,6 @@
import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
import type { ReactElement, ReactNode } from 'react';
import { styled, Text } from '@tamagui/core';
import { styled } from '@tamagui/core';

import { RcxView, RcxText } from '../../primitives';
import { Icon, type IconProps } from '../Icon';
Copilot is powered by AI and may make mistakes. Always verify output.
ggazzo and others added 6 commits March 31, 2026 22:50
These were in the original styleTokens.ts but lost during the
fuselage-box extraction. Rocket.Chat imports padding() directly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace css() pseudo-elements with a real DividerLine component.
The css() tagged template returned Evaluable objects that caused
"Invalid value for prop className" when passed to DOM elements.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
MessageBody: base styles (font, margin, overflow, clamp) as Tamagui
styled(). Descendant styles (h1-h4, ul/ol, blockquote) as SCSS class.

Message sub-components: use tokens ($x2, $x4, $x8, $x20, $x36) for
positive values, numeric literals for negative margins (-2, -4).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replaced the traditional negative-margin-on-parent + positive-margin-on-children
spacing pattern with modern CSS gap in Message components:

- MessageContainer: gap instead of marginBlock:-2 + child marginBlock:2
- MessageContainerFixed: same
- MessageLeftContainer: removed negative marginBlock
- MessageHeader: removed marginBlock, wrapper uses gap only
- MessageBody: removed compensatory marginBlock
- MessageBlock: removed compensatory marginBlock
- MessageNameContainer: removed marginInline (gap handles it)
- MessageTimestamp: removed marginInline (gap handles it)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…m @tamagui/core

Allows downstream packages (e.g. Rocket.Chat's ui-composer) to import
styled() from @rocket.chat/fuselage without needing @tamagui/core as
a direct dependency.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Needed by Rocket.Chat's ui-composer MessageComposer component.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants