From f3188711e14b1104b3ef5496daa7dcf1f23f606a Mon Sep 17 00:00:00 2001 From: certevolte Date: Fri, 9 May 2025 10:05:37 +0200 Subject: [PATCH 01/18] feat: add deprecated property to TableOfContentsNode items --- packages/elements/src/components/API/utils.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/elements/src/components/API/utils.ts b/packages/elements/src/components/API/utils.ts index 66d8d9e0b..2b01d761a 100644 --- a/packages/elements/src/components/API/utils.ts +++ b/packages/elements/src/components/API/utils.ts @@ -164,12 +164,15 @@ const addTagGroupsToTree = ( if (hideInternal && isInternal(node)) { return; } + const data = (node as OperationNode | WebhookNode).data; tree.push({ id: node.uri, slug: node.uri, title: node.name, type: node.type, meta: isHttpOperation(node.data) || isHttpWebhookOperation(node.data) ? node.data.method : '', + //add a `deprecated` flag + deprecated: (data as any)?.deprecated === true, }); }); @@ -184,6 +187,8 @@ const addTagGroupsToTree = ( title: node.name, type: node.type, meta: isHttpOperation(node.data) || isHttpWebhookOperation(node.data) ? node.data.method : '', + //Exposing the `data` property + data: node.data, }; }); if (items.length > 0) { From 0b175d2e472a7aca12455f33017722f84e868f9a Mon Sep 17 00:00:00 2001 From: certevolte Date: Fri, 9 May 2025 10:13:14 +0200 Subject: [PATCH 02/18] feat: render deprecated endpoints with strikethrough in sidebar --- .../components/TableOfContents/TableOfContents.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx index e0cfd7485..a63e391b1 100644 --- a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx +++ b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx @@ -1,7 +1,7 @@ import { Box, Flex, Icon, ITextColorProps } from '@stoplight/mosaic'; import { HttpMethod, NodeType } from '@stoplight/types'; import * as React from 'react'; - +import { Text } from '@stoplight/mosaic'; // in cima al file, se non già importato import { useFirstRender } from '../../hooks/useFirstRender'; import { resolveRelativeLink } from '../../utils/string'; import { VersionBadge } from '../Docs/HttpOperation/Badges'; @@ -302,8 +302,9 @@ const Item = React.memo<{ icon?: React.ReactElement; meta?: React.ReactNode; isInResponsiveMode?: boolean; + isDeprecated?: boolean; onClick?: (e: React.MouseEvent) => void; -}>(({ depth, isActive, id, title, meta, icon, isInResponsiveMode, onClick }) => { +}>(({ depth, isActive, id, title, meta, icon, isInResponsiveMode,isDeprecated, onClick }) => { return ( + {title} + @@ -354,7 +360,7 @@ const Node = React.memo<{ const activeId = React.useContext(ActiveIdContext); const isActive = activeId === item.slug || activeId === item.id; const LinkComponent = React.useContext(LinkContext); - + const isDeprecated = isNode(item) && item.data?.deprecated === true; const handleClick = (e: React.MouseEvent) => { if (isActive) { // Don't trigger link click when we're active @@ -391,6 +397,7 @@ const Node = React.memo<{ meta={meta} isInResponsiveMode={isInResponsiveMode} onClick={handleClick} + isDeprecated={isDeprecated} /> ); From dfffc0cb76516d8c6de19c1d3f25120e7213fa00 Mon Sep 17 00:00:00 2001 From: certevolte Date: Fri, 9 May 2025 10:15:47 +0200 Subject: [PATCH 03/18] feat: extend TableOfContentsNode type with optional `data.deprecated` field This allows the UI to detect whether a node is deprecated and display visual indicators accordingly. --- .../elements-core/src/components/TableOfContents/types.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/elements-core/src/components/TableOfContents/types.ts b/packages/elements-core/src/components/TableOfContents/types.ts index e3c69e15d..68d0a085c 100644 --- a/packages/elements-core/src/components/TableOfContents/types.ts +++ b/packages/elements-core/src/components/TableOfContents/types.ts @@ -46,6 +46,10 @@ export type TableOfContentsNode< type: T; meta: string; version?: string; + data?: { + deprecated?: boolean; + }; + [key: string]: unknown; }; export type TableOfContentsNodeGroup = TableOfContentsNode<'http_service'> & TableOfContentsGroup; From d1938e3ca373a5e758aa3708dccda9de432f34f6 Mon Sep 17 00:00:00 2001 From: certevolte Date: Fri, 9 May 2025 10:22:04 +0200 Subject: [PATCH 04/18] feat: propagate `deprecated` flag from operation data into TOC items MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Extracts 'deprecated? from each node’s data and assigns it to the TOC structure so the sidebar can reflect it visually. --- .../elements-core/src/components/TableOfContents/utils.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/elements-core/src/components/TableOfContents/utils.ts b/packages/elements-core/src/components/TableOfContents/utils.ts index 3617712dc..4205d3f8a 100644 --- a/packages/elements-core/src/components/TableOfContents/utils.ts +++ b/packages/elements-core/src/components/TableOfContents/utils.ts @@ -39,7 +39,9 @@ export function hasActiveItem(items: TableOfContentsGroupItem[], activeId: strin } if ('items' in item) { - return hasActiveItem(item.items, activeId); + //return hasActiveItem(item.items, activeId); + return hasActiveItem(item.items as TableOfContentsGroupItem[], activeId) + } return false; From 4fd4e14c2fa371d3df6fcce6a1ef9e65c98b0658 Mon Sep 17 00:00:00 2001 From: certevolte Date: Fri, 9 May 2025 10:50:58 +0200 Subject: [PATCH 05/18] Fix tag close --- .../components/TableOfContents/TableOfContents.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx index a63e391b1..d506ef720 100644 --- a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx +++ b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx @@ -333,11 +333,12 @@ const Item = React.memo<{ fontSize={isInResponsiveMode ? 'lg' : 'base'} > - {title} - + textDecoration={isDeprecated ? ('line-through' as const) : undefined} + color={isDeprecated ? 'muted' : undefined} + fontSize={isInResponsiveMode ? 'lg' : 'base'} +> + {title} + From 1962b23d0b84de53ef72b60387c4c1a0cd50e893 Mon Sep 17 00:00:00 2001 From: certevolte Date: Fri, 9 May 2025 13:37:08 +0200 Subject: [PATCH 06/18] style: fix linting and formatting errors from ESLint and Prettier --- .../components/TableOfContents/TableOfContents.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx index d506ef720..46fc9ae5f 100644 --- a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx +++ b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx @@ -332,13 +332,13 @@ const Item = React.memo<{ textOverflow="truncate" fontSize={isInResponsiveMode ? 'lg' : 'base'} > - - {title} - + + {title} + From 194ddbf3f6e5f57f30c18c2ca1060eca601ef75d Mon Sep 17 00:00:00 2001 From: certevolte Date: Fri, 9 May 2025 13:37:43 +0200 Subject: [PATCH 07/18] style: fix linting and formatting errors from ESLint and Prettier --- .../src/components/TableOfContents/TableOfContents.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx index 46fc9ae5f..e552226ca 100644 --- a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx +++ b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx @@ -1,7 +1,7 @@ import { Box, Flex, Icon, ITextColorProps } from '@stoplight/mosaic'; import { HttpMethod, NodeType } from '@stoplight/types'; import * as React from 'react'; -import { Text } from '@stoplight/mosaic'; // in cima al file, se non già importato +import { Text } from '@stoplight/mosaic'; import { useFirstRender } from '../../hooks/useFirstRender'; import { resolveRelativeLink } from '../../utils/string'; import { VersionBadge } from '../Docs/HttpOperation/Badges'; From a625c67fe49c1a9c979767ee3c99622680414e95 Mon Sep 17 00:00:00 2001 From: certevolte Date: Fri, 9 May 2025 13:53:14 +0200 Subject: [PATCH 08/18] fix lint --- .../TableOfContents/TableOfContents.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx index e552226ca..aad1d031c 100644 --- a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx +++ b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx @@ -304,7 +304,7 @@ const Item = React.memo<{ isInResponsiveMode?: boolean; isDeprecated?: boolean; onClick?: (e: React.MouseEvent) => void; -}>(({ depth, isActive, id, title, meta, icon, isInResponsiveMode,isDeprecated, onClick }) => { + }>(({ depth, isActive, id, title, meta, icon, isInResponsiveMode,isDeprecated, onClick }) => { return ( - - {title} - + + {title} + From b44ac1d73cd85feafc17e05b9d01cee5a5c0b284 Mon Sep 17 00:00:00 2001 From: certevolte Date: Fri, 9 May 2025 14:14:45 +0200 Subject: [PATCH 09/18] Fix lint --- packages/elements/src/components/API/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/elements/src/components/API/utils.ts b/packages/elements/src/components/API/utils.ts index 2b01d761a..d9df7280c 100644 --- a/packages/elements/src/components/API/utils.ts +++ b/packages/elements/src/components/API/utils.ts @@ -187,7 +187,7 @@ const addTagGroupsToTree = ( title: node.name, type: node.type, meta: isHttpOperation(node.data) || isHttpWebhookOperation(node.data) ? node.data.method : '', - //Exposing the `data` property + //Exposing the `data` property data: node.data, }; }); From 885033732006834e2268cd2775457b752260c073 Mon Sep 17 00:00:00 2001 From: certevolte Date: Fri, 9 May 2025 14:34:21 +0200 Subject: [PATCH 10/18] fix lint - 1 --- .../src/components/TableOfContents/TableOfContents.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx index aad1d031c..98eeec4f8 100644 --- a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx +++ b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx @@ -1,7 +1,6 @@ -import { Box, Flex, Icon, ITextColorProps } from '@stoplight/mosaic'; +import { Box, Flex, Icon, ITextColorProps, Text } from '@stoplight/mosaic'; import { HttpMethod, NodeType } from '@stoplight/types'; import * as React from 'react'; -import { Text } from '@stoplight/mosaic'; import { useFirstRender } from '../../hooks/useFirstRender'; import { resolveRelativeLink } from '../../utils/string'; import { VersionBadge } from '../Docs/HttpOperation/Badges'; @@ -304,7 +303,7 @@ const Item = React.memo<{ isInResponsiveMode?: boolean; isDeprecated?: boolean; onClick?: (e: React.MouseEvent) => void; - }>(({ depth, isActive, id, title, meta, icon, isInResponsiveMode,isDeprecated, onClick }) => { +}>(({ depth, isActive, id, title, meta, icon, isInResponsiveMode,isDeprecated, onClick }) => { return ( Date: Fri, 9 May 2025 14:36:23 +0200 Subject: [PATCH 11/18] Fix lint - 2 --- .../elements-core/src/components/TableOfContents/utils.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/elements-core/src/components/TableOfContents/utils.ts b/packages/elements-core/src/components/TableOfContents/utils.ts index 4205d3f8a..a9b3ee419 100644 --- a/packages/elements-core/src/components/TableOfContents/utils.ts +++ b/packages/elements-core/src/components/TableOfContents/utils.ts @@ -33,17 +33,12 @@ export function hasActiveItem(items: TableOfContentsGroupItem[], activeId: strin if ('slug' in item && activeId === item.slug) { return true; } - if ('id' in item && activeId === item.id) { return true; } - if ('items' in item) { - //return hasActiveItem(item.items, activeId); - return hasActiveItem(item.items as TableOfContentsGroupItem[], activeId) - + return hasActiveItem(item.items as TableOfContentsGroupItem[], activeId) } - return false; }); } From e3912a4c8d75e324c529b13a51a515664cef216a Mon Sep 17 00:00:00 2001 From: certevolte Date: Fri, 9 May 2025 14:49:54 +0200 Subject: [PATCH 12/18] fix lint -3 --- .../src/components/TableOfContents/TableOfContents.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx index 98eeec4f8..63800b333 100644 --- a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx +++ b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx @@ -303,7 +303,7 @@ const Item = React.memo<{ isInResponsiveMode?: boolean; isDeprecated?: boolean; onClick?: (e: React.MouseEvent) => void; -}>(({ depth, isActive, id, title, meta, icon, isInResponsiveMode,isDeprecated, onClick }) => { +}>(({ depth, isActive, id, title, meta, icon, isInResponsiveMode, isDeprecated, onClick }) => { return ( Date: Fri, 9 May 2025 14:50:52 +0200 Subject: [PATCH 13/18] Fix lint - 4 --- packages/elements-core/src/components/TableOfContents/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/elements-core/src/components/TableOfContents/utils.ts b/packages/elements-core/src/components/TableOfContents/utils.ts index a9b3ee419..a542e54ee 100644 --- a/packages/elements-core/src/components/TableOfContents/utils.ts +++ b/packages/elements-core/src/components/TableOfContents/utils.ts @@ -37,7 +37,7 @@ export function hasActiveItem(items: TableOfContentsGroupItem[], activeId: strin return true; } if ('items' in item) { - return hasActiveItem(item.items as TableOfContentsGroupItem[], activeId) + return hasActiveItem(item.items as TableOfContentsGroupItem[], activeId); } return false; }); From 8974604765d74bd680cafaf90b53c52cf2d44a92 Mon Sep 17 00:00:00 2001 From: certevolte Date: Fri, 9 May 2025 14:56:18 +0200 Subject: [PATCH 14/18] fix lint - 4 --- .../src/components/TableOfContents/TableOfContents.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx index 63800b333..183eb4f24 100644 --- a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx +++ b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx @@ -1,6 +1,7 @@ +import * as React from 'react'; import { Box, Flex, Icon, ITextColorProps, Text } from '@stoplight/mosaic'; import { HttpMethod, NodeType } from '@stoplight/types'; -import * as React from 'react'; + import { useFirstRender } from '../../hooks/useFirstRender'; import { resolveRelativeLink } from '../../utils/string'; import { VersionBadge } from '../Docs/HttpOperation/Badges'; From 3d6a755aa2c12d7ba3456e9148a5308605cd37da Mon Sep 17 00:00:00 2001 From: certevolte Date: Fri, 9 May 2025 15:12:38 +0200 Subject: [PATCH 15/18] fix lint - 5 --- .../src/components/TableOfContents/TableOfContents.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx index 183eb4f24..23ecf45ae 100644 --- a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx +++ b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx @@ -5,6 +5,7 @@ import { HttpMethod, NodeType } from '@stoplight/types'; import { useFirstRender } from '../../hooks/useFirstRender'; import { resolveRelativeLink } from '../../utils/string'; import { VersionBadge } from '../Docs/HttpOperation/Badges'; + import { NODE_GROUP_ICON, NODE_GROUP_ICON_COLOR, @@ -13,6 +14,7 @@ import { NODE_TYPE_META_ICON, NODE_TYPE_TITLE_ICON, } from './constants'; + import { CustomLinkComponent, TableOfContentsDivider, @@ -22,6 +24,7 @@ import { TableOfContentsNodeGroup, TableOfContentsProps, } from './types'; + import { getHtmlIdFromItemId, hasActiveItem, From b58303d9091f447204f5e3c243d4efa87c5bd0af Mon Sep 17 00:00:00 2001 From: certevolte Date: Fri, 9 May 2025 17:37:56 +0200 Subject: [PATCH 16/18] fix lint in import --- .../src/components/TableOfContents/TableOfContents.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx index 23ecf45ae..c011a11ba 100644 --- a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx +++ b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; + import { Box, Flex, Icon, ITextColorProps, Text } from '@stoplight/mosaic'; import { HttpMethod, NodeType } from '@stoplight/types'; From 6552fbe13a054a757bba753ed81416ec06d8f2c4 Mon Sep 17 00:00:00 2001 From: certevolte Date: Fri, 9 May 2025 17:57:14 +0200 Subject: [PATCH 17/18] Re-fix Lint --- .../src/components/TableOfContents/TableOfContents.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx index c011a11ba..1c857b0ac 100644 --- a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx +++ b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx @@ -1,12 +1,10 @@ -import * as React from 'react'; - import { Box, Flex, Icon, ITextColorProps, Text } from '@stoplight/mosaic'; import { HttpMethod, NodeType } from '@stoplight/types'; +import * as React from 'react'; import { useFirstRender } from '../../hooks/useFirstRender'; import { resolveRelativeLink } from '../../utils/string'; import { VersionBadge } from '../Docs/HttpOperation/Badges'; - import { NODE_GROUP_ICON, NODE_GROUP_ICON_COLOR, @@ -15,7 +13,6 @@ import { NODE_TYPE_META_ICON, NODE_TYPE_TITLE_ICON, } from './constants'; - import { CustomLinkComponent, TableOfContentsDivider, From 28cc399fb10e161d70c3a29ae1e5c2c0914f2ae2 Mon Sep 17 00:00:00 2001 From: certevolte Date: Mon, 12 May 2025 13:42:40 +0200 Subject: [PATCH 18/18] Update TableOfContents.tsx --- .../src/components/TableOfContents/TableOfContents.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx index 1c857b0ac..dd2e12d77 100644 --- a/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx +++ b/packages/elements-core/src/components/TableOfContents/TableOfContents.tsx @@ -1,7 +1,6 @@ import { Box, Flex, Icon, ITextColorProps, Text } from '@stoplight/mosaic'; import { HttpMethod, NodeType } from '@stoplight/types'; import * as React from 'react'; - import { useFirstRender } from '../../hooks/useFirstRender'; import { resolveRelativeLink } from '../../utils/string'; import { VersionBadge } from '../Docs/HttpOperation/Badges';