fix(docs): some docs layout (#58)

* fix: Tag doc issue

* chore: remove code block

* fix: update Drawer doc

* fix: some doc layout

Author: wangdicoder

apps/docs/package.json

@@ -16,7 +16,6 @@
     "codesandbox": "^2.2.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-live": "^4.1.0",
     "react-router-dom": "^6.0.0",
     "react-runner": "^1.0.5"
   },

apps/docs/src/components/code-block/code-block.scss

@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useRef } from 'react';
 import { useRunner } from 'react-runner';
 import { Highlight, themes } from 'prism-react-renderer';
-import { LightCodeTheme, DarkCodeTheme } from '../code-block/code-theme';
+import { LightCodeTheme, DarkCodeTheme } from './code-theme';
 import * as TinyDesign from '@tiny-design/react';
 import * as TinyIcons from '@tiny-design/icons';
 import CollapseTransition from '@tiny-design/react/collapse-transition';

apps/docs/src/components/code-block/index.tsx

@@ -0,0 +1,56 @@
+import { Highlight, Prism, PrismTheme } from 'prism-react-renderer';
+import { DarkCodeTheme, LightCodeTheme } from '../demo-block/code-theme';
+import { useTheme } from '@tiny-design/react';
+
+// Register bash/shell grammar (not included in prism-react-renderer's default bundle)
+Prism.languages.bash = Prism.languages.shell = {
+    comment: { pattern: /(^|[^"{\\$])#.*/, lookbehind: true },
+    'shell-symbol': { pattern: /^\$(?=\s)/m, alias: 'punctuation' },
+    string: [
+      { pattern: /\$'(?:[^'\\]|\\[\s\S])*'/, greedy: true },
+      { pattern: /(^|[^\\])"(?:[^"\\]|\\.)*"/, lookbehind: true, greedy: true },
+      { pattern: /(^|[^\\])'[^']*'/, lookbehind: true, greedy: true },
+    ],
+    variable: [/\$\{[^}]+\}/, /\$\([^)]+\)/, /\$(?:\w+|[!#?*@_])/],
+    keyword: /\b(?:if|then|else|elif|fi|for|do|done|case|esac|while|until|function|in|select|return|exit)\b/,
+    function:
+      /\b(?:npm|npx|node|yarn|pnpm|bun|git|curl|wget|mkdir|cp|mv|rm|ls|cat|grep|sed|awk|chmod|chown|sudo|apt|brew|pip|python|ruby|go|cargo|make|docker|cd|echo|export|source|touch)\b/,
+    'flag': { pattern: /(^|\s)--?[\w-]+/, lookbehind: true, alias: 'keyword' },
+    number: /\b\d+\b/,
+    operator: /&&|\|\||[|;]/,
+    punctuation: /[{}[\]()]/,
+  };
+  
+  export const HighlightedCode = ({ className, children }: { className: string, children: string }) => {
+    const { resolvedTheme } = useTheme();
+    const codeTheme = resolvedTheme === 'dark' ? DarkCodeTheme : LightCodeTheme;
+  
+    let language = 'markup';
+    if (className != null) {
+      language = className.replace(/language-/, '');
+    }
+  
+    const code = String(children ?? '').trim();
+  
+    return (
+      <Highlight code={code} language={language} theme={codeTheme as PrismTheme}>
+        {({ className: preClassName, style, tokens, getLineProps, getTokenProps }) => (
+          <pre className={preClassName} style={{ ...style, padding: '10px 12px' }}>
+            <code>
+              {tokens.map((line, i) => {
+                const { key: _lk, ...lineProps } = getLineProps({ line });
+                return (
+                  <div key={i} {...lineProps}>
+                    {line.map((token, j) => {
+                      const { key: _tk, ...tokenProps } = getTokenProps({ token });
+                      return <span key={j} {...tokenProps} />;
+                    })}
+                  </div>
+                );
+              })}
+            </code>
+          </pre>
+        )}
+      </Highlight>
+    );
+  };

…/src/components/code-block/code-theme.js …/src/components/demo-block/code-theme.tsapps/docs/src/components/code-block/code-theme.js renamed to apps/docs/src/components/demo-block/code-theme.ts apps/docs/src/components/code-block/code-theme.js renamed to apps/docs/src/components/demo-block/code-theme.ts

@@ -0,0 +1 @@
+export * from './HighlightedCode';

apps/docs/src/components/demo-block/index.tsx

@@ -3,8 +3,8 @@
  */
 import React from 'react';
 import './md-tag.scss';
-import { CodeBlock } from '../code-block';
 import { DemoBlock } from '../demo-block';
+import { HighlightedCode } from '../highlighted-code';
 
 const slugifyLink = (name) => {
   if (name.includes(' ')) {
@@ -49,14 +49,14 @@ export const components = {
       const { className, children: code } = children.props;
       return (
         <div className="markdown__pre-container">
-          <CodeBlock className={className} live>{code}</CodeBlock>
+          <HighlightedCode className={className}>{code}</HighlightedCode>
         </div>
       );
     }
     return <div {...rest} className="markdown__pre-container">{children}</div>;
   },
   code: ({ className, ...props }) =>
-    className ? <CodeBlock className={className} {...props} /> : <code {...props} className="markdown__inline-code" />,
+    className ? <HighlightedCode className={className} {...props} /> : <code {...props} className="markdown__inline-code" />,
   // Customised tags (PascalCase for MDX v3 provider resolution)
   Layout: (props) => <div {...props} className="markdown__layout" />,
   Column: (props) => <div {...props} className="markdown__column" />,

apps/docs/src/components/highlighted-code/HighlightedCode.tsx

@@ -13,7 +13,7 @@ export default function BasicDemo() {
         header="Basic Drawer"
         placement="right"
         onClose={() => setVisible(false)}
-        open={visible}
+        visible={visible}
       >
         <div>Some contents...</div>
         <div>Some contents...</div>

apps/docs/src/components/highlighted-code/index.ts

@@ -15,7 +15,7 @@ export default function MultiLevelDemo() {
         size={520}
         closable={false}
         onClose={() => setVisible(false)}
-        open={visible}
+        visible={visible}
       >
         <Button btnType="primary" onClick={() => setChildVisible(true)}>
           Two-level drawer
@@ -25,7 +25,7 @@ export default function MultiLevelDemo() {
           size={320}
           closable={false}
           onClose={() => setChildVisible(false)}
-          open={childVisible}
+          visible={childVisible}
         >
           This is two-level drawer
         </Drawer>