merge master

.dumi/global.ts

@@ -0,0 +1,3 @@
+import { webVitals } from './vitals';
+
+webVitals({ debug: true });

.dumi/hooks/useLayoutState.ts

@@ -1,13 +1,11 @@
 import { startTransition, useState } from 'react';
 
-const useLayoutState = <S>(
-  ...args: Parameters<typeof useState<S>>
-): ReturnType<typeof useState<S>> => {
-  const [state, setState] = useState<S>(...args);
+const useLayoutState = <S>(args: S): ReturnType<typeof useState<S>> => {
+  const [state, setState] = useState<S>(args);
 
-  const setLayoutState: typeof setState = (...setStateArgs) => {
+  const setLayoutState: typeof setState = setStateArgs => {
     startTransition(() => {
-      setState(...setStateArgs);
+      setState(setStateArgs);
     });
   };
 

.dumi/theme/SiteThemeProvider.tsx

@@ -1,4 +1,5 @@
 import { ConfigProvider, token } from '@oceanbase/design';
+import type { ThemeConfig } from '@oceanbase/design';
 import { ChartProvider } from '@oceanbase/charts';
 import type { ThemeProviderProps } from 'antd-style';
 import { ThemeProvider } from 'antd-style';
@@ -8,7 +9,13 @@ import useLocale from '../hooks/useLocale';
 import SiteContext from './slots/SiteContext';
 import zhCN from '../../packages/design/src/locale/zh-CN';
 
-const SiteThemeProvider: FC<ThemeProviderProps> = ({ children, theme, ...rest }) => {
+const SiteThemeProvider: FC<
+  ThemeProviderProps<any> & {
+    theme: ThemeConfig & {
+      isDark?: boolean;
+    };
+  }
+> = ({ children, theme, ...rest }) => {
   const { getPrefixCls, iconPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const rootPrefixCls = getPrefixCls();
 
@@ -37,7 +44,7 @@ const SiteThemeProvider: FC<ThemeProviderProps> = ({ children, theme, ...rest })
     >
       <ConfigProvider
         {...rest}
-        theme={theme}
+        theme={theme as ThemeConfig}
         direction={direction}
         locale={lang === 'cn' ? zhCN : undefined}
       >

.dumi/theme/common/DirectionIcon.tsx

@@ -1,13 +1,14 @@
 import Icon from '@oceanbase/icons';
 import type { DirectionType } from '@oceanbase/design/es/config-provider';
 import React from 'react';
+import { Interpolation, Theme } from '@emotion/react';
 
 const ltrD =
   'M448 64l512 0 0 128-128 0 0 768-128 0 0-768-128 0 0 768-128 0 0-448c-123.712 0-224-100.288-224-224s100.288-224 224-224zM64 448l256 224-256 224z';
 const rtlD =
   'M256 64l512 0 0 128-128 0 0 768-128 0 0-768-128 0 0 768-128 0 0-448c-123.712 0-224-100.288-224-224s100.288-224 224-224zM960 896l-256-224 256-224z';
 
-const DirectionIcon: React.FC<{ direction: DirectionType }> = props => (
+const DirectionIcon: React.FC<{ direction: DirectionType; css: Interpolation<Theme> }> = props => (
   <Icon {...props}>
     <svg viewBox="0 0 1024 1024" fill="currentColor">
       <path d={props.direction === 'ltr' ? ltrD : rtlD} />

.dumi/theme/common/PrevAndNext.tsx

@@ -1,7 +1,7 @@
 import { LeftOutlined, RightOutlined } from '@oceanbase/icons';
 import { css } from '@emotion/react';
 import type { MenuProps } from '@oceanbase/design';
-import type { MenuItemType } from '@oceanbase/design/es/menu/hooks/useItems';
+import type { MenuItemType } from '@oceanbase/design/es/menu';
 import React, { useMemo } from 'react';
 import useMenu from '../../hooks/useMenu';
 import useSiteToken from '../../hooks/useSiteToken';

.dumi/theme/layouts/GlobalLayout.tsx

@@ -8,7 +8,9 @@ import {
 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 { IColorValue } from 'dumi/dist/client/theme-api/usePrefersColor';
 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';
@@ -69,9 +71,9 @@ const GlobalLayout: React.FC = () => {
           nextSearchParams = createSearchParams({
             ...nextSearchParams,
             theme: value.filter(t => t !== 'light'),
-          });
+          } as URLSearchParams & any);
           // Set theme of dumi site
-          setPrefersColor(value?.filter(t => t === 'dark' || t === 'light')?.[0]);
+          setPrefersColor(value?.filter(t => t === 'dark' || t === 'light')?.[0] as IColorValue);
         }
       });
 
@@ -92,7 +94,7 @@ const GlobalLayout: React.FC = () => {
 
     setSiteState({ theme: _theme, direction: _direction === 'rtl' ? 'rtl' : 'ltr' });
     // Set theme of dumi site
-    setPrefersColor(_theme?.filter(t => t === 'dark' || t === 'light')?.[0]);
+    setPrefersColor(_theme?.filter(t => t === 'dark' || t === 'light')?.[0] as IColorValue);
     // Handle isMobile
     updateMobileMode();
 
@@ -135,6 +137,7 @@ const GlobalLayout: React.FC = () => {
                 onChange={nextTheme => updateSiteConfig({ theme: nextTheme })}
               />
             )}
+            <Analytics />
           </App>
         </SiteThemeProvider>
       </SiteContext.Provider>

.dumi/vitals.ts

@@ -0,0 +1,56 @@
+/* ref: https://vercel.com/docs/speed-insights/api */
+import { getCLS, getFCP, getFID, getLCP, getTTFB } from 'web-vitals';
+
+const vitalsUrl = 'https://vitals.vercel-analytics.com/v1/vitals';
+
+function getConnectionSpeed() {
+  return 'connection' in navigator &&
+    navigator['connection'] &&
+    'effectiveType' in (navigator as any)['connection']
+    ? navigator['connection']['effectiveType']
+    : '';
+}
+
+function sendToAnalytics(metric, options) {
+  const analyticsId = process.env.VERCEL_ANALYTICS_ID;
+
+  const body = {
+    dsn: analyticsId,
+    id: metric.id,
+    page: window.location.pathname,
+    href: window.location.href,
+    event_name: metric.name,
+    value: metric.value.toString(),
+    speed: getConnectionSpeed(),
+  };
+
+  if (options.debug) {
+    console.log('[Analytics]', metric.name, JSON.stringify(body, null, 2));
+  }
+
+  const blob = new Blob([new URLSearchParams(body).toString()], {
+    // This content type is necessary for `sendBeacon`
+    type: 'application/x-www-form-urlencoded',
+  });
+  if (navigator.sendBeacon) {
+    navigator.sendBeacon(vitalsUrl, blob);
+  } else
+    fetch(vitalsUrl, {
+      body: blob,
+      method: 'POST',
+      credentials: 'omit',
+      keepalive: true,
+    });
+}
+
+export function webVitals(options) {
+  try {
+    getFID(metric => sendToAnalytics(metric, options));
+    getTTFB(metric => sendToAnalytics(metric, options));
+    getLCP(metric => sendToAnalytics(metric, options));
+    getCLS(metric => sendToAnalytics(metric, options));
+    getFCP(metric => sendToAnalytics(metric, options));
+  } catch (err) {
+    console.error('[Analytics]', err);
+  }
+}

.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' },
           ],
@@ -160,6 +161,10 @@ export default defineConfig({
           title: '其他',
           children: [
             { title: 'Action 操作项', link: '/biz-components/action' },
+            {
+              title: 'ContentWithQuestion 问号旁提示',
+              link: '/biz-components/content-with-question',
+            },
             {
               title: 'ContentWithIcon 文字旁提示',
               link: '/biz-components/content-with-icon',

.github/dependabot.yml

@@ -14,3 +14,5 @@ updates:
       - dependency-name: "@antv/g6"
       # execa latest 7.x works only in ES module
       - dependency-name: "execa"
+      # execa latest 5.x works only in ES module
+      - dependency-name: "chalk"

package.json

@@ -39,10 +39,10 @@
   },
   "devDependencies": {
     "@ant-design/colors": "^7.0.0",
-    "@ant-design/cssinjs": "^1.17.0",
+    "@ant-design/cssinjs": "^1.17.2",
     "@ant-design/icons": "^5.2.6",
-    "@babel/cli": "^7.22.15",
-    "@babel/preset-env": "^7.22.20",
+    "@babel/cli": "^7.23.0",
+    "@babel/preset-env": "^7.23.2",
     "@ctrl/tinycolor": "^4.0.2",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/css": "^11.11.2",
@@ -51,65 +51,68 @@
     "@chenshuai2144/less2cssinjs": "^1.0.7",
     "@qixian.cs/github-contributors-list": "^1.1.0",
     "@stackblitz/sdk": "^1.9.0",
-    "@testing-library/dom": "^9.3.1",
-    "@testing-library/jest-dom": "^6.1.2",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
     "@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/node": "^20.6.2",
-    "@types/react": "^18.2.21",
+    "@types/jest": "^29.5.5",
+    "@types/lodash": "^4.14.199",
+    "@types/node": "^20.8.6",
+    "@types/react": "^18.2.28",
     "@umijs/fabric": "^4.0.1",
-    "@umijs/test": "^4.0.79",
-    "antd": "^5.9.0",
+    "@umijs/test": "^4.0.86",
+    "@vercel/analytics": "^1.1.1",
+    "antd": "^5.10.1",
     "antd-style": "^3.5.0",
     "antd-token-previewer": "^1.1.0",
-    "babel-jest": "^29.6.4",
+    "babel-jest": "^29.7.0",
     "classnames": "^2.3.2",
     "copy-to-clipboard": "^3.3.3",
     "cross-env": "^7.0.3",
-    "dayjs": "^1.11.9",
-    "dumi": "^2.2.10",
-    "eslint-plugin-jest": "^27.2.3",
+    "dayjs": "^1.11.10",
+    "dumi": "^2.2.13",
+    "eslint-plugin-jest": "^27.4.2",
     "execa": "^5.1.1",
-    "father": "^4.3.1",
+    "father": "^4.3.5",
     "fs-extra": "^11.1.1",
-    "gh-pages": "^5.0.0",
+    "gh-pages": "^6.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",
     "jest-svg-transformer": "^1.0.0",
     "jsonml-to-react-element": "^1.1.11",
     "jsonml.js": "^0.1.0",
-    "lerna": "^7.2.0",
+    "lerna": "^7.3.1",
     "lint-staged": "^14.0.1",
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
     "mockdate": "^3.0.5",
     "prettier": "^3.0.3",
     "prismjs": "^1.29.0",
     "rc-checkbox": "^3.1.0",
-    "rc-drawer": "^6.4.1",
+    "rc-drawer": "^6.5.2",
     "rc-footer": "^0.6.8",
-    "rc-tabs": "^12.12.1",
-    "rc-util": "^5.37.0",
+    "rc-tabs": "^12.13.1",
+    "rc-util": "^5.38.0",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
-    "react-fast-marquee": "^1.6.0",
-    "react-intl": "^6.4.7",
-    "react-router-dom": "^6.15.0",
+    "react-fast-marquee": "^1.6.2",
+    "react-intl": "^6.5.0",
+    "react-router-dom": "^6.17.0",
     "runscript": "^1.5.3",
     "svg-jest": "^1.0.1",
     "sylvanas": "^0.6.1",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2",
-    "vanilla-jsoneditor": "^0.18.3",
+    "vanilla-jsoneditor": "^0.18.9",
+    "web-vitals": "^3.5.0",
     "yorkie": "^2.0.0"
   },
   "packageManager": "[email protected]",

packages/charts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/charts",
-  "version": "0.2.10",
+  "version": "0.2.14",
   "description": "The Chart library for OceanBase",
   "homepage": "https://github.com/oceanbase/oceanbase-design/packages/charts",
   "repository": {
@@ -31,14 +31,15 @@
     "@oceanbase/util": "workspace:^",
     "classnames": "^2.3.2",
     "lodash": "^4.17.21",
+    "rc-util": "^5.38.0",
     "tinycolor2": "^1.6.0",
     "use-resize-observer": "^9.1.0"
   },
   "devDependencies": {
-    "@types/tinycolor2": "^1.4.3"
+    "@types/tinycolor2": "^1.4.4"
   },
   "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
   }
 }

packages/charts/src/Area/__tests__/__snapshots__/ref.test.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Area ref ref 1`] = `
+<div
+  data-chart-source-type="G2Plot"
+  size-sensor-id="1"
+  style="height: inherit;"
+>
+  <div
+    style="position:relative;"
+  >
+    <canvas
+      height="400"
+      style="width: 400px; height: 400px; display: inline-block; vertical-align: middle;"
+      width="400"
+    />
+  </div>
+  <object
+    class="size-sensor-object"
+    data="about:blank"
+    style="display: block; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1; opacity: 0;"
+    tabindex="-1"
+    type="text/html"
+  />
+</div>
+`;

packages/charts/src/Area/__tests__/ref.test.tsx

@@ -0,0 +1,23 @@
+import React, { useEffect, useRef } from 'react';
+import { render } from '@testing-library/react';
+import { Area } from '@oceanbase/charts';
+
+describe('Area ref', () => {
+  it('ref', () => {
+    const DemoArea = () => {
+      const ref = useRef(null);
+      useEffect(() => {
+        expect(ref.current).not.toBeNull();
+        expect(typeof ref.current?.getChart).toBe('function');
+      }, []);
+      const config = {
+        data: [],
+        xField: 'x',
+        yField: 'y',
+      };
+      return <Area {...config} ref={ref} />;
+    };
+    const { asFragment } = render(<DemoArea />);
+    expect(asFragment().firstChild).toMatchSnapshot();
+  });
+});