From 85f065f2958b1779f56f372a829e1cf3e5a5fa59 Mon Sep 17 00:00:00 2001
From: dengfuping <fuping.dfp@antgroup.com>
Date: Thu, 14 Nov 2024 18:09:19 +0800
Subject: [PATCH] feat(design): Add Progress docs and demos

---
 .dumirc.ts                                    |  1 +
 packages/design/src/badge/demo/dot.tsx        |  2 +-
 packages/design/src/input/demo/password.tsx   |  2 +-
 .../design/src/progress/demo/cicle-micro.tsx  | 18 +++++++++++
 .../design/src/progress/demo/circle-steps.tsx | 26 ++++++++++++++++
 packages/design/src/progress/demo/circle.tsx  | 30 ++++++++++++++++++
 packages/design/src/progress/demo/line.tsx    | 31 +++++++++++++++++++
 packages/design/src/progress/demo/steps.tsx   | 20 ++++++++++++
 packages/design/src/progress/index.md         | 24 ++++++++++++++
 packages/design/src/progress/index.ts         |  1 +
 packages/design/src/progress/progress.ts      |  1 +
 packages/design/src/switch/demo/text.tsx      |  2 +-
 packages/design/src/switch/index.md           |  2 +-
 13 files changed, 156 insertions(+), 4 deletions(-)
 create mode 100644 packages/design/src/progress/demo/cicle-micro.tsx
 create mode 100644 packages/design/src/progress/demo/circle-steps.tsx
 create mode 100644 packages/design/src/progress/demo/circle.tsx
 create mode 100644 packages/design/src/progress/demo/line.tsx
 create mode 100644 packages/design/src/progress/demo/steps.tsx
 create mode 100644 packages/design/src/progress/index.md
 create mode 100644 packages/design/src/progress/progress.ts

diff --git a/.dumirc.ts b/.dumirc.ts
index 601b263e8..55c411e7a 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -191,6 +191,7 @@ export default defineConfig({
             { title: 'Modal 对话框', link: '/components/modal' },
             { title: 'Drawer 抽屉', link: '/components/drawer' },
             { title: 'Notification 通知提醒框', link: '/components/notification' },
+            { title: 'Progress 进度条', link: '/components/progress' },
             { title: 'Result 结果', link: '/components/result' },
             { title: 'Skeleton 骨架屏', link: '/components/skeleton' },
             { title: 'Spin 加载中', link: '/components/spin' },
diff --git a/packages/design/src/badge/demo/dot.tsx b/packages/design/src/badge/demo/dot.tsx
index 8e895811f..8cd3b2d85 100644
--- a/packages/design/src/badge/demo/dot.tsx
+++ b/packages/design/src/badge/demo/dot.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Badge, Space } from '@oceanbase/design';
-import { NotificationOutlined } from '@ant-design/icons';
+import { NotificationOutlined } from '@oceanbase/icons';
 
 const App: React.FC = () => (
   <Space>
diff --git a/packages/design/src/input/demo/password.tsx b/packages/design/src/input/demo/password.tsx
index 09088aba2..0ce7b1765 100644
--- a/packages/design/src/input/demo/password.tsx
+++ b/packages/design/src/input/demo/password.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input, Space } from 'antd';
+import { Input, Space } from '@oceanbase/design';
 
 const App: React.FC = () => {
   return (
diff --git a/packages/design/src/progress/demo/cicle-micro.tsx b/packages/design/src/progress/demo/cicle-micro.tsx
new file mode 100644
index 000000000..bb9967166
--- /dev/null
+++ b/packages/design/src/progress/demo/cicle-micro.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Flex, Progress } from '@oceanbase/design';
+
+const App: React.FC = () => (
+  <Flex align="center" gap="small">
+    <Progress
+      type="circle"
+      trailColor="#e6f4ff"
+      percent={60}
+      strokeWidth={20}
+      size={14}
+      format={number => `进行中，已完成${number}%`}
+    />
+    <span>应用发布</span>
+  </Flex>
+);
+
+export default App;
diff --git a/packages/design/src/progress/demo/circle-steps.tsx b/packages/design/src/progress/demo/circle-steps.tsx
new file mode 100644
index 000000000..d1d71fbef
--- /dev/null
+++ b/packages/design/src/progress/demo/circle-steps.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Flex, Progress, theme } from '@oceanbase/design';
+
+const App: React.FC = () => {
+  const { token } = theme.useToken();
+  return (
+    <Flex wrap gap="middle" style={{ marginTop: 16 }}>
+      <Progress
+        type="dashboard"
+        steps={8}
+        percent={50}
+        trailColor={token.colorFillSecondary}
+        strokeWidth={20}
+      />
+      <Progress
+        type="circle"
+        percent={100}
+        trailColor={token.colorFillSecondary}
+        steps={{ count: 5, gap: 7 }}
+        strokeWidth={20}
+      />
+    </Flex>
+  );
+};
+
+export default App;
diff --git a/packages/design/src/progress/demo/circle.tsx b/packages/design/src/progress/demo/circle.tsx
new file mode 100644
index 000000000..de263e569
--- /dev/null
+++ b/packages/design/src/progress/demo/circle.tsx
@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { Flex, Radio, Space, Progress } from '@oceanbase/design';
+import type { ProgressSize } from '@oceanbase/design/es/progress';
+
+const App: React.FC = () => {
+  const [size, setSize] = useState<ProgressSize>('default');
+  return (
+    <>
+      <Space style={{ marginBottom: 16 }}>
+        Size:
+        <Radio.Group
+          value={size}
+          onChange={e => {
+            setSize(e.target.value);
+          }}
+        >
+          <Radio value="default">default</Radio>
+          <Radio value="small">small</Radio>
+        </Radio.Group>
+      </Space>
+      <Flex gap="small">
+        <Progress size={size} type="circle" percent={75} />
+        <Progress size={size} type="circle" percent={70} status="exception" />
+        <Progress size={size} type="circle" percent={100} />
+      </Flex>
+    </>
+  );
+};
+
+export default App;
diff --git a/packages/design/src/progress/demo/line.tsx b/packages/design/src/progress/demo/line.tsx
new file mode 100644
index 000000000..2017ee035
--- /dev/null
+++ b/packages/design/src/progress/demo/line.tsx
@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { Flex, Radio, Progress, Space } from '@oceanbase/design';
+import type { ProgressSize } from '@oceanbase/design/es/progress';
+
+const App: React.FC = () => {
+  const [size, setSize] = useState<ProgressSize>('default');
+  return (
+    <>
+      <Space style={{ marginBottom: 16 }}>
+        Size:
+        <Radio.Group
+          value={size}
+          onChange={e => {
+            setSize(e.target.value);
+          }}
+        >
+          <Radio value="default">default</Radio>
+          <Radio value="small">small</Radio>
+        </Radio.Group>
+      </Space>
+      <Flex gap="small" vertical>
+        <Progress size={size} percent={30} />
+        <Progress size={size} percent={50} status="active" />
+        <Progress size={size} percent={70} status="exception" />
+        <Progress size={size} percent={100} />
+      </Flex>
+    </>
+  );
+};
+
+export default App;
diff --git a/packages/design/src/progress/demo/steps.tsx b/packages/design/src/progress/demo/steps.tsx
new file mode 100644
index 000000000..f4e33dcd5
--- /dev/null
+++ b/packages/design/src/progress/demo/steps.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Flex, Progress, theme } from '@oceanbase/design';
+
+const App: React.FC = () => {
+  const { token } = theme.useToken();
+  return (
+    <Flex gap="small" vertical>
+      <Progress percent={30} steps={3} />
+      <Progress percent={50} steps={5} />
+      <Progress percent={100} steps={5} size="small" strokeColor={token.colorSuccess} />
+      <Progress
+        percent={60}
+        steps={5}
+        strokeColor={[token.colorSuccess, token.colorSuccess, token.colorError]}
+      />
+    </Flex>
+  );
+};
+
+export default App;
diff --git a/packages/design/src/progress/index.md b/packages/design/src/progress/index.md
new file mode 100644
index 000000000..c9c7be731
--- /dev/null
+++ b/packages/design/src/progress/index.md
@@ -0,0 +1,24 @@
+---
+title: Progress 进度条
+nav:
+  title: 基础组件
+  path: /components
+demo:
+  cols: 2
+---
+
+- 🔥 完全继承 antd [Progress](https://ant.design/components/progress-cn) 的能力和 API，可无缝切换。
+- 💄 定制主题和样式，符合 OceanBase Design 设计规范。
+
+## 代码演示
+
+<!-- prettier-ignore -->
+<code src="./demo/line.tsx" title="进度条"></code>
+<code src="./demo/circle.tsx" title="圆形进度条"></code>
+<code src="./demo/steps.tsx" title="步骤进度条"></code>
+<code src="./demo/circle-steps.tsx" title="圆形步骤进度条"></code>
+<code src="./demo/cicle-micro.tsx" title="圆形小型进度条" description="当圆形进度条 `width <= 20` 的时候，进度信息会以 Tooltip 的形式展示。"></code>
+
+## API
+
+- 详见 antd Progress 文档: https://ant.design/components/progress-cn
diff --git a/packages/design/src/progress/index.ts b/packages/design/src/progress/index.ts
index 355ab58cf..ad13bc6ca 100644
--- a/packages/design/src/progress/index.ts
+++ b/packages/design/src/progress/index.ts
@@ -1 +1,2 @@
+export * from 'antd/es/progress/progress';
 export * from 'antd/es/progress';
diff --git a/packages/design/src/progress/progress.ts b/packages/design/src/progress/progress.ts
new file mode 100644
index 000000000..645c94135
--- /dev/null
+++ b/packages/design/src/progress/progress.ts
@@ -0,0 +1 @@
+export * from 'antd/es/progress/progress';
diff --git a/packages/design/src/switch/demo/text.tsx b/packages/design/src/switch/demo/text.tsx
index b23b24ecf..f8bcf88a7 100644
--- a/packages/design/src/switch/demo/text.tsx
+++ b/packages/design/src/switch/demo/text.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
+import { CheckOutlined, CloseOutlined } from '@oceanbase/icons';
 import { Space, Switch } from '@oceanbase/design';
 
 const App: React.FC = () => (
diff --git a/packages/design/src/switch/index.md b/packages/design/src/switch/index.md
index a31684b86..e98440b7c 100644
--- a/packages/design/src/switch/index.md
+++ b/packages/design/src/switch/index.md
@@ -8,7 +8,7 @@ demo:
 ---
 
 - 🔥 完全继承 antd [Switch](https://ant.design/components/switch-cn) 的能力和 API，可无缝切换。
-- 💄 定制主题和样式，符合 OceanBase Design 设计规范，比如总是展示上下箭头。
+- 💄 定制主题和样式，符合 OceanBase Design 设计规范。
 
 ## 代码演示