refactor: build button component more like existing components

packages/components-react/package.json

@@ -43,6 +43,7 @@
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.21.5",
     "@babel/runtime": "7.21.5",
+    "@example/components-css": "workspace:*",
     "@rollup/plugin-babel": "6.0.3",
     "@rollup/plugin-commonjs": "24.1.0",
     "@rollup/plugin-node-resolve": "15.0.2",

packages/components-react/rollup.config.mjs

@@ -5,6 +5,7 @@ import { readFileSync } from "fs";
 import filesize from "rollup-plugin-filesize";
 import nodeExternal from "rollup-plugin-node-externals";
 import nodePolyfills from "rollup-plugin-node-polyfills";
+import postcss from "rollup-plugin-postcss";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import typescript from "rollup-plugin-typescript2";
 
@@ -46,7 +47,10 @@ export default [
         include: /node_modules/,
       }),
       nodePolyfills(),
-      // del({ targets: ['dist/*', 'pages/*'] }),
+      postcss({
+        extensions: [".css", ".scss"],
+        minimize: true,
+      }),
       typescript({ includeDependencies: false }),
       babel({
         presets: ["@babel/preset-react"],

packages/components-react/src/Button.tsx

@@ -1,9 +1,16 @@
-import { ForwardedRef, forwardRef, PropsWithChildren } from 'react';
+import clsx from 'clsx';
+import { ButtonHTMLAttributes, ForwardedRef, forwardRef, PropsWithChildren } from 'react';
+import '@example/components-css/button/index.scss';
+
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
 
 export const Button = forwardRef(
-  ({ children, className, ...restProps }: PropsWithChildren<any>, ref: ForwardedRef<HTMLButtonElement>) => {
+  (
+    { children, className, type, ...restProps }: PropsWithChildren<ButtonProps>,
+    ref: ForwardedRef<HTMLButtonElement>,
+  ) => {
     return (
-      <button ref={ref} className={className} type={'button'} {...restProps}>
+      <button ref={ref} className={clsx('example-button', className)} type={type ?? 'button'} {...restProps}>
         {children}
       </button>
     );