refactor: move component into a single package (#898)

packages/component/src/ui/button/TextButton.tsx

@@ -0,0 +1,54 @@
+import { cloneElement, Children, forwardRef } from 'react';
+import { StyledTextButton } from './styles';
+
+import { ButtonProps } from './interface';
+import { getSize } from './utils';
+
+export const TextButton = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      size = 'default',
+      disabled = false,
+      hoverBackground,
+      hoverColor,
+      hoverStyle,
+      shape = 'default',
+      icon,
+      type = 'default',
+      children,
+      bold = false,
+      ...props
+    },
+    ref
+  ) => {
+    const { iconSize } = getSize(size);
+
+    return (
+      <StyledTextButton
+        ref={ref}
+        disabled={disabled}
+        size={size}
+        shape={shape}
+        hoverBackground={hoverBackground}
+        hoverColor={hoverColor}
+        hoverStyle={hoverStyle}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        type={type}
+        bold={bold}
+        {...props}
+      >
+        {icon &&
+          cloneElement(Children.only(icon), {
+            width: iconSize,
+            height: iconSize,
+            className: `affine-button-icon ${icon.props.className ?? ''}`,
+          })}
+        {children && <span>{children}</span>}
+      </StyledTextButton>
+    );
+  }
+);
+TextButton.displayName = 'TextButton';
+
+export default TextButton;