feat: 🎸 add gen scripts

.plop/index.ts

@@ -0,0 +1,26 @@
+import path from "path";
+import minimist from "minimist";
+import { fileURLToPath } from "url";
+import { Plop, run } from "plop";
+
+// == Types ================================================================
+
+// == Constants ============================================================
+
+const args = process.argv.slice(2);
+const argv = minimist(args);
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// == Exports ==============================================================
+
+Plop.prepare(
+  {
+    cwd: argv.cwd,
+    configPath: path.resolve(__dirname, "plopfile.ts"),
+    preload: argv.preload || [],
+    completion: argv.completion,
+  },
+  (env) => {
+    return run(env, undefined, true);
+  }
+);

.plop/plopfile.ts

@@ -0,0 +1,70 @@
+/* eslint-disable  import/no-extraneous-dependencies */
+import path from 'path';
+import { fileURLToPath } from "url";
+import { NodePlopAPI } from 'plop';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default function (plop: NodePlopAPI) {
+  plop.setGenerator('component', {
+    description: '创建一个新组件',
+    prompts: [
+      { type: 'input', name: 'name', message: '请输入组件名称（多个单词以中横线命名）' },
+      { type: 'input', name: 'CN', message: '请输入组件中文名称' },
+      { type: 'input', name: 'description', message: '请输入组件描述' },
+    ],
+    actions: [
+      {
+        type: 'add',
+        path: path.resolve(__dirname, '../src/{{kebabCase name}}/index.ts'),
+        templateFile: path.resolve(__dirname, './template/index.hbs'),
+      },
+      {
+        type: 'add',
+        path: path.resolve(__dirname, '../src/{{kebabCase name}}/{{pascalCase name}}.tsx'),
+        templateFile: path.resolve(__dirname, './template/comp.hbs'),
+      },
+      {
+        type: 'add',
+        path: path.resolve(__dirname, '../src/{{kebabCase name}}/style/index.less'),
+        templateFile: path.resolve(__dirname, './template/style/style.hbs'),
+      },
+      {
+        type: 'add',
+        path: path.resolve(__dirname, '../src/{{kebabCase name}}/style/index.ts'),
+        templateFile: path.resolve(__dirname, './template/style/index.hbs'),
+      },
+      {
+        type: 'add',
+        path: path.resolve(__dirname, '../docs/components/{{kebabCase name}}.md'),
+        templateFile: path.resolve(__dirname, './template/doc.hbs'),
+      },
+      {
+        type: 'add',
+        path: path.resolve(__dirname, '../src/{{kebabCase name}}/{{camelCase name}}Types.ts'),
+        templateFile: path.resolve(__dirname, './template/types.hbs'),
+      },
+      {
+        type: 'add',
+        path: path.resolve(__dirname, '../src/{{kebabCase name}}/demos/basic.tsx'),
+        templateFile: path.resolve(__dirname, './template/demos/basic.hbs'),
+      },
+      {
+        type: 'add',
+        path: path.resolve(__dirname, '../src/{{kebabCase name}}/__tests__/{{pascalCase name}}.spec.tsx'),
+        templateFile: path.resolve(__dirname, './template/__tests__/index.spec.hbs'),
+      },
+      {
+        type: 'append',
+        path: path.resolve(__dirname, '../src/index.ts'),
+        pattern: '/* PLOP_INJECT_EXPORT */',
+        template: "export { default as {{pascalCase name}} } from './{{kebabCase name}}'",
+      },
+      {
+        type: 'append',
+        path: path.resolve(__dirname, '../.umirc.ts'),
+        pattern: '/* PLOP_INJECT_MD */',
+        template: "'/components/{{kebabCase name}}.md',",
+      },
+    ],
+  });
+}

.plop/template/__tests__/index.spec.hbs

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import {{pascalCase name}} from '../index';
+
+describe('{{pascalCase name}}', () => {
+   it('renders without error', () => {
+
+   });
+});

.plop/template/comp.hbs

@@ -0,0 +1,14 @@
+import React from 'react';
+import { {{pascalCase name}}Props } from './{{camelCase name}}Types';
+
+const defaultProps = {
+
+};
+
+const {{pascalCase name}}: React.FC<{{pascalCase name}}Props> = userProps => {
+  const props = { ...defaultProps, ...userProps };
+
+  return <>{{pascalCase name}}</>;
+};
+
+export default {{pascalCase name}};

.plop/template/demos/basic.hbs

@@ -0,0 +1,6 @@
+import React from 'react';
+import {{pascalCase name}} from '../{{pascalCase name}}';
+
+export default () => (
+<{{pascalCase name}} />
+);

.plop/template/doc.hbs

@@ -0,0 +1,12 @@
+# {{pascalCase name}} {{CN}}
+
+{{description}}
+
+## 代码演示
+
+### 基本用法
+
+<code src="../../src/{{kebabCase name}}/demos/basic.tsx"></code>
+
+
+<API src="../../src/{{kebabCase name}}/{{pascalCase name}}.tsx"/>

.plop/template/index.hbs

@@ -0,0 +1,3 @@
+export * from './{{camelCase name}}Types';
+
+export { default } from './{{pascalCase name}}';

.plop/template/style/index.hbs

@@ -0,0 +1 @@
+import './index.less';

.plop/template/types.hbs

@@ -0,0 +1,3 @@
+export interface {{pascalCase name}}Props {
+
+}

.umirc.ts

@@ -2,8 +2,6 @@ import { defineConfig } from 'dumi'
 
 let base, publicPath;
 
-console.log(process.env)
-
 if (process.env.NODE_ENV === 'production') {
     base = '/k-view-react',
     publicPath= '/k-view-react/'
@@ -16,9 +14,38 @@ const conf = {
     exportStatic: {},
     dynamicImport: {},
     base,
-    publicPath
+    publicPath,
+    navs: [
+        {
+            title: '介绍',
+            path: '/guide'
+        },
+        {
+            title: '组件',
+            path: '/components',
+        },
+        {
+            title: '贡献',
+            path: '/contributing',
+        },
+        {
+            title: 'Github',
+            path: 'https://github.com/SoldierAb/k-view-react'
+        }
+    ],
+    menus: {
+        '/components': [
+            {
+                title: '组件',
+                path: '/components',
+                children: [
+                    '/components/button.md',
+                    /* PLOP_INJECT_MD */
+'/components/popup-box.md',
+                ]
+            }
+        ]
+    }
 }
 
-console.log('umi conf:  ',conf)
-
 export default defineConfig(conf)

docs/index.md → docs/README.md

@@ -5,7 +5,7 @@ hero:
   desc: 文档站点基于 dumi 生成
   actions:
     - text: 快速上手
-      link: /getting-started
+      link: /guide
 features:
   - icon: https://gw.alipayobjects.com/zos/bmw-prod/881dc458-f20b-407b-947a-95104b5ec82b/k79dm8ih_w144_h144.png
     title: 特性 1

docs/components/README.md

@@ -0,0 +1 @@
+# 组件们

docs/components/button.md

@@ -0,0 +1,12 @@
+# Button
+
+基础按钮
+
+## 代码演示
+
+### 基本用法
+
+<code src="../../src/button/demos/basic.tsx"></code>
+
+
+<API src="../../src/button/Button.tsx"/>

docs/components/popup-box.md

@@ -0,0 +1,12 @@
+# PopupBox 弹窗
+
+测试gen脚本
+
+## 代码演示
+
+### 基本用法
+
+<code src="../../src/popup-box/demos/basic.tsx"></code>
+
+
+<API src="../../src/popup-box/PopupBox.tsx"/>

docs/contributing.md

@@ -0,0 +1,10 @@
+# 贡献指南
+
+
+## Install
+```bash
+
+```
+
+## Pull Request
+

docs/guide/README.md

@@ -0,0 +1,3 @@
+# 介绍
+
+基于 typescript 的 React 组件库

docs/guide/quick-start.md

@@ -0,0 +1,12 @@
+# quick start
+
+## Install
+
+```bash
+
+npm i -S k-view-react
+
+```
+
+
+## Usage

package.json

@@ -4,6 +4,15 @@
   "description": "",
   "typings": "lib/index.d.ts",
   "main": "lib/index.js",
+  "module": "es/index.js",
+  "authors": {
+    "name": "cgj",
+    "email": "[email protected]"
+  },
+  "files": [
+    "lib",
+    "es"
+  ],
   "scripts": {
     "dev": "dumi dev",
     "build:preview": "npm run build:site && serve site",
@@ -15,7 +24,8 @@
     "commit": "git add . && git-cz",
     "test": "jest --coverage",
     "test:watch": "jest --watch",
-    "test:update": "jest --updateSnapshot"
+    "test:update": "jest --updateSnapshot",
+    "gen": "node --experimental-loader esbuild-node-loader .plop/index.ts"
   },
   "author": "cgj",
   "license": "MIT",
@@ -39,6 +49,9 @@
     "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",
     "dumi": "^1.1.42",
+    "esbuild": "^0.14.39",
+    "esbuild-node-loader": "^0.8.0",
+    "esmo": "^0.16.3",
     "gh-pages": "^4.0.0",
     "git-cz": "^4.9.0",
     "gulp": "^4.0.2",
@@ -51,12 +64,14 @@
     "jest": "^28.1.0",
     "jest-environment-jsdom": "^28.1.0",
     "lint-staged": "^12.4.1",
+    "plop": "^3.1.0",
     "prettier": "^2.6.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "serve": "^13.0.2",
     "through2": "^4.0.2",
     "ts-jest": "^28.0.2",
+    "ts-node": "^10.8.0",
     "typescript": "^4.6.4"
   },
   "sideEffects": [

src/index.ts

@@ -1 +1,3 @@
-export { default as Button } from './button/Button'
+export { default as Button } from './button/Button'
+/* PLOP_INJECT_EXPORT */
+export { default as PopupBox } from './popup-box'

src/popup-box/PopupBox.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { PopupBoxProps } from './popupBoxTypes';
+
+const defaultProps = {
+
+};
+
+const PopupBox: React.FC<PopupBoxProps> = userProps => {
+  const props = { ...defaultProps, ...userProps };
+
+  return <>PopupBox</>;
+};
+
+export default PopupBox;

src/popup-box/__tests__/PopupBox.spec.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import PopupBox from '../index';
+
+describe('PopupBox', () => {
+   it('renders without error', () => {
+
+   });
+});

src/popup-box/demos/basic.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import PopupBox from '../PopupBox';
+
+export default () => (
+<PopupBox />
+);

src/popup-box/index.ts

@@ -0,0 +1,3 @@
+export * from './popupBoxTypes';
+
+export { default } from './PopupBox';

src/popup-box/popupBoxTypes.ts

@@ -0,0 +1,3 @@
+export interface PopupBoxProps {
+
+}