chore: avoid memo override exported component displayName

components/avatar/avatar.tsx

@@ -39,7 +39,7 @@ const safeText = (text: string): string => {
   return text.slice(0, 3)
 }
 
-const Avatar: React.FC<AvatarProps> = React.memo(({
+const Avatar: React.FC<AvatarProps> = ({
   src, stacked, text, size, isSquare, className, ...props
 }) => {
   const theme = useTheme()
@@ -91,14 +91,14 @@ const Avatar: React.FC<AvatarProps> = React.memo(({
       `}</style>
     </span>
   )
-})
+}
 
-type AvatarComponent<P = {}> = React.FC<P> & {
+type MemoAvatarComponent<P = {}> = React.NamedExoticComponent<P> & {
   Group: typeof AvatarGroup
 }
 
 type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs
 
-(Avatar as AvatarComponent<ComponentProps>).defaultProps = defaultProps
+Avatar.defaultProps = defaultProps
 
-export default Avatar as AvatarComponent<ComponentProps>
+export default React.memo(Avatar) as MemoAvatarComponent<ComponentProps>

components/badge/badge.tsx

@@ -40,7 +40,7 @@ const getBgColor = (type: NormalTypes, palette: ZeitUIThemesPalette) => {
   return colors[type]
 }
 
-const Badge: React.FC<React.PropsWithChildren<BadgeProps>> = React.memo(({
+const Badge: React.FC<React.PropsWithChildren<BadgeProps>> = ({
   type, size, className, children, ...props
 }) => {
   const theme = useTheme()
@@ -70,6 +70,8 @@ const Badge: React.FC<React.PropsWithChildren<BadgeProps>> = React.memo(({
       `}</style>
     </span>
   )
-})
+}
+
+const MemoBadge = React.memo<React.PropsWithChildren<BadgeProps>>(Badge)
 
-export default withDefaults(Badge, defaultProps)
+export default withDefaults(MemoBadge, defaultProps)

components/button-dropdown/button-dropdown-item.tsx

@@ -24,7 +24,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>
 export type ButtonDropdownItemProps = Props & typeof defaultProps & NativeAttrs
 
-const ButtonDropdownItem: React.FC<React.PropsWithChildren<ButtonDropdownItemProps>> = React.memo(({
+const ButtonDropdownItem: React.FC<React.PropsWithChildren<ButtonDropdownItemProps>> = ({
   children, onClick, className, main, type: selfType, ...props
 }) => {
   const theme = useTheme()
@@ -76,6 +76,8 @@ const ButtonDropdownItem: React.FC<React.PropsWithChildren<ButtonDropdownItemPro
       `}</style>
     </button>
   )
-})
+}
+
+const MemoButtonDropdownItem = React.memo(ButtonDropdownItem)
 
-export default withDefaults(ButtonDropdownItem, defaultProps)
+export default withDefaults(MemoButtonDropdownItem, defaultProps)

components/button-dropdown/button-dropdown.tsx

@@ -35,7 +35,7 @@ const stopPropagation = (event: MouseEvent<HTMLElement>) => {
   event.nativeEvent.stopImmediatePropagation()
 }
 
-const ButtonDropdown: React.FC<React.PropsWithChildren<ButtonDropdownProps>> = React.memo(({
+const ButtonDropdown: React.FC<React.PropsWithChildren<ButtonDropdownProps>> = ({
   children, type, size, auto, className, disabled, loading, ...props
 }) => {
   const ref = useRef<HTMLDivElement>(null)
@@ -137,15 +137,14 @@ const ButtonDropdown: React.FC<React.PropsWithChildren<ButtonDropdownProps>> = R
       </div>
     </ButtonDropdownContext.Provider>
   )
-})
-
-ButtonDropdown.defaultProps = defaultProps
+}
 
-type ButtonDropdownComponent<P = {}> = React.FC<P> & {
+type MemoButtonDropdownComponent<P = {}> = React.NamedExoticComponent<P> & {
   Item: typeof ButtonDropdownItem
 }
-
 type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs
 
-export default ButtonDropdown as ButtonDropdownComponent<ComponentProps>
+ButtonDropdown.defaultProps = defaultProps
+
+export default React.memo(ButtonDropdown) as MemoButtonDropdownComponent<ComponentProps>
 

components/button-dropdown/icon.tsx

@@ -5,7 +5,7 @@ interface Props {
   height?: string
 }
 
-const ButtonDropdownIcon: React.FC<Props> = React.memo(({
+const ButtonDropdownIcon: React.FC<Props> = ({
   color, height,
 }) => {
   return (
@@ -20,6 +20,8 @@ const ButtonDropdownIcon: React.FC<Props> = React.memo(({
       `}</style>
     </svg>
   )
-})
+}
+
+const MemoButtonDropdownIcon = React.memo(ButtonDropdownIcon)
 
-export default ButtonDropdownIcon
+export default MemoButtonDropdownIcon

components/button/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Button should render empty button correctly 1`] = `
-<Memo
+<Memo(Button)
   auto={false}
   className=""
   disabled={false}
@@ -17,7 +17,7 @@ exports[`Button should render empty button correctly 1`] = `
 exports[`Button should render special styles 1`] = `ReactWrapper {}`;
 
 exports[`Button should render special styles 2`] = `
-<Memo
+<Memo(Button)
   auto={false}
   className=""
   disabled={false}
@@ -29,5 +29,5 @@ exports[`Button should render special styles 2`] = `
   type="default"
 >
   button
-</Memo>
+</Memo(Button)>
 `;

components/button/button.drip.tsx

@@ -15,7 +15,7 @@ const defaultProps = {
 
 export type ButtonDrip = Props & typeof defaultProps
 
-const ButtonDrip: React.FC<ButtonDrip> = React.memo(({
+const ButtonDrip: React.FC<ButtonDrip> = ({
   x, y, color, onCompleted
 }) => {
   const dripRef = useRef<HTMLDivElement>(null)
@@ -80,7 +80,9 @@ const ButtonDrip: React.FC<ButtonDrip> = React.memo(({
       `}</style>
     </div>
   )
-})
+}
+
+const MemoButtonDrip = React.memo<ButtonDrip>(ButtonDrip)
 
-export default withDefaults(ButtonDrip, defaultProps)
+export default withDefaults(MemoButtonDrip, defaultProps)
 

components/button/button.tsx

@@ -34,7 +34,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>
 export type ButtonProps = Props & typeof defaultProps & NativeAttrs
 
-const Button: React.FC<React.PropsWithChildren<ButtonProps>> = React.memo(({
+const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({
   children, disabled, type, loading, shadow, ghost, effect, onClick,
   auto, size, className, ...props
 }) => {
@@ -145,6 +145,8 @@ const Button: React.FC<React.PropsWithChildren<ButtonProps>> = React.memo(({
       `}</style>
     </button>
   )
-})
+}
+
+const MemoButton = React.memo<React.PropsWithChildren<ButtonProps>>(Button)
 
-export default withDefaults(Button, defaultProps)
+export default withDefaults(MemoButton, defaultProps)

components/capacity/capacity.tsx

@@ -27,7 +27,7 @@ const getColor = (val: number, palette: ZeitUIThemesPalette): string => {
   return palette.errorDark
 }
 
-const Capacity: React.FC<CapacityProps> = React.memo(({
+const Capacity: React.FC<CapacityProps> = ({
   value, limit, color: userColor, className, ...props
 }) => {
   const theme = useTheme()
@@ -60,6 +60,8 @@ const Capacity: React.FC<CapacityProps> = React.memo(({
       `}</style>
     </div>
   )
-})
+}
+
+const MemoCapacity = React.memo(Capacity)
 
-export default withDefaults(Capacity, defaultProps)
+export default withDefaults(MemoCapacity, defaultProps)

components/card/card-content.tsx

@@ -31,4 +31,6 @@ const CardContent: React.FC<React.PropsWithChildren<CardContentProps>> = ({
   )
 }
 
-export default withDefaults(CardContent, defaultProps)
+const MemoCardContent = React.memo(CardContent)
+
+export default withDefaults(MemoCardContent, defaultProps)

components/card/card-footer.tsx

@@ -49,4 +49,6 @@ const CardFooter: React.FC<React.PropsWithChildren<CardFooterProps>> = ({
   )
 }
 
-export default withDefaults(CardFooter, defaultProps)
+const MemoCardFooter = React.memo(CardFooter)
+
+export default withDefaults(MemoCardFooter, defaultProps)

components/card/card.tsx

@@ -26,7 +26,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type CardProps = Props & typeof defaultProps & NativeAttrs
 
-const Card: React.FC<React.PropsWithChildren<CardProps>> = React.memo(({
+const Card: React.FC<React.PropsWithChildren<CardProps>> = ({
   children, hoverable, className, shadow, type, width, ...props
 }) => {
   const theme = useTheme()
@@ -88,17 +88,16 @@ const Card: React.FC<React.PropsWithChildren<CardProps>> = React.memo(({
       `}</style>
     </div>
   )
-})
+}
 
-type CardComponent<P = {}> = React.FC<P> & {
+type MemoCardComponent<P = {}> = React.NamedExoticComponent<P> & {
   Footer: typeof CardFooter
   Actions: typeof CardFooter
   Content: typeof CardContent
   Body: typeof CardContent
 }
-
 type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs
 
-(Card as CardComponent<ComponentProps>).defaultProps = defaultProps
+Card.defaultProps = defaultProps
 
-export default Card as CardComponent<ComponentProps>
+export default React.memo(Card) as MemoCardComponent<ComponentProps>

components/checkbox/checkbox-group.tsx

@@ -18,7 +18,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type CheckboxGroupProps = Props & typeof defaultProps & NativeAttrs
 
-const CheckboxGroup: React.FC<React.PropsWithChildren<CheckboxGroupProps>> = React.memo(({
+const CheckboxGroup: React.FC<React.PropsWithChildren<CheckboxGroupProps>> = ({
   disabled, onChange, value, children, className, ...props
 }) => {
   const [selfVal, setSelfVal] = useState<string[]>([])
@@ -59,6 +59,6 @@ const CheckboxGroup: React.FC<React.PropsWithChildren<CheckboxGroupProps>> = Rea
       </div>
     </CheckboxContext.Provider>
   )
-})
+}
 
 export default withDefaults(CheckboxGroup, defaultProps)

components/checkbox/checkbox.icon.tsx

@@ -6,7 +6,7 @@ interface Props {
   checked?: boolean
 }
 
-const CheckboxIcon: React.FC<Props> = React.memo(({
+const CheckboxIcon: React.FC<Props> = ({
   disabled, checked,
 }) => {
   const theme = useTheme()
@@ -47,6 +47,8 @@ const CheckboxIcon: React.FC<Props> = React.memo(({
       `}</style>
     </>
   )
-})
+}
+
+const MemoCheckboxIcon = React.memo(CheckboxIcon)
 
-export default CheckboxIcon
+export default MemoCheckboxIcon

components/checkbox/checkbox.tsx

@@ -34,7 +34,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.LabelHTMLAttributes<any>, keyof Props>
 export type CheckboxProps = Props & typeof defaultProps & NativeAttrs
 
-const Checkbox: React.FC<CheckboxProps> = React.memo(({
+const Checkbox: React.FC<CheckboxProps> = ({
   checked, initialChecked, disabled, onChange, className, children, value, ...props
 }) => {
   const [selfChecked, setSelfChecked] = useState<boolean>(initialChecked)
@@ -119,8 +119,7 @@ const Checkbox: React.FC<CheckboxProps> = React.memo(({
       `}</style>
     </label>
   )
-})
-
+}
 
 Checkbox.defaultProps = defaultProps
 

components/code/code.tsx

@@ -20,7 +20,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type CodeProps = Props & typeof defaultProps & NativeAttrs
 
-const Code: React.FC<React.PropsWithChildren<CodeProps>> = React.memo(({
+const Code: React.FC<React.PropsWithChildren<CodeProps>> = ({
   children, block, bash, darkBash, className, width, ...props
 }) => {
   if (bash) {
@@ -65,6 +65,8 @@ const Code: React.FC<React.PropsWithChildren<CodeProps>> = React.memo(({
       `}</style>
     </>
   )
-})
+}
+
+const MemoCode = React.memo(Code)
 
-export default withDefaults(Code, defaultProps)
+export default withDefaults(MemoCode, defaultProps)

components/col/col.tsx

@@ -18,7 +18,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type ColProps = Props & typeof defaultProps & NativeAttrs
 
-const Col: React.FC<React.PropsWithChildren<ColProps>> = React.memo(({
+const Col: React.FC<React.PropsWithChildren<ColProps>> = ({
   component, children, span, offset, className, ...props
 }) => {
   const Component = component
@@ -38,6 +38,8 @@ const Col: React.FC<React.PropsWithChildren<ColProps>> = React.memo(({
       `}</style>
     </Component>
   )
-})
+}
+
+const MemoCol = React.memo(Col)
 
-export default withDefaults(Col, defaultProps)
+export default withDefaults(MemoCol, defaultProps)

components/collapse/collapse-icon.tsx

@@ -20,4 +20,6 @@ const CollapseIcon: React.FC<Props> = ({ active }) => {
   )
 }
 
-export default CollapseIcon
+const MemoCollapseIcon = React.memo(CollapseIcon)
+
+export default MemoCollapseIcon

components/description/description.tsx

@@ -17,7 +17,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type DescriptionProps = Props & typeof defaultProps & NativeAttrs
 
-const Description: React.FC<DescriptionProps> = React.memo(({
+const Description: React.FC<DescriptionProps> = ({
   title, content, className, ...props
 }) => {
   const theme = useTheme()
@@ -56,6 +56,8 @@ const Description: React.FC<DescriptionProps> = React.memo(({
       `}</style>
     </dl>
   )
-})
+}
+
+const MemoDescription = React.memo(Description)
 
-export default withDefaults(Description, defaultProps)
+export default withDefaults(MemoDescription, defaultProps)

components/display/display.tsx

@@ -18,7 +18,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type DisplayProps = Props & typeof defaultProps & NativeAttrs
 
-const Display: React.FC<React.PropsWithChildren<DisplayProps>> = React.memo(({
+const Display: React.FC<React.PropsWithChildren<DisplayProps>> = ({
   children, caption, shadow, className, width, ...props
 }) => {
   const theme = useTheme()
@@ -66,6 +66,8 @@ const Display: React.FC<React.PropsWithChildren<DisplayProps>> = React.memo(({
       `}</style>
     </div>
   )
-})
+}
+
+const MemoDisplay = React.memo(Display)
 
-export default withDefaults(Display, defaultProps)
+export default withDefaults(MemoDisplay, defaultProps)