fix(icon): demo拆解与规范 (jdf2e#2010)

* fix(icon): demo拆解与规范 * fix(Icon): taro引入 * fix: script extract problems
Alex-huxiyang · Mar 13, 2024 · 4d61f5c · 4d61f5c
1 parent f850764
commit 4d61f5c
Show file tree

Hide file tree

Showing 17 changed files with 237 additions and 404 deletions.
diff --git a/scripts/doc-demo-extract-replace.js b/scripts/doc-demo-extract-replace.js
@@ -1,95 +1,95 @@
-const fs = require('fs')
-const path = require('path')
-const args = process.argv.slice(2)
-console.log(args)
+const fs = require("fs");
+const path = require("path");
+const args = process.argv.slice(2);
+console.log(args);
 const extractH5Demos = (i) => {
   const markdownFilePath = path.join(
     __dirname,
     `../src/packages/${args[i]}/doc.md`
-  )
-  let markdownContent = fs.readFileSync(markdownFilePath, 'utf-8')
+  );
+  let markdownContent = fs.readFileSync(markdownFilePath, "utf-8");
   const outputDirectory = path.join(
     __dirname,
     `../src/packages/${args[i]}/demos/h5`
-  )
-  const tsxRegex = /:::demo\r\n\r\n```tsx\r\n([\s\S]*?)```\r\n\r\n:::/g
-  let match
+  );
+  const tsxRegex = /:::demo\r\n\r\n```tsx\r\n([\s\S]*?)```\r\n\r\n:::/g;
+  let match;
   if (!fs.existsSync(outputDirectory)) {
-    fs.mkdirSync(outputDirectory, { recursive: true })
+    fs.mkdirSync(outputDirectory, { recursive: true });
   }
 
-  let counter = 1
+  let counter = 1;
   while ((match = tsxRegex.exec(markdownContent)) !== null) {
-    let codeContent = match[1]
+    let codeContent = match[1];
     codeContent = codeContent.replace(
       /const \w+ = \(\) => \{/,
       `const Demo${counter} = () => {`
-    )
+    );
     codeContent = codeContent.replace(
       /export default \w+/,
       `export default Demo${counter}`
-    )
-    const fileName = `/demos/h5/demo${counter}.tsx`
+    );
+    const fileName = `/demos/h5/demo${counter}.tsx`;
     fs.writeFileSync(
       path.join(__dirname, `../src/packages/${args[i]}/${fileName}`),
       codeContent.trim()
-    )
-    counter++
+    );
+    counter++;
   }
-  fs.writeFileSync(markdownFilePath, markdownContent)
-  console.log('======H5 demos have been extracted successfully======')
-}
+  fs.writeFileSync(markdownFilePath, markdownContent);
+  console.log("======H5 demos have been extracted successfully======");
+};
 const extractTaroDemos = (i) => {
   const markdownFilePath = path.join(
     __dirname,
-    `../src/packages/${args[i]}/doc.md`
-  )
-  let markdownContent = fs.readFileSync(markdownFilePath, 'utf-8')
+    `../src/packages/${args[i]}/doc.taro.md`
+  );
+  let markdownContent = fs.readFileSync(markdownFilePath, "utf-8");
   const outputDirectory = path.join(
     __dirname,
     `../src/packages/${args[i]}/demos/taro`
-  )
-  const tsxRegex = /:::demo\r\n\r\n```tsx\r\n([\s\S]*?)```\r\n\r\n:::/g
-  let match
+  );
+  const tsxRegex = /:::demo\r\n\r\n```tsx\r\n([\s\S]*?)```\r\n\r\n:::/g;
+  let match;
   if (!fs.existsSync(outputDirectory)) {
-    fs.mkdirSync(outputDirectory, { recursive: true })
+    fs.mkdirSync(outputDirectory, { recursive: true });
   }
 
-  let counter = 1
+  let counter = 1;
   while ((match = tsxRegex.exec(markdownContent)) !== null) {
-    let codeContent = match[1]
+    let codeContent = match[1];
     codeContent = codeContent.replace(
       /const \w+ = \(\) => \{/,
       `const Demo${counter} = () => {`
-    )
+    );
     codeContent = codeContent.replace(
       /export default \w+/,
       `export default Demo${counter}`
-    )
-    const fileName = `/demos/taro/demo${counter}.tsx`
+    );
+    const fileName = `/demos/taro/demo${counter}.tsx`;
     fs.writeFileSync(
       path.join(__dirname, `../src/packages/${args[i]}/${fileName}`),
       codeContent.trim()
-    )
+    );
 
-    counter++
+    counter++;
   }
-  fs.writeFileSync(markdownFilePath, markdownContent)
-  console.log('======Taro demos have been extracted successfully======')
-}
+  fs.writeFileSync(markdownFilePath, markdownContent);
+  console.log("======Taro demos have been extracted successfully======");
+};
 
 const replaceAllDocs = (i) => {
   const filePaths = [
     path.join(__dirname, `../src/packages/${args[i]}/doc.md`),
     path.join(__dirname, `../src/packages/${args[i]}/doc.en-US.md`),
     path.join(__dirname, `../src/packages/${args[i]}/doc.taro.md`),
     path.join(__dirname, `../src/packages/${args[i]}/doc.zh-TW.md`),
-  ]
+  ];
   filePaths.forEach((path, index) => {
-    let markdownContent = fs.readFileSync(path, 'utf-8')
+    let markdownContent = fs.readFileSync(path, "utf-8");
 
-    const tsxRegex = /:::demo\r\n\r\n```tsx\r\n([\s\S]*?)```\r\n\r\n:::/g
-    const arr = markdownContent.match(tsxRegex)
+    const tsxRegex = /:::demo\r\n\r\n```tsx\r\n([\s\S]*?)```\r\n\r\n:::/g;
+    const arr = markdownContent.match(tsxRegex);
     for (let i = 0; i < arr.length; i++) {
       markdownContent = markdownContent.replace(
         arr[i],
@@ -100,14 +100,14 @@ const replaceAllDocs = (i) => {
           : `:::demo\r\n\r\n<CodeBlock src='h5/demo${
               i + 1
             }.tsx'></CodeBlock>\r\n\r\n:::`
-      )
+      );
     }
-    fs.writeFileSync(path, markdownContent)
-  })
-  console.log('======All docs have replaced successfully======')
-}
+    fs.writeFileSync(path, markdownContent);
+  });
+  console.log("======All docs have replaced successfully======");
+};
 for (let i = 0; i < args.length; i++) {
-  extractH5Demos(i)
-  extractTaroDemos(i)
-  replaceAllDocs(i)
+  extractH5Demos(i);
+  extractTaroDemos(i);
+  replaceAllDocs(i);
 }
diff --git a/src/packages/icon/demo.taro.tsx b/src/packages/icon/demo.taro.tsx
@@ -1,27 +1,17 @@
 import React, { useState } from 'react'
 import Taro from '@tarojs/taro'
 import '@nutui/icons-react-taro/dist/style_iconfont.css'
-import {
-  Add,
-  IconFontConfig,
-  IconFont,
-  Dongdong,
-  UserAdd,
-} from '@nutui/icons-react-taro'
+import { IconFontConfig, IconFont } from '@nutui/icons-react-taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import { Cell, Toast } from '@/packages/nutui.react.taro'
 import '@/packages/icon/demo.scss'
 import Header from '@/sites/components/header'
 import { camelCase } from '@/utils/camel-case'
-
-interface T {
-  '84aa6bce': string
-  dab8a74f: string
-  svg: string
-  '52c15454': string
-  '7aeb5407': string
-  f2e6c6d6: string
-}
+import Demo1 from './demos/taro/demo1'
+import Demo2 from './demos/taro/demo2'
+import Demo3 from './demos/taro/demo3'
+import Demo4 from './demos/taro/demo4'
+import Demo5 from './demos/taro/demo5'
 
 const generateCopyText = (name: string) => {
   return `<${camelCase(name, { pascalCase: true })} />`
@@ -70,7 +60,7 @@ ul li span .nutui-iconfont {
 `
 
 const IconDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
       '84aa6bce': '基础用法',
       svg: 'SVG 按需使用',
@@ -89,10 +79,10 @@ const IconDemo = () => {
     },
     'en-US': {
       '84aa6bce': 'Basic Usage',
-      svg: 'SVG import on demand',
-      dab8a74f: 'Image link',
-      '52c15454': 'IconFont color',
-      '7aeb5407': 'IconFont size',
+      svg: 'SVG import On Demand',
+      dab8a74f: 'Image Link',
+      '52c15454': 'IconFont Color',
+      '7aeb5407': 'IconFont Size',
       f2e6c6d6: 'Base IconFont',
     },
   })
@@ -131,34 +121,23 @@ const IconDemo = () => {
         />
         <h2>{translated.svg}</h2>
         <Cell>
-          <Add color="red" />
-          <UserAdd />
-          <Dongdong />
+          <Demo1 />
         </Cell>
         <h2>{translated['84aa6bce']}</h2>
         <Cell>
-          <IconFont name="dongdong" />
-          <IconFont name="add" />
-          <IconFont name="minus" />
+          <Demo2 />
         </Cell>
         <h2>{translated.dab8a74f}</h2>
         <Cell>
-          <IconFont
-            size="40"
-            name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-          />
+          <Demo3 />
         </Cell>
         <h2>{translated['52c15454']}</h2>
         <Cell>
-          <IconFont name="dongdong" color="#fa2c19" />
-          <IconFont name="dongdong" color="#64b578" />
-          <IconFont name="dongdong" color="#ffd700" />
+          <Demo4 />
         </Cell>
         <h2>{translated['7aeb5407']}</h2>
         <Cell style={{ alignItems: 'center' }}>
-          <IconFont name="dongdong" size="16" />
-          <IconFont name="dongdong" size="20" />
-          <IconFont name="dongdong" size="24" />
+          <Demo5 />
         </Cell>
         {(IconFontConfig as any).data.map((item: any) => {
           return (

diff --git a/src/packages/icon/demo.tsx b/src/packages/icon/demo.tsx
@@ -1,25 +1,15 @@
 import React from 'react'
 import '@nutui/icons-react/dist/style_iconfont.css'
-import {
-  Add,
-  IconFontConfig,
-  IconFont,
-  Dongdong,
-  UserAdd,
-} from '@nutui/icons-react'
+import { IconFontConfig, IconFont } from '@nutui/icons-react'
 import { useTranslate } from '../../sites/assets/locale'
 import Cell from '../cell'
 import Toast from '../toast'
 import { camelCase } from '@/utils/camel-case'
-
-interface T {
-  '84aa6bce': string
-  dab8a74f: string
-  svg: string
-  '52c15454': string
-  '7aeb5407': string
-  f2e6c6d6: string
-}
+import Demo1 from './demos/h5/demo1'
+import Demo2 from './demos/h5/demo2'
+import Demo3 from './demos/h5/demo3'
+import Demo4 from './demos/h5/demo4'
+import Demo5 from './demos/h5/demo5'
 
 const generateCopyText = (name: string) => {
   return `<${camelCase(name, { pascalCase: true })} />`
@@ -67,9 +57,8 @@ ul li span .nutui-iconfont {
   margin: 16px 0 16px;
 }
 `
-
 const IconDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
       '84aa6bce': '基础用法',
       svg: 'SVG 按需使用',
@@ -88,10 +77,10 @@ const IconDemo = () => {
     },
     'en-US': {
       '84aa6bce': 'Basic Usage',
-      svg: 'SVG import on demand',
-      dab8a74f: 'Image link',
-      '52c15454': 'IconFont color',
-      '7aeb5407': 'IconFont size',
+      svg: 'SVG Import On Demand',
+      dab8a74f: 'Image Link',
+      '52c15454': 'IconFont Color',
+      '7aeb5407': 'IconFont Size',
       f2e6c6d6: 'Base IconFont',
     },
   })
@@ -102,34 +91,23 @@ const IconDemo = () => {
       <div className="demo">
         <h2>{translated.svg}</h2>
         <Cell>
-          <Add color="red" />
-          <UserAdd />
-          <Dongdong />
+          <Demo1 />
         </Cell>
         <h2>{translated['84aa6bce']}</h2>
         <Cell>
-          <IconFont name="dongdong" />
-          <IconFont name="add" />
-          <IconFont name="minus" />
+          <Demo2 />
         </Cell>
         <h2>{translated.dab8a74f}</h2>
         <Cell>
-          <IconFont
-            size="40"
-            name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-          />
+          <Demo3 />
         </Cell>
         <h2>{translated['52c15454']}</h2>
         <Cell>
-          <IconFont name="dongdong" color="#fa2c19" />
-          <IconFont name="dongdong" color="#64b578" />
-          <IconFont name="dongdong" color="#ffd700" />
+          <Demo4 />
         </Cell>
         <h2>{translated['7aeb5407']}</h2>
         <Cell style={{ alignItems: 'center' }}>
-          <IconFont name="dongdong" size="16" />
-          <IconFont name="dongdong" size="20" />
-          <IconFont name="dongdong" size="24" />
+          <Demo5 />
         </Cell>
         {(IconFontConfig as any).data.map((item: any) => {
           return (

diff --git a/src/packages/icon/demos/h5/demo1.tsx b/src/packages/icon/demos/h5/demo1.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Add, Dongdong, UserAdd } from '@nutui/icons-react'
+
+const Demo1 = () => {
+  return (
+    <>
+      <Add color="red" />
+      <UserAdd />
+      <Dongdong />
+    </>
+  )
+}
+export default Demo1
diff --git a/src/packages/icon/demos/h5/demo2.tsx b/src/packages/icon/demos/h5/demo2.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { IconFont } from '@nutui/icons-react'
+
+const Demo2 = () => {
+  return (
+    <>
+      <IconFont name="dongdong" />
+      <IconFont name="add" />
+      <IconFont name="minus" />
+    </>
+  )
+}
+export default Demo2
diff --git a/src/packages/icon/demos/h5/demo3.tsx b/src/packages/icon/demos/h5/demo3.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { IconFont } from '@nutui/icons-react'
+
+const Demo3 = () => {
+  return (
+    <>
+      <IconFont
+        size="40"
+        name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+      />
+    </>
+  )
+}
+export default Demo3