chore: enable no-unused vars (#2181)

packages/component/src/ui/breadcrumbs/index.ts

@@ -2,7 +2,7 @@ import MuiBreadcrumbs from '@mui/material/Breadcrumbs';
 
 import { styled } from '../../styles';
 
-export const Breadcrumbs = styled(MuiBreadcrumbs)(({ theme }) => {
+export const Breadcrumbs = styled(MuiBreadcrumbs)(() => {
   return {
     color: 'var(--affine-text-primary-color)',
   };

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

@@ -104,7 +104,6 @@ export const StyledTextButton = styled('button', {
   >
 >(
   ({
-    theme,
     size = 'default',
     disabled,
     hoverBackground,

packages/component/src/ui/confirm/styles.ts

@@ -11,7 +11,7 @@ export const StyledModalWrapper = styled(ModalWrapper)(() => {
   };
 });
 
-export const StyledConfirmTitle = styled('div')(({ theme }) => {
+export const StyledConfirmTitle = styled('div')(() => {
   return {
     fontSize: 'var(--affine-font-h6)',
     fontWeight: 600,
@@ -20,7 +20,7 @@ export const StyledConfirmTitle = styled('div')(({ theme }) => {
   };
 });
 
-export const StyledConfirmContent = styled('div')(({ theme }) => {
+export const StyledConfirmContent = styled('div')(() => {
   return {
     fontSize: 'var(--affine-font-base)',
     textAlign: 'center',

packages/component/src/ui/divider/index.ts

@@ -2,7 +2,7 @@ import MuiDivider from '@mui/material/Divider';
 
 import { styled } from '../../styles';
 
-export const Divider = styled(MuiDivider)(({ theme }) => {
+export const Divider = styled(MuiDivider)(() => {
   return {
     borderColor: 'var(--affine-border-color)',
   };

packages/component/src/ui/empty/EmptySVG.tsx

@@ -1,7 +1,7 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
 import SvgIcon from '@mui/material/SvgIcon';
 
-export const EmptySVG = (props: SvgIconProps) => {
+export const EmptySVG = (_props: SvgIconProps) => {
   return (
     <SvgIcon
       width="200"

packages/component/src/ui/input/style.ts

@@ -8,7 +8,7 @@ export const StyledInput = styled('input')<{
   width?: CSSProperties['width'];
   height?: CSSProperties['height'];
   noBorder?: boolean;
-}>(({ theme, width, disabled, height, noBorder }) => {
+}>(({ width, disabled, height, noBorder }) => {
   return {
     width: width || '100%',
     height,

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

@@ -31,7 +31,6 @@ export const Content = styled('div', {
   },
 })<ContentProps>(
   ({
-    theme,
     color,
     fontSize,
     weight,

packages/component/src/ui/menu/MenuItem.tsx

@@ -17,7 +17,7 @@ export type IconMenuProps = PropsWithChildren<{
   HTMLAttributes<HTMLButtonElement>;
 
 export const MenuItem = forwardRef<HTMLButtonElement, IconMenuProps>(
-  ({ endIcon, icon, iconSize, children, ...props }, ref) => {
+  ({ endIcon, icon, children, ...props }, ref) => {
     return (
       <StyledMenuItem ref={ref} {...props}>
         {icon && <StyledStartIconWrapper>{icon}</StyledStartIconWrapper>}

packages/component/src/ui/menu/PureMenu.tsx

@@ -12,7 +12,6 @@ export const PureMenu = ({
   children,
   placement,
   width,
-  height,
   ...otherProps
 }: PureMenuProps) => {
   return (

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

@@ -6,7 +6,7 @@ import StyledPopperContainer from '../shared/Container';
 export const StyledMenuWrapper = styled(StyledPopperContainer)<{
   width?: CSSProperties['width'];
   height?: CSSProperties['height'];
-}>(({ theme, width, height }) => {
+}>(({ width, height }) => {
   return {
     width,
     height,
@@ -18,14 +18,14 @@ export const StyledMenuWrapper = styled(StyledPopperContainer)<{
   };
 });
 
-export const StyledStartIconWrapper = styled('div')(({ theme }) => {
+export const StyledStartIconWrapper = styled('div')(() => {
   return {
     marginRight: '12px',
     fontSize: '20px',
     color: 'var(--affine-icon-color)',
   };
 });
-export const StyledEndIconWrapper = styled('div')(({ theme }) => {
+export const StyledEndIconWrapper = styled('div')(() => {
   return {
     marginLeft: '12px',
     fontSize: '20px',
@@ -33,7 +33,7 @@ export const StyledEndIconWrapper = styled('div')(({ theme }) => {
   };
 });
 
-export const StyledContent = styled('div')(({ theme }) => {
+export const StyledContent = styled('div')(() => {
   return {
     textAlign: 'left',
     flexGrow: 1,
@@ -45,7 +45,7 @@ export const StyledContent = styled('div')(({ theme }) => {
 export const StyledMenuItem = styled('button')<{
   isDir?: boolean;
   disabled?: boolean;
-}>(({ theme, isDir = false, disabled = false }) => {
+}>(({ isDir = false, disabled = false }) => {
   return {
     width: '100%',
     borderRadius: '5px',

packages/component/src/ui/modal/ModalWrapper.tsx

@@ -6,7 +6,7 @@ export const ModalWrapper = styled('div')<{
   width?: CSSProperties['width'];
   height?: CSSProperties['height'];
   minHeight?: CSSProperties['minHeight'];
-}>(({ theme, width, height, minHeight }) => {
+}>(({ width, height, minHeight }) => {
   return {
     width,
     height,

packages/component/src/ui/modal/styles.ts

@@ -4,7 +4,7 @@ import type { CSSProperties } from 'react';
 import { styled } from '../../styles';
 import { Wrapper } from '../layout';
 
-export const StyledBackdrop = styled('div')(({ theme }) => {
+export const StyledBackdrop = styled('div')(() => {
   return {
     zIndex: '-1',
     position: 'fixed',
@@ -23,7 +23,7 @@ export const StyledModal = styled(ModalUnstyled, {
 })<{
   alignItems: CSSProperties['alignItems'];
   justifyContent: CSSProperties['justifyContent'];
-}>(({ theme, alignItems, justifyContent }) => {
+}>(({ alignItems, justifyContent }) => {
   return {
     width: '100vw',
     height: '100vh',

packages/component/src/ui/popper/PopoverArrow.tsx

@@ -73,7 +73,7 @@ const getArrowStyle = (
 
 const StyledArrow = styled('span')<{
   placement?: PopperArrowProps['placement'];
-}>(({ placement, theme }) => {
+}>(({ placement }) => {
   return {
     position: 'absolute',
     fontSize: '7px',

packages/component/src/ui/popper/Popper.tsx

@@ -189,7 +189,7 @@ export const BasicStyledPopper = styled(PopperUnstyled, {
     !['zIndex'].some(name => name === propName),
 })<{
   zIndex?: CSSProperties['zIndex'];
-}>(({ zIndex, theme }) => {
+}>(({ zIndex }) => {
   return {
     zIndex: zIndex ?? 'var(--affine-z-index-popover)',
   };

packages/component/src/ui/shared/Container.tsx

@@ -43,7 +43,7 @@ export const placementToContainerDirection: Record<
 
 export const StyledPopperContainer = styled('div')<{
   placement?: PopperPlacementType;
-}>(({ theme, placement = 'top' }) => {
+}>(({ placement = 'top' }) => {
   const direction = placementToContainerDirection[placement];
   const borderRadius = getBorderRadius(
     direction,

packages/component/src/ui/switch/Switch.tsx

@@ -2,7 +2,7 @@
 import { styled } from '@affine/component';
 import { useState } from 'react';
 
-const StyledLabel = styled('label')(({ theme }) => {
+const StyledLabel = styled('label')(() => {
   return {
     display: 'flex',
     alignItems: 'center',
@@ -10,7 +10,7 @@ const StyledLabel = styled('label')(({ theme }) => {
     cursor: 'pointer',
   };
 });
-const StyledInput = styled('input')(({ theme }) => {
+const StyledInput = styled('input')(() => {
   return {
     opacity: 0,
     position: 'absolute',

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

@@ -2,7 +2,7 @@ import { styled, textEllipsis } from '../../styles';
 import type { TableCellProps } from './interface';
 
 export const StyledTable = styled('table')<{ tableLayout: 'auto' | 'fixed' }>(
-  ({ theme, tableLayout }) => {
+  ({ tableLayout }) => {
     return {
       fontSize: 'var(--affine-font-base)',
       color: 'var(--affine-text-primary-color)',
@@ -53,7 +53,7 @@ export const StyledTableHead = styled('thead')(() => {
   };
 });
 
-export const StyledTableRow = styled('tr')(({ theme }) => {
+export const StyledTableRow = styled('tr')(() => {
   return {
     td: {
       transition: 'background .15s',

packages/component/src/ui/tooltip/Tooltip.tsx

@@ -3,7 +3,7 @@ import type { TooltipProps } from '@mui/material';
 import { styled } from '../../styles';
 import { Popper, type PopperProps } from '../popper';
 import StyledPopperContainer from '../shared/Container';
-const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => {
+const StyledTooltip = styled(StyledPopperContainer)(() => {
   return {
     maxWidth: '320px',
     boxShadow: 'var(--affine-float-button-shadow)',

packages/component/src/ui/tree-view/TreeView.tsx

@@ -19,7 +19,6 @@ export const TreeView = <RenderProps,>({
   enableKeyboardSelection,
   onSelect,
   enableDnd = true,
-  initialCollapsedIds = [],
   disableCollapse,
   onDrop,
   ...otherProps

packages/component/src/ui/tree-view/hooks/useCollapsed.ts

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import type { TreeNodeProps } from '../types';
-export const useCollapsed = <RenderProps>({
+export const useCollapsed = ({
   initialCollapsedIds = [],
   disableCollapse = false,
 }: {

packages/component/src/ui/tree-view/types.ts

@@ -31,7 +31,7 @@ export type Node<RenderProps = unknown> = {
   renderBottomLine?: boolean;
 };
 
-type CommonProps<RenderProps = unknown> = {
+type CommonProps = {
   enableDnd?: boolean;
   enableKeyboardSelection?: boolean;
   indent?: CSSProperties['paddingLeft'];
@@ -51,7 +51,7 @@ export type TreeNodeProps<RenderProps = unknown> = {
   allowDrop?: boolean;
   selectedId?: string;
   draggingId?: string;
-} & CommonProps<RenderProps>;
+} & CommonProps;
 
 export type TreeNodeItemProps<RenderProps = unknown> = {
   collapsed: boolean;
@@ -64,7 +64,7 @@ export type TreeViewProps<RenderProps = unknown> = {
   data: Node<RenderProps>[];
   initialCollapsedIds?: string[];
   disableCollapse?: boolean;
-} & CommonProps<RenderProps>;
+} & CommonProps;
 
 export type NodeLIneProps<RenderProps = unknown> = {
   allowDrop: boolean;