fix: storybook

Signed-off-by: Innei <[email protected]>
Innei · Apr 18, 2024 · de67097 · de67097
1 parent e3bfebf
commit de67097
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/src/components/ui/code-highlighter/index.demo.tsx b/src/components/ui/code-highlighter/index.demo.tsx
@@ -4,6 +4,7 @@ import type { DocumentComponent } from 'storybook/typings'
 import { ShikiHighLighter as Shiki } from './shiki/Shiki'
 
 export const ShikiHighLighter: DocumentComponent = () => {
+  return 'React 18 is not support this component, becuase of the `use` is only support in React 19'
   return (
     <Suspense>
       <Shiki

diff --git a/src/components/ui/excalidraw/index.demo.tsx b/src/components/ui/excalidraw/index.demo.tsx
@@ -1,7 +1,10 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ToastContainer } from 'react-toastify'
 import { ThemeProvider } from 'next-themes'
 import type { DocumentComponent } from 'storybook/typings'
 
+import { useRefValue } from '~/hooks/common/use-ref-value'
+
 import { ModalStackProvider } from '../modal'
 import demo from './demo.json'
 import { Excalidraw } from './Excalidraw'
@@ -12,7 +15,9 @@ export const Draw: DocumentComponent = () => {
       {/* <EventProvider key="viewportProvider" /> */}
       <ModalStackProvider>
         <main className="relative m-auto mt-6 max-w-[800px]">
-          <Excalidraw data={JSON.stringify(demo)} />
+          <QueryClientProvider client={useRefValue(() => new QueryClient())}>
+            <Excalidraw data={JSON.stringify(demo)} />
+          </QueryClientProvider>
         </main>
       </ModalStackProvider>
 

diff --git a/src/components/ui/markdown/index.demo.tsx b/src/components/ui/markdown/index.demo.tsx
@@ -12,7 +12,7 @@ import { BlockLoading } from '~/components/modules/shared/BlockLoading'
 import { Mermaid } from '~/components/modules/shared/Mermaid'
 import { ExcalidrawLoading } from '~/components/ui/excalidraw/ExcalidrawLoading'
 
-import { ShikiHighLighter } from '../code-highlighter/shiki/Shiki'
+import { HighLighterPrismCdn } from '../code-highlighter'
 // @ts-expect-error
 import customize from './customize.md?raw'
 import { Markdown } from './Markdown'
@@ -56,7 +56,7 @@ const CodeBlockRender = (props: {
         return <ReactComponentRender dls={props.content} />
       }
       default: {
-        return <ShikiHighLighter {...props} />
+        return <HighLighterPrismCdn {...props} />
       }
     }
   }, [props])