From 7105410f34e1750f3038c4ff83d27f52d0ccf6ed Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Mon, 7 Aug 2023 18:52:28 +0200
Subject: [PATCH] refactor: build button component more like existing
 components

---
 packages/components-react/package.json      |  1 +
 packages/components-react/rollup.config.mjs |  6 +++++-
 packages/components-react/src/Button.tsx    | 10 +++++++---
 pnpm-lock.yaml                              |  3 +++
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index e90d329a..b7fedf36 100644
--- a/packages/components-react/package.json
+++ b/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",
diff --git a/packages/components-react/rollup.config.mjs b/packages/components-react/rollup.config.mjs
index e03b3b28..0b8f0e66 100644
--- a/packages/components-react/rollup.config.mjs
+++ b/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"],
diff --git a/packages/components-react/src/Button.tsx b/packages/components-react/src/Button.tsx
index 17d0a6a3..e426e226 100644
--- a/packages/components-react/src/Button.tsx
+++ b/packages/components-react/src/Button.tsx
@@ -1,9 +1,13 @@
-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, ...restProps }: PropsWithChildren<ButtonProps>, ref: ForwardedRef<HTMLButtonElement>) => {
     return (
-      <button ref={ref} className={className} type={'button'} {...restProps}>
+      <button ref={ref} className={clsx('example-button', className)} {...restProps}>
         {children}
       </button>
     );
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bbed99d5..55baed0c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -142,6 +142,9 @@ importers:
       '@babel/runtime':
         specifier: 7.21.5
         version: 7.21.5
+      '@example/components-css':
+        specifier: workspace:*
+        version: link:../components-css
       '@rollup/plugin-babel':
         specifier: 6.0.3
         version: 6.0.3(@babel/core@7.21.5)(rollup@3.26.3)