Merge branch 'master' of github.com:oceanbase/oceanbase-design into d…

…ependabot/npm_and_yarn/father-4.3.5

.dumi/theme/layouts/GlobalLayout.tsx

@@ -9,6 +9,7 @@ import { App, theme as obTheme } from '@oceanbase/design';
 import type { DirectionType } from '@oceanbase/design/es/config-provider';
 import { usePrefersColor, createSearchParams, useOutlet, useSearchParams } from 'dumi';
 import React, { useCallback, useEffect, useMemo } from 'react';
+import { Analytics } from '@vercel/analytics/react';
 import useLayoutState from '../../hooks/useLayoutState';
 import SiteThemeProvider from '../SiteThemeProvider';
 import useLocation from '../../hooks/useLocation';
@@ -135,6 +136,7 @@ const GlobalLayout: React.FC = () => {
                 onChange={nextTheme => updateSiteConfig({ theme: nextTheme })}
               />
             )}
+            <Analytics />
           </App>
         </SiteThemeProvider>
       </SiteContext.Provider>

.dumirc.ts

@@ -145,6 +145,7 @@ export default defineConfig({
           children: [
             { title: 'BasicLayout 导航和布局', link: '/biz-components/basic-layout' },
             { title: 'PageContainer 页容器', link: '/biz-components/page-container' },
+            { title: 'Login 登录页', link: '/biz-components/login' },
             // { title: 'NavMenu', link: '/biz-components/nav-menu' },
             { title: 'Welcome 欢迎页', link: '/biz-components/welcome' },
           ],

package.json

@@ -55,12 +55,13 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.4",
+    "@types/jest": "^29.5.5",
     "@types/lodash": "^4.14.199",
     "@types/node": "^20.6.2",
     "@types/react": "^18.2.25",
     "@umijs/fabric": "^4.0.1",
     "@umijs/test": "^4.0.79",
+    "@vercel/analytics": "^1.1.1",
     "antd": "^5.9.0",
     "antd-style": "^3.5.0",
     "antd-token-previewer": "^1.1.0",
@@ -70,14 +71,14 @@
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.10",
     "dumi": "^2.2.12",
-    "eslint-plugin-jest": "^27.2.3",
+    "eslint-plugin-jest": "^27.4.2",
     "execa": "^5.1.1",
     "father": "^4.3.5",
     "fs-extra": "^11.1.1",
     "gh-pages": "^5.0.0",
     "html2sketch": "^1.0.2",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.6.4",
+    "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",

packages/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/codemod",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Codemod for OceanBase Design upgrade",
   "keywords": [
     "oceanbase",
@@ -39,7 +39,7 @@
     "yargs-parser": "^21.1.1"
   },
   "devDependencies": {
-    "@types/jest": "^29.2.3",
+    "@types/jest": "^29.5.5",
     "@types/jscodeshift": "^0.11.7",
     "enzyme": "^3.0.0",
     "enzyme-to-json": "^3.6.2"

packages/design/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/design",
-  "version": "0.2.20",
+  "version": "0.2.21",
   "description": "The Design System of OceanBase",
   "keywords": [
     "oceanbase",

packages/design/src/card/index.tsx

@@ -5,9 +5,8 @@ import type {
   CardTabListType as AntCardTabListType,
 } from 'antd/es/card';
 import classNames from 'classnames';
-import React, { useContext, useRef, useState } from 'react';
+import React, { useContext } from 'react';
 import ConfigProvider from '../config-provider';
-import useInkBar from '../tabs/hooks/useInkBar';
 import useStyle from './style';
 
 export * from 'antd/es/card/Card';
@@ -27,10 +26,6 @@ const Card = ({
   children,
   divided = true,
   tabList,
-  activeTabKey,
-  defaultActiveTabKey,
-  onTabChange,
-  tabProps,
   prefixCls: customizePrefixCls,
   className,
   ...restProps
@@ -46,8 +41,6 @@ const Card = ({
     className
   );
 
-  const ref = useRef<HTMLDivElement>();
-
   const newTabList = tabList?.map(item => {
     if (!isNullValue(item.tag)) {
       return {
@@ -65,34 +58,8 @@ const Card = ({
     return item;
   });
 
-  const [activeKey, setActiveKey] = useState(
-    activeTabKey || defaultActiveTabKey || newTabList?.[0]?.key
-  );
-
-  useInkBar({
-    prefixCls: tabsPrefixCls,
-    activeKey,
-    size: tabProps?.size,
-    type: tabProps?.type,
-    tabPosition: tabProps?.tabPosition,
-    containerRef: ref,
-  });
-
   return wrapSSR(
-    <AntCard
-      ref={ref}
-      tabList={newTabList}
-      defaultActiveTabKey={defaultActiveTabKey}
-      activeTabKey={activeTabKey}
-      onTabChange={key => {
-        setActiveKey(key);
-        onTabChange?.(key);
-      }}
-      tabProps={tabProps}
-      prefixCls={customizePrefixCls}
-      className={cardCls}
-      {...restProps}
-    >
+    <AntCard tabList={newTabList} prefixCls={customizePrefixCls} className={cardCls} {...restProps}>
       {children}
     </AntCard>
   );

packages/design/src/config-provider/index.tsx

@@ -28,6 +28,8 @@ export type SpinConfig = ComponentStyleConfig & {
 };
 
 export interface ConfigConsumerProps extends AntConfigConsumerProps {
+  theme?: ThemeConfig;
+  navigate?: NavigateFunction;
   spin?: SpinConfig;
 }
 
@@ -50,14 +52,28 @@ const ExtendedConfigContext = React.createContext<ExtendedConfigConsumerProps>({
 
 const { defaultSeed, components } = defaultTheme;
 
-const ConfigProvider = ({ children, theme, navigate, spin, ...restProps }: ConfigProviderProps) => {
+const ConfigProvider = ({
+  children,
+  theme,
+  navigate,
+  spin,
+  tabs,
+  ...restProps
+}: ConfigProviderProps) => {
   // inherit from parent ConfigProvider
   const parentContext = React.useContext<ConfigConsumerProps>(AntConfigProvider.ConfigContext);
   const parentExtendedContext =
     React.useContext<ExtendedConfigConsumerProps>(ExtendedConfigContext);
   return (
     <AntConfigProvider
       spin={merge(parentContext.spin, spin)}
+      tabs={merge(
+        {
+          indicatorSize: origin => (origin >= 24 ? origin - 16 : origin),
+        },
+        parentContext.tabs,
+        tabs
+      )}
       theme={merge(
         {
           // Only set seed token for dark theme

packages/design/src/tabs/index.tsx

@@ -1,14 +1,12 @@
 import { isNullValue } from '@oceanbase/util';
 import { Space, Tabs as AntTabs, Tag } from 'antd';
-import React, { useState, useRef, useContext } from 'react';
+import React, { useContext } from 'react';
 import type { TabsProps as AntTabsProps, TabsPosition as AntTabsPosition } from 'antd/es/tabs';
 import type { Tab as AntTab } from 'rc-tabs/es/interface';
 import classNames from 'classnames';
 import ConfigProvider from '../config-provider';
-import useInkBar from './hooks/useInkBar';
 import useLegacyItems from './hooks/useLegacyItems';
 import useStyle from './style';
-import { useUpdateEffect } from 'ahooks';
 import TabPane from './TabPane';
 
 export * from 'antd/es/tabs';
@@ -28,10 +26,6 @@ export type TabsPosition = AntTabsPosition;
 const Tabs = ({
   children,
   items,
-  defaultActiveKey,
-  activeKey: activeKeyProp,
-  onChange,
-  size,
   type,
   tabPosition,
   prefixCls: customizePrefixCls,
@@ -43,7 +37,6 @@ const Tabs = ({
   const { wrapSSR } = useStyle(prefixCls);
   const tabsCls = classNames(className);
 
-  const ref = useRef<HTMLDivElement>();
   const isHorizontal = !tabPosition || tabPosition === 'top' || tabPosition === 'bottom';
 
   let newItems = items?.map(item => {
@@ -65,39 +58,9 @@ const Tabs = ({
 
   newItems = useLegacyItems(newItems, children, prefixCls);
 
-  const [activeKey, setActiveKey] = useState(
-    activeKeyProp || defaultActiveKey || newItems?.[0]?.key
-  );
-
-  // 防止第一次顶掉默认值
-  useUpdateEffect(() => {
-    // 外部触发的 activeKey 更改，需要同步内部状态变化
-    if (activeKeyProp) {
-      setActiveKey(activeKeyProp);
-    }
-  }, [activeKeyProp]);
-
-  useInkBar({
-    prefixCls,
-    activeKey,
-    size,
-    type,
-    tabPosition,
-    containerRef: ref,
-  });
-
   return wrapSSR(
     <AntTabs
-      // @ts-ignore
-      ref={ref}
       items={newItems}
-      defaultActiveKey={defaultActiveKey}
-      activeKey={activeKey}
-      onChange={key => {
-        setActiveKey(key);
-        onChange?.(key);
-      }}
-      size={size}
       type={type}
       tabPosition={tabPosition}
       tabBarGutter={!type || type === 'line' ? (isHorizontal ? 24 : 0) : undefined}

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/ui",
-  "version": "0.2.21",
+  "version": "0.2.22",
   "description": "The UI library based on OceanBase Design",
   "keywords": [
     "oceanbase",

packages/ui/src/BasicLayout/Header.tsx

@@ -5,10 +5,10 @@ import {
   ReadFilled,
   UserOutlined,
 } from '@oceanbase/icons';
-import { Button, Dropdown, Menu, Modal, Space, Tooltip } from '@oceanbase/design';
+import { ConfigProvider, Button, Dropdown, Menu, Modal, Space, Tooltip } from '@oceanbase/design';
 import classNames from 'classnames';
 import moment from 'moment';
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import { OB_SITE_LINK } from '../constant';
 import type { Locale } from '../interface';
 import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
@@ -19,6 +19,8 @@ import zhCN from './locale/zh-CN';
 // @ts-ignore
 import logoImg from '../assets/logo/oceanbase_logo.svg';
 // @ts-ignore
+import logoImgDark from '../assets/logo/oceanbase_logo_dark.svg';
+// @ts-ignore
 // 自定义 SVG 图标需要将其导入为图片，而不能是 ReactComponent，因为需要依赖 webpack 插件
 // 虽然本地开发可以生效，但构建后的产物在上层项目中不会生效，导致 SVG 展示为空
 import UserSvg from '../assets/user.svg';
@@ -100,6 +102,7 @@ const Header: React.FC<HeaderProps> = ({
   langs,
   ...restProps
 }) => {
+  const { theme } = useContext(ConfigProvider.ConfigContext);
   const navigate = useNavigate();
   const [visible, setVisible] = useState(false);
   // 是否为欢迎页
@@ -281,7 +284,7 @@ const Header: React.FC<HeaderProps> = ({
                 <span className={`${prefix}-copyright`}>
                   {locale.right} <CopyrightOutlined /> {moment().year()} {locale.company}
                 </span>
-                <img src={logoImg} alt="" style={{ height: 12 }} />
+                <img src={theme.isDark ? logoImgDark : logoImg} alt="" style={{ height: 12 }} />
               </div>
             </div>
           </div>