refactor: 💡 rename

docs/index.mdx

@@ -0,0 +1,136 @@
+---
+pageType: home
+
+hero:
+  name: ProFormily
+  text: Pro Formily, 启动!
+  tagline: ProFormily tagline
+  actions:
+    - theme: brand
+      text: Quick Start
+      link: /pro-table/
+    - theme: alt
+      text: Github
+      link: https://github.com/web-infra-dev/rspress
+  image:
+    src: /rspress-icon.png
+    alt: ProFormily Logo
+features:
+  - title: Blazing fast build speed
+    details: The core compilation module is based on the Rust front-end toolchain, providing a more ultimate development experience.
+    icon: 🏃🏻‍♀️
+  - title: Support for MDX content writing
+    details: MDX is a powerful way to write content, allowing you to use React components in Markdown.
+    icon: 📦
+  - title: Providing multiple custom capabilities
+    details: Through its extension mechanism, you can easily extend theme UI and build process.
+    icon: 🔥
+---
+```tsx
+/**
+ * inline: true
+ */
+import React from 'react';
+import {Overview} from 'proformily';
+
+// const prefix = process.env.NODE_ENV === 'development' ? '/components' : '/fireformily/components';
+// const prefixPro = process.env.NODE_ENV === 'development' ? '/pro' : '/fireformily/pro';
+const prefix = ''
+
+const groups = [
+  // {
+  //   title: '优雅阅读态组件',
+  //   prefix,
+  //   children: [
+  //     {
+  //       title: 'Dict',
+  //       subtitle: '远程词典',
+  //       cover: 'https://gw.alipayobjects.com/zos/antfincdn/AwU0Cv%26Ju/bianzu%2525208.svg',
+  //       link: '/dict'
+  //     },
+  //     {
+  //       title: 'ImageView',
+  //       subtitle: '图片查看',
+  //       cover: 'https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg',
+  //       link: '/image-view'
+  //     },
+  //     {
+  //       title: 'LongText',
+  //       subtitle: '长文本',
+  //       cover: 'https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg',
+  //       link: '/long-text'
+  //     },
+  //   ],
+  // },
+  {
+    title: '专业级组件',
+    prefix,
+    children: [
+      {
+        title: 'ArrayTablePro',
+        subtitle: '专业列表',
+        cover: 'https://gw.alipayobjects.com/zos/antfincdn/AwU0Cv%26Ju/bianzu%2525208.svg',
+        link: '/pro-table'
+      },
+      // {
+      //   title: 'QueryList',
+      //   subtitle: '查询列表',
+      //   cover: 'https://gw.alipayobjects.com/zos/antfincdn/AwU0Cv%26Ju/bianzu%2525208.svg',
+      //   link: '/query-list'
+      // },
+      // {
+      //   title: 'PopActions',
+      //   subtitle: '弹窗动作表单',
+      //   cover: 'https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg',
+      //   link: '/pop-actions'
+      // },
+      // {
+      //   title: 'Linkage',
+      //   subtitle: '级联选择',
+      //   cover: 'https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg',
+      //   link: '/linkage'
+      // },
+      // {
+      //   title: 'Suggestion',
+      //   subtitle: '搜索建议',
+      //   cover: 'https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg',
+      //   link: '/suggestion'
+      // },
+      // {
+      //   title: 'TreeNodes',
+      //   subtitle: '节点树',
+      //   cover: 'https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg',
+      //   link: '/tree-nodes'
+      // },
+    ]
+  },
+  // {
+  // title: '最佳实践',
+  // prefix: prefixPro,
+  // children: [
+  //   {
+  //     title: 'Dict',
+  //     subtitle: '远程词典',
+  //     cover: 'https://gw.alipayobjects.com/zos/antfincdn/AwU0Cv%26Ju/bianzu%2525208.svg',
+  //     link: '/dict'
+  //   },
+  //   {
+  //     title: 'TreeBase',
+  //     subtitle: '基础树',
+  //     cover: 'https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg',
+  //     link: '/tree-base'
+  //   },
+  //   {
+  //     title: '响应式编程 in React',
+  //     subtitle: 'useLive',
+  //     cover: 'https://gw.alipayobjects.com/zos/alicdn/kegYxl1wj/ConfigProvider.svg',
+  //     link: '/live'
+  //   },
+    // ],
+  // },
+];
+
+export default () => {
+  return <Overview groups={groups} />
+}
+```

docs/pro-table/index.mdx

@@ -1,6 +1,3 @@
 # ProTable
 
-import Table1 from './demos/Table1';
-export default () => {
-  return <Table1 ></Table1>
-}
+<code src="./demos/Table1.tsx" direction="vertical" />

package.json

@@ -32,6 +32,7 @@
     "rspress": "^1.9.3"
   },
   "devDependencies": {
+    "@rspress/plugin-playground": "^1.9.3",
     "@types/node": "^16.18.70"
   }
 }

rspress.config.ts

@@ -1,5 +1,5 @@
 import * as path from "path";
-import { pluginPreview } from "@rspress/plugin-preview";
+import { pluginPlayground } from "@rspress/plugin-playground";
 import { defineConfig } from "rspress/config";
 import RsBuildConfig from "./rsbuild.config";
 
@@ -17,7 +17,7 @@ export default defineConfig({
   builderConfig: {
     ...RsBuildConfig,
   },
-  plugins: [pluginPreview()],
+  plugins: [pluginPlayground()],
   themeConfig: {
     socialLinks: [
       {

src/index.ts

@@ -1,2 +1,4 @@
-export * from "./pro-array-table";
-export * from "./pro-array-table/features/hooks";
+export * from "./array-table-pro";
+export * from "./array-table-pro/features/hooks";
+
+export { Overview } from "./overview";

src/overview/index.tsx

@@ -0,0 +1,78 @@
+import { Card, Col, Divider, Row, Space, Tag, Typography } from "antd";
+import React from "react";
+import "./overview.less";
+
+const { Title } = Typography;
+
+export const Overview = (props: {
+  groups: {
+    title: string;
+    prefix: string;
+    children: {
+      filename: string;
+      title: string;
+      subtitle: string;
+      cover: string;
+      link: string;
+      tag: string;
+    }[];
+  }[];
+}) => {
+  const { groups } = props;
+  return (
+    <section className="markdown">
+      <Divider />
+      {groups.map((group) => {
+        const components = group.children;
+        return components.length ? (
+          <div key={group.title} className="components-overview">
+            <Title level={2} className="components-overview-group-title">
+              <Space align="center">
+                {group.title}
+                <Tag style={{ display: "block" }}>{components.length}</Tag>
+              </Space>
+            </Title>
+            <Row gutter={[24, 24]}>
+              {components.map((component) => {
+                const uri = `${group.prefix}/${component.link}`.replace(
+                  "//",
+                  "/",
+                );
+
+                return (
+                  <Col xs={24} sm={12} lg={8} xl={6} key={component.title}>
+                    <a
+                      style={{
+                        textDecoration: "none",
+                      }}
+                      href={uri}
+                    >
+                      <Card
+                        bodyStyle={{
+                          backgroundRepeat: "no-repeat",
+                          backgroundPosition: "bottom right",
+                          backgroundImage: `url(${component.tag})`,
+                        }}
+                        size="small"
+                        className="components-overview-card"
+                        title={
+                          <div className="components-overview-title">
+                            {component.title} {component.subtitle}
+                          </div>
+                        }
+                      >
+                        <div className="components-overview-img">
+                          <img src={component.cover} alt={component.title} />
+                        </div>
+                      </Card>
+                    </a>
+                  </Col>
+                );
+              })}
+            </Row>
+          </div>
+        ) : null;
+      })}
+    </section>
+  );
+};

src/overview/overview.less

@@ -0,0 +1,52 @@
+
+.components-overview {
+  padding: 0;
+
+  &-group-title {
+    margin-bottom: 24px !important;
+  }
+
+  a:hover {
+    text-decoration: none;
+  }
+
+  &-title {
+    overflow: hidden;
+    color: black;
+    text-overflow: ellipsis;
+  }
+
+  &-img {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 152px;
+  }
+
+  &-card {
+    cursor: pointer;
+    transition: all 0.5s;
+
+    &:hover {
+      box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
+  0 12px 48px 16px rgba(0, 0, 0, 0.03);
+    }
+  }
+}
+
+.components-overview-search.ant-input-affix-wrapper {
+  width: 100%;
+  padding: 0;
+  font-size: 20px;
+  border: 0;
+  box-shadow: none;
+
+  input {
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 20px;
+  }
+
+  .anticon {
+    color: #bbb;
+  }
+}

tsconfig.json

@@ -1,20 +1,20 @@
 {
-	"compilerOptions": {
-		"target": "ES2020",
-		"lib": ["DOM", "ES2020"],
-		"module": "ESNext",
-		"jsx": "react-jsx",
-		"allowSyntheticDefaultImports": true,
-		"strict": true,
-		"baseUrl": ".",
-		"skipLibCheck": true,
-		"isolatedModules": true,
-		"resolveJsonModule": true,
-		"declaration": true,
-		"moduleResolution": "Bundler",
-		"paths": {
-			"proformily": ["./src"]
-		}
-	},
-	"include": ["src", "docs"]
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "baseUrl": ".",
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "moduleResolution": "node",
+    "paths": {
+      "proformily": ["./src"]
+    }
+  },
+  "include": ["src", "docs"]
 }