Merge pull request #1561 from merico-dev/1288-upgrade-mantine-from-v6…

…-to-v7 1288 upgrade mantine from v6 to v7
merico-dev · Oct 21, 2024 · 32ac4c3 · 32ac4c3
2 parents 11e845f + 7965c31
commit 32ac4c3
Show file tree

Hide file tree

Showing 426 changed files with 4,042 additions and 3,429 deletions.
diff --git a/api/package.json b/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "13.42.13",
+  "version": "13.43.0",
   "description": "",
   "main": "index.js",
   "scripts": {

diff --git a/dashboard/package.json b/dashboard/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "13.42.13",
+  "version": "13.43.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",
@@ -34,64 +34,102 @@
     "coverage": "vitest --coverage"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/helpers": "^0.0.3",
     "@dnd-kit/react": "^0.0.4",
     "@dnd-kit/sortable": "^8.0.0",
+    "@emotion/cache": "11.11.0",
+    "@emotion/react": "11.11.4",
+    "@emotion/serialize": "1.3.2",
+    "@emotion/utils": "1.4.1",
+    "@faker-js/faker": "7.6.0",
     "@json2csv/whatwg": "7.0.3",
-    "@mantine/spotlight": "6.0.16",
+    "@mantine/code-highlight": "7.13.2",
+    "@mantine/core": "7.13.2",
+    "@mantine/dates": "7.13.2",
+    "@mantine/emotion": "7.13.2",
+    "@mantine/hooks": "7.13.2",
+    "@mantine/modals": "7.13.2",
+    "@mantine/notifications": "7.13.2",
+    "@mantine/spotlight": "7.13.2",
+    "@mantine/tiptap": "7.13.2",
     "@monaco-editor/react": "4.6.0",
+    "@tabler/icons-react": "2.25.0",
+    "@tanstack/react-table": "8.10.0",
+    "@tanstack/react-virtual": "3.10.8",
+    "@tiptap/core": "2.8.0",
+    "@tiptap/extension-code-block": "2.8.0",
+    "@tiptap/extension-code-block-lowlight": "2.8.0",
+    "@tiptap/extension-color": "2.8.0",
+    "@tiptap/extension-highlight": "2.8.0",
+    "@tiptap/extension-link": "2.8.0",
+    "@tiptap/extension-placeholder": "2.8.0",
+    "@tiptap/extension-subscript": "2.8.0",
+    "@tiptap/extension-superscript": "2.8.0",
+    "@tiptap/extension-table": "2.8.0",
+    "@tiptap/extension-table-cell": "2.8.0",
+    "@tiptap/extension-table-header": "2.8.0",
+    "@tiptap/extension-table-row": "2.8.0",
+    "@tiptap/extension-text-align": "2.8.0",
+    "@tiptap/extension-text-style": "2.8.0",
+    "@tiptap/extension-underline": "2.8.0",
+    "@tiptap/pm": "2.8.0",
+    "@tiptap/react": "2.8.0",
+    "@tiptap/starter-kit": "2.8.0",
     "@types/chroma-js": "^2.1.4",
+    "ahooks": "^3.3.11",
+    "axios": "^0.27.2",
+    "chroma-js": "^2.4.2",
     "constrained-editor-plugin": "^1.3.0",
+    "crypto-js": "^4.1.1",
+    "d3-array": "3.2.4",
+    "d3-regression": "1.3.10",
+    "d3-scale": "4.0.2",
+    "dayjs": "1.11.9",
     "dom-to-image-more": "3.1.6",
+    "echarts": "5.4.1",
+    "echarts-for-react": "3.0.2",
+    "echarts-gl": "2.0.9",
+    "eventemitter2": "^6.4.6",
     "file-saver": "2.0.5",
+    "highlight.js": "^11.8.0",
     "i18next": "^23.10.1",
     "i18next-browser-languagedetector": "^7.2.0",
     "intl-pluralrules": "^2.0.1",
     "js-base64": "3.7.5",
+    "jszip": "3.10.1",
+    "lodash": "^4.17.21",
+    "lowlight": "^2.9.0",
     "mathjs": "11.12.0",
+    "mobx": "^6.6.1",
+    "mobx-react-lite": "^3.4.0",
+    "mobx-state-tree": "^5.1.5",
     "monaco-editor": "0.52.0",
+    "numbro": "^2.3.6",
     "performant-array-to-tree": "1.11.0",
     "popmotion": "^11.0.3",
+    "prosemirror-commands": "^1.5.0",
+    "prosemirror-dropcursor": "^1.6.1",
+    "prosemirror-gapcursor": "^1.3.1",
+    "prosemirror-history": "^1.3.0",
+    "prosemirror-keymap": "^1.2.0",
+    "prosemirror-schema-list": "^1.2.2",
     "rc-select": "14.1.0",
     "rc-tree-select": "5.23.0",
+    "react-grid-layout": "^1.3.4",
     "react-hook-form": "7.53.0",
     "react-i18next": "^14.1.0",
+    "react-router-dom": "^6.3.0",
     "reactflow": "^11.6.0",
     "uuid": "9.0.1"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "11.11.0",
-    "@faker-js/faker": "7.6.0",
-    "@mantine/core": "6.0.16",
-    "@mantine/dates": "6.0.16",
-    "@mantine/hooks": "6.0.16",
-    "@mantine/modals": "6.0.16",
-    "@mantine/notifications": "6.0.16",
-    "@mantine/prism": "6.0.16",
-    "@mantine/tiptap": "6.0.16",
-    "@tabler/icons-react": "2.25.0",
     "@testing-library/cypress": "^9.0.0",
+    "@testing-library/dom": "^8.11.4",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
-    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.3.0",
-    "@tiptap/extension-code-block-lowlight": "2.0.3",
-    "@tiptap/extension-color": "2.0.3",
-    "@tiptap/extension-highlight": "2.0.3",
-    "@tiptap/extension-link": "2.0.3",
-    "@tiptap/extension-placeholder": "2.0.3",
-    "@tiptap/extension-subscript": "2.0.3",
-    "@tiptap/extension-superscript": "2.0.3",
-    "@tiptap/extension-table": "2.0.3",
-    "@tiptap/extension-table-cell": "2.0.3",
-    "@tiptap/extension-table-header": "2.0.3",
-    "@tiptap/extension-table-row": "2.0.3",
-    "@tiptap/extension-text-align": "2.0.3",
-    "@tiptap/extension-text-style": "2.0.3",
-    "@tiptap/extension-underline": "2.0.3",
-    "@tiptap/pm": "2.0.3",
-    "@tiptap/react": "2.0.3",
-    "@tiptap/starter-kit": "2.0.3",
     "@types/crypto-js": "v4.1.1",
     "@types/d3-array": "3.2.1",
     "@types/d3-scale": "4.0.8",
@@ -101,89 +139,16 @@
     "@types/react-dom": "^18.0.0",
     "@types/react-grid-layout": "^1.3.2",
     "@types/uuid": "9.0.5",
-    "ahooks": "^3.3.11",
-    "ajv": "8.12.0",
-    "axios": "^0.27.2",
-    "crypto-js": "^4.1.1",
     "cypress": "^12.9.0",
     "cypress-wait-until": "^1.7.2",
-    "echarts": "5.4.1",
-    "echarts-for-react": "3.0.2",
-    "echarts-gl": "2.0.9",
     "jsdom": "^20.0.0",
     "jsdom-testing-mocks": "^1.5.0",
-    "lodash": "^4.17.21",
-    "lowlight": "^2.8.0",
-    "numbro": "^2.3.6",
-    "prosemirror-commands": "^1.5.0",
-    "prosemirror-dropcursor": "^1.6.1",
-    "prosemirror-gapcursor": "^1.3.1",
-    "prosemirror-history": "^1.3.0",
-    "prosemirror-keymap": "^1.2.0",
-    "prosemirror-schema-list": "^1.2.2",
-    "react-grid-layout": "^1.3.4",
     "rollup-plugin-visualizer": "5.12.0",
     "typescript": "^4.6.3",
     "vite-plugin-static-copy": "^0.17.0"
   },
   "peerDependencies": {
-    "@emotion/react": "11.10.6",
-    "@faker-js/faker": "7.6.0",
-    "@mantine/core": "6.0.16",
-    "@mantine/dates": "6.0.16",
-    "@mantine/hooks": "6.0.16",
-    "@mantine/modals": "6.0.16",
-    "@mantine/notifications": "6.0.16",
-    "@mantine/prism": "6.0.16",
-    "@mantine/tiptap": "6.0.16",
-    "@tabler/icons-react": "2.25.0",
-    "@tanstack/react-table": "8.10.0",
-    "@tiptap/extension-code-block-lowlight": "2.0.3",
-    "@tiptap/extension-color": "2.0.3",
-    "@tiptap/extension-highlight": "2.0.3",
-    "@tiptap/extension-link": "2.0.3",
-    "@tiptap/extension-placeholder": "2.0.3",
-    "@tiptap/extension-subscript": "2.0.3",
-    "@tiptap/extension-superscript": "2.0.3",
-    "@tiptap/extension-table": "2.0.3",
-    "@tiptap/extension-table-cell": "2.0.3",
-    "@tiptap/extension-table-header": "2.0.3",
-    "@tiptap/extension-table-row": "2.0.3",
-    "@tiptap/extension-text-align": "2.0.3",
-    "@tiptap/extension-text-style": "2.0.3",
-    "@tiptap/extension-underline": "2.0.3",
-    "@tiptap/pm": "2.0.3",
-    "@tiptap/react": "2.0.3",
-    "@tiptap/starter-kit": "2.0.3",
-    "ahooks": "^3.3.11",
-    "axios": "^0.27.2",
-    "chroma-js": "^2.4.2",
-    "crypto-js": "^4.1.1",
-    "d3-array": "3.2.4",
-    "d3-regression": "1.3.10",
-    "d3-scale": "4.0.2",
-    "dayjs": "1.11.9",
-    "echarts": "5.4.1",
-    "echarts-for-react": "3.0.2",
-    "echarts-gl": "2.0.9",
-    "eventemitter2": "^6.4.6",
-    "jszip": "3.10.1",
-    "lodash": "^4.17.21",
-    "lowlight": "^2.8.0",
-    "mobx": "^6.6.1",
-    "mobx-react-lite": "^3.4.0",
-    "mobx-state-tree": "^5.1.5",
-    "numbro": "^2.3.6",
-    "prosemirror-commands": "^1.5.0",
-    "prosemirror-dropcursor": "^1.6.1",
-    "prosemirror-gapcursor": "^1.3.1",
-    "prosemirror-history": "^1.3.0",
-    "prosemirror-keymap": "^1.2.0",
-    "prosemirror-schema-list": "^1.2.2",
-    "react": "^16.8.0 || 17.x || 18.x",
-    "react-dom": "^16.8.0 || 17.x || 18.x",
-    "react-grid-layout": "^1.3.4",
-    "react-router-dom": "^6.3.0",
-    "react-virtual": "^2.10.4"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }
diff --git a/dashboard/src/components/filter/custom-default-value-editor.tsx b/dashboard/src/components/filter/custom-default-value-editor.tsx
@@ -41,11 +41,11 @@ export const CustomDefaultValueEditor = observer(({ filter }: Props) => {
         size: 'xs',
         color: 'grape',
         sx: { flexGrow: 0, alignSelf: 'flex-start' },
-        leftIcon: <IconMathFunction size={16} />,
+        leftSection: <IconMathFunction size={16} />,
       }}
       description={
         <Alert title={t('filter.field.custom_default_value.tips')} color="gray" mb={16}>
-          <List size={13} type="ordered">
+          <List size="xs" type="ordered">
             <List.Item>{t('filter.field.custom_default_value.tip_1')}</List.Item>
             <List.Item>{t('filter.field.custom_default_value.tip_2')}</List.Item>
           </List>

diff --git a/dashboard/src/components/filter/error-message-or-not-found.tsx b/dashboard/src/components/filter/error-message-or-not-found.tsx
@@ -9,13 +9,13 @@ export const ErrorMessageOrNotFound = ({ errorMessage }: IProps) => {
   const { t } = useTranslation();
   if (errorMessage) {
     return (
-      <Text color="red" size={12}>
+      <Text c="red" size="12px">
         {errorMessage}
       </Text>
     );
   }
   return (
-    <Text color="dimmed" size={12}>
+    <Text c="dimmed" size="12px">
       {t('filter.widget.common.selector_option_empty')}
     </Text>
   );

diff --git a/dashboard/src/components/filter/filter-checkbox/editor.tsx b/dashboard/src/components/filter/filter-checkbox/editor.tsx
@@ -1,22 +1,20 @@
 import { Checkbox, Group } from '@mantine/core';
 import { observer } from 'mobx-react-lite';
+import { useTranslation } from 'react-i18next';
 import { CustomRichTextEditor } from '~/components/widgets/rich-text-editor/custom-rich-text-editor';
 import { FilterCheckboxConfigInstance, FilterMetaInstance } from '~/model';
 import { CustomDefaultValueEditor } from '../custom-default-value-editor';
-import { useTranslation } from 'react-i18next';
-import { useEditPanelContext } from '~/contexts';
 
 interface IFilterEditorCheckbox {
   filter: FilterMetaInstance;
 }
 
 export const FilterEditorCheckbox = observer(({ filter }: IFilterEditorCheckbox) => {
-  const { panel } = useEditPanelContext();
   const { t } = useTranslation();
   const config = filter.config as FilterCheckboxConfigInstance;
   return (
     <>
-      <Group position="apart">
+      <Group justify="space-between">
         <Checkbox
           checked={config.default_value}
           onChange={(e) => config.setDefaultValue(e.currentTarget.checked)}
@@ -25,7 +23,7 @@ export const FilterEditorCheckbox = observer(({ filter }: IFilterEditorCheckbox)
         <CustomDefaultValueEditor filter={filter} />
       </Group>
       <CustomRichTextEditor
-        key={panel.id}
+        key={filter.id}
         label={t('filter.widget.checkbox.description')}
         value={config.description}
         onChange={config.setDescription}

diff --git a/dashboard/src/components/filter/filter-checkbox/render.tsx b/dashboard/src/components/filter/filter-checkbox/render.tsx
@@ -45,10 +45,10 @@ export const FilterCheckbox = observer(
   }: IFilterCheckbox) => {
     return (
       <Box>
-        <Text>&nbsp;</Text>
+        <Text size="sm">&nbsp;</Text>
         <Checkbox
           label={
-            <Group noWrap position="apart" align="middle" spacing={6}>
+            <Group wrap="nowrap" justify="space-between" align="middle" gap={6}>
               <Box sx={{ flexGrow: 1 }}>{label}</Box>
               <CheckboxTooltip description={description} isDescriptionEmpty={isDescriptionEmpty} />
             </Group>

diff --git a/dashboard/src/components/filter/filter-date-range/editor.tsx b/dashboard/src/components/filter/filter-date-range/editor.tsx
@@ -1,11 +1,11 @@
-import { Checkbox, Group, NumberInput, Select, Stack, Text } from '@mantine/core';
+import { Checkbox, Group, NumberInput, Select } from '@mantine/core';
 import { observer } from 'mobx-react-lite';
-import { DateRangeValue_Value, FilterDateRangeConfigInstance, FilterMetaInstance } from '~/model';
-import { FilterDateRange } from './render';
 import { useMemo } from 'react';
-import { getDateRangeShortcuts } from './widget/shortcuts/shortcuts';
-import { CustomDefaultValueEditor } from '../custom-default-value-editor';
 import { useTranslation } from 'react-i18next';
+import { DateRangeValue_Value, FilterDateRangeConfigInstance, FilterMetaInstance } from '~/model';
+import { CustomDefaultValueEditor } from '../custom-default-value-editor';
+import { FilterDateRange } from './render';
+import { getShortcutsInGroups } from './widget/shortcuts/shortcuts';
 
 interface IFilterEditorDateRange {
   filter: FilterMetaInstance;
@@ -22,15 +22,21 @@ const inputFormatOptions = [
 export const FilterEditorDateRange = observer(function _FilterEditorDateRange({ filter }: IFilterEditorDateRange) {
   const { t } = useTranslation();
   const config = filter.config as FilterDateRangeConfigInstance;
-  const shortcuts = useMemo(
-    () =>
-      getDateRangeShortcuts().map(({ key, value, group }) => ({
-        label: t(`filter.widget.date_range.shortcut.${group}.full.${key}`),
-        value,
+  const shortcuts = useMemo(() => {
+    const shortcutsInGroups = getShortcutsInGroups();
+    return Object.entries(shortcutsInGroups).map(([group, items]) => {
+      console.log(group, items);
+      return {
         group: t(`filter.widget.date_range.shortcut.${group}.label`),
-      })),
-    [],
-  );
+        items: items.map(({ key, value }) => ({
+          label: t(`filter.widget.date_range.shortcut.${group}.full.${key}`),
+          value,
+        })),
+      };
+    });
+  }, []);
+
+  console.log(shortcuts);
 
   const defaultValue = [...config.default_value] as DateRangeValue_Value;
   return (

diff --git a/dashboard/src/components/filter/filter-date-range/widget/count-days.tsx b/dashboard/src/components/filter/filter-date-range/widget/count-days.tsx
@@ -20,7 +20,9 @@ export const CountDays = ({ begin, end }: { begin: DateValue; end: DateValue })
   const label = count === 1 ? t('filter.widget.date_range.one_day') : t('filter.widget.date_range.x_days', { count });
   return (
     <Tooltip label={label}>
-      <Badge size="sm">{count}</Badge>
+      <Badge size="sm" variant="light">
+        {count}
+      </Badge>
     </Tooltip>
   );
 };
diff --git a/dashboard/src/components/filter/filter-date-range/widget/hints.tsx b/dashboard/src/components/filter/filter-date-range/widget/hints.tsx
@@ -8,8 +8,10 @@ export const Hints = ({ max_days }: { max_days: number }) => {
   }
   return (
     <>
-      <Group position="right">
-        <Badge size="xs">{t('filter.widget.date_range.x_max_days', { max_days })}</Badge>
+      <Group justify="flex-end">
+        <Badge size="xs" variant="light">
+          {t('filter.widget.date_range.x_max_days', { max_days })}
+        </Badge>
       </Group>
       <Divider variant="dashed" my={10} />
     </>