feat: TokenForm for preference and create workspace

.vscode/settings.json

@@ -3,6 +3,7 @@
     "Asyncify",
     "dugite",
     "fullscreenable",
+    "gitee",
     "maximizable",
     "minimizable",
     "submenu",

src/components/TokenForm/index.tsx

@@ -1,53 +1,47 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
-import { Paper, Typography, Tabs, Tab, TabPanel } from '@material-ui/core';
-import SearchRepo from '@/components/github/SearchRepo';
+import { Tab, ListItemText } from '@material-ui/core';
+import { TabPanel, TabContext, TabList } from '@material-ui/lab';
 import { SupportedStorageServices } from '@services/types';
+import { useTranslation } from 'react-i18next';
 
-const Container = styled(Paper)`
-  margin-top: 5px;
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
 `;
-const GithubRepoLink = styled(Typography)`
-  cursor: pointer;
-  opacity: 50%;
-  &:hover {
-    opacity: 100%;
-  }
+const TabsContainer = styled.div`
+  display: flex;
+  flex-direction: row;
 `;
 
-const a11yProps = (
-  index: SupportedStorageServices,
-): {
-  id: string;
-  'aria-controls': string;
-} => ({
-  id: index,
-  'aria-controls': `simple-tabpanel-${index}`,
-});
-
 /**
  * Create storage provider's token.
  * @returns
  */
 export function TokenForm(): JSX.Element {
+  const { t } = useTranslation();
   const [currentTab, currentTabSetter] = useState<SupportedStorageServices>(SupportedStorageServices.github);
   return (
-    <Container elevation={2} square>
-      <Tabs
-        orientation="vertical"
-        variant="scrollable"
-        value={currentTab}
-        onChange={(_event, newValue: SupportedStorageServices) => currentTabSetter(newValue)}
-        aria-label="Vertical tabs example">
-        <Tab label="GitHub" {...a11yProps(SupportedStorageServices.github)} />
-        <Tab label="GitLab" {...a11yProps(SupportedStorageServices.gitlab)} />
-      </Tabs>
-      <TabPanel value={currentTab} index={0}>
-        Item One
-      </TabPanel>
-      <TabPanel value={currentTab} index={1}>
-        Item Two
-      </TabPanel>
+    <Container>
+      <ListItemText primary={t('Preference.Token')} secondary={t('Preference.TokenDescription')} />
+      <TabContext value={currentTab}>
+        <TabsContainer>
+          <TabList
+            onChange={(_event, newValue) => currentTabSetter(newValue as SupportedStorageServices)}
+            orientation="vertical"
+            variant="scrollable"
+            value={currentTab}
+            aria-label="Vertical tabs example">
+            <Tab label="GitHub" value={SupportedStorageServices.github} />
+            <Tab label="GitLab" value={SupportedStorageServices.gitlab} />
+            <Tab label="Gitee" value={SupportedStorageServices.gitee} />
+          </TabList>
+          <TabPanel value={SupportedStorageServices.github}>Item One</TabPanel>
+          <TabPanel value={SupportedStorageServices.gitlab}>Item Two</TabPanel>
+          <TabPanel value={SupportedStorageServices.gitee}>Item Two</TabPanel>
+        </TabsContainer>
+      </TabContext>
     </Container>
   );
 }

src/pages/AddWorkspace/index.tsx

@@ -1,12 +1,15 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { GraphQLClient, ClientContext } from 'graphql-hooks';
+import { useTranslation } from 'react-i18next';
+import { AppBar, Paper, Tab } from '@material-ui/core';
+import { TabPanel as TabPanelRaw, TabContext, TabList } from '@material-ui/lab';
 
 import { GITHUB_GRAPHQL_API } from '../../constants/auth';
 
 import { TokenForm } from '@/components/TokenForm';
 
-import { Description } from './Description';
+import { MainSubWikiDescription, SyncedWikiDescription } from './Description';
 
 import { NewWikiForm } from './NewWikiForm';
 import { NewWikiDoneButton } from './NewWikiDoneButton';
@@ -15,8 +18,13 @@ import { ExistedWikiDoneButton } from './ExistedWikiDoneButton';
 import { CloneWikiForm } from './CloneWikiForm';
 import { CloneWikiDoneButton } from './CloneWikiDoneButton';
 
-import { TabBar, CreateWorkspaceTabs } from './TabBar';
-import { useIsCreateMainWorkspace, useWikiWorkspaceForm } from './useForm';
+import { useIsCreateMainWorkspace, useIsCreateSyncedWorkspace, useWikiWorkspaceForm } from './useForm';
+
+enum CreateWorkspaceTabs {
+  CloneOnlineWiki = 'CloneOnlineWiki',
+  CreateNewWiki = 'CreateNewWiki',
+  OpenLocalWiki = 'OpenLocalWiki',
+}
 
 const graphqlClient = new GraphQLClient({
   url: GITHUB_GRAPHQL_API,
@@ -30,38 +38,65 @@ const Container = styled.main`
     width: 0;
   }
 `;
+const TokenFormContainer = styled(Paper)`
+  margin-top: 10px;
+  padding: 5px 10px;
+`;
+TokenFormContainer.defaultProps = {
+  square: true,
+  elevation: 2,
+};
+const TabPanel = styled(TabPanelRaw)`
+  margin-top: 10px;
+  padding: 0 !important;
+`;
 
 export default function AddWorkspace(): JSX.Element {
+  const { t } = useTranslation();
   const [currentTab, currentTabSetter] = useState<CreateWorkspaceTabs>(CreateWorkspaceTabs.CreateNewWiki);
+  const [isCreateSyncedWorkspace, isCreateSyncedWorkspaceSetter] = useIsCreateSyncedWorkspace();
   const [isCreateMainWorkspace, isCreateMainWorkspaceSetter] = useIsCreateMainWorkspace();
 
   const form = useWikiWorkspaceForm();
 
   return (
     <ClientContext.Provider value={graphqlClient}>
-      <TabBar currentTab={currentTab} currentTabSetter={currentTabSetter} />
-      <Description isCreateMainWorkspace={isCreateMainWorkspace} isCreateMainWorkspaceSetter={isCreateMainWorkspaceSetter} />
+      <TabContext value={currentTab}>
+        <AppBar position="static">
+          <Paper square>
+            <TabList
+              onChange={(_event, newValue) => currentTabSetter(newValue as CreateWorkspaceTabs)}
+              variant="scrollable"
+              value={currentTab}
+              aria-label={t('AddWorkspace.SwitchCreateNewOrOpenExisted')}>
+              <Tab label={t(`AddWorkspace.CloneOnlineWiki`)} value={CreateWorkspaceTabs.CloneOnlineWiki} />
+              <Tab label={t('AddWorkspace.CreateNewWiki')} value={CreateWorkspaceTabs.CreateNewWiki} />
+              <Tab label={t('AddWorkspace.OpenLocalWiki')} value={CreateWorkspaceTabs.OpenLocalWiki} />
+            </TabList>
+          </Paper>
+        </AppBar>
 
-      <TokenForm />
+        <SyncedWikiDescription isCreateSyncedWorkspace={isCreateSyncedWorkspace} isCreateSyncedWorkspaceSetter={isCreateSyncedWorkspaceSetter} />
+        <TokenFormContainer>
+          <TokenForm />
+        </TokenFormContainer>
 
-      {currentTab === 'CreateNewWiki' && (
-        <Container>
-          <NewWikiForm form={form} isCreateMainWorkspace={isCreateMainWorkspace} />
-          <NewWikiDoneButton form={form} isCreateMainWorkspace={isCreateMainWorkspace} />
-        </Container>
-      )}
-      {currentTab === 'OpenLocalWiki' && (
-        <Container>
+        <MainSubWikiDescription isCreateMainWorkspace={isCreateMainWorkspace} isCreateMainWorkspaceSetter={isCreateMainWorkspaceSetter} />
+        <TabPanel value={CreateWorkspaceTabs.CloneOnlineWiki}>
+          <Container>
+            <NewWikiForm form={form} isCreateMainWorkspace={isCreateMainWorkspace} />
+            <NewWikiDoneButton form={form} isCreateMainWorkspace={isCreateMainWorkspace} />
+          </Container>
+        </TabPanel>
+        <TabPanel value={CreateWorkspaceTabs.CreateNewWiki}>
           <ExistedWikiForm form={form} isCreateMainWorkspace={isCreateMainWorkspace} />
           <ExistedWikiDoneButton form={form} isCreateMainWorkspace={isCreateMainWorkspace} />
-        </Container>
-      )}
-      {currentTab === 'CloneOnlineWiki' && (
-        <Container>
+        </TabPanel>
+        <TabPanel value={CreateWorkspaceTabs.OpenLocalWiki}>
           <CloneWikiForm form={form} isCreateMainWorkspace={isCreateMainWorkspace} />
           <CloneWikiDoneButton form={form} isCreateMainWorkspace={isCreateMainWorkspace} />
-        </Container>
-      )}
+        </TabPanel>
+      </TabContext>
     </ClientContext.Provider>
   );
 }

src/pages/Preferences/index.tsx

@@ -31,7 +31,7 @@ import { hunspellLanguagesMap } from '../../constants/hunspell-languages';
 import webcatalogLogo from '@/images/webcatalog-logo.svg';
 import translatiumLogo from '@/images/translatium-logo.svg';
 
-import { GithubTokenForm } from '../../components/github/git-token-form';
+import { TokenForm } from '../../components/TokenForm';
 import { IPossibleWindowMeta, WindowMeta, WindowNames } from '@services/windows/WindowProperties';
 import { IPreferences, PreferenceSections } from '@services/preferences/interface';
 import { usePreferenceSections } from './useSections';
@@ -90,16 +90,6 @@ const Paper = styled(PaperRaw)<{ dark?: 0 | 1 }>`
   border: ${({ dark }) => (dark === 1 ? 'none' : '1px solid rgba(0, 0, 0, 0.12)')};
 `;
 
-const TokenContainer = styled.div`
-  margin-top: 10px;
-  margin-bottom: 10px;
-  display: flex;
-  justify-content: space-around;
-  flex-direction: column;
-  width: 200px;
-  min-width: 200px;
-`;
-
 const TimePickerContainer = styled.div`
   margin-top: 10px;
   margin-bottom: 10px;
@@ -257,10 +247,7 @@ export default function Preferences(): JSX.Element {
         <Paper elevation={0}>
           <List dense disablePadding>
             <ListItem>
-              <ListItemText primary={t('Preference.Token')} secondary={t('Preference.TokenDescription')} />
-              <TokenContainer>
-                <GithubTokenForm />
-              </TokenContainer>
+              <TokenForm />
             </ListItem>
             <ListItem>
               <ListItemText primary={t('Preference.SyncInterval')} secondary={t('Preference.SyncIntervalDescription')} />