feat: refactor layout component

packages/app/src/pages/all-page.tsx

@@ -7,7 +7,7 @@ import { IconButton } from '@/ui/button';
 import { MoreVertical_24pxIcon } from '@blocksuite/icons';
 import { Menu, MenuItem } from '@/ui/menu';
 import { PageMeta, useEditor } from '@/providers/editor-provider';
-import { Wrapper } from '@/ui/Layout';
+import { Wrapper } from '@/ui/layout';
 
 import {
   MiddleFavouritesIcon,

packages/app/src/ui/Layout/content.tsx

@@ -1,23 +0,0 @@
-import React, { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react';
-import { StyledContent } from '@/ui/Layout/styles';
-
-// This component should be just used to be contained the text content
-export type ContentProps = {
-  width?: CSSProperties['width'];
-  maxWidth?: CSSProperties['maxWidth'];
-  color?: CSSProperties['color'];
-  fontSize?: CSSProperties['fontSize'];
-  fontWeight?: CSSProperties['fontWeight'];
-  lineHeight?: CSSProperties['lineHeight'];
-  ellipsis?: boolean;
-  lineNum?: number;
-  children: string;
-};
-export const Content = ({
-  children,
-  ...props
-}: ContentProps & HTMLAttributes<HTMLDivElement>) => {
-  return <StyledContent {...props}>{children}</StyledContent>;
-};
-
-export default Content;

packages/app/src/ui/Layout/styles.ts

@@ -1,50 +0,0 @@
-import { styled, textEllipsis } from '@/styles';
-import { WrapperProps } from './wrapper';
-import { ContentProps } from '@/ui/Layout/content';
-
-export const StyledWrapper = styled.div<WrapperProps>(
-  ({
-    display,
-    justifyContent,
-    alignItems,
-    flexWrap,
-    flexDirection,
-    flexShrink,
-    flexGrow,
-  }) => {
-    return {
-      display,
-      justifyContent,
-      alignItems,
-      flexWrap,
-      flexDirection,
-      flexShrink,
-      flexGrow,
-    };
-  }
-);
-
-export const StyledContent = styled.div<ContentProps>(
-  ({
-    theme,
-    color,
-    fontSize,
-    fontWeight,
-    lineHeight,
-    ellipsis,
-    lineNum,
-    width,
-    maxWidth,
-  }) => {
-    return {
-      width,
-      maxWidth,
-      display: 'inline-block',
-      color: color ?? theme.colors.textColor,
-      fontSize: fontSize ?? theme.font.base,
-      fontWeight: fontWeight ?? 400,
-      lineHeight: lineHeight ?? 1.5,
-      ...(ellipsis ? textEllipsis(lineNum) : {}),
-    };
-  }
-);

packages/app/src/ui/Layout/wrapper.tsx

@@ -1,42 +0,0 @@
-import type { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react';
-import { StyledWrapper } from './styles';
-
-// 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 type WrapperProps = {
-  display?: CSSProperties['display'];
-  flexDirection?: CSSProperties['flexDirection'];
-  justifyContent?: CSSProperties['justifyContent'];
-  alignItems?: CSSProperties['alignItems'];
-  flexWrap?: CSSProperties['flexWrap'];
-  flexShrink?: CSSProperties['flexShrink'];
-  flexGrow?: CSSProperties['flexGrow'];
-};
-
-export const Wrapper = ({
-  children,
-  display = 'flex',
-  justifyContent = 'flex-start',
-  alignItems = 'center',
-  flexWrap = 'nowrap',
-  flexDirection = 'row',
-  flexShrink = '0',
-  flexGrow = '0',
-  ...props
-}: PropsWithChildren<WrapperProps & HTMLAttributes<HTMLDivElement>>) => {
-  return (
-    <StyledWrapper
-      display={display}
-      justifyContent={justifyContent}
-      alignItems={alignItems}
-      flexWrap={flexWrap}
-      flexDirection={flexDirection}
-      flexShrink={flexShrink}
-      flexGrow={flexGrow}
-      {...props}
-    >
-      {children}
-    </StyledWrapper>
-  );
-};
-
-export default Wrapper;

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

@@ -0,0 +1,42 @@
+import React, { CSSProperties } from 'react';
+import { styled, textEllipsis } from '@/styles';
+
+// This component should be just used to be contained the text content
+export type ContentProps = {
+  width?: CSSProperties['width'];
+  maxWidth?: CSSProperties['maxWidth'];
+  color?: CSSProperties['color'];
+  fontSize?: CSSProperties['fontSize'];
+  fontWeight?: CSSProperties['fontWeight'];
+  lineHeight?: CSSProperties['lineHeight'];
+  ellipsis?: boolean;
+  lineNum?: number;
+  children: string;
+};
+
+export const Content = styled.div<ContentProps>(
+  ({
+    theme,
+    color,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    ellipsis,
+    lineNum,
+    width,
+    maxWidth,
+  }) => {
+    return {
+      width,
+      maxWidth,
+      display: 'inline-block',
+      color: color ?? theme.colors.textColor,
+      fontSize: fontSize ?? theme.font.base,
+      fontWeight: fontWeight ?? 400,
+      lineHeight: lineHeight ?? 1.5,
+      ...(ellipsis ? textEllipsis(lineNum) : {}),
+    };
+  }
+);
+
+export default Content;

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

@@ -0,0 +1,37 @@
+import type { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react';
+import { styled } from '@/styles';
+
+export type WrapperProps = {
+  display?: CSSProperties['display'];
+  flexDirection?: CSSProperties['flexDirection'];
+  justifyContent?: CSSProperties['justifyContent'];
+  alignItems?: CSSProperties['alignItems'];
+  flexWrap?: CSSProperties['flexWrap'];
+  flexShrink?: CSSProperties['flexShrink'];
+  flexGrow?: CSSProperties['flexGrow'];
+};
+
+// 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<WrapperProps>(
+  ({
+    display = 'flex',
+    justifyContent = 'flex-start',
+    alignItems = 'center',
+    flexWrap = 'nowrap',
+    flexDirection = 'row',
+    flexShrink = '0',
+    flexGrow = '0',
+  }) => {
+    return {
+      display,
+      justifyContent,
+      alignItems,
+      flexWrap,
+      flexDirection,
+      flexShrink,
+      flexGrow,
+    };
+  }
+);
+
+export default Wrapper;