From 669b906a6c0b72b045110e04bdaa058171237a3e Mon Sep 17 00:00:00 2001
From: cheton <cheton@gmail.com>
Date: Sat, 14 Oct 2023 19:04:42 +0800
Subject: [PATCH] docs: update `useColorMode` and `useColorStyle` pages

---
 packages/react-docs/components/CodeBlock.js   |  2 +-
 .../{color-mode.js => useColorMode.js}        |  0
 .../color-mode/useColorMode.page.mdx          |  2 +-
 .../components/color-style/useColorStyle.js   | 88 +++++++++++++++++++
 .../color-style/useColorStyle.page.mdx        | 80 +----------------
 5 files changed, 91 insertions(+), 81 deletions(-)
 rename packages/react-docs/pages/components/color-mode/{color-mode.js => useColorMode.js} (100%)
 create mode 100644 packages/react-docs/pages/components/color-style/useColorStyle.js

diff --git a/packages/react-docs/components/CodeBlock.js b/packages/react-docs/components/CodeBlock.js
index c06479b30c..5e0c6361ad 100644
--- a/packages/react-docs/components/CodeBlock.js
+++ b/packages/react-docs/components/CodeBlock.js
@@ -119,7 +119,7 @@ const CodeBlock = ({
   }, []);
   const language = React.isValidElement(children)
     ? ensureString(children.props.className).replace(/language-/, '')
-    : null;
+    : '';
 
   noInline = boolean(noInline);
 
diff --git a/packages/react-docs/pages/components/color-mode/color-mode.js b/packages/react-docs/pages/components/color-mode/useColorMode.js
similarity index 100%
rename from packages/react-docs/pages/components/color-mode/color-mode.js
rename to packages/react-docs/pages/components/color-mode/useColorMode.js
diff --git a/packages/react-docs/pages/components/color-mode/useColorMode.page.mdx b/packages/react-docs/pages/components/color-mode/useColorMode.page.mdx
index 43f3340e32..6043ee0588 100644
--- a/packages/react-docs/pages/components/color-mode/useColorMode.page.mdx
+++ b/packages/react-docs/pages/components/color-mode/useColorMode.page.mdx
@@ -53,4 +53,4 @@ Returns an array with the current color mode and a function to change the color
 
 ## Demos
 
-{render('./color-mode')}
+{render('./useColorMode')}
diff --git a/packages/react-docs/pages/components/color-style/useColorStyle.js b/packages/react-docs/pages/components/color-style/useColorStyle.js
new file mode 100644
index 0000000000..0241142580
--- /dev/null
+++ b/packages/react-docs/pages/components/color-style/useColorStyle.js
@@ -0,0 +1,88 @@
+import {
+  Box,
+  Divider,
+  Stack,
+  useColorMode,
+  useColorStyle,
+} from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => {
+  const [colorMode] = useColorMode();
+  const [colorStyle, setColorStyle] = useColorStyle({ colorMode });
+  const invertedPrimaryColor = {
+    dark: 'black:primary',
+    light: 'white:primary',
+  }[colorMode];
+
+  return (
+    <Stack spacing="4x" fontFamily="mono">
+      Background
+      <Box
+        sx={{
+          '> *': {
+            px: '3x',
+            py: '2x',
+          },
+        }}
+      >
+        <Box backgroundColor={colorStyle.background.primary}>
+          colorStyle.background.primary
+        </Box>
+        <Box backgroundColor={colorStyle.background.secondary}>
+          colorStyle.background.secondary
+        </Box>
+        <Box backgroundColor={colorStyle.background.tertiary}>
+          colorStyle.background.tertiary
+        </Box>
+        <Box backgroundColor={colorStyle.background.inverted} color={invertedPrimaryColor}>
+          colorStyle.background.inverted
+        </Box>
+        <Box backgroundColor={colorStyle.background.highlighted}>
+          colorStyle.background.highlighted
+        </Box>
+        <Box backgroundColor={colorStyle.background.selected}>
+          colorStyle.background.selected
+        </Box>
+      </Box>
+      <Divider />
+      <Box
+        sx={{
+          '> *': {
+            px: '3x',
+          },
+          '> *:not(:last-child)': {
+            pb: '2x',
+          },
+        }}
+      >
+        <Box color={colorStyle.color.primary}>
+          colorStyle.color.primary
+        </Box>
+        <Box color={colorStyle.color.secondary}>
+          colorStyle.color.secondary
+        </Box>
+        <Box color={colorStyle.color.tertiary}>
+          colorStyle.color.tertiary
+        </Box>
+        <Box color={colorStyle.color.disabled}>
+          colorStyle.color.disabled
+        </Box>
+        <Box color={colorStyle.color.success}>
+          colorStyle.color.success
+        </Box>
+        <Box color={colorStyle.color.info}>
+          colorStyle.color.info
+        </Box>
+        <Box color={colorStyle.color.warning}>
+          colorStyle.color.warning
+        </Box>
+        <Box color={colorStyle.color.error}>
+          colorStyle.color.error
+        </Box>
+      </Box>
+    </Stack>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/color-style/useColorStyle.page.mdx b/packages/react-docs/pages/components/color-style/useColorStyle.page.mdx
index 23d813988f..fae1ff775d 100644
--- a/packages/react-docs/pages/components/color-style/useColorStyle.page.mdx
+++ b/packages/react-docs/pages/components/color-style/useColorStyle.page.mdx
@@ -42,82 +42,4 @@ Returns an array with the color style object and a function to set the color sty
 
 ## Demos
 
-```jsx
-function Example() {
-  const [colorMode] = useColorMode();
-  const [colorStyle, setColorStyle] = useColorStyle({ colorMode });
-  const invertedPrimaryColor = {
-    dark: 'black:primary',
-    light: 'white:primary',
-  }[colorMode];
-
-  return (
-    <Stack spacing="4x" fontFamily="mono">
-      Background
-      <Box
-        sx={{
-          '> *': {
-            px: '3x',
-            py: '2x',
-          },
-        }}
-      >
-        <Box backgroundColor={colorStyle.background.primary}>
-          colorStyle.background.primary
-        </Box>
-        <Box backgroundColor={colorStyle.background.secondary}>
-          colorStyle.background.secondary
-        </Box>
-        <Box backgroundColor={colorStyle.background.tertiary}>
-          colorStyle.background.tertiary
-        </Box>
-        <Box backgroundColor={colorStyle.background.inverted} color={invertedPrimaryColor}>
-          colorStyle.background.inverted
-        </Box>
-        <Box backgroundColor={colorStyle.background.highlighted}>
-          colorStyle.background.highlighted
-        </Box>
-        <Box backgroundColor={colorStyle.background.selected}>
-          colorStyle.background.selected
-        </Box>
-      </Box>
-      <Divider />
-      <Box
-        sx={{
-          '> *': {
-            px: '3x',
-          },
-          '> *:not(:last-child)': {
-            pb: '2x',
-          },
-        }}
-      >
-        <Box color={colorStyle.color.primary}>
-          colorStyle.color.primary
-        </Box>
-        <Box color={colorStyle.color.secondary}>
-          colorStyle.color.secondary
-        </Box>
-        <Box color={colorStyle.color.tertiary}>
-          colorStyle.color.tertiary
-        </Box>
-        <Box color={colorStyle.color.disabled}>
-          colorStyle.color.disabled
-        </Box>
-        <Box color={colorStyle.color.success}>
-          colorStyle.color.success
-        </Box>
-        <Box color={colorStyle.color.info}>
-          colorStyle.color.info
-        </Box>
-        <Box color={colorStyle.color.warning}>
-          colorStyle.color.warning
-        </Box>
-        <Box color={colorStyle.color.error}>
-          colorStyle.color.error
-        </Box>
-      </Box>
-    </Stack>
-  );
-}
-```
+{render('./useColorStyle')}