core(frontend): apply shadcn-ui updates

pingcap · Aug 12, 2024 · c16bd66 · c16bd66
1 parent d260cbf
commit c16bd66
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 12 deletions.
diff --git a/frontend/app/src/components/ui/accordion.tsx b/frontend/app/src/components/ui/accordion.tsx
@@ -35,7 +35,7 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <ChevronDown className={cn('h-4 w-4 shrink-0 transition-transform duration-200')} />
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ))

diff --git a/frontend/app/src/components/ui/chart.tsx b/frontend/app/src/components/ui/chart.tsx
@@ -52,7 +52,7 @@ const ChartContainer = React.forwardRef<
         data-chart={chartId}
         ref={ref}
         className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
           className
         )}
         {...props}
@@ -79,8 +79,9 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   return (
     <style
       dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES).map(
-          ([theme, prefix]) => `
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
 ${prefix} [data-chart=${id}] {
 ${colorConfig
   .map(([key, itemConfig]) => {
@@ -92,7 +93,8 @@ ${colorConfig
   .join("\n")}
 }
 `
-        ),
+          )
+          .join("\n"),
       }}
     />
   )
@@ -192,11 +194,11 @@ const ChartTooltipContent = React.forwardRef<
               <div
                 key={item.dataKey}
                 className={cn(
-                  "flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                   indicator === "dot" && "items-center"
                 )}
               >
-                {formatter && (item?.value !== undefined) && item.name ? (
+                {formatter && item?.value !== undefined && item.name ? (
                   formatter(item.value, item.name, item, index, item.payload)
                 ) : (
                   <>

diff --git a/frontend/app/src/components/ui/command.tsx b/frontend/app/src/components/ui/command.tsx
@@ -117,7 +117,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
       className
     )}
     {...props}

diff --git a/frontend/app/src/components/ui/form.tsx b/frontend/app/src/components/ui/form.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { Slot } from "@radix-ui/react-slot"

diff --git a/frontend/app/src/components/ui/toaster.tsx b/frontend/app/src/components/ui/toaster.tsx
@@ -25,7 +25,7 @@ export function Toaster() {
               )}
             </div>
             {action}
-            {/*<ToastClose />*/}
+            <ToastClose />
           </Toast>
         )
       })}

diff --git a/frontend/app/src/components/ui/toggle-group.tsx b/frontend/app/src/components/ui/toggle-group.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
-import { VariantProps } from "class-variance-authority"
+import { type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 import { toggleVariants } from "@/components/ui/toggle"

diff --git a/frontend/packages/widget-react/src/Widget.tsx b/frontend/packages/widget-react/src/Widget.tsx
@@ -18,10 +18,10 @@ export interface WidgetProps {
 }
 
 export function Widget ({ bootstrapStatus, exampleQuestions, icon, buttonIcon, buttonLabel }: WidgetProps) {
-  const [_, setDark] = useState(() => matchMedia('(prefers-color-scheme: dark)').matches);
+  const [, setDark] = useState(() => matchMedia('(prefers-color-scheme: dark)').matches);
   const container = useRef<HTMLDivElement>();
   if (!container.current) {
-    container.current = document.getElementById('tidb-ai-widget')! as any;
+    container.current = document.getElementById('tidb-ai-widget')! as never;
   }
 
   const toggleDark = (dark: boolean) => {