feat: refactor ui components

packages/app/src/components/Header/header.tsx

@@ -1,29 +1,22 @@
-import React, { PropsWithChildren, useEffect, useState } from 'react';
-import {
-  LogoIcon,
-  MoreIcon,
-  ExportIcon,
-  Export2Markdown,
-  Export2HTML,
-  RightArrow,
-} from './icons';
+import React, { PropsWithChildren, useState } from 'react';
 import {
   StyledHeader,
-  StyledTitle,
-  StyledTitleWrapper,
-  StyledLogo,
   StyledHeaderRightSide,
-  IconButton,
   StyledHeaderContainer,
   StyledBrowserWarning,
   StyledCloseButton,
-  StyledMenuItemWrapper,
 } from './styles';
+import {
+  MiddleExportIcon,
+  EdgelessIcon,
+  PaperIcon,
+  MiddleExportToHtmlIcon,
+  MiddleExportToMarkdownIcon,
+  MoreVerticalIcon,
+} from '@blocksuite/icons';
 import { useEditor } from '@/providers/editor-provider';
-import EditorModeSwitch from '@/components/editor-mode-switch';
-import { EdgelessIcon, PaperIcon } from '../editor-mode-switch/icons';
 import ThemeModeSwitch from '@/components/theme-mode-switch';
-import { useModal } from '@/providers/global-modal-provider';
+import { IconButton } from '@/ui/button';
 import CloseIcon from '@mui/icons-material/Close';
 import { getWarningMessage, shouldShowWarning } from './utils';
 import { Menu, MenuItem } from '@/ui/menu';
@@ -33,14 +26,12 @@ const PopoverContent = () => {
   return (
     <>
       <MenuItem
+        icon={mode === 'page' ? <EdgelessIcon /> : <PaperIcon />}
         onClick={() => {
           setMode(mode === 'page' ? 'edgeless' : 'page');
         }}
       >
-        <StyledMenuItemWrapper>
-          {mode === 'page' ? <EdgelessIcon /> : <PaperIcon />}
-          Convert to {mode === 'page' ? 'Edgeless' : 'Page'}
-        </StyledMenuItemWrapper>
+        Convert to {mode === 'page' ? 'Edgeless' : 'Page'}
       </MenuItem>
       <Menu
         placement="left-start"
@@ -50,31 +41,23 @@ const PopoverContent = () => {
               onClick={() => {
                 editor && editor.contentParser.onExportHtml();
               }}
+              icon={<MiddleExportToHtmlIcon />}
             >
-              <StyledMenuItemWrapper>
-                <Export2HTML />
-                Export to HTML
-              </StyledMenuItemWrapper>
+              Export to HTML
             </MenuItem>
             <MenuItem
               onClick={() => {
                 editor && editor.contentParser.onExportMarkdown();
               }}
+              icon={<MiddleExportToMarkdownIcon />}
             >
-              <StyledMenuItemWrapper>
-                <Export2Markdown />
-                Export to Markdown
-              </StyledMenuItemWrapper>
+              Export to Markdown
             </MenuItem>
           </>
         }
       >
-        <MenuItem>
-          <StyledMenuItemWrapper>
-            <ExportIcon />
-            Export
-            <RightArrow />
-          </StyledMenuItemWrapper>
+        <MenuItem icon={<MiddleExportIcon />} isDir={true}>
+          Export
         </MenuItem>
       </Menu>
     </>
@@ -115,7 +98,7 @@ export const Header = ({ children }: PropsWithChildren<{}>) => {
           <ThemeModeSwitch />
           <Menu content={<PopoverContent />} placement="bottom-end">
             <IconButton>
-              <MoreIcon />
+              <MoreVerticalIcon />
             </IconButton>
           </Menu>
         </StyledHeaderRightSide>

packages/app/src/components/Header/icons.tsx

@@ -1,119 +0,0 @@
-import type { DOMAttributes, CSSProperties } from 'react';
-type IconProps = {
-  style?: CSSProperties;
-} & DOMAttributes<SVGElement>;
-
-export const RightArrow = ({ style = {}, ...props }: IconProps) => {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      style={style}
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M11.667 10.0007L8.33366 6.66732L8.33366 13.334L11.667 10.0007Z"
-      />
-    </svg>
-  );
-};
-export const Export2Markdown = ({ style = {}, ...props }: IconProps) => {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      style={style}
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M9.99963 1.66707V1.66699H10.833L16.6663 7.50033V7.50037L16.6663 7.50041V15.8337C16.6663 17.2145 15.5471 18.3337 14.1663 18.3337H5.83301C4.4523 18.3337 3.33301 17.2145 3.33301 15.8337V4.16707C3.33301 2.78636 4.4523 1.66707 5.83301 1.66707H9.99963ZM9.99963 3.00041H5.83301C5.18868 3.00041 4.66634 3.52274 4.66634 4.16707V15.8337C4.66634 16.4781 5.18868 17.0004 5.83301 17.0004H14.1663C14.8107 17.0004 15.333 16.4781 15.333 15.8337V8.33366H12.4996C11.1189 8.33366 9.99963 7.21437 9.99963 5.83366V3.00041ZM11.333 4.05265L14.2806 7.00033H12.4996C11.8553 7.00033 11.333 6.47799 11.333 5.83366V4.05265Z"
-      />
-      <path d="M11.245 14.1671L11.2683 11.2446H11.2508L10.1775 14.1671H9.4775L8.43333 11.2446H8.41583L8.43917 14.1671H7.5V10.0371H8.9175L9.85667 12.6854H9.88L10.7783 10.0371H12.2192V14.1671H11.245Z" />
-    </svg>
-  );
-};
-export const Export2HTML = ({ style = {}, ...props }: IconProps) => {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      style={style}
-      {...props}
-    >
-      <path d="M5.35987 18.3335V16.7055H3.84187V18.3335H2.90137V14.4395H3.84187V15.9135H5.35987V14.4395H6.30037V18.3335H5.35987Z" />
-      <path d="M8.76806 15.2425V18.3335H7.82756V15.2425H6.72756V14.4395H9.86806V15.2425H8.76806Z" />
-      <path d="M13.8284 18.3335L13.8504 15.578H13.8339L12.8219 18.3335H12.1619L11.1774 15.578H11.1609L11.1829 18.3335H10.2974V14.4395H11.6339L12.5194 16.9365H12.5414L13.3884 14.4395H14.7469V18.3335H13.8284Z" />
-      <path d="M15.5503 18.3335V14.4395H16.4963V17.514H18.0033V18.3335H15.5503Z" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M9.99963 1.66707V1.66699H10.833L11.333 2.16699L16.1663 7.00032L16.6663 7.50033V7.50037L16.6663 7.50041V13.3337H15.333V8.33366H15.333H12.4996C11.1189 8.33366 9.99963 7.21437 9.99963 5.83366V3.00041H5.83301C5.18868 3.00041 4.66634 3.52274 4.66634 4.16707V13.3337H3.33301V4.16707C3.33301 2.78636 4.4523 1.66707 5.83301 1.66707H9.99963ZM11.333 4.05265V5.83366C11.333 6.47799 11.8553 7.00032 12.4996 7.00032H14.2806L11.333 4.05265Z"
-      />
-    </svg>
-  );
-};
-export const LogoIcon = ({ style = {}, ...props }: IconProps) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      fill="currentColor"
-      style={style}
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        d="M10.552 2 4 21h3.838l4.168-13.14L16.176 21H20L13.447 2h-2.895Z"
-        clipRule="evenodd"
-      />
-    </svg>
-  );
-};
-
-export const MoreIcon = ({ style = {}, ...props }: IconProps) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      fill="currentColor"
-    >
-      <circle cx="12" cy="5.5" r="1.5" />
-      <circle cx="12" cy="12" r="1.5" />
-      <circle cx="12" cy="18.5" r="1.5" />
-    </svg>
-  );
-};
-export const ExportIcon = ({ style = {}, ...props }: IconProps) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      fill="currentColor"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12 3.19995C12.2121 3.19995 12.4156 3.28424 12.5656 3.43427L16.5656 7.43427L15.4343 8.56564L12.8 5.93132V14H11.2V5.93132L8.56564 8.56564L7.43427 7.43427L11.4343 3.43427C11.5843 3.28424 11.7878 3.19995 12 3.19995ZM3.79995 12V16.7992C3.79995 17.3724 3.80057 17.7543 3.82454 18.0476C3.84775 18.3317 3.88879 18.4616 3.93074 18.544C4.04579 18.7698 4.22937 18.9533 4.45516 19.0684C4.5375 19.1103 4.66747 19.1514 4.9515 19.1746C5.24487 19.1985 5.6267 19.1992 6.19995 19.1992H17.8C18.3732 19.1992 18.755 19.1985 19.0484 19.1746C19.3324 19.1514 19.4624 19.1103 19.5447 19.0684C19.7705 18.9533 19.9541 18.7698 20.0692 18.544C20.1111 18.4616 20.1522 18.3317 20.1754 18.0476C20.1993 17.7543 20.2 17.3724 20.2 16.7992V12H21.8V16.8314C21.8 17.364 21.8 17.8116 21.77 18.1779C21.7388 18.5609 21.6708 18.9249 21.4948 19.2703C21.2263 19.7972 20.798 20.2255 20.2711 20.494C19.9256 20.67 19.5617 20.738 19.1787 20.7693C18.8124 20.7992 18.3648 20.7992 17.8322 20.7992H6.16775C5.63509 20.7992 5.18749 20.7992 4.82121 20.7693C4.43823 20.738 4.07426 20.67 3.72878 20.494C3.20193 20.2255 2.77358 19.7972 2.50513 19.2703C2.3291 18.9249 2.26115 18.5609 2.22986 18.1779C2.19993 17.8116 2.19994 17.364 2.19995 16.8313L2.19995 12H3.79995Z"
-      />
-    </svg>
-  );
-};

packages/app/src/components/Header/styles.ts

@@ -1,5 +1,4 @@
 import { displayFlex, styled } from '@/styles';
-import { MenuItem } from '@/ui/menu';
 
 export const StyledHeaderContainer = styled.div<{ hasWarning: boolean }>(
   ({ hasWarning }) => {
@@ -47,56 +46,12 @@ export const StyledTitleWrapper = styled('div')({
   position: 'relative',
 });
 
-export const StyledLogo = styled('div')(({ theme }) => ({
-  color: theme.colors.primaryColor,
-  width: '60px',
-  height: '60px',
-  cursor: 'pointer',
-  marginLeft: '-22px',
-  ...displayFlex('center', 'center'),
-}));
-
 export const StyledHeaderRightSide = styled('div')({
   height: '100%',
   display: 'flex',
   alignItems: 'center',
 });
 
-export const StyledMenuItemWrapper = styled.div(({ theme }) => {
-  return {
-    height: '32px',
-    position: 'relative',
-    cursor: 'pointer',
-    ...displayFlex('flex-start', 'center'),
-    svg: {
-      width: '16px',
-      height: '16px',
-      marginRight: '14px',
-    },
-    'svg:nth-child(2)': {
-      position: 'absolute',
-      right: 0,
-      top: 0,
-      bottom: 0,
-      margin: 'auto',
-    },
-  };
-});
-
-export const IconButton = styled('div')(({ theme }) => {
-  return {
-    width: '32px',
-    height: '32px',
-    ...displayFlex('center', 'center'),
-    color: theme.colors.iconColor,
-    borderRadius: '5px',
-    ':hover': {
-      color: theme.colors.primaryColor,
-      background: theme.colors.hoverBackground,
-    },
-  };
-});
-
 export const StyledBrowserWarning = styled.div<{ show: boolean }>(
   ({ theme, show }) => {
     return {

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

@@ -3,6 +3,10 @@ import { Header } from '@/components/Header';
 import { styled } from '@/styles';
 import { Table, TableCell, TableHead, TableRow, TableBody } from '../ui/table';
 import { useConfirm } from '@/providers/confirm-provider';
+import { IconButton } from '@/ui/button';
+import { MoreVerticalIcon } from '@blocksuite/icons';
+import { Menu, MenuItem } from '@/ui/menu';
+
 const StyledTableContainer = styled.div(() => {
   return {
     height: 'calc(100vh - 60px)',
@@ -10,6 +14,17 @@ const StyledTableContainer = styled.div(() => {
     overflowY: 'auto',
   };
 });
+
+const OperationMenu = () => {
+  return (
+    <>
+      <MenuItem>Add to favourites</MenuItem>
+      <MenuItem>Open in new tab</MenuItem>
+      <MenuItem>Delete</MenuItem>
+    </>
+  );
+};
+
 export const AllPage = () => {
   const { confirm } = useConfirm();
   return (
@@ -47,7 +62,17 @@ export const AllPage = () => {
                   </TableCell>
                   <TableCell ellipsis={true}>2022-11-02 18:30</TableCell>
                   <TableCell ellipsis={true}>2022-11-02 18:30</TableCell>
-                  <TableCell>...</TableCell>
+                  <TableCell>
+                    <Menu
+                      content={<OperationMenu />}
+                      placement="bottom-end"
+                      disablePortal={true}
+                    >
+                      <IconButton hoverBackground="#E0E6FF">
+                        <MoreVerticalIcon />
+                      </IconButton>
+                    </Menu>
+                  </TableCell>
                 </TableRow>
               );
             })}

packages/app/src/ui/button/icon-button.tsx

@@ -0,0 +1,85 @@
+import {
+  HTMLAttributes,
+  cloneElement,
+  ReactElement,
+  Children,
+  CSSProperties,
+  forwardRef,
+} from 'react';
+import { StyledIconButton } from './styles';
+
+const SIZE_SMALL = 'small' as const;
+const SIZE_MIDDLE = 'middle' as const;
+const SIZE_NORMAL = 'normal' as const;
+// TODO: Designer is not sure about the size of the icon button
+const SIZE_CONFIG = {
+  [SIZE_SMALL]: {
+    iconSize: 16,
+    areaSize: 24,
+  },
+  [SIZE_MIDDLE]: {
+    iconSize: 20,
+    areaSize: 28,
+  },
+  [SIZE_NORMAL]: {
+    iconSize: 24,
+    areaSize: 32,
+  },
+} as const;
+
+export type IconButtonProps = {
+  size?:
+    | typeof SIZE_SMALL
+    | typeof SIZE_MIDDLE
+    | typeof SIZE_NORMAL
+    | [number, number];
+  iconSize?:
+    | typeof SIZE_SMALL
+    | typeof SIZE_MIDDLE
+    | typeof SIZE_NORMAL
+    | [number, number];
+  disabled?: boolean;
+  hoverBackground?: string;
+  hoverColor?: string;
+  hoverStyle?: CSSProperties;
+  children: ReactElement<HTMLAttributes<SVGElement>, 'svg'>;
+} & HTMLAttributes<HTMLButtonElement>;
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      size = 'normal',
+      iconSize = 'normal',
+      disabled = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [width, height] = Array.isArray(size)
+      ? size
+      : [SIZE_CONFIG[size]['areaSize'], SIZE_CONFIG[size]['areaSize']];
+    const [iconWidth, iconHeight] = Array.isArray(iconSize)
+      ? iconSize
+      : [SIZE_CONFIG[iconSize]['iconSize'], SIZE_CONFIG[iconSize]['iconSize']];
+
+    return (
+      <StyledIconButton
+        ref={ref}
+        disabled={disabled}
+        width={width}
+        height={height}
+        borderRadius={iconWidth / 4}
+        {...props}
+      >
+        {cloneElement(Children.only(children), {
+          width: iconWidth,
+          height: iconHeight,
+        })}
+      </StyledIconButton>
+    );
+  }
+);
+IconButton.displayName = 'IconButton';
+
+export default IconButton;

packages/app/src/ui/button/index.ts

@@ -0,0 +1 @@
+export * from './icon-button';

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

@@ -0,0 +1,55 @@
+import { absoluteCenter, displayFlex, styled } from '@/styles';
+import { CSSProperties } from 'react';
+
+export const StyledIconButton = styled.button<{
+  width: number;
+  height: number;
+  borderRadius: number;
+  disabled?: boolean;
+  hoverBackground?: string;
+  hoverColor?: string;
+  hoverStyle?: CSSProperties;
+}>(
+  ({
+    theme,
+    width,
+    height,
+    disabled,
+    hoverBackground,
+    hoverColor,
+    hoverStyle,
+  }) => {
+    return {
+      width,
+      height,
+      color: theme.colors.iconColor,
+      ...displayFlex('center', 'center'),
+      position: 'relative',
+      ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
+      transition: 'background .15s',
+
+      // TODO: we need to add @emotion/babel-plugin
+      '::after': {
+        content: '""',
+        width,
+        height,
+        borderRadius: width / 5,
+        transition: 'background .15s',
+        ...absoluteCenter({ horizontal: true, vertical: true }),
+      },
+
+      svg: {
+        position: 'relative',
+        zIndex: 1,
+      },
+
+      ':hover': {
+        color: hoverColor ?? theme.colors.primaryColor,
+        '::after': {
+          background: hoverBackground ?? theme.colors.hoverBackground,
+        },
+        ...(hoverStyle ?? {}),
+      },
+    };
+  }
+);

packages/app/src/ui/menu/index.ts

@@ -1,2 +1,3 @@
 export * from './menu';
-export { StyledMenuItem as MenuItem } from './styles';
+// export { StyledMenuItem as MenuItem } from './styles';
+export * from './menu-item';

packages/app/src/ui/menu/menu-item.tsx

@@ -0,0 +1,35 @@
+import {
+  cloneElement,
+  forwardRef,
+  HTMLAttributes,
+  PropsWithChildren,
+  ReactElement,
+} from 'react';
+import { StyledMenuItem, StyledArrow } from './styles';
+
+export type IconMenuProps = PropsWithChildren<{
+  isDir?: boolean;
+  icon?: ReactElement;
+}> &
+  HTMLAttributes<HTMLButtonElement>;
+
+export const MenuItem = forwardRef<HTMLButtonElement, IconMenuProps>(
+  ({ isDir = false, icon, children, ...props }, ref) => {
+    return (
+      <StyledMenuItem ref={ref} {...props}>
+        {icon &&
+          cloneElement(icon, {
+            width: 16,
+            height: 16,
+            style: {
+              marginRight: 14,
+            },
+          })}
+        {children}
+        {isDir ? <StyledArrow /> : null}
+      </StyledMenuItem>
+    );
+  }
+);
+MenuItem.displayName = 'MenuItem';
+export default MenuItem;

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

@@ -1,5 +1,6 @@
-import { styled } from '@/styles';
+import { displayFlex, styled } from '@/styles';
 import StyledPopperContainer from '../shared/Container';
+import { MiddleArrowRightIcon } from '@blocksuite/icons';
 
 export const StyledMenuWrapper = styled(StyledPopperContainer)(({ theme }) => {
   return {
@@ -12,23 +13,39 @@ export const StyledMenuWrapper = styled(StyledPopperContainer)(({ theme }) => {
   };
 });
 
-export const StyledMenuItem = styled('div')<{ popperVisible?: boolean }>(
-  ({ theme, popperVisible }) => {
-    return {
-      borderRadius: '5px',
-      padding: '0 14px',
+export const StyledArrow = styled(MiddleArrowRightIcon)(({ theme }) => {
+  return {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    margin: 'auto',
+  };
+});
 
-      color: popperVisible
-        ? theme.colors.primaryColor
-        : theme.colors.popoverColor,
-      backgroundColor: popperVisible
-        ? theme.colors.hoverBackground
-        : 'transparent',
+export const StyledMenuItem = styled.button<{
+  popperVisible?: boolean;
+  isDir?: boolean;
+}>(({ theme, popperVisible, isDir = false }) => {
+  return {
+    width: '100%',
+    borderRadius: '5px',
+    padding: '0 14px',
+    fontSize: '14px',
+    height: '32px',
+    ...displayFlex('flex-start', 'center'),
+    cursor: isDir ? 'pointer' : '',
+    position: 'relative',
+    color: popperVisible
+      ? theme.colors.primaryColor
+      : theme.colors.popoverColor,
+    backgroundColor: popperVisible
+      ? theme.colors.hoverBackground
+      : 'transparent',
 
-      ':hover': {
-        color: theme.colors.primaryColor,
-        backgroundColor: theme.colors.hoverBackground,
-      },
-    };
-  }
-);
+    ':hover': {
+      color: theme.colors.primaryColor,
+      backgroundColor: theme.colors.hoverBackground,
+    },
+  };
+});

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

@@ -48,11 +48,11 @@ export const StyledTableRow = styled.tr(({ theme }) => {
     td: {
       transition: 'background .15s',
     },
-    'td:first-child': {
+    'td:first-of-type': {
       borderTopLeftRadius: '10px',
       borderBottomLeftRadius: '10px',
     },
-    'td:last-child': {
+    'td:last-of-type': {
       borderTopRightRadius: '10px',
       borderBottomRightRadius: '10px',
     },