feat: New component Bubble (#19)

* fix: fix * feat: 🔥 New Component: Chatbox * fix: fix * fix: fix * fix: fix * fix: fix * docs: update cover * fix: fix * fix: fix * fix: fix * fix: fix * fix: fix * fix: fix * fix: fix * fix: fix * chore: rename to Bubble * fix: fix * fix: fix * fix: fix * refactor: avatarProps * docs: all use avatarProps * chore: simplify * test: update snapshot * demo: simplify * chore: fix lint * chore: continue typing * test: update snapshot * chore: fix lint * docs: update demo --------- Co-authored-by: 二货机器人 <smith3816@gmail.com>
ant-design · Aug 2, 2024 · 650b3c0 · 650b3c0
1 parent 41c0762
commit 650b3c0
Show file tree

Hide file tree

Showing 62 changed files with 1,691 additions and 428 deletions.
diff --git a/.dumi/components/SemanticPreview.tsx b/.dumi/components/SemanticPreview.tsx
@@ -5,64 +5,66 @@ import classnames from 'classnames';
 
 const MARK_BORDER_SIZE = 2;
 
-const useStyle = createStyles(({ token }, markPos: [number, number, number, number]) => ({
-  container: css`
-    position: relative;
-  `,
-  colWrap: css`
-    border-right: 1px solid ${token.colorBorderSecondary};
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: ${token.paddingMD}px;
-    overflow: hidden;
-  `,
-  listWrap: css`
-    display: flex;
-    flex-direction: column;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-  `,
-  listItem: css`
-    cursor: pointer;
-    padding: ${token.paddingSM}px;
-    transition: background-color ${token.motionDurationFast} ease;
-    &:hover {
-      background-color: ${token.controlItemBgHover};
-    }
-    &:not(:first-of-type) {
-      border-top: 1px solid ${token.colorBorderSecondary};
-    }
-  `,
-  marker: css`
-    position: absolute;
-    border: ${MARK_BORDER_SIZE}px solid ${token.colorWarning};
-    box-sizing: border-box;
-    z-index: 999999;
-    box-shadow: 0 0 0 1px #fff;
-    pointer-events: none;
-    left: ${markPos[0] - MARK_BORDER_SIZE}px;
-    top: ${markPos[1] - MARK_BORDER_SIZE}px;
-    width: ${markPos[2] + MARK_BORDER_SIZE * 2}px;
-    height: ${markPos[3] + MARK_BORDER_SIZE * 2}px;
-  `,
-  markerActive: css`
-    opacity: 1;
-  `,
-  markerNotActive: css`
-    opacity: 0;
-  `,
-  markerMotion: css`
-    transition:
-      opacity ${token.motionDurationSlow} ease,
-      all ${token.motionDurationSlow} ease;
-  `,
-  markerNotMotion: css`
-    transition: opacity ${token.motionDurationSlow} ease;
-  `,
-}));
+const useStyle = createStyles(
+  ({ token }, markPos: [number, number, number, number]) => ({
+    container: css`
+      position: relative;
+    `,
+    colWrap: css`
+      border-right: 1px solid ${token.colorBorderSecondary};
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: ${token.paddingMD}px;
+      overflow: hidden;
+    `,
+    listWrap: css`
+      display: flex;
+      flex-direction: column;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+    `,
+    listItem: css`
+      cursor: pointer;
+      padding: ${token.paddingSM}px;
+      transition: background-color ${token.motionDurationFast} ease;
+      &:hover {
+        background-color: ${token.controlItemBgHover};
+      }
+      &:not(:first-of-type) {
+        border-top: 1px solid ${token.colorBorderSecondary};
+      }
+    `,
+    marker: css`
+      position: absolute;
+      border: ${MARK_BORDER_SIZE}px solid ${token.colorWarning};
+      box-sizing: border-box;
+      z-index: 999999;
+      box-shadow: 0 0 0 1px #fff;
+      pointer-events: none;
+      left: ${markPos[0] - MARK_BORDER_SIZE}px;
+      top: ${markPos[1] - MARK_BORDER_SIZE}px;
+      width: ${markPos[2] + MARK_BORDER_SIZE * 2}px;
+      height: ${markPos[3] + MARK_BORDER_SIZE * 2}px;
+    `,
+    markerActive: css`
+      opacity: 1;
+    `,
+    markerNotActive: css`
+      opacity: 0;
+    `,
+    markerMotion: css`
+      transition:
+        opacity ${token.motionDurationSlow} ease,
+        all ${token.motionDurationSlow} ease;
+    `,
+    markerNotMotion: css`
+      transition: opacity ${token.motionDurationSlow} ease;
+    `,
+  }),
+);
 
 export interface SemanticPreviewProps {
   semantics: { name: string; desc: string; version?: string }[];
@@ -101,14 +103,18 @@ const SemanticPreview: React.FC<SemanticPreviewProps> = (props) => {
 
   const [positionMotion, setPositionMotion] = React.useState<boolean>(false);
   const [hoverSemantic, setHoverSemantic] = React.useState<string | null>(null);
-  const [markPos, setMarkPos] = React.useState<[number, number, number, number]>([0, 0, 0, 0]);
+  const [markPos, setMarkPos] = React.useState<
+    [number, number, number, number]
+  >([0, 0, 0, 0]);
 
   const { styles } = useStyle(markPos);
 
   React.useEffect(() => {
     if (hoverSemantic) {
       const targetClassName = getMarkClassName(hoverSemantic);
-      const targetElement = containerRef.current?.querySelector<HTMLElement>(`.${targetClassName}`);
+      const targetElement = containerRef.current?.querySelector<HTMLElement>(
+        `.${targetClassName}`,
+      );
       const containerRect = containerRef.current?.getBoundingClientRect();
       const targetRect = targetElement?.getBoundingClientRect();
       setMarkPos([
@@ -137,7 +143,9 @@ const SemanticPreview: React.FC<SemanticPreviewProps> = (props) => {
     <div className={classnames(styles.container)} ref={containerRef}>
       <Row style={{ minHeight: height }}>
         <Col span={16} className={classnames(styles.colWrap)}>
-          <ConfigProvider theme={{ token: { motion: false } }}>{cloneNode}</ConfigProvider>
+          <ConfigProvider theme={{ token: { motion: false } }}>
+            {cloneNode}
+          </ConfigProvider>
         </Col>
         <Col span={8}>
           <ul className={classnames(styles.listWrap)}>
@@ -153,9 +161,13 @@ const SemanticPreview: React.FC<SemanticPreviewProps> = (props) => {
                     <Typography.Title level={5} style={{ margin: 0 }}>
                       {semantic.name}
                     </Typography.Title>
-                    {semantic.version && <Tag color="blue">{semantic.version}</Tag>}
+                    {semantic.version && (
+                      <Tag color="blue">{semantic.version}</Tag>
+                    )}
                   </Flex>
-                  <Typography.Paragraph style={{ margin: 0, fontSize: token.fontSizeSM }}>
+                  <Typography.Paragraph
+                    style={{ margin: 0, fontSize: token.fontSizeSM }}
+                  >
                     {semantic.desc}
                   </Typography.Paragraph>
                 </Flex>

diff --git a/.dumi/pages/index/components/Theme/index.tsx b/.dumi/pages/index/components/Theme/index.tsx
@@ -481,7 +481,7 @@ const Theme: React.FC = () => {
             <div className={styles.logo}>
               <div className={styles.logoImg}>
                 <img
-                  src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+                  src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*1SDwSrOnSakAAAAAAAAAAAAADgCCAQ/original"
                   style={{
                     filter:
                       closestColor === DEFAULT_COLOR

diff --git a/.dumi/preset/components-changelog-cn.json b/.dumi/preset/components-changelog-cn.json
@@ -1 +1 @@
-{"ChatBox":[]}
+{"Bubble":[]}
diff --git a/.dumi/preset/components-changelog-en.json b/.dumi/preset/components-changelog-en.json
@@ -1 +1 @@
-{"ChatBox":[]}
+{"Bubble":[]}
diff --git a/.dumi/theme/common/Loading.tsx b/.dumi/theme/common/Loading.tsx
@@ -12,7 +12,7 @@ const Loading: React.FC = () => {
     return (
       <div style={{ maxWidth: '70vw', width: '100%', margin: '80px auto 0', textAlign: 'center' }}>
         <img
-          src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+          src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*1SDwSrOnSakAAAAAAAAAAAAADgCCAQ/original"
           width={40}
           alt="loading"
           style={{ marginBottom: 24, filter: 'grayscale(1)', opacity: 0.33 }}

diff --git a/.dumi/theme/slots/Header/Logo.tsx b/.dumi/theme/slots/Header/Logo.tsx
@@ -56,7 +56,7 @@ const Logo: React.FC<LogoProps> = ({ isZhCN }) => {
     <h1>
       <Link to={utils.getLocalizedPathname('/', isZhCN, search)} className={styles.logo}>
         <img
-          src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+          src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*1SDwSrOnSakAAAAAAAAAAAAADgCCAQ/original"
           height={32}
           width={32}
           alt="logo"

diff --git a/.prettierrc b/.prettierrc
@@ -3,6 +3,7 @@
   "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
+  "printWidth": 100,
   "trailingComma": "all",
   "jsxSingleQuote": false
 }
diff --git a/README-zh_CN.md b/README-zh_CN.md
@@ -1,8 +1,8 @@
 <div align="center"><a name="readme-top"></a>
 
-<img height="180" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
+<img height="180" src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*1SDwSrOnSakAAAAAAAAAAAAADgCCAQ/original">
 
-<h1>Ant Design</h1>
+<h1>Ant Design X</h1>
 
 一套企业级 UI 设计语言和 React 组件库。
 

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 <div align="center"><a name="readme-top"></a>
 
-<img height="180" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
+<img height="180" src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*1SDwSrOnSakAAAAAAAAAAAAADgCCAQ/original">
 
 <h1>Ant Design</h1>
 

diff --git a/components/_util/getPrefixCls.ts b/components/_util/getPrefixCls.ts
@@ -0,0 +1,10 @@
+export const defaultPrefixCls = 'ant';
+
+const getPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
+  if (customizePrefixCls) {
+    return customizePrefixCls;
+  }
+  return suffixCls ? `${defaultPrefixCls}-${suffixCls}` : defaultPrefixCls;
+};
+
+export default getPrefixCls;
diff --git a/components/_util/type.ts b/components/_util/type.ts
@@ -0,0 +1 @@
+export type AnyObject = Record<PropertyKey, any>;
diff --git a/components/_util/warning.ts b/components/_util/warning.ts
@@ -44,7 +44,6 @@ export interface WarningContextProps {
   /**
    * @descCN 设置警告等级，设置 `false` 时会将废弃相关信息聚合为单条信息。
    * @descEN Set the warning level. When set to `false`, discard related information will be aggregated into a single message.
-   * @since 5.10.0
    */
   strict?: boolean;
 }
@@ -71,6 +70,7 @@ export const devUseWarning: (component: string) => TypeWarning =
               }
 
               deprecatedWarnList[component] = deprecatedWarnList[component] || [];
+
               if (!deprecatedWarnList[component].includes(message || '')) {
                 deprecatedWarnList[component].push(message || '');
               }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type AnyObject = Record<PropertyKey, any>;