website: add pkg example.

Author: jaywcjlove

package.json

@@ -36,6 +36,8 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "husky": "~9.1.6",

pkg-example/README.md

@@ -1,6 +1,8 @@
 Example
 ===
 
+Add an example of loading EMS package dependencies
+
 ```jsx mdx:preview
 import React from "react";
 import Example from 'pkg-example';

website/package.json

@@ -31,9 +31,8 @@
     "@kkt/less-modules": "~7.5.5",
     "@kkt/raw-modules": "~7.5.5",
     "@kkt/scope-plugin-options": "~7.5.5",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
     "kkt": "~7.5.5",
+    "pkg-example": "2.1.9",
     "markdown-react-code-preview-loader": "2.1.9"
   },
   "eslintConfig": {

website/src/App.tsx

@@ -3,6 +3,7 @@ import { HashRouter, Routes, Route } from 'react-router-dom';
 import { Layout } from './Layout';
 import { HomePage } from './pages/docs';
 import { ExamplePage } from './pages/example';
+import { PkgExamplePage } from './pages/pkg';
 
 export default function App() {
   return (
@@ -11,6 +12,7 @@ export default function App() {
         <Route element={<Layout />}>
           <Route path="/" element={<HomePage />} />
           <Route path="/example" element={<ExamplePage />} />
+          <Route path="/pkg-example" element={<PkgExamplePage />} />
         </Route>
       </Routes>
     </HashRouter>

website/src/Layout.tsx

@@ -19,6 +19,9 @@ export function Layout() {
           <NavLink to="/example" replace>
             {i18next.t('example')}
           </NavLink>
+          <NavLink to="/pkg-example" replace>
+            {i18next.t('pkg-example')}
+          </NavLink>
           <dark-mode permanent></dark-mode>
           <Language />
         </nav>

website/src/language/locale/en.json

@@ -3,5 +3,6 @@
   "zh": "chinese",
   "en": "english",
   "docuemnt": "Docuemnt",
-  "example": "Example"
+  "example": "Example",
+  "pkg-example": "PKG Example"
 }

website/src/language/locale/zh.json

@@ -3,5 +3,6 @@
   "zh": "中文",
   "en": "英文",
   "docuemnt": "文档",
-  "example": "案例"
+  "example": "案例",
+  "pkg-example": "PKG 示例"
 }

website/src/pages/example/App-zh.md

@@ -16,58 +16,53 @@ import Alert from "@uiw/react-alert";
 
 ```jsx mdx:preview
 import React from "react";
+import { useState } from 'react';
 import ReactDOM from "react-dom";
 import { Alert, ButtonGroup, Button } from "uiw";
 
-class Demo extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      visible1: false,
-      visible2: false,
-    };
-  }
-  onClick(type) {
-    this.setState({ [type]: !this.state[type] });
-  }
-  onClosed(type) {
-    this.setState({ [type]: false });
-  }
-  render() {
-    return (
+export default function Demo() {
+  const [visible1, setVisible1] = useState(false);
+  const [visible2, setVisible2] = useState(false);
+  return (
       <div>
         <Alert
-          isOpen={this.state.visible1}
+          isOpen={visible1}
           confirmText="确定按钮"
-          onClosed={this.onClosed.bind(this, "visible1")}
+          onClosed={() => {
+            setVisible1(false)
+          }}
           content="这个对话框只有两个个按钮，单击“确定按钮”后，此对话框将关闭。用作通知用户重要信息。"
         />
         <Alert
-          isOpen={this.state.visible2}
+          isOpen={visible2}
           confirmText="确定按钮"
           cancelText="取消按钮"
           type="danger"
           onConfirm={() => console.log("您点击了确定按钮！")}
           onCancel={() => console.log("您点击了取消按钮！")}
-          onClosed={this.onClosed.bind(this, "visible2")}
+          onClosed={() => {
+            setVisible2(false)
+          }}
         >
           这个对话框有两个按钮，单击 “<b>确定按钮</b>” 或 “<b>取消按钮</b>”
           后，此对话框将关闭，触发 “<b>onConfirm</b>” 或 “<b>onCancel</b>”
           事件。用作通知用户重要信息。
         </Alert>
         <ButtonGroup>
-          <Button onClick={this.onClick.bind(this, "visible1")}>
+          <Button onClick={() => {
+            setVisible1(false)
+          }}>
             单个按钮确认对话框
           </Button>
-          <Button onClick={this.onClick.bind(this, "visible2")}>
+          <Button onClick={() => {
+            setVisible2(false)
+          }}>
             确认对话框
           </Button>
         </ButtonGroup>
       </div>
-    );
-  }
+  )
 }
-export default Demo;
 ```
 
 ## 延迟关闭对话框

website/src/pages/pkg/index.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { FC, PropsWithChildren, useRef } from 'react';
+import MarkdownPreview from '@uiw/react-markdown-preview';
+import { getMetaId, getURLParameters, CodeBlockData } from 'markdown-react-code-preview-loader';
+
+import { Root, Element, RootContent } from 'hast';
+import MDSource from 'pkg-example/README.md';
+import CodeLayout from 'react-code-preview-layout';
+
+const Preview = CodeLayout.Preview;
+const Code = CodeLayout.Code;
+const Toolbar = CodeLayout.Toolbar;
+
+interface CodePreviewProps {
+  mdData?: CodeBlockData;
+  'data-meta'?: string;
+}
+
+const CodePreview: FC<PropsWithChildren<CodePreviewProps>> = (props) => {
+  const $dom = useRef<HTMLDivElement>(null);
+  // @ts-ignore
+  const { mdData, node, 'data-meta': meta, ...rest } = props;
+  // @ts-ignore
+  const line = node?.position?.start.line;
+  const metaId = getMetaId(meta) || String(line);
+  const Child = mdData?.components[`${metaId}`];
+  if (metaId && typeof Child === 'function') {
+    const code = mdData?.data[metaId].value || '';
+    const param = getURLParameters(meta || '');
+    return (
+      <CodeLayout ref={$dom}>
+        <Preview>
+          <Child />
+        </Preview>
+        <Toolbar text={code}>{param.title || 'Example'}</Toolbar>
+        <Code>
+          <pre {...rest} />
+        </Code>
+      </CodeLayout>
+    );
+  }
+  return <code {...rest} />;
+};
+
+export function PkgExamplePage() {
+  return (
+    <MarkdownPreview
+      disableCopy={true}
+      style={{ background: 'transparent' }}
+      source={MDSource.source}
+      rehypeRewrite={(node: Root | RootContent, index: number, parent: Root | Element) => {
+        if (node.type === 'element' && parent && parent.type === 'root' && /h(1|2|3|4|5|6)/.test(node.tagName)) {
+          const child = node.children && (node.children[0] as Element);
+          if (child && child.properties && child.properties.ariaHidden === 'true') {
+            child.children = [];
+          }
+        }
+      }}
+      components={{
+        code: (props) => <CodePreview {...props} mdData={MDSource} />,
+      }}
+    />
+  );
+}