docs: update docs

trendmicro-frontend · Nov 27, 2024 · 6931f95 · 6931f95
1 parent 45c3ba9
commit 6931f95
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 144 deletions.
diff --git a/packages/react-docs/components/Demo.js b/packages/react-docs/components/Demo.js
@@ -113,8 +113,8 @@ const Demo = ({
       >
         <IconButton
           data-track={showSourceCode
-            ? `CodeBlock|hide_source|${x({ path: router.pathname })}`
-            : `CodeBlock|show_source|${x({ path: router.pathname })}`
+            ? `Code|hide_source|${x({ path: router.pathname })}`
+            : `Code|show_source|${x({ path: router.pathname })}`
           }
           onClick={toggleShowSourceCode}
         >
@@ -123,23 +123,23 @@ const Demo = ({
           </Tooltip>
         </IconButton>
         <IconButton
-          data-track={`CodeBlock|copy_source|${x({ path: router.pathname })}`}
+          data-track={`Code|copy_source|${x({ path: router.pathname })}`}
           onClick={handleClickCopySource}
         >
           <Tooltip label={hasCopiedSource ? 'Copied' : 'Copy the source'}>
             <FileCopyOIcon />
           </Tooltip>
         </IconButton>
         <IconButton
-          data-track={`CodeBlock|edit_in_codesandbox|${router.pathname}`}
+          data-track={`Code|edit_in_codesandbox|${router.pathname}`}
           onClick={handleClickEditInCodeSandbox}
         >
           <Tooltip label="Edit in CodeSandbox">
             <CodeSandboxIcon />
           </Tooltip>
         </IconButton>
         <IconButton
-          data-track={`CodeBlock|reset|${router.pathname}`}
+          data-track={`Code|reset|${router.pathname}`}
           onClick={reset}
         >
           <Tooltip label="Reset the demo">

diff --git a/packages/react-docs/components/CodeBlock.js → ...react-docs/components/PreformattedText.js b/packages/react-docs/components/CodeBlock.js → ...react-docs/components/PreformattedText.js
@@ -1,14 +1,14 @@
 import {
-  Box,
+  Text,
   useColorStyle,
 } from '@tonic-ui/react';
 import React from 'react';
 
-const CodeBlock = (props) => {
+const PreformattedText = (props) => {
   const [colorStyle] = useColorStyle();
 
   return (
-    <Box
+    <Text
       backgroundColor={colorStyle.background.secondary}
       border={1}
       borderColor={colorStyle.divider}
@@ -21,4 +21,4 @@ const CodeBlock = (props) => {
   );
 };
 
-export default CodeBlock;
+export default PreformattedText;
diff --git a/packages/react-docs/components/ThemeParser.js b/packages/react-docs/components/ThemeParser.js
@@ -5,7 +5,7 @@ import {
   useTheme,
 } from '@tonic-ui/react';
 import React from 'react';
-import CodeBlock from './CodeBlock';
+import PreformattedText from './PreformattedText';
 import jsonPrettify from '../utils/json-prettify';
 
 const ThemeParser = ({
@@ -33,9 +33,9 @@ const ThemeParser = ({
 
   return (
     <Box mb="6x">
-      <CodeBlock>
+      <PreformattedText>
         {`const ${themeKey} = ${jsonPrettify(token, indent)}`}
-      </CodeBlock>
+      </PreformattedText>
     </Box>
   );
 };

diff --git a/packages/react-docs/pages/components/color-style/index.page.mdx b/packages/react-docs/pages/components/color-style/index.page.mdx
@@ -13,11 +13,11 @@ import {
   MoonIcon,
   SunIcon,
 } from '@tonic-ui/react-icons';
-import CodeBlock from '@/components/CodeBlock';
+import colorStyle from '@/pages/components/color-style/color-style';
 import ColorStyleBody from '@/components/ColorStyleBody';
 import ColorStyleContent from '@/components/ColorStyleContent';
 import ColorStyleHeader from '@/components/ColorStyleHeader';
-import colorStyle from '@/pages/components/color-style/color-style';
+import PreformattedText from '@/components/PreformattedText';
 import jsonPrettify from "@/utils/json-prettify";
 
 # Color Style
@@ -71,9 +71,9 @@ import { colorStyle } from '@tonic-ui/react';
 
 The full configuration is displayed below:
 
-<CodeBlock mb="4x">
+<PreformattedText mb="4x">
   {jsonPrettify(colorStyle)}
-</CodeBlock>
+</PreformattedText>
 
 To manage color style in your application, you can use the [useColorStyle](../components/color-style/useColorStyle) hook.
 
@@ -290,7 +290,7 @@ const App = () => (
 
 Here is the deprecated configuration for the severity:
 
-<CodeBlock>
+<PreformattedText>
   {jsonPrettify({
     dark: {
       severity: {
@@ -315,7 +315,7 @@ Here is the deprecated configuration for the severity:
       },
     },
   })}
-</CodeBlock>
+</PreformattedText>
 
 ### Chart (deprecated)
 
@@ -324,7 +324,7 @@ Here is the deprecated configuration for the severity:
 
 Here is the deprecated configuration for the chart:
 
-<CodeBlock>
+<PreformattedText>
   {jsonPrettify({
     dark: {
       chart: {
@@ -365,7 +365,7 @@ Here is the deprecated configuration for the chart:
       },
     },
   })}
-</CodeBlock>
+</PreformattedText>
 
 ## Custom Color Values
 
@@ -378,7 +378,7 @@ The purpose of notifications is to provide feedback to users regarding the succe
 See the example configuration below:
 
 <Stack spacing="4x">
-  <CodeBlock>
+  <PreformattedText>
     {jsonPrettify({
       dark: {
         notification: {
@@ -397,7 +397,7 @@ See the example configuration below:
         },
       },
     })}
-  </CodeBlock>
+  </PreformattedText>
   <DarkMode>
     <ColorStyleContent>
       <ColorStyleHeader>
@@ -456,7 +456,7 @@ None | N/A | Used when it's impossible to determine either the likelihood or pot
 See the example configuration below:
 
 <Stack spacing="4x">
-  <CodeBlock>
+  <PreformattedText>
     {jsonPrettify({
       dark: {
         risk: {
@@ -475,7 +475,7 @@ See the example configuration below:
         },
       },
     })}
-  </CodeBlock>
+  </PreformattedText>
   <DarkMode>
     <ColorStyleContent>
       <ColorStyleHeader>
@@ -537,7 +537,7 @@ Informational | Used for non-severe information and general guidance.
 See the example configuration below:
 
 <Stack spacing="4x">
-  <CodeBlock>
+  <PreformattedText>
     {jsonPrettify({
       dark: {
         severity: {
@@ -558,7 +558,7 @@ See the example configuration below:
         },
       },
     })}
-  </CodeBlock>
+  </PreformattedText>
   <DarkMode>
     <ColorStyleContent>
       <ColorStyleHeader>
@@ -612,7 +612,7 @@ See the example configuration below:
 See the example configuration below:
 
 <Stack spacing="4x">
-  <CodeBlock>
+  <PreformattedText>
     {jsonPrettify({
       dark: {
         chart: {
@@ -653,7 +653,7 @@ See the example configuration below:
         },
       },
     })}
-  </CodeBlock>
+  </PreformattedText>
   <DarkMode>
     <ColorStyleContent>
       <ColorStyleHeader>
@@ -729,7 +729,7 @@ See the example configuration below:
 See the example configuration below:
 
 <Stack spacing="4x">
-  <CodeBlock>
+  <PreformattedText>
     {jsonPrettify({
       dark: {
         gradient: {
@@ -752,7 +752,7 @@ See the example configuration below:
         },
       },
     })}
-  </CodeBlock>
+  </PreformattedText>
   <ColorStyleContent
     display="flex"
     flexDirection="column"
@@ -812,7 +812,7 @@ See the example configuration below:
 See the example configuration below:
 
 <Stack spacing="4x">
-  <CodeBlock>
+  <PreformattedText>
     {jsonPrettify({
       dark: {
         blindness: {
@@ -852,7 +852,7 @@ See the example configuration below:
         },
       },
     })}
-  </CodeBlock>
+  </PreformattedText>
   <ColorStyleContent
     display="flex"
     flexDirection="column"

diff --git a/packages/react-docs/pages/components/date-pickers/calendar/usage.js b/packages/react-docs/pages/components/date-pickers/calendar/usage.js
@@ -14,30 +14,11 @@ import {
   MenuList,
   Text,
   TextLabel,
-  useColorMode,
-  useColorStyle,
 } from '@tonic-ui/react';
 import * as dateFns from 'date-fns'
 import * as dateFnsLocale from 'date-fns/locale'
 import React, { useEffect, useState } from 'react';
-
-const CodeBlock = (props) => {
-  const [colorMode] = useColorMode();
-  const [colorStyle] = useColorStyle({ colorMode });
-
-  return (
-    <Box
-      backgroundColor={colorStyle.background.secondary}
-      border={1}
-      borderColor={colorStyle.divider}
-      fontFamily="mono"
-      py="3x"
-      px="3x"
-      whiteSpace="pre"
-      {...props}
-    />
-  );
-};
+import PreformattedText from '@/components/PreformattedText';
 
 const FormGroup = (props) => (
   <Box mb="4x" {...props} />
@@ -185,12 +166,12 @@ const App = () => {
         <TextLabel>
           You can use the <Code>formatDate</Code> prop to return a formatted date string in the given format and locale.
         </TextLabel>
-        <CodeBlock>
+        <PreformattedText>
           {`// format\nimport format from 'date-fns/format';\n\n// locale\nimport enLocale from 'date-fns/locale/en-US'; // English (United States)\nimport deLocale from 'date-fns/locale/de'; // Deutsch\nimport esLocale from 'date-fns/locale/es'; // Español\nimport frLocale from 'date-fns/locale/fr'; // Français\nimport itLocale from 'date-fns/locale/it'; // Italiano\nimport jaLocale from 'date-fns/locale/ja'; // 日本語\nimport koLocale from 'date-fns/locale/ko'; // 한국어\nimport zhCNLocale from 'date-fns/locale/zh-CN'; // 简体中文\nimport zhTWLocale from 'date-fns/locale/zh-TW'; // 繁體中文`}
-        </CodeBlock>
-        <CodeBlock>
+        </PreformattedText>
+        <PreformattedText>
           {`// Calendar component\nformatDate={(date, format, options) => {\n  return format(date, format, { locale: enLocale });\n}}`}
-        </CodeBlock>
+        </PreformattedText>
       </Flex>
       <Divider my="4x" />
       <Box mb="4x">

diff --git a/packages/react-docs/pages/components/date-pickers/date-picker/usage.js b/packages/react-docs/pages/components/date-pickers/date-picker/usage.js
@@ -28,24 +28,7 @@ import {
 import * as dateFns from 'date-fns'
 import * as dateFnsLocale from 'date-fns/locale'
 import React, { useEffect, useState } from 'react';
-
-const CodeBlock = (props) => {
-  const [colorMode] = useColorMode();
-  const [colorStyle] = useColorStyle({ colorMode });
-
-  return (
-    <Box
-      backgroundColor={colorStyle.background.secondary}
-      border={1}
-      borderColor={colorStyle.divider}
-      fontFamily="mono"
-      py="3x"
-      px="3x"
-      whiteSpace="pre"
-      {...props}
-    />
-  );
-};
+import PreformattedText from '@/components/PreformattedText';
 
 const FormGroup = (props) => (
   <Box mb="4x" {...props} />
@@ -239,12 +222,12 @@ const App = () => {
         <TextLabel>
           You can use the <Code>formatDate</Code> prop to return a formatted date string in the given format and locale.
         </TextLabel>
-        <CodeBlock>
+        <PreformattedText>
           {`// format\nimport format from 'date-fns/format';\n\n// locale\nimport enLocale from 'date-fns/locale/en-US'; // English (United States)\nimport deLocale from 'date-fns/locale/de'; // Deutsch\nimport esLocale from 'date-fns/locale/es'; // Español\nimport frLocale from 'date-fns/locale/fr'; // Français\nimport itLocale from 'date-fns/locale/it'; // Italiano\nimport jaLocale from 'date-fns/locale/ja'; // 日本語\nimport koLocale from 'date-fns/locale/ko'; // 한국어\nimport zhCNLocale from 'date-fns/locale/zh-CN'; // 简体中文\nimport zhTWLocale from 'date-fns/locale/zh-TW'; // 繁體中文`}
-        </CodeBlock>
-        <CodeBlock>
+        </PreformattedText>
+        <PreformattedText>
           {`// DatePicker component\nformatDate={(date, format, options) => {\n  return format(date, format, { locale: enLocale });\n}}`}
-        </CodeBlock>
+        </PreformattedText>
       </Flex>
       <Divider my="4x" />
       <Box mb="4x">

diff --git a/packages/react-docs/pages/components/drawer/usage.js b/packages/react-docs/pages/components/drawer/usage.js
@@ -31,26 +31,9 @@ import {
   useToggle,
 } from '@tonic-ui/react-hooks';
 import React, { useRef, useState } from 'react';
+import PreformattedText from '@/components/PreformattedText';
 import SkeletonBlock from '@/components/SkeletonBlock';
 
-const CodeBlock = (props) => {
-  const [colorMode] = useColorMode();
-  const [colorStyle] = useColorStyle({ colorMode });
-
-  return (
-    <Box
-      backgroundColor={colorStyle.background.secondary}
-      border={1}
-      borderColor={colorStyle.divider}
-      fontFamily="mono"
-      py="3x"
-      px="3x"
-      whiteSpace="pre"
-      {...props}
-    />
-  );
-};
-
 const FormGroup = (props) => (
   <Box mb="4x" {...props} />
 );
@@ -318,9 +301,9 @@ const App = () => {
             <strong>Body Scroll Locking</strong> is currently not available with default setup, you can follow the instructions below to append global styles to the body to prevent scrolling.
           </Text>
         </Box>
-        <CodeBlock>
+        <PreformattedText>
           {bodyScrollLockCode}
-        </CodeBlock>
+        </PreformattedText>
       </Box>
     </FormGroup>
     <Drawer