fix button types

2023-08-23 13:56:45 +03:00 · 2023-08-23 13:56:45 +03:00 · 30c5bcc6bd
commit 30c5bcc6bd
parent 5e4262ef49
7 changed files with 117 additions and 89 deletions
--- a/lib/components/AvatarButton.tsx
+++ b/lib/components/AvatarButton.tsx
@ -1,14 +1,21 @@
 import { Avatar, IconButton, IconButtonProps, Typography, useTheme } from "@mui/material";
 import { deepmerge } from "@mui/utils";
- 
+import { ForwardRefExoticComponent, RefAttributes } from "react";
+import { LinkProps } from "react-router-dom";

-export function AvatarButton(props: IconButtonProps) {
+
+type Props = IconButtonProps & {
+    component?: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
+    to?: string;
+};
+
+export function AvatarButton(props: Props) {
    const theme = useTheme();

    return (
        <IconButton
            {...deepmerge({
-                sx:{
+                sx: {
                    height: 36,
                    width: 36,
                    p: 0,
@ -19,7 +26,7 @@ export function AvatarButton(props: IconButtonProps) {
                        backgroundColor: theme.palette.purple.dark,
                        color: theme.palette.purple.dark,
                        border: "1px solid black",
-                    }, 
+                    },
                }
            }, props)}
        >
--- a/lib/components/BurgerButton.tsx
+++ b/lib/components/BurgerButton.tsx
@ -1,31 +1,34 @@
-import { IconButton, IconButtonProps, SxProps, Theme, useTheme } from "@mui/material";
+import { IconButton, IconButtonProps, useTheme } from "@mui/material";
+import { ForwardRefExoticComponent, RefAttributes } from "react";
+import { LinkProps } from "react-router-dom";
+import { deepmerge } from "@mui/utils";


-interface Props {
-    onClick?: IconButtonProps["onClick"];
-    sx?: SxProps<Theme>;
-    color?: string;
-}
+type Props = IconButtonProps & {
+    component?: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
+    to?: string;
+};

-export function BurgerButton({ onClick, sx, color = "white" }: Props) {
+export function BurgerButton(props: Props) {
    const theme = useTheme();

    return (
        <IconButton
-            onClick={onClick}
-            sx={{
-                height: 30,
-                width: 30,
-                p: 0,
-                color,
-                "&:hover": {
-                    color: theme.palette.purple.dark,
+            {...deepmerge({
+                sx: {
+                    height: 30,
+                    width: 30,
+                    p: 0,
+                    color: "black",
+                    "&:hover": {
+                        color: theme.palette.purple.dark,
+                        backgroundColor: "rgb(0 0 0 / 0)",
+                    },
+                    "&:active": {
+                        color: theme.palette.purple.dark,
+                    },
                },
-                "&:active": {
-                    color: theme.palette.purple.dark,
-                },
-                ...sx,
-            }}
+            }, props)}
        >
            <svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M28 8.005H3M28 16.005H3M28 24.005H3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
--- a/lib/components/CloseButton.tsx
+++ b/lib/components/CloseButton.tsx
@ -1,30 +1,27 @@
-import { IconButton, IconButtonProps, SxProps, Theme, useTheme } from "@mui/material";
+import { IconButton, IconButtonProps, useTheme } from "@mui/material";
+import { deepmerge } from "@mui/utils";


-interface Props {
-    onClick?: IconButtonProps["onClick"];
-    sx?: SxProps<Theme>;
-}
-
-export function CloseButton({ onClick, sx }: Props) {
+export function CloseButton(props: IconButtonProps) {
    const theme = useTheme();

    return (
        <IconButton
-            onClick={onClick}
-            sx={{
-                height: 30,
-                width: 30,
-                p: 0,
-                color: "black",
-                "&:hover": {
-                    color: theme.palette.orange.main,
+            {...deepmerge({
+                sx: {
+                    height: 30,
+                    width: 30,
+                    p: 0,
+                    color: "black",
+                    "&:hover": {
+                        color: theme.palette.orange.main,
+                        backgroundColor: "rgb(0 0 0 / 0)",
+                    },
+                    "&:active": {
+                        color: theme.palette.orange.main,
+                    },
                },
-                "&:active": {
-                    color: theme.palette.orange.main,
-                },
-                ...sx,
-            }}
+            }, props)}
        >
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 30 31" fill="none">
                <path d="m3 3.605 24 24m-24 0 24-24" stroke="currentColor" />
--- a/lib/components/CloseButtonSmall.tsx
+++ b/lib/components/CloseButtonSmall.tsx
@ -1,30 +1,27 @@
-import { IconButton, IconButtonProps, SxProps, Theme, useTheme } from "@mui/material";
+import { IconButton, IconButtonProps, useTheme } from "@mui/material";
+import { deepmerge } from "@mui/utils";


-interface Props {
-    onClick?: IconButtonProps["onClick"];
-    sx?: SxProps<Theme>;
-}
-
-export function CloseButtonSmall({ onClick, sx }: Props) {
+export function CloseButtonSmall(props: IconButtonProps) {
    const theme = useTheme();

    return (
        <IconButton
-            onClick={onClick}
-            sx={{
-                height: 12,
-                width: 12,
-                p: 0,
-                color: theme.palette.purple.dark,
-                "&:hover": {
-                    color: theme.palette.orange.main,
+            {...deepmerge({
+                sx: {
+                    height: 12,
+                    width: 12,
+                    p: 0,
+                    color: theme.palette.purple.dark,
+                    "&:hover": {
+                        color: theme.palette.orange.main,
+                        backgroundColor: "rgb(0 0 0 / 0)",
+                    },
+                    "&:active": {
+                        color: theme.palette.orange.main,
+                    },
                },
-                "&:active": {
-                    color: theme.palette.orange.main,
-                },
-                ...sx,
-            }}
+            }, props)}
        >
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 14 14" fill="none">
                <path d="m13 1.176-12 12M13 13.176l-12-12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
--- a/lib/components/WalletButton.tsx
+++ b/lib/components/WalletButton.tsx
@ -1,35 +1,37 @@
-import { IconButton, IconButtonProps, SxProps, Theme, useTheme } from "@mui/material";
+import { IconButton, IconButtonProps, useTheme } from "@mui/material";
+import { ForwardRefExoticComponent, RefAttributes } from "react";
+import { LinkProps } from "react-router-dom";
+import { deepmerge } from "@mui/utils";


-interface Props {
-    onClick?: IconButtonProps["onClick"];
-    sx?: SxProps<Theme>;
-    size?: string | number;
-}
+type Props = IconButtonProps & {
+    component?: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
+    to?: string;
+};

-export function WalletButton({ onClick, size = 36, sx }: Props) {
+export function WalletButton(props: Props) {
    const theme = useTheme();

    return (
        <IconButton
-            onClick={onClick}
-            sx={{
-                height: size,
-                width: size,
-                p: 0,
-                borderRadius: "6px",
-                backgroundColor: theme.palette.background.default,
-                color: theme.palette.gray.main,
-                "&:hover": {
-                    color: theme.palette.background.default,
-                    backgroundColor: theme.palette.gray.main,
+            {...deepmerge({
+                sx: {
+                    height: 36,
+                    width: 36,
+                    p: 0,
+                    borderRadius: "6px",
+                    backgroundColor: theme.palette.background.default,
+                    color: theme.palette.gray.main,
+                    "&:hover": {
+                        color: theme.palette.background.default,
+                        backgroundColor: theme.palette.gray.main,
+                    },
+                    "&:active": {
+                        backgroundColor: theme.palette.purple.dark,
+                        color: "white",
+                    },
                },
-                "&:active": {
-                    backgroundColor: theme.palette.purple.dark,
-                    color: "white",
-                },
-                ...sx,
-            }}
+            }, props)}
        >
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 36 37" fill="none">
                <path d="M26.571 16.051v-5c0-.789-.64-1.428-1.428-1.428H9.429c-.79 0-1.429.64-1.429 1.428v14.286c0 .789.64 1.428 1.429 1.428h15.714c.789 0 1.428-.64 1.428-1.428v-5m1.33-5h-7.044a2.857 2.857 0 0 0 0 5.714h7.044a.099.099 0 0 0 .099-.099v-5.516a.1.1 0 0 0-.099-.1Z" stroke="currentColor" strokeWidth="1.5" />
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
    "name": "@frontend/kitui",
-    "version": "1.0.33",
+    "version": "1.0.35",
    "description": "test",
    "main": "./dist/index.js",
    "module": "./dist/index.js",
@ -49,6 +49,7 @@
        "eslint-plugin-react-refresh": "^0.4.3",
        "eslint": "^8.45.0",
        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.15.0",
        "react-syntax-highlighter": "^15.5.0",
        "react": "^18.2.0",
        "typescript": "^5.0.2",
@ -62,6 +63,7 @@
        "@mui/icons-material": "^5.14.3",
        "@mui/material": "^5.14.4",
        "axios": "^1.4.0",
+        "react-router-dom": "^6.15.0",
        "react": "^18.2.0",
        "zustand": "^4.3.8"
    }
--- a/yarn.lock
+++ b/yarn.lock
@ -681,6 +681,11 @@
  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==

+"@remix-run/router@1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.8.0.tgz#e848d2f669f601544df15ce2a313955e4bf0bafc"
+  integrity sha512-mrfKqIHnSZRyIzBcanNJmVQELTnX+qagEDlcKO90RgRBVOZGSGvZKeDihTRfWcqoDn5N/NkUcwWTccnpN18Tfg==
+
 "@rollup/pluginutils@^5.0.2":
  version "5.0.3"
  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.3.tgz#183126d69aeb1cfa23401d5a71cb4b8c16c4a4e0"
@ -2139,6 +2144,21 @@ react-refresh@^0.14.0:
  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
  integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==

+react-router-dom@^6.15.0:
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.15.0.tgz#6da7db61e56797266fbbef0d5e324d6ac443ee40"
+  integrity sha512-aR42t0fs7brintwBGAv2+mGlCtgtFQeOzK0BM1/OiqEzRejOZtpMZepvgkscpMUnKb8YO84G7s3LsHnnDNonbQ==
+  dependencies:
+    "@remix-run/router" "1.8.0"
+    react-router "6.15.0"
+
+react-router@6.15.0:
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.15.0.tgz#bf2cb5a4a7ed57f074d4ea88db0d95033f39cac8"
+  integrity sha512-NIytlzvzLwJkCQj2HLefmeakxxWHWAP+02EGqWEZy+DgfHHKQMUoBBjUQLOtFInBMhWtb3hiUy6MfFgwLjXhqg==
+  dependencies:
+    "@remix-run/router" "1.8.0"
+
 react-syntax-highlighter@^15.5.0:
  version "15.5.0"
  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz#4b3eccc2325fa2ec8eff1e2d6c18fa4a9e07ab20"