fix: Split StudioProvider into ThemeProvider and LocaleProvider

.gitignore

@@ -134,7 +134,6 @@ db.sqlite3
 db.sqlite3-journal
 
 # Flask stuff:
-instance/
 .webassets-cache
 
 # Scrapy stuff:

examples/graphy/src/pages/dataset/cluster/graph.tsx

@@ -3,7 +3,15 @@ import React, { useRef } from 'react';
 import { Button } from 'antd';
 import { FilterOutlined } from '@ant-design/icons';
 
-import { Section, useSection, Icons, FullScreen, SegmentedTabs, StudioProvier } from '@graphscope/studio-components';
+import {
+  Section,
+  useSection,
+  Icons,
+  FullScreen,
+  SegmentedTabs,
+  ThemeProvider,
+  LocaleProvider,
+} from '@graphscope/studio-components';
 import {
   Toolbar,
   SwitchEngine,
@@ -90,37 +98,39 @@ const ClusterGraph: React.FunctionComponent<QueryGraphProps> = props => {
       }}
       ref={containerRef}
     >
-      <StudioProvier locales={locales}>
-        <GraphProvider id="cluster-graph">
-          <Section
-            splitBorder
-            rightSide={<SegmentedTabs items={items} block />}
-            autoResize={false}
-            rightSideStyle={{
-              width: '350px',
-            }}
-            defaultCollapsed={{
-              leftSide: true,
-              rightSide: false,
-            }}
-          >
-            <Canvas />
-            <ClearStatus />
+      <LocaleProvider locales={locales}>
+        <ThemeProvider>
+          <GraphProvider id="cluster-graph">
+            <Section
+              splitBorder
+              rightSide={<SegmentedTabs items={items} block />}
+              autoResize={false}
+              rightSideStyle={{
+                width: '350px',
+              }}
+              defaultCollapsed={{
+                leftSide: true,
+                rightSide: false,
+              }}
+            >
+              <Canvas />
+              <ClearStatus />
 
-            <BasicInteraction />
-            <PropertiesPanel />
-            <Loading />
-            <Toolbar style={{ position: 'absolute', top: '20px', right: '20px', left: 'unset' }}>
-              <ToogleButton />
-              <Divider style={{ margin: '0px' }} />
-              <SwitchEngine />
-              <ZoomFit />
-              {/* <RunCluster /> */}
-              <FullScreen containerRef={containerRef} />
-            </Toolbar>
-          </Section>
-        </GraphProvider>
-      </StudioProvier>
+              <BasicInteraction />
+              <PropertiesPanel />
+              <Loading />
+              <Toolbar style={{ position: 'absolute', top: '20px', right: '20px', left: 'unset' }}>
+                <ToogleButton />
+                <Divider style={{ margin: '0px' }} />
+                <SwitchEngine />
+                <ZoomFit />
+                {/* <RunCluster /> */}
+                <FullScreen containerRef={containerRef} />
+              </Toolbar>
+            </Section>
+          </GraphProvider>
+        </ThemeProvider>
+      </LocaleProvider>
     </div>
   );
 };

examples/graphy/src/pages/explore/paper-reading/index.tsx

@@ -2,7 +2,7 @@ import React, { useRef } from 'react';
 
 import { Button } from 'antd';
 
-import { Section, useSection, Icons, FullScreen, StudioProvier } from '@graphscope/studio-components';
+import { Section, useSection, Icons, FullScreen } from '@graphscope/studio-components';
 import {
   Toolbar,
   SwitchEngine,

packages/studio-components/src/LocaleProvider/index.md

@@ -0,0 +1,64 @@
+---
+title: LocaleProvider
+---
+
+```jsx
+import React, { useState } from 'react';
+import { Button, Layout, Typography, Flex } from 'antd';
+import { FormattedMessage } from 'react-intl';
+import { useLocales, LocaleProvider, SvgEnToZh, SvgZhToEn } from '@graphscope/studio-components';
+
+const { Content } = Layout;
+const { Text } = Typography;
+
+const locales = {
+    'en-US': {
+        'navbar.jobs': 'Jobs',
+        'navbar.extension': 'Extensions',
+        'navbar.alert': 'Alerts',
+        'navbar.setting': 'Settings',
+        'navbar.deployment': 'Deployment',
+    },
+    'zh-CN': {
+        'navbar.jobs': '作业管理',
+        'navbar.extension': '扩展插件',
+        'navbar.alert': '告警监控',
+        'navbar.setting': '应用设置',
+        'navbar.deployment': '部署状态',
+    }
+}
+
+/** 修改主题色 */
+const ToogleButton = () => {
+  const { locale = 'en-US', handleLocales } = useLocales();
+  return (
+    <Button
+      onClick={() => {
+        handleLocales();
+      }}
+      icon={locale === 'en-US' ? <SvgEnToZh /> : <SvgZhToEn />}
+    >
+      {locale === 'en-US' ? 'Switch to Chinese' : '切换为英文'}
+    </Button>
+  );
+};
+
+export default () => {
+  return (
+    <LocaleProvider locales={locales}>
+      <Layout>
+        <Content >
+          <Flex justify="center" align="center" vertical style={{ padding: 24 }}>
+            <Text><FormattedMessage id="navbar.jobs" /> </Text>
+            <Text><FormattedMessage id="navbar.extension" /> </Text>
+            <Text><FormattedMessage id="navbar.alert" /> </Text>
+            <Text><FormattedMessage id="navbar.setting" /> </Text>
+            <Text><FormattedMessage id="navbar.deployment" /> </Text>
+            <ToogleButton />
+          </Flex>
+        </Content>
+      </Layout>
+    </LocaleProvider>
+  );
+};
+```

packages/studio-components/src/LocaleProvider/index.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { IntlProvider } from 'react-intl';
+import { LocaleProvider } from './useLocaleProvider';
+import { storage } from '../Utils';
+
+type localeType = 'zh-CN' | 'en-US';
+
+type ILocaleProvider = {
+  locales: {
+    'zh-CN': Record<string, string>;
+    'en-US': Record<string, string>;
+  };
+  children: React.ReactNode;
+  locale?: localeType;
+};
+
+const Provider: React.FC<ILocaleProvider> = props => {
+  const { children, locales } = props;
+  const [currentLocale, setCurrentLocale] = useState<'zh-CN' | 'en-US'>(() => {
+    let { locale } = props;
+    if (!locale) {
+      locale = storage.get('locale');
+      if (!locale) {
+        locale = 'en-US';
+        storage.set('locale', locale);
+      }
+    }
+    return locale;
+  });
+
+  const handleLocale = (localeConfig: localeType) => {
+    storage.set('locale', localeConfig);
+    setCurrentLocale(localeConfig);
+  };
+
+  const messages = locales[currentLocale || 'en-US'];
+
+  return (
+    <LocaleProvider
+      value={{
+        handleLocale,
+        locale: currentLocale,
+      }}
+    >
+      <IntlProvider messages={messages} locale={currentLocale as 'zh-CN' | 'en-US'}>
+        {children}
+      </IntlProvider>
+    </LocaleProvider>
+  );
+};
+
+export default Provider;

packages/studio-components/src/LocaleProvider/useLocaleProvider.ts

@@ -0,0 +1,21 @@
+import { createContext, useContext } from 'react';
+
+type localeType = 'zh-CN' | 'en-US';
+export interface IContainerContext {
+  handleLocale: (value: localeType) => void;
+  locale: localeType;
+}
+export const ContainerContext = createContext<IContainerContext>({
+  handleLocale: ({}) => {},
+  locale: 'en-US',
+});
+
+export const LocaleProvider = ContainerContext.Provider;
+
+export const useLocaleProvider = () => {
+  const context = useContext(ContainerContext);
+  if (context === undefined || Object.keys(context).length === 0) {
+    throw new Error(`useContext must be used within a LocaleProvider`);
+  }
+  return context;
+};

packages/studio-components/src/LocaleProvider/useLocales.tsx

@@ -0,0 +1,14 @@
+import { useLocaleProvider } from './useLocaleProvider';
+
+export const useLocales = () => {
+  const { locale = 'en-US', handleLocale } = useLocaleProvider();
+  const handleLocales = () => {
+    const updateTheValue = locale === 'en-US' ? 'zh-CN' : 'en-US';
+    handleLocale(updateTheValue);
+  };
+  return {
+    locale,
+    handleLocales,
+  };
+};
+

packages/studio-components/src/Provider/getThemeConfig.tsx → packages/studio-components/src/ThemeProvider/getThemeConfig.tsx

@@ -46,6 +46,7 @@ export const getThemeConfig = (algorithm: ThemeProviderType['algorithm']) => {
     colorBorder: isLight ? '#F0F0F0' : '#303030',
     colorBgBase: isLight ? '#fff' : '#1d1d1d',
     colorBgLayout: isLight ? '#f5f7f9' : 'rgba(43,43,43,1)',
+    fontFamily: "'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
   };
   return { componentsConfig, tokenConfig };
 };

packages/studio-components/src/ThemeProvider/index.md

@@ -0,0 +1,45 @@
+---
+title: ThemeProvider
+---
+
+```jsx
+import React, { useState } from 'react';
+import { Button, Layout, Typography, Flex } from 'antd';
+import { SunOutlined, MoonOutlined } from '@ant-design/icons';
+import { useThemes, ThemeProvider } from '@graphscope/studio-components';
+
+const { Content } = Layout;
+const { Text } = Typography;
+
+/** 修改主题色 */
+const ToogleButton = () => {
+  const { algorithm, updateTheme, isDark } = useThemes();
+  return (
+    <Button
+      onClick={() => {
+        updateTheme();
+      }}
+      icon={isDark ? <SunOutlined /> : <MoonOutlined />}
+    >
+      {isDark ? '切换为亮色主题' : '切换为暗色主题'}
+    </Button>
+  );
+};
+
+export default () => {
+  return (
+    <ThemeProvider
+      /** 主题模式 */
+      mode="defaultAlgorithm"
+    >
+      <Layout>
+        <Content style={{ height: '20vh' }}>
+          <Flex justify="center" align="center" style={{ width: '100%', height: '100%' }}>
+            <ToogleButton />
+          </Flex>
+        </Content>
+      </Layout>
+    </ThemeProvider>
+  );
+};
+```