From ee0dfa90f0955c9a6f9c0baa53d4b4d030f21623 Mon Sep 17 00:00:00 2001 From: romanhotsiy Date: Thu, 3 Dec 2020 11:03:50 +0400 Subject: [PATCH 1/4] chore: upgrade to beta.94 --- package.json | 2 +- yarn.lock | 92 ++++++++++++++++++---------------------------------- 2 files changed, 32 insertions(+), 62 deletions(-) diff --git a/package.json b/package.json index db52a74b..282f330a 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,6 @@ "clean": "redocly-portal clean" }, "dependencies": { - "@redocly/developer-portal": "1.0.0-beta.89" + "@redocly/developer-portal": "1.0.0-beta.94" } } diff --git a/yarn.lock b/yarn.lock index 90a131df..f39a0b73 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1787,10 +1787,10 @@ dependencies: tslib "^2.0.0" -"@redocly/developer-portal@1.0.0-beta.89": - version "1.0.0-beta.89" - resolved "https://registry.yarnpkg.com/@redocly/developer-portal/-/developer-portal-1.0.0-beta.89.tgz#5aafa0d1b193f98ce4aec699cdef93a43f77f978" - integrity sha512-FedUXaQBCOtAOhdD27F2AMOwUTMQeSTf39bgrG3NrngETemaxU42skkxlGx7D0JsnvadY5WjE+mQfwvDvPtOCA== +"@redocly/developer-portal@1.0.0-beta.94": + version "1.0.0-beta.94" + resolved "https://registry.yarnpkg.com/@redocly/developer-portal/-/developer-portal-1.0.0-beta.94.tgz#40980d36778addb3c8443472d81d7bfbaf37bfc2" + integrity sha512-57pWb2ddEx38qas/TVVGtGdHVeT2kwFSAKdulsEh3qBzCRfLtxgbmfbP5VVPSlmW94hEwc0/YEMRjVso2pbYpg== dependencies: "@babel/core" "^7.6.2" "@babel/preset-env" "^7.6.2" @@ -1801,8 +1801,8 @@ "@redocly/gatsby-plugin-sharp" "^2.6.11" "@redocly/gatsby-remark-images" "^3.3.11" "@redocly/openapi-cli" "~0.12.1" - "@redocly/redoc-int" "2.0.0-rc.46" - "@redocly/reference-docs-lib" "^1.3.2" + "@redocly/redoc-int" "^2.0.0-rc.55" + "@redocly/reference-docs-lib" "1.3.10" babel-plugin-styled-components "^1.10.7" chalk "^3.0.0" core-js "^2.6.9" @@ -1941,10 +1941,10 @@ resolved "https://registry.yarnpkg.com/@redocly/react-dropdown-aria/-/react-dropdown-aria-2.0.11.tgz#532b864b329237e646abe45d0f8edc923e77370a" integrity sha512-rmuSC2JFFl4DkPDdGVrmffT9KcbG2AB5jvhxPIrOc1dO9mHRMUUftQY35KZlvWqqSSqVn+AM+J9dhiTo1ZqR8A== -"@redocly/redoc-int@2.0.0-rc.46": - version "2.0.0-rc.46" - resolved "https://registry.yarnpkg.com/@redocly/redoc-int/-/redoc-int-2.0.0-rc.46.tgz#7485457620ea40a0c40a8aef284cc2fc3fd0dfbd" - integrity sha512-UiA0EouOgDT5uuAF5/xbiAOjOYgJsMO+dPaoiPfdrY2qcTtxI7sPys00hEIiUw8rxuy7WXwis+QT7v9WCBNqRA== +"@redocly/redoc-int@^2.0.0-rc.55": + version "2.0.0-rc.55" + resolved "https://registry.yarnpkg.com/@redocly/redoc-int/-/redoc-int-2.0.0-rc.55.tgz#2217e02809160fc5fb0ac4d2c6d08a92f1fde9ef" + integrity sha512-D5JdPHgmtUS6yqJsPi1YxN3h5DpflfIUAR84YjL2AIjCXfWiFqh8FZ/bgoMvlNYfikqBijXZ7lFxZ4R5dWd2vQ== dependencies: "@redocly/react-dropdown-aria" "^2.0.11" "@types/node" "^13.11.1" @@ -1958,11 +1958,11 @@ mark.js "^8.11.1" marked "^0.7.0" memoize-one "~5.1.1" - mobx-react "^6.2.2" - openapi-sampler "^1.0.0-beta.16" + mobx-react "^7.0.5" + openapi-sampler "^1.0.0-beta.18" perfect-scrollbar "^1.4.0" polished "^3.6.5" - prismjs "^1.20.0" + prismjs "^1.22.0" prop-types "^15.7.2" react-tabs "^3.1.1" slugify "^1.4.4" @@ -1971,48 +1971,18 @@ tslib "^2.0.0" url-template "^2.0.8" -"@redocly/redoc-int@^2.0.0-rc.48": - version "2.0.0-rc.48" - resolved "https://registry.yarnpkg.com/@redocly/redoc-int/-/redoc-int-2.0.0-rc.48.tgz#3ecdff900a04567da7b69941430f2b56fbd91b7f" - integrity sha512-+jgTNVU6KkNe8lm14tdOJZUWWiWJJ/BPRVOpNPDJCj7fu3Q0P7+OpW0PtZM6ZQ24b3Rv1P+MG9f3jhSW6YKPIA== - dependencies: - "@redocly/react-dropdown-aria" "^2.0.11" - "@types/node" "^13.11.1" - classnames "^2.2.6" - decko "^1.2.0" - dompurify "^2.0.12" - eventemitter3 "^4.0.4" - json-pointer "^0.6.0" - json-schema-ref-parser "^6.1.0" - lunr "2.3.8" - mark.js "^8.11.1" - marked "^0.7.0" - memoize-one "~5.1.1" - mobx-react "^6.2.2" - openapi-sampler "^1.0.0-beta.16" - perfect-scrollbar "^1.4.0" - polished "^3.6.5" - prismjs "^1.20.0" - prop-types "^15.7.2" - react-tabs "^3.1.1" - slugify "^1.4.4" - stickyfill "^1.1.1" - swagger2openapi "^6.2.1" - tslib "^2.0.0" - url-template "^2.0.8" - -"@redocly/reference-docs-lib@^1.3.2": - version "1.3.2" - resolved "https://registry.yarnpkg.com/@redocly/reference-docs-lib/-/reference-docs-lib-1.3.2.tgz#eff209154de08632c712092fb6b3fba622b57123" - integrity sha512-IeS6NJGGXo4mU6BjWiEy7mtD69evJ/41mdt4BFQvANoRcAhTMz7XMBcfI3wfAxt8QA1+k5g6TVd9T2YWQYIFFw== +"@redocly/reference-docs-lib@1.3.10": + version "1.3.10" + resolved "https://registry.yarnpkg.com/@redocly/reference-docs-lib/-/reference-docs-lib-1.3.10.tgz#fefd08b8733deec572b9d9fc3c28e7b9be24aaf9" + integrity sha512-f2Vyv8kC4EVHZchRICdgBcu8TVyf9FJwBFhJUuIx+b5QasaBv7UXP2MI5DD14Ltwq3Dmzz31L6i+yDZENLCZww== dependencies: - "@redocly/redoc-int" "^2.0.0-rc.48" + "@redocly/redoc-int" "^2.0.0-rc.55" "@redocly/vscode-json-languageservice" "^3.4.7" codemirror "^5.52.2" core-js "^3.5.0" deepmerge "^4.2.2" fast-deep-equal "^3.1.3" - handlebars "^4.5.3" + handlebars "^4.7.6" hotkeys-js "^3.7.6" informed "^3.6.1" lunr "^2.3.8" @@ -8001,7 +7971,7 @@ handle-thing@^2.0.0: resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e" integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg== -handlebars@^4.5.3, handlebars@^4.7.3: +handlebars@^4.7.3, handlebars@^4.7.6: version "4.7.6" resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.6.tgz#d4c05c1baf90e9945f77aa68a7a219aa4a7df74e" integrity sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA== @@ -10729,17 +10699,17 @@ mkdirp@^1.0.3, mkdirp@^1.0.4: resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== -mobx-react-lite@^2.2.0: - version "2.2.2" - resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-2.2.2.tgz#87c217dc72b4e47b22493daf155daf3759f868a6" - integrity sha512-2SlXALHIkyUPDsV4VTKVR9DW7K3Ksh1aaIv3NrNJygTbhXe2A9GrcKHZ2ovIiOp/BXilOcTYemfHHZubP431dg== +mobx-react-lite@^3.1.6: + version "3.1.6" + resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-3.1.6.tgz#e7f4809ab66edd1acca5adb00c6b88c600ae1952" + integrity sha512-MM3x9BLt5nC7iE/ILA5n2+hfrplEKYbFjqROEuGkzBdZP/KD+Z44+2gseczRrTG0xFuiPWfEzgT68+6/zqOiEw== -mobx-react@^6.2.2: - version "6.3.1" - resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-6.3.1.tgz#204f9756e42e19d91cb6598837063b7e7de87c52" - integrity sha512-IOxdJGnRSNSJrL2uGpWO5w9JH5q5HoxEqwOF4gye1gmZYdjoYkkMzSGMDnRCUpN/BNzZcFoMdHXrjvkwO7KgaQ== +mobx-react@^7.0.5: + version "7.0.5" + resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-7.0.5.tgz#a458ec3fd44349d398274eb08aec1abe9b5129ff" + integrity sha512-WmHl3Ni30ujVcOOnllmGmyccsbfFCKtAwpkIwncwxhgLcvXcE0Wa9lGJIhoqQdTJzGr0AJqGzMVAdwNc3Fj2DQ== dependencies: - mobx-react-lite "^2.2.0" + mobx-react-lite "^3.1.6" mobx@^6.0.1: version "6.0.1" @@ -11361,7 +11331,7 @@ open@^7.0.3: is-docker "^2.0.0" is-wsl "^2.1.1" -openapi-sampler@^1.0.0-beta.16: +openapi-sampler@^1.0.0-beta.18: version "1.0.0-beta.18" resolved "https://registry.yarnpkg.com/openapi-sampler/-/openapi-sampler-1.0.0-beta.18.tgz#9e0845616a669e048860625ea5c10d0f554f1b53" integrity sha512-nG/0kvvSY5FbrU5A+Dbp1xTQN++7pKIh87/atryZlxrzDuok5Y6TCbpxO1jYqpUKLycE4ReKGHCywezngG6xtQ== @@ -12489,7 +12459,7 @@ pretty-format@^25.5.0: ansi-styles "^4.0.0" react-is "^16.12.0" -prismjs@^1.16.0, prismjs@^1.20.0: +prismjs@^1.16.0, prismjs@^1.22.0: version "1.22.0" resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.22.0.tgz#73c3400afc58a823dd7eed023f8e1ce9fd8977fa" integrity sha512-lLJ/Wt9yy0AiSYBf212kK3mM5L8ycwlyTlSxHBAneXLR0nzFMlZ5y7riFPF3E33zXOF2IH95xdY5jIyZbM9z/w== From 19f8fdcde923cd263715eb881e11dd36d2fca764 Mon Sep 17 00:00:00 2001 From: romanhotsiy Date: Thu, 3 Dec 2020 11:04:07 +0400 Subject: [PATCH 2/4] chore: customize sidebar menu item --- _override/MenuItem.tsx | 148 +++++++++++++++++++++++++++++++++++++++++ theme.ts | 1 + 2 files changed, 149 insertions(+) create mode 100644 _override/MenuItem.tsx diff --git a/_override/MenuItem.tsx b/_override/MenuItem.tsx new file mode 100644 index 00000000..15e56ec4 --- /dev/null +++ b/_override/MenuItem.tsx @@ -0,0 +1,148 @@ +import * as React from 'react'; +import styled from 'styled-components'; +import { lighten } from 'polished'; + +import { MenuItemProps, Link, Arrow, OperationBadge } from '@redocly/ui'; +import { theme } from '../theme'; + +export default function MenuItem(props: MenuItemProps) { + const { + item: { active, expanded, items, link, label, type, httpVerb, external, target }, + depth, + isExpanded, + isAlwaysExpanded, + } = props; + + const hasChildren = items && items.length > 0; + const ItemTitleComponent = depth === 0 ? HeaderItem : NestedItem; + const arrowDirection = isExpanded ? 'down' : 'right'; + + const element = + type === 'separator' ? ( + {label} + ) : ( + + {hasChildren && ( + + {(props.item.menuStyle === 'drilldown' || !isAlwaysExpanded) && ( + + )} + + )} + {httpVerb && ( +
+ {httpVerb} +
+ )} + {label} + + + ); + + return link ? ( + + {element} + + ) : ( + element + ); +} + +const MenuItemTitle = styled.div<{ + expanded: boolean; + active: boolean; + isAlwaysExpanded: boolean; +}>` + position: relative; + display: flex; + justify-content: space-between; + + font-family: ${({ theme }) => theme.typography.headings.fontFamily}; + + border-left: ${({active}) => active ? '4px solid #DC1928' : '4px solid transparent'}; + + color: ${props => (props.active ? props.theme.sidebar.activeTextColor : 'inherit')}; + background-color: ${props => (props.active ? props.theme.sidebar.activeBgColor : 'inherit')}; + + cursor: ${({ isAlwaysExpanded }) => (isAlwaysExpanded ? 'default' : 'pointer')}; + opacity: 1; + font-size: 0.929em; + padding: 12.5px 20px; + transition: background-color 0.3s, color 0.3s; + :hover { + color: ${({ isAlwaysExpanded, theme }) => + isAlwaysExpanded ? 'inherit' : theme.sidebar.activeTextColor}; + background-color: ${({ isAlwaysExpanded, theme }) => + isAlwaysExpanded ? 'inherit' : lighten(0.04, theme.sidebar.activeBgColor)}; + } + + :empty { + padding: 0; + } +`; + +const NestedItem = styled(MenuItemTitle)<{ depth: number }>` + color: inherit; + padding-left: ${({ depth }) => `${(depth + 1) * 20}px`}; + + :hover { + color: inherit; + } +`; + +const HeaderItem = styled(MenuItemTitle)<{ depth: number }>` + position: relative; +`; + +const Separator = styled.span<{ depth?: number }>` + display: block; + padding: 12.5px 20px; + padding-left: ${({ depth = 0 }) => `${(depth + 1) * 20}px`}; + padding-bottom: 2px; + position: relative; + cursor: default; + font-family: ${({ theme }) => theme.typography.headings.fontFamily}; + font-size: 0.8em; + text-transform: uppercase; + opacity: 0.8; + + &:before { + content: ''; + border-left: 3px solid ${({ theme }) => theme.colors.border.light}; + position: absolute; + top: -50%; + bottom: -50%; + left: -12px; + z-index: 1; + } + + &:empty { + padding: 0.1em 0; + } + + &:empty:before { + top: -1.5em; + bottom: -1.5em; + } +`; + +const MenuLabel = styled.span` + width: 100%; +`; + +const ArrowWrapper = styled.div` + margin-right: 5px; +`; diff --git a/theme.ts b/theme.ts index b5266ced..c6c4f441 100644 --- a/theme.ts +++ b/theme.ts @@ -13,6 +13,7 @@ export const theme = { // large: '1200px', // }, colors: { + background: '#F3F4F5', // tonalOffset: 0.2, primary: { main: '#227a88', From b3eb7f59f9f67dba03823b2f0dca2df2b82149ef Mon Sep 17 00:00:00 2001 From: romanhotsiy Date: Thu, 17 Dec 2020 14:02:58 +0200 Subject: [PATCH 3/4] chore: upgrade to beta.96 --- package.json | 2 +- yarn.lock | 30 +++++++++++++++--------------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 282f330a..00e5d3a6 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,6 @@ "clean": "redocly-portal clean" }, "dependencies": { - "@redocly/developer-portal": "1.0.0-beta.94" + "@redocly/developer-portal": "1.0.0-beta.96" } } diff --git a/yarn.lock b/yarn.lock index f39a0b73..1a3281ff 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1787,10 +1787,10 @@ dependencies: tslib "^2.0.0" -"@redocly/developer-portal@1.0.0-beta.94": - version "1.0.0-beta.94" - resolved "https://registry.yarnpkg.com/@redocly/developer-portal/-/developer-portal-1.0.0-beta.94.tgz#40980d36778addb3c8443472d81d7bfbaf37bfc2" - integrity sha512-57pWb2ddEx38qas/TVVGtGdHVeT2kwFSAKdulsEh3qBzCRfLtxgbmfbP5VVPSlmW94hEwc0/YEMRjVso2pbYpg== +"@redocly/developer-portal@1.0.0-beta.96": + version "1.0.0-beta.96" + resolved "https://registry.yarnpkg.com/@redocly/developer-portal/-/developer-portal-1.0.0-beta.96.tgz#03f3875f35af43047169a129ad20f9cb4d129f4b" + integrity sha512-EHnLRfXMOKDbk5kpkQZXuu1VANiU0Pa0DPuDCgwlByS1ckCgIN6Hd+F2u+4cRUYlp95uYHmRLU+6Uh7TWOZY8A== dependencies: "@babel/core" "^7.6.2" "@babel/preset-env" "^7.6.2" @@ -1801,8 +1801,8 @@ "@redocly/gatsby-plugin-sharp" "^2.6.11" "@redocly/gatsby-remark-images" "^3.3.11" "@redocly/openapi-cli" "~0.12.1" - "@redocly/redoc-int" "^2.0.0-rc.55" - "@redocly/reference-docs-lib" "1.3.10" + "@redocly/redoc-int" "^2.0.0-rc.58" + "@redocly/reference-docs-lib" "1.3.16" babel-plugin-styled-components "^1.10.7" chalk "^3.0.0" core-js "^2.6.9" @@ -1941,10 +1941,10 @@ resolved "https://registry.yarnpkg.com/@redocly/react-dropdown-aria/-/react-dropdown-aria-2.0.11.tgz#532b864b329237e646abe45d0f8edc923e77370a" integrity sha512-rmuSC2JFFl4DkPDdGVrmffT9KcbG2AB5jvhxPIrOc1dO9mHRMUUftQY35KZlvWqqSSqVn+AM+J9dhiTo1ZqR8A== -"@redocly/redoc-int@^2.0.0-rc.55": - version "2.0.0-rc.55" - resolved "https://registry.yarnpkg.com/@redocly/redoc-int/-/redoc-int-2.0.0-rc.55.tgz#2217e02809160fc5fb0ac4d2c6d08a92f1fde9ef" - integrity sha512-D5JdPHgmtUS6yqJsPi1YxN3h5DpflfIUAR84YjL2AIjCXfWiFqh8FZ/bgoMvlNYfikqBijXZ7lFxZ4R5dWd2vQ== +"@redocly/redoc-int@^2.0.0-rc.57", "@redocly/redoc-int@^2.0.0-rc.58": + version "2.0.0-rc.58" + resolved "https://registry.yarnpkg.com/@redocly/redoc-int/-/redoc-int-2.0.0-rc.58.tgz#221b1ffb089fca4a1fdbd79d0a5161a8a1c41b01" + integrity sha512-epApZ9XHAhxyYK3YvuvqFNnLNHSr3xC+59hnsXNQJYdcJfro6zr5qmqcNKBHH/fd2P9DyJTLanmFHagApXjfiQ== dependencies: "@redocly/react-dropdown-aria" "^2.0.11" "@types/node" "^13.11.1" @@ -1971,12 +1971,12 @@ tslib "^2.0.0" url-template "^2.0.8" -"@redocly/reference-docs-lib@1.3.10": - version "1.3.10" - resolved "https://registry.yarnpkg.com/@redocly/reference-docs-lib/-/reference-docs-lib-1.3.10.tgz#fefd08b8733deec572b9d9fc3c28e7b9be24aaf9" - integrity sha512-f2Vyv8kC4EVHZchRICdgBcu8TVyf9FJwBFhJUuIx+b5QasaBv7UXP2MI5DD14Ltwq3Dmzz31L6i+yDZENLCZww== +"@redocly/reference-docs-lib@1.3.16": + version "1.3.16" + resolved "https://registry.yarnpkg.com/@redocly/reference-docs-lib/-/reference-docs-lib-1.3.16.tgz#506cb3161105134cbe9182d4289207c02d2249ec" + integrity sha512-jJktf+n+5TBbbmDJeo8MQWohjUw13DjtWFdAPdMwUSQu0xTBlJ8/q6bA9avOq/YGVoqrlOeCw0o9a6+6y0DgZg== dependencies: - "@redocly/redoc-int" "^2.0.0-rc.55" + "@redocly/redoc-int" "^2.0.0-rc.57" "@redocly/vscode-json-languageservice" "^3.4.7" codemirror "^5.52.2" core-js "^3.5.0" From 1d01b62ca63eb6616157cdf63c52d987516d19b8 Mon Sep 17 00:00:00 2001 From: romanhotsiy Date: Thu, 17 Dec 2020 14:03:07 +0200 Subject: [PATCH 4/4] chore: add menu override --- _override/Menu.tsx | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 _override/Menu.tsx diff --git a/_override/Menu.tsx b/_override/Menu.tsx new file mode 100644 index 00000000..67b33cac --- /dev/null +++ b/_override/Menu.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { MenuItems, MenuMobileButton, MenuWrapper, MenuProps, navigate } from '@redocly/ui'; + +export default function UserMenu(props: MenuProps) { + const { className, items, navbarHeight, location } = props; + + const [mobileOpened, setMobileOpened] = React.useState(false); + + const toggleMobile = React.useCallback(() => { + setMobileOpened(!mobileOpened); + }, [mobileOpened]); + + React.useEffect(() => { + setMobileOpened(false); + }, [location.pathname]); + + return ( + <> + + + + + + ); +} + +const StyledMenuWrapper = styled(MenuWrapper)` + border-right: 1px solid #f0f0f0; + padding: 20px 10px 10px 10px; +`;