Merge branch 'feat/datacenter' into feat/datacenter-i18n

packages/app/src/components/import/index.tsx

@@ -1,7 +1,7 @@
 import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
 import { StyledButtonWrapper, StyledTitle } from './styles';
 import { Button } from '@/ui/button';
-import { Wrapper, Content } from '@/ui/layout';
+import { Content, FlexWrapper } from '@/ui/layout';
 import Loading from '@/components/loading';
 import { usePageHelper } from '@/hooks/use-page-helper';
 import { useAppState } from '@/providers/app-state-provider';
@@ -116,7 +116,7 @@ export const ImportModal = ({ open, onClose }: ImportModalProps) => {
         )}
 
         {status === 'importing' && (
-          <Wrapper
+          <FlexWrapper
             wrap={true}
             justifyContent="center"
             style={{ marginTop: 22, paddingBottom: '32px' }}
@@ -126,7 +126,7 @@ export const ImportModal = ({ open, onClose }: ImportModalProps) => {
               OOOOPS! Sorry forgot to remind you that we are working on the
               import function
             </Content>
-          </Wrapper>
+          </FlexWrapper>
         )}
       </ModalWrapper>
     </Modal>

packages/app/src/components/page-list/OperationCell.tsx

@@ -1,7 +1,7 @@
 import { useConfirm } from '@/providers/ConfirmProvider';
 import { PageMeta } from '@/providers/app-state-provider';
 import { Menu, MenuItem } from '@/ui/menu';
-import { Wrapper } from '@/ui/layout';
+import { FlexWrapper } from '@/ui/layout';
 import { IconButton } from '@/ui/button';
 import {
   MoreVerticalIcon,
@@ -63,13 +63,13 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
     </>
   );
   return (
-    <Wrapper alignItems="center" justifyContent="center">
+    <FlexWrapper alignItems="center" justifyContent="center">
       <Menu content={OperationMenu} placement="bottom-end" disablePortal={true}>
         <IconButton darker={true}>
           <MoreVerticalIcon />
         </IconButton>
       </Menu>
-    </Wrapper>
+    </FlexWrapper>
   );
 };
 
@@ -80,7 +80,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
   const { confirm } = useConfirm();
   const { t } = useTranslation();
   return (
-    <Wrapper>
+    <FlexWrapper>
       <IconButton
         darker={true}
         style={{ marginRight: '12px' }}
@@ -108,6 +108,6 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
       >
         <DeleteIcon />
       </IconButton>
-    </Wrapper>
+    </FlexWrapper>
   );
 };

packages/app/src/components/workspace-modal/Footer.tsx

@@ -1,5 +1,5 @@
 import { CloudInsyncIcon, LogOutIcon } from '@blocksuite/icons';
-import { Wrapper } from '@/ui/layout';
+import { FlexWrapper } from '@/ui/layout';
 import { WorkspaceAvatar } from '@/components/workspace-avatar';
 import { IconButton } from '@/ui/button';
 import { useAppState } from '@/providers/app-state-provider';
@@ -20,7 +20,7 @@ export const Footer = ({
     <StyledFooter>
       {user && (
         <>
-          <Wrapper>
+          <FlexWrapper>
             <WorkspaceAvatar
               size={40}
               name={user.name}
@@ -30,7 +30,7 @@ export const Footer = ({
               <p>{user.name}</p>
               <p>{user.email}</p>
             </StyleUserInfo>
-          </Wrapper>
+          </FlexWrapper>
           <IconButton
             onClick={() => {
               onLogout();

packages/app/src/components/workspace-modal/WorkspaceCard.tsx

@@ -8,8 +8,8 @@ import { PublishIcon, UsersIcon } from '@blocksuite/icons';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useAppState } from '@/providers/app-state-provider';
 import { StyleWorkspaceInfo, StyleWorkspaceTitle, StyledCard } from './styles';
-import { Wrapper } from '@/ui/layout';
 import { useTranslation } from '@affine/i18n';
+import { FlexWrapper } from '@/ui/layout';
 
 export const WorkspaceCard = ({
   workspaceData,
@@ -27,9 +27,9 @@ export const WorkspaceCard = ({
       }}
       active={workspaceData.id === currentWorkspace?.id}
     >
-      <Wrapper>
+      <FlexWrapper>
         <WorkspaceUnitAvatar size={58} workspaceUnit={workspaceData} />
-      </Wrapper>
+      </FlexWrapper>
 
       <StyleWorkspaceInfo>
         <StyleWorkspaceTitle>

packages/app/src/components/workspace-modal/index.tsx

@@ -1,5 +1,5 @@
 import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
-import { Wrapper } from '@/ui/layout';
+import { FlexWrapper } from '@/ui/layout';
 import { useState } from 'react';
 import { CreateWorkspaceModal } from '../create-workspace';
 
@@ -97,11 +97,11 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                 setCreateWorkspaceOpen(true);
               }}
             >
-              <Wrapper>
+              <FlexWrapper>
                 <StyleWorkspaceAdd className="add-icon">
                   <AddIcon fontSize={18} />
                 </StyleWorkspaceAdd>
-              </Wrapper>
+              </FlexWrapper>
 
               <StyleWorkspaceInfo>
                 <StyleWorkspaceTitle>{t('New Workspace')}</StyleWorkspaceTitle>

packages/app/src/components/workspace-modal/styles.ts

@@ -45,6 +45,7 @@ export const StyledCard = styled.div<{
     borderRadius: '12px',
     border: `1px solid ${borderColor}`,
     ...displayFlex('flex-start', 'flex-start'),
+    marginBottom: '24px',
     ':hover': {
       background: theme.colors.hoverBackground,
       '.add-icon': {
@@ -125,7 +126,7 @@ export const StyledModalContent = styled('div')({
   padding: '8px 40px',
   marginTop: '72px',
   overflow: 'auto',
-  ...displayFlex('space-between', 'flex-start', 'column'),
+  ...displayFlex('space-between', 'flex-start', 'flex-start'),
   flexWrap: 'wrap',
 });
 export const StyledOperationWrapper = styled.div(() => {

packages/app/src/components/workspace-setting/member/MembersPage.tsx

@@ -25,7 +25,7 @@ import { useConfirm } from '@/providers/ConfirmProvider';
 import { toast } from '@/ui/toast';
 import useMembers from '@/hooks/use-members';
 import Loading from '@/components/loading';
-import { Wrapper } from '@/ui/layout';
+import { FlexWrapper } from '@/ui/layout';
 import { useTranslation } from '@affine/i18n';
 import { EnableWorkspaceButton } from '@/components/enable-workspace';
 
@@ -41,9 +41,9 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
       <StyledMemberContainer>
         <StyledMemberListContainer>
           {!loaded && (
-            <Wrapper justifyContent="center">
+            <FlexWrapper justifyContent="center">
               <Loading size={25} />
-            </Wrapper>
+            </FlexWrapper>
           )}
           {loaded && members.length === 0 && (
             <Empty width={648} sx={{ marginTop: '60px' }} height={300} />

packages/app/src/styles/helper.ts

@@ -2,12 +2,12 @@ import type { CSSProperties } from 'react';
 
 export const displayFlex = (
   justifyContent: CSSProperties['justifyContent'] = 'unset',
-  alignItems: CSSProperties['alignContent'] = 'unset',
+  alignItems: CSSProperties['alignItems'] = 'unset',
   alignContent: CSSProperties['alignContent'] = 'unset'
 ): {
   display: CSSProperties['display'];
   justifyContent: CSSProperties['justifyContent'];
-  alignItems: CSSProperties['alignContent'];
+  alignItems: CSSProperties['alignItems'];
   alignContent: CSSProperties['alignContent'];
 } => {
   return {

packages/app/src/ui/layout/Content.tsx

@@ -14,8 +14,21 @@ export type ContentProps = {
   lineNum?: number;
   children: string;
 };
-
-export const Content = styled.div<ContentProps>(
+export const Content = styled('div', {
+  shouldForwardProp: prop => {
+    return ![
+      'color',
+      'fontSize',
+      'weight',
+      'lineHeight',
+      'ellipsis',
+      'lineNum',
+      'width',
+      'maxWidth',
+      'align',
+    ].includes(prop);
+  },
+})<ContentProps>(
   ({
     theme,
     color,

packages/app/src/ui/layout/Wrapper.tsx

@@ -2,6 +2,14 @@ import type { CSSProperties } from 'react';
 import { styled } from '@/styles';
 
 export type WrapperProps = {
+  display?: CSSProperties['display'];
+  width?: CSSProperties['width'];
+  height?: CSSProperties['height'];
+  padding?: CSSProperties['padding'];
+  margin?: CSSProperties['margin'];
+};
+
+export type FlexWrapperProps = {
   display?: CSSProperties['display'];
   flexDirection?: CSSProperties['flexDirection'];
   justifyContent?: CSSProperties['justifyContent'];
@@ -13,9 +21,22 @@ export type WrapperProps = {
 
 // Sometimes we just want to wrap a component with a div to set flex or other styles, but we don't want to create a new component for it.
 export const Wrapper = styled('div', {
+  shouldForwardProp: prop => {
+    return !['display', 'width', 'height', 'padding', 'margin'].includes(prop);
+  },
+})<WrapperProps>(({ display, width, height, padding, margin }) => {
+  return {
+    display,
+    width,
+    height,
+    padding,
+    margin,
+  };
+});
+
+export const FlexWrapper = styled(Wrapper, {
   shouldForwardProp: prop => {
     return ![
-      'display',
       'justifyContent',
       'alignItems',
       'wrap',
@@ -24,18 +45,17 @@ export const Wrapper = styled('div', {
       'flexGrow',
     ].includes(prop);
   },
-})<WrapperProps>(
+})<FlexWrapperProps>(
   ({
-    display = 'flex',
-    justifyContent = 'flex-start',
-    alignItems = 'center',
+    justifyContent,
+    alignItems,
     wrap = false,
-    flexDirection = 'row',
-    flexShrink = '0',
-    flexGrow = '0',
+    flexDirection,
+    flexShrink,
+    flexGrow,
   }) => {
     return {
-      display,
+      display: 'flex',
       justifyContent,
       alignItems,
       flexWrap: wrap ? 'wrap' : 'nowrap',
@@ -46,4 +66,15 @@ export const Wrapper = styled('div', {
   }
 );
 
+// TODO: Complete me
+export const GridWrapper = styled(Wrapper, {
+  shouldForwardProp: prop => {
+    return ![''].includes(prop);
+  },
+})<WrapperProps>(() => {
+  return {
+    display: 'grid',
+  };
+});
+
 export default Wrapper;