From aa2522ba0ff193ab6c131f04bd712ff93a77b7ec Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 16:00:28 +0300 Subject: [PATCH 01/22] overlay and navigation changes --- src/components/Navigation/index.tsx | 56 ++++++++++++++--------------- src/components/Overlay/index.tsx | 28 ++++++--------- src/style/style.css | 4 --- 3 files changed, 38 insertions(+), 50 deletions(-) diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx index 77ca7fc2..5138600d 100644 --- a/src/components/Navigation/index.tsx +++ b/src/components/Navigation/index.tsx @@ -2,10 +2,11 @@ import { MenuToggle } from "../MenuToggle" import { useMobile } from "src/hooks/useMobile" import { Menu } from "../Menu" import { Overlay } from "../Overlay" -import { useState, useCallback, useContext } from "react" +import { useContext } from "react" import { ConfigContext } from "src/context/ConfigContext" import { Block } from "../Block" import { Spacer } from "../Spacer" +import { useToggle } from "react-use" export interface INavigationProps { style?: React.CSSProperties @@ -13,26 +14,32 @@ export interface INavigationProps { export const Navigation: React.FC = props => { const collapseMenu = useMobile() - const [open, setOpen] = useState(false) - const onClick = useCallback( - () => { - setOpen(!open) - }, - [open] - ) + const [open, toggleOpen] = useToggle(false) const { menu } = useContext(ConfigContext) + if (!collapseMenu) { + return ( + + ) + } + return ( <> = props => { - {collapseMenu ? ( - - - - - ) : ( - - )} + + + + ) } diff --git a/src/components/Overlay/index.tsx b/src/components/Overlay/index.tsx index 6149251d..1b1e5947 100644 --- a/src/components/Overlay/index.tsx +++ b/src/components/Overlay/index.tsx @@ -2,30 +2,20 @@ import s from "./styles.module.css" import { Transition } from "./Transition" import { useReducedMotion } from "../../hooks/useReducedMotion" -import { useCallback, useEffect } from "react" +import { useLockBodyScroll } from "react-use" -export interface IOverlayProps { +export type OverlayProps = { show: boolean onClickOverlay: () => void style?: React.CSSProperties + duration: number } -export const Overlay: React.FC = props => { +export const Overlay: React.FC = props => { const motionDisabled = useReducedMotion() - const onClick = useCallback((event: React.MouseEvent) => { - if (event.target === event.currentTarget) { - props.onClickOverlay() - } - }, [props.onClickOverlay]) - const duration = motionDisabled ? 0 : 250 + const duration = motionDisabled ? 0 : props.duration - useEffect(() => { - if (props.show) { - document.body.classList.add("noscroll") - } else { - document.body.classList.remove("noscroll") - } - }, [props.show]) + useLockBodyScroll(props.show) return ( = props => { show={props.show} >
{ + if (event.target === event.currentTarget) { + props.onClickOverlay() + } + }} className={s.overlay} style={props.style} > diff --git a/src/style/style.css b/src/style/style.css index e9d22303..b38b0389 100644 --- a/src/style/style.css +++ b/src/style/style.css @@ -136,10 +136,6 @@ a.invisible { border-bottom-color: var(--color-text-opposite); } -.noscroll { - overflow: hidden; -} - /* RC TOOLTIP OVERRIDE */ .hudozka.rc-tooltip { From 30c496f249eecd6a62884b7e626b344d4846eb81 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 16:16:14 +0300 Subject: [PATCH 02/22] react 18 --- package-lock.json | 378 +++++++++++++------------- package.json | 8 +- src/components/App/index.tsx | 9 +- src/components/Block/index.tsx | 1 + src/components/Button/index.tsx | 4 +- src/components/Card/index.tsx | 1 + src/components/CardGrid/index.tsx | 1 + src/components/Content/index.tsx | 1 + src/components/File/index.tsx | 2 +- src/components/Footer/index.tsx | 5 +- src/components/Menu/ActiveLink.tsx | 3 +- src/components/Menu/MenuItem.tsx | 1 + src/components/Navigation/index.tsx | 4 +- src/components/Overlay/Transition.tsx | 17 +- src/components/Overlay/index.tsx | 1 + src/components/Page/index.tsx | 1 + src/components/TagList/index.tsx | 1 + src/components/Wrapper/index.tsx | 1 + 18 files changed, 225 insertions(+), 214 deletions(-) diff --git a/package-lock.json b/package-lock.json index 192e72d9..7ab5970f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,10 +16,10 @@ "next": "^12.2.5", "next-seo": "^5.5.0", "rc-tooltip": "^5.1.0", - "react": "^17.0.1", - "react-dom": "^17.0.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-icons": "^4.2.0", - "react-use": "^17.2.1", + "react-use": "^17.4.0", "sharp": "^0.31.0", "sitemap": "^1.5.0", "typograf": "^6.11.1", @@ -30,7 +30,7 @@ "@types/lodash": "^4.14.149", "@types/markdown-it": "^12.2.3", "@types/node": "^12.12.34", - "@types/react": "^16.9.32", + "@types/react": "^18.0.18", "@types/sharp": "^0.29.2", "eslint": "^8.23.0", "eslint-config-next": "12.2.5", @@ -450,21 +450,28 @@ "dev": true }, "node_modules/@types/prop-types": { - "version": "15.7.3", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", - "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", "dev": true }, "node_modules/@types/react": { - "version": "16.9.32", - "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.32.tgz", - "integrity": "sha512-fmejdp0CTH00mOJmxUPPbWCEBWPvRIL4m8r0qD+BSDUqmutPyGQCHifzMpMzdvZwROdEdL78IuZItntFWgPXHQ==", + "version": "18.0.18", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.18.tgz", + "integrity": "sha512-6hI08umYs6NaiHFEEGioXnxJ+oEhY3eRz8VCUaudZmGdtvPviCJB8mgaMxaDWAdPSYd4eFavrPk2QIolwbLYrg==", "dev": true, "dependencies": { "@types/prop-types": "*", - "csstype": "^2.2.0" + "@types/scheduler": "*", + "csstype": "^3.0.2" } }, + "node_modules/@types/scheduler": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", + "dev": true + }, "node_modules/@types/sharp": { "version": "0.29.2", "resolved": "https://registry.npmjs.org/@types/sharp/-/sharp-0.29.2.tgz", @@ -946,14 +953,6 @@ "isobject": "^3.0.1" } }, - "node_modules/css-in-js-utils/node_modules/isobject": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", - "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/css-tree": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", @@ -967,10 +966,9 @@ } }, "node_modules/csstype": { - "version": "2.6.10", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.10.tgz", - "integrity": "sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==", - "dev": true + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==" }, "node_modules/damerau-levenshtein": { "version": "1.0.8", @@ -1077,9 +1075,9 @@ } }, "node_modules/dom-align": { - "version": "1.12.0", - "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.0.tgz", - "integrity": "sha512-YkoezQuhp3SLFGdOlr5xkqZ640iXrnHAwVYcDg8ZKRUtO7mSzSC2BA5V0VuyAwPSJA4CLIc6EDDJh4bEsD2+zA==" + "version": "1.12.3", + "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.3.tgz", + "integrity": "sha512-Gj9hZN3a07cbR6zviMUBOMPdWxYhbMI+x+WS0NAIu2zFZmbK8ys9R79g+iG9qLnlCwpFoaB+fKy8Pdv470GsPA==" }, "node_modules/emoji-regex": { "version": "9.2.2", @@ -1107,11 +1105,11 @@ } }, "node_modules/error-stack-parser": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.0.6.tgz", - "integrity": "sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==", + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz", + "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==", "dependencies": { - "stackframe": "^1.1.1" + "stackframe": "^1.3.4" } }, "node_modules/es-abstract": { @@ -2116,9 +2114,9 @@ "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==" }, "node_modules/inline-style-prefixer": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.0.tgz", - "integrity": "sha512-XTHvRUS4ZJNzC1GixJRmOlWSS45fSt+DJoyQC9ytj0WxQfcgofQtDtyKKYxHUqEsWCs+LIWftPF1ie7+i012Fg==", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.1.tgz", + "integrity": "sha512-AsqazZ8KcRzJ9YPN1wMH2aNM7lkWQ8tSPrW5uDk1ziYwiAPWSZnUsC7lfZq+BDqLqz0B4Pho5wscWcJzVvRzDQ==", "dependencies": { "css-in-js-utils": "^2.0.0" } @@ -2342,6 +2340,14 @@ "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=", "dev": true }, + "node_modules/isobject": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", + "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/js-cookie": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz", @@ -2572,9 +2578,9 @@ "dev": true }, "node_modules/nano-css": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.1.tgz", - "integrity": "sha512-ENPIyNzANQRyYVvb62ajDd7PAyIgS2LIUnT9ewih4yrXSZX4hKoUwssy8WjUH++kEOA5wUTMgNnV7ko5n34kUA==", + "version": "5.3.5", + "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.5.tgz", + "integrity": "sha512-vSB9X12bbNu4ALBu7nigJgRViZ6ja3OU7CeuiV1zMIbXOdmkLahgtPmh3GBOlDxbKY0CitqlPdOReGlBLSp+yg==", "dependencies": { "css-tree": "^1.1.2", "csstype": "^3.0.6", @@ -2590,16 +2596,6 @@ "react-dom": "*" } }, - "node_modules/nano-css/node_modules/csstype": { - "version": "3.0.7", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz", - "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==" - }, - "node_modules/nano-css/node_modules/stylis": { - "version": "4.0.9", - "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.9.tgz", - "integrity": "sha512-ci7pEFNVW3YJiWEzqPOMsAjY6kgraZ3ZgBfQ5HYbNtLJEsQ0G46ejWZpfSSCp/FaSiCSGGhzL9O2lN+2cB6ong==" - }, "node_modules/nanoid": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", @@ -2704,6 +2700,7 @@ "version": "4.1.1", "resolved": "http://storage.mds.yandex.net/get-npm/66641/object-assign-4.1.1.tgz", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -3052,13 +3049,14 @@ } }, "node_modules/rc-align": { - "version": "4.0.9", - "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.9.tgz", - "integrity": "sha512-myAM2R4qoB6LqBul0leaqY8gFaiECDJ3MtQDmzDo9xM9NRT/04TvWOYd2YHU9zvGzqk9QXF6S9/MifzSKDZeMw==", + "version": "4.0.12", + "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.12.tgz", + "integrity": "sha512-3DuwSJp8iC/dgHzwreOQl52soj40LchlfUHtgACOUtwGuoFIOVh6n/sCpfqCU8kO5+iz6qR0YKvjgB8iPdE3aQ==", "dependencies": { "@babel/runtime": "^7.10.1", "classnames": "2.x", "dom-align": "^1.7.0", + "lodash": "^4.17.21", "rc-util": "^5.3.0", "resize-observer-polyfill": "^1.5.1" }, @@ -3068,13 +3066,13 @@ } }, "node_modules/rc-motion": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.4.1.tgz", - "integrity": "sha512-TWLvymfMu8SngPx5MDH8dQ0D2RYbluNTfam4hY/dNNx9RQ3WtGuZ/GXHi2ymLMzH+UNd6EEFYkOuR5JTTtm8Xg==", + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.6.2.tgz", + "integrity": "sha512-4w1FaX3dtV749P8GwfS4fYnFG4Rb9pxvCYPc/b2fw1cmlHJWNNgOFIz7ysiD+eOrzJSvnLJWlNQQncpNMXwwpg==", "dependencies": { "@babel/runtime": "^7.11.1", "classnames": "^2.2.1", - "rc-util": "^5.2.1" + "rc-util": "^5.21.0" }, "peerDependencies": { "react": ">=16.9.0", @@ -3095,15 +3093,15 @@ } }, "node_modules/rc-trigger": { - "version": "5.2.3", - "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-5.2.3.tgz", - "integrity": "sha512-6Fokao07HUbqKIDkDRFEM0AGZvsvK0Fbp8A/KFgl1ngaqfO1nY037cISCG1Jm5fxImVsXp9awdkP7Vu5cxjjog==", + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-5.3.1.tgz", + "integrity": "sha512-5gaFbDkYSefZ14j2AdzucXzlWgU2ri5uEjkHvsf1ynRhdJbKxNOnw4PBZ9+FVULNGFiDzzlVF8RJnR9P/xrnKQ==", "dependencies": { - "@babel/runtime": "^7.11.2", + "@babel/runtime": "^7.18.3", "classnames": "^2.2.6", "rc-align": "^4.0.0", "rc-motion": "^2.0.0", - "rc-util": "^5.5.0" + "rc-util": "^5.19.2" }, "engines": { "node": ">=8.x" @@ -3114,11 +3112,11 @@ } }, "node_modules/rc-util": { - "version": "5.9.8", - "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.9.8.tgz", - "integrity": "sha512-typLSHYGf5irvGLYQshs0Ra3aze086h0FhzsAkyirMunYZ7b3Te8gKa5PVaanoHaZa9sS6qx98BxgysoRP+6Tw==", + "version": "5.24.2", + "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.24.2.tgz", + "integrity": "sha512-MWd0ZEV7xSwN4HM9jz9BwpnMzwCPjYJ7K90lePsrdgAkrmm8U7b4BOTIsv/84BQsaF7N3ejNkcrZ3AfEwc9HXA==", "dependencies": { - "@babel/runtime": "^7.12.5", + "@babel/runtime": "^7.18.3", "react-is": "^16.12.0", "shallowequal": "^1.1.0" }, @@ -3136,28 +3134,26 @@ } }, "node_modules/react": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" }, "engines": { "node": ">=0.10.0" } }, "node_modules/react-dom": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", - "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", "dependencies": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" + "scheduler": "^0.23.0" }, "peerDependencies": { - "react": "17.0.2" + "react": "^18.2.0" } }, "node_modules/react-icons": { @@ -3183,9 +3179,9 @@ } }, "node_modules/react-use": { - "version": "17.2.1", - "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.2.1.tgz", - "integrity": "sha512-9r51/at7/Nr/nEP4CsHz+pl800EAqhIY9R6O68m68kaWc8slDAfx1UrIedQqpsb4ImddFYb+6hF1i5Vj4u4Cnw==", + "version": "17.4.0", + "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.4.0.tgz", + "integrity": "sha512-TgbNTCA33Wl7xzIJegn1HndB4qTS9u03QUwyNycUnXaweZkE4Kq2SB+Yoxx8qbshkZGYBDvUXbXWRUmQDcZZ/Q==", "dependencies": { "@types/js-cookie": "^2.2.6", "@xobotyi/scrollbar-width": "^1.9.5", @@ -3203,8 +3199,8 @@ "tslib": "^2.1.0" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0", - "react-dom": "^16.8.0 || ^17.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, "node_modules/react-use/node_modules/tslib": { @@ -3316,9 +3312,9 @@ } }, "node_modules/rtl-css-js": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.14.1.tgz", - "integrity": "sha512-G9N1s/6329FpJr8k9e1U/Lg0IDWThv99sb7k0IrXHjSnubxe01h52/ajsPRafJK1/2Vqrhz3VKLe3E1dx6jS9Q==", + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.0.tgz", + "integrity": "sha512-Oc7PnzwIEU4M0K1J4h/7qUUaljXhQ0kCObRsZjxs2HjkpKsnoTMvSmvJ4sqgJZd0zBoEfAyTdnK/jMIYvrjySQ==", "dependencies": { "@babel/runtime": "^7.1.2" } @@ -3372,12 +3368,11 @@ "dev": true }, "node_modules/scheduler": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", - "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "node_modules/screenfull": { @@ -3601,31 +3596,31 @@ "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==" }, "node_modules/stack-generator": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.5.tgz", - "integrity": "sha512-/t1ebrbHkrLrDuNMdeAcsvynWgoH/i4o8EGGfX7dEYDoTXOYVAkEpFdtshlvabzc6JlJ8Kf9YdFEoz7JkzGN9Q==", + "version": "2.0.10", + "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz", + "integrity": "sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==", "dependencies": { - "stackframe": "^1.1.1" + "stackframe": "^1.3.4" } }, "node_modules/stackframe": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz", - "integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==" + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz", + "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==" }, "node_modules/stacktrace-gps": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.0.4.tgz", - "integrity": "sha512-qIr8x41yZVSldqdqe6jciXEaSCKw1U8XTXpjDuy0ki/apyTn/r3w9hDAAQOhZdxvsC93H+WwwEu5cq5VemzYeg==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz", + "integrity": "sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==", "dependencies": { "source-map": "0.5.6", - "stackframe": "^1.1.1" + "stackframe": "^1.3.4" } }, "node_modules/stacktrace-gps/node_modules/source-map": { "version": "0.5.6", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", - "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=", + "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==", "engines": { "node": ">=0.10.0" } @@ -3747,6 +3742,11 @@ } } }, + "node_modules/stylis": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.1.tgz", + "integrity": "sha512-lVrM/bNdhVX2OgBFNa2YJ9Lxj7kPzylieHd3TNjuGE0Re9JB7joL5VUKOVH1kdNNJTgGPpT8hmwIAPLaSyEVFQ==" + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -4324,21 +4324,28 @@ "dev": true }, "@types/prop-types": { - "version": "15.7.3", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", - "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", "dev": true }, "@types/react": { - "version": "16.9.32", - "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.32.tgz", - "integrity": "sha512-fmejdp0CTH00mOJmxUPPbWCEBWPvRIL4m8r0qD+BSDUqmutPyGQCHifzMpMzdvZwROdEdL78IuZItntFWgPXHQ==", + "version": "18.0.18", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.18.tgz", + "integrity": "sha512-6hI08umYs6NaiHFEEGioXnxJ+oEhY3eRz8VCUaudZmGdtvPviCJB8mgaMxaDWAdPSYd4eFavrPk2QIolwbLYrg==", "dev": true, "requires": { "@types/prop-types": "*", - "csstype": "^2.2.0" + "@types/scheduler": "*", + "csstype": "^3.0.2" } }, + "@types/scheduler": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", + "dev": true + }, "@types/sharp": { "version": "0.29.2", "resolved": "https://registry.npmjs.org/@types/sharp/-/sharp-0.29.2.tgz", @@ -4669,13 +4676,6 @@ "requires": { "hyphenate-style-name": "^1.0.2", "isobject": "^3.0.1" - }, - "dependencies": { - "isobject": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", - "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" - } } }, "css-tree": { @@ -4688,10 +4688,9 @@ } }, "csstype": { - "version": "2.6.10", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.10.tgz", - "integrity": "sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==", - "dev": true + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==" }, "damerau-levenshtein": { "version": "1.0.8", @@ -4766,9 +4765,9 @@ } }, "dom-align": { - "version": "1.12.0", - "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.0.tgz", - "integrity": "sha512-YkoezQuhp3SLFGdOlr5xkqZ640iXrnHAwVYcDg8ZKRUtO7mSzSC2BA5V0VuyAwPSJA4CLIc6EDDJh4bEsD2+zA==" + "version": "1.12.3", + "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.3.tgz", + "integrity": "sha512-Gj9hZN3a07cbR6zviMUBOMPdWxYhbMI+x+WS0NAIu2zFZmbK8ys9R79g+iG9qLnlCwpFoaB+fKy8Pdv470GsPA==" }, "emoji-regex": { "version": "9.2.2", @@ -4790,11 +4789,11 @@ "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==" }, "error-stack-parser": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.0.6.tgz", - "integrity": "sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==", + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz", + "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==", "requires": { - "stackframe": "^1.1.1" + "stackframe": "^1.3.4" } }, "es-abstract": { @@ -5559,9 +5558,9 @@ "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==" }, "inline-style-prefixer": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.0.tgz", - "integrity": "sha512-XTHvRUS4ZJNzC1GixJRmOlWSS45fSt+DJoyQC9ytj0WxQfcgofQtDtyKKYxHUqEsWCs+LIWftPF1ie7+i012Fg==", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.1.tgz", + "integrity": "sha512-AsqazZ8KcRzJ9YPN1wMH2aNM7lkWQ8tSPrW5uDk1ziYwiAPWSZnUsC7lfZq+BDqLqz0B4Pho5wscWcJzVvRzDQ==", "requires": { "css-in-js-utils": "^2.0.0" } @@ -5713,6 +5712,11 @@ "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=", "dev": true }, + "isobject": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", + "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==" + }, "js-cookie": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz", @@ -5901,9 +5905,9 @@ "dev": true }, "nano-css": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.1.tgz", - "integrity": "sha512-ENPIyNzANQRyYVvb62ajDd7PAyIgS2LIUnT9ewih4yrXSZX4hKoUwssy8WjUH++kEOA5wUTMgNnV7ko5n34kUA==", + "version": "5.3.5", + "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.5.tgz", + "integrity": "sha512-vSB9X12bbNu4ALBu7nigJgRViZ6ja3OU7CeuiV1zMIbXOdmkLahgtPmh3GBOlDxbKY0CitqlPdOReGlBLSp+yg==", "requires": { "css-tree": "^1.1.2", "csstype": "^3.0.6", @@ -5913,18 +5917,6 @@ "sourcemap-codec": "^1.4.8", "stacktrace-js": "^2.0.2", "stylis": "^4.0.6" - }, - "dependencies": { - "csstype": { - "version": "3.0.7", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz", - "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==" - }, - "stylis": { - "version": "4.0.9", - "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.9.tgz", - "integrity": "sha512-ci7pEFNVW3YJiWEzqPOMsAjY6kgraZ3ZgBfQ5HYbNtLJEsQ0G46ejWZpfSSCp/FaSiCSGGhzL9O2lN+2cB6ong==" - } } }, "nanoid": { @@ -5991,7 +5983,8 @@ "object-assign": { "version": "4.1.1", "resolved": "http://storage.mds.yandex.net/get-npm/66641/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true }, "object-inspect": { "version": "1.12.2", @@ -6236,25 +6229,26 @@ } }, "rc-align": { - "version": "4.0.9", - "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.9.tgz", - "integrity": "sha512-myAM2R4qoB6LqBul0leaqY8gFaiECDJ3MtQDmzDo9xM9NRT/04TvWOYd2YHU9zvGzqk9QXF6S9/MifzSKDZeMw==", + "version": "4.0.12", + "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.12.tgz", + "integrity": "sha512-3DuwSJp8iC/dgHzwreOQl52soj40LchlfUHtgACOUtwGuoFIOVh6n/sCpfqCU8kO5+iz6qR0YKvjgB8iPdE3aQ==", "requires": { "@babel/runtime": "^7.10.1", "classnames": "2.x", "dom-align": "^1.7.0", + "lodash": "^4.17.21", "rc-util": "^5.3.0", "resize-observer-polyfill": "^1.5.1" } }, "rc-motion": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.4.1.tgz", - "integrity": "sha512-TWLvymfMu8SngPx5MDH8dQ0D2RYbluNTfam4hY/dNNx9RQ3WtGuZ/GXHi2ymLMzH+UNd6EEFYkOuR5JTTtm8Xg==", + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.6.2.tgz", + "integrity": "sha512-4w1FaX3dtV749P8GwfS4fYnFG4Rb9pxvCYPc/b2fw1cmlHJWNNgOFIz7ysiD+eOrzJSvnLJWlNQQncpNMXwwpg==", "requires": { "@babel/runtime": "^7.11.1", "classnames": "^2.2.1", - "rc-util": "^5.2.1" + "rc-util": "^5.21.0" } }, "rc-tooltip": { @@ -6267,44 +6261,42 @@ } }, "rc-trigger": { - "version": "5.2.3", - "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-5.2.3.tgz", - "integrity": "sha512-6Fokao07HUbqKIDkDRFEM0AGZvsvK0Fbp8A/KFgl1ngaqfO1nY037cISCG1Jm5fxImVsXp9awdkP7Vu5cxjjog==", + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-5.3.1.tgz", + "integrity": "sha512-5gaFbDkYSefZ14j2AdzucXzlWgU2ri5uEjkHvsf1ynRhdJbKxNOnw4PBZ9+FVULNGFiDzzlVF8RJnR9P/xrnKQ==", "requires": { - "@babel/runtime": "^7.11.2", + "@babel/runtime": "^7.18.3", "classnames": "^2.2.6", "rc-align": "^4.0.0", "rc-motion": "^2.0.0", - "rc-util": "^5.5.0" + "rc-util": "^5.19.2" } }, "rc-util": { - "version": "5.9.8", - "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.9.8.tgz", - "integrity": "sha512-typLSHYGf5irvGLYQshs0Ra3aze086h0FhzsAkyirMunYZ7b3Te8gKa5PVaanoHaZa9sS6qx98BxgysoRP+6Tw==", + "version": "5.24.2", + "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.24.2.tgz", + "integrity": "sha512-MWd0ZEV7xSwN4HM9jz9BwpnMzwCPjYJ7K90lePsrdgAkrmm8U7b4BOTIsv/84BQsaF7N3ejNkcrZ3AfEwc9HXA==", "requires": { - "@babel/runtime": "^7.12.5", + "@babel/runtime": "^7.18.3", "react-is": "^16.12.0", "shallowequal": "^1.1.0" } }, "react": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "react-dom": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", - "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", "requires": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" + "scheduler": "^0.23.0" } }, "react-icons": { @@ -6325,9 +6317,9 @@ "requires": {} }, "react-use": { - "version": "17.2.1", - "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.2.1.tgz", - "integrity": "sha512-9r51/at7/Nr/nEP4CsHz+pl800EAqhIY9R6O68m68kaWc8slDAfx1UrIedQqpsb4ImddFYb+6hF1i5Vj4u4Cnw==", + "version": "17.4.0", + "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.4.0.tgz", + "integrity": "sha512-TgbNTCA33Wl7xzIJegn1HndB4qTS9u03QUwyNycUnXaweZkE4Kq2SB+Yoxx8qbshkZGYBDvUXbXWRUmQDcZZ/Q==", "requires": { "@types/js-cookie": "^2.2.6", "@xobotyi/scrollbar-width": "^1.9.5", @@ -6422,9 +6414,9 @@ } }, "rtl-css-js": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.14.1.tgz", - "integrity": "sha512-G9N1s/6329FpJr8k9e1U/Lg0IDWThv99sb7k0IrXHjSnubxe01h52/ajsPRafJK1/2Vqrhz3VKLe3E1dx6jS9Q==", + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.0.tgz", + "integrity": "sha512-Oc7PnzwIEU4M0K1J4h/7qUUaljXhQ0kCObRsZjxs2HjkpKsnoTMvSmvJ4sqgJZd0zBoEfAyTdnK/jMIYvrjySQ==", "requires": { "@babel/runtime": "^7.1.2" } @@ -6450,12 +6442,11 @@ "dev": true }, "scheduler": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", - "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "screenfull": { @@ -6611,31 +6602,31 @@ "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==" }, "stack-generator": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.5.tgz", - "integrity": "sha512-/t1ebrbHkrLrDuNMdeAcsvynWgoH/i4o8EGGfX7dEYDoTXOYVAkEpFdtshlvabzc6JlJ8Kf9YdFEoz7JkzGN9Q==", + "version": "2.0.10", + "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz", + "integrity": "sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==", "requires": { - "stackframe": "^1.1.1" + "stackframe": "^1.3.4" } }, "stackframe": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz", - "integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==" + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz", + "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==" }, "stacktrace-gps": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.0.4.tgz", - "integrity": "sha512-qIr8x41yZVSldqdqe6jciXEaSCKw1U8XTXpjDuy0ki/apyTn/r3w9hDAAQOhZdxvsC93H+WwwEu5cq5VemzYeg==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz", + "integrity": "sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==", "requires": { "source-map": "0.5.6", - "stackframe": "^1.1.1" + "stackframe": "^1.3.4" }, "dependencies": { "source-map": { "version": "0.5.6", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", - "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=" + "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==" } } }, @@ -6722,6 +6713,11 @@ "integrity": "sha512-sDFWLbg4zR+UkNzfk5lPilyIgtpddfxXEULxhujorr5jtePTUqiPDc5BC0v1NRqTr/WaFBGQQUoYToGlF4B2KQ==", "requires": {} }, + "stylis": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.1.tgz", + "integrity": "sha512-lVrM/bNdhVX2OgBFNa2YJ9Lxj7kPzylieHd3TNjuGE0Re9JB7joL5VUKOVH1kdNNJTgGPpT8hmwIAPLaSyEVFQ==" + }, "supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", diff --git a/package.json b/package.json index ce49002f..a85145f2 100644 --- a/package.json +++ b/package.json @@ -25,10 +25,10 @@ "next": "^12.2.5", "next-seo": "^5.5.0", "rc-tooltip": "^5.1.0", - "react": "^17.0.1", - "react-dom": "^17.0.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-icons": "^4.2.0", - "react-use": "^17.2.1", + "react-use": "^17.4.0", "sharp": "^0.31.0", "sitemap": "^1.5.0", "typograf": "^6.11.1", @@ -39,7 +39,7 @@ "@types/lodash": "^4.14.149", "@types/markdown-it": "^12.2.3", "@types/node": "^12.12.34", - "@types/react": "^16.9.32", + "@types/react": "^18.0.18", "@types/sharp": "^0.29.2", "eslint": "^8.23.0", "eslint-config-next": "12.2.5", diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index 4841e8c4..b8489988 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -10,20 +10,21 @@ import { IBreadcumbsPart, IMenu } from "src/types" import { useRouter } from "next/router" import { useMobile } from "src/hooks/useMobile" import { Gosuslugi } from "../Gosuslugi" -import { INavigationProps } from "@/components/Navigation" +import { NavigationProps } from "@/components/Navigation" -const Navigation = dynamic(() => import("../Navigation").then(mod => mod.Navigation), { +const Navigation = dynamic(() => import("../Navigation").then(mod => mod.Navigation), { ssr: false, }) -export interface IAppProps { +export type AppProps = { showAuthor?: boolean contentStyle?: React.CSSProperties breadcrumbs?: IBreadcumbsPart[] menu: IMenu[] + children?: React.ReactNode } -export const App: React.FC = ({ showAuthor = false, menu, ...props }) => { +export const App: React.FC = ({ showAuthor = false, menu, ...props }) => { const hideBreadcrumbs = useMobile() const router = useRouter() const blockStyle = { diff --git a/src/components/Block/index.tsx b/src/components/Block/index.tsx index 9c7f368b..1698ae41 100644 --- a/src/components/Block/index.tsx +++ b/src/components/Block/index.tsx @@ -7,6 +7,7 @@ export type BlockProps = { as?: keyof HTMLElementTagNameMap style?: React.CSSProperties direction: "horizontal" | "vertical" + children?: React.ReactNode } export const Block: React.FC = ({ as = "div", style, direction, ...props }) => { diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index bbd34f05..18c13565 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -3,6 +3,7 @@ import s from "./styles.module.css" import Link from "next/link" import cx from "classnames" import { useCallback } from "react" +import type { MouseEvent, MouseEventHandler } from "react" const sizeClass = { default: s.sizeDefault, @@ -16,6 +17,7 @@ const themeClass = { } export type ButtonProps = { + children?: React.ReactNode value?: any style?: React.CSSProperties href?: string @@ -29,7 +31,7 @@ export const Button: React.FC = ({ size = "default", theme = "defau const className = cx(s.button, sizeClass[size], themeClass[theme], { [s.disabled]: disabled, }) - const onClick = useCallback(event => { + const onClick = useCallback>(event => { if (props.onClick) { props.onClick(props.value, event) } diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx index 945ccbfa..11166069 100644 --- a/src/components/Card/index.tsx +++ b/src/components/Card/index.tsx @@ -10,6 +10,7 @@ const layoutClass = { export type CardLayout = "simple" | "featured" export type CardProps = { + children?: React.ReactNode style?: React.CSSProperties href: string cover: React.ReactNode diff --git a/src/components/CardGrid/index.tsx b/src/components/CardGrid/index.tsx index 7948ffb0..49180ac5 100644 --- a/src/components/CardGrid/index.tsx +++ b/src/components/CardGrid/index.tsx @@ -1,6 +1,7 @@ import s from "./styles.module.css" export type CardGridProps = { + children?: React.ReactNode style?: React.CSSProperties } diff --git a/src/components/Content/index.tsx b/src/components/Content/index.tsx index b53ff902..90f98b3e 100644 --- a/src/components/Content/index.tsx +++ b/src/components/Content/index.tsx @@ -3,6 +3,7 @@ import { useReducedMotion } from "src/hooks/useReducedMotion" export type ContentProps = { style?: React.CSSProperties + children?: React.ReactNode } export const Content: React.FC = props => { diff --git a/src/components/File/index.tsx b/src/components/File/index.tsx index 7550fa24..8149f2fa 100644 --- a/src/components/File/index.tsx +++ b/src/components/File/index.tsx @@ -8,7 +8,7 @@ export type FileProps = FileDefinition & { style?: React.CSSProperties } -export const File: React.SFC = props => ( +export const File: React.FC = props => (
{!props.cover?.src ? null : (
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 28c4b86f..8c5dfd04 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -7,11 +7,12 @@ import { Block } from "../Block" import { Spacer } from "../Spacer" import { Contacts } from "../Contacts" -export interface IFooterProps { +export type FooterProps = { showAuthor: boolean + children?: React.ReactNode } -export const Footer: React.FC = props => ( +export const Footer: React.FC = props => (
= props => props.href diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 8fb57050..f1df3ce8 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -6,6 +6,7 @@ import { isPartOfPath } from "src/lib/url" export type MenuItemProps = { href: string + children?: React.ReactNode } export const MenuItem: React.FC = props => { diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx index 5138600d..bc430034 100644 --- a/src/components/Navigation/index.tsx +++ b/src/components/Navigation/index.tsx @@ -8,11 +8,11 @@ import { Block } from "../Block" import { Spacer } from "../Spacer" import { useToggle } from "react-use" -export interface INavigationProps { +export type NavigationProps = { style?: React.CSSProperties } -export const Navigation: React.FC = props => { +export const Navigation: React.FC = props => { const collapseMenu = useMobile() const [open, toggleOpen] = useToggle(false) const { menu } = useContext(ConfigContext) diff --git a/src/components/Overlay/Transition.tsx b/src/components/Overlay/Transition.tsx index 48be786b..885b1d9e 100644 --- a/src/components/Overlay/Transition.tsx +++ b/src/components/Overlay/Transition.tsx @@ -1,25 +1,26 @@ -import * as React from "react" +import { useCallback, useEffect, useMemo, useState } from "react" -export interface ITransitionProps { +export type TransitionProps = { + children?: React.ReactNode duration: number extraStyle?: React.CSSProperties show: boolean } -export const Transition: React.FC = props => { - const [mounted, setMounted] = React.useState(props.show) - const [opacity, setOpacity] = React.useState(0) - const onTransitionEnd = React.useCallback(() => { +export const Transition: React.FC = props => { + const [mounted, setMounted] = useState(props.show) + const [opacity, setOpacity] = useState(0) + const onTransitionEnd = useCallback(() => { if (opacity === 0) { setMounted(false) } }, [opacity]) - const transition = React.useMemo( + const transition = useMemo( () => `all ${props.duration}ms`, [props.duration] ) - React.useEffect(() => { + useEffect(() => { if (!props.show) { setOpacity(0) return diff --git a/src/components/Overlay/index.tsx b/src/components/Overlay/index.tsx index 1b1e5947..d380ad04 100644 --- a/src/components/Overlay/index.tsx +++ b/src/components/Overlay/index.tsx @@ -5,6 +5,7 @@ import { useReducedMotion } from "../../hooks/useReducedMotion" import { useLockBodyScroll } from "react-use" export type OverlayProps = { + children?: React.ReactNode show: boolean onClickOverlay: () => void style?: React.CSSProperties diff --git a/src/components/Page/index.tsx b/src/components/Page/index.tsx index 2ba3c620..38257e6d 100644 --- a/src/components/Page/index.tsx +++ b/src/components/Page/index.tsx @@ -4,6 +4,7 @@ import { PageMeta } from "../PageMeta" import { ITag } from "src/types" export type PageProps = { + children?: React.ReactNode style?: React.CSSProperties date?: Date tags: ITag[] diff --git a/src/components/TagList/index.tsx b/src/components/TagList/index.tsx index ced51795..6b8b00c6 100644 --- a/src/components/TagList/index.tsx +++ b/src/components/TagList/index.tsx @@ -12,6 +12,7 @@ const directionClass = { export type Direction = 'horizontal' | 'vertical' export type TagProps = { + children?: React.ReactNode href: string direction: Direction } diff --git a/src/components/Wrapper/index.tsx b/src/components/Wrapper/index.tsx index 0725f431..cc5c99bb 100644 --- a/src/components/Wrapper/index.tsx +++ b/src/components/Wrapper/index.tsx @@ -7,6 +7,7 @@ export type WrapperProps = { footer: React.ReactNode style?: React.CSSProperties mainStyle?: React.CSSProperties + children?: React.ReactNode } export const Wrapper: React.FC = props => ( From 8ba8b0d05be3833abaa0c7abbf188381a2fd791e Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 16:16:32 +0300 Subject: [PATCH 03/22] eslint rules updated --- .eslintrc.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.eslintrc.json b/.eslintrc.json index da66e072..5fec5420 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -14,11 +14,12 @@ "warn", "double" ], - "no-tabs": "off", + "no-tabs": "error", "indent": [ "warn", 4 ], + "no-var": "error", "eol-last": ["error", "always"], "react/jsx-uses-react": "error", "react/jsx-uses-vars": "error" From 585d3ae75cf0e1d6cba9d1ca91d459dc13cd916f Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 16:23:42 +0300 Subject: [PATCH 04/22] Button update --- src/components/Button/index.tsx | 4 ++-- src/components/Button/styles.module.css | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 18c13565..6f58bb0a 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -32,10 +32,10 @@ export const Button: React.FC = ({ size = "default", theme = "defau [s.disabled]: disabled, }) const onClick = useCallback>(event => { - if (props.onClick) { + if (typeof props.onClick === "function") { props.onClick(props.value, event) } - }, [props.value, props.onClick]) + }, [props]) if (props.href) { return ( diff --git a/src/components/Button/styles.module.css b/src/components/Button/styles.module.css index 96b64d31..04a37c84 100644 --- a/src/components/Button/styles.module.css +++ b/src/components/Button/styles.module.css @@ -1,5 +1,7 @@ .button { - display: block; + display: inline-flex; + align-items: center; + font-size: var(--font-size-default); text-align: center; From ac8a54895f5eb87aeece78728f353684b950574b Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 16:26:33 +0300 Subject: [PATCH 05/22] TagList eslint fix --- src/components/TagList/index.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/TagList/index.tsx b/src/components/TagList/index.tsx index 6b8b00c6..5de5b643 100644 --- a/src/components/TagList/index.tsx +++ b/src/components/TagList/index.tsx @@ -1,15 +1,16 @@ -import s from './styles.module.css' +import s from "./styles.module.css" -import cx from 'classnames' -import { ITag } from 'src/types' -import { Button } from '../Button' +import cx from "classnames" +import { ITag } from "src/types" +import { Button } from "../Button" +import Image from "next/image" const directionClass = { - horizontal: '', + horizontal: "", vertical: s.vertical, } -export type Direction = 'horizontal' | 'vertical' +export type Direction = "horizontal" | "vertical" export type TagProps = { children?: React.ReactNode From 6c71a78fe6537b6ec6bce46726b55288393f95b7 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 16:27:34 +0300 Subject: [PATCH 06/22] Button component -> ui --- src/components/Breadcrumbs/index.tsx | 2 +- src/components/MenuToggle/index.tsx | 2 +- src/components/Pager/index.tsx | 2 +- src/components/TagList/index.tsx | 2 +- src/{components => ui}/Button/index.tsx | 0 src/{components => ui}/Button/styles.module.css | 0 6 files changed, 4 insertions(+), 4 deletions(-) rename src/{components => ui}/Button/index.tsx (100%) rename src/{components => ui}/Button/styles.module.css (100%) diff --git a/src/components/Breadcrumbs/index.tsx b/src/components/Breadcrumbs/index.tsx index ab52fcc9..7e3e0b3f 100644 --- a/src/components/Breadcrumbs/index.tsx +++ b/src/components/Breadcrumbs/index.tsx @@ -1,7 +1,7 @@ import s from "./styles.module.css" import { IBreadcumbsPart } from "src/types" -import { Button } from "../Button" +import { Button } from "@/ui/Button" import { insertBetween } from "src/lib/array" export type BreadcrumbsProps = { diff --git a/src/components/MenuToggle/index.tsx b/src/components/MenuToggle/index.tsx index 79b7ad0c..932777be 100644 --- a/src/components/MenuToggle/index.tsx +++ b/src/components/MenuToggle/index.tsx @@ -1,7 +1,7 @@ import s from "./styles.module.css" import cx from "classnames" -import { Button } from "../Button" +import { Button } from "@/ui/Button" export interface IMenuToggleProps { style?: React.CSSProperties diff --git a/src/components/Pager/index.tsx b/src/components/Pager/index.tsx index b7dd8b92..1995ca1a 100644 --- a/src/components/Pager/index.tsx +++ b/src/components/Pager/index.tsx @@ -1,5 +1,5 @@ import { Block, BlockProps } from "../Block" -import { Button } from "../Button" +import { Button } from "@/ui/Button" import { Spacer } from "../Spacer" export type PagerProps = Omit & { diff --git a/src/components/TagList/index.tsx b/src/components/TagList/index.tsx index 5de5b643..c4c0e57e 100644 --- a/src/components/TagList/index.tsx +++ b/src/components/TagList/index.tsx @@ -2,7 +2,7 @@ import s from "./styles.module.css" import cx from "classnames" import { ITag } from "src/types" -import { Button } from "../Button" +import { Button } from "@/ui/Button" import Image from "next/image" const directionClass = { diff --git a/src/components/Button/index.tsx b/src/ui/Button/index.tsx similarity index 100% rename from src/components/Button/index.tsx rename to src/ui/Button/index.tsx diff --git a/src/components/Button/styles.module.css b/src/ui/Button/styles.module.css similarity index 100% rename from src/components/Button/styles.module.css rename to src/ui/Button/styles.module.css From e8a4ba054b5f30a2cf420b84ad479024e4be4b47 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 16:29:49 +0300 Subject: [PATCH 07/22] Overlay components -> ui --- src/components/Navigation/index.tsx | 2 +- src/{components => ui}/Overlay/Transition.tsx | 0 src/{components => ui}/Overlay/index.tsx | 0 src/{components => ui}/Overlay/styles.module.css | 0 4 files changed, 1 insertion(+), 1 deletion(-) rename src/{components => ui}/Overlay/Transition.tsx (100%) rename src/{components => ui}/Overlay/index.tsx (100%) rename src/{components => ui}/Overlay/styles.module.css (100%) diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx index bc430034..1b49066b 100644 --- a/src/components/Navigation/index.tsx +++ b/src/components/Navigation/index.tsx @@ -1,7 +1,7 @@ import { MenuToggle } from "../MenuToggle" import { useMobile } from "src/hooks/useMobile" import { Menu } from "../Menu" -import { Overlay } from "../Overlay" +import { Overlay } from "@/ui/Overlay" import { useContext } from "react" import { ConfigContext } from "src/context/ConfigContext" import { Block } from "../Block" diff --git a/src/components/Overlay/Transition.tsx b/src/ui/Overlay/Transition.tsx similarity index 100% rename from src/components/Overlay/Transition.tsx rename to src/ui/Overlay/Transition.tsx diff --git a/src/components/Overlay/index.tsx b/src/ui/Overlay/index.tsx similarity index 100% rename from src/components/Overlay/index.tsx rename to src/ui/Overlay/index.tsx diff --git a/src/components/Overlay/styles.module.css b/src/ui/Overlay/styles.module.css similarity index 100% rename from src/components/Overlay/styles.module.css rename to src/ui/Overlay/styles.module.css From c9628678d8701e4ce82f804e3ec5d7eb7395f58a Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 18:59:29 +0300 Subject: [PATCH 08/22] menu rewritten with radix-ui --- package-lock.json | 389 ++++++++++++++++++++++++++ package.json | 1 + src/components/App/index.tsx | 9 +- src/components/Menu/MenuItem.tsx | 35 --- src/components/Menu/index.tsx | 56 ++-- src/components/Menu/styles.module.css | 44 ++- src/components/Navigation/index.tsx | 10 +- src/lib/url.ts | 4 - src/style/article.css | 15 + src/style/style.css | 25 +- 10 files changed, 475 insertions(+), 113 deletions(-) delete mode 100644 src/components/Menu/MenuItem.tsx diff --git a/package-lock.json b/package-lock.json index 7ab5970f..4bf09e80 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "7.0.0", "license": "ISC", "dependencies": { + "@radix-ui/react-navigation-menu": "^1.0.0", "classnames": "^2.2.6", "date-fns": "^2.11.1", "lodash": "^4.17.21", @@ -373,6 +374,227 @@ "node": ">= 8" } }, + "node_modules/@radix-ui/primitive": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz", + "integrity": "sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==", + "dependencies": { + "@babel/runtime": "^7.13.10" + } + }, + "node_modules/@radix-ui/react-collection": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.0.tgz", + "integrity": "sha512-8i1pf5dKjnq90Z8udnnXKzdCEV3/FYrfw0n/b6NvB6piXEn3fO1bOh7HBcpG8XrnIXzxlYu2oCcR38QpyLS/mg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-primitive": "1.0.0", + "@radix-ui/react-slot": "1.0.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-compose-refs": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz", + "integrity": "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-context": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.0.tgz", + "integrity": "sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-direction": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.0.tgz", + "integrity": "sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-dismissable-layer": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz", + "integrity": "sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-primitive": "1.0.0", + "@radix-ui/react-use-callback-ref": "1.0.0", + "@radix-ui/react-use-escape-keydown": "1.0.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-id": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz", + "integrity": "sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-layout-effect": "1.0.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-navigation-menu": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.0.0.tgz", + "integrity": "sha512-HbwG3A9z9zdcan0076EbTXqMvmQeesC3nOMEL7XtWqBnxPo8MLStk0vMs0hjIQ+9O9/KTcEJq+TeRX2pUuvuSg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-collection": "1.0.0", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-direction": "1.0.0", + "@radix-ui/react-dismissable-layer": "1.0.0", + "@radix-ui/react-id": "1.0.0", + "@radix-ui/react-presence": "1.0.0", + "@radix-ui/react-primitive": "1.0.0", + "@radix-ui/react-use-callback-ref": "1.0.0", + "@radix-ui/react-use-controllable-state": "1.0.0", + "@radix-ui/react-use-layout-effect": "1.0.0", + "@radix-ui/react-use-previous": "1.0.0", + "@radix-ui/react-visually-hidden": "1.0.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-presence": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.0.tgz", + "integrity": "sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-use-layout-effect": "1.0.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-primitive": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz", + "integrity": "sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-slot": "1.0.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-slot": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.0.tgz", + "integrity": "sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-use-callback-ref": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz", + "integrity": "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-use-controllable-state": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz", + "integrity": "sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-callback-ref": "1.0.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-use-escape-keydown": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz", + "integrity": "sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-callback-ref": "1.0.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-use-layout-effect": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz", + "integrity": "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-use-previous": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.0.tgz", + "integrity": "sha512-RG2K8z/K7InnOKpq6YLDmT49HGjNmrK+fr82UCVKT2sW0GYfVnYp4wZWBooT/EYfQ5faA9uIjvsuMMhH61rheg==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-visually-hidden": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.0.tgz", + "integrity": "sha512-MwAhMdX+n6S4InwRKSnpUsp+lLkYG6izQF56ul6guSX2mBBLOMV9Frx7xJlkEe2GjKLzbNuHhaCS6e5gopmZNA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.4.tgz", @@ -4245,6 +4467,173 @@ "fastq": "^1.6.0" } }, + "@radix-ui/primitive": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz", + "integrity": "sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==", + "requires": { + "@babel/runtime": "^7.13.10" + } + }, + "@radix-ui/react-collection": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.0.tgz", + "integrity": "sha512-8i1pf5dKjnq90Z8udnnXKzdCEV3/FYrfw0n/b6NvB6piXEn3fO1bOh7HBcpG8XrnIXzxlYu2oCcR38QpyLS/mg==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-primitive": "1.0.0", + "@radix-ui/react-slot": "1.0.0" + } + }, + "@radix-ui/react-compose-refs": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz", + "integrity": "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==", + "requires": { + "@babel/runtime": "^7.13.10" + } + }, + "@radix-ui/react-context": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.0.tgz", + "integrity": "sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==", + "requires": { + "@babel/runtime": "^7.13.10" + } + }, + "@radix-ui/react-direction": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.0.tgz", + "integrity": "sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==", + "requires": { + "@babel/runtime": "^7.13.10" + } + }, + "@radix-ui/react-dismissable-layer": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz", + "integrity": "sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-primitive": "1.0.0", + "@radix-ui/react-use-callback-ref": "1.0.0", + "@radix-ui/react-use-escape-keydown": "1.0.0" + } + }, + "@radix-ui/react-id": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz", + "integrity": "sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-layout-effect": "1.0.0" + } + }, + "@radix-ui/react-navigation-menu": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.0.0.tgz", + "integrity": "sha512-HbwG3A9z9zdcan0076EbTXqMvmQeesC3nOMEL7XtWqBnxPo8MLStk0vMs0hjIQ+9O9/KTcEJq+TeRX2pUuvuSg==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-collection": "1.0.0", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-direction": "1.0.0", + "@radix-ui/react-dismissable-layer": "1.0.0", + "@radix-ui/react-id": "1.0.0", + "@radix-ui/react-presence": "1.0.0", + "@radix-ui/react-primitive": "1.0.0", + "@radix-ui/react-use-callback-ref": "1.0.0", + "@radix-ui/react-use-controllable-state": "1.0.0", + "@radix-ui/react-use-layout-effect": "1.0.0", + "@radix-ui/react-use-previous": "1.0.0", + "@radix-ui/react-visually-hidden": "1.0.0" + } + }, + "@radix-ui/react-presence": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.0.tgz", + "integrity": "sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-use-layout-effect": "1.0.0" + } + }, + "@radix-ui/react-primitive": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz", + "integrity": "sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-slot": "1.0.0" + } + }, + "@radix-ui/react-slot": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.0.tgz", + "integrity": "sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.0" + } + }, + "@radix-ui/react-use-callback-ref": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz", + "integrity": "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==", + "requires": { + "@babel/runtime": "^7.13.10" + } + }, + "@radix-ui/react-use-controllable-state": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz", + "integrity": "sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-callback-ref": "1.0.0" + } + }, + "@radix-ui/react-use-escape-keydown": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz", + "integrity": "sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-callback-ref": "1.0.0" + } + }, + "@radix-ui/react-use-layout-effect": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz", + "integrity": "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==", + "requires": { + "@babel/runtime": "^7.13.10" + } + }, + "@radix-ui/react-use-previous": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.0.tgz", + "integrity": "sha512-RG2K8z/K7InnOKpq6YLDmT49HGjNmrK+fr82UCVKT2sW0GYfVnYp4wZWBooT/EYfQ5faA9uIjvsuMMhH61rheg==", + "requires": { + "@babel/runtime": "^7.13.10" + } + }, + "@radix-ui/react-visually-hidden": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.0.tgz", + "integrity": "sha512-MwAhMdX+n6S4InwRKSnpUsp+lLkYG6izQF56ul6guSX2mBBLOMV9Frx7xJlkEe2GjKLzbNuHhaCS6e5gopmZNA==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.0" + } + }, "@rushstack/eslint-patch": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.4.tgz", diff --git a/package.json b/package.json index a85145f2..4a7d1d14 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "author": "Roman Timashev", "license": "ISC", "dependencies": { + "@radix-ui/react-navigation-menu": "^1.0.0", "classnames": "^2.2.6", "date-fns": "^2.11.1", "lodash": "^4.17.21", diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index b8489988..b43729eb 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -1,4 +1,3 @@ -import dynamic from "next/dynamic" import { Wrapper } from "../Wrapper" import { ConfigContext } from "src/context/ConfigContext" import config from "src/config" @@ -10,11 +9,7 @@ import { IBreadcumbsPart, IMenu } from "src/types" import { useRouter } from "next/router" import { useMobile } from "src/hooks/useMobile" import { Gosuslugi } from "../Gosuslugi" -import { NavigationProps } from "@/components/Navigation" - -const Navigation = dynamic(() => import("../Navigation").then(mod => mod.Navigation), { - ssr: false, -}) +import { Navigation } from "@/components/Navigation" export type AppProps = { showAuthor?: boolean @@ -40,7 +35,7 @@ export const App: React.FC = ({ showAuthor = false, menu, ...props }) header={(
{hideBreadcrumbs || !props.breadcrumbs ? null : ( diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx deleted file mode 100644 index f1df3ce8..00000000 --- a/src/components/Menu/MenuItem.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import s from "./styles.module.css" -import cx from "classnames" -import { useRouter } from "next/router" -import { ActiveLink } from "./ActiveLink" -import { isPartOfPath } from "src/lib/url" - -export type MenuItemProps = { - href: string - children?: React.ReactNode -} - -export const MenuItem: React.FC = props => { - const ignore = ["/"] - const router = useRouter() - const current = router.asPath === props.href - const selected = current || (!ignore.includes(props.href) && isPartOfPath(props.href, router.asPath)) - const href = current ? undefined : props.href - - return ( -
  • - - {props.children} - -
    • - ) -} diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index be6ac673..7e4424dd 100644 --- a/src/components/Menu/index.tsx +++ b/src/components/Menu/index.tsx @@ -1,27 +1,45 @@ import s from "./styles.module.css" -import cx from "classnames" -import { MenuItem } from "./MenuItem" -import { IMenu } from "src/types" +import { IMenu } from "@/types" +import * as NavigationMenu from "@radix-ui/react-navigation-menu" +import classnames from "classnames/bind" +import { useRouter } from "next/router" +import { ActiveLink } from "./ActiveLink" -const layoutClass = { - desktop: s.desktop, - mobile: s.mobile, -} +let cx = classnames.bind(s) + +export type MenuLayout = "desktop" | "mobile" export type MenuProps = { - layout: "desktop" | "mobile" + layout: MenuLayout items: IMenu[] } -export const Menu: React.FC = props => ( - - {props.items.map((item, index) => ( - - {item.name} - - ))} - -) +export const Menu: React.FC = ({ layout, items }) => { + const router = useRouter() + return ( + + + { + items.map(item => { + const current = router.asPath === item.href + const href = current ? undefined : item.href + + if (!href) { + return ( + + {item.name} + + ) + } + return ( + + {item.name} + + ) + }) + } + + + ) +} diff --git a/src/components/Menu/styles.module.css b/src/components/Menu/styles.module.css index aa6c1653..d8733f91 100644 --- a/src/components/Menu/styles.module.css +++ b/src/components/Menu/styles.module.css @@ -3,8 +3,12 @@ align-items: flex-start; flex-wrap: wrap; + gap: var(--size-m); + font-size: var(--font-size-second); list-style: none; + + padding: var(--size-s); } /* MENU LAYOUT */ @@ -19,34 +23,28 @@ /* MENU ITEM */ -.menu li { - position: relative; - border-top: var(--menu-mark-thickness) solid rgba(0, 0, 0, 0); +.menuItem { + user-select: none; + background-color: var(--color-back-main); + border-radius: var(--size-s); + transition: box-shadow 200ms ease-in; + padding: var(--size-s) var(--size-s); } -/* MENU ITEM MOBILE */ - -.mobile li { - font-size: var(--font-size-default); - - padding: var(--size-xs) var(--size-s); +.menuItem.active { + cursor: pointer; } -.mobile li.selected { +.menuItem.active:hover { + box-shadow: var(--shadow); +} + +.menuItem.current { + color: var(--color-text-opposite); background-color: var(--color-back-opposite); - color: var(--color-text-opposite) } -.mobile li.selected a { - color: var(--color-text-opposite) -} - -/* MENU ITEM DESKTOP */ - -.desktop li { - padding: var(--size-xs) var(--size-s); -} - -.desktop li.selected { - border-top-color: var(--color-back-opposite); +.menuItem a { + text-decoration: none; + color: var(--color-text); } diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx index 1b49066b..4ff04f62 100644 --- a/src/components/Navigation/index.tsx +++ b/src/components/Navigation/index.tsx @@ -19,12 +19,10 @@ export const Navigation: React.FC = props => { if (!collapseMenu) { return ( - + ) } diff --git a/src/lib/url.ts b/src/lib/url.ts index 2ae5acbe..bdc785a5 100644 --- a/src/lib/url.ts +++ b/src/lib/url.ts @@ -1,7 +1,3 @@ -export function isPartOfPath(part: string, path: string): boolean { - return path.startsWith(part) -} - export function queryList(key: string, values: string[]): string { if (values.length === 0) { return "" diff --git a/src/style/article.css b/src/style/article.css index 5b8f9b23..2f5d52ed 100644 --- a/src/style/article.css +++ b/src/style/article.css @@ -2,6 +2,21 @@ hyphens: auto; } +.article a { + color: var(--color-text); + + text-decoration: none; + border-bottom: 1px solid var(--color-link); +} + +.article a:hover { + border-bottom: 2px solid var(--color-text); +} + +.article a:active { + border-width: 2px; +} + .article h1 { margin-bottom: var(--size-l); } diff --git a/src/style/style.css b/src/style/style.css index b38b0389..ad49196b 100644 --- a/src/style/style.css +++ b/src/style/style.css @@ -44,14 +44,16 @@ /* EFFECTS */ --radius: 16px; - --shadow: 0 0 8px var(--color-shadow); + --shadow: + 0 2px 4px rgba(27, 51, 88, 0.2), + 0 4px 8px -8px rgba(0, 0, 0, 0.2), + 0 8px 16px -8px rgba(0, 0, 0, 0.3); --shadow-active: 0 12px 24px -8px rgba(27, 51, 88, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3); /* SPECIAL */ --article-line-height: 1.5em; - --menu-mark-thickness: 4px; --embed-video-ratio: 56.25%; /* CONTENT */ @@ -108,24 +110,9 @@ h3 { hyphens: none; } -a { - color: var(--color-text); - - text-decoration: none; - border-bottom: 1px solid var(--color-link); -} - -a:hover { - border-bottom: 2px solid var(--color-text); -} - -a:active { - border-width: 2px; -} - -a.invisible { +/* a.invisible { border-bottom: none; -} +} */ .opposite a { color: var(--color-text-opposite); From 12ed6775e81e00035c938881fc30fdce9e151fe6 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 19:00:23 +0300 Subject: [PATCH 09/22] rm items from config menu --- src/config.ts | 28 ---------------------------- 1 file changed, 28 deletions(-) diff --git a/src/config.ts b/src/config.ts index 49d38097..14ff5217 100644 --- a/src/config.ts +++ b/src/config.ts @@ -40,34 +40,6 @@ const config = { name: "Школа", href: "/", }, - { - name: "Поступление", - href: "/join", - }, - { - name: "Предметы", - href: "/courses", - }, - { - name: "Коллектив", - href: "/collective", - }, - { - name: "«Мы соседи»", - href: "/neighbors", - }, - { - name: "Документы", - href: "/documents", - }, - { - name: "Сведения об образовательной организации", - href: "/info", - }, - { - name: "Дистанционное образование", - href: "/info/online-education", - }, ], } From 94138a51ed574e4e8a0461be766379c8504432b6 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 19:05:30 +0300 Subject: [PATCH 10/22] card link fix --- src/components/Card/styles.module.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Card/styles.module.css b/src/components/Card/styles.module.css index 02057bd9..1fa702c2 100644 --- a/src/components/Card/styles.module.css +++ b/src/components/Card/styles.module.css @@ -23,6 +23,8 @@ display: block; height: 100%; position: relative; + color: var(--color-text); + text-decoration: none; } .image { From b1c37b7321c272d616f9c5cc44bdf9647711ed23 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 19:05:38 +0300 Subject: [PATCH 11/22] card style format --- src/components/Card/styles.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Card/styles.module.css b/src/components/Card/styles.module.css index 1fa702c2..1ed4a9c5 100644 --- a/src/components/Card/styles.module.css +++ b/src/components/Card/styles.module.css @@ -42,7 +42,7 @@ .simple .body { position: relative; - padding-top: 0; + padding-top: 0; } .simple .body:before { From e2acd4f2381b12a9438949c4c150fa355f5eb0c6 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 19:05:51 +0300 Subject: [PATCH 12/22] Picture placeholder fix --- src/components/Picture/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Picture/index.tsx b/src/components/Picture/index.tsx index 3f4668be..0032eb3d 100644 --- a/src/components/Picture/index.tsx +++ b/src/components/Picture/index.tsx @@ -43,7 +43,7 @@ export const Picture: React.FC = memo(({ wide = false, ...props }) height={props.height} layout={"responsive"} blurDataURL={props.blur} - placeholder={"blur"} + placeholder={props.blur ? "blur": "empty"} /> {!props.caption ? null : (
    {props.caption}
    From 160c66a0af48c0a5946b77bee51579c5e73e9c66 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 20:03:09 +0300 Subject: [PATCH 13/22] Button css file rename --- src/ui/Button/{styles.module.css => button.module.css} | 0 src/ui/Button/index.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/ui/Button/{styles.module.css => button.module.css} (100%) diff --git a/src/ui/Button/styles.module.css b/src/ui/Button/button.module.css similarity index 100% rename from src/ui/Button/styles.module.css rename to src/ui/Button/button.module.css diff --git a/src/ui/Button/index.tsx b/src/ui/Button/index.tsx index 6f58bb0a..6ac4463f 100644 --- a/src/ui/Button/index.tsx +++ b/src/ui/Button/index.tsx @@ -1,4 +1,4 @@ -import s from "./styles.module.css" +import s from "./button.module.css" import Link from "next/link" import cx from "classnames" From 1d1e41adeaebc0ead6273d82bc8aa922d38ebd86 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 20:37:24 +0300 Subject: [PATCH 14/22] ui components updates --- package-lock.json | 15 +++++ package.json | 1 + public/static/graphics/hmenu-b.png | Bin 137 -> 0 bytes public/static/graphics/hmenu-close-b.png | Bin 500 -> 0 bytes src/components/Block/index.tsx | 9 ++- src/components/Block/styles.module.css | 4 ++ src/components/Menu/index.tsx | 8 +-- src/components/Menu/styles.module.css | 19 +++--- src/components/MenuToggle/index.tsx | 15 ++--- src/components/MenuToggle/styles.module.css | 14 ----- src/components/Navigation/index.tsx | 64 +++++++++----------- src/style/style.css | 1 + src/ui/Button/button.module.css | 22 ++++--- 13 files changed, 90 insertions(+), 82 deletions(-) delete mode 100644 public/static/graphics/hmenu-b.png delete mode 100644 public/static/graphics/hmenu-close-b.png delete mode 100644 src/components/MenuToggle/styles.module.css diff --git a/package-lock.json b/package-lock.json index 4bf09e80..93cfbacd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "7.0.0", "license": "ISC", "dependencies": { + "@radix-ui/react-icons": "^1.1.1", "@radix-ui/react-navigation-menu": "^1.0.0", "classnames": "^2.2.6", "date-fns": "^2.11.1", @@ -448,6 +449,14 @@ "react-dom": "^16.8 || ^17.0 || ^18.0" } }, + "node_modules/@radix-ui/react-icons": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.1.1.tgz", + "integrity": "sha512-xc3wQC59rsFylVbSusQCrrM+6695ppF730Q6yqzhRdqDcRNWIm2R6ngpzBoSOQMcwnq4p805F+Gr7xo4fmtN1A==", + "peerDependencies": { + "react": "^16.x || ^17.x || ^18.x" + } + }, "node_modules/@radix-ui/react-id": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz", @@ -4524,6 +4533,12 @@ "@radix-ui/react-use-escape-keydown": "1.0.0" } }, + "@radix-ui/react-icons": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.1.1.tgz", + "integrity": "sha512-xc3wQC59rsFylVbSusQCrrM+6695ppF730Q6yqzhRdqDcRNWIm2R6ngpzBoSOQMcwnq4p805F+Gr7xo4fmtN1A==", + "requires": {} + }, "@radix-ui/react-id": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz", diff --git a/package.json b/package.json index 4a7d1d14..4db97ebd 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "author": "Roman Timashev", "license": "ISC", "dependencies": { + "@radix-ui/react-icons": "^1.1.1", "@radix-ui/react-navigation-menu": "^1.0.0", "classnames": "^2.2.6", "date-fns": "^2.11.1", diff --git a/public/static/graphics/hmenu-b.png b/public/static/graphics/hmenu-b.png deleted file mode 100644 index 4386ba369611e2fae249f6fdff7a3b4a8c68fff0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 137 zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=0iG_7Ar*7p-q^@_z<|fq(Xw0W zQpz%uMxR$_6gD_a*d6!b%0CXEx_{{@{OgL>bxnwU_uThyNk}Wmp!jbMs|0|I7pLU{ fM45n$3s>1a+~Zy%=d}e9gi0jMNt$*Q4~c{Dnvqm_;7#s0x~^0vu@k=5VNRjvDVHe#%;hKAD^CY zLt>cl^fJY>7#p{>*3QD?gki0njg8ylS%6GK;{+RUa%Sy?H}TAKn{XB{p1Bv^PR^`D zV+FUsr9wJqR;k+|cFsWtq$ntNuE7SRDlAuyC;GW&orqH1)qLssRwU;2f+Q5(8kEfShlZWClQ(kleFHQUl;`f=Ucl$qj((gq08vnGAs61(p&I84ZBT zLIFyNhs*}RHxuytz6fbbi0^Y3z*;*S%f~B7BY?;6J3m^MSgZ_KhzzF}UzY3!e6;}5 z^ey1`f;6QzOIZ#0@euT*W#>oBQkx~v*PsqUItr%@UiD$9>f>|CLA>1CGP~h_EZM#)94ib8 = ({ as = "div", style, direction, ...props }) => { +export const Block: React.FC = ({ as = "div", align = false, style, direction, ...props }) => { const directionClass = direction === "horizontal" ? s.horizontal : s.vertical const newProps = { - className: cx(s.block, directionClass), + className: cx(s.block, directionClass, { align }), style, } diff --git a/src/components/Block/styles.module.css b/src/components/Block/styles.module.css index 9676ac32..fe052dcb 100644 --- a/src/components/Block/styles.module.css +++ b/src/components/Block/styles.module.css @@ -5,6 +5,10 @@ justify-content: flex-start; } +.block.align { + align-items: center; +} + .horizontal { flex-direction: row; } diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index 7e4424dd..83cbea2e 100644 --- a/src/components/Menu/index.tsx +++ b/src/components/Menu/index.tsx @@ -8,18 +8,16 @@ import { ActiveLink } from "./ActiveLink" let cx = classnames.bind(s) -export type MenuLayout = "desktop" | "mobile" - export type MenuProps = { - layout: MenuLayout + vertical?: boolean items: IMenu[] } -export const Menu: React.FC = ({ layout, items }) => { +export const Menu: React.FC = ({ vertical = false, items }) => { const router = useRouter() return ( - + { items.map(item => { const current = router.asPath === item.href diff --git a/src/components/Menu/styles.module.css b/src/components/Menu/styles.module.css index d8733f91..e60ccf20 100644 --- a/src/components/Menu/styles.module.css +++ b/src/components/Menu/styles.module.css @@ -8,16 +8,11 @@ font-size: var(--font-size-second); list-style: none; - padding: var(--size-s); -} - -/* MENU LAYOUT */ - -.desktop { + /* NOT VERTICAL */ flex-direction: row; } -.mobile { +.vertical { flex-direction: column; } @@ -27,7 +22,7 @@ user-select: none; background-color: var(--color-back-main); border-radius: var(--size-s); - transition: box-shadow 200ms ease-in; + transition: box-shadow 200ms ease-in, background-color 200ms ease-in; padding: var(--size-s) var(--size-s); } @@ -48,3 +43,11 @@ text-decoration: none; color: var(--color-text); } + +/* DARK THEME */ +@media (prefers-color-scheme: dark) { + .menuItem.active:hover { + box-shadow: none; + background-color: var(--color-back); + } +} diff --git a/src/components/MenuToggle/index.tsx b/src/components/MenuToggle/index.tsx index 932777be..f24df0fa 100644 --- a/src/components/MenuToggle/index.tsx +++ b/src/components/MenuToggle/index.tsx @@ -1,7 +1,5 @@ -import s from "./styles.module.css" - -import cx from "classnames" import { Button } from "@/ui/Button" +import { HamburgerMenuIcon, Cross1Icon } from "@radix-ui/react-icons" export interface IMenuToggleProps { style?: React.CSSProperties @@ -16,12 +14,11 @@ export const MenuToggle: React.FC = props => { style={props.style} theme={"icon"} > -
    + {props.open ? ( + + ) : ( + + )} ) } diff --git a/src/components/MenuToggle/styles.module.css b/src/components/MenuToggle/styles.module.css deleted file mode 100644 index 1f984b06..00000000 --- a/src/components/MenuToggle/styles.module.css +++ /dev/null @@ -1,14 +0,0 @@ -.toggle { - --s: 32px; - width: var(--s); - height: var(--s); - background-size: var(--s); -} - -.toggle.open { - background-image: url(/static/graphics/hmenu-close-b.png); -} - -.toggle.close { - background-image: url(/static/graphics/hmenu-b.png); -} diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx index 4ff04f62..64a6875e 100644 --- a/src/components/Navigation/index.tsx +++ b/src/components/Navigation/index.tsx @@ -17,15 +17,6 @@ export const Navigation: React.FC = props => { const [open, toggleOpen] = useToggle(false) const { menu } = useContext(ConfigContext) - if (!collapseMenu) { - return ( - - ) - } - return ( <> = props => { onClickOverlay={toggleOpen} duration={250} > - + + + + + + + + + + {collapseMenu ? null : ( + + )} + + + + {!collapseMenu ? null : ( = props => { margin: "var(--size-xs)", }} /> - - - - - - - - - + )} ) diff --git a/src/style/style.css b/src/style/style.css index ad49196b..12a2a369 100644 --- a/src/style/style.css +++ b/src/style/style.css @@ -182,6 +182,7 @@ h3 { --color-back-main: hsl(240, 10%, 10%); --color-back: hsl(240, 10%, 15%); + --color-back-active: hsl(240, 10%, 20%); --color-back-opposite: hsl(240, 10%, 80%); --color-link: hsl(240, 10%, 40%); --color-link-opposite: hsl(240, 10%, 60%); diff --git a/src/ui/Button/button.module.css b/src/ui/Button/button.module.css index 04a37c84..4649d061 100644 --- a/src/ui/Button/button.module.css +++ b/src/ui/Button/button.module.css @@ -6,25 +6,21 @@ text-align: center; - border-radius: 100px; + border-radius: var(--size-s); border: 1px solid var(--color-shadow); color: var(--color-text); background-color: var(--color-back); - - transition: box-shadow 150ms; + box-shadow: none; + transition: box-shadow 200ms ease-in, background-color 200ms ease-in; outline: none; cursor: pointer; } .button:hover { - margin: 1px; - /* margin-left: 1px; - margin-right: 1px; */ - - border: none; - box-shadow: var(--shadow-active); + border-color: rgba(0, 0, 0, 0); + box-shadow: var(--shadow); } /* MODIFICATORS */ @@ -52,5 +48,13 @@ } .themeIcon { + border-color: rgba(0, 0, 0, 0); padding: var(--size-xs) var(--size-xs); } + +/* DARK THEME */ +@media (prefers-color-scheme: dark) { + .button:hover { + background-color: var(--color-back-active); + } +} From c2146e82bb8bb11f143dc0ed7a7da7625434d8f4 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 20:53:29 +0300 Subject: [PATCH 15/22] add ui Box --- src/ui/Box/box.module.css | 21 +++++++++++++++++++++ src/ui/Box/index.tsx | 31 +++++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+) create mode 100644 src/ui/Box/box.module.css create mode 100644 src/ui/Box/index.tsx diff --git a/src/ui/Box/box.module.css b/src/ui/Box/box.module.css new file mode 100644 index 00000000..60ac1382 --- /dev/null +++ b/src/ui/Box/box.module.css @@ -0,0 +1,21 @@ +.box { + display: flex; + /* align-items: baseline; */ + align-items: center; + + justify-content: flex-start; + flex-wrap: nowrap; + flex-direction: row; +} + +.box.wrap { + flex-wrap: wrap; +} + +.box.center { + justify-content: center; +} + +.box.vertical { + flex-direction: column; +} diff --git a/src/ui/Box/index.tsx b/src/ui/Box/index.tsx new file mode 100644 index 00000000..dc3130d7 --- /dev/null +++ b/src/ui/Box/index.tsx @@ -0,0 +1,31 @@ +import s from "./box.module.css" + +import classnames from "classnames/bind" +import { createElement } from "react" + +const cx = classnames.bind(s) + +export type BoxProps = { + as?: keyof HTMLElementTagNameMap + children?: React.ReactNode + style?: React.CSSProperties + wrap?: boolean + vertical?: boolean + center?: boolean +} + +export const Box: React.FC = ({ + as = "div", + wrap = false, + vertical = false, + center = false, + style, + ...props +}) => { + const newProps = { + className: cx(s.box, { vertical, center, wrap }), + style, + } + + return createElement(as, newProps, props.children) +} From 733260f6637269d194f1e7d5589e2dd57f39db1a Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 20:53:55 +0300 Subject: [PATCH 16/22] MenuToggle improved --- src/components/MenuToggle/index.tsx | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/src/components/MenuToggle/index.tsx b/src/components/MenuToggle/index.tsx index f24df0fa..84868393 100644 --- a/src/components/MenuToggle/index.tsx +++ b/src/components/MenuToggle/index.tsx @@ -1,24 +1,22 @@ -import { Button } from "@/ui/Button" +import { Button, ButtonProps } from "@/ui/Button" import { HamburgerMenuIcon, Cross1Icon } from "@radix-ui/react-icons" -export interface IMenuToggleProps { - style?: React.CSSProperties +export type MenuToggleProps = Omit & { open: boolean - onClick: () => void } -export const MenuToggle: React.FC = props => { +export const MenuToggle: React.FC = ({ open, ...props }) => { + const icon = open ? ( + + ) : ( + + ) return ( ) } From 84a2d8551fcbe35b27c7a1a64074211c5be46fb7 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 20:54:37 +0300 Subject: [PATCH 17/22] Navigation component update --- src/components/Navigation/index.tsx | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx index 64a6875e..90c3b8aa 100644 --- a/src/components/Navigation/index.tsx +++ b/src/components/Navigation/index.tsx @@ -4,7 +4,7 @@ import { Menu } from "../Menu" import { Overlay } from "@/ui/Overlay" import { useContext } from "react" import { ConfigContext } from "src/context/ConfigContext" -import { Block } from "../Block" +import { Box } from "@/ui/Box" import { Spacer } from "../Spacer" import { useToggle } from "react-use" @@ -24,7 +24,7 @@ export const Navigation: React.FC = props => { onClickOverlay={toggleOpen} duration={250} > - @@ -32,17 +32,17 @@ export const Navigation: React.FC = props => { open={open} onClick={toggleOpen} /> - - + - + - {collapseMenu ? null : ( @@ -57,12 +57,9 @@ export const Navigation: React.FC = props => { )} - + ) } From cced734dc441edb6fba3e05f9b486b1b571c3b5f Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 20:56:07 +0300 Subject: [PATCH 18/22] remove unused Pager --- src/components/Pager/index.tsx | 20 -------------------- 1 file changed, 20 deletions(-) delete mode 100644 src/components/Pager/index.tsx diff --git a/src/components/Pager/index.tsx b/src/components/Pager/index.tsx deleted file mode 100644 index 1995ca1a..00000000 --- a/src/components/Pager/index.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Block, BlockProps } from "../Block" -import { Button } from "@/ui/Button" -import { Spacer } from "../Spacer" - -export type PagerProps = Omit & { - nextHref: string | null - prevHref: string | null -} - -export const Pager: React.FC = ({ prevHref, nextHref, ...props }) => ( - - {!prevHref ? null : ( - - )} - - {!nextHref ? null : ( - - )} - -) From c0694b0953ac81a00b4ab3e078f675984896b226 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 21:03:42 +0300 Subject: [PATCH 19/22] Box align --- src/ui/Box/box.module.css | 8 ++++++-- src/ui/Box/index.tsx | 4 +++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/ui/Box/box.module.css b/src/ui/Box/box.module.css index 60ac1382..3eb304c2 100644 --- a/src/ui/Box/box.module.css +++ b/src/ui/Box/box.module.css @@ -1,18 +1,22 @@ .box { display: flex; - /* align-items: baseline; */ - align-items: center; + align-items: baseline; justify-content: flex-start; flex-wrap: nowrap; flex-direction: row; } +.box.align { + align-items: center; +} + .box.wrap { flex-wrap: wrap; } .box.center { + align-items: center; justify-content: center; } diff --git a/src/ui/Box/index.tsx b/src/ui/Box/index.tsx index dc3130d7..2243fdb5 100644 --- a/src/ui/Box/index.tsx +++ b/src/ui/Box/index.tsx @@ -10,6 +10,7 @@ export type BoxProps = { children?: React.ReactNode style?: React.CSSProperties wrap?: boolean + align?: boolean vertical?: boolean center?: boolean } @@ -19,11 +20,12 @@ export const Box: React.FC = ({ wrap = false, vertical = false, center = false, + align = true, style, ...props }) => { const newProps = { - className: cx(s.box, { vertical, center, wrap }), + className: cx(s.box, { vertical, align, center, wrap }), style, } From 671f737d2597b1281d59baba7b1789275d1294b3 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 21:08:55 +0300 Subject: [PATCH 20/22] use Box instead of Block --- src/components/App/index.tsx | 10 +++++----- src/components/Block/index.tsx | 26 -------------------------- src/components/Block/styles.module.css | 18 ------------------ src/components/Footer/index.tsx | 16 ++++++++-------- src/components/PageGrid/index.tsx | 8 +++----- 5 files changed, 16 insertions(+), 62 deletions(-) delete mode 100644 src/components/Block/index.tsx delete mode 100644 src/components/Block/styles.module.css diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index b43729eb..47ff5366 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -3,13 +3,13 @@ import { ConfigContext } from "src/context/ConfigContext" import config from "src/config" import { Footer } from "../Footer" import { Content } from "../Content" -import { Block } from "../Block" import { Breadcrumbs } from "../Breadcrumbs" import { IBreadcumbsPart, IMenu } from "src/types" import { useRouter } from "next/router" import { useMobile } from "src/hooks/useMobile" import { Gosuslugi } from "../Gosuslugi" import { Navigation } from "@/components/Navigation" +import { Box } from "@/ui/Box" export type AppProps = { showAuthor?: boolean @@ -38,14 +38,14 @@ export const App: React.FC = ({ showAuthor = false, menu, ...props }) // margin: "0 var(--size-m) var(--size-m)", }} /> {hideBreadcrumbs || !props.breadcrumbs ? null : ( - + - + )}
    )} @@ -64,11 +64,11 @@ export const App: React.FC = ({ showAuthor = false, menu, ...props })
    )} > - + {props.children} - + ) diff --git a/src/components/Block/index.tsx b/src/components/Block/index.tsx deleted file mode 100644 index ac214506..00000000 --- a/src/components/Block/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import s from "./styles.module.css" - -import classnames from "classnames/bind" -import { createElement } from "react" - -const cx = classnames.bind(s) - -export type BlockProps = { - as?: keyof HTMLElementTagNameMap - style?: React.CSSProperties - direction: "horizontal" | "vertical" - children?: React.ReactNode - align?: boolean -} - -export const Block: React.FC = ({ as = "div", align = false, style, direction, ...props }) => { - const directionClass = direction === "horizontal" - ? s.horizontal - : s.vertical - const newProps = { - className: cx(s.block, directionClass, { align }), - style, - } - - return createElement(as, newProps, props.children) -} diff --git a/src/components/Block/styles.module.css b/src/components/Block/styles.module.css deleted file mode 100644 index fe052dcb..00000000 --- a/src/components/Block/styles.module.css +++ /dev/null @@ -1,18 +0,0 @@ -.block { - display: flex; - flex-wrap: wrap; - align-items: baseline; - justify-content: flex-start; -} - -.block.align { - align-items: center; -} - -.horizontal { - flex-direction: row; -} - -.vertical { - flex-direction: column; -} diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 8c5dfd04..8a15b505 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -3,35 +3,35 @@ import s from "./footer.module.css" import cx from "classnames" import { Copyright } from "../Copyright" import { Author } from "./Author" -import { Block } from "../Block" import { Spacer } from "../Spacer" import { Contacts } from "../Contacts" +import { Box } from "@/ui/Box" export type FooterProps = { showAuthor: boolean children?: React.ReactNode } -export const Footer: React.FC = props => ( +export const Footer: React.FC = ({ showAuthor, children }) => (
    - - + - {props.children} + {children} - + - {!props.showAuthor ? null : ( + {!showAuthor ? null : ( <> )} - +
    ) diff --git a/src/components/PageGrid/index.tsx b/src/components/PageGrid/index.tsx index 289d1d1a..7c518751 100644 --- a/src/components/PageGrid/index.tsx +++ b/src/components/PageGrid/index.tsx @@ -3,8 +3,8 @@ import { PageCardDto } from "@/types" import { CardGrid } from "../CardGrid" import { Card, CardLayout } from "../Card" import { Date } from "./Date" -import { Block } from "../Block" import { Spacer } from "../Spacer" +import { Box } from "@/ui/Box" export type PageGridProps = { items: PageCardDto[] @@ -23,9 +23,7 @@ export const PageGrid: React.FC = props => { const content = !item.featured ? ( - + {item.title} {!item.date ? null : ( @@ -33,7 +31,7 @@ export const PageGrid: React.FC = props => { marginTop: "var(--size-m)", }}>{item.date} )} - + ) : ( item.title ) From aeb5a50d3588966a8dc4aa969220b4365cf971ce Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 21:09:11 +0300 Subject: [PATCH 21/22] wrapper min-height moved to content part --- src/components/Wrapper/wrapper.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Wrapper/wrapper.module.css b/src/components/Wrapper/wrapper.module.css index 012781a9..6b8d26b9 100644 --- a/src/components/Wrapper/wrapper.module.css +++ b/src/components/Wrapper/wrapper.module.css @@ -1,7 +1,6 @@ .container { display: flex; flex-direction: column; - min-height: 100vh; background-color: var(--color-back-main); font-family: var(--text-font); @@ -9,5 +8,6 @@ } .main { + min-height: 100vh; flex: 1; } From 458c3c35b3f2532cf9027e3da788b5e63bcb7e0a Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 21:11:57 +0300 Subject: [PATCH 22/22] 404 use Box --- pages/404.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/pages/404.tsx b/pages/404.tsx index 192cd16d..7cbcb37b 100644 --- a/pages/404.tsx +++ b/pages/404.tsx @@ -1,25 +1,25 @@ import { NextPage } from "next" -import { Wrapper } from "src/components/Wrapper" -import { NotFound } from "src/components/NotFound" -import { Copyright } from "src/components/Copyright" -import { Block } from "src/components/Block" -import { Spacer } from "src/components/Spacer" +import { Wrapper } from "@/components/Wrapper" +import { NotFound } from "@/components/NotFound" +import { Copyright } from "@/components/Copyright" +import { Spacer } from "@/components/Spacer" +import { Box } from "@/ui/Box" const Index: NextPage = () => ( + - + )} > - + - + )