From b27f3e5312c364189691a3111bf4c8ef08d7dbcd Mon Sep 17 00:00:00 2001
From: yingpengsha <yingpengsha@kuaishou.com>
Date: Mon, 9 Oct 2023 16:53:13 +0800
Subject: [PATCH 1/2] :bug: fix: rename folder name

---
 src/{StroyBook => StoryBook}/demos/index.tsx | 0
 src/{StroyBook => StoryBook}/index.md        | 0
 src/{StroyBook => StoryBook}/index.tsx       | 0
 src/{StroyBook => StoryBook}/style.ts        | 0
 src/index.ts                                 | 2 +-
 5 files changed, 1 insertion(+), 1 deletion(-)
 rename src/{StroyBook => StoryBook}/demos/index.tsx (100%)
 rename src/{StroyBook => StoryBook}/index.md (100%)
 rename src/{StroyBook => StoryBook}/index.tsx (100%)
 rename src/{StroyBook => StoryBook}/style.ts (100%)

diff --git a/src/StroyBook/demos/index.tsx b/src/StoryBook/demos/index.tsx
similarity index 100%
rename from src/StroyBook/demos/index.tsx
rename to src/StoryBook/demos/index.tsx
diff --git a/src/StroyBook/index.md b/src/StoryBook/index.md
similarity index 100%
rename from src/StroyBook/index.md
rename to src/StoryBook/index.md
diff --git a/src/StroyBook/index.tsx b/src/StoryBook/index.tsx
similarity index 100%
rename from src/StroyBook/index.tsx
rename to src/StoryBook/index.tsx
diff --git a/src/StroyBook/style.ts b/src/StoryBook/style.ts
similarity index 100%
rename from src/StroyBook/style.ts
rename to src/StoryBook/style.ts
diff --git a/src/index.ts b/src/index.ts
index 40178135..d5e69f55 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -122,7 +122,7 @@ export {
   type StroyBookProps,
   useControls,
   useCreateStore,
-} from './StroyBook';
+} from './StoryBook';
 export * from './styles';
 export { default as Swatches, type SwatchesProps } from './Swatches';
 export { default as TabsNav, type TabsNavProps } from './TabsNav';

From 8dfba164eddf899e09d602babd3c22ad87e2587d Mon Sep 17 00:00:00 2001
From: yingpengsha <yingpengsha@kuaishou.com>
Date: Mon, 9 Oct 2023 16:59:06 +0800
Subject: [PATCH 2/2] :bug: fix: rename StroyBook with StoryBook

---
 src/ActionIcon/demos/CustomSize.tsx    |  6 +++---
 src/ActionIcon/demos/index.tsx         |  6 +++---
 src/ActionIconGroup/demos/index.tsx    |  6 +++---
 src/Avatar/demos/index.tsx             |  6 +++---
 src/ChatHeader/demos/index.tsx         |  6 +++---
 src/ChatItem/demos/Alert.tsx           |  6 +++---
 src/ChatItem/demos/index.tsx           |  6 +++---
 src/ChatList/demos/Group.tsx           |  6 +++---
 src/ChatList/demos/index.tsx           |  6 +++---
 src/DraggablePanel/demos/index.tsx     |  6 +++---
 src/EditableMessage/demos/index.tsx    |  6 +++---
 src/FluentEmoji/demos/index.tsx        |  6 +++---
 src/GradientButton/demos/index.tsx     |  6 +++---
 src/GridBackground/demos/index.tsx     |  6 +++---
 src/Highlighter/demos/FullFeatured.tsx |  6 +++---
 src/Highlighter/demos/index.tsx        |  6 +++---
 src/Icon/demos/CustomSize.tsx          |  6 +++---
 src/Icon/demos/index.tsx               |  6 +++---
 src/Input/demos/TextArea.tsx           |  6 +++---
 src/Input/demos/index.tsx              |  6 +++---
 src/Logo/demos/ExtraText.tsx           |  6 +++---
 src/Logo/demos/index.tsx               |  6 +++---
 src/LogoThree/demos/index.tsx          |  6 +++---
 src/Markdown/demos/index.tsx           |  6 +++---
 src/SearchBar/demos/index.tsx          |  6 +++---
 src/Snippet/demos/index.tsx            |  6 +++---
 src/Spotlight/demos/index.tsx          |  6 +++---
 src/StoryBook/demos/index.tsx          |  6 +++---
 src/StoryBook/index.tsx                |  6 +++---
 src/Toc/demos/index.tsx                |  6 +++---
 src/TokenTag/demos/index.tsx           |  6 +++---
 src/Tooltip/demos/index.tsx            |  6 +++---
 src/index.ts                           | 10 +++++++++-
 33 files changed, 105 insertions(+), 97 deletions(-)

diff --git a/src/ActionIcon/demos/CustomSize.tsx b/src/ActionIcon/demos/CustomSize.tsx
index 2ecd6b5d..3ff9d7c9 100644
--- a/src/ActionIcon/demos/CustomSize.tsx
+++ b/src/ActionIcon/demos/CustomSize.tsx
@@ -1,4 +1,4 @@
-import { ActionIcon, ActionIconProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { ActionIcon, ActionIconProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 import { Settings } from 'lucide-react';
 
 export default () => {
@@ -34,8 +34,8 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <ActionIcon active icon={Settings} size={size} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/ActionIcon/demos/index.tsx b/src/ActionIcon/demos/index.tsx
index e437ed09..810a4dc5 100644
--- a/src/ActionIcon/demos/index.tsx
+++ b/src/ActionIcon/demos/index.tsx
@@ -1,4 +1,4 @@
-import { ActionIcon, ActionIconProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { ActionIcon, ActionIconProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 import { folder } from 'leva';
 import * as LucideIcon from 'lucide-react';
 
@@ -44,8 +44,8 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <ActionIcon {...control} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/ActionIconGroup/demos/index.tsx b/src/ActionIconGroup/demos/index.tsx
index 9e438c1e..2f147b8f 100644
--- a/src/ActionIconGroup/demos/index.tsx
+++ b/src/ActionIconGroup/demos/index.tsx
@@ -1,7 +1,7 @@
 import {
   ActionIconGroup,
   ActionIconGroupProps,
-  StroyBook,
+  StoryBook,
   useControls,
   useCreateStore,
 } from '@lobehub/ui';
@@ -26,13 +26,13 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <ActionIconGroup
         dropdownMenu={dropdownMenu}
         items={items}
         onActionClick={(key) => console.log(key)}
         {...control}
       />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/Avatar/demos/index.tsx b/src/Avatar/demos/index.tsx
index 3fcaf38b..3f4615fa 100644
--- a/src/Avatar/demos/index.tsx
+++ b/src/Avatar/demos/index.tsx
@@ -1,4 +1,4 @@
-import { ActionIconProps, Avatar, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { ActionIconProps, Avatar, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 
 import { useCdnFn } from '@/ConfigProvider';
 
@@ -30,8 +30,8 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <Avatar {...control} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/ChatHeader/demos/index.tsx b/src/ChatHeader/demos/index.tsx
index 656da345..a1922895 100644
--- a/src/ChatHeader/demos/index.tsx
+++ b/src/ChatHeader/demos/index.tsx
@@ -1,4 +1,4 @@
-import { ChatHeader, ChatHeaderProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { ChatHeader, ChatHeaderProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 
 export default () => {
   const store = useCreateStore();
@@ -10,9 +10,9 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store} noPadding>
+    <StoryBook levaStore={store} noPadding>
       <ChatHeader {...control} left={<div>Left</div>} right={<div>Right</div>} />
       <div style={{ height: 100 }} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/ChatItem/demos/Alert.tsx b/src/ChatItem/demos/Alert.tsx
index 7601953b..8645f752 100644
--- a/src/ChatItem/demos/Alert.tsx
+++ b/src/ChatItem/demos/Alert.tsx
@@ -1,4 +1,4 @@
-import { ChatItem, ChatItemProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { ChatItem, ChatItemProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 
 import { avatar } from './data';
 
@@ -17,8 +17,8 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <ChatItem avatar={avatar} error={control} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/ChatItem/demos/index.tsx b/src/ChatItem/demos/index.tsx
index 6ba2fd58..eef1010a 100644
--- a/src/ChatItem/demos/index.tsx
+++ b/src/ChatItem/demos/index.tsx
@@ -2,7 +2,7 @@ import {
   ActionIconGroup,
   ChatItem,
   ChatItemProps,
-  StroyBook,
+  StoryBook,
   useControls,
   useCreateStore,
 } from '@lobehub/ui';
@@ -37,7 +37,7 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <ChatItem
         {...control}
         actions={
@@ -57,6 +57,6 @@ export default () => {
         editing={edit}
         onEditingChange={setEdit}
       />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/ChatList/demos/Group.tsx b/src/ChatList/demos/Group.tsx
index 38c31e02..b650371e 100644
--- a/src/ChatList/demos/Group.tsx
+++ b/src/ChatList/demos/Group.tsx
@@ -1,4 +1,4 @@
-import { ChatList, ChatListProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { ChatList, ChatListProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 
 import { groupData } from './data';
 
@@ -16,13 +16,13 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <ChatList
         data={groupData}
         {...control}
         onActionClick={(key) => console.log(key)}
         style={{ width: '100%' }}
       />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/ChatList/demos/index.tsx b/src/ChatList/demos/index.tsx
index a8fe5dd9..92e930db 100644
--- a/src/ChatList/demos/index.tsx
+++ b/src/ChatList/demos/index.tsx
@@ -1,4 +1,4 @@
-import { ChatList, ChatListProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { ChatList, ChatListProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 
 import { data } from './data';
 
@@ -16,13 +16,13 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <ChatList
         data={data}
         style={{ width: '100%' }}
         {...control}
         onActionClick={(key) => console.log(key)}
       />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/DraggablePanel/demos/index.tsx b/src/DraggablePanel/demos/index.tsx
index 29e9d1fe..bb544349 100644
--- a/src/DraggablePanel/demos/index.tsx
+++ b/src/DraggablePanel/demos/index.tsx
@@ -1,7 +1,7 @@
 import {
   DraggablePanel,
   DraggablePanelProps,
-  StroyBook,
+  StoryBook,
   useControls,
   useCreateStore,
 } from '@lobehub/ui';
@@ -48,7 +48,7 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store} noPadding>
+    <StoryBook levaStore={store} noPadding>
       <View
         style={['top', 'bottom'].includes(control.placement) ? { flexDirection: 'column' } : {}}
       >
@@ -68,6 +68,6 @@ export default () => {
           </>
         )}
       </View>
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/EditableMessage/demos/index.tsx b/src/EditableMessage/demos/index.tsx
index 14ca2ea7..ea11af99 100644
--- a/src/EditableMessage/demos/index.tsx
+++ b/src/EditableMessage/demos/index.tsx
@@ -1,4 +1,4 @@
-import { EditableMessage, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { EditableMessage, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 import { button } from 'leva';
 import { useState } from 'react';
 
@@ -22,7 +22,7 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <EditableMessage
         editing={editing}
         onEditingChange={setEdit}
@@ -30,6 +30,6 @@ export default () => {
         openModal={openModal}
         value={content}
       />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/FluentEmoji/demos/index.tsx b/src/FluentEmoji/demos/index.tsx
index 498c0ea8..f6a9cba9 100644
--- a/src/FluentEmoji/demos/index.tsx
+++ b/src/FluentEmoji/demos/index.tsx
@@ -1,7 +1,7 @@
 import {
   FluentEmoji,
   type FluentEmojiProps,
-  StroyBook,
+  StoryBook,
   getEmoji,
   getEmojiNameByCharacter,
   useControls,
@@ -26,7 +26,7 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <Flexbox align={'center'} gap={8}>
         <Flexbox gap={8} horizontal>
           <FluentEmoji type={'anim'} {...control} />
@@ -38,6 +38,6 @@ export default () => {
         </Flexbox>
         <Button icon={getEmoji(control.emoji)}>{getEmojiNameByCharacter(control.emoji)}</Button>
       </Flexbox>
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/GradientButton/demos/index.tsx b/src/GradientButton/demos/index.tsx
index 82d4fa3f..04ee6e5c 100644
--- a/src/GradientButton/demos/index.tsx
+++ b/src/GradientButton/demos/index.tsx
@@ -1,7 +1,7 @@
 import {
   GradientButton,
   GradientButtonProps,
-  StroyBook,
+  StoryBook,
   useControls,
   useCreateStore,
 } from '@lobehub/ui';
@@ -21,8 +21,8 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <GradientButton {...control} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/GridBackground/demos/index.tsx b/src/GridBackground/demos/index.tsx
index b0f68418..d075ad82 100644
--- a/src/GridBackground/demos/index.tsx
+++ b/src/GridBackground/demos/index.tsx
@@ -1,7 +1,7 @@
 import {
   GridBackground,
   GridBackgroundProps,
-  StroyBook,
+  StoryBook,
   useControls,
   useCreateStore,
 } from '@lobehub/ui';
@@ -38,8 +38,8 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <GridBackground style={{ width: '100%' }} {...control} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/Highlighter/demos/FullFeatured.tsx b/src/Highlighter/demos/FullFeatured.tsx
index d852ee52..5244ae3d 100644
--- a/src/Highlighter/demos/FullFeatured.tsx
+++ b/src/Highlighter/demos/FullFeatured.tsx
@@ -1,4 +1,4 @@
-import { Highlighter, HighlighterProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { Highlighter, HighlighterProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 
 const code = `export default ({ children, className }: MarkdownProps) => {
   const { styles } = useStyles();
@@ -32,8 +32,8 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <Highlighter fullFeatured {...options} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/Highlighter/demos/index.tsx b/src/Highlighter/demos/index.tsx
index 543996fb..04ea0f38 100644
--- a/src/Highlighter/demos/index.tsx
+++ b/src/Highlighter/demos/index.tsx
@@ -1,4 +1,4 @@
-import { Highlighter, HighlighterProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { Highlighter, HighlighterProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 
 const code = `export default ({ children, className }: MarkdownProps) => {
   const { styles } = useStyles();
@@ -32,8 +32,8 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <Highlighter {...options} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/Icon/demos/CustomSize.tsx b/src/Icon/demos/CustomSize.tsx
index bb2b4fa3..46342c73 100644
--- a/src/Icon/demos/CustomSize.tsx
+++ b/src/Icon/demos/CustomSize.tsx
@@ -1,4 +1,4 @@
-import { Icon, IconProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { Icon, IconProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 import { Settings } from 'lucide-react';
 
 export default () => {
@@ -22,8 +22,8 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <Icon icon={Settings} size={size} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/Icon/demos/index.tsx b/src/Icon/demos/index.tsx
index f12d67a6..16bed798 100644
--- a/src/Icon/demos/index.tsx
+++ b/src/Icon/demos/index.tsx
@@ -1,4 +1,4 @@
-import { Icon, IconProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { Icon, IconProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 import * as LucideIcon from 'lucide-react';
 
 export default () => {
@@ -19,8 +19,8 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <Icon {...control} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/Input/demos/TextArea.tsx b/src/Input/demos/TextArea.tsx
index 3350e319..396d81f4 100644
--- a/src/Input/demos/TextArea.tsx
+++ b/src/Input/demos/TextArea.tsx
@@ -1,4 +1,4 @@
-import { StroyBook, TextArea, TextAreaProps, useControls, useCreateStore } from '@lobehub/ui';
+import { StoryBook, TextArea, TextAreaProps, useControls, useCreateStore } from '@lobehub/ui';
 
 export default () => {
   const store = useCreateStore();
@@ -14,8 +14,8 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <TextArea {...controls} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/Input/demos/index.tsx b/src/Input/demos/index.tsx
index 15bae274..883ef079 100644
--- a/src/Input/demos/index.tsx
+++ b/src/Input/demos/index.tsx
@@ -1,4 +1,4 @@
-import { Input, InputProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { Input, InputProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 
 export default () => {
   const store = useCreateStore();
@@ -14,8 +14,8 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <Input {...controls} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/Logo/demos/ExtraText.tsx b/src/Logo/demos/ExtraText.tsx
index 472b82c0..8a23f8ca 100644
--- a/src/Logo/demos/ExtraText.tsx
+++ b/src/Logo/demos/ExtraText.tsx
@@ -1,4 +1,4 @@
-import { Logo, LogoProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { Logo, LogoProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 
 export default () => {
   const store = useCreateStore();
@@ -16,8 +16,8 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <Logo type="combine" {...control} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/Logo/demos/index.tsx b/src/Logo/demos/index.tsx
index 9ec4b9a9..8a5b6729 100644
--- a/src/Logo/demos/index.tsx
+++ b/src/Logo/demos/index.tsx
@@ -1,4 +1,4 @@
-import { Logo, LogoProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { Logo, LogoProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 
 export default () => {
   const store = useCreateStore();
@@ -19,8 +19,8 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <Logo {...control} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/LogoThree/demos/index.tsx b/src/LogoThree/demos/index.tsx
index ee764477..8ca98b16 100644
--- a/src/LogoThree/demos/index.tsx
+++ b/src/LogoThree/demos/index.tsx
@@ -1,4 +1,4 @@
-import { LogoThree, LogoThreeProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { LogoThree, LogoThreeProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 
 export default () => {
   const store = useCreateStore();
@@ -15,8 +15,8 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <LogoThree style={{ width: '100%' }} {...control} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/Markdown/demos/index.tsx b/src/Markdown/demos/index.tsx
index 99e26b30..6d97c3e0 100644
--- a/src/Markdown/demos/index.tsx
+++ b/src/Markdown/demos/index.tsx
@@ -1,4 +1,4 @@
-import { Markdown, MarkdownProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { Markdown, MarkdownProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 
 import { content } from './data';
 
@@ -16,8 +16,8 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <Markdown {...options} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/SearchBar/demos/index.tsx b/src/SearchBar/demos/index.tsx
index f81fa9c0..2968568d 100644
--- a/src/SearchBar/demos/index.tsx
+++ b/src/SearchBar/demos/index.tsx
@@ -1,4 +1,4 @@
-import { SearchBar, SearchBarProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { SearchBar, SearchBarProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 
 export default () => {
   const store = useCreateStore();
@@ -17,8 +17,8 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <SearchBar {...controls} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/Snippet/demos/index.tsx b/src/Snippet/demos/index.tsx
index 9fc629c3..69086d01 100644
--- a/src/Snippet/demos/index.tsx
+++ b/src/Snippet/demos/index.tsx
@@ -1,4 +1,4 @@
-import { Snippet, SnippetProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { Snippet, SnippetProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 
 export default () => {
   const store = useCreateStore();
@@ -18,8 +18,8 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <Snippet {...control} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/Spotlight/demos/index.tsx b/src/Spotlight/demos/index.tsx
index dde33bed..88b463c8 100644
--- a/src/Spotlight/demos/index.tsx
+++ b/src/Spotlight/demos/index.tsx
@@ -1,4 +1,4 @@
-import { Spotlight, SpotlightProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { Spotlight, SpotlightProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 import styled from 'styled-components';
 
 const Card = styled.div`
@@ -22,10 +22,10 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <Card>
         <Spotlight {...control} />
       </Card>
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/StoryBook/demos/index.tsx b/src/StoryBook/demos/index.tsx
index d1643861..bab51826 100644
--- a/src/StoryBook/demos/index.tsx
+++ b/src/StoryBook/demos/index.tsx
@@ -1,4 +1,4 @@
-import { StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 
 export default () => {
   const store = useCreateStore();
@@ -22,8 +22,8 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <div style={{ color, fontSize, fontWeight }}>{upperCase ? text.toUpperCase() : text}</div>
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/StoryBook/index.tsx b/src/StoryBook/index.tsx
index 0a2d72dc..24a14b89 100644
--- a/src/StoryBook/index.tsx
+++ b/src/StoryBook/index.tsx
@@ -7,7 +7,7 @@ import { DivProps } from '@/types';
 import DraggablePanel from '../DraggablePanel';
 import { useStyles } from './style';
 
-export interface StroyBookProps extends DivProps {
+export interface StoryBookProps extends DivProps {
   /**
    * @description The Leva store instance to be used by the component
    * @type levaStore
@@ -19,7 +19,7 @@ export interface StroyBookProps extends DivProps {
   noPadding?: boolean;
 }
 
-export const StroyBook = memo<StroyBookProps>(
+export const StoryBook = memo<StoryBookProps>(
   ({ levaStore, noPadding, className, children, ...props }) => {
     const { mobile } = useResponsive();
     const { styles, cx } = useStyles(Boolean(noPadding));
@@ -41,6 +41,6 @@ export const StroyBook = memo<StroyBookProps>(
   },
 );
 
-export default StroyBook;
+export default StoryBook;
 
 export { useControls, useCreateStore } from 'leva';
diff --git a/src/Toc/demos/index.tsx b/src/Toc/demos/index.tsx
index 6b5e29ec..265a1c17 100644
--- a/src/Toc/demos/index.tsx
+++ b/src/Toc/demos/index.tsx
@@ -1,4 +1,4 @@
-import { StroyBook, Toc, type TocProps, useControls, useCreateStore } from '@lobehub/ui';
+import { StoryBook, Toc, type TocProps, useControls, useCreateStore } from '@lobehub/ui';
 
 const items: TocProps['items'] = [
   {
@@ -19,8 +19,8 @@ export default () => {
     { store },
   );
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <Toc items={items} {...controls} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/TokenTag/demos/index.tsx b/src/TokenTag/demos/index.tsx
index 57ffa134..b4f08d2d 100644
--- a/src/TokenTag/demos/index.tsx
+++ b/src/TokenTag/demos/index.tsx
@@ -1,4 +1,4 @@
-import { StroyBook, TokenTag, TokenTagProps, useControls, useCreateStore } from '@lobehub/ui';
+import { StoryBook, TokenTag, TokenTagProps, useControls, useCreateStore } from '@lobehub/ui';
 
 export default () => {
   const store = useCreateStore();
@@ -17,8 +17,8 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <TokenTag {...control} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/Tooltip/demos/index.tsx b/src/Tooltip/demos/index.tsx
index e553226c..b5468872 100644
--- a/src/Tooltip/demos/index.tsx
+++ b/src/Tooltip/demos/index.tsx
@@ -1,4 +1,4 @@
-import { StroyBook, Tooltip, TooltipProps, useControls, useCreateStore } from '@lobehub/ui';
+import { StoryBook, Tooltip, TooltipProps, useControls, useCreateStore } from '@lobehub/ui';
 import { Button } from 'antd';
 
 export default () => {
@@ -12,10 +12,10 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <Tooltip {...control}>
         <Button type="primary">Tooltip</Button>
       </Tooltip>
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/index.ts b/src/index.ts
index d5e69f55..87cac9fe 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -118,8 +118,16 @@ export { default as Snippet, type SnippetProps } from './Snippet';
 export { default as Spotlight, type SpotlightProps } from './Spotlight';
 export { default as SpotlightCard, type SpotlightCardProps } from './SpotlightCard';
 export {
+  default as StoryBook,
+  type StoryBookProps,
+  /**
+   * @deprecated Use `StoryBookProps` instead. It was a typo.
+   */
   default as StroyBook,
-  type StroyBookProps,
+  /**
+   * @deprecated Use `StoryBookProps` instead. It was a typo.
+   */
+  type StoryBookProps as StroyBookProps,
   useControls,
   useCreateStore,
 } from './StoryBook';