feat: support antd-mobile & update docs (#2)

* feat: 基础功能开发

* chore: update workflow

* chore: add test

* ci: update workflow

* chore: update lock file

* chore: add examples

* chore: update lock file

* docs: update docs

* feat: 添加移动端 & 使用文档

* ci: add workflows

* chore: update pnpm-lock.yaml

* chore: update config

* chore: update release config

* chore: uodate

* chore: ignore pnpm-lock file

* Revert "chore: ignore pnpm-lock file"

This reverts commit 5cb1fcc.

* ci: update workflow

* chore: update .npmrc

* chore: update pnpm lock

* chore: update

* chore: update release

.dumirc.ts

@@ -1,10 +1,19 @@
 import { defineConfig } from 'dumi';
 import { homepage } from './package.json';
 
+const isProd = process.env.NODE_ENV === 'production';
+// 不是预览模式 同时是生产环境
+const isProdSite = process.env.PREVIEW !== '1' && isProd;
+
+const name = 'easy-antd-modal';
+
 export default defineConfig({
   themeConfig: {
-    name: 'easy-antd-modal',
+    name,
     github: homepage,
   },
+  base: isProdSite ? `/${name}/` : '/',
+  publicPath: isProdSite ? `/${name}/` : '/',
   html2sketch: {},
+  mfsu: false,
 });

.github/workflows/release.yml

@@ -22,28 +22,6 @@ jobs:
         with:
           node-version: '18'
 
-      - name: Setup Node.js environment
-        uses: actions/setup-node@v3
-        with:
-          node-version: '18'
-
-      - name: create pnpm-lock.yaml
-        run: pnpm install --frozen-lockfile --ignore-scripts
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - name: Setup pnpm cache
-        uses: actions/cache@v3
-        with:
-          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
       - name: Install deps
         run: pnpm install
 

.github/workflows/static.yml

@@ -0,0 +1,61 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['master']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Install deps
+        run: pnpm install
+
+      - name: Build Pages
+        run: pnpm run docs:build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # Upload entire repository
+          path: 'dist'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.github/workflows/test.yml

@@ -7,18 +7,15 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8
-
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
         with:
           node-version: '18'
 
-      - name: create pnpm-lock.yaml
-        run: pnpm install --frozen-lockfile --ignore-scripts
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
 
       - name: Get pnpm store directory
         id: pnpm-cache

.npmrc

@@ -1 +1,2 @@
 resolution-mode=highest
+auto-install-peers=true

.releaserc.js

@@ -0,0 +1,29 @@
+module.exports = {
+  release: {
+    branches: ['master', 'beta'],
+  },
+  plugins: [
+    '@semantic-release/commit-analyzer',
+    '@semantic-release/release-notes-generator',
+    [
+      '@semantic-release/changelog',
+      {
+        changelogFile: 'CHANGELOG.md',
+      },
+    ],
+    [
+      '@semantic-release/github',
+      {
+        assets: [],
+      },
+    ],
+    [
+      '@semantic-release/git',
+      {
+        assets: ['CHANGELOG.md', 'package.json'],
+        message: "chore(release): ${nextRelease.gitTag} [skip ci] \n\n${nextRelease.notes}'",
+      },
+    ],
+    '@semantic-release/npm',
+  ],
+};

README.md

@@ -40,10 +40,11 @@
 
 基于 Ant Design 的 Modal 组件的二次封装，简化了 Modal 的使用方式
 
-- 支持 antd@4.x 和 antd@5.x, API 保持一致
+- 支持 antd4.x 和 antd5.x, API 保持一致
 - 自动绑定打开事件, 无需维护 open 状态
 - content 增强, 支持内部手动关闭
 - 支持拖拽, 类 window 窗口
+- 可直接对接 antd-mobile 的 Mask, Modal, Popup, Dialog 组件
 - 长期维护 (欢迎 PR)
 
 ## 快速上手
@@ -73,9 +74,9 @@ export default () => (
 
 详情：[CHANGELOG](./CHANGELOG.md)
 
-## 📝 License
+## License
 
-Copyright © 2023 - present [Wxh16144[profile-url]. <br />
+Copyright © 2023 - present [Wxh16144][profile-url]. <br />
 This project is [MIT](./LICENSE) licensed.
 
 <!-- LINK GROUP -->

docs/api/easy-antd-modal-provider.md

@@ -0,0 +1,27 @@
+---
+title: EasyAntdModalProvider
+sourceUrl: '{github}/blob/master/src/context/index.tsx'
+description: 用于全局配置 Modal 组件的 Provider
+nav: API
+order: 1
+group: 容器组件
+demo:
+  cols: 2
+---
+
+## 简介
+
+该容器可以针对全局的 Modal 组件进行配置, 按照 Ant Design 的 Modal 组件的 API 约定, 默认情况下 children 为 Modal 的内容. 下面示例是将 Modal 的触发器设为 `children` 内容设为 `content`.
+
+<code src="../examples/provider-demo/case01.tsx"></code>
+
+下面示例是将 Modal 的内容设为 `content`.
+
+<code src="../examples/provider-demo/case02.tsx"></code>
+
+### API
+
+| 参数         | 说明                 | 类型                  | 默认值     |
+| ------------ | -------------------- | --------------------- | ---------- |
+| triggerProps | Modal 触发器的 props | `trigger \| children` | `trigger`  |
+| contentProps | Modal 内容的 props   | `children \| content` | `children` |

docs/api/use-modal-enhanced.md

@@ -0,0 +1,51 @@
+---
+title: useModalEnhanced
+description: Modal 增强 Hook
+sourceUrl: '{github}/blob/master/src/hooks/useModalEnhanced.ts'
+order: 2
+group: Hooks
+---
+
+## 简介
+
+内部对 Trigger 和 Content 进行了 HOC, 通过该 hook 不仅可以对 Modal 进行增强, 还可以对 Ant Design 的 Drawer, 以及 Ant Design Mobile 的 Modal, Popup 以及 Mask 进行增强.
+
+## API
+
+| 参数        | 说明               | 类型                                          | 默认值 |
+| ----------- | ------------------ | --------------------------------------------- | ------ |
+| defaultOpen | 默认是否打开       | `boolean`                                     | false  |
+| onClick     | 点击事件           | [`HandleCallback`](#handlecallback)           | -      |
+| actionRef   | 获取 action 的 ref | [`ModalEnhancedAction`](#modalenhancedaction) | -      |
+| content     | 内容               | [`ContentType`](#contenttype)                 | -      |
+| trigger     | 触发器             | [`TriggerType`](#triggertype)                 | -      |
+| children    | 内容或触发器       | `ContentType \| TriggerType`                  | -      |
+
+### ContentType
+
+```tsx | pure
+type ContentType =
+  | React.ReactNode
+  | (<P extends AnyObj>(props: PropsWithModalEnhanced<P>) => React.ReactNode);
+```
+
+### TriggerType
+
+```tsx | pure
+type TriggerType = React.ReactNode;
+```
+
+### HandleCallback
+
+```tsx | pure
+type HandleCallback = (e: React.MouseEvent<HTMLElement>, action: ModalEnhancedAction) => void;
+```
+
+### ModalEnhancedAction
+
+```tsx | pure
+interface ModalEnhancedAction {
+  close: () => void;
+  open: () => void;
+}
+```

docs/examples/drag-modal/basic.tsx

@@ -0,0 +1,8 @@
+import { Button } from 'antd';
+import { DragModal } from 'easy-antd-modal';
+
+export default () => (
+  <DragModal title="Easy-antd-modal" trigger={<Button type="primary">Open Drag Modal</Button>}>
+    I ❤️ antd
+  </DragModal>
+);

docs/examples/drawer/basic.tsx

@@ -0,0 +1,8 @@
+import { Button } from 'antd';
+import { Drawer } from 'easy-antd-modal';
+
+export default () => (
+  <Drawer trigger={<Button type="primary">Open Drawer</Button>}>
+    <h1>I ❤️ antd</h1>
+  </Drawer>
+);

docs/examples/mobile-dialog/basic.tsx

@@ -0,0 +1,8 @@
+import { Button } from 'antd-mobile';
+import { Dialog } from 'easy-antd-modal/mobile';
+
+export default () => (
+  <Dialog closeOnMaskClick trigger={<Button color="warning">Open Dialog</Button>}>
+    I ❤️ Ant Design Mobile
+  </Dialog>
+);

docs/examples/mobile-mask/basic.tsx

@@ -0,0 +1,10 @@
+import { Button } from 'antd-mobile';
+import { Mask } from 'easy-antd-modal/mobile';
+
+export default () => (
+  <Mask trigger={<Button color="primary">Open Mask</Button>}>
+    <h1 style={{ color: 'white', textAlign: 'center', marginBlockStart: '6em' }}>
+      I ❤️ Ant Design Mobile
+    </h1>
+  </Mask>
+);

docs/examples/mobile-modal/basic.tsx

@@ -0,0 +1,8 @@
+import { Button } from 'antd-mobile';
+import { Modal } from 'easy-antd-modal/mobile';
+
+export default () => (
+  <Modal closeOnMaskClick trigger={<Button color="success">Open Modal</Button>}>
+    I ❤️ Ant Design Mobile
+  </Modal>
+);

docs/examples/mobile-popup/basic.tsx

@@ -0,0 +1,10 @@
+import { Button } from 'antd-mobile';
+import { Popup } from 'easy-antd-modal/mobile';
+
+export default () => (
+  <Popup closeOnMaskClick trigger={<Button color="danger">Open Popup</Button>}>
+    <div style={{ height: '30vh', fontSize: '3em', textAlign: 'center', marginBlock: '1em' }}>
+      I ❤️ Ant Design Mobile
+    </div>
+  </Popup>
+);

docs/examples/modal/action-ref.tsx

@@ -0,0 +1,16 @@
+import { Button } from 'antd';
+import Modal, { ModalEnhancedAction } from 'easy-antd-modal';
+import * as React from 'react';
+
+export default () => {
+  const modalRef = React.useRef<ModalEnhancedAction>(null);
+
+  return (
+    <>
+      <Button type="primary" onClick={() => modalRef.current?.open()}>
+        Open Modal
+      </Button>
+      <Modal actionRef={modalRef}>I ❤️ antd</Modal>
+    </>
+  );
+};

docs/examples/modal/trigger-event.tsx

@@ -0,0 +1,27 @@
+import { Button, message } from 'antd';
+import Modal from 'easy-antd-modal';
+
+export default () => (
+  <Modal
+    title="Easy-antd-modal"
+    onClick={(event, actions) => {
+      globalThis.console.log('Modal onClick', { event, actions });
+      const needOpen = Math.random() > 0.5;
+      if (needOpen) {
+        message.success({
+          content: '即将打开 Modal',
+          duration: 1,
+          onClose: actions.open, // 需要手动调用 actions.open() 才能打开 Modal
+        });
+      } else {
+        message.error({
+          content: '不打开 Modal',
+          duration: 1,
+        });
+      }
+    }}
+    trigger={<Button type="primary">Open Modal</Button>}
+  >
+    I ❤️ antd
+  </Modal>
+);

docs/examples/provider-demo/case01.tsx

@@ -0,0 +1,10 @@
+import { Button } from 'antd';
+import Modal, { EasyAntdModalProvider } from 'easy-antd-modal';
+
+export default () => (
+  <EasyAntdModalProvider triggerProps="children" contentProps="content">
+    <Modal content="I ❤️ antd">
+      <Button type="primary">Open Modal</Button>
+    </Modal>
+  </EasyAntdModalProvider>
+);

docs/examples/provider-demo/case02.tsx

@@ -0,0 +1,8 @@
+import { Button } from 'antd';
+import Modal, { EasyAntdModalProvider } from 'easy-antd-modal';
+
+export default () => (
+  <EasyAntdModalProvider contentProps="content">
+    <Modal trigger={<Button type="primary">Open Modal</Button>} content="I ❤️ antd" />
+  </EasyAntdModalProvider>
+);