From c5c073ccea931497f0d5a014046add3b829c28cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C3=A9lio=20Amaral?= <a31859@users.noreply.github.com>
Date: Thu, 11 Nov 2021 19:59:20 +0000
Subject: [PATCH] feat(custom): create round button, extend theme with custom
 property (#9)

---
 lib/components/Button/Button.tsx         | 25 +++++++++++++
 lib/components/Button/index.ts           |  1 +
 lib/components/ButtonBase/ButtonBase.tsx | 25 +++++++++++++
 lib/components/ButtonBase/index.ts       |  1 +
 lib/index.ts                             |  3 ++
 lib/types.ts                             | 46 ++++++++++++++++++++++++
 6 files changed, 101 insertions(+)
 create mode 100644 lib/components/Button/Button.tsx
 create mode 100644 lib/components/Button/index.ts
 create mode 100644 lib/components/ButtonBase/ButtonBase.tsx
 create mode 100644 lib/components/ButtonBase/index.ts

diff --git a/lib/components/Button/Button.tsx b/lib/components/Button/Button.tsx
new file mode 100644
index 0000000..612f25d
--- /dev/null
+++ b/lib/components/Button/Button.tsx
@@ -0,0 +1,25 @@
+import React, { FC } from "react";
+import { Button as Btn, ButtonProps, makeStyles, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+
+export const Button: FC<{ rounded?: boolean } & ButtonProps> = ({
+  children,
+  className,
+  rounded = false,
+  ...rest
+}) => {
+  const { custom } = useTheme();
+  const useStyles = makeStyles({
+    rounded: {
+      // using a high value for large buttons, for most cases a 28px should be enough
+      borderRadius: "250px",
+    },
+  });
+  const classes = useStyles();
+
+  return (
+    <Btn {...rest} className={clsx(className, { [classes.rounded]: rounded || custom?.button?.rounded })}>
+      {children}
+    </Btn>
+  );
+};
diff --git a/lib/components/Button/index.ts b/lib/components/Button/index.ts
new file mode 100644
index 0000000..0064dee
--- /dev/null
+++ b/lib/components/Button/index.ts
@@ -0,0 +1 @@
+export { Button } from "./Button";
diff --git a/lib/components/ButtonBase/ButtonBase.tsx b/lib/components/ButtonBase/ButtonBase.tsx
new file mode 100644
index 0000000..dd12e30
--- /dev/null
+++ b/lib/components/ButtonBase/ButtonBase.tsx
@@ -0,0 +1,25 @@
+import React, { FC } from "react";
+import { ButtonBase as Btn, ButtonBaseProps, makeStyles, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+
+export const ButtonBase: FC<{ rounded?: boolean } & ButtonBaseProps> = ({
+  children,
+  className,
+  rounded = false,
+  ...rest
+}) => {
+  const { custom } = useTheme();
+  const useStyles = makeStyles({
+    rounded: {
+      // using a high value for large buttons, for most cases a 28px should be enough
+      borderRadius: "250px",
+    },
+  });
+  const classes = useStyles();
+
+  return (
+    <Btn {...rest} className={clsx(className, { [classes.rounded]: rounded || custom?.button?.rounded })}>
+      {children}
+    </Btn>
+  );
+};
diff --git a/lib/components/ButtonBase/index.ts b/lib/components/ButtonBase/index.ts
new file mode 100644
index 0000000..9206098
--- /dev/null
+++ b/lib/components/ButtonBase/index.ts
@@ -0,0 +1 @@
+export { ButtonBase } from "./ButtonBase";
diff --git a/lib/index.ts b/lib/index.ts
index 88325eb..066350d 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -8,6 +8,9 @@ export { default as i18n, changeLocale, registerTranslations } from "./i18n";
 
 // re-exports all mui-ui core package so this is the source of truth across implementations
 export * from "@material-ui/core";
+// this Button will overwrite material-ui/core/Button export
+export { Button } from "./components/Button";
+export { ButtonBase } from "./components/ButtonBase";
 
 // types
 export * from "./types";
diff --git a/lib/types.ts b/lib/types.ts
index 7166c5c..49548f2 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -165,3 +165,49 @@ declare module "@material-ui/core/styles/createTypography" {
     url: string;
   }
 }
+
+declare module "@material-ui/core/styles/createMuiTheme" {
+  interface Theme {
+    custom: {
+      images: {
+        headerBackground: string,
+        homeSlider: {
+          background: string,
+          slide1: string,
+          slide2: string,
+          slide3: string,
+        },
+        auth: string,
+        marketplace: {
+          hero: string,
+          background: string,
+        },
+      },
+      button: {
+        rounded: boolean,
+      },
+    },
+  }
+
+  interface ThemeOptions {
+    custom?: {
+      images?: {
+        headerBackground?: string,
+        homeSlider?: {
+          background?: string,
+          slide1?: string,
+          slide2?: string,
+          slide3?: string,
+        },
+        auth?: string,
+        marketplace?: {
+          hero?: string,
+          background?: string,
+        },
+      },
+      button?: {
+        rounded?: boolean,
+      },
+    },
+  }
+}