Conversation
|
417e6d6 to
16fe37d
Compare
| }); | ||
|
|
||
| // Info wrapper (order: 1 in original) | ||
| const LabelInfo = styled(RcxText, { |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
Show autofix suggestion
Hide autofix suggestion
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.
| @@ -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; |
| 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
Show autofix suggestion
Hide autofix suggestion
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 lineimport { RcxInteractive, RcxText, RcxView } from '../../primitives';. - Change it to
import { RcxText, RcxView } from '../../primitives';.
No additional methods, imports, or definitions are required.
| @@ -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'; |
| 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
Show autofix suggestion
Hide autofix suggestion
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.
| @@ -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 = { |
3b27ab0 to
20c31ab
Compare
…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>
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>
9516aa2 to
7b7b62a
Compare
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
Show autofix suggestion
Hide autofix suggestion
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.
| @@ -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'; |
| 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
Show autofix suggestion
Hide autofix suggestion
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.
| @@ -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'; |
| @@ -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
Show autofix suggestion
Hide autofix suggestion
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.
| @@ -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'; |
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>
…imitives, provider)
Fresh start with all learnings from v1 attempt. Includes:
fonts (15 scales), and 12 media queries
Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com
Proposed changes (including videos or screenshots)
Issue(s)
Further comments