feat(custom): create round button, extend theme with custom property (#9

)

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>
+  );
+};

lib/components/Button/index.ts

@@ -0,0 +1 @@
+export { Button } from "./Button";

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>
+  );
+};

lib/components/ButtonBase/index.ts

@@ -0,0 +1 @@
+export { ButtonBase } from "./ButtonBase";

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";

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,
+      },
+    },
+  }
+}