feat: support auto generate react component docs

.changeset/fair-carrots-matter.md

@@ -0,0 +1,5 @@
+---
+'@ice/remark-react-docgen-docusaurus': major
+---
+
+feat: init plugin

.changeset/light-kangaroos-doubt.md

@@ -0,0 +1,5 @@
+---
+'@ice/pkg': patch
+---
+
+fix: can not parse jsx/js file

.eslintignore

@@ -14,6 +14,7 @@ packages/**/es/
 packages/**/esnext/
 packages/**/esm/
 packages/**/es2017/
+packages/**/cjs/
 packages/**/build/
 packages/build-plugin-component/*/template
 app/main_dist/

.gitignore

@@ -31,6 +31,7 @@ packages/*/es/
 /packages/**/es
 /packages/**/esnext
 /packages/**/es2017
+/packages/**/cjs
 /packages/**/esm
 **/node_modules
 /.pnpm-debug.log

examples/react-component/build.config.mts

@@ -3,7 +3,15 @@ import { defineConfig } from '@ice/pkg';
 // https://pkg.ice.work/reference/config-list
 export default defineConfig({
   plugins: [
-    ['@ice/pkg-plugin-docusaurus'],
+    [
+      '@ice/pkg-plugin-docusaurus',
+      {
+        remarkPlugins: [
+          "require('@ice/remark-react-docgen-docusaurus')",
+          // "[require('remark-react-docgen'), {}]",
+        ],
+      },
+    ],
     ['@ice/pkg-plugin-jsx-plus'],
   ],
   transform: {

examples/react-component/docs/button.md

@@ -0,0 +1,46 @@
+# Button 组件
+
+## 何时使用
+
+这是一段 Button 组件使用描述
+
+## 代码演示
+
+### 按钮类型
+
+按钮有两种视觉层次：主按钮、普通按钮。不同的类型可以用来区别按钮的重要程度。可以通过 `type` 属性置顶不同的视觉。
+
+```tsx preview
+import * as React from 'react';
+import { Button } from 'example-pkg-react-component';
+
+export default function App () {
+  return (
+    <div>
+      <Button loading={false}>Normal</Button>
+      <Button type="primary" loading={false}>Primary</Button>
+    </div>
+  )
+}
+```
+
+### 添加事件
+
+可以通过 `onClick` 设置点击按钮后的事件回调函数。
+
+```tsx preview
+import * as React from 'react';
+import { Button } from 'example-pkg-react-component';
+
+export default function App () {
+  return (
+    <div>
+      <Button onClick={() => alert('Hello World')}>Normal</Button>
+    </div>
+  )
+}
+```
+
+## API
+
+<ReactDocgenProps path="../src/components/Button/index.tsx"></ReactDocgenProps>

examples/react-component/docs/index.md

@@ -1,6 +1,7 @@
 ---
-sidebar_label: 首页
+sidebar_label: 快速开始
 sidebar_position: 0
+title: 快速开始
 ---
 
 import Readme from '../README.md';

examples/react-component/docs/input.md

@@ -0,0 +1,27 @@
+# Input 组件
+
+## 何时使用
+
+这是一段 Input 组件使用描述
+
+## 代码演示
+
+### 基本使用
+
+
+```tsx preview
+import * as React from 'react';
+import { Input } from 'example-pkg-react-component';
+
+export default function App () {
+  return (
+    <div>
+      <Input />
+    </div>
+  )
+}
+```
+
+## API
+
+<ReactDocgenProps path="../src/components/Input/index.jsx"></ReactDocgenProps>

examples/react-component/docs/test.md

@@ -0,0 +1,20 @@
+---
+sidebar_label: Test 组件
+title: Test
+---
+
+本 Demo 演示一行文字的用法。
+
+```tsx preview
+import * as React from 'react';
+import { Test } from 'example-pkg-react-component';
+
+export default function App () {
+  return (
+    <Test />
+  )
+}
+```
+## API
+
+<ReactDocgenProps path="../src/components/Test/index.jsx"></ReactDocgenProps>

examples/react-component/package.json

@@ -44,6 +44,7 @@
     "@ice/pkg": "workspace:*",
     "@ice/pkg-plugin-docusaurus": "workspace:*",
     "@ice/pkg-plugin-jsx-plus": "workspace:*",
+    "@ice/remark-react-docgen-docusaurus": "workspace:*",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/react": "^18.0.0",
@@ -53,6 +54,7 @@
     "jest": "^29.0.0",
     "jest-environment-jsdom": "^29.0.0",
     "jsdom": "^21.1.0",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.58.3",

examples/react-component/pages/index.less

@@ -1,3 +1,3 @@
 .container {
-  color: blue;
+  font-size: 14px;
 }

examples/react-component/src/components/Button/index.scss

@@ -0,0 +1,23 @@
+.pkg-btn {
+  border-radius: 6px;
+  height: 32px;
+  padding: 4px 15px;
+  font-size: 14px;
+  text-align: center;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font-weight: 400;
+
+}
+
+.pkg-btn-primary {
+  color: #fff;
+  background-color: #1677ff;
+  box-shadow: 0 2px 0 rgb(5 145 255 / 10%);
+}
+
+.pkg-btn-default {
+  background-color: #fff;
+  border-color: #d9d9d9;
+  box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
+}

examples/react-component/src/components/Button/index.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import './index.scss';
+
+interface ButtonProps {
+  /**
+   * 设置按钮类型
+   */
+  type?: 'primary' | 'default';
+  /**
+   * 点击跳转的地址，指定此属性 button 的行为和 a 链接一致
+   */
+  href?: string;
+  /**
+   * 显式加载状态
+   */
+  loading: boolean;
+  /**
+   * 点击按钮时的回调
+   */
+  onClick?: React.MouseEventHandler;
+}
+
+const Button: React.FunctionComponent<React.PropsWithChildren<ButtonProps>> = (props: ButtonProps) => {
+  const {
+    type = 'default',
+  } = props;
+  const typeCssSelector = {
+    primary: 'pkg-btn-primary',
+    default: 'pkg-btn-default',
+  };
+  return (
+    <button
+      className={`pkg-btn ${typeCssSelector[type] || ''}`}
+      onClick={props.onClick}
+      data-testid="normal-button"
+    >
+      {props.children}
+    </button>
+  );
+};
+
+Button.defaultProps = {
+  type: 'default',
+  onClick: () => { },
+  href: undefined,
+};
+
+export default Button;

examples/react-component/src/components/Input/index.jsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+export default class Input extends React.Component {
+  render() {
+    return (
+      <>
+      <input />
+      </>
+    );
+  }
+}
+
+Input.propTypes = {
+  /**
+   * 输入框的 id
+   */
+  id: PropTypes.string,
+  /**
+   * 设置校验状态
+   */
+  status: PropTypes.string,
+};

examples/react-component/src/components/Test/index.jsx

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import './index.css';
+/**
+ * Test component
+ */
+const Test = ({ title }) => {
+  // eslint-disable-next-line
+  console.log(__DEV__);
+  console.log(process.env.NODE_ENV);
+
+  const [visible, setVisible] = React.useState(false);
+  return (
+    <div>
+      <h1 style={{ fontSize: '100rpx' }} data-testid="title">{title}</h1>
+      <button onClick={() => setVisible(!visible)}>Click Me to Set Visible</button>
+
+      <div>
+        <div x-if={visible}>Hello</div>
+        <div x-else>World</div>
+      </div>
+    </div>
+  );
+};
+
+Test.propTypes = {
+  /**
+   *
+   */
+  title: PropTypes.string,
+  /**
+   *
+   */
+  baz: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /**
+   *
+   */
+  bar(props, propName, componentName) {
+    // ...
+  },
+};
+
+Test.defaultProps = {
+  title: 'Hello World',
+  bar: () => {},
+  baz: 'baz',
+};
+
+export default Test;

examples/react-component/src/index.ts

@@ -0,0 +1,3 @@
+export { default as Button } from '@/components/Button';
+export { default as Test } from '@/components/Test';
+export { default as Input } from '@/components/Input';