From f865281177f4c30a918e28514b8c8c7ac95498df Mon Sep 17 00:00:00 2001 From: Danielle Maywood Date: Thu, 11 Jun 2026 11:21:34 +0100 Subject: [PATCH] refactor(site): remove CSSProperties assertions (#26234) --- site/src/@types/react.d.ts | 8 +++----- site/src/components/Chart/Chart.tsx | 19 +++++-------------- .../WorkspaceTiming/Chart/Chart.tsx | 16 +++++++--------- .../WorkspaceTimings.stories.tsx | 2 +- .../AgentsPage/components/AgentsSkeletons.tsx | 18 +++++++----------- .../components/ChatElements/Response.tsx | 4 ++-- .../components/ChatElements/Shimmer.tsx | 14 ++++++-------- .../components/ChatElements/tools/utils.ts | 3 +-- .../ChatModelAdminPanel/ProviderForm.tsx | 4 +--- .../ResizableChatsSidebarFrame.tsx | 13 +++++-------- .../components/RightPanel/RightPanel.tsx | 2 +- 11 files changed, 39 insertions(+), 64 deletions(-) diff --git a/site/src/@types/react.d.ts b/site/src/@types/react.d.ts index 553a983dc9..68c03b3489 100644 --- a/site/src/@types/react.d.ts +++ b/site/src/@types/react.d.ts @@ -1,7 +1,5 @@ -declare module "react" { - interface CSSProperties { - [key: `--${string}`]: string | number | undefined; +namespace React { + export interface CSSProperties { + [customProp: `--${string}`]: string | number | undefined; } } - -export {}; diff --git a/site/src/components/Chart/Chart.tsx b/site/src/components/Chart/Chart.tsx index 2043bca13b..4d9de7f594 100644 --- a/site/src/components/Chart/Chart.tsx +++ b/site/src/components/Chart/Chart.tsx @@ -2,14 +2,7 @@ * Copied from shadc/ui on 01/13/2025 * @see {@link https://ui.shadcn.com/docs/components/chart} */ -import { - type CSSProperties, - createContext, - type Ref, - useContext, - useId, - useMemo, -} from "react"; +import { createContext, type Ref, useContext, useId, useMemo } from "react"; import * as RechartsPrimitive from "recharts"; import { cn } from "#/utils/cn"; @@ -246,12 +239,10 @@ export const ChartTooltipContent: React.FC = ({ "my-0.5": nestLabel && indicator === "dashed", }, )} - style={ - { - "--color-bg": indicatorColor, - "--color-border": indicatorColor, - } as CSSProperties - } + style={{ + "--color-bg": indicatorColor, + "--color-border": indicatorColor, + }} /> ) )} diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/Chart.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/Chart.tsx index 60835ef126..bcc6fad220 100644 --- a/site/src/modules/workspaces/WorkspaceTiming/Chart/Chart.tsx +++ b/site/src/modules/workspaces/WorkspaceTiming/Chart/Chart.tsx @@ -13,15 +13,13 @@ export const Chart = (props: HTMLProps) => {
); }; diff --git a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx index ac9cdd333c..bb0c51bcc9 100644 --- a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx +++ b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx @@ -285,7 +285,7 @@ export const InvalidTimeRange: Story = { export const MultipleAgents: Story = { decorators: [ (Story) => ( -
+
), diff --git a/site/src/pages/AgentsPage/components/AgentsSkeletons.tsx b/site/src/pages/AgentsPage/components/AgentsSkeletons.tsx index b1932de2ea..0c7494d79f 100644 --- a/site/src/pages/AgentsPage/components/AgentsSkeletons.tsx +++ b/site/src/pages/AgentsPage/components/AgentsSkeletons.tsx @@ -1,4 +1,4 @@ -import { type CSSProperties, type FC, useState } from "react"; +import { type FC, useState } from "react"; import { Skeleton } from "#/components/Skeleton/Skeleton"; import { cn } from "#/utils/cn"; import { chatWidthClass, useChatFullWidth } from "../hooks/useChatFullWidth"; @@ -35,11 +35,9 @@ export const AgentsPageSkeleton: FC = () => { return (
@@ -195,11 +193,9 @@ export const AgentChatPageSkeleton: FC = () => {
{rightPanel.open && (
diff --git a/site/src/pages/AgentsPage/components/ChatElements/Response.tsx b/site/src/pages/AgentsPage/components/ChatElements/Response.tsx index 5975b20864..01fbb6e3f2 100644 --- a/site/src/pages/AgentsPage/components/ChatElements/Response.tsx +++ b/site/src/pages/AgentsPage/components/ChatElements/Response.tsx @@ -3,7 +3,7 @@ import { File as FileViewer, type SupportedLanguages, } from "@pierre/diffs/react"; -import type { ComponentPropsWithRef, CSSProperties, ReactNode } from "react"; +import type { ComponentPropsWithRef, ReactNode } from "react"; import { type Components, defaultRehypePlugins, @@ -98,7 +98,7 @@ const markdownFileViewerStyle = { "--diffs-header-font-family": '"Geist Variable", system-ui, sans-serif', "--diffs-font-size": "12px", "--diffs-line-height": "20px", -} as CSSProperties; +}; const createComponents = ( fileViewerThemeType: FileViewerThemeType, diff --git a/site/src/pages/AgentsPage/components/ChatElements/Shimmer.tsx b/site/src/pages/AgentsPage/components/ChatElements/Shimmer.tsx index 4538fdf252..d1441d191c 100644 --- a/site/src/pages/AgentsPage/components/ChatElements/Shimmer.tsx +++ b/site/src/pages/AgentsPage/components/ChatElements/Shimmer.tsx @@ -1,6 +1,6 @@ import type { MotionProps } from "motion/react"; import { MotionConfig, motion } from "motion/react"; -import type { CSSProperties, ElementType, JSX } from "react"; +import type { ElementType, JSX } from "react"; import { cn } from "#/utils/cn"; @@ -53,13 +53,11 @@ const ShimmerComponent = ({ className, )} initial={{ backgroundPosition: "100% center" }} - style={ - { - "--spread": `${dynamicSpread}px`, - backgroundImage: - "var(--bg), linear-gradient(hsl(var(--content-secondary)), hsl(var(--content-secondary)))", - } as CSSProperties - } + style={{ + "--spread": `${dynamicSpread}px`, + backgroundImage: + "var(--bg), linear-gradient(hsl(var(--content-secondary)), hsl(var(--content-secondary)))", + }} transition={{ duration, ease: "linear", diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/utils.ts b/site/src/pages/AgentsPage/components/ChatElements/tools/utils.ts index b8a4314525..aa07edf380 100644 --- a/site/src/pages/AgentsPage/components/ChatElements/tools/utils.ts +++ b/site/src/pages/AgentsPage/components/ChatElements/tools/utils.ts @@ -1,7 +1,6 @@ import type { FileDiffMetadata } from "@pierre/diffs"; import { parsePatchFiles } from "@pierre/diffs"; import * as Diff from "diff"; -import type { CSSProperties } from "react"; import * as Yup from "yup"; import { asRecord, asString, isValid } from "../runtimeTypeUtils"; @@ -424,7 +423,7 @@ export const DIFFS_FONT_STYLE = { "--diffs-bg-selection-number-override": "hsl(var(--content-link) / 0.13)", "--diffs-selection-number-fg": "hsl(var(--content-link))", "--diffs-gap-style": "1px solid hsl(var(--border-default))", -} as CSSProperties; +}; /** * Checks whether a tool result should be rendered as a syntax-highlighted diff --git a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProviderForm.tsx b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProviderForm.tsx index fe817705f7..5924dedcad 100644 --- a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProviderForm.tsx +++ b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProviderForm.tsx @@ -1,6 +1,5 @@ import { InfoIcon } from "lucide-react"; import { - type CSSProperties, type FC, type FormEvent, type ReactNode, @@ -271,8 +270,7 @@ export const ProviderForm: FC = ({ data-lpignore="true" data-form-type="other" data-bwignore - style={{ WebkitTextSecurity: "disc" } as CSSProperties} - className="h-9 font-mono text-[13px]" + className="h-9 font-mono text-[13px] [-webkit-text-security:disc]" placeholder={apiKeyPlaceholder} required={requiresAPIKey} value={apiKey} diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/ResizableChatsSidebarFrame.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/ResizableChatsSidebarFrame.tsx index 4dcef6532f..380f268028 100644 --- a/site/src/pages/AgentsPage/components/ChatsSidebar/ResizableChatsSidebarFrame.tsx +++ b/site/src/pages/AgentsPage/components/ChatsSidebar/ResizableChatsSidebarFrame.tsx @@ -1,5 +1,4 @@ import { - type CSSProperties, type KeyboardEvent as ReactKeyboardEvent, type ReactNode, type PointerEvent as ReactPointerEvent, @@ -106,13 +105,11 @@ export const ResizableChatsSidebarFrame = ({ return (