Добавлена стилизация и компоненты кнопок

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksolutions/antd-react-components",
-  "version": "1.1.1",
+  "version": "1.1.14",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/index.ts

@@ -6,3 +6,8 @@ export { useBreakpoint, BreakpointProvider } from "./shared/context/breakpointPr
 
 export { default as PageSpin } from "./shared/ui/pageSpin";
 export { default as AdaptiveContainer } from "./shared/ui/adaptiveContainer";
+export { default as PrimaryButton } from "./shared/ui/primaryButton";
+export { default as SecondaryButton } from "./shared/ui/secondaryButton";
+export { default as SolidButton } from "./shared/ui/solidButton";
+export { default as CancelButton } from "./shared/ui/cancelButton";
+export { default as Button } from "./shared/ui/button";

src/shared/config/theme/components.ts

@@ -6,6 +6,46 @@ export const components: ThemeConfig["components"] = {
     headerBg: "transparent",
     colorBgContainer: "transparent",
     colorBgElevated: "transparent",
-    footerBg: "transparent"
+    footerBg: "transparent",
+  },
+  Typography: {
+    fontFamily: "Roboto, sans-serif",
+    fontSize: 14,
+    lineHeight: 1.1428,
+    fontSizeHeading3: 21,
+    lineHeightHeading3: 1.1428,
+    fontSizeHeading2: 32,
+    lineHeightHeading2: 1.5,
+    fontSizeHeading1: 47,
+    lineHeightHeading1: 1.19,
+    colorLink: "#0B7AC2",
+    colorLinkHover: "#4EACE8",
+    colorLinkActive: "#9752E0",
+    colorSuccess: "#5BBB28",
+    colorError: "#F68181",
+  },
+  Button: {
+    primaryShadow: "0px 0px 0px 2px #4EACE8",
+    colorPrimaryBgHover: "#FFFFFF",
+    colorPrimary: "#FFFFFF",
+    colorPrimaryTextHover: "#0B7AC2",
+    colorLink: "#0B7AC2",
+    colorLinkHover: "#075180",
+    lineWidth: 2,
+    borderRadius: 50,
+    borderRadiusLG: 50,
+    borderRadiusSM: 50,
+    colorErrorHover: "#E22929",
+    colorErrorBorderHover: "#F68181",
+    dangerColor: "#9E0505",
+  },
+  Input: {
+    activeBorderColor: "#7BC7F8",
+    inputFontSize: 14,
+    colorBorder: "#EBEBEB",
+    colorErrorBorder: "#F7AAAA",
+    paddingInline: 16,
+    lineWidth: 2,
+    borderRadius: 8,
   },
 };

src/shared/config/theme/token.ts

@@ -1,11 +1,102 @@
 import { ThemeConfig } from "antd";
 
 export const token: ThemeConfig["token"] = {
-  colorText: "#313D4C",
-  colorTextSecondary: "#617894",
-  colorTextTertiary: "#96A6BA",
-  colorTextQuaternary: "#D7DDE5",
-  colorTextPlaceholder: "#617894",
-  colorBorder: "#96A6BA",
-  boxShadowTertiary: "0px -40px 48px -16px rgba(34, 60, 80, 0.18)"
+  colorText: "#000000",
+  colorTextSecondary: "#2E2E2E",
+  colorTextTertiary: "#D4D4D4",
+  colorTextQuaternary: "#FFFFFF",
+  colorTextPlaceholder: "#757575",
+  colorBorder: "#EBEBEB",
+  boxShadowTertiary: "0px -40px 48px -16px rgba(34, 60, 80, 0.18)",
+  "red-1": "#FED1D1",
+  "red-2": "#F7AAAA",
+  "red-3": "#F68181",
+  "red-4": "#EF5656",
+  "red-5": "#E22929",
+  "red-6": "#C20F0F",
+  "red-7": "#9E0505",
+  "red-8": "#790404",
+  "red-9": "#4F0303",
+  red1: "#FED1D1",
+  red2: "#F7AAAA",
+  red3: "#F68181",
+  red4: "#EF5656",
+  red5: "#E22929",
+  red6: "#C20F0F",
+  red7: "#9E0505",
+  red8: "#790404",
+  red9: "#4F0303",
+  "green-1": "#BEECA6",
+  "green-2": "#8AD364",
+  "green-3": "#5BBB28",
+  "green-4": "#41A10E",
+  "green-5": "#338707",
+  "green-6": "#2A7006",
+  "green-7": "#225905",
+  "green-8": "#194204",
+  "green-9": "#102902",
+  green1: "#BEECA6",
+  green2: "#8AD364",
+  green3: "#5BBB28",
+  green4: "#41A10E",
+  green5: "#338707",
+  green6: "#2A7006",
+  green7: "#225905",
+  green8: "#194204",
+  green9: "#102902",
+  "blue-1": "#BBE2FB",
+  "blue-2": "#7BC7F8",
+  "blue-3": "#4EACE8",
+  "blue-4": "#2493D9",
+  "blue-5": "#0B7AC2",
+  "blue-6": "#0965A0",
+  "blue-7": "#075180",
+  "blue-8": "#053D60",
+  "blue-9": "#03273E",
+  blue1: "#BBE2FB",
+  blue2: "#7BC7F8",
+  blue3: "#4EACE8",
+  blue4: "#2493D9",
+  blue5: "#0B7AC2",
+  blue6: "#0965A0",
+  blue7: "#075180",
+  blue8: "#053D60",
+  blue9: "#03273E",
+  "purple-1": "#E7D8F8",
+  "purple-2": "#D2B4F2",
+  "purple-3": "#BD92EC",
+  "purple-4": "#AA72E6",
+  "purple-5": "#9752E0",
+  "purple-6": "#8331DA",
+  "purple-7": "#6A21B8",
+  "purple-8": "#51198C",
+  "purple-9": "#35105B",
+  purple1: "#E7D8F8",
+  purple2: "#D2B4F2",
+  purple3: "#BD92EC",
+  purple4: "#AA72E6",
+  purple5: "#9752E0",
+  purple6: "#8331DA",
+  purple7: "#6A21B8",
+  purple8: "#51198C",
+  purple9: "#35105B",
+  "yellow-1": "#F8F3D8",
+  "yellow-2": "#F2E8B4",
+  "yellow-3": "#ECDD92",
+  "yellow-4": "#E6D372",
+  "yellow-5": "#E0C952",
+  "yellow-6": "#DABE31",
+  "yellow-7": "#B89F21",
+  "yellow-8": "#8C7919",
+  "yellow-9": "#5B4F10",
+  yellow1: "#F8F3D8",
+  yellow2: "#F2E8B4",
+  yellow3: "#ECDD92",
+  yellow4: "#E6D372",
+  yellow5: "#E0C952",
+  yellow6: "#DABE31",
+  yellow7: "#B89F21",
+  yellow8: "#8C7919",
+  yellow9: "#5B4F10",
+  colorWhite: "#FFFFFF",
 };

src/shared/ui/button/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Button, ButtonProps, ConfigProvider } from "antd";
+
+// eslint-disable-next-line import/no-internal-modules
+import { theme } from "../../config/theme";
+
+interface IButton extends ButtonProps {
+  children: React.ReactNode;
+}
+
+function ButtonWs(props: IButton) {
+  return (
+    <ConfigProvider theme={{ token: theme.token, components: theme.components }}>
+      <Button {...props}>{props.children}</Button>
+    </ConfigProvider>
+  );
+}
+
+export default React.memo(ButtonWs);

src/shared/ui/cancelButton/index.scss

@@ -0,0 +1,6 @@
+.cancelButton{
+  &:hover{
+    color: #E22929;
+    border-color: #F68181;
+  }
+}

src/shared/ui/cancelButton/index.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import {Button, ConfigProvider} from "antd";
+
+function CancelButton({children, htmlType, loading}:{children: React.ReactNode, htmlType?: "button" | "submit" | "reset", loading: boolean}) {
+    return (
+        <ConfigProvider button={{className: "cancelButton"}}>
+           <Button ghost block danger htmlType={htmlType} loading={loading}>{children}</Button>
+        </ConfigProvider>
+);
+}
+
+export default React.memo(CancelButton);

src/shared/ui/primaryButton/index.scss

@@ -0,0 +1,7 @@
+.primaryButton{
+  color: aliceblue;
+
+  &:hover{
+    border-color: #0B7AC2;
+  }
+}

src/shared/ui/primaryButton/index.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import {Button, ConfigProvider} from "antd";
+
+function PrimaryButton({children, htmlType, loading}:{children: React.ReactNode, htmlType?: "button" | "submit" | "reset", loading: boolean}) {
+    return (
+        <ConfigProvider button={{className: "primaryButton"}}>
+           <Button ghost block htmlType={htmlType} loading={loading} type='primary'>{children}</Button>
+        </ConfigProvider>
+);
+}
+
+export default React.memo(PrimaryButton);

src/shared/ui/secondaryButton/index.scss

@@ -0,0 +1,7 @@
+.secondaryButton{
+
+  &:hover{
+    color: #757575;
+    border-color: #B8B8B8;
+  }
+}

src/shared/ui/secondaryButton/index.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import {Button, ConfigProvider} from "antd";
+
+function SecondaryButton({children, htmlType, loading}:{children: React.ReactNode, htmlType?: "button" | "submit" | "reset", loading: boolean}) {
+    return (
+        <ConfigProvider button={{className: "secondaryButton"}}>
+           <Button ghost block htmlType={htmlType} loading={loading} type='default'>{children}</Button>
+        </ConfigProvider>
+);
+}
+
+export default React.memo(SecondaryButton);

src/shared/ui/solidButton/index.scss

@@ -0,0 +1,5 @@
+.solidButton{
+  &:hover{
+    box-shadow: 0px 4px 20px 0px #BBE2FB;
+  }
+}

src/shared/ui/solidButton/index.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import {Button, ConfigProvider} from "antd";
+
+function SolidButton({children, htmlType, loading}:{children: React.ReactNode, htmlType?: "button" | "submit" | "reset", loading: boolean}) {
+    return (
+        <ConfigProvider button={{className: "solidButton", style: {boxShadow: "0px 4px 15px 0px #0000001A", background: "#fff", border: "none", color: "#0B7AC2" }}}>
+           <Button block htmlType={htmlType} loading={loading} type='primary'>{children}</Button>
+        </ConfigProvider>
+);
+}
+
+export default React.memo(SolidButton);