chore: add doc example

test/doc/README.md

@@ -0,0 +1,41 @@
+# Rslib project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get started
+
+Build the library:
+
+```bash
+pnpm build
+```
+
+Build the library in watch mode:
+
+```bash
+pnpm dev
+```
+
+Start the doc dev server:
+
+```bash
+pnpm doc
+```
+
+Build the doc for production:
+
+```bash
+pnpm doc:build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm doc:preview
+```

test/doc/docs/en/Button.mdx

@@ -0,0 +1,30 @@
+# Button
+
+## Size
+
+Buttons can be small, medium and large in size.
+
+```jsx
+import React from 'react';
+import { Button } from 'rslib-module-doc';
+
+export default () => {
+  return <Button size="medium" label="Click me"></Button>;
+};
+```
+
+## Background color
+
+The background color of the button can be set by yourself.
+
+```jsx
+import React from 'react';
+import { Button } from 'rslib-module-doc';
+
+export default () => {
+  return <Button backgroundColor="red" label="红色"></Button>;
+};
+```
+
+## API
+<API moduleName="Button" en/>

test/doc/docs/en/_meta.json

@@ -0,0 +1 @@
+["index", "Button"]

test/doc/docs/en/index.mdx

@@ -0,0 +1,4 @@
+---
+overview: true
+title: Overview
+---

test/doc/docs/zh/Button.mdx

@@ -0,0 +1,30 @@
+# Button
+
+## 尺寸
+
+按钮分为：小、中、大三种尺寸。
+
+```jsx
+import React from 'react';
+import { Button } from 'rslib-module-doc';
+
+export default () => {
+  return <Button size="medium" label="点我"></Button>;
+};
+```
+
+## 背景色
+
+按钮的背景色可以自行设置。
+
+```jsx
+import React from 'react';
+import { Button } from 'rslib-module-doc';
+
+export default () => {
+  return <Button backgroundColor="red" label="红色"></Button>;
+};
+```
+
+## API
+<API moduleName="Button"/>

test/doc/docs/zh/_meta.json

@@ -0,0 +1 @@
+["index", "Button"]

test/doc/docs/zh/index.mdx

@@ -0,0 +1,4 @@
+---
+overview: true
+title: 总览
+---

test/doc/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "rslib-module-doc",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch",
+    "doc": "rspress dev",
+    "doc:build": "rspress build",
+    "doc:preview": "rspress preview"
+  },
+  "devDependencies": {
+    "rslib-module-doc": "workspace:*",
+    "@rsbuild/plugin-react": "^1.4.1",
+    "@rslib/core": "^0.14.0",
+    "@rspress/core": "^2.0.0-beta.33",
+    "@rspress/plugin-api-docgen": "^2.0.0-beta.33",
+    "@rspress/plugin-preview": "^2.0.0-beta.33",
+    "@types/node": "^24.5.2",
+    "@types/react": "^19.1.13",
+    "react": "^19.1.1",
+    "rsbuild-plugin-workspace-dev": "workspace:*",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  }
+}

test/doc/rslib.config.ts

@@ -0,0 +1,19 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  lib: [
+    {
+      bundle: false,
+      dts: true,
+      format: 'esm',
+    },
+  ],
+  output: {
+    target: 'web',
+  },
+  source: {
+    tsconfigPath: 'tsconfig.build.json',
+  },
+  plugins: [pluginReact()],
+});

test/doc/rspress.config.ts

@@ -0,0 +1,37 @@
+import * as path from 'node:path';
+import { defineConfig } from '@rspress/core';
+import { pluginApiDocgen } from '@rspress/plugin-api-docgen';
+import { pluginPreview } from '@rspress/plugin-preview';
+import { pluginWorkspaceDev } from 'rsbuild-plugin-workspace-dev';
+
+export default defineConfig({
+  root: path.join(__dirname, 'docs'),
+  title: 'Rslib Module Doc',
+  lang: 'en',
+  locales: [
+    {
+      lang: 'en',
+      label: 'English',
+    },
+    {
+      lang: 'zh',
+      label: '简体中文',
+    },
+  ],
+  plugins: [
+    pluginApiDocgen({
+      entries: {
+        Button: './src/button.tsx',
+      },
+      apiParseTool: 'react-docgen-typescript',
+    }),
+    pluginPreview(),
+  ],
+  builderConfig: {
+    plugins: [
+      pluginWorkspaceDev({
+        ignoreSelf: false,
+      }),
+    ],
+  },
+});

test/doc/src/Button.tsx

@@ -0,0 +1,42 @@
+import './button.css';
+
+export interface ButtonProps {
+  /**
+   * Whether the button is primary
+   * @default true
+   */
+  primary?: boolean;
+  /**
+   * Background color of the button
+   */
+  backgroundColor?: string;
+  /**
+   * Size of Button
+   * @default 'large'
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Label of the button
+   */
+  label: string;
+}
+
+export const Button = ({
+  primary = true,
+  size = 'large',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'demo-button--primary' : 'demo-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['demo-button', `demo-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};

test/doc/src/button.css

@@ -0,0 +1,34 @@
+.demo-button {
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+
+.demo-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+
+.demo-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+
+.demo-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+
+.demo-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+
+.demo-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}

test/doc/src/index.tsx

@@ -0,0 +1 @@
+export { Button } from './Button';

test/doc/tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src"]
+}

test/doc/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "lib": ["DOM", "ES2020"],
+    "jsx": "react-jsx",
+    "target": "ES2020",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "useDefineForClassFields": true,
+
+    /* modules */
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "moduleResolution": "bundler",
+    "verbatimModuleSyntax": true,
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+
+    /* type checking */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": ["src", "docs", "theme", "rspress.config.ts", "rslib.config.ts"],
+  "mdx": {
+    "checkMdx": true
+  }
+}