docs: fix error related to Key type (#5178)

* docs: fix error related to Key type

* fix styling issue

www/apps/ui/src/components/scroll-area.tsx

@@ -3,16 +3,18 @@
 import { clx } from "@medusajs/ui"
 import * as Primitives from "@radix-ui/react-scroll-area"
 import clsx from "clsx"
+import { Key } from "@/types/props"
 
 type ScrollbarProps = React.ComponentProps<typeof Primitives.Scrollbar>
 
-const Scrollbar = (props: ScrollbarProps) => {
+const Scrollbar = ({ key, ...props }: ScrollbarProps) => {
   return (
     <Primitives.Scrollbar
       className={clsx(
         "bg-medusa-bg-base dark:bg-medusa-bg-base-dark flex touch-none select-none p-0.5 transition-colors ease-out",
         "data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col"
       )}
+      key={key as Key}
       {...props}
     />
   )
@@ -20,7 +22,7 @@ const Scrollbar = (props: ScrollbarProps) => {
 
 type ThumbProps = React.ComponentProps<typeof Primitives.Thumb>
 
-const Thumb = ({ className, ...props }: ThumbProps) => {
+const Thumb = ({ className, key, ...props }: ThumbProps) => {
   return (
     <Primitives.Thumb
       className={clx(
@@ -28,6 +30,7 @@ const Thumb = ({ className, ...props }: ThumbProps) => {
         "before:min-h-[44px] before:w-full before:min-w-[44px] before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']",
         className
       )}
+      key={key as Key}
       {...props}
     />
   )

www/apps/ui/src/components/tabs.tsx

@@ -3,6 +3,7 @@
 import { clx } from "@medusajs/ui"
 import * as Primitives from "@radix-ui/react-tabs"
 import * as React from "react"
+import { Key } from "@/types/props"
 
 const Tabs = Primitives.Root
 
@@ -10,13 +11,14 @@ const TabsList = React.forwardRef<
   React.ElementRef<typeof Primitives.List>,
   React.ComponentPropsWithoutRef<typeof Primitives.List>
   // eslint-disable-next-line react/prop-types
->(({ className, ...props }, ref) => (
+>(({ className, key, ...props }, ref) => (
   <Primitives.List
     ref={ref}
     className={clx(
       "inline-flex h-10 w-full items-end justify-start rounded-none bg-transparent p-0",
       className
     )}
+    key={key as Key}
     {...props}
   />
 ))
@@ -26,7 +28,7 @@ const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof Primitives.Trigger>,
   React.ComponentPropsWithoutRef<typeof Primitives.Trigger>
   // eslint-disable-next-line react/prop-types
->(({ className, ...props }, ref) => (
+>(({ className, key, ...props }, ref) => (
   <Primitives.Trigger
     ref={ref}
     className={clx(
@@ -35,6 +37,7 @@ const TabsTrigger = React.forwardRef<
       "dark:text-medusa-fg-subtle-dark dark:data-[state=active]:text-medusa-fg-base-dark",
       className
     )}
+    key={key as Key}
     {...props}
   />
 ))
@@ -44,13 +47,14 @@ const TabsContent = React.forwardRef<
   React.ElementRef<typeof Primitives.Content>,
   React.ComponentPropsWithoutRef<typeof Primitives.Content>
   // eslint-disable-next-line react/prop-types
->(({ className, ...props }, ref) => (
+>(({ className, key, ...props }, ref) => (
   <Primitives.Content
     ref={ref}
     className={clx(
       "w-full rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 data-[state=active]:mt-4",
       className
     )}
+    key={key as Key}
     {...props}
   />
 ))

www/apps/ui/src/types/props.ts

@@ -37,3 +37,7 @@ export type PropDataMap = PropData[]
 export type PropRegistryItem = {
   table: LazyExoticComponent<ComponentType>
 }
+
+// resolve type errors related to
+// key with radix components
+export type Key = string | number | null | undefined

www/packages/docs-ui/src/components/CodeBlock/index.tsx

@@ -64,7 +64,7 @@ export const CodeBlock = ({
                 className={clsx(
                   "text-code-body font-monospace table min-w-full pb-docs_1.5 print:whitespace-pre-wrap",
                   tokens.length > 1 && "pt-docs_1 pr-docs_1",
-                  tokens.length <= 1 && "py-docs_0.5 px-docs_1"
+                  tokens.length <= 1 && "!py-docs_0.5 px-docs_1"
                 )}
               >
                 {tokens.map((line, i) => {