diff --git a/package-lock.json b/package-lock.json index be341e5..2d26114 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@worksolutions/antd-react-components", - "version": "1.1.1", + "version": "1.1.14", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@worksolutions/antd-react-components", - "version": "1.1.1", + "version": "1.1.14", "license": "ISC", "dependencies": { "react": "^18.2.0", diff --git a/package.json b/package.json index a5d95c4..353c5b6 100644 --- a/package.json +++ b/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", diff --git a/src/index.ts b/src/index.ts index 7a7967e..fcdc554 100644 --- a/src/index.ts +++ b/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"; diff --git a/src/shared/config/theme/components.ts b/src/shared/config/theme/components.ts index f5dbdf1..a643478 100644 --- a/src/shared/config/theme/components.ts +++ b/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, }, }; diff --git a/src/shared/config/theme/token.ts b/src/shared/config/theme/token.ts index b7b6069..23ff6d3 100644 --- a/src/shared/config/theme/token.ts +++ b/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", }; diff --git a/src/shared/ui/button/index.tsx b/src/shared/ui/button/index.tsx new file mode 100644 index 0000000..c59571b --- /dev/null +++ b/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 ( + + + + ); +} + +export default React.memo(ButtonWs); diff --git a/src/shared/ui/cancelButton/index.scss b/src/shared/ui/cancelButton/index.scss new file mode 100644 index 0000000..1e384e8 --- /dev/null +++ b/src/shared/ui/cancelButton/index.scss @@ -0,0 +1,6 @@ +.cancelButton{ + &:hover{ + color: #E22929; + border-color: #F68181; + } +} \ No newline at end of file diff --git a/src/shared/ui/cancelButton/index.tsx b/src/shared/ui/cancelButton/index.tsx new file mode 100644 index 0000000..ae8bc9c --- /dev/null +++ b/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 ( + + + +); +} + +export default React.memo(CancelButton); \ No newline at end of file diff --git a/src/shared/ui/primaryButton/index.scss b/src/shared/ui/primaryButton/index.scss new file mode 100644 index 0000000..9e3539f --- /dev/null +++ b/src/shared/ui/primaryButton/index.scss @@ -0,0 +1,7 @@ +.primaryButton{ + color: aliceblue; + + &:hover{ + border-color: #0B7AC2; + } +} \ No newline at end of file diff --git a/src/shared/ui/primaryButton/index.tsx b/src/shared/ui/primaryButton/index.tsx new file mode 100644 index 0000000..d5a84a1 --- /dev/null +++ b/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 ( + + + +); +} + +export default React.memo(PrimaryButton); \ No newline at end of file diff --git a/src/shared/ui/secondaryButton/index.scss b/src/shared/ui/secondaryButton/index.scss new file mode 100644 index 0000000..3b81194 --- /dev/null +++ b/src/shared/ui/secondaryButton/index.scss @@ -0,0 +1,7 @@ +.secondaryButton{ + + &:hover{ + color: #757575; + border-color: #B8B8B8; + } +} \ No newline at end of file diff --git a/src/shared/ui/secondaryButton/index.tsx b/src/shared/ui/secondaryButton/index.tsx new file mode 100644 index 0000000..35a7286 --- /dev/null +++ b/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 ( + + + +); +} + +export default React.memo(SecondaryButton); \ No newline at end of file diff --git a/src/shared/ui/solidButton/index.scss b/src/shared/ui/solidButton/index.scss new file mode 100644 index 0000000..69e04a7 --- /dev/null +++ b/src/shared/ui/solidButton/index.scss @@ -0,0 +1,5 @@ +.solidButton{ + &:hover{ + box-shadow: 0px 4px 20px 0px #BBE2FB; + } +} \ No newline at end of file diff --git a/src/shared/ui/solidButton/index.tsx b/src/shared/ui/solidButton/index.tsx new file mode 100644 index 0000000..d2daf64 --- /dev/null +++ b/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 ( + + + +); +} + +export default React.memo(SolidButton); \ No newline at end of file