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": "ab140140@163.com"
+ },
+ "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 {
+
+}