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

…angdongya-dev
oceanbase · Sep 25, 2023 · dd8f9a6 · dd8f9a6
2 parents f25196e + d07096c
commit dd8f9a6
Show file tree

Hide file tree

Showing 314 changed files with 12,168 additions and 4,294 deletions.
diff --git a/.dumi/pages/index/components/SiteContext.ts b/.dumi/pages/index/components/SiteContext.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 export interface SiteContextProps {
   isMobile: boolean;

diff --git a/.dumi/theme/SiteThemeProvider.tsx b/.dumi/theme/SiteThemeProvider.tsx
@@ -1,4 +1,5 @@
 import { ConfigProvider, token } from '@oceanbase/design';
+import { ChartProvider } from '@oceanbase/charts';
 import type { ThemeProviderProps } from 'antd-style';
 import { ThemeProvider } from 'antd-style';
 import type { FC } from 'react';
@@ -40,7 +41,7 @@ const SiteThemeProvider: FC<ThemeProviderProps> = ({ children, theme, ...rest })
         direction={direction}
         locale={lang === 'cn' ? zhCN : undefined}
       >
-        {children}
+        <ChartProvider theme={theme.isDark ? 'dark' : 'light'}>{children}</ChartProvider>
       </ConfigProvider>
     </ThemeProvider>
   );

diff --git a/.dumi/theme/builtins/ComponentOverview/index.tsx b/.dumi/theme/builtins/ComponentOverview/index.tsx
@@ -29,7 +29,10 @@ const useStyle = () => {
       cursor: pointer;
       transition: all 0.5s;
       &:hover {
-        box-shadow: 0 6px 16px -8px #00000014, 0 9px 28px #0000000d, 0 12px 48px 16px #00000008;
+        box-shadow:
+          0 6px 16px -8px #00000014,
+          0 9px 28px #0000000d,
+          0 12px 48px 16px #00000008;
       }
     `,
     componentsOverviewAffix: css`

diff --git a/.dumi/theme/builtins/DemoWrapper/index.tsx b/.dumi/theme/builtins/DemoWrapper/index.tsx
@@ -25,26 +25,29 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
 
   const demos = React.useMemo(
     () =>
-      items.reduce((acc, item) => {
-        const { previewerProps } = item;
-        const { debug } = previewerProps;
+      items.reduce(
+        (acc, item) => {
+          const { previewerProps } = item;
+          const { debug } = previewerProps;
 
-        if (debug && !showDebug) return acc;
+          if (debug && !showDebug) return acc;
 
-        return acc.concat({
-          ...item,
-          previewerProps: {
-            ...previewerProps,
-            expand: expandAll,
-            // always override debug property, because dumi will hide debug demo in production
-            debug: false,
-            /**
-             * extra marker for the original debug
-             */
-            originDebug: debug,
-          },
-        });
-      }, [] as typeof items),
+          return acc.concat({
+            ...item,
+            previewerProps: {
+              ...previewerProps,
+              expand: expandAll,
+              // always override debug property, because dumi will hide debug demo in production
+              debug: false,
+              /**
+               * extra marker for the original debug
+               */
+              originDebug: debug,
+            },
+          });
+        },
+        [] as typeof items
+      ),
     [expandAll, showDebug]
   );
 

diff --git a/.dumi/theme/common/styles/Icon.tsx b/.dumi/theme/common/styles/Icon.tsx
@@ -30,7 +30,9 @@ export default () => {
             background-color: inherit;
             border-radius: 4px;
             cursor: pointer;
-            transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+            transition:
+              color 0.3s ease-in-out,
+              background-color 0.3s ease-in-out;
 
             .rtl & {
               margin: 3px 0;

diff --git a/.dumi/theme/common/styles/Markdown.tsx b/.dumi/theme/common/styles/Markdown.tsx
@@ -325,6 +325,12 @@ const GlobalStyle: React.FC = () => {
               }
             }
 
+            td {
+              &:nth-child(3) {
+                color: ${token.magenta7};
+              }
+            }
+
             th {
               color: #5c6b77;
               font-weight: 500;

diff --git a/.dumi/theme/common/styles/NProgress.tsx b/.dumi/theme/common/styles/NProgress.tsx
@@ -13,7 +13,9 @@ export default () => {
           }
 
           .peg {
-            box-shadow: 0 0 10px ${token.colorPrimary}, 0 0 5px ${token.colorPrimary};
+            box-shadow:
+              0 0 10px ${token.colorPrimary},
+              0 0 5px ${token.colorPrimary};
           }
 
           .spinner-icon {

diff --git a/.dumi/theme/common/styles/PreviewImage.tsx b/.dumi/theme/common/styles/PreviewImage.tsx
@@ -132,8 +132,12 @@ export default () => {
 
         .preview-image-boxes.preview-image-boxes-with-carousel img {
           padding: 0;
-          box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 ${token.colorBgContainer}, 0 4px 0 0 #ddd,
-            0 6px 0 0 ${token.colorBgContainer}, 0 7px 0 0 #ddd;
+          box-shadow:
+            0 1px 0 0 #ddd,
+            0 3px 0 0 ${token.colorBgContainer},
+            0 4px 0 0 #ddd,
+            0 6px 0 0 ${token.colorBgContainer},
+            0 7px 0 0 #ddd;
         }
 
         .preview-image-box img:hover {

diff --git a/.dumi/theme/common/styles/Reset.tsx b/.dumi/theme/common/styles/Reset.tsx
@@ -11,7 +11,8 @@ export default () => {
         @font-face {
           font-weight: normal;
           font-family: AlibabaPuHuiTi;
-          src: url('//at.alicdn.com/t/webfont_6e11e43nfj.woff2') format('woff2'),
+          src:
+            url('//at.alicdn.com/t/webfont_6e11e43nfj.woff2') format('woff2'),
             url('//at.alicdn.com/t/webfont_6e11e43nfj.woff') format('woff'),
             /* chrome、firefox */ url('//at.alicdn.com/t/webfont_6e11e43nfj.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
           font-display: swap;
@@ -20,7 +21,8 @@ export default () => {
         @font-face {
           font-weight: bold;
           font-family: AlibabaPuHuiTi;
-          src: url('//at.alicdn.com/t/webfont_exesdog9toj.woff2') format('woff2'),
+          src:
+            url('//at.alicdn.com/t/webfont_exesdog9toj.woff2') format('woff2'),
             url('//at.alicdn.com/t/webfont_exesdog9toj.woff') format('woff'),
             /* chrome、firefox */ url('//at.alicdn.com/t/webfont_exesdog9toj.ttf')
               format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
@@ -32,7 +34,8 @@ export default () => {
         @font-face {
           font-weight: 900;
           font-family: 'AliPuHui';
-          src: url('//at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2')
+          src:
+            url('//at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2')
               format('woff2'),
             url('//at.alicdn.com/wf/webfont/exMpJIukiCms/vtu73by4O2gEBcvBuLgeu.woff') format('woff');
           font-display: swap;

diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx
@@ -7,7 +7,7 @@ import {
 } from '@ant-design/cssinjs';
 import { App, theme as obTheme } from '@oceanbase/design';
 import type { DirectionType } from '@oceanbase/design/es/config-provider';
-import { createSearchParams, useOutlet, useSearchParams } from 'dumi';
+import { usePrefersColor, createSearchParams, useOutlet, useSearchParams } from 'dumi';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import useLayoutState from '../../hooks/useLayoutState';
 import SiteThemeProvider from '../SiteThemeProvider';
@@ -42,6 +42,7 @@ const GlobalLayout: React.FC = () => {
   const outlet = useOutlet();
   const { pathname } = useLocation();
   const [searchParams, setSearchParams] = useSearchParams();
+  const [, , setPrefersColor] = usePrefersColor();
   const [{ theme = [], direction, isMobile }, setSiteState] = useLayoutState<SiteState>({
     isMobile: false,
     direction: 'ltr',
@@ -69,6 +70,8 @@ const GlobalLayout: React.FC = () => {
             ...nextSearchParams,
             theme: value.filter(t => t !== 'light'),
           });
+          // Set theme of dumi site
+          setPrefersColor(value?.filter(t => t === 'dark' || t === 'light')?.[0]);
         }
       });
 
@@ -88,6 +91,8 @@ const GlobalLayout: React.FC = () => {
     const _direction = searchParams.get('direction') as DirectionType;
 
     setSiteState({ theme: _theme, direction: _direction === 'rtl' ? 'rtl' : 'ltr' });
+    // Set theme of dumi site
+    setPrefersColor(_theme?.filter(t => t === 'dark' || t === 'light')?.[0]);
     // Handle isMobile
     updateMobileMode();
 

diff --git a/.dumi/theme/slots/SiteContext.ts b/.dumi/theme/slots/SiteContext.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import type { DirectionType } from '@oceanbase/design/es/config-provider';
 import type { ThemeName } from '../common/ThemeSwitch';
 

diff --git a/.dumirc.ts b/.dumirc.ts
@@ -6,7 +6,8 @@ export default defineConfig({
   // 默认重定向到子包的 src 文件夹
   // ref: https://d.umijs.org/config#monoreporedirect
   monorepoRedirect: {},
-  ssr: process.env.NODE_ENV === 'production' ? {} : false,
+  // umi.server.js build error, disable it for now
+  // ssr: process.env.NODE_ENV === 'production' ? {} : false,
   hash: true,
   crossorigin: {},
   // ref: https://d.umijs.org/config#sitemap
@@ -131,6 +132,7 @@ export default defineConfig({
             { title: 'Modal 对话框', link: '/components/modal' },
             { title: 'Notification 通知提醒框', link: '/components/notification' },
             { title: 'Spin 加载中', link: '/components/spin' },
+            { title: 'Badge 徽标数', link: '/components/badge' },
           ],
         },
         {
@@ -175,10 +177,7 @@ export default defineConfig({
               title: 'BackgroundTaskManager 后台任务管理器',
               link: '/biz-components/background-task-manager',
             },
-            { title: 'SideTip 悬浮操作按钮', link: '/biz-components/side-tip' },
-            { title: 'FullscreenBox 全屏盒子', link: '/biz-components/fullscreen-box' },
-            { title: 'Highlight 代码高亮', link: '/biz-components/highlight' },
-            {title: 'TagSelect 标签式单选/多选', link: '/biz-components/tag-select'}
+            { title: 'TagSelect 标签式单选/多选', link: '/biz-components/tag-select' },
           ],
         },
       ],
@@ -189,6 +188,10 @@ export default defineConfig({
               title: 'Stat 数字统计',
               link: '/charts/stat',
             },
+            {
+              title: 'Score 得分图',
+              link: '/charts/score',
+            },
             {
               title: 'Line 折线图',
               link: '/charts/line',

diff --git a/.prettierignore b/.prettierignore
@@ -8,3 +8,11 @@ packages/design/src/theme/style/*.less
 packages/icons/src
 .secignore
 LICENSE
+es
+lib
+dist
+/site
+/server
+/public
+__testfixtures__
+
diff --git a/docs/charts/charts-theme.md b/docs/charts/charts-theme.md
@@ -6,16 +6,33 @@ group: 可视化图表
 
 OceanBase Charts 的设计体系遵循 AntV 设计规范，并在此基础上扩展出了很多具备 OceanBase 产品风格的设计规范模式，包括但不限于全局样式（色板、圆角、边框）和特定图表的视觉定制，以传递 OceanBase 科技、活力、专注和关怀的品牌特点。
 
-## 使用主题 Token
+## 使用主题配置
 
-```ts
-import { theme } from '@oceanbase/charts';
+```tsx | pure
+import { ChartProvider, useTheme } from '@oceanbase/charts';
 
-// 主题色
-console.log(theme.defaultColor);
-
-// 折线图线宽
-console.log(theme.styleSheet.lineBorder);
+export default () {
+  // 获取主题配置
+  const themeConfig = useTheme();
+  // 主题色
+  console.log(themeConfig.defaultColor);
+  // 折线图线宽
+  console.log(themeConfig.styleSheet.lineBorder);
+  // 设置主题
+  return (
+    <>
+      <ChartProvider theme="light">
+        {...}
+      </ChartProvider>
+      <ChartProvider theme="dark">
+        {...}
+      </ChartProvider>
+      <ChartProvider theme={{ defaultColor: '#ff0000', subColor: '#00ff00' }}>
+        {...}
+      </ChartProvider>
+    </>
+  );
+};
 ```
 
 - 主题的全量 Token 可参考 https://github.com/oceanbase/charts/blob/master/src/theme/index.ts#L29 。
diff --git a/jest.config.ts b/jest.config.ts
@@ -7,6 +7,7 @@ const pkgList = readdirSync(join(__dirname, './packages')).filter(
 
 const moduleNameMapper = {
   '^react$': require.resolve('react'),
+  '^.+\\.svg$': require.resolve('jest-svg-transformer'),
   '\\.(css|less|sass|scss)$': require.resolve('identity-obj-proxy'),
 };